/* ===================================================================
   custom.css — Marca Academix
   Sobreescribe las variables de Bootstrap 5.3 (--bs-*) para aplicar
   la identidad visual. Primero resolvemos con utilidades de Bootstrap;
   acá va solo lo que la marca necesita y los pequeños toques propios.
   =================================================================== */

/* ── Tipografía (cargada por CDN en header.php) ───────────────────── */
:root {
  --ax-font-titulo: 'Plus Jakarta Sans', system-ui, sans-serif;
  --ax-font-cuerpo: 'Inter', system-ui, sans-serif;

  /* Paleta de marca — color de énfasis principal (magenta Academix) */
  --ax-marca: #FF0097;         /* acento principal de la marca */
  --ax-marca-600: #D1007D;     /* variante más oscura (hover/active) */
  /* Alias histórico (mantiene compatibilidad con reglas que lo usaban) */
  --ax-indigo: var(--ax-marca);
  --ax-indigo-600: var(--ax-marca-600);
  --ax-ambar: #F59E0B;   /* acento / logros / CTAs secundarios */
  --ax-menta: #10B981;   /* éxito / progreso aprobado */
}

/* ===================================================================
   TEMA CLARO (por defecto)
   =================================================================== */
[data-bs-theme="light"] {
  --bs-primary: #FF0097;
  --bs-primary-rgb: 255, 0, 151;
  --bs-secondary: #64748b;
  --bs-secondary-rgb: 100, 116, 139;
  --bs-success: #10B981;
  --bs-success-rgb: 16, 185, 129;
  --bs-warning: #F59E0B;
  --bs-warning-rgb: 245, 158, 11;
  --bs-info: #06B6D4;
  --bs-info-rgb: 6, 182, 212;

  --bs-body-bg: #f6f7fb;
  --bs-body-color: #334155;          /* texto un poco más suave que el negro puro */
  --bs-emphasis-color: #1e293b;
  --bs-border-color: #edeef4;        /* bordes muy livianos */
  --bs-tertiary-bg: #fbfcfe;         /* superficies sutiles */
  --bs-secondary-color: #7c8499;     /* gris secundario más amable */

  --bs-link-color: #FF0097;
  --bs-link-hover-color: #D1007D;

  /* Sombra de marca: difusa y de bajo contraste (look suave) */
  --ax-sombra: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
  --ax-sombra-lg: 0 4px 12px rgba(15,23,42,.06), 0 18px 48px rgba(15,23,42,.10);
}

/* ===================================================================
   TEMA OSCURO — cuidado para lectura cómoda y buen contraste
   =================================================================== */
[data-bs-theme="dark"] {
  --bs-primary: #FF5CB8;       /* magenta más claro para contraste sobre fondo oscuro */
  --bs-primary-rgb: 255, 92, 184;
  --bs-success: #34d399;
  --bs-success-rgb: 52, 211, 153;
  --bs-warning: #fbbf24;
  --bs-warning-rgb: 251, 191, 36;
  --bs-info: #22d3ee;
  --bs-info-rgb: 34, 211, 238;

  --bs-body-bg: #141414;             /* gris muy oscuro (neutro, sin tinte azul) */
  --bs-body-color: #cccccf;
  --bs-emphasis-color: #f4f4f5;
  --bs-border-color: #2d2d2d;        /* bordes apenas perceptibles */

  --bs-tertiary-bg: #1e1e1e;         /* superficies de cards/inputs */
  --bs-secondary-bg: #191919;
  --bs-secondary-color: #9a9aa0;

  --bs-link-color: #FF8AD0;
  --bs-link-hover-color: #FFB3E0;

  --ax-sombra: 0 1px 2px rgba(0,0,0,.2), 0 10px 30px rgba(0,0,0,.35);
  --ax-sombra-lg: 0 6px 18px rgba(0,0,0,.3), 0 24px 60px rgba(0,0,0,.5);
}

/* ===================================================================
   Base
   =================================================================== */
body {
  font-family: var(--ax-font-cuerpo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--ax-font-titulo);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Botones: esquinas suaves y micro-interacción discreta */
.btn { border-radius: .7rem; font-weight: 500; }
.btn-lg { border-radius: .85rem; }
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--ax-indigo-600);
  --bs-btn-hover-border-color: var(--ax-indigo-600);
  --bs-btn-active-bg: var(--ax-indigo-600);
  box-shadow: 0 6px 18px rgba(var(--bs-primary-rgb), .18);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(var(--bs-primary-rgb), .26); }

