/* =============================================================================================
   consola.css — DESIGN SYSTEM de la Consola Operativa SOS
   T042.a (bloque 3A-0 · CSOS-74). Traducción 1:1 de la DIRECTRIZ DE DISEÑO v3 a CSS.

   FUENTE ÚNICA DEL DISEÑO: specs/001-migracion-consola-sos/directriz-diseno.md (v3, alineada a
   diccionario v2.17). NO el mockup v3 (tiene 9 divergencias listadas en el §10 de la directriz).
   Cada bloque de este archivo declara QUÉ REGLA implementa. Ante discrepancia manda la directriz.

   POR QUÉ EXISTE ESTE ARCHIVO (hueco detectado en el pre-vuelo de Phase 3, bitácora 16:26): la
   Directriz quedó aprobada sin ninguna tarea que la implementara. Sin un vocabulario visual único,
   la primera plantilla inventa su CSS, la segunda inventa otro, y la directriz queda decorativa.
   Toda plantilla de la Consola CONSUME estas clases; ninguna declara colores propios.

   RESTRICCIONES DURAS (directriz §3 + pie, trampa #5 de Phase 3):
     · CERO CDN. Nada de fonts.googleapis.com ni de hojas externas.
     · CERO build step. Es CSS plano: sin preprocesador, sin PostCSS, sin bundler.
     · Ningún dato depende de JS para leerse; el tema oscuro va por media query, sin script.
     · Ninguna transición supera los 200 ms.

   ---------------------------------------------------------------------------------------------
   CONTRASTE — la única desviación de este archivo respecto a los hex de §3, y su porqué
   ---------------------------------------------------------------------------------------------
   La directriz §3 exige "mínimo 4.5:1 en texto y 3:1 en bordes de estado, verificado en claro Y en
   oscuro". Los hex de la paleta MEDIDOS como texto NO llegan a 4.5:1 sobre fondo claro:

       coral   #e8552d sobre blanco = 3.64   ← es el color de TODOS los saldos (R15/M3)
       naranja #dd7a01 sobre blanco = 3.06
       teal    #0b827c sobre #f6f8f8 = 4.38  (marginal)
       verde   #2e844a sobre #f6f8f8 = 4.36  (marginal)

   Por eso cada color del dominio tiene DOS tokens: el hex de marca de §3 (rellenos, acentos,
   superficies) y un token `--*-texto` de la MISMA familia de tono con la luminosidad que el propio
   §3 exige para texto. **No es un color nuevo** (R6 intacta: mismo color, mismo significado, otro
   rol); es el mismo color en la luminosidad que la regla de contraste obliga. Cada token `-texto`
   está medido contra los TRES fondos donde puede caer: blanco, superficie alterna y su propio
   tinte (el caso más estricto, que es el de las pills). Los ratios medidos van comentados abajo.

   Los BORDES DE ESTADO (los que portan significado) usan el token `-texto`, no el de marca:
   #dd7a01 como borde sobre la superficie alterna da 2.87 y no llega a 3:1. Las líneas divisorias
   NEUTRAS (--borde, --borde-suave) quedan fuera de esa exigencia a propósito: la regla habla de
   "bordes de estado", y un separador de tabla no comunica estado — si lo hiciera, sería color como
   único portador de sentido, que R6 ya prohíbe.
   ============================================================================================= */

/* ---------------------------------------------------------------------------------------------
   1 · TIPOGRAFÍA AUTO-HOSPEDADA — directriz §3 (M2 de la auditoría)
   Figtree servida DESDE EL PROYECTO. `local()` va primero por si el sistema ya la tiene (evita
   descargar); luego el .woff2 del repo. Si el binario no está en static/fonts/, la cascada de
   `--fuente` cae al stack del sistema: la consola sigue legible, solo pierde la voz de marca.
   Ver static/fonts/README.md para los archivos exactos y su licencia.
   --------------------------------------------------------------------------------------------- */
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Figtree'), url('../fonts/figtree-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local('Figtree SemiBold'), url('../fonts/figtree-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Figtree Bold'), url('../fonts/figtree-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: local('Figtree ExtraBold'), url('../fonts/figtree-800.woff2') format('woff2');
}

