/* Extracted from cancion.php during CSS cleanup. Keep before newer component/page CSS. */
:root{
        --bg-main:#050007;
        --bg-panel:#0c0014;
        --bg-card:#14001f;
        --accent:#f91fb0;
        --accent-strong:#ff5fd0;
        --accent-soft:rgba(249,31,176,0.35);
        --text-main:#fdf7ff;
        --text-muted:#b7a9d6;
        --border-subtle:rgba(255,255,255,0.08);
        --radius-lg:18px;
        --radius-pill:999px;
        --shadow-soft:0 12px 32px rgba(0,0,0,0.75);
    }

    body.theme-dark {
        margin:0;
        padding:0;
        background:radial-gradient(circle at top,#260038,#050007 40%,#000);
        color:var(--text-main);
        font-family:system-ui, sans-serif;
    }

    body.song-bg{
        position: relative;
        isolation: isolate;
        }

        /* wallpaper real (detrás de TODO) */
        body.song-bg::before{
        content:"";
        position: fixed;
        inset: 0;
        z-index: -2;

        background-image: var(--song-bg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        filter: blur(22px) saturate(1.35) contrast(1.15);
        opacity: 0.65;
        transform: scale(1.08); /* evita bordes tras el blur */
        }

        /* ====== MODO CLARO: el wallpaper debe ser MÁS SUAVE y con overlay BLANCO ====== */
        body.theme-light.song-bg::before{
        filter: blur(22px) saturate(1.05) contrast(1.05);
        opacity: 0.35;              /* clave: bajar fuerza */
        }

        /* overlay blanco para “lavar” el fondo y que no ensucie */
        body.theme-light.song-bg::after{
        background:
            radial-gradient(circle at top,
            rgba(255,255,255,0.92) 0%,
            rgba(255,255,255,0.82) 35%,
            rgba(245,240,255,0.78) 60%,
            rgba(255,255,255,0.72) 100%
            );
        }

        body.theme-dark.song-bg::before{
        filter: blur(22px) saturate(1.35) contrast(1.15);
        opacity: 0.65;
        }

        body.theme-dark.song-bg::after{
        background: radial-gradient(circle at top,
            rgba(249,31,176,0.22),
            rgba(0,0,0,0.88) 55%,
            rgba(0,0,0,0.95)
        );
        }

        /* capa oscura para que no mate texto (ajústala) */
        body.song-bg::after{
        content:"";
        position: fixed;
        inset: 0;
        z-index: -1;

        background: radial-gradient(circle at top, rgba(249,31,176,0.22), rgba(0,0,0,0.88) 55%, rgba(0,0,0,0.95));
        }

    /* Versión clara básica para la ficha */
    body.theme-light {
        margin:0;
        padding:0;
        background:
            radial-gradient(circle at top, #ffe9ff 0, #f5f0ff 40%, #f5f5ff 100%),
            #f7f3ff;
        color:#1c0f33;
        font-family:system-ui, sans-serif;
    }

    /* === AJUSTES SOLO PARA MODO CLARO (theme-light) === */

    /* Badges de Año / Estilo más claritos, sin fondo negro */
    body.theme-light .badge {
        background: #fdf7ff; /* casi blanco con toque lila */
        border-color: rgba(249, 31, 176, 0.22);
        color: #b0117a;      /* rosa un poco más oscuro que el normal */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    }

    /* Títulos de sección con menos neón en claro */
    body.theme-light .section h2 {
        color: #d81a93;      /* tono rosa más suave */
        text-shadow: 0 0 3px rgba(249,31,176,0.4);
    }

    /* Opcional: tarjetas relacionadas un pelín menos “discoteca” en claro */
    body.theme-light .related-card {
        background: #ffffff;
        border-color: rgba(40, 10, 70, 0.08);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    }

    /* Opcional: fondo de comentarios más blanco en claro */
    body.theme-light .comment-form {
        background: #ffffff;
        border-color: rgba(249, 31, 176, 0.2);
    }

    /* Bloques en blanco en modo claro */
    body.theme-light .section,
    body.theme-light .comment-form,
    body.theme-light .related-card {
        background:#ffffff;
        border:1px solid rgba(40,10,70,0.10);
        box-shadow:0 12px 28px rgba(0,0,0,0.10);
    }

    /* Texto suavizado en claro */
    body.theme-light .artist,
    body.theme-light .comment-login-hint,
    body.theme-light .related-artist,
    body.theme-light .site-footer {
        color:#7a6a9a;
    }

    /* Iconos circulares más suaves en claro */
    body.theme-light .icon-circle {
        background:radial-gradient(circle at top,#ffe2ff,#e5dafd);
        border-color:rgba(249,31,176,0.35);
        box-shadow:0 0 12px rgba(0,0,0,0.15);
    }
    /* Texto de los iconos legible en modo claro */
    body.theme-light .icon-btn,
    body.theme-light .icon-label,
    body.theme-light .icon-group-title {
        color: #3b2a60;
    }

    a{color:var(--accent-strong);text-decoration:none;}
    a:hover{text-decoration:underline;}

    /* CONTENIDO */
    .wrapper{
        max-width:900px;
        margin:auto;
        padding:40px 18px 60px;
    }

    .song-header{
        display:flex;
        flex-wrap:wrap;
        gap:25px;
        align-items:flex-start;
    }

    .cover{
        flex:0 0 260px;
        border-radius:var(--radius-lg);
        overflow:hidden;
        box-shadow:0 12px 40px rgba(249,31,176,0.55);
        border:1px solid var(--accent-soft);
        background: rgba(255,255,255,0.04);  /* sutil en modo oscuro */
        padding: 12px;
    }

    body.theme-light .cover{
    background: #fff;
    }

    .cover img{width:100%;display:block;}

    .info{
        flex:1;
        min-width:240px;
    }

    .title{
        font-size:32px;
        font-weight:800;
        margin:0;
        line-height:1.2;
    }

    .artist{
        font-size:18px;
        color:var(--text-muted);
        margin-top:8px;
    }

    .badges{
        margin-top:14px;
        display:flex;
        gap:10px;
        flex-wrap:wrap;
    }

    .badge{
        padding:6px 14px;
        border-radius:var(--radius-pill);
        background:var(--bg-card);
        border:1px solid var(--accent-soft);
        color:var(--accent-strong);
        font-size:12px;
    }

    /* Barra de iconos */
    .icon-actions{
        margin-top:16px;
        display:flex;
        flex-direction:column;
        gap:14px;
    }
    .icon-group{
        display:flex;
        flex-direction:column;
        gap:6px;
    }
    .icon-group-title{
        font-size:11px;
        text-transform:uppercase;
        letter-spacing:.18em;
        color:var(--text-muted);
    }

    /* Fila de iconos: mismo comportamiento para acciones y compartir */
    .icon-row,
    .icon-row-actions,
    .icon-row-share{
        display:flex;
        column-gap: 0px;   /* más juntos en horizontal */
        row-gap: 20px;      /* separación cómoda en vertical */
        justify-content:flex-start;
        flex-wrap:nowrap;
    }

    /* Cada botón de icono ocupa el mismo ancho → todo alineado */
    .icon-btn{
        background:none;
        border:none;
        padding:0;
        cursor:pointer;
        color:var(--text-main);
        font-size:12px;
        text-align:center;
        text-decoration:none;

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;
        width:80px;         /* ancho fijo para todos los iconos */
    }
    .icon-btn:focus{outline:none;}

    .icon-circle{
        width:48px;
        height:48px;
        border-radius:50%;
        margin:0 auto 4px;
        display:flex;
        align-items:center;
        justify-content:center;
        background:radial-gradient(circle at top,rgba(10,0,25,0.95),rgba(0,0,0,0.95));
        border:1px solid rgba(249,31,176,0.9);
        box-shadow:0 0 16px rgba(249,31,176,0.8);
        transition:transform .15s ease, box-shadow .15s ease;
    }
    .icon-circle img{
        width:28px;
        height:28px;
        object-fit:contain;
        filter:drop-shadow(0 0 3px rgba(0,0,0,0.9));
    }
    .icon-btn:hover .icon-circle{
        transform:translateY(-1px) scale(1.05);
        box-shadow:0 0 20px rgba(255,80,210,0.95);
    }
    .icon-label{
        display:block;
        margin-top:2px;
        font-size:11px;
        letter-spacing:.03em;
    }
    .icon-btn-active .icon-circle{
        background:radial-gradient(circle at top,rgba(249,31,176,0.9),rgba(40,0,40,0.98));
        box-shadow:0 0 22px rgba(255,120,230,1);
    }
    .icon-btn-active .icon-label{
        color:#ff8de6;
    }
    @media (max-width: 480px){
    .icon-row,
    .icon-row-actions,
    .icon-row-share{
        flex-wrap:wrap;
    }
}

    .video-btn{
        display:inline-block;
        margin-top:18px;
        background:var(--accent);
        padding:12px 22px;
        border-radius:var(--radius-pill);
        font-size:14px;
        color:white;
        box-shadow:0 0 15px var(--accent);
        transition:.2s;
    }
    .video-btn:hover{
        background:var(--accent-strong);
        box-shadow:0 0 25px var(--accent-strong);
    }

    .section{
        margin-top:40px;
        padding:20px;
        background:rgba(12,0,20,0.9);
        border-radius:var(--radius-lg);
        border:1px solid var(--border-subtle);
        box-shadow:var(--shadow-soft);
    }

    /* === DESPLEGABLE DETALLES DEL VINILO (animado) === */
    #vinyl-details{
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .35s ease, opacity .25s ease;
    }

    #vinyl-details.is-open{
    max-height: 9999px; /* suficiente */
    opacity: 1;
    }

    .section h2{
        margin-top:0;
        color:var(--accent-strong);
        text-shadow:0 0 8px var(--accent);
    }

    .data-table{
        font-size:14px;
        margin-top:18px;
    }
    .data-table td{
        padding:6px 0;
        color:var(--text-muted);
    }
    .data-table td.label{
        width:140px;
        color:var(--accent-strong);
    }

    .video-wrapper{
        margin-top:16px;
        position:relative;
        padding-bottom:56.25%;
        height:0;
        overflow:hidden;
        border-radius:var(--radius-lg);
        box-shadow:var(--shadow-soft);
    }
    .video-wrapper iframe{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        border:0;
    }

    .credits-list{
        margin:10px 0 0;
        padding-left:18px;
        font-size:13px;
        line-height:1.5;
        color:#d9c7ff;
    }
    .credits-list li{margin-bottom:2px;}

    .id-table{
        width:100%;
        border-collapse:collapse;
        margin-top:8px;
        font-size:13px;
    }
    .id-table th,
    .id-table td{
        padding:4px 6px;
        border-bottom:1px solid rgba(255,255,255,0.06);
        text-align:left;
    }
    .id-table th{
        width:120px;
        color:var(--text-muted);
        font-weight:500;
    }

    .discogs-gallery{
        margin-top:10px;
        display:flex;
        flex-wrap:wrap;
        gap:10px;
    }
    .discogs-thumb{
        width:90px;
        height:90px;
        border-radius:12px;
        overflow:hidden;
        background:#000;
        box-shadow:0 10px 22px rgba(0,0,0,0.8);
    }
    .discogs-thumb img{
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
    }

    /* COMENTARIOS */
    .comment-form{
        margin-bottom:18px;
        background:radial-gradient(circle at top,rgba(249,31,176,0.15),rgba(0,0,0,0.86));
        border-radius:14px;
        padding:12px 12px 10px;
        border:1px solid rgba(249,31,176,0.35);
    }
    .comment-label{
        display:block;
        font-size:12px;
        margin-bottom:6px;
        color:rgba(255,255,255,0.8);
    }
    .comment-textarea{
        width:100%;
        min-height:72px;
        resize:vertical;
        border-radius:10px;
        border:1px solid rgba(255,255,255,0.22);
        background:rgba(0,0,0,0.7);
        color:#fff;
        padding:7px 9px;
        font-size:13px;
        font-family:inherit;
        box-sizing:border-box;
    }
    .comment-textarea:focus{
        outline:none;
        border-color:#f91fb0;
        box-shadow:0 0 0 1px rgba(249,31,176,0.5);
    }
    .comment-button{
        margin-top:8px;
        border:none;
        border-radius:999px;
        padding:7px 14px;
        font-size:12px;
        cursor:pointer;
        background:linear-gradient(135deg,#f91fb0,#ff5fd7);
        color:#fff;
        font-weight:600;
        box-shadow:0 10px 24px rgba(0,0,0,0.9);
    }
    .comment-button:hover{
        transform:translateY(-1px);
    }
    .comment-login-hint{
        font-size:12px;
        color:rgba(255,255,255,0.75);
    }
    .comment-login-hint a{
        color:#ffd3fb;
        text-decoration:none;
    }
    .comments-list{
        display:flex;
        flex-direction:column;
        gap:10px;
        margin-top:8px;
    }
    .comment-item{
        background:rgba(0,0,0,0.6);
        border-radius:12px;
        padding:9px 10px 8px;
        border:1px solid rgba(255,255,255,0.08);
    }
    .comment-meta{
        display:flex;
        justify-content:space-between;
        align-items:center;
        font-size:11px;
        margin-bottom:4px;
        color:rgba(255,255,255,0.7);
    }
    .comment-author{
        font-weight:600;
        color:#ffd3fb;
    }
    .comment-date{font-size:10px;}
    .comment-text{
        font-size:13px;
        line-height:1.4;
    }
    .comment-empty{
        font-size:12px;
        color:rgba(255,255,255,0.7);
        margin-top:6px;
    }

    /* CANCIONES RELACIONADAS */
    .related-section{margin-top:20px;}
    .related-grid{
        margin-top:10px;
        display:grid;
        grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
        gap:14px;
    }
    .related-card{
        background:radial-gradient(circle at top,rgba(249,31,176,0.16),rgba(3,0,10,0.96));
        border-radius:14px;
        padding:8px;
        border:1px solid rgba(255,255,255,0.05);
        box-shadow:0 12px 26px rgba(0,0,0,0.9);
        text-decoration:none;
        color:inherit;
        transition:all .2s ease;
    }
    .related-card:hover{
        transform:translateY(-2px);
        border-color:rgba(249,31,176,0.7);
        box-shadow:0 18px 36px rgba(0,0,0,0.95);
    }
    .related-cover-wrap img{
        width:100%;
        height:120px;
        object-fit:cover;
        border-radius:10px;
    }
    .related-title{
        margin-top:6px;
        font-weight:600;
        font-size:13px;
    }
    .related-artist{
        font-size:11px;
        color:rgba(255,255,255,0.75);
    }
    .related-year{
        font-size:10px;
        margin-top:2px;
        color:rgba(255,255,255,0.55);
    }

    /* FOOTER como en index */
    .site-footer {
        margin-top: 40px;
        padding-top: 14px;
        border-top: 1px solid var(--border-subtle);
        font-size: 11px;
        color: var(--text-muted);
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }
    .site-footer a{
        color:var(--text-muted);
        text-decoration:none;
    }
    .site-footer a:hover{
        color:#ffffff;
        text-decoration:underline;
    }
    .footer-links span{
        margin:0 4px;
    }
    @media (max-width:600px){
        .site-footer{
            flex-direction:column;
            align-items:flex-start;
        }

    }
    /* Botón de mostrar/ocultar detalles del vinilo */
    .toggle-details-btn {
        display: inline-block;
        margin-top: 18px;
        background: var(--accent);
        padding: 12px 22px;
        border-radius: var(--radius-pill);
        font-size: 14px;
        color: white;
        font-weight: 600;
        box-shadow: 0 0 15px var(--accent);
        border: none;
        cursor: pointer;
        transition: .2s;
    }

    .toggle-details-btn:hover {
        background: var(--accent-strong);
        box-shadow: 0 0 25px var(--accent-strong);
        transform: translateY(-1px);
    }
    .comment-with-avatar{
    display:flex;
    gap:12px;
    align-items:flex-start;
    }

    .comment-avatar{
        width:42px;
        height:42px;
        border-radius:50%;
        overflow:hidden;
        flex-shrink:0;
        border:1px solid rgba(249,31,176,0.6);
        box-shadow:0 0 8px rgba(249,31,176,0.6);
        background:#000;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .comment-avatar img{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .comment-avatar-placeholder{
        font-size:18px;
        color:#ffd3fb;
    }

    .comment-body{
        flex:1;
    }

.profile-avatar-wrap img{
    width:96px;
    height:96px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid rgba(249,31,176,0.8);
    box-shadow:0 0 18px rgba(249,31,176,0.9);
    background:#000;
}
/* === POP-UP PERFIL DE USUARIO EN COMENTARIOS === */

.user-popup-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.75);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    padding:16px;
}

.user-popup-card{
    max-width:360px;
    width:100%;
    border-radius:20px;
    background:radial-gradient(circle at top,rgba(249,31,176,0.26),rgba(3,0,15,0.98));
    border:1px solid rgba(249,31,176,0.55);
    box-shadow:
        0 18px 40px rgba(0,0,0,0.95),
        0 0 24px rgba(249,31,176,0.9);
    padding:18px 18px 16px;
    color:#fff;
    position:relative;
}

body.theme-light .user-popup-card{
    background:#ffffff;
    border:1px solid rgba(40,10,70,0.15);
    box-shadow:0 18px 40px rgba(0,0,0,0.10);
    color:#1c0f33;
}

.user-popup-close{
    position:absolute;
    top:8px;
    right:10px;
    border:none;
    background:transparent;
    color:#fff;
    cursor:pointer;
    font-size:18px;
}
body.theme-light .user-popup-close{color:#555;}

.user-popup-header{
    display:flex;
    gap:14px;
    align-items:center;
    margin-bottom:10px;
}

.user-popup-avatar-big{
    width:70px;
    height:70px;
    border-radius:50%;
    overflow:hidden;
    border:2px solid rgba(249,31,176,0.8);
    box-shadow:0 0 16px rgba(249,31,176,0.7);
    background:#000;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
}
.user-popup-avatar-big img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.user-popup-avatar-placeholder{
    font-size:30px;
}

.user-popup-title{
    font-size:16px;
    font-weight:700;
}
.user-popup-sub{
    font-size:12px;
    opacity:0.8;
    margin-top:2px;
}

.user-popup-section-title{
    margin:8px 0 4px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:#ffd3fb;
}
body.theme-light .user-popup-section-title{
    color:#b0117a;
}

.user-popup-about{
    font-size:13px;
    line-height:1.5;
}

.user-popup-stats{
    margin-top:6px;
    font-size:12px;
    display:flex;
    flex-wrap:wrap;
    gap:8px 14px;
}

.user-popup-stat-pill{
    padding:3px 9px;
    border-radius:999px;
    border:1px solid rgba(249,31,176,0.6);
    font-size:11px;
}
body.theme-light .user-popup-stat-pill{
    border-color:rgba(40,10,70,0.18);
}

.user-popup-footer{
    margin-top:10px;
    font-size:11px;
    opacity:0.85;
}

/* === WALLPAPER DISCO (solo en cancion.php) === */
.song-wallpaper{
    position: relative;
    isolation: isolate; /* asegura que el pseudo-elemento no se mezcle raro */
}

.song-wallpaper::before{
    content:"";
    position:absolute;
    inset:-40px;                 /* se sale un poco para que el blur no corte */
    z-index:-1;

    /* Fondo por variable CSS (se rellena desde PHP) */
    background:
        radial-gradient(circle at top, rgba(249,31,176,0.18), rgba(0,0,0,0.95) 60%),
        var(--song-bg, none);
    background-size: cover;
    background-position: center;

    filter: blur(32px) saturate(0.85);
    opacity: 0.45;               /* clave: sutil */
}

/* En móvil, más suave para que no cargue ni distraiga */
@media (max-width: 600px){
    .song-wallpaper::before{
        filter: blur(26px) saturate(0.8);
        opacity: 0.30;
    }
}
/* ===== Release protagonista + tracklist ===== */
.release-pro{ margin-top:18px; }
.release-hero{
  display:flex; gap:14px; align-items:center;
  padding:14px; border-radius:18px;
  background: rgba(0,0,0,0.20);
  border:1px solid rgba(249,31,176,0.25);
}
body.theme-light .release-hero{
  background:#ffffff;
  border:1px solid rgba(40,10,70,0.12);
}

.release-cover{
  width:92px; height:92px; border-radius:16px;
  overflow:hidden; background:#000; flex:0 0 auto;
  border:1px solid rgba(255,255,255,0.08);
}
.release-cover img{ width:100%; height:100%; object-fit:cover; display:block; }

.release-kicker{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-muted);
}

.release-title{
  font-size:16px; font-weight:800; margin-top:4px; line-height:1.2;
}

.release-meta{
  margin-top:4px; font-size:12px; color:var(--text-muted);
}

.release-actions{
  margin-top:8px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}

.btn-release{
  border:none; border-radius:999px; padding:8px 14px;
  background:linear-gradient(90deg,#f91fb0,#ff4fd0);
  color:#fff; font-weight:800; cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,0.55);
}
.btn-release:hover{ transform:translateY(-1px); }

.release-status{ font-size:12px; color:var(--text-muted); }

.release-player{
  margin-top:10px; padding:12px; border-radius:18px;
  background: rgba(0,0,0,0.12);
  border:1px solid rgba(255,255,255,0.08);
}
body.theme-light .release-player{
  background:#ffffff;
  border:1px solid rgba(40,10,70,0.10);
}

.rel-trk{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:14px;
  background: rgba(0,0,0,0.10);
  border:1px solid transparent;
  margin-top:8px;
}
body.theme-light .rel-trk{ background:#ffffff; border:1px solid rgba(40,10,70,0.10); }

.rel-trk.is-active{
  border-color: rgba(249,31,176,0.55);
  background: rgba(249,31,176,0.12);
}

.rel-trk-left{ display:flex; gap:10px; min-width:0; }
.rel-n{ width:26px; color:var(--text-muted); }
.rel-t{ min-width:0; overflow-wrap:break-word; }

.rel-trk-right{ display:flex; align-items:center; gap:10px; }
.trk-ok{ width:18px; height:18px; object-fit:contain; } /* color original */
.trk-no{ opacity:.75; }
.trk-wait{ opacity:.55; }

.rel-play{
  border:1px solid rgba(249,31,176,0.45);
  background: rgba(249,31,176,0.10);
  color: var(--accent-strong);
  border-radius:999px;
  padding:6px 10px;
  cursor:pointer;
  font-weight:800;
}
.rel-play:disabled{ opacity:.35; cursor:not-allowed; }
.vinyl-toggle{
  width:100%;
  margin-top:10px;
  border-radius:14px;
  padding:10px 12px;
  border:1px solid rgba(249,31,176,0.35);
  background: rgba(0,0,0,0.30);
  color: var(--text-main);
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.55);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.vinyl-toggle:hover{
  transform: translateY(-1px);
  background: rgba(249,31,176,0.12);
  box-shadow: 0 14px 28px rgba(0,0,0,0.70);
}
.vinyl-toggle-ico{ filter: drop-shadow(0 0 6px rgba(249,31,176,0.6)); }

body.theme-light .vinyl-toggle{
  background:#ffffff;
  color:#1c0f33;
  border:1px solid rgba(40,10,70,0.12);
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}

body.theme-light .vinyl-toggle:hover{
  background: rgba(249,31,176,0.08);
}

.badge-toggle{
  width:100%;
  justify-content:center;
  display:flex;
  align-items:center;
  gap:8px;

  margin-top:10px;
  cursor:pointer;

  background: transparent;          /* 🔥 CLAVE */
  border:1px solid rgba(249,31,176,0.35);
  color: var(--accent-strong);
}

/* El botón de debajo de la portada NO debe heredar el fondo negro del badge */
.badge.badge-toggle{
  background: transparent !important;
  border: 1px solid rgba(249,31,176,0.35);
  color: var(--accent-strong);
  box-shadow: none;
}

.badge-toggle:hover{
  background: rgba(249,31,176,0.12);
  border-color: rgba(249,31,176,0.55);
  box-shadow: 0 0 14px rgba(249,31,176,0.25);
}

body.theme-light .badge-toggle{
  background:#fff;
}
.temazo-pill{
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 10px;

  background: radial-gradient(circle at top, rgba(249,31,176,0.18), rgba(0,0,0,0.55));
  border: 1px solid rgba(249,31,176,0.35);
  box-shadow: 0 0 18px rgba(249,31,176,0.18);
}

.temazo-pill-ico{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;

  /* 🔥 CLAVE */
  background: radial-gradient(circle at top,
    rgba(0,0,0,0.95),
    rgba(20,0,20,0.95)
  );

  border: 1px solid rgba(249,31,176,0.6);
  box-shadow:
    0 0 10px rgba(249,31,176,0.6),
    inset 0 0 6px rgba(0,0,0,0.9);
}

.temazo-pill-txt{
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.2;
}

.temazo-label{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--text-muted);
  margin-bottom:2px;
}

.temazo-pill-txt strong{
  font-size:14px;
  font-weight:800;
  color:#ffffff;
  text-shadow:0 0 12px rgba(249,31,176,0.45);
}

.temazo-pill-txt strong,
.temazo-pill--lyrics strong {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.015em;
  font-size: 15px;
  color: #ffffff;
}

/* Caja para la letra: separa y se lee muchísimo mejor */
.section-lyrics{ padding: 18px; } /* un pelín menos que 20 si quieres */

.lyrics-box{
  margin: 10px 0 0;
  padding: 10px 12px;     /* menos padding = menos “tab” */
  border-radius: 14px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);

  /* CLAVE: compacto */
  font-family: inherit;
  font-size: 17px;
  line-height: 1.15;      /* 👈 aquí vuelve a “junto” */
  white-space: pre-wrap;  /* respeta saltos tal cual */
  text-indent: 0;
}

.lyrics-box *{
  margin: 0 !important;  /* quita márgenes si hay <p> o similares */
  padding: 0 !important;
  text-indent: 0 !important;
}

/* Modo claro */
body.theme-light .temazo-pill{
  background: #ffffff;
  border: 1px solid rgba(40,10,70,0.12);
  box-shadow: 0 12px 26px rgba(0,0,0,0.08);
}
body.theme-light .temazo-pill-txt strong{
  color: #1c0f33;
  text-shadow: none;
}
body.theme-light .lyrics-box{
  background: #ffffff;
  border: 1px solid rgba(40,10,70,0.10);
  color: #1c0f33;
}
.temazo-pill-ico img{
  width: 22px;
  height: 22px;
  object-fit: contain;
  /* 🔥 MÁS CONTRASTE */
  filter:
    brightness(1.2)
    drop-shadow(0 0 6px rgba(249,31,176,0.9));
}
/* ===== Icono del pill: por defecto (modo oscuro) ===== */
.temazo-pill-ico{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;

  background: radial-gradient(circle at top,
    rgba(0,0,0,0.95),
    rgba(20,0,20,0.95)
  );

  border: 1px solid rgba(249,31,176,0.6);
  box-shadow:
    0 0 10px rgba(249,31,176,0.6),
    inset 0 0 6px rgba(0,0,0,0.9);
}

.temazo-pill-ico img{
  width:20px;
  height:20px;
  object-fit:contain;
  filter: brightness(1.2) drop-shadow(0 0 6px rgba(249,31,176,0.9));
}

/* ===== MODO CLARO: NO negro, sino blanco/lila suave ===== */
body.theme-light .temazo-pill-ico{
  background: radial-gradient(circle at top,
    #ffffff,
    #f3e9ff
  );
  border: 1px solid rgba(249,31,176,0.35);
  box-shadow:
    0 10px 22px rgba(0,0,0,0.08),
    0 0 10px rgba(249,31,176,0.18);
}

body.theme-light .temazo-pill-ico img{
  filter: drop-shadow(0 0 4px rgba(249,31,176,0.35));
}
/* === LIGHTBOX ZOOM COVER === */
.cover-zoomable, .release-zoomable{
  cursor: zoom-in;
}

.img-lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.82);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 18px;
}

