/* =========================================================================
   Denunciante · Design System "Trust & Authority"
   Segurança (azul) + Proteção (verde) · Lexend + Source Sans 3
   Mobile-first · WCAG AA/AAA · Light + Dark
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&family=Source+Sans+3:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ------------------------------------------------------------------ TOKENS */
:root {
  /* Cores base — Baly: amarelo + preto */
  --c-primary:        #101010;
  --c-primary-600:    #000000;
  --c-primary-700:    #000000;
  --c-on-primary:     #F8B800;
  --c-secondary:      #4A4A4A;
  --c-accent:         #F8B800;
  --c-accent-600:     #E0A600;
  --c-on-accent:      #101010;
  --c-brand-yellow:   #F8B800;

  /* Superfícies — fundo amarelo suave, cards brancos para legibilidade */
  --c-bg:             #FEF6DC;
  --c-surface:        #FFFFFF;
  --c-surface-2:      #FFFBEB;
  --c-muted:          #F5E6B8;
  --c-border:         #E7D08A;
  --c-border-strong:  #D8B815;

  /* Texto — preto real */
  --c-fg:             #101010;
  --c-fg-body:        #1A1A1A;
  --c-fg-muted:       #5C563A;
  --c-fg-subtle:      #8A8467;

  /* Semânticas */
  --c-danger:         #C42B1C;
  --c-danger-bg:      #FDEBE8;
  --c-danger-fg:      #A02012;
  --c-warning:        #92600A;
  --c-warning-bg:     #FBF0D0;
  --c-success:        #1E7A34;
  --c-success-bg:     #E6F4E9;
  --c-success-fg:     #145423;
  --c-info:           #101010;
  --c-info-bg:        #FFF3CC;

  /* Tipografia */
  --font-head: 'Lexend', system-ui, sans-serif;
  --font-body: 'Source Sans 3', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Escala de espaçamento (4/8) */
  --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; --sp-20: 80px;

  /* Raio */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;

  /* Sombra (escala consistente) */
  --sh-1: 0 1px 2px rgba(12,74,110,.06), 0 1px 3px rgba(12,74,110,.08);
  --sh-2: 0 2px 8px rgba(12,74,110,.06), 0 4px 16px rgba(12,74,110,.06);
  --sh-3: 0 8px 24px rgba(12,74,110,.10), 0 16px 40px rgba(12,74,110,.08);
  --sh-focus: 0 0 0 3px rgba(248,184,0,.55);

  /* Layout */
  --container: 1200px;
  --z-nav: 40; --z-overlay: 100; --z-modal: 200; --z-toast: 300;

  /* Motion */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --dur: 200ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-primary:        #F8B800;   /* amarelo vira a cor de ação no escuro */
    --c-primary-600:    #E0A600;
    --c-primary-700:    #FFCB2E;
    --c-on-primary:     #101010;
    --c-secondary:      #C9C9C9;
    --c-accent:         #F8B800;
    --c-accent-600:     #FFCB2E;
    --c-on-accent:      #101010;
    --c-brand-yellow:   #F8B800;

    --c-bg:             #141210;   /* preto quente */
    --c-surface:        #201D18;
    --c-surface-2:      #262117;
    --c-muted:          #35301F;
    --c-border:         #453D24;
    --c-border-strong:  #6B5E33;

    --c-fg:             #FBF6E9;
    --c-fg-body:        #EDE6D2;
    --c-fg-muted:       #BBB08C;
    --c-fg-subtle:      #8C8261;

    --c-danger:         #F08A7E; --c-danger-bg: #3A1613; --c-danger-fg: #F6B4AC;
    --c-warning:        #F6C453; --c-warning-bg: #35280C;
    --c-success:        #5FBE77; --c-success-bg: #12301B; --c-success-fg: #8BD59D;
    --c-info:           #F8B800; --c-info-bg: #2E2708;

    --sh-1: 0 1px 2px rgba(0,0,0,.4);
    --sh-2: 0 2px 10px rgba(0,0,0,.45);
    --sh-3: 0 12px 32px rgba(0,0,0,.55);
    --sh-focus: 0 0 0 3px rgba(248,184,0,.5);
  }
}

