/* Portado de SongBook/Content/Chordsb.css (proyecto WebForms original), aunque
   ya bastante cambiado. Todo acorde se dibuja con la misma estructura, tenga o
   no una sílaba pegada al corchete de cierre (ChordFormatterService.FormatearLinea
   siempre genera .chordwrap > .chord + .silaba, ver ese comentario para el
   porqué): una grilla CSS de dos filas (acorde arriba, sílaba/espacio/nada
   abajo) por-fragmento, para flotar justo encima de SU sílaba SIN pisar la
   sílaba/acorde siguiente — el ancho de cada columna se ajusta solo al que sea
   más ancho entre el acorde y la sílaba (ver comentario completo más abajo,
   junto a ".chordwrap"), y de paso un acorde "suelto" (sin nada pegado, p.ej.
   la sección "MELODÍA") queda a la misma altura que uno con sílaba real,
   porque usan exactamente la misma estructura. Antes había dos formas
   distintas de dibujar el acorde (position:absolute con top negativo para el
   pegado a letra, etiqueta en línea suelta para el resto) y por eso no
   quedaban ni parejos en altura ni sin superponerse. */

.chordline {
    line-height: 3;
    /* Tipografía fluida: en vez de un tamaño fijo ("large") o saltos bruscos por
       breakpoint, escala de forma continua según el ancho de la pantalla —
       chico en un celular angosto, mediano en tablet, y bastante más grande en
       una TV (donde el navegador ocupa un viewport ancho y se ve desde lejos).
       clamp(mínimo, preferido, máximo): nunca baja de 1rem (~16px, legible en
       celular) ni sube de 2.25rem (para que en monitores anchos no crezca sin
       límite), y en el medio crece según el ancho del viewport (vw). Como el
       acorde (.chord) y el título (.title) están definidos en unidades
       relativas (%, em) a partir de este tamaño, escalan automáticamente junto
       con la letra sin necesidad de tocarlos aparte. */
    /* calc(...) multiplica por --sb-letra-escala: la variable que ajustan los
       botones A-/A+ de la barra de acciones (ver wwwroot/js/tamano-letra.js).
       Por defecto vale 1 (sin cambio) y se guarda en localStorage por usuario. */
    font-size: calc(clamp(1rem, 0.8rem + 1vw, 2.25rem) * var(--sb-letra-escala, 1));
    /* Los acordes "sueltos" son en-línea y sí aportan a la altura de la línea,
       pero una línea que combine ambos tipos, o que por algún motivo quede sin
       ningún acorde suelto, igual necesita una altura mínima reservada. */
    min-height: 2.6em;
    /* IMPORTANTE: en el texto original, varios espacios seguidos se usan a propósito
       para correr una palabra hacia la derecha y así alinear el acorde exactamente
       sobre su sílaba (como en cualquier hoja de acordes en texto plano). El HTML
       normal colapsa espacios múltiples en uno solo, así que sin esto esas palabras
       se apretujan y los acordes (que se posicionan según dónde queda su fragmento
       de texto) terminan corriéndose todos hacia la izquierda. white-space: pre-wrap
       respeta los espacios tal cual vienen, pero sigue permitiendo que la línea baje
       de renglón si no cabe en pantallas angostas (no usamos "pre" a secas para no
       forzar scroll horizontal en celulares).*/
    white-space: pre-wrap;
}

@media screen and (max-width: 480px) {
    .chordline {
        line-height: 2.5;
        min-height: 2.2em;
        /* El clamp() de arriba ya escala con el ancho de pantalla, pero en un
           celular real (p.ej. Samsung Galaxy S24+, ~412px de ancho CSS) el
           resultado quedaba pegado cerca del mínimo (~15px) y se sentía chico.
           Se sube el piso y la pendiente sólo en este breakpoint angosto, sin
           tocar el tamaño en tablet/desktop/TV. */
        font-size: calc(clamp(1.1rem, 0.9rem + 1.4vw, 1.6rem) * var(--sb-letra-escala, 1));
    }
}

.chordline .title {
    /* Sin font-size propio: hereda el tamaño fluido de .chordline. */
    font-style: italic;
    display: block;
}

