/*
    Presupuesto integral: ejercicio, administración, ingresos, flujo de caja e
    informe ejecutivo.

    Hoja aparte de presupuestos.css a propósito. Aquélla viste el tablero de rubros
    y ya son casi mil líneas; estas cinco pantallas comparten otra cosa —tablas de
    doce meses y formularios largos— y mezclarlas obligaría a leer novecientas
    líneas para tocar una tabla.

    Hereda las variables de presupuestos.css, así que las dos hojas se cargan
    juntas. Los colores no se repiten aquí: si la marca cambia, cambia en un sitio.
*/

.pres-panel,
.pres-subpanel,
.pres-editor,
.pres-pie,
.pres-tabla-meses,
.pres-bitacora,
.pres-vigencia,
.pres-unidad {
    --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-ambar: #B26A00;
    --pres-radio: 14px;
    --pres-sombra: 0 1px 2px rgba(12, 39, 64, .04), 0 12px 32px -18px rgba(12, 39, 64, .35);
    --pres-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --pres-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ═══════════════════ Panel ═══════════════════ */

/* Dentro de una pantalla homologada la separación la pone el «gap» del
   envoltorio; el margen propio del panel se sumaba a él y descuadraba el
   módulo contra el resto de la plataforma. Fuera de ese envoltorio el panel
   conserva su margen de siempre. */
.pan-pantalla > .pres-panel,
.pan-pantalla-fluida > .pres-panel {
    margin: 0;
}

.pres-panel {
    background: var(--pres-papel);
    border: 1px solid var(--pres-linea);
    border-radius: var(--pres-radio);
    box-shadow: var(--pres-sombra);
    padding: 20px 22px;
    margin: 0 0 18px;
    font-family: var(--pres-sans);
    animation: pres-entrada .4s ease backwards;
}

.pres-panel-titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--pres-tinta);
}

.pres-panel-monto {
    font-family: var(--pres-mono);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--pres-azul);
    font-variant-numeric: tabular-nums;
}

/* Dos paneles a lo ancho cuando cabe; uno debajo del otro cuando no. */
.pres-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 18px;
    align-items: start;
}

.pres-subpanel {
    border: 1px solid var(--pres-linea);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 0 14px;
    background: var(--pres-fondo);
}

.pres-subpanel-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.pres-subpanel-cabecera h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--pres-tinta);
}

/* ═══════════════════ Notas ═══════════════════ */

/*
    Las notas explican por qué la pantalla hace lo que hace. Se imprimen: quien
    revisa el presupuesto en papel necesita el mismo contexto que en pantalla.
*/
.pres-nota {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--pres-apagado);
    max-width: 78ch;
}

.pres-nota-inline {
    font-size: 12px;
    color: var(--pres-apagado);
    align-self: center;
}

.pres-observaciones {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.75;
    color: var(--pres-tinta);
}

.pres-observaciones li {
    margin-bottom: 6px;
}

.pres-observaciones li::marker {
    color: var(--pres-ambar);
}

/* ═══════════════════ Campos ═══════════════════ */

.pres-campos {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 14px;
    align-items: flex-end;
}

.pres-campos > .rz-form-field {
    flex: 1 1 220px;
    min-width: 0;
}

/*
    Los doce meses en una sola rejilla. minmax(0,…) y no un ancho fijo: con doce
    campos de ancho fijo la fila se desborda en pantallas de 13 pulgadas, que es lo
    que usa la mitad de la oficina.
*/
.pres-campos-meses {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 10px;
    align-items: end;
}

.pres-campos-meses > .rz-form-field {
    flex: none;
    width: auto;
    min-width: 0;
}

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

/*
    Aquí había un «.pres-editor { margin-top: 4px }», resto de cuando el editor
    era un bloque más dentro del panel. Hoy es una capa modal —position: fixed,
    inset: 0— y ese margen la bajaba cuatro píxeles y le restaba cuatro de alto,
    dejando una franja de ventana sin cubrir arriba. Una capa modal no participa
    de la separación entre los bloques del panel que la contiene.
*/

.pres-panel-editor {
    border-color: var(--pres-azul);
    box-shadow: 0 0 0 3px rgba(24, 95, 165, .08), var(--pres-sombra);
}

/* ═══════════════════ Tabla de meses ═══════════════════ */

