/* ══════════════════════════════════════════════════════
   Synthesis BioMed LMS — Public Styles
   ══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --sb-azul:    #080b87;
  --sb-lav:     #655dc6;
  --sb-azul-dk: #060880;
  --sb-lav-dk:  #5349b8;
  --sb-azul-lt: #e8e9f8;
  --sb-lav-lt:  #f0eeff;
  --sb-gc:      #F0F2FA;
  --sb-gm:      #DDE0F0;
  --sb-white:   #ffffff;
  --sb-text:    #1a1a2e;
  --sb-muted:   #6b7280;
  --sb-border:  #dde0f0;
  --sb-success: #10b981;
  --sb-danger:  #ef4444;
  --sb-warning: #f59e0b;
  --radius:     12px;
  --radius-sm:  8px;
  --shadow:     0 2px 16px rgba(8,11,135,.08);
  --shadow-md:  0 6px 24px rgba(8,11,135,.14);
  --font-head:  'Barlow Condensed', sans-serif;
  --font-body:  'DM Sans', system-ui, sans-serif;

  /* Paleta "comercial" del manual de marca (idéntica a la usada en el resto
     del sitio — SynthesisBioMed_Astra_CSS.css / cards-cursos-snippet.html).
     El catálogo y las tarjetas de venta usan estos tonos oscuros + cyan,
     no la paleta clara de arriba (esa queda para dashboards internos). */
  --sb-cyan:      #00c2d4;
  --sb-cyan-dk:   #0097a7;
  --sb-oscuro:    #07081a;
  --sb-oscuro-2:  #0d0f2e;
  --sb-azul-mid:  #1a1fa8;
  --sb-grad-cta:  linear-gradient(135deg, #00c2d4, #655dc6);
  --sb-grad-hero: linear-gradient(135deg, #07081a 0%, #0d0f2e 40%, #1a1fa8 75%, #655dc6 100%);
}

/* ── Base ───────────────────────────────────────────── */

.sb-lms, .sb-lms * { box-sizing: border-box; }

.sb-lms {
  font-family: var(--font-body);
  color: var(--sb-text);
  line-height: 1.6;
}

.sb-lms h1, .sb-lms h2, .sb-lms h3 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
}

.sb-section-title {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 800;
  color: var(--sb-azul);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 28px 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sb-section-title::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--sb-gm);
  border-radius: 2px;
}

/* ── Buttons ─────────────────────────────────────────── */

.sb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all .18s ease;
  white-space: nowrap;
}

.sb-btn:hover { text-decoration: none; transform: translateY(-2px); }
.sb-btn:active { transform: translateY(0) scale(.97); }

/* CTA principal: gradiente cyan→lavanda con brillo — el mismo botón "comercial"
   que ya se usa en el resto del sitio (Astra Custom CSS / header flotante). */
.sb-btn--primary {
  background: var(--sb-grad-cta);
  color: var(--sb-white) !important;
  border-color: transparent;
  box-shadow: 0 4px 20px rgba(0,194,212,.32);
}
.sb-btn--primary:hover {
  box-shadow: 0 8px 28px rgba(0,194,212,.42);
  color: var(--sb-white) !important;
  opacity: .94;
}

.sb-btn--outline { background: transparent; color: var(--sb-azul) !important; border-color: var(--sb-azul); }
.sb-btn--outline:hover { background: var(--sb-azul-lt); color: var(--sb-azul) !important; }

/* Variante para usar sobre fondos oscuros (tarjetas del catálogo, hero) */
.sb-btn--outline-light { background: transparent; color: rgba(255,255,255,.85) !important; border-color: rgba(255,255,255,.3); }
.sb-btn--outline-light:hover { border-color: var(--sb-cyan); color: var(--sb-cyan) !important; }

.sb-btn--ghost { background: var(--sb-gc); color: var(--sb-text) !important; border-color: var(--sb-border); }
.sb-btn--ghost:hover { background: var(--sb-gm); color: var(--sb-text) !important; }

.sb-btn--lav { background: var(--sb-lav); color: var(--sb-white) !important; border-color: var(--sb-lav); }
.sb-btn--lav:hover { background: var(--sb-lav-dk); border-color: var(--sb-lav-dk); }

.sb-btn--sm { padding: 8px 16px; font-size: 13px; }
.sb-btn--lg { padding: 14px 28px; font-size: 16px; }

/* ── Alerts ──────────────────────────────────────────── */

.sb-alert {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  border-left: 4px solid;
  margin: 16px 0;
}

.sb-alert--info    { background: var(--sb-azul-lt); border-color: var(--sb-azul); color: var(--sb-azul); }
.sb-alert--success { background: #d1fae5; border-color: var(--sb-success); color: #065f46; }
.sb-alert--danger  { background: #fee2e2; border-color: var(--sb-danger); color: #991b1b; }

/* ── Progress Bar ────────────────────────────────────── */

.sb-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--sb-gm);
  border-radius: 100px;
  overflow: hidden;
  margin: 8px 0 4px;
}

.sb-progress-bar--lg { height: 12px; }

.sb-progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sb-azul), var(--sb-lav));
  border-radius: 100px;
  transition: width .5s ease;
}

.sb-progress-bar__label {
  font-size: 12px;
  color: var(--sb-muted);
  text-align: right;
}

/* ── Badge / Pill ─────────────────────────────────────── */

.sb-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  background: rgba(255,255,255,.85);
  color: var(--sb-azul);
  backdrop-filter: blur(4px);
}

.sb-badge--success { background: rgba(16,185,129,.15); color: #065f46; }
.sb-badge--lav     { background: var(--sb-lav-lt); color: var(--sb-lav-dk); }

.sb-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  background: var(--sb-gc);
  color: var(--sb-muted);
  border: 1px solid var(--sb-border);
}

.sb-pill--live { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

/* ── Empty State ─────────────────────────────────────── */

.sb-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--sb-muted);
}

.sb-empty-state__icon { font-size: 52px; margin-bottom: 16px; }
.sb-empty-state h3 { font-size: 22px; color: var(--sb-text); margin: 0 0 10px; }
.sb-empty-state p  { margin: 0 0 20px; }

/* ══════════════════════════════════════════════════════
   DASHBOARD
   ══════════════════════════════════════════════════════ */