.img-lightbox.is-open{
  display: flex;
}

.img-lightbox-card{
  position: relative;
  max-width: min(900px, 92vw);
  max-height: 86vh;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(249,31,176,0.45);
  box-shadow: 0 24px 70px rgba(0,0,0,0.9), 0 0 28px rgba(249,31,176,0.45);
  background: rgba(0,0,0,0.4);
}

.img-lightbox-card img{
  display:block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.img-lightbox-close{
  position:absolute;
  top: 10px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(249,31,176,0.55);
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}

.img-lightbox-close:hover{
  transform: translateY(-1px);
}

body.theme-light .img-lightbox{
  background: rgba(0,0,0,0.70);
}


    /* Tracklist: botón Mi lista por pista (más visible) */
    .track-fav-btn{
        display:inline-flex;
        align-items:center;
        gap:8px;
        padding:7px 12px;
        border-radius:999px;
        border:1px solid rgba(255,255,255,0.12);
        background:rgba(0,0,0,0.25);
        color:rgba(255,255,255,0.85);
        cursor:pointer;
        font-size:12px;
        transition:all .18s ease;
        white-space:nowrap;
    }
    .track-fav-btn .icon{
        width:18px;
        height:18px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        font-weight:800;
    }
    .track-fav-btn.is-on{
        background:rgba(249,31,176,0.18);
        border-color:rgba(249,31,176,0.55);
        color:#ffd3fb;
        box-shadow:0 0 0 1px rgba(249,31,176,0.10), 0 10px 26px rgba(0,0,0,0.35);
    }
    .track-fav-btn:hover{ transform:translateY(-1px); }

    /* Tracklist: resaltar fila si está en la lista */
    .rel-trk.is-fav{
        background:rgba(249,31,176,0.06);
        box-shadow: inset 0 0 0 1px rgba(249,31,176,0.18);
        border-radius:14px;
    }

    /* Modal selector de pista (botón genérico Mi lista) */
    .trk-modal-backdrop{
        position:fixed; inset:0;
        background:rgba(0,0,0,0.55);
        display:none;
        align-items:center;
        justify-content:center;
        z-index:9999;
        padding:18px;
    }
    .trk-modal{
        width:min(720px, 96vw);
        max-height:82vh;
        overflow:auto;
        border-radius:18px;
        background:radial-gradient(circle at top,#250032,#050007);
        border:1px solid rgba(255,255,255,0.10);
        box-shadow:0 16px 40px rgba(0,0,0,0.85);
        padding:16px 16px 12px;
    }
    .trk-modal-head{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:12px;
        margin-bottom:10px;
    }
    .trk-modal-title{
        font-weight:800;
        letter-spacing:0.02em;
        font-size:15px;
        margin:0;
    }
    .trk-modal-sub{
        margin-top:4px;
        font-size:12px;
        color:rgba(255,255,255,0.65);
    }
    .trk-modal-close{
        border:none;
        background:rgba(255,255,255,0.08);
        color:#fff;
        border-radius:999px;
        padding:8px 12px;
        cursor:pointer;
    }
    .trk-modal-list .rel-trk{ margin-bottom:10px; }
    body.theme-light .trk-modal{
        background:#ffffff;
        border:1px solid rgba(40,10,70,0.12);
        box-shadow:0 16px 34px rgba(0,0,0,0.18);
        color:#1c0f33;
    }
    body.theme-light .trk-modal-sub{ color:#7a6a9a; }
    body.theme-light .trk-modal-close{ background:#f3ecff; color:#2b1038; }
    body.theme-light .track-fav-btn{
        background:#ffffff;
        border-color:rgba(40,10,70,0.18);
        color:#261238;
    }
    body.theme-light .track-fav-btn.is-on{
        background:#ffe9fb;
        border-color:rgba(249,31,176,0.55);
        color:#7a2b70;
    }
    body.theme-light .rel-trk.is-fav{
        background:rgba(249,31,176,0.08);
        box-shadow: inset 0 0 0 1px rgba(249,31,176,0.20);
    }

    /* Toast (feedback inmediato) */
    .tr-toast{
        position:fixed;
        left:50%;
        bottom:22px;
        transform:translateX(-50%);
        width:min(520px, calc(100vw - 28px));
        border-radius:16px;
        padding:12px 14px;
        display:none;
        align-items:flex-start;
        gap:10px;
        z-index:10000;
        background:rgba(5,0,12,0.92);
        border:1px solid rgba(255,255,255,0.12);
        box-shadow:0 18px 48px rgba(0,0,0,0.75);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    .tr-toast.show{ display:flex; }
    .tr-toast-icon{
        width:34px;
        height:34px;
        border-radius:12px;
        display:flex;
        align-items:center;
        justify-content:center;
        font-weight:900;
        background:rgba(255,255,255,0.08);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
        flex:0 0 auto;
    }
    .tr-toast.ok .tr-toast-icon{
        background:rgba(249,31,176,0.18);
        box-shadow: inset 0 0 0 1px rgba(249,31,176,0.35);
        color:#ffd3fb;
    }
    .tr-toast.err .tr-toast-icon{
        background:rgba(255,90,90,0.12);
        box-shadow: inset 0 0 0 1px rgba(255,90,90,0.30);
        color:#ffd0d0;
    }
    .tr-toast-text{
        flex:1;
        min-width:0;
    }
    .tr-toast-title{
        font-weight:800;
        font-size:13px;
        margin:0;
        line-height:1.2;
        letter-spacing:0.02em;
    }
    .tr-toast-sub{
        margin-top:3px;
        font-size:12px;
        color:rgba(255,255,255,0.70);
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    body.theme-light .tr-toast{
        background:rgba(255,255,255,0.96);
        border:1px solid rgba(40,10,70,0.14);
        box-shadow:0 16px 40px rgba(0,0,0,0.18);
    }
    body.theme-light .tr-toast-sub{ color:#7a6a9a; }

    .section-video h2,
    .section-lyrics h2{
        margin-bottom:14px;
    }
    .lyric-request-card,
    .flash-message{
        border-radius:8px;
        border:1px solid rgba(34,231,255,.22);
        background:
            linear-gradient(135deg, rgba(34,231,255,.075), rgba(249,31,176,.08)),
            rgba(0,0,0,.24);
    }
    .flash-message{
        margin-bottom:12px;
        padding:12px 14px;
        color:#dffbff;
        font-weight:850;
    }
    .lyric-request-card{
        padding:16px;
    }
    .lyric-request-card p{
        margin:0 0 14px;
        color:#d8ccf1;
        font-size:15px;
        line-height:1.45;
    }
    .lyric-request-form{
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        gap:14px;
        align-items:end;
    }
    .lyric-request-form label{
        display:block;
        margin-bottom:7px;
        color:#fff;
        font-size:12px;
        font-weight:900;
        text-transform:uppercase;
    }
    .lyric-request-form input{
        width:100%;
        min-height:42px;
        padding:0 12px;
        border-radius:8px;
        border:1px solid rgba(255,255,255,.13);
        background:rgba(0,0,0,.36);
        color:#fff;
        font:inherit;
    }
    .lyric-request-note{
        min-height:42px;
        display:flex;
        align-items:center;
        color:#d8ccf1;
        font-size:13px;
    }
    @media (max-width:720px){
        .lyric-request-form{
            grid-template-columns:1fr;
        }
    }