/*
    ══════════════════════════════════════════════════════════════════════════
    COMBUSTIBLE — lo que sólo es del análisis de gasto mensual
    ══════════════════════════════════════════════════════════════════════════

    El formato de la pantalla —cabecera, filtros, indicadores, tarjetas— vive en
    pantalla.css con el prefijo .pan-. Aquí sólo hay tres cosas que ninguna otra
    pantalla necesita: las barras del perfil del año, la matriz de doce meses y
    la lista de facturas pendientes de rubro.

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

/* ═══════════════════ Filtros e indicadores ═══════════════════ */

/*
    Cuatro controles, y uno de ellos aparece y desaparece: la barra QUETZALES /
    GALONES sólo se dibuja cuando el recorte es de combustible.

    Por eso las columnas no se enumeran. Con una plantilla fija de cuatro, al
    esconderse la barra el botón de acciones subía a la tercera columna —la de ancho
    «auto»— y se quedaba pegado al buscador con media fila vacía a la derecha. Con
    auto-fit las tres o cuatro celdas se reparten el ancho solas, y el botón se ancla
    al final por su propio justify-content.

    El buscador y la categoría piden más sitio que un filtro normal: uno lleva un
    nombre de categoría entero y el otro una frase escrita a mano.
*/
.com-filtros {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

/*
    El buscador se lleva el doble de ancho: lo que se teclea ahí es una frase
    —«servicio telefonico»— y no cabe en la misma columna que un selector de dos
    opciones. «span 2» y no un minmax propio porque con auto-fit las columnas ya
    están repartidas y lo único que queda por decidir es cuántas ocupa cada celda.

    A partir de la anchura en la que la rejilla se reduce a dos columnas, volver a
    ocupar dos dejaría al buscador solo en su fila con el resto apretado debajo, así
    que ahí vuelve a una.
*/
.com-filtros .com-filtro-busqueda {
    grid-column: span 2;
}

@media (max-width: 900px) {
    .com-filtros .com-filtro-busqueda { grid-column: span 1; }
}

/*
    El aviso de que lo que se ve ya no es lo que dice el buscador.

    Va DENTRO de la celda del filtro y debajo del campo, que es donde se mira: en la
    fila de observaciones, al pie de la pantalla, llegaría tarde. Position absolute
    para no empujar la fila de filtros cada vez que aparece y desaparece.
*/
.com-filtro-busqueda {
    position: relative;
}

.com-desfasado {
    position: absolute;
    left: 2px;
    top: 100%;
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: .02em;
    color: var(--pan-tenue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.com-tira {
    grid-template-columns: repeat(4, 1fr);
}

/*
    El buscador y su botón de sumar, en la misma línea. El input se lleva lo que
    sobre; el botón se ciñe, porque su rótulo es una palabra.
*/
.com-busqueda-fila {
    display: flex;
    align-items: center;
    gap: 6px;
}

.com-busqueda-fila > input {
    flex: 1 1 auto;
    min-width: 0;
}

/* ═══════════════════ El conjunto ═══════════════════ */

/*
    La fila de fichas: de qué pedazos está hecha la cifra.

    Va DEBAJO de los filtros y encima de los indicadores, que es el orden en que se
    lee la pantalla: primero qué estoy pidiendo, después cuánto sale. Y se envuelve,
    porque un conjunto de cinco o seis pedazos con nombres largos no cabe en una
    línea y truncarlos dejaría fichas indistinguibles entre sí.
*/
.com-conjunto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--pan-papel);
    border: 1px solid var(--pan-linea);
    border-radius: var(--pan-radio);
}

.com-conjunto-rotulo {
    font-family: var(--pan-sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pan-tenue);
    margin-right: 2px;
}

.com-ficha {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(24, 95, 165, .28);
    background: rgba(24, 95, 165, .07);
    color: var(--pan-tinta);
    font-family: var(--pan-sans);
    font-size: 11.5px;
    line-height: 1.3;
    max-width: 100%;
}

.com-ficha-texto {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cuántas facturas aporta el pedazo, ya descontadas las que también están en otro. */
.com-ficha-cuenta {
    font-family: var(--pan-mono);
    font-size: 10px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(24, 95, 165, .16);
    color: var(--pan-azul);
}

/*
    Un pedazo que no aporta nada: o no hay facturas que encajen, o ya venían dentro
    de otro. Se apaga en vez de esconderse — quitarlo de la vista dejaría al usuario
    sin entender por qué el total no cambió al añadirlo.
*/
.com-ficha-vacia {
    border-color: var(--pan-linea);
    background: transparent;
    color: var(--pan-tenue);
}

/*
    Lo que hay tecleado y todavía no se ha fijado. Cuenta en la cifra igual que las
    demás, así que se dibuja como ficha; en trazo discontinuo para que se vea que
    todavía se puede cambiar sin quitar nada.
*/
.com-ficha-pendiente {
    border-style: dashed;
    background: transparent;
}

/* ═══════════════════ Bloques ═══════════════════ */

/*
    Las tarjetas de esta pantalla crecen con su contenido: no hay ventana que
    llenar porque el tablero se desplaza entero. Por eso no heredan la cadena
    flex de .pan-tarjeta más allá del marco.
*/
.com-bloque {
    display: block;
    flex: 0 0 auto;
    padding: 16px 20px 18px !important;
    /*
        El fondo se declara aquí y no se hereda. .pan-tarjeta trae marco, radio y
        sombra pero NO color: en su uso habitual va sobre un <RadzenCard>, y el
        blanco lo pone .rz-card. Aquí va sobre un <section> pelado, así que sin
        esta línea los tres bloques salían como cajas con borde y sin relleno.
    */
    background: var(--pan-papel);
    font-family: var(--pan-sans);
}

.com-bloque-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.com-bloque-cab h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--pan-tinta);
}

