/* ════════════════════════════════════════════════════════════
   TOKENS DEL SISTEMA DE DISEÑO
   Fuente única de verdad visual. Extraído de base/hoja_de_estilos.html.
   No colorear por estética: ver color es leer información (P1).
   ════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ════════════ MODO CLARO ════════════ */
:root {
  color-scheme: light;   /* controles nativos (date, select, spinners) en variante clara */
  --bg:#f2f4f7; --s1:#ffffff; --s2:#eef0f4; --s3:#e4e7ee;
  --bdr:rgba(20,24,35,.08); --bdr2:rgba(20,24,35,.14);
  --tx:#181b24; --tx2:#525a70; --tx3:#8a91a6;

  /* NIVELES DE GESTIÓN */
  --est:#2563eb; --est-bg:rgba(37,99,235,.09);  --est-bdr:rgba(37,99,235,.26); --est-tx:#1d52cf;
  --tac:#b5641a; --tac-bg:rgba(181,100,26,.10); --tac-bdr:rgba(181,100,26,.26); --tac-tx:#985115;
  --ope:#0d9268; --ope-bg:rgba(13,146,104,.10);--ope-bdr:rgba(13,146,104,.26);--ope-tx:#0a7a57;

  /* ESTADOS / SEMÁFORO */
  --ok:#0d9268;  --ok-bg:rgba(13,146,104,.11);  --ok-tx:#0a7a57;
  --warn:#d39410;--warn-bg:rgba(211,148,16,.13); --warn-tx:#a8740a;
  --crit:#d23b3b;--crit-bg:rgba(210,59,59,.11);  --crit-tx:#b62e2e;
  --info:#2563eb;--info-bg:rgba(37,99,235,.09);  --info-tx:#1d52cf;
  --idle:#8a91a6;--idle-bg:rgba(20,24,35,.05);   --idle-tx:#6b7286;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-12:48px; --sp-16:64px;
  --r-sm:6px; --r-md:10px; --r-lg:16px;
  --sh-1:0 1px 2px rgba(20,24,35,.05); --sh-2:0 2px 10px rgba(20,24,35,.07); --sh-3:0 8px 30px rgba(20,24,35,.10);

  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.22,1,.36,1);
}

/* ════════════ MODO OSCURO ════════════ */
html.dark {
  color-scheme: dark;   /* invierte los iconos nativos (calendario, flechas) en oscuro */
  --bg:#101216; --s1:#181b21; --s2:#1e222a; --s3:#262b35;
  --bdr:rgba(255,255,255,.08); --bdr2:rgba(255,255,255,.15);
  --tx:#e2e5ee; --tx2:#969cb2; --tx3:#646b80;

  --est:#5b8def; --est-bg:rgba(91,141,239,.14);  --est-bdr:rgba(91,141,239,.32); --est-tx:#8fb2ff;
  --tac:#e3953f; --tac-bg:rgba(227,149,63,.14);  --tac-bdr:rgba(227,149,63,.32); --tac-tx:#ffba6e;
  --ope:#2bd29a; --ope-bg:rgba(43,210,154,.14);  --ope-bdr:rgba(43,210,154,.32); --ope-tx:#5fe8b6;

  --ok:#2bd29a;  --ok-bg:rgba(43,210,154,.14);  --ok-tx:#5fe8b6;
  --warn:#f0b53a;--warn-bg:rgba(240,181,58,.14); --warn-tx:#ffd073;
  --crit:#f06a6a;--crit-bg:rgba(240,106,106,.14);--crit-tx:#ff9090;
  --info:#5b8def;--info-bg:rgba(91,141,239,.14); --info-tx:#8fb2ff;
  --idle:#646b80;--idle-bg:rgba(255,255,255,.06);--idle-tx:#8b90a8;

  --sh-1:0 1px 2px rgba(0,0,0,.30); --sh-2:0 2px 12px rgba(0,0,0,.40); --sh-3:0 8px 30px rgba(0,0,0,.55);
}

html,body { background:var(--bg); color:var(--tx); font-family:var(--body); font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased; transition:background .25s ease,color .25s ease; }
body { min-height:100vh; }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ transition:none!important; animation:none!important; } }

/* ════════════ SCROLLBARS ════════════
   Minimalista: una sola línea fina con marcadores (flechas) para
   subir y bajar. No nativa de Windows; usa los grises del sistema. */
:root {
  --scroll-thumb:rgba(20,24,35,.22); --scroll-thumb-hover:rgba(20,24,35,.38);
  --scroll-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a91a6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E");
  --scroll-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a91a6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
html.dark {
  --scroll-thumb:rgba(255,255,255,.18); --scroll-thumb-hover:rgba(255,255,255,.32);
  --scroll-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23646b80' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E");
  --scroll-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23646b80' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Firefox: línea fina sin botones (no los soporta) */
* { scrollbar-width:thin; scrollbar-color:var(--scroll-thumb) transparent; }

/* WebKit (Chrome, Edge, Safari): línea fina + marcadores arriba/abajo */
*::-webkit-scrollbar { width:11px; height:11px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb {
  background:var(--scroll-thumb);
  border-radius:6px;
  border:4px solid transparent;     /* línea de ~3px centrada */
  background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover { background:var(--scroll-thumb-hover); background-clip:padding-box; }
*::-webkit-scrollbar-corner { background:transparent; }
/* marcadores: una flecha arriba y otra abajo */
*::-webkit-scrollbar-button:single-button {
  display:block; height:11px; width:11px;
  background-repeat:no-repeat; background-position:center;
}
*::-webkit-scrollbar-button:single-button:vertical:decrement { background-image:var(--scroll-up); }
*::-webkit-scrollbar-button:single-button:vertical:increment { background-image:var(--scroll-down); }
*::-webkit-scrollbar-button:horizontal { display:none; }   /* solo vertical */