:root {
  /* Paleta Evolia (agosto 2026) — reemplaza la paleta institucional SENA/Zajuna
     que había antes. Los tonos salen directo del logo (icono + wordmark). */
  --evolia-azul: #1976d4;        /* Azul del ícono */
  --evolia-azul-oscuro: #0c255c; /* Azul marino del wordmark */
  --evolia-morado: #7c3aed;      /* Morado de acento (barras del ícono) */
  --evolia-grad: linear-gradient(120deg, #0c255c 0%, #1976d4 55%, #7c3aed 100%);

  /* Se conservan estos nombres internos, ahora con los colores de Evolia */
  --azul: #1976d4;            /* (color principal -> azul Evolia) */
  --azul-claro: #e8f0fd;      /* azul muy claro para fondos suaves */
  --verde: #1e8449;
  --amarillo: #b9770e;
  --rojo: #c0392b;
  --gris: #566573;
  --gris-claro: #f4f6f7;
  --borde: #d5dbdb;
  --radio: 10px;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--gris-claro);
  color: #1b2631;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.contenedor {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

.contenedor-ancho {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

header.top {
  background: var(--evolia-grad);
  color: white;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 3px solid var(--evolia-morado);
}

header.top a { color: white; text-decoration: none; font-weight: 600; }
header.top a.marca, header.top span.marca { display: inline-flex; align-items: center; gap: 8px; }
header.top .marca img { height: 24px; width: auto; border-radius: 4px; display: block; }
header.top .rol { font-size: 13px; opacity: 0.85; }

/* Campanita de avisos por inasistencia (se inserta desde api.js) */
header.top .campana {
  position: relative; display: inline-block; margin-right: 14px;
  font-size: 17px; line-height: 1; text-decoration: none; opacity: 0.9;
}
header.top .campana:hover { opacity: 1; }
header.top .campana .globo {
  position: absolute; top: -7px; right: -10px;
  background: white; color: var(--evolia-azul-oscuro);
  font-size: 10px; font-weight: 800; line-height: 1;
  padding: 3px 5px; border-radius: 999px; min-width: 8px; text-align: center;
}
header.top .campana.urgente .globo { background: #e74c3c; color: white; }

h1 { font-size: 22px; margin: 0 0 6px; }
h2 { font-size: 18px; margin: 24px 0 10px; }
p.subtitulo { color: var(--gris); margin-top: 0; }

.tarjeta {
  background: white;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; color: var(--gris); }
input, select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font-size: 15px;
}
input:focus, select:focus { outline: 2px solid var(--azul); border-color: var(--azul); }

/* Campo de contraseña con botón "ojito" para mostrar/ocultar */
.campo-clave { position: relative; }
.campo-clave input { padding-right: 46px; }
.campo-clave .ojo {
  position: absolute;
  right: 6px;
  top: 6px;
  bottom: 6px;
  margin: 0;
  padding: 0 10px;
  background: none;
  border: none;
  color: var(--gris);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.campo-clave .ojo:hover { opacity: 1; color: var(--azul); }

button, .boton {
  display: inline-block;
  background: var(--azul);
  color: white;
  border: none;
  padding: 11px 18px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 14px;
  text-decoration: none;
  text-align: center;
}
button:hover, .boton:hover { opacity: 0.92; }
button.secundario { background: white; color: var(--azul); border: 1px solid var(--azul); }
button.peligro { background: var(--rojo); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.tabs button { flex: 1; margin-top: 0; background: white; color: var(--gris); border: 1px solid var(--borde); }
.tabs button.activo { background: var(--azul); color: white; border-color: var(--azul); }

.error { background: #fdedec; color: var(--rojo); border: 1px solid #f5b7b1; padding: 10px 12px; border-radius: 8px; margin-top: 12px; font-size: 14px; }
.exito { background: #eafaf1; color: var(--verde); border: 1px solid #a9dfbf; padding: 10px 12px; border-radius: 8px; margin-top: 12px; font-size: 14px; }
.info { background: var(--azul-claro); color: var(--azul); border: 1px solid #aed6f1; padding: 10px 12px; border-radius: 8px; margin-top: 12px; font-size: 14px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--borde); }
th { background: var(--azul-claro); color: var(--azul); font-weight: 600; position: sticky; top: 0; }
tr:hover td { background: #fbfcfc; }

.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pill.ok { background: #eafaf1; color: var(--verde); }
.pill.medio { background: #fef5e7; color: var(--amarillo); }
.pill.mal { background: #fdedec; color: var(--rojo); }

.barra { background: var(--borde); border-radius: 6px; height: 8px; width: 100%; overflow: hidden; }
.barra > div { height: 100%; border-radius: 6px; }

.qr-caja { text-align: center; padding: 10px; }
.qr-caja img { width: 220px; height: 220px; border: 8px solid white; box-shadow: 0 2px 10px rgba(0,0,0,0.12); border-radius: 8px; }
.cuenta-regresiva { font-size: 13px; color: var(--gris); margin-top: 8px; }

.lista-fichas a { display: block; padding: 12px 14px; border: 1px solid var(--borde); border-radius: 8px; margin-bottom: 8px; text-decoration: none; color: #1b2631; background: white; }
.lista-fichas a:hover { border-color: var(--azul); }
.lista-fichas .codigo { font-weight: 700; color: var(--azul); font-size: 13px; }

.fila-stats { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.stat { flex: 1; min-width: 100px; background: white; border: 1px solid var(--borde); border-radius: 8px; padding: 12px; text-align: center; }
.stat .num { font-size: 22px; font-weight: 700; color: var(--azul); }
.stat .lbl { font-size: 12px; color: var(--gris); }

#lector-qr { width: 100%; border-radius: 8px; overflow: hidden; }

footer.nota { text-align: center; color: var(--gris); font-size: 12px; margin-top: 30px; }
.pie-evolia { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; opacity: 0.85; }
.pie-evolia img { height: 15px; width: auto; border-radius: 3px; }
.pie-evolia span { font-size: 12px; }
.pie-evolia a { color: var(--gris); font-size: 12px; text-decoration: none; border: 1px solid var(--borde); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pie-evolia a:hover { color: var(--evolia-azul); border-color: var(--evolia-azul); }

.login-marca { text-align: center; margin-bottom: 14px; }
.login-marca img { height: 54px; width: auto; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.12); background: white; }

/* =====================================================================
   PORTADA (login.html / login_docente.html) — rediseño oscuro y futurista,
   agosto 2026.

   TODO va scoped bajo body.pagina-portada / .portada / .tarjeta-cristal.
   Es a propósito: así el dashboard, los reportes y las pantallas del
   aprendiz siguen intactas con el tema claro mientras se rediseñan una
   por una. Cuando le toque el turno a cada una, se le pone su clase de
   página y hereda este mismo lenguaje visual. Nada de restilar `button`,
   `input` o `.tarjeta` a secas: eso reventaría los colores de estado
   (verde/amarillo/rojo de presente/medio/ausente), que NO son colores de
   marca y no se tocan nunca.
   ===================================================================== */

/* ---------- 1. El fondo ----------------------------------------------
   El color va en el body (plano y oscuro) y los degradados van en un DIV
   aparte, .fondo, fijo a la pantalla.

   ¿Por qué no todo en el body con background-attachment: fixed? Porque
   así el navegador solo pinta el alto de la ventana y, en cuanto la
   página crece un poco (el móvil con el formulario de registro abierto),
   lo de más abajo se queda BLANCO. Además Safari en iPhone lleva años
   con ese atributo medio roto. Una capa fija de verdad no tiene ninguno
   de los dos problemas.
   --------------------------------------------------------------------- */
body.pagina-portada {
  margin: 0;
  min-height: 100vh;
  color: #e6ecfa;
  overflow-x: hidden;
  /* Base que acompaña al scroll. .fondo (fijo) va encima y es lo que se
     ve siempre; esto es la red de seguridad para que, pase lo que pase,
     por debajo no aparezca ni un pixel blanco. */
  background: linear-gradient(135deg, #020617 0%, #081529 45%, #0f172a 100%);
  background-color: #020617;
}

.fondo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 20%, rgba(25,118,212,0.35), transparent 30%),
    radial-gradient(circle at 85% 10%, rgba(124,58,237,0.28), transparent 25%),
    radial-gradient(circle at 80% 80%, rgba(25,118,212,0.15), transparent 35%),
    linear-gradient(135deg, #020617 0%, #081529 45%, #0f172a 100%);
}

/* Rejilla sutil de 50px que se desvanece hacia abajo. Es lo que le da la
   sensación de "plano técnico" sin que se note el truco. */
.fondo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 50px 50px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
  opacity: 0.35;
}

/* Segunda capa de iluminación, arriba a la derecha. */
.fondo::after {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  right: -200px;
  top: -150px;
  background: radial-gradient(circle, rgba(25,118,212,0.25), transparent 70%);
  filter: blur(80px);
}

/* Partículas flotantes. Va en su propio div para que la animación no
   arrastre el degradado. */
.particulas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, #2ba7ff 1px, transparent 1px),
    radial-gradient(circle, #7c3aed 1px, transparent 1px);
  background-size: 180px 180px;
  background-position: 0 0, 90px 90px;
  opacity: 0.18;
  animation: flotando 25s linear infinite;
}
@keyframes flotando {
  from { transform: translateY(0); }
  to   { transform: translateY(-180px); }
}

/* Quien tenga activado "reducir movimiento" en su equipo no ve nada
   moverse. Es accesibilidad básica y cuesta tres líneas. */
@media (prefers-reduced-motion: reduce) {
  .particulas { animation: none; }
  .portada-marca,
  .portada-hero h1,
  .portada-hero p.portada-subtitulo,
  .portada-beneficios,
  .tarjeta-cristal { animation: none !important; }
}

/* ---------- 2. Estructura: contenido centrado, pie abajo -------------- */
.portada {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 36px 20px 24px;
}

/* DOS COLUMNAS: a la izquierda el discurso (marca, titular y los tres
   beneficios), a la derecha el formulario. Es la que eligió Kely después
   de ver las dos — "me gusta mas esta presentacion".

   Se probó también una versión de una sola columna centrada y se
   descartó: se veía más limpia, pero la de dos columnas le da a quien
   llega por primera vez el "¿qué es esto?" al lado del "entra aquí", y
   esta pantalla también sirve de carta de presentación del sistema.

   flex:1 + align-content:center = el bloque se centra verticalmente en la
   ventana y el pie se va solo al borde de abajo, sin el hueco raro que
   quedaba al centrar los dos juntos. */
.portada-grid {
  flex: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  grid-template-areas:
    "hero       tarjeta"
    "beneficios tarjeta";
  column-gap: 56px;
  row-gap: 32px;
  align-content: center;
}
.portada-hero       { grid-area: hero; align-self: end; }
.portada-beneficios { grid-area: beneficios; align-self: start; }
.tarjeta-cristal    { grid-area: tarjeta; align-self: center; }

/* En el móvil el orden cambia a propósito: titular, FORMULARIO, y los
   beneficios debajo. Quien abre esto en el celular viene a entrar, no a
   que le vendan el sistema; el formulario tiene que caer de una vez. */
@media (max-width: 900px) {
  .portada { padding: 24px 18px 20px; }
  .portada-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "hero" "tarjeta" "beneficios";
    row-gap: 26px;
    max-width: 470px;
    align-content: start;
  }
  .portada-hero, .portada-beneficios, .tarjeta-cristal { align-self: auto; }
}

/* Entrada suave al cargar: primero la marca, luego el texto, luego la
   tarjeta. Son 0.8s en total: no se siente lento, pero sí se siente
   "hecho a propósito". */
@keyframes entrar {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.portada-marca { animation: entrar 0.6s ease both; }
.portada-hero h1,
.portada-hero p.portada-subtitulo { animation: entrar 0.6s ease 0.08s both; }
.tarjeta-cristal { animation: entrar 0.6s ease 0.16s both; }
.portada-beneficios { animation: entrar 0.6s ease 0.24s both; }

/* ---------- 3. El logo ------------------------------------------------
   Se usa el lockup de marca en versión clara (letras blancas), así que no
   hace falta la placa blanca detrás: el resplandor azul basta y se ve
   mucho más limpio sobre el fondo oscuro.
   --------------------------------------------------------------------- */
.portada-marca {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}
.portada-marca img {
  height: 64px;
  width: auto;
  filter: drop-shadow(0 0 34px rgba(25,118,212,0.45));
}
@media (max-width: 900px) {
  .portada-marca { margin-bottom: 16px; }
  .portada-marca img { height: 50px; }
}

/* ---------- 4. Titular y subtítulo ------------------------------------
   El max-width del subtítulo no es decorativo: pasadas unas 70 letras por
   renglón el ojo pierde el salto de línea.
   --------------------------------------------------------------------- */
.portada-hero h1 {
  font-size: 40px;
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -1px;
  margin: 0 0 16px;
  color: #ffffff;                       /* respaldo si no se puede recortar */
  background: linear-gradient(90deg, #ffffff, #dbeafe, #93c5fd);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.portada-hero p.portada-subtitulo {
  color: #b8c7e5;
  font-size: 16.5px;
  line-height: 1.55;
  margin: 0;
  max-width: 450px;
}
@media (max-width: 900px) {
  .portada-hero h1 { font-size: 29px; letter-spacing: -0.6px; }
  .portada-hero p.portada-subtitulo { font-size: 14.5px; }
}

/* ---------- 5. Los tres beneficios ------------------------------------ */
/* Lista vertical debajo del titular, con el icono a la izquierda. Van en
   la columna del texto, no en la del formulario. */
.portada-beneficios {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 440px;
}
.portada-beneficios li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.portada-beneficios strong {
  display: block;
  color: #ffffff;
  font-size: 15px;
  margin-bottom: 3px;
  font-weight: 700;
}
.portada-beneficios .beneficio-detalle {
  display: block;
  color: #93a6c8;
  font-size: 13.5px;
  line-height: 1.45;
}
.portada-beneficios .icono-beneficio {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(140deg, rgba(25,118,212,0.22), rgba(124,58,237,0.22));
  border: 1px solid rgba(142,160,255,0.30);
  box-shadow: 0 8px 22px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #93c5fd;
  transition: 0.3s;
}
.portada-beneficios li:hover .icono-beneficio {
  color: #ffffff;
  border-color: rgba(142,160,255,0.55);
  box-shadow: 0 10px 28px rgba(25,118,212,0.28), inset 0 1px 0 rgba(255,255,255,0.16);
}

/* ---------- 6. La tarjeta de cristal ---------------------------------- */
.tarjeta-cristal {
  position: relative;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 24px;
  padding: 30px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 30px 70px rgba(0,0,0,0.35), 0 0 80px rgba(25,118,212,0.08);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.tarjeta-cristal:hover {
  transform: translateY(-5px);
  box-shadow: 0 40px 90px rgba(0,0,0,0.45), 0 0 100px rgba(25,118,212,0.18);
}
@media (max-width: 900px) {
  .tarjeta-cristal { padding: 22px 18px; border-radius: 20px; }
  /* En el celular no hay ratón: levantar la tarjeta solo estorba. */
  .tarjeta-cristal:hover { transform: none; }
}

.tarjeta-cristal > p.subtitulo:first-child {
  color: #cbd8f0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.tarjeta-cristal .subtitulo { color: #93a6c8; font-size: 13.5px; line-height: 1.5; }
.tarjeta-cristal label {
  color: #c8d4ec;
  font-size: 13px;
  font-weight: 600;
  margin: 14px 0 6px;
}

/* ---------- 7. Campos ------------------------------------------------- */
.tarjeta-cristal input,
.tarjeta-cristal select {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  color: #ffffff;
  padding: 14px;
  border-radius: 14px;
  font-size: 15px;
  transition: 0.3s;
}
.tarjeta-cristal input::placeholder { color: #93a6c8; }
.tarjeta-cristal input:focus,
.tarjeta-cristal select:focus {
  outline: none;
  border-color: #32b7ff;
  box-shadow: 0 0 25px rgba(50,183,255,0.25);
  background: rgba(255,255,255,0.08);
}
.tarjeta-cristal .campo-clave input { padding-right: 50px; }
.tarjeta-cristal .ojo { color: #93a6c8; }
.tarjeta-cristal .ojo:hover { color: #ffffff; }

/* Autocompletar de Chrome: por defecto pinta el campo de amarillo y se
   carga el diseño. Este truco lo deja en el mismo tono del formulario. */
.tarjeta-cristal input:-webkit-autofill,
.tarjeta-cristal input:-webkit-autofill:hover,
.tarjeta-cristal input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  -webkit-box-shadow: 0 0 0 1000px #10203c inset;
  caret-color: #ffffff;
  transition: background-color 9999s ease-in-out 0s;
}

/* ---------- 8. Botones ------------------------------------------------ */
.tarjeta-cristal button:not(.ojo) {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #1976d4, #3aa8ff, #7c3aed);
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  box-shadow: 0 20px 40px rgba(25,118,212,0.30);
}
.tarjeta-cristal button:not(.ojo):hover {
  transform: translateY(-2px);
  opacity: 1;
  box-shadow: 0 25px 55px rgba(25,118,212,0.45);
}
.tarjeta-cristal button:not(.ojo):active { transform: translateY(0); }

/* Las dos pestañas (Iniciar sesión / Registrarme) son secundarias: si
   llevaran el mismo degradado que el botón principal, competirían con él
   y la pantalla perdería el punto de entrada claro. */
.tarjeta-cristal .tabs { gap: 8px; }
.tarjeta-cristal .tabs button {
  padding: 11px;
  font-size: 14.5px;
  background: rgba(255,255,255,0.05);
  color: #a9b7d4;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: none;
  border-radius: 12px;
}
.tarjeta-cristal .tabs button:hover {
  transform: none;
  color: #ffffff;
  background: rgba(255,255,255,0.09);
  box-shadow: none;
}
.tarjeta-cristal .tabs button.activo {
  background: linear-gradient(135deg, #1976d4, #3aa8ff, #7c3aed);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(25,118,212,0.28);
}

/* ---------- 9. Avisos dentro de la tarjeta ---------------------------- */
.aviso-enlace {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(25,118,212,0.10);
  border: 1px solid rgba(25,118,212,0.28);
}
.aviso-enlace p.subtitulo { color: #b9d3f7; font-size: 13px; line-height: 1.5; }

.tarjeta-cristal .error { background: rgba(231,76,60,0.16); color: #ff9086; border: 1px solid rgba(231,76,60,0.40); border-radius: 12px; }
.tarjeta-cristal .exito { background: rgba(30,132,73,0.20); color: #7be3a8; border: 1px solid rgba(30,132,73,0.45); border-radius: 12px; }
.tarjeta-cristal .info  { background: rgba(25,118,212,0.18); color: #8fc1ff; border: 1px solid rgba(25,118,212,0.45); border-radius: 12px; }

/* ---------- 10. Pie ---------------------------------------------------- */
.portada footer.nota {
  color: #6f7fa4;
  margin-top: 34px;
  position: relative;
  z-index: 1;
}
.portada .pie-evolia a { color: #b8c7e5; border-color: rgba(255,255,255,0.18); }
.portada .pie-evolia a:hover { color: #ffffff; border-color: #ffffff; background: rgba(255,255,255,0.06); }