@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&family=DM+Sans:wght@300;400;500&display=swap');

/* ── Barra principal ── */
.bl-bar {
    display:       flex;
    align-items:   center;
    gap:           0;
    font-family:   'DM Sans', sans-serif;
    background:    #ffffff;
    border:        1px solid #d0d0d0;
    border-left:   3px solid #111111;
    border-radius: 3px;
    margin:        0 0 0 0;
    overflow:      hidden;
    transition:    box-shadow 0.3s ease;
}

.bl-bar:hover {
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}

/* ── Barra de progreso (debajo de todo) ── */
.bl-progress-bar {
    height:        2px;
    background:    #eeeeee;
    margin-bottom: 2rem;
}

.bl-progress-fill {
    height:     100%;
    width:      0%;
    background: #111111;
    transition: width 0.5s linear;
}

/* ── Sección audio ── */
.bl-audio {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    padding:     0.75rem 1.25rem;
    flex:        1;
    min-width:   0;
}

.bl-audio-icon {
    flex-shrink: 0;
    width:  22px;
    height: 22px;
    color:  #111111;
}

.bl-audio-icon svg { width: 100%; height: 100%; }

.bl-audio-info {
    display:        flex;
    flex-direction: column;
    gap:            1px;
    min-width:      0;
    flex:           1;
}

.bl-audio-label {
    font-family:    'Playfair Display', serif;
    font-size:      0.88rem;
    font-weight:    600;
    color:          #111111;
    letter-spacing: 0.01em;
    white-space:    nowrap;
}

.bl-audio-status {
    font-size:      0.63rem;
    font-weight:    400;
    color:          #999999;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space:    nowrap;
    transition:     color 0.3s;
}

.bl-bar.playing .bl-audio-status { color: #111111; }

/* ── Controles audio ── */
.bl-audio-controls {
    display:     flex;
    align-items: center;
    gap:         4px;
    flex-shrink: 0;
}

.bl-btn {
    background:      transparent;
    border:          1.5px solid #d0d0d0;
    border-radius:   50%;
    width:  32px;
    height: 32px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    color:           #111111;
    padding:         0;
    transition:      all 0.18s ease;
}

.bl-btn svg { width: 11px; height: 11px; }
.bl-play svg { margin-left: 2px; }

.bl-btn:hover {
    background:   #111111;
    border-color: #111111;
    color:        #ffffff;
}

/* ── Velocidad ── */
.bl-speed {
    display:     flex;
    align-items: center;
    gap:         2px;
    flex-shrink: 0;
}

.bl-speed-btn {
    background:     transparent;
    border:         1px solid transparent;
    border-radius:  2px;
    padding:        2px 5px;
    font-family:    'DM Sans', sans-serif;
    font-size:      0.63rem;
    font-weight:    500;
    letter-spacing: 0.04em;
    color:          #aaaaaa;
    cursor:         pointer;
    transition:     all 0.2s;
}

.bl-speed-btn:hover,
.bl-speed-btn.active {
    color:        #111111;
    border-color: #d0d0d0;
}

/* ── Divisor vertical ── */
.bl-divider {
    width:      1px;
    height:     36px;
    background: #e0e0e0;
    flex-shrink:0;
}

/* ── Sección tamaño ── */
.bl-size {
    display:     flex;
    align-items: center;
    gap:         0.6rem;
    padding:     0.75rem 1rem 0.75rem 1rem;
    flex-shrink: 0;
}

.bl-size-label {
    font-size:      0.63rem;
    font-weight:    400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          #aaaaaa;
    white-space:    nowrap;
}

.bl-size-controls {
    display:     flex;
    align-items: center;
    gap:         3px;
}

.bl-size-btn {
    background:      transparent;
    border:          1.5px solid #d0d0d0;
    border-radius:   3px;
    cursor:          pointer;
    color:           #111111;
    font-family:     'DM Sans', sans-serif;
    font-weight:     500;
    line-height:     1;
    transition:      all 0.18s ease;
    padding:         0;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.bl-size-btn[data-action="decrease"] { font-size: 0.72rem; width: 28px; height: 28px; }
.bl-size-btn.bl-size-reset           { font-size: 0.88rem; width: 32px; height: 32px; border-color: #111; }
.bl-size-btn.bl-size-large           { font-size: 1.05rem; width: 36px; height: 36px; }

.bl-size-btn:hover,
.bl-size-btn.bl-active {
    background:   #111111;
    border-color: #111111;
    color:        #ffffff;
}

/* ── Pulse mientras reproduce ── */
@keyframes bl-pulse {
    0%,100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

.bl-bar.playing .bl-audio-icon {
    animation: bl-pulse 2s ease-in-out infinite;
}

.bl-hidden { display: none !important; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .bl-audio-info  { display: none; }
    .bl-size-label  { display: none; }
    .bl-audio       { gap: 0.5rem; padding: 0.75rem 0.75rem; }
    .bl-size        { padding: 0.75rem 0.75rem; }
}