:root{
  --bg:#E8EDE7; --surface:#F7F9F5; --ink:#1C2A23; --muted:#56655C; --line:#C6D0C8;
  --brass:#9A6B1C; --brass-soft:#F1E3C4; --on-brass:#FFFFFF;
  --good:#23794A; --good-soft:#D5EDDD; --warn:#A8670F; --bad:#B23A3A;
  --white-key:#FCFCF8; --black-key:#1F2622; --key-edge:#98A69C; --key-label:#56655C;
  --sung-plain:#4E6B5C;
  color-scheme: light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#101814; --surface:#18231D; --ink:#E6ECE7; --muted:#9DAEA3; --line:#2E3D34;
    --brass:#D9A84A; --brass-soft:#3A2F18; --on-brass:#1B1305;
    --good:#52C483; --good-soft:#173826; --warn:#E3A93B; --bad:#EE6B6B;
    --white-key:#DDE3DD; --black-key:#080B09; --key-edge:#55635A; --key-label:#3A4740;
    --sung-plain:#5A7A68;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#101814; --surface:#18231D; --ink:#E6ECE7; --muted:#9DAEA3; --line:#2E3D34;
  --brass:#D9A84A; --brass-soft:#3A2F18; --on-brass:#1B1305;
  --good:#52C483; --good-soft:#173826; --warn:#E3A93B; --bad:#EE6B6B;
  --white-key:#DDE3DD; --black-key:#080B09; --key-edge:#55635A; --key-label:#3A4740;
  --sung-plain:#5A7A68;
  color-scheme: dark;
}
*,*::before,*::after{box-sizing:border-box}
/* manipulation: pan + pinch OK, sin zoom por doble toque (iPhone / Chrome iOS) */
html{scroll-padding-top:env(safe-area-inset-top,0px);touch-action:manipulation}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.45;-webkit-text-size-adjust:100%;touch-action:manipulation}
.wrap{max-width:760px;margin:0 auto;padding:14px 16px 48px;touch-action:manipulation}
.brand h1{font-family:"Alegreya",Georgia,"Times New Roman",serif;font-weight:800;font-size:2rem;line-height:1.1;margin:6px 0 2px}
.brand p{margin:0 0 14px;color:var(--muted)}
button,select,input,summary{font:inherit;color:inherit;touch-action:manipulation;
  user-select:none;-webkit-user-select:none;-moz-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--brass);outline-offset:2px}

