/* ===== Variables de tema (claro por defecto) =====
   Paleta central: --bg fondo, --pn paneles/tarjetas, --ln bordes, --tx texto, --mu texto atenuado,
   --am acento principal, --am2 acento secundario (verde azulado), --rd rojo (alertas/acento activo),
   --cell fondo de celdas/botones, --sv azul, --v5 violeta, --on texto sobre fondos de acento,
   --glow brillo de sombras y --grad degradado de botones activos. Tambien aplica margenes seguros (notch) en iOS. */
:root{color-scheme:light;--bg:#f4f4ee;--bg1:rgba(37,64,255,.07);--bg2:rgba(224,255,60,.18);--pn:#ffffff;--ln:#e2e2d8;--tx:#0b0d14;--mu:#5b6070;--am:#2540ff;--am2:#0f9d6b;--rd:#e5254a;--cell:#ecece3;--sv:#0a8fc2;--v5:#b58a00;--on:#ffffff;--glow:rgba(37,64,255,.35);--grad:linear-gradient(135deg,#2540ff,#2540ff);box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
/* Tema oscuro automatico: se usa si el sistema esta en modo oscuro y el usuario no forzo 'claro'. */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--bg:#08090d;--bg1:rgba(125,147,255,.10);--bg2:rgba(214,255,61,.04);--pn:#12141c;--ln:#242836;--tx:#f2f3f7;--mu:#9aa0b4;--am:#7d93ff;--am2:#d6ff3d;--rd:#ff6b86;--cell:#1a1d28;--sv:#5cc8ff;--v5:#ffd24a;--on:#08091a;--glow:rgba(125,147,255,.30);--grad:linear-gradient(135deg,#7d93ff,#7d93ff);}}
/* Tema oscuro forzado manualmente con data-theme="dark" (botones Auto/Claro/Oscuro del encabezado). */
:root[data-theme="dark"]{color-scheme:dark;--bg:#08090d;--bg1:rgba(125,147,255,.10);--bg2:rgba(214,255,61,.04);--pn:#12141c;--ln:#242836;--tx:#f2f3f7;--mu:#9aa0b4;--am:#7d93ff;--am2:#d6ff3d;--rd:#ff6b86;--cell:#1a1d28;--sv:#5cc8ff;--v5:#ffd24a;--on:#08091a;--glow:rgba(125,147,255,.30);--grad:linear-gradient(135deg,#7d93ff,#7d93ff);}
/* Tema claro forzado manualmente con data-theme="light"; anula la preferencia del sistema. */
:root[data-theme="light"]{color-scheme:light;--bg:#f4f4ee;--bg1:rgba(37,64,255,.07);--bg2:rgba(224,255,60,.18);--pn:#ffffff;--ln:#e2e2d8;--tx:#0b0d14;--mu:#5b6070;--am:#2540ff;--am2:#0f9d6b;--rd:#e5254a;--cell:#ecece3;--sv:#0a8fc2;--v5:#b58a00;--on:#ffffff;--glow:rgba(37,64,255,.35);--grad:linear-gradient(135deg,#2540ff,#2540ff);}
/* ===== Base y layout general ===== */
/* .wrap centra el contenido en una columna de 720px (pensado para movil); el body lleva fondo con degradados radiales fijos. */
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(800px 420px at 92% -8%,var(--bg1),transparent 60%),radial-gradient(620px 380px at -8% 3%,var(--bg2),transparent 55%),var(--bg);background-attachment:fixed;color:var(--tx);font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:720px;margin:0 auto;padding:14px}
h1{margin:0;font:800 32px/1.05 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:-.8px}
h1 b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
header p{margin:4px 0 12px;color:var(--mu);font-size:13px}
/* ===== Tarjetas, filas y controles de formulario ===== */
/* .card es el contenedor base de cada seccion; .row alinea controles en horizontal; .g es un boton 'fantasma' con borde. */
.card{background:var(--pn);border:1px solid var(--ln);border-radius:12px;padding:14px;margin-bottom:12px}
.row{display:flex;gap:8px;margin-bottom:8px}
select,input{background:var(--cell);color:var(--tx);border:1px solid var(--ln);border-radius:8px;padding:9px;font:inherit;min-width:0}
.row select{flex:1}
button{font:inherit;color:var(--tx);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--am);outline-offset:2px}
.g{background:none;border:1px solid var(--ln);border-radius:8px;padding:8px 10px}
.nm{width:100%;font-weight:700}
/* ===== Chips (selectores tipo pastilla) =====
   .chip es una opcion seleccionable; .on la marca activa con degradado; .add es el chip punteado para anadir. */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.rsub[hidden]{display:none}.tabs.rsub button{flex:1 1 0;min-width:0;padding:12px 6px}
.chip{background:var(--cell);border:1px solid var(--ln);border-radius:6px;padding:7px 13px}
.chip.on{background:var(--grad);border-color:transparent;color:var(--on);font-weight:700}
.chip.add{border-style:dashed;background:none;color:var(--mu)}
/* ===== Cuadricula ritmica de 16 pasos =====
   .grid tiene 16 columnas (semicorcheas); cada .col es un paso con numero (.n) y celda (.cell).
   Dentro de la celda, <i> es la barra de nivel: .m = medio, .o = normal, .a = acento. .col.cur resalta el paso que suena ahora;
   .col.bt/.bn/.cbar marcan tiempos y compases. */
.grid{display:grid;grid-template-columns:repeat(16,1fr);gap:3px;margin:14px 0 4px}
.fgp{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px;margin:8px 0}
.fgb{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--cell);border:1px solid var(--ln);border-radius:8px;padding:6px 4px;color:var(--tx);font-size:11.5px;line-height:1.25;text-align:center;min-height:84px;justify-content:space-between}
.fgb small{color:var(--mu);font-size:11px}.fgb:disabled{opacity:.4}
.chip:disabled{opacity:.4;cursor:not-allowed}
.pylc.off .pyst,.pylc.off .pymore{opacity:.4;pointer-events:none}
.fgs{display:block;color:var(--tx);max-width:100%}
.fgm{border:1px solid var(--ln);border-radius:10px;padding:8px 10px;margin:8px 0;background:var(--pn)}.fgm.on{border-color:var(--am);box-shadow:0 0 0 1px var(--am)}.fgm.play{border-color:var(--rd);box-shadow:0 0 0 2px var(--rd)}.fgm.play .fgh>b:first-child::before{content:'▶ '}.fgc.play{outline:2px solid var(--rd);outline-offset:1px}
.fgh{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:space-between;font-size:13px}
.fgh b{cursor:pointer}.fgh .fr{display:flex;align-items:center;gap:6px}
.fgh .fr button{min-width:30px;padding:4px 8px}
.fgrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;min-height:50px;align-items:flex-end}
.fgc{position:relative;display:flex;flex-direction:column;align-items:center;border:1px solid var(--ln);border-radius:8px;background:var(--cell);padding:4px 6px 2px;color:var(--tx);cursor:pointer}
.fgc small{font-size:10.5px;color:var(--mu);line-height:1.2}
.fgc .fx{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;border:1px solid var(--ln);background:var(--pn);color:var(--mu);font-size:12px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center}
.fgfill{font-size:12px;color:var(--mu);margin-top:4px}
.fgmsg{color:var(--rd);font-size:13px;margin:6px 0}
.aiw{overflow-x:auto;background:var(--cell);border:1px solid var(--ln);border-radius:14px;padding:6px;margin:8px 0}
.aiw svg{display:block;height:auto}@media(min-width:641px){.aiw svg{min-width:var(--aimw)}}.aiw svg text{font-family:inherit}
.ain{cursor:pointer}.ain:hover rect{filter:brightness(1.1)}.ain:focus{outline:none}.ain:focus rect{stroke:var(--tx);stroke-width:2.5}
.ail{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:12px;color:var(--mu);margin:6px 0}
.aisw{width:12px;height:12px;border-radius:4px;display:inline-block;margin-right:5px;vertical-align:-2px}
#aig .arbb{max-width:100%}#aig .arbb button{white-space:normal;max-width:100%;text-align:left}
.pyex{display:flex;flex-direction:column;gap:8px;margin:8px 0}.pyxg{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.pyxl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}.chip.sm{font-size:12px;padding:4px 10px}
.pyinfo{margin:6px 0}.pystage{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:center;margin:12px 0}
@media(max-width:760px){.pystage{grid-template-columns:minmax(0,1fr)}}
.pyfig #pysv{width:100%;max-width:440px;margin:0 auto;display:block}.pyctl{display:flex;flex-direction:column;gap:12px}
.pyrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.pyrow .pyxl{flex-basis:100%}.pybpm{display:flex;align-items:center;justify-content:center;gap:16px}.pybpm b{font-size:46px;line-height:1;font-variant-numeric:tabular-nums}.pybpm small{display:block;text-align:center;color:var(--mu)}.pybr{width:100%}
.pyleggrp{display:flex;flex-wrap:wrap;gap:6px}.pyleg{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;border:1px solid var(--ln);border-radius:999px;padding:3px 10px;background:var(--cell)}.pyleg i{width:10px;height:10px;border-radius:50%;background:var(--c)}.pyleg.off{opacity:.45}
.pyh4{margin:14px 0 8px;font-size:15px}.pylays{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.pylc{border:1px solid var(--ln);border-top:4px solid var(--c);border-radius:14px;padding:10px 12px;background:var(--cell)}.pylc.off{opacity:.55}
.pylh{display:flex;align-items:center;gap:8px}.pylh b{color:var(--c);flex:1}.pysw{display:inline-flex;align-items:center;gap:6px;font-size:13px}.pyxb{padding:2px 8px}
.pyst{display:flex;align-items:center;justify-content:center;gap:12px;margin:8px 0}.pynum{text-align:center;min-width:84px}.pynum b{font-size:32px;line-height:1}.pynum small{display:block;color:var(--mu);font-size:11px}
.pymore summary{cursor:pointer;font-size:12px;color:var(--mu)}.pygrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.rcur{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:10px 12px;background:var(--cell);border:1px solid var(--am);border-radius:12px;margin-bottom:8px}.rcur small{flex-basis:100%;color:var(--mu);font-size:12px}
.rmt{display:flex;gap:6px;margin:0 0 10px}.rmt button{flex:1;background:var(--cell);border:1px solid var(--ln);border-radius:6px;padding:9px 8px;font-weight:600}.rmt button.on{background:var(--am);color:#fff;border-color:transparent}.fbs{margin:0 0 10px}.fbsm{display:block;margin:0 0 6px;opacity:.8}
.rcats{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;-webkit-overflow-scrolling:touch}.rcats .chip{flex:0 0 auto;white-space:nowrap}
.rlv{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:2px 0 6px}.rlv small{flex-basis:100%}
.rlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:8px;max-height:380px;overflow-y:auto}.rlist .ri{margin:0}.rlist .rp{height:26px}.rlist .rp i.m{height:10px}.rlist .rp i.o{height:17px}.rlist .rp i.a{height:26px}.rlist .rp i{height:4px;max-width:9px}
.rplay{position:sticky;bottom:12px;z-index:5;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;align-items:center;box-shadow:0 12px 32px -14px rgba(0,0,0,.45)}
.rplay{padding:10px 14px}.rplay .prog{height:6px}.rplay .inf{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rplay .meter{padding:0}.rplay .bpm{font-size:44px;letter-spacing:-1px}.rplay #play{padding:14px}.rplay .prog,.rplay .inf,.rplay .ropt{grid-column:1/-1}.rplay .inf{margin:0;min-height:0;font-size:13px}.rplay .ropt summary{cursor:pointer;font-size:12px;color:var(--mu)}.rplay .opt{margin-top:8px}
@media(max-width:760px){.rplay{bottom:78px}}
.aicap{min-height:20px;margin:2px 0 6px}
.aiex{border-left:3px solid var(--am);background:var(--cell);border-radius:0 10px 10px 0;padding:8px 12px;margin:8px 0;font-size:13px;line-height:1.5}.aiex ul{margin:4px 0 0;padding-left:18px}.aiex li{margin:3px 0}.aitag{font-size:11px;color:var(--mu);font-weight:400;margin-left:6px}
.col{display:flex;flex-direction:column;gap:3px;text-align:center;border-radius:6px}
.col.bt:not(:first-child){margin-left:5px}
.n{font-size:10px;color:var(--mu)}
.col.bn .n{color:var(--tx);font-weight:700}
.col.cbar .n{color:var(--am)}
.cell{height:88px;border:0;border-radius:4px;background:var(--cell);position:relative;padding:0;overflow:hidden}
.cell i{position:absolute;left:0;right:0;bottom:0;border-radius:3px;background:var(--ln);height:5px}
.cell.m i{height:36%;background:var(--am2)}
.cell.o i{height:66%;background:var(--am)}
.cell.a i{height:100%;background:var(--am);box-shadow:0 0 12px var(--am)}
.ar{font-size:15px;color:var(--mu)}
.col.cur .cell{outline:2px solid var(--tx);outline-offset:-1px}
.col.cur .ar{color:var(--am);font-weight:700}
/* Constructor: paleta por categorías, tarjetas compactas, compases compactos; rejilla tipo secuenciador y vista circular */
.fgcat{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:thin}.fgcat button{flex:none;border-radius:999px;padding:6px 13px;font-size:13px;background:var(--cell);color:var(--tx);border:1px solid var(--ln);font-weight:600}.fgcat button.on{background:var(--am);color:#fff;border-color:transparent}
.fgq{width:100%;margin:0 0 6px}
.fgp{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));max-height:340px;overflow:auto;padding:2px}
.fgb{min-height:0;gap:3px;border-radius:12px;padding:8px 4px 6px;transition:transform .12s,box-shadow .12s,border-color .12s}.fgb:hover:not(:disabled){transform:translateY(-2px);border-color:var(--am);box-shadow:0 6px 14px -8px var(--am)}
.fgb span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11px}
.fbh{margin:0 0 8px}
.fgm{border-radius:14px;transition:padding .15s}.fgm:not(.on):not(.play){padding:6px 10px}.fgm:not(.on):not(.play) .fgc small,.fgm:not(.on):not(.play) .fgfill{display:none}.fgm:not(.on):not(.play) .fgc svg{height:30px;width:auto}.fgm:not(.on):not(.play) .fgrow{min-height:0;margin-top:2px}
.fgc{padding-bottom:9px;border-radius:10px;overflow:visible;transition:background .12s,border-color .12s}
.fgc::after{content:"";position:absolute;left:6px;right:6px;bottom:3px;height:3px;border-radius:3px;background:var(--rd);transform-origin:left;transform:scaleX(0);opacity:0;transition:transform .1s linear}
.fgc.play{background:color-mix(in srgb,var(--rd) 14%,var(--cell));border-color:var(--rd);outline:none}.fgc.play::after{opacity:1;transform:scaleX(var(--fr,0))}
.fgc.pn{animation:fgpn .22s ease-out}.fgc.pr{animation:fgpr .3s ease-out;border-style:dashed}
@keyframes fgpn{0%{transform:scale(1)}35%{transform:scale(1.14);box-shadow:0 0 0 4px color-mix(in srgb,var(--rd) 35%,transparent),0 8px 18px -6px var(--rd)}100%{transform:scale(1.04)}}
@keyframes fgpr{0%{transform:scale(1);opacity:1}40%{transform:scale(.94);opacity:.55}100%{transform:scale(1);opacity:.8}}
@media(prefers-reduced-motion:reduce){.fgc.pn,.fgc.pr{animation:none}}
.grid{padding:12px 10px;border:1px solid var(--ln);border-radius:18px;background:linear-gradient(180deg,var(--cell),transparent 85%)}
.cell{border-radius:10px;background:color-mix(in srgb,var(--ln) 35%,var(--cell));transition:transform .1s,box-shadow .1s}
.cell i{left:3px;right:3px;bottom:3px;border-radius:8px}.cell.m i{height:36%}.cell.o i{height:66%}.cell.a i{height:calc(100% - 6px)}
.cell.o i,.cell.s i{background:linear-gradient(180deg,color-mix(in srgb,var(--am) 80%,#fff),var(--am))}.cell.m i,.cell.g i{background:linear-gradient(180deg,color-mix(in srgb,var(--sv) 80%,#fff),var(--sv))}.cell.a i,.cell.h i{background:linear-gradient(180deg,color-mix(in srgb,var(--rd) 80%,#fff),var(--rd))}.cell.a i{box-shadow:0 0 14px var(--rd)}
.col.cur .cell{outline:none;transform:translateY(-4px) scale(1.04);box-shadow:0 0 0 2px var(--am),0 10px 22px -8px var(--am)}
.col:not(.cur) .cell{transition-duration:.25s}
.rvw{display:inline-flex;gap:0;margin:6px 0 0;border:1px solid var(--ln);border-radius:999px;overflow:hidden}.rvw button{border:0;border-radius:0;background:var(--cell);color:var(--mu);padding:5px 14px;font-size:12.5px;font-weight:600}.rvw button.on{background:var(--am);color:#fff}
.rgs{display:block;width:100%;max-width:440px;margin:4px auto 0;overflow:visible}
.rgbg{fill:var(--cell);stroke:var(--ln);stroke-width:1}
.rgt{fill:none;stroke:var(--ln);stroke-width:12;stroke-linecap:round}.rgt.alt{stroke:var(--cell);stroke-width:12}
.rgp0{fill:none;stroke:var(--mu);stroke-opacity:.4;stroke-width:1.2;stroke-linejoin:round}
.rgtr{fill:none;stroke:var(--am);stroke-width:12;stroke-linecap:round;opacity:.45}
.rgp{transition:transform .09s linear;pointer-events:none}.rgp line{stroke:var(--am);stroke-width:2;stroke-linecap:round;opacity:.8}
.rgb{stroke:var(--mu);stroke-width:1.4;stroke-linecap:round;opacity:.6}.rgb.bar{stroke:var(--tx);stroke-width:2.4;opacity:.85}
.rgc{font-size:64px;font-weight:800;fill:var(--tx);letter-spacing:-2px}.rgs2{font-size:12.5px;fill:var(--mu);letter-spacing:.06em;text-transform:uppercase}
.rgd circle{fill:var(--ln);transition:fill .1s,transform .1s;transform-box:fill-box;transform-origin:center}.rgd circle.on{fill:var(--am);transform:scale(1.5)}
.rgh{fill:none;stroke:var(--rd);stroke-width:1.5;opacity:.45}
.rc{cursor:pointer;transform-box:fill-box;transform-origin:center;transition:transform .1s;stroke:var(--pn);stroke-width:2.5}
.rc.r{fill:var(--ln);stroke:none}
.rc.o,.rc.s{fill:var(--am)}.rc.m{fill:var(--sv)}.rc.a{fill:var(--rd);stroke:var(--pn);stroke-width:3;filter:drop-shadow(0 0 5px var(--rd))}
.rc.h{fill:var(--rd);opacity:.65}.rc.g{fill:var(--sv);opacity:.4}
.rc:hover{stroke:var(--tx)}.rc.cur{transform:scale(1.55);stroke:var(--tx);stroke-width:3;opacity:1;filter:drop-shadow(0 0 7px var(--am))}
@media(prefers-reduced-motion:reduce){.col.cur .cell,.rc.cur,.fgb:hover:not(:disabled){transform:none}}
.fgm.on .fgc svg,.fgm.play .fgc svg{height:58px;width:auto}.fgc svg{transition:height .18s}
#fbx.fbplay .fgm:not(.play){padding:6px 10px;border-color:var(--ln);box-shadow:none}#fbx.fbplay .fgm:not(.play) .fgc small,#fbx.fbplay .fgm:not(.play) .fgfill{display:none}#fbx.fbplay .fgm:not(.play) .fgc svg{height:30px;width:auto}#fbx.fbplay .fgm:not(.play) .fgrow{min-height:0;margin-top:2px}
.fgnt{cursor:pointer;transition:opacity .12s}.fgnt rect{fill:transparent;transition:fill .15s}.fgnt:hover{opacity:.75}.fgnt:hover rect{fill:color-mix(in srgb,var(--ln) 55%,transparent)}
.fgnt.m,.fgnt.g{opacity:.75}
.fgl{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:var(--mu);margin:2px 0 6px}.fgl i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px}
/* Articulaciones: colores por estado (rejilla y notas) y menú */
.cell.g i{height:26%;opacity:.5}.cell.h i{height:82%}.cell.s i{height:42%}
.cell[data-g]::before{content:attr(data-g);position:absolute;left:0;right:0;top:3px;font-size:11px;font-weight:800;color:var(--mu);line-height:1;text-align:center;z-index:1}

.artm{position:fixed;z-index:60;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:8px;background:var(--pn);border:1px solid var(--ln);border-radius:14px;box-shadow:0 16px 40px -12px rgba(0,0,0,.45);min-width:250px}
.artm button{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;border:1px solid transparent;background:var(--cell);color:var(--tx);font-size:13px;font-weight:600;text-align:left;cursor:pointer}.artm button b{display:inline-grid;place-items:center;width:22px;font-size:14px}.artm button:hover,.artm button.on{border-color:var(--am);background:color-mix(in srgb,var(--am) 12%,var(--cell))}
/* Polirritmos: constructor de figuras por capa */
.pfd{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:12px}.pfc{background:var(--pn);color:var(--tx);border:1px solid var(--ln);border-top:4px solid var(--c);border-radius:16px;max-width:760px;width:100%;max-height:92dvh;overflow:auto;padding:16px;box-shadow:0 24px 60px -20px rgba(0,0,0,.5)}.pfc h3{margin:0 0 4px}
.pfbar{display:flex;align-items:center;gap:8px;font-size:13px;margin:6px 0}.pfmt{flex:1;height:6px;border-radius:6px;background:var(--cell);overflow:hidden}.pfmt i{display:block;height:100%;background:var(--c);transition:width .15s}
.pfrow{min-height:62px;padding:8px;border:1px dashed var(--ln);border-radius:12px;background:var(--cell);margin:4px 0 10px}.pfrow .fgc svg{height:54px;width:auto}
.pfact{position:sticky;bottom:-16px;margin:10px -16px -16px;padding:12px 16px;background:var(--pn);border-top:1px solid var(--ln);display:flex;gap:8px;flex-wrap:wrap}.pfact .big{flex:1}
.pyfg{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:6px 0}.pyfb{padding:5px 12px;font-size:12.5px}.pyfgs{display:flex;flex-wrap:wrap;gap:4px}.pyfgs svg{height:28px;width:auto;color:var(--c)}
/* Formularios en rejilla adaptable (.f) y leyendas pequenas (.lg). */
.f{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:12px}
.f label{display:flex;flex-direction:column;font-size:12px;color:var(--mu);gap:3px}
.f input,.f select{width:100%}
.lg{font-size:12px;color:var(--mu);margin:4px 0 0}
/* ===== Metronomo: medidor de BPM =====
   .bpm es el numero grande de tempo; .meter.hit dispara la animacion 'fl' (destello) en cada pulso, desactivada con reduced-motion.
   .prog es la barra de progreso del ejercicio y .inf el texto informativo de estado. */
.meter{text-align:center;padding:6px 0}
.bpm{font:800 84px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:-2px;font-variant-numeric:tabular-nums}
.meter.hit .bpm{animation:fl .25s}
@keyframes fl{from{color:var(--am);text-shadow:0 0 24px var(--am)}to{color:var(--tx);text-shadow:none}}
@media(prefers-reduced-motion:reduce){.meter.hit .bpm{animation:none}}
.meter small{color:var(--mu)}
.prog{height:10px;background:var(--cell);border-radius:6px;overflow:hidden}
.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--am2),var(--am));transition:width .3s}
.inf{text-align:center;color:var(--mu);margin:8px 0 12px;min-height:42px}
.inf b{color:var(--tx)}
/* Boton principal de practicar (#play); cambia a rojo con .on mientras esta sonando. */
#play{width:100%;padding:16px;border:0;border-radius:10px;background:var(--grad);color:var(--on);font-weight:800;font-size:18px}
#play.on{background:var(--rd);color:var(--on)}
.opt{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;color:var(--mu);font-size:13px}
.opt label{display:flex;gap:6px;align-items:center}
.nvpln .nvsub{display:block;font-weight:400;font-size:12.5px;color:var(--mu);margin-top:1px}
/* «Retomar»: enlace discreto bajo «Tu siguiente paso» */
.nvres{display:block;margin-top:10px;padding:0;background:none;border:0;color:inherit;opacity:.9;font:600 13px/1.3 system-ui,sans-serif;text-align:left;text-decoration:underline;cursor:pointer}
/* ===== Ritmos compacto: canción en dos líneas, un solo selector de ritmo, tempo en una línea y todos los ajustes en un bloque plegado ===== */
.rsong{width:100%;min-height:44px}.rparts{margin-top:8px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}.rparts .chip{flex:0 0 auto;white-space:nowrap;min-height:40px}
.rfold{margin:8px 0 0;border-top:1px solid var(--ln)}.rfold>summary{min-height:44px}.rfold>summary small{max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#songs.card{padding:10px 14px}#ed.card{padding:10px 14px}.rcur small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rtempo{display:flex;align-items:flex-end;gap:10px;margin:10px 0 0}.rtempo label{flex:1;margin:0}.rtempo>span{padding-bottom:12px;color:var(--mu);font-weight:700}
#ed .rfold .eh{margin:12px 0 4px}
/* ===== Polirritmos compacto: una tarjeta; selector de ejemplos, opciones, ayuda y arreglo plegados ===== */
.pycard{padding:10px 14px}.pfold{margin:8px 0 0;border-top:1px solid var(--ln)}.pfold>summary{min-height:44px}.pfold>summary small{max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pycard .pyinfo{margin:8px 0}.pycard .pyex{margin:4px 0 8px}.pycard .pyh4{margin:12px 0 6px}
/* ===== Sesión del plan: barra fija en todas las secciones y aviso al terminar el tiempo de un bloque ===== */
#plsess{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nbh,0px) + var(--tmh,0px) + 8px + env(safe-area-inset-bottom,0px));z-index:9250;display:flex;align-items:center;gap:6px;width:max-content;max-width:calc(100vw - 16px);padding:6px 8px 6px 12px;border-radius:999px;background:var(--pn);color:var(--tx);border:2px solid var(--am);box-shadow:0 8px 24px -8px rgba(0,0,0,.5);font:700 13px system-ui,sans-serif}
#plsess .pls1{flex:1;min-width:0;max-width:44vw;text-align:left;background:none;border:0;padding:0;color:inherit;cursor:pointer;min-height:40px}#plsess .pls1 small{display:block;color:var(--mu);font-weight:600;font-size:11px}#plsess .pls1 b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#plsess .plst{font:800 18px/1 system-ui;font-variant-numeric:tabular-nums;color:var(--am)}#plsess button:not(.pls1){min-width:40px;min-height:40px;border:1px solid var(--ln);border-radius:999px;background:var(--cell);color:var(--tx);font:700 13px system-ui;cursor:pointer;padding:0 10px}#plsess .pln{background:var(--am);color:var(--on);border-color:var(--am)}
#plsess button:focus-visible{outline:2px solid var(--am);outline-offset:2px}
.pltup{position:fixed;inset:0;z-index:9700;background:#000a;display:grid;place-items:center;padding:16px}.pltup>div{background:var(--pn);color:var(--tx);border:1px solid var(--ln);border-radius:16px;max-width:400px;width:100%;padding:20px;box-shadow:0 20px 60px #0008}
.pltup h2{margin:0 0 8px;font-size:20px}.pltup p{margin:0 0 14px;color:var(--mu)}.pltup button{display:block;width:100%;min-height:48px;margin:0 0 8px}
@media(prefers-reduced-motion:no-preference){.pltup>div{animation:plup .18s ease-out}@keyframes plup{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}}
/* ===== Práctica compacta: «Escuchar» + «Recorrer» juntos y «Ajustes de la práctica» plegados ===== */
.cinr{}#cin{position:fixed;left:50%;top:20%;transform:translateX(-50%);z-index:9450;min-width:150px;text-align:center;background:color-mix(in srgb,var(--pn) 94%,transparent);border:2px solid var(--am);border-radius:22px;padding:10px 26px 14px;pointer-events:none;box-shadow:0 12px 40px #0006}#cin small{display:block;color:var(--mu);font:700 12px system-ui;letter-spacing:.06em;text-transform:uppercase}#cin b{display:block;font:800 76px/1.05 system-ui;color:var(--am)}
.pbr{display:flex;flex-wrap:wrap;gap:8px 14px;margin:8px 0 2px}.pbg small{display:block;font:700 10.5px system-ui;letter-spacing:.06em;text-transform:uppercase;color:var(--mu);margin:0 0 3px}.pbg>div{display:flex;gap:4px}.pbk{min-width:42px;min-height:42px;padding:0 6px;border-radius:10px;font:800 17px system-ui;background:var(--cell);color:var(--tx);border:2px solid transparent;cursor:pointer}.pbk.on{border-color:var(--am);background:color-mix(in srgb,var(--am) 14%,var(--cell));color:var(--am)}.pbn{margin:4px 0}
.prbar{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin:10px 0 4px}.prbar .big{width:auto;min-width:0;margin:0;min-height:52px;padding:8px 10px;font-size:15px;line-height:1.2}.prbar .pr2{background:var(--pn);color:var(--am);border:2px solid var(--am)}
.prbar .prx{min-width:52px;min-height:52px;padding:0;font-size:18px}
.prfold{margin:8px 0 0;border-top:1px solid var(--ln)}.prfold>summary{min-height:44px}.prfold>summary small{max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ===== Técnicas compacta: un solo bloque para elegir, práctica primero y ajustes plegados ===== */
.kpk{padding:4px 14px 10px}.kpk .dg{background:none;border:0;padding:0;margin:0}.kpk .dg>summary{min-height:44px}
.kfil{margin:2px 0 8px}.kfil .tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0}.kh button{padding:8px 2px;font-size:13.5px;min-height:40px}
.kl{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:0 0 6px}.kl button{padding:8px 6px;font-size:13.5px;min-height:46px}.kl small{display:block;font-weight:400;font-size:12px}
.klist{display:grid;gap:6px}.klist>button{display:block;width:100%;text-align:left;padding:10px 12px}.klist>button span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:400;font-size:13px;opacity:.8;margin-top:2px}
.kph h3{font-size:17px}.kinfo{margin:8px 0 0}
.kpr{margin:12px 0 0}.kpr .f{margin-bottom:8px}.kpr .big{width:100%;min-height:52px}
.kfold{margin:10px 0 0;border-top:1px solid var(--ln)}.kfold>summary{min-height:44px}.kfold>summary small{max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(min-width:760px){.kpr{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}.kpr .f{margin:0}.kpr .lg{grid-column:1/-1;margin:0}}
/* ===== Pestanas (.tabs) y selectores de conjunto (.sets) =====
   .tabs son botones de seccion; .sets/.set son rejillas de opciones con minivista (.mini) de las cuerdas. */
.tabs{display:flex;gap:8px;margin-bottom:12px}
.tabs button{flex:1;padding:12px;border:1px solid var(--ln);border-radius:10px;background:var(--pn);font-weight:700}
.tabs button.on{background:var(--grad);color:var(--on);border-color:var(--am)}
h3{margin:0 0 10px;font-size:15px}
.sets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.set{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 4px;background:var(--cell);border:1px solid var(--ln);border-radius:8px}
.set.on{border-color:var(--am);box-shadow:inset 0 0 0 1px var(--am);font-weight:700}
.mini{display:grid;gap:3px;width:34px}
.mini i{height:2px;background:var(--ln)}
.mini i.on{height:4px;background:var(--am);border-radius:2px}
/* ===== Tablero del mastil (SVG generado por JS en .bd) =====
   .st cuerda (.on = cuerda seleccionada), .fr traste, .nut cejilla, .inl marcas de posicion, .fn/.sn numeros de traste y nombres de cuerda.
   Los puntos de nota usan .d0-.d5 (colores por funcion: raiz, tercera, quinta...); .dt es el borde del punto y .tx el texto dentro; .gh es fantasma (atenuado). */
.bd{overflow-x:auto;margin:10px 0}
.bd svg{display:block}
.st{stroke:var(--ln);stroke-width:1}
.st.on{stroke:var(--mu);stroke-width:2}
.fr{stroke:var(--ln);stroke-width:1.5}
.nut{stroke:var(--tx);stroke-width:4}
.inl{fill:var(--ln)}
.fn,.sn{fill:var(--mu);font-size:12px;text-anchor:middle}
.gh{opacity:.35}
.fdr{display:flex;gap:6px;align-items:center;margin:4px 0}.fdr .chip{flex:1;text-align:left;white-space:normal}.fdr .chip small{opacity:.75}.fdr .g{flex:none}
.d0{fill:var(--am)}.d1{fill:var(--tx)}.d2{fill:var(--rd)}
.dt{stroke:var(--bg);stroke-width:2}
.tx{font-size:13px;font-weight:800;text-anchor:middle;fill:var(--on)}
/* ===== Navegacion, botones grandes y leyendas ===== */
/* .nav = flechas anterior/siguiente con info central (.inf2); .big es el boton de accion ancho; .rows lista la leyenda de colores (.rows b.dN). */
.nav{display:flex;align-items:center;gap:10px}
.nav .g{padding:12px 16px}
.inf2{flex:1;text-align:center}
.big{width:100%;padding:14px;border:0;border-radius:10px;background:var(--grad);color:var(--on);font-weight:800;font-size:16px;margin-top:12px}
.rows{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:5px}
.rows li{display:flex;gap:8px;align-items:center}
.rows b{width:11px;height:11px;border-radius:50%;flex:none}
.rows b.d0{background:var(--am)}.rows b.d1{background:var(--tx)}.rows b.d2{background:var(--rd)}
.invl{display:flex;flex-direction:column;font-size:12px;color:var(--mu);gap:3px;max-width:240px}
.d3{fill:var(--sv)}
.d4{fill:var(--mu)}
.tabs{gap:6px}
.tabs button{padding:12px 2px;font-size:13px}
/* ===== Resaltados del mastil y grados de escala =====
   .dt.hl/.dt.cur resaltan la nota elegida o actual; .degs/.deg muestran los 7 grados con subrayado por calidad: .maj, .min, .dim; .pth es la ruta punteada. */
.dt.hl{stroke:var(--tx);stroke-width:3.5}
.dt.cur{stroke:var(--tx);stroke-width:5;r:15px}
/* Modo «solo las que suenan»: .rv oculta casi todas las notas del recorrido; .cur es la que suena y .nx las que sonarán. */
.rv .dt,.rv .dt+.tx{opacity:.14;transition:opacity .12s}
.rv .dt.nx,.rv .dt.nx+.tx{opacity:.5}
.rv .dt.cur,.rv .dt.cur+.tx{opacity:1}
.degs{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.deg{display:flex;flex-direction:column;align-items:center;padding:8px 0 6px;background:var(--cell);border:1px solid var(--ln);border-radius:8px;font-size:13px}
.deg small{color:var(--mu);font-size:11px}
.deg.on{border-color:var(--am);box-shadow:inset 0 0 0 1px var(--am);font-weight:700}
.deg.maj{border-bottom:3px solid var(--am)}
.deg.min{border-bottom:3px solid var(--sv)}
.deg.dim{border-bottom:3px solid var(--rd)}
.pth{fill:none;stroke:var(--mu);stroke-width:1.5;stroke-dasharray:4 3}
.adot.act circle{stroke:var(--tx);stroke-width:5}
/* Mástil de Técnicas: solo la nota actual y las siguientes se ven claras; el resto queda tenue (k0 actual, k1-k3 siguientes, cada vez más suaves). */
svg.kfd .adot{opacity:.16;transition:opacity .18s}
svg.kfd .adot.k0{opacity:1}svg.kfd .adot.k1{opacity:.78}svg.kfd .adot.k2{opacity:.52}svg.kfd .adot.k3{opacity:.32}
svg.kfd .pth{opacity:.3}
@media(prefers-reduced-motion:reduce){svg.kfd .adot{transition:none}}
/* ===== Tablatura (.tbx) =====
   Fuente monoespaciada; cada .tcol es una columna de tiempo con una celda por cuerda y .act marca la columna que suena. */
.tbx{display:flex;overflow-x:auto;padding:6px 0;font:12px ui-monospace,Menlo,monospace}
.tcol{display:flex;flex-direction:column;min-width:28px}
.tcol span{height:20px;line-height:20px;text-align:center;border-bottom:1px solid var(--ln)}
.tcol span.pk{border:0;color:var(--mu);font-size:14px}
.tcol span b{background:var(--pn);padding:0 2px}
.tcol.act span{border-color:var(--am)}
.tcol.act span.pk,.tcol.act b{color:var(--am)}
.row .big{margin-top:0;width:auto;flex:1}
.tabs{flex-wrap:wrap}
.tabs button{flex:1 0 auto;padding:12px 10px;white-space:nowrap}
.sets.c3{grid-template-columns:repeat(3,1fr)}
.d5{fill:var(--v5)}
.rows b.d5{background:var(--v5)}
/* ===== Opciones tipo tarjeta (.xo), piezas (.pc), compas ritmico (.pgrid/.ps) y ayudas =====
   .xo: opcion con titulo y detalle; .pc: pieza/acorde seleccionable (.sel) o sonando (.act);
   .pgrid/.ps: cuadricula de 16 pasos del patron (.hit golpe, .cur actual, k* tipo de golpe); .mi: info en rejilla. */
.xo{display:flex;flex-direction:column;align-items:flex-start;text-align:left;width:100%;padding:10px 12px;background:var(--cell);border:1px solid var(--ln);border-radius:8px;margin-top:6px}
.xo.on{border-color:var(--am);box-shadow:inset 0 0 0 1px var(--am)}
.xo span{display:flex;justify-content:space-between;width:100%;font-weight:700}
.xo em{font-style:normal;color:var(--am)}
.xo small{color:var(--mu)}
.big.on{background:var(--rd);color:var(--on)}
.pcs{display:flex;gap:6px;overflow-x:auto;padding:4px 0}
.pc{flex:0 0 auto;min-width:68px;padding:8px 6px;background:var(--cell);border:1px solid var(--ln);border-radius:8px;display:flex;flex-direction:column;align-items:center;font-weight:700}
.pc small{color:var(--mu);font-weight:400;font-size:11px}
.pc.sel{border-color:var(--am);box-shadow:inset 0 0 0 1px var(--am)}
.pc.act{background:var(--grad);color:var(--on);border-color:var(--am)}
.pc.act small{color:var(--on)}
.rcats-l{margin:12px 0 4px}
.bxb{opacity:.16}.bx0{fill:#e5484d}.bx1{fill:#f5a524}.bx2{fill:#30a46c}.bx3{fill:#3e63dd}.bx4{fill:#8e4ec6}
.bxl{font-size:10px;font-weight:700;text-anchor:middle;fill:var(--mu)}
.pc.act{transform:scale(1.07);outline:2px solid var(--am);outline-offset:1px}
.pnow{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:10px;padding:8px 12px;border:1px solid var(--ln);border-radius:10px;background:var(--cell)}
.pnow .pnb{font-size:26px;font-weight:800;line-height:1}.pnow .pnr{font-weight:700;color:var(--mu)}.pnow .pnn{font-weight:600}.pnow small{color:var(--mu);margin-left:auto}
.pnow.live{background:var(--grad);color:var(--on);border-color:var(--am)}.pnow.live .pnr,.pnow.live small{color:var(--on)}
.bd.flash .dt{transform-box:fill-box;transform-origin:center;animation:dtp .5s ease-out}
@keyframes dtp{0%{transform:scale(.4);opacity:.3}60%{transform:scale(1.35);opacity:1}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.bd.flash .dt{animation:none}}
.pgrid{display:grid;grid-template-columns:repeat(16,1fr);gap:3px;margin:12px 0 6px}
.pgrid .ps.g0{margin-left:4px}
.pgrid .ps.g0:first-child{margin-left:0}
.ps.kM,.ps.kG,.ps.kR,.ps.kQ{font-size:10px}
.ps.kM{color:var(--rd)}
.ps{height:38px;display:flex;align-items:center;justify-content:center;background:var(--cell);border-radius:4px;font-size:13px;color:var(--mu)}
.ps.hit{color:var(--tx);font-weight:700}
.ps.kA{color:var(--am)}
.ps.cur{outline:2px solid var(--tx)}
.ps{border:0;padding:0;font:inherit;font-size:13px;cursor:pointer}
.ps.kx,.ps.ky,.ps.kK,.ps.kS{font-size:10px}
.pgl span{text-align:center;font-size:10px;color:var(--mu)}
.pgl span.g0{color:var(--tx);font-weight:700;margin-left:4px}
.pgl span.g0:first-child{margin-left:0}
.mi{display:grid;gap:10px;margin-top:14px}
.mi div{display:flex;flex-direction:column}
.mi small{color:var(--mu);font-size:12px}
.mi span{font-weight:700}
.rows b.d3{background:var(--sv)}
.sets.c5{grid-template-columns:repeat(5,1fr)}
.pl{font:800 24px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.set small{color:var(--mu);font-size:11px}
/* ===== Capa de pulido visual: sombras y estados activos (sobrescriben reglas anteriores) ===== */
.card{border-radius:16px;box-shadow:0 1px 2px rgba(20,26,51,.05),0 10px 28px -14px rgba(20,26,51,.22)}
.cell.m i{background:var(--sv)}
.cell.a i{background:var(--rd);box-shadow:0 0 14px var(--rd)}
.tabs button{border-radius:12px}
.tabs button.on,.chip.on,.big,#play,.pc.act{box-shadow:0 6px 18px -8px var(--am2)}
#play.on,.big.on{box-shadow:0 6px 18px -8px var(--rd)}
.set.on,.deg.on,.xo.on,.pc.sel{box-shadow:inset 0 0 0 1px var(--am),0 0 14px -4px var(--am)}
/* ===== Armonia: acordes (.hc/.hrow), tablas, desplegables (.dg) y diagramas =====
   .hc es la tarjeta de acorde; .thw/.tht tabla de teoria; .dg es un <details> desplegable con flecha propia;
   .tabx/.tbc/.tbn dibujan diagramas de acordes en SVG; .hb-* son las partes del diagrama de mastil horizontal. */
.hgh{margin:10px 0 2px;font-size:12px;color:var(--mu)}
.oib{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin:12px 0}.oib .g{padding:11px 8px}.oiok{background:var(--am2)!important;color:var(--on);border-color:transparent}.oiko{background:var(--rd)!important;color:var(--on);border-color:transparent}.oif{border-radius:10px;padding:10px 12px;margin:8px 0;background:var(--cell);border-left:4px solid var(--am2)}.oif.ko{border-left-color:var(--rd)}.oia{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0;align-items:center}.oic{min-width:34px;text-align:center;padding:6px 8px;border:1px solid var(--ln);border-radius:8px;background:var(--cell)}.oic.bad,.oir.bad{border-color:var(--rd);box-shadow:inset 0 0 0 1px var(--rd)}.oig2{display:grid;gap:4px;margin:12px 0}.oir{height:44px;border:1px solid var(--ln);border-radius:8px;background:var(--cell);padding:0}.oir.b{border-left:3px solid var(--am)}.oir.on{background:var(--grad);color:var(--on)}
.imd{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:4px;vertical-align:-2px}.imc.play{background:var(--rd);color:var(--on);border-color:var(--rd);font-weight:700}.imnow{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;background:var(--rd);color:var(--on);border-radius:12px;padding:10px 14px;margin-bottom:10px;box-shadow:0 4px 14px var(--glow)}.imnow b{font-size:26px;line-height:1}.imnow span{font-size:13px;opacity:.95}
.sgr{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--ln);flex-wrap:wrap}.sgr.ok{opacity:.65}.sgc{display:flex;gap:10px;align-items:flex-start;min-width:0;flex:1 1 220px}.sgc small{display:block;color:var(--mu);font-size:12px}.sga{display:flex;gap:6px;align-items:center}.sga a{color:var(--sv);text-decoration:none;font-size:13px;padding:6px 10px}.sgp{height:6px;border-radius:3px;background:var(--cell);margin:8px 0;overflow:hidden}.sgp i{display:block;height:100%;background:var(--ac,#4a9)}
.hrow{display:flex;gap:8px;overflow-x:auto;padding:4px 0}
.hc{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:96px;padding:8px 8px 6px;background:var(--cell);border:1px solid var(--ln);border-radius:12px}
.hc b{font-size:14px}
.hc small{color:var(--mu);font-size:11px}
.hc.off{opacity:.55;justify-content:center}
.hc.u2{background:color-mix(in srgb,var(--am2) 20%,var(--cell));border-color:var(--am2)}
.hc.u1{background:color-mix(in srgb,var(--am) 11%,var(--cell));border-color:var(--am)}
.hc .hu{font-style:normal;font-size:10px;font-weight:700;color:var(--am2)}.hc .hu.hu1{color:var(--am)}
.argf{margin:12px 0;padding:10px;border:1px solid var(--ln);border-radius:12px;background:var(--pn)}.argf svg{display:block;width:100%;max-width:560px;height:auto;margin:0 auto}.argf figcaption{margin-top:8px;font-size:13px;color:var(--mu);line-height:1.45}
.arpr,.arwy{background:var(--cell);border:1px solid var(--ln);border-radius:10px;padding:10px 12px;margin:10px 0}.arwy{border-left:4px solid var(--am2)}.arpr{border-left:4px solid var(--am)}.arpr p,.arwy p{margin:4px 0 6px;line-height:1.5}.arrv{margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--pn);line-height:1.6}.arin{background:var(--cell);border:1px solid var(--ln);border-radius:10px;padding:10px 12px;margin:8px 0}.arin p{margin:4px 0 0;line-height:1.5}.argl dt{font-weight:700;margin-top:8px}.argl dd{margin:2px 0 0;color:var(--mu)}.qs{border-bottom:1px dotted var(--mu);cursor:help}.arbb{display:inline-flex;gap:4px;white-space:nowrap}
.arpop{position:fixed;z-index:70;max-width:min(300px,calc(100vw - 16px));background:var(--pn);color:var(--tx);border:1px solid var(--ln);border-radius:10px;padding:10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.28);font-size:13px;line-height:1.45;pointer-events:none}.arpop b{display:block;font-size:15px;margin-bottom:4px}.arpop span{display:block;margin-top:3px}
.arfb{margin-top:10px;padding:10px 12px;border-radius:10px;border:1px solid var(--ln);display:flex;flex-direction:column;gap:6px}.arfb.ok{border-color:var(--am2)}.arfb.no{border-color:var(--rd)}.arfb button{align-self:flex-start}
.arvis{position:fixed;left:0;right:0;bottom:0;z-index:60;max-height:62vh;overflow:auto;background:var(--pn);color:var(--tx);border-top:1px solid var(--ln);box-shadow:0 -8px 24px rgba(0,0,0,.25);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}.arvg{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}.arvc>svg{width:120px;height:auto}.arvc{border:1px solid var(--ln);border-radius:10px;padding:8px;background:var(--bg);max-width:100%;overflow-x:auto;display:flex;flex-direction:column;gap:4px}
.pyrg{fill:none;stroke-width:1;opacity:.22}.pytn text{font:700 13px system-ui,sans-serif;fill:var(--c);text-anchor:middle}.pytrees{background:#07101a;border-radius:14px;padding:6px 10px 10px}.pytrees .lg{color:#c9d1e8}.pytrees .thw{margin:2px 0}.pytn line{stroke:var(--c);opacity:.45;stroke-width:1.4}.pytn.pk{cursor:pointer}.pytn.cur text{fill:var(--c)}.pytn.cur line{opacity:1;stroke-width:2.4}.pytn.part text{fill:#ffb347}.pytn.part line{stroke:#ffb347}.pytn.off text{fill:#ff6b6b;text-decoration:line-through}.pytn.off line{stroke:#ff6b6b;stroke-dasharray:3 3;opacity:.7}.pyax{stroke:#9aa3c7;stroke-dasharray:3 4;opacity:.55}.pypg{fill:none;stroke-width:1.6;opacity:.7}.pyl{font-size:8px;fill:#9aa3c7;text-anchor:middle;font-family:system-ui,sans-serif}.pyoff{opacity:.28}.pyh{fill:transparent;cursor:pointer}.pyvo{stroke-width:1.5}.pyt2 td.pyc{cursor:pointer}.pyly{border-top:1px solid var(--ln);padding:8px 0}#pysv{display:block;width:100%;max-width:440px;margin:12px auto 4px;background:#07101a;border-radius:14px}.pyt2 td,.pyt2 th{text-align:center;padding:3px 5px;font-size:12px}.pyt2 th:first-child{text-align:left;white-space:nowrap}.pyt2 .cur{background:var(--cell)}
.thw{overflow-x:auto;margin:8px 0}.tht{border-collapse:collapse;width:100%;font-size:13px}.tht th{text-align:left;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--mu);padding:6px 8px;border-bottom:1px solid var(--ln);white-space:nowrap}.tht td{padding:6px 8px;border-bottom:1px solid var(--ln);vertical-align:middle}.thp{padding:4px 10px}.thn{fill:var(--tx)}.thn.h{fill:none;stroke:var(--tx);stroke-width:2}.ths{stroke:var(--tx);stroke-width:2}.thf{fill:none;stroke:var(--tx);stroke-width:2}
.dg{margin-top:8px;border:1px solid var(--ln);border-radius:12px;padding:0 12px;background:var(--cell)}
.dg>summary{cursor:pointer;padding:11px 0;font-weight:700;font-size:14px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:8px}
.dg>summary::-webkit-details-marker{display:none}
.ico{width:1.2em;height:1.2em;flex:none;vertical-align:-.22em;margin-right:.5em;color:var(--am)}.st{display:inline-flex;align-items:center;min-width:0}.tabs button .ico{margin-right:.4em;color:inherit}
.dg>summary::after{content:'▾';color:var(--mu);transition:transform .2s}
.dg[open]>summary::after{transform:rotate(180deg)}
.dg>summary small{color:var(--mu);font-weight:500;font-size:12px;margin-left:auto}
.dg[open]{padding-bottom:10px}
.hc.sel{border-color:var(--am2);box-shadow:0 0 0 2px var(--am2) inset}
.vp{margin-top:10px;border-top:1px dashed var(--ln);padding-top:8px}
.tabx{overflow-x:auto;margin:6px 0 0;padding:8px;background:var(--cell);border-radius:8px}
.tbc{fill:var(--cell);stroke:var(--tx);stroke-width:1.2}
.tbn{fill:var(--tx);font:700 10px system-ui,sans-serif;text-anchor:middle;pointer-events:none}
.tbn.r{fill:var(--on)}
.hc.act{border-color:var(--am);box-shadow:0 0 14px -4px var(--am)}
.hb-s{stroke:var(--mu);stroke-width:1}
.hb-f{stroke:var(--ln);stroke-width:1.2}
.hb-n{stroke:var(--tx);stroke-width:3}
.hb-d{fill:var(--tx)}
.hb-r{fill:var(--am)}
.hb-o{fill:none;stroke:var(--tx);stroke-width:1.3}
.hb-t{fill:var(--mu);font-size:12px;text-anchor:middle}
/* ===== Circulo de quintas (SVG, clases z*) =====
   .zsvg es el SVG; .zs cada sector (.sel elegido, .fam tonalidades emparentadas, .sg segmentos de armadura con .sh sostenidos/.fl bemoles);
   .zt/.zr/.zsg/.zk textos; .zg/.zb/.zf listas y fichas de datos; .zpoly/.zv/.zdg poligono de notas; .zfr/.zff... mastil mini; .zst/.zac/.zcl pentagrama. */
.zw{max-width:380px;margin:12px auto 0}
.zsvg{width:100%;height:auto;display:block;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.zs{fill:var(--cell);stroke:var(--pn);stroke-width:1;cursor:pointer;outline:none}
.zs:focus-visible{stroke:var(--am);stroke-width:2}
.zs.sg{fill:none;stroke:var(--ln);pointer-events:none}
.zs.fam{fill:var(--am2);fill-opacity:.34}
.zs.sel{fill:var(--am);fill-opacity:1}
.zt{fill:var(--tx);font:700 15px system-ui,sans-serif;text-anchor:middle;pointer-events:none}
.zt.sm{font-size:11px}
.zt.on{fill:var(--on)}
.zr{fill:var(--mu);font:700 8.5px system-ui,sans-serif;text-anchor:middle;pointer-events:none}
.zr.on{fill:var(--on)}
.zsg{fill:var(--mu);font:600 9.5px system-ui,sans-serif;text-anchor:middle;pointer-events:none}
.zc0{fill:var(--pn);stroke:var(--ln)}
.zk{fill:var(--tx);font:800 19px system-ui,sans-serif;text-anchor:middle;pointer-events:none}
.zk2{fill:var(--mu);font:600 10px system-ui,sans-serif;text-anchor:middle;pointer-events:none}
.zg{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:8px;margin-top:6px}
.zg .hc{min-width:0;width:100%}
.zr3{color:var(--am2);font-weight:700}
.zfn{font-size:10px;color:var(--mu)}
.zn{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}
.zn span{display:flex;flex-direction:column;align-items:center;min-width:46px;padding:6px 9px;background:var(--cell);border:1px solid var(--ln);border-radius:10px}
.zn small{color:var(--mu);font-size:11px}
.zb{display:block;width:100%;text-align:left;background:var(--cell);border:1px solid var(--ln);border-radius:10px;padding:9px 12px;margin-top:8px}
.zb b{display:block;font-size:14px}
.zb small{display:block;color:var(--mu);font-size:12px}
.zb em{font-style:normal;color:var(--am2);font-size:11px;margin-left:8px}
.zb.act{border-color:var(--am);box-shadow:0 0 14px -4px var(--am)}
.zf{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--ln);font-size:13px}
.zf span{color:var(--mu)}
.zf b{text-align:right}
.zd{margin-top:10px}
.zd summary{cursor:pointer;color:var(--am2);font-size:13px}
.zs.sg.sh{fill:var(--rd);fill-opacity:.2}
.zs.sg.fl{fill:var(--am2);fill-opacity:.2}
.zdot{fill:var(--ln)}
.zpoly{fill:var(--am2);fill-opacity:.2;stroke:var(--am2);stroke-width:2.2;stroke-linejoin:round}
.zv{fill:var(--am2);stroke:var(--pn);stroke-width:1.5}
.zv0{fill:var(--am);stroke:var(--pn);stroke-width:1.5}
.zdg{fill:var(--mu);font:600 9.5px system-ui,sans-serif;text-anchor:middle;pointer-events:none}
.zdg.hi{fill:var(--tx);font-weight:800}
.zk{paint-order:stroke;stroke:var(--pn);stroke-width:4px}
.zfr{width:100%;height:auto;display:block}
.zff{stroke:var(--ln);stroke-width:1}
.zfn{stroke:var(--tx);stroke-width:2.5}
.zfs{stroke:var(--mu);stroke-width:1}
.zfd{fill:var(--am2)}.zfr .zpl{fill:var(--rd);stroke:#fff;stroke-width:2.5;r:11.5px;filter:drop-shadow(0 0 5px var(--rd))}.zfr .zpl+.zfx{fill:#fff;font-weight:800}
.zfr0{fill:var(--am)}
.zfx{fill:var(--on);font:700 7px system-ui,sans-serif;text-anchor:middle;pointer-events:none}
.zfl{fill:var(--mu);font:600 9px system-ui,sans-serif;text-anchor:middle}
.zst{width:100%;height:auto;display:block}
.zst line{stroke:var(--mu);stroke-width:1}
.zac{fill:var(--tx);font:700 24px system-ui,sans-serif;text-anchor:middle}
.zcl{fill:var(--mu);font:600 11px system-ui,sans-serif}
/* ===== Encabezado, pie, glosario y ruta de aprendizaje =====
   header p.by firma; .ft pie; .eh encabezados de ejercicio; .rcur/.rlist/.ri/.rp lista de repertorio con mini perfil de intensidad. */
header p.by{margin:-6px 0 12px;color:var(--tx);font-size:12px}
header p.by b{font-weight:800;color:var(--tx)}
.tinfo{margin:-2px 2px 12px}
.ft{margin:18px 0 8px;text-align:center;color:var(--mu);font-size:12px}
.ft b{color:var(--tx)}
.eh{margin:20px 0 8px;padding-top:12px;border-top:1px solid var(--ln);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--am2)}
.eh:first-child{border-top:0;padding-top:0}
/* Capítulo Composición: .cpr es una fila «nombre de progresión + acordes + ▶»; .rm el texto en números romanos. */
.cpr{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--ln)}
.cpr .cn{display:flex;flex-direction:column;gap:2px;min-width:0;flex:0 0 30%}
.cpr .ch{flex:1;min-width:0;overflow-wrap:anywhere}
.cmb{padding:10px 0;border-top:1px solid var(--ln);display:flex;flex-direction:column;gap:4px}
.cmh{display:flex;justify-content:space-between;align-items:center;gap:8px}
.cmn{font-size:13px}
.cmst{font-size:11px;font-weight:600;color:var(--am);white-space:nowrap}
.cmr{font-size:13px;overflow-wrap:anywhere}
.cmb small{color:var(--mu);font-size:12px}
.cpr .rm{color:var(--mu);font-size:12px}
.slist{display:flex;flex-direction:column;gap:6px;padding-top:2px}
.srow{display:flex;gap:4px;align-items:center}
.srow .nm{flex:1;min-width:0}
.srow .g{padding:8px 10px;min-width:38px}
.srow.on .nm{border-color:var(--am)}
.rcur{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:10px 12px;background:var(--cell);border:1px solid var(--am);border-radius:10px}
.rcur b{font-size:15px}
.rcur em{font-style:normal;color:var(--mu);font-size:12px}
.chip small{opacity:.7;font-size:11px}
.rlist{max-height:380px;overflow-y:auto;margin-top:8px;padding-right:2px;-webkit-overflow-scrolling:touch}
.ri{display:block;width:100%;text-align:left;background:var(--cell);border:1px solid var(--ln);border-radius:10px;padding:9px 12px;margin-bottom:7px}
.ri.on{border-color:var(--am);box-shadow:0 0 14px -4px var(--am)}
.ri .rh{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.ri .rh b{font-size:14px}
.ri .rh em{font-style:normal;font-size:11px;color:var(--am2);white-space:nowrap}
.ri small{display:block;color:var(--mu);font-size:12px;margin-top:3px}
.rp{display:flex;gap:1px;align-items:flex-end;height:14px;margin-top:6px}
.rp i{flex:1;max-width:7px;height:3px;border-radius:1px;background:var(--ln)}
.rp i.m{height:6px;background:var(--am2)}
.rp i.o{height:9px;background:var(--am)}
.rp i.a{height:14px;background:var(--am)}
/* Ruta por niveles (.ruta): fases (.ph) y lista de verificacion (.ck) con barra de avance (.bar); .tbn es el aviso superior (banner) con boton de cierre. */

.ruta h3{margin-bottom:6px}
.ph{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.ph .chip{display:flex;flex-direction:column;align-items:flex-start;padding:7px 11px;text-align:left}
.ph .chip small{font-size:11px;opacity:.75}
.ck{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--ln);font-size:14px;cursor:pointer}
.ck input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--am2)}
.ck.done span{color:var(--mu);text-decoration:line-through}
.bar{height:8px;background:var(--cell);border-radius:6px;overflow:hidden;margin:8px 0}
.bar i{display:block;height:100%;background:var(--grad);transition:width .3s}
.tbn{display:flex;gap:10px;align-items:flex-start;background:var(--grad);color:var(--on);border-radius:12px;padding:10px 12px;margin-bottom:12px;font-size:14px}
.tbn b{display:block}
.tbn button{margin-left:auto;background:none;border:0;color:var(--on);font-size:18px;line-height:1}
textarea{width:100%;background:var(--cell);color:var(--tx);border:1px solid var(--ln);border-radius:8px;padding:9px;font:inherit;min-height:60px;resize:vertical}
.gl dt{font-weight:700;margin-top:8px}.gl dd{margin:0;color:var(--mu);font-size:13px}
/* ===== Tecnicas (CAGED/arpegios): diagrama .k* =====
   .kcol columna activa, .kn nota (.l = nota guia, .t = tonica), .kt/.kl/.kp textos, .kc/.kg/.kpm trazos, .kleg leyenda, .kst pasos. */

.kst{margin:8px 0 0 18px;padding:0;font-size:13px;color:var(--mu)}
.kst li{margin-bottom:3px}
.kcol{fill:transparent}
.kcol.act{fill:var(--am);fill-opacity:.28}
.kn{fill:var(--cell);stroke:var(--tx);stroke-width:1.2}
.kn.l{stroke:var(--am2);stroke-width:2.2}
.kn.t{fill:var(--am);stroke:var(--am)}
.kt{fill:var(--tx);font:700 10px system-ui,sans-serif;text-anchor:middle;pointer-events:none}
.kt.t{fill:var(--on)}
.kl{fill:var(--mu);font:700 10px system-ui,sans-serif;text-anchor:middle;pointer-events:none}
.kl.a{fill:var(--am2)}
.kp{fill:var(--tx);font:700 12px system-ui,sans-serif;text-anchor:middle;pointer-events:none}
.kc{fill:none;stroke:var(--am2);stroke-width:1.6}
.kg{stroke:var(--ln);stroke-width:1.2}
.kpm{stroke:var(--mu);stroke-width:1.4;stroke-dasharray:4 3}
.kleg{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--mu);margin-top:6px}
.kleg b{color:var(--tx)}

/* ===== Tema claro moderno ===== */
/* Ajustes finales de bordes y radios para uniformidad. */
.card{border:1px solid var(--ln)}
.chip,.g,select,input,textarea{border-radius:10px}
.chip{padding:8px 14px}
.chip.on,.tabs button.on,.big,#play,.pc.act{box-shadow:0 8px 18px -10px var(--glow)}
.chip.on small,.pc.act small{opacity:.9}
/* ===== Menu de secciones antiguo (#mtabs, ahora oculto: ver «Navegacion por areas» mas abajo) =====
   Rejilla de 24 columnas: cada boton ocupa 3 (8 por fila). Se agrupa en tarjetas .ncard (hidden las oculta); .tg/.tgl/.tgb son grupo, titulo y botones. */
#mtabs{display:block;margin-bottom:6px}
.ncard[hidden]{display:none}
#mtabs .tgl{display:none}
.tg{margin-bottom:12px}
.tgl{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mu);margin:0 2px 6px}
.tgb{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:8px}
#mtabs button{grid-column:span 3;width:100%;min-width:0;padding:13px 4px;font-size:13px;white-space:normal;line-height:1.15;border-radius:12px;background:var(--pn);box-shadow:0 1px 2px rgba(20,26,51,.05)}
#mtabs button.on{background:var(--grad);color:var(--on);border-color:transparent}
#mtabs button[hidden]{display:none}
.tabs button:not(.on):hover{border-color:var(--am)}
/* Ayuda plegable de la seccion (#thelp): resumen con icono y texto #thelpt que rellena el JS. */
#thelp{margin:-4px 0 14px}
#thelp>summary{display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;list-style:none;padding:10px 14px;background:var(--pn);border:1px solid var(--ln);border-radius:12px;color:var(--am);font-weight:700;font-size:13px;box-shadow:0 1px 2px rgba(20,26,51,.05)}
#thelp>summary::-webkit-details-marker{display:none}
#thelp>summary::before{content:'ℹ';display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--am);color:var(--on);font-size:12px}
#thelp>summary::after{content:'▾';color:var(--mu)}
#thelp[open]>summary::after{content:'▴'}
#thelp>#thelpt{margin:8px 0 0;padding:12px 14px;background:var(--pn);border:1px solid var(--ln);border-radius:12px;font-size:13px;line-height:1.55;color:var(--tx)}
.tinfo{display:none}
header{text-align:left}
.dg{background:var(--cell)}
.dg>summary{color:var(--tx)}
/* Selector de tema (.thm) en el encabezado y cabecera flex (.hd). */
.hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.zr,.zsg{fill:var(--tx)}
.thm{display:flex;gap:2px;padding:3px;background:var(--cell);border:1px solid var(--ln);border-radius:12px;flex:none}
.thm button{border:0;background:none;padding:6px 10px;border-radius:9px;font-size:12px;font-weight:700;color:var(--mu)}
.hd{flex-wrap:wrap;gap:8px}
/* Los tres selectores (tema, sonido, idioma) viven juntos en .hctl: una sola fila compacta, alineada a la derecha, que baja unida
   si no cabe. Sin márgenes sueltos ni anchos automáticos entre grupos para que Firefox y Chrome los coloquen igual. */
.hctl{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:4px;min-width:0}
.hctl .thm{padding:2px;gap:1px;border-radius:10px}
.hctl .thm button{padding:5px 7px;font-size:11.5px;white-space:nowrap;line-height:1.2}.thm button.on{background:var(--pn);color:var(--tx);box-shadow:0 1px 3px rgba(20,26,51,.18)}

/* ===== Acabado moderno: transiciones, hover y feedback al presionar ===== */
/* ===== Acabado moderno ===== */
.card{border-radius:18px}
.chip,.set,.deg,.xo,.pc,.hc,.ri,.zb{transition:border-color .15s,box-shadow .15s,transform .15s}
.chip:not(.on):hover,.set:not(.on):hover,.hc:not(.sel):hover,.ri:not(.on):hover{border-color:var(--am)}
button:active{transform:scale(.98)}
.chip.on,.tabs button.on,.big,#play,.pc.act{border-color:transparent}
.dg{border-radius:14px}
/* Indicador de despliegue bien visible: botón circular de color con flecha (cerrado = relleno, abierto = solo borde) y resalte al pasar el cursor.
   Se aplica a los desplegables .dg, a la ayuda #thelp y a los .zd; usa solo variables del tema (claro y oscuro). */
.dg>summary::after,#thelp>summary::after,.zd>summary::after{content:'▾';flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--am);color:var(--on);font-size:15px;line-height:1;box-shadow:0 2px 6px var(--glow);transition:transform .2s,background .2s,color .2s}
.dg[open]>summary::after,#thelp[open]>summary::after,.zd[open]>summary::after{content:'▾';transform:rotate(180deg);background:transparent;color:var(--am);box-shadow:inset 0 0 0 2px var(--am)}
.dg>summary:hover::after,#thelp>summary:hover::after,.zd>summary:hover::after{filter:brightness(1.15);transform:scale(1.08)}
.dg[open]>summary:hover::after,#thelp[open]>summary:hover::after,.zd[open]>summary:hover::after{transform:rotate(180deg) scale(1.08)}
.dg>summary:hover{color:var(--am)}
.dg>summary:focus-visible,#thelp>summary:focus-visible,.zd>summary:focus-visible{outline:2px solid var(--am);outline-offset:3px;border-radius:8px}
.zd>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;list-style:none}.zd>summary::-webkit-details-marker{display:none}
#thelp>summary{justify-content:center}
/* ===== Planificador de estudio (.pld dias, .pls sesiones, .plt temporizador) ===== */
.pld{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:10px 0}
.pldb{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;border:1px solid var(--ln);border-radius:10px;background:var(--pn);min-width:0}
.pldb b{font-size:13px}.pldb small{font-size:11px;color:var(--mu)}
.pldb.on{background:var(--grad);color:var(--on);border-color:var(--am)}.pldb.on small{color:var(--on);opacity:.9}
.pldb.hoy{box-shadow:0 0 0 2px var(--am2)}
.pll{list-style:none;margin:10px 0;padding:0;display:flex;flex-direction:column;gap:8px}
.pls{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--ln);border-radius:10px;background:var(--cell)}
.pls.done{opacity:.6}.pls.now{border-color:var(--am);box-shadow:0 0 0 2px var(--am)}
.pls div{flex:1;min-width:0}.pls b{display:block;font-size:14px}.pls small{display:block;color:var(--mu);font-size:12px;line-height:1.35}
.pls .g{flex:none;padding:8px 14px}.plmv{flex:none;display:flex;flex-direction:column;gap:3px}.plmv .g{padding:2px 9px;font-size:11px;line-height:1.3;min-width:34px}.plmv .g:disabled{opacity:.3}.plw li{display:flex;align-items:center;justify-content:space-between;gap:8px}.plw .plmv{flex-direction:row}.plm{flex:none;font-weight:800;font-size:13px;white-space:nowrap}
.plc{flex:none;display:grid;place-items:center;width:26px}.plc input{width:20px;height:20px}
.plt{position:relative}.pltm{display:block;font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:4px}
/* ===== Diagrama de pentagrama/escala (.stf, .st*) ===== */
.stfw{overflow-x:auto;margin:10px 0 4px;-webkit-overflow-scrolling:touch}
.stf{display:block;height:auto;margin:0 auto}
.stl{stroke:var(--mu);stroke-width:1}
.stk{stroke:var(--tx);stroke-width:1.4}
.stn{fill:var(--pn);stroke:var(--tx);stroke-width:2}
.stn.hl{fill:var(--am);stroke:var(--am)}
.sta{fill:var(--tx);font:700 15px system-ui,sans-serif;text-anchor:middle}
.stt{fill:var(--mu);font:600 9.5px system-ui,sans-serif;text-anchor:middle}
.stc rect{fill:var(--cell);stroke:var(--ln)}
.stc text{fill:var(--mu);font:700 10px system-ui,sans-serif;text-anchor:middle}
/* ===== Lista de rutas (.rl/.rs) y glosario (.gl2) ===== */
.rl{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.rs{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--ln);border-radius:10px;background:var(--cell)}
.rs.off{opacity:.55}
.rs div{flex:1;min-width:0}.rs b{display:block;font-size:14px}.rs small{display:block;color:var(--mu);font-size:12px;line-height:1.3}
.rs .rf{flex:none;white-space:nowrap}
.rs .g{flex:none;padding:8px 14px}
.rn{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:var(--on);font-weight:800;font-size:13px}
.gl2{margin:6px 0 2px;padding-left:18px;font-size:13px;line-height:1.5}
/* ===== Teclado de piano (.pkb contenedor con scroll, SVG .pksv) =====
   .pkw teclas blancas, .pkbk negras (.act = pulsada), .pkc nombre de nota; .pm marcadores de nota: raiz (.pm-r), escala (.pm-s), acorde (.pm-c), gris (.pm-g) con texto .pmt. */
