/* ══════════════════════════════════════════════════════════════════════
   InverNovaK — Single Course Page  (invkc-*)
   ══════════════════════════════════════════════════════════════════════ */

/* Reset Elementor en canvas */
.elementor-location-single .elementor-section-wrap,
.elementor-location-single .e-con,
.elementor-location-single .elementor {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

.invkc-page {
  --bg0:    #010b20;
  --bg1:    #0e1120;
  --bg2:    #131629;
  --teal:   #06d6f0;
  --blue:   #2563eb;
  --green:  #22c55e;
  --red:    #ef4444;
  --txt1:   #ffffff;
  --txt2:   rgba(255,255,255,.65);
  --txt3:   rgba(255,255,255,.30);
  --border: rgba(255,255,255,.07);
  --radius: 12px;
  --t:      .16s ease;

  display: flex !important;
  height: 100vh !important;
  width: 100% !important;
  background: var(--bg0) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 14px;
  color: var(--txt1);
  line-height: 1.5;
  overflow: hidden;
}
.invkc-page *, .invkc-page *::before, .invkc-page *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.invkc-page a { text-decoration: none; color: inherit; }
.invkc-page button { cursor: pointer; background: none; border: none; font-family: inherit; color: inherit; }

/* ── Overlay mobile ─────────────────────────────────────────────────── */
.invkc-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 80;
}
.invkc-overlay.is-open { display: block; }

/* ── Sidebar izquierda — idéntico al Dashboard ──────────────────── */
.invkc-page .invkc-sidebar {
  width: 210px !important;
  flex-shrink: 0 !important;
  background: #0c0f1e !important;
  border-right: 1px solid rgba(255,255,255,.07) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 1.25rem .75rem !important;
  height: 100% !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  z-index: 10 !important;
}
.invkc-page .invkc-sidebar::-webkit-scrollbar { display: none; }

/* Brand */
.invkc-page .invkc-brand {
  display: flex !important;
  align-items: center !important;
  gap: .625rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  margin-bottom: .75rem !important;
  flex-shrink: 0 !important;
}
.invkc-page .invkc-brand-logo-img {
  max-width: 100% !important;
  height: auto !important;
  max-height: 48px !important;
  object-fit: contain !important;
  display: block !important;
}
.invkc-page .invkc-brand-name {
  font-size: .875rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.2 !important;
}
.invkc-page .invkc-brand-sub {
  font-size: .6rem !important;
  color: rgba(255,255,255,.3) !important;
  letter-spacing: .08em !important;
}

/* Nav container */
.invkc-page .invkc-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: .15rem !important;
  flex: 1 !important;
}

/* Nav items — mismo estilo que el Dashboard */
.invkc-page .invkc-nav-item {
  display: flex !important;
  align-items: center !important;
  gap: .625rem !important;
  padding: .55rem .75rem !important;
  border-radius: 8px !important;
  color: #8892b0 !important;
  font-size: .8125rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background .17s ease, color .17s ease, border-color .17s ease !important;
  border-left: 2px solid transparent !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
.invkc-page .invkc-nav-item svg { flex-shrink: 0 !important; }
.invkc-page .invkc-nav-item span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.invkc-page .invkc-nav-item:hover {
  background: rgba(255,255,255,.05) !important;
  color: #fff !important;
}
.invkc-page .invkc-nav-item.is-active {
  background: rgba(6,214,240,.08) !important;
  color: #06d6f0 !important;
  border-left-color: #06d6f0 !important;
}

/* Footer del sidebar */
.invkc-page .invkc-sidebar-footer {
  margin-top: auto !important;
  padding-top: .875rem !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .15rem !important;
  flex-shrink: 0 !important;
}
.invkc-page .invkc-logout:hover {
  color: #ef4444 !important;
  background: rgba(239,68,68,.05) !important;
}

/* ── Main wrapper ───────────────────────────────────────────────────── */
.invkc-main {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden;
}

/* ── Topbar (desktop: solo avatar derecha / móvil: ham + título + avatar) */
.invkc-topbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 1.25rem;
  background: var(--bg1);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 60;
  justify-content: flex-end;
}
.invkc-ham {
  display: none; /* solo visible en móvil */
  width: 36px; height: 36px;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  border-radius: 8px; background: var(--bg2); flex-shrink: 0;
}
.invkc-ham span { display: block; width: 16px; height: 2px; background: var(--txt2); border-radius: 2px; }
.invkc-topbar-title {
  display: none; /* solo visible en móvil */
  font-size: .8125rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--txt1); flex: 1;
}

