/* ===================================================
   MyCampus ISTQB — Stylesheet
   =================================================== */

:root {
  --primary: #6C63FF;
  --primary-dark: #5a52d5;
  --primary-light: #8b85ff;
  --secondary: #00D2FF;
  --accent: #FF6B6B;
  --success: #4CAF50;
  --warning: #FFC107;
  --danger: #f44336;
  --success-text: #81C784;
  --warning-text: #FFD54F;
  --danger-text: #EF9A9A;
  --primary-text: #A29DFF;
  --secondary-text: #00D2FF;
  --bg: #0F0F1A;
  --bg2: #16162A;
  --bg3: #1E1E36;
  --bg4: #252545;
  --surface: #1E1E36;
  --surface2: #252545;
  --border: rgba(255,255,255,0.08);
  --text: #E8E8F4;
  --text2: #9999BB;
  --text3: #8C8CC8;
  --sidebar-w: 260px;
  --topbar-h: 64px;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --transition: 0.2s ease;
  --font: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

[data-theme="light"] {
  --bg: #F0F2FF;
  --bg2: #E8EAFF;
  --bg3: #FFFFFF;
  --bg4: #F5F6FF;
  --surface: #FFFFFF;
  --surface2: #F5F6FF;
  --border: rgba(0,0,0,0.08);
  --text: #1A1A2E;
  --text2: #555577;
  --text3: #666688;
  --success-text: #1B5E20;
  --warning-text: #7A5600;
  --danger-text: #B71C1C;
  --primary-text: #4F46C4;
  --secondary-text: #007A99;
  --shadow: 0 4px 24px rgba(108,99,255,0.1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  display: flex;
  /* Par vh + dvh (2026-07-21): dvh descuenta el chrome dinámico del navegador
     móvil (URL bar); la declaración vh anterior queda como fallback para
     navegadores sin dvh. Mismo patrón en .sidebar, .main, #app-container
     y .avatar-modal-card. */
  min-height: 100vh;  /* fallback */
  min-height: 100dvh;
  transition: background var(--transition), color var(--transition);
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }

/* ===== SIDEBAR ===== */
.sidebar {
  width: var(--sidebar-w);
  height: 100vh;  /* fallback */
  height: 100dvh; /* el chrome móvil (URL bar) no roba el footer del sidebar */
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  transition: width var(--transition), transform var(--transition);
  overflow-x: hidden;
  overflow-y: auto;
  /* Safe areas (2026-07-21): viewport-fit=cover en el meta expone los bordes
     bajo notch/home-bar — cada fijo de borde suma su env(inset, 0px) al valor
     base (patrón calc(base + env)); en pantallas sin notch env() vale 0.
     Mismo patrón en .sidebar-footer, .topbar, .toast-container y .bmc-fab. */
  padding-top: env(safe-area-inset-top, 0px);
}

.sidebar.collapsed { width: 64px; }
.sidebar.collapsed .nav-label,
.sidebar.collapsed .logo-title,
.sidebar.collapsed .logo-sub,
.sidebar.collapsed .user-info,
.sidebar.collapsed .user-xp,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .streak-label,
.sidebar.collapsed .streak-count { display: none; }

.sidebar-header {
  padding: 20px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo-icon { font-size: 28px; cursor: pointer; }
.logo-title { display: block; font-weight: 700; font-size: 1rem; color: var(--text); }
.logo-sub { display: block; font-size: 0.7rem; color: var(--primary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

.sidebar-toggle {
  background: none;
  border: none;
  color: var(--text2);
  cursor: pointer;
  font-size: 1.2rem;
  padding: 4px;
  border-radius: 4px;
  transition: color var(--transition);
}
.sidebar-toggle:hover { color: var(--primary); }

.user-card {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.user-name {
  font-weight: 600;
  font-size: 0.9rem;
  display: inline;
}
.user-level { font-size: 0.75rem; color: var(--primary); display: block; }

.xp-bar-small {
  height: 4px;
  background: var(--bg4);
  border-radius: 2px;
  overflow: hidden;
}
.xp-fill-small {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 2px;
  transition: width 0.5s ease;
  width: 0%;
}
.xp-text { font-size: 0.7rem; color: var(--text2); }

.sidebar-nav {
  flex: 1;
  min-height: 0;
  padding: 12px 0;
  overflow-y: auto;
}

.nav-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text3);
  padding: 12px 20px 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  text-decoration: none;
  color: var(--text2);
  border-radius: 0;
  transition: all var(--transition);
  position: relative;
  font-size: 0.875rem;
  font-weight: 500;
}

.nav-item:hover { color: var(--text); background: var(--bg3); }
.nav-item.active {
  color: var(--primary);
  background: rgba(108,99,255,0.1);
  border-right: 3px solid var(--primary);
}

.nav-icon { font-size: 1.1rem; min-width: 20px; text-align: center; }

.sidebar-footer {
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
}

.streak-widget {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg3);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}
.streak-fire { font-size: 1.2rem; }
.streak-count { font-weight: 700; color: var(--warning-text); }
.streak-label { font-size: 0.75rem; color: var(--text2); }

/* ===== MAIN ===== */
.main {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;  /* fallback */
  min-height: 100dvh;
  transition: margin-left var(--transition);
}
.sidebar.collapsed ~ .main { margin-left: 64px; }

/* ===== TOPBAR ===== */
.topbar {
  height: var(--topbar-h);
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: calc(24px + env(safe-area-inset-left, 0px));
  padding-right: calc(24px + env(safe-area-inset-right, 0px));
  position: sticky;
  top: 0;
  /* 120 > sidebar (100): con el drawer abierto la hamburguesa sigue visible
     y clicable — siempre hay un control a la vista que cierra (2026-07-21). */
  z-index: 120;
}

/* Red de seguridad de texto (2026-07-21): min-width: 0 deja encoger a los
   flex-items (por defecto no bajan de su contenido) y overflow-wrap parte las
   palabras largas en los contenedores de contenido. Inofensivo en desktop. */
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 12px; }

.page-title { font-size: 1.1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.3rem;
  cursor: pointer;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  position: relative;
}
.search-icon { font-size: 0.85rem; }
.search-input {
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 1rem;
  width: 200px;
}
.search-input::placeholder { color: var(--text3); }
.search-results {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 320px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  z-index: 300;
  padding: 6px;
}
.search-results-header {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text3);
  padding: 6px 10px 2px;
}
.search-result {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.search-result:hover { background: var(--bg4); }
/* I7 (ronda 2): resultado activo por teclado (aria-activedescendant). El
   outline interior lo hace visible también en el tema claro. */
.search-result.gs-active {
  background: var(--bg4);
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.search-result-term { font-weight: 700; font-size: 0.85rem; }
.search-result-def {
  font-size: 0.8rem;
  color: var(--text2);
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-result.expanded .search-result-def {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.search-result-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
}
.search-result-lesson {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}
.search-no-results {
  padding: 12px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text3);
}

/* I7 (ronda 2): botón que abre la búsqueda en móvil y botón de cierre de la
   barra. Ocultos en desktop; el bloque de 768px los muestra. */
.mobile-search-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 8px;
}
.search-close-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text2);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 8px;
}

.lang-switcher {
  display: flex;
  background: var(--bg3);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
}
.lang-btn {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: all var(--transition);
}
.lang-btn.active {
  background: var(--primary);
  color: white;
}

.theme-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text); /* el SVG .icon usa currentColor — sin esto hereda el negro UA (invisible en tema oscuro) */
  font-size: 1.2rem;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: transform var(--transition);
}
.theme-btn:hover { transform: scale(1.1); }

/* ===== VIEWS ===== */
.views-container { flex: 1; overflow: auto; }
.view { display: none; padding: 28px 32px; animation: fadeIn 0.2s ease; }
.view.active { display: block; }

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

