/* ==========================================================================
   Plan · Control Data — tokens, reset y tipografía
   Dirección visual A · Industrial claro. El acento (--acento, --acento-texto,
   --acento-osc, --acento-tinta, --acento-claro) lo inyecta base.html según la empresa.
   ========================================================================== */

:root {
  /* Acento (valores por defecto; base.html los reemplaza) */
  --acento: #1F3A5F;
  --acento-texto: #FFFFFF;
  --acento-osc: #1A3151;
  --acento-tinta: #1F3A5F;
  --acento-claro: #6B7C96;

  /* Neutros */
  --grafito: #16171C;
  --grafito-2: #2A2B31;
  --grafito-3: #3A3B42;
  --menu-texto: #B0AEA6;
  --menu-tenue: #8E8C85;
  --fondo: #F6F3EC;
  --superficie: #FFFFFF;
  --superficie-2: #FBF9F4;
  --borde: #E7E2D8;
  --borde-fuerte: #D6D0C4;
  --texto: #1A1B20;
  --texto-2: #5A5A60;
  --texto-3: #6A6864;

  /* Semáforo: color de marca, fondo y tinta legible sobre el fondo */
  --verde: #1E8E3E;     --verde-fondo: #E6F4EA;    --verde-tinta: #1E6B34;    --verde-borde: #B7DFC2;
  --amarillo: #B7791F;  --amarillo-fondo: #FEF7E0; --amarillo-tinta: #7A5200; --amarillo-borde: #F3DF9E;
  --rojo: #C62828;      --rojo-fondo: #FCE8E6;     --rojo-tinta: #B3261E;     --rojo-borde: #F4C7C3;
  --gris: #6B6A66;      --gris-fondo: #F1F0EC;     --gris-tinta: #5A5A60;     --gris-borde: #DEDBD3;
  --azul-fondo: #EAF1FB; --azul-tinta: #1D4E89;    --azul-borde: #C5D7EE;

  /* Espacios */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px;

  /* Radios */
  --r-s: 6px; --r: 8px; --r-l: 10px; --r-pill: 999px;

  /* Sombras */
  --sombra-1: 0 1px 2px rgba(22, 23, 28, .06);
  --sombra-2: 0 2px 8px rgba(22, 23, 28, .08);
  --sombra-3: 0 12px 32px rgba(22, 23, 28, .18);

  /* Tipografía */
  --fuente: "Inter", "Segoe UI", system-ui, sans-serif;
  --t-xs: 12px; --t-s: 13px; --t-m: 15px; --t-l: 18px; --t-xl: 22px; --t-2xl: 26px;

  /* Layout */
  --ancho-menu: 220px;
  --alto-topbar: 56px;
  --alto-bottom: 64px;
  --foco: 0 0 0 2px var(--acento-tinta);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--fuente);
  font-size: var(--t-m);
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
table { border-collapse: collapse; }

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 { margin: 0 0 var(--e3); line-height: 1.25; color: var(--texto); }
h1 { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: var(--t-l); font-weight: 700; margin-top: var(--e5); }
h3 { font-size: var(--t-m); font-weight: 600; }
p { margin: 0 0 var(--e3); }
small, .texto-2 { color: var(--texto-2); }
b, strong { font-weight: 600; }
a { color: var(--acento-tinta); text-underline-offset: 2px; }
a:hover { color: var(--acento-osc); }
.sobretitulo {
  font-size: var(--t-xs); font-weight: 600; color: var(--texto-2);
  text-transform: uppercase; letter-spacing: .08em;
}
.num { font-variant-numeric: tabular-nums; }

/* ---------- Foco visible ---------- */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--acento-tinta); outline-offset: 2px; border-radius: 4px; }
/* Sobre fondos oscuros el acento de la empresa es arbitrario: anillo blanco */
.sidebar :focus-visible, .topbar :focus-visible { outline-color: #FFFFFF; }

/* ---------- Iconos (sprite SVG inline) ---------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icono {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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