/* ===================================================
   VARIABLES DE COLOR (LIGHT / DARK)
=================================================== */

:root {
  --bg-body: #f3f4f6;
  --bg-elevated: #ffffff;
  --bg-sidebar: #0f172a;
  --bg-sidebar-soft: #111827;
  --bg-header: #ffffff;

  --border-subtle: #e5e7eb;
  --border-strong: #1e3a8a;

  --text-main: #111827;
  --text-muted: #6b7280;
  --text-invert: #f9fafb;

  --primary: #2563eb;
  --primary-dark: #1e3a8a;
  --primary-soft: #e0e7ff;

  --chip-success: #059669;
  --chip-danger: #b91c1c;
  --chip-admin: #2563eb;
  --chip-user: #4b5563;

  --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.12);
  --shadow-card: 0 6px 18px rgba(15, 23, 42, 0.10);

  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;

  --transition-fast: 0.18s ease-out;
}

/* Checkout seguro */
.checkout-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top,#172554,#020617 65%)}
.checkout-card{width:min(620px,100%);padding:28px;background:#fff;color:#0f172a}
.checkout-logo{display:block;width:96px;height:96px;object-fit:contain;margin:0 auto 10px}
.checkout-kicker{text-align:center;color:#2563eb;font-weight:700;margin:0 0 4px}
.checkout-card h1{text-align:center;margin:0 0 6px}
.checkout-card>.panel-subtitle{text-align:center;margin-bottom:18px;color:#475569}
.checkout-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.checkout-actions .btn{flex:1 1 150px}
.checkout-consent{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.45;margin-top:14px}
.checkout-consent input{margin-top:3px}
.checkout-message{min-height:24px;border-radius:8px;padding:10px 12px;margin-bottom:12px;background:#eff6ff;color:#1e3a8a}
.checkout-message:empty{display:none}
.checkout-message[data-type="error"]{background:#fef2f2;color:#991b1b}
.checkout-message[data-type="warning"]{background:#fffbeb;color:#92400e}
.checkout-message[data-type="success"]{background:#ecfdf5;color:#065f46}
.checkout-session{padding:14px;border:1px solid #dbeafe;border-radius:12px;background:#f8fafc}
.checkout-help{font-size:12px;color:#64748b;margin-top:18px}

/* Dark Mode automático */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-body: #020617;
    --bg-elevated: #020617;
    --bg-sidebar: #020617;
    --bg-sidebar-soft: #020617;
    --bg-header: #020617;

    --border-subtle: #1f2937;
    --border-strong: #3b82f6;

    --text-main: #e5e7eb;
    --text-muted: #9ca3af;
    --text-invert: #f9fafb;

    --primary: #3b82f6;
    --primary-dark: #1d4ed8;
    --primary-soft: rgba(59, 130, 246, 0.10);

    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.55);
    --shadow-card: 0 6px 18px rgba(0, 0, 0, 0.40);
  }
}

/* ===================================================
   RESET Y BASE
=================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden; /* ✅ evita scroll lateral global */
}

body {
  background:
    radial-gradient(circle at top, rgba(37, 99, 235, 0.08), transparent 55%),
    var(--bg-body);
  color: var(--text-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Transiciones suaves globales */
body, button, input, textarea, select {
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.view {
  width: 100%;
  height: 100%;
}

/* Utilidades */
.hidden {
  display: none !important;
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* ✅ Evitar que tablas / elementos se salgan del layout */
img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* ===================================================
   LOGIN (index.html)
=================================================== */

#login-view {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px;
}

.login-card {
  width: 380px;
  max-width: 100%;
  padding: 32px 28px 24px;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(148, 163, 184, 0.35);
  backdrop-filter: blur(10px);
}

.login-card h1 {
  margin-bottom: 18px;
  font-weight: 600;
  font-size: 22px;
  color: var(--text-main);
}

/* Campos de formulario */

.field {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.field span {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.field input,
.field textarea,
.field select {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  font-size: 14px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--text-main);
  outline: none;
}

@media (prefers-color-scheme: dark) {
  .field input,
  .field textarea,
  .field select {
    background: #020617;
  }
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary-soft);
}

.field textarea {
  resize: vertical;
}

/* Error de login */

.error {
  margin-top: 12px;
  color: var(--chip-danger);
  font-size: 13px;
}

/* Bloque informativo (landing-card) */

#landing-card {
  margin-top: 20px;
  background: var(--bg-elevated);
  padding: 18px 16px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-subtle);
}

#landing-card h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
}

#landing-text {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-muted);
  white-space: pre-wrap;
}

/* Botones de precios */

#btn-price-month,
#btn-price-full {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  border-radius: var(--radius-md);
  font-weight: 600;
}

/* ===================================================
   BOTONES (GENERALES)
=================================================== */

.btn {
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transform-origin: center;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--text-invert);
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.25);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.35);
}

.btn-secondary {
  background: #4b5563;
  color: #f9fafb;
}

.btn-secondary:hover {
  background: #374151;
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  border-color: rgba(148, 163, 184, 0.7);
  color: var(--text-main);
}

.btn-outline:hover {
  background: rgba(148, 163, 184, 0.12);
}

.btn-sm {
  padding: 6px 10px;
  font-size: 12px;
}

/* ===================================================
   HEADER (ADMIN / STUDENT)
=================================================== */

.header {
  height: 56px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--text-muted);
}

.hamburger-btn {
  background: transparent;
  font-size: 24px;
  border: none;
  cursor: pointer;
  color: var(--text-main);
}

/* ===================================================
   SIDEBAR (ADMIN / STUDENT)
=================================================== */

/* Barra lateral para student (#sidebar) y admin (#admin-sidebar) */
#sidebar,
#admin-sidebar {
  width: 260px;
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.18), transparent 60%),
    var(--bg-sidebar);
  height: calc(100vh - 56px);
  border-right: 1px solid rgba(148, 163, 184, 0.3);
  position: fixed;
  left: 0;
  top: 56px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 30;
}

.sidebar-logo {
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}

.sidebar-logo-img {
  width: 76px;
  height: auto;
  margin-bottom: 6px;
  filter: drop-shadow(0 8px 16px rgba(15, 23, 42, 0.45));
}

.sidebar-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-invert);
}

/* Lista de secciones */

.sidebar-sections {
  margin-top: 16px;
  list-style: none;
  overflow-y: auto;
  padding-right: 4px;
}

/* Scrollbar fino */
.sidebar-sections::-webkit-scrollbar {
  width: 6px;
}
.sidebar-sections::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.7);
  border-radius: 999px;
}

.sidebar__section-item {
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
  color: var(--text-invert);
}

.sidebar__section-item:hover {
  background: rgba(15, 23, 42, 0.85);
  transform: translateY(-1px);
}

.sidebar__section-item--active {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.35);
}

.sidebar__section-name {
  font-size: 13px;
  font-weight: 500;
}

.sidebar__section-actions {
  display: flex;
  gap: 6px;
}

.icon-btn {
  font-size: 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 3px;
  color: var(--text-invert);
  opacity: 0.8;
}

.icon-btn:hover {
  opacity: 1;
}

/* Botones de barra lateral */

.sidebar-btn {
  width: 100%;
  margin: 4px 0;
  padding: 10px 11px;
  text-align: left;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 14px;
  cursor: pointer;
  background: rgba(15, 23, 42, 0.85);
  color: var(--text-invert);
}

.sidebar-btn.btn-outline {
  background: transparent;
  border-color: rgba(148, 163, 184, 0.7);
  color: #e5e7eb;
}

.sidebar-btn:hover {
  background: rgba(37, 99, 235, 0.2);
  border-color: rgba(129, 140, 248, 0.8);
}

/* Iconos sociales (login + admin + student) */

.sidebar-social {
  margin-top: auto;
  display: flex;
  justify-content: space-around;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
}

.social-icon {
  width: 26px;
  cursor: pointer;
  opacity: 0.75;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.45));
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.social-icon:hover {
  opacity: 1;
  transform: translateY(-1px) scale(1.03);
}

/* ===================================================
   CONTENIDO PRINCIPAL (ADMIN / STUDENT)
=================================================== */

/* ✅ Clave para quitar la franja sin provocar overflow:
   - El contenedor ocupa todo el ancho disponible
   - Pero el contenido real (paneles) se centra y se limita con max-width
*/
#content {
  margin-left: 260px;
  padding: 80px 24px 24px;
  max-width: none;              /* ✅ permite usar ancho disponible */
  width: calc(100% - 260px);    /* ✅ evita franja a la derecha */
  overflow-x: hidden;           /* ✅ evita scroll lateral */
}

/* ✅ Limita y centra el contenido real dentro de #content (admin y student) */
.panel {
  display: block;
  width: 100%;
  max-width: 1280px;            /* ✅ equilibrio: sin franja, sin desbordar */
  margin: 0 auto;               /* ✅ centrado real */
}

.panel-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
  align-items: center;
}

.panel-subtitle {
  font-size: 13px;
  color: var(--text-muted);
}

/* Listado de tarjetas */

.cards-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ===================================================
   CARDS GENERALES
=================================================== */

.card {
  background: var(--bg-elevated);
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
  max-width: 100%;
}

.card-item {
  background: var(--bg-elevated);
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  max-width: 100%;
}

.card-item__title-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.card-item__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
}

.badge {
  background: var(--primary-soft);
  color: var(--primary-dark);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-dot {
  width: 8px;
  height: 8px;
  background: var(--primary-dark);
  border-radius: 50%;
}



/* ===================================================
   BADGES (estados adicionales)
=================================================== */

.badge--success {
  background: rgba(5, 150, 105, 0.14);
  color: var(--chip-success);
  border: 1px solid rgba(5, 150, 105, 0.22);
}

.badge--muted {
  background: rgba(148, 163, 184, 0.14);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

.badge--success .badge-dot { background: var(--chip-success); }
.badge--muted .badge-dot { background: var(--text-muted); }

/* ===================================================
   BOTONES (estado éxito)
=================================================== */

.btn-success {
  background: var(--chip-success);
  color: #f9fafb;
}

.btn-success:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}

/* ===================================================
   TABLAS (usuarios, análisis, resultados)
=================================================== */

table {
  width: 100%;
  max-width: 100%;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  border-collapse: collapse;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

thead {
  background: rgba(15, 23, 42, 0.04);
}

@media (prefers-color-scheme: dark) {
  thead {
    background: rgba(15, 23, 42, 0.85);
  }
}

th, td {
  padding: 12px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 14px;
  text-align: left;
  word-break: break-word;
}

th {
  font-weight: 600;
  color: var(--text-muted);
}

tr:last-child td {
  border-bottom: none;
}

/* Chips de estado / rol */

.chip {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: #f9fafb;
}

.chip--activo { background: var(--chip-success); }
.chip--inactivo { background: var(--chip-danger); }
.chip--admin { background: var(--chip-admin); }
.chip--user { background: var(--chip-user); }

/* ===================================================
   MODAL GENÉRICO (admin)
=================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.modal {
  background: var(--bg-elevated);
  width: 380px;
  max-width: 95%;
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(148, 163, 184, 0.7);
}

.modal h3 {
  font-size: 18px;
  margin-bottom: 14px;
  color: var(--text-main);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  gap: 10px;
}

/* ===================================================
   STUDENT VIEW — BANNER DE RESULTADOS
=================================================== */

#student-result-banner {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--text-invert);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-soft);
  display: none;
}

#student-result-banner h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

#student-result-banner svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25));
}

#student-result-banner .result-values {
  font-size: 14px;
  opacity: 0.95;
  line-height: 1.5;
}

/* ===================================================
   STUDENT — CASOS CLÍNICOS Y PREGUNTAS
=================================================== */

.case-block {
  background: var(--bg-elevated);
  padding: 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  margin-bottom: 24px;
}

.case-block h4 {
  font-size: 16px;
  color: var(--text-main);
  margin-bottom: 10px;
  font-weight: 600;
}

.case-text {
  font-size: 14px;
  color: var(--text-muted);
  white-space: pre-wrap;
  margin-bottom: 16px;
}

.question-block {
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
}

.question-block h5 {
  font-size: 15px;
  margin-bottom: 10px;
  font-weight: 600;
  color: var(--text-main);
}

.question-block p {
  font-size: 14px;
  color: var(--text-main);
  margin-bottom: 8px;
}

.question-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.question-options label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
}

.question-options input[type="radio"] {
  margin-top: 2px;
}

/* Justificación al finalizar */

.justification-box {
  background: var(--primary-soft);
  border-left: 4px solid var(--primary-dark);
  padding: 12px 14px;
  margin-top: 10px;
  border-radius: var(--radius-sm);
  color: var(--primary-dark);
  font-size: 13px;
  display: none;
}

