/* =====================================================================
   Ensayo — papel y tinta
   Claro por defecto (atril con luz), oscuro real para escenario.
   ===================================================================== */

:root {
  --paper:      #f2eee3;
  --paper-card: #fbf9f3;
  --paper-sunk: #e7e1d2;
  --ink:        #17140f;
  --ink-soft:   #6b6355;
  --ink-faint:  #a79d8a;
  --rule:       #cdc4b0;
  --rule-hard:  #2b261d;
  --red:        #c0322c;
  --red-soft:   #f3ded9;
  --accent:     #1d5b7a;

  --radius: 10px;
  --bar-h: clamp(52px, 13vw, 76px);
  --shadow: 0 1px 2px rgba(23,20,15,.07), 0 4px 14px rgba(23,20,15,.05);

  --ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #14161a;
    --paper-card: #1c1f25;
    --paper-sunk: #0f1114;
    --ink:        #ece7db;
    --ink-soft:   #9a9384;
    --ink-faint:  #625c51;
    --rule:       #343841;
    --rule-hard:  #8d8577;
    --red:        #e2564e;
    --red-soft:   #3a1f1d;
    --accent:     #6bb6d8;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper:      #14161a;
  --paper-card: #1c1f25;
  --paper-sunk: #0f1114;
  --ink:        #ece7db;
  --ink-soft:   #9a9384;
  --ink-faint:  #625c51;
  --rule:       #343841;
  --rule-hard:  #8d8577;
  --red:        #e2564e;
  --red-soft:   #3a1f1d;
  --accent:     #6bb6d8;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Varios elementos declaran display:flex, que le gana a [hidden]. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  overscroll-behavior-y: contain;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--accent); }

/* ------------------------------------------------------------- cabecera */

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

.brand {
  display: flex; align-items: baseline; gap: 7px;
  font-family: var(--display);
  font-weight: 600; font-size: 19px; letter-spacing: -.01em;
}
.brand-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); display: inline-block;
}

.topbar .spacer { flex: 1; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9px;
  color: var(--ink-soft);
  transition: background .14s, color .14s;
}
.icon-btn:hover { background: var(--paper-sunk); color: var(--ink); }
.icon-btn.on { color: var(--red); background: var(--red-soft); }
.icon-btn svg { width: 20px; height: 20px; }

.back-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 11px 7px 7px; border-radius: 9px;
  color: var(--ink-soft); font-size: 14px; font-weight: 500;
}
.back-btn:hover { background: var(--paper-sunk); color: var(--ink); }
.back-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------------------------------------------------------------- vistas */

.view { max-width: 1080px; margin: 0 auto; padding: 18px 14px 140px; }
.view[hidden] { display: none; }

.view-title {
  font-family: var(--display);
  font-size: clamp(24px, 5vw, 32px);
  font-weight: 600; margin: 6px 0 2px; letter-spacing: -.015em;
}
.view-sub { color: var(--ink-soft); font-size: 14px; margin: 0 0 20px; }

/* ------------------------------------------------------------ repertorio */

.toolbar {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 16px;
}

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 9px;
  border: 1px solid var(--rule);
  background: var(--paper-card);
  font-size: 14px; font-weight: 500;
  transition: border-color .14s, background .14s, transform .06s;
}
.btn:hover { border-color: var(--ink-faint); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn-primary {
  background: var(--ink); color: var(--paper);
  border-color: var(--ink);
}
.btn-primary:hover { background: var(--rule-hard); }
.btn-danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.btn-ghost { background: none; border-color: transparent; color: var(--ink-soft); }
.btn-ghost:hover { background: var(--paper-sunk); color: var(--ink); }

.search {
  flex: 1; min-width: 180px;
  padding: 9px 13px; border-radius: 9px;
  border: 1px solid var(--rule);
  background: var(--paper-card);
  font-size: 14px;
}
.search:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: -1px; }

/* Pestañas Repertorio / Setlists */
.tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--rule);
  margin: 6px 0 16px;
}
.tab {
  padding: 10px 16px;
  font-family: var(--display); font-size: 17px; font-weight: 600;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); border-bottom-color: var(--red); }

/* Elegir temas para un setlist */
.pick-list { display: grid; gap: 2px; max-height: 44dvh; overflow-y: auto; margin-bottom: 4px; }
.pick {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  font-size: 14px; cursor: pointer;
}
.pick:hover { background: var(--paper-sunk); }
.pick input { width: 17px; height: 17px; accent-color: var(--red); }
.pick span { flex: 1; }
.pick-in { font-size: 11.5px; color: var(--ink-faint); font-style: normal; }
.pick:has(input:disabled) { opacity: .55; cursor: default; }

