/* ============================================================
   SETLIST — hoja de estilos
   "Un afiche de recital, no una app oscura": negro cálido de sala,
   tipografía de afiche (Archivo), un solo naranja que grita.
   Los valores salen de /tokens.css (el contrato del rediseño, card #55):
   acá solo se mapean a los nombres que esta hoja ya usaba.
   ============================================================ */

/* Archivo variable, autohospedada: los ensayos no tienen wifi.
   Dos familias del MISMO archivo: "Archivo Angosta" clava el font-stretch
   en 75%, así todo lo que usa --font-display sale condensado sin tocar
   selector por selector (el navegador ajusta el pedido al rango de la cara). */
@font-face{
  font-family:"Archivo";
  src:url("/archivo-variable.woff2") format("woff2");
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
}
@font-face{
  font-family:"Archivo Angosta";
  src:url("/archivo-variable.woff2") format("woff2");
  font-weight:100 900;
  font-stretch:75% 75%;
  font-display:swap;
}

:root{
  --bg:var(--fondo);
  --bg-panel:var(--superficie);
  --bg-panel-2:var(--superficie-2);
  --bg-raised:var(--neutral-700);
  --accent:var(--acento);
  /* El "dim" es el mismo naranja pisado con fondo, no un segundo color. */
  --accent-dim:#B8431A;
  --accent-glow: rgba(255,90,31,0.14);
  --danger:var(--error);
  --danger-dim:#B23129;
  --text:var(--texto);
  --text-muted:var(--texto-sec);
  --border:var(--borde);
  --font-display: "Archivo Angosta", "Arial Narrow", "Segoe UI", Arial, sans-serif;
  --font-body: "Archivo", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --rail: 68px;
  /* El panel es donde se leen los títulos y se arrastran las canciones: un cm
     más de ancho es un cm menos de títulos cortados con puntitos. */
  --panel: 278px;
  --topbar: 52px;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0; height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  overflow:hidden;
}

button, input, textarea, select{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ============================================================
   SHELL: rail · panel · contenido, con la barra de arriba cruzando
   ============================================================ */
/* ÁREA SEGURA. Instalada como app, la pantalla es toda nuestra — incluido lo
   que queda debajo de la barrita del indicador home y detrás de la barra de
   estado. Estos cuatro valores son cuánto hay que correrse para no quedar
   tapado. En un navegador común dan 0 y no cambian nada. */
:root{
  --safe-arriba: env(safe-area-inset-top, 0px);
  --safe-abajo:  env(safe-area-inset-bottom, 0px);
  --safe-izq:    env(safe-area-inset-left, 0px);
  --safe-der:    env(safe-area-inset-right, 0px);
}

#app{
  display:none;
  grid-template-columns: var(--rail) var(--panel) minmax(0,1fr);
  /* La barra de arriba crece para meterse debajo de la barra de estado sin que
     su contenido quede tapado. */
  grid-template-rows: calc(var(--topbar) + var(--safe-arriba)) minmax(0,1fr);
  height:100vh;
  height:100dvh;   /* en el celular, que la barra del navegador no tape la letra */
  /* La medida posta de la ventana, tomada por JS: en la tablet Android
     instalada dvh miente (no descuenta la taskbar) y el pie quedaba afuera. */
  height:var(--alto-app, 100dvh);
  width:100vw;
  transition: grid-template-columns .22s ease;
}
body.adentro #app{ display:grid; }

/* El panel de canciones aparece cuando hay una lista abierta. En las pantallas
   que no son de una lista no tiene nada que decir y le roba lugar al contenido. */
body[data-vista="listas"] #app,
body[data-vista="ajustes"] #app,
body[data-vista="importar"] #app,
body[data-vista="cuenta"] #app,
body[data-vista="ayuda"] #app,
body[data-vista="compartir"] #app{
  grid-template-columns: var(--rail) 0px minmax(0,1fr);
}

/* Cada zona se planta en su columna. OJO: sin esto, un elemento con
   display:none no ocupa su celda y el grid corre a los que siguen — en las
   vistas por link, donde el rail se esconde, el panel caía en la columna del
   rail (0px) y el contenido en la del panel. */
#rail   { grid-column:1; grid-row:2; }
#panel  { grid-column:2; grid-row:2; }
#content{ grid-column:3; grid-row:2; }

/* El panel se pliega con la corchea del rail (card #33): misma columna en 0px
   que ya usan las vistas sin lista, así la transición existente hace todo. */
#app.panel-plegado{ grid-template-columns: var(--rail) 0px minmax(0,1fr); }

/* Pantalla completa: se va todo menos la lista. */
body[data-vista="full"] #app{
  grid-template-columns: minmax(0,1fr);
  grid-template-rows: minmax(0,1fr);
}
body[data-vista="full"] #content{ grid-column:1; grid-row:1; }
body[data-vista="full"] #topbar,
body[data-vista="full"] #rail,
body[data-vista="full"] #panel,
body[data-vista="full"] #bottombar{ display:none; }

/* ---------- barra de arriba ---------- */
#topbar{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:12px;
  padding:var(--safe-arriba) calc(10px + var(--safe-der)) 0 calc(14px + var(--safe-izq));
  background:var(--bg-panel);
  border-bottom:1px solid var(--border);
  min-width:0;
  z-index:20;
}
#menuToggle{
  display:none;
  background:transparent; border:0; color:var(--text);
  font-size:19px; cursor:pointer; padding:4px 6px;
}
/* El wordmark en el chrome (card #55): chico, quieto, siempre igual.
   En pantallas angostas se esconde: ahí mandan las migas. */
.wordmark{
  font-family:var(--font-display);
  font-weight:900;
  font-size:18px;
  letter-spacing:var(--tracking-marca);
  color:var(--text);
  line-height:1;
  flex:none;
}
.wordmark .pw{ color:var(--accent); }
@media (max-width:700px){ #topbar .wordmark{ display:none; } }

/* Los títulos de sección pesan como afiche. */
.vhead h2, .group-label, .full-head h2{ font-weight:800; }

#crumbs{
  display:flex; align-items:center; gap:7px;
  font-family:var(--font-display);
  font-size:16px; letter-spacing:.01em;
  min-width:0; overflow:hidden; white-space:nowrap;
}
#crumbs button{
  font:inherit; color:var(--text-muted);
  background:none; border:0; padding:0; cursor:pointer;
}
#crumbs button:hover{ color:var(--text); }
#crumbs .sep{ color:var(--neutral-600); }
#crumbs .here{ color:var(--text); overflow:hidden; text-overflow:ellipsis; }

.sync-status{
  margin-left:auto;
  font-size:11.5px;
  color:var(--text-muted);
  white-space:nowrap;
}

/* El cartel de entorno: en producción no existe, y afuera no se puede ignorar.
   Verde, igual que el ícono de la app de pruebas, para que sean lo mismo. */
.entorno-tag{ display:none; }
html[data-entorno="dev"] .entorno-tag{
  display:inline-flex; align-items:center;
  text-decoration:none; cursor:pointer;
  flex:none; margin-right:2px;
  padding:2px 8px; border-radius:999px;
  background:rgba(90,158,111,.16);
  border:1px solid rgba(90,158,111,.5);
  color:var(--exito);
  font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase;
}
/* Sin el sync-status al lado, el cartel tiene que empujar él mismo hasta la
   derecha; si no, queda pegado a las migas de pan. */
.sync-status:empty + .entorno-tag{ margin-left:auto; }
.avatar{
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:1px solid transparent;
  border-radius:999px; padding:3px 8px 3px 3px;
  cursor:pointer; color:var(--text-muted); font-size:12px;
}
.avatar:hover, .avatar[aria-expanded="true"]{ border-color:var(--border); color:var(--text); }
.av-pic{
  width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--bg-raised);
  border:1px solid var(--border);
  /* Iniciales en crema: el acento es de la música, no del avatar. */
  color:var(--text);
  font-family:var(--font-mono); font-size:10.5px; font-style:normal;
  flex:none;
}
.av-pic.grande{ width:52px; height:52px; font-size:17px; }
.av-pic.chico{ width:22px; height:22px; font-size:9px; }

/* ---------- popovers ---------- */
.popover{
  position:absolute;
  background:var(--bg-panel-2);
  border:1px solid var(--border);
  border-radius:4px;
  padding:6px;
  display:none;
  flex-direction:column;
  gap:2px;
  z-index:40;
}
.popover.open{ display:flex; }
#userMenu{ top:calc(var(--topbar) + 4px); right:10px; width:236px; }
.um-id{
  display:flex; align-items:center; gap:9px;
  padding:8px 9px 10px;
  border-bottom:1px solid var(--border);
  margin-bottom:4px;
}
.um-id div{ min-width:0; }
.um-id b{ display:block; font-size:13px; }
.um-id span{
  display:block; font-family:var(--font-mono); font-size:10.5px;
  color:var(--text-muted); overflow:hidden; text-overflow:ellipsis;
}
.um-item{
  display:flex; align-items:center; gap:9px;
  width:100%; text-align:left;
  background:transparent; border:0; border-radius:4px;
  padding:8px 9px; color:var(--text); font-size:13px;
  cursor:pointer; text-decoration:none;
}
.um-item:hover{ background:var(--bg-raised); }
.um-item.danger{ color:var(--danger); }
.um-item.cafe{ color:var(--accent); }
.um-item .ico{ width:16px; text-align:center; color:var(--text-muted); flex:none; }
.um-sep{ height:1px; background:var(--border); margin:4px 2px; }