/* Tablas de resultados premium */

.result-message {
  margin-bottom: 8px;
  font-size: 13px;
  opacity: 0.9;
}

.result-tables {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: rgba(15, 23, 42, 0.14);
  border-radius: 10px;
  overflow: hidden;
}

.result-table th,
.result-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.18);
}

.result-table th {
  text-align: left;
  font-weight: 600;
  opacity: 0.95;
}

.result-table tr:last-child td {
  border-bottom: none;
}

.result-table--compact th,
.result-table--compact td {
  padding: 5px 6px;
}

/* ===================================================
   PROGRESO (STUDENT)
=================================================== */

.progress-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.progress-section-card {
  background: rgba(15, 23, 42, 0.04);
  border-radius: var(--radius-md);
  border: 1px solid rgba(148, 163, 184, 0.4);
  padding: 10px 12px;
  font-size: 13px;
}

.progress-section-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.progress-global {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-muted);
}

#student-progress-chart-card {
  height: 320px;
}

/* En móvil, tarjetas de progreso en una columna */
@media (max-width: 700px) {
  .progress-section-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================================================
   RESPONSIVE LAYOUT
=================================================== */

@media (max-width: 850px) {
  #sidebar,
  #admin-sidebar {
    left: -260px;
    transition: left var(--transition-fast);
  }

  #sidebar.sidebar--open,
  #admin-sidebar.sidebar--open {
    left: 0;
  }

  #content {
    margin-left: 0;
    width: 100%;
    margin-top: 72px;
    padding: 72px 16px 24px;
  }

  .panel {
    max-width: 100%;
    margin: 0;
  }

  .hamburger-btn {
    display: block;
  }
}

/* Footer de edición de examen (botones inferiores) */
.admin-exam-footer {
  justify-content: flex-end;
  margin-top: 16px;
}

/* ============================
   MINI EXÁMENES – VISTA ESTUDIANTE
   ============================ */

#student-mini-exams-view {
  max-width: 520px;
  margin: 0 auto;
}

/* Título y descripción del módulo */
#student-mini-exams-view .panel-title {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #0f172a;
  margin-bottom: 4px;
}

#student-mini-exams-view .panel-subtitle {
  font-size: 0.85rem;
  color: #6b7280;
  margin-bottom: 18px;
}

/* Tarjeta principal del configurador */
#student-mini-exams-view .mini-exam-card {
  position: relative;
  border-radius: 22px;
  padding: 18px 18px 16px;
  background: radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.18), #ffffff);
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
  overflow: hidden;
}

/* halo decorativo en esquina */
#student-mini-exams-view .mini-exam-card::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.35), rgba(59, 130, 246, 0));
  pointer-events: none;
}

/* cabecera dentro de la tarjeta */
#student-mini-exams-view .mini-exam-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

#student-mini-exams-view .mini-exam-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
}

#student-mini-exams-view .mini-exam-card-description {
  font-size: 0.82rem;
  color: #4b5563;
}

/* chip de “Personalizado” */
#student-mini-exams-view .mini-exam-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.09);
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 600;
  margin-bottom: 6px;
}

/* icono redondo a la derecha */
#student-mini-exams-view .mini-exam-icon {
  min-width: 42px;
  min-height: 42px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* cuerpo del formulario */
#student-mini-exams-view .mini-exam-card-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* campos */
#student-mini-exams-view .mini-field-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 4px;
}

#student-mini-exams-view select,
#student-mini-exams-view input[type="checkbox"] {
  cursor: pointer;
}

/* grid de especialidades como “chips” */
#student-mini-exams-view .mini-specialties-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#student-mini-exams-view .mini-specialty-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.5);
  font-size: 0.78rem;
  color: #111827;
  transition: all 0.15s ease;
}

#student-mini-exams-view .mini-specialty-chip input[type="checkbox"] {
  accent-color: #2563eb;
}

#student-mini-exams-view .mini-specialty-chip:hover {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.4);
}

/* modo de selección */
#student-mini-exams-view .mini-mode-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #374151;
}

/* footer con texto bajo el botón */
#student-mini-exams-view .mini-exam-card-footer {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed rgba(148, 163, 184, 0.6);
  font-size: 0.78rem;
  color: #4b5563;
}

/* botón principal más protagonista dentro de la tarjeta */
#student-mini-exams-view .btn-primary {
  width: 100%;
  justify-content: center;
  font-weight: 600;
}

/* responsive */
@media (max-width: 480px) {
  #student-mini-exams-view {
    max-width: 100%;
  }
}

/* ===== MINI EXÁMENES – UI mejorada ===== */

.mini-num-select {
  width: 100%;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.8);
  background: rgba(255, 255, 255, 0.98);
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  outline: none;
  appearance: none;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.mini-num-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.28),
              0 10px 24px rgba(37, 99, 235, 0.22);
}

/* chips de especialidades */
.mini-specialty-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.mini-specialty-chip {
  position: relative;
  border: 1px solid #4b5563;
  background: #020617;
  color: #9ca3af;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.mini-specialty-chip input[type="checkbox"] {
  display: none;
}

.mini-specialty-chip span {
  white-space: nowrap;
}

/* estado activo de la especialidad */
.mini-specialty-chip--active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: #2563eb;
  color: #fff;
  transform: translateY(-1px);
}

/* BOTÓN ALEATORIO – ESTADOS VISUALES (checkbox + label) */

.mini-mode-row { margin-top: 6px; }
.mini-random-checkbox { display: none; }

.mini-random-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;

  border: 1px solid #9ca3af;
  background: #e5e7eb;
  color: #111827;

  box-shadow: none;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.1s ease;
}

.mini-mode-row input:not(:checked) + .mini-random-toggle:hover {
  background: #d1d5db;
}

.mini-mode-row input:checked + .mini-random-toggle {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.25);
  transform: translateY(-1px);
}

/* ===== Banner de cookies ===== */

.cookie-banner {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 560px;
  width: calc(100% - 32px);
  background: var(--bg-elevated);
  border-radius: 999px;
  padding: 10px 16px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 60;
  font-size: 12px;
}

.cookie-banner__text {
  flex: 1;
  color: var(--text-muted);
}

.cookie-banner__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    border-radius: 16px;
  }
}

/* ============================
   MINI EXÁMENES – DARK MODE
   ============================ */

@media (prefers-color-scheme: dark) {
  #student-mini-exams-view .panel-title { color: #f9fafb; }
  #student-mini-exams-view .panel-subtitle { color: #cbd5f5; }

  #student-mini-exams-view .mini-exam-card {
    background: radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.65), #020617);
    border-color: rgba(129, 140, 248, 0.9);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.95);
  }

  #student-mini-exams-view .mini-exam-card-title { color: #f9fafb; }
  #student-mini-exams-view .mini-exam-card-description { color: #e5e7eb; }

  #student-mini-exams-view .mini-exam-pill {
    background: rgba(37, 99, 235, 0.4);
    color: #e0e7ff;
  }

  #student-mini-exams-view .mini-exam-icon { background: rgba(15, 23, 42, 0.9); }
  #student-mini-exams-view .mini-field-label { color: #e5e7eb; }

  .mini-num-select {
    background: #020617;
    border-color: #1f2937;
    color: #f9fafb;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.9);
  }

  .mini-num-select:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.7),
                0 16px 32px rgba(15, 23, 42, 0.95);
  }

  #student-mini-exams-view .mini-specialty-chip {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(148, 163, 184, 0.9);
    color: #e5e7eb;
  }

  #student-mini-exams-view .mini-specialty-chip:hover {
    border-color: #93c5fd;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.7);
  }

  .mini-specialty-chip--active {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-color: #93c5fd;
    color: #ffffff;
    transform: translateY(-1px);
  }

  #student-mini-exams-view .mini-mode-row { color: #e5e7eb; }

  .mini-random-toggle {
    background: #334155;
    color: #e5e7eb;
    border-color: #64748b;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.65);
  }

  .mini-mode-row input:not(:checked) + .mini-random-toggle:hover {
    background: #475569;
  }

  .mini-mode-row input:checked + .mini-random-toggle {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 16px 36px rgba(37, 99, 235, 0.6);
  }

  #student-mini-exams-view .mini-exam-card-footer {
    color: #cbd5f5;
    border-top-color: rgba(129, 140, 248, 0.7);
  }
}

/* ================================
   BIBLIOTECA (RESÚMENES/GPC) — UI 2.0
   ================================ */

body.modal-open { overflow: hidden; }

/* ✅ Cuando está en modo cards: no mostrar panel derecho (si existe) */
#student-resources-view[data-ui="cards"] #student-resources-detail { display: none; }

#student-resources-view .resources-controls { gap: 10px; }

#student-resources-view .resources-controls input,
#student-resources-view .resources-controls select {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
  transition: box-shadow 160ms ease, border-color 160ms ease;
  max-width: 100%;
}

#student-resources-view .resources-controls input:focus,
#student-resources-view .resources-controls select:focus {
  border-color: #93c5fd;
  box-shadow: 0 0 0 4px rgba(59,130,246,0.15);
}

/* Grid de cards */
#student-resources-view .resources-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 920px) {
  #student-resources-view .resources-grid { grid-template-columns: 1fr; }
}

.resource-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
  max-width: 100%;
}

.resource-card:hover {
  transform: translateY(-2px);
  border-color: #dbeafe;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.10);
}

.resource-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.resource-card__meta { min-width: 0; }

.resource-card__specialty {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
  margin-bottom: 8px;
  white-space: nowrap;
}

.resource-card__title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
  word-break: break-word;
}

.resource-card__open { flex: 0 0 auto; }

.resource-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.resource-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #0f172a;
}

.resource-badge--muted {
  background: #f8fafc;
  color: #64748b;
}

/* Modal */
.resources-modal.hidden { display: none; }

.resources-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.resources-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}

.resources-modal__panel {
  position: absolute;
  right: 18px;
  left: 18px;
  top: 70px;
  max-width: 860px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  overflow: hidden;
}

.resources-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px;
  border-bottom: 1px solid #e5e7eb;
  background: #ffffff;
}

.resources-modal__headtext { min-width: 0; }

.resources-modal__badge {
  display: inline-flex;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.10);
  color: #0369a1;
  margin-bottom: 8px;
}

.resources-modal__title {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
  word-break: break-word;
}

.resources-modal__body {
  padding: 14px;
  max-height: calc(100vh - 160px);
  overflow: auto;
}

.resources-modal__section { margin-bottom: 14px; }

.resources-modal__section-title {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.resources-modal__buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 620px) {
  .resources-modal__buttons { grid-template-columns: 1fr; }
  .resources-modal__panel { top: 56px; }
}

.resource-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  color: #0f172a;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.resource-btn:hover {
  transform: translateY(-1px);
  border-color: #dbeafe;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10);
}

/* ===================================================
   COMPLETADO (LISTA)
=================================================== */

.resource-card--completed {
  border: 2px solid #16a34a !important;
  background: #ecfdf5 !important;
}

.resource-card--completed .resource-card__title {
  color: #065f46 !important;
}

/* ===================================================
   IMPORTANTE: REVERTIR EL CAMBIO QUE TE ROMPIÓ EXÁMENES
   - NO GRID
   - NO SCROLL HORIZONTAL
=================================================== */

/* ✅ Asegura lista vertical como antes */
#student-exams-list.cards-list{
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* ✅ Previene que alguna tarjeta fuerce overflow */
#student-exams-list .card-item,
#student-exams-list .card,
#student-exams-list .card-item *{
  max-width: 100%;
}
/* ================================
   BIBLIOTECA — Recursos unificados (botones + externo)
   ================================ */

#student-resources-view .resource-unified-card {
  padding: 0;                  /* header/body separados */
  overflow: hidden;
}

#student-resources-view .resource-unified-card__header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#student-resources-view .resource-unified-card__title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
}

#student-resources-view .resource-unified-card__body {
  padding: 14px 16px;
}

#student-resources-view .resource-unified-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#student-resources-view .resource-unified-buttons .btn {
  max-width: 100%;
  white-space: normal;
  line-height: 1.2;
  text-decoration: none; /* evita subrayados en <a> */
}

#student-resources-view .resource-unified-buttons .btn:link,
#student-resources-view .resource-unified-buttons .btn:visited {
  text-decoration: none;
}

/* ---- Botón PDF (preview) ---- */
#student-resources-view .btn-preview {
  border-color: rgba(37, 99, 235, 0.45);
  background: rgba(37, 99, 235, 0.05);
}

#student-resources-view .btn-preview:hover {
  background: rgba(37, 99, 235, 0.10);
}