.song-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.icon-btn[disabled] { opacity: .3; pointer-events: none; }

.song-card {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 15px;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .14s, transform .07s, box-shadow .14s;
}
.song-card:hover { border-color: var(--ink-faint); box-shadow: var(--shadow); }
.song-card:active { transform: translateY(1px); }

.song-num {
  font-variant-numeric: tabular-nums;
  font-size: 12px; color: var(--ink-faint);
  min-width: 22px;
}
.song-main { flex: 1; min-width: 0; }
.song-title {
  font-weight: 600; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.song-meta {
  font-size: 12.5px; color: var(--ink-soft); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.song-tags { display: flex; align-items: center; gap: 6px; }

.pill {
  font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 20px;
  background: var(--paper-sunk); color: var(--ink-soft);
  white-space: nowrap;
}
.pill-key { font-variant-numeric: tabular-nums; }
.pill-takes { background: var(--red-soft); color: var(--red); }

.empty-state {
  text-align: center; padding: 60px 20px;
  color: var(--ink-soft);
}
.empty-state h3 {
  font-family: var(--display); font-weight: 600;
  font-size: 20px; color: var(--ink); margin: 0 0 8px;
}
.empty-state p { margin: 0 auto 20px; max-width: 380px; font-size: 14px; line-height: 1.55; }

/* ==================================================================
   EL CHART
   ================================================================== */

.chart-head { margin-bottom: 18px; }
.chart-title {
  font-family: var(--display);
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 600; margin: 0; letter-spacing: -.015em;
}
.chart-sub { color: var(--ink-soft); font-size: 14px; margin-top: 3px; }

.chart-controls {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin: 14px 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.control-group {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink-soft);
}
.control-group select {
  padding: 6px 9px; border-radius: 7px;
  border: 1px solid var(--rule); background: var(--paper-card);
  font-size: 13px;
}
.stepper {
  display: inline-flex; align-items: center;
  border: 1px solid var(--rule); border-radius: 8px;
  background: var(--paper-card); overflow: hidden;
}
.stepper button {
  width: 30px; height: 32px; color: var(--ink-soft);
  font-size: 16px; line-height: 1;
}
.stepper button:hover { background: var(--paper-sunk); color: var(--ink); }
.stepper .value {
  min-width: 54px; text-align: center;
  font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--rule); border-right: 1px solid var(--rule);
  padding: 0 6px; line-height: 32px;
}
/* El tempo se escribe: campo dentro del propio stepper */
input.value {
  width: 58px; height: 32px; line-height: normal;
  border-top: none; border-bottom: none;
  background: transparent; color: inherit;
  -moz-appearance: textfield;
}
input.value::-webkit-outer-spin-button,
input.value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.value:focus { outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: -2px; }

.toggle {
  padding: 6px 11px; border-radius: 7px;
  border: 1px solid var(--rule); background: var(--paper-card);
  font-size: 13px; font-weight: 500; color: var(--ink-soft);
}
.toggle[aria-pressed="true"] {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

.section { margin-bottom: 22px; }
.section-head {
  display: flex; align-items: baseline; gap: 9px;
  margin-bottom: 7px;
}
.section-label {
  font-family: var(--display);
  font-weight: 700; font-size: 15px;
  color: var(--red);
  min-width: 20px;
}
.section-ts {
  font-size: 12px; font-weight: 600; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* Rejilla de 4 compases, como en el papel. */
.bars {
  display: grid;
  /* minmax(0,…) y no 1fr: si no, el compás no baja de su contenido mínimo
     y la rejilla entera se sale de la pantalla. Encoger la letra es
     trabajo de fitBars. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--rule-hard);
  border-left: 2px solid var(--rule-hard);
}

.bar {
  position: relative;
  min-width: 0;
  min-height: var(--bar-h);
  display: flex; align-items: center; justify-content: center;
  padding: 6px 8px;
  border-right: 2px solid var(--rule-hard);
  border-bottom: 2px solid var(--rule-hard);
  background: var(--paper-card);
  transition: background .12s;
}
.bar.empty { background: var(--paper); }

/* Letra del cifrado. La cola de respaldo cubre ♭ y ♯, que ninguna
   fuente web incluye: los aporta el sistema. */
#chartArea               { --chart-family: 'Inter', system-ui, sans-serif; --chart-scale: 1; }
#chartArea.font-realbook { --chart-family: 'Caveat', 'Segoe Script', cursive; --chart-scale: 1.34; }
#chartArea.font-clasica  { --chart-family: 'Source Serif 4', Georgia, serif; --chart-scale: 1.02; }
#chartArea.font-estrecha { --chart-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; --chart-scale: 1.14; }

/* Una sola línea siempre: si no entra, se encoge la letra (ver fitBars).
   El tamaño va en el contenedor para poder escalarlo de una vez. */
.bar-inner {
  display: flex; align-items: baseline; justify-content: center;
  gap: .42em; flex-wrap: nowrap; width: 100%;
  font-family: var(--chart-family), "Segoe UI Symbol", "Apple Symbols",
               "Noto Music", "Noto Sans Symbols 2", sans-serif;
  font-size: calc(clamp(17px, 4.4vw, 25px) * var(--chart-scale, 1));
}

.chord {
  display: inline-flex; align-items: baseline;
  font-size: 1em;
  flex-shrink: 0;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1;
  white-space: nowrap;
}
.chord .root { }
/* El margen va en em del propio sufijo, que es más chico que la letra:
   para separar 0,11em de la nota hacen falta ~0,18em aquí. */
.chord .qual {
  font-size: .62em; font-weight: 600;
  transform: translateY(-.52em);
  margin-left: .2em;
}
/* Guión de menor: casi a tamaño de la letra, sin subir a superíndice */
.chord .minor {
  font-size: .84em; font-weight: 700;
  margin: 0 .02em 0 .12em;
}
.chord .bass {
  font-size: .68em; font-weight: 600;
  color: var(--ink-soft);
  margin-left: .1em;
}
.chord .rpt, .chord .slash { color: var(--ink-faint); font-weight: 500; }

/* Alteraciones y triángulo de maj7, dibujados para no depender de la fuente.
   Llevan ancho explícito: con width:auto el SVG no reserva su sitio y los
   glifos vecinos se le montan encima. */
.chord .sym { display: inline-block; flex-shrink: 0; }
.chord .sym-flat  { height: .86em; width: .35em; vertical-align: -.11em; margin-left: .1em; }
.chord .sym-sharp { height: .82em; width: .33em; vertical-align: -.1em;  margin-left: .14em; }
.chord .sym-tri   { height: .66em; width: .66em; vertical-align: -.02em; margin: 0 .05em 0 .06em; }

/* La alteración pegada a la nota necesita más aire que dentro del sufijo:
   la letra grande es la que aprieta. */
.chord .root .sym-flat  { margin-left: .12em; }
.chord .root .sym-sharp { margin-left: .16em; }

/* En la manuscrita el trazo se sale de la caja de la letra (la F es la
   peor), así que la tinta se toca aunque las cajas no. */
#chartArea.font-realbook .chord .sym-flat  { margin-left: .16em; }
#chartArea.font-realbook .chord .sym-sharp { margin-left: .2em; }
#chartArea.font-realbook .chord .root .sym-flat  { margin-left: .2em; }
#chartArea.font-realbook .chord .root .sym-sharp { margin-left: .26em; }

/* Compás sonando ahora. Va con outline y no con box-shadow para no pisar
   las barras gruesas de inicio y fin de parte, que sí usan box-shadow. */
.bar.active {
  background: var(--red-soft);
  outline: 2px solid var(--red);
  outline-offset: -2px;
}

/* Signos de navegación: dentro del compás al que pertenecen, arriba a la
   derecha. Fuera del compás quedaban pegados a la fila de arriba y no se
   sabía a cuál correspondían. */
.bar-marks {
  position: absolute; top: 3px; left: 6px; right: 6px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  height: 18px;
  pointer-events: none;
}
/* Las barras de repetición ocupan el borde: los signos se apartan,
   y el centrado se calcula sobre el espacio que queda libre. */
.bar.repeat-open .bar-marks { left: 24px; }
.bar.repeat-close .bar-marks { right: 24px; }
.mark-sym {
  width: 20px; height: 20px; flex-shrink: 0;
  color: var(--red);
  pointer-events: auto;
}
.mark-text {
  font-size: 10px; font-weight: 700; letter-spacing: .01em;
  color: var(--accent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: auto;
}
/* Con signos arriba, el acorde baja un poco para no chocar. */
.bar.has-marks .bar-inner { margin-top: 13px; }

/* Leyenda de signos */
.legend { display: grid; gap: 3px; }
.legend-row {
  display: grid; grid-template-columns: 46px 1fr;
  gap: 12px; align-items: start;
  padding: 11px 8px;
  border-radius: 9px;
}
.legend-row + .legend-row { border-top: 1px solid var(--rule); }
.legend-row.present { background: var(--red-soft); }
.legend-glyph {
  display: flex; align-items: center; justify-content: center;
  min-height: 30px; color: var(--red);
}
.legend-glyph svg { width: 24px; height: 24px; }
.legend-name { font-size: 14px; font-weight: 600; }
.legend-gloss { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin-top: 2px; }
.legend-here {
  font-size: 10.5px; font-weight: 700; color: var(--red);
  text-transform: uppercase; letter-spacing: .06em; margin-left: 7px;
}

.lg-sym { font-size: 21px; font-weight: 600; color: var(--ink-faint); }
.lg-sec { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--red); }
.lg-end { font-size: 12px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.lg-rep {
  position: relative; display: block; width: 22px; height: 26px;
}
.lg-rep::before {
  content: ""; position: absolute; left: 2px; top: 0; bottom: 0;
  width: 5px; background: var(--red); border-radius: 1px;
}
.lg-rep::after {
  content: ""; position: absolute; left: 11px; top: 50%;
  width: 5px; height: 17px; transform: translateY(-50%);
  background:
    radial-gradient(circle at 50% 22%, var(--red) 0 2.5px, transparent 3px),
    radial-gradient(circle at 50% 78%, var(--red) 0 2.5px, transparent 3px);
}

/* Casillas 1ª y 2ª */
.ending {
  position: absolute; top: 3px; left: 5px;
  font-size: 11px; font-weight: 700;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.ending::after {
  content: ""; position: absolute;
  left: 0; top: -3px; width: 300%; height: 2px;
  background: var(--rule-hard);
}

/* ---- Barras de compás: repeticiones y brackets de parte ----
   Todas se dibujan con un <span class="edge">, no con pseudo-elementos,
   porque un compás puede abrir y cerrar a la vez y porque necesitan
   apagarse solas cuando la repetición ya se cumplió. */
.edge {
  position: absolute; top: 5px; bottom: 5px;
  width: 15px; pointer-events: none;
  transition: opacity .35s ease;
}
.edge-open  { left: 3px; }
.edge-close { right: 3px; }

/* Bracket de parte: abre y cierra la sección */
.edge-double, .edge-final {
  border-top: 3px solid var(--red);
  border-bottom: 3px solid var(--red);
}
.edge-open.edge-double, .edge-open.edge-final {
  border-left: 3px solid var(--red);
  border-radius: 3px 0 0 3px;
}
.edge-close.edge-double, .edge-close.edge-final {
  border-right: 3px solid var(--red);
  border-radius: 0 3px 3px 0;
}
/* El final de tema lleva el trazo más marcado */
.edge-final { border-width: 4px; }

/* Repetición: barra gruesa y dos puntos, como iReal */
.edge-repeat::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  width: 5px; background: var(--red); border-radius: 1px;
}
.edge-open.edge-repeat::before  { left: 0; }
.edge-close.edge-repeat::before { right: 0; }
.edge-repeat::after {
  content: ""; position: absolute; top: 50%;
  width: 5px; height: 26px; transform: translateY(-50%);
  background:
    radial-gradient(circle at 50% 25%, var(--red) 0 2.5px, transparent 3px),
    radial-gradient(circle at 50% 75%, var(--red) 0 2.5px, transparent 3px);
}
.edge-open.edge-repeat::after  { left: 9px; }
.edge-close.edge-repeat::after { right: 9px; }

/* Ya cumplió su función en esta pasada */
.edge.spent { opacity: .15; }
.mark-sym { transition: opacity .35s ease; }
.mark-sym.spent { opacity: .18; }

.bar.repeat-open, .bar.double-open, .bar.final-open { padding-left: 22px; }
.bar.repeat-close, .bar.double-close, .bar.final { padding-right: 22px; }
.bar.double-open .bar-marks  { left: 24px; }
.bar.double-close .bar-marks,
.bar.final .bar-marks        { right: 24px; }

/* ==================================================================
   POSICIONES DE GUITARRA
   ================================================================== */

/* Acorde con forma ya elegida: un subrayado discreto, que en el atril
   no debe competir con el cifrado. */
.chord.has-shape { border-bottom: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); }

.gt-chord { margin-bottom: 18px; }
.gt-chord h3 {
  font-family: var(--display); font-size: 19px; font-weight: 600;
  margin: 0 0 8px; display: flex; align-items: baseline; gap: 9px;
}
.gt-chord h3 .chord { font-size: 22px; font-family: var(--ui); }
.gt-chord h3 em {
  font-family: var(--ui); font-style: normal;
  font-size: 12.5px; font-weight: 500; color: var(--ink-soft);
}

.gt-shapes {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}
.gt-shape {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 8px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  transition: border-color .14s, background .14s;
}
.gt-shape:hover { border-color: var(--ink-faint); }
.gt-shape.on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.gt-clear { margin-top: 8px; font-size: 12.5px; }

.fret-svg { width: 88px; height: 111px; }
.fret-line { stroke: var(--ink-faint); stroke-width: 1; }
.fret-dot { fill: var(--ink); }
.fret-open { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.fret-mark { fill: var(--ink-faint); font-size: 11px; font-family: var(--ui); }
.fret-num { fill: var(--ink-soft); font-size: 11px; font-family: var(--ui); font-weight: 700; }

/* En tableta y pantallas grandes, diagramas cómodos de leer desde el atril */
@media (min-width: 600px) {
  .gt-shapes { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .fret-svg { width: 116px; height: 146px; }
  .fret-num { font-size: 10px; }
}
@media (min-width: 900px) {
  .gt-shapes { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }
  .fret-svg { width: 132px; height: 166px; }
}

/* ==================================================================
   EDITOR
   ================================================================== */

.editor-bar {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 18px;
}
.editor-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13.5px;
}
.editor-head strong { color: var(--red); }
#editorHint { color: var(--ink-soft); font-size: 12.5px; }

.editor-tools {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--rule);
  display: grid; gap: 9px;
}
.tool-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.tool-label {
  font-size: 11.5px; font-weight: 700; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .05em;
}
.chip {
  padding: 5px 11px; border-radius: 7px;
  border: 1px solid var(--rule); background: var(--paper);
  font-size: 12.5px; font-weight: 500; color: var(--ink-soft);
}
.chip:hover { border-color: var(--ink-faint); color: var(--ink); }
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tool-input {
  flex: 1; min-width: 120px;
  padding: 6px 10px; border-radius: 7px;
  border: 1px solid var(--rule); background: var(--paper);
  font-size: 13px;
}
.tool-short { flex: 0 0 74px; min-width: 0; }

/* El chart en modo edición */
#chartArea.editing .bar { cursor: text; }
#chartArea.editing .bar:hover { background: var(--paper-sunk); }
#chartArea.editing .bar.chosen {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.bar-input {
  width: 100%; text-align: center;
  border: none; background: transparent;
  font: inherit; font-size: .8em; font-weight: 700;
  color: var(--accent);
  outline: none; padding: 0;
}

.annotations {
  margin-top: 16px; padding: 12px 14px;
  background: var(--paper-sunk); border-radius: var(--radius);
  font-size: 13px; color: var(--ink-soft); line-height: 1.5;
}
.annotations strong { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------- notas */

.notes-box { margin-top: 24px; }
.notes-box label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--ink-soft); margin-bottom: 6px;
}
.notes-box textarea {
  width: 100%; min-height: 90px; resize: vertical;
  padding: 11px 13px; border-radius: var(--radius);
  border: 1px solid var(--rule); background: var(--paper-card);
  font-size: 14px; line-height: 1.55;
}
.notes-box textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: -1px;
}

/* ==================================================================
   TRANSPORTE — click y grabación, fijos abajo
   ================================================================== */

.transport {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--rule);
}
.transport[hidden] { display: none; }