/* ===== CARDS ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.card-header h3 { font-size: 0.95rem; font-weight: 600; }
.card-link {
  font-size: 0.8rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}
.card-link:hover { text-decoration: underline; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: none;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
.btn-secondary { background: var(--secondary); color: #000; }
.btn-secondary:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-outline { background: transparent; border: 2px solid var(--primary); color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: white; }
.btn-ghost { background: var(--bg3); color: var(--text2); border: 1px solid var(--border); }
.btn-ghost:hover { color: var(--text); border-color: var(--primary); }
.btn-sm { padding: 6px 12px; font-size: 0.8rem; }

/* ===== BADGES ===== */
.badge-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge-primary { background: rgba(108,99,255,0.2); color: var(--primary-text); }

/* ===== DASHBOARD ===== */
.welcome-banner {
  background: linear-gradient(135deg, var(--primary) 0%, #8B5CF6 50%, var(--secondary) 100%);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  overflow: hidden;
  position: relative;
}
.welcome-banner::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
  top: -60px;
  right: 80px;
}
.welcome-text h2 { font-size: 1.5rem; font-weight: 800; color: white; margin-bottom: 8px; }
.welcome-text p { color: rgba(255,255,255,0.85); font-size: 0.9rem; }
.welcome-emoji { font-size: 3rem; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow); }
.stat-icon { font-size: 1.5rem; }
.stat-value { font-size: 1.6rem; font-weight: 800; color: var(--primary); }
.stat-label { font-size: 0.8rem; color: var(--text2); }
.stat-progress { height: 3px; background: var(--bg4); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.stat-progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: 2px; width: 0%; transition: width 0.6s ease; }

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.continue-list { display: flex; flex-direction: column; gap: 10px; }
.continue-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  border: 1px solid var(--border);
}
.continue-item:hover { border-color: var(--primary); }
.continue-item-icon { font-size: 1.5rem; min-width: 36px; }
.continue-item-title { font-weight: 600; font-size: 0.875rem; }
.continue-item-sub { font-size: 0.75rem; color: var(--text2); margin-top: 2px; }
.continue-item-progress {
  margin-top: 6px;
  height: 4px;
  background: var(--bg4);
  border-radius: 2px;
  overflow: hidden;
}
.continue-item-fill { height: 100%; background: var(--primary); border-radius: 2px; }

/* ===== READINESS CHART ===== */
.readiness-chart { display: flex; align-items: center; gap: 24px; }
.readiness-circle { position: relative; width: 120px; min-width: 120px; }
.circular-chart { width: 120px; height: 120px; transform: rotate(-90deg); }
.circle-bg { fill: none; stroke: var(--bg4); stroke-width: 8; }
.circle-fill {
  fill: none;
  stroke: var(--primary);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dasharray 1s ease;
}
.readiness-percent {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary);
}
.readiness-info { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.readiness-item { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; }
.readiness-item strong { margin-left: auto; font-weight: 700; }
.r-dot { width: 8px; height: 8px; border-radius: 50%; min-width: 8px; }
.r-dot-done { background: var(--success); }
.r-dot-mid { background: var(--warning); }
.r-dot-low { background: var(--primary); }

/* ===== DAILY CHALLENGE ===== */
.daily-challenge-content { display: flex; flex-direction: column; gap: 12px; }
.dc-question { font-size: 0.9rem; line-height: 1.5; font-weight: 500; padding: 12px; background: var(--bg3); border-radius: var(--radius-sm); }
.dc-options { display: flex; flex-direction: column; gap: 6px; }
.dc-option {
  padding: 8px 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.82rem;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
}
.dc-option:hover { border-color: var(--primary); color: var(--primary); }
.dc-option.correct { border-color: var(--success); background: rgba(76,175,80,0.1); color: var(--success-text); }
.dc-option.wrong { border-color: var(--danger); background: rgba(244,67,54,0.1); color: var(--danger-text); }
.dc-label { width: 20px; height: 20px; border-radius: 50%; background: var(--bg4); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; min-width: 20px; }

/* ===== ACHIEVEMENTS MINI ===== */
.achievements-mini { display: flex; flex-wrap: wrap; gap: 8px; }
.achievement-mini-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg3);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  border: 1px solid var(--border);
}
.achievement-mini-item.locked { opacity: 0.4; }

/* ===== CURRICULUM ===== */
.curriculum-header { margin-bottom: 28px; }
.curriculum-header h2 { font-size: 1.4rem; font-weight: 800; margin-bottom: 6px; }
.curriculum-header p { color: var(--text2); font-size: 0.875rem; }

.chapters-grid { display: flex; flex-direction: column; gap: 16px; }
.chapter-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all var(--transition);
}
.chapter-card:hover { border-color: var(--primary); }

.chapter-card-header {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}
.chapter-number {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  min-width: 48px;
}
.chapter-info { flex: 1; min-width: 0; }
.chapter-title { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.chapter-meta { font-size: 0.78rem; color: var(--text2); }
.chapter-actions { display: flex; align-items: center; gap: 12px; }
.chapter-progress-ring { position: relative; width: 44px; height: 44px; }
.chapter-progress-ring svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.cpring-bg { fill: none; stroke: var(--bg4); stroke-width: 4; }
.cpring-fill { fill: none; stroke: var(--primary); stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray 0.6s ease; }
.cpring-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text2);
}
.chapter-chevron { color: var(--text3); transition: transform var(--transition); font-size: 0.8rem; }
.chapter-card.open .chapter-chevron { transform: rotate(90deg); }

.chapter-topics {
  border-top: 1px solid var(--border);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.chapter-card.open .chapter-topics { max-height: 600px; }
.topic-list { padding: 8px 24px 16px; display: flex; flex-direction: column; gap: 4px; }
.topic-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  font-size: 0.875rem;
}
.topic-item:hover { background: var(--bg3); }
.topic-status { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; min-width: 20px; }
.topic-status.done { background: var(--success); color: white; }
.topic-status.in-progress { background: var(--primary); color: white; }
.topic-status.locked { background: var(--bg4); color: var(--text3); }
.topic-title { flex: 1; }
.topic-xp { font-size: 0.72rem; color: var(--primary); font-weight: 600; }

/* ===== LESSON ===== */
.lesson-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.lesson-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--bg4);
  border-radius: 3px;
  overflow: hidden;
}
.lesson-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 3px;
  transition: width 0.3s ease;
  width: 0%;
}
.lesson-progress-text { font-size: 0.8rem; color: var(--text2); white-space: nowrap; }

.lesson-container { max-width: 800px; margin: 0 auto; }
.lesson-title { font-size: 1.6rem; font-weight: 800; margin-bottom: 8px; }
.lesson-chapter-tag { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; margin-bottom: 20px; }
.lesson-content { line-height: 1.8; font-size: 0.95rem; color: var(--text); overflow-wrap: break-word; }
.lesson-content h3 { font-size: 1.1rem; font-weight: 700; margin: 24px 0 12px; color: var(--primary); }
.lesson-content h4 { font-size: 0.95rem; font-weight: 700; margin: 16px 0 8px; }
.lesson-content p { margin-bottom: 12px; }
.lesson-content ul, .lesson-content ol { padding-left: 20px; margin-bottom: 12px; }
.lesson-content li { margin-bottom: 6px; }
.lesson-content .highlight-box {
  background: rgba(108,99,255,0.1);
  border-left: 4px solid var(--primary);
  padding: 16px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 16px 0;
}
.lesson-content .example-box {
  background: rgba(0,210,255,0.07);
  border: 1px solid rgba(0,210,255,0.2);
  padding: 16px;
  border-radius: var(--radius-sm);
  margin: 16px 0;
  font-size: 0.875rem;
}
.lesson-content .warning-box {
  background: rgba(255,193,7,0.08);
  border-left: 4px solid var(--warning);
  padding: 16px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 16px 0;
}
/* Contenedor de scroll de tablas (aplicado por _wrapLessonTables en render).
   En desktop es inerte (nada desborda); en móvil da scroll local en vez de
   desbordar la página entera. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.table-scroll table { margin: 0; }
.lesson-content table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 0.875rem; }
.lesson-content th { background: var(--bg3); padding: 10px 14px; text-align: left; font-weight: 600; border-bottom: 2px solid var(--border); }
.lesson-content td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.lesson-content tr:hover td { background: var(--bg3); }
.lesson-content code { font-family: var(--mono); background: var(--bg4); padding: 2px 6px; border-radius: 4px; font-size: 0.85em; color: var(--secondary); }

.lesson-content .lesson-source {
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: 0.75rem;
  color: var(--text2);
}

.lesson-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
.lesson-complete-btn { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; border: none; padding: 12px 28px; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: all var(--transition); display: flex; align-items: center; gap: 8px; }
.lesson-complete-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(108,99,255,0.4); }
.lesson-complete-btn.completed { background: var(--success); }

/* Primario de avance de lección (2026-07-21). --primary-dark, no --primary:
   blanco sobre #6C63FF es 4.32:1 (falla AA), sobre #5a52d5 es 5.83:1 (pasa) —
   mismo criterio que .bmc-fab. Por eso NO reutiliza .btn-primary, que arrastra
   ese fallo. En el tier 480 se oculta .next-topic-title y queda "Siguiente
   lección →" a secas (truncar con ellipsis se leía mal). */
