/* ============================================================
   Grupo de Alabanza — hoja de estilos única
   ============================================================ */

/* El suelo es azul de noche, no gris. Un gris neutro no dice nada; este azul es el
   de un santuario con la luz baja, que es donde se usa la app de verdad. Los grises
   de apoyo llevan el mismo sesgo azul para que sean una familia y no un remiendo.
   Toda la luz de la pantalla se la queda el acento, y el acento son los acordes. */
:root {
  --bg: #0b1220;
  --surface: #131c2e;
  --surface-2: #1b263c;
  --border: #26324b;
  --text: #f4f6fb;
  --muted: #8a97b2;
  --accent: #e8b04b;
  --accent-soft: rgba(232, 176, 75, 0.14);
  --danger: #f2635f;
  --ok: #4fbf8b;
  --radius: 12px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);

  /* El resplandor de los acordes. Solo existe sobre fondo oscuro: en claro y en papel
     un halo alrededor de tinta oscura no se lee como un efecto, se lee como un defecto
     de impresión, así que allí vale `none`. */
  --halo-acorde: 0 0 0.4em rgba(232, 176, 75, 0.35);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  --header-h: 56px;

  /* Resaltador. Sobre fondo oscuro un amarillo de rotulador deslumbra y tapa la letra,
     así que aquí es un velo translúcido y en el tema claro sí es tinta de rotulador.
     Las muestras redondas de la paleta son las mismas en los dos temas: de tono medio,
     se ven igual sobre claro y sobre oscuro. */
  --marca-amarillo: rgba(240, 200, 60, 0.3);
  --marca-verde: rgba(90, 200, 130, 0.28);
  --marca-azul: rgba(90, 160, 240, 0.3);
  --marca-rosa: rgba(240, 120, 170, 0.28);
  --marca-rojo: rgba(229, 72, 77, 0.3);
  --swatch-amarillo: #f2c94c;
  --swatch-verde: #57c785;
  --swatch-azul: #5aa0ea;
  --swatch-rosa: #ee7fae;
  --swatch-rojo: #e5484d;
}

/* El claro no es el oscuro invertido: es papel. Blanco con un susurro de azul, para que
   sea la misma familia; y el oro baja a bronce, porque el oro claro sobre blanco apenas
   llega a 2:1 de contraste y no se lee de reojo desde el atril. El bronce llega a ~5:1. */
[data-theme="light"] {
  --bg: #f5f8fc;
  --surface: #ffffff;
  --surface-2: #ebf0f7;
  --border: #d9e1ee;
  --text: #141a26;
  --muted: #5c6880;
  --accent: #8f5a06;
  --accent-soft: rgba(143, 90, 6, 0.09);
  --danger: #c93b37;
  --ok: #1f8a5f;
  --shadow: 0 8px 24px rgba(20, 22, 40, 0.1);
  --halo-acorde: none;
  --marca-amarillo: #ffe79e;
  --marca-verde: #bff0d2;
  --marca-azul: #cbe3ff;
  --marca-rosa: #ffd2e3;
  --marca-rojo: #ffd0d1;
}

* { box-sizing: border-box; }

/* `hidden` tiene que ganar SIEMPRE.
   El navegador lo aplica con `[hidden] { display: none }`, pero cualquier regla nuestra
   que ponga `display` le gana solo por venir de la hoja de la app. Le pasaba a `.mapa`,
   a `.diagramas` y a `.paleta`, las tres con `display: flex`: se les ponía `hidden` y
   seguían viéndose. La paleta del resaltador salía siempre, con el modo apagado, así
   que tocar una línea no hacía nada. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; }

/* Un icono suelto mide lo que el texto que lo acompaña.
   Los SVG del código no traen width ni height (así se adaptan a cada sitio), y sin
   una medida por defecto se estiran hasta llenar su contenedor: es lo que hacía la
   nota musical de «Mi perfil», que ocupaba media pantalla. Va con :where() para que
   tenga especificidad cero y cualquier regla más concreta (.brand svg, .btn svg,
   las digitaciones de guitarra…) siga mandando sobre ella. */
:where(svg) { width: 1.15em; height: 1.15em; flex: none; }

.app-loading {
  display: grid;
  place-items: center;
  min-height: 60vh;
  color: var(--muted);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; margin: 0; }
