/* ============================================================
   Mirzakhani — DASHBOARD STYLES
   ============================================================ */

/* ── Dashboard Root Layout ── */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
}

.dashboard-layout {
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg-warm);
  position: relative;
  max-width: 100vw;
}

/* ── Sidebar ── */
.sidebar {
  width: var(--sidebar-width);
  height: calc(100vh - 54px);
  height: calc(100dvh - 54px);
  background: white;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0; top: 54px;
  z-index: 100;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 2px 0 20px rgba(156,54,16,0.06);
  overflow: hidden;
}

/* Sidebar top accent */
.sidebar::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark), var(--primary-deeper));
  flex-shrink: 0;
}

/* ── Sidebar Header ── */
.sidebar-header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.sidebar-logo-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: white;
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(156,54,16,0.35);
  overflow: hidden;
}
.sidebar-logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sidebar-logo-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sidebar-logo-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}
.sidebar-logo-name span { color: var(--primary); }
.sidebar-logo-sub {
  font-size: 0.62rem;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* ── User Profile in Sidebar ── */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-warm);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.sidebar-avatar {
  width: 40px; height: 40px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--primary);
  flex-shrink: 0;
  font-weight: 700;
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.sidebar-user-role {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 500;
}
.sidebar-user-badge {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.6rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

/* ── Sidebar Navigation ── */
.sidebar-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
}

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

/* ── Sidebar Footer ── */
.sidebar-footer {
  padding: 12px 14px 16px 14px;
  border-top: 1px solid var(--border);
  background: white;
  flex-shrink: 0;
  margin-top: auto;
  z-index: 10;
}
.nav-section-label:first-child { margin-top: 0; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  margin-bottom: 2px;
  position: relative;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  user-select: none;
}
.nav-item:hover {
  background: var(--bg-warm);
  color: var(--primary);
}
.nav-item.active {
  background: linear-gradient(135deg, rgba(156,54,16,0.1), rgba(0,0,0,0.04));
  color: var(--primary);
  font-weight: 600;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 25%; bottom: 25%;
  width: 3px;
  background: linear-gradient(180deg, var(--primary), var(--primary-dark));
  border-radius: 0 3px 3px 0;
}
.nav-item-icon {
  font-size: 1.05rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-item-text { flex: 1; }
.nav-item-badge {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-full);
}

/* ── Sidebar Footer ── */
.sidebar-footer {
  padding: 16px 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-dev-info {
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  text-align: center;
  margin-bottom: 10px;
}
.sidebar-dev-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.sidebar-dev-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-secondary);
}
.sidebar-dev-email {
  font-size: 0.68rem;
  color: var(--primary);
  word-break: break-all;
  margin-top: 2px;
}
.sidebar-dev-copy {
  font-size: 0.62rem;
  color: var(--text-muted);
  margin-top: 3px;
}

.btn-logout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  background: rgba(231,76,60,0.06);
  border: 1.5px solid rgba(231,76,60,0.15);
  color: #C0392B;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.btn-logout:hover {
  background: rgba(231,76,60,0.12);
  border-color: rgba(231,76,60,0.3);
  transform: translateX(2px);
}
.btn-logout .logout-icon { font-size: 1rem; }

/* ── Top Bar (Universal header with ☰ toggle button) ── */
.topbar {
  display: flex;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  background: white;
  border-bottom: 1px solid var(--border);
  z-index: 101;
  padding: 0 16px;
  align-items: center;
  gap: 14px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}

.topbar-menu-btn {
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  background: var(--bg-warm);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}
.topbar-menu-btn:hover {
  background: var(--border);
  color: var(--primary);
}

.topbar-brand-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar-brand-title span { color: var(--primary); }

