@import "tailwindcss";

:root {
  --background: #f6f7fb;
  --foreground: #0f172a;
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-brand: var(--brand);
  --color-brand-dark: var(--brand-dark);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-geist-sans), system-ui, Arial, sans-serif;
}

/* Utilidades reutilizables */
.card {
  @apply rounded-2xl bg-white shadow-sm ring-1 ring-slate-200;
}
.btn {
  @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition disabled:opacity-50;
}
.btn-primary {
  @apply inline-flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-700 disabled:opacity-50;
}
.btn-ghost {
  @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-100 disabled:opacity-50;
}
.btn-danger {
  @apply inline-flex items-center justify-center gap-2 rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-red-700 disabled:opacity-50;
}
.input {
  @apply w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100;
}
.label {
  @apply mb-1 block text-sm font-medium text-slate-700;
}
.badge {
  @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium;
}

@media print {
  .no-print {
    display: none !important;
  }
  body {
    background: #fff;
  }
}