/* ============================================================================
   ont-tema.css - Tema visual compartido de la Plataforma ONT (Federacion ONT Chile)
   ============================================================================
   Lo cargan TODAS las paginas en el <head>, antes de su propio <style>:

     <link rel="stylesheet" href="./ont-tema.css">
     <script src="./ont-guia.js"></script>

   Define:
     1. Tokens semanticos en :root (tema claro, identidad ONT Chile: azul, rojo,
        blanco) y en :root[data-tema="oscuro"] (carbon y dorado, la paleta
        historica de la plataforma). El atributo data-tema lo pone ont-guia.js
        en <html> antes de pintar.
     2. Puente de compatibilidad: los nombres viejos (--carbon, --dorado,
        --crema, --linea, --rojo...) apuntan a los tokens nuevos. Cada pagina
        BORRA su bloque :root { ... } y queda tematizada al tiro; despues se
        reemplazan los colores fijos (rgba(201,162,39,...), #fff...) por
        var(--token).
     3. Transicion suave de colores al cambiar de tema (clase html.ont-cambiando
        que ont-guia.js pone durante 0,4 s).
     4. Clase .ont-pulso (anillo que late tres veces) para resaltar un elemento.
     5. Estilos de la barra superior comun (.ont-barra), de los controles
        (boton Tutorial y switch de tema) y del motor de tutorial (velo con
        agujero y burbuja). Solo usan tokens: cambian con el tema.

   Reglas: sin fuentes externas (pila del sistema), sin emojis, botones de 40 px
   minimo, usable a 360 px sin desplazamiento horizontal del cuerpo.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. TOKENS - TEMA CLARO (por defecto): identidad Federacion ONT Chile
   --------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --fuente: -apple-system, "Segoe UI", system-ui, Roboto, Arial, sans-serif;
  --fuente-mono: Consolas, Menlo, monospace;
  --radio: 6px;

  /* Fondos y superficies (grises frios, blanco) */
  --fondo: #f4f6fa;
  --fondo-2: #e9edf4;
  --superficie: #ffffff;
  --superficie-2: #edf1f7;

  /* Bordes. --borde queda para separadores y tarjetas; --borde-campo es el
     contorno de campos de formulario (input, select, textarea): 3,5:1 sobre
     blanco, 3:1 sobre --superficie-2 (minimo para contornos de controles). */
  --borde: #cdd5e3;
  --borde-tenue: #e2e7f0;
  --borde-campo: #7d89a1;

  /* Texto (azul marino muy oscuro y sus grises) */
  --texto: #0f1e3d;
  --texto-suave: #4b5771;
  /* #5a6480: contraste 5:1 tambien sobre --superficie-2 y --fondo-2 (el
     anterior #6b7590 quedaba en 4,2:1 sobre los fondos grises). */
  --texto-tenue: #5a6480;

  /* Acento principal: azul del logo */
  --acento: #0033A0;
  --acento-fuerte: #00236f;
  --acento-texto: #ffffff;
  --acento-suave: rgba(0, 51, 160, 0.10);
  --acento-tenue: rgba(0, 51, 160, 0.045);

  /* Secundario: rojo del logo (franjas, detalles, nunca texto largo) */
  --secundario: #D52B1E;
  --secundario-texto: #ffffff;

  /* Estados */
  --alerta: #b9231a;
  --alerta-borde: rgba(213, 43, 30, 0.55);
  --alerta-suave: rgba(213, 43, 30, 0.08);
  --exito: #1a7030; /* 5,6:1 tambien sobre --exito-suave (sellos "vigente") */
  --exito-suave: rgba(30, 126, 52, 0.10);
  --foco: #2a5fd0;

  /* Sombra, velo de modales, banda de datos de prueba */
  --sombra: 0 1px 3px rgba(15, 30, 70, 0.08), 0 8px 24px rgba(15, 30, 70, 0.10);
  --velo: rgba(8, 18, 48, 0.55);
  --banda-fondo: #D52B1E;
  --banda-texto: #ffffff;

  /* Barra superior: franja de identidad sobre la barra */
  --barra-fondo: #ffffff;
  --barra-franja: linear-gradient(90deg, #D52B1E 0 28%, #0033A0 28% 100%);

  /* Motor de tutorial */
  --guia-velo: rgba(4, 14, 44, 0.66);
  --guia-marco: #D52B1E;
  --guia-fondo: #ffffff;
  --guia-borde: #cdd5e3;
  --guia-paso: #D52B1E;
  --guia-titulo: #00236f;
  --guia-texto: #1c2434;
  --guia-boton-fondo: #0033A0;
  --guia-boton-texto: #ffffff;

  /* Pulso del boton Tutorial */
  --pulso: rgba(213, 43, 30, 0.55);
}

