/*
Theme Name: GTA Becas
Description: Tema ligero del Portal de Becados GTA — "Becas G&G: Futuro Digital". Design tokens y componentes según DESIGN.md. Sin frameworks (presupuesto §8).
Version: 0.1.6
Author: GTA
Text Domain: gta-becas
*/

/* ===== Tipografía — Nunito autoalojada (DESIGN.md §2 y §8) =====
   Se sirve desde el tema y no desde fonts.gstatic.com por dos razones que no
   admiten atajo: la cabecera Content-Security-Policy de ops/nginx-becas.conf
   declara `default-src 'self'` y no abre ningún `font-src`, así que una petición
   al CDN se bloquearía y el portal se quedaría en el system-ui de respaldo; y
   DESIGN.md §2 lo prohíbe por privacidad, porque el CDN vería la IP de cada
   becario menor de edad en cada visita.

   Un único archivo variable en lugar de tres estáticos porque sale más barato
   por los dos lados: 38,2 KB en una descarga frente a 47,9 KB en tres
   (16,0 + 15,8 + 16,1 KB medidos sobre los mismos subsets), y el tema sólo
   necesita 400 cuerpo, 700 subtítulos y 800 títulos/cifras.

   El rango 200-1000 no es una elección de diseño: es el eje `wght` real que
   trae el archivo (leído de su tabla fvar). Declarar menos obligaría al
   navegador a recortar pesos que la fuente sí sabe dibujar.

   El `unicode-range` es el subset «latin» de Google, el mismo que cubre el
   archivo (verificado: 230 puntos de código, con todas las acentuadas, la ñ y
   los signos de apertura del español). Está declarado para que un carácter
   fuera de ese rango vaya directo a la familia de respaldo en vez de salir como
   cuadrito vacío dibujado por Nunito. */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  /* swap y no block: en internet lento se lee antes con system-ui que esperando. */
  font-display: swap;
  src: url('assets/fuentes/nunito-variable-latino.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Design tokens — DESIGN.md §2 (copiados tal cual) ===== */
:root {
  --teal-700: #0A4540;
  --teal-600: #0E5B55;
  --teal-500: #14766E;
  --teal-100: #DDEBE9;
  --teal-50:  #EEF4F3;

  --sol-400:  #FFC24B;
  --sol-100:  #FFF3D9;
  --coral-600:#C74532;
  --coral-400:#E85D4A;

  --tinta:      #1E2B29;
  --secundario: #52625F;
  --fondo:      #F6F8F7;
  --superficie: #FFFFFF;
  --borde:      #E3E8E6;

  --exito: #2E7D32;  --error: #C4402F;  --info: #2A6FB0;

  --font: 'Nunito', system-ui, -apple-system, sans-serif;
  --fs-900: clamp(1.75rem, 4vw, 2.5rem);
  --fs-700: clamp(1.25rem, 2.5vw, 1.5rem);
  --fs-500: 1.0625rem;
  --fs-400: 0.9375rem;
  --fs-300: 0.8125rem;

  --r-lg: 20px;  --r-md: 14px;  --r-sm: 10px;  --r-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --sombra-card: 0 1px 3px rgb(14 91 85 / .08), 0 4px 16px rgb(14 91 85 / .06);
  --sombra-flotante: 0 8px 28px rgb(14 91 85 / .18);
  --touch-min: 44px;
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }

/*
 * `hidden` tiene que ocultar, siempre. La regla del navegador es `[hidden]{display:none}` con
 * especificidad mínima, así que cualquier `display` de este archivo la anula sin avisar. Ya
 * había roto cuatro cosas a la vez, todas silenciosas porque el JavaScript sí ponía
 * `elemento.hidden = true` y nadie veía que en pantalla no pasaba nada: los chips de filtro de
 * /cursos/ (Todos, En progreso, Completados, Bonus), el buscador de /guias/, las cards fantasma
 * y el panel del chat. Es decir, todos los filtros y buscadores del portal eran decorativos.
 *
 * El `!important` es deliberado y es lo que cierra la familia entera: sin él, cada `display`
 * nuevo que alguien escriba mañana vuelve a abrir el mismo agujero. Un elemento que deba
 * mostrarse no lleva `hidden`, así que no hay caso legítimo que este `!important` estorbe.
 */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-500);
  line-height: 1.55;
  color: var(--tinta);
  background: var(--fondo);
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--teal-600); }
h1 { font-size: var(--fs-900); font-weight: 800; line-height: 1.15; margin: 0 0 var(--sp-4); }
h2 { font-size: var(--fs-700); font-weight: 800; margin: 0 0 var(--sp-3); }
h3 { font-size: var(--fs-500); font-weight: 700; margin: 0 0 var(--sp-2); }
p { margin: 0 0 var(--sp-3); }
.texto-sec { color: var(--secundario); font-size: var(--fs-400); }
.texto-urgente { color: var(--coral-600); font-weight: 800; }
code { background: var(--teal-50); border-radius: 6px; padding: 1px 6px; font-size: .9em; }
:focus-visible { outline: 3px solid rgb(14 91 85 / .35); outline-offset: 2px; border-radius: 4px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

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

/* ===== Layout ===== */
.gta-main { max-width: 1080px; margin: 0 auto; padding: var(--sp-5) var(--sp-4) 96px; }
@media (min-width: 1025px) { .gta-main { padding-bottom: var(--sp-7); } }

/* ===== Navbar — DESIGN §3 ===== */
.gta-navbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--teal-600); color: #fff;
  height: 56px; display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-4);
}
@media (min-width: 1025px) { .gta-navbar { height: 64px; } }
/* El logo es el «volver a inicio» de todo el portal: es un control, no un rótulo, y en
   móvil se toca con el pulgar. Medía 27 px de alto (DESIGN §2 pide --touch-min). */
