/* ============================================================
   SETLIST — hoja de estilos
   Fondo de club oscuro y ámbar de luz de atril: la app se usa arriba de un
   escenario, no en una oficina.
   ============================================================ */

:root{
  --bg:#0c0c0f;
  --bg-panel:#17161b;
  --bg-panel-2:#1e1c22;
  --bg-raised:#242229;
  --accent:#e8a33d;
  --accent-dim:#b9812c;
  --accent-glow: rgba(232,163,61,0.18);
  --danger:#c1443c;
  --danger-dim:#8f322c;
  --text:#f2eee6;
  --text-muted:#8b8791;
  --border:#2a2830;
  --font-display: "Arial Narrow", "Helvetica Neue Condensed", "Segoe UI", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --rail: 68px;
  --panel: 240px;
  --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 */
  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; }

/* 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;
}
#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:#4b4854; }
#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;
}
.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:linear-gradient(150deg,#3a3340,#241f28) center/cover;
  border:1px solid var(--border);
  color:var(--accent);
  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:11px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.85);
  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:7px;
  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:center;
  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 0 calc(12px + var(--safe-abajo));
  padding-left:var(--safe-izq);
  min-width:0;
}
.rail-btn{
  position:relative;
  width:44px; height:40px;
  display:grid; place-items:center;
  background:transparent; border:0; border-radius:9px;
  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:-1px; 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:6px;
  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;
}
.panel-head{
  display:flex; align-items:baseline; gap:8px;
  padding:12px 14px 8px;
}
.panel-head b{
  font-family:var(--font-display); font-size:15px;
  letter-spacing:.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.panel-head span{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted); flex:none; }

/* 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:8px;
  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);
  box-shadow:0 10px 24px -10px rgba(0,0,0,.9);
  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:#37343f; 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:#4b4854; 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:#1a1206;
  border-radius:9px; 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;
}
/* 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:11px;
  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:11px;
  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:#5f5b68;
  font-variant-numeric:tabular-nums;
}
.badge.link{ color:#7fa9dd; border-color:rgba(74,144,217,.45); }
.badge{
  font-size:10.5px; letter-spacing:.02em;
  border-radius:5px; padding:2px 6px; border:1px solid;
}
.badge.view, .badge.own{ color:var(--text-muted); border-color:#3a3742; }
.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:7px; 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:#a8a3af;
  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:9px; padding:3px;
}
.tgroup.off{ opacity:.42; }
.tb-btn{
  background:transparent; border:0; color:var(--text);
  font-size:12.5px; padding:5px 9px; border-radius:6px;
  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; }
.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; }

#currentTitle{
  font-family:var(--font-display);
  font-size:23px; margin:0; padding:16px 26px 10px;
  letter-spacing:.01em; flex:none;
}
#currentTitle.es-sep{ color:var(--text-muted); font-family:var(--font-mono); font-size:15px; }
#currentIndex{ color:var(--text-muted); font-family:var(--font-mono); font-size:13px; }

#lyricsWrap{ flex:1; min-height:0; overflow-y:auto; padding:0 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. */
body[data-lectura="cifrado"] #lyricsText > *:not(.cp-grid):not(.cp-comment){ 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(12,12,15,0));
}
.full-head .txt{ min-width:0; }
.full-head h2{ font-family:var(--font-display); font-size:26px; margin:0; letter-spacing:.01em; }
.full-head .txt span{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted); }
.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:9px; 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:#2f2c36; }
.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:#5f5b68;
  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:11px; 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:8px;
  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:8px; 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:8px;
  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:8px;
  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:8px; 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:6px;
  color:var(--text-muted); font-size:11.5px; padding:3px 6px;
}
.warn{
  display:flex; gap:8px; margin-top:4px;
  padding:9px 11px; border-radius:8px;
  background:rgba(193,68,60,.1); border:1px solid rgba(193,68,60,.35);
  font-size:12px; color:#e5a09a;
}
.warn b{ color:#f0c0bb; }

/* ---------- 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:10px; 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:8px; padding:3px; flex:none;
}
.stepper button{
  background:transparent; border:0; color:var(--text);
  width:28px; height:24px; border-radius:5px; 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:8px; 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-vacio{ font-size:12.5px; color:var(--text-muted); margin:0 0 10px; }

.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:10px; padding:9px 10px 9px 11px;
}
.lab-row .sw{
  width:22px; height:22px; border-radius:6px;
  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:6px;
  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:7px; 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:9px; box-shadow:0 14px 30px -14px rgba(0,0,0,.9);
}
.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 #3a3742;
  color:var(--text-muted); border-radius:10px; 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:#5f5b68; }
.acc-save{
  margin-top:14px;
  background:var(--accent); color:#1a1206; border:0;
  border-radius:9px; 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:11px; 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:8px;
  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:#1a1206; border:0;
  border-radius:9px; 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:9px; 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:#b3aeb8; }
.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:5px; padding:1px 5px;
}
.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:9px; 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:#b3aeb8; }
.marks dd em{ font-style:italic; color:var(--text); }
.marks.wide dt{ width:84px; font-family:var(--font-body); font-size:13.5px; font-weight:600; color:var(--text); }
.marks.wide dd{ margin-left:96px; }
.arrows{ font-family:var(--font-mono); color:var(--accent); letter-spacing:.24em; margin:0 6px; }
.doc h3.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:12px;
  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:7px;
  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:#1a1206; }
.btn.primary:hover{ background:#f0ae4d; }
.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:7px; 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;
}
/* 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:12px; 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:7px; 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; }
.edit-row{
  display:flex; align-items:center; gap:10px;
  background:var(--bg-panel-2); border:1px solid var(--border);
  border-radius:8px; padding:8px 9px 8px 11px;
}
.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:9px; 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:9px;
  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:#f0c0bb; }

/* ---------- scrollbars ---------- */
#songList::-webkit-scrollbar, #lyricsWrap::-webkit-scrollbar,
#content::-webkit-scrollbar, .modal-body::-webkit-scrollbar{ width:9px; }
#songList::-webkit-scrollbar-thumb, #lyricsWrap::-webkit-scrollbar-thumb,
#content::-webkit-scrollbar-thumb, .modal-body::-webkit-scrollbar-thumb{
  background:var(--bg-raised); border-radius:5px;
}

