:root {
  --bg: #0a0808;
  --panel: #120e0e;
  --panel-2: #1a1414;
  --wine: #5a121f;
  --crimson: #93172c;
  --crimson-bright: #c02241;
  --bone: #ede7e1;
  --bone-dim: #b2a9a2;
  --muted: #8a8078;
  --line: #282020;

  /* Las teclas blancas del piano son un color fijo (imitan marfil real):
     no cambian con el tema claro/oscuro como sí lo hace el texto. */
  --claro-fijo: #ede7e1;
  --claro-fijo-hover: #b2a9a2;

  --font-display: "Cormorant Garamond", serif;
  --font-body: "Work Sans", sans-serif;
}

/* --- Modo claro ------------------------------------------------------- */
/* Alternado con el botón de la barra de navegación (tema.js); por defecto
   el sitio es oscuro. El acento (crimson) y las teclas del piano se dejan
   igual en ambos temas a propósito. */
:root[data-tema="claro"] {
  --bg: #f7f2ec;
  --panel: #ffffff;
  --panel-2: #f2e9e1;
  --bone: #241c1a;
  --bone-dim: #5b4a42;
  --muted: #6b5c50;
  --line: #e3d5ca;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  color-scheme: dark;
  overflow-x: hidden;
}

html[data-tema="claro"] {
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--bone);
  font-family: var(--font-body);
  line-height: 1.5;
  overflow-x: hidden;
}

.app {
  max-width: 640px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}

.cabecera {
  position: relative;
  padding-right: 3rem;
}

.cabecera h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.1rem;
  margin: 0 0 0.4rem;
  color: var(--bone);
}

.subtitulo {
  color: var(--bone-dim);
  margin: 0 0 1.75rem;
  font-size: 0.98rem;
}

.piano-contenedor {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  padding: 0.75rem;
  margin-bottom: 1.25rem;
}

.piano {
  position: relative;
  height: 128px;
}

.tecla {
  position: absolute;
  top: 0;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.08s ease;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
  user-select: none;
  /* Red de seguridad: si algún nombre (p. ej. "Sol#1"/"Sol♭1", los más
     largos) no llega a caber del todo con el tamaño de letra calculado,
     que se recorte en vez de invadir visualmente la tecla de al lado. */
  overflow: hidden;
}

.tecla.blanca {
  height: 100%;
  background: var(--claro-fijo);
  border: 1px solid var(--line);
  border-radius: 0 0 4px 4px;
  z-index: 1;
}

.tecla.negra {
  height: 62%;
  background: #150f0f;
  border: 1px solid #000;
  border-radius: 0 0 3px 3px;
  z-index: 2;
}

.tecla.blanca:hover {
  background: var(--claro-fijo-hover);
}

.tecla.negra:hover {
  background: #2a2020;
}

.tecla.seleccionada {
  outline: 2px solid var(--crimson-bright);
  outline-offset: -2px;
}

.tecla.activa {
  background: var(--crimson-bright) !important;
}

.tecla.activa .tecla-etiqueta {
  color: var(--claro-fijo);
}

