/* Estilos compartidos por todas las secciones.
   Dirección "Escenario": la pantalla es lo que ve el músico frente al director; la seña queda iluminada.
   Azules oscuros, sin pares de colores que remitan a un club (en Argentina llaman la atención enseguida).
   Un color, un significado: --senal = lo que indica el director (blanco, como luz de escenario) ·
   --grave / --agudo = alturas (un mismo azul, oscuro y claro) · --esperada = dónde había que tocar ·
   --ok / --bad = resultado · --marca = logo e inicio. El resto, neutros azulados.
   El JS dibuja con var(--note), var(--ink) y var(--hand): en vez de tocar el marcado (y las pruebas),
   esas variables se redefinen según el contenedor (ver "significados por contenedor"). */
:root{
  --f-titulo:Archivo,Figtree,system-ui,sans-serif; --f-texto:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* claro */
  --bg:#EEF2F7; --surface:#FFFFFF; --ink:#142033; --muted:#58657E; --line:#D3DBE7;
  --hand:#F4E4CD; --hand-line:#1B2433;
  --esperada:#4A5B7A; --band:rgba(74,91,122,.10);
  --grave:#2F4FCF; --on-grave:#FFFFFF; --grave-reposo:#E4EAFB; --grave-texto:#2F4FCF;
  --agudo:#B9CBFF; --on-agudo:#0E1A38; --agudo-reposo:#F3F6FF; --agudo-texto:#4258A8;
  --pad-reposo:#E6ECF5; --pad-borde:#B8C4D6;
  --ok:#167A48; --bad:#C42D52; --marca:#2F4FCF;
  --senal:var(--ink); --note:var(--esperada);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
/* oscuro: azul noche */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0E1420; --surface:#162032; --ink:#EEF2F8; --muted:#93A0B8; --line:#26324A;
    --hand:#EEE6DA; --hand-line:#121826;
    --esperada:#A9BBD8; --band:rgba(169,187,216,.14);
    --grave:#3B5BDB; --on-grave:#FFFFFF; --grave-reposo:#1D2B4A; --grave-texto:#A9BEFF;
    --agudo:#B4C8FF; --on-agudo:#0E1A38; --agudo-reposo:#24324F; --agudo-texto:#D3DFFF;
    --pad-reposo:#1E2A40; --pad-borde:#3A4863;
    --ok:#4CD38F; --bad:#FF5A76; --marca:#5C7CFA;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0E1420; --surface:#162032; --ink:#EEF2F8; --muted:#93A0B8; --line:#26324A;
  --hand:#EEE6DA; --hand-line:#121826;
  --esperada:#A9BBD8; --band:rgba(169,187,216,.14);
  --grave:#3B5BDB; --on-grave:#FFFFFF; --grave-reposo:#1D2B4A; --grave-texto:#A9BEFF;
  --agudo:#B4C8FF; --on-agudo:#0E1A38; --agudo-reposo:#24324F; --agudo-texto:#D3DFFF;
  --pad-reposo:#1E2A40; --pad-borde:#3A4863;
  --ok:#4CD38F; --bad:#FF5A76; --marca:#5C7CFA;
}
/* significados por contenedor (las variables de :root ya llegan resueltas, así que redefinir --ink acá no cambia --note) */
.hands{--ink:var(--hand-line); --note:var(--senal)}   /* manos claras con contorno oscuro; flecha de giro y "+" de las series, en blanco */
svg text{font-family:var(--f-texto)}                   /* el CSS manda sobre el atributo font-family de los SVG */
svg text[font-weight="800"]{font-family:var(--f-titulo);font-stretch:80%}

html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-texto);line-height:1.45;-webkit-tap-highlight-color:transparent}
main{max-width:620px;margin:0 auto;padding:1.25rem 1rem 2rem}
h1{margin-bottom:1rem!important;font-family:var(--f-titulo);font-stretch:75%;font-weight:800;font-size:clamp(2.3rem,10vw,3.2rem);line-height:.95;letter-spacing:-.01em;margin:.25rem 0 .35rem}
.sub{color:var(--muted);margin:0 0 1.1rem;max-width:46ch}
.volver{display:inline-flex;align-items:center;gap:.4rem;color:var(--muted);font-size:.9rem;text-decoration:none;margin-bottom:.2rem}
.volver:hover{text-decoration:underline}
/* logo: la figura 1011 de lectura de dedos como cuatro barras */
.logo{display:inline-block;width:.62em;height:.54em;vertical-align:baseline}
.logo rect{fill:currentColor}
.logo .acento{fill:var(--marca)}
h1 .logo{margin-right:.2em}
.volver .logo{width:.8rem;height:.7rem;color:var(--ink)}