/*
    El contenedor con overflow propio es lo que impide que la página entera se
    desplace en horizontal: trece columnas no caben en un portátil, y sin esto el
    encabezado y los indicadores se corren junto con la tabla.
*/
.pres-tabla-scroll {
    overflow-x: auto;
    margin: 0 -4px;
    padding: 0 4px;
}

.pres-tabla-meses {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--pres-sans);
    font-size: 12px;
    color: var(--pres-tinta);
}

.pres-tabla-meses th {
    padding: 8px 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pres-tenue);
    text-align: right;
    border-bottom: 1px solid var(--pres-linea);
    white-space: nowrap;
}

/* ═══════════════════ Reordenar a mano ═══════════════════ */

/*
    El asa. Sólo aparece en el orden manual —con un ordenamiento puesto no hay nada
    que arrastrar— y se apaga hasta que el ratón entra en la fila: veintiséis asas
    grises permanentes compiten con los nombres, que es lo que se lee.
*/
.pres-asa {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
    color: var(--pres-linea);
    cursor: grab;
    vertical-align: middle;
    transition: color .15s ease;

    /* Sin selección de texto: el asa es lo que se agarra para arrastrar la fila, y
       si el navegador puede entender el gesto como «seleccionar el icono», lo
       entiende así y el arrastre no llega a empezar. Es la misma razón por la que
       el arrastre se inicia aquí y no en la fila entera, que está llena de texto.

       -webkit- y sin prefijo: Safari todavía pide el suyo. */
    -webkit-user-select: none;
    user-select: none;

    /* El asa se toca, no se desplaza: sin esto, en una tableta el gesto de
       arrastrar la fila desplaza la tabla horizontalmente. */
    touch-action: none;
}

/*
    .rzi primero: RadzenIcon emite «<i class="notranslate rzi">», no «.rz-icon» —esa
    clase sólo existe con sufijo, como .rz-icon-trash— ni «material-symbols-outlined»,
    que es la fuente de Google y no la marca de Radzen. Con los selectores equivocados
    el asa salía a 24 px en las tres tablas y ensanchaba la columna del concepto. Es la
    lista que ya usan presupuestos.css, inventario.css y pantalla.css.
*/
.pres-asa .rzi,
.pres-asa .rz-icon,
.pres-asa .material-symbols-outlined {
    font-size: 16px;
}

.pres-fila-movible:hover .pres-asa {
    color: var(--pres-apagado);
}

.pres-fila-movible:active .pres-asa {
    cursor: grabbing;
}

/*
    La fila en el aire se atenúa: dice «esto es lo que llevo en la mano».

    La clase la pone Presupuestos.js en el tick SIGUIENTE al «dragstart», no
    durante. Chrome saca la foto de lo que se arrastra al terminar de despachar ese
    evento, así que atenuando antes se fotografiaba la fila ya a un 40 % y sobre eso
    el navegador aplicaba su propia transparencia: el fantasma salía casi invisible
    y arrastrar parecía no hacer nada.
*/
.pres-fila-arrastrando {
    opacity: .4;
}

/*
    Dónde va a caer. Una línea gruesa ARRIBA de la fila destino y no un fondo de
    color: el gesto es «ponlo aquí», y un relleno señala una fila, no un hueco entre
    dos. El box-shadow interior en vez de un border evita que la fila crezca dos
    píxeles y empuje a las de abajo justo mientras se apunta.
*/
.pres-fila-destino > td {
    box-shadow: inset 0 2px 0 0 var(--pres-azul);
}

/*
    Arrastrando hacia abajo, la línea acaba DEBAJO de la señalada —quitarla de su sitio
    corre una posición a todas las de abajo—, así que la barra va abajo. Pintarla
    siempre arriba prometía una cosa y hacía la otra en la mitad de los arrastres.
*/
.pres-fila-destino-abajo > td {
    box-shadow: inset 0 -2px 0 0 var(--pres-azul);
}

/* Un botón pequeño en el título del grupo, separado del monto. */
.pres-panel-accion {
    margin-left: 12px;
    vertical-align: middle;
}

/*
    En papel no hay arrastre. El asa desaparece del todo —no ocupa hueco— porque en
    la columna del concepto cada milímetro cuenta.
*/
@media print {
    .pres-asa {
        display: none;
    }

    .pres-fila-arrastrando {
        opacity: 1;
    }

    .pres-fila-destino > td,
    .pres-fila-destino-abajo > td {
        box-shadow: none;
    }
}


/* ═══════════════════ Cabeceras que ordenan ═══════════════════ */

