/**
 * CEUSJIC — Single Course + Lesson: unificación con el diseño del dashboard
 * Depende de las variables --c-* declaradas en ceusjic-dashboard.css (:root).
 * Todos los selectores scopeados a .tutor-* / .ceusjic-* (no afectar Droip).
 */

/* ============================================================
   BARRA INSTITUCIONAL SUPERIOR (single course)
   Renderizada desde tutor-customizations.php via
   hook tutor_course/single/before/wrap
   ============================================================ */
.ceusjic-course-topbar {
  background: var(--c-navy);
  color: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  /* Misma altura que el header de lección de Tutor LMS para que
     ambas barras se sientan el mismo componente. */
  height: 56px;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 0.85rem;
  /* El header de Droip es fixed (z-index 10000, min-height 72px) y tapa
     el flujo normal del body. La topbar se fija justo debajo de él. */
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(28, 43, 74, 0.18);
}

/* Botón Escritorio — mismo estilo que #ceusjic-dashboard-btn de la lección */
.ceusjic-course-topbar__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px 0 8px;
  color: rgba(255,255,255,0.9) !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 4px;
  border-right: 1px solid rgba(255,255,255,0.2);
  transition: color 0.15s ease, background 0.15s ease;
}

.ceusjic-course-topbar__back:hover {
  color: var(--c-white) !important;
  background: rgba(255,255,255,0.1);
}

.ceusjic-course-topbar__back svg {
  opacity: 0.75;
}

/* Título de la materia — mismo tratamiento que el título del header de lección */
.ceusjic-course-topbar__crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  justify-content: center;
}

.ceusjic-course-topbar__crumb > span:first-child { display: none; }

.ceusjic-course-topbar__crumb-current {
  color: var(--c-white);
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 50vw;
}

.ceusjic-course-topbar__institution {
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.62rem;
  white-space: nowrap;
}

/* Progreso — mismo formato que "Tu progreso X de Y (Z%)" del header de lección */
.ceusjic-course-topbar__progress {
  color: rgba(255,255,255,0.85);
  font-size: 0.85rem;
  white-space: nowrap;
}

.ceusjic-course-topbar__progress strong {
  color: var(--c-white);
  font-weight: 700;
}

/* Franja de progreso bajo la topbar — réplica exacta de
   #ceusjic-progress-strip / #ceusjic-progress-strip-fill de la lección
   (mismas alturas, fondo, gradiente y punto pulsante). */
.ceusjic-course-topbar__strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
  background: rgba(0,0,0,0.08);
  overflow: hidden;
}

.ceusjic-course-topbar__strip-fill {
  height: 100%;
  background: linear-gradient(90deg, #1d4ed8 0%, #3b82f6 100%);
  transition: width 1s cubic-bezier(0.25, 1, 0.5, 1);
  position: relative;
  overflow: visible;
  border-radius: 0 2px 2px 0;
}

/* Punto pulsante en el extremo — reusa el keyframe ceusjic-pulse-dot
   definido en ceusjic-dashboard.css */
.ceusjic-course-topbar__strip-fill::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
  animation: ceusjic-pulse-dot 1.5s ease-in-out infinite;
}

@media (max-width: 600px) {
  .ceusjic-course-topbar__institution,
  .ceusjic-course-topbar__progress { display: none; }
}

/* ============================================================
   SINGLE COURSE — BASE
   ============================================================ */
.tutor-course-top-info,
.tutor-full-width-course-top {
  background-color: var(--c-bg) !important;
}

.tutor-course-details-page,
.tutor-course-details-page p,
.tutor-course-details-page span,
.tutor-course-details-page a,
.tutor-course-details-page li {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}

.tutor-course-details-page h1,
.tutor-course-details-page h2,
.tutor-course-details-page h3,
.tutor-course-details-page h4,
.tutor-course-details-page h5 {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  color: var(--c-text);
  font-weight: 700;
  letter-spacing: -0.2px;
}

/* ============================================================
   SINGLE COURSE — TABS DE NAVEGACIÓN
   Mismo lenguaje visual que el menú lateral del dashboard
   ============================================================ */
.tutor-course-details-tab .tutor-is-sticky {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius-lg);
  box-shadow: var(--c-shadow-sm);
  overflow: hidden;
}

.tutor-course-details-tab .tutor-nav {
  border-bottom: none !important;
  padding: 6px 8px;
  gap: 2px;
}

.tutor-course-details-tab .tutor-nav-link {
  color: var(--c-text-light) !important;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.85rem !important;
  font-weight: 500;
  border-radius: var(--c-radius-sm) !important;
  padding: 9px 16px !important;
  border-bottom: none !important;
  transition: all 0.15s ease;
}

