/* 
 * UNIVERSAL STUDNET CSS ADAPTER
 * Adapts design for both mobile and desktop constraints automatically.
 */

/* =========================================
   GLOBAL UNIVERSAL FIXES (Apply to Desktop & Mobile)
   ========================================= */

/* =============================================
   SISTEMA TIPOGRÁFICO GLOBAL — COHERENCIA INTER
   Garantiza que TODAS las vistas del estudiante
   usen la misma fuente, tamaño y espaciado.
   ============================================= */

/* Inter como fuente universal del estudiante */
body,
.main-content,
.page-content,
.sidebar-container,
.card,
.card-body,
.card-title,
.card-header,
.btn,
.badge,
.alert,
.nav,
.tab-content,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
label,
input,
select,
textarea,
small {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Escala de encabezados global Desktop */
h1 {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

h3 {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

h4 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

h5 {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
}

h6 {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.45;
}

/* Texto de párrafo y labels */
p,
.text-muted {
  font-size: 0.88rem;
  line-height: 1.6;
}

small,
.small {
  font-size: 0.78rem;
  line-height: 1.5;
}

label {
  font-size: 0.82rem;
  font-weight: 500;
}

/* Tarjetas con diseño coherente */
.card {
  border-radius: 16px !important;
  border: 1px solid rgba(99, 102, 241, 0.09) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.055) !important;
}

.card-header {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1e1b4b;
  background: rgba(248, 250, 252, 0.92) !important;
  border-bottom: 1px solid rgba(99, 102, 241, 0.08) !important;
  border-radius: 16px 16px 0 0 !important;
  padding: 0.65rem 1rem;
}

.card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1e1b4b;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.card-body {
  padding: 1rem;
}

/* Botones uniformes */
.btn {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 600;
  border-radius: 10px;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.22) !important;
  color: #fff !important;
}

.btn-primary:hover {
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.32) !important;
}

.btn-outline-primary {
  border-color: rgba(99, 102, 241, 0.4) !important;
  color: #4f46e5 !important;
}

.btn-outline-primary:hover {
  background: rgba(238, 242, 255, 0.95) !important;
  color: #3730a3 !important;
  border-color: rgba(99, 102, 241, 0.6) !important;
}

/* Badges uniformes */
.badge {
  font-weight: 700;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.2px;
  padding: 0.3em 0.65em;
}

/* Inputs coherentes */
.form-control,
.form-select {
  border-radius: 10px !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  font-size: 0.88rem !important;
  padding: 0.5rem 0.85rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(99, 102, 241, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
  outline: none;
}

/* =============================================
   ESCALADO RESPONSIVO — PANTALLAS PEQUEÑAS
   ============================================= */

/* Escala de headings para pantallas < 768px (tablets) */
@media (max-width: 767.98px) {
  h1 {
    font-size: 1.45rem !important;
  }

  h2 {
    font-size: 1.2rem !important;
  }

  h3 {
    font-size: 1.05rem !important;
  }

  h4 {
    font-size: 0.95rem !important;
  }

  h5 {
    font-size: 0.88rem !important;
  }

  h6 {
    font-size: 0.82rem !important;
  }

  p,
  .text-muted {
    font-size: 0.85rem !important;
  }

  .card-title {
    font-size: 0.95rem !important;
  }

  .card-body {
    padding: 0.8rem !important;
  }

  .btn {
    font-size: 0.82rem !important;
    padding: 0.45rem 0.9rem !important;
  }
}

/* Escala de headings para pantallas < 576px (móviles) */
@media (max-width: 575.98px) {
  h1 {
    font-size: 1.28rem !important;
  }

  h2 {
    font-size: 1.1rem !important;
  }

  h3 {
    font-size: 1rem !important;
  }

  h4 {
    font-size: 0.92rem !important;
  }

  h5 {
    font-size: 0.85rem !important;
  }

  h6 {
    font-size: 0.8rem !important;
  }

  p,
  .text-muted {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
  }

  small,
  .small {
    font-size: 0.75rem !important;
  }

  label {
    font-size: 0.8rem !important;
  }

  .card-title {
    font-size: 0.9rem !important;
  }

  .card-header {
    font-size: 0.82rem !important;
    padding: 0.55rem 0.85rem !important;
  }

  .card-body {
    padding: 0.7rem 0.85rem !important;
  }

  .badge {
    font-size: 0.65rem !important;
  }

  .btn {
    font-size: 0.8rem !important;
    padding: 0.42rem 0.85rem !important;
    border-radius: 8px !important;
  }
}


/* FIX: Prevent text overflow globally unless specifically handled */
.card-body>p,
.alert,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  word-wrap: break-word;
  max-width: 100%;
}

/* Anti-letter-stacking / Anti-column-breakage on UI pills, badges, tabs, chips, buttons, tables */
.badge,
.badge-pill,
.pill,
.chip,
.tab-label,
.tab-badge,
.nav-link,
[class*="badge"],
[class*="chip"],
[class*="pill"]:not(.rounded-pill),
[class*="-tab"],
th,
.stat-val,
.stat-lbl,
.podium-lbl,
.podium-val,
.podium-sub,
.hud-badge,
.game-pill {
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  max-width: 100%;
}

/* FIX: Buttons must wrap words gracefully on mobile to prevent overflowing cards and containers */
.btn,
.btn-sm,
.btn-xs,
.btn-primary-custom,
.btn-duo-candy,
.course-actions .btn,
.action-btn-card {
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  max-width: 100%;
  box-sizing: border-box;
}

/* FIX: Code blocks should handle overflow gracefully everywhere */
pre,
code,
.code-editor {
  white-space: pre-wrap;
  word-break: break-all;
  /* If strict pre is needed, allow scroll */
  max-width: 100%;
}

/* FIX: Tables should never overflow container boundaries */
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* =========================================
   MOBILE-SPECIFIC ADAPTATIONS (< 992px)
   ========================================= */
@media (max-width: 991.98px) {

  /* 1. FIX: Global Overflow and Box Sizing */
  html,
  body {
    overflow-x: hidden !important;
    position: relative;
    width: 100%;
    max-width: 100vw;
  }

  /* 2. SIDEBAR ADAPTATION - Override "display: none" from internal styles */
  #mainSidebar,
  .sidebar-container {
    display: block !important;
    /* Force visibility */
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh !important;
    width: 280px !important;
    z-index: 9999 !important;
    /* Super high Z-index */
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.15) !important;
    background: var(--bg-secondary, #fff) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    overflow-y: auto;
  }

  #mainSidebar.active,
  #mainSidebar.show,
  .sidebar-container.active,
  .sidebar-container.show {
    transform: translateX(0) !important;
  }

  /* FIX: Overlay Z-index just below sidebar */
  .sidebar-overlay {
    z-index: 9998 !important;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
  }

  .sidebar-overlay.show {
    display: block !important;
  }

  /* 3. GHOST SIDEBAR TOGGLE — blindado anti-estiramiento (FOUC):
     el botón vive dentro de <main>; sin min/max/flex fijos hereda
     ancho del contenedor mientras cargan los CSS y se ve estirado. */
  #mobile-sidebar-toggle {
    display: flex !important;
    position: fixed !important;
    top: calc(8px + env(safe-area-inset-top)) !important;
    left: 0 !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px;
    min-height: 36px !important;
    max-height: 36px !important;
    flex: 0 0 36px !important;
    align-self: flex-start !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    background: rgba(79, 70, 229, 0.18) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 0 10px 10px 0;
    box-shadow: 2px 0 12px rgba(79, 70, 229, 0.12) !important;
    border: none !important;
    color: #4f46e5 !important;
    font-size: 0.9rem;
    transition: opacity 0.35s ease, background 0.25s ease, transform 0.15s ease;
    margin-right: 0 !important;
    cursor: pointer;
    z-index: 21050 !important;
    opacity: 0.85;
    padding: 0;
  }

  #mobile-sidebar-toggle.sidebar-btn-dim {
    opacity: 0.13 !important;
    background: rgba(79, 70, 229, 0.06) !important;
    box-shadow: none !important;
  }

  #mobile-sidebar-toggle:active {
    transform: scale(0.92);
    opacity: 1 !important;
    background: rgba(79, 70, 229, 0.32) !important;
  }

  [data-theme="dark"] #mobile-sidebar-toggle {
    background: rgba(99, 102, 241, 0.22) !important;
    color: #818cf8 !important;
    box-shadow: 2px 0 12px rgba(79, 70, 229, 0.18) !important;
  }

  [data-theme="dark"] #mobile-sidebar-toggle.sidebar-btn-dim {
    opacity: 0.1 !important;
    background: rgba(79, 70, 229, 0.04) !important;
    box-shadow: none !important;
  }

  /* Edge swipe zone */
  #sidebar-edge-zone {
    position: fixed;
    left: 0;
    top: 0;
    width: 16px;
    height: 100%;
    z-index: 21049;
    background: transparent;
  }

  /* 4. CONTENT & LAYOUT (Full Edge-to-Edge APK Design) */
  .main-content {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: calc(env(safe-area-inset-top, 0px) + 48px) 4px calc(env(safe-area-inset-bottom, 0px) + 68px) 4px !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    animation: premiumFadeInOnly 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }

  /* Prevent main content squishing by the right sidebar on mobile */
  .main-content.sidebar-open {
    margin-right: 0 !important;
  }

  /* Allow right drawer to overlay content nicely */
  .contextual-nav-container {
    max-width: 85vw !important;
  }

  /* Buttons must allow natural word wrapping and never protrude out of card boundaries */
  .btn,
  .btn * {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    max-width: 100%;
  }

  /* Single-line badges/chips: keep on one line but clip with ellipsis if exceeding container width */
  .badge,
  .badge *,
  .hud-level-chip,
  .hud-kpi-chip,
  .theme-toggle-hud-btn,
  .development-hud-toggle,
  .exercise-micro-chip,
  .exercise-micro-chip *,
  .chip-label,
  .study-pill-label,
  .flow-btn-label,
  .bottom-nav-label,
  .comp-action-btn,
  .btn-study-mode-pill,
  .btn-minds-zoom,
  .rk-stat-badge {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    max-width: 100%;
    text-overflow: ellipsis;
  }

.content-header {
  padding: 1rem !important;
  position: static !important;
  top: auto !important;
  flex-direction: row !important;
  /* Keep aligned row for button + title */
  align-items: center !important;
  gap: 0 !important;
  flex-wrap: wrap;
  /* Allow wrapping if title is long */
}

/* 5. GRID & COMPONENT STABILIZATION */
/* Force Row Behavior: Reset margins */
.row {
  margin-left: -10px !important;
  margin-right: -10px !important;
  width: auto !important;
}

/* Force Columns to Stack nicely */
.row>[class*="col-"] {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  margin-bottom: 15px !important;
}

.row.mobile-two-columns,
.main-content .row.mobile-two-columns,
.stats-row,
.course-stats-row,
.activity-stats-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin-left: -6px !important;
  margin-right: -6px !important;
  margin-top: 16px !important;
  margin-bottom: 12px !important;
}

.row.mobile-two-columns>div,
.row.mobile-two-columns>[class*="col-"],
.main-content .row.mobile-two-columns>div,
.main-content .row.mobile-two-columns>[class*="col-"],
.stats-row>div,
.stats-row>[class*="col-"],
.main-content .stats-row>div,
.main-content .stats-row>[class*="col-"],
.course-stats-row>div,
.course-stats-row>[class*="col-"],
.activity-stats-row>div,
.activity-stats-row>[class*="col-"] {
  flex: 1 1 calc(50% - 8px) !important;
  max-width: 100% !important;
  width: auto !important;
  min-width: 0 !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
  margin-bottom: 12px !important;
}

.main-content .row.mobile-two-columns>[class*="col-"]>* {
  height: 100%;
}

.main-content .row>[class*="col-"]>.card,
.main-content .row>[class*="col-"]>.course-card,
.main-content .row>[class*="col-"]>.lesson-card,
.main-content .row>[class*="col-"]>.activity-card,
.main-content .row>[class*="col-"]>.stat-card,
.main-content .row>[class*="col-"]>.competencia-card {
  height: 100%;
  margin-bottom: 0 !important;
}

/* Competencia Card Mobile Fixes - Auto Sync */
.competencia-card .card-body>div:first-child {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
}

.competencia-card .card-title {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.competencia-card .d-flex.align-items-center.mb-3 {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 8px !important;
}

.competencia-card .d-flex.align-items-center.mb-3 .progress-circle {
  margin-right: 0 !important;
  margin-bottom: 4px !important;
}

.competencia-card .d-flex.align-items-center.mb-3 .flex-grow-1 {
  width: 100% !important;
}

.competencia-card .d-flex.align-items-center.mb-3 .flex-grow-1 small {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
}

@media (max-width: 420px) {

  .row.mobile-two-columns>[class*="col-"],
  .main-content .row.mobile-two-columns>[class*="col-"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  .main-content .row.mobile-two-columns>[class*="col-"]>* {
    min-width: 0;
  }

  .main-content .row.mobile-two-columns .card,
  .main-content .row.mobile-two-columns .card-body,
  .main-content .row.mobile-two-columns p,
  .main-content .row.mobile-two-columns span,
  .main-content .row.mobile-two-columns h4,
  .main-content .row.mobile-two-columns h5,
  .main-content .row.mobile-two-columns h6 {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.22 !important;
  }

  .main-content .row.mobile-two-columns .card-title,
  .main-content .row.mobile-two-columns h5,
  .main-content .row.mobile-two-columns .small,
  .main-content .row.mobile-two-columns .text-muted {
    font-size: 0.74rem !important;
  }

  .main-content .row.mobile-two-columns>[class*="col-"]>* {
    min-width: 0;
  }

  .main-content .row.mobile-two-columns .card,
  .main-content .row.mobile-two-columns .card-body,
  .main-content .row.mobile-two-columns p,
  .main-content .row.mobile-two-columns span,
  .main-content .row.mobile-two-columns h4,
  .main-content .row.mobile-two-columns h5,
  .main-content .row.mobile-two-columns h6 {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.22 !important;
  }

  .main-content .row.mobile-two-columns .card-title,
  .main-content .row.mobile-two-columns h5,
  .main-content .row.mobile-two-columns .small,
  .main-content .row.mobile-two-columns .text-muted {
    font-size: 0.74rem !important;
  }

  .stats-row>[class*="col-"] {
    flex: 1 1 calc(50% - 8px) !important;
    max-width: 100% !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

@media (max-width: 991.98px) {
/* Text Wrapping for Mobile: Wrap on spaces, NEVER break letters into vertical columns */
.card,
.card-body,
.alert,
p,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6 {
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: manual;
}

/* Exception: Small grid columns inside cards (stats/icons) might need to stay side-by-side */
/* We can use specific utility classes if needed, but for "Universal" we assume stacking is safer */

/* FIX: Navigation Tabs (often overflow) */
.nav-tabs {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid #dee2e6;
}

.nav-tabs .nav-link {
  white-space: nowrap !important;
}

/* 6. CARD & TEXT SCALING */
.card {
  margin-bottom: 15px !important;
  height: auto !important;
}

h1,
.h1 {
  font-size: 1.5rem !important;
}

h2,
.h2 {
  font-size: 1.35rem !important;
}

h3,
.h3 {
  font-size: 1.2rem !important;
}

.card-body {
  padding: 1rem !important;
}

/* 7. TABLE ADAPTATION - IMPROVED */
.table-responsive,
table {
  display: block !important;
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
}

/* Table styling on mobile: Headers NEVER wrap into vertical letter stacks */
td {
  white-space: normal !important;
  min-width: 90px;
  padding: 0.5rem !important;
  font-size: 0.88rem !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

th {
  white-space: nowrap !important;
  min-width: 80px;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.82rem !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Compact buttons in tables */
.table .btn {
  padding: 0.25rem 0.5rem !important;
  font-size: 0.8rem !important;
}

/* 8. UTILITIES */
.d-none-mobile {
  display: none !important;
}

.w-100-mobile {
  width: 100% !important;
}

/* 9. COMPACTACIÓN GLOBAL AGRESIVA PARA BLOQUES GRANDES */
/* 9.b Estadísticas en fila adaptativa */
.stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stats-row>[class*="col-"] {
  flex: 1 1 calc(50% - 8px) !important;
  max-width: 100% !important;
  width: auto !important;
  min-width: 0 !important;
}

.card,
.alert,
.list-group-item,
.accordion-item,
.content-header,
.course-card,
.lesson-card,
.activity-card,
.stat-card {
  border-radius: 10px !important;
}

.card-body,
.alert,
.list-group-item,
.accordion-body,
.content-header {
  padding: 0.7rem !important;
}

.card-title,
.h5,
h5 {
  font-size: 0.98rem !important;
  margin-bottom: 0.4rem !important;
}

.card-text,
.small,
small,
.text-muted {
  font-size: 0.78rem !important;
  line-height: 1.28 !important;
}

.badge {
  font-size: 0.7rem !important;
  padding: 0.24rem 0.42rem !important;
}

.btn,
.btn-sm,
.btn-lg {
  min-height: 36px !important;
  padding: 0.34rem 0.62rem !important;
  font-size: 0.8rem !important;
  border-radius: 8px !important;
}

.progress {
  height: 6px !important;
  margin-bottom: 0.55rem !important;
}

/* 10. BLOQUES COLAPSABLES AUTOMÁTICOS PARA MÓVIL */
.mobile-collapsible {
  position: relative;
  overflow: hidden;
  transition: max-height 0.2s ease;
}

.mobile-collapsible.is-collapsed {
  max-height: 300px !important;
}

.mobile-collapsible.is-collapsed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.96));
  pointer-events: none;
}

.mobile-collapsible-toggle {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: 0.5rem;
  border: 1px solid rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(219, 234, 254, 0.92));
  color: #1d4ed8;
  border-radius: 999px;
  min-height: 38px;
  font-size: 0.8rem;
  font-weight: 800;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.08);
  letter-spacing: 0.2px;
}

.mobile-collapsible-toggle:active {
  transform: translateY(1px);
}
}

/* ==========================================================================
   DESKTOP GRID & MULTI-COLUMN ARCHITECTURE SHIELD (>= 992px)
   Garantiza que en pantallas de computador los cursos, bibliotecas,
   estadísticas y componentes se organicen en múltiples columnas (3-4 col),
   alineados de forma natural y elegante, nunca apilados al 100% como celular.
   ========================================================================== */
@media (min-width: 992px) {
  .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
    width: auto !important;
  }

  .row > [class*="col-"] {
    flex-shrink: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-bottom: 20px !important;
  }

  .row > .col-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .row > .col-lg-6,
  .row > .col-md-6:not([class*="col-lg-"]):not([class*="col-xl-"]) {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }

  .row > .col-lg-4,
  .row > .col-xl-4 {
    flex: 0 0 33.33333333% !important;
    max-width: 33.33333333% !important;
    width: 33.33333333% !important;
  }

  .row > .col-lg-3,
  .row > .col-xl-3,
  .row > .col-xxl-3 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
  }

  .row > .col-lg-8 {
    flex: 0 0 66.66666667% !important;
    max-width: 66.66666667% !important;
    width: 66.66666667% !important;
  }

  .row > .col-lg-9 {
    flex: 0 0 75% !important;
    max-width: 75% !important;
    width: 75% !important;
  }

  /* Stats row en escritorio: hasta 4 columnas elegantes */
  .stats-row > [class*="col-"],
  .course-stats-row > [class*="col-"],
  .activity-stats-row > [class*="col-"] {
    flex: 1 1 20% !important;
    max-width: 25% !important;
    width: auto !important;
    min-width: 180px !important;
  }

  /* Pestañas de navegación naturales en escritorio */
  .nav-tabs {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }
}

@media (max-width: 575.98px) {

  .row.mobile-two-columns,
  .main-content .row.mobile-two-columns,
  .stats-row,
  .course-stats-row,
  .activity-stats-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }

  .activity-stats-row>[class*="col-"],
  .stats-row>[class*="col-"],
  .course-stats-row>[class*="col-"],
  .row.mobile-two-columns>[class*="col-"],
  .main-content .row.mobile-two-columns>[class*="col-"],
  .activity-stats-row>div,
  .stats-row>div,
  .course-stats-row>div,
  .row.mobile-two-columns>div,
  .main-content .row.mobile-two-columns>div {
    flex: 1 1 calc(50% - 8px) !important;
    max-width: 100% !important;
    width: auto !important;
    min-width: 0 !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-bottom: 8px !important;
  }
}