.gta-navbar__logo { color: #fff; text-decoration: none; font-weight: 800; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; min-height: var(--touch-min); }
.gta-navbar__links { display: none; gap: var(--sp-2); margin-left: var(--sp-4); }
@media (min-width: 641px) { .gta-navbar__links { display: flex; } }
.gta-navbar__links a {
  color: #fff; text-decoration: none; font-weight: 700; font-size: var(--fs-400);
  padding: 8px 14px; border-radius: var(--r-pill); min-height: var(--touch-min); display: inline-flex; align-items: center;
}
.gta-navbar__links a:hover, .gta-navbar__links a.activo { background: var(--teal-700); }
.gta-navbar__spacer { flex: 1; }
.gta-navbar__racha {
  background: var(--teal-700); border-radius: var(--r-pill); padding: 6px 12px;
  font-weight: 800; font-variant-numeric: tabular-nums; font-size: var(--fs-400); white-space: nowrap;
}
/* «Mi beca» / «Entrar»: es el otro extremo del pulgar en la barra y medía 39 px. */
.gta-navbar__salir {
  color: #fff; opacity: .85; text-decoration: none; font-size: var(--fs-400); padding: 8px 12px;
  min-height: var(--touch-min); display: inline-flex; align-items: center;
}

/* Barra inferior móvil */
.gta-tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex; background: var(--superficie); border-top: 1px solid var(--borde);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 641px) { .gta-tabbar { display: none; } }
.gta-tabbar a {
  flex: 1; text-align: center; text-decoration: none; color: var(--secundario);
  font-size: var(--fs-300); font-weight: 700; padding: 8px 0 10px; min-height: var(--touch-min);
}
.gta-tabbar a.activo { color: var(--teal-600); }
.gta-tabbar .icono { display: block; font-size: 1.35rem; line-height: 1.2; }

/* ===== Botones — DESIGN §5.1 ===== */
.btn-pri, .btn-sec, .btn-sol, .ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); font-weight: 800; font-size: var(--fs-500);
  border-radius: var(--r-pill); min-height: 48px; padding: 10px 24px;
  cursor: pointer; text-decoration: none; transition: transform .12s, background .12s, box-shadow .12s;
  border: 0;
}
.btn-pri { background: var(--teal-600); color: #fff; }
.btn-pri:hover { background: var(--teal-700); transform: translateY(-1px); }
.btn-sec { background: transparent; color: var(--teal-600); border: 2px solid var(--teal-600); }
.btn-sec:hover { background: var(--teal-50); }
.btn-sol { background: var(--sol-400); color: var(--tinta); }
.btn-sol:hover { filter: brightness(1.05); transform: translateY(-1px); }
.ghost { background: transparent; color: var(--teal-600); min-height: var(--touch-min); padding: 8px 12px; border: 0; }
.btn-block { width: 100%; }
button:disabled { opacity: .4; cursor: not-allowed; transform: none !important; }

/* ===== Cards ===== */
.card {
  background: var(--superficie); border-radius: var(--r-lg);
  box-shadow: var(--sombra-card); padding: var(--sp-5); margin-bottom: var(--sp-4);
}
.card--suave { background: var(--teal-50); box-shadow: none; }

/* Los desplegables (<summary>) del aviso de privacidad en P05 y de «¿qué cuenta como día
   de racha?» en P17 son el control que abre el texto: medían 23 px de alto. */
.gta-main summary, .gta-activar summary { min-height: var(--touch-min); display: flex; align-items: center; cursor: pointer; }

/* ===== Chips y badges ===== */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--teal-50); color: var(--teal-600); font-weight: 700; font-size: var(--fs-400);
  border: 1px solid var(--borde); border-radius: var(--r-pill); padding: 6px 14px; cursor: pointer; min-height: 36px;
}
/* Los chips que SE PULSAN (filtros de P12, selección de intereses de P22) son controles
   táctiles y el checklist de DESIGN §8 les exige 44 px. Los chips decorativos —el de la
   herramienta del curso, el de estado— se quedan en 36 px: no se tocan, y subirlos a 44
   engordaría cada tarjeta sin que nadie gane nada. */
