/**
 * Beatport Integration - Frontend Styles
 *
 * @package ProDjBeat_Beatport
 * @since 1.0.0
 */

/* ==========================================================================
   Variables CSS
   ========================================================================== */
:root {
    /* Tokens alineados con el theme Bittanto (assets/css/preset.css):
       verde #01d85f, morado #7635f5, superficies #201e29/#292633,
       texto atenuado #808080, radios pequeños, fuente Jost heredada. */
    --pdb-primary: #01d85f;
    --pdb-primary-dark: #00b04e;
    --pdb-purple: #7635f5;
    --pdb-secondary: #292633;
    --pdb-dark: #201e29;
    --pdb-light: #fafafa;
    --pdb-gray: #808080;
    --pdb-text: #ffffff;
    --pdb-border: rgba(255, 255, 255, 0.07);
    --pdb-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    --pdb-radius: 3px;
    --pdb-transition: all 0.3s ease;
}

/* Modo claro del theme (body.light): superficies blancas */
body.light {
    --pdb-secondary: #ffffff;
    --pdb-dark: #f4f4f8;
    --pdb-text: #333333;
    --pdb-border: rgba(32, 30, 41, 0.08);
    --pdb-shadow: 0 4px 10px rgba(32, 30, 41, 0.08);
}

/* ==========================================================================
   Base Styles
   ========================================================================== */
.pdb-release,
.pdb-track-card,
.pdb-artist {
    background: var(--pdb-secondary);
    border-radius: var(--pdb-radius);
    overflow: hidden;
    box-shadow: var(--pdb-shadow);
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

/* ==========================================================================
   Card Style
   ========================================================================== */
.pdb-card {
    display: flex;
    flex-direction: column;
}

.pdb-card .pdb-cover {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.pdb-card .pdb-artwork {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--pdb-transition);
}

.pdb-card:hover .pdb-artwork {
    transform: scale(1.05);
}

.pdb-card .pdb-content {
    padding: 20px;
}

/* ==========================================================================
   Full Style
   ========================================================================== */
.pdb-full {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 30px;
}

@media (max-width: 768px) {
    .pdb-full {
        grid-template-columns: 1fr;
    }
}

.pdb-full .pdb-cover {
    border-radius: var(--pdb-radius);
    overflow: hidden;
}

.pdb-full .pdb-artwork {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   Compact Style
   ========================================================================== */
.pdb-compact {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 15px;
}

.pdb-compact .pdb-cover {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    margin-right: 15px;
    border-radius: 4px;
    overflow: hidden;
}

.pdb-compact .pdb-artwork {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pdb-compact .pdb-content {
    flex: 1;
    padding: 0;
}

.pdb-compact .pdb-title {
    font-size: 14px;
    margin: 0 0 5px 0;
}

.pdb-compact .pdb-artists {
    font-size: 12px;
    margin: 0;
}

/* ==========================================================================
   Header Styles
   ========================================================================== */
.pdb-header {
    margin-bottom: 15px;
}

.pdb-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.pdb-title a {
    color: inherit;
    text-decoration: none;
    transition: var(--pdb-transition);
}

.pdb-title a:hover {
    color: var(--pdb-primary);
}

.pdb-artists {
    font-size: 1.1rem;
    color: var(--pdb-primary);
    margin: 0 0 10px 0;
}

.pdb-remixers {
    font-size: 0.9rem;
    color: var(--pdb-gray);
    margin: 0 0 10px 0;
}

.pdb-remixers small {
    margin-right: 5px;
}

.pdb-mix-name {
    color: var(--pdb-gray);
    font-weight: 400;
    font-size: 0.9em;
}

/* ==========================================================================
   Meta Information
   ========================================================================== */
.pdb-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 0.9rem;
    color: var(--pdb-gray);
}

.pdb-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pdb-track-meta {
    display: flex;
    gap: 10px;
    margin: 10px 0;
    font-size: 0.85rem;
}

.pdb-track-meta span {
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 4px;
}

.pdb-track-specs {
    display: flex;
    gap: 15px;
    margin: 15px 0;
    font-size: 0.9rem;
}

.pdb-track-specs span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--pdb-gray);
}

.pdb-bpm,
.pdb-key,
.pdb-duration {
    font-family: 'Monaco', 'Consolas', monospace;
}

/* ==========================================================================
   Tracklist
   ========================================================================== */
.pdb-tracklist {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--pdb-border);
}

.pdb-tracklist-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 15px 0;
    color: var(--pdb-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pdb-tracks {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pdb-track {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--pdb-border);
    transition: var(--pdb-transition);
}

.pdb-track:last-child {
    border-bottom: none;
}

.pdb-track:hover {
    background: rgba(255, 255, 255, 0.05);
    margin: 0 -15px;
    padding: 12px 15px;
}

.pdb-track-number {
    width: 30px;
    font-size: 0.9rem;
    color: var(--pdb-gray);
    flex-shrink: 0;
}

.pdb-track-info {
    flex: 1;
    min-width: 0;
}

.pdb-track-title {
    display: block;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdb-track-artists {
    display: block;
    font-size: 0.85rem;
    color: var(--pdb-gray);
}

.pdb-track-details {
    display: flex;
    gap: 15px;
    font-size: 0.85rem;
    color: var(--pdb-gray);
    flex-shrink: 0;
    margin-left: 15px;
}

.pdb-track-duration,
.pdb-track-bpm,
.pdb-track-key {
    font-family: 'Monaco', 'Consolas', monospace;
}

/* ==========================================================================
   Artist Styles
   ========================================================================== */
.pdb-artist-header {
    display: flex;
    gap: 30px;
    padding: 30px;
}

@media (max-width: 600px) {
    .pdb-artist-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

.pdb-artist-image {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.pdb-artist-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pdb-artist-info {
    flex: 1;
}

.pdb-artist-name {
    font-size: 2rem;
    margin: 0 0 15px 0;
}

.pdb-artist-bio {
    color: var(--pdb-gray);
    line-height: 1.6;
    margin-bottom: 20px;
}

.pdb-artist-releases {
    padding: 30px;
    border-top: 1px solid var(--pdb-border);
}

.pdb-section-title {
    font-size: 1.2rem;
    margin: 0 0 20px 0;
}

.pdb-releases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

.pdb-release-mini {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
    transition: var(--pdb-transition);
}

.pdb-release-mini:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.pdb-release-mini img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.pdb-release-mini-info {
    padding: 10px;
}

.pdb-release-mini-name {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdb-release-mini-label {
    display: block;
    font-size: 0.75rem;
    color: var(--pdb-gray);
}

/* ==========================================================================
   Footer & Buttons
   ========================================================================== */
.pdb-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--pdb-border);
}

.pdb-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--pdb-primary);
    color: var(--pdb-dark);
    border: none;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--pdb-transition);
}

.pdb-btn:hover {
    background: var(--pdb-primary-dark);
    color: var(--pdb-dark);
    transform: translateY(-2px);
}

.pdb-btn-sm {
    padding: 8px 16px;
    font-size: 0.85rem;
}

/* ==========================================================================
   Play Button
   ========================================================================== */
/* Toda portada ancla su botón de play superpuesto */
.pdb-cover {
    position: relative;
}

.pdb-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0, 212, 170, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: var(--pdb-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdb-cover:hover .pdb-play-btn {
    opacity: 1;
}

.pdb-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
    background: var(--pdb-primary);
}

.pdb-play-btn .pdb-icon-play {
    font-size: 24px;
    color: var(--pdb-dark);
}

/* ==========================================================================
   Grid Layouts
   ========================================================================== */
.pdb-grid {
    display: grid;
    gap: 20px;
}

.pdb-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.pdb-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.pdb-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
    .pdb-grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .pdb-grid-3,
    .pdb-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .pdb-grid-2,
    .pdb-grid-3,
    .pdb-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Search Results
   ========================================================================== */
.pdb-search-results {
    margin: 20px 0;
}

.pdb-results-header {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--pdb-border);
}

.pdb-results-count {
    color: var(--pdb-gray);
    font-size: 0.9rem;
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.pdb-pagination {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 30px;
}

.pdb-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--pdb-secondary);
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    transition: var(--pdb-transition);
}

.pdb-page-link:hover,
.pdb-page-link.pdb-active {
    background: var(--pdb-primary);
    color: var(--pdb-dark);
}

.pdb-pagination-dots {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    color: var(--pdb-gray);
}

/* ==========================================================================
   States
   ========================================================================== */
.pdb-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px;
    color: var(--pdb-gray);
}

.pdb-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--pdb-border);
    border-top-color: var(--pdb-primary);
    border-radius: 50%;
    animation: pdb-spin 1s linear infinite;
}

@keyframes pdb-spin {
    to {
        transform: rotate(360deg);
    }
}

.pdb-error {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: #dc3545;
    padding: 15px 20px;
    border-radius: var(--pdb-radius);
}

.pdb-no-results {
    text-align: center;
    padding: 40px;
    color: var(--pdb-gray);
}

/* ==========================================================================
   Description
   ========================================================================== */
.pdb-description {
    margin-top: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--pdb-gray);
}

/* ==========================================================================
   Icons (usando Unicode o pseudo-elementos)
   ========================================================================== */
.pdb-icon::before {
    font-family: inherit;
    font-style: normal;
}

.pdb-icon-label::before { content: "🏷️"; }
.pdb-icon-calendar::before { content: "📅"; }
.pdb-icon-catalog::before { content: "#"; }
.pdb-icon-genre::before { content: "🎵"; }
.pdb-icon-time::before { content: "⏱️"; }
.pdb-icon-bpm::before { content: "💓"; }
.pdb-icon-key::before { content: "🎹"; }
.pdb-icon-beatport::before { content: "🎧"; }
.pdb-icon-play::before { content: "▶"; }

/* ==========================================================================
   Light Theme Override (opcional)
   ========================================================================== */
.pdb-theme-light .pdb-release,
.pdb-theme-light .pdb-track-card,
.pdb-theme-light .pdb-artist {
    background: #fff;
    color: #333;
    border: 1px solid #e0e0e0;
}

.pdb-theme-light .pdb-title a {
    color: #333;
}

.pdb-theme-light .pdb-artists {
    color: #0066cc;
}

.pdb-theme-light .pdb-meta,
.pdb-theme-light .pdb-track-artists,
.pdb-theme-light .pdb-track-details {
    color: #666;
}

/* ==========================================================================
   BPX — Cards estilo Beatport (grids de releases / tracks / playlists)
   ========================================================================== */
.pdbx-section {
    /* Tokens del theme Bittanto (preset.css) */
    --pdbx-surface: #292633;
    --pdbx-surface-hover: #322e3f;
    --pdbx-text: #ffffff;
    --pdbx-text-dim: #808080;
    --pdbx-accent: var(--pdb-primary, #01d85f);
}

body.light .pdbx-section {
    --pdbx-surface: #ffffff;
    --pdbx-surface-hover: #f4f4f8;
    --pdbx-text: #333333;
    --pdbx-text-dim: #808080;
}

.pdbx-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 8px;
}

.pdbx-section-title {
    margin-bottom: 14px !important;
}

