/* Tokens, base y marca copiados de Torre de Control (../torre-de-control.html, líneas 7–224 y 652–662). */

/* ============================================================
   TOKENS — light es la definición completa; dark redefine solo tokens
   ============================================================ */
:root {
  color-scheme: light;

  --ground:      #EAEDF1;
  --surface:     #FFFFFF;
  --surface-2:   #F5F7FA;
  --surface-3:   #EBEFF4;
  --rail:        #16283D;
  --rail-2:      #22405F;
  --rail-ink:    #DDE6F0;
  --rail-ink-2:  #8FA3BC;

  --ink:         #101A24;
  --ink-2:       #47576B;
  --ink-3:       #64768B;
  --border:      #D8DFE8;
  --border-2:    #C2CDDA;

  --brand:       #2E4E75;
  --brand-soft:  #E4EBF4;
  --brand-ink:   #24405F;

  --sun:         #F5A623;  /* naranja de marca — acentos vivos */
  --float-bg:    #16283D;  /* barra flotante, toast, chip activo */
  --float-ink:   #FFFFFF;

  --s1:          #2F6BB0;  /* serie 1 */
  --s2:          #C97A0A;  /* serie 2 */
  --s3:          #8E3A72;
  --s4:          #2C7D3E;

  --good:        #2C7D3E;
  --good-soft:   #E2F1E6;
  --warn:        #9A5E06;
  --warn-soft:   #FAEEDA;
  --crit:        #B3402F;
  --crit-soft:   #FAE7E4;
  --idle-soft:   #E8EDEE;

  --wa:          #128C4A;
  --wa-bubble:   #DCF8C6;
  --wa-bg:       #E9E2DA;

  --shadow-sm:   0 1px 2px rgba(11,25,30,.06), 0 1px 1px rgba(11,25,30,.04);
  --shadow-md:   0 4px 16px rgba(11,25,30,.10), 0 1px 3px rgba(11,25,30,.06);
  --shadow-lg:   0 18px 48px rgba(11,25,30,.22);

  --r-sm: 4px;
  --r-md: 7px;
  --r-lg: 11px;

  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --rail-w: 244px;

  --on-brand:    #FFFFFF;
  --tip-ring:    transparent;
  --s1-a22:      rgba(47,107,176,.22);
  --s1-a48:      rgba(47,107,176,.48);

  /* Logo real de SUMA Distributors (PNG con alfa, 1200x421 y 192x192, en assets/) */
  --logo:        url("../assets/logo-suma.png");
  --logo-iso:    url("../assets/logo-iso.png");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground:     #0A121C;
    --surface:    #101C28;
    --surface-2:  #14222F;
    --surface-3:  #1B2C3C;
    --rail:       #0A1622;
    --rail-2:     #17293E;
    --rail-ink:   #D8E3F0;
    --rail-ink-2: #7C90A8;

    --ink:        #E5EBF2;
    --ink-2:      #A3B3C6;
    --ink-3:      #7B8CA1;
    --border:     #223243;
    --border-2:   #31445A;

    --brand:      #4E92D6;
    --brand-soft: #16293F;
    --brand-ink:  #7FB0E4;
    --sun:        #F5A623;
    --float-bg:   #E5EBF2;
    --float-ink:  #101A24;

    --s1:         #4E92D6;
    --s2:         #C67E1B;
    --s3:         #BE619C;
    --s4:         #3F9E56;

    --good:       #3F9E56;
    --good-soft:  #14301E;
    --warn:       #C67E1B;
    --warn-soft:  #33260F;
    --crit:       #D3675A;
    --crit-soft:  #341A17;
    --idle-soft:  #1C2A38;

    --wa:         #25A75C;
    --wa-bubble:  #12492C;
    --wa-bg:      #101E1A;

    --shadow-sm:  0 1px 2px rgba(0,0,0,.4);
    --shadow-md:  0 4px 16px rgba(0,0,0,.45);
    --shadow-lg:  0 18px 48px rgba(0,0,0,.6);

    --on-brand:   #04171B;
    --tip-ring:   var(--border-2);
    --s1-a22:     rgba(78,146,214,.22);
    --s1-a48:     rgba(78,146,214,.48);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground:     #0A121C;
  --surface:    #101C28;
  --surface-2:  #14222F;
  --surface-3:  #1B2C3C;
  --rail:       #0A1622;
  --rail-2:     #17293E;
  --rail-ink:   #D8E3F0;
  --rail-ink-2: #7C90A8;

  --ink:        #E5EBF2;
  --ink-2:      #A3B3C6;
  --ink-3:      #7B8CA1;
  --border:     #223243;
  --border-2:   #31445A;

  --brand:      #4E92D6;
  --brand-soft: #16293F;
  --brand-ink:  #7FB0E4;
  --sun:        #F5A623;
  --float-bg:   #E5EBF2;
  --float-ink:  #101A24;

  --s1:         #4E92D6;
  --s2:         #C67E1B;
  --s3:         #BE619C;
  --s4:         #3F9E56;

  --good:       #3F9E56;
  --good-soft:  #14301E;
  --warn:       #C67E1B;
  --warn-soft:  #33260F;
  --crit:       #D3675A;
  --crit-soft:  #341A17;
  --idle-soft:  #1C2A38;

  --wa:         #25A75C;
  --wa-bubble:  #12492C;
  --wa-bg:      #101E1A;

  --shadow-sm:  0 1px 2px rgba(0,0,0,.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,.45);
  --shadow-lg:  0 18px 48px rgba(0,0,0,.6);

  --on-brand:   #04171B;
  --tip-ring:   var(--border-2);
  --s1-a22:     rgba(78,146,214,.22);
  --s1-a48:     rgba(78,146,214,.48);
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
p { margin: 0; }
button { font: inherit; color: inherit; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
.rail :focus-visible, .actionbar :focus-visible { outline-color: var(--sun); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  /* El splash dura dos segundos y es solo un fade y una barra de progreso: se conserva, sin escala ni desplazamiento */
  .splash-lockup { animation-duration: .85s !important; transform: none; }
  .splash-go { animation-duration: .4s !important; transition-duration: .4s, .4s, .4s, .12s !important; }
  .splash-fill { animation-duration: 1.7s !important; }
  .splash-label { transition-duration: .3s !important; }
  .splash-prod { animation-duration: .5s !important; }
  .splash { transition-duration: .42s !important; }
  .splash.leaving { transform: none; }
}

/* ============================================================
   MARCA — el logo real, siempre sobre blanco
   ============================================================ */
.logo-img {
  display: block; box-sizing: border-box;
  aspect-ratio: 1200 / 421;
  background: #FFFFFF var(--logo) center / contain no-repeat;
  background-origin: content-box;
}
.logo-iso { background: #FFFFFF var(--logo-iso) center / 74% no-repeat; }

/* ============================================================
   UTILIDADES DE TEXTO
   ============================================================ */
.t-mut { color: var(--ink-3) }
.t-bien { color: var(--good) }
.t-alerta { color: var(--warn) }
.t-critico { color: var(--crit) }
.t-chico { font-size: 12px }