/* MargenGuard · sistema de tokens + pantalla de validación.
   Escritorio: documento (izq ~55%) + panel de líneas (der ~45%), detalle en
   acordeón que NUNCA tapa el documento. Móvil: franja de documento arriba +
   lista densa; el detalle sube como hoja dejando ver la franja.
   Escala de espaciado: 4 / 8 / 12 / 16 / 24 / 32. Números tabulares en importes. */

/* Inter, auto-alojada (sin CDN de Google en producción). Fuente variable: un
   único fichero cubre los pesos 400-700 vía el eje "wght". Subset latin
   (cubre español: tildes, ñ, todo ≤ U+00FF). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/Inter-Variable.woff2") format("woff2-variations");
}

:root {
  /* --- color: neutros (v2, 2026-08 · paleta slate) --- */
  --color-tinta: #0f172a;         /* texto principal */
  --color-texto-suave: #475569;   /* texto secundario — ESTRUCTURA.md §5: #64748B daba 4.4:1, no pasaba el mínimo de 4.5:1 */
  --color-texto-tenue: #94a3b8;   /* terciario: placeholders, timestamps (no lleva texto de lectura obligatoria) */
  --color-superficie: #ffffff;    /* tarjetas, fondos de componente */
  --color-superficie-2: #f8fafc;  /* fondo de pantalla */
  --color-superficie-3: #f1f5f9;  /* hover sutil, fondo de inputs en reposo */
  --color-borde: #e2e8f0;
  --color-borde-fuerte: #cbd5e1;

  /* --- color: acento único (marca) — ESTRUCTURA.md §5: #15803D es el verde de
     texto Y de botón (incluido el relleno del Principal); #16A34A queda
     reservado para rellenos GRANDES (p. ej. el toast de éxito), nunca texto.
     "Usado con avaricia" (§8, referencia Ramp): por eso el Secundario deja de
     ser verde-sobre-blanco y pasa a neutro (ver .secundario más abajo). --- */
  --color-acento: #15803d;
  --color-acento-hover: #166534;
  --color-acento-activo: #14532d;
  --color-acento-suave: #f0fdf4;
  --color-acento-vivo: #16a34a;    /* SOLO rellenos grandes, nunca texto (ver arriba) */

  /* --- color: estados (semáforo), corregidos a los valores de ESTRUCTURA.md §5 --- */
  --color-verde: var(--color-acento);
  --color-verde-bg: #f0fdf4;
  --color-ambar: #b45309;          /* único ámbar de texto (antes había dos: #B7791F y #8A5A12) */
  --color-ambar-bg: #fbf3e1;
  --color-ambar-vivo: #f59e0b;     /* SOLO rellenos grandes, nunca texto */
  --color-rojo: #dc2626;
  --color-rojo-bg: #fbeae8;
  --color-rojo-borde-suave: #f0c9c9;
  --color-rojo-texto: var(--color-rojo);  /* antes un tono aparte (#8A2E22): #DC2626 ya da 4,85:1, no hace falta un segundo tono */
  --color-ambar-bg-suave: #fdf8ec;
  --color-ambar-borde-suave: #f0dfae;
  --color-ambar-texto: var(--color-ambar);
  /* Estado "Leído" (ESTRUCTURA.md §3): antes no existía ningún azul en el
     sistema, así que "Leído" era indistinguible de "Subido"/"Leyendo" (mismo
     gris) — ver el fix de chipDoc() en app.js. */
  --color-azul: #1d4ed8;
  --color-azul-bg: #eff6ff;
  --color-azul-borde-suave: #bfdbfe;

  /* --- tipografía (v2: Inter self-hosted) --- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Text", Roboto, Helvetica, Arial, sans-serif;
  /* Cifra de dinero (ESTRUCTURA.md §5): "lo más grande de cualquier pantalla
     con euros" — antes vivía en --fs-hero (46px) MEZCLADA con el titular de
     marketing del login, que no es una cifra de dinero y no tenía por qué
     compartir tamaño. Ahora son dos tokens separados. */
  --fs-money: 40px;     /* cifra de dinero — peso 600, tabular */
  --fs-hero: 46px;      /* SOLO titular de marketing (login) — peso 700 */
  --fs-display: 32px;   /* SOLO cabecera de tarjeta de login/registro — peso 700 */
  --fs-section: 24px;   /* título de pantalla (ESTRUCTURA.md §5) — peso 600 */
  --fs-body-lg: 16px;   /* título de tarjeta / cuerpo importante — peso 600 */
  --fs-body: 15px;      /* cuerpo estándar — peso 400 (antes 16px) */
  --fs-caption: 14px;   /* secundario — peso 500 */
  --fs-label: 13px;     /* etiquetas/eyebrows en MAYÚSCULAS — peso 500, ls .02em (antes 600/.04em) */
  --fs-micro: 12px;     /* caption: badges/píldoras */

  /* --- espaciado --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* --- radios (v2: 8/12/16) --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* --- sombras (casi invisibles, tres niveles) --- */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 12px rgba(15,23,42,.08);
  /* lg: SOLO para capas que flotan sobre el contenido (menús desplegables).
     Necesita más contraste que una tarjeta para leerse como "encima". */
  --shadow-lg: 0 12px 28px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.06);

  /* --- movimiento --- */
  --duracion: 150ms;
  --easing: ease;

  /* --- layout --- */
  --content-max: 1200px;            /* ancho máximo de contenido, centrado */
  --alto-doc: 22vh;                 /* franja de documento en móvil */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[x-cloak] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--color-tinta); background: var(--color-superficie-2); font-size: var(--fs-body);
}
button { font: inherit; cursor: pointer; }
input, select { font: inherit; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
/* Etiqueta real para lectores de pantalla, sin ocupar sitio en pantalla
   (ESTRUCTURA.md §6: "el placeholder no es una etiqueta"). No usar
   display:none / visibility:hidden: eso también la esconde del lector. */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- utilidades tipográficas (escala aplicada consistentemente) --- */
.fs-display { font-size: var(--fs-display); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.fs-section { font-size: var(--fs-section); font-weight: 600; line-height: 1.3; }
.fs-body-lg { font-size: var(--fs-body-lg); font-weight: 600; line-height: 1.5; }
.fs-caption { font-size: var(--fs-caption); font-weight: 500; line-height: 1.4; color: var(--color-texto-suave); }

/* --- iconografía: una sola familia, trazo fino, inline (sprite en index.html) --- */
.icono, .icono-sm, .icono-lg {
  flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.icono { width: 20px; height: 20px; }
.icono-sm { width: 16px; height: 16px; }
.icono-lg { width: 24px; height: 24px; }

/* --- estados de interacción reutilizables --- */
/* botones (.primario / .secundario / .link / .chip / .tab / .plegable-cab / .senal-accion) */
.primario, .secundario, .link, .chip, .tab, .plegable-cab, .senal-accion,
.candidato, .cerrar-x, .expandir, .zoom button, .doc-fila, .linea-row, .continuar-card {
  transition: background-color var(--duracion) var(--easing), border-color var(--duracion) var(--easing),
              color var(--duracion) var(--easing), transform var(--duracion) var(--easing), opacity var(--duracion) var(--easing);
}
@media (hover: hover) and (pointer: fine) {
  .primario:hover:not(:disabled) { background: var(--color-acento-hover); }
  .secundario:hover:not(:disabled) { background: var(--color-superficie-3); border-color: var(--color-borde-fuerte); }
  .link:hover { opacity: .75; }
  .chip:hover { background: var(--color-superficie-3); }
  .plegable-cab:hover { background: var(--color-superficie-3); }
  .candidato:hover { border-color: var(--color-acento); background: var(--color-acento-suave); }
  .doc-fila:hover { background: var(--color-superficie-3); }
  .linea-row:hover { background: var(--color-superficie-3); }
  .continuar-card:hover { box-shadow: var(--shadow-md); }
  .hero-btn:hover { background: var(--color-acento-hover); }
}
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 2px solid var(--color-acento); outline-offset: 2px;
}
button:disabled, .disabled { opacity: .5; cursor: not-allowed; }
.is-loading { opacity: .6; pointer-events: none; }

/* --- login / nuevo / spinner (tarjeta centrada) --- */
.centro { min-height: 100%; display: grid; place-items: center; padding: var(--space-5); }
.tarjeta {
  background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radius-md);
  padding: var(--space-5); width: 100%; max-width: 420px;
  display: flex; flex-direction: column; gap: var(--space-3); box-shadow: var(--shadow-sm);
}
.tarjeta h1 { margin: 0; font-size: var(--fs-display); font-weight: 700; letter-spacing: -.02em; }
.login-marca { display: flex; align-items: center; gap: var(--space-2); }
.login-marca img { height: 36px; width: auto; display: block; }
.tarjeta .sub { margin: 0; color: var(--color-texto-suave); font-size: var(--fs-body); }
.fila-top { display: flex; justify-content: space-between; align-items: center; }
.tarjeta label { font-size: var(--fs-caption); color: var(--color-texto-suave); margin-top: var(--space-1); }
.tarjeta input, .tarjeta select {
  padding: var(--space-3); border: 1px solid var(--color-borde); border-radius: var(--radius-sm); width: 100%;
  background: var(--color-superficie); color: var(--color-tinta);
}
.tarjeta input:focus, .tarjeta select:focus { border-color: var(--color-acento); }
.primario {
  background: var(--color-acento); color: #fff; border: 0; border-radius: var(--radius-sm);
  padding: var(--space-4); font-weight: 600; box-shadow: var(--shadow-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
}
/* deshabilitado = GRIS neutro (claramente inactivo), no verde lavado: así el CTA
   activo conserva toda la saturación del acento y contrasta de verdad. */
.primario:disabled { background: var(--color-superficie-3); color: var(--color-texto-tenue); opacity: 1; box-shadow: none; }
.primario:active:not(:disabled) { background: var(--color-acento-activo); transform: scale(.98); }
.link {
  background: none; border: 0; color: var(--color-texto-suave); padding: var(--space-2);
  display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 500;
}
.link:active { opacity: .6; }
@media (hover: hover) and (pointer: fine) {
  .link:hover { color: var(--color-tinta); }
}
.error { color: var(--color-rojo); font-size: var(--fs-caption); margin: var(--space-1) 0 0; }
.cargando-box { align-items: center; text-align: center; }
.spinner {
  width: 34px; height: 34px; border: 3px solid var(--color-borde);
  border-top-color: var(--color-acento); border-radius: 50%; animation: giro .8s linear infinite;
}
@keyframes giro { to { transform: rotate(360deg); } }

/* Spinner dentro de un botón: hereda el color del texto para que valga en el
   botón verde y en el de aviso sin definir una variante por cada uno. */
.spinner-mini {
  width: 16px; height: 16px; flex: none;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: giro .8s linear infinite; opacity: .85;
}
.con-spinner { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); }

/* Quien pide menos movimiento no debería ver nada girando (WCAG). El spinner no
   desaparece -- seguiría haciendo falta saber que se está trabajando -- solo
   deja de dar vueltas. */
@media (prefers-reduced-motion: reduce) {
  .spinner, .spinner-mini { animation: none; }
}

/* --- botón secundario (contorno) ---
   ESTRUCTURA.md §5: "Borde #E2E8F0, fondo blanco, texto #0F172A" — neutro, NO
   verde. Antes era un botón verde-sobre-blanco (mismo acento que el Principal,
   solo que en contorno), lo que hacía que el verde apareciera en todas partes
   y dejara de significar nada (§8, referencia Ramp: "usado con avaricia"). */
.secundario {
  background: var(--color-superficie); color: var(--color-tinta); border: 1px solid var(--color-borde);
  border-radius: var(--radius-sm); padding: var(--space-4); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
}
.secundario:disabled { color: var(--color-texto-tenue); border-color: var(--color-borde); opacity: 1; }
.secundario:active:not(:disabled) { background: var(--color-superficie-3); transform: scale(.98); }
.secundario.ancho { width: 100%; }
.secundario.grande { width: 100%; padding: var(--space-4); font-size: 1.05rem; }
.grande { width: 100%; padding: var(--space-4); font-size: 1.05rem; }

/* colores con significado (reusables): ámbar = tu ojo, rojo = mal de verdad */
.ambar { color: var(--color-ambar); font-weight: 700; }
.malo { color: var(--color-rojo); font-weight: 700; }
.euro { color: var(--color-rojo); font-weight: 700; }
.ok { color: var(--color-verde); font-weight: 700; }

/* --- toast (feedback arriba, visible) --- */
.toast {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  padding: var(--space-4); text-align: center; font-weight: 700; color: #fff;
  padding-top: calc(var(--space-4) + env(safe-area-inset-top));
  background: var(--color-acento-vivo); /* relleno grande: aquí sí el verde vivo (ESTRUCTURA.md §5) */
}
.toast.error { background: var(--color-rojo); }

/* identificador de build (pie discreto): descarta el "servidor viejo" de un vistazo */
.build-id {
  position: fixed; bottom: 4px; right: var(--space-2); z-index: 40; pointer-events: none;
  font-size: 10px; font-variant-numeric: tabular-nums; color: var(--color-texto-tenue);
  opacity: .7; background: rgba(255,255,255,.6); padding: 1px var(--space-2); border-radius: var(--radius-pill);
}

/* --- lista de documentos (el 'home') --- */
.pantalla-lista { min-height: 100%; max-width: 780px; margin: 0 auto; padding: var(--space-3) var(--space-4) 40px; }
.lista-cab { display: flex; justify-content: space-between; align-items: center; }
/* Título de pantalla (ESTRUCTURA.md §5: 24px/600) — unificado con .pagina-titulo
   de Inicio; antes usaba --fs-display (32/700), un tamaño distinto para el
   mismo rol. */
.lista-cab h1 { font-size: var(--fs-section); font-weight: 600; margin: var(--space-2) 0; letter-spacing: -.02em; }
/* --- Documentos: bandeja de trabajo --- */
.pantalla-docs { max-width: 960px; }
.docs-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin: var(--space-2) 0 var(--space-4);
}
.docs-toolbar-fin { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* control segmentado (filtro por estado) */
.segmento { display: inline-flex; background: var(--color-superficie-3); border-radius: var(--radius-sm); padding: 3px; gap: 2px; }
.segmento button {
  border: 0; background: none; padding: 7px var(--space-3); min-height: 44px; border-radius: 6px;
  font-size: var(--fs-caption); font-weight: 500; color: var(--color-texto-suave);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--duracion) var(--easing), color var(--duracion) var(--easing);
}
.segmento button.activo { background: var(--color-superficie); color: var(--color-tinta); box-shadow: var(--shadow-sm); }
.segmento-n { font-variant-numeric: tabular-nums; color: var(--color-texto-tenue); font-size: var(--fs-micro); }
.segmento button.activo .segmento-n { color: var(--color-texto-suave); }
/* Pestañas dentro de Compras (ESTRUCTURA.md v2 §2): mismo .segmento que el
   filtro de Documentos, solo separado del header cuando va suelto. */