/* --- Grid responsive --- */
.pdbx-grid {
    display: grid;
    gap: 22px 18px;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

@media (min-width: 992px) {
    .pdbx-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .pdbx-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .pdbx-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .pdbx-cols-5 { grid-template-columns: repeat(5, 1fr); }
    .pdbx-cols-6 { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 991px) {
    .pdbx-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
    .pdbx-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
}

/* --- Card --- */
.pdbx-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pdbx-art {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    /* radios pequeños, acorde a los 2px de .btt_btn del theme */
    border-radius: 3px;
    overflow: hidden;
    background: var(--pdbx-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.pdbx-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.pdbx-card:hover .pdbx-img {
    transform: scale(1.06);
}

/* Collage 2x2 para playlists (estilo Spotify/Beatport) */
.pdbx-collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100%;
    height: 100%;
}

.pdbx-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.pdbx-card:hover .pdbx-collage img {
    transform: scale(1.05);
}

/* Oscurecido al hover */
.pdbx-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 55%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.pdbx-card:hover .pdbx-overlay {
    opacity: 1;
}

/* Rank badge (Top 100) — morado del theme, como .btt_btn */
.pdbx-rank {
    position: absolute;
    top: 8px;
    left: 8px;
    min-width: 28px;
    height: 26px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pdb-purple, #7635f5);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 2px;
    z-index: 2;
}

/* Botón play flotante — verde/blanco como el preloader del theme.
   Centrado sobre la portada y con tamaño proporcional a ella
   (portadas grandes → botón grande, con mínimo y máximo). */
.pdbx-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(44px, 30%, 68px);
    height: auto;
    aspect-ratio: 1 / 1;
    border: none;
    border-radius: 50%;
    background: var(--pdbx-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translate(-50%, -42%);
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
    z-index: 2;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.pdbx-play svg {
    width: 42%;
    height: 42%;
}

.pdbx-card:hover .pdbx-play,
.pdbx-play.pdb-playing {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.pdbx-play:hover {
    background: var(--pdb-purple, #7635f5);
    color: #fff;
}

/* Estado reproduciendo: icono pausa (vale para los tres botones de portada) */
.pdbx-play.pdb-playing svg,
.pdb-play-btn.pdb-playing svg,
.pdb-play-large.pdb-playing svg {
    display: none;
}

.pdbx-play.pdb-playing::before,
.pdb-play-btn.pdb-playing::before,
.pdb-play-large.pdb-playing::before {
    content: "❚❚";
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -2px;
}

/* Resolviendo el primer track vía AJAX (pdb_resolve_play): pulso */
.pdbx-play.pdb-resolving,
.pdb-play-btn.pdb-resolving,
.pdb-play-large.pdb-resolving {
    opacity: 1 !important;
    animation: pdb-btn-pulse 0.9s ease-in-out infinite;
}

@keyframes pdb-btn-pulse {
    50% { opacity: 0.45; }
}

/* Resolución fallida (pre-venta, restricción regional…): atenuado, el
   tooltip del botón explica el motivo */
.pdbx-play.pdb-play-unavailable,
.pdb-play-btn.pdb-play-unavailable,
.pdb-play-large.pdb-play-unavailable {
    opacity: 0.4 !important;
    cursor: not-allowed;
}

/* Touch: mostrar siempre el play en pantallas sin hover */
@media (hover: none) {
    .pdbx-play { opacity: 1; transform: translate(-50%, -50%); }
    .pdb-play-btn, .pdb-play-large { opacity: 1; }
}

/* --- Botón grande centrado en portadas de detalle ---------------------
   (release/chart/playlist/track single; track-single.php trae además su
   versión inline equivalente que solo afina tamaños) */
.pdb-release-cover,
.pdb-chart-cover,
.pdb-track-cover {
    position: relative;
    /* Las covers viven en un grid junto a una columna de contenido más
       alta: sin esto se estiran con la fila y el play centrado queda
       DEBAJO de la imagen (mismo fix que track-single.php) */
    align-self: start;
}

.pdb-play-large {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.92;
    transition: opacity 0.25s ease, transform 0.2s ease, background 0.2s ease;
    z-index: 2;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
}

.pdb-play-large svg {
    width: 30px;
    height: 30px;
}

.pdb-play-large:hover {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

.pdb-play-large.pdb-playing::before {
    font-size: 20px;
    letter-spacing: -3px;
}

/* --- Texto de la card --- */
.pdbx-info {
    padding: 10px 2px 0;
    min-width: 0;
}

.pdbx-title {
    /* Igual que .folio_title del theme: 16px/700, capitalize */
    margin: 0 0 2px !important;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 700;
    text-transform: capitalize;
}

.pdbx-title a {
    color: var(--pdbx-text);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.pdbx-title a:hover {
    color: var(--pdbx-accent);
}

.pdbx-artists {
    /* Igual que .folio_cat del theme: 14px gris */
    margin: 0 0 2px !important;
    font-size: 14px;
    color: var(--pdbx-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdbx-meta {
    margin: 4px 0 0 !important;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pdbx-label {
    font-size: 0.78rem;
    color: var(--pdbx-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.pdbx-genre {
    /* Pill con el verde #01d85f del theme, esquinas 2px como .btt_btn */
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--pdbx-accent);
    background: rgba(1, 216, 95, 0.1);
    border: 1px solid rgba(1, 216, 95, 0.35);
    padding: 2px 8px;
    border-radius: 2px;
}

/* Cards de label: misma anatomía que el resto (título/sub bajo la imagen) */

/* Evitar scroll horizontal provocado por el panel off-canvas (.sidebar
   fixed + translateX(110%)) en las vistas de detalle ?view=.
   "clip" no crea contenedor de scroll → position:sticky sigue funcionando.
   Debe ir en html: es el overflow que se propaga al viewport. */
html,
body {
    overflow-x: clip;
}

/* En vistas de detalle, .pdb-full (grid 300px+1fr de las cards embebidas)
   pisaba el layout propio de cada template (cabecera estrujada a ~150px
   y solapada con la tracklist). Los templates ya definen su propio grid
   (.pdb-chart-layout, .pdb-track-layout, ...). */
.pdb-single-view article.pdb-full {
    display: block;
    grid-template-columns: none;
}

/* Página de búsqueda del catálogo Beatport */
.pdbx-search-form {
    display: flex;
    gap: 10px;
    margin: 6px 0 18px;
    flex-wrap: wrap;
}

.pdbx-search-input {
    flex: 1;
    min-width: 220px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.95rem;
    outline: none;
}

.pdbx-search-input:focus {
    border-color: var(--pdb-primary);
}

.pdbx-search-select {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 0.95rem;
}

.pdbx-search-select option {
    background: #292633; /* superficie del theme (antes azulado fuera de paleta) */
}

.pdbx-search-btn {
    background: var(--pdb-primary);
    color: #0f0f1a;
    border: none;
    border-radius: 8px;
    padding: 12px 26px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.pdbx-search-btn:hover {
    filter: brightness(1.12);
}

.pdbx-search-count {
    color: #9b9ba7;
    margin: 0 0 4px;
}

/* Cards de artista en resultados: imagen redondeada */
.pdbx-type-artist .pdbx-art {
    border-radius: 50%;
}

/* ==========================================================================
   ALINEACIÓN CON EL THEME BITTANTO (assets/css/preset.css + theme.css)
   Unifica los componentes Beatport con el diseño principal:
   Jost, verde #01d85f, morado #7635f5, botones .btt_btn, títulos .sectionTitle
   (va al final del archivo para ganar el cascade; especificidad reforzada
   con .pdb-single-view / html body para superar los <style> de los templates)
   ========================================================================== */

/* --- Tipografía: heredar Jost del theme, fuera monospace y system-ui --- */
.pdb-release,
.pdb-track-card,
.pdb-artist {
    font-family: inherit;
}

html body .pdb-col-duration,
html body .pdb-col-bpm,
html body .pdb-col-key,
html body .pdb-col-number,
html body .pdb-spec-value,
html body .pdb-isrc,
html body .pdb-bpm,
html body .pdb-key,
html body .pdb-duration,
html body .pdb-track-duration,
html body .pdb-track-bpm,
html body .pdb-track-key {
    font-family: 'Jost', sans-serif;
    font-weight: 500;
}

/* --- Badges (TRACK / RELEASE / PLAYLIST / ...) → morado theme, radio 2px --- */
html body .pdb-badge {
    background: var(--pdb-purple, #7635f5);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 2px;
    padding: 4px 12px;
}

/* --- Botones en vistas bp → réplica de .btt_btn del theme --- */
html body .pdb-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 45px;
    line-height: 45px;
    padding: 0 18px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 2px;
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: all ease 300ms;
    background: var(--pdb-purple, #7635f5);
    color: #fff;
}

html body .pdb-btn:hover {
    background: var(--pdb-primary, #01d85f);
    color: #fff;
}

html body .pdb-btn-secondary {
    background: #292633;
    color: #fff;
}

body.light .pdb-btn-secondary {
    background: #eceef7;
    color: #333;
}

html body .pdb-btn-secondary:hover {
    background: var(--pdb-primary, #01d85f);
    color: #fff;
}

/* --- Títulos de sección en vistas bp → .sectionTitle del theme --- */
html body .pdb-section-title,
html body .pdb-browse-title {
    font-weight: 700;
    color: var(--pdb-primary, #01d85f);
    letter-spacing: 0;
    position: relative;
    padding: 0 0 13px;
    margin: 0 0 25px;
}

html body .pdb-section-title {
    font-size: 20px;
    line-height: 0.9;
}

html body .pdb-browse-title {
    font-size: 30px;
    line-height: 1.1;
    margin-bottom: 6px;
}

html body .pdb-section-title::after,
html body .pdb-browse-title::after {
    content: '';
    width: 40px;
    height: 4px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: url(../../../assets/images/bg/2.png) no-repeat left center;
}

/* Títulos de contenido (h1 de detalle) en blanco/oscuro según modo */
html body .pdb-chart-title,
html body .pdb-release-title,
html body .pdb-track-title,
html body .pdb-artist-name,
html body .pdb-label-title {
    color: var(--pdb-text, #fff);
}

/* --- Tablas de tracks: superficie del theme --- */
html body .pdb-tracks-table {
    background: var(--pdb-secondary);
    border-radius: 3px;
}

html body .pdb-tracks-header {
    font-size: 11px;
    letter-spacing: 1px;
    font-weight: 600;
}

html body .pdb-track-row {
    color: var(--pdb-text, #fff);
}

html body .pdb-col-number {
    color: var(--pdb-primary, #01d85f);
    font-weight: 600;
}

/* --- Play buttons pequeños: verde theme + icono blanco --- */
html body .pdb-mini-play,
html body .pdb-play-large,
html body .pdb-play-btn {
    background: var(--pdb-primary, #01d85f);
    color: #fff;
}

html body .pdb-mini-play:hover,
html body .pdb-play-large:hover {
    background: var(--pdb-purple, #7635f5);
}

/* --- Cajas meta en detalle --- */
body.light .pdb-chart-meta,
body.light .pdb-release-meta,
body.light .pdb-track-specs,
body.light .pdb-track-meta .pdb-meta-item {
    background: rgba(32, 30, 41, 0.05);
}

body.light .pdb-meta-value,
body.light .pdb-track-name,
body.light .pdb-spec-value {
    color: #333;
}

/* --- Formulario de búsqueda estilo theme --- */
html body .pdbx-search-input,
html body .pdbx-search-select {
    border-radius: 2px;
    background: var(--pdb-secondary);
    border: 1px solid var(--pdb-border);
    color: var(--pdb-text, #fff);
    font-family: 'Jost', sans-serif;
}

html body .pdbx-search-input:focus {
    border-color: var(--pdb-primary, #01d85f);
}

html body .pdbx-search-btn {
    border-radius: 2px;
    background: var(--pdb-purple, #7635f5);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 12px 28px;
    transition: all ease 300ms;
}

html body .pdbx-search-btn:hover {
    background: var(--pdb-primary, #01d85f);
    filter: none;
}

/* --- Errores/avisos bp con la tipografía del theme --- */
.pdb-error {
    border-radius: 2px;
}

/* --- Radios y escalas de las vistas de detalle acordes al theme --- */
html body .pdb-single-view .pdb-artwork,
html body .pdb-cover-collage,
html body .pdb-track-thumb,
html body .pdb-label-logo img,
html body .pdb-release-card,
html body .pdb-release-artwork img {
    border-radius: 3px;
}

html body .pdb-chart-title,
html body .pdb-release-title,
html body .pdb-track-title,
html body .pdb-label-title {
    font-size: 30px;
    line-height: 1.2;
}

html body .pdb-artist-name {
    font-size: 34px;
    line-height: 1.15;
}

html body .pdb-chart-owner,
html body .pdb-release-artists,
html body .pdb-track-artists {
    font-size: 16px;
}

/* Lazy placeholder spinner en verde theme */
.pdb-lazy-spinner {
    border-top-color: var(--pdb-primary, #01d85f) !important;
}

/* Cards legacy ([beatport_release]/[beatport_track]) en modo claro */
body.light .pdb-release,
body.light .pdb-track-card,
body.light .pdb-artist {
    color: #333;
}

body.light .pdb-track-meta span {
    background: rgba(32, 30, 41, 0.06);
}

/* --- Padding correcto en vistas de detalle ---
   .pageCointainer no aporta padding en el theme: las páginas normales lo
   obtienen del .container-fluid (15px) de cada sección. Las vistas ?view=
   lo replican aquí… */
html body .pdb-single-view {
    padding: 25px 15px 30px;
}

/* …EXCEPTO las tablas de canciones en lista: a sangre completa,
   sin padding lateral (los márgenes negativos anulan el padding) */
html body .pdb-single-view .pdb-tracks-table {
    margin-left: -15px;
    margin-right: -15px;
    border-radius: 0;
}

/* que las filas respiren igualmente dentro de la tabla a sangre */
html body .pdb-single-view .pdb-tracks-header,
html body .pdb-single-view .pdb-track-row {
    padding-left: 16px;
    padding-right: 16px;
}

/* ==========================================================================
   BPT — Tabla de tracks formato Beatport real
   Título/Artistas·Sello | Remixers/Género | BPM & Clave | Fecha
   ========================================================================== */
html body .pdbt-table {
    background: var(--pdb-secondary);
    margin: 0;
}

/* A sangre completa SOLO donde el contenedor tiene padding 15px:
   .pdb-single-view y la sección de Tracks de Destacado (container-fluid).
   En la pestaña tracks de /buscar/ NO (el -15px la sacaba del contenedor) */
html body .pdb-single-view .pdbt-table,
html body .pdbx-search-page .pdbx-section .pdbt-table {
    margin-left: -15px;
    margin-right: -15px;
}

.pdbt-row {
    display: grid;
    grid-template-columns: 30px 46px minmax(0, 1fr) 150px 84px 84px 176px;
    gap: 12px;
    padding: 8px 16px;
    align-items: center;
    border-bottom: 1px solid var(--pdb-border);
    color: var(--pdb-text, #fff);
}

.pdbt-table.pdbt-no-art .pdbt-row {
    grid-template-columns: 30px minmax(0, 1fr) 150px 84px 84px 176px;
}

.pdbt-row:last-child { border-bottom: none; }
.pdbt-row:not(.pdbt-head):hover { background: rgba(255, 255, 255, 0.03); }
body.light .pdbt-row:not(.pdbt-head):hover { background: rgba(32, 30, 41, 0.04); }

.pdbt-head {
    background: rgba(255, 255, 255, 0.05);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--pdb-gray);
    padding-top: 10px;
    padding-bottom: 10px;
}

body.light .pdbt-head { background: rgba(32, 30, 41, 0.05); }

.pdbt-num {
    color: var(--pdb-primary, #01d85f);
    font-weight: 600;
    font-size: 13px;
}

/* Artwork con play superpuesto */
.pdbt-art {
    position: relative;
    width: 44px;
    height: 44px;
}

.pdbt-thumb,
.pdbt-thumb img {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 2px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.06);
}

html body .pdbt-play {
    position: absolute;
    inset: 0;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 2px;
    background: rgba(18, 16, 24, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
}

html body .pdbt-row:hover .pdbt-play,
html body .pdbt-play.pdb-playing {
    opacity: 1;
}

html body .pdbt-play:hover,
html body .pdbt-play.pdb-playing {
    background: rgba(1, 216, 95, 0.85);
}

html body .pdbt-play.pdb-playing svg { display: none; }
html body .pdbt-play.pdb-playing::before {
    content: "❚❚";
    font-size: 11px;
    letter-spacing: -2px;
    font-weight: 700;
}

@media (hover: none) {
    html body .pdbt-play { opacity: 1; background: rgba(18, 16, 24, 0.45); }
}

/* Columna principal: título + artistas·sello */
.pdbt-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pdbt-title {
    color: var(--pdb-text, #fff);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdbt-title:hover { color: var(--pdb-primary, #01d85f); }

.pdbt-mix {
    color: var(--pdb-gray);
    font-weight: 400;
    font-size: 12px;
}

.pdbt-sub {
    font-size: 12px;
    line-height: 1.35;
    color: var(--pdb-gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdbt-sub a { color: inherit; text-decoration: none; }
.pdbt-sub a:hover { color: var(--pdb-primary, #01d85f); }
.pdbt-sep { margin: 0 5px; opacity: 0.6; }

/* Remixers / Género apilados */
.pdbt-rg {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 12px;
    line-height: 1.35;
}

.pdbt-remixers,
.pdbt-genre {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--pdb-gray);
}

.pdbt-genre a { color: var(--pdb-primary, #01d85f); text-decoration: none; }
.pdbt-genre a:hover { text-decoration: underline; }
.pdbt-remixers a { color: inherit; text-decoration: none; }
.pdbt-remixers a:hover { color: var(--pdb-primary, #01d85f); }

/* BPM & Clave apilados */
.pdbt-bpmkey {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 12px;
    line-height: 1.35;
}

.pdbt-bpm { color: var(--pdb-text, #fff); font-weight: 500; }
.pdbt-key { color: var(--pdb-gray); }

.pdbt-date {
    font-size: 12px;
    color: var(--pdb-gray);
}

.pdbt-dim { opacity: 0.45; }

/* Responsive: ocultar remixers/fecha en pantallas pequeñas */
/* 1023px y no 900: entre 992 y 1023 la columna de contenido baja al 58 %
   (~563 px) pero la retícula completa pide 674 px, y la tabla sacaba TODA
   la página en horizontal (scroll lateral en tablet apaisada) */
@media (max-width: 1023px) {
    .pdbt-row { grid-template-columns: 26px 44px minmax(0, 1fr) 62px 120px; gap: 10px; }
    .pdbt-table.pdbt-no-art .pdbt-row { grid-template-columns: 26px minmax(0, 1fr) 62px 120px; }
    .pdbt-rg, .pdbt-date { display: none; }
}

/* ==========================================================================
   Container principal más ancho (menos margen lateral)
   ========================================================================== */
@media (min-width: 1200px) {
    html body .container {
        max-width: min(1560px, 96vw);
    }
}

/* Móvil/tablet: el contenido antes que el sidebar de perfil
   (antes había que pasar ~1500px de menú para ver la música) */
@media (max-width: 991px) {
    html body .row > .contentColumn { order: 1; }
    html body .row > .profileColumn { order: 2; }
    html body .profileSidebarfixed .logo-header { margin-top: 25px; }
}

/* ==========================================================================
   DENSIDAD — ritmo vertical compacto (feedback: "todo muy separado")
   ========================================================================== */
html body .pdb-single-view {
    padding: 14px 15px 22px;
}

/* Cabeceras de browse (Top 100 / género) */
html body .pdb-browse-header { margin-bottom: 16px; }
html body .pdb-browse-title { margin-bottom: 4px; padding-bottom: 10px; }
html body .pdb-browse-subtitle { margin: 0; font-size: 14px; }

/* Badge + títulos de detalle pegados y con jerarquía clara */
html body .pdb-badge { margin-bottom: 8px; }
html body .pdb-chart-title,
html body .pdb-release-title,
html body .pdb-track-title,
html body .pdb-label-title { margin: 0 0 4px; }
html body .pdb-artist-name { margin: 0 0 12px; }
html body .pdb-chart-owner,
html body .pdb-release-artists,
html body .pdb-track-artists { margin: 0 0 14px; }

/* Layouts de detalle: columnas y separaciones más juntas */
/* minmax(0,1fr): con 1fr a secas el mínimo es min-content y un título
   largo (o el h1 .pdb-track-title, que hereda nowrap de las filas de
   tracklist) empuja la columna fuera del contenedor */
html body .pdb-chart-layout,
html body .pdb-release-layout {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 22px;
}
html body .pdb-track-layout {
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 24px;
}
html body .pdb-track-content {
    min-width: 0;
}
/* El h1 del detalle comparte clase con las filas de tracklist
   (nowrap + ellipsis): aquí debe envolver en varias líneas */
html body .pdb-single-view h1.pdb-track-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}
@media (max-width: 900px) {
    html body .pdb-chart-layout,
    html body .pdb-release-layout,
    html body .pdb-track-layout { grid-template-columns: 1fr; }
}
html body .pdb-artist-layout { gap: 26px; margin-bottom: 26px; grid-template-columns: 240px minmax(0, 1fr); }
@media (max-width: 900px) {
    html body .pdb-artist-layout { grid-template-columns: 1fr; }
}

/* Cajas meta compactas */
html body .pdb-chart-meta,
html body .pdb-release-meta {
    padding: 12px 14px;
    gap: 10px 22px;
    margin-bottom: 16px;
}
html body .pdb-track-specs { margin: 0 0 14px; padding: 12px 14px; gap: 26px; }
html body .pdb-track-meta { gap: 10px; margin: 0 0 14px; }
html body .pdb-track-meta .pdb-meta-item { padding: 10px 12px; }
html body .pdb-meta-label { font-size: 10px; }

/* Títulos de sección y tablas pegados a su contenido */
html body .pdb-section-title { margin: 0 0 14px; }
html body .pdb-chart-tracklist,
html body .pdb-release-tracklist { margin-top: 4px; }

/* Grids bpx: secciones con menos aire entre sí. Los 15px laterales son los
   mismos de .comonSection: con `0` los bloques del catálogo quedaban 15px a la
   izquierda del resto de secciones (hero, features, pricing) y los títulos
   verdes no alineaban entre sí en las páginas donde conviven */
html body .pdbx-section.comonSection { padding: 12px 15px !important; }
html body .pdbx-grid { gap: 16px 14px; }
html body .pdbx-info { padding: 8px 2px 0; }
html body .pdbx-section-title { margin-bottom: 12px !important; }

/* Página de búsqueda */
html body .pdbx-search-form { margin: 2px 0 14px; }

/* Botones de acción sin margen extra arriba */
html body .pdb-chart-actions,
html body .pdb-release-actions,
html body .pdb-track-actions,
html body .pdb-artist-actions { margin-top: 2px; }

/* Barra de cuenta (psContent, ENCIMA del canvas aurora del bannerMenu —
   z-index 3): UNA barra continua de borde a borde, anclada al fondo del
   banner (no chips sueltos). Vidrio translúcido (rgba + blur) para que el
   aurora respire a través — NADA sólido ahí. Los 5 segmentos (Account/
   Favorites/Playlists/History/Sign off) se separan con filetes verticales
   hairline; activo = subrayado verde 2px, el MISMO patrón de los tabs de
   /buscar/ que el usuario aprobó (chips RECHAZADOS allí). */

/* El psContent de theme.css solo tiene top:0 (alto = contenido): se
   estira hasta el fondo del banner (130px del psHeader) para poder
   anclar la barra abajo */
html body .psContent { bottom: 0; }

.pdb-acc-nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
}

/* Cristal en capa propia: nace TRANSPARENTE arriba (se funde con el
   aurora, sin filete que corte) y cuaja en vidrio abajo. La máscara
   desvanece también el blur del backdrop, no solo el tinte; los glifos
   van encima sin verse afectados. */
.pdb-acc-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Tinte hacia #201e29 = EXACTAMENTE el fondo del menú que va justo
       debajo (medido: rgb(32,30,41)). Si el cristal cierra en casi-negro,
       contra el menú —más claro— el canto se lee como una RAYA NEGRA; y si
       cierra más claro, como un escalón. Cerrando en su mismo tono, la
       última fila funde con el menú y la barra se lee como su borde. */
    background: linear-gradient(180deg, rgba(32, 30, 41, 0) 0%, rgba(32, 30, 41, 0.5) 45%, rgba(32, 30, 41, 0.97) 100%);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.55) 45%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.55) 45%, #000 100%);
}

.pdb-acc-btn {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 2px 10px;
    border-bottom: 2px solid transparent;
    /* Reposo atenuado (no blanco pleno): el protagonismo es del aurora.
       Icono y etiqueta comparten EXACTAMENTE este gris (nada de opacidades
       distintas entre uno y otra) */
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Separadores: rayitas grabadas en el cristal — se DESVANECEN hacia arriba
   con el mismo degradado que la barra (un filete uniforme cortaría la zona
   transparente) y nunca llegan a los bordes */
.pdb-acc-btn { position: relative; }
.pdb-acc-btn + .pdb-acc-btn::before {
    content: "";
    position: absolute;
    left: -0.5px;
    top: 22%;
    bottom: 16%;
    width: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 55%, rgba(255, 255, 255, 0.1) 100%);
}

/* Baño de luz de hover/activo: CÚPULA radial que nace del borde inferior y
   se apaga antes de llegar a los lados y arriba. Nada de rectángulos con
   canto (un linear-gradient a inset:0 dibujaba una caja: justo lo que la
   barra continua evita). En capa propia para animar la opacidad — los
   degradados no interpolan en transition. */
.pdb-acc-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(76% 120% at 50% 124%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.14) 46%, rgba(255, 255, 255, 0) 78%);
    /* La cúpula muere en los costados: sin esto, el degradado aún tiene
       alfa al llegar al borde del segmento y el recorte deja un canto
       vertical — o sea, otra vez una caja */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
    /* Solo fundido de opacidad. NADA de transform aquí: al desplazar la
       capa, Chrome la promociona a capa de composición propia sobre el
       backdrop-filter del cristal y deja una raya oscura en el canto
       mientras dura la animación. */
    transition: opacity 0.3s ease;
}

.pdb-acc-btn:hover::after { opacity: 1; }

/* El glifo y la etiqueta, por encima del baño (::after es posicionado) */
.pdb-acc-btn .icon,
.pdb-acc-btn span { position: relative; z-index: 1; }

.pdb-acc-btn .icon { font-size: 16px; line-height: 1; }

.pdb-acc-btn span {
    font-family: 'Jost', sans-serif;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
}

.pdb-acc-btn:hover { color: #fff; }

/* Página actual: subrayado verde pisando el borde inferior, glifo verde y
   el baño teñido de verde (luz que sube del subrayado) */
.pdb-acc-btn.pdb-acc-active {
    border-bottom-color: var(--pdb-primary, #01d85f);
    color: var(--pdb-primary, #01d85f);
}

.pdb-acc-btn.pdb-acc-active::after {
    opacity: 1;
    background: radial-gradient(76% 120% at 50% 124%, rgba(1, 216, 95, 0.4) 0%, rgba(1, 216, 95, 0.14) 46%, rgba(1, 216, 95, 0) 78%);
}

.pdb-acc-btn.pdb-acc-exit:hover { color: #ff6b6b; }

/* Línea de suscripción bajo el Welcome (rellena el hueco hasta la barra):
   lucecita verde con respiración suave + texto corto. Va sobre el aurora,
   así que texto translúcido, nada de cajas. */
.pdb-acc-sub {
    display: flex;
    align-items: center;
    /* MISMO gap que entre los contadores de .pdb-acc-quota: con dos medidas
       distintas en la línea el punto no leía como viñeta del conjunto */
    gap: 10px;
    /* Pegada al Welcome (compensa los 9px de margen del h3) */
    margin: -6px 0 0;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.72);
}

/* nowrap A PROPÓSITO: esta línea NUNCA debe partirse en dos (el psHeader
   mide 130px fijos y la botonera va anclada abajo).
   NO tocar aquí line-height ni el padding del psContent: el alto heredado
   (26px) es el que da su separación con el Welcome. Las dos caras caben
   porque se turnan, no porque la línea se apriete. */
.pdb-acc-sub {
    flex-wrap: nowrap;
}

.pdb-acc-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--pdb-primary, #01d85f);
    box-shadow: 0 0 6px rgba(1, 216, 95, 0.7);
    animation: pdb-acc-breathe 3s ease-in-out infinite;
}

/* ==========================================================================
   Contadores de descarga del plan (Fair Price), EN la línea de suscripción

   Son la cara VISIBLE de la línea —solo los formatos que el plan incluye,
   con "gastadas/incluidas", alineados a la izquierda—; el nombre del plan
   espera debajo y sale al pasar el cursor (o tocar). Es información de
   servicio, no un widget: sin caja ni fondo, viviendo sobre el aurora igual
   que el resto de la cabecera. El único color fuerte llega cuando el cubo
   se calienta (ámbar al 80%, rojo al agotarse); las barras sobran cuando
   la cifra está a la vista.
   ========================================================================== */
/* OJO con la especificidad: theme.css trae `.psContent span{display:block;
   font-size:12px; letter-spacing:2px}` y todo esto son spans dentro del
   psContent. Sin prefijar con .psContent (0,2,0 contra su 0,1,1) los
   contadores se apilan en vertical y el nombre del plan sale espaciado. */
/* El conmutador: las dos caras ocupan el MISMO hueco, una en flujo y otra
   encima en absoluto, así la línea no cambia de alto ni empuja nada */
.psContent .pdb-acc-swap {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    cursor: default;
    font-size: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    outline: none;
}

.psContent .pdb-acc-plan,
.psContent .pdb-acc-quota {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

/* Los contadores, EN flujo: son los que dan alto a la línea. min-height
   calca el line box que tenía la cara del plan (los 26px heredados que,
   según la nota de .pdb-acc-sub, dan la separación con el Welcome) para
   que la cabecera no baile respecto a antes ni a la línea sin cuota */
.psContent .pdb-acc-quota {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px; /* = gap de .pdb-acc-sub: un solo ritmo punto/contadores */
    min-height: 26px;
    font-family: 'Jost', sans-serif;
    letter-spacing: normal;
    line-height: 1;
}

/* El plan espera encima, invisible y un pelín abajo (scoped al .pdb-acc-swap:
   sin cuota que enseñar no hay conmutador y el plan va suelto, en flujo) */
.psContent .pdb-acc-swap .pdb-acc-plan {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    opacity: 0;
    transform: translateY(calc(-50% + 3px));
    pointer-events: none;
}

/* El relevo: cursor encima o un toque en táctil (.pdb-plan-shown lo pone
   el JS al tocar la línea). El foco va aparte, abajo. */
.pdb-acc-swappable:hover .pdb-acc-quota,
.psContent h3:hover + .pdb-acc-swappable .pdb-acc-quota,
.pdb-acc-swappable.pdb-plan-shown .pdb-acc-quota {
    opacity: 0;
    transform: translateY(-3px);
}

.pdb-acc-swappable:hover .pdb-acc-swap .pdb-acc-plan,
.psContent h3:hover + .pdb-acc-swappable .pdb-acc-swap .pdb-acc-plan,
.pdb-acc-swappable.pdb-plan-shown .pdb-acc-swap .pdb-acc-plan {
    opacity: 1;
    transform: translateY(-50%);
}

/* Foco SOLO de teclado (:focus-visible, no :focus-within): el click con
   ratón también enfoca el tabindex y dejaba el plan clavado hasta soltar
   el foco, ignorando el puntero. En reglas separadas a propósito: un
   Safari viejo que no conozca :focus-visible descartaría la lista entera
   de selectores, hover incluido */
.psContent .pdb-acc-swap:focus-visible .pdb-acc-quota {
    opacity: 0;
    transform: translateY(-3px);
}

.psContent .pdb-acc-swap:focus-visible .pdb-acc-plan {
    opacity: 1;
    transform: translateY(-50%);
}

/* Sin cursor (móvil/tablet): tocar la línea enseña el plan unos segundos */
@media (hover: none) {
    .psContent .pdb-acc-swap { cursor: pointer; }
}

/* El psContent conserva su padding original (30px): los contadores no
   añaden ni un píxel de alto porque comparten hueco con el nombre del plan */

/* Cada contador mide lo que mide su cifra: repartidos a lo ancho, el ojo
   agrupaba la cifra de uno con la etiqueta del siguiente */
.psContent .pdb-acc-q {
    display: inline-block;
    flex: 0 0 auto;
    line-height: 1;
    letter-spacing: normal;
}

/* Etiqueta y cifra JUNTAS y a la izquierda: separadas a los extremos de su
   columna, el ojo agrupaba la cifra de un cubo con la etiqueta del siguiente */
.pdb-acc-q .pdb-q-k,
.pdb-acc-q .pdb-q-v {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    vertical-align: baseline;
}

/* Cara visible en reposo: etiqueta y cifra al MISMO cuerpo (con la etiqueta
   más pequeña parecía una mini-viñeta apagada) y en blanco, nada de grises
   — la jerarquía gastado/total la pone el peso, no el color */
.pdb-acc-q .pdb-q-k {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #fff;
}

.pdb-acc-q .pdb-q-v {
    margin-left: 4px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0;
    color: #fff;
}

/* El total, más callado que lo gastado solo por el peso de la letra */
.pdb-acc-q .pdb-q-v i {
    font-style: normal;
    font-weight: 400;
    color: #fff;
}

/* Ilimitado: el contador es SOLO el símbolo. A 10.5px se leía como una
   errata, así que va un punto más grande y centrado con la etiqueta */
.pdb-acc-q .pdb-q-v .pdb-q-forever {
    font-size: 15px;
    line-height: 1;
    position: relative;
    top: 1.5px;
}

/* Sin barras: el aviso es el color de la cifra — ámbar cerca del tope,
   rojo al agotarse */
.pdb-acc-q.pdb-q-warn .pdb-q-v { color: #f5a623; }
.pdb-acc-q.pdb-q-full .pdb-q-v { color: #ff6b6b; }

/* La cifra que acaba de subir da un golpe de luz verde: es lo que hace que
   se entienda de un vistazo qué cuenta cada descarga */
.pdb-acc-q.pdb-q-bump .pdb-q-v {
    animation: pdb-q-bump 0.9s ease-out;
}

@keyframes pdb-q-bump {
    0%   { color: var(--pdb-primary, #01d85f); transform: translateY(-2px); }
    35%  { color: var(--pdb-primary, #01d85f); transform: translateY(0); }
    100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .psContent .pdb-acc-plan,
    .psContent .pdb-acc-quota { transition: none; }
    .pdb-acc-q.pdb-q-bump .pdb-q-v { animation: none; }
}

@keyframes pdb-acc-breathe {
    0%, 100% { box-shadow: 0 0 4px rgba(1, 216, 95, 0.5); opacity: 0.85; }
    50%      { box-shadow: 0 0 10px rgba(1, 216, 95, 0.95); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .pdb-acc-dot { animation: none; }
}

/* ==========================================================================
   Layout de columnas: la col del perfil se ajusta al sidebar real (320px
   fijo) — antes col-lg-4 crecía con el container y dejaba un hueco muerto
   entre el sidebar y tabContainer
   ========================================================================== */
@media (min-width: 992px) {
    html body .row > .col-lg-4.profileColumn {
        -ms-flex: 0 0 352px;
        flex: 0 0 352px;
        max-width: 352px;
    }
    html body .row > .col-lg-8.contentColumn {
        -ms-flex: 0 0 calc(100% - 352px);
        flex: 0 0 calc(100% - 352px);
        max-width: calc(100% - 352px);
    }
}

/* Chips de formato en el historial (/history/): columna Format */
.pdb-hist-fmt {
    display: inline-block;
    padding: 2px 5px;
    margin-right: 3px;
    border: 1px solid var(--pdb-border);
    border-radius: 2px;
    font-family: 'Jost', sans-serif;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--pdb-gray, #808080);
}

/* ==========================================================================
   Paginación (?pg=N) — estilo botones del theme
   ========================================================================== */
.pdb-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 18px 0 6px;
}

.pdb-pager-btn,
.pdb-pager-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 2px;
    background: #292633;
    color: #fff;
    text-decoration: none;
    transition: all ease 300ms;
}

body.light .pdb-pager-btn,
body.light .pdb-pager-num {
    background: #eceef7;
    color: #333;
}

.pdb-pager-btn:hover,
.pdb-pager-num:hover {
    background: var(--pdb-primary, #01d85f);
    color: #fff;
}

.pdb-pager-current {
    background: var(--pdb-purple, #7635f5) !important;
    color: #fff !important;
    cursor: default;
}

.pdb-pager-dots { color: var(--pdb-gray, #808080); padding: 0 2px; }

/* Grids bpx dentro de vistas de detalle: sin doble padding lateral */
html body .pdb-single-view .pdbx-section .container-fluid { padding: 0; }

/* Ítem activo en el sidebar (género/top actual) */
.list-group .pdb-side-active {
    color: var(--pdb-primary, #01d85f) !important;
    border-left: 3px solid var(--pdb-primary, #01d85f);
    background: rgba(1, 216, 95, 0.06);
}

/* Error de carga de géneros en el sidebar */
.pdb-side-error { color: #d63638 !important; font-size: 12px; }

/* Buscador: una sola fila compacta (el theme fuerza width:100% en selects) */
html body .pdbx-search-form { flex-wrap: nowrap; }
html body .pdbx-search-input { flex: 1 1 auto; width: auto; min-width: 160px; }
html body .pdbx-search-select { flex: 0 0 150px; width: 150px; }
html body .pdbx-search-btn { flex: 0 0 auto; }

@media (max-width: 640px) {
    html body .pdbx-search-form { flex-wrap: wrap; }
    html body .pdbx-search-input { flex: 1 1 100%; }
}

/* Filtro de géneros en la cabecera del list-group (hueco derecho) */
.pdb-genres-headwrap {
    position: relative;
}

html body .pdb-genre-filter {
    /* Discreto: subrayado corto pegado al texto, tipografía legible.
       html body: el theme pone width:100% a los input y cubría el header */
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 82px;
    height: 24px;
    padding: 0 1px;
    font-size: 13px;
    font-family: 'Jost', sans-serif;
    color: #fff;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 0;
    outline: none;
    z-index: 2;
    transition: border-color 0.2s ease, width 0.2s ease;
}

html body .pdb-genre-filter:focus { width: 120px; }

html body .pdb-genre-filter::placeholder { color: rgba(128, 128, 128, 0.75); }

html body .pdb-genre-filter:focus {
    border-bottom-color: var(--pdb-primary, #01d85f);
}

html body.light .pdb-genre-filter {
    color: #333;
    border-bottom-color: rgba(32, 30, 41, 0.25);
}

/* Mensaje "sin coincidencias" del filtro */
.pdb-genre-nomatch {
    display: block;
    padding: 8px 16px;
    font-size: 12px;
    color: #808080;
}

/* El input del filtro vive DENTRO del <a> cabecera (anclado a su derecha):
   así el <a> conserva los estilos de cabecera de sidebar-menu.css */
.pdb-genres-head { position: relative; }

/* ==========================================================================
   Breadcrumb de vistas Beatport + badge refinado
   ========================================================================== */
html body .pdb-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 14px;
    font-size: 12.5px;
    line-height: 1.4;
}

html body .pdb-crumbs .pdb-crumb {
    color: var(--pdb-gray, #808080);
    text-decoration: none;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body .pdb-crumbs a.pdb-crumb:hover {
    color: var(--pdb-primary, #01d85f);
}

html body .pdb-crumbs .pdb-crumb-current {
    color: var(--pdb-text, #fff);
    font-weight: 500;
}

html body .pdb-crumb-sep {
    color: rgba(128, 128, 128, 0.55);
    font-size: 13px;
}

/* Badge refinado: chip outline morado, menos peso visual bajo el breadcrumb */
html body .pdb-badge {
    background: rgba(118, 53, 245, 0.14);
    color: #b39aff;
    border: 1px solid rgba(118, 53, 245, 0.55);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.4px;
    padding: 3px 10px;
    border-radius: 2px;
}

body.light .pdb-badge {
    background: rgba(118, 53, 245, 0.08);
    color: #6a2fe0;
    border-color: rgba(118, 53, 245, 0.45);
}

/* --------------------------------------------------------------------------
   Página /buscar/: pestañas de tipo + secciones "Destacado"
   (el input de búsqueda vive en el header del theme, .headerSearch)
   -------------------------------------------------------------------------- */
/* Pestañas tipo subrayado (nada de chips ni fondos): texto plano como el
   mainMenu sobre una línea base, y el ACTIVO marcado con subrayado verde
   pisando la línea — el patrón de tabs de la propia búsqueda de Beatport.
   padding-top y no margin-top: el margen colapsaba fuera de
   .pdbx-search-page y las pestañas quedaban pegadas al borde */
html body .pdbx-search-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0 28px;
    margin: 0 0 14px;
    padding: 15px 15px 0;
    border-bottom: 1px solid var(--pdb-border);
}

html body .pdbx-search-tab {
    display: inline-block;
    padding: 8px 2px 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: capitalize;
    color: #808080;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px; /* el subrayado activo pisa la línea base */
    transition: all ease 300ms;
}

html body .pdbx-search-tab:hover {
    color: #FFF;
}

html body .pdbx-search-tab.is-active {
    color: #FFF;
    border-bottom-color: #01d85f;
}

body.light .pdbx-search-tab:hover,
body.light .pdbx-search-tab.is-active {
    color: #201e29;
}

html body .pdbx-search-count {
    padding: 0 15px;
}

/* Destacado: Artistas y Releases en la misma línea (mitad y mitad; si una
   de las dos no tiene resultados, la otra ocupa todo el ancho) */
html body .pdbx-fsec-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

html body .pdbx-fsec-row > .pdbx-section {
    flex: 1 1 50%;
    min-width: 0;
}

@media (max-width: 767px) {
    html body .pdbx-fsec-row > .pdbx-section {
        flex-basis: 100%;
    }
}

/* Lista compacta estilo Spotify (Destacado): miniatura fija + texto al
   lado, siempre 2 por línea. Releases con portada cuadrada y artista bajo
   el título; artistas con foto circular (hereda el 50% de .pdbx-type-artist) */
/* Ambos bloques del resumen renderizan 6 items: en pantallas normales se
   ven 4 (2×2) y en anchas 6 (3×2) — siempre dos líneas. Releases va en
   cards con portada y Artistas en lista mini, para diferenciarlos */
html body .pdbx-fsec-row .pdbx-grid {
    grid-template-columns: repeat(2, 1fr);
}

html body .pdbx-fsec-row .pdbx-card:nth-child(n+5) {
    display: none;
}

@media (min-width: 1600px) {
    html body .pdbx-fsec-row .pdbx-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    html body .pdbx-fsec-row .pdbx-card:nth-child(n+5) {
        display: flex;
    }
}

html body .pdbx-mini-list .pdbx-grid {
    gap: 12px 14px;
}

html body .pdbx-mini-list .pdbx-card {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    /* mismo alto que las cajitas de releases (borde fantasma) para que
       cada línea de artistas quede alineada con su cajita */
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 3px;
}

html body .pdbx-mini-list .pdbx-art {
    width: 48px;
    flex: 0 0 48px;
}

html body .pdbx-mini-list .pdbx-info {
    padding: 0;
    min-width: 0;
}

html body .pdbx-mini-list .pdbx-title {
    font-size: 13px;
    /* line-height corto: con el 26px heredado del theme, las dos líneas de
       texto del release superaban los 48px de la miniatura y la cajita
       quedaba más alta que la fila de artista (desalineaba las líneas) */
    line-height: 1.3;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html body .pdbx-mini-list .pdbx-artists {
    font-size: 11px;
    line-height: 1.3;
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html body .pdbx-mini-list .pdbx-meta {
    display: none; /* sello/género sobran en formato mini */
}

html body .pdbx-mini-list .pdbx-type-artist .pdbx-artists {
    display: none; /* la línea "Artist" sobra en formato mini */
}

/* Releases "metidos en carta": SOLO fondo sutil, SIN borde (el borde
   sigue siendo el fantasma transparente de .pdbx-mini-list, que iguala la
   altura con las filas de artistas); hover aclarando como .pdbt-row */
html body .pdbx-mini-cards .pdbx-card {
    background: rgba(255, 255, 255, 0.04);
    transition: background 0.3s ease;
}

html body .pdbx-mini-cards .pdbx-card:hover {
    background: rgba(255, 255, 255, 0.07);
}

body.light .pdbx-mini-cards .pdbx-card {
    background: rgba(32, 30, 41, 0.04);
}

body.light .pdbx-mini-cards .pdbx-card:hover {
    background: rgba(32, 30, 41, 0.08);
}

/* "Ver todos" a la derecha del título de sección (pdbx-section-head ya es flex) */
html body .pdbx-more-link {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #9b9ba7;
    white-space: nowrap;
    transition: all ease 300ms;
}

html body .pdbx-more-link:hover {
    color: var(--pdb-primary, #01d85f);
}

/* =============================================================================
   BARRA DE REPRODUCCIÓN INFERIOR (#pdb-player-bar)
   Aparece al reproducir un sample y persiste al terminar. La wave coloreada
   (WaveSurfer + render rekordbox) va POSICIONADA en su trozo real dentro del
   waveform del track completo (PNG de la API, atenuado de fondo) — sistema
   portado de prodjpool/master-new.
   ========================================================================== */

#pdb-player-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 86px;
    padding: 0 18px 0 12px;
    background: var(--pdb-dark, #201e29);
    border-top: 1px solid var(--pdb-border, rgba(255, 255, 255, 0.07));
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45);
    transform: translateY(110%);
    transition: transform 0.3s ease;
}

#pdb-player-bar.pdb-bar-visible {
    transform: translateY(0);
}

/* Hueco para que la barra no tape el final del contenido */
body.pdb-player-open {
    padding-bottom: 96px !important;
}

#pdb-player-bar .pdb-bar-art {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    border-radius: var(--pdb-radius, 3px);
    overflow: hidden;
    background: var(--pdb-secondary, #292633);
}

#pdb-player-bar .pdb-bar-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#pdb-player-bar .pdb-bar-info {
    flex: 0 1 210px;
    min-width: 120px;
    overflow: hidden;
}

#pdb-player-bar .pdb-bar-title {
    color: var(--pdb-text, #fff);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pdb-player-bar .pdb-bar-artists {
    color: var(--pdb-gray, #808080);
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pdb-player-bar .pdb-bar-toggle {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--pdb-primary, #01d85f);
    color: var(--pdb-dark, #201e29);
    cursor: pointer;
    transition: var(--pdb-transition, all 0.3s ease);
}

#pdb-player-bar .pdb-bar-toggle:hover {
    background: var(--pdb-primary-dark, #00b04e);
}

#pdb-player-bar .pdb-bar-ic-pause { display: none; }
#pdb-player-bar.pdb-bar-playing .pdb-bar-ic-pause { display: block; }
#pdb-player-bar.pdb-bar-playing .pdb-bar-ic-play { display: none; }

/* ── Botón FULL (Needle Drop, solo admins) ─────────────────────────────── */
#pdb-player-bar .pdb-bar-full {
    flex: 0 0 auto;
    height: 26px;
    align-self: center;
    padding: 0 10px;
    border: 1px solid var(--pdb-primary, #01d85f);
    border-radius: 13px;
    background: transparent;
    color: var(--pdb-primary, #01d85f);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: var(--pdb-transition, all 0.3s ease);
}

#pdb-player-bar .pdb-bar-full:hover {
    background: rgba(1, 216, 95, 0.12);
}

#pdb-player-bar .pdb-bar-full.pdb-nd-on {
    background: var(--pdb-primary, #01d85f);
    color: var(--pdb-dark, #201e29);
}

/* ── Modo FULL: la wave de colores de WaveSurfer ocupa todo el timeline
   (el JS la pone a left:0/width:100% y carga el track completo); el PNG
   de Beatport, la ventana y las etiquetas del sample se FUNDEN (no
   display:none) para que el cambio sea un crossfade y no un salto ────── */
#pdb-player-bar .pdb-bar-bg,
#pdb-player-bar .pdb-bar-window,
#pdb-player-bar .pdb-bar-label,
#pdb-player-bar .pdb-bar-wave {
    transition: opacity 0.25s ease;
}

#pdb-player-bar.pdb-bar-fullmode .pdb-bar-bg,
#pdb-player-bar.pdb-bar-fullmode .pdb-bar-window,
#pdb-player-bar.pdb-bar-fullmode .pdb-bar-label {
    opacity: 0;
}

/* La wave se funde mientras el contenedor cambia de tamaño/contenido.
   Especificidad extra (.pdb-bar-timeline) para ganar SIEMPRE a la regla
   "#pdb-player-bar.pdb-bar-loading .pdb-bar-wave {opacity:.35}" que va después */
#pdb-player-bar .pdb-bar-timeline .pdb-bar-wave.pdb-wave-hidden {
    opacity: 0;
}

/* ── Timeline: fondo (waveform completo) + ventana + wave real ─────────── */
#pdb-player-bar .pdb-bar-timeline {
    position: relative;
    flex: 1 1 auto;
    height: 54px;
    min-width: 0;
    align-self: center;
    /* el canvas de wavesurfer mide 54px fijos: nunca debe desbordar la barra */
    overflow: hidden;
}

#pdb-player-bar .pdb-bar-bg {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    opacity: 0.32;
    pointer-events: none;
    z-index: 0;
}

#pdb-player-bar .pdb-bar-window {
    position: absolute;
    top: 0;
    height: 100%;
    background: rgba(1, 216, 95, 0.07);
    border-left: 1px solid rgba(1, 216, 95, 0.55);
    border-right: 1px solid rgba(1, 216, 95, 0.55);
    border-radius: 2px;
    pointer-events: none;
    z-index: 1;
}

#pdb-player-bar .pdb-bar-wave {
    position: absolute;
    top: 0;
    height: 100%;
    z-index: 2;
    cursor: pointer;
}

#pdb-player-bar .pdb-bar-label {
    position: absolute;
    bottom: -2px;
    font-size: 9px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(32, 30, 41, 0.85);
    padding: 0 4px;
    border-radius: 2px;
    white-space: nowrap;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
    z-index: 3;
}

#pdb-player-bar .pdb-bar-label-start {
    color: var(--pdb-primary, #01d85f);
    font-weight: 700;
}

#pdb-player-bar .pdb-bar-label-end {
    transform: translateX(-100%);
}

/* Spinner de carga de la wave */
#pdb-player-bar .pdb-bar-spinner {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--pdb-primary, #01d85f);
    border-radius: 50%;
    animation: pdb-spin 0.8s linear infinite;
    z-index: 4;
}

#pdb-player-bar.pdb-bar-loading .pdb-bar-spinner { display: block; }
#pdb-player-bar.pdb-bar-loading .pdb-bar-wave { opacity: 0.35; }

#pdb-player-bar .pdb-bar-time {
    flex: 0 0 auto;
    color: var(--pdb-gray, #808080);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

#pdb-player-bar .pdb-bar-time em {
    font-style: normal;
    margin: 0 4px;
    opacity: 0.5;
}

#pdb-player-bar .pdb-bar-time .pdb-bar-cur {
    color: var(--pdb-text, #fff);
}

#pdb-player-bar .pdb-bar-close {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--pdb-gray, #808080);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: var(--pdb-transition, all 0.3s ease);
}

#pdb-player-bar .pdb-bar-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/* Modo claro del theme */
body.light #pdb-player-bar {
    background: #ffffff;
    border-top-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
}

body.light #pdb-player-bar .pdb-bar-title { color: #201e29; }
body.light #pdb-player-bar .pdb-bar-time .pdb-bar-cur { color: #201e29; }
body.light #pdb-player-bar .pdb-bar-label { background: rgba(255, 255, 255, 0.85); color: rgba(0, 0, 0, 0.6); }

/* Responsive: en móvil las etiquetas de inicio/fin del sample sobran (se
   pisan con el borde de la barra). El reparto de la barra en dos alturas
   —con su timeline y su contador— está al final del fichero, en el bloque
   MÓVIL: apretándolo todo en una fila el timeline quedaba en 2 px. */
@media (max-width: 767px) {
    #pdb-player-bar .pdb-bar-label { display: none; }
}

/* ============================================================
   GRID DE GÉNEROS (/genres/, [beatport_genres])
   Cards de texto: superficie --pdb-secondary, hover con borde
   inferior morado + nombre en verde (misma pauta que icon_box_02
   y los enlaces del theme). body.light hereda vía variables.
   ============================================================ */
.pdbx-genres-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}
html body .pdbx-genre-card {
    position: relative;
    display: block;
    background: var(--pdb-secondary);
    border-radius: var(--pdb-radius);
    border-bottom: 3px solid transparent;
    padding: 18px 16px 15px;
    overflow: hidden;
    text-decoration: none;
    transition: border-color ease 300ms, transform ease 300ms;
}
html body .pdbx-genre-card:hover {
    border-bottom-color: var(--pdb-purple);
    transform: translateY(-2px);
}
.pdbx-genre-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--pdb-text);
    transition: color ease 300ms;
}
.pdbx-genre-card:hover .pdbx-genre-name {
    color: var(--pdb-primary);
}
.pdbx-genre-sub {
    display: block;
    font-size: 12px;
    color: var(--pdb-gray);
    margin-top: 4px;
}
.pdbx-genre-icon {
    position: absolute;
    right: 12px;
    bottom: 8px;
    font-size: 26px;
    color: var(--pdb-purple);
    opacity: .22;
    pointer-events: none;
}

/* ============================================================
   HERO DEL HOME DE MIEMBROS (bp/templates/home-featured.php)
   Carousel owl de los top releases: fondo = el propio artwork
   difuminado, artwork nítido + info + play. Tokens del theme.
   Muestra DOS tarjetas cuando el contenedor pasa de 900px (la
   clase .pdbx-hero-2up la pone el JS del slider, ver
   class-bp-templates.php); por debajo, una sola a lo ancho.
   ============================================================ */
.pdbx-hero-section {
    padding-top: 24px;
}
/* Stage en flex: con el float por defecto de owl las dos tarjetas
   quedaban a distinta altura y desalineadas */
.pdbx-hero-slider .owl-stage {
    display: flex;
    align-items: stretch;
}
.pdbx-hero-slider .owl-item {
    flex: 0 0 auto;
    display: flex;
}
.pdbx-hero-slide {
    position: relative;
    width: 100%;
    background: var(--pdb-secondary);
    border-radius: var(--pdb-radius);
    overflow: hidden;
}
.pdbx-hero-bg {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-size: cover;
    background-position: center;
    filter: blur(30px) saturate(1.15);
    opacity: .32;
    transform: scale(1.2);
}
.pdbx-hero-slide:after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(90deg, rgba(32, 30, 41, .55), rgba(32, 30, 41, .15));
    pointer-events: none;
}
.pdbx-hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 30px;
    min-height: 270px;
    width: 100%;
}
.pdbx-hero-art {
    position: relative;
    flex: 0 0 210px;
}
.pdbx-hero-art img {
    display: block;
    width: 210px;
    height: 210px;
    object-fit: cover;
    border-radius: var(--pdb-radius);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
}
html body .pdbx-hero-play {
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.pdbx-hero-info {
    flex: 1 1 auto;
    min-width: 0;
}
.pdbx-hero-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--pdb-purple);
    border: 1px solid var(--pdb-purple);
    border-radius: 2px;
    padding: 4px 10px;
    margin: 0 0 14px;
}
/* Títulos y artistas recortados a 2 líneas: con dos tarjetas en fila
   un nombre largo empujaba el botón fuera de la tarjeta */
.pdbx-hero-title,
.pdbx-hero-artists {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pdbx-hero-title {
    margin: 0 0 6px;
    line-height: 1.2;
}
html body .pdbx-hero-title a {
    font-size: 26px;
    font-weight: 700;
    color: var(--pdb-text);
    text-decoration: none;
}
html body .pdbx-hero-title a:hover {
    color: var(--pdb-primary);
}
.pdbx-hero-artists {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--pdb-gray);
}
html body .pdbx-hero-artists a {
    color: inherit;
}
html body .pdbx-hero-artists a:hover {
    color: var(--pdb-primary);
}
html body .pdbx-hero-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--pdb-gray);
    margin: 0 0 18px;
}
html body .pdbx-hero-label:hover {
    color: var(--pdb-primary);
}
.pdbx-hero-actions {
    margin-top: 2px;
}

/* --- Variante de dos tarjetas (.pdbx-hero-2up la pone el JS cuando
   owl decide items: 2): todo un punto más compacto para que quepan
   portada + texto + botón en media anchura --- */
.pdbx-hero-2up .pdbx-hero-inner {
    gap: 20px;
    padding: 22px;
    min-height: 214px;
}
.pdbx-hero-2up .pdbx-hero-art {
    flex-basis: 170px;
}
.pdbx-hero-2up .pdbx-hero-art img {
    width: 170px;
    height: 170px;
}
.pdbx-hero-2up .pdbx-hero-tag {
    margin-bottom: 10px;
}
html body .pdbx-hero-2up .pdbx-hero-title a {
    font-size: 20px;
}
.pdbx-hero-2up .pdbx-hero-artists {
    font-size: 13px;
    margin-bottom: 8px;
}
html body .pdbx-hero-2up .pdbx-hero-label {
    font-size: 10px;
    margin-bottom: 12px;
}
/* Dots del owl en tokens del sitio.
   theme.css fija el botón .owl-dot a 8x8 y mete el span dentro en
   position:absolute; al alargar el activo a pastilla de 18px se salía
   de su botón y el punto siguiente le quedaba encima. Aquí el botón se
   ajusta a su span (flex + span estático) y el hueco lo pone el gap. */
.pdbx-hero-slider .owl-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}
.pdbx-hero-slider .owl-dots .owl-dot {
    width: auto;
    height: auto;
    line-height: 0;
    margin: 0;
    border-radius: 0;
}
.pdbx-hero-slider .owl-dots .owl-dot span {
    position: static;
    display: block;
    width: 7px;
    height: 7px;
    margin: 0;
    border-radius: 50%;
    background: var(--pdb-gray);
    opacity: .45;
    transition: all ease 300ms;
}
.pdbx-hero-slider .owl-dots .owl-dot.active span {
    background: var(--pdb-primary);
    opacity: 1;
    width: 18px;
    border-radius: 4px;
}
@media (max-width: 767px) {
    .pdbx-hero-inner {
        flex-direction: column;
        align-items: flex-start;
        min-height: 0;
    }
    .pdbx-hero-art,
    .pdbx-hero-art img {
        width: 160px;
        height: 160px;
        flex-basis: auto;
    }
    html body .pdbx-hero-title a {
        font-size: 20px;
    }
}

/* Variante sin columna de rank (tablas "Latest Tracks" de artista/label):
   sin esta regla el grid de 6 columnas corría todas las celdas una posición */
.pdbt-table.pdbt-no-rank .pdbt-row {
    grid-template-columns: 46px minmax(0, 1fr) 150px 84px 84px 176px;
}
.pdbt-table.pdbt-no-art.pdbt-no-rank .pdbt-row {
    grid-template-columns: minmax(0, 1fr) 150px 84px 84px 176px;
}
/* Mismo corte que la variante con rank (1023px): estas tablas viven en
   artista/sello y desbordaban igual entre 992 y 1023 */
@media (max-width: 1023px) {
    .pdbt-table.pdbt-no-rank .pdbt-row { grid-template-columns: 44px minmax(0, 1fr) 62px 120px; }
    .pdbt-table.pdbt-no-art.pdbt-no-rank .pdbt-row { grid-template-columns: minmax(0, 1fr) 62px 120px; }
}

/* ------------------------------------------------------------------
   Banner del sidebar (.bannerMenu): visualizador de audio animado
   (pdb-banner-viz.js). Antes era un banner.jpg vía CSS del Customizer
   (regla retirada de allí; el fichero ni existía → 404 silencioso).
   El gradiente de fondo es el fallback sin JS y evita el flash oscuro
   antes del primer frame del canvas.
------------------------------------------------------------------- */
.bannerMenu {
    position: relative;
    height: 130px;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(180deg, #0b0a12 0%, #151322 100%);
}
.bannerMenu .pdb-viz-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* ==========================================================================
   Acciones de fila: favorito + descargas — pool/favorites.php + BP_Download
   Mismo idioma que el resto de la tabla: reposo monocromo (--pdb-gray, filete
   --pdb-border, radio 2px como .pdbt-thumb) y hover en verde sólido con glifo
   blanco, igual que .pdb-mini-play. El verde en reposo SOLO comunica estado:
   corazón relleno = favorito, tick = ya descargado en ese formato.
   ========================================================================== */
.pdbt-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Mismo aire que el gap de columnas del grid: los 3 controles
       respiran como celdas, no como un racimo pegado */
    gap: 14px;
}
.pdbt-head .pdbt-actions { padding-right: 2px; }

/* Corazón: toggle sin caja (a diferencia de los chips de acción) */
.pdb-fav {
    appearance: none;
    background: none;
    border: 0;
    padding: 3px;
    cursor: pointer;
    color: var(--pdb-gray, #808080);
    line-height: 0;
    transition: color 0.2s ease;
}
.pdb-fav svg path { transition: fill 0.2s ease; }
/* Rojo corazón: el único rojo que ya existe en la web (.pdb-error / danger) */
.pdb-fav:hover,
.pdb-fav.pdb-fav-on { color: #dc3545; }
.pdb-fav.pdb-fav-on svg path { fill: currentColor; }
.pdb-fav:active svg { transform: scale(0.9); }

/* Chips de descarga: flecha con el formato compactado debajo */
.pdb-dl {
    appearance: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 42px;
    height: 36px;
    padding: 0 5px;
    border: 1px solid var(--pdb-border);
    border-radius: 2px;
    background: transparent;
    color: var(--pdb-gray, #808080);
    cursor: pointer;
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pdb-dl .pdb-dl-label {
    font-family: 'Jost', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.pdb-dl:hover {
    background: var(--pdb-primary, #01d85f);
    border-color: var(--pdb-primary, #01d85f);
    color: #fff;
}
.pdb-dl:disabled { cursor: progress; }

/* Descargando: se ocultan flecha y formato y gira el anillo del theme
   (mismo dibujo que .pdb-spinner / .pdb-bar-spinner, keyframes pdb-spin).
   El chip no cambia de tamaño: height y min-width son fijos. */
.pdb-dl.pdb-dl-working svg,
.pdb-dl.pdb-dl-working .pdb-dl-label { display: none; }
.pdb-dl.pdb-dl-working::after {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid var(--pdb-border);
    border-top-color: var(--pdb-primary, #01d85f);
    border-radius: 50%;
    animation: pdb-spin 0.8s linear infinite;
}
.pdb-dl.pdb-dl-working,
.pdb-dl.pdb-dl-working:hover {
    background: transparent;
    border-color: var(--pdb-border);
    color: var(--pdb-gray, #808080);
}

/* Tick persistente: ya descargado en ese formato (lo pinta PHP y lo fija JS) */
.pdb-dl .pdb-dl-ico-check { display: none; }
.pdb-dl.pdb-dl-done .pdb-dl-ico-arrow { display: none; }
.pdb-dl.pdb-dl-done .pdb-dl-ico-check { display: inline; }
.pdb-dl.pdb-dl-done {
    background: rgba(1, 216, 95, 0.08);
    border-color: rgba(1, 216, 95, 0.35);
    color: var(--pdb-primary, #01d85f);
}
.pdb-dl.pdb-dl-done:hover {
    background: var(--pdb-primary, #01d85f);
    border-color: var(--pdb-primary, #01d85f);
    color: #fff;
}

/* Sin cuota en el plan (agotada o formato no incluido): el chip sigue ahí
   —enseñar lo que se gana subiendo de plan es parte del asunto— pero
   apagado y con CANDADO en vez de flecha. Solo atenuarlo no bastaba: al
   lado de un MP3 gris, un FLAC gris más claro no dice "no disponible".
   Al pulsarlo sale el aviso. */
.pdb-dl .pdb-dl-ico-lock { display: none; }
.pdb-dl.pdb-dl-locked .pdb-dl-ico-arrow,
.pdb-dl.pdb-dl-locked .pdb-dl-ico-check { display: none; }
.pdb-dl.pdb-dl-locked .pdb-dl-ico-lock { display: inline; }

.pdb-dl.pdb-dl-locked,
.pdb-dl.pdb-dl-locked:hover {
    background: transparent;
    border-color: var(--pdb-border);
    color: rgba(255, 255, 255, 0.28);
    cursor: not-allowed;
}

body.light .pdb-dl.pdb-dl-locked,
body.light .pdb-dl.pdb-dl-locked:hover { color: rgba(32, 30, 41, 0.25); }

/* ==========================================================================
   Aviso flotante (bpToast): cuota agotada, formato fuera del plan…
   Placa oscura sobre el contenido, encima de la barra de reproducción.
   ========================================================================== */
.pdb-toast {
    position: fixed;
    right: 18px;
    bottom: 22px;
    z-index: 9995;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 380px;
    padding: 13px 16px;
    border: 1px solid var(--pdb-border);
    border-left: 2px solid #f5a623;
    border-radius: var(--pdb-radius, 3px);
    background: var(--pdb-secondary, #292633);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.pdb-toast.pdb-toast-in {
    opacity: 1;
    transform: translateY(0);
}

/* Con la barra de reproducción abierta, el aviso se sube por encima */
body.pdb-player-open .pdb-toast { bottom: 104px; }

.pdb-toast .pdb-toast-cta {
    flex: 0 0 auto;
    align-self: flex-start;
    padding: 5px 10px;
    border-radius: 2px;
    background: var(--pdb-primary, #01d85f);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

.pdb-toast .pdb-toast-cta:hover { background: var(--pdb-primary-dark, #00b04e); color: #fff; }

body.light .pdb-toast { color: var(--pdb-text, #333); }

@media (max-width: 575px) {
    .pdb-toast { right: 12px; left: 12px; max-width: none; }
}

/* Añadir a playlist: mismo idioma que el corazón (toggle sin caja);
   el estado "en alguna playlist" usa el morado del theme y cambia el
   plus por un check (doble glifo conmutado por CSS, como pdb-dl-done) */
.pdb-pl-add {
    appearance: none;
    background: none;
    border: 0;
    padding: 3px;
    cursor: pointer;
    color: var(--pdb-gray, #808080);
    line-height: 0;
    transition: color 0.2s ease;
}
.pdb-pl-add:hover,
.pdb-pl-add.pdb-pl-on { color: var(--pdb-primary, #01d85f); }
.pdb-pl-add .pdb-pl-ico-check { display: none; }
.pdb-pl-add.pdb-pl-on .pdb-pl-ico-plus { display: none; }
.pdb-pl-add.pdb-pl-on .pdb-pl-ico-check { display: inline; }

/* A 900px el grid encoge la columna de acciones a 120px */
/* Va con el corte de la retícula de la tabla (1023px) */
@media (max-width: 1023px) {
    .pdbt-actions { gap: 4px; }
    .pdb-dl { min-width: 30px; height: 30px; padding: 0 3px; }
    .pdb-dl .pdb-dl-label { font-size: 8px; }
    .pdb-dl svg { width: 12px; height: 12px; }
    .pdb-fav svg, .pdb-pl-add svg { width: 16px; height: 16px; }
}

/* ==========================================================================
   Playlists de usuario — pool/playlists.php
   ========================================================================== */

/* Popover "Add to playlist" (lo monta pdb-scripts.js en position:fixed) */
.pdb-pl-pop {
    position: fixed;
    z-index: 100000;
    width: 250px;
    background: var(--pdb-secondary);
    border: 1px solid var(--pdb-border);
    border-radius: var(--pdb-radius, 3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    font-family: 'Jost', sans-serif;
}
.pdb-pl-pop-head {
    padding: 10px 12px 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--pdb-gray);
}
.pdb-pl-pop-list { max-height: 220px; overflow: auto; }
.pdb-pl-pop-item {
    appearance: none;
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: none;
    border: 0;
    color: var(--pdb-text, #fff);
    cursor: pointer;
    text-align: left;
    font-size: 13px;
    font-family: inherit;
}
.pdb-pl-pop-item:hover { background: rgba(255, 255, 255, 0.04); }
body.light .pdb-pl-pop-item:hover { background: rgba(32, 30, 41, 0.05); }
.pdb-pl-pop-item .pdb-pl-cover { width: 32px; flex: none; gap: 1px; }
.pdb-pl-pop-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdb-pl-pop-count { color: var(--pdb-gray); font-size: 11px; }
.pdb-pl-pop-check { color: var(--pdb-primary, #01d85f); visibility: hidden; flex: none; }
.pdb-pl-pop-has .pdb-pl-pop-check { visibility: visible; }
.pdb-pl-pop-empty { padding: 10px 12px; color: var(--pdb-gray); font-size: 12px; }
.pdb-pl-pop-loading { display: flex; justify-content: center; padding: 14px; }
.pdb-pl-pop-ring {
    display: block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--pdb-border);
    border-top-color: var(--pdb-primary, #01d85f);
    border-radius: 50%;
    animation: pdb-spin 0.8s linear infinite;
}
.pdb-pl-pop-new {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border-top: 1px solid var(--pdb-border);
}
/* html body: ganar SIEMPRE al global del theme (que además mete
   width:100% y margin 0 0 15px — eso sí se neutraliza). La ALTURA se
   queda en los 50px estándar de todos los inputs de la web; lo único
   que se ajusta es el botón Create, a esa misma altura. */
html body .pdb-pl-pop-new input {
    flex: 1;
    width: auto;
    min-width: 0;
    height: 50px;
    margin: 0;
    background: var(--pdb-dark);
    border: 1px solid var(--pdb-border);
    border-radius: 2px;
    color: var(--pdb-text, #fff);
    font-size: 13px;
    padding: 0 12px;
    font-family: 'Jost', sans-serif;
}
html body .pdb-pl-pop-new input:focus { border-color: var(--pdb-primary, #01d85f); outline: none; }
.pdb-pl-pop-new button {
    height: 50px;
    padding-top: 0;
    padding-bottom: 0;
    flex: none;
}

/* Botones mini estilo theme (la voz de .pdbx-search-btn en pequeño) */
.pdb-pl-pop-new button,
.pdb-pl-new-btn,
.pdb-pl-new-create,
.pdb-pl-rename-btn,
.pdb-pl-rename-save {
    appearance: none;
    background: var(--pdb-purple, #7635f5);
    color: #fff;
    border: 0;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 7px 12px;
    cursor: pointer;
    transition: background 0.2s ease;
    font-family: 'Jost', sans-serif;
}
.pdb-pl-pop-new button:hover,
.pdb-pl-new-btn:hover,
.pdb-pl-new-create:hover,
.pdb-pl-rename-btn:hover,
.pdb-pl-rename-save:hover { background: var(--pdb-primary, #01d85f); }

.pdb-pl-delete-btn {
    appearance: none;
    background: transparent;
    color: var(--pdb-gray, #808080);
    border: 1px solid var(--pdb-border);
    border-radius: 2px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 12px;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    font-family: 'Jost', sans-serif;
}
.pdb-pl-delete-btn:hover { color: #dc3545; border-color: rgba(220, 53, 69, 0.5); }

/* Página "My Playlists": el título lo pinta la plantilla de la página y
   las cards son las bpx del resto de la web; aquí solo la fila del botón */
.pdb-pl-actions-head { justify-content: flex-end; margin-bottom: 14px; }

/* Variantes del collage bpx cuando la playlist aún no tiene 4 carátulas */
.pdbx-collage-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.pdbx-collage-2 { grid-template-rows: 1fr; }
.pdbx-collage-3 img:first-child { grid-row: span 2; }
.pdbx-collage-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.25);
    background: linear-gradient(180deg, #0b0a12 0%, #151322 100%);
}
.pdb-pl-new-form,
.pdb-pl-rename-form { gap: 8px; margin: 0 0 16px; }
.pdb-pl-new-form:not([hidden]),
.pdb-pl-rename-form:not([hidden]) { display: flex; align-items: center; }
/* html body: neutralizar solo width/margin del global de inputs del
   theme; la altura se queda en sus 50px estándar y el botón la iguala */
html body .pdb-pl-new-form input,
html body .pdb-pl-rename-form input {
    height: 50px;
    margin: 0;
    background: var(--pdb-secondary);
    border: 1px solid var(--pdb-border);
    border-radius: 2px;
    color: var(--pdb-text, #fff);
    font-size: 13px;
    padding: 0 15px;
    min-width: 0;
    width: 260px;
    font-family: 'Jost', sans-serif;
}
html body .pdb-pl-new-form input:focus,
html body .pdb-pl-rename-form input:focus { border-color: var(--pdb-primary, #01d85f); outline: none; }
.pdb-pl-new-form button,
.pdb-pl-rename-form button {
    height: 50px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 20px;
    padding-right: 20px;
    flex: none;
}

/* Portada autogenerada (popover y cabecera del detalle): collage con las
   artworks de las primeras canciones (1 a sangre, 2 a mitades, 3 con la
   primera a doble alto, 4 mosaico). No hay portada propia a propósito. */
.pdb-pl-cover {
    display: grid;
    width: 100%;
    aspect-ratio: 1 / 1;
    gap: 2px;
    background: linear-gradient(180deg, #0b0a12 0%, #151322 100%);
    border-radius: 2px;
    overflow: hidden;
}
.pdb-pl-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdb-pl-cover-2 { grid-template-columns: 1fr 1fr; }
.pdb-pl-cover-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.pdb-pl-cover-3 img:first-child { grid-row: span 2; }
.pdb-pl-cover-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.pdb-pl-cover-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.25);
}

/* Detalle: cabecera con collage pequeño y acciones */
.pdb-pl-back { color: var(--pdb-gray); font-size: 13px; }
.pdb-pl-back:hover { color: var(--pdb-primary, #01d85f); }
.pdb-pl-head {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
}
.pdb-pl-head .pdb-pl-cover { width: 96px; flex: none; }
.pdb-pl-head-info { min-width: 0; }
.pdb-pl-head-info .pdb-section-title { margin: 0; }
.pdb-pl-meta { color: var(--pdb-gray); font-size: 13px; display: block; margin: 4px 0 10px; }
.pdb-pl-head-actions { display: flex; gap: 8px; }

/* Reordenar: el número de fila es el asa de arrastre */
.pdb-pl-tracks { position: relative; } /* containing block del helper absoluto */
.pdb-pl-row .pdb-pl-handle { cursor: grab; }
.pdb-pl-row .pdb-pl-handle:active { cursor: grabbing; }
.pdb-pl-row.ui-sortable-helper {
    width: 100% !important;
    background: var(--pdb-dark);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.pdb-pl-tracks .ui-sortable-placeholder {
    visibility: visible !important;
    height: 60px;
    background: rgba(1, 216, 95, 0.05);
    border-bottom: 1px solid var(--pdb-border);
}
.pdb-pl-hint { color: var(--pdb-gray); font-size: 12px; margin-top: 10px; }

/* Quitar de la playlist (X, hover rojo como el corazón) */
.pdb-pl-remove {
    appearance: none;
    background: none;
    border: 0;
    padding: 3px;
    cursor: pointer;
    color: var(--pdb-gray, #808080);
    line-height: 0;
    transition: color 0.2s ease;
}
.pdb-pl-remove:hover { color: #dc3545; }

/* En las cards */
.pdb-header { position: relative; }
.pdb-card-fav {
    position: absolute;
    top: 0;
    right: 0;
}

/* ── Filtros de "Mis favoritos" ───────────────────────────────────────────
   Chips por catálogo (Open Format / Beatport) y por género. Píldoras, no
   pestañas: no navegan, solo esconden filas, y conviven varias líneas
   cuando el usuario acumula muchos géneros. El activo usa el verde de marca
   igual que el subrayado de .pdbx-search-tab. */
html body .pdbx-fav-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 15px 14px;
}

html body .pdbx-fav-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #a9a9b3;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--pdb-border);
    border-radius: 999px;
    cursor: pointer;
    transition: var(--pdb-transition);
}

html body .pdbx-fav-chip:hover {
    color: #FFF;
    border-color: rgba(255, 255, 255, 0.28);
}

html body .pdbx-fav-chip.is-active {
    color: #0d0c12;
    background: #01d85f;
    border-color: #01d85f;
}

/* El contador va más apagado que la etiqueta, salvo en el chip activo */
html body .pdbx-fav-n {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.65;
}

body.light .pdbx-fav-chip {
    color: #5a5a66;
    background: rgba(0, 0, 0, 0.04);
}

body.light .pdbx-fav-chip:hover {
    color: #201e29;
    border-color: rgba(0, 0, 0, 0.25);
}

html body .pdbx-fav-empty {
    padding: 0 15px 12px;
}

/*--------------------------------------------------------
/ Invitados (body.pdb-guest): enlaces del chrome con gate de
/ login/suscripción. Los templates les ponen .pdb-locked solo
/ sin sesión: se ven igual pero atenuados (candado en los de
/ lista del sidebar) y el click lleva al login — handler en
/ pdb-scripts.js. Account y Home quedan libres.
/---------------------------------------------------------*/
body.pdb-guest .pdb-locked {
    opacity: .45;
    transition: opacity ease 300ms;
}

body.pdb-guest .pdb-locked:hover {
    opacity: .8;
}

/* Candado a la derecha del texto en los enlaces de lista del sidebar
   (en la botonera y el nav superior el icono va encima del texto y el
   candado no cabe: ahí solo se atenúa) */
body.pdb-guest a.list-sidebar0.pdb-locked::after {
    content: "\e6c2"; /* icon-ClosedLock (Stroke-Gap-Icons) */
    font-family: 'Stroke-Gap-Icons';
    font-size: 11px;
    margin-left: 8px;
    opacity: .8;
}

/* Ventana emergente de login para invitados (#pdb-login-modal, wp_footer en
   functions.php): la abren los .pdb-locked y los enlaces a /my-account/.
   El form reutiliza los estilos del login de invitados (.pdb-account-guest
   + clases Woo); el panel es placa sólida #292633 sobre el fondo atenuado */
#pdb-login-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
}

#pdb-login-modal.open {
    display: block;
}

#pdb-login-modal .pdb-login-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 15, 21, .78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

#pdb-login-modal .pdb-login-panel {
    position: relative;
    max-width: 420px;
    width: 92%;
    margin: 12vh auto 0;
    padding: 24px 26px 26px;
    background: #292633;
    border-radius: 3px;
}

#pdb-login-modal .pdb-login-close {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    background: transparent;
    color: #808080;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: color ease 300ms;
}

#pdb-login-modal .pdb-login-close:hover {
    color: #FFF;
}

/* El submit de Woo va flotado (woocommerce.css): sin esto los enlaces de
   abajo fluyen a su lado y se salen del panel */
#pdb-login-modal .woocommerce-form-login__submit {
    float: none;
    width: 100%;
}

#pdb-login-modal .pdb-login-links {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    clear: both;
}

body.pdb-login-modal-open {
    overflow: hidden;
}

/* Vistas del modal de login (login / lost password) */
#pdb-login-modal .pdb-login-view[hidden] {
    display: none;
}

/* Los h2 de las vistas van DENTRO de .pdb-login-view (no son hijos directos
   de .woocommerce) y la regla `.pdb-account-guest .woocommerce > h2` de
   theme.css no los alcanza — mismo tratamiento aquí */
#pdb-login-modal .pdb-login-view h2 {
    font-size: 16px;
    font-weight: 700;
    color: #FFF;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 16px;
}

#pdb-login-modal .pdb-login-hint {
    color: #808080;
    font-size: 13px;
    margin: 0 0 14px;
}

/* Aviso de error y confirmación del lost password dentro del modal */
#pdb-login-modal .pdb-login-notice .woocommerce-error {
    margin: 0 0 16px;
}

#pdb-login-modal .pdb-login-sent {
    color: #b9b6c4;
    font-size: 14px;
    margin: 0 0 16px;
}

/* ============================================================
   Landing de invitados (nouser.php) — hero, ejemplos del
   catálogo y features. Prefijo pdb-guest-*.
   ============================================================ */

/* --- Hero --- */
.pdb-guest-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 40px;
    align-items: center;
    padding: 18px 0 6px;
}

.pdb-guest-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    margin: 0 0 18px;
    border-radius: 2px;
    background: rgba(1, 216, 95, 0.1);
    border: 1px solid rgba(1, 216, 95, 0.25);
    color: var(--pdb-primary);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.pdb-guest-hero h1 {
    color: #fff;
    font-size: clamp(30px, 3.4vw, 46px);
    font-weight: 700;
    line-height: 1.12;
    margin: 0 0 18px;
}

.pdb-guest-hero-sub {
    color: #b9b6c4;
    font-size: 15px;
    line-height: 1.75;
    max-width: 560px;
    margin: 0 0 26px;
}

.pdb-guest-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pdb-guest-hero-cta .btt_btn {
    width: auto;
    min-width: 168px;
    text-align: center;
}

/* CTA secundaria: placa oscura con borde, sin color de marca */
.btt_btn.pdb-guest-btn-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    line-height: 43px;
}

.btt_btn.pdb-guest-btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.4);
}

.pdb-guest-hero-collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 420px;
    justify-self: end;
}

.pdb-guest-hero-collage a {
    display: block;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.pdb-guest-hero-collage img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.pdb-guest-hero-collage a:hover img {
    transform: scale(1.05);
}

/* Las dos portadas de la derecha, desplazadas: rompe la retícula */
.pdb-guest-hero-collage a:nth-child(even) {
    transform: translateY(14px);
}

@media (max-width: 1199px) {
    .pdb-guest-hero {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .pdb-guest-hero-collage {
        justify-self: start;
        max-width: 380px;
    }
}

/* --- Chip "Live from the catalog" en cabeceras de sección --- */
.pdb-guest-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-right: auto; /* pega el chip al título en el flex space-between */
    color: #808080;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.pdb-guest-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pdb-primary);
    box-shadow: 0 0 0 3px rgba(1, 216, 95, 0.18);
}

@media (max-width: 640px) {
    .pdb-guest-live { display: none; }
}

/* --- Features (reutiliza .icon_box_02 del theme) --- */
.pdb-guest-features-row [class*="col-"] {
    display: flex; /* iguala alturas de las 6 tarjetas */
    margin-bottom: 24px;
}

.pdb-guest-features-row .icon_box_02 {
    width: 100%;
}

/* --- Ejemplo Top 10: lista compacta a dos columnas --- */
.pdb-guest-top10 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
}

@media (max-width: 991px) {
    .pdb-guest-top10 { grid-template-columns: 1fr; }
}

.pdb-guest-t10row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.03);
    transition: background 0.2s ease;
}

.pdb-guest-t10row:hover {
    background: rgba(255, 255, 255, 0.07);
}

.pdb-guest-t10rank {
    flex: 0 0 22px;
    text-align: center;
    color: var(--pdb-primary);
    font-size: 14px;
    font-weight: 700;
}

.pdb-guest-t10art {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 2px;
    object-fit: cover;
}

.pdb-guest-t10main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.pdb-guest-t10title {
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdb-guest-t10artists {
    color: #b9b6c4;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdb-guest-t10meta {
    flex: 0 0 auto;
    color: #808080;
    font-size: 11px;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .pdb-guest-t10meta { display: none; }
}

/* ==========================================================================
   MÓVIL — adaptación de lo que en pantalla estrecha se rompía o desaparecía
   Auditado con capturas a 390 px (logueado y sin loguear) el 2026-08-14.
   Todo va en @media: por encima de 1024 px el escritorio queda intacto.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Cabecera: la marca vuelve a la primera pantalla
   En móvil el sidebar (donde vive el logo) se manda debajo del contenido, así
   que arriba solo quedaban un botón MENU verde de 90 px que ocupaba el 75 %
   del ancho y una lupa: cero identidad. Ahora la barra mide 64 px y reparte
   marca a la izquierda / lupa y menú como dos cuadrados a la derecha.
   -------------------------------------------------------------------------- */
/* De 992 px para arriba el sidebar sigue a la vista con su logo y su menú:
   ahí los duplicados del header sobran (se veían dos logos) */
@media (min-width: 992px) {
    .pdb-mob-brand,
    .pdb-mob-extra { display: none; }
}

/* Una sola columna ya desde 991 px. Entre 768 y 991 el contenido se quedaba
   en el 58 % (~430 px) con el sidebar al lado: la tabla volvía a recortar los
   títulos ("Movin' …") y se veían dos logos, el del header y el del sidebar. */
@media (max-width: 991px) {
    html body .col-lg-8.contentColumn,
    html body .col-lg-4.profileColumn {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 1023px) {
    html body .header {
        min-height: 64px;
        height: 64px;
        margin-bottom: 20px;
    }

    html body .pdb-mob-brand {
        position: absolute;
        left: 16px;
        top: 0;
        bottom: 0;
        z-index: 6;
        display: flex;
        align-items: center;
    }

    html body .pdb-mob-brand img {
        display: block;
        width: auto;
        height: 30px;
    }

    /* Cuadrado verde a la derecha; la palabra "Menu" ya no cabe ni hace falta */
    html body .menu_btn {
        left: auto;
        right: 0;
        width: 64px;
        height: 64px;
        line-height: 64px;
        font-size: 0;
        letter-spacing: 0;
    }

    html body .menu_btn i {
        font-size: 20px;
        margin: 0;
    }

    html body .headerSearch .sidebarToggler {
        position: absolute;
        top: 0;
        right: 64px;
        float: none;
        width: 64px;
        height: 64px;
        background: transparent;
    }

    /* El campo desplegado tapa la barra hasta los dos botones (y el logo:
       mientras se busca, buscar es lo único que importa) */
    html body .headerSearch.is-open .search-field {
        left: 0;
        right: 128px;
        width: auto;
        height: 64px;
        padding: 0 16px;
        z-index: 7;
    }

    /* --- Desplegable: atajos a lo que vive en el sidebar (head.php) --- */
    html body .mainMenu {
        max-height: calc(100vh - 64px);
    }

    html body .mainMenu .pdb-mob-extra {
        margin: 0;
        padding: 0;
        display: block;
    }

    html body .mainMenu .pdb-mob-extra > li > a {
        padding: 15px 20px;
        text-align: left;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    html body .mainMenu .pdb-mob-extra-head {
        list-style: none;
        padding: 16px 20px 8px;
        background: rgba(0, 0, 0, 0.22);
        color: var(--pdb-gray, #808080);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    html body .mainMenu .pdb-mob-extra-head:after { display: none; }
}

/* --------------------------------------------------------------------------
   2. Tabla de tracks → ficha de tres alturas
   Es lo que peor estaba: con 7 columnas fijas en 390 px al título le quedaban
   40 px ("Mo…", "T", "D") y la banda de botones se salía del contenedor.
   En móvil cada track pasa a: portada + título/artistas, la línea de datos
   debajo y los botones en su propia banda, con área de dedo de verdad.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* La cabecera de columnas se apilaba en cuatro líneas superpuestas y en
       este formato no orienta nada */
    html body .pdbt-row.pdbt-head { display: none; }

    html body .pdbt-row {
        grid-template-columns: 24px 52px minmax(0, 1fr);
        grid-template-areas:
            "num art main"
            "num art meta"
            "act act act";
        gap: 2px 10px;
        padding: 8px 12px;
    }

    html body .pdbt-table.pdbt-no-art .pdbt-row {
        grid-template-columns: 24px minmax(0, 1fr);
        grid-template-areas:
            "num main"
            "num meta"
            "act act";
    }

    html body .pdbt-table.pdbt-no-rank .pdbt-row {
        grid-template-columns: 52px minmax(0, 1fr);
        grid-template-areas:
            "art main"
            "art meta"
            "act act";
    }

    html body .pdbt-table.pdbt-no-art.pdbt-no-rank .pdbt-row {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "main"
            "meta"
            "act";
    }

    html body .pdbt-num     { grid-area: num; justify-self: center; }
    html body .pdbt-art     { grid-area: art; width: 48px; height: 48px; }
    html body .pdbt-main    { grid-area: main; }
    html body .pdbt-bpmkey  { grid-area: meta; }
    html body .pdbt-actions { grid-area: act; }
    html body .pdbt-rg,
    html body .pdbt-date    { display: none; }

    html body .pdbt-thumb,
    html body .pdbt-thumb img,
    html body .pdbt-play {
        width: 48px;
        height: 48px;
    }

    /* Dos líneas: con el ancho recuperado casi todo entra, pero los remixes
       largos ("… (Extended Mix)") necesitan la segunda */
    html body .pdbt-main .pdbt-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        overflow: hidden;
    }

    /* BPM y clave (o los chips de formato del historial) en horizontal */
    html body .pdbt-bpmkey {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0 8px;
    }

    html body .pdbt-bpmkey .pdbt-key:before {
        content: "·";
        margin-right: 8px;
        opacity: 0.5;
    }

    /* Banda de acciones: filete de separación y botones tocables */
    html body .pdbt-actions {
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px solid var(--pdb-border);
        gap: 4px;
    }

    html body .pdbt-actions .pdb-dl {
        flex-direction: row;
        gap: 6px;
        min-width: 0;
        height: 32px;
        padding: 0 10px;
    }

    html body .pdbt-actions .pdb-dl svg { width: 14px; height: 14px; }
    html body .pdbt-actions .pdb-dl .pdb-dl-label { font-size: 10px; }

    html body .pdbt-actions .pdb-fav,
    html body .pdbt-actions .pdb-pl-add { padding: 6px 8px; }

    html body .pdbt-actions .pdb-fav svg,
    html body .pdbt-actions .pdb-pl-add svg { width: 20px; height: 20px; }
}

/* --------------------------------------------------------------------------
   3. Cabeceras de sección: el "ver todos" debajo, no peleando por el ancho
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
    html body .pdbx-section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    html body .pdbx-section-head .pdbx-section-title {
        margin-bottom: 8px !important;
    }
}

/* --------------------------------------------------------------------------
   4. Fichas del grid y del buscador
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* A dos columnas las mini-fichas dejaban 63 px de texto y el título salía
       cortado a media letra: a una columna caben nombre y artista enteros */
    html body .pdbx-mini-list .pdbx-grid { grid-template-columns: 1fr; }

    html body .pdbx-mini-list .pdbx-title,
    html body .pdbx-mini-list .pdbx-artists { text-overflow: ellipsis; }
}

/* En táctil el play de las fichas se muestra siempre (no hay hover). Su
   tamaño va en % de la portada con un mínimo de 44 px, que sobre la
   miniatura de 48 px del formato mini la tapaba entera. */
@media (hover: none) {
    html body .pdbx-mini-list .pdbx-play {
        width: 26px;
        min-width: 0;
    }
}

@media (max-width: 640px) {
    /* El botón de play se comía la portada en la retícula de dos columnas */
    html body .pdbx-play { width: clamp(38px, 26%, 48px); }
}

/* La pastilla de género no encogía (flex-shrink: 0) y con nombres largos
   —"Techno (Peak Time / Driving)"— se salía de la ficha y arrastraba TODA
   la página en horizontal a dos columnas. No lleva media query: la ficha
   puede quedarse estrecha en cualquier tamaño. */
html body .pdbx-meta { flex-wrap: wrap; }

html body .pdbx-genre {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5. Foto de artista: círculo de verdad (no solo en móvil)
   La regla histórica .pdb-artist-image (200×200) es de cuando la clase iba en
   un <div> contenedor; hoy la lleva el <img>, cuya plantilla fija width e
   aspect-ratio pero NO height — así que el alto de 200 px sobrevivía y la
   foto salía como elipse en todos los tamaños.
   -------------------------------------------------------------------------- */
html body img.pdb-artist-image { height: auto; }

/* --------------------------------------------------------------------------
   6. Barra de reproducción a dos alturas
   En una sola fila no cabía nada: el timeline quedaba en 2 px (waveform
   invisible, imposible buscar dentro del track) y el contador desaparecía.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    html body #pdb-player-bar {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr) 42px auto minmax(58px, auto);
        grid-template-areas:
            "art  info play full close"
            "line line line line time";
        align-items: center;
        gap: 6px 8px;
        height: auto;
        padding: 8px 10px 10px;
    }

    html body #pdb-player-bar .pdb-bar-art {
        grid-area: art;
        flex: none;
        width: 46px;
        height: 46px;
    }

    html body #pdb-player-bar .pdb-bar-info   { grid-area: info; flex: none; min-width: 0; }
    html body #pdb-player-bar .pdb-bar-toggle { grid-area: play; }
    html body #pdb-player-bar .pdb-bar-full   { grid-area: full; }
    html body #pdb-player-bar .pdb-bar-close  { grid-area: close; justify-self: end; }
    html body #pdb-player-bar .pdb-bar-time   { grid-area: time; justify-self: end; }

    /* 54 px es el alto fijo del canvas de wavesurfer: no se toca */
    html body #pdb-player-bar .pdb-bar-timeline {
        grid-area: line;
        flex: none;
        width: 100%;
        min-width: 0;
    }

    body.pdb-player-open { padding-bottom: 140px !important; }
}