/* Pantalla de carga (la misma de TalentoCyL): logotipo de FGULEM dentro de un anillo
   que se va rellenando, con la página difuminada detrás. Ver static/js/carga.js. */

.fg-carga {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  /* 🔧 PERSONALIZAR: cuánto se difumina y se aclara la página de detrás. */
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(6px) saturate(0.9);
  backdrop-filter: blur(6px) saturate(0.9);
  color: #3d3d3d;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Al pulsar un enlace o enviar un formulario: aparece tras un instante, para que un
   cambio de página rápido no llegue a parpadear. */
.fg-carga.is-visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.15s;
}

/* Al abrir una página: no aparece si carga en menos de un cuarto de segundo y, si el
   JavaScript no llegara a cargar, se retira sola a los 12 segundos. */
.fg-carga.is-inicial {
  animation:
    fg-carga-aparece 0.25s ease 0.25s backwards,
    fg-carga-retira 0.3s ease 12s forwards;
}

.fg-carga__anillo {
  position: relative;
  width: 132px;
  height: 132px;
  filter: drop-shadow(0 8px 22px rgba(20, 24, 32, 0.14));
}

/* Disco blanco detrás del logotipo para que destaque sobre la página difuminada. */
.fg-carga__anillo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #fff;
}

.fg-carga__progreso {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.fg-carga__pista {
  fill: none;
  stroke: #f1e6ee;
  stroke-width: 6;
}

/* 🔧 PERSONALIZAR: color del anillo (magenta FGULEM). */
.fg-carga__barra {
  fill: none;
  stroke: #BE007E;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 364.4;
  stroke-dashoffset: 364.4;
}

.fg-carga.is-visible .fg-carga__barra {
  animation: fg-carga-avance 6s cubic-bezier(0.12, 0.75, 0.3, 1) forwards;
}

/* Cuando la página ya ha cargado, el anillo se completa antes de desvanecerse. */
.fg-carga.is-completa .fg-carga__barra {
  animation: none;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.3s ease-out;
}

.fg-carga__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  transform: translate(-50%, -50%);
}

.fg-carga__texto {
  margin: 0;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.fg-carga__texto::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: fg-carga-puntos 1.2s steps(4) infinite;
}

@keyframes fg-carga-avance {
  from { stroke-dashoffset: 364.4; }
  to { stroke-dashoffset: 36; }
}

@keyframes fg-carga-puntos {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75% { content: "..."; }
}

@keyframes fg-carga-aparece {
  from { opacity: 0; visibility: hidden; }
}

@keyframes fg-carga-retira {
  to { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .fg-carga.is-visible .fg-carga__barra { animation-duration: 0.01s; }
  .fg-carga__texto::after { animation: none; content: "…"; }
}

@media print {
  .fg-carga { display: none !important; }
}