p { margin: 0 0 0.75em; }

/* ---------- Shell ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--header-h);
  padding: 0 14px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand svg { width: 24px; height: 24px; flex: none; }
.brand span { display: none; }

.header .spacer { flex: 1; }

.nav-desktop { display: none; gap: 4px; }
.nav-desktop a {
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 600;
}
.nav-desktop a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-desktop a.active { background: var(--accent-soft); color: var(--accent); }

.avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--border);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}

.nav-mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-mobile a {
  flex: 1;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 8px 2px 7px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
}
.nav-mobile a:hover { text-decoration: none; }
.nav-mobile a.active { color: var(--accent); }
.nav-mobile svg { width: 21px; height: 21px; }

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 16px 14px 92px;
}
main.wide { max-width: 1180px; }

/* ---------- Tipografía de vistas ---------- */

.page-head {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.page-head h1 { font-size: 1.5rem; }
.page-head .sub { color: var(--muted); font-size: 0.9rem; }
/* El bloque del título pide 240px y no baja de ahí, así que en un móvil los botones
   se van a la línea siguiente en vez de aplastarlo.
   Antes tenía `min-width: 0` —puesto para que no desbordara— y el efecto era el
   contrario del buscado: como podía encogerse hasta casi nada, flex nunca veía la
   necesidad de partir la línea y el título acababa en una columna de tres letras,
   cortado a mitad de palabra.
   El `min()` es el seguro: si la pantalla es más angosta que 240px, manda el 100%
   y no se desborda nada. */
.page-head .grow { flex: 1 1 240px; min-width: min(240px, 100%); }

.muted { color: var(--muted); }
.small { font-size: 0.86rem; }
.empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

/* ---------- Controles ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { border-color: var(--accent); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #17181f; }
[data-theme="light"] .btn.primary { color: #fff; }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.btn.sm { min-height: 32px; padding: 4px 10px; font-size: 0.84rem; border-radius: 8px; }
.btn.icon { padding: 0; width: 40px; }
.btn.icon.sm { width: 32px; }
.btn svg { width: 17px; height: 17px; }

.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.tight { gap: 6px; }
.stack { display: grid; gap: 12px; }
.stack.tight { gap: 8px; }

/* Bloque, no grid: así el título y el "(opcional)" quedan en la misma línea. */
label.field { display: block; font-size: 0.84rem; font-weight: 600; color: var(--muted); }
label.field > input,
label.field > select,
label.field > textarea { margin-top: 5px; }

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}
textarea { resize: vertical; min-height: 90px; }
/* Flecha propia para que un desplegable no se confunda con un campo de texto. */
select {
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%239aa0b2' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 11px;
}

.grid-2 { display: grid; gap: 12px; grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.card + .card { margin-top: 12px; }
.card h2, .card h3 { font-size: 1rem; margin-bottom: 10px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.chip.static { cursor: default; }
.key-badge {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  padding: 2px 7px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.82rem;
}

/* ---------- Repertorio ---------- */

.search-bar { display: grid; gap: 10px; margin-bottom: 14px; }
/* Los filtros se desplazan dentro de su propia franja, sin ensanchar la página. */
.search-bar .row { min-width: 0; overflow-x: auto; padding-bottom: 2px; flex-wrap: nowrap; }
.search-bar .row::-webkit-scrollbar { height: 0; }

/* Los tres filtros miden lo mismo. Por dentro son cosas distintas —dos desplegables
   y un interruptor— y con sus estilos de origen salían dispares: los desplegables
   anchos y altos, y «archivadas» de la mitad de alto. En una fila de filtros eso se
   lee como un descuido, así que aquí se les da a los tres la misma caja. */
.search-bar .filtros > select,
.search-bar .filtros > .chip {
  flex: none;
  width: 165px;
  height: 40px;
  padding-block: 0;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
}
.search-bar .filtros > .chip { justify-content: center; }

.song-list { display: grid; gap: 8px; }
.song-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
}
.song-row > * { min-width: 0; }
.song-row:hover { border-color: var(--accent); text-decoration: none; }
/* El título ocupa dos renglones como mucho, y lo que sobre se corta con puntos
   suspensivos. Es la red por si una canción entra con un título disparatado —una
   importación que tomó por nombre media letra—: la lista tiene que seguir siendo una
   lista, no un muro de texto donde no se encuentra nada. */
.song-row .title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-weight: 600;
}
.song-row .meta {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.8rem;
}
.song-row .right {
  max-width: 40vw;
  text-align: right;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

/* ---------- Mapa de la canción ---------- */

/* El recorrido de un vistazo: Intro · Verso 1 · Coro… Tocar una parte salta a ella.
   El color lo pone cada botón en la variable --c, según el tipo de sección. */
.mapa {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 14px;
}
.mapa::-webkit-scrollbar { height: 0; }
.mapa .parte {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0;
  border: 2px solid var(--c);
  border-radius: 999px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.mapa .parte .sigla { min-width: 30px; padding: 0 5px; text-align: center; }
.mapa .parte .veces { padding: 0 10px 0 2px; font-size: 0.72rem; color: var(--muted); }
/* Cuando se repite, la píldora se alarga y se tiñe: se distingue sin leerla. */
.mapa .parte.repite { background: color-mix(in srgb, var(--c) 20%, transparent); }
.mapa .parte:hover { background: color-mix(in srgb, var(--c) 32%, transparent); }

/* ---------- Diagramas de guitarra ---------- */

/* Los dibujos van en SVG con currentColor, así que se adaptan solos al tema y al
   imprimir. El número del dedo se pinta del color del fondo, encima del punto. */
.diagramas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 20px;
  padding: 14px 12px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--accent);
}
.diagramas .digitacion {
  width: 76px;
  height: 96px;
  flex: 0 0 auto;
}

