/* =============================================================================
   base.css — reset, design tokens (variáveis CSS) e tipografia.
   Camada 1 de 3 (base → layout → components). Toda cor/espacamento/raio/sombra
   sai daqui, para consistência visual em todo o sistema.

   Identidade visual PRÓPRIA — verde esmeralda moderno (distinta do SISREC azul):
   fonte Inter, fundo verde suave com gradientes radiais,
   primária verde (#1f7a52 → #155e3f), accent #10b981,
   cantos arredondados (10/14/18px) e sombras suaves.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* ---- Design tokens (paleta verde esmeralda) ------------------------------ */
:root {
  /* Paleta — verde esmeralda moderno (identidade própria, distinta do SISREC azul). */
  --c-primary:        #1f7a52;   /* verde primário (sidebar/realces) */
  --c-primary-dark:   #155e3f;   /* verde mais escuro (gradiente)    */
  --c-primary-soft:   #e7f6ee;   /* verde bem claro (badges/ativos)  */
  --c-accent:         #10b981;   /* accent esmeralda (links, foco, barra ativa) */
  --c-accent-dark:    #059669;

  --c-bg:             #f1f9f4;   /* fundo verde suave */
  --c-surface:        #ffffff;
  --c-surface-2:      #f3faf6;
  --c-border:         rgba(15, 23, 42, 0.10);
  --c-border-strong:  rgba(15, 23, 42, 0.16);

  --c-text:           #0f172a;
  --c-text-soft:      #475569;
  --c-text-muted:     #64748b;
  --c-text-invert:    #ffffff;

  --c-success:        #198754;
  --c-warning:        #c27803;
  --c-danger:         #dc3545;
  --c-info:           #0d6efd;

  /* Status de atendimento (usados em badges/colunas da fila). */
  --c-status-fila:    #0d6efd;
  --c-status-atend:   #198754;
  --c-status-aguard:  #c27803;
  --c-status-fim:     #64748b;

  /* Espaçamentos. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* Raios e sombras (SISREC). */
  --radius-sm: 10px; --radius: 14px; --radius-lg: 18px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(2, 6, 23, .06);
  --shadow:    0 6px 18px rgba(2, 6, 23, .10);
  --shadow-lg: 0 12px 30px rgba(2, 6, 23, .14);
  --focus-ring: 0 0 0 .25rem rgba(16, 185, 129, .22);

  /* Tipografia. */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px;
  --fs-lg: 20px; --fs-xl: 26px; --fs-2xl: 32px;

  /* Layout. */
  --sidebar-w: 248px;
  --topbar-h: 56px;

  --transition: 160ms ease;

  /* Tokens de movimento (animações). */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 120ms; --dur: 220ms; --dur-slow: 380ms;
}

/* ---- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--c-text);
  /* Fundo verde suave com gradientes radiais (identidade própria). */
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(16,185,129,0.10), transparent 60%),
    radial-gradient(1000px 500px at 90% 10%, rgba(31,122,82,0.10), transparent 60%),
    var(--c-bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ---- Tipografia utilitária ---------------------------------------------- */
h1 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: var(--fs-lg); font-weight: 700; }
h3 { font-size: var(--fs-md); font-weight: 600; }
.muted   { color: var(--c-text-muted); }
.soft    { color: var(--c-text-soft); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.strong  { font-weight: 600; }
.center  { text-align: center; }
.right   { text-align: right; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Acessibilidade: foco visível --------------------------------------- */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Helpers de layout genéricos ---------------------------------------- */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; }
.mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }
.mb-2 { margin-bottom: var(--sp-2); } .mb-4 { margin-bottom: var(--sp-4); }
.hidden { display: none !important; }