/*
   ==========================================================================
   COMPONENTE: Modal de bienvenida (post-login por DNI)
   Se muestra una sola vez en /catalogo, justo después de que alguien entra
   con su DNI (ver CLAUDE.md → "Usuarios del sitio: login por DNI"). El
   markup solo existe si hay flashdata, así que este componente no pinta
   nada para un visitante común.

   Hoja propia y no `.modal-overlay` de modal.css por dos motivos concretos:
   1. El difuminado de atrás es apenas perceptible (3px) — el de modal.css
      es de 10px + saturate, pensado para tapar la página entera.
   2. Tiene que quedar por encima del panel de carrito (z-index 325 en
      cart-panel.css), que a su vez ya está por encima de .modal-overlay
      (300). Ver el comentario de capas de cart-panel.css antes de tocar
      cualquiera de estos números.
   ========================================================================== */
.welcome-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  /* Velo suave: la idea es que el catálogo se siga leyendo detrás. */
  background-color: rgba(27, 42, 24, 0.28);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.welcome-modal-overlay[hidden] { display: none; }
.welcome-modal-overlay.is-visible { opacity: 1; }

.welcome-modal-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  background-color: var(--color-bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 2.25rem 1.5rem 1.75rem;
  text-align: center;
  transform: translateY(12px) scale(0.98);
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.welcome-modal-overlay.is-visible .welcome-modal-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.welcome-modal-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--color-text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.18s ease;
}
.welcome-modal-close:hover { color: var(--color-accent); }
.welcome-modal-close svg { width: 1rem; height: 1rem; }

.welcome-modal-mark {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  display: block;
  object-fit: contain;
}

.welcome-modal-kicker {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: 0.35rem;
}

.welcome-modal-name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.15;
  color: var(--color-primary);
  margin-bottom: 0.6rem;
}

.welcome-modal-lead {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   Botón con cuenta regresiva: el modal se cierra solo a los 2 s (el tiempo
   lo fija AUTO_CLOSE_MS en el script de catalogo.php y llega acá como
   --welcome-auto-close). Una capa clara cubre el botón y se vacía de
   derecha a izquierda en ese mismo tiempo, a ritmo constante.
   -------------------------------------------------------------------------- */
.welcome-modal-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.welcome-modal-timer {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(255, 255, 255, 0.28);
  transform-origin: left center;
  transform: scaleX(1);
  pointer-events: none;
}
.welcome-modal-overlay.is-visible .welcome-modal-timer {
  animation: welcome-modal-drain var(--welcome-auto-close, 2s) linear forwards;
}
.welcome-modal-cta-label { position: relative; }

@keyframes welcome-modal-drain {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Sin animación: la barra no se ve, pero el cierre a los 2 s sigue igual. */
@media (prefers-reduced-motion: reduce) {
  .welcome-modal-timer { display: none; }
}

/* --------------------------------------------------------------------------
   Desde tablet: la tarjeta tiene más aire, igual que admin-login.css.
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {
  .welcome-modal-card { padding: 2.5rem 2rem 2rem; }
}