.lesson-next-btn {
  background: var(--primary-dark);
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
}
.lesson-next-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(108,99,255,0.4); }

/* Estado bloqueado (gating 2026-07-21): atenuado pero enfocable y clicable —
   nunca disabled real (no enfocable, no explica el porqué). El clic dispara
   el toast de aviso desde advanceLesson; por eso NO lleva pointer-events:none.
   WCAG 1.4.3 exime del ratio AA a controles inactivos (aria-disabled). */
.lesson-next-btn.locked { opacity: 0.55; cursor: not-allowed; }
.lesson-next-btn.locked:hover { transform: none; box-shadow: none; }

/* ===== FLASHCARDS ===== */
.flashcards-header { margin-bottom: 24px; }
.flashcards-header h2 { font-size: 1.4rem; font-weight: 800; margin-bottom: 6px; }
.flashcards-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.select-input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 16px;
  font-family: var(--font);
  font-size: 1rem;
  cursor: pointer;
  outline: none;
}
.select-input:focus { border-color: var(--primary); }
.card-counter { font-weight: 700; color: var(--text2); font-size: 0.9rem; margin-left: auto; }

.flashcard-arena {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
  min-height: 300px;
}

.fc-arrow {
  width: 44px;
  height: 44px;
  flex-shrink: 0; /* a 320px el flex las aplastaba a 29px de ancho (bug, no tier) */
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fc-arrow:hover { border-color: var(--primary); color: var(--primary); background: rgba(108,99,255,0.1); }

/* Mecanismo grid-stack del flip (2026-07-21): antes las caras eran
   position:absolute con height:100%, lo que clavaba la tarjeta a los 280px
   fijos del contenedor — una respuesta larga desbordaba en vez de crecer.
   Ahora las dos caras se apilan en la misma celda (grid-area: 1/1) del
   rotador .flashcard-inner: la fila mide la cara más alta y el contenedor
   crece con el contenido (min-height: 280px como suelo). El flip 3D es el
   mismo: .flashcard aporta la perspectiva (y es lo que traslada el carrusel
   con estilos inline — elementos distintos, transiciones independientes);
   .flashcard-inner conserva preserve-3d + su transición de rotación; las
   caras conservan backface-visibility y el rotateY(180deg) de la trasera. */
.flashcard {
  width: 600px;
  max-width: 100%;
  min-height: 280px;
  display: grid; /* la única celda estira .flashcard-inner a la altura total */
  perspective: 1000px;
  cursor: pointer;
}

.flashcard-inner {
  display: grid; /* apila las caras en la celda 1/1 (sustituye al absolute) */
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}
.flashcard-inner.flipped { transform: rotateY(180deg); }

.flashcard-front, .flashcard-back {
  grid-area: 1 / 1;
  position: relative; /* containing block del .fc-tts-btn absoluto de cada cara */
  backface-visibility: hidden;
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.flashcard-front {
  background: linear-gradient(135deg, var(--surface) 0%, var(--bg3) 100%);
  border: 1px solid var(--border);
}
.flashcard-back {
  background: linear-gradient(135deg, var(--primary) 0%, #8B5CF6 100%);
  transform: rotateY(180deg);
}

.fc-chapter-tag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary);
  margin-bottom: 16px;
}
.fc-question { font-size: 1.05rem; font-weight: 600; line-height: 1.5; margin-bottom: 16px; overflow-wrap: break-word; }
.fc-hint { font-size: 0.78rem; color: var(--text3); }
.fc-answer { font-size: 0.95rem; line-height: 1.6; color: white; font-weight: 500; overflow-wrap: break-word; }

.flashcard-rating {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.flashcard-rating p { font-size: 0.875rem; color: var(--text2); }
.rating-btns { display: flex; gap: 12px; }
.rating-btn {
  padding: 8px 20px;
  border-radius: var(--radius-sm);
  border: none;
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--transition);
}
.rating-hard { background: rgba(244,67,54,0.2); color: var(--danger-text); }
.rating-hard:hover { background: var(--danger); color: white; }
.rating-ok { background: rgba(255,193,7,0.2); color: var(--warning-text); }
.rating-ok:hover { background: var(--warning); color: #000; }
.rating-easy { background: rgba(76,175,80,0.2); color: var(--success-text); }
.rating-easy:hover { background: var(--success); color: white; }

.flashcard-stats-row {
  display: flex;
  justify-content: center;
  gap: 24px;
  font-size: 0.8rem;
  color: var(--text2);
}
.fc-stat { display: flex; align-items: center; gap: 6px; }

/* ===== SIMULATOR ===== */
.sim-header { margin-bottom: 28px; }
.sim-header h2 { font-size: 1.4rem; font-weight: 800; margin-bottom: 6px; }
.sim-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sim-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: all var(--transition);
}
.sim-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow); }
.sim-card-icon { font-size: 2rem; }
.sim-card h3 { font-size: 1rem; font-weight: 700; }
.sim-card p { font-size: 0.82rem; color: var(--text2); line-height: 1.5; }
.sim-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { background: var(--bg3); border: 1px solid var(--border); padding: 3px 8px; border-radius: 20px; font-size: 0.7rem; color: var(--text2); }
.sim-card-locked { cursor: not-allowed; opacity: 0.65; }
.sim-card-locked:hover { border-color: var(--border); transform: none; box-shadow: none; }
.sim-lock-icon { font-size: 1.5rem; }
.sim-lock-msg { font-size: 0.78rem; color: var(--text2); font-style: italic; }

.exam-history { display: flex; flex-direction: column; gap: 8px; }
.exam-history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg3);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
}
.exam-history-score { font-weight: 700; margin-left: auto; }
.exam-history-score.pass { color: var(--success-text); }
.exam-history-score.fail { color: var(--danger-text); }

/* CHAPTER SELECTOR */
.chapter-selector {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 600px;
  margin: 0 auto;
}
.chapter-selector h3 { margin-bottom: 16px; font-size: 1.1rem; }
.chapter-selector-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.chapter-sel-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  text-align: left;
  color: var(--text);
  font-family: var(--font);
  font-size: 0.875rem;
}
.chapter-sel-btn:hover { border-color: var(--primary); background: rgba(108,99,255,0.08); }
.chapter-sel-btn.locked { opacity: 0.5; cursor: not-allowed; }
.chapter-sel-btn.locked:hover { border-color: var(--border); background: var(--bg3); }

/* EXAM MODE */
.exam-mode { max-width: 860px; margin: 0 auto; }
.exam-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 16px 20px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.exam-title { font-weight: 700; font-size: 0.95rem; }
.exam-timer { font-family: var(--mono); font-size: 1.2rem; font-weight: 700; color: var(--primary); padding: 4px 12px; background: rgba(108,99,255,0.1); border-radius: var(--radius-sm); }
.exam-timer.warning { color: var(--warning-text); background: rgba(255,193,7,0.1); }
.exam-timer.danger { color: var(--danger-text); background: rgba(244,67,54,0.1); animation: pulse 1s infinite; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

.exam-progress-bar { height: 4px; background: var(--bg4); border-radius: 2px; margin-bottom: 20px; overflow: hidden; }
.exam-progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--secondary)); width: 0%; transition: width 0.3s ease; }