/* ---------- rail ---------- */
#rail{
  background:var(--bg-panel);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column; align-items:stretch;
  gap:4px;
  /* Ajustes es el último de la fila y queda pegado al fondo: sin este respiro,
     el indicador home del iPad se le monta encima. */
  padding:12px 10px calc(12px + var(--safe-abajo));
  padding-left:calc(10px + var(--safe-izq));
  /* Sin overflow:hidden acá. El cartelito con el nombre se dibuja fuera del
     rail cuando está cerrado, y recortarlo lo dejaba a la mitad. */
  min-width:0;
}

/* Solo íconos. El nombre de cada uno aparece al pasar el mouse, y en la
   pantalla está el camino de arriba para saber dónde estás. */
.rail-btn{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height:40px; padding:0 9px;
  background:transparent; border:0; border-radius:4px;
  color:var(--text-muted); cursor:pointer;
}
.rail-btn svg{ width:19px; height:19px; }
.rail-btn:hover{ background:var(--bg-panel-2); color:var(--text); }
.rail-btn:disabled{ opacity:.35; cursor:default; }
.rail-btn:disabled:hover{ background:transparent; color:var(--text-muted); }
.rail-btn[aria-current="true"]{ background:var(--accent-glow); color:var(--accent); }
.rail-btn[aria-current="true"]::before{
  content:""; position:absolute; left:-10px; top:9px;
  width:2px; height:22px; border-radius:2px; background:var(--accent);
}

.rail-btn .tip{
  position:absolute; left:52px; white-space:nowrap;
  background:var(--bg-raised); border:1px solid var(--border);
  color:var(--text); font-size:11.5px; padding:3px 8px; border-radius:4px;
  opacity:0; transform:translateX(-4px); pointer-events:none;
  transition:opacity .14s, transform .14s; z-index:15;
}
/* El cartelito con el nombre es solo para el mouse. En una pantalla táctil no
   hay "pasar por encima": el navegador deja el :hover pegado después del toque
   y el cartel se quedaba abierto hasta que tocabas otra cosa. */
@media (hover: hover) and (pointer: fine){
  .rail-btn:hover .tip{ opacity:1; transform:translateX(0); }
}

#rail .spacer{ flex:1; }

/* ============================================================
   FILAS DE CANCIÓN — el panel y la lista grande comparten forma
   ============================================================ */
#panel{
  background:var(--bg-panel);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  min-width:0; overflow:hidden;
}
/* OJO el min-height:0. Un flex item con scroll propio no se encoge por debajo
   de su contenido si no se lo decís: la lista crecía con las canciones y
   empujaba el "+ Agregar" afuera del panel, que recorta con overflow:hidden.
   Con una lista corta no se notaba. Lo mismo ya estaba resuelto en #lyricsWrap. */
#songList{ list-style:none; margin:0; padding:0 8px; overflow-y:auto; flex:1; min-height:0; }
#songList li{ margin-bottom:2px; }

.song-row{
  display:flex; align-items:center; gap:8px;
  padding:8px 9px; border-radius:4px;
  font-size:13.5px; cursor:pointer;
}
.song-row:hover{ background:var(--bg-panel-2); }
.song-row.active{ background:var(--accent-glow); }

/* Agarrada. Antes solo se ponía translúcida y no se notaba que la tenías: se
   levanta del panel —sombra y un pelo más grande— y va marcando su lugar nuevo
   mientras la movés, porque la fila real se reacomoda en vivo. */
.song-row.dragging, .row-sep.dragging{
  background:var(--bg-raised);
  transform:scale(1.02);
  position:relative; z-index:2;
  cursor:grabbing;
}
.song-row.dragging .grip, .row-sep.dragging .grip{
  color:var(--accent); cursor:grabbing;
}

/* Al soltar, un destello corto: confirma que quedó donde la dejaste sin tener
   que buscarla con la vista. */
