/* ═══════════════════════════════════════════════════════════════
   Quantum Ops · Marca
   Línea visual de Quantum Marketing & Advertising, octubre 2026.

   ESTE ES EL ÚNICO ARCHIVO CON COLORES DE MARCA.
   Antes estaban escritos a mano en catorce archivos y cada ajuste
   obligaba a cazarlos uno por uno. Aquí se cambian una vez.

   DOS TEMAS
   El sistema de marca define un tema oscuro y uno claro, y Ops usa
   los dos a propósito:

     · Las pantallas de pared (operación, recepción, cliente) van en
       azul Quantum. Son piezas de marca que se ven de lejos.
     · La aplicación del equipo va en claro. Es una herramienta de
       ocho horas al día; el tema claro del sistema existe
       justamente para eso.

   Para poner una página en oscuro: <body class="tema-oscuro">.
   ═══════════════════════════════════════════════════════════════ */

/* ── Tipografía ────────────────────────────────────────────────
   Servidas desde Ops, no desde Google Fonts: una tele en wifi
   flojo no debe quedarse esperando una tipografía ajena. */
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/poppins-600.woff2') format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/poppins-700.woff2') format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:800;font-display:swap;
  src:url('/fonts/poppins-800.woff2') format('woff2')}

@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/nunito-400.woff2') format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/nunito-600.woff2') format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/nunito-700.woff2') format('woff2')}

:root{
  --tipo-titulo: Poppins, 'Segoe UI', system-ui, sans-serif;
  --tipo-texto: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;

  /* ── Tokens de marca ──────────────────────────────────────────
     Valores fijos. No cambian entre temas. */
  --navy-900:   #0a1530;   /* azul Quantum, fondo principal      */
  --navy-800:   #13224a;   /* superficie sobre el fondo          */
  --navy-700:   #1d2f63;   /* superficie elevada                 */
  --navy-logo:  #102442;   /* azul del wordmark; texto en claro  */
  --verde-500:  #6fc14b;   /* verde Quantum, el del isotipo      */
  --verde-700:  #367a22;   /* verde para TEXTO sobre fondo claro */
  --violeta-500:#6c5bd8;   /* acento secundario                  */
  --violeta-400:#7262e0;
  --nube-50:    #f1f4fc;
  --alerta-300: #ffb86b;   /* sólo riesgos o datos de ejemplo    */

  /* ── Degradados ───────────────────────────────────────────────
     Siempre de azul a violeta a verde, en ese orden. */
  --degradado-marca:  linear-gradient(90deg, #6c5bd8, #6fc14b);
  --degradado-fondo:  linear-gradient(160deg, #0a1530 40%, #2a2470 80%, #1f4a3a 100%);
  --degradado-violeta:linear-gradient(150deg, #7262e0, #6c5bd8);
  --degradado-cifra:  linear-gradient(120deg, #6fc14b, #cfefbf 45%, #6c5bd8);

  /* ── Radios ───────────────────────────────────────────────── */
  --radio-sm: 8px;    --radio-md: 14px;   --radio-lg: 18px;
  --radio-xl: 22px;   --radio-pildora: 999px;

  /* ══ TEMA CLARO · la aplicación del equipo ══════════════════ */
  --fondo:       var(--nube-50);
  --superficie:  #ffffff;
  --texto:       var(--navy-logo);
  --texto-suave: #5b6787;
  --texto-tenue: #5f6a89;
  --linea:       #dce2f0;

  /* El verde sólo va como relleno sobre claro. Como TEXTO sobre
     claro no alcanza contraste, por eso --acento-texto es otro. */
  --acento:        var(--verde-500);
  --acento-texto:  var(--verde-700);
  --acento-suave:  #eaf6e4;

  --violeta:       var(--violeta-500);
  --violeta-suave: #efecfd;

  /* ── Estados ──────────────────────────────────────────────── */
  --peligro:   #d6453f;
  --aviso:     #b56a00;
  --exito:     var(--verde-700);
  --peligro-suave: #fdeceb;
  --aviso-suave:   #fdf3e2;

  /* ── Nombres heredados ────────────────────────────────────────
     Las pantallas se escribieron con estos nombres. Se dejan
     apuntando a los tokens nuevos para no reescribir cada regla;
     lo que cambia es el valor, no el nombre. */
  --primary: var(--navy-900);
  --accent:  var(--verde-500);
  --danger:  var(--peligro);
  --warning: var(--aviso);
  --success: var(--exito);
  --bg:      var(--fondo);
  --border:  var(--linea);
}

/* ══ TEMA OSCURO · las pantallas de pared ════════════════════ */
body.tema-oscuro{
  --fondo:       var(--navy-900);
  --superficie:  var(--navy-800);
  --texto:       #eef2ff;
  --texto-suave: #9dabd0;
  --texto-tenue: #7d8cb6;
  --linea:       #26355f;

  /* Sobre azul el verde sí se lee, así que aquí sí va como texto */
  --acento-texto: var(--verde-500);
  --acento-suave: rgba(111,193,75,.14);
  --violeta-suave: rgba(108,91,216,.18);

  --peligro: #ff8d87;
  --aviso:   #ffb86b;
  --exito:   var(--verde-500);
  --peligro-suave: rgba(255,141,135,.14);
  --aviso-suave:   rgba(255,184,107,.14);

  --primary: var(--navy-800);
  --bg:      var(--navy-900);
}

/* ── Base ──────────────────────────────────────────────────── */
body{
  font-family: var(--tipo-texto);
  font-variant-numeric: tabular-nums;
}
h1,h2,h3,h4,h5,h6,
.tipo-titulo,.cifra{
  font-family: var(--tipo-titulo);
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* Títulos en oración normal, nunca en mayúsculas sostenidas. */
h1,h2,h3{text-transform:none}

/* ── Marcador de sección ───────────────────────────────────────
   El pétalo verde seguido de dos o tres palabras. Sustituye a las
   rayas, a las etiquetas en recuadro y a los encabezados en
   mayúsculas sostenidas. */
.marcador{
  display:flex; align-items:center; gap:8px;
  font-family: var(--tipo-titulo); font-weight:600; font-size:15px;
  color: var(--acento-texto); line-height:1.3;
}
.marcador::before{
  content:''; width:13px; height:13px; flex:none;
  background: var(--verde-500);
  border-radius:13px 0 13px 0;
  transform: rotate(45deg);
}

/* ── Cifra protagonista ────────────────────────────────────────
   Una por pieza. Sobre azul va en verde; con .cifra-degradado
   toma el degradado de marca. */
.cifra{
  font-size:48px; font-weight:800; line-height:1;
  color: var(--acento-texto);
}
.cifra-degradado{
  background: var(--degradado-cifra);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ── Barra de marca ────────────────────────────────────────────
   Franja fina de violeta a verde. Para barras de progreso y
   líneas de tiempo, nunca de fondo para texto. */
.barra-marca{
  height:4px; border-radius:var(--radio-pildora);
  background: var(--degradado-marca);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}