/* Envuelve cada [acorde] + el pedazo de letra que le sigue (este último en su
   propio <span class="silaba">, ver ChordFormatterService — puede ser una
   sílaba real, un simple espacio, o quedar vacío si el acorde no tiene nada
   pegado). Grilla de dos filas en línea: fila 1 = acorde, fila 2 = sílaba. Con
   grid, el ancho de la columna lo decide automáticamente el más ancho de los
   dos contenidos — así un acorde más largo que su sílaba (ej. "[F#/Bb]ra")
   empuja al wrapper siguiente en vez de salirse por encima y taparlo, que es
   justamente lo que pasaba con el position:absolute anterior (no reservaba
   ningún ancho). Como TODO acorde usa esta misma estructura (antes había una
   variante aparte, "chord-suelto", para el acorde sin sílaba pegada), un
   acorde suelto queda automáticamente a la misma altura que uno con sílaba. */
.chordline .chordwrap {
    display: inline-grid;
    grid-template-rows: auto auto;
    justify-items: start;
    /* Alinea el renglón de letra (fila 2, la que se lee) con el resto del
       texto suelto de la línea que no está envuelto en ningún chordwrap
       (ver .silaba-libre más abajo — usa el mismo valor de line-height y el
       mismo vertical-align:bottom para que ambos calcen exactamente). */
    vertical-align: bottom;
}

/* Un respiro chico entre un acorde y el siguiente: cuando la sílaba de en
   medio es angosta (un simple " - ", o un espacio), el ancho de la columna
   queda dominado por el ancho del propio acorde (ver comentario de arriba) y
   sin este margen los dos acordes quedan tocándose. Sólo se agrega cuando
   ChordFormatterService detecta que ahí SÍ hay un corte de palabra real (la
   letra que sigue al acorde termina en un espacio, o no hay letra) — si el
   acorde está partiendo una palabra a la mitad (ej. "sen[Bm/A]tirme", que es
   "sentirme" con el acorde en el medio), NO se agrega, porque insertaría un
   espacio donde no lo hay en la letra original. */
.chordline .chordwrap.separado {
    margin-right: 0.2em;
}

.chordline .chordwrap .chord {
    grid-row: 1;
    /* Reemplaza el viejo "top: -1.3em" de cuando el acorde era absoluto: un
       pequeño margen inferior alcanza para separarlo visualmente de su
       sílaba dentro de la misma grilla. */
    margin-bottom: 0.1em;
    justify-self: start;
}

/* .chordline hereda line-height: 3 (necesario para dar aire entre una línea de
   canción y la siguiente) — sin este reset, la fila de la sílaba (que sí es
   texto normal) queda con esa misma altura de línea y el texto se dibuja
   centrado ahí adentro, bien lejos del acorde de arriba. Con un line-height
   propio y chico, el texto mide lo que mide de verdad y el acorde queda
   pegado justo encima. Mismo valor que .silaba-libre (ver más abajo): así el
   texto sin acorde pegado (ej. "Je" antes de "[A9]sús") queda exactamente a
   la misma altura que la sílaba de al lado que sí tiene acorde. */
.chordline .chordwrap .silaba {
    grid-row: 2;
    justify-self: start;
    line-height: 1.3;
}

/* Texto suelto sin ningún acorde pegado (ver ChordFormatterService): mismo
   line-height chico y mismo vertical-align:bottom que .chordwrap, para que
   quede a la misma altura que el resto de la letra de la línea. Sin esto,
   este texto usaría la altura de línea grande heredada de .chordline y se
   vería descolgado más arriba que las sílabas con acorde de al lado. */
.chordline .silaba-libre {
    display: inline-block;
    vertical-align: bottom;
    line-height: 1.3;
}

/* Envuelve una "palabra visual" completa cuando ChordFormatterService.FormatearLinea
   detecta que tiene 2 o más piezas pegadas sin ningún espacio real de por medio
   (texto suelto + acorde(s) + su sílaba, ej. "Se" + [G] + "ñor", o una palabra
   partida por varios acordes con guiones, ej. "san[Am]-[G]ti-[Am]dad"). Cada
   chordwrap es una caja "atómica" para el navegador, y CSS permite un salto de
   línea en el borde entre dos cajas atómicas aunque no haya ningún espacio real
   ahí en el HTML — por eso, sin esto, una palabra como "Señor" podía partirse justo
   en ese borde en pantallas angostas. white-space: nowrap le quita esa oportunidad
   de corte al navegador: la palabra entera se mueve completa a la línea siguiente
   si no entra, igual que ya pasaba con un solo chordwrap suelto.
   OJO: FormatearLinea corta la sílaba de cada acorde en el primer espacio real, así
   que esta "palabra visual" nunca es más larga que una palabra normal — nunca una
   oración entera — y por eso el nowrap acá nunca desborda la pantalla (a diferencia
   de una versión anterior de esta corrección que sí agrupaba tramos largos). */