.compras-tabs { margin: 0 0 var(--space-4); }

/* buscador de tabla */
.tabla-buscar {
  display: flex; align-items: center; gap: var(--space-2);
  border: 1px solid var(--color-borde); border-radius: var(--radius-sm); padding: 0 var(--space-3);
  background: var(--color-superficie); color: var(--color-texto-tenue);
}
.tabla-buscar:focus-within { border-color: var(--color-acento); }
.tabla-buscar input { border: 0; outline: 0; background: none; padding: 9px 0; font-size: var(--fs-body); color: var(--color-tinta); min-width: 180px; }

/* botones compactos (toolbar). ESTRUCTURA.md §6: área tocable mínima 44px —
   el padding solo (9px×2 + texto) se quedaba en ~38px. */
.primario.compacto, .secundario.compacto {
  padding: 9px var(--space-4); font-size: var(--fs-caption); border-radius: var(--radius-sm);
  min-height: 44px;
}

/* --- menú desplegable de acción primaria ("Subir ▾") ---
   Un único punto de entrada para subir cualquier cosa, en vez de una fila de
   botones sueltos que crece sin control cada vez que se añade un tipo. */
.menu-wrap { position: relative; display: inline-flex; }
.menu-caret { transition: transform var(--duracion) var(--easing); margin-left: 2px; }
.menu-caret.abierto { transform: rotate(180deg); }
.menu-desplegable {
  position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: 40;
  min-width: 336px; max-width: min(360px, calc(100vw - var(--space-5)));
  background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: var(--space-2); max-height: 78vh; overflow-y: auto;
}
.menu-grupo + .menu-grupo { border-top: 1px solid var(--color-borde); margin-top: var(--space-2); padding-top: var(--space-2); }
.menu-grupo-tit {
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em;
  font-weight: 600; color: var(--color-texto-tenue); margin: var(--space-1) var(--space-3) var(--space-2);
}
.menu-item {
  display: flex; align-items: flex-start; gap: var(--space-3); width: 100%;
  text-align: left; background: none; border: 0; border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); cursor: pointer; color: var(--color-tinta);
  transition: background var(--duracion) var(--easing);
  min-height: 44px;  /* objetivo táctil */
}
.menu-item .icono-sm { color: var(--color-acento); flex-shrink: 0; margin-top: 2px; }
.menu-item-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.menu-item-tit { font-size: var(--fs-caption); font-weight: 600; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.menu-item-sub { font-size: var(--fs-micro); color: var(--color-texto-suave); }
@media (hover: hover) and (pointer: fine) {
  .menu-item:hover { background: var(--color-superficie-3); }
}
.menu-item:active { background: var(--color-superficie-3); }
.menu-item:focus-visible { outline: 2px solid var(--color-acento); outline-offset: -2px; }
/* aparcados: atenuados pero clicables (abren su pantalla de "qué hará") */
.menu-item.proximo .icono-sm { color: var(--color-texto-tenue); }
.menu-item.proximo .menu-item-tit { color: var(--color-texto-suave); font-weight: 500; }

/* filtro por tipo de documento (2ª dimensión, bajo la barra) */
.filtro-tipo {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin: calc(var(--space-1) * -1) 0 var(--space-4);
}
.filtro-tipo-lbl {
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em;
  font-weight: 600; color: var(--color-texto-tenue); margin-right: var(--space-1);
}
.filtro-tipo button {
  border: 1px solid var(--color-borde); background: var(--color-superficie);
  color: var(--color-texto-suave); border-radius: var(--radius-pill);
  padding: 5px var(--space-3); font-size: var(--fs-micro); font-weight: 500;
  display: inline-flex; align-items: center; gap: var(--space-2);
  transition: background var(--duracion) var(--easing), border-color var(--duracion) var(--easing), color var(--duracion) var(--easing);
}
@media (hover: hover) and (pointer: fine) {
  .filtro-tipo button:hover { border-color: var(--color-borde-fuerte); }
}
.filtro-tipo button.activo { background: var(--color-tinta); border-color: var(--color-tinta); color: #fff; }
.filtro-tipo button.activo .segmento-n { color: rgba(255,255,255,.7); }

/* etiqueta de tipo en la fila de documento */
.doc-tipo { font-weight: 600; color: var(--color-texto-suave); }

/* aviso de que el proveedor se detecta solo (formulario de subida) */
.nota-auto {
  display: flex; align-items: flex-start; gap: var(--space-2);
  background: var(--color-acento-suave); border: 1px solid #bbf7d0;
  border-radius: var(--radius-sm); padding: var(--space-3);
  font-size: var(--fs-caption); color: var(--color-tinta); margin: 0;
}
.nota-auto .icono-sm { color: var(--color-acento); flex-shrink: 0; margin-top: 1px; }

/* --- carga masiva: zona de soltar + lista de ficheros --- */
.soltar {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); text-align: center; cursor: pointer;
  border: 2px dashed var(--color-borde-fuerte); border-radius: var(--radius-md);
  background: var(--color-superficie); padding: var(--space-7) var(--space-4);
  margin: var(--space-3) 0; min-height: 160px;
  transition: border-color var(--duracion) var(--easing), background var(--duracion) var(--easing);
}
.soltar input[type="file"] { display: none; }
.soltar .icono { width: 32px; height: 32px; color: var(--color-texto-tenue); }
.soltar-tit { font-size: var(--fs-body-lg); font-weight: 600; color: var(--color-tinta); }
.soltar-sub { font-size: var(--fs-caption); color: var(--color-texto-suave); }
.soltar.activa, .soltar:focus-within {
  border-color: var(--color-acento); background: var(--color-acento-suave);
}
.soltar.activa .icono { color: var(--color-acento); }
@media (hover: hover) and (pointer: fine) {
  .soltar:hover { border-color: var(--color-acento); }
}

.lote-lista { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.lote-lista li {
  display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-2) 0; border-bottom: 1px solid var(--color-borde);
  font-size: var(--fs-caption);
}
.lote-lista li:last-child { border-bottom: 0; }
.lote-nombre { font-weight: 600; color: var(--color-tinta); word-break: break-all; }
.lote-peso, .lote-motivo { color: var(--color-texto-suave); }
.lote-clase {
  font-size: var(--fs-micro); font-weight: 600; padding: 1px var(--space-2);
  border-radius: var(--radius-pill); background: var(--color-superficie-3);
  color: var(--color-texto-suave);
}
.lote-estado {
  margin-left: auto; font-weight: 600; font-size: var(--fs-micro);
  max-width: 100%; text-align: right;
}
.lote-estado.ok { color: var(--color-verde); }
.lote-estado.mal { color: var(--color-rojo); }

/* proveedor dado de alta por el sistema: marcado para poder revisarlo */
.chip-auto {
  flex-shrink: 0; font-size: var(--fs-micro); font-weight: 600;
  padding: 2px var(--space-2); border-radius: var(--radius-pill);
  background: var(--color-superficie-3); color: var(--color-texto-suave);
  border: 1px dashed var(--color-borde-fuerte);
}
/* posible duplicado: mismo formato, pero en rojo - no es informativo, pide revisión */
.chip-auto.malo {
  background: var(--color-rojo-bg); color: var(--color-rojo-texto);
  border: 1px dashed var(--color-rojo-borde-suave);
}

/* --- Asesor de compras --- */
.pantalla-asesor { max-width: 940px; }
.asesor-h1 { font-size: var(--fs-section); font-weight: 600; margin: var(--space-1) 0 var(--space-3); letter-spacing: -.02em; }
.buscador { display: flex; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); }
.buscador-campo {
  flex: 1; display: flex; align-items: center; gap: var(--space-3);
  border: 1px solid var(--color-borde); border-radius: var(--radius-sm); padding: 0 var(--space-4);
  background: var(--color-superficie); color: var(--color-texto-tenue);
  transition: border-color var(--duracion) var(--easing);
}
.buscador-campo:focus-within { border-color: var(--color-acento); }
.buscador-campo input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  padding: 14px 0; font-size: var(--fs-body-lg); color: var(--color-tinta);
}
.buscador .primario { padding: 0 var(--space-5); font-size: var(--fs-body-lg); }