.song-row.recien-soltada, .row-sep.recien-soltada{
  animation:aterrizar .5s ease-out;
}
@keyframes aterrizar{
  from{ background:var(--accent-glow); }
  to  { background:transparent; }
}
.song-num{
  font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted);
  flex:none; font-variant-numeric:tabular-nums;
}
.song-row.active .song-num{ color:var(--accent); }
.song-title{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* El asa para arrastrar, a la izquierda del número. Apagada hasta que pasás
   por encima: está para el que la busca, sin ensuciar la lista.
   El área que responde al dedo es de 44px (mínimo de Apple), pero crece hacia
   afuera con margen negativo: en la tablet se agarra fácil y la fila no se
   estira ni un pixel. */
.grip{
  color:var(--neutral-600); font-size:17px; line-height:1;
  flex:none; letter-spacing:-1px; cursor:grab;
  touch-action:none;   /* si no, el navegador se queda con el gesto */
  display:grid; place-items:center;
  width:30px; min-height:44px;
  margin:-8px -3px -8px -7px;
  /* Es un asa, no un texto: mantener el dedo apretado no tiene que seleccionar
     los puntitos ni abrir el menú de copiar de iOS. */
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
.grip:active{ cursor:grabbing; }
.song-row:hover .grip, .row-sep:hover .grip{ color:var(--text-muted); }
body.readonly .grip{ display:none; }

/* Separador: media altura, sin color ni energía. Si tiene algo escrito, la
   primera línea se lee acá. */
.row-sep{
  display:flex; align-items:center; gap:8px;
  padding:0 9px; height:18px;
  color:var(--neutral-600); cursor:pointer;
}
.row-sep:hover{ color:var(--text-muted); }
.row-sep.active .nota{ color:var(--accent); }
.row-sep .line{
  flex:1; height:1px; background:currentColor; opacity:.5;
}
.row-sep .nota{
  flex:none; max-width:62%;
  font-size:10.5px; color:var(--text-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* flex:none — el pie no se encoge ni se va abajo por más larga que sea la lista.
   Y el respiro de abajo, que acá vive el "+ Agregar". */
.panel-foot{
  padding:10px 10px calc(10px + var(--safe-abajo));
  border-top:1px solid var(--border); position:relative; flex:none;
}
body.readonly .panel-foot{ display:none; }
.add{
  width:100%;
  background:var(--accent); border:0; color:var(--neutral-950);
  border-radius:4px; padding:9px;
  font-size:13.5px; font-weight:600; cursor:pointer;
}
.add:hover{ filter:brightness(1.07); }
/* Copiar en mi cuenta: mismo peso que Agregar, pero azul. No es una acción de
   armado, es traerse la lista de otro. */
.add-menu{ bottom:56px; left:10px; right:10px; }


/* ============================================================
   CONTENIDO
   ============================================================ */
#content{ min-width:0; overflow-y:auto; overflow-x:hidden; position:relative; }

/* El contenido va centrado en la página, con un ancho por vista según lo que
   tenga que mostrar: una grilla de listas pide más aire que un texto de ayuda,
   que se lee mejor angosto. El tope lo pone la vista y no cada bloque de
   adentro, así los títulos quedan alineados con las cajas. */
.pad{ padding:22px 26px 40px; width:100%; margin-inline:auto; }
#v-listas{ max-width:880px; }
#v-importar{ max-width:900px; }
#v-ayuda{ max-width:70ch; }
#v-compartir{ max-width:680px; }
#v-ajustes, #v-cuenta{ max-width:660px; }

#v-ajustes .set-group,
#v-ajustes .set-sub,
#v-cuenta .acc-top,
#v-cuenta .acc-grid,
#v-compartir .share,
#v-importar .io,
#v-ayuda .doc{ max-width:none; }

.vhead{ margin-bottom:18px; }
.vhead h2{
  font-family:var(--font-display);
  font-size:26px; margin:0; letter-spacing:.01em;
}
.vhead p{ margin:5px 0 0; font-size:13px; color:var(--text-muted); max-width:60ch; }

/* Link a la ayuda, pegado a la derecha del título */
.help-link, .help-inline{
  width:24px; height:24px; margin-left:9px;
  vertical-align:middle; position:relative; top:-2px;
  border-radius:50%; background:transparent;
  border:1px solid var(--border); color:var(--text-muted);
  font-family:var(--font-display); font-size:14px; font-weight:700;
  cursor:pointer; line-height:1; padding:0;
}
.help-inline{ width:17px; height:17px; font-size:11px; top:0; margin-left:7px; }
.help-link:hover, .help-inline:hover{ color:var(--accent); border-color:var(--accent); }

/* ---------- Mis listas ---------- */
/* Es un título de sección, del mismo peso que "Mis listas": las dos grillas
   están al mismo nivel. */
.group-label{
  font-family:var(--font-display);
  font-size:26px;
  letter-spacing:.01em;
  color:var(--text);
  margin:34px 0 14px;
}
/* El grupo vacío no se esconde: la línea cuenta que compartir existe. */
.group-vacio{
  margin:0; font-size:14px; color:var(--texto-sec);
}
/* Las cards llenan el ancho del bloque (que ya va centrado) y arrancan a la
   izquierda, alineadas con los títulos. Centrarlas como grupo dejaba los
   títulos de un lado y las cards del otro. */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(212px, 1fr));
  gap:11px;
}
.card{
  position:relative;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:4px;
  min-height:142px;
  transition:border-color .15s, transform .15s;
}
.card:hover{ border-color:var(--accent); transform:translateY(-2px); }
.card-open{
  position:absolute; inset:0; width:100%;
  background:transparent; border:0; border-radius:4px;
  cursor:pointer; z-index:1;
}
.card-body{
  position:relative; z-index:2; pointer-events:none;
  padding:13px 14px 0;
  display:flex; flex-direction:column; gap:4px;
}
.card .name{
  font-family:var(--font-display); font-size:17.5px;
  line-height:1.15; letter-spacing:.01em; padding-right:6px;
}
.card .meta{
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:10.5px;
  color:var(--text-muted); font-variant-numeric:tabular-nums;
}
.card .pie{
  display:flex; align-items:center; gap:8px;
  margin-top:6px;
}
.card .pie .perm{ display:flex; gap:5px; flex-wrap:wrap; }
.card .dueno{
  font-family:var(--font-mono); font-size:10px; color:#6f6a78;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.card .cuando{
  margin-left:auto; flex:none;
  font-family:var(--font-mono); font-size:10px; color:var(--texto-ter);
  font-variant-numeric:tabular-nums;
}
.badge.link{ color:var(--info); border-color:var(--borde-foco); }
.badge{
  font-size:10.5px; letter-spacing:.02em;
  border-radius:4px; padding:2px 6px; border:1px solid;
}
.badge.view, .badge.own{ color:var(--text-muted); border-color:var(--neutral-600); }
.badge.edit{ color:var(--accent); border-color:rgba(232,163,61,.45); }

/* Siempre a la vista. Aparecer recién al pasar por encima dejaba la tablet sin
   forma de llegar a ellos: había que tocar la card, y el estado se quedaba
   pegado. Lo que se puede hacer con una lista se ve sin buscarlo. */
.card-acts{
  position:absolute; z-index:3;
  left:11px; right:11px; bottom:10px;
  display:flex; gap:4px;
}
.card-acts button{
  width:28px; height:28px;
  display:grid; place-items:center;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:4px; color:var(--text-muted);
  cursor:pointer; font-size:12px; line-height:1;
}
.card-acts button:hover{ color:var(--accent); border-color:var(--accent); }
.card-acts button.danger:hover{ color:var(--danger); border-color:var(--danger); }
.card-acts svg{ width:13px; height:13px; }
/* Eliminar va separado del resto: es el único que no se puede deshacer. */
.card-acts .grow{ margin-left:auto; }
.card.new{ border-style:dashed; background:transparent; }
.card.new .card-body{
  height:100%; padding:13px 14px;
  align-items:center; justify-content:center;
  color:var(--text-muted); font-size:13.5px; gap:6px;
}
.card.new:hover .card-body{ color:var(--accent); }
.card.new b{ font-size:22px; font-weight:400; line-height:1; }

/* ---------- Lista abierta: casi vacía a propósito ---------- */
.blank{
  height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:30px;
}
.blank-in{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:64px; max-width:44ch;
}
.blank .cta{
  margin:0;
  font-family:var(--font-display);
  /* Grande de verdad: es lo único que hay en la pantalla y se lee de lejos. */
  font-size:clamp(38px, 6vw, 64px);
  line-height:1.05; letter-spacing:.01em;
  text-wrap:balance;
}
.one-tip{ display:flex; flex-direction:column; align-items:center; gap:9px; }
.one-tip .k{
  font-family:var(--font-mono); font-size:11.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
}
/* Al lado de un título de 60px, 13px era invisible. Y un gris más claro: el
   muted se pierde sobre el fondo del club. */
.one-tip .v{
  font-size:clamp(16px, 1.5vw, 19px);
  line-height:1.6;
  color:var(--texto-sec);
  max-width:44ch;
}

/* ---------- Canción ---------- */
#v-cancion{ height:100%; display:flex; flex-direction:column; min-height:0; }
.toolbar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:11px 20px;
  border-bottom:1px solid var(--border);
  flex:none;
}
/* min-width:0 y flex-basis:100% son lo que dejan que los grupos bajen de
   renglón en pantallas angostas. Sin eso este contenedor pide su ancho de
   contenido, empuja el ancho de toda la columna y la letra deja de envolver. */
.tb-controls{ display:flex; gap:8px; flex-wrap:wrap; flex:1 1 auto; min-width:0; }
.tgroup{
  display:flex; align-items:center; gap:3px;
  background:var(--bg-panel-2); border:1px solid var(--border);
  border-radius:4px; padding:3px;
}
/* Apagado = invisible. Antes se atenuaba (opacity .42), pero un control que
   no hace nada no gana nada mostrándose: sin ♭ ♯ a la vista, el auto-scroll
   sube al renglón de A− A+ solo, porque el contenedor es flex-wrap. */
.tgroup.off{ display:none; }
.tb-btn{
  background:transparent; border:0; color:var(--text);
  font-size:12.5px; padding:5px 9px; border-radius:4px;
  cursor:pointer; font-variant-numeric:tabular-nums;
}
.tb-btn:hover{ background:var(--bg-raised); }
.tb-btn.on{ color:var(--accent); font-weight:600; }
.tb-btn .lbl{ margin-left:5px; }
/* LOOP prendido va en amarillo, no en el acento: es un estado que te cambia
   cómo termina la canción y tiene que cantar desde lejos. */
#loopBtn{ font-size:10.5px; letter-spacing:.5px; }
/* Prendido = el mismo bloque de acento del seleccionado (regla del 09/08):
   antes el LOOP iba en amarillo y el Click no avisaba. */
#loopBtn.on,
#clickBtn.on{
  background:var(--accent);
  color:var(--neutral-950);
  font-weight:700;
}
.key-val.cero{ color:var(--text-muted); }
.speed-val{
  font-family:var(--font-mono); font-size:11px;
  color:var(--text); min-width:18px; text-align:center;
}
.speed-val.cero{ color:var(--text-muted); }
body.readonly .needs-edit{ display:none; }

/* Arranca con aire arriba: sin el título, la primera línea de la letra quedaba
   pegada a la toolbar. */
#lyricsWrap{ flex:1; min-height:0; overflow-y:auto; padding:14px 26px 40vh; }
#lyricsText{ line-height:1.9; white-space:pre-wrap; overflow-wrap:break-word; }
/* El selector de la toolbar: lo que no se mira, no se muestra. Las notas de
   sección ({comment:}) quedan en los dos modos — son el mapa del tema. */
/* La tablatura también es cifrado: quedaba afuera del filtro (bug-021). */
body[data-lectura="cifrado"] #lyricsText > *:not(.cp-grid):not(.cp-comment):not(.cp-tab){ display:none; }
body[data-lectura="letra"] #lyricsText .cp-grid{ display:none; }

/* ---------- Pantalla completa ---------- */
.fullwrap{ padding:0 0 52px; }
.full-head{
  position:sticky; top:0; z-index:6;
  display:flex; align-items:center; gap:14px;
  padding:26px max(30px, (100% - 900px) / 2) 16px;
  background:linear-gradient(180deg, var(--bg) 78%, rgba(13,12,11,0));
}
.full-head .txt{ min-width:0; }
/* El nombre de la canción en vivo es EL caso del display de 44px: se lee
   de pie, a un metro, con poca luz. Clamp para que un título largo no
   rompa la fila en pantallas chicas. */
.full-head h2{ font-family:var(--font-display); font-size:clamp(28px, 4.5vw, 44px); margin:0; letter-spacing:.01em; }
.full-head .txt span{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted); letter-spacing:var(--tracking-meta); text-transform:uppercase; }
.back{
  margin-left:auto; flex:none;
  display:inline-flex; align-items:center; gap:7px;
  background:var(--bg-raised); border:1px solid var(--border);
  color:var(--text); border-radius:4px; padding:8px 14px;
  font-size:13px; cursor:pointer;
}
.back:hover{ border-color:var(--accent); color:var(--accent); }

