/* Estilos base para widgets de Django */
/* IMPORTANTE: No usar @apply porque Tailwind CDN no lo procesa */

/* Fondo institucional.
   Antes era bg-gray-50 de Tailwind (#f9fafb), un gris azulado que chocaba con la
   paleta verde del sistema: las tarjetas se leían frías mientras sus bordes y
   rellenos se leían cálidos. Este valor ya existía como --paper en
   components/estilo_revision.html, declarado y nunca usado.
   Definirlo aquí lo vuelve la única fuente: estilo_revision.html lo hereda.

   Lo que cambió es el peso. En #f4f7ef el fondo estaba en L* 96.8 contra los 100
   de la tarjeta blanca: 3.2 puntos, así que el suelo casi no existía como
   superficie y todo el relieve lo cargaban el borde y la sombra. En #ebebe6
   (L* 92.9) la cara de la tarjeta pasa a 1.20 de contraste contra el fondo,
   frente a 1.08 de antes, y se lee como un objeto sobre un escritorio en vez de
   como un recuadro dibujado.

   Y cambió el croma, por una razón que solo apareció al oscurecer. El primer
   intento fue #eaefe2, el verde de la familia en ese nivel de luz: se veía
   claramente verde. El tinte no había crecido —el matiz es casi el mismo— pero
   en #f4f7ef, a un paso del blanco, era subliminal, y a L* 94 se destapa. Su
   croma es 6.9; el de #ebebe6 es 2.6, y ahí el ojo lee piedra en lugar de verde.
   El matiz se conserva en 110°, dentro de la familia verde-amarilla, así que el
   fondo sigue emparentado con la paleta institucional en vez de ser un gris
   neutro prestado de otro lado.

   El precio, medido: el borde --line pierde presencia contra el fondo, de 1.23 a
   1.11. Es un intercambio, no una mejora gratuita — el trabajo de separar la
   tarjeta se muda del contorno a la superficie. Un peldaño más abajo el borde
   deja de distinguirse del suelo, y por eso este es el límite. */
:root {
    --paper: #ebebe6;
    --surface: #fff;
    --surface-2: #eef2e8;
    --inset: #f6f9f2;
    --line: #dbe2d1;
    --line-2: #c8d1bb;
    --brand-ink: #2f4520;
    --ink: #1a201a;
    --ink-2: #4c563f;
    /* Los subtítulos de los encabezados y las etiquetas pequeñas van en --ink-3
       directamente sobre el fondo, sin tarjeta de por medio. Con el fondo anterior
       #6a745c daba 4.55 y libraba el mínimo AA de 4.5 por cinco centésimas; sobre
       el fondo nuevo caía a 4.12 y dejaba de cumplir. #626b54 lo devuelve a 4.68,
       con margen suficiente para que un ajuste posterior del fondo no lo tumbe en
       silencio. De paso sube a 5.60 sobre la tarjeta blanca, donde también vive. */
    --ink-3: #626b54;
    --brand: #3d572a;
    --brand-2: #4a6d32;
    --brand-050: #e9f0e0;
    --on-brand: #fff;
    /* Rojo vino institucional. Para acciones de texto secundarias, como "Ver
       detalle" en el historial. Su tono (331°, hacia el magenta) queda lejos del
       --bad (4°) y del --warn (39°), así que no se lee como un estado; el otro
       rojo institucional, #844732 (15°), caía entre los dos. 8.59 sobre blanco. */
    --vino: #832b56;
    /* Colores de estado. El texto de cada uno va sobre su propio fondo teñido, y
       en esa combinación --ok daba 4.49 y --warn 4.06, los dos por debajo del
       mínimo AA de 4.5. No es un defecto menor por dónde cae: son las palabras
       "Aprobado", "Conforme", "En revisión" y "Con observación", que es a lo que
       entra a ver alguien que reportó un avance. Van en 12.5 y 13.5 píxeles, así
       que no aplica la tolerancia del texto grande, y el público de este sistema
       ronda o pasa los 45 años en monitores de oficina.
       Oscurecerlos los deja en 4.62. El verde es imperceptible; el ámbar solo se
       nota comparándolo lado a lado. --bad (4.81) y --info (5.64) ya cumplían. */
    --ok: #2e784d;
    --ok-bg: #e4f1e8;
    --ok-line: #bcdcc6;
    --warn: #8e6211;
    --warn-bg: #f7edd6;
    --warn-line: #e6cf9b;
    --bad: #b23b32;
    --bad-bg: #f7e4e1;
    --bad-line: #e8c0ba;
    --info: #2f5d9e;
    --info-bg: #e6eef8;
    --info-line: #c2d4ee;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --radius: 12px;
    --shadow: 0 1px 2px rgba(31, 46, 21, .06), 0 6px 20px -12px rgba(31, 46, 21, .22);
}

html {
    background-color: var(--paper);
}

/* Encabezado de página.
   /acuerdos/ y /avances/ tenían encabezados inventados por separado: 19px
   extrabold con mosaico de ícono contra 25px bold sin él, subtítulos de distinto
   tamaño y color, y márgenes distintos. Son páginas hermanas y ahora comparten
   estilo; la acción primaria queda opcional, porque un avance no se crea desde
   su lista sino desde un acuerdo con período abierto. */
.encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.encabezado h1 {
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
}

.encabezado p {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--ink-3);
}

/* Buscador de las listas.
   Con las reglas base ya en :where(), esta clase gana sola y no necesita
   !important ni competir en especificidad. */