.topbar-role-badge {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
}
.topbar-role-badge.admin-badge {
  background: rgba(156,54,16, 0.12);
  color: var(--primary);
  border: 1px solid rgba(156,54,16, 0.25);
}
.topbar-role-badge.student-badge {
  background: rgba(16, 185, 129, 0.12);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

/* ── Main Content & Sidebar Base ── */
.sidebar {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.main-content {
  flex: 1;
  height: calc(100vh - 56px);
  height: calc(100dvh - 56px);
  max-height: calc(100vh - 56px);
  max-height: calc(100dvh - 56px);
  display: flex;
  flex-direction: column;
  transition: margin-left 0.3s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.3s ease;
  overflow: hidden !important;
  max-width: 100%;
  box-sizing: border-box;
}

.content-area {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 14px 20px 10px 20px !important;
  display: flex;
  flex-direction: column;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box;
}

/* Modo examen/repaso: content-area llena el espacio y controla su propio scroll interno */
.content-area.exam-mode {
  flex: 1 !important;
  overflow: hidden !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.section-view {
  display: none;
  width: 100%;
  flex-direction: column;
  animation: fadeInUp 0.3s ease;
}
.section-view.active {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  /* flex:1 0 auto (no "flex:1", que usa flex-basis:0): la caja se mide
     primero por su contenido real (basis:auto) y solo crece para
     llenar espacio sobrante si el contenido es más corto que la
     pantalla (Horario, Repasos, etc). Con flex:1 puro, en secciones
     con contenido MÁS ALTO que una pantalla (ej. Calculadora con
     muchas materias), la caja se calculaba más chica que el contenido
     real, y como esta regla usa overflow:visible, el contenido
     sobrante se dibujaba fuera de la caja — haciendo que el footer
     (el siguiente elemento) apareciera montado en medio del contenido
     en vez de después de todo. flex-basis:auto elimina ese desborde:
     la caja ya nace del tamaño real del contenido. */
  flex: 1 0 auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* Cuando el examen o repaso está activo, la sección ocupa TODA la altura disponible */
.section-view.active.exam-active-section {
  flex: 1 !important;        /* crecer para llenar el espacio — no height:100% */
  min-height: 0 !important;
  height: auto !important;   /* dejar que flex:1 controle la altura */
  overflow: hidden !important;
  padding: 0 !important;
  background: white !important;
  display: flex !important;
  flex-direction: column !important;
}

/* FIX: Clases y Resúmenes internamente usan height:100% (#clasesContent,
   #studentResumenesBoard) para su propio scroll horizontal de columnas.
   Ese height:100% necesita un padre con altura YA definida (no "auto"),
   o algunos navegadores (confirmado en tablets Android/Chrome) lo
   interpretan mal y estiran las columnas sin límite hacia abajo.
   SOLUCIÓN FINAL: en vez de heredar altura por porcentajes (frágil),
   usamos una altura calculada con JS (variable --board-h abajo), que
   siempre es exacta sin importar el dispositivo. */
#section-clases.active,
#section-resumenes.active {
  display: flex !important;
  flex-direction: column !important;
  height: var(--board-h, calc(100dvh - 140px)) !important;
  max-height: var(--board-h, calc(100dvh - 140px)) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* ── Desktop & Mobile Responsive Sidebar ── */
@media (min-width: 769px) {
  .sidebar {
    position: fixed;
    top: 54px;
    left: 0;
    width: var(--sidebar-width, 240px);
    height: calc(100vh - 54px);
    height: calc(100dvh - 54px);
    z-index: 100;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), width 0.3s ease;
  }
  .sidebar.hidden-pc {
    transform: translateX(-100%);
  }
  .main-content {
    margin-top: 54px;
    margin-left: var(--sidebar-width, 240px);
    width: calc(100% - var(--sidebar-width, 240px));
    min-height: calc(100vh - 54px);
    min-height: calc(100dvh - 54px);
    display: flex;
    flex-direction: column;
    transition: margin-left 0.3s cubic-bezier(0.16, 1, 0.3, 1), width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .sidebar.hidden-pc ~ .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

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

/* ── Classes Section ── */
.courses-tabs-wrap {
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 24px;
}
.courses-tabs {
  display: flex;
  gap: 6px;
  min-width: max-content;
  padding: 5px;
  background: var(--bg-warm);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.course-tab {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  white-space: nowrap;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.course-tab:hover { background: rgba(156,54,16,0.06); color: var(--primary); }
.course-tab.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  box-shadow: 0 4px 12px rgba(156,54,16,0.3);
}

/* ── Exam Section ── */
.exam-setup-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 36px;
  border: 1px solid var(--border);
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}
.exam-setup-icon {
  font-size: 4rem;
  margin-bottom: 16px;
  display: block;
}
.exam-setup-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 8px; }
.exam-setup-desc { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 24px; line-height: 1.6; }

.exam-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.exam-info-item {
  background: var(--bg-warm);
  border-radius: var(--radius-sm);
  padding: 14px 10px;
  border: 1px solid var(--border);
}
.exam-info-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}
.exam-info-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 4px;
  font-weight: 500;
}

/* ── Exam Active ── */
.exam-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  border-radius: var(--radius-md);
  padding: 16px 24px;
  border: 1px solid var(--border);
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.exam-timer-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(231,76,60,0.08), rgba(192,57,43,0.04));
  border: 1.5px solid rgba(231,76,60,0.2);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
}
.exam-timer-label { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); }
.exam-timer-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: #C0392B;
  font-variant-numeric: tabular-nums;
}
.exam-timer-value.warning { color: var(--danger); animation: pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

.exam-progress-info { font-size: 0.88rem; color: var(--text-muted); }
.exam-progress-info strong { color: var(--text-primary); font-size: 1rem; }

/* ═══════════════════════════════════════════════════════════════════
   EXAMEN SIMULACRO & REPASOS — LAYOUT FULL-HEIGHT PROFESIONAL
   Los botones de nav son estáticos abajo. La pregunta es la única que scrollea.
   ═══════════════════════════════════════════════════════════════════ */

/* Wrapper del examen/quiz ocupa TODA la altura disponible (flex:1 en lugar de height:100%) */
#examActive,
#quizActive,
#mqQuizActive {
  display: flex;
  flex-direction: column;
  width: 100% !important;
  flex: 1 !important;          /* hereda toda la altura del padre flex */
  height: auto !important;     /* dejar que flex:1 decida, no height:100% */
  min-height: 0 !important;
  overflow: hidden !important;
  background: white !important;
  box-sizing: border-box !important;
  padding: 14px 20px 0 20px !important;
}

