/* ============================================================
   styles.css · Todo el diseño de Orion. Prohibidos los estilos
   inline en el contenido. Paleta tomada del logotipo y de la
   imagen de marca de la Academia (azul marino, azul, cian, violeta).
   Todo color nuevo debe pasar contraste WCAG AA en AMBOS temas.
   ============================================================ */

:root {
  --bg: #f6f7fc;
  --bg-2: #eceef8;
  --card: #ffffff;
  --text: #0c1030;
  --text-2: #3c4268;
  --text-3: #555c80;
  --borde: #d3d7ea;
  --marca: #000752;            /* azul marino del logotipo */
  --acento: #0a4bb0;           /* azul de la imagen de marca */
  --acento-texto: #ffffff;     /* texto sobre --acento */
  --acento-suave: #e3ebfb;
  --logo: #000752;
  --ok: #0b6b3a;      --ok-bg: #e4f4ea;
  --mal: #a3162b;     --mal-bg: #fbe8eb;
  --aviso: #7a4b00;   --aviso-bg: #fdf1d9;
  --sombra: 0 1px 2px rgba(0, 7, 82, .08), 0 4px 14px rgba(0, 7, 82, .06);
  --radio: 12px;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --mono-cancion: "Courier New", Courier, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", monospace;   /* como los textos de la Academia: mantiene cada acorde sobre su sílaba */
}

