/* ============================================================
   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: horizontales, la cuerda gruesa arriba */
.teo-digs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.teo-dig{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 8px 8px;text-align:center}
.teo-dig svg{width:100%;height:auto}
.teo-dig figcaption{margin-top:4px}
.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-f{stroke:#4a4a4a;stroke-width:1.2}
.dg-f.cejuela{stroke:#f4f4f0;stroke-width:4}
.dg-c{stroke:#5a5a5a;stroke-width:1}
.dg-cn{fill:#6a6a6a;font-size:9px;font-family:'Inter',sans-serif}
.dg-ca{fill:var(--gris);font-size:10px;font-family:'DejaVu Sans Mono',monospace}
.dg-fn{fill:var(--gris);font-size:10px;text-anchor:middle;font-family:'DejaVu Sans Mono',monospace}
.dg-x{fill:var(--gris);font-size:11px;text-anchor:middle}
.dg-o{fill:none;stroke:var(--blanco);stroke-width:1.4}
.dg-p{stroke:none}
.dg-d{fill:#0a0a0a;font-size:10px;font-weight:700;text-anchor:middle;font-family:'Inter',sans-serif}
.dg-n{font-size:10px;font-family:'DejaVu Sans Mono',monospace}
.dg-g{fill:var(--gris);font-size:9px}
.dg-cej{fill:rgba(244,244,240,.28)}
.dg-capo{fill:var(--lima);opacity:.85}

/* posiciones de una escala */
.teo-poss{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.ps .dg-d{font-size:9px}
.dg-p.raiz{stroke:#f4f4f0;stroke-width:1.6}

/* 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}

/* el manual de lectura, dentro de la pantalla */
.teo-ayuda{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);margin-bottom:16px;overflow:hidden}
.teo-ayuda-t{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;background:none;border:none;
  color:var(--lima);font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.4px;font-size:13px;padding:12px 14px;cursor:pointer}
.teo-ayuda-t i{font-style:normal;color:var(--gris);font-size:11px;font-family:'Inter',sans-serif;text-transform:none}
.teo-ayuda-c{display:none;padding:0 14px 14px}
.teo-ayuda.abierta .teo-ayuda-c{display:block}
.teo-ayuda-ej{display:flex;gap:12px;flex-wrap:wrap}
.dg-ej{margin:0;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px 8px 6px;flex:1 1 240px;max-width:340px;text-align:center}
.dg-ej svg{width:100%;height:auto}
.dg-ej figcaption{font-size:11px;color:var(--gris);margin-top:2px}
.teo-ayuda-l{margin:14px 0 12px;padding-left:20px}
.teo-ayuda-l li{font-size:13px;line-height:1.55;color:var(--gris);margin-bottom:9px}
.teo-ayuda-l li b{color:var(--blanco);font-weight:600}
.teo-ayuda.guiada .teo-ayuda-l li{opacity:.28;transition:opacity .15s}
.teo-ayuda.guiada .teo-ayuda-l li.on{opacity:1}
.teo-ayuda-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.teo-ayuda-num{font-size:11px;color:var(--gris)}
.teo-chip[disabled]{opacity:.4;cursor:default}
/* durante la guía, en el ejemplo solo se ve de lo que se está hablando */
.teo-ayuda.guiada .dg-ej svg *{opacity:.15;transition:opacity .15s}
.teo-ayuda.guiada[data-paso="cuerdas"] .dg-ej .dg-c,
.teo-ayuda.guiada[data-paso="cuerdas"] .dg-ej .dg-cn,
.teo-ayuda.guiada[data-paso="cuerdas"] .dg-ej .dg-ca,
.teo-ayuda.guiada[data-paso="trastes"] .dg-ej .dg-f,
.teo-ayuda.guiada[data-paso="trastes"] .dg-ej .dg-fn,
.teo-ayuda.guiada[data-paso="aire"] .dg-ej .dg-x,
.teo-ayuda.guiada[data-paso="aire"] .dg-ej .dg-o,
.teo-ayuda.guiada[data-paso="dedos"] .dg-ej .dg-p,
.teo-ayuda.guiada[data-paso="dedos"] .dg-ej .dg-d,
.teo-ayuda.guiada[data-paso="color"] .dg-ej .dg-p,
.teo-ayuda.guiada[data-paso="cejilla"] .dg-ej .dg-cej,
.teo-ayuda.guiada[data-paso="cejilla"] .dg-ej .dg-p,
.teo-ayuda.guiada[data-paso="notas"] .dg-ej .dg-n,
.teo-ayuda.guiada[data-paso="notas"] .dg-ej .dg-g{opacity:1}

/* leyenda de colores */
.teo-leyenda{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.teo-leyenda b{font-size:11px;color:var(--blanco);font-weight:600}
.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}
/* 130px apretaba los tres diagramas del modal hasta que no se leían ni los
   trastes ni los números del dedo. Con 200 caben los tres en un modal ancho y
   se leen; en pantalla estrecha, auto-fit los baja a dos o a uno. */
.teo-mini .teo-digs{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* Tocar una posición para verla grande. Es lo que se hace de verdad: se miran
   las tres, se elige una, y esa es la que hay que poder leer bien. */
.teo-dig-tap{cursor:pointer;transition:border-color .15s}
.teo-dig-tap:hover,.teo-dig-tap:focus-visible{border-color:var(--lima);outline:none}
.teo-dig-tap.grande{grid-column:1/-1;border-color:var(--lima);max-width:520px;margin:0 auto;padding:16px 14px 12px}
.teo-dig-tap.grande figcaption b{font-size:15px}
.teo-dig-tap.grande figcaption span{font-size:13px}
.teo-tip{text-align:center;margin:10px 0 0;color:var(--gris)}

/* ============================================================
   ¿QUÉ ACORDE ES ESTE? — el mástil donde se dibuja
   El diapasón se pinta con las mismas piezas que los diagramas (.dg-*), así
   que aquí solo va lo que cambia: casillas más grandes porque se PULSAN —y a
   menudo con el dedo—, y el punto que aparece al pasar por encima para que se
   vea dónde vas a poner la nota antes de ponerla.
   ============================================================ */
.rc-cab{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
.rc-cab h3{margin:0 0 2px}
.rc-acciones{display:flex;align-items:center;gap:8px;flex:none}

.rc-mastil{min-width:520px}
.rc-celda{cursor:pointer}
/* el punto solo se ve si esa casilla está puesta… */
.rc-punto{fill:transparent;stroke:none;transition:fill .08s}
.rc-celda.on .rc-punto{fill:var(--lima)}
/* …o si el ratón está encima, como una vista previa de dónde caería */
.rc-celda:hover .rc-punto{fill:rgba(200,255,0,.28)}
.rc-celda.on:hover .rc-punto{fill:var(--lima)}
.rc-celda:focus{outline:none}
.rc-celda:focus-visible .rc-punto{fill:rgba(200,255,0,.5);stroke:var(--lima);stroke-width:1.5}
.rc-aire{cursor:pointer}
.rc-aire:focus{outline:none}
.rc-aire:focus-visible .dg-o,.rc-aire:focus-visible .rc-vacio{stroke:var(--lima)}
/* la cuerda que no está ni muda ni al aire: un aro apagado que invita a tocarlo */
.rc-vacio{fill:none;stroke:var(--line);stroke-width:1.4}
.rc-aire:hover .rc-vacio{stroke:var(--gris)}

/* ---- el resultado ---- */
.rc-res{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
.rc-nombre{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.rc-nombre b{font-family:'Oswald',system-ui,sans-serif;font-size:38px;line-height:1;color:var(--lima);letter-spacing:.01em}
.rc-uso{margin:8px 0 12px;color:var(--blanco);font-size:14px}
.rc-notas{display:flex;flex-wrap:wrap;gap:8px}
.rc-nota{display:flex;flex-direction:column;gap:1px;padding:7px 11px;border-radius:10px;
  border:1px solid var(--c,var(--line));background:var(--panel2);min-width:74px}
.rc-nota b{color:var(--c,var(--blanco));font-family:'Oswald',system-ui,sans-serif;font-size:19px;line-height:1.1}
.rc-nota i{font-style:normal;color:var(--gris);font-size:11px}
.rc-nota u{text-decoration:none;color:var(--gris);font-size:10px;text-transform:uppercase;letter-spacing:.04em}
/* la nota del acorde que NO está sonando se ve apagada: dice qué falta */
.rc-nota.muda{opacity:.42;border-style:dashed}
.rc-nota.bajo{border-color:var(--gris)}
.rc-nota.bajo b{color:var(--blanco)}

.rc-otros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.rc-cand{display:flex;flex-direction:column;gap:1px;text-align:left;cursor:pointer;
  padding:6px 10px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);
  color:var(--blanco);font:inherit}
.rc-cand:hover{border-color:var(--lima-dim)}
.rc-cand b{font-family:'Oswald',system-ui,sans-serif;font-size:15px}
.rc-cand small{color:var(--gris);font-size:11px}
.rc-ir{margin:14px 0 0}

@media(max-width:560px){
  .rc-nombre b{font-size:30px}
  .rc-acciones{width:100%;justify-content:space-between}
}

/* ============================================================
   AFINADOR
   Se mira de lejos y con las manos ocupadas: la nota y la aguja mandan, y
   todo lo demás se aparta. El verde es el mismo lima de la marca, así que
   "está en verde" y "está bien" son lo mismo en toda la app.
   ============================================================ */
.af-panel{text-align:center}
.af-arranque{padding:24px 8px}
.af-arranque h3{margin:0 0 8px;font-size:22px}
.af-arranque p{max-width:44ch;margin:0 auto 18px}

/* ---- la barra y la aguja ---- */
.af-medidor{padding:6px 0 2px}
.af-barra{position:relative;height:64px;margin:0 auto 6px;max-width:640px;
  border-radius:12px;background:var(--panel2);border:1px solid var(--line);overflow:hidden}
.af-marca{position:absolute;top:14px;bottom:14px;width:1px;background:var(--line)}
.af-marca.m50{left:0}.af-marca.m25{left:25%}.af-marca.p25{left:75%}.af-marca.p50{right:0}
/* la franja del centro es la zona "afinada": ±5 cents de 100 que mide la barra */
.af-centro{position:absolute;top:0;bottom:0;left:45%;width:10%;
  background:rgba(200,255,0,.07);border-left:1px solid var(--lima-dim);border-right:1px solid var(--lima-dim)}
.af-aguja{position:absolute;top:6px;bottom:6px;width:4px;margin-left:-2px;border-radius:2px;
  background:var(--gris);transition:left .07s linear,background .15s}
.af-medidor.baja .af-aguja,.af-medidor.alta .af-aguja{background:#e0a33f}
.af-medidor.afinada .af-aguja{background:var(--lima);box-shadow:0 0 16px rgba(200,255,0,.55)}
.af-medidor.afinada .af-centro{background:rgba(200,255,0,.16)}

/* ---- la lectura ---- */
.af-lectura{display:flex;align-items:baseline;justify-content:center;gap:14px;margin-top:10px}
.af-nota{font-family:'Oswald',system-ui,sans-serif;font-size:76px;line-height:1;color:var(--blanco)}
.af-medidor.afinada .af-nota{color:var(--lima)}
.af-cents{font-family:'Oswald',system-ui,sans-serif;font-size:30px;color:var(--gris);min-width:4ch;text-align:left}
.af-medidor.afinada .af-cents{color:var(--lima-dim)}
.af-hz{margin:2px 0 0;color:var(--gris);font-size:13px}
.af-dir{margin:6px 0 0;font-size:15px;color:var(--blanco);min-height:1.4em}
.af-medidor.afinada .af-dir{color:var(--lima);font-weight:600}
.af-medidor.esperando .af-nota{color:var(--line)}

/* ---- las cuerdas ---- */
.af-cuerdas{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.af-cuerda{display:flex;flex-direction:column;gap:1px;min-width:74px;padding:8px 12px;
  border-radius:11px;border:1px solid var(--line);background:var(--panel2);color:var(--blanco);font:inherit}
.af-cuerda b{font-family:'Oswald',system-ui,sans-serif;font-size:20px;line-height:1.1}
.af-cuerda small{color:var(--gris);font-size:10px}
/* la que se está tocando ahora */
.af-cuerda.on{border-color:var(--blanco)}
/* y la que ya se dio por buena, que se queda marcada un rato */
.af-cuerda.lista{border-color:var(--lima);background:rgba(200,255,0,.08)}
.af-cuerda.lista b{color:var(--lima)}

.af-acciones{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;
  margin-top:20px;padding-top:14px;border-top:1px solid var(--line)}
.af-nota-crom{max-width:52ch;margin:18px auto 0}

/* En el móvil, que es donde se afina de verdad, la nota ocupa lo que haga falta */
@media(max-width:560px){
  .af-nota{font-size:60px}
  .af-cents{font-size:24px}
  .af-barra{height:54px}
  .af-cuerda{min-width:62px;padding:7px 9px}
}

/* la cuerda que está dando la nota, para afinar de oído */
.af-cuerda{cursor:pointer;transition:border-color .12s,background .12s}
.af-cuerda:hover{border-color:var(--gris)}
.af-cuerda.sonando{border-color:var(--lima);background:rgba(200,255,0,.14);
  animation:af-late 1.1s ease-in-out infinite}
.af-cuerda.sonando b{color:var(--lima)}
@keyframes af-late{0%,100%{box-shadow:0 0 0 0 rgba(200,255,0,.35)}50%{box-shadow:0 0 0 7px rgba(200,255,0,0)}}
@media(prefers-reduced-motion:reduce){.af-cuerda.sonando{animation:none}}
.af-oido,.af-o-bien{max-width:48ch;margin:14px auto 0}
.af-o-bien{margin-top:22px}