/* Estado seleccionado del PDF */
#student-resources-view .btn-preview[aria-pressed="true"] {
  border-color: rgba(37, 99, 235, 0.90);
  background: rgba(37, 99, 235, 0.16);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.14);
}

/* ---- Botón externo (resumen/GPC/otros) ---- */
#student-resources-view .btn-external {
  border-color: rgba(5, 150, 105, 0.55);
  background: rgba(5, 150, 105, 0.08);
  color: #065f46;
  text-decoration: none;
}

#student-resources-view .btn-external:hover {
  border-color: rgba(5, 150, 105, 0.80);
  background: rgba(5, 150, 105, 0.12);
}

#student-resources-view .btn-external__icon {
  font-weight: 800;
  font-size: 12px;
  opacity: 0.8;
}

#student-resources-view .btn-external:hover .btn-external__icon {
  opacity: 1;
}

/* Mobile: que los botones se apilen bonitos */
@media (max-width: 620px) {
  #student-resources-view .resource-unified-buttons .btn {
    width: 100%;
    justify-content: space-between;
  }
}

/* Dark mode: asegurar contraste en externos + selección */
@media (prefers-color-scheme: dark) {
  #student-resources-view .btn-preview {
    border-color: rgba(59, 130, 246, 0.55);
    background: rgba(59, 130, 246, 0.10);
  }

  #student-resources-view .btn-preview:hover {
    background: rgba(59, 130, 246, 0.16);
  }

  #student-resources-view .btn-preview[aria-pressed="true"] {
    border-color: rgba(59, 130, 246, 0.95);
    background: rgba(59, 130, 246, 0.22);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
  }

  #student-resources-view .btn-external {
    border-color: rgba(16, 185, 129, 0.60);
    background: rgba(16, 185, 129, 0.14);
    color: #d1fae5;
  }

  #student-resources-view .btn-external:hover {
    border-color: rgba(16, 185, 129, 0.85);
    background: rgba(16, 185, 129, 0.18);
  }
}
/* ===== FIX: Mostrar TODAS las secciones del sidebar ===== */
#student-sidebar-sections.sidebar-sections {
  display: block;            /* por si alguna regla lo colapsa */
  max-height: 320px;         /* evita que solo se vea 1 */
  overflow-y: auto;          /* scroll si son muchas */
  margin: 8px 0 12px;
  padding: 0;
}

#student-sidebar-sections.sidebar-sections li,
#student-sidebar-sections .sidebar__section-item {
  display: flex;             /* asegura que no se oculten */
  width: 100%;
}

#student-sidebar-sections .sidebar__section-item--active {
  display: flex;             /* por si tu CSS solo muestra el activo */
}

/* ===================================================
   FIN
=================================================== */

/* =========================================
   LANDING MOCKUP (index.html) — FINAL OVERRIDE
   No afecta student/admin porque solo usa clases lp-*
========================================= */

#login-view.view{
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 34px 18px;
}

/* Contenedor principal (tarjeta grande) */
.lp-shell{
  width: min(1080px, 94vw);
  background: var(--bg-elevated);
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,0.35);
  box-shadow: var(--shadow-soft);
  display:grid;
  grid-template-columns: 1fr 1px 1fr;
  overflow:hidden;
}

/* Divisor vertical */
.lp-divider{
  background: rgba(148,163,184,0.35);
}

/* Panels */
.lp-left, .lp-right{
  padding: 34px 36px;
}

.lp-brand{
  font-size: 34px;
  line-height: 1.1;
  font-weight: 800;
  color: #1e3a8a; /* azul como mockup */
  margin-bottom: 10px;
}

.lp-sub{
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 20px;
  max-width: 420px;
}

/* Botones login */
.lp-actions{
  display:flex;
  gap: 12px;
  margin-top: 8px;
}

.lp-forgot{
  margin-top: 16px;
  font-size: 13px;
  color: #1d4ed8;
  text-decoration: underline;
  cursor: default; /* no link real */
  width: fit-content;
  opacity: 0.95;
}

/* DERECHA */
.lp-title{
  font-size: 20px;
  font-weight: 800;
  color: #1e3a8a; /* azul */
  margin-bottom: 8px;
}

.lp-title-line{
  height: 2px;
  width: 100%;
  background: rgba(37,99,235,0.55);
  margin-bottom: 18px;
}

/* 3 features centradas */
.lp-features{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 22px;
  align-items:start;
  margin-bottom: 18px;
}

.lp-feature{
  text-align:center;
}

.lp-icon{
  width: 78px;
  height: 78px;
  margin: 0 auto 10px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.lp-svg{
  width: 78px;
  height: 78px;
  stroke: #2563eb;
  stroke-width: 1.6;
  fill: none;            /* CLAVE: evita “bloques negros” */
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lp-ftitle{
  font-weight: 800;
  color: #0f172a;
  font-size: 14px;
  margin-bottom: 6px;
}

.lp-fdesc{
  font-size: 13px;
  color: #475569;
  line-height: 1.35;
}

/* landing text (admin/JS) */
.lp-landing-text{
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 8px 0 14px;
  white-space: pre-wrap;
}

/* Caja planes */
.lp-plans-box{
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(241,245,249,0.65);
  border-radius: 12px;
  padding: 16px 16px;
}

.lp-plans-copy{
  font-size: 13px;
  color: #0f172a;
  margin-bottom: 12px;
}

.lp-plans-actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.lp-btn-plan{
  width: 100%;
  border-radius: 10px;
  padding: 12px 14px;
  font-weight: 700;
}

.lp-btn-dark{
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
}

/* Redes centradas */
.lp-social{
  display:flex;
  justify-content:center;
  gap: 14px;
  margin-top: 16px;
}

.lp-social-icon{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 10px 20px rgba(15,23,42,0.12);
  cursor:pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.lp-social-icon:hover{
  transform: translateY(-1px);
  opacity: 0.95;
}

/* RESPONSIVE */
@media (max-width: 980px){
  .lp-shell{
    grid-template-columns: 1fr;
  }
  .lp-divider{ display:none; }
  .lp-left, .lp-right{
    padding: 26px 20px;
  }
  .lp-features{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .lp-plans-actions{
    grid-template-columns: 1fr;
  }
}
/* =========================================
   FIX: Centrar TODO el panel izquierdo (login)
   - Título, texto, inputs, botones y link
   ========================================= */

.lp-left{
  display: flex;
  flex-direction: column;
  align-items: center;     /* centra todo horizontal */
  text-align: center;      /* centra textos */
}

/* Limita el ancho real del formulario para que quede “pro” y centrado */
.lp-left .field,
.lp-left .lp-actions{
  width: 100%;
  max-width: 520px;        /* ajusta aquí si lo quieres más ancho/angosto */
}

/* Labels alineados bonito (centrados) */
.lp-left .field span{
  text-align: center;        /* opcional: label alineado a la izquierda se ve más pro */
  width: 100%;
}

/* Inputs ocupan el ancho del bloque centrado */
.lp-left .field input{
  width: 100%;
}

/* Botones centrados y proporcionales */
.lp-actions{
  justify-content: center;
}

/* El link “¿Olvidaste…?” centrado */
.lp-forgot{
  width: 100%;
  max-width: 520px;
  text-align: center;
}

/* Si quieres el título más “centrado visualmente” */
.lp-brand{
  width: 100%;
  max-width: 520px;
}
.lp-sub{
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
/* Labels centrados en el login (panel izquierdo) */
.lp-left .field span{
  width: 100%;
  text-align: center;
}
/* ================================
   FIX MOBILE: que NO se corte el inicio
   (evita centrado vertical cuando el contenido es más alto que la pantalla)
================================ */

@media (max-width: 980px){
  #login-view.view{
    align-items: flex-start !important;  /* antes estaba center */
    justify-content: flex-start !important;
    padding-top: calc(16px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  }

  .lp-shell{
    margin-top: 0 !important;
  }
}
/* Asegura scroll normal del body en móvil */
@media (max-width: 980px){
  html, body{
    height: auto !important;
  }
  body{
    overflow-y: auto !important;
  }
}

/* ===== MOVED FROM student.html (HOTFIX UI) ===== */
/* ===============================
       BIBLIOTECA (Resúmenes / GPC)
       - Barra de progreso centrada
       - Layout estable en móvil
       =============================== */
    #student-resources-view .resources-header{
      display:flex;
      flex-direction:column;
      gap:12px;
      align-items:flex-start;
    }
    #student-resources-view .resources-progress-card{
      width:min(560px, 100%);
      margin:0 auto;
      padding:12px 14px;
    }
    #student-resources-view .resources-progress-title{
      font-weight:600;
      font-size:14px;
      text-align:center;
    }
    #student-resources-view .resources-progress-text{
      font-weight:600;
      font-size:14px;
      text-align:center;
      opacity:0.9;
    }
    #student-resources-view .resources-progress-bar-wrap{
      width:100%;
      height:10px;
      border-radius:999px;
      overflow:hidden;
      background:rgba(148,163,184,0.35);
    }
    #student-resources-view .resources-progress-bar{
      height:100%;
      width:0%;
      border-radius:999px;
      background:#1d4ed8;
      transition:width 220ms ease;
    }
    #student-resources-view .resources-count-hidden{
      display:none !important;
    }
    @media (max-width: 520px){
      #student-resources-view .resources-progress-card{
        padding:12px 12px;
      }
      #student-resources-filters-card .field{
        min-width: 0 !important;
        width: 100%;
      }
    }

    /* ===============================
       MINI-EXÁMENES
       - Chips de especialidad con estado visible
       - Toggle de selección aleatoria con estado visible
       - Select de número de preguntas estable en móvil
       =============================== */
    .mini-num-select{
      width:100%;
      max-width:100%;
      box-sizing:border-box;
    }
    @media (max-width: 520px){
      .mini-exam-card-body{
        grid-template-columns: 1fr !important;
      }
    }

    .mini-specialty-chip{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:10px 14px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,0.75);
      background:rgba(148,163,184,0.14);
      color:inherit;
      font-weight:600;
      cursor:pointer;
      user-select:none;
      transition:background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 80ms ease;
    }
    .mini-specialty-chip:hover{
      transform: translateY(-1px);
    }
    .mini-specialty-chip--active{
      background:#1d4ed8 !important;
      border-color:#1d4ed8 !important;
      color:#fff !important;
      box-shadow:0 0 0 3px rgba(29,78,216,0.25);
    }
    .mini-specialty-chip input{
      position:absolute;
      inset:0;
      opacity:0;
      pointer-events:none;
    }

    .mini-random-toggle{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:12px 14px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,0.75);
      background:rgba(148,163,184,0.18);
      color:inherit;
      font-weight:700;
      cursor:pointer;
      user-select:none;
      transition:background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 80ms ease;
    }
    .mini-random-toggle:hover{
      transform: translateY(-1px);
    }
    .mini-random-toggle[aria-pressed="true"]{
      background:#1d4ed8 !important;
      border-color:#1d4ed8 !important;
      color:#fff !important;
      box-shadow:0 0 0 3px rgba(29,78,216,0.25);
    }


/* ===== Cookies: reprompt + preferencias ===== */
.cookie-preferences{
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 10050;
  border: 1px solid rgba(0,0,0,.10);
  background: #ffffff;
  color: #111827;
  padding: 10px 12px;
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  font-weight: 600;
  cursor: pointer;
}
.cookie-preferences.hidden{ display:none; }

.cookie-reprompt{
  position: fixed;
  inset: 0;
  z-index: 10060;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.cookie-reprompt.hidden{ display:none; }

.cookie-reprompt__card{
  width: min(560px, 100%);
  background: var(--bg-elevated, #ffffff);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
}
.cookie-reprompt__title{
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 8px;
}
.cookie-reprompt__text{
  font-size: 13px;
  line-height: 1.45;
  color: #374151;
  margin-bottom: 12px;
}
.cookie-reprompt__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}




/* -------------------------------
   PDF preview (Resúmenes y GPC)
-------------------------------- */
#student-resources-view .preview-box{
  margin-top:12px;
  width:100%;
  height:70vh;
  border-radius:12px;
  overflow:hidden;
  border:1px solid #e5e7eb;
  position:relative;
  background:#fff;
}
#student-resources-view .preview-loading{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.85);
  z-index:2;
  font-weight:700;
}
#student-resources-view .preview-frame{
  width:100%;
  height:100%;
  border:0;
  background:#fff;
}

/* Fullscreen preview */
#student-resources-view .preview-box.preview-fullscreen{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  z-index:9999 !important;
  border-radius:0 !important;
  margin:0 !important;
}

/* Fullscreen controls */
#student-resources-view .preview-fs-open,
#student-resources-view .preview-fs-close{
  position:absolute;
  z-index:3;
  border:0;
  border-radius:10px;
  padding:10px 12px;
  background:rgba(17,24,39,.85);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}
