/* Magneto — hoja de estilos.
   Sin build step: esto se edita a mano y se sirve tal cual. La version sale de
   filemtime en el layout, no de un numero fijo: un ?v=3 pegado ya sirvio CSS
   viejo durante un deploy y la UI se veia rota sin un solo error en el log.

   La decision que ordena todo: esto es un libro mayor. Los numeros van a la
   derecha con cifras tabulares, digito sobre digito; el texto a la izquierda.
   La columna de plata es lo unico tipograficamente fuerte de la pantalla,
   porque es el punto de toda la herramienta. */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
    --azul: #1B3BBD;          /* la marca, del logo */
    --tinta: #1A2433;         /* azul-gris profundo, no un negro disfrazado */
    --tenue: #63728A;
    --linea: #DCE3EC;
    --linea-firme: #C3CDDA;
    --fondo: #EEF1F5;
    --papel: #FFFFFF;
    --debe: #A3231B;          /* lo que falta cobrar */
    --debe-fondo: #FCEDEC;
    --saldado: #1C6B45;
    --saldado-fondo: #E9F4EE;
    --alerta: #8A5300;

    /* Pisos tintados por severidad. Existian --debe-fondo y --saldado-fondo y
       casi no se usaban: el estado de una fila vivia en una sombra de 3px que
       no se veia. Ahora la severidad es un eje visual con peso propio. */
    --debe-piso: #FBEDEB;
    --alerta-piso: #FBF3E6;
    --saldado-piso: #EAF4EE;
    --azul-piso: #EDF1FB;

    /* La barra lateral: oscura, para que el contenido sea lo unico claro de
       la pantalla y el ojo caiga ahi solo. Es azul-gris y no gris neutro
       porque el azul de la marca tiene que estar en alguna parte. */
    --barra-fondo: #1B2431;
    --barra-texto: #A9B6C7;
    --barra-activo: #FFFFFF;
    --barra-activo-fondo: #29344A;
    --barra-linea: #2B3648;
    --barra-ancho: 236px;
    /* El azul de la marca no se lee sobre el fondo oscuro: este si. */
    --azul-claro: #5B8DEF;

    --radio: 4px;
    --sombra: 0 1px 2px rgba(26, 36, 51, .06);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--tinta);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
}

/* Todo lo que sea plata usa cifras tabulares: sin esto las columnas no alinean
   y una tabla de montos deja de leerse de un vistazo. */
table, .plata, .cifra, input[type=number], input[type=date] { font-variant-numeric: tabular-nums; }

a { color: var(--azul); }

:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 2px; }

/* ---------- Barra lateral ----------
   Al costado y no arriba: con la nav arriba, cada pantalla empezaba con una
   fila de menus desplegables y el contenido arrancaba a mitad de camino.
   Al costado, el menu entero esta a la vista sin abrir nada y la pantalla
   empieza en el titulo. */

.barra {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--barra-ancho);
    display: flex;
    flex-direction: column;
    background: var(--barra-fondo);
    overflow-y: auto;
}

.marca {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 18px;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -.01em;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid var(--barra-linea);
}

.tabs { display: flex; flex-direction: column; padding: 10px 0; flex: 1; }

.tabs a {
    display: block;
    padding: 9px 20px;
    color: var(--barra-texto);
    text-decoration: none;
    font-size: 14px;
}

.tabs a:hover { color: var(--barra-activo); background: var(--barra-activo-fondo); }

/* El activo se marca con fondo y con un filo a la izquierda: el color solo
   no alcanza sobre un fondo oscuro. */
.tabs a.activo {
    color: var(--barra-activo);
    background: var(--barra-activo-fondo);
    box-shadow: inset 3px 0 0 var(--azul-claro);
    font-weight: 500;
}

/* Cada grupo se pliega. Abierto queda solo donde uno esta parado. */
.tabs .grupo > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 20px;
    font-size: 13px;
    color: var(--barra-texto);
    cursor: pointer;
}

.tabs .grupo > summary:hover { color: var(--barra-activo); background: var(--barra-activo-fondo); }
.tabs .grupo > summary::-webkit-details-marker { display: none; }

/* La flecha dice que hay algo debajo, y girando dice si esta abierto. */
.tabs .grupo > summary::after {
    content: '';
    width: 5px; height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(-45deg);
    transition: transform .12s ease;
    flex-shrink: 0;
}

.tabs .grupo[open] > summary { color: var(--barra-activo); }
.tabs .grupo[open] > summary::after { transform: translateY(-1px) rotate(45deg); }