/* ajustes */
.controls{display:grid;gap:.8rem;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1rem}
.row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.row>label{font-weight:600;min-width:4.5rem}
input[type=range]{flex:1;accent-color:var(--ink);min-width:140px}
.val{font-variant-numeric:tabular-nums;font-weight:600;min-width:4.5rem;text-align:right}
.levels{display:flex;gap:.4rem;flex:1}
.levels button{flex:1;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:10px;padding:.5rem .4rem;font:inherit;font-weight:600;cursor:pointer}
.levels button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.levels button:disabled{opacity:.5}
.levelname{color:var(--muted);font-size:.92rem;margin:-.2rem 0 0}
details{color:var(--muted);font-size:.9rem}
details summary{cursor:pointer}
details .row{margin-top:.6rem;color:var(--ink)}
.reset{justify-self:start;background:none;border:none;padding:0;color:var(--muted);font:inherit;font-size:.85rem;text-decoration:underline;cursor:pointer}
.seg{display:flex;gap:.4rem;flex:1;flex-wrap:wrap}
.seg button{flex:1 1 auto;white-space:nowrap;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:10px;padding:.5rem .4rem;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* escenario */
.stage{margin:1.4rem 0 .6rem}
.status{height:2rem;line-height:2rem;white-space:nowrap;overflow:hidden;font-family:var(--f-titulo);font-stretch:80%;font-weight:800;font-size:1.55rem;text-align:center;min-height:2rem;margin-bottom:.2rem;color:var(--muted)}
.status.play{color:var(--senal)}   /* "Atención" apagado, "¡Tocá!" encendido */
.beats{display:flex;justify-content:center;align-items:center;gap:.35rem;height:18px;margin-bottom:.6rem}
.beats span{width:9px;height:9px;border-radius:50%;background:var(--line)}
.beats span.b{width:15px;height:15px}
.beats span.gap{width:.9rem;background:none}
.beats span.on{background:var(--ink)}
.board{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:.8rem .8rem .4rem;overflow:hidden}
.hands{display:block;width:100%;height:auto}
.hands.photo{width:72%;margin:0 auto .6rem;background:var(--bg);border-radius:12px;padding:.4rem}
.timeline{display:block;width:100%;height:auto}
.caption{color:var(--muted);font-size:.85rem;text-align:center;margin:.2rem 0 .3rem;min-height:1.2rem}

/* pads: tenues en reposo; al golpe (.hit, unos 80 ms) se encienden enteros de golpe y se apagan con un fundido corto.
   touch-action:none: un golpe en el que el dedo se desliza no desplaza la página en medio de la partida */
.pad{width:100%;margin:1rem 0 .8rem;border:2px solid var(--pad-borde);border-radius:16px;height:clamp(120px,24vh,180px);background:var(--pad-reposo);color:var(--ink);font:inherit;font-family:var(--f-titulo);font-stretch:80%;font-weight:800;font-size:1.6rem;letter-spacing:.01em;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .05s,background-color .2s,color .2s,border-color .2s}
.pad.hit{transform:scale(.97);background:var(--ink);color:var(--bg);border-color:var(--ink);transition:transform .05s}
.pad small{display:block;font-family:var(--f-texto);font-stretch:normal;font-weight:400;font-size:.85rem;letter-spacing:0;opacity:.75}
/* dos pads con alturas (orquestación, algoritmos): cada altura, un mismo azul, grave oscuro y agudo claro */
.pads{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:1rem 0 .8rem}
.pads .pad{margin:0}
.pad.grave{background:var(--grave-reposo);border-color:var(--grave);color:var(--grave-texto)}
.pad.agudo{background:var(--agudo-reposo);border-color:var(--agudo);color:var(--agudo-texto)}
.pad.grave.hit{background:var(--grave);border-color:var(--grave);color:var(--on-grave)}
.pad.agudo.hit{background:var(--agudo);border-color:var(--agudo);color:var(--on-agudo)}
.go{width:100%;border:1px solid var(--ink);border-radius:12px;padding:.85rem;font:inherit;font-weight:600;font-size:1.05rem;background:transparent;color:var(--ink);cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--marca);outline-offset:3px}

/* revisión y resultados */
.review{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:.6rem .8rem;margin-top:.8rem}
.review p{margin:.1rem 0 .35rem;font-size:.95rem}
.review .verdict{font-weight:600}
.review .verdict.good{color:var(--ok)}
.review .verdict.bad{color:var(--bad)}
.results{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;margin-top:1rem}
.results h2{font-family:var(--f-titulo);font-stretch:75%;font-weight:800;margin:.1rem 0 .4rem;font-size:1.9rem;line-height:1.05}
.legend{display:flex;gap:1rem;flex-wrap:wrap;color:var(--muted);font-size:.8rem;margin-top:.3rem}
.legend i{display:inline-block;width:4px;height:12px;margin-right:.35rem;vertical-align:-1px;border-radius:2px}
.foot{color:var(--muted);font-size:.82rem;margin-top:1.5rem;max-width:52ch}
[hidden]{display:none!important}

/* inicio */
.secciones{display:grid;gap:.8rem;list-style:none;padding:0;margin:0}
.seccion{display:block;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;color:var(--ink);text-decoration:none}
a.seccion:hover{border-color:var(--marca)}
.seccion h2{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;font-family:var(--f-titulo);font-stretch:75%;font-weight:800;font-size:1.75rem;line-height:1.05;margin:0 0 .3rem}
.seccion h2:last-child{margin-bottom:0}
.seccion h2::after{content:"→";color:var(--marca);font-family:var(--f-texto);font-weight:600;font-size:1.2rem}
.seccion p{color:var(--muted);margin:0;font-size:.95rem}
.seccion.pronto{opacity:.6}