/* ============================================================
   VnY SITE ARTIST — mejoras de la pagina /artistas/{slug}/
   ============================================================ */

/* ---------- Hero (cover + overlay + content) ---------- */
body:not(.admin-body) .artist-img-container {
    border-radius: 18px !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.55) !important;
    border: 1px solid var(--site-border-2) !important;
    margin-bottom: 24px !important;
    position: relative;
    max-height: 520px !important;
}

body:not(.admin-body) .artist-img-container .artist-img-content {
    padding: 60px 32px 28px !important;
}
body:not(.admin-body) .artist-img-container .artist-img-story {
    font-size: 16px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,.92) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.8) !important;
    letter-spacing: 0 !important;
    margin: 0;
}

/* ---------- Title row (nombre + share) ---------- */
body:not(.admin-body) .artist-header .title-share-row .main-title-disc {
    font-family: var(--font-display) !important;
    letter-spacing: 1.5px !important;
}
body:not(.admin-body) .artist-header .title-share-row .main-title-disc .title-subtitle {
    color: var(--site-accent) !important;
    font-size: .55em !important;
    letter-spacing: 1px !important;
}

/* ---------- Redes sociales del artista (refinado) ----------
   Mantiene la distribución flex:1 (full-width) que ya estaba.
   Cambia el look de blanco plano a oscuro tipo design-system con icono accent. */
body:not(.admin-body) .artist-buttons-container {
    gap: 10px !important;
    margin-bottom: 32px !important;
}
body:not(.admin-body) .artist-button {
    background: var(--site-surface) !important;
    border: 1px solid var(--site-border-2) !important;
    color: var(--site-text) !important;
    font-family: var(--font-body) !important;
    font-size: 12.5px !important;
    font-weight: var(--fw-bold) !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    padding: 10px 12px !important;
    border-radius: var(--radius-md) !important;
    gap: 9px !important;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease) !important;
}
body:not(.admin-body) .artist-button i {
    font-size: 15px !important;
    color: var(--site-accent) !important;
    transition: color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}
body:not(.admin-body) .artist-button:hover {
    background: rgba(var(--site-accent-rgb), .08) !important;
    border-color: var(--site-accent) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.35),
                0 0 0 1px rgba(var(--site-accent-rgb), .35);
}
body:not(.admin-body) .artist-button:hover i {
    transform: scale(1.08);
}

/* Mobile: iconos circulares de ancho fijo, centrados como grupo */
@media (max-width: 768px) {
    body:not(.admin-body) .artist-buttons-container {
        gap: 12px !important;
        justify-content: center !important;
        align-items: center !important;
        overflow-x: visible !important;
        flex-wrap: nowrap !important;
        padding: 0 !important;
    }
    body:not(.admin-body) .artist-button {
        position: relative !important;
        flex: 0 0 auto !important;
        width: 50px !important;
        height: 50px !important;
        min-width: 0 !important;
        background: var(--site-surface) !important;
        border: 1px solid var(--site-border-2) !important;
        border-radius: 50% !important;
        padding: 0 !important;
        font-size: 0 !important;
        gap: 0 !important;
        display: inline-block !important;
    }
    /* Icono perfectamente centrado dentro del circulo: absolute + translate.
       Evita que el text-node " Facebook" hermano descuadre el centrado flex. */
    body:not(.admin-body) .artist-button i {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        font-size: 20px !important;
        color: var(--site-accent) !important;
        margin: 0 !important;
        line-height: 1 !important;
        width: auto !important;
        height: auto !important;
        text-align: center !important;
    }
    body:not(.admin-body) .artist-button:hover i {
        transform: translate(-50%, -50%) scale(1.08) !important;
    }
    body:not(.admin-body) .artist-button:hover {
        transform: translateY(-1px);
    }
}
@media (max-width: 480px) {
    body:not(.admin-body) .artist-buttons-container { gap: 10px !important; }
    body:not(.admin-body) .artist-button {
        width: 46px !important;
        height: 46px !important;
    }
    body:not(.admin-body) .artist-button i { font-size: 18px !important; }
}
@media (max-width: 380px) {
    body:not(.admin-body) .artist-buttons-container { gap: 8px !important; }
    body:not(.admin-body) .artist-button { width: 42px !important; height: 42px !important; }
    body:not(.admin-body) .artist-button i { font-size: 16px !important; }
}