/* ============================================================
   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:9px;
  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:7px;
  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-note.pb-alt{ color:var(--accent-dim); background:var(--bg-panel); }
.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;
    box-shadow:12px 0 30px -18px rgba(0,0,0,.9);
  }
  #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; }
  .tb-controls{ flex-basis:100%; }
  #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; }
  #currentTitle{ padding:14px 16px 8px; font-size:20px; }
  #lyricsWrap{ padding:0 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;
    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; }
  .cp-comment{ color:var(--text-muted); font-style:italic; }
  .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:8px;
    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:10px;
  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:#3a3742; 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:9px; padding:3px;
}
.vista button{
  background:transparent; border:0; border-radius:6px;
  padding:5px 10px; font-size:12px; color:var(--text-muted); cursor:pointer;
}
.vista button[aria-pressed="true"]{ background:var(--bg-raised); color:var(--text); }
.bpm-lbl{ font-family:var(--font-mono); font-size:9.5px; color:var(--text-muted); padding-right:5px; }

/* El tempo en el modal */
.tempo-campo{ display:flex; align-items:center; gap:9px; }
.tempo-campo input{
  width:88px; padding:9px 11px;
  background:var(--bg-panel-2); border:1px solid var(--border);
  border-radius:7px; color:var(--text); font-size:15px;
}
.tempo-campo input:focus{ outline:none; border-color:var(--accent-dim); }
.tempo-campo span{ font-size:11.5px; color:var(--text-muted); }