.tutor-course-details-tab .tutor-nav-link:hover {
  background: var(--c-bg) !important;
  color: var(--c-navy) !important;
}

.tutor-course-details-tab .tutor-nav-link.is-active {
  background: #EEF3FC !important;
  color: var(--c-accent) !important;
  font-weight: 600;
  border-bottom: none !important;
}

/* ============================================================
   SINGLE COURSE — SIDEBAR (tarjetas)
   ============================================================ */
.tutor-single-course-sidebar > div,
.tutor-single-course-sidebar .tutor-card {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--c-radius-lg) !important;
  box-shadow: var(--c-shadow-sm) !important;
}

.tutor-single-course-sidebar .tutor-card-title,
.tutor-single-course-sidebar h3,
.tutor-single-course-sidebar h4 {
  color: var(--c-text) !important;
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 700;
}

/* Ocultar precio y rating en sidebar — plataforma no comercial */
.tutor-single-course-sidebar .tutor-course-sidebar-card-pricing,
.tutor-course-details-page .tutor-ratings,
.tutor-course-details-page .tutor-course-rating {
  display: none !important;
}

/* ============================================================
   SINGLE COURSE — CONTENIDO (acordeón de temas, etc.)
   ============================================================ */
.tutor-course-details-page .tutor-accordion-item {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--c-radius) !important;
  overflow: hidden;
}

.tutor-course-details-page .tutor-accordion-item-header {
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 600;
}

.tutor-course-details-page .tutor-accordion-item-header.is-active {
  background: #EEF3FC !important;
  color: var(--c-accent) !important;
}

/* Botones primarios en course page */
.tutor-course-details-page .tutor-btn-primary,
.tutor-single-course-sidebar .tutor-btn-primary {
  background-color: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
  border-radius: var(--c-radius-sm) !important;
  font-family: 'Inter', Arial, sans-serif;
}

.tutor-course-details-page .tutor-btn-primary:hover,
.tutor-single-course-sidebar .tutor-btn-primary:hover {
  background-color: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}

/* ============================================================
   LESSON — HEADER (antes gris #4e4e4e, ahora navy institucional)
   ============================================================ */
#tutor-single-entry-content .tutor-course-topic-single-header,
.tutor-course-single-content-wrapper .tutor-course-topic-single-header {
  background: var(--c-navy) !important;
}

/* ============================================================
   LESSON — SIDEBAR DE TEMAS
   ============================================================ */
.tutor-course-single-sidebar-wrapper {
  background: var(--c-surface) !important;
  border-right: 1px solid var(--c-border);
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}

.tutor-course-single-sidebar-wrapper .tutor-course-topic-item {
  color: var(--c-text-light);
  transition: background-color 0.15s ease;
}

.tutor-course-single-sidebar-wrapper .tutor-course-topic-item:hover {
  background-color: var(--c-bg);
}

.tutor-course-single-sidebar-wrapper .tutor-course-topic-item.is-active,
.tutor-course-single-sidebar-wrapper .tutor-course-topic-item.tutor-is-active {
  background-color: #EEF3FC;
  border-left: 3px solid var(--c-accent);
}

.tutor-course-single-sidebar-wrapper .tutor-course-topic-item.is-active .tutor-course-topic-item-title,
.tutor-course-single-sidebar-wrapper .tutor-course-topic-item.tutor-is-active .tutor-course-topic-item-title {
  color: var(--c-accent) !important;
  font-weight: 600;
}

/* Cabeceras de topic (acordeón del sidebar) */
.tutor-course-single-sidebar-wrapper .tutor-accordion-item-header {
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
  font-weight: 600;
  border-bottom: 1px solid var(--c-border);
}

/* ============================================================
   LESSON — CONTENIDO
   ============================================================ */
#tutor-single-entry-content {
  background: var(--c-surface);
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}

#tutor-single-entry-content h1,
#tutor-single-entry-content h2,
#tutor-single-entry-content h3,
#tutor-single-entry-content h4 {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  color: var(--c-text);
}

/* Tabs spotlight (Resumen, Q&A, etc.) */
.tutor-course-spotlight-nav .tutor-nav-link {
  font-family: 'Inter', Arial, sans-serif;
  color: var(--c-text-light) !important;
}

.tutor-course-spotlight-nav .tutor-nav-link.is-active {
  color: var(--c-accent) !important;
  border-bottom-color: var(--c-accent) !important;
  font-weight: 600;
}

/* Barra de progreso móvil */
.tutor-spotlight-mobile-progress-complete {
  background: var(--c-navy) !important;
  font-family: 'Inter', Arial, sans-serif;
}