/*
 * DGM - Audio Player Background Widget CSS
 * Version: 1.8.3 - Corrección de estados visuales.
 */

/* ========================================================= */
/* --- CONTENEDOR PRINCIPAL (POSICIONAMIENTO FIJO) --- */
/* ========================================================= */

.dgm-audio-player-container {
    /* Variables CSS seteadas desde el PHP de Elementor para el desplazamiento X/Y */
    --dgm-offset-x: 0px; 
    --dgm-offset-y: 0px; 
    
    position: fixed;
    z-index: 9999; /* Siempre visible por encima de otros elementos */
    width: auto;
    height: auto;
}

/* ========================================================= */
/* --- ESTILO BASE DEL BOTÓN DGM --- */
/* ========================================================= */

.dgm-play-pause-button {
    /* Las propiedades de tamaño, color y hover se aplican por Elementor */
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Transiciones para los 4 estados de color */
    transition: background-color 0.3s, transform 0.3s, color 0.3s, box-shadow 0.3s; 
    outline: none;
    /* Aseguramos que el ícono (hijo) no sea el target del click */
    pointer-events: all;
    padding: 0;
}

/* Efecto Hover: El color de fondo y color de ícono al hover se controlan por Elementor */
.dgm-play-pause-button:hover {
    transform: scale(1.1); /* Efecto pop al pasar el mouse */
}

/* Estilos de los Íconos (SVG y Font Awesome) */
.dgm-play-pause-button i,
.dgm-play-pause-button svg {
    /* El tamaño se controla desde el slider 'icon_size' en PHP */
    fill: currentColor; /* SVG hereda el color del 'icon_color' definido en Elementor */
    pointer-events: none; /* Vital: permite que el click pase al botón padre */
    max-width: 100%;
    max-height: 100%;
}


/* ========================================================= */
/* --- LÓGICA DE ESTADOS Y ANIMACIÓN --- */
/* ========================================================= */

/* Oculta los íconos por defecto. Solo se muestra el que esté activo por la clase de estado */
.dgm-play-pause-button .dgm-icon-play,
.dgm-play-pause-button .dgm-icon-pause {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

/* Estado PAUSA: Se muestra el ícono de Play */
.dgm-state-paused .dgm-icon-play { 
    display: flex;
}

/* Estado REPRODUCIENDO: Se muestra el ícono de Pausa */
.dgm-state-playing .dgm-icon-pause { 
    display: flex;
}

/* Animación de Pulso */
.dgm-state-playing.dgm-play-pause-button {
    animation: dgm-pulse 1.5s infinite;
}

@keyframes dgm-pulse {
    /* Animación más sutil y de marca DGM */
    0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}


/* ========================================================= */
/* --- POSICIONAMIENTO DGM (Presets + Offset) --- */
/* ========================================================= */

/* 1. FALLBACK Y DEFAULT (Arriba Derecha - 45px) 
   Aplicamos esto a la clase base para asegurar que SIEMPRE se vea, 
   incluso si falla la carga de la clase del preset. */
.dgm-audio-player-container,
.dgm-pos-custom .dgm-audio-player-container { 
    top: 45px; /* Diferenciación solicitada */
    right: 20px; 
    bottom: auto; 
    left: auto;
    transform: translate(var(--dgm-offset-x, 0px), var(--dgm-offset-y, 0px));
}

/* 2. Arriba Derecha (Estándar 20px) */
.dgm-pos-top-right .dgm-audio-player-container { 
    top: 45px; 
    right: 20px; 
    bottom: auto; 
    left: auto;
    transform: translate(var(--dgm-offset-x, 0px), var(--dgm-offset-y, 0px));
}

/* 3. Arriba Izquierda */
.dgm-pos-top-left .dgm-audio-player-container { 
    top: 20px; 
    left: 20px; 
    bottom: auto; 
    right: auto;
    transform: translate(var(--dgm-offset-x, 0px), var(--dgm-offset-y, 0px));
}

/* 4. Abajo Izquierda */
.dgm-pos-bottom-left .dgm-audio-player-container { 
    bottom: 20px; 
    left: 20px; 
    top: auto; 
    right: auto;
    transform: translate(var(--dgm-offset-x, 0px), var(--dgm-offset-y, 0px));
}

/* 5. Abajo Derecha */
.dgm-pos-bottom-right .dgm-audio-player-container { 
    bottom: 20px; 
    right: 20px; 
    top: auto; 
    left: auto;
    transform: translate(var(--dgm-offset-x, 0px), var(--dgm-offset-y, 0px));
}

/**
 Si se selecciona 'Ninguno', el CSS del preset no aplica, y 
 el usuario lo posiciona libremente con X/Y. */