/* Cabecera del examen (timer, contador) — altura fija */
.exam-header-bar {
  flex-shrink: 0;
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 10px 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  box-sizing: border-box;
}

/* Barra de progreso — altura fija */
.exam-progress-bar-wrap {
  flex-shrink: 0;
  margin-bottom: 8px;
}

/* Navegador de preguntas (puntos 1-60) — altura fija, scroll horizontal */
.question-navigator {
  flex-shrink: 0;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  margin-bottom: 10px;
  display: flex;
  gap: 4px;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

/* Contenedor de la tarjeta de pregunta — CRECE y scrollea */
.question-card-wrapper {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 1px;  /* pequeño padding para que la sombra se vea */
}

/* Tarjeta de la pregunta — altura automática según contenido */
.question-card {
  background: white;
  border-radius: 16px;
  padding: 18px 20px;
  border: 1px solid #E2E8F0;
  margin-bottom: 0;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);
}

/* Barra de botones Anterior / Siguiente — siempre al fondo, fija */
.exam-nav-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  padding-bottom: 0;
  border-top: 1px solid #F1F5F9;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  /* El desenfoque de fondo (backdrop-filter) es muy pesado para el
     procesador gráfico de muchos celulares y provoca parpadeo al
     deslizar dentro de un modal. En móvil usamos solo un fondo oscuro
     semitransparente, sin desenfoque — mucho más liviano. */
  .modal-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(15, 23, 42, 0.72) !important;
  }

  #examActive,
  #quizActive,
  #mqQuizActive {
    padding: 8px 12px 0 12px !important;
  }
  .exam-header-bar {
    padding: 8px 12px;
    margin-bottom: 6px;
  }
  .question-card {
    padding: 14px 14px;
    border-radius: 14px;
  }
  .exam-nav-bar {
    margin-top: 8px;
    padding-top: 8px;
  }
}
.question-number-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 14px;
}
.question-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.6;
  margin-bottom: 20px;
}
.question-options { display: flex; flex-direction: column; gap: 10px; }
.option-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: var(--bg-warm);
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
  font-size: 0.9rem;
  color: var(--text-primary);
  font-family: var(--font);
}
.option-btn:hover {
  border-color: var(--primary);
  background: rgba(156,54,16,0.04);
  transform: translateX(4px);
}
.option-btn.selected {
  border-color: var(--primary);
  background: rgba(156,54,16,0.08);
  color: var(--primary);
  font-weight: 600;
}
.option-btn.correct {
  border-color: var(--success);
  background: rgba(39,174,96,0.08);
  color: var(--success);
}
.option-btn.incorrect {
  border-color: var(--danger);
  background: rgba(231,76,60,0.08);
  color: var(--danger);
}
.option-letter {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: var(--transition);
}
.option-btn.selected .option-letter { background: var(--primary); color: white; }
.option-btn.correct .option-letter { background: var(--success); color: white; }
.option-btn.incorrect .option-letter { background: var(--danger); color: white; }

