/* Hoja del script. Se usa en la vista previa, en el permalink y (inline) en el PDF.
   Los temas (themes.py) sobrescriben solo variables (en el style de la hoja) y agregan las
   clases frame-* y has-backdrop. Dos superficies: .sheet = fondo (--backdrop, alrededor) y
   .sheet-paper = papel (--paper, donde va la letra). Sin fondo, el papel ocupa todo. */

.sheet {
  --paper: #fffdf7;
  --ink: #1f2328;
  --muted: #8a8f98;
  --rest: #c9c5ba;
  --accent: #8a5a00;
  --card: #f6efe0;
  --font-body: "Lora", Georgia, serif;
  --font-title: "Playfair Display", Georgia, serif;
  --title-weight: 600;
  --backdrop: var(--paper);
  --gap: 0px; /* ancho del fondo alrededor del papel */
  --size: clamp(12px, 2.6vw, 15px);

  box-sizing: border-box;
  max-width: 210mm;
  margin: 0 auto;
  padding: var(--gap);
  background: var(--backdrop);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size);
  line-height: 1.45;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.sheet * { box-sizing: border-box; }
.sheet.has-backdrop { --gap: 7mm; }
.sheet-paper { background: var(--paper); padding: 12mm 10mm; }

/* Marcos del papel */
.frame-line .sheet-paper { border: 2px solid var(--accent); }
.frame-double .sheet-paper { border: 5px double var(--accent); }
.frame-rounded .sheet-paper { border-radius: 18px; box-shadow: 0 6px 28px #0003; }
.page-paper { display: none; } /* solo en el PDF (ver @media print) */

.sheet-head { text-align: center; margin-bottom: 1.2em; }
.sheet-head h1 {
  font-family: var(--font-title);
  font-size: 2.4em;
  line-height: var(--title-leading, 1.1);
  margin: 0;
  color: var(--accent);
  font-weight: var(--title-weight);
}
.sheet-head .subtitle { margin: .2em 0 0; color: var(--muted); font-size: 1.1em; }

.sheet-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
  gap: .8em;
  margin-bottom: 1.2em;
}
/* Recuadros de integrantes y efectos: tamaño fijo en pantalla (no cambia con "Aa"). */
@media screen { .sheet-info { font-size: 15px; } }
.sheet .card { background: var(--card); border-radius: 12px; padding: .7em 1em; }
.sheet h2 {
  font-family: var(--font-title);
  color: var(--accent);
  font-size: 1.3em;
  font-weight: var(--title-weight);
  text-align: center;
  margin: 0 0 .4em;
}
.sheet ul { list-style: none; margin: 0; padding: 0; }
.singers { display: flex; flex-wrap: wrap; justify-content: center; gap: .1em 1em; }
.teams, .effects { text-align: center; margin-top: .4em !important; }
/* Cada efecto en una línea en los casos típicos ("Solos: Super Studio 10/10 Vol. -2");
   si alguno es muy largo, se parte de forma pareja. */
.effects { font-size: .86em; }
.effects li { text-wrap: balance; }

/* Integrantes en tabla por grupo (tema: members_layout = table): una columna por grupo,
   separadas por una línea; en pantallas angostas las columnas bajan a la fila siguiente. */
.members-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7em, 1fr));
  row-gap: .6em;
  margin-top: .2em;
  overflow: hidden; /* recorta la línea de la primera columna de cada fila (ver abajo) */
}
/* Cada columna lleva su línea a la izquierda, corrida 1px hacia afuera: la de la primera
   columna de cada fila queda fuera de la tabla y se recorta; las demás quedan entre columnas. */
.members-col { padding: 0 .5em; margin-left: -1px; border-left: 1px solid var(--rest); }
/* Con muchos grupos, la tarjeta de integrantes ocupa el ancho completo. */
.sheet-info .card.is-wide, .sheet-info .card.is-wide ~ .card { grid-column: 1 / -1; }
.members-col h3 {
  margin: 0 0 .3em;
  padding-bottom: .2em;
  border-bottom: 1px solid var(--rest);
  font-size: .95em;
  font-weight: 700;
  text-align: center;
}
.members-table .singers { flex-direction: column; align-items: center; gap: .1em; }

