/* modal-overlay.css · Overlay "Generando diagnóstico" + animaciones */
/* Los offsets de 1rem en desktop (top/right/bottom/left) coinciden
   con el padding de .modal en modal-core.css:9 — esa es la fuente
   de verdad para el spacing del modal. */
.modal__overlay {
  position: fixed;
  top: 1rem;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(10, 14, 23);
  /* backdrop-filter removido: en position:fixed sobre elementos con
     mask-image, causaba que el background se renderizara casi
     transparente. El blur del modal__backdrop (modal-core.css:31)
     ya da la sensación de profundidad. Background sólido (no rgba)
     para garantizar opacidad completa sobre el form. */
  border-radius: var(--radius-md);
  animation: overlay-fade-in 180ms ease-out;
}

.modal__overlay[hidden] {
  display: none;
}

.modal__overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem;
  text-align: center;
  color: var(--color-text-cyber);
}

.modal__overlay-logo {
  width: 96px;
  height: 120px;
  animation: overlay-logo-pulse 1.6s ease-in-out infinite;
}

.modal__overlay-eyebrow {
  margin: 0;
  font-family: var(--font-mono-cyber);
  font-size: 0.75rem;
  color: var(--color-accent-cyber);
  letter-spacing: 0.05em;
  text-transform: lowercase;
}

.modal__overlay-text {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text-cyber);
  font-weight: 500;
}

@keyframes overlay-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes overlay-logo-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.06);
    opacity: 0.8;
  }
}