.exam-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 20px;
  min-height: 300px;
}
.exam-q-num { font-size: 0.78rem; color: var(--text3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
.exam-q-chapter { font-size: 0.75rem; color: var(--primary); font-weight: 600; margin-bottom: 8px; }
.exam-q-text { font-size: 1rem; font-weight: 600; line-height: 1.6; margin-bottom: 24px; overflow-wrap: break-word; }
.exam-options { display: flex; flex-direction: column; gap: 10px; }
.exam-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg3);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  font-size: 0.875rem;
  line-height: 1.4;
  overflow-wrap: break-word;
}
.exam-option:hover { border-color: var(--primary); background: rgba(108,99,255,0.05); }
.exam-option.selected { border-color: var(--primary); background: rgba(108,99,255,0.1); }
.exam-option.correct { border-color: var(--success); background: rgba(76,175,80,0.1); }
.exam-option.wrong { border-color: var(--danger); background: rgba(244,67,54,0.1); }
.exam-option-letter {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  min-width: 28px;
}
.exam-option.selected .exam-option-letter { background: var(--primary); color: white; }
.exam-option.correct .exam-option-letter { background: var(--success); color: white; }
.exam-option.wrong .exam-option-letter { background: var(--danger); color: white; }

.exam-explanation {
  margin-top: 16px;
  padding: 14px 16px;
  background: rgba(108,99,255,0.08);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.85rem;
  line-height: 1.6;
  display: none;
}
.exam-explanation.visible { display: block; }

.exam-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.exam-counter { font-weight: 700; color: var(--text2); }

.exam-question-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.exam-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg4);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  color: var(--text2);
}
.exam-dot.answered { background: rgba(108,99,255,0.2); border-color: var(--primary); color: var(--primary); }
.exam-dot.current { background: var(--primary); border-color: var(--primary); color: white; }

/* RESULTS */
.exam-results { max-width: 800px; margin: 0 auto; }
.results-header { text-align: center; padding: 32px; background: var(--surface); border-radius: var(--radius-lg); margin-bottom: 24px; border: 1px solid var(--border); }
.results-emoji { font-size: 4rem; margin-bottom: 16px; }
.results-score { font-size: 3rem; font-weight: 800; color: var(--primary); margin: 12px 0; }
.results-verdict { font-size: 1.1rem; font-weight: 600; }
.results-verdict.pass { color: var(--success-text); }
.results-verdict.fail { color: var(--danger-text); }
.results-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.result-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; text-align: center; }
.result-stat-val { font-size: 1.5rem; font-weight: 800; color: var(--primary); }
.result-stat-label { font-size: 0.75rem; color: var(--text2); margin-top: 4px; }
.results-review { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 24px; }
.results-review h3 { margin-bottom: 16px; }
.review-item { margin-bottom: 16px; padding: 14px; background: var(--bg3); border-radius: var(--radius-sm); font-size: 0.875rem; }
.review-item-q { font-weight: 600; margin-bottom: 8px; overflow-wrap: break-word; }
.review-item-correct { color: var(--success-text); font-size: 0.82rem; }
.review-item-wrong { color: var(--danger-text); font-size: 0.82rem; }
.review-item-exp { color: var(--text2); font-size: 0.82rem; margin-top: 6px; border-top: 1px solid var(--border); padding-top: 6px; }
.results-actions { display: flex; gap: 12px; justify-content: center; }

/* ===== GLOSSARY ===== */
.glossary-header { margin-bottom: 24px; }
.glossary-header h2 { font-size: 1.4rem; font-weight: 800; margin-bottom: 6px; }
.search-input-full {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: var(--text);
  font-size: 1rem;
  font-family: var(--font);
  outline: none;
  margin-bottom: 16px;
  transition: border-color var(--transition);
}
.search-input-full:focus { border-color: var(--primary); }
.glossary-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.filter-btn {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font);
}
.filter-btn:hover, .filter-btn.active { background: var(--primary); border-color: var(--primary); color: white; }
.glossary-list { display: flex; flex-direction: column; gap: 2px; }
.glossary-item {
  display: flex;
  gap: 16px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.glossary-item:hover { border-color: var(--primary); }
.glossary-term {
  font-weight: 700;
  font-size: 0.9rem;
  min-width: 200px;
  color: var(--primary-text);
}
.glossary-def { font-size: 0.875rem; color: var(--text2); line-height: 1.5; flex: 1; min-width: 0; overflow-wrap: break-word; }
.glossary-chapter { font-size: 0.7rem; color: var(--text3); align-self: flex-start; white-space: nowrap; margin-top: 2px; min-width: 60px; text-align: right; }

/* ===== PROGRESS ===== */
#view-progress > h2 { margin-bottom: 20px; }
.progress-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.progress-overview { grid-column: span 2; }
.progress-stats-big { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 8px; }
.progress-stat-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 24px;
  background: var(--bg3);
  border-radius: var(--radius-sm);
  gap: 4px;
  min-width: 100px;
}
.progress-stat-big-val { font-size: 2rem; font-weight: 800; }
.progress-stat-big-label { font-size: 0.75rem; color: var(--text2); text-align: center; }

.chapter-progress-list { display: flex; flex-direction: column; gap: 12px; }
.chapter-prog-item { display: flex; flex-direction: column; gap: 6px; }
.chapter-prog-header { display: flex; justify-content: space-between; font-size: 0.82rem; }
.chapter-prog-title { font-weight: 600; }
.chapter-prog-pct { color: var(--primary-text); font-weight: 700; }
.chapter-prog-bar { height: 6px; background: var(--bg4); border-radius: 3px; overflow: hidden; }
.chapter-prog-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: 3px; transition: width 0.6s ease; }

.bar-chart-container { display: flex; align-items: flex-end; gap: 8px; height: 120px; padding: 8px 0; }

.activity-list { display: flex; flex-direction: column; gap: 8px; }
.activity-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}
.activity-item:last-child { border-bottom: none; }
.activity-icon { font-size: 1rem; }
.activity-text { flex: 1; color: var(--text2); min-width: 0; overflow-wrap: break-word; }
.activity-xp { color: var(--primary); font-weight: 700; font-size: 0.75rem; }
.activity-time { color: var(--text3); font-size: 0.72rem; }

/* ===== ACHIEVEMENTS ===== */
.achievements-header { margin-bottom: 24px; }
.achievements-header h2 { font-size: 1.4rem; font-weight: 800; margin-bottom: 6px; }
.achievements-summary {
  background: linear-gradient(135deg, var(--primary) 0%, #8B5CF6 100%);
  border-radius: var(--radius);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}
.achievements-summary-icon { font-size: 3rem; }
.achievements-summary-text h3 { color: white; font-size: 1.2rem; margin-bottom: 4px; }
.achievements-summary-text p { color: rgba(255,255,255,0.8); font-size: 0.85rem; }

.achievements-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.achievement-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.achievement-card.unlocked { border-color: var(--primary); }
.achievement-card.unlocked::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}
.achievement-card.locked { opacity: 0.5; filter: grayscale(0.8); }
.achievement-icon { font-size: 2.5rem; }
.achievement-name { font-weight: 700; font-size: 0.9rem; }
.achievement-desc { font-size: 0.78rem; color: var(--text2); line-height: 1.4; }
.achievement-xp { font-size: 0.75rem; color: var(--primary); font-weight: 700; }
.achievement-unlocked-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--success);
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
}

/* ===== TOAST ===== */
/* Base 80px (no 24px): deja hueco al pill .bmc-fab, de base 24px con ~44px de
   alto. Ambos suman el mismo env(safe-area-inset-bottom), así que el hueco de
   56px se conserva. Los toasts (transitorios, aria-live) ganan el rincón. */
/* z-index 6000 (2026-07-25): por encima de los modales (5000) — los toasts de
   logro/level-up saltan en el mismo completeLesson que abre la celebración y
   deben verse sobre su scrim. Siguen bajo el tour de onboarding (9999+). */
