:root {
  --bg: #efedf7;
  --app-bg: #ffffff;
  --card: #ffffff;
  --ink: #1f1a33;
  --muted: #7b7790;
  --line: #ece9f4;
  --brand: #7c3aed;
  --brand-2: #6d28d9;
  --brand-soft: #f2ecfe;
  --grad: linear-gradient(135deg, #7c3aed 0%, #a855f7 55%, #8b5cf6 100%);
  --ok: #16a34a;
  --ok-soft: #e7f6ec;
  --amber: #d97706;
  --shadow: 0 10px 30px rgba(84, 39, 143, .12);
  --shadow-sm: 0 4px 14px rgba(84, 39, 143, .08);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

/* App shell: centered mobile column */
.app {
  max-width: 460px; margin: 0 auto; min-height: 100vh; background: var(--app-bg);
  position: relative; padding-bottom: 84px; box-shadow: 0 0 60px rgba(84,39,143,.08);
}
.screen { padding: 18px 18px 8px; }

/* Header */
.appbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 6px; }
.wordmark { display: flex; align-items: center; gap: 9px; }
.wordmark .v {
  width: 38px; height: 32px; display: grid; place-items: center;
}
.wordmark .v svg, .wordmark .v img { width: 100%; height: 100%; object-fit: contain; }
.wordmark .txt { line-height: 1; }
.wordmark .txt b { font-size: 16px; font-weight: 800; letter-spacing: .3px; }
.wordmark .txt small { display: block; font-size: 9.5px; letter-spacing: 3px; color: var(--muted); margin-top: 2px; text-transform: uppercase; }
.appbar .tools { display: flex; align-items: center; gap: 12px; }
.iconbadge { position: relative; width: 22px; height: 22px; color: var(--muted); }
.iconbadge .dot { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); border: 2px solid #fff; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; }

/* Greeting / hero card */
.hero {
  margin: 8px 18px 6px; border-radius: 22px; color: #fff;
  padding: 20px; position: relative; overflow: hidden; box-shadow: var(--shadow);
  background:
    linear-gradient(100deg, #7c3aed 0%, rgba(124,58,237,.97) 38%, rgba(124,58,237,.62) 64%, rgba(109,40,217,.28) 100%),
    url('../img/hero.jpg');
  background-size: cover, cover;
  background-position: center, 70% 32%;
  background-repeat: no-repeat, no-repeat;
}
.hero .htext { position: relative; z-index: 2; }
.hero h1 { margin: 0 0 4px; font-size: 25px; font-weight: 800; max-width: 64%; }
.hero p { margin: 0 0 16px; font-size: 14px; opacity: .95; max-width: 60%; line-height: 1.3; }
.hero-art { position: absolute; right: -6px; top: 0; height: 60%; width: 46%; z-index: 1; pointer-events: none; }
.hero-art svg { width: 100%; height: 100%; }
.hero-tagline { position: absolute; right: 16px; top: 50%; transform: translateY(-28%); z-index: 2;
  max-width: 122px; text-align: right; font-style: italic; font-size: 12px; line-height: 1.35;
  opacity: .96; font-weight: 600; text-shadow: 0 1px 3px rgba(60, 20, 120, .4); }
.progress-pill { position: relative; z-index: 2; background: #fff; border-radius: 14px; padding: 10px 14px;
  box-shadow: 0 8px 18px rgba(60,20,120,.22); max-width: 74%; }
.progress-pill .row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.progress-pill .row b { color: var(--brand); font-size: 19px; font-weight: 800; }
.progress-pill .row span { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.progress-pill .track { height: 8px; border-radius: 99px; background: #ece9f4; overflow: hidden; }
.progress-pill .track > i { display: block; height: 100%; background: var(--grad); border-radius: 99px; }

/* Section header */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 0 12px; }
.sec-head h2 { margin: 0; font-size: 19px; font-weight: 800; }
.sec-head a { color: var(--brand); font-size: 13px; font-weight: 700; text-decoration: none; }

/* Course cards grid */
.courses { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.course {
  border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: var(--card);
  box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .12s, box-shadow .12s; position: relative;
}
.course:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.course.active { border-color: #d9c9fb; background: #faf7ff; }
.course .top { display: flex; align-items: center; justify-content: space-between; }
.course .num { font-size: 12px; font-weight: 800; color: var(--muted); }
.course .chev { color: var(--muted); font-size: 16px; }
.course .cicon { font-size: 26px; margin: 8px 0 6px; }
.course h3 { margin: 0 0 2px; font-size: 15px; font-weight: 800; line-height: 1.2; }
.course .lc { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.badge-status { position: absolute; top: 12px; right: 12px; font-size: 9.5px; font-weight: 800; letter-spacing: .4px;
  padding: 3px 8px; border-radius: 99px; background: var(--brand-soft); color: var(--brand); text-transform: uppercase; }
.badge-status.done { background: var(--ok-soft); color: var(--ok); }

/* mini progress bar */
.pbar { height: 7px; border-radius: 99px; background: var(--line); overflow: hidden; }
.pbar > i { display: block; height: 100%; background: var(--grad); border-radius: 99px; }
.course .pct { font-size: 11.5px; font-weight: 800; margin-top: 6px; color: var(--brand); }
.course .pct.done { color: var(--ok); }
.course .pct.zero { color: var(--muted); }

/* Continue-learning carousel */
.sec-sub { color: var(--muted); font-size: 13px; margin: -6px 0 12px; }
.carousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.carousel::-webkit-scrollbar { display: none; }
.cont-card { scroll-snap-align: center; flex: 0 0 100%; border: 1px solid var(--line); border-radius: 16px;
  background: #fff; box-shadow: var(--shadow-sm); overflow: hidden; }
.cont-card .cc-top { display: flex; gap: 12px; padding: 12px; }
.cont-card .thumb { width: 128px; height: 86px; border-radius: 12px; flex: none; background: var(--grad);
  position: relative; overflow: hidden; display: grid; place-items: center; }
.cont-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cont-card .thumb .play { position: absolute; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.92);
  display: grid; place-items: center; color: var(--brand); font-size: 15px; box-shadow: 0 4px 10px rgba(0,0,0,.2); }
.cont-card .thumb .dur { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.72); color: #fff;
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 6px; }
.cont-card .cc-info { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.cont-card .cc-info h4 { margin: 0 0 4px; font-size: 15px; font-weight: 800; line-height: 1.25; }
.cont-card .cc-info small { color: var(--muted); font-size: 12.5px; }
.cont-card .cc-btn { padding: 0 12px 12px; }
.dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.dots .d { width: 7px; height: 7px; border-radius: 50%; background: #d9d3ea; transition: width .18s, background .18s; }
.dots .d.active { background: var(--brand); width: 20px; border-radius: 99px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 12px;
  background: var(--grad); color: #fff; font-weight: 800; font-size: 14px; padding: 12px 16px; box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(1px); }
.btn.block { width: 100%; }
.btn.sm { padding: 8px 13px; font-size: 13px; border-radius: 10px; }
.btn.ghost { background: #fff; color: var(--brand); border: 1.5px solid #e4d9fb; box-shadow: none; }
.btn.soft { background: var(--brand-soft); color: var(--brand); box-shadow: none; }
.btn.ok { background: linear-gradient(135deg, #16a34a, #22c55e); }

/* Bottom nav */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 460px;
  background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  z-index: 40;
}
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; background: none; color: var(--muted); font-size: 10.5px; font-weight: 700; padding: 4px 0; }
.tab svg { width: 22px; height: 22px; }
.tab.active { color: var(--brand); }

/* Sub-screen header (back) */
.subhead { display: flex; align-items: center; gap: 12px; padding: 16px 18px 6px; }
.backbtn { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; color: var(--ink); }
.subhead h1 { margin: 0; font-size: 18px; font-weight: 800; }
.subhead .sub { font-size: 12px; color: var(--muted); }

/* Course detail: lesson list */
.course-hero { margin: 6px 18px; border-radius: 18px; padding: 18px; color: #fff; background: var(--grad); box-shadow: var(--shadow); }
.course-hero .cicon { font-size: 30px; }
.course-hero h2 { margin: 6px 0 4px; font-size: 20px; font-weight: 800; }
.course-hero p { margin: 0 0 12px; font-size: 13px; opacity: .92; }
.course-hero .bar { height: 10px; border-radius: 99px; background: rgba(255,255,255,.28); overflow: hidden; }
.course-hero .bar > i { display: block; height: 100%; background: #fff; }
.course-hero .pct { font-size: 12px; font-weight: 700; margin-top: 7px; }

.lessons { padding: 6px 18px 8px; display: flex; flex-direction: column; gap: 10px; }
.lrow { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: #fff; box-shadow: var(--shadow-sm); cursor: pointer; }
.lrow:hover { border-color: #e0d4fb; }
.lrow .check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); flex: none; display: grid; place-items: center; color: transparent; font-size: 13px; }
.lrow.done .check { background: var(--ok); border-color: var(--ok); color: #fff; }
.lrow .lmeta { flex: 1; min-width: 0; }
.lrow .lmeta strong { display: block; font-size: 14.5px; font-weight: 700; }
.lrow .lmeta small { color: var(--muted); font-size: 12px; }
.lrow .lchev { color: var(--muted); }

/* Lesson player */
.player { margin: 6px 18px; }
.player .frame { width: 100%; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; background: #000; position: relative; box-shadow: var(--shadow); }
.player .frame iframe, .player .frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player h2 { margin: 14px 0 4px; font-size: 19px; font-weight: 800; }
.player .pdesc { color: var(--muted); font-size: 13.5px; margin: 0 0 12px; }
.vtabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.vtab { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 99px; padding: 7px 12px; font-size: 12.5px; font-weight: 700; }
.vtab.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.lesson-nav { display: flex; gap: 10px; margin: 14px 0 10px; }
.lesson-nav .btn { flex: 1; }

/* Progress screen */
.ring-wrap { display: flex; align-items: center; gap: 18px; margin: 6px 18px 18px; padding: 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.ring { width: 92px; height: 92px; flex: none; }
.ring .num { font-size: 22px; font-weight: 800; fill: var(--ink); }
.stat-list { padding: 0 18px; display: flex; flex-direction: column; gap: 12px; }
.stat { border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; background: #fff; box-shadow: var(--shadow-sm); }
.stat .st-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.stat .st-top strong { font-size: 14.5px; }
.stat .st-top span { font-size: 12.5px; font-weight: 800; color: var(--brand); }

/* Profile */
.profile { text-align: center; padding: 26px 18px; }
.profile .big-av { width: 84px; height: 84px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: 32px; font-weight: 800; margin: 0 auto 12px; box-shadow: var(--shadow); }
.profile h2 { margin: 0 0 2px; font-size: 20px; }
.profile .role { color: var(--muted); font-size: 13px; margin-bottom: 20px; }
.profile .prow { display: flex; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; margin-bottom: 10px; box-shadow: var(--shadow-sm); font-size: 14px; }
.profile .prow small { color: var(--muted); }

.empty { text-align: center; color: var(--muted); padding: 60px 24px; }
.empty .big { font-size: 42px; margin-bottom: 10px; }

/* Login (academia) */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.login-card { width: 100%; max-width: 380px; background: #fff; border-radius: 22px; padding: 30px 26px; box-shadow: var(--shadow); }
.login-card .wordmark { justify-content: center; margin-bottom: 18px; }
.login-card .wordmark .v { width: 44px; height: 44px; font-size: 22px; border-radius: 13px; }
.login-card .wordmark .txt b { font-size: 19px; }
.login-card h1 { margin: 4px 0 2px; font-size: 22px; text-align: center; }
.login-card p.sub { margin: 0 0 20px; color: var(--muted); font-size: 13.5px; text-align: center; }
.login-card label { display: block; font-size: 12.5px; color: var(--muted); font-weight: 700; margin: 14px 0 6px; }
.login-card input { width: 100%; padding: 13px 14px; border-radius: 12px; border: 1.5px solid var(--line); font-size: 14px; outline: none; background: #faf9fe; }
.login-card input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(124,58,237,.15); }
.err { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; padding: 10px 12px; border-radius: 10px; font-size: 13px; margin-top: 14px; display: none; }
.err.show { display: block; }

.toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 12px; font-size: 13.5px; z-index: 60; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.toast.err { background: #b91c1c; }

/* Curso bloqueado */
.course.locked { opacity: .72; background: #f6f5fa; cursor: not-allowed; }
.course.locked:hover { transform: none; box-shadow: var(--shadow-sm); }
.course.locked .cicon { filter: grayscale(.55); opacity: .7; }
.course.locked h3 { color: #6b6880; }
.badge-status.lock { background: #ece9f4; color: #8b8798; }

/* Notificaciones */
.iconbadge { cursor: pointer; }
.notif-count { position: absolute; top: -6px; right: -7px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 99px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 800;
  display: grid; place-items: center; border: 2px solid #fff; box-sizing: content-box; }
.notif { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border: 1px solid var(--line);
  border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); margin-bottom: 10px; cursor: pointer; }
.notif.unread { background: #faf7ff; border-color: #e4d9fb; }
.notif .nicon { width: 38px; height: 38px; border-radius: 10px; background: var(--brand-soft); flex: none;
  display: grid; place-items: center; font-size: 18px; }
.notif .nbody { flex: 1; min-width: 0; }
.notif .nbody strong { font-size: 14.5px; display: block; }
.notif .nbody p { margin: 2px 0 4px; font-size: 13px; color: var(--ink); }
.notif .nbody small { color: var(--muted); font-size: 11.5px; }
.notif .nchev { color: var(--muted); align-self: center; font-size: 18px; }

/* ============================================================
   RESPONSIVE — tablet y escritorio
   ============================================================ */
@media (min-width: 700px) {
  .app { max-width: 760px; }
  .courses { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .cont-card { flex: 0 0 60%; }
}

@media (min-width: 1024px) {
  .app { max-width: 1100px; padding-bottom: 104px; }
  .screen { padding: 22px 32px 10px; }
  .appbar { padding: 22px 32px 8px; }

  /* Hero más grande */
  .hero { margin: 12px 32px 8px; padding: 30px 34px; border-radius: 28px; min-height: 220px; }
  .hero h1 { font-size: 34px; }
  .hero p { font-size: 16px; max-width: 55%; }
  .hero-art { width: 42%; height: 72%; }
  .progress-pill { max-width: 460px; padding: 14px 18px; }
  .progress-pill .row b { font-size: 22px; }

  /* Rejilla de cursos aprovecha el ancho */
  .courses { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .course { padding: 18px; border-radius: 18px; }
  .course .cicon { font-size: 30px; }
  .course h3 { font-size: 16.5px; }

  .sec-head h2 { font-size: 22px; }

  /* Carrusel: tarjetas de ancho fijo, se ven varias */
  .cont-card { flex: 0 0 460px; }

  /* Sub-pantallas centradas y legibles (no ocupan todo el ancho) */
  .subhead { padding: 22px 32px 8px; max-width: 900px; margin: 0 auto; }
  .course-hero, .lessons, .player, .ring-wrap, .stat-list, .profile,
  .ed-empty { max-width: 900px; margin-left: auto; margin-right: auto; }
  .player { max-width: 820px; }
  .player .frame { border-radius: 18px; }
  .profile { max-width: 560px; }

  /* Barra de navegación: pill flotante centrada en escritorio */
  .tabbar {
    max-width: 460px; bottom: 18px; border: 1px solid var(--line); border-radius: 20px;
    box-shadow: var(--shadow); padding: 10px 8px; background: rgba(255,255,255,.98);
  }
}

@media (min-width: 1360px) {
  .app { max-width: 1240px; }
  .courses { grid-template-columns: repeat(4, 1fr); }
}

/* Acceso de administrador */
.admin-chip { display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer;
  background: var(--grad); color: #fff; font-weight: 800; font-size: 12.5px; padding: 8px 12px;
  border-radius: 10px; box-shadow: var(--shadow-sm); }
.admin-chip svg { width: 15px; height: 15px; }
.admin-chip:active { transform: translateY(1px); }
.tabbar.has-admin { grid-template-columns: repeat(5, 1fr); }
.tab-admin.active, .tab-admin { color: var(--brand); }
@media (min-width: 1024px) {
  .tabbar.has-admin { max-width: 560px; }
}

/* Login: registro */
.login-card .switch { text-align: center; margin-top: 16px; font-size: 13.5px; color: var(--muted); }
.login-card .switch a { color: var(--brand); font-weight: 700; text-decoration: none; }
.login-card .two { display: flex; gap: 10px; }
.login-card .two > div { flex: 1; min-width: 0; }
.ok-msg { color: #166534; background: #e7f6ec; border: 1px solid #bbf7d0; padding: 10px 12px;
  border-radius: 10px; font-size: 13px; margin-top: 14px; display: none; }
.ok-msg.show { display: block; }

/* Asegura que el atributo hidden funcione incluso en .btn (display flex) */
[hidden] { display: none !important; }

/* Página de espera (cuenta pendiente) */
.wait-icon { font-size: 54px; margin: 8px 0 2px; line-height: 1; }

/* Foto de perfil (avatar) */
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile .big-av { overflow: hidden; }
.profile .big-av img { width: 100%; height: 100%; object-fit: cover; }
.av-actions { display: flex; gap: 8px; justify-content: center; margin: -4px 0 14px; }

/* ============ Quiz / Evaluación (visor) ============ */
.quiz-card { border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); padding: 16px; }
.quiz-intro { margin: 0 0 10px; color: var(--muted); font-size: 13.5px; }
.quiz-best { font-size: 13px; font-weight: 800; color: var(--brand); background: var(--brand-soft); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; }
.quiz-q { border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); padding: 14px; margin-bottom: 12px; }
.quiz-qt { font-weight: 800; font-size: 15px; margin-bottom: 10px; }
.quiz-opt { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 11px; margin-top: 8px; cursor: pointer; font-size: 14px; }
.quiz-opt:hover { border-color: #d9c9fb; }
.quiz-opt.sel { border-color: var(--brand); background: var(--brand-soft); }
.quiz-opt input { accent-color: var(--brand); width: 18px; height: 18px; flex: none; }
.quiz-opt.result { cursor: default; }
.quiz-opt.result .mark { width: 20px; font-weight: 900; text-align: center; flex: none; }
.quiz-opt.correct { border-color: #22c55e; background: #e7f6ec; color: #166534; }
.quiz-opt.correct .mark { color: #16a34a; }
.quiz-opt.wrong { border-color: #ef4444; background: #fef2f2; color: #991b1b; }
.quiz-opt.wrong .mark { color: #ef4444; }
.quiz-exp { margin-top: 10px; font-size: 13px; color: var(--muted); background: #faf7ff; border-radius: 10px; padding: 9px 12px; }
.quiz-score { display: flex; align-items: center; gap: 14px; border-radius: 16px; padding: 16px; margin-bottom: 14px; color: #fff; }
.quiz-score.ok { background: linear-gradient(135deg, #16a34a, #22c55e); }
.quiz-score.bad { background: linear-gradient(135deg, #d97706, #f59e0b); }
.quiz-score .big { font-size: 30px; font-weight: 800; }