/* ============================================================
   HUF — Componentes de medios: Thumb · MediaFrame · Progress
   ------------------------------------------------------------
   Vehículos: <hd-thumb> · <hd-media-frame> · <hd-progress>
   (AdminPortal/TagHelpers/HdMediaTagHelper.cs).

   Los tres existían como `style=` en línea repartidos por las
   pantallas que muestran una imagen de producto, una evidencia de
   ingreso, un QR de mesa o el avance de un proceso en el navegador.
   Son medidas del sistema, no de una pantalla: viven aquí.
   ============================================================ */

/* ── Miniatura ────────────────────────────────────────────────
   44px es la altura de control de HVL §5.1: una miniatura en celda
   ocupa exactamente lo que un botón, así que la fila no crece. */
.hd-thumb {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--hd-radius-sm);
    background: var(--hd-color-inset);
}

/* Marcador cuando el registro no tiene imagen: el hueco se ve igual
   de alto, o la fila sin foto se lee más baja que las demás. */
.hd-thumb--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--hd-theme-text-muted);
}

/* Ampliable: solo cuando hay una versión mayor que mirar. El cursor
   es la única señal — nada de overlays ni lupas decorativas. */
.hd-thumb--zoom {
    cursor: zoom-in;
}

.hd-thumb--lg {
    width: 56px;
    height: 56px;
}

/* La imagen a tamaño completo dentro de un modal (lightbox). */
.hd-thumb--full {
    width: 100%;
    height: auto;
    border-radius: var(--hd-radius-md);
}

/* ── Marco de medios ──────────────────────────────────────────
   Caja acotada para contenido embebido que no controlamos: una foto
   subida, un PDF, una tabla larga dentro de un modal. Acota el alto
   y encierra el scroll para que el contenido ajeno no estire la
   pantalla. */
.hd-media-frame {
    border: 1px solid var(--hd-color-border);
    border-radius: var(--hd-radius-md);
    max-height: 55vh;
    overflow: auto;
    background: var(--hd-color-inset);
}

.hd-media-frame img,
.hd-media-frame embed {
    display: block;
    width: 100%;
}

.hd-media-frame embed {
    height: 55vh;
}

/* Para tablas: el fondo es el del panel, no el inset, o las filas
   quedan sobre una superficie que no les corresponde. */
.hd-media-frame--table {
    max-height: 40vh;
    background: var(--hd-theme-surface);
}

/* ── Barra de progreso ────────────────────────────────────────
   Avance de un proceso que corre en el navegador (OCR, lectura de un
   archivo). Solo para progreso REAL medible: si no se sabe cuánto
   falta, va un texto, no una barra animada fingiendo saberlo. */
.hd-progress {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-1);
    margin-bottom: var(--hd-space-2);
}

.hd-progress__track {
    height: 4px;
    background: var(--hd-color-inset);
    border-radius: 2px;
    overflow: hidden;
}

/* La barra sí lleva acento: está pasando ahora mismo — es
   exactamente el caso que HVL §4.2 reserva para la línea de energía. */
.hd-progress__bar {
    height: 100%;
    width: 0;
    background: var(--hd-theme-accent);
    transition: width var(--hd-motion-standard) var(--hd-ease);
}