:root {
  /* Neutros: derivados con una micro-deriva de croma hacia el hue de --marca
     (teal, ~180º) para que sean "de esta marca" y no el slate neutro por
     defecto. --suave y --tenue se oscurecieron para cumplir WCAG AA como
     texto: --suave ≈5.6:1 sobre blanco y ≈5.0:1 sobre --fondo; --tenue ≈4.6:1
     sobre blanco (antes 2.6:1, fallaba). Ver base.html · tokens. */
  --tinta:#1f2d3d; --suave:#556072; --tenue:#6b7a8a;
  --linea:#e2e8ec; --fondo:#eceff2; --panel:#ffffff;
  --marca:#0f766e; --marca-suave:#e6f2f0;
  --verde:#2e9e6b; --ambar:#d9962a; --rojo:#cf3b3b;
  --sombra:0 1px 3px rgba(16,40,60,.06), 0 1px 2px rgba(16,40,60,.04);
  --radio:12px;
}
* { box-sizing:border-box; }
body { margin:0; font:15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
       color:var(--tinta); background:var(--fondo); -webkit-font-smoothing:antialiased; }
a { color:var(--marca); text-decoration:none; }
a:hover { text-decoration:underline; }
h1 { font-size:1.55rem; margin:.2rem 0 .2rem; letter-spacing:-.01em; }
/* Rótulo de sección: sin el mayúsculas+tracking genérico. Minúscula con peso
   y en --suave (contrasta AA), se lee como título de sección, no como eyebrow. */
h2 { font-size:.92rem; margin:0 0 .8rem; color:var(--suave); font-weight:700;
     letter-spacing:-.005em; }
h3 { font-size:.95rem; margin:1.2rem 0 .5rem; color:var(--tinta); font-weight:600; }

/* ── Cabecera ── */
header.barra { background:var(--panel); border-bottom:1px solid var(--linea);
               padding:0 1.4rem; height:56px; display:flex; align-items:center; gap:1.4rem;
               position:sticky; top:0; z-index:10; }
header.barra .marca { font-weight:800; color:var(--marca); letter-spacing:-.02em; }
header.barra .sep { flex:1; }
header.barra .quien { color:var(--suave); font-size:.85rem; display:flex; align-items:center; gap:.5rem; }
header.barra .quien strong { color:var(--tinta); font-weight:600; }
/* Co-branding: logo del despacho en la cabecera (cuadrado normalizado a 256px;
   se muestra pequeño y redondeado junto al nombre). */