.pkb{overflow-x:auto;padding:2px 0 4px;margin-top:12px;-webkit-overflow-scrolling:touch}
.pksv{display:block;width:100%;height:auto;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.pkw rect{fill:#fbfbff;stroke:#6d7396;stroke-width:1}
.pkbk rect{fill:#1d2040;stroke:#0b0d1f}
.pkk{cursor:pointer}
.pkw.act rect{fill:#a9d6ff}.pkbk.act rect{fill:#4b6bff}
.pkc{font:600 7px system-ui,sans-serif;fill:#6d7396;text-anchor:middle;pointer-events:none}
.pm{pointer-events:none}.pm-r{fill:var(--am)}.pm-s{fill:var(--am2)}.pm-c{fill:var(--rd)}.pm-g{fill:#586082}
.pmt{fill:var(--on);font-weight:800;text-anchor:middle;pointer-events:none;font-family:system-ui,sans-serif}
.pm-g+.pmt{fill:#fff}
.lpn{display:inline-flex;align-items:baseline;gap:3px;padding:2px 7px;border-radius:7px;font-weight:700}.lpn small{color:var(--mu);font-weight:600}.lpn.now{background:var(--rd);color:#fff}.lpn.now small{color:#fff}
.lcr{display:flex;flex-wrap:wrap;gap:10px}.lcb{border:2px solid transparent;border-radius:12px;padding:2px}.lcb.act{border-color:var(--rd)}.lcb.nx{border-color:var(--am2,#3ecf8e)}.lcb .hc{margin:0}
.pnn{padding:1px 5px;border-radius:6px}.pnn.now{background:var(--rd);color:#fff;font-weight:800}.dgs .dgb.act{box-shadow:0 0 0 2px var(--rd)!important;border-color:var(--rd)!important;background:var(--rd)!important;color:#fff!important}.dgs .dgb.act small{color:#fff!important}.dgs.walk .dgb.on:not(.act){background:var(--cell);color:inherit;border-color:var(--ln)}.dgs.walk .dgb.on:not(.act) small{color:var(--mu)}
.pm-b{fill:#b79cff}.pm-l{fill:#4aa3ff}.pm-lr{fill:#1d6fd6}.pm-lr+.pmt{fill:#fff}
.pdot{display:inline-block;width:11px;height:11px;border-radius:50%;margin:0 5px 0 12px;vertical-align:-1px}.pdot:first-child{margin-left:0}.pdot.r{background:var(--am2)}.pdot.l{background:#4aa3ff}.pdot.b{background:#b79cff}
.pnl{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.pnl .dgb{align-items:flex-start;text-align:left;min-width:0;overflow-wrap:anywhere}.lvn{font:800 11px system-ui;background:var(--am2);color:var(--on);border-radius:8px;padding:1px 7px}.pnl .dgb.on{border-color:var(--am);box-shadow:0 0 0 1px var(--am)}
/* Rejillas de grados (.dgs/.dgb) y piezas (.pchs/.pcb) para piano; .t3 permite texto en varias lineas en las pestanas. */
.dgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:6px;margin-top:12px}
.dgb,.pcb{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px;border:1px solid var(--ln);border-radius:10px;background:var(--cell)}
.dgb small,.pcb small{color:var(--mu);font-size:11px}
.dgb.on,.pcb.act{background:var(--grad);color:var(--on);border-color:transparent}
.dgb.on small,.pcb.act small{color:var(--on)}
.pchs{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:6px;margin-top:12px}
.row .g.on{background:var(--grad);color:var(--on);border-color:transparent}
.tabs.t3 button{white-space:normal}
/* ===== Navegación por áreas (clases nv*) =====
   Barra inferior de 5 áreas en móvil; menú lateral y panel «Hoy» en pantallas anchas. Solo usa los colores del tema (claro y oscuro). */
:root{--nbh:66px}
body{padding-bottom:calc(var(--nbh) + env(safe-area-inset-bottom,0px))}
#nvtop{max-width:720px;margin:0 auto;padding:14px 14px 0}
#nvtop .hd{align-items:center;gap:8px;flex-wrap:wrap}
#nvtop h1{font-size:25px;letter-spacing:-.5px}
.nvtr{display:flex;gap:8px;flex:none}
.nvctx{display:flex;flex-wrap:wrap;gap:6px;order:3;flex:1 1 100%;min-width:0}
.nvic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nvib{width:44px;height:44px;flex:none;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--ln);border-radius:12px;background:var(--pn);color:var(--tx)}
.nvib[hidden]{display:none}
.nvchip{display:inline-flex;align-items:center;gap:6px;min-height:40px;max-width:100%;padding:0 11px;border:1px solid var(--ln);border-radius:999px;background:var(--pn);font-size:13px;font-weight:700;color:var(--tx)}
.nvchip .nvic{width:16px;height:16px}
.nvchip span{overflow:hidden;text-overflow:ellipsis;white-space:pre}
.nvlg{display:none}
.nvchip.ph{color:var(--am);background:var(--cell)}
.nvchip:hover,.nvib:hover,.nvtag:hover{border-color:var(--am)}
.nvset{margin:10px 0 0}.nvset[hidden]{display:none}
.nvset .hctl{justify-content:flex-start;margin-bottom:10px}
.nvset p{margin:6px 0 0}
.wrap{padding-top:8px}
/* Programa de estudios */
.pgc{background:var(--pn);border:1px solid var(--ln);border-radius:16px;padding:14px;margin-bottom:10px}
.pgc>b{font-size:15px}.pgn{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--mu)}
.pgn.demo{padding:9px 11px;border-radius:10px;background:var(--cell);border:1px dashed var(--ln);color:var(--tx)}
.pgbar{height:7px;border-radius:99px;background:var(--cell);overflow:hidden;margin:6px 0 2px}.pgbar i{display:block;height:100%;background:var(--am);border-radius:99px}
.pgcur{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin-top:6px;font-size:13.5px}.pgcur small{color:var(--mu)}
.pgmods{display:grid;gap:6px;margin-top:10px}.pgmr{display:grid;grid-template-columns:78px 1fr auto;gap:8px;align-items:center;font-size:13px}.pgmr .pgbar{margin:0}
.pgm{background:var(--pn);border:1px solid var(--ln);border-radius:16px;margin-bottom:10px;overflow:hidden}
.pgm>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:13px 14px}.pgm>summary::-webkit-details-marker{display:none}
.pgm>summary .nvtx{flex:1;min-width:0}.pgm>summary .pgct{flex:none;font-size:12.5px;color:var(--mu);text-align:right}
.pgm>summary::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--mu);border-bottom:2px solid var(--mu);transform:rotate(45deg);margin:-3px 2px 0 4px;transition:transform .15s}
.pgm[open]>summary::after{transform:rotate(-135deg);margin-top:3px}
.pgm.cur{border-color:var(--am)}
.pgg{padding:2px 14px 12px}.pgg h4{margin:12px 0 4px;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--mu)}
.pgt{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:7px 0;border-top:1px solid var(--ln);font-size:14px}
.pgt:first-of-type{border-top:0}
.pgt .pgd{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--ln);display:grid;place-items:center;font-size:12px;color:var(--on);background:none;padding:0}
.pgt.on .pgd{background:var(--am);border-color:var(--am)}
.pgt .pgx{flex:1 1 180px;min-width:0}.pgt.on .pgx{font-weight:600}
.pgt .pgmeta{display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:12px;color:var(--mu)}
.pgt .pgmeta input,.pgt .pgmeta select{width:auto;max-width:130px;padding:3px 6px;font-size:12.5px;min-height:0}
.pgch{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11.5px;font-weight:700;background:var(--cell);color:var(--mu)}
.pgch.proceso{background:color-mix(in srgb,#f59e0b 22%,var(--pn));color:var(--tx)}.pgch.dominado{background:color-mix(in srgb,#10b981 24%,var(--pn));color:var(--tx)}
.avs{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.avs span{border:1px solid var(--ln);border-radius:8px;padding:3px 9px;background:var(--cell);font-size:14px}.avs .avn i{font-style:normal;color:var(--mu);margin-left:3px}
.avr{margin:8px 0}.avr>b{display:block;font-size:12.5px;color:var(--mu);font-weight:600}.avt{width:100%;border-collapse:collapse;font-size:13.5px;margin:8px 0}.avt th,.avt td{text-align:left;padding:5px 8px;border-bottom:1px solid var(--ln)}.avt th{font-size:11.5px;color:var(--mu);text-transform:uppercase;letter-spacing:.06em}
.pgt .pgp{padding:2px 9px;font-size:12px;min-height:0}.pgtr{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}.pgtr .chip{font-size:13px}
.pgguia{margin-top:14px}.pgguia h3{margin:14px 0 6px;font-size:15px}.pgg4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.pgg4>div,.pgst>div{background:var(--cell);border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.45}.pgg4 b,.pgst b{display:block;margin-bottom:2px}.pgg4 ul{margin:4px 0 0;padding-left:18px}
.pgst{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.pgol{margin:6px 0;padding-left:20px;font-size:13.5px;line-height:1.55}
/* Un color propio por área (barra inferior, menú lateral, encabezados y tarjetas «Explora») */
:root{--ar-hoy:#2540ff;--ar-tocar:#e8452c;--ar-acordes:#c77700;--ar-escalas:#0f9d6b;--ar-teoria:#0a8fc2;--ar-programa:#6b8f00}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--ar-hoy:#7d93ff;--ar-tocar:#ff7a5c;--ar-acordes:#ffb020;--ar-escalas:#3ddc97;--ar-teoria:#5cc8ff;--ar-programa:#d6ff3d}}
:root[data-theme="dark"]{--ar-hoy:#7d93ff;--ar-tocar:#ff7a5c;--ar-acordes:#ffb020;--ar-escalas:#3ddc97;--ar-teoria:#5cc8ff;--ar-programa:#d6ff3d}
.nvai{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:11px;margin-right:10px;vertical-align:middle;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c)}.nvai .nvic{width:20px;height:20px;stroke-width:2.1}
.nvhd h2{display:flex;align-items:center}
.nvexp{margin:2px 0 16px}.nvexp h3{margin:0 0 8px;font-size:17px;letter-spacing:-.2px}
.nvexg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.nvet{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:118px;padding:14px;border:1px solid color-mix(in srgb,var(--c) 35%,var(--ln));border-radius:18px;background:color-mix(in srgb,var(--c) 9%,var(--pn));color:var(--tx);text-align:left;cursor:pointer}
.nvet:hover{border-color:var(--c)}
.nvet .nvai{margin:0;background:var(--c);color:var(--on)}
.nvet b{font-size:15.5px;letter-spacing:-.2px}.nvet small{font-size:12.5px;line-height:1.35;color:var(--mu)}
@media(min-width:900px){.nvexg{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Barra inferior */
#nvbar{position:fixed;left:0;right:0;bottom:0;z-index:8000;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;padding:6px 4px calc(8px + env(safe-area-inset-bottom,0px));background:var(--pn);border-top:1px solid var(--ln);box-shadow:0 -6px 20px var(--bg1)}
#nvbar button{--c:var(--am);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:58px;padding:6px 2px 4px;border:0;border-radius:14px;background:none;color:var(--tx);font-size:12px;font-weight:800;line-height:1.1;letter-spacing:-.1px;text-align:center}
#nvbar button .nvic{width:25px;height:25px;color:var(--c);stroke-width:2}
#nvbar button.on{color:var(--c);background:color-mix(in srgb,var(--c) 15%,transparent)}
#nvbar button.on::before{content:"";position:absolute;top:0;left:26%;right:26%;height:3px;border-radius:0 0 3px 3px;background:var(--c)}
#nvbar span{max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
#nvrail,#nvside{display:none}
/* Pantalla de área / cabecera de sección */
.nvhd{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin:4px 0 12px}
.nvhd h2,.nvst h2{margin:0;font-size:26px;letter-spacing:-.4px;outline:0}
.nvhd .lg{font-size:13.5px;margin:2px 0 0}
.nvsh{display:flex;align-items:center;gap:10px;margin:2px 0 12px}
.nvst{flex:1;min-width:0}.nvst small{display:block;color:var(--mu);font-size:12.5px}.nvst h2{font-size:21px}
.nvrow{background:var(--pn);border:1px solid var(--ln);border-radius:16px;margin-bottom:10px;overflow:hidden;box-shadow:0 1px 2px rgba(20,26,51,.05)}
.nvmain{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:14px;border:0;background:none;text-align:left;color:var(--tx)}
.nvico{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;color:var(--on)}
.nvtx{flex:1;min-width:0}.nvtx b{display:block;font-size:15px}
.nvtx small{display:block;margin-top:2px;color:var(--mu);font-size:12.5px;line-height:1.4}
.nvok{font-style:normal;font-size:12.5px;color:var(--am2)}
.nvchev{color:var(--mu);width:18px;height:18px}
.nvfs{flex:none;font-size:11.5px;font-weight:700;color:var(--mu);padding:3px 8px;border-radius:6px;background:var(--cell)}
.nvtags{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 12px 70px}
.nvtag{min-height:36px;padding:0 12px;border:1px solid transparent;border-radius:9px;background:var(--cell);color:var(--tx);font-size:12.5px;font-weight:700}
.nvpg2{height:5px;margin:0 14px 12px 70px;border-radius:3px;background:var(--ln);overflow:hidden}.nvpg2 i,.nvpgw i{display:block;height:100%;background:var(--am2)}
.nvrow.ahead{background:none;border-style:dashed;box-shadow:none;opacity:.8}
.nvlater .nvrow.ahead{border-color:transparent;margin-bottom:2px}
.nvrow.lk .nvmain{opacity:.7}
.nvnone{margin:6px 2px 12px;color:var(--mu);font-size:13px;line-height:1.5}
.nvlater{margin:14px 0 10px;border:1px dashed var(--ln);border-radius:16px;padding:6px 10px 2px}
.nvlater>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;cursor:pointer;list-style:none}
.nvlater>summary::-webkit-details-marker{display:none}
.nvlater>summary::after{content:'▾';flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--am);color:var(--on);font-size:15px;transition:transform .2s}
.nvlater[open]>summary::after{transform:rotate(180deg)}
.nvlater summary span>b{display:block;font-size:14px}.nvlater summary small{display:block;color:var(--mu);font-size:12px}.nvlater summary small b{display:inline}
/* Hoy */
.nvcont{display:flex;flex-direction:column;gap:6px;align-items:flex-start;margin-bottom:12px;padding:16px;border-radius:18px;background:var(--grad);color:var(--on)}
.nvkick{font-size:12px;font-weight:800;letter-spacing:.08em;opacity:.92}
.nvcont>b{font-size:22px;letter-spacing:-.3px}.nvcont small{font-size:13px;opacity:.95}
.nvpgw{align-self:stretch;height:6px;border-radius:3px;background:rgba(255,255,255,.3);overflow:hidden}.nvpgw i{background:var(--on)}
.nvgo{min-height:44px;margin-top:6px;padding:0 18px;border:0;border-radius:12px;background:var(--pn);color:var(--am);font-weight:800;font-size:14px}
.nvgo span{font-weight:800}
.nvcard{padding:14px}
.nvch{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}.nvch>b{font-size:14.5px}
.nvmu{font-size:12.5px;color:var(--mu);white-space:nowrap}.nvmu b{font-size:inherit;color:inherit}
.nvplr{display:flex;align-items:center;gap:4px;min-height:48px;border-top:1px solid var(--ln)}
.nvplr:first-of-type{border-top:0}
.nvck{width:44px;height:44px;flex:none;display:grid;place-items:center;padding:0;border:0;background:none}
.nvck i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:2px solid var(--am);font-style:normal;font-size:13px;color:var(--on)}
.nvck.on i{background:var(--am2);border-color:var(--am2)}
.nvpln{flex:1;min-width:0;min-height:44px;padding:0;border:0;background:none;text-align:left;font-size:14px;font-weight:700;color:var(--tx)}
.nvplr.dn .nvpln{color:var(--mu);font-weight:400;text-decoration:line-through}
.nvlink b{font:inherit}
.nvlink{display:block;width:100%;min-height:44px;margin-top:4px;border:0;border-top:1px solid var(--ln);background:none;color:var(--am);font-size:13px;font-weight:700}
/* Objetivo del profesor (lo rellena la capa de cuenta en la versión alojada) */
.nvobj .nvon{margin:8px 0 2px;font-size:13.5px;font-weight:700}
.nvob{font-size:13.5px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.nvtg{flex:none;padding:3px 8px;border-radius:6px;background:var(--cell);color:var(--tx);font-size:11.5px;font-weight:800}
.nvtg.on{box-shadow:inset 0 0 0 1px var(--am);color:var(--am)}.nvtg.late{background:var(--rd);color:var(--on)}
.nvr2{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.nvgo2{min-height:44px;padding:0 16px;border:0;border-radius:12px;background:var(--grad);color:var(--on);font-weight:800;font-size:13.5px}
.nvmore{font-size:13px;font-weight:700;color:var(--am);text-decoration:none}
/* Hoja de ajustes y avisos */
.rnb{position:relative;align-self:flex-start}.rnd{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rd);margin-left:6px;vertical-align:middle}.rnd[hidden]{display:none}.rnd.rng{position:absolute;top:6px;right:6px;margin:0}#nvsetb{position:relative}
.rnv{border:1px solid var(--ln);border-radius:12px;background:var(--cell);margin:0 0 8px}.rnv>summary{cursor:pointer;padding:10px 12px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}.rnv>summary b{font-size:15px}.rnv>summary small{color:var(--mu);font-size:12px}.rnv>summary em{font-style:normal;font-size:11px;font-weight:800;padding:1px 7px;border-radius:99px;background:var(--am);color:#111}
.rnv ul{margin:0;padding:0 12px 12px 30px;display:flex;flex-direction:column;gap:6px;font-size:13.5px;line-height:1.45}.rnv li b{font-weight:700}
.nvov{position:fixed;inset:0;z-index:9200;display:flex;align-items:flex-end;justify-content:center;background:rgba(10,12,30,.55)}
.nvov[hidden]{display:none}
.advp{position:fixed;left:50%;transform:translateX(-50%);z-index:9300;width:calc(100% - 24px);max-width:560px;padding:14px;border:1px solid var(--ln);border-radius:16px;background:var(--pn);color:var(--tx);box-shadow:0 10px 30px rgba(10,12,30,.28)}.advp small{display:block;color:var(--mu);font-weight:700;font-size:12px;letter-spacing:.2px}.advp b.advt{display:block;margin:2px 0;font-size:16px}.advp .advd{margin:2px 0 8px;font-size:13px;color:var(--mu)}.advp .advb{height:4px;border-radius:2px;background:var(--cell);overflow:hidden;margin:8px 0}.advp .advb i{display:block;height:100%;background:var(--grad);transform-origin:left;transition:transform 2s linear}.advp .advc{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px}.advp .advn{font-size:44px;font-weight:800;line-height:1;color:var(--am);font-variant-numeric:tabular-nums}.advp .advc button{min-height:44px}.advp .advc #advpb{margin-left:auto}.advp.pz .advn{opacity:.5}@media(prefers-reduced-motion:reduce){.advp .advb i{transition:none}}
.nvsp{width:100%;max-width:560px;max-height:90vh;overflow:auto;padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px));border:1px solid var(--ln);border-radius:20px 20px 0 0;background:var(--bg);color:var(--tx)}
.nvsph{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.nvsph h3{margin:0;font-size:18px}
body.nvlock{overflow:hidden}
/* Ayuda de la sección: solo se ve cuando se presiona «?» */
#thelp{margin:0 0 12px}#thelp:not([open]){display:none}#thelp>summary{display:none}
#mtabs{display:none}
@media(min-width:700px){.nvlg{display:inline}.nvov{align-items:center}.nvsp{border-radius:20px}}
/* Pantallas anchas: menú lateral a la izquierda y panel «Hoy» a la derecha (cuando hay sitio) */
@media(min-width:980px){
 :root{--nbh:0px}
 #nvbar{display:none}
 #nvtop{max-width:1380px;padding:16px 20px 0}
 #nvtop .hd{flex-wrap:nowrap;gap:16px}
 .nvctx{order:0;flex:1 1 auto;margin-left:8px}
 .nvshell{display:flex;align-items:flex-start;gap:20px;max-width:1380px;margin:0 auto;padding:0 20px}
 .nvshell .wrap{flex:1;min-width:0;max-width:780px;margin:0;padding:8px 0 14px}
 #nvrail{display:flex;flex-direction:column;gap:2px;flex:none;width:250px;position:sticky;top:12px;max-height:calc(100vh - 24px - var(--tmh,0px));margin-top:12px;overflow:auto;padding:10px 8px;border:1px solid var(--ln);border-radius:18px;background:var(--pn)}
 #nvrail button{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 10px;border:0;border-radius:10px;background:none;text-align:left;font-size:13.5px;color:var(--tx)}
 #nvrail .nvra{font-size:14px;font-weight:800}
 #nvrail .nvra{--c:var(--am)}#nvrail .nvra .nvic{color:var(--c)}#nvrail .nvra.on{background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c)}
 #nvrail .nvri{min-height:36px;padding-left:38px}#nvrail .nvri.on{font-weight:800;background:var(--cell)}
 #nvrail .nvrs{min-height:32px;padding-left:54px;font-size:12.5px;color:var(--mu)}#nvrail .nvrs.on{color:var(--am);font-weight:800}
 #nvrail .nvrl{min-height:34px;padding-left:38px;font-size:12.5px;color:var(--mu)}
 #nvrail button:hover{background:var(--cell)}
 body.nvhoy #nvrail~.wrap{max-width:780px}
}
@media(min-width:1280px){
 #nvside{display:flex;flex-direction:column;flex:none;width:300px;position:sticky;top:12px;margin-top:14px}
 body.nvhoy #nvside{display:none}
}