/* ============================================================
   ACADEMIA INDRA — Identidad Institucional
   Estética formal: gobierno / universidad / defensa
   Paleta: azul marino, dorado, blanco hueso
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Source+Sans+3:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ============================================================
     ACADEMIA INDRA — un solo tema, claro y plano.
     Paleta neutra tipo "papel": grises cálidos, texto casi negro,
     un único acento oscuro para botones/enlaces. Sin dorado, sin
     azul institucional, sin degradés ni relieve 3D: superficies
     planas que se distinguen por un tono de gris apenas distinto,
     como una tarjeta de chat.
     ============================================================ */
  --color-canvas-default:      #F6F5F1;   /* fondo de página */
  --color-canvas-subtle:       #FFFFFF;   /* tarjetas / superficies elevadas */
  --color-canvas-inset:        #EFEEE8;   /* superficies hundidas (inputs, código) */
  --color-border-default:      #E3E1D9;
  --color-border-muted:        #ECEAE3;
  --color-border-subtle:       rgba(30,29,25,0.08);

  --color-fg-default:          #201F1B;
  --color-fg-muted:            #5B5A53;
  --color-fg-subtle:           #83817A;
  --color-fg-on-emphasis:      #FFFFFF;

  --color-accent-fg:           #2B2A26;
  --color-accent-emphasis:     #1A1917;
  --color-accent-subtle:       rgba(30,29,25,0.06);

  /* ── Acento único (reemplaza dorado / verde señal) ── */
  --signal:                    #2B2A26;
  --signal-subtle:             rgba(30,29,25,0.06);
  --signal-glow:                0 0 0 3px rgba(30,29,25,0.08);

  --color-success-fg:          #2B6E45;
  --color-success-emphasis:    #235939;
  --color-success-subtle:      rgba(43,110,69,0.10);

  --color-attention-fg:        #8A6A1E;
  --color-attention-emphasis:  #705518;
  --color-attention-subtle:    rgba(138,106,30,0.10);

  --color-danger-fg:           #A3392C;
  --color-danger-emphasis:     #832D22;
  --color-danger-subtle:       rgba(163,57,44,0.10);

  --color-done-fg:             #5B5A53;
  --color-done-subtle:         rgba(91,90,83,0.10);

  --color-neutral-emphasis:    #83817A;

  /* ── Alias semánticos ── */
  --bg:            var(--color-canvas-default);
  --bg-card:       var(--color-canvas-subtle);
  --bg-elevated:   var(--color-canvas-subtle);
  --primary:       var(--color-accent-fg);
  --primary-emphasis: var(--color-accent-emphasis);
  --text:          var(--color-fg-default);
  --text-soft:     var(--color-fg-muted);
  --text-muted:    var(--color-fg-subtle);
  --border:        var(--color-border-default);
  --border-muted:  var(--color-border-muted);
  --success:       var(--color-success-fg);
  --warning:       var(--color-attention-fg);
  --danger:        var(--color-danger-fg);
  --gold:          var(--color-accent-fg);
  --gold-bright:   var(--color-accent-fg);
  --gold-subtle:   var(--color-accent-subtle);

  /* ── Tipografía ── */
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ── Espaciado ── */
  --gap-xs: 0.5rem;
  --gap-sm: 1rem;
  --gap-md: 1.75rem;
  --gap-lg: 2.5rem;
  --gap-xl: 3.5rem;
  --gap-2xl: 5rem;
  --gap-3xl: 7rem;

  /* ── App chrome ── */
  --nav-h:    64px;
  --tabbar-h: 0px;
  --ia-dock-h: 64px;
  --radius:   10px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --border-strong: #D6D4CA;
  --glow-red: 0 0 0 3px rgba(163,57,44,0.15);
  --primary-glow: var(--color-accent-subtle);

  /* ── Sombras: suaves y planas, sin relieve ── */
  --shadow-sm:  0 1px 2px rgba(30,29,25,0.05);
  --shadow:     0 1px 2px rgba(30,29,25,0.05), 0 4px 12px rgba(30,29,25,0.05);
  --shadow-lg:  0 8px 24px rgba(30,29,25,0.08);

  /* ── Sin bisel / sin "canto" 3D: todo queda plano ── */
  --bevel-top:      transparent;
  --bevel-bottom:   transparent;
  --edge-color:     transparent;
  --lift-shadow:        var(--shadow-sm);
  --lift-shadow-hover:  var(--shadow);
  --lift-shadow-press:  var(--shadow-sm);

  /* ── Fondos de barras ── */
  --chrome-bg:        rgba(246,245,241,0.97);
  --chrome-bg-solid:  rgba(246,245,241,0.99);
  --chrome-bg-strong: #FFFFFF;

  /* ── Movimiento (orquestado, discreto) ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    0.15s;
  --dur-base:    0.25s;
  --dur-slow:    0.6s;
}

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  min-height: 100dvh;
  overflow-x: hidden;
  padding-bottom: var(--tabbar-h);
  transition: background 0.2s ease, color 0.2s ease;
  position: relative;
}
/* Sin scanlines ni marca de agua: fondo plano y liso, como una
   hoja de papel — nada compite con la lectura. */
.navbar, main, .footer, #ia-widget, .help-fab { position: relative; z-index: 1; }

img { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; }
button { cursor: pointer; font-family: var(--font-body); }
code { font-family: var(--font-mono); }

/* ── ACCESIBILIDAD: foco visible para navegación por teclado ──
   Importante para que la página sea usable por personas de
   todas las edades y con distintas capacidades. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
.card:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Ocultar partículas (no acorde a la identidad institucional) */
#particle-canvas { display: none !important; }

/* ── TOPBAR / NAVBAR ──
   Un único modo de navegación: la barra de arriba tiene el botón
   de menú a la izquierda, la marca al centro-izquierda, y a la
   derecha solo lo esencial. Todo lo demás (secciones, cursos,
   comunidad, ingresar/registrarte) vive dentro del menú de
   pantalla completa que abre ese botón. */
.navbar {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
  background: var(--chrome-bg-strong);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}

.navbar__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.navbar__brand img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 50%;
  border: 1px solid var(--border);
  padding: 1px;
  flex-shrink: 0;
}
.navbar__brand:hover { text-decoration: none; color: var(--text); }

/* ── BOTÓN "VOLVER" (flecha atrás en pantallas internas) ── */
.navbar__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.navbar__back:hover { background: var(--color-canvas-inset); }
.navbar__back svg { width: 18px; height: 18px; }

.navbar__octocat {
  width: 32px; height: 32px;
  fill: var(--color-fg-default);
  flex-shrink: 0;
}