/* Grupo derecho del topbar */
.invkc-topbar-right {
  display: flex; align-items: center; gap: .65rem;
}

/* Avatar / chip de perfil */
.invkc-avatar-link {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  transition: opacity var(--t), transform var(--t);
}
.invkc-avatar-link:hover { opacity: .85; transform: scale(1.05); }

.invkc-user-chip {
  display: flex; align-items: center; gap: .55rem;
  text-decoration: none;
  padding: 4px 10px 4px 4px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,.1);
  transition: background var(--t);
  flex-shrink: 0;
}
.invkc-user-chip:hover { background: rgba(255,255,255,.06); }
.invkc-user-name {
  font-size: .8rem; font-weight: 600;
  color: var(--txt1);
  white-space: nowrap; max-width: 140px;
  overflow: hidden; text-overflow: ellipsis;
}
.invkc-avatar {
  width: 32px; height: 32px;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(255,255,255,.12);
  display: block; flex-shrink: 0;
}
.invkc-avatar-fb {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.invkc-avatar-placeholder {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg2);
  border: 2px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  color: var(--txt3);
}

/* ── Hero del curso ──────────────────────────────────────────────────── */
.invkc-hero {
  background: var(--bg1);
  border-bottom: 1px solid var(--border);
  padding: 1.75rem 2rem;
}
.invkc-breadcrumb {
  font-size: .72rem; color: var(--txt3);
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  margin-bottom: .75rem;
}
.invkc-breadcrumb a { color: var(--txt3); transition: color var(--t); }
.invkc-breadcrumb a:hover { color: var(--txt2); }
.invkc-hero h1 {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 800; letter-spacing: -.025em; line-height: 1.2;
  margin-bottom: .625rem; color: var(--txt1);
}
.invkc-hero-meta {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .4rem 1rem; font-size: .78rem; color: var(--txt2);
}
.invkc-badge {
  display: inline-flex; align-items: center;
  padding: .2rem .6rem; border-radius: 99px;
  background: rgba(6,214,240,.12); color: var(--teal);
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.invkc-stars { color: #f59e0b; }
.invkc-rating { display: flex; align-items: center; gap: .3rem; }
.invkc-rating-num { color: var(--teal); font-weight: 700; }
.invkc-hero-meta span { display: flex; align-items: center; gap: .3rem; }

/* ── Grid principal ──────────────────────────────────────────────────── */
.invkc-grid {
  display: grid !important;
  grid-template-columns: 1fr 320px !important;
  align-items: stretch !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* ── Columna izquierda ───────────────────────────────────────────────── */
.invkc-content { min-width: 0; overflow-y: auto; }

/* Video */
.invkc-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  overflow: hidden;
}
.invkc-video-wrap iframe,
.invkc-video-wrap video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: none;
}
.invkc-thumb-wrap {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.invkc-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }
.invkc-play-btn {
  position: absolute;
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(0,0,0,.65); border: 2px solid rgba(255,255,255,.8);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--t), background var(--t);
}
.invkc-thumb-wrap:hover .invkc-play-btn { transform: scale(1.1); background: var(--blue); border-color: var(--blue); }

/* Card móvil (entre video y tabs, solo mobile) */
.invkc-enroll-mobile {
  display: none;
  padding: 1rem 1.25rem;
  background: var(--bg1);
  border-bottom: 1px solid var(--border);
}

/* ── Tabs ────────────────────────────────────────────────────────────── */
.invkc-tabs-nav {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 1.5rem;
  position: sticky; top: 0;
  background: var(--bg0); z-index: 30;
}
.invkc-tab-btn {
  padding: .875rem 0;
  margin-right: 1.5rem;
  font-size: .82rem; font-weight: 500;
  color: var(--txt3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--t), border-color var(--t);
  white-space: nowrap;
}
.invkc-tab-btn:hover { color: var(--txt2); }
.invkc-tab-btn.is-active { color: var(--teal); border-bottom-color: var(--teal); }

.invkc-tab-pane { display: none; padding: 1.75rem 1.5rem; }
.invkc-tab-pane.is-active { display: block; }