/* ---------------------------------------------------------------------------------------------
   2 · TOKENS — TEMA CLARO. Paleta por dominio de la directriz §3, hex EXACTOS.
   Un color = un significado. Agregar un color exige agregarle significado en la directriz PRIMERO.
   --------------------------------------------------------------------------------------------- */
:root {
    /* LIGHT-ONLY (decisión de diseño): el diseño oficial es SOLO claro (los mockups son claros).
       `color-scheme: light` fuerza los controles nativos del navegador (scrollbars, inputs, form
       controls) a su presentación clara e impide el auto-oscurecido del UA, sin importar el modo
       del SO. Complementa la neutralización de los overrides dark de las secciones 3 (abajo). */
    color-scheme: light;

    /* --- Paleta por dominio (§3): hex de marca, para rellenos, acentos y superficies --- */
    --primary: #003039;              /* Teal oscuro · identidad, marca, superficies fuertes      */
    --teal: #0b827c;                 /* Clínico y operativo                                     */
    --coral: #e8552d;                /* Financiero: fondo, donación, cobertura y TODOS los saldos */
    --verde: #2e844a;                /* SOLO deltas positivos                                   */
    --rojo: #ba0517;                 /* Importe negativo · alerta · acción destructiva. Y nada más */
    --naranja: #dd7a01;              /* Atención: urgencia, sin pagar, devolución pendiente, Fase 2 */

    /* --- Variantes de TEXTO (ver cabecera): mismo color, luminosidad que exige el 4.5:1 ---
       Medidos sobre blanco / superficie alterna / su propio tinte:                             */
    --primary-texto: #003039;        /* 14.17 / 13.29 / 12.05                                   */
    --teal-texto: #0a7a75;           /*  5.18 /  4.86 /  4.51                                   */
    --coral-texto: #c53b16;          /*  5.24 /  4.91 /  4.50                                   */
    --verde-texto: #2c7d46;          /*  5.09 /  4.77 /  4.54                                   */
    --rojo-texto: #ba0517;           /*  6.73 /  6.31 /  5.72                                   */
    --naranja-texto: #a65c01;        /*  5.06 /  4.74 /  4.51                                   */

    /* --- Tintes: fondo de pills y bloques de estado --- */
    --tinte-primary: #e6eef0;
    --tinte-teal: #e4f2f1;
    --tinte-coral: #fdeae4;
    --tinte-verde: #e9f5ed;
    --tinte-rojo: #fce8e8;
    --tinte-naranja: #fdf0e0;

    /* --- Superficies y tinta --- */
    --superficie: #ffffff;
    --superficie-alt: #f6f8f8;
    --tinta: #003039;                /* cuerpo:      14.17 sobre blanco                          */
    --tinta-2: #3f5358;              /* secundario:   8.11 sobre blanco                          */
    --tinta-3: #657579;              /* terciario:    4.50 sobre superficie alterna              */
    --borde: #c8d2d4;                /* divisoria NEUTRA (no porta estado — ver cabecera)        */
    --borde-suave: #dde4e5;

    /* --- Escala de espaciado y radios (una sola escala para todo el sistema) --- */
    --e-1: 4px;
    --e-2: 8px;
    --e-3: 12px;
    --e-4: 16px;
    --e-5: 24px;
    --e-6: 32px;
    --radio: 10px;
    --radio-chico: 6px;

    /* --- Movimiento: techo duro de 200 ms (pie de la directriz) --- */
    --transicion: 140ms ease-out;

    --fuente: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------------------------------------------------------------------------------------------
   3 · TOKENS — TEMA OSCURO · DESACTIVADO (LIGHT-ONLY).
   Decisión de diseño: el diseño OFICIAL de la Consola es SOLO CLARO (todos los mockups son claros).
   Por eso la app se fuerza a la paleta clara SIEMPRE, ignorando el modo del SO/navegador. Para ello
   se NEUTRALIZAN aquí ambas ramas oscuras que redefinían los tokens a oscuro:
     · la automática por media query `@media (prefers-color-scheme: dark)`, y
     · la manual por atributo `:root[data-tema='oscuro']` (selector futuro; sin JS que lo active hoy).
   NO se tocan los valores de los TOKENS CLAROS (sección 2): esos son los que pasan el contraste WCAG
   de `test_design_system`. Solo se apaga la rama oscura. Los bloques quedan COMENTADOS (no borrados)
   para dejar auditable y reversible el volteo si algún día se reintroduce el tema oscuro.
   Ratios medidos sobre base / elevada / tinte (conservados para esa eventual reintroducción).
   --------------------------------------------------------------------------------------------- */
/* DESACTIVADO — rama oscura automática por preferencia del SO (ver nota arriba):
@media (prefers-color-scheme: dark) {
    :root:not([data-tema='claro']) {
        --primary: #0b1a1f;
        --primary-texto: #a9c6cd;
        --teal-texto: #0d9d95;
        --coral-texto: #e95c35;
        --verde-texto: #38a25b;
        --rojo-texto: #fa4557;
        --naranja-texto: #dd7a01;

        --tinte-primary: #123038;
        --tinte-teal: #0a2b2a;
        --tinte-coral: #3a1a10;
        --tinte-verde: #122e1d;
        --tinte-rojo: #3a1116;
        --tinte-naranja: #3a2606;

        --superficie: #0b1a1f;
        --superficie-alt: #12262c;
        --tinta: #e6eef0;
        --tinta-2: #b3c6cb;
        --tinta-3: #7b8d91;
        --borde: #31474d;
        --borde-suave: #22383e;
    }
}
*/

/* DESACTIVADO — rama oscura manual por atributo (futuro selector; sin JS hoy) (ver nota arriba):
:root[data-tema='oscuro'] {
    --primary: #0b1a1f;
    --primary-texto: #a9c6cd;
    --teal-texto: #0d9d95;
    --coral-texto: #e95c35;
    --verde-texto: #38a25b;
    --rojo-texto: #fa4557;
    --naranja-texto: #dd7a01;
    --tinte-primary: #123038;
    --tinte-teal: #0a2b2a;
    --tinte-coral: #3a1a10;
    --tinte-verde: #122e1d;
    --tinte-rojo: #3a1116;
    --tinte-naranja: #3a2606;
    --superficie: #0b1a1f;
    --superficie-alt: #12262c;
    --tinta: #e6eef0;
    --tinta-2: #b3c6cb;
    --tinta-3: #7b8d91;
    --borde: #31474d;
    --borde-suave: #22383e;
}
*/

/* ---------------------------------------------------------------------------------------------
   4 · BASE — reset mínimo y jerarquía tipográfica. Directriz R1 (tres niveles).
   --------------------------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--superficie);
    color: var(--tinta);
    font-family: var(--fuente);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    margin: 0 0 var(--e-2);
    letter-spacing: -0.01em;
    line-height: 1.15;
}

h1 {
    font-size: 1.6rem;
    font-weight: 800;
}

/* Nivel 2 (contexto): el título de sección no compite con el nivel de decisión. */
h2 {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--teal-texto);
    padding-bottom: var(--e-1);
    border-bottom: 1px solid var(--borde-suave);
}