/* ---------- Acordes y letra ---------- */

.chart {
  font-size: var(--chart-size, 1rem);
  line-height: 1.6;
}
.chart .section {
  margin: 0 0 18px;
  /* Al saltar desde el mapa, que la sección no quede tapada por la barra pegajosa. */
  scroll-margin-top: calc(var(--header-h) + 64px);
}
.chart .section-label {
  display: inline-block;
  margin-bottom: 4px;
  padding: 2px 9px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--accent);
  font-size: 0.74em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.chart .line { margin: 0; min-height: 1.4em; }
.chart .line.spacer { height: 0.7em; min-height: 0; }
.chart .seg { display: inline-block; vertical-align: bottom; }
.chart .seg .ch {
  display: block;
  /* El relleno derecha solo separa cuando el acorde es más ancho que la sílaba. */
  padding-right: 0.5em;
  font-family: var(--mono);
  font-size: 0.86em;
  font-weight: 700;
  color: var(--accent);
  text-shadow: var(--halo-acorde);
  line-height: 1.35;
  white-space: pre;
}
.chart .seg .ly { display: block; white-space: pre; }
.chart .seg.free .ly { white-space: pre-wrap; }
.chart.no-chords .seg .ch { display: none; }

.chart .line.chords-only .ch {
  display: inline-block;
  margin-right: 1.15em;
  font-family: var(--mono);
  font-size: 0.86em;
  font-weight: 700;
  color: var(--accent);
  text-shadow: var(--halo-acorde);
  white-space: pre;
}
.chart.no-chords .line.chords-only { display: none; }

/* ---------- Resaltador ---------- */

/* El fondo se pinta sobre la letra y los acordes, no sobre el bloque entero: la banda
   queda del ancho de lo que hay escrito, como un rotulador pasado por encima, en vez de
   un rectángulo que llega hasta el borde de la pantalla. */
.chart .line[data-marca="amarillo"] { --marca: var(--marca-amarillo); }
.chart .line[data-marca="verde"] { --marca: var(--marca-verde); }
.chart .line[data-marca="azul"] { --marca: var(--marca-azul); }
.chart .line[data-marca="rosa"] { --marca: var(--marca-rosa); }
.chart .line[data-marca="rojo"] { --marca: var(--marca-rojo); }

.chart .line.marcada .ly,
.chart .line.marcada .ch { background: var(--marca); }
.chart .line.direction.marcada {
  width: fit-content;
  padding: 0 5px;
  border-radius: 5px;
  background: var(--marca);
}

/* Con la paleta abierta, la letra deja de ser seleccionable. En el móvil, mantener el
   dedo sobre un verso para desplazar la pantalla sacaba el menú de «copiar» encima de
   todo, y el `touch-callout` de iOS la vista previa del enlace. Fuera del modo de marcar
   la letra se sigue pudiendo seleccionar y copiar con normalidad. */