.toast-container { position: fixed; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); right: calc(24px + env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 8px; z-index: 6000; }
.toast {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  box-shadow: var(--shadow);
  animation: slideIn 0.3s ease;
  min-width: 280px;
}
.toast-success { border-left: 4px solid var(--success); }
.toast-warning { border-left: 4px solid var(--warning); }
.toast-error { border-left: 4px solid var(--danger); }
.toast-info { border-left: 4px solid var(--primary); }

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* XP POPUP */
.xp-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  padding: 16px 32px;
  border-radius: var(--radius-lg);
  font-size: 1.4rem;
  font-weight: 800;
  z-index: 2000;
  display: none;
  animation: xpPop 0.6s ease forwards;
  pointer-events: none;
}
@keyframes xpPop {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  50% { transform: translate(-50%, -60%) scale(1.1); opacity: 1; }
  80% { transform: translate(-50%, -70%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -80%) scale(0.9); opacity: 0; }
}

/* ===== MOBILE OVERLAY ===== */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 99;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .sim-cards { grid-template-columns: 1fr; }
  .progress-grid { grid-template-columns: 1fr; }
  .progress-overview { grid-column: span 1; }
  .results-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-w);
  }
  .sidebar.mobile-open { transform: translateX(0); }
  /* Drawer móvil (2026-07-21): la visibilidad del scrim y el scroll-lock del
     fondo cuelgan de la clase drawer-open en <body> — App._setDrawerOpen es
     el único punto que la pone/quita (regla paralela a exam-active). Dentro
     de este tier a propósito: en desktop el drawer es inerte y no debe
     oscurecer la página ni bloquear el scroll (hallazgo C1 de la revisión). */
  body.drawer-open .sidebar-overlay { display: block; }
  body.drawer-open { overflow: hidden; }
  .main { margin-left: 0; }
  .mobile-menu-btn { display: block; }
  /* El colapso a rail de 64px es affordance de desktop; dentro del drawer
     móvil solo confunde (2026-07-21). */
  #sidebarToggle { display: none; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .view { padding: 16px; }
  .flashcard { width: 100%; }
  /* I7: la búsqueda ya no desaparece — barra a ancho completo bajo el topbar,
     toggled por #mobileSearchBtn. Mismo #globalSearch, mismo JS. */
  .mobile-search-btn { display: inline-flex; align-items: center; justify-content: center; }
  .search-box {
    display: none;
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    z-index: 60;
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding: 10px 16px;
  }
  .search-box.mobile-open { display: flex; }
  .search-box .search-input { flex: 1; width: auto; }
  .search-box .search-results { left: 8px; right: 8px; width: auto; }
  .search-close-btn { display: inline-flex; }
  .readiness-chart { flex-direction: column; }
  /* Colchón para que ningún botón quede bajo el FAB al final del scroll.
     72px = 48 del círculo + 24 de su offset inferior. Deliberadamente solo en
     la lección: extenderlo a otras vistas queda fuera de alcance. */
  .lesson-actions { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* ===== TIER TELÉFONO (adaptabilidad móvil, 2026-07-21) =====
   Hasta hoy solo existía el tier tablet (768px); la franja 320–480px estaba
   sin tratar (el antiguo bloque de 500px —solo avatar-grid— está fusionado
   aquí). Criterio: recuperar ancho útil (paddings), colapsar a 1 columna lo
   que quedaba ilegible, y envolver las filas que no cabían. */
@media (max-width: 480px) {
  .view { padding: 12px; }
  .topbar {
    padding-left: calc(12px + env(safe-area-inset-left, 0px));
    padding-right: calc(12px + env(safe-area-inset-right, 0px));
  }
  .topbar-left, .topbar-right { gap: 8px; }
  .card { padding: 16px; }
  .exam-body { padding: 16px; }
  .welcome-banner { padding: 20px; }
  .topic-list { padding: 8px 12px 16px; }
  .stats-grid { grid-template-columns: 1fr; }
  .results-stats { grid-template-columns: 1fr; }
  .rating-btns { flex-wrap: wrap; justify-content: center; }
  .results-actions { flex-wrap: wrap; }
  .lesson-actions { flex-wrap: wrap; gap: 12px; }
  /* "Siguiente lección: 1.2 ¿Por qué es n…" se lee mal truncado; en teléfono
     el botón queda "Siguiente lección →" a secas. */
  .next-topic-title { display: none; }
  .exam-topbar { flex-wrap: wrap; gap: 8px; }
  /* Dots del examen: la parrilla envolvente media 408px de alto a 320px con
     los targets de 44px de I3. En teléfono: tira de una fila con scroll,
     el dot actual se auto-centra desde JS. Touch target intacto. */
  .exam-question-dots {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 6px; /* hueco para la scrollbar */
    -webkit-overflow-scrolling: touch;
  }
  /* En la tira nowrap el flex-shrink por defecto aplastaba los 40 dots a
     ~11px de ancho (lo cazó validate-responsive.js): el target táctil de
     44px de I3 es innegociable. */
  .exam-dot { flex-shrink: 0; }
  .flashcard-stats-row { flex-wrap: wrap; }
  /* Flashcards: las flechas laterales robaban ~140px de ancho a la tarjeta.
     En teléfono, tarjeta a ancho completo y flechas en fila debajo. Las
     flechas son hijos directos de la arena flanqueando la tarjeta (sin
     contenedor propio), así que flex-direction:column las apilaría una por
     línea en vertical: el apilado real es wrap + width:100% en la tarjeta
     (fuerza el salto de línea) + order para bajarlas — solo visual, sin
     mover nodos ni tocar el orden de tabulación. */
  .flashcard-arena { flex-wrap: wrap; gap: 12px; }
  .flashcard { width: 100%; order: 1; }
  .fc-prev { order: 2; }
  .fc-next { order: 3; }
  .achievements-summary { padding: 16px; gap: 16px; }
  /* Glosario: de fila de 3 columnas (min-widths fijos que desbordaban 320-414px)
     a apilado — término + chip de capítulo arriba, definición a ancho completo.
     El DOM renderiza término → definición → chip (renderGlossary, vigilado por
     N11 — no se toca): `order` recoloca el chip solo visualmente junto al
     término; los nodos no son interactivos, el orden de lectura AT no cambia. */
  .glossary-item { flex-direction: column; gap: 6px; }
  .glossary-term { min-width: 0; order: 1; }
  .glossary-chapter { min-width: 0; white-space: normal; align-self: flex-start; order: 2; }
  .glossary-def { order: 3; }
  /* Fusionado del antiguo @media (max-width: 500px). Con prefijo #avatar-modal
     a propósito: la regla base .avatar-grid { 1fr 1fr } vive DESPUÉS de este
     tier en el fichero (sección del modal, ~1812) y a igual especificidad
     ganaba la cascada — el viejo bloque de 500px funcionaba solo porque
     estaba tras esa sección. El id decide por especificidad, no por orden. */
  #avatar-modal .avatar-grid { grid-template-columns: 1fr; }
  /* Celebración (2026-07-25): prefijo #celebration-modal por especificidad —
     este tier va ANTES de la sección base en el archivo (misma lección que
     #avatar-modal .avatar-grid). */
  #celebration-modal .celebration-card { padding: 24px 16px; }
  #celebration-modal .celebr-step { width: 32px; height: 32px; font-size: 0.8rem; }
  #celebration-modal .celebr-link { flex-basis: 6px; }
}

/* ===== UTILITY ===== */
.text-primary { color: var(--primary); }
.text-success { color: var(--success-text); }
.text-danger { color: var(--danger-text); }
.text-warning { color: var(--warning-text); }

/* I8 (ronda 2): iconos del sprite. 1em → heredan tamaño del font-size del
   contenedor (los wrappers .nav-icon/.stat-icon/etc. conservan los suyos) y
   currentColor → heredan el color del texto en ambos temas. */
.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.empty-state { text-align: center; padding: 40px; color: var(--text2); }
.empty-state-icon { font-size: 3rem; margin-bottom: 12px; }

/* ===================================================
   LANDING PÚBLICA + AUTH (rediseño 2026-07-25, opción 1B)
   Dark-only: tokens --lp-* fijos, independientes de data-theme.
   Fluida sin media queries (clamp/flex-wrap/auto-fit) de 320 a 1920px.
   =================================================== */

/* Scroll suave de los CTAs a #acceso. El blunt block de reduced-motion (más
   abajo) ya fuerza scroll-behavior: auto !important, así que ese caso queda
   cubierto ahí; este guard es la vía CSS-first para el resto (no-preference). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

#auth-screen {
  --lp-bg: #0B0B12;
  --lp-bg-alt: #0D0D15;
  --lp-surface: #15151F;
  --lp-surface-2: #1C1C2A;
  --lp-border: #262636;
  --lp-border-strong: #2A2A3D;
  --lp-border-subtle: #232333;
  --lp-border-section: #1E1E2C;
  --lp-accent: #6C4EF6;
  --lp-accent-hover: #7F66FF;
  --lp-accent-brand: #7C5CFC;
  --lp-accent-soft: rgba(108,78,246,.12);
  --lp-accent-soft-2: rgba(108,78,246,.16);
  --lp-accent-text: #B3A2FF;
  --lp-text: #E9E9F2;
  --lp-text-2: #C7C7DB;
  --lp-text-muted: #9A9AB4;
  --lp-text-dim: #8E8EA8;
  --lp-text-faint: #8B8BA6;
  --lp-link: #9F8BFF;
  --lp-link-hover: #BFB0FF;
  --lp-pad-x: clamp(16px, 4vw, 56px);
  width: 100%;
  min-height: 100vh;  /* fallback */
  min-height: 100dvh;
  background: var(--lp-bg);
  color: var(--lp-text);
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---- Header ---- */
.lp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px var(--lp-pad-x);
}
.lp-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--lp-text);
}
.lp-brand-icon { display: flex; }
.lp-brand-icon .icon {
  width: 24px;
  height: 24px;
  stroke-width: 1.8;
}
.lp-wordmark {
  font-family: 'Space Grotesk', 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--lp-accent-brand);
}
.lp-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lp-signin-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  color: var(--lp-link);
  text-decoration: none;
  transition: color 150ms ease;
}
.lp-signin-link:hover { color: var(--lp-link-hover); }
.lp-lang {
  display: flex;
  background: var(--lp-surface);
  border: 1px solid var(--lp-border);
  border-radius: 8px;
  padding: 3px;
}
/* .lang-btn es clase compartida con el topbar de la app — overrides scoped */
#auth-screen .lang-btn {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 6px;
  color: var(--lp-text-muted);
}
#auth-screen .lang-btn.active {
  background: var(--lp-accent);
  color: #fff;
}

