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

:root {
  --font-sans: 'Inter', system-ui, sans-serif;
  --background: 255 255 255;
  --foreground: 15 23 42;
}

.dark {
  --background: 9 9 20;
  --foreground: 226 232 240;
}

@layer base {
  * {
    @apply border-slate-200 dark:border-white/10;
  }
  body {
    @apply bg-white text-slate-900 antialiased dark:bg-[#09090f] dark:text-slate-100;
    font-feature-settings: 'cv11', 'ss01';
  }
  ::selection {
    @apply bg-brand-500/30;
  }
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
  }
}

@layer components {
  .container-x {
    @apply mx-auto w-full max-w-7xl px-5 sm:px-8;
  }

  /* Glassmorphism ligero */
  .glass {
    @apply bg-white/70 backdrop-blur-xl dark:bg-white/5;
  }

  .card {
    @apply rounded-3xl border border-slate-200/70 bg-white p-6 shadow-soft transition
           hover:-translate-y-1 hover:shadow-lg dark:border-white/10 dark:bg-white/[0.03];
  }

  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 text-sm
           font-semibold transition focus:outline-none focus-visible:ring-2
           focus-visible:ring-brand-500 focus-visible:ring-offset-2 disabled:opacity-60;
  }
  .btn-primary {
    @apply btn bg-brand-600 text-white shadow-glow hover:bg-brand-700;
  }
  .btn-ghost {
    @apply btn border border-slate-300 text-slate-700 hover:bg-slate-100
           dark:border-white/15 dark:text-slate-200 dark:hover:bg-white/10;
  }

  .section-title {
    @apply text-3xl font-bold tracking-tight sm:text-4xl;
  }
  .eyebrow {
    @apply inline-flex items-center gap-2 rounded-full border border-brand-500/30
           bg-brand-500/10 px-4 py-1.5 text-xs font-semibold uppercase tracking-wider
           text-brand-600 dark:text-brand-300;
  }

  /* Estilos base para inputs del admin */
  .field {
    @apply w-full rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-sm
           text-slate-900 outline-none transition focus:border-brand-500
           focus:ring-2 focus:ring-brand-500/30
           dark:border-white/10 dark:bg-white/5 dark:text-slate-100;
  }
  .label {
    @apply mb-1.5 block text-sm font-medium text-slate-700 dark:text-slate-300;
  }
}

/* Grid decorativo de fondo */
.bg-grid {
  background-image: radial-gradient(circle at 1px 1px, rgba(99, 102, 241, 0.12) 1px, transparent 0);
  background-size: 32px 32px;
}

/* Accesibilidad: respeta la preferencia de movimiento reducido */
@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;
  }
}

/* Scrollbar sutil (webkit) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  @apply rounded-full bg-slate-300 dark:bg-white/15;
}
::-webkit-scrollbar-thumb:hover {
  @apply bg-slate-400 dark:bg-white/25;
}