.sb-dashboard { max-width: 1100px; margin: 0 auto; padding: 32px 20px; }

.sb-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  background: linear-gradient(135deg, var(--sb-azul) 0%, var(--sb-lav) 100%);
  border-radius: var(--radius);
  padding: 28px 32px;
  color: var(--sb-white);
  margin-bottom: 32px;
}

.sb-dashboard-welcome {
  display: flex;
  align-items: center;
  gap: 18px;
}

.sb-dashboard-welcome h2 {
  margin: 0;
  font-size: 28px;
  color: var(--sb-white);
}

.sb-dashboard-welcome p {
  margin: 4px 0 0;
  opacity: .85;
  font-size: 14px;
}

.sb-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 800;
  color: var(--sb-white);
  border: 2px solid rgba(255,255,255,.4);
  flex-shrink: 0;
}

.sb-avatar--instructor { font-size: 28px; }

.sb-dashboard-quick-stats {
  display: flex;
  gap: 24px;
}

.sb-qs { text-align: center; }
.sb-qs__num { display: block; font-family: var(--font-head); font-size: 36px; font-weight: 800; color: var(--sb-white); }
.sb-qs__label { font-size: 11px; opacity: .8; text-transform: uppercase; letter-spacing: .5px; }

.sb-teacher-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Course grid — auto-fit en vez de un número fijo de columnas: con 5
   columnas fijas, si hay menos de 5 módulos quedaba una columna "fantasma"
   vacía a la derecha (mucho blanco desaprovechado). auto-fit colapsa esas
   columnas vacías y reparte el ancho real entre las tarjetas que sí hay —
   por eso también quedan ~50% más anchas con pocos módulos, y a medida que
   se agregan más se van acomodando solas en más columnas/filas. */
.sb-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  align-items: start;
  gap: 20px;
}

@media (max-width: 420px) { .sb-course-grid { grid-template-columns: 1fr; } }

.sb-course-card {
  background: var(--sb-oscuro-2);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .25s ease, border-color .25s ease;
  display: flex;
  flex-direction: column;
}

/* Bug encontrado al verificar visualmente el buscador de v1.5.6 (hasta ahora
   solo se había probado leyendo el atributo `hidden` por JS, nunca mirando
   la tarjeta filtrada en pantalla): esta regla de acá arriba pone
   `display:flex` con especificidad de clase de autor, que le gana al
   `display:none` que el navegador aplica por default a `[hidden]` (ese es
   estilo de user-agent, siempre pierde contra CSS de autor con la misma o
   menor especificidad). Resultado: `$card.prop('hidden', true)` marcaba la
   tarjeta como oculta pero seguía viéndose igual — el buscador filtraba
   "por adentro" sin que se notara en pantalla. Esta regla fuerza el
   display:none real cuando el atributo está puesto, y gana porque es más
   específica que la de arriba. */
.sb-course-card[hidden] { display: none; }

.sb-course-card:hover { transform: translateY(-6px); border-color: var(--sb-cyan); }

.sb-course-card__link { display: block; text-decoration: none; }

.sb-course-card__thumb {
  height: 150px;
  background: linear-gradient(135deg, var(--sb-cyan) 0%, var(--sb-azul) 100%);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  padding: 16px;
}

/* Las tarjetas de Pack usan el mismo degradé lavanda que el resto del sitio;
   los módulos individuales, uno más oscuro — igual que cards-cursos-snippet.html. */
.sb-course-card--pack .sb-course-card__thumb { background: linear-gradient(135deg, var(--sb-lav) 0%, var(--sb-azul) 100%); }
.sb-course-card--module .sb-course-card__thumb { background: linear-gradient(135deg, var(--sb-azul-mid) 0%, var(--sb-oscuro) 100%); }

/* Sin thumbnail: antes había un emoji de libros acá — se sacó porque se
   veía infantil/poco comercial encima del degradé. El número fantasma de
   fondo ya alcanza como identidad visual de la tarjeta. */
.sb-course-card__thumb--placeholder { align-items: center; justify-content: center; }

.sb-course-card__ghost-num {
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 84px;
  line-height: 1;
  color: rgba(255,255,255,.14);
  pointer-events: none;
}

.sb-course-card__body { padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 12px; }

.sb-course-card__title {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.15;
  color: var(--sb-white);
}

.sb-course-card__title a { color: inherit; text-decoration: none; }
.sb-course-card__title a:hover { color: var(--sb-cyan); }

.sb-course-card__excerpt { font-size: 13px; color: rgba(255,255,255,.6); margin: 0; flex: 1; line-height: 1.6; }

.sb-course-card__meta { display: flex; gap: 6px; align-items: center; font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,.65); }
.sb-course-card__meta span::before { content: '●'; font-size: 6px; color: var(--sb-cyan); margin-right: 6px; }

.sb-course-card__price {
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 800;
  color: var(--sb-white);
  line-height: 1;
}

.sb-course-card__body .sb-progress-bar { background: rgba(255,255,255,.14); }
.sb-course-card__body .sb-progress-bar__fill { background: var(--sb-grad-cta); }
.sb-course-card__body .sb-progress-bar__label { color: rgba(255,255,255,.6); }

/* Nota para próximas clases/módulos sin contenido todavía ("Próximamente") —
   por defecto no existe en el dashboard ni en program-single, solo en el
   catálogo (ver bloque ".sb-archive .sb-course-card" más abajo). */
.sb-course-card__note { font-size: 12.5px; line-height: 1.5; margin: 0; color: rgba(255,255,255,.45); }

.sb-badge--soon { background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); }

/* Quick actions — teacher */
.sb-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
  margin-bottom: 32px;
}

.sb-qa-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px;
  background: var(--sb-white);
  border: 1px solid var(--sb-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--sb-text);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow);
  transition: all .18s;
}

.sb-qa-card:hover { border-color: var(--sb-azul); background: var(--sb-azul-lt); color: var(--sb-azul); transform: translateY(-2px); }
.sb-qa-card span:first-child { font-size: 28px; }

/* Teacher course list */
.sb-teacher-course-list { display: flex; flex-direction: column; gap: 12px; }

.sb-teacher-course-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--sb-white);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  border: 1px solid var(--sb-border);
  box-shadow: var(--shadow);
}