/* Exam nav */
.exam-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  gap: 12px;
}

/* Question navigator grid */
.question-navigator {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  background: white;
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid var(--border);
  margin-bottom: 20px;
}
.q-nav-dot {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: white;
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  color: var(--text-muted);
}
.q-nav-dot:hover { border-color: var(--primary); color: var(--primary); }
.q-nav-dot.answered { background: var(--primary); border-color: var(--primary); color: white; }
.q-nav-dot.current { background: var(--primary-dark); border-color: var(--primary-dark); color: white; box-shadow: 0 0 0 3px rgba(156,54,16,0.25); }

/* ── Exam Results ── */
.results-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 36px;
  border: 1px solid var(--border);
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}
.results-score-circle {
  width: 140px; height: 140px;
  border-radius: 50%;
  background: conic-gradient(var(--primary) calc(var(--score-pct) * 1%), var(--border) 0);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  position: relative;
}
.results-score-inner {
  width: 110px; height: 110px;
  border-radius: 50%;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.score-number { font-size: 2rem; font-weight: 800; color: var(--primary); line-height: 1; }
.score-total { font-size: 0.75rem; color: var(--text-muted); }

.results-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 24px 0;
}
.results-stat {
  background: var(--bg-warm);
  border-radius: var(--radius-sm);
  padding: 14px;
  border: 1px solid var(--border);
}
.results-stat-value {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
}
.results-stat-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Progress Section ── */
.progress-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.chart-card {
  background: white;
  border-radius: var(--radius-md);
  padding: 24px;
  border: 1px solid var(--border);
}
.chart-card-title { font-size: 0.9rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 16px; }

/* Mini bar chart */
.mini-bars { display: flex; flex-direction: column; gap: 10px; }
.mini-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mini-bar-label {
  width: 100px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 500;
  flex-shrink: 0;
  text-align: right;
}
.mini-bar-track {
  flex: 1;
  height: 8px;
  background: var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.mini-bar-fill {
  height: 100%;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
  transition: width 1s ease;
}
.mini-bar-val {
  width: 36px;
  font-size: 0.75rem;
  color: var(--primary);
  font-weight: 700;
  text-align: right;
  flex-shrink: 0;
}

/* Simulacro history table */
.history-empty {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.history-empty .empty-icon { font-size: 3rem; margin-bottom: 12px; display: block; }

/* ── Payment Section ── */
.membership-card {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 60%, var(--primary-deeper) 100%);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  color: white;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}
.membership-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
}
.membership-card::after {
  content: '';
  position: absolute;
  bottom: -60px; left: 20%;
  width: 150px; height: 150px;
  background: rgba(255,255,255,0.04);
  border-radius: 50%;
}
.membership-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(255,255,255,0.15);
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}
.membership-status.active { background: rgba(46,204,113,0.3); }
.membership-status.expired { background: rgba(231,76,60,0.4); }
.membership-title { font-size: 1.6rem; font-weight: 800; margin-bottom: 6px; position: relative; z-index: 1; }
.membership-dates { font-size: 0.88rem; color: rgba(255,255,255,0.8); margin-bottom: 16px; position: relative; z-index: 1; }
.membership-bar-wrap {
  position: relative; z-index: 1;
}
.membership-bar {
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,0.2);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: 6px;
}
.membership-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.8);
}
.membership-days-left {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.75);
}

/* ── Admin CRUD Styles ── */
.admin-actions-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.search-input-wrap {
  flex: 1;
  min-width: 200px;
  position: relative;
}
.search-input-wrap .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.9rem;
}
.search-input {
  padding: 10px 12px 10px 36px;
  background: white;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  width: 100%;
  transition: var(--transition);
  font-family: var(--font);
}
.search-input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 4px rgba(156,54,16,0.08); }

/* ── Admin Stats Row ── */
.admin-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

