/* ============================================================
   THEME LINEAR — overlay sobre style.css (no lo modifica).
   MODO OSCURO estilo Linear (eleccion de Ibon, 2026-06-02).
   Se carga por defecto en la bandeja; /?theme=off vuelve al diseno anterior.
   Tokens de color medidos del DOM real de linear.app. CSS estrictamente
   cosmetico: no toca ningun id/clase/handler que use el JS.
   Alcance: BANDEJA (index.html).
   ============================================================ */

/* ---- 1) Tokens en oscuro (re-asigna VALORES de variables ya existentes) ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* CLARO estilo Linear = DEFECTO (mejor legibilidad con luz/sol, evidencia WCAG).
   Contraste de texto verificado AA sobre #FFFFFF/#FBFBFC. */
:root {
  --bg:#FBFBFC; --bg-white:#FFFFFF; --bg-subtle:#EFF1F5;
  --border:rgba(12,16,24,0.12); --border-light:rgba(12,16,24,0.07);
  --text:#15171C; --text-secondary:#3C414B; --text-muted:#586070;
  --accent:#5E6AD2; --accent-light:#EEF0FB; --accent-hover:#4F5ABF;
  --green:#18803A; --green-bg:#E8FAEF; --green-border:rgba(31,143,59,0.30);
  --red:#C42B43;  --red-bg:#FCECEE;  --red-border:rgba(196,43,67,0.28);
  --orange:#995B12; --orange-bg:#FBF3E5;
  --purple:#5E6AD2; --purple-bg:#EEF0FB;
  --r:10px; --r-sm:6px;
  /* Eje de layout compartido (cabecera + contenido al MISMO ancho/eje).
     --content-max=1280px: margen lateral mas generoso ("aire" tipo Linear, menos pegado al borde
     de la pantalla — pedido por Ibon 2026-06-26). La tabla densa ya NO se ahoga porque tiene scroll
     horizontal propio (las columnas que no caben se desplazan dentro de la tabla). */
  --content-max:1280px; --content-pad:32px;
  --shadow:0 1px 2px rgba(16,24,40,.06);
  --shadow-md:0 4px 12px rgba(16,24,40,.08);
  --shadow-lg:0 16px 40px rgba(16,24,40,.14);
  --sidebar-bg:#F7F8F9; --sidebar-text:#586070; --sidebar-text-active:#15171C;
  --sidebar-hover:rgba(12,16,24,0.05); --sidebar-active-bg:rgba(94,106,210,0.12);
  --hairline:rgba(12,16,24,0.08); --topedge:rgba(255,255,255,0.9);
  /* estructurales que cambian por modo */
  --nav-bg:rgba(251,251,252,0.92); --hover:rgba(12,16,24,0.045);
  --panel-bg:#FFFFFF; --panel-shadow:0 10px 30px rgba(16,24,40,0.14);
  /* alias de tokens 'fantasma' que otras paginas usan como fallback */
  --card-bg:var(--bg-white); --bg-elevated:var(--bg-white); --border-color:var(--border); --text-primary:var(--text); --bg-hover:var(--bg-subtle);
}
/* Modo noche RETIRADO (2026-06-25): solo redefinía la paleta del CSS antiguo, no el
   design-system nuevo (tokens/system/bandeja en :root solo-claro) → render roto. Tema claro
   único. El :root de arriba es la fuente. (Se mantiene ?theme=off, que es otra cosa.) */

/* fondo y texto base garantizados */
body { background:var(--bg); color:var(--text); }

/* ---- 2) Sidebar: logo/avatar indigo (adios degradado morado), bordes por token ---- */
.sidebar        { border-right:1px solid var(--border); }
.sidebar-header { border-bottom:1px solid var(--border); }
.sidebar-footer { border-top:1px solid var(--border); }
.sidebar-logo, .sidebar-avatar { background: var(--accent); }

/* ---- 3) Separadores sutiles (lo que pidio: que no sea "todo un bloque") ---- */
.page-header        { border-bottom:1px solid var(--hairline); padding-bottom:16px; }
.filters-bar        { border-bottom:1px solid var(--border-light); }
@media (min-width:641px){ .filters-bar { padding-bottom:14px; } }
.bandeja-summary-row{ border-bottom:1px solid var(--hairline); padding-bottom:12px; }
.invoice-table th   { border-bottom:1px solid var(--border); }
.invoice-table-wrap { box-shadow: var(--shadow), inset 0 1px 0 var(--topedge); }