/* ------------------------------------------------------------------ RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-fg-body);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
}

h1,h2,h3,h4,h5 { font-family: var(--font-head); color: var(--c-fg); line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.7rem); font-weight: 700; }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem); }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.35rem); }
h4 { font-size: 1.05rem; }
p  { line-height: 1.65; }
a  { color: var(--c-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-primary-600); }

code, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

:focus-visible { outline: none; box-shadow: var(--sh-focus); border-radius: var(--r-sm); }

/* ------------------------------------------------------------------ LAYOUT */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); }
.container-narrow { width: 100%; max-width: 820px; margin-inline: auto; padding-inline: var(--sp-5); }
@media (min-width: 768px) { .container, .container-narrow { padding-inline: var(--sp-8); } }

.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.wrap    { flex-wrap: wrap; }
.between { justify-content: space-between; }
.center  { align-items: center; }
.gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); } .gap-8 { gap: var(--sp-8); }
.mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); }
.hidden { display: none !important; }
.text-muted { color: var(--c-fg-muted); }
.text-sm { font-size: .875rem; }
.text-xs { font-size: .78rem; }

/* ------------------------------------------------------------------ SKIP LINK */
.skip-link {
  position: absolute; left: -999px; top: var(--sp-2);
  background: var(--c-primary); color: #fff; padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm); z-index: var(--z-toast);
}
.skip-link:focus { left: var(--sp-2); }

/* ------------------------------------------------------------------ TOPBAR */
.topbar {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: color-mix(in srgb, var(--c-surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--c-border);
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: var(--sp-4); }

.brand { display: inline-flex; align-items: center; gap: var(--sp-3); font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--c-fg); text-decoration: none; }
.brand:hover { color: var(--c-fg); }
.brand-mark {
  width: 38px; height: 38px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.brand-mark svg { width: 38px; height: 38px; display: block; }
.brand em { font-style: normal; color: var(--c-accent); font-weight: 700; }

/* ------------------------------------------------------------------ BUTTONS */
.btn {
  --btn-bg: var(--c-primary); --btn-fg: var(--c-on-primary); --btn-bd: var(--c-primary);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-5);
  font-family: var(--font-head); font-size: .95rem; font-weight: 500; line-height: 1;
  color: var(--btn-fg); background: var(--btn-bg); border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-md); cursor: pointer; text-decoration: none;
  transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--c-primary-600); border-color: var(--c-primary-600); color: #fff; box-shadow: var(--sh-2); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn-accent { --btn-bg: var(--c-accent); --btn-bd: var(--c-accent); --btn-fg: var(--c-on-accent); }
.btn-accent:hover { background: var(--c-accent-600); border-color: var(--c-accent-600); }

.btn-ghost { --btn-bg: transparent; --btn-fg: var(--c-primary); --btn-bd: var(--c-border-strong); }
.btn-ghost:hover { background: var(--c-muted); color: var(--c-primary-600); border-color: var(--c-primary); }

.btn-danger { --btn-bg: var(--c-danger); --btn-bd: var(--c-danger); --btn-fg: #fff; }
.btn-danger:hover { background: var(--c-danger-fg); border-color: var(--c-danger-fg); }

.btn-lg { min-height: 52px; padding: 0 var(--sp-8); font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn-sm { min-height: 38px; padding: 0 var(--sp-4); font-size: .875rem; }

/* ------------------------------------------------------------------ CARDS */
.card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.card-pad { padding: var(--sp-6); }
@media (min-width: 768px) { .card-pad { padding: var(--sp-8); } }

/* ------------------------------------------------------------------ HERO */
.hero { padding: var(--sp-12) 0 var(--sp-8); }
.hero-badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-primary-700); background: var(--c-info-bg);
  border: 1px solid var(--c-border); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-full);
}
.hero-badge svg { width: 14px; height: 14px; }
.hero h1 { margin-top: var(--sp-5); max-width: 18ch; }
.hero .lead { margin-top: var(--sp-4); font-size: clamp(1.05rem, 1rem + .5vw, 1.25rem); color: var(--c-fg-muted); max-width: 60ch; }