/* ============================================================
   LANDING / LOGIN
   ============================================================ */
  #authGate{
    position:fixed;
    inset:0;
    background:var(--bg);
    display:none;
    overflow-y:auto;
    z-index:100;
  }
  #authGate.show{ display:block; }

  .lp{
    max-width:960px;
    margin:0 auto;
    padding:0 22px 80px;
  }

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

  /* HERO */
  .lp-hero{
    position:relative;
    text-align:center;
    padding:64px 22px 48px;
    border-radius:20px;
    overflow:hidden;
    /* Notas doradas de fondo, con un velo oscuro encima para que el texto se
       lea. El glow ámbar asoma arriba, cerca de la marca. */
    background-image:
      linear-gradient(180deg, rgba(12,12,15,0.78) 0%, rgba(12,12,15,0.88) 55%, rgba(12,12,15,0.96) 100%),
      url("hero-notes.jpg");
    background-size:cover;
    background-position:center 30%;
  }
  .lp-brand{
    font-family:var(--font-display);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.14em;
    font-size:clamp(26px, 4vw, 34px);
    color:var(--accent);
    margin-bottom:26px;
  }
  .lp-headline{
    font-family:var(--font-display);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.01em;
    font-size:clamp(34px, 6vw, 58px);
    line-height:1.02;
    margin:0 auto 18px;
    max-width:16ch;
    color:var(--text);
  }
  .lp-sub{
    color:var(--text-muted);
    font-size:clamp(15px, 2.2vw, 19px);
    line-height:1.55;
    max-width:52ch;
    margin:0 auto 30px;
  }
  .auth-error{
    margin-top:14px;
    font-size:13px;
    color:var(--danger);
    min-height:18px;
  }

  /* SECCIÓN FEATURE: copy + screenshot */
  .lp-feature{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:center;
    padding:40px 0;
  }
  .lp-feature.reverse .lp-copy{ order:2; }
  .lp-copy h2{
    font-family:var(--font-display);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.02em;
    font-size:clamp(22px, 3.4vw, 30px);
    margin:0 0 14px;
    color:var(--text);
  }
  .lp-copy p{
    color:var(--text-muted);
    font-size:16px;
    line-height:1.6;
    margin:0;
  }

  /* Placeholder de imagen: caja marcada para reemplazar por el screenshot real */
  .lp-shot{
    border:1.5px dashed var(--border);
    border-radius:14px;
    background:
      linear-gradient(180deg, var(--accent-glow), transparent 60%),
      var(--bg-panel);
    min-height:280px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-align:center;
    color:var(--text-muted);
    padding:24px;
  }
  .lp-shot img{ width:100%; height:auto; border-radius:12px; display:block; }

  /* Foto real (no placeholder): sin borde punteado, la imagen manda */
  .lp-shot.lp-photo{
    border:none;
    background:none;
    padding:0;
    min-height:0;
    overflow:hidden;
    border-radius:16px;
  }
  .lp-shot.lp-photo img{ border-radius:16px; }

  /* Demo de notación de acordes: contenido real, no placeholder */

  /* Tira de features chicos */
  .lp-strip{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
    padding:36px 0;
  }
  .lp-mini{
    background:var(--bg-panel);
    border:1px solid var(--border);
    border-radius:12px;
    padding:20px;
  }
  .lp-mini .ico{ font-size:22px; margin-bottom:10px; }
  .lp-mini h3{ font-size:15px; margin:0 0 6px; color:var(--text); }
  .lp-mini p{ font-size:13px; color:var(--text-muted); line-height:1.5; margin:0; }

  /* CTA final */
  .lp-final{
    text-align:center;
    padding:56px 24px;
    margin-top:24px;
    background:
      radial-gradient(400px 160px at 50% 0%, var(--accent-glow), transparent 70%),
      var(--bg-panel);
    border:1px solid var(--border);
    border-radius:18px;
  }
  .lp-final h2{
    font-family:var(--font-display);
    font-weight:800;
    text-transform:uppercase;
    font-size:clamp(24px, 4vw, 36px);
    margin:0 0 8px;
    color:var(--text);
  }
  .lp-final p{ color:var(--text-muted); margin:0 0 24px; font-size:15px; }

  @media (max-width:720px){
    .lp-feature{ grid-template-columns:1fr; gap:20px; padding:28px 0; }
    .lp-feature.reverse .lp-copy{ order:0; }
    .lp-strip{ grid-template-columns:1fr; }
    .lp-hero{ padding:44px 0 30px; }
  }


  /* ---------- 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; }
  }