/* Contenido de descripción */
.invkc-desc h2, .invkc-desc h3 { font-size: 1rem; font-weight: 700; color: var(--txt1); margin: 1.25rem 0 .5rem; }
.invkc-desc p, .invkc-desc li { color: var(--txt2); line-height: 1.75; margin-bottom: .5rem; }
.invkc-desc ul, .invkc-desc ol { padding-left: 1.25rem; }
.invkc-desc a { color: var(--teal); }
.invkc-desc strong, .invkc-desc b { color: var(--txt1); }

/* ── Aside derecho: enrollment + curriculum ──────────────────────────── */
.invkc-aside {
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  border-left: 1px solid var(--border) !important;
  background: var(--bg1) !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}
.invkc-aside::-webkit-scrollbar { display: none; }

/* Enrollment card */
.invkc-enroll-card { padding: 1.25rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.invkc-thumb-small {
  width: 100%; aspect-ratio: 16/9;
  border-radius: 10px; overflow: hidden;
  margin-bottom: 1rem; background: var(--bg2); position: relative;
}
.invkc-thumb-small img { width: 100%; height: 100%; object-fit: cover; }
.invkc-thumb-small .invkc-play-btn { width: 44px; height: 44px; }
.invkc-price-row { display: flex; align-items: baseline; gap: .5rem; margin-bottom: 1rem; }
.invkc-price { font-size: 1.4rem; font-weight: 800; color: var(--txt1); }
.invkc-price-free { color: var(--teal); }
.invkc-btn-enroll {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  width: 100%; padding: .8rem 1rem;
  border-radius: 10px; background: var(--blue);
  color: #fff; font-size: .875rem; font-weight: 700;
  transition: background var(--t), transform var(--t);
  margin-bottom: .875rem; cursor: pointer; border: none;
}
.invkc-btn-enroll:hover { background: #1d50c8; transform: translateY(-1px); color: #fff; }
.invkc-btn-continue { background: rgba(6,214,240,.12); color: var(--teal) !important; border: 1px solid rgba(6,214,240,.25); }
.invkc-btn-continue:hover { background: rgba(6,214,240,.2); color: var(--teal) !important; }

/* Progress bar */
.invkc-progress-wrap { margin-bottom: .875rem; }
.invkc-progress-label { display: flex; justify-content: space-between; font-size: .72rem; color: var(--txt3); margin-bottom: .4rem; }
.invkc-progress-bar { height: 5px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; }
.invkc-progress-fill { height: 100%; background: linear-gradient(90deg, var(--blue), var(--teal)); border-radius: 99px; transition: width .4s ease; }

/* Stats */
.invkc-course-stats { display: flex; flex-direction: column; gap: .5rem; padding-top: .875rem; border-top: 1px solid var(--border); }
.invkc-stat { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--txt2); }
.invkc-stat svg { color: var(--teal); flex-shrink: 0; }

/* ── Curriculum ──────────────────────────────────────────────────────── */
.invkc-curriculum { flex: 1; }
.invkc-curriculum-hdr {
  padding: .875rem 1.25rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--txt3); border-bottom: 1px solid var(--border);
}
.invkc-section { border-bottom: 1px solid var(--border); }
.invkc-section:last-child { border-bottom: none; }
.invkc-section-hdr {
  width: 100%; display: flex; align-items: center; gap: .5rem;
  padding: .75rem 1.25rem; text-align: left; background: transparent;
  color: var(--txt2); font-size: .8rem; font-weight: 600;
  transition: background var(--t), color var(--t);
}
.invkc-section-hdr:hover { background: rgba(255,255,255,.03); color: var(--txt1); }
.invkc-section.is-open .invkc-section-hdr { color: var(--txt1); }
.invkc-section-title { flex: 1; line-height: 1.35; min-width: 0; overflow: hidden; }
.invkc-section-count { font-size: .68rem; color: var(--txt3); font-weight: 400; white-space: nowrap; flex-shrink: 0; }
.invkc-chevron { flex-shrink: 0; transition: transform var(--t); color: var(--txt3); }
.invkc-section.is-open .invkc-chevron { transform: rotate(180deg); }

.invkc-section-body { display: none; }
.invkc-section.is-open .invkc-section-body { display: block; }

