/* ÚNICO sitio del proyecto con hexadecimales y escalas.
   Los de marca están aislados arriba: sustituir la paleta de EMETE es editar
   ese bloque y nada más. */
:root {
  /* --- marca ---
     Sustituir la identidad de EMETE es editar estos seis valores y nada más.
     `--brand-fuerte` y `--brand-suave` existen para que la marca pueda pintar
     superficies enteras sin que el texto encima deje de leerse. */
  --brand: #291B7E;          /* azul marino EMETE: títulos, enlaces, marca */
  --brand-fuerte: #1B1156;   /* el marino, más hondo: superficies de marca */
  --brand-medio: #4433A8;    /* intermedio, para series de gráfico */
  --brand-suave: #F5F4FB;    /* el lila claro de la guía: zonas de descanso */
  --brand-contraste: #FFFFFF;
  --acento: #B92771;         /* magenta EMETE: filetes, foco, estado activo */

  /* --- superficie --- */
  --bg: #F5F4FB;             /* el fondo claro de la guía, no un gris cualquiera */
  --surface: #FFFFFF;
  --surface-2: #EDEBF7;      /* el lila, un punto más marcado: cabeceras y filas */
  --border: #D9D5EC;
  --text: #333338;           /* la guía pide #444444; se aprieta para las tablas */
  --text-muted: #6B6B7B;
  --focus: #B92771;          /* el foco en magenta: se ve sobre marino y sobre lila */

  /* --- semántica financiera. El color NUNCA va solo: siempre con icono y signo. --- */
  --positive: #0E7A4B;
  --negative: #B3261E;
  --warning: #A15C00;
  --intragrupo: #6B3FA0;

  /* --- densidad --- */
  --fila: 34px;
  --pad-tarjeta: 12px;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    /* En oscuro los dos colores de marca se aclaran hasta que se leen sobre
       fondo oscuro. El marino puro (#291B7E) sobre negro no se distingue de
       negro, y el magenta puro se queda corto de contraste para texto. */
    --brand: #A99AF0;
    --brand-fuerte: #171233;
    --brand-medio: #7B67D6;
    --brand-suave: #1E1940;
    --acento: #F06BA8;
    --bg: #14111F;
    --surface: #1C1830;
    --surface-2: #262040;
    --border: #383150;
    --text: #EDEBF7;
    --text-muted: #A69FC0;
    --focus: #F06BA8;
    --positive: #35C588;
    --negative: #FF7A70;
    --warning: #F0A93B;
    --intragrupo: #B18AE0;
  }
}

* { box-sizing: border-box; }
/* Montserrat, la tipografía de EMETE. Autoalojada: ninguna plantilla ni hoja de
   estilo referencia un CDN, y hay una puerta que lo comprueba en cada despliegue.
   Es variable, así que un solo fichero cubre de regular a bold. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/montserrat-latin.c154477b9aff.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext.f143fb4877cf.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* Cifras que no bailan al actualizar. */
/* `white-space: nowrap` no es cosmética: sin ella «11.600,00 €» se parte y el
   símbolo cae solo a la línea de abajo, que deja la columna ilegible y duplica
   el alto de cada fila. Una cifra y su moneda son una sola cosa. */
.num, td.num, .importe {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* --- el armazón: barra lateral de 240 px y una columna de contenido --- */
.con-lateral { display: flex; min-height: 100vh; align-items: stretch; }
.columna { flex: 1 1 auto; min-width: 0; }

.lateral {
  flex: 0 0 240px; width: 240px;
  display: flex; flex-direction: column; gap: var(--e3);
  padding: var(--e3);
  background: var(--surface); border-right: 1px solid var(--border);
  color: var(--text);
}
.lateral .marca { color: var(--brand); text-decoration: none; }
.lateral-enlaces { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 2px; }
.lateral-enlaces a {
  display: flex; gap: var(--e2); align-items: center;
  padding: 8px var(--e2); border-radius: 4px;
  font-size: 14px; color: var(--text); text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}
.lateral-enlaces a:hover { background: var(--brand-suave); color: var(--brand); }
/* El actual no se distingue sólo por color: lleva fondo, peso y una barra. */
.lateral-enlaces a[aria-current="page"] {
  background: var(--brand-suave); color: var(--brand); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--acento);
}
.lateral-pie { margin-top: auto; font-size: 12px; color: var(--text-muted); line-height: 1.6; }
.lateral-pie a { color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .lateral-enlaces a { transition: none; } }

