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

    El formato —cabecera, filtros, indicadores, tabla de alto de ventana— vive
    en pantalla.css con el prefijo .pan-. Este archivo era de 1117 líneas y
    contenía ese formato entero; ahora contiene únicamente lo que no se puede
    escribir sin saber que se está hablando de facturas.

    Y eso resulta ser poco: dos rejillas de columnas, un marcador de posición y
    dos líneas de la ficha. Todo lo demás —el alto de la fila, el marco del
    botón, el filete del indicador— era formato, y se comparte.

    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.
*/

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

/*
    Nueve pistas declaradas, una por control. Cada una lleva el ancho que su
    rótulo y su contenido piden, ni más ni menos, y la búsqueda se queda con lo
    que sobre. Es la única pantalla del sistema con ocho filtros en línea, así
    que es la única que necesita decirlo.
*/
.fac-filtros {
    grid-template-columns:
        96px                /* Año */
        132px               /* Mes */
        auto                /* Estado, que se dimensiona por sus dos botones */
        132px               /* Área */
        142px               /* Documento, el rótulo más largo */
        132px               /* Pago */
        132px               /* Rubro */
        minmax(200px, 1fr)  /* Búsqueda global */
        auto;               /* Agregar factura */
}

/*
    fac-filtro-xs y fac-filtro-sm no dimensionan nada: 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 corresponde 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.
*/
.fac-filtro-xs,
.fac-filtro-sm { /* marcadores, sin efecto propio */ }

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

/* Cuatro y siempre cuatro: caja chica, otras facturas, sin rubro y efectivo.
   No es una lista que crezca, así que las pistas son fijas y no «auto-fit». */
.fac-tira {
    grid-template-columns: repeat(4, 1fr);
}

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

/* El encabezado de la ficha lleva el documento sobre el proveedor: es el par
   que identifica una factura, y no hay otra pantalla que lo necesite. */
.fac-ficha-doc {
    font-family: var(--pan-mono);
    font-size: 11px;
    color: var(--pan-tenue);
}

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

/* ═══════════════════ Asignación de rubro en lote ═══════════════════ */

/*
    El panel usa el editor lateral de presupuestos (.pres-editor /
    .pres-panel-editor): es la misma figura —una hoja de trabajo que se abre encima
    sin perder de vista lo de atrás— y duplicarla aquí sólo habría creado una
    segunda que mantener. De ahí que el marcado tenga que respetar sus TRES filas:
    cabecera, cuerpo que desplaza y pie. Lo único propio es la lista, porque sus
    columnas son las de una factura.
*/
.fac-lote {
    /* Más ancha que el editor de presupuestos del que hereda (760 px) porque aquí no
       se llena un formulario: se recorre una lista de cinco columnas y se decide con
       ella a la vista. Con 96vw deja siempre un margen al fondo oscuro, que es lo que
       hace que la caja se lea como una hoja encima y no como otra pantalla. */
    width: min(1280px, 96vw);
}

/* El rubro manda y el buscador lo acompaña: uno decide a dónde va el gasto y el
   otro sólo acota lo que se está mirando. */
.fac-lote-campos {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
    margin-top: 4px;
}

.fac-lote-rubro { flex: 2 1 320px; min-width: 0; }
.fac-lote-buscar { flex: 1 1 200px; min-width: 0; }

.fac-lote-buscar label {
    display: block;
    margin-bottom: 4px;
    font-family: var(--pan-sans);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--pan-apagado);
}

.fac-lote-caja {
    margin-top: 16px;
    border: 1px solid var(--pan-linea);
    border-radius: 10px;
    overflow: hidden;
}

.fac-lote-cab {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 20px;
    background: var(--pan-fondo);
    border-bottom: 1px solid var(--pan-linea);
    font-family: var(--pan-sans);
    font-size: 11.5px;
    color: var(--pan-apagado);
}

.fac-lote-cuenta b { color: var(--pan-tinta); }

/*
    La lista se desplaza por dentro y no estira el panel. Un ejercicio del histórico
    trae hasta mil quinientas facturas sin rubro; suelta, los botones de aplicar
    quedarían fuera de la pantalla y habría que bajar mil quinientas filas para
    llegar a ellos.
*/
.fac-lote-lista {
    max-height: 48vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/*
    UNA LÍNEA POR FACTURA, y lo que no cabe se corta.

    La primera versión dejaba que proveedor y descripción se envolvieran: cada
    factura ocupaba dos o tres renglones, los campos de una se pegaban con los de la
    siguiente y trescientas sesenta se leían como un muro de texto corrido. Cortando
    con puntos suspensivos se pierde el final de algunas descripciones —que está en
    el title al pasar el cursor— y a cambio la vista recupera lo único que importa
    aquí: poder recorrer la columna de proveedores de un vistazo y ver dónde empieza
    y acaba cada registro.
*/
.fac-lote-fila {
    display: grid;
    /* El reparto lo manda lo que se lee para decidir: el proveedor identifica y la
       descripción explica, así que se llevan el ancho. La fecha basta con día y mes
       —el año lo dice el título del panel— y el monto es de cuatro cifras. */
    grid-template-columns: auto 54px minmax(170px, 1.15fr) minmax(0, 2.6fr) 108px;
    align-items: center;
    gap: 18px;
    padding: 7px 20px;
    border-bottom: 1px solid var(--pan-linea);
    font-family: var(--pan-sans);
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
    margin: 0;
}

.fac-lote-fila:last-child { border-bottom: 0; }
.fac-lote-fila:hover { background: rgba(24, 95, 165, .05); }

.fac-lote-fila > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fac-lote-fecha {
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    color: var(--pan-apagado);
}

.fac-lote-prov { font-weight: 600; }

.fac-lote-desc { color: var(--pan-apagado); }

.fac-lote-monto {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.fac-lote-sinresultado {
    margin: 0;
    padding: 18px 12px;
    text-align: center;
    font-family: var(--pan-sans);
    font-size: 11.5px;
    color: var(--pan-apagado);
}

/* Estrecho: la descripción es lo primero que sobra. El proveedor no se toca: sin él
   la fila deja de identificar nada. */
@media (max-width: 900px) {
    .fac-lote-fila { grid-template-columns: auto 50px minmax(130px, 1fr) 96px; gap: 12px; padding: 7px 14px; }
    .fac-lote-cab { padding: 9px 14px; }
    .fac-lote-desc { display: none; }
}

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

/*
    Por debajo de 1400 px las nueve pistas no caben y la rejilla se
    desbordaría. Se pasa a pistas uniformes que fluyen solas a dos filas; el
    buscador y el botón se llevan la línea entera para que no queden
    estrujados.
*/
@media (max-width: 1400px) {
    .fac-filtros {
        grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    }

    .fac-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 toda pantalla que la use, sin que
       pantalla.css pueda desdecirla salvo con !important. */
    .fac-filtros .pan-filtro-acciones { grid-column: 1 / -1; }
}

@media (max-width: 1100px) {
    .fac-tira { grid-template-columns: repeat(2, 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 justo 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 del módulo pisa la suya de 1100.
*/
@media (max-width: 760px) {
    .fac-filtros { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
    .fac-filtro-busqueda { grid-column: 1 / -1; }
    .fac-tira { grid-template-columns: 1fr; }
}