/* Layout: cabecera con pentagrama, menú por familias (Partituras · Acordes · Audio · Práctica), panel de trabajo debajo */
:root{
  --bg:#F4F3F6; --surface:#FFFFFF; --sunk:#EAE8EE; --line:#D6D2DE;
  --fg:#1C1A22; --muted:#625D6E; --accent:#8A3F12; --accent-ink:#FFFFFF; --accent-soft:#F6E6DA;
  --ok:#1E7A4E; --ok-soft:#E1F2E8; --warn:#93600A; --warn-soft:#FBEFD6;
  --paper:#FFFFFF; --paper-ink:#141218;
  --f-display:"Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-body:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, Consolas, monospace;
  --r:10px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141218; --surface:#1C1A22; --sunk:#100E13; --line:#33303C;
  --fg:#ECEAF0; --muted:#A39DAF; --accent:#F0A35E; --accent-ink:#1A0E05; --accent-soft:#3A2516;
  --ok:#6BD39E; --ok-soft:#173326; --warn:#F2B654; --warn-soft:#3A2A10; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141218; --surface:#1C1A22; --sunk:#100E13; --line:#33303C;
  --fg:#ECEAF0; --muted:#A39DAF; --accent:#F0A35E; --accent-ink:#1A0E05; --accent-soft:#3A2516;
  --ok:#6BD39E; --ok-soft:#173326; --warn:#F2B654; --warn-soft:#3A2A10; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:15px/1.55 var(--f-body)}
.wrap{max-width:1100px;margin:0 auto;padding-block:22px 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:grid;gap:20px}
header.top{display:grid;gap:10px}
header .staff{height:22px;background:repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px 5px);opacity:.9;border-radius:2px}
.brandrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;justify-content:space-between}
.brand{font:800 32px/1 var(--f-display);font-stretch:118%;letter-spacing:-.01em;margin:0}
.brand .kit{color:var(--accent)}
.brand .tbd{font:600 12px/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--warn);background:var(--warn-soft);padding:3px 8px;border-radius:5px;vertical-align:middle;margin-left:8px}
.tag{color:var(--muted);margin:0;max-width:62ch}
.lock{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ok);background:var(--ok-soft);padding:4px 10px;border-radius:99px;font-weight:700}
nav.groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:860px){nav.groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){nav.groups{grid-template-columns:1fr}}
.group{display:grid;gap:6px;align-content:start;min-width:0}
.group h2{margin:0;font:700 12px/1 var(--f-body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.tool{all:unset;cursor:pointer;display:grid;gap:1px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);min-width:0}
.tool b{font:700 14.5px/1.25 var(--f-body)}
.tool small{color:var(--muted);font-size:12.5px;line-height:1.35}
.tool:hover{border-color:var(--accent)}
.tool:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tool[aria-current="page"],.tool[aria-selected="true"]{background:var(--accent-soft);border-color:var(--accent)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;display:grid;gap:18px;min-width:0}
.panel h2{font:800 24px/1.15 var(--f-display);font-stretch:112%;margin:0;text-wrap:balance}
.panel .lead{margin:4px 0 0;color:var(--muted);max-width:70ch}
.step{display:grid;gap:10px;min-width:0}
.step>h3{margin:0;font:700 12px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){.two{grid-template-columns:1fr}}
.two>*{min-width:0}
.drop{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;border:1.5px dashed var(--line);border-radius:var(--r);padding:14px;background:var(--sunk);cursor:pointer}
.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.meta{font-size:13px;color:var(--muted)}
.meta strong{color:var(--fg)}
.badge-ex{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--warn);background:var(--warn-soft);padding:2px 7px;border-radius:5px}
button,.btn{font:700 14px/1 var(--f-body);border-radius:8px;padding:10px 14px;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer}
button:hover,.btn:hover{border-color:var(--accent)}
button:focus-visible,.btn:focus-visible,textarea:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.primary,.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
button:disabled{opacity:.5;cursor:default}
button[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent)}
textarea{width:100%;min-height:220px;resize:vertical;font:13.5px/1.5 var(--f-mono);padding:12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--fg);white-space:pre;overflow:auto}
textarea.out{background:var(--sunk)}
select,input[type=number],input[type=text]{font:14px var(--f-body);padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--fg);max-width:100%}
input[type=number]{width:90px;font-variant-numeric:tabular-nums}
input[type=range]{accent-color:var(--accent);width:min(320px,100%)}
.opts{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.opts label{display:inline-flex;align-items:center;gap:7px;font-size:14px}
.stats{display:flex;flex-wrap:wrap;gap:8px}
.stat{padding:9px 13px;border-radius:9px;background:var(--sunk);font-size:13px;color:var(--muted);min-width:0}
.stat b{display:block;font:800 22px/1.15 var(--f-display);color:var(--fg);font-variant-numeric:tabular-nums}
.stat.big b{font-size:34px}
.stat.ok b{color:var(--ok)}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.note{font-size:13px;color:var(--muted);margin:0}
.note.err{color:#C0392B}
.paper{background:var(--paper);color:var(--paper-ink);border:1px solid var(--line);border-radius:var(--r);padding:12px;overflow-x:auto;min-height:120px}
.paper svg{max-width:none;display:block;margin:0 auto}
.paper .loading{color:#5b5560;font-size:14px;padding:30px;text-align:center}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:99px;padding:5px 11px;font-size:13px;background:var(--surface)}
.chip.easy{border-color:var(--ok);background:var(--ok-soft)}
.chip b{font-family:var(--f-mono)}
.beats{display:flex;flex-wrap:wrap;gap:8px}
.beat{all:unset;cursor:pointer;width:44px;height:44px;border-radius:10px;border:1.5px solid var(--line);display:grid;place-items:center;font:700 13px var(--f-mono);color:var(--muted);background:var(--surface);position:relative}
.beat[data-l="3"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.beat[data-l="2"]{background:var(--accent-soft);color:var(--fg);border-color:var(--accent)}
.beat[data-l="0"]{opacity:.4;border-style:dashed}
.beat.on{box-shadow:0 0 0 3px var(--fg)}
.beat:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bpmrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.bpmbig{font:800 54px/1 var(--f-display);font-variant-numeric:tabular-nums;min-width:3ch}
.bpmbig small{font:600 14px var(--f-body);color:var(--muted);margin-left:6px}
.legend{font-size:12.5px;color:var(--muted)}
.strings{display:flex;flex-wrap:wrap;gap:8px}
.string{all:unset;cursor:pointer;min-width:64px;padding:12px 10px;border-radius:10px;border:1.5px solid var(--line);text-align:center;background:var(--surface);display:grid;gap:2px}
.string b{font:800 22px/1 var(--f-display)}
.string small{font:12px var(--f-mono);color:var(--muted)}
.string[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.string[aria-pressed="true"] small{color:var(--accent-ink)}
.string:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.progress{height:6px;background:var(--sunk);border-radius:99px;overflow:hidden}
.progress>i{display:block;height:100%;width:0;background:var(--accent)}
.maptable{border-collapse:collapse;font-size:14px;min-width:100%}
.maptable th,.maptable td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;font-variant-numeric:tabular-nums}
.maptable th{font:700 12px var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.maptable input,.maptable select{padding:5px 7px}
.beat[data-i]{cursor:default}
.review{border:1.5px solid var(--warn);background:var(--warn-soft);border-radius:var(--r);padding:12px 14px;display:grid;gap:6px;font-size:14px}
.review strong{font:800 15px var(--f-body);color:var(--warn)}
.review p{margin:0}
.review ul{margin:0;padding-left:20px;display:grid;gap:2px}
.review .warnlist li{color:var(--fg);font-weight:700}
.tool{grid-template-columns:42px minmax(0,1fr);align-items:center;column-gap:11px}
.ttext{display:grid;gap:1px;min-width:0}
.ticon,.picon{display:grid;place-items:center;border-radius:11px;background:var(--accent-soft);color:var(--accent)}
.ticon{width:42px;height:42px}
.ticon svg{width:31px;height:31px}
.picon{width:56px;height:56px;border-radius:14px;flex:none}
.picon svg{width:38px;height:38px}
.ticon svg,.picon svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ticon svg .f,.picon svg .f{fill:currentColor;stroke:none}
.ticon svg .t,.picon svg .t{fill:currentColor;stroke:none;font:700 7px var(--f-mono)}
.ticon svg .t.big,.picon svg .t.big{font:800 11px var(--f-display)}
.tool[aria-current="page"] .ticon,.tool[aria-selected="true"] .ticon{background:var(--accent);color:var(--accent-ink)}
.tool:hover .ticon{transform:rotate(-4deg)}
.ticon{transition:transform .15s ease}
.phead{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center}
.phead .picon{grid-row:span 2}
footer{color:var(--muted);font-size:12.5px;text-align:center}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* Móvil: los desplegables con textos largos no deben ensanchar la página */
select{min-width:0;text-overflow:ellipsis}
@media (max-width:560px){ .opts{align-items:stretch} .opts>select,.opts>label>select{width:100%} .opts>label{flex-wrap:wrap} }
@media (max-width:560px){ .seo-hero{align-items:flex-start} }

/* ===== Identidad TuttiKit: marino del logotipo + barras violeta, azul y turquesa =====
   Layout: cabecera blanca con logotipo, portada con titular grande y las tres barras de la marca,
   herramientas en tarjetas con el color de su familia, contenido en tarjeta de lectura */
:root{
  --navy:#011446; --violet:#5E23F5; --blue:#333FFA; --teal:#00E2D7; --slate:#5C6E93;
  --bg:#F5F7FC; --surface:#FFFFFF; --sunk:#EEF1F9; --line:#DCE1EF;
  --fg:#0B1540; --muted:#55617F; --accent:#333FFA; --accent-ink:#FFFFFF; --accent-soft:#E9EBFF;
  --ok:#0A7A62; --ok-soft:#DDF6EF; --warn:#9A5B00; --warn-soft:#FDF0D9;
  --t-violet:#5E23F5; --t-violet-soft:#EEE7FF;
  --t-blue:#333FFA;   --t-blue-soft:#E7E9FF;
  --t-teal:#00877F;   --t-teal-soft:#D8F7F5;
  --t-navy:#011446;   --t-navy-soft:#E4E8F3;
  --paper:#FFFFFF; --paper-ink:#0B1540;
  --shadow:0 1px 2px rgba(1,20,70,.05),0 8px 24px -12px rgba(1,20,70,.18);
  --f-display:"Nunito", "Varela Round", system-ui, sans-serif;
  --f-body:"Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, Consolas, monospace;
  --r:14px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#060B22; --surface:#0D1534; --sunk:#091029; --line:#1F2A55;
  --fg:#EEF1FB; --muted:#9EA9C9; --accent:#7E87FF; --accent-ink:#060B22; --accent-soft:#1B2266;
  --ok:#43D6B4; --ok-soft:#0E3530; --warn:#F2B654; --warn-soft:#3A2A10;
  --t-violet:#A68BFF; --t-violet-soft:#22175A;
  --t-blue:#8B93FF;   --t-blue-soft:#1A2068;
  --t-teal:#2EEBE0;   --t-teal-soft:#0B3638;
  --t-navy:#C9D2F2;   --t-navy-soft:#1A2450;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#060B22; --surface:#0D1534; --sunk:#091029; --line:#1F2A55;
  --fg:#EEF1FB; --muted:#9EA9C9; --accent:#7E87FF; --accent-ink:#060B22; --accent-soft:#1B2266;
  --ok:#43D6B4; --ok-soft:#0E3530; --warn:#F2B654; --warn-soft:#3A2A10;
  --t-violet:#A68BFF; --t-violet-soft:#22175A;
  --t-blue:#8B93FF;   --t-blue-soft:#1A2068;
  --t-teal:#2EEBE0;   --t-teal-soft:#0B3638;
  --t-navy:#C9D2F2;   --t-navy-soft:#1A2450;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6);
  color-scheme:dark}

body{font:15.5px/1.6 var(--f-body)}
.wrap{max-width:1160px;gap:26px}
header .staff{display:none}

/* Logotipo */
.logo{display:inline-flex;align-items:center;line-height:0}
.logo img{height:48px;width:auto;display:block}
.logo .on-dark{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo .on-light{display:none}:root:not([data-theme="light"]) .logo .on-dark{display:block}}
:root[data-theme="dark"] .logo .on-light{display:none}
:root[data-theme="dark"] .logo .on-dark{display:block}
@media (max-width:560px){.logo img{height:34px}}
.brandrow{align-items:center}
.lock{background:var(--ok-soft);color:var(--ok);font-weight:800;padding:6px 12px}

/* Tipografía */
.panel h2,.seo-hero h1,.seo-content h2,.more-title{font-family:var(--f-display);font-stretch:normal;letter-spacing:-.015em}
.panel h2{font-weight:900}

/* Familias de herramientas: cada una toma una barra del logotipo */
[data-id="transponer"],[data-id="transportar"],[data-id="particellas"]{--tone:var(--t-violet);--tone-soft:var(--t-violet-soft)}
[data-id="cifrado"],[data-id="guitarpro"],[data-id="notacion"]{--tone:var(--t-blue);--tone-soft:var(--t-blue-soft)}
[data-id="tono"],[data-id="analizar"],[data-id="click"]{--tone:var(--t-teal);--tone-soft:var(--t-teal-soft)}
[data-id="metronomo"],[data-id="metropartitura"],[data-id="afinador"]{--tone:var(--t-navy);--tone-soft:var(--t-navy-soft)}
.group h2{display:flex;align-items:center;gap:8px;font:800 12px/1 var(--f-body);letter-spacing:.1em}
.group h2::before{content:"";width:6px;height:16px;border-radius:99px;background:var(--gtone,var(--accent))}
.group:nth-child(1){--gtone:var(--violet)}.group:nth-child(2){--gtone:var(--blue)}.group:nth-child(3){--gtone:var(--teal)}.group:nth-child(4){--gtone:var(--navy)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .group:nth-child(4){--gtone:var(--t-navy)}}
:root[data-theme="dark"] .group:nth-child(4){--gtone:var(--t-navy)}

.tool{border-radius:16px;padding:12px 14px;border-color:var(--line);box-shadow:var(--shadow);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.tool b{font:800 15px/1.25 var(--f-display)}
.tool:hover{border-color:var(--tone,var(--accent));transform:translateY(-1px)}
.tool[aria-current="page"],.tool[aria-selected="true"]{background:var(--tone-soft,var(--accent-soft));border-color:var(--tone,var(--accent))}
.ticon,.picon{background:var(--tone-soft,var(--accent-soft));color:var(--tone,var(--accent));border-radius:12px}
.tool[aria-current="page"] .ticon,.tool[aria-selected="true"] .ticon{background:var(--tone,var(--accent));color:var(--surface)}
.picon{border-radius:16px}

/* Paneles y controles: formas redondeadas como el logotipo */
.panel{border-radius:22px;padding:24px;box-shadow:var(--shadow);border-color:var(--line)}
button,.btn{border-radius:999px;padding:11px 18px;font:800 14px/1 var(--f-body)}
button.primary,.btn.primary{background:var(--accent);border-color:var(--accent)}
button.primary:hover,.btn.primary:hover{filter:brightness(1.08)}
.drop{border-radius:18px;border-color:color-mix(in srgb,var(--accent) 35%,var(--line));background:color-mix(in srgb,var(--accent-soft) 45%,var(--surface))}
select,input[type=number],input[type=text],textarea{border-radius:12px}
.stat{border-radius:14px}
.beat{border-radius:14px}
.chip{border-radius:999px}
.paper{border-radius:16px}

/* Portada */
.home-hero{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:clamp(24px,5vw,56px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}
.home-hero h1{margin:0;font:900 clamp(32px,5.2vw,58px)/1.04 var(--f-display);letter-spacing:-.025em;color:var(--fg);text-wrap:balance;max-width:16ch}
.home-hero .intro p{margin:14px 0 0;font-size:clamp(16px,1.8vw,19px);color:var(--muted);max-width:52ch}
.home-hero .perks{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding:0;list-style:none}
.home-hero .perks li{font:800 13px/1 var(--f-body);padding:9px 14px;border-radius:999px;background:var(--sunk);color:var(--fg);border:1px solid var(--line)}
.bars{display:flex;align-items:flex-end;gap:clamp(10px,1.6vw,18px);height:clamp(120px,18vw,220px)}
.bars i{display:block;width:clamp(26px,3.4vw,46px);border-radius:999px}
.bars i:nth-child(1){height:42%;background:var(--violet)}
.bars i:nth-child(2){height:70%;background:var(--blue)}
.bars i:nth-child(3){height:100%;background:var(--teal)}
@media (prefers-reduced-motion:no-preference){.bars i{animation:tk-bar 1.6s ease-in-out infinite alternate}.bars i:nth-child(2){animation-delay:.2s}.bars i:nth-child(3){animation-delay:.4s}}
@keyframes tk-bar{from{transform:scaleY(1);transform-origin:bottom}to{transform:scaleY(.86);transform-origin:bottom}}
@media (max-width:640px){.home-hero{grid-template-columns:1fr}.bars{display:none}}
.paper svg .note,.paper svg .staff{color:inherit;font-size:inherit;opacity:1}

/* ===== Web pública: cabecera, contenido SEO y pie ===== */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
a.brand{color:var(--fg);text-decoration:none}
.seo-hero{display:flex;gap:16px;align-items:center}
.seo-hero h1{font:800 34px/1.1 var(--f-display);font-stretch:112%;margin:0;text-wrap:balance}
.seo-hero .intro p{margin:6px 0 0;color:var(--muted);max-width:70ch;font-size:16px}
.share-wa{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:6px 14px 6px 11px;border-radius:999px;background:#167a43;color:#fff;font-weight:700;font-size:14px;text-decoration:none;line-height:1.2}
.share-wa:hover,.share-wa:focus-visible{background:#105c32;color:#fff}
.is-home .seo-hero h1{font-size:30px}
@media (max-width:560px){.seo-hero h1{font-size:27px}.seo-hero .picon{width:46px;height:46px}.seo-hero .picon svg{width:30px;height:30px}}
.has-seo .panel>.phead{display:none}
.seo-content{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px clamp(16px,4vw,32px);display:grid;gap:4px}
.seo-content>*{max-width:72ch}
.seo-content h2{font:800 22px/1.2 var(--f-display);font-stretch:108%;margin:14px 0 4px}
.seo-content h3{font:700 17px/1.3 var(--f-body);margin:10px 0 2px}
.seo-content p,.seo-content li{line-height:1.65}
.seo-content p{margin:4px 0}
.seo-content ul,.seo-content ol{margin:4px 0;padding-left:22px;display:grid;gap:3px}
.seo-content a{color:var(--accent)}
.faq{display:grid;gap:8px}
.faq details{border:1px solid var(--line);border-radius:10px;padding:10px 14px;background:var(--bg)}
.faq summary{cursor:pointer;font-weight:700}
.faq details>div p{margin:8px 0 2px}
.more-tools{display:grid;gap:12px}
.more-title{font:800 20px/1.2 var(--f-display);margin:8px 0 0}
footer a{color:var(--muted)}
.footlinks{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;margin-bottom:6px}
/* ===== Marca en la web pública ===== */
.seo-hero{gap:18px}
.seo-hero h1{font:900 clamp(28px,4vw,40px)/1.08 var(--f-display);letter-spacing:-.02em}
.seo-hero .intro p{font-size:17px}
.seo-hero .picon{width:64px;height:64px;border-radius:18px}
.seo-hero .picon svg{width:42px;height:42px}
.seo-content{border-radius:22px;box-shadow:var(--shadow);padding:28px clamp(18px,4vw,40px)}
.seo-content h2{font-weight:900;font-size:24px}
.faq details{border-radius:14px;background:var(--sunk);border-color:var(--line)}
.faq summary{font-family:var(--f-display);font-weight:800}
.more-title{font-weight:900}
footer{display:grid;justify-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
footer p{margin:0}
.footlogo img{height:30px;width:auto;display:block}

/* Selector de idioma */
.brandrow{flex-wrap:wrap}
.langs{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--sunk);border:1px solid var(--line);margin-left:auto}
.langs a{font:800 12px/1 var(--f-body);letter-spacing:.06em;padding:7px 10px;border-radius:999px;color:var(--muted);text-decoration:none}
.langs a:hover{color:var(--fg)}
.langs a[aria-current]{background:var(--surface);color:var(--fg);box-shadow:var(--shadow)}
.brandrow .lock{margin-left:auto}
.brandrow .lock + .langs{margin-left:10px}
@media (max-width:560px){.brandrow .langs{order:2;margin-left:auto}.brandrow .lock{order:3;margin-left:0}.brandrow .lock + .langs{margin-left:auto}}

/* Premium: aviso bajo las herramientas y página de lista de espera */
.premium-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:16px 20px;border-radius:18px;border:1px solid color-mix(in srgb,var(--violet) 30%,var(--line));background:color-mix(in srgb,var(--t-violet-soft) 70%,var(--surface));color:var(--fg);font-size:15px}
.premium-cta div{flex:1 1 320px}
.premium-cta .btn{white-space:nowrap}
.premium{display:grid;gap:18px}
.premium .pfeat{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.premium .pfeat li{padding:14px 16px;border-radius:14px;background:var(--sunk);border:1px solid var(--line);font-weight:700;line-height:1.35}
.premium .pfeat li::before{content:"★ ";color:var(--violet)}
.waitform,.donate{display:grid;gap:12px;padding:20px;border-radius:18px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);max-width:620px}
.waitform h2,.donate h2{margin:0;font:900 22px/1.2 var(--f-display)}
.waitform label{display:grid;gap:6px;font-weight:700}
.waitform input[type=email]{font:inherit;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--fg)}
.waitform fieldset{border:1px solid var(--line);border-radius:14px;padding:10px 14px;display:grid;gap:8px}
.waitform legend{font-weight:800;padding:0 6px}
.waitform .chk{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.waitform .chk input{margin-top:4px;flex:none}
.waitform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.waitform button{justify-self:start}
.wmsg{margin:0;padding:10px 14px;border-radius:12px;font-weight:700}
.wmsg.ok{background:var(--ok-soft);color:var(--ok)}
.wmsg.err{background:var(--warn-soft);color:var(--warn)}
.donate p{margin:0}
.donate .btn{justify-self:start}
.premium-cta .btn,.premium .btn{text-decoration:none}
.premium-cta .btn{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* Aviso de cookies: abajo, sin bloquear la web; «Aceptar» y «Rechazar» con el mismo peso visual */
.ck{position:fixed;left:12px;right:12px;bottom:10px;z-index:50;max-width:980px;margin:0 auto;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 30px -10px rgba(1,20,70,.35);padding:10px 14px;display:grid;gap:10px;font-size:13px;line-height:1.45}
.ck-main{display:flex;align-items:center;gap:14px}
.ck-main p{flex:1 1 auto}
.ck-main .ck-actions{flex:none;flex-wrap:nowrap}
html.ck-open body{padding-bottom:var(--ckh,90px)}
.ck[hidden]{display:none}
.ck p{margin:0}
.ck a{color:var(--accent)}
.ck-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.ckbtn{font:800 13px/1 var(--f-body);padding:9px 14px;border-radius:999px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);cursor:pointer;min-width:92px}
.ckbtn.ghost{background:transparent;color:var(--accent)}
.ckbtn:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 40%,transparent);outline-offset:2px}
.ck-settings{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.ck-settings[hidden]{display:none}
.ckrow{display:flex;gap:10px;align-items:flex-start}
.ckrow input{margin-top:4px;flex:none;width:18px;height:18px}
.ckfoot{margin:0 0 6px;font-size:13px}
.ckfoot a{color:var(--muted)}
@media (max-width:760px){.ck-main{flex-direction:column;align-items:stretch;gap:8px}.ck-main .ck-actions{flex-wrap:wrap}}
@media (max-width:560px){.ck{left:6px;right:6px;bottom:6px;padding:10px 12px;font-size:12.5px}.ck-actions{justify-content:stretch}.ckbtn{flex:1 1 30%;min-width:0;padding:10px 6px}}

/* Valoraciones */
.rate{display:grid;gap:8px;padding:16px 20px;border-radius:18px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.rate-sum{display:flex;align-items:center;gap:10px;font-weight:800}
.stars-show{position:relative;display:inline-block;font-size:22px;line-height:1;letter-spacing:2px;color:var(--line)}
.stars-show::before{content:"★★★★★"}
.stars-show i{position:absolute;inset:0 auto 0 0;overflow:hidden;white-space:nowrap;color:#F5A623;font-style:normal}
.stars-show i::before{content:"★★★★★"}
.rate-ask{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.stars-pick{display:inline-flex;gap:2px}
.stars-pick button{background:none;border:0;padding:2px 3px;font-size:28px;line-height:1;color:var(--line);cursor:pointer;border-radius:8px}
.stars-pick button.on{color:#F5A623}
.stars-pick button:focus-visible{outline:2px solid var(--accent)}
.rate-msg{font-weight:700;color:var(--ok)}
.rate-note{margin:0;font-size:12px;color:var(--muted)}
.pdfguide{display:grid;gap:8px;padding:14px 16px;border-radius:14px;border:1px solid color-mix(in srgb,var(--warn) 35%,var(--line));background:var(--warn-soft);color:var(--fg);font-size:14px;line-height:1.5}
.pdfguide p,.pdfguide ol{margin:0}.pdfguide ol{padding-left:20px;display:grid;gap:4px}
.pdfguide a{color:var(--accent);font-weight:700}
/* Detectar acordes */
.cf-line{display:flex;flex-wrap:wrap;gap:6px;max-height:260px;overflow:auto;padding:4px;border:1px solid var(--line);border-radius:10px;position:relative}
.cf-seg{cursor:pointer;flex-direction:column;align-items:flex-start;gap:0;padding:6px 12px;min-width:58px;font:inherit;color:inherit}
.cf-seg b{font-size:16px}
.cf-seg small{font-size:11px;opacity:.65}
.cf-seg.nc{opacity:.55}
.cf-seg.on{background:var(--accent);border-color:var(--accent);color:#fff}
.cf-seg:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cf-now{display:flex;align-items:baseline;gap:14px;padding:10px 16px;border-radius:12px;background:var(--surface);border:1px solid var(--line);margin:8px 0}
.cf-now small{font-size:12px;opacity:.7;text-transform:uppercase;letter-spacing:.05em}
.cf-cur{font-family:var(--f-mono);font-size:40px;line-height:1}
.cf-next{font-size:15px;opacity:.7}
.cf-ai{border-left:3px solid var(--line);padding-left:10px}
.cf-link{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.cf-link input{flex:1 1 260px;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;background:var(--surface);color:inherit}
.cf-guide{border:1px solid var(--accent);border-radius:12px;padding:10px 14px;margin:6px 0 10px}
.cf-guide ol{margin:0;padding-left:20px;display:grid;gap:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pro-tease{font-size:14px;line-height:1.5;padding:10px 14px;border:1px dashed var(--accent);border-radius:12px;margin:10px 0}
.pro-tease a{font-weight:700}
.pro-badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:var(--accent);color:#fff;padding:2px 8px;border-radius:6px}
.pro-tease a.premium-cta{display:inline;background:none;border:0;padding:0;margin:0;border-radius:0;box-shadow:none;color:var(--accent);text-decoration:underline;white-space:nowrap}
.next{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 4px;padding-top:12px;border-top:1px solid var(--line)}
.next-t{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.next-a{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--fg);font:inherit;font-size:14px;font-weight:700;text-decoration:none;cursor:pointer}
.next-a:hover{border-color:var(--accent);color:var(--accent)}
.next-a .ticon{width:26px;height:26px;display:inline-grid;place-items:center}
.next-a .ticon svg{width:22px;height:22px}
.next-a::after{content:"→";font-weight:800;margin-left:2px}
.inst-pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px 12px;align-items:end;margin:6px 0}
.ip-col{display:grid;gap:6px;min-width:0}
.ip-col label{font-weight:700;font-size:13px}
.ip-col select{width:100%;min-width:0}
.swap{font-size:20px;line-height:1;padding:8px 12px;border-radius:999px;margin-bottom:2px}
@media (max-width:640px){.inst-pair{grid-template-columns:1fr}.inst-pair .swap{justify-self:center;transform:rotate(90deg)}}
/* Rearmonizar */
.rh-styles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin-bottom:10px}
.rh-style{display:grid;gap:2px;text-align:left;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--fg);font:inherit;cursor:pointer}
.rh-style small{opacity:.7;font-size:12px}
.rh-style[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.rh-list{display:grid;gap:6px;max-height:520px;overflow:auto;padding-right:4px}
.rh-row{display:grid;grid-template-columns:28px auto 18px minmax(0,1fr);align-items:center;gap:4px 10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.rh-row.on{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.rh-num{font-size:12px;opacity:.55;text-align:right}
.rh-orig{font-family:var(--f-mono)}
.rh-row select{min-width:0;width:100%;font-family:var(--f-mono)}
.rh-why{grid-column:2/-1;font-size:13px;opacity:.8}
@media (max-width:560px){.rh-row{grid-template-columns:auto 18px minmax(0,1fr)}.rh-num{display:none}.rh-why{grid-column:1/-1}}
.rh-two{align-items:start}
.rh-two>.step{align-content:start}
.rh-two textarea{min-height:280px}
.rh-ai{border-style:dashed}
.rh-ai .pro-badge{font-size:9.5px;vertical-align:2px}
.rh-ai-box{border:1px dashed var(--accent);border-radius:12px;padding:12px 14px;display:grid;gap:8px;margin:4px 0 12px}
.rh-ai-box[hidden],.rh-ai-sum[hidden]{display:none}
.rh-ai-box label{font-weight:700}
.rh-ai-box textarea{min-height:56px}
.rh-ai-box .chip{cursor:pointer;font:inherit;font-size:13px}
.rh-ai-sum{border-left:3px solid var(--accent);padding:6px 12px;margin:6px 0}
.rh-ai-sum p{margin:6px 0 0}
.rh-row.ai{border-color:var(--accent)}
/* Plan de estudio */
.plan>summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.plan>summary::-webkit-details-marker{display:none}
.plan>summary h3{display:inline;margin:0}
.plan>summary h3::before{content:"▸ ";color:var(--accent)}
.plan[open]>summary h3::before{content:"▾ "}
.plan .opts input[type=number]{width:84px}
.plan-progress{display:grid;gap:6px;margin:10px 0}
.plan-bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.plan-bar i{display:block;height:100%;background:var(--accent)}
.plan-day{border:1px solid var(--line);border-radius:12px;margin:6px 0;background:var(--surface)}
.plan-day>summary{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;list-style:none}
.plan-day>summary::-webkit-details-marker{display:none}
.plan-day.now{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.plan-day.done{opacity:.6}
.plan-n{font-weight:800;font-size:13px;min-width:52px}
.plan-t{flex:1;font-weight:600}
.plan-chk{display:flex;align-items:center;gap:6px;font-size:13px}
.plan-blocks{display:grid;gap:6px;padding:0 12px 12px}
.plan-b{display:flex;align-items:center;gap:10px;font-size:14px}
.plan-go{min-width:76px;padding:6px 10px;font-family:var(--f-mono)}
#ch-ai-req{width:100%}
label.opts[for=ch-simple]{cursor:pointer;align-items:center}
/* Newsletter */
.nl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px 28px;align-items:start;padding:20px 22px;margin:18px 0;border-radius:18px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.nl h2{margin:0 0 6px;font:900 21px/1.2 var(--f-display)}
.nl p{margin:0}
.nl-form{display:grid;gap:10px}
.nl-row{display:flex;gap:8px;flex-wrap:wrap}
.nl-row input{flex:1 1 220px;min-width:0;padding:11px 14px;border:1px solid var(--line);border-radius:12px;font:inherit;background:var(--bg);color:var(--fg)}
.nl .chk{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.45;font-weight:400}
.nl .chk input{margin-top:3px;flex:none;width:17px;height:17px}
.nl a{color:var(--accent)}
@media (max-width:760px){.nl{grid-template-columns:1fr;padding:16px}}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
/* Cuenta y Premium */
.acc-link{font-size:14px;font-weight:700;text-decoration:none;color:var(--fg);padding:6px 12px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}
.acc-link:hover{border-color:var(--accent);color:var(--accent)}
.acc-link .pro-badge{font-size:9.5px;vertical-align:1px}
.acc{display:grid;gap:14px;max-width:640px}
.acc .actions{margin:6px 0}
.acc-badge{margin:0}
.acc-del{margin-top:8px;font-size:14px}
.acc-del summary{cursor:pointer;color:var(--muted)}
.plans{display:grid;gap:14px;padding:22px;margin:0 0 22px;border-radius:20px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));background:var(--surface);box-shadow:var(--shadow)}
.plans h2{margin:0;font:900 26px/1.15 var(--f-display)}
.plan-feat{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px 18px}
.plan-feat li{padding-left:24px;position:relative;line-height:1.4}
.plan-feat li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:900}
.plan-feat small{opacity:.75}
.plan-feat .soon{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;background:var(--warn-soft);color:var(--warn);padding:1px 6px;border-radius:5px;vertical-align:1px}
.plan-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.plan-card{display:grid;gap:8px;align-content:start;padding:18px;border:1px solid var(--line);border-radius:16px;position:relative}
.plan-card.best{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.plan-card .pro-badge{position:absolute;top:-10px;right:14px}
.plan-card h3{margin:0;font-size:17px}
.plan-price{margin:0;font-size:15px}
.plan-price b{font:900 30px/1 var(--f-display)}
.plan-card .btn{justify-self:start}
@media (max-width:560px){.acc-link{padding:5px 9px;font-size:13px}}
/* Mis cosas */
.savebox{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 4px}
.savebox .save-title{flex:1 1 180px;min-width:0;max-width:340px}
.mc-list{list-style:none;padding:0;margin:8px 0;display:grid;gap:8px}
.mc-list li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:10px 12px;border:1px solid var(--line,#e3e7f3);border-radius:12px}
.mc-list li a{flex:1 1 200px;min-width:0;overflow-wrap:anywhere}
.mc-list li small{color:var(--muted,#6b7393)}
.mc-list .mc-del{margin:0}
.mc-list .mc-del .btn{padding:4px 10px;font-size:13px}
/* Repertorio y modo escenario */
.rep-list{list-style:none;padding:0;margin:10px 0;display:grid;gap:8px;counter-reset:rep}
.rep-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 12px;border:1px solid var(--line,#e3e7f3);border-radius:12px;counter-increment:rep}
.rep-row::before{content:counter(rep);font-weight:800;min-width:1.6em;color:var(--muted,#6b7393)}
.rep-t{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;overflow-wrap:anywhere}
.rep-t small{color:var(--muted,#6b7393)}
.rep-key,.rep-ops{display:flex;align-items:center;gap:6px}
.rep-key b{min-width:2.2em;text-align:center}
.rep-row button{padding:5px 10px}
.stage{position:fixed;inset:0;z-index:9999;background:#0b0d14;color:#f4f6fb;display:flex;flex-direction:column}
.stage-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;background:#141826;border-bottom:1px solid #262b3d}
.stage-bar button{background:#232a40;color:#f4f6fb;border:1px solid #343c58;border-radius:10px;padding:6px 12px;font-size:15px;cursor:pointer}
.stage-title{flex:1 1 200px;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage-grp{display:flex;align-items:center;gap:6px}
.stage-v{min-width:3em;text-align:center;font-variant-numeric:tabular-nums;color:#aab3d0}
.stage-body{flex:1;overflow:auto;padding:18px 22px 40vh;outline:none;-webkit-overflow-scrolling:touch}
.stage-pre{margin:0;font-family:ui-monospace,Menlo,Consolas,"Courier New",monospace;line-height:1.35;white-space:pre;color:#f4f6fb}
.stage-ch{color:#ffd166;font-weight:700}
.stage-help{margin:0;padding:6px 12px;font-size:12px;color:#8a93b2;background:#141826}
@media (max-width:560px){.stage-body{padding:12px 12px 40vh}.stage-help{display:none}}
/* Registro de práctica */
.prac-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:6px 0 12px}
.prac-stats>div{border:1px solid var(--line,#e3e7f3);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column}
.prac-stats b{font-size:20px}
.prac-stats small{color:var(--muted,#6b7393)}
.prac-chart{display:flex;align-items:flex-end;gap:6px;height:120px;padding:4px 0;margin-bottom:6px}
.prac-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.prac-col i{display:block;width:100%;max-width:34px;min-height:2px;border-radius:6px 6px 2px 2px;background:var(--accent,#3340ff)}
.prac-col small{font-size:11px;color:var(--muted,#6b7393);margin-top:3px;white-space:nowrap}
.prac-chart.bpm .prac-col i{background:#18a058}
.prac h4{margin:14px 0 4px;font-size:14px}
/* Contador de práctica */
.pt-main{text-align:center}
.pt-clock{font-size:clamp(48px,12vw,84px);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:1px;margin:6px 0 10px}
.pt-btns{justify-content:center}
.pt-go{font-size:18px;padding:12px 24px}
.pt-main input[type=text]{width:100%;max-width:520px;margin:6px auto;display:block}
.pt-main .chips{justify-content:center}
.chip.on{outline:2px solid var(--accent,#3340ff)}
.pt-lbl{display:block;margin-top:12px;font-weight:700}
.pt-manual{margin-top:12px;text-align:left}
.pt-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.pt-goal{display:flex;align-items:center;gap:10px;margin:8px 0}
.pt-goalbar{flex:1;height:12px;border-radius:99px;background:var(--line,#e3e7f3);overflow:hidden}
.pt-goalbar i{display:block;height:100%;background:#18a058;border-radius:99px}
.pt-break{display:grid;gap:6px;margin:6px 0 10px}
.pt-brow{display:grid;grid-template-columns:minmax(90px,30%) 1fr auto;align-items:center;gap:8px}
.pt-bl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-bb{height:10px;border-radius:99px;background:var(--line,#e3e7f3);overflow:hidden}
.pt-bb i{display:block;height:100%;background:var(--accent,#3340ff)}
.pt-bv{font-size:13px;color:var(--muted,#6b7393);white-space:nowrap}
.pt-list{list-style:none;padding:0;margin:6px 0;display:grid;gap:4px}
.pt-list li{display:flex;align-items:center;gap:10px;padding:6px 8px;border-bottom:1px solid var(--line,#e3e7f3)}
.pt-d{color:var(--muted,#6b7393);min-width:3.2em;font-variant-numeric:tabular-nums}
.pt-a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-del{padding:2px 8px}

/* ===== Gráficas de práctica ===== */
.pt-viz,.prac{--c0:#9AA3BC;--c1:#2a78d6;--c2:#eb6834;--c3:#1baf7a;--c4:#eda100;--c5:#e87ba4;--c6:#008300;--c7:#6250d6}
@media (prefers-color-scheme: dark){:root:where(:not([data-theme="light"])) .pt-viz,:root:where(:not([data-theme="light"])) .prac{--c0:#5D6890;--c1:#3987e5;--c2:#d95926;--c3:#199e70;--c4:#c98500;--c5:#d55181;--c6:#008300;--c7:#9085e9}}
:root[data-theme="dark"] .pt-viz,:root[data-theme="dark"] .prac{--c0:#5D6890;--c1:#3987e5;--c2:#d95926;--c3:#199e70;--c4:#c98500;--c5:#d55181;--c6:#008300;--c7:#9085e9}
.pt-viz{display:grid;gap:14px}
.pt-card{background:var(--surface,#fff);border:1px solid var(--line,#DCE1EF);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow);min-width:0}
.pt-card h4{margin:0 0 8px;font-size:15px;font-family:var(--f-display,inherit)}
.pt-viz .pt-head{margin-bottom:6px}.pt-viz .pt-head h4{margin:0}
.vz-wrap{position:relative;min-width:0;overflow:hidden}
.vz-svg{display:block;max-width:100%;height:auto;overflow:visible}
.vz-ax{font-size:11px;fill:var(--muted,#55617F);font-family:var(--f-body,inherit)}
.vz-b{font-weight:800;fill:var(--fg,#0B1540)}
.vz-grid{stroke:var(--line,#DCE1EF);stroke-width:1;opacity:.7}
.vz-base{stroke:var(--muted,#55617F);stroke-width:1;opacity:.5}
.vz-goal{stroke:var(--fg,#0B1540);stroke-width:1.5;stroke-dasharray:5 4;opacity:.55}
.vz-goalt{font-weight:700;fill:var(--fg,#0B1540);opacity:.75}
.vz-hit{fill:transparent}
.vz-zero{fill:var(--line,#DCE1EF)}
.vz-col{outline:none;cursor:default}
.vz-col:hover .vz-hit,.vz-col:focus-visible .vz-hit{fill:var(--sunk,#EEF1F9)}
.vz-col.now .vz-hit{fill:var(--accent-soft,#E9EBFF);opacity:.55}
.vz-tip{position:absolute;z-index:5;pointer-events:none;background:var(--fg,#0B1540);color:var(--surface,#fff);border-radius:10px;padding:7px 10px;font-size:12.5px;line-height:1.35;white-space:nowrap;box-shadow:0 6px 18px rgba(1,20,70,.25)}
.vz-tip b{display:block;margin-bottom:2px;text-transform:capitalize}
/* Cabecera: anillo + cifras */
.pt-hero{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;background:linear-gradient(135deg,var(--accent-soft,#E9EBFF),var(--surface,#fff) 70%);border:1px solid var(--line,#DCE1EF);border-radius:18px;padding:16px}
.pt-ringbox{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.pt-ringbox small{color:var(--muted,#55617F);font-weight:700}.pt-ringbox small.done{color:var(--ok,#0A7A62)}
.vz-track{fill:none;stroke:var(--surface,#fff);opacity:.9}
.vz-prog{fill:none;stroke:var(--accent,#333FFA);stroke-linecap:round;transition:stroke-dasharray .6s ease}
.vz-prog.done{stroke:var(--ok,#0A7A62)}
.vz-c1{font-size:21px;font-weight:800;fill:var(--fg,#0B1540);font-family:var(--f-display,inherit)}
.vz-c2{font-size:12px;fill:var(--muted,#55617F)}
.pt-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pt-kpi{background:var(--surface,#fff);border:1px solid var(--line,#DCE1EF);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;min-width:0}
.pt-ki{font-size:18px;line-height:1}
.pt-kpi b{font-size:22px;font-family:var(--f-display,inherit);margin-top:4px;font-variant-numeric:tabular-nums}
.pt-kpi small{color:var(--muted,#55617F)}
.pt-kpi em{font-style:normal;font-size:12px;color:var(--muted,#55617F);margin-top:2px}
/* Selector de periodo */
.pt-seg{display:inline-flex;background:var(--sunk,#EEF1F9);border-radius:99px;padding:3px;gap:2px}
.pt-seg button{border:0;background:transparent;border-radius:99px;padding:5px 12px;font-weight:700;color:var(--muted,#55617F);cursor:pointer;min-height:0}
.pt-seg button[aria-pressed="true"]{background:var(--surface,#fff);color:var(--fg,#0B1540);box-shadow:var(--shadow)}
.pt-chips{list-style:none;display:flex;flex-wrap:wrap;gap:4px 14px;padding:0;margin:8px 0 0;font-size:13px;color:var(--muted,#55617F)}
.pt-chips li{display:flex;align-items:center;gap:6px}
.pt-chips i,.pt-leg>li>i,.pt-dot{display:inline-block;width:11px;height:11px;border-radius:3px;flex:none}
/* Donut + leyenda */
.pt-donutrow{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.vz-slice{stroke:var(--surface,#fff);stroke-width:2;outline:none;transition:opacity .15s}
.vz-donut:hover .vz-slice{opacity:.55}.vz-donut .vz-slice:hover,.vz-donut .vz-slice:focus-visible{opacity:1}
.pt-leg{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.pt-leg>li{display:grid;grid-template-columns:auto minmax(0,1fr) auto 3.2em;grid-template-rows:auto auto;column-gap:8px;align-items:center}
.pt-ln{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.pt-lv{font-variant-numeric:tabular-nums}
.pt-lp{text-align:right;color:var(--muted,#55617F);font-variant-numeric:tabular-nums}
.pt-lb{grid-column:2/5;height:5px;border-radius:99px;background:var(--sunk,#EEF1F9);overflow:hidden;margin-top:3px}
.pt-lb i{display:block;height:100%;border-radius:99px}
/* Calendario de calor */
.vz-h0{fill:var(--sunk,#EEF1F9)}
.vz-h1{fill:var(--accent,#333FFA);fill-opacity:.25}.vz-h2{fill:var(--accent,#333FFA);fill-opacity:.5}
.vz-h3{fill:var(--accent,#333FFA);fill-opacity:.78}.vz-h4{fill:var(--accent,#333FFA)}
.vz-heat rect.now{stroke:var(--fg,#0B1540);stroke-width:2}
.vz-heat rect:hover{stroke:var(--fg,#0B1540);stroke-width:1.5}
.pt-heatleg{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-top:8px;font-size:12px;color:var(--muted,#55617F)}
.pt-heatleg i{width:12px;height:12px;border-radius:3px;display:inline-block}
.pt-heatleg i.vz-h0{background:var(--sunk,#EEF1F9)}.pt-heatleg i.vz-h1{background:color-mix(in srgb,var(--accent,#333FFA) 25%,transparent)}
.pt-heatleg i.vz-h2{background:color-mix(in srgb,var(--accent,#333FFA) 50%,transparent)}.pt-heatleg i.vz-h3{background:color-mix(in srgb,var(--accent,#333FFA) 78%,transparent)}.pt-heatleg i.vz-h4{background:var(--accent,#333FFA)}
.pt-locked{position:relative;overflow:hidden}
.pt-blur{filter:blur(3px);opacity:.55;pointer-events:none}
.pt-lockmsg{position:absolute;inset:40px 12px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px}
.pt-lockmsg p{margin:0;max-width:420px;font-weight:700;background:var(--surface,#fff);border-radius:10px;padding:6px 10px}
.pt-recent .pt-list li{gap:8px}
@media (max-width:640px){
  .pt-hero{grid-template-columns:1fr;justify-items:center}
  .pt-kpis{width:100%}
  .pt-donutrow{grid-template-columns:1fr;justify-items:center}
  .pt-leg{width:100%}
  .pt-card{padding:12px}
}
.vz-goalt{paint-order:stroke;stroke:var(--surface,#fff);stroke-width:4px;stroke-linejoin:round}
.vz-c1.sm{font-size:17px}
@media (max-width:640px){.pt-kpi b{font-size:18px}.pt-kpis{gap:8px}}
/* PDF a MusicXML */
.omr-status{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:15px;min-height:24px}
.omr-status small{color:var(--muted)}.omr-status progress{flex-basis:100%;width:100%;max-width:420px;height:8px;accent-color:var(--accent)}
.omr-status .spin{width:16px;height:16px;border-radius:50%;border:2px solid color-mix(in srgb,var(--accent) 25%,transparent);border-top-color:var(--accent);animation:omrspin .8s linear infinite;flex:none}
@keyframes omrspin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.omr-status .spin{animation:none}}
.omr-err{color:var(--danger,#c0392b);font-weight:600}.omr-warn{color:var(--fg);background:var(--warn-soft);padding:2px 8px;border-radius:8px}
.drop.busy{opacity:.55;pointer-events:none}
.omr-cmp{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.omr-cmp>div{min-width:0}.omr-cmp h3{margin:0 0 8px}
.omr-orig{display:grid;gap:10px}
.omr-page{display:block;width:100%;height:auto;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.omr-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-top:8px}
.omr-parts summary{cursor:pointer;font-weight:700}
@media (max-width:860px){.omr-cmp{grid-template-columns:1fr}}
.omr-rights{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;font-size:14px;line-height:1.45;cursor:pointer;margin-bottom:10px}
.omr-rights input{margin-top:3px;flex:none;width:18px;height:18px;accent-color:var(--accent)}
.omr-rights.need{border-color:var(--danger,#c0392b);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger,#c0392b) 18%,transparent)}
/* Afinador por micrófono */
.tn-box{display:grid;justify-items:center;gap:4px;padding:8px 0 4px}
.tn-gauge{width:min(380px,100%);height:auto;overflow:visible}
.tn-track{fill:none;stroke:var(--line);stroke-width:14;stroke-linecap:round}
.tn-ok{fill:none;stroke:#1baf7a;stroke-width:14;opacity:.35;transition:opacity .2s}
.tn-gauge.in .tn-ok{opacity:1}
.tn-tick{stroke:var(--muted);stroke-width:1.5}.tn-tick0{stroke:var(--fg);stroke-width:3}
.tn-lbl{font-size:11px;fill:var(--muted)}
.tn-needle{stroke:var(--accent);stroke-width:4;stroke-linecap:round}
.tn-gauge.in .tn-needle{stroke:#1baf7a}.tn-hub{fill:var(--fg)}
.tn-note{font-size:56px;font-weight:800;line-height:1;letter-spacing:-.02em;transition:opacity .3s}.tn-note small{font-size:22px;font-weight:700;margin-left:2px;color:var(--muted)}
.tn-note.dim{opacity:.35}
.tn-sub{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums;text-align:center}
.tn-verdict{min-height:28px;font-weight:800;font-size:18px;padding:2px 14px;border-radius:999px}
.tn-verdict.ok{color:#fff;background:#1baf7a}.tn-verdict.lo,.tn-verdict.hi{color:var(--fg);background:var(--warn-soft)}
.string.hear{outline:3px solid var(--accent);outline-offset:2px}
@media (prefers-color-scheme:dark){.tn-ok{stroke:#199e70}.tn-gauge.in .tn-needle{stroke:#199e70}.tn-verdict.ok{background:#199e70}}
.omr-precise{margin-top:14px}.omr-precise .omr-rights{margin-top:10px}
.omr-kind{margin-bottom:10px}.omr-kind select{max-width:100%}

.savebox-up{flex-basis:100%;margin:2px 0 0}.upsell a{font-weight:700}

.cmp-wrap{overflow-x:auto;margin:0 -4px}
.cmp-table{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;line-height:1.35}
.cmp-table th,.cmp-table td{padding:10px 12px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line)}
.cmp-table thead th{font:800 17px/1.2 var(--f-display);border-bottom:2px solid var(--line)}
.cmp-table thead small{display:block;font:600 12.5px/1.3 var(--f-body,inherit);color:var(--muted);margin-top:2px}
.cmp-table tbody th{font-weight:600;width:40%}
.cmp-table td{width:30%;color:var(--muted)}
.cmp-table .cmp-prem{background:color-mix(in srgb,var(--accent) 7%,transparent);color:var(--fg);font-weight:700}
.cmp-table thead .cmp-prem{border-radius:12px 12px 0 0;color:var(--accent)}
.cmp-table tbody tr:last-child .cmp-prem{border-radius:0 0 12px 12px}
.cmp-table .cmp-yes{color:var(--ok,#1b7f4a);font-weight:900;font-size:18px}
.cmp-table .cmp-no{opacity:.55}
.cmp-table .soon{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;background:var(--warn-soft);color:var(--warn);padding:2px 6px;border-radius:5px}
@media (max-width:560px){.cmp-table{font-size:13px;table-layout:fixed}.cmp-table th,.cmp-table td{padding:8px 6px;overflow-wrap:anywhere;hyphens:auto}.cmp-table tbody th{width:36%}.cmp-table td{width:32%}.cmp-table thead th{font-size:15px}.cmp-table .soon{font-size:9px;letter-spacing:0;padding:2px 4px;white-space:normal;display:inline-block}}