/* --- la marca ---
   El logotipo, a su ancho y con su proporción. Sin caja, sin recorte y sin
   estirarlo: `height: auto` es lo que impide que se deforme. */
.marca-emete { display: block; padding: var(--e2) var(--e2) var(--e1); }
.marca-emete img { display: block; width: 168px; max-width: 100%; height: auto; }
.marca-producto {
  display: block; margin-top: 3px; padding-left: 2px;
  font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--acento);
}

/* El salto al contenido: invisible hasta que se llega con el tabulador. */
.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: var(--e2); top: var(--e2); z-index: 10; padding: var(--e2);
  background: var(--surface); border: 1px solid var(--focus); }

.cabecera {
  display: flex; align-items: center; justify-content: space-between;
  height: 52px; padding: 0 var(--e4);
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.marca { color: var(--brand); font-weight: 600; text-decoration: none; }

main { padding: var(--e4); }
table { width: 100%; border-collapse: collapse; background: var(--surface); }
thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  padding: var(--e2) var(--e3); text-align: left; font-size: 13px;
}
tbody td { height: var(--fila); padding: var(--e1) var(--e3); border-bottom: 1px solid var(--border); }
tbody tr[aria-selected="true"] { outline: 2px solid var(--focus); outline-offset: -2px; }
tbody tr:hover { background: var(--surface-2); }

.negativo { color: var(--negative); }
.positivo { color: var(--positive); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.ayuda-atajos {
  margin-top: var(--e5); padding: var(--pad-tarjeta);
  background: var(--surface); border: 1px solid var(--border);
}
.ayuda-atajos kbd {
  display: inline-block; min-width: 20px; padding: 1px 5px; text-align: center;
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 3px;
  background: var(--surface-2); font-family: inherit; font-size: 12px;
}
.vacio { padding: var(--e6); text-align: center; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* --- panel --- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--e3); }
.kpi {
  background: var(--surface); border: 1px solid var(--border);
  padding: var(--pad-tarjeta); display: flex; flex-direction: column; gap: var(--e1);
}
.kpi .etiqueta { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.kpi .valor { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi .corte { font-size: 12px; color: var(--text-muted); }
.kpi.destacado { border-left: 3px solid var(--warning); }
.kpi.intragrupo .valor { color: var(--intragrupo); }

.aviso {
  display: flex; gap: var(--e2); align-items: flex-start;
  background: var(--surface); border: 1px solid var(--warning); border-left-width: 3px;
  padding: var(--pad-tarjeta); margin-bottom: var(--e4);
}
.aviso .icono { color: var(--warning); font-weight: 700; }

.sev-ALTA { color: var(--negative); font-weight: 600; }
.sev-MEDIA { color: var(--warning); }
.sev-BAJA { color: var(--text-muted); }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
h1 { font-size: 28px; margin: 0 0 var(--e2); }
h2 { font-size: 20px; margin: var(--e6) 0 var(--e3); }
.sello { font-size: 12px; color: var(--text-muted); }
.grafico { background: var(--surface); border: 1px solid var(--border); padding: var(--pad-tarjeta); }
a { color: var(--brand); }

/* --- bloques de IA: visualmente separados de las cifras, a propósito --- */
.bloque-ia {
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-left: 3px solid var(--brand);
  padding: var(--pad-tarjeta);
  margin: var(--e4) 0;
}
.ia-cabecera { font-size: 14px; margin: 0 0 var(--e2); display: flex; gap: var(--e2); align-items: center; }
.ia-etiqueta {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--brand); border: 1px solid var(--brand); padding: 1px 6px; border-radius: 2px;
}
.ia-texto { margin: 0 0 var(--e2); }
.ia-pie, .ia-aviso { font-size: 12px; color: var(--text-muted); margin: 0; }
.ia-pie code { font-size: 11px; }

.filtros { display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; margin-bottom: var(--e4); }
.filtros select, .filtros button { min-height: 32px; }
.paginacion { display: flex; gap: var(--e3); align-items: center; margin-top: var(--e3); }

/* --- pantalla de ajustes --- */
.grupo-ajustes {
  background: var(--surface); border: 1px solid var(--border);
  padding: var(--pad-tarjeta); margin: 0 0 var(--e4); max-width: 720px;
}
.grupo-ajustes legend { font-size: 14px; font-weight: 600; padding: 0 var(--e2); }
.campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--e4); }
.campo label { font-size: 13px; font-weight: 600; }
.campo input, .campo select { min-height: 34px; padding: 0 var(--e2); font: inherit;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); }
/* Una casilla no es un campo de texto: ni se estira ni se pone encima de su etiqueta. */
.campo:has(input[type="checkbox"]) { flex-direction: row; flex-wrap: wrap; align-items: center; }
.campo input[type="checkbox"] { min-height: 0; width: 16px; height: 16px; padding: 0; order: -1;
  accent-color: var(--brand); }
