/* ==========================================================================
   CONTROLES MINIMALISTAS - DISEÑO YOUTUBE
   ========================================================================== */

/* DOS ICONOS: Initial (carga) y Pause (pausa) */

/* Estilos comunes para ambos iconos */
.metaplayer-play-icon-initial,
.metaplayer-play-icon-pause {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease;
    z-index: 50;
    cursor: pointer;
    /* NO aplicar border-radius aquí para evitar muescas */
    border-radius: 0 !important;
}

/* Estado oculto */
.metaplayer-play-icon-initial.hidden,
.metaplayer-play-icon-pause.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Estado permanentemente oculto (para iconInitial después del primer play) */
.metaplayer-play-icon-initial.permanently-hidden {
    display: none !important;
    pointer-events: none;
}

/* Botón para ambos iconos */
.metaplayer-play-icon-btn {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s ease;
    width: 100px !important;
    height: 100px !important;
    filter: none !important;
    box-shadow: none !important;
}

.metaplayer-play-icon-btn:hover {
    transform: scale(1.1);
}

/* Imagen del icono */
.metaplayer-play-icon-img {
    width: 100px !important;
    height: 100px !important;
    filter: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.metaplayer-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.metaplayer-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    background: #000;
    overflow: hidden;
    /* Asegurar border-radius sea simétrico */
    border-collapse: collapse;
    box-sizing: border-box;
}

.metaplayer-video,
.metaplayer-youtube,
.metaplayer-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    /* Asegurar que border-radius se aplique correctamente */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* CONTROLES - Diseño minimalista YouTube */
.metaplayer-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100%);
    padding: 2px 2px 2px 2px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 100;
    /* CRÍTICO: Asegurar que los controles sean siempre visibles, incluso en fullscreen */
    pointer-events: auto !important;
    min-height: 50px;
}

/* Controles visibles - mostrar al hacer hover o con clase JavaScript */
.metaplayer-wrapper:hover .metaplayer-controls,
.metaplayer-wrapper.metaplayer-show-controls .metaplayer-controls {
    opacity: 1;
}

/* Siempre visible en editor Elementor */
.elementor-editor-active .metaplayer-controls {
    opacity: 1 !important;
}

/* PETICIÓN 1: BARRA DE PROGRESO - Minimalista */
.metaplayer-progress-bar {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    margin-bottom: 6px !important;
    position: relative;
    border-radius: 2px;
    transition: height 0.2s ease;
    --progress-percent: 0%;
}

.metaplayer-progress-bar:hover {
    height: 5px;
}

/* PETICIÓN 1: Barra de progreso - Roja (#FF0032) */
.metaplayer-progress-filled {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #FF0032 !important;
    width: 0%;
    transition: width 0.1s linear;
    border-radius: 2px;
}

/* PETICIÓN 1 & 2: Círculo indicador de progreso - SIEMPRE VISIBLE */
.metaplayer-progress-bar::after {
    content: '';
    position: absolute;
    top: 50%;
    left: var(--progress-percent);
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #FF0032 !important;
    border-radius: 50%;
    opacity: 1 !important;
    transition: left 0.1s linear;
    pointer-events: none;
    box-shadow: 0 2px 4px rgba(255, 0, 50, 0.4);
    z-index: 51;
}

/* PREVIEW HOVER: Franja blanca entre círculo actual y posición del mouse */
.metaplayer-progress-preview {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    width: 0%;
    border-radius: 2px;
    pointer-events: none;
    z-index: 50;
    opacity: 0;
    transition: opacity 0.15s ease, width 0.05s linear;
}

.metaplayer-progress-preview.visible {
    opacity: 1;
}


/* PETICIÓN 3: CONTROLES INFERIORES - Altura ajustada para iconos grandes */
.metaplayer-controls-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 1px;
    height: 37px;
}

/* PETICIÓN 3: BOTONES - Ajustados para iconos 70% más grandes */
.metaplayer-btn {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 1px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: opacity 0.2s ease, transform 0.1s ease;
    border-radius: 2px !important;
    min-width: 36px;
    height: 36px;
    align-self: center !important;
    margin: 0 !important;
}

.metaplayer-btn:hover {
    opacity: 0.8;
}

.metaplayer-btn:active {
    transform: scale(0.95);
}

/* ICONOS DE CONTROLES - Tamaño original minimalista */
.metaplayer-btn svg,
.metaplayer-btn img,
.metaplayer-volume-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
    pointer-events: none;
    color: #fff !important;
    fill: #fff !important;
}