.readout{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:16px 16px 18px;display:grid;gap:12px;touch-action:manipulation;
  user-select:none;-webkit-user-select:none;-moz-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.toprow{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.note-big{font-family:"Alegreya",Georgia,serif;font-weight:800;font-size:clamp(4rem,21vw,6.6rem);line-height:.88;display:flex;align-items:baseline;gap:.06em;transition:color .12s}
.note-big small{font-size:.4em;color:var(--muted);font-weight:700}
.note-big.good{color:var(--good)} .note-big.warn{color:var(--warn)} .note-big.bad{color:var(--bad)}
.note-big.idle{color:var(--line)}
.targetbox{text-align:right;min-width:7.5rem}
.targetbox .lbl{font-size:.85rem;color:var(--muted)}
.targetbox .val{font-family:"Alegreya",Georgia,serif;font-weight:800;font-size:2.1rem;line-height:1;color:var(--brass)}
.targetbox .hz{font-size:.85rem;color:var(--muted);margin-top:4px;min-height:1.2em}
.meter{position:relative;height:36px;border-radius:12px;background:var(--bg);border:1px solid var(--line);overflow:hidden;transition:opacity .2s}
.meter .zone{position:absolute;top:0;bottom:0;left:40%;width:20%;background:var(--good-soft)}
.meter .mid{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:var(--muted);opacity:.5}
.meter .needle{position:absolute;top:3px;bottom:3px;width:6px;margin-left:-3px;left:50%;border-radius:3px;background:var(--muted);transition:left .08s linear,background .12s;opacity:0}
.meter .needle.on{opacity:1}
.meter .needle.good{background:var(--good)} .meter .needle.warn{background:var(--warn)} .meter .needle.bad{background:var(--bad)}
.meter-labels{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);margin-top:-6px;transition:opacity .2s}
.readout.deferred-live .meter,
.readout.deferred-live .meter-labels{opacity:.35}
.verdict{font-size:1.2rem;font-weight:700;min-height:1.8em}
.verdict.good{color:var(--good)} .verdict.warn{color:var(--warn)} .verdict.bad{color:var(--bad)}
.dock{margin:4px 0 0;touch-action:manipulation}
.mic{appearance:none;border:0;border-radius:999px;background:var(--brass);color:var(--on-brass);font-weight:700;font-size:1.1rem;padding:14px 20px;cursor:pointer;width:100%;min-height:52px;position:relative;touch-action:manipulation}
.mic.listening{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--brass)}
.mic.listening::before{
  content:"";position:absolute;left:18px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;
  background:var(--good);box-shadow:0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent);
  animation:mic-pulse 1.6s ease-out infinite;
}
@keyframes mic-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--good) 50%, transparent)}
  70%{box-shadow:0 0 0 12px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
.msg{margin:8px 0 0;color:var(--bad);font-size:.95rem}
.msg:empty{display:none;margin:0}
.panel-lead{margin:0 0 10px;max-width:62ch}

.kb-wrap{overflow-x:auto;overflow-y:hidden;margin:14px -16px 0;padding:0 16px 6px;-webkit-overflow-scrolling:touch;
  /* pan-x: scroll horizontal del teclado; sin double-tap zoom */
  touch-action:pan-x;
  user-select:none;-webkit-user-select:none;-moz-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.kb{position:relative;height:156px;touch-action:pan-x;
  user-select:none;-webkit-user-select:none;-moz-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.key,.key *{user-select:none;-webkit-user-select:none;-moz-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.key{position:absolute;top:0;cursor:pointer;touch-action:none}
.key::selection,.key *::selection{background:transparent;color:inherit}
.wk{width:42px;height:156px;background:var(--white-key);border:1px solid var(--key-edge);border-radius:0 0 8px 8px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:7px;font-size:.74rem;color:var(--key-label);font-weight:700}
.wk > span::before{content:attr(data-n)}
.wk .oct{font-size:.68rem;font-weight:400}
.bk{width:26px;height:96px;background:var(--black-key);border-radius:0 0 6px 6px;z-index:2;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.key.target::after{content:"";position:absolute;left:5px;right:5px;bottom:30px;height:8px;border-radius:4px;background:var(--brass)}
.bk.target::after{bottom:10px;left:4px;right:4px}
.key.pressed{background:var(--brass-soft)}
.bk.pressed{background:var(--brass)}
.key.sung{color:#fff}
.key.sung.good{background:var(--good)} .key.sung.warn{background:var(--warn)} .key.sung.bad{background:var(--bad)} .key.sung.plain{background:var(--sung-plain)}

/* Guía al escuchar con órgano: línea / ahora / siguiente / misma */
.key.guide-line:not(.guide-now):not(.guide-next){box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--brass) 45%, transparent)}
.wk.guide-line:not(.guide-now):not(.guide-next){background:color-mix(in srgb, var(--brass-soft) 55%, var(--white-key))}
.bk.guide-line:not(.guide-now):not(.guide-next){background:color-mix(in srgb, var(--brass) 35%, var(--black-key))}
.key.guide-next{z-index:3}
.wk.guide-next{background:var(--good-soft);color:var(--good);box-shadow:inset 0 0 0 2px var(--good)}
.bk.guide-next{background:color-mix(in srgb, var(--good) 70%, var(--black-key));box-shadow:inset 0 0 0 2px var(--good)}
.key.guide-now{z-index:4;color:var(--on-brass)}
.wk.guide-now{background:var(--brass)}
.bk.guide-now{background:var(--brass)}
.key.guide-same{animation:guide-pulse 1s ease-in-out infinite}
.guide-badge{position:absolute;left:50%;transform:translateX(-50%);top:6px;z-index:5;font-size:.62rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;background:var(--ink);color:var(--surface);padding:2px 5px;border-radius:6px;pointer-events:none;white-space:nowrap;line-height:1.2}
.bk .guide-badge{top:4px;font-size:.55rem;padding:2px 3px}
@keyframes guide-pulse{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.18)}
}
@media (prefers-reduced-motion: reduce){.key.guide-same{animation:none}}

.trace-box{margin-top:10px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:8px;
  /* Solo lectura: el scroll de la página debe pasar; sin zoom por doble toque */
  touch-action:manipulation;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;transition:opacity .2s}
/* pointer-events:none → el dedo no “engancha” el canvas (era touch-action:none y bloqueaba el scroll) */
canvas#trace{display:block;width:100%;height:170px;touch-action:manipulation;pointer-events:none;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.trace-cap{font-size:.82rem;color:var(--muted);margin:2px 4px 0;touch-action:manipulation;
  user-select:none;-webkit-user-select:none}
.trace-box.deferred{opacity:.4}
.trace-box.deferred canvas{visibility:hidden;height:48px}
.trace-box.deferred .trace-cap{font-weight:700;color:var(--ink)}

.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:4px;touch-action:manipulation;
  user-select:none;-webkit-user-select:none;-moz-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.tabs button{appearance:none;border:0;background:transparent;border-radius:10px;padding:12px 4px;font-weight:700;cursor:pointer;color:var(--muted);min-height:44px;touch-action:manipulation;
  user-select:none;-webkit-user-select:none;-moz-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.tabs button::selection{background:transparent;color:inherit}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--surface)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:16px;margin-top:10px;content-visibility:auto;contain-intrinsic-size:auto 280px}