.sb-tcr__thumb { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.sb-tcr__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sb-tcr__thumb-placeholder { width: 56px; height: 56px; background: var(--sb-gc); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 24px; }

.sb-tcr__info { flex: 1; }
.sb-tcr__info h3 { margin: 0 0 4px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.sb-tcr__info h3 a { color: inherit; text-decoration: none; }
.sb-tcr__info h3 a:hover { color: var(--sb-azul); }
.sb-tcr__meta { display: flex; gap: 12px; font-size: 12px; color: var(--sb-muted); }

.sb-tcr__actions { display: flex; gap: 8px; }

.sb-status-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 2px 8px;
  border-radius: 100px;
}

.sb-status-badge--publish { background: #d1fae5; color: #065f46; }
.sb-status-badge--draft   { background: var(--sb-gc); color: var(--sb-muted); }

/* ══════════════════════════════════════════════════════
   COURSE ARCHIVE
   ══════════════════════════════════════════════════════ */

/* v2 (2026-08): reemplaza el fondo blanco liso de la pasada anterior por un
   header tipo "hero" — mismo tratamiento oscuro + degradé que el Home, para
   que el catálogo no se sienta una página aparte. El body de la página
   sigue blanco (las tarjetas pasan a blancas también, ver más abajo);
   .sb-archive-hero es la única franja oscura, a sangre. */
/* SIN overflow-x:hidden acá: .sb-archive queda angosto (adentro del
   .ast-container de Astra), y el hero de abajo se estira a sangre hasta los
   bordes reales de la ventana vía JS (initFullBleed en sb-lms.js). Si este
   contenedor recorta overflow, se come justo la parte del hero que sobresale
   a la izquierda de su propio ancho — título cortado (bug reportado
   2026-09-07: "ELEGÍ TU MÓDULO" se veía como "…DULO"). El <body> ya tiene su
   propio overflow-x:hidden como red de seguridad contra scroll horizontal,
   así que no hace falta repetirlo acá. */
/* min-width:0 es el complemento obligatorio de sacar el overflow-x:hidden
   (arriba, v1.5.3): .sb-archive es un flex item (el theme Astra envuelve el
   contenido en un .ast-container con display:flex). Por default un flex item
   tiene min-width:auto, lo que significa que si un descendiente más angosto
   en el árbol —acá .sb-archive-hero, que JS estira a los 1425px reales de la
   ventana para el efecto a sangre— es más ancho que el propio contenedor,
   el flex item CRECE para "contenerlo" en vez de dejarlo simplemente pintar
   por fuera (que es lo que se busca). Eso corría todo el bloque de abajo
   (grid de tarjetas) más a la derecha y más ancho que el resto del sitio —
   bug de márgenes reportado 2026-09-07, posterior al fix del título cortado.
   Con min-width:0 el flex item vuelve a tomar el ancho normal de su
   contenedor (960px acá) y dejamos que sea overflow (visible, no hidden) el
   que permite que el hero siga pintándose a sangre sin arrastrar el resto. */
.sb-archive { background: var(--sb-white); min-width: 0; }
/* Solo padding lateral (el vertical lo maneja el hero arriba y el grid abajo) —
   el hero se escapa de este padding con su propio full-bleed, así que no
   afecta su ancho. */
.sb-archive-inner { max-width: none; margin: 0; padding: 0 clamp(16px, 2vw, 40px) 72px; }

/* Full-bleed: el header oscuro debe ocupar el ancho completo de la ventana
   aunque el tema (Astra) lo deje adentro de un .ast-container angosto.
   El cálculo "100vw + margin-left:calc(50% - 50vw)" que se probó primero
   se desalinea con contenedores anidados + scrollbar (bug 2026-08-25) —
   corta texto y desplaza el contenido. El ancho/margen real ahora los pone
   sb-lms.js (initFullBleed), que mide la posición exacta en el DOM. Acá
   solo queda un fallback seguro: si el JS no llegó a correr todavía (o
   está desactivado), el header simplemente ocupa el ancho de su
   contenedor — no se ve espectacular, pero tampoco se rompe. */
.sb-archive-hero {
  width: 100%;
  background: var(--sb-grad-hero);
  padding: clamp(64px, 10vw, 96px) clamp(16px, 4vw, 40px) 40px;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}

/* Fondo "estirado" detrás del navbar (pedido 2026-09-08): en la Home, Astra
   sube la sección de arriba con un margen negativo para que su fondo se vea
   también detrás del header transparente — acá no, porque esa opción de
   Astra es por página y en el catálogo no está prendida. En vez de replicar
   la config de Astra, sb-lms.js (initHeroHeaderBlend) mide en el DOM la
   distancia real entre el header y este bloque y sube el degradé esa misma
   distancia con margin-top negativo, compensando con más padding-top para
   que el título quede en el mismo lugar. Si el JS no corrió, el fallback es
   simplemente el padding de arriba — el hero no se estira detrás del header,
   pero tampoco se rompe nada. */

.sb-archive-hero__eyebrow {
  color: var(--sb-cyan);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.sb-archive-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--sb-white);
  line-height: 1.08;
  margin: 0 0 12px;
}

.sb-archive-hero__desc {
  max-width: 560px;
  font-size: 15px;
  color: rgba(255,255,255,.72);
  line-height: 1.6;
  margin: 0 0 28px;
}

.sb-filter-tabs { display: flex; gap: 10px; flex-wrap: wrap; position: relative; }

.sb-filter-tab {
  display: inline-block;
  padding: 9px 20px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.65);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.18);
  transition: all .15s;
}

.sb-filter-tab:hover, .sb-filter-tab.is-active {
  background: var(--sb-grad-cta);
  color: var(--sb-white);
  border-color: transparent;
  box-shadow: 0 4px 18px rgba(0,194,212,.32);
}

/* Tarjetas del catálogo en blanco — a diferencia del resto del plugin
   (dashboard, program-single) donde .sb-course-card sigue oscura; acá se
   pisa puntual con más especificidad para no tocar esas otras pantallas. */
.sb-archive .sb-course-card {
  background: var(--sb-white);
  border: 1px solid var(--sb-border);
  box-shadow: var(--shadow);
}