/* chips de atajos */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 var(--space-1); }
.chip {
  border: 1px solid var(--color-borde); background: var(--color-superficie); border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4); font-size: var(--fs-caption); font-weight: 600; color: var(--color-tinta);
  box-shadow: var(--shadow-sm);
}
.chip:active { background: var(--color-superficie-3); transform: scale(.98); }
.chip.activo { background: var(--color-acento); border-color: var(--color-acento); color: #fff; }

/* sugerencias de búsqueda (ejemplos reales que el buscador resuelve, no atajos) */
.sugerencias-busqueda { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; }
.sugerencias-etq { font-size: var(--fs-micro); color: var(--color-texto-suave); }
.chip-sugerencia {
  border: 1px dashed var(--color-borde-fuerte); background: none; border-radius: var(--radius-pill);
  padding: 5px var(--space-3); font-size: var(--fs-micro); font-weight: 600; color: var(--color-texto-suave);
}
.chip-sugerencia:active { background: var(--color-superficie-3); }
.atajo-tit { font-size: var(--fs-section); font-weight: 600; margin: var(--space-2) 0 var(--space-3); }
.conteo-asesor { margin: var(--space-2) 0 0; font-size: var(--fs-caption); color: var(--color-texto-suave); font-weight: 600; }
.comp-prov { margin: 0 0 var(--space-2); font-size: var(--fs-body); color: var(--color-tinta); }
.comp-prov b { color: var(--color-verde); }
.comp-prov .comp-diff { color: var(--color-rojo); font-weight: 700; }
.badge-cad {
  display: inline-block; margin-left: var(--space-2); font-size: var(--fs-micro); font-weight: 700;
  color: var(--color-ambar-texto); background: var(--color-ambar-bg); padding: 1px var(--space-2); border-radius: var(--radius-pill);
}

.interpretacion { margin: var(--space-4) 0; background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radius-md); padding: var(--space-3); box-shadow: var(--shadow-sm); }
.interp-cab { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-caption); color: var(--color-texto-suave); font-weight: 600; margin-bottom: var(--space-2); }
.coste { font-variant-numeric: tabular-nums; color: var(--color-tinta); }
.coste.ok { color: var(--color-verde); font-weight: 700; }
.explica-asesor { margin: 0 0 var(--space-3); font-size: var(--fs-body); color: var(--color-tinta); line-height: 1.4; }
.interp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.interp-grid label { display: flex; flex-direction: column; font-size: var(--fs-caption); color: var(--color-texto-suave); gap: 3px; }
.interp-grid label.ancho2 { grid-column: 1 / -1; }
.interp-grid input, .interp-grid select { min-height: 40px; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-borde); border-radius: var(--radius-sm); font-size: var(--fs-body); }
.interp-ayuda { margin: 2px 0 var(--space-3); font-size: var(--fs-caption); color: var(--color-texto-suave); }

/* desplegables colapsados: otras / excluidas */
.plegable { margin: var(--space-4) 0; }
.plegable-cab {
  width: 100%; text-align: left; background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); font-weight: 700; color: var(--color-tinta);
  min-height: 44px; display: flex; align-items: center; gap: var(--space-2);
}
.plegable-cab:active { background: var(--color-superficie-3); }
.plegable .tabla-wrap { margin-top: var(--space-2); }

.aviso-temporada { background: var(--color-ambar-bg-suave); border: 1px solid var(--color-ambar-borde-suave); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: var(--fs-caption); color: var(--color-ambar-texto); }

.grupo { margin: var(--space-4) 0; }
.grupo-cab { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); }
.grupo-tit { font-weight: 600; font-size: var(--fs-section); }
.grupo-tit.apagado { color: var(--color-texto-suave); font-weight: 600; font-size: var(--fs-body-lg); }
.grupo-ahorro { color: var(--color-verde); font-weight: 700; font-size: var(--fs-caption); }

.tabla-wrap { overflow-x: auto; border: 1px solid var(--color-borde); border-radius: var(--radius-md); background: var(--color-superficie); box-shadow: var(--shadow-sm); }
.tabla-asesor { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.tabla-asesor th { text-align: left; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .03em; color: var(--color-texto-suave); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-borde); white-space: nowrap; }
.tabla-asesor td { padding: 9px var(--space-3); border-bottom: 1px solid var(--color-borde); white-space: nowrap; }
.tabla-asesor tr:last-child td { border-bottom: 0; }
.tabla-asesor .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-asesor .fuerte { font-weight: 700; }
.tabla-asesor .peque { color: var(--color-texto-suave); font-size: var(--fs-caption); }
.tabla-asesor tr.barato { background: var(--color-verde-bg); }
.tabla-asesor tr.barato .fuerte { color: var(--color-verde); }
.estrella { margin-right: var(--space-1); display: inline-flex; align-items: center; color: var(--color-acento); }
.tabla-asesor tr.sin-precio td { color: var(--color-texto-suave); }

.nivel { font-size: var(--fs-micro); font-weight: 700; padding: 2px var(--space-2); border-radius: var(--radius-pill); }
.nivel.segura { background: var(--color-verde-bg); color: var(--color-verde); }
.nivel.probable { background: var(--color-ambar-bg); color: var(--color-ambar); }

.nota-limite { margin: var(--space-4) 0 0; font-size: var(--fs-caption); color: var(--color-texto-suave); font-style: italic; border-top: 1px solid var(--color-borde); padding-top: var(--space-3); }

/* formularios de alta proveedor / subir tarifario */
.tarjeta > label { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--fs-caption); color: var(--color-texto-suave); }
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.check { flex-direction: row !important; align-items: center; gap: var(--space-2); color: var(--color-tinta); font-size: var(--fs-body); margin-top: var(--space-2); }
.check input { width: auto; }
.resumen-lista { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.resumen-lista li { padding: var(--space-1) 0; font-size: var(--fs-body); }
.tabla-asesor td select { min-height: 38px; padding: var(--space-2); border: 1px solid var(--color-borde); border-radius: var(--radius-sm); width: 100%; }
/* estado vacío: texto + acción para salir de él (nunca un callejón sin salida) */
.vacio {
  color: var(--color-texto-suave); text-align: center; padding: 40px var(--space-3);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
}
.vacio p { margin: 0; max-width: 42ch; }
/* aviso en línea dentro de un formulario (p. ej. "no hay proveedores") */
.vacio-inline { font-size: var(--fs-caption); color: var(--color-texto-suave); margin: calc(var(--space-2) * -1) 0 0; }
.vacio-inline .link { font-size: inherit; }
/* contenedor tipo tabla: un solo borde/sombra, filas con divisores */
.tabla-docs {
  background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden;
}
.docs { list-style: none; margin: 0; padding: 0; }
.doc-fila {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4); border-bottom: 1px solid var(--color-borde);
  background: var(--color-superficie); cursor: pointer;
  transition: background var(--duracion) var(--easing);
}
.doc-fila:last-child { border-bottom: 0; }
.doc-fila:active { background: var(--color-superficie-2); }
/* ESTRUCTURA.md §6: filas con tabindex (fuera de button/input/select/a, así
   que fuera de la regla genérica de foco) necesitan su propio :focus-visible. */
.doc-fila:focus-visible { outline: 2px solid var(--color-acento); outline-offset: -2px; }
/* Fila actual de una cola del tren (ESTRUCTURA.md §4) — provisional, se
   revisa en la Etapa C/D de este mismo rediseño. */
.doc-fila.fila-actual { background: var(--color-acento-suave); border-left: 3px solid var(--color-acento); }
@media (hover: hover) and (pointer: fine) {
  .doc-fila:hover { background: var(--color-superficie-2); }
}
/* Miniatura (ESTRUCTURA.md D2): cuadrado fijo, recorta la foto sin
   deformarla. El icono de respaldo (PDF / sin archivo / fallo de carga)
   ocupa el mismo hueco para que la fila no salte de tamaño. */