header.barra .logo-despacho { width:26px; height:26px; border-radius:6px; object-fit:cover;
    border:1px solid var(--borde, #e2e8f0); background:#fff; }

/* ── Cabecera del panel de ADMINISTRACIÓN ──
   Marca invertida (fondo oscuro) para que nunca se confunda con el panel de
   gestorías. En vez de pintar cada enlace a mano con style="color:#cbd5e1",
   se redefinen los tokens dentro de la barra y todo lo de dentro (marca,
   tabs, quien, botón Salir) hereda el color correcto sin inline.
   OJO: dentro de este selector --tinta se redefine a BLANCO (es el color del
   TEXTO sobre el fondo oscuro), así que el fondo NO puede ser var(--tinta) —eso
   lo pintaba blanco y la cabecera salía clara—. El fondo es el oscuro fijo. */
header.barra--admin { --tinta:#ffffff; --suave:#cbd5e1; --fondo:#334155;
    background:#1f2d3d; }
header.barra--admin .marca { color:#fff; }
header.barra--admin nav.tabs a { color:var(--suave); }
header.barra--admin nav.tabs a:hover { background:rgba(255,255,255,.1); color:#fff; }

/* ── Banda superior SOLO para un aviso CRÍTICO sin leer ──
   Los avisos normales viven en la campana; un crítico (p. ej. mantenimiento
   inminente) fuerza además esta banda roja imposible de ignorar. */
.banda-aviso { --acento:var(--rojo); display:flex; align-items:center; gap:.85rem;
    padding:.7rem 1.4rem; background:#fbe6e6;
    border-bottom:1px solid #f3caca; border-left:4px solid var(--acento);
    font-size:.92rem; color:var(--tinta); }
.banda-aviso__icono { display:inline-flex; color:var(--acento); flex:none; }
.banda-aviso__cuerpo { flex:1; display:flex; gap:.5rem; flex-wrap:wrap; align-items:baseline; }
.banda-aviso__cuerpo strong { color:var(--acento); font-weight:700; }
.banda-aviso form button { font-size:.82rem; }

/* ── Campana de avisos del operador (patrón notificaciones) ──
   <details> nativo: el summary es el icono; el panel es el desplegable. Sin JS. */
.campana { position:relative; }
.campana > summary { list-style:none; cursor:pointer; display:inline-flex;
    align-items:center; justify-content:center; position:relative;
    width:38px; height:38px; border-radius:9px; color:var(--suave); }
.campana > summary::-webkit-details-marker { display:none; }
.campana > summary:hover { background:var(--fondo); color:var(--tinta); }
/* Con avisos sin leer, la campana llama la atención (color de marca). */
.campana:has(.campana__badge) > summary { color:var(--marca); }
.campana__badge { position:absolute; top:2px; right:2px; min-width:17px;
    height:17px; padding:0 .3rem; border-radius:999px; background:var(--rojo);
    color:#fff; font-size:.68rem; font-weight:700; line-height:17px;
    text-align:center; box-shadow:0 0 0 2px var(--panel); }
.campana__panel { position:absolute; top:calc(100% + .5rem); right:0; z-index:40;
    width:360px; max-width:calc(100vw - 2rem); max-height:70vh; overflow-y:auto;
    background:var(--panel); border:1px solid var(--linea); border-radius:12px;
    box-shadow:0 16px 40px rgba(16,40,60,.18); padding:.35rem; }
.campana__cabecera { padding:.5rem .6rem .3rem; font-weight:700; color:var(--suave);
    font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; }
.campana__vacio { padding:.9rem .6rem; color:var(--suave); font-style:italic;
    font-size:.9rem; }
.aviso-item { --acento:var(--marca); display:flex; gap:.6rem; align-items:flex-start;
    padding:.7rem .6rem; border-radius:9px; border-left:3px solid var(--acento);
    background:var(--marca-suave); margin:.25rem .1rem; }
.aviso-item--aviso { --acento:var(--ambar); background:#fbf0db; }
.aviso-item--critica { --acento:var(--rojo); background:#fbe6e6; }
/* Leído: sin fondo ni acento, atenuado — sigue en la lista pero pasa a segundo plano. */
.aviso-item--leido { background:transparent; border-left-color:var(--linea);
    opacity:.62; }
.aviso-item__icono { display:inline-flex; color:var(--acento); flex:none; margin-top:.05rem; }
.aviso-item--leido .aviso-item__icono { color:var(--tenue); }
.aviso-item__cuerpo { flex:1; display:flex; flex-direction:column; gap:.15rem;
    font-size:.88rem; line-height:1.45; }
.aviso-item__cuerpo strong { color:var(--tinta); font-weight:700; }
.aviso-item__cuerpo a { font-size:.85rem; }
.aviso-item__leer { font-size:.78rem; white-space:nowrap; flex:none; }

nav.tabs { display:flex; gap:.2rem; }
nav.tabs a { padding:.4rem .8rem; border-radius:8px; font-size:.9rem; color:var(--suave);
             font-weight:500; }
nav.tabs a:hover { background:var(--fondo); text-decoration:none; }
nav.tabs a.activo { background:var(--marca); color:#fff; }
nav.tabs a .badge { display:inline-block; background:var(--ambar); color:#fff;
        border-radius:999px; padding:0 .45rem; font-size:.72rem; font-weight:700; margin-left:.35rem; }

main { max-width:1280px; margin:1.8rem auto; padding:0 1.4rem; }
.migas { color:var(--suave); font-size:.88rem; margin-bottom:.6rem; }
.sub { color:var(--suave); font-weight:400; }

/* ── Tarjetas ── */
.card { background:var(--panel); border:1px solid var(--linea); border-radius:var(--radio);
        box-shadow:var(--sombra); padding:1.2rem 1.3rem; margin-bottom:1.2rem; }
.card.tight { padding:.4rem .6rem; }

/* ── Tablas ── */
table { width:100%; border-collapse:collapse; }
th, td { padding:.55rem .7rem; text-align:left; border-bottom:1px solid var(--linea);
         font-size:.9rem; vertical-align:top; }
thead th { color:var(--suave); font-weight:600; font-size:.74rem; text-transform:uppercase;
           letter-spacing:.04em; background:transparent; border-bottom:1.5px solid var(--linea);
           white-space:nowrap; vertical-align:bottom; }
/* Cabeceras de una tabla ordenable: clicables, con flecha según aria-sort. */
table.ordenable thead th[data-col] { cursor:pointer; user-select:none; }
table.ordenable thead th[data-col]:hover { color:var(--marca); }
table.ordenable thead th[data-col]::after { content:"↕"; opacity:.35; margin-left:.3em;
    font-size:.9em; }
table.ordenable thead th[aria-sort="ascending"]::after { content:"▲"; opacity:1; color:var(--marca); }
table.ordenable thead th[aria-sort="descending"]::after { content:"▼"; opacity:1; color:var(--marca); }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover { background:#fafbfc; }
/* Fila señalada al "Volver" desde su ficha de documento (#doc-<entidad>-<id>):
   un realce que se desvanece para que el ojo la encuentre sin buscar. */
tbody tr:target { animation:resaltar-fila 2.4s ease-out 1; }
tbody tr:target td:first-child { box-shadow:inset 3px 0 0 var(--marca); }
@keyframes resaltar-fila { 0%,35% { background:var(--marca-suave); } 100% { background:transparent; } }
/* Fila del cliente que llega premarcado desde el enlace «Exportar este trimestre
   →» de una ficha: realce estable (no un pulso) para localizarla ya marcada. */
tbody tr.resaltada { background:var(--marca-suave); }
tbody tr.resaltada td:first-child { box-shadow:inset 3px 0 0 var(--marca); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* Importe principal de una fila (total): peso visual sobre los auxiliares. */
td.num.fuerte { font-weight:700; }
/* Fecha en una sola línea (formato compacto dd/mm/aaaa). */
td.fecha { white-space:nowrap; color:var(--suave); font-variant-numeric:tabular-nums; }
/* Columna de acción: enlace discreto, alineado y sin envolver. */
td.accion, th.accion { white-space:nowrap; text-align:right; }
td.accion a { font-size:.85rem; }
/* Marca "corregido" compacta en una celda. */
.corr-flag { display:inline-block; margin-left:.3rem; padding:.02rem .35rem; border-radius:5px;
             background:#fbf0db; color:var(--ambar); font-size:.68rem; font-weight:700;
             vertical-align:middle; }
/* Indicador de "revisado" por la gestoría en la columna ✓ de las tablas. */
.rev-si { color:var(--verde); font-weight:700; }
.rev-no { color:var(--tenue); }
/* ── Tablas de documentos (gastos/emitidas): datos AGRUPADOS por fila para
   caber en pantalla SIN scroll. table-layout:fixed + colgroup reparten el
   ancho; el tercero (nombre+NIF+nº) y el importe (total+desglose) se apilan. */
table.docs { table-layout:fixed; }
table.docs td, table.docs th { overflow:hidden; text-overflow:ellipsis; }
/* La fecha nunca se corta (cabe entera en su columna). */
table.docs td.fecha { overflow:visible; text-overflow:clip; }
/* Anchos de columna (suman 100% en cada tabla). */
/* Gastos: fecha 11 · tercero 26 · importe 19 · cat 17 · ded 6 · doc 6 · rev 6 · acción 9 */
table.gastos col.c-fecha  { width:11%; }
table.gastos col.c-tercero{ width:26%; }
table.gastos col.c-importe{ width:19%; }
table.gastos col.c-cat    { width:17%; }
table.gastos col.c-ded    { width:6%; }
table.gastos col.c-doc    { width:6%; }
table.gastos col.c-rev    { width:6%; }
table.gastos col.c-accion { width:9%; }
/* Emitidas: fecha 11 · cliente 31 · importe 22 · cobro 13 · doc 6 · rev 6 · acción 11 */
table.emitidas col.c-fecha  { width:11%; }
table.emitidas col.c-tercero{ width:31%; }
table.emitidas col.c-importe{ width:22%; }
table.emitidas col.c-cobro  { width:13%; }
table.emitidas col.c-doc    { width:6%; }
table.emitidas col.c-rev    { width:6%; }
table.emitidas col.c-accion { width:11%; }
/* Celda "tercero": nombre en negrita + NIF/Nº en una línea meta debajo. */
table.docs td.tercero .nombre { font-weight:600; display:block;
    white-space:normal; overflow-wrap:anywhere; }
table.docs td.tercero .meta { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Celda "importe": total destacado + base/IVA/retención en meta debajo. */
table.docs td.importe .total { display:block; }
table.docs td.importe .meta { white-space:nowrap; }
/* Columnas de un dato corto, centradas (deducible, doc, cobro). */
table.docs .c-centro { text-align:center; }
table.docs td.accion { white-space:nowrap; }
table.docs td.accion a { white-space:nowrap; }
/* ── Barra de filtros de una tabla de documentos (filtrado en cliente) ── */
.filtros-docs { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;
    margin-bottom:.9rem; }
.filtros-docs .f-busca { min-width:230px; flex:1 1 230px; }
.filtros-docs .f-check { display:inline-flex; align-items:center; gap:.35rem;
    color:var(--suave); font-size:.86rem; white-space:nowrap; }
.filtros-docs select { font-size:.86rem; }
.filtros-docs .f-limpiar { font-size:.84rem; }
/* tabla clave-valor (datos fiscales) */
table.kv th { width:1%; white-space:nowrap; color:var(--suave); font-weight:500; font-size:.85rem;
              text-transform:none; letter-spacing:0; }
table.kv td { font-weight:600; }

/* ── Chips / semáforo / pills ── */
.pill { display:inline-block; padding:.12rem .55rem; border-radius:999px; font-size:.78rem; font-weight:600; }
.pill.verde { background:#e6f4ec; color:var(--verde); }
.pill.ambar { background:#fbf0db; color:var(--ambar); }
.pill.rojo  { background:#fbe6e6; color:var(--rojo); }
.pill.gris  { background:#eef1f4; color:var(--suave); }
/* Semáforo: el color lleva el significado, pero NO puede ser el único canal
   (daltonismo protán/deután no distingue rojo/ámbar/verde — WCAG 1.4.1). Por
   eso los tres estados con carga de urgencia tienen además FORMA propia:
   rojo=círculo, ámbar=triángulo, verde/listo=check. Los neutros (gris,
   en_curso, liquidado) conservan el círculo: no compiten en esa escala. */
.sem { display:inline-block; width:.62rem; height:.62rem; border-radius:50%; flex:none;
       position:relative; }
.sem.en_curso, .sem.gris { background:#c4ccd4; }
.sem.listo, .sem.verde { background:var(--verde); }
.sem.liquidado { background:var(--marca); }
.sem.rojo { background:var(--rojo); }
.sem.ambar { background:var(--ambar); }
/* Ámbar → triángulo (mismo tamaño óptico que el círculo). */
.sem.ambar { width:0; height:0; border-radius:0; background:transparent;
    border-left:.36rem solid transparent; border-right:.36rem solid transparent;
    border-bottom:.62rem solid var(--ambar); }
/* Verde/listo → check dibujado encima del punto (queda claro "hecho"). */
.sem.listo::after, .sem.verde::after { content:""; position:absolute;
    left:.19rem; top:.06rem; width:.14rem; height:.28rem; border:solid #fff;
    border-width:0 .09rem .09rem 0; transform:rotate(45deg); }
.vacio { color:var(--suave); font-style:italic; padding:.7rem 0; }
.meta { color:var(--suave); font-size:.85rem; }

/* Aviso de "cargando" para datos que se piden aparte por fetch (p. ej. el
   coste del OCR en admin/ocr.html: BigQuery tarda varios segundos y la
   página no debe esperar por él para pintarse). Sin htmx (ver comentario
   arriba): CSS puro, sin dependencias. */
.cargando { display:flex; align-items:center; gap:.5rem; color:var(--suave);
    font-style:italic; padding:.7rem 0; }
.cargando[hidden] { display:none; }
.spinner { display:inline-block; width:1rem; height:1rem; border-radius:50%;
    border:.15rem solid var(--linea); border-top-color:var(--marca);
    animation:girar .7s linear infinite; }
@keyframes girar { to { transform:rotate(360deg); } }

/* ── Panorama del despacho (tira de estado de la cartera) ── */
.panorama { display:flex; align-items:stretch; gap:.9rem; flex-wrap:wrap;
    background:var(--panel); border:1px solid var(--linea); border-radius:var(--radio);
    box-shadow:var(--sombra); padding:1rem 1.2rem; margin:1rem 0 1.1rem; }
.panorama .pan-item { display:flex; flex-direction:column; min-width:5.5rem;
    padding-right:.9rem; border-right:1px solid var(--linea); }
.panorama .pan-item:last-of-type { border-right:0; }
.panorama .pan-num { font-size:1.55rem; font-weight:800; line-height:1.1;
    font-variant-numeric:tabular-nums; color:var(--tinta); }
.panorama .pan-lbl { color:var(--suave); font-size:.8rem; margin-top:.15rem; }
.panorama .pan-item.alerta .pan-num { color:var(--rojo); }
.panorama .pan-item.aviso .pan-num { color:var(--ambar); }
.panorama .pan-cta { margin-left:auto; align-self:center; font-weight:700; }
.boton-limpiar { display:inline-flex; align-items:center; padding:.5rem .7rem;
    color:var(--suave); font-size:.9rem; }

/* ── Formularios / botones ── */
input[type=text],input[type=email],input[type=password],select,textarea {
  padding:.5rem .65rem; border:1px solid #d6dee7; border-radius:8px; font:inherit;
  background:#fff; color:var(--tinta); }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--marca);
  box-shadow:0 0 0 3px var(--marca-suave); }
button { padding:.5rem .9rem; border:0; border-radius:8px; background:var(--marca);
         color:#fff; font:inherit; font-weight:600; cursor:pointer; }
button:hover { filter:brightness(1.05); }
button.plano { background:transparent; color:var(--suave); }
button.plano:hover { background:var(--fondo); filter:none; }
/* Botón SECUNDARIO: se lee como botón (marco y texto en color marca sobre el
   panel), un peldaño por debajo del sólido. Para la acción alternativa junto a
   la principal (p. ej. «Todo el trimestre» junto a «Descargar novedades»). Vale
   para <button class="sec"> y para <a class="boton sec">. */
button.sec, a.boton.sec { background:var(--panel); color:var(--marca);
    border:1px solid var(--marca); }
button.sec:hover, a.boton.sec:hover { background:var(--marca-suave);
    filter:none; text-decoration:none; }
button.enlace { background:transparent; color:var(--rojo); padding:0 .25rem; font-weight:700; }
a.boton { display:inline-block; padding:.5rem .9rem; border-radius:8px; background:var(--marca);
          color:#fff; font-weight:600; text-decoration:none; }
a.boton:hover { filter:brightness(1.05); text-decoration:none; }

/* ── Hint informativo (ⓘ) — componente estándar ──
   El texto explicativo de un proceso NO vive como prosa en la ventana
   (decisión 2026-07-19): un icono junto al título/acción lo muestra al pasar
   el ratón o al enfocarlo (tap en móvil = focus). Solo variables del tema →
   funciona en claro y oscuro sin overrides. Uso:
   <span class="hint" tabindex="0" aria-label="Más información">i<span class="hint__texto">…</span></span> */
.hint { position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:1.05rem; height:1.05rem; margin-left:.4rem; border-radius:50%;
  border:1px solid var(--linea); background:var(--panel); color:var(--suave);
  font-size:.72rem; font-weight:700; font-style:normal; cursor:help;
  vertical-align:-.08em; user-select:none; }
.hint:hover, .hint:focus { color:var(--marca); border-color:var(--marca); }
.hint__texto { display:none; position:absolute; top:calc(100% + .5rem); left:50%;
  transform:translateX(-50%); width:min(340px, 78vw); padding:.6rem .8rem;
  border-radius:8px; border:1px solid var(--linea); background:var(--panel);
  color:var(--tinta); box-shadow:var(--sombra); font-size:.82rem; font-weight:400;
  line-height:1.5; text-align:left; z-index:40; cursor:auto; white-space:normal; }
.hint:hover .hint__texto, .hint:focus .hint__texto,
.hint:focus-within .hint__texto { display:block; }
form.buscar { display:flex; gap:.5rem; margin-bottom:1rem; }
form.buscar input[type=text] { min-width:260px; }

/* ── Pestañas (CSS puro: radio + :checked) ── */
.pestanas > input[type=radio] { display:none; }
.pestanas > .barra-tabs { display:flex; gap:.3rem; border-bottom:1px solid var(--linea);
                          margin-bottom:1.2rem; }
.pestanas > .barra-tabs label { padding:.6rem .95rem; cursor:pointer; color:var(--suave);
    font-weight:600; font-size:.92rem; border-bottom:2px solid transparent; margin-bottom:-1px; }
.pestanas > .barra-tabs label:hover { color:var(--tinta); }
.pestanas > .panel-tab { display:none; }
/* mostrar el panel cuyo radio está marcado */
#tab-resumen:checked    ~ .barra-tabs label[for=tab-resumen],
#tab-docs:checked       ~ .barra-tabs label[for=tab-docs],
#tab-incidencias:checked~ .barra-tabs label[for=tab-incidencias],
#tab-notas:checked      ~ .barra-tabs label[for=tab-notas]
  { color:var(--marca); border-bottom-color:var(--marca); }
#tab-resumen:checked     ~ #panel-resumen,
#tab-docs:checked        ~ #panel-docs,
#tab-incidencias:checked ~ #panel-incidencias,
#tab-notas:checked       ~ #panel-notas { display:block; }

/* ── Borrador fiscal ── */
.borrador { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
.borrador .cifra { background:var(--marca-suave); border-radius:10px; padding:.7rem .9rem; }
.borrador .cifra .lbl { color:var(--marca); font-size:.78rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.03em; }
.borrador .cifra .val { font-size:1.25rem; font-weight:700; margin-top:.2rem;
    font-variant-numeric:tabular-nums; }
.borrador .cifra.total { background:var(--marca); color:#fff; }
.borrador .cifra.total .lbl { color:#cfeee9; }

/* ── Primer nivel de la ficha: trimestres (píldoras) y secciones (chips) ──
   Dos grupos visualmente distintos: el selector de periodo parece botón
   (borde, relieve, relleno al elegir) y las secciones auxiliares van como
   chips discretos con icono. Nada de texto plano ambiguo. */
.barra-tabs.nivel1 { border-bottom:0; gap:.45rem; align-items:center;
                     padding-bottom:.15rem; flex-wrap:wrap; }
.barra-tabs.nivel1 label { border-bottom:none; margin-bottom:0; }
label.tab-pill { border:1.5px solid var(--linea); border-radius:999px;
    background:var(--panel); padding:.45rem 1.05rem; color:var(--tinta);
    box-shadow:0 1px 2px rgba(31,45,61,.05); }
label.tab-pill:hover { border-color:var(--marca); color:var(--marca); }
label.tab-chip { border:1.5px solid var(--linea); border-radius:8px;
    background:var(--panel); color:var(--suave); padding:.45rem .8rem;
    box-shadow:0 1px 2px rgba(31,45,61,.05); }
label.tab-chip:hover { border-color:var(--marca); background:var(--marca-suave);
    color:var(--marca); }
.barra-tabs .cnt { display:inline-block; min-width:1.4em; padding:.05em .4em;
    margin-left:.35em; border-radius:999px; background:var(--fondo);
    color:var(--suave); font-size:.76rem; text-align:center; font-weight:700; }

/* ── Subpestañas (segundo nivel, dentro de cada trimestre) ── */
.pestanas.subtabs > .barra-tabs { margin-bottom:1rem; }
.pestanas.subtabs > .barra-tabs label { padding:.45rem .75rem; font-size:.85rem; }
.pestanas.subtabs > .barra-tabs .barra-meta { align-self:center; padding-bottom:.3rem; }

/* ── Detalle del borrador (303 por tipos + casillas del 130) ── */
.dos-cols { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
table.mini th, table.mini td { padding:.35rem .5rem; font-size:.86rem; }
table.mini tr.total td { font-weight:700; border-top:1.5px solid var(--linea); }
table.casillas td:nth-child(odd) { color:var(--suave); font-size:.84rem; }

/* ── Borrador por modelo (un bloque autocontenido por modelo de la AEAT) ──
   Cada modelo se presenta como su impreso oficial: cabecera con nombre +
   cuota, y dentro su detalle por casillas numeradas. Las casillas se pintan
   como en el modelo (número en gris pequeño + etiqueta). */
.modelos { display:flex; flex-direction:column; gap:1rem; }
.modelo { border:1px solid var(--linea); border-radius:12px; overflow:hidden; }
.modelo > .cab { display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
    padding:.7rem .95rem; background:var(--marca-suave); border-bottom:1px solid var(--linea); }
.modelo > .cab .num-mod { font-weight:800; color:var(--marca); font-size:1rem;
    letter-spacing:-.01em; }
.modelo > .cab .nombre { color:var(--tinta); font-weight:600; }
.modelo > .cab .sep { flex:1; }
.modelo > .cab .cuota { font-size:1.2rem; font-weight:800; color:var(--tinta);
    font-variant-numeric:tabular-nums; }
.modelo > .cab .cuota.favor { color:var(--verde); }
.modelo > .cab .cuota.cero { color:var(--suave); }
.modelo > .cuerpo { padding:.85rem .95rem; }
.modelo > .cuerpo .dos-cols { gap:1.2rem; }
/* La "casilla" del modelo: nº pequeño en recuadro + etiqueta + importe */
.cod { display:inline-block; min-width:1.7em; padding:.02em .35em; margin-right:.4em;
    border:1px solid #cdd6df; border-radius:5px; background:#fff; color:var(--suave);
    font-size:.72rem; font-weight:700; text-align:center; font-variant-numeric:tabular-nums; }
/* Traza de cómputo: desplegable "¿de dónde sale esta cifra?" bajo cada modelo */
details.traza { margin-top:.5rem; }
details.traza > summary { cursor:pointer; display:inline-block; font-size:.8rem;
    font-weight:600; color:var(--marca); padding:.15rem 0; user-select:none; }
details.traza > summary:hover { text-decoration:underline; }
details.traza[open] > summary { margin-bottom:.3rem; }
table.traza-tabla { width:100%; }
table.traza-tabla td { padding:.25rem .5rem; font-size:.82rem;
    border-top:1px solid var(--fondo); vertical-align:top; }
table.traza-tabla td.traza-doc a { color:var(--marca); text-decoration:none; }
table.traza-tabla td.traza-doc a:hover { text-decoration:underline; }
/* Zona "datos informativos" (no se paga): se separa con rótulo y fondo tenue */
.modelo.info { border-style:dashed; }
.modelo.info > .cab { background:var(--fondo); }
.modelo.info > .cab .num-mod { color:var(--suave); }
.info-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:.7rem; }
.info-grid .item { background:var(--fondo); border-radius:8px; padding:.55rem .7rem; }
.info-grid .item .lbl { color:var(--suave); font-size:.76rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.02em; }
.info-grid .item .val { font-size:1.05rem; font-weight:700; margin-top:.15rem;
    font-variant-numeric:tabular-nums; }
/* Total general del trimestre (suma de cuotas a pagar) */
.total-tri { display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
    margin-top:1rem; padding:.8rem 1rem; border-radius:12px;
    background:var(--marca); color:#fff; }
.total-tri .lbl { font-weight:700; text-transform:uppercase; letter-spacing:.03em;
    font-size:.82rem; color:#cfeee9; }
.total-tri .sep { flex:1; }
.total-tri .val { font-size:1.4rem; font-weight:800; font-variant-numeric:tabular-nums; }
.total-tri .desglose { flex-basis:100%; color:#cfeee9; font-size:.8rem;
    font-variant-numeric:tabular-nums; }

/* ── Trimestres (lista de semáforos en Resumen) ── */
.trim-fila { display:flex; align-items:center; gap:.7rem; padding:.6rem 0;
             border-bottom:1px solid var(--linea); }
.trim-fila:last-child { border-bottom:none; }
.trim-fila .tt { font-weight:700; }
.trim-fila .tot { margin-left:auto; color:var(--suave); font-size:.88rem;
                  font-variant-numeric:tabular-nums; }

/* ── Incidencias / notas / correcciones ── */
.inc { display:flex; align-items:center; gap:.7rem; padding:.65rem .2rem;
       border-bottom:1px solid var(--linea); }
.inc:last-child { border-bottom:none; }
.inc .tipo { flex:1; }
.inc .cli { color:var(--suave); font-size:.85rem; }
.inc form { margin:0; display:inline; }
.nota { padding:.6rem .2rem; border-bottom:1px solid var(--linea); font-size:.92rem; }
.nota:last-child { border-bottom:none; }
.corr { display:inline-block; background:#fbf0db; color:var(--ambar);
        border-radius:6px; padding:.05rem .45rem; margin:0 .2rem .2rem 0; font-size:.8rem; }
.corr-form { display:inline-block; font-size:.85rem; position:relative; }
.corr-form > summary { cursor:pointer; color:var(--marca); }
/* "Cambiar régimen" es una acción con consecuencias fiscales: se muestra como
   un enlace-acción con marco discreto (más peso que el summary suelto), sin
   llegar a botón grande (es ocasional). */
.accion-regimen { display:block; margin-top:.9rem; }
.accion-regimen > summary { display:inline-block; font-weight:600;
    border:1px solid var(--linea); border-radius:8px; padding:.35rem .7rem;
    background:#fafbfc; list-style:none; }
.accion-regimen > summary::-webkit-details-marker { display:none; }
.accion-regimen > summary:hover { border-color:var(--marca);
    background:var(--marca-suave); }
/* Misma idea que .accion-regimen pero para una acción destructiva ("dar de
   baja"): botón real, no un enlace de texto plegable — con el marco discreto
   ya en rojo para que se lea como acción de riesgo antes de abrirla. */
.accion-peligro > summary { display:inline-block; font-weight:600; color:var(--rojo);
    border:1px solid var(--rojo); border-radius:8px; padding:.35rem .7rem;
    background:#fbe6e6; list-style:none; }
.accion-peligro > summary::-webkit-details-marker { display:none; }
.accion-peligro > summary:hover { filter:brightness(0.97); }
/* Vive a la derecha de la fila de acciones; al abrirse ocupa todo el ancho para
   que su panel explicativo se lea cómodo (no una columna estrecha a la derecha). */
.accion-peligro[open] { flex-basis:100%; }
.corr-form form { margin-top:.5rem; display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
/* Editor de correcciones: panel flotante con un control adecuado por campo
   (select sí/no, select de categorías, number, date…), prefijado con el
   valor actual. Un formulario por campo: "Aplicar" corrige solo ese dato. */
.editor-corr { position:absolute; right:0; top:calc(100% + .3rem); z-index:30;
    background:var(--panel); border:1px solid var(--linea); border-radius:10px;
    box-shadow:0 10px 28px rgba(16,40,60,.16); padding:.8rem .9rem;
    min-width:340px; display:grid; gap:.4rem; }
.editor-corr .titulo { grid-column:1 / -1; margin:0 0 .2rem; max-width:320px; }
.editor-corr form { margin:0; display:grid; grid-template-columns:8.5rem 1fr auto;
    gap:.45rem; align-items:center; }
.editor-corr label { color:var(--suave); font-size:.82rem; text-align:right; }
.editor-corr input, .editor-corr select { width:100%; padding:.32rem .5rem; font-size:.85rem; }
.editor-corr button { padding:.32rem .65rem; font-size:.8rem; }
/* Editor de régimen (vigencias por ejercicio): bloque normal dentro de la
   card (no flotante), campos a ancho completo con la etiqueta encima. */
.editor-regimen { margin-top:.6rem; padding:.95rem 1.05rem;
    border:1px solid var(--linea); border-radius:10px; background:#fafbfc;
    max-width:560px; }
.editor-regimen form { display:flex; flex-direction:column; gap:.65rem; margin:0; }
.editor-regimen .campo > label { display:block; color:var(--suave);
    font-size:.84rem; margin-bottom:.2rem; }
.editor-regimen select, .editor-regimen input { width:100%;
    padding:.45rem .6rem; font-size:.9rem; }
.editor-regimen button { align-self:flex-start; margin-top:.35rem; }

details.cierres > summary { cursor:pointer; color:var(--marca); font-weight:600;
    list-style:none; padding:.3rem 0; }
details.cierres > summary::-webkit-details-marker { display:none; }

/* ── Login ── */
.login-caja { max-width:360px; margin:9vh auto; }
.login-caja .card { padding:1.8rem; }
.login-caja label { display:block; margin:.9rem 0 .25rem; font-size:.88rem; color:var(--suave); }
.login-caja input { width:100%; }
.login-caja button { width:100%; margin-top:1.2rem; }
.error { background:#fbe6e6; color:var(--rojo); padding:.6rem .8rem; border-radius:8px;
         margin:.6rem 0; font-size:.9rem; }
/* Hermano informativo de .error (ámbar, no rojo): para lo que hay que contar sin
   que parezca que algo ha ido mal — p. ej. "cerramos tu sesión por inactividad". */
.aviso { background:#fbf0db; color:#7a5c12; padding:.6rem .8rem; border-radius:8px;
         margin:.6rem 0; font-size:.9rem; }
/* La casilla de "recordar" NO puede heredar el .login-caja input{width:100%} de
   arriba, que la estiraría a lo ancho de la caja. */
.login-caja label.recordar { display:flex; align-items:center; gap:.5rem; margin-top:.9rem;
         font-size:.88rem; color:var(--suave); font-weight:400; cursor:pointer; }
.login-caja label.recordar input { width:auto; margin:0; }

/* ── Modal de confirmación (sustituye al confirm() nativo del navegador) ──
   Compartido por los dos paneles (gestorías y admin). El HTML del diálogo vive
   una sola vez en base.html; cualquier <form data-confirmar="…"> lo dispara.
   Antes cada acción destructiva usaba el confirm() feo del navegador. */
.modal-fondo { position:fixed; inset:0; z-index:9999; display:none;
  align-items:center; justify-content:center; padding:1.5rem;
  background:rgba(16,40,60,.45); backdrop-filter:blur(2px); }
.modal-fondo.abierto { display:flex; animation:modal-aparece .12s ease-out; }
@keyframes modal-aparece { from { opacity:0; } to { opacity:1; } }
.modal { background:var(--panel); border-radius:14px; max-width:420px; width:100%;
  box-shadow:0 20px 60px rgba(16,40,60,.28); overflow:hidden;
  animation:modal-sube .16s ease-out; }
@keyframes modal-sube { from { transform:translateY(8px); opacity:.6; } to { transform:none; opacity:1; } }
.modal__cuerpo { padding:1.4rem 1.5rem 1.1rem; }
.modal__tit { font-size:1.1rem; font-weight:700; color:var(--tinta); margin:0 0 .5rem;
  display:flex; align-items:center; gap:.55rem; }
.modal__tit .ic { font-size:1.25rem; }
.modal__txt { color:var(--suave); font-size:.92rem; line-height:1.5; margin:0; }
.modal__pie { display:flex; justify-content:flex-end; gap:.6rem;
  padding:.9rem 1.5rem 1.2rem; }
.modal__pie button { padding:.5rem 1rem; font-size:.9rem; }
.modal__pie .cancelar { background:transparent; color:var(--suave);
  border:1px solid #d6dee7; }
.modal__pie .cancelar:hover { background:var(--fondo); filter:none; }
/* Botón de acción destructiva: rojo, para que se distinga del guardar normal. */
.modal__pie .confirmar-peligro { background:var(--rojo); }
.modal__pie .confirmar-peligro:hover { filter:brightness(1.06); }

/* Modal de comprobación previa de la exportación: incidencias rojas + lo que el
   programa de destino no sabe importar. Más ancho que el modal de confirmar.
   El scroll va en el CUERPO entero, no en cada lista: con dos secciones, dos
   scrolls independientes hacen imposible saber cuánto queda por leer. */
#modal-comprobar .modal { max-width:560px; }
#modal-comprobar .modal__cuerpo { max-height:66vh; overflow-y:auto; }
.mc-lista { margin-top:.9rem; }
.mc-cli { margin-bottom:.7rem; }
.mc-cli > a { color:var(--tinta); text-decoration:none; }
.mc-cli > a:hover { text-decoration:underline; }
.mc-cli ul { margin:.25rem 0 0; padding-left:1.1rem; }
.mc-cli li { color:var(--suave); font-size:.88rem; line-height:1.45; }
/* Avisos del FORMATO de destino: no son datos mal, son datos que el programa no
   sabe importar. Se separan visualmente de las incidencias rojas porque la
   acción es otra (revisar allí después, no corregir aquí). */
.mc-sub { margin:1.2rem 0 .3rem; padding-top:1rem; border-top:1px solid var(--borde);
          font-size:1rem; }
.mc-txt { margin:.3rem 0; color:var(--suave); font-size:.88rem; line-height:1.5; }
.mc-nota { margin-top:.9rem; font-size:.85rem; }
/* Cada limitación: titular con su recuento, y la lista de documentos plegada.
   Sin plegarla, 200 documentos afectados convierten el diálogo en un muro que
   nadie lee — y lo que hay que decidir aquí cabe en el titular. */
.mc-lim { margin-bottom:1rem; }
.mc-lim__tit { display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
               font-weight:700; color:var(--tinta); font-size:.95rem; }
.mc-lim__n { font-weight:600; font-size:.82rem; color:var(--suave); }
.mc-ver { background:none; border:none; padding:0; font:inherit; font-size:.85rem;
          color:var(--acento,#1d6fa5); cursor:pointer; text-decoration:underline; }
.mc-docs { margin:.35rem 0 0; padding-left:1.1rem; }
.mc-docs li { color:var(--suave); font-size:.86rem; line-height:1.45; }
.mc-mas { color:var(--suave); font-size:.85rem; font-style:italic; }
/* Marca permanente de avisos en la lista de descargas preparadas. Es un botón
   (despliega el detalle), no un adorno: tiene que poder pulsarse y verse a la
   vez que el «Descargar ZIP» de al lado. */
.aviso-chip { background:var(--aviso-fondo,#fdf3d8); color:var(--aviso-tinta,#7a5b00);
              border:1px solid var(--aviso-borde,#e7cf94); border-radius:999px;
              padding:.12rem .6rem; font-size:.82rem; font-weight:600; cursor:pointer; }
.aviso-chip:hover { filter:brightness(.97); }
.aviso-det { flex-basis:100%; margin-top:.6rem; padding:.7rem .9rem;
             background:var(--aviso-fondo,#fdf3d8); border-radius:8px; }
.aviso-det ul { margin:.25rem 0 0; padding-left:1.1rem; }
.aviso-det li { color:var(--suave); font-size:.86rem; line-height:1.45; }
.aviso-det > div + div { margin-top:.8rem; }

/* ── Foco de teclado (WCAG 2.4.7) ──
   Los campos ya tienen su :focus (borde marca + halo). Faltaba el resto de lo
   navegable —enlaces, botones, pestañas (labels), campana y demás <summary>—:
   sin esto, quien usa el panel con teclado no ve dónde está. :focus-visible
   (no :focus) evita el anillo tras un clic de ratón. */
a:focus-visible, button:focus-visible, summary:focus-visible,
label.tab-pill:focus-visible, label.tab-chip:focus-visible,
.pestanas > .barra-tabs label:focus-visible,
[tabindex]:focus-visible {
  outline:2px solid var(--marca); outline-offset:2px; border-radius:6px;
}
/* Los radios de las pestañas están ocultos (display:none): el foco lo recibe
   su <label>. Se marca aquí el label del radio enfocado por teclado. */
.pestanas > input[type=radio]:focus-visible + .barra-tabs label { outline:none; }

/* ── Responsive ──
   La hoja nació pensada para el escritorio de una gestoría; estos breakpoints
   evitan que cabecera, panorama y borrador desborden en tablet/móvil. */
@media (max-width:720px) {
  /* La cabecera deja de ser una barra fija de 56px: se apila y las pestañas
     hacen scroll horizontal en lugar de romper el layout. */
  header.barra { height:auto; flex-wrap:wrap; padding:.6rem 1rem; gap:.7rem 1rem; }
  nav.tabs { order:3; flex-basis:100%; overflow-x:auto; padding-bottom:.2rem;
             -webkit-overflow-scrolling:touch; }
  nav.tabs a { white-space:nowrap; }
  main { margin:1.1rem auto; padding:0 1rem; }
  /* Rejillas fijas de 4 columnas → 2 en móvil (siguen legibles, no en 1px). */
  .borrador { grid-template-columns:repeat(2,1fr); }
  .dos-cols { grid-template-columns:1fr; }
  /* El panorama pasa a rejilla; el CTA baja a su propia fila a lo ancho. */
  .panorama { display:grid; grid-template-columns:repeat(2,1fr); }
  .panorama .pan-item { border-right:0; padding-right:0; }
  .panorama .pan-cta { grid-column:1 / -1; margin-left:0; }
  /* Editores flotantes: a pantalla completa serían más usables, pero como
     mínimo que no se salgan del viewport. */
  .editor-corr { min-width:0; width:min(340px, calc(100vw - 2rem)); }
}

/* ── Reduced motion (WCAG 2.3.3 / respeto a la preferencia del SO) ──
   Quien pide menos movimiento (mareo vestibular, foco) no debe sufrir el
   realce de fila, el spinner girando ni ninguna transición. Se neutralizan
   todas de golpe; el spinner se sigue viendo (solo deja de girar). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ── Pantalla «Exportar a mi programa» ───────────────────────────────────────
   La cartera (tarea) es el centro; «Preparadas» e «Historial» (estado/consulta)
   viven en pestañas para no quedar enterrados bajo una cartera larga. */
/* Selector de trimestre: vive en la cabecera de la cartera, junto al «Cartera»
   (es a la vez la etiqueta del trimestre visible y el control para cambiarlo). */
.sel-trimestre { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
/* Mientras llega el trimestre nuevo, la tabla visible es la del anterior: se
   atenúa y deja de responder para que nadie seleccione ni exporte sobre datos
   que están a punto de cambiar. */
.recargando { opacity:.45; pointer-events:none; transition:opacity .12s ease-out; }
.sel-trimestre .cargando { padding:0; }
/* Enlace a la configuración del programa elegido. En «pendiente» destaca: sin
   las subcuentas del plan, un Excel con mapeo no sirve de nada al importar, así
   que no es un enlace más de la barra sino lo siguiente que hay que hacer. */
/* Enlace de configurar: iba con la clase `.meta`, que PISA el color de enlace
   (una clase gana a un selector de elemento), así que se pintaba gris y sin
   subrayado — indistinguible del texto muerto de la barra. */
.cfg-enlace { color:var(--marca); font-size:.85rem; text-decoration:underline;
    text-underline-offset:2px; white-space:nowrap; }
.cfg-enlace:hover { filter:brightness(1.15); }
.cfg-pendiente { color:var(--aviso-tinta,#7a5b00); font-weight:600; }
.sel-trimestre h2 { margin:0 .2rem 0 0; }
.sel-trimestre .cartera-resumen { margin-left:.3rem; }

/* Barra de pestañas de contenido: subrayado inferior (distinta de la nav
   superior de la app, que es de pastillas rellenas). */
.subnav { display:flex; gap:.2rem; border-bottom:1px solid var(--linea);
    margin-bottom:1.2rem; }
.subnav [role=tab] { appearance:none; background:none; border:0; cursor:pointer;
    padding:.55rem .95rem; margin-bottom:-1px; color:var(--suave);
    font:inherit; font-weight:600; font-size:.92rem;
    border-bottom:2px solid transparent; border-radius:0; }
.subnav [role=tab]:hover { color:var(--tinta); filter:none; }
.subnav [role=tab][aria-selected=true] { color:var(--marca); border-bottom-color:var(--marca); }
.subnav__cnt { display:inline-block; min-width:1.35em; margin-left:.4em;
    padding:.02em .4em; border-radius:999px; background:var(--verde); color:#fff;
    font-size:.72rem; font-weight:700; text-align:center; vertical-align:.08em; }

/* Cabecera de la cartera: selector de trimestre a la izquierda, filtros a la
   derecha, en una línea. */
.cartera-cab { display:flex; align-items:center; justify-content:space-between;
    gap:.8rem 1.2rem; flex-wrap:wrap; margin-bottom:.7rem; }
.cartera-filtros { display:flex; align-items:center; gap:1rem; }
.cartera-filtros label { display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; }

/* Barra de acción: fija al pie de la ventana para tener «Descargar» a mano
   mientras se recorre una cartera larga (sin volver arriba). */
.barra-accion { position:sticky; bottom:0; z-index:1;
    display:flex; align-items:center; gap:.6rem 1rem; flex-wrap:wrap;
    margin:1rem -1.3rem -1.2rem; padding:.8rem 1.3rem;
    background:var(--panel); border-top:1px solid var(--linea);
    border-radius:0 0 var(--radio) var(--radio); }
/* Los elementos de la barra van en GRUPOS: sueltos, al no caber se parte por
   donde toque y un botón de descarga acaba solo en otra línea (pasaba al añadir
   el enlace de configurar). Agrupados, lo que baja es un bloque entero. */
.ba-grupo { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.ba-prog { margin-left:auto; }          /* empuja programa + acciones a la derecha */
.ba-acciones { flex-wrap:nowrap; }      /* los dos botones NUNCA se separan */
@media (max-width:760px) {
  /* En pantalla estrecha ya no hay derecha a la que empujar: cada grupo a su
     línea, y las acciones ocupando el ancho para que se sigan pulsando bien. */
  .ba-prog { margin-left:0; }
  .barra-accion > .ba-grupo { flex-basis:100%; }
  .ba-acciones button { flex:1; }
}

/* Descargas preparadas: filas simples separadas por línea (no tarjetas). */
.trabajo { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
    padding:.55rem 0; border-bottom:1px solid var(--linea); }
.trabajo:last-child { border-bottom:none; }

/* Historial: cada lote es un <details> plano (fila-cabecera + docs al abrir),
   NO una tarjeta dentro de la tarjeta. Separados por líneas. */
.historial .lote { border-bottom:1px solid var(--linea); }
.historial .lote:last-child { border-bottom:none; }
.lote > summary { list-style:none; cursor:pointer; display:flex; align-items:center;
    gap:.55rem; flex-wrap:wrap; padding:.6rem .2rem; }
.lote > summary::-webkit-details-marker { display:none; }
.lote > summary::before { content:"▸"; color:var(--tenue); font-size:.8em;
    transition:transform .15s ease; }
.lote[open] > summary::before { transform:rotate(90deg); }
.lote > summary:hover { background:var(--fondo); border-radius:8px; }
.lote__num { font-weight:700; font-variant-numeric:tabular-nums; }
.lote__det { flex:1; min-width:0; }
.lote--deshecho > summary { opacity:.55; }
.lote__accion { margin:0; }
.lote__docs { list-style:none; margin:0 0 .5rem; padding:0 0 0 1.5rem; }
.lote__docs li { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
    padding:.25rem 0; font-size:.88rem; color:var(--suave); }
.lote__docs .lote__desc { color:var(--tinta); }
.lote__accion-doc { margin:0; }

/* ── Modo oscuro ──
   Toda la paleta vive en tokens :root, así que el tema oscuro se consigue
   redefiniéndolos (más los pocos literales que quedan sueltos en la hoja).
   Se mantiene el hue teal de la marca y el contraste AA: --tinta sobre
   --fondo ≈13:1; --suave ≈6:1; --tenue ≈4.6:1. Los estados (verde/ámbar/rojo)
   se aclaran para no vibrar sobre fondo oscuro. Sin JS: sigue la preferencia
   del sistema. */
@media (prefers-color-scheme: dark) {
  :root {
    --tinta:#e6edf3; --suave:#9fb0c0; --tenue:#7d8ea0;
    --linea:#2a3542; --fondo:#0f171e; --panel:#18222c;
    --marca:#2dd4bf; --marca-suave:#123230;
    --verde:#34d399; --ambar:#e0a94a; --rojo:#f0736f;
    --sombra:0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  }
  /* Campos: el blanco fijo de fondo/borde no vale en oscuro. */
  input[type=text],input[type=email],input[type=password],select,textarea {
    background:var(--panel); border-color:var(--linea); color:var(--tinta); }
  button.enlace { color:var(--rojo); }
  /* Literales de hover/zebra que estaban hardcodeados en claro. */
  tbody tr:hover { background:#1d2833; }
  .accion-regimen > summary, .editor-regimen { background:#131c25; }
  .accion-peligro > summary { background:#331c1c; border-color:var(--rojo); }
  .pill.verde { background:#123024; } .pill.ambar { background:#332811; }
  .pill.rojo  { background:#331c1c; } .pill.gris { background:#1f2933; }
  .aviso-item--aviso { background:#332811; }
  .aviso-item--critica, .banda-aviso, .error { background:#331c1c; }
  .banda-aviso { border-bottom-color:#4a2a2a; }
  .corr, .corr-flag { background:#332811; }
  .cod { background:var(--panel); border-color:var(--linea); }
  /* Semáforo neutro (gris / en curso): el gris claro brilla en oscuro. */
  .sem.en_curso, .sem.gris { background:#3d4a57; }
  /* Modal: el borde claro del botón Cancelar no se ve sobre el panel oscuro. */
  .modal__pie .cancelar { border-color:var(--linea); }
}