/* 3 columnas fijas en el catálogo (pedido 2026-09-08: "son muchos módulos").
   Se pisa acá con más especificidad en vez de tocar la regla base de
   .sb-course-grid porque esa clase la comparten dashboard.php y
   program-single.php (donde el auto-fit de más arriba sigue siendo lo
   correcto — ahí suele haber pocas tarjetas y no interesa forzar 3 por
   fila). Responsive: 3 → 2 → 1 a medida que se achica la ventana, en vez
   de dejar que auto-fit decida, para que quede prolijo con cualquier
   cantidad de módulos (10, 21, o los que se sumen después). */
.sb-archive .sb-course-grid { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 980px) {
  .sb-archive .sb-course-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .sb-archive .sb-course-grid { grid-template-columns: 1fr; }
}

/* Buscador de temas dentro del catálogo (pedido 2026-09-08: "algún buscador
   para que puedan buscar si el tema está en el módulo que buscan") — filtra
   en vivo por JS (initCourseSearch en sb-lms.js) contra el título de cada
   tarjeta y el listado de clases/temas que ya se muestra en ella, sin
   recargar la página. Vive adentro de .sb-archive-hero (fondo oscuro), por
   eso el input es translúcido con texto claro en vez del estilo de input
   claro que se usa en el resto del sitio. */
.sb-search-box { max-width: 480px; margin-top: 24px; position: relative; }

.sb-search-box__icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .55;
  pointer-events: none;
  font-size: 15px;
}

.sb-search-input {
  width: 100%;
  padding: 13px 18px 13px 44px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  color: var(--sb-white);
  font-family: var(--font-body);
  font-size: 14px;
}

.sb-search-input::placeholder { color: rgba(255,255,255,.5); }

.sb-search-input:focus {
  outline: none;
  border-color: var(--sb-cyan);
  background: rgba(255,255,255,.12);
}

/* Mensaje de "no encontramos nada" — mismo lenguaje visual que
   .sb-empty-state (catálogo vacío), pero un componente aparte porque este
   vive dentro de la grilla blanca y lo prende/apaga JS, no PHP. Arranca
   oculto: initCourseSearch() lo muestra solo si la búsqueda no matchea
   ninguna tarjeta. */
.sb-search-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--sb-muted);
}

.sb-search-empty__icon { font-size: 40px; margin-bottom: 12px; }

/* Barra lateral con todos los módulos (pedido 2026-09-08). Layout de dos
   columnas: sidebar angosta fija + grilla de tarjetas ocupando el resto.
   Solo se imprime en el catálogo de Módulos (course-archive.php controla
   esto con $show_sidebar) — Packs y Cursos no cambian. */
.sb-archive-layout {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  /* Pedido 2026-09-08 "que ocupe el ancho completo": sb-lms.js
     (applyFullBleed('.sb-archive-layout')) fuerza width/margin para que esta
     fila llegue de punta a punta de la ventana, igual que .sb-archive-hero.
     Esa función solo toca width/margin — el padding interno lo define esta
     regla para que el contenido (sidebar + grilla) no quede pegado al borde
     exacto del navegador una vez estirado. box-sizing:border-box es
     necesario porque el ancho ya viene forzado en px por JS: sin esto el
     padding se sumaría por fuera de ese ancho y volvería a desalinear el
     borde derecho. El valor del padding (clamp 16–40px) es el mismo que ya
     usa .sb-archive-hero, para que ambas secciones queden alineadas. */
  box-sizing: border-box;
  padding: 0 clamp(16px, 4vw, 40px);
}

.sb-archive-main { flex: 1; min-width: 0; }

.sb-archive-sidebar {
  flex: 0 0 260px;
  width: 260px;
  background: var(--sb-white);
  border: 1px solid var(--sb-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  /* position:sticky para que acompañe el scroll en desktop mientras se
     recorre la grilla — se cae a estático en mobile (media query abajo). */
  position: sticky;
  top: 20px;
}

.sb-archive-sidebar__title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--sb-text);
  margin: 0 0 14px;
}

/* El buscador acá vive sobre fondo blanco (a diferencia de la versión que
   queda en .sb-archive-hero para Packs/Cursos, sobre fondo oscuro) — mismo
   componente `.sb-search-box`/`.sb-search-input`, pisado puntual con más
   especificidad para los colores claros. */
.sb-search-box--sidebar { max-width: none; margin: 0 0 16px; }
.sb-search-box--sidebar .sb-search-input {
  border-color: var(--sb-border);
  background: var(--sb-gc);
  color: var(--sb-text);
}
.sb-search-box--sidebar .sb-search-input::placeholder { color: var(--sb-muted); }
.sb-search-box--sidebar .sb-search-input:focus { background: var(--sb-white); }
.sb-search-box--sidebar .sb-search-box__icon { opacity: .4; }

/* Con scroll interno propio y una altura tope — así una lista de 21 módulos
   no termina siendo más alta que toda la grilla de tarjetas al lado. */
.sb-archive-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 60vh;
  overflow-y: auto;
}

.sb-archive-sidebar__link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 6px;
  border-radius: var(--radius-sm);
  color: var(--sb-text);
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.35;
}

.sb-archive-sidebar__link:hover { background: var(--sb-gc); color: var(--sb-azul); }

.sb-archive-sidebar__num {
  flex-shrink: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12px;
  color: var(--sb-cyan-dk);
  min-width: 18px;
}

.sb-archive-sidebar__empty {
  font-size: 13px;
  color: var(--sb-muted);
  text-align: center;
  padding: 16px 4px 4px;
}

