/*
    Tablero de presupuestos.

    Todo cuelga del prefijo .pres- a propósito: la pantalla comparte hoja con el
    resto de la plataforma y con el tema de Radzen, así que ninguna regla de aquí
    puede alcanzar a otro módulo. Los colores son los mismos que ya usa la marca en
    la pantalla de carga —tinta navy, azul institucional, grises fríos— para que el
    módulo se vea más cuidado sin verse ajeno.
*/

.pres-panel,
.pres-cabecera,
.pres-filtros,
.pres-grafico-card,
.pres-vacio,
.pres-ruta,
.pres-temporada,
.pres-origen,
.pres-error {
    --pres-tinta: #0C2740;
    --pres-azul: #185FA5;
    --pres-apagado: #5b7186;
    --pres-tenue: #8fa1b1;
    --pres-linea: #e6ecf2;
    --pres-papel: #ffffff;
    --pres-fondo: #f6f8fb;
    --pres-verde: #1c8a5a;
    --pres-rojo: #d32f14;
    --pres-radio: 14px;
    --pres-sombra: 0 1px 2px rgba(12, 39, 64, .04), 0 12px 32px -18px rgba(12, 39, 64, .35);
    /* Más corta y más cerrada: la de arriba está calculada para un bloque que
       ocupa media pantalla y bajo una tarjeta de 58 px se desparrama. */
    --pres-sombra-tarjeta: 0 1px 2px rgba(12, 39, 64, .05), 0 6px 16px -10px rgba(12, 39, 64, .30);
    --pres-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --pres-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ═══════════════════ Cabecera ═══════════════════ */

/*
    Flex y no rejilla de tres pistas: la barra de acciones se metió dentro de la
    cabecera y hay pantallas que la llevan y pantallas que no. Con pistas declaradas,
    la que falta deja igualmente su separación de 26 px colgando a la derecha.
*/
.pres-cabecera {
    display: flex;
    align-items: center;
    gap: 22px;
    /* 14 y no 22: la cabecera baja de 114 a 88 px y esos 26 px pasan al
       contenido, que es donde se traducen en filas visibles. */
    padding: 14px 22px;
    /* Sin margen propio: la separación entre bloques la pone el «gap» del
       envoltorio .pan-pantalla-fluida, igual que en la pantalla de facturas. */
    margin-bottom: 0;
    /*
        Degradado apenas insinuado: el papel se enfría hacia los cantos y deja el
        centro limpio, que es donde va el título. Separa la cabecera del fondo de
        la página sin recurrir a un color de relleno.
    */
    background: var(--pres-papel);
    background: linear-gradient(90deg, #eef3f8 0%, var(--pres-papel) 18%, var(--pres-papel) 82%, #eef3f8 100%);
    border: 1px solid var(--pres-linea);
    border-radius: var(--pres-radio);
    box-shadow: var(--pres-sombra-tarjeta);
    font-family: var(--pres-sans);
    animation: pres-entrada .45s ease backwards;
}

.pres-cabecera-marca {
    flex: 0 0 auto;
}

.pres-cabecera-texto {
    flex: 1 1 auto;
    min-width: 0;
}

/* 44 y no 58: el logo tiene que caber en los 60 px de contenido de la cabecera
   junto al resto. A este tamaño la marca sigue leyéndose entera. */
.pres-cabecera-marca img {
    height: 44px;
    width: auto;
    display: block;
}

/*
    En azul institucional y no en gris: es la línea que dice de quién es la
    pantalla, y en gris se leía como un pie de página puesto arriba.
*/
.pres-cabecera-empresa {
    margin: 0;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .16em;
    line-height: 1.2;
    color: var(--pres-azul);
    text-transform: uppercase;
}

.pres-cabecera-titulo {
    margin: 1px 0 2px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.15;
    color: var(--pres-tinta);
}

/* Interlínea ceñida: las tres líneas del bloque de texto tienen que caber en
   los 60 px que deja libre la cabecera. */
.pres-cabecera-sub {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--pres-apagado);
}

.pres-cabecera-sello {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
    gap: 1px;
    padding-left: 22px;
    border-left: 1px solid var(--pres-linea);
}

.pres-sello-rotulo {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pres-tenue);
}

.pres-sello-monto {
    font-family: var(--pres-mono);
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--pres-tinta);
    font-variant-numeric: tabular-nums;
}

.pres-sello-pie {
    font-size: 11px;
    color: var(--pres-tenue);
}

/* ═══════════════════ Barras de acción y filtros ═══════════════════ */

/*
    Dentro de la cabecera, no en una fila propia encima: aquella barra gastaba
    catorce píxeles de margen más el alto del botón para no decir nada que no
    quepa al lado del sello.
*/
.pres-barra-doc {
    display: grid;
    /* Dos columnas: con dos acciones queda una fila de dos y con cuatro, dos filas
       de dos. La rejilla se llena sola y ninguna pantalla necesita reglas propias. */
    grid-template-columns: repeat(2, auto);
    gap: 4px 6px;
    align-content: center;
    flex: 0 0 auto;
    /* La separación con el sello ya la pone el «gap» de la cabecera; el relleno
       propio sólo despega los botones de la línea divisoria. */
    padding-left: 16px;
    border-left: 1px solid var(--pres-linea);
}

/* El botón llena su celda para que los rótulos arranquen en la misma vertical: si
   cada uno se ciñe a su texto, la rejilla los centra y quedan escalonados. */
.pres-barra-doc .rz-button,
.pres-barra-doc-excel {
    width: 100%;
    min-width: 0;
}

/*
    El marco se dibuja aquí y no con Variant.Outlined porque el contorno de Radzen
    para ButtonStyle.Dark es tinta plena, que en la cabecera pesa más que el propio
    título. Ésta es la misma línea que separa la cabecera del sello: delimita sin
    gritar.
*/
/* Relleno de 3 y no de 5: dos filas de botones de 28 px son 60, que es lo que
   deja libre una cabecera de 88. El recorte va en el aire, no en la letra. */
