/* Cerebras · estilo único «libro de cuentas». Ver DISENO.md. */
/* 1. Primitivos */
:root {
  --gris-50: #ECEFF2; --blanco: #FFFFFF; --marino-900: #18222D; --gris-600: #4F5B67; --gris-200: #D2D8DE;
  --verde-700: #2C5C4C; --verde-100: #DDE9E4; --rojo-700: #9E3428; --ocre-700: #86601A;
  --n-950: #111719; --n-900: #192125; --n-100: #E3E9E6; --n-400: #A3B0AB; --n-800: #2B363B;
  --verde-300: #86BFA9; --verde-900: #20322C; --rojo-300: #E38C7F; --ocre-300: #D9B36A;
}
/* 2. Semánticos (claro) */
:root {
  --fondo: var(--gris-50); --superficie: var(--blanco); --texto: var(--marino-900); --texto-2: var(--gris-600);
  --linea: var(--gris-200); --acento: var(--verde-700); --acento-suave: var(--verde-100); --sobre-acento: #FFFFFF;
  --peligro: var(--rojo-700); --aviso: var(--ocre-700);
  --dato-1: #2266A8; --dato-neg: #B5541C; /* validados con dataviz (CVD ΔE 20,6) */
  --f-titulo: Charter, "Iowan Old Style", "Palatino Linotype", Georgia, Cambria, serif;
  --f-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px;
  --r-panel: 12px; --r-campo: 8px; --r-chip: 999px;
  --alto-captura: 60px; --alto-pestanas: 58px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: var(--n-950); --superficie: var(--n-900); --texto: var(--n-100); --texto-2: var(--n-400);
    --linea: var(--n-800); --acento: var(--verde-300); --acento-suave: var(--verde-900); --sobre-acento: #0E1A16;
    --peligro: var(--rojo-300); --aviso: var(--ocre-300); --dato-1: #5E9BD0; --dato-neg: #C9752F; color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --fondo: var(--n-950); --superficie: var(--n-900); --texto: var(--n-100); --texto-2: var(--n-400);
  --linea: var(--n-800); --acento: var(--verde-300); --acento-suave: var(--verde-900); --sobre-acento: #0E1A16;
  --peligro: var(--rojo-300); --aviso: var(--ocre-300); --dato-1: #5E9BD0; --dato-neg: #C9752F; color-scheme: dark;
}
/* 3. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 1rem/1.5 var(--f-texto); overflow-x: hidden; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 600; line-height: 1.2; margin: 0; }
h1 { font-size: 2.07rem; letter-spacing: -0.01em; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p { margin: 0; }
a { color: var(--acento); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.cifra { font-variant-numeric: tabular-nums; }
.sec { color: var(--texto-2); font-size: 0.9375rem; }
.peq { font-size: 0.8125rem; color: var(--texto-2); }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* 4. Estructura */
.app { min-height: 100dvh; }
.cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e4) var(--e4) var(--e2); }
.cabecera h1 { font-size: 1.44rem; }
.contenido { max-width: 720px; margin: 0 auto; padding: 0 var(--e4) calc(var(--alto-captura) + var(--alto-pestanas) + env(safe-area-inset-bottom) + var(--e6)); }
.fecha-hoy { padding: var(--e5) 0 var(--e4); }
.fecha-hoy h1 { font-size: 2.07rem; }
.fecha-hoy p { margin-top: var(--e1); }
.panel { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-panel); margin: 0 0 var(--e4); }
.panel > header { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linea); }
.panel > .cuerpo { padding: var(--e3) var(--e4); }
.panel-vacio { padding: var(--e4); color: var(--texto-2); }
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); border-top: 1px solid var(--linea); min-height: 52px; }
.lista > li:first-child { border-top: 0; }
.lista .princ { flex: 1; min-width: 0; }
.lista .princ > :first-child { overflow-wrap: anywhere; }
.lista .lado { text-align: right; white-space: nowrap; }
.fila { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }
.fila > .princ { flex: 1; min-width: 0; }
#principal:focus { outline: none; }
.rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.dato { padding: var(--e3) var(--e4); }
.dato b { display: block; font: 600 1.44rem/1.2 var(--f-titulo); font-variant-numeric: tabular-nums; }

/* 5. Controles */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); min-height: 44px; padding: 0 var(--e4); border-radius: var(--r-campo);
  border: 1px solid var(--linea); background: var(--superficie); color: var(--texto); font: 500 0.9375rem var(--f-texto); cursor: pointer; text-decoration: none; }
.boton:hover { border-color: var(--texto-2); }
.boton--primario { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.boton--primario:hover { filter: brightness(1.08); border-color: var(--acento); }
.boton--peligro { color: var(--peligro); }
.boton--plano { border-color: transparent; background: transparent; padding: 0 var(--e2); }
.boton--icono { width: 44px; padding: 0; }
.boton:disabled { opacity: 0.5; cursor: not-allowed; }
.campo { display: grid; gap: var(--e1); margin-bottom: var(--e3); }
.campo > span { font-size: 0.875rem; color: var(--texto-2); }
input, select, textarea { width: 100%; min-height: 44px; padding: var(--e2) var(--e3); border: 1px solid var(--linea); border-radius: var(--r-campo);
  background: var(--superficie); color: var(--texto); font: 1rem var(--f-texto); }
textarea { min-height: 96px; resize: vertical; }
input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; accent-color: var(--acento); flex: none; }
.chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--e3); border-radius: var(--r-chip); border: 1px solid var(--linea); font-size: 0.8125rem; color: var(--texto-2); background: transparent; }
.chip--activo { background: var(--acento-suave); border-color: transparent; color: var(--texto); }
button.chip { cursor: pointer; min-height: 36px; }
.panel .segmentos { padding: var(--e3) var(--e4) 0; }
.segmentos { display: flex; gap: var(--e2); overflow-x: auto; padding: var(--e1) 0 var(--e3); scrollbar-width: none; }
.aviso { border-left: 3px solid var(--aviso); padding: var(--e3) var(--e4); background: var(--superficie); border-radius: 0 var(--r-campo) var(--r-campo) 0; margin-bottom: var(--e4); font-size: 0.9375rem; }
.aviso--peligro { border-left-color: var(--peligro); }
.boton[aria-pressed="true"] { background: var(--acento-suave); }
.enlace-modulo { gap: var(--e3); color: var(--texto); text-decoration: none; min-height: 28px; }
progress { accent-color: var(--acento); width: 96px; }
.positivo { color: var(--acento); } .negativo { color: var(--peligro); }