/* ── Sidebar overlay (mobile) ── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 99;
  backdrop-filter: blur(2px);
}

/* ── Footer ── */
.main-footer {
  padding: 10px 20px;
  min-height: 38px;
  height: auto;
  border-top: 1px solid var(--border);
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.74rem;
  color: var(--text-muted);
  flex-shrink: 0;
  box-sizing: border-box;
  /* FIX: el footer vive dentro de .content-area (que es el contenedor
     con scroll, overflow-y:auto). En vez de calcular su posición con
     vh/dvh o flex (frágil en ciertas tablets, como ya demostró el
     sistema --board-h de Clases/Resúmenes), lo anclamos con
     position:sticky — un mecanismo nativo del navegador basado en el
     scroll real, no en matemáticas de viewport. Así queda siempre
     visible pegado abajo, tenga la sección poco contenido (Horario) o
     mucho (Clases/Resúmenes con su altura calculada por JS). */
  position: sticky;
  bottom: 0;
  z-index: 5;
}

.footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-links a {
  color: var(--text-muted);
  transition: var(--transition);
  font-weight: 500;
}
.footer-links a:hover { color: var(--primary); }
.footer-brand { color: var(--primary); font-weight: 700; }

/* ── Collapsible Sidebar Styles ── */
.sidebar {
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.main-content {
  transition: margin-left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-toggle-btn {
  background: var(--bg-warm);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: auto;
  flex-shrink: 0;
}
.sidebar-toggle-btn:hover {
  background: white;
  color: var(--primary);
  border-color: var(--primary);
}

/* Collapsed State */
.sidebar.collapsed {
  width: 76px;
}
.sidebar.collapsed ~ .main-content,
.dashboard-layout .sidebar.collapsed ~ .main-content {
  margin-left: 76px;
}

.sidebar.collapsed .sidebar-logo-text,
.sidebar.collapsed .sidebar-user-info,
.sidebar.collapsed .sidebar-user-badge,
.sidebar.collapsed .nav-item-text,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .sidebar-dev-info,
.sidebar.collapsed .btn-logout span:first-child {
  display: none !important;
}

.sidebar.collapsed .sidebar-header {
  padding: 16px 10px;
}
.sidebar.collapsed .sidebar-logo {
  justify-content: center;
  margin-bottom: 12px;
  gap: 0;
}
.sidebar.collapsed .sidebar-user {
  justify-content: center;
  padding: 8px 0;
}
.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 12px 0;
}
/* ── Padlet Board Multi-Column Independent Vertical Scroll System ── */
#adminClasesBoard,
#adminResumenesBoard,
#studentClasesBoard,
#studentResumenesBoard,
#clasesContent {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
}

.padlet-board-container {
  display: flex !important;
  flex-direction: row !important;
  gap: 16px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  flex: 1 !important;
  min-height: 0 !important;
  height: 100% !important;
  align-items: stretch !important;
  padding: 4px 2px 4px 2px !important;
  box-sizing: border-box !important;
}

.padlet-column {
  flex: 0 0 320px !important;
  min-width: 290px !important;
  max-width: 340px !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: #F8FAFC !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.03) !important;
  overflow: hidden !important;
}

.padlet-column-header {
  flex-shrink: 0 !important;
  padding: 14px 16px !important;
  background: white !important;
  border-bottom: 1px solid var(--border) !important;
}

.padlet-column-body {
  flex: 1 !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.padlet-column-body::-webkit-scrollbar {
  width: 6px !important;
}
.padlet-column-body::-webkit-scrollbar-track {
  background: transparent !important;
}
.padlet-column-body::-webkit-scrollbar-thumb {
  background: #CBD5E1 !important;
  border-radius: 6px !important;
}
.padlet-column-body::-webkit-scrollbar-thumb:hover {
  background: var(--primary) !important;
}

.padlet-column-add-btn {
  flex-shrink: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
}

/* ── Banco de Preguntas Base Styles (Desktop & Laptop) ── */
#pregCursosTabs {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 4px 2px 8px 2px !important;
  margin-top: 2px !important;
  margin-bottom: 10px !important;
  width: 100% !important;
  min-height: 44px !important;
  align-items: center !important;
  scrollbar-width: thin !important;
}
#pregCursosTabs::-webkit-scrollbar {
  height: 4px;
}
#pregCursosTabs::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
#pregCursosTabs .tipo-btn {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  padding: 6px 14px !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  border-radius: 20px !important;
  height: 34px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
}

.admin-actions-bar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
  flex-wrap: nowrap !important;
}
.admin-actions-bar .search-input-wrap {
  flex: 1 !important;
  min-width: 180px !important;
  margin-bottom: 0 !important;
}
.admin-actions-bar .search-input {
  height: 38px !important;
  border-radius: 10px !important;
  font-size: 0.82rem !important;
}
.admin-actions-bar .custom-cycle-select {
  flex: 0 0 auto !important;
  height: 38px !important;
  min-height: 38px !important;
  font-size: 0.82rem !important;
  border-radius: 10px !important;
}
#filterPregTema {
  width: 175px !important;
}
#filterPregModalidad {
  width: 165px !important;
}
#filterPregAño {
  width: 135px !important;
}

