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

/* Paleta de marca (valores por defecto = UghPass). Ver src/lib/theme.ts */
:root {
  --brand-50: 255 243 235; --brand-100: 255 226 204; --brand-200: 255 194 153; --brand-300: 255 154 92;
  --brand-400: 255 118 41; --brand-500: 255 85 0; --brand-600: 224 74 0; --brand-700: 184 60 0;
  --brand-800: 143 47 0; --brand-900: 102 33 0; --brand-ink: 18 18 18;
}

html { -webkit-tap-highlight-color: transparent; }
body { text-rendering: optimizeLegibility; }
::selection { background: rgb(var(--brand-500) / .25); }
h1, h2, .font-display { font-family: var(--font-display), var(--font-inter), system-ui, sans-serif; letter-spacing: -0.02em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@layer components {
  .btn { @apply inline-flex items-center justify-center gap-2 rounded-control px-4 py-3 text-sm font-semibold transition active:scale-[.97] disabled:opacity-50 disabled:pointer-events-none; }
  .btn-primary { @apply btn bg-ink-950 text-piedra hover:bg-ink-800; }
  .btn-brand { @apply btn bg-brand-500 hover:bg-brand-400 shadow-glow; color: rgb(var(--brand-ink)); }
  .btn-ghost { @apply btn bg-transparent text-gray-700 hover:bg-gray-100; }
  .input { @apply w-full rounded-control border border-gray-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-brand-400 focus:ring-4 focus:ring-brand-500/15; }
  .label { @apply mb-1.5 block text-sm font-medium text-gray-700; }
  .card { @apply rounded-card border border-gray-100 bg-white shadow-card; }
  .chip { @apply inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium; }
  .safe-bottom { padding-bottom: max(env(safe-area-inset-bottom), 0px); }
}

/* Badge de modo menores: siempre visible, nunca decorativo */
@layer components {
  .badge-minors { @apply inline-flex items-center gap-1.5 rounded-full border border-live/40 bg-live/10 px-3 py-1 text-xs font-semibold text-live; }
}

/* Impresión: solo el afiche o el certificado, sin el panel alrededor */
@media print {
  @page { margin: 0; }
  body { background: #fff !important; }
  aside, nav, .print\:hidden { display: none !important; }
  main { margin: 0 !important; padding: 0 !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}