/* Profe — sistema visual
   Tinta de pólder (#13294B), papel frío (#F7F9FC), amarillo de tren (#FFC917) como único color de acción,
   canal (#2A7F8E) para información, niebla (#E3E9F2) para superficies. */
:root { --r-pill: 999px; --rail-w: 232px; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --on-yellow: #13294B;
    --canal: #5EC0CF;
    --good: #6FD39A;
    --focus: #5EC0CF;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 26px -14px rgba(0,0,0,.6);
    --shadow-lift: 0 2px 4px rgba(0,0,0,.35), 0 20px 40px -18px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] { --on-yellow: #13294B; --canal: #5EC0CF; --good: #6FD39A; --focus: #5EC0CF; color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--canal); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--yellow); color: var(--on-yellow); padding: 8px 14px; border-radius: 10px; z-index: 100; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { line-height: 1.12; margin: 0; }
h3 { font-weight: 700; }
p { margin: 0; }
.muted { color: var(--ink-3); }
.tiny { font-size: 13px; }
.en { letter-spacing: -.005em; }
.stack > * + * { margin-top: var(--gap, 16px); }
.row { display: flex; gap: 12px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.spread { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
/* ---------- arranque ---------- */
.boot { min-height: 100vh; display: grid; place-content: center; gap: 18px; justify-items: center; color: var(--ink-3); }
.boot-mark { width: 54px; height: 54px; position: relative; }
.boot-mark::after { content: ""; position: absolute; inset: -8px; border: 3px solid var(--yellow); opacity: .5; animation: ring 1.6s ease-out infinite; }
/* ---------- estructura ---------- */
.app { min-height: 100vh; }
.shell { min-height: 100vh; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; }
.brand { display: flex; align-items: center; text-decoration: none; color: var(--ink); font-family: var(--font-display); }
.brand-mark { place-items: center; }
.topbar .spacer { flex: 1; }
.icon-btn { border-radius: 50%; border: 0; background: transparent; color: var(--ink-2); display: grid; place-items: center; text-decoration: none; }
.icon-btn:hover { background: var(--surface-2); }
.offline-banner { background: var(--warn-soft); color: var(--warn); padding: 10px 16px; font-size: 15px; text-align: center; }
main { margin: 0 auto; }
.bottomnav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 30;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.navlink { display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; position: relative; }
.navlink[aria-current="page"]::before { content: ""; position: absolute; top: 0; width: 34px; height: 4px; border-radius: 0 0 4px 4px; }
.navlink .badge { position: absolute; top: 8px; right: calc(50% - 22px); }
.bottomnav .rail-brand, .bottomnav .rail-extra { display: none; }
@media (min-width: 900px) {
  .shell { padding-bottom: 0; }
  .topbar { display: none; }
  .bottomnav { inset: 0 auto 0 0; width: var(--rail-w); grid-template-columns: 1fr; align-content: start; border-top: 0; gap: 4px; }
  .bottomnav .rail-brand { display: flex; margin: 0 8px 24px; }
  .navlink { flex-direction: row; justify-content: flex-start; }
  .navlink[aria-current="page"]::before { top: 13px; left: 0; width: 4px; height: 28px; border-radius: 0 4px 4px 0; }
  .navlink .badge { position: static; margin-left: auto; }
  .bottomnav .rail-extra { display: flex; }
}
.rail-extra { margin-top: 18px; border-top: 1px solid var(--mist); padding-top: 14px; flex-direction: column; }
/* ---------- componentes ---------- */
.card { background: var(--surface); }
.card.flat { box-shadow: none; border: 1px solid var(--mist); }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; border: 0; text-decoration: none; white-space: nowrap; }
.btn:active { transform: scale(.98); }
.btn svg { flex: none; }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-block { width: 100%; }
.btn[disabled] { cursor: not-allowed; transform: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; }
.chips { display: flex; flex-wrap: wrap; }
.badge { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; font-size: 12.5px; font-weight: 700; display: inline-grid; place-items: center; }
.tag { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); color: var(--ink-2); }
.tag.good { background: var(--good-soft); color: var(--good); }
.tag.bad { background: var(--bad-soft); color: var(--bad); }
.field { display: grid; gap: 6px; }
.field label, .label { font-weight: 700; }
.input, .select, .textarea { width: 100%; color: var(--ink); }
.textarea { min-height: 90px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; }
.help { color: var(--ink-3); }
.form-error { background: var(--bad-soft); color: var(--bad); border-radius: var(--r-md); padding: 10px 14px; font-size: 15px; }
.progress { overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--yellow); border-radius: 6px; transition: width .5s ease; }
.progress.canal > i { background: var(--canal); }
.toasts {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 60;
  display: grid;
  gap: 8px;
  width: min(92vw, 440px);
}
.toast { padding: 12px 16px; box-shadow: var(--shadow-lift); font-size: 15px; animation: toastIn .25s ease; }
.toast.bad { background: var(--bad); color: #fff; }
@media (min-width: 900px) {
  .toasts { bottom: 24px; left: calc(50% + var(--rail-w) / 2); }
}
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
.empty { text-align: center; padding: 36px 20px; display: grid; gap: 12px; justify-items: center; }
.empty .empty-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; color: var(--canal); }
.empty .empty-icon svg { width: 30px; height: 30px; }
.skeleton {
  background: linear-gradient(90deg, var(--surface-2), var(--mist), var(--surface-2));
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
  border-radius: var(--r-lg);
  min-height: 90px;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.error-state { border: 1.5px dashed var(--bad); }
/* ---------- autenticación / bienvenida ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
.auth-hero { color: #F2F5FA; position: relative; overflow: hidden; }
.auth-hero h1 { font-size: clamp(34px, 8vw, 58px); max-width: 12ch; }
.auth-hero p { max-width: 38ch; margin-top: 14px; }
.auth-hero .brand { color: #F2F5FA; }
.auth-line { display: block; width: 100%; max-width: 420px; margin-top: 32px; overflow: visible; }
.auth-form { max-width: 460px; width: 100%; margin: 0 auto; }
@media (min-width: 900px) {
  .auth { grid-template-columns: 1.1fr 1fr; }
  .auth-hero { padding: 64px; display: flex; flex-direction: column; justify-content: center; }
  .auth-form { align-self: center; padding: 48px; }
  .auth-line { margin-top: 56px; }
}
.segmented { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-2); padding: 4px; }
.segmented button { min-height: 44px; border: 0; background: transparent; color: var(--ink-3); }
.segmented button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
/* ---------- inicio ---------- */
.hello p { color: var(--ink-3); }
/* línea de tren: el plan de la sesión */
.route { position: relative; display: grid; }
.route::before { content: ""; position: absolute; top: 10px; bottom: 10px; border-radius: 2px; }
.stop { position: relative; display: grid; gap: 2px; }
.stop::before { content: ""; position: absolute; border-radius: 50%; background: var(--surface); border: 4px solid var(--ink); }
.stop.done::before { background: var(--yellow); }
.stop.now::before { background: var(--yellow); box-shadow: 0 0 0 5px color-mix(in srgb, var(--yellow) 35%, transparent); }
.stop .s-title { font-weight: 700; }
.stop .s-meta { color: var(--ink-3); }
.goal { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.ring circle { fill: none; stroke-width: 9; }
.ring .bg { stroke: var(--surface-2); }
.ring .fg { stroke-linecap: round; transition: stroke-dashoffset .8s ease; }
.ring text { font-family: var(--font-display); font-weight: 800; fill: var(--ink); }
/* ---------- lecciones ---------- */
.level-group h2 { display: flex; align-items: center; gap: 10px; }
.lesson-list { display: grid; }
@media (min-width: 700px) {
  .lesson-list { grid-template-columns: 1fr 1fr; }
}
.lesson-item {
  display: grid;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1.5px solid var(--mist);
  text-decoration: none;
  color: var(--ink);
}
.lesson-item:hover { border-color: var(--ink-3); }
.lesson-item .l-dot {
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--ink-2);
  font-family: var(--font-display);
  font-weight: 800;
}
.lesson-item .l-title { font-weight: 700; }
.lesson-item .l-meta { color: var(--ink-3); }
.lesson-head { display: grid; }
.vocab-item { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.vocab-item .ex { color: var(--ink-3); font-style: italic; }
.play { color: var(--canal); display: grid; place-items: center; }
.play.slow { color: var(--ink-2); }
.grammar ul { margin: 10px 0 0; padding-left: 20px; }
.exercise { display: grid; align-content: start; }
.ex-top { display: grid; gap: 10px; }
.ex-prompt { font-family: var(--font-display); }
.options { display: grid; gap: 10px; }
.option { text-align: left; background: var(--surface); display: flex; align-items: center; gap: 12px; }
.option .key { border-radius: 8px; display: grid; place-items: center; font-size: 14px; color: var(--ink-3); flex: none; }
.word-bank { display: flex; flex-wrap: wrap; gap: 8px; }
.word { padding: 0 16px; background: var(--surface); }
.word.used { opacity: .25; }
.answer-line { min-height: 62px; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0; align-items: center; }
.feedback { padding: 16px; display: grid; gap: 8px; animation: toastIn .2s ease; }
.feedback.bad { background: var(--bad-soft); }
.feedback.bad .f-title { color: var(--bad); }
.diff .miss { text-decoration: underline wavy; text-underline-offset: 4px; }
.big-listen { border-radius: 50%; display: grid; place-items: center; margin: 8px auto; }
.lesson-bar { position: sticky; top: 0; z-index: 15; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.footer-actions { position: sticky; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding: 12px 0; display: flex; gap: 10px; }
@media (min-width: 900px) {
  .footer-actions { bottom: 0; }
}
.footer-actions .btn { flex: 1; }
/* ---------- hablar ---------- */
.scenario {
  display: grid;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: var(--r-lg);
  border: 1.5px solid var(--mist);
  background: var(--surface);
  text-align: left;
  color: var(--ink);
}
.scenario:hover { border-color: var(--ink-3); }
.scenario .sc-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--canal-soft); color: var(--canal); display: grid; place-items: center; }
.scenario .sc-icon svg { width: 24px; height: 24px; }
.free-talk { display: grid; }
:root[data-theme="dark"] .free-talk, .free-talk.dark { background: var(--surface-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .free-talk { background: var(--surface-2); }
}
.talk { display: grid; grid-template-rows: auto 1fr auto; min-height: calc(100vh - 140px); }
@media (min-width: 900px) {
  .talk { min-height: calc(100vh - 60px); }
}
.talk-head { grid-template-columns: auto 1fr auto; padding-bottom: 10px; border-bottom: 1px solid var(--mist); }
.talk-log { padding: 16px 0 24px; display: grid; gap: 14px; align-content: start; }
.bubble { max-width: 88%; display: grid; gap: 8px; animation: toastIn .25s ease; }
.bubble.teacher { border-bottom-left-radius: 6px; }
.bubble.student { justify-self: end; border-bottom-right-radius: 6px; }
.bubble .b-tools { display: flex; gap: 6px; }
.bubble .b-tools .play { width: 38px; height: 38px; box-shadow: none; background: var(--surface-2); }
.note-es { font-size: 15px; color: var(--ink-3); border-left: 3px solid var(--yellow); padding-left: 10px; }
.correction { display: grid; gap: 8px; max-width: 92%; }
.correction .c-orig { text-decoration: line-through; text-decoration-color: var(--bad); color: var(--ink-2); }
.correction .c-fix { font-family: var(--font-display); font-weight: 700; }
.correction .c-why { font-size: 15.5px; }
.hint-card { padding: 12px 16px; display: grid; gap: 4px; }
.talk-dock { position: sticky; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); display: grid; }
@media (min-width: 900px) {
  .talk-dock { bottom: 0; }
}
.dock-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.dock-row .left { justify-self: start; }
.dock-row .right { justify-self: end; }
.mic { border-radius: 50%; display: grid; place-items: center; position: relative; transition: transform .15s ease; }
.mic:active { transform: scale(.96); }
.mic.listening { color: #fff; }
.mic.listening::before, .mic.listening::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 3px solid var(--bad);
  animation: ring 1.4s ease-out infinite;
}
.mic.listening::after { animation-delay: .7s; }
.mic[disabled] { background: var(--surface-2); color: var(--ink-3); box-shadow: none; }
@keyframes ring { from { transform: scale(.9); opacity: .8; } to { transform: scale(1.45); opacity: 0; } }
.mic-state { text-align: center; font-weight: 700; font-size: 15px; color: var(--ink-3); min-height: 22px; }
.mic-state.live { color: var(--bad); }
.interim { text-align: center; font-style: italic; color: var(--ink-2); min-height: 24px; }
.type-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.turns { font-size: 14px; color: var(--ink-3); font-weight: 700; }
/* ---------- repaso ---------- */
.flash { display: grid; align-content: center; justify-items: center; gap: 14px; text-align: center; }
.flash .f-q { font-size: 15px; color: var(--ink-3); }
.flash .f-main { font-family: var(--font-display); font-weight: 700; max-width: 22ch; }
.grades { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 600px) {
  .grades { grid-template-columns: repeat(4, 1fr); }
}
.grade { padding: 8px; display: grid; gap: 2px; place-content: center; }
.grade small { font-weight: 400; font-size: 12.5px; opacity: .8; }
/* ---------- progreso ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
}
.stat { background: var(--surface); display: grid; gap: 2px; }
.stat .v { font-family: var(--font-display); line-height: 1.1; }
.stat .k { color: var(--ink-3); }
.dash { display: grid; }
@media (min-width: 900px) {
  .dash { grid-template-columns: 1fr 1fr; }
  .dash .span2 { grid-column: span 2; }
}
.skill { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.skill .progress { grid-column: span 2; }
.cal { display: grid; grid-template-columns: repeat(14, 1fr); gap: 5px; }
.cal i { aspect-ratio: 1; border-radius: 5px; background: var(--surface-2); }
.cal i.today { outline: 2px solid var(--ink); outline-offset: 1px; }
.bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; height: 120px; }
.bars .b { display: grid; gap: 4px; align-content: end; height: 100%; text-align: center; font-size: 12px; color: var(--ink-3); }
.bars .b i { display: block; border-radius: 6px 6px 2px 2px; min-height: 3px; }
.list { display: grid; }
.list-item { display: grid; grid-template-columns: 1fr auto; gap: 10px; border-bottom: 1px solid var(--mist); align-items: center; }
.list-item:last-child { border-bottom: 0; }
/* ---------- diálogos ---------- */
dialog {
  border: 0;
  border-radius: var(--r-xl);
  padding: 24px;
  background: var(--surface);
  color: var(--ink);
  width: min(92vw, 480px);
  box-shadow: var(--shadow-lift);
}
/* ---------- onboarding ---------- */
.onb { max-width: 620px; margin: 0 auto; padding: calc(24px + env(safe-area-inset-top)) 18px 40px; min-height: 100vh; display: grid; align-content: start; }
.onb-steps { display: flex; gap: 6px; }
.onb-steps i { flex: 1; height: 5px; border-radius: 3px; background: var(--mist); }
.choice-card { display: grid; gap: 6px; background: var(--surface); text-align: left; }
.choice-card:hover { border-color: var(--ink-3); }
.choice-card .t { font-family: var(--font-display); font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
svg.inline { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; }
h2 svg.inline { width: 20px; height: 20px; }
.lesson-bar .tag { justify-self: start; }
/* rutas y trabajo */
.track-chips { flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 10px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: thin; }
.track-chips .chip { flex: none; }
@media (min-width: 900px) {
  .track-chips { flex-wrap: wrap; overflow: visible; margin: 0; padding-left: 0; padding-right: 0; }
}
.track-head { display: grid; align-items: center; }
.sc-icon { display: grid; place-items: center; flex: none; }
.chip svg.inline { width: 16px; height: 16px; vertical-align: -3px; }
/* actualizaciones */
.update-banner { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; margin-bottom: 14px; }
.update-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
}
.voice-list { display: grid; gap: 6px; }
.voice-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 8px 10px; }
.voice-row .play { width: 36px; height: 36px; box-shadow: none; background: var(--surface-2); }
@media (max-width: 420px) {
  .voice-row { grid-template-columns: auto 1fr auto; }
  .voice-row > .tag:first-of-type { display: none; }
}
/* =====================================================================
   v1.4 — diseño más compacto y elegante
   Bordes finos en vez de sombras pesadas, escala tipográfica más contenida,
   el amarillo solo como acento y la acción principal en azul marino.
   ===================================================================== */
