/*
    ══════════════════════════════════════════════════════════════════════════
    INVENTARIO — lo que sólo es de esta pantalla
    ══════════════════════════════════════════════════════════════════════════

    El formato —cabecera, filtros, franja de indicadores, tabla de alto de
    ventana, ficha emergente— vive en pantalla.css con el prefijo .pan-. Aquí
    va únicamente lo que no se puede escribir sin saber que se está hablando de
    existencias de bodega: el reparto de las ocho columnas de filtros, las
    cuatro del tablero, la tarjeta de la galería y el bloque de resumen de la
    ficha.

    Se carga DESPUÉS de pantalla.css en index.html, que es lo que permite que
    las pistas de aquí ganen a las de allá sin recurrir a !important.

    Regla de oro del módulo: si una regla lleva el nombre de un dato del
    negocio —«mínimo», «kardex», «galería de artículos»— va aquí. Si describe
    una cabecera, un indicador o una celda, va en pantalla.css y la usan todas.
*/

/* ═══════════════════ Rejilla de filtros ═══════════════════ */

/*
    Ocho pistas, una por control.

    La de ámbito es la ancha a propósito: lleva nombres de estante y nombres de
    persona —«Casa de máquinas · Estante 3», «Wilfredo Ramírez de León»— y es la
    única con la que se navega. Recortarla a 132 px como las demás obligaría a
    abrir el desplegable para leer lo que ya está elegido.

    Sección se dimensiona sola —«auto»— porque su ancho lo ponen los cuatro
    rótulos de la barra, y Clase igual con los suyos.
*/
.inv-filtros {
    grid-template-columns:
        auto                /* Sección: EXISTENCIAS · INGRESOS · SALIDAS · DOCUMENTOS */
        minmax(190px, 1.3fr)/* Ámbito, que es el que se lee */
        auto                /* Clase: EQUIPO · CONSUMO */
        140px               /* Categoría */
        152px               /* Existencia o trámite */
        124px               /* Período */
        minmax(170px, 1fr)  /* Búsqueda */
        auto;               /* Acciones */
}

/*
    Marcadores sin efecto propio: el ancho lo pone la pista de la rejilla, por
    posición. Se conservan en el marcado porque dicen de un vistazo qué anchura
    le toca a cada control, y porque si algún día hay que reordenar las columnas
    son la única pista de cuál era cuál.
*/
.inv-filtro-seccion,
.inv-filtro-ambito,
.inv-filtro-clase,
.inv-filtro-sm,
.inv-filtro-busqueda { /* marcadores */ }

