/* ============================================================
   SHOWLY · Acordes y escalas
   Todo lo que se ve aquí es SVG generado por js/vista-teoria.js.
   Regla de oro de esta pantalla: el color dice la función de la nota, y es
   el mismo en el diagrama, en el mástil y en el teclado.
   ============================================================ */

.teo{max-width:1100px;margin:0 auto;padding:4px 0 40px}

/* cabecera: pestañas y ajustes */
.teo-head{position:sticky;top:0;z-index:5;background:var(--bg2);padding:10px 0 8px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.teo-tabs{display:flex;gap:6px;margin-bottom:10px}
.teo-tabs button{flex:0 0 auto;background:var(--panel);border:1px solid var(--line);color:var(--gris);
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.4px;font-size:13px;
  padding:8px 16px;border-radius:999px;cursor:pointer}
.teo-tabs button.on{background:var(--lima);border-color:var(--lima);color:#0a0a0a}
.teo-ajustes{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.teo-campo{display:flex;flex-direction:column;gap:3px}
.teo-campo span{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--gris)}
.teo-campo select{background:var(--panel);border:1px solid var(--line);color:var(--blanco);
  border-radius:8px;padding:6px 8px;font-size:13px;max-width:230px}
.teo-chip{background:var(--panel);border:1px solid var(--line);color:var(--gris);border-radius:999px;
  padding:6px 12px;font-size:12px;cursor:pointer}
.teo-chip.on{border-color:var(--lima);color:var(--lima)}
.teo-afin-notas{margin-left:auto;font-family:'DejaVu Sans Mono',monospace;font-size:12px;color:var(--gris);letter-spacing:2px}

/* las doce notas */
.teo-notas{display:flex;flex-wrap:wrap;gap:5px;margin:14px 0 10px}
.teo-nota{flex:1 1 60px;min-width:58px;background:var(--panel);border:1px solid var(--line);color:var(--blanco);
  border-radius:10px;padding:10px 4px;font-family:'Oswald',sans-serif;font-size:15px;cursor:pointer;transition:.12s}
.teo-nota:hover{border-color:var(--gris)}
.teo-nota.on{background:var(--lima);border-color:var(--lima);color:#0a0a0a}

/* familias de acordes y de escalas */
.teo-tipos{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.teo-fam{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.teo-fam-t{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--gris);margin-bottom:6px}
.teo-fam-l{display:flex;flex-wrap:wrap;gap:4px}
.teo-tipo{background:var(--panel2);border:1px solid var(--line);color:var(--blanco);border-radius:7px;
  padding:5px 9px;font-family:'DejaVu Sans Mono',monospace;font-size:12px;cursor:pointer}
.teo-tipo.lg{font-family:'Inter',sans-serif;font-size:12px}
.teo-tipo:hover{border-color:var(--gris)}
.teo-tipo.on{background:var(--lima);border-color:var(--lima);color:#0a0a0a}

/* ficha del acorde o de la escala */
.teo-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:16px}
.teo-titulo h2{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:30px;line-height:1;margin:0}
.teo-sub{color:var(--gris);font-size:13px;margin:4px 0 0}
.teo-uso{margin:10px 0 14px;font-size:14px;line-height:1.5;color:var(--blanco)}
.teo-notas-ac{display:flex;flex-wrap:wrap;gap:8px}
.teo-nota-ac{border:1px solid var(--c);border-radius:10px;padding:8px 12px;min-width:96px;background:rgba(255,255,255,.02)}
.teo-nota-ac b{display:block;font-family:'Oswald',sans-serif;font-size:20px;color:var(--c);line-height:1.1}
.teo-nota-ac i{display:block;font-style:normal;font-family:'DejaVu Sans Mono',monospace;font-size:12px;color:var(--blanco)}
.teo-nota-ac span{display:block;font-size:11px;color:var(--gris)}
.teo-formula{margin:14px 0 0;font-size:13px;color:var(--gris)}
.teo-formula b{color:var(--blanco);font-family:'DejaVu Sans Mono',monospace}

/* secciones */
.teo-sec{margin-bottom:22px}
.teo-sec h3{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:14px;color:var(--lima);
  margin:0 0 10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.teo-sec h3 b{color:var(--blanco)}
.teo-scroll{overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}

/* diagramas */
.teo-digs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.teo-dig{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 6px 8px;text-align:center}
.teo-dig svg{width:100%;height:auto;max-width:170px}
.teo-dig figcaption{margin-top:6px}
.teo-dig figcaption b{display:block;font-size:12px;color:var(--blanco)}
.teo-dig figcaption span{display:block;font-size:11px;color:var(--gris)}
.dg-l{stroke:#4a4a4a;stroke-width:1.2}
.dg-fr{fill:var(--gris);font-size:12px;font-family:'DejaVu Sans Mono',monospace}
.dg-x{fill:var(--gris);font-size:13px;text-anchor:middle}
.dg-o{fill:none;stroke:var(--blanco);stroke-width:1.5}
.dg-p{stroke:none}
.dg-d{fill:#0a0a0a;font-size:11px;font-weight:700;text-anchor:middle;font-family:'Inter',sans-serif}
.dg-n{font-size:10px;text-anchor:middle;font-family:'DejaVu Sans Mono',monospace}
.dg-g{fill:var(--gris);font-size:9px;text-anchor:middle;font-family:'DejaVu Sans Mono',monospace}
.dg-cej{fill:rgba(244,244,240,.85)}
.dg-capo{fill:rgba(200,255,0,.22);stroke:var(--lima);stroke-width:1}
.dg-capo-txt{fill:var(--lima);font-size:8px;text-anchor:middle;font-family:'Inter',sans-serif}

/* mástil */
.mt{min-width:760px;height:auto}
.mt-f{stroke:#3a3a3a;stroke-width:1.4}
.mt-f.cejuela{stroke:#f4f4f0;stroke-width:4}
.mt-c{stroke:#4a4a4a;stroke-width:1}
.mt-num{fill:var(--gris);font-size:11px;text-anchor:middle;font-family:'DejaVu Sans Mono',monospace}
.mt-aire{fill:var(--gris);font-size:11px;text-anchor:middle;font-family:'DejaVu Sans Mono',monospace}
.mt-marca{fill:#2f2f2f}
.mt-p{stroke:none}
.mt-p.raiz{stroke:#f4f4f0;stroke-width:1.5}
.mt-t{fill:#0a0a0a;font-size:9px;font-weight:700;text-anchor:middle;font-family:'Inter',sans-serif}

/* teclado */
.tk{min-width:440px;height:auto}
.tk-b{fill:#e9e9e4;stroke:#0a0a0a;stroke-width:1}
.tk-n2{fill:#141414;stroke:#000;stroke-width:1}
.tk-n{fill:#0a0a0a;font-size:10px;text-anchor:middle;font-family:'DejaVu Sans Mono',monospace}
.tk-g{font-size:10px;text-anchor:middle;font-family:'DejaVu Sans Mono',monospace}
.tk-gn{fill:#0a0a0a;font-size:9px;text-anchor:middle;font-weight:700;font-family:'Inter',sans-serif}

/* leyenda de colores */
.teo-leyenda{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.teo-leyenda span{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--gris)}
.teo-leyenda i{width:10px;height:10px;border-radius:50%;display:inline-block}

/* sugerencias, grados y pie */
.teo-sug{display:flex;flex-wrap:wrap;gap:8px}
.teo-sug-b{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;cursor:pointer;max-width:280px}
.teo-sug-b:hover{border-color:var(--lima)}
.teo-sug-b.on{border-color:var(--lima)}
.teo-sug-b b{display:block;color:var(--blanco);font-size:13px}
.teo-sug-b span{display:block;color:var(--gris);font-size:11px;margin-top:2px;line-height:1.35}
.teo-grados{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.teo-grado{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;cursor:pointer;text-align:left}
.teo-grado:hover{border-color:var(--lima)}
.teo-grado i{display:block;font-style:normal;font-family:'DejaVu Sans Mono',monospace;font-size:11px;color:var(--lima)}
.teo-grado b{display:block;font-family:'Oswald',sans-serif;font-size:18px;color:var(--blanco);line-height:1.2}
.teo-grado span{display:block;font-size:10px;color:var(--gris);font-family:'DejaVu Sans Mono',monospace}
.teo-pie{font-size:11px;color:var(--gris);line-height:1.5;border-top:1px solid var(--line);padding-top:12px;margin-top:6px}

@media (max-width:640px){
  .teo-head{position:static}
  .teo-afin-notas{display:none}
  .teo-titulo h2{font-size:24px}
  .teo-digs{grid-template-columns:repeat(auto-fill,minmax(124px,1fr))}
  .teo-campo select{max-width:150px}
}

/* el acorde de la letra se puede pulsar para ver cómo se hace */
.cp-chord{cursor:pointer}
.esc-sec .cp-chord{cursor:default}   /* en el escenario no se abren ventanas */
.teo-mini{padding:0}
.teo-mini .teo-panel{margin-bottom:12px;padding:12px 14px}
.teo-mini .teo-titulo h2{font-size:24px}
.teo-mini .teo-nota-ac{min-width:64px;padding:6px 10px}
.teo-mini .teo-digs{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}