.doc-fila-thumb {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-sm);
  overflow: hidden; background: var(--color-superficie-3);
  display: flex; align-items: center; justify-content: center;
}
.doc-fila-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doc-fila-thumb-icon { color: var(--color-texto-tenue); display: inline-flex; }
.doc-fila-main { flex: 1; min-width: 0; }
.doc-fila-top { display: flex; align-items: center; gap: var(--space-2); }
.doc-prov { font-weight: 600; font-size: var(--fs-body-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-chip {
  flex-shrink: 0; font-size: var(--fs-micro); font-weight: 600; padding: 2px var(--space-2); border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 3px; border: 1px solid transparent;
}
/* Subido / Leyendo: gris neutro — ninguno de los dos es un aviso. */
.doc-chip.pendiente { background: var(--color-superficie-3); color: var(--color-texto-suave); }
/* Leído (ESTRUCTURA.md §3): azul, antes compartía el gris de "Subido"/"Leyendo"
   y era indistinguible de ellos — token --color-azul nuevo en esta etapa. */
.doc-chip.leido { background: var(--color-azul-bg); color: var(--color-azul); border-color: var(--color-azul-borde-suave); }
.doc-chip.validado { background: var(--color-verde-bg); color: var(--color-verde); border-color: #bbf7d0; }
.doc-chip.aviso { background: var(--color-ambar-bg); color: var(--color-ambar); border-color: var(--color-ambar-borde-suave); }
/* Hallazgo real (sobrecoste) y error al leer: rojo — dinero o fallo de
   verdad, no un "revísalo" ambar. */
.doc-chip.malo { background: var(--color-rojo-bg); color: var(--color-rojo); border-color: var(--color-rojo-borde-suave); }
/* "Sin archivo" ya no comparte clase con "Subido" (ESTRUCTURA.md §3): son dos
   cosas distintas (uno se puede leer, el otro no). Mismo color por ahora a
   propósito — diferenciarlos de verdad es capa visual, Pase 3. */
.doc-chip.sin-archivo { background: var(--color-ambar-bg); color: var(--color-ambar); border-color: var(--color-ambar-borde-suave); }
.doc-fila-sub { color: var(--color-texto-suave); font-size: var(--fs-caption); margin-top: 3px; }
.doc-fila-conteos { font-size: var(--fs-caption); color: var(--color-texto-suave); margin-top: var(--space-1); display: flex; flex-wrap: wrap; gap: var(--space-1); }
.doc-fila-fin { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
/* Hallazgos: confirmar/reclamar/ignorar en columna estrecha, nunca se
   estruja contra el texto (que puede ser largo: la explicación va en frase). */
.hallazgo-acciones { display: flex; flex-direction: column; gap: var(--space-2); flex-shrink: 0; }
.hallazgo-acciones .chip { padding: var(--space-1) var(--space-3); font-size: var(--fs-micro); white-space: nowrap; }
.doc-impacto { font-size: var(--fs-body-lg); font-weight: 600; color: var(--color-rojo); font-variant-numeric: tabular-nums; }
.chevron { color: var(--color-texto-tenue); display: inline-flex; }
.vacio-filtro { padding: var(--space-6) var(--space-4); text-align: center; color: var(--color-texto-suave); font-size: var(--fs-caption); }

/* --- Hallazgos: tarjeta con el € como protagonista (ESTRUCTURA.md D3) --- */
.hallazgo-card {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-4); border-bottom: 1px solid var(--color-borde);
  background: var(--color-superficie);
}
.hallazgo-card:last-child { border-bottom: 0; }
.hallazgo-card.fila-actual { background: var(--color-acento-suave); border-left: 3px solid var(--color-acento); }
.hallazgo-euro {
  flex-shrink: 0; min-width: 92px;
  font-size: var(--fs-display); font-weight: 700; color: var(--color-rojo);
  letter-spacing: -.02em; line-height: 1.15;
}
.hallazgo-cuerpo {
  flex: 1; min-width: 0; cursor: pointer; display: flex; flex-direction: column; gap: var(--space-2);
  align-items: flex-start; /* si no, el chip "Sobrecoste" se estira a lo ancho (stretch por defecto en columna) */
  border-radius: var(--radius-sm);
}
.hallazgo-cuerpo:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 2px; }
.hallazgo-frase { margin: 0; width: 100%; font-size: var(--fs-body); color: var(--color-tinta); line-height: 1.5; }
.hallazgo-enlace {
  display: inline-flex; align-items: center; gap: 3px; width: fit-content;
  font-size: var(--fs-caption); color: var(--color-texto-suave); font-weight: 600;
}
.hallazgo-enlace .icono-sm { color: var(--color-texto-tenue); width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) {
  .hallazgo-cuerpo:hover .hallazgo-enlace { color: var(--color-tinta); text-decoration: underline; }
}
.hallazgo-acciones { display: flex; flex-direction: column; gap: var(--space-2); flex-shrink: 0; }
.hallazgo-acciones .chip { padding: var(--space-1) var(--space-3); font-size: var(--fs-micro); white-space: nowrap; }
@media (max-width: 599px) {
  .hallazgo-card { flex-wrap: wrap; }
  .hallazgo-euro { font-size: 28px; }
  .hallazgo-acciones { flex-direction: row; width: 100%; }
  .hallazgo-acciones .chip { flex: 1; text-align: center; }
}

/* --- Proveedores: conteo + ficha (solo lectura) --- */
.prov-conteo { font-size: var(--fs-caption); color: var(--color-texto-suave); font-weight: 500; }
.ficha-titulo { margin: 0; font-size: var(--fs-section); font-weight: 600; letter-spacing: -.02em; }
/* € acumulado, protagonista de la cabecera (ESTRUCTURA.md D5). */
.ficha-euro-cab {
  display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow-sm);
}
.ficha-euro { font-size: var(--fs-display); font-weight: 700; letter-spacing: -.02em; color: var(--color-tinta); }
.ficha-euro.malo { color: var(--color-rojo); }
.ficha-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.ficha-stat {
  background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radius-md);
  padding: var(--space-4); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-2);
}
.ficha-stat b { font-size: var(--fs-section); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-tinta); }
.ficha-stat b.malo { color: var(--color-rojo); }
.ficha-bloque { display: flex; flex-direction: column; gap: var(--space-3); }
.ficha-bloque-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.ficha-bloque-cab .seccion-tit { margin: 0; }
.ficha-datos {
  margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-5);
  background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-sm);
}
.ficha-datos dt { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .03em; color: var(--color-texto-suave); font-weight: 600; margin-bottom: 2px; }
.ficha-datos dd { margin: 0; font-size: var(--fs-body); color: var(--color-tinta); }
.ficha-tenue { margin: 0; font-size: var(--fs-caption); color: var(--color-texto-suave); }
@media (max-width: 599px) {
  .ficha-stats { grid-template-columns: 1fr; }
  .ficha-datos { grid-template-columns: 1fr; }

  /* Barra de Documentos en móvil: cada bloque en su fila completa en vez de
     depender del flex-wrap (con el buscador a 180px mínimo, tres elementos en
     una fila se desbordaban en pantallas de 390px). */
  .docs-toolbar { flex-direction: column; align-items: stretch; }
  .docs-toolbar .segmento { width: 100%; }
  .docs-toolbar .segmento button { flex: 1; justify-content: center; }
  .docs-toolbar-fin { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .docs-toolbar-fin .tabla-buscar { grid-column: 1 / -1; }
  .docs-toolbar-fin .tabla-buscar input { min-width: 0; width: 100%; }
  .menu-wrap, .menu-wrap > .primario { width: 100%; justify-content: center; }
  /* El menú se ancla al borde derecho de la pantalla, no del botón. */
  .menu-desplegable { left: 0; right: 0; min-width: 0; max-width: none; }
  .filtro-tipo { overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--space-1); }
  .filtro-tipo button { flex-shrink: 0; min-height: 32px; }
}

/* ======================= VALIDACIÓN ======================= */
/* Móvil: pila vertical (franja de documento + lista). Escritorio: dos columnas. */
.validacion { min-height: 100%; display: flex; flex-direction: column; }

/* --- ZONA A: el documento, siempre visible --- */
.doc {
  position: sticky; top: 0; z-index: 5; height: var(--alto-doc);
  background: var(--color-superficie-3); display: flex; flex-direction: column;
  border-bottom: 1px solid var(--color-borde);
}
.doc-tools {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2); gap: var(--space-2); background: var(--color-borde);
}
.zoom { display: flex; gap: var(--space-1); }
/* ESTRUCTURA.md §6: 44px de área tocable, incluidos los controles de la barra
   de herramientas del documento (antes 30-34px). */