/* 6. Captura + pestañas (móvil) */
.captura { position: fixed; left: 0; right: 0; bottom: calc(var(--alto-pestanas) + env(safe-area-inset-bottom)); z-index: 20;
  background: var(--superficie); border-top: 1px solid var(--linea); box-shadow: 0 -6px 18px rgba(24, 34, 45, 0.08); }
.captura form { max-width: 720px; margin: 0 auto; display: flex; gap: var(--e2); padding: var(--e2) var(--e3); }
.captura input { flex: 1; }
.pestanas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--superficie); border-top: 1px solid var(--linea); padding-bottom: env(safe-area-inset-bottom); }
.pestanas ul { list-style: none; margin: 0 auto; padding: 0; max-width: 720px; display: grid; grid-template-columns: repeat(4, 1fr); }
.pestanas a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: var(--alto-pestanas); color: var(--texto-2); text-decoration: none; font-size: 0.75rem; }
.pestanas a[aria-current="page"] { color: var(--acento); font-weight: 600; }
.pestanas svg, .lateral svg, .captura svg, .enlace-modulo svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.lateral { display: none; }
.insignia { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--acento); color: var(--sobre-acento); font-size: 0.6875rem; line-height: 18px; text-align: center; }

/* 7. Tablero (columnas por estado) */
.tablero { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 86%); gap: var(--e3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--e2); }
.tablero > .panel { scroll-snap-align: start; margin: 0; }

/* 8. Hoja (formulario modal) */
dialog { border: 1px solid var(--linea); border-radius: var(--r-panel); padding: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  background: var(--superficie); color: var(--texto); }
dialog::backdrop { background: rgba(17, 23, 25, 0.45); }
dialog form { padding: var(--e4); }
dialog header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--e3); }
.acciones { display: flex; gap: var(--e2); justify-content: flex-end; flex-wrap: wrap; margin-top: var(--e4); }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--alto-captura) + var(--alto-pestanas) + env(safe-area-inset-bottom) + 12px);
  z-index: 40; background: var(--texto); color: var(--fondo); padding: var(--e2) var(--e4); border-radius: var(--r-campo); display: flex; gap: var(--e3); align-items: center; max-width: calc(100vw - 32px); }
.toast button { background: none; border: 0; color: inherit; font: 600 0.9375rem var(--f-texto); text-decoration: underline; cursor: pointer; min-height: 36px; }

/* 9. Gráficos (SVG, ver app/js/graficos.js) */
.grafico { width: 100%; height: auto; display: block; }
.grafico text { fill: var(--texto-2); font: 11px var(--f-texto); font-variant-numeric: tabular-nums; }
.grafico .eje { stroke: var(--linea); }
.grafico .serie { stroke: var(--dato-1); fill: none; stroke-width: 2; }
.grafico .barra { fill: var(--dato-1); }
.grafico .barra--neg { fill: var(--dato-neg); }
.grafico .guia { stroke: var(--texto-2); stroke-dasharray: 2 3; }
.grafico .punto { fill: var(--dato-1); stroke: var(--superficie); stroke-width: 2; }
.grafico-tip { font-size: 0.8125rem; color: var(--texto-2); min-height: 1.5em; padding: 0 var(--e4); font-variant-numeric: tabular-nums; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.tabla th, .tabla td { text-align: left; padding: var(--e2) var(--e4); border-top: 1px solid var(--linea); }
.tabla td.n, .tabla th.n { text-align: right; }
details > summary { cursor: pointer; padding: var(--e2) var(--e4); color: var(--texto-2); font-size: 0.875rem; min-height: 44px; display: flex; align-items: center; }
.tabla-scroll { overflow-x: auto; }

/* 10. Escritorio */
@media (min-width: 900px) {
  .pestanas { display: none; }
  .lateral { display: block; position: fixed; top: 0; bottom: 0; left: 0; width: 232px; border-right: 1px solid var(--linea); background: var(--superficie); overflow-y: auto; padding: var(--e4) var(--e2); }
  .lateral a { display: flex; align-items: center; gap: var(--e3); min-height: 40px; padding: 0 var(--e3); border-radius: var(--r-campo); color: var(--texto); text-decoration: none; }
  .lateral a[aria-current="page"] { background: var(--acento-suave); }
  .lateral .marca { font: 600 1.2rem var(--f-titulo); padding: var(--e2) var(--e3) var(--e4); }
  .app { padding-left: 232px; }
  .captura { left: 232px; bottom: 0; }
  .contenido { padding-bottom: calc(var(--alto-captura) + var(--e6)); }
  .tablero { grid-auto-columns: minmax(240px, 1fr); }
  .toast { bottom: calc(var(--alto-captura) + 12px); }
}