/* ── Botón de menú (siempre a la izquierda) ── */
.navbar__toggle {
  position: relative;
  /* Debe quedar por ENCIMA de .navbar__links (z-index 260): ese panel
     de menú es pantalla completa (inset:0) y, si este botón no tuviera
     un z-index mayor, el panel lo taparía apenas se abre el menú y no
     se podría volver a tocar para cerrarlo. Con esto, las "tres rayas"
     quedan visibles y tocables (convertidas en "X") también con el
     menú abierto, para cerrarlo desde el mismo botón. */
  z-index: 261;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: var(--radius);
  order: -1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.navbar__toggle:hover { background: var(--color-canvas-inset); }
.navbar__toggle span {
  position: absolute;
  width: 19px; height: 2px;
  background: var(--text);
  display: block;
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.15s ease;
}
.navbar__toggle span:nth-child(1) { transform: translateY(-6px); }
.navbar__toggle span:nth-child(3) { transform: translateY(6px); }
body.nav-open .navbar__toggle span:nth-child(1) { transform: translateY(0) rotate(45deg); }
body.nav-open .navbar__toggle span:nth-child(2) { opacity: 0; }
body.nav-open .navbar__toggle span:nth-child(3) { transform: translateY(0) rotate(-45deg); }

/* ── Menú de pantalla completa ──
   Ocupa toda la pantalla, fondo liso, se abre desde la izquierda.
   Se cierra tocando de nuevo el botón de menú, tocando el fondo,
   Esc, eligiendo un enlace, o deslizando el dedo de derecha a
   izquierda (gesto implementado en js/main.js). */
.navbar__links {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
  height: 100dvh;
  padding: calc(var(--nav-h) + 0.5rem) 1.1rem 2rem;
  background: var(--bg);
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.navbar__links.open { transform: translateX(0); }
body.nav-open { overflow: hidden; }

/* Mientras el menú de navegación está abierto, ocultamos los elementos
   flotantes (barra de IA, burbuja de chat, botón de ayuda) para que no
   tapen las últimas opciones del menú (ej. "Registrarte"). */
body.nav-open #ia-widget,
body.nav-open #chat-widget-fab,
body.nav-open #chat-widget-panel,
body.nav-open .help-fab { display: none !important; }

.navbar__links a {
  color: var(--text);
  padding: 0.9rem 0.9rem;
  border-radius: var(--radius);
  transition: background 0.15s;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  border-bottom: 1px solid var(--border-muted);
}
.navbar__links a:last-of-type { border-bottom: none; }
.navbar__links a:hover { background: var(--color-canvas-inset); text-decoration: none; }
.navbar__links a.active { color: var(--primary); background: var(--color-canvas-inset); }

.navbar__session {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
}
.navbar__session a, .navbar__session button { width: 100%; text-align: center; }
.navbar__session [data-logout] { color: var(--danger); border-color: var(--danger); }
.navbar__session [data-logout]:hover { background: var(--color-danger-subtle); }

/* Fondo oscurecido detrás del panel, creado dinámicamente por main.js */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20,19,17,0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
  /* Debe quedar por debajo del z-index de .navbar (200): .navbar__links
     vive DENTRO de .navbar, que crea su propio contexto de apilamiento
     (position:sticky + z-index). Si este fondo tuviera un z-index mayor
     al de .navbar, quedaría pintado ENCIMA de todo el menú de pantalla
     completa (aunque .navbar__links declare z-index:260), tapándolo con
     el velo gris y absorbiendo todos los toques. */
  z-index: 190;
}
.nav-backdrop.open { opacity: 1; pointer-events: auto; }

/* ── BOTÓN DE AYUDA (flotante) ── */
.help-fab {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 250;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-accent-emphasis);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  box-shadow: var(--shadow);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}
.help-fab:hover { text-decoration: none; transform: translateY(-2px); }
.help-fab:active { transform: translateY(0); }
body.ia-dock-active { padding-bottom: var(--ia-dock-h); }
body.ia-dock-active .help-fab { bottom: calc(var(--ia-dock-h) + 0.75rem); }

/* ── NOTIFICACIONES ── */
@keyframes indrhack-fade { from { opacity: 0; } to { opacity: 1; } }

.navbar-notif-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  color: var(--text-soft);
  transition: background 0.15s, color 0.15s;
}
.navbar-notif-btn:hover { background: var(--border-muted); color: var(--text); }
.navbar-notif-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.navbar-notif-btn .notif-dot {
  position: absolute; top: 3px; right: 5px;
  width: 8px; height: 8px; background: var(--color-danger-fg);
  border-radius: 50%; border: 1.5px solid var(--bg); display: none;
}

.notif-count {
  display: none;
  align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--color-danger-fg); color: #fff;
  font-size: 0.65rem; font-weight: 700; border-radius: 20px;
  margin-left: 6px;
}

.notif-item { display: flex; gap: 0.75rem; padding: 1rem; border-radius: var(--radius-md); border: 1px solid var(--border-muted); background: var(--bg-card); margin-bottom: 0.65rem; cursor: pointer; transition: border-color .15s, background .15s; }
.notif-item:hover { border-color: var(--primary); }
.notif-item.no-leida { background: var(--color-accent-subtle); border-color: rgba(30,29,25,0.14); border-left: 3px solid var(--gold); }
.notif-item__icon { font-size: 1.3rem; flex-shrink: 0; line-height: 1; margin-top: 0.1rem; }
.notif-item__body { flex: 1; min-width: 0; }
.notif-item__title { margin: 0 0 0.2rem; font-size: 0.92rem; font-weight: 700; color: var(--text); }
.notif-item__msg { margin: 0 0 0.35rem; font-size: 0.85rem; color: var(--text-soft); line-height: 1.5; }
.notif-item__fecha { font-size: 0.72rem; color: var(--text-muted); }
.notif-item__unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex-shrink: 0; margin-top: 0.4rem; }

/* ── TERMUX / BLOQUES DE COMANDOS ── */
.termux-block {
  background: #060a12;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.termux-block__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-muted);
  gap: 0.75rem; flex-wrap: wrap;
}
.termux-block__title { margin: 0; font-size: 0.92rem; font-weight: 700; color: var(--text); }
.termux-block__desc { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--text-soft); }
.termux-block__body { padding: 0.9rem 1rem; }
.termux-cmd {
  display: flex; align-items: center; gap: 0.6rem;
  background: #0a0f1c; border: 1px solid var(--border-muted);
  border-radius: var(--radius); padding: 0.65rem 0.75rem; margin-bottom: 0.6rem;
}
.termux-cmd:last-child { margin-bottom: 0; }
.termux-cmd code {
  flex: 1; min-width: 0; overflow-x: auto; white-space: pre;
  color: #c6a965; font-size: 0.85rem; font-family: var(--font-mono);
}
.termux-copy-btn, .termux-copy-all-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.35rem;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-soft); border-radius: var(--radius); padding: 0.4rem 0.65rem;
  font-size: 0.78rem; cursor: pointer; transition: all 0.15s; font-family: inherit;
}
.termux-copy-btn:hover, .termux-copy-all-btn:hover { border-color: var(--primary); color: var(--primary); }
.termux-copy-btn.copiado, .termux-copy-all-btn.copiado { border-color: var(--success); color: var(--success); }
.termux-copy-all-btn { background: var(--color-accent-subtle); border-color: rgba(30,29,25,0.14); color: var(--primary); }

/* ── LAYOUT ── */
.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
main { min-height: calc(100dvh - var(--nav-h)); }
.section { padding: var(--gap-2xl) 0; }
.section + .section { border-top: 1px solid var(--border-muted); }

/* ── ESPACIADO DE TEXTO ESTILO CLAUDE ──
   Da aire entre párrafos sueltos (los que no traen su propio
   margen por clase o estilo inline, que siempre tienen prioridad). */
main p { margin-bottom: 1em; }
main p:last-child { margin-bottom: 0; }

/* ── HERO ── */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(100dvh - var(--nav-h) - var(--tabbar-h));
  padding: var(--gap-2xl) 1rem;
  gap: var(--gap-md);
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--color-border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border-subtle) 1px, transparent 1px);
  background-size: 42px 42px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at center, #000 40%, transparent 90%);
  mask-image: radial-gradient(ellipse 80% 65% at center, #000 40%, transparent 90%);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: 0; left: -50%; right: -50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--signal), transparent);
  filter: drop-shadow(0 0 6px var(--signal));
  animation: hero-scan 7s linear infinite;
}
@keyframes hero-scan {
  0%   { transform: translateX(-25%); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translateX(25%); }
  90%  { opacity: 1; }
  100% { transform: translateX(-25%); opacity: 0; }
}
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--signal);
  letter-spacing: 0.1em;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.hero__eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: var(--signal-glow);
  animation: hero-pulse 2s var(--ease-in-out) infinite;
}
@keyframes hero-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.hero__logo-img {
  width: 88px; height: 88px;
  object-fit: contain;
  border-radius: 50%;
  border: 3px solid var(--gold);
  padding: 3px;
  margin-bottom: 0.5rem;
  box-shadow: 0 0 0 6px var(--color-accent-subtle), 0 0 32px rgba(30,29,25,0.14);
}
.hero__logo {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 6vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
  line-height: 1.2;
  text-transform: uppercase;
}
.hero__logo .mark { color: var(--gold); }
.hero__subtitle {
  font-size: 1.05rem;
  color: var(--text-soft);
  max-width: 520px;
  line-height: 1.7;
}
.hero__motto {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--gold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.4rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.hero__actions {
  display: flex;
  gap: var(--gap-sm);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--gap-sm);
  width: 100%;
  max-width: 380px;
}
.hero__actions .btn { flex: 1; min-width: 130px; justify-content: center; }