.tecla-etiqueta {
  font-family: var(--font-body);
  font-size: var(--tecla-fuente, 11px);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

.tecla.blanca .tecla-etiqueta {
  color: #2a2320;
}

.tecla.negra .tecla-etiqueta {
  color: var(--claro-fijo);
  /* Antes salía de --tecla-fuente (calculado del ancho de la tecla BLANCA),
     así que nunca se achicaba lo suficiente para la tecla negra real, mucho
     más angosta -- "Sol#1"/"Sol♭1" (los nombres más largos) se salían de su
     propia tecla. --tecla-fuente-negra sí sale del ancho real de la negra. */
  font-size: var(--tecla-fuente-negra, 9px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  max-width: 100%;
}

/* Sostenido arriba, bemol debajo -- un poco más tenue para que el nombre
   "principal" (el sostenido) siga siendo el que más resalta a simple vista. */
.tecla-etiqueta-linea {
  display: block;
}

.tecla-etiqueta-bemol {
  font-size: 0.82em;
  opacity: 0.72;
}

/* Con teclas negras muy estrechas (zoom bajo) el texto no cabe en horizontal:
   se rota para que siga siendo legible sin desbordar. */
.piano.estrecho .tecla.negra .tecla-etiqueta {
  transform: rotate(-90deg);
}

.piano-slider {
  width: 100%;
  margin: -0.75rem 0 0.5rem;
  accent-color: var(--crimson-bright);
}

.piano-zoom {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.piano-zoom input[type="range"] {
  flex: 1;
  accent-color: var(--crimson-bright);
}

.afinometro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 1.25rem;
}

.afinometro-arco {
  position: relative;
  width: 160px;
  height: 82px;
  overflow: hidden;
}

.afinometro-arco::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 2px solid var(--line);
  box-sizing: border-box;
}

.afinometro-aguja {
  position: absolute;
  bottom: 0;
  left: calc(50% - 1.5px);
  width: 3px;
  height: 74px;
  background: var(--crimson-bright);
  transform-origin: bottom center;
  transform: rotate(0deg);
  border-radius: 2px;
  transition: transform 0.08s ease, background 0.15s ease;
}

.afinometro-aguja.cerca {
  background: #d9a441;
}

.afinometro-aguja.centrado {
  background: #2f8a4c;
}

.afinometro-texto {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bone-dim);
  min-width: 3.5em;
  text-align: center;
}

.nav-principal {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.nav-principal a {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--bone-dim);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.nav-principal a:hover {
  border-color: var(--crimson);
}

.nav-principal a.activo {
  background: var(--crimson);
  border-color: var(--crimson);
  color: var(--claro-fijo);
}

/* Separa el menú en "Guía" / practicar / seguimiento / consulta, en vez de
   una lista plana de 10 enlaces sin ninguna jerarquía entre ellos. */
.nav-sep {
  width: 1px;
  align-self: stretch;
  background: var(--line);
  margin: 0.15rem 0.15rem;
}

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.hub-tarjeta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.25rem;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.1s ease;
}

.hub-tarjeta:hover {
  border-color: var(--crimson);
  transform: translateY(-2px);
}

.hub-icono {
  font-size: 1.8rem;
}

.hub-nombre {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--bone);
}

.hub-detalle {
  font-size: 0.85rem;
  color: var(--bone-dim);
  line-height: 1.5;
}

.campo-volumen {
  margin-bottom: 1.25rem;
}

.nota-grande {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: 2.6rem;
  font-weight: 600;
  text-align: center;
  color: var(--bone);
  padding: 0.5rem 0;
}

.grafico-pitch {
  width: 100%;
  height: 120px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.marcador {
  color: var(--bone-dim);
  font-size: 0.9rem;
  margin: 0;
}

.marcador strong {
  color: var(--bone);
}

.opciones-quiz {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 0.5rem;
}

.opciones-quiz button {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 0.55rem 0.4rem;
  border-radius: 8px;
  cursor: pointer;
}

.opciones-quiz button:hover:not(:disabled) {
  border-color: var(--crimson);
}

.opciones-quiz button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.opciones-quiz button.correcta {
  background: #1f5c33;
  border-color: #2f8a4c;
  color: var(--claro-fijo);
}

.opciones-quiz button.incorrecta {
  background: var(--wine);
  border-color: var(--crimson);
  color: var(--claro-fijo);
}

.tarjetas-progreso {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
}

.tarjeta-progreso {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.85rem;
}

.tarjeta-progreso .valor {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--bone);
  display: block;
}

.tarjeta-progreso .etiqueta {
  font-size: 0.78rem;
  color: var(--muted);
}

.rutina-lista {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.rutina-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
}

.rutina-item.completado {
  border-color: #2f8a4c;
  opacity: 0.75;
}

.rutina-item .rutina-info {
  flex: 1;
}

.rutina-item .rutina-nombre {
  color: var(--bone);
  font-weight: 500;
  font-size: 0.92rem;
  display: block;
}

.rutina-item .rutina-detalle {
  color: var(--muted);
  font-size: 0.78rem;
}

.rutina-item button {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--bone);
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  font-size: 0.9rem;
}

.rutina-item button:hover {
  border-color: var(--crimson);
}

