/* =========================================================
   QR Dinâmico — Estilos Globais
   ========================================================= */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-primary      : #4f46e5;
  --color-primary-dark : #4338ca;
  --color-primary-light: #e0e7ff;
  --color-danger       : #dc2626;
  --color-danger-light : #fef2f2;
  --color-success      : #16a34a;
  --color-success-light: #f0fdf4;
  --color-text         : #1e293b;
  --color-text-muted   : #64748b;
  --color-border       : #e2e8f0;
  --color-bg           : #f8fafc;
  --color-white        : #ffffff;
  --radius-sm          : 0.5rem;
  --radius-md          : 0.75rem;
  --radius-lg          : 1rem;
  --radius-xl          : 1.25rem;
  --shadow-sm          : 0 1px 3px rgba(0,0,0,.08);
  --shadow-md          : 0 4px 16px rgba(0,0,0,.10);
  --shadow-lg          : 0 8px 32px rgba(0,0,0,.12);
  --transition         : 0.18s ease;
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background : var(--color-bg);
  color      : var(--color-text);
  line-height: 1.6;
}

/* ── Utilitários ─────────────────────────────────────── */
[v-cloak] { display: none; }

.hidden { display: none !important; }

/* ── Scrollbar ───────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* ── Spinner ─────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.9s linear infinite; display: inline-block; }

/* ── Transições de página ────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.25s ease forwards; }