/* ---------- Quick info chips + search inline a la derecha ---------- */
.artist-quickinfo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
}
.artist-quickinfo .site-chip {
    background: var(--site-surface) !important;
    border: 1px solid var(--site-border) !important;
    color: var(--site-text) !important;
    font-size: 12px !important;
    padding: 6px 14px !important;
    text-decoration: none !important;
    font-weight: var(--fw-bold) !important;
}
.artist-quickinfo .site-chip i {
    color: var(--site-accent);
    margin-right: 6px;
    font-size: 12px;
}
.artist-quickinfo .site-chip strong {
    color: var(--site-accent);
    font-family: var(--font-display);
    margin-right: 4px;
    font-size: 13px;
}
/* Buscador inline al extremo derecho de la fila de chips */
.artist-quickinfo .artist-disco-search-inline {
    margin: 0 0 0 auto;
    max-width: 280px;
    flex: 0 1 280px;
}

/* ---------- Section titles MEJORADOS ----------
   Albums / Singles / Collabs / Tribute / Password / Videos
   Look "header de seccion" con barra + gradient underline + icon-area
*/
body:not(.admin-body) .discography-wrap > .main-title-disc,
body:not(.admin-body) .password-section > .main-title-disc,
body:not(.admin-body) .youtube-section > .main-title-disc {
    position: relative;
    font-family: var(--font-display) !important;
    font-size: 26px !important;
    font-weight: var(--fw-bold) !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    color: #fff !important;
    margin: 48px 0 28px !important;
    padding: 0 0 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
/* Línea barra accent vertical a la izquierda */
body:not(.admin-body) .discography-wrap > .main-title-disc::before,
body:not(.admin-body) .password-section > .main-title-disc::before,
body:not(.admin-body) .youtube-section > .main-title-disc::before {
    content: '';
    width: 5px;
    height: 28px;
    background: var(--site-accent);
    border-radius: 3px;
    box-shadow: 0 0 12px rgba(var(--site-accent-rgb), .55);
    flex-shrink: 0;
}
/* Underline degradado debajo del titulo - alineado a la izquierda */
body:not(.admin-body) .discography-wrap > .main-title-disc::after,
body:not(.admin-body) .password-section > .main-title-disc::after,
body:not(.admin-body) .youtube-section > .main-title-disc::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    height: 1px !important;
    margin: 0 !important;
    display: block !important;
    background: linear-gradient(90deg,
        var(--site-accent) 0%,
        rgba(var(--site-accent-rgb), .4) 30%,
        transparent 70%) !important;
}

/* ---------- Boton EDITAR flotante (solo admin) ----------
   Se posiciona FAB bottom-right, ENCIMA del back-to-top */
.site-edit-fab {
    position: fixed;
    right: 20px;
    bottom: 72px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--site-accent);
    color: var(--site-accent-text);
    border: none;
    cursor: pointer;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: var(--z-overlay);
    box-shadow: var(--shadow-md), 0 0 12px rgba(var(--site-accent-rgb), .35);
    transition: filter var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}
.site-edit-fab:hover {
    filter: brightness(1.15);
    transform: scale(1.05);
    color: var(--site-accent-text);
}
@media (max-width: 768px) {
    .site-edit-fab { right: 14px; bottom: 68px; width: 44px; height: 44px; }
}

/* ---------- TOP releases (card unificada: titulo + banner #1 + grid 9) ----------
   Estructura HTML:
   .artist-top-featured (card outer, relative, overflow hidden)
     .artist-top-featured-bg (absolute, blur del cover #1)
     .artist-top-featured-scrim (relative, contiene todo el contenido visible)
        .artist-top-featured-title
        .artist-top-featured-banner (anchor al #1)
        .artist-top-grid (9 thumbs #2-#10)
*/
.artist-top-featured {
    position: relative;
    margin: 20px 0 28px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--site-border-2);
    background: var(--site-surface);
    isolation: isolate;
}

/* Background blureado del cover #1, ocupa toda la card */
.artist-top-featured-bg {
    position: absolute;
    inset: -40px;
    background-position: center;
    background-size: cover;
    filter: blur(40px) saturate(120%);
    opacity: 0.45;
    z-index: 0;
}