/* (Se quitó el override de overflow:visible para Preguntas/Usuarios/Avance:
   ahora usan el mismo scroll contenido y pie de página fijo que el resto
   de secciones, igual en escritorio y en celular) */

.kpi-ribbon {
  background: white !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 14px !important;
  padding: 14px 20px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
}

#adminPreguntasBoard {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding-bottom: 6px !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
}

/* ── Responsive Dashboard & Board System ── */
@media (max-width: 768px) {
  .sidebar {
    top: 54px !important;
    height: calc(100vh - 54px) !important;
    height: calc(100dvh - 54px) !important;
    transform: translateX(-100%);
    width: 260px !important;
    z-index: 1000 !important;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-xl);
  }
  .sidebar-overlay {
    top: 54px !important;
    z-index: 999 !important;
  }
  .sidebar-overlay.visible { display: block; }

  .padlet-board-container {
    flex: 1 !important;
    min-height: 0 !important;
    height: auto !important;
    margin-top: 4px !important;
    gap: 12px !important;
    padding-bottom: 8px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-x: auto !important;
  }
  
  .topbar {
    display: flex !important;
    height: 54px !important;
    padding: 0 10px !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  .topbar-brand-title {
    font-size: 0.85rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 200px !important;
    line-height: 1.2 !important;
  }
  .topbar-user-name, .sidebar-user-name {
    max-width: 90px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.75rem !important;
  }

  .main-content {
    margin-top: 54px !important;
    padding-top: 0 !important;
    margin-left: 0 !important;
    height: calc(100vh - 54px) !important;
    height: calc(100dvh - 54px) !important;
    overflow: hidden !important;
  }
  .main-content:has(.content-area.exam-mode) {
    height: calc(100vh - 54px) !important;
    height: calc(100dvh - 54px) !important;
    overflow: hidden !important;
  }
  .content-area {
    padding: 10px 10px 6px 10px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .content-area.exam-mode {
    overflow-y: hidden !important;
  }
  .section-view {
    overflow-y: visible !important;
  }

  /* KPI Ribbon Mobile Grid */
  .kpi-ribbon {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    padding: 10px 8px !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
  }
  .kpi-pill {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 4px !important;
  }
  .kpi-content {
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
  }
  .kpi-val {
    font-size: 1.05rem !important;
  }
  .kpi-lbl {
    font-size: 0.60rem !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  .kpi-sep {
    display: none !important;
  }

  /* Horario & Preguntas Cards Container Mobile Scroll */
  #horarioListContainer,
  #adminPreguntasBoard {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Board Headers & Filters Mobile */
  .board-header {
    flex-direction: column !important;
    align-items: stretch !important;
    margin-top: 2px !important;
    padding: 14px 16px !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .board-header-info {
    width: 100% !important;
  }
  .board-header-info h2 {
    font-size: 1rem !important;
    line-height: 1.3 !important;
    flex-wrap: wrap !important;
  }
  .board-header > div:last-child {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  .board-header > .header-area-badge {
    width: fit-content !important;
    align-self: flex-start !important;
  }
  .board-header:has(#btnVolverAnagramaHeader) {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  .board-header:has(#btnVolverAnagramaHeader) .board-header-info {
    min-width: 0;
    flex: 1;
  }
  #btnVolverAnagramaHeader {
    width: fit-content !important;
    flex-shrink: 0 !important;
  }
  .board-header select,
  .board-header .form-select,
  .board-header .search-input-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .tipo-filter-wrap {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    margin-bottom: 0 !important;
  }
  .tipo-btn {
    flex: 1 !important;
    text-align: center !important;
    padding: 5px 6px !important;
    font-size: 0.76rem !important;
  }

  /* Horario Days Filter Mobile Horizontal Scroll */
  #horarioDaysFilter {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #horarioDaysFilter .tipo-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 6px 14px !important;
    font-size: 0.78rem !important;
  }
  #section-horario .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Padlet Board Horizontal Mobile Scroll & Columns */
  .padlet-board-container {
    flex: 1 !important;
    min-height: 0 !important;
    height: auto !important;
    gap: 10px !important;
    padding: 2px 2px 4px 2px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-x: auto !important;
    align-items: stretch !important;
  }
  .padlet-column {
    flex: 0 0 85vw !important;
    min-width: 275px !important;
    max-width: 320px !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    scroll-snap-align: center !important;
    border-radius: 14px !important;
  }
  .padlet-column-header {
    padding: 10px 12px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .padlet-column-title {
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    color: var(--text-main) !important;
    letter-spacing: -0.01em !important;
  }
  .padlet-column-count {
    font-size: 0.70rem !important;
    font-weight: 800 !important;
  }
  .padlet-column-add-btn {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    background: white !important;
    border: 1.5px dashed var(--primary) !important;
    border-radius: 10px !important;
    color: var(--primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    margin-bottom: 10px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
  }
  .padlet-column-add-btn:hover {
    background: var(--primary) !important;
    color: white !important;
  }

  /* Sleek Custom Cycle Selector */
  .custom-cycle-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: white !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23E8521A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;
    padding-right: 36px !important;
    padding-left: 14px !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 12px !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    color: var(--text-main) !important;
    height: 40px !important;
    min-height: 40px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }
  .custom-cycle-select:focus,
  .custom-cycle-select:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(156,54,16,0.12) !important;
    outline: none !important;
  }
  .padlet-column-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 8px 8px 24px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .padlet-post-inner {
    padding: 10px 12px !important;
  }
  .padlet-post-title {
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    color: var(--text-main) !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  .padlet-post-inner > div:first-child {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .padlet-post-tag {
    font-size: 0.65rem !important;
  }
  .padlet-post-card {
    border-radius: 10px !important;
  }
  .padlet-fab-publish {
    display: none !important;
  }

  /* (overflow:visible en #section-preguntas quitado: ahora usa scroll
     contenido, igual que el resto de secciones) */
  #section-preguntas .board-header > div:last-child {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
  }
  #section-preguntas .board-header .btn {
    flex: 1 !important;
    height: 38px !important;
    justify-content: center !important;
    font-size: 0.8rem !important;
  }

  .admin-actions-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
    flex-wrap: wrap !important;
  }
  .admin-actions-bar .search-input-wrap,
  #filterPregTema,
  #filterPregModalidad,
  #filterPregAño {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* (overflow:visible en #adminPreguntasBoard quitado: causaba que el
     pie de página quedara mal posicionado en móvil) */

  /* Footer Mobile Clean Formatting */
  .main-footer {
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 6px !important;
    padding: 10px 12px !important;
    height: auto !important;
    min-height: 48px !important;
  }
  .main-footer .footer-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
  }
  .main-footer .footer-links a {
    white-space: nowrap !important;
    font-size: 0.72rem !important;
  }

  /* Stat Grids Mobile */
  .progress-charts-grid { grid-template-columns: 1fr; }
  .exam-info-grid { grid-template-columns: repeat(2, 1fr); }
  .results-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .question-navigator { grid-template-columns: repeat(6, 1fr); }
  .admin-stats-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