.tabs .submenu { display: flex; flex-direction: column; padding-bottom: 6px; }

/* Los hijos, sangrados: se ve de un vistazo que cuelgan del grupo. */
.tabs .submenu a { padding-left: 34px; font-size: 13.5px; }

.barra .pie-barra {
    border-top: 1px solid var(--barra-linea);
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.barra .cuenta { color: var(--barra-activo); text-decoration: none; font-size: 14px; }
.barra .cuenta:hover { text-decoration: underline; }
.barra .salir .btn-plano { color: var(--barra-texto); font-size: 13px; padding: 0; }
.barra .salir .btn-plano:hover { color: var(--barra-activo); }

/* ---------- Página ---------- */

main { padding: 30px 34px 64px; max-width: 1180px; margin-left: var(--barra-ancho); }

h1 { font-size: 26px; font-weight: 600; letter-spacing: -.015em; margin: 0 0 6px; }
h2 { font-size: 17px; font-weight: 600; letter-spacing: -.005em; margin: 36px 0 12px; }

.situacion { color: var(--tenue); margin: 0 0 26px; max-width: 62ch; }
.situacion strong { color: var(--tinta); font-weight: 600; }

/* ---------- Tablas: la superficie principal ---------- */

.tabla { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); overflow-x: auto; }

table { width: 100%; border-collapse: collapse; background: var(--papel); }

th, td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--linea); }

/* Sentence case, no versalitas: un encabezado gritado no aporta informacion. */
th { font-size: 13px; font-weight: 500; color: var(--tenue); border-bottom-color: var(--linea-firme); white-space: nowrap; }

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #F7F9FC; }

/* La fila de total cierra la tabla: una linea firme arriba y algo mas de peso,
   sin gritar. Va en td y no en th porque es un numero, no un encabezado. */
tfoot td { border-top: 1px solid var(--linea-firme); border-bottom: 0; font-weight: 600; }
tfoot tr:hover { background: transparent; }

/* La plata manda: mas grande, mas pesada y a la derecha. Es lo unico que se
   permite dominar en la pantalla. */
.plata { text-align: right; }
td.plata { font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
td.plata .moneda { color: var(--tenue); font-weight: 400; }
td.plata.debe { color: var(--debe); font-weight: 600; }
td.plata.nulo { color: var(--tenue); font-weight: 400; font-size: 15px; }

/* El estado va como filo de la fila y piso tintado, no como palabra suelta: en
   una tabla densa el ojo lo agarra antes de leer, y no le compite a los
   numeros. La sombra de 3px anterior era invisible en la practica. */
tr.fila-vencido { background: var(--debe-piso); }
tr.fila-vencido td:first-child { box-shadow: inset 4px 0 0 var(--debe); }
tr.fila-vencido:hover { background: #F8E4E1; }

tr.fila-pronto { background: var(--alerta-piso); }
tr.fila-pronto td:first-child { box-shadow: inset 4px 0 0 var(--alerta); }
tr.fila-pronto:hover { background: #F7EDDB; }

.marca-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; }
.marca-estado::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.vencido { color: var(--debe); }
.vence-pronto { color: var(--alerta); }
.saldado { color: var(--saldado); }

.sutil { color: var(--tenue); }
.nota { font-size: 13px; color: var(--tenue); }

/* ---------- Resumen de números ---------- */

/* ---------- Cifras ----------
   Cada una en su tarjeta con un filo de color a la izquierda, y el numero del
   color de lo que significa. Antes eran seis numeros negros en fila: todos
   pesaban igual y el que faltaba cobrar no se distinguia del que entro. */

.cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 14px;
    margin: 0 0 30px;
}

.cifra {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-left: 4px solid var(--linea-firme);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 16px 18px;
}

.cifra .valor { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.cifra .etiqueta { display: block; font-size: 13px; color: var(--tenue); margin-top: 3px; }

/* El filo dice de que se trata antes de leer el numero. */
.cifra.entra { border-left-color: var(--saldado); }
.cifra.entra .valor { color: var(--saldado); }
.cifra.sale { border-left-color: var(--debe); }
.cifra.sale .valor { color: var(--debe); }
.cifra.neutra { border-left-color: var(--azul); }
.cifra.neutra .valor { color: var(--azul); }
.cifra.pendiente { border-left-color: var(--debe); }
.cifra.pendiente .valor { color: var(--debe); }

/* ---------- Arcos ---------- */

.arcos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
    margin: 0 0 34px;
}

.arco {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 18px 20px 10px;
}

.arco h2 { margin: 0; }
.arco .leyenda { color: var(--tenue); font-size: 13px; margin: 3px 0 0; }
.arco svg { display: block; width: 100%; max-width: 260px; margin: 6px auto 0; height: auto; }

.arco-centro { font-size: 21px; font-weight: 600; fill: var(--tinta); }
.arco-pie { font-size: 10.5px; fill: var(--tenue); letter-spacing: .04em; text-transform: uppercase; }

/* ---------- Controles ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    border: 1px solid var(--azul);
    border-radius: var(--radio);
    background: var(--azul);
    color: #fff;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.btn:hover { background: #1730A2; border-color: #1730A2; }

.btn-plano { background: transparent; color: var(--tenue); border-color: transparent; font-weight: 400; }
.btn-plano:hover { background: transparent; color: var(--tinta); border-color: transparent; }

.btn-suave { background: var(--papel); color: var(--tinta); border-color: var(--linea-firme); font-weight: 400; }
.btn-suave:hover { background: #F7F9FC; border-color: var(--tenue); }

/* [hidden] no alcanza: .btn trae display propio y le gana. Paso dos veces. */
.btn[hidden], .form-grid[hidden] { display: none !important; }

input, select, textarea {
    font: inherit;
    color: var(--tinta);
    padding: 7px 9px;
    border: 1px solid var(--linea-firme);
    border-radius: var(--radio);
    background: var(--papel);
    max-width: 100%;
}

input:focus, select:focus, textarea:focus { border-color: var(--azul); }

label { display: block; margin-bottom: 14px; font-size: 14px; color: var(--tenue); }
label input, label select, label textarea { display: block; width: 100%; margin-top: 5px; color: var(--tinta); }
textarea { min-height: 80px; }

/* ---------- Bloques ---------- */

.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 24px; box-shadow: var(--sombra); max-width: 560px; }