/*
    Sólo las cabeceras que ordenan llevan esta clase: en la tabla de gastos de
    administración la columna de acciones no ordena nada, y no debe invitar a
    pulsarla.

    El subrayado punteado al pasar por encima —y no un cambio de fondo— porque la
    cabecera ya es gris tenue por diseño: oscurecerla entera la haría competir con
    los importes, que son lo que se lee.
*/
.pres-th-orden {
    cursor: pointer;
    user-select: none;
    transition: color .15s ease;
}

.pres-th-orden:hover {
    color: var(--pres-tinta);
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

/*
    La columna por la que se ordena se queda oscura, ya sin subrayado.

    Doble clase y no una sola: «.pres-tabla-meses th» ya fija el color y vale
    (0,1,1) —clase mas tipo—, asi que una regla de (0,1,0) pierde por
    especificidad y da igual que vaya despues en el archivo. El sintoma era
    desconcertante: la cabecera activa se oscurecia al pasar el raton y volvia a
    gris palido al salir.
*/
.pres-th-orden.pres-orden-asc,
.pres-th-orden.pres-orden-desc {
    color: var(--pres-tinta);
}

/*
    La flecha. Ancho fijo aunque esté vacía: sin él, la cabecera activa se
    ensancharía al aparecer el glifo y las trece columnas bailarían en cada clic.
*/
.pres-orden-flecha {
    display: inline-block;
    width: 10px;
    margin-left: 3px;
    font-size: 10px;
    line-height: 1;
    text-align: center;
}

/*
    El aviso de que la tabla NO está en el orden de captura. Sólo aparece con un
    ordenamiento puesto, y se imprime: es la diferencia entre entregar un
    presupuesto de nómina con las jerarquías desordenadas y entregarlo diciendo
    por qué lo están.
*/
.pres-nota-orden {
    display: block;
    margin: -4px 0 14px;
    font-size: 11px;
    color: var(--pres-apagado);
}

/*
    En papel no hay clic, pero SÍ hay orden: el PDF sale del mismo DOM que la
    pantalla —generarPDF es window.print()—, así que se imprime lo que se ve. Por
    eso la flecha se queda: esconderla dejaría el documento sin ninguna marca de
    que no está en el orden de captura. Lo que se quita es lo que sólo tiene
    sentido con un ratón delante.
*/
@media print {
    .pres-th-orden {
        cursor: default;
        text-decoration: none;
    }
}


.pres-tabla-meses td {
    padding: 7px 6px;
    text-align: right;
    border-bottom: 1px solid var(--pres-linea);
    font-variant-numeric: tabular-nums;
}

.pres-tabla-meses tbody tr:hover {
    background: var(--pres-fondo);
}

.pres-col-nombre {
    text-align: left !important;
    min-width: 200px;
    max-width: 340px;
}

/*
    La columna de las casillas. Estrecha y fija: no compite por el ancho con el
    concepto, que es lo que hay que leer. No se imprime — el marcado ya lleva
    `hideWhenPrint`, y esto la quita también del ancho de la tabla.
*/
.pres-col-marca {
    width: 34px;
    min-width: 34px;
    padding-right: 0 !important;
    text-align: center !important;
}

.pres-col-marca input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--pres-tinta);
    vertical-align: middle;
}

.pres-col-mes {
    font-family: var(--pres-mono);
    min-width: 74px;
}

.pres-col-num {
    font-family: var(--pres-mono);
    min-width: 84px;
}

.pres-col-total {
    font-family: var(--pres-mono);
    min-width: 96px;
    border-left: 1px solid var(--pres-linea);
}

.pres-col-acciones {
    text-align: right !important;
    white-space: nowrap;
    width: 90px;
}

.pres-col-motivo {
    text-align: left !important;
    max-width: 280px;
    font-size: 11px;
    color: var(--pres-apagado);
}