/* Encabezado (tema: header_style). Con banda: el título sobre una franja del color de los
   títulos. Con líneas: el título entre dos líneas que se desvanecen hacia afuera. */
.head-band .sheet-head { padding: .7em 1em .8em; border-radius: 12px; background: var(--accent); }
.head-band .sheet-head h1, .head-band .sheet-head .subtitle { color: var(--paper); }
.head-band .sheet-head .subtitle { opacity: .85; }
.head-lines .sheet-head h1 { display: flex; align-items: center; gap: .45em; }
.head-lines .sheet-head h1::before, .head-lines .sheet-head h1::after {
  content: "";
  flex: 1 1 1.5em;
  min-width: 1em;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--accent));
}
.head-lines .sheet-head h1::after { background: linear-gradient(to left, transparent, var(--accent)); }

.notes { text-align: center; font-style: italic; white-space: pre-line; margin: 0 0 1.2em; }

/* La letra tiene su propio tamaño (--lyrics-size), ajustable por el lector con "Aa". */
.lanes {
  font-size: var(--lyrics-size, var(--size));
  display: grid;
  grid-template-columns: repeat(var(--lanes), minmax(0, 1fr));
  column-gap: 1.2em;
  text-align: center;
}
/* En pantalla la tabla de la letra es una grilla (sus partes no generan cajas). */
@media screen {
  .lanes > thead, .lanes > tbody, .lanes tr, .lanes th, .lanes td { display: contents; }
}
.lane-head { border-bottom: 1px solid var(--rest); padding-bottom: .2em; margin-bottom: .5em !important; }
.ln { min-height: 1.45em; overflow-wrap: anywhere; break-inside: avoid; }
.ln.blank { min-height: .9em; }
/* Columnas separadas (tema: lanes-card / lanes-frame / lanes-card-frame). Cada columna no
   es un elemento: son sus celdas (encabezado y líneas, sin espacio vertical entre ellas), así
   que el fondo y el marco se pintan celda por celda, con las esquinas en la primera y la
   última fila. Sirve igual en la grilla de pantalla y en la tabla del PDF. */
.sheet { --lane-line: color-mix(in srgb, var(--accent) 45%, transparent); --lane-radius: 10px; }
:is(.lanes-card, .lanes-frame, .lanes-card-frame) .lanes :is(.lane-head, .ln) { padding-inline: .6em; }
:is(.lanes-card, .lanes-card-frame) .lanes :is(.lane-head, .ln) { background: var(--card); }
:is(.lanes-card, .lanes-frame, .lanes-card-frame) .lanes .lane-head {
  margin-bottom: 0 !important;
  padding-top: .45em;
  padding-bottom: .35em;
  border-radius: var(--lane-radius) var(--lane-radius) 0 0;
}
:is(.lanes-card, .lanes-frame, .lanes-card-frame) .lanes tbody:first-of-type tr:first-child .ln { padding-top: .5em; }
:is(.lanes-card, .lanes-frame, .lanes-card-frame) .lanes .last-row .ln {
  padding-bottom: .6em;
  border-radius: 0 0 var(--lane-radius) var(--lane-radius);
}
:is(.lanes-frame, .lanes-card-frame) .lanes .lane-head {
  border-top: 1.5px solid var(--lane-line);
  border-inline: 1.5px solid var(--lane-line);
}
:is(.lanes-frame, .lanes-card-frame) .lanes .ln { border-inline: 1.5px solid var(--lane-line); }
:is(.lanes-frame, .lanes-card-frame) .lanes .last-row .ln { border-bottom: 1.5px solid var(--lane-line); }

.tag { font-weight: 700; }
.seg.rest { color: var(--rest) !important; }
.seg.aside { font-style: italic; color: var(--muted); }
.seg.bold { font-weight: 700; }   /* **negrita** */
.seg.italic { font-style: italic; } /* *cursiva* (con el color de quien canta) */