@media (max-width: 900px) {
  .sb-archive-layout { flex-direction: column; }
  .sb-archive-sidebar {
    position: static;
    width: 100%;
    flex-basis: auto;
  }
  .sb-archive-sidebar__list { max-height: 320px; }
}
.sb-archive .sb-course-card:hover { border-color: var(--sb-cyan); box-shadow: var(--shadow-md); }
.sb-archive .sb-course-card__title { color: var(--sb-text); }
.sb-archive .sb-course-card__excerpt { color: var(--sb-muted); }
.sb-archive .sb-course-card__meta { color: var(--sb-muted); }
.sb-archive .sb-course-card__meta span::before { color: var(--sb-cyan-dk); }
.sb-archive .sb-course-card__price { color: var(--sb-text); }
.sb-archive .sb-course-card__note { color: var(--sb-muted); }
.sb-archive .sb-course-card__lesson-list li { color: #55597a; }
.sb-archive .sb-course-card__lesson-list li::before { background: var(--sb-cyan-dk); }
.sb-archive .sb-course-card__lesson-list-more { color: #9296b3 !important; }
.sb-archive .sb-course-card__body .sb-progress-bar { background: var(--sb-gm); }
/* Nota: el badge "Próximamente"/categoría vive en .sb-course-card__thumb,
   que sigue con degradé oscuro tanto en el catálogo como en el resto del
   plugin — por eso .sb-badge--soon NO se pisa acá (el estilo base ya es
   claro-sobre-oscuro y corresponde). */

/* Listado de clases dentro de la tarjeta de Módulo — solo título, sin
   numeración ni descripción, en reemplazo del excerpt genérico. */
.sb-course-card__lesson-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.sb-course-card__lesson-list li {
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(255,255,255,.65);
  padding-left: 14px;
  position: relative;
}

.sb-course-card__lesson-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sb-cyan);
}

.sb-course-card__lesson-list-more {
  color: rgba(255,255,255,.4) !important;
  font-style: italic;
}
.sb-course-card__lesson-list-more::before { display: none; }

/* ══════════════════════════════════════════════════════
   COURSE SINGLE
   ══════════════════════════════════════════════════════ */

.sb-course-single { max-width: 100%; }

.sb-course-hero {
  position: relative;
  background: linear-gradient(135deg, var(--sb-azul) 0%, var(--sb-lav) 100%);
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  min-height: 380px;
  display: flex;
  align-items: center;
}

.sb-course-hero__overlay {
  width: 100%;
  background: linear-gradient(90deg, rgba(8,11,135,.88) 40%, rgba(8,11,135,.5) 100%);
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.sb-course-hero__content { flex: 1; min-width: 280px; }

.sb-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,.7);
  margin-bottom: 12px;
}

.sb-breadcrumb a { color: rgba(255,255,255,.8); text-decoration: none; }
.sb-breadcrumb a:hover { color: var(--sb-white); }

.sb-course-hero__content h1 {
  font-family: var(--font-head);
  font-size: 48px;
  font-weight: 800;
  color: var(--sb-white);
  margin: 0 0 12px;
}

.sb-course-hero__excerpt { color: rgba(255,255,255,.85); font-size: 16px; margin: 0 0 20px; max-width: 600px; }

.sb-course-hero__meta { display: flex; align-items: center; gap: 20px; color: rgba(255,255,255,.7); font-size: 14px; }

.sb-price { font-family: var(--font-head); font-size: 24px; font-weight: 700; color: var(--sb-white); }

.sb-course-hero__cta {
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius);
  padding: 24px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sb-enrolled-badge {
  font-weight: 700;
  color: var(--sb-white);
  font-size: 15px;
}

.sb-course-body { max-width: 1100px; margin: 0 auto; padding: 40px 24px; display: grid; grid-template-columns: 1fr; gap: 40px; }

/* Curriculum */
.sb-curriculum-list { border: 1px solid var(--sb-border); border-radius: var(--radius); overflow: hidden; }

.sb-curriculum-part { margin-bottom: 24px; }
.sb-curriculum-part:last-child { margin-bottom: 0; }

.sb-curriculum-part__title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--sb-azul);
  margin: 0 0 10px;
}

.sb-lesson-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--sb-border);
  transition: background .12s;
}

.sb-lesson-row:last-child { border-bottom: none; }
.sb-lesson-row:hover { background: var(--sb-gc); }
.sb-lesson-row.is-complete { background: #f0fdf4; }

.sb-lesson-row__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sb-gc);
  color: var(--sb-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.sb-lesson-row.is-complete .sb-lesson-row__num { background: var(--sb-success); color: var(--sb-white); }

.sb-lesson-row__info { flex: 1; }

.sb-lesson-row__title { font-weight: 600; font-size: 14px; text-decoration: none; color: var(--sb-text); display: block; margin-bottom: 4px; }
.sb-lesson-row__title:hover { color: var(--sb-azul); }

.sb-lesson-row__badges { display: flex; gap: 6px; flex-wrap: wrap; }

.sb-lesson-row__status { flex-shrink: 0; }
.sb-check { color: var(--sb-success); font-weight: 800; font-size: 16px; }
.sb-lock  { color: var(--sb-muted); font-size: 16px; }

/* ══════════════════════════════════════════════════════
   LESSON SINGLE
   ══════════════════════════════════════════════════════ */

/* La clase de reproducción arma su propio <body> (sin header/footer del tema,
   ver lesson-single.php) para que no aparezca el menú del sitio. */
body.sb-lesson-fullscreen {
  margin: 0;
  background: var(--sb-white);
  color: var(--sb-text);
}

.sb-access-denied--fullscreen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sb-lesson-layout {
  display: flex;
  min-height: 100vh;
  font-family: var(--font-body);
}

/* Sidebar */
.sb-sidebar {
  width: 300px;
  flex-shrink: 0;
  background: var(--sb-white);
  border-right: 1px solid var(--sb-border);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 12px rgba(0,0,0,.05);
}

.sb-sidebar__close { display: none; }

.sb-sidebar-course {
  padding: 20px;
  border-bottom: 1px solid var(--sb-border);
  background: linear-gradient(135deg, var(--sb-azul) 0%, var(--sb-lav) 100%);
}

.sb-sidebar-course__link {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  display: block;
  margin-bottom: 10px;
}

.sb-sidebar-course__link:hover { color: var(--sb-white); }

.sb-sidebar-course .sb-progress-bar { background: rgba(255,255,255,.3); }
.sb-sidebar-course .sb-progress-bar__label { color: rgba(255,255,255,.75); text-align: left; }

.sb-sidebar-lessons { padding: 8px 0; flex: 1; }

.sb-sidebar-part__title {
  padding: 14px 20px 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--sb-muted);
}

.sb-sidebar-lesson {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  text-decoration: none;
  color: var(--sb-text);
  font-size: 13px;
  border-left: 3px solid transparent;
  transition: all .15s;
}