/*
    El concepto, en UNA fila: asa, nombre y etiquetas.

    Antes el nombre era «display:block», así que ocupaba el ancho entero de la
    celda y empujaba el asa —que es en línea— al renglón de arriba: las dos
    rayitas de arrastre salían flotando ENCIMA del texto, sin nada que dijera a
    qué línea pertenecían. El flex las pone donde se esperan, a la izquierda y a
    la misma altura, y de paso alinea las etiquetas «RRHH» e «inactiva».

    En un div DENTRO de la celda, no en la celda misma: un «td» al que se le cambia
    el «display» deja de ser table-cell, el navegador le genera una celda anónima
    alrededor y la columna se descuelga de la cabecera y del pie.

    Y con clase propia en vez de tocar «.pres-col-nombre»: esa clase la comparten la
    cabecera ordenable, el pie de totales y la tabla del reparto por rubro, y esta
    última APILA a propósito el correlativo sobre el nombre del proyecto.
*/
.pres-concepto {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* El asa no se encoge ni se estira: es un ancla de 16 px. Sin esto, un concepto
   largo la comprime hasta hacerla indistinguible de un punto. */
.pres-concepto > .pres-asa {
    flex: 0 0 auto;
    margin-right: 0;
}

/* Fuera del concepto sigue siendo un bloque: hay pantallas que lo usan como
   primera línea de una celda de dos. */
.pres-linea-nombre {
    display: block;
    font-weight: 500;
}

/* Dentro del concepto se lleva el sobrante y se corta él, no las etiquetas de la
   derecha, que son las que dicen si la línea es calculada o está de baja. */
.pres-concepto > .pres-linea-nombre {
    flex: 1 1 auto;
    min-width: 0;
}

.pres-linea-sub {
    display: block;
    font-size: 11px;
    color: var(--pres-tenue);
}

/* Filas especiales */

.pres-tabla-meses tfoot td,
.pres-fila-total > td {
    border-top: 2px solid var(--pres-tinta);
    border-bottom: none;
    font-weight: 600;
    background: var(--pres-fondo);
}

.pres-fila-bloque > td {
    padding: 12px 6px 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pres-azul);
    text-align: left;
    border-bottom: 1px solid var(--pres-azul);
    background: transparent;
}

/* Una línea desactivada sigue visible pero se lee como apagada, no como error. */
.pres-fila-inactiva > td {
    opacity: .5;
    font-style: italic;
}

/* En el flujo de caja la primera columna se congela: sin ella, al desplazar en
   horizontal se pierde de vista qué concepto se está leyendo. */
.pres-tabla-flujo .pres-col-nombre {
    position: sticky;
    left: 0;
    background: var(--pres-papel);
    z-index: 1;
}

.pres-tabla-flujo tbody tr:hover .pres-col-nombre {
    background: var(--pres-fondo);
}

.pres-tabla-flujo .pres-fila-total > .pres-col-nombre,
.pres-tabla-flujo tfoot .pres-col-nombre {
    background: var(--pres-fondo);
}

/* ═══════════════════ Etiquetas ═══════════════════ */

.pres-etiqueta {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: var(--pres-fondo);
    border: 1px solid var(--pres-linea);
    color: var(--pres-apagado);
    vertical-align: middle;
}

.pres-etiqueta-formula {
    background: rgba(24, 95, 165, .08);
    border-color: rgba(24, 95, 165, .25);
    color: var(--pres-azul);
}

.pres-etiqueta-baja {
    background: rgba(211, 47, 20, .07);
    border-color: rgba(211, 47, 20, .22);
    color: var(--pres-rojo);
}

/*
    Cuántas plazas hay detrás del renglón.

    En tinta y no en gris: no es un estado de la línea —como «inactiva» o «RRHH»—
    sino parte de lo que la línea dice. Una de «Operador de Planta I» por
    US$1,153.85 son tres personas a US$384.62, y el monto ya viene multiplicado; sin
    esta cifra, dos renglones contiguos parecen comparables y no lo son.

    Cifra en mono y sin versalitas: es un número que se lee, no un rótulo.
*/
.pres-etiqueta-plazas {
    background: rgba(12, 39, 64, .06);
    border-color: rgba(12, 39, 64, .18);
    color: var(--pres-tinta);
    font-family: var(--pres-mono);
    letter-spacing: .04em;
    text-transform: none;
}

/*
    El contador de la casilla de grupo, cuando hay algunas marcadas y otras no.

    Ocupa el sitio del estado intermedio del checkbox, que Blazor no puede pintar:
    «indeterminate» es una propiedad del DOM y no un atributo de contenido, así que
    se emite con setAttribute y el navegador lo ignora. Un número es además más
    claro que un guion — dice CUÁNTAS, no sólo que hay alguna.
*/
.pres-marca-parcial {
    display: block;
    margin-top: 1px;
    font-family: var(--pres-mono);
    font-size: 9px;
    line-height: 1;
    color: var(--pres-azul);
}