/* Resaltado "mis líneas" (?me=Ma): solo = amarillo, en grupo = azul, lo demás se atenúa. */
.sheet { --hl-solo: #ffe27a; --hl-group: #cfe4ff; }
.sheet .mine, .sheet .mine-group {
  padding: 0 .2em;
  border-radius: 4px;
  font-weight: 700;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.sheet .mine { background: var(--hl-solo); }
.sheet .mine-group { background: var(--hl-group); }
.sheet .aside:is(.mine, .mine-group) { color: var(--ink); }
.has-me .seg:not(.mine, .mine-group) { opacity: .5; }
.singers li.mine { font-weight: 400; }
/* Integrantes clickeables (solo en el permalink) */
.singers a { color: inherit; text-decoration: none; padding: .1em .3em; border-radius: 4px; }
.singers a:hover { background: #0000000d; }
.singers li.mine a:hover { background: none; }
/* Aviso y leyenda apilados en la misma celda; el que no toca se oculta con visibility
   (no display ni [hidden]) para que conserve su alto y la página no salte. */
.me-slot { display: grid; margin: -.3em 0 .4em; text-align: center; }
.me-slot > p { grid-area: 1 / 1; margin: 0; align-self: center; }
.me-slot > .is-off { visibility: hidden; }
.members-hint { font-size: .85em; color: var(--muted); }
.me-legend span { font-size: .9em; }

.sheet-foot {
  grid-column: 1 / -1;
  margin-top: 2em;
  text-align: center;
  font-family: var(--font-title);
  font-size: calc(var(--size) * 1.6);
  font-weight: var(--title-weight);
  color: var(--accent);
}

/* Impresión / PDF: tamaño de letra fijo para que el PDF sea idéntico en cualquier equipo.
   La primera página va a sangre (el margen lo da el relleno de .sheet); las siguientes
   tienen margen arriba y todas abajo, para que la letra no quede pegada al borde. */
/* Los márgenes de página (@page) van en print.html: dependen de si el tema tiene fondo, y
   una regla @page aquí no se deja anular por completo allá (Chromium). */
@media print {
  /* Si el cierre no cabe, lleva consigo al menos la última fila de letra. */
  .sheet-ending { break-inside: avoid; }
  .lanes .sheet-footer-row td { background: none; border: 0; border-radius: 0; padding: 0; }
  html, body { margin: 0; background: var(--paper, #fffdf7); }
  .sheet { --size: 13px; max-width: none; min-height: calc(297mm - 12mm); padding-bottom: 0; }
  .sheet-paper { padding-bottom: 0; }
  /* Con fondo o marco (print.html quita los márgenes de página): el papel y su marco son un
     elemento fijo (.page-paper) que Chromium repite entero en cada página, así la última
     página también tiene su marco completo aunque la letra termine a la mitad. La hoja real
     queda transparente y solo aporta el relleno, repetido en cada página (clone). */
  .sheet:not(.frame-none):not(.has-backdrop) { --gap: 7mm; }
  .sheet:is(.has-backdrop, :not(.frame-none)) {
    min-height: 297mm;
    padding-bottom: var(--gap);
    background: none;
  }
  .sheet:is(.has-backdrop, :not(.frame-none)),
  .sheet:is(.has-backdrop, :not(.frame-none)) .sheet-paper {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  .sheet:is(.has-backdrop, :not(.frame-none)) .sheet-paper {
    padding-bottom: 8mm;
    background: none;
    border-color: transparent;
    box-shadow: none;
  }
  .sheet:is(.has-backdrop, :not(.frame-none)) .page-paper {
    display: block;
    position: fixed;
    inset: var(--gap);
    z-index: -1;
    background: var(--paper);
  }
  .frame-line .page-paper { border: 2px solid var(--accent); }
  .frame-double .page-paper { border: 5px double var(--accent); }
  .frame-rounded .page-paper { border-radius: 18px; box-shadow: 0 6px 28px #0003; }

  /* La letra es una tabla nativa: el <thead> se repite en cada página y las filas no se
     cortan entre páginas. El margen negativo compensa el relleno de las celdas. */
  .lanes {
    display: table;
    width: calc(100% + 1.2em);
    margin: 0 -.6em;
    table-layout: fixed;
    border-collapse: collapse;
  }
  .lanes th, .lanes td { padding: 0 .6em; vertical-align: top; font-weight: inherit; }
  .lanes tr { break-inside: avoid; }

  /* Columnas separadas en el PDF: el fondo y el marco van en las celdas (siempre ocupan la
     fila entera; una línea vacía es más baja que su fila y dejaría franjas). Las columnas se
     separan con border-spacing; el margen negativo quita ese espacio en los bordes. */
  :is(.lanes-card, .lanes-frame, .lanes-card-frame) .lanes {
    border-collapse: separate;
    border-spacing: 1.2em 0;
    width: calc(100% + 2.4em);
    margin: 0 -1.2em;
  }
  :is(.lanes-card, .lanes-frame, .lanes-card-frame) .lanes :is(.lane-head, .ln) {
    padding-inline: 0;
    background: none;
    border-inline: 0;
    border-top: 0;
    border-radius: 0;
  }
  :is(.lanes-card, .lanes-frame, .lanes-card-frame) .lanes .last-row .ln { border-bottom: 0; }
  :is(.lanes-card, .lanes-card-frame) .lanes :is(th, td) { background: var(--card); }
  :is(.lanes-card, .lanes-frame, .lanes-card-frame) .lanes th { border-radius: var(--lane-radius) var(--lane-radius) 0 0; }
  :is(.lanes-card, .lanes-frame, .lanes-card-frame) .lanes .last-row td { border-radius: 0 0 var(--lane-radius) var(--lane-radius); }
  :is(.lanes-frame, .lanes-card-frame) .lanes th {
    border-top: 1.5px solid var(--lane-line);
    border-inline: 1.5px solid var(--lane-line);
  }
  :is(.lanes-frame, .lanes-card-frame) .lanes td { border-inline: 1.5px solid var(--lane-line); }
  :is(.lanes-frame, .lanes-card-frame) .lanes .last-row td { border-bottom: 1.5px solid var(--lane-line); }
}

/* Móvil: columnas en una franja deslizable. --visible (ajustes de lectura) = cuántas caben a
   la vez; por defecto todas. Las sombras en los bordes indican que hay más columnas. */
@media screen and (max-width: 700px) {
  .sheet-paper { padding: 8mm 3.5mm; }
  .sheet.has-backdrop { --gap: 3mm; }
  .frame-rounded .sheet-paper { border-radius: 12px; }
  .lanes {
    --visible-n: var(--visible, 1);
    grid-template-columns: repeat(
      var(--lanes),
      calc((100% - (var(--visible-n) - 1) * 1.2em) / var(--visible-n))
    );
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    background:
      linear-gradient(to right, var(--paper) 30%, transparent) left / 1.5em 100% no-repeat local,
      linear-gradient(to left, var(--paper) 30%, transparent) right / 1.5em 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, #0000002e, transparent) left / .7em 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, #0000002e, transparent) right / .7em 100% no-repeat scroll;
  }
  .lanes::-webkit-scrollbar { display: none; }
  .sheet-foot {
    grid-column: 1 / span var(--visible-n);
    position: sticky;
    left: 0;
  }
  /* Un swipe avanza como máximo una columna, aunque sea rápido. */
  .lanes .lane-head { scroll-snap-align: start; scroll-snap-stop: always; }

  /* Mientras view.js calcula el tamaño automático: sin saltos de línea y en el caso más
     ancho (negrita + relleno del resaltado), para que resaltar nunca corte una línea. */
  .sheet.measuring .ln { white-space: nowrap; overflow: hidden; }
  .sheet.measuring .seg { font-weight: 700; padding: 0 .2em; }
}