/* Faixa de confiança */
.trust-strip {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-3);
  margin-top: var(--sp-8);
}
@media (min-width: 640px) { .trust-strip { grid-template-columns: repeat(3, 1fr); } }
.trust-item {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.trust-item .ico { width: 40px; height: 40px; border-radius: var(--r-md); flex: none; display: grid; place-items: center; background: var(--c-success-bg); color: var(--c-success-fg); }
.trust-item .ico svg { width: 22px; height: 22px; }
.trust-item h4 { font-size: .95rem; margin-bottom: 2px; }
.trust-item p { font-size: .85rem; color: var(--c-fg-muted); line-height: 1.45; }

/* ------------------------------------------------------------------ STEPPER */
.stepper { display: flex; gap: var(--sp-2); margin: var(--sp-8) 0; counter-reset: step; }
.step {
  flex: 1; display: flex; flex-direction: column; gap: var(--sp-2);
  font-size: .8rem; color: var(--c-fg-subtle);
}
.step .bar { height: 6px; border-radius: var(--r-full); background: var(--c-muted); transition: background var(--dur) var(--ease-out); }
.step .lbl { display: flex; align-items: center; gap: var(--sp-2); font-weight: 500; }
.step .num {
  width: 22px; height: 22px; border-radius: var(--r-full); flex: none;
  display: grid; place-items: center; font-family: var(--font-mono); font-size: .72rem;
  background: var(--c-muted); color: var(--c-fg-subtle);
}
.step .lbl-text { display: none; }
@media (min-width: 640px) { .step .lbl-text { display: inline; } }
.step.active .bar { background: var(--c-primary); }
.step.active .num { background: var(--c-primary); color: #fff; }
.step.active .lbl { color: var(--c-fg); }
.step.done .bar { background: var(--c-accent); }
.step.done .num { background: var(--c-accent); color: #fff; }
.step.done .lbl { color: var(--c-fg-muted); }

/* ------------------------------------------------------------------ FORM */
.field { margin-bottom: var(--sp-5); }
.field > label { display: block; font-family: var(--font-head); font-size: .9rem; font-weight: 500; color: var(--c-fg); margin-bottom: var(--sp-2); }
.field .opt { color: var(--c-fg-subtle); font-weight: 400; }
.field .hint { font-size: .82rem; color: var(--c-fg-muted); margin-top: var(--sp-2); }

.input, input[type=text], input[type=email], input[type=password],
input[type=date], input[type=tel], select, textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--c-fg-body);
  min-height: 48px; padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface); border: 1.5px solid var(--c-border-strong); border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
textarea { min-height: 150px; padding: var(--sp-4); resize: vertical; line-height: 1.6; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235A7386' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--sp-4) center; padding-right: var(--sp-10); }
.input:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: var(--sh-focus); }
.input.invalid, input.invalid, textarea.invalid { border-color: var(--c-danger); }
::placeholder { color: var(--c-fg-subtle); }

.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* Cartões selecionáveis (tipo de denúncia) */
.choice-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin: var(--sp-6) 0; }
@media (min-width: 640px) { .choice-grid { grid-template-columns: repeat(3, 1fr); } }
.choice {
  text-align: left; cursor: pointer; width: 100%;
  background: var(--c-surface); border: 1.5px solid var(--c-border); border-radius: var(--r-lg);
  padding: var(--sp-5); transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  display: flex; flex-direction: column; gap: var(--sp-2); min-height: 44px;
}
.choice:hover { border-color: var(--c-primary); box-shadow: var(--sh-2); transform: translateY(-2px); }
.choice .ico { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--c-info-bg); color: var(--c-primary); }
.choice .ico svg { width: 24px; height: 24px; }
.choice h4 { font-size: 1.05rem; }
.choice p { font-size: .86rem; color: var(--c-fg-muted); line-height: 1.45; }
.choice[aria-pressed=true] { border-color: var(--c-primary); box-shadow: var(--sh-focus); background: var(--c-info-bg); }
.choice[aria-pressed=true] .ico { background: var(--c-primary); color: #fff; }

/* Rádio-cartão (identificação) */
.radio-cards { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
@media (min-width: 560px) { .radio-cards { grid-template-columns: 1fr 1fr; } }
.radio-card {
  position: relative; cursor: pointer; padding: var(--sp-4) var(--sp-5);
  background: var(--c-surface); border: 1.5px solid var(--c-border); border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.radio-card:hover { border-color: var(--c-primary); }
.radio-card input { position: absolute; opacity: 0; }
.radio-card .rc-title { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-head); font-weight: 600; color: var(--c-fg); }
.radio-card .rc-title svg { width: 20px; height: 20px; color: var(--c-primary); }
.radio-card .rc-desc { font-size: .85rem; color: var(--c-fg-muted); margin-top: var(--sp-1); }
.radio-card:has(input:checked) { border-color: var(--c-primary); box-shadow: var(--sh-focus); background: var(--c-info-bg); }

/* ------------------------------------------------------------------ ALERTS */
.alert {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--c-border);
  font-size: .92rem; line-height: 1.5;
}
.alert svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.alert-info    { background: var(--c-info-bg);    border-color: var(--c-border);   color: var(--c-primary-700); }
.alert-success { background: var(--c-success-bg); border-color: var(--c-success);  color: var(--c-success-fg); }
.alert-warning { background: var(--c-warning-bg); border-color: var(--c-warning);  color: var(--c-warning); }
.alert-danger  { background: var(--c-danger-bg);  border-color: var(--c-danger);   color: var(--c-danger-fg); }

/* ------------------------------------------------------------------ PROTOCOL BOX */
.protocol {
  background: linear-gradient(135deg, var(--c-primary-700), var(--c-primary));
  color: #fff; border-radius: var(--r-xl); padding: var(--sp-8) var(--sp-6); text-align: center;
  box-shadow: var(--sh-3);
}
.protocol .lbl { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; opacity: .85; }
.protocol .code { font-family: var(--font-mono); font-size: clamp(1.5rem, 1.2rem + 2vw, 2.1rem); font-weight: 600; letter-spacing: .06em; margin: var(--sp-2) 0 var(--sp-5); user-select: all; }
.protocol .pw { display: inline-block; font-family: var(--font-mono); font-size: clamp(1.1rem,1rem+1vw,1.4rem); background: rgba(255,255,255,.14); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md); user-select: all; }
.copy-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding: 0 var(--sp-4);
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--r-md); font-family: var(--font-head); font-size: .85rem; cursor: pointer;
  transition: background var(--dur) var(--ease-out);
}
.copy-btn:hover { background: rgba(255,255,255,.24); }
.copy-btn svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ BADGES */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-full); font-size: .74rem; font-weight: 600; font-family: var(--font-head); letter-spacing: .02em; white-space: nowrap; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-lgpd      { background: var(--c-info-bg);    color: var(--c-primary-700); }
.badge-ouvidoria { background: #E6F4E9; color: #145423; }
.badge-conduta   { background: #FBE7E0; color: #8A3316; }
.b-recebida, .b-em_triagem, .b-em_apuracao, .b-aguardando_denunciante,
.b-concluida_procedente, .b-concluida_improcedente, .b-concluida_inconclusiva, .b-arquivada {
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius: var(--r-full); font-size:.74rem; font-weight:600; font-family: var(--font-head);
}
.b-recebida { background: var(--c-info-bg); color: var(--c-primary-700); }
.b-em_triagem { background: var(--c-warning-bg); color: var(--c-warning); }
.b-em_apuracao { background: var(--c-warning-bg); color: var(--c-warning); }
.b-aguardando_denunciante { background: var(--c-muted); color: var(--c-fg-muted); }
.b-concluida_procedente { background: var(--c-success-bg); color: var(--c-success-fg); }
.b-concluida_improcedente { background: var(--c-muted); color: var(--c-fg-muted); }
.b-concluida_inconclusiva { background: var(--c-muted); color: var(--c-fg-muted); }
.b-arquivada { background: var(--c-muted); color: var(--c-fg-subtle); }

.prio { font-weight: 600; font-size: .85rem; display: inline-flex; align-items: center; gap: 5px; }
.prio::before { content:''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.prio-critica { color: var(--c-danger); }
.prio-alta    { color: var(--c-warning); }
.prio-media   { color: var(--c-fg-muted); }
.prio-baixa   { color: var(--c-fg-subtle); }

/* ------------------------------------------------------------------ AUTH SCREENS */
.auth-wrap { min-height: 100dvh; display: grid; place-items: center; padding: var(--sp-5); background:
  radial-gradient(1200px 500px at 50% -10%, var(--c-info-bg), transparent), var(--c-bg); }
.auth-card { width: 100%; max-width: 440px; }
.auth-card .brand { justify-content: center; margin-bottom: var(--sp-6); }

/* ------------------------------------------------------------------ BACKOFFICE SHELL */
.app { min-height: 100dvh; display: flex; flex-direction: column; }
@media (min-width: 1024px) { .app { flex-direction: row; } }

.sidebar {
  background: var(--c-primary-700); color: #F5EFD8;
  display: flex; flex-direction: column;
}
@media (min-width: 1024px) {
  .sidebar { width: 256px; flex: none; position: sticky; top: 0; height: 100dvh; padding: var(--sp-6) var(--sp-4); }
}
.sidebar .brand { color: #fff; }
.sidebar .brand em { color: var(--c-brand-yellow); }

/* Topbar mobile do app */
.app-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4); background: var(--c-primary-700); color: #fff;
  position: sticky; top: 0; z-index: var(--z-nav);
}
@media (min-width: 1024px) { .app-topbar { display: none; } }
.hamburger { width: 44px; height: 44px; display: grid; place-items: center; background: rgba(255,255,255,.12); border: none; border-radius: var(--r-md); color: #fff; cursor: pointer; }
.hamburger svg { width: 22px; height: 22px; }

.nav { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-6); }
@media (min-width: 1024px) { .nav { margin-top: var(--sp-8); } }
.nav a {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 46px; padding: 0 var(--sp-4);
  color: #CDE7F5; text-decoration: none; border-radius: var(--r-md); font-family: var(--font-head); font-weight: 500; font-size: .95rem;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.nav a svg { width: 20px; height: 20px; flex: none; }
.nav a:hover { background: rgba(255,255,255,.10); color: #fff; }
.nav a.active { background: var(--c-primary); color: #fff; }

.sidebar-foot { margin-top: auto; padding-top: var(--sp-6); border-top: 1px solid rgba(255,255,255,.14); font-size: .85rem; }
.sidebar-foot .who { color: #fff; font-weight: 600; }
.sidebar-foot .role { color: #C9BE8E; font-size: .8rem; }
.sidebar-foot a { color: #CDE7F5; display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-2); }

/* Off-canvas mobile */
.nav-drawer { display: none; }
@media (max-width: 1023px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 82%; max-width: 300px; z-index: var(--z-modal);
    transform: translateX(-100%); transition: transform var(--dur) var(--ease-out); padding: var(--sp-6) var(--sp-4); height: 100dvh; }
  .app.drawer-open .sidebar { transform: translateX(0); }
  .app.drawer-open .scrim { display: block; }
  .scrim { display: none; position: fixed; inset: 0; background: rgba(4,20,30,.5); z-index: var(--z-overlay); }
}

.main { flex: 1; min-width: 0; padding: var(--sp-5); }
@media (min-width: 768px) { .main { padding: var(--sp-8); } }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-6); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--c-border); }
.page-head .kicker { font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--c-fg-subtle); }
.page-head h1 { margin-top: var(--sp-1); font-size: clamp(1.5rem,1.2rem+1.4vw,2rem); }

/* ------------------------------------------------------------------ KPIS */
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (min-width: 768px) { .kpis { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } }
.kpi { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-1); }
.kpi .kpi-lbl { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--c-fg-muted); font-weight: 600; }
.kpi .kpi-val { font-family: var(--font-head); font-size: 2.1rem; font-weight: 700; color: var(--c-fg); line-height: 1.1; margin-top: var(--sp-2); font-variant-numeric: tabular-nums; }
.kpi.danger .kpi-val { color: var(--c-danger); }
.kpi.accent .kpi-val { color: var(--c-accent-600); }

.section-title { font-size: 1.15rem; margin: var(--sp-8) 0 var(--sp-4); }

/* ------------------------------------------------------------------ TABLE / responsive cards */
.table-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--sh-1); -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; min-width: 720px; }
table.data th { text-align: left; font-family: var(--font-head); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-fg-muted); font-weight: 600; padding: var(--sp-4); border-bottom: 1px solid var(--c-border); background: var(--c-surface-2); position: sticky; top: 0; }
table.data td { padding: var(--sp-4); border-bottom: 1px solid var(--c-border); vertical-align: middle; }
table.data tbody tr { cursor: pointer; transition: background var(--dur) var(--ease-out); }
table.data tbody tr:hover { background: var(--c-surface-2); }
table.data tbody tr:last-child td { border-bottom: none; }
.cell-proto { font-family: var(--font-mono); font-size: .86rem; color: var(--c-primary-700); font-weight: 500; }
.cell-title { font-weight: 500; color: var(--c-fg); max-width: 320px; }

