/* ── FUENTE ── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&display=swap');

* {
  font-family: 'Montserrat', sans-serif !important;
}

/* ── FONDOS GENERALES ── */
body,
.tw-min-h-screen,
.tw-drawer,
.tw-drawer-content,
.lesson-content,
main,
#MainContent { background: #0a0a0a !important; color: #fff !important; }

/* ── SIDEBAR ── */
.sidebar,
.sidebar-inner,
.tw-drawer-side > div {
  background: #111 !important;
  border-right: 1px solid #1f1f1f !important;
}

/* ── HEADER DEL SIDEBAR ── */
.sidebar-header { border-bottom: 1px solid #1f1f1f !important; }

.sidbar-title,
.sidebar-header .tw-text-xl {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #fff !important;
  letter-spacing: -.02em !important;
}

/* ── BACK LINK ── */
#back-to-courses,
.back-to-courses {
  color: #444 !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}
#back-to-courses:hover { color: #777 !important; }

/* ── PROGRESS BAR ── */
.tw-progress { background: #222 !important; }
.tw-progress-primary::-webkit-progress-value { background: #fff !important; }
.tw-progress-primary::-moz-progress-bar { background: #fff !important; }
.tw-text-primary { color: #fff !important; }
.tw-percentage { color: #555 !important; font-weight: 700 !important; font-size: 11px !important; }

/* ── MODULOS (cabeceras del menu) ── */
.tw-menu-title span,
li.tw-menu-title span {
  color: #333 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

/* ── LECCIONES ── */
.tw-menu li a,
.tw-menu li a span {
  color: #3a3a3a !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  border-left: 2px solid transparent !important;
  transition: background .1s !important;
}
.tw-menu li a:hover {
  background: #161616 !important;
  color: #888 !important;
}
.tw-menu li a.tw-active,
.tw-menu li a.tw-active span {
  background: #161616 !important;
  border-left: 2px solid #fff !important;
  color: #fff !important;
}

/* ── DOTS / CHECK ICONS ── */
.tw-border-primary { border-color: #fff !important; }
.tw-text-primary-content { color: #0a0a0a !important; }
.tw-bg-primary { background: #fff !important; }
.tw-border-primary-content { border-color: #333 !important; }

/* ── COMUNIDAD LINK ── */
.tw-menu li a[href*="community"] {
  color: #444 !important;
  font-size: 11px !important;
}

/* ── TITULO DE LECCION ── */
h1.tw-text-3xl,
.lesson-content h1 {
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #fff !important;
  letter-spacing: -.03em !important;
  line-height: 1.1 !important;
}

/* ── CONTENIDO DE TEXTO ── */
.ql-editor,
.ql-editor p,
.ql-editor li { color: #555 !important; font-size: 13px !important; line-height: 1.7 !important; }
.ql-editor a { color: #888 !important; }
.ql-editor strong { color: #aaa !important; }

/* ── VIDEO CONTAINER ── */
.video-container,
.video-container iframe {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid #1f1f1f !important;
}

/* ── BOTONES PRIMARIOS ── */
.tw-btn-primary,
a.tw-btn-primary,
button.tw-btn-primary {
  background: #fff !important;
  color: #0a0a0a !important;
  border: none !important;
  border-radius: 40px !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .02em !important;
  padding: 8px 20px !important;
  transition: background .15s !important;
}
.tw-btn-primary:hover { background: #e5e5e5 !important; }

/* ── BOTONES GHOST / SECUNDARIOS ── */
.tw-btn-ghost,
.tw-btn-ghost svg {
  color: #444 !important;
  stroke: #444 !important;
}
.tw-btn-ghost:hover { background: #161616 !important; color: #777 !important; }

/* ── BOTONES CIRCULARES (notif, mensajes) ── */
.tw-btn-circle { border: 1px solid #222 !important; background: transparent !important; }

/* ── INDICADORES / BADGES ── */
.tw-indicator-item { background: #fff !important; }

/* ── NAVEGACION SIGUIENTE ── */
a#next,
a[id="next"] {
  background: #fff !important;
  color: #0a0a0a !important;
  border-radius: 40px !important;
  font-weight: 700 !important;
  border: none !important;
  padding: 10px 24px !important;
  font-size: 12px !important;
}
a#next:hover { background: #e5e5e5 !important; }

/* ── MODAL ── */
.tw-modal-box {
  background: #111 !important;
  border: 1px solid #1f1f1f !important;
  color: #fff !important;
}

/* ── NOTIFICACIONES DROPDOWN ── */
.tw-dropdown-content {
  background: #111 !important;
  border: 1px solid #1f1f1f !important;
  color: #fff !important;
}
.tw-dropdown-content h5 { color: #fff !important; font-weight: 900 !important; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 3px !important; }
::-webkit-scrollbar-track { background: #0a0a0a !important; }
::-webkit-scrollbar-thumb { background: #222 !important; border-radius: 3px !important; }
/* ── NOTIFICACIONES PANEL ── */
.tw-dropdown-content,
.tw-dropdown-content-inner,
.tw-dropdown-content > div,
[id="in-app-notifications"] .tw-dropdown-content {
  background: #111 !important;
  border: 1px solid #222 !important;
  color: #fff !important;
}

.tw-dropdown-content h5,
.tw-dropdown-content p,
.tw-dropdown-content span,
.tw-dropdown-content div {
  color: #fff !important;
  background: transparent !important;
}

/* ── MODAL PUBLICACION ── */
.tw-modal-box,
.tw-card,
.tw-card-compact,
[class*="tw-tw-card"] {
  background: #111 !important;
  border: 1px solid #222 !important;
  color: #fff !important;
}

.tw-modal-box *,
.tw-card * {
  color: #fff !important;
  border-color: #222 !important;
}

/* inputs dentro del modal */
.tw-modal-box input,
.tw-modal-box textarea,
.tw-card input,
.tw-card textarea {
  background: #1a1a1a !important;
  color: #fff !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 8px !important;
}

/* boton publicar */
.tw-modal-box button,
.tw-card button {
  background: #fff !important;
  color: #0a0a0a !important;
  border-radius: 40px !important;
  font-weight: 700 !important;
  border: none !important;
}

/* avatares iniciales */
.tw-dropdown-content .tw-avatar div,
.tw-dropdown-content [class*="avatar"] div {
  background: #222 !important;
  color: #fff !important;
}

/* lista de comunidades/cursos en el dropdown */
.tw-dropdown-content a,
.tw-dropdown-content label {
  color: #aaa !important;
}
.tw-dropdown-content a:hover { color: #fff !important; }

/* boton activo en mis comunidades */
.tw-btn-active,
.tw-active.tw-btn {
  background: #fff !important;
  color: #0a0a0a !important;
}

/* ── TITULOS ESTILO SHOPIFY ── */
h1,
h2,
h3,
h4,
h5,
h6,
.sidebar-header .tw-text-xl,
.lesson-content h1 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}