/* Tokens FlexOP · paleta neutra tematizable (claro / oscuro / sistema) con la alarma del monitor fija.
   Única fuente de colores, tipografía, espaciado, radios y movimiento. Cada color se escribe una vez con light-dark();
   el tema lo decide `color-scheme` sobre <html>: sin data-theme sigue al sistema, data-theme="light|dark" lo fija.
   Puntos de corte compartidos (no admiten variables en @media): celular <600px · tablet 600–1023px · escritorio >=1024px · amplio >=1440px. */
:root{color-scheme:light dark}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
:root{
  /* Roles de superficie y texto (claro / oscuro) */
  --bg:light-dark(#f2f2f3,#0f0f10);
  --surface:light-dark(#ffffff,#141415);
  --surface-raised:light-dark(#f9f9f9,#1d1f20);
  --field:light-dark(#ffffff,#181a1b);
  --border:light-dark(#eaebec,#222425);
  --border-strong:light-dark(#d5d7d9,#36393a);
  --text:light-dark(#0f0f10,#e4e6e7);
  --text-muted:light-dark(#494d50,#afb3b6);
  --text-subtle:light-dark(#5d6265,#959a9d);
  /* Acción primaria */
  --primary:light-dark(#006399,#2893cc);
  --primary-hover:light-dark(#005685,#4ca9dc);
  --on-primary:light-dark(#ffffff,#0f0f10);
  --primary-soft:color-mix(in srgb,var(--primary) 12%,var(--surface));
  --hover-lift:light-dark(#0000000a,#ffffff0f);
  --scrim:light-dark(#0f0f1066,#000000b3);
  --shadow-sm:light-dark(0 1px 2px #0f0f100a,0 1px 2px #00000066),light-dark(0 1px 3px #0f0f100f,0 1px 3px #0000004d);
  --shadow-md:light-dark(0 4px 12px #0f0f1014,0 8px 24px #00000080),light-dark(0 1px 3px #0f0f100f,0 1px 3px #0000004d);
  --focus-ring:0 0 0 2px var(--surface),0 0 0 4px var(--primary);
  --disabled-opacity:.38;
  --logo-surface:#ffffff;
  /* Alarma del monitor: swatches fijos (puntos, chips, semáforo) y su versión como texto legible en ambos temas */
  --flex-accent:#79dde1;--flex-green:#6fe0a2;--flex-yellow:#ffd34f;--flex-red:#ff4055;--flex-violet:#a99aff;
  --ok:light-dark(#25743b,#6fe0a2);--warn:light-dark(#973c00,#ffd34f);--danger:light-dark(#a5261d,#ff4055);--unknown:light-dark(#5b4fcf,#a99aff);
  --ok-soft:color-mix(in srgb,var(--flex-green) 16%,var(--surface));
  --warn-soft:color-mix(in srgb,var(--flex-yellow) 16%,var(--surface));
  --danger-soft:color-mix(in srgb,var(--flex-red) 16%,var(--surface));
  --unknown-soft:color-mix(in srgb,var(--flex-violet) 16%,var(--surface));
  /* Alias heredados: todos los nombres anteriores siguen válidos y pasan a ser tematizados */
  --flex-bg:var(--bg);--flex-panel:var(--surface);--flex-raised:var(--surface-raised);--flex-field:var(--field);--flex-line:var(--border);
  --flex-text:var(--text);--flex-muted:var(--text-muted);
  --panel:var(--surface);--raised:var(--surface-raised);--line:var(--border);--muted:var(--text-muted);
  --accent:var(--primary);--cyan:var(--primary);--on-accent:var(--on-primary);--accent-soft:var(--primary-soft);
  --green:var(--ok);--yellow:var(--warn);--red:var(--danger);--violet:var(--unknown);
  --green-soft:var(--ok-soft);--yellow-soft:var(--warn-soft);--red-soft:var(--danger-soft);
  /* Tipografía: Inter para interfaz y datos (tabular-nums), monoespaciada para URLs y credenciales */
  --font-ui:"Inter","Segoe UI",system-ui,sans-serif;
  --font-data:var(--font-ui);
  --font-mono:ui-monospace,"Cascadia Mono",Consolas,"Liberation Mono",monospace;
  --text-display:600 28px/1.2 var(--font-ui);
  --text-heading:600 24px/1.2 var(--font-ui);
  --text-title:600 18px/1.3 var(--font-ui);
  --text-subtitle:500 16px/1.4 var(--font-ui);
  --text-section:600 14px/1.4 var(--font-ui);
  --text-body:400 14px/1.5 var(--font-ui);
  --text-body-bold:500 14px/1.5 var(--font-ui);
  --text-body-small:400 13px/1.5 var(--font-ui);
  --text-caption:400 12px/1.4 var(--font-ui);
  --text-label:500 11px/1.4 var(--font-ui);
  --text-label-small:500 10px/1.4 var(--font-ui);
  --text-data:500 13px/1.4 var(--font-data);
  --tracking-label:0;--tracking-label-small:0;--tracking-section:0;--tracking-body:0;--tracking-caption:0;
  /* Espaciado (escala de 4px) */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;
  /* Radios */
  --radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;
  /* Trazos, tamaños de control, objetivos táctiles, iconos */
  --stroke:1px;--stroke-focus:1.5px;
  --control-sm:28px;--control-md:32px;--control-lg:36px;--touch:44px;--touch-comfortable:48px;
  --icon-sm:16px;--icon-md:20px;--icon-lg:24px;--icon-xl:32px;
  /* Movimiento */
  --motion-fast:120ms;--motion-base:200ms;--motion-slow:300ms;
  --ease-out:cubic-bezier(.2,.8,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--ease-in:cubic-bezier(.4,0,1,1);
  /* Distribución */
  --page-margin:16px;--content-max:1120px;--sidebar:256px;--sidebar-collapsed:72px;--topbar:52px;--side-panel:420px;--form-max:400px;
  font-family:var(--font-ui);color:var(--text);background:var(--bg);
}
/* Controles cómodos al tacto en celular y tablet */
@media(max-width:1023px){:root{--control-sm:32px;--control-md:40px;--control-lg:44px}}
@media(min-width:600px){:root{--page-margin:24px}}
@media(min-width:1024px){:root{--page-margin:40px}}
@media(min-width:1440px){:root{--content-max:1280px;--side-panel:480px}}
@media(prefers-reduced-motion:reduce){:root{--motion-fast:0ms;--motion-base:0ms;--motion-slow:0ms}}
/* Navegadores sin light-dark(): se conserva la apariencia oscura */
@supports not (color:light-dark(#000,#fff)){
  :root{color-scheme:dark;--bg:#0f0f10;--surface:#141415;--surface-raised:#1d1f20;--field:#181a1b;--border:#222425;--border-strong:#36393a;--text:#e4e6e7;--text-muted:#afb3b6;--text-subtle:#959a9d;--primary:#2893cc;--primary-hover:#4ca9dc;--on-primary:#0f0f10;--hover-lift:#ffffff0f;--scrim:#000000b3;--shadow-sm:0 1px 2px #00000066;--shadow-md:0 8px 24px #00000080;--ok:#6fe0a2;--warn:#ffd34f;--danger:#ff4055;--unknown:#a99aff}
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:var(--text-body);letter-spacing:var(--tracking-body);color:var(--text);background:var(--bg);min-height:100dvh}
button,input,select,textarea{font:inherit;letter-spacing:inherit;color:inherit}
button{touch-action:manipulation}
img{max-width:100%;height:auto}
a{color:var(--primary)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
[hidden]{display:none!important}
.g-data,.tabular{font-family:var(--font-data);font-variant-numeric:tabular-nums}
.g-mono{font-family:var(--font-mono)}
.g-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}