/* ==========================================================================
   MediaFirme · estado de carga del reproductor
   --------------------------------------------------------------------------
   POR QUE EXISTE
   La pagina de un medio tiene tres esperas encadenadas y ninguna se ve:

     1. React monta y deja .viewer-container VACIO hasta que responde
        /api/v1/media/<token> (_VideoMediaPage.js: el visor solo se pinta si
        mediaLoaded). Area en blanco, sin una sola pista de actividad.
     2. Con los datos ya en mano, VideoJSEmbed.jsx inyecta a mano
        static/video_js/video-js.{css,js}. Otra espera, tambien muda.
     3. Al pulsar play, un archivo largo tarda en llenar el buffer. video.js
        pone ahi su aro de 5em sin una sola palabra, y con .3s de retardo.

   Con videos largos y pesados las tres suman de sobra para que alguien
   concluya que el portal esta roto y recargue, que es lo peor que puede hacer:
   tira el buffer que ya habia bajado.

   Este archivo pinta el estado; mediafirme-cargando.js decide cuando. Ambos se
   cargan por EXTRA_CSS_PATHS / EXTRA_JS_PATHS (cms/settings.py), asi que no
   hace falta recompilar el bundle de React, que en este fork no es una
   operacion segura (ver mediafirme-download.js).

   COMO REVERTIR
   Sacar los dos archivos de esas listas en cms/settings.py.
   ========================================================================== */

.mf-cargando {
  /* El acento del tema; el reproductor es negro en claro y en oscuro, asi que
     el resto de los colores van fijos y no siguen a los tokens. */
  --mf-cg-acento: var(--mf-accent, #5eead4);
  --mf-cg-texto: rgba(255, 255, 255, 0.92);
  --mf-cg-suave: rgba(255, 255, 255, 0.62);

  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 1rem;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   MODO "hueco": todavia no hay reproductor al que taparle nada, asi que el
   estado OCUPA el sitio donde va a aparecer. Sin esto el 16:9 llega de golpe
   cuando responde la API y empuja media pagina hacia abajo.
   -------------------------------------------------------------------------- */
.mf-cargando[data-modo="hueco"] {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0b0d11;
}

@media screen and (min-width: 480px) {
  /* Mismo radio que .viewer-container .player-container en MediaPage.scss. */
  .mf-cargando[data-modo="hueco"] { border-radius: 10px; }
}

/* Un barrido lento sobre el hueco: es lo que distingue "cargando" de
   "se quedo colgado" cuando aun no hay ningun dato que mostrar. */
.mf-cargando[data-modo="hueco"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.05) 42%,
    rgba(255, 255, 255, 0.09) 50%,
    rgba(255, 255, 255, 0.05) 58%,
    transparent 80%
  );
  transform: translateX(-100%);
  animation: mf-cg-barrido 1.9s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   MODO "encima": el reproductor ya existe y esta llenando buffer. Va sobre el
   fotograma, sin robar el clic (el boton grande de play y la barra de control
   siguen respondiendo debajo).
   -------------------------------------------------------------------------- */
.mf-cargando[data-modo="encima"] {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* .vjs-big-play-button lleva z-index:10 !important. */
  z-index: 12;
  background: radial-gradient(circle at center, rgba(6, 8, 11, 0.72), rgba(6, 8, 11, 0.42) 70%, rgba(6, 8, 11, 0.2));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  /* La visibilidad espera a que acabe el desvanecido; si no, el nodo se corta de
     golpe y el fade no se ve. */
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}

/* Un tiron de buffer de 200 ms no merece que aparezca nada: seria justo el
   parpadeo que venimos a quitar. Se retrasa SOLO la aparicion, y solo en las
   fases que ocurren con el video ya andando; montar el reproductor si se avisa
   de inmediato, porque ahi la espera es segura y larga.
   (video.js hace lo mismo con su aro: animation-delay .3s.) */
.mf-cargando[data-modo="encima"][data-fase="buffer"][data-visible="1"],
.mf-cargando[data-modo="encima"][data-fase="busca"][data-visible="1"] {
  transition: opacity 0.25s ease 0.35s, visibility 0s;
}

/* Montando el reproductor no hay fotograma debajo que dejar ver, y el fondo de
   la pagina es claro en tema claro: el velo translucido se leeria como un gris
   sucio. Se pone el mismo negro del hueco para que el paso de uno a otro no se
   note. */
.mf-cargando[data-modo="encima"][data-fase="montando"] {
  background: #0b0d11;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.mf-cargando[data-visible="0"] {
  opacity: 0;
  visibility: hidden;
}

.mf-cargando[data-visible="1"] { opacity: 1; }

/* Mientras hablamos nosotros, el aro pelado de video.js solo estorba. */
html[data-mf-cargando="1"] .vjs-loading-spinner { display: none !important; }

/* --------------------------------------------------------------------------
   La tarjeta
   -------------------------------------------------------------------------- */
.mf-cargando-caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  max-width: 26rem;
  text-align: center;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--mf-cg-texto);
}