.campo:has(input[type="checkbox"]) label { font-weight: 400; }
.campo:has(input[type="checkbox"]) .ayuda { flex-basis: 100%; }
.campo input[type="file"] { padding: var(--e1); }
.campo input:focus, .campo select:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 1px; }
.campo .ayuda { font-size: 12px; color: var(--text-muted); }
.campo .error { font-size: 12px; color: var(--negative); }
.campo-mal input { border-color: var(--negative); }
.acciones { display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; }
.acciones button { min-height: 34px; padding: 0 var(--e3); font: inherit;
  background: var(--brand); color: var(--surface); border: 1px solid var(--brand); cursor: pointer; }
.acciones button.secundario { background: var(--surface); color: var(--brand); }
.prueba { font-size: 13px; margin: 0; }
.prueba-ok { color: var(--positive); }
.prueba-mal { color: var(--negative); }
.enlace-ajustes { margin-left: auto; font-size: 13px; }
.enlace-cabecera { font-size: 13px; }
.cabecera { display: flex; gap: var(--e3); align-items: center; }
.en-linea { display: inline; }
.en-linea button { min-height: 26px; padding: 0 var(--e2); font: inherit; font-size: 12px;
  background: var(--surface); color: var(--brand); border: 1px solid var(--border); cursor: pointer; }

/* --- selector de ámbito: qué estás mirando, grupo o sociedad --- */
/* El selector de sociedad vive dentro de la barra lateral, así que se adapta a
   ella y no al revés. `min-width: 0` es obligatorio: un elemento de un flex no
   encoge por debajo de su contenido sin eso, y los nombres de las sociedades
   son largos —«EMETE ASESORIA FISCAL Y CONTABLE, S.L. (107)»—, de modo que el
   desplegable se salía de la barra. Se ve en Mac antes que en ningún sitio
   porque su `select` nativo mide más. */
.selector-ambito { display: flex; gap: var(--e2); align-items: center; min-width: 0; }
.selector-ambito select {
  flex: 1 1 auto; width: 100%; min-width: 0; max-width: 100%;
  min-height: 30px; padding: 0 var(--e2);
  font: inherit; font-size: 13px; text-overflow: ellipsis;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
}
/* El desplegable abierto lo pinta el sistema y hereda el color del `select`:
   sin esto, en Mac salen letras blancas sobre fondo blanco. */
.selector-ambito option { color: var(--text); background: var(--surface); }
.selector-ambito select:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

/* --- páginas públicas (privacidad, condiciones): prosa, no tablero --- */
.documento { max-width: 68ch; margin: 0 auto; padding: var(--e6) var(--e4); font-size: 16px;
  line-height: 1.6; background: var(--bg); color: var(--text); }