h3 {
    font-size: 1rem;
    font-weight: 700;
}

p {
    margin: 0 0 var(--e-2);
}

a {
    color: var(--teal-texto);
}

a:hover {
    color: var(--primary-texto);
}

/* Foco SIEMPRE visible: la consola se opera con teclado en escritorio. */
:focus-visible {
    outline: 2px solid var(--teal-texto);
    outline-offset: 2px;
}

/* Objetivo táctil ≥44 px (R8: el campo registra desde el móvil). */
button,
.boton,
input,
select,
textarea {
    font-family: inherit;
    font-size: 1rem;
    min-height: 44px;
}

.boton {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    padding: 0 var(--e-4);
    border: 1px solid transparent;
    border-radius: var(--radio-chico);
    background: var(--primary);
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transicion);
}

.boton--secundario {
    background: transparent;
    border-color: var(--borde);
    color: var(--tinta);
}

/* R13: lo irreversible se confirma nombrando la consecuencia. El rojo señala, no basta. */
.boton--destructivo {
    background: var(--rojo-texto);
    color: #ffffff;
}

/* ── Atajo de edad estimada (CSOS-139) ────────────────────────────────────────────────────────
   Fila de "chips" de acción sobre el campo `fecha_nacimiento_estimada`: pulsar un rango calcula la
   fecha (JS) y la escribe en el input. Se apoya en `.boton--secundario` (mismo lenguaje visual) pero
   `.boton--chip` lo baja a tamaño compacto — un chip, no un botón de acción principal — para que no
   compita con «Crear animal». Se coloca ENTRE el label y el input del campo. */