.pres-barra-doc .rz-button {
    padding: 3px 9px;
    border: 1px solid var(--pres-linea);
    border-radius: 8px;
    background: var(--pres-papel);
    box-shadow: none;
    transition: border-color .18s ease, background-color .18s ease;
}

.pres-barra-doc .rz-button:hover:not(.rz-state-disabled) {
    border-color: var(--pres-azul);
    background: rgba(24, 95, 165, .05);
}

.pres-barra-doc .rz-button.rz-state-disabled {
    opacity: .45;
}

/*
    La caja interna es quien coloca icono y texto —el botón de Radzen es
    «inline-block»—, y por venir en «inline-flex» se ciñe a su contenido. Pasarla a
    «flex» al 100 % es lo que permite alinear a la izquierda; el «gap» también vive
    aquí, porque el icono no lleva margen propio.
*/
.pres-barra-doc .rz-button .rz-button-box {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    gap: 6px;
}

.pres-barra-doc .rz-button .rz-button-text {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    /* La caja del botón trae interlínea de 1.25rem, que aquí sólo sirve para
       descuadrar el texto respecto del icono. */
    line-height: 1;
    color: var(--pres-apagado);
}

.pres-barra-doc .rz-button:hover .rz-button-text {
    color: inherit;
}

/* El Excel lleva su barra de avance debajo del botón, así que su celda es a su vez
   una columna. */
.pres-barra-doc-excel {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pres-filtros {
    display: grid;
    /*
        Seis pistas: ejercicio, estado, área, moneda, búsqueda y acciones.

        Las de estado y moneda van en «auto» y no en un ancho fijo: se dimensionan
        por sus propios botones, y con un ancho declarado el texto de la primera
        opción —«PENDIENTES»— se recortaba contra el borde.

        El área es la única que puede faltar, y eso no descuadra la fila: al ser
        una pista «minmax» sin contenido colapsa a su mínimo y las demás reparten
        lo que sobra. Es la ventaja de declarar pistas y no dejar que cada control
        imponga su ancho mínimo, que es lo que hacía la versión en flex.
    */
    grid-template-columns: 150px auto minmax(170px, 1fr) auto minmax(200px, 1.2fr) auto;
    gap: 14px;
    align-items: end;
    padding: 14px 18px;
    margin-bottom: 0;
    background: var(--pres-papel);
    border: 1px solid var(--pres-linea);
    border-radius: var(--pres-radio);
    box-shadow: var(--pres-sombra);
    font-family: var(--pres-sans);
}

.pres-filtros .pres-filtro > label {
    display: block;
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pres-tenue);
}

.pres-filtro-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

/* La barra de estado aprieta un poco la letra y no se estira: son tres opciones y
   la más larga es «PENDIENTES», que antes se recortaba contra el borde. */
.pres-filtro-estado .rz-selectbutton {
    display: inline-flex;
    width: auto !important;
}

.pres-filtro-estado .rz-selectbutton .rz-button {
    font-size: 10.5px;
    letter-spacing: .02em;
    padding-left: 12px;
    padding-right: 12px;
    white-space: nowrap;
}

.pres-input {
    height: 34px;
    font-size: 13px;
    border-radius: 8px;
    border: 1px solid var(--pres-linea);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.pres-input:focus {
    border-color: var(--pres-azul);
    box-shadow: 0 0 0 3px rgba(24, 95, 165, .12);
    outline: none;
}

.pres-error {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    margin-bottom: 0;
    border-radius: 10px;
    border: 1px solid rgba(211, 47, 20, .25);
    background: rgba(211, 47, 20, .06);
    color: var(--pres-rojo);
    font-family: var(--pres-sans);
    font-size: 13px;
}

/*
    El hermano en verde: lo que salió bien y hay que decir de todos modos.

    Un correlativo que se enderezó solo no es un fallo, pero el rubro cambió de
    nombre y eso no puede pasar en silencio. Se le deja el mismo cuerpo que al
    error —misma altura, mismo tipo— para que la fila no baile según cuál aparezca,
    y se estira el texto para empujar el botón de cerrar al extremo.
*/
.pres-aviso {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    margin-bottom: 0;
    border-radius: 10px;
    border: 1px solid rgba(28, 138, 90, .25);
    background: rgba(28, 138, 90, .06);
    color: #16704a;
    font-family: var(--pres-sans);
    font-size: 13px;
    line-height: 1.45;
}

.pres-aviso > span {
    flex: 1 1 auto;
    min-width: 0;
}

/*
    La cinta de «llegaron cambios y no los he traído».

    En azul y no en verde ni en rojo: no es un logro ni un fallo, es un estado — lo
    que se está mirando quedó viejo. Lleva el mismo cuerpo que el error y el aviso
    para que la fila no salte de altura según cuál de los tres aparezca, y el botón
    va pegado a la derecha porque es la única acción que ofrece.
*/
.pres-novedad {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    margin-bottom: 0;
    border-radius: 10px;
    border: 1px solid rgba(24, 95, 165, .28);
    background: rgba(24, 95, 165, .07);
    color: var(--pres-azul);
    font-family: var(--pres-sans);
    font-size: 13px;
    line-height: 1.45;
    animation: pres-entrada .35s ease backwards;
}

.pres-novedad > span {
    flex: 1 1 auto;
    min-width: 0;
}

/* ═══════════════════ Gráfico ═══════════════════ */

.pres-grafico-card {
    border-radius: var(--pres-radio) !important;
    border: 1px solid var(--pres-linea) !important;
    box-shadow: var(--pres-sombra) !important;
    margin-bottom: 0;
    animation: pres-entrada .5s .05s ease backwards;
}

.pres-grafico-cab {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    font-family: var(--pres-sans);
}

.pres-grafico-cab h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--pres-tinta);
}