.chordline .grupo-palabra {
    white-space: nowrap;
}

/* Base compartida por ambos tipos de acorde. */
.chordline .chord {
    font: bold 60%/1 sans-serif;
    padding: 3px 5px;
    color: var(--sb-chord-text, #ffffff);
    white-space: nowrap;
    vertical-align: baseline;
    background-color: var(--sb-chord-bg, #6c757d);
    border-radius: 8px;
}

.song-lyrics {
    background: var(--sb-bg-card, #fff);
    color: var(--sb-text-card, #212529);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 6px var(--sb-shadow-card, rgba(0,0,0,0.1));
    /* Con white-space: pre-wrap, una línea sin ningún espacio para "romper" (rara,
       pero posible) podría desbordar en pantallas angostas; con esto no rompe el
       layout de la página, sólo aparece scroll horizontal dentro de esta caja. */
    overflow-x: auto;
    /* El padding inferior extra para que la barra de acciones fija (o la del
       modo escenario) no tape las últimas líneas lo agrega ".pb-song-actionbar"
       en <article> (ver site.css y Detalle.cshtml), no esta clase. */
    transition: background-color var(--dur-normal, 200ms) ease, color var(--dur-normal, 200ms) ease;
}

/* Modo "Letra" (botón junto a "Modo escenario", ver wwwroot/js/solo-letra.js):
   en vez de ocultar los acordes con CSS sobre el HTML ya formateado, muestra
   el contenido real de Cancion.Letra (#songLetraPlana en Detalle.cshtml) — la
   letra plana que ya se guarda aparte, la misma que alimenta la búsqueda — y
   oculta el bloque con acordes (#songLetraConAcordes). Se puede combinar con
   el modo escenario (ambas clases en <html> al mismo tiempo) o usarse solo. */
#songLetraPlana {
    display: none;
    white-space: pre-wrap;
    line-height: 1.6;
    font-size: calc(clamp(1rem, 0.8rem + 1vw, 2.25rem) * var(--sb-letra-escala, 1));
}

@media screen and (max-width: 480px) {
    #songLetraPlana {
        font-size: calc(clamp(1.1rem, 0.9rem + 1.4vw, 1.6rem) * var(--sb-letra-escala, 1));
    }
}

html.solo-letra #songLetraConAcordes {
    display: none;
}

html.solo-letra #songLetraPlana {
    display: block;
}

/* Fila de diagramas de acordes (arriba de la letra, ver wwwroot/js/acordes-fila.js
   y wwwroot/lib/react-chords). Se oculta en modo "Letra": ahí el objetivo es
   ver sólo el texto para cantar, no consultar digitaciones. El modo escenario
   ya la oculta por su cuenta vía la clase "oculta-en-escenario" (Detalle.cshtml). */
html.solo-letra .acordes-fila {
    display: none;
}

.acordes-fila {
    display: flex;
    flex-wrap: wrap;
    /* Un poco más grande y más separado que antes (0.6rem/4.25rem): con más
       aire entre tarjetas se sienten menos apretadas y más "tocables",
       sobre todo en tablet/escritorio donde sobra espacio. */
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}

.acorde-tarjeta {
    width: 5.5rem;
    flex-shrink: 0;
    text-align: center;
    /* Fondo fijo (no varía con el tema claro/oscuro): el diagrama de
       react-chords dibuja sus trazos en un gris fijo (#444), pensado para
       verse sobre blanco — con el fondo oscuro del tema no se leería bien. */
    background-color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 0.4rem 0.35rem;
    box-shadow: 0 1px 3px var(--sb-shadow-card, rgba(0, 0, 0, 0.15));
    cursor: pointer;
    transition: transform var(--dur-fast, 120ms) ease, box-shadow var(--dur-fast, 120ms) ease;
}

.acorde-tarjeta:hover {
    box-shadow: 0 2px 6px var(--sb-shadow-card, rgba(0, 0, 0, 0.25));
}

.acorde-tarjeta:active {
    transform: scale(0.96);
}

.acorde-tarjeta-titulo {
    font-size: 0.95rem;
    font-weight: 700;
    color: #333333;
    margin-bottom: 0.15rem;
}