.atajo-edad {
    display: flex;
    flex-wrap: wrap;              /* en 375px los chips bajan de línea en vez de desbordar */
    align-items: center;
    gap: var(--e-2);
    margin-bottom: var(--e-2);
}
.atajo-edad__etiqueta {
    font-size: 0.85rem;
    color: var(--tinta-suave, var(--tinta));
}
/* Chip compacto: rompe el min-height de 44px de `.boton` (aquí es un atajo, no un control táctil
   primario) y reduce padding/tipografía. Sigue siendo pulsable cómodamente (36px). */
.boton--chip {
    min-height: 36px;
    padding: 0 var(--e-3);
    font-size: 0.85rem;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------------------------
   5 · ESQUELETO DE PÁGINA — barra, contenido, y el rail de 4 tarjetas del presupuesto de densidad
   (directriz §2: rail izquierdo máximo 4 tarjetas; panel central máximo 3 bloques por pestaña).
   El techo de CANTIDAD lo respeta la plantilla — el CSS no puede contar; aquí solo va la retícula.
   --------------------------------------------------------------------------------------------- */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* CSOS-113 — flex-wrap: en pantallas estrechas la barra puede pasar a dos filas (marca arriba,
       nav debajo) en vez de desbordar. row-gap separa las filas cuando envuelve. */
    flex-wrap: wrap;
    gap: var(--e-2) var(--e-4);
    padding: var(--e-2) var(--e-5);
    background: var(--primary);
    color: #ffffff;
}

.navbar a,
.navbar__usuario {
    color: #ffffff;
    text-decoration: none;
}

.navbar__marca {
    font-weight: 800;
}

.navbar__nav {
    display: flex;
    align-items: center;
    /* CSOS-113 — el nav global (Casos·Donantes·Proveedores·Fondos + usuario + Salir) ENVUELVE en
       vez de desbordar horizontalmente. min-width:0 evita que un hijo fuerce el ancho del body.
       row-gap da aire entre líneas cuando los items caen a la fila siguiente. */
    flex-wrap: wrap;
    min-width: 0;
    gap: var(--e-2) var(--e-4);
}

/* CSOS-113 — a móvil (≤640px) la marca ocupa su fila y el nav baja a una fila propia a todo el
   ancho, alineado a la izquierda. Garantiza que a 375px NADA desborde el body y todo sea
   alcanzable con el pulgar (colapsa a filas, sin scroll horizontal). */
@media (max-width: 640px) {
    .navbar__marca {
        flex: 1 1 100%;
    }

    .navbar__nav {
        flex: 1 1 100%;
        justify-content: flex-start;
    }
}

.contenido {
    max-width: none;      /* consola a ancho completo (no encajonada) — Vlad 08-ago */
    margin: 0;
    padding: var(--e-5);
}