.pres-grafico-cab p {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--pres-tenue);
}

.pres-grafico-leyenda {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.pres-punto {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--pres-apagado);
}

.pres-punto::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--pres-acento, currentColor);
}

#barHistorico {
    width: 100%;
    height: 300px;
    margin-top: 10px;
}

/* ═══════════════════ Pestañas ═══════════════════ */

.pres-tabs .rz-tabview-nav {
    border-bottom: 1px solid var(--pres-linea);
}

.pres-tabs .rz-tabview-nav li a {
    font-family: var(--pres-sans);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .01em;
}

/* ═══════════════════ Indicadores ═══════════════════ */

.pres-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 10px;
    margin: 0;
    font-family: var(--pres-sans);
}

/*
    ── El alto se toma de la tira de facturas ────────────────────────────────
    Estas tarjetas medían 120 px para tres líneas de texto, y esos 120 px salen
    del bloque por área que va debajo, que es donde de verdad se trabaja. La tira
    de facturas dice lo mismo en 58 y no se lee peor: el reparto en tres renglones
    —que es lo que hace legible el indicador— no depende del relleno.
*/
/*
    ── Rejilla de dos columnas y no una pila ─────────────────────────────────
    A la izquierda el icono, ocupando las tres filas; a la derecha el rótulo, la
    cifra y el pie. El icono es OPCIONAL, y por eso la separación entre columnas
    la pone su margen y no un «column-gap»: una pista vacía emite igualmente su
    separación y la tarjeta sin icono quedaría con doce píxeles muertos.

    Las tres líneas se asignan a la segunda columna explícitamente; sin eso, la
    colocación automática mandaría el rótulo a la primera.
*/
.pres-kpi {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /*
        Las tres filas se declaran explícitamente por una razón concreta: sin
        ellas la rejilla es implícita, y en una rejilla implícita el «-1» de
        «grid-row: 1 / -1» se resuelve contra la rejilla EXPLÍCITA —que no tiene
        líneas—, así que degenera en una sola fila. El icono se quedaba en el
        renglón del rótulo y lo estiraba a sus 34 px, abriendo un hueco entre el
        rótulo y la cifra.
    */
    grid-template-rows: repeat(3, auto);
    align-content: center;
    row-gap: 2px;
    min-height: 58px;
    padding: 7px 14px 7px 15px;
    background: var(--pres-papel);
    border: 1px solid var(--pres-linea);
    border-radius: 12px;
    box-shadow: var(--pres-sombra-tarjeta);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
    animation: pres-entrada .45s ease backwards;
}

.pres-kpi:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(12, 39, 64, .05), 0 18px 38px -20px rgba(12, 39, 64, .45);
}

/* Filete de color en el canto: identifica la prioridad sin teñir la tarjeta
   entera, que era lo que hacía la versión anterior y volvía la fila ilegible. */
.pres-kpi::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--pres-acento, var(--pres-linea));
}

/* Halo muy tenue del mismo color, para que la tarjeta no se vea plana. */
.pres-kpi::after {
    content: "";
    position: absolute;
    inset: -60% 55% 20% -20%;
    background: radial-gradient(closest-side, var(--pres-acento, transparent), transparent);
    opacity: .07;
    pointer-events: none;
}

/* Las tres líneas van ceñidas: en 58 px de tarjeta, la interlínea por defecto de
   cada una sumaría sola más de la mitad del alto. */
.pres-kpi-rotulo,
.pres-kpi-monto,
.pres-kpi-pie {
    grid-column: 2;
}

/*
    El icono va en pastilla teñida del mismo color que el filete del canto, no
    suelto: un glifo sobre el papel compite con la cifra, que es lo que hay que
    leer. El color sale de --pres-acento, así que cada indicador tiñe su pastilla
    sin declarar nada.
*/
.pres-kpi-icono {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    margin-right: 11px;
    border-radius: 9px;
    /* Respaldo primero, por si el navegador no resuelve color-mix. */
    background: rgba(24, 95, 165, .09);
    background: color-mix(in srgb, var(--pres-acento, var(--pres-azul)) 12%, transparent);
    color: var(--pres-acento, var(--pres-azul));
}

.pres-kpi-icono .rzi,
.pres-kpi-icono .rz-icon,
.pres-kpi-icono .notranslate {
    font-size: 19px !important;
    line-height: 1;
}

.pres-kpi-rotulo {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--pres-tenue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pres-kpi-monto {
    font-family: var(--pres-mono);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--pres-tinta);
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    white-space: nowrap;
}

/* El total del ejercicio sigue pesando más que los cortes por prioridad, pero la
   diferencia baja de dos puntos a uno: en 58 px, dos ya desalinean la fila. */
.pres-kpi-monto-xl {
    font-size: 19px;
}