.zoom button {
  min-width: 44px; height: 44px; border: 1px solid var(--color-borde); background: var(--color-superficie);
  border-radius: var(--radius-sm); color: var(--color-tinta); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.zoom button:active { background: var(--color-superficie-3); }
.expandir {
  border: 1px solid var(--color-borde); background: var(--color-superficie); border-radius: var(--radius-sm); height: 44px; padding: 0 var(--space-3); color: var(--color-tinta); font-weight: 600;
  display: inline-flex; align-items: center; gap: var(--space-1);
}
.expandir:active { background: var(--color-superficie-3); }
/* Colapsar la franja de documento (ESTRUCTURA.md D1, solo móvil): mismo
   aspecto que .expandir, es la misma familia de controles de la barra. */
.colapsar {
  border: 1px solid var(--color-borde); background: var(--color-superficie); border-radius: var(--radius-sm);
  height: 44px; padding: 0 var(--space-3); color: var(--color-tinta); font-weight: 600;
  display: inline-flex; align-items: center; gap: var(--space-1);
}
.colapsar:active { background: var(--color-superficie-3); }
.colapsar .icono-sm { transition: transform var(--duracion) var(--easing); }
.colapsar.colapsado .icono-sm { transform: rotate(180deg); }
.doc-vista { flex: 1; overflow: auto; background: var(--color-superficie); transition: opacity var(--duracion) var(--easing); }
.doc-vista img { display: block; width: 100%; height: auto; }
.pdf-fallback { width: 100%; height: 100%; display: flex; flex-direction: column; }
.pdf-fallback embed { flex: 1; width: 100%; }
.pdf-fallback a { text-align: center; padding: var(--space-2); background: var(--color-superficie-3); }

/* --- ZONA B: panel de líneas --- */
.panel { display: flex; flex-direction: column; min-height: 0; }
.barra {
  position: sticky; top: var(--alto-doc); z-index: 4;
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
  background: var(--color-superficie); border-bottom: 1px solid var(--color-borde);
}
.barra-tit { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-num { color: var(--color-texto-suave); font-weight: 400; }
.doc-validado {
  font-size: var(--fs-micro); font-weight: 700; color: var(--color-verde);
  background: var(--color-verde-bg); padding: 3px var(--space-3); border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 3px;
}
.progreso { padding: var(--space-3) var(--space-3) var(--space-2); background: var(--color-superficie-2); }
.progreso-barra { height: 6px; background: var(--color-borde); border-radius: var(--radius-pill); overflow: hidden; }
.progreso-barra span { display: block; height: 100%; background: var(--color-verde); transition: width .3s; }
.progreso-txt { margin-top: var(--space-2); font-size: var(--fs-caption); color: var(--color-texto-suave); display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.banner-error {
  background: var(--color-rojo-bg); color: var(--color-rojo-texto); font-size: var(--fs-caption); font-weight: 600;
  padding: var(--space-3); border-bottom: 1px solid var(--color-rojo-borde-suave);
  display: flex; align-items: center; gap: var(--space-2);
}

/* Suma de control en rojo: el documento no es de fiar. Más alto que el banner
   de guardado porque lleva dos frases y tiene que leerse entera, no ojearse. */
.banner-cuadre {
  background: var(--color-rojo-bg); color: var(--color-rojo-texto);
  font-size: var(--fs-caption); line-height: 1.45;
  padding: var(--space-3); border-bottom: 1px solid var(--color-rojo-borde-suave);
  display: flex; align-items: flex-start; gap: var(--space-2);
}
.banner-cuadre .icono-sm { flex: none; margin-top: 2px; }
.banner-cuadre strong { display: block; font-weight: 700; }

/* Botón de validar cuando las cifras no cuadran: deja de ser la acción
   evidente. Sigue disponible -- decide el humano -- pero no se pulsa por
   inercia como el verde de al lado. */
.boton.aviso, button.aviso {
  color: var(--color-rojo-texto);
  border-color: var(--color-rojo-borde-suave);
  background: var(--color-rojo-bg);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
}

/* Documento subido pero aún sin leer. No es un estado de error: es una acción
   pendiente, así que se presenta como tal (icono, explicación y un botón), no
   como una tabla vacía sin nada que hacer. */
.vacio-sin-leer {
  padding: var(--space-6) var(--space-4);
  text-align: center; max-width: 30rem; margin: 0 auto;
}
.vacio-sin-leer .icono-lg { color: var(--color-texto-suave); margin-bottom: var(--space-3); }
.vacio-sin-leer h3 { font-size: var(--fs-body); font-weight: 700; margin: 0 0 var(--space-2); }
.vacio-sin-leer p {
  color: var(--color-texto-suave); font-size: var(--fs-caption);
  line-height: 1.5; margin: 0 0 var(--space-4);
}
.vacio-sin-leer .vacio-nota { margin: var(--space-2) 0 0; font-size: var(--fs-micro, 12px); }
.vacio-sin-leer .vacio-error {
  margin-top: var(--space-3); color: var(--color-rojo-texto);
  background: var(--color-rojo-bg); border-radius: var(--radius-sm);
  padding: var(--space-3); text-align: left;
}

/* cabecera de columnas (solo escritorio) */
.lista-cols { display: none; }

/* --- la lista densa (tabla) --- */
.lista { list-style: none; margin: 0; padding: 0 0 160px; }
.linea { background: var(--color-superficie); border-bottom: 1px solid var(--color-borde); }
.linea.abierta { box-shadow: inset 3px 0 0 var(--color-acento); }

.lista-cols, .linea-row {
  display: grid; align-items: center; gap: var(--space-3);
  /* 1ª columna a ancho FIJO (no "auto"): cada fila es su propia grid, así que
     una columna "auto" tomaría el ancho de SU chip ("Casado" vs "Desconocido"
     miden distinto) y las filas dejarían de alinearse entre sí. */
  grid-template-columns: 92px minmax(0,1fr) 58px 58px 74px auto;
}
.lista-cols { padding: var(--space-2) 14px; font-size: var(--fs-micro); color: var(--color-texto-suave); text-transform: uppercase; letter-spacing: .03em; background: var(--color-superficie-2); border-bottom: 1px solid var(--color-borde); }
.linea-row { padding: 9px 14px; min-height: 46px; }
.linea-row:active { background: var(--color-superficie-3); }
.linea-row:focus-visible { outline: 2px solid var(--color-acento); outline-offset: -2px; }
/* Chip de casado (ESTRUCTURA.md D1): color + PALABRA visible siempre, no solo
   un punto de color con el texto escondido en un title= (ni con ratón ni
   táctil se ve). */
.linea-chip {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: var(--fs-micro); font-weight: 600;
  padding: 3px var(--space-2); border-radius: var(--radius-pill);
}
.linea.verde .linea-chip { background: var(--color-verde-bg); color: var(--color-verde); }
.linea.ambar .linea-chip { background: var(--color-ambar-bg); color: var(--color-ambar); }
.linea.rojo .linea-chip { background: var(--color-rojo-bg); color: var(--color-rojo); }
.linea.pendiente .linea-chip { background: var(--color-superficie-3); color: var(--color-texto-suave); }
.celda-desc { min-width: 0; }
.desc { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub { display: block; color: var(--color-texto-suave); font-size: var(--fs-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linea-row .num { text-align: right; font-size: var(--fs-body); color: var(--color-tinta); }
.linea-row .importe { font-weight: 700; }
.marcas { display: flex; align-items: center; gap: var(--space-2); justify-content: flex-end; }
.badge-euro { color: var(--color-rojo); font-weight: 700; font-size: var(--fs-caption); }
/* La línea no cuadra por dentro (cantidad x precio != importe, o falta uno). */
.badge-cuadre { color: var(--color-ambar, #B45309); font-weight: 700; font-size: var(--fs-caption); }
/* Un número que falta se ve como falta, no como celda vacía. */
.linea-row .num.falta { color: var(--color-texto-tenue, #94A3B8); }

/* Selección múltiple de líneas (validar varias de golpe). */
.marca-linea { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.marca-linea input { width: 18px; height: 18px; accent-color: var(--color-acento); }
.barra-seleccion {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) 14px; background: var(--color-superficie-2);
  border-bottom: 1px solid var(--color-borde); font-size: var(--fs-caption);
}
.celda-desc .marca-linea { margin-right: 8px; float: left; }

/* Auto-validación: el bloque plegado de lo que se resolvió solo, y el motivo
   por el que una línea concreta te toca a ti. */
.bloque-auto {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) 14px; background: var(--color-superficie-2);
  border-bottom: 1px solid var(--color-borde); font-size: var(--fs-caption);
  color: var(--color-texto-suave);
}
.bloque-auto > span { display: inline-flex; align-items: center; gap: 6px; }
.sub.motivo { color: var(--color-ambar, #B45309); }
/* contador de lectura: círculo ámbar, lenguaje visual distinto del punto de casado */
.contador-duda {
  min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-ambar); color: #fff; font-weight: 700; font-size: var(--fs-caption); border-radius: var(--radius-pill);
}

/* --- DETALLE en acordeón (escritorio) --- */
.detalle {
  /* padding-top deja hueco para el botón cerrar-x (44px + separación, área
     tocable mínima de ESTRUCTURA.md §6), que es absoluto y si no solaparía la
     primera fila de contenido (p. ej. la tarjeta "Diferencia" de precios). */
  position: relative; padding: calc(var(--space-2) + 44px + var(--space-2)) var(--space-4) var(--space-4);
  background: var(--color-superficie-2);
  border-top: 1px solid var(--color-borde);
}
.cerrar-x {
  position: absolute; top: var(--space-2); right: var(--space-2); width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: var(--color-superficie-3); color: var(--color-tinta);
  display: grid; place-items: center;
}
.cerrar-x:active { background: var(--color-borde); }

.precios { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin: var(--space-1) 0 var(--space-2); }
.precios > div { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radius-sm); padding: var(--space-2); text-align: center; }
.precios span { display: block; font-size: var(--fs-micro); color: var(--color-texto-suave); }
.precios b { font-size: var(--fs-body-lg); font-variant-numeric: tabular-nums; }
.precios .malo { background: var(--color-rojo-bg); border-color: var(--color-rojo-borde-suave); } .precios .malo b { color: var(--color-rojo); }
.precios .bueno b { color: var(--color-verde); }
.explica { font-size: var(--fs-caption); color: var(--color-tinta); background: var(--color-superficie); border: 1px solid var(--color-borde); padding: var(--space-3); border-radius: var(--radius-sm); }

/* Desglose de los renglones que el proveedor imprime debajo de la línea
   (descuento fijo, Punto Verde). Deliberadamente DISCRETO: es una explicación
   de cómo se llega al importe, no un dato que haya que revisar ni decidir. Va
   en lista para que se lea como la columna del papel, de arriba abajo. */
.desglose {
  background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
  margin: var(--space-1) 0 var(--space-2); font-size: var(--fs-caption);
}
.desglose > div { display: flex; justify-content: space-between; gap: var(--space-3); padding: 2px 0; }
.desglose span { color: var(--color-texto-suave); }
.desglose b { font-variant-numeric: tabular-nums; font-weight: 600; }
.desglose .bueno b { color: var(--color-verde); }
.desglose .total { border-top: 1px solid var(--color-borde); margin-top: 3px; padding-top: 5px; }
.desglose .total span { color: var(--color-tinta); }

/* campos en FILA compacta (grid 2 col); la descripción ocupa toda la fila */
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-3); margin: var(--space-3) 0 var(--space-1); }
.campo-edit { min-width: 0; }
.campo-edit.ancho { grid-column: 1 / -1; }
.campo-edit label {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  font-size: var(--fs-caption); color: var(--color-texto-suave); margin-bottom: 3px;
}
.campo-flag {
  display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0;
  font-size: var(--fs-micro); font-weight: 700; color: var(--color-ambar);
}
.campo-flag .icono-sm { width: 13px; height: 13px; }
/* NEUTRO = no venía impreso, se ha calculado. No pide nada al usuario (por eso
   no es ámbar como "Revisar"), pero se declara: es tinta apagada, no un aviso. */
.campo-calc {
  flex-shrink: 0; font-size: var(--fs-micro); font-weight: 600;
  color: var(--color-texto-suave); text-transform: lowercase; letter-spacing: .02em;
}
.campo-edit input {
  width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); font-size: var(--fs-body-lg);
  border: 1px solid var(--color-borde); border-radius: var(--radius-sm); background: var(--color-superficie); color: var(--color-tinta);
}
.campo-edit input.num { text-align: right; }
.campo-edit input:focus { outline: 2px solid var(--color-acento); border-color: var(--color-acento); }
/* ÁMBAR = necesita tu ojo (no es un error) */
.campo-edit.pendiente input { background: var(--color-ambar-bg); border-color: var(--color-ambar); }
.campo-edit .ayuda { margin: var(--space-1) 2px 0; font-size: var(--fs-caption); color: var(--color-ambar); }
/* ROJO = algo NO se guardó de verdad. Persistente, no fugaz. */
.campo-edit.fallo input { background: var(--color-rojo-bg); border-color: var(--color-rojo); }
.campo-edit .fallo-txt { margin: var(--space-1) 2px 0; font-size: var(--fs-caption); font-weight: 700; color: var(--color-rojo); }
.btn-revisar {
  width: 100%; min-height: 44px; border: 1px solid var(--color-ambar); background: var(--color-ambar-bg);
  color: var(--color-ambar); font-weight: 700; border-radius: var(--radius-sm);
}
.label { font-size: var(--fs-caption); color: var(--color-texto-suave); margin: var(--space-3) 0 var(--space-2); }
.candidato {
  width: 100%; min-height: 44px; text-align: left; background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: var(--radius-sm); padding: var(--space-3); margin-bottom: var(--space-2);
  display: flex; align-items: center; gap: var(--space-3);
}
.candidato:active { border-color: var(--color-acento); background: var(--color-acento-suave); }
.candidato small { color: var(--color-texto-suave); flex-shrink: 0; }
.candidato-txt { flex: 1; min-width: 0; }
/* Número del atajo de teclado (ESTRUCTURA.md §6): visible en el propio botón,
   como una tecla — "un atajo que nadie ve no existe". Solo tiene sentido con
   teclado físico; en móvil no estorba pero tampoco hace nada, así que se
   oculta donde no hay teclado. */
.candidato-tecla {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: var(--radius-sm);
  background: var(--color-superficie-3); color: var(--color-texto-suave);
  font-size: var(--fs-micro); font-weight: 700; font-variant-numeric: tabular-nums;
  display: none; align-items: center; justify-content: center;
  border: 1px solid var(--color-borde-fuerte);
}
@media (hover: hover) and (pointer: fine) {
  .candidato-tecla { display: inline-flex; }
}
/* La acción de la línea, pegada al fondo de la ficha: tiene que verse SIN
   scroll. Lo que la motiva: el usuario editaba un campo y no sabía si se había
   guardado, porque el guardado ocurre en el blur y no había botón ninguno. */
.linea-accion {
  /* Por encima de cualquier barra fija: es la accion de lo que se esta haciendo. */
  position: sticky; bottom: 0; z-index: 7;
  margin: var(--space-4) calc(-1 * var(--space-4)) calc(-1 * var(--space-4));
  padding: var(--space-3) var(--space-4);
  background: var(--color-superficie);
  border-top: 1px solid var(--color-borde);
}
.linea-accion .primario { min-height: 48px; }
.linea-accion-por-que {
  margin: 0 0 var(--space-2); font-size: var(--fs-caption);
  color: var(--color-texto-suave); line-height: 1.35;
}
.primario.ancho { width: 100%; }
/* Descartar es la EXCEPCION, no lo normal: enlace discreto bajo el boton, no
   un tercer boton compitiendo con la accion principal. */
.link-descartar {
  display: block; width: 100%; margin-top: var(--space-2);
  background: none; border: 0; min-height: 36px;
  font-size: var(--fs-caption); color: var(--color-texto-suave);
  text-decoration: underline; cursor: pointer;
}
.link-descartar:disabled { opacity: .5; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .link-descartar:hover:not(:disabled) { color: var(--color-tinta); }
}
/* Fila descartada: se sigue viendo (el papel la tiene) pero apagada, para que
   no compita con las que si cuentan. */
.linea.descartada { opacity: .55; }
.linea.descartada .desc { text-decoration: line-through; }

.candidato-txt { display: flex; flex-direction: column; gap: 2px; }
/* De dónde sale el candidato. No es decoración: el del tarifario trae precio
   (y por tanto auditoría), el del catálogo solo identifica el artículo. */
.candidato-origen { font-size: var(--fs-micro); color: var(--color-texto-suave); }

/* Buscador del catálogo + alta rápida: las dos salidas de una línea que ningún
   candidato resuelve. Antes de esto, "elige el artículo" no tenía dónde elegir. */
.buscar-art { margin-top: var(--space-4); }
.buscar-art > input[type="search"] {
  width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-borde); border-radius: var(--radius-sm);
  background: var(--color-superficie); color: var(--color-tinta);
  font-size: var(--fs-body); margin-bottom: var(--space-2);
}
.buscar-art > input[type="search"]:focus {
  outline: 2px solid var(--color-acento); border-color: var(--color-acento);
}
.alta-rapida {
  margin-top: var(--space-2); padding: var(--space-3);
  border: 1px solid var(--color-borde); border-radius: var(--radius-sm);
  background: var(--color-superficie-2);
}
.alta-rapida label {
  display: block; margin-bottom: var(--space-2);
  font-size: var(--fs-caption); color: var(--color-texto-suave);
}
.alta-rapida input {
  width: 100%; min-height: 44px; margin-top: 2px; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-borde); border-radius: var(--radius-sm);
  background: var(--color-superficie); color: var(--color-tinta); font-size: var(--fs-body);
}
.alta-rapida input:focus { outline: 2px solid var(--color-acento); border-color: var(--color-acento); }
.alta-rapida .opcional { font-weight: 400; color: var(--color-texto-tenue); }
.alta-acciones { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-3); }
.alta-acciones button { min-height: 44px; }
/* Asignar por referencia del proveedor: sigue existiendo, pero ya no es la
   única opción, así que deja de ocupar el sitio principal. */
.asignar-ref { margin-top: var(--space-3); }
.asignar-ref summary {
  cursor: pointer; font-size: var(--fs-caption); color: var(--color-texto-suave);
  min-height: 32px; display: flex; align-items: center;
}
.asignar-ref[open] summary { margin-bottom: var(--space-2); }
.asignar { display: flex; gap: var(--space-2); }
.asignar input { flex: 1; min-height: 44px; padding: var(--space-3); border: 1px solid var(--color-borde); border-radius: var(--radius-sm); }
.asignar .primario { min-height: 44px; }

/* fondo oscuro SOLO móvil (la hoja deslizable) */
.hoja-fondo { display: none; }

/* --- pie fijo: acciones del documento --- */
.barra-accion {
  position: fixed; bottom: 0; left: 0; right: 0; padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--color-superficie); border-top: 1px solid var(--color-borde); z-index: 6;
  display: flex; flex-direction: column; gap: var(--space-2);
}
.barra-accion > div { display: flex; flex-direction: column; gap: var(--space-2); }
.mensaje { margin: 0; font-size: var(--fs-caption); color: var(--color-texto-suave); text-align: center; }

/* Atajos de teclado (ESTRUCTURA.md §6): discretos, y solo donde hay teclado
   físico — en móvil no aportan nada y ocupan sitio de verdad. */
.atajos-teclado {
  display: none; margin: 0 0 var(--space-1); font-size: var(--fs-micro);
  color: var(--color-texto-tenue); text-align: center;
}
.atajos-teclado kbd {
  display: inline-block; font: inherit; font-weight: 600; color: var(--color-texto-suave);
  background: var(--color-superficie-3); border: 1px solid var(--color-borde-fuerte);
  border-radius: 4px; padding: 0 5px; margin: 0 1px;
}
@media (hover: hover) and (pointer: fine) {
  .atajos-teclado { display: block; }
}
/* Posición del tren en la barra inferior fija (ESTRUCTURA.md §4 regla 1: junto
   a la acción principal, no en la cabecera). */
.barra-accion-cola {
  margin: 0 0 var(--space-1); font-size: var(--fs-caption); font-weight: 600;
  color: var(--color-texto-suave); text-align: center; font-variant-numeric: tabular-nums;
}

/* entrada discreta al puente contable, en la barra de acciones */
.enlace-accion {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  background: none; border: none; cursor: pointer; padding: var(--space-2);
  font-size: var(--fs-caption); color: var(--color-texto-suave);
}
.enlace-accion:hover { color: var(--color-acento); }
.puente-paso {
  margin: 0 0 var(--space-3); font-size: var(--fs-caption);
  text-transform: uppercase; letter-spacing: .04em; color: var(--color-texto-suave);
}

/* --- confirmación en línea al validar con pendientes --- */
.confirmar-box { background: var(--color-ambar-bg-suave); border: 1px solid var(--color-ambar-borde-suave); border-radius: var(--radius-md); padding: var(--space-3); }
.confirmar-msg { margin: 0 0 var(--space-3); font-size: var(--fs-body-lg); }
.confirmar-msg.grave { background: var(--color-rojo-bg); border: 1px solid var(--color-rojo-borde-suave); border-radius: var(--radius-sm); padding: var(--space-3); color: var(--color-rojo-texto); }
.confirmar-msg.grave b { font-size: var(--fs-body-lg); }
.confirmar-btns { display: flex; gap: var(--space-2); }
.confirmar-btns .secundario, .confirmar-btns .primario { flex: 1; min-height: 44px; }

/* --- documento a pantalla completa --- */
.full { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 20; display: grid; place-items: center; padding: var(--space-3); overflow: auto; }
.full img { max-width: 100%; height: auto; }

/* ======================= MÓVIL: hoja deslizable ======================= */
@media (max-width: 899px) {
  /* el detalle inline se convierte en hoja inferior que DEJA ver la franja del
     documento arriba (no la tapa) */
  .detalle {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 9;
    background: var(--color-superficie); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: calc(100vh - var(--alto-doc) - 8px); overflow-y: auto;
    padding: var(--space-4); padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
    box-shadow: var(--shadow-md); border-top: 0;
  }
  .hoja-fondo { display: block; position: fixed; inset: 0; background: rgba(20,30,45,.4); z-index: 8; }
  /* cabecera de columnas: solo escritorio (bug preexistente: la regla combinada
     de abajo pone display:grid también en móvil si no se re-oculta aquí) */
  .lista-cols { display: none; }
  /* en la fila, cant/precio se ocultan (se ven en el detalle); queda importe */
  .lista-cols, .linea-row { grid-template-columns: 92px minmax(0,1fr) auto auto; }
  .linea-row .cant, .linea-row .precio { display: none; }
  /* Franja de documento colapsada (ESTRUCTURA.md D1): deja solo la barra de
     herramientas visible, toda la altura vuelve a la lista de líneas. La
     franja NO desaparece del todo (regla nº9 del proyecto: la foto sigue a
     un toque, nunca se pierde el contexto del documento). */
  .doc.colapsado { height: 44px; }
  .doc.colapsado .doc-vista { opacity: 0; pointer-events: none; }
}

/* ======================= ESCRITORIO: dos columnas ======================= */
@media (min-width: 900px) {
  :root { --alto-doc: 0px; }
  .validacion { flex-direction: row; height: 100vh; }
  /* ESTRUCTURA.md D1: 50/50 (antes 60/40) — la imagen y los datos pesan igual. */
  .doc { width: 50%; height: 100vh; position: sticky; top: 0; border-bottom: 0; border-right: 1px solid var(--color-borde); }
  .panel { width: 50%; height: 100vh; overflow-y: auto; }
  .barra { top: 0; }
  .lista-cols { display: grid; }
  .barra-accion { left: 50%; }
  /* Colapsar es un control de móvil (poco espacio vertical); en escritorio
     las dos columnas ya conviven sin competir por altura. */
  .colapsar { display: none; }
  /* el detalle es acordeón inline (no tapa el documento): no fijar, no sheet */
}

/* ======================= NAV compartida (Home v2) =======================
   home / documentos / asesor. Móvil: barra inferior (icono + texto).
   Escritorio: sidebar izquierda (icono + texto). "Proveedores" enlaza
   directo al alta ya existente. */
.tabbar { display: flex; }
.tabbar-marca { display: none; }
/* Ajustes: mismo aspecto que un .tab, pero es un menu-wrap (desplegable) en
   vez de un botón de navegación directa — "fuera de la barra" (ESTRUCTURA.md
   §2) significa que no es una sección, no que se vea distinto. */
.tabbar-ajustes { display: flex; flex: 1; }
.tabbar-ajustes .tab { flex: 1; width: 100%; }
.menu-desplegable-arriba { top: auto; bottom: calc(100% + var(--space-2)); }
.tab {
  flex: 1; background: none; border: 0; padding: 10px 4px 8px;
  font-size: var(--fs-micro); font-weight: 600; color: var(--color-texto-suave); min-height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.tab.activo { color: var(--color-tinta); font-weight: 600; }
.tab:active { background: var(--color-superficie-3); }
@media (hover: hover) and (pointer: fine) {
  .tab:not(.activo):hover { color: var(--color-tinta); background: var(--color-superficie-2); }
}

@media (max-width: 899px) {
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
    background: var(--color-superficie); border-top: 1px solid var(--color-borde);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: var(--shadow-md);
  }
  body.con-nav .pantalla-lista { padding-bottom: 78px; }
}

@media (min-width: 900px) {
  .tabbar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 200px; z-index: 15;
    flex-direction: column; align-items: stretch; padding: var(--space-5) 0;
    background: var(--color-superficie); border-right: 1px solid var(--color-borde);
  }
  .tab {
    flex-direction: row; justify-content: flex-start; text-align: left;
    margin: 0 var(--space-3); padding: var(--space-3) var(--space-3);
    border-radius: var(--radius-sm); font-size: var(--fs-body); gap: var(--space-3);
  }
  .tab.activo { background: var(--color-superficie-2); }
  .tabbar-marca {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 0 var(--space-5) var(--space-5); font-weight: 700; font-size: var(--fs-body-lg);
    color: var(--color-tinta);
  }
  .tabbar-marca img { height: 28px; width: auto; display: block; }
  body.con-nav { padding-left: 200px; }
  /* Bug real encontrado verificando D6: el desplegable de Ajustes heredaba
     "right:0" (pensado para el botón "Subir" de Documentos, de ancho
     variable en el flujo normal). Dentro del sidebar de 200px eso lo
     empujaba fuera de la pantalla por la izquierda -- quedaba prácticamente
     inutilizable en escritorio. Aquí se abre hacia la derecha del sidebar
     (el sentido vertical -arriba/abajo- lo sigue dando .menu-desplegable-arriba,
     sin tocar). */
  .tabbar-ajustes .menu-desplegable { left: calc(100% + var(--space-2)); right: auto; }
}

/* ======================= HOME (rediseño enterprise) ======================= */
/* Columna de contenido centrada, generosa en aire. Ancho ≤ --content-max. */
.pantalla-home { max-width: 820px; padding: var(--space-5) var(--space-5) 96px; }
.home-cab { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) 0 var(--space-6); }
.marca { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: var(--fs-section); letter-spacing: -.02em; }
.marca-icono { height: 26px; width: auto; display: block; }
.pagina-titulo { display: none; margin: 0; font-size: var(--fs-section); font-weight: 600; letter-spacing: -.02em; color: var(--color-tinta); }
@media (min-width: 900px) {
  .marca { display: none; }             /* la marca ya vive en la sidebar */
  .pagina-titulo { display: block; }
}
.home-cargando { text-align: center; color: var(--color-texto-suave); padding: 48px 0; }
.home-cuerpo { display: flex; flex-direction: column; gap: var(--space-6); }