/* Rail (izquierda, ≤4 tarjetas) + panel central. Una columna en móvil. */
.disposicion {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: var(--e-5);
    align-items: start;
}

@media (max-width: 860px) {
    .disposicion {
        grid-template-columns: minmax(0, 1fr);
    }
}

.rail {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
}

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio);
    padding: var(--e-4);
}

.tarjeta__titulo {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--tinta-3);
    margin: 0 0 var(--e-2);
}

/* R5 + presupuesto §2: una línea por fila de dato. Nunca dos. */
.dato {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e-3);
    padding: var(--e-2) 0;
    border-bottom: 1px solid var(--borde-suave);
}

.dato:last-child {
    border-bottom: 0;
}

.dato__etiqueta {
    color: var(--tinta-3);
    font-size: 0.82rem;
}

.dato__valor {
    font-weight: 600;
    text-align: right;
}

/* ---------------------------------------------------------------------------------------------
   6 · KPI — R3: solo si es derivado, cambia y dispara acción. §2: máximo 5 por fila, 1 fila.
   El `auto-fit` no impone el techo de 5 (eso es de la plantilla); mantiene la fila legible.
   --------------------------------------------------------------------------------------------- */
.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--e-3);
    margin: 0 0 var(--e-4);
}

.kpi {
    background: var(--superficie-alt);
    border: 1px solid var(--borde-suave);
    border-left: 3px solid var(--acento-kpi, var(--borde));
    border-radius: var(--radio);
    padding: var(--e-3) var(--e-4);
}

.kpi__etiqueta {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tinta-3);
}

.kpi__valor {
    display: block;
    margin-top: var(--e-1);
    font-size: 1.35rem;
    font-weight: 800;
}

/* Acento del KPI por dominio. Un KPI financiero es coral; uno clínico, teal (R6). */
.kpi--financiero {
    --acento-kpi: var(--coral);
}

.kpi--clinico {
    --acento-kpi: var(--teal);
}

.kpi--atencion {
    --acento-kpi: var(--naranja);
}

/* ---------------------------------------------------------------------------------------------
   7 · CIFRAS EN COP — R15 + decisión M3 (firma de Vlad). LA REGLA MÁS FÁCIL DE ROMPER.
     · Toda cifra: tabular, para que alinee en columna.
     · IMPORTE NEGATIVO → rojo, con el signo «−» siempre presente (el color nunca va solo, R6).
     · SALDO → CORAL, positivo o negativo. Un saldo es un ESTADO, no una alerta; y desde v2.16 un
       Saldo_Pendiente negativo es legítimo (sobrepago admitido a propósito), así que pintarlo de
       rojo sería una falsa alarma.
     · VERDE → solo deltas positivos. No se usa para "saldo sano": eso ya lo dice el coral.
   El formato del número (miles, signo) lo produce el filtro `cop` en el servidor — la plantilla no
   calcula ni formatea a mano (R16). Aquí va solo el color y la métrica tipográfica.
   --------------------------------------------------------------------------------------------- */
.cifra {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    white-space: nowrap;
    font-weight: 600;
}

.cifra--saldo {
    color: var(--coral-texto);
}

.cifra--negativo {
    color: var(--rojo-texto);
}

.cifra--delta-positivo {
    color: var(--verde-texto);
}

