/* ===========================================================================
   HELIOS — sistema de marca
   ===========================================================================
   Los valores no están estimados a ojo: se extrajeron del brochure comercial
   (`brochure.pdf`, v1.0 abril 2026) rasterizándolo y midiendo los píxeles
   dominantes. Las tipografías salen de las fuentes embebidas en ese mismo PDF.

   Este archivo es la única fuente de verdad del color en HELIOS. La HMI, los
   tableros y las páginas del proxy consumen estos tokens; nadie escribe un
   hexadecimal suelto.
   =========================================================================== */

:root {
  /* --- Base oscura -------------------------------------------------------
     El brochure vive sobre este negro. Un SCADA se mira durante turnos de
     doce horas, muchas veces de noche y en sala de control a media luz: el
     fondo oscuro no es una moda, es la condición de trabajo. */
  --helios-fondo:          #0A0A0F;  /* fondo profundo */
  --helios-fondo-2:        #0E0E13;  /* franjas y zonas hundidas */
  --helios-superficie:     #16161D;  /* tarjetas y paneles */
  --helios-borde:          #2A2A34;  /* separadores sobre oscuro */

  /* --- Base clara --------------------------------------------------------
     Para documentos, reportes e impresión. */
  --helios-hueso:          #FBF9F4;  /* fondo claro */
  --helios-blanco:         #FFFFFF;  /* tarjetas sobre fondo claro */
  --helios-borde-claro:    #DCDBD7;

  /* --- Texto ------------------------------------------------------------- */
  --helios-texto:          #F5F2EC;  /* sobre oscuro */
  --helios-texto-suave:    #A5A4A3;  /* secundario */
  --helios-texto-oscuro:   #0A0A0F;  /* sobre claro */

  /* --- Acento -------------------------------------------------------------
     El rosa de HELIOS. `acento` es el que tiene contraste suficiente para
     texto sobre fondo oscuro; `luz` es el del sol de la portada y se reserva
     para superficies y brillos, no para texto pequeño. */
  --helios-acento:         #D99CAE;
  --helios-acento-luz:     #E8BFCA;
  --helios-acento-palido:  #F4C8D4;
  --helios-acento-fondo:   #F8DCE4;

  /* --- Estados de proceso -------------------------------------------------
     Un HMI industrial no puede pintar el estado solo con el color de marca.
     Estos son de norma (ISA-101): el operador los reconoce sin leer.
     El rosa de HELIOS NUNCA se usa para señalar un estado de proceso: es
     identidad, no información. Confundirlos es un error de seguridad. */
  --helios-normal:         #4ADE80;  /* en servicio / dentro de rango */
  --helios-alerta:         #FBBF24;  /* advertencia, calidad incierta */
  --helios-critico:        #F87171;  /* alarma, calidad mala */
  --helios-detenido:       #6B7280;  /* fuera de servicio / sin dato */
  --helios-manual:         #60A5FA;  /* forzado / en manual */

  /* --- Tipografía --------------------------------------------------------
     Space Grotesk para títulos y texto; JetBrains Mono para datos, etiquetas
     y todo lo que sea una lectura numérica. Que los números sean de ancho fijo
     importa: un valor que salta de 9,9 a 10,0 no debe mover el mímico. */
  --helios-fuente-titulo: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --helios-fuente-dato:   "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* --- Escala y ritmo ---------------------------------------------------- */
  --helios-radio:          8px;
  --helios-radio-chico:    4px;
  --helios-espacio:        16px;
}

/* Las fuentes se sirven desde el propio despliegue. El Aplicativo no tiene
   —ni debe tener— salida a Internet: depender de un CDN de fuentes sería una
   dependencia externa en una red de planta segmentada. */
@font-face {
  font-family: "Space Grotesk";
  src: url("./fuentes/SpaceGrotesk-Light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("./fuentes/SpaceGrotesk-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("./fuentes/SpaceGrotesk-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("./fuentes/SpaceGrotesk-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fuentes/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fuentes/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
   Piezas reutilizables
   --------------------------------------------------------------------------- */

.helios-etiqueta {
  font-family: var(--helios-fuente-dato);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--helios-acento);
}

.helios-titulo {
  font-family: var(--helios-fuente-titulo);
  font-weight: 500;
  color: var(--helios-texto);
  letter-spacing: -0.01em;
}

.helios-dato {
  font-family: var(--helios-fuente-dato);
  font-variant-numeric: tabular-nums;
  color: var(--helios-texto);
}

.helios-panel {
  background: var(--helios-superficie);
  border: 1px solid var(--helios-borde);
  border-radius: var(--helios-radio);
}

/* Calidad del dato, con la convención OPC que usa todo el Aplicativo:
   192 buena · 64 incierta · 24 mala. */
.helios-q-buena    { color: var(--helios-normal); }
.helios-q-incierta { color: var(--helios-alerta); }
.helios-q-mala     { color: var(--helios-critico); }