#student-resources-view .preview-fs-open{ right:10px; bottom:10px; }
#student-resources-view .preview-fs-close{ right:10px; top:10px; z-index:4; }

#student-resources-view .preview-fs-open:active,
#student-resources-view .preview-fs-close:active{
  transform: translateY(1px);
}

@media (max-width: 520px){
  #student-resources-view .preview-box{
    height:62vh;
    border-radius:10px;
  }
  #student-resources-view .preview-fs-open,
  #student-resources-view .preview-fs-close{
    padding:9px 11px;
    border-radius:9px;
  }
}

/* MOBILE_COOKIE_PREFERENCES_COMPACT */
@media (max-width: 520px) {
  .cookie-preferences {
    left: 10px;
    right: auto;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 0;
    line-height: 1;
    opacity: 0.94;
  }

  .cookie-preferences::before {
    content: "🍪";
    font-size: 20px;
    line-height: 1;
  }

  .cookie-preferences:hover,
  .cookie-preferences:focus-visible {
    opacity: 1;
  }
}

/* ADMIN_USERS_MOBILE_CARDS_V1 */
@media (max-width: 600px) {
  #admin-users-table {
    width: 100%;
    min-width: 0;
  }

  #admin-users-table table {
    display: block;
    width: 100%;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }

  #admin-users-table thead {
    display: none;
  }

  #admin-users-table tbody {
    display: grid;
    gap: 12px;
    width: 100%;
  }

  #admin-users-table tr {
    display: block;
    width: 100%;
    padding: 4px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
  }

  #admin-users-table td {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
    word-break: normal;
    overflow-wrap: anywhere;
  }

  #admin-users-table td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-weight: 700;
  }

  #admin-users-table td:last-child {
    border-bottom: 0;
  }

  #admin-users-table .chip {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
  }

  #admin-users-table .admin-user-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 12px;
  }

  #admin-users-table .admin-user-actions::before {
    display: none;
  }

  #admin-users-table .admin-user-actions .icon-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ADMIN_PRICE_NORMALIZATION_AND_USER_ACTIONS_V2 */
@media (max-width: 600px) {
  #admin-users-table .admin-user-actions .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 108px;
    padding: 9px 12px;
    color: var(--text-primary, #0f172a);
    background: var(--bg-elevated, #ffffff);
    border: 1px solid #94a3b8;
    opacity: 1;
  }

  #admin-users-table .admin-user-actions .icon-btn::after {
    content: attr(title);
    margin-left: 6px;
    font-weight: 700;
  }

  #admin-users-table .admin-user-actions .admin-delete-user {
    color: #b91c1c;
    border-color: #ef4444;
  }
}

/* STRIPE_EMBEDDED_CHECKOUT_V1 */
.checkout-card.checkout-card--payment{width:min(920px,100%)}
.checkout-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 18px}
.checkout-step{padding:9px 6px;border:1px solid #cbd5e1;border-radius:999px;color:#64748b;font-size:12px;font-weight:700;text-align:center;background:#f8fafc}
.checkout-step--active{color:#1d4ed8;border-color:#3b82f6;background:#eff6ff}
.checkout-step--done{color:#047857;border-color:#10b981;background:#ecfdf5}
.checkout-step--done::before{content:"✓ "}
.checkout-payment{margin-top:16px;padding-top:16px;border-top:1px solid #dbeafe}
.checkout-payment-header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}
.checkout-payment-header h2{margin:2px 0 0;font-size:22px}
#embedded-checkout{width:100%;min-height:520px}
.checkout-card .btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
@media(max-width:640px){.checkout-shell{padding:10px;place-items:start center}.checkout-card{padding:18px 14px}.checkout-progress{gap:5px}.checkout-step{padding:8px 3px;font-size:10px}.checkout-payment-header{align-items:flex-start}}

/* COOKIE_FLOATING_BUTTON_HIDDEN_V1 */
#cookie-preferences {
  display: none !important;
}


/* ENARM_SEPTEMBER_CONTENT_V1 */
.lp-includes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin:14px 0 16px;
}
.lp-include-item{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:10px 12px;
  border:1px solid #dbeafe;
  border-radius:12px;
  background:linear-gradient(135deg,#f8fbff,#eef4ff);
  color:#475569;
  font-size:12px;
  line-height:1.3;
}
.lp-include-item strong{
  color:#173b8f;
  font-size:13px;
}
@media(max-width:700px){
  .lp-includes{grid-template-columns:1fr}
}


/* MINI_EXAM_INDEPENDENT_STATS_V1 */
.mini-stats-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:0 0 18px;
}
.mini-stat-card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:17px 18px;
  border:1px solid #dbeafe;
  border-radius:18px;
  background:linear-gradient(145deg,#fff,#f2f6ff);
  box-shadow:0 10px 28px rgba(30,64,175,.08);
  transition:transform .2s ease,box-shadow .2s ease;
}
.mini-stat-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(30,64,175,.14);
}
.mini-stat-card::after{
  content:"";
  position:absolute;
  width:76px;
  height:76px;
  right:-24px;
  top:-28px;
  border-radius:50%;
  background:rgba(37,99,235,.09);
}
.mini-stat-card span{
  color:#475569;
  font-size:13px;
  font-weight:700;
}
.mini-stat-card strong{
  color:#153a8a;
  font-size:28px;
}
.mini-stat-card small{
  color:#64748b;
  font-size:11px;
}
.mini-stat-card--primary{
  border-color:transparent;
  background:linear-gradient(135deg,#2563eb,#183b8f);
}
.mini-stat-card--primary span,
.mini-stat-card--primary strong,
.mini-stat-card--primary small{
  color:#fff;
}
#student-resources-list .badge:empty,
#student-resources-list [class*="specialty"]:empty,
#student-resources-list [class*="pill"]:empty{
  display:none!important;
}
@media(max-width:760px){
  .mini-stats-grid{grid-template-columns:1fr}
}


/* LANDING_PAGE_POLISH_V1 */

/* Escritorio: proporciones equilibradas y contenido centrado */
.lp-shell{
  width:min(1160px,94vw);
  grid-template-columns:minmax(390px,.9fr) 1px minmax(540px,1.1fr);
}

.lp-left{
  justify-content:center;
}

.lp-right{
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
}

.lp-title{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

.lp-title-line{
  width:100%;
  max-width:620px;
  margin-left:auto;
  margin-right:auto;
}

.lp-features{
  gap:14px;
  margin:14px 0 16px;
}

.lp-icon,
.lp-svg{
  width:58px;
  height:58px;
}

.lp-ftitle{
  font-size:13px;
  line-height:1.2;
}

.lp-fdesc{
  font-size:12px;
  line-height:1.3;
}

.lp-landing-text{
  text-align:center;
  margin:4px auto 12px;
}

.lp-includes{
  width:100%;
  margin:10px 0 14px;
}

.lp-include-item{
  min-height:72px;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.lp-plans-copy{
  text-align:center;
}

.lp-social{
  justify-content:center;
}

/* Tabletas */
@media(max-width:980px){
  .lp-shell{
    width:min(720px,94vw);
    grid-template-columns:1fr;
  }

  .lp-left,
  .lp-right{
    padding:28px 26px;
  }

  .lp-left{
    justify-content:flex-start;
  }

  .lp-features{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
  }

  .lp-plans-actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Teléfonos */
@media(max-width:700px){
  #login-view.view{
    padding:10px 8px 22px!important;
  }

  .lp-shell{
    width:min(100%,560px);
    border-radius:16px;
  }

  .lp-left{
    padding:26px 18px 22px;
  }

  .lp-right{
    padding:22px 16px 24px;
    border-top:1px solid #dbe3f0;
  }

  .lp-brand{
    font-size:29px;
    margin-bottom:8px;
  }

  .lp-sub{
    max-width:330px;
    margin-bottom:18px;
  }

  .lp-title{
    order:1;
    font-size:23px;
    margin-bottom:6px;
  }

  .lp-title-line{
    order:2;
    margin-bottom:12px;
  }

  .lp-features{
    order:3;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
    margin:4px 0 14px;
  }

  .lp-feature{
    min-width:0;
    padding:4px 2px;
  }

  .lp-icon,
  .lp-svg{
    width:40px;
    height:40px;
  }

  .lp-ftitle{
    font-size:11px;
    line-height:1.15;
  }

  .lp-fdesc{
    display:none;
  }

  .lp-landing-text{
    order:4;
    font-size:13px;
    margin:0 auto 12px;
  }

  .lp-plans-box{
    order:5;
    padding:13px;
    margin-bottom:13px;
  }

  .lp-plans-copy{
    font-size:12px;
    margin-bottom:10px;
  }

  .lp-plans-actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .lp-btn-plan{
    min-height:48px;
    padding:9px 7px;
    font-size:12px;
    line-height:1.15;
  }

  .lp-includes{
    order:6;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    margin:0 0 13px;
  }

  .lp-include-item{
    min-height:86px;
    padding:9px 7px;
  }

  .lp-include-item strong{
    font-size:11px;
    line-height:1.2;
  }

  .lp-include-item span{
    font-size:10px;
    line-height:1.25;
  }

  .lp-social{
    order:7;
    margin-top:2px;
  }
}

/* Pantallas extremadamente estrechas */
@media(max-width:360px){
  .lp-includes{
    grid-template-columns:1fr;
  }
}


/* TOPIC_REVIEW_BANK_PICKER_V1 */
.topic-review-picker{margin:16px 0;padding:18px;border:1px solid #bfdbfe;background:linear-gradient(145deg,#f8fbff,#eef4ff);box-shadow:0 12px 30px rgba(30,64,175,.08)}
.topic-review-picker-head,.topic-review-actions,.topic-review-result-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.topic-review-picker h3{margin:3px 0 4px;font-size:18px;color:#102a63}
.topic-review-picker p{margin:0;color:#64748b;font-size:13px}
.topic-review-kicker{font-size:10px;font-weight:800;letter-spacing:.12em;color:#2563eb}
.topic-review-summary{padding:8px 11px;border-radius:999px;background:#fff;color:#1e3a8a;font-size:12px;font-weight:800;white-space:nowrap}
.topic-review-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;margin-top:15px}
.topic-review-toolbar input{width:100%;min-height:40px;padding:9px 12px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:inherit}
.topic-review-actions{align-items:center;margin-top:10px;flex-wrap:wrap}
.topic-review-actions>div{display:flex;gap:8px;flex-wrap:wrap}
.topic-review-reviewed-filter{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#334155}
.topic-review-reviewed-filter input,.topic-review-result-check{width:17px;height:17px;accent-color:#2563eb}
.topic-review-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-height:430px;overflow:auto;margin-top:10px;padding:2px}
.topic-review-result{display:flex;gap:10px;padding:12px;border:1px solid #dbeafe;border-radius:13px;background:#fff;cursor:pointer;transition:.18s ease}
.topic-review-result:hover{transform:translateY(-1px);border-color:#60a5fa;box-shadow:0 8px 18px rgba(37,99,235,.1)}
.topic-review-result.is-added{opacity:.65;cursor:default;background:#f8fafc}
.topic-review-result-content{display:flex;min-width:0;flex:1;flex-direction:column;gap:5px}
.topic-review-result-head strong{font-size:13px;color:#0f172a}
.topic-review-result-meta{font-size:11px;font-weight:700;color:#2563eb}
.topic-review-result-snippet{font-size:12px;line-height:1.4;color:#64748b}
.topic-review-empty{grid-column:1/-1;padding:22px;text-align:center;color:#64748b;background:rgba(255,255,255,.7);border:1px dashed #bfdbfe;border-radius:12px}
.topic-review-editor-card{padding:0!important;overflow:hidden;border:1px solid #dbeafe!important}
.topic-review-editor-card>div:first-child{padding:12px 14px;background:#f8fafc;border-bottom:1px solid #e2e8f0}
.topic-review-case-body{padding:12px 14px}
.topic-review-case-body[hidden]{display:none!important}
@media(max-width:760px){.topic-review-picker-head,.topic-review-actions{align-items:stretch;flex-direction:column}.topic-review-toolbar,.topic-review-results{grid-template-columns:1fr}.topic-review-summary{white-space:normal}.topic-review-actions>div{display:grid;grid-template-columns:1fr 1fr;width:100%}}


/* STUDENT_RESOURCE_CATALOG_V2 */
#student-resources-view[data-ui="cards"]{
  width:min(1280px,100%);
  margin-inline:auto;
}

.resources-progress-card{
  width:100%!important;
  max-width:none!important;
  margin:12px 0 16px!important;
  padding:14px 18px!important;
  border:1px solid #dce6f4!important;
  border-radius:16px!important;
  box-shadow:0 8px 24px rgba(15,42,91,.06)!important;
}

.resources-progress-card #student-resources-progress-text{
  color:#173b8f;
  font-size:14px;
  font-weight:800;
}

.resources-progress-card #student-resources-progress-bar{
  border-radius:999px;
  background:linear-gradient(90deg,#2563eb,#1d4ed8);
}

.resources-filter-card{
  margin-bottom:18px!important;
  padding:16px 18px!important;
  border:1px solid #dce6f4!important;
  border-radius:18px!important;
  box-shadow:0 8px 24px rgba(15,42,91,.05)!important;
}

#student-resources-search,
#student-resources-specialty{
  min-height:48px;
  border-color:#cbd8ea;
  border-radius:12px;
  background:#fff;
}

#student-resources-search:focus,
#student-resources-specialty:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

#student-resources-list.resources-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}

#student-resources-list .resource-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:218px;
  padding:19px;
  overflow:hidden;
  border:1px solid #dce6f4!important;
  border-radius:18px;
  background:#fff!important;
  box-shadow:0 8px 24px rgba(15,42,91,.065);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

#student-resources-list .resource-card:hover{
  transform:translateY(-2px);
  border-color:#aac3ec!important;
  box-shadow:0 14px 30px rgba(15,42,91,.11);
}

#student-resources-list .resource-card--completed{
  border-color:#cfe4d6!important;
  background:#fff!important;
}

.resource-card__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}

.resource-card__specialty{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:70%;
  min-height:28px;
  padding:5px 10px;
  overflow:hidden;
  color:#1d4ed8;
  font-size:12px;
  font-weight:800;
  line-height:1;
  text-overflow:ellipsis;
  white-space:nowrap;
  border:1px solid #dbeafe;
  border-radius:999px;
  background:#eff6ff;
}

.resource-card__status{
  display:inline-flex;
  align-items:center;
  gap:5px;
  flex:0 0 auto;
  color:#7b8799;
  font-size:12px;
  font-weight:750;
}

.resource-card__status--done{
  color:#08783f;
}

.resource-card__status--done > span{
  display:inline-grid;
  place-items:center;
  width:20px;
  height:20px;
  color:#fff;
  font-size:12px;
  border-radius:999px;
  background:#16a05d;
}

.resource-card__body{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:12px;
  align-items:start;
  margin:18px 0;
}

.resource-card__icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  color:#2459c4;
  border-radius:12px;
  background:linear-gradient(145deg,#eef5ff,#dce9ff);
}

.resource-card__icon svg{
  width:23px;
  height:23px;
}

#student-resources-list .resource-card__title{
  display:-webkit-box;
  margin:0;
  overflow:hidden;
  color:#172033!important;
  font-size:17px;
  font-weight:800;
  line-height:1.35;
  overflow-wrap:anywhere;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}

.resource-card__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid #edf1f7;
}

#student-resources-list .resource-card__badges{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  min-width:0;
  color:#667085;
}

.resource-card__material{
  color:#5f6e82;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

.resource-card__separator{
  color:#b2bdcc;
  font-weight:800;
}

#student-resources-list .resource-card__open{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  flex:0 0 auto;
  min-width:92px;
  min-height:40px;
  padding-inline:15px;
  border-radius:11px;
  box-shadow:none;
}

#student-resources-list .resource-card__open:hover{
  transform:none;
}

@media(max-width:900px){
  #student-resources-list.resources-grid{
    grid-template-columns:1fr;
  }

  #student-resources-list .resource-card{
    min-height:200px;
  }
}

@media(max-width:560px){
  .resources-progress-card,
  .resources-filter-card{
    padding:14px!important;
    border-radius:15px!important;
  }

  #student-resources-list.resources-grid{
    gap:12px;
  }

  #student-resources-list .resource-card{
    min-height:0;
    padding:16px;
    border-radius:16px;
  }

  .resource-card__header{
    align-items:flex-start;
  }

  .resource-card__specialty{
    max-width:58%;
  }

  .resource-card__body{
    grid-template-columns:36px minmax(0,1fr);
    gap:10px;
    margin:15px 0;
  }

  .resource-card__icon{
    width:36px;
    height:36px;
    border-radius:10px;
  }

  #student-resources-list .resource-card__title{
    font-size:16px;
    -webkit-line-clamp:4;
  }

  .resource-card__footer{
    align-items:flex-end;
  }

  #student-resources-list .resource-card__open{
    min-width:84px;
  }
}