/* Scrim: contenedor real de TODO el contenido. Aporta el gradient oscuro encima del blur. */
.artist-top-featured-scrim {
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg,
        rgba(0,0,0,.82) 0%,
        rgba(0,0,0,.7) 50%,
        rgba(0,0,0,.82) 100%);
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Titulo "Más descargados" general */
.artist-top-featured-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.7);
}
.artist-top-featured-title i {
    color: #ff8a00;
    font-size: 16px;
    filter: drop-shadow(0 0 8px rgba(255,138,0,.45));
}

/* === Banner del #1 === */
.artist-top-featured-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 16px;
    text-decoration: none;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.4);
    transition: transform var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease);
}
.artist-top-featured-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,.55);
    border-color: var(--site-accent);
    background: rgba(0,0,0,.55);
}

.artist-top-featured-badge {
    position: absolute;
    top: -10px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #ff8a00, #ffb800);
    color: #000;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 14px rgba(255,138,0,.45);
    z-index: 2;
}
.artist-top-featured-badge i { font-size: 11px; }

.artist-top-featured-cover {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 8px 24px rgba(0,0,0,.6);
    flex-shrink: 0;
    display: block;
}

.artist-top-featured-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.artist-top-featured-name {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: var(--fw-bold);
    color: #fff;
    letter-spacing: 0.5px;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.artist-top-featured-stats {
    color: rgba(255,255,255,.85);
    font-size: 13px;
    font-weight: 500;
    display: flex;
    gap: 14px;
    margin-bottom: 12px;
}
.artist-top-featured-stats i { color: var(--site-accent); margin-right: 4px; }
.artist-top-featured-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--site-accent);
    color: var(--site-accent-text);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    transition: filter var(--dur-fast) var(--ease);
}
.artist-top-featured-banner:hover .artist-top-featured-cta { filter: brightness(1.15); }
.artist-top-featured-cta i { font-size: 10px; }

/* === Grid de 9 thumbnails (#2-#10): cover por defecto, overlay con rank + nombre al hover ===
   Vive dentro del scrim, junto al banner. */
.artist-top-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 8px;
    width: 100%;
    margin: 0;
}
.artist-top-grid-item {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--site-border-2);
    text-decoration: none;
    background: var(--site-surface-2);
    transition: transform var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
.artist-top-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-base) var(--ease),
                filter var(--dur-fast) var(--ease);
}
.artist-top-grid-item:hover {
    border-color: var(--site-accent);
    box-shadow: 0 6px 16px rgba(0,0,0,.45),
                0 0 0 1px var(--site-accent);
    transform: translateY(-2px);
    z-index: 2;
}
.artist-top-grid-item:hover img {
    transform: scale(1.06);
    filter: brightness(.55);
}