.panel h2{font-family:"Alegreya",Georgia,serif;font-size:1.5rem;margin:0 0 6px;line-height:1.15}
.panel p{margin:0 0 10px;max-width:62ch}
.muted{color:var(--muted)}
.field{display:grid;gap:4px;margin-bottom:10px}
.field label{font-size:.9rem;color:var(--muted)}
select{width:100%;padding:11px 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg);min-height:44px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row[hidden],#afterRow[hidden],#exSel[hidden],#songSel[hidden]{display:none!important}
.after-row{margin-top:12px}
.tono{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.tono .val{flex:1;text-align:center;font-weight:700}
.btn{appearance:none;border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:11px 14px;font-weight:700;cursor:pointer;min-height:44px;touch-action:manipulation}
.btn.sq{width:48px;padding:11px 0;font-size:1.2rem}
.btn.primary{background:var(--brass);border-color:var(--brass);color:var(--on-brass)}
.btn.ghost{background:transparent;width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 4px}
.actions.secondary{grid-template-columns:1fr;margin-top:0;margin-bottom:8px}
.stepnav{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0}
.stepnav[hidden]{display:none}
body.practicing .actions:not(.secondary) .btn.primary{box-shadow:0 0 0 2px var(--brass-soft)}
input[type=range]{width:100%;accent-color:var(--brass);min-height:28px}
.status{font-weight:700;margin:6px 0 10px}
.status:empty{display:none;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{appearance:none;min-width:54px;min-height:44px;padding:8px 6px;border-radius:10px;border:1px solid var(--line);background:var(--bg);text-align:center;font-weight:700;font-size:.95rem;cursor:pointer;touch-action:manipulation}
.chip.done{background:var(--good-soft);color:var(--good);border-color:var(--good)}
.chip.current{background:var(--brass-soft);border-color:var(--brass);box-shadow:0 0 0 2px var(--brass)}
.chip.coming{border-color:var(--good);color:var(--good);background:var(--good-soft)}
.br{flex-basis:100%;height:0}
.summary{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.summary[hidden],.history[hidden]{display:none!important}
.summary h3,.history h3{font-family:"Alegreya",Georgia,serif;font-size:1.2rem;margin:0 0 6px}
.sum-head{margin:0 0 8px;color:var(--muted);font-size:.95rem}
.sum-list,.hist-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.sum-list li{display:grid;grid-template-columns:1.2rem 1fr auto auto;gap:8px;align-items:center;font-size:.95rem}
.sum-list li.ok .mk{color:var(--good);font-weight:700}
.sum-list li.miss .mk{color:var(--muted)}
.sum-list .ct,.sum-list .pc{font-variant-numeric:tabular-nums;color:var(--muted)}
.hist-list li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:6px 0;border-top:1px solid var(--line);font-size:.9rem}
.hist-list .when{grid-column:1/-1;color:var(--muted);font-size:.8rem}
details.ajustes{margin-top:10px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 16px;content-visibility:auto;contain-intrinsic-size:auto 120px}
details.ajustes summary{font-weight:700;cursor:pointer;padding:4px 0;min-height:44px;display:flex;align-items:center}
.ajustes-first{margin-top:10px}
.check{display:flex;gap:10px;align-items:flex-start;margin:10px 0}
.check input{width:22px;height:22px;margin-top:2px;accent-color:var(--brass);flex:none}
.history{margin-top:12px}
.foot{font-size:.85rem;color:var(--muted);margin-top:16px}

/*
 * Móvil portrait (≤720px): la app DEBE verse y usarse en vertical.
 * - Un solo bloque de feedback (nota + aguja + mic) — Dorrell sing-in-tune
 * - Teclado visible en el primer viewport (sin chrome fijo que lo tape)
 * - Tabs abajo fijas y finas (destinos; NN/g / Mobile First)
 * - Historial de pitch secundario y más bajo
 */
@media (max-width: 720px){
  .wrap{
    padding:8px 14px calc(64px + env(safe-area-inset-bottom,0px));
  }
  .brand h1{font-size:1.45rem;margin:0}
  .brand p{margin:2px 0 8px;font-size:.88rem;line-height:1.3}

  .readout{
    gap:8px;padding:12px;border-radius:16px;
  }
  .note-big{font-size:clamp(2.8rem,16vw,4.4rem)}
  .targetbox{min-width:5.8rem}
  .targetbox .lbl{font-size:.8rem}
  .targetbox .val{font-size:1.55rem}
  .meter{height:40px;border-radius:12px}
  .meter .needle{width:7px;margin-left:-3.5px}
  .verdict{font-size:1rem;min-height:1.3em}
  .dock{margin:2px 0 0}
  .mic{min-height:48px;padding:12px 16px;font-size:1.05rem}

  /* Solo la nav de modos queda fija — no tapa el teclado */
  .tabs{
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    margin:0;border-radius:14px 14px 0 0;border-left:0;border-right:0;border-bottom:0;
    padding:4px 8px calc(4px + env(safe-area-inset-bottom,0px));
    background:var(--surface);
    box-shadow:0 -4px 16px color-mix(in srgb, var(--ink) 8%, transparent);
  }
  .tabs button{min-height:44px;padding:8px 4px;font-size:.92rem}

  .kb-wrap{margin:8px -14px 0;padding:0 14px 2px}
  .kb,.wk{height:140px}
  .bk{height:86px}
  .wk{font-size:.72rem;padding-bottom:6px}

  .trace-box{margin-top:8px;padding:6px;border-radius:14px}
  canvas#trace{height:110px}
  .trace-cap{font-size:.76rem;line-height:1.3}

  .panel{padding:12px 14px;margin-top:10px;border-radius:16px}
  .panel h2{font-size:1.25rem}
  .panel-lead{font-size:.92rem;color:var(--muted)}
  .btn,.chip{min-height:46px}
  .foot{margin:10px 0 6px;font-size:.78rem}

  body.listening .panel,
  body.listening .ajustes,
  body.listening .foot{opacity:.5}
  body.listening .readout,
  body.listening .kb-wrap,
  body.listening .trace-box{opacity:1}
}

/* Landscape bajo en táctil: compactar un poco más */
@media (max-height: 430px) and (orientation: landscape) and (hover: none){
  .wrap{padding-top:4px;padding-bottom:calc(52px + env(safe-area-inset-bottom,0px))}
  .brand p{display:none}
  .brand h1{font-size:1.2rem}
  .readout{padding:8px 10px;gap:6px}
  .note-big{font-size:clamp(2rem,9vw,3rem)}
  .meter{height:28px}
  .mic{min-height:42px;padding:8px 14px;font-size:.98rem}
  .kb,.wk{height:96px}
  .bk{height:58px}
  canvas#trace{height:72px}
  .tabs{padding:2px 8px calc(2px + env(safe-area-inset-bottom,0px))}
  .tabs button{min-height:38px;padding:6px 4px}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
  .mic.listening::before{animation:none;box-shadow:none}
}