.rutina-item input[type="checkbox"] {
  accent-color: #2f8a4c;
  width: 1.2rem;
  height: 1.2rem;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.tab,
.subtab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.6rem 0.25rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.tab:hover,
.subtab:hover {
  color: var(--bone-dim);
}

.tab.activo,
.subtab.activo {
  color: var(--bone);
  border-bottom-color: var(--crimson-bright);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.panel.comunes {
  background: var(--panel-2);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--bone-dim);
}

.campo span {
  color: var(--bone);
}

.campo.checkbox {
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
}

.campo.checkbox span {
  color: var(--bone-dim);
}

input[type="text"],
input[type="number"],
input[type="email"],
select,
textarea {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.5rem 0.6rem;
}

textarea {
  resize: vertical;
  min-height: 4.5em;
}

.metronomo-visual {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0;
}

.metronomo-punto {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 2px solid var(--line);
  transition: background 0.05s ease, transform 0.05s ease;
}

.metronomo-punto.pulso {
  background: var(--crimson-bright);
  transform: scale(1.15);
}

.metronomo-punto.pulso.acento {
  background: #ffb347;
}

.metronomo-punto.mini {
  width: 12px;
  height: 12px;
  border-width: 1px;
  flex-shrink: 0;
}

.ritmo-tira {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.7rem 0;
}

.ritmo-celda {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  min-height: 2.5rem;
  padding: 0.2rem 0.4rem;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--bone);
  transition: background 0.08s ease, border-color 0.08s ease;
}

.ritmo-celda.silencio {
  color: var(--muted);
}

.ritmo-celda.compas-inicio {
  margin-left: 0.5rem;
  border-left: 2px solid var(--line);
  padding-left: 0.6rem;
}

.ritmo-celda.activa {
  background: var(--crimson);
  border-color: var(--crimson-bright);
  color: var(--claro-fijo);
}

/* Barra compacta: el metrónomo se puede iniciar/parar y ajustar desde
   cualquier pestaña de la página, no solo desde la pestaña "Metrónomo". */
.metronomo-flotante {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin: 0 0 1.25rem;
  padding: 0.5rem 0.75rem;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--muted);
}