/* Botón acento (logros / 2x1) */
.btn-ambar {
  --bs-btn-color: #1e1b00;
  --bs-btn-bg: var(--ax-ambar);
  --bs-btn-border-color: var(--ax-ambar);
  --bs-btn-hover-color: #1e1b00;
  --bs-btn-hover-bg: #d97706;
  --bs-btn-hover-border-color: #d97706;
  --bs-btn-active-bg: #b45309;
  font-weight: 600;
}

/* ===================================================================
   Tarjetas: bordes suaves, sombras sutiles, hover elevado
   =================================================================== */
.card {
  border-radius: 1.25rem;
  border-color: var(--bs-border-color);
}
/* Sombra suave por defecto en cards con .shadow-sm (override Bootstrap) */
.shadow-sm { box-shadow: var(--ax-sombra) !important; }
.shadow, .shadow-lg { box-shadow: var(--ax-sombra-lg) !important; }

.card-hover { transition: transform .25s ease, box-shadow .25s ease; }
.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: var(--ax-sombra-lg) !important;
}

/* Portada de curso: tinte pastel del color de la categoría + ícono a color.
   Look suave y moderno (estilo Notion/Linear), sin gradientes oscuros.
   La página pasa el color en la variable --cc. */
.curso-cover {
  height: 150px;
  border-radius: 1.25rem 1.25rem 0 0;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--cc, var(--bs-primary)) 14%, var(--bs-body-bg));
  color: var(--cc, var(--bs-primary));
}
.curso-cover i { font-size: 3rem; opacity: .95; }
.curso-cover::after {            /* brillo sutil para dar profundidad */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--cc, var(--bs-primary)) 20%, transparent), transparent 55%);
}

/* ===================================================================
   Utilidades de marca
   =================================================================== */
.text-ambar { color: var(--ax-ambar) !important; }
.bg-ambar-subtle { background-color: rgba(var(--bs-warning-rgb), .12) !important; }
.bg-primary-gradient {
  background: linear-gradient(135deg, var(--ax-marca) 0%, #C026D3 100%);
}
.hero-blob {
  background: linear-gradient(135deg, rgba(255,0,151,.12), rgba(192,38,211,.10));
}
[data-bs-theme="dark"] .hero-blob {
  background: linear-gradient(135deg, rgba(255,92,184,.10), rgba(192,38,211,.10));
}

.estrellas { color: var(--ax-ambar); letter-spacing: 1px; }

/* Controles de formulario con esquinas suaves y foco amable */
.form-control, .form-select {
  border-radius: .7rem;
  padding-top: .55rem; padding-bottom: .55rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .12);
}
.input-group-lg > .form-control, .input-group-lg > .input-group-text { border-radius: .85rem; }
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* Acordeón más suave (temario) */
.accordion { --bs-accordion-border-radius: .9rem; --bs-accordion-inner-border-radius: .9rem; }
.accordion-button:not(.collapsed) {
  background: rgba(var(--bs-primary-rgb), .08);
  color: var(--bs-primary);
}
.accordion-button:focus { box-shadow: none; }

/* Badges un poco más redondeados */
.badge { border-radius: .5rem; font-weight: 600; }