.full-list{
  list-style:none; margin:0 auto; padding:0;
  width:min(900px, 100% - 60px);
  border-top:1px solid var(--border);
}
.full-list li{ border-bottom:1px solid var(--border); }
/* Acá no se toca nada: es para leer el orden del show, no para operar. */
.full-list .song-row{
  border-radius:0; padding:16px 14px; gap:13px;
  font-size:20px; font-family:var(--font-display); letter-spacing:.01em;
  cursor:default;
}
.full-list .song-row:hover{ background:transparent; }
.full-list .song-row .n{
  font-family:var(--font-mono); font-size:13px; color:var(--text-muted);
  width:26px; flex:none; text-align:right; font-variant-numeric:tabular-nums;
}
.full-list .song-row .dot{ width:12px; height:12px; border-radius:50%; flex:none; background:var(--neutral-700); }
.full-list .song-row .t{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.full-list .lbl-name{ font-family:var(--font-body); font-size:12px; color:var(--text-muted); flex:none; }
.full-list .row-sep{ height:34px; padding:0 14px; cursor:default; }
.full-list .row-sep .nota{ font-size:13px; max-width:70%; }
.full-total{
  width:min(900px, 100% - 60px); margin:0 auto;
  padding:9px 14px 0;
  font-family:var(--font-mono); font-size:10.5px; color:var(--texto-ter);
  text-transform:uppercase; letter-spacing:.1em;
}

/* ---------- Compartir ---------- */
.share{ max-width:620px; display:flex; flex-direction:column; gap:11px; }
.share-block{
  background:var(--bg-panel); border:1px solid var(--border);
  border-radius:4px; padding:14px 15px;
}
.share-top{ display:flex; align-items:center; gap:11px; }
.share-top .txt{ flex:1; min-width:0; }
.share-top b{ display:block; font-family:var(--font-display); font-size:16px; letter-spacing:.02em; }
.share-top span{ display:block; font-size:12px; color:var(--text-muted); margin-top:2px; }
.link-row{ display:flex; gap:7px; margin-top:12px; }
.share-off .link-row{ opacity:.35; pointer-events:none; }
.fake-input{
  flex:1; min-width:0;
  background:var(--bg); border:1px solid var(--border); border-radius:4px;
  color:var(--text); font-size:13px; padding:9px 11px;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
#viewLink{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-muted); }
.copy{
  background:var(--bg-raised); border:1px solid var(--border);
  color:var(--text); border-radius:4px; padding:0 13px;
  font-size:12.5px; cursor:pointer; flex:none;
}
.copy:hover{ border-color:var(--accent); color:var(--accent); }
.switch{
  width:40px; height:23px; border-radius:999px;
  background:var(--bg-raised); border:1px solid var(--border);
  position:relative; cursor:pointer; flex:none; padding:0;
  transition:background .16s, border-color .16s;
}
.switch::after{
  content:""; position:absolute; top:2px; left:2px;
  width:17px; height:17px; border-radius:50%;
  background:var(--text-muted);
  transition:transform .16s, background .16s;
}
.switch[aria-checked="true"]{ background:var(--accent-glow); border-color:rgba(232,163,61,.5); }
.switch[aria-checked="true"]::after{ transform:translateX(17px); background:var(--accent); }
.switch:disabled{ opacity:.4; cursor:default; }
.link-rotar{
  margin-top:10px;
  background:transparent; border:1px solid var(--border);
  color:var(--text-muted); border-radius:4px;
  padding:7px 12px; font-size:12px; cursor:pointer;
}
.link-rotar:hover{ color:var(--danger); border-color:var(--danger); }
.share-vacio{ margin:12px 0 0; font-size:12.5px; color:var(--text-muted); }
.invite-row{ display:flex; gap:7px; margin-top:12px; flex-wrap:wrap; }
.invite-row .fake-input{ min-width:150px; }
.invite-row select{
  background:var(--bg); border:1px solid var(--border); border-radius:4px;
  color:var(--text); font-size:13px; padding:9px 11px; flex:none;
}
.invited{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.invitado{
  display:flex; align-items:center; gap:9px;
  background:var(--bg); border:1px solid var(--border);
  border-radius:4px; padding:7px 8px 7px 10px;
}
.invitado .who{ flex:1; min-width:0; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.invitado select{
  background:transparent; border:1px solid var(--border); border-radius:4px;
  color:var(--text-muted); font-size:11.5px; padding:3px 6px;
}
.warn{
  display:flex; gap:8px; margin-top:4px;
  padding:9px 11px; border-radius:4px;
  background:rgba(240,68,56,.12); border:1px solid rgba(240,68,56,.4);
  font-size:12px; color:#F5A79F;
}
.warn b{ color:#F8C4BE; }

/* ---------- Ajustes y Mi cuenta ---------- */
.set-group{ max-width:600px; margin-bottom:22px; }
.set-group > h4{
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-muted); margin:0 0 9px; font-weight:400;
}
.set-sub{ margin:-3px 0 11px; font-size:12.5px; color:var(--text-muted); max-width:56ch; }
.set-rows{
  background:var(--bg-panel); border:1px solid var(--border);
  border-radius:4px; overflow:hidden;
}
.set-row{
  display:flex; align-items:center; gap:12px;
  padding:11px 13px; border-bottom:1px solid var(--border);
}
.set-row:last-child{ border-bottom:0; }
.set-row .lbl{ flex:1; min-width:0; }
.set-row .lbl b{ display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:500; }
.set-row .lbl span{ display:block; font-size:11.5px; color:var(--text-muted); margin-top:2px; }
.stepper{
  display:flex; align-items:center; gap:2px;
  background:var(--bg-panel-2); border:1px solid var(--border);
  border-radius:4px; padding:3px; flex:none;
}
.stepper button{
  background:transparent; border:0; color:var(--text);
  width:28px; height:24px; border-radius:4px; cursor:pointer; font-size:13px;
}
.stepper button:hover{ background:var(--bg-raised); }
.stepper .v{
  font-family:var(--font-mono); font-size:11.5px; color:var(--text-muted);
  min-width:26px; text-align:center; font-variant-numeric:tabular-nums;
}
.set-btn{
  background:var(--bg-raised); border:1px solid var(--border);
  color:var(--text); border-radius:4px; padding:7px 12px;
  font-size:12.5px; cursor:pointer; flex:none;
}
.set-btn:hover{ border-color:var(--accent); color:var(--accent); }
.set-btn.danger:hover{ border-color:var(--danger); color:var(--danger); }
.set-btn:disabled{ opacity:.4; cursor:default; }
.set-btn:disabled:hover{ border-color:var(--border); color:var(--text); }
.set-vacio{ font-size:12.5px; color:var(--text-muted); margin:0 0 10px; }
/* La versión al pie de Ajustes: está para el que la busca, no para el que lee. */
.set-contacto{ margin:26px 0 0; font-size:12.5px; color:var(--text-muted); }
.set-contacto a{ color:var(--accent); text-decoration:none; }
.set-version{ margin:6px 0 4px; font-size:11.5px; color:var(--text-muted); opacity:.6; font-family:var(--font-mono); }

.lab-list{ display:flex; flex-direction:column; gap:7px; }
.lab-row{
  position:relative;
  display:flex; align-items:center; gap:11px;
  background:var(--bg-panel); border:1px solid var(--border);
  border-radius:4px; padding:9px 10px 9px 11px;
}
.lab-row .sw{
  width:22px; height:22px; border-radius:4px;
  border:1px solid rgba(255,255,255,.14);
  cursor:pointer; flex:none; padding:0;
}
.lab-row .nm{
  flex:1; min-width:60px;
  background:transparent; border:1px solid transparent; border-radius:4px;
  color:var(--text); font-size:14px; padding:4px 6px;
}
.lab-row .nm:hover{ border-color:var(--border); }
.lab-row .nm:focus{ outline:none; border-color:var(--accent-dim); background:var(--bg); }
.lab-row .use{
  font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted);
  white-space:nowrap; flex:none;
}
.mini{
  width:26px; height:26px;
  display:grid; place-items:center;
  background:transparent; border:1px solid var(--border);
  border-radius:4px; color:var(--text-muted);
  cursor:pointer; font-size:12px; line-height:1; flex:none;
}
.mini:hover{ color:var(--text); border-color:var(--text-muted); }
.mini.danger:hover{ color:var(--danger); border-color:var(--danger); }
.colores{
  position:absolute; left:8px; top:44px; z-index:20;
  display:flex; gap:6px; padding:8px;
  background:var(--bg-panel-2); border:1px solid var(--border);
  border-radius:4px;
}
.colores button{
  width:22px; height:22px; border-radius:50%;
  border:2px solid transparent; cursor:pointer; padding:0;
}
.colores button.sel{ border-color:var(--text); }
.block-add{
  width:100%; margin-top:9px;
  background:transparent; border:1px dashed var(--neutral-600);
  color:var(--text-muted); border-radius:4px; padding:10px;
  font-size:13px; cursor:pointer;
}
.block-add:hover{ color:var(--accent); border-color:var(--accent); }

.acc-top{ display:flex; align-items:center; gap:13px; max-width:600px; margin-bottom:18px; }
.acc-top b{ font-family:var(--font-display); font-size:20px; letter-spacing:.01em; display:block; }
.acc-top span{ font-family:var(--font-mono); font-size:11px; color:var(--text-muted); }
.acc-grid{ max-width:600px; display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.acc-grid .full{ grid-column:1 / -1; }
.flabel{
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted);
}
.field{ display:flex; flex-direction:column; gap:5px; }
.field label{
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted);
}
.fake-input.ro{ color:var(--text-muted); background:var(--bg-panel); }
.acc-nota{ font-size:11px; color:var(--texto-ter); }
.acc-save{
  margin-top:14px;
  background:var(--accent); color:var(--neutral-950); border:0;
  border-radius:4px; padding:9px 18px;
  font-size:13.5px; font-weight:600; cursor:pointer;
}

/* ---------- Importar / Exportar ---------- */
.io{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--border); border:1px solid var(--border);
  border-radius:4px; overflow:hidden; max-width:860px;
}
.io-col{ background:var(--bg-panel); padding:15px 16px 16px; display:flex; flex-direction:column; gap:10px; }
.io-col h4{ font-family:var(--font-display); font-size:16.5px; margin:0; letter-spacing:.02em; }
.io-col h4 span{ color:var(--text-muted); font-size:12px; font-family:var(--font-body); margin-left:7px; letter-spacing:0; }
.io-col select, .io-col textarea{
  width:100%;
  background:var(--bg); border:1px solid var(--border); border-radius:4px;
  color:var(--text); font-size:13px; padding:8px 10px;
}
.io-col textarea{
  font-family:var(--font-mono); font-size:11.5px; line-height:1.7;
  height:190px; resize:vertical;
}
.io-col textarea:focus, .io-col select:focus{ outline:none; border-color:var(--accent-dim); }
.io-hint{ font-size:11.5px; color:var(--text-muted); margin:0; }
.io-btn{
  background:var(--accent); color:var(--neutral-950); border:0;
  border-radius:4px; padding:9px;
  font-size:13.5px; font-weight:600; cursor:pointer; margin-top:auto;
}
.io-btn.ghost{ background:transparent; border:1px solid var(--border); color:var(--text); font-weight:500; }
.io-btn.ghost:hover{ border-color:var(--accent); color:var(--accent); }
.io-opt{
  width:100%; display:flex; align-items:center; gap:10px;
  background:var(--bg-panel-2); border:1px solid var(--border);
  border-radius:4px; padding:10px 12px; margin-bottom:6px;
  color:var(--text); font-size:13.5px; cursor:pointer; text-align:left;
}
.io-opt:hover{ border-color:var(--accent); }
.io-opt .io-dot{ color:var(--accent); flex:none; }
.io-opt .io-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.io-opt .io-count{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted); flex:none; }