.invkc-lesson-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem 1.25rem .55rem 1.75rem;
  font-size: .775rem; color: var(--txt2);
  transition: background var(--t), color var(--t);
  border-top: 1px solid var(--border);
}
.invkc-lesson-item:hover { background: rgba(255,255,255,.03); color: var(--txt1); }
.invkc-lesson-item.is-done .invkc-li-icon { color: var(--green); }
.invkc-lesson-item.is-locked { cursor: default; }
.invkc-lesson-item.is-locked:hover { background: none; color: var(--txt2); }
.invkc-li-icon { flex-shrink: 0; }
.invkc-li-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invkc-li-type { font-size: .65rem; color: var(--txt3); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }

/* Tab móvil de curriculum */
.invkc-curriculum-tab .invkc-curriculum-hdr { padding-left: 0; border: none; margin-bottom: .5rem; }
.invkc-curriculum-tab .invkc-section { border-color: var(--border); border-radius: var(--radius); margin-bottom: .375rem; background: var(--bg1); overflow: hidden; }
.invkc-curriculum-tab .invkc-lesson-item { padding-left: 1.25rem; }

/* ══ RESPONSIVE ══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .invkc-page { flex-direction: column !important; }

  /* Sidebar → drawer */
  .invkc-page .invkc-sidebar {
    position: fixed !important;
    left: -220px !important;
    top: 0 !important; bottom: 0 !important;
    height: 100% !important;
    z-index: 90 !important;
    transition: left .2s ease !important;
    box-shadow: 4px 0 32px rgba(0,0,0,.6) !important;
  }
  .invkc-page .invkc-sidebar.is-open { left: 0 !important; }

  .invkc-topbar { display: flex !important; justify-content: flex-start !important; }
  .invkc-ham { display: flex !important; }
  .invkc-topbar-title { display: block !important; }

  .invkc-hero { padding: 1rem !important; }
  .invkc-hero h1 { font-size: 1.2rem !important; }

  /* Grid: 1 sola columna */
  .invkc-grid { grid-template-columns: 1fr !important; }

  /* Ocultar aside derecho (aparece en tab "Contenido") */
  .invkc-aside { display: none !important; }

  /* Mostrar card de inscripción móvil */
  .invkc-enroll-mobile { display: block !important; }

  .invkc-tabs-nav { padding: 0 1rem; overflow-x: auto; scrollbar-width: none; }
  .invkc-tabs-nav::-webkit-scrollbar { display: none; }
  .invkc-tab-pane { padding: 1.25rem 1rem !important; }
}

@media (max-width: 480px) {
  .invkc-hero { padding: .875rem 1rem !important; }
  .invkc-hero h1 { font-size: 1.1rem !important; }
  .invkc-hero-meta { gap: .3rem .625rem; font-size: .72rem; }
}

/* ── LearnDash accordion — sección activa: azul de marca ────────── */
/* Sin scope .invkc-page: el CSS inline de LD se inyecta globalmente y
   necesitamos máxima especificidad para ganarlo */
.ld-item-list-item--expanded > .ld-item-list-item-preview,
.ld-item-list-item--expanded .ld-item-list-item-preview,
.ld-primary-color-bg {
  background-color: #2563eb !important;
  background: #2563eb !important;
  border-color: #2563eb !important;
}
.ld-primary-color { color: #2563eb !important; }
.ld-button.ld-primary-color-btn,
.ld-content-actions .ld-primary-color-btn {
  background: #2563eb !important;
  border-color: #2563eb !important;
}

/* ── LearnDash native progress bar — override para tema oscuro ─── */
.invkc-page .ld-progress,
.invkc-page .ld-progress-bar {
  background: rgba(255,255,255,.04) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 10px !important;
  padding: 1rem 1.5rem !important;
  margin: 1.25rem 0 !important;
}
.invkc-page .ld-progress *,
.invkc-page .ld-progress-bar * {
  color: #fff !important;
}
.invkc-page .ld-progress-bar__label,
.invkc-page .ld-progress-bar__label--complete {
  color: #06d6f0 !important;
  font-size: .75rem !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}
.invkc-page .ld-progress-bar__percentage,
.invkc-page .ld-progress-bar__steps {
  color: #fff !important;
  font-weight: 600 !important;
}
.invkc-page .ld-progress-bar__last-activity {
  color: rgba(255,255,255,.45) !important;
  font-size: .78rem !important;
}
/* Barra de progreso interna */
.invkc-page .ld-progress-bar .ld-progress-bar__fill,
.invkc-page .ld-progress__track-fill {
  background: linear-gradient(90deg, #2563eb, #06d6f0) !important;
  border-radius: 99px !important;
}