/* Banner "Estado del negocio": discreto, una franja, no una tarjeta enorme. */
.banner-estado {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border: 1px solid transparent;
}
.banner-estado.verde { background: var(--color-verde-bg); border-color: #bbf7d0; }
.banner-estado.verde .icono { color: var(--color-verde); }
.banner-estado.ambar { background: var(--color-ambar-bg); border-color: var(--color-ambar-borde-suave); }
.banner-estado.ambar .icono { color: var(--color-ambar); }
.banner-estado-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.banner-estado-tit { font-weight: 600; font-size: var(--fs-body-lg); color: var(--color-tinta); line-height: 1.3; }
.banner-estado-detalle { font-size: var(--fs-caption); color: var(--color-texto-suave); }

/* Impacto económico: la cifra que domina la pantalla (jerarquía 3×). */
.tarjeta-impacto {
  background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--shadow-sm);
}
.tarjeta-impacto > div { display: flex; flex-direction: column; }
.impacto-etq {
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .02em;
  color: var(--color-texto-suave); font-weight: 500; margin-bottom: var(--space-3);
}
.impacto-cifra {
  font-size: var(--fs-money); font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--color-tinta); letter-spacing: -.02em; line-height: 1.1;
}
.impacto-cifra.chico { font-size: var(--fs-display); }   /* estados sin cifra ("Sin desvíos…") */
.impacto-sub { font-size: var(--fs-caption); color: var(--color-texto-suave); margin-top: var(--space-2); }