/* ---------------------------------------------------------------------------
   1b. TOKENS - TEMA OSCURO: carbon y dorado (paleta historica de la plataforma)
   --------------------------------------------------------------------------- */
:root[data-tema="oscuro"] {
  color-scheme: dark;

  --fondo: #16161a;
  --fondo-2: #1d1d23;
  --superficie: #1d1d23;
  --superficie-2: #24242b;

  --borde: rgba(201, 162, 39, 0.35);
  --borde-tenue: rgba(201, 162, 39, 0.16);
  --borde-campo: rgba(201, 162, 39, 0.62);

  --texto: #f2efe9;
  /* Opacidades minimas para leer texto chico sobre --superficie-2 (4,5:1):
     con 0,36 las etiquetas y encabezados de tabla quedaban en 3:1. */
  --texto-suave: rgba(242, 239, 233, 0.68);
  --texto-tenue: rgba(242, 239, 233, 0.52);

  --acento: #c9a227;
  --acento-fuerte: #e8c766;
  --acento-texto: #16161a;
  --acento-suave: rgba(201, 162, 39, 0.12);
  --acento-tenue: rgba(201, 162, 39, 0.04);

  --secundario: #b0413e;
  --secundario-texto: #f2efe9;

  /* --alerta se usa como color de TEXTO (morosidad, errores, decrece): el rojo
     historico #b0413e daba 3:1 sobre carbon. Se aclara para leerse; el rojo
     de fondo con texto crema sigue siendo --secundario. */
  --alerta: #e66a62;
  --alerta-borde: rgba(176, 65, 62, 0.6);
  --alerta-suave: rgba(176, 65, 62, 0.12);
  --exito: #7fb069;
  --exito-suave: rgba(127, 176, 105, 0.12);
  --foco: #e8c766;

  --sombra: 0 10px 30px rgba(0, 0, 0, 0.5);
  --velo: rgba(10, 10, 12, 0.78);
  /* La banda DATOS DE PRUEBA es una alerta: rojo historico, nunca el dorado de
     la marca (crema sobre #b0413e: 4,96:1). */
  --banda-fondo: #b0413e;
  --banda-texto: #f2efe9;

  --barra-fondo: #16161a;
  --barra-franja: linear-gradient(90deg, #c9a227 0 100%);

  --guia-velo: rgba(0, 0, 0, 0.78);
  --guia-marco: #e8c766;
  --guia-fondo: #1d1d23;
  --guia-borde: rgba(201, 162, 39, 0.6);
  --guia-paso: #c9a227;
  --guia-titulo: #f2efe9;
  --guia-texto: #c9c9d2;
  --guia-boton-fondo: #c9a227;
  --guia-boton-texto: #151003;

  --pulso: rgba(232, 199, 102, 0.6);
}

/* ---------------------------------------------------------------------------
   2. PUENTE DE COMPATIBILIDAD (nombres viejos -> tokens nuevos)
   Cada pagina borra su propio bloque :root { --carbon ... } y estas alias
   entran en su lugar. Son temporales: al migrar una pagina se reemplaza cada
   var(--carbon) por var(--fondo), etc. y este bloque deja de importar.
   --------------------------------------------------------------------------- */
:root {
  --carbon: var(--fondo);
  --carbon-2: var(--superficie);
  --carbon-3: var(--superficie-2);
  --dorado: var(--acento);
  --dorado-claro: var(--acento-fuerte);
  --crema: var(--texto);
  --crema-dim: var(--texto-suave);
  --crema-tenue: var(--texto-tenue);
  --linea: var(--borde);
  --linea-tenue: var(--borde-tenue);
  --rojo: var(--alerta);
  --suave: var(--texto-suave);
  --alerta-vieja: var(--alerta);
}

/* ---------------------------------------------------------------------------
   3. BASE MINIMA (cada pagina conserva su propio CSS; esto solo fija el piso)
   --------------------------------------------------------------------------- */
html {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
}
body { background: var(--fondo); color: var(--texto); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
::selection { background: var(--acento-suave); }

/* Transicion suave al cambiar de tema: ont-guia.js pone html.ont-cambiando
   durante 0,4 s. Fuera de ese momento no hay transiciones globales (asi las
   tablas, modales y pestanas no se sienten lentas). */
html.ont-cambiando,
html.ont-cambiando *,
html.ont-cambiando *::before,
html.ont-cambiando *::after {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease,
              box-shadow 0.35s ease, fill 0.35s ease, stroke 0.35s ease !important;
}

/* ---------------------------------------------------------------------------
   4. PULSO: anillo que late tres veces (1,5 s x 3 = 4,5 s; el JS quita la
   clase a los 6 s). Con "reducir movimiento" no se anima: queda un anillo fijo.
   --------------------------------------------------------------------------- */
.ont-pulso {
  animation: ont-latido 1.5s ease-out 3;
}
@keyframes ont-latido {
  0%   { box-shadow: 0 0 0 0 var(--pulso); }
  70%  { box-shadow: 0 0 0 12px rgba(0, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

/* ---------------------------------------------------------------------------
   5. BARRA SUPERIOR COMUN (.ont-barra) - la genera ONT_UI.barra(opciones)
   --------------------------------------------------------------------------- */
.ont-barra {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 11px 20px 8px;
  background: var(--barra-fondo);
  border-bottom: 1px solid var(--borde);
  font-family: var(--fuente);
  color: var(--texto);
}
.ont-barra::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--barra-franja);
}
.ont-barra-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.ont-barra-marca img { width: 40px; height: 40px; flex: none; display: block; box-sizing: border-box; }
/* En oscuro el azul del logo se perdia sobre el carbon: disco claro detras. */
:root[data-tema="oscuro"] .ont-barra-marca img { background: #f2efe9; border-radius: 50%; padding: 2px; }
.ont-barra-marca strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--texto);
  line-height: 1.2;
}
.ont-barra-marca span {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acento);
  margin-top: 2px;
}
.ont-barra-nav { display: flex; gap: 2px; flex-wrap: wrap; }
.ont-barra-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px;
  color: var(--texto-suave);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
}
.ont-barra-nav a:hover { color: var(--texto); }
.ont-barra-nav a.activo { color: var(--acento); border-bottom-color: var(--acento); font-weight: 600; }
.ont-barra-derecha {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
  margin-left: auto;
}
.ont-barra-quien {
  font-size: 13px;
  color: var(--texto);
  text-align: right;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ont-barra-quien small {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.ont-barra .ont-boton {
  background: none;
  border: 1px solid var(--borde);
  color: var(--texto-suave);
  font: inherit;
  font-size: 13px;
  min-height: 40px;
  padding: 6px 14px;
  border-radius: var(--radio);
  cursor: pointer;
}
.ont-barra .ont-boton:hover { color: var(--texto); border-color: var(--acento); }
@media (max-width: 720px) {
  .ont-barra { padding: 9px 12px 7px; gap: 6px 10px; }
  .ont-barra-marca span { display: none; }
  .ont-barra-marca img { width: 34px; height: 34px; }
  .ont-barra-quien { max-width: 140px; }
  .ont-barra-derecha { margin-left: 0; width: 100%; }
  /* Un solo enlace que es la pagina actual (ej. "Mi credencial") no aporta
     nada en el celular y ocupaba una fila entera. */
  .ont-barra-nav.ont-barra-nav-unica { display: none; }
}
/* A 360 px la barra usa como maximo tres filas (cuatro con enlaces y un boton
   propio de la pagina, como Proyectar):
     1. logo y nombre + Tutorial y switch de tema (sin texto)
     2. enlaces de secciones (si hay mas de uno)
     3. nombre y cargo del usuario + Contrasena + Salir
     4. botones propios de la pagina
   .ont-barra-derecha se "disuelve" (display: contents) para que sus hijos se
   ordenen como items de la barra. */
@media (max-width: 480px) {
  .ont-barra { gap: 6px 8px; }
  .ont-barra-marca { gap: 8px; order: 0; }
  .ont-barra-marca img { width: 30px; height: 30px; }
  .ont-barra-marca strong { font-size: 14px; letter-spacing: 0.02em; }
  .ont-barra-derecha { display: contents; }
  .ont-barra .ont-controles { order: 1; margin-left: auto; }
  .ont-barra-nav { order: 2; width: 100%; }
  .ont-barra-nav a { padding: 8px 8px; letter-spacing: 0.04em; }
  .ont-barra-derecha > * { order: 5; margin-left: auto; }
  .ont-barra-derecha > .ont-barra-quien { order: 3; flex: 1 1 110px; min-width: 0; max-width: none; text-align: left; margin-left: 0; }
  .ont-barra-derecha > .ont-boton-clave,
  .ont-barra-derecha > .ont-boton-salir { order: 4; margin-left: 0; }
  .ont-barra .ont-boton { padding: 6px 12px; }
}

/* ---------------------------------------------------------------------------
   5b. CONTROLES: boton Tutorial + switch de tema (ONT_UI.montarControles)
   --------------------------------------------------------------------------- */
.ont-controles {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* El hueco donde montarBarra() coloca los controles no debe sumar una caja. */
.ont-controles-slot { display: contents; }
/* Tutorial va con contorno: el relleno de color queda para la accion principal
   de cada pagina (Proyectar, Nueva academia, Registrar examen). Cuando hace
   falta llamar la atencion, el pulso se encarga. */
.ont-boton-tutorial {
  background: transparent;
  color: var(--acento);
  border: 1px solid var(--acento);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  min-height: 40px;
  padding: 6px 16px;
  border-radius: var(--radio);
  cursor: pointer;
}
.ont-boton-tutorial:hover { background: var(--acento-suave); color: var(--acento-fuerte); border-color: var(--acento-fuerte); }
.ont-boton-tutorial[aria-expanded="true"] { background: var(--acento); color: var(--acento-texto); }

.ont-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto-suave);
  font: inherit;
  font-size: 13px;
  min-height: 40px;
  padding: 6px 12px 6px 8px;
  cursor: pointer;
}
.ont-switch:hover { color: var(--texto); border-color: var(--acento); }
.ont-switch-pista {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--borde);
  flex: none;
  transition: background-color 0.25s ease;
}
.ont-switch-bola {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--superficie);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 0.25s ease;
}
.ont-switch[aria-checked="true"] .ont-switch-pista { background: var(--acento); }
.ont-switch[aria-checked="true"] .ont-switch-bola { transform: translateX(16px); }
.ont-switch-texto { white-space: nowrap; }
/* A 360 px: el switch queda solo con la pista (el texto sigue para lectores
   de pantalla) para que Tutorial y el switch quepan junto al logo. */
