/* =================================================================== */
/* === ESTILOS BASE: CONTROLES FIJOS === */
/* =================================================================== */

/* * Mantiene los controles principales visibles y sin animaciones
* cuando el reproductor tiene la clase ".controles-fijos".
*/
.playkit-player.controles-fijos .playkit-top-bar,
.playkit-player.controles-fijos .playkit-bottom-bar,
.playkit-player.controles-fijos .playkit-center-playback-controls,
.playkit-player.controles-fijos .playkit-controls-container,
.playkit-player.controles-fijos .playkit-gui-area > div,
.playkit-player.controles-fijos .playkit-right-upper-bar-wrapper-container_Vm {
 opacity: 1 !important;
 visibility: visible !important;
 transform: none !important;
 transition: none !important;
 animation: none !important;
 pointer-events: auto !important;
  /* <<< SOLUCIÓN "GHOST TAP" iOS >>> */
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Resetea la posición del CTA fijo de Kommerceo */
#kommerceo-fixed-cta {
 position: static !important;
 transform: none !important;
 transition: none !important;
}

/* Reposiciona el popup de CTA en modo de controles fijos */
.playkit-player.controles-fijos .call-to-action-popup__call-to-action-popup___VC
Hqp {
 position: absolute !important;
 z-index: 3000 !important;
 /* Lo ubica en la esquina inferior derecha, sobre la barra de menú */
 bottom: calc(var(--menu-h, 50px) + 10px) !important;
 right: 16px !important;
 left: auto !important; 
 /* Fuerza la visibilidad */
 transform: none !important;
 opacity: 1 !important;
 visibility: visible !important;
 transition: none !important;
 animation: none !important;
 pointer-events: auto !important;
  /* <<< SOLUCIÓN "GHOST TAP" iOS >>> */
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Estilo del botón central de Play/Pausa (fondo circular) */
.playkit-playback-controls.playkit-center-playback-controls .playkit-control-but
ton {
 background: rgba(0, 0, 0, 0.4) !important;
 border-radius: 50% !important;
 padding: 10px !important;
}

/* Evita que el cursor del ratón desaparezca */
.playkit-player {
 cursor: auto !important;
}

/* Corrige los tooltips: ocultos por defecto... */
.playkit-tooltip .playkit-tooltip-label {
 opacity: 0 !important;
 visibility: hidden !important;
 transition: none !important;
}
/* ...y visibles solo al pasar el ratón */
.playkit-tooltip:hover .playkit-tooltip-label {
 opacity: 1 !important;
 visibility: visible !important;
}

/* =================================================================== */
/* === GESTIÓN DE CLICS (POINTER-EVENTS) === */
/* =================================================================== */

/* Desactiva clics en capas de la GUI para evitar pausas accidentales */
.playkit-player .playkit-overlay-action,
.playkit-player .playkit-gui-area,
.playkit-player .playkit-gui-area > div {
  pointer-events: none !important;
}

/* Reactiva clics solo en los controles interactivos */
.playkit-player .playkit-bottom-bar,
.playkit-player .playkit-top-bar,
.playkit-player .playkit-interactive-area,
.playkit-player .playkit-center-playback-controls,
.playkit-player #kommerceo-fixed-cta {
  pointer-events: auto !important;
    /* <<< SOLUCIÓN "GHOST TAP" iOS >>> */
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* =================================================================== */
/* === MODIFICACIONES PERSONALIZADAS === */
/* =================================================================== */

/* --- 1. OCULTAR ELEMENTOS --- */

/* Oculta la barra de progreso */
.playkit-seek-bar {
  display: none !important;
}

/* Oculta el spinner de carga */
.playkit-spinner {
  display: none !important;
}

/* Oculta botones derechos (excepto volumen) */
.playkit-right-controls .playkit-control-button-container:not(.playkit-volume-control) {
  display: none !important;
}

/* Oculta botones izquierdos (rewind, forward, tiempo) */
.playkit-left-controls .playkit-control-rewind,
.playkit-left-controls .playkit-control-forward,
.playkit-left-controls .playkit-time-display {
  display: none !important;
}

/* --- 2. ESTILOS VISUALES --- */

/* Degradado para la barra superior */
.playkit-top-bar {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent) !important;
}

/* Degradado para la barra inferior */
.playkit-bottom-bar {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent) !important;
  /* Necesario para centrar el botón de Play */
  position: relative !important;
}

/* Centra el botón de Play/Pausa en la barra inferior */
.playkit-control-play-pause {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* --- 3. REGLAS DE VISIBILIDAD Y CORRECCIONES --- */

/* Mantiene visible la barra superior */
.playkit-top-bar * {
 opacity: 1 !important;
 visibility: visible !important;
 transform: none !important;
 transition: none !important;
 animation: none !important;
 pointer-events: auto !important;
  /* <<< SOLUCIÓN "GHOST TAP" iOS >>> */
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Mantiene visibles los contenedores de Play y Volumen (sin *) */
.playkit-bottom-bar .playkit-control-play-pause,
.playkit-bottom-bar .playkit-volume-control {
 opacity: 1 !important;
 visibility: visible !important;
 transform: none !important;
 transition: none !important;
 animation: none !important;
 pointer-events: auto !important;
  /* <<< SOLUCIÓN "GHOST TAP" iOS >>> */
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* --- CORRECCIÓN: LÓGICA DEL ICONO DE VOLUMEN --- */
/*
* Lógica:
* - La "base" (altavoz) siempre está visible.
* - Las "ondas" (sonido) se muestran solo si NO está en mute.
* - La "x" (mute) se muestra solo si SÍ está en mute.
*/

/* 1. Muestra la "base" del altavoz siempre */
.playkit-volume-control .playkit-icon-volume-base {
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 2. Oculta "ondas" y "mute" por defecto */
.playkit-volume-control .playkit-icon-volume-waves,
.playkit-volume-control .playkit-icon-volume-mute {
  display: none !important;
}

/* 3. Muestra "ondas" si NO está en mute */
.playkit-volume-control:not(.playkit-is-muted) .playkit-icon-volume-waves {
  display: inline-block !important;
}

/* 4. Muestra "mute" si SÍ está en mute */
.playkit-volume-control.playkit-is-muted .playkit-icon-volume-mute {
  display: inline-block !important;
}