/* ==========================================================================
   Kalium Player - Reproductor multimedia personalizado (video + audio)
   --------------------------------------------------------------------------
   Tema oscuro, responsive, sin dependencias externas.
   Usa variables CSS del proyecto con fallbacks para funcionar standalone.
   ========================================================================== */

.kp-player {
  /* Variables locales con fallback al tema del proyecto */
  --kp-ac: var(--ac, #6366f1);
  --kp-ac2: var(--ac2, #8b5cf6);
  --kp-bg: var(--bgc, #1a1a2e);
  --kp-border: var(--bd, rgba(99, 102, 241, .2));
  --kp-radius: var(--rs, 8px);

  box-sizing: border-box;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.kp-player *,
.kp-player *::before,
.kp-player *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   1. Contenedor
   -------------------------------------------------------------------------- */

/* Video: contenedor con esquinas redondeadas y fondo negro */
.kp-video {
  position: relative;
  width: 100%;
  background: #000;
  border-radius: var(--kp-radius);
  overflow: hidden;
  line-height: 0;
  isolation: isolate;
}

/* Audio: tarjeta compacta con fondo del tema */
.kp-audio {
  position: relative;
  width: 100%;
  background: var(--kp-bg);
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   2. Elemento multimedia
   -------------------------------------------------------------------------- */

/* Anular cualquier estilo nativo del navegador en <video>/<audio> */
.kp-media {
  display: block;
  border: none;
  margin: 0;
  outline: none;
}
.kp-video .kp-media {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  background: #000;
}
/* El <audio> no se renderiza (los controles son el propio reproductor) */
.kp-audio .kp-media { display: none; }

/* Forzar ocultación de los controles nativos WebKit en caso de que el
   atributo `controls` llegue a estar presente por error */
.kp-media::-webkit-media-controls,
.kp-media::-webkit-media-controls-enclosure,
.kp-media::-webkit-media-controls-panel {
  display: none !important;
  -webkit-appearance: none;
}

/* --------------------------------------------------------------------------
   3. Barra de controles
   -------------------------------------------------------------------------- */

.kp-controls {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* En video: overlay degradado sobre la parte inferior */
.kp-video .kp-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 34px 10px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, .9), rgba(0, 0, 0, .45) 55%, transparent);
  opacity: 1;
  transition: opacity .25s ease;
}
/* En audio: estático, siempre visible */
.kp-audio .kp-controls {
  position: relative;
  padding: 10px 12px 12px;
  background: transparent;
}

/* Autocultado de controles en video mientras se reproduce:
   aparecen al mover el ratón, al hacer hover o al usar teclado */
.kp-video.is-playing .kp-controls {
  opacity: 0;
  pointer-events: none;
}
.kp-video.is-playing.kp-controls-visible .kp-controls,
.kp-video:hover .kp-controls,
.kp-video:focus-within .kp-controls {
  opacity: 1;
  pointer-events: auto;
}
.kp-video.is-playing:not(.kp-controls-visible) { cursor: none; }

.kp-progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.kp-actions-row {
  display: flex;
  align-items: center;
  gap: 2px;
}
.kp-spacer { flex: 1; }

/* --------------------------------------------------------------------------
   4. Botones
   -------------------------------------------------------------------------- */

.kp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease, color .15s ease;
}
.kp-btn:hover { background: rgba(255, 255, 255, .14); }
.kp-btn:active { transform: scale(.9); }
.kp-btn:focus-visible {
  outline: 2px solid var(--kp-ac);
  outline-offset: 1px;
}
.kp-ic { width: 18px; height: 18px; display: block; }

/* Alternancia de iconos según estado (clases en el contenedor .kp-player) */
.kp-ic-pause,
.kp-ic-vol-off,
.kp-ic-fs-exit { display: none; }
.kp-player.is-playing .kp-ic-play { display: none; }
.kp-player.is-playing .kp-ic-pause { display: block; }
.kp-player.is-muted .kp-ic-vol-on { display: none; }
.kp-player.is-muted .kp-ic-vol-off { display: block; }
.kp-player.is-fullscreen .kp-ic-fs-enter { display: none; }
.kp-player.is-fullscreen .kp-ic-fs-exit { display: block; }

/* Ocultar botón de pantalla completa si el navegador no lo soporta */
.kp-player.no-fs .kp-fullscreen { display: none; }

/* --------------------------------------------------------------------------
   5. Barra de progreso y tiempo
   -------------------------------------------------------------------------- */

.kp-progress {
  position: relative;
  flex: 1;
  height: 18px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* Capa de buffer (cargado) detrás del relleno de progreso */
.kp-buffer {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  width: 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, .18);
  pointer-events: none;
}
/* Relleno de progreso (tiempo reproducido) */
.kp-fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--kp-ac), var(--kp-ac2));
  box-shadow: 0 0 10px rgba(99, 102, 241, .55);
  pointer-events: none;
}