.com-bloque-cab p {
    margin: 3px 0 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--pan-tenue);
    max-width: 78ch;
}

.com-bloque-cifra {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
    line-height: 1.2;
}

.com-bloque-cifra small {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pan-tenue);
}

.com-bloque-cifra b {
    font-family: var(--pan-mono);
    font-size: 14px;
    color: var(--pan-tinta);
}

/*
    La segunda cifra: lo mismo, ya convertido a la moneda en que se va a guardar.

    Va con el selector doble porque «.com-bloque-cifra small» la pondría en
    versalitas espaciadas —es el rótulo de arriba— y aquí lo que se escribe es un
    importe, que en versalitas se lee mal. Queda apagada a propósito: es la
    consecuencia de la cifra principal, no una segunda cifra que compita con ella.
*/
.com-bloque-cifra small.com-bloque-cifra-alterna {
    margin-top: 2px;
    font-family: var(--pan-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--pan-tenue);
}

/* ═══════════════════ Perfil del año ═══════════════════ */

/*
    Doce barras en CSS, sin librería de gráficos.

    ── Por qué no un gráfico de verdad ───────────────────────────────────────
    Son doce valores de una sola serie. Una librería añadiría una dependencia,
    un tiempo de carga y un lienzo que en la impresión sale en blanco si el
    script no terminó. Con rejilla y alto porcentual se ve igual, se imprime, y
    el navegador lo dibuja antes de que exista JavaScript.
*/
.com-perfil {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 6px;
    align-items: end;
    height: 190px;
}

.com-perfil-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 4px;
    min-width: 0;
}

.com-perfil-monto {
    font-family: var(--pan-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--pan-apagado);
    white-space: nowrap;
}

/*
    El carril ocupa el alto que sobra y la barra crece desde abajo dentro de él.
    Sin el carril, cada columna mediría lo que midiera su barra y las etiquetas
    de los meses quedarían escalonadas a distinta altura.
*/
.com-perfil-barra {
    display: flex;
    align-items: flex-end;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    background: rgba(12, 39, 64, .04);
    border-radius: 5px 5px 0 0;
    overflow: hidden;
}