.pres-kpi-pie {
    font-size: 10.5px;
    line-height: 1.15;
    color: var(--pres-tenue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pres-kpi-total {
    background: linear-gradient(150deg, #0C2740 0%, #14395c 100%);
    border-color: transparent;
}

.pres-kpi-total .pres-kpi-rotulo,
.pres-kpi-total .pres-kpi-pie {
    color: rgba(255, 255, 255, .62);
}

.pres-kpi-total .pres-kpi-monto {
    color: #fff;
}

/* Sobre la tarjeta oscura la pastilla teñida no se ve: el acento y el fondo son
   la misma familia. Se sustituye por un velo claro. */
.pres-kpi-total .pres-kpi-icono {
    background: rgba(255, 255, 255, .13);
    color: rgba(255, 255, 255, .88);
}

/* La barra pasa a ser el canto inferior de la tarjeta, como en la tira de facturas:
   apilada consumía su alto más siete píxeles de margen, que en 58 no hay. */
.pres-kpi-barra {
    position: absolute;
    left: 3px;
    right: 0;
    bottom: 0;
    height: 2px;
    background: rgba(12, 39, 64, .07);
}

.pres-kpi-barra > div {
    height: 100%;
    background: var(--pres-acento, var(--pres-azul));
    transition: width .5s ease;
}

/* ═══════════════════ Bloque por área ═══════════════════ */

/* Diez píxeles entre bloques de área: la misma separación que hay entre las
   tarjetas de indicadores, para que la columna tenga un solo ritmo. */
.pres-area {
    margin: 0 0 10px;
    background: var(--pres-papel);
    border: 1px solid var(--pres-linea);
    border-radius: var(--pres-radio);
    box-shadow: var(--pres-sombra);
    overflow: hidden;
    font-family: var(--pres-sans);
}

.pres-area-cab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 13px 18px;
    border-bottom: 1px solid var(--pres-linea);
    /* El color del área se usa como acento y no como fondo saturado. */
    box-shadow: inset 3px 0 0 var(--pres-area-color, transparent);
}

.pres-area-titulo {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--pres-tinta);
}

.pres-area-meta {
    font-size: 11px;
    color: var(--pres-tenue);
}

.pres-area-cifras {
    display: flex;
    gap: 26px;
}

.pres-area-cifra {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.pres-area-cifra small {
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pres-tenue);
}

.pres-area-cifra b {
    font-family: var(--pres-mono);
    font-size: 14px;
    color: var(--pres-tinta);
    font-variant-numeric: tabular-nums;
}

.pres-excedido {
    color: var(--pres-rojo) !important;
}

/* ═══════════════════ Rejilla ═══════════════════ */

.pres-rejilla {
    border: 0 !important;
    font-family: var(--pres-sans);
}

.pres-rejilla .rz-grid-table thead th {
    font-size: 10px !important;
    font-weight: 600 !important;
    /* Menos espaciado del que tenía: con .11em los rótulos de dos palabras no
       cabían en su columna y salían cortados con puntos suspensivos. */
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pres-tenue) !important;
}

/* Y el que aun así no quepa se parte en dos líneas antes que truncarse. */
.pres-rejilla .rz-grid-table thead th .rz-column-title,
.pres-rejilla .rz-grid-table thead th .rz-column-title-content {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.2;
}

.pres-rejilla .rz-grid-table tbody td {
    font-size: 12.5px;
    vertical-align: middle;
}

.pres-chip {
    display: inline-block;
    min-width: 92px;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
}

/*
    De dónde viene la partida: «de 2026» si se pospuso, «copia» si se duplicó.
    Va pegada al correlativo y en tono apagado porque es procedencia, no dato: lo
    que se lee de la fila es el rubro y su monto. El motivo completo está en el
    título, que es donde cabe sin robarle ancho a la columna.
*/
.pres-procedencia {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(24, 95, 165, .08);
    color: var(--pres-azul);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

.pres-procedencia .rzi,
.pres-procedencia .rz-icon {
    font-size: 12px !important;
    line-height: 1;
}

/*
    El «US$» que precede a un campo de captura mensual.

    Va en el sitio donde antes había un icono de Radzen —attach_money, un signo de
    dólar solo, que junto a la vista en quetzales se lee como si el campo hubiera
    cambiado de moneda— así que se le da el mismo peso visual que tenía el glifo:
    tono apagado, mismo tamaño, sin llamar la atención sobre sí mismo. El ancho
    mínimo cabe las tres letras sin empujar el campo.
*/
.pres-moneda-campo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    font-family: var(--pres-mono);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    color: var(--pres-tenue);
}

.pres-correlativo {
    font-family: var(--pres-mono);
    font-size: 11.5px;
    color: var(--pres-apagado);
}

.pres-proyecto {
    font-weight: 600;
    color: var(--pres-tinta);
}

.pres-monto {
    font-family: var(--pres-mono);
    font-variant-numeric: tabular-nums;
    color: var(--pres-tinta);
}

.pres-clasificacion {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 6px;
    background: rgba(24, 95, 165, .07);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--pres-azul);
}

.pres-sin-ejecucion {
    font-size: 11px;
    color: var(--pres-tenue);
    font-style: italic;
}

