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

/* Los colores viven acá una sola vez, en claro y oscuro. Antes cada elemento
   repetía el par (bg-white dark:bg-gray-900, border-gray-200 dark:border-...)
   a mano en cientos de lugares; cambiar un tono era buscar y reemplazar. */
@layer base {
  :root {
    --superficie: 255 255 255;
    --elevado: 249 250 251;
    --borde: 229 231 235;
    --texto: 31 41 55;
    --tenue: 107 114 128;
    --fondo: 249 250 251;
  }

  .dark {
    --superficie: 17 24 39;
    --elevado: 24 33 51;
    --borde: 42 52 70;
    --texto: 229 231 235;
    --tenue: 148 163 184;
    --fondo: 9 13 22;
  }

  body {
    background: rgb(var(--fondo));
    color: rgb(var(--texto));
    -webkit-font-smoothing: antialiased;
  }
}

@layer components {
  .card {
    @apply bg-superficie border border-borde rounded-xl;
  }

  .input {
    @apply w-full bg-superficie border border-borde text-texto rounded-lg px-3 py-2 text-sm
           placeholder:text-tenue/60 outline-none transition-colors
           focus:border-brand focus:ring-2 focus:ring-brand/20;
  }

  .label {
    @apply block text-xs font-medium text-tenue mb-1;
  }

  .btn {
    @apply inline-flex items-center justify-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium
           transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-primary {
    @apply btn bg-brand text-white hover:bg-brand-dark;
  }
  .btn-ghost {
    @apply btn text-tenue hover:text-texto hover:bg-elevado;
  }
  .btn-peligro {
    @apply btn text-red-600 hover:bg-red-50 dark:hover:bg-red-950/40;
  }

  .badge {
    @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium;
  }
  .badge-ok {
    @apply badge bg-green-100 text-green-700 dark:bg-green-500/15 dark:text-green-400;
  }
  .badge-alerta {
    @apply badge bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-400;
  }
  .badge-error {
    @apply badge bg-red-100 text-red-700 dark:bg-red-500/15 dark:text-red-400;
  }
  .badge-neutro {
    @apply badge bg-elevado text-tenue;
  }

  .tab {
    @apply px-3 py-1.5 rounded-full text-sm transition-colors whitespace-nowrap;
  }
  .tab-activo {
    @apply tab bg-brand text-white;
  }
  .tab-inactivo {
    @apply tab text-tenue hover:text-texto hover:bg-elevado;
  }
}