/*
    Una entrada del desplegable de ámbito: icono y rótulo en una línea, con la
    sangría del árbol puesta en línea desde el marcado —depende del nivel, que
    es un dato— y no desde aquí.
*/
.inv-opcion {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.inv-opcion .rzi,
.inv-opcion .rz-icon,
.inv-opcion .notranslate {
    font-size: 15px !important;
    color: var(--pan-tenue);
}

/*
    El interruptor tabla/galería son dos iconos sin rótulo. Sin esto, la barra
    de Radzen se estira al ancho de su celda y deja dos botones de 20 px
    flotando en el centro de 120.
*/
.inv-vista.rz-selectbutton {
    display: inline-flex;
    width: auto !important;
}

.inv-vista .rz-button {
    padding-left: 9px;
    padding-right: 9px;
}

/* ═══════════════════ Franja de indicadores ═══════════════════ */

/*
    Cuatro y siempre cuatro: bajo mínimo, agotados, sin mínimo declarado y el
    recuento de renglones. No es una lista que crezca, así que las pistas son
    fijas y no «auto-fit».
*/
.inv-tira {
    grid-template-columns: repeat(4, 1fr);
}

/* La nota que lleva a proponer mínimos (septiembre de 2026): el botón no se
   parte en dos renglones; en el teléfono baja entero, como los demás avisos. */
.inv-minimos-nota > .rz-button { flex-shrink: 0; white-space: nowrap; }

/* ═══════════════════ Celdas propias ═══════════════════ */

/*
    La unidad va pegada a la cifra pero en pequeño y apagada: «12 UND» se lee
    como una sola cosa, y a la vez la columna sigue alineando los números por la
    derecha sin que la unidad los desplace.
*/
.inv-unidad {
    font-family: var(--pan-sans);
    font-size: 10px;
    font-weight: 500;
    color: var(--pan-tenue);
    text-transform: uppercase;
}

/*
    «sin definir» no es un dato ausente sino una tarea pendiente: se marca en
    ámbar y en cursiva para que se distinga de un guion, que es lo que se pone
    cuando de verdad no hay nada que poner.
*/
.inv-sin-minimo {
    font-size: 11px;
    font-style: italic;
    color: var(--pan-ambar);
    white-space: nowrap;
}

/* Los dos campos de la edición en línea, uno al lado del otro: mínimo y tope
   se deciden juntos y apilados no cabrían en la fila de 34 px. */
.inv-minimos {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}

.inv-minimos .rz-spinner,
.inv-minimos .rz-numeric {
    min-width: 0;
}

/* La caja del numérico trae 24 px de relleno a la derecha para las flechitas,
   que en 46 px de ancho no dejan sitio para dos dígitos. */
.inv-minimos input {
    padding-left: 5px !important;
    padding-right: 5px !important;
    font-size: 11.5px !important;
    text-align: center;
}

/* ═══════════════════ Galería ═══════════════════ */

/*
    La foto sirve para identificar una pieza cuyo nombre no dice nada —«brida
    3/4 SCH40»—, y por eso la vista se conserva. Lo que no se conserva es la
    tarjeta anterior: un RadzenCard con seis estilos en línea, «max-width:
    420px» y una banda verde de 60 px pintada a mano con rgba(144,198,149,.5),
    que no era de ninguna paleta y no significaba nada.

    La caja hereda de .pan-tarjeta el alto de ventana y el desplazamiento por
    dentro; lo único que añade es que aquí lo que se desplaza es una rejilla de
    tarjetas y no una tabla.
*/
/*
    La caja no declara nada: lleva .pan-tarjeta al lado y de ahí saca la columna
    flexible, el alto de ventana, el marco y el desplazamiento por dentro.
    Repetirlos aquí sólo crearía dos sitios donde cambiar el radio del canto.
    Se conserva la clase porque es la que nombra el bloque en la hoja de impresión.
*/
.inv-galeria-caja { /* marcador */ }

.inv-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 12px;
    align-content: start;
}

.inv-ficha {
    display: flex;
    flex-direction: column;
    background: var(--pan-papel);
    border: 1px solid var(--pan-linea);
    border-radius: 12px;
    box-shadow: var(--pan-sombra-tarjeta);
    overflow: hidden;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.inv-ficha:hover {
    transform: translateY(-2px);
    border-color: var(--pan-azul);
    box-shadow: 0 2px 4px rgba(12, 39, 64, .10), 0 14px 28px -14px rgba(12, 39, 64, .45);
}

/*
    El semáforo se dibuja en el canto superior y no tiñendo la tarjeta: sobre
    una foto, un fondo de color se pelea con la imagen y deja de leerse el
    estado y la imagen a la vez.
*/
.inv-ficha.inv-bajo    { border-color: rgba(184, 84, 27, .55); box-shadow: inset 0 3px 0 var(--pan-ambar), var(--pan-sombra-tarjeta); }
.inv-ficha.inv-agotado { border-color: rgba(211, 47, 20, .55); box-shadow: inset 0 3px 0 var(--pan-rojo),  var(--pan-sombra-tarjeta); }
.inv-ficha.inv-sobre   { border-color: rgba(24, 95, 165, .45); box-shadow: inset 0 3px 0 var(--pan-azul),  var(--pan-sombra-tarjeta); }

.inv-ficha-imagen {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 132px;
    background: #f1f5f9;
    overflow: hidden;
}

/* «contain» y no «cover»: son piezas fotografiadas contra un fondo, y recortar
   una brida por la mitad para llenar el rectángulo la vuelve irreconocible. */
.inv-ficha-imagen img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.inv-ficha-imagen .rzi,
.inv-ficha-imagen .rz-icon {
    font-size: 34px;
    color: #cbd6e2;
}

/*
    El saldo va encima de la foto y no debajo del nombre: es el dato que se
    viene a buscar, y en una rejilla de veinte tarjetas tiene que poder leerse
    sin recorrer el texto.
*/
.inv-ficha-saldo {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(12, 39, 64, .88);
    color: #fff;
    font-family: var(--pan-mono);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}

.inv-ficha-saldo small {
    font-family: var(--pan-sans);
    font-size: 9px;
    font-weight: 500;
    opacity: .75;
}

.inv-agotado .inv-ficha-saldo { background: var(--pan-rojo); }
.inv-bajo    .inv-ficha-saldo { background: var(--pan-ambar); }

.inv-ficha-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    padding: 9px 11px 10px;
    min-width: 0;
}

