/* Piano Birds Hero V6.1 - estilos migrados sin cambios funcionales desde V5 */
:root{--bg:#020617;--panel:rgba(15,23,42,.82);--line:rgba(148,163,184,.24);--cyan:#38bdf8;--gold:#facc15;--green:#22c55e;--red:#fb7185;--text:#f8fafc;--muted:#cbd5e1}
*{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{margin:0;min-height:100vh;color:var(--text);font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at 12% 0%,rgba(56,189,248,.23),transparent 28%),radial-gradient(circle at 88% 0%,rgba(168,85,247,.18),transparent 30%),linear-gradient(180deg,#061025,#020617)}
#appShell{width:min(1500px,98vw);height:100dvh;margin:auto;padding:10px 0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 45px rgba(0,0,0,.32);backdrop-filter:blur(10px)}
header{display:grid;grid-template-columns:1.45fr 1fr;gap:12px;margin-bottom:0}.headerMain{padding:15px 18px}.headerMain h1{margin:0;font-size:clamp(27px,3.5vw,46px)}.headerMain p{margin:6px 0 0;color:var(--muted);line-height:1.45}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:10px}.stat{background:rgba(2,6,23,.62);border:1px solid var(--line);border-radius:13px;padding:9px}.stat small{display:block;color:#94a3b8;font-size:11px;text-transform:uppercase}.stat b{font-size:21px}
#gameWrap{position:relative;width:100%;height:100%;min-height:0;overflow:hidden;border-radius:22px;border:1px solid var(--line);background:#020617;box-shadow:0 26px 70px rgba(0,0,0,.5)}#gameCanvas{position:absolute;inset:0}
#staffPanel{position:absolute;z-index:5;left:16px;right:16px;top:54px;height:176px;border-radius:19px;background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(226,232,240,.9));border:1px solid rgba(255,255,255,.55);box-shadow:0 15px 42px rgba(0,0,0,.25);transition:opacity .18s ease,transform .18s ease;overflow:hidden;pointer-events:none;display:none;}#staffPanel.hidden{opacity:0;transform:translateY(-16px);visibility:hidden}#staffCanvas{position:absolute;inset:0}#staffMeta{position:absolute;right:18px;top:14px;width:255px;text-align:right;color:#020617;font-weight:800;line-height:1.35}#staffMeta small{display:block;color:#475569}
#overlayTop{position:absolute;z-index:6;left:12px;right:12px;top:10px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:10px;pointer-events:none}.pill{background:rgba(2,6,23,.7);border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:13px}#modePill{justify-self:start}#notePill{justify-self:end}.overlayTimes{display:flex;gap:7px;justify-content:center}.timePill{min-width:92px;padding:5px 11px;text-align:center;border-radius:13px}.timePill small{display:block;color:#94a3b8;font-size:8px;text-transform:uppercase;letter-spacing:.08em;line-height:1}.timePill strong{display:block;margin-top:3px;font-size:15px;line-height:1;color:#f8fafc}
#controls{margin-top:0;padding:12px;display:grid;grid-template-columns:1fr .9fr .95fr 1.05fr 1.05fr 1.05fr;gap:10px}.group{background:rgba(2,6,23,.55);border:1px solid var(--line);border-radius:15px;padding:10px;min-height:106px}.group label{display:block;color:#cbd5e1;font-size:12px;margin-bottom:6px}
button,select,input[type=file]::file-selector-button{border:0;border-radius:11px;padding:9px 11px;color:white;font-weight:bold;cursor:pointer;margin:2px;background:linear-gradient(180deg,#38bdf8,#0284c7)}button.secondary{background:linear-gradient(180deg,#64748b,#334155)}button.gold{background:linear-gradient(180deg,#facc15,#f97316)}button.active{background:linear-gradient(180deg,#22c55e,#15803d);box-shadow:0 0 0 3px rgba(34,197,94,.2)}select,input[type=file]{width:100%;background:#020617;color:white;border:1px solid var(--line);border-radius:11px;padding:8px}.help{font-size:12px;color:#94a3b8;line-height:1.45;margin-top:7px}#status,#perf{font-size:12px;color:#cbd5e1;line-height:1.45}kbd{background:#020617;border:1px solid #64748b;border-radius:5px;padding:2px 6px}
@media(max-width:1050px){html,body{height:auto;overflow:auto}#appShell{height:auto;min-height:100vh;display:block;padding:12px 0 18px}header,#controls{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}header{margin-bottom:10px}#gameWrap{height:620px;min-height:540px}#controls{margin-top:10px}}

#practiceMode{margin-bottom:6px}
#practiceInfo{min-height:52px}
@media(max-width:1250px) and (min-width:1051px){#controls{grid-template-columns:repeat(3,1fr)}#controls .group:nth-child(4),#controls .group:nth-child(5){grid-column:span 1}}

.tempoRow{display:grid;grid-template-columns:1fr 92px;gap:8px;align-items:center;margin-top:7px}.tempoRow input[type=number]{width:100%;background:#020617;color:white;border:1px solid var(--line);border-radius:11px;padding:8px}.checkLabel{display:flex!important;align-items:center;gap:7px;margin:0!important}.checkLabel input{width:18px;height:18px}#tempoInfo{min-height:34px}

/* Sprint V6.4 · Retroalimentación sonora */
.feedbackRow{display:grid;grid-template-columns:1fr minmax(110px,1.4fr);gap:8px;align-items:center;margin-top:7px}.volumeLabel{display:grid!important;grid-template-columns:36px 1fr;align-items:center;gap:6px;margin:0!important}.volumeLabel span{font-size:11px;color:#cbd5e1;text-align:right}.volumeLabel input[type=range]{width:100%;accent-color:#38bdf8}

/* Sprint V6.5 · Registro de sesión y resultados */
.sessionMetrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:7px 0}.sessionMetrics>div{background:rgba(15,23,42,.78);border:1px solid var(--line);border-radius:9px;padding:6px;text-align:center}.sessionMetrics small{display:block;color:#94a3b8;font-size:9px;text-transform:uppercase;letter-spacing:.04em}.sessionMetrics strong{font-size:15px}.sessionHistory{font-size:11px;color:#cbd5e1;margin:6px 0}.sessionHistory summary{cursor:pointer;color:#38bdf8;font-weight:700}.sessionHistory #sessionHistoryList{padding:6px 0;line-height:1.45}.historyItem{padding:5px 0;border-bottom:1px solid rgba(148,163,184,.16)}.historyItem:last-child{border-bottom:0}.smallButton{padding:6px 8px;font-size:10px;margin:2px 0}

/* Sprint V6.5.1 · Ajuste vertical y tiempos sobre el juego */
.sessionGroup{padding-top:9px}.sessionGroup>.sessionMetrics{margin-top:4px}.sessionGroup #status,.sessionGroup #perf{line-height:1.3}.sessionGroup #perf{margin-top:3px}@media(max-width:700px){#overlayTop{grid-template-columns:1fr auto;grid-template-areas:"mode note" "times times"}.overlayTimes{grid-area:times;margin-top:2px}#modePill{grid-area:mode}#notePill{grid-area:note}.timePill{min-width:84px}}
/* Sprint V6.6 · perfiles locales */
.profileGroup{min-width:230px}
.profileActions{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;margin-top:8px}
.profileActions input{min-width:0}
button.danger{background:linear-gradient(180deg,#ef4444,#b91c1c);color:#fff;border-color:#f87171}
button.danger:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:760px){.profileActions{grid-template-columns:1fr 1fr}.profileActions input{grid-column:1/-1}}

/* V6.6.1 · Reacomodo compacto de controles */
.experienceButtons{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.compactField{margin-top:8px}
.compactField>label{margin-bottom:4px}
.experienceGroup .profileActions{margin-top:6px}
.experienceGroup .help{line-height:1.25}
.hotkeyHelp{margin-top:5px}
.practiceGroup .compactField{margin-top:9px}
@media(max-width:760px){.experienceButtons{grid-template-columns:1fr}}

#controls.menuHidden{display:none!important}
body.menusHidden #appShell{grid-template-rows:auto minmax(0,1fr)}