@media (max-width: 575.98px) {

  .row .card .card-body.text-center,
  .row .card .card-body.stat-action,
  .row .card .card-body.metric-body,
  .metric-card .card-body {
    padding: 0.45rem 0.4rem !important;
    min-height: 64px;
  }

  .row .card .card-body.text-center h1,
  .row .card .card-body.text-center h2,
  .row .card .card-body.text-center h3,
  .row .card .card-body.text-center h4,
  .row .card .card-body.stat-action h1,
  .row .card .card-body.stat-action h2,
  .row .card .card-body.stat-action h3,
  .row .card .card-body.stat-action h4,
  .metric-card .card-body h1,
  .metric-card .card-body h2,
  .metric-card .card-body h3,
  .metric-card .card-body h4 {
    font-size: 0.95rem !important;
    line-height: 1.05 !important;
    margin-bottom: 0.1rem !important;
  }

  .row .card .card-body.text-center p,
  .row .card .card-body.stat-action p,
  .metric-card .card-body p,
  .metric-card .card-body small {
    font-size: 0.6rem !important;
    line-height: 1.05 !important;
    margin-bottom: 0 !important;
  }

  .row .card .card-body.text-center i,
  .row .card .card-body.stat-action i,
  .metric-card .card-body i {
    font-size: 0.95rem !important;
    margin-bottom: 0.15rem !important;
  }

  .row .card.border-primary,
  .row .card.border-success,
  .row .card.border-info,
  .row .card.border-warning,
  .row .card.border-danger,
  .row .card.border-secondary {
    border-radius: 12px !important;
  }
}