.inv-ficha-nombre {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--pan-tinta);
    /* Dos líneas y corta: los nombres de artículo van de «Broca» a «Tornillo
       hexagonal grado 8 de 1/2 x 3 galvanizado», y sin el tope la rejilla queda
       con tarjetas de tres alturas distintas. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.inv-ficha-codigo {
    margin: 0;
    font-family: var(--pan-mono);
    font-size: 10px;
    color: var(--pan-tenue);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inv-ficha-sitio {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 3px 0 0;
    font-size: 11px;
    color: var(--pan-apagado);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inv-ficha-sitio .rzi,
.inv-ficha-sitio .rz-icon {
    font-size: 14px !important;
    color: var(--pan-tenue);
}

.inv-ficha-pie {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--pan-linea);
}

.inv-ficha-etiqueta {
    font-size: 9.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pan-tenue);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inv-bajo    .inv-ficha-etiqueta { color: var(--pan-ambar); }
.inv-agotado .inv-ficha-etiqueta { color: var(--pan-rojo); }

/* ═══════════════════ Ficha ═══════════════════ */

/* El encabezado lleva el código sobre el nombre: es el par que identifica un
   renglón de bodega, igual que el documento sobre el proveedor en facturas. */
.inv-ficha-doc {
    font-family: var(--pan-mono);
    font-size: 11px;
    color: var(--pan-tenue);
}

.inv-ficha-titulo {
    font-size: 14px;
    font-weight: 600;
    color: var(--pan-tinta);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
    Las cuatro cifras que resumen el renglón, arriba del kardex. Reutilizan los
    rótulos y los cuerpos de la franja de indicadores —.pan-tira-rotulo,
    -monto, -pie— porque son el mismo tipo de dato leído en el mismo tono; lo
    único propio es el reparto y el marco.
*/
.inv-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.inv-resumen-dato {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 12px;
    background: var(--pan-fondo);
    border: 1px solid var(--pan-linea);
    border-radius: 10px;
    min-width: 0;
}

/* El sitio es texto y no una cifra: hereda el cuerpo del monto para que las
   cuatro tarjetas queden a la misma altura, pero suelta la monoespaciada y se
   deja recortar. */
.inv-resumen-texto {
    font-family: var(--pan-sans) !important;
    font-size: 13px !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inv-nota {
    margin: 0 0 12px;
    padding: 9px 12px;
    background: var(--pan-fondo);
    border-left: 3px solid var(--pan-linea);
    border-radius: 0 8px 8px 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--pan-apagado);
}

.inv-subtitulo {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pan-tenue);
}

/*
    ── El kardex NO es una tabla de alto de ventana ──────────────────────────
    Lleva .pan-rejilla por el tipo y los cantos, pero vive dentro del cuerpo de
    la ficha, que ya se desplaza por sí mismo. Con el «flex: 1 1 auto» y el
    «overflow: auto» heredados quedaban dos barras de desplazamiento anidadas y
    la tabla se encogía a la nada cuando el resumen ocupaba el cuerpo entero.

    Empatan en especificidad con las de pantalla.css y ganan por orden de carga,
    que es justo lo que este archivo puede hacer y aquél no.
*/
.inv-kardex,
.inv-kardex .rz-data-grid-data {
    display: block;
    flex: none;
    min-height: 0;
    overflow: visible;
}

.inv-kardex .rz-grid-table thead th {
    /* Congelado contra el cuerpo de la ficha, no contra la ventana. */
    top: -12px;
}

/* ═══════════════════ Pantallas estrechas ═══════════════════ */

/*
    Por debajo de 1400 px las ocho pistas no caben y la rejilla se desbordaría.
    Se pasa a pistas uniformes que fluyen solas a dos filas; la sección y el
    buscador se llevan dos columnas cada uno porque son los que más letra tienen.
*/
@media (max-width: 1400px) {
    .inv-filtros {
        grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
    }

    .inv-filtro-seccion { grid-column: span 2; }
    .inv-filtro-ambito { grid-column: span 2; }
    .inv-filtro-busqueda { grid-column: span 2; }

    /* Acotado a esta rejilla: .pan-filtro-acciones es una clase compartida y una
       regla suelta sobre ella aquí alcanzaría a cualquier pantalla que la use,
       sin que pantalla.css pueda desdecirla salvo con !important. */
    .inv-filtros .pan-filtro-acciones { grid-column: 1 / -1; }
}

