/* ============================================================================
   panel-carga.css — la cortina de carga con el logo de WeDo

   La maqueta la arma static/panel-interaccion.js: acá no hay ninguna clase que
   una plantilla tenga que escribir. Por eso vive aparte de panel.css — es un
   solo componente y se puede quitar entero, hoja y script, sin tocar el resto.

   Todo sale de los tokens de wedo.css (`--wedo-*`, `--r-*`, `--sh-*`, `--fs-*`)
   y de los de Tabler: ni un color literal, así que el modo oscuro sale solo.
   ========================================================================== */

/* ── La cortina ─────────────────────────────────────────────────────────────
   Tapa el contenido mientras se va la página. Va DEBAJO de la barrita de 3px
   (z-index 2000 en panel.css) a propósito: son complementarias y la barrita
   tiene que seguir viéndose corriendo por arriba.

   `cursor: progress` sobre todo lo que tapa, para que el puntero diga lo mismo
   que la pantalla. */
.wedo-cortina {
  position: fixed;
  inset: 0;
  z-index: 1990;
  display: grid;
  place-items: center;
  cursor: progress;
  opacity: 0;
  transition: opacity .18s ease-out;
}

.wedo-cortina.esta-visible { opacity: 1; }

/* El velo va en un pseudo-elemento y no en la cortina misma porque la
   transparencia tiene que ser SÓLO del fondo: con `opacity` sobre el contenedor
   el logo y el texto se destiñen con él, que es justo lo que hay que leer.

   El color es el fondo del cuerpo, así que el velo es del tema vigente sin que
   haya que declararlo dos veces. */
.wedo-cortina::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--tblr-body-bg);
  opacity: .82;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.wedo-cortina-caja {
  position: relative;          /* por encima del velo, que es absolute */
  display: grid;
  justify-items: center;
  gap: .9rem;
  padding: 1.5rem;
  text-align: center;
}

/* Los PNG de la marca son cuadrados OPACOS (sin alfa): sin radio se ven como
   un recorte pegado sobre la pantalla. El radio los vuelve una ficha, igual que
   en la barra lateral. */
.wedo-cortina-simbolo {
  inline-size: 72px;
  block-size: 72px;
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  animation: wedo-latido 1.5s ease-in-out infinite;
}

.wedo-cortina-texto {
  margin: 0;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--wedo-fg-3);
}

/* Un latido, no un giro: el símbolo es la marca y girándolo se lee como un
   spinner genérico con el logo adentro. Respirando sigue siendo el logo. */
@keyframes wedo-latido {
  0%, 100% { transform: scale(1);    box-shadow: var(--sh-1); }
  50%      { transform: scale(1.07); box-shadow: var(--sh-2); }
}

/* ── Quien pidió menos movimiento ───────────────────────────────────────────
   La cortina SIGUE apareciendo: lo que informa es que está tapado y dice
   «cargando», y eso no es decoración. Lo que se va es el movimiento — el logo
   queda quieto y el fundido no existe. */
@media (prefers-reduced-motion: reduce) {
  .wedo-cortina { transition: none; }
  .wedo-cortina-simbolo { animation: none; box-shadow: var(--sh-1); }
}

/* Una cortina impresa es una hoja con el logo en el medio y nada más. */
@media print {
  .wedo-cortina { display: none; }
}