/* Italiano per Tutti
   Concepto: cuaderno de obra italiano. Pared de yeso cálido, verde albahaca para avanzar,
   rojo pomodoro para fallos y corazones, ocre para XP y racha, azzurro para información.
   Botones "de máquina" con relieve que se hunden al pulsarlos. */

:root {
  --bg: #FAF5EC;
  --surface: #FFFFFF;
  --surface-2: #F2EADB;
  --line: #E5DACA;
  --ink: #2B211B;
  --ink-soft: #75675C;

  --basil: #23955F;       --basil-dark: #17703F;   --basil-tint: #DCF1E4;
  --pomodoro: #DB4433;    --pomodoro-dark: #A92E21; --pomodoro-tint: #FBE2DD;
  --ocra: #EBA21C;        --ocra-dark: #B97A06;     --ocra-tint: #FCEFCF;
  --azzurro: #2D7FC4;     --azzurro-dark: #1D5E97;  --azzurro-tint: #DDEBF8;
  --locked: #DDD4C6;      --locked-dark: #BFB3A2;
  --metal: #D7DCE2;       --metal-shade: #AEB6C0;
  --flame-core: #FFE08A;
  --basil-text: #17703F; --ocra-text: #96620A; --azzurro-text: #1D5E97; --pomodoro-text: #A92E21;

  --font-display: 'Baloo 2', 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r: 16px;
  --nav-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #18120F; --surface: #231B17; --surface-2: #2D241F; --line: #3B3029;
    --ink: #F5EEE6; --ink-soft: #B4A598;
    --basil: #2FB673; --basil-dark: #1D7C4B; --basil-tint: #173828;
    --pomodoro: #EF5A47; --pomodoro-dark: #A93526; --pomodoro-tint: #44211B;
    --ocra: #F2B23A; --ocra-dark: #A97810; --ocra-tint: #3E3117;
    --azzurro: #4B9BE0; --azzurro-dark: #2B6BA6; --azzurro-tint: #172F45;
    --locked: #3D342E; --locked-dark: #2A231F;
    --metal: #B9C0C9; --metal-shade: #8A939E; --flame-core: #FFE7A3;
    --basil-text: #5BD394; --ocra-text: #F6C562; --azzurro-text: #8CC2F2; --pomodoro-text: #FF8E7F;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #18120F; --surface: #231B17; --surface-2: #2D241F; --line: #3B3029;
  --ink: #F5EEE6; --ink-soft: #B4A598;
  --basil: #2FB673; --basil-dark: #1D7C4B; --basil-tint: #173828;
  --pomodoro: #EF5A47; --pomodoro-dark: #A93526; --pomodoro-tint: #44211B;
  --ocra: #F2B23A; --ocra-dark: #A97810; --ocra-tint: #3E3117;
  --azzurro: #4B9BE0; --azzurro-dark: #2B6BA6; --azzurro-tint: #172F45;
  --locked: #3D342E; --locked-dark: #2A231F;
  --metal: #B9C0C9; --metal-shade: #8A939E; --flame-core: #FFE7A3;
    --basil-text: #5BD394; --ocra-text: #F6C562; --azzurro-text: #8CC2F2; --pomodoro-text: #FF8E7F;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 600 16px/1.45 var(--font-body);
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}
body.in-lesson { overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--azzurro); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: 2rem; font-weight: 800; }
h2 { font-size: 1.45rem; font-weight: 800; }
h3 { font-size: 1.1rem; font-weight: 700; }
p { margin: 0; }
.muted { color: var(--ink-soft); }
.small { font-size: .85rem; }
.center { text-align: center; }
.eyebrow { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

.ico { display: inline-flex; width: 1.25em; height: 1.25em; flex: none; }
.ico svg { width: 100%; height: 100%; }

/* Tintes por color de unidad o personaje */
.tint-basil    { --c: var(--basil);    --c-dark: var(--basil-dark);    --c-tint: var(--basil-tint); }
.tint-pomodoro { --c: var(--pomodoro); --c-dark: var(--pomodoro-dark); --c-tint: var(--pomodoro-tint); }
.tint-ocra     { --c: var(--ocra);     --c-dark: var(--ocra-dark);     --c-tint: var(--ocra-tint); }
.tint-azzurro  { --c: var(--azzurro);  --c-dark: var(--azzurro-dark);  --c-tint: var(--azzurro-tint); }

/* ── Botones con relieve ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; padding: 0 22px; border-radius: var(--r);
  font: 800 1rem var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  transition: transform .06s, box-shadow .06s, filter .15s;
}
.btn:active:not(:disabled) { transform: translateY(4px); }
.btn-primary { background: var(--basil); color: #fff; box-shadow: 0 4px 0 var(--basil-dark); }
.btn-primary:active:not(:disabled) { box-shadow: 0 0 0 var(--basil-dark); }
.btn-danger { background: var(--pomodoro); color: #fff; box-shadow: 0 4px 0 var(--pomodoro-dark); }
.btn-ghost { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 2px var(--line) inset, 0 4px 0 var(--line); }
.btn-small { min-height: 40px; padding: 0 14px; font-size: .85rem; background: var(--ocra); color: #2B211B; box-shadow: 0 3px 0 var(--ocra-dark); }
.btn:disabled { background: var(--locked); color: var(--ink-soft); box-shadow: 0 4px 0 var(--locked-dark); }
.btn.wide { width: 100%; }
.btn-col { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.link-btn { color: var(--azzurro); font-weight: 800; padding: 10px; text-decoration: underline; text-underline-offset: 3px; }
.link-btn.danger, .btn-ghost.danger { color: var(--pomodoro); }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink-soft); border-radius: 12px; }
.icon-btn .ico { width: 28px; height: 28px; }

/* ── Estructura ── */
#app { min-height: 100%; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: var(--safe-t); z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 16px; background: var(--bg); border-bottom: 2px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand-name { font: 800 1.15rem var(--font-display); }
.flag, .ob-flag { display: inline-flex; width: 28px; height: 20px; border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 2px var(--line); }
.flag i, .ob-flag i { flex: 1; }
.flag i:nth-child(1), .ob-flag i:nth-child(1) { background: #1F9A54; }
.flag i:nth-child(2), .ob-flag i:nth-child(2) { background: #FFFFFF; }
.flag i:nth-child(3), .ob-flag i:nth-child(3) { background: #D8322A; }
.chips { display: flex; gap: 4px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.chip:active { background: var(--surface-2); }
.chip .ico { width: 22px; height: 22px; }
.chip-streak { color: var(--locked-dark); }
.chip-streak.lit { color: var(--ocra); }
.chip-hearts { color: var(--pomodoro); }
.chip-cornetti { color: var(--ocra-text); }
.cornetto { font-size: 1.1rem; line-height: 1; }

.main { flex: 1; padding: 16px 16px calc(var(--nav-h) + var(--safe-b) + 24px); width: 100%; max-width: 560px; margin: 0 auto; }
.screen { display: flex; flex-direction: column; gap: 20px; }

.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 6px 8px calc(6px + var(--safe-b)); background: var(--surface); border-top: 2px solid var(--line);
}
.nav-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 12px; color: var(--ink-soft); font-size: .72rem; font-weight: 800; letter-spacing: .03em; }
.nav-btn .ico { width: 26px; height: 26px; }
.nav-btn.on { color: var(--basil); background: var(--basil-tint); }
.badge { position: absolute; top: 2px; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--pomodoro); color: #fff; font-size: .7rem; line-height: 18px; text-align: center; }

/* ── Objetivo diario ── */
.goal { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 2px solid var(--line); border-radius: var(--r); background: var(--surface); }
.ring { position: relative; width: 64px; height: 64px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--surface-2); stroke-width: 8; }
.ring-fg { fill: none; stroke: var(--ocra); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset .6s; }
.ring-ico { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ocra); }
.ring-ico .ico { width: 26px; height: 26px; }
.goal-txt { min-width: 0; }
.goal-num { font: 700 1.25rem var(--font-display); font-variant-numeric: tabular-nums; }
.goal-num b { color: var(--ocra-text); }
.goal-sub { font-size: .85rem; color: var(--ink-soft); }

/* ── Unidades y camino ── */
.unit { display: flex; flex-direction: column; gap: 8px; }
.unit-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-radius: var(--r); background: var(--c); color: #fff; box-shadow: 0 4px 0 var(--c-dark); }
.unit-banner .eyebrow { color: rgba(255,255,255,.85); }
.unit-banner h2 { color: #fff; }
.unit-sub { font-size: .9rem; opacity: .92; }
.unit-txt { min-width: 0; }
.unit-card { border-radius: var(--r); overflow: hidden; background: var(--c); box-shadow: 0 4px 0 var(--c-dark); }
.unit-card .unit-banner { border-radius: 0; box-shadow: none; }
.unit-img { display: block; width: 100%; max-width: 100%; aspect-ratio: 3 / 1; object-fit: cover; background: var(--c-tint); }
.unit-banner.soon { background: var(--surface-2); color: var(--ink-soft); box-shadow: none; border: 2px dashed var(--line); }
.unit-banner.soon h2, .unit-banner.soon .eyebrow { color: var(--ink-soft); }
.guide-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; padding: 8px 10px; border-radius: 12px; border: 2px solid rgba(255,255,255,.45); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #fff; }
.guide-btn .ico { width: 22px; height: 22px; }
.soon-tag { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.soon-tag .ico { width: 18px; height: 18px; }

.path { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 26px 0 18px; }
.node-row { position: relative; transform: translateX(var(--x)); display: flex; flex-direction: column; align-items: center; }
.node-row:has(.callout) { margin-top: 34px; }
.node { width: 74px; height: 68px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--c); box-shadow: 0 7px 0 var(--c-dark); transition: transform .08s, box-shadow .08s; }
.node .ico { width: 34px; height: 34px; }
.node:active { transform: translateY(6px); box-shadow: 0 1px 0 var(--c-dark); }
.node.done { background: var(--ocra); box-shadow: 0 7px 0 var(--ocra-dark); }
.node.locked { background: var(--locked); color: var(--locked-dark); box-shadow: 0 7px 0 var(--locked-dark); }
.node.current { outline: 6px solid var(--c-tint); outline-offset: 4px; }
.node.checkpoint { width: 84px; height: 76px; }
.callout { position: absolute; bottom: calc(100% + 12px); padding: 6px 12px; border-radius: 12px; background: var(--surface); border: 2px solid var(--line); color: var(--basil); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; white-space: nowrap; animation: bob 1.6s ease-in-out infinite; }
.callout::after { content: ''; position: absolute; left: 50%; top: 100%; width: 12px; height: 12px; background: var(--surface); border: 2px solid var(--line); border-top: 0; border-left: 0; transform: translate(-50%, -6px) rotate(45deg); }
@keyframes bob { 50% { transform: translateY(-5px); } }
.path-moka { position: absolute; left: 2%; top: 120px; pointer-events: none; }
.foot-note { text-align: center; color: var(--ink-soft); font-size: .9rem; padding: 8px 0 0; }

/* ── Mascota y avatares ── */
.moka { flex: none; }
.moka svg { width: 100%; height: auto; display: block; overflow: visible; }
.moka-steam { animation: steam 2.4s ease-in-out infinite; }
@keyframes steam { 50% { transform: translateY(-4px); opacity: .25; } }
.avatar { width: var(--s); height: var(--s); flex: none; border-radius: 50%; display: grid; place-items: center; font-size: calc(var(--s) * .55); background: var(--c-tint); box-shadow: 0 0 0 2px var(--c) inset; }
.avatar { overflow: hidden; border: 2px solid var(--c); box-shadow: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.moka img { width: 100%; height: auto; display: block; }
.ob-char { width: 180px; height: 180px; max-width: 100%; }

/* ── Hojas inferiores ── */
.sheet-wrap { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; justify-content: flex-end; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(20, 12, 8, .45); animation: fade .2s; }
.sheet { position: relative; max-height: 88vh; overflow-y: auto; width: 100%; max-width: 560px; margin: 0 auto; padding: 8px 20px calc(24px + var(--safe-b)); background: var(--surface); border-radius: 22px 22px 0 0; animation: up .22s cubic-bezier(.2,.9,.3,1.1); display: flex; flex-direction: column; gap: 12px; }
.sheet > div:last-child { display: flex; flex-direction: column; gap: 12px; }
.sheet-grip { width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 6px; }
.sheet-wrap.closing .sheet { animation: down .2s forwards; }
.sheet-wrap.closing .sheet-backdrop { opacity: 0; transition: opacity .2s; }
@keyframes up { from { transform: translateY(100%); } }
@keyframes down { to { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }
.center-sheet { align-items: center; text-align: center; }
.lesson-sheet .btn { margin-top: 6px; }
.ls-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.ls-meta span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 10px; background: var(--surface-2); font-size: .85rem; font-weight: 800; }
.ls-meta .ico { color: var(--ocra); width: 18px; height: 18px; }
.locked-msg { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); }
.big-flame { width: 96px; height: 96px; color: var(--locked); }
.big-flame.lit { color: var(--ocra); }
.big-flame .ico { width: 100%; height: 100%; }
.hearts-row { display: flex; gap: 6px; }
.hrt { color: var(--locked); width: 40px; height: 40px; }
.hrt .ico { width: 100%; height: 100%; }
.hrt.full { color: var(--pomodoro); }

.shop-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px; border: 2px solid var(--line); border-radius: var(--r); }
.shop-item > div { display: flex; flex-direction: column; min-width: 0; }
.shop-item small { color: var(--ink-soft); font-weight: 600; }
.shop-item .owned { color: var(--azzurro); font-weight: 800; }
.shop-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; }
.shop-ico .ico { width: 28px; height: 28px; }
.shop-ico.freeze { background: var(--azzurro-tint); color: var(--azzurro); }
.shop-ico.hearts { background: var(--pomodoro-tint); color: var(--pomodoro); }

