/* ── course.css — Página de curso (ventas) y reproductor ──────────────── */

/* ── Página de ventas ────────────────────────────────────────────────────── */
.phobos-course-landing {
  padding-top:    40px;
  padding-bottom: 80px;
}
.phobos-course-landing__grid {
  display:               grid;
  grid-template-columns: 1fr 360px;
  gap:                   48px;
  align-items:           start;
}
.phobos-course-landing__cats {
  display:       flex;
  gap:           8px;
  margin-bottom: 16px;
  flex-wrap:     wrap;
}
.phobos-course-landing__main h1 { margin-bottom: 16px; }
.phobos-course-landing__excerpt {
  font-size:     1.1rem;
  color:         var(--color-muted);
  margin-bottom: 20px;
  max-width:     640px;
}
.phobos-course-landing__meta {
  display:       flex;
  flex-wrap:     wrap;
  gap:           16px;
  font-size:     .875rem;
  color:         var(--color-muted);
  margin-bottom: 32px;
}

/* Temario */
.phobos-syllabus {
  margin-bottom: 40px;
  background:    var(--color-bg);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       24px;
}
.phobos-syllabus h3 { margin-bottom: 16px; }
.phobos-syllabus__list { list-style: none; }
.phobos-syllabus__item {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       10px 0;
  border-bottom: 1px solid var(--color-border);
  font-size:     .9rem;
}
.phobos-syllabus__item:last-child { border-bottom: none; }
.phobos-syllabus__num {
  min-width:     24px;
  height:        24px;
  border-radius: 50%;
  background:    var(--color-primary);
  color:         #fff;
  font-size:     .75rem;
  font-weight:   700;
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
}

/* Card de compra */
.phobos-course-buy-card {
  background:    var(--color-white);
  border-radius: var(--radius-md);
  box-shadow:    var(--shadow-md);
  overflow:      hidden;
  position:      sticky;
  top:           88px;
  border:        1px solid var(--color-border);
}
.phobos-course-buy-card__thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.phobos-course-buy-card__body { padding: 24px; }
.phobos-course-buy-card__price {
  font-size:     1.75rem;
  font-weight:   800;
  color:         var(--color-primary);
  margin-bottom: 16px;
}
.phobos-course-buy-card__includes {
  list-style: none;
  margin-top: 20px;
}
.phobos-course-buy-card__includes li {
  padding:       8px 0;
  border-bottom: 1px solid var(--color-border);
  font-size:     .875rem;
  color:         var(--color-muted);
}
.phobos-course-buy-card__includes li:last-child { border-bottom: none; }

/* ── Reproductor / Aula virtual ─────────────────────────────────────────── */
.phobos-player-layout {
  display:     grid;
  grid-template-columns: 320px 1fr;
  min-height:  calc(100vh - 68px);
  background:  #0f172a;
}

/* Sidebar de lecciones */
.phobos-lesson-sidebar {
  background:    #1e293b;
  color:         #cbd5e1;
  overflow-y:    auto;
  display:       flex;
  flex-direction: column;
  border-right:  1px solid rgba(255,255,255,.05);
}
.phobos-lesson-sidebar__header {
  padding:       20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.phobos-lesson-sidebar__header h3 {
  color:         #fff;
  font-size:     .95rem;
  margin-bottom: 12px;
}
.phobos-lesson-sidebar__header small { color: #64748b; font-size: .8rem; }
.phobos-lesson-sidebar .phobos-progress { margin: 6px 0 4px; }
.phobos-lesson-sidebar .phobos-progress__bar { background: var(--color-success); }

/* Lista de lecciones */
.phobos-lesson-list { list-style: none; flex: 1; overflow-y: auto; }
.phobos-lesson-item {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     12px 20px;
  cursor:      pointer;
  font-size:   .875rem;
  transition:  background .15s;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.phobos-lesson-item:hover  { background: rgba(255,255,255,.06); }
.phobos-lesson-item.active { background: rgba(255,255,255,.1); }
.phobos-lesson-item.is-done .phobos-lesson-item__check { color: var(--color-success); }
.phobos-lesson-item__num {
  min-width:   22px;
  height:      22px;
  border-radius: 50%;
  background:  rgba(255,255,255,.08);
  font-size:   .7rem;
  font-weight: 700;
  display:     flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color:       #94a3b8;
}
.phobos-lesson-item__title { flex: 1; line-height: 1.35; color: #e2e8f0; }
.phobos-lesson-item__check { color: #475569; font-size: 1.1rem; }

/* Área del player */
.phobos-player-area {
  display:        flex;
  flex-direction: column;
  background:     #0f172a;
  color:          #e2e8f0;
  overflow-y:     auto;
}
.phobos-video-container {
  background:  #000;
  aspect-ratio: 16/9;
  width:        100%;
  position:     relative;
}
.phobos-video-container iframe,
.phobos-video-container video {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
  border:   none;
}
.phobos-video-placeholder {
  position:    absolute;
  inset:       0;
  display:     flex;
  align-items: center;
  justify-content: center;
  color:       #475569;
  font-size:   1rem;
}

/* Contenido de la lección */
.phobos-lesson-content {
  padding: 32px 40px;
  flex:    1;
}
.phobos-lesson-content__header {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             16px;
  margin-bottom:   20px;
}
.phobos-lesson-content__header h2 { color: #f1f5f9; font-size: 1.4rem; }

/* Contenido del editor (prose) */
.phobos-prose { color: #cbd5e1; line-height: 1.75; }
.phobos-prose h2, .phobos-prose h3 { color: #f1f5f9; margin: 1.5em 0 .5em; }
.phobos-prose ul, .phobos-prose ol { padding-left: 1.5em; margin-bottom: 1em; }
.phobos-prose a  { color: var(--color-gold); }

/* Sección certificado */
.phobos-cert-trigger {
  margin:        16px;
  padding:       20px;
  background:    rgba(245,166,35,.1);
  border:        1px solid rgba(245,166,35,.3);
  border-radius: var(--radius-md);
}
.phobos-cert-trigger h4 { color: var(--color-gold); margin-bottom: 8px; }
.phobos-cert-trigger p  { font-size: .875rem; color: #94a3b8; margin-bottom: 12px; }
.phobos-cert-trigger input {
  width:         100%;
  padding:       10px 12px;
  border-radius: var(--radius-sm);
  border:        1px solid rgba(255,255,255,.1);
  background:    rgba(255,255,255,.05);
  color:         #e2e8f0;
  font-size:     .875rem;
  margin-bottom: 8px;
  outline:       none;
}
.phobos-cert-trigger input:focus { border-color: var(--color-gold); }
.phobos-cert-note {
  font-size:     .8rem;
  color:         #64748b;
  margin-bottom: 12px;
}

/* Breadcrumb */
.phobos-breadcrumb { margin-bottom: 24px; font-size: .875rem; }
.phobos-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.phobos-breadcrumb a  { color: var(--color-muted); }
.phobos-breadcrumb__sep { color: var(--color-border); margin: 0 4px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .phobos-course-landing__grid { grid-template-columns: 1fr; }
  .phobos-course-buy-card      { position: static; }
}
@media (max-width: 768px) {
  .phobos-player-layout { grid-template-columns: 1fr; }
  .phobos-lesson-sidebar { max-height: 50vh; order: 2; }
  .phobos-player-area    { order: 1; }
  .phobos-lesson-content { padding: 20px; }
}