.pres-avance {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.pres-avance-cifra {
    font-family: var(--pres-mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--pres-tinta);
}

.pres-avance-barra {
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: var(--pres-linea);
    overflow: hidden;
}

.pres-avance-barra > div {
    height: 100%;
    border-radius: 999px;
    transition: width .45s ease;
}

.pres-acciones {
    display: inline-flex;
    gap: 3px;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

/* SEIS botones en una columna congelada —aprobar, ficha, editar, eliminar,
   estado y traslado—: sin apretarlos los últimos se salen del ancho de la
   columna y quedan cortados contra el borde, sin que nada lo delate. */
.pres-acciones .rz-button {
    min-width: 0;
    padding: 4px 4px;
}

.pres-candado {
    color: var(--pres-tenue);
    font-size: 17px !important;
}

/* ═══════════════════ Editor emergente ═══════════════════ */

/*
    ── Por qué encima y no al final del documento ────────────────────────────
    Estos dos diálogos —cambiar el estado y trasladar la partida— eran un div
    suelto al final de la página. Con tres rubros se veía; con treinta quedaba
    debajo de toda la tabla, y al pulsar el botón no pasaba nada visible: había
    que adivinar que la página se había alargado y bajar a buscarlo.

    Ahora se abre centrado sobre la pantalla, como la ficha de facturas. El
    cuerpo se desplaza por dentro para que la ventana nunca sea más alta que la
    pantalla, que es lo que volvería a esconder los botones de Aplicar.
*/
.pres-editor {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(12, 39, 64, .42);
    backdrop-filter: blur(2px);
    animation: pres-aparecer .16s ease both;
}

/*
    La caja se estiliza entera aquí. Las clases del diálogo —.pres-panel,
    .pres-panel-titulo, .pres-campos, .pres-nota— no tenían UNA sola regla en
    esta hoja: el marcado las usaba y el navegador las ignoraba, así que el
    formulario se dibujaba con los valores por omisión del documento.
*/
/*
    Cabecera fija, cuerpo con scroll, pie fijo.

    Antes era una caja con `overflow: auto` y todo dentro, así que al no caber se
    iban de la vista LOS BOTONES: el formulario quedaba a medio llenar y sin
    manera de guardarlo ni de cerrarlo. Con las tres filas de la rejilla el
    cuerpo es lo único que desplaza, y Guardar y Cancelar están siempre donde se
    los busca.
*/
.pres-panel-editor {
    width: min(760px, 100%);
    display: grid;
    grid-template-rows: auto 1fr auto;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow: hidden;
    margin: 0 !important;
    padding: 0;
    background: var(--pres-papel);
    border: 1px solid var(--pres-linea);
    border-radius: var(--pres-radio);
    box-shadow: 0 24px 64px -20px rgba(12, 39, 64, .55);
    font-family: var(--pres-sans);
    animation: pres-subir .18s ease backwards;
}

/* El título ya no flota sobre los campos: es la cabecera de la caja, con su
   línea de separación, y no se va con el scroll. */
.pres-panel-editor > .pres-panel-titulo {
    margin: 0;
    padding: 16px 24px 13px;
    border-bottom: 1px solid var(--pres-linea);
    background: var(--pres-papel);
}

.pres-editor-cuerpo {
    overflow: auto;
    overscroll-behavior: contain;
    padding: 18px 24px 20px;
}

/* Un poco de aire arriba del pie y una línea que lo separa: sin ella, al
   desplazar, los botones parecen parte del último campo. */
.pres-panel-editor > .pres-filtro-acciones {
    margin: 0 !important;
    padding: 13px 24px 15px;
    border-top: 1px solid var(--pres-linea);
    background: linear-gradient(180deg, rgba(12, 39, 64, .015), transparent);
}

/* El correlativo manda y el monto se alinea al canto opuesto: es la pareja que
   identifica la partida sobre la que se está decidiendo. */
.pres-panel-titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    font-family: var(--pres-mono);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--pres-tinta);
}

.pres-panel-monto {
    font-family: var(--pres-mono);
    font-size: 17px;
    font-weight: 600;
    color: var(--pres-azul);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* El mismo aviso, dentro del diálogo: ahí sí necesita despegarse de lo de
   arriba, porque no es el primer bloque de la página sino uno intercalado. */
.pres-error-dialogo {
    margin-top: 14px;
}

.pres-nota {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--pres-apagado);
}

/*
    Los campos envuelven. El diálogo tiene entre dos y tres controles según lo
    que se esté haciendo, y con «nowrap» el motivo —que es el que más ancho
    pide— se estrujaba hasta caber en cuarenta píxeles.
*/
.pres-campos {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-top: 16px;
}

/* Dentro del diálogo, rejilla de doce columnas en vez de flex que envuelve.
   Con flex, «Concepto» y «Fila del flujo» se repartían el ancho a ojo y la
   segunda fila —mes, monto y tipo— quedaba descolgada y de anchos desiguales.
   Con la rejilla cada control ocupa lo que le corresponde y las dos filas se
   alinean. */
.pres-editor-cuerpo .pres-campos {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px 16px;
    align-items: start;
    margin-top: 0;
}

.pres-editor-cuerpo .pres-campos > * { min-width: 0; }

.pres-col-12 { grid-column: span 12; }
.pres-col-8  { grid-column: span 8; }
.pres-col-7  { grid-column: span 7; }
.pres-col-6  { grid-column: span 6; }
.pres-col-5  { grid-column: span 5; }
.pres-col-4  { grid-column: span 4; }
.pres-col-3  { grid-column: span 3; }

@media (max-width: 620px) {
    .pres-editor-cuerpo .pres-campos > * { grid-column: span 12 !important; }
}

/* Los doce meses del préstamo NO entran en la rejilla de doce columnas: son
   doce campos iguales y lo que quieren es repartirse por ancho disponible, no
   por proporción. Se les devuelve el flex y se les da un rótulo encima para que
   no parezcan una continuación de los cinco de arriba. */
.pres-editor-cuerpo .pres-campos-meses {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pres-editor-cuerpo .pres-campos-meses > * {
    flex: 1 1 148px;
    max-width: 200px;
    grid-column: auto;
}

.pres-editor-subtitulo {
    margin: 20px 0 10px;
    padding-top: 16px;
    border-top: 1px solid var(--pres-linea);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pres-apagado);
}

/* La fila de botones del diálogo reutiliza .pres-filtro-acciones, que ya alinea
   a la derecha. */

@keyframes pres-aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes pres-subir {
    from { opacity: 0; transform: translateY(10px) scale(.99); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pres-editor,
    .pres-panel-editor { animation: none !important; }
}

/* En papel no hay diálogo que imprimir. */
@media print {
    .pres-editor { display: none !important; }
}

/* ═══════════════════ Fila expandida ═══════════════════ */

.pres-detalle {
    padding: 14px 18px 18px;
    background: linear-gradient(180deg, rgba(24, 95, 165, .035), transparent 60%);
    font-family: var(--pres-sans);
}

.pres-detalle-desc {
    margin: 0 0 12px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--pres-apagado);
    max-width: 90ch;
}

.pres-detalle-desc-vacia {
    color: var(--pres-tenue);
    font-style: italic;
}

.pres-meses {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 7px;
}

.pres-mes {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 7px 9px;
    border-radius: 9px;
    border: 1px solid var(--pres-linea);
    background: var(--pres-papel);
    min-width: 0;
}

.pres-mes-con-monto {
    background: var(--pres-acento, var(--pres-papel));
    border-color: transparent;
}

