@tailwind base;
@tailwind components;
@tailwind utilities;

/* Respaldo mientras el tema del negocio no se haya aplicado. Los valores son
   los que variablesTema() calcula para el color por defecto (ver tema.ts):
   se mantienen sincronizados a mano, no se derivan aparte. */
:root {
  --marca-rgb: 249 115 22;
  --marca-oscuro-rgb: 173 82 26;
  --marca-claro-rgb: 255 240 233;
  --marca-contraste-rgb: 23 23 23;
}

@layer components {
  .input {
    @apply w-full rounded-xl border border-white/10 bg-superficie-2 px-3.5 py-2.5 text-sm text-white placeholder:text-white/40 outline-none transition focus:border-dorado focus:ring-2 focus:ring-dorado/30;
  }
  .input-icon {
    @apply w-full rounded-xl border border-white/10 bg-superficie-2 pl-10 pr-3.5 py-2.5 text-sm text-white placeholder:text-white/40 outline-none transition focus:border-dorado focus:ring-2 focus:ring-dorado/30;
  }
  .btn {
    @apply rounded-xl px-3.5 py-2 text-sm font-bold transition active:scale-[0.98];
  }
}

html,
body,
#root {
  height: 100%;
}
body {
  margin: 0;
  font-family: Archivo, system-ui, -apple-system, sans-serif;
  background: #0d0f1e;
  color: #f2f3fa;
  -webkit-font-smoothing: antialiased;
}

/* Landing: globitos que flotan alrededor del telefono de muestra */
@keyframes gx-flotar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.gx-flota { animation: gx-flotar 3.4s ease-in-out infinite; }
.gx-flota-lento { animation: gx-flotar 4.6s ease-in-out 0.9s infinite; }
.gx-flota-suave { animation: gx-flotar 5.4s ease-in-out 1.7s infinite; }
@media (prefers-reduced-motion: reduce) {
  .gx-flota, .gx-flota-lento, .gx-flota-suave { animation: none; }
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
