.nea-player {
    --primary-color: #2271b1;
    --secondary-color: #ffffff;
    margin: 1em 0;
    padding: 1em;
    background: #00507c;
    border-radius: 4px;
}

.nea-player__controls {
    display: flex;
    align-items: center;
    gap: 1em;
}

.nea-player__play,
.nea-player__volume {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background-color 0.3s;
}

.nea-player__play:hover,
.nea-player__volume:hover {
    background-color: rgba(0,0,0,0.1);
}

.nea-player__progress {
    flex-grow: 1;
    height: 4px;
    background: var(--secondary-color);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}

.nea-player__progress-bar {
    height: 100%;
    background: var(--primary-color);
    border-radius: 2px;
    width: 0;
}

.nea-player__time {
    font-size: 0.875em;
    color: var(--secondary-color);
    min-width: 60px;
    text-align: center;
}

/* Ocultar el elemento de duración */
.nea-player__duration {
    display: none;
}

/* Quitar la separación entre current y duration ya que solo mostraremos uno */
.nea-player__current {
    display: block;
}

/* Estilos base para los iconos */
.nea-player__play-icon,
.nea-player__volume-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

/* Icono de play por defecto */
.nea-player__play-icon svg {
    width: 16px;
    height: 16px;
    fill: var(--secondary-color);
}

/* Icono de volumen */
.nea-player__volume-icon svg {
    width: 16px;
    height: 16px;
    fill: var(--secondary-color);
}

/* Cambiar icono cuando está reproduciendo */
.nea-player.playing .nea-player__play-icon .play-icon {
    display: none;
}

.nea-player.playing .nea-player__play-icon .pause-icon {
    display: block;
}

.nea-player:not(.playing) .nea-player__play-icon .play-icon {
    display: block;
}

.nea-player:not(.playing) .nea-player__play-icon .pause-icon {
    display: none;
}

/* Cambiar icono cuando está muteado */
.nea-player__volume.muted .volume-icon {
    display: none;
}

.nea-player__volume.muted .muted-icon {
    display: block;
}

.nea-player__volume:not(.muted) .volume-icon {
    display: block;
}

.nea-player__volume:not(.muted) .muted-icon {
    display: none;
}

/* Control de volumen - Versión mejorada */
.nea-player__volume-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}

.nea-player__volume-control {
    position: relative;
    width: 0;
    height: 24px;
    overflow: hidden;
    transition: width 0.3s ease;
    opacity: 0;
    visibility: hidden;
}

/* Mostrar el control cuando el wrapper está en hover */
.nea-player__volume-wrapper:hover .nea-player__volume-control {
    width: 60px;
    opacity: 1;
    visibility: visible;
    margin-left: 8px;
}

.nea-player__volume-progress {
    position: absolute;
    top: 50%;
    left: 0;
    right: 4px;
    height: 4px;
    background: rgb(29 98 154);
    border-radius: 2px;
    transform: translateY(-50%);
    cursor: pointer;
    transition: height 0.2s ease;
}

/* Hacer la barra más alta cuando se interactúa con ella */
.nea-player__volume-progress:hover,
.nea-player__volume-progress:active {
    height: 6px;
}

.nea-player__volume-bar {
    height: 100%;
    background: var(--secondary-color);
    border-radius: 2px;
    width: 100%;
    position: relative;
}

/* Agregar un "handle" visual */
.nea-player__volume-bar::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: var(--secondary-color);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.nea-player__volume-progress:hover .nea-player__volume-bar::after,
.nea-player__volume-progress:active .nea-player__volume-bar::after {
    opacity: 1;
}

/* Ajuste para móviles */
@media (hover: none) {
    .nea-player__volume-control {
        width: 60px;
        opacity: 1;
        visibility: visible;
        margin-left: 8px;
    }
} 

/* Estilos para el selector de posts */
.notas-en-audio-select-container {
    margin: 15px 0;
}

.notas-en-audio-select-container .ts-wrapper {
    margin-bottom: 10px;
}

.notas-en-audio-select-container .description {
    color: #666;
    font-style: italic;
}

/* Mejoras visuales para Tom Select */
.ts-wrapper.multi .ts-control > div {
    padding: 2px 5px;
    margin: 2px;
    background: #f0f0f1;
    border: 1px solid #8c8f94;
}

.ts-wrapper.multi .ts-control > div.active {
    background: #2271b1;
    color: #fff;
    border-color: #2271b1;
}

.ts-dropdown .active {
    background-color: #f0f7fb;
}

.ts-dropdown .option:hover {
    background-color: #e5f0f5;
}