.com-perfil-barra > div {
    width: 100%;
    min-height: 2px;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(180deg, var(--pan-azul), #2d7fce);
    transition: height .4s ease;
}

.com-perfil-mes {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--pan-apagado);
}

/* Cuántos años promedia ese mes. En tono muy apagado porque es la letra chica
   del dato, no el dato. */
.com-perfil-anios {
    font-size: 9px;
    color: var(--pan-tenue);
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════ Aviso de acción cumplida ═══════════════════ */

/* El gemelo verde de .pan-error. Un lote que sale bien también informa: sin este
   aviso, la única señal era que la lista se vaciaba, y eso se lee igual que un
   fallo silencioso. */
.com-aviso {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 6px 8px 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(28, 138, 90, .25);
    background: rgba(28, 138, 90, .07);
    color: var(--pan-verde);
    font-family: var(--pan-sans);
    font-size: 12.5px;
}

.com-aviso span {
    flex: 1 1 auto;
}

/* ═══════════════════ Proyección ═══════════════════ */

/*
    Los doce meses propuestos, en rejilla y no en tabla: son celdas de captura
    visual —se leen de un vistazo para aprobar o corregir el ajuste—, no filas
    que se comparen entre sí.
*/
.com-proyeccion {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 6px;
    margin-top: 16px;
}

.com-proyeccion-mes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    border: 1px solid var(--pan-linea);
    border-radius: 8px;
    background: var(--pan-fondo);
    min-width: 0;
}

.com-proyeccion-nombre {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--pan-tenue);
}

.com-proyeccion-monto {
    font-family: var(--pan-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--pan-tinta);
    font-variant-numeric: tabular-nums;
}

/* Cuántos años sostienen la cifra. Un mes apoyado en un solo año no es un
   promedio, y eso cambia lo que la cifra significa para quien la aprueba. */
.com-proyeccion-base {
    font-size: 8.5px;
    color: var(--pan-tenue);
}

/* ═══════════════════ Matriz año por mes ═══════════════════ */

/* Trece columnas de cifras no caben en una pantalla estrecha, y la tabla no debe
   empujar el ancho de la página: se desplaza dentro de su propia caja. */
.com-matriz-scroll {
    overflow-x: auto;
}

.com-matriz {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--pan-mono);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.com-matriz thead th {
    padding: 6px 8px;
    border-bottom: 1px solid var(--pan-linea);
    font-family: var(--pan-sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pan-tenue);
    text-align: right;
}

.com-matriz tbody td,
.com-matriz tbody th {
    padding: 5px 8px;
    border-bottom: 1px solid var(--pan-linea);
    text-align: right;
    color: var(--pan-apagado);
}

.com-matriz-anio {
    text-align: left !important;
    font-family: var(--pan-sans);
    font-weight: 600;
    color: var(--pan-tinta) !important;
}

.com-matriz-total {
    font-weight: 600;
    color: var(--pan-tinta) !important;
}

/* La fila del promedio cierra la tabla y es la que se lee: se separa con un filo
   y no con otro color de fondo, que la volvería una fila más. */
.com-matriz-resumen th,
.com-matriz-resumen td {
    border-top: 2px solid var(--pan-tinta);
    border-bottom: 0;
    font-weight: 600;
    color: var(--pan-tinta) !important;
}

/*
    ── El tinte de la celda ──────────────────────────────────────────────────
    Sólo se pinta lo que se sale de lo normal —un 40% por encima o por debajo del
    promedio de ESE mes—. Pintar toda la tabla por gradiente la vuelve un mapa de
    calor bonito en el que no se distingue nada; pintar sólo los extremos hace
    que el ojo caiga justo donde hay algo que preguntar.
*/
.com-celda-alta {
    background: rgba(211, 47, 20, .08);
    color: var(--pan-rojo) !important;
    font-weight: 600;
}

.com-celda-baja {
    background: rgba(28, 138, 90, .07);
    color: var(--pan-verde) !important;
}