/* R7: el dato que no existe hoy se dibuja «—», nunca un placeholder verosímil. */
.sin-dato {
    color: var(--tinta-3);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------------------------
   8 · LOS CUATRO ESTADOS DE BLOQUE — R12, y el vacío que enseña, R18.
   Un bloque sin sus cuatro estados NO está diseñado. El esqueleto tiene el MISMO ALTO que el
   contenido para que el swap de HTMX no salte.
   --------------------------------------------------------------------------------------------- */
.bloque {
    position: relative;
    margin: 0 0 var(--e-5);
}

/* (b) VACÍO — R18: nombra la acción canónica, no el hueco. */
.bloque--vacio {
    padding: var(--e-6) var(--e-4);
    border: 1px dashed var(--borde);
    border-radius: var(--radio);
    background: var(--superficie-alt);
    text-align: center;
    color: var(--tinta-2);
}

.bloque--vacio__accion {
    display: block;
    margin-top: var(--e-3);
}

/* Vacío SANO (R18, excepción): vacío = buena noticia. Afirma, y NO ofrece acción falsa. */
.bloque--vacio-sano {
    border-style: solid;
    border-color: var(--verde-texto);
    color: var(--tinta-2);
}

/* (c) CARGANDO — esqueleto del mismo alto. Se muestra solo mientras HTMX está en vuelo:
   `hx-indicator` alterna la clase `htmx-request` en el disparador o el target. */
.esqueleto {
    display: none;
}

.htmx-request .esqueleto,
.esqueleto.htmx-request {
    display: block;
}

.htmx-request .esqueleto ~ .bloque__datos {
    display: none;
}

.esqueleto__linea {
    height: 18px;
    margin-bottom: var(--e-2);
    border-radius: var(--radio-chico);
    background: linear-gradient(90deg, var(--superficie-alt), var(--borde-suave), var(--superficie-alt));
    background-size: 200% 100%;
    animation: esqueleto-pulso 1.2s ease-in-out infinite;
}

/* Fila de esqueleto con el alto exacto de una fila de tabla, para no saltar el layout. */
.esqueleto__fila {
    height: 44px;
    margin-bottom: 1px;
    border-radius: 0;
    background: var(--superficie-alt);
}

@keyframes esqueleto-pulso {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Respeta a quien pidió menos movimiento. */
@media (prefers-reduced-motion: reduce) {
    .esqueleto__linea {
        animation: none;
    }

    * {
        transition: none !important;
    }
}

/* (d) ERROR — explica y ofrece reintentar. */
.bloque--error {
    padding: var(--e-4);
    border: 1px solid var(--rojo-texto);
    border-radius: var(--radio);
    background: var(--tinte-rojo);
    color: var(--rojo-texto);
}

/* ---------------------------------------------------------------------------------------------
   9 · TABLAS — presupuesto §2: máximo 6 columnas visibles en desktop (lo cumple la plantilla).
   --------------------------------------------------------------------------------------------- */
.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
}

.tabla th {
    text-align: left;
    padding: var(--e-2) var(--e-3);
    background: var(--superficie-alt);
    border-bottom: 1px solid var(--borde);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tinta-3);
    white-space: nowrap;
}

.tabla td {
    padding: var(--e-3);
    border-bottom: 1px solid var(--borde-suave);
    vertical-align: top;
}

.tabla .num {
    text-align: right;
}

.tabla__envoltura {
    overflow-x: auto;
}

/* ---------------------------------------------------------------------------------------------
   10 · R9 — LA ANULACIÓN SE VE. Tachada, atenuada, con badge y motivo/autor en el tooltip, y
   EXCLUIDA DE TODA SUMA (eso último lo garantizan los services con `.no_anuladas()`, no el CSS).
   ⚠️ El tachado es EXCLUSIVO de lo anulado. Una Devolución `desistida` NO se tacha (§6d): es
   historia real, no una fila que nunca debió existir.
   --------------------------------------------------------------------------------------------- */
.fila--anulada td,
.linea--anulada {
    color: var(--tinta-3);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* ---------------------------------------------------------------------------------------------
   10-bis · CSOS-86 t5 · superficie 2 — AVISO PERSISTENTE de SOBREPAGO en el libro de movimientos.
   Ámbar por el token ACCESIBLE ya usado en la superficie 1 (`--naranja-texto` sobre `--tinte-naranja`,
   contraste medido). No bloquea nada: es informativo y nombra las dos salidas. Se apaga solo cuando
   `sobrepago_neto` vuelve a 0 (no hay estado que limpiar).
   --------------------------------------------------------------------------------------------- */
.fila--sobrepago td {
    padding: 0 0 var(--e-2);
    border-bottom: 0;
}

.aviso-sobrepago {
    display: flex;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    border-radius: var(--radio-chico);
    background: var(--tinte-naranja);
    color: var(--naranja-texto);
}

.aviso-sobrepago > svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 2px;
}