.metronomo-flotante .campo-inline {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.metronomo-flotante input[type="range"] {
  width: 90px;
  accent-color: var(--crimson-bright);
}

.metronomo-flotante output {
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
}

.metronomo-flotante .boton {
  padding: 0.3rem 0.65rem;
  font-size: 0.9rem;
}

.metronomo-flotante select {
  font-size: 0.85rem;
  padding: 0.3rem 0.5rem;
}

.metronomo-flotante .boton.en-marcha {
  background: var(--crimson);
  border-color: var(--crimson);
  color: var(--claro-fijo);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
  outline: 1px solid var(--crimson-bright);
  outline-offset: 1px;
}

/* Nota mal escrita en cualquier campo del sitio (Mapa vocal, Cifrado,
   Piano, Oído...). Deliberadamente NO usa crimson: todo el tema ya es
   rojo/crimson (marca, foco, botones), así que un borde rojo más ahí no
   se lee como "error" — se confunde con "seleccionado". Ámbar grueso +
   fondo tintado sí se distingue a simple vista. */
.campo-nota-invalida {
  border: 2px solid #ffb347;
  background: rgba(255, 179, 71, 0.12);
}

.campo-nota-invalida:focus {
  outline-color: #ffb347;
}

.campo-nota-mensaje {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.82rem;
  color: #ffb347;
}

input[type="range"] {
  accent-color: var(--crimson-bright);
  width: 100%;
}

input[type="checkbox"] {
  accent-color: var(--crimson-bright);
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

.descripcion {
  margin: -0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.descripcion a {
  color: var(--crimson-bright);
  font-weight: 600;
  text-decoration: none;
}

.descripcion a:hover {
  text-decoration: underline;
}

.avanzado {
  border-top: 1px solid var(--line);
  padding-top: 0.75rem;
}

.avanzado summary {
  cursor: pointer;
  color: var(--bone-dim);
  font-size: 0.88rem;
  margin-bottom: 0.75rem;
}

.avanzado > label {
  margin-top: 0.75rem;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.5rem 0 0.75rem;
}

.boton {
  appearance: none;
  display: inline-block;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.65rem 1.1rem;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.boton:hover:not(:disabled) {
  border-color: var(--crimson);
}

.boton:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.boton.principal {
  background: var(--crimson);
  border-color: var(--crimson);
  color: var(--claro-fijo);
}

.boton.principal:hover:not(:disabled) {
  background: var(--crimson-bright);
  border-color: var(--crimson-bright);
}

.estado {
  min-height: 1.2em;
  font-size: 0.88rem;
  color: var(--bone-dim);
}

.resultado {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-top: 0.5rem;
}

.resultado h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  margin: 0 0 0.4rem;
}

.resultado p {
  color: var(--bone-dim);
  font-size: 0.9rem;
  margin: 0;
  word-break: break-word;
}

.resultados-canto {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.resultado-nota {
  font-size: 0.85rem;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--bone-dim);
}

.titulo-seccion {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--bone);
  margin: 1.5rem 0 0.6rem;
}

.calendario-racha {
  overflow-x: auto;
  padding-bottom: 0.35rem;
}

.panel-vincular {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1.25rem 1.25rem;
  margin-top: 1.75rem;
}

.panel-vincular .titulo-seccion {
  margin-top: 0;
}

.vincular-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.vincular-fila input[type="text"] {
  flex: 1 1 220px;
  min-width: 0;
}

.boton.pequeno {
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
}

.nota-vincular {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0.75rem 0 0;
  line-height: 1.5;
}

.calendario-grid {
  display: flex;
  gap: 3px;
  width: max-content;
}

.calendario-semana {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.calendario-dia {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}

.calendario-dia.completado {
  background: var(--crimson-bright);
  border-color: var(--crimson-bright);
}

.calendario-dia.hoy {
  outline: 1px solid var(--bone-dim);
  outline-offset: 1px;
}

.calendario-leyenda {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.5rem;
}

.opciones-guia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.opcion-guia {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-align: left;
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--bone);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.opcion-guia:hover,
.opcion-guia:focus-visible {
  border-color: var(--crimson-bright);
}

.opcion-guia-icono {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.recomendacion {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 0.85rem;
}

.recomendacion-pagina {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.recomendacion h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  margin: 0.2rem 0 0.4rem;
  color: var(--bone);
}

.recomendacion p {
  color: var(--bone-dim);
  font-size: 0.9rem;
  margin: 0 0 0.8rem;
}

.grabaciones-lista {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.grabacion-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
}

.grabacion-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 140px;
  flex: 1 1 140px;
}

.grabacion-etiqueta {
  color: var(--bone);
  font-weight: 600;
  font-size: 0.92rem;
}

.grabacion-detalle {
  color: var(--muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.grabacion-item audio {
  flex: 1 1 220px;
  max-width: 100%;
  height: 34px;
}

.brillo-medidor {
  margin-top: 1rem;
}

.brillo-etiqueta {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--bone-dim);
  margin-bottom: 0.4rem;
}

.brillo-etiqueta span:last-child {
  color: var(--bone);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.brillo-pista {
  height: 10px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  overflow: hidden;
}

.brillo-barra {
  height: 100%;
  width: 0%;
  background: var(--crimson-bright);
  transition: width 0.12s linear;
}

.pie {
  margin-top: 2rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

.pie p {
  color: var(--muted);
  font-size: 0.8rem;
  margin: 0;
}

.cta-clases {
  margin: 1.75rem 0 0;
  padding: 0.9rem 1.1rem;
  background: var(--panel-2);
  border: 1px solid var(--crimson);
  border-radius: 10px;
  text-align: center;
}

.cta-clases p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--bone-dim);
}

.cta-clases a {
  color: var(--crimson-bright);
  font-weight: 600;
  text-decoration: none;
}

.cta-clases a:hover {
  text-decoration: underline;
}

.captura-lead {
  margin: 1.75rem 0 0;
  padding: 1.25rem 1.4rem;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--crimson);
  border-radius: 12px;
}

.captura-lead h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin: 0 0 0.3rem;
  color: var(--bone);
}

.captura-lead p {
  margin: 0 0 0.9rem;
  font-size: 0.85rem;
  color: var(--bone-dim);
  max-width: 60ch;
}

.captura-lead form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.captura-lead input[type="email"] {
  flex: 1 1 220px;
}

.captura-lead .boton {
  flex: 0 0 auto;
}

.captura-lead .captura-estado {
  margin-top: 0.6rem;
  font-size: 0.82rem;
}

.captura-lead .captura-estado.ok {
  color: #7fc98f;
}

.captura-lead .captura-estado.error {
  color: var(--crimson-bright);
}

.captura-lead .captura-descarga {
  margin-top: 0.6rem;
  font-size: 0.85rem;
}

.captura-lead .captura-descarga a {
  color: var(--crimson-bright);
  font-weight: 600;
  text-decoration: none;
}

.captura-lead .captura-descarga a:hover {
  text-decoration: underline;
}

.captura-lead .campo-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.boton-tema {
  appearance: none;
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--bone);
  font-size: 0.95rem;
  line-height: 1;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.boton-tema:hover {
  border-color: var(--crimson);
}

.glosario-lista {
  margin-top: 1rem;
}

.glosario-termino {
  border-bottom: 1px solid var(--line);
  padding: 0.9rem 0;
}

.glosario-termino:last-child {
  border-bottom: none;
}

.glosario-termino h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--bone);
  margin: 0;
}