/* Cartões (mobile) para a lista de casos */
.case-cards { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
.case-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: var(--sp-4); box-shadow: var(--sh-1);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.case-card:hover { border-color: var(--c-primary); box-shadow: var(--sh-2); }
.case-card .cc-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.case-card .cc-proto { font-family: var(--font-mono); font-size: .8rem; color: var(--c-fg-muted); }
.case-card .cc-title { font-family: var(--font-head); font-weight: 600; color: var(--c-fg); margin-bottom: var(--sp-3); line-height: 1.35; }
.case-card .cc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); font-size: .82rem; color: var(--c-fg-muted); }
.only-mobile { display: block; } .only-desktop { display: none; }
@media (min-width: 768px) { .only-mobile { display: none; } .only-desktop { display: block; } }

/* ------------------------------------------------------------------ DETAIL */
.detail-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 900px) { .detail-grid { grid-template-columns: minmax(0,2fr) minmax(0,1fr); } }
.block { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-1); margin-bottom: var(--sp-4); }
.block h3 { font-size: 1.05rem; padding-bottom: var(--sp-3); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--c-border); }
.kv { margin-bottom: var(--sp-3); }
.kv .k { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--c-fg-subtle); font-weight: 600; }
.kv .v { color: var(--c-fg-body); margin-top: 2px; }
.report-text { white-space: pre-wrap; line-height: 1.75; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-4); }