/* ── Coreografía de entrada del hero (respeta reduced-motion) ── */
@media (prefers-reduced-motion: no-preference) {
  .hero__eyebrow, .hero__logo-img, .hero__logo, .hero__subtitle, .hero__motto, .hero__actions {
    opacity: 0;
    animation: hero-rise var(--dur-slow) var(--ease-out) forwards;
  }
  .hero__eyebrow  { animation-delay: 0.05s; }
  .hero__logo-img { animation-delay: 0.12s; }
  .hero__logo     { animation-delay: 0.22s; }
  .hero__subtitle { animation-delay: 0.32s; }
  .hero__motto    { animation-delay: 0.4s; }
  .hero__actions  { animation-delay: 0.48s; }
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── BOTONES ── flat, sin relieve ni degradé. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  cursor: pointer;
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }

.btn--primary {
  background: var(--color-accent-emphasis);
  color: #ffffff;
  border-color: var(--color-accent-emphasis);
}
.btn--primary:hover { background: #000000; border-color: #000000; }
.btn--primary:active { opacity: 0.85; }

.btn--outline {
  background: var(--bg-card);
  color: var(--text);
  border-color: var(--border);
}
.btn--outline:hover { background: var(--color-canvas-inset); border-color: var(--border-strong); }

.btn--ghost {
  background: transparent;
  color: var(--primary);
  border-color: transparent;
}
.btn--ghost:hover { background: var(--color-accent-subtle); text-decoration: none; }

.btn--danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--border);
}
.btn--danger:hover { background: var(--color-danger-subtle); border-color: var(--danger); color: var(--danger); }

.btn--block { width: 100%; justify-content: center; }
.btn--small { padding: 0.35rem 0.85rem; font-size: 0.7rem; }
.btn--large { padding: 0.8rem 1.75rem; font-size: 0.9rem; }

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn--accent {
  background: var(--color-accent-emphasis);
  color: #fff;
  border-color: var(--color-accent-emphasis);
}
.btn--accent:hover { background: #000000; }

/* ── CARDS ── superficies planas, se distinguen por un tono de
   gris apenas distinto del fondo y un borde fino, sin degradé ni
   relieve. */
.card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--gap-lg);
  box-shadow: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.card:hover { border-color: var(--border-strong); }
a.card { color: var(--text); text-decoration: none; display: block; }
a.card:hover { text-decoration: none; }
a.card h3 { color: var(--primary); font-family: var(--font-heading); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--gap-lg);
}

/* ── PANEL BLOCK ── ficha plana, sin degradé ni relieve; solo el
   fondo (levemente distinto del de página) marca la sección. */
.panel-block {
  --pb-accent: var(--primary);
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--gap-xl) var(--gap-lg);
  margin-bottom: var(--gap-2xl);
  box-shadow: none;
}
.panel-block--signal { --pb-accent: var(--primary); }
.panel-block--blue   { --pb-accent: var(--primary); }
.panel-block--gold   { --pb-accent: var(--primary); }

.panel-block__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pb-accent);
  margin-bottom: 0.9rem;
}
.panel-block__eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.panel-block__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: var(--gap-md);
  padding-bottom: var(--gap-md);
  border-bottom: 1px dashed var(--border-muted);
}
.panel-block__head-left { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.panel-block__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--bg-elevated) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border);
  font-size: 1.35rem;
  box-shadow: inset 0 1px 0 var(--bevel-top), inset 0 -2px 3px var(--bevel-bottom), 0 3px 8px rgba(30,29,25,0.14), 0 1px 0 var(--pb-accent);
}
.panel-block__head .section-title { margin: 0; }
.panel-block__head .section-subtitle { margin: 0.2rem 0 0; }
.panel-block__body { position: relative; }

@media (max-width: 640px) {
  .panel-block { padding: var(--gap-lg) var(--gap-md); margin-bottom: var(--gap-xl); border-radius: var(--radius-md); }
  .panel-block__icon { width: 2.4rem; height: 2.4rem; font-size: 1.1rem; }
}

/* ── LISTA DOSSIER — variante para alternar el ritmo de las secciones ── */
.dossier {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
}
.dossier__row {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-lg);
  padding: var(--gap-lg) var(--gap-xl);
  border-bottom: 1px solid var(--border-muted);
  border-left: 2px solid transparent;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.dossier__row:last-child { border-bottom: none; }
.dossier__row:hover { background: var(--bg-elevated); border-left-color: var(--signal); }
.dossier__tag {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gold);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius);
  padding: 0.2rem 0.5rem;
  margin-top: 0.15rem;
  white-space: nowrap;
}
.dossier__body h3 { margin-bottom: 0.3rem; }
.dossier__body p { margin: 0; }

/* ── REVEAL AL DESPLAZARSE ──
   Usa animation (no transition) para no pisar la transición de :hover
   de los elementos hijos (p. ej. .card) una vez que ya se revelaron. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; }
  .reveal.is-visible {
    animation: hero-rise var(--dur-slow) var(--ease-out) forwards;
  }
  .reveal-stagger > * { opacity: 0; }
  .reveal-stagger.is-visible > * {
    animation: hero-rise var(--dur-slow) var(--ease-out) forwards;
  }
  .reveal-stagger.is-visible > *:nth-child(1) { animation-delay: 0.03s; }
  .reveal-stagger.is-visible > *:nth-child(2) { animation-delay: 0.1s; }
  .reveal-stagger.is-visible > *:nth-child(3) { animation-delay: 0.17s; }
  .reveal-stagger.is-visible > *:nth-child(4) { animation-delay: 0.24s; }
  .reveal-stagger.is-visible > *:nth-child(5) { animation-delay: 0.31s; }
  .reveal-stagger.is-visible > *:nth-child(6) { animation-delay: 0.38s; }
}

/* ── TIPOGRAFÍA ── */
.section-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--gap-sm);
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.section-title .accent { color: var(--gold); }
.mark { color: var(--gold); }
.accent { color: var(--gold); }

.section-subtitle {
  color: var(--text-soft);
  font-size: 1rem;
  max-width: 600px;
  margin-bottom: var(--gap-md);
  line-height: 1.7;
}

/* ============================================================
   NUEVOS MECANISMOS DE LA PÁGINA
   Franja de estadísticas, pasos "cómo empezar" y preguntas
   frecuentes: dan ritmo y aire a la página sin recargarla.
   ============================================================ */

/* ── FRANJA DE ESTADÍSTICAS — panel tipo terminal ── */
.stat-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--gap-lg);
  padding: 2.75rem var(--gap-xl) var(--gap-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat-strip::before {
  content: "sala-de-situacion --status";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2.1rem;
  display: flex;
  align-items: center;
  padding: 0 1rem 0 3.6rem;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.stat-strip::after {
  content: "";
  position: absolute;
  top: 0.75rem; left: 1rem;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: var(--signal-glow), 16px 0 0 -1px var(--gold), 32px 0 0 -1px var(--border-strong);
}
.stat-strip__item { text-align: center; }
.stat-strip__num {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  color: var(--gold);
  line-height: 1.15;
}
.stat-strip__label {
  font-size: 0.8rem;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--text-soft);
  margin-top: 0.3rem;
}

/* ── TENDENCIAS: lo que más pregunta la comunidad (portada) ── */
.trend-panel {
  position: relative;
  padding: 2.75rem var(--gap-xl) var(--gap-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: center;
}
.trend-panel::before {
  content: "asistente-ia --tendencias";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2.1rem;
  display: flex;
  align-items: center;
  padding: 0 1rem 0 3.6rem;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.trend-panel::after {
  content: "";
  position: absolute;
  top: 0.75rem; left: 1rem;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: var(--signal-glow), 16px 0 0 -1px var(--gold), 32px 0 0 -1px var(--border-strong);
}
.trend-panel__loading {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
}
.trend-panel__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--signal);
  margin-bottom: 0.5rem;
}
.trend-panel__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1rem;
}
.trend-panel__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1rem;
}
.trend-panel__tag {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold-bright);
  border: 1px solid var(--color-border-subtle);
  background: var(--gold-subtle);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.85rem;
}
.trend-panel__blurb {
  max-width: 560px;
  margin: 0 auto;
  color: var(--text-soft);
  font-size: 0.97rem;
  line-height: 1.7;
  min-height: 1.7em;
}
.trend-panel__empty {
  max-width: 480px;
  margin: 0 auto;
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ── PASOS: "CÓMO EMPEZAR" ── */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--gap-lg);
  counter-reset: step;
}
.step {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--gap-lg);
  transition: border-color var(--dur-base) var(--ease-out);
}
.step:hover { border-top-color: var(--signal); }
.step__num {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--signal);
  margin-bottom: var(--gap-sm);
}
.step__num::before { content: "["; color: var(--text-muted); }
.step__num::after  { content: "]"; color: var(--text-muted); }
.step__title { margin-bottom: 0.4rem; }
.step__desc { color: var(--text-soft); font-size: 0.95rem; line-height: 1.65; margin: 0; }
/* Línea que conecta los pasos entre sí en escritorio, reforzando
   que se trata de una secuencia real (registrarse → elegir curso
   → sumarse a la comunidad), no de tarjetas sueltas. */
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 2.1rem; right: calc(-1 * var(--gap-lg) / 2 - 1px);
    width: calc(var(--gap-lg) + 2px);
    height: 1px;
    background: repeating-linear-gradient(to right, var(--border-strong) 0 6px, transparent 6px 11px);
    z-index: 1;
  }
}

