/* ── Portada de Carga Widget ────────────────────────────────────── */

.inv-pc {
  display: none;
}

/* Fondo compartido por frontend y editor */
.inv-pc--live,
.inv-pc--editor {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--inv-pc-bg-color, #ffffff);
  background-image: var(--inv-pc-bg-image, none);
  background-size: var(--inv-pc-bg-size, cover);
  background-position: var(--inv-pc-bg-position, center center);
  background-repeat: no-repeat;
}

/* Bloqueo de scroll mientras la portada esta visible, ya desde el primer
   pintado (el JS lo refuerza despues). En el editor de Elementor nunca se
   bloquea: el canvas debe poder desplazarse. */
body:not(.elementor-editor-active):has(.inv-pc--live:not(.inv-pc--hidden)) {
  overflow: hidden;
  height: 100vh;
}

/* En frontend: overlay fijo sobre toda la pantalla, por encima del
   Sobre Cortina (z-index 9999) para que la portada siempre gane. */
.inv-pc--live {
  position: fixed;
  inset: 0;
  z-index: 10000;
  opacity: 1;
  transition: opacity var(--inv-pc-fade, 400ms) ease;
  /* Red de seguridad: si el JS de la portada no llegara a cargar, la retira
     igualmente. El retraso siempre es mayor que la espera maxima del JS. */
  animation: inv-pc-failsafe 1ms linear var(--inv-pc-failsafe, 20s) forwards;
}

@keyframes inv-pc-failsafe {
  to { opacity: 0; visibility: hidden; }
}

.inv-pc--live.inv-pc--hiding {
  opacity: 0;
  pointer-events: none;
}

.inv-pc--live.inv-pc--hidden {
  display: none;
}

/* En editor: bloque estático dentro del flujo, no tapa el canvas */
.inv-pc--editor {
  position: relative;
  min-height: 360px;
}

/* Capa de color sobre la imagen de fondo */
.inv-pc--live::before,
.inv-pc--editor::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--inv-pc-overlay, transparent);
  pointer-events: none;
}

/* ── Escala del spinner ─────────────────────────────────────────── */
/* El spinner conserva sus medidas originales (80px) y se escala aquí,
   para no recalcular los transform-origin de cada pétalo. */
.inv-pc__scale {
  position: relative;
  z-index: 1;
  transform: scale(var(--inv-pc-scale, 1));
}

/* ── Spinner ────────────────────────────────────────────────────── */

.inv-pc-wrap {
  position: relative;
  width: 80px;
  height: 80px;
}

.inv-pc-ring-outer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: inv-pc-spin 3s linear infinite;
}

@keyframes inv-pc-spin {
  to { transform: rotate(360deg); }
}

.inv-pc-petal {
  position: absolute;
  width: 10px;
  height: 26px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: var(--inv-pc-petal, #c9a96e);
  left: 50%;
  transform-origin: 50% 40px;
}

.inv-pc-petal:nth-child(1) { transform: translateX(-50%) rotate(0deg); }
.inv-pc-petal:nth-child(2) { transform: translateX(-50%) rotate(45deg);  opacity: .75; }
.inv-pc-petal:nth-child(3) { transform: translateX(-50%) rotate(90deg);  opacity: .6; }
.inv-pc-petal:nth-child(4) { transform: translateX(-50%) rotate(135deg); opacity: .5; }
.inv-pc-petal:nth-child(5) { transform: translateX(-50%) rotate(180deg); opacity: .4; }
.inv-pc-petal:nth-child(6) { transform: translateX(-50%) rotate(225deg); opacity: .5; }
.inv-pc-petal:nth-child(7) { transform: translateX(-50%) rotate(270deg); opacity: .6; }
.inv-pc-petal:nth-child(8) { transform: translateX(-50%) rotate(315deg); opacity: .75; }

.inv-pc-ring-inner {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: var(--inv-pc-ring, #b08850);
  border-right-color: var(--inv-pc-ring, #b08850);
  animation: inv-pc-spin-fast 1s ease-in-out infinite;
}

@keyframes inv-pc-spin-fast {
  to { transform: rotate(360deg); }
}

.inv-pc-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--inv-pc-dot, #c9a96e);
  animation: inv-pc-pulse 1.8s ease-in-out infinite;
}

@keyframes inv-pc-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(0.7); opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .inv-pc-ring-outer,
  .inv-pc-ring-inner,
  .inv-pc-dot {
    animation: none;
  }
}

/* ── Hint del editor ────────────────────────────────────────────── */

.inv-pc-editor-hint {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
}

.inv-pc-editor-hint p {
  margin: 0;
}