/* Los tres botones de ejecución, juntos y a mano. */
.transport-botones { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.play-btn, .rec-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid var(--rule-hard);
  flex-shrink: 0;
  transition: transform .07s, background .14s, border-color .14s;
}
.play-btn:active, .rec-btn:active { transform: scale(.94); }
.play-btn svg, .rec-btn svg { width: 22px; height: 22px; }
.play-btn.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.rec-btn { border-color: var(--red); color: var(--red); }
.rec-btn.on { background: var(--red); color: #fff; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 55%, transparent); }
  50%      { box-shadow: 0 0 0 9px transparent; }
}

/* Silenciar el click sin parar el cursor: en una grabación se agradece. */
.mute-btn {
  width: 40px; height: 40px; flex-shrink: 0;
  border: 1px solid var(--rule); border-radius: 50%;
  color: var(--ink-soft);
}
.mute-btn:hover { border-color: var(--ink-faint); color: var(--ink); }
.mute-btn[aria-pressed="true"] {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 45%, transparent);
  background: var(--red-soft);
}

/* Vueltas y entrada, a mano en el atril */
.transport-extras {
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
}
.mini-group { display: flex; align-items: center; gap: 6px; }
.mini-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-faint);
}
.stepper-mini button { width: 26px; height: 28px; font-size: 15px; }
.stepper-mini .value { min-width: 26px; line-height: 28px; font-size: 12.5px; }
.toggle-mini { padding: 5px 9px; font-size: 12px; }