.documento h2 { font-size: 20px; margin: var(--e6) 0 var(--e2); }
.documento ul { padding-left: var(--e4); }
.documento li { margin-bottom: var(--e2); }
.documento hr { border: 0; border-top: 1px solid var(--border); margin: var(--e6) 0 var(--e3); }
.pie { padding: var(--e4); font-size: 12px; color: var(--text-muted); }
.pie a { color: var(--text-muted); }
.plegable { margin: var(--e3) 0; font-size: 13px; }
.plegable summary { cursor: pointer; color: var(--text-muted); }

/* --- LA cifra: una manda y las demás acompañan --- */
.hero {
  display: flex; flex-wrap: wrap; gap: var(--e5); align-items: flex-end;
  justify-content: space-between;
  background: linear-gradient(135deg, var(--brand-suave), var(--surface) 70%);
  border: 1px solid var(--border); border-left: 3px solid var(--brand);
  padding: var(--e4) var(--e5); margin-bottom: var(--e3);
}
.hero .etiqueta {
  display: block; font-size: 12px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.hero .valor {
  display: block; font-size: 44px; line-height: 1.1; font-weight: 600;
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.hero-pie { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: baseline;
  margin: var(--e2) 0 0; }
.hero-serie { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }

.variacion { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.sparkline { display: block; overflow: visible; }
.sparkline-cero { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 2; }

/* El semáforo: filas cortas, mucha información por línea. */
.semaforo td, .semaforo th { white-space: nowrap; }
.semaforo .variacion { margin-left: var(--e2); font-weight: 400; }

/* Móvil: dos KPI por fila. Uno por pantalla obliga a seis scrolls para ver
   el resumen, que es justo lo contrario de un cuadro de mando. */
@media (max-width: 640px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
  .kpi .valor { font-size: 20px; }
  .hero { padding: var(--e3); }
  .hero .valor { font-size: 30px; }
  /* La cabecera es de 52 px fijos en escritorio. En móvil se envuelve en dos
     filas, y con la altura clavada se le monta encima el contenido. */
  .cabecera { flex-wrap: wrap; row-gap: var(--e2); height: auto; padding: var(--e2) var(--e3); }
  .enlace-ajustes { margin-left: 0; }
  .selector-ambito { flex: 1 1 100%; }
  main { padding: var(--e3); }
  h1 { font-size: 22px; }

  /* En móvil la barra lateral se convierte en cabecera: 240 px de ancho fijo
     dejarían 135 px para las cifras, que es no dejar nada. */
  .con-lateral { display: block; }
  .lateral {
    width: auto; flex-basis: auto;
    border-right: 0; border-bottom: 1px solid var(--border);
    gap: var(--e2);
  }
  .lateral-enlaces { flex-direction: row; flex-wrap: wrap; gap: var(--e1); }
  .lateral-enlaces a { padding: 6px var(--e2); font-size: 13px; }
  .lateral-pie { margin-top: var(--e2); }
}


/* Toda tabla ancha hace scroll dentro de su caja, nunca la página entera.
   Una tabla que empuja el ancho del documento rompe todo lo demás. */
.tabla-scroll { overflow-x: auto; }

/* Los hallazgos de la IA, uno por línea. Un párrafo de nueve líneas es la
   mancha más grande de la pantalla y la que menos se lee. */
.ia-puntos { margin: 0 0 var(--e2); padding-left: var(--e4); }
.ia-puntos li { margin-bottom: 6px; line-height: 1.5; }
.ia-puntos strong { font-variant-numeric: tabular-nums; }

/* El periodo, junto al título: se lee «qué estoy viendo» de una vez. */
.titulo-con-periodo { display: flex; flex-wrap: wrap; gap: var(--e3);
  align-items: baseline; justify-content: space-between; }
.titulo-con-periodo h1 { margin-bottom: var(--e1); }
.selector-periodo { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }
.selector-periodo select, .selector-periodo input[type="date"] {
  min-height: 30px; font: inherit; font-size: 13px; padding: 0 var(--e2);
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
}
.selector-periodo select:focus-visible, .selector-periodo input:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 1px;
}
.selector-periodo .a-medida { flex-basis: 100%; margin: 0; }

/* --- desgloses de gastos e ingresos --- */
.bloque-analisis { margin-bottom: var(--e6); }
.bloque-analisis h3 { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: baseline;
  font-size: 16px; margin: 0 0 var(--e2); }
/* La barra es apoyo: el importe y el porcentaje van escritos al lado. */
.barra { display: inline-block; width: 60px; height: 6px; margin-right: var(--e2);
  border-radius: 3px; background: var(--surface-2); vertical-align: middle; position: relative; }
.barra::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--peso);
  background: var(--brand-medio); border-radius: 3px; }

