/* Caravana de Teclas — tema visual. Sin estilos en línea (la CSP los prohíbe). */
@font-face { font-family: 'Andika'; src: url('/assets/fonts/andika-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Andika'; src: url('/assets/fonts/andika-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'OpenDyslexic'; src: url('/assets/fonts/opendyslexic-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'OpenDyslexic'; src: url('/assets/fonts/opendyslexic-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --bg: #fff8ee;
  --bg2: #fdeed8;
  --ink: #3b2f2a;
  --ink-soft: #7a6a60;
  --card: #ffffff;
  --line: #ecd9c2;
  --primary: #e8744f;       /* naranja nutria */
  --primary-ink: #ffffff;
  --secondary: #4d9fa8;     /* agua del río */
  --good: #3f9a5a;
  --good-soft: #dff2e4;
  --hint: #f2b84b;
  --hint-soft: #fdf0d2;
  --soft: #b7a79a;
  --key-white: #fffdf9;
  --key-black: #2f2a28;
  --key-lit: #f2b84b;
  --radius: 22px;
  --font: 'Andika', 'Nunito', system-ui, sans-serif;
  --shadow: 0 4px 0 rgba(59, 47, 42, 0.12);
  color-scheme: light;
}
:root[data-font='dyslexia'] { --font: 'OpenDyslexic', 'Andika', sans-serif; }
:root[data-keys='menta'] { --key-lit: #7fd1b9; }
:root[data-keys='lavanda'] { --key-lit: #b9a3e3; }
:root[data-keys='cielo'] { --key-lit: #8cc7f0; }
:root[data-keys='sandia'] { --key-lit: #f39aa7; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior: none; }
#app { min-height: 100%; display: flex; flex-direction: column; }
button { font-family: inherit; }
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.15; }
h1 { font-size: clamp(28px, 4vw, 44px); }
h2 { font-size: clamp(22px, 3vw, 32px); }
p { line-height: 1.45; }
.big { font-size: clamp(24px, 3.2vw, 36px); }
.huge { font-size: clamp(40px, 7vw, 84px); font-weight: 700; }
.soft { color: var(--ink-soft); }
.center { text-align: center; }
.row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 16px; }
.grow { flex: 1; }
.spacer { flex: 1; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Botones: mínimo 64 px en lo que toca la niña */
.btn { min-height: 64px; min-width: 64px; padding: 12px 28px; border-radius: var(--radius); border: 0; background: var(--card); color: var(--ink);
  font-size: 22px; font-weight: 700; box-shadow: var(--shadow); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(59,47,42,.12); }
.btn.primary { background: var(--primary); color: var(--primary-ink); }
.btn.secondary { background: var(--secondary); color: #fff; }
.btn.ghost { background: transparent; box-shadow: none; border: 2px solid var(--line); }
.btn.huge-btn { min-height: 120px; padding: 20px 48px; font-size: 32px; border-radius: 40px; }
.btn.small { min-height: 48px; padding: 8px 18px; font-size: 18px; }
.btn[disabled] { opacity: .45; }
.btn:focus-visible, .choice:focus-visible, .key:focus-visible { outline: 4px solid var(--secondary); outline-offset: 3px; }

.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.screen { flex: 1; display: flex; flex-direction: column; padding: 16px 24px 24px; gap: 16px; max-width: 1400px; width: 100%; margin: 0 auto; }
.topbar { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.pill { background: var(--card); border-radius: 999px; padding: 8px 18px; font-weight: 700; font-size: 22px; box-shadow: var(--shadow); display: inline-flex; gap: 8px; align-items: center; }

/* Partes de la sesión */
.parts { display: flex; gap: 8px; align-items: center; }
.part { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--line); display: grid; place-items: center; font-weight: 700; font-size: 18px; background: var(--card); }
.part.done { background: var(--good); border-color: var(--good); color: #fff; }
.part.now { border-color: var(--primary); color: var(--primary); transform: scale(1.12); }

/* Estrellas */
.stars { display: inline-flex; gap: 6px; }
.star { width: 44px; height: 44px; }
.star.big { width: 88px; height: 88px; }
.star path { fill: var(--line); }
.star.on path { fill: var(--hint); }

/* Teclado en pantalla */
.keyboard { position: relative; height: clamp(120px, 22vh, 200px); user-select: none; touch-action: none; }
.keyboard .key { position: absolute; top: 0; border: 2px solid #d9c7b3; border-radius: 0 0 10px 10px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; font-weight: 700; font-size: 15px; cursor: pointer; }
.keyboard .white { background: var(--key-white); height: 100%; color: var(--ink-soft); z-index: 1; }
.keyboard .black { background: var(--key-black); height: 60%; z-index: 2; color: #fff; border-color: #1c1917; }
.keyboard .key.lit { background: var(--key-lit); }
.keyboard .key.down { filter: brightness(.85); }
.keyboard .key.good { background: var(--good); color: #fff; }
.keyboard .key.was { box-shadow: inset 0 0 0 5px var(--hint); }

/* Notación */
.notation { width: 100%; }
.notation svg { width: 100%; height: auto; max-height: 42vh; display: block; }
.n-head { fill: var(--card); stroke: var(--ink); stroke-width: 3; }
.n-head.ok { fill: var(--good-soft); stroke: var(--good); stroke-width: 5; }
.n-head.wrong { fill: var(--card); stroke: var(--hint); stroke-dasharray: 8 6; }
.n-head.missing { stroke: var(--soft); stroke-dasharray: 4 6; }
.n-head.now { stroke: var(--primary); stroke-width: 6; }
.n-text { fill: var(--ink); font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.n-small { fill: var(--ink-soft); text-anchor: middle; font-size: 22px; }
.n-stem { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.n-fill { fill: var(--ink); }
.n-line { stroke: var(--soft); stroke-width: 2; }
.n-check { stroke: var(--good); stroke-width: 6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.n-cursor { fill: var(--hint-soft); }

/* Avatar y rebote del pulso */
.avatar svg { width: 100%; height: 100%; }
.bounce { animation: bounce .28s ease-out; }
@keyframes bounce { 0% { transform: translateY(0); } 40% { transform: translateY(-14px); } 100% { transform: translateY(0); } }
.count-in { font-size: clamp(60px, 12vw, 140px); font-weight: 700; color: var(--primary); }
.pop { animation: pop .35s ease-out; }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.wiggle { animation: wiggle 1.2s ease-in-out infinite; }
@keyframes wiggle { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
:root[data-motion='reduce'] *, :root[data-motion='reduce'] *::before { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { :root:not([data-motion='full']) * { animation: none !important; transition: none !important; } }

/* Mapa */
.map { position: relative; flex: 1; background: var(--bg2); border-radius: 32px; overflow: hidden; }
.map svg { width: 100%; height: 100%; display: block; }
.lesson-dot { cursor: pointer; }

/* Opciones de juego */
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.choice { min-height: 150px; border-radius: 28px; border: 4px solid transparent; background: var(--card); box-shadow: var(--shadow); font-size: 26px; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: pointer; color: var(--ink); }
.choice svg { width: 80px; height: 80px; }
.choice.right { border-color: var(--good); background: var(--good-soft); }
.choice.try { border-color: var(--hint); }

/* Medidor de micrófono */
.meter { display: inline-flex; gap: 3px; align-items: flex-end; height: 26px; }
.meter i { width: 7px; background: var(--line); border-radius: 3px; }
.meter i.on { background: var(--secondary); }

/* Formularios (panel de papá) */
.form { display: grid; gap: 14px; max-width: 720px; }
.form label { display: grid; gap: 6px; font-weight: 700; }
input, select, textarea { font: inherit; font-size: 20px; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--line); background: #fff; color: var(--ink); min-height: 52px; }
input[type=checkbox] { width: 28px; height: 28px; min-height: 0; }
.check { display: flex !important; grid-template-columns: none; align-items: center; gap: 12px; font-weight: 400 !important; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab { padding: 10px 18px; border-radius: 14px; border: 2px solid var(--line); background: var(--card); font-weight: 700; font-size: 18px; cursor: pointer; min-height: 48px; }
.tab.on { background: var(--secondary); color: #fff; border-color: var(--secondary); }
table.data { border-collapse: collapse; width: 100%; font-size: 17px; }
table.data th, table.data td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.notice { background: var(--hint-soft); border-radius: 16px; padding: 14px 18px; }
.error { background: #fde3dc; border-radius: 16px; padding: 14px 18px; }
.ok-box { background: var(--good-soft); border-radius: 16px; padding: 14px 18px; }
.overlay { position: fixed; inset: 0; background: rgba(59,47,42,.55); display: grid; place-items: center; z-index: 50; padding: 20px; }
.overlay .card { max-width: 640px; width: 100%; }
.pin { display: flex; gap: 12px; justify-content: center; }
.pin input { width: 64px; text-align: center; font-size: 32px; }
.bars rect { fill: var(--secondary); }
.bars text { fill: var(--ink-soft); font-size: 12px; }
.grid-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.item { background: var(--card); border-radius: 20px; padding: 12px; text-align: center; box-shadow: var(--shadow); border: 3px solid transparent; cursor: pointer; }
.item.equipped { border-color: var(--good); }
.item > svg { width: 100%; height: 90px; }
.item .avatar { margin: 0 auto; }
.item[disabled] { opacity: .75; }
.sticker-slot { width: 120px; height: 120px; border-radius: 50%; border: 3px dashed var(--line); display: grid; place-items: center; text-align: center; font-size: 14px; padding: 8px; }
.sticker-slot.got { border: 0; background: var(--hint-soft); }
code, .mono { font-family: ui-monospace, Menlo, monospace; }

@media (orientation: portrait) and (max-width: 820px) { .screen { padding: 12px; } .btn { font-size: 20px; } }
.meter i:nth-child(1) { height: 6px; } .meter i:nth-child(2) { height: 10px; } .meter i:nth-child(3) { height: 14px; }
.meter i:nth-child(4) { height: 18px; } .meter i:nth-child(5) { height: 22px; } .meter i:nth-child(6) { height: 26px; }
progress { width: 100%; height: 18px; }
.col.center { align-items: center; }
.col.center > .card { align-self: stretch; }