.pres-mes-vacio {
    opacity: .55;
}

.pres-mes-nombre {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--pres-tenue);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pres-mes-monto {
    font-family: var(--pres-mono);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: var(--pres-tinta);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pres-meses-edicion {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.pres-detalle-edicion {
    background: rgba(24, 95, 165, .05);
}

/*
    La fila de acciones del pie de la edición: el botón de repetir a la izquierda y el
    total del rubro a la derecha. Van juntos a propósito — el botón cambia el total, y
    tenerlos en la misma línea deja ver el efecto sin mover la vista.
*/
.pres-edicion-acciones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.pres-edicion-acciones .pres-edicion-total {
    margin: 0;
}

.pres-edicion-total {
    margin: 14px 0 0;
    text-align: right;
    font-size: 13px;
    color: var(--pres-apagado);
}

.pres-edicion-total b {
    font-family: var(--pres-mono);
    font-size: 15px;
    color: var(--pres-tinta);
}

.pres-detalle-ejec {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 15px;
    padding-top: 13px;
    border-top: 1px dashed var(--pres-linea);
}

.pres-detalle-ejec span {
    display: flex;
    flex-direction: column;
}

.pres-detalle-ejec small {
    font-size: 9.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--pres-tenue);
}

.pres-origenes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.pres-origen {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 9px;
    border: 1px solid var(--pres-linea);
    border-radius: 9px;
    background: var(--pres-papel);
}

.pres-origen .rz-icon,
.pres-origen .rzi {
    font-size: 17px !important;
    color: var(--pres-tenue);
}

.pres-origen-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.pres-origen-texto small {
    font-size: 9.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pres-tenue);
}

.pres-origen-texto b {
    font-family: var(--pres-mono);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--pres-tinta);
}

.pres-detalle-ejec b {
    font-family: var(--pres-mono);
    font-size: 13.5px;
    color: var(--pres-tinta);
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════ Vacíos, esqueleto, ruta ═══════════════════ */

.pres-vacio {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 22px;
    color: var(--pres-tenue);
    font-family: var(--pres-sans);
    font-size: 13px;
}

.pres-vacio-grande {
    flex-direction: column;
    gap: 6px;
    padding: 56px 24px;
    text-align: center;
    background: var(--pres-papel);
    border: 1px dashed var(--pres-linea);
    border-radius: var(--pres-radio);
}

.pres-vacio-grande .rzi,
.pres-vacio-grande .rz-icon {
    font-size: 40px !important;
    opacity: .35;
}

.pres-vacio-grande h4 {
    margin: 6px 0 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--pres-tinta);
}

.pres-vacio-grande p {
    margin: 0 0 10px;
    font-size: 13px;
}