/* ---------- Ayuda ---------- */
.doc{ max-width:64ch; }
.doc h3{
  font-family:var(--font-display); font-size:19px;
  letter-spacing:.02em; color:var(--text); margin:0 0 10px;
}
.doc h3 + p{ margin-top:0; }
.doc > h3:not(:first-child){
  margin-top:30px; padding-top:26px; border-top:1px solid var(--border);
}
.doc h4{ font-size:13px; font-weight:600; color:var(--text); margin:22px 0 8px; }
.doc p{ margin:0 0 13px; font-size:14px; line-height:1.75; color:var(--texto-suave); }
.doc b{ color:var(--text); font-weight:600; }
.doc code{
  font-family:var(--font-mono); font-size:12px; color:var(--accent);
  background:var(--bg-panel); border:1px solid var(--border);
  border-radius:4px; padding:1px 5px;
}
/* Las capturas de la Ayuda se sacan sobre el fondo de la app, así que se
   funden con la página: sin marco ni borde. */
.doc figure{ margin:6px 0 20px; }
.doc figure img{ display:block; width:100%; max-width:480px; height:auto; }
.doc kbd{
  font-family:var(--font-mono); font-size:11px;
  border:1px solid var(--border); border-bottom-width:2px;
  border-radius:4px; padding:1px 5px; color:var(--text);
}
.doc pre{
  margin:0 0 14px; padding:13px 15px;
  background:var(--bg-panel); border:1px solid var(--border);
  border-radius:4px; overflow-x:auto;
  font-family:var(--font-mono); font-size:12px; line-height:1.85; color:var(--text);
}
.doc pre .k{ color:var(--accent); font-weight:600; }
.marks{ margin:0 0 16px; }
.marks dt{ float:left; clear:left; width:52px; padding-top:1px; }
.marks dt code{ font-size:11.5px; }
.marks dd{ margin:0 0 11px 62px; font-size:13.5px; line-height:1.7; color:var(--texto-suave); }
.marks dd em{ font-style:italic; color:var(--text); }
/* Las tablas de la Ayuda: una fila por término, con su hilo entre fila y
   fila — sin la línea, los renglones que pegan justo se leen amontonados. */
.marks.wide{ display:grid; grid-template-columns:110px 1fr; }
.marks.wide dt{ float:none; clear:none; width:auto; font-family:var(--font-body); font-size:13.5px; font-weight:600; color:var(--text); padding:12px 0; border-top:1px solid var(--borde); }
.marks.wide dd{ margin:0; padding:12px 0 12px 14px; border-top:1px solid var(--borde); }
.marks.wide dt:first-of-type, .marks.wide dt:first-of-type + dd{ border-top:0; padding-top:2px; }
.arrows{ font-family:var(--font-mono); color:var(--accent); letter-spacing:.24em; margin:0 6px; }
.doc h3.flash, .doc h4.flash{ animation:flash 1.6s ease-out; }
@keyframes flash{ 0%,45%{ color:var(--accent); } 100%{ color:var(--text); } }

/* ---------- barra de abajo (celular) ---------- */
#bottombar{
  display:none;
  grid-column:1 / -1;
  background:var(--bg-panel);
  border-top:1px solid var(--border);
  align-items:stretch;
  padding-bottom:var(--safe-abajo);
}
#bottombar button{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; background:transparent; border:0;
  color:var(--text-muted); font-size:10.5px; cursor:pointer;
}
#bottombar button svg{ width:19px; height:19px; }
#bottombar button[aria-current="true"]{ color:var(--accent); }

/* ============================================================
   MODALES
   ============================================================ */
#modalOverlay, #histOverlay, #moveOverlay, #askOverlay{
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(2px);
  align-items:center; justify-content:center;
  z-index:50; padding:20px;
}
/* Estos salen ENCIMA de otro modal: mover sale del modal de canción, y el
   confirmar puede saltar desde cualquiera. */
#moveOverlay{ z-index:60; }
#askOverlay{ z-index:70; }

#modalBox, #histBox, #moveBox, #askBox{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:4px;
  width:100%; max-width:560px; max-height:85vh;
  display:flex; flex-direction:column; overflow:hidden;
}
#modalBox h2, #histBox h2, #moveBox h2, #askBox h2{
  font-family:var(--font-display);
  text-transform:uppercase; letter-spacing:0.04em;
  font-size:18px; margin:0; padding:18px 20px;
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.modal-body{ padding:18px 20px; overflow-y:auto; display:flex; flex-direction:column; gap:16px; }
.modal-body > p{ margin:0; font-size:14px; line-height:1.6; white-space:pre-wrap; }
.modal-actions{
  padding:14px 20px; border-top:1px solid var(--border);
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.modal-actions .spacer{ flex:1; }
.btn{
  padding:9px 16px; border-radius:4px;
  border:1px solid var(--border); background:var(--bg-raised);
  color:var(--text); cursor:pointer; font-size:13.5px; font-weight:600;
}
.btn:hover{ background:var(--bg-panel-2); }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--neutral-950); }
.btn.primary:hover{ background:#E64F16; }
.btn.danger-strong{ background:var(--danger); border-color:var(--danger); color:#fff; }

#titleInput, #lyricsInput, #askInput, #histSetlist{
  width:100%; padding:10px 12px;
  background:var(--bg-panel-2); border:1px solid var(--border);
  border-radius:4px; color:var(--text); font-size:15px;
}
#lyricsInput{
  min-height:240px; font-size:14px; line-height:1.6; resize:vertical;
  font-family:var(--font-body);
}
#titleInput:focus, #lyricsInput:focus, #askInput:focus{ outline:none; border-color:var(--accent-dim); }
#askInput.hidden{ display:none; }
.sep-hint{
  margin:0; font-size:12.5px; color:var(--text-muted);
  border-left:2px solid var(--accent); padding-left:10px;
}
/* La canción se edita con lugar: el modal aprovecha la pantalla de la
   tablet o la compu, y el título pesa menos que lo que se escribe. */
#modalBox{ max-width:860px; max-height:92vh; }
#modalBox h2{ font-size:14px; padding:12px 20px; }
#modalBox #lyricsInput{ min-height:320px; }
.icon-btn{ padding:9px 12px; line-height:0; }
.icon-btn svg{ width:18px; height:18px; }

/* Un separador lleva dos palabras, no una letra: la caja no necesita ser
   igual de alta que la de una canción. */
#modalBox.es-sep #lyricsInput{ min-height:96px; }
#modalBox.es-sep{ max-width:440px; }
#modalMarcas{ display:flex; flex-direction:column; gap:16px; }
#modalLabels, #modalEnergy{ display:flex; flex-wrap:wrap; gap:8px; }

/* ---------- editor de la lista ---------- */
#listaOverlay{
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.6); backdrop-filter:blur(2px);
  align-items:center; justify-content:center; z-index:55; padding:20px;
}
#listaBox{
  background:var(--bg-panel); border:1px solid var(--border);
  border-radius:4px; width:100%; max-width:520px; max-height:85vh;
  display:flex; flex-direction:column; overflow:hidden;
}
#listaBox h2{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.04em;
  font-size:18px; margin:0; padding:18px 20px;
  border-bottom:1px solid var(--border); flex-shrink:0;
}
#listaNombre{
  width:100%; padding:10px 12px;
  background:var(--bg-panel-2); border:1px solid var(--border);
  border-radius:4px; color:var(--text); font-size:15px;
}
#listaNombre:focus{ outline:none; border-color:var(--accent-dim); }
.edit-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; max-height:44vh; overflow-y:auto; }
/* La cruz de cerrar, en el ángulo del título del modal. Chica a la vista,
   44px para el dedo. */
#listaBox h2{ display:flex; align-items:center; justify-content:space-between; }
.modal-x{
  width:30px; height:30px; flex:none;
  display:grid; place-items:center;
  background:transparent; border:1px solid var(--border);
  border-radius:4px; color:var(--text-muted);
  cursor:pointer; font-size:13px; line-height:1;
  position:relative;
}
.modal-x::after{
  content:""; position:absolute; left:50%; top:50%;
  width:44px; height:44px; transform:translate(-50%,-50%);
}
.modal-x:hover{ color:var(--text); border-color:var(--text-muted); }