/* ---- 4) De-morado de superficies visibles -> neutro/indigo ---- */
.inv-row:hover td            { background: var(--bg-subtle); }
.inv-row:active td           { background: var(--accent-light); }
.inv-row.oracle-only         { background: transparent; }
.inv-row.oracle-only:hover td{ background: var(--bg-subtle); }
.filter-input:focus          { box-shadow:0 0 0 3px rgba(94,106,210,.20); }
.dropzone:hover, .dropzone.active { box-shadow:0 0 0 4px rgba(94,106,210,.16); }
.origen-tag.origen-si        { background:rgba(94,106,210,.16); color:var(--accent); border-color:rgba(94,106,210,.30); }
.inline-edit-input:focus     { box-shadow:0 0 0 2px rgba(94,106,210,.30); }

/* tooltip de empresa: superficie elevada con borde para destacar sobre oscuro */
.empresa-badge .empresa-tooltip        { background:#2C2F3A; color:#fff; border:1px solid var(--border-light); }
.empresa-badge .empresa-tooltip::after { border-top-color:#2C2F3A; }

/* cifras tabulares en importes */
.inv-row td:nth-child(5) { font-variant-numeric: tabular-nums; }

/* ============================================================
   5) Oscurecer superficies CLARAS hardcoded de style.css
   (inventario mapeado selector-a-selector; solo color/fondo/borde).
   ============================================================ */

/* ── Modal batch de volcado/confirmacion ── */
.batch-modal { background: var(--bg-white); }
.batch-modal-head { border-bottom-color: var(--border); }
.batch-modal-close:hover { background: var(--hover); }
.batch-modal-body th { border-bottom-color: var(--border); }
.batch-modal-body td { border-bottom-color: var(--border); }
.batch-modal-total { border-top-color: var(--border); }
.batch-progress-bar { background: var(--hover); }
.batch-modal-actions { border-top-color: var(--border); }

/* ── Banners del detalle (sin IBAN) ── */
.noiban-banner { background: var(--bg-subtle); }

/* ── Slideover / panel de alta de metadatos ── */
.slideover { background: var(--bg-white); }
.slideover-head { border-bottom-color: var(--border); }
.slideover-close:hover { background: var(--hover); }
.slideover-input { border-color: var(--border); }
.slideover-check { background: var(--orange-bg); }
.slideover-actions { border-top-color: var(--border); }

/* ── Tech details (colapsable del detalle) ── */
.tech-details { border-color: var(--border); }
.tech-summary { background: var(--bg-subtle); }
.tech-summary:hover { background: var(--hover); }
.tech-content { background: var(--bg-white); }

/* ── Boton danger-outline ── */
.btn-danger-outline:hover { background: var(--red-bg); }
.detail-actions-secondary { border-top-color: var(--border); }

/* ── Inline edit (lapiz indigo + input) ── */
.btn-inline-edit { background: var(--accent-light); border-color: rgba(94,106,210,0.30); color: var(--accent); }
.dcard:hover .btn-inline-edit, .detail-edit-row:hover .btn-inline-edit { background: var(--accent-light); }

/* ── Timeline de historial de volcado ── */
.volcado-entry { background: var(--bg-subtle); }
.volcado-pill { background: var(--hover); }
.volcado-entry.failed-resolved-system { background: var(--green-bg); }
.volcado-history-quiet { background: var(--bg-subtle); }
.volcado-history-quiet > summary:hover { background: var(--hover); }
.volcado-entry.failed-retryable { background: var(--orange-bg); }
.volcado-error-detail .volcado-error { background: var(--bg-white); }

/* ── Boton sync Spyro + banners de sync ── */
.spyro-sync-btn { border-color: var(--border); }
.spyro-sync-btn:hover:not(:disabled) { background: var(--hover); }
.spyro-sync-btn[data-state="stale"] { background: var(--red-bg); }
.spyro-sync-error-banner { background: var(--red-bg); }
.pendiente-conta-error-banner { background: var(--orange-bg); }

/* ── Modal de notificaciones (campanita email) ── */
.notif-modal-body { background: var(--bg-white); }
.notif-modal-header { border-bottom-color: var(--border); }
.notif-close { background: var(--hover); }
.notif-close:hover { background: var(--hover); }
.notif-row { border-color: var(--border); background: var(--bg-subtle); }
.notif-row-actions button { border-color: var(--border); background: var(--bg-white); color: var(--text); }
.notif-row-actions button:hover { background: var(--hover); }
.notif-form-field input { border-color: var(--border); }
.notif-empty { border-color: var(--border); }

/* ============================================================
   6) Hallazgos del code-review: superficies y textos claros que el
   inventario inicial dejo sin cubrir (todas en el detalle/modales).
   ============================================================ */
/* Cajas de veredicto del detalle (LISTO / CONFIRMAR / BLOQUEADO) */
.zone-ok    { background: var(--green-bg);  border-color: var(--green-border); }
.zone-error { background: var(--red-bg);    border-color: var(--red-border); }
.zone-warn  { background: var(--orange-bg); border-color: rgba(227,167,101,0.30); }
/* Banners del detalle */
.alert-reason-banner { background: var(--orange-bg); }
.alert-reason-banner:has(.alert-reason-item.critical) { background: var(--red-bg); }
.iban-hint-banner { background: rgba(94,106,210,0.13); }
.iban-hint-title  { color: var(--accent); }
.iban-hint-body   { color: var(--text-secondary); }
.slideover-warning { background: var(--orange-bg); color: var(--orange); }
.learn-feedback   { background: rgba(94,106,210,0.13); border-color: rgba(94,106,210,0.30); color: var(--accent); }
.spyro-match-pill { background: var(--green-bg); color: var(--green); border-color: var(--green-border); }
.spyro-sync-btn[data-state="stale"]:hover:not(:disabled) { background: rgba(240,97,109,0.20); }
.volcado-entry.failed-retryable .volcado-error { background: rgba(227,167,101,0.18); }
/* dropzone: borde punteado visible sobre oscuro (escritorio) */
.dropzone { border-color: var(--border); }
/* Textos oscuros hardcoded -> claros (legibilidad en oscuro) */
.batch-modal-body, .noiban-title, .noiban-body,
.slideover-intro, .slideover-label, .slideover-check { color: var(--text-secondary); }
.notif-modal-header h2, .notif-row-email { color: var(--text); }
.notif-row-actions button, .notif-form-field > span, .notif-event-check { color: var(--text-secondary); }

/* ── Vista MOVIL (mismo breakpoint que style.css: max-width:768px) ── */
@media (max-width: 768px) {
  .m-stats { background: var(--bg-white); }
  .dropzone { background: var(--bg-white); }
  .filter-input { background: var(--bg-white); }
  .filter-input:focus { background: var(--bg-white); }
  .filter-select { background: var(--bg-white); }
  .inv-row { background: var(--bg-white); }
  .detail-panel { background: var(--bg-subtle); }
  .dcard { background: var(--bg-white); }
  .detail-actions { background: var(--bg-white); }
  .bottom-nav { background: var(--bg-white); }
}

/* ============================================================
   7) CABECERA SUPERIOR + ENTRADA estilo Linear (fidelidad al mockup).
   La barra de arriba sustituye al menu lateral (solo con el tema activo).
   Animaciones de entrada en CSS PURO (sin JS): nada se queda oculto.
   ============================================================ */
.app-layout   { display:block; }
/* contenido centrado al eje compartido; padding-top 26->18 (densidad feel-70%) */
/* OJO: NO añadir transform/filter/perspective/will-change:transform aquí ni en .app-layout — el
   cajón de ficha (.fd-drawer, position:fixed en proveedores/clientes) vive DENTRO de .main-content
   y se anclaría a este elemento en vez de al viewport, rompiendo su posición. */
.main-content { margin-left:auto; margin-right:auto; max-width:var(--content-max); padding:18px var(--content-pad) 32px; }

/* cabecera: el FONDO sigue a todo el ancho (la linea inferior cruza la pantalla,
   como Linear) pero su CONTENIDO se centra al MISMO eje que .main-content.
   max() evita padding negativo en pantallas estrechas (< content-max). */
.topnav { position:sticky; top:0; z-index:60; height:60px; display:flex; align-items:center; gap:34px;
  padding-left:max(var(--content-pad), calc((100vw - var(--content-max))/2 + var(--content-pad)));
  padding-right:max(var(--content-pad), calc((100vw - var(--content-max))/2 + var(--content-pad)));
  background:#1e1e2e; border-bottom:1px solid rgba(255,255,255,0.10); }
/* Cabecera oscura fija en ambos temas: forzar textos/iconos claros para que se lean sobre #1e1e2e */
.topnav .name { color:#F7F8F8; }
.topnav .mainnav a { color:#C3C8D4; }
.topnav .mainnav a:hover  { color:#FFFFFF; background:rgba(255,255,255,0.07); }
.topnav .mainnav a.active { color:#FFFFFF; background:rgba(255,255,255,0.12); }
.topnav .navtrigger { color:#C3C8D4; }
.topnav .navgroup:hover .navtrigger, .topnav .navtrigger.active { color:#FFFFFF; background:rgba(255,255,255,0.12); }
.topnav .who b { color:#F7F8F8; }
.topnav .who span { color:#9AA0AD; }
.topnav .iconbtn { color:#C3C8D4; }
.topnav .iconbtn:hover { color:#FFFFFF; background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.14); }
.topnav .user:hover { background:rgba(255,255,255,0.06); }
/* desenfoque solo donde se soporta; si no, fondo solido (no semitransparente) */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .topnav { backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%); }
}
.topnav .brand { display:flex; align-items:center; gap:11px; flex:0 0 auto; }
/* Marca = esfera de puntos (canvas .logo-orb) sobre tile oscuro. La rotación la hace el canvas. */
.topnav .logo  { width:34px; height:34px; border-radius:10px; display:block; overflow:hidden;
  background:radial-gradient(120% 120% at 50% 35%, #2c2e42 0%, #191a26 78%);
  box-shadow:0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.07), 0 2px 6px rgba(0,0,0,.35); }
.topnav .logo .logo-orb { width:100%; height:100%; display:block; }
/* (Limpieza 2026-06-24) El logo era un SVG con .logo-rays giratorios; ahora es un canvas
   (.logo-orb) que rota por sí mismo. Reglas/keyframes del SVG viejo eliminados. */
.topnav .stack { display:flex; flex-direction:column; justify-content:center; }
.topnav .name { font-size:15px; font-weight:600; letter-spacing:-0.02em; color:var(--text); line-height:1; }
.topnav .sub  { font-size:10px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-muted); line-height:1; margin-top:4px; }
.topnav .mainnav { display:flex; align-items:center; gap:2px; flex:1 1 auto; }
.topnav .mainnav a { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px; border-radius:8px;
  color:var(--text-muted); font-size:14px; font-weight:500; letter-spacing:-0.01em; text-decoration:none; white-space:nowrap;
  transition:color .14s ease, background .14s ease; }
.topnav .mainnav a:hover  { color:var(--text); background:var(--bg-subtle); }
.topnav .mainnav a.active { color:var(--text); background:var(--hover); }
.topnav .mainnav a.muted  { color:var(--text-muted); opacity:.55; }
.topnav .mainnav a .badge { font-size:11px; font-weight:700; line-height:1; padding:3px 6px; border-radius:999px; background:var(--accent); color:#fff; }
.topnav .mainnav a .badge:empty { display:none; }
.topnav .navactions { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.topnav .user { display:flex; align-items:center; gap:10px; padding:4px 8px 4px 4px; border-radius:999px; transition:background .14s ease; }
.topnav .user:hover { background:var(--bg-subtle); }
.topnav .avatar { width:27px; height:27px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:12px; font-weight:600; background:linear-gradient(150deg,#8B5CF6,#5E6AD2); }
.topnav .who { display:flex; flex-direction:column; line-height:1.2; }
.topnav .who b { font-size:13px; font-weight:600; color:var(--text); }
.topnav .who span { font-size:11px; color:var(--text-muted); }
.topnav .iconbtn { width:34px; height:34px; border-radius:8px; display:grid; place-items:center; color:var(--text-muted); border:1px solid transparent; transition:background .14s ease,color .14s ease,border-color .14s ease; }
.topnav .iconbtn:hover { background:var(--bg-subtle); color:var(--text); border-color:var(--border); }
.topnav .iconbtn svg { width:17px; height:17px; }

/* Cabecera de pagina: separar por AIRE, no por linea (como Linear) */
.page-header   { border-bottom:0; padding-bottom:0; margin-bottom:0; }
/* densidad feel-70% (afecta a TODAS las pantallas): titulo 32->22, line-height 1.05->1.1 */
.page-title    { font-size:22px; font-weight:560; letter-spacing:-0.022em; line-height:1.1; }
.page-subtitle { font-size:13px; color:var(--text-muted); margin-top:4px; letter-spacing:-0.01em; }
/* cadena de separaciones verticales comprimida ~30% (feel-70%): 28->18 / 26->18 / 26->16 / 18->10 */
.upload-section      { margin-top:18px; }
.filters-bar         { margin-top:18px; border-bottom:0; padding-bottom:0; }
.bandejas-wrap       { margin-top:16px; }
.bandeja-summary-row { margin-top:10px; border-bottom:0; padding-bottom:0; }
/* separar "subir facturas" de "trabajar las facturas" con un divisor fino (medido en Linear: 1px blanco 8%); padding 26->16 */
.filters-bar { border-top:1px solid var(--border); padding-top:16px; }

/* Entrada escalonada (desenfoque -> nitido), CSS puro */
/* Entrada MAS gradual (Ibon: "poco a poco" como Linear, no de golpe) */
/* SNAPPY (blur 5px, ~0.7s total): antes blur 12px + 1.34s -> la pagina se veia "lavada" >1s
   y se percibia lenta (auditoria 2026-06-25). Mantiene el escalonado "poco a poco". */
@keyframes linEnter { from { opacity:0; filter:blur(5px); transform:translateY(10px); } to { opacity:1; filter:blur(0); transform:none; } }
.topnav              { animation: linEnter .40s cubic-bezier(.16,1,.3,1) both; }
.page-header         { animation: linEnter .45s cubic-bezier(.16,1,.3,1) .05s both; }
.upload-section      { animation: linEnter .45s cubic-bezier(.16,1,.3,1) .10s both; }
.filters-bar         { animation: linEnter .45s cubic-bezier(.16,1,.3,1) .15s both; }
.bandejas-wrap       { animation: linEnter .45s cubic-bezier(.16,1,.3,1) .20s both; }
.bandeja-summary-row { animation: linEnter .45s cubic-bezier(.16,1,.3,1) .24s both; }
.invoice-table-wrap  { animation: linEnter .45s cubic-bezier(.16,1,.3,1) .28s both; }
@keyframes logopop { 0%{transform:scale(.7)} 55%{transform:scale(1.08)} 100%{transform:scale(1)} }
.topnav .logo { animation: logopop .8s cubic-bezier(.16,1,.3,1) .05s both;
  box-shadow: 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.07), 0 2px 6px rgba(0,0,0,.35);
  will-change: auto; }
@media (prefers-reduced-motion:reduce){ .topnav .logo { animation:none; will-change:auto; transform: perspective(220px) rotateY(-3deg); } }
@media (prefers-reduced-motion:reduce){
  .topnav,.page-header,.upload-section,.filters-bar,.bandejas-wrap,.bandeja-summary-row,.invoice-table-wrap,.topnav .logo { animation:none; }
}

/* ─── MOTION Phase C ─── extiende la "aparición" a las páginas de datos (.eco-main:
   económico, control-pagos, cashflow, plan-gestión, control-personal). La bandeja
   ya tiene linEnter (arriba) afinado; esta es la versión LIGERA (solo opacity+
   transform, SIN blur) por rendimiento en páginas con gráficas Chart.js.
   Patrón OPT-IN (NN/G + W3C C39): la animación SOLO existe si el usuario NO pidió
   reducir movimiento. Stagger acotado a 5 bloques: evita la cascada larga que
   retrasaría ver el dato — anti-patrón documentado en sites financieros/B2B. */
@keyframes linEnterLite { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: no-preference) {
  .eco-main > * { animation: linEnterLite .55s cubic-bezier(.16,1,.3,1) both; }
  .eco-main > *:nth-child(1) { animation-delay:.04s; }
  .eco-main > *:nth-child(2) { animation-delay:.11s; }
  .eco-main > *:nth-child(3) { animation-delay:.18s; }
  .eco-main > *:nth-child(4) { animation-delay:.25s; }
  .eco-main > *:nth-child(n+5) { animation-delay:.32s; }
}
/* Hover: las tarjetas KPI cobran vida (sombra sutil, SIN desplazamiento -> no
   implica clic falso en algo no clicable). Solo propiedades baratas (no reflow). */
.kpi-card { transition: box-shadow .16s ease, border-color .16s ease; }
/* token (no hardcode): --shadow-md tiene override en modo oscuro -> hover visible en ambos temas (hallazgo @code-reviewer M1) */
.kpi-card:hover { box-shadow: var(--shadow-md); }

/* Pantallas medias/tablet: comprimir la cabecera para que entren los 9 enlaces.
   El contenido baja al MISMO padding lateral (18px) que la cabecera -> el eje
   compartido se mantiene tambien en esta banda (769-1040px). */
@media (max-width:1040px){
  .topnav { gap:18px; padding:0 18px; }
  .topnav .mainnav a { padding:0 8px; font-size:13px; }
  .topnav .who { display:none; }
  .main-content { padding-left:18px; padding-right:18px; }
}

/* Movil: cabecera COMPACTA (logo + hamburguesa + toggle); los enlaces van al menu deslizante */
@media (max-width:768px){
  .topnav { gap:0; justify-content:space-between; padding:0 14px; }
  .topnav .mainnav { display:none; }
  .topnav .user .who { display:none; }
  .main-content { padding:14px 14px 92px; max-width:none; }
}

/* ============================================================
   8) Cabecera agrupada (desplegables, valores medidos de Linear)
   + jerarquia tipografica de la tabla + hover de fila fiel (+2% blanco)
   ============================================================ */
.topnav .navgroup   { position:relative; display:inline-flex; align-items:center; }
.topnav .navtrigger { display:inline-flex; align-items:center; gap:5px; height:34px; padding:0 12px; border:0;
  background:transparent; color:var(--text-muted); font:inherit; font-size:14px; font-weight:500; letter-spacing:-0.01em;
  border-radius:8px; cursor:pointer; transition:color .14s ease, background .14s ease; }
.topnav .navtrigger .chev { width:13px; height:13px; opacity:.7; transition:transform .18s ease; }
.topnav .navgroup:hover .navtrigger { color:var(--text); background:var(--hover); }
.topnav .navtrigger.active { color:var(--text); background:var(--hover); }  /* grupo de la pagina actual */
.topnav .navgroup:hover .chev       { transform:rotate(180deg); }
.topnav .navpanel { position:absolute; top:calc(100% + 8px); left:0; min-width:212px; padding:6px; z-index:70;
  background:var(--panel-bg); border:1px solid var(--border); border-radius:12px; box-shadow:var(--panel-shadow);
  display:flex; flex-direction:column; gap:1px;
  opacity:0; visibility:hidden; transform:scale(.97) translateY(-6px); transform-origin:top left;
  transition:opacity .18s cubic-bezier(.455,.03,.515,.955), transform .18s cubic-bezier(.455,.03,.515,.955), visibility .18s; }
.topnav .navpanel::before { content:""; position:absolute; top:-10px; left:0; right:0; height:10px; } /* puente de hover trigger->panel */
.topnav .navgroup:hover .navpanel { opacity:1; visibility:visible; transform:none; }
.topnav .navpanel a { display:block; padding:8px 12px; border-radius:8px; color:var(--text-secondary);
  font-size:13.5px; font-weight:500; text-decoration:none; white-space:nowrap; transition:background .12s ease, color .12s ease; }
.topnav .navpanel a:hover { background:var(--hover); color:var(--text); }
.topnav .navpanel a.active { background:var(--hover); color:var(--text); }  /* enlace de la pagina actual */

/* jerarquia: el dato clave en claro, lo secundario en gris (Linear reserva el blanco) */
.invoice-table td.col-date,
.invoice-table td.col-time,
.invoice-table td.col-invoice-num { color: var(--text-muted); }
.inv-row td strong { color: var(--text); font-weight:600; }
/* hover de fila al valor medido en Linear (+2% blanco, un susurro) */
.inv-row:hover td { background: var(--hover); }

/* ============================================================
   9) CONTRASTE LEGIBLE (auditoria WCAG). El tema reasigno fondos
   pero dejo textos oscuros-sobre-oscuro. Subimos a >=4.5:1 (ratios
   recalculados). Foco: panel de detalle + caja roja + movil.
   ============================================================ */
/* P0 — titular de decision (la INSTRUCCION de trabajo): 1.3:1 -> ~15:1 */
.veredicto-msg { color: var(--text); }
.veredicto-icon.error { color: var(--red); }     /* #e53e3e 3.97 -> #F0616D 5.18 */
.veredicto-icon.ok    { color: var(--green); }
.veredicto-icon.warn  { color: var(--orange); }
/* P1 — boton deshabilitado (era isla blanca #e2e8f0 con texto #a0aec0 = 1.83) */
.btn-ghost, .btn-ghost:hover { background: var(--bg-subtle); color: var(--text-muted); border-color: var(--border); }
/* P1 — banner IBAN (ningun azul llega a AA a 12px -> gris claro) */
.iban-hint-title, .iban-hint-label { color: var(--text-secondary); }
.iban-hint-note { color: var(--text-muted); }
.iban-hint-body { color: var(--text-secondary); }
/* P1 — datos de tarea (NIF, "Como se contabilizara", motivo del aviso) */
.nif-display       { color: var(--text-secondary); }
.tech-summary      { color: var(--text-secondary); }
.alert-chip-reason { color: var(--text-muted); }
/* P2 — verdes / warning de seccion */
.mapped-desc         { color: var(--green); }
.spyro-match-label   { color: var(--green); }
.val-section-warning { color: var(--orange); }
.learn-feedback      { color: var(--text-secondary); }   /* el accent no llegaba a AA */

/* P0 — MOVIL: las tarjetas volvian a fondo blanco con texto blanco (1.06:1, invisible) */
@media (max-width:768px){
  .dcard { background: var(--bg-subtle); border-color: transparent; }
}

/* (Toggle de tema retirado 2026-06-25: modo noche eliminado.) */

/* ============================================================
   11) TIPOGRAFIA estilo Linear: 3 pesos (400 cuerpo / 510 etiquetas / 590 titulos),
   enfasis por COLOR (no negrita), cifras tabulares. Inter variable (import arriba).
   ============================================================ */
body { letter-spacing:-0.011em; }
.page-title                         { font-weight:590; letter-spacing:-0.022em; }
.detail-header h2, .detail-panel h2 { font-weight:590; letter-spacing:-0.012em; }
.detail-section-title               { font-weight:590; letter-spacing:.04em; }
.invoice-table th                   { font-weight:590; letter-spacing:.02em; }
.invoice-table td                   { letter-spacing:-0.01em; }
.inv-row td strong                  { font-weight:590; }
/* veredicto: la frase en gris legible, la palabra clave en blanco (enfasis por color, como Linear) */
.veredicto-msg        { color:var(--text-secondary); font-weight:400; }
.veredicto-msg strong { color:var(--text); font-weight:590; }
.dcard-value          { font-weight:590; letter-spacing:-0.013em; }
.dcard-label          { font-weight:510; letter-spacing:.02em; }
.detail-total-summary strong { font-weight:590; }
.dt-item span:last-child     { font-weight:510; }
.status-label, .empresa-badge, .conf-pill, .alert-chip-label { font-weight:590; letter-spacing:.02em; }
/* cifras tabulares en importes/numeros -> alinean en columna */
.col-total, .col-total strong, .dt-total, .dcard-value, .detail-total-summary strong,
.dt-item span:last-child, .text-mono, .col-invoice-num, .conf-pill, .inv-row td:nth-child(5) {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   12) NAVEGACION MOVIL (P0): cabecera compacta + hamburguesa que abre
   un panel con TODAS las secciones. + accesibilidad de teclado en los
   desplegables de escritorio (:focus-within).
   ============================================================ */
.topnav-burger { display:none; width:34px; height:34px; border-radius:8px; align-items:center; justify-content:center;
  color:var(--text-muted); background:transparent; border:1px solid transparent; cursor:pointer; }
.topnav-burger svg { width:20px; height:20px; }

.mobile-nav-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:600; opacity:0; transition:opacity .25s ease; }
.mobile-nav-backdrop.open { opacity:1; }
.mobile-nav { position:fixed; top:0; left:0; bottom:0; width:84%; max-width:300px; z-index:601;
  background:var(--bg-white); border-right:1px solid var(--border); box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; padding:16px 12px; overflow-y:auto;
  transform:translateX(-100%); transition:transform .26s cubic-bezier(.16,1,.3,1); }
.mobile-nav.open { transform:none; }
.mobile-nav-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.mobile-nav-title { font-size:14px; font-weight:590; color:var(--text); letter-spacing:-0.01em; }
.mobile-nav-links { display:flex; flex-direction:column; gap:1px; flex:1; }
.mnav-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); padding:12px 10px 4px; }
.mobile-nav-links a { display:block; padding:10px; border-radius:8px; color:var(--text-secondary); font-size:14px; font-weight:510; text-decoration:none; }
.mobile-nav-links a:hover, .mobile-nav-links a.active { background:var(--hover); color:var(--text); }
.mobile-nav-logout { display:block; padding:12px 10px; margin-top:8px; border-top:1px solid var(--border); color:var(--text-muted); font-size:13px; text-decoration:none; }
.mobile-nav-logout:hover { color:var(--text); }

/* accesibilidad: abrir los desplegables de escritorio tambien con teclado (Tab) */
.topnav .navgroup:focus-within .navpanel  { opacity:1; visibility:visible; transform:none; }
.topnav .navgroup:focus-within .navtrigger { color:var(--text); background:var(--hover); }

/* mostrar la hamburguesa en movil — AL FINAL para ganar al display:none base por orden de cascada */
@media (max-width:768px){ .topnav-burger { display:grid; } }

/* ---- 13) Agente: cabecera de Amaia = degradado INDIGO de marca (no una caja azul
   oscura suelta en modo claro); el texto claro contrasta en ambos temas ---- */
.amaia-chat-header { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%); }

/* ---- 14) Familia económico (.eco-main): recolorea componentes propios de esas
   pantallas (narrativa IA, KPIs YoY, severidades, drill-modal, gauges, presets…).
   MOVIDO aquí desde economico.css (que carga SIEMPRE) para que /?theme=off restaure
   de verdad el diseño anterior en /economico, /control-pagos, /cashflow,
   /control-personal y /plan-gestion (hallazgo Codex P2). theme-linear.css carga
   DESPUÉS de economico.css en esas plantillas, así que la cascada se mantiene. ---- */
body:has(.eco-main) .ai-narrative-box { background:var(--bg-subtle); border:1px solid var(--accent-light); }
body:has(.eco-main) .ai-body strong { background:var(--orange-bg); color:var(--text); }
body:has(.eco-main) .kpi-yoy.up   { background:var(--green-bg); color:var(--green); }
body:has(.eco-main) .kpi-yoy.down { background:var(--red-bg);   color:var(--red);   }
body:has(.eco-main) .mor-tipo.cobro { background:var(--accent-light); color:var(--text-secondary); }
body:has(.eco-main) .mor-tipo.pago  { background:var(--orange-bg);    color:var(--orange);          }
body:has(.eco-main) .anom-sev.critical { background:var(--red-bg);      color:var(--red);    }
body:has(.eco-main) .anom-sev.high     { background:var(--orange-bg);   color:var(--orange); }
body:has(.eco-main) .anom-sev.medium   { background:var(--orange-bg);   color:var(--orange); }
body:has(.eco-main) .anom-sev.low      { background:var(--accent-light); color:var(--text-secondary); }
body:has(.eco-main) .drill-modal-body th { background:var(--bg-subtle); }
body:has(.eco-main) .drill-modal-ft      { background:var(--bg-subtle); }
body:has(.eco-main) .drill-badge.pendiente { background:var(--orange-bg); color:var(--orange); }
body:has(.eco-main) .drill-badge.saldada   { background:var(--green-bg);  color:var(--green);  }
body:has(.eco-main) .sr-gauge { background:var(--bg-subtle); }
body:has(.eco-main) .sr-gauge-badge.sano      { background:var(--green-bg);  color:var(--green);  }
body:has(.eco-main) .sr-gauge-badge.moderado  { background:var(--orange-bg); color:var(--orange); }
body:has(.eco-main) .sr-gauge-badge.alto      { background:var(--red-bg);    color:var(--red);    }
body:has(.eco-main) .sr-gauge-badge.sin_datos { background:var(--bg-subtle); color:var(--text-muted); }
body:has(.eco-main) .sr-badge.critico { background:var(--red-bg);    color:var(--red);    }
body:has(.eco-main) .sr-badge.alto    { background:var(--orange-bg); color:var(--orange); }
body:has(.eco-main) .sr-badge.medio   { background:var(--orange-bg); color:var(--orange); }
body:has(.eco-main) .sr-badge.bajo    { background:var(--green-bg);  color:var(--green);  }
body:has(.eco-main) .chat-preset        { background:var(--bg-subtle); }
body:has(.eco-main) .chat-msg.assistant { background:var(--bg-subtle); }
body:has(.eco-main) .drill-modal { background:rgba(0,0,0,.62); }

/* ---- 15) Botón de cerrar del cajón móvil: .iconbtn vive FUERA de .topnav, así que
   las reglas `.topnav .iconbtn` no le aplican y su SVG quedaba en 0×0 (invisible).
   Darle tamaño propio para que el cierre se vea y sea usable (hallazgo Codex P3). ---- */
.mobile-nav .iconbtn { width:34px; height:34px; border-radius:8px; display:grid; place-items:center; color:var(--text-muted); border:1px solid transparent; background:none; cursor:pointer; }
.mobile-nav .iconbtn:hover { background:var(--hover); color:var(--text); }
.mobile-nav .iconbtn svg { width:18px; height:18px; }