/* Overlay con rank + nombre, aparece en hover */
.artist-top-grid-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: linear-gradient(180deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,.55) 60%,
        rgba(0,0,0,.85) 100%);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease);
    text-align: center;
    pointer-events: none;
}
.artist-top-grid-item:hover .artist-top-grid-overlay,
.artist-top-grid-item:focus-visible .artist-top-grid-overlay {
    opacity: 1;
}
.artist-top-grid-rank {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: var(--fw-bold);
    color: var(--site-accent);
    letter-spacing: 0.4px;
    text-shadow: 0 1px 4px rgba(0,0,0,.8);
    margin-bottom: 4px;
}
.artist-top-grid-name {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: var(--fw-bold);
    color: #fff;
    line-height: 1.25;
    text-shadow: 0 1px 4px rgba(0,0,0,.9);
    /* limitar a 3 lineas */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* Responsive grid */
@media (max-width: 1024px) {
    .artist-top-grid { grid-template-columns: repeat(6, 1fr); }
}
/* En mobile: pasa a fila horizontal con scroll para no ocupar 3 filas verticales */
@media (max-width: 768px) {
    .artist-top-grid {
        display: flex;
        grid-template-columns: none;
        gap: 6px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
        mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
    }
    .artist-top-grid::-webkit-scrollbar { display: none; }
    .artist-top-grid-item {
        flex: 0 0 64px;
        width: 64px;
        height: 64px;
        aspect-ratio: auto;
        scroll-snap-align: start;
    }
    .artist-top-grid-rank { font-size: 14px; margin-bottom: 2px; }
    .artist-top-grid-name { display: none; }
}
@media (max-width: 480px) {
    .artist-top-grid-item { flex-basis: 56px; width: 56px; height: 56px; }
}

/* En touch (sin hover real): mostrar rank como pill en esquina top-left.
   Mas limpio que overlay flotante centrado y siempre visible al usuario. */
@media (hover: none) and (pointer: coarse) {
    .artist-top-grid-overlay {
        opacity: 1;
        background: none;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 0;
    }
    .artist-top-grid-rank {
        margin: 0;
        padding: 3px 8px;
        font-size: 10.5px;
        line-height: 1;
        color: var(--site-accent);
        background: rgba(0, 0, 0, .82);
        border-bottom-right-radius: 8px;
        text-shadow: none;
        letter-spacing: 0.3px;
    }
    .artist-top-grid-name { display: none; }
}

/* Responsive — Banner + scrim COMPACTO en mobile.
   Objetivo: bloque pequeño para que no eclipse la discografía debajo. */
@media (max-width: 768px) {
    .artist-top-featured { margin: 14px 0 18px; }
    .artist-top-featured-scrim { padding: 10px 10px 12px; gap: 10px; }

    /* Titulo y banner en una sola fila visualmente "header de la card" */
    .artist-top-featured-title {
        font-size: 12.5px;
        letter-spacing: 1.2px;
        gap: 7px;
    }
    .artist-top-featured-title i { font-size: 12px; }

    /* Banner mini: cover chico + nombre 1 linea + 1 stat. CTA oculto. */
    .artist-top-featured-banner {
        gap: 10px;
        padding: 8px;
        align-items: center;
    }
    .artist-top-featured-cover {
        width: 56px;
        height: 56px;
        border-radius: 8px;
    }
    .artist-top-featured-badge {
        top: -7px;
        right: 8px;
        padding: 2px 8px;
        font-size: 9px;
        letter-spacing: .4px;
    }
    .artist-top-featured-badge i { font-size: 9px; }
    .artist-top-featured-info { gap: 2px; }
    .artist-top-featured-name {
        font-size: 13.5px;
        margin: 0;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .artist-top-featured-stats {
        font-size: 11px;
        gap: 8px;
        margin: 0;
        flex-wrap: nowrap;
        overflow: hidden;
    }
    .artist-top-featured-stats i { font-size: 10px; margin-right: 3px; }
    /* CTA fuera: todo el banner es link y el badge "#1" ya señala accion */
    .artist-top-featured-cta { display: none; }
}
@media (max-width: 480px) {
    .artist-top-featured { margin: 12px 0 16px; }
    .artist-top-featured-scrim { padding: 8px 8px 10px; gap: 8px; }
    .artist-top-featured-title { font-size: 11.5px; letter-spacing: 1px; }
    .artist-top-featured-banner { padding: 6px 8px; gap: 8px; }
    .artist-top-featured-cover { width: 48px; height: 48px; border-radius: 6px; }
    .artist-top-featured-badge {
        top: -6px;
        right: 6px;
        padding: 2px 7px;
        font-size: 8.5px;
    }
    .artist-top-featured-name { font-size: 12.5px; }
    .artist-top-featured-stats { font-size: 10.5px; gap: 6px; }
}

/* OLD chart compact - eliminado, mantener selector vacio por si queda cache */
.artist-top-chart { display: none; }
.artist-top-chart-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--site-text);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--site-border);
}
.artist-top-chart-header i { color: #ff8a00; font-size: 14px; }
.artist-top-chart-meta {
    margin-left: auto;
    color: var(--site-text-muted);
    font-size: 10.5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    font-weight: 500;
}

.artist-top-chart-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.artist-top-chart-item {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.artist-top-chart-item:last-child { border-bottom: none; }

.artist-top-chart-link {
    display: grid;
    grid-template-columns: 36px 48px 1fr 110px auto;
    align-items: center;
    gap: 14px;
    padding: 10px 6px;
    text-decoration: none;
    color: var(--site-text);
    border-radius: var(--radius-md);
    transition: background var(--dur-fast) var(--ease);
}
.artist-top-chart-link:hover {
    background: rgba(var(--site-accent-rgb), .06);
}

.artist-top-chart-rank {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: var(--fw-bold);
    color: var(--site-text-muted);
    letter-spacing: 0.5px;
    text-align: center;
}
.artist-top-chart-rank.is-first {
    color: #ff8a00;
    font-size: 16px;
    text-shadow: 0 0 12px rgba(255,138,0,.4);
}

.artist-top-chart-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--site-border-2);
    display: block;
}