/* RESOURCE_CARD_ICON_REMOVED_V1 */
#student-resources-list .resource-card__body{
  grid-template-columns:minmax(0,1fr);
  gap:0;
}


/* TOPIC_REVIEW_UI_V2 */

/* Tarjeta para comenzar el repaso */
.topic-review-launch-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:28px;
  align-items:center;
  margin-top:16px!important;
  padding:24px!important;
  border:1px solid #cfe0f7!important;
  border-radius:20px!important;
  background:linear-gradient(135deg,#fff 0%,#f5f9ff 100%)!important;
  box-shadow:0 12px 30px rgba(24,59,143,.08)!important;
}

.topic-review-launch__content{
  min-width:0;
}

.topic-review-launch__eyebrow,
.topic-review-result__eyebrow{
  display:inline-block;
  margin-bottom:7px;
  color:#2459c4;
  font-size:12px;
  font-weight:850;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.topic-review-launch-card h3{
  margin:0 0 7px;
  color:#172033;
  font-size:21px;
  line-height:1.25;
}

.topic-review-launch-card p{
  max-width:720px;
  margin:0;
  color:#5e6b7e;
  font-size:14px;
  line-height:1.55;
}

.topic-review-launch__features{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:15px;
}

.topic-review-launch__features span{
  padding:6px 10px;
  color:#475569;
  font-size:12px;
  font-weight:700;
  border:1px solid #dce6f4;
  border-radius:999px;
  background:#fff;
}

.topic-review-launch__action{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:9px;
  min-width:180px;
}

.topic-review-launch__action .btn{
  min-height:44px;
  justify-content:center;
  border-radius:12px;
}

.topic-review-launch__status{
  color:#78869a;
  font-size:12px;
  font-weight:750;
  text-align:center;
}

.topic-review-launch__status--ready{
  color:#08783f;
}

.topic-review-launch__status--loading{
  color:#64748b;
}

/* Contenedor completo, únicamente cuando currentExamMode = topic */
#student-exam-detail-view[data-exam-mode]{
  width:min(1180px,100%);
  margin-inline:auto;
}

#student-exam-detail-view[data-exam-mode] > .panel-header{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:18px;
  align-items:start;
  margin-bottom:16px;
  padding:18px;
  border:1px solid #dce6f4;
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,42,91,.06);
}

#student-exam-detail-view[data-exam-mode] #student-btn-back-to-exams{
  min-height:42px;
  border-radius:11px;
}

#student-exam-detail-view[data-exam-mode] #student-exam-title{
  max-width:860px;
  margin:0;
  color:#172033;
  font-size:clamp(22px,2.1vw,30px);
  line-height:1.22;
  overflow-wrap:anywhere;
}

#student-exam-detail-view[data-exam-mode] #student-exam-subtitle{
  margin-top:7px;
  font-size:13px;
  line-height:1.45;
}

#student-exam-detail-view[data-exam-mode] #student-exam-timer{
  min-width:88px;
  margin-top:5px;
  padding:8px 12px;
  color:#173b8f;
  font-size:20px!important;
  font-variant-numeric:tabular-nums;
  text-align:center;
  border:1px solid #d7e4f7;
  border-radius:12px;
  background:#f4f8ff;
}

#student-exam-detail-view[data-exam-mode] #student-exam-meta-card{
  margin-bottom:18px;
  padding:16px!important;
  border:1px solid #dce6f4;
  border-radius:18px;
  box-shadow:0 8px 24px rgba(15,42,91,.05);
}

.topic-review-meta-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.topic-review-meta-item{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:11px 13px;
  border-radius:12px;
  background:#f6f8fc;
}

.topic-review-meta-item span{
  color:#748094;
  font-size:11px;
  font-weight:750;
  text-transform:uppercase;
  letter-spacing:.035em;
}

.topic-review-meta-item strong{
  color:#1d2939;
  font-size:15px;
}

.topic-review-meta-item--progress{
  background:#eef5ff;
}

.topic-review-meta-item--progress strong{
  color:#1d4ed8;
}

.topic-review-answer-progress{
  height:7px;
  margin-top:12px;
  overflow:hidden;
  border-radius:999px;
  background:#e5eaf1;
}

.topic-review-answer-progress > span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#2563eb,#1d4ed8);
  transition:width .2s ease;
}

/* Casos y preguntas */
#student-exam-detail-view[data-exam-mode] .case-block{
  margin-bottom:18px;
  padding:20px;
  border:1px solid #dce6f4;
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,42,91,.055);
}

#student-exam-detail-view[data-exam-mode] .case-block > h4{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  margin:0 0 11px;
  padding:5px 10px;
  color:#1d4ed8;
  font-size:12px;
  font-weight:850;
  border:1px solid #dbeafe;
  border-radius:999px;
  background:#eff6ff;
}

#student-exam-detail-view[data-exam-mode] .case-text{
  margin:0 0 18px;
  padding:15px 16px;
  color:#344054;
  font-size:14px;
  line-height:1.62;
  border-left:4px solid #7aa2ed;
  border-radius:0 12px 12px 0;
  background:#f7faff;
}

#student-exam-detail-view[data-exam-mode] .question-block{
  margin-bottom:14px;
  padding:18px;
  border:1px solid #e1e8f2;
  border-radius:15px;
  background:#fff;
  box-shadow:none;
}

#student-exam-detail-view[data-exam-mode] .question-block:last-child{
  margin-bottom:0;
}

#student-exam-detail-view[data-exam-mode] .question-block h5{
  margin:0 0 8px;
  color:#2459c4;
  font-size:12px;
  font-weight:850;
  letter-spacing:.035em;
  text-transform:uppercase;
}

#student-exam-detail-view[data-exam-mode] .question-block > p{
  margin:0 0 14px;
  color:#172033;
  font-size:15px;
  font-weight:750;
  line-height:1.5;
}

#student-exam-detail-view[data-exam-mode] .question-options{
  gap:8px;
}

#student-exam-detail-view[data-exam-mode] .question-options label{
  min-height:44px;
  padding:11px 13px;
  color:#344054;
  font-size:14px;
  line-height:1.45;
  border:1px solid #dfe6ef;
  border-radius:11px;
  background:#fbfcfe;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}

#student-exam-detail-view[data-exam-mode] .question-options label:hover{
  border-color:#9db8e8;
  background:#f6f9ff;
}

#student-exam-detail-view[data-exam-mode] .question-options label:has(input:checked){
  border-color:#2563eb;
  background:#eef5ff;
  box-shadow:0 0 0 2px rgba(37,99,235,.09);
}

#student-exam-detail-view[data-exam-mode] .question-options input[type="radio"]{
  flex:0 0 auto;
  width:17px;
  height:17px;
  margin-top:1px;
  accent-color:#2563eb;
}

#student-exam-detail-view[data-exam-mode] .question-meta{
  margin:0 0 10px!important;
  padding:8px 10px;
  color:#667085;
  border-radius:9px;
  background:#f7f8fa;
}

#student-exam-detail-view[data-exam-mode] .justification-box{
  margin-top:12px;
  padding:13px 15px;
  color:#23406f;
  font-size:13px;
  line-height:1.55;
  border:1px solid #cfe0f7;
  border-left:4px solid #2563eb;
  border-radius:10px;
  background:#f4f8ff;
}

/* Botón final siempre accesible, sin cubrir contenido */
#student-exam-detail-view[data-exam-mode] .flex-row:has(#student-btn-submit-exam){
  position:sticky;
  bottom:12px;
  z-index:8;
  justify-content:flex-end;
  padding:10px;
  border:1px solid rgba(207,224,247,.9);
  border-radius:15px;
  background:rgba(255,255,255,.93);
  box-shadow:0 10px 28px rgba(15,42,91,.12);
  backdrop-filter:blur(10px);
}

#student-exam-detail-view[data-exam-mode] #student-btn-submit-exam{
  min-width:220px;
  min-height:46px;
  justify-content:center;
  border-radius:12px;
}

/* Resultado: tarjeta clara y lectura rápida */
#student-exam-detail-view[data-exam-mode] #student-result-banner{
  margin-bottom:18px;
  padding:20px;
  color:#172033;
  border:1px solid #cfe0f7;
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 28px rgba(15,42,91,.08);
}