/* Timeline */
.timeline { list-style: none; padding: 0; }
.timeline li { position: relative; padding: 0 0 var(--sp-5) var(--sp-6); border-left: 2px solid var(--c-border); margin-left: var(--sp-2); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before { content:''; position: absolute; left: -8px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--c-surface); border: 2px solid var(--c-primary); }
.timeline .t-when { font-family: var(--font-mono); font-size: .76rem; color: var(--c-fg-subtle); }
.timeline .t-who { font-family: var(--font-head); font-weight: 600; font-size: .88rem; margin: 2px 0 var(--sp-2); color: var(--c-fg); }
.timeline .t-body { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); font-size: .93rem; }
.timeline li.internal::before { border-color: var(--c-warning); }
.timeline li.internal .t-body { background: var(--c-warning-bg); border-color: var(--c-warning); }

/* Chat (denunciante) */
.chat { display: flex; flex-direction: column; gap: var(--sp-3); }
.msg { max-width: 85%; }
.msg .bubble { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); font-size: .95rem; line-height: 1.5; }
.msg .meta { font-family: var(--font-mono); font-size: .72rem; color: var(--c-fg-subtle); margin-top: 4px; }
.msg.them { align-self: flex-start; }
.msg.them .bubble { background: var(--c-muted); color: var(--c-fg-body); border: 1px solid var(--c-border); }
.msg.us { align-self: flex-end; }
.msg.us .bubble { background: var(--c-primary); color: #fff; }
.msg.us .meta { text-align: right; }
.msg.system { align-self: center; max-width: 100%; }
.msg.system .bubble { background: transparent; border: 1px dashed var(--c-border-strong); color: var(--c-fg-muted); font-size: .85rem; }

/* Footer público */
.site-foot { border-top: 1px solid var(--c-border); margin-top: var(--sp-20); padding: var(--sp-8) 0; color: var(--c-fg-muted); font-size: .88rem; }
.site-foot .row { flex-wrap: wrap; gap: var(--sp-3); }

/* Utilitário: toolbar de filtros */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-5); }
.toolbar select { min-width: 160px; width: auto; min-height: 44px; }

