/* Farmer Audio Player — player.css */

.fap-player {
    --fap-bg:        #ffffff;
    --fap-border:    #e4e4e4;
    --fap-accent:    #2d6a4f;   /* verde Farmer */
    --fap-accent-lt: #d8f3dc;
    --fap-text:      #1a1a1a;
    --fap-muted:     #888;
    --fap-radius:    10px;
    --fap-shadow:    0 1px 4px rgba(0,0,0,.08);

    font-family: inherit;
    margin: 0 0 28px;
}

.fap-player__inner {
    display:         flex;
    align-items:     center;
    gap:             12px;
    background:      var(--fap-bg);
    border:          1px solid var(--fap-border);
    border-radius:   var(--fap-radius);
    padding:         14px 16px;
    box-shadow:      var(--fap-shadow);
}

/* ── Play/Pause button ── */
.fap-btn--play {
    flex-shrink:     0;
    width:           44px;
    height:          44px;
    border-radius:   50%;
    border:          2px solid var(--fap-text);
    background:      transparent;
    color:           var(--fap-text);
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background .15s, color .15s, border-color .15s;
    padding:         0;
}
.fap-btn--play:hover {
    background:      var(--fap-text);
    color:           #fff;
}
.fap-btn--play.is-playing {
    background:      var(--fap-accent);
    border-color:    var(--fap-accent);
    color:           #fff;
}
.fap-icon { width: 22px; height: 22px; display: block; }

/* ── Body / progress ── */
.fap-player__body {
    flex: 1;
    min-width: 0;
}
.fap-label {
    display:     block;
    font-size:   13px;
    font-weight: 500;
    color:       var(--fap-text);
    margin-bottom: 6px;
    letter-spacing: .01em;
}
.fap-progress-wrap {
    display:     flex;
    align-items: center;
    gap:         8px;
}
.fap-time {
    font-size:   12px;
    color:       var(--fap-muted);
    white-space: nowrap;
    min-width:   30px;
    font-variant-numeric: tabular-nums;
}
.fap-time--current { text-align: right; }

/* ── Progress bar ── */
.fap-progress {
    position:    relative;
    flex:        1;
    height:      4px;
    background:  #e0e0e0;
    border-radius: 4px;
    cursor:      pointer;
}
.fap-progress:hover .fap-progress__thumb { opacity: 1; }
.fap-progress__bar {
    position:    absolute;
    left:        0; top: 0;
    height:      100%;
    width:       0%;
    background:  var(--fap-accent);
    border-radius: 4px;
    transition:  width .1s linear;
}
.fap-progress__thumb {
    position:    absolute;
    top:         50%;
    transform:   translate(-50%, -50%);
    left:        0%;
    width:       12px;
    height:      12px;
    border-radius: 50%;
    background:  var(--fap-accent);
    opacity:     0;
    transition:  opacity .15s, left .1s linear;
}

/* ── Right controls ── */
.fap-controls-right {
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-shrink: 0;
}
.fap-btn {
    background:  transparent;
    border:      none;
    cursor:      pointer;
    padding:     0;
    color:       var(--fap-muted);
    transition:  color .15s;
    line-height: 1;
}
.fap-btn:hover { color: var(--fap-text); }

.fap-btn--rewind {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fap-btn--rewind svg { width: 22px; height: 22px; }

.fap-btn--speed {
    font-size:   13px;
    font-weight: 600;
    border:      1px solid var(--fap-border);
    border-radius: 20px;
    padding:     3px 9px;
    color:       var(--fap-muted);
    background:  #f5f5f5;
}
.fap-btn--speed:hover {
    background:  var(--fap-accent-lt);
    border-color: var(--fap-accent);
    color:       var(--fap-accent);
}

/* ── Loading state ── */
.fap-player.is-loading .fap-btn--play {
    opacity: .5;
    cursor:  wait;
}

/* ── Mobile ── */
@media (max-width: 540px) {
    .fap-player__inner { gap: 8px; padding: 10px 12px; }
    .fap-btn--play     { width: 38px; height: 38px; }
    .fap-label         { font-size: 12px; }
    .fap-btn--rewind   { display: none; }
}