.campo-busqueda {
    border: 1px solid var(--line-2);
    border-radius: 12px;
    padding: 14px 44px 14px 46px;
    font-size: 15px;
    line-height: 1.4;
    box-shadow: none;
    color: var(--ink);
}

.campo-busqueda::placeholder { color: var(--ink-3); }

/* Filtro con un valor distinto al de por defecto.
   Seis selectores en su valor por defecto no dicen cuál cambiaste; si filtras por
   año y bajas a leer resultados, la única pista es volver a subir y leerlos uno
   por uno. Esta clase marca los que están activos. */
.filtro-activo {
    border-color: var(--brand) !important;
    background: var(--brand-050) !important;
    color: var(--brand-ink) !important;
    font-weight: 600;
}

/* Estado del avance.
   Antes la vista emitía quince hexadecimales —azul, ámbar y rojo de la paleta por
   defecto de Tailwind— que no coincidían con los del detalle. Ahora la vista solo
   dice de qué estado se trata y el color vive aquí, en los tokens semánticos. */
.estado {
    --e-punto: var(--ink-3);
    --e-fondo: var(--surface-2);
    --e-texto: var(--ink-2);
}

.estado-ok { --e-punto: var(--ok); --e-fondo: var(--ok-bg); --e-texto: var(--ok); }
.estado-info { --e-punto: var(--info); --e-fondo: var(--info-bg); --e-texto: var(--info); }
.estado-warn { --e-punto: var(--warn); --e-fondo: var(--warn-bg); --e-texto: var(--warn); }
.estado-bad { --e-punto: var(--bad); --e-fondo: var(--bad-bg); --e-texto: var(--bad); }

.franja-estado { background: var(--e-punto); }

.chip-estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 13.5px;
    font-weight: 600;
    background: var(--e-fondo);
    color: var(--e-texto);
}

.chip-estado .punto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--e-punto);
    flex: none;
}

/* Superficie de tarjeta.
   Las listas traían diez grises hardcodeados distintos (#e6e9e4, #e9e9e3,
   #e7e7e1…), ninguno igual al --line del sistema y ninguno con sombra, así que
   sobre el fondo institucional se veían planas: sus bordes daban 1.13 de
   contraste contra el fondo, frente al 1.23 de la tarjeta del detalle.
   Esta clase es la misma superficie que usa .rev .card. */
.card-superficie {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* Base de los widgets de Django.
   Django renderiza sus campos sin clases, así que necesitan estilo por elemento.
   El problema era cómo: estas reglas usaban !important y alcanzaban a TODO input
   de texto de la aplicación, incluidos los que ya vienen diseñados con Tailwind,
   anulándolos en silencio. El buscador de /acuerdos/ declaraba radio de 12px,
   borde propio y cuerpo de 15px, y salía en 6px, gris #d1d5db y 14px; los nueve
   selectores de los paneles de filtros estaban igual.

   La solución tiene dos mitades. :not([class]) viste al widget verdaderamente
   desnudo, y .form-control / .form-select visten a los que los formularios sí
   nombran: hay 28 y 14 de ellos en los forms.py, y ninguno tenía una sola regla
   CSS propia —dependían por completo de que el bloque con !important los
   alcanzara por elemento—. Un campo con clases de diseño no cumple ninguna de
   las dos condiciones y queda fuera, sin pelear especificidad ni !important.

   Se probó antes con :where(), que aporta cero especificidad, y quedó demasiado
   débil: el preflight de Tailwind se inyecta después de esta hoja y resetea
   border-width, padding y font-size en los elementos de formulario, así que los
   widgets desnudos salían sin borde ni relleno. */
input[type="text"]:not([class]),
input[type="password"]:not([class]),
input[type="email"]:not([class]),
input[type="number"]:not([class]),
input[type="date"]:not([class]),
input[type="datetime-local"]:not([class]),
select:not([class]),
.form-control,
.form-select {
    display: block;
    width: 100%;
    border-radius: 0.375rem;
    border: 1px solid var(--line-2);
    box-shadow: 0 1px 2px 0 rgba(31, 46, 21, 0.05);
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.5rem 0.75rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: var(--surface);
    color: var(--ink);
}

input[type="text"]:not([class]):focus,
input[type="password"]:not([class]):focus,
input[type="email"]:not([class]):focus,
input[type="number"]:not([class]):focus,
input[type="date"]:not([class]):focus,
input[type="datetime-local"]:not([class]):focus,
select:not([class]):focus,
.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(61, 87, 42, .1);
}

textarea:not([class]),
textarea.form-control {
    display: block;
    width: 100%;
    border-radius: 0.375rem;
    border: 1px solid var(--line-2);
    box-shadow: 0 1px 2px 0 rgba(31, 46, 21, 0.05);
    font-size: 0.875rem;
    line-height: 1.5rem;
    padding: 0.5rem 0.75rem;
    min-height: 100px;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: var(--surface);
    color: var(--ink);
}

textarea:not([class]):focus,
textarea.form-control:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(61, 87, 42, .1);
}

input[type="checkbox"],
input[type="radio"] {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border: 1px solid #d1d5db;
    cursor: pointer;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: #5d8641;
    border-color: #5d8641;
}

label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

/* Errores de validación */
.errorlist {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0 0;
    color: #dc2626;
    font-size: 0.875rem;
}

.errorlist li {
    padding: 0.25rem 0;
}

/* Estado de formset marcado para eliminar */
.marked-for-delete {
    opacity: 0.5 !important;
    background-color: #fef2f2 !important;
    border-color: #fecaca !important;
}