.aviso-sobrepago__cuerpo {
    display: flex;
    flex-direction: column;
    gap: var(--e-2);
}

.aviso-sobrepago__texto {
    margin: 0;
}

.aviso-sobrepago__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
}

/* Afordancia deshabilitada (R7 · «Corregir un Gasto» aún sin pantalla): se ve, no actúa. */
.boton--inhabilitado {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.badge {
    display: inline-block;
    padding: 2px var(--e-2);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-decoration: none;
}

.badge--anulada {
    background: var(--tinte-rojo);
    color: var(--rojo-texto);
}

/* R7: lo que no existe todavía se marca Fase 2, nunca se simula. */
.badge--fase2 {
    background: var(--tinte-naranja);
    color: var(--naranja-texto);
}

/* ---------------------------------------------------------------------------------------------
   11 · R14 — LO PRIVADO SE MARCA Y NO VIAJA. Marcador discreto para todo campo [Privado]
   (referencia bancaria, observaciones, PII de donantes y TODO el circuito de financiación).
   El marcador es un recordatorio visual; la garantía real es que estos datos no se rendericen en
   vistas públicas — eso lo decide la vista, no el CSS.
   --------------------------------------------------------------------------------------------- */
.privado {
    display: inline-block;
    margin-left: var(--e-1);
    padding: 1px var(--e-1);
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tinta-3);
    vertical-align: middle;
}

/* ---------------------------------------------------------------------------------------------
   12 · PILLS DE ESTADO — un color + SIEMPRE su texto (R6: el color nunca va solo).
   --------------------------------------------------------------------------------------------- */
.pill {
    display: inline-block;
    padding: 2px var(--e-2);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Dimensiones de estado (R5): clínico y proceso son operativos → teal. */
.pill--proceso,
.pill--clinico {
    background: var(--tinte-teal);
    color: var(--teal-texto);
}

/* nivel_urgencia: Crítica y Alta piden atención; Media/Baja son contexto. */
.pill--urgencia-critica {
    background: var(--tinte-rojo);
    color: var(--rojo-texto);
}

.pill--urgencia-alta {
    background: var(--tinte-naranja);
    color: var(--naranja-texto);
}

.pill--urgencia-media,
.pill--urgencia-baja {
    background: var(--superficie-alt);
    color: var(--tinta-2);
}

/* Estados de la DEVOLUCIÓN — directriz §6d. Se declaran ACÁ, aunque las pantallas del ciclo se
   construyan en 3C (T063), para que ese bloque las CONSUMA en vez de inventarlas:
     pendiente  → naranja, «por cobrar»
     exitosa    → verde (la plata entró: es un delta positivo)
     desistida  → atenuada, y NO TACHADA (desistida ≠ anulada)                                  */
.pill--devolucion-pendiente {
    background: var(--tinte-naranja);
    color: var(--naranja-texto);
}

.pill--devolucion-exitosa {
    background: var(--tinte-verde);
    color: var(--verde-texto);
}

.pill--devolucion-desistida {
    background: var(--superficie-alt);
    color: var(--tinta-3);
    text-decoration: none;
}

/* Pills de tipo de transacción (timeline del caso). Financiero = coral; financiación = primary;
   gasto = naranja (aún no pagado es atención); clínico/operativo = teal. */
.pill--donacion {
    background: var(--tinte-coral);
    color: var(--coral-texto);
}

.pill--gasto {
    background: var(--tinte-naranja);
    color: var(--naranja-texto);
}

.pill--pago,
.pill--devolucion {
    background: var(--tinte-teal);
    color: var(--teal-texto);
}

.pill--credito,
.pill--repago,
.pill--transferencia,
.pill--ajuste {
    background: var(--tinte-primary);
    color: var(--primary-texto);
}

/* ---------------------------------------------------------------------------------------------
   13 · FORMULARIOS — R8: máximo 5 campos por registro en móvil (lo cumple el form, no el CSS).
   --------------------------------------------------------------------------------------------- */
.formulario {
    max-width: 620px;
}

.campo {
    margin-bottom: var(--e-4);
}

.campo label {
    display: block;
    margin-bottom: var(--e-1);
    font-weight: 600;
    font-size: 0.88rem;
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    padding: 0 var(--e-3);
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--superficie);
    color: var(--tinta);
}