/* Person repeater */
.person-row { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); margin-bottom: var(--sp-2); padding: var(--sp-3); background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-md); }
@media (min-width: 640px) { .person-row { grid-template-columns: 1fr 1fr 1fr auto; align-items: center; } }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; background: var(--c-danger-bg); color: var(--c-danger-fg); border: 1px solid var(--c-danger); border-radius: var(--r-md); cursor: pointer; }
.icon-btn svg { width: 18px; height: 18px; }

/* spinner */
.spin { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* entrance */
.enter { animation: enter var(--dur) var(--ease-out) both; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* =========================================================================
   DASHBOARD ESTRATÉGICO
   ========================================================================= */
.dash-toolbar{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;margin-bottom:var(--sp-5);}
.dash-toolbar .spacer{flex:1;}
.seg{display:inline-flex;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);padding:3px;gap:2px;}
.seg a{padding:7px 13px;border-radius:calc(var(--r-md) - 3px);font-family:var(--font-head);font-weight:600;font-size:.85rem;color:var(--c-fg-muted);text-decoration:none;white-space:nowrap;}
.seg a:hover{background:var(--c-muted);color:var(--c-fg);}
.seg a.active{background:var(--c-primary);color:#fff;}

.kpi-grid-6{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3);margin-bottom:var(--sp-5);}
@media(min-width:700px){.kpi-grid-6{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1100px){.kpi-grid-6{grid-template-columns:repeat(6,1fr);gap:var(--sp-4);}}
.kpi .kpi-sub{font-size:.72rem;color:var(--c-fg-subtle);margin-top:4px;font-weight:500;}
.kpi.ok .kpi-val{color:var(--c-accent-600);}
.kpi.warn .kpi-val{color:var(--c-warning);}

.chart-grid{display:grid;gap:var(--sp-4);grid-template-columns:1fr;}
@media(min-width:640px) and (max-width:1023px){
  .chart-grid{grid-template-columns:1fr 1fr;}
  .c-serie,.c-cat{grid-column:span 2;}
}
@media(min-width:1024px){
  .chart-grid{grid-template-columns:repeat(6,1fr);}
  .c-serie{grid-column:span 4;} .c-tipo{grid-column:span 2;}
  .c-status{grid-column:span 3;} .c-prio{grid-column:span 3;}
  .c-sla{grid-column:span 2;} .c-cat{grid-column:span 4;}
}
.chart-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:var(--sp-5);display:flex;flex-direction:column;}
.chart-card h3{font-size:1rem;margin-bottom:2px;}
.chart-card .ch-sub{font-size:.8rem;color:var(--c-fg-muted);margin-bottom:var(--sp-4);}
.chart-wrap{position:relative;flex:1;min-height:240px;height:240px;}
.c-serie .chart-wrap{height:300px;min-height:300px;}
.sla-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;}
.sla-center .big{font-family:var(--font-head);font-size:2rem;font-weight:700;color:var(--c-fg);line-height:1;}
.sla-center .lbl{font-size:.72rem;color:var(--c-fg-muted);text-transform:uppercase;letter-spacing:.06em;margin-top:2px;}