@media (max-width: 1100px) {
    .inv-tira { grid-template-columns: repeat(2, 1fr); }
    .inv-galeria { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/*
    ── Por qué se repiten aquí reglas que pantalla.css ya tiene ──────────────
    Porque el orden de carga invierte el de los cortes. Cuando el módulo declara
    algo en su corte de 1100 y la hoja compartida declara lo mismo en el de 760,
    a 700 px coinciden los dos, empatan en especificidad y gana el que se carga
    después: el del módulo. Es decir, gana el corte MÁS ANCHO, que es al revés
    de lo que uno escribe.

    Mientras todo vivía en un archivo, el de 760 iba debajo y ganaba solo. Ahora
    hay que repetirlo: la regla de 760 de aquí pisa la de 1100 de aquí.
*/
@media (max-width: 760px) {
    .inv-filtros { grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); }
    .inv-filtro-seccion,
    .inv-filtro-ambito,
    .inv-filtro-busqueda { grid-column: 1 / -1; }

    .inv-tira { grid-template-columns: 1fr; }
    .inv-galeria { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .inv-resumen { grid-template-columns: repeat(2, 1fr); }

    /* Las cuatro secciones no caben en un renglón de 360 px (empujaban la página
       de lado): dos y dos, con alto de dedo. */
    .inv-filtro-seccion .rz-selectbutton { display: flex; flex-wrap: wrap; width: 100%; border-radius: 8px; overflow: hidden; }
    .inv-filtro-seccion .rz-selectbutton .rz-button { flex: 1 1 50%; min-height: 40px; border-radius: 0; justify-content: center; }
}

/* ═══════════════════ Impresión ═══════════════════ */

@media print {
    /* En papel la galería no se desplaza: imprime todas sus tarjetas. */
    .inv-galeria-caja,
    .inv-galeria {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }

    .inv-ficha,
    .inv-resumen-dato {
        box-shadow: none !important;
        border-color: #d8e0e8 !important;
        break-inside: avoid;
    }
}

/*
    ── ¿Qué llegó? (septiembre de 2026) ──────────────────────────────────────
    La recepción de una compra dentro de su ficha: una línea por artículo con lo
    emitido, lo que llegó (un numérico) y lo que falta. Sin cajas dentro de cajas:
    un bloque con borde fino y el pie con el resumen y los dos botones. En el
    teléfono cada línea se apila (artículo arriba, cantidad y falta abajo).
*/
.inv-recibir {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--pan-linea);
    border-left: 3px solid var(--pan-verde);
    border-radius: var(--pan-radio);
    background: var(--pan-papel);
}

.inv-recibir-cab .inv-subtitulo { margin-bottom: 4px; }

.inv-recibir-ayuda {
    margin: 0 0 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--pan-apagado);
}

.inv-recibir-lineas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.inv-recibir-linea {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 104px;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-top: 1px solid var(--pan-linea);
}

.inv-recibir-linea:first-child { border-top: 0; }

.inv-recibir-art { display: flex; flex-direction: column; min-width: 0; }
.inv-recibir-art .pan-principal { overflow: hidden; text-overflow: ellipsis; }

.inv-recibir-llego {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pan-tenue);
}

.inv-recibir-falta {
    font-size: 12px;
    color: var(--pan-apagado);
    text-align: right;
    white-space: nowrap;
}

.inv-recibir-faltan { color: var(--pan-ambar); font-weight: 600; }
.inv-recibir-mal .inv-recibir-falta { color: var(--pan-rojo); font-weight: 600; }

.inv-recibir-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--pan-linea);
}

.inv-recibir-resumen { font-size: 12.5px; color: var(--pan-tinta); }
.inv-recibir-botones { display: inline-flex; gap: 6px; margin-left: auto; }

@media (max-width: 760px) {
    .inv-recibir { padding: 10px 12px; }
    .inv-recibir-linea {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "art art" "llego falta";
        row-gap: 6px;
    }
    .inv-recibir-art { grid-area: art; }
    .inv-recibir-art .pan-principal { white-space: normal; }
    .inv-recibir-llego { grid-area: llego; }
    .inv-recibir-falta { grid-area: falta; }
    .inv-recibir-botones { width: 100%; justify-content: flex-end; }
}

@media (max-width: 760px), (pointer: coarse) {
    .inv-recibir-botones .rz-button { min-height: 40px; }
}