.sb-sidebar-lesson:hover { background: var(--sb-gc); color: var(--sb-azul); border-left-color: var(--sb-azul); }
.sb-sidebar-lesson.is-current { background: var(--sb-azul-lt); border-left-color: var(--sb-azul); font-weight: 600; color: var(--sb-azul); }
.sb-sidebar-lesson.is-done .sb-sidebar-lesson__num { background: var(--sb-success); color: var(--sb-white); }

.sb-sidebar-lesson__num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sb-gc);
  border: 1px solid var(--sb-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  color: var(--sb-muted);
}

.sb-sidebar-lesson__title { line-height: 1.3; }

/* Main lesson content */
.sb-lesson-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.sb-lesson-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  background: var(--sb-white);
  border-bottom: 1px solid var(--sb-border);
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.sb-sidebar-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--sb-border);
  border-radius: 8px;
  background: var(--sb-gc);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.sb-breadcrumb-back { font-size: 13px; color: var(--sb-muted); text-decoration: none; flex: 1; }
.sb-breadcrumb-back:hover { color: var(--sb-azul); }

.sb-lesson-nav { display: flex; gap: 8px; margin-left: auto; }

.sb-nav-btn {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  background: var(--sb-gc);
  color: var(--sb-text);
  border: 1px solid var(--sb-border);
  transition: all .15s;
}

.sb-nav-btn:hover { background: var(--sb-azul); color: var(--sb-white); border-color: var(--sb-azul); }

.sb-lesson-content {
  flex: 1;
  /* Sin max-width: el video y el contenido ocupan todo el ancho disponible
     del panel principal, sin el margen blanco que quedaba con un ancho fijo. */
  max-width: none;
  margin: 0;
  padding: 28px 32px 60px;
  width: 100%;
}

.sb-lesson-content h1 {
  font-family: var(--font-head);
  font-size: 38px;
  font-weight: 800;
  color: var(--sb-azul);
  margin: 0 0 24px;
}

/* Video */
.sb-video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius);
  margin-bottom: 32px;
  box-shadow: var(--shadow-md);
  background: #000;
}

.sb-video-wrapper iframe,
.sb-video-wrapper video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

/* Miniatura propia (sin overlay de "Compartir" / "Ver en YouTube") */
.sb-video-facade {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: #000;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  padding: 0;
}

.sb-video-facade--vimeo {
  background: linear-gradient(135deg, var(--sb-azul, #1c2b6b), #0f1a45);
}

.sb-video-facade__play {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--sb-azul, #1c2b6b);
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}

.sb-video-facade__play:hover {
  transform: scale(1.08);
  background: #fff;
}

.sb-video-facade--loading .sb-video-facade__play {
  opacity: .5;
  cursor: default;
  pointer-events: none;
}

/* Disuasivo liviano (pedido 2026-09-08, seguridad de contenido) — no es
   protección real: no evita grabar la pantalla ni copiar el video por otras
   vías, solo saca el atajo casual de "clic derecho → guardar/copiar" sobre el
   reproductor. El menú contextual también se bloquea por JS (ver
   initVideoFacade() en sb-lms.js) porque CSS solo no alcanza para el iframe
   del embed una vez cargado. */
.sb-video-wrapper {
  -webkit-user-select: none;
  user-select: none;
}

/* Marca de agua con nombre/email del alumno logueado, superpuesta sobre el
   video (pedido 2026-09-08). No es una traba técnica sino trazabilidad: si
   alguien graba la pantalla y comparte el archivo, la marca identifica de qué
   cuenta salió. initVideoWatermark() en sb-lms.js la reposiciona sola cada
   12s para que no sea trivial recortarla con un crop fijo. */
.sb-video-watermark {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  color: rgba(255, 255, 255, .38);
  font: 600 12px/1.2 var(--font-body, sans-serif);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
  white-space: nowrap;
  transition: top .8s ease, left .8s ease;
}

/* Presentaciones (PPTX/PDF vía visor de Google Docs) */
.sb-pptx-viewer-wrapper {
  position: relative;
  padding-bottom: 129%; /* proporción vertical del visor en mobile */
  height: 0;
  overflow: hidden;
  border-radius: var(--radius);
  margin-bottom: 32px;
  box-shadow: var(--shadow-md);
  background: #f3f4fb;
}

.sb-pptx-viewer-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

@media (min-width: 768px) {
  .sb-pptx-viewer-wrapper { padding-bottom: 75%; }
}

.sb-lesson-text { font-size: 16px; line-height: 1.75; color: var(--sb-text); margin-bottom: 40px; }
.sb-lesson-text p { margin-bottom: 1.2em; }

.sb-lesson-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 0 0;
  border-top: 2px solid var(--sb-gm);
  margin-top: 40px;
  flex-wrap: wrap;
}

.sb-completed-msg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #d1fae5;
  color: #065f46;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
}

.sb-access-denied { max-width: 600px; margin: 60px auto; padding: 20px; }

/* ══════════════════════════════════════════════════════
   ZOOM BLOCK
   ══════════════════════════════════════════════════════ */

.sb-zoom-block {
  border-radius: var(--radius);
  border: 2px solid var(--sb-border);
  padding: 20px 24px;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sb-zoom-block.is-live {
  border-color: #ef4444;
  background: #fff5f5;
}

.sb-zoom-block.is-upcoming {
  border-color: var(--sb-azul);
  background: var(--sb-azul-lt);
}

.sb-zoom-block.is-past {
  border-color: var(--sb-border);
  background: var(--sb-gc);
  opacity: .85;
}

.sb-zoom-block__header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sb-zoom-block__icon { font-size: 28px; }

.sb-zoom-block__title { font-family: var(--font-head); font-size: 18px; font-weight: 700; margin: 0 0 2px; }

.sb-zoom-block__date { margin: 0; font-size: 13px; color: var(--sb-muted); }

.sb-zoom-block__live-badge {
  margin-left: auto;
  background: #ef4444;
  color: white;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  animation: sb-pulse 1.5s infinite;
}

@keyframes sb-pulse { 0%,100% { opacity:1; } 50% { opacity:.6; } }

.sb-zoom-block__details {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: var(--sb-muted);
}

.sb-zoom-block__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  background: var(--sb-azul);
  color: var(--sb-white) !important;
  align-self: flex-start;
  transition: background .15s;
}