@media (max-width: 360px) {

  .main-content,
  .main-content * {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }

  .main-content,
  .main-content .card,
  .main-content .card-body,
  .main-content .alert,
  .main-content p,
  .main-content span,
  .main-content h1,
  .main-content h2,
  .main-content h3,
  .main-content h4,
  .main-content h5,
  .main-content h6,
  .main-content a,
  .main-content button,
  .main-content label,
  .main-content li {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  .main-content .table td,
  .main-content .table th {
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .main-content .form-control,
  .main-content .subscription-bell-message,
  .main-content .alert {
    min-width: 0 !important;
    max-width: 100% !important;
    inline-size: auto !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  /* Anti-Letter-Stacking: Botones, chips y badges conservan texto horizontal sin desarmarse en columnas */
  .main-content .btn:not(.exercise-option):not(.option-item):not(.card-option):not(.true-false-option),
  .main-content button:not(.exercise-option):not(.option-item):not(.card-option):not(.true-false-option),
  .main-content .badge,
  .main-content .chip-item,
  .main-content .exercise-micro-chip,
  .main-content .nav-link,
  .main-content .study-pill-label,
  .main-content .flow-btn-label,
  .main-content .bottom-nav-label {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}

/* DESKTOP DEFAULT */
@media (min-width: 992px) {
  #mobile-sidebar-toggle {
    display: none !important;
  }

  .sidebar-overlay {
    display: none !important;
  }
}

/* Ensure Bootstrap modals and other overlays appear above the sidebar overlay */
.modal {
  z-index: 20050 !important;
}

/* Universal fix to prevent letters from stacking vertically inside floating modals, alerts, toasts, and HUD tips */
.modal *,
.alert *,
.toast *,
.development-hud-tip *,
.exit-modal *,
.celebration-modal *,
#gamification-overlay-enhanced *,
div[id^="hudMissionToast_"] *,
div[id^="hudCompetitionToast_"] * {
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* Ensure close buttons never take full width or stretch inside modals/alerts/toasts */
.modal .btn-close,
.modal button.close,
.alert .btn-close,
.toast .btn-close,
.development-hud-tip .hud-tip-close-btn,
.exit-modal button,
div[id^="hudMissionToast_"] button,
div[id^="hudCompetitionToast_"] button {
  width: auto !important;
  min-width: 0 !important;
  flex-shrink: 0 !important;
}

.modal-backdrop,
.modal-overlay,
.overlay-shade {
  z-index: 20040 !important;
}

/* Custom educational overlays & anti-letter-stacking layout */
.educational-overlay {
  z-index: 99999 !important;
  align-items: center !important;
  justify-content: center !important;
}

.educational-overlay.show,
.educational-overlay[style*="display: flex"] {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 99999 !important;
}

.educational-overlay:not(.show):not([style*="display: flex"]) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.educational-modal {
  z-index: 30000 !important;
  width: min(92vw, 1160px) !important;
  max-width: 1160px !important;
  height: min(86vh, 780px) !important;
  max-height: min(86vh, 780px) !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 18px !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.45) !important;
  overflow: hidden !important;
}

.educational-modal.is-fullscreen {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.educational-overlay.is-fullscreen,
.educational-overlay:has(.educational-modal.is-fullscreen) {
  padding: 0 !important;
}

@media (max-width: 768px) {
  .educational-overlay {
    padding: 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
  }

  .educational-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0 !important;
  }
}

.educational-modal-title {
  font-size: clamp(0.98rem, 3vw, 1.2rem) !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.35 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  min-width: 0 !important;
}

.content-item-title-link {
  font-size: clamp(0.9rem, 2.6vw, 1rem) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  text-align: left !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
}

.educational-modal-body {
  padding: 10px 14px !important;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  color: #334155 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.educational-modal-body * {
  max-width: 100% !important;
  box-sizing: border-box !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.educational-modal-body h1,
.educational-modal-body h2,
.educational-modal-body h3,
.educational-modal-body h4 {
  font-size: clamp(0.98rem, 2.8vw, 1.2rem) !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.35 !important;
  margin: 0.5rem 0 !important;
}

.educational-modal-body p {
  font-size: clamp(0.85rem, 2.3vw, 0.94rem) !important;
  line-height: 1.55 !important;
  color: #334155 !important;
  margin-bottom: 0.75rem !important;
}

.educational-fullscreen {
  z-index: 31000 !important;
}

/* Make sure sidebar overlay remains clickable to close sidebar but never covers modals */
.sidebar-overlay {
  pointer-events: auto !important;
}

/* =========================================
   BLOQUES CLICABLES (TODOS LOS DISPOSITIVOS)
   ========================================= */
.universal-action-card {
  cursor: pointer;
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease;
}

.universal-action-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.09);
}

.universal-action-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary-color, #4361ee) 55%, transparent);
  outline-offset: 2px;
}

/* =========================================
   PRIORITY COMPACT LAYER (MOBILE)
   Refuerza compactación cuando el layout inline sobreescribe tamaños.
   ========================================= */
@media (max-width: 991.98px) {
  .main-content {
    padding: 10px !important;
  }

  .main-content .card,
  .main-content .alert,
  .main-content .list-group-item,
  .main-content .accordion-item,
  .main-content .content-header,
  .main-content .course-card,
  .main-content .lesson-card,
  .main-content .activity-card,
  .main-content [class*="card"],
  .main-content [class*="block"] {
    border-radius: 9px !important;
    padding: 0.55rem !important;
  }

  .main-content .card-body,
  .main-content .accordion-body,
  .main-content .content-header,
  .main-content [class*="body"] {
    padding: 0.55rem !important;
  }

  .main-content h1,
  .main-content .h1 {
    font-size: 1.18rem !important;
  }

  .main-content h2,
  .main-content .h2 {
    font-size: 1.07rem !important;
  }

  /* override large page / section titles */
  .main-content .content-title,
  .main-content .content-subtitle {
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
  }

  .main-content h3,
  .main-content .h3,
  .main-content h4,
  .main-content .h4,
  .main-content h5,
  .main-content .h5 {
    font-size: 0.9rem !important;
    line-height: 1.28 !important;
    margin-bottom: 0.3rem !important;
  }

  .main-content p,
  .main-content li,
  .main-content span,
  .main-content small,
  .main-content .small,
  .main-content .text-muted,
  .main-content .card-text,
  .main-content [class*="subtitle"],
  .main-content [class*="description"] {
    font-size: 0.76rem !important;
    line-height: 1.3 !important;
  }

  .main-content .badge {
    font-size: 0.66rem !important;
    padding: 0.2rem 0.36rem !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    display: inline-block !important;
    text-align: center;
  }

  .main-content .btn,
  .main-content .btn-sm,
  .main-content .btn-lg {
    min-height: 34px !important;
    padding: 0.28rem 0.54rem !important;
    font-size: 0.76rem !important;
  }

  .main-content .progress {
    height: 5px !important;
    margin-bottom: 0.45rem !important;
  }
}

/* =========================================
   LOW RESOURCE MODE (UNIVERSAL)
   Se activa por JS en dispositivos con poca RAM/CPU/save-data.
   ========================================= */
html.low-resource-mode,
body.low-resource-mode {
  scroll-behavior: auto !important;
}

.low-resource-mode .sidebar-overlay {
  backdrop-filter: none !important;
}

.low-resource-mode video,
.low-resource-mode iframe,
.low-resource-mode img {
  content-visibility: auto;
}

/* =========================================
   UNIVERSAL ADAPTABILITY & SCREEN RATIO FIXES
   Specifically targeting very narrow screens (width <= 480px) and vertical rectangles
   ========================================= */

@media (max-width: 480px) {

  /* Dynamic font scaling using clamp for key layouts */
  body,
  p,
  span,
  li,
  a,
  td,
  th {
    font-size: clamp(0.72rem, 3.2vw, 0.85rem) !important;
    line-height: 1.3 !important;
  }

  h1,
  .h1 {
    font-size: clamp(1.15rem, 5vw, 1.4rem) !important;
  }

  h2,
  .h2 {
    font-size: clamp(1.05rem, 4.5vw, 1.25rem) !important;
  }

  h3,
  .h3,
  h4,
  .h4,
  h5,
  .h5 {
    font-size: clamp(0.9rem, 4vw, 1.1rem) !important;
  }

  /* Fluid and compressed padding/margin system for cards and layouts */
  .card,
  .alert,
  .list-group-item,
  .accordion-item,
  .content-header,
  .card-body {
    padding: clamp(0.45rem, 2vw, 0.75rem) !important;
    margin-bottom: clamp(0.35rem, 1.5vw, 0.75rem) !important;
  }

  /* Automatically stack buttons, dropdowns, and inputs in flex rows on mobile/tablets to prevent squeezing */
  @media (max-width: 767.98px) {
    .main-content .btn-group:not(.keep-row):not(.auto-chip-row) {
      flex-direction: column !important;
      align-items: stretch !important;
      width: 100% !important;
      gap: 10px !important;
    }

    .main-content .d-flex:not(.catalog-actions):not(.course-actions):not(.catalog-hero-card):not(.actions-row-top):not(.actions-row-bottom):not(.actions-button-stack):not(.card-actions-zone):not(.library-filters):not(.library-filter-form):not(.library-filter-actions):not(.library-card-actions):not(.modal *):not(.alert *):not(.toast *):not(.development-hud-tip *):not(div[id^="hudMissionToast_"] *):not(div[id^="hudCompetitionToast_"] *):not(.keep-row):not(.card-tools):not(.study-assistant-panel *):not(.development-hud *):not(.development-hud-panel *):not(.auto-chip-row):not(.flex-wrap):not([class*="flex-wrap"]):not([class*="game-"]):not(#gameChoicesGrid):not(.game-choices-grid):not(.trivia-options-grid):has(> .btn),
    .main-content .d-flex:not(.catalog-actions):not(.course-actions):not(.catalog-hero-card):not(.actions-row-top):not(.actions-row-bottom):not(.actions-button-stack):not(.card-actions-zone):not(.library-filters):not(.library-filter-form):not(.library-filter-actions):not(.library-card-actions):not(.modal *):not(.alert *):not(.toast *):not(.development-hud-tip *):not(div[id^="hudMissionToast_"] *):not(div[id^="hudCompetitionToast_"] *):not(.keep-row):not(.card-tools):not(.study-assistant-panel *):not(.development-hud *):not(.development-hud-panel *):not(.auto-chip-row):not(.flex-wrap):not([class*="flex-wrap"]):not([class*="game-"]):not(#gameChoicesGrid):not(.game-choices-grid):not(.trivia-options-grid):has(> button),
    .main-content .d-flex:not(.catalog-actions):not(.course-actions):not(.catalog-hero-card):not(.actions-row-top):not(.actions-row-bottom):not(.actions-button-stack):not(.card-actions-zone):not(.library-filters):not(.library-filter-form):not(.library-filter-actions):not(.library-card-actions):not(.modal *):not(.alert *):not(.toast *):not(.development-hud-tip *):not(div[id^="hudMissionToast_"] *):not(div[id^="hudCompetitionToast_"] *):not(.keep-row):not(.card-tools):not(.study-assistant-panel *):not(.development-hud *):not(.development-hud-panel *):not(.auto-chip-row):not(.flex-wrap):not([class*="flex-wrap"]):not([class*="game-"]):not(#gameChoicesGrid):not(.game-choices-grid):not(.trivia-options-grid):has(> select),
    .main-content .d-flex:not(.catalog-actions):not(.course-actions):not(.catalog-hero-card):not(.actions-row-top):not(.actions-row-bottom):not(.actions-button-stack):not(.card-actions-zone):not(.library-filters):not(.library-filter-form):not(.library-filter-actions):not(.library-card-actions):not(.modal *):not(.alert *):not(.toast *):not(.development-hud-tip *):not(div[id^="hudMissionToast_"] *):not(div[id^="hudCompetitionToast_"] *):not(.keep-row):not(.card-tools):not(.study-assistant-panel *):not(.development-hud *):not(.development-hud-panel *):not(.auto-chip-row):not(.flex-wrap):not([class*="flex-wrap"]):not([class*="game-"]):not(#gameChoicesGrid):not(.game-choices-grid):not(.trivia-options-grid):has(> .form-select),
    .main-content .d-flex:not(.catalog-actions):not(.course-actions):not(.catalog-hero-card):not(.actions-row-top):not(.actions-row-bottom):not(.actions-button-stack):not(.card-actions-zone):not(.library-filters):not(.library-filter-form):not(.library-filter-actions):not(.library-card-actions):not(.modal *):not(.alert *):not(.toast *):not(.development-hud-tip *):not(div[id^="hudMissionToast_"] *):not(div[id^="hudCompetitionToast_"] *):not(.keep-row):not(.card-tools):not(.study-assistant-panel *):not(.development-hud *):not(.development-hud-panel *):not(.auto-chip-row):not(.flex-wrap):not([class*="flex-wrap"]):not([class*="game-"]):not(#gameChoicesGrid):not(.game-choices-grid):not(.trivia-options-grid):has(> .form-control) {
      flex-direction: column !important;
      align-items: stretch !important;
      width: 100% !important;
      gap: 10px !important;
    }

    .main-content .d-flex:not(.catalog-actions):not(.course-actions):not(.catalog-hero-card):not(.actions-row-top):not(.actions-row-bottom):not(.actions-button-stack):not(.card-actions-zone):not(.library-filters):not(.library-filter-form):not(.library-filter-actions):not(.library-card-actions):not(.modal *):not(.alert *):not(.toast *):not(.development-hud-tip *):not(div[id^="hudMissionToast_"] *):not(div[id^="hudCompetitionToast_"] *):not(.keep-row):not(.card-tools):not(.study-assistant-panel *):not(.development-hud *):not(.development-hud-panel *):not(.auto-chip-row):not(.flex-wrap):not([class*="flex-wrap"]):not([class*="game-"]):not(#gameChoicesGrid):not(.game-choices-grid):not(.trivia-options-grid):not(.arcade-top-navbar):not(.game-standalone-header):not(.minds-mode-segmented-control):not(.minds-mode-segmented-control *):not(.arcade-top-navbar *):has(> .btn)>*,
    .main-content .d-flex:not(.catalog-actions):not(.course-actions):not(.catalog-hero-card):not(.actions-row-top):not(.actions-row-bottom):not(.actions-button-stack):not(.card-actions-zone):not(.library-filters):not(.library-filter-form):not(.library-filter-actions):not(.library-card-actions):not(.modal *):not(.alert *):not(.toast *):not(.development-hud-tip *):not(div[id^="hudMissionToast_"] *):not(div[id^="hudCompetitionToast_"] *):not(.keep-row):not(.card-tools):not(.study-assistant-panel *):not(.development-hud *):not(.development-hud-panel *):not(.auto-chip-row):not(.flex-wrap):not([class*="flex-wrap"]):not([class*="game-"]):not(#gameChoicesGrid):not(.game-choices-grid):not(.trivia-options-grid):not(.arcade-top-navbar):not(.game-standalone-header):not(.minds-mode-segmented-control):not(.minds-mode-segmented-control *):not(.arcade-top-navbar *):has(> button)>*,
    .main-content .d-flex:not(.catalog-actions):not(.course-actions):not(.catalog-hero-card):not(.actions-row-top):not(.actions-row-bottom):not(.actions-button-stack):not(.card-actions-zone):not(.library-filters):not(.library-filter-form):not(.library-filter-actions):not(.library-card-actions):not(.modal *):not(.alert *):not(.toast *):not(.development-hud-tip *):not(div[id^="hudMissionToast_"] *):not(div[id^="hudCompetitionToast_"] *):not(.keep-row):not(.card-tools):not(.study-assistant-panel *):not(.development-hud *):not(.development-hud-panel *):not(.auto-chip-row):not(.flex-wrap):not([class*="flex-wrap"]):not([class*="game-"]):not(#gameChoicesGrid):not(.game-choices-grid):not(.trivia-options-grid):not(.arcade-top-navbar):not(.game-standalone-header):not(.minds-mode-segmented-control):not(.minds-mode-segmented-control *):not(.arcade-top-navbar *):has(> select)>*,
    .main-content .d-flex:not(.catalog-actions):not(.course-actions):not(.catalog-hero-card):not(.actions-row-top):not(.actions-row-bottom):not(.actions-button-stack):not(.card-actions-zone):not(.library-filters):not(.library-filter-form):not(.library-filter-actions):not(.library-card-actions):not(.modal *):not(.alert *):not(.toast *):not(.development-hud-tip *):not(div[id^="hudMissionToast_"] *):not(div[id^="hudCompetitionToast_"] *):not(.keep-row):not(.card-tools):not(.study-assistant-panel *):not(.development-hud *):not(.development-hud-panel *):not(.auto-chip-row):not(.flex-wrap):not([class*="flex-wrap"]):not([class*="game-"]):not(#gameChoicesGrid):not(.game-choices-grid):not(.trivia-options-grid):not(.arcade-top-navbar):not(.game-standalone-header):not(.minds-mode-segmented-control):not(.minds-mode-segmented-control *):not(.arcade-top-navbar *):has(> .form-select)>*,
    .main-content .d-flex:not(.catalog-actions):not(.course-actions):not(.catalog-hero-card):not(.actions-row-top):not(.actions-row-bottom):not(.actions-button-stack):not(.card-actions-zone):not(.library-filters):not(.library-filter-form):not(.library-filter-actions):not(.library-card-actions):not(.modal *):not(.alert *):not(.toast *):not(.development-hud-tip *):not(div[id^="hudMissionToast_"] *):not(div[id^="hudCompetitionToast_"] *):not(.keep-row):not(.card-tools):not(.study-assistant-panel *):not(.development-hud *):not(.development-hud-panel *):not(.auto-chip-row):not(.flex-wrap):not([class*="flex-wrap"]):not([class*="game-"]):not(#gameChoicesGrid):not(.game-choices-grid):not(.trivia-options-grid):not(.arcade-top-navbar):not(.game-standalone-header):not(.minds-mode-segmented-control):not(.minds-mode-segmented-control *):not(.arcade-top-navbar *):has(> .form-control)>* {
      width: 100% !important;
      min-width: 0 !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
  }

  /* Force buttons to adjust beautifully to their stacked container (excluding companion hint, games, and micro-chip rail buttons) */
  .main-content .btn:not(.catalog-actions *):not(.course-actions *):not(.catalog-hero-card *):not(.actions-row-top *):not(.actions-row-bottom *):not(.actions-button-stack *):not(.card-actions-zone *):not(.library-filters *):not(.library-filter-form *):not(.library-filter-actions *):not(.library-card-actions *):not(.dashboard-top-btn):not(.auto-chip-row *):not(.auto-chip-btn):not(.flex-wrap > *):not(.flex-wrap *):not(.btn-sm):not(.btn-close):not(.btn-close-white):not(.modal *):not(.alert *):not(.toast *):not(.development-hud-tip *):not(div[id^="hudMissionToast_"] *):not(div[id^="hudCompetitionToast_"] *):not(.card-tools *):not(.study-assistant-panel *):not(.development-hud *):not(.development-hud-panel *):not(.close):not(.duo-char-hint-btn):not(#btnCharHintTrigger):not(.btn-study-mode-pill):not(.exercise-micro-chip):not(.game-choice-btn):not(.game-reaction-btn):not(.neuro-memory-grid *):not(#gameChoicesGrid *):not(.game-choices-grid *):not(.trivia-options-grid *):not(.btn-mode-tab):not(.minds-mode-segmented-control *):not(.game-standalone-header *):not(.arcade-top-navbar *),
  .main-content button:not(.catalog-actions *):not(.course-actions *):not(.catalog-hero-card *):not(.actions-row-top *):not(.actions-row-bottom *):not(.actions-button-stack *):not(.card-actions-zone *):not(.library-filters *):not(.library-filter-form *):not(.library-filter-actions *):not(.library-card-actions *):not(.dashboard-top-btn):not(.auto-chip-row *):not(.auto-chip-btn):not(.flex-wrap > *):not(.flex-wrap *):not(.navbar-toggler):not(.btn-close):not(.btn-close-white):not(.modal *):not(.alert *):not(.toast *):not(.development-hud-tip *):not(div[id^="hudMissionToast_"] *):not(div[id^="hudCompetitionToast_"] *):not(.mobile-collapsible-toggle):not(.btn-sm):not(.card-tools *):not(.study-assistant-panel *):not(.development-hud *):not(.development-hud-panel *):not(.close):not(.duo-char-hint-btn):not(#btnCharHintTrigger):not(.btn-study-mode-pill):not(.exercise-micro-chip):not(.game-choice-btn):not(.game-reaction-btn):not(.neuro-memory-grid *):not(#gameChoicesGrid *):not(.game-choices-grid *):not(.trivia-options-grid *):not(.btn-mode-tab):not(.minds-mode-segmented-control *):not(.game-standalone-header *):not(.arcade-top-navbar *) {
    width: 100% !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    min-height: 38px !important;
    padding: 0.35rem 0.65rem !important;
    font-size: clamp(0.72rem, 3vw, 0.82rem) !important;
  }

  /* Handle icon alignment in stacked buttons */
  .main-content .btn:not(.duo-char-hint-btn):not(#btnCharHintTrigger):not(.btn-study-mode-pill):not(.exercise-micro-chip):not(.btn-mode-tab):not(.minds-mode-segmented-control *):not(.game-standalone-header *):not(.arcade-top-navbar *) i,
  .main-content button:not(.duo-char-hint-btn):not(#btnCharHintTrigger):not(.btn-study-mode-pill):not(.exercise-micro-chip):not(.btn-mode-tab):not(.minds-mode-segmented-control *):not(.game-standalone-header *):not(.arcade-top-navbar *) i {
    margin-right: 6px !important;
    font-size: clamp(0.8rem, 3.5vw, 0.95rem) !important;
  }

  /* Prevent vertical letter-wrapping in button labels */
  .btn:not(.duo-char-hint-btn):not(#btnCharHintTrigger):not(.btn-study-mode-pill):not(.exercise-micro-chip):not(.btn-mode-tab):not(.minds-mode-segmented-control *):not(.game-standalone-header *):not(.arcade-top-navbar *),
  button:not(.duo-char-hint-btn):not(#btnCharHintTrigger):not(.btn-study-mode-pill):not(.exercise-micro-chip):not(.btn-mode-tab):not(.minds-mode-segmented-control *):not(.game-standalone-header *):not(.arcade-top-navbar *) {
    letter-spacing: 0.2px !important;
    word-spacing: 1px !important;
  }

  /* Keep companion micro-hint button miniature in avatar corner on all mobile screens */
  .main-content .duo-char-hint-btn,
  .main-content #btnCharHintTrigger {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    top: -3px !important;
    right: -3px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    border: 1.5px solid #ffffff !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  }

  .main-content .duo-char-hint-btn i,
  .main-content #btnCharHintTrigger i {
    font-size: 8px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
  }

  /* Shrink margins and paddings for outer layouts so content fits inside narrow viewports */
  .main-content {
    padding: 6px !important;
  }
}

/* Extra support for extremely thin/vertical screens (width <= 360px) */
@media (max-width: 360px) {

  body,
  p,
  span,
  li,
  a,
  td,
  th {
    font-size: clamp(0.68rem, 3vw, 0.8rem) !important;
  }

  .main-content .btn:not(.duo-char-hint-btn):not(#btnCharHintTrigger):not(.btn-study-mode-pill):not(.exercise-micro-chip):not(.btn-mode-tab):not(.minds-mode-segmented-control *):not(.game-standalone-header *):not(.arcade-top-navbar *),
  .main-content button:not(.navbar-toggler):not(.duo-char-hint-btn):not(#btnCharHintTrigger):not(.btn-study-mode-pill):not(.exercise-micro-chip):not(.game-choice-btn):not(.game-reaction-btn):not(.neuro-memory-grid *):not(.btn-mode-tab):not(.minds-mode-segmented-control *):not(.game-standalone-header *):not(.arcade-top-navbar *) {
    min-height: 34px !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.72rem !important;
  }

  /* Compact headers and title spaces */
  .content-header {
    padding: 4px !important;
    margin-bottom: 8px !important;
  }

  /* Shrink card headers/titles */
  .card-header,
  .card-title {
    padding: 6px 8px !important;
    font-size: 0.85rem !important;
  }
}

/* =========================================
   UNIVERSAL STATS GRID MOBILE ADJUSTMENTS
   Prevents stats cards from stacking to full-width row-by-row on mobile screens,
   allowing them to remain side-by-side (2 columns) with dynamically scaled fonts.
   ========================================= */
@media (max-width: 768px) {

  .stats-grid,
  .main-content .stats-grid,
  .results-dashboard .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .stats-grid .stat-card,
  .stats-grid [class*="stat-card"],
  .stats-grid .card,
  .main-content .stats-grid .stat-card,
  .results-dashboard .stats-grid .stat-card {
    padding: clamp(0.6rem, 2.5vw, 0.95rem) !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .stats-grid .stat-value,
  .stats-grid [class*="stat-value"],
  .main-content .stats-grid .stat-value {
    font-size: clamp(1.15rem, 4.5vw, 1.45rem) !important;
    margin-bottom: 0.2rem !important;
    line-height: 1.1 !important;
  }

  .stats-grid .stat-label,
  .stats-grid [class*="stat-label"],
  .main-content .stats-grid .stat-label {
    font-size: clamp(0.6rem, 2vw, 0.68rem) !important;
    line-height: 1.2 !important;
  }

  .stats-grid .stat-meta,
  .stats-grid [class*="stat-meta"],
  .main-content .stats-grid .stat-meta {
    font-size: clamp(0.55rem, 1.8vw, 0.62rem) !important;
    margin-top: 4px !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 480px) {

  .stats-grid,
  .main-content .stats-grid,
  .results-dashboard .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* =========================================
   UNIVERSAL STATS/METRIC/PROGRESS CARD RESPONSIVENESS
   Compresses paddings, dynamically scales fonts using clamp(),
   and enforces correct word breaks so letters never wrap vertically.
   ========================================= */
@media (max-width: 991.98px) {

  .stat-card,
  .metric-card,
  .progress-stat-card {
    padding: clamp(0.45rem, 2.2vw, 0.8rem) !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: normal !important;
    min-width: 0 !important;
  }

  .stat-card h1,
  .stat-card h2,
  .stat-card h3,
  .stat-card h4,
  .stat-card .stat-value,
  .metric-card h1,
  .metric-card h2,
  .metric-card h3,
  .metric-card h4,
  .progress-stat-card h1,
  .progress-stat-card h2,
  .progress-stat-card h3,
  .progress-stat-card h4 {
    font-size: clamp(1.05rem, 4.2vw, 1.35rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 0.2rem !important;
    font-weight: 800 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .stat-card p,
  .stat-card span,
  .stat-card .stat-label,
  .metric-card p,
  .metric-card span,
  .progress-stat-card p,
  .progress-stat-card span,
  .stat-card .stat-meta,
  .progress-stat-card small,
  .metric-card small {
    font-size: clamp(0.58rem, 2vw, 0.72rem) !important;
    line-height: 1.25 !important;
    margin-top: 0.2rem !important;
    margin-bottom: 0 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
}

/* =========================================
   UNIVERSAL INTERACTION & ORGANIC ANIMATIONS SYSTEM
   Adds dynamic load-in effects, smooth micro-interactions,
   and fluid transitions for a premium, non-static user experience.
   ========================================= */

/* 1. Keyframes definitions */
@keyframes premiumFadeInUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes premiumScaleIn {
  from {
    opacity: 0;
    transform: scale(0.97);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes premiumFadeInOnly {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes primaryPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(67, 97, 238, 0.4);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(67, 97, 238, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(67, 97, 238, 0);
  }
}

/* 2. Global transitions */
.main-content,
.main-content .card,
.main-content .course-card,
.main-content .lesson-card,
.main-content .activity-card,
.main-content .stat-card,
.main-content .metric-card,
.main-content .progress-stat-card,
.main-content .btn,
.main-content .nav-link,
.main-content select,
.main-content input,
.main-content textarea,
.main-content .badge {
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 3. Smooth page scale-in on load */
.main-content {
  animation: premiumScaleIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 4. Staggered slide-up cards loading */
.main-content .card,
.main-content .course-card,
.main-content .lesson-card,
.main-content .activity-card,
.main-content .stat-card,
.main-content .metric-card,
.main-content .progress-stat-card {
  opacity: 1;
  animation: premiumFadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Apply staggered animation-delays for grid/list cards */
.main-content .card:nth-child(1),
.main-content [class*="col-"]:nth-child(1)>.card,
.main-content [class*="col-"]:nth-child(1)>[class*="card"] {
  animation-delay: 0.04s;
}

.main-content .card:nth-child(2),
.main-content [class*="col-"]:nth-child(2)>.card,
.main-content [class*="col-"]:nth-child(2)>[class*="card"] {
  animation-delay: 0.08s;
}

.main-content .card:nth-child(3),
.main-content [class*="col-"]:nth-child(3)>.card,
.main-content [class*="col-"]:nth-child(3)>[class*="card"] {
  animation-delay: 0.12s;
}

.main-content .card:nth-child(4),
.main-content [class*="col-"]:nth-child(4)>.card,
.main-content [class*="col-"]:nth-child(4)>[class*="card"] {
  animation-delay: 0.16s;
}

.main-content .card:nth-child(5),
.main-content [class*="col-"]:nth-child(5)>.card,
.main-content [class*="col-"]:nth-child(5)>[class*="card"] {
  animation-delay: 0.20s;
}

.main-content .card:nth-child(6),
.main-content [class*="col-"]:nth-child(6)>.card,
.main-content [class*="col-"]:nth-child(6)>[class*="card"] {
  animation-delay: 0.24s;
}

/* 5. Hover and interactive states */
@media (hover: hover) {

  .main-content .card:hover,
  .main-content .course-card:hover,
  .main-content .lesson-card:hover,
  .main-content .activity-card:hover,
  .main-content .stat-card:hover,
  .main-content .metric-card:hover,
  .main-content .progress-stat-card:hover,
  .main-content .title-rank-card:hover {
    transform: translateY(-5px) scale(1.01) !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12) !important;
    border-color: rgba(67, 97, 238, 0.24) !important;
  }

  /* Specific styling for active item focus in lists */
  .list-group-item:hover {
    background-color: rgba(67, 97, 238, 0.03) !important;
    transform: translateX(4px);
  }

  /* 6. Premium Button transitions */
  .main-content .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(67, 97, 238, 0.18) !important;
  }
}

.main-content .btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(67, 97, 238, 0.08) !important;
}

.main-content .btn-primary:not(:disabled),
.main-content .btn-primary-custom:not(:disabled) {
  animation: primaryPulse 2.5s infinite;
}

/* Form inputs styling */
.main-content .form-control:focus,
.main-content .form-select:focus {
  border-color: var(--primary-color, #4361ee) !important;
  box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.12) !important;
  transform: translateY(-1px);
}

/* ==========================================================================
   PERFORMANCE & RENDERING OPTIMIZATIONS
   ========================================================================== */
@media screen {

  .card,
  .stats-card,
  .list-group-item,
  .course-card {
    content-visibility: auto;
    contain-intrinsic-size: 100px;
  }

  img {
    content-visibility: auto;
  }

  @media (prefers-reduced-motion: reduce) {

    *,
    ::before,
    ::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ==========================================================================
   MODERN SYSTEM FONT STACK OVERRIDE
   ========================================================================== */

/* =========================================
   GLOBAL COHESIVE COLOR SYSTEM OVERRIDES
   ========================================= */

/* Success overrides */
.text-success {
  color: #10b981 !important;
}

.bg-success {
  background-color: #10b981 !important;
  color: #ffffff !important;
}

.border-success {
  border-color: #10b981 !important;
}

.btn-success {
  background-color: #10b981 !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-color: #059669 !important;
  border-color: #059669 !important;
}

.alert-success {
  background-color: #ecfdf5 !important;
  border-color: rgba(16, 185, 129, 0.2) !important;
  color: #065f46 !important;
}

/* Warning overrides */
.text-warning {
  color: #f59e0b !important;
}

.bg-warning {
  background-color: #f59e0b !important;
  color: #ffffff !important;
}

.border-warning {
  border-color: #f59e0b !important;
}

.btn-warning {
  background-color: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #ffffff !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
  background-color: #d97706 !important;
  border-color: #d97706 !important;
}

.alert-warning {
  background-color: #fffbeb !important;
  border-color: rgba(245, 158, 11, 0.2) !important;
  color: #92400e !important;
}

/* Danger overrides */
.text-danger {
  color: #f43f5e !important;
}

.bg-danger {
  background-color: #f43f5e !important;
  color: #ffffff !important;
}

.border-danger {
  border-color: #f43f5e !important;
}

.btn-danger {
  background-color: #f43f5e !important;
  border-color: #f43f5e !important;
  color: #ffffff !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  background-color: #e11d48 !important;
  border-color: #e11d48 !important;
}

.alert-danger {
  background-color: #fff1f2 !important;
  border-color: rgba(244, 63, 94, 0.2) !important;
  color: #9f1239 !important;
}

/* Info overrides */
.text-info {
  color: #0ea5e9 !important;
}

.bg-info {
  background-color: #0ea5e9 !important;
  color: #ffffff !important;
}

.border-info {
  border-color: #0ea5e9 !important;
}

.btn-info {
  background-color: #0ea5e9 !important;
  border-color: #0ea5e9 !important;
  color: #ffffff !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
  background-color: #0284c7 !important;
  border-color: #0284c7 !important;
}

.alert-info {
  background-color: #f0f9ff !important;
  border-color: rgba(14, 165, 233, 0.2) !important;
  color: #075985 !important;
}

/* Specific view element color corrections (Statistics card borders) */
.nivel-basico {
  background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%) !important;
  border-left: 4px solid #10b981 !important;
}

.nivel-intermedio {
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%) !important;
  border-left: 4px solid #f59e0b !important;
}

.nivel-avanzado {
  background: linear-gradient(135deg, #fff1f2 0%, #ffffff 100%) !important;
  border-left: 4px solid #f43f5e !important;
}

/* =========================================
   UNIVERSAL DARK MODE OVERRIDES
   ========================================= */

[data-theme="dark"] {
  background-color: #121212 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] body {
  background-color: #121212 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .card {
  background-color: #1e1e1e !important;
  border-color: #2d2d2d !important;
  color: #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
  background-color: #252525 !important;
  border-color: #2d2d2d !important;
  color: #f8fafc !important;
}

[data-theme="dark"] .list-group-item {
  background-color: #1e1e1e !important;
  border-color: #2d2d2d !important;
  color: #cbd5e1 !important;
}

[data-theme="dark"] .list-group-item:hover {
  background-color: #2d2d2d !important;
}

[data-theme="dark"] .modal-content {
  background-color: #1e1e1e !important;
  border-color: #2d2d2d !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  border-color: #2d2d2d !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: #1e1e1e !important;
  border-color: #333333 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: #222222 !important;
  border-color: var(--primary-color, #667eea) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .table {
  color: #cbd5e1 !important;
  border-color: #2d2d2d !important;
}

[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
  border-color: #2d2d2d !important;
}

[data-theme="dark"] .table-light {
  background-color: #252525 !important;
  color: #f8fafc !important;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: #1e1e1e !important;
  color: #e2e8f0 !important;
  border-color: #2d2d2d !important;
}

/* Sidebar and navigation dark mode adjustments */
[data-theme="dark"] #mainSidebar,
[data-theme="dark"] .sidebar-container {
  background: #181818 !important;
  border-right: 1px solid #2d2d2d !important;
}

[data-theme="dark"] .sidebar-menu-link {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .sidebar-menu-link:hover,
[data-theme="dark"] .sidebar-menu-link.active {
  background: #252525 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .sidebar-section-title {
  color: #64748b !important;
}

/* Breadcrumbs and titles */
[data-theme="dark"] .breadcrumb-item a {
  color: #94a3b8 !important;
}

[data-theme="dark"] .breadcrumb-item.active {
  color: #64748b !important;
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] small,
[data-theme="dark"] .small {
  color: #94a3b8 !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] .h1,
[data-theme="dark"] h2,
[data-theme="dark"] .h2,
[data-theme="dark"] h3,
[data-theme="dark"] .h3,
[data-theme="dark"] h4,
[data-theme="dark"] .h4,
[data-theme="dark"] h5,
[data-theme="dark"] .h5,
[data-theme="dark"] h6,
[data-theme="dark"] .h6 {
  color: #f8fafc !important;
}

/* Badges and dropdowns */
[data-theme="dark"] .bg-light {
  background-color: #2d2d2d !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .dropdown-menu {
  background-color: #1e1e1e !important;
  border-color: #2d2d2d !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .dropdown-item {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .dropdown-item:hover {
  background-color: #2d2d2d !important;
  color: #ffffff !important;
}

[data-theme="dark"] .nav-tabs {
  border-bottom: 1px solid #2d2d2d !important;
}

[data-theme="dark"] .nav-tabs .nav-link {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
  border-color: #2d2d2d #2d2d2d #2d2d2d !important;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
  background-color: #121212 !important;
  color: #ffffff !important;
  border-color: #2d2d2d #2d2d2d transparent !important;
}

/* Additional specific element fixes in Dark Mode */
[data-theme="dark"] .competencia-card {
  background: linear-gradient(135deg, #1e1e1e 0%, #252525 100%) !important;
}

[data-theme="dark"] .nivel-basico {
  background: linear-gradient(135deg, #022c22 0%, #1e1e1e 100%) !important;
  border-left: 4px solid #10b981 !important;
}

[data-theme="dark"] .nivel-intermedio {
  background: linear-gradient(135deg, #451a03 0%, #1e1e1e 100%) !important;
  border-left: 4px solid #f59e0b !important;
}

[data-theme="dark"] .nivel-avanzado {
  background: linear-gradient(135deg, #4c0519 0%, #1e1e1e 100%) !important;
  border-left: 4px solid #f43f5e !important;
}

[data-theme="dark"] .title-rank-card {
  background: linear-gradient(135deg, #2a1f10 0%, #1e1e1e 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
}

[data-theme="dark"] .title-pill {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #f59e0b !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
}

[data-theme="dark"] .development-hud-toggle {
  background-color: #1e1e1e !important;
  border-color: #2d2d2d !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .development-hud-toggle span {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .hud-toggle-arrow {
  background-color: #2d2d2d !important;
  color: #e2e8f0 !important;
}

/* Theme Toggle Button near the HUD trigger */
.theme-toggle-hud-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(99, 102, 241, 0.35);
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
  color: #4338ca;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
  cursor: pointer;
  font-size: 15px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle-hud-btn:hover {
  transform: scale(1.08) rotate(15deg);
  background: #f8fafc;
  color: #0f172a;
}

.theme-toggle-hud-btn:active {
  transform: scale(0.95);
}

[data-theme="dark"] .theme-toggle-hud-btn {
  background: #1e1e1e !important;
  border-color: #2d2d2d !important;
  color: #f59e0b !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="dark"] .theme-toggle-hud-btn:hover {
  background: #252525 !important;
  color: #fbbf24 !important;
}

/* Dark theme overrides for exercise views and cards */
[data-theme="dark"] .content-body,
[data-theme="dark"] .page-content,
[data-theme="dark"] .wrapper,
[data-theme="dark"] .main-content {
  background-color: var(--bg-primary, #121212) !important;
  color: var(--text-primary, #e2e8f0) !important;
}

[data-theme="dark"] .exercise-game-shell {
  background: linear-gradient(180deg, #18181b 0%, #09090b 100%) !important;
  border-color: #27272a !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .exercise-game-body {
  background: linear-gradient(180deg, rgba(24, 24, 27, 0.55), rgba(9, 9, 11, 0.95)) !important;
}

[data-theme="dark"] .study-assistant-panel {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(17, 24, 39, 0.8)) !important;
  border-color: rgba(30, 58, 138, 0.3) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .study-assistant-title {
  color: #f8fafc !important;
}

[data-theme="dark"] .study-assistant-content {
  background: rgba(15, 23, 42, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
}

[data-theme="dark"] .exercise-flow-shell {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.75), rgba(17, 24, 39, 0.55)) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .exercise-flow-title {
  color: #f8fafc !important;
}

[data-theme="dark"] .exercise-flow-card {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.9)) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .exercise-flow-card.current {
  outline: 2px solid rgba(59, 130, 246, 0.4) !important;
  box-shadow: 0 14px 24px rgba(59, 130, 246, 0.25) !important;
}

[data-theme="dark"] .exercise-flow-card small {
  color: #94a3b8 !important;
}

[data-theme="dark"] .option-item,
[data-theme="dark"] .true-false-option,
[data-theme="dark"] .matching-item {
  background: linear-gradient(180deg, #1e1e2d, #151520) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .option-item:hover,
[data-theme="dark"] .true-false-option:hover,
[data-theme="dark"] .matching-item:hover {
  border-color: #3b82f6 !important;
  background: linear-gradient(180deg, #232338, #191928) !important;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="dark"] .option-item.selected,
[data-theme="dark"] .matching-item.selected {
  background: linear-gradient(135deg, #2563eb, #14b8a6) !important;
  color: white !important;
  border-color: #2563eb !important;
}

[data-theme="dark"] .option-item.selected strong {
  color: white !important;
}

[data-theme="dark"] .option-item.correct,
[data-theme="dark"] .true-false-option.correct,
[data-theme="dark"] .matching-item.connected,
[data-theme="dark"] .question-item.correct {
  border-color: #10b981 !important;
  background: linear-gradient(180deg, #022c22, #064e3b) !important;
  color: #e6fffa !important;
}

[data-theme="dark"] .option-item.incorrect,
[data-theme="dark"] .true-false-option.incorrect,
[data-theme="dark"] .question-item.incorrect,
[data-theme="dark"] .connection-item.incorrect {
  border-color: #ef4444 !important;
  background: linear-gradient(180deg, #450a0a, #7f1d1d) !important;
  color: #fef2f2 !important;
}

[data-theme="dark"] .text-with-gaps {
  background: linear-gradient(180deg, #181825, #0f0f18) !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .gap-input {
  background: #0f172a !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .gap-input.correct {
  background-color: #064e3b !important;
  border-color: #10b981 !important;
}

[data-theme="dark"] .gap-input.incorrect {
  background-color: #7f1d1d !important;
  border-color: #ef4444 !important;
}

[data-theme="dark"] .audio-player,
[data-theme="dark"] .reading-text {
  background: linear-gradient(180deg, #181825, #1e1e2f) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .connection-item {
  background: #1e1e2f !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .connection-item.correct {
  background: #064e3b !important;
  border-color: #10b981 !important;
}

[data-theme="dark"] .question-item {
  background: linear-gradient(180deg, #1e1e2f, #181825) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .answer-display {
  background: linear-gradient(180deg, #181825, #0f0f18) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Explicit Override to force HUD and Study Assistant Panel row layouts on mobile */
.main-content .development-hud-floating>.d-flex,
.main-content .study-assistant-panel #studyAssistantButtonGroup,
.main-content .study-assistant-panel #courseStudyAssistantButtonGroup,
.main-content .study-assistant-panel #lessonStudyAssistantButtonGroup,
.main-content .development-hud-tip-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  gap: 8px !important;
}

.main-content .development-hud-floating>.d-flex>*,
.main-content .study-assistant-panel .d-flex>*,
.main-content .development-hud-tip-card>* {
  width: auto !important;
  min-width: 0 !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.main-content .development-hud-tip-card .development-hud-tip-copy {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
}

.main-content .hud-tip-close-btn {
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 4px !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  line-height: 1 !important;
}

/* BULLETPROOF UNIVERSAL 2-COLUMN GRID FOR MOBILE VIEWPORTS */
body .main-content .mobile-two-columns,
body .main-content .stats-row,
body .main-content .course-stats-row,
body .main-content .activity-stats-row,
.mobile-two-columns,
.stats-row,
.course-stats-row,
.activity-stats-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  width: 100% !important;
  clear: none !important;
  float: none !important;
}

/* Mobile/Tablet viewports (< 992px): 2 columns (50% width) or full-width for odd items (flex-grow) */
@media (max-width: 991.98px) {

  body .main-content .mobile-two-columns>div,
  body .main-content .mobile-two-columns>[class*="col-"],
  body .main-content .stats-row>div,
  body .main-content .stats-row>[class*="col-"],
  body .main-content .course-stats-row>div,
  body .main-content .course-stats-row>[class*="col-"],
  body .main-content .activity-stats-row>div,
  body .main-content .activity-stats-row>[class*="col-"],
  .mobile-two-columns>div,
  .mobile-two-columns>[class*="col-"],
  .stats-row>div,
  .stats-row>[class*="col-"],
  .course-stats-row>div,
  .course-stats-row>[class*="col-"],
  .activity-stats-row>div,
  .activity-stats-row>[class*="col-"] {
    flex: 1 1 calc(50% - 8px) !important;
    max-width: 100% !important;
    width: auto !important;
    min-width: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    float: left !important;
    clear: none !important;
    margin-bottom: 12px !important;
  }
}

/* Desktop viewports (>= 992px): 4 columns (25% width) to form a 4x1 row */
@media (min-width: 992px) {

  body .main-content .stats-row>div,
  body .main-content .stats-row>[class*="col-"],
  body .main-content .course-stats-row>div,
  body .main-content .course-stats-row>[class*="col-"],
  body .main-content .activity-stats-row>div,
  body .main-content .activity-stats-row>[class*="col-"],
  .stats-row>div,
  .stats-row>[class*="col-"],
  .course-stats-row>div,
  .course-stats-row>[class*="col-"],
  .activity-stats-row>div,
  .activity-stats-row>[class*="col-"] {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
    display: block !important;
    box-sizing: border-box !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    float: left !important;
    clear: none !important;
    margin-bottom: 0 !important;
  }
}

/* Make Study Assistant Panel buttons circular and responsive on mobile viewports (< 768px) */
@media (max-width: 767.98px) {

  #studyAssistantRefreshBtn,
  #studyAssistantClearBtn,
  #lessonStudyAssistantRefreshBtn,
  #lessonStudyAssistantClearBtn,
  #courseStudyAssistantRefreshBtn,
  #courseStudyAssistantClearBtn,
  #evaluationStudyAssistantRefreshBtn {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    min-width: 34px !important;
  }

  #studyAssistantRefreshBtn .btn-text,
  #studyAssistantClearBtn .btn-text,
  #lessonStudyAssistantRefreshBtn .btn-text,
  #lessonStudyAssistantClearBtn .btn-text,
  #courseStudyAssistantRefreshBtn .btn-text,
  #courseStudyAssistantClearBtn .btn-text,
  #evaluationStudyAssistantRefreshBtn .btn-text {
    display: none !important;
  }

  #studyAssistantRefreshBtn i,
  #studyAssistantClearBtn i,
  #lessonStudyAssistantRefreshBtn i,
  #lessonStudyAssistantClearBtn i,
  #courseStudyAssistantRefreshBtn i,
  #courseStudyAssistantClearBtn i,
  #evaluationStudyAssistantRefreshBtn i {
    margin: 0 !important;
    font-size: 0.9rem !important;
  }
}

/* =========================================
   PWA IOS INSTALL BANNER & SOFT-NAV PROGRESS
   ========================================= */

/* Soft Navigation progress bar (YouTube style) */
#soft-nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #4361ee 0%, #4cc9f0 50%, #4361ee 100%);
  z-index: 1000000;
  transition: width 0.3s cubic-bezier(0.1, 0.8, 0.1, 1), opacity 0.3s ease-in-out;
  box-shadow: 0 0 8px rgba(67, 97, 238, 0.6);
  pointer-events: none;
}

/* PWA iOS Install Banner */
#pwa-ios-install-banner {
  position: fixed;
  bottom: -200px;
  left: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  padding: 16px;
  z-index: 999999;
  transition: bottom 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
}

#pwa-ios-install-banner.show {
  bottom: 20px;
  opacity: 1;
}

#pwa-ios-install-banner.fade-out {
  opacity: 0;
  bottom: -200px;
}

.pwa-ios-banner-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pwa-ios-banner-header {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.pwa-ios-banner-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.pwa-ios-banner-info {
  flex: 1;
}

.pwa-ios-banner-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #1c1c1e;
}

.pwa-ios-banner-subtitle {
  font-size: 0.75rem;
  color: #8e8e93;
  margin-top: 1px;
}

.pwa-ios-banner-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: #8e8e93;
  cursor: pointer;
  padding: 4px;
  position: absolute;
  top: -4px;
  right: -4px;
  line-height: 1;
}

.pwa-ios-banner-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 10px;
}

.pwa-ios-banner-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8rem;
  color: #3a3a3c;
  line-height: 1.35;
}

.pwa-ios-step-num {
  background: #007aff;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.7rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Custom iOS Share and Add Icons using pure CSS */
.pwa-ios-icon-share {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1.5px solid #007aff;
  border-radius: 2px;
  position: relative;
  vertical-align: middle;
  margin: 0 2px;
}

.pwa-ios-icon-share::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 4px;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 4px solid #007aff;
}

.pwa-ios-icon-share::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 5px;
  width: 1.5px;
  height: 5px;
  background: #007aff;
}

.pwa-ios-icon-add {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1.5px solid #3a3a3c;
  border-radius: 3px;
  position: relative;
  vertical-align: middle;
  margin: 0 2px;
}

.pwa-ios-icon-add::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 2px;
  width: 7px;
  height: 1.5px;
  background: #3a3a3c;
}

.pwa-ios-icon-add::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 1.5px;
  height: 7px;
  background: #3a3a3c;
}

/* Dark Mode adaptation for PWA Banner */
[data-theme="dark"] #pwa-ios-install-banner {
  background: rgba(30, 30, 30, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .pwa-ios-banner-title {
  color: #f8fafc;
}

[data-theme="dark"] .pwa-ios-banner-subtitle {
  color: #94a3b8;
}

[data-theme="dark"] .pwa-ios-banner-step {
  color: #cbd5e1;
}

[data-theme="dark"] .pwa-ios-banner-steps {
  border-top-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .pwa-ios-icon-add {
  border-color: #cbd5e1;
}

[data-theme="dark"] .pwa-ios-icon-add::before,
[data-theme="dark"] .pwa-ios-icon-add::after {
  background: #cbd5e1;
}

/* ==========================================================
   UNIFIED STUDENT VIEW REDESIGN SYSTEM
   - Standardizes brand colors, gradients, cards, and buttons.
   - Fine-tunes mobile typography and spacing to be extra compact.
   ========================================================== */

:root {
  --primary-color: #6366f1 !important;
  --primary-purple: #4f46e5 !important;
  --primary-gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  --action-gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
}

[data-theme="dark"] {
  --primary-color: #818cf8 !important;
  --primary-purple: #6366f1 !important;
  --primary-gradient: linear-gradient(135deg, #818cf8 0%, #6366f1 100%) !important;
  --action-gradient: linear-gradient(135deg, #818cf8 0%, #6366f1 100%) !important;
}

/* Unify Card Headers and Backgrounds (Excluding Game Resources & Custom Gradients) */
body:not(:has(.resource-container)):not(:has(.arcade-container)) .card:not(.hero-rpg-banner):not(.card-dark-gradient):not([style*="background"]):not([style*="gradient"]):not(.arcade-hero-card):not(.game-card-item):not(.bg-dark):not(.bg-black) {
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
  background: var(--bg-primary) !important;
  overflow: hidden;
}

.resource-container .card,
.arcade-container .card,
.resource-container [id^="sectionGame"],
.verb-game-card,
.game-section-card {
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f8fafc !important;
}

.resource-container .btn-outline-light,
.arcade-container .btn-outline-light,
.resource-container button.btn-outline-light,
.resource-container .ipa-sym {
  color: #ffffff !important;
  background: #1e293b !important;
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.resource-container .btn-outline-light:hover,
.arcade-container .btn-outline-light:hover,
.resource-container button.btn-outline-light:hover,
.resource-container .ipa-sym:hover {
  background: #4f46e5 !important;
  border-color: #818cf8 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

.resource-container .card[style*="gradient"],
.resource-container .card[style*="linear-gradient"] {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%) !important;
  color: #ffffff !important;
}

.card.hero-rpg-banner,
.hero-rpg-banner {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #2e1065 100%) !important;
  background-color: #0f172a !important;
  color: #ffffff !important;
}

.card-header {
  background: var(--bg-secondary, #f8f9fa) !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 0.8rem 1rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

.card-title,
.card-header h5,
.card-header strong,
.card-header .h5 {
  color: var(--text-primary) !important;
  margin: 0 !important;
  font-size: 1.05rem !important;
}

/* Active Nav Links and Sidebar Menu Links styling to use branded Indigo/Purple */
.sidebar-menu-link.active,
.sidebar-menu-link:hover {
  color: var(--primary-color) !important;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(79, 70, 229, 0.15) 100%) !important;
}

/* Brand overrides for special dashboard and HUD elements to match brand gradient */
.development-hud,
.activity-hero-card,
.card-header.bg-primary,
.results-dashboard,
.course-header-card {
  background: var(--primary-gradient) !important;
  color: white !important;
  border: none !important;
}

.development-hud *,
.activity-hero-card *,
.card-header.bg-primary *,
.results-dashboard *,
.course-header-card * {
  color: white !important;
}

/* Redesign buttons to be modern pill shapes and use Brand colors */
.btn-primary,
.btn-primary-custom {
  background: var(--primary-gradient) !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.2) !important;
}

.btn-primary:hover,
.btn-primary-custom:hover {
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* Mobile-Specific Extra Compact Spacing & Typography overrides */
@media (max-width: 991.98px) {
  .main-content {
    padding: 8px !important;
  }

  .card,
  .alert,
  .list-group-item,
  .accordion-item {
    margin-bottom: 10px !important;
    border-radius: 10px !important;
  }

  .card-body,
  .accordion-body,
  .alert {
    padding: 0.75rem !important;
  }

  .card-header {
    padding: 0.6rem 0.8rem !important;
  }

  .row>[class*="col-"] {
    margin-bottom: 10px !important;
  }

  /* Typography adjustments to make it legible but space-saving */
  body,
  p,
  span,
  li,
  a,
  td,
  th {
    font-size: 0.82rem !important;
    line-height: 1.3 !important;
  }

  h1,
  .h1 {
    font-size: 1.25rem !important;
  }

  h2,
  .h2 {
    font-size: 1.12rem !important;
  }

  h3,
  .h3,
  h4,
  .h4,
  h5,
  .h5 {
    font-size: 0.95rem !important;
  }

  .list-group-item {
    padding: 8px 10px !important;
  }

  /* Tighter gaps in flex/grid */
  .d-flex.gap-3 {
    gap: 0.5rem !important;
  }

  .d-flex.gap-2 {
    gap: 0.35rem !important;
  }
}

/* General dark mode override for text-dark class when not on a styled badge/button/alert */
[data-theme="dark"] .text-dark:not(.badge):not(.btn):not(.alert):not([class*="bg-"]):not([class*="badge-"]):not(.bg-light *):not(.bg-warning *) {
  color: #f8fafc !important;
}


/* =============================================
   DISEÑO UNIFICADO — MODALES
   Todos los modales Bootstrap usan la misma paleta,
   tipografía Inter, y bordes suaves del design system.
   ============================================= */

.modal-content {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  border-radius: 18px !important;
  border: 1px solid rgba(99, 102, 241, 0.12) !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18), 0 8px 20px rgba(79, 70, 229, 0.08) !important;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-header {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  background: linear-gradient(145deg, rgba(248, 250, 252, 0.98), rgba(238, 242, 255, 0.95)) !important;
  border-bottom: 1px solid rgba(99, 102, 241, 0.1) !important;
  padding: 1rem 1.25rem !important;
}

.modal-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  color: #1e1b4b !important;
  letter-spacing: -0.01em;
}

.modal-body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  padding: 1.25rem !important;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #334155;
}

.modal-footer {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  background: rgba(248, 250, 252, 0.6) !important;
  border-top: 1px solid rgba(99, 102, 241, 0.08) !important;
  padding: 0.85rem 1.25rem !important;
  gap: 8px;
}

.modal-footer .btn {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.85rem;
}

/* Close button in modals */
.modal .btn-close,
.modal-header .btn-close {
  opacity: 0.5;
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.modal .btn-close:hover,
.modal-header .btn-close:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* Modal animation override for smoother feel */
.modal.fade .modal-dialog {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease !important;
}

.modal-backdrop {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}


/* =============================================
   DISEÑO UNIFICADO — TOASTS
   ============================================= */

.toast {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  border-radius: 14px !important;
  border: 1px solid rgba(99, 102, 241, 0.12) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14), 0 4px 10px rgba(79, 70, 229, 0.06) !important;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 0.85rem;
}

.toast-header {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 700;
  font-size: 0.82rem;
  background: rgba(248, 250, 252, 0.95) !important;
  border-bottom: 1px solid rgba(99, 102, 241, 0.08) !important;
  color: #1e1b4b !important;
}

.toast-body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.85rem;
  color: #334155;
  line-height: 1.5;
}


/* =============================================
   DISEÑO UNIFICADO — DROPDOWNS
   ============================================= */

.dropdown-menu {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  border-radius: 14px !important;
  border: 1px solid rgba(99, 102, 241, 0.12) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(79, 70, 229, 0.06) !important;
  padding: 6px !important;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.dropdown-item {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
  color: #334155;
  transition: background 0.15s ease, color 0.15s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(238, 242, 255, 0.9) !important;
  color: #4338ca !important;
}

.dropdown-item.active,
.dropdown-item:active {
  background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
  color: #fff !important;
}

.dropdown-divider {
  border-color: rgba(99, 102, 241, 0.08) !important;
  margin: 4px 0;
}


/* =============================================
   DISEÑO UNIFICADO — POPOVERS & TOOLTIPS
   ============================================= */

.popover {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  border-radius: 14px !important;
  border: 1px solid rgba(99, 102, 241, 0.12) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12) !important;
}

.popover-header {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 700;
  font-size: 0.88rem;
  background: rgba(248, 250, 252, 0.95) !important;
  border-bottom: 1px solid rgba(99, 102, 241, 0.08) !important;
  color: #1e1b4b !important;
  border-radius: 14px 14px 0 0;
}

.popover-body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.85rem;
  color: #334155;
}

.tooltip-inner {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  background: #1e1b4b;
}


/* =============================================
   DISEÑO UNIFICADO — ALERTS
   ============================================= */

.alert {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  border-radius: 12px !important;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.5;
}

.alert-primary {
  background: rgba(238, 242, 255, 0.95) !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  color: #3730a3 !important;
}

.alert-success {
  background: rgba(209, 250, 229, 0.9) !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
  color: #065f46 !important;
}

.alert-warning {
  background: rgba(254, 243, 199, 0.9) !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
  color: #92400e !important;
}

.alert-danger {
  background: rgba(254, 226, 226, 0.9) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  color: #991b1b !important;
}

.alert-info {
  background: rgba(219, 234, 254, 0.9) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  color: #1e40af !important;
}


/* =============================================
   DISEÑO UNIFICADO — LIST GROUPS
   ============================================= */

.list-group-item {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.85rem;
  border-color: rgba(99, 102, 241, 0.08) !important;
  transition: background 0.15s ease;
}

.list-group-item:hover {
  background: rgba(248, 250, 252, 0.9);
}

.list-group-item.active {
  background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
  border-color: transparent !important;
  color: #fff !important;
}


/* =============================================
   DISEÑO UNIFICADO — TABS & NAV PILLS
   ============================================= */

.nav-tabs .nav-link,
.nav-pills .nav-link {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: 10px;
  transition: background 0.18s ease, color 0.18s ease;
  color: #64748b;
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
  font-weight: 700;
  color: #4338ca !important;
  background: rgba(238, 242, 255, 0.9) !important;
  border-color: rgba(99, 102, 241, 0.2) !important;
}

.nav-pills .nav-link.active {
  background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}


/* =============================================
   DISEÑO UNIFICADO — TABLES
   ============================================= */

.table {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.85rem;
}

.table thead th {
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #64748b;
  border-bottom: 2px solid rgba(99, 102, 241, 0.12) !important;
  background: rgba(248, 250, 252, 0.7);
}

.table td {
  border-bottom: 1px solid rgba(99, 102, 241, 0.06) !important;
  color: #334155;
  vertical-align: middle;
}

.table-striped>tbody>tr:nth-of-type(odd)>td {
  background: rgba(248, 250, 252, 0.5);
}


/* =============================================
   DARK MODE — OVERLAYS UNIFICADOS
   ============================================= */

[data-theme="dark"] .modal-content {
  background: rgba(30, 27, 75, 0.97) !important;
  border-color: rgba(129, 140, 248, 0.2) !important;
  color: #e2e8f0;
}

[data-theme="dark"] .modal-header {
  background: linear-gradient(145deg, rgba(49, 46, 129, 0.9), rgba(67, 56, 202, 0.7)) !important;
  border-color: rgba(129, 140, 248, 0.15) !important;
}

[data-theme="dark"] .modal-title {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .modal-body {
  color: #cbd5e1;
}

[data-theme="dark"] .modal-footer {
  background: rgba(30, 27, 75, 0.6) !important;
  border-color: rgba(129, 140, 248, 0.1) !important;
}

[data-theme="dark"] .toast {
  background: rgba(30, 27, 75, 0.96) !important;
  border-color: rgba(129, 140, 248, 0.18) !important;
  color: #e2e8f0;
}

[data-theme="dark"] .toast-header {
  background: rgba(49, 46, 129, 0.85) !important;
  color: #e2e8f0 !important;
  border-color: rgba(129, 140, 248, 0.12) !important;
}

[data-theme="dark"] .toast-body {
  color: #cbd5e1;
}

[data-theme="dark"] .dropdown-menu {
  background: rgba(30, 27, 75, 0.97) !important;
  border-color: rgba(129, 140, 248, 0.18) !important;
}

[data-theme="dark"] .dropdown-item {
  color: #cbd5e1;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background: rgba(99, 102, 241, 0.2) !important;
  color: #a5b4fc !important;
}

[data-theme="dark"] .dropdown-divider {
  border-color: rgba(129, 140, 248, 0.1) !important;
}

[data-theme="dark"] .card {
  background: rgba(30, 27, 75, 0.7) !important;
  border-color: rgba(129, 140, 248, 0.12) !important;
}

[data-theme="dark"] .card-header {
  background: rgba(49, 46, 129, 0.5) !important;
  border-color: rgba(129, 140, 248, 0.1) !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .card-title {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .card-body {
  color: #cbd5e1;
}

[data-theme="dark"] .list-group-item {
  background: rgba(30, 27, 75, 0.5);
  border-color: rgba(129, 140, 248, 0.1) !important;
  color: #cbd5e1;
}

[data-theme="dark"] .table {
  color: #cbd5e1;
}

[data-theme="dark"] .table thead th {
  background: rgba(49, 46, 129, 0.4);
  color: #a5b4fc;
  border-color: rgba(129, 140, 248, 0.15) !important;
}

[data-theme="dark"] .table td {
  border-color: rgba(129, 140, 248, 0.08) !important;
}

[data-theme="dark"] .popover {
  background: rgba(30, 27, 75, 0.97) !important;
  border-color: rgba(129, 140, 248, 0.18) !important;
  color: #e2e8f0;
}

[data-theme="dark"] .popover-header {
  background: rgba(49, 46, 129, 0.8) !important;
  color: #e2e8f0 !important;
  border-color: rgba(129, 140, 248, 0.12) !important;
}

[data-theme="dark"] .popover-body {
  color: #cbd5e1;
}

[data-theme="dark"] .tooltip-inner {
  background: #312e81;
}

[data-theme="dark"] .alert-primary {
  background: rgba(67, 56, 202, 0.2) !important;
  border-color: rgba(129, 140, 248, 0.25) !important;
  color: #a5b4fc !important;
}

[data-theme="dark"] .alert-success {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(52, 211, 153, 0.2) !important;
  color: #6ee7b7 !important;
}

[data-theme="dark"] .alert-warning {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(251, 191, 36, 0.2) !important;
  color: #fbbf24 !important;
}

[data-theme="dark"] .alert-danger {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(248, 113, 113, 0.2) !important;
  color: #fca5a5 !important;
}

[data-theme="dark"] .alert-info {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(96, 165, 250, 0.2) !important;
  color: #93c5fd !important;
}

/* Dark mode for HUD panel */
[data-theme="dark"] .hud-glass-panel {
  background: rgba(30, 27, 75, 0.97) !important;
  border-color: rgba(129, 140, 248, 0.2) !important;
}

[data-theme="dark"] .hud-stat-value {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .hud-stat-label {
  color: #94a3b8 !important;
}

[data-theme="dark"] .hud-summary-label {
  color: #94a3b8 !important;
}

[data-theme="dark"] .hud-summary-val {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .hud-stats-row {
  border-color: rgba(129, 140, 248, 0.1) !important;
}

[data-theme="dark"] .hud-stat-item {
  border-color: rgba(129, 140, 248, 0.08) !important;
}

[data-theme="dark"] .hud-summary-row {
  border-color: rgba(129, 140, 248, 0.06) !important;
}

[data-theme="dark"] .hud-summary-header {
  color: #a5b4fc !important;
}

[data-theme="dark"] .hud-cta-secondary {
  background: rgba(99, 102, 241, 0.15) !important;
  color: #a5b4fc !important;
  border-color: rgba(129, 140, 248, 0.2) !important;
}

[data-theme="dark"] .development-hud-toggle {
  background: linear-gradient(145deg, rgba(30, 27, 75, 0.95), rgba(49, 46, 129, 0.9)) !important;
  border-color: rgba(129, 140, 248, 0.3) !important;
  box-shadow: 0 4px 18px rgba(99, 102, 241, 0.2), inset 0 1px 0 rgba(129, 140, 248, 0.15) !important;
}

[data-theme="dark"] .nav-tabs .nav-link,
[data-theme="dark"] .nav-pills .nav-link {
  color: #94a3b8;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
  color: #a5b4fc !important;
  background: rgba(99, 102, 241, 0.15) !important;
  border-color: rgba(129, 140, 248, 0.2) !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background: rgba(30, 27, 75, 0.5) !important;
  border-color: rgba(129, 140, 248, 0.2) !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  border-color: rgba(129, 140, 248, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

/* ==========================================================================
   REFRACTORIZACIÓN UI/UX UNIFICADA (LMS & JUEGO RPG)
   ========================================================================== */

/* 1. Eliminación de Títulos Duplicados */
.content-title,
.content-subtitle {
  display: none !important;
}

.content-header {
  margin-top: -24px !important;
  border-bottom: none !important;
  padding-top: 0 !important;
  padding-bottom: 0.5rem !important;
}

/* 2. Sección de Bienvenida (Hero Section) */
.hero-section {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

@media (max-width: 767.98px) {
  .hero-section {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

/* 3. Grilla del Dashboard del Estudiante */
@media (max-width: 768px) {
  .dashboard-top-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  .dashboard-top-btn,
  a.dashboard-top-btn,
  button.dashboard-top-btn {
    width: calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
    flex: 0 0 calc(50% - 6px) !important;
    aspect-ratio: auto !important;
    padding: 10px !important;
    min-height: 96px !important;
    height: 96px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
  }

  .dashboard-top-btn .icon-wrap {
    width: 38px !important;
    height: 38px !important;
    font-size: 0.95rem !important;
    margin-bottom: 6px !important;
    flex-shrink: 0 !important;
  }

  .dashboard-top-btn .btn-metric {
    font-size: 1.1rem !important;
    line-height: 1.1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .dashboard-top-btn .dashboard-btn-label {
    font-size: 0.72rem !important;
    display: block !important;
    margin-top: 2px !important;
    text-align: center !important;
  }

  .dashboard-top-btn .custom-card-tooltip {
    display: none !important;
  }
}

/* 4. Gamificación Global - Alineación Vertical */
.dashboard-global-gamification .gamification-top {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
}

.dashboard-global-gamification .gamification-top .btn {
  align-self: flex-start !important;
}

/* 5. Tarjetas de Cursos (Equal heights & alignment) */
.course-card,
.card-course,
.curso-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.course-card .card-body,
.card-course .card-body,
.curso-card .card-body {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

.course-card .card-footer,
.course-card .card-actions,
.card-course .card-footer,
.card-course .card-actions,
.curso-card .card-footer,
.curso-card .card-actions,
.course-card .btn,
.card-course .btn,
.curso-card .btn {
  margin-top: auto !important;
}

/* 6. Botón Pagar Nivel */
.btn-pay-level {
  background: transparent !important;
  border: 2px solid #f97316 !important;
  color: #ea580c !important;
  transition: all 0.2s ease !important;
}

.btn-pay-level:hover {
  background: rgba(249, 115, 22, 0.08) !important;
  color: #c2410c !important;
}

/* 7. Evaluaciones: Badge 'En Progreso' y Continuar */
span.badge.bg-warning,
.badge-warning {
  background-color: #fef08a !important;
  /* amarillo claro */
  color: #a16207 !important;
  /* amarillo oscuro */
  border: 1px solid rgba(161, 98, 7, 0.15) !important;
}

/* 8. RPG Campaign & Mode Cards */
.world-card {
  background: #ffffff !important;
  border: 1px solid rgba(99, 102, 241, 0.08) !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08) !important;
  border-radius: 16px !important;
}

.btn-portal-3d {
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

@media (max-width: 991.98px) {
  .game-world-dashboard .row.g-4>div {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* 9. Calificaciones (Tablas a tarjetas en móvil y sin bordes verticales) */
.game-progress-page table,
.grades-container table,
table.table {
  border-collapse: collapse !important;
}

.game-progress-page table th,
.grades-container table th,
table.table th {
  background-color: #f8fafc !important;
  /* bg-slate-50 */
  color: #64748b !important;
  /* slate-500 */
  text-transform: uppercase !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.05em !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #e2e8f0 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

.game-progress-page table td,
.grades-container table td,
table.table td {
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-left: none !important;
  border-right: none !important;
  padding: 12px 8px !important;
  background: transparent !important;
}

.table .btn-view-detail,
.table .btn-details,
.table a[href*="detail"],
.btn-link-detail {
  background: transparent !important;
  border: none !important;
  color: #4f46e5 !important;
  padding: 0 !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  box-shadow: none !important;
}

.table .btn-view-detail:hover,
.table .btn-details:hover,
.table a[href*="detail"]:hover,
.btn-link-detail:hover {
  color: #3730a3 !important;
  background: transparent !important;
}

@media (max-width: 768px) {

  .grades-container table,
  .grades-container thead,
  .grades-container tbody,
  .grades-container th,
  .grades-container td,
  .grades-container tr,
  .course-detail-container table,
  .course-detail-container thead,
  .course-detail-container tbody,
  .course-detail-container th,
  .course-detail-container td,
  .course-detail-container tr,
  .table-to-cards table,
  .table-to-cards thead,
  .table-to-cards tbody,
  .table-to-cards th,
  .table-to-cards td,
  .table-to-cards tr {
    display: block !important;
    width: 100% !important;
  }

  .grades-container thead,
  .course-detail-container thead,
  .table-to-cards thead {
    display: none !important;
  }

  .grades-container tr,
  .course-detail-container tr,
  .table-to-cards tr {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    padding: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  }

  .grades-container td,
  .course-detail-container td,
  .table-to-cards td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border: none !important;
    padding: 6px 0 !important;
    text-align: right !important;
    font-size: 0.85rem !important;
  }

  .grades-container td::before,
  .course-detail-container td::before,
  .table-to-cards td::before {
    font-weight: 700 !important;
    color: #64748b !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    text-align: left !important;
    margin-right: 8px !important;
  }

  .grades-container td:nth-child(1)::before,
  .course-detail-container td:nth-child(1)::before {
    content: "Nota Final:" !important;
  }

  .grades-container td:nth-child(2)::before,
  .course-detail-container td:nth-child(2)::before {
    content: "Origen:" !important;
  }

  .grades-container td:nth-child(3)::before,
  .course-detail-container td:nth-child(3)::before {
    content: "Estado:" !important;
  }

  .grades-container td:nth-child(4)::before,
  .course-detail-container td:nth-child(4)::before {
    content: "Fecha:" !important;
  }
}

/* 10. Compañeros: Aumento de espacio y márgenes */
.companeros-layout {
  gap: 30px !important;
}

.grupo-item,
.actividad-item {
  margin-bottom: 16px !important;
  padding: 12px !important;
}

/* 11. Biblioteca: Badges de tipo */
.badge-type-video {
  background-color: #fee2e2 !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.15) !important;
}

.badge-type-document,
.badge-type-pdf,
.badge-type-text {
  background-color: #dcfce7 !important;
  color: #15803d !important;
  border: 1px solid rgba(21, 128, 61, 0.15) !important;
}

.badge-type-guide {
  background-color: #fef9c3 !important;
  color: #a16207 !important;
  border: 1px solid rgba(161, 98, 7, 0.15) !important;
}

.badge-type-presentation {
  background-color: #ffedd5 !important;
  color: #ea580c !important;
  border: 1px solid rgba(234, 88, 12, 0.15) !important;
}

.badge-type-interactive,
.badge-type-exercise {
  background-color: #e0e7ff !important;
  color: #4338ca !important;
  border: 1px solid rgba(67, 56, 202, 0.15) !important;
}

.library-stats-badge-total {
  background-color: #4f46e5 !important;
  color: #ffffff !important;
}

.library-stats-badge-video {
  background-color: #ef4444 !important;
  color: #ffffff !important;
}

.library-stats-badge-docs {
  background-color: #10b981 !important;
  color: #ffffff !important;
}

.library-stats-badge-guides {
  background-color: #f59e0b !important;
  color: #ffffff !important;
}

/* 12. Tour de Bienvenida (Intro.js & Driver.js) */
.introjs-nextbutton,
.driver-next-btn,
.driver-popover-next-btn {
  background: #4f46e5 !important;
  color: #ffffff !important;
  border: none !important;
  text-shadow: none !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
}

.introjs-nextbutton:hover,
.driver-next-btn:hover,
.driver-popover-next-btn:hover {
  background: #4338ca !important;
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35) !important;
}

.introjs-skipbutton,
.introjs-closebutton,
.driver-close-btn,
.driver-popover-close-btn,
.driver-popover-skip-btn {
  background: rgba(148, 163, 184, 0.15) !important;
  color: #475569 !important;
  border: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
}

.introjs-skipbutton:hover,
.introjs-closebutton:hover,
.driver-close-btn:hover,
.driver-popover-close-btn:hover {
  background: rgba(148, 163, 184, 0.25) !important;
  color: #1e293b !important;
}

/* 13. Tarjetas de Precio / Planes */
.pricing-card,
.card-pricing,
.plan-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.pricing-card .card-body,
.card-pricing .card-body,
.plan-card .card-body {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

.pricing-card .mt-auto,
.card-pricing .mt-auto,
.plan-card .mt-auto,
.pricing-card .pricing-actions,
.card-pricing .pricing-actions,
.plan-card .pricing-actions {
  margin-top: auto !important;
}

/* Podio móvil: reducir a 2 columnas y márgenes reducidos */
@media (max-width: 768px) {
  .rk-podium {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  .rk-podium-card.first {
    grid-column: span 2 !important;
    padding-top: 0.75rem !important;
    /* reduced by 50% */
    padding-bottom: 0.75rem !important;
    /* reduced by 50% */
    transform: none !important;
  }

  .rk-podium-card {
    padding: 1rem 0.5rem !important;
  }
}

/* ==========================================================
   PART 2 MOBILE-FIRST UX OVERRIDES (< 768px)
   ========================================================== */
@media (max-width: 768px) {

  /* 1. Global H1 Page Header Hide & Margin Adjust */
  .content-header h1,
  .content-title,
  h1.page-title,
  h1.content-title,
  .section-title h1,
  .chat-title-wrapper h2 {
    display: none !important;
  }

  .content-header {
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  /* 2. Scrollable Tabs (Horizontal Scroll) */
  .nav-tabs,
  .tabs-container,
  .nav-pills,
  .activity-tabs,
  .custom-tabs,
  .lesson-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    /* Firefox */
  }

  .nav-tabs::-webkit-scrollbar,
  .tabs-container::-webkit-scrollbar,
  .nav-pills::-webkit-scrollbar,
  .activity-tabs::-webkit-scrollbar,
  .custom-tabs::-webkit-scrollbar,
  .lesson-tabs::-webkit-scrollbar {
    display: none !important;
    /* Webkit */
  }

  .nav-tabs .nav-item,
  .tabs-container .tab-item {
    flex: 0 0 auto !important;
  }

  /* 3. Anti-Footer Padding Spacing (Safe Area) */
  main,
  .main-content,
  .main-layout,
  #main-content {
    padding-bottom: 6rem !important;
    /* pb-24 */
  }

  /* 4. Dashboard Welcome & Quick Actions */
  .hero-section,
  .welcome-section,
  .welcome-banner {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .actions-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
  }

  .actions-grid .interactive-card {
    padding: 0.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .actions-grid .interactive-card .card-icon {
    width: 2.5rem !important;
    /* w-10 = 40px */
    height: 2.5rem !important;
    /* h-10 = 40px */
    font-size: 1.2rem !important;
    margin-bottom: 0.25rem !important;
  }

  .actions-grid .interactive-card .card-title {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    margin-bottom: 2px !important;
  }

  .actions-grid .interactive-card .card-description {
    font-size: 0.7rem !important;
    line-height: 1.25 !important;
    color: #64748b !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .lp-course-actions-wrap {
    display: block !important;
    width: 100% !important;
  }

  .btn-continue-route {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 1rem !important;
  }

  /* 5. Course Details Activities List stacking */
  .activity-footer {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  .activity-buttons-col {
    justify-content: space-between !important;
    width: 100% !important;
  }

  .activity-buttons-col .btn,
  .activity-buttons-col .activity-content-btn {
    flex: 1 !important;
    text-align: center !important;
  }

  /* 6. Dark Gamified Exercise Option buttons w-full */
  .option-item,
  .true-false-option,
  .matching-item {
    width: 100% !important;
    display: block !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    border-width: 1px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
  }

  .hud-summary-header {
    max-width: 90% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 7. Statistics PDF/Excel stack vertically */
  #reportForm {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  #reportForm select,
  #reportForm .btn,
  #reportForm a {
    width: 100% !important;
  }

  #reportForm .form-check {
    margin: 0.25rem 0 !important;
  }

  /* 8. Competencies card body padding Y & gap */
  .competencia-card .card-body {
    padding: 1rem !important;
    min-height: auto !important;
  }

  .competencia-card {
    margin-bottom: 1rem !important;
  }

  /* 9. Browse Catalog & My Courses: Stack course cards in 1 single full-width column on mobile */
  .course-grid-row > div,
  .course-grid-row > [class*="col-"],
  .catalog-card-item,
  .row:has(.course-kinetic) > div,
  .row:has(.course-card) > div,
  .row:has(.course-kinetic) > [class*="col-"],
  .row:has(.course-card) > [class*="col-"] {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  /* 10. Evaluations: Stack status badge and continue button */
  .eval-list-item .d-flex.align-items-center.gap-2.flex-shrink-0 {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 0.5rem !important;
  }

  .eval-list-item .d-flex.align-items-center.gap-2.flex-shrink-0 .badge {
    align-self: flex-start !important;
  }

  .eval-list-item .d-flex.align-items-center.gap-2.flex-shrink-0 .d-flex {
    width: 100% !important;
    display: flex !important;
    gap: 0.5rem !important;
  }

  .eval-list-item .d-flex.align-items-center.gap-2.flex-shrink-0 .btn {
    flex-grow: 1 !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* 11. Progress Campaign Map */
  .world-stage {
    min-height: 200px !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 12. Grades & Rankings */
  .results-dashboard {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .hud-stats-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .hud-stat-item {
    flex: 1 1 calc(33.33% - 8px) !important;
    min-width: 80px !important;
    padding: 8px !important;
  }

  .results-dashboard .table-responsive {
    border: none !important;
  }

  .results-dashboard table,
  .results-dashboard thead,
  .results-dashboard tbody,
  .results-dashboard th,
  .results-dashboard td,
  .results-dashboard tr {
    display: block !important;
    width: 100% !important;
  }

  .results-dashboard thead {
    display: none !important;
  }

  .results-dashboard tr {
    background: var(--surface-color, #ffffff) !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    padding: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  }

  .results-dashboard td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border: none !important;
    padding: 6px 0 !important;
    text-align: right !important;
    font-size: 0.85rem !important;
  }

  .results-dashboard td::before {
    font-weight: 700 !important;
    color: var(--text-secondary, #64748b) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    text-align: left !important;
    margin-right: 8px !important;
  }

  .results-dashboard td:nth-child(1)::before {
    content: "Nota Final:" !important;
  }

  .results-dashboard td:nth-child(2)::before {
    content: "Origen:" !important;
  }

  .results-dashboard td:nth-child(3)::before {
    content: "Estado:" !important;
  }

  .results-dashboard td:nth-child(4)::before {
    content: "Fecha:" !important;
  }

  /* 13. RPG World Lobbies game modes stack */
  .game-world-dashboard .row.g-4>div {
    width: 100% !important;
    margin-bottom: 1.5rem !important;
  }

  .btn-portal-3d {
    background: #8b5cf6 !important;
    border-color: #8b5cf6 !important;
    width: 100% !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  /* 14. Email & Chat compose */
  #emailForm .select2-container,
  #emailForm select,
  #emailForm input,
  #emailForm textarea,
  .select2,
  .select2-container,
  .select2-container--default,
  .select2-selection--multiple {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 15. Library search filters: custodia compacta (NO apilar).
     La vista library/index.php ya define el grid 2-col compacto con
     especificidad mayor; aqui solo garantizamos min-width:0 para que
     los campos no fuercen overflow. NO tocar display/flex-direction. */
  .library-filters form.row>div {
    min-width: 0 !important;
  }

  /* 16. Support Alert Box Margins */
  .alert,
  .alert-info,
  .alert-warning,
  .alert-success,
  .alert-danger {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
  }

  /* 17. Settings & Pricing Cards */
  .feature-list {
    width: fit-content !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
  }
}

/* ==========================================================
   PART 3: COMPACT MOBILE TYPOGRAPHY & CONTAINER PROPORTIONAL SCALING
   Prevents oversized titles, bloated banners, huge metric values,
   and giant padding from pushing viewport content below the fold.
   ========================================================== */
@media (max-width: 768px) {

  /* 1. Universal Headings Scaled for Small Screens */
  h1,
  .h1 {
    font-size: clamp(1.2rem, 4.5vw, 1.45rem) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 0.35rem !important;
  }

  h2,
  .h2 {
    font-size: clamp(1.08rem, 3.8vw, 1.25rem) !important;
    line-height: 1.28 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 0.35rem !important;
  }

  h3,
  .h3 {
    font-size: clamp(0.98rem, 3.2vw, 1.12rem) !important;
    line-height: 1.3 !important;
    margin-bottom: 0.3rem !important;
  }

  h4,
  .h4 {
    font-size: clamp(0.88rem, 2.8vw, 1rem) !important;
    line-height: 1.35 !important;
  }

  h5,
  .h5 {
    font-size: clamp(0.82rem, 2.5vw, 0.92rem) !important;
    line-height: 1.35 !important;
  }

  h6,
  .h6 {
    font-size: clamp(0.75rem, 2.2vw, 0.82rem) !important;
    line-height: 1.4 !important;
  }

  /* 2. Hero Sections, Banners & Welcome Containers */
  .hero-section,
  .rk-hero,
  .welcome-section,
  .welcome-banner,
  .course-hero,
  .profile-hero,
  .learning-hero,
  .stats-hero,
  .grade-hero,
  .support-hero,
  .header-gradient {
    padding: clamp(0.75rem, 2.5vw, 1.15rem) clamp(0.85rem, 3vw, 1.25rem) !important;
    margin-bottom: 0.85rem !important;
    border-radius: 14px !important;
    min-height: 0 !important;
  }

  /* 3. Hero Titles & Subtitles */
  .hero-title,
  .rk-hero-title,
  .course-title,
  .learning-hero-title,
  .profile-hero-title,
  .stats-title,
  .actions-title,
  .section-title,
  .content-title {
    font-size: clamp(1.15rem, 4vw, 1.4rem) !important;
    line-height: 1.22 !important;
    margin-bottom: 0.25rem !important;
    font-weight: 800 !important;
  }

  .hero-subtitle,
  .rk-hero-sub,
  .course-description,
  .profile-username,
  .learning-hero-sub,
  .stat-sublabel {
    font-size: clamp(0.75rem, 2.2vw, 0.85rem) !important;
    line-height: 1.35 !important;
    margin-bottom: 0.5rem !important;
  }

  /* 4. Motivational Quotes & Empty States */
  .motivational-quote {
    padding: 0.75rem 1rem !important;
    margin-bottom: 1rem !important;
    border-radius: 12px !important;
  }

  .quote-text {
    font-size: clamp(0.85rem, 2.4vw, 1rem) !important;
    margin-bottom: 0.25rem !important;
    line-height: 1.35 !important;
  }

  .quote-author {
    font-size: 0.75rem !important;
  }

  .empty-state {
    padding: 2rem 1rem !important;
    border-radius: 14px !important;
  }

  .empty-state i {
    font-size: 2.5rem !important;
    margin-bottom: 0.75rem !important;
  }

  .empty-state h3 {
    font-size: 1.15rem !important;
    margin-bottom: 0.35rem !important;
  }

  .empty-state p {
    font-size: 0.82rem !important;
    margin-bottom: 1.25rem !important;
  }

  /* 5. Big Stat Numbers, Metrics, Badges & Icons */
  .stat-value,
  .hero-stat-value,
  .stat-number,
  .score-badge,
  .hud-panel-xp-big,
  .hud-panel-xp-big * {
    font-size: clamp(1.15rem, 4.5vw, 1.45rem) !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
  }

  .stat-label,
  .hero-stat-label,
  .stat-meta,
  .course-stat-label {
    font-size: clamp(0.6rem, 1.8vw, 0.7rem) !important;
    line-height: 1.2 !important;
  }

  .stat-icon,
  .card-icon,
  .content-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
    border-radius: 8px !important;
    margin-bottom: 0.25rem !important;
  }

  /* 6. Cards, Podiums & Grid Containers */
  .interactive-card {
    padding: 0.65rem 0.5rem !important;
    border-radius: 10px !important;
  }

  .interactive-card .card-title {
    font-size: 0.8rem !important;
    margin-bottom: 0.15rem !important;
  }

  .course-card,
  .grade-card,
  .stat-card,
  .progress-stat-card,
  .premium-card,
  .world-card {
    border-radius: 12px !important;
  }

  .card-header {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.82rem !important;
  }

  .card-header h5,
  .card-header h6 {
    font-size: 0.85rem !important;
    margin: 0 !important;
  }

  .card-body {
    padding: 0.75rem !important;
  }

  /* 7. Profile & Avatar Scaling */
  .profile-avatar {
    width: 52px !important;
    height: 52px !important;
    font-size: 1.3rem !important;
    border-width: 2px !important;
  }

  .profile-avatar-ring {
    inset: -3px !important;
  }

  .profile-name {
    font-size: 1.1rem !important;
  }

  /* 8. Ranking Page Compact Scaling */
  .rk-hero-stats {
    gap: 0.4rem !important;
  }

  .rk-stat-badge {
    padding: 0.3rem 0.6rem !important;
    font-size: 0.76rem !important;
    border-radius: 8px !important;
    gap: 0.35rem !important;
  }

  .rk-tabs-nav {
    gap: 0.4rem !important;
    margin-bottom: 1rem !important;
  }

  .rk-tab-btn {
    padding: 0.45rem 0.65rem !important;
    font-size: 0.78rem !important;
    border-radius: 10px !important;
    min-width: 0 !important;
  }

  .rk-table th,
  .rk-table td {
    padding: 0.5rem 0.6rem !important;
    font-size: 0.8rem !important;
  }

  .rk-avatar {
    width: 36px !important;
    height: 36px !important;
    margin-bottom: 0.35rem !important;
  }

  .rk-podium-card {
    padding: 0.65rem 0.4rem !important;
    border-radius: 12px !important;
  }

  .rk-podium-name {
    font-size: 0.82rem !important;
  }

  .rk-podium-xp {
    font-size: 0.78rem !important;
  }

  /* 9. Competency Circles & Gauges */
  .progress-circle {
    width: 72px !important;
    height: 72px !important;
    font-size: 1.1rem !important;
  }
}

@media (max-width: 480px) {

  /* Extra compact scaling for smaller smartphones (< 480px) */
  h1,
  .h1 {
    font-size: clamp(1.05rem, 4.5vw, 1.25rem) !important;
    line-height: 1.3 !important;
  }

  h2,
  .h2 {
    font-size: clamp(0.95rem, 4vw, 1.1rem) !important;
    line-height: 1.32 !important;
  }

  h3,
  .h3 {
    font-size: clamp(0.88rem, 3.5vw, 1rem) !important;
    line-height: 1.35 !important;
  }

  .hero-section,
  .rk-hero,
  .welcome-section,
  .welcome-banner {
    padding: 0.65rem 0.75rem !important;
    margin-bottom: 0.65rem !important;
  }

  .stat-value,
  .hero-stat-value,
  .stat-number,
  .score-badge,
  .hud-panel-xp-big {
    font-size: 1.2rem !important;
  }

  .stat-label,
  .hero-stat-label {
    font-size: 0.6rem !important;
  }
}

/* ==========================================================
   UNIVERSAL RESPONSIVE TYPOGRAPHY & ANTI-CLIPPING SYSTEM
   Prevents overlapping text, cut-off letters (g, j, p, q, y, Á, É)
   and mounts on all mobile devices (Redmi Note 14 Pro, etc.)
   ========================================================== */

/* Universal text-wrap and line-height guarantees */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.page-title,
.content-title,
.card-title,
.modal-title,
.section-title,
.banner-text,
.alert,
.badge,
.btn,
.guide-title,
.guide-section-title,
.guide-subsection-title,
.guide-paragraph,
.content-item-title,
.exercise-title,
.prompt-title,
.statement,
.question-text {
  overflow-wrap: break-word !important;
  word-break: normal !important;
  word-wrap: break-word !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  text-wrap: pretty;
}

/* Metric labels, stats, badges, and headers should never split individual words across lines */
.stat-label,
.hero-stat-label,
.metric-label,
.hud-k,
.level-badge,
.badge,
.map-node-label,
.map-nav-pos {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

/* Prevent fixed height boxes that chop multi-line text */
.banner-content,
.card-header,
.card-title,
.page-title-box,
.alert,
.badge-pill,
.interactive-card,
.btn,
.lesson-content-compact,
.activity-top-info,
.dialogue-row {
  height: auto !important;
  min-height: fit-content !important;
}

/* Safe line-height on all text to prevent top/bottom letter slicing */
p,
.guide-paragraph,
.dialogue-text p,
.card-text,
.statement,
.explanation-text {
  line-height: 1.55 !important;
}

@media (max-width: 768px) {

  /* Fluid typography scaling with proper line spacing */
  h1,
  .h1,
  .page-title,
  .guide-title {
    font-size: clamp(1.15rem, 4.2vw, 1.45rem) !important;
    line-height: 1.35 !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  h2,
  .h2,
  .section-title h2,
  .guide-section-title {
    font-size: clamp(1.02rem, 3.5vw, 1.22rem) !important;
    line-height: 1.35 !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  h3,
  .h3,
  .card-title,
  .guide-subsection-title {
    font-size: clamp(0.92rem, 3vw, 1.08rem) !important;
    line-height: 1.38 !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  h4,
  .h4,
  h5,
  .h5,
  h6,
  .h6 {
    font-size: clamp(0.82rem, 2.6vw, 0.95rem) !important;
    line-height: 1.4 !important;
  }

  p,
  .text-muted,
  .card-text,
  .guide-paragraph {
    line-height: 1.55 !important;
    font-size: clamp(0.82rem, 2.5vw, 0.9rem) !important;
  }

  /* Document and Study Guide Reader Mobile Optimizations */
  .guide-reader-container {
    padding: 1.25rem 1rem !important;
    margin: 0.75rem auto !important;
    border-radius: 14px !important;
    max-width: 100% !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  }

  .dialogue-row {
    padding: 0.85rem 1rem !important;
    margin-bottom: 0.85rem !important;
    border-radius: 12px !important;
    gap: 0.4rem !important;
  }

  .dialogue-speaker {
    font-size: 0.75rem !important;
    padding: 0.2rem 0.6rem !important;
  }

  .lang-en {
    font-size: clamp(0.88rem, 2.8vw, 0.98rem) !important;
    line-height: 1.45 !important;
  }

  .lang-es {
    font-size: clamp(0.78rem, 2.5vw, 0.86rem) !important;
    line-height: 1.4 !important;
  }

  .scenario-box {
    padding: 0.85rem 1rem !important;
    margin: 1.25rem 0 !important;
    font-size: 0.85rem !important;
  }

  /* Lesson Theory / Intro Card & Related Resources */
  .lesson-intro-card {
    padding: 1.2rem 1rem !important;
    border-radius: 14px !important;
  }

  .related-resources-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* Modals & Dialogs Typography */
  .modal-title {
    font-size: clamp(1rem, 3.5vw, 1.2rem) !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  .modal-body {
    line-height: 1.5 !important;
    font-size: clamp(0.82rem, 2.5vw, 0.9rem) !important;
  }

  /* Table cells and card text anti-clipping */
  table td,
  table th {
    overflow-wrap: break-word !important;
    line-height: 1.35 !important;
  }

  .btn {
    font-size: clamp(0.78rem, 2.8vw, 0.88rem) !important;
    line-height: 1.3 !important;
  }

  /* Gamified Exercise Mobile Polish */
  .gamified-options-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .gamified-option-card {
    min-height: 48px !important;
    padding: 12px 14px !important;
    font-size: 0.92rem !important;
    border-radius: 12px !important;
  }

  .option-letter-chip {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.82rem !important;
  }

  .gamified-tf-container {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .gamified-tf-btn {
    padding: 14px 10px !important;
    font-size: 0.95rem !important;
  }

  .gamified-blank-input {
    min-width: 100px !important;
    max-width: 100% !important;
    font-size: 0.9rem !important;
    padding: 6px 8px !important;
  }
}

/* ==========================================================================
   EDGE-TO-EDGE EXPANSION & FLUID AUTO-SHRINKING BUTTONS (MOBILE 2026)
   ========================================================================== */
@media (max-width: 768px) {
  .main-content {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .content-body,
  .page-content,
  #studentPageContent {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .container-fluid,
  .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .main-content .row,
  .container-fluid>.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  .main-content [class*="col-"],
  .container-fluid [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
  }

  .lesson-card,
  .activity-track-card,
  .course-card,
  .stat-card,
  .evaluation-container,
  .card.universal-action-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 12px !important;
  }

  .exercise-game-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
  }

  /* Auto-shrink and wrap for all buttons, badges, and action bars */
  .exercise-actions,
  .card-tools,
  .study-assistant-panel,
  .d-flex.align-items-center.justify-content-between.flex-wrap {
    gap: 4px 6px !important;
  }

  .btn,
  .badge,
  .btn-sm,
  .btn-xs {
    max-width: 100% !important;
  }

  /* BARRA INFERIOR MODERNA EN CELULAR (CÁPSULA FLOTANTE SEGURA PARA APK / ANDROID) */
  .development-flow-dock {
    left: 12px !important;
    right: 12px !important;
    bottom: max(16px, calc(12px + env(safe-area-inset-bottom, 0px))) !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    height: 56px !important;
    padding: 7px 10px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1.5px solid rgba(102, 126, 234, 0.26) !important;
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.24), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    justify-content: space-between !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    z-index: 1085 !important;
  }

  .development-flow-btn.flow-btn-back,
  .development-flow-btn.flow-btn-prev {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    font-size: 1rem !important;
    justify-content: center !important;
    flex: 0 0 42px !important;
  }

  .development-flow-btn.flow-btn-back span,
  .development-flow-btn.flow-btn-prev span {
    display: none !important;
  }

  .development-flow-btn.primary,
  .development-flow-btn.flow-btn-next {
    flex: 1 1 auto !important;
    height: 42px !important;
    border-radius: 14px !important;
    padding: 0 16px !important;
    font-size: 0.92rem !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
  }
}

/* Reubicación y despeje de toasts y modales de notificación en móvil */
@media (max-width: 768px) {
  #minds-smart-resume-toast {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    left: 14px !important;
    right: 14px !important;
    margin: 0 auto !important;
    width: auto !important;
    max-width: 420px !important;
    z-index: 100050 !important;
  }
}

/* OCULTAMIENTO TOTAL DE BARRAS FLOTANTES CUANDO CUALQUIER MODAL ESTÁ ACTIVO */
body.modal-open .development-flow-dock,
body.modal-open #mainBottomNav,
body.modal-open .bottom-nav,
body.modal-open .development-tools-shell,
body.modal-open #mindsAudioToggleBtn,
body.modal-active-open .development-flow-dock,
body.modal-active-open #mainBottomNav,
body.modal-active-open .bottom-nav,
body.modal-active-open .development-tools-shell,
body.modal-open .student-bottom-nav,
body.modal-active-open .student-bottom-nav,
body:has(#pdf-textbook-exercise-modal:not(.d-none)) #mainBottomNav,
body:has(#pdf-textbook-exercise-modal:not(.d-none)) .bottom-nav,
body:has(#pdf-textbook-exercise-modal:not(.d-none)) .student-bottom-nav,
body:has(#pdf-exercise-modal-backdrop:not(.d-none)) #mainBottomNav,
body:has(#pdf-exercise-modal-backdrop:not(.d-none)) .bottom-nav,
body:has(#pdf-exercise-modal-backdrop:not(.d-none)) .student-bottom-nav,
body.swal2-shown #mainBottomNav,
body.swal2-shown .bottom-nav,
body.swal2-shown .student-bottom-nav,
body:has(.modal.show) #mainBottomNav,
body:has(.modal.show) .bottom-nav,
body:has(.modal.show) .student-bottom-nav,
body:has(.modal-backdrop) #mainBottomNav,
body:has(.modal-backdrop) .bottom-nav,
body:has(.modal-backdrop) .student-bottom-nav,
body:has(.pg-modal-overlay[style*="flex"]) #mainBottomNav,
body:has(.pg-modal-overlay[style*="flex"]) .bottom-nav,
body:has(.pg-modal-overlay[style*="flex"]) .student-bottom-nav,
body:has(.pg-modal-overlay.show) #mainBottomNav,
body:has(.pg-modal-overlay.show) .bottom-nav,
body:has(.pg-modal-overlay.show) .student-bottom-nav,
body:has([role="dialog"]) #mainBottomNav,
body:has([role="dialog"]) .bottom-nav,
body:has([role="dialog"]) .student-bottom-nav,
body:has(.swal2-container) #mainBottomNav,
body:has(.swal2-container) .bottom-nav,
body:has(.swal2-container) .student-bottom-nav,
body:has(.modal[style*="display: block"]) #mainBottomNav,
body:has(.modal[style*="display: block"]) .bottom-nav,
body:has(.modal[style*="display: block"]) .student-bottom-nav,
body:has(.modal[style*="display: flex"]) #mainBottomNav,
body:has(.modal[style*="display: flex"]) .bottom-nav,
body:has(.modal[style*="display: flex"]) .student-bottom-nav,
body.development-page .bottom-nav,
body.development-page #mainBottomNav,
body.development-page .student-bottom-nav {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  z-index: -100 !important;
}

/* =========================================================
   UNIVERSAL ADAPTIVE MODALS FOR MOBILE & TABLETS (< 768px)
   Garantiza que ningún modal tenga texto encimado, botones
   desbordados o cajas cortadas en dispositivos móviles.
   ========================================================= */
@media (max-width: 767.98px) {
  .modal.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .modal-dialog {
    margin: 0 !important;
    max-width: 100vw !important;
    width: 100vw !important;
    min-width: 100vw !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-height: auto !important;
  }

  .modal-dialog-centered::before {
    display: none !important;
    content: none !important;
    height: 0 !important;
  }

  .modal-content {
    max-height: 100dvh !important;
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Universal anti-syllable and anti-letter column stacking */
  .badge,
  .pill,
  .chip,
  .stat-text,
  .stat-label,
  .tile-lbl,
  .course-stat-label,
  .comp-label,
  .slot-sub-label,
  .slot-name-text,
  .slot-stat-text,
  .podium-lbl,
  .podium-val {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .modal-header {
    padding: 8px 12px !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }

  .modal-title {
    font-size: clamp(0.92rem, 3.2vw, 1.1rem) !important;
    line-height: 1.3 !important;
  }

  .modal-body {
    padding: 10px 12px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-grow: 1 !important;
    font-size: 0.85rem !important;
    line-height: 1.45 !important;
  }

  .modal-footer {
    padding: 6px 10px !important;
    flex-wrap: wrap !important;
    gap: 0.45rem !important;
    flex-shrink: 0 !important;
  }

  .modal-footer>* {
    margin: 0 !important;
    flex: 1 1 auto !important;
  }

  /* Universal side-space reclamation for inline utility padding inside modals */
  .modal .p-4,
  .modal-body.p-4,
  .modal-header.p-4,
  .modal-footer.p-4,
  .modal .px-4,
  .modal-body.px-4,
  .modal-header.px-4,
  .modal-footer.px-4,
  .modal .p-3,
  .modal-body.p-3,
  .modal-header.p-3,
  .modal-footer.p-3,
  .modal .px-3,
  .modal-body.px-3 {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .modal-body.p-4,
  .modal-body.p-3 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Catalog modal (browse courses) */
  .catalog-modal-backdrop {
    padding: 4px !important;
  }

  .catalog-modal-card {
    padding: 12px !important;
    max-width: calc(100vw - 8px) !important;
    width: calc(100vw - 8px) !important;
    border-radius: 16px !important;
  }

  .catalog-modal-header {
    margin-bottom: 0.65rem !important;
    padding-bottom: 0.5rem !important;
  }

  /* Exit modal (evaluations) */
  .exit-modal {
    padding: 4px !important;
  }

  #startConfirmModal.exit-modal .exit-modal-content,
  .exit-modal .exit-modal-content {
    margin: 4px auto !important;
    padding: 14px 12px !important;
    max-width: calc(100vw - 12px) !important;
    width: calc(100vw - 12px) !important;
    border-radius: 16px !important;
  }

  /* Streak recovery modal */
  #minds-streak-recovery-modal {
    padding: 16px 12px !important;
    max-width: calc(100vw - 16px) !important;
    border-radius: 16px !important;
  }

  .modal-footer .btn,
  .modal-body .btn {
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(0.76rem, 2.4vw, 0.86rem) !important;
    padding: 0.45rem 0.75rem !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.25 !important;
  }

  .mode-card,
  .diagnostic-opt-btn {
    padding: 0.65rem !important;
    border-radius: 12px !important;
    min-height: 44px !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .modal p,
  .modal span,
  .modal div,
  .modal h1,
  .modal h2,
  .modal h3,
  .modal h4,
  .modal h5,
  .modal h6 {
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
}

/* =========================================================
   DUOLINGO-STYLE INTERACTIVE WORD HINTS & FLOATING POPOVER
   ========================================================= */
.duo-word-hint {
  display: inline !important;
  cursor: pointer !important;
  text-decoration: underline dotted rgba(99, 102, 241, 0.38) !important;
  text-decoration-thickness: 0.9px !important;
  text-underline-offset: 3.5px !important;
  text-decoration-skip-ink: auto !important;
  border-bottom: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
  background: transparent !important;
  position: relative !important;
  user-select: text !important;
  vertical-align: baseline !important;
  transition: color 0.15s ease, text-decoration-color 0.15s ease, background-color 0.15s ease !important;
}

.duo-word-hint:hover,
.duo-word-hint:focus {
  background-color: rgba(99, 102, 241, 0.08) !important;
  text-decoration-color: rgba(79, 70, 229, 0.9) !important;
  text-decoration-thickness: 1.2px !important;
  color: #4338ca !important;
  outline: none !important;
}

.duo-word-hint.is-active {
  background-color: rgba(99, 102, 241, 0.16) !important;
  text-decoration: underline solid #4f46e5 !important;
  text-decoration-thickness: 1.5px !important;
  color: #312e81 !important;
  outline: none !important;
}

@media (max-width: 768px) {
  .duo-word-hint {
    display: inline !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    text-decoration: underline dotted rgba(99, 102, 241, 0.32) !important;
    text-decoration-thickness: 0.8px !important;
    text-underline-offset: 3px !important;
  }
}

.duo-popover {
  position: absolute;
  z-index: 10500;
  width: 250px;
  max-width: calc(100vw - 24px);
  background: #ffffff;
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(99, 102, 241, 0.12);
  font-family: inherit;
  transform-origin: center bottom;
  animation: duoPopIn 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes duoPopIn {
  0% {
    opacity: 0;
    transform: scale(0.88) translateY(6px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.duo-popover-caret {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #ffffff;
  border: 1px solid rgba(99, 102, 241, 0.25);
  transform: rotate(45deg);
}

.duo-popover.placement-top .duo-popover-caret {
  bottom: -7px;
  left: calc(50% - 6px);
  border-top: none;
  border-left: none;
}

.duo-popover.placement-bottom .duo-popover-caret {
  top: -7px;
  left: calc(50% - 6px);
  border-bottom: none;
  border-right: none;
}

.duo-popover-orig-word {
  font-size: 0.82rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.duo-popover-audio-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #4f46e5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 0.78rem;
}

.duo-popover-audio-btn:hover {
  background: #4f46e5;
  color: #ffffff;
  border-color: #4f46e5;
}

.duo-popover-translation {
  font-size: 1.15rem;
  font-weight: 800;
  color: #1e1b4b;
  margin: 4px 0 2px 0;
  line-height: 1.25;
}

.duo-popover-meta {
  font-size: 0.74rem;
  line-height: 1.35;
  color: #64748b;
}

.duo-popover-footer {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
}

.duo-popover-expand-btn {
  width: 100%;
  font-size: 0.72rem;
  font-weight: 700;
  color: #4f46e5;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.duo-popover-expand-btn:hover {
  background: #4f46e5;
  color: #ffffff;
  border-color: #4f46e5;
}

/* =========================================================================
   TEXTBOOK INTERACTIVE EXERCISES & MOBILE TYPOGRAPHY SAFEGUARDS
   ========================================================================= */
@media (max-width: 768px) {
  .textbook-question-card {
    padding: 12px 14px !important;
    margin-bottom: 12px !important;
    border-radius: 14px !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .textbook-option-card {
    padding: 10px 12px !important;
    font-size: 0.86rem !important;
    border-radius: 10px !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.4 !important;
  }

  .textbook-blank-input {
    width: 82px !important;
    min-width: 60px !important;
    max-width: 120px !important;
    padding: 2px 6px !important;
    font-size: 0.84rem !important;
    margin: 2px 2px !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }

  .textbook-inline-select {
    font-size: 0.82rem !important;
    padding: 2px 6px !important;
    margin: 2px 2px !important;
    max-width: 130px !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }

  .story-context-container,
  .reading-passage-text {
    font-size: 0.88rem !important;
    line-height: 1.7 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .pdf-inline-exercise-card {
    border-radius: 16px !important;
    overflow: hidden !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .pdf-exercise-modal-body {
    padding-bottom: 85px !important;
  }
}

/* ============================================================
   UNIVERSAL MOBILE-COMPACT (<=480px) — NO TOCA ESCRITORIO
   Objetivo: botones que se amontonan -> se acomodan en fila compacta
   que hace wrap; letras/tarjetas/metas/grid se achican SIN quitar
   información y SIN romper otros componentes.
   Se activa por clase .is-mobile-compact en <html> (la pone el layout
   con matchMedia) + fallback por media query. Selectores limitados
   a .main-content y exclusiones para HUD/asistente/modales/toasts.
   ============================================================ */
/* La clase hace el trabajo real (misma especificidad que media, pero
   sin depender de que el media aplique dentro de otro @media anidado) */
html.is-mobile-compact .main-content {
  min-width: 0 !important;
  overflow-x: hidden !important;
}

html.is-mobile-compact .main-content .browse-catalog-container,
html.is-mobile-compact .main-content .catalog-section,
html.is-mobile-compact .main-content .container-fluid,
html.is-mobile-compact .main-content .card,
html.is-mobile-compact .main-content .row,
html.is-mobile-compact .main-content [class*="col-"],
html.is-mobile-compact .main-content .course-meta-grid,
html.is-mobile-compact .main-content .meta-chip {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: break-word !important;
}

/* 1 COLUMNA: cualquier columna de tarjetas ocupa todo el ancho.
   Excepción: .keep-row / .mobile-two-columns / stats-row conservan 2 col. */
html.is-mobile-compact .main-content .row:not(.keep-row):not(.mobile-two-columns):not(.stats-row):not(.course-stats-row):not(.activity-stats-row):not(.library-filter-form)>[class*="col-"] {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Grids de catálogo/biblioteca/lecciones -> 1 columna */
html.is-mobile-compact .main-content .row.row-cols-2>*,
html.is-mobile-compact .main-content .row.row-cols-md-3>*,
html.is-mobile-compact .main-content .row-cols-2>*,
html.is-mobile-compact .main-content .library-grid,
html.is-mobile-compact .main-content .courses-grid,
html.is-mobile-compact .main-content .lessons-grid {
  grid-template-columns: 1fr !important;
}

html.is-mobile-compact .main-content .row.row-cols-2>*,
html.is-mobile-compact .main-content .row.row-cols-md-3>*,
html.is-mobile-compact .main-content .row-cols-2>* {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Meta grid 2x2 -> 1 columna para que NIVEL/CATEGORÍA no se expriman */
html.is-mobile-compact .main-content .course-meta-grid {
  grid-template-columns: 1fr !important;
  gap: 0.45rem !important;
}

/* Fila de botones amontonados -> fila compacta con wrap, botones chicos
   que comparten ancho SIN estirarse a 100% ni apilarse en 1 columna */
html.is-mobile-compact .main-content .catalog-actions,
html.is-mobile-compact .main-content .course-actions,
html.is-mobile-compact .main-content .actions-row-top,
html.is-mobile-compact .main-content .actions-row-bottom {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 0.4rem !important;
}

html.is-mobile-compact .main-content .actions-row-top .btn,
html.is-mobile-compact .main-content .actions-row-bottom .btn,
html.is-mobile-compact .main-content .catalog-actions .btn,
html.is-mobile-compact .main-content .catalog-actions button,
html.is-mobile-compact .main-content .catalog-actions a,
html.is-mobile-compact .main-content .course-actions .btn,
html.is-mobile-compact .main-content .course-actions button,
html.is-mobile-compact .main-content .course-actions a {
  width: auto !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  white-space: normal !important;
  text-align: center !important;
  font-size: 0.72rem !important;
  padding: 0.35rem 0.4rem !important;
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-wrap: break-word !important;
}

/* Botón "Mis Cursos (N)" del hero: que no empuje, ancho auto compacto */
html.is-mobile-compact .main-content .catalog-hero-card .btn {
  width: auto !important;
  flex: 0 1 auto !important;
  font-size: 0.72rem !important;
  padding: 0.35rem 0.7rem !important;
  white-space: nowrap !important;
}

/* Letras: escala compacta pero legible, nada se oculta */
html.is-mobile-compact .main-content h1 {
  font-size: 1.1rem !important;
  line-height: 1.25 !important;
}

html.is-mobile-compact .main-content h2 {
  font-size: 1rem !important;
  line-height: 1.25 !important;
}

html.is-mobile-compact .main-content h3,
html.is-mobile-compact .main-content h4 {
  font-size: 0.9rem !important;
  line-height: 1.3 !important;
}

html.is-mobile-compact .main-content .meta-data-label {
  font-size: 0.6rem !important;
}

html.is-mobile-compact .main-content .meta-data-val {
  font-size: 0.74rem !important;
}

html.is-mobile-compact .main-content .card-body {
  padding: 0.65rem 0.7rem !important;
}

/* ============================================================
   MODO COMPACTO UNIVERSAL AUTO (pantallas chicas)
   Se activa solo con media queries — sin JS, sin clases manuales.
   Objetivo: en celulares angostos los headers/letreros/botones de
   arriba no deben tragarse la pantalla. Todo lo de abajo solo
   reduce levemente tamaños, paddings y gaps. Nada se oculta.
   Orden: 360px pisa a 576px para pantallas muy chicas.
   ============================================================ */
@media (max-width: 575.98px) {

  .main-content .page-header,
  .main-content .content-header,
  .main-content .welcome-banner,
  .main-content .hero-section,
  .main-content .jumbotron,
  .main-content .page-title-section,
  .main-content .dashboard-header {
    padding: 0.6rem 0.75rem !important;
    margin-bottom: 0.6rem !important;
    border-radius: 10px !important;
    gap: 0.4rem !important;
  }

  .main-content .page-header h1,
  .main-content .content-header h1,
  .main-content .welcome-banner h1,
  .main-content .hero-section h1 {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.2rem !important;
  }

  .main-content .page-header p,
  .main-content .content-header p,
  .main-content .welcome-banner p,
  .main-content .hero-section p {
    font-size: 0.76rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.35rem !important;
  }

  .main-content .page-header .btn,
  .main-content .content-header .btn,
  .main-content .welcome-banner .btn,
  .main-content .hero-section .btn,
  .main-content .page-header .btn-group,
  .main-content .content-header .btn-group {
    font-size: 0.72rem !important;
    padding: 0.32rem 0.65rem !important;
    border-radius: 7px !important;
  }

  .main-content .alert {
    font-size: 0.74rem !important;
    padding: 0.5rem 0.65rem !important;
    margin-bottom: 0.55rem !important;
    border-radius: 8px !important;
    line-height: 1.4 !important;
  }

  .main-content .stats-grid,
  .main-content .stat-grid,
  .main-content .dashboard-stats {
    gap: 0.45rem !important;
    margin-bottom: 0.6rem !important;
  }

  .main-content .stat-card,
  .main-content .stat-box {
    padding: 0.55rem 0.6rem !important;
    border-radius: 10px !important;
  }

  .main-content .stat-card .stat-value,
  .main-content .stat-box .stat-value {
    font-size: 1.05rem !important;
  }

  .main-content .stat-card .stat-label,
  .main-content .stat-box .stat-label {
    font-size: 0.68rem !important;
  }

  .main-content .card {
    margin-bottom: 0.6rem !important;
    border-radius: 12px !important;
  }

  .main-content .card-body {
    padding: 0.6rem 0.7rem !important;
  }

  .main-content .section-title,
  .main-content .card-title {
    font-size: 0.85rem !important;
    margin-bottom: 0.35rem !important;
  }

  .main-content .btn,
  .main-content button.btn {
    font-size: 0.74rem !important;
    padding: 0.36rem 0.7rem !important;
    border-radius: 7px !important;
  }

  .main-content .btn-sm {
    font-size: 0.68rem !important;
    padding: 0.28rem 0.55rem !important;
  }

  .main-content .page-header .display-1,
  .main-content .page-header .display-2,
  .main-content .welcome-banner .display-1,
  .main-content .hero-section .fa-3x,
  .main-content .hero-section .fa-4x {
    font-size: 1.8rem !important;
  }
}

@media (max-width: 360px) {

  .main-content .page-header,
  .main-content .content-header,
  .main-content .welcome-banner,
  .main-content .hero-section {
    padding: 0.5rem 0.6rem !important;
    margin-bottom: 0.5rem !important;
  }

  .main-content .page-header h1,
  .main-content .content-header h1,
  .main-content .welcome-banner h1,
  .main-content .hero-section h1 {
    font-size: 0.95rem !important;
  }

  .main-content .page-header p,
  .main-content .content-header p,
  .main-content .welcome-banner p,
  .main-content .hero-section p,
  .main-content .alert {
    font-size: 0.7rem !important;
  }

  .main-content .btn,
  .main-content button.btn {
    font-size: 0.7rem !important;
    padding: 0.32rem 0.6rem !important;
  }

  .main-content .card-body {
    padding: 0.55rem 0.6rem !important;
  }
}

/* ==========================================================================
   AUTO-COMPACT BUTTON ROWS — v1
   Universal para todas las vistas de estudiante.
   --------------------------------------------------------------------------
   El layout marca automáticamente (.auto-chip-row en la fila y .auto-chip-btn
   en cada botón) cualquier fila cuyo contenido son SOLO botones .btn (2 o más).
   Aquí se dibujan como chips compactos que fluyen en varias columnas, en lugar
   de quedar apiladas a ancho completo ("un botón debajo del otro").
   No aplica a filas con inputs/selects ni a filas de un único botón (CTA).
   Opt-out manual: añade .keep-stack (o .no-auto-chip) a la fila.
   ========================================================================== */
@media (max-width: 767.98px) {

  .main-content .auto-chip-row,
  #studentPageContent .auto-chip-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.28rem 0.35rem !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .main-content .auto-chip-row>.btn,
  .main-content .auto-chip-row>.auto-chip-btn,
  #studentPageContent .auto-chip-row>.btn,
  #studentPageContent .auto-chip-row>.auto-chip-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    align-self: center !important;
    margin: 0 !important;
    min-height: 28px !important;
    height: auto !important;
    padding: 0.22rem 0.52rem !important;
    font-size: clamp(0.66rem, 2.6vw, 0.76rem) !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .main-content .auto-chip-row>.btn i,
  .main-content .auto-chip-row>.auto-chip-btn i,
  #studentPageContent .auto-chip-row>.btn i,
  #studentPageContent .auto-chip-row>.auto-chip-btn i {
    margin-right: 0.22rem !important;
    font-size: 0.82em !important;
  }
}

/* Móviles muy estrechos (<= 380px): chips aún más compactos, siempre legibles */
@media (max-width: 380px) {

  .main-content .auto-chip-row,
  #studentPageContent .auto-chip-row {
    gap: 0.24rem 0.28rem !important;
  }

  .main-content .auto-chip-row>.btn,
  .main-content .auto-chip-row>.auto-chip-btn,
  #studentPageContent .auto-chip-row>.btn,
  #studentPageContent .auto-chip-row>.auto-chip-btn {
    padding: 0.18rem 0.42rem !important;
    font-size: 0.65rem !important;
    min-height: 26px !important;
  }
}

/* Filas con número exacto de botones: reparto armónico de la línea */
@media (max-width: 767.98px) {

  /* Fila de 2 botones: 50% cada uno */
  .main-content .auto-chip-row.auto-chip-2>.btn,
  #studentPageContent .auto-chip-row.auto-chip-2>.btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }

  /* Fila de 3 botones: 33.3% cada uno */
  .main-content .auto-chip-row.auto-chip-3>.btn,
  #studentPageContent .auto-chip-row.auto-chip-3>.btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }

  /* Fila de 4 botones: cuadrícula 2x2 armónica de 50% */
  .main-content .auto-chip-row.auto-chip-4>.btn,
  #studentPageContent .auto-chip-row.auto-chip-4>.btn {
    flex: 1 1 calc(50% - 0.25rem) !important;
    min-width: 0 !important;
    width: auto !important;
  }
}

/* MINI-GAMES 4-CHOICE GRID PROTECTION (Nunca chips asimétricos ni tamaños dispares) */
.game-choices-grid,
#gameChoicesGrid,
.trivia-options-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 480px) {

  .game-choices-grid,
  #gameChoicesGrid,
  .trivia-options-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

.game-choices-grid .game-choice-btn,
#gameChoicesGrid .game-choice-btn,
.trivia-options-grid .game-choice-btn,
.game-choice-btn {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 52px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  flex: 1 1 auto !important;
  font-size: clamp(0.85rem, 3.2vw, 1.02rem) !important;
  padding: 10px 14px !important;
  text-align: left !important;
  white-space: normal !important;
}

/* ==========================================================================
   SISTEMA DE DISEÑO ELEVADO — FORMAS, COLORES Y EFECTOS TÁCTILES "DE GOMA"
   (Mejoras universales para PC y Celular)
   ========================================================================== */

/* 1. Tarjetas Modernas con Bordes Suaves y Micro-Elevación */
.card {
  border-radius: 18px !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease !important;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(99, 102, 241, 0.06) !important;
}

[data-theme="dark"] .card {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(30, 41, 59, 0.75) !important;
  backdrop-filter: blur(12px) !important;
}

/* 2. Botones con Tacto "De Goma" (Efecto resorte suave) */
.btn-primary,
.btn-indigo {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.btn-primary:hover,
.btn-indigo:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.45) !important;
}

.btn-primary:active,
.btn:active,
.quiz-option:active {
  transform: scale(0.96) !important;
}

/* 3. Badges e Indicadores con Cápsulas Modernas */
.badge.rounded-pill {
  padding: 0.45em 0.85em !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}

/* 4. Barra Superior Flotante — Sincronización perfecta en pantallas grandes */
@media (min-width: 992px) {
  #mainBottomNav {
    animation: mindsDockFloatIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

@keyframes mindsDockFloatIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -15px) scale(0.95);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

/* ==========================================================================
   MODO APK NATIVO MÓVIL — DECLUTTER UNIVERSAL VISTA POR VISTA (ESTUDIANTE)
   Compacta textos, tarjetas, cabeceras y paneles en todas las carpetas:
   dashboard, courses, development, progress, estadisticas, ranking,
   achievements, profile, settings, support, chat, classmates, payment, library
   ========================================================================== */
@media (max-width: 991.98px) {

  html,
  body {
    min-height: 100dvh;
    overflow-x: hidden !important;
    touch-action: pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
  }

  .main-content {
    min-height: 100dvh;
    padding-top: calc(env(safe-area-inset-top, 0px) + 48px) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 70px) !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    overflow-x: hidden !important;
  }

  .page-content,
  #studentPageContent,
  #studentPageContent>div,
  #studentPageContent .container,
  #studentPageContent .container-fluid,
  #studentPageContent .course-view-body,
  #studentPageContent .content-body,
  #studentPageContent .dashboard-container,
  #studentPageContent .competency-hub-wrapper,
  #studentPageContent .profile-v2-container,
  #studentPageContent .resource-container,
  #studentPageContent .verbs-interactive-wrapper,
  #studentPageContent .tools-header,
  #studentPageContent .rk-wrap,
  #studentPageContent .browse-catalog-container,
  #studentPageContent .report-hub-shell,
  #studentPageContent .classmates-hub-root {
    padding-left: 2px !important;
    padding-right: 2px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .main-content .card,
  .main-content .bento-card,
  .main-content .stat-card,
  .main-content .course-card,
  .main-content .achievement-card,
  .main-content .ranking-card,
  .main-content .lp-node-card,
  .main-content .welcome-banner,
  .main-content .exercise-game-shell,
  .main-content .hero-welcome-card,
  .main-content .rk-hero,
  .main-content .rk-wrap,
  .main-content .comp-hero-banner,
  .main-content .profile-v2-hero,
  .main-content .achievements-header-card,
  .main-content .classmates-header-card,
  .main-content .settings-header,
  .main-content .tools-header,
  .main-content .report-sheet-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  .main-content .motivational-quote,
  .main-content .hero-subtitle-long,
  .main-content .lp-desc,
  .main-content .course-card-long-desc,
  .main-content .breadcrumb,
  .main-content .content-header .text-muted.small {
    display: none !important;
  }

  /* 2. Tipografía compacta de aplicación nativa (APK) en todas las vistas */
  .main-content h1,
  .main-content .h1,
  .main-content .page-title {
    font-size: 1.05rem !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    margin-bottom: 0.35rem !important;
  }

  .main-content h2,
  .main-content .h2,
  .main-content .section-title {
    font-size: 0.94rem !important;
    line-height: 1.22 !important;
    font-weight: 800 !important;
    margin-bottom: 0.3rem !important;
  }

  .main-content h3,
  .main-content .h3,
  .main-content h4,
  .main-content .h4,
  .main-content .card-title {
    font-size: 0.84rem !important;
    line-height: 1.22 !important;
    font-weight: 700 !important;
    margin-bottom: 0.22rem !important;
  }

  .main-content h5,
  .main-content .h5,
  .main-content h6,
  .main-content .h6 {
    font-size: 0.76rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.18rem !important;
  }

  .main-content p,
  .main-content li,
  .main-content .card-text {
    font-size: 0.74rem !important;
    line-height: 1.32 !important;
  }

  /* 3. Compactación de Tarjetas, Bento Grids y Contenedores (Dashboard, Cursos, Progreso, Ranking, Perfil) */
  .main-content .card,
  .main-content .bento-card,
  .main-content .stat-card,
  .main-content .course-card,
  .main-content .achievement-card,
  .main-content .ranking-card,
  .main-content .lp-node-card {
    border-radius: 14px !important;
    margin-bottom: 8px !important;
  }

  .main-content .card-body,
  .main-content .bento-card {
    padding: 10px 12px !important;
  }

  .main-content .card-header,
  .main-content .card-footer {
    padding: 8px 12px !important;
  }

  /* 4. Dashboard: Hero Banner y Estadísticas Compactas tipo APK */
  .main-content .next-action-hero-banner,
  .main-content .welcome-banner,
  .main-content .hero-welcome-card {
    padding: 10px 12px !important;
    border-radius: 14px !important;
    margin-bottom: 10px !important;
  }

  /* 5. Vista de Desarrollo (Course, Lesson, Activity, Exercise) sin saturación */
  .main-content .exercise-game-shell {
    border-radius: 14px !important;
    padding: 8px !important;
    margin-bottom: 8px !important;
  }

  .main-content .exercise-game-body {
    padding: 8px 10px !important;
  }

  .main-content .study-assistant-panel {
    padding: 8px 10px !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
  }

  .main-content .option-item,
  .main-content .true-false-option,
  .main-content .matching-item {
    padding: 8px 10px !important;
    font-size: 0.75rem !important;
    min-height: 40px !important;
    border-radius: 10px !important;
  }

  /* 6. Tablas y Listados (Ranking, Compañeros, Pagos, Estadísticas) */
  .main-content .table th,
  .main-content .table td {
    padding: 6px 8px !important;
    font-size: 0.72rem !important;
    vertical-align: middle !important;
  }

  /* 7. Barra de Navegación Inferior estilo APK Fija */
  #mainBottomNav {
    height: 56px !important;
    padding: 4px 6px !important;
    border-radius: 18px 18px 0 0 !important;
  }

  /* 8. Motor de Respuesta Táctil APK Instantánea (0ms Tap Delay & Feedback Háptico Visual) */
  *,
  *::before,
  *::after {
    -webkit-tap-highlight-color: transparent !important;
  }

  a,
  button,
  input,
  select,
  textarea,
  [role="button"],
  .bottom-nav-item,
  .btn,
  .card,
  .bento-card,
  .list-group-item,
  .chip-item,
  .development-flow-btn,
  .development-tool-chip,
  .badge,
  .nav-link,
  .exercise-option,
  .option-item,
  .list-group-item-action {
    touch-action: manipulation !important;
  }

  /* Feedback visual inmediato al tocar (0ms - nativo APK) */
  .bottom-nav-item:active,
  .btn:active,
  .development-flow-btn:active,
  .development-tool-chip:active,
  .chip-item:active,
  .option-item:active,
  .card-hover:active,
  [role="button"]:active {
    transform: scale(0.96) !important;
    transition: transform 0.04s ease-out !important;
  }

  /* 9. Eliminación Total del "Huequito" Lateral (Edge-to-Edge APK) */
  .content-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .main-content .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .main-content .row>[class*="col-"] {
    padding-left: 3px !important;
    padding-right: 3px !important;
    box-sizing: border-box !important;
  }

  .main-content .card,
  .main-content .bento-card,
  .main-content .stat-card,
  .main-content .course-card,
  .main-content .achievement-card,
  .main-content .ranking-card,
  .main-content .lp-node-card,
  .main-content .welcome-banner,
  .main-content .exercise-game-shell,
  .main-content .hero-welcome-card,
  .main-content .rk-hero,
  .main-content .rk-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  /* 10. Eliminación Radical y Universal de Columnas de Letras (Anti-Letter-Stacking Universal) */
  /* Regla base de oro: NUNCA romper palabras letra por letra en ningún elemento del sistema */
  *,
  *::before,
  *::after {
    word-break: normal;
  }

  /* Badges, tags, chips, pills, tab buttons, table headers, labels, and stats NEVER wrap or break into letter columns */
  th,
  .table th,
  .rk-table th,
  thead th,
  .badge,
  .badge *,
  .chip-item,
  .chip-item *,
  .chip-label,
  .tag-chip,
  .tag-chip *,
  .exercise-micro-chip,
  .exercise-micro-chip *,
  .study-pill-label,
  .flow-btn-label,
  .bottom-nav-label,
  .nav-link,
  .nav-pill-btn,
  .nav-pill-btn *,
  .sub-tab-btn,
  .sub-tab-btn *,
  .rk-tab-btn,
  .rk-tab-btn *,
  .rk-mode-pill,
  .rk-stat-badge,
  .rk-stat-badge *,
  .hero-level-badge,
  .hero-level-badge *,
  .hero-status-pill,
  .hero-status-pill *,
  .unified-stat-pill,
  .unified-stat-pill *,
  .gamified-pill-btn,
  .gamified-pill-btn *,
  .pill-badge,
  .tab-badge,
  .mini-stat-value,
  .mini-stat,
  .score-badge,
  .comp-action-btn,
  .btn-study-mode-pill,
  .btn-minds-zoom,
  .hero-metric-tile .tile-lbl,
  .hero-metric-tile .tile-val,
  .header-chip,
  .header-chip *,
  .role-chip,
  .role-chip *,
  .green-chip,
  .blue-chip,
  .loot-rarity-badge,
  .catalog-course-tag,
  .catalog-unlocked-badge,
  .catalog-chip,
  .slot-sub-label,
  .slot-name-text,
  .slot-stat-text,
  .podium-item .podium-lbl,
  .podium-item .podium-sub,
  .role-pill,
  .gold-pill,
  .xp-pct,
  .modal-tab-pill,
  .modal-step-badge,
  .step-counter,
  .comp-level-chip,
  .comp-level-chip *,
  .comp-stat-lbl,
  .comp-stat-val,
  .comp-action-pill,
  .comp-action-pill *,
  .minds-tb-badge,
  .minds-tb-tab,
  .minds-tb-tab *,
  .minds-tb-page-indicator,
  .minds-tb-page-indicator *,
  .minds-tb-rule-name,
  .minds-tb-vocab-word,
  .minds-tb-vocab-phonetic,
  .badge:not(.text-wrap),
  .badge-pill,
  .course-meta-pill,
  #seasonDropdownBtn,
  #seasonDropdownBtn *,
  .educational-modal .btn,
  .educational-fullscreen .btn,
  .educational-modal-header *,
  .edu-segmented-tabs .btn,
  .edu-book-direct-bar *,
  .btn:not(.text-wrap):not(.exercise-option):not(.option-item):not(.card-option):not(.true-false-option),
  button:not(.text-wrap):not(.exercise-option):not(.option-item):not(.card-option):not(.true-false-option) {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  /* Textos descriptivos largos en tarjetas, párrafos, modales y listas envuelven solo por palabras completas, NUNCA letra por letra */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  li,
  td,
  label,
  .card-text,
  .activity-title,
  .lesson-title,
  .modal-body p,
  .modal-body div,
  .modal-body span,
  .educational-modal-body p,
  .educational-modal-body div,
  .educational-modal-body span,
  .option-item .option-text,
  .duo-bubble-prompt,
  .duo-bubble-text,
  .textbook-option-card,
  .textbook-exercise-card,
  .guide-body,
  .guide-title,
  .hero-student-name,
  .hero-username,
  .header-title,
  .header-sub,
  .card-v2-header h2,
  .card-v2-header p,
  .account-field-row .field-label,
  .account-field-row .field-value,
  .minds-tb-title,
  .minds-tb-topic,
  .minds-tb-summary,
  .minds-tb-formula-body,
  .minds-tb-rule-struct,
  .minds-tb-example-pill,
  .minds-tb-vocab-trans,
  .minds-tb-vocab-example,
  .minds-tb-mistake-exp {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: manual !important;
  }

  /* Cero huequito lateral en modales en pantallas de celular (100% full bleed) */
  @media (max-width: 576px) {
    .modal.show {
      padding: 0 !important;
    }

    .modal-dialog {
      margin: auto 0 0 0 !important;
      max-width: 100% !important;
      width: 100% !important;
      min-width: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      max-height: 96dvh !important;
    }

    .modal-content {
      border-radius: 18px 18px 0 0 !important;
      border-bottom: none !important;
      border-left: none !important;
      border-right: none !important;
      max-height: 96dvh !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
    }

    .modal-content>form {
      display: flex !important;
      flex-direction: column !important;
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow: hidden !important;
      height: 100% !important;
      margin: 0 !important;
    }

    .modal-header {
      flex-shrink: 0 !important;
    }

    .modal-body {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      -webkit-overflow-scrolling: touch !important;
      overscroll-behavior: contain !important;
      touch-action: pan-y !important;
    }

    .modal-footer {
      flex-shrink: 0 !important;
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 8px !important;
    }

    .profile-v2-modal .modal-dialog {
      height: 100dvh !important;
      min-height: 100dvh !important;
      margin: 0 !important;
    }

    .profile-v2-modal .modal-content {
      border-radius: 0 !important;
      height: 100dvh !important;
      max-height: 100dvh !important;
    }

    .hero-metrics-grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 8px !important;
      padding: 8px !important;
    }

    .hero-metric-tile .tile-lbl {
      font-size: clamp(0.6rem, 2.2vw, 0.72rem) !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      display: block !important;
    }

    .gear-slot-tile .slot-sub-label,
    .gear-slot-tile .slot-name-text,
    .gear-slot-tile .slot-stat-text {
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      display: block !important;
    }
  }

  /* 11. Modal Educativo y Libro de Texto: Garantía 100% de Visibilidad y Pantalla Completa en Celular */
  .educational-overlay.show,
  .educational-overlay[style*="display: flex"] {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 99999 !important;
  }

  /* 12. OPPO / ColorOS / Narrow Android (350px-412px, 20:9, 1.15x-1.3x Font Scaling) Universal Shield */
  html,
  body {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Prevent fixed-height bottom bars from clipping labels when OPPO font zoom is active */
  #mainBottomNav,
  .development-flow-dock {
    min-height: 56px !important;
    height: auto !important;
    padding-bottom: max(4px, env(safe-area-inset-bottom, 0px)) !important;
  }

  #mainSidebar,
  .sidebar-container {
    height: 100vh !important;
    height: 100dvh !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .sidebar-overlay {
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
  }

  /* Prevent long buttons and badges from bursting horizontally out of 360px cards */
  .btn,
  button,
  .badge,
  .nav-link,
  [class*="pill"],
  [class*="chip"] {
    max-width: 100% !important;
  }

  .btn.w-100,
  button.w-100,
  .modal-footer .btn {
    white-space: normal !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  /* Collapse all >280px minmax CSS grids to 1fr on mobile phones (Student, Professor, Admin, Library) */
  @media (max-width: 640px) {

    .courses-grid,
    .lp-timeline-grid,
    .modals-perfect-grid,
    .verb-cards-grid,
    .synth-examples-grid,
    .lp-grid,
    .charts-grid,
    .metrics-grid,
    .layout-grid,
    .main-grid,
    .panel-grid,
    [style*="minmax(280px"],
    [style*="minmax(300px"],
    [style*="minmax(310px"],
    [style*="minmax(320px"],
    [style*="minmax(330px"],
    [style*="minmax(340px"],
    [style*="minmax(350px"],
    [style*="minmax(360px"],
    [style*="minmax(380px"],
    [style*="minmax(400px"] {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    /* Radar maps and circular surfaces fit inside 360px padded cards */
    .rpg-map-grid-surface {
      width: min(300px, 80vw) !important;
      height: min(300px, 80vw) !important;
    }

    #grimoireMapGrid {
      width: min(290px, 76vw) !important;
      height: min(290px, 76vw) !important;
    }

    /* Fixed-width drawers fit inside 360px OPPO screens */
    .right-sidebar,
    #pdf-toc-drawer,
    .versatile-paginator-container {
      width: min(340px, 92vw) !important;
      max-width: 92vw !important;
      height: 100dvh !important;
    }

    .notifications-menu {
      width: min(340px, calc(100vw - 20px)) !important;
      right: -6px !important;
    }

    /* Student chat shell adapts cleanly to virtual keyboard & gesture bar */
    .chat-shell {
      height: calc(100dvh - 150px) !important;
      min-height: 260px !important;
    }

    /* Resource tables never force 540px block width */
    .resource-container table,
    .resource-container .table,
    .resource-container .verb-table,
    .resource-container .phr-table,
    table.verb-table {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch !important;
    }
  }
}




/* ==============================================================================
   CONTENTMINDS ACADEMY — UNIVERSAL MODAL SCROLL & ERGONOMICS ARCHITECTURE
   Garantiza que el scroll ocurra DENTRO del modal y nunca arrastre la página de fondo.
   Previene botones salidos, letras apiñadas y desbordamiento en Oppo, Xiaomi y iOS.
   ============================================================================== */

body.modal-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.modal {
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.modal-dialog {
  display: flex !important;
  flex-direction: column !important;
  max-height: calc(100dvh - 1.5rem) !important;
}

.modal-dialog-scrollable .modal-content,
.modal-dialog-centered .modal-content,
.modal-content {
  display: flex !important;
  flex-direction: column !important;
  max-height: calc(100dvh - 1.5rem) !important;
  overflow: hidden !important;
  position: relative !important;
}

.modal-content>form {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  height: 100% !important;
  margin: 0 !important;
}

.modal-header {
  flex-shrink: 0 !important;
}

.modal-body,
.modal-dialog-scrollable .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
}

.modal-footer {
  flex-shrink: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

.modal-footer>* {
  margin: 0 !important;
}

/* Ergonomía de Botones en Pie de Modal para Celulares */
@media (max-width: 576px) {
  .modal-dialog {
    max-height: 96dvh !important;
    width: calc(100% - 1rem) !important;
    margin: 0.5rem auto !important;
  }

  .modal-dialog.modal-dialog-centered {
    margin: auto !important;
  }

  .modal-dialog:not(.modal-dialog-centered) {
    margin: auto 0 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .modal-dialog:not(.modal-dialog-centered) .modal-content {
    border-radius: 20px 20px 0 0 !important;
  }

  .modal-dialog.modal-dialog-centered .modal-content {
    border-radius: 20px !important;
  }

  .modal-footer {
    padding: 0.75rem 1rem !important;
    gap: 8px !important;
  }

  .modal-footer .btn,
  .modal-footer button {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    line-height: 1.25 !important;
  }

  /* Stack buttons full-width when there are 2 actions on mobile (except multi-step wizards) */
  .modal:not(.profile-v2-modal) .modal-footer.d-flex.justify-content-between,
  .modal:not(.profile-v2-modal) .modal-footer.d-flex.justify-content-end {
    flex-direction: column-reverse !important;
    width: 100% !important;
  }

  .modal:not(.profile-v2-modal) .modal-footer.d-flex.justify-content-between>*,
  .modal:not(.profile-v2-modal) .modal-footer.d-flex.justify-content-end>*,
  .modal:not(.profile-v2-modal) .modal-footer.d-flex.justify-content-between .btn,
  .modal:not(.profile-v2-modal) .modal-footer.d-flex.justify-content-end .btn {
    width: 100% !important;
  }

  .modal:not(.profile-v2-modal) .modal-footer.d-flex.justify-content-between>.d-flex,
  .modal:not(.profile-v2-modal) .modal-footer.d-flex.justify-content-end>.d-flex {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
}