.aviso { padding: 11px 15px; border-radius: var(--radio); margin: 0 0 20px; border: 1px solid transparent; }
.aviso.ok { background: var(--saldado-fondo); border-color: #BFE0CD; color: var(--saldado); }
.aviso.error { background: var(--debe-fondo); border-color: #F0C9C6; color: var(--debe); }
/* Archivado: no es un error ni un exito, es un estado. Gris, y que se note. */
.aviso.archivado { background: var(--fondo); border-color: var(--linea-firme); color: var(--tenue); }

.error { color: var(--debe); font-size: 13px; }
label .error { display: block; margin-top: 4px; }

.vacio { color: var(--tenue); background: var(--papel); border: 1px dashed var(--linea-firme); border-radius: var(--radio); padding: 22px; }

/* ---------- Cobranza ---------- */

.periodo { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 20px; }
.periodo label { margin: 0; display: flex; align-items: center; gap: 8px; }
.periodo label input { margin: 0; width: auto; }

.cobrar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cobrar input[type=number] { width: 92px; text-align: right; }
.cobrar input[type=date] { width: 142px; }

.pago { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; color: var(--tenue); }

.confirmar summary { color: var(--azul); cursor: pointer; font-size: 13px; }
.confirmar[open] { display: block; background: #F7F9FC; border: 1px solid var(--linea); border-radius: var(--radio); padding: 10px; margin: 6px 0; }
.confirmar p { margin: 6px 0; color: var(--tenue); max-width: 260px; font-size: 13px; }

/* ---------- Registro de referencia ----------
   Una tabla de consulta -contratistas, documentos, rent roll- no compite con
   una de plata. Pierde la tarjeta y baja medio punto de peso; el contraste sale
   de apagar esto, no de agrandar lo urgente. */

.tabla.referencia {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--linea-firme);
    border-radius: 0;
    box-shadow: none;
}

.tabla.referencia table { background: transparent; }
.tabla.referencia td { font-size: 14px; color: var(--tenue); padding: 11px 14px; }
.tabla.referencia td:first-child { color: var(--tinta); }
.tabla.referencia td.plata { font-size: 15px; color: var(--tinta); }
.tabla.referencia tbody tr:hover { background: rgba(255, 255, 255, .55); }

/* ---------- Encabezado de seccion con su cuenta ----------
   "Quien no pago · 7 · $4.693" se lee de un vistazo y deja saltear la seccion
   entera. La cuenta es informacion, no decoracion. */

h2 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

h2 .cuenta-seccion {
    font-size: 13px;
    font-weight: 500;
    color: var(--tenue);
    letter-spacing: 0;
}

h2 .cuenta-seccion.urge { color: var(--debe); }
h2 .cuenta-seccion.pronto { color: var(--alerta); }

/* El corte entre lo que pide una decision y lo que solo informa. */
.corte-estado {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 46px 0 4px;
    color: var(--tenue);
    font-size: 13px;
}

.corte-estado::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--linea-firme);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .barra { flex-wrap: wrap; gap: 16px; padding: 0 16px; }
    .tabs { gap: 16px; order: 3; width: 100%; overflow-x: auto; }
    main { padding: 24px 16px 48px; }
    .cifras { gap: 10px; }
    th, td { padding: 11px 12px; }
}