/* KPI de aprendizaje: cuánto se valida solo. Deliberadamente MÁS discreto que
   la tarjeta de impacto — el dinero manda en Inicio; esto es cómo va el motor. */
.tarjeta-kpi {
  background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm);
}
.kpi-cab { display: flex; flex-direction: column; }
.kpi-cifra {
  font-size: var(--fs-display); font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--color-tinta); letter-spacing: -.02em; line-height: 1.1;
}
.kpi-tendencia {
  display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--fs-caption); color: var(--color-texto-suave);
  margin: var(--space-3) 0 0;
}
.kpi-tendencia .icono-sm { display: none; }               /* sin flecha si no hay dirección */
.kpi-tendencia.sube, .kpi-tendencia.baja { color: var(--color-tinta); }
.kpi-tendencia.sube .icono-sm { display: block; color: var(--color-acento); transform: rotate(-90deg); }
.kpi-tendencia.baja .icono-sm { display: block; color: var(--color-ambar); transform: rotate(90deg); }

.kpi-provs { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.kpi-prov {
  display: grid; grid-template-columns: minmax(0, 1fr) 72px auto auto;
  align-items: center; gap: var(--space-3);
  padding: var(--space-2) 0; border-top: 1px solid var(--color-borde);
  font-size: var(--fs-caption);
}
.kpi-prov-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-tinta); }
.kpi-prov-barra {
  height: 6px; border-radius: 999px; background: var(--color-borde); overflow: hidden;
}
.kpi-prov-relleno { display: block; height: 100%; background: var(--color-acento); }
.kpi-prov-pct { font-variant-numeric: tabular-nums; color: var(--color-tinta); text-align: right; }
.kpi-prov-n {
  font-variant-numeric: tabular-nums; color: var(--color-texto-suave);
  text-align: right; min-width: 4.5em;
}
.kpi-mas { font-size: var(--fs-caption); color: var(--color-texto-suave); margin: var(--space-2) 0 0; }

/* En móvil el nombre y la barra compiten: la barra se va y quedan los números. */
@media (max-width: 560px) {
  .kpi-prov { grid-template-columns: minmax(0, 1fr) auto auto; }
  .kpi-prov-barra { display: none; }
}

/* Hero: la única acción protagonista. */
.hero-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%; background: var(--color-acento); color: #fff; border: 0;
  border-radius: var(--radius-sm); padding: 15px var(--space-5); font-size: var(--fs-body-lg); font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: background var(--duracion) var(--easing), transform var(--duracion) var(--easing);
}
.hero-btn:active { background: var(--color-acento-activo); transform: scale(.99); }
/* Fijo en móvil (ESTRUCTURA.md D4): sigue a un toque aunque la lista de
   "esperando"/"continúa" crezca y haya que hacer scroll. Por encima de la
   barra de navegación inferior (78px reservados para ella, mismo valor que
   ya usa .pantalla-lista), nunca tapada por ella. En escritorio se queda en
   el flujo normal — ahí no hace falta, la pantalla entera es visible. */
@media (max-width: 899px) {
  .hero-btn {
    position: fixed; z-index: 12; width: auto;
    left: var(--space-4); right: var(--space-4);
    bottom: calc(78px + var(--space-3) + env(safe-area-inset-bottom));
  }
  .pantalla-home { padding-bottom: 156px; }
}

.seccion-tit {
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .02em;
  color: var(--color-texto-suave); font-weight: 500; margin: 0 0 var(--space-3);
}

/* --- Hub "Añadir datos": rejilla de tarjetas de importación --- */
.hub-seccion { margin-top: var(--space-5); }
.hub-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}
.hub-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1);
  text-align: left; background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.hub-card-ico {
  display: inline-flex; margin-bottom: var(--space-2); color: var(--color-acento);
}
.hub-card-ico .icono { width: 24px; height: 24px; }
.hub-card-tit { font-size: var(--fs-body-lg); font-weight: 600; color: var(--color-tinta); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.hub-card-sub { font-size: var(--fs-caption); color: var(--color-texto-suave); }
@media (hover: hover) and (pointer: fine) {
  .hub-card:hover { border-color: var(--color-borde-fuerte); box-shadow: var(--shadow-md); }
}
.hub-card:active { background: var(--color-superficie-2); }
/* aparcadas: atenuadas, no clicables */
.hub-card.proximo { cursor: default; box-shadow: none; background: var(--color-superficie-2); }
.hub-card.proximo .hub-card-ico { color: var(--color-texto-tenue); }
.hub-card.proximo .hub-card-tit { color: var(--color-texto-suave); }

/* --- Pantalla "Próximamente" de un módulo sin backend ---
   Explica qué hará y qué dato hace falta. Deliberadamente NO tiene formulario
   ni zona de subida: nada que se pueda confundir con algo que ya funciona. */
.prox-cuerpo { max-width: 640px; }
.prox-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--radius-md);
  background: var(--color-superficie-3); color: var(--color-texto-suave);
  margin-bottom: var(--space-3);
}
.prox-ico .icono { width: 24px; height: 24px; }
.prox-cuerpo .asesor-h1 { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.prox-que {
  font-size: var(--fs-body-lg); line-height: 1.6; color: var(--color-texto-suave);
  margin: 0 0 var(--space-5);
}
.prox-lista { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.prox-lista li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--fs-body); line-height: 1.5; }
.prox-bullet {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: var(--radius-pill);
  background: var(--color-superficie-3); color: var(--color-texto-suave);
  font-size: var(--fs-micro); font-weight: 600; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
}