@media (max-width: 480px) {
  .topbar-brand-title {
    max-width: 140px !important;
    font-size: 0.82rem !important;
  }
  .admin-stats-row {
    grid-template-columns: 1fr !important;
  }
  .exam-info-grid, .results-stats-grid {
    grid-template-columns: 1fr !important;
  }
  .question-navigator {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 6px !important;
  }
  .q-nav-btn {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.78rem !important;
  }
  .pregunta-card {
    padding: 12px !important;
  }
  .pregunta-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .option-btn {
    padding: 8px 10px !important;
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
  }
}


/* ── Tarjetas de contenido bloqueado por membresía (Premium) ── */
.padlet-post-locked {
  cursor: pointer;
  opacity: 0.85;
  background: repeating-linear-gradient(
    135deg,
    #FFFBEB,
    #FFFBEB 10px,
    #FFF7ED 10px,
    #FFF7ED 20px
  ) !important;
  border: 1px dashed #FCD34D !important;
}
.padlet-post-locked:hover {
  opacity: 1;
  box-shadow: 0 4px 14px rgba(196,67,14,0.15) !important;
}

/* ── Visor de PDF/Video (mediaModal): ajuste para que la ventana
   se ajuste exactamente al contenido, sin franjas oscuras extra,
   especialmente en celular donde la regla general de 90vh sobraba ── */