/* Iconos específicos */
.metaplayer-icon-play,
.metaplayer-icon-pause {
    transition: opacity 0.2s;
}

/* Iconos siempre blancos */
.metaplayer-btn,
.metaplayer-btn svg,
.metaplayer-volume-icon {
    color: #fff !important;
    fill: #fff !important;
}

.metaplayer-btn:hover,
.metaplayer-btn:active,
.metaplayer-btn:focus {
    color: #fff !important;
    opacity: 0.8;
}

/* TIEMPO - Tipografía minimalista */
.metaplayer-time {
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    margin: 0 4px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    user-select: none;
    transition: margin-left 0.2s ease;
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    height: 36px !important;
    line-height: 1 !important;
}

/* CONTROL DE VOLUMEN - Minimalista con desplazamiento */
.metaplayer-volume-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 0;
    transition: width 0.2s ease;
    width: 36px; /* Solo botón por defecto */
}

/* Expandir wrapper al hover o active */
.metaplayer-volume-wrapper:hover,
.metaplayer-volume-wrapper.metaplayer-volume-active {
    width: 116px; /* Botón (36px) + Slider (80px) */
}

/* Mover tiempo cuando volumen se expande */
.metaplayer-volume-wrapper:hover ~ .metaplayer-time,
.metaplayer-volume-wrapper.metaplayer-volume-active ~ .metaplayer-time {
    margin-left: 12px;
}

/* Spacer para empujar botones a la derecha */
.metaplayer-spacer {
    flex: 1;
    min-width: 20px;
}

/* CORRECCIÓN CRÍTICA: Asegurar alineación de botones de la derecha */
.metaplayer-controls-bottom .metaplayer-settings-btn,
.metaplayer-controls-bottom .metaplayer-fullscreen {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 1px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 2px !important;
}

/* PETICIÓN 3: Botón de volumen - Alineado con otros botones */
.metaplayer-volume-btn {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 1px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    transition: opacity 0.2s;
    position: relative;
    z-index: 10;
    min-width: 36px !important;
    height: 36px !important;
}

.metaplayer-volume-btn:hover {
    opacity: 0.8;
}

/* Volume icon - Single element that changes src attribute */
.metaplayer-volume-icon {
    display: block !important;
    transition: opacity 0.2s ease;
}


/* MENÚ DE CONFIGURACIÓN - Minimalista */
.metaplayer-settings-menu {
    position: absolute;
    bottom: 45px;
    right: 8px;
    background: rgba(28, 28, 28, 0.60);
    border-radius: 12px;
    min-width: 200px;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    backdrop-filter: blur(10px);
    display: none;
    padding: 12px 0;
}

.metaplayer-settings-menu.show {
    display: block !important;
}

.metaplayer-settings-panel {
    padding: 4px 0;
}

.metaplayer-settings-header {
    padding: 10px 20px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 6px;
}