.guide h3 { margin-top: 8px; }
.vocab { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vocab-row { width: 100%; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "e it s" "e es s"; align-items: center; column-gap: 10px; padding: 8px 10px; border-radius: 12px; text-align: left; background: var(--surface-2); }
.vocab-row .v-emoji { grid-area: e; font-size: 1.4rem; }
.vocab-row .v-it { grid-area: it; font-weight: 800; }
.vocab-row .v-es { grid-area: es; color: var(--ink-soft); font-size: .88rem; }
.vocab-row .ico { grid-area: s; color: var(--azzurro); }
.guide-tip { padding: 12px 14px; border-radius: 12px; background: var(--ocra-tint); }
.guide-tip p { font-weight: 500; margin-top: 4px; }

/* ── Pantallas: ripasso, lega, profilo ── */
.empty { align-items: center; text-align: center; padding-top: 40px; }
.panel { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 2px solid var(--line); border-radius: var(--r); background: var(--surface); }
.review-hero { display: flex; align-items: center; gap: 16px; }
.review-hero > div:last-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; height: 150px; }
.box-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.box-n { font-weight: 800; font-variant-numeric: tabular-nums; font-size: .9rem; }
.box-bar { flex: 1; width: 100%; max-width: 34px; display: flex; align-items: flex-end; background: var(--surface-2); border-radius: 8px; overflow: hidden; }
.box-bar i { width: 100%; border-radius: 8px 8px 0 0; }
.box-bar .b0 { background: var(--pomodoro); }
.box-bar .b1, .box-bar .b2 { background: var(--ocra); }
.box-bar .b3, .box-bar .b4 { background: var(--azzurro); }
.box-bar .b5 { background: var(--basil); }
.box-l { font-size: .66rem; color: var(--ink-soft); text-align: center; line-height: 1.1; min-height: 2.2em; }