.dash-empty{background:var(--c-surface);border:1px dashed var(--c-border-strong);border-radius:var(--r-lg);padding:var(--sp-12);text-align:center;color:var(--c-fg-muted);}

/* Modo apresentação (tela cheia) */
body.present .sidebar,body.present .app-topbar,body.present .scrim{display:none!important;}
body.present .main{padding:var(--sp-8) var(--sp-10);}
body.present .dash-toolbar .seg,body.present .dash-toolbar select{pointer-events:auto;}
body.present .btn-print,body.present .btn-present{display:none;}
.present-exit{display:none;}
body.present .present-exit{display:inline-flex;}
body.present{background:var(--c-bg);}
body.present .kpi-val{font-size:2.6rem;}
body.present .chart-wrap{height:300px;min-height:300px;}
body.present .c-serie .chart-wrap{height:360px;min-height:360px;}

/* Impressão / PDF */
@media print{
  .sidebar,.app-topbar,.scrim,.dash-toolbar,.present-exit,.btn,.page-head .btn{display:none!important;}
  .app,.main{display:block!important;padding:0!important;}
  body{background:#fff;}
  .chart-card,.kpi,.card{box-shadow:none!important;border:1px solid #ccc!important;break-inside:avoid;}
  .chart-grid{gap:12px;}
  .page-head{margin-bottom:12px;}
  @page{margin:1.2cm;}
}

/* =====================================================================
   BALY · marca (logo do cliente) e reforços de responsividade
   ===================================================================== */

/* Logo do cliente no cabeçalho */
.logo-cliente { display: block; width: auto; }
.logo-cliente--circulo { border-radius: 50%; }
.brand { gap: var(--sp-3); }
.brand-sub {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -.01em;
  color: var(--c-fg);
  line-height: 1.1;
}
.brand-sub--dark { color: #fff; }

/* Faixa amarela de marca sob a topbar do portal (identidade Baly) */
.topbar { border-bottom: 2px solid var(--c-brand-yellow); }

/* Hero: usar amarelo da marca no badge */
.hero-badge { color: #101010; background: var(--c-brand-yellow); border-color: var(--c-accent-600); }

/* Botão primário: preto com texto claro; foco amarelo */
.btn-primary, .btn:not(.btn-ghost):not(.btn-outline):not(.btn-sm) {
  /* herda de --c-primary (preto) via variáveis existentes */
}

/* ------- Responsividade: reforços para telas pequenas ------- */

/* Evita overflow horizontal em qualquer viewport */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, canvas { max-width: 100%; height: auto; }

/* Cabeçalho encolhe com elegância no celular */
@media (max-width: 480px) {
  .brand-sub { font-size: .82rem; }
  .logo-cliente { height: 38px !important; }
  .topbar-inner { min-height: 56px; gap: var(--sp-2); }
  .hero { padding: var(--sp-8) 0 var(--sp-6); }
  .hero h1, .h-hero { font-size: clamp(1.6rem, 7vw, 2.2rem); line-height: 1.12; }
  .btn { padding-inline: var(--sp-4); }
}

/* Tabelas do backoffice: rolagem horizontal em vez de estourar a tela */
@media (max-width: 720px) {
  .table-wrap, .tabela-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.data, .table-casos { min-width: 560px; }
}

/* Protocolo/código nunca vaza da caixa no celular */
.proto-code, .out-code, code { overflow-wrap: anywhere; word-break: break-word; }

/* Alvos de toque confortáveis (mínimo 44px) em telas pequenas */
@media (max-width: 640px) {
  .btn, .choice, .radio-card, input, select, textarea { min-height: 44px; }
  .btn-sm { min-height: 40px; }
}

/* Impressão: fundo branco (o amarelo gasta tinta e some no papel) */
@media print { body { background: #fff !important; } .topbar { border-bottom-color: #000; } }