.pres-etiqueta-ingreso {
    background: rgba(28, 138, 90, .08);
    border-color: rgba(28, 138, 90, .25);
    color: var(--pres-verde);
}

.pres-etiqueta-egreso {
    background: rgba(178, 106, 0, .08);
    border-color: rgba(178, 106, 0, .25);
    color: var(--pres-ambar);
}

/* Estados del rubro: 0 vigente, 1 suprimido, 2 reducido, 3 ejecutado. */
.pres-etiqueta-estado-0 {
    background: rgba(28, 138, 90, .08);
    border-color: rgba(28, 138, 90, .25);
    color: var(--pres-verde);
}

.pres-etiqueta-estado-1 {
    background: rgba(211, 47, 20, .07);
    border-color: rgba(211, 47, 20, .22);
    color: var(--pres-rojo);
}

.pres-etiqueta-estado-2 {
    background: rgba(178, 106, 0, .08);
    border-color: rgba(178, 106, 0, .25);
    color: var(--pres-ambar);
}

.pres-etiqueta-estado-3 {
    background: rgba(24, 95, 165, .08);
    border-color: rgba(24, 95, 165, .25);
    color: var(--pres-azul);
}

/* ═══════════════════ Sello de estado del ejercicio ═══════════════════ */

.pres-sello-estado {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    background: var(--pres-fondo);
    border: 1px solid var(--pres-linea);
    color: var(--pres-apagado);
}

/* Estado 0 = BORRADOR. Sin esta regla el ejercicio recién abierto pintaba la
   pastilla gris por omisión, indistinguible de «sin estado». */
.pres-sello-0 {
    background: rgba(178, 106, 0, .10);
    border-color: rgba(178, 106, 0, .35);
    color: #8a5200;
}

.pres-sello-1 {
    background: rgba(28, 138, 90, .1);
    border-color: rgba(28, 138, 90, .3);
    color: var(--pres-verde);
}

.pres-sello-2 {
    background: rgba(12, 39, 64, .08);
    border-color: rgba(12, 39, 64, .25);
    color: var(--pres-tinta);
}

/* ═══════════════════ Indicadores y variaciones ═══════════════════ */

/* Un indicador que pide atención. No es un error: es una cifra que hay que mirar. */
.pres-kpi-alerta {
    border-color: rgba(211, 47, 20, .3);
    box-shadow: 0 0 0 3px rgba(211, 47, 20, .06), var(--pres-sombra);
}

.pres-kpi-alerta .pres-kpi-monto {
    color: var(--pres-rojo);
}

.pres-alza {
    color: var(--pres-rojo);
    font-weight: 600;
}

.pres-baja {
    color: var(--pres-verde);
    font-weight: 600;
}

/* ═══════════════════ Atajos y pie ═══════════════════ */

.pres-atajos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 24px;
}

.pres-pie {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 28px;
    padding-top: 12px;
    border-top: 1px solid var(--pres-linea);
    font-family: var(--pres-sans);
    font-size: 11px;
    color: var(--pres-tenue);
}

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

@media print {
    .pres-panel,
    .pres-subpanel {
        box-shadow: none;
        border-color: #d7dfe7;
        animation: none;
        break-inside: avoid;
    }

    /* La tabla de doce meses no se desplaza en papel: se encoge para caber. */
    .pres-tabla-scroll {
        overflow: visible;
    }

    .pres-tabla-meses {
        font-size: 8.5px;
    }

    .pres-tabla-meses th,
    .pres-tabla-meses td {
        padding: 3px 3px;
    }

    .pres-col-mes,
    .pres-col-num,
    .pres-col-total {
        min-width: 0;
    }

    /* La columna congelada deja de estarlo: en papel no hay desplazamiento y
       position:sticky rompe el salto de página en algunos motores. */
    .pres-tabla-flujo .pres-col-nombre {
        position: static;
    }

    .pres-tabla-meses thead {
        display: table-header-group;
    }

    .pres-tabla-meses tr {
        break-inside: avoid;
    }

    .pres-editor,
    .pres-atajos {
        display: none !important;
    }
}

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