.artist-top-chart-name {
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: var(--fw-bold);
    color: var(--site-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    transition: color var(--dur-fast) var(--ease);
}
.artist-top-chart-link:hover .artist-top-chart-name {
    color: var(--site-accent);
}

.artist-top-chart-bar {
    height: 6px;
    width: 100%;
    background: rgba(255,255,255,.05);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.artist-top-chart-bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--site-accent), var(--site-accent-2));
    border-radius: 3px;
    transition: width var(--dur-base) var(--ease),
                filter var(--dur-fast) var(--ease);
}
.artist-top-chart-link:hover .artist-top-chart-bar-fill {
    filter: brightness(1.2);
}

.artist-top-chart-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: var(--fw-bold);
    color: var(--site-text);
    justify-self: end;
    min-width: 70px;
    text-align: right;
}
.artist-top-chart-count i {
    font-size: 10px;
    color: var(--site-text-muted);
}

/* Responsive */
@media (max-width: 768px) {
    .artist-top-chart { padding: 12px; }
    .artist-top-chart-link {
        grid-template-columns: 28px 40px 1fr auto;
        gap: 10px;
        padding: 9px 4px;
    }
    /* Ocultar la barra de progreso en mobile para no apretar */
    .artist-top-chart-bar { display: none; }
    .artist-top-chart-thumb { width: 40px; height: 40px; }
    .artist-top-chart-name { font-size: 12.5px; }
    .artist-top-chart-rank { font-size: 13px; }
    .artist-top-chart-rank.is-first { font-size: 14px; }
    .artist-top-chart-count { min-width: 0; font-size: 11.5px; }
    .artist-top-chart-meta { font-size: 10px; }
}

/* Highlight pulse cuando llegas a un release via anchor */
@keyframes artist-release-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--site-accent-rgb), 0); }
    20%  { box-shadow: 0 0 0 4px rgba(var(--site-accent-rgb), .55), 0 0 24px rgba(var(--site-accent-rgb), .35); }
    100% { box-shadow: 0 0 0 0 rgba(var(--site-accent-rgb), 0); }
}
.album-card.is-target-highlight {
    animation: artist-release-pulse 1.6s ease-out;
    border-radius: var(--radius-md);
}
/* scroll-margin para que el card no quede tapado por header + toc */
.album-card[id^="release-"] {
    scroll-margin-top: calc(var(--site-header-h) + 80px);
}

@media (max-width: 768px) {
    .artist-top-row { padding: 12px 0; gap: 10px; }
    .artist-top-row-label { font-size: 11px; letter-spacing: 1.2px; margin-left: 12px; }
    .artist-top-row-track { gap: 10px; }
    .artist-top-thumb { width: 110px; height: 110px; }
    .artist-top-thumb-rank { font-size: 10px; padding: 2px 7px; top: 5px; left: 5px; }
}
@media (max-width: 480px) {
    .artist-top-thumb { width: 96px; height: 96px; }
}

/* ---------- DOCK VERTICAL LATERAL (TOC discreto) ----------
   Fuera del flujo, fixed sobre el borde derecho del viewport.
   Default: solo dots de 8px. Hover en cualquiera → expande
   con label a la izquierda. Mobile: oculto.
*/
.artist-dock {
    position: fixed;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    pointer-events: none;
    /* dej. respiración del back-to-top y FAB editar */
    max-height: 60vh;
}
.artist-dock-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    padding: 14px 8px;
    background: rgba(0, 0, 0, .55);
    border: 1px solid var(--site-border);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: auto;
    transition: background var(--dur-fast) var(--ease);
}
.artist-dock:hover .artist-dock-inner {
    background: rgba(0, 0, 0, .8);
}

.artist-toc-chip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 10px;
    height: 10px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    transition: width var(--dur-fast) var(--ease);
}
/* El "dot" */
.artist-toc-chip::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--site-text-faded);
    transition: background var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
.artist-toc-chip:hover::after {
    background: var(--site-accent);
    transform: scale(1.4);
}
.artist-toc-chip.is-active::after {
    background: var(--site-accent);
    transform: scale(1.6);
    box-shadow: 0 0 10px var(--site-accent);
}