button.chip, a.chip, .chip--check, .chip[role="tab"], .chip[role="button"] { min-height: var(--touch-min); }
.chip.activo { background: var(--teal-600); color: #fff; border-color: var(--teal-600); }
.chip--check input { position: absolute; opacity: 0; }
.chip--check:has(input:checked) { background: var(--teal-600); color: #fff; border-color: var(--teal-600); }
.gta-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0; }
.badge-exito { color: var(--exito); font-weight: 800; font-size: var(--fs-400); }
.badge-gris { color: var(--secundario); font-weight: 700; font-size: var(--fs-400); }

/* ===== Progreso — DESIGN §5.3 ===== */
.gta-progreso {
  height: 8px; background: var(--teal-100); border-radius: var(--r-pill); overflow: hidden; margin: var(--sp-2) 0;
}
.gta-progreso__fill { height: 100%; background: var(--teal-500); border-radius: var(--r-pill); transition: width .4s; }
.gta-progreso__fill--done { background: var(--sol-400); }

/* ===== Alertas / banners — DESIGN §5.4 ===== */
.gta-alerta {
  background: var(--sol-100); border: 1px solid var(--sol-400);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
}
.gta-alerta--error { background: #FCEBE8; border-color: var(--coral-400); color: var(--error); }
.gta-alerta--exito { background: #E8F4E9; border-color: var(--exito); color: var(--exito); }
.gta-banner {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  background: var(--sol-100); border: 1.5px solid var(--coral-400);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); font-weight: 700;
}
.gta-banner--vencida { border-color: var(--secundario); background: var(--teal-50); }

/* ===== Formularios — DESIGN §5.5 ===== */
label { display: block; font-weight: 700; margin-bottom: 6px; }
input[type=text], input[type=password], input[type=email], input[type=tel],
input[type=date], input[type=number], input[type=search], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 14px;
  font-family: var(--font); font-size: var(--fs-500); color: var(--tinta);
  background: var(--superficie); border: 1.5px solid var(--borde); border-radius: var(--r-sm);
}
input:focus, select:focus, textarea:focus { border-color: var(--teal-500); outline: none; box-shadow: 0 0 0 3px rgb(14 91 85 / .15); }
input[readonly] { background: var(--teal-50); color: var(--secundario); }
.gta-form-grid { display: grid; gap: var(--sp-2) var(--sp-4); }
@media (min-width: 641px) { .gta-form-grid { grid-template-columns: 1fr 1fr; } }
.gta-campo-clave { position: relative; }
.gta-ver-clave { position: absolute; right: 8px; bottom: 6px; background: none; border: 0; font-size: 1.1rem; cursor: pointer; min-height: 36px; }
.gta-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: var(--sp-3) 0; }
.gta-check input, .gta-checks input { width: 20px; height: 20px; min-height: 0; accent-color: var(--teal-600); }
.gta-checks { border: 0; padding: 0; margin: var(--sp-4) 0; }
.gta-checks legend { font-weight: 800; margin-bottom: var(--sp-2); }
.gta-checks label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin-bottom: var(--sp-2); }
.gta-medidor { font-size: var(--fs-400); font-weight: 700; min-height: 22px; margin: -6px 0 var(--sp-2); }
.nivel-rojo { color: var(--error); }
.nivel-ambar { color: #9a6b00; }
.nivel-verde { color: var(--exito); }
.gta-form-estado { margin-left: var(--sp-3); font-weight: 700; color: var(--secundario); }

/* ===== Login P01 ===== */
.gta-login { display: grid; gap: var(--sp-4); max-width: 960px; margin: 0 auto; }
@media (min-width: 1025px) { .gta-login { grid-template-columns: 1fr 1.2fr; align-items: stretch; } }
.gta-login__panel {
  background: var(--teal-600); color: #fff; border-radius: var(--r-lg);
  padding: var(--sp-6); display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--sp-4);
}
@media (min-width: 1025px) { .gta-login__panel { display: flex; } }
.gta-login__frase { font-size: var(--fs-700); font-weight: 800; margin: 0; }
.gta-login__ayuda, .gta-login__verificar { text-align: center; font-size: var(--fs-400); }
.gta-login__activar { text-align: center; margin: var(--sp-4) 0 var(--sp-2); }

