/* ============================================================
   PRINTIO.PE — base.css
   Variables, reset y tipografía base
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&display=swap');

/* ============================================================
   1. VARIABLES
   ============================================================ */
:root {
  /* Le dice al navegador que esta página es SIEMPRE clara — sin esto,
     "Auto Dark Mode for Web Contents" de Chrome (u otras extensiones de
     dark mode forzado) reinterpreta la paleta y la oscurece de forma
     heurística, dando colores que no son los que define este archivo. */
  color-scheme: light;

  --bg:           #C8EDF1;
  --surface:      #EBF4FB;
  --borde:        #B8D4EA;
  --borde-activo: #1A7AB0;

  --texto:        #0F2D5E;
  --texto-mid:    #1A4F8A;
  --texto-tenue:  #1A7AB0;

  --acento:        #1A4F8A;       /* primary brand — usado en CTAs principales */
  --acento-hover:  #0F2D5E;       /* hover/pressed del primary */
  --acento-fuerte: #0F2D5E;       /* alias del hover — wizard lo usaba sin definir */
  --acento-tenue:  #D6E9F5;
  --modal-bg:      #DCEEF8;

  /* Overlay (fondo de modales). Unificado para que TODOS los modales
     (pedido, wizard, plantillas, boleado, etc.) tengan exactamente la
     misma capa de oscurecimiento — antes había 2 variantes diferentes
     (rgba(10,25,50) en modal pedido vs rgba(15,45,94) en wizard) y se
     notaba al saltar entre uno y otro. */
  --overlay:       rgba(15, 45, 94, 0.55);

  --exito:        #16A34A;
  --error:        #DC2626;

  --radio-sm:   6px;
  --radio-md:   10px;
  --radio-lg:   14px;
  --radio-xl:   20px;
  --radio-full: 9999px;

  --sombra-sm: 0 1px 4px rgba(15,45,94,0.08);
  --sombra-md: 0 4px 24px rgba(15,45,94,0.14);

  /* Easing tokens unificados — usados en toda la app para coherencia.
     ease-out-quart es el que usa Stripe/Linear para movimientos suaves.
     ease-spring rebota suave (para entradas tipo pop). */
  --ease-out:      cubic-bezier(.22, 1, .36, 1);
  --ease-spring:   cubic-bezier(.34, 1.56, .64, 1);
  --ease-in-out:   cubic-bezier(.65, 0, .35, 1);
  --dur-fast:      0.18s;
  --dur-base:      0.32s;
  --dur-slow:      0.55s;
}

/* ============================================================
   ANIMACIONES GLOBALES reutilizables — toda la app comparte
   estos keyframes para mantener un lenguaje coherente.
   ============================================================ */
@keyframes appFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes appFadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes appSpin {
  to { transform: rotate(360deg); }
}
/* Spinner de carga genérico (paso4: "Confirmando tu pago"/"Procesando tu
   pedido") — Frank 2026-08-25: "puede demorar mucho y la gente se
   desespera", sin esto la pantalla de espera era solo texto quieto. */
.app-spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto 14px;
  border: 3px solid var(--acento-tenue);
  border-top-color: var(--acento);
  border-radius: 50%;
  animation: appSpin 0.8s linear infinite;
}
@keyframes appFadeInDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes appScaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
/* Reversas de arriba — 2026-08-24, auditoría de animaciones (Frank: "unifica
   apertura y cierre de todo"). Toda la familia .overlay/.about-overlay/
   .boleado-overlay abría con appFadeIn+appScaleIn pero cerraba con
   classList.remove('open') sin ninguna transición (display:none corta
   cualquier animación en el mismo frame) — 0ms de salida contra 320ms de
   entrada. Ver cerrarOverlayAnimado() en app/modal.js, el helper único que
   ahora dispara estas 2 en reversa antes de ocultar el overlay de verdad. */
@keyframes appFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes appScaleOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.96); }
}
@keyframes appPulseSoft {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
@keyframes appShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Respeto a usuarios que prefieren menos movimiento (a11y).
   Esto desactiva o reduce todas las animaciones del sitio. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
    scroll-behavior:      auto !important;
  }
}

/* ============================================================
   2. RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 17px; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--texto);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Frank reportó la marquita de selección de texto del teclado en botones
     y labels por TODO el sitio (chevrons, dropdowns, landing, timer...) —
     se venía parchando elemento por elemento. Esta app es casi toda UI de
     interfaz (botones, precios, contadores), no contenido para copiar, así
     que el default correcto es "no seleccionable" acá arriba, y recién
     habilitarlo puntual donde sí haga falta copiar algo (input/textarea ya
     lo permiten solos, los navegadores ignoran el user-select heredado
     ahí). */
  user-select: none;
}
a      { color: inherit; text-decoration: none; }
button { font-family: 'DM Sans', sans-serif; cursor: pointer; }
input, select, textarea { font-family: 'DM Sans', sans-serif; user-select: text; }


/* ── Google Places Autocomplete (legacy) ── */
.pac-container {
  z-index: 9999 !important;
  border-radius: var(--radio-md);
  border: 1.5px solid var(--borde);
  box-shadow: var(--sombra-md);
  font-family: 'DM Sans', sans-serif;
  margin-top: 4px;
}
.pac-item {
  padding: 8px 12px;
  font-size: 15px;
  color: var(--texto-mid);
  cursor: pointer;
  border-top: 1px solid var(--borde);
}
.pac-item:first-child { border-top: none; }
.pac-item:hover { background: var(--acento-tenue); }
.pac-item-selected { background: var(--acento-tenue); }
.pac-icon { display: none; }
.pac-item-query { font-size: 15px; font-weight: 600; color: var(--texto); }