.sb-zoom-block__btn.is-active { background: #ef4444; }
.sb-zoom-block__btn:hover { opacity: .88; }

.sb-zoom-block__past-msg { font-size: 13px; color: var(--sb-muted); margin: 0; }

/* ══════════════════════════════════════════════════════
   QUIZ
   ══════════════════════════════════════════════════════ */

.sb-quiz-block {
  background: var(--sb-white);
  border: 2px solid var(--sb-gm);
  border-radius: var(--radius);
  padding: 28px 32px;
  margin: 36px 0;
}

.sb-quiz-header { margin-bottom: 24px; border-bottom: 2px solid var(--sb-gc); padding-bottom: 16px; }
.sb-quiz-header h3 { font-family: var(--font-head); font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.sb-quiz-header__sub { margin: 0; font-size: 13px; color: var(--sb-muted); }

.sb-question { margin-bottom: 28px; }

.sb-question__text {
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 12px;
  line-height: 1.5;
}

.sb-question__options { display: flex; flex-direction: column; gap: 8px; }

.sb-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 2px solid var(--sb-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  transition: all .15s;
}

.sb-option:hover { border-color: var(--sb-lav); background: var(--sb-lav-lt); }

.sb-option input[type="radio"] { width: 16px; height: 16px; accent-color: var(--sb-azul); flex-shrink: 0; }

.sb-option.is-correct { border-color: var(--sb-success); background: #d1fae5; }
.sb-option.is-wrong   { border-color: var(--sb-danger);  background: #fee2e2; }
.sb-option.is-missed  { border-color: var(--sb-success); background: #d1fae5; opacity: .7; }

/* Quiz result */
.sb-quiz-result { padding: 24px; border-radius: var(--radius-sm); margin-top: 20px; }
.sb-quiz-result--pass { background: #d1fae5; border: 2px solid var(--sb-success); }
.sb-quiz-result--fail { background: #fee2e2; border: 2px solid var(--sb-danger); }

.sb-quiz-result__score {
  font-family: var(--font-head);
  font-size: 52px;
  font-weight: 800;
  margin-bottom: 4px;
}

.sb-quiz-result--pass .sb-quiz-result__score { color: #065f46; }
.sb-quiz-result--fail .sb-quiz-result__score { color: #991b1b; }

.sb-quiz-result__msg { font-size: 16px; font-weight: 600; margin-bottom: 16px; }

.sb-quiz-passed {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: #d1fae5;
  border-radius: var(--radius-sm);
  border: 2px solid var(--sb-success);
}

.sb-quiz-passed__icon { font-size: 32px; }
.sb-quiz-passed strong { color: #065f46; font-size: 16px; display: block; }
.sb-quiz-passed p { margin: 4px 0 0; color: #065f46; font-size: 13px; }

.sb-quiz-prev { margin-top: 12px; font-size: 13px; color: var(--sb-muted); }

.sb-question-feedback {
  margin-top: 8px;
  padding: 10px 14px;
  background: var(--sb-gc);
  border-radius: 6px;
  font-size: 13px;
  color: var(--sb-muted);
  border-left: 3px solid var(--sb-lav);
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .sb-sidebar { display: none; }
  .sb-sidebar.is-open {
    display: flex;
    position: fixed;
    top: 0; left: 0;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    z-index: 1000;
    box-shadow: 4px 0 24px rgba(0,0,0,.2);
  }
  .sb-sidebar__close { display: flex; align-items: center; justify-content: center; width: 100%; padding: 12px; background: var(--sb-gc); border: none; font-size: 16px; cursor: pointer; flex-shrink: 0; }
  .sb-sidebar-toggle { display: flex; }
  .sb-lesson-content { padding: 24px 16px 40px; }
  .sb-lesson-content h1 { font-size: 28px; }
  .sb-course-hero__overlay { padding: 24px; flex-direction: column; }
  .sb-course-hero__content h1 { font-size: 34px; }
  .sb-course-hero__cta { width: 100%; }
  .sb-dashboard-header { flex-direction: column; align-items: flex-start; }
  .sb-dashboard-quick-stats { flex-wrap: wrap; gap: 16px; }
  .sb-quiz-block { padding: 20px; }
}

@media (max-width: 600px) {
  .sb-archive-header h1 { font-size: 32px; }
  .sb-lesson-topbar { flex-wrap: wrap; gap: 8px; }
  /* "Volver a mi cuenta" es la única salida de esta pantalla — se mantiene
     visible incluso en mobile, a diferencia del breadcrumb viejo que se ocultaba acá. */
  .sb-breadcrumb-back { flex-basis: 100%; order: 3; }
  .sb-teacher-actions { flex-direction: column; }
}

/* ── Pack: precio + lista de espera ────────────────────── */

.sb-pack-price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.sb-pack-price__amount {
  font-family: var(--font-head);
  font-size: 36px;
  font-weight: 800;
  color: var(--sb-white);
  line-height: 1;
}

.sb-pack-price__installments,
.sb-pack-price__usd {
  font-size: 13px;
  color: rgba(255,255,255,.8);
}

.sb-pack-price__soon {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  color: var(--sb-white);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.sb-waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 260px;
}

.sb-waitlist-form .sb-input {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: none;
  font-family: var(--font-body);
  font-size: 14px;
}

.sb-waitlist-msg {
  font-size: 13px;
  margin: 0;
  color: rgba(255,255,255,.85);
}

.sb-waitlist-msg.is-error { color: #fecaca; }
.sb-waitlist-msg.is-success { color: #bbf7d0; font-weight: 600; }

/* ══════════════════════════════════════════════════════
   15. WOOCOMMERCE — MI CUENTA / LOGIN / REGISTRO
   Antes esta pantalla se veía 100% con el default de WooCommerce
   (sin ninguna regla del plugin ni del tema) — el resto del sitio
   tiene identidad fuerte y acá se rompía por completo. Estas reglas
   no van dentro de ".sb-lms" porque WooCommerce no envuelve su
   markup con esa clase — is_lms_page() (public/class-public.php) se
   actualizó para cargar esta hoja también en Mi cuenta/Carrito/Checkout.
   ══════════════════════════════════════════════════════ */

.woocommerce-account { font-family: var(--font-body); }

.woocommerce-account .woocommerce-notices-wrapper { margin-bottom: 20px; }
.woocommerce-account .woocommerce-notices-wrapper:empty { margin: 0; }

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Layout: sidebar fija + contenido, en vez del float angosto de WooCommerce */
.woocommerce-account { display: block; }
.woocommerce-account .woocommerce-MyAccount-navigation {
  float: none;
  width: 230px;
  background: var(--sb-white);
  border: 1px solid var(--sb-border);
  padding: 10px;
  margin: 0 28px 28px 0;
}
.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  overflow: hidden;
  background: var(--sb-white);
  border: 1px solid var(--sb-border);
  padding: 32px;
}
@media (min-width: 641px) {
  .woocommerce-account .woocommerce-MyAccount-navigation { float: left; }
  .woocommerce-account .woocommerce-MyAccount-content { float: left; width: calc(100% - 258px); }
}

.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }

.woocommerce-MyAccount-navigation-link {
  margin: 0 0 4px;
}
.woocommerce-MyAccount-navigation-link a {
  display: block;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--sb-text);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.woocommerce-MyAccount-navigation-link a:hover { background: var(--sb-gc); color: var(--sb-azul); }
.woocommerce-MyAccount-navigation-link.is-active a {
  background: var(--sb-grad-cta);
  color: var(--sb-white) !important;
  box-shadow: 0 4px 14px rgba(0,194,212,.28);
}
.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 8px; border-top: 1px solid var(--sb-border); padding-top: 8px; }
.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--sb-danger); }
.woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: #fee2e2; color: #991b1b; }

.woocommerce-MyAccount-content > p:first-child { font-size: 15px; color: var(--sb-muted); }
.woocommerce-MyAccount-content a { color: var(--sb-azul); font-weight: 600; text-decoration: none; }
.woocommerce-MyAccount-content a:hover { color: var(--sb-cyan); text-decoration: underline; }
.woocommerce-MyAccount-content mark { background: none; color: var(--sb-azul); font-weight: 700; }

/* Tabla de pedidos / descargas */
.woocommerce-account table.shop_table,
.woocommerce-account table.woocommerce-orders-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border: 1px solid var(--sb-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: 13.5px;
}
.woocommerce-account table.shop_table th {
  background: var(--sb-gc);
  color: var(--sb-muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .4px;
  padding: 12px 14px;
  text-align: left;
}
.woocommerce-account table.shop_table td {
  padding: 12px 14px;
  border-top: 1px solid var(--sb-border);
}
.woocommerce-account table.shop_table .button { white-space: nowrap; }

/* Formularios (editar cuenta / direcciones) — los inputs ya salen redondeados
   y con foco cyan por el CSS global de Astra; acá solo ordenamos el layout. */
.woocommerce-account fieldset { border: 1px solid var(--sb-border); border-radius: var(--radius-sm); padding: 20px; margin: 20px 0; }
.woocommerce-account fieldset legend { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; color: var(--sb-azul); padding: 0 8px; }
.woocommerce-account .form-row label { font-size: 13px; font-weight: 600; color: var(--sb-text); margin-bottom: 4px; display: block; }
.woocommerce-account .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.woocommerce-account address { font-style: normal; line-height: 1.7; color: var(--sb-muted); }

/* ── Login / Registro (mismo template, se muestra cuando no hay sesión) ──── */

#customer_login.u-columns,
.woocommerce-account #customer_login {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}
@media (min-width: 641px) {
  #customer_login.u-columns, .woocommerce-account #customer_login { grid-template-columns: 1fr 1fr; }
}
#customer_login .u-column1, #customer_login .u-column2 { float: none; width: auto; }

.woocommerce form.login, .woocommerce form.register {
  background: var(--sb-white);
  border: 1px solid var(--sb-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 32px 28px;
  margin: 0;
}

#customer_login h2 {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--sb-azul);
  margin: 0 0 18px;
}

.woocommerce form .form-row { margin-bottom: 14px; }
.woocommerce-form-login__rememberme { font-size: 13px; color: var(--sb-muted); display: flex; align-items: center; gap: 6px; }
.woocommerce-LostPassword { margin-top: 14px; font-size: 13px; }
.woocommerce-LostPassword a { color: var(--sb-muted); text-decoration: underline; }
.woocommerce-LostPassword a:hover { color: var(--sb-azul); }

/* ══════════════════════════════════════════════════════
   16. CARRITO / CHECKOUT — SUGERENCIA DE COMPRA (UPSELL)
   ══════════════════════════════════════════════════════ */

.sb-cart-upsell {
  margin: 28px 0;
  padding: 22px;
  background: var(--sb-azul-lt);
  border: 1px solid var(--sb-gm);
  border-radius: var(--radius);
}

.sb-cart-upsell__title {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--sb-azul);
  margin: 0 0 16px;
}

.sb-cart-upsell__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.sb-cart-upsell__card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--sb-white);
  border: 1px solid var(--sb-border);
  border-radius: var(--radius-sm);
  padding: 12px;
  transition: border-color .15s, transform .15s;
}
.sb-cart-upsell__card:hover { border-color: var(--sb-cyan); transform: translateY(-2px); }

.sb-cart-upsell__thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--sb-cyan) 0%, var(--sb-azul) 100%);
  background-size: cover;
  background-position: center;
}
.sb-cart-upsell__thumb--placeholder { display: flex; align-items: center; justify-content: center; font-size: 22px; }

.sb-cart-upsell__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sb-cart-upsell__name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sb-text) !important;
  text-decoration: none !important;
  line-height: 1.3;
}
.sb-cart-upsell__name:hover { color: var(--sb-azul) !important; }
.sb-cart-upsell__price { font-family: var(--font-head); font-size: 15px; font-weight: 800; color: var(--sb-azul); }
.sb-cart-upsell__body .sb-btn { align-self: flex-start; margin-top: 2px; padding: 7px 16px; font-size: 12px; }

@media (max-width: 640px) {
  .woocommerce-account .woocommerce-MyAccount-navigation { width: 100%; margin: 0 0 20px; }
  .woocommerce-account .woocommerce-MyAccount-content { padding: 22px; }
}