#mediaModal .modal-box {
  max-height: none !important;
  height: auto !important;
}
@media (max-width: 768px) {
  #mediaModal .modal-box {
    width: 96vw !important;
    max-width: 96vw !important;
  }
}

/* ── Selector de Ciclo (custom-cycle-select) — diseño moderno unificado ── */
.custom-cycle-select {
  padding: 8px 34px 8px 14px;
  height: 38px;
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main, #0F172A);
  font-family: inherit;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23E8521A' d='M6 8.2L1.2 3.4a.75.75 0 0 1 1.06-1.06L6 6.08l3.74-3.74a.75.75 0 1 1 1.06 1.06L6 8.2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  box-sizing: border-box;
}
.custom-cycle-select:hover {
  border-color: #CBD5E1;
  box-shadow: 0 2px 6px rgba(15,23,42,0.06);
}
.custom-cycle-select:focus {
  border-color: var(--primary, #9C3610);
  outline: none;
  box-shadow: 0 0 0 3px rgba(156,54,16, 0.12);
}

/* MirzaQuizz: un poco más de aire abajo para que el botón
   "Siguiente Pregunta" no quede pegado al borde inferior */
#mqQuizActive {
  padding-bottom: 16px !important;
}

/* ── Calculadora: botones de área ── */
.area-btn-calc {
  padding: 9px 18px;
  border-radius: 12px;
  border: 1px solid #D4D4D8;
  background: white;
  color: var(--text-main);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: var(--transition);
}
.area-btn-calc:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.area-btn-calc.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

/* ── Calculadora: fila de curso con contador +/- ── */
.calc-subject-row {
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.calc-subject-name {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-main);
  flex: 1;
  min-width: 140px;
}
.calc-subject-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.calc-step-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #D4D4D8;
  background: #F8FAFC;
  color: var(--text-main);
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.calc-step-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.calc-step-btn:active {
  transform: scale(0.9);
}
.calc-subject-score {
  min-width: 82px;
  text-align: right;
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.calc-subject-score.is-max {
  color: #10B981;
}

/* El modal de confirmación (Eliminar, etc.) a veces se abre ENCIMA de otro
   modal que sigue abierto (ej. "Gestionar Ciclos"). Como comparten el mismo
   z-index, el orden en el HTML decide cuál se ve por encima — por eso le
   damos a este uno más alto siempre, para que nunca quede tapado. */
#confirmModal {
  z-index: 2000 !important;
}
#modalConfirmAction {
  z-index: 2000 !important;
}

/* ── Tablets (769px a 1024px): las columnas de Clases/Resúmenes son
   más angostas para que quepan más sin depender tanto del scroll
   horizontal, y la barra de scroll se ve más discreta en pantallas táctiles ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .padlet-column {
    flex: 0 0 260px !important;
    min-width: 240px !important;
    max-width: 270px !important;
  }
  .padlet-board-container {
    scrollbar-width: thin;
  }
  .padlet-board-container::-webkit-scrollbar {
    height: 6px;
  }
  .padlet-board-container::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 10px;
  }
  .padlet-board-container::-webkit-scrollbar-track {
    background: transparent;
  }
}

/* ── FIX: Repasos (#quizActive) nunca tuvo la misma regla de scroll que ya
   tenía Examen Simulacro (#examActive) — esto podía dejar el botón
   Anterior/Siguiente inalcanzable cuando el contenido no cabía en la
   pantalla (especialmente en tablets, con menos altura disponible) ── */
#quizActive {
  overflow-y: visible !important;
  padding-bottom: 60px !important;
}

/* ── FIX DE RAÍZ: nunca dejar contenido inaccesible.
   #adminClasesBoard, #clasesContent, #adminResumenesBoard y
   #studentResumenesBoard tenían overflow:hidden puro — si en algún
   dispositivo (confirmado en tablets) la altura calculada no alcanzaba
   para mostrar el contenido completo, quedaba cortado SIN forma de
   hacer scroll para verlo. Ahora, si algo no cabe verticalmente,
   se puede desplazar para alcanzarlo — nunca queda inaccesible. ── */
#adminClasesBoard,
#clasesContent,
#adminResumenesBoard,
#studentResumenesBoard {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Las columnas individuales de curso, si su contenido interno es más
   alto de lo esperado, también pueden desplazarse en vez de cortarse. */
.padlet-column-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}