/* =====================================================================
   KANCIONES — ESTILO CUADERNO
   Papel rayado · fondo atril de música
   ===================================================================== */

/* ── Variables ───────────────────────────────────────────────────────── */
:root {
    --nb-papel:        #faf8f2;
    --nb-papel-oscuro: #1c1a14;
    --nb-linea:        #b8cde8;
    --nb-linea-osc:    #1e2a3a;
    --nb-margen:       #e05050;
    --nb-margen-osc:   #9b2b2b;
    --nb-tinta:        #1a2a52;
    --nb-tinta-osc:    #c8d8f8;
    --nb-autor:        #6a7a9a;
    --nb-autor-osc:    #7a8aaa;
    --nb-alto-linea:   56px;
    --nb-margen-left:  64px;
}

/* ── Modo oscuro ─────────────────────────────────────────────────────── */
.pagina[data-tema="oscuro"] {
    --nb-papel:    var(--nb-papel-oscuro);
    --nb-linea:    var(--nb-linea-osc);
    --nb-margen:   var(--nb-margen-osc);
    --nb-tinta:    var(--nb-tinta-osc);
    --nb-autor:    var(--nb-autor-osc);
}
@media (prefers-color-scheme: dark) {
    .pagina:not([data-tema="claro"]) {
        --nb-papel:    var(--nb-papel-oscuro);
        --nb-linea:    var(--nb-linea-osc);
        --nb-margen:   var(--nb-margen-osc);
        --nb-tinta:    var(--nb-tinta-osc);
        --nb-autor:    var(--nb-autor-osc);
    }
}


/* =====================================================================
   PÁGINA — FONDO ATRIL DE MÚSICA
   Escenario oscuro con foco cálido desde arriba, como un atril iluminado
   ===================================================================== */

.pagina {
    /* Fondo: metal oscuro del atril con agujeros en rejilla */
    background-color: #1c1c1a !important;
    background-image:
        /* Agujeros del atril — círculos oscuros en cuadrícula */
        radial-gradient(circle 20px at 50% 50%,
            #050504 0%,
            #050504 62%,
            rgba(5, 5, 4, .50) 78%,
            transparent 92%
        ),
        /* Reflexión metálica izquierda */
        radial-gradient(ellipse 45% 100% at -3% 50%,
            rgba(255, 255, 255, .035) 0%,
            transparent 65%
        ),
        /* Reflexión metálica derecha */
        radial-gradient(ellipse 45% 100% at 103% 50%,
            rgba(255, 255, 255, .035) 0%,
            transparent 65%
        ),
        /* Base metálica oscura */
        linear-gradient(170deg, #2a2a27 0%, #161614 50%, #222220 100%) !important;
    background-size: 72px 72px, cover, cover, cover !important;
    background-attachment: fixed !important;
}

.pagina::before { display: none; }


/* =====================================================================
   CONTENEDOR — HOJA DE CUADERNO CON GROSOR DE PÁGINAS
   ===================================================================== */

.fondo-container {
    background-color: var(--nb-papel) !important;
    /* Líneas solo dentro del contenedor */
    background-image:
        linear-gradient(var(--nb-linea) 1px, transparent 1px) !important;
    background-size: 100% var(--nb-alto-linea) !important;
    background-attachment: local !important;
    border: none !important;
    border-radius: 4px !important;
    padding-left: calc(var(--nb-margen-left) + 24px) !important;
    position: relative;
    overflow: visible !important;
    /* Grosor de páginas (izquierda) + sombra del atril */
    box-shadow:
        -2px  0 0  #f2ede0,
        -4px  0 0  #eae4d6,
        -6px  0 0  #e2dccc,
        -8px  0 0  #dad4c4,
        -10px 0 0  #d2ccbc,
        -12px 0 0  #cac4b4,
        -14px 0 0  #c2bca8,
        -15px 3px 6px rgba(0,0,0,.35),
        0  4px 40px rgba(0,0,0,.65),
        0  2px 12px rgba(0,0,0,.50) !important;
    /* Las sombras de grosor (izquierda) se renderizan fuera del box sin afectar el centrado */
}

/* Línea roja de margen */
.fondo-container::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: var(--nb-margen-left);
    width: 2px;
    background: var(--nb-margen);
    opacity: .70;
    pointer-events: none;
    z-index: 1;
}