/* En pantalla estrecha, los extras pasan a su propia línea para que el
   transporte no se convierta en una fila ilegible. */
@media (max-width: 700px) {
  .transport { flex-wrap: wrap; row-gap: 10px; }
  .transport-botones { order: 1; }
  .transport-info { order: 2; flex: 1 1 auto; text-align: right; }
  .transport-extras { order: 3; flex: 1 1 100%; justify-content: space-between; }
}

.transport-info { flex: 1; min-width: 0; }
.transport-line1 {
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.transport-line2 { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

.rec-time {
  font-variant-numeric: tabular-nums;
  color: var(--red); font-weight: 700;
}
.beat-dots { display: inline-flex; gap: 4px; }
.beat-dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rule); display: block;
}
.beat-dots i.on { background: var(--red); }
.beat-dots i.accent.on { background: var(--ink); }

/* ------------------------------------------------------------- tomas */

.takes { margin-top: 26px; }
.takes h3 {
  font-family: var(--display); font-size: 17px; font-weight: 600;
  margin: 0 0 10px;
}
.take {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px; margin-bottom: 7px;
  background: var(--paper-card);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
.take-main { flex: 1; min-width: 0; }
.take-label { font-size: 14px; font-weight: 500; }
.take-meta {
  font-size: 12px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; margin-top: 1px;
}
.take audio { width: 100%; margin-top: 8px; height: 34px; }

/* ------------------------------------------------------- confirmación */
/* Nada de confirm() nativo: bloquea la página. */

.confirm-inline {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 13px; border-radius: var(--radius);
  background: var(--red-soft);
  border: 1px solid color-mix(in srgb, var(--red) 35%, transparent);
  font-size: 13.5px;
}
.confirm-inline .grow { flex: 1; }

/* ---------------------------------------------------------------- toast */

.toast {
  position: fixed; left: 50%; bottom: 92px;
  transform: translateX(-50%) translateY(12px);
  z-index: 90;
  padding: 11px 18px; border-radius: 22px;
  background: var(--ink); color: var(--paper);
  font-size: 13.5px; font-weight: 500;
  box-shadow: 0 6px 24px rgba(0,0,0,.22);
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
  max-width: min(90vw, 420px); text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------------------------------------------------------------- modal */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(12,10,8,.45);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  background: var(--paper-card);
  border-radius: 14px;
  border: 1px solid var(--rule);
  padding: 20px;
  width: min(680px, 100%);
  max-height: 84dvh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.modal h2 {
  font-family: var(--display); font-size: 20px; font-weight: 600;
  margin: 0 0 6px;
}
.modal p.hint { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 16px; line-height: 1.55; }
.modal textarea, .modal input[type="text"], .modal input[type="number"] {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--rule); border-radius: 9px;
  background: var(--paper); font-size: 14px;
}
.modal textarea { min-height: 130px; resize: vertical; font-family: ui-monospace, monospace; font-size: 12.5px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* Cuenta de Google */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
}
.cuenta-box {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 12px;
  background: var(--paper-sunk); border-radius: var(--radius);
}
.cuenta-box > div:first-child { flex: 1; min-width: 0; }
.cuenta-nombre { font-size: 14.5px; font-weight: 600; }
.cuenta-mail {
  font-size: 12.5px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gbtn { display: flex; justify-content: center; margin: 14px 0 4px; min-height: 44px; }
.aviso-cuenta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; margin: 0 0 16px;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.aviso-texto { flex: 1; min-width: 220px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.aviso-texto strong { color: var(--ink); display: block; }
.gbtn-banda { flex-shrink: 0; min-height: 40px; }

.cuenta-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.cuenta-acciones .btn { flex: 1; justify-content: center; min-width: 150px; }
.sep { border: none; border-top: 1px solid var(--rule); margin: 20px 0 16px; }

.drop-zone {
  border: 2px dashed var(--rule);
  border-radius: var(--radius);
  padding: 20px 16px; margin-bottom: 14px;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.drop-zone p { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-soft); }
.drop-alt { margin: 10px 0 0 !important; font-size: 12.5px !important; }
.drop-alt a { color: var(--accent); text-decoration: none; }
.drop-zone.over { border-color: var(--red); background: var(--red-soft); }

.field { margin-bottom: 13px; }
.field label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--ink-soft); margin-bottom: 5px;
}
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; }

