/* =============================================
   AUDIO DATE PLAYER — Stylesheet
   Estética: dark studio / radio nocturna
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

/* ── Variables ── */
.adp-wrapper {
    --adp-bg:         #ffffff;
    --adp-surface:    #f3f3f4;
    --adp-surface2:   #ffd24c;
    --adp-border:     #34343a;
    --adp-accent:     #b1862d;
    --adp-accent2:    #ff824f;
    --adp-text:       #494949;
    --adp-muted:      #6b6b84;
    --adp-radius:     12px;
    --adp-font-mono:  'Inter', sans-serif;
    --adp-font-main:  'Inter', sans-serif;
    --adp-shadow:     0 24px 64px rgba(0,0,0,.7);

    font-family: var(--adp-font-main);
    background:  var(--adp-bg);
    border:      1px solid var(--adp-border);
    border-radius: var(--adp-radius);
    padding:     0;
    max-width:   560px;
    margin:      2em auto;
    box-shadow:  var(--adp-shadow);
    overflow:    hidden;
    color:       var(--adp-text);
    user-select: none;
}

/* ── Header ── */
.adp-header {
    display:         flex;
    align-items:     center;
    gap:             14px;
    padding:         18px 22px 16px;
    background:      var(--adp-surface);
    border-bottom:   1px solid var(--adp-border);
}

.adp-logo {
    flex-shrink: 0;
}

.adp-wave-icon {
    width:  40px;
    height: 24px;
    fill:   var(--adp-accent);
    filter: drop-shadow(0 0 6px var(--adp-accent));
}

/* Animar barras del ícono de onda cuando reproduce */
.adp-wrapper.is-playing .adp-wave-icon rect {
    transform-origin: center bottom;
    animation: adpBarBounce 0.8s ease-in-out infinite alternate;
}
.adp-wrapper.is-playing .adp-wave-icon rect:nth-child(1) { animation-delay: 0s;    }
.adp-wrapper.is-playing .adp-wave-icon rect:nth-child(2) { animation-delay: 0.1s;  }
.adp-wrapper.is-playing .adp-wave-icon rect:nth-child(3) { animation-delay: 0.2s;  }
.adp-wrapper.is-playing .adp-wave-icon rect:nth-child(4) { animation-delay: 0.05s; }
.adp-wrapper.is-playing .adp-wave-icon rect:nth-child(5) { animation-delay: 0.15s; }
.adp-wrapper.is-playing .adp-wave-icon rect:nth-child(6) { animation-delay: 0.25s; }
.adp-wrapper.is-playing .adp-wave-icon rect:nth-child(7) { animation-delay: 0.08s; }

@keyframes adpBarBounce {
    from { transform: scaleY(0.4); }
    to   { transform: scaleY(1);   }
}

.adp-header-info {
    flex:        1;
    min-width:   0;
    display:     flex;
    flex-direction: column;
    gap:         3px;
}

.adp-title {
    font-size:   11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:       var(--adp-muted);
    margin:      0;
}

.adp-date-badge {
    font-family: var(--adp-font-mono);
    font-size:   18px;
    font-weight: 700;
    color:       var(--adp-accent);
    letter-spacing: 1px;
}