/* Chips/pills de filtro de categorías */
.chip {
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-radius: 999px;
  padding: .4rem 1rem;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.chip:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.chip.active {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

/* Avatar circular con iniciales */
.avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-grid; place-items: center;
  background: rgba(var(--bs-primary-rgb), .15);
  color: var(--bs-primary);
  font-weight: 700;
  font-family: var(--ax-font-titulo);
  flex: 0 0 auto;
}
.avatar-lg { width: 64px; height: 64px; font-size: 1.4rem; }
.avatar-sm { width: 32px; height: 32px; font-size: .8rem; }

/* Toggle de tema (sol/luna) */
.theme-toggle {
  border: none;
  background: transparent;
  color: var(--bs-body-color);
  font-size: 1.15rem;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-grid; place-items: center;
  transition: background .15s ease;
}
.theme-toggle:hover { background: rgba(var(--bs-primary-rgb), .12); }

/* Indicador de estado en línea/offline del profesor */
.estado-punto {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; vertical-align: middle;
}
.estado-online  { background: var(--ax-menta); box-shadow: 0 0 0 3px rgba(16,185,129,.2); }
.estado-offline { background: #94a3b8; }

/* ===================================================================
   Layout con sidebar (dashboard estudiante y admin)
   =================================================================== */
.ax-layout { display: flex; min-height: 100vh; }
.ax-sidebar {
  width: 264px;
  flex: 0 0 264px;
  background: var(--bs-body-bg);
  border-right: 1px solid var(--bs-border-color);
}
.ax-content { flex: 1 1 auto; min-width: 0; }

.ax-sidebar .nav-link {
  color: var(--bs-body-color);
  border-radius: .6rem;
  padding: .6rem .85rem;
  margin-bottom: .15rem;
  font-weight: 500;
  display: flex; align-items: center; gap: .65rem;
}
.ax-sidebar .nav-link i { font-size: 1.15rem; }
.ax-sidebar .nav-link:hover { background: rgba(var(--bs-primary-rgb), .08); color: var(--bs-primary); }
.ax-sidebar .nav-link.active { background: var(--bs-primary); color: #fff; }

/* En escritorio el sidebar offcanvas se vuelve estático */
@media (min-width: 992px) {
  .ax-sidebar.offcanvas-lg { transform: none; visibility: visible; }
}

/* ===================================================================
   Chat estilo mensajería
   =================================================================== */
.chat-burbuja {
  max-width: 78%;
  border-radius: 1.1rem;
  padding: .6rem .85rem;
  margin-bottom: .5rem;
  line-height: 1.35;
}
.chat-yo {
  background: var(--bs-primary);
  color: #fff;
  border-bottom-right-radius: .25rem;
  margin-left: auto;
}
.chat-otro {
  background: var(--bs-tertiary-bg, #eef1f8);
  border-bottom-left-radius: .25rem;
}
[data-bs-theme="light"] .chat-otro { background: #eef1f8; }
.chat-hora { font-size: .72rem; opacity: .7; }

/* Scroll suave y barras finas en zonas con scroll */
.scroll-fino { scrollbar-width: thin; }

/* KPI card del panel admin */
.kpi-icono {
  width: 48px; height: 48px; border-radius: .8rem;
  display: grid; place-items: center; font-size: 1.4rem;
}

/* Editor de categorías (admin): swatches de color e íconos */
.cat-swatch {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--bs-body-bg);
  box-shadow: 0 0 0 1px var(--bs-border-color);
  cursor: pointer; padding: 0;
}
.cat-swatch.active { box-shadow: 0 0 0 2px var(--bs-primary); transform: scale(1.1); }
.cat-icon-opt { display: inline-grid; place-items: center; }
.cat-icon-opt.active { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }

/* Encabezado de tabla acorde al tema (reemplaza table-light, que quedaba blanco en oscuro) */
.ax-thead th {
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  border-bottom: 1px solid var(--bs-border-color);
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .02em;
  font-weight: 600;
}

/* DataTables (BS5): respiro alrededor de los controles dentro de las cards */
.dt-container { padding: 1rem 1rem .5rem; }
.dt-container .dt-layout-row { align-items: center; row-gap: .5rem; }
.dt-container table.dataTable { margin-top: .75rem !important; margin-bottom: .75rem !important; }
.dt-container .dt-paging .page-link { border-radius: .5rem; margin: 0 2px; }

/* Ilustración del hero: mosaico (bento) de áreas de estudio */
.edu-hero {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .9rem;
  max-width: 500px;
  margin-inline: auto;
}
.edu-tile {
  aspect-ratio: 1;
  border-radius: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  background: color-mix(in srgb, var(--cc, var(--bs-primary)) 14%, var(--bs-body-bg));
  color: var(--cc, var(--bs-primary));
  box-shadow: var(--ax-sombra);
}
.edu-tile i { font-size: 2.4rem; }
.edu-span2 {
  grid-column: span 2;
  aspect-ratio: auto;
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
  padding: 1.1rem 1.3rem;
  gap: 1rem;
}
.edu-span2 i { font-size: 2.6rem; }
.edu-cap { background: linear-gradient(135deg, var(--ax-marca) 0%, #C026D3 100%); color: #fff; }
.edu-cert { background: color-mix(in srgb, var(--ax-menta) 16%, var(--bs-body-bg)); color: var(--ax-menta); }
.edu-cert small { color: var(--bs-secondary-color); }

/* Flotación suave y escalonada (respeta reduce-motion) */
@media (prefers-reduced-motion: no-preference) {
  .edu-tile { animation: eduFloat 6s ease-in-out infinite; }
  .edu-tile:nth-child(2) { animation-delay: .5s; }
  .edu-tile:nth-child(3) { animation-delay: 1s; }
  .edu-tile:nth-child(4) { animation-delay: 1.5s; }
  .edu-tile:nth-child(5) { animation-delay: 2s; }
  .edu-tile:nth-child(6) { animation-delay: 2.5s; }
  .edu-tile:nth-child(7) { animation-delay: 3s; }
}
@keyframes eduFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Chat admin: checkbox de selección de mensajes (oculto salvo en modo selección) */
.msg-check { display: none; }
.msg-check.mostrar { display: inline-block; }
#chatHilo.modo-seleccion .chat-burbuja { cursor: pointer; }
#chatHilo.modo-seleccion .chat-burbuja:hover { outline: 2px solid rgba(var(--bs-primary-rgb), .4); }

/* Navegador de lecciones (vista del curso) */
.leccion-item:hover { background: rgba(var(--bs-primary-rgb), .08); }
.leccion-item.leccion-activa { background: rgba(var(--bs-primary-rgb), .12); font-weight: 600; }
.leccion-item.leccion-vista span { color: var(--bs-secondary-color); }

/* Indicador de pasos del wizard de registro */
.wizard-dot .paso-num {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-grid; place-items: center;
  border: 2px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
  font-weight: 700;
  background: var(--bs-body-bg);
}
.wizard-dot .small { color: var(--bs-secondary-color); }
.wizard-dot.activo .paso-num { border-color: var(--bs-primary); color: var(--bs-primary); }
.wizard-dot.actual .paso-num { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.wizard-dot.actual .small { color: var(--bs-primary); font-weight: 600; }

/* ===================================================================
   RESPONSIVE / MÓVIL — ajustes para pantallas chicas
   =================================================================== */
@media (max-width: 991.98px) {
  /* El contenido ocupa todo el ancho (el sidebar es offcanvas en móvil). */
  .ax-content { width: 100%; }
  .ax-layout { display: block; }
  /* Burbujas de chat un poco más anchas para aprovechar la pantalla. */
  .chat-burbuja { max-width: 86%; }
}

/* Chat del admin: master-detail en móvil (lista → conversación con "volver"). */
@media (max-width: 767.98px) {
  /* !important para ganarle a las utilidades d-flex/d-block de Bootstrap. */
  .ax-chat .chat-lista   { display: block !important; }
  .ax-chat .chat-ventana { display: none !important; }
  .ax-chat.ver-chat .chat-lista   { display: none !important; }
  .ax-chat.ver-chat .chat-ventana { display: flex !important; }
  /* Alturas cómodas de scroll en móvil. */
  #chatHilo { height: 58vh !important; }
  .ax-chat .scroll-fino { max-height: 50vh; }
}

@media (max-width: 575.98px) {
  /* Respiro general y tipografías de encabezado más contenidas en móvil. */
  .container-fluid.p-3 { padding-left: .85rem !important; padding-right: .85rem !important; }
  h1, .h1 { font-size: 1.9rem; }
  h2, .h2 { font-size: 1.55rem; }
  .display-4 { font-size: 2.1rem; }
  .display-5 { font-size: 1.8rem; }
  .display-6 { font-size: 1.5rem; }
  /* Botones a lo ancho cuando están en grupos apretados. */
  .btn-lg { padding: .6rem 1rem; font-size: 1rem; }
  /* Modales pegados a los bordes para más espacio. */
  .modal-dialog { margin: .5rem; }
  /* Tablas: evitar que rompan el layout — scroll horizontal contenido. */
  .table-responsive, .dt-container { -webkit-overflow-scrolling: touch; }
}

/* Botones que en desktop van en fila y en móvil conviene apilar full-width. */
@media (max-width: 575.98px) {
  .btn-group-responsive { flex-wrap: wrap; }
  .btn-group-responsive > .btn { flex: 1 1 auto; }
}

/* Transiciones globales suaves al cambiar de tema */
* { transition: background-color .2s ease, border-color .2s ease, color .2s ease; }

/* ── Animaciones del catálogo (index) ───────────────────────────────
   La clase .con-anim la agrega catalog.js SOLO si hay JS y el usuario no
   pidió menos movimiento; así, sin JS, las cards se ven normalmente. */
#gridCursos.con-anim [data-curso] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
/* Scroll-reveal: al entrar en pantalla, la card "sube" y aparece. */
#gridCursos.con-anim [data-curso].is-visible {
  opacity: 1;
  transform: none;
}
/* Cambio de categoría: las cards visibles reaparecen con un fade/slide corto. */
#gridCursos.con-anim [data-curso].card-anim {
  animation: cardEntra .42s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes cardEntra {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* Descripción del curso en modo oscuro: texto blanco para máxima legibilidad.
   Usa !important porque el contenedor tiene .text-secondary (utilidad de
   Bootstrap que ya trae !important). Los enlaces conservan su color. */
[data-bs-theme="dark"] .curso-descripcion,
[data-bs-theme="dark"] .curso-descripcion p,
[data-bs-theme="dark"] .curso-descripcion li,
[data-bs-theme="dark"] .curso-descripcion span,
[data-bs-theme="dark"] .curso-descripcion blockquote,
[data-bs-theme="dark"] .curso-descripcion h1,
[data-bs-theme="dark"] .curso-descripcion h2,
[data-bs-theme="dark"] .curso-descripcion h3,
[data-bs-theme="dark"] .curso-descripcion h4,
[data-bs-theme="dark"] .curso-descripcion h5,
[data-bs-theme="dark"] .curso-descripcion h6,
[data-bs-theme="dark"] .curso-descripcion strong,
[data-bs-theme="dark"] .curso-descripcion b,
[data-bs-theme="dark"] .curso-descripcion em,
[data-bs-theme="dark"] .curso-descripcion td,
[data-bs-theme="dark"] .curso-descripcion th {
  color: #fff !important;
}

/* ── Tarjeta de compra del curso ─────────────────────────────────── */
/* En vista móvil (la tarjeta pasa a lo ancho) el precio va más grande. */
@media (max-width: 991.98px) {
  .card-compra .precio-curso { font-size: 2.75rem; line-height: 1.1; }
}
/* En modo oscuro, los textos secundarios de la tarjeta van en blanco. */
[data-bs-theme="dark"] .card-compra .text-secondary {
  color: #fff !important;
}

/* ── Checkout de una sola página (auth/registro.php) ─────────────── */
/* Precio destacado del resumen. */
.precio-checkout { font-size: 2.5rem; font-weight: 800; line-height: 1.05; }
/* En desktop, el resumen acompaña el scroll (sticky) al lado del formulario. */
@media (min-width: 992px) {
  .checkout-resumen { position: sticky; top: 1.5rem; }
}

/* ── Banda flotante de promoción por tiempo limitado (checkout) ──── */
.promo-band {
  position: sticky;
  top: 0;
  z-index: 1030;                 /* por encima del contenido */
  background: #e11d2a;           /* rojo de urgencia */
  color: #fff;
  text-align: center;
  font-weight: 600;
  letter-spacing: .01em;
  padding: .55rem 1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.promo-band strong {
  font-variant-numeric: tabular-nums;  /* dígitos que no “bailan” al contar */
  margin-left: .15rem;
}

/* Cuotas sin interés: destacado limpio (sin caja pesada, con divisor sutil). */
.cuotas-destacado {
  margin: .9rem auto 0;
  padding-top: .9rem;
  border-top: 1px solid var(--bs-border-color);
  text-align: center;
}
.cuotas-titulo {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.cuotas-titulo .cuotas-hl { color: var(--bs-success-text-emphasis); }
.cuotas-sub {
  margin-top: .15rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
}
@media (min-width: 992px) {
  .cuotas-titulo { font-size: 1.5rem; }
  .cuotas-sub    { font-size: .95rem; }
}

/* ===================================================================
   Botones "primarios/azules" → identidad Academix.
   • Modo claro  → rosa de énfasis principal  rgb(255, 92, 184) (#FF5CB8)
   • Modo oscuro → blanco (texto oscuro)
   Reemplaza el azul por defecto de Bootstrap en TODOS los botones
   primarios y en los outline-primary (incluye las píldoras de método
   de pago). Se usa !important porque el azul viene de una regla del
   CDN de Bootstrap con mayor especificidad.
   =================================================================== */
/* ── CLARO: rosa #FF5CB8 ── */
[data-bs-theme="light"] .btn-primary {
  --bs-btn-bg:#FF5CB8; --bs-btn-border-color:#FF5CB8;
  --bs-btn-hover-bg:#F23FA5; --bs-btn-hover-border-color:#F23FA5;
  --bs-btn-active-bg:#F23FA5; --bs-btn-active-border-color:#F23FA5;
  --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-active-color:#fff;
  --bs-btn-disabled-bg:#FF5CB8; --bs-btn-disabled-border-color:#FF5CB8; --bs-btn-disabled-color:#fff;
  background-color:#FF5CB8 !important; border-color:#FF5CB8 !important; color:#fff !important;
}
[data-bs-theme="light"] .btn-primary:hover,
[data-bs-theme="light"] .btn-primary:focus-visible,
[data-bs-theme="light"] .btn-primary:active {
  background-color:#F23FA5 !important; border-color:#F23FA5 !important; color:#fff !important;
}
[data-bs-theme="light"] .btn-outline-primary {
  --bs-btn-color:#FF5CB8; --bs-btn-border-color:#FF5CB8;
  color:#FF5CB8 !important; border-color:#FF5CB8 !important;
}
[data-bs-theme="light"] .btn-check:checked + .btn-outline-primary,
[data-bs-theme="light"] .btn-outline-primary:hover,
[data-bs-theme="light"] .btn-outline-primary:focus-visible {
  background-color:#FF5CB8 !important; border-color:#FF5CB8 !important; color:#fff !important;
}

/* ── OSCURO: blanco ── */
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg:#fff; --bs-btn-border-color:#fff;
  --bs-btn-hover-bg:#ececec; --bs-btn-hover-border-color:#ececec;
  --bs-btn-active-bg:#e0e0e0; --bs-btn-active-border-color:#e0e0e0;
  --bs-btn-color:#141414; --bs-btn-hover-color:#141414; --bs-btn-active-color:#141414;
  --bs-btn-disabled-bg:#fff; --bs-btn-disabled-border-color:#fff; --bs-btn-disabled-color:#141414;
  background-color:#fff !important; border-color:#fff !important; color:#141414 !important;
}
[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-primary:focus-visible,
[data-bs-theme="dark"] .btn-primary:active {
  background-color:#ececec !important; border-color:#ececec !important; color:#141414 !important;
}
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color:#fff; --bs-btn-border-color:#fff;
  color:#fff !important; border-color:#fff !important;
}
[data-bs-theme="dark"] .btn-check:checked + .btn-outline-primary,
[data-bs-theme="dark"] .btn-outline-primary:hover,
[data-bs-theme="dark"] .btn-outline-primary:focus-visible {
  background-color:#fff !important; border-color:#fff !important; color:#141414 !important;
}

/* Precio del header (hero) del curso: un poco más grande en vista móvil
   (Bootstrap achica fs-3 en pantallas chicas; acá lo compensamos). */
@media (max-width: 767.98px) {
  .precio-hero { font-size: 2.25rem !important; line-height: 1.1; }
}

/* ── Submenús del sidebar admin (ítems anidados, 1 nivel) ───────────── */
.ax-sidebar .ax-submenu {
  margin: .1rem 0 .35rem .35rem;
  padding-left: .55rem;
  border-left: 1px solid var(--bs-border-color);
  gap: 0;
}
.ax-sidebar .ax-submenu .nav-link {
  font-size: .875rem;
  padding-top: .35rem;
  padding-bottom: .35rem;
}
.ax-sidebar .ax-submenu .nav-link .bi { font-size: .95rem; }

/* ── Banda de "presentación del curso" (carátula difuminada + play) ──── */
.curso-presentacion .pres-band {
  position: relative; display: block; width: 100%; border: 0;
  aspect-ratio: 16 / 9; max-height: 460px; padding: 0; overflow: hidden;
  cursor: pointer; background-color: var(--cc, #4F46E5);
  background-size: cover; background-position: center;
}
.curso-presentacion .pres-band:not(.pres-con-img) {
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--cc) 68%, #000) 0%, var(--cc) 100%);
}
.curso-presentacion .pres-overlay {
  position: absolute; inset: 0;
  background: rgba(15, 15, 20, .42);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.curso-presentacion .pres-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .95); color: var(--bs-primary);
  font-size: 2.4rem; box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  transition: transform .15s ease;
}
.curso-presentacion .pres-band:hover .pres-play,
.curso-presentacion .pres-band:focus-visible .pres-play { transform: translate(-50%, -50%) scale(1.08); }
.curso-presentacion .pres-txt {
  position: absolute; left: 1rem; bottom: 1rem; color: #fff; font-weight: 600;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}