#student-exam-detail-view[data-exam-mode] #student-result-banner h3{
  margin:0 0 16px;
  color:#173b8f;
  font-size:18px;
  font-weight:850;
}

#student-exam-detail-view[data-exam-mode] #student-result-banner h3 svg{
  padding:4px;
  color:#fff;
  border-radius:999px;
  background:#2563eb;
  filter:none;
}

.topic-review-result{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:24px;
  align-items:center;
  padding:20px;
  border-radius:16px;
  background:#f7faff;
}

.topic-review-score{
  display:grid;
  place-items:center;
  width:132px;
  height:132px;
  margin-inline:auto;
  border-radius:50%;
  background:conic-gradient(#2563eb calc(var(--topic-score) * 1%),#dfe7f3 0);
}

.topic-review-score > div{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:104px;
  height:104px;
  border-radius:50%;
  background:#fff;
}

.topic-review-score strong{
  color:#173b8f;
  font-size:27px;
  line-height:1;
}

.topic-review-score span{
  margin-top:6px;
  color:#69778c;
  font-size:11px;
  font-weight:700;
}

.topic-review-result__content p{
  margin:0 0 15px;
  color:#536176;
  font-size:14px;
}

.topic-review-result__metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin-bottom:13px;
}

.topic-review-result__metrics > div{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:11px 12px;
  border:1px solid #dce6f4;
  border-radius:11px;
  background:#fff;
}

.topic-review-result__metrics strong{
  color:#1d2939;
  font-size:19px;
}

.topic-review-result__metrics span{
  color:#748094;
  font-size:11px;
  font-weight:700;
}

.topic-review-result__content small{
  color:#667085;
  font-size:12px;
  line-height:1.4;
}

.topic-review-result--strong .topic-review-score{
  background:conic-gradient(#16a05d calc(var(--topic-score) * 1%),#dfe7f3 0);
}

.topic-review-result--strong .topic-review-score strong{
  color:#08783f;
}

.topic-review-result--review .topic-review-score{
  background:conic-gradient(#e09923 calc(var(--topic-score) * 1%),#dfe7f3 0);
}

@media(max-width:760px){
  .topic-review-launch-card{
    grid-template-columns:1fr;
    gap:18px;
    padding:19px!important;
  }

  .topic-review-launch__action{
    min-width:0;
  }

  #student-exam-detail-view[data-exam-mode] > .panel-header{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "back timer"
      "title title";
    gap:14px;
    padding:15px;
  }

  #student-exam-detail-view[data-exam-mode] #student-btn-back-to-exams{
    grid-area:back;
    justify-self:start;
  }

  #student-exam-detail-view[data-exam-mode] > .panel-header > div:nth-child(2){
    grid-area:title;
  }

  #student-exam-detail-view[data-exam-mode] > .panel-header > div:last-child{
    grid-area:timer;
  }

  #student-exam-detail-view[data-exam-mode] #student-exam-title{
    font-size:21px;
  }

  .topic-review-meta-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  #student-exam-detail-view[data-exam-mode] .case-block{
    padding:15px;
  }

  #student-exam-detail-view[data-exam-mode] .question-block{
    padding:15px;
  }

  .topic-review-result{
    grid-template-columns:1fr;
    gap:16px;
    padding:16px;
  }

  .topic-review-score{
    width:116px;
    height:116px;
  }

  .topic-review-score > div{
    width:90px;
    height:90px;
  }

  #student-exam-detail-view[data-exam-mode] .flex-row:has(#student-btn-submit-exam){
    bottom:8px;
  }

  #student-exam-detail-view[data-exam-mode] #student-btn-submit-exam{
    width:100%;
    min-width:0;
  }
}

@media(max-width:430px){
  .topic-review-meta-grid,
  .topic-review-result__metrics{
    grid-template-columns:1fr 1fr;
  }

  .topic-review-result__metrics > div:last-child{
    grid-column:1 / -1;
  }

  #student-exam-detail-view[data-exam-mode] .question-options label{
    padding:11px;
    font-size:13px;
  }
}


/* UNIFIED_EXAM_UI_V1 */

/* Resultado detallado sin saturar la pantalla */
#student-exam-detail-view[data-exam-mode] #student-result-banner .result-values{
  opacity:1;
}

.exam-result-details{
  margin-top:14px;
  overflow:hidden;
  border:1px solid #dce6f4;
  border-radius:14px;
  background:#fff;
}

.exam-result-details summary{
  position:relative;
  padding:14px 42px 14px 16px;
  color:#173b8f;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  list-style:none;
  background:#f7faff;
}

.exam-result-details summary::-webkit-details-marker{
  display:none;
}

.exam-result-details summary::after{
  content:"+";
  position:absolute;
  top:50%;
  right:16px;
  transform:translateY(-50%);
  color:#2563eb;
  font-size:20px;
  line-height:1;
}

.exam-result-details[open] summary::after{
  content:"−";
}

.exam-result-details .result-tables{
  display:block;
  margin:0;
  padding:14px;
  overflow-x:auto;
}

#student-exam-detail-view[data-exam-mode] .result-table{
  min-width:520px;
  margin:0 0 12px;
  overflow:hidden;
  color:#344054;
  font-size:12px;
  border:1px solid #e1e8f2;
  border-collapse:separate;
  border-spacing:0;
  border-radius:11px;
  background:#fff;
}

#student-exam-detail-view[data-exam-mode] .result-table:last-child{
  margin-bottom:0;
}

#student-exam-detail-view[data-exam-mode] .result-table th{
  padding:9px 10px;
  color:#173b8f;
  font-weight:800;
  border-color:#e1e8f2;
  background:#f4f8ff;
  opacity:1;
}

#student-exam-detail-view[data-exam-mode] .result-table td{
  padding:8px 10px;
  color:#475569;
  border-color:#e7edf5;
}

/* Distinción discreta entre modalidades */
#student-exam-detail-view[data-exam-mode="mini"] .topic-review-meta-item--progress{
  background:#f1f5ff;
}

#student-exam-detail-view[data-exam-mode="section"] .topic-review-meta-item--progress{
  background:#eef5ff;
}

@media(max-width:760px){
  .exam-result-details summary{
    padding:13px 38px 13px 14px;
  }

  .exam-result-details .result-tables{
    padding:10px;
  }

  #student-exam-detail-view[data-exam-mode] .result-table{
    min-width:480px;
  }
}


/* ADMIN_TOPIC_PICKER_LAYOUT_FIX_V1
   Aísla las tarjetas del banco del resultado visual del estudiante. */

#admin-topic-review-bank-picker .topic-review-results{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:10px!important;
  max-height:480px;
  padding:3px 5px 3px 3px;
  overflow-x:hidden;
  overflow-y:auto;
}

#admin-topic-review-bank-picker .topic-review-result{
  display:grid!important;
  grid-template-columns:22px minmax(0,1fr)!important;
  gap:11px!important;
  align-items:start!important;
  width:100%;
  min-width:0;
  margin:0;
  padding:13px 14px!important;
  color:#0f172a;
  border:1px solid #dbeafe;
  border-radius:13px;
  background:#fff;
}

#admin-topic-review-bank-picker .topic-review-result:hover{
  transform:translateY(-1px);
  border-color:#60a5fa;
  box-shadow:0 7px 16px rgba(37,99,235,.09);
}

#admin-topic-review-bank-picker .topic-review-result.is-added{
  opacity:.68;
  transform:none;
  background:#f8fafc;
  box-shadow:none;
}

#admin-topic-review-bank-picker .topic-review-result-check{
  display:block;
  width:18px;
  height:18px;
  margin:2px 0 0;
  accent-color:#2563eb;
}

#admin-topic-review-bank-picker .topic-review-result-content{
  display:flex!important;
  min-width:0!important;
  width:100%;
  flex-direction:column!important;
  gap:5px!important;
}

#admin-topic-review-bank-picker .topic-review-result-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:10px!important;
  min-width:0;
}

#admin-topic-review-bank-picker .topic-review-result-head strong{
  min-width:0;
  color:#0f172a;
  font-size:14px;
  font-weight:800;
  line-height:1.35;
  white-space:normal;
  overflow-wrap:anywhere;
}

#admin-topic-review-bank-picker .topic-review-result-head .badge{
  flex:0 0 auto;
  max-width:130px;
  white-space:nowrap;
}

#admin-topic-review-bank-picker .topic-review-result-meta{
  display:block;
  color:#2563eb;
  font-size:12px;
  font-weight:750;
  line-height:1.35;
  white-space:normal;
  overflow-wrap:anywhere;
}

#admin-topic-review-bank-picker .topic-review-result-snippet{
  display:-webkit-box;
  overflow:hidden;
  color:#64748b;
  font-size:12px;
  line-height:1.45;
  white-space:normal;
  overflow-wrap:anywhere;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

#admin-topic-review-bank-picker .topic-review-empty{
  grid-column:1!important;
}

@media(max-width:760px){
  #admin-topic-review-bank-picker .topic-review-result{
    padding:12px!important;
  }

  #admin-topic-review-bank-picker .topic-review-result-head{
    flex-direction:column;
    gap:6px!important;
  }

  #admin-topic-review-bank-picker .topic-review-result-head .badge{
    align-self:flex-start;
  }
}