.glosario-termino p {
  color: var(--bone-dim);
  font-size: 0.9rem;
  margin: 0.3rem 0 0;
}

.glosario-instagram {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  padding: 0.35rem 0.75rem;
}

.catalogo-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.65rem;
}

.catalogo-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 220px;
}

.catalogo-nombre {
  color: var(--bone);
  font-weight: 600;
  font-size: 0.95rem;
}

.catalogo-detalle {
  color: var(--muted);
  font-size: 0.8rem;
}

.logros-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.6rem;
}

.logro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.8rem 0.5rem;
  opacity: 0.45;
  filter: grayscale(1);
}

.logro.conseguido {
  opacity: 1;
  filter: none;
  border-color: var(--crimson);
}

.logro-icono {
  font-size: 1.6rem;
}

.logro-nombre {
  font-size: 0.78rem;
  color: var(--bone-dim);
  font-weight: 500;
}

.logro.conseguido .logro-nombre {
  color: var(--bone);
}

.campos-mapa {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

.mapa-vocal-contenedor {
  overflow-x: auto;
  min-width: 0; /* el padre es flex-column: sin esto no se encoge y no llega a hacer scroll */
  margin-top: 1rem;
  background: #ffffff;
  border-radius: 10px;
  padding: 0.5rem;
}

.mapa-vocal-contenedor svg {
  display: block;
}

/* --- Cifrado ------------------------------------------------------------ */

.cifrado-app {
  max-width: 900px;
}

.cifrado-seccion {
  margin: 1.1rem 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bone-dim);
}

.cifrado-espacio {
  height: 0.6rem;
}

.cifrado-linea-bloque {
  margin: 0 0 calc(1.1rem * var(--cifrado-escala, 1));
}

.cifrado-linea {
  display: grid;
  align-items: end;
  column-gap: 0;
  row-gap: calc(0.3rem * var(--cifrado-escala, 1));
  margin: 0;
  /* Un verso largo nunca se parte en varias filas: si no cabe, esta línea
     concreta se desliza horizontalmente (como .mapa-vocal-contenedor), sin
     afectar el ancho de la página ni de las demás líneas. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 0.1rem 0.3rem;
  margin-left: -0.1rem;
  margin-right: -0.1rem;
}

.cifrado-linea-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.3rem;
}

.cifrado-linea-acciones .boton {
  font-size: 0.72rem;
  padding: 0.35rem 0.6rem;
}

/* Botón "Llevar al editor de ritmo" compacto (líneas 2 en adelante): mismo
   clic, sin repetir el texto completo en cada línea de la canción. */
.cifrado-linea-acciones .boton-icono {
  padding: 0.3rem 0.45rem;
  font-size: 0.85rem;
  line-height: 1;
  min-width: 1.9rem;
}

.cifrado-celda {
  position: relative;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: calc(1.3rem * var(--cifrado-escala, 1));
  padding: 0 calc(0.1rem * var(--cifrado-escala, 1));
}

.cifrado-celda.inicio-palabra {
  margin-left: calc(0.45rem * var(--cifrado-escala, 1));
}

.cifrado-linea > .cifrado-celda:first-child {
  margin-left: 0;
}

.cifrado-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.15rem;
  min-height: 0;
}