.league-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.shield { width: 84px; height: 84px; border-radius: 26px; display: grid; place-items: center; color: #fff; background: #B77A45; box-shadow: 0 5px 0 #8A5630; }
.shield .ico { width: 46px; height: 46px; }
.tier-1 .shield { background: #9AA5B1; box-shadow: 0 5px 0 #6E7A86; }
.tier-2 .shield { background: var(--ocra); box-shadow: 0 5px 0 var(--ocra-dark); }
.tier-3 .shield { background: var(--azzurro); box-shadow: 0 5px 0 var(--azzurro-dark); }
.tier-4 .shield { background: var(--pomodoro); box-shadow: 0 5px 0 var(--pomodoro-dark); }
.tier-5 .shield { background: var(--basil); box-shadow: 0 5px 0 var(--basil-dark); }
.tier-6 .shield { background: #7C6FD6; box-shadow: 0 5px 0 #564AA8; }
.league { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.l-row { display: grid; grid-template-columns: 28px 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; }
.l-row.me { background: var(--basil-tint); box-shadow: 0 0 0 2px var(--basil) inset; }
.l-rank { font-weight: 800; text-align: center; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.l-rank.top { color: var(--ocra-text); }
.l-ava { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-weight: 800; }
.l-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-xp { font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.zone { font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-align: center; padding: 4px; }
.zone.up { color: var(--basil); border-top: 2px dashed var(--basil); }
.zone.down { color: var(--pomodoro); border-top: 2px dashed var(--pomodoro); }

.profile-head { display: flex; align-items: center; gap: 16px; }
.profile-head > div:last-child { min-width: 0; }
.p-ava { width: 76px; height: 76px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 800 2.2rem var(--font-display); color: #fff; background: var(--azzurro); box-shadow: 0 4px 0 var(--azzurro-dark); }
.stats, .sum-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sum-stats { grid-template-columns: repeat(3, 1fr); width: 100%; }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 2px solid var(--line); border-radius: var(--r); background: var(--surface); min-width: 0; }
.stat-top { display: flex; align-items: center; gap: 6px; }
.stat-top .ico { width: 22px; height: 22px; }
.stat-val { font: 800 1.35rem var(--font-display); font-variant-numeric: tabular-nums; }
.stat-lbl { font-size: .78rem; color: var(--ink-soft); font-weight: 700; }
.s-streak .ico, .s-xp .ico { color: var(--ocra); }
.s-best .ico { color: var(--ocra-text); }
.s-words .ico { color: var(--azzurro); }
.s-acc .ico { color: var(--basil); }
.sum-stats .s-xp { border-color: var(--ocra); }
.sum-stats .s-acc { border-color: var(--basil); }
.sum-stats .s-time { border-color: var(--azzurro); }

.week { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 140px; }
.wk-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wk-n { font-size: .72rem; font-weight: 800; color: var(--ink-soft); height: 1em; font-variant-numeric: tabular-nums; }
.wk-bar { flex: 1; width: 100%; max-width: 30px; display: flex; align-items: flex-end; background: var(--surface-2); border-radius: 8px; overflow: hidden; }
.wk-bar i { width: 100%; background: var(--ocra); border-radius: 8px 8px 0 0; }
.wk-bar i.met { background: var(--basil); }
.wk-d { font-size: .75rem; font-weight: 800; color: var(--ink-soft); }
.wk-goal { display: none; }

.ach { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ach-item { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 12px; background: var(--surface-2); opacity: .55; filter: grayscale(1); }
.ach-item.got { opacity: 1; filter: none; background: var(--ocra-tint); }
.ach-ico { font-size: 1.6rem; }
.ach-item b { font-size: .88rem; line-height: 1.2; }
.ach-item small { font-size: .75rem; color: var(--ink-soft); font-weight: 600; }

.field { display: flex; flex-direction: column; gap: 6px; font-weight: 800; font-size: .9rem; }
.field input, .field select { font: 600 1rem var(--font-body); color: var(--ink); background: var(--surface-2); border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.toggle { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; cursor: pointer; }
.toggle > span { display: flex; flex-direction: column; min-width: 0; }
.toggle small { color: var(--ink-soft); font-weight: 600; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle .sw { flex: none; width: 50px; height: 30px; border-radius: 15px; background: var(--locked); position: relative; transition: background .2s; }
.toggle .sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.toggle input:checked + .sw { background: var(--basil); }
.toggle input:checked + .sw::after { transform: translateX(20px); }
.toggle input:focus-visible + .sw { outline: 3px solid var(--azzurro); outline-offset: 2px; }

.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + var(--safe-b) + 16px); transform: translateX(-50%); z-index: 90; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 14px; background: var(--ink); color: var(--bg); font-weight: 800; animation: up .25s; transition: opacity .3s; }
.toast.out { opacity: 0; }

/* ── Lección ── */
#overlay:empty { display: none; }
#overlay { position: fixed; inset: 0; z-index: 40; background: var(--bg); }
.lesson { height: 100%; display: flex; flex-direction: column; max-width: 640px; margin: 0 auto; padding-top: var(--safe-t); }
.l-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px 6px; }
.bar { flex: 1; height: 16px; border-radius: 8px; background: var(--surface-2); overflow: hidden; }
.bar-fill { display: block; height: 100%; width: 0; border-radius: 8px; background: var(--basil); box-shadow: inset 0 -4px 0 rgba(0,0,0,.12), inset 0 4px 0 rgba(255,255,255,.3); transition: width .45s cubic-bezier(.3,1.4,.5,1); }
.l-hearts { min-width: 48px; display: flex; justify-content: flex-end; }
.l-h { display: inline-flex; align-items: center; gap: 4px; color: var(--pomodoro); font-weight: 800; font-variant-numeric: tabular-nums; }
.l-h .ico { width: 26px; height: 26px; }
.rev-tag { font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--azzurro); }
.l-stage { flex: 1; overflow-y: auto; padding: 12px 16px 24px; }
.ex-wrap { display: flex; flex-direction: column; gap: 10px; animation: slidein .28s ease-out; }
@keyframes slidein { from { opacity: 0; transform: translateX(24px); } }
.ex-wrap.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.retry-tag { align-self: flex-start; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pomodoro); }
.ex { display: flex; flex-direction: column; gap: 18px; }
.ex-title { font-size: 1.4rem; }
.hint { color: var(--ink-soft); font-weight: 600; }
.note { padding: 12px 14px; border-radius: 12px; background: var(--azzurro-tint); font-weight: 600; }

.l-foot { border-top: 2px solid var(--line); padding: 14px 16px calc(14px + var(--safe-b)); display: flex; flex-direction: column; gap: 12px; background: var(--bg); transition: background .2s; }
.l-foot.ok { background: var(--basil-tint); border-color: transparent; }
.l-foot.bad { background: var(--pomodoro-tint); border-color: transparent; }
.l-foot.ok .btn { background: var(--basil); box-shadow: 0 4px 0 var(--basil-dark); color: #fff; }
.l-foot.bad .btn { background: var(--pomodoro); box-shadow: 0 4px 0 var(--pomodoro-dark); color: #fff; }
.feedback { display: flex; flex-direction: column; gap: 4px; animation: up .2s; }
.fb-head { display: flex; align-items: center; gap: 10px; font: 800 1.3rem var(--font-display); }
.ok .fb-head { color: var(--basil-text); }
.bad .fb-head { color: var(--pomodoro-text); }
.fb-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.ok .fb-ico { background: var(--basil); }
.bad .fb-ico { background: var(--pomodoro); }
.fb-sol { font-weight: 800; font-size: 1.05rem; }
.bad .fb-sol { color: var(--pomodoro-text); }
.fb-note { color: var(--ink); font-weight: 600; opacity: .85; }

/* Escena con personaje */
.scene { display: flex; align-items: flex-end; gap: 10px; }
.bubble { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px 12px 40px; border: 2px solid var(--line); border-radius: 16px; background: var(--surface); text-align: left; min-width: 0; }
.bubble.static { padding-left: 14px; }
.bubble::before { content: ''; position: absolute; left: -9px; bottom: 14px; width: 14px; height: 14px; background: var(--surface); border-left: 2px solid var(--line); border-bottom: 2px solid var(--line); transform: rotate(45deg); }
.bubble-ico { position: absolute; left: 12px; top: 13px; color: var(--azzurro); width: 20px; height: 20px; }
.bubble .it { font-weight: 800; font-size: 1.1rem; text-decoration: underline dotted var(--ink-soft); text-underline-offset: 5px; }
.bubble.static .it { text-decoration: none; }
.bubble .es { color: var(--ink-soft); font-size: .9rem; }

/* Opciones */
.opts { display: flex; flex-direction: column; gap: 10px; }
.opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; text-align: left; border: 2px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: 0 3px 0 var(--line); font-weight: 700; font-size: 1.05rem; transition: transform .06s; }
.opt:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.opt.sel { border-color: var(--azzurro); background: var(--azzurro-tint); box-shadow: 0 3px 0 var(--azzurro); color: var(--azzurro-text); }
.opt-key { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; border: 2px solid var(--line); font-size: .8rem; color: var(--ink-soft); }
.opt.sel .opt-key { border-color: var(--azzurro); color: var(--azzurro); }
.opt-text { min-width: 0; }
.goal-opt { justify-content: space-between; }
.goal-opt span { color: var(--ink-soft); font-weight: 700; font-size: .9rem; }

/* Palabra nueva */
.card-new { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 16px 18px; border: 2px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: 0 5px 0 var(--line); text-align: center; }
.emoji-xl { font-size: 4.2rem; line-height: 1.1; }
.word-it { font: 800 2rem var(--font-display); color: var(--basil-text); line-height: 1.1; }
.word-es { color: var(--ink-soft); font-size: 1.1rem; }

.audio-btns { display: flex; gap: 10px; justify-content: center; }
.btn-audio { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--azzurro); color: #fff; box-shadow: 0 4px 0 var(--azzurro-dark); }
.btn-audio .ico { width: 28px; height: 28px; }
.btn-audio.slow { width: 44px; height: 44px; align-self: flex-end; }
.btn-audio:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--azzurro-dark); }
.audio-btns.big { padding: 16px 0; }
.audio-btns.big .btn-audio { width: 96px; height: 96px; border-radius: 26px; }
.audio-btns.big .btn-audio .ico { width: 48px; height: 48px; }
.audio-btns.big .btn-audio.slow { width: 64px; height: 64px; border-radius: 20px; }
.audio-btns.big .btn-audio.slow .ico { width: 34px; height: 34px; }

/* Consejo */
.ex-tip .tip-head { display: flex; align-items: center; gap: 12px; }
.tip-text { font-size: 1.1rem; font-weight: 600; line-height: 1.55; padding: 16px; border-radius: 16px; background: var(--ocra-tint); }

/* Completar frase */
.fill-sentence { font-size: 1.3rem; font-weight: 700; line-height: 2; }
.slot { display: inline-block; min-width: 90px; padding: 0 10px; margin: 0 4px; border-bottom: 3px solid var(--ink-soft); text-align: center; line-height: 1.5; }
.slot.filled { border-color: var(--azzurro); color: var(--azzurro-text); background: var(--azzurro-tint); border-radius: 8px 8px 0 0; }

/* Construir frase */
.build-line { min-height: 116px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; padding: 10px 0; background: repeating-linear-gradient(to bottom, transparent 0 55px, var(--line) 55px 57px); }
.build-bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tile { padding: 8px 14px; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 3px 0 var(--line); font-weight: 700; font-size: 1.05rem; }
.tile.ghost { color: transparent; background: var(--surface-2); box-shadow: none; }
.tile:active:not(:disabled) { transform: translateY(2px); }

/* Emparejar */
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.m-item { min-height: 58px; padding: 8px 10px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 3px 0 var(--line); font-weight: 700; font-size: .98rem; transition: opacity .3s, transform .06s; }
.m-item.it { font-weight: 800; }
.m-item.sel { border-color: var(--azzurro); background: var(--azzurro-tint); box-shadow: 0 3px 0 var(--azzurro); }
.m-item.ok { border-color: var(--basil); background: var(--basil-tint); box-shadow: none; opacity: .45; }
.m-item.bad { border-color: var(--pomodoro); background: var(--pomodoro-tint); animation: shake .4s; }

/* Escribir */
.answer-input { width: 100%; resize: none; font: 700 1.15rem var(--font-body); color: var(--ink); background: var(--surface); border: 2px solid var(--line); border-radius: var(--r); padding: 14px; }
.answer-input:focus { outline: none; border-color: var(--azzurro); }
.answer-input:disabled { opacity: .8; }

/* Hablar */
.speak-zone { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; text-align: center; }
.btn-mic { width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--azzurro); box-shadow: 0 6px 0 var(--azzurro-dark); }
.btn-mic .ico { width: 50px; height: 50px; }
.btn-mic.rec { background: var(--pomodoro); box-shadow: 0 6px 0 var(--pomodoro-dark); animation: pulse 1s infinite; }
@keyframes pulse { 50% { transform: scale(1.06); } }
.speak-status { color: var(--ink-soft); }
.speak-heard { font-weight: 800; min-height: 1.4em; }
.ex-speak .link-btn { align-self: center; }

/* Diálogo */
.chat { display: flex; flex-direction: column; gap: 10px; }
.chat-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-row.me { justify-content: flex-end; }
.chat-row.hero { align-items: center; }
.bust-box { display: flex; flex-direction: column; align-items: center; flex: none; width: 104px; }
.bust { width: 104px; height: 104px; display: block; }
.bust-name { margin-top: -4px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.chat-row.old { opacity: .6; }
.chat-bubble { display: flex; flex-direction: column; gap: 2px; max-width: 80%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--surface); border: 2px solid var(--line); text-align: left; }
.chat-row.me .chat-bubble { border-radius: 16px 16px 4px 16px; background: var(--basil-tint); border-color: transparent; }
.chat-bubble .it { font-weight: 800; }
.chat-bubble .es { font-size: .88rem; color: var(--ink-soft); }

/* ── Pantallas completas: resumen, sin corazones, onboarding ── */
.full-screen { position: relative; height: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: calc(24px + var(--safe-t)) 20px calc(24px + var(--safe-b)); text-align: center; overflow-y: auto; }
.summary h1 { color: var(--ocra-text); }
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.sum-extra { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.sum-line { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; }
.flame-line { color: var(--ocra-text); font-size: 1.15rem; }
.flame-line .ico { width: 28px; height: 28px; color: var(--ocra); }
.goal-line { color: var(--basil-text); }
.sum-ach { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border-radius: 14px; background: var(--ocra-tint); text-align: left; }
.sum-ach > span { font-size: 1.8rem; }
.sum-ach div { display: flex; flex-direction: column; }
.sum-ach small { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); font-weight: 800; }

.onboarding { justify-content: space-between; }
.ob-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; width: 100%; }
.ob-body .opts { width: 100%; }
.ob-flag { width: 54px; height: 36px; border-radius: 8px; }
.ob-title { font-size: 2.8rem; line-height: .95; }
.ob-title em { font-style: normal; color: var(--basil); }
.ob-lead { font-size: 1.05rem; max-width: 34ch; }
.big-input { width: 100%; font: 800 1.4rem var(--font-body); text-align: center; color: var(--ink); background: var(--surface); border: 2px solid var(--line); border-radius: var(--r); padding: 14px; }
.big-input:focus { outline: none; border-color: var(--azzurro); }
.ob-bubble { align-items: center; text-align: center; }
.ob-bubble::before { left: 50%; top: -9px; bottom: auto; transform: translateX(-50%) rotate(135deg); }

@media (min-width: 700px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Sincronización */
.sync-status { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.sync-status i { width: 10px; height: 10px; border-radius: 50%; background: var(--locked-dark); flex: none; }
.sync-status.ok i { background: var(--basil); }
.sync-status.offline i { background: var(--ocra); }
.sync-status.denied i { background: var(--pomodoro); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.btn-sm { min-height: 42px; padding: 0 16px; font-size: .85rem; }