/* Label flotante a la izquierda al hacer hover */
.artist-toc-chip .toc-label {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    background: rgba(0, 0, 0, .92);
    border: 1px solid var(--site-border-2);
    color: #fff;
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
    box-shadow: var(--shadow-md);
}
.artist-toc-chip .toc-label .toc-count {
    color: var(--site-accent);
    font-family: var(--font-display);
    margin-left: 6px;
    font-size: 10.5px;
}
.artist-toc-chip:hover .toc-label,
.artist-toc-chip:focus-visible .toc-label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Mobile: ocultar dock (la página se navega scroll natural + back-to-top) */
@media (max-width: 1024px) {
    .artist-dock { display: none; }
}

/* ---------- BUSCADOR INLINE arriba de discografia ---------- */
.artist-disco-search-wrap {
    position: relative;
    max-width: 360px;
    margin: 16px 0 24px;
}
.artist-disco-search-wrap > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--site-text-muted);
    font-size: 13px;
    pointer-events: none;
}
.artist-disco-search-wrap input {
    width: 100%;
    height: 36px;
    padding: 0 38px 0 36px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--site-border-2);
    background: var(--site-surface);
    color: var(--site-text);
    font-size: 13px;
    font-family: var(--font-body);
    outline: none;
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
/* Inline en quickinfo: alto reducido para igualar visualmente con los chips */
.artist-disco-search-inline input {
    height: 32px;
    font-size: 12.5px;
    padding: 0 34px 0 32px;
}
.artist-disco-search-inline > i { left: 12px; font-size: 12px; }
.artist-disco-search-inline .artist-disco-clear { right: 4px; width: 24px; height: 24px; }

/* Mobile: chips sutiles en linea + search full width debajo */
@media (max-width: 600px) {
    .artist-quickinfo {
        gap: 6px;
        margin-bottom: 12px;
        row-gap: 8px;
    }
    .artist-quickinfo .site-chip {
        background: transparent !important;
        border: 1px solid var(--site-border) !important;
        font-size: 10.5px !important;
        padding: 3px 9px !important;
        gap: 4px !important;
        line-height: 1.3 !important;
        letter-spacing: 0.2px !important;
    }
    .artist-quickinfo .site-chip i {
        font-size: 10px !important;
        margin-right: 4px !important;
    }
    .artist-quickinfo .site-chip strong {
        font-size: 11px !important;
        margin-right: 2px !important;
    }
    .artist-quickinfo .artist-disco-search-inline {
        flex: 1 1 100%;
        max-width: none;
        margin: 4px 0 0;
    }
    .artist-disco-search-inline input {
        height: 38px;
        font-size: 14px;
    }
}
@media (max-width: 380px) {
    .artist-quickinfo .site-chip {
        font-size: 10px !important;
        padding: 2px 7px !important;
    }
    .artist-quickinfo .site-chip strong { font-size: 10.5px !important; }
}
.artist-disco-search-wrap input::placeholder { color: var(--site-text-faded); }
.artist-disco-search-wrap input:focus {
    border-color: var(--site-accent);
    box-shadow: 0 0 0 2px var(--site-accent-soft);
    background: rgba(0,0,0,.4);
}
.artist-disco-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--site-text-muted);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.artist-disco-clear:hover { color: var(--site-red); background: rgba(255,107,107,.1); }

/* Estados de búsqueda: cards filtradas */
.discography-wrap .album-card.is-search-hidden { display: none !important; }
.disc-section.is-empty-by-search {
    opacity: .35;
    pointer-events: none;
}
.disc-section.is-empty-by-search .album-grid::after {
    content: 'Sin resultados en esta sección';
    display: block;
    padding: 18px;
    color: var(--site-text-muted);
    font-style: italic;
    text-align: center;
}

/* Contador junto al título de cada sección */
.discography-wrap .disc-section .section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 8px;
    margin-left: 6px;
    border-radius: var(--radius-pill);
    background: var(--site-accent-soft);
    color: var(--site-accent);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: 0;
    vertical-align: middle;
}

/* Scroll-margin para que el anchor no quede tapado por el header sticky + toc sticky */
.disc-section {
    scroll-margin-top: calc(var(--site-header-h) + 60px);
}