.cifrado-chip {
  font-size: calc(0.54rem * var(--cifrado-escala, 1));
  font-weight: 700;
  line-height: 1.4;
  padding: 0 calc(0.25rem * var(--cifrado-escala, 1));
  border-radius: 999px;
  white-space: nowrap;
}

.celda-texto {
  display: inline-block;
  min-width: calc(1.1rem * var(--cifrado-escala, 1));
  margin-top: 0.15rem;
  padding: calc(0.15rem * var(--cifrado-escala, 1)) calc(0.28rem * var(--cifrado-escala, 1));
  background: var(--panel-2);
  color: var(--bone);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: calc(0.78rem * var(--cifrado-escala, 1));
  text-align: center;
  white-space: nowrap;
  outline: none;
}

.celda-texto:focus {
  border-color: var(--crimson-bright);
  outline: 1px solid var(--crimson-bright);
}

.celda-marca-btn {
  margin-top: 0.15rem;
  width: calc(0.85rem * var(--cifrado-escala, 1));
  height: calc(0.85rem * var(--cifrado-escala, 1));
  line-height: calc(0.78rem * var(--cifrado-escala, 1));
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: calc(0.65rem * var(--cifrado-escala, 1));
  cursor: pointer;
}

.celda-marca-btn:hover {
  border-color: var(--crimson-bright);
  color: var(--crimson-bright);
}

/* Botones de puntillo/tresillo/ligadura del Modo Músico: mismo círculo que
   .celda-marca-btn, pero "activo" cuando la unidad tiene ese campo puesto. */
.celda-marca-btn.activo {
  background: var(--crimson);
  border-color: var(--crimson-bright);
  color: var(--claro-fijo);
}

.celda-marca-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.celda-marca-btn:disabled:hover {
  border-color: var(--line);
  color: var(--muted);
}

/* Divisor de compás del Modo Músico -- misma idea que .ritmo-celda.compas-inicio. */
.cifrado-celda.compas-inicio {
  margin-left: 0.55rem;
  border-left: 2px solid var(--line);
  padding-left: 0.45rem;
}

/* Selector de figura del editor de ritmo (Personalizada, Modo Simple) --
   misma familia visual que .celda-nota, pero interactivo. */
.celda-figura {
  margin-top: 0.15rem;
  display: block;
  min-width: calc(1.8rem * var(--cifrado-escala, 1));
  max-width: 100%;
  box-sizing: border-box;
  padding: calc(0.12rem * var(--cifrado-escala, 1)) calc(0.2rem * var(--cifrado-escala, 1));
  background: var(--bg);
  color: var(--crimson-bright);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: calc(0.72rem * var(--cifrado-escala, 1));
  font-weight: 600;
  text-align: center;
}

.celda-figura:focus {
  border-color: var(--crimson-bright);
  outline: 1px solid var(--crimson-bright);
}

.celda-fila-botones {
  display: flex;
  gap: 0.2rem;
  margin-top: 0.15rem;
}

.cifrado-eslabon {
  grid-row: 1;
  align-self: center;
  margin-bottom: calc(1.2rem * var(--cifrado-escala, 1));
  width: calc(0.85rem * var(--cifrado-escala, 1));
  height: calc(0.85rem * var(--cifrado-escala, 1));
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  opacity: 0.6;
  cursor: pointer;
}

.cifrado-eslabon:hover {
  opacity: 1;
}

.cifrado-eslabon.activo {
  color: var(--crimson-bright);
  opacity: 1;
}