/* ---- Hero ---- */
.lp-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  padding: clamp(36px, 6vw, 90px) clamp(16px, 6vw, 80px) clamp(30px, 4vw, 56px);
  background: radial-gradient(120% 90% at 50% -10%, rgba(108,78,246,.18) 0%, rgba(11,11,18,0) 60%);
}
.lp-badge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--lp-accent-text);
  background: var(--lp-accent-soft);
  border: 1px solid rgba(124,92,252,.32);
  padding: 7px 14px;
  border-radius: 999px;
}
.lp-h1 {
  font-family: 'Space Grotesk', 'Manrope', sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 8vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 22ch;
  text-wrap: balance;
  margin: 0;
}
.lp-lede {
  font-size: clamp(15px, 1.7vw, 19px);
  line-height: 1.6;
  color: var(--lp-text-muted);
  max-width: 52ch;
  margin: 0;
}

/* ---- Tarjeta de acceso (mismas clases que usa auth.js) ---- */
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--lp-surface);
  border: 1px solid var(--lp-border);
  border-radius: 18px;
  padding: clamp(18px, 3vw, 26px);
  text-align: left;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-tabs {
  display: flex;
  background: var(--lp-surface-2);
  border-radius: 11px;
  padding: 4px;
  gap: 4px;
}
.auth-tab {
  flex: 1;
  min-height: 44px;
  padding: 10px;
  border: none;
  background: transparent;
  color: var(--lp-text-muted);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.auth-tab.active {
  background: var(--lp-accent);
  color: #fff;
}

.auth-message {
  padding: 12px 14px;
  border-radius: 11px;
  font-size: 0.85rem;
  font-weight: 500;
}
.auth-message--error {
  background: rgba(244,67,54,0.12);
  color: #EF9A9A;
  border: 1px solid rgba(244,67,54,0.25);
}
.auth-message--success {
  background: rgba(76,175,80,0.12);
  color: #81C784;
  border: 1px solid rgba(76,175,80,0.25);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-field input {
  padding: 13px 14px;
  background: var(--lp-surface-2);
  border: 1px solid var(--lp-border-strong);
  border-radius: 11px;
  color: var(--lp-text);
  font-size: 1rem; /* 16px — N13/iOS, desviación deliberada de los 14px del handoff */
  font-family: inherit;
  transition: border-color 150ms ease;
  outline: none;
}
.auth-field input::placeholder { color: var(--lp-text-faint); }
.auth-field input:focus { border-color: var(--lp-accent); }

.auth-btn-primary {
  min-height: 44px;
  padding: 14px;
  background: var(--lp-accent);
  color: #fff;
  border: none;
  border-radius: 11px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 150ms ease, opacity 150ms ease;
}
.auth-btn-primary:hover:not(:disabled) { background: var(--lp-accent-hover); }
.auth-btn-primary:disabled,
.auth-btn-primary.loading {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--lp-text-dim);
  font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--lp-border);
}

.auth-btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px;
  background: var(--lp-surface-2);
  border: 1px solid var(--lp-border-strong);
  border-radius: 11px;
  color: var(--lp-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.auth-btn-google:hover:not(:disabled) {
  border-color: var(--lp-accent);
  background: var(--lp-surface);
}
.auth-btn-google:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.lp-auth-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.auth-forgot {
  font-size: 12px;
  color: var(--lp-link);
  text-decoration: none;
  transition: color 150ms ease;
}
.auth-forgot:hover { color: var(--lp-link-hover); }
.auth-privacy-link {
  margin-left: auto;
  font-size: 12px;
  color: var(--lp-text-dim);
  text-decoration: none;
  transition: color 150ms ease;
}
.auth-privacy-link:hover { color: var(--lp-link-hover); }

/* ---- Banda "por qué certificarse" ---- */
.lp-why {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  background: var(--lp-bg-alt);
  border-top: 1px solid var(--lp-border-section);
  border-bottom: 1px solid var(--lp-border-section);
  padding: clamp(30px, 4vw, 56px) var(--lp-pad-x);
}
.lp-why h3 {
  font-family: 'Space Grotesk', 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 8px;
}
.lp-why p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--lp-text-muted);
  margin: 0;
}

/* ---- Roadmap del syllabus ---- */
.lp-roadmap {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(40px, 5vw, 80px) var(--lp-pad-x);
}
.lp-roadmap-intro { flex: 1 1 260px; }
.lp-h2 {
  font-family: 'Space Grotesk', 'Manrope', sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 3.6vw, 38px);
  letter-spacing: -0.025em;
  margin: 0 0 12px;
}
.lp-roadmap-intro > p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--lp-text-muted);
  margin: 0 0 20px;
}
.lp-included {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--lp-surface);
  border: 1px solid var(--lp-border-subtle);
  border-radius: 16px;
  padding: 20px;
}
.lp-included-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--lp-text-dim);
}
.lp-included span:not(.lp-included-label) {
  font-size: 14px;
  color: var(--lp-text-2);
}
.lp-timeline {
  flex: 1 1 340px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.lp-step {
  display: flex;
  gap: 16px;
}
.lp-step-rail {
  flex: 0 0 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lp-step-num {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 14px;
  background: var(--lp-accent-soft-2);
  color: var(--lp-accent-text);
}
.lp-step:first-child .lp-step-num {
  background: var(--lp-accent);
  color: #fff;
}
.lp-step-line {
  flex: 1;
  width: 2px;
  background: var(--lp-border);
}
.lp-step-body { padding-bottom: 22px; }
.lp-step:last-child .lp-step-body { padding-bottom: 0; }
.lp-step-body h3 {
  font-family: 'Space Grotesk', 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 17px;
  margin: 6px 0;
}
.lp-step-body p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--lp-text-muted);
  margin: 0;
}