/* ---------- Hover refinado en album cards (sin glow exagerado) ---------- */
body:not(.admin-body) .album-card {
    transition: transform var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease) !important;
}
body:not(.admin-body) .album-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0,0,0,.45);
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    body:not(.admin-body) .artist-img-container { border-radius: 14px !important; max-height: 360px !important; }
    body:not(.admin-body) .artist-img-container .artist-img-content { padding: 50px 18px 24px !important; }
    body:not(.admin-body) .artist-img-container .artist-img-story { font-size: 14px !important; }
    body:not(.admin-body) .discography-wrap > .main-title-disc,
    body:not(.admin-body) .password-section > .main-title-disc,
    body:not(.admin-body) .youtube-section > .main-title-disc {
        font-size: 19px !important;
        letter-spacing: 2px !important;
        margin: 36px 0 22px !important;
        padding-bottom: 14px !important;
        gap: 12px !important;
    }
    body:not(.admin-body) .discography-wrap > .main-title-disc::before,
    body:not(.admin-body) .password-section > .main-title-disc::before,
    body:not(.admin-body) .youtube-section > .main-title-disc::before {
        height: 22px;
        width: 4px;
    }

    /* TOC mobile: chips scroll horizontal + buscador en fila aparte */
    .artist-toc { padding: 8px 0; }
    .artist-toc-inner { flex-direction: column; align-items: stretch; gap: 8px; }
    .artist-toc-chips {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .artist-toc-chips::-webkit-scrollbar { display: none; }
    .artist-toc-chip { flex-shrink: 0; }
    .artist-toc-search { flex-basis: auto; min-width: 0; }

    .artist-top-release-grid { padding: 12px; }
    .artist-top-release-badge { top: -11px; left: 10px; padding: 4px 10px; font-size: 10px; }
}

/* ============================================================
   SHARE BUTTONS (Fase 5) — refinamiento del componente compartido.
   No toca el HTML; solo overrides con tokens.
   ============================================================ */
body:not(.admin-body) .vny-share-container {
    gap: 12px !important;
    margin: 12px 0 !important;
}
body:not(.admin-body) .vny-share-label {
    color: var(--site-text-muted) !important;
    font-family: var(--font-display) !important;
    font-size: 10.5px !important;
    letter-spacing: 2.5px !important;
}
body:not(.admin-body) .vny-share-buttons { gap: 10px !important; }

body:not(.admin-body) .vny-share-btn {
    position: relative !important;
    width: 36px !important;
    height: 36px !important;
    background: var(--site-surface) !important;
    border: 1px solid var(--site-border-2) !important;
    color: var(--site-text-muted) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease) !important;
}
body:not(.admin-body) .vny-share-btn:hover {
    background: rgba(var(--site-accent-rgb), .12) !important;
    border-color: var(--site-accent) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,.35),
                0 0 0 1px rgba(var(--site-accent-rgb), .35);
}
body:not(.admin-body) .vny-share-btn i {
    font-size: 14px !important;
    pointer-events: none;
}

/* Marca platform-specific colors mantenidos pero con menor opacidad */
body:not(.admin-body) .vny-share-buttons a[href*="facebook.com"]:hover {
    background: rgba(24,119,242,.14) !important;
    color: #1877F2 !important;
    border-color: rgba(24,119,242,.55) !important;
}
body:not(.admin-body) .vny-share-buttons a[href*="x.com"]:hover {
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.45) !important;
}
body:not(.admin-body) .vny-share-buttons a[href*="whatsapp.com"]:hover {
    background: rgba(37,211,102,.14) !important;
    color: #25D366 !important;
    border-color: rgba(37,211,102,.55) !important;
}

/* Tooltip "Copiado!" con tokens */
body:not(.admin-body) .copy-tooltip {
    background: var(--site-accent) !important;
    color: var(--site-accent-text) !important;
    font-family: var(--font-body) !important;
    font-weight: var(--fw-bold) !important;
    box-shadow: 0 6px 14px rgba(0,0,0,.4) !important;
}

/* Mobile: agrandar share buttons para mejor touch */
@media (max-width: 768px) {
    body:not(.admin-body) .vny-share-container {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        padding: 0 !important;
    }
    body:not(.admin-body) .vny-share-label {
        font-size: 10px !important;
        letter-spacing: 2px !important;
    }
    body:not(.admin-body) .vny-share-btn {
        width: 42px !important;
        height: 42px !important;
    }
    body:not(.admin-body) .vny-share-btn i { font-size: 16px !important; }
}
@media (max-width: 380px) {
    body:not(.admin-body) .vny-share-container { gap: 8px !important; }
    body:not(.admin-body) .vny-share-buttons { gap: 8px !important; }
    body:not(.admin-body) .vny-share-btn {
        width: 38px !important;
        height: 38px !important;
    }
}

