/* =====================================================================
   Piel «Obsidiana carmesí» (22/10/2026) — la estética de la app del
   Conversor a Guitar Pro aplicada a todas las herramientas:
   metal cepillado, ruido fino, pozos hundidos con cápsulas, pantallas LCD,
   botones con relieve y perillas (perillas.js). Carmesí = acción; verde =
   afinado/bien. Nunca dorado ni amarillo.
   Se carga DESPUÉS de style.css y rediseno.css y los sobrescribe a propósito.
   El tema claro conserva la misma estructura con materiales claros.
   ===================================================================== */
:root {
  --bg: #0e0909;
  --panel: #1a1414;
  --panel-2: #241b1b;
  --line: #322423;
  --bone: #f2e9e4;
  --bone-dim: #a8968f;
  --muted: #8f7d77;
  --crimson: #93172c;
  --crimson-bright: #c02241;
  --font-display: "Cinzel", "Cormorant Garamond", serif;
  --font-body: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  --radio: 12px;

  --o-metal: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px), linear-gradient(180deg, #241b1b, #1a1414);
  --o-vidrio: rgba(30, 20, 22, 0.86);
  --o-borde: rgba(255, 255, 255, 0.08);
  --o-boton: linear-gradient(180deg, #2a1f1f, #1c1515);
  --o-boton-luz: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.5);
  --o-pozo: #0c0808;
  --o-pozo-sombra: inset 0 2px 8px rgba(0, 0, 0, 0.7);
  --o-lcd: #060404;
  --o-lcd-borde: #2a1d1c;
  --o-brillo: rgba(192, 34, 65, 0.45);
  --o-activo: linear-gradient(180deg, #3a1418, #2a0f12);
  --o-sombra: 0 8px 24px rgba(0, 0, 0, 0.35);
  --o-ruido: 0.045;
}
:root[data-tema="claro"] {
  --bg: #f4eee9;
  --panel: #ffffff;
  --panel-2: #f7f1ec;
  --line: #e1d3c8;
  --bone: #241c1a;
  --bone-dim: #5b4a42;
  --muted: #6b5c50;
  --o-metal: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.012) 0 1px, transparent 1px 3px), linear-gradient(180deg, #ffffff, #f3ece6);
  --o-vidrio: rgba(255, 255, 255, 0.92);
  --o-borde: rgba(60, 30, 25, 0.12);
  --o-boton: linear-gradient(180deg, #ffffff, #f1e9e3);
  --o-boton-luz: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(60, 30, 25, 0.12);
  --o-pozo: #ece3dc;
  --o-pozo-sombra: inset 0 2px 6px rgba(60, 30, 25, 0.14);
  --o-lcd: #1a1414;
  --o-lcd-borde: #3a2a29;
  --o-brillo: rgba(192, 34, 65, 0.25);
  --o-activo: linear-gradient(180deg, #fbe9ec, #f6dadf);
  --o-sombra: 0 8px 22px rgba(90, 40, 30, 0.1);
  --o-ruido: 0.025;
}

/* --- Fondo: resplandor carmesí arriba y grano fino ------------------------------------------- */
html { background: var(--bg); }
body {
  font-family: var(--font-body);
  background: radial-gradient(ellipse 90% 45% at 50% -8%, rgba(192, 34, 65, 0.16), transparent 70%), var(--bg);
  background-attachment: fixed;
  color: var(--bone);
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 200; opacity: var(--o-ruido); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.app { max-width: 760px; }

/* --- Cabecera: sello «Á» y nombre en Cinzel ------------------------------------------------- */
.cabecera { display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: center; }
.cabecera::before {
  content: "Á"; grid-row: 1 / span 2; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  font: 700 25px "Cinzel", serif; color: var(--bone);
  background: radial-gradient(circle at 35% 25%, #6a5a58, #2a2020 62%);
  border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 3px 10px rgba(0, 0, 0, 0.6);
}
:root[data-tema="claro"] .cabecera::before { color: #f2e9e4; }
.cabecera h1 {
  font: 700 1.45rem var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; margin: 0; line-height: 1.15;
}
.cabecera h1 svg { color: var(--crimson-bright); }
.subtitulo { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-dim); margin-top: 0.2rem; }
.cabecera .subtitulo { grid-column: 2; }

/* --- Botones con relieve -------------------------------------------------------------------- */
.boton, .nav-mas, .chip, .chip-dock, .paso, .rango-opcion, .opcion-juego, .boton-tema, .ayuda-btn {
  background: var(--o-boton); border: 1px solid var(--o-borde); box-shadow: var(--o-boton-luz); color: var(--bone);
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.06s;
}
.boton { font: 600 0.88rem var(--font-body); border-radius: 9px; min-height: 40px; }
.boton:hover:not(:disabled), .chip:hover, .chip-dock:hover, .paso:hover, .rango-opcion:hover, .opcion-juego:hover, .nav-mas:hover {
  border-color: rgba(192, 34, 65, 0.6);
}
.boton:active:not(:disabled), .chip:active, .paso:active { transform: translateY(1px); }
.boton.principal {
  color: #fff; border-color: transparent;
  background: linear-gradient(180deg, var(--crimson-bright), var(--crimson));
  box-shadow: 0 0 16px rgba(192, 34, 65, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.boton.principal:hover:not(:disabled) { filter: brightness(1.08); }
.boton:disabled { opacity: 0.42; }

/* Elegido: hundido con brillo carmesí por dentro (como las pestañas del Conversor). */
.chip.activo, .chip-dock.activo, .rango-opcion.activo, .opcion-juego.activo, .grupo-botones .activo, .grupo-botones [aria-checked="true"] {
  background: var(--o-activo); border-color: var(--crimson-bright); color: var(--bone);
  box-shadow: inset 0 0 14px var(--o-brillo), 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* --- Menú principal y pestañas: cápsulas dentro de un pozo hundido --------------------------- */
.nav-lista, .tabs:not(.tabs-fichas), .grupo-botones, .stepper {
  background: var(--o-pozo); border: 1px solid rgba(0, 0, 0, 0.6); box-shadow: var(--o-pozo-sombra); border-radius: 12px; padding: 4px;
}
:root[data-tema="claro"] .nav-lista, :root[data-tema="claro"] .tabs:not(.tabs-fichas), :root[data-tema="claro"] .grupo-botones, :root[data-tema="claro"] .stepper {
  border-color: var(--line);
}
.nav-compacto a {
  background: transparent; border: 1px solid transparent; box-shadow: none; color: var(--bone-dim); border-radius: 8px; min-height: 36px;
  font: 600 0.84rem var(--font-body);
}
.nav-compacto a:hover { color: var(--bone); border-color: transparent; background: rgba(255, 255, 255, 0.03); }
.nav-compacto a.activo {
  color: #fff; border-color: rgba(192, 34, 65, 0.7); background: var(--o-boton);
  box-shadow: inset 0 0 12px var(--o-brillo), 0 1px 2px rgba(0, 0, 0, 0.5);
}
:root[data-tema="claro"] .nav-compacto a.activo { color: var(--bone); }
.tab, .subtab { border-radius: 8px; color: var(--bone-dim); font: 600 0.84rem var(--font-body); }
.tab.activo, .subtab.activo {
  background: var(--o-boton); color: var(--bone); border: 1px solid rgba(192, 34, 65, 0.7);
  box-shadow: inset 0 0 12px var(--o-brillo), 0 1px 2px rgba(0, 0, 0, 0.5);
}
.grupo-botones { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.grupo-botones > button, .grupo-botones .chip {
  background: transparent; border: 1px solid transparent; box-shadow: none; color: var(--bone-dim); border-radius: 8px;
}
.grupo-botones > button:hover, .grupo-botones .chip:hover { color: var(--bone); }
.grupo-botones > button.activo, .grupo-botones .chip.activo, .grupo-botones > [aria-checked="true"] {
  background: var(--o-activo); border-color: var(--crimson-bright); color: var(--bone); box-shadow: inset 0 0 12px var(--o-brillo);
}

/* Fichas grandes (modos con icono): baldosas de metal. */
.tabs-fichas .tab, .tabs-fichas .subtab {
  background: var(--o-metal); border: 1px solid var(--o-borde); box-shadow: var(--o-boton-luz); border-radius: 12px; color: var(--bone-dim);
}
.tabs-fichas .tab.activo, .tabs-fichas .subtab.activo {
  color: var(--bone); border-color: var(--crimson-bright);
  box-shadow: inset 0 0 18px var(--o-brillo), 0 4px 14px rgba(0, 0, 0, 0.35);
}
.tabs-fichas .tab.activo svg, .tabs-fichas .subtab.activo svg { color: var(--crimson-bright); }

/* --- Menú de filas (se queda siempre visible, decisión de Áleran): panel hundido con teclas en relieve -- */
.nav-principal:not(.nav-compacto) {
  gap: 4px; padding: 5px; border-radius: 14px; background: var(--o-pozo); border: 1px solid rgba(0, 0, 0, 0.6); box-shadow: var(--o-pozo-sombra);
}
:root[data-tema="claro"] .nav-principal:not(.nav-compacto) { border-color: var(--line); }
.nav-principal:not(.nav-compacto) .nav-fila { gap: 4px; }
.nav-principal:not(.nav-compacto) a {
  border-radius: 9px; border: 1px solid var(--o-borde); background: var(--o-boton); box-shadow: var(--o-boton-luz);
  color: var(--bone-dim); font: 600 0.82rem var(--font-body); padding: 0.5rem 0.35rem;
}
.nav-principal:not(.nav-compacto) a:hover { color: var(--bone); border-color: rgba(192, 34, 65, 0.55); background: var(--o-boton); }
/* Solfeo, Entrena, Oído y Ritmo siguen destacadas (pedido explícito): texto fuerte y filo carmesí abajo. */
.nav-principal:not(.nav-compacto) a.destacado { color: var(--bone); font-weight: 700; border-color: var(--o-borde); box-shadow: var(--o-boton-luz), inset 0 -2px 0 var(--crimson-bright); }
.nav-principal:not(.nav-compacto) a.activo, .nav-principal:not(.nav-compacto) a.destacado.activo {
  color: #fff; background: linear-gradient(180deg, var(--crimson-bright), var(--crimson)); border-color: transparent;
  box-shadow: 0 0 14px rgba(192, 34, 65, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.nav-principal:not(.nav-compacto) a svg { color: currentColor; }

/* --- Paneles de vidrio oscuro --------------------------------------------------------------- */
.panel, .resultado, .ajustes-plegables, .afinometro-grande, .hoja-caja, .cta-clases, .dock-panel {
  background: var(--o-vidrio); border: 1px solid var(--o-borde); border-radius: var(--radio); box-shadow: var(--o-sombra);
}
.panel h2, .resultado h2, .panel h3 {
  font: 700 0.72rem var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-dim);
}
.campo > span, .hub-seccion { font: 700 0.68rem var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-dim); }

/* --- Portada: baldosas con icono en un disco carmesí ----------------------------------------- */
.hub-tarjeta, .hub-tarjeta.destacada {
  background: var(--o-metal); border: 1px solid var(--o-borde); border-radius: 14px; box-shadow: var(--o-boton-luz), var(--o-sombra);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.hub-tarjeta:hover { border-color: rgba(192, 34, 65, 0.65); box-shadow: inset 0 0 18px var(--o-brillo), var(--o-sombra); transform: translateY(-2px); }
.hub-icono {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 0.35rem;
  background: radial-gradient(circle at 35% 30%, #d8394f, #93172c 70%); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 6px rgba(0, 0, 0, 0.55);
}
.hub-icono svg { width: 20px; height: 20px; color: #fff; stroke: #fff; }
.hub-nombre { font: 700 1rem var(--font-body); letter-spacing: 0.01em; }

/* --- Números como pantallas LCD ------------------------------------------------------------- */
.paso-valor, .bpm-numero, output, .lcd, .twang-cifra, .simon-puntos {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.paso-valor, .bpm-numero {
  background: var(--o-lcd); border: 1px solid var(--o-lcd-borde); color: #f2e9e4; border-radius: 7px; padding: 0.2rem 0.55rem;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7);
}
.campo output { color: var(--bone); }
input[type="number"], input[type="text"], textarea, select {
  background: var(--o-pozo); border: 1px solid var(--line); color: var(--bone); border-radius: 8px; box-shadow: var(--o-pozo-sombra);
}
textarea:focus, input[type="text"]:focus, input[type="number"]:focus { border-color: var(--crimson-bright); outline: none; }

/* --- Deslizadores: pista hundida y tirador de metal ------------------------------------------ */
input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; height: 22px; accent-color: var(--crimson-bright); }
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; background: var(--o-pozo); border: 1px solid rgba(0, 0, 0, 0.55); box-shadow: var(--o-pozo-sombra);
}
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--o-pozo); border: 1px solid rgba(0, 0, 0, 0.55); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--crimson), var(--crimson-bright)); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7a6a68, #2a2020 65%); border: 2px solid var(--crimson-bright);
  box-shadow: 0 0 10px rgba(192, 34, 65, 0.45), 0 2px 4px rgba(0, 0, 0, 0.6);
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #7a6a68, #2a2020 65%);
  border: 2px solid var(--crimson-bright); box-shadow: 0 0 10px rgba(192, 34, 65, 0.45);
}

/* --- Perillas (perillas.js) ----------------------------------------------------------------- */
.campo.con-perilla { display: grid; grid-template-columns: 50px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0.6rem; row-gap: 0.1rem; align-items: center; }
.campo.con-perilla > :not(.perilla):not(input) { grid-column: 2; }
.campo.con-perilla > .perilla { grid-column: 1; grid-row: 1 / span 2; }
.perilla-oculta { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.perilla { position: relative; width: 50px; height: 50px; cursor: ns-resize; touch-action: none; border-radius: 50%; outline: none; flex: none; }
.perilla svg { width: 100%; height: 100%; display: block; overflow: visible; }
.perilla:focus-visible { box-shadow: 0 0 0 3px rgba(192, 34, 65, 0.45); }
.perilla .p-pista { fill: none; stroke: var(--o-pozo); stroke-width: 5; stroke-linecap: round; }
.perilla .p-valor { fill: none; stroke: var(--crimson-bright); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(192, 34, 65, 0.6)); }
.perilla .p-cuerpo { stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; }
.perilla .p-marca { stroke: #fff; stroke-width: 3; stroke-linecap: round; }
:root[data-tema="claro"] .perilla .p-pista { stroke: #e2d6cc; }
.perilla-lcd { grid-column: 2; justify-self: start; font: 600 0.82rem var(--font-mono); color: #f2e9e4; background: var(--o-lcd); border: 1px solid var(--o-lcd-borde);
  border-radius: 6px; padding: 0.12rem 0.5rem; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7); }

/* --- Disposición compacta (lista de Áleran, 22/10/2026): aprovechar el ancho, menos alto ---------- */
/* Metrónomo de arriba: todo en una fila; el volumen al final, pequeño. */
.metronomo-flotante { gap: 0.5rem 0.8rem; padding: 0.45rem 0.6rem; }
.metronomo-flotante .campo-inline:last-child { margin-left: auto; display: inline-flex; flex-direction: row; align-items: center; gap: 0.4rem; }
.metronomo-flotante .perilla, .dock .perilla, .fila-ajustes .perilla { width: 40px; height: 40px; }
.metronomo-flotante .perilla-lcd, .dock .perilla-lcd { padding: 0.08rem 0.4rem; font-size: 0.78rem; }
/* Volumen suelto (Entrena, Oído, Rutina): en la barra de arriba, a la derecha. */
.dock .campo-volumen.en-dock { margin: 0 0 0 auto; display: inline-flex; flex-direction: row; align-items: center; gap: 0.4rem; }
.dock .campo-volumen.en-dock > span { display: none; }
.dock .campo-volumen.en-dock::before { content: "🔊"; font-size: 0.95rem; }
/* Al azar: la rueda de «cantidad de notas» y la semilla, lado a lado. */
#panel-aleatorio { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem 1.2rem; align-items: end; }
#panel-aleatorio > .campo { margin: 0; }
/* Ajustes comunes de Solfeo: la figura ocupa el ancho y el volumen va a su derecha. */
#panelComunes { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 1rem; align-items: center; }
#panelComunes > * { grid-column: 1; margin: 0; }
#panelComunes > .campo:has(#volumen) { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
/* Cifrado: tempo, compás y tamaño en una fila. */
.fila-ajustes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 1.2rem; margin-bottom: 0.6rem; }
.fila-ajustes > .campo { margin: 0; }
.fila-ajustes .campo-bpm input { width: 6.5rem; }
.fila-ajustes .campo-zoom { margin-left: auto; }
.fila-ajustes .campo.con-perilla { grid-template-columns: 40px auto; }
@media (max-width: 520px) {
  #panel-aleatorio { grid-template-columns: 1fr; }
  #panelComunes { grid-template-columns: 1fr; }
  #panelComunes > .campo:has(#volumen) { grid-column: 1; grid-row: auto; }
  .fila-ajustes .campo-zoom { margin-left: 0; }
}
@media print { .campo-zoom { display: none !important; } }

/* --- Pulsos del metrónomo (pulsos.js): un círculo por pulso, el actual se enciende y destella ------------- */
.punto-observado { display: none !important; }
.pulsos { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 6px 0; }
.metronomo-visual .pulsos { display: flex; gap: 18px; padding: 14px 0; }
.pulsos i { width: 26px; height: 26px; border-radius: 50%; background: var(--o-pozo); border: 2px solid rgba(192, 34, 65, 0.45); box-shadow: var(--o-pozo-sombra); transition: background 0.08s, transform 0.08s; }
.pulsos.mini { gap: 5px; padding: 0; }
.pulsos.mini i { width: 10px; height: 10px; border-width: 1px; }
.pulsos i.pasado { background: rgba(192, 34, 65, 0.35); }
.pulsos i.encendido { background: var(--crimson-bright); border-color: #ff6b80; box-shadow: 0 0 14px rgba(255, 60, 90, 0.8); }
.pulsos i.encendido.fuerte { background: #ff3b4e; transform: scale(1.25); box-shadow: 0 0 20px rgba(255, 60, 90, 0.95); }
.pulsos i.destello { animation: pulsoDestello 0.28s ease-out; }
@keyframes pulsoDestello { from { transform: scale(1.45); filter: brightness(1.6); } to { transform: scale(1); filter: none; } }
.pulsos i.encendido.fuerte.destello { animation: pulsoDestelloFuerte 0.28s ease-out; }
@keyframes pulsoDestelloFuerte { from { transform: scale(1.7); filter: brightness(1.8); } to { transform: scale(1.25); filter: none; } }
@media (prefers-reduced-motion: reduce) { .pulsos i.destello { animation: none; } }

/* --- Figuras con su símbolo musical --------------------------------------------------------------------- */
.chip.chip-simbolo { font-family: "Noto Music", "Segoe UI Symbol", "Apple Symbols", serif; font-size: 1.55rem; line-height: 1; min-width: 3rem; padding: 0.25rem 0.7rem; }

/* --- «Practica con tu voz»: los dos ejercicios destacan como lo que son, la acción principal -------------- */
.acciones-voz { margin: 0 0 0.9rem; }
.acciones-voz .boton-voz { display: grid; justify-items: center; gap: 2px; min-height: 58px; padding: 0.45rem 0.8rem; color: #fff;
  background: linear-gradient(180deg, var(--crimson-bright), var(--crimson)); border-color: transparent;
  box-shadow: 0 0 16px rgba(192, 34, 65, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.acciones-voz .boton-voz + .boton-voz { background: linear-gradient(180deg, #3a1418, #2a0f12); border: 1px solid var(--crimson-bright); }
.acciones-voz .boton-voz b { font-size: 0.98rem; }
.acciones-voz .boton-voz small { font-size: 0.74rem; font-weight: 500; opacity: 0.85; }
.acciones-voz .boton-voz:hover:not(:disabled) { filter: brightness(1.12); }

/* --- Afinador visual y mensajes ------------------------------------------------------------- */
.afinador-v2 { background: var(--o-metal); }
.estado { font-size: 0.86rem; color: var(--bone-dim); }
.acciones-voz { background: radial-gradient(ellipse at 0% 0%, rgba(192, 34, 65, 0.2), transparent 70%), var(--o-metal); }

/* --- Pie y llamada a clases ----------------------------------------------------------------- */
.cta-clases { padding: 0.9rem 1rem; }
.cta-clases a { color: var(--crimson-bright); font-weight: 700; }
.pie { color: var(--muted); }

/* --- Barra fija de herramientas (rango, micro, MIDI) ----------------------------------------- */
.dock { background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid var(--o-borde); }
.chip-dock { border-radius: 999px; font-weight: 600; }

@media (max-width: 480px) {
  .cabecera h1 { font-size: 1.12rem; letter-spacing: 0.12em; }
  .cabecera::before { width: 40px; height: 40px; font-size: 22px; }
  .subtitulo { font-size: 0.64rem; letter-spacing: 0.1em; }
}

@media print {
  body { background: #fff !important; }
  body::before { display: none !important; }
  .cabecera::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-tarjeta:hover { transform: none; }
}

/* =====================================================================================================
   Lista de Áleran (22/10/2026): menos espacio muerto, cada cosa en su sitio y que se vea lo que es.
   ===================================================================================================== */
/* Menos aire vertical en todos los paneles. */
.panel { padding: 0.85rem 1rem; margin-bottom: 0.8rem; }
.panel > * { margin-top: 0; }
.panel > .campo, .panel > .acciones, .panel > .descripcion, .panel > .marcador { margin-bottom: 0.55rem; }
.panel > :last-child { margin-bottom: 0; }
.metronomo-flotante #metroFlotBpm { display: none; }
.metronomo-flotante .bpm-numero { width: 4.2rem; }

/* Botones de la lista de ejercicios (Escalas, Catálogo…): que parezcan botones y que los títulos destaquen. */
.grupo-botones:has(.grupo-titulo) { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px 10px; }
.grupo-botones .grupo-titulo { flex: 1 1 100%; margin: 10px 0 2px; padding-left: 8px; border-left: 3px solid var(--crimson-bright);
  font: 800 0.72rem var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: #ff6b80; }
:root[data-tema="claro"] .grupo-botones .grupo-titulo { color: var(--crimson); }
.grupo-botones .grupo-titulo:first-child { margin-top: 2px; }
.grupo-botones:has(.grupo-titulo) > .chip { background: var(--o-boton); border: 1px solid var(--o-borde); box-shadow: var(--o-boton-luz); color: var(--bone); border-radius: 9px; }
.grupo-botones:has(.grupo-titulo) > .chip:hover { border-color: rgba(192, 34, 65, 0.6); }
.grupo-botones:has(.grupo-titulo) > .chip.activo { background: var(--o-activo); border-color: var(--crimson-bright); box-shadow: inset 0 0 12px var(--o-brillo); }
.titulo-seccion { color: #ff6b80; border-left: 3px solid var(--crimson-bright); padding-left: 10px; font: 800 0.95rem var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; }
.catalogo-item { background: var(--o-boton); border: 1px solid var(--o-borde); border-radius: 12px; box-shadow: var(--o-boton-luz); }

/* Portada: el contenido de cada tarjeta, centrado. */
.hub-tarjeta, .hub-tarjeta.destacada { align-items: center; text-align: center; justify-content: center; }
.hub-icono { margin-left: auto; margin-right: auto; }

/* Glosario: cada término en su ficha, con el título bien visible. */
.glosario-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.7rem; }
.glosario-termino { margin: 0; padding: 0.85rem 1rem; border: 1px solid var(--o-borde); border-left: 3px solid var(--crimson-bright); border-radius: 12px;
  background: var(--o-boton); box-shadow: var(--o-boton-luz); }
.glosario-termino h3 { margin: 0 0 0.35rem; font: 700 1.05rem/1.2 var(--font-display); letter-spacing: 0.04em; text-transform: none; color: var(--bone); }
.glosario-termino p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--bone-dim); }

/* Oído (intervalos y acordes): dos columnas en vez de una tira larga. */
@media (min-width: 640px) {
  #panel-intervalos, #panel-acordes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.4rem; align-items: center; }
  #panel-intervalos > *, #panel-acordes > * { grid-column: 1 / -1; }
  #panel-intervalos > :nth-child(1), #panel-acordes > :nth-child(1) { grid-column: 1; grid-row: 1; }
  #panel-intervalos > :nth-child(2), #panel-acordes > :nth-child(2) { grid-column: 2; grid-row: 1; justify-self: end; }
  #panel-intervalos > :nth-child(3), #panel-acordes > :nth-child(3) { grid-column: 1; grid-row: 2; }
  #panel-intervalos > :nth-child(5), #panel-acordes > :nth-child(5) { grid-column: 2; grid-row: 2 / span 2; }
  #panel-intervalos > :nth-child(4), #panel-acordes > :nth-child(4) { grid-column: 1; grid-row: 3; font-size: 0.82rem; }
  /* Simon: casilla y marcador en una fila; el botón y el mensaje, lado a lado. */
  #panel-simon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: 1.2rem; align-items: center; }
  #panel-simon > * { grid-column: 1 / -1; }
  #panel-simon > .campo.checkbox { grid-column: 1; }
  #panel-simon > .marcador { grid-column: 2; justify-self: end; }
  #panel-simon > .acciones { grid-column: 1; margin: 0; }
  #panel-simon > .simon-banner { grid-column: 2; margin: 0; }
  #panel-simon > .acciones .boton { width: 100%; }
  /* Mi melodía: el cuadro de notas y sus botones, juntos. */
  #panel-personalizada { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.8rem; }
  #panel-personalizada > * { grid-column: 1 / -1; }
  #panel-personalizada > .campo:has(#notasPersonalizadas) { grid-column: 1; }
  #panel-personalizada > .campo:has(#notasPersonalizadas) + .acciones { grid-column: 2; flex-direction: column; justify-content: flex-end; }
}
#panel-personalizada .acciones .boton { min-height: 36px; }

/* Mapa vocal: el dibujo ocupa todo el recuadro blanco y queda centrado (en móvil, con un ancho mínimo y desliza). */
.mapa-vocal-contenedor { display: flex; justify-content: safe center; padding: 0.6rem; }
.mapa-vocal-contenedor svg { width: 100%; min-width: 620px; max-width: 1100px; height: auto; margin: 0 auto; }

/* --- Ruleta de patrones (Ritmo) ---------------------------------------------------------------------------- */
.ruleta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0.4rem 0 0.8rem; }
.ruleta-tarjeta { flex: 0 1 120px; display: grid; justify-items: center; gap: 6px; padding: 10px 8px 8px; border-radius: 12px;
  background: var(--o-boton); border: 1px solid var(--o-borde); box-shadow: var(--o-boton-luz); color: var(--bone); transition: transform 0.08s, border-color 0.08s; }
.ruleta-tarjeta span { font-size: 0.78rem; color: var(--bone-dim); }
.ruleta-tarjeta .ruleta-notas { color: var(--bone); }
.ruleta-tarjeta.paso { border-color: var(--crimson-bright); box-shadow: inset 0 0 14px var(--o-brillo); transform: translateY(-2px); }
.ruleta-tarjeta.elegida { border-color: var(--crimson-bright); background: var(--o-activo); box-shadow: 0 0 18px rgba(192, 34, 65, 0.45), inset 0 0 14px var(--o-brillo); transform: scale(1.06); }
.ruleta-tarjeta.elegida .ruleta-notas, .ruleta-tarjeta.elegida span { color: #fff; }
.ruleta-escenario { display: grid; justify-items: center; gap: 10px; padding: 14px; margin-bottom: 0.7rem; border-radius: 14px;
  background: var(--o-pozo); border: 1px solid rgba(0, 0, 0, 0.6); box-shadow: var(--o-pozo-sombra); }
.ruleta-cabeza { display: flex; align-items: baseline; gap: 14px; }
.ruleta-fase { font: 800 1.6rem var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-dim); }
.ruleta-cuenta { font: 800 2.4rem var(--font-mono); color: #fff; min-width: 1.2ch; }
.ruleta-escenario[data-fase="cuenta"] .ruleta-fase { color: #f2e9e4; }
.ruleta-escenario[data-fase="escucha"] .ruleta-fase { color: #3fb6c6; }
.ruleta-escenario[data-fase="turno"] .ruleta-fase { color: #3ecf6e; text-shadow: 0 0 16px rgba(62, 207, 110, 0.6); }
.ruleta-pulsos { display: flex; gap: 16px; }
.ruleta-pulsos i { width: 30px; height: 30px; border-radius: 50%; background: #1a1212; border: 2px solid rgba(192, 34, 65, 0.45); box-shadow: var(--o-pozo-sombra); }
.ruleta-pulsos i.pasado { background: rgba(192, 34, 65, 0.35); }
.ruleta-pulsos i.encendido { background: var(--crimson-bright); border-color: #ff6b80; box-shadow: 0 0 16px rgba(255, 60, 90, 0.85); animation: pulsoDestello 0.25s ease-out; }
.ruleta-escenario[data-fase="escucha"] .ruleta-pulsos i.encendido { background: #3fb6c6; border-color: #8fe3ee; box-shadow: 0 0 16px rgba(63, 182, 198, 0.85); }
.ruleta-escenario[data-fase="turno"] .ruleta-pulsos i.encendido { background: #3ecf6e; border-color: #9af0b8; box-shadow: 0 0 16px rgba(62, 207, 110, 0.85); }
.ruleta-patron { min-height: 74px; color: #f2e9e4; display: flex; align-items: center; }
.ruleta-nombre { margin: 0; font-size: 0.86rem; color: var(--bone-dim); min-height: 1.2em; }
:root[data-tema="claro"] .ruleta-patron, :root[data-tema="claro"] .ruleta-cuenta { color: var(--bone); }

/* Cifrado: el botón de cada línea es solo ▶ / ⏸. */
.boton-repro-linea { min-width: 44px; padding: 0 0.7rem; font-size: 1.05rem; justify-content: center; }

/* Todo botón con el contenido (icono + texto) centrado en ambos ejes. */
.boton, .chip, .paso, .ayuda-btn, .boton-tema, .nav-mas {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 0.45rem;
}
.boton svg, .chip svg { flex: none; }
/* Tarjetas del inicio: el icono siempre a la misma altura, aunque el texto ocupe 1 o 2 líneas. */
.hub-tarjeta, .hub-tarjeta.destacada { justify-content: flex-start; }

/* Selector de nivel: botones numerados (perillas.js). El actual en carmesí, los superados con un punto de luz. */
.niveles { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.35rem 0; }
.nivel-boton {
  appearance: none; min-width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 10px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 0.95rem var(--font-body); font-variant-numeric: tabular-nums; color: var(--bone-dim);
  background: var(--o-boton); border: 1px solid var(--o-borde); box-shadow: var(--o-boton-luz);
}
.nivel-boton:hover { border-color: rgba(192, 34, 65, 0.6); color: var(--bone); }
.nivel-boton.superado { color: var(--bone); border-color: rgba(192, 34, 65, 0.35); }
.nivel-boton.activo { background: linear-gradient(180deg, var(--crimson-bright), var(--crimson)); border-color: var(--crimson-bright); color: #fff; box-shadow: 0 0 10px rgba(192, 34, 65, 0.5); }

/* Menú de variantes de un giro (clic derecho / pulsación larga) */
.menu-giro { position: fixed; z-index: 1000; min-width: 150px; padding: 6px; display: flex; flex-direction: column; gap: 3px; background: var(--panel-2); border: 1px solid var(--line, #3a2a2a); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .55); }
.menu-giro-titulo { padding: 4px 10px 6px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.menu-giro button { text-align: left; padding: 8px 12px; border-radius: 8px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.menu-giro button:hover, .menu-giro button:focus-visible { background: rgba(255, 255, 255, .08); outline: none; }
.menu-giro button.activo { background: var(--crimson, #b21f3a); color: #fff; }

/* Quien pide «reducir movimiento» no ve animaciones ni transiciones */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}