/* ── PREGUNTAS FRECUENTES (nativo <details>, accesible sin JS) ── */
.faq { display: flex; flex-direction: column; gap: var(--gap-sm); max-width: 760px; margin: 0 auto; }
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  padding: var(--gap-md) var(--gap-lg);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-item__q {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--signal);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius);
  padding: 0.15rem 0.45rem;
}
.faq-item summary .faq-item__text { flex: 1; }
.faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--gold);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] summary { border-bottom: 1px solid var(--border-muted); }
.faq-item[open] { border-color: var(--signal); box-shadow: 0 0 0 1px rgba(30,29,25,0.14); }
.faq-item__body { padding: 0.25rem var(--gap-lg) var(--gap-lg) calc(var(--gap-lg) + 2.6rem); color: var(--text-soft); font-size: 0.97rem; line-height: 1.7; }
@media (max-width: 480px) {
  .faq-item__body { padding-left: var(--gap-lg); }
}

/* ── BANNER DE LLAMADO A LA ACCIÓN ── */
.cta-banner {
  position: relative;
  text-align: center;
  padding: var(--gap-xl) var(--gap-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--bg-card), var(--bg-elevated));
  overflow: hidden;
}
.cta-banner::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--signal), transparent);
}
.cta-banner h2 { margin-bottom: 0.5rem; }
.cta-banner p { max-width: 520px; margin: 0 auto var(--gap-md); }
.cta-banner .hero__actions { margin: 0 auto; }

h1, h2, h3, h4 { color: var(--text); font-family: var(--font-heading); }
h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.35rem; }
p { color: var(--text-soft); font-size: 0.9rem; }

/* ── FORMULARIOS ── */
.auth-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - var(--nav-h) - var(--tabbar-h));
  padding: var(--gap-lg) 1rem;
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 2.25rem 1.75rem;
  box-shadow: var(--shadow);
}
.auth-card__title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.35rem;
  color: var(--text);
  letter-spacing: 0.01em;
}
.auth-card__subtitle {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-soft);
  margin-bottom: var(--gap-lg);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.auth-card__logo {
  display: flex;
  justify-content: center;
  margin-bottom: var(--gap-md);
}
.auth-card__logo img {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  padding: 2px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: var(--gap-md);
}
.field label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.field input:not([type="checkbox"]):not([type="radio"]),
.field textarea,
.field select {
  background: var(--color-canvas-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.55rem 0.75rem;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  min-height: 40px;
  -webkit-appearance: none;
}
.field input:not([type="checkbox"]):not([type="radio"]):focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(30,29,25,0.14);
}
.field input::placeholder { color: var(--text-muted); }
.field textarea { resize: vertical; min-height: 80px; }
.field select option { background: var(--bg-card); color: var(--text); }
.field input[type="checkbox"],
.field input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  flex-shrink: 0;
  accent-color: var(--gold);
  cursor: pointer;
}

.form-message {
  margin-top: var(--gap-md);
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  text-align: center;
  border: 1px solid var(--border);
  display: none;
}
.form-message.show { display: block; }
.form-message--success {
  border-color: var(--color-success-fg);
  color: var(--color-success-fg);
  background: var(--color-success-subtle);
}
.form-message--error {
  border-color: var(--color-danger-fg);
  color: var(--color-danger-fg);
  background: var(--color-danger-subtle);
}

.form-footer {
  margin-top: var(--gap-md);
  text-align: center;
  font-size: 0.8125rem;
  color: var(--text-soft);
}
.form-footer a { color: var(--primary); font-weight: 700; }

/* ── BADGES ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.55rem;
  border-radius: var(--radius);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.6;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 2px rgba(0,0,0,0.12);
}
.badge--pendiente  {
  color: var(--color-attention-fg);
  background: var(--color-attention-subtle);
  border-color: rgba(201,154,46,0.35);
}
.badge--aprobado {
  color: var(--color-success-fg);
  background: var(--color-success-subtle);
  border-color: rgba(63,143,95,0.35);
}
.badge--suspendido {
  color: var(--color-danger-fg);
  background: var(--color-danger-subtle);
  border-color: rgba(179,56,44,0.35);
}
.badge--rechazado {
  color: var(--text-muted);
  background: rgba(110,118,129,0.1);
  border-color: var(--border);
}
.badge--info {
  color: var(--primary);
  background: var(--color-accent-subtle);
  border-color: rgba(30,29,25,0.14);
}

/* ── TABLAS ── */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  -webkit-overflow-scrolling: touch;
}
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
th, td { text-align: left; padding: 0.6rem 1rem; border-bottom: 1px solid var(--border-muted); }
th {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-soft);
  background: var(--bg-elevated);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--color-accent-emphasis);
}
tbody tr:hover { background: var(--bg-elevated); }
tbody tr:last-child td { border-bottom: none; }
.table-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* ── Solicitudes: tarjetas en mobile (sin scroll horizontal) ── */
@media (max-width: 640px) {
  #solicitudes .table-wrap {
    overflow: visible;
    border: none;
    background: transparent;
  }
  #solicitudes table,
  #solicitudes tbody { display: block; width: 100%; }
  #solicitudes thead { display: none; }
  #solicitudes tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    margin-bottom: 0.75rem;
    padding: 0.75rem;
  }
  #solicitudes tbody td {
    border-bottom: none;
    padding: 0;
  }
  #solicitudes tbody td[data-label="Foto"] { flex: 0 0 auto; }
  #solicitudes tbody td[data-label="Usuario"] { flex: 1 1 auto; font-weight: 600; }
  #solicitudes tbody td[data-label="Número"],
  #solicitudes tbody td[data-label="Fecha"],
  #solicitudes tbody td[data-label="Estado"] {
    flex: 1 1 45%;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8rem;
  }
  #solicitudes tbody td[data-label="Número"]::before,
  #solicitudes tbody td[data-label="Fecha"]::before,
  #solicitudes tbody td[data-label="Estado"]::before {
    content: attr(data-label);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    color: var(--text-soft);
  }
  #solicitudes tbody td.table-actions {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
}

/* ── DASHBOARD (PANEL) ── */
.dashboard {
  display: flex;
  min-height: calc(100dvh - var(--nav-h));
}
.sidebar {
  width: 260px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: var(--gap-lg) var(--gap-sm);
  background: var(--color-canvas-default);
  position: sticky;
  top: var(--nav-h);
  height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
}
.sidebar__title {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: var(--gap-sm);
  padding: 0 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sidebar__links { display: flex; flex-direction: column; gap: 0.1rem; }
.sidebar__links a {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-soft);
  transition: background 0.12s, color 0.12s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  border-left: 3px solid transparent;
}
.sidebar__links a:hover {
  background: var(--bg-elevated);
  color: var(--text);
  text-decoration: none;
}
.sidebar__links a.active {
  background: var(--color-accent-subtle);
  color: var(--gold);
  font-weight: 700;
  border-left-color: var(--gold);
}

.sidebar__divider {
  height: 1px;
  background: var(--border-muted);
  margin: var(--gap-sm) 0.5rem;
}

.panel-content {
  flex: 1;
  padding: var(--gap-xl);
  background: transparent;
  min-width: 0;
}
.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap-md);
  margin-bottom: var(--gap-xl);
  padding-bottom: var(--gap-lg);
  border-bottom: 2px solid var(--color-accent-emphasis);
}
.panel-header .section-title { margin-bottom: 0.35rem; }

/* Ritmo vertical uniforme entre bloques del panel: cada título de
   sección (section-title) que abre un bloque nuevo obtiene aire
   arriba, para separarlo del bloque anterior. */
.panel-content > .section-title,
.panel-content > div > .section-title {
  margin-top: var(--gap-xl);
}

/* ── STAT CARDS ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--gap-md);
  margin-bottom: var(--gap-xl);
}
.stat-card {
  background: linear-gradient(165deg, var(--bg-elevated) 0%, var(--bg-card) 65%);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 1.1rem var(--gap-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 84px;
  box-shadow: var(--lift-shadow);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-left-color var(--dur-fast) ease;
}
.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--lift-shadow-hover);
  border-left-color: var(--color-accent-fg, var(--gold));
}
.stat-card:active {
  transform: translateY(-1px);
  box-shadow: var(--lift-shadow-press);
}
.stat-card__value {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  letter-spacing: 0;
}
.stat-card__label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-top: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── INDICADOR DE SCROLL ──
   Riel fino y fijo en el borde derecho: el largo del riel es toda
   la página, el segmento dorado que se mueve adentro es lo que se
   está viendo ahora — para saber de un vistazo cuánto falta para
   llegar al final (o al principio) sin tener que seguir scrolleando
   a ciegas. Se esconde en pantallas cortas sin scroll real. */
#scroll-progress {
  position: fixed;
  top: calc(var(--nav-h) + 0.5rem);
  bottom: calc(var(--tabbar-h) + 0.5rem);
  right: 0.3rem;
  width: 4px;
  border-radius: var(--radius-pill);
  background: var(--border-muted);
  z-index: 240;
  pointer-events: none;
  opacity: 0.85;
}
#scroll-progress__thumb {
  width: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  box-shadow: 0 0 8px rgba(30,29,25,0.14);
  will-change: transform, height;
}
@media (min-width: 641px) {
  #scroll-progress { bottom: 0.5rem; top: calc(var(--nav-h) + 0.5rem); }
}
:root[data-theme="light"] #scroll-progress { background: var(--border); opacity: 0.7; }

/* ── NOVEDADES (panel principal) ──
   Distinto de .alert / Noticias: son tarjetas chicas y horizontales
   que avisan "se publicó algo nuevo", con su propio acento por tipo
   (clase = dorado, proyecto = verde señal) para que se distingan
   de un vistazo sin depender del texto. */
.novedades-strip {
  display: flex;
  gap: var(--gap-sm);
  overflow-x: auto;
  padding-bottom: 0.35rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.novedad-card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 200px;
  padding: 0.85rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-fast) ease;
}
.novedad-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); border-left-color: var(--gold-bright); }
.novedad-card--proyecto { border-left-color: var(--signal); }
.novedad-card--proyecto:hover { border-left-color: var(--signal); box-shadow: var(--shadow), 0 0 20px rgba(30,29,25,0.12); }
.novedad-card__tag {
  align-self: flex-start;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--color-accent-subtle);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.55rem;
}
.novedad-card--proyecto .novedad-card__tag { color: var(--signal); background: var(--signal-subtle); }
.novedad-card__titulo {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.novedad-card__meta { font-size: 0.72rem; color: var(--text-muted); }

/* ── ALERTS / CALLOUTS ── */
.alert {
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  border: 1px solid;
  font-size: 0.875rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.alert--info    { border-color: rgba(30,29,25,0.14); background: var(--color-accent-subtle); color: var(--color-accent-fg); }
.alert--success { border-color: rgba(63,143,95,0.5); background: var(--color-success-subtle); color: var(--color-success-fg); }
.alert--warning { border-color: rgba(201,154,46,0.5); background: var(--color-attention-subtle); color: var(--color-attention-fg); }
.alert--danger  { border-color: rgba(179,56,44,0.5); background: var(--color-danger-subtle); color: var(--color-danger-fg); }

/* ── FOOTER ── */
.footer {
  border-top: 2px solid var(--color-accent-emphasis);
  padding: var(--gap-xl) var(--gap-lg);
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  background: var(--color-canvas-default);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.footer a { color: var(--text-muted); }
.footer a:hover { color: var(--gold); text-decoration: none; }

/* ── ENLACE "VOLVER" EN TEXTO (dentro de contenido, no en el navbar) ── */
.link-back {
  color: var(--text-muted);
  font-size: 0.82rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
  transition: color var(--dur-fast) ease;
}
.link-back:hover { color: var(--primary); text-decoration: none; }

/* ── TABS (secciones) ── */
.tab-section { display: block; }
.tab-section.hidden { display: none !important; }

/* ── TABS BUTTON GROUP ── */
.tab-group {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--gap-lg);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tab-group::-webkit-scrollbar { display: none; }
.tab-btn {
  padding: 0.6rem 1.1rem;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-soft);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.tab-btn:hover { color: var(--text); border-bottom-color: var(--border); }
.tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); font-weight: 700; }

/* ── CURSOS ── */
.curso-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--gap-md);
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.curso-card:hover { border-color: var(--gold); }
.curso-card.expanded { border-color: var(--gold); border-left: 3px solid var(--gold); }
.curso-descripcion {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  color: var(--text-soft);
  font-size: 0.875rem;
  margin: 0.4rem 0;
  white-space: pre-wrap;
}
.curso-descripcion.full {
  display: block;
  -webkit-line-clamp: unset;
}
.categoria-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: var(--gap-lg) 0 var(--gap-sm);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-heading);
}
.categoria-icon { font-size: 1.1rem; }
.nivel-badge {
  display: inline-flex;
  align-items: center;
  padding: 0 0.5rem;
  border-radius: var(--radius);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.6;
  border: 1px solid;
  margin-bottom: 0.35rem;
}
.nivel-basico {
  color: var(--color-accent-fg);
  background: var(--color-accent-subtle);
  border-color: rgba(30,29,25,0.14);
}
.nivel-intermedio {
  color: var(--color-attention-fg);
  background: var(--color-attention-subtle);
  border-color: rgba(201,154,46,0.35);
}
.nivel-avanzado {
  color: var(--color-danger-fg);
  background: var(--color-danger-subtle);
  border-color: rgba(179,56,44,0.35);
}
.expand-hint { color: var(--text-muted); font-size: 0.75rem; margin-top: 0.25rem; }
.curso-actions { display: flex; gap: 0.5rem; margin-top: var(--gap-sm); flex-wrap: wrap; }

/* ── REDES ── */
.social-card { display: flex; flex-direction: column; gap: var(--gap-sm); }
.social-card__icon {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
}

/* ── CHAT ── */
.msg__rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 0.4rem;
  border-radius: var(--radius);
  font-size: 0.6875rem;
  font-weight: 700;
  border: 1px solid;
  margin-left: 0.35rem;
  vertical-align: middle;
  line-height: 1.5;
  text-transform: uppercase;
}
.rank-novato    { color: var(--text-muted);  border-color: var(--border);                  background: rgba(110,118,129,0.1); }
.rank-aprendiz  { color: var(--color-accent-fg);  border-color: rgba(30,29,25,0.14);      background: var(--color-accent-subtle); }
.rank-hacker    { color: var(--color-danger-fg);  border-color: rgba(179,56,44,0.4);       background: var(--color-danger-subtle); }
.rank-elite     { color: var(--gold);              border-color: rgba(30,29,25,0.14);     background: rgba(30,29,25,0.08); }
.rank-maestro   { color: var(--color-done-fg);     border-color: rgba(91,111,158,0.4);   background: var(--color-done-subtle); }

.msg__cert-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(30,29,25,0.06);
  border: 1px solid rgba(30,29,25,0.14);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  margin-top: 0.35rem;
  max-width: 280px;
}
.msg__cert-icon { font-size: 1.5rem; flex-shrink: 0; }
.msg__cert-info { flex: 1; min-width: 0; }
.msg__cert-title { font-size: 0.8125rem; font-weight: 700; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg__cert-sub { font-size: 0.6875rem; color: var(--text-muted); margin-top: 1px; }

.msg__image-attachment {
  display: block;
  max-width: 260px;
  max-height: 320px;
  border-radius: var(--radius);
  margin-top: 0.35rem;
  cursor: pointer;
  border: 1px solid var(--border);
  object-fit: cover;
}
.msg__file-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.55rem 0.75rem;
  margin-top: 0.35rem;
  max-width: 280px;
  text-decoration: none;
  transition: border-color 0.12s;
}
.msg__file-card:hover { border-color: var(--gold); }
.msg__file-icon { font-size: 1.4rem; flex-shrink: 0; }
.msg__file-info { flex: 1; min-width: 0; }
.msg__file-name { font-size: 0.8rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg__file-sub { font-size: 0.68rem; color: var(--text-muted); }
.attach-upload-status {
  font-size: 0.72rem;
  color: var(--text-muted);
  padding: 0.2rem 0.75rem 0;
}

.chat-attach-bar {
  display: flex;
  gap: 0.35rem;
  padding: 0 0 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.chat-attach-bar::-webkit-scrollbar { display: none; }
.attach-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-soft);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}
.attach-btn:hover { border-color: var(--gold); color: var(--gold); background: var(--color-accent-subtle); }
.attach-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.attach-btn:disabled { opacity: 0.5; cursor: default; }

.share-picker-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(4,8,16,0.82);
  z-index: 500;
  align-items: flex-end;
  justify-content: center;
}
.share-picker-overlay.show { display: flex; }
.share-picker {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%;
  max-width: 560px;
  max-height: 70dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.2s ease;
}
.share-picker__header {
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.share-picker__title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}
.share-picker__body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rank-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.12s;
}
.rank-option:hover { background: var(--bg-elevated); border-color: var(--gold); }
.rank-option__icon { font-size: 1.3rem; }
.rank-option__info { flex: 1; }
.rank-option__name { font-size: 0.875rem; font-weight: 700; color: var(--text); }
.rank-option__desc { font-size: 0.75rem; color: var(--text-muted); }

.cert-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius);
  border: 1px solid rgba(30,29,25,0.14);
  background: rgba(30,29,25,0.04);
  cursor: pointer;
  transition: all 0.12s;
}
.cert-option:hover { border-color: var(--gold); background: rgba(30,29,25,0.08); }
.cert-option__icon { font-size: 1.25rem; }
.cert-option__info { flex: 1; min-width: 0; }
.cert-option__title { font-size: 0.875rem; font-weight: 700; color: var(--gold); }
.cert-option__sub { font-size: 0.75rem; color: var(--text-muted); }

.chat-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(30,29,25,0.14);
}
.chat-send-btn { }
.room-item.active {
  background: var(--color-accent-subtle);
  border-left-color: var(--gold);
}
.msg--own .msg__bubble {
  background: var(--color-accent-subtle);
  border-color: rgba(30,29,25,0.14);
}
.msg--own .msg__username { color: var(--gold); }
.thread-replies { border-left-color: var(--border); }

.typing-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  padding: 0 4px;
}
.typing-dots span {
  width: 4px; height: 4px;
  background: var(--text-muted);
  border-radius: 50%;
  animation: dotBounce 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotBounce {
  0%,60%,100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

/* ── UTILITIES ── */
.text-center { text-align: center; }
.mt-sm { margin-top: var(--gap-sm); }
.mt-md { margin-top: var(--gap-md); }
.mt-lg { margin-top: var(--gap-lg); }
.mb-sm { margin-bottom: var(--gap-sm); }
.mb-md { margin-bottom: var(--gap-md); }
.mb-lg { margin-bottom: var(--gap-lg); }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-sm { gap: var(--gap-sm); }
.gap-md { gap: var(--gap-md); }
.hidden { display: none !important; }
.text-muted { color: var(--text-muted); }
.text-soft { color: var(--text-soft); }
.text-accent { color: var(--gold); }
.text-success { color: var(--color-success-fg); }
.text-danger { color: var(--color-danger-fg); }
.text-warning { color: var(--color-attention-fg); }
.monospace { font-family: var(--font-mono); }

/* ── RESPONSIVE: TABLET ── */
@media (max-width: 900px) {
  .dashboard { flex-direction: column; }
  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    position: static;
    height: auto;
    overflow-x: auto;
    padding: var(--gap-sm);
  }
  .sidebar__links {
    flex-direction: row;
    gap: 0.25rem;
    flex-wrap: nowrap;
  }
  .sidebar__links a {
    white-space: nowrap;
    border-radius: var(--radius);
    padding: 0.3rem 0.85rem;
    font-size: 0.8125rem;
  }
  .sidebar__links a.active { }
  .sidebar__divider { display: none; }
  .panel-content { padding: var(--gap-lg) var(--gap-lg) var(--gap-2xl); }
}

/* ── RESPONSIVE: MÓVIL ── */
@media (max-width: 640px) {
  body { font-size: 15.5px; }

  /* Los botones flotantes (ayuda / chat rápido) navegan por encima
     del contenido al hacer scroll. */
  body::-webkit-scrollbar { width: 0; }
  .help-fab, #chat-widget-fab { box-shadow: var(--shadow); }

  /* Un poco más de aire a los costados en pantallas chicas: antes
     el texto y las tarjetas quedaban casi pegados al borde de la
     pantalla, ahora queda un margen más cómodo. */
  .container { padding: 0 1.75rem; }

  /* Las tarjetas (.card) usaban el mismo padding grande que en
     desktop (--gap-lg = 40px), lo que las hacía ver enormes en
     mobile. Achicamos el padding interno para que se vean más
     compactas sin perder el margen contra el borde de pantalla. */
  .card { padding: var(--gap-md); }

  .hero {
    min-height: auto;
    padding: var(--gap-2xl) 1.25rem;
    gap: var(--gap-sm);
  }
  .hero__logo-img { width: 64px; height: 64px; }
  .hero__logo { font-size: 1.5rem; }

  .card-grid { grid-template-columns: 1fr; gap: var(--gap-md); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }

  .btn { min-height: 44px; }
  .field input:not([type="checkbox"]):not([type="radio"]),
  .field textarea,
  .field select {
    min-height: 44px;
    font-size: 16px;
  }

  .sidebar { display: none; }
  #admin-more-btn { display: flex !important; }
  .dashboard { flex-direction: column; }
  .panel-content { padding: var(--gap-md) var(--gap-md) calc(var(--tabbar-h) + var(--ia-dock-h) + var(--gap-2xl)); }
  .panel-header { margin-bottom: var(--gap-lg); padding-bottom: var(--gap-md); }
  .panel-content > .section-title,
  .panel-content > div > .section-title { margin-top: var(--gap-lg); }

  .tab-group { margin-left: -1rem; margin-right: -1rem; padding: 0 1rem; }

  .auth-card { border: none; background: transparent; padding: 1rem; box-shadow: none; }
  .auth-card { border: 1px solid var(--border); border-top: 4px solid var(--gold); background: var(--bg-card); padding: 1.5rem 1rem; box-shadow: none; }

  .dossier__row { flex-direction: column; gap: 0.5rem; }
}

/* ── PROGRESS BAR ── */
.progress-bar {
  height: 5px;
  background: var(--border-muted);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0.35rem 0;
}
.progress-bar__fill {
  height: 100%;
  background: var(--gold);
  border-radius: var(--radius);
  transition: width 0.3s ease;
}

/* ── EMPTY STATE ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-md);
  padding: var(--gap-2xl) var(--gap-lg);
  text-align: center;
  color: var(--text-soft);
}
.empty-state__icon { font-size: 2.5rem; opacity: 0.5; }
.empty-state__title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--text); }
.empty-state__desc { font-size: 0.875rem; max-width: 320px; }

/* ── AVATAR ── */
.avatar {
  border-radius: 50%;
  border: 1px solid var(--border);
  object-fit: cover;
  background: var(--bg-elevated);
  display: inline-block;
  flex-shrink: 0;
}
.avatar--sm  { width: 24px; height: 24px; }
.avatar--md  { width: 40px; height: 40px; }
.avatar--lg  { width: 64px; height: 64px; }
.avatar--xl  { width: 96px; height: 96px; }

/* ── DROPDOWN / MENU ── */
.dropdown {
  position: relative;
  display: inline-flex;
}
.dropdown__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 160px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 300;
  overflow: hidden;
  animation: slideUp 0.15s ease;
  display: none;
}
.dropdown__menu.open { display: block; }
.dropdown__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.dropdown__item:hover { background: var(--bg-elevated); color: var(--text); }
.dropdown__divider { height: 1px; background: var(--border-muted); margin: 0.25rem 0; }

/* ── GUÍA DE AYUDA ── */
.guide-step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
}
.guide-step__number {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-accent-emphasis);
  color: #fff;
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
}
.guide-step__title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  color: var(--text);
}
.guide-step__desc {
  font-size: 1rem;
  color: var(--text-soft);
  line-height: 1.7;
}
.guide-menu-card {
  display: flex;
  gap: 0.875rem;
  align-items: center;
  padding: 1.1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.guide-menu-card__icon { font-size: 1.8rem; flex-shrink: 0; }
.guide-menu-card__title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--text); }
.guide-menu-card__desc { font-size: 0.95rem; color: var(--text-soft); }
.guide-hero {
  text-align: center;
  padding: 2rem 1rem 1rem;
}
.guide-hero__title { font-family: var(--font-heading); font-size: clamp(1.6rem, 5vw, 2.2rem); font-weight: 700; color: var(--text); margin-bottom: 0.6rem; }
.guide-hero__desc { font-size: 1.1rem; color: var(--text-soft); max-width: 600px; margin: 0 auto; line-height: 1.7; }

/* ── MODAL OVERLAY ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4,8,16,0.78);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 480px;
  max-height: 90dvh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.2s ease;
}
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.modal__title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; }
.modal__body { padding: 1.25rem; }
.modal__footer {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border);
}

/* ============================================================
   ASISTENTE IA — Dock persistente global (js/ia-widget.js)
   Barra siempre visible (no un ícono chico escondido en la
   esquina): en móvil vive pegada arriba de la tabbar, de punta
   a punta; en desktop flota como una barra abajo a la derecha.
   Al tocarla/escribir se despliega el panel de charla arriba.
   ============================================================ */
#ia-widget {
  /* z-index bajo el de cualquier modal del sitio (todos usan 999)
     para que, al abrir un formulario/modal en cualquier sección
     (ej. "Nueva convocatoria", "Nueva noticia", cursos, etc.), el
     dock de la IA quede siempre detrás y no lo tape. */
  position: fixed; left: 0; right: 0; bottom: var(--tabbar-h); z-index: 500;
  font-family: var(--font-body);
  /* Se desplaza junto al teclado (ver syncConTeclado en ia-widget.js)
     para quedar siempre pegado arriba de él, sin hueco. */
  transition: transform 0.12s ease-out;
  will-change: transform;
}
/* Además del z-index, se esconde del todo mientras haya un modal
   abierto (ver hayModalAbierto() en ia-widget.js): algunos modales no
   cubren el 100% del alto de pantalla, y el dock se veía "asomar" en
   ese hueco aunque quedara detrás en el orden de apilado. */
.ia-widget--tras-modal { display: none !important; }
@media (min-width: 641px) {
  #ia-widget { left: auto; right: 1.25rem; bottom: 1.25rem; width: min(400px, calc(100vw - 2.5rem)); }
}

#ia-widget-dock {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.55rem 0.9rem;
  padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0));
  background: var(--bg-card);
  border-top: 3px solid var(--gold);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 641px) {
  #ia-widget-dock {
    border: 1px solid var(--border);
    border-top: 3px solid var(--gold);
    border-radius: var(--radius-lg);
    padding-bottom: 0.55rem;
  }
}

/* Avatar tipo "sello institucional": mismo tratamiento que el
   logo del navbar (marco dorado sobre azul marino), no un ícono
   de chat genérico pegado encima del diseño. */
#ia-widget-avatar {
  position: relative;
  flex-shrink: 0;
  width: 38px; height: 38px; border-radius: var(--radius-md);
  background: var(--color-accent-emphasis);
  color: var(--gold); border: 2px solid var(--gold); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease;
}
#ia-widget-avatar:hover { transform: translateY(-1px); background: var(--color-accent-fg); color: var(--color-fg-on-emphasis); }
#ia-widget-avatar svg { width: 19px; height: 19px; }

#ia-widget-input {
  flex: 1; resize: none; max-height: 64px;
  min-height: 36px;
  background: var(--color-canvas-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit; font-size: 0.9rem;
  line-height: 1.2rem;
  padding: 0.45rem 1rem;
  display: flex; align-items: center;
  box-sizing: border-box;
}
#ia-widget-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(30,29,25,0.14); }

#ia-widget-send {
  flex-shrink: 0;
  width: 38px; height: 38px; border-radius: var(--radius);
  background: var(--color-accent-emphasis); color: #fff; border: 1px solid var(--color-accent-emphasis);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  transition: background 0.15s, border-color 0.15s;
}
#ia-widget-send:hover:not(:disabled) { background: var(--gold); border-color: var(--gold); color: var(--color-fg-on-emphasis); }
#ia-widget-send:disabled { opacity: 0.4; cursor: default; }

#ia-widget-panel {
  display: none;
  flex-direction: column;
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  margin-bottom: 0.6rem;
  width: 100%;
  height: min(65vh, 520px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.ia-widget--open #ia-widget-panel { display: flex; }

#ia-widget-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.15rem;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem; color: var(--text);
  flex-shrink: 0;
}
#ia-widget-header-title {
  display: inline-flex; align-items: center; gap: 0.5rem; color: var(--gold);
  font-family: var(--font-heading); font-weight: 700; font-size: 0.98rem;
  letter-spacing: 0.02em; text-transform: uppercase;
}
#ia-widget-header-actions { display: flex; align-items: center; gap: 0.4rem; }
#ia-widget-expand, #ia-widget-minimize {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
#ia-widget-expand:hover, #ia-widget-minimize:hover { color: var(--gold); border-color: var(--gold); background: var(--color-accent-subtle); }
#ia-widget-minimize:hover { color: #fff; border-color: var(--color-danger-fg, #e5534b); background: rgba(229,83,75,0.18); }

#ia-widget-msgs { flex: 1; overflow-y: auto; padding: 1.1rem 1rem; display: flex; flex-direction: column; gap: 0.9rem; }

.ia-w-msg {
  max-width: 84%;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  line-height: 1.6;
  word-wrap: break-word;
}
.ia-w-msg--ia { align-self: flex-start; background: var(--color-canvas-inset); color: var(--text); border: 1px solid var(--border-muted); }
.ia-w-msg--u  { align-self: flex-end; background: var(--color-accent-emphasis); color: #fff; }

.ia-w-msg p { margin: 0 0 0.6rem; }
.ia-w-msg p:last-child { margin-bottom: 0; }
.ia-w-msg ul.ia-w-list { margin: 0.1rem 0 0.7rem; padding-left: 1.15rem; }
.ia-w-msg ul.ia-w-list:last-child { margin-bottom: 0; }
.ia-w-msg li { margin-bottom: 0.35rem; }
.ia-w-msg li:last-child { margin-bottom: 0; }
.ia-w-msg--ia strong { color: var(--gold); }

.ia-w-dots { display: inline-flex; gap: 3px; padding: 0.15rem 0; }
.ia-w-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-muted);
  animation: ia-w-bounce 1.2s infinite ease-in-out;
}
.ia-w-dots span:nth-child(2) { animation-delay: 0.15s; }
.ia-w-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ia-w-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Puntito que avisa que la IA tiene algo para decir (logro, sugerencia)
   sin necesidad de abrir el panel. */
#ia-widget-ping {
  position: absolute;
  top: -3px; right: 4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-danger-fg, #e5534b);
  border: 2px solid var(--bg-card);
  display: none;
}
#ia-widget-ping.show { display: block; }

/* ============================================================
   DOCK DE CHAT COMUNITARIO (flotante, "General")
   ============================================================
   Botón redondo flotante presente en (casi) todas las páginas,
   del lado opuesto al botón de ayuda, que abre un panel liviano
   con la sala General del chat en tiempo real — para poder
   escribirle a la comunidad sin salir de una clase de Termux,
   un curso, etc. — con un enlace directo al chat completo
   (salas, hilos) para lo que este mini-panel
   no cubre.
   ============================================================ */
#chat-widget-fab {
  position: fixed;
  left: 1rem;
  bottom: calc(var(--tabbar-h) + 1rem);
  z-index: 250;
  width: 50px; height: 50px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--gold);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
#chat-widget-fab svg { width: 22px; height: 22px; }
#chat-widget-fab:hover { background: var(--gold); color: var(--color-fg-on-emphasis); transform: translateY(-2px); }
@media (min-width: 641px) { #chat-widget-fab { bottom: 1.25rem; } }
body.ia-dock-active #chat-widget-fab { bottom: calc(var(--tabbar-h) + var(--ia-dock-h) + 0.75rem); }
@media (min-width: 641px) {
  body.ia-dock-active #chat-widget-fab { bottom: calc(var(--ia-dock-h) + 1.5rem); }
}

#chat-widget-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--color-danger-fg, #e5534b);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.62rem; font-weight: 700;
  border: 2px solid var(--bg-card);
  align-items: center; justify-content: center;
  display: none;
}
#chat-widget-badge.show { display: flex; }

#chat-widget-panel {
  display: none;
  flex-direction: column;
  position: fixed;
  left: 0.75rem; right: 0.75rem;
  bottom: calc(var(--tabbar-h) + 4.75rem);
  height: min(65vh, 520px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  z-index: 990;
  font-family: var(--font-body);
}
.chat-widget--open #chat-widget-panel { display: flex; }
body.ia-dock-active #chat-widget-panel { bottom: calc(var(--tabbar-h) + var(--ia-dock-h) + 4.5rem); }
@media (min-width: 641px) {
  #chat-widget-panel { left: 1rem; right: auto; width: min(380px, calc(100vw - 2rem)); bottom: 5rem; }
  body.ia-dock-active #chat-widget-panel { bottom: calc(var(--ia-dock-h) + 5.75rem); }
}

#chat-widget-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.8rem 1rem;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#chat-widget-header-title {
  display: inline-flex; align-items: center; gap: 0.5rem; color: var(--gold);
  font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem;
  letter-spacing: 0.02em;
}
#chat-widget-header-title svg { width: 17px; height: 17px; flex-shrink: 0; }
#chat-widget-header-text { display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.15; }
#chat-widget-header-title-main { text-transform: uppercase; }
#chat-widget-header-subtitle {
  font-family: var(--font-body); font-weight: 500; text-transform: none;
  letter-spacing: 0; font-size: 0.68rem; color: var(--text-muted);
}
#chat-widget-header-actions { display: flex; align-items: center; gap: 0.4rem; }
#chat-widget-expand, #chat-widget-minimize {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
#chat-widget-expand:hover, #chat-widget-minimize:hover { color: var(--gold); border-color: var(--gold); background: var(--color-accent-subtle); }
#chat-widget-minimize:hover { color: #fff; border-color: var(--color-danger-fg, #e5534b); background: rgba(229,83,75,0.18); }

#chat-widget-msgs { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.8rem; }

.chat-w-empty { color: var(--text-muted); font-size: 0.85rem; text-align: center; padding: 2.5rem 1rem; }
.chat-w-error { color: var(--color-danger-fg, #e5534b); font-size: 0.75rem; text-align: center; padding: 0.4rem; }

.chat-w-msg { display: flex; gap: 0.55rem; max-width: 100%; }
.chat-w-msg--own { flex-direction: row-reverse; }

.chat-w-avatar {
  flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--color-canvas-inset);
  border: 1px solid var(--border);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 700;
  overflow: hidden;
}
.chat-w-avatar img { width: 100%; height: 100%; object-fit: cover; }

.chat-w-body { display: flex; flex-direction: column; gap: 0.2rem; max-width: 78%; }
.chat-w-msg--own .chat-w-body { align-items: flex-end; }

.chat-w-meta { display: flex; gap: 0.45rem; align-items: baseline; font-size: 0.68rem; color: var(--text-muted); }
.chat-w-username { color: var(--gold); font-weight: 600; }

.chat-w-bubble {
  background: var(--color-canvas-inset);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  padding: 0.55rem 0.8rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text);
  word-wrap: break-word;
  white-space: pre-wrap;
}
.chat-w-msg--own .chat-w-bubble { background: var(--color-accent-emphasis); color: #fff; border-color: var(--color-accent-emphasis); }

#chat-widget-composer {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0));
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
  flex-shrink: 0;
}
#chat-widget-input {
  flex: 1; resize: none; max-height: 90px;
  min-height: 40px;
  background: var(--color-canvas-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit; font-size: 0.85rem;
  line-height: 1.3rem;
  padding: 0.55rem 0.85rem;
  box-sizing: border-box;
}
#chat-widget-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(30,29,25,0.14); }

#chat-widget-send {
  flex-shrink: 0;
  width: 40px; height: 40px; border-radius: var(--radius);
  background: var(--color-accent-emphasis); color: #fff; border: 1px solid var(--color-accent-emphasis);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
  transition: background 0.15s, border-color 0.15s;
}
#chat-widget-send:hover:not(:disabled) { background: var(--gold); border-color: var(--gold); color: var(--color-fg-on-emphasis); }
#chat-widget-send:disabled { opacity: 0.4; cursor: default; }

/* ====================== GATE DE ACCESO (páginas que requieren cuenta) ======================
   En vez de redirigir de golpe a login.html, estas páginas muestran primero
   qué van a encontrar ahí adentro y recién después ofrecen iniciar sesión o
   registrarse. El visitante decide con información, no a ciegas. */
.auth-gate {
  max-width: 560px;
  margin: 0 auto;
}
.auth-gate__list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.auth-gate__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.45;
}
.auth-gate__list li i {
  flex-shrink: 0;
  font-style: normal;
}
.auth-gate__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ====================== PWA: INSTALAR APP / ACTUALIZACIÓN ======================
   Banner inferior compartido para "instalá la app" (Android/desktop con
   beforeinstallprompt, iOS con instrucciones manuales) y para avisar que
   hay una versión nueva descargada. Ver js/pwa-install.js y js/main.js. */
.pwa-banner {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translate(-50%, 8px);
  width: calc(100% - 2rem);
  max-width: 420px;
  background: var(--color-canvas-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 0.9rem 1rem;
  padding-bottom: calc(0.9rem + env(safe-area-inset-bottom, 0));
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 240;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.pwa-banner.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.pwa-banner__icon { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.pwa-banner__text { flex: 1; min-width: 0; }
.pwa-banner__title { font-weight: 700; font-size: 0.85rem; color: var(--text); margin: 0 0 0.15rem; }
.pwa-banner__desc { font-size: 0.78rem; color: var(--text-soft); margin: 0; line-height: 1.35; }
.pwa-banner__actions { display: flex; flex-shrink: 0; }
.pwa-banner__close {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.3rem;
}
.pwa-banner__close:hover { color: var(--text); }
body.ia-dock-active .pwa-banner { bottom: calc(var(--ia-dock-h) + 1rem); }
@media (min-width: 641px) { .pwa-banner { left: 1.5rem; transform: translate(0, 8px); bottom: 1.5rem; } .pwa-banner.is-visible { transform: translate(0, 0); } }