/* Selector de fechas */
.adp-folder-selector { margin-left: auto; }
.adp-select {
    background:  var(--adp-surface2);
    border:      1px solid var(--adp-border);
    color:       var(--adp-text);
    font-family: var(--adp-font-mono);
    font-size:   12px;
    padding:     6px 10px;
    border-radius: 6px;
    cursor:      pointer;
    outline:     none;
    transition:  border-color .2s;
}
.adp-select:hover  { border-color: var(--adp-accent); }
.adp-select option { background: #1e1e28; }

/* ── Main Player ── */
.adp-main-player {
    padding: 24px 22px 20px;
    background: var(--adp-surface);
    border-bottom: 1px solid var(--adp-border);
}

.adp-now-playing {
    display:   flex;
    flex-direction: column;
    gap:       4px;
    margin-bottom: 20px;
    min-height: 48px;
}

.adp-now-label {
    font-size:   9px;
    font-weight: 700;
    letter-spacing: 3px;
    color:       var(--adp-accent2);
    text-transform: uppercase;
    font-family: var(--adp-font-mono);
}

.adp-now-title {
    font-size:   20px;
    font-weight: 800;
    line-height: 1.2;
    color:       var(--adp-text);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

/* ── Controls ── */
.adp-controls {
    display:     flex;
    align-items: center;
    justify-content: center;
    gap:         12px;
    margin-bottom: 20px;
}

.adp-btn {
    background:  transparent;
    border:      none;
    cursor:      pointer;
    display:     flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition:  all .18s ease;
    padding:     0;
    color:       var(--adp-muted);
}
.adp-btn svg { fill: currentColor; }
.adp-btn:hover { color: var(--adp-text); }

.adp-btn-prev,
.adp-btn-next {
    width:  36px;
    height: 36px;
}
.adp-btn-prev svg,
.adp-btn-next svg {
    width:  24px;
    height: 24px;
}

.adp-btn-main {
    width:   60px;
    height:  60px;
    background: var(--adp-accent);
    color:   #0d0d10;
    box-shadow: 0 0 24px rgba(232,255,71,.35);
}
.adp-btn-main svg {
    width:  28px;
    height: 28px;
}
.adp-btn-main:hover {
    transform: scale(1.07);
    box-shadow: 0 0 34px rgba(232,255,71,.55);
    color: #0d0d10;
}
.adp-btn-main:active { transform: scale(0.96); }

/* ── Progress ── */
.adp-progress-area {
    display:     flex;
    align-items: center;
    gap:         10px;
    margin-bottom: 14px;
}

.adp-time {
    font-family: var(--adp-font-mono);
    font-size:   11px;
    color:       var(--adp-muted);
    white-space: nowrap;
    min-width:   32px;
}
#adp-duration { text-align: right; }

.adp-progress-bar {
    flex:        1;
    height:      4px;
    background:  var(--adp-border);
    border-radius: 4px;
    cursor:      pointer;
    position:    relative;
}

.adp-progress-fill {
    height:      100%;
    width:       0%;
    background:  var(--adp-accent);
    border-radius: 4px;
    transition:  width .1s linear;
    position:    relative;
}

.adp-progress-thumb {
    position:    absolute;
    top:         50%;
    left:        0%;
    transform:   translate(-50%, -50%);
    width:       12px;
    height:      12px;
    border-radius: 50%;
    background:  var(--adp-accent);
    box-shadow:  0 0 8px var(--adp-accent);
    opacity:     0;
    transition:  opacity .2s, left .1s linear;
}
.adp-progress-bar:hover .adp-progress-thumb { opacity: 1; }

/* ── Volume ── */
.adp-volume-area {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.adp-vol-icon {
    width:   18px;
    height:  18px;
    fill:    var(--adp-muted);
    flex-shrink: 0;
}

.adp-volume-slider {
    -webkit-appearance: none;
    flex:        1;
    height:      3px;
    background:  var(--adp-border);
    border-radius: 3px;
    cursor:      pointer;
    accent-color: var(--adp-accent);
    max-width:   120px;
}
.adp-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:   12px;
    height:  12px;
    border-radius: 50%;
    background: var(--adp-accent);
    cursor:  pointer;
}
.adp-volume-slider::-moz-range-thumb {
    width:   12px;
    height:  12px;
    border:  none;
    border-radius: 50%;
    background: var(--adp-accent);
    cursor:  pointer;
}

/* ── Tracklist ── */
.adp-tracklist {
    list-style: none;
    margin:     0;
    padding:    0;
    background: var(--adp-bg);
}

.adp-track {
    display:     flex;
    align-items: center;
    gap:         12px;
    padding:     13px 22px;
    cursor:      pointer;
    border-bottom: 1px solid var(--adp-border);
    transition:  background .15s;
    position:    relative;
}
.adp-track:last-child { border-bottom: none; }
.adp-track:hover { background: var(--adp-surface); }
.adp-track:hover .adp-track-num { opacity: 0; }
.adp-track:hover .adp-track-bars span { background: var(--adp-accent); }

.adp-track-active {
    background: var(--adp-surface2) !important;
}
.adp-track-active .adp-track-num { opacity: 0; }
.adp-track-active .adp-track-bars { opacity: 1 !important; }

.adp-track-num {
    font-family: var(--adp-font-mono);
    font-size:   11px;
    color:       var(--adp-muted);
    width:       20px;
    text-align:  center;
    flex-shrink: 0;
    transition:  opacity .15s;
}

/* Mini barras animadas en el track activo */
.adp-track-bars {
    display:    flex;
    align-items: flex-end;
    gap:         2px;
    width:       20px;
    height:      14px;
    position:    absolute;
    left:        22px;
    opacity:     0;
    transition: opacity .2s;
}
.adp-track-bars span {
    display:        block;
    width:          3px;
    background:     var(--adp-accent);
    border-radius:  2px;
    flex-shrink:    0;
}
.adp-track-bars span:nth-child(1) { height: 60%; }
.adp-track-bars span:nth-child(2) { height: 100%; }
.adp-track-bars span:nth-child(3) { height: 40%; }

/* Animar solo cuando reproduce */
.adp-wrapper.is-playing .adp-track-active .adp-track-bars span {
    animation: adpMiniBar 0.6s ease-in-out infinite alternate;
}
.adp-wrapper.is-playing .adp-track-active .adp-track-bars span:nth-child(1) { animation-delay: 0s; }
.adp-wrapper.is-playing .adp-track-active .adp-track-bars span:nth-child(2) { animation-delay: 0.2s; }
.adp-wrapper.is-playing .adp-track-active .adp-track-bars span:nth-child(3) { animation-delay: 0.1s; }

@keyframes adpMiniBar {
    from { transform: scaleY(0.3); }
    to   { transform: scaleY(1); }
}

.adp-track-name {
    flex:        1;
    font-size:   14px;
    font-weight: 600;
    color:       var(--adp-text);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}
.adp-track-active .adp-track-name { color: var(--adp-accent); }

.adp-track-ext {
    font-family: var(--adp-font-mono);
    font-size:   9px;
    color:       var(--adp-muted);
    background:  var(--adp-surface2);
    border:      1px solid var(--adp-border);
    padding:     2px 5px;
    border-radius: 3px;
    letter-spacing: 1px;
}

/* ── Botón de descarga por track ── */
.adp-track-download {
    display:     flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width:       28px;
    height:      28px;
    border-radius: 50%;
    color:       var(--adp-muted);
    text-decoration: none;
    transition:  color .15s, background .15s;
}
.adp-track-download svg {
    width:  16px;
    height: 16px;
    fill:   currentColor;
}
.adp-track-download:hover {
    color:       var(--adp-accent);
    background:  rgba(0,0,0,.06);
}

/* ── Error / Empty ── */
.adp-error,
.adp-empty {
    padding:    24px 22px;
    font-size:  14px;
    line-height: 1.6;
    color:      var(--adp-muted);
}
.adp-error code,
.adp-empty strong { color: var(--adp-text); }

/* ── Responsive ── */
@media (max-width: 480px) {
    .adp-header   { padding: 14px 16px; }
    .adp-main-player { padding: 18px 16px 16px; }
    .adp-track    { padding: 12px 16px; }
    .adp-date-badge { font-size: 15px; }
    .adp-now-title  { font-size: 17px; }
    .adp-folder-selector { display: none; }
}