/* EXAM_GENERATOR_DIVERSITY_AUDIT_V2 */
.auto-gen-toolbar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.auto-gen-audit{
  margin-top:16px;
  padding:18px;
  border:1px solid #cfe0ff;
  border-radius:16px;
  background:linear-gradient(145deg,#f8fbff 0%,#eef5ff 100%);
  color:#17233c;
}

.auto-gen-audit__empty{
  color:#64748b;
  font-size:13px;
  line-height:1.5;
}

.auto-gen-audit__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.auto-gen-audit__eyebrow{
  display:block;
  margin-bottom:4px;
  color:#2563eb;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
}

.auto-gen-audit h4{
  margin:0;
  color:#12203a;
  font-size:17px;
  line-height:1.25;
}

.auto-gen-audit__status{
  flex:0 0 auto;
  padding:7px 11px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 1px 4px rgba(15,23,42,.08);
  font-size:12px;
  font-weight:800;
}

.auto-gen-audit__stats{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}

.auto-gen-audit__stats > div{
  min-width:0;
  padding:13px 12px;
  border:1px solid #dce8fb;
  border-radius:12px;
  background:#fff;
  box-shadow:0 4px 12px rgba(30,64,175,.05);
}

.auto-gen-audit__stats strong{
  display:block;
  color:#173b8f;
  font-size:23px;
  line-height:1;
}

.auto-gen-audit__stats span{
  display:block;
  margin-top:6px;
  color:#64748b;
  font-size:11px;
  font-weight:700;
  line-height:1.25;
}

.auto-gen-audit__checks{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}

.auto-gen-audit__checks > span{
  padding:7px 10px;
  border:1px solid #dbe5f3;
  border-radius:999px;
  background:#fff;
  color:#475569;
  font-size:12px;
}

.auto-gen-audit .is-ok,
.auto-gen-result-summary .is-ok{
  color:#15803d;
}

.auto-gen-audit .is-warning,
.auto-gen-result-summary .is-warning{
  color:#b45309;
}

.auto-gen-audit .is-danger{
  color:#b91c1c;
}

.auto-gen-audit__detail{
  margin:13px 0 0;
  color:#475569;
  font-size:12px;
  line-height:1.5;
}

.auto-gen-audit__note{
  margin:12px 0 0;
  padding-top:11px;
  border-top:1px solid #dce8fb;
  color:#64748b;
  font-size:11px;
  line-height:1.45;
}

.auto-gen-result-summary{
  display:grid;
  gap:6px;
  margin-top:14px;
  padding:14px 16px;
  border:1px solid #dbe5f3;
  border-radius:12px;
  background:#fff;
  color:#475569;
  font-size:12px;
  line-height:1.4;
}

.auto-gen-result-summary > strong{
  color:#173b8f;
  font-size:14px;
}

.auto-gen-result-summary small{
  margin-top:3px;
  color:#64748b;
}

@media (max-width:980px){
  .auto-gen-audit__stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:640px){
  .auto-gen-row{
    grid-template-columns:1fr !important;
  }

  .auto-gen-row .auto-gen-remove{
    width:100%;
  }

  .auto-gen-toolbar > .btn{
    flex:1 1 150px;
  }

  .auto-gen-audit{
    padding:14px;
  }

  .auto-gen-audit__header{
    display:grid;
  }

  .auto-gen-audit__status{
    width:max-content;
  }
}

/* ADMIN_TOPIC_CATALOG_AND_SELECTOR_V1 */
.topic-catalog-panel,
.topic-selector-panel{
  margin-bottom:16px;
  padding:18px;
  border:1px solid #cfe0ff;
  border-radius:16px;
  background:linear-gradient(145deg,#f8fbff 0%,#eef5ff 100%);
  color:#17233c;
}

.topic-catalog-header,
.topic-selector-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.topic-catalog-eyebrow{
  display:block;
  margin-bottom:4px;
  color:#2563eb;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
}

.topic-catalog-header h3,
.topic-selector-header h4{
  margin:0;
  color:#12203a;
  font-size:18px;
  line-height:1.25;
}

.topic-catalog-header p,
.topic-selector-header p{
  margin:5px 0 0;
  color:#64748b;
  font-size:12px;
  line-height:1.45;
}

.topic-catalog-stats{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:7px;
}

.topic-catalog-stats span,
.topic-selection-count{
  padding:7px 10px;
  border:1px solid #dbe5f3;
  border-radius:999px;
  background:#fff;
  color:#475569;
  font-size:11px;
  white-space:nowrap;
}

.topic-catalog-controls,
.topic-selector-controls{
  display:grid;
  gap:10px;
  align-items:end;
}

.topic-catalog-controls{
  grid-template-columns:minmax(180px,.6fr) minmax(260px,1.4fr) auto;
}

.topic-selector-controls{
  grid-template-columns:minmax(180px,.65fr) minmax(260px,1.35fr);
}

.topic-catalog-controls .field,
.topic-selector-controls .field{
  margin:0;
}

.topic-catalog-controls select,
.topic-catalog-controls input,
.topic-selector-controls select,
.topic-selector-controls input{
  width:100%;
  background:#fff;
}

.topic-catalog-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  max-height:390px;
  margin-top:14px;
  padding-right:4px;
  overflow:auto;
}

.topic-catalog-card{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  padding:13px;
  border:1px solid #dbe5f3;
  border-radius:12px;
  background:#fff;
  color:#17233c;
  text-align:left;
  cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}

.topic-catalog-card:hover{
  border-color:#7aa7ff;
  box-shadow:0 7px 18px rgba(37,99,235,.11);
  transform:translateY(-1px);
}

.topic-catalog-card.is-active{
  border-color:#2563eb;
  box-shadow:0 0 0 2px rgba(37,99,235,.13);
}

.topic-catalog-card__specialty{
  padding:4px 7px;
  border-radius:999px;
  background:#eef4ff;
  color:#2563eb;
  font-size:10px;
  font-weight:800;
}

.topic-catalog-card strong{
  display:-webkit-box;
  overflow:hidden;
  color:#17233c;
  font-size:13px;
  line-height:1.35;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.topic-catalog-card__counts{
  color:#64748b;
  font-size:10px;
  line-height:1.35;
}

.topic-catalog-current{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:16px 0 12px;
  padding:14px 16px;
  border:1px solid #93b8ff;
  border-radius:14px;
  background:#f5f9ff;
}

.topic-catalog-current > div{
  display:grid;
  gap:2px;
}

.topic-catalog-current span{
  color:#2563eb;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
}

.topic-catalog-current strong{
  color:#17233c;
  font-size:17px;
}

.topic-catalog-current small{
  color:#64748b;
}

.topic-selector-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.topic-selector-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  max-height:310px;
  margin-top:12px;
  padding:3px 4px 3px 1px;
  overflow:auto;
}

.topic-selector-option{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:9px;
  align-items:flex-start;
  padding:11px 12px;
  border:1px solid #dbe5f3;
  border-radius:11px;
  background:#fff;
  cursor:pointer;
}

.topic-selector-option:hover,
.topic-selector-option.is-selected{
  border-color:#7aa7ff;
  background:#f7faff;
}

.topic-selector-option input{
  width:17px;
  height:17px;
  margin:1px 0 0;
  accent-color:#2563eb;
}

.topic-selector-option > span{
  min-width:0;
}

.topic-selector-option strong,
.topic-selector-option small{
  display:block;
}

.topic-selector-option strong{
  color:#17233c;
  font-size:12px;
  line-height:1.35;
}

.topic-selector-option small{
  margin-top:3px;
  color:#64748b;
  font-size:10px;
  line-height:1.35;
}

.topic-selected-list{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:12px;
}

.topic-selected-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  padding:6px 9px;
  border:1px solid #b9d0ff;
  border-radius:999px;
  background:#fff;
  color:#1d4ed8;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}

.topic-selected-pill span{
  font-size:16px;
  line-height:.8;
}

.topic-catalog-empty,
.topic-selector-empty{
  padding:13px;
  border:1px dashed #cbd5e1;
  border-radius:10px;
  color:#64748b;
  font-size:12px;
  line-height:1.45;
}

.topic-catalog-empty.is-error{
  color:#b91c1c;
}

@media (max-width:1100px){
  .topic-catalog-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:760px){
  .topic-catalog-header,
  .topic-selector-header,
  .topic-catalog-current{
    align-items:stretch;
    flex-direction:column;
  }

  .topic-catalog-stats{
    justify-content:flex-start;
  }

  .topic-catalog-controls,
  .topic-selector-controls,
  .topic-catalog-list,
  .topic-selector-list{
    grid-template-columns:1fr;
  }

  .topic-catalog-controls .btn,
  .topic-catalog-current .btn{
    width:100%;
  }
}

/* SCHEDULED_EXAMS_AND_MINI_ROTATION_V1 */
.exam-publish-schedule{
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(220px,320px) auto;
  gap:14px;
  align-items:end;
  margin-top:14px;
  border:1px solid #bfdbfe;
  background:linear-gradient(135deg,#f8fbff 0%,#eef6ff 100%);
}

.exam-publish-schedule h3,
.mini-topic-loader h3{
  margin:3px 0 5px;
  color:#0f244a;
  font-size:17px;
}

.exam-publish-schedule p,
.mini-topic-loader__header p{
  margin:0;
  color:#64748b;
  font-size:12px;
  line-height:1.45;
}

.exam-publish-schedule__status{
  grid-column:1/-1;
  width:max-content;
  max-width:100%;
  padding:7px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
}

.exam-publish-schedule__status.is-live,
.admin-exam-schedule.is-live{
  color:#047857;
  background:#ecfdf5;
}

.exam-publish-schedule__status.is-scheduled,
.admin-exam-schedule.is-scheduled{
  color:#9a5b00;
  background:#fff7df;
}

.exam-publish-schedule__status.is-warning{
  color:#b91c1c;
  background:#fef2f2;
}

.admin-exam-schedule{
  display:inline-flex;
  margin-top:6px;
  padding:4px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
}

.student-exam-scheduled-badge{
  max-width:310px;
  color:#9a5b00 !important;
  background:#fff7df !important;
}

.mini-topic-loader{
  margin-bottom:14px;
  border:1px solid #bfdbfe;
  background:linear-gradient(145deg,#f8fbff,#f1f7ff);
}

.mini-topic-loader__header{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
}

.mini-topic-loader__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  flex-wrap:wrap;
  margin:12px 0;
}

.mini-topic-loader__reviewed{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-right:auto;
  color:#334155;
  font-size:12px;
  font-weight:750;
}

.mini-topic-loader__reviewed input{
  width:17px;
  height:17px;
}

.mini-topic-loader__list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  max-height:460px;
  overflow:auto;
  padding:3px;
}

.mini-topic-loader__item{
  display:grid;
  grid-template-columns:minmax(0,1fr) 96px;
  gap:12px;
  align-items:center;
  padding:12px;
  border:1px solid #dbe5f2;
  border-radius:12px;
  background:#fff;
}

.mini-topic-loader__item.is-selected{
  border-color:#60a5fa;
  box-shadow:0 0 0 2px rgba(37,99,235,.08);
}

.mini-topic-loader__item > div,
.mini-topic-loader__item > label{
  min-width:0;
}

.mini-topic-loader__item > div{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.mini-topic-loader__item > div > span{
  color:#2563eb;
  font-size:10px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.mini-topic-loader__item strong{
  color:#0f172a;
  font-size:12px;
  line-height:1.35;
  overflow-wrap:anywhere;
}

.mini-topic-loader__item small{
  color:#64748b;
  font-size:10px;
}

.mini-topic-loader__item > label{
  display:flex;
  flex-direction:column;
  gap:4px;
  color:#64748b;
  font-size:10px;
  font-weight:800;
}

.mini-topic-loader__item input[type="number"]{
  width:100%;
  min-height:38px;
  padding:7px 9px;
  border:1px solid #bfcee3;
  border-radius:9px;
  background:#fff;
  color:#0f172a;
  font-weight:800;
}

.mini-topic-loader__result{
  display:none;
  margin-top:12px;
  padding:10px 12px;
  border-radius:10px;
  font-size:11px;
}

.mini-topic-loader__result:not(:empty){
  display:flex;
  flex-direction:column;
  gap:3px;
}

.mini-topic-loader__result.is-success{
  color:#047857;
  background:#ecfdf5;
  border:1px solid #a7f3d0;
}

.mini-topic-loader__result.is-warning{
  color:#9a5b00;
  background:#fff7df;
  border:1px solid #fde68a;
}

#student-mini-exams-view .mini-history-stats{
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px 14px;
  border:1px solid #bfdbfe;
  border-radius:13px;
  background:#f4f8ff;
  color:#0f244a;
}

#student-mini-exams-view .mini-history-stats__icon{
  display:grid;
  place-items:center;
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#dbeafe;
  color:#1d4ed8;
  font-size:17px;
  font-weight:900;
}

#student-mini-exams-view .mini-history-stats > div:last-child{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:2px;
}

#student-mini-exams-view .mini-history-stats strong{
  font-size:12px;
  line-height:1.35;
}

#student-mini-exams-view .mini-history-stats span{
  color:#64748b;
  font-size:10px;
  line-height:1.4;
}

@media (max-width:900px){
  .exam-publish-schedule,
  .mini-topic-loader__list{
    grid-template-columns:1fr;
  }

  .exam-publish-schedule{
    align-items:stretch;
  }

  .exam-publish-schedule .btn{
    width:100%;
  }
}

@media (max-width:620px){
  .mini-topic-loader__header,
  .mini-topic-loader__actions{
    align-items:stretch;
    flex-direction:column;
  }

  .mini-topic-loader__reviewed{
    margin-right:0;
  }

  .mini-topic-loader__item{
    grid-template-columns:minmax(0,1fr) 84px;
  }

  .student-exam-scheduled-badge{
    max-width:100%;
    white-space:normal;
  }
}

@media (prefers-color-scheme:dark){
  #student-mini-exams-view .mini-history-stats{
    border-color:#34527f;
    background:rgba(15,35,67,.9);
    color:#eff6ff;
  }

  #student-mini-exams-view .mini-history-stats__icon{
    background:#1e3a68;
    color:#bfdbfe;
  }

  #student-mini-exams-view .mini-history-stats span{
    color:#cbd5e1;
  }
}

/* SIMPLE_TOPIC_EXAM_GENERATOR_V1 */
.simple-exam-generator{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,.55fr);
  gap:18px;
  align-items:center;
  margin-top:16px;
  padding:18px;
  border:1px solid #dbe5f3;
  border-radius:16px;
  background:#fff;
  color:#17233c;
}

.simple-exam-generator__copy h4{
  margin:0;
  color:#12203a;
  font-size:17px;
  line-height:1.25;
}

.simple-exam-generator__copy p{
  max-width:680px;
  margin:6px 0 0;
  color:#64748b;
  font-size:12px;
  line-height:1.5;
}

.simple-exam-generator__field{
  display:grid;
  gap:8px;
}

.simple-exam-generator__field .field{
  margin:0;
}

#admin-auto-gen-question-count{
  width:100%;
  min-height:46px;
  border:1px solid #93b8ff;
  background:#f8fbff;
  color:#173b8f;
  font-size:20px;
  font-weight:800;
  text-align:center;
}

.simple-exam-generator__presets{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
}

.simple-exam-generator__presets .btn{
  min-width:0;
  padding-inline:8px;
}

.simple-exam-generator__notice{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  align-items:center;
  margin-top:14px;
  padding:13px 15px;
  border:1px solid #dbe5f3;
  border-radius:12px;
  background:#fff;
  color:#475569;
  font-size:12px;
  line-height:1.45;
}

.simple-exam-generator__notice strong{
  color:#173b8f;
}

.simple-exam-generator__notice small{
  flex-basis:100%;
  color:#64748b;
}

.simple-exam-generator__notice.is-warning{
  border-color:#fed7aa;
  background:#fffaf5;
  color:#b45309;
}

.simple-exam-generator__notice.is-ready{
  border-color:#bbf7d0;
  background:#f7fff9;
}

.auto-gen-repeat-report{
  margin-top:14px;
  padding:14px;
  border:1px solid #f7c98b;
  border-radius:13px;
  background:#fffaf2;
}