@media (max-width: 420px) {
  .bars { grid-template-columns: repeat(2, 1fr); }
}

@media print {
  .topbar, .transport, .chart-controls, .takes, .notes-box, .toast { display: none !important; }
  body { background: #fff; }
  .view { padding: 0; }
}

/* ===================================================================
   Vista de letra: acordes sobre el texto

   Monoespaciada a propósito. La alineación por columnas es lo que
   hace reconocible al formato, y el acorde viaja pegado a su sílaba
   porque cada palabra es un bloque propio: el renglón se dobla sin
   descuadrar nada.
   =================================================================== */

.lyrics-area {
  font-family: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', 'Consolas', monospace;
  font-size: clamp(13.5px, 3.4vw, 16px);
  padding-bottom: 40vh;              /* aire para que el ultimo verso suba */
}

.ly-bloque { margin: 0 0 26px; }

.ly-sec {
  font-family: var(--display);
  font-size: 15px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--rule);
}

.ly-line {
  line-height: 1.25;
  margin-bottom: 6px;
  overflow-wrap: break-word;
}

/* Cada trozo es acorde arriba, texto abajo; inline-block para que el
   renglon se reacomode sin separarlos. */
.ly-u { display: inline-block; vertical-align: bottom; }

.ly-ch {
  display: block;
  min-height: 1.35em; line-height: 1.35;
  font-weight: 700; font-size: .92em;
  color: var(--red);
  white-space: pre;
  letter-spacing: -.01em;
}