@media (max-width: 480px) {
  .ont-controles { gap: 6px; }
  .ont-boton-tutorial { padding: 6px 12px; }
  .ont-switch { padding: 6px 8px; gap: 0; }
  .ont-switch-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ---------------------------------------------------------------------------
   5c. MOTOR DE TUTORIAL: velo con agujero + burbuja (ONT_UI.abrirGuia)
   z-index 1000: por encima de modales (150), proyeccion (100) y banda (200).
   --------------------------------------------------------------------------- */
#ont-tourfs { position: fixed; inset: 0; z-index: 1000; font-family: var(--fuente); }
.ont-tour-hole {
  position: fixed;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px var(--guia-velo);
  border: 2px solid var(--guia-marco);
  pointer-events: none;
  transition: left 0.22s ease, top 0.22s ease, width 0.22s ease, height 0.22s ease;
}
.ont-tour-bub {
  position: fixed;
  max-width: 320px;
  background: var(--guia-fondo);
  border: 1px solid var(--guia-borde);
  border-radius: 12px;
  padding: 14px 15px 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
  color: var(--guia-texto);
}
.ont-tour-bub .ont-tb-paso {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--guia-paso);
  font-weight: 700;
}
.ont-tour-bub .ont-tb-tit {
  font-weight: 700;
  font-size: 16px;
  margin: 5px 0 4px;
  color: var(--guia-titulo);
  line-height: 1.25;
}
.ont-tour-bub .ont-tb-txt { font-size: 13.5px; line-height: 1.5; color: var(--guia-texto); }
.ont-tour-bub .ont-tb-row { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.ont-tour-bub .ont-tb-skip {
  background: none;
  border: none;
  color: var(--texto-suave);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 8px;
  min-height: 40px;
  border-radius: var(--radio);
}
.ont-tour-bub .ont-tb-skip:hover { color: var(--texto); }
.ont-tour-bub .ont-tb-next {
  flex: 1;
  background: var(--guia-boton-fondo);
  color: var(--guia-boton-texto);
  border: none;
  border-radius: 8px;
  padding: 11px 12px;
  min-height: 40px;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12.5px;
  cursor: pointer;
}
.ont-tour-bub .ont-tb-next:hover { filter: brightness(1.08); }

/* ---------------------------------------------------------------------------
   6. Reducir movimiento: sin latido ni deslizamientos.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.ont-cambiando, html.ont-cambiando *,
  html.ont-cambiando *::before, html.ont-cambiando *::after { transition: none !important; }
  .ont-pulso { animation: none; box-shadow: 0 0 0 3px var(--pulso); }
  .ont-tour-hole, .ont-switch-pista, .ont-switch-bola { transition: none; }
}

/* Impresion: nada de la capa de guia ni de la barra en el papel. */
@media print {
  #ont-tourfs, .ont-controles { display: none !important; }
}