.auto-gen-repeat-report__header{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-bottom:9px;
}

.auto-gen-repeat-report__header strong{
  color:#92400e;
  font-size:13px;
}

.auto-gen-repeat-report__header span{
  color:#9a6a37;
  font-size:10px;
  font-weight:700;
}

.auto-gen-repeat-report__list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}

.auto-gen-repeat-report__list > div{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  border:1px solid #fde4bf;
  border-radius:9px;
  background:#fff;
  color:#475569;
  font-size:11px;
}

.auto-gen-repeat-report__list span{
  min-width:0;
  overflow-wrap:anywhere;
}

.auto-gen-repeat-report__list strong{
  flex:0 0 auto;
  color:#92400e;
  white-space:nowrap;
}

@media (max-width:760px){
  .simple-exam-generator,
  .auto-gen-repeat-report__list{
    grid-template-columns:1fr;
  }

  .auto-gen-repeat-report__header,
  .auto-gen-repeat-report__list > div{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* CHECKOUT_COMPATIBILITY_V6
   Conserva el diseño incorporado con nombre del alumno y vigencia del plan. */
.checkout-plan-access {
  text-align: center;
  margin: -10px 0 18px;
  padding: 10px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #eff6ff;
  color: #1e3a8a;
  font-weight: 700;
}

.checkout-session-name {
  margin-top: 14px;
}

.checkout-name-help {
  margin-top: 7px;
}


/* FINAL_ADJUSTMENTS_V7 */
/* Oculta únicamente el resumen de casos vistos del generador de mini exámenes. */
#student-mini-history-stats {
  display: none !important;
}

/* STUDENT_READING_PROGRESS_POLISH_V10
   Ajustes aislados para Biblioteca/tema y Progreso.
   No modifica login, pagos, exámenes, Firestore ni Admin. */

/* ---------- Detalle del tema: jerarquía y fluidez ---------- */
#student-resources-view[data-ui="cards"] {
  --sr-ink: #14213d;
  --sr-muted: #66758b;
  --sr-line: #dbe5f2;
  --sr-blue: #1f5fd6;
  --sr-blue-dark: #173f94;
  --sr-soft: #f5f8fd;
}

#student-resources-list:not(.resources-grid) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px !important;
  width: 100%;
}

#student-resources-list:not(.resources-grid) > .card {
  margin-top: 0 !important;
  border: 1px solid var(--sr-line) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 10px 30px rgba(15, 42, 91, 0.07) !important;
}

/* Cabecera del tema */
#student-resources-list:not(.resources-grid) > .card:first-child {
  position: relative;
  padding: 22px 24px !important;
  overflow: hidden;
  background: linear-gradient(135deg, #fff 0%, #f4f8ff 100%) !important;
}

#student-resources-list:not(.resources-grid) > .card:first-child::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  content: "";
  background: linear-gradient(180deg, #2f75ed, #173f94);
}

#student-resources-list:not(.resources-grid) > .card:first-child > div {
  align-items: center !important;
}

#student-resources-list:not(.resources-grid) > .card:first-child > div > div:first-child {
  flex: 1 1 520px;
  min-width: 0 !important;
}

#student-resources-list:not(.resources-grid) > .card:first-child .panel-subtitle {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 5px 10px;
  color: #1f5fc4;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid #d5e4fb;
  border-radius: 999px;
  background: #eef5ff;
}

#student-resources-list:not(.resources-grid) > .card:first-child .panel-subtitle + div {
  margin-top: 10px !important;
  color: var(--sr-ink);
  font-size: clamp(19px, 2vw, 27px) !important;
  font-weight: 850 !important;
  line-height: 1.25;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

#student-resources-list:not(.resources-grid) > .card:first-child > div > div:last-child {
  display: flex;
  flex: 0 0 auto;
  gap: 9px !important;
}

#student-resources-list:not(.resources-grid) > .card:first-child .btn {
  min-height: 42px;
  padding-inline: 15px;
  border-radius: 12px;
}

/* Tarjeta del visor */
#student-resources-list:not(.resources-grid) > .card:nth-child(2) {
  padding: 0 !important;
  overflow: hidden;
}

#student-resources-list:not(.resources-grid) > .card:nth-child(2) > div:first-child {
  padding: 17px 20px;
  border-bottom: 1px solid #e6edf7;
  background: linear-gradient(180deg, #fff, #fbfdff);
}

#student-resources-list:not(.resources-grid) > .card:nth-child(2) > div:first-child > div:first-child > div:first-child {
  color: var(--sr-ink);
  font-size: 16px !important;
  font-weight: 850 !important;
}

#student-resources-open-newtab {
  min-height: 42px;
  padding: 10px 15px;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(31, 95, 214, 0.18);
}

#student-resources-open-newtab::before {
  margin-right: 7px;
  content: "↗";
  font-size: 15px;
  font-weight: 900;
}

#student-resources-view .preview-box {
  height: clamp(520px, 72vh, 920px) !important;
  margin-top: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #eef2f7 !important;
}

#student-resources-view .preview-frame {
  background: #eef2f7 !important;
}

#student-resources-view .preview-loading {
  color: var(--sr-blue-dark);
  background: rgba(248, 251, 255, 0.92) !important;
  backdrop-filter: blur(4px);
}

#student-resources-view .resource-unified-card,
#student-resources-view .topic-review-launch-card {
  margin-top: 0 !important;
}

#student-resources-view .resource-unified-card {
  border-radius: 20px !important;
}

#student-resources-view .resource-unified-card__header {
  padding: 17px 20px;
  background: #fbfdff;
}

#student-resources-view .resource-unified-card__title {
  color: var(--sr-ink);
  font-size: 16px;
}

#student-resources-view .resource-unified-card__body {
  padding: 18px 20px;
}

#student-resources-view .resource-unified-buttons .btn {
  min-height: 42px;
  border-radius: 11px;
}

/* ---------- Progreso / análisis ---------- */
#student-progress-view {
  --pa-navy: #12244a;
  --pa-blue: #2563d9;
  --pa-muted: #66758b;
  --pa-line: #dbe5f2;
  width: min(1280px, 100%);
  margin-inline: auto;
}

#student-progress-view > .panel-header {
  position: relative;
  margin-bottom: 18px;
  padding: 20px 22px;
  overflow: hidden;
  border: 1px solid #dbe7f8;
  border-radius: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #eef5ff 100%);
  box-shadow: 0 10px 30px rgba(15, 42, 91, 0.07);
}

#student-progress-view > .panel-header::after {
  position: absolute;
  top: -54px;
  right: -28px;
  width: 150px;
  height: 150px;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 117, 237, 0.18), rgba(47, 117, 237, 0));
  pointer-events: none;
}

#student-progress-view > .panel-header h2 {
  margin: 0;
  color: var(--pa-navy);
  font-size: clamp(25px, 3vw, 34px);
  letter-spacing: -0.025em;
}

#student-progress-view > .panel-header .panel-subtitle {
  margin-top: 5px;
  color: var(--pa-muted);
  font-size: 14px;
}

#student-progress-summary,
#student-progress-chart-card {
  border: 1px solid var(--pa-line) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 12px 32px rgba(15, 42, 91, 0.07) !important;
}

#student-progress-summary {
  padding: 23px !important;
}

#student-progress-summary > h3,
#student-progress-chart-card > h3 {
  margin: 0 !important;
  color: var(--pa-navy);
  font-size: 19px !important;
  font-weight: 850;
  letter-spacing: -0.012em;
}

#student-progress-username {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin: 10px 0 4px;
  padding: 6px 11px;
  color: #1e4d9f;
  font-size: 12px;
  font-weight: 750;
  border: 1px solid #d8e6fa;
  border-radius: 999px;
  background: #f2f7ff;
}

#student-progress-sections.progress-section-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

#student-progress-view .progress-section-card {
  position: relative;
  min-height: 126px;
  padding: 17px 17px 16px;
  overflow: hidden;
  color: #41516a;
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid #dce6f3;
  border-radius: 16px;
  background: linear-gradient(145deg, #ffffff, #f8fbff);
  box-shadow: 0 7px 18px rgba(15, 42, 91, 0.045);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

#student-progress-view .progress-section-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  content: "";
  background: #2f75ed;
}

#student-progress-view .progress-section-card:nth-child(2n)::before {
  background: #12a181;
}

#student-progress-view .progress-section-card:nth-child(3n)::before {
  background: #8157d9;
}

#student-progress-view .progress-section-card:nth-child(4n)::before {
  background: #e0932f;
}

#student-progress-view .progress-section-card:hover {
  transform: translateY(-2px);
  border-color: #b9cdea;
  box-shadow: 0 12px 24px rgba(15, 42, 91, 0.09);
}

#student-progress-view .progress-section-title {
  margin: 2px 0 9px;
  color: #1b2c4f;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.25;
}

#student-progress-view .progress-section-card strong {
  color: #24395f;
  font-weight: 800;
}

#student-progress-global.progress-global {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
  margin-top: 18px;
  color: inherit;
}

#student-progress-global > div {
  min-width: 0;
  padding: 15px 14px;
  color: #163d88;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 850;
  line-height: 1.15;
  border: 1px solid #d7e5f8;
  border-radius: 14px;
  background: linear-gradient(145deg, #f8fbff, #edf4ff);
}

#student-progress-global > div:nth-child(2) {
  color: #087457;
  border-color: #d2ede4;
  background: linear-gradient(145deg, #f8fffc, #ebfaf4);
}

#student-progress-global > div:nth-child(3) {
  color: #6842ad;
  border-color: #e3d9f5;
  background: linear-gradient(145deg, #fcfaff, #f3edff);
}

#student-progress-global > div:nth-child(4) {
  color: #a35d0d;
  border-color: #f2dfc4;
  background: linear-gradient(145deg, #fffdf8, #fff5e7);
}

#student-progress-global > div strong {
  display: block;
  margin-bottom: 7px;
  color: #69778b;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

#student-progress-chart-card {
  position: relative;
  height: 390px !important;
  margin-top: 18px;
  padding: 23px !important;
  overflow: hidden;
}

#student-progress-chart-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, #2f75ed, #8157d9, #12a181);
}

#student-progress-chart-card > h3 {
  margin-bottom: 17px !important;
}

#student-progress-chart {
  width: 100% !important;
  max-height: 310px;
}

@media (max-width: 820px) {
  #student-progress-global.progress-global {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  #student-resources-list:not(.resources-grid) {
    gap: 13px !important;
  }

  #student-resources-list:not(.resources-grid) > .card {
    border-radius: 16px !important;
  }

  #student-resources-list:not(.resources-grid) > .card:first-child {
    padding: 18px 16px 17px !important;
  }

  #student-resources-list:not(.resources-grid) > .card:first-child > div {
    align-items: stretch !important;
    flex-direction: column;
  }

  #student-resources-list:not(.resources-grid) > .card:first-child > div > div:first-child {
    flex-basis: auto;
    min-width: 0 !important;
  }

  #student-resources-list:not(.resources-grid) > .card:first-child > div > div:last-child {
    display: grid;
    grid-template-columns: 0.72fr 1.28fr;
    width: 100%;
  }

  #student-resources-list:not(.resources-grid) > .card:first-child .btn {
    width: 100%;
    min-width: 0;
    padding-inline: 10px;
    white-space: normal;
  }

  #student-resources-list:not(.resources-grid) > .card:nth-child(2) > div:first-child {
    align-items: stretch !important;
    padding: 15px;
  }

  #student-resources-list:not(.resources-grid) > .card:nth-child(2) > div:first-child > div:last-child,
  #student-resources-open-newtab {
    width: 100%;
  }

  #student-resources-open-newtab {
    justify-content: center;
  }

  #student-resources-view .preview-box {
    height: 64vh !important;
    min-height: 430px;
  }

  #student-resources-view .resource-unified-buttons .btn {
    width: 100%;
  }

  #student-progress-view > .panel-header,
  #student-progress-summary,
  #student-progress-chart-card {
    border-radius: 16px !important;
  }

  #student-progress-view > .panel-header {
    padding: 18px;
  }

  #student-progress-summary {
    padding: 17px !important;
  }

  #student-progress-sections.progress-section-grid,
  #student-progress-global.progress-global {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #student-progress-view .progress-section-card {
    min-height: 0;
    padding: 16px;
  }

  #student-progress-global > div {
    padding: 14px;
    font-size: 20px;
  }

  #student-progress-chart-card {
    height: 340px !important;
    padding: 17px 13px !important;
  }

  #student-progress-chart-card > h3 {
    padding-left: 4px;
  }

  #student-progress-chart {
    max-height: 270px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #student-progress-view .progress-section-card,
  #student-resources-view * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}