/* SISTEMA ASCENSIÓN — tokens compartidos por index.html, login.html y panel.html.
   Se extrajo de index.html para no mantener tres copias del mismo sistema. */
:root {
  color-scheme: light;
  /* --- superficies --- */
  --page:        #eef2f8;
  --surface:     #ffffff;
  --surface-2:   #e6edf6;
  --panel-veil:  rgba(31,111,208,.05);
  /* --- tinta --- */
  --ink:         #08101c;
  --ink-2:       #33465e;
  --muted:       #66798f;
  --grid:        #d7e1ee;
  --baseline:    #a8bdd6;
  --border:      rgba(8,16,28,.13);
  --hairline:    rgba(31,111,208,.22);
  /* --- acentos de interfaz --- */
  --acc:         #1f6fd0;
  --acc-2:       #7a4fd8;
  --acc-soft:    #dbeafe;
  --acc-ink:     #ffffff;
  /* --- series de gráfico: par validado, no son los acentos --- */
  --series-1:    #2a7fd0;
  --series-2:    #a8701a;
  --ord-1:       #a8c8ee;
  --ord-2:       #6ba3de;
  --ord-3:       #2a7fd0;
  --ord-4:       #17538f;
  /* --- semánticos --- */
  --good:        #0f9e66;
  --warning:     #a87a12;
  --serious:     #c2521c;
  --critical:    #d32d47;
  --reward:      #a87a12;
  /* --- semáforo: luminosidad decreciente = más grave --- */
  --sem-1:       #0f9e66;
  --sem-2:       #a87a12;
  --sem-3:       #c2521c;
  --sem-4:       #d32d47;
  --sem-5:       #9b1230;
  /* --- estados --- */
  --st-open:     #1f6fd0;
  --st-pending:  #a87a12;
  --st-resolved: #0f9e66;
  --st-closed:   #66798f;
  /* --- forma: la esquina es la firma del sistema --- */
  --bevel:       11px;
  --bevel-lg:    18px;
  --clip:        polygon(var(--bevel) 0, 100% 0, 100% calc(100% - var(--bevel)), calc(100% - var(--bevel)) 100%, 0 100%, 0 var(--bevel));
  --clip-lg:     polygon(var(--bevel-lg) 0, 100% 0, 100% calc(100% - var(--bevel-lg)), calc(100% - var(--bevel-lg)) 100%, 0 100%, 0 var(--bevel-lg));
  --clip-hex:    polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  --soft:        4px;
  /* --- movimiento --- */
  --ease-system: cubic-bezier(.16, 1, .3, 1);
  --ease-snap:   cubic-bezier(.2, .8, .3, 1);
  --dur-micro:   180ms;
  --dur-open:    480ms;
  --dur-notice:  420ms;
  --glow-sm:     drop-shadow(0 0 8px rgba(31,111,208,.35));
  --glow-lg:     drop-shadow(0 0 20px rgba(31,111,208,.55));
  --shadow:      0 1px 2px rgba(8,16,28,.06), 0 10px 28px rgba(8,16,28,.06);
  /* --- tipografía --- */
  --f-display:   Rajdhani, "Segoe UI Semibold", system-ui, sans-serif;
  --f-data:      "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-body:      Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Ascensión puro: superficie casi negra de tono frío.
   Los valores oscuros se declaran bajo los dos ámbitos —el ajuste del sistema
   operativo y el conmutador— para que el conmutador gane en ambos sentidos. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --page:        #04060c;
  --surface:     #0b1220;
  --surface-2:   #111b2e;
  --panel-veil:  rgba(126,195,255,.05);
  --ink:         #eaf3ff;
  --ink-2:       #a9bdd4;
  --muted:       #8fa4bd;
  --grid:        rgba(126,195,255,.14);
  --baseline:    rgba(126,195,255,.34);
  --border:      rgba(126,195,255,.16);
  --hairline:    rgba(126,195,255,.32);
  --acc:         #4da3ff;
  --acc-2:       #a97bff;
  --acc-soft:    rgba(126,195,255,.12);
  --acc-ink:     #04060c;
  --series-1:    #3f93e8;
  --series-2:    #b8801c;
  --ord-1:       #1c4a80;
  --ord-2:       #2a6cb5;
  --ord-3:       #3f93e8;
  --ord-4:       #86c0f5;
  --good:        #2fbf85;
  --warning:     #ffd166;
  --serious:     #ff9e5e;
  --critical:    #ff4d6d;
  --reward:      #ffd166;
  --sem-1:       #2fbf85;
  --sem-2:       #8f6b14;
  --sem-3:       #c25f24;
  --sem-4:       #ee4a63;
  --sem-5:       #ff8fa8;
  --st-open:     #4da3ff;
  --st-pending:  #ffd166;
  --st-resolved: #2fbf85;
  --st-closed:   #8fa4bd;
  --glow-sm:     drop-shadow(0 0 8px rgba(126,195,255,.35));
  --glow-lg:     drop-shadow(0 0 22px rgba(126,195,255,.7));
  --shadow:      0 0 0 1px rgba(126,195,255,.06), 0 18px 40px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page:        #04060c;
  --surface:     #0b1220;
  --surface-2:   #111b2e;
  --panel-veil:  rgba(126,195,255,.05);
  --ink:         #eaf3ff;
  --ink-2:       #a9bdd4;
  --muted:       #8fa4bd;
  --grid:        rgba(126,195,255,.14);
  --baseline:    rgba(126,195,255,.34);
  --border:      rgba(126,195,255,.16);
  --hairline:    rgba(126,195,255,.32);
  --acc:         #4da3ff;
  --acc-2:       #a97bff;
  --acc-soft:    rgba(126,195,255,.12);
  --acc-ink:     #04060c;
  --series-1:    #3f93e8;
  --series-2:    #b8801c;
  --ord-1:       #1c4a80;
  --ord-2:       #2a6cb5;
  --ord-3:       #3f93e8;
  --ord-4:       #86c0f5;
  --good:        #2fbf85;
  --warning:     #ffd166;
  --serious:     #ff9e5e;
  --critical:    #ff4d6d;
  --reward:      #ffd166;
  --sem-1:       #2fbf85;
  --sem-2:       #8f6b14;
  --sem-3:       #c25f24;
  --sem-4:       #ee4a63;
  --sem-5:       #ff8fa8;
  --st-open:     #4da3ff;
  --st-pending:  #ffd166;
  --st-resolved: #2fbf85;
  --st-closed:   #8fa4bd;
  --glow-sm:     drop-shadow(0 0 8px rgba(126,195,255,.35));
  --glow-lg:     drop-shadow(0 0 22px rgba(126,195,255,.7));
  --shadow:      0 0 0 1px rgba(126,195,255,.06), 0 18px 40px rgba(0,0,0,.55);
}