.fondo-container::before { display: none !important; }



/* =====================================================================
   CABECERA (título + buscador)
   ===================================================================== */

.index-header {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.page-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-style: italic !important;
    font-size: clamp(2rem, 6vw, 3rem) !important;
    color: var(--nb-tinta) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    line-height: 1 !important;
    transform: rotate(-0.5deg);
    transform-origin: left center;
    margin-bottom: 0 !important;
}

.page-subtitle {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 1.05rem;
    color: var(--nb-autor);
    margin-bottom: 0;
    transform: rotate(-0.3deg);
    transform-origin: left center;
}

.index-header-top {
    min-height: calc(var(--nb-alto-linea) * 2);
    display: flex;
    align-items: center;
    padding: 8px 0 4px;
}

.index-search {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    min-height: auto;
    align-items: stretch;
}

.index-search .input-group-text {
    background: rgba(160, 140, 100, .10) !important;
    border: 1.5px solid rgba(160, 140, 100, .40) !important;
    border-right: none !important;
    border-radius: 8px 0 0 8px !important;
    color: var(--nb-margen) !important;
    padding: 8px 12px !important;
    font-size: 0.95rem;
    transition: border-color .20s, color .20s;
}

.index-search .form-control {
    background: rgba(160, 140, 100, .10) !important;
    border: 1.5px solid rgba(160, 140, 100, .40) !important;
    border-left: none !important;
    border-radius: 0 8px 8px 0 !important;
    box-shadow: none !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 1.22rem !important;
    font-style: italic;
    color: var(--nb-tinta) !important;
    padding: 8px 12px !important;
    transition: border-color .20s;
}

/* Al enfocar: todo el grupo se marca con el rojo acento */
.index-search:focus-within .input-group-text {
    border-color: var(--nb-margen) !important;
    color: var(--nb-margen) !important;
}

.index-search .form-control:focus {
    border-color: var(--nb-margen) !important;
    outline: none !important;
}

.index-search .form-control::placeholder {
    color: var(--nb-autor);
    opacity: .75;
}


/* =====================================================================
   LISTA DE CANCIONES — renglones de cuaderno
   ===================================================================== */

.canciones-lista-wrap {
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    margin-top: 4px;
    counter-reset: linea-cuaderno;
}

.cancion-fila {
    min-height: calc(var(--nb-alto-linea) + 10px);
    padding: 10px 8px 10px 0 !important;
    border-bottom: none !important;
    border-radius: 0;
    gap: 0.75rem !important;
    align-items: center;
    box-shadow: none;
    /* Borde izquierdo animado: acento rojo tipo marcador */
    border-left: 3px solid transparent;
    margin-left: -3px;
    transition: background 0.20s ease, border-left-color 0.20s ease;
    position: relative;
    cursor: pointer;
}

/* Hover: efecto resaltador cálido dorado (modo claro) */
.cancion-fila:hover {
    background: linear-gradient(
        90deg,
        rgba(255, 230, 60, 0.22) 0%,
        rgba(255, 230, 60, 0.08) 60%,
        transparent 100%
    ) !important;
    border-left-color: var(--nb-margen) !important;
}

/* Hover modo oscuro: resaltador sobre papel oscuro */
.pagina[data-tema="oscuro"] .cancion-fila:hover {
    background: linear-gradient(
        90deg,
        rgba(232, 185, 80, 0.16) 0%,
        rgba(232, 185, 80, 0.05) 60%,
        transparent 100%
    ) !important;
}
@media (prefers-color-scheme: dark) {
    .pagina:not([data-tema="claro"]) .cancion-fila:hover {
        background: linear-gradient(
            90deg,
            rgba(232, 185, 80, 0.16) 0%,
            rgba(232, 185, 80, 0.05) 60%,
            transparent 100%
        ) !important;
    }
}