.celda-nota {
  grid-row: 2;
  /* auto-ancho como .celda-texto: crece con lo que escribas (p. ej. "Sol#4")
     en vez de quedar atado al ancho de la sílaba de arriba. */
  justify-self: center;
  display: inline-block;
  min-width: calc(1.1rem * var(--cifrado-escala, 1));
  /* Sin max-width: si lo dejamos en 100% del área de la rejilla, cuando el
     ancho disponible (móvil) se queda corto la columna se aplasta y el
     max-width recorta la nota en vez de dejar que la línea entera se
     desborde (que es lo que overflow-x:auto en .cifrado-linea espera). */
  box-sizing: border-box;
  padding: calc(0.15rem * var(--cifrado-escala, 1)) calc(0.28rem * var(--cifrado-escala, 1));
  background: var(--bg);
  color: var(--crimson-bright);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: calc(0.68rem * var(--cifrado-escala, 1));
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  outline: none;
}

/* Cuando la nota es de dos o más sílabas unidas por el eslabón, que se vea
   pegada de principio a fin de esas sílabas (no flotando centrada y angosta
   en medio del hueco). */
.celda-nota-fusionada {
  justify-self: stretch;
  width: 100%;
  min-width: 100%;
}

.celda-nota:empty::before {
  content: "·";
  color: var(--muted);
  font-weight: 400;
}

.celda-nota:focus {
  border-color: var(--crimson-bright);
  outline: 1px solid var(--crimson-bright);
}

/* La nota que está sonando ahora mismo (reproducir línea o canción
   completa) -- mismo lenguaje visual que .tecla.activa en el piano, para
   que "esto está sonando" se vea igual en todo el sitio. */
.celda-nota.sonando {
  background: var(--crimson-bright) !important;
  color: var(--claro-fijo) !important;
  border-color: var(--crimson-bright);
}

.marcas-menu {
  position: absolute;
  z-index: 40;
  width: 240px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.6rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.marcas-menu-categoria {
  margin: 0.6rem 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.marcas-menu-categoria:first-child {
  margin-top: 0;
}

.marcas-menu-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.1rem;
  font-size: 0.82rem;
  color: var(--bone);
  cursor: pointer;
}

.marcas-menu-swatch {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 3px;
  flex-shrink: 0;
}

.marcas-menu-cerrar {
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.4rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--bone);
  font-size: 0.78rem;
  cursor: pointer;
}

.leyenda-h2 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--bone);
}

.cifrado-leyenda {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.leyenda-titulo {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.leyenda-lista {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.leyenda-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--bone-dim);
}

.leyenda-swatch {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  flex-shrink: 0;
}

@media print {
  .nav-principal,
  #cifradoEntradaPanel,
  .cifrado-resultado > .descripcion,
  #cifradoAcciones,
  .cifrado-eslabon,
  .celda-marca-btn,
  .cta-clases,
  .pie {
    display: none !important;
  }

  body,
  .app {
    background: #fff;
    color: #000;
    max-width: 100%;
  }

  .celda-texto {
    border-color: #999;
    color: #000;
  }

  .celda-nota {
    border-color: #999;
    color: #93172c !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .cifrado-chip {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .leyenda-swatch,
  .marcas-menu-swatch {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

@media (max-width: 480px) {
  .cabecera h1 {
    font-size: 1.7rem;
  }

  /* El menú de 11 enlaces se envolvía en 5 filas en el celular -- toda la
     primera pantalla era navegación, antes de ver nada de contenido real.
     Un carrusel horizontal lo arreglaba en altura, pero escondía enlaces
     fuera de vista sin ningún indicio de que había más (probado: no se
     notaba que hubiera varios modos). Una cuadrícula fija de 3 columnas deja
     ver los 11 de un vistazo, sin desplazar nada, y con celdas iguales se ve
     como un menú de verdad -- no como botones sueltos de tamaño variable. */
  .nav-principal {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }

  .nav-principal a {
    flex: initial;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.55rem 0.3rem;
    font-size: 0.82rem;
    line-height: 1.25;
  }

  /* Los separadores agrupaban visualmente el menú en una fila (Guía |
     herramientas | Progreso | consulta) -- en una cuadrícula de 3 columnas
     ya no caen entre los grupos correctos, así que estorban más de lo que
     ayudan. La cuadrícula misma ya se ve ordenada sin ellos. */
  .nav-sep {
    display: none;
  }
}