/* --- resoluciones --- */
.opcion { background: var(--surface); border: 1px solid var(--border);
  padding: var(--pad-tarjeta) var(--e4); margin-bottom: var(--e3); max-width: 760px; }
.opcion h3 { font-size: 15px; margin: 0 0 var(--e2); }
.opcion p { margin: 0 0 var(--e2); }
.aviso-inline { font-size: 13px; color: var(--warning); }
.boton { display: inline-flex; gap: 6px; align-items: center; min-height: 32px;
  padding: 0 var(--e3); background: var(--brand); color: var(--brand-contraste);
  border-radius: 3px; text-decoration: none; font-size: 13px; }
.crudo { background: var(--surface-2); border: 1px solid var(--border);
  padding: var(--e3); overflow-x: auto; font-size: 12px; max-width: 100%; }
.acciones-alerta { display: flex; gap: var(--e2); align-items: center; white-space: nowrap; }
.grafico-barras { margin-bottom: var(--e3); }

/* --- filtros de incidencias --- */
.filtros { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: flex-end;
  background: var(--surface); border: 1px solid var(--border);
  padding: var(--e3); margin-bottom: var(--e3); }
.campo-filtro { display: flex; flex-direction: column; gap: 3px; }
.campo-filtro label { font-size: 12px; color: var(--text-muted); }
.campo-filtro.en-fila { flex-direction: row; align-items: center; gap: var(--e2);
  font-size: 13px; color: var(--text); }
.campo-filtro input[type="text"], .campo-filtro input[type="search"], .campo-filtro select {
  min-height: 30px; padding: 0 var(--e2); font: inherit; font-size: 13px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 4px; }
.rango { display: flex; gap: 4px; }
.barra-lote { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center;
  background: var(--surface-2); border: 1px solid var(--border);
  padding: var(--e2) var(--e3); margin-bottom: var(--e2); font-size: 13px; }

/* --- identidad de EMETE ---------------------------------------------------
   El filete magenta del borde superior es de la guía de marca: en los
   documentos va arriba, cruzando el ancho, y sin tocar el logotipo. */
.filete-marca { height: 4px; background: var(--acento); }
.marca-documento { margin: 0 0 var(--e5); }
.marca-documento img { display: block; max-width: 260px; height: auto; }

/* --- la puerta de entrada --- */
.entrada { display: grid; grid-template-rows: auto 1fr; min-height: 100vh;
  background: var(--bg); }
.tarjeta-entrada {
  align-self: center; justify-self: center; width: min(420px, calc(100vw - 2 * var(--e4)));
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: var(--e6) var(--e5); margin: var(--e5) 0; text-align: center;
}
/* El logotipo va sobre blanco, que es la banda que pide la guía de marca. */
.entrada-logo { display: block; width: 240px; max-width: 100%; height: auto; margin: 0 auto; }
.entrada-producto { margin: 2px 0 var(--e6); font-size: 13px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--acento); font-weight: 600; }
.tarjeta-entrada h1 { font-size: 20px; margin: 0 0 var(--e4); }
.boton-entrada {
  display: block; padding: 11px var(--e4); margin-bottom: var(--e3);
  background: var(--brand); color: var(--brand-contraste);
  border-radius: 6px; font-weight: 600; text-decoration: none;
}
.boton-entrada:hover { background: var(--brand-fuerte); }
.boton-entrada:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.entrada-pie { margin: var(--e6) 0 0; font-size: 12px; color: var(--text-muted); line-height: 1.7; }

