/* ── 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; }
}

/* ── Evaluación final ──────────────────────────────────────────────────────── */
.phobos-examen {
  background:    #fff;
  border:        1px solid var(--color-border);
  border-left:   4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding:       24px;
  margin:        24px 0;
}

.phobos-examen h4 { margin-bottom: 8px; color: var(--color-primary); }
.phobos-examen__intro { margin-bottom: 20px; }

/* La tarjeta vive dentro del area oscura del curso, donde .phobos-prose pinta
   el texto en gris claro: sobre fondo blanco eso quedaba ilegible. */
.phobos-examen,
.phobos-examen p,
.phobos-examen span,
.phobos-examen label { color: var(--color-text); }
.phobos-examen strong { color: var(--color-primary); }

.phobos-examen__pregunta {
  border:        1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding:       16px;
  margin-bottom: 14px;
}

.phobos-examen__pregunta legend {
  font-weight: 700;
  color:       var(--color-primary);
  padding:     0 6px;
  line-height: 1.45;
}

.phobos-examen__opcion {
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
  padding:       9px 10px;
  border-radius: var(--radius-sm);
  cursor:        pointer;
  line-height:   1.5;
}

.phobos-examen__opcion:hover { background: var(--color-bg); }
.phobos-examen__opcion input { margin-top: 4px; flex-shrink: 0; }
.phobos-examen__msg { margin-top: 12px; font-size: .9375rem; line-height: 1.5; }

/* ── Material descargable de la lección ───────────────────────────────────── */
.phobos-recursos {
  margin:        24px 0;
  padding:       18px 20px;
  background:    rgba(255,255,255,.06);
  border:        1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-md);
}

.phobos-recursos__titulo { color: #f1f5f9; margin-bottom: 12px; font-size: 1rem; }
.phobos-recursos__lista  { list-style: none; margin: 0; padding: 0; }
.phobos-recursos__lista li { margin-bottom: 8px; }

.phobos-recursos__lista a {
  display:     inline-flex;
  align-items: center;
  gap:         10px;
  color:       #e2e8f0;
  font-size:   .9375rem;
  line-height: 1.4;
}

.phobos-recursos__lista a:hover { color: #fff; text-decoration: underline; }

.phobos-recursos__tipo {
  flex-shrink:   0;
  min-width:     46px;
  text-align:    center;
  padding:       3px 7px;
  border-radius: 4px;
  background:    var(--color-primary);
  color:         #fff;
  font-size:     .6875rem;
  font-weight:   800;
  letter-spacing: .5px;
}

/* ── Preguntas de la lección ──────────────────────────────────────────────── */
.phobos-qa {
  margin:        28px 0 0;
  padding:       20px;
  background:    rgba(255,255,255,.05);
  border:        1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-md);
}

.phobos-qa__titulo { color: #f1f5f9; margin-bottom: 6px; font-size: 1rem; }
.phobos-qa__intro  { color: #94a3b8; font-size: .875rem; margin-bottom: 14px; line-height: 1.55; }
.phobos-qa__vacio  { color: #94a3b8; font-size: .9rem; line-height: 1.55; }
.phobos-qa__msg    { margin: 10px 0; font-size: .9rem; }

.phobos-qa textarea {
  width:         100%;
  padding:       11px 13px;
  border:        1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-sm);
  background:    rgba(0,0,0,.25);
  color:         #e2e8f0;
  font-family:   inherit;
  font-size:     .9375rem;
  line-height:   1.5;
  resize:        vertical;
  margin-bottom: 10px;
}

.phobos-qa textarea:focus { outline: none; border-color: var(--color-primary); }

.phobos-qa__item {
  border-top: 1px solid rgba(255,255,255,.1);
  padding:    16px 0 4px;
}

.phobos-qa__meta {
  display:       flex;
  align-items:   center;
  gap:           8px;
  color:         #cbd5e1;
  font-size:     .8125rem;
  margin-bottom: 6px;
}

.phobos-qa__meta span { color: #94a3b8; }
.phobos-qa__texto { color: #e2e8f0; font-size: .9375rem; line-height: 1.6; margin-bottom: 10px; }

.phobos-qa__respuesta {
  margin:      0 0 10px 18px;
  padding:     12px 14px;
  border-left: 3px solid rgba(255,255,255,.18);
  background:  rgba(255,255,255,.04);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.phobos-qa__respuesta--staff { border-left-color: var(--color-primary); }

.phobos-qa__insignia {
  background:    var(--color-primary);
  color:         #fff;
  padding:       2px 8px;
  border-radius: 100px;
  font-size:     .6875rem;
  font-weight:   700;
}

.phobos-qa__responder { margin: 8px 0 4px 18px; }