@media (max-width: 720px) {
    .pres-panel {
        padding: 16px 14px;
    }

    .pres-campos > .rz-form-field {
        flex: 1 1 100%;
    }

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


/* ═══════════════════ Parámetros legales ═══════════════════ */

/*
    La vigencia de cada valor. El que rige en el ejercicio que se está leyendo va
    resaltado; los demás son historia y se apagan. Sin esa distinción, una tabla
    con «desde 2025» y «desde 2026» obliga a comparar mentalmente contra el año
    de la cabecera en cada fila.
*/
.pres-vigencia {
    display: inline-block;
    min-width: 62px;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--pres-linea);
    background: var(--pres-fondo);
    color: var(--pres-tenue);
    font-family: var(--pres-mono);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

.pres-vigencia-activa {
    background: rgba(28, 138, 90, .1);
    border-color: rgba(28, 138, 90, .32);
    color: var(--pres-verde);
}

/* «Q/mes», «%». Va pegada al número y en tono apagado: la unidad acompaña, no compite. */
.pres-unidad {
    color: var(--pres-tenue);
    font-size: 11px;
    font-weight: 500;
}


/* ═══════════════════ Bitácora de la partida ═══════════════════ */

/*
    Se lee de arriba abajo, de lo más reciente a lo más viejo, y cada anotación
    lleva una barra a la izquierda cuyo color dice de qué clase fue el movimiento.
    Lo que quita dinero del ejercicio —suprimir, eliminar— va en rojo; lo que lo
    mueve de sitio —posponer, correr el calendario, redistribuir— en ámbar; el
    resto queda neutro. La bitácora se recorre buscando lo que dolió.
*/
.pres-bitacora {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}

.pres-bitacora-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pres-bitacora-item {
    border: 1px solid var(--pres-linea);
    border-left: 3px solid var(--pres-tenue);
    border-radius: 10px;
    background: var(--pres-papel);
    padding: 9px 12px 10px;
}

.pres-bitacora-grave {
    border-left-color: var(--pres-rojo);
}

.pres-bitacora-aviso {
    border-left-color: var(--pres-ambar);
}

.pres-bitacora-cabeza {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.pres-bitacora-tipo {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--pres-azul);
}

.pres-bitacora-rubro {
    font-family: var(--pres-mono);
    font-size: 11px;
    color: var(--pres-apagado);
}

.pres-bitacora-fecha {
    margin-left: auto;
    font-family: var(--pres-mono);
    font-size: 11px;
    color: var(--pres-tenue);
    white-space: nowrap;
}

.pres-bitacora-detalle {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--pres-tinta);
}

/* El motivo lo escribió una persona, y se nota: va en cursiva y entre comillas. */
.pres-bitacora-motivo {
    margin: 4px 0 0;
    font-size: 12.5px;
    font-style: italic;
    line-height: 1.45;
    color: var(--pres-apagado);
}

.pres-bitacora-pie {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--pres-tenue);
}

.pres-bitacora-origen::before {
    content: "·";
    margin-right: 8px;
}

.pres-bitacora-baja,
.pres-bitacora-sube {
    margin-left: auto;
    font-family: var(--pres-mono);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.pres-bitacora-baja {
    color: var(--pres-rojo);
}

.pres-bitacora-sube {
    color: var(--pres-verde);
}

.pres-bitacora-vacia {
    margin: 0;
    padding: 10px 2px;
    font-size: 12.5px;
    color: var(--pres-tenue);
}

/* ═══════════════════ Reparto de la nómina por rubro ═══════════════════ */

/*
    El nombre del proyecto bajo el correlativo. Va apagado y en cuerpo menor
    porque lo que identifica la fila es el correlativo; el nombre está para
    reconocerla sin tener que buscarlo en otra pantalla.
*/
.pres-sub {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--pres-tenue);
}

/*
    La fila de lo que no está asignado a ningún rubro. Se pinta distinta porque
    no es un rubro: es la lista de lo que falta por resolver antes de aprobar el
    ejercicio, y mezclada con las demás pasa desapercibida justo cuando importa.
*/
.pres-fila-alerta > td {
    background: rgba(178, 106, 0, .07);
}

.pres-fila-alerta .pres-col-nombre b {
    color: var(--pres-ambar);
}

/*
    Una cifra que no cuadra. En ámbar y no en rojo: descuadrar no es un error, es un
    estado normal del presupuesto —se asignó una plaza y el rubro todavía no lo
    sabe— y pintarlo de rojo haría que se dejara de mirar.

    Se colorea la CIFRA y no la fila entera: en el reparto por rubro la fila
    completa ya está reservada para «esto no está asignado a nada», que es un
    problema distinto y más grave.
*/
.pres-num-alerta {
    color: var(--pres-ambar);
}