/* --- estados contables --- */
.barra-contabilidad { display: flex; flex-wrap: wrap; gap: var(--e3);
  align-items: center; justify-content: space-between; margin-bottom: var(--e3); }
.pestanas { display: flex; gap: var(--e1); margin-bottom: var(--e4);
  border-bottom: 1px solid var(--border); }
.pestanas a { padding: var(--e2) var(--e3); font-size: 14px; text-decoration: none;
  color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pestanas a:hover { color: var(--brand); }
.pestanas a[aria-current="page"] { color: var(--brand); font-weight: 600;
  border-bottom-color: var(--acento); }
.estado th[scope="row"] { text-align: left; font-weight: 400; }
.estado .nivel-1 { padding-left: var(--e3); }
.estado .linea-total th, .estado .linea-total td {
  font-weight: 700; background: var(--brand-suave); border-top: 1px solid var(--border); }
.estado summary { cursor: pointer; }
.detalle-cuentas { list-style: none; margin: var(--e1) 0 0; padding: 0 0 0 var(--e3);
  font-size: 12px; color: var(--text-muted); }
.detalle-cuentas code { font-size: 11px; }
.dos-columnas { display: grid; gap: var(--e5); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* --- pendiente de facturar entre sociedades --- */
.par-intragrupo { background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--intragrupo); padding: var(--e3) var(--e4);
  margin-bottom: var(--e4); }
.par-intragrupo h2 { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center;
  margin: 0 0 var(--e1); font-size: 16px; }
.par-intragrupo .paga { color: var(--negative); }
.par-intragrupo .cobra { color: var(--positive); }
.resumen-filtro { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: baseline;
  margin: 0 0 var(--e3); font-size: 15px; }
.cifra-filtro { font-size: 20px; font-variant-numeric: tabular-nums; color: var(--brand); }
.resumen-filtro { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: baseline;
  margin: 0 0 var(--e3); font-size: 15px; }
.cifra-filtro { font-size: 20px; font-variant-numeric: tabular-nums; color: var(--brand); }

/* --- pie de fórmulas, estilo hoja de cálculo --- */
.pie-formulas td { background: var(--surface-2); border-top: 2px solid var(--border);
  vertical-align: top; padding: var(--e2) var(--e3); }
.pie-formulas select {
  display: block; width: 100%; max-width: 150px; min-width: 0;
  padding: 2px 4px; font: inherit; font-size: 11px;
  color: var(--text-muted); background: transparent;
  border: 1px solid transparent; border-radius: 3px; cursor: pointer;
}
.pie-formulas select:hover { border-color: var(--border); background: var(--surface); }
.pie-formulas select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.pie-formulas .valor-formula { display: block; margin-top: 2px;
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--brand); }
.pie-formulas .num .valor-formula, .pie-formulas .num select { margin-left: auto; }
/* Un botón dentro de una tarjeta de opción tiene que parecer un botón: sin esto
   se leía como un párrafo más y no había forma de saber que se podía pulsar. */
button.boton { border: 0; font: inherit; font-weight: 600; cursor: pointer; }
button.boton:hover { background: var(--brand-fuerte); }
.opcion:focus-within { border-color: var(--acento); }

/* --- facturas que faltan, por proveedor --- */
.proveedor-faltante { background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--acento); padding: var(--e3) var(--e4);
  margin-bottom: var(--e4); }
.proveedor-faltante h2 { display: flex; flex-wrap: wrap; gap: var(--e2);
  align-items: baseline; margin: 0 0 var(--e1); font-size: 16px; }

/* Previsión fiscal: los dos gráficos en paralelo, uno debajo del otro cuando no
   caben.

   `.caja-grafico` tiene altura fija y no es un capricho de maquetación: con
   `maintainAspectRatio: false`, Chart.js le pide la altura al contenedor, y un
   contenedor que la saca de su contenido se la vuelve a pedir al lienzo. Dentro
   de un grid —donde el ítem estira con la fila— eso es un bucle: el gráfico
   crece un poco en cada fotograma y no para nunca. Con altura declarada y
   `position: relative` + lienzo absoluto, el lienzo ya no puede empujar a su
   contenedor y el bucle se corta. */