/* La fila de arriba de la lista: la casilla que marca todo y la cuenta. */
.edit-tools{
  display:flex; align-items:center; gap:10px;
  padding:2px 2px 10px;
}
.edit-tools .todo{
  display:flex; align-items:center;
  background:none; border:0; padding:4px 2px; cursor:pointer;
}
.edit-tools .cuenta{ margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--text-muted); }

/* La casilla: cuadrada y propia, sin el check nativo que cada sistema pinta
   distinto. Marcada se llena con el naranja de la app. */
.tick{
  width:20px; height:20px; flex:none;
  display:grid; place-items:center;
  border:1.5px solid var(--border); border-radius:4px;
  background:var(--bg-panel); color:transparent;
  font-size:12px; line-height:1;
}
.edit-tools .todo.todas .tick{ background:var(--accent); border-color:var(--accent); color:#1a1520; }

.edit-row{
  display:flex; align-items:center; gap:10px;
  background:var(--bg-panel-2); border:1px solid var(--border);
  border-radius:4px; padding:8px 9px 8px 11px;
  cursor:pointer;
}
.edit-row .hit{
  display:grid; place-items:center;
  width:34px; min-height:38px; margin:-8px 0 -8px -6px; flex:none;
}
.edit-row.marcada{ border-color:var(--accent-dim); background:var(--accent-glow); }
.edit-row.marcada .tick{ background:var(--accent); border-color:var(--accent); color:#1a1520; }
.edit-row.marcada.es-sep .et{ color:var(--text); }

/* Con algo marcado, abajo quedan las tres acciones: copiar y mover como
   botones comunes con su texto, y el tacho en rojo aparte a la derecha — es el
   único sin vuelta atrás. */
.barra-sel{ padding:14px 20px; gap:10px; }
.barra-sel .acc{
  width:38px; height:38px; flex:none;
  display:grid; place-items:center;
  border-radius:4px;
  cursor:pointer; line-height:1;
  position:relative;
}
.barra-sel .acc::after{
  content:""; position:absolute; left:50%; top:50%;
  width:44px; height:44px; transform:translate(-50%,-50%);
}
.barra-sel .acc svg{ width:17px; height:17px; }
.barra-sel .acc.borrar{
  margin-left:16px;
  background:rgba(240,68,56,.14);
  border:1px solid rgba(240,68,56,.5);
  color:var(--danger);
}
.barra-sel .acc.borrar:hover{ border-color:var(--danger); background:rgba(193,68,60,.25); }
.edit-row .en{
  font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted);
  flex:none; font-variant-numeric:tabular-nums;
}
.edit-row .et{ flex:1; min-width:0; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.edit-row.es-sep .et{ color:var(--text-muted); font-style:italic; }
.edit-vacio{ color:var(--text-muted); font-size:13px; padding:6px 2px; }

.hist-list{ display:flex; flex-direction:column; gap:6px; max-height:40vh; overflow-y:auto; }
.hist-row{
  display:flex; align-items:center; gap:10px;
  background:var(--bg-panel-2); border:1px solid var(--border);
  border-radius:4px; padding:10px 12px; cursor:pointer;
}
.hist-row:hover{ border-color:var(--accent-dim); }
.hist-row.sel{ border-color:var(--accent); }
.hist-check{ width:16px; color:var(--accent); flex:none; }
.hist-when{ font-size:13.5px; }
.hist-who{ font-size:11.5px; color:var(--text-muted); }
.hist-empty{ color:var(--text-muted); font-size:13px; padding:10px 2px; }
.share-mini.warn{ margin-top:4px; }

#toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:var(--bg-raised); border:1px solid var(--border);
  color:var(--text); padding:11px 18px; border-radius:4px;
  font-size:13.5px; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; z-index:80;
  max-width:min(90vw, 460px); text-align:center;
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
#toast.err{ border-color:var(--danger); color:#F8C4BE; }

/* ---------- scrollbars ----------
   Los cuadros de texto quedaban con la barra gorda y clara del sistema, que en
   una pantalla oscura es lo primero que te salta a la vista. Van con la misma
   barra fina que el resto: fondo transparente, barrita sin bordes, y un poco
   más marcada al pasar por encima. */
#songList::-webkit-scrollbar, #lyricsWrap::-webkit-scrollbar,
#content::-webkit-scrollbar, .modal-body::-webkit-scrollbar,
#lyricsInput::-webkit-scrollbar, .io-col textarea::-webkit-scrollbar,
.doc pre::-webkit-scrollbar{ width:9px; height:9px; }

#songList::-webkit-scrollbar-track, #lyricsWrap::-webkit-scrollbar-track,
#content::-webkit-scrollbar-track, .modal-body::-webkit-scrollbar-track,
#lyricsInput::-webkit-scrollbar-track, .io-col textarea::-webkit-scrollbar-track,
.doc pre::-webkit-scrollbar-track{ background:transparent; }

#songList::-webkit-scrollbar-thumb, #lyricsWrap::-webkit-scrollbar-thumb,
#content::-webkit-scrollbar-thumb, .modal-body::-webkit-scrollbar-thumb,
#lyricsInput::-webkit-scrollbar-thumb, .io-col textarea::-webkit-scrollbar-thumb,
.doc pre::-webkit-scrollbar-thumb{
  background:var(--bg-raised); border-radius:4px; border:0;
}
#songList::-webkit-scrollbar-thumb:hover, #lyricsWrap::-webkit-scrollbar-thumb:hover,
#content::-webkit-scrollbar-thumb:hover, .modal-body::-webkit-scrollbar-thumb:hover,
#lyricsInput::-webkit-scrollbar-thumb:hover, .io-col textarea::-webkit-scrollbar-thumb:hover,
.doc pre::-webkit-scrollbar-thumb:hover{ background:var(--neutral-600); }

/* La esquina donde se cruzan las dos barras: sin esto queda un cuadradito
   blanco abajo a la derecha del textarea. */
#lyricsInput::-webkit-scrollbar-corner,
.io-col textarea::-webkit-scrollbar-corner{ background:transparent; }

/* Firefox no usa ::-webkit-*; tiene sus dos propiedades y alcanza con eso. */
#songList, #lyricsWrap, #content, .modal-body,
#lyricsInput, .io-col textarea, .doc pre{
  scrollbar-width:thin;
  scrollbar-color:var(--bg-raised) transparent;
}

/* ============================================================
   ETIQUETAS, ENERGÍA Y BARRA DE ATAJOS
   ============================================================ */
/* El puntito de color va entre el número y el título. La ranura se reserva
   siempre, con o sin etiqueta, para que los títulos queden alineados. */
.row-label{ width:12px; flex:none; display:inline-flex; align-items:center; justify-content:center; }
.lbl-circle{ width:8px; height:8px; border-radius:50%; }
/* La energía queda sola contra el margen derecho. */
.row-energy{ flex:none; display:inline-flex; align-items:center; }
.row-energy svg{ width:15px; height:15px; display:block; }
.full-list .row-energy svg{ width:19px; height:19px; }

.ebtn{
  width:46px; height:40px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:4px;
  background:var(--bg-panel-2); cursor:pointer;
}
.ebtn svg{ width:22px; height:22px; display:block; }
.ebtn.on{ border-color:currentColor; background:var(--bg-raised); }

#pasteBar{ display:flex; flex-direction:column; gap:8px; }
.pb-group{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.pb-btn{
  padding:5px 9px; border:1px solid var(--border); border-radius:4px;
  background:var(--bg-panel-2); color:var(--text); font-size:13px;
  font-weight:600; line-height:1; cursor:pointer;
}
.pb-btn:hover{ background:var(--bg-raised); border-color:var(--accent-dim); }
.pb-btn.pb-note{ color:var(--accent); min-width:30px; text-align:center; }
.pb-btn.pb-alt{ color:var(--accent-dim); min-width:26px; text-align:center; }
.pb-btn.pb-mod{ color:var(--text-muted); min-width:26px; text-align:center; }

.lchip{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px; border-radius:999px;
  border:1px solid var(--border); background:var(--bg-panel-2);
  color:var(--text-muted); font-size:13px; font-weight:600;
  cursor:pointer; white-space:nowrap;
}
.lchip .dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.lchip.on{ color:var(--text); border-color:currentColor; background:var(--bg-raised); }
.lchip.manage{ border-style:dashed; }
.chip-empty{ color:var(--text-muted); font-size:13px; }

/* ============================================================
   RESPONSIVE — en el celular se ve una zona por vez
   ============================================================ */
@media (max-width: 760px){
  #app,
  body[data-vista] #app{
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: calc(var(--topbar) + var(--safe-arriba)) minmax(0,1fr) calc(58px + var(--safe-abajo));
  }
  #rail{ display:none; }
  #bottombar{ display:flex; grid-row:3; }
  #menuToggle{ display:block; }
  /* Una sola columna: las tres zonas comparten la del medio. */
  #panel, #content{ grid-column:1; grid-row:2; }

  /* El panel es un cajón que se corre desde el borde. */
  #panel{
    position:fixed;
    top:calc(var(--topbar) + var(--safe-arriba)); bottom:calc(58px + var(--safe-abajo)); left:0;
    width:min(300px, 84vw);
    z-index:35;
    transform:translateX(-102%);
    transition:transform .22s ease;
  }
  #app.panel-abierto #panel{ transform:translateX(0); }
  body[data-vista="lista"] #panel{ position:static; transform:none; width:auto; box-shadow:none; }
  body[data-vista="lista"] #content{ display:none; }
  body[data-vista="lista"] #app{ grid-template-rows: calc(var(--topbar) + var(--safe-arriba)) minmax(0,1fr) calc(58px + var(--safe-abajo)); }

  body[data-vista="full"] #app{ grid-template-rows: minmax(0,1fr); }
  body[data-vista="full"] #bottombar{ display:none; }

  .pad{ padding:16px 14px 26px; }
  .vhead h2{ font-size:22px; }
  .cards{ grid-template-columns:1fr; }
  .card{ min-height:0; }
  .card-body{ padding-bottom:40px; }
  .blank .cta{ font-size:clamp(30px, 9vw, 42px); }
  .blank-in{ gap:44px; }
  .one-tip .v{ font-size:16px; }
  .toolbar{ padding:10px 14px; }
  /* Cada grupo del ancho de su contenido dejaba la barra como escalones
     (bug-021). En angosto la barra es una grilla: A−/A+ compacto y el grupo
     de al lado estira hasta el borde; auto-scroll, click, el selector de
     vistas y Editar van de borde a borde. Bordes verticales alineados. */
  .tb-controls{ flex-basis:100%; display:grid; grid-template-columns:1fr 1fr; }
  .tb-controls .tgroup{ justify-content:space-between; }
  #scrollGroup, #clickGroup, .vista, .tgroup.needs-edit{ grid-column:1 / -1; }
  .vista{ width:auto; }
  .vista button{ flex:1 1 0; }
  /* Sin ♭ ♯ (canción sin acordes), A−/A+ no se queda a media grilla */
  .tb-controls:has(#keyGroup.off) .tgroup:first-child{ grid-column:1 / -1; }
  #crumbs{ font-size:14px; }
  /* En una pantalla de mano el camino completo no entra: alcanza con saber
     qué canción estás mirando. */
  #crumbs button:first-child, #crumbs .sep:first-of-type{ display:none; }
  #lyricsWrap{ padding:12px 16px 40vh; }
  /* Cuatro compases en 390px no entran: van dos por fila. */
  .cp-grid{ grid-template-columns:repeat(2, 1fr); }
  .cp-grid .gr-compas:nth-child(4n){ border-right:1px solid var(--border); }
  .cp-grid .gr-compas:nth-child(2n){ border-right:0; }
  .cp-grid .gr-compas:nth-last-child(-n+4){ border-bottom:1px solid var(--border); }
  .cp-grid .gr-compas:nth-last-child(-n+2){ border-bottom:0; }
  .gr-acorde{ font-size:26px; }
  .io{ grid-template-columns:1fr; }
  .acc-grid{ grid-template-columns:1fr; }
  #userMenu{ right:8px; left:8px; width:auto; }
  .fullwrap .full-list, .full-total{ width:calc(100% - 28px); }
  .full-head{ padding:16px 14px 12px; }
  .full-head h2{ font-size:21px; }
  .full-list .song-row{ padding:13px 10px; font-size:17px; }
  .full-list .lbl-name{ display:none; }
  .modal-actions{ flex-wrap:wrap; }
  .modal-actions .spacer{ display:none; }
  .modal-actions .btn{ flex:1; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ============================================================
   CHORDPRO — se conserva tal cual: es lo que hace que el acorde
   viaje pegado a su sílaba.
   ============================================================ */
  /* ---------- ChordPro ----------
     Cada segmento (acorde + pedazo de letra) es un inline-block: el acorde
     viaja pegado a su sílaba aunque cambie la fuente o el ancho. Por eso
     no se desalinea nunca, que es todo el punto del formato. */
  .cp-line{ white-space:normal; }
  .cp-seg{ display:inline-block; vertical-align:bottom; }
  .cp-chord{
    display:block;
    /* Acento, no crema (regla corregida el 09/08): los acordes no se LEEN,
       se ESCANEAN — el que toca los busca de un vistazo, y para señalizar
       está el acento. La letra sigue siendo la única lectura en crema. */
    color:var(--accent);
    font-weight:700;
    font-size:0.72em;
    line-height:1.35;
    white-space:pre;
    padding-right:0.45em;  /* que dos acordes seguidos no salgan pegados */
  }
  .cp-text{ display:block; white-space:pre; }
  /* "A · Estrofa" es metadato: mayúscula chica con tracking abierto (pin norte). */
  .cp-comment{ color:var(--texto-sec); font-size:0.8em; letter-spacing:var(--tracking-meta); text-transform:uppercase; }
  .cp-meta{ color:var(--text-muted); font-size:0.85em; }
  .cp-tab{
    font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size:0.82em;
    background:var(--bg-raised);
    border:1px solid var(--border);
    border-radius:4px;
    padding:10px 14px;
    margin:6px 0;
    line-height:1.6;
    overflow-x:auto;   /* una tab larga scrollea, no rompe el layout */
  }
  .cp-chorus{
    border-left:3px solid var(--accent);
    padding-left:14px;
    margin:6px 0;
  }

/* ---------- el cifrado ---------- */
/* La grilla de compases: lo que mira el que toca. Los acordes van grandes
   porque esto se lee parado y a un metro y medio. */
.cp-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border:1px solid var(--border);
  border-radius:4px;
  overflow:hidden;
  margin:6px 0 10px;
  max-width:820px;
}
.gr-compas{
  min-height:74px;
  display:flex; align-items:center; justify-content:center; gap:14px;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:8px 6px;
  position:relative;
  transition:background .08s linear;
}
.cp-grid .gr-compas:nth-child(4n){ border-right:0; }
.cp-grid .gr-compas:nth-last-child(-n+4){ border-bottom:0; }
.gr-acorde{
  font-family:var(--font-display);
  font-size:30px; line-height:1; letter-spacing:.01em;
  white-space:nowrap;
}
/* Dos acordes en el mismo compás entran más chicos en vez de amontonarse */
.gr-compas.dos .gr-acorde{ font-size:23px; }
.gr-acorde.vacio{ color:var(--neutral-600); font-size:24px; }
/* La repetición se dibuja con el borde, como en una partitura */
.gr-compas.abre{ border-left:3px double var(--accent-dim); }
.cp-grid .gr-compas.cierra{ border-right:3px double var(--accent-dim); }
/* El compás que está sonando */
.gr-compas.suena{ background:var(--accent-glow); }
.gr-compas.suena::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--accent);
}