.campo textarea {
    padding: var(--e-2) var(--e-3);
    min-height: 88px;
}

.campo__ayuda {
    display: block;
    margin-top: var(--e-1);
    font-size: 0.8rem;
    color: var(--tinta-3);
}

/* CSOS-125 — atajo de acción contiguo a un campo (p. ej. «+ crear animal» junto al picklist de
   animal en el alta de rescate). Se separa del control de arriba y NO ocupa el 100% del ancho (es un
   botón compacto, no un input): se declara `inline-flex` y `width:auto` para ganarle a la regla
   `.campo select/input/textarea { width:100% }`. */
.campo__accion {
    display: inline-flex;
    align-items: center;
    width: auto;
    margin-top: var(--e-2);
}

.campo__error,
.errorlist {
    margin: var(--e-1) 0 0;
    padding: 0;
    list-style: none;
    color: var(--rojo-texto);
    font-size: 0.85rem;
    font-weight: 600;
}

.acciones {
    display: flex;
    gap: var(--e-3);
    align-items: center;
    margin-top: var(--e-5);
}

/* ---------------------------------------------------------------------------------------------
   14 · MENSAJES (django.contrib.messages) — feedback de acción, no decoración.
   --------------------------------------------------------------------------------------------- */
.mensajes {
    max-width: 1200px;
    margin: var(--e-4) auto 0;
    padding: 0 var(--e-5);
    list-style: none;
}

.mensajes__item {
    padding: var(--e-3) var(--e-4);
    border-radius: var(--radio);
    background: var(--tinte-teal);
    color: var(--teal-texto);
    font-weight: 600;
}

.mensajes__item--success {
    background: var(--tinte-verde);
    color: var(--verde-texto);
}

.mensajes__item--error {
    background: var(--tinte-rojo);
    color: var(--rojo-texto);
}

.mensajes__item--warning {
    background: var(--tinte-naranja);
    color: var(--naranja-texto);
}

/* ---------------------------------------------------------------------------------------------
   15 · UTILIDADES mínimas. Nada de un framework de utilidades: la directriz premia el vocabulario
   corto y con significado, no clases sueltas que reimplementan el diseño en cada plantilla.
   --------------------------------------------------------------------------------------------- */
.encabezado-pagina {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    flex-wrap: wrap;
    margin-bottom: var(--e-5);
}

.lede {
    color: var(--tinta-2);
    max-width: 60ch;
}

.solo-lectores-de-pantalla {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------------------------------
   16 · LOGIN (3C-a) — primera pantalla que ve el operador cada mañana. Nació antes del design
   system (scaffold T006) y ningún bloque volvió por ella (deuda, bitácora 2026-07-29 18:59). Se
   VISTE con los tokens existentes; NO se rediseña el flujo de auth. Sin colores nuevos: una tarjeta
   centrada sobre la superficie alterna, con las mismas clases de formulario del resto de la Consola.
   El `/admin/` de Django se queda de fábrica A PROPÓSITO (tablero interno, solo Admin General).
   --------------------------------------------------------------------------------------------- */
.login {
    display: flex;
    justify-content: center;
    padding: var(--e-6) var(--e-4);
}

.login__tarjeta {
    width: 100%;
    max-width: 420px;
    padding: var(--e-6);
    background: var(--superficie);
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio);
}

.login__tarjeta .lede {
    margin-bottom: var(--e-5);
}