.chart.marcando {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Y esto solo con la herramienta «Línea»: el resto del tiempo la letra no tiene por qué
   comportarse como un montón de botones. */
.chart.tocar-linea .line[data-linea] { cursor: pointer; border-radius: 5px; }
.chart.tocar-linea .line[data-linea]:hover { outline: 2px dashed var(--border); outline-offset: 2px; }

.paleta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.paleta .grow { flex: 1 1 180px; }
.paleta .colores { display: flex; gap: 6px; }
.paleta .color {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--swatch);
  cursor: pointer;
}
.paleta .color.on { border-color: var(--text); }
/* La herramienta puesta va rellena, no solo con el borde teñido: es la única forma de
   saber cuál está en la mano, y con «Leer» —que viene puesta y no hace nada visible al
   tocarla— era imposible adivinarlo. */
.paleta .btn.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.paleta #ayuda-paleta { flex: 1 1 100%; }
.paleta .group { flex-wrap: wrap; }

/* Separador entre bloques. Marca dónde cambia el tipo de cosa —del tono a la vista, de
   las herramientas a las acciones— sin añadir ni una palabra más a la pantalla. */
.toolbar .sep,
.paleta .sep {
  width: 1px;
  align-self: stretch;
  margin: 2px 4px;
  background: var(--border);
}

/* ---------- Lo dibujado a mano ---------- */

/* El SVG va superpuesto a la letra y no recibe toques salvo cuando hay lápiz, resaltador
   o borrador en la mano; eso lo pone el módulo de dibujo. `overflow: visible` deja que un
   círculo se salga del renglón, que es lo normal al rodear un acorde. */