/* Qué mira cada uno */
.vista{
  display:flex; gap:2px;
  background:var(--bg-panel-2); border:1px solid var(--border);
  border-radius:4px; padding:3px;
}
.vista button{
  background:transparent; border:0; border-radius:4px;
  padding:5px 10px; font-size:12px; color:var(--text-muted); cursor:pointer;
}
/* Seleccionado = bloque de acento, sin bordes (regla del 09/08). La tinta es
   negra y no blanca: sobre el naranja el blanco da ~2.7:1 y no pasa AA; el
   negro da ~7:1. Mismo par que el botón primario. */
.vista button[aria-pressed="true"]{ background:var(--accent); color:var(--neutral-950); font-weight:700; }

/* Energía y BPM comparten renglón en el modal */
.marcas-fila{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.marcas-fila label{
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted);
}
/* BPM contra el margen izquierdo y Energía pegada a su derecha (card #49). */
.marcas-fila .lbl-energia{ margin-left:14px; }
.marcas-fila input{
  width:100px; padding:9px 11px;
  background:var(--bg-panel-2); border:1px solid var(--border);
  border-radius:4px; color:var(--text); font-size:15px;
}
.marcas-fila input:focus{ outline:none; border-color:var(--accent-dim); }

/* ============================================================
   LANDING / LOGIN — Fase 7, "un afiche de recital".
   El copy viene de docs/design/copy-landing.md; las capturas son
   la app real (lp/*.jpg). Cero sombras, cero gradientes: la
   jerarquía la hacen el tamaño, el peso y el aire.
   ============================================================ */
#authGate{
  position:fixed;
  inset:0;
  background:var(--bg);
  display:none;
  overflow-y:auto;
  z-index:100;
}
#authGate.show{ display:block; }

.lp{
  max-width:1020px;
  margin:0 auto;
  padding:0 22px 64px;
}

/* Los títulos de sección comparten la voz display del afiche. */
.lp h2{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:1.02;
  color:var(--text);
  margin:0 0 16px;
}

/* Remates: la frase que cierra una sección, dicha en display.
   El borde naranja es el único acento de esas pantallas. */
.lp-remate{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(20px, 3vw, 28px);
  line-height:1.15;
  color:var(--text);
  border-left:4px solid var(--accent);
  padding-left:16px;
  margin:28px 0 0;
}