.metaplayer-settings-back {
    background: transparent;
    border: none;
    color: #fff;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.metaplayer-settings-back svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.metaplayer-settings-option,
.metaplayer-speed-option,
.metaplayer-quality-option {
    width: 100%;
    background: transparent;
    border: none;
    color: #fff;
    padding: 12px 20px;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    transition: background 0.15s;
}

.metaplayer-settings-option:hover,
.metaplayer-speed-option:hover,
.metaplayer-quality-option:hover {
    background: rgba(255, 255, 255, 0.1);
}

.metaplayer-settings-value {
    color: rgba(255, 255, 255, 0.6);
    margin-left: auto;
    margin-right: 6px;
    font-size: 12px;
}

.metaplayer-settings-arrow {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.metaplayer-speed-option.metaplayer-active,
.metaplayer-quality-option.metaplayer-active {
    background: rgba(255, 255, 255, 0.15);
}

.metaplayer-speed-option.metaplayer-active::after,
.metaplayer-quality-option.metaplayer-active::after {
    content: '✓';
    margin-left: auto;
    font-weight: bold;
    font-size: 14px;
}

/* Scrollbar minimalista */
.metaplayer-settings-menu::-webkit-scrollbar {
    width: 6px;
}

.metaplayer-settings-menu::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.metaplayer-settings-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.metaplayer-settings-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ========================================================================== */
/* TÍTULO DEL VIDEO - DISEÑO BASE MINIMALISTA - ELEMENTOS CONTROLABLES */
/* ========================================================================== */

.metaplayer-title {
    /* Base styles - all can be overridden by Elementor controls */
    display: block;
    padding: 10px 12px;
    background: #fff;
    font-size: 15px;
    font-weight: 500;
    color: #030303;
    line-height: 1.4;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
}

/* ===== TITLE POSITIONING ===== */

.metaplayer-title-below_video {
    /* Título debajo del video - static positioning */
    position: static;
}

.metaplayer-title-above_video {
    /* Título arriba del video - static positioning */
    position: static;
}

.metaplayer-title-overlay_top {
    /* Título superpuesto en la parte superior - respeta controles de Elementor */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10 !important;
    /* Default overlay background - can be overridden by Elementor */
    background: rgba(0, 0, 0, 0.5) !important;
    color: #fff !important;
    padding: 15px 20px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.metaplayer-title-overlay_bottom {
    /* Título superpuesto en la parte inferior - respeta controles de Elementor */
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10 !important;
    /* Default overlay background - can be overridden by Elementor */
    background: rgba(0, 0, 0, 0.5) !important;
    color: #fff !important;
    padding: 15px 20px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Title animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.metaplayer-title-animation-fadeIn {
    animation: fadeIn 0.6s ease-in-out;
}

.metaplayer-title-animation-slideInDown {
    animation: slideInDown 0.6s ease-in-out;
}

.metaplayer-title-animation-slideInUp {
    animation: slideInUp 0.6s ease-in-out;
}

/* PLACEHOLDER */
.metaplayer-placeholder {
    padding: 40px 20px;
    text-align: center;
    background: #f5f5f5;
    border: 1px dashed #d0d0d0;
    border-radius: 2px;
    color: #606060;
    font-size: 14px;
}

/* RESPONSIVE - Mantener minimalismo */
@media (max-width: 768px) {
    .metaplayer-controls-bottom {
        gap: 1px;
    }

    .metaplayer-btn {
        padding: 1px;
        min-width: 32px;
        height: 32px;
    }

    .metaplayer-btn svg {
        width: 18px;
        height: 18px;
    }

    .metaplayer-time {
        font-size: 11px;
        margin: 0 4px;
    }

    .metaplayer-volume-slider-container {
        display: none; /* Ocultar slider en móvil */
    }
}

/* ========================================================================== */
/* FULLSCREEN FIX - CRÍTICO: Controles visibles en pantalla completa */
/* ========================================================================== */

/* ===== FULLSCREEN NATIVO (para navegadores que lo soportan) ===== */

/* Cuando el wrapper entra en fullscreen */
.metaplayer-wrapper:fullscreen .metaplayer-container,
.metaplayer-wrapper:-webkit-full-screen .metaplayer-container,
.metaplayer-wrapper:-moz-full-screen .metaplayer-container,
.metaplayer-wrapper:-ms-fullscreen .metaplayer-container {
    /* CRÍTICO: Eliminar padding-bottom que limita la altura */
    padding-bottom: 0 !important;

    /* CRÍTICO: La altura debe ser 100% para llenar la pantalla */
    height: 100% !important;

    /* Mantener el aspecto del video dentro del container */
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

/* Asegurar que el iframe/video mantenga proporciones en fullscreen */
.metaplayer-wrapper:fullscreen .metaplayer-container iframe,
.metaplayer-wrapper:-webkit-full-screen .metaplayer-container iframe,
.metaplayer-wrapper:-moz-full-screen .metaplayer-container iframe,
.metaplayer-wrapper:-ms-fullscreen .metaplayer-container iframe,
.metaplayer-wrapper:fullscreen .metaplayer-container video,
.metaplayer-wrapper:-webkit-full-screen .metaplayer-container video,
.metaplayer-wrapper:-moz-full-screen .metaplayer-container video,
.metaplayer-wrapper:-ms-fullscreen .metaplayer-container video {
    /* Permitir que video/iframe crezca para llenar el espacio disponible */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100% - 50px) !important;
    object-fit: contain !important;
}

/* CRÍTICO: Controles SIEMPRE visibles en fullscreen */
.metaplayer-wrapper:fullscreen .metaplayer-controls,
.metaplayer-wrapper:-webkit-full-screen .metaplayer-controls,
.metaplayer-wrapper:-moz-full-screen .metaplayer-controls,
.metaplayer-wrapper:-ms-fullscreen .metaplayer-controls {
    /* Mostrar controles SIEMPRE en fullscreen */
    opacity: 1 !important;
    pointer-events: auto !important;

    /* Posicionar en la parte inferior */
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;

    /* Altura mínima para controles */
    min-height: 50px !important;
    height: auto !important;

    /* Z-index para asegurar que estén encima del video */
    z-index: 200 !important;

    /* Fondo visible en fullscreen */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 70%, transparent 100%) !important;
}

/* Barra de progreso siempre visible en fullscreen */
.metaplayer-wrapper:fullscreen .metaplayer-progress-bar,
.metaplayer-wrapper:-webkit-full-screen .metaplayer-progress-bar,
.metaplayer-wrapper:-moz-full-screen .metaplayer-progress-bar,
.metaplayer-wrapper:-ms-fullscreen .metaplayer-progress-bar {
    opacity: 1 !important;
    pointer-events: auto !important;
    display: block !important;
}

/* Controles inferiores siempre visibles en fullscreen */
.metaplayer-wrapper:fullscreen .metaplayer-controls-bottom,
.metaplayer-wrapper:-webkit-full-screen .metaplayer-controls-bottom,
.metaplayer-wrapper:-moz-full-screen .metaplayer-controls-bottom,
.metaplayer-wrapper:-ms-fullscreen .metaplayer-controls-bottom {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ===== PSEUDO FULLSCREEN (para Theme Builder y contextos limitados) ===== */
/* Esta clase se agrega vía JavaScript cuando fullscreen nativo no funciona */

.metaplayer-wrapper.metaplayer-pseudo-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
    background: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.metaplayer-wrapper.metaplayer-pseudo-fullscreen .metaplayer-container {
    /* Eliminar padding-bottom en pseudo fullscreen */
    padding-bottom: 0 !important;

    /* Usar 100% de altura disponible */
    height: 100% !important;
    width: 100% !important;

    /* Flex layout para espacio de controles */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Video/Iframe en pseudo fullscreen */
.metaplayer-wrapper.metaplayer-pseudo-fullscreen .metaplayer-container iframe,
.metaplayer-wrapper.metaplayer-pseudo-fullscreen .metaplayer-container video {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    max-height: calc(100vh - 60px) !important;
    object-fit: contain !important;
}

/* Controles SIEMPRE visibles en pseudo fullscreen */
.metaplayer-wrapper.metaplayer-pseudo-fullscreen .metaplayer-controls {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 300 !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 70%, transparent 100%) !important;
}

/* Progress bar en pseudo fullscreen */
.metaplayer-wrapper.metaplayer-pseudo-fullscreen .metaplayer-progress-bar {
    opacity: 1 !important;
    pointer-events: auto !important;
    display: block !important;
}

/* Controles inferiores en pseudo fullscreen */
.metaplayer-wrapper.metaplayer-pseudo-fullscreen .metaplayer-controls-bottom {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* PREVENIR CONFLICTOS */
.metaplayer-wrapper *,
.metaplayer-wrapper *::before,
.metaplayer-wrapper *::after {
    box-sizing: border-box;
}

/* Resetear estilos que puedan interferir */
.metaplayer-controls-bottom button,
.metaplayer-progress-bar {
    margin: 0;
    padding: 1px;
    line-height: 1;
}

/* IMPORTANTE: No aplicar padding: 1px a los botones del menú Settings */
.metaplayer-settings-option,
.metaplayer-speed-option,
.metaplayer-quality-option {
    padding: 12px 20px !important;
}

.metaplayer-controls svg {
    display: block;
}

/* ========================================================================== */
/* CORRECCIÓN URGENTE - Eliminar azul y fijar blanco siempre */
/* ========================================================================== */

/* ELIMINAR TODO EFECTO AZUL - Forzar blanco siempre */
.metaplayer-btn,
.metaplayer-btn *,
.metaplayer-volume-btn,
.metaplayer-volume-btn *,
.metaplayer-settings-btn,
.metaplayer-settings-btn *,
.metaplayer-play-pause,
.metaplayer-fullscreen {
    color: #fff !important;
    fill: #fff !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
}

/* Hover SOLO opacidad, SIN color azul */
.metaplayer-btn:hover,
.metaplayer-btn:focus,
.metaplayer-btn:active {
    color: #fff !important;
    fill: #fff !important;
    background: transparent !important;
    opacity: 0.8 !important;
}

/* SVG siempre blanco */
.metaplayer-btn svg,
.metaplayer-btn svg *,
.metaplayer-volume-icon,
.metaplayer-volume-icon * {
    fill: #fff !important;
    color: #fff !important;
}

/* ===== SLIDER ÚNICO - SOLO BLANCO ===== */

/* Input base - limpio */
.metaplayer-volume-slider {
    width: 100%;
    height: 12px;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    cursor: pointer;
    accent-color: transparent !important;
}

/* Track WebKit - BLANCO PURO */
.metaplayer-volume-slider::-webkit-slider-runnable-track {
    width: 100% !important;
    height: 3px !important;
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}

/* Track Firefox - BLANCO PURO */
.metaplayer-volume-slider::-moz-range-track {
    width: 100% !important;
    height: 3px !important;
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}

/* Eliminar progress track de Firefox */
.metaplayer-volume-slider::-moz-range-progress {
    background: transparent !important;
    display: none !important;
}

/* Thumb WebKit - BLANCO PURO */
.metaplayer-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    margin-top: -6.5px !important;
    opacity: 0 !important;
    transition: opacity 0.2s !important;
    box-shadow: none !important;
}

/* Thumb Firefox - BLANCO PURO */
.metaplayer-volume-slider::-moz-range-thumb {
    width: 16px !important;
    height: 16px !important;
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    opacity: 0 !important;
    transition: opacity 0.2s !important;
    box-shadow: none !important;
}

/* Círculo visible SIEMPRE que el slider esté visible */
.metaplayer-volume-wrapper:hover .metaplayer-volume-slider::-webkit-slider-thumb,
.metaplayer-volume-wrapper.metaplayer-volume-active .metaplayer-volume-slider::-webkit-slider-thumb {
    opacity: 1 !important;
}

.metaplayer-volume-wrapper:hover .metaplayer-volume-slider::-moz-range-thumb,
.metaplayer-volume-wrapper.metaplayer-volume-active .metaplayer-volume-slider::-moz-range-thumb {
    opacity: 1 !important;
}

/* También al hover directo en el slider */
.metaplayer-volume-slider:hover::-webkit-slider-thumb,
.metaplayer-volume-slider:active::-webkit-slider-thumb {
    opacity: 1 !important;
}

.metaplayer-volume-slider:hover::-moz-range-thumb,
.metaplayer-volume-slider:active::-moz-range-thumb {
    opacity: 1 !important;
}

/* Eliminar TODOS los pseudo-elementos */
.metaplayer-volume-slider::before,
.metaplayer-volume-slider::after,
.metaplayer-volume-slider::-webkit-slider-container::before,
.metaplayer-volume-slider::-webkit-slider-container::after {
    display: none !important;
    content: none !important;
}

/* Focus sin efectos */
.metaplayer-volume-slider:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Container sin decoración */
.metaplayer-volume-slider-container {
    position: relative;
    width: 0;
    height: 36px !important;
    overflow: visible;
    transition: width 0.2s ease;
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    margin-left: 2px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.metaplayer-volume-slider-container::before,
.metaplayer-volume-slider-container::after {
    display: none !important;
    content: none !important;
}

.metaplayer-volume-wrapper:hover .metaplayer-volume-slider-container,
.metaplayer-volume-wrapper.metaplayer-volume-active .metaplayer-volume-slider-container {
    width: 76px;
}

/* Resetear estilos del tema que causan azul */
.metaplayer-wrapper a,
.metaplayer-wrapper button,
.metaplayer-wrapper input {
    color: #fff !important;
    text-decoration: none !important;
}

.metaplayer-wrapper a:hover,
.metaplayer-wrapper a:focus,
.metaplayer-wrapper button:hover,
.metaplayer-wrapper button:focus {
    color: #fff !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ========================================================================== */
/* FIX DEFINITIVO - Alineación botones Settings y Fullscreen */
/* ========================================================================== */

/* Máxima especificidad para garantizar alineación correcta */
body .metaplayer-wrapper .metaplayer-controls-bottom {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 37px !important;
    min-height: 37px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body .metaplayer-wrapper .metaplayer-controls-bottom .metaplayer-btn {
    margin: 0 !important;
    padding: 1px !important;
    height: 36px !important;
    min-height: 36px !important;
    align-self: center !important;
    position: relative !important;
    top: auto !important;
}

body .metaplayer-wrapper .metaplayer-controls-bottom .metaplayer-settings-btn,
body .metaplayer-wrapper .metaplayer-controls-bottom .metaplayer-fullscreen {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 1px !important;
    height: 36px !important;
    min-height: 36px !important;
    min-width: 36px !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    fill: #fff !important;
}

/* ========================================================================== */
/* ALINEACIÓN PERFECTA - Settings y Fullscreen buttons */
/* ========================================================================== */

/* Asegurar que los iconos dentro de Settings y Fullscreen estén centrados */
body .metaplayer-wrapper .metaplayer-controls-bottom .metaplayer-settings-btn img,
body .metaplayer-wrapper .metaplayer-controls-bottom .metaplayer-fullscreen img {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    fill: #fff !important;
    color: #fff !important;
}

/* ========================================================================== */
/* INVESTIGACIÓN: Eliminación de vertical-align y transform */
/* ========================================================================== */

/* CRÍTICO: DETECTOR DE OFFSET - Si están arriba, empujar hacia abajo */
body .metaplayer-wrapper .metaplayer-controls-bottom .metaplayer-settings-btn,
body .metaplayer-wrapper .metaplayer-controls-bottom .metaplayer-fullscreen,
html body .metaplayer-wrapper .metaplayer-controls-bottom .metaplayer-settings-btn,
html body .metaplayer-wrapper .metaplayer-controls-bottom .metaplayer-fullscreen {
    /* Reset completo de posicionamiento */
    position: relative !important;
    top: 0px !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;

    /* Reset de transformaciones */
    transform: translateY(0px) !important;
    translate: none !important;

    /* Reset de alineación vertical */
    vertical-align: baseline !important;
    line-height: 1 !important;

    /* Asegurar que el contenedor flex funcione */
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    flex-basis: auto !important;

    /* Reset de margin/padding heredados */
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    margin-left: 1px !important;
    margin-right: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 1px !important;
    padding-right: 1px !important;
}

/* Remover todo transform de los iconos */
body .metaplayer-wrapper .metaplayer-controls-bottom .metaplayer-settings-btn img,
body .metaplayer-wrapper .metaplayer-controls-bottom .metaplayer-fullscreen img {
    transform: none !important;
    translate: none !important;
    vertical-align: middle !important;
}

/* ========================================================================== */
/* CORRECCIÓN FINAL - Editor Clásico - Estilos específicos sin reset agresivo */
/* ========================================================================== */

/* Estos estilos tienen mayor especificidad que la definición genérica,
   asegurando que Classic Editor muestre los controles correctamente */

/* ========================================================================== */
/* BLOQUEAR ELEMENTOR PRO - Sin efectos de sombra en iconos de Play */
/* ========================================================================== */

/* CRÍTICO: Bloquear TODOS los efectos de sombra en iconos de Play */
body .metaplayer-play-icon-img,
body .metaplayer-play-icon-btn,
body .metaplayer-play-icon-initial img,
body .metaplayer-play-icon-pause img {
    filter: none !important;
    -webkit-filter: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    background-image: none !important;
}

/* Máxima especificidad para Elementor Pro */
.elementor-widget-metaplayer .metaplayer-play-icon-img,
.elementor-widget-metaplayer .metaplayer-play-icon-btn,
.elementor-widget-metaplayer .metaplayer-play-icon-initial img,
.elementor-widget-metaplayer .metaplayer-play-icon-pause img {
    filter: none !important;
    -webkit-filter: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* ========================================================================== */
/* CRÍTICO: PROTEGER BOTONES DE BORDER-RADIUS DEL CONTENEDOR */
/* ========================================================================== */

/* Asegurar que los botones de control mantengan su forma cuadrada */
.metaplayer-controls .metaplayer-btn,
.metaplayer-controls .metaplayer-play-pause,
.metaplayer-controls .metaplayer-volume-btn,
.metaplayer-controls .metaplayer-settings-btn,
.metaplayer-controls .metaplayer-fullscreen {
    border-radius: 2px !important;
}

/* Aplicar a todos los botones dentro de controles-bottom */
.metaplayer-controls-bottom .metaplayer-btn,
.metaplayer-controls-bottom .metaplayer-play-pause,
.metaplayer-controls-bottom .metaplayer-volume-btn,
.metaplayer-controls-bottom .metaplayer-settings-btn,
.metaplayer-controls-bottom .metaplayer-fullscreen {
    border-radius: 2px !important;
}

/* Reset agresivo para evitar herencia de border-radius */
.metaplayer-progress-bar,
.metaplayer-progress-filled,
.metaplayer-volume-slider {
    border-radius: 2px !important;
}