.lienzo { position: relative; }
.tinta {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.tinta.borrando { cursor: crosshair; }
.tinta .trazo { fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* El rotulador va translúcido, no con `mix-blend-mode: multiply`. Multiply tiñe más
   bonito, pero depende del contexto de apilado: si el navegador no lo aplica, el trazo
   pasa a ser opaco y TAPA la letra justo donde más importa. La transparencia se ve
   siempre igual, en tema claro y en oscuro. */
.tinta .trazo.marcador { stroke-linecap: butt; opacity: 0.45; }
.tinta.escribiendo { cursor: text; }

/* El apunte lleva un borde del color del fondo pintado ANTES del relleno: le hace un
   halo y se lee igual sobre la letra, sobre un acorde o sobre un resaltado. Sin él, una
   nota encima de un verso es un revoltijo de letras. */
.tinta .nota {
  font-family: var(--sans);
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 4px;
  stroke-linejoin: round;
}

/* Se escribe DONDE se toca, sin diálogo. El campo hereda el tamaño y el color que va a
   tener el apunte, así que lo que se ve mientras se escribe ya es el resultado; lo único
   que sobra es el subrayado de puntos, que marca dónde se está escribiendo. */
.apunte-editor {
  position: absolute;
  z-index: 2;
  min-width: 6ch;
  padding: 0 2px;
  border: 0;
  border-bottom: 2px dotted currentColor;
  border-radius: 0;
  background: var(--bg);
  font-family: var(--sans);
  font-weight: 700;
  /* El mismo interlineado con el que se dibujan los renglones del apunte (1.25 del
     cuerpo), para que al guardarlo no cambie de forma. */
  line-height: 1.25;
  outline: none;
  /* Es un <textarea> para poder bajar de renglón con Enter, pero no debe parecerlo:
     ni asa de redimensionar ni barra de desplazamiento; el alto lo pone `rows`. */
  resize: none;
  overflow: hidden;
}
.apunte-editor::placeholder { color: var(--muted); font-weight: 400; }

.chart .direction {
  color: var(--muted);
  font-style: italic;
  font-size: 0.9em;
}

/* ---------- Detalle de canción ---------- */

.song-hero { margin-bottom: 14px; }
.song-hero h1 { font-size: 1.6rem; }
.song-hero .artist { color: var(--muted); }
.facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* En pantalla ancha no hay nada que recoger: `contents` deja que los controles de
   «Más» se coloquen en la barra como si el contenedor no existiera. */
.toolbar .avanzado { display: contents; }
.toolbar .chip.solo-movil { display: none; }

.toolbar {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 0;
  margin-bottom: 8px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.toolbar .group,
.paleta .group {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.toolbar .group .label,
.paleta .group .label {
  padding: 0 8px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
}
.toolbar .group .value { min-width: 40px; text-align: center; font-weight: 700; font-size: 0.9rem; }

/* Las pestañas se desplazan de lado en pantallas angostas en vez de desbordar. */
.tabs {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.tabs::-webkit-scrollbar { height: 0; }
.tabs button {
  flex: none;
  padding: 9px 13px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }

.file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
/* La base de 150px hace que los botones bajen a una segunda línea en el celular. */
.file-row .grow { flex: 1 1 150px; min-width: 0; }
.file-row .name {
  display: block;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-row .muted.small { display: block; }

/* ---------- Editor ---------- */

.editor-split { display: grid; gap: 12px; grid-template-columns: 1fr; }
.editor-body {
  min-height: 320px;
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1.55;
  tab-size: 4;
}
.preview {
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-height: 60vh;
  overflow: auto;
}
.hint {
  padding: 10px 12px;
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.82rem;
}
.hint code {
  font-family: var(--mono);
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 4px;
  border-radius: 4px;
}

/* ---------- Setlists e historial ---------- */

.setlist-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.setlist-item > * { min-width: 0; }
/* El mango de arrastrar. `touch-action: none` es lo que impide que el móvil se lleve el
   gesto para desplazar la página en cuanto el dedo se mueve: sin eso no se puede arrastrar
   nada en el teléfono, que es justo donde se arma el setlist. */
.setlist-item .mango {
  display: flex;
  align-items: center;
  gap: 4px;
  /* Un <button> no hereda el tamaño de letra de la página: sin esto el icono, que mide
     en «em», saldría diminuto. Y el alto es para que el dedo acierte. */
  font-size: 1rem;
  /* Alto y ancho generosos: con el dedo, un asa del tamaño justo del icono se falla más
     de lo que se acierta. El margen negativo se los devuelve al diseño, así que la fila
     no crece por dentro. */
  min-height: 46px;
  padding: 0 10px 0 6px;
  margin: -3px -6px -3px -6px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: grab;
  touch-action: none;
}
.setlist-item .mango:active { cursor: grabbing; }
.setlist-item .mango:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

/* Mientras se lleva, la fila se despega del resto: por encima de sus vecinas, con sombra
   y sin transición, que aquí la posición la manda el dedo cuadro a cuadro. */
.setlist-item.llevandola {
  position: relative;
  z-index: 5;
  border-color: var(--accent);
  box-shadow: var(--shadow);
  cursor: grabbing;
}
.setlist-item .pos {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}
.setlist-item.dragging { opacity: 0.45; }
.setlist-item.drop-target { border-color: var(--accent); }

.timeline { display: grid; gap: 10px; }
.timeline .day {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.timeline .day-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.timeline .day-head .date { font-weight: 700; }
.timeline ol { margin: 0; padding-left: 20px; color: var(--muted); }
.timeline ol li { margin: 2px 0; }
.timeline ol li a { color: var(--text); font-weight: 500; }

/* ---------- Modo presentación ---------- */

.stage {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.stage-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.stage-head .title { font-weight: 700; flex: 1; min-width: 120px; }
.stage-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px 60vh;
  scroll-behavior: auto;
}
.stage-body .chart { --chart-size: var(--stage-size, 1.6rem); line-height: 1.5; }
.stage-body .chart .section-label { font-size: 0.5em; }

/* ---------- Toasts y modal ---------- */

.toasts {
  position: fixed;
  bottom: 78px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: grid;
  gap: 8px;
  width: min(92vw, 420px);
}
.toast {
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  font-size: 0.9rem;
  animation: rise 0.18s ease-out;
}
.toast.error { border-color: var(--danger); color: var(--danger); }
.toast.ok { border-color: var(--ok); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.55);
}
.sheet {
  width: min(96vw, 520px);
  max-height: 86vh;
  overflow: auto;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.sheet h2 { font-size: 1.15rem; margin-bottom: 14px; }
.sheet .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }

/* ---------- Login ---------- */

.auth-wrap {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px 16px;
}
.auth-card {
  width: min(100%, 400px);
  padding: 26px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.auth-card .logo { display: grid; place-items: center; gap: 8px; margin-bottom: 20px; text-align: center; }
.auth-card .logo svg { width: 46px; height: 46px; }
.auth-card .logo h1 { font-size: 1.3rem; }
.member-picker { display: grid; gap: 8px; max-height: 260px; overflow: auto; }
.member-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.member-pick:hover { border-color: var(--accent); }
.member-pick .who { flex: 1; }
.member-pick .who b { display: block; }
.pin-input { letter-spacing: 0.5em; text-align: center; font-size: 1.3rem; font-family: var(--mono); }

/* ---------- Responsive ---------- */

/* En el teléfono, la canción tiene que empezar arriba.
   Antes de la letra había siete filas: volver, título, etiquetas (dos), la barra de
   controles (tres) y los botones de acción (dos). La canción arrancaba a dos tercios de
   la pantalla y solo cabían cinco renglones, que es justo lo contrario de lo que hace
   falta en el atril.
   Tres medidas, ninguna quita nada: lo que menos se toca se recoge detrás de «Más», y
   las dos filas de fichas se desplazan de lado en vez de partirse en dos. */
@media (max-width: 699px) {
  .toolbar .chip.solo-movil { display: inline-flex; }
  .toolbar .avanzado {
    display: flex;
    flex-basis: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .toolbar.compacta .avanzado { display: none; }
  /* Los separadores solo ordenan cuando todo cabe en una fila. */
  .toolbar .sep { display: none; }

  .facts,
  .acciones {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .facts::-webkit-scrollbar,
  .acciones::-webkit-scrollbar { height: 0; }
  .facts > *,
  .acciones > * { flex: none; }

  .song-hero { margin-bottom: 10px; }
  .song-hero h1 { font-size: 1.3rem; }
  main { padding-top: 10px; }
}

@media (min-width: 700px) {
  .brand span { display: inline; }
  .nav-desktop { display: flex; }
  .nav-mobile { display: none; }
  main { padding-bottom: 48px; }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1000px) {
  .editor-split { grid-template-columns: 1fr 1fr; align-items: start; }
  .preview { position: sticky; top: calc(var(--header-h) + 12px); max-height: 76vh; }
}

@media print {
  .header, .nav-mobile, .toolbar, .tabs, .toasts, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  /* En papel el fondo es blanco aunque la app esté en oscuro, así que los resaltados
     usan la tinta del tema claro. `print-color-adjust` es lo que impide que el
     navegador los quite «para ahorrar tinta»: sin él la hoja sale sin marcar. */
  .chart .line[data-marca="amarillo"] { --marca: #ffe79e; }
  .chart .line[data-marca="verde"] { --marca: #bff0d2; }
  .chart .line[data-marca="azul"] { --marca: #cbe3ff; }
  .chart .line[data-marca="rosa"] { --marca: #ffd2e3; }
  .chart .line[data-marca="rojo"] { --marca: #ffd0d1; }
  /* Lo dibujado a mano también sale en papel: es el apunte de esa persona para el atril. */
  .tinta .trazo, .tinta .nota { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* En papel el fondo es blanco, así que el halo del texto también. */
  .tinta .nota { stroke: #fff; }
  /* En la hoja impresa el número de orden sí sirve; el asa de arrastrar, no. */
  .setlist-item .mango svg { display: none; }
  .chart .line.marcada .ly,
  .chart .line.marcada .ch,
  .chart .line.direction.marcada {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  main { padding: 0; max-width: none; }
  /* En papel el acorde es tinta negra y nada más: el halo es cosa de la pantalla oscura,
     y si la app está en oscuro al mandar a imprimir, `--halo-acorde` todavía vale el
     resplandor. Hay que apagarlo aquí a mano. La línea de solo acordes va con las otras:
     antes salía impresa en color de acento, que era lo único del cifrado que no era negro. */
  .chart .seg .ch,
  .chart .line.chords-only .ch { color: #000; text-shadow: none; }
  .chart .section-label { background: none; color: #000; border: 1px solid #000; }
  /* Los diagramas sí se imprimen: en el atril, en papel, es donde más se miran. */
  .diagramas { background: none; border: 1px solid #000; color: #000; break-inside: avoid; }
  .diagramas .digitacion text[fill^="var"] { fill: #fff; }
}