/* La barra fija no entra en un telefono: pasa a ser una franja arriba, con
   los grupos en fila y sin ocupar media pantalla. */
@media (max-width: 900px) {
    .barra {
        position: static;
        width: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 18px;
        padding: 0 16px 10px;
    }

    .marca { border-bottom: none; padding: 14px 0 10px; width: 100%; }
    .tabs { flex-direction: row; flex-wrap: wrap; gap: 2px 18px; padding: 0; }
    .tabs > a { padding: 6px 0; }
    .tabs .grupo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
    .tabs .grupo > summary { padding: 6px 0; }
    .tabs .submenu { flex-direction: row; flex-wrap: wrap; gap: 0 14px; }
    .tabs a.activo { box-shadow: none; background: none; text-decoration: underline; }
    .barra .pie-barra { border-top: none; padding: 8px 0 0; flex-direction: row; gap: 14px; width: 100%; }

    main { margin-left: 0; padding: 22px 16px 56px; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.confirmar + .confirmar { margin-top: 4px; }
.confirmar label { font-size: 13px; margin-bottom: 8px; }
.confirmar[open] { min-width: 210px; }

th.ordenable { padding: 0; }
th.ordenable a { display: block; padding: 13px 16px; color: inherit; text-decoration: none; white-space: nowrap; }
th.ordenable a:hover { color: var(--tinta); background: #F7F9FC; }
th.ordenable.activo a { color: var(--tinta); font-weight: 600; }
th.ordenable.plata a { text-align: right; }

/* Codigos que se leen digito por digito: lockbox, numeros de cuenta. */
.cifra-suelta { font-variant-numeric: tabular-nums; letter-spacing: .06em; font-weight: 500; }
/* Encabezado de fila en una tabla de dos columnas. Es una clase y no un
   style= inline para que la politica de contenido pueda prohibirlos. */
th.etiqueta-fila { width: 180px; color: var(--tenue); font-weight: 500; }

/* La salida de una tarea de operaciones: es salida de consola, se lee como tal. */
.salida { background: var(--papel); border: 1px solid var(--linea); border-left: 3px solid var(--azul); border-radius: var(--radio); padding: 14px 16px; margin: 0 0 20px; overflow-x: auto; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }

/* ---------- Mantenimiento ---------- */

/* El formulario de alta: dos columnas, y el detalle ocupa el ancho entero. */
.form-pedido { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; max-width: 620px; }
.form-pedido .ancho, .form-pedido .btn { grid-column: 1 / -1; }
.form-pedido .btn { justify-self: start; margin-top: 4px; }
.nuevo-pedido[open] { min-width: auto; }
.nuevo-pedido > summary { margin-bottom: 4px; }

/* El detalle del pedido va debajo del titulo, no al lado: es contexto. */
td .nota { display: block; margin-top: 2px; }

/* Sin tope, la descripcion se come el ancho y "sin asignar" parte en dos. */
td.que-pasa { max-width: 380px; }

/* Borrar es la unica accion que no se puede deshacer: es lo unico rojo. */
.btn-peligro { background: var(--debe); border-color: var(--debe); }
.btn-peligro:hover { background: #85160F; border-color: #85160F; }
.confirmar.borrar > summary { color: var(--debe); }

/* Filtros por categoria: pastillas, no una lista con puntos medios. */
.filtros { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }
.filtros a { padding: 5px 11px; border: 1px solid var(--linea-firme); border-radius: 999px; background: var(--papel); color: var(--tenue); text-decoration: none; font-size: 13px; }
.filtros a:hover { color: var(--tinta); border-color: var(--tenue); }
.filtros a.activo { background: var(--tinta); border-color: var(--tinta); color: #fff; }

td.estrella { color: var(--alerta); width: 1em; padding-right: 0; }

/* Las acciones de una fila, una debajo de la otra y sin apretarse. */
td.acciones { white-space: nowrap; }
td.acciones > .confirmar + .confirmar { margin-top: 2px; }

/* ---------- Bandeja ---------- */

.propuesta { background: var(--papel); border: 1px solid var(--linea); border-left: 3px solid var(--azul); border-radius: var(--radio); padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--sombra); }
.propuesta.resuelta { border-left-color: var(--linea-firme); opacity: .72; }
.propuesta-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.propuesta-cabeza .nota { display: block; margin-top: 2px; }
.propuesta-resumen { margin: 10px 0 0; max-width: 72ch; }
.propuesta-acciones { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; margin-top: 12px; }

/* Un posible duplicado se avisa, no se esconde ni se decide por el que mira. */
.aviso-duplicado { color: var(--alerta); }

/* Una cuenta sin mapear no es un error: es lo unico que falta hacer una vez. */
.aviso-cuenta { margin: 10px 0 0; padding: 9px 12px; background: #FBF4E7; border-left: 3px solid var(--alerta); border-radius: 3px; font-size: 13px; max-width: 72ch; }

/* ---------- Mensajes ---------- */

.tarjeta.ancho-mensaje { max-width: 680px; }
.acciones-mensaje { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.acciones-mensaje .btn[hidden] { display: none !important; }
#cuerpo { font-family: inherit; line-height: 1.55; }

.acciones-ficha { display: flex; gap: 14px; align-items: center; }

/* ---------- Depósitos ---------- */

.propuesta.vencido-plazo { border-left-color: var(--debe); }
.plazo { text-align: right; }
.plazo .nota { display: block; }
.tabla-chica { margin-top: 12px; max-width: 560px; }
.tabla-chica th, .tabla-chica td { padding: 8px 12px; }

/* La carta se lee como una carta y se imprime como una carta. */
.carta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 44px 48px; max-width: 660px; line-height: 1.65; }
.carta header { line-height: 1.5; margin-bottom: 28px; }
.carta .fecha { color: var(--tenue); }
.carta h2 { font-size: 16px; margin: 28px 0 14px; }
.carta-tabla { width: 100%; margin: 18px 0 24px; }
.carta-tabla td { padding: 7px 0; border-bottom: 1px solid var(--linea); }
.carta-tabla tr.total td { border-top: 1px solid var(--linea-firme); border-bottom: 0; font-weight: 600; }

@media print {
    .barra, .no-imprimir { display: none !important; }
    body { background: #fff; }
    main { padding: 0; max-width: none; }
    .carta { border: 0; padding: 0; box-shadow: none; }
}

/* El resumen de caja del estado de cuenta: se lee como un statement, en dos
   columnas, con el corte antes del saldo de cierre. */
.resumen-caja { max-width: 480px; }
.resumen-caja td:first-child { color: var(--tenue); }
.resumen-caja tr.corte td { border-top: 1px solid var(--linea-firme); font-weight: 600; }
.resumen-caja tr.corte td:first-child { color: var(--tinta); }
.resumen-caja tfoot td { font-size: 16px; }

/* Doce columnas de plata: mas chico y mas apretado, o no entra en pantalla. */
table.flujo th, table.flujo td { padding: 9px 10px; font-size: 14px; }
table.flujo td.plata { font-size: 14px; }

/* El presupuesto vigente de un pedido, al lado de sus acciones. */
.nota.presupuesto { display: block; margin: 4px 0 2px; color: var(--alerta); }

/* La explicación de cada pantalla, plegada (Leo, 16/10/2026: «menos es más»).
   Sirve la primera vez; después es ruido, así que no ocupa lugar hasta que se pide. */
.ayuda { margin: -4px 0 18px; font-size: 13px; color: var(--tenue); max-width: 72ch; }
.ayuda > summary { cursor: pointer; display: inline-block; color: var(--tenue); }
.ayuda > summary:hover { color: var(--tinta); }
.ayuda[open] > summary { margin-bottom: 6px; }
.ayuda > p { margin: 0; line-height: 1.5; }

/* Pestañas de Reportes: una sola entrada del menú para los cinco. */
.pestanas { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--linea-firme); margin: 0 0 22px; }
.pestanas a { padding: 8px 14px; font-size: 14px; color: var(--tenue); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pestanas a:hover { color: var(--tinta); }
.pestanas a.activa { color: var(--tinta); border-bottom-color: var(--azul); font-weight: 600; }

/* Dashboard: lo que está en orden, en una línea en vez de una sección vacía por cada cosa. */
.al-dia { font-size: 14px; color: var(--tenue); margin: 26px 0 0; }
.al-dia strong { color: var(--saldado); }