@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 border border-stone-300 rounded-xl px-3.5 py-2.5 text-sm outline-none transition focus:border-marca focus:ring-2 focus:ring-marca/30;
  }
  .input-icon {
    @apply w-full rounded-xl border border-stone-300 bg-white pl-10 pr-3.5 py-2.5 text-sm outline-none transition focus:border-marca focus:ring-2 focus:ring-marca/30;
  }
  .btn {
    @apply rounded-xl px-3.5 py-2.5 text-sm font-bold transition active:scale-[0.98];
  }
}

html,
body,
#root {
  height: 100%;
}
body {
  margin: 0;
  font-family: Archivo, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: #f5f5f4;
  color: #1c1917;
  -webkit-font-smoothing: antialiased;
}