/* Slider (range) de progreso: pista transparente + pulgar personalizado.
   La pista se deja transparente porque el relleno lo dibujan .kp-fill/.kp-buffer;
   el pulgar se estiliza con pseudo-elementos para cada motor. */
.kp-range {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 2;
  width: 100%;
  height: 18px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
}
.kp-range::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
  border: none;
}
.kp-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 14px;
  width: 14px;
  margin-top: -4px; /* (6px pista - 14px pulgar) / 2 para centrar */
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--kp-ac);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
  transition: transform .12s ease;
}
.kp-range::-moz-range-track {
  height: 6px;
  background: transparent;
  border: none;
}
.kp-range::-moz-range-thumb {
  height: 9px;
  width: 9px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--kp-ac);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
  transition: transform .12s ease;
}
.kp-range:hover::-webkit-slider-thumb { transform: scale(1.15); }
.kp-range:active::-webkit-slider-thumb { transform: scale(1.3); }
.kp-range:hover::-moz-range-thumb { transform: scale(1.15); }
.kp-range:active::-moz-range-thumb { transform: scale(1.3); }

/* Tiempo transcurrido / duración */
.kp-time {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: rgba(255, 255, 255, .9);
  white-space: nowrap;
}
.kp-sep { color: rgba(255, 255, 255, .4); }

/* --------------------------------------------------------------------------
   6. Volumen
   -------------------------------------------------------------------------- */

.kp-volume {
  display: flex;
  align-items: center;
  gap: 6px;
}
.kp-volume .kp-volume-range { width: 76px; }

/* ==========================================================
   RESPONSIVE — Player
   ========================================================== */

@media (max-width: 560px) {
  .kp-volume .kp-volume-range { width: 44px; }
  .kp-video .kp-media { max-height: 320px; }
  .kp-btn { width: 30px; height: 30px; }
  .kp-ic { width: 16px; height: 16px; }
  .kp-time { font-size: 11px; gap: 2px; }
  .kp-video .kp-controls { padding: 24px 8px 6px; }
  .kp-audio .kp-controls { padding: 8px 10px 10px; }
  .kp-range::-webkit-slider-thumb { height: 12px; width: 12px; }
  .kp-range::-moz-range-thumb { height: 8px; width: 8px; }
}

@media (max-width: 400px) {
  .kp-video .kp-media { max-height: 240px; }
  .kp-volume { display: none; }
  .kp-btn { width: 28px; height: 28px; }
  .kp-time { font-size: 10px; }
}

/* --------------------------------------------------------------------------
   7. Estado de error
   -------------------------------------------------------------------------- */

.kp-error {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: #f87171;
  background: rgba(10, 10, 15, .75);
  text-align: center;
  padding: 12px;
}
.kp-player.is-error .kp-error { display: flex; }
.kp-error[hidden] { display: none; }

/* --------------------------------------------------------------------------
   8. Pantalla completa
   -------------------------------------------------------------------------- */

.kp-player:fullscreen {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  border: none;
  border-radius: 0;
}
.kp-player:fullscreen .kp-media {
  width: 100vw;
  height: 100vh;
  max-height: none;
  object-fit: contain;
}
.kp-player:fullscreen .kp-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Foco accesible en el contenedor (para atajos de teclado) */
.kp-player:focus { outline: none; }
.kp-player:focus-visible {
  outline: 2px solid var(--kp-ac);
  outline-offset: 2px;
}