.pres-esqueleto {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pres-esqueleto-bloque,
.pres-esqueleto-fila {
    border-radius: 12px;
    background: linear-gradient(90deg, #eef2f7 25%, #f7fafc 50%, #eef2f7 75%);
    background-size: 400% 100%;
    animation: pres-brillo 1.4s ease-in-out infinite;
}

.pres-esqueleto-fila {
    height: 44px;
}

/* Sin margen: es un hijo directo del envoltorio y la separación la pone el gap. */
.pres-ruta {
    margin-top: 0;
    border-radius: var(--pres-radio) !important;
    border: 1px solid var(--pres-linea) !important;
    box-shadow: var(--pres-sombra) !important;
}

.pres-ruta-cab {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
    font-family: var(--pres-sans);
}

.pres-ruta-correlativo {
    font-family: var(--pres-mono);
    font-size: 12px;
    color: var(--pres-apagado);
}

.pres-ruta-nombre {
    font-size: 14px;
    font-weight: 600;
    color: var(--pres-tinta);
}

/* ═══════════════════ Animaciones ═══════════════════ */

@keyframes pres-entrada {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

@keyframes pres-brillo {
    from { background-position: 100% 0; }
    to   { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pres-cabecera,
    .pres-kpi,
    .pres-grafico-card,
    .pres-esqueleto-bloque,
    .pres-esqueleto-fila {
        animation: none;
    }

    .pres-kpi:hover {
        transform: none;
    }
}

/* ═══════════════════ Pantallas angostas ═══════════════════ */

@media (max-width: 1200px) {
    .pres-filtros {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pres-filtro-acciones {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .pres-meses {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    /* La cabecera es «flex», no rejilla: aquí se apila envolviendo, no cambiando
       de pistas. */
    .pres-cabecera {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .pres-cabecera-sello {
        align-items: center;
        padding-left: 0;
        padding-top: 14px;
        border-left: 0;
        border-top: 1px solid var(--pres-linea);
        width: 100%;
    }

    /* Los rótulos no caben junto al resto envuelto: vuelven a ser iconos en una
       sola fila y el nombre queda en el «title». */
    .pres-barra-doc {
        display: flex;
        align-items: center;
        gap: 2px;
        padding-left: 0;
        border-left: 0;
    }

    .pres-barra-doc .rz-button .rz-button-text { display: none; }

    /* Sin rótulo el relleno lateral sobra: el marco quedaría muy holgado alrededor
       de un icono de 20 px. */
    .pres-barra-doc .rz-button { padding: 3px 5px; }

    .pres-barra-doc .rz-button,
    .pres-barra-doc-excel { width: auto; }

    .pres-filtros {
        grid-template-columns: 1fr;
    }

    .pres-meses,
    .pres-meses-edicion {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pres-area-cifras {
        gap: 18px;
    }
}

/* ═══════════════════ Impresión ═══════════════════
   El PDF se genera con window.print() sobre esta misma vista (generarPDF oculta
   .hideWhenPrint), así que la hoja impresa se cuida aquí y no en otro documento. */

@media print {
    .pres-cabecera,
    .pres-area,
    .pres-kpi,
    .pres-grafico-card,
    .pres-ruta {
        box-shadow: none !important;
        border-color: #d8e0e8 !important;
        animation: none !important;
        break-inside: avoid;
    }

    /* El degradado de los cantos se imprime como dos bandas grises. */
    .pres-cabecera { background: #fff !important; }

    .pres-kpi-total {
        background: #ffffff !important;
        border: 1px solid #0C2740 !important;
    }

    .pres-kpi-total .pres-kpi-monto {
        color: #0C2740 !important;
    }

    .pres-kpi-total .pres-kpi-rotulo,
    .pres-kpi-total .pres-kpi-pie {
        color: #5b7186 !important;
    }

    .pres-area {
        break-inside: auto;
    }

    .pres-area-cab {
        break-after: avoid;
    }

    .pres-rejilla .rz-grid-table tbody tr {
        break-inside: avoid;
    }

    .pres-detalle {
        background: none !important;
    }

    #barHistorico {
        height: 220px;
    }

    /* Las columnas congeladas de Radzen se apoyan en position: sticky, que al
       imprimir deja la celda flotando sobre el resto de la fila. */
    .pres-rejilla .rz-frozen-cell {
        position: static !important;
    }

    /* La barra de pestañas no dice nada en papel: el título de la cabecera ya
       nombra la categoría que se está imprimiendo. */
    .pres-tabs .rz-tabview-nav {
        display: none !important;
    }

    .pres-tabs .rz-tabview-panels,
    .pres-tabs .rz-tabview-panel {
        padding: 0 !important;
    }
}


/* ────────────────────────────────────────────────────────────────────────────
   Temporadas de mayo a abril

   Dos tarjetas donde antes había un solo formulario. La forma tiene que decir
   que son dos cosas distintas: con un bloque continuo de ocho campos, la
   persona lee «los precios» y vuelve a capturar uno solo, que es exactamente
   el error que la separación viene a corregir.
   ──────────────────────────────────────────────────────────────────────────── */

.pres-temporada {
    background: var(--pres-papel);
    border: 1px solid var(--pres-linea);
    border-radius: var(--pres-radio);
    box-shadow: var(--pres-sombra-tarjeta);
    font-family: var(--pres-sans);
    padding: 16px 18px 18px;
    margin-bottom: 14px;
}

.pres-temporada:last-child {
    margin-bottom: 0;
}

.pres-temporada-cab {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--pres-linea);
}

.pres-temporada-titulo {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--pres-tinta);
}

.pres-temporada-meses {
    font-size: 12.5px;
    color: var(--pres-apagado);
}

/* La cifra a la derecha: lo que esta temporada aporta al ejercicio. Es lo que
   permite ver de un vistazo que las dos no pesan lo mismo — cuatro meses contra
   ocho— sin tener que sumarlo de cabeza. */
.pres-temporada-cifra {
    margin-left: auto;
    font-family: var(--pres-mono);
    font-size: 15px;
    font-weight: 600;
    color: var(--pres-azul);
    white-space: nowrap;
}

.pres-temporada-cifra small {
    display: block;
    margin-top: 1px;
    font-family: var(--pres-sans);
    font-size: 11px;
    font-weight: 400;
    color: var(--pres-tenue);
    text-align: right;
}

/* ────────────────────────────────────────────────────────────────────────────
   De dónde salió cada promedio

   Doce fichas, una por mes. No es decoración: un promedio sacado de tres años
   medidos y otro sacado de uno solo con nueve días de lecturas dan cifras
   igual de plausibles y significan cosas muy distintas, y hasta ahora la
   pantalla no tenía forma de distinguirlos.
   ──────────────────────────────────────────────────────────────────────────── */

.pres-origen {
    background: var(--pres-fondo);
    border: 1px solid var(--pres-linea);
    border-radius: var(--pres-radio);
    font-family: var(--pres-sans);
    padding: 12px 14px 14px;
    margin: 4px 0 16px;
}

.pres-origen-titulo {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pres-apagado);
}

.pres-origen-meses {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pres-origen-mes {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 84px;
    padding: 6px 10px;
    border: 1px solid var(--pres-linea);
    border-radius: 9px;
    background: var(--pres-papel);
    font-size: 11.5px;
    color: var(--pres-apagado);
    cursor: default;
}

.pres-origen-mes b {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--pres-tinta);
}

/* Ámbar: se promedió, pero con lecturas que no cubren el mes entero, así que
   la cifra sale baja. Es una advertencia, no un error. */
.pres-origen-parcial {
    border-color: rgba(211, 47, 20, .28);
    background: rgba(211, 47, 20, .05);
}

.pres-origen-parcial b {
    color: var(--pres-rojo);
}

/* Apagado: no había dato de ese mes en ningún año, y el mes se dejó como
   estaba. Se marca en gris y no en rojo a propósito: no se rompió nada, sólo
   no se tocó. */
.pres-origen-vacio {
    border-style: dashed;
    background: transparent;
    color: var(--pres-tenue);
}

.pres-origen-vacio b {
    color: var(--pres-tenue);
}

/* La acción de medir el precio, al pie de la tarjeta de temporada. */
.pres-temporada-acciones {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--pres-linea);
}

.pres-temporada-pie {
    font-size: 12px;
    color: var(--pres-tenue);
}

/* La segunda línea del chip de origen: qué pasó con la curva de contrato. */
.pres-origen-curva {
    font-size: 10.5px;
    letter-spacing: .02em;
    opacity: .85;
}

/* Aviso de unidad equivocada: un precio por kWh que ronda los cien es una cifra
   en US$/MWh en el campo que no era. Tres ceros y mil veces el ingreso del año. */
.pres-temporada-alerta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid rgba(211, 47, 20, .25);
    border-inline-start: 3px solid var(--pres-rojo);
    border-radius: 9px;
    background: rgba(211, 47, 20, .05);
    font-size: 13px;
    color: var(--pres-tinta);
}

.pres-temporada-alerta .rzi { color: var(--pres-rojo); }
.pres-temporada-alerta span { flex: 1 1 320px; }

/* ════════════════════════════════════════════════════════════════════════════
   La vista previa del promedio

   El cuadro que se abre antes de escribir la generación esperada: los meses en
   filas, un año de referencia por columna, y al final el promedio que saldria
   contra la cifra que hay hoy.

   Va como panel dentro de la pagina y no como dialogo emergente a proposito. Es
   una tabla ancha —crece con cada año que se añada a la lista de referencia— y un
   modal la estrecharia justo donde hace falta sitio. Ademas se queda al lado de
   la tabla de proyeccion que va a modificar, que es contra la que uno compara.
   ════════════════════════════════════════════════════════════════════════════ */

.pres-vista-previa {
    border-color: rgba(24, 95, 165, .35);
    background: linear-gradient(180deg, rgba(24, 95, 165, .035), transparent 120px);
}

/*
    El nombre del mes no necesita los 200px que pide la columna de concepto de las
    demas tablas: aqui es «SEPTIEMBRE» y nada mas. Se recorta para dejarle el
    ancho a las columnas de años, que son las que traen la informacion.

    Va con dos clases —no con !important— porque presupuesto-integral.css se carga
    despues que esta hoja y a igual especificidad ganaria la suya.
*/
.pres-tabla-previa .pres-col-nombre {
    min-width: 96px;
    max-width: 140px;
}

.pres-tabla-previa .pres-col-num {
    min-width: 76px;
}

/*
    El sumando que quedo fuera del promedio.

    Tachado y apagado, pero PRESENTE: la cifra sigue leyendose. Ocultarla dejaria
    una celda vacia, que se lee como «de ese año no hay dato» — que es una de las
    razones por las que un sumando queda fuera, pero no la unica ni la mas
    interesante. El motivo concreto va en el titulo emergente.
*/
.pres-aporte-fuera {
    color: var(--pres-tenue);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* La cifra que va a cambiar. Sin fondo de color: basta el peso y el azul. */
.pres-previa-cambia {
    color: var(--pres-azul);
    font-weight: 600;
}

/* La columna del «ahora», apagada: es el punto de partida, no el resultado. */
.pres-previa-actual {
    color: var(--pres-tenue);
}

/*
    Los avisos del servidor dentro del cuadro.

    En lista y no en un parrafo corrido: son observaciones independientes —meses
    incompletos, curvas parciales, ceros omitidos— y concatenadas en un solo
    bloque de texto se leen como una sola advertencia larga que nadie termina.
*/
.pres-avisos {
    margin: 12px 0 0;
    padding: 12px 16px 12px 32px;
    border-radius: 10px;
    border: 1px solid rgba(211, 47, 20, .18);
    background: rgba(211, 47, 20, .045);
    color: var(--pres-apagado);
    font-family: var(--pres-sans);
    font-size: 12px;
    line-height: 1.5;
}

.pres-avisos > li + li {
    margin-top: 7px;
}

/*
    El texto que explica por que «Aplicar» esta apagado. La fila de acciones
    alinea a la derecha, asi que sin esto la frase quedaria pegada a los botones
    en vez de al principio de la linea, que es donde se lee.
*/
.pres-previa-pie {
    margin-right: auto;
    text-align: left;
}

/* ════════════════════════════════════════════════════════════════════════════
   El rubro, que es lo que se lee

   La columna del nombre del rubro era la unica de la rejilla sin ancho
   declarado, asi que se quedaba con lo que sobrara despues de repartir 1,368 px
   entre las demas. En una pantalla de 1,600 le tocaban unos 110 y la lista
   entera se leia «SUELDOS Y S…», «ENCOMIENDA…», «SERVICIOS R…»: doce rubros
   truncados en el mismo punto, indistinguibles entre si.

   Se corrige en tres capas, de la mas eficaz a la de ultimo recurso:
   1. Ancho — MinWidth en la columna, y unos pixeles menos en correlativo,
      capturo, clase y estado, que los tenian de sobra.
   2. Dos lineas — el nombre puede partirse en vez de truncarse.
   3. Titulo emergente — para el nombre que ni en dos lineas cabe.
   ════════════════════════════════════════════════════════════════════════════ */

/*
    Radzen pone «white-space: nowrap; overflow: hidden; text-overflow: ellipsis»
    en «.rz-grid-table td .rz-cell-data», que es (0,2,1). Este selector es
    (0,4,1) y gana sin depender del orden de carga de las hojas.

    Dos lineas y no ilimitadas: un rubro con una descripcion larga estiraria la
    fila y desalinearia toda la tabla. Con el recorte a dos lineas la fila crece
    como mucho una linea, y para lo que no quepa esta el titulo.
*/
.pres-rejilla .rz-grid-table td.pres-celda-rubro .rz-cell-data {
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.3;
}

/*
    Y un poco mas de peso tipografico, que es la otra mitad de «mas prioridad».
    El rubro es el dato de la fila; el correlativo y quien lo capturo son como se
    localiza. La jerarquia se nota en el tamano, no solo en el ancho.
*/
.pres-rejilla .rz-grid-table td.pres-celda-rubro .pres-proyecto {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--pres-tinta);
}

/* Quien capturo se apaga: es dato de auditoria, no de lectura. */
.pres-rejilla .rz-grid-table td.pres-celda-capturo .rz-cell-data {
    font-size: 11.5px;
    color: var(--pres-apagado);
}

/*
    En pantalla estrecha manda el ancho, no el lujo tipografico: se vuelve al
    cuerpo normal y a una sola linea para que quepan mas columnas antes de que la
    rejilla empiece a desplazar en horizontal.
*/
@media (max-width: 1100px) {
    .pres-rejilla .rz-grid-table td.pres-celda-rubro .pres-proyecto {
        font-size: 12.5px;
    }
}