.ly-t { white-space: pre; }

/* x2, N.C., las barras: se conservan pero no compiten con los acordes. */
.ly-extra { color: var(--ink-faint); font-weight: 600; }

/* Renglon sin acordes: no hace falta reservarles la fila de arriba. */
.ly-plain { padding-top: 0; }

/* Pasaje instrumental: acordes sueltos, sin letra debajo. */
.ly-inst { color: var(--red); white-space: pre-wrap; margin-bottom: 10px; }
.ly-inst .ly-ch { display: inline; min-height: 0; }

.ly-blank { height: 12px; }

.ly-vacio { color: var(--ink-soft); padding: 30px 0; text-align: center; }

/* ---------- selector chart / letra ---------- */

.view-toggle {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
}
.view-toggle button {
  padding: 6px 13px;
  font-family: var(--ui); font-size: 12.5px; font-weight: 600;
  color: var(--ink-soft);
  background: none;
  transition: background .14s, color .14s;
}
.view-toggle button + button { border-left: 1px solid var(--rule); }
.view-toggle button:hover { background: var(--paper-sunk); color: var(--ink); }
.view-toggle button.on { background: var(--rule-hard); color: var(--paper); }

/* ---------- barra de avance automatico ---------- */

.scroll-bar {
  position: sticky; top: 56px; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  margin: -6px 0 14px;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--paper-card) 94%, transparent);
  backdrop-filter: blur(10px);
  font-size: 12.5px; color: var(--ink-soft);
}
.scroll-bar.rodando { border-color: var(--red); color: var(--ink); }