/* --- el disco ------------------------------------------------------------- */
.mf-cargando-disco {
  position: relative;
  width: 3.25rem;
  height: 3.25rem;
  flex: none;
}

/* El aro es un barrido conico recortado a un anillo de 3px. La mascara se come
   todo lo que pinte el elemento, hijos incluidos: por eso el triangulo va en un
   nodo hermano y no dentro. */
.mf-cargando-aro {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0 8%,
    rgba(255, 255, 255, 0.14) 30%,
    var(--mf-cg-acento) 92%,
    transparent 100%
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: mf-cg-giro 1.05s linear infinite;
}

.mf-cargando-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mf-cg-acento);
  animation: mf-cg-latido 1.7s ease-in-out infinite;
}

.mf-cargando-play::before {
  content: "";
  width: 0.62rem;
  height: 0.72rem;
  background: currentColor;
  /* Un triangulo de play, para que se lea "video" y no "spinner generico". */
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* --- textos -------------------------------------------------------------- */
.mf-cargando-titulo {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.mf-cargando-nota,
.mf-cargando-dato {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--mf-cg-suave);
}

.mf-cargando-dato { font-size: 0.75rem; opacity: 0.85; }

.mf-cargando-nota:empty,
.mf-cargando-dato:empty { display: none; }

/* --- la barra ------------------------------------------------------------- */
.mf-cargando-barra {
  position: relative;
  width: 11rem;
  max-width: 60vw;
  height: 3px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.16);
}

.mf-cargando-barra > i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 38%;
  border-radius: inherit;
  background: var(--mf-cg-acento);
  animation: mf-cg-vaiven 1.5s ease-in-out infinite;
}

/* Con dato real la barra deja de fingir: el ancho lo pone el JS con los
   segundos de video ya descargados por delante del punto de reproduccion. */
.mf-cargando-barra[data-dato="1"] > i {
  animation: none;
  left: 0;
  transition: width 0.3s ease;
}

/* --------------------------------------------------------------------------
   Animaciones
   -------------------------------------------------------------------------- */
@keyframes mf-cg-giro {
  to { transform: rotate(1turn); }
}

@keyframes mf-cg-latido {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.16); opacity: 1; }
}

@keyframes mf-cg-vaiven {
  0% { left: -40%; }
  100% { left: 100%; }
}

@keyframes mf-cg-barrido {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* --------------------------------------------------------------------------
   Movimiento reducido: se quitan los bucles, pero NO el estado. Alguien que
   pidio menos animacion sigue necesitando saber que el video esta cargando, y
   para eso queda el texto, que es la parte que de verdad tranquiliza.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mf-cargando[data-modo="hueco"]::before,
  .mf-cargando-aro,
  .mf-cargando-play,
  .mf-cargando-barra > i {
    animation: none;
  }

  .mf-cargando-aro {
    background: none;
    border: 3px solid rgba(255, 255, 255, 0.18);
    border-top-color: var(--mf-cg-acento);
    -webkit-mask: none;
    mask: none;
  }

  .mf-cargando-barra > i { width: 100%; opacity: 0.45; }
  .mf-cargando-barra[data-dato="1"] > i { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Pantallas chicas: la tarjeta completa no cabe sobre un 16:9 de 320px.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 420px) {
  .mf-cargando-caja { gap: 0.6rem; }
  .mf-cargando-disco { width: 2.6rem; height: 2.6rem; }
  .mf-cargando-titulo { font-size: 0.85rem; }
  .mf-cargando-nota { font-size: 0.74rem; }
}