/* ==========================================================
   Soporti — tokens de PRODUCTO
   Copia servible del tokens.css del skill `soporti-design-system`
   (skill/soporti-design-system/tokens.css, en este mismo repo), que
   es la fuente de verdad. Si el skill cambia, se regenera esta copia.

   PARA QUÉ: la UI de los productos — Neti, CRM, ERP, moni
   (finanzas), el dashboard de la VM.
   NO para el sitio web ni material de marca: eso usa
   soporti-tokens.css, con prefijo --sp-.

   Nunca mezcles los dos prefijos en un mismo proyecto.
   ========================================================== */
:root {
  /* Base oscura */
  --azul-noche: #0F2430;
  --superficie: #132C3A;
  --borde-oscuro: #244455;
  --borde-interactivo: #33505F;
  --sidebar-oscuro: #0D1F2A;
  --borde-sidebar: #1C3745;

  /* Acción y acentos */
  --cian: #29BDD8;            /* único color de acción */
  --cian-claro: #7FDCEC;      /* hover sobre oscuro */
  --azul-profundo: #0A6E97;   /* acento sobre claro */

  /* Semánticos */
  --verde-led: #3EE58F;
  --ambar: #F0B429;
  --rojo: #F25757;
  --verde-texto: #159A63;     /* versiones texto sobre claro */
  --ambar-texto: #B07E12;
  --rojo-texto: #D64545;

  /* Base clara */
  --gris-hielo: #F4F7F8;
  --blanco: #FFFFFF;
  --borde-claro: #E2E9EC;
  --borde-control-claro: #C9D6DC;
  --activo-claro: #EAF3F7;

  /* Texto */
  --tinta: #12212B;
  --texto-sec-claro: #5B6B74;
  --texto-mute-claro: #8AA2AF;
  --texto-oscuro: #FFFFFF;    /* texto principal sobre oscuro — cierra el set */
  --texto-sec-oscuro: #A9BCC7;
  --texto-mute-oscuro: #7D93A0;
  --texto-faint-oscuro: #5C7482;

  /* Gráficas */
  --barra-base-oscuro: #1E4A5E;
  --barra-base-claro: #D7E7EE;

  /* Tipografía */
  --font-ui: 'Outfit', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Series de gráfica — SOLO para series categóricas múltiples (>3).
     Para comparar una métrica entre categorías sigue mandando la regla de
     base neutra + una barra destacada; esto NO la sustituye.

     Orden FIJO, se asignan en secuencia y no se reciclan. El color sigue a la
     entidad, nunca a su posición en un ranking: si un filtro cambia cuántas
     series hay, las que quedan NO se repintan.

     Tope 8 en líneas y barras. En dispersión, burbuja y mapas el tope real es
     3 (ahí cualquier par puede quedar contiguo) y hacen falta forma o etiqueta
     además del color; con 3 usa las series 1, 2 y 4.
     La novena serie no es un color nuevo: se agrupa en "Otros" o se separa en
     gráficas pequeñas.

     Estos son los pasos para fondo CLARO. Validados: banda de luminosidad,
     croma, separación bajo protanopía/deuteranopía, y 3:1 contra gris hielo. */
  --serie-1: #0A6E97;   /* azul profundo — la marca va primera */
  --serie-2: #D9662B;
  --serie-3: #1B8F6E;
  --serie-4: #7B4AC4;
  --serie-5: #A8721C;
  --serie-6: #3E7BE0;
  --serie-7: #D64A8E;
  --serie-8: #5B7A21;

  /* Escala, espaciado y radios como variables (antes solo en prosa).
     Si cambia un radio, cambia aquí y no hay que cazar literales. */
  --fs-display: 56px; --fs-seccion: 40px; --fs-tarjeta: 24px; --fs-sub: 19px;
  --fs-cuerpo: 17px;  --fs-ui: 15px;      --fs-meta: 13px;    --fs-traza: 12px;
  --fw-titulo: 800; --fw-boton: 700; --fw-ui: 600; --fw-cuerpo: 400;

  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-6: 24px; --e-8: 32px; --e-12: 48px; --e-16: 64px; --e-24: 96px;

  --r-badge: 6px; --r-nav: 8px; --r-control: 10px;
  --r-tarjeta: 12px;           /* app: 12–14. 18 es de frames web, no de app */
  --r-pildora: 999px;

  --b-divisor: 1px; --b-control: 1.5px;

  /* Foco */
  --focus-ring: 0 0 0 3px rgba(41, 189, 216, 0.15);
  /* Sombra (solo modales/flotantes) */
  --sombra-flotante: 0 24px 50px rgba(15, 36, 48, 0.10);
}

/* Series sobre fondo OSCURO — mismas familias de color, un paso más oscuro.
   No es un volteo automático del bloque de arriba: son valores elegidos y
   validados contra la superficie #132C3A.

   Actívalo con el selector que use tu producto para el tema azul/oscuro. Si
   marcas el tema de otra forma, redefine estos ocho ahí. */
.tema-azul, .tema-oscuro, [data-theme="dark"], .dark {
  --serie-1: #2E9CB2;   /* la familia del cian de marca, legible sobre oscuro */
  --serie-2: #CE6B39;
  --serie-3: #229B84;
  --serie-4: #8A6CC9;
  --serie-5: #A5761F;
  --serie-6: #4E7CC9;
  --serie-7: #C95F92;
  --serie-8: #779A38;
}