.scroll-play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  transition: background .14s, color .14s, border-color .14s;
}
.scroll-play svg { width: 17px; height: 17px; }
.scroll-play:hover { background: var(--paper-sunk); color: var(--ink); }
.scroll-bar.rodando .scroll-play {
  background: var(--red); border-color: var(--red); color: #fff;
}
.scroll-bar.rodando .scroll-play svg { animation: bajando 1.6s linear infinite; }
@keyframes bajando {
  0%   { transform: translateY(-3px); opacity: .45; }
  50%  { opacity: 1; }
  100% { transform: translateY(3px); opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-bar.rodando .scroll-play svg { animation: none; }
}

.scroll-label { font-weight: 600; }
.scroll-hint { margin-left: auto; color: var(--ink-faint); font-size: 11.5px; }
@media (max-width: 560px) { .scroll-hint { display: none; } }

/* ---------- modal de pegado ---------- */

.lyr-datos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.lyr-datos input {
  flex: 1 1 180px;
  padding: 9px 11px;
  border: 1px solid var(--rule); border-radius: 8px;
  background: var(--paper); color: var(--ink);
  font-family: var(--ui); font-size: 13.5px;
}
.modal textarea.lyr-textarea { min-height: 210px; line-height: 1.35; }

.lyr-preview {
  margin-top: 9px; padding: 8px 11px;
  border-radius: 8px;
  background: var(--paper-sunk);
  font-size: 12.5px; color: var(--ink-soft);
}

/* ---------- edicion de la letra sobre la pagina ---------- */

/* Fuera de edicion nada de esto existe: el atril queda limpio. */
.lyrics-area.editando .ly-line { position: relative; padding-right: 30px; }

.lyrics-area.editando .ly-ch[data-ci] {
  cursor: pointer;
  border-radius: 4px;
  padding: 0 2px; margin: 0 -2px;
  transition: background .12s, outline-color .12s;
  outline: 1px dashed transparent;
}
.lyrics-area.editando .ly-ch[data-ci]:hover,
.lyrics-area.editando .ly-ch[data-ci]:focus-visible {
  background: var(--red-soft);
  outline-color: var(--red);
}

/* El hueco de la letra tambien es un sitio donde colgar un acorde. */
.lyrics-area.editando .ly-u[data-hueco] { cursor: text; }
.lyrics-area.editando .ly-u[data-hueco]:hover .ly-ch:empty::after {
  content: "+";
  color: var(--ink-faint);
  font-weight: 700;
}
.lyrics-area.editando .ly-u[data-hueco]:hover .ly-t {
  box-shadow: inset 0 -1px 0 var(--rule-hard);
}

.ly-lapiz {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 6px;
  color: var(--ink-faint);
  font-size: 13px; line-height: 1;
  opacity: 0; transition: opacity .12s, background .12s, color .12s;
}
.ly-line:hover .ly-lapiz, .ly-lapiz:focus-visible { opacity: 1; }
.ly-lapiz:hover { background: var(--paper-sunk); color: var(--ink); }
/* En tactil no hay hover: el lapiz se queda puesto. */
@media (hover: none) { .lyrics-area.editando .ly-lapiz { opacity: .55; } }

.lyrics-area.editando .ly-sec { cursor: pointer; }
.lyrics-area.editando .ly-sec:hover { color: var(--ink); }
.ly-sin-nombre { font-style: italic; opacity: .5; text-transform: none; }

.ly-anadir {
  display: block; margin-top: 8px;
  padding: 4px 9px; border-radius: 7px;
  border: 1px dashed var(--rule);
  color: var(--ink-faint);
  font-family: var(--ui); font-size: 11.5px;
  transition: color .12s, border-color .12s;
}
.ly-anadir:hover { color: var(--ink); border-color: var(--ink-faint); }

/* ---------- globo de un acorde ---------- */

.ly-pop {
  position: absolute; z-index: 60;
  display: flex; align-items: center; gap: 6px;
  padding: 7px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper-card);
  box-shadow: var(--shadow);
}
.ly-pop-title {
  font-family: var(--ui); font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint);
  padding-left: 3px;
}
.ly-pop input {
  width: 92px;
  padding: 6px 8px;
  border: 1px solid var(--rule); border-radius: 7px;
  background: var(--paper); color: var(--ink);
  font-family: ui-monospace, monospace; font-size: 13.5px; font-weight: 700;
}
.ly-pop-nudge { display: inline-flex; }
.ly-pop-nudge button {
  width: 26px; height: 30px;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 15px; line-height: 1;
}
.ly-pop-nudge button:first-child { border-radius: 7px 0 0 7px; }
.ly-pop-nudge button:last-child { border-radius: 0 7px 7px 0; border-left: none; }
.ly-pop-nudge button:hover { background: var(--paper-sunk); color: var(--ink); }

.ly-pop-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 7px;
  color: var(--ink-faint);
}
.ly-pop-del svg { width: 15px; height: 15px; }
.ly-pop-del:hover { background: var(--red-soft); color: var(--red); }

.ly-pop-ok {
  padding: 6px 11px; border-radius: 7px;
  background: var(--rule-hard); color: var(--paper);
  font-family: var(--ui); font-size: 12.5px; font-weight: 600;
}

/* ---------- que trae cada tema, visible desde la lista ----------
   Va con borde y sin relleno para que se lea como categoria y no
   compita con el tono y el tempo, que son valores. */

.pill-formato {
  background: none;
  border: 1px solid var(--rule);
  padding: 2px 8px;
  font-size: 10.5px;
  letter-spacing: .02em;
}
.pill-chart { color: var(--ink-faint); }
.pill-letra {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.pill-ambos {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* En pantalla estrecha el titulo manda: la pastilla se acorta sola. */
@media (max-width: 560px) {
  .pill-formato { font-size: 10px; padding: 2px 6px; }
  .pill-ambos { font-size: 0; }
  .pill-ambos::after { content: "Letra+acordes"; font-size: 10px; }
}