.cancion-fila:active { background: rgba(224, 80, 80, 0.10) !important; }

/* Número de línea en el margen */
.cancion-fila::before {
    counter-increment: linea-cuaderno;
    content: counter(linea-cuaderno);
    position: absolute;
    left: calc(-1 * var(--nb-margen-left) + 4px);
    width: calc(var(--nb-margen-left) - 16px);
    text-align: right;
    font-size: 0.66rem;
    color: var(--nb-autor);
    opacity: .38;
    font-family: 'IBM Plex Mono', monospace;
    pointer-events: none;
    line-height: var(--nb-alto-linea);
    top: 0;
    transition: opacity .20s;
}
.cancion-fila:hover::before { opacity: .70; }

/* Bloque de info (nombre + autor apilados) */
.cancion-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.cancion-nombre {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 1.50rem !important;
    font-weight: 700 !important;
    font-style: italic !important;
    color: var(--nb-tinta) !important;
    line-height: 1.15 !important;
    letter-spacing: 0.01em;
    transition: color .20s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hover nombre: rojo en claro, mantiene color propio en oscuro */
.cancion-fila:hover .cancion-nombre { color: var(--nb-margen) !important; }

.pagina[data-tema="oscuro"] .cancion-fila:hover .cancion-nombre { color: #e8c97a !important; }
@media (prefers-color-scheme: dark) {
    .pagina:not([data-tema="claro"]) .cancion-fila:hover .cancion-nombre { color: #e8c97a !important; }
}

/* Autor: estilo catálogo / índice — monospace en versalitas */
.cancion-autor {
    font-size: 0.70rem !important;
    color: var(--nb-autor) !important;
    letter-spacing: 0.07em !important;
    font-family: 'IBM Plex Mono', monospace !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-transform: uppercase;
    opacity: 0.88;
}

/* Icono nota musical — rojo acento de la app */
.cancion-icon-nota {
    color: var(--nb-margen) !important;
    opacity: 0.80;
    font-size: 0.95em;
    font-style: normal;
    transition: opacity .20s, transform .20s;
}
.cancion-fila:hover .cancion-icon-nota {
    opacity: 1;
    transform: rotate(-12deg) scale(1.15);
}

/* Icono autor — azul pizarra suave */
.cancion-icon-autor {
    color: #7aafd4 !important;
    opacity: 0.75;
    font-size: 0.85em;
    font-style: normal;
}
.pagina[data-tema="oscuro"] .cancion-icon-autor { color: #7ab8e8 !important; }
@media (prefers-color-scheme: dark) {
    .pagina:not([data-tema="claro"]) .cancion-icon-autor { color: #7ab8e8 !important; }
}

/* Flecha: roja suave, se intensifica y avanza en hover */
.cancion-chevron {
    color: var(--nb-margen) !important;
    opacity: .22 !important;
    font-size: 0.72rem !important;
    flex-shrink: 0;
    transition: opacity .20s ease, transform .20s ease;
}

.cancion-fila:hover .cancion-chevron {
    opacity: .80 !important;
    transform: translateX(5px);
}

.canciones-vacio {
    color: var(--nb-autor) !important;
    font-style: italic;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.1rem;
    text-align: center;
    padding: 20px 0;
}


/* =====================================================================
   VISTA CANCIÓN — integración con el estilo cuaderno
   ===================================================================== */

/* Header: título en Cormorant italic igual que la lista */
.fondo-container .cancion-header .page-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-style: italic !important;
    font-weight: 700 !important;
    font-size: clamp(1.5rem, 4vw, 2.2rem) !important;
}

/* Badge del autor: monospace en mayúscula, azul pizarra */
.fondo-container .cancion-autor-badge {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: #7aafd4 !important;
    opacity: 0.90;
}
.pagina[data-tema="oscuro"] .fondo-container .cancion-autor-badge { color: #7ab8e8 !important; }
@media (prefers-color-scheme: dark) {
    .pagina:not([data-tema="claro"]) .fondo-container .cancion-autor-badge { color: #7ab8e8 !important; }
}

/* Botón volver: tema cuaderno */
.fondo-container .btn-volver {
    border-color: var(--nb-linea) !important;
    color: var(--nb-autor) !important;
    background: transparent !important;
}
.fondo-container .btn-volver:hover {
    border-color: var(--nb-margen) !important;
    color: var(--nb-margen) !important;
    background: rgba(192, 40, 40, .06) !important;
}

/* Chord sheet: transparente para mostrar las líneas del cuaderno */
.fondo-container .chord-sheet {
    background: transparent !important;
    border: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Sección (Intro, Verso, Coro…): anotación de cuaderno con trazo rojo */
.fondo-container .chord-titulo {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-style: italic !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nb-margen) !important;
    background: transparent !important;
    border-left: 3px solid var(--nb-margen) !important;
    border-right: none !important;
    border-radius: 0 !important;
    padding: 2px 0 2px 10px !important;
    margin-bottom: 10px !important;
    opacity: 0.85;
}

/* Acordes sobre la letra: pequeña pastilla roja muy suave */
.fondo-container .chord-symbol {
    background: rgba(192, 40, 40, .09) !important;
    border-radius: 3px !important;
    padding: 0 3px !important;
    color: var(--nb-margen) !important;
}
.pagina[data-tema="oscuro"] .fondo-container .chord-symbol {
    background: rgba(155, 43, 43, .25) !important;
    color: #e07070 !important;
}
@media (prefers-color-scheme: dark) {
    .pagina:not([data-tema="claro"]) .fondo-container .chord-symbol {
        background: rgba(155, 43, 43, .25) !important;
        color: #e07070 !important;
    }
}

/* Sin separador entre bloques: las líneas del cuaderno ya dividen visualmente */
.fondo-container .chord-bloque {
    border-bottom: none !important;
}

/* Acordes — cursor para indicar que hay tooltip */
.chord-symbol { cursor: help; }


/* =====================================================================
   TOOLTIP DIAGRAMAS DE ACORDE (Tippy theme: acorde)
   ===================================================================== */

.tippy-box[data-theme~='acorde'] {
    background: #17150f;
    border: 1px solid rgba(200, 32, 46, .28);
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.40);
    padding: 0;
}
.tippy-box[data-theme~='acorde'] .tippy-arrow { color: #17150f; }
.tippy-box[data-theme~='acorde'] .tippy-content { padding: 10px 12px; }

.act-tooltip { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.act-nombre {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 1.15rem;
    font-weight: 700;
    color: #c8202e;
    letter-spacing: 0.02em;
    line-height: 1;
}

.act-diagramas {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: center;
}

.act-diagrama {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.act-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.56rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(232, 210, 170, .45);
}


/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (max-width: 576px) {
    :root {
        --nb-margen-left: 44px;
        --nb-alto-linea:  52px;
    }

    .fondo-container {
        padding-left: calc(var(--nb-margen-left) + 12px) !important;
        border-radius: 0 !important;
        box-shadow:
            -2px  0 0 #f2ede0,
            -4px  0 0 #e2dccc,
            -6px  0 0 #d2ccbc,
            -8px  0 0 #c2bca8,
            -9px  2px 5px rgba(0,0,0,.30),
            0 4px 28px rgba(0,0,0,.60) !important;
    }

    .page-title   { font-size: 2rem !important; }
    .cancion-nombre { font-size: 1.15rem !important; }

}

@media (max-width: 380px) {
    :root {
        --nb-margen-left: 36px;
        --nb-alto-linea:  50px;
    }
    .fondo-container {
        padding-left: calc(var(--nb-margen-left) + 8px) !important;
    }
}