/* ════════════════════════════════════════════════════════════
   FUNDEF PORTAL — Design System
   Paleta institucional (#17458d azul · #7f4e05 âmbar)
   Tipografia: Montserrat (Google Fonts)
   Espaçamento base: 4px  → escala 4·8·12·16·24·32·48·64
   Contraste: todas as combinações texto/fundo ≥ 4.5:1 (WCAG AA)
════════════════════════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }

/* ── Tokens ── */
:root {
  /* Cor */
  --c-brand:      #17458d;   /* azul institucional */
  --c-brand-dk:   #103163;   /* azul escuro     */
  --c-brand-lt:   #2f5da8;   /* azul claro      */
  --c-accent:     #7f4e05;   /* âmbar/ouro escuro — acento sobre branco */
  --c-accent-dk:  #5e3a04;   /* âmbar escuro    */
  --c-accent-bg:  #fbf3e4;   /* superfície âmbar suave */
  --c-accent-bd:  #ecd9ab;   /* borda âmbar     */
  --c-gold:       #e7b75f;   /* âmbar claro — texto sobre azul */
  --c-surface:    #ffffff;
  --c-bg:         #f4f6fb;
  --c-border:     #e2e6ef;
  --c-text:       #1f2937;
  --c-muted:      #5b6472;
  --c-success:    #15803d;
  --c-success-bg: #f0fdf4;
  --c-success-bd: #86efac;
  --c-error:      #991b1b;
  --c-error-bg:   #fef2f2;
  --c-error-bd:   #fca5a5;
  --c-warn:       #b45309;
  --c-warn-bg:    #fffbeb;
  --c-warn-bd:    #fed7aa;   /* borda âmbar clara */
  --c-warn-strong:#92400e;   /* âmbar de texto forte */
  --c-warn-surface:#fff3cd;  /* superfície âmbar de alerta */
  --c-info:       #2563eb;

  /* Neutros sobre marca / superfícies derivadas */
  --c-white:        #ffffff;   /* texto e elementos sobre fundo de marca */
  --c-ink:          #141820;   /* rodapé institucional escuro */
  --c-brand-dker:   #0a1a30;   /* hover do botão admin (mais escuro que -dk) */
  --c-brand-light:  #e8eef7;   /* superfície azul muito clara (modais informativos) */
  --c-placeholder:  #a0aabf;   /* texto de placeholder */

  /* Verde de leitura em badges (sobre fundo claro) */
  --c-success-fg:   #166534;

  /* Info — azul claro (login info, badge de auditoria login/logout) */
  --c-info-bg:      #eff6ff;
  --c-info-bd:      #bfdbfe;
  --c-info-fg:      #1d4ed8;
  --c-info-ink:     #1e3a5f;

  /* Âmbar/amarelo — criação de usuário */
  --c-amber-bg:     #fefce8;
  --c-amber-fg:     #854d0e;
  --c-amber-bd:     #fde68a;

  /* Laranja — troca de senha */
  --c-orange-bg:    #fff7ed;
  --c-orange-fg:    #9a3412;
  --c-orange-bd:    #fed7aa;

  /* Vermelho de leitura em badge (sobre fundo claro) */
  --c-danger-bd:    #fecaca;

  /* Carga horária — 20h (azul) */
  --c-20h-bg:       #dbeafe;
  --c-20h-bd:       #93c5fd;
  --c-20h-fg:       #1e40af;
  /* GST — Gratificação de Segundo Turno (rosa) */
  --c-gst-bg:       #fce7f3;
  --c-gst-bd:       #f9a8d4;
  --c-gst-fg:       #9d174d;
  /* 20h + GST (roxo) */
  --c-ambos-bg:     #ede9fe;
  --c-ambos-bd:     #c4b5fd;
  --c-ambos-fg:     #5b21b6;

  /* Estado vazio / "não encontrado" */
  --c-empty-icon:   #c9d0e0;
  --c-empty-bg:     #f0f3f9;
  --c-empty-fg:     #8a94ad;
  --c-empty-bd:     #d4dbe8;

  /* Status "em análise" (amarelo) */
  --c-analise-bg:   #fef9c3;
  --c-analise-bd:   #fde047;

  /* Tipografia */
  --font:         'Montserrat', 'Segoe UI', sans-serif;
  --text-xs:      11px;
  --text-sm:      13px;
  --text-base:    15px;
  --text-md:      17px;
  --text-lg:      20px;
  --text-xl:      24px;
  --text-2xl:     32px;
  --text-3xl:     44px;

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

  /* Shape */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-full: 9999px;

  /* Shadow */
  --sh-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --sh-md:  0 4px 16px rgba(23,69,141,.12);
  --sh-lg:  0 12px 40px rgba(0,0,0,.22);

  /* Transição */
  --t-fast: 120ms ease;
  --t-base: 180ms ease;
}

/* ── Base ── */
/* Fundo também no html: cobre o overscroll/canvas (Safari) — sem barra branca. */
html { background: var(--c-bg); }
body {
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Focus ring universal — WCAG 2.4.7 */
:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── Screens ── */
/* Coluna flex + min-height:100vh = rodapé fixo no fundo (sem faixa clara
   abaixo do footer em páginas curtas). O conteúdo principal cresce. */
.screen { display: none; min-height: 100vh; }
.screen.active { display: flex; flex-direction: column; }