/* ── Fonoteca: reproductor ── */
.fonoteca-player { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 18px; background: rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.08); border-radius: 10px; flex-wrap: wrap; }
.fonoteca-player__thumb img { width: 100px; height: 100px;    border-radius: 8px; object-fit: cover; opacity: 1; box-shadow: 0 4px 10px rgba(0,0,0,0.15);}
.fonoteca-player__meta { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 120px;}
.fonoteca-player__interpreter {font-size: 1.25rem; color: #216CC0; font-weight: 800; text-transform: uppercase;    margin-bottom: 2px; letter-spacing: 0.5px;}
.fonoteca-player__title  { font-weight: 600; font-size: 1.05rem;}
.fonoteca-player__duration { font-size: .8rem; opacity: .6; }
.fonoteca-player__controls { display: flex; align-items: center; gap: 6px; }
.fonoteca-player__btn { background: none; border: none; cursor: pointer; padding: 6px; border-radius: 50%; color: inherit; opacity: .7; transition: opacity .2s, background .2s; font-size: 1.1rem;}
.fonoteca-player__btn:hover:not(:disabled) { opacity: 1; background: rgba(0,0,0,.07); }
.fonoteca-player__btn:disabled { opacity: .25; cursor: default; }
.fonoteca-player__btn--main { 
    width: 42px; 
    height: 42px; 
    background: currentColor !important; 
    color: inherit; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    opacity: 1; 
    font-size: 1.2rem;
}
.fonoteca-player__btn--main i { color: #fff; }
.fonoteca-player__btn--main:disabled { opacity: .3; }
.fonoteca-player__progress-wrap { display: flex; align-items: center; gap: 8px; width: 100%; order: 5; }
.fonoteca-player__progress { flex: 1; height: 4px; cursor: pointer; accent-color: currentColor; }
.fonoteca-player__time { font-size: .75rem; opacity: .55; min-width: 34px; }

/* ── Fonoteca: lista ── */
.fonoteca-list { list-style: none; margin: 0; padding: 0; }
.fonoteca-episode { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-bottom: 1px solid rgba(0,0,0,.07); cursor: pointer; transition: background .15s; border-radius: 6px; }
.fonoteca-episode:hover, .fonoteca-episode.is-active { background: rgba(0,0,0,.05); }
.fonoteca-episode__thumb { position: relative; flex-shrink: 0; width: 56px; height: 56px; }
.fonoteca-episode__thumb img { width: 56px; height: 56px; border-radius: 5px; object-fit: cover; display: block; }
.fonoteca-episode__play-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); border: none; border-radius: 5px; cursor: pointer; color: #fff; opacity: 0; transition: opacity .15s; }
.fonoteca-episode:hover .fonoteca-episode__play-btn, .fonoteca-episode.is-active .fonoteca-episode__play-btn { opacity: 1; }
.fonoteca-episode__info { 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    gap: 10px; 
    flex: 1; 
    min-width: 0; 
}
.fonoteca-episode__title { 
    font-size: 1.05rem; /* Aumentado */
    font-weight: 500; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
.fonoteca-episode__duration { 
    font-size: 0.95rem; /* Aumentado */
    opacity: .6; 
    margin-left: auto; /* Empuja este elemento hasta la orilla derecha */
    white-space: nowrap; /* Evita que la duración se parta en dos líneas */
}

/* ── Paginación UI ── */
.fonoteca-pagination { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; }
.fonoteca-load-more { background: none; border: 1px solid currentColor; padding: 7px 18px; border-radius: 20px; cursor: pointer; font-size: .85rem; opacity: .75; transition: opacity .2s; }
.fonoteca-load-more:hover:not(:disabled) { opacity: 1; }
.fonoteca-load-more:disabled { opacity: .2; cursor: default; }