[data-theme="dark"] {
  --bg: #070a26;
  --bg-2: #0d1236;
  --card: #111742;
  --text: #eef0ff;
  --text-2: #c6cbeb;
  --text-3: #a3aad6;
  --borde: #262d63;
  --marca: #9fb8ff;
  --acento: #5ce1e6;           /* cian de la imagen de marca */
  --acento-texto: #00104a;
  --acento-suave: #12306b;
  --logo: #e9edff;
  --ok: #8be3b1;     --ok-bg: #0f2e21;
  --mal: #ffa3b1;    --mal-bg: #381423;
  --aviso: #ffd78a;  --aviso-bg: #382a0c;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--fuente); font-size: 17px; line-height: 1.6;
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--acento); }
code { font-family: var(--mono); background: var(--bg-2); padding: .08em .35em; border-radius: 5px; font-size: .92em; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

/* ---------- Cabecera ---------- */
.app-header { background: var(--card); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 20; }
.header-inner { max-width: 1080px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-fig, .logo-texto { display: block; background: var(--logo); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.logo-fig { width: 22px; height: 38px; -webkit-mask-image: url(../assets/logo-figura.png); mask-image: url(../assets/logo-figura.png); }
.logo-texto { width: 168px; height: 14.5px; -webkit-mask-image: url(../assets/logo-texto.png); mask-image: url(../assets/logo-texto.png); }

.areas-nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.areas-nav::-webkit-scrollbar { display: none; }
.area-link { background: none; border: 0; padding: 8px 14px; border-radius: 999px; color: var(--text-2); font-weight: 600; white-space: nowrap; }
.area-link:hover:not(:disabled) { background: var(--bg-2); }
.area-link.activo { background: var(--acento-suave); color: var(--marca); }
.area-link.deshabilitado { opacity: .75; cursor: default; }
.prox { margin-left: 6px; font-size: .72em; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }

.header-controls { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.idiomas { display: inline-flex; border: 1px solid var(--borde); border-radius: 999px; overflow: hidden; }
.idioma-btn { background: none; border: 0; padding: 6px 12px; font-weight: 700; font-size: .85rem; color: var(--text-2); }
.idioma-btn[aria-pressed="true"] { background: var(--acento); color: var(--acento-texto); }
.icon-btn { background: none; border: 1px solid var(--borde); border-radius: 999px; width: 36px; height: 36px; font-size: 1.1rem; }
.icon-btn:hover { background: var(--bg-2); }

.subheader { max-width: 1080px; margin: 0 auto; padding: 0 16px 6px; }
.breadcrumb { font-size: .85rem; color: var(--text-3); }
.breadcrumb .sep { margin: 0 6px; }
.breadcrumb .actual { color: var(--text-2); font-weight: 600; }

.pivots-wrap { background: var(--bg-2); border-bottom: 1px solid var(--borde); }
.pivots { max-width: 1080px; margin: 0 auto; padding: 0 16px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.pivots:empty, .subseccion-tabs:empty { display: none; }
.pivot { background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 14px; color: var(--text-2); font-weight: 600; white-space: nowrap; }
.pivot.activo { border-bottom-color: var(--acento); color: var(--marca); }

/* ---------- Contenido ---------- */
#app-main { max-width: 960px; margin: 0 auto; padding: 20px 16px 48px; }
.subseccion-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; }
.subtab { background: var(--card); border: 1px solid var(--borde); border-radius: 999px; padding: 6px 14px; font-size: .9rem; white-space: nowrap; color: var(--text-2); }
.subtab.activo { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); font-weight: 600; }
.subtab .check { margin-left: 6px; }

.tema-titulo { font-size: 1.9rem; line-height: 1.2; margin: 12px 0 6px; color: var(--marca); }
.tema-pregunta { margin: 0 0 20px; color: var(--text-2); font-size: 1.05rem; }
.aviso-idioma { background: var(--aviso-bg); color: var(--aviso); padding: 10px 14px; border-radius: 10px; font-size: .92rem; }

.bloque { background: var(--card); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px 20px; margin: 16px 0; box-shadow: var(--sombra); }
.bloque-paso { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--acento); margin-bottom: 4px; }
[data-theme="light"] .bloque-paso { color: var(--acento); }
.bloque-titulo { font-size: 1.25rem; margin: 0 0 8px; color: var(--marca); }
.bloque-texto p { margin: .6em 0; }
.bloque-texto ul { margin: .6em 0; padding-left: 1.3em; }
.bloque-texto li { margin: .25em 0; }
.bloque-codigo { font-family: var(--mono); font-size: .92rem; line-height: 1.5; background: var(--bg-2); border: 1px solid var(--borde); border-radius: 10px; padding: 12px 14px; overflow-x: auto; margin: .8em 0; white-space: pre; }
.bloque-pendiente { border-style: dashed; box-shadow: none; }
.lista-practicar, .lista-fuentes, .lista-enlaces { margin: .4em 0; padding-left: 1.2em; }
.lista-practicar li, .lista-fuentes li { margin: .45em 0; }

.estado-vacio, .estado-pendiente { padding: 24px; text-align: center; color: var(--text-2); }
.estado-pendiente .titulo { font-weight: 700; color: var(--text); }

/* ---------- Inicio ---------- */
.inicio-hero { padding: 28px 0 12px; }
.inicio-hero h1 { font-size: 2.1rem; line-height: 1.2; margin: 0 0 8px; color: var(--marca); }
.inicio-sub { margin: 0; color: var(--text-2); font-size: 1.1rem; }
.inicio-continuar { margin: 14px 0 4px; }
.inicio-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 22px; }
.area-card { text-align: left; background: var(--card); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; box-shadow: var(--sombra); }
button.area-card:hover { border-color: var(--acento); }
.area-card h2 { margin: 0 0 6px; font-size: 1.2rem; color: var(--marca); }
.area-card p { margin: 0; color: var(--text-2); font-size: .95rem; }
.area-card.deshabilitada { opacity: .8; border-style: dashed; box-shadow: none; }

/* ---------- Ejercicios ---------- */
.zona-interactiva { margin-top: 10px; }
.btn-pildora { background: var(--acento); color: var(--acento-texto); border: 0; border-radius: 999px; padding: 9px 20px; font-weight: 700; }
.btn-pildora:hover:not(:disabled) { filter: brightness(1.08); }
.btn-pildora:disabled { opacity: .45; cursor: not-allowed; }
.btn-pildora.secundario { background: none; color: var(--acento); border: 2px solid var(--acento); }
.zi-acciones { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.zi-resultado { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.zi-resultado.ok { background: var(--ok-bg); color: var(--ok); }
.zi-resultado.parcial { background: var(--aviso-bg); color: var(--aviso); }

.quiz-pregunta { margin: 14px 0 18px; }
.quiz-pregunta .enunciado { font-weight: 600; margin: 0 0 8px; }
.quiz-opcion { display: block; width: 100%; text-align: left; background: var(--bg); border: 1.5px solid var(--borde); border-radius: 10px; padding: 10px 14px; margin: 6px 0; }
.quiz-opcion:hover { border-color: var(--acento); }
.quiz-opcion.elegida { border-color: var(--acento); background: var(--acento-suave); }
.quiz-opcion.correcta { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.quiz-opcion.incorrecta { border-color: var(--mal); background: var(--mal-bg); color: var(--mal); }
.quiz-explicacion { font-size: .92rem; color: var(--text-2); padding: 2px 6px 6px 14px; border-left: 3px solid var(--borde); margin: 0 0 6px 6px; }

.emp-instruccion { font-size: .92rem; color: var(--text-2); margin: 0 0 8px; }
.emp-items, .emp-destinos { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.emp-item { background: var(--acento-suave); border: 1.5px solid transparent; color: var(--text); border-radius: 10px; padding: 8px 14px; font-weight: 600; }
.emp-item.seleccionado { border-color: var(--acento); }
.emp-item.colocado { opacity: .35; cursor: default; }
.emp-destino { flex: 1 1 200px; text-align: left; background: var(--bg); border: 1.5px dashed var(--borde); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; }
.emp-destino.receptivo { border-color: var(--acento); border-style: solid; }
.emp-destino.ok { border-color: var(--ok); background: var(--ok-bg); }
.emp-destino.mal { border-color: var(--mal); background: var(--mal-bg); }
.emp-nombre { font-weight: 700; }
.emp-asignado { font-size: .9rem; color: var(--text-2); }


/* ---------- Diagrama de acordes ---------- */
.dg-botones, .af-instrumentos { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.dg-boton { background: var(--bg); border: 1.5px solid var(--borde); border-radius: 999px; padding: 6px 16px; font-weight: 700; color: var(--text); }
.dg-boton:hover { border-color: var(--acento); }
.dg-boton[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.dg-cuerpo { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.dg-dibujo { flex: 0 0 190px; max-width: 100%; background: var(--bg); border: 1px solid var(--borde); border-radius: 12px; padding: 8px; }
.dg-svg { width: 100%; height: auto; display: block; }
.dg-info { flex: 1 1 240px; }
.dg-info p { margin: .3em 0; }
.dg-nombre { font-weight: 800; font-size: 1.15rem; color: var(--marca); }
.dg-leyenda { margin: .6em 0 0; padding-left: 1.1em; color: var(--text-2); font-size: .9rem; }
.dg-svg .dg-cuerda, .dg-svg .dg-traste { stroke: var(--text-3); stroke-width: 1.2; }
.dg-svg .dg-traste { stroke-width: 1; }
.dg-svg .dg-cejuela { stroke: var(--text); stroke-width: 4; }
.dg-svg .dg-cejilla { stroke: var(--acento); stroke-width: 12; stroke-linecap: round; opacity: .85; }
.dg-svg .dg-dedo { fill: var(--acento); }
.dg-svg .dg-dedo-num { fill: var(--acento-texto); font: 700 11.5px var(--fuente); }
.dg-svg .dg-aire { fill: none; stroke: var(--text-2); stroke-width: 1.6; }
.dg-svg .dg-mudo { fill: var(--text-2); font: 700 12px var(--fuente); }
.dg-svg .dg-titulo { fill: var(--marca); font: 800 13px var(--fuente); }
.dg-svg .dg-nota { fill: var(--text-2); font: 600 11.5px var(--fuente); }

/* ---------- Afinador ---------- */
.af-cuerdas { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.af-cuerda { background: var(--bg); border: 1.5px solid var(--borde); border-radius: 10px; padding: 6px 12px; text-align: left; display: flex; flex-direction: column; min-width: 96px; }
.af-cuerda:hover { border-color: var(--acento); }
.af-cuerda.activa { border-color: var(--acento); background: var(--acento-suave); }
.af-cuerda-n { font-size: .8rem; color: var(--text-2); }
.af-cuerda-nota { font-weight: 700; }
.af-ayuda { font-size: .88rem; color: var(--text-2); margin: 4px 0 14px; }
.af-lectura { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--bg); border: 1.5px solid var(--borde); border-radius: 12px; padding: 14px 16px; }
.af-lectura.afinada { border-color: var(--ok); background: var(--ok-bg); }
.af-lectura.desafinada { border-color: var(--mal); }
.af-nota { font-size: 2.2rem; font-weight: 800; min-width: 3.6ch; color: var(--marca); }
.af-medidor { position: relative; flex: 1 1 160px; height: 14px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--borde); }
.af-centro { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--ok); transform: translateX(-1px); }
.af-aguja { position: absolute; top: -4px; width: 6px; height: 20px; border-radius: 3px; background: var(--acento); left: 50%; transform: translateX(-3px); transition: left .08s linear; }
.af-cents { font-family: var(--mono); font-weight: 700; min-width: 5ch; text-align: right; }
.af-estado { margin: 10px 0 0; font-weight: 600; min-height: 1.6em; }


/* ---------- Figuras musicales ---------- */
.fg-wrap { overflow-x: auto; }
.fg-tabla { width: 100%; border-collapse: collapse; text-align: center; }
.fg-tabla th { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); padding: 6px 8px; border-bottom: 2px solid var(--borde); }
.fg-tabla td { padding: 4px 8px; border-bottom: 1px solid var(--borde); }
.fg-nombre { font-weight: 700; text-align: left; color: var(--marca); }
.fg-dur { display: block; font-weight: 500; font-size: .88rem; color: var(--text-2); }
.fg-svg { width: 44px; height: 58px; display: block; margin: 0 auto; }
.fg-sim { fill: var(--text); }
.fg-pauta { stroke: var(--text-3); stroke-width: 1.4; }

/* ---------- Pentagrama ---------- */
.pg-figura { margin: 8px 0 16px; }
.pg-figura figcaption { font-weight: 700; color: var(--marca); margin-bottom: 4px; }
.pg-svg { width: 100%; height: auto; max-width: 640px; display: block; background: var(--bg); border: 1px solid var(--borde); border-radius: 12px; }
.pg-lienzo .pg-svg { max-width: 170px; }
.pg-figura .pg-svg { margin-bottom: 6px; }
.pg-linea { stroke: var(--text-3); stroke-width: 1.3; }
.pg-linea-extra { stroke: var(--text-3); stroke-width: 1.3; }
.pg-sim { fill: var(--text); }
.pg-plica { stroke: var(--text); stroke-width: 1.6; }
.pg-etiqueta { fill: var(--text-2); font: 600 11px var(--fuente); }
.pg-info { font-weight: 600; margin: 4px 0 8px; }
.pg-botones { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.pg-resp.ok { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.pg-resp.mal { background: var(--mal-bg); border-color: var(--mal); color: var(--mal); }

/* ---------- Cuadro de tonalidades ---------- */
.tn-detalle { display: grid; gap: 14px; margin: 6px 0 14px; }
.tn-modo { background: var(--bg); border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; }
.tn-modo-titulo { margin: 0 0 8px; font-size: 1rem; color: var(--marca); }
.tn-acordes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tn-acorde { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--borde); border-radius: 10px; padding: 8px 12px; }
.tn-grado { font-size: .78rem; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.tn-nombre { font-weight: 800; font-size: 1.15rem; }
.tn-completo summary { cursor: pointer; font-weight: 700; color: var(--acento); margin: 6px 0; }
.tn-tabla-wrap { overflow-x: auto; }
.tn-tabla { border-collapse: collapse; font-size: .9rem; min-width: 640px; }
.tn-tabla th, .tn-tabla td { border: 1px solid var(--borde); padding: 6px 10px; text-align: center; }
.tn-tabla thead th { background: var(--bg-2); font-size: .8rem; }
.tn-tabla tbody th { text-align: left; background: var(--bg); }


/* ---------- Reloj de transporte / de quintas ---------- */
.rl-controles { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 10px; }
.rl-campo { display: flex; flex-direction: column; gap: 2px; }
.rl-campo label, .rl-prog label { font-size: .82rem; font-weight: 700; color: var(--text-2); }
.rl-campo select, .rl-entrada { font: inherit; padding: 7px 10px; border: 1.5px solid var(--borde); border-radius: 10px; background: var(--bg); color: var(--text); }
.rl-pasos, .rl-alts { display: flex; gap: 6px; }
.rl-wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.rl-svg { flex: 0 1 320px; width: 100%; max-width: 320px; height: auto; }
.rl-info { flex: 1 1 220px; }
.rl-info p { margin: .35em 0; }
.rl-titulo { font-weight: 800; font-size: 1.1rem; color: var(--marca); }
.rl-anillo-ext { fill: var(--bg); stroke: var(--text-3); stroke-width: 1.5; }
.rl-anillo-int { fill: var(--acento-suave); stroke: var(--text-3); stroke-width: 1.2; }
.rl-centro { fill: var(--card); stroke: var(--borde); stroke-width: 1.2; }
.rl-marca { stroke: var(--text-3); stroke-width: 1.5; }
.rl-arco { fill: none; stroke: var(--acento); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 6; }
.rl-resalte { fill: none; stroke: var(--acento); stroke-width: 2.5; }
.rl-resalte-2 { stroke: var(--marca); stroke-dasharray: 3 3; }
.rl-txt { fill: var(--text); font-family: var(--fuente); font-weight: 700; }
.rl-txt-int { fill: var(--marca); }
.rl-txt-sel { fill: var(--acento); }
.rl-alt { fill: var(--text-2); font-weight: 600; }
.rl-centro-txt { fill: var(--marca); font: 800 30px var(--fuente); }
.rl-centro-sub { fill: var(--text-2); font: 600 12px var(--fuente); }
.rl-tecla { cursor: pointer; }
.rl-tecla:focus-visible { outline: none; }
.rl-tecla:focus-visible text { text-decoration: underline; }
.rl-prog { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.rl-entrada { width: 100%; font-family: var(--mono); }
.rl-fila { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.rl-par { display: flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--borde); border-radius: 10px; padding: 6px 10px; }
.rl-orig { color: var(--text-2); }
.rl-flecha { color: var(--text-3); }
.rl-nuevo { font-weight: 800; color: var(--marca); }
.rl-mal .rl-nuevo { color: var(--mal); }
.rl-aviso { color: var(--aviso); background: var(--aviso-bg); padding: 6px 10px; border-radius: 8px; font-size: .9rem; }


/* ---------- Tablatura ---------- */
.tb-bloque { margin: 6px 0 12px; }
.tb-subtitulo { font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); margin: 8px 0 4px; }
.tb-svg { width: 100%; height: auto; display: block; margin: 4px 0; }
.tb-linea { stroke: var(--text-3); stroke-width: 1.2; }
.tb-barra { stroke: var(--text-2); stroke-width: 1.6; }
.tb-cuerda { fill: var(--text-2); font: 700 11px var(--mono); }
.tb-acorde { fill: var(--marca); font: 800 11px var(--fuente); }
.tb-fondo { fill: var(--card); }
.tb-num { fill: var(--text); font: 700 12px var(--mono); }
.tb-evento { cursor: pointer; }
.tb-evento:focus-visible { outline: none; }
.tb-evento:focus-visible .tb-num { text-decoration: underline; }
.tb-evento.tb-sel .tb-fondo { fill: var(--acento); }
.tb-evento.tb-sel .tb-num { fill: var(--acento-texto); }
.tb-evento.tb-sel .tb-zona { fill: var(--acento-suave); }
.tb-sl { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; }
.tb-etq { align-self: center; }
.tb-sep { align-self: center; }
.tb-cod { display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 44px; background: var(--bg); border: 1.5px solid var(--borde); border-radius: 10px; padding: 4px 8px; color: var(--text); }
.tb-cod:hover { border-color: var(--acento); }
.tb-cod.tb-sel { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.tb-cod-num { font: 800 1.05rem var(--mono); }
.tb-cod-acorde { font-size: .78rem; font-weight: 800; color: var(--marca); }
.tb-cod.tb-sel .tb-cod-acorde { color: var(--acento-texto); }
.tb-solo-acorde .tb-cod-acorde { font-size: 1rem; }
.tb-sub .tb-cod-acorde { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.tb-etq { font: 800 .95rem var(--mono); color: var(--marca); min-width: 2.2ch; }
.tb-sl + .tb-sl { margin-top: 6px; }
.tb-sep { color: var(--text-3); font-weight: 700; padding: 0 2px; }
.tb-ayuda { font-size: .88rem; color: var(--text-2); margin: 6px 0; }
.tb-acciones { margin: 6px 0 10px; }
.tb-mastil { width: 100%; max-width: 520px; height: auto; display: block; }
.tb-m-cuerda { stroke: var(--text-3); stroke-width: 1.3; }
.tb-m-traste { stroke: var(--borde); stroke-width: 1.2; }
.tb-m-cejuela { stroke: var(--text); stroke-width: 3; }
.tb-m-et { fill: var(--text-2); font: 600 11px var(--fuente); }
.tb-m-dedo { fill: var(--acento); }
.tb-m-aire { fill: none; stroke: var(--acento); stroke-width: 2.2; }

/* ---------- Rasgueo ---------- */
.rs-wrap { overflow-x: auto; }
.rs-svg { width: 100%; max-width: 440px; height: auto; display: block; }
.rs-linea { stroke: var(--text-3); stroke-width: 1.3; }
.rs-sim { fill: var(--text); }
.rs-plica, .rs-viga { stroke: var(--text); stroke-width: 2; }
.rs-viga { stroke-width: 4; }
.rs-flecha { stroke: var(--marca); stroke-width: 2.6; }
.rs-punta { fill: var(--marca); }
.rs-circulo { fill: none; stroke: var(--text-2); stroke-width: 1.6; }
.rs-punto { fill: var(--text-2); }
.rs-golpe.rs-act .rs-flecha { stroke: var(--acento); }
.rs-golpe.rs-act .rs-punta { fill: var(--acento); }
.rs-golpe.rs-act .rs-sim { fill: var(--acento); }
.rs-golpe.rs-act .rs-plica { stroke: var(--acento); }
.rs-controles { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.rs-tempo { font-weight: 700; min-width: 11ch; text-align: center; }
.rs-grupo-tempo { display: inline-flex; align-items: center; gap: 6px; }
.rs-metro { font-size: .9rem; color: var(--text-2); display: inline-flex; align-items: center; gap: 4px; }
.rs-leyenda { margin: 4px 0 0; padding-left: 1.1em; font-size: .88rem; color: var(--text-2); }


/* ---------- Canciones ---------- */
.bloque-aviso-did { border-left: 5px solid var(--acento); background: var(--acento-suave); box-shadow: none; }
.aviso-did-titulo { margin: 0 0 4px; font-weight: 800; color: var(--marca); }
.bloque-aviso-did .bloque-texto p { margin: .3em 0; font-size: .93rem; }
.cancion-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; }
.cancion-tabs .dg-boton { font-size: 1rem; }
.hc-barra { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 10px; }
.hc-grupo { display: inline-flex; align-items: center; gap: 6px; }
.hc-etiqueta { font-size: .82rem; font-weight: 700; color: var(--text-2); }
.hc-boton { padding: 4px 12px; min-width: 38px; }
.hc-tono { min-width: 3.2ch; text-align: center; font-weight: 800; color: var(--marca); }
.hc-hoja { font-family: var(--mono-cancion); font-variant-ligatures: none; letter-spacing: 0; line-height: 1.45; background: var(--bg); border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; overflow-x: auto; white-space: pre; font-size: 100%; }
.hc-linea { min-height: 1.45em; }
.hc-acorde { color: var(--acento); font-weight: 800; }
[data-theme="light"] .hc-acorde { color: var(--marca); }
.rs-etiqueta { fill: var(--text-2); font: 700 11px var(--fuente); }
.acceso-caja { text-align: center; padding: 28px 18px; }
.acceso-caja h2 { margin: 0 0 8px; color: var(--marca); }
.acceso-caja p { color: var(--text-2); max-width: 46ch; margin: 6px auto; }
.acceso-caja .btn-pildora { display: inline-block; text-decoration: none; margin-top: 12px; }

/* ---------- Acordes de una canción ---------- */
.ac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; margin: 6px 0 8px; }
.ac-card { margin: 0; background: var(--bg); border: 1px solid var(--borde); border-radius: 12px; padding: 6px 6px 8px; text-align: center; }
.ac-card figcaption { display: flex; flex-direction: column; font-size: .8rem; color: var(--text-2); }
.ac-card figcaption strong { font-size: 1rem; color: var(--marca); }
.ac-svg .ac-gruesa { stroke-width: 2.6; stroke: var(--text-2); }
.ac-sin { font-size: .8rem; color: var(--text-3); padding: 28px 4px; }

/* ---------- Ficha de una pieza ---------- */
.bloque-ficha { padding: 12px 16px; }
.ficha { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; }
.ficha-par { display: flex; flex-direction: column; }
.ficha dt { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
.ficha dd { margin: 0; font-weight: 700; color: var(--marca); }

/* ---------- Imágenes y pasos ---------- */
.fig-img { margin: 10px 0 4px; display: block; }
.fig-fila { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fig-img img { background: #ffffff; border: 1px solid var(--borde); border-radius: 12px; padding: 6px; height: auto; max-height: 150px; max-width: 100%; width: auto; }
.fig-img figcaption { font-size: .85rem; color: var(--text-2); margin-top: 4px; }
.fig-pagina img { max-height: none; width: 100%; max-width: 760px; padding: 4px; }
.hc-sub { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.subtab-select { font: inherit; padding: 8px 12px; border: 1.5px solid var(--borde); border-radius: 10px; background: var(--card); color: var(--text); max-width: 100%; }
.lista-pasos { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: paso; }
.paso { counter-increment: paso; position: relative; padding: 4px 0 14px 46px; border-left: 2px solid var(--borde); margin-left: 15px; }
.paso::before { content: counter(paso); position: absolute; left: -17px; top: 2px; width: 32px; height: 32px; border-radius: 50%; background: var(--acento); color: var(--acento-texto); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.paso:last-child { border-left-color: transparent; padding-bottom: 4px; }
.paso-titulo { margin: 4px 0 2px; font-size: 1.05rem; color: var(--marca); }

/* ---------- Navegación inferior y pie ---------- */
.pie-navegacion { display: flex; gap: 12px; margin-top: 28px; }
.nav-ady { flex: 1; text-align: left; background: var(--card); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 16px; }
.nav-ady.sig { text-align: right; }
.nav-ady:hover { border-color: var(--acento); }
.nav-ady .dir { font-size: .8rem; color: var(--text-3); }
.nav-ady .dest { font-weight: 700; color: var(--marca); }
.app-footer { text-align: center; padding: 24px 16px 36px; color: var(--text-3); font-size: .88rem; border-top: 1px solid var(--borde); }
.app-footer p { margin: 4px 0; }
.pie-menor { font-size: .78rem; opacity: .9; }

/* ---------- Móvil ---------- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .app-header { position: static; }                         /* la cabecera deja de ocupar un cuarto de la pantalla al desplazarse */
  .header-inner { gap: 6px 10px; padding: 6px 12px; }
  .logo-fig { width: 18px; height: 31px; }
  .logo-texto { width: 128px; height: 11px; }
  .areas-nav { order: 3; flex-basis: 100%; gap: 2px; }
  .area-link { padding: 6px 12px; font-size: .95rem; }
  .prox { display: none; }
  .subheader { display: none; }                             /* la ruta ya se ve en las pestañas y en el título del tema */
  .pivots, .subseccion-tabs { padding-left: 12px; padding-right: 12px; }
  .pivot { padding: 9px 12px; }
  #app-main { padding: 14px 12px 36px; }
  .tema-titulo { font-size: 1.5rem; margin-top: 4px; }
  .bloque { padding: 14px 13px; margin: 12px 0; }
  .bloque-titulo { font-size: 1.15rem; }
  .bloque-codigo { font-size: .82rem; padding: 10px; }
  .pie-navegacion { flex-direction: column; }
  .paso { padding-left: 34px; margin-left: 12px; }
  .paso::before { left: -14px; width: 26px; height: 26px; font-size: .9rem; }
  .fig-img img { max-height: 120px; }
  .dg-cuerpo { gap: 12px; }
  .dg-dibujo { flex-basis: 100%; max-width: 230px; }
  .rl-svg { max-width: 300px; margin: 0 auto; }
  .tn-tabla { min-width: 560px; font-size: .84rem; }
  .quiz-opcion { padding: 10px 12px; }
  .area-card { padding: 14px; }
  .inicio-hero h1 { font-size: 1.6rem; }
  .rs-controles { gap: 6px; }
  .rs-tempo { min-width: 0; font-size: .92rem; }
}
@media (max-width: 360px) {
  .logo-texto { width: 112px; }
  .idioma-btn { padding: 5px 9px; }
  .icon-btn { width: 32px; height: 32px; }
  .bloque { padding: 12px 11px; }
}


/* ---------- Pulido de la interfaz ---------- */
:root {
  --t-xs: .78rem; --t-sm: .9rem; --t-base: 1rem; --t-md: 1.15rem; --t-lg: 1.25rem; --t-xl: 1.5rem; --t-2xl: 1.9rem;   /* escala tipográfica */
  --lectura: 68ch;
}
/* ancho de lectura: la prosa no pasa de ~68 caracteres por línea; las herramientas y diagramas usan todo el ancho */
.bloque-texto, .tema-pregunta, .bloque-pregunta, .aviso-idioma { max-width: var(--lectura); }
.bloque-texto.bloque-codigo, .bloque-codigo { max-width: 100%; }
.bloque-aviso-did { background: var(--card); border: 1px solid var(--borde); border-left: 4px solid var(--acento); padding: 10px 14px; }
.bloque-aviso-did .aviso-did-titulo { margin: 0 0 2px; font-size: var(--t-xs); }

/* transiciones suaves en los controles */
button, a, .area-card, .area-link, .pivot, .subtab, .dg-boton, .btn-pildora, .quiz-opcion, .tb-cod, .nav-ady, .idioma-btn, .icon-btn, .ac-card {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, filter .15s ease, box-shadow .15s ease, transform .15s ease;
}
.area-card:hover:not(.deshabilitada) { border-color: var(--acento); box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 8px 22px rgba(0, 0, 0, .12); transform: translateY(-1px); }
.btn-pildora:active:not(:disabled), .dg-boton:active { transform: scale(.97); }
.btn-pildora.secundario:hover:not(:disabled) { background: var(--acento-suave); }

/* pie de una sola línea de énfasis */
.app-footer { padding: 18px 16px 28px; }

/* los elementos de las barras con desplazamiento no se encogen */
.pivot, .subtab, .area-link { flex-shrink: 0; }

/* objetivos táctiles de al menos 44 px en pantallas táctiles y estrechas */
@media (pointer: coarse), (max-width: 640px) {
  .area-link, .pivot, .subtab, .dg-boton, .btn-pildora, .idioma-btn, .nav-ady, .tb-cod, .quiz-opcion, .subtab-select {
    min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  .quiz-opcion { display: flex; justify-content: flex-start; }
  .nav-ady { display: block; }
  .idioma-btn { padding: 0 14px; }
  .icon-btn { width: 44px; height: 44px; }
  .area-card { min-height: 64px; }
  .pivot { padding: 0 14px; }
  .subtab { padding: 0 16px; }
  .dg-boton { padding: 0 16px; }
}
@media (max-width: 640px) {
  /* todas las áreas a la vista (sin recortes), en una o dos filas */
  .areas-nav { flex-wrap: wrap; overflow: visible; gap: 4px; }
  .area-link { padding: 0 12px; font-size: .92rem; }
  .ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
  .ficha-par:last-child { grid-column: 1 / -1; }
  .bloque-aviso-did { padding: 8px 12px; }
  .bloque-aviso-did .bloque-texto p { font-size: .88rem; }
  .app-header .header-inner { padding-bottom: 4px; }
}
@media (max-width: 360px) {
  .icon-btn { width: 44px; height: 44px; }
  .idioma-btn { padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.tb-orden { font: 700 .95rem var(--mono); color: var(--marca); margin: 8px 0 0; }