.graficos-fiscal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--e4);
  margin-block: var(--e4);
}
.graficos-fiscal figure {
  margin: 0;
  /* Sin esto un ítem de grid nunca se encoge por debajo de su contenido y el
     gráfico desborda la columna en pantallas estrechas. */
  min-width: 0;
  padding: var(--pad-tarjeta);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.graficos-fiscal figcaption {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: var(--e2);
}
.caja-grafico {
  position: relative;
  height: 220px;
}
.caja-grafico canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

/* El cruce de extractos, dentro de la fila de la incidencia: dice de dónde vino
   el dinero sin abrir nada. */
.cruce-extracto {
  display: block;
  margin-top: var(--e1);
  font-size: 12px;
  color: var(--intragrupo);
}

/* El mes que no cuadra se marca en la propia fila: es lo único que hay que
   mirar en una tabla donde la mayoría de los meses están bien. */
.fila-descuadrada { background: var(--surface-2); }
.fila-descuadrada th[scope="row"] { border-left: 3px solid var(--acento); }

/* Lo que se ha dejado fuera de «facturas que faltan»: visible, plegado y con su
   motivo. Nunca escondido: una cifra que baja tiene que decir por qué. */
.descartado { margin-block: var(--e3); }
.descartado h3 { font-size: 14px; margin: 0 0 var(--e1); }

/* El aviso de una pareja que no se puede comprobar. Va en la propia sección y
   no en un rincón: si no se puede afirmar, hay que verlo antes que la cifra. */
.aviso-pareja {
  font-size: 13px;
  color: var(--warning);
  margin: var(--e1) 0 var(--e2);
}

/* Tareas pendientes. Cada tarea es una tarjeta con tres partes visibles: qué es,
   por qué se pide y qué hacer. El «por qué» no es decoración: si deja de ser
   verdad, la tarea sobra, y eso hay que poder discutirlo sin abrir el código. */
.bloque-tareas { margin-block: var(--e5); }
.bloque-tareas h2 { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e1); }
.lista-tareas { list-style: none; margin: var(--e3) 0 0; padding: 0; display: grid; gap: var(--e2); }
.lista-tareas > li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: 4px;
  padding: var(--pad-tarjeta);
}
.lista-tareas > li.tarea-bloqueante { border-left-color: var(--negative); }
.tarea-cabecera { display: flex; justify-content: space-between; gap: var(--e3); align-items: baseline; }
.tarea-cabecera h3 { font-size: 15px; margin: 0; }
.tarea-importe { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.tarea-hacer { margin: var(--e1) 0 var(--e2); font-size: 14px; }
/* El motivo, plegado: está para poder discutir la tarea, no para leerlo en cada
   una de las cuarenta tarjetas. */
.tarea-porque { margin: 0 0 var(--e1); font-size: 13px; }
.tarea-porque > summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
  list-style-position: inside;
}
.tarea-porque > p { margin: var(--e1) 0 0; color: var(--text-muted); }
.filtros-rapidos { display: flex; flex-wrap: wrap; gap: var(--e2); margin-block: var(--e3); }
.filtros-rapidos a {
  padding: 4px var(--e2);
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
  font-size: 13px;
}
.filtros-rapidos a[aria-current="page"] {
  background: var(--brand); color: var(--brand-contraste); border-color: var(--brand);
}

/* Una lista dentro de un aviso: sin bala y apretada, que ahí el espacio es caro
   y lo que importa es poder escanear las filas. */
.lista-apretada { list-style: none; margin: var(--e2) 0 0; padding: 0; font-size: 13px; }
.lista-apretada > li { padding: 2px 0; }

/* Un mes que los dos extractos no cubren: no es que cuadre ni que descuadre, es
   que no se puede saber. Se marca distinto de un descuadre para que no se lea
   como un hallazgo. */
.fila-a-ciegas { opacity: 0.65; }
.fila-a-ciegas th[scope="row"] { border-left: 3px dashed var(--warning); }