/* ===== Wizard P05/P11 ===== */
.gta-pasos { display: flex; gap: var(--sp-2); list-style: none; padding: 0; margin: var(--sp-4) 0; flex-wrap: wrap; }
.gta-pasos li {
  font-size: var(--fs-300); font-weight: 800; color: var(--secundario);
  background: var(--superficie); border: 1.5px solid var(--borde); border-radius: var(--r-pill); padding: 6px 14px;
}
.gta-pasos li.activo { background: var(--teal-600); border-color: var(--teal-600); color: #fff; }
.gta-activar, .gta-bienvenida { max-width: 640px; margin: 0 auto; }
.gta-activar__head { text-align: center; }
.gta-privacidad { margin: var(--sp-3) 0; font-size: var(--fs-400); color: var(--secundario); }
.gta-privacidad summary { font-weight: 700; cursor: pointer; color: var(--teal-600); }
.gta-bienvenida-final { text-align: center; }

/* ===== Dashboard P10 ===== */
.gta-saludo { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.gta-saludo h1 { margin: 0; }
.gta-burbuja {
  display: inline-block; background: var(--sol-400); color: var(--tinta);
  font-weight: 800; border-radius: var(--r-pill); padding: 6px 16px; text-decoration: none;
}
.gta-hero-inicio { text-align: center; padding: var(--sp-6); }
.gta-continuar { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.gta-continuar__info { flex: 1; min-width: 220px; }
.gta-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.gta-stat {
  background: var(--superficie); border-radius: var(--r-md); box-shadow: var(--sombra-card);
  padding: var(--sp-3); text-align: center; text-decoration: none; color: var(--tinta);
  display: flex; flex-direction: column; gap: 2px; min-height: var(--touch-min);
}
.gta-stat strong { font-variant-numeric: tabular-nums; }
.gta-stat--urgente strong { color: var(--coral-600); }
.gta-stat__icono { font-size: 1.3rem; }
.gta-seccion { margin: var(--sp-5) 0; }
.gta-fila-cards { display: grid; gap: var(--sp-3); }
@media (min-width: 641px) { .gta-fila-cards { grid-template-columns: 1fr 1fr; } }
.gta-card-enlace { text-decoration: none; color: var(--tinta); display: block; }
.gta-card-enlace:hover { box-shadow: var(--sombra-flotante); }

/* ===== Cards de curso — DESIGN §5.2 ===== */
.gta-grid-cursos { display: grid; gap: var(--sp-3); }
@media (min-width: 641px) { .gta-grid-cursos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .gta-grid-cursos { grid-template-columns: repeat(3, 1fr); } }
.gta-card-curso { position: relative; text-decoration: none; color: var(--tinta); display: block; transition: box-shadow .15s, transform .15s; }
.gta-card-curso:hover { box-shadow: var(--sombra-flotante); transform: scale(1.01); }
.gta-cinta {
  position: absolute; top: 12px; right: 12px; background: var(--sol-400); color: var(--tinta);
  font-size: var(--fs-300); font-weight: 800; border-radius: var(--r-pill); padding: 3px 10px;
}
.gta-card-fantasma {
  border: 2px dashed var(--borde); border-radius: var(--r-lg); background: transparent; box-shadow: none;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--secundario); text-decoration: none; padding: var(--sp-5); font-weight: 700;
}

/* ===== Logros P17 ===== */
.gta-tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.gta-tabs a {
  text-decoration: none; font-weight: 800; color: var(--secundario);
  padding: 10px 18px; border-radius: var(--r-pill); min-height: var(--touch-min); display: inline-flex; align-items: center;
}
.gta-tabs a.activo { background: var(--teal-600); color: #fff; }
.gta-grid-insignias { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (min-width: 641px) { .gta-grid-insignias { grid-template-columns: repeat(4, 1fr); } }
.gta-insignia {
  background: var(--superficie); border-radius: var(--r-md); box-shadow: var(--sombra-card);
  padding: var(--sp-4); text-align: center;
}
.gta-insignia.bloqueada { opacity: .55; filter: grayscale(1); }
.gta-insignia__icono { font-size: 2rem; display: block; margin-bottom: var(--sp-2); }
.gta-racha { text-align: center; }
.gta-racha__numero { font-size: 4rem; font-weight: 800; margin: 0; color: var(--teal-600); font-variant-numeric: tabular-nums; }
.gta-calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; max-width: 420px; margin: var(--sp-4) auto; }
.gta-calendario .dia {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--teal-50); font-size: var(--fs-300); font-weight: 700;
}
.gta-calendario .dia.valido { background: var(--teal-500); color: #fff; }
.gta-calendario .dia.protegido { background: var(--sol-400); }
.gta-calendario .dia.hoy { box-shadow: 0 0 0 2px var(--teal-700); }
.gta-colapsable { text-align: left; max-width: 480px; margin: 0 auto var(--sp-4); }
.gta-colapsable summary { font-weight: 700; color: var(--teal-600); cursor: pointer; }
.gta-hitos { list-style: none; padding: 0; text-align: left; max-width: 480px; margin: 0 auto; }
.gta-hitos li { border-left: 3px solid var(--borde); padding: var(--sp-2) var(--sp-3); }
.gta-hitos li.logrado { border-color: var(--sol-400); }
.gta-hitos a { text-decoration: none; color: var(--tinta); }

/* ===== Recompensas P18 ===== */
.gta-grid-recompensas { display: grid; gap: var(--sp-3); }
@media (min-width: 641px) { .gta-grid-recompensas { grid-template-columns: repeat(2, 1fr); } }
.gta-recompensa--disponible { border: 2px solid var(--sol-400); }
.gta-radio-card { display: flex; gap: 10px; align-items: center; border: 1.5px solid var(--borde); border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: var(--sp-2); cursor: pointer; font-weight: 400; }
.gta-radio-card:has(input:checked) { border-color: var(--teal-500); background: var(--teal-50); }
.gta-como-funciona ol { padding-left: 20px; }

/* ===== Guías / certificados ===== */
.gta-grid-guias, .gta-grid-certs { display: grid; gap: var(--sp-3); }
@media (min-width: 641px) { .gta-grid-guias, .gta-grid-certs { grid-template-columns: repeat(2, 1fr); } }
.gta-card-guia { text-decoration: none; color: var(--tinta); display: block; }
.gta-card-guia:hover { box-shadow: var(--sombra-flotante); }

/* ===== Datos / mi beca ===== */
.gta-datos { margin: 0; }
.gta-datos > div { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 10px 0; border-bottom: 1px solid var(--borde); }
.gta-datos > div:last-child { border-bottom: 0; }
.gta-datos dt { font-weight: 700; color: var(--secundario); }
.gta-datos dd { margin: 0; text-align: right; }
.gta-avatares { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.gta-avatar-op { position: relative; cursor: pointer; }
.gta-avatar-op input { position: absolute; opacity: 0; }
.gta-avatar {
  display: block; width: 52px; height: 52px; border-radius: 50%;
  background: var(--teal-100); border: 2.5px solid transparent;
}
.gta-avatar-op:has(input:checked) .gta-avatar { border-color: var(--teal-600); background: var(--sol-100); }
.gta-avatar--buho-1 { background: var(--teal-500); } .gta-avatar--buho-2 { background: var(--teal-700); }
.gta-avatar--buho-3 { background: var(--teal-100); } .gta-avatar--gato-1 { background: var(--sol-400); }
.gta-avatar--zorro-1 { background: var(--coral-400); } .gta-avatar--panda-1 { background: var(--tinta); }
.gta-avatar--robot-1 { background: var(--info); } .gta-avatar--robot-2 { background: #7A6FF0; }
.gta-avatar--estrella-1 { background: var(--sol-100); } .gta-avatar--planeta-1 { background: #2A6FB0; }
.gta-avatar--rayo-1 { background: #FFB100; } .gta-avatar--libro-1 { background: var(--exito); }

/* ===== Estados vacíos / Beki ===== */
.gta-vacio { text-align: center; padding: var(--sp-6); }
.gta-vacio .gta-beki { margin-bottom: var(--sp-3); }

/* ===== Verificar (registro formal) ===== */
.gta-registro-formal { max-width: 640px; margin: 0 auto; }
.gta-verificar-ok { border-left: 6px solid var(--exito); }
.gta-verificar-no { border-left: 6px solid var(--secundario); }
.gta-verificar-revocado { border-left: 6px solid var(--sol-400); }
.gta-verificar-pie { text-align: center; font-size: var(--fs-400); }

/* ===== Player ===== */
.gta-player-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: var(--tinta); margin-bottom: var(--sp-3); }
.gta-player-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ===== Documentos legales ===== */
.gta-doc-legal, .gta-doc-scroll { font-size: var(--fs-400); color: var(--tinta); }
.gta-doc-scroll { max-height: 320px; overflow-y: auto; border: 1.5px solid var(--borde); border-radius: var(--r-sm); padding: var(--sp-3); margin-bottom: var(--sp-3); }
.gta-tyc-resumen ol { padding-left: 22px; }
.gta-tyc-resumen li { margin-bottom: 6px; }

/* ===== 403 / 404 / mantenimiento ===== */
.gta-403, .gta-404, .gta-mantenimiento { text-align: center; padding: var(--sp-7) var(--sp-4); max-width: 560px; margin: 0 auto; }

/* ===== Chat Beki (P23) — DESIGN §4.6 ===== */
.gta-chat-burbuja {
  position: fixed; right: 16px; bottom: 72px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--teal-600); color: #fff; font-size: 1.6rem;
  box-shadow: var(--sombra-flotante); display: flex; align-items: center; justify-content: center;
}
@media (min-width: 641px) { .gta-chat-burbuja { bottom: 20px; } }
.gta-chat-badge {
  position: absolute; bottom: -4px; right: -6px;
  background: var(--exito); color: #fff; font-size: 9px; font-weight: 800;
  border-radius: var(--r-pill); padding: 2px 6px; border: 2px solid var(--fondo);
}
.gta-chat-panel {
  position: fixed; right: 16px; bottom: 140px; z-index: 95;
  width: min(360px, calc(100vw - 32px)); height: min(520px, calc(100vh - 120px));
  background: var(--superficie); border-radius: var(--r-lg); box-shadow: var(--sombra-flotante);
  display: flex; flex-direction: column; overflow: hidden;
}
/*
 * El `display: flex` de arriba anulaba el atributo `hidden` del panel: la regla del
 * navegador para [hidden] es `display: none` con especificidad mínima, así que cualquier
 * `display` de autor la gana. Consecuencia real: Beki aparecía abierto en cada carga
 * tapando el reproductor de la lección, y el botón de cerrar no hacía nada visible aunque
 * el JavaScript sí ponía panel.hidden = true. Detectado con la validación en navegador:
 * el DOM decía oculto y los píxeles decían visible.
 */
.gta-chat-panel[hidden] { display: none; }
@media (min-width: 641px) { .gta-chat-panel { bottom: 88px; } }
.gta-chat-head {
  background: var(--teal-600); color: #fff; padding: 12px 14px;
  display: flex; align-items: center; gap: 10px; font-size: 1.3rem;
  /* La cabecera cierra el panel (ver chat.js), así que tiene que parecer pulsable: antes
     era la zona más grande del widget, no hacía nada y quien fallaba la ✕ caía aquí. */
  cursor: pointer;
}
.gta-chat-head:hover { background: var(--teal-700); }
.gta-chat-head div { display: flex; flex-direction: column; line-height: 1.2; flex: 1; }
.gta-chat-head strong { font-size: var(--fs-500); }
.gta-chat-head span { font-size: var(--fs-300); opacity: .85; }
.gta-chat-cerrar { background: none; border: 0; color: #fff; font-size: 1rem; cursor: pointer; min-width: var(--touch-min); min-height: var(--touch-min); }
.gta-chat-mensajes { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.gta-chat-msj {
  max-width: 85%; padding: 8px 12px; border-radius: var(--r-md); font-size: var(--fs-400); white-space: pre-wrap;
}
.gta-chat-msj--usuario { align-self: flex-end; background: var(--teal-50); }
.gta-chat-msj--beki { align-self: flex-start; background: var(--fondo); border: 1px solid var(--borde); }
.gta-chat-msj.escalado { background: var(--sol-100); border-color: var(--sol-400); font-weight: 700; }
.gta-chat-msj.escribiendo { color: var(--secundario); font-style: italic; }
.gta-chat-sugerencias { display: flex; gap: 6px; padding: 0 12px 8px; flex-wrap: wrap; }
.gta-chat-sugerencias button {
  background: var(--teal-50); border: 1px solid var(--borde); border-radius: var(--r-pill);
  font-family: var(--font); font-size: var(--fs-300); font-weight: 700; color: var(--teal-600);
  padding: 6px 10px; cursor: pointer;
}
.gta-chat-form { display: flex; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--borde); }
.gta-chat-form input { flex: 1; min-height: 44px; }
.gta-chat-form .btn-pri { min-height: 44px; padding: 6px 16px; }
.gta-chat-aviso { margin: 0; padding: 0 12px 8px; font-size: 11px; color: var(--secundario); text-align: center; }

/* ===== Footer ===== */
.gta-footer {
  text-align: center; color: var(--secundario); font-size: var(--fs-300);
  padding: var(--sp-5) var(--sp-4) calc(var(--sp-7) + 56px);
}
@media (min-width: 641px) { .gta-footer { padding-bottom: var(--sp-5); } }
.gta-footer a { color: var(--secundario); }

/* =====================================================================
   Campana de notificaciones, hitos de racha y estados vacío de filtro.
   Bloque añadido al arreglar el portal del becario; va al final a propósito para no
   mover ni la regla global [hidden] ni el @font-face de Nunito, que otras partes del
   proyecto dan por situadas donde están.
   ===================================================================== */

/* ----- Campana (navbar) ----- */
.gta-campana { position: relative; display: flex; align-items: center; }
.gta-campana__boton {
  position: relative; background: transparent; border: 0; cursor: pointer;
  color: #fff; font-size: 1.25rem; line-height: 1;
  min-width: var(--touch-min); min-height: var(--touch-min);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
}
.gta-campana__boton:hover, .gta-campana__boton[aria-expanded="true"] { background: var(--teal-700); }
.gta-campana__contador {
  position: absolute; top: 4px; right: 2px;
  background: var(--coral-600); color: #fff;
  font-family: var(--font); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  min-width: 18px; height: 18px; border-radius: var(--r-pill); padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
}
.gta-campana__panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: min(340px, calc(100vw - var(--sp-4) * 2));
  max-height: min(70vh, 420px); overflow-y: auto;
  background: var(--superficie); color: var(--tinta);
  border: 1px solid var(--borde); border-radius: var(--r-md); box-shadow: var(--sombra-flotante);
}
/* A 390 px el panel se ancla al ancho de la ventana: pegado a la derecha se salía. */
@media (max-width: 480px) {
  .gta-campana__panel { position: fixed; top: 60px; right: var(--sp-4); left: var(--sp-4); width: auto; }
}
.gta-campana__cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: 10px 12px; border-bottom: 1px solid var(--borde);
}
.gta-campana__todas, .gta-campana__reintentar {
  background: transparent; border: 0; cursor: pointer; padding: 4px;
  font-family: var(--font); font-size: var(--fs-300); font-weight: 700; color: var(--teal-600);
  text-decoration: underline;
}
.gta-campana__lista { padding: 6px; display: grid; gap: 4px; }
.gta-campana__item {
  display: grid; gap: 2px; padding: 10px 10px; border-radius: var(--r-sm);
  text-decoration: none; color: var(--tinta); font-size: var(--fs-400); cursor: pointer;
}
.gta-campana__item:hover { background: var(--teal-50); }
.gta-campana__item.no-leida { background: var(--sol-100); }
.gta-campana__aviso { margin: 0; padding: 12px 10px; color: var(--secundario); font-size: var(--fs-400); }

/* Esqueleto de carga — nunca una rueda girando (ESTILO §3.3). */
.gta-esqueleto {
  height: 44px; border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--teal-50) 25%, var(--borde) 50%, var(--teal-50) 75%);
  background-size: 200% 100%; animation: gta-esqueleto 1.2s ease-in-out infinite;
}
@keyframes gta-esqueleto { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ----- Hitos de racha (P17) ----- */
.badge-sol {
  display: inline-block; background: var(--sol-400); color: var(--tinta);
  font-weight: 800; font-size: var(--fs-300); border-radius: var(--r-pill); padding: 2px 10px;
}
.gta-hitos li.gta-hito--logrado { border-color: var(--exito); }
.gta-hitos li.gta-hito--disponible { border-color: var(--sol-400); background: var(--sol-100); }
.gta-hito__detalle { display: block; }

/* ----- Estado vacío de un filtro ----- */
#gta-cursos-sin-resultados { padding: var(--sp-5); }
#gta-cursos-sin-resultados .btn-sec { margin-top: var(--sp-2); }
#gta-guias-sin-resultados .btn-sec { margin-top: var(--sp-2); }

/* ===== Guía individual (P21) =====
   Migas y vecinas: la plantilla single-gta_guia.php es nueva y necesita su estilo. El
   contenedor de vecinas usa grid de dos columnas para que «anterior» quede a la izquierda y
   «siguiente» a la derecha incluso cuando falta una de las dos (se pinta un <span> vacío en
   su hueco), sin recolocar el botón que sí existe. */
.gta-migas {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-400); color: var(--secundario);
  margin-bottom: var(--sp-4); flex-wrap: wrap;
}
.gta-migas a { font-weight: 700; text-decoration: none; }
.gta-migas a:hover { text-decoration: underline; }
.gta-migas__actual { color: var(--tinta); font-weight: 700; }
.gta-guia__posicion { font-variant-numeric: tabular-nums; margin-top: calc(var(--sp-2) * -1); }
.gta-guia__cuerpo > :last-child { margin-bottom: 0; }
.gta-guia__vecinas {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
  align-items: center; margin: var(--sp-5) 0 var(--sp-4);
}
.gta-guia__vecinas .btn-sec { justify-self: start; }
.gta-guia__vecinas .btn-pri { justify-self: end; text-align: right; }
@media (max-width: 480px) {
  /* En móvil, «siguiente» primero: es la acción que el becario suele querer. */
  .gta-guia__vecinas { grid-template-columns: 1fr; }
  .gta-guia__vecinas .btn-pri { order: -1; justify-self: stretch; }
  .gta-guia__vecinas .btn-sec { justify-self: stretch; }
}

/* ============================================================================
   «Mi grupo» — pantalla del SUPERVISOR INSTITUCIONAL (solo lectura)

   Dos cosas condicionan todo el bloque:

   1. La página NO se desplaza en horizontal, nunca. Once columnas no caben en 390 px, así que
      la que se desplaza es la tabla dentro de .gta-mg-scroll; para que un hijo con contenido
      ancho no estire a su padre en flex/grid hace falta min-width: 0 explícito, que es el
      descuido habitual y el que deja el documento moviéndose de lado.
   2. Toda cifra va con tabular-nums y alineada a la derecha (ESTILO §3.3), y el hueco de un dato
      NULO se pinta como hueco (—) y no como un 0.
   ========================================================================== */

/* La navbar del supervisor sin beca se ve también en móvil: él no tiene tabbar en el pie. */
.gta-navbar__links--sup { display: flex; }

.gta-mi-grupo { min-width: 0; }
.gta-mg-contexto { margin-top: calc(var(--sp-3) * -1); }

/* Cifras: tabulares siempre, para que las columnas de números no bailen al ordenar. */
.gta-mg-num { font-variant-numeric: tabular-nums; font-weight: 700; }
.gta-mg-nulo { color: var(--secundario); font-weight: 700; }

.gta-mg-cabecera {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2);
}
.gta-mg-cabecera h2 { margin: 0; }
.gta-mg-acciones { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.gta-mg-conteo { margin: 0; }
.gta-mg-origen { margin: 0 0 var(--sp-3); }

/* Aviso de que un endpoint del módulo todavía no existe. Aparece sólo cuando aplica: no es un
   cartel fijo, desaparece en cuanto la ruta está publicada. */
.gta-mg-sin-endpoint {
  display: inline-block; background: var(--teal-50); border: 1px dashed var(--borde);
  border-radius: var(--r-sm); padding: 6px 12px; color: var(--secundario); font-size: var(--fs-400);
}

.gta-mg-selector { margin-bottom: var(--sp-4); }
.gta-mg-selector__fila { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.gta-mg-selector__fila select { max-width: 420px; }

/* ----- KPIs ----- */
.gta-mg-kpis { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin-bottom: var(--sp-5); }
@media (min-width: 481px)  { .gta-mg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 769px)  { .gta-mg-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1025px) { .gta-mg-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.gta-mg-kpi { padding: var(--sp-4); margin-bottom: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gta-mg-kpi__etiqueta { margin: 0; font-size: var(--fs-300); font-weight: 700; color: var(--secundario); text-transform: none; }
.gta-mg-kpi__valor {
  margin: 0; text-align: right; font-size: 1.75rem; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--teal-600);
}
.gta-mg-kpi--nulo .gta-mg-kpi__valor { color: var(--secundario); }
/* La procedencia de la cifra, debajo de la cifra: sin esto no se puede discutir un número. */
.gta-mg-kpi__fuente { margin: 0; font-size: var(--fs-300); color: var(--secundario); line-height: 1.35; }

/* ----- Esqueletos (nunca una rueda girando) ----- */
.gta-mg-esqueletos { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.gta-esqueleto--kpi { height: 104px; }
.gta-esqueleto--fila { height: 56px; }

/* ----- Tabla ----- */
.gta-mg-tabla-caja { min-width: 0; }
.gta-mg-filtros { margin-bottom: var(--sp-3); }
.gta-mg-filtros__titulo { margin: 0; font-size: var(--fs-300); font-weight: 700; color: var(--secundario); }
.gta-mg-filtros__selects { display: grid; gap: var(--sp-3); }
@media (min-width: 641px) { .gta-mg-filtros__selects { grid-template-columns: 1fr 1fr; } }
.gta-mg-filtros__selects p { margin: 0; }

/* El contenedor de scroll de la tabla. tabindex="0" en el HTML para poder desplazarla con
   teclado; el borde marca dónde acaba lo que se mueve. */
.gta-mg-scroll {
  /*
   * `position: relative` NO es decorativo y costó medirlo: sin él la página SÍ se desplazaba en
   * horizontal a 390 px (documento 1241 px de ancho, window.scrollX llegaba a 800) aunque el
   * contenedor tuviera overflow. La razón es que dentro de la tabla hay elementos
   * `position: absolute` — los textos sólo para lector de pantalla (.screen-reader-text) —, y un
   * ancestro con overflow no recorta a un descendiente absoluto si además no es su bloque
   * contenedor. Con `relative` lo es, y el desplazamiento se queda dentro de la tabla.
   */
  position: relative;
  overflow-x: auto; max-width: 100%; min-width: 0;
  border: 1px solid var(--borde); border-radius: var(--r-md);
  -webkit-overflow-scrolling: touch;
}
.gta-mg-tabla { width: 100%; min-width: 940px; border-collapse: collapse; font-size: var(--fs-400); }
.gta-mg-tabla thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--teal-50); text-align: left; font-size: var(--fs-300);
  color: var(--secundario); padding: 0; white-space: nowrap; border-bottom: 1px solid var(--borde);
}
.gta-mg-tabla th.num, .gta-mg-tabla td.num { text-align: right; }
.gta-mg-tabla th.num .gta-mg-orden { justify-content: flex-end; width: 100%; }
.gta-mg-orden {
  background: transparent; border: 0; cursor: pointer; width: 100%;
  font-family: var(--font); font-size: var(--fs-300); font-weight: 800; color: var(--secundario);
  padding: 10px var(--sp-3); display: inline-flex; align-items: center; gap: 4px; min-height: var(--touch-min);
}
.gta-mg-orden:hover { color: var(--teal-600); text-decoration: underline; }
/* La flecha sale del aria-sort, así que lo que se ve y lo que anuncia el lector son lo mismo. */
.gta-mg-tabla th[aria-sort="ascending"] .gta-mg-orden::after { content: '▲'; font-size: .7em; }
.gta-mg-tabla th[aria-sort="descending"] .gta-mg-orden::after { content: '▼'; font-size: .7em; }

.gta-mg-tabla tbody th, .gta-mg-tabla tbody td {
  padding: 10px var(--sp-3); border-bottom: 1px solid var(--borde); vertical-align: top; text-align: left;
}
.gta-mg-tabla tbody tr:last-child td, .gta-mg-tabla tbody tr:last-child th { border-bottom: 0; }
.gta-mg-fila:hover > * { background: var(--teal-50); }
/* Franja de color a la izquierda: el semáforo se ve de un barrido sin leer once columnas. */
.gta-mg-fila > th:first-child { border-left: 4px solid transparent; }
.gta-mg-fila--rojo  > th:first-child { border-left-color: var(--coral-400); }
.gta-mg-fila--ambar > th:first-child { border-left-color: var(--sol-400); }
.gta-mg-fila--verde > th:first-child { border-left-color: var(--exito); }
.gta-mg-fila--gris  > th:first-child { border-left-color: var(--borde); }

.gta-mg-alumno { min-width: 190px; }
.gta-mg-alumno__nombre { display: block; font-weight: 800; }
.gta-mg-alumno__codigo { display: block; font-variant-numeric: tabular-nums; font-size: var(--fs-300); }
.gta-mg-cursos { min-width: 170px; }
.gta-mg-curso-pill {
  display: inline-block; background: var(--teal-50); border: 1px solid var(--borde);
  border-radius: var(--r-pill); padding: 1px 10px; font-size: var(--fs-300); margin: 0 2px 2px 0;
}
.gta-mg-barra { display: block; width: 90px; margin: 4px 0 0 auto; }
.gta-mg-dias { display: block; font-size: var(--fs-300); }
.gta-mg-bandera { white-space: nowrap; }
.gta-mg-bandera__txt { font-weight: 700; }
.gta-mg-ver {
  background: transparent; border: 1px solid var(--borde); border-radius: var(--r-pill);
  cursor: pointer; font-family: var(--font); font-size: var(--fs-300); font-weight: 700;
  color: var(--teal-600); padding: 6px 12px; min-height: 36px; white-space: nowrap;
}
.gta-mg-ver:hover { background: var(--teal-50); }
.gta-mg-ver[aria-expanded="true"] { background: var(--teal-600); color: #fff; border-color: var(--teal-600); }

/* ----- Fila expandible (solo lectura) ----- */
.gta-mg-detalle > td { background: var(--fondo); }
.gta-mg-detalle__caja { display: grid; gap: var(--sp-4); padding: var(--sp-2) 0; }
@media (min-width: 769px) { .gta-mg-detalle__caja { grid-template-columns: 1.4fr 1fr 1fr; } }
.gta-mg-detalle__caja h3 { font-size: var(--fs-400); margin-bottom: var(--sp-2); }
.gta-mg-lista-cursos, .gta-mg-datos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.gta-mg-lista-cursos__titulo { display: block; font-weight: 700; }
.gta-mg-lista-cursos .gta-mg-barra { width: 100%; margin: 4px 0; }
.gta-mg-datos li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  font-size: var(--fs-400); border-bottom: 1px dashed var(--borde); padding-bottom: 4px;
}

/* ----- Estados vacío y error ----- */
.gta-mg-vacio { padding: var(--sp-5); }
.gta-mg-vacio .btn-sec { margin-top: var(--sp-2); }
.gta-mg-error { margin-top: var(--sp-4); }
.gta-mg-error p { margin-bottom: var(--sp-2); }

/* ----- Contacto académico ----- */
.gta-mg-contacto__pie { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.gta-mg-restantes { margin: 0; font-variant-numeric: tabular-nums; }
.gta-mg-form-error, .gta-mg-form-ok { margin-top: var(--sp-3); }

/* Encabezado de los KPIs: sobre qué se calcula todo lo de abajo (lo dice el endpoint). */
.gta-mg-base { margin: calc(var(--sp-2) * -1) 0 var(--sp-3); }

/* Tarjeta de reparto o de tendencia: ocupa dos columnas porque una barra necesita ancho para
   poder compararse; a una columna se leería como una lista de números sueltos. */
@media (min-width: 481px) { .gta-mg-kpi--serie { grid-column: span 2; } }
.gta-mg-serie { list-style: none; margin: var(--sp-2) 0; padding: 0; display: grid; gap: 6px; }
.gta-mg-serie li { display: grid; grid-template-columns: minmax(70px, auto) 1fr minmax(70px, auto); gap: var(--sp-2); align-items: center; font-size: var(--fs-300); }
.gta-mg-serie__titulo { color: var(--secundario); font-weight: 700; white-space: nowrap; }
.gta-mg-serie__barra { display: block; height: 10px; background: var(--teal-100); border-radius: var(--r-pill); overflow: hidden; }
.gta-mg-serie__barra > span { display: block; height: 100%; background: var(--teal-500); border-radius: var(--r-pill); }
.gta-mg-serie__valor { text-align: right; font-variant-numeric: tabular-nums; }
.gta-mg-kpi__unidad { margin: 2px 0 0; font-size: var(--fs-300); font-weight: 700; color: var(--teal-600); }