.com-celda-vacia {
    color: var(--pan-tenue) !important;
}

/* Un año que todavía no termina. Sin esta marca, su promedio se compara de tú a
   tú con el de los años cerrados. */
.com-parcial {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(184, 84, 27, .1);
    color: var(--pan-ambar);
    font-family: var(--pan-sans);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/*
    «8/12»: los meses del año que sostienen el promedio de la derecha.

    Va en gris y en monoespaciada, no en ámbar como «parcial»: un año con huecos no
    es una anomalía que haya que corregir —muchas veces el gasto simplemente no
    ocurrió ese mes— sino el divisor, dicho en voz baja para quien vaya a
    presupuestar con esa cifra.
*/
.com-huecos {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(12, 39, 64, .06);
    color: var(--pan-tenue);
    font-family: var(--pan-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .02em;
    cursor: help;
}

/* ═══════════════════ Observaciones ═══════════════════ */

.com-observaciones {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--pan-apagado);
}

.com-observaciones li + li {
    margin-top: 5px;
}

/* ═══════════════════ Asignación masiva ═══════════════════ */

.com-asignacion {
    width: min(920px, 100%);
}

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

.com-pendientes-cab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--pan-fondo);
    border-bottom: 1px solid var(--pan-linea);
    font-family: var(--pan-sans);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--pan-apagado);
}

/*
    La lista se desplaza por dentro y no estira el diálogo: un año de combustible
    son doscientas facturas, y con la lista suelta los botones de aplicar
    quedarían fuera de la pantalla, que es el mismo problema que tenía el editor
    antes de volverse ventana.
*/
.com-pendientes-lista {
    max-height: 320px;
    overflow-y: auto;
}

.com-pendiente {
    display: grid;
    grid-template-columns: auto 84px minmax(140px, 1fr) minmax(0, 2fr) 96px;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--pan-linea);
    font-family: var(--pan-sans);
    font-size: 11.5px;
    cursor: pointer;
    margin: 0;
}

.com-pendiente:last-child {
    border-bottom: 0;
}

.com-pendiente:hover {
    background: rgba(24, 95, 165, .04);
}

.com-pendiente-fecha {
    font-family: var(--pan-mono);
    font-size: 10.5px;
    color: var(--pan-tenue);
}

.com-pendiente-prov {
    font-weight: 600;
    color: var(--pan-tinta);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.com-pendiente-desc {
    color: var(--pan-apagado);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.com-pendiente-monto {
    font-family: var(--pan-mono);
    font-weight: 600;
    text-align: right;
    color: var(--pan-tinta);
    font-variant-numeric: tabular-nums;
}

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

@media (max-width: 1100px) {
    .com-filtros { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .com-tira { grid-template-columns: repeat(2, 1fr); }

    /* Doce barras por debajo de este ancho miden nueve píxeles cada una: el perfil
       deja de leerse y estorba. La matriz de abajo dice lo mismo con números. */
    .com-perfil { display: none; }

    .com-pendiente { grid-template-columns: auto 80px 1fr 90px; }
    .com-pendiente-desc { display: none; }

    /* Doce cajas de proyección a este ancho miden setenta píxeles: se reparten en
       dos filas de seis, que sigue siendo un año legible de un vistazo. */
    .com-proyeccion { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 760px) {
    .com-tira { grid-template-columns: 1fr; }
    .com-proyeccion { grid-template-columns: repeat(3, 1fr); }
}

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

@media print {
    .com-bloque {
        box-shadow: none !important;
        border-color: #d8e0e8 !important;
        break-inside: avoid;
    }

    /* En papel no hay desplazamiento: la matriz se imprime entera o no sirve. */
    .com-matriz-scroll { overflow: visible !important; }

    .com-perfil-barra > div { transition: none !important; }

    /* Los tintes de celda se imprimen: son la única forma de encontrar el mes raro
       en una tabla de trece columnas sobre papel. */
    .com-celda-alta,
    .com-celda-baja {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}