/* =====================================================================
   Base común: fuentes locales, reset y tokens compartidos por las vistas.
   Cada vista define su propia paleta en css/views/<vista>.css, siempre
   dentro de .view-<vista>, para no pisarse entre sí.
   ===================================================================== */

@font-face { font-family: "Inter"; src: url("../fonts/Inter-300-800.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-400-700.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-300-800.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/SpaceGrotesk-300-700.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  /* Semáforo (obligatorio por consigna): idéntico en las tres vistas */
  --sem-ok: #22c55e;
  --sem-warn: #f59e0b;
  --sem-crit: #ef4444;

  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  /* Barra común */
  --appbar-h: 52px;
  --shell-bg: #0b0d12;
  --shell-surface: #12151c;
  --shell-surface-2: #1a1e27;
  --shell-border: #232834;
  --shell-text: #e8ebf2;
  --shell-muted: #8b93a7;
  --shell-accent: #5b8cff;
  --shell-accent-text: #ffffff;
  --shell-focus: #8ab4ff;
  --radius: 10px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --shell-bg: #f6f7f9;
  --shell-surface: #ffffff;
  --shell-surface-2: #f0f2f5;
  --shell-border: #e3e6eb;
  --shell-text: #151820;
  --shell-muted: #5d6576;
  --shell-accent: #2f5bea;
  --shell-focus: #2f5bea;
  --sem-ok: #16a34a;
  --sem-warn: #d97706;
  --sem-crit: #dc2626;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--shell-bg);
  color: var(--shell-text);
  font: 14px/1.45 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1, "cv11" 1;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--shell-focus); outline-offset: 2px; border-radius: 6px; }
.icon { flex: none; display: inline-block; vertical-align: middle; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--shell-accent); color: var(--shell-accent-text); padding: 8px 12px; border-radius: 8px; }
.skip-link:focus { top: 8px; }
kbd {
  font: 600 11px/1 var(--font-mono);
  padding: 3px 6px; border-radius: 5px;
  border: 1px solid var(--shell-border); border-bottom-width: 2px;
  background: var(--shell-surface-2); color: var(--shell-text);
}
.noscript { padding: 24px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}