.acorde-tarjeta-diagrama svg {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================================================
   Encabezado y barra de acciones de Detalle.cshtml (vista previa aprobada por
   el usuario en el chat antes de aplicarla). Reemplaza la fila de botones
   sueltos (todos "btn-outline-*" con el mismo peso visual) por dos grupos
   diferenciados: "vista" (Escenario/Letra, dos formas de ver la misma canción
   — se pueden combinar entre sí, por eso NO es un segmented control exclusivo)
   y "acciones" (Imprimir/Editar). El semitono (♭/#) ya no vive acá: quedó
   flotando dentro de la tarjeta de letra con acordes (ver más abajo), más
   cerca de los acordes que efectivamente cambia.
   ============================================================================ */

/* "Tono: G" ahora es la misma píldora de color que ya usan las tarjetas de la
   galería (.chip-nota, ver galeria.css) en vez de un link suelto en el
   texto — el color lo sigue pintando galeria-canciones.js (mismo hash de
   siempre, ahora cargado en todas las páginas, no sólo Inicio/Buscar). */
.encabezado-cancion-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.encabezado-cancion-meta .chip-nota {
    font-size: 0.78rem;
}

.barra-acciones-cancion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    /* position:sticky (no "fixed"): sigue formando parte del flujo normal de
       la página hasta que el scroll la alcanza, y ahí se queda pegada justo
       debajo del navbar mientras se lee/canta una canción larga, en vez de
       perderse de vista para siempre como pasaba antes en tablet/escritorio
       (en celular esto ya lo resolvía la barra fija de abajo, .song-actionbar). */
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: var(--sb-bg-content);
    padding: 0.5rem 0;
    /* Separación de las tarjetas de acordes de abajo: sin esto quedaban
       pegadas justo debajo de la barra, sensación de amontonado. */
    margin-bottom: 1rem;
    /* Sombra fija (no condicionada al scroll): más simple que calcularla con
       JS y alcanza para que se lea como una franja "flotando" sobre la letra
       cuando queda pegada arriba. */
    box-shadow: 0 2px 8px var(--sb-shadow-card);
}

.grupo-acciones-cancion {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* Cápsula que agrupa "Escenario" y "Letra": visualmente parecida a un
   segmented control, pero cada botón se prende/apaga por separado
   (aria-pressed, ver stage-mode.js/solo-letra.js) porque los dos modos se
   pueden combinar — por eso no hay "sólo uno activo a la vez" en el CSS. */
.grupo-vista-cancion {
    display: inline-flex;
    background-color: var(--sb-bg-card);
    border: 1px solid var(--sb-border-card);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}

.grupo-vista-cancion .btn {
    border: none;
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sb-text-muted-card);
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.grupo-vista-cancion .btn svg {
    width: 0.9rem;
    height: 0.9rem;
}

.grupo-vista-cancion .btn[aria-pressed="true"] {
    background-color: var(--sb-link);
    color: #fff;
}

/* Botón "Números" (notación Nashville, ver wwwroot/js/nashville.js): se
   deshabilita mientras "Letra" está activo (no tiene sentido numerar
   acordes que no se están mostrando), y también se oculta por completo
   con [hidden] cuando la canción no tiene un tono reconocible. */
.grupo-vista-cancion .btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-icono-texto {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-icono-texto svg {
    width: 0.95rem;
    height: 0.95rem;
}

/* Aviso "Link copiado" del botón Compartir (ver wwwroot/js/compartir-cancion.js).
   El botón se marca position:relative desde el propio JS al mostrarlo. */
.compartir-aviso {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0.4rem;
    background-color: #212529;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 30;
}

/* El semitono (♭/#) flota en la esquina superior derecha de la tarjeta de
   letra con acordes en vez de vivir en la barra de arriba — queda pegado a
   los acordes que realmente cambia al transponer. */
.song-lyrics-con-transponer {
    position: relative;
}

.song-lyrics-transponer {
    position: absolute;
    top: 1rem;
    right: 1.2rem;
}

/* Overlay del acorde ampliado (al tocar una tarjeta de la fila). Fijo sobre
   toda la pantalla, encima incluso de la barra de acciones y de la del modo
   escenario (z-index más alto que las suyas — ver .song-actionbar/.stage-bar). */
.acorde-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 1.5rem;
}

body.acorde-overlay-abierto {
    overflow: hidden;
}

.acorde-overlay-tarjeta {
    position: relative;
    width: 100%;
    max-width: 16rem;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 1.25rem 1rem 1rem;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.acorde-overlay-titulo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #222222;
    margin-bottom: 0.5rem;
}

.acorde-overlay-diagrama svg {
    display: block;
    width: 100%;
    height: auto;
}

.acorde-overlay-cerrar {
    position: absolute;
    top: 0.4rem;
    right: 0.6rem;
    border: none;
    background: transparent;
    font-size: 1.75rem;
    line-height: 1;
    color: #666666;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
}

.acorde-overlay-cerrar:hover {
    color: #000000;
}

/* Fila de botones "v1"/"v2"/... dentro del overlay ampliado, para elegir
   entre las distintas digitaciones (positions[] de chords-db) de un mismo
   acorde — p.ej. la misma nota tocada más arriba del mástil. Se oculta por
   completo (ver acordes-fila.js: mostrarSelectorVoces) cuando el acorde sólo
   tiene una digitación conocida. */
.acorde-overlay-voces {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.85rem;
}

.acorde-overlay-voz {
    border: 1px solid #cccccc;
    background-color: #f4f4f4;
    color: #444444;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    cursor: pointer;
    transition: background-color var(--dur-fast, 120ms) ease, color var(--dur-fast, 120ms) ease;
}

.acorde-overlay-voz:hover {
    background-color: #e8e8e8;
}

.acorde-overlay-voz.activa {
    background-color: #212529;
    border-color: #212529;
    color: #ffffff;
}

/* Botones "Guitarra"/"Piano" del overlay ampliado, para elegir cuál de los
   dos diagramas se muestra (ver acordes-fila.js: elegirInstrumento). */
.acorde-overlay-instrumentos {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.acorde-overlay-instrumento {
    border: 1px solid #999999;
    background-color: #ffffff;
    color: #444444;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    cursor: pointer;
    transition: background-color var(--dur-fast, 120ms) ease, color var(--dur-fast, 120ms) ease;
}

.acorde-overlay-instrumento:hover {
    background-color: #f0f0f0;
}

.acorde-overlay-instrumento.activo {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: #ffffff;
}

/* Diagrama de piano (wwwroot/js/acorde-piano.js): teclado dibujado en SVG,
   sin depender de react-chords. Mismo fondo blanco fijo que el resto de los
   diagramas (ver comentario en .acorde-tarjeta más arriba) para que las
   teclas blancas se distingan bien del fondo de la tarjeta. */
.acorde-overlay-diagrama-piano svg {
    display: block;
    width: 100%;
    height: auto;
}

.tecla-blanca {
    fill: #ffffff;
    stroke: #999999;
    stroke-width: 1;
}

.tecla-negra {
    fill: #222222;
    stroke: #000000;
    stroke-width: 1;
}

/* La raíz y el resto de las notas del acorde usan el mismo azul que ya se
   usa para el botón de instrumento activo, para que se sienta relacionado;
   la raíz un poco más oscura para distinguirse a simple vista del resto. */
.tecla-raiz {
    fill: #0d6efd;
}

.tecla-tono {
    fill: #6ea8fe;
}

/* El bajo alterado (acordes con "/", p.ej. "C/E") se resalta aparte porque
   puede coincidir con una nota que ya sea raíz o tono del acorde base; ver
   también la etiqueta de texto "Bajo: X" que acorde-piano.js agrega debajo
   del teclado, porque la posición sola no deja claro que suena más grave. */
.tecla-bajo {
    fill: #fd7e14;
}

.tecla-etiqueta {
    font-size: 9px;
    font-weight: 700;
    fill: #ffffff;
    text-anchor: middle;
    pointer-events: none;
}

.acorde-piano-bajo-etiqueta {
    font-size: 0.8rem;
    font-weight: 600;
    color: #444444;
    margin-top: 0.4rem;
}

@media print {
    .chordline .chord {
        color: #ffffff !important;
        background-color: #6c757d !important;
    }

    /* La fila de acordes (wwwroot/js/acordes-fila.js) ya no lleva
       "d-print-none" en Detalle.cshtml, así que por defecto se imprime. La
       sombra se deja igual que en pantalla (a pedido); acá sólo se evita que
       una tarjeta quede partida entre dos páginas. */
    .acorde-tarjeta {
        break-inside: avoid;
    }

    /* Si la fila completa no cabe entera al final de una página, que salte
       completa a la siguiente en vez de partirse a la mitad. */
    .acordes-fila {
        break-inside: avoid;
    }
}