/* "Continúa donde lo dejaste": lista compacta, máx 3. */
.continuar-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.continuar-fila {
  display: flex; align-items: center; gap: var(--space-4); background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-sm); cursor: pointer;
}
.continuar-fila:active { background: var(--color-superficie-2); }
.continuar-fila:focus-visible { outline: 2px solid var(--color-acento); outline-offset: -2px; }
.continuar-pct {
  flex-shrink: 0; min-width: 44px; text-align: center; font-size: var(--fs-micro); font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill);
  background: var(--color-superficie-3); color: var(--color-texto-suave);
}
.continuar-pct.completo { background: var(--color-verde-bg); color: var(--color-verde); }
.continuar-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.continuar-prov { font-weight: 600; font-size: var(--fs-body-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.continuar-sub { font-size: var(--fs-caption); color: var(--color-texto-suave); }
.continuar-euro { font-size: var(--fs-caption); color: var(--color-rojo); font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.continuar-fila .chevron { flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) {
  .continuar-fila:hover { background: var(--color-superficie-2); border-color: var(--color-borde-fuerte); }
}

/* ======================= LOGIN (grado financiero) ======================= */
.login-pantalla { min-height: 100%; display: grid; grid-template-columns: 1fr 1fr; }

/* panel de marca (izquierda): navy con profundidad, propuesta de valor, sello */
.login-marca-panel {
  /* degradado navy + resplandor verde MUY sutil (profundidad, no ruido) */
  background:
    radial-gradient(115% 75% at 12% -5%, rgba(22, 163, 74, .13), transparent 55%),
    linear-gradient(162deg, #0f172a 0%, #0b1120 100%);
  color: #fff; min-height: 100vh;
  padding: var(--space-7) var(--space-6); display: flex; flex-direction: column;
  justify-content: space-between; gap: var(--space-6);
}
.login-marca-top { display: flex; align-items: center; gap: var(--space-3); font-weight: 700; font-size: var(--fs-body-lg); letter-spacing: -.01em; }
.login-marca-logo { height: 34px; width: 34px; border-radius: 8px; display: block; }
.login-marca-mid { max-width: 460px; }
.login-marca-eyebrow {
  display: inline-block; font-size: var(--fs-label); text-transform: uppercase;
  letter-spacing: .12em; font-weight: 600; color: #4ade80; margin-bottom: var(--space-4);
}
.login-marca-mid h2 { margin: 0 0 var(--space-4); font-size: var(--fs-hero); font-weight: 700; letter-spacing: -.025em; line-height: 1.08; }
.login-marca-mid p { margin: 0; font-size: var(--fs-body-lg); line-height: 1.6; color: #cbd5e1; max-width: 440px; }
.login-marca-lista { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.login-marca-lista li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-caption); color: #e2e8f0; }
.login-marca-lista li .icono-sm { color: #4ade80; flex-shrink: 0; }
/* líneas de roadmap: atenuadas + etiqueta gris, para no prometer lo que aún no hay */
.login-marca-lista li.proximo { color: #94a3b8; }
.login-marca-lista li.proximo .icono-sm { color: #475569; }
.badge-proximo {
  margin-left: var(--space-2); font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: #94a3b8; background: rgba(148, 163, 184, .14);
  border: 1px solid rgba(148, 163, 184, .22); padding: 2px var(--space-2);
  border-radius: var(--radius-pill); white-space: nowrap;
}
.login-marca-bot { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-caption); color: #94a3b8; }
.login-marca-bot .icono-sm { color: #64748b; }

/* panel de formulario (derecha) */
.login-form-panel {
  background: var(--color-superficie-2); min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--space-6);
}
.login-form { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: var(--space-4); }
.login-form-cab h1 { margin: 0; font-size: var(--fs-display); font-weight: 700; letter-spacing: -.02em; }
.login-form-cab .sub { margin: var(--space-1) 0 0; color: var(--color-texto-suave); font-size: var(--fs-body); }

.campo { display: flex; flex-direction: column; gap: var(--space-2); }
.campo-lbl { font-size: var(--fs-caption); font-weight: 600; color: var(--color-tinta); }
.campo-lbl-fila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.link-mini { background: none; border: 0; padding: 0; color: var(--color-texto-suave); font-size: var(--fs-caption); font-weight: 600; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .link-mini:hover { color: var(--color-tinta); text-decoration: underline; } }

.campo input {
  width: 100%; padding: 12px var(--space-4); border: 1px solid var(--color-borde); border-radius: var(--radius-sm);
  font-size: var(--fs-body); background: var(--color-superficie); color: var(--color-tinta);
  transition: border-color var(--duracion) var(--easing);
}
.campo input:focus { outline: 2px solid var(--color-acento); outline-offset: 0; border-color: var(--color-acento); }
.campo-pass { position: relative; display: flex; align-items: center; }
.campo-pass input { flex: 1; padding-right: 46px; }
.pass-toggle {
  position: absolute; right: 0; top: 0; bottom: 0; min-width: 44px; background: none; border: 0; cursor: pointer;
  color: var(--color-texto-tenue); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm);
}
.pass-toggle:hover { color: var(--color-tinta); }
.campo-aviso { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--color-ambar); font-weight: 500; }
.campo-req { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--color-texto-suave); }
.campo-req.ok { color: var(--color-verde); }

.login-form .primario { margin-top: var(--space-1); }
.login-error {
  display: flex; align-items: center; gap: var(--space-2); margin: 0;
  background: var(--color-rojo-bg); border: 1px solid var(--color-rojo-borde-suave); color: var(--color-rojo-texto);
  padding: var(--space-3); border-radius: var(--radius-sm); font-size: var(--fs-caption); font-weight: 500;
}
.login-pie { margin: var(--space-5) 0 0; max-width: 380px; text-align: center; font-size: var(--fs-caption); color: var(--color-texto-suave); }
/* separador sobre el "Crear cuenta"; junta el pie de soporte que va justo debajo */
.login-pie-registro { border-top: 1px solid var(--color-borde); padding-top: var(--space-4); }
.login-pie-registro + .login-pie { margin-top: var(--space-3); }

/* panel "¿olvidaste tu contraseña?" */
.login-modal { position: fixed; inset: 0; z-index: 30; background: rgba(15,23,42,.45); display: grid; place-items: center; padding: var(--space-4); }
.login-modal-caja {
  position: relative; background: var(--color-superficie); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: var(--space-6); max-width: 440px; width: 100%; text-align: center;
  display: flex; flex-direction: column; gap: var(--space-3);
}
.login-modal-icono { width: 56px; height: 56px; border-radius: 50%; background: var(--color-superficie-3); color: var(--color-tinta); display: grid; place-items: center; margin: 0 auto var(--space-1); }
.login-modal-caja h2 { margin: 0; font-size: var(--fs-section); font-weight: 600; }
.login-modal-caja p { margin: 0; font-size: var(--fs-body); color: var(--color-texto-suave); line-height: 1.5; }
.login-modal-caja .primario { margin-top: var(--space-2); }

/* móvil: una sola columna; el panel de marca se vuelve una franja superior */
@media (max-width: 899px) {
  .login-pantalla { grid-template-columns: 1fr; }
  .login-marca-panel { min-height: auto; padding: var(--space-5); gap: var(--space-4); }
  .login-marca-mid { display: none; }
  .login-marca-bot { display: none; }
  .login-form-panel { min-height: auto; padding: var(--space-5) var(--space-4) var(--space-6); justify-content: flex-start; }
  .login-form { margin-top: var(--space-5); }
}

/* --- Borrar documento -----------------------------------------------------
   Accion destructiva: se aparta del flujo (icono tenue en la fila, rojo solo
   al confirmar) para que nadie la pulse de camino a abrir el documento. */
.icono-accion {
  background: none; border: 0; min-width: 44px; min-height: 44px; border-radius: var(--radius-sm);
  color: var(--color-texto-tenue); cursor: pointer; line-height: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 150ms ease, background 150ms ease;
}
@media (hover: hover) {
  .icono-accion:hover { color: var(--color-rojo); background: var(--color-rojo-bg); }
}
.icono-accion:active { transform: scale(.94); }
.icono-accion:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 2px; }

.dialogo {
  position: fixed; z-index: 60; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(30rem, calc(100vw - 2 * var(--space-4)));
  background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: var(--space-6); display: grid; gap: var(--space-3);
}
.dialogo h3 { margin: 0; font-size: 1.1rem; }
.dialogo p { margin: 0; color: var(--color-texto-suave); }
.dialogo-aviso {
  background: var(--color-rojo-bg); border: 1px solid var(--color-rojo-borde-suave);
  color: var(--color-rojo-texto); border-radius: var(--radius-sm); padding: var(--space-3);
}
.barra-progreso {
  height: 6px; border-radius: 999px; background: var(--color-borde); overflow: hidden;
}
.barra-progreso-relleno {
  height: 100%; background: var(--color-acento); transition: width 200ms ease;
}
.peligro {
  background: var(--color-rojo); color: #fff; border: 1px solid var(--color-rojo);
  border-radius: var(--radius-sm); padding: var(--space-4); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
}
.peligro:disabled { opacity: .6; }
.peligro:active:not(:disabled) { transform: scale(.98); }

/* Accion secundaria dentro de una fila de documento: visible pero sin competir
   con la fila entera, que es lo que se pulsa para abrirlo. Mismo tratamiento
   neutro que .secundario (ESTRUCTURA.md §5): en una lista puede haber muchas
   a la vez, y el verde repetido en cada fila es justo lo que "usado con
   avaricia" prohíbe — aquí es donde más se hubiera notado. */
.pill-accion {
  background: var(--color-superficie); color: var(--color-tinta);
  border: 1px solid var(--color-borde); border-radius: 999px;
  padding: var(--space-2) var(--space-3); font-size: .82rem; font-weight: 600;
  white-space: nowrap; cursor: pointer; transition: background 150ms ease;
}
@media (hover: hover) { .pill-accion:hover:not(:disabled) { background: var(--color-superficie-3); border-color: var(--color-borde-fuerte); } }
.pill-accion:disabled { color: var(--color-texto-tenue); border-color: var(--color-borde); }
.pill-accion:active:not(:disabled) { transform: scale(.97); }
.pill-accion:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 2px; }

/* Cada referencia en conflicto en su propia línea: dos avisos seguidos en un
   párrafo corrido se leen como uno solo y no se sabe de qué línea habla cada
   cual. */
.bloque-conflicto { display: block; margin-top: 4px; }