/* ============================================================
   SECCIÓN VIDEOS / MULTIMEDIA (Fase 5) — youtube embed.
   ============================================================ */
body:not(.admin-body) .youtube-section .video-container {
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    border: 1px solid var(--site-border-2);
    box-shadow: 0 16px 40px rgba(0,0,0,.5);
    background: #000;
}
body:not(.admin-body) .youtube-section #main-video-title {
    font-family: var(--font-display) !important;
    font-size: 15px !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--site-text) !important;
    text-align: center;
    margin: 0 0 14px !important;
    padding: 10px 14px;
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    border-radius: var(--radius-md);
    display: inline-block;
    margin-left: 50% !important;
    transform: translateX(-50%);
    max-width: 90%;
}

/* Galería: cards refinadas con accent */
body:not(.admin-body) .youtube-section .video-gallery {
    gap: 14px !important;
    margin: 28px 0 !important;
}
body:not(.admin-body) .video-thumb {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--site-border-2) !important;
    background: var(--site-surface) !important;
    transition: transform var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease) !important;
}
body:not(.admin-body) .video-thumb:hover {
    transform: translateY(-3px);
    border-color: var(--site-accent) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.5),
                0 0 0 1px rgba(var(--site-accent-rgb),.35);
}
body:not(.admin-body) .video-thumb-overlay {
    background: linear-gradient(180deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,.65) 100%) !important;
    bottom: 50px !important;
}
body:not(.admin-body) .video-thumb-overlay i {
    font-size: 42px !important;
    color: var(--site-accent) !important;
    filter: drop-shadow(0 0 12px rgba(var(--site-accent-rgb),.55)) !important;
    transform: scale(.9);
    transition: transform var(--dur-fast) var(--ease);
}
body:not(.admin-body) .video-thumb:hover .video-thumb-overlay i {
    transform: scale(1);
}
body:not(.admin-body) .video-thumb-title {
    background: var(--site-surface-2) !important;
    border-top: 1px solid var(--site-border) !important;
    font-family: var(--font-body) !important;
    font-size: 12.5px !important;
    color: var(--site-text) !important;
    padding: 10px 12px !important;
    min-height: 46px !important;
    letter-spacing: .2px;
    line-height: 1.35 !important;
}

/* Paginación de videos refinada */
body:not(.admin-body) .video-pagination {
    gap: 14px !important;
    margin: 22px 0 30px !important;
    padding: 0 !important;
}
body:not(.admin-body) .video-pagination .page-btn {
    background: var(--site-surface) !important;
    border: 1px solid var(--site-border-2) !important;
    color: var(--site-text) !important;
    border-radius: var(--radius-pill) !important;
    padding: 8px 16px !important;
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    font-weight: var(--fw-bold) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease) !important;
}
body:not(.admin-body) .video-pagination .page-btn:hover:not(.disabled) {
    background: rgba(var(--site-accent-rgb),.12) !important;
    border-color: var(--site-accent) !important;
    color: #fff !important;
    box-shadow: none !important;
    transform: translateY(-1px);
}
body:not(.admin-body) .video-pagination .page-btn.disabled,
body:not(.admin-body) .video-pagination .page-btn:disabled {
    opacity: .35 !important;
    pointer-events: none;
}
body:not(.admin-body) .video-pagination .page-info {
    color: var(--site-text-muted) !important;
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    letter-spacing: .5px;
}

/* Responsive video gallery */
@media (max-width: 1024px) {
    body:not(.admin-body) .youtube-section .video-gallery {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 600px) {
    body:not(.admin-body) .youtube-section .video-gallery {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    body:not(.admin-body) .youtube-section #main-video-title {
        font-size: 13px !important;
        letter-spacing: 1.2px;
        padding: 8px 12px;
    }
    body:not(.admin-body) .video-thumb-overlay i { font-size: 36px !important; }
    body:not(.admin-body) .video-thumb-title { font-size: 12px !important; }
    body:not(.admin-body) .video-pagination .page-btn { padding: 7px 14px !important; font-size: 11px !important; }
}