/* Botón de Google reutilizable (CTA) */
.google-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 30px;
  border-radius:4px;
  border:1px solid var(--accent);
  background:var(--accent);
  color:var(--neutral-950);
  font-size:16px;
  font-weight:700;
  cursor:pointer;
}
.google-btn:hover{ background:var(--accent-dim); border-color:var(--accent-dim); }
.google-btn svg{ width:19px; height:19px; flex-shrink:0; }
.google-btn .g-bg{ background:#fff; border-radius:50%; padding:2px; display:flex; }

/* Marco plano para capturas: borde fino, radio 4. El del hero se
   inclina apenas, como afiche pegado un poco torcido. */
.lp-marco{
  border:1px solid var(--borde);
  border-radius:4px;
  overflow:hidden;
  background:var(--superficie);
}
.lp-marco img{ width:100%; height:auto; display:block; }

/* ---------- 1 · HERO ---------- */
.lp-hero{
  text-align:center;
  padding:56px 0 24px;
}
/* El wordmark (la 17): 900/75, tracking cerrado, siempre minúscula. */
.lp-brand{
  font-family:var(--font-display);
  font-weight:900;
  letter-spacing:var(--tracking-marca);
  font-size:clamp(28px, 4vw, 36px);
  color:var(--text);
  margin-bottom:40px;
}
.lp-brand .pw{ color:var(--accent); }
.lp-headline{
  font-family:var(--font-display);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.01em;
  font-size:clamp(44px, 8.5vw, 92px);
  line-height:0.98;
  margin:0 auto 20px;
  color:var(--text);
}
.lp-sub{
  color:var(--texto-suave);
  font-size:clamp(16px, 2.2vw, 19px);
  line-height:1.55;
  max-width:52ch;
  margin:0 auto 32px;
}
.auth-error{
  margin-top:14px;
  font-size:13px;
  color:var(--danger);
  min-height:18px;
}
.lp-marco-hero{
  margin:44px auto 0;
  max-width:880px;
  transform:rotate(-1.2deg);
}

/* ---------- 2 · EL PRIMITIVO: tres capas ---------- */
.lp-capas{
  padding:72px 0 40px;
  text-align:center;
}
.lp-capas h2{ font-size:clamp(30px, 4.8vw, 48px); }
.lp-capas > p{
  color:var(--texto-suave);
  font-size:clamp(16px, 2.2vw, 18px);
  line-height:1.6;
  max-width:62ch;
  margin:0 auto;
}
/* Las tres vistas: Letra y Cifrado lado a lado, y Todo (la fusión, con el
   click sonando) abajo, más grande. Cada nombre al pie de su pantalla. */
.lp-par{
  display:flex;
  gap:3%;
  max-width:960px;
  margin:44px auto 0;
}
.lp-par figure{ margin:0; flex:1 1 0; min-width:0; }
.lp-par figure:first-child .lp-marco{ transform:rotate(-0.8deg); }
.lp-par figure:last-child .lp-marco{ transform:rotate(0.8deg); }
.lp-uno{ margin:40px auto 0; max-width:740px; }
.lp-uno .lp-marco{ transform:rotate(-0.6deg); }
.lp-par figcaption,
.lp-uno figcaption{
  margin-top:12px;
  font-size:var(--tipo-meta);
  text-transform:uppercase;
  letter-spacing:var(--tracking-meta);
  color:var(--texto-sec);
}
.lp-capas .lp-remate{
  display:inline-block;
  text-align:left;
  margin-top:36px;
}

/* ---------- 3 · LA LISTA VIAJA: compartir / copiar / importar / exportar ---------- */
.lp-viaja{
  padding:72px 0 24px;
  text-align:center;
}
.lp-viaja h2{ font-size:clamp(30px, 4.8vw, 48px); }
.lp-viaja > p{
  color:var(--texto-suave);
  font-size:clamp(16px, 2.2vw, 18px);
  line-height:1.6;
  max-width:62ch;
  margin:0 auto;
}
/* Una captura sola, centrada y contenida */
.lp-solo{ margin:44px auto 0; max-width:680px; }
/* Dos cards como papeles: el link arriba a la izquierda y los permisos
   abajo a la derecha, cada uno con su inclinación, pisándose al medio. */
.lp-cartas{
  position:relative;
  max-width:800px;
  margin:44px auto 0;
  aspect-ratio:2/1;
}
.lp-cartas .lp-marco{ position:absolute; width:88%; }
.lp-cartas .c1{ left:0; top:0; transform:rotate(-1.8deg); }
.lp-cartas .c2{ right:0; bottom:0; transform:rotate(1.6deg); z-index:2; }
/* La lupa: un recorte a mayor escala montado sobre la captura, para
   acercar justo lo que la sección quiere mostrar. */
.lp-con-lupa{ position:relative; }
.lp-lupa{
  position:absolute;
  left:50%;
  top:19%;
  width:78%;
  transform:translateX(-50%) rotate(0.8deg);
  z-index:2;
}
.lp-duo-pie{
  margin:16px 0 0;
  font-size:var(--tipo-meta);
  text-transform:uppercase;
  letter-spacing:var(--tracking-meta);
  color:var(--texto-sec);
}

/* ---------- 5 · FAQ ---------- */
.lp-faq{
  padding:64px 0 24px;
  max-width:720px;
}
.lp-faq h2{ font-size:clamp(26px, 4vw, 40px); margin-bottom:24px; }
.lp-faq details{ border-top:1px solid var(--borde); }
.lp-faq details:last-of-type{ border-bottom:1px solid var(--borde); }
.lp-faq summary{
  cursor:pointer;
  list-style:none;
  padding:18px 32px 18px 0;
  font-size:16px;
  font-weight:500;
  color:var(--text);
  position:relative;
}
.lp-faq summary::-webkit-details-marker{ display:none; }
.lp-faq summary::after{
  content:"+";
  position:absolute;
  right:4px; top:50%;
  transform:translateY(-50%);
  font-family:var(--font-display);
  font-weight:800;
  font-size:22px;
  color:var(--texto-sec);
}
.lp-faq details[open] summary::after{ content:"–"; }
.lp-faq details p{
  margin:0;
  padding:0 0 20px;
  color:var(--texto-suave);
  font-size:15px;
  line-height:1.65;
  max-width:60ch;
}

/* ---------- 6 · CTA FINAL + PIE ---------- */
.lp-final{
  text-align:center;
  padding:88px 0 72px;
}
.lp-final h2{
  font-size:clamp(34px, 6vw, 64px);
  margin-bottom:32px;
}
.lp-pie{
  border-top:1px solid var(--borde);
  padding-top:28px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
}
.lp-pie-marca{
  font-family:var(--font-display);
  font-weight:900;
  letter-spacing:var(--tracking-marca);
  font-size:20px;
  color:var(--text);
}
.lp-pie-marca .pw{ color:var(--accent); }
.lp-pie-tagline{
  font-size:var(--tipo-meta);
  text-transform:uppercase;
  letter-spacing:var(--tracking-meta);
  color:var(--texto-sec);
}

@media (max-width:720px){
  .lp-hero{ padding:40px 0 16px; }
  .lp-brand{ margin-bottom:28px; }
  .lp-capas{ padding:48px 0 24px; }
  .lp-viaja{ padding:48px 0 16px; }
  .lp-final{ padding:56px 0 48px; }
  .lp-pie{ flex-direction:column; align-items:center; gap:8px; text-align:center; }
}


  /* ---------- IMPRIMIR / PDF ---------- */
  /* En pantalla la hoja no se ve; solo existe al imprimir. */
  #printSheet{ display:none; }
  @media print{
    /* Se imprime SOLO la hoja: se oculta el resto y se saca del flujo para que
       no reserve una página en blanco. */
    body > *{ display:none !important; }
    #printSheet{
      display:block !important;
      position:static;
      color:#000; background:#fff;
      font-family:var(--font-body);
      margin:0;
      /* El margen va como PADDING del contenido, no como @page margin: el
         margen de página lo pisa el driver/escala de la impresora y por eso
         seguía cortando los números. Así el recorte del borde se come el
         blanco del padding y los números quedan a salvo. Izquierda más ancha
         (ahí van los números). Orden: arriba derecha abajo izquierda. */
      padding:8mm 8mm 8mm 15mm;
      box-sizing:border-box;
    }
    @page{ size:A4; margin:0; }
    #printTitle{
      font-family:var(--font-display);
      font-weight:800; text-transform:uppercase; letter-spacing:0.02em;
      margin:0 0 5mm; text-align:center;
      /* el tamaño real lo pone el auto-ajuste en JS */
    }
    #printList{
      list-style:none; margin:0; padding:0;
      column-gap:8mm;
    }
    #printList li{
      display:flex; align-items:baseline; gap:8px;
      break-inside:avoid;              /* que una canción no se parta entre columnas */
      border-bottom:1px solid #ddd;
    }
    /* El número, secundario: más chico que el nombre y en gris. */
    #printList .pn{ font-weight:800; color:#999; font-size:0.6em; font-variant-numeric:tabular-nums; flex-shrink:0; min-width:2em; }
    #printList .pt{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  }


/* ---------- modo offline: la copia local (card #58) ---------- */
/* La barra vive abajo para no tapar la topbar ni la toolbar del click. */
#offlineBar{ display:none; }
body.offline #offlineBar{
  display:block; position:fixed; left:0; right:0; bottom:0; z-index:45;
  padding:8px 14px; text-align:center; font-size:12.5px;
  background:#2A2410; color:var(--aviso); border-top:1px solid #57501F;
}
/* Sin nube no se pueden crear listas: la card de "+ Nueva lista" se esconde. */
body.offline .card.new{ display:none; }