:root { --navy: #13294B; --navy-2: #1D3A66; --nav-h: 60px; }
body { font-size: 16px; line-height: 1.5; }
h1 { letter-spacing: -.02em; }
h2 { font-size: 18px; letter-spacing: -.01em; }
h3 { font-size: 16px; }
.small { font-size: 14px; }
main { max-width: 720px; padding: 4px 16px 32px; }
main.wide { max-width: 980px; }
.topbar { padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: 6px; }
.brand { font-size: 18px; gap: 8px; }
.icon-btn { width: 40px; height: 40px; }
.icon-btn svg { width: 20px; height: 20px; }
.navlink { font-size: 11.5px; gap: 2px; }
.navlink svg { width: 22px; height: 22px; }
.bottomnav { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
@media (min-width: 900px) {
  :root { --rail-w: 216px; }
  .bottomnav { grid-auto-rows: 46px; padding: 22px 12px; }
  .navlink { font-size: 15px; gap: 12px; padding: 0 12px; }
}
.card { padding: 16px; }
.card.flat { border-color: var(--line); }
.section-title { margin: 22px 0 10px; }
.section-title h2 { font-size: 16px; }
.hello { margin: 8px 0 16px; }
.hello p { margin-top: 4px; font-size: 15px; }
.btn { padding: 0 18px; font-size: 15.5px; gap: 8px; }
.btn svg { width: 18px; height: 18px; }
.btn-sm { padding: 0 12px; }
.chip { padding: 0 13px; font-size: 14px; border-width: 1px; border-color: var(--line); }
.chips { gap: 6px; }
.tag { font-size: 12px; padding: 2px 8px; }
.input, .select, .textarea { min-height: 46px; border-width: 1px; border-color: var(--line); padding: 10px 12px; }
.field label, .label { font-size: 14px; }
.help { font-size: 13px; }
/* Inicio compacto */
.hello-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ring { width: 60px; height: 60px; }
.ring text { font-size: 17px; }
.route { gap: 12px; padding-left: 28px; margin-top: 10px; }
.route::before { left: 8px; width: 3px; }
.stop::before { left: -26px; width: 15px; height: 15px; border-width: 3px; top: 4px; }
.stop .s-title { font-size: 15px; }
.stop .s-meta { font-size: 13px; }
.sc-icon { width: 40px; height: 40px; border-radius: 12px; }
.track-head { grid-template-columns: 40px 1fr; gap: 12px; }
/* Listas, lecciones y situaciones */
.lesson-list { gap: 8px; margin-top: 10px; }
.lesson-item, .scenario { padding: 12px; gap: 12px; border-width: 1px; border-color: var(--line); background: var(--surface); }
.lesson-item { grid-template-columns: 34px 1fr; }
.scenario { grid-template-columns: 40px 1fr; }
.lesson-item .l-dot { width: 34px; height: 34px; font-size: 14px; }
.lesson-item .l-title { font-size: 15px; }
.lesson-item .l-meta { font-size: 12.5px; }
.level-group { margin-top: 20px; }
.free-talk { padding: 18px; gap: 8px; }
/* Lección y ejercicios */
.lesson-head { gap: 6px; margin: 2px 0 12px; }
.vocab { gap: 6px; }
.play { width: 38px; height: 38px; box-shadow: none; }
.play svg { width: 18px; height: 18px; }
.exercise { min-height: 320px; gap: 14px; }
.ex-prompt { font-size: 20px; }
.option { min-height: 50px; padding: 10px 14px; font-size: 16px; border-width: 1px; border-color: var(--line); }
.option .key { width: 26px; height: 26px; }
.word { min-height: 42px; font-size: 16px; border-width: 1px; border-color: var(--line); }
.big-listen { width: 80px; height: 80px; }
.big-listen svg { width: 32px; height: 32px; }
/* Conversación */
.bubble { padding: 12px 14px; border-radius: 18px; }
.bubble.teacher { box-shadow: none; }
.bubble.teacher .en { font-size: 18px; }
.correction { padding: 12px 14px; }
.correction .c-fix { font-size: 17px; }
.mic { width: 76px; height: 76px; }
.mic svg { width: 30px; height: 30px; }
.talk-dock { gap: 8px; }
/* Repaso y progreso */
.flash { min-height: 240px; padding: 22px 18px; }
.flash .f-main { font-size: 23px; }
.flash .f-answer { font-size: 24px; }
.grade { min-height: 56px; font-size: 14px; }
.stats { gap: 8px; }
.stat { padding: 12px 14px; }
.stat .v { font-size: 24px; }
.stat .k { font-size: 12.5px; }
.dash { gap: 10px; }
.list-item { padding: 11px 0; border-bottom-color: var(--line); }
/* Bienvenida y entrada */
.onb { gap: 18px; }
.choice-card { padding: 14px 16px; border-width: 1px; border-color: var(--line); }
.choice-card .t { font-size: 17px; }
.auth-hero { padding: calc(28px + env(safe-area-inset-top)) 22px 28px; }
.auth-hero .brand { margin-bottom: 24px; }
.auth-form { padding: 22px 20px 40px; }
[hidden] { display: none !important; }
@media (max-width: 899px) {
  .lesson-bar { top: 52px; }
}
.lesson-bar { padding: 8px 0; }
.rail-extra { gap: 2px; }
.rail-extra .navlink { min-height: 46px; }
.brand { white-space: nowrap; }
.rail-update { display: none; }
@media (min-width: 900px) {
  .rail-update { display: inline-flex; margin: 0 8px 12px; }
}
/* Hueco para escribir dentro de la frase */
.blank-input {
  font: inherit;
  color: var(--ink);
  border: 0;
  border-bottom: 3px solid var(--yellow);
  padding: 0 6px;
  margin: 0 2px;
  min-width: 4ch;
  text-align: center;
  outline: none;
}
.blank-input:disabled { opacity: 1; }
main:focus { outline: none; }
/* =====================================================================
   v1.6 — Estilo «Alegre»
   Blanco luminoso, turquesa como color de acción, coral para hablar,
   sol para repasar y pistas. Botones y tarjetas con relieve (sombra inferior),
   esquinas muy redondeadas y tipografía Nunito, redonda y muy legible.
   ===================================================================== */
:root {
  --ink: #1F2A44;
  --paper: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F2F4F8;
  --mist: #E6EAF2;
  --line: #EEF1F6;
  --accent: #12B5A6;
  --accent-deep: #0B8C80;
  --accent-soft: #D7F4F1;
  --coral: #FF7A59;
  --coral-deep: #D85A3B;
  --coral-soft: #FFE7DF;
  --sun: #FFC83D;
  --sun-deep: #D9A21F;
  --sun-soft: #FFF4D1;
  --yellow: #FFC83D;
  --yellow-deep: #D9A21F;
  --on-yellow: #1F2A44;
  --canal: #0B8C80;
  --canal-soft: #D7F4F1;
  --good: #0B8C80;
  --good-soft: #D7F4F1;
  --warn: #8A5A00;
  --warn-soft: #FFF4D1;
  --bad: #D2453B;
  --bad-soft: #FFE4E1;
  --focus: #12B5A6;
  --font-body: Nunito, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: Nunito, system-ui, sans-serif;
  --r-xl: 22px;
  --r-lg: 18px;
  --r-md: 14px;
  --shadow: none;
  --shadow-lift: 0 10px 30px -14px rgba(31, 42, 68, .35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #F1F4FA;
    --paper: #111827;
    --surface: #1A2233;
    --surface-2: #232D42;
    --mist: #2E3950;
    --line: #2A3448;
    --accent-soft: #123C3A;
    --coral-soft: #3D2421;
    --sun-soft: #3A3018;
    --canal-soft: #123C3A;
    --good-soft: #123C3A;
    --warn: #FFD27A;
    --warn-soft: #3A3018;
    --bad: #FF8E84;
    --bad-soft: #3D2421;
    --press: 0 4px 0 #0B111D;
  }
}
:root[data-theme="dark"] {
  --ink: #F1F4FA;
  --paper: #111827;
  --surface: #1A2233;
  --surface-2: #232D42;
  --mist: #2E3950;
  --line: #2A3448;
  --accent-soft: #123C3A;
  --coral-soft: #3D2421;
  --sun-soft: #3A3018;
  --canal-soft: #123C3A;
  --good-soft: #123C3A;
  --warn: #FFD27A;
  --warn-soft: #3A3018;
  --bad: #FF8E84;
  --bad-soft: #3D2421;
  --press: 0 4px 0 #0B111D;
}
body { font-weight: 600; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 900; letter-spacing: -.01em; }
h1 { font-size: clamp(25px, 5.6vw, 32px); }
.en { font-family: var(--font-display); font-weight: 800; }
strong, b { font-weight: 800; }
/* Marca y navegación */
.brand-mark { color: #FFFFFF; }
.bottomnav { border-top: 2px solid var(--line); background: var(--surface); }
.navlink { font-weight: 800; color: var(--ink-3); }
.navlink[aria-current="page"] { color: var(--accent-deep); }
.navlink[aria-current="page"]::before { background: var(--accent); }
@media (min-width: 900px) {
  .bottomnav { border-right: 2px solid var(--line); }
  .navlink:hover { background: var(--surface-2); }
}
/* Botones con relieve */
.btn { font-weight: 800; min-height: 48px; }
.btn:active:not([disabled]) { box-shadow: none !important; }
.btn-soft { background: var(--surface-2); color: var(--ink); box-shadow: var(--press); }
.btn-ink { color: var(--paper); }
.btn-ghost { color: var(--accent-deep); }
.btn-danger { background: var(--bad-soft); box-shadow: 0 4px 0 color-mix(in srgb, var(--bad) 30%, transparent); }
.btn-sm { min-height: 38px; font-size: 14px; }
.btn[disabled] { opacity: .45; box-shadow: none; }
.footer-actions .btn { min-height: 52px; font-size: 17px; }
.chip { border-radius: 999px; font-weight: 800; min-height: 38px; color: var(--ink-2); }
.tag { font-weight: 800; border-radius: 999px; }
.tag.canal { background: var(--accent-soft); color: var(--accent-deep); }
.tag.warn { background: var(--coral-soft); color: var(--coral-deep); }
.badge { background: var(--coral); color: #FFFFFF; }
/* Tarjetas */
.card { border: 2px solid var(--line); box-shadow: var(--press); }
.card.tint { border-color: transparent; box-shadow: none; }
.input, .select, .textarea { font-weight: 700; }
.input:focus, .select:focus, .textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.progress { height: 10px; border-radius: 6px; }
.progress > i, .progress.canal > i { background: var(--accent); }
/* Inicio */
.ring .fg { stroke: var(--accent); }
.route::before { background: var(--accent); }
.stop::before { border-color: var(--accent); }
.stop.now::before, .stop.done::before { background: var(--sun); border-color: var(--sun-deep); }
.update-banner { border: 2px solid var(--sun); box-shadow: 0 4px 0 color-mix(in srgb, var(--sun) 55%, transparent); }
/* Camino de lecciones */
.path { display: flex; align-items: flex-start; gap: 0; padding: 4px 2px 0; }
.path-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 76px;
  text-decoration: none;
  color: var(--ink-3);
  font-size: 11.5px;
  font-weight: 800;
  text-align: center;
  line-height: 1.2;
}
.path-dot { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 18px; }
.path-node.now { color: var(--ink); }
.path-node.now .path-dot { width: 60px; height: 60px; }
.path-line { flex: 1; height: 4px; border-radius: 2px; background: var(--mist); margin-top: 26px; min-width: 8px; }
.path-line.done { background: var(--accent); }
/* Lecciones y situaciones */
.lesson-item, .scenario { border: 2px solid var(--line); box-shadow: var(--press); border-radius: var(--r-lg); }
.lesson-item:hover, .scenario:hover { border-color: var(--mist); }
.lesson-item.done .l-dot { background: var(--accent); color: #FFFFFF; }
.lesson-item.next .l-dot { background: var(--sun); color: #1F2A44; }
.scenario.suggested { border-color: var(--sun); }
.free-talk { color: #FFFFFF; }
.free-talk p { color: rgba(255,255,255,.9); }
.free-talk .btn-primary { background: #FFFFFF; color: var(--coral-deep); box-shadow: 0 4px 0 rgba(0,0,0,.12); }
.ex-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.grammar { border-left: 0; }
.grammar ul { list-style: none; padding: 0; display: grid; gap: 6px; }
/* Ejercicios */
.ex-prompt { font-weight: 900; }
.option { border: 2px solid var(--line); box-shadow: var(--press); border-radius: 16px; font-weight: 800; }
.option:hover:not([disabled]) { border-color: var(--accent); }
.option .key { border: 2px solid var(--line); background: var(--surface); font-weight: 900; }
.option.correct { border-color: var(--accent); color: var(--accent-deep); box-shadow: 0 4px 0 var(--accent); }
.option.wrong { border-color: var(--bad); color: var(--bad); box-shadow: 0 4px 0 color-mix(in srgb, var(--bad) 45%, transparent); }
.word { border: 2px solid var(--line); box-shadow: var(--press); border-radius: 14px; font-weight: 800; }
.answer-line { border-bottom: 3px dashed var(--mist); }
.feedback { border-radius: var(--r-lg); }
.feedback.good { background: var(--accent-soft); }
.feedback.good .f-title { color: var(--accent-deep); }
.feedback .f-title { font-weight: 900; font-size: 19px; }
.big-listen { background: var(--accent); color: #FFFFFF; }
.blank-input { border-bottom-color: var(--accent); background: var(--accent-soft); }
.blank-input:focus {
  background: color-mix(in srgb, var(--accent) 22%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
.lesson-bar .progress > i { background: var(--accent); }
.match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.match-col { display: grid; gap: 10px; align-content: start; }
.match-btn {
  min-height: 54px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: var(--surface);
  box-shadow: var(--press);
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
}
.match-btn.en { font-weight: 900; }
.match-btn.sel { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 4px 0 var(--accent); }
.match-btn.done { opacity: .35; box-shadow: none; border-color: var(--accent); background: var(--accent-soft); }
.match-btn.wrong { border-color: var(--bad); background: var(--bad-soft); animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
/* Escuchar + practicar junto a cada frase */
.say-tools { display: inline-flex; gap: 6px; vertical-align: middle; flex: none; }
.say-btn, .pron-btn { width: 40px; height: 40px; border: 0; display: inline-grid; place-items: center; }
.say-btn { color: var(--accent-deep); }
.pron-btn { color: var(--coral-deep); }
.say-btn svg, .pron-btn svg { width: 19px; height: 19px; }
.say-tools.sm .say-btn, .say-tools.sm .pron-btn { width: 32px; height: 32px; border-radius: 10px; }
.say-tools.sm svg { width: 15px; height: 15px; }
.say-btn:active, .pron-btn:active { transform: translateY(2px); box-shadow: none; }
/* Panel de pronunciación */
dialog.sheet { width: min(96vw, 460px); border-radius: 26px; padding: 18px 18px 16px; display: grid; gap: 14px; }
dialog.sheet[open] { animation: toastIn .2s ease; }
@media (max-width: 600px) {
  dialog.sheet { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: 26px 26px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-head h2 { font-size: 18px; }
.pron-target { text-align: center; background: var(--surface-2); border-radius: 18px; padding: 16px; }
.pron-target .en { font-size: 24px; line-height: 1.3; }
.pron-mic { display: grid; justify-items: center; gap: 4px; }
.pron-result { text-align: center; display: grid; gap: 6px; justify-items: center; padding: 6px 0; }
.pron-score { font-weight: 900; line-height: 1; }
.stars { display: inline-flex; gap: 4px; }
.stars svg { width: 34px; height: 34px; fill: var(--mist); }
.stars svg.on { fill: var(--sun); filter: drop-shadow(0 2px 0 var(--sun-deep)); }
.self-rate { display: grid; gap: 8px; }
.self-rate .row { gap: 8px; }
.rate { flex: 1; min-height: 46px; }
.rate.r0 { background: var(--accent-soft); color: var(--accent-deep); box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 40%, transparent); }
.rate.r1 { background: var(--sun-soft); color: #7A5600; box-shadow: 0 3px 0 color-mix(in srgb, var(--sun) 60%, transparent); }
.rate.r2 { background: var(--coral-soft); color: var(--coral-deep); box-shadow: 0 3px 0 color-mix(in srgb, var(--coral) 40%, transparent); }
/* Conversación */
.bubble.teacher { background: var(--surface-2); border: 0; border-radius: 22px 22px 22px 8px; }
.bubble.student { background: var(--accent); color: #FFFFFF; border-radius: 22px 22px 8px 22px; font-weight: 800; }
.correction { border-radius: 20px; box-shadow: 0 4px 0 color-mix(in srgb, var(--sun) 55%, transparent); }
.correction.recognition { background: var(--accent-soft); box-shadow: none; }
.hint-card { background: var(--sun-soft); border-radius: 16px; }
.note-es { border-left-color: var(--sun); }
.mic { background: var(--coral); color: #FFFFFF; }
.mic.listening { background: var(--bad); }
.mic.listening::before, .mic.listening::after { border-color: var(--coral); }
/* Repaso y progreso */
.grade { font-weight: 900; }
.grade.g0 { background: var(--bad-soft); color: var(--bad); }
.grade.g1 { background: var(--sun-soft); color: #7A5600; }
.grade.g2 { background: var(--accent-soft); color: var(--accent-deep); }
.grade.g3 { background: var(--accent); color: #FFFFFF; }
.stat { border: 2px solid var(--line); box-shadow: var(--press); border-radius: 18px; }
.stat .v { font-weight: 900; }
.cal i.l1 { background: color-mix(in srgb, var(--accent) 35%, var(--surface-2)); }
.cal i.l2 { background: color-mix(in srgb, var(--accent) 65%, var(--surface-2)); }
.cal i.l3 { background: var(--accent); }
.bars .b i { background: var(--accent); }
.bars .b.now i { background: var(--coral); }
/* Entrada y bienvenida */
:root[data-theme="dark"] .auth-hero { background: #0B5E57; }
.auth-hero h1 { color: #FFFFFF; }
.auth-hero p { color: rgba(255,255,255,.9); }
.auth-hero .brand-mark { background: #FFFFFF; color: var(--accent-deep); }
.segmented { border-radius: 16px; }
.segmented button { font-weight: 800; border-radius: 12px; }
.choice-card { border: 2px solid var(--line); box-shadow: var(--press); border-radius: 18px; }
.choice-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 4px 0 var(--accent-deep); }
.onb-steps i.on { background: var(--accent); }
.voice-row { border: 2px solid var(--line); border-radius: 14px; }
.voice-row.on { border-color: var(--accent); background: var(--accent-soft); }
/* Logo «ondas de voz» */
.brand-mark { background: none !important; display: block; }
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand { letter-spacing: -.02em; }
.auth-hero .brand-accent { color: #FFFFFF; opacity: .85; }
/* =====================================================================
   v1.7 — Iconos duotono suave: fondo pastel + símbolo relleno en dos tonos
   ===================================================================== */
svg.ico .f { fill: currentColor; fill-opacity: .22; }
.sc-icon, .empty-icon { border-radius: 16px; }
.sc-icon { background: var(--ic-bg, #DDF6F3); color: var(--ic, #0B8C80); }
.navlink svg.ico .f { fill-opacity: .12; }
.navlink[aria-current="page"] svg.ico .f { fill-opacity: .35; }
.say-btn svg.ico .f, .pron-btn svg.ico .f { fill-opacity: .3; }
.btn svg.ico .f { fill-opacity: .25; }
.btn-primary svg.ico .f, .mic svg.ico .f, .big-listen svg.ico .f { fill-opacity: .35; }
.path-node.done .path-dot svg.ico .f { fill-opacity: 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sc-icon {
    background: color-mix(in srgb, var(--ic, #0B8C80) 22%, var(--surface));
    color: color-mix(in srgb, var(--ic, #0B8C80) 60%, #FFFFFF);
  }
}
:root[data-theme="dark"] .sc-icon {
  background: color-mix(in srgb, var(--ic, #0B8C80) 22%, var(--surface));
  color: color-mix(in srgb, var(--ic, #0B8C80) 60%, #FFFFFF);
}
/* =====================================================================
   v1.8 — Botones y ventanas «Cristal»
   Fondo con manchas de color suaves; tarjetas y paneles translúcidos con
   desenfoque, borde blanco fino y brillo superior; botones en píldora;
   navegación flotante. Sin sombras «de bloque».
   ===================================================================== */
:root {
  --glass: rgba(255, 255, 255, .58);
  --glass-strong: rgba(255, 255, 255, .78);
  --glass-border: rgba(255, 255, 255, .85);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .9);
  --glass-shadow: 0 1px 2px rgba(31, 42, 68, .04), 0 14px 32px -20px rgba(31, 42, 68, .35);
  --press: none;
  --blob1: #A6F0E6;
  --blob2: #FFCDBD;
  --blob3: #FFE8A8;
  --blob4: #CFD8FF;
  --glass-bg: #EEF4F8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass: rgba(30, 40, 60, .55);
    --glass-strong: rgba(30, 40, 60, .82);
    --glass-border: rgba(255, 255, 255, .12);
    --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .08);
    --glass-shadow: 0 14px 32px -20px rgba(0, 0, 0, .7);
    --blob1: #0F4E48;
    --blob2: #4A2A24;
    --blob3: #4A3D17;
    --blob4: #26305E;
    --glass-bg: #0E1626;
  }
}
:root[data-theme="dark"] {
  --glass: rgba(30, 40, 60, .55);
  --glass-strong: rgba(30, 40, 60, .82);
  --glass-border: rgba(255, 255, 255, .12);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .08);
  --glass-shadow: 0 14px 32px -20px rgba(0, 0, 0, .7);
  --blob1: #0F4E48;
  --blob2: #4A2A24;
  --blob3: #4A3D17;
  --blob4: #26305E;
  --glass-bg: #0E1626;
}
/* Superficies de cristal */
.card, .lesson-item, .scenario, .vocab-item, .option, .word, .match-btn, .stat, .choice-card, .voice-row, .flash, .correction, .hint-card, .bubble.teacher, .segmented, .grammar, .update-banner, .pron-target {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: var(--glass-hi), var(--glass-shadow);
}
.lesson-item, .scenario, .vocab-item, .stat, .choice-card { border-radius: 22px; }
.option, .word, .match-btn { border-radius: 18px; }
.flash { border-radius: 28px; }
/* Tarjetas con tinte de color */
.correction { background: color-mix(in srgb, #FFF1C4 72%, transparent); }
.grammar { background: color-mix(in srgb, #FFF1C4 65%, transparent); }
.update-banner { background: color-mix(in srgb, #FFF1C4 75%, transparent); border-color: var(--glass-border); }
/* Acción principal y bloques de color: color sólido con brillo de cristal */
.free-talk {
  background: linear-gradient(135deg, rgba(255, 154, 107, .95), rgba(240, 83, 63, .95));
  border: 1px solid rgba(255, 255, 255, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 18px 34px -18px #E2553F;
  border-radius: 28px;
}
.auth-hero { background: linear-gradient(150deg, #22D3BF 0%, #0B8C80 70%); }
/* Botones en píldora */
.btn { border-radius: 999px; transition: background .15s, box-shadow .15s, transform .1s; }
.btn:active:not([disabled]) { transform: scale(.97); }
.btn-primary { color: #FFFFFF; }
.btn-danger { color: var(--bad); }
.btn-sm { border-radius: 999px; }
.chip[aria-pressed="true"], .chip.on { border-color: rgba(255, 255, 255, .25); }
.input, .select, .textarea { border-radius: 16px; }
.blank-input { border-radius: 10px 10px 4px 4px; }
.say-btn, .pron-btn { border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 6px 14px -10px rgba(31, 42, 68, .5); }
.play { border-radius: 50%; background: var(--glass-strong); border: 1px solid var(--glass-border); }
.mic { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 14px 26px -12px #E2553F; border: 1px solid rgba(255, 255, 255, .45); }
.mic.listening { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 14px 26px -12px #9E2A22; }
.big-listen { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 14px 26px -12px #0B8C80; border: 1px solid rgba(255, 255, 255, .45); }
.grade { border-radius: 18px; box-shadow: var(--glass-hi), 0 6px 16px -12px rgba(31, 42, 68, .45); border: 1px solid var(--glass-border); }
.grade.g3 { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 20px -12px #0B8C80; }
.rate { border-radius: 999px; box-shadow: var(--glass-hi); border: 1px solid var(--glass-border); }
.option.correct, .option.wrong, .match-btn.sel, .match-btn.done { box-shadow: var(--glass-hi); }
.lesson-item.next { border-color: var(--sun); box-shadow: var(--glass-hi), 0 0 0 3px color-mix(in srgb, var(--sun) 45%, transparent), var(--glass-shadow); }
.bubble.student { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 18px -12px #0B8C80; }
.tag { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
/* Barras y paneles */
.lesson-bar { background: transparent; }
.lesson-bar > .progress { background: var(--glass-strong); }
.talk-dock { border-radius: 28px; padding: 12px 14px; margin-bottom: 8px; }
dialog::backdrop { background: rgba(31, 42, 68, .28); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.toast { border-radius: 18px; background: rgba(31, 42, 68, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
/* Navegación flotante en cápsula (móvil) */
@media (max-width: 899px) {
  :root { --nav-h: 64px; }
  .shell { padding-bottom: calc(var(--nav-h) + 28px + env(safe-area-inset-bottom)); }
  .bottomnav { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); height: var(--nav-h); padding-bottom: 0; }
  .navlink[aria-current="page"]::before { display: none; }
  .navlink[aria-current="page"] svg { box-sizing: border-box; }
  .toasts { bottom: calc(var(--nav-h) + 32px + env(safe-area-inset-bottom)); }
  .footer-actions, .talk-dock { bottom: calc(var(--nav-h) + 22px + env(safe-area-inset-bottom)); }
}
@media (min-width: 900px) {
  .bottomnav { top: 12px; bottom: 12px; left: 12px; height: auto; border-radius: 28px; }
  .shell { padding-left: calc(var(--rail-w) + 24px); }
  .navlink { border-radius: 999px; }
  .navlink[aria-current="page"]::before { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .card, .lesson-item, .scenario, .vocab-item, .option, .chip, .bottomnav, dialog {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--surface);
  }
}
.scenario .sc-icon, .track-head .sc-icon { width: 44px; height: 44px; border-radius: 14px; background: var(--ic-bg, #DDF6F3); color: var(--ic, #0B8C80); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .scenario .sc-icon, :root:not([data-theme="light"]) .track-head .sc-icon {
    background: color-mix(in srgb, var(--ic, #0B8C80) 22%, var(--surface));
    color: color-mix(in srgb, var(--ic, #0B8C80) 60%, #FFFFFF);
  }
}
:root[data-theme="dark"] .scenario .sc-icon, :root[data-theme="dark"] .track-head .sc-icon {
  background: color-mix(in srgb, var(--ic, #0B8C80) 22%, var(--surface));
  color: color-mix(in srgb, var(--ic, #0B8C80) 60%, #FFFFFF);
}
/* =====================================================================
   v1.9 — Fiel al diseño aprobado: fondo gris claro liso, tarjetas blancas
   con sombra suave, iconos de color en degradado, verde azulado como color
   principal. Sustituye las manchas de color y el cristal de la v1.8.
   ===================================================================== */
:root {
  --page: #F4F7FA;
  --card: #FFFFFF;
  --ink-1: #1F2A44;
  --ink-2: #5A6480;
  --ink-3: #6B7591;
  --teal: #0B8C80;
  --teal-l: #22D3BF;
  --soft-shadow: 0 1px 2px rgba(31, 42, 68, .05), 0 14px 28px -18px rgba(31, 42, 68, .35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #0F1626;
    --card: #182238;
    --ink-1: #EEF2F8;
    --ink-2: #A9B3C9;
    --ink-3: #8D97AE;
    --soft-shadow: 0 14px 28px -18px rgba(0, 0, 0, .7);
  }
}
:root[data-theme="dark"] {
  --page: #0F1626;
  --card: #182238;
  --ink-1: #EEF2F8;
  --ink-2: #A9B3C9;
  --ink-3: #8D97AE;
  --soft-shadow: 0 14px 28px -18px rgba(0, 0, 0, .7);
}
body { background: var(--page); background-attachment: scroll; color: var(--ink-1); font-family: "Nunito", system-ui, sans-serif; }
h1, h2, h3, .brand { font-family: "Nunito", system-ui, sans-serif; letter-spacing: -0.02em; }
h1 { font-weight: 900; }
h2 { font-weight: 900; }
.brand { font-weight: 900; }
/* Tarjetas: blancas, sólidas, sin desenfoque */
.card, .lesson-item, .scenario, .vocab-item, .option, .word, .match-btn, .stat, .choice-card, .voice-row, .flash, .hint-card, .bubble.teacher, .segmented, .pron-target, .tile2 {
  background: var(--card);
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--soft-shadow);
}
.card { border-radius: 24px; }
.card.tint { background: var(--card); }
.lesson-item:hover, .scenario:hover, .option:hover:not([disabled]), .choice-card:hover {
  background: var(--card);
  box-shadow: 0 1px 2px rgba(31, 42, 68, .06), 0 18px 32px -16px rgba(31, 42, 68, .4);
}
.correction, .grammar, .update-banner { background: #FFF6DC; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--soft-shadow); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .correction, :root:not([data-theme="light"]) .grammar, :root:not([data-theme="light"]) .update-banner { background: #2A2A22; }
}
:root[data-theme="dark"] .correction, :root[data-theme="dark"] .grammar, :root[data-theme="dark"] .update-banner { background: #2A2A22; }
/* Etiquetas: píldoras blancas */
.hello-row .tag { background: var(--card); box-shadow: 0 4px 12px -8px rgba(31, 42, 68, .4); border: 0; font-weight: 800; color: var(--teal); }
.hello-row .tag.warn { color: #D85A3B; }
.hello-row .tag:not(.canal):not(.warn):not(.good) { color: var(--ink-2); }
/* Tarjeta principal de la lección */
.hero {
  all: unset;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  cursor: pointer;
  border-radius: 28px;
  color: #FFFFFF;
  box-shadow: 0 18px 34px -18px var(--teal);
}
.hero:focus-visible { outline: 3px solid var(--teal-l); outline-offset: 3px; }
.hero-k { font-size: 13px; font-weight: 800; opacity: .92; }
.hero-t { font-weight: 900; line-height: 1.15; letter-spacing: -0.01em; }
.hero-bar { height: 8px; border-radius: 5px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.hero-bar i { display: block; height: 100%; border-radius: 5px; background: #FFFFFF; }
.hero-btn {
  align-self: flex-start;
  background: #FFFFFF;
  color: var(--teal);
  border-radius: 999px;
  font-weight: 900;
  box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .35);
  transition: transform .1s;
}
.hero:hover .hero-btn { transform: translateY(-1px); }
.hero:active .hero-btn { transform: scale(.97); }
/* Dos accesos: Hablar y Repasar */
.tiles2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.tile2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 24px;
  text-decoration: none;
  color: var(--ink-1);
  transition: transform .12s;
}
.tile2:hover { transform: translateY(-2px); }
.tile2 strong { font-size: 16px; font-weight: 900; }
.tile2 > span:last-child { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.t-ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: #FFFFFF; margin-bottom: 2px; }
.t-ic svg { width: 24px; height: 24px; }
.t-ic svg.ico .f { fill: #FFFFFF; fill-opacity: .25; }
.t-coral { background: linear-gradient(135deg, #FFA27A, #EE5340); }
.t-sun { background: linear-gradient(135deg, #FFDA6B, #F29E0C); }
/* Camino: hechos en verde azulado, actual en amarillo, siguientes en gris */
.path-dot { background: #EEF2F6; color: var(--ink-3); box-shadow: none; }
.path-node.done .path-dot { box-shadow: 0 8px 16px -8px var(--teal); }
.path-node.now .path-dot { box-shadow: 0 0 0 6px #FFF3D3, 0 10px 18px -8px #F29E0C; }
/* Botones */
.btn-primary { border: 0; box-shadow: 0 10px 22px -12px var(--teal); }
.btn-soft, .btn-danger {
  background: var(--card);
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 6px 16px -10px rgba(31, 42, 68, .45);
}
.btn-soft:hover { background: var(--card); box-shadow: 0 8px 20px -10px rgba(31, 42, 68, .55); }
.btn-ink { background: var(--ink-1); border: 0; box-shadow: 0 10px 22px -12px rgba(31, 42, 68, .8); }
.chip { background: var(--card); border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 4px 12px -8px rgba(31, 42, 68, .4); }
.chip[aria-pressed="true"], .chip.on { background: var(--teal); color: #FFFFFF; box-shadow: 0 8px 16px -10px var(--teal); }
.input, .select, .textarea { background: var(--card); border: 1.5px solid #E3E9F0; box-shadow: none; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--teal-l); }
.say-btn { background: #DDF6F3; box-shadow: none; }
.pron-btn { background: #FFE8DF; box-shadow: none; }
.grade, .rate { border: 0; box-shadow: 0 6px 16px -10px rgba(31, 42, 68, .45); }
.option.correct { background: #D7F4F1; }
.option.wrong { background: #FFE4E1; }
.progress { background: #E3E9F0; }
/* Barras: sólidas */
.topbar { background: color-mix(in srgb, var(--page) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.talk-dock { background: var(--card); border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--soft-shadow); }
dialog, dialog.sheet {
  background: var(--card);
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 30px 60px -20px rgba(31, 42, 68, .45);
}
@media (max-width: 899px) {
  .bottomnav {
    background: var(--card);
    border: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: 26px;
    box-shadow: 0 1px 2px rgba(31, 42, 68, .06), 0 16px 34px -14px rgba(31, 42, 68, .45);
  }
  .navlink { color: var(--ink-3); font-weight: 800; }
  .navlink[aria-current="page"] { color: var(--teal); font-weight: 900; }
  .navlink[aria-current="page"] svg { border-radius: 15px; width: 44px; height: 30px; padding: 5px 12px; }
}
@media (min-width: 900px) {
  .bottomnav { background: var(--card); border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--soft-shadow); }
  .navlink[aria-current="page"] { color: var(--teal); box-shadow: none; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .navlink[aria-current="page"] svg, :root:not([data-theme="light"]) .say-btn { background: #12403C; }
  :root:not([data-theme="light"]) .pron-btn { background: #4A2A24; }
  :root:not([data-theme="light"]) .path-dot { background: #22304A; }
}
:root[data-theme="dark"] .navlink[aria-current="page"] svg, :root[data-theme="dark"] .say-btn { background: #12403C; }
:root[data-theme="dark"] .pron-btn { background: #4A2A24; }
:root[data-theme="dark"] .path-dot { background: #22304A; }
.bad-text { color: var(--bad); font-weight: 700; }
/* Valoración de cada respuesta en la conversación */
.fb {
  align-self: flex-end;
  width: min(100%, 520px);
  margin: -2px 0 6px auto;
  background: var(--card);
  border-radius: 20px;
  padding: 12px 14px;
  box-shadow: var(--soft-shadow);
  border-left: 5px solid var(--fb-c, #12B5A6);
  display: grid;
  gap: 8px;
}
.fb-good { --fb-c: #12B5A6; --fb-bg: #DDF6F3; }
.fb-fix { --fb-c: #F29E0C; --fb-bg: #FFF3D3; }
.fb-short { --fb-c: #4C5BE0; --fb-bg: #E7EAFF; }
.fb-offtopic { --fb-c: #EE5340; --fb-bg: #FFE8DF; }
.fb-recognition { --fb-c: #6B7591; --fb-bg: #EEF2F6; }
.fb-head { display: flex; align-items: center; gap: 8px; }
.fb-head strong { font-weight: 900; font-size: 15px; }
.fb-ic { width: 28px; height: 28px; border-radius: 10px; display: grid; place-items: center; background: var(--fb-bg); color: var(--fb-c); flex: none; }
.fb-ic svg { width: 17px; height: 17px; }
.fb-ai { margin-left: auto; font-size: 11px; font-weight: 900; color: var(--teal); background: #DDF6F3; border-radius: 999px; padding: 2px 8px; }
.fb-detail { margin: 0; font-size: 14px; color: var(--ink-2); font-weight: 700; }
.fb .correction { box-shadow: none; background: #FFF6DC; border-radius: 16px; margin: 0; }
.fb-better { background: var(--fb-bg); border-radius: 14px; padding: 8px 10px; display: grid; gap: 2px; }
.fb-label { font-size: 12px; font-weight: 800; color: var(--ink-2); }
.fb-better .en { margin: 0; font-weight: 800; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fb { --fb-bg: color-mix(in srgb, var(--fb-c) 22%, var(--card)); }
  :root:not([data-theme="light"]) .fb .correction { background: #2A2A22; }
}
:root[data-theme="dark"] .fb { --fb-bg: color-mix(in srgb, var(--fb-c) 22%, var(--card)); }
:root[data-theme="dark"] .fb .correction { background: #2A2A22; }
/* =====================================================================
   v1.11 — «Moderno»: logo nuevo (bocadillo con V), iconos en degradado,
   listas agrupadas en lugar de bloques sueltos, Hablar en carriles
   horizontales, controles segmentados y burbuja para cada palabra.
   ===================================================================== */
:root {
  --teal-d: #0A7D80;
  --line-2: #EDF1F5;
  --grad-teal: linear-gradient(135deg, #2EE0C9 0%, #12B5A6 45%, #0A7D80 100%);
  --grad-coral: linear-gradient(135deg, #FFB08A 0%, #F0533F 100%);
  --grad-sun: linear-gradient(135deg, #FFDA6B 0%, #F29E0C 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --line-2: #243049; }
}
:root[data-theme="dark"] { --line-2: #243049; }
/* Logo */
.brand-accent { color: var(--teal); }
.boot-mark::after { border-radius: 28%; }
.auth-hero .brand-mark { box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .45); }
/* Iconos de color: degradado + símbolo blanco (como los iconos de las apps modernas) */
.sc-icon, .scenario .sc-icon, .track-head .sc-icon {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ic, #12B5A6) 62%, #FFFFFF) 0%, var(--ic, #0B8C80) 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 16px -10px var(--ic, #0B8C80);
}
.sc-icon svg.ico .f { fill: #FFFFFF; fill-opacity: .28; }
.sc-icon svg { width: 22px; height: 22px; }
.sc-icon.sm { width: 34px; height: 34px; border-radius: 11px; }
.sc-icon.sm svg { width: 18px; height: 18px; }
.empty-icon { background: var(--grad-teal); color: #FFFFFF; box-shadow: 0 10px 20px -12px #0A7D80; }
.empty-icon svg.ico .f { fill: #FFFFFF; fill-opacity: .28; }
/* Listas agrupadas: una sola tarjeta con separadores, en vez de muchas cajas */
.vocab { display: block; background: var(--card); border-radius: 24px; box-shadow: var(--soft-shadow); overflow: hidden; }
.vocab-item {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-2) !important;
  transition: background .15s;
}
.vocab-item:last-child { border-bottom: 0 !important; }
.vocab-item:hover { background: color-mix(in srgb, var(--teal-l) 6%, transparent) !important; }
.vocab-item .en { font-size: 18px; font-weight: 900; }
.vocab-item .ex { font-size: 14px; }
.grammar { border-radius: 24px; padding: 18px; }
/* Texto en inglés: se puede tocar cada palabra */
.en, .c-fix, .bubble.teacher p { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.en:hover { text-decoration: underline dotted color-mix(in srgb, var(--teal) 45%, transparent); text-underline-offset: 4px; }
.say-tools .say-btn, .say-tools .pron-btn { transition: transform .1s, filter .15s; }
.say-tools .say-btn:hover, .say-tools .pron-btn:hover { filter: brightness(.96); transform: translateY(-1px); }
.say-tools { margin-left: 4px; }
.en > .say-tools.sm { margin-left: 6px; vertical-align: -6px; }
.word-pop {
  position: fixed;
  z-index: 80;
  align-items: center;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(31, 42, 68, .08), 0 18px 36px -14px rgba(31, 42, 68, .5);
  animation: popIn .14s ease-out;
}
.word-pop .wp-word { font-size: 17px; margin-right: 4px; cursor: default; text-decoration: none !important; }
.word-pop .say-btn, .word-pop .pron-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; }
.word-pop svg { width: 17px; height: 17px; }
@keyframes popIn { from { opacity: 0; transform: translateY(4px) scale(.96); } to { opacity: 1; transform: none; } }
/* Resultado de pronunciación: verde / naranja / rojo, palabras tocables */
.diff .hit { color: #0B8C80; font-weight: 800; }
.diff .close { color: #C26A00; font-weight: 800; text-decoration: underline dotted; text-underline-offset: 4px; }
.diff .miss { color: var(--bad); font-weight: 800; }
.diff.big { font-size: 20px; line-height: 1.7; }
.dw { border: 0; font: inherit; font-weight: 800; padding: 2px 8px; border-radius: 10px; cursor: pointer; }
.dw.close { background: #FFF1D6; color: #A35800; }
.dw.miss { background: #FFE4E1; color: var(--bad); text-decoration: none; }
.dw:hover { filter: brightness(.95); }
.pron-score { background: var(--grad-teal); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 40px; }
.big-num { font-size: 34px; font-weight: 900; letter-spacing: -.02em; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dw.close { background: #3A2E14; color: #FFC46B; }
  :root:not([data-theme="light"]) .dw.miss { background: #3D2421; }
  :root:not([data-theme="light"]) .diff .hit { color: #4FE0C9; }
}
:root[data-theme="dark"] .dw.close { background: #3A2E14; color: #FFC46B; }
:root[data-theme="dark"] .dw.miss { background: #3D2421; }
:root[data-theme="dark"] .diff .hit { color: #4FE0C9; }
/* Botones: un poco más ligeros y con estado de pulsación suave */
.btn { letter-spacing: -.005em; }
.btn-primary { background: var(--grad-teal); }
.btn-primary:hover { filter: brightness(1.04); background: var(--grad-teal); }
.btn-soft:hover, .chip:hover { transform: translateY(-1px); }
.icon-btn { transition: background .15s; }
.footer-actions { background: linear-gradient(to bottom, transparent, var(--page) 45%); padding-top: 22px; }
/* Controles segmentados */
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 4px; border-radius: 999px; background: #E9EEF3; width: 100%; }
.seg button {
  border: 0;
  background: transparent;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
}
.seg button[aria-pressed="true"] { background: var(--card); color: var(--teal); box-shadow: 0 4px 12px -6px rgba(31, 42, 68, .4); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .seg { background: #1F2A40; }
  :root:not([data-theme="light"]) .seg button[aria-pressed="true"] { background: #2C3954; color: #4FE0C9; }
}
:root[data-theme="dark"] .seg { background: #1F2A40; }
:root[data-theme="dark"] .seg button[aria-pressed="true"] { background: #2C3954; color: #4FE0C9; }
/* Hablar */
.free-talk2 {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 14px;
  padding: 16px 16px 16px 18px;
  border-radius: 26px;
  background: var(--grad-coral);
  color: #FFFFFF;
  box-shadow: 0 18px 32px -18px #E2553F;
  transition: transform .12s;
}
.free-talk2:hover { transform: translateY(-2px); }
.free-talk2:focus-visible { outline: 3px solid #FFB08A; outline-offset: 3px; }
.free-talk2 strong { display: block; font-size: 18px; font-weight: 900; }
.free-talk2 .grow > span { font-size: 14px; font-weight: 700; opacity: .92; }
.ft-ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: rgba(255, 255, 255, .22); flex: none; }
.ft-ic svg { width: 24px; height: 24px; }
.ft-ic svg.ico .f, .ft-go svg.ico .f { fill: #FFFFFF; fill-opacity: .3; }
.ft-go {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #FFFFFF;
  color: #E2553F;
  flex: none;
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .35);
}
.ft-go svg { width: 22px; height: 22px; }
.ft-go svg.ico .f { fill: #E2553F; fill-opacity: .2; }
.speak-prefs { display: grid; gap: 12px; margin-top: 16px; }
@media (min-width: 600px) {
  .speak-prefs { grid-template-columns: 3fr 2fr; }
}
.pref { display: grid; gap: 6px; }
.search { position: relative; display: block; margin-bottom: 12px; }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--ink-3); pointer-events: none; }
.search .input { padding-left: 44px; border-radius: 999px; min-height: 48px; }
.sc-group { margin-top: 18px; }
.sc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sc-head h3 { font-size: 17px; font-weight: 900; }
.sc-head .spacer { flex: 1; }
.link-btn {
  border: 0;
  background: none;
  color: var(--teal);
  font-weight: 900;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
}
.link-btn svg { width: 16px; height: 16px; }
.sc-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 158px;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 -16px;
  padding: 4px 16px 18px;
  scrollbar-width: none;
}
.sc-rail::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
  .sc-rail { margin: 0; scrollbar-width: thin; }
}
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding-bottom: 12px; }
.sc-card {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  min-height: 148px;
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--soft-shadow);
  transition: transform .12s, box-shadow .12s;
}
.sc-card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(31, 42, 68, .06), 0 18px 32px -16px rgba(31, 42, 68, .45); }
.sc-card:focus-visible { outline: 3px solid var(--teal-l); outline-offset: 2px; }
.sc-card strong { font-size: 15px; font-weight: 900; line-height: 1.25; flex: 1; color: var(--ink-1); }
.sc-card.suggested { box-shadow: 0 0 0 2.5px #FFC83D, var(--soft-shadow); }
.sc-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; font-weight: 800; }
.sc-meta .lvl { background: #EEF2F6; color: var(--ink-2); border-radius: 999px; padding: 2px 8px; }
.sc-meta .tag { font-size: 11px; padding: 2px 8px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sc-meta .lvl { background: #24304A; }
}
:root[data-theme="dark"] .sc-meta .lvl { background: #24304A; }
/* Navegación: indicador más limpio */
.navlink { transition: color .15s; }
@media (max-width: 899px) {
  .navlink[aria-current="page"] svg { background: linear-gradient(135deg, #D8F7F2, #C3EFE8); }
}
@media (min-width: 900px) {
  .navlink[aria-current="page"] { background: linear-gradient(135deg, #E2F9F5, #D3F3EE); }
}
@media (max-width: 899px) {
  :root[data-theme="dark"] .navlink[aria-current="page"] { background: none; }
  :root[data-theme="dark"] .navlink[aria-current="page"] svg { background: #12403C; }
}
@media (max-width: 899px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .navlink[aria-current="page"] { background: none; }
  :root:not([data-theme="light"]) .navlink[aria-current="page"] svg { background: #12403C; }
}
@media (min-width: 900px) {
  :root[data-theme="dark"] .navlink[aria-current="page"] { background: #12403C; }
  :root[data-theme="dark"] .navlink[aria-current="page"] svg { background: none; }
}
@media (min-width: 900px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .navlink[aria-current="page"] { background: #12403C; }
}
:root[data-theme="dark"] .path-node.now .path-dot { box-shadow: 0 0 0 6px rgba(242, 158, 12, .25), 0 10px 18px -8px #F29E0C; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .path-node.now .path-dot { box-shadow: 0 0 0 6px rgba(242, 158, 12, .25), 0 10px 18px -8px #F29E0C; }
}
@media (prefers-reduced-motion: reduce) {
  .word-pop, .sc-card, .free-talk2 { animation: none; transition: none; }
}
@media (min-width: 900px) {
  .sc-rail { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: unset; overflow: visible; padding: 4px 0 8px; }
  .sc-rail > .sc-card:nth-child(n+5) { display: none; }
}
.path-node.now .path-dot { background: var(--grad-sun) !important; color: #FFFFFF; }
.path-node.done .path-dot { background: var(--grad-teal) !important; color: #FFFFFF; }
.toast { color: #FFFFFF; }
/* =====================================================================
   v1.12 — «Ganas de seguir»: logo VV, bloque principal ilustrado y animado,
   frase del día, semana con puntos, confeti al terminar y voz natural.
   ===================================================================== */
.boot-mark { background: url(/icons/icon.svg) center / cover no-repeat; border-radius: 28%; box-shadow: 0 14px 30px -14px #0A6577; }
.boot-mark::after { border-color: #25DCC5; }
.brand-mark { width: 36px; height: 36px; border-radius: 11px; box-shadow: 0 8px 18px -10px #0A6577; }
/* Entrada suave de cada pantalla */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
main > * { animation: rise .42s cubic-bezier(.2, .8, .2, 1) both; }
main > *:nth-child(2) { animation-delay: .04s; }
main > *:nth-child(3) { animation-delay: .08s; }
main > *:nth-child(4) { animation-delay: .12s; }
main > *:nth-child(5) { animation-delay: .16s; }
main > *:nth-child(6) { animation-delay: .2s; }
main > *:nth-child(n+7) { animation-delay: .24s; }
/* Bloque principal: degradado vivo + ilustración que flota */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 22px 20px 20px;
  min-height: 196px;
  background: linear-gradient(120deg, #25DCC5 0%, #12B5A6 35%, #0A8C8C 70%, #0A6577 100%);
  background-size: 180% 180%;
  animation: rise .42s cubic-bezier(.2, .8, .2, 1) both, heroShift 14s ease-in-out infinite alternate;
}
@keyframes heroShift { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 240px;
  height: 240px;
  right: -70px;
  top: -90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.28), rgba(255,255,255,0) 70%);
}
.hero-art { position: absolute; z-index: -1; right: -6px; bottom: -4px; width: 190px; height: 142px; opacity: .95; pointer-events: none; }
.hero-art svg { width: 100%; height: 100%; }
.hero-art .fl1 { animation: float 5s ease-in-out infinite; }
.hero-art .fl2 { animation: float 6.5s ease-in-out -2s infinite; }
.hero-art .fl3 { animation: float 4.2s ease-in-out -1s infinite; transform-origin: 140px 88px; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.hero-k {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  background: rgba(255,255,255,.2);
  padding: 4px 10px;
  border-radius: 999px;
}
.hero-k svg { width: 15px; height: 15px; }
.hero-t { font-size: 26px; max-width: 78%; text-shadow: 0 1px 12px rgba(0, 60, 60, .25); }
.hero-sub { font-size: 13px; font-weight: 800; opacity: .9; margin-top: -6px; }
.hero-bar { max-width: 70%; }
.hero-btn { display: inline-flex; align-items: center; gap: 4px; padding: 12px 22px 12px 16px; font-size: 16px; }
.hero-btn svg { width: 18px; height: 18px; }
.hero:hover .hero-btn { box-shadow: 0 12px 22px -10px rgba(0, 0, 0, .45); }
.tile2 { position: relative; overflow: hidden; }
.tile2::after { content: ""; position: absolute; right: -30px; bottom: -30px; width: 100px; height: 100px; border-radius: 50%; opacity: .09; }
.tile2:first-child::after { background: #F0533F; }
.tile2:last-child::after { background: #F29E0C; }
/* Frase del día */
.daily { position: relative; margin-top: 14px; padding: 18px; border-radius: 26px; background: var(--card); box-shadow: var(--soft-shadow); overflow: hidden; }
.daily::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, #25DCC5, #FFC83D, #FF7A59); }
.daily-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.daily-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #A35800;
  background: #FFF1D6;
  border-radius: 999px;
  padding: 4px 10px;
}
.daily-badge svg { width: 14px; height: 14px; }
.daily-tip { font-size: 12.5px; font-weight: 700; color: var(--ink-3); flex: 1 1 200px; }
.daily-en {
  font-size: 25px;
  line-height: 1.25;
  margin-top: 12px;
  font-weight: 900;
  letter-spacing: -.01em;
  background: linear-gradient(90deg, #0B8C80, #0A6577);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.daily-en > .say-tools { display: none; }
.daily-es { color: var(--ink-2); font-weight: 700; margin-top: 4px; }
.daily-actions { margin-top: 12px; gap: 8px; }
.daily-word { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.dw-k { font-size: 11px; font-weight: 900; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.dw-en { font-size: 19px; }
.dw-en > .say-tools { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .daily-en { background: linear-gradient(90deg, #4FE0C9, #9CF0E2); -webkit-background-clip: text; background-clip: text; }
  :root:not([data-theme="light"]) .daily-badge { background: #3A2E14; color: #FFC46B; }
}
:root[data-theme="dark"] .daily-en { background: linear-gradient(90deg, #4FE0C9, #9CF0E2); -webkit-background-clip: text; background-clip: text; }
:root[data-theme="dark"] .daily-badge { background: #3A2E14; color: #FFC46B; }
/* Semana: puntos por día */
.goal-top { display: flex; align-items: center; gap: 16px; }
.week-dots { display: grid; }
.wd { display: grid; justify-items: center; gap: 4px; }
.wd i { border-radius: 50%; display: grid; place-items: center; background: #EEF2F6; color: #FFFFFF; transition: transform .2s; }
.wd i svg { width: 18px; height: 18px; stroke-width: 3; }
.wd.on i { background: var(--grad-teal); box-shadow: 0 6px 12px -6px #0A7D80; }
.wd.today i { outline: 2.5px solid #FFC83D; outline-offset: 2px; }
.wd b { font-size: 12px; font-weight: 900; color: var(--ink-3); }
.wd.today b { color: var(--ink-1); }
.mini-stats { flex-wrap: wrap; }
.mini-stats span { flex: 1 1 120px; background: #F4F7FA; border-radius: 16px; font-weight: 700; color: var(--ink-2); }
.mini-stats strong { display: block; font-weight: 900; color: var(--ink-1); letter-spacing: -.02em; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wd i, :root:not([data-theme="light"]) .mini-stats span { background: #1F2A40; }
}
:root[data-theme="dark"] .wd i, :root[data-theme="dark"] .mini-stats span { background: #1F2A40; }
/* Resultado de lección / sesión */
.result-card { position: relative; overflow: hidden; }
.result-card::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto;
  height: 220px;
  z-index: 0;
  background: radial-gradient(closest-side, rgba(37, 220, 197, .22), transparent);
}
.result-card > * { position: relative; }
.result-card h1 { background: linear-gradient(90deg, #0B8C80, #FF7A59); -webkit-background-clip: text; background-clip: text; color: transparent; }
canvas.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 200; }
/* Voz natural */
.natural-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 22px; background: #F4F7FA; }
.natural-card.promo { background: linear-gradient(135deg, #E9FBF8, #FFF3EC); box-shadow: inset 0 0 0 1.5px rgba(18, 181, 166, .25); }
.natural-card.on { background: #E2F9F5; }
.nc-ic {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--grad-teal);
  color: #FFFFFF;
  box-shadow: 0 8px 16px -10px #0A7D80;
}
.nc-ic svg { width: 22px; height: 22px; }
.nc-ic svg.ico .f { fill: #FFFFFF; fill-opacity: .3; }
.natural-card .grow > strong { font-size: 16px; font-weight: 900; display: block; }
.natural-card .small strong { font-weight: 900; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .natural-card { background: #1F2A40; }
  :root:not([data-theme="light"]) .natural-card.promo { background: linear-gradient(135deg, #123C3A, #3D2421); }
}
:root[data-theme="dark"] .natural-card { background: #1F2A40; }
:root[data-theme="dark"] .natural-card.promo { background: linear-gradient(135deg, #123C3A, #3D2421); }
.home-voice-tip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 20px;
  text-decoration: none;
  color: var(--ink-1);
  background: linear-gradient(135deg, #E9FBF8, #FFF3EC);
  box-shadow: inset 0 0 0 1.5px rgba(18, 181, 166, .22);
  font-weight: 800;
  font-size: 14px;
}
.home-voice-tip .nc-ic { width: 36px; height: 36px; border-radius: 12px; }
.home-voice-tip .nc-ic svg { width: 18px; height: 18px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .home-voice-tip { background: linear-gradient(135deg, #123C3A, #3D2421); }
}
:root[data-theme="dark"] .home-voice-tip { background: linear-gradient(135deg, #123C3A, #3D2421); }
@media (prefers-reduced-motion: reduce) {
  main > *, .hero, .hero-art g { animation: none !important; }
}
.week-dots { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.wd i { width: min(34px, 100%); aspect-ratio: 1; height: auto; }
.goal.goal2 { min-width: 0; }
.goal.goal2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; }
.goal-top .ring { width: 76px; height: 76px; flex: none; }
.daily-tip { flex-basis: 100%; text-align: left; font-style: italic; }
.mini-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mini-stats span { padding: 10px; font-size: 12px; line-height: 1.25; }
.mini-stats strong { font-size: 20px; }
.card .btn { max-width: 100%; white-space: normal; text-align: left; line-height: 1.25; }
/* =====================================================================
   v1.13 — Gramática y verbos
   ===================================================================== */
.learn-tabs { display: flex; gap: 4px; padding: 4px; margin: 14px 0 6px; border-radius: 999px; background: #E9EEF3; max-width: 460px; }
.learn-tabs a {
  flex: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 900;
  font-size: 14px;
  color: var(--ink-2);
  transition: background .15s, color .15s;
}
.learn-tabs a svg { width: 17px; height: 17px; }
.learn-tabs a[aria-current="page"] { background: var(--card); color: var(--teal); box-shadow: 0 4px 12px -6px rgba(31, 42, 68, .4); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .learn-tabs { background: #1F2A40; }
  :root:not([data-theme="light"]) .learn-tabs a[aria-current="page"] { background: #2C3954; color: #4FE0C9; }
}
:root[data-theme="dark"] .learn-tabs { background: #1F2A40; }
:root[data-theme="dark"] .learn-tabs a[aria-current="page"] { background: #2C3954; color: #4FE0C9; }
.gram-promo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 22px;
  text-decoration: none;
  color: var(--ink-1);
  background: var(--card);
  box-shadow: var(--soft-shadow);
  transition: transform .12s;
}
.gram-promo:hover { transform: translateY(-2px); }
.gram-promo strong { display: block; font-size: 16px; font-weight: 900; }
.gram-promo .grow > span { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.gp-ic {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  flex: none;
  color: #FFFFFF;
  background: linear-gradient(135deg, #A08BFF, #6A4FE0);
  box-shadow: 0 8px 16px -10px #6A4FE0;
}
.gp-ic svg { width: 24px; height: 24px; }
.gp-ic svg.ico .f { fill: #FFFFFF; fill-opacity: .28; }
.gram-progress { display: grid; gap: 6px; margin: 8px 0 4px; }
.gram-level { margin-top: 18px; }
.lvl-badge {
  font-size: 12px;
  font-weight: 900;
  color: #FFFFFF;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ic) 60%, #FFFFFF), var(--ic));
}
.gram-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.gram-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 4px;
  padding: 16px 16px 16px 20px;
  border-radius: 22px;
  text-decoration: none;
  color: var(--ink-1);
  background: var(--card);
  box-shadow: var(--soft-shadow);
  transition: transform .12s, box-shadow .12s;
}
.gram-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ic) 55%, #FFFFFF), var(--ic));
}
.gram-card:hover { transform: translateY(-2px); }
.gram-card strong { font-size: 16px; font-weight: 900; line-height: 1.25; }
.gc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.gc-group { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--ic); }
.gc-score {
  font-size: 12px;
  font-weight: 900;
  color: #0B8C80;
  background: #DDF6F3;
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.gc-score svg { width: 13px; height: 13px; }
.gc-en { font-size: 13px; font-weight: 700; color: var(--ink-3); font-style: italic; }
.conf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.conf-card {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 20px;
  text-decoration: none;
  color: var(--ink-1);
  background: var(--card);
  box-shadow: var(--soft-shadow);
  transition: transform .12s;
}
.conf-card:hover { transform: translateY(-2px); }
.conf-card.done { box-shadow: 0 0 0 2px #22D3BF, var(--soft-shadow); }
.conf-vs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.conf-vs b { font-size: 17px; font-weight: 900; color: #0B8C80; }
.conf-vs b + i + b { color: #E2553F; }
.conf-vs i { font-size: 12px; font-weight: 800; color: var(--ink-3); font-style: normal; }
.conf-vs.big b { font-size: 30px; color: #FFFFFF; }
.conf-vs.big i { color: rgba(255,255,255,.8); }
.topic-hero {
  margin-top: 6px;
  padding: 22px 20px;
  border-radius: 28px;
  color: #FFFFFF;
  display: grid;
  gap: 8px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ic) 65%, #FFFFFF) 0%, var(--ic) 70%, color-mix(in srgb, var(--ic) 70%, #000000) 100%);
  box-shadow: 0 18px 32px -18px var(--ic);
}
.topic-hero::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  right: -60px;
  top: -70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.25), transparent 70%);
}
.topic-hero h1 { font-size: clamp(24px, 6vw, 32px); }
.topic-hero p { font-weight: 700; opacity: .95; }
.th-en { font-size: 15px; font-weight: 800; opacity: .9; background: rgba(255,255,255,.18); justify-self: start; padding: 3px 10px; border-radius: 999px; }
.formula { display: grid; gap: 8px; }
.f-row { display: grid; gap: 4px; padding: 14px 16px; border-radius: 20px; background: var(--card); box-shadow: var(--soft-shadow); }
.f-label { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: #0B8C80; }
.f-pattern { font-weight: 900; font-size: 16px; font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: -.01em; }
.f-ex { color: var(--ink-2); font-size: 15px; }
@media (min-width: 700px) {
  .f-row { grid-template-columns: 130px 1fr; align-items: baseline; }
  .f-row .f-ex { grid-column: 2; }
}
.mistakes { display: grid; gap: 8px; }
.mistake { padding: 12px 16px; border-radius: 20px; background: var(--card); box-shadow: var(--soft-shadow); display: grid; gap: 3px; }
.m-wrong { color: var(--bad); font-weight: 800; display: flex; align-items: center; gap: 6px; }
.m-right { color: #0B8C80; font-weight: 900; display: flex; gap: 6px; }
.m-wrong svg, .m-right svg { width: 16px; height: 16px; flex: none; }
.tip-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 20px;
  background: #FFF6DC;
  font-weight: 700;
}
.tip-card svg { width: 22px; height: 22px; color: #C27A00; flex: none; }
.rule-pair { display: grid; gap: 10px; margin-top: 14px; }
@media (min-width: 640px) {
  .rule-pair { grid-template-columns: 1fr 1fr; }
}
.rule { padding: 16px; border-radius: 22px; background: var(--card); box-shadow: var(--soft-shadow); display: grid; gap: 6px; border-top: 5px solid #12B5A6; }
.rule.b { border-top-color: #FF7A59; }
.rule-k { font-size: 22px; font-weight: 900; color: #0B8C80; }
.rule.b .rule-k { color: #E2553F; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tip-card { background: #2A2A22; }
}
:root[data-theme="dark"] .tip-card { background: #2A2A22; }
.quiz { display: grid; gap: 12px; }
.quiz-top { display: flex; align-items: center; gap: 10px; }
.quiz-top .progress { flex: 1; }
.quiz-start { width: 100%; min-height: 54px; font-size: 17px; }
.quiz .btn[data-next] { justify-self: stretch; }
.verb-game {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 12px;
  padding: 16px;
  border-radius: 24px;
  color: #FFFFFF;
  background: linear-gradient(135deg, #A08BFF, #6A4FE0);
  box-shadow: 0 18px 32px -18px #6A4FE0;
  transition: transform .12s;
}
.verb-game:hover { transform: translateY(-2px); }
.verb-game strong { display: block; font-size: 17px; font-weight: 900; }
.verb-game .grow > span { font-size: 13px; font-weight: 700; opacity: .92; }
.verb-game .ft-go { color: #6A4FE0; }
.verb-game .ft-go svg.ico .f { fill: #6A4FE0; }
.verb-head, .verb-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; }
.verb-head { margin-top: 14px; padding: 0 16px 6px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.verb-list { background: var(--card); border-radius: 24px; box-shadow: var(--soft-shadow); overflow: hidden; }
.verb-row {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-2);
  transition: background .12s;
}
.verb-row:last-child { border-bottom: 0; }
.verb-row:hover { background: color-mix(in srgb, var(--teal-l) 7%, transparent); }
.vb { display: grid; min-width: 0; }
.vb b { font-weight: 900; font-size: 16px; color: var(--ink-1); }
.vb small { font-size: 12px; font-weight: 700; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp { font-weight: 800; font-size: 15px; color: var(--ink-2); overflow-wrap: anywhere; }
.verb-row.irr .vp { color: #6A4FE0; }
.forms3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.form { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 12px 6px; border-radius: 18px; background: #F4F7FA; }
.form b { font-size: 18px; overflow-wrap: anywhere; }
.conj { display: grid; border-radius: 18px; overflow: hidden; background: #F4F7FA; }
.conj-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line-2); }
.conj-row:last-child { border-bottom: 0; }
.conj-row .say-btn { width: 32px; height: 32px; border-radius: 50%; border: 0; display: grid; place-items: center; }
.conj-row .say-btn svg { width: 15px; height: 15px; }
.conj-row .en { font-size: 15px; }
.verb-sheet { max-height: 90vh; overflow-y: auto; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .form, :root:not([data-theme="light"]) .conj { background: #1F2A40; }
}
:root[data-theme="dark"] .form, :root[data-theme="dark"] .conj { background: #1F2A40; }
.m-right { flex-wrap: nowrap; align-items: flex-start; }
.m-right svg { margin-top: 4px; }
.m-right .en { flex: 1; min-width: 0; }
/* =====================================================================
   v1.14 — Panel de administración e invitaciones
   ===================================================================== */
@media (max-width: 899px) {
  .bottomnav { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
}
.panel-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
@media (min-width: 760px) {
  .panel-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pstat {
  display: grid;
  gap: 2px;
  padding: 14px;
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--soft-shadow);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
}
.pv { font-size: 26px; font-weight: 900; color: var(--ink-1); letter-spacing: -.02em; }
.pstat.ai { background: linear-gradient(135deg, #F1EDFF, #FFFFFF); }
.pstat.ai .pv { color: #6A4FE0; }
.people { background: var(--card); border-radius: 24px; box-shadow: var(--soft-shadow); overflow: hidden; }
.person {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-2);
  transition: background .12s;
}
.person:last-child { border-bottom: 0; }
.person:hover { background: color-mix(in srgb, var(--teal-l) 7%, transparent); }
.person.paused { opacity: .55; }
.avatar {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  flex: none;
  display: grid;
  place-items: center;
  color: #FFFFFF;
  font-weight: 900;
  font-size: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ic) 60%, #FFFFFF), var(--ic));
}
.p-main { display: grid; min-width: 0; }
.p-main strong { font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-week { display: grid; justify-items: end; line-height: 1.1; }
.p-week b { font-size: 18px; font-weight: 900; }
.p-days { display: none; gap: 3px; }
.p-days i { width: 8px; height: 22px; border-radius: 4px; background: #E3E9F0; }
.p-days i.on { background: var(--grad-teal); }
@media (min-width: 520px) {
  .p-days { display: flex; }
}
.perm-list { display: grid; gap: 8px; }
@media (min-width: 560px) {
  .perm-list { grid-template-columns: 1fr 1fr; }
}
.perm {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: #F4F7FA;
  cursor: pointer;
  font-weight: 800;
  font-size: 14px;
}
.perm input { width: 20px; height: 20px; accent-color: #12B5A6; flex: none; }
.perm-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--grad-teal); color: #FFFFFF; flex: none; }
.perm-ic svg { width: 16px; height: 16px; }
.perm-ic svg.ico .f { fill: #FFFFFF; fill-opacity: .3; }
.perm:has(input:not(:checked)) .perm-ic { background: #C9D2DD; }
.invite-ok { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 18px; background: #E2F9F5; color: var(--ink-1); }
.invite-ok > svg { width: 22px; height: 22px; color: #0B8C80; flex: none; margin-top: 2px; }
.invite-ok.big { padding: 16px; }
.invite-code { font-size: 30px; font-weight: 900; letter-spacing: .14em; color: #0B8C80; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.invite-input { text-transform: uppercase; letter-spacing: .12em; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 900; }
.code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 900;
  letter-spacing: .08em;
  background: #EEF2F6;
  padding: 1px 6px;
  border-radius: 6px;
}
.inv-row { align-items: center; }
.cal-bars { display: flex; align-items: flex-end; gap: 3px; height: 56px; padding: 6px; border-radius: 14px; background: #F4F7FA; }
.cal-bars i { flex: 1; border-radius: 3px; background: #DDE4EC; min-height: 3px; }
.cal-bars i.on { background: var(--grad-teal); }
.person-sheet { max-height: 92vh; overflow-y: auto; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .perm, :root:not([data-theme="light"]) .cal-bars, :root:not([data-theme="light"]) .code { background: #1F2A40; }
  :root:not([data-theme="light"]) .invite-ok { background: #123C3A; }
  :root:not([data-theme="light"]) .pstat.ai { background: #241F40; }
}
:root[data-theme="dark"] .perm, :root[data-theme="dark"] .cal-bars, :root[data-theme="dark"] .code { background: #1F2A40; }
:root[data-theme="dark"] .invite-ok { background: #123C3A; }
:root[data-theme="dark"] .pstat.ai { background: #241F40; }
/* =====================================================================
   v1.15 — Diccionario en cada palabra y pronunciación figurada
   ===================================================================== */
.pron-es { display: block; font-size: 13px; font-weight: 800; color: #7A5CF0; letter-spacing: .01em; margin-top: 1px; }
.pron-es svg { width: 13px; height: 13px; opacity: .7; }
.daily-en + .pron-es { font-size: 15px; margin-top: 2px; }
.pron-target .pron-es { font-size: 15px; }
.form .pron-es { font-size: 12px; }
.lesson-head .pron-es { font-size: 14px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pron-es { color: #B7A6FF; }
}
:root[data-theme="dark"] .pron-es { color: #B7A6FF; }
.word-pop { display: grid; gap: 6px; padding: 8px 10px 10px 14px; border-radius: 20px; max-width: min(320px, calc(100vw - 16px)); }
.wp-top { display: flex; align-items: center; gap: 6px; }
.wp-top .wp-word { flex: 1; }
.wp-dict { display: grid; gap: 3px; padding-right: 4px; }
.wp-mean { font-size: 14.5px; font-weight: 700; color: var(--ink-1); line-height: 1.3; }
.pron-es-line { font-size: 13px; color: #7A5CF0; font-weight: 700; }
.pron-es-line b { font-weight: 900; }
.pron-es-line svg { width: 13px; height: 13px; }
.word-pop .link-btn { justify-self: start; padding: 4px 0; font-size: 13px; }
.dict-list { background: var(--card); border-radius: 24px; box-shadow: var(--soft-shadow); overflow: hidden; }
.dict-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
.dict-row:last-child { border-bottom: 0; }
.d-en { font-size: 18px; font-weight: 900; display: block; }
.d-es { font-weight: 700; color: var(--ink-2); }
.pron-help { margin-top: 16px; }
.pron-help summary { cursor: pointer; }
.pron-help ul { padding-left: 18px; display: grid; gap: 4px; margin: 8px 0; }
/* =====================================================================
   v1.16 — Hablar sin miedo + botones arriba a la derecha
   ===================================================================== */
.corner-actions { display: none; }
@media (min-width: 900px) {
  .corner-actions { display: flex; gap: 8px; position: fixed; top: 16px; right: 20px; z-index: 40; }
  .corner-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    background: var(--card);
    box-shadow: var(--soft-shadow);
    text-decoration: none;
    color: var(--ink-2);
    font-weight: 900;
    font-size: 14px;
    transition: transform .12s;
  }
  .corner-btn:hover { transform: translateY(-1px); color: var(--teal); }
  .corner-btn[aria-current="page"] { background: #DDF6F3; color: var(--teal); }
  .corner-btn svg { width: 18px; height: 18px; }
  .rail-extra a[href="#/panel"], .rail-extra a[href="#/ajustes"] { display: none; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .corner-btn[aria-current="page"] { background: #12403C; }
}
:root[data-theme="dark"] .corner-btn[aria-current="page"] { background: #12403C; }
.brave-entry {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 24px;
  text-decoration: none;
  color: #3B2A7A;
  background: linear-gradient(135deg, #F1EDFF 0%, #FFEFF5 100%);
  box-shadow: inset 0 0 0 1.5px rgba(122, 92, 240, .18);
  transition: transform .12s;
}
.brave-entry:hover { transform: translateY(-2px); }
.brave-entry strong { display: block; font-size: 16px; font-weight: 900; color: #3B2A7A; }
.brave-entry .grow > span { font-size: 13px; font-weight: 700; color: #6B5BA8; }
.be-ic, .bh-ic {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  flex: none;
  color: #FFFFFF;
  background: linear-gradient(135deg, #B8A6FF, #7A5CF0);
  box-shadow: 0 8px 16px -10px #7A5CF0;
}
.be-ic svg, .bh-ic svg { width: 24px; height: 24px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brave-entry { background: linear-gradient(135deg, #241F40, #3A1F2C); color: #E4DCFF; }
  :root:not([data-theme="light"]) .brave-entry strong { color: #E4DCFF; }
  :root:not([data-theme="light"]) .brave-entry .grow > span { color: #B9ADEA; }
}
:root[data-theme="dark"] .brave-entry { background: linear-gradient(135deg, #241F40, #3A1F2C); }
:root[data-theme="dark"] .brave-entry strong { color: #E4DCFF; }
:root[data-theme="dark"] .brave-entry .grow > span { color: #B9ADEA; }
.brave-hero {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 8px;
  padding: 20px;
  border-radius: 28px;
  color: #FFFFFF;
  background: linear-gradient(135deg, #A893FF 0%, #7A5CF0 55%, #E77BB0 100%);
  box-shadow: 0 18px 32px -18px #7A5CF0;
}
.brave-hero h1 { font-size: clamp(24px, 6vw, 32px); }
.brave-hero p { font-weight: 700; opacity: .95; }
.brave-hero .bh-ic { background: rgba(255,255,255,.22); box-shadow: none; }
.brave-hero.small { padding: 16px; }
.brave-hero.small h1 { font-size: 22px; }
.cheer { margin-top: 12px; padding: 12px 16px; border-radius: 20px; background: #FFF1F6; color: #A4386B; font-weight: 800; font-style: italic; }
.cheer svg { width: 16px; height: 16px; }
.brave-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.brave-stats > div {
  display: grid;
  padding: 12px;
  border-radius: 20px;
  background: var(--card);
  box-shadow: var(--soft-shadow);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
}
.brave-stats b { font-size: 24px; font-weight: 900; color: #7A5CF0; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.badge-pill { font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 999px; background: #EEF2F6; color: var(--ink-3); }
.badge-pill.won { background: #FFF3D3; color: #8A5A00; }
.lvl-dots { display: inline-flex; gap: 3px; }
.lvl-dots i { width: 9px; height: 9px; border-radius: 50%; background: #E3E9F0; }
.lvl-dots i.on { background: #7A5CF0; }
.lifelines { display: grid; gap: 8px; }
.lifeline { background: var(--card); border-radius: 22px; box-shadow: var(--soft-shadow); }
.lifeline > summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; }
.lifeline > summary::-webkit-details-marker { display: none; }
.lifeline .vocab { box-shadow: none; border-radius: 0 0 22px 22px; border-top: 1px solid var(--line-2); }
.tr { font-size: 14px; color: var(--ink-3); font-weight: 700; }
.tr-ask { font-size: 13px; color: var(--ink-3); }
.tr-ask summary { cursor: pointer; color: #7A5CF0; font-weight: 800; display: inline; }
.tr-ask span { display: block; font-weight: 700; margin-top: 2px; }
.shadow-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; display: inline-grid; place-items: center; background: #EFEAFF; color: #6A4FE0; }
.shadow-btn svg { width: 19px; height: 19px; }
.say-tools.sm .shadow-btn { width: 32px; height: 32px; }
.sound-card { justify-items: start; }
.sound-sym { font-size: 22px; font-weight: 900; color: #7A5CF0; font-family: ui-monospace, Menlo, monospace; }
.pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pair { display: grid; gap: 4px; justify-items: start; padding: 12px; border-radius: 18px; background: var(--card); box-shadow: var(--soft-shadow); }
.reto-now {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 16px;
  border-radius: 24px;
  color: #FFFFFF;
  background: linear-gradient(135deg, #FFB08A, #F0533F);
  box-shadow: 0 18px 32px -18px #E2553F;
}
.reto-now strong { font-size: 17px; font-weight: 900; }
.reto-n { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; opacity: .9; }
.retos { display: grid; gap: 6px; margin-top: 10px; }
.reto {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
}
.reto:hover { background: #F4F7FA; }
.reto b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #EEF2F6; font-size: 12px; flex: none; }
.reto.done b { background: var(--grad-teal); color: #FFFFFF; }
.reto span { flex: 1; }
.reto-text { font-size: 18px; font-weight: 900; text-align: center; }
.feel { display: grid; gap: 8px; }
.feel-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.feel-row button {
  border: 0;
  border-radius: 16px;
  padding: 10px 4px;
  background: #F4F7FA;
  display: grid;
  justify-items: center;
  gap: 2px;
  font-weight: 800;
  color: var(--ink-2);
}
.feel-row button span { font-size: 26px; }
.feel-row button small { font-size: 11px; }
.feel-row button.on, .feel-row button:hover { background: #EFEAFF; color: #6A4FE0; }
.feel-chart { display: flex; align-items: flex-end; gap: 4px; height: 90px; }
.feel-chart i { flex: 1; border-radius: 6px 6px 3px 3px; min-width: 6px; }
.feel-chart i.f1 { background: #FFB3A6; }
.feel-chart i.f2 { background: #FFD27A; }
.feel-chart i.f3 { background: #8FE0D4; }
.feel-chart i.f4 { background: #7A5CF0; }
.karaoke { font-size: 24px; font-weight: 900; line-height: 1.5; text-align: center; color: var(--ink-3); }
.karaoke span { transition: color .15s; }
.karaoke span.on { color: #7A5CF0; text-decoration: underline; text-underline-offset: 6px; }
.karaoke span.done { color: var(--ink-1); }
.pron-result.gentle { padding: 10px 0; }
.gentle-ok { font-size: 22px; font-weight: 900; color: #0B8C80; display: inline-flex; align-items: center; gap: 6px; }
.gentle-ok.try { color: #7A5CF0; }
.gentle-ok svg { width: 22px; height: 22px; }
.script { display: grid; gap: 10px; }
.script-turn { display: grid; gap: 6px; padding: 14px; border-radius: 22px; background: var(--card); box-shadow: var(--soft-shadow); }
.st-who { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.st-app .en { font-weight: 800; }
.st-me { padding: 10px 12px; border-radius: 16px; background: #F3F0FF; }
.st-me .st-who { color: #7A5CF0; }
.help-levels { max-width: 460px; }
.talk-head { display: flex; align-items: center; gap: 10px; padding: 6px 0 10px; }
.brave-log { display: grid; gap: 10px; padding-bottom: 12px; }
.brave-dock { display: grid; gap: 10px; padding: 14px; border-radius: 24px; background: var(--card); box-shadow: var(--soft-shadow); }
.prep { padding: 10px 12px; border-radius: 16px; background: #F3F0FF; }
.prep .en { font-size: 18px; font-weight: 900; color: #3B2A7A; }
.brave-done { display: grid; gap: 12px; }
.eval-good p { font-weight: 800; color: #0B8C80; display: flex; gap: 6px; align-items: flex-start; }
.eval-good svg { width: 18px; height: 18px; flex: none; margin-top: 3px; }
.eval-tip { padding: 10px 12px; border-radius: 16px; background: #FFF6DC; margin-top: 6px; display: grid; gap: 4px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .st-me, :root:not([data-theme="light"]) .prep { background: #241F40; }
  :root:not([data-theme="light"]) .prep .en { color: #E4DCFF; }
  :root:not([data-theme="light"]) .cheer { background: #3A1F2C; color: #FFB3D0; }
  :root:not([data-theme="light"]) .feel-row button, :root:not([data-theme="light"]) .badge-pill { background: #1F2A40; }
}
:root[data-theme="dark"] .st-me, :root[data-theme="dark"] .prep { background: #241F40; }
:root[data-theme="dark"] .prep .en { color: #E4DCFF; }
:root[data-theme="dark"] .cheer { background: #3A1F2C; color: #FFB3D0; }
:root[data-theme="dark"] .feel-row button, :root[data-theme="dark"] .badge-pill { background: #1F2A40; }
@media (min-width: 900px) {
  main { padding-top: 72px; }
}
/* v1.17 — avisos de errores, manos libres, voces variadas, privacidad */
.voice-tag { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; color: #6A4FE0; }
.voice-tag svg { width: 13px; height: 13px; }
.hf-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 10px;
  padding: 8px 12px;
  border-radius: 14px;
  background: #F3F0FF;
  font-size: 13px;
  font-weight: 800;
  color: #4B3A9A;
  cursor: pointer;
}
.hf-toggle input { width: 18px; height: 18px; accent-color: #7A5CF0; }
.hf-toggle svg { width: 15px; height: 15px; }
.muted-link { color: var(--ink-3) !important; }
.badge-inline {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--coral);
  color: #FFFFFF;
  font-size: 12px;
  vertical-align: middle;
}
.list-item.resolved { opacity: .55; }
.privacy { max-width: 720px; margin: 0 auto; padding: 24px 18px 60px; display: grid; gap: 10px; }
.privacy h2 { margin-top: 14px; font-size: 19px; }
.privacy ul { padding-left: 20px; display: grid; gap: 4px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hf-toggle { background: #241F40; color: #D9D0FF; }
}
:root[data-theme="dark"] .hf-toggle { background: #241F40; color: #D9D0FF; }

/* v1.20 — conversación que sigue al último mensaje, pregunta actual y valoración de cada respuesta */
.now-q { display: grid; gap: 2px; padding: 8px 12px; border-radius: 14px; background: var(--accent-soft); border-left: 4px solid var(--accent); }
.now-q .nq-label { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-deep); }
.now-q .en { font-weight: 800; font-size: 16px; line-height: 1.3; margin: 0; }
.talk-log, .brave-log { scroll-margin-bottom: 220px; }
/* Caja de chat: los mensajes se desplazan dentro y la barra de respuesta queda siempre debajo */
.chat-panel { display: flex !important; flex-direction: column; min-height: 0 !important; }
.chat-panel > * { flex: 0 0 auto; }
.chat-panel > .chat-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 12px 4px 16px; scrollbar-width: thin; }
.chat-panel .talk-dock { position: static; margin-bottom: 0; }
.chat-panel .brave-dock { margin-top: 6px; }
.chat-panel .talk-head { padding-bottom: 6px; }
.chat-panel .hf-toggle { margin: 4px 0; }
.jump-wrap { position: relative; height: 0; z-index: 5; }
.jump-latest { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper);
  font: 800 14px var(--font-body); box-shadow: var(--shadow-lift); cursor: pointer; }
.jump-latest[hidden] { display: none; }
.jump-latest .ico { width: 18px; height: 18px; }
.judge { justify-self: end; display: inline-flex; align-items: center; gap: 4px; margin-top: -8px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; }
.judge .ico { width: 15px; height: 15px; }
.j-good { background: var(--good-soft); color: var(--good); }
.j-fix { background: var(--bad-soft); color: var(--bad); }
.j-unsure { background: var(--warn-soft); color: var(--warn); }
.eval-list { display: grid; gap: 10px; margin: 6px 0 10px; }
.eval-item { display: grid; gap: 4px; padding: 10px 12px; border-radius: 16px; border-left: 4px solid var(--mist); background: var(--surface-2); }
.eval-item p { margin: 0; }
.eval-item .ev-head { display: flex; align-items: center; gap: 6px; }
.eval-item .ev-said { font-weight: 700; }
.ev-ok { border-left-color: var(--good); } .ev-ok .ev-head { color: var(--good); }
.ev-bad { border-left-color: var(--bad); } .ev-bad .ev-head { color: var(--bad); }
.ev-meh { border-left-color: var(--warn); } .ev-meh .ev-head { color: var(--warn); }

/* v1.21 — Escuchar */
.learn-tabs { max-width: 620px; }
@media (max-width: 560px) {
  .learn-tabs { overflow-x: auto; scrollbar-width: none; max-width: none; }
  .learn-tabs::-webkit-scrollbar { display: none; }
  .learn-tabs a { flex: 0 0 auto; padding: 0 12px; }
  .learn-tabs a svg { display: none; }
  .learn-tabs a[aria-current="page"] svg { display: inline; }
}
.listen-summary { margin: 10px 0 4px; font-weight: 800; color: var(--ink-2); }
.listen-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.listen-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--card); box-shadow: var(--soft-shadow); color: inherit; text-decoration: none; min-width: 0; }
.listen-card strong { display: block; }
.listen-card .grow { min-width: 0; display: grid; gap: 2px; }
.listen-card.done { opacity: .92; }
.lc-ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--ic-bg, var(--accent-soft)); color: var(--ic, var(--accent-deep)); }
.lc-ic .ico { width: 22px; height: 22px; }
.player { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.player .big-listen.on { animation: lPulse 1.2s ease-in-out infinite; }
@keyframes lPulse { 50% { transform: scale(1.08); } }
.pl-dots { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.pl-dots i { width: 22px; height: 6px; border-radius: 3px; background: var(--mist); transition: background .2s; }
.pl-dots i.past { background: color-mix(in srgb, var(--accent) 45%, var(--mist)); }
.pl-dots i.on { background: var(--accent); }
.lq { display: grid; gap: 10px; }
.lq-q { margin: 0; font-size: 17px; }
.lq-opts { display: grid; gap: 8px; }
.lq .option { text-align: left; }
.ok-text { color: var(--good); font-weight: 700; }
.listen-result { margin-top: 14px; display: grid; gap: 8px; border-left: 5px solid var(--warn); }
.listen-result.good { border-left-color: var(--good); }
.listen-result h2 { margin: 0; }
.transcript { margin-top: 14px; }
.tr-line { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 14px; transition: background .2s; }
.tr-line.now { background: var(--accent-soft); }
.tr-line p { margin: 0; }
.tr-who { flex: 0 0 auto; min-width: 74px; font-size: 12px; font-weight: 900; padding: 3px 8px; border-radius: 999px; text-align: center; background: var(--coral-soft); color: var(--coral-deep); }
.tr-who.m { background: var(--accent-soft); color: var(--accent-deep); }
.tr-line { flex-wrap: wrap; row-gap: 4px; }
.tr-who { flex: 0 0 100%; max-width: max-content; min-width: 0; }
/* Leer */
.read-doc { margin-top: 12px; padding: 18px; border-radius: 20px; background: var(--card); box-shadow: var(--soft-shadow); display: grid; gap: 12px; }
.read-doc .rd-p { display: grid; gap: 4px; }
.read-doc .rd-p .en, .read-doc .rd-head .en { margin: 0; font-size: 17px; line-height: 1.55; font-weight: 600; }
.rd-head { padding-bottom: 10px; border-bottom: 1px dashed var(--mist); }
.rd-head .en { font-size: 14px !important; color: var(--ink-2); }
.rd-notice { border: 3px solid var(--ink); text-align: center; }
.rd-notice .rd-p:first-child .en { font-size: 20px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; }
.rd-message { background: var(--accent-soft); border-radius: 22px 22px 22px 6px; }
.rd-ad .rd-p:first-child .en { font-weight: 900; color: var(--coral-deep); }
.rd-menu { background: #FFF8EC; font-family: ui-serif, Georgia, serif; }
.rd-letter, .rd-email { border-top: 5px solid var(--accent); }
.rd-form .rd-p .en { font-family: ui-monospace, Menlo, monospace; font-size: 15px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rd-menu { background: #2A2418; } }
:root[data-theme="dark"] .rd-menu { background: #2A2418; }
/* Prueba de nivel */
.lt-banner { display: flex; align-items: center; gap: 12px; margin-top: 12px; color: inherit; text-decoration: none; border-left: 5px solid var(--sun); }
.lt-banner .grow { display: grid; gap: 2px; }
.lt-q { margin-top: 14px; }
.lt-read { margin-top: 0; box-shadow: none; background: var(--surface-2); padding: 14px; }
.lt-read .en { margin: 0; font-size: 16px; line-height: 1.5; }
.lt-skip { opacity: .75; font-style: italic; }
.lt-history, .lt-levels { display: flex; flex-wrap: wrap; gap: 6px; }
/* Barra de respuesta más compacta dentro del chat: más sitio para los mensajes */
.chat-panel .interim:empty { display: none; }
.chat-panel .talk-dock, .chat-panel .brave-dock { gap: 6px; padding: 10px 12px; }
.chat-panel .mic-state { margin: 0; font-size: 14px; min-height: 0; }
.chat-panel .answer-box { --gap: 6px !important; }
.chat-panel .answer-box .mic { width: 60px; height: 60px; }
.chat-panel .dock-row .mic { width: 60px; height: 60px; }
.chat-panel .hf-toggle { font-size: 13px; padding: 6px 10px; }
.chat-panel .now-q { padding: 6px 10px; }
.chat-panel .now-q .en { font-size: 15px; }
.chat-panel .prep { padding: 8px 10px; }
/* En el chat, micrófono y casilla de texto en la misma fila */
.chat-panel .answer-box { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; row-gap: 4px; }
.chat-panel .answer-box > .row { grid-column: 1; grid-row: 1; }
.chat-panel .answer-box > .type-row { grid-column: 2; grid-row: 1; }
.chat-panel .answer-box > .mic-state, .chat-panel .answer-box > .interim, .chat-panel .answer-box > .help { grid-column: 1 / -1; text-align: left; font-size: 13px; }
.chat-panel .answer-box .mic { width: 52px; height: 52px; }
.chat-panel .answer-box .mic svg { width: 24px; height: 24px; }
.chat-panel .chat-scroll { min-height: 140px; }
.chat-panel .hf-toggle { white-space: nowrap; }
html.chat-open, html.chat-open body { overflow: hidden; overscroll-behavior: none; }
.chat-panel { overflow: hidden; }
.chat-panel .chat-scroll { min-height: 90px; }
.chat-panel > .talk-dock, .chat-panel > [data-dock] { max-height: 72%; overflow-y: auto; }
@media (max-height: 720px) {
  .chat-panel .brave-dock .now-q { display: none; }
  .chat-panel .answer-box > .mic-state:not(.live) { display: none; }
  .chat-panel .talk-dock .mic-state:not(.live) { display: none; }
}

/* v1.23 — Conversación «una pregunta cada vez»: pregunta grande, tu respuesta y el resultado bien claro */
.turn-view { display: grid; gap: 12px; max-width: 720px; margin: 0 auto; padding-bottom: 24px; }
.turn-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tv-dots { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.tv-dots i { width: 22px; height: 7px; border-radius: 4px; background: var(--mist); }
.tv-dots i.done { background: color-mix(in srgb, var(--accent) 55%, var(--mist)); }
.tv-dots i.now { background: var(--accent); width: 30px; }
.tv-dots .small { margin-left: 6px; }
.hf-mini { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; color: var(--ink-2); padding: 5px 10px; border-radius: 999px; background: var(--surface-2); cursor: pointer; }
.hf-mini input { margin: 0; }
.q-card, .a-card { border-radius: 24px; padding: 16px 18px; display: grid; gap: 10px; background: var(--card); box-shadow: var(--soft-shadow); }
.q-card { border-left: 6px solid var(--accent); background: linear-gradient(180deg, var(--accent-soft), var(--card) 70%); }
.qc-who { font-size: 12px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.q-card .qc-who { color: var(--accent-deep); }
.qc-lead { margin: 0; color: var(--ink-2); font-size: 16px; }
.qc-q { margin: 0; font-size: clamp(21px, 5.4vw, 27px); font-weight: 900; line-height: 1.25; }
.qc-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.a-card { border: 2px dashed var(--mist); box-shadow: none; }
.ac-mic { display: grid; justify-items: center; gap: 6px; padding: 4px 0; }
.ac-mic .mic { width: 78px; height: 78px; }
.ac-mic .mic-state { margin: 0; }
.ac-mic .interim:empty { display: none; }
.rs-wait { text-align: center; padding: 26px 0; font-weight: 800; color: var(--ink-2); }
.a-card.result { border-style: solid; border-width: 2px; }
.a-card.result.v-good { border-color: var(--good); background: var(--good-soft); }
.a-card.result.v-fix, .a-card.result.v-short, .a-card.result.v-offtopic { border-color: #F29E0C; background: #FFF6E0; }
.a-card.result.v-recognition { border-color: var(--canal, var(--accent)); background: var(--surface-2); }
.rs-head { display: flex; align-items: center; gap: 10px; font-size: 19px; }
.rs-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; flex: 0 0 auto; }
.v-good .rs-ic { color: var(--good); } .v-fix .rs-ic, .v-short .rs-ic, .v-offtopic .rs-ic { color: #D98500; }
.rs-k { display: block; font-size: 11px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.rs-said p { margin: 0; font-size: 17px; font-weight: 700; }
.rs-said .c-orig { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--bad) 60%, transparent); color: var(--ink-2); }
.rs-better { padding: 10px 12px; border-radius: 16px; background: #fff; border: 2px solid var(--good); }
.rs-better.soft { border-color: var(--mist); }
.rs-better .en { margin: 0; font-size: 19px; font-weight: 900; }
.rs-why { margin: 0; font-size: 15px; }
mark.added { background: color-mix(in srgb, var(--good) 28%, transparent); color: inherit; border-radius: 6px; padding: 0 3px; }
.rs-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rs-actions .btn { min-height: 50px; font-size: 17px; }
.tv-history { padding: 10px 14px; border-radius: 18px; background: var(--surface-2); }
.tv-history summary { font-weight: 800; cursor: pointer; }
.tv-hist-list { display: grid; gap: 6px; margin-top: 8px; }
.th-line { margin: 0; font-size: 14px; }
.th-v { display: inline-flex; vertical-align: middle; }
.th-v.v-good { color: var(--good); } .th-v.v-fix, .th-v.v-offtopic, .th-v.v-short { color: #D98500; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .a-card.result.v-fix, :root:not([data-theme="light"]) .a-card.result.v-short, :root:not([data-theme="light"]) .a-card.result.v-offtopic { background: #3A2E14; }
  :root:not([data-theme="light"]) .rs-better, :root:not([data-theme="light"]) .rs-ic { background: var(--surface); }
}
:root[data-theme="dark"] .a-card.result.v-fix, :root[data-theme="dark"] .a-card.result.v-short, :root[data-theme="dark"] .a-card.result.v-offtopic { background: #3A2E14; }
:root[data-theme="dark"] .rs-better, :root[data-theme="dark"] .rs-ic { background: var(--surface); }
.a-card { scroll-margin-top: 76px; }
@media (min-width: 900px) { .a-card { scroll-margin-top: 20px; } }
.rs-actions .btn-primary { flex: 1 1 100%; order: -1; }
.q-card .qc-q, .q-card .qc-lead { cursor: pointer; }

/* ---------- v2.0 · Nivel 0: dibujos, tarjetas de palabras y trucos ---------- */
.pic { display: block; color: var(--accent-deep, #0B8C80); }
.pic-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pic-options.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 420px) { .pic-options.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pic-option { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px 12px; min-height: 140px;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-lg, 18px); color: var(--ink); font: inherit; cursor: pointer; }
.pic-option:hover { border-color: var(--accent); }
.pic-option .w { font-weight: 900; font-size: 18px; }
.pic-option .m { font-size: 14px; color: var(--ink-3); }
.pic-option.correct { border-color: var(--accent); background: var(--accent-soft); }
.pic-option.wrong { border-color: var(--bad, #D2453B); background: var(--bad-soft, #FFE4E1); }
.pic-vocab { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.pic-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg, 18px); color: var(--ink); font: inherit; cursor: pointer; }
.pic-card .w { font-weight: 900; font-size: 19px; }
.pic-card .m { color: var(--ink-3); font-size: 14px; }
.tip-box { background: var(--sun-soft, #FFF4D1); color: var(--on-yellow, #1F2A44); border-radius: var(--r-md, 14px); padding: 14px 16px; }
.tip-box strong { display: block; margin-bottom: 4px; }
.goal-box { display: flex; gap: 10px; align-items: center; background: var(--accent-soft); color: var(--ink); border-radius: var(--r-md, 14px); padding: 12px 14px; }
.unit-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 14px 0 6px; flex-wrap: wrap; }
.unit-head h3 { margin: 0; font-size: 16px; }
.lesson-item.review .l-dot { background: var(--sun, #FFC83D); color: #3D2B00; }

/* ---------- v2.0 · menús distintos en teléfono y ordenador ---------- */
.bottomnav .nav-desk { display: none; }
@media (min-width: 900px) {
  .bottomnav .nav-phone { display: none; }
  .bottomnav .nav-desk { display: flex; }
}

/* ---------- v2.0 · Inicio en el teléfono («Hoy») ---------- */
.ph-home { display: flex; flex-direction: column; gap: 16px; }
.ph-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.ph-head h1 { margin: 0; font-size: 26px; }
.ph-date { margin: 0; }
.ph-week { background: var(--sun-soft, #FFF4D1); color: #6B4600; border-radius: 999px; padding: 6px 12px; font-weight: 900; font-size: 13px; white-space: nowrap; }
.ph-plan { background: #1F2A44; color: #FFFFFF; border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.ph-plan-top { display: flex; justify-content: space-between; align-items: baseline; }
.ph-plan-top h2 { margin: 0; font-size: 18px; color: #FFFFFF; }
.ph-plan-top span { color: #C9D2E3; font-weight: 700; font-size: 14px; }
.ph-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ph-steps li { display: flex; align-items: center; gap: 12px; background: #2C3A5C; border-radius: 14px; padding: 10px 12px; }
.ph-steps li.now { background: #FFFFFF; color: #1F2A44; }
.ph-step-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 2px solid #8C99B5; font-weight: 900; font-size: 14px; color: #C9D2E3; }
.ph-steps li.now .ph-step-ic { background: #FFC83D; border-color: #FFC83D; color: #3D2B00; }
.ph-steps li.now .ph-step-ic svg { width: 18px; height: 18px; }
.ph-steps strong { display: block; font-size: 15px; }
.ph-step-d { display: block; font-size: 13px; opacity: .8; }
.ph-step-m { font-size: 13px; opacity: .8; white-space: nowrap; }
.ph-plan-go { min-height: 52px; border: 0; border-radius: 14px; background: #FFC83D; color: #3D2B00; font: inherit; font-weight: 900; font-size: 17px; cursor: pointer; }
.ph-plan-go:disabled { opacity: .6; }
.ph-unit-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ph-unit-head h2 { margin: 0; font-size: 17px; }
.ph-path { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ph-path a { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); }
.ph-path strong { display: block; font-size: 15px; }
.ph-node { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--mist); color: var(--ink-3); }
.ph-path .done .ph-node { background: var(--accent-deep); color: #FFFFFF; }
.ph-path .now .ph-node { background: #FFC83D; color: #3D2B00; box-shadow: 0 0 0 4px var(--surface), 0 0 0 7px #FFC83D; }
.ph-path .todo { opacity: .8; }
@media (min-width: 900px) { .ph-home { max-width: 640px; } }

/* ---------- v2.0 · Inicio en el ordenador («Mi escritorio») ---------- */
.dk-home { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.dk-main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.dk-main h1 { margin: 0; font-size: 34px; }
.dk-date { margin: 0 0 2px; font-weight: 700; }
.dk-side { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.dk-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dk-row h2, .dk-h { margin: 0; font-size: 20px; }
.dk-session { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.dk-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.dk-step { border: 2px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.dk-step.now { border: 3px solid #FFC83D; background: var(--sun-soft, #FFF9E6); }
.dk-step-k { font-size: 12px; font-weight: 900; letter-spacing: .05em; color: var(--ink-3); }
.dk-step.now .dk-step-k { color: #6B4600; }
.dk-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 12px; }
.dk-track { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); padding: 16px; }
.dk-track.now { outline: 3px solid var(--accent); }
.dk-bar { height: 8px; border-radius: 999px; background: var(--mist); overflow: hidden; }
.dk-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.dk-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; text-align: center; font-size: 12px; font-weight: 800; color: var(--ink-3); }
.dk-days span { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dk-days i { width: 30px; height: 30px; border-radius: 8px; background: var(--mist); }
.dk-days .on i { background: var(--accent); }
.dk-days .today { color: var(--ink); }
.dk-link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.dk-link strong { display: block; }
.dk-keys { background: #1F2A44; color: #FFFFFF; display: flex; flex-direction: column; gap: 8px; }
.dk-keys .dk-h { color: #FFFFFF; }
.dk-keys p { display: flex; justify-content: space-between; margin: 0; font-size: 14px; color: #E6EAF2; }
kbd { border: 1px solid #C2CADA; border-bottom-width: 3px; border-radius: 6px; padding: 1px 7px; font: inherit; font-weight: 800; font-size: 13px; background: var(--surface); color: var(--ink); }

/* ---------- v2.0 · Lección en el ordenador: panel de ayuda ---------- */
.lesson-split { display: block; }
@media (min-width: 900px) {
  .lesson-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
  .lesson-split .footer-actions { position: static; }
}
.help-panel { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }
.help-k { font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.help-panel h3 { margin: 0; font-size: 16px; }
.hp-words { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.hp-words div { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; }
.hp-words dt { font-weight: 800; }
.hp-words dd { margin: 0; grid-column: 1; color: var(--ink-3); font-size: 14px; }
.hp-words .icon-btn { grid-row: 1 / span 2; grid-column: 2; width: 40px; height: 40px; }
.kbd-hint { margin-left: 12px; align-self: center; }

/* ---------- v2.0 · Mi diario ---------- */
.dy-layout { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.dy-write { flex: 999 1 460px; min-width: 0; }
.dy-past { flex: 1 1 280px; min-width: 0; }
.dy-past h2 { margin: 0; font-size: 18px; }
.dy-idea { background: var(--surface-2); border-radius: var(--r-md, 14px); padding: 12px 14px; }
.dy-area { min-height: 150px; font-size: 18px; line-height: 1.6; resize: vertical; }
.dy-result { margin-top: 14px; }
.dy-text { font-size: 19px; line-height: 1.6; }
.dy-praise { background: var(--accent-soft); color: var(--ink); border-radius: 12px; padding: 10px 12px; font-weight: 800; }
.dy-note { border-left: 4px solid var(--sun, #FFC83D); padding: 4px 0 4px 12px; }
.dy-note p { margin: 0 0 4px; }
.dy-before { text-decoration: line-through; color: var(--bad, #D2453B); }
.dy-after { font-weight: 800; color: var(--accent-deep); }
.dy-entry summary { cursor: pointer; }

/* ---------- v2.0 · Nota de pronunciación ---------- */
.pron-score { display: flex; align-items: center; gap: 14px; margin: 6px 0; flex-wrap: wrap; }
.pron-num { width: 76px; height: 76px; border-radius: 50%; border: 8px solid var(--accent); display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; box-sizing: border-box; }
.pron-num b { font-size: 24px; line-height: 1; }
.pron-num small { font-size: 11px; color: var(--ink-3); }
.pron-words { font-size: 19px; font-weight: 800; flex: 1 1 200px; }

/* ---------- v2.0 · Podcast ---------- */
.pc { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.pc-player { background: #1F2A44; color: #FFFFFF; border-radius: 24px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.pc-player h1 { margin: 0; font-size: 26px; color: #FFFFFF; }
.pc-k { margin: 0; font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #8FE3DA; }
.pc-es { margin: 0; color: #C9D2E3; }
.pc-play { width: 64px; height: 64px; border-radius: 50%; border: 0; background: #FFC83D; color: #3D2B00; display: grid; place-items: center; cursor: pointer; flex: none; }
.pc-play.on { background: #FFFFFF; }
.pc-bar { height: 6px; border-radius: 999px; background: #3A4A70; overflow: hidden; margin-bottom: 4px; }
.pc-bar i { display: block; height: 100%; width: 0; background: #FFC83D; transition: width .3s; }
.pc-ctrls { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pc-lines li { display: flex; gap: 10px; align-items: flex-start; background: var(--surface); border-radius: 14px; padding: 10px 12px; font-size: 18px; line-height: 1.5; }
.pc-lines li.now { background: var(--sun-soft, #FFF4D1); color: var(--on-yellow, #1F2A44); }
.pc-lines .en { display: block; }
.pc-tr { display: block; font-size: 15px; color: var(--ink-3); }
.pc-lines.hidden-text .en { filter: blur(6px); }
.pc-line-play { border: 0; background: transparent; color: var(--accent-deep); cursor: pointer; padding: 2px; flex: none; }
.pc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.pc-ep { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); }

/* ---------- v2.0 · Certificados ---------- */
.cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.cert-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cert { background: #FFFFFF; color: #1F2A44; border-radius: 18px; padding: 22px; margin-top: 12px; max-width: 900px; aspect-ratio: 1.414; box-sizing: border-box; }
.cert-in { border: 3px solid #0B7A70; border-radius: 14px; height: 100%; padding: 32px 40px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; box-sizing: border-box; }
.cert .brand { color: #1F2A44; }
.cert-k { margin: 6px 0 0; font-size: 13px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #4D5873; }
.cert-name { margin: 0; font-size: clamp(28px, 5vw, 44px); color: #1F2A44; }
.cert-text { max-width: 560px; font-size: 17px; line-height: 1.5; margin: 0; color: #1F2A44; }
.cert-can { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cert-can span { background: #D7F4F1; color: #08564F; font-weight: 800; font-size: 13px; padding: 6px 12px; border-radius: 999px; }
.cert-foot { margin-top: auto; width: 100%; display: flex; justify-content: space-between; gap: 16px; font-size: 12px; color: #4D5873; text-align: left; flex-wrap: wrap; }
.cert-foot span:last-child { text-align: right; max-width: 280px; }
@media print {
  body * { visibility: hidden !important; }
  .cert, .cert * { visibility: visible !important; }
  .cert { position: fixed; inset: 0; margin: 0; border-radius: 0; max-width: none; width: 100%; height: 100%; aspect-ratio: auto; }
  @page { size: A4 landscape; margin: 10mm; }
}

/* ---------- v2.0 · Mi grupo ---------- */
.grp-start { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.grp { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.grp-challenge { background: #1F2A44; color: #FFFFFF; border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.grp-k { font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #FFC83D; }
.grp-members { display: flex; flex-direction: column; }
.grp-m { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.grp-m:last-child { border-bottom: 0; }
.grp-m strong { display: block; }
.grp-m .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; font-weight: 900; flex: none; }
.grp-msgs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.grp-msgs li { background: var(--surface-2); border-radius: 14px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.grp-msgs li.mine { background: var(--accent-soft); }
.grp-msgs li.cheer { border-left: 4px solid var(--sun, #FFC83D); }

/* ---------- v2.0 · Modo niños ---------- */
.kids { min-height: 100vh; box-sizing: border-box; background: #FFF4D1; color: #1F2A44; padding: 20px 16px 40px; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.kids-top { width: 100%; max-width: 900px; display: flex; justify-content: space-between; align-items: center; }
.kids-top .btn { color: #1F2A44; }
.kids-brand { font-weight: 900; font-size: 22px; color: #A8471F; }
.kids-h { margin: 0; font-size: clamp(26px, 6vw, 40px); text-align: center; color: #1F2A44; }
.kids-profiles, .kids-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; width: 100%; max-width: 900px; }
.kid-card, .kid-game { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px; border-radius: 24px; background: #FFFFFF; color: #1F2A44; text-decoration: none; border: 0; font: inherit; cursor: pointer; box-shadow: 0 6px 0 rgba(31,42,68,.12); }
.kid-card strong, .kid-game strong { font-size: 20px; }
.kid-av { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; font-size: 32px; font-weight: 900; color: #FFFFFF; background: #FF7A59; }
.c-teal .kid-av { background: #0B8C80; } .c-sun .kid-av { background: #D9A21F; } .c-purple .kid-av { background: #8E4EC6; } .c-blue .kid-av { background: #2F7DE1; } .c-pink .kid-av { background: #E93D82; }
.kid-game-pic { height: 80px; display: grid; place-items: center; color: #0B7A70; }
.kid-num { font-weight: 900; font-size: 64px; color: #1F2A44; line-height: 1; }
.kids-add { width: 100%; max-width: 900px; background: #FFFFFF; border-radius: 20px; padding: 16px; box-sizing: border-box; }
.kids-add h2 { margin: 0 0 10px; font-size: 18px; }
.kid-play { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; max-width: 640px; }
.kid-dots { display: flex; gap: 8px; } .kid-dots i { width: 14px; height: 14px; border-radius: 50%; background: #E6D9A8; } .kid-dots i.on { background: #0B8C80; }
.kid-hear { width: 72px; height: 72px; border-radius: 50%; border: 0; background: #12B5A6; color: #10302D; display: grid; place-items: center; cursor: pointer; }
.kid-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; }
.kid-opt { min-height: 140px; border-radius: 24px; border: 4px solid transparent; background: #FFFFFF; display: grid; place-items: center; cursor: pointer; color: #0B7A70; box-shadow: 0 6px 0 rgba(31,42,68,.12); }
.kid-opt.right { border-color: #30A46C; background: #E6F6EC; }
.kid-opt.wrong { animation: kidshake .4s; border-color: #E5484D; }
@keyframes kidshake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { .kid-opt.wrong { animation: none; } }
.kid-stars { font-size: 56px; color: #F5A524; margin: 0; letter-spacing: 6px; }

/* ---------- v2.0 · botón de tema claro/oscuro ---------- */
button.corner-btn, button.icon-btn[data-theme-toggle] { font: inherit; font-weight: 900; cursor: pointer; border: 0; }