/* ---- CTA final + footer ---- */
.lp-cta {
  background: var(--lp-bg-alt);
  border-top: 1px solid var(--lp-border-section);
  text-align: center;
  padding: clamp(36px, 5vw, 72px) var(--lp-pad-x);
}
.lp-cta p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--lp-text-muted);
  max-width: 44ch;
  margin: 12px auto 24px;
}
.lp-cta-btn {
  display: inline-block;
  min-height: 44px;
  background: var(--lp-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 12px;
  text-decoration: none;
  transition: background-color 150ms ease;
}
.lp-cta-btn:hover { background: var(--lp-accent-hover); }
.lp-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding: 22px var(--lp-pad-x);
  border-top: 1px solid var(--lp-border-section);
  font-size: 12px;
  color: var(--lp-text-faint);
}
.lp-footer a {
  color: var(--lp-text-faint);
  text-decoration: none;
  transition: color 150ms ease;
}
.lp-footer a:hover { color: var(--lp-link-hover); }

/* ===== APP CONTAINER ===== */
#app-container {
  flex: 1;
  width: 100%;
  min-height: 100vh;  /* fallback */
  min-height: 100dvh;
}

/* ===================================================
   AVATAR SELECTOR MODAL
   =================================================== */

#avatar-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 5000;
  padding: 16px;
}

.avatar-modal-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 28px 24px;
  width: 100%;
  max-width: 660px;
  max-height: 88vh;  /* fallback */
  max-height: 88dvh;
  overflow-y: auto;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.avatar-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.avatar-modal-header h2 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
}
.avatar-modal-close {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.avatar-modal-close:hover { background: var(--bg4); }

.avatar-modal-sub {
  font-size: 0.83rem;
  color: var(--text2);
  margin-top: -8px;
}

.avatar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.av-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg3);
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.av-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--av-color, var(--primary));
  opacity: 0;
  transition: opacity var(--transition);
}
.av-card:hover { border-color: var(--av-color, var(--primary)); }
.av-card:hover::before { opacity: 0.05; }
.av-card.selected {
  border-color: var(--av-color, var(--primary));
  background: var(--bg4);
}
.av-card.selected::before { opacity: 0.08; }

.av-emoji {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
}

.av-info {
  flex: 1;
  min-width: 0;
  position: relative;
}

.av-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.av-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--av-color, var(--primary));
  background: color-mix(in srgb, var(--av-color, var(--primary)) 15%, transparent);
  padding: 2px 8px;
  border-radius: 20px;
  margin-bottom: 6px;
}

.av-desc {
  font-size: 0.76rem;
  color: var(--text2);
  line-height: 1.5;
}

.av-check {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--av-color, var(--primary));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition);
}
.av-card.selected .av-check { opacity: 1; }

.avatar-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

.avatar-btn-cancel {
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text2);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: all var(--transition);
}
.avatar-btn-cancel:hover { border-color: var(--text2); color: var(--text); }

.avatar-btn-save {
  padding: 10px 22px;
  background: var(--primary);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  transition: background var(--transition);
}
.avatar-btn-save:hover { background: var(--primary-dark); }

/* ===== CELEBRATION MODAL (2026-07-25) =====
   Card «Camino de módulos» + diploma de campus. Patrón #avatar-modal (scrim
   fixed, z-index 5000). CTA con --primary-dark (blanco sobre --primary falla
   AA — regla .bmc-fab/.lesson-next-btn). El dorado del diploma es SOLO
   decorativo (bordes, sello, halo) — nunca color de texto (regla N12); los
   textos de estado usan tokens --*-text. */
#celebration-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 5000;
  padding: 16px;
  overflow: hidden;
}
.celebration-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  width: 100%;
  max-width: 420px;
  max-height: 88vh;  /* fallback */
  max-height: 88dvh;
  overflow-y: auto;
  box-shadow: var(--shadow);
  text-align: center;
  position: relative;
}
.celebration-card h2 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  margin: 4px 0;
}
.celebration-card.diploma {
  max-width: 520px;
  border: 2px solid rgba(255,193,7,0.55);
  outline: 1px solid rgba(255,193,7,0.25);
  outline-offset: 5px;
}

/* --- card de módulo --- */
.celebr-badge {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--secondary-text);
  border: 1px solid rgba(0,210,255,0.4);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 10px;
}
.celebr-sub { color: var(--text2); font-size: 0.9rem; }
.celebr-path {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 18px 0 8px;
}
.celebr-step {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  border: 1px solid var(--border);
  color: var(--text2);
  flex-shrink: 0;
}
.celebr-step.done {
  background: var(--primary-dark);
  color: #fff;
  border: none;
  box-shadow: 0 0 14px rgba(108,99,255,0.6);
}
.celebr-step.next { border: 2px dashed var(--secondary); color: var(--secondary-text); }
.celebr-link { flex: 0 0 10px; height: 2px; background: var(--surface2); }
.celebr-quote {
  color: var(--primary-text);
  font-size: 0.95rem;
  font-style: italic;
  margin: 14px 0 18px;
  line-height: 1.5;
}
.celebr-cta {
  background: var(--primary-dark);
  color: #fff;
  border: none;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  font-family: var(--font);
}
.celebr-cta:hover { filter: brightness(1.1); }
.celebr-ghost {
  display: block;
  margin: 12px auto 0;
  background: none;
  border: none;
  color: var(--text3);
  font-size: 0.85rem;
  cursor: pointer;
  font-family: var(--font);
}
.celebr-ghost:hover { text-decoration: underline; color: var(--text2); }

/* --- diploma --- */
.celebr-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--warning-text);
  margin-bottom: 8px;
}
.celebr-medal {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1rem;
  background: radial-gradient(circle at 35% 30%, rgba(255,213,79,0.35), rgba(255,193,7,0.12));
  box-shadow: 0 0 26px rgba(255,193,7,0.45);
}
.celebr-name { font-size: 1.25rem; color: var(--primary-text); font-weight: 600; margin: 12px 0 2px; }
.celebr-name-rule { width: 180px; height: 1px; background: var(--border); margin: 6px auto 12px; }
.celebr-body { color: var(--text2); font-size: 0.9rem; line-height: 1.55; margin-bottom: 14px; }
.celebr-chips {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.celebr-chip {
  font-size: 0.72rem;
  color: var(--success-text);
  background: rgba(76,175,80,0.12);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.celebr-date { font-size: 0.78rem; color: var(--text3); margin-bottom: 16px; }
.celebr-seal {
  position: absolute;
  bottom: 16px;
  right: 18px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFD54F, #B8860B);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1A1A2E;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* --- confetti (solo lo genera JS en el diploma; bajo reduced-motion no se
       genera NINGUNA pieza — guard matchMedia en _spawnConfetti — y además el
       blunt block global anularía la animación) --- */
.celebr-confetti-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.celebr-confetti {
  position: absolute;
  top: -20px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  animation: celebrFall 3s linear forwards;
}
@keyframes celebrFall {
  to { transform: translateY(110vh) rotate(540deg); }
}

/* ===== NAME EDIT ===== */
.name-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text2); /* el SVG .icon usa currentColor — sin esto hereda el negro UA (invisible en tema oscuro) */
  font-size: 0.65rem;
  opacity: 0;
  padding: 0;
  margin-left: 8px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  position: relative;
  top: -1px;
  transition: opacity var(--transition);
}
.user-card:hover .name-edit-btn { opacity: 0.7; }
.name-edit-btn:hover { opacity: 1 !important; }
/* I3 (ronda 2): el botón deja de ser un tab stop invisible — visible cuando
   el foco de teclado está en él o dentro del user-card. */
.user-card:focus-within .name-edit-btn,
.name-edit-btn:focus-visible { opacity: 0.7; }

.name-edit-input {
  background: var(--bg4);
  border: 1px solid var(--primary);
  border-radius: 4px;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font);
  padding: 2px 6px;
  width: 130px;
  outline: none;
}

/* ===================================================
   ONBOARDING TOUR
   =================================================== */

#onboarding-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 10000;
  cursor: pointer;
}

#onboarding-highlight {
  display: none;
  position: fixed;
  z-index: 10001;
  border-radius: 10px;
  border: 2px solid var(--primary);
  box-shadow: 0 0 0 5px rgba(108,99,255,0.25), 0 0 30px rgba(108,99,255,0.4);
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
  animation: ob-pulse 2s ease-in-out infinite;
}

@keyframes ob-pulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(108,99,255,0.25), 0 0 20px rgba(108,99,255,0.3); }
  50%       { box-shadow: 0 0 0 8px rgba(108,99,255,0.15), 0 0 40px rgba(108,99,255,0.5); }
}

#onboarding-tooltip {
  display: none;
  position: fixed;
  z-index: 10002;
  background: var(--bg2);
  border: 1px solid rgba(108,99,255,0.35);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(108,99,255,0.1);
  transition: top 0.35s cubic-bezier(0.4,0,0.2,1), left 0.35s cubic-bezier(0.4,0,0.2,1);
}

.ob-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ob-step-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  min-height: 16px;
}

.ob-skip {
  background: none;
  border: none;
  color: var(--text3);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0;
  font-family: var(--font);
  transition: color var(--transition);
}
.ob-skip:hover { color: var(--text2); }

.ob-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.3;
}

.ob-text {
  font-size: 0.85rem;
  color: var(--text2);
  line-height: 1.55;
  margin-bottom: 18px;
}

.ob-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ob-dots {
  display: flex;
  gap: 5px;
  align-items: center;
}

.ob-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bg4);
  transition: all var(--transition);
}
.ob-dot.active {
  background: var(--primary);
  width: 18px;
  border-radius: 3px;
}

.ob-btn-next {
  padding: 9px 18px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  transition: background var(--transition);
  white-space: nowrap;
}
.ob-btn-next:hover { background: var(--primary-dark); }

/* ===== LOGOUT BUTTON ===== */
.logout-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text2);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  width: 100%;
  margin-top: 8px;
  font-family: var(--font);
}
.logout-btn:hover {
  background: rgba(244,67,54,0.1);
  border-color: var(--danger);
  color: var(--danger-text);
}
.logout-icon { font-size: 1rem; }
.sidebar.collapsed .logout-label { display: none; }

/* ===================================================
   FLASHCARD TTS BUTTON
   =================================================== */
.fc-tts-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  padding: 0;
  line-height: 1;
  z-index: 2;
}
.fc-tts-btn:hover {
  background: var(--primary-dark);
  transform: scale(1.1);
}
.fc-tts-btn.fc-tts-playing {
  background: var(--success);
  animation: fc-tts-pulse 1.5s ease-in-out infinite;
}
@keyframes fc-tts-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76,175,80,0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(76,175,80,0); }
}

/* ===== PRIVACY POLICY LINKS ===== */
.sidebar-privacy-link {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-size: 0.68rem;
  color: var(--text3);
  text-decoration: none;
  transition: color var(--transition);
}
.sidebar-privacy-link:hover { color: var(--primary); }
.sidebar.collapsed .sidebar-privacy-link { display: none; }

/* ===== OBJETIVOS TÁCTILES (I3, revisión UI 2026-07-14, ronda 2) =====
   El requisito de 44×44px aplica a punteros imprecisos: con pointer: coarse
   los targets crecen físicamente (expandir el hit-area invisible solaparía
   los vecinos: ES/EN estaban a 2px, los dots a 6px). En desktop con ratón
   el visual no cambia. Este bloque va ANTES del de reduced-motion a propósito
   — reduced-motion y :focus-visible deben seguir siendo los dos últimos. */
@media (pointer: coarse) {
  .lang-switcher { gap: 8px; }
  .lang-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 4px 10px;
  }
  .exam-question-dots { gap: 8px; }
  .exam-dot {
    width: 44px;
    height: 44px;
    font-size: 0.8rem;
  }
  /* Sin hover en táctil el botón era invisible e inalcanzable. No se agranda
     a 44px (rompería el layout inline del user-card): se amplía su hit-area
     con padding+margen negativo (aquí sí es seguro: no tiene controles
     adyacentes que solapar). margin-left compensado a -9px (no -17px): el
     margin shorthand machacaba el margin-left base y dejaba el lápiz pegado
     al nombre en táctil — -9 + 17 de padding = 8px de hueco visual, igual
     que en desktop. */
  .name-edit-btn {
    opacity: 0.7;
    padding: 17px;
    margin: -17px;
    margin-left: -9px;
  }
  /* Botones de la lección (hallazgo revisión final, 2026-07-21): a
     font-size 0.9rem + padding 12px 28px, .lesson-next-btn medía ~41px de
     alto — bajo el suelo de 44px. Se incluye también .lesson-complete-btn,
     con quien queda en fila: deben mantenerse dimensionalmente consistentes. */
  .lesson-complete-btn, .lesson-next-btn { min-height: 44px; }
}

/* ===== BOTÓN DE APOYO (Buy Me a Coffee, 2026-07-15) =====
   Pill flotante abajo-derecha. Fondo --primary-dark (no --primary): blanco
   sobre #6C63FF es 4.32:1 (falla AA), sobre #5a52d5 es 5.83:1 (pasa). color:#fff
   explícito porque el SVG del icono usa currentColor. z-index bajo los toasts
   (1000). Se oculta en examen vía body.exam-active. Hover solo mueve/sombrea
   (no aclara el fondo, que bajaría el contraste); reduced-motion lo colapsa. */
.bmc-fab {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  right: calc(24px + env(safe-area-inset-right, 0px));
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  background: var(--primary-dark);
  color: #fff;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bmc-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.bmc-fab .icon { width: 1.15em; height: 1.15em; }
body.exam-active .bmc-fab { display: none; }

/* ===== FAB DE APOYO EN MÓVIL/TABLET (hallazgo revisión final, 2026-07-21) =====
   Este override VIVÍA dentro del tier 768 (arriba en el fichero), varias
   líneas ANTES de la regla base .bmc-fab. Los media queries no aportan
   especificidad — ambas reglas quedan en (0,1,0) — así que gana el orden de
   aparición en el fichero, y la base (más tardía) machacaba silenciosamente
   este padding/border-radius: el círculo de 48px solo parecía funcionar
   porque 999px de border-radius también clampa a círculo a 48×48. El check
   N21 solo comprobaba que el texto de la declaración existiera, así que daba
   verde sobre CSS muerto. Fix: este bloque va DESPUÉS de la base .bmc-fab (y
   antes del de reduced-motion, que junto con :focus-visible debe seguir
   siendo el tail del fichero) para que su orden de aparición gane de verdad.
   El pill solapaba los botones de la lección en móvil (reportado sobre
   dispositivo real, 2026-07-21): en teléfono/tablet se reduce a un círculo
   de 48px solo-icono. 48px ≥ 44px (I3). El nombre accesible lo aporta el
   data-i18n-aria del <a>, porque al ocultar el span el enlace se quedaría
   sin texto. Selector descendente y no una clase en el span: el check N19
   exige literalmente <span data-i18n="bmc_label">. */
@media (max-width: 768px) {
  .bmc-fab { padding: 0; width: 48px; height: 48px; border-radius: 50%; justify-content: center; }
  .bmc-fab span { display: none; }
}

/* ===== MOVIMIENTO REDUCIDO (I2, revisión UI 2026-07-14) =====
   Bloque global estándar: con prefers-reduced-motion activo, toda animación y
   transición (actuales y futuras) colapsa a efectivamente-instantánea. El
   !important gana también a los estilos inline del carrusel de flashcards.
   El estado de peligro del timer sigue distinguible sin su pulso (color +
   fondo tintado). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    /* Delays incluidos para que el bloque cubra también animaciones futuras
       escritas con retardo (hoy no existe ninguno en el fichero). */
    animation-delay: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* ===== FOCO VISIBLE (C1, revisión UI 2026-07-14) =====
   Al final del fichero a propósito: varias reglas de inputs declaran
   outline: none con la misma especificidad (0-1-0) — al ir después, esta
   regla gana la propiedad outline cuando el foco viene de teclado. */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}