/* ============================================================================
   PAINEL DE ACOMPANHAMENTO FAMILIAR — ETAPAS 0–8 + FASES 4–11
   (fundação · equipe · pessoas/famílias · caso · visitas · motores · assistente IA ·
    saídas .docx + prestação de contas · ações coletivas · serviços e unidades)

   IDENTIDADE VISUAL "DOSSIÊ" (2026-07-26)
   ---------------------------------------------------------------------------
   Sucede a identidade "Registro" (2026-07-25) e mantém a tese dela — a
   referência é o registro público, não o software de consumo —, mas troca o
   material: sai o papel cinza-frio com display grotesca, entra o PAPEL DE
   PROCESSO, com serifada, canto reto e filete. Quatro decisões governam o
   arquivo inteiro:

   1. PAPEL QUENTE, TINTA QUENTE. Fundo e tinta saem do cinza-frio para o creme
      e o marrom-preto de tinta ferrogálica. A cor segue escassa e sempre
      semântica: ACENTO (interação) · ESTADO (ok · atenção · crítico) ·
      CATEGORIA de evento. Nada é colorido por decoração.
   2. A MARCA NÃO É UM ESTADO — a regra herdada da identidade anterior, e a
      razão de o acento NÃO ser o oxblood do estudo. No espécime, o oxblood era
      ao mesmo tempo a régua do cartão e a borda do alerta crítico: marca e
      alarme na mesma cor, exatamente o que esta regra bane. Aqui o oxblood
      assumiu o papel que lhe cabe — é o CRÍTICO — e a interação ficou com o
      azul-ferrogálico, frio. As duas linguagens não se cruzam.
   3. CANTO RETO. `--raio` é 0. Documento não tem canto arredondado; o que
      delimita uma área é o filete e a troca de superfície. Círculo sobrou só
      onde é retrato (avatar) ou ponto de legenda.
   4. HIERARQUIA POR FILETE. `--sombra` é `none` de propósito. Sombra sobrou só
      onde carrega informação: cabeçalho fixo de tabela (`--sombra-sm`, avisa
      que há conteúdo passando por baixo) e camadas flutuantes (`--sombra-alta`,
      modal e popover).

   CLIQUE EM SUPERFÍCIE SEM RELEVO. Sem sombra e sem canto, um cartão clicável
   não se anuncia sozinho — foi a crítica que o estudo do Dossiê recebeu. A
   resposta é a MARCA DE REMISSÃO: o "›" no canto do cartão que abre lista, como
   a chamada de anexo num processo em papel. Ver `.card-abre`, no fim deste
   arquivo.

   O tema claro/escuro troca apenas os tokens; nenhuma regra é reescrita por
   tema, salvo onde o papel semântico exige tons opostos.
   ========================================================================== */

/* ============================================================================
   FONTES AUTO-HOSPEDADAS — WOFF2 em web/fonts/, sem CDN.
   A CSP de borda tem font-src 'self' (caddy/Caddyfile): as fontes vivem na
   própria origem. Todas SIL OFL 1.1 — licenças em web/fonts/OFL-*.
   unicode-range: subsets latin / latin-ext padrão do Google (cobrem o pt-BR).

   DISPLAY SERIFADA (títulos) — a identidade "Dossiê" pede serifada no título.
   A pilha pede primeiro a IBM Plex Serif (mesma superfamília do corpo e do
   mono, SIL OFL) e cai para as serifadas de sistema — Sitka Text, Constantia,
   Georgia — enquanto o WOFF2 dela não estiver em web/fonts/. Enquanto não
   estiver auto-hospedada, o título RENDERIZA DIFERENTE entre máquinas; ver a
   pendência registrada em DECISOES.md. O Archivo segue no arquivo, como último
   degrau grotesco da pilha e para não quebrar nada que ainda o peça.
   IBM Plex Sans (corpo) — a família do sistema de design Carbon, feita para
   interface densa e de trabalho. IBM Plex Mono (dados) — mesma superfamília,
   então mono e corpo compartilham esqueleto: IDs, datas, CPF/NIS mascarados e
   colunas numéricas alinham com o texto ao redor.
   ========================================================================== */

/* --- Archivo (display) : variável, peso 400–700 --------------------------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- IBM Plex Sans (corpo) : variável, peso 400–700 ----------------------- */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/plexsans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/plexsans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- IBM Plex Mono (dados) : estáticos 400 e 600 -------------------------- */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/plexmono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/plexmono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/plexmono-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/plexmono-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens compartilhados (não mudam com o tema) ----------------- */
:root {
  /* Tipografia — famílias auto-hospedadas (ver @font-face acima); as pilhas
     de fallback respondem enquanto os WOFF2 carregam (font-display: swap). */
  --fonte-display: "IBM Plex Serif", "Sitka Text", Constantia, Georgia,
                   "Times New Roman", serif;
  --fonte-corpo:   "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Escala tipográfica — passo ~1.2, base 15px (raiz 16px). Fonte única de
     tamanhos/pesos/entrelinha. O Plex Sans tem olho menor que o DM Sans, então
     a escala subiu meio passo nos micro-rótulos para não perder legibilidade. */
  --txt-3xs:  .6875rem; /* 11px — micro-rótulos */
  --txt-2xs:  .75rem;   /* 12px */
  --txt-xs:   .8125rem; /* 13px */
  --txt-sm:   .875rem;  /* 14px */
  --txt-base: .9375rem; /* 15px — corpo */
  --txt-md:   1rem;     /* 16px */
  --txt-lg:   1.125rem; /* 18px */
  --txt-xl:   1.25rem;  /* 20px */
  --txt-2xl:  1.5rem;   /* 24px */
  --txt-3xl:  2.1rem;   /* ~34px — números de KPI */

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-forte:  600;
  --peso-cap:    700;

  --leading-apertado: 1.05; /* números grandes, títulos curtos */
  --leading-titulo:   1.2;
  --leading-corpo:    1.55;

  /* Tracking do display: o Archivo pede tracking negativo em tamanho grande e
     tracking positivo em versalete pequeno (rótulos, cabeçalho de tabela). */
  /* Serifada em corpo grande não quer o tracking negativo que a grotesca
     pedia: -.02em fechava demais as junções do Plex Serif. */
  --track-titulo: -.005em;
  --track-versal: .1em;

  /* Ritmo de espaçamento — múltiplos de 8px, com meios-passos. */
  --esp-0: 2px;
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;

  /* Geometria — RETO. A escada de raio da identidade anterior (3–4px) foi a
     zero: documento não tem canto arredondado. Os três tokens continuam
     existindo, e separados, para que voltar atrás seja uma linha cada.
     Círculo só onde é retrato (avatar) ou ponto de legenda — esses usam
     border-radius:50% direto e não passam por aqui. */
  --raio:      0;
  --raio-sm:   0;
  --raio-selo: 0;
  --sidebar-larg: 264px;
}

/* ---------- Tema CLARO · "diurno" ----------------------------------------- */
/* Papel de processo: creme quente, não branco e não cinza-frio. As três
   superfícies formam uma escada rasa — fundo < superfície-2 < folha — e é ela,
   com o filete, que dá profundidade, já que não há sombra. */
[data-tema="claro"] {
  --fundo:        #F2EFE9;   /* papel */
  --superficie:   #FBF9F5;   /* folha limpa: cartão, painel, linha de tabela */
  --superficie-2: #E8E2D7;   /* papel tingido: cabeçalho de tabela, hover */
  --tinta:        #1F1B16;
  --tinta-suave:  #4A4239;
  --tinta-fraca:  #6B6156;
  --borda:        #D4CCBC;   /* filete padrão */
  --borda-forte:  #B6AC98;   /* régua: cabeçalho de tabela, divisor de seção */

  /* Elevação: abolida no repouso. Ver a nota 4 no topo do arquivo. */
  --sombra-sm:    0 1px 0 rgba(31,27,22,.07), 0 2px 4px -2px rgba(31,27,22,.14);
  --sombra:       none;
  --sombra-alta:  0 20px 44px -18px rgba(31,27,22,.34), 0 2px 8px -4px rgba(31,27,22,.16);
  --scrim:        rgba(31,27,22,.50);

  /* Acento (marca + interação) — AZUL-FERROGÁLICO. Fria de propósito: é a
     regra 2 do cabeçalho. O oxblood do estudo virou o crítico, abaixo. */
  --acento:        #2E4470;
  --acento-texto:  #2A3F68;
  --acento-fraco:  rgba(46,68,112,.10);
  --acento-borda:  rgba(46,68,112,.34);
  --acento-solido: #2E4470;  /* preenchimento de botão primário */
  --acento-solido-tinta: #FBF9F5;

  /* Estados. A cor-BASE vale para preenchimento/ponto/borda (objeto gráfico,
     exige 3:1); a variante -texto vale para texto (exige 4.5:1), inclusive
     sobre o fundo tingido do próprio chip. */
  --ok:            #3C5C3A;
  --ok-texto:      #2F4A2E;
  --ok-fraco:      rgba(60,92,58,.13);
  --ok-borda:      rgba(60,92,58,.36);
  --atencao:       #8A6212;
  --atencao-texto: #6E4E0C;
  --atencao-fraco: rgba(138,98,18,.13);
  --atencao-borda: rgba(138,98,18,.38);
  --critico:       #8E2F2A;   /* oxblood — o vermelho grave do processo */
  --critico-texto: #7E2924;
  --critico-fraco: rgba(142,47,42,.12);
  --critico-borda: rgba(142,47,42,.36);
  --critico-sutil: rgba(142,47,42,.06);   /* tinta de linha inteira */
  --critico-solido: #8E2F2A;
  --critico-solido-tinta: #FBF9F5;

  /* Categoria de evento (linha do tempo) — TINTA ROXA para "encaminhamento".
     Saiu da ameixa (#7D3358) porque a ameixa encostava no oxblood do crítico:
     numa etiqueta pequena as duas viravam a mesma cor. */
  --vinho:        #5E3A63;
  --vinho-texto:  #56355B;
  --vinho-fraco:  rgba(94,58,99,.13);
  --vinho-borda:  rgba(94,58,99,.36);

  --realce-bg:    var(--acento-fraco);
  --foco:         var(--acento);

  /* Sidebar: coluna de papel, não bloco de cor. O item ativo é marcado por
     barra de 3px no acento + folha limpa, não por fundo colorido. */
  --sidebar-bg:          #EAE4D9;
  --sidebar-tinta:       var(--tinta);
  --sidebar-tinta-fraca: var(--tinta-fraca);
  --sidebar-hover:       rgba(31,27,22,.05);
  --sidebar-ativo-bg:    #FBF9F5;
  --sidebar-borda:       var(--borda);
  /* Superfície interna da coluna (caixa do usuário, selo "em breve"): CLAREIA
     em vez de escurecer — escurecer derruba --tinta-fraca abaixo do AA. */
  --sidebar-superficie:  rgba(255,255,255,.55);
}

/* ---------- Tema ESCURO · "noturno" --------------------------------------- */
/* O mesmo dossiê sob luminária: o preto puxa para o marrom, nunca para o azul,
   e a tinta clara é cor de papel envelhecido. Contraste na mesma família — é o
   avesso do diurno, não outro sistema. */
[data-tema="escuro"] {
  --fundo:        #14110D;
  --superficie:   #1D1912;
  --superficie-2: #272117;
  --tinta:        #EDE6D9;
  --tinta-suave:  #C3B8A6;
  --tinta-fraca:  #9F9483;
  --borda:        #362E23;
  --borda-forte:  #4D4335;

  --sombra-sm:    0 1px 0 rgba(0,0,0,.55), 0 2px 6px -2px rgba(0,0,0,.55);
  --sombra:       none;
  --sombra-alta:  0 24px 56px -20px rgba(0,0,0,.74), 0 2px 10px -4px rgba(0,0,0,.52);
  --scrim:        rgba(8,6,4,.68);

  --acento:        #8FA8D8;
  --acento-texto:  #A8BCE4;
  --acento-fraco:  rgba(143,168,216,.15);
  --acento-borda:  rgba(143,168,216,.42);
  --acento-solido: #3A5488;
  --acento-solido-tinta: #F5F1EA;

  --ok:            #6FA46A;
  --ok-texto:      #8CBE87;
  --ok-fraco:      rgba(111,164,106,.16);
  --ok-borda:      rgba(111,164,106,.42);
  --atencao:       #C99A3E;
  --atencao-texto: #DEB158;
  --atencao-fraco: rgba(201,154,62,.16);
  --atencao-borda: rgba(201,154,62,.42);
  --critico:       #C4655C;
  --critico-texto: #DE8B80;
  --critico-fraco: rgba(196,101,92,.16);
  --critico-borda: rgba(196,101,92,.42);
  --critico-sutil: rgba(196,101,92,.08);  /* tinta de linha inteira */
  --critico-solido: #8E3B34;
  --critico-solido-tinta: #F5F1EA;

  --vinho:        #A87BB0;
  --vinho-texto:  #C29BC8;
  --vinho-fraco:  rgba(168,123,176,.16);
  --vinho-borda:  rgba(168,123,176,.42);

  --realce-bg:    var(--acento-fraco);
  --foco:         var(--acento-texto);

  --sidebar-bg:          #100D09;
  --sidebar-tinta:       var(--tinta);
  --sidebar-tinta-fraca: var(--tinta-fraca);
  --sidebar-hover:       rgba(255,255,255,.05);
  --sidebar-ativo-bg:    #272117;
  --sidebar-borda:       var(--borda);
  --sidebar-superficie:  rgba(255,255,255,.04);
}


/* ---------- Reset enxuto -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--fonte-corpo);
  background: var(--fundo);
  color: var(--tinta);
  font-size: var(--txt-base);        /* 15px — via token de escala */
  line-height: var(--leading-corpo); /* 1.55 */
  /* Numerais proporcionais por padrão; o tabular é ligado nos contextos
     numéricos (tabelas, KPIs, .num, .mono) — ver a nota sobre tabular-nums
     na seção de tabelas. */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  transition: background-color .25s ease, color .25s ease;
}

/* ---------- Estrutura geral: sidebar + área principal --------------------- */
.aplicacao {
  display: grid;
  grid-template-columns: var(--sidebar-larg) 1fr;
  min-height: 100vh;
}

/* ---------- Sidebar --------------------------------------------------------
   Deixou de ser um bloco de cor (navy) e virou COLUNA DE PAPEL: mesma família
   de cinzas do resto, separada por filete. O item ativo não é pintado — é
   MARCADO, com uma barra de 3px no acento à esquerda e a superfície branca do
   documento. É a mesma gramática de uma guia de arquivo. */
.sidebar {
  background: var(--sidebar-bg);
  color: var(--sidebar-tinta);
  display: flex;
  flex-direction: column;
  padding: 26px 14px 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  /* Nos dois temas a sidebar e o fundo são vizinhos de luminância: o filete é
     o que define a borda entre a coluna e o documento. */
  border-right: 1px solid var(--sidebar-borda);
  transition: background-color .25s ease, border-color .25s ease;
}

.marca {
  padding: 0 10px 24px;
}
.marca-nome {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: var(--track-titulo);
  color: var(--sidebar-tinta);
}
.marca-nome em {
  font-style: normal;
  color: var(--acento);
}
.marca-sub {
  font-family: var(--fonte-mono);
  font-size: .66rem;
  letter-spacing: var(--track-versal);
  text-transform: uppercase;
  color: var(--sidebar-tinta-fraca);
  margin-top: 5px;
}

.navegacao { display: flex; flex-direction: column; gap: 1px; flex: 1; }

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 12px 9px 13px;
  border: none;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--sidebar-tinta-fraca);
  font: inherit;
  font-size: .89rem;
  text-align: left;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.nav-item svg { flex: none; opacity: .8; }
.nav-item:hover:not(:disabled) { background: var(--sidebar-hover); color: var(--sidebar-tinta); }
.nav-item:focus-visible { outline: 2px solid var(--foco); outline-offset: -1px; }

/* Marcador do item ativo: barra de 3px, não campo de cor. */
.nav-item[aria-current="page"] {
  background: var(--sidebar-ativo-bg);
  color: var(--sidebar-tinta);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--acento);
  border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
}
.nav-item[aria-current="page"] svg { opacity: 1; color: var(--acento); }

/* Itens ainda não implementados: visíveis, rotulados e inertes */
.nav-item:disabled { color: var(--sidebar-tinta-fraca); opacity: .55; cursor: default; }
.nav-item:disabled svg { opacity: .4; }

.tag-breve {
  margin-left: auto;
  font-family: var(--fonte-mono);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: var(--track-versal);
  text-transform: uppercase;
  color: var(--sidebar-tinta-fraca);
  background: var(--sidebar-superficie);
  border: 1px solid var(--sidebar-borda);
  border-radius: var(--raio-selo);
  padding: 2px 7px;
}

.sidebar-rodape {
  padding: 13px 12px 0;
  border-top: 1px solid var(--sidebar-borda);
  font-family: var(--fonte-mono);
  font-size: .68rem;
  color: var(--sidebar-tinta-fraca);
  display: flex;
  align-items: center;
  gap: 7px;
}
.sidebar-rodape .ponto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
  flex: none;
}

/* ---------- Cabeçalho da área principal ----------------------------------- */
.principal { display: flex; flex-direction: column; min-width: 0; }

/* Cabeçalho: régua dupla (filete fino + traço grosso) — a assinatura gráfica
   do sistema, repetida no cabeçalho de tabela e nos títulos de seção. */
.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 36px 18px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  box-shadow: 0 1px 0 var(--borda-forte);
}
.topo-titulo {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 1.32rem;
  line-height: var(--leading-titulo);
  letter-spacing: var(--track-titulo);
}
.topo-sub {
  font-size: var(--txt-xs);
  color: var(--tinta-fraca);
  margin-top: 3px;
}

/* Botão de alternância de tema */
.botao-tema {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--tinta-suave);
  border-radius: var(--raio-sm);
  padding: 7px 13px;
  font: inherit;
  font-size: var(--txt-xs);
  cursor: pointer;
  box-shadow: var(--sombra);
  transition: color .12s ease, border-color .12s ease, background-color .25s ease;
}
.botao-tema:hover { color: var(--tinta); border-color: var(--borda-forte); }
.botao-tema:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* O ícone certo aparece conforme o tema ativo */
[data-tema="claro"] .icone-lua { display: none; }
[data-tema="escuro"] .icone-sol { display: none; }
[data-tema="claro"] .rotulo-escuro { display: none; }
[data-tema="escuro"] .rotulo-claro { display: none; }

/* ---------- Área de conteúdo (view) --------------------------------------- */
.view {
  padding: 30px 36px 48px;
  max-width: 1180px;
  width: 100%;
}

.view-cabecalho { margin-bottom: 24px; }
/* O eyebrow é o "carimbo de seção" do registro: mono, versalete, discreto.
   Não é decorativo — é o único rótulo que localiza a tela dentro do sistema. */
.view-eyebrow {
  font-family: var(--fonte-mono);
  font-size: var(--txt-3xs);
  font-weight: 600;
  letter-spacing: var(--track-versal);
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.view-titulo {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 1.72rem;
  line-height: var(--leading-titulo);
  letter-spacing: var(--track-titulo);
  margin-top: 5px;
}
.view-descricao { color: var(--tinta-suave); margin-top: 7px; max-width: 66ch; font-size: var(--txt-sm); }

/* ---------- Cards de contagem ---------------------------------------------- */
.grade-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 14px;
}

/* O cartão de contagem virou VERBETE: o filete de estado passou para o TOPO
   (2px, largura inteira), o número é o elemento dominante e o rótulo desce
   para versalete. Sem sombra: o que separa o cartão do fundo é o filete. */
.card {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-top: 2px solid var(--cor-card, var(--acento));
  border-radius: 0 0 var(--raio) var(--raio);
  box-shadow: var(--sombra);
  padding: 15px 16px 14px;
  position: relative;
  opacity: 0;
  animation: surgir .3s ease forwards;
  transition: background-color .25s ease, border-color .25s ease;
}
/* Entrada escalonada — só opacidade, sem deslocamento: numa tela de risco a
   informação não deve "voar" para o lugar. */
.card:nth-child(1) { animation-delay: .01s; }
.card:nth-child(2) { animation-delay: .04s; }
.card:nth-child(3) { animation-delay: .07s; }
.card:nth-child(4) { animation-delay: .10s; }
.card:nth-child(5) { animation-delay: .13s; }
.card:nth-child(6) { animation-delay: .16s; }
.card:nth-child(7) { animation-delay: .19s; }

@keyframes surgir { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .card { animation: none; opacity: 1; }
}

.card-numero {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: var(--txt-3xl);
  line-height: var(--leading-apertado);
  letter-spacing: var(--track-titulo);
  font-variant-numeric: tabular-nums;
}
.card-rotulo {
  color: var(--tinta-suave);
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  margin-top: 5px;
}

/* ---------- Aviso e ações da fundação -------------------------------------- */
.faixa-aviso {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--superficie-2);
  border: 1px dashed var(--borda);
  border-radius: var(--raio);
  padding: 16px 20px;
  transition: background-color .25s ease;
}
.faixa-aviso p { color: var(--tinta-suave); font-size: .9rem; }
.faixa-aviso strong { color: var(--tinta); font-weight: 600; }

.botao-secundario {
  border: 1px solid var(--borda-forte);
  background: var(--superficie);
  color: var(--tinta);
  border-radius: var(--raio-sm);
  padding: 8px 16px;
  font: inherit;
  font-size: var(--txt-sm);
  font-weight: var(--peso-forte);
  cursor: pointer;
  box-shadow: var(--sombra);
  transition: border-color .12s ease, background-color .12s ease;
}
.botao-secundario:hover { border-color: var(--acento); background: var(--acento-fraco); }
.botao-secundario:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.botao-secundario:disabled { opacity: .55; cursor: wait; }

/* Linha técnica discreta no rodapé da view */
.nota-tecnica {
  margin-top: 18px;
  font-family: var(--fonte-mono);
  font-size: .72rem;
  color: var(--tinta-fraca);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

/* ============================================================================
   ETAPA 1 · EQUIPE + PERFIL ATIVO
   Só acrescenta. Nenhuma regra da Etapa 0 foi reescrita.
   ========================================================================== */

/* ---------- Bloco de ações do topo (perfil ativo + tema) ------------------ */
.topo-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.perfil-caixa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--borda);
  background: var(--superficie);
  border-radius: var(--raio-selo);
  padding: 6px 16px 6px 7px;
  box-shadow: var(--sombra);
  transition: background-color .25s ease, border-color .15s ease;
}
.perfil-caixa:focus-within { border-color: var(--acento); }

.perfil-avatar {
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--realce-bg);
  color: var(--acento);
  display: grid;
  place-items: center;
  font-family: var(--fonte-mono);
  font-size: .68rem;
  font-weight: 700;
}
.perfil-textos { display: flex; flex-direction: column; line-height: 1.25; }
.perfil-rotulo {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.perfil-select-wrap { position: relative; display: inline-flex; align-items: center; }
.perfil-select {
  appearance: none; -webkit-appearance: none;
  border: none;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  padding: 0 18px 0 0;
  max-width: 230px;
  cursor: pointer;
}
.perfil-select:focus { outline: none; }
.perfil-select:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
.perfil-chevron {
  position: absolute; right: 0;
  pointer-events: none;
  color: var(--tinta-fraca);
}

/* ---------- Gate de abertura: "Quem está operando o painel?" -------------- */
.gate {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--fundo);
}
.gate[hidden] { display: none; }

.gate-cartao {
  width: min(520px, 100%);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 30px 30px 24px;
}
.gate-marca {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: var(--track-titulo);
  color: var(--tinta);
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--borda-forte);
}
.gate-marca em { font-style: normal; color: var(--acento); }
.gate-titulo {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 1.55rem;
  line-height: var(--leading-titulo);
  letter-spacing: var(--track-titulo);
  margin-top: 5px;
}
.gate-texto { color: var(--tinta-suave); font-size: .9rem; margin-top: 6px; }

.gate-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
.perfil-opcao {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--tinta);
  border-radius: var(--raio-sm);
  padding: 11px 14px;
  font: inherit;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.perfil-opcao:hover { border-color: var(--acento); background: var(--superficie-2); }
.perfil-opcao:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.perfil-opcao .perfil-avatar { width: 34px; height: 34px; font-size: .72rem; }
.perfil-opcao-nome { font-weight: 600; font-size: .95rem; }
.perfil-opcao-funcao { color: var(--tinta-suave); font-size: .8rem; }

.gate-nota {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--borda);
  font-family: var(--fonte-mono);
  font-size: .7rem;
  color: var(--tinta-fraca);
}

/* ---------- Termos / primeiro acesso (Fase 7) ----------------------------- */
.gate-cartao-largo { width: min(720px, 100%); }

.termos-texto {
  margin-top: 18px;
  max-height: min(46vh, 420px);
  overflow-y: auto;
  padding: 16px 18px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--superficie-2);
  color: var(--tinta);
  font-size: .88rem;
  line-height: 1.55;
}
.termos-texto:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.termos-texto h1 { font-family: var(--fonte-display); font-size: 1.15rem; margin: 0 0 4px; }
.termos-texto h2 { font-family: var(--fonte-display); font-size: 1rem; margin: 18px 0 6px; }
.termos-texto p { margin: 8px 0; color: var(--tinta-suave); }
.termos-texto strong { color: var(--tinta); }
.termos-texto ul { margin: 8px 0 8px 4px; padding-left: 18px; color: var(--tinta-suave); }
.termos-texto li { margin: 4px 0; }
.termos-texto blockquote {
  margin: 8px 0; padding: 6px 12px;
  border-left: 3px solid var(--borda);
  color: var(--tinta-fraca); font-size: .84rem;
}

.termos-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  font-size: .9rem;
  color: var(--tinta);
  cursor: pointer;
}
.termos-check input { margin-top: 3px; flex: none; }
.termos-check + .botao-primario { margin-top: 16px; }
#termos-continuar[disabled] { opacity: .55; cursor: not-allowed; }
#termos-sair { margin-top: 6px; }

/* ---------- Cabeçalho de view com ação à direita -------------------------- */
.barra-view {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Ação primária: preenchimento sólido no acento nos DOIS temas (o token
   --acento-solido escurece no escuro para não virar farol). O contraste do
   rótulo é garantido pelo par --acento-solido / --acento-solido-tinta. */
.botao-primario {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  background: var(--acento-solido);
  color: var(--acento-solido-tinta);
  border-radius: var(--raio-sm);
  padding: 9px 16px;
  font: inherit;
  font-size: var(--txt-sm);
  font-weight: var(--peso-forte);
  cursor: pointer;
  box-shadow: var(--sombra);
  transition: filter .12s ease, background-color .25s ease;
}
.botao-primario:hover { filter: brightness(1.14); }
.botao-primario:active { filter: brightness(.94); }
.botao-primario:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* ---------- Aviso de somente leitura -------------------------------------- */
.aviso-leitura {
  margin-top: 4px;
  background: var(--realce-bg);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 11px 14px;
  font-size: .85rem;
  color: var(--tinta-suave);
}
.aviso-leitura strong { color: var(--tinta); }

/* ---------- Grupos e tabelas ---------------------------------------------- */
.grupo { margin-top: 26px; }
.grupo-titulo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: var(--txt-md);
  letter-spacing: var(--track-titulo);
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--borda-forte);
}
.contador {
  font-family: var(--fonte-mono);
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-fraca);
  border: 1px solid var(--borda);
  border-radius: var(--raio-selo);
  padding: 1px 7px;
}

.tabela-caixa {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
  transition: background-color .25s ease, border-color .25s ease;
}
/* Numerais tabulares em TODA a tabela: numa lista de famílias, prazos e
   valores, colunas de dígitos precisam alinhar verticalmente. */
.tabela { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
/* Cabeçalho: mono em versalete + RÉGUA DUPLA (filete fino do próprio th e
   traço grosso do box-shadow). É a mesma assinatura do cabeçalho da página. */
.tabela th {
  text-align: left;
  font-family: var(--fonte-mono);
  font-size: var(--txt-3xs);
  font-weight: 600;
  letter-spacing: var(--track-versal);
  text-transform: uppercase;
  color: var(--tinta-fraca);
  background: var(--superficie-2);
  padding: 9px 16px;
  border-bottom: 1px solid var(--borda-forte);
  /* Cabeçalho fixo (Fase 9, bloco 6): gruda no topo ao rolar tabelas longas.
     Aqui a sombra é informação — avisa que há linhas passando por baixo —,
     por isso é a única elevação que sobreviveu no repouso. */
  position: sticky;
  top: 0;
  z-index: 1;
  box-shadow: var(--sombra-sm);
}
.tabela th.col-acoes { text-align: right; }
.tabela td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--borda);
  vertical-align: middle;
  font-size: var(--txt-sm);
}
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover { background: var(--superficie-2); }
.celula-nome { font-weight: var(--peso-forte); }
.linha-inativa .celula-nome, .linha-inativa td { color: var(--tinta-fraca); }

.marca-voce {
  margin-left: 7px;
  font-family: var(--fonte-mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: var(--track-versal);
  text-transform: uppercase;
  /* Texto sobre fundo tingido: exige a variante -texto. A cor-BASE dava
     4.19:1 no escuro sobre o próprio realce. */
  color: var(--acento-texto);
  background: var(--acento-fraco);
  border: 1px solid var(--acento-borda);
  border-radius: var(--raio-selo);
  padding: 1px 6px;
  vertical-align: middle;
}

.pilula {
  display: inline-block;
  font-size: var(--txt-2xs);
  color: var(--tinta-suave);
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-selo);
  padding: 2px 10px;
  white-space: nowrap;
}
.pilula.coord { color: var(--acento-texto); background: var(--realce-bg); }

.acoes-linha { display: flex; gap: 6px; justify-content: flex-end; }
.botao-mini {
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--tinta-suave);
  border-radius: var(--raio-sm);
  padding: 5px 11px;
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.botao-mini:hover { color: var(--tinta); border-color: var(--acento); }
.botao-mini.perigo:hover { color: var(--critico-texto); border-color: var(--critico-texto); }
.botao-mini:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

.vazio { padding: 20px 16px; color: var(--tinta-fraca); font-size: .88rem; }

/* ---------- Modal de formulário ------------------------------------------- */
.modal-fundo {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--scrim);
}
.modal {
  width: min(520px, 100%);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
  padding: var(--esp-5) var(--esp-5);
  max-height: 90vh;
  overflow: auto;
}
.modal-titulo {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: var(--txt-xl);
  line-height: var(--leading-titulo);
  letter-spacing: var(--track-titulo);
}
.modal-sub { color: var(--tinta-suave); font-size: .85rem; margin-top: 3px; }

.campo { display: flex; flex-direction: column; gap: 5px; margin-top: 15px; }
.campo label {
  font-family: var(--fonte-mono);
  font-size: var(--txt-3xs);
  font-weight: 600;
  letter-spacing: var(--track-versal);
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.campo input[type="text"], .campo select {
  border: 1px solid var(--borda);
  background: var(--fundo);
  color: var(--tinta);
  border-radius: var(--raio-sm);
  padding: 9px 11px;
  font: inherit;
  font-size: .9rem;
  width: 100%;
}
.campo input:focus-visible, .campo select:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 1px;
}
.campo-check { flex-direction: row; align-items: center; gap: 9px; margin-top: 18px; }
/* Rótulo de caixa de seleção é FRASE, não rótulo de campo: volta para a fonte
   de corpo (o `.campo label` acima passou a ser mono/versalete). */
.campo-check label {
  font-family: var(--fonte-corpo);
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--txt-sm);
  font-weight: var(--peso-normal);
  color: var(--tinta-suave);
}
.campo-check input { accent-color: var(--acento); width: 16px; height: 16px; }

.erro-campo { color: var(--critico-texto); font-size: .78rem; min-height: 1em; }
.modal-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* ============================================================================
   ETAPA 2 · PESSOAS E FAMÍLIAS
   Só acrescenta. Nenhuma regra das Etapas 0/1 foi reescrita.
   ========================================================================== */

/* ---------- Abas (Pessoas | Famílias) ------------------------------------- */
/* Abas: guia de arquivo. A régua da base é grossa e a aba ativa é marcada por
   um traço do mesmo peso, encostado nela — não por um sublinhado flutuante. */
.abas {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid var(--borda-forte);
  margin: 22px 0 18px;
}
.aba {
  position: relative;
  border: none;
  background: transparent;
  color: var(--tinta-suave);
  font: inherit;
  font-size: var(--txt-sm);
  font-weight: var(--peso-forte);
  padding: 8px 14px 10px;
  cursor: pointer;
  transition: color .12s ease, background-color .12s ease;
}
.aba:hover { color: var(--tinta); background: var(--sidebar-hover); }
.aba:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; border-radius: var(--raio-sm); }
.aba[aria-selected="true"] { color: var(--tinta); }
.aba[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--acento);
}
.aba .contador { margin-left: 7px; }

/* ---------- Barra de ferramentas (busca + ação) --------------------------- */
.barra-ferramentas {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.busca { position: relative; flex: 1; min-width: 230px; max-width: 430px; }
.busca input {
  width: 100%;
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--tinta);
  border-radius: var(--raio-selo);
  padding: 9px 14px 9px 37px;
  font: inherit;
  font-size: .88rem;
  box-shadow: var(--sombra);
}
.busca input::placeholder { color: var(--tinta-fraca); }
.busca input:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
.busca svg {
  position: absolute; left: 13px; top: 50%;
  transform: translateY(-50%);
  color: var(--tinta-fraca);
  pointer-events: none;
}
.espaco-flex { flex: 1; }

/* ---------- Chips de vulnerabilidade -------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--txt-2xs);
  font-weight: var(--peso-forte);
  letter-spacing: .01em;
  border: 1px solid transparent;
  border-radius: var(--raio-selo);
  padding: 2px 9px;
  white-space: nowrap;
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.chip-verde    { color: var(--ok-texto);      background: var(--ok-fraco);  border-color: var(--ok-borda); }
.chip-amarelo  { color: var(--atencao-texto); background: var(--atencao-fraco); border-color: var(--atencao-borda); }
.chip-vermelho { color: var(--critico-texto); background: var(--critico-fraco);  border-color: var(--critico-borda); }
/* Redundância de FORMA (Fase 9, bloco 6) — a marca do chip muda de forma além
   da cor, então o estado é distinguível sem depender da cor (WCAG 1.4.1) e em
   escala de cinza: verde=círculo · amarelo=triângulo · vermelho=losango.
   Vale para todos os usos dessas classes (vulnerabilidade, status, auditoria). */
.chip-amarelo::before  { border-radius: 1px; clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
.chip-vermelho::before { border-radius: 1px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.chip-neutro   { color: var(--tinta-fraca); background: var(--superficie-2); border-color: var(--borda); }
.chip-manual {
  margin-left: 6px;
  font-family: var(--fonte-mono);
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  border: 1px solid var(--borda);
  border-radius: var(--raio-selo);
  padding: 1px 7px;
  white-space: nowrap;
}

/* ---------- Detalhes de tabela --------------------------------------------- */
.sub-linha { display: block; font-size: .76rem; font-weight: 400; color: var(--tinta-fraca); }
.mono { font-family: var(--fonte-mono); font-size: var(--txt-xs); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
.link-inline {
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: .9rem;
  color: var(--tinta);
  font-weight: 600;
  cursor: pointer;
  border-bottom: 1px solid var(--borda-forte);
}
.link-inline:hover { color: var(--acento-texto); border-bottom-color: var(--acento); }
.link-inline:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 3px; }

/* ---------- Formulários maiores -------------------------------------------- */
.modal-largo { width: min(800px, 100%); }

.campo input[type="date"],
.campo input[type="number"],
.campo textarea {
  border: 1px solid var(--borda);
  background: var(--fundo);
  color: var(--tinta);
  border-radius: var(--raio-sm);
  padding: 9px 11px;
  font: inherit;
  font-size: .9rem;
  width: 100%;
}
.campo textarea { min-height: 66px; resize: vertical; }
.campo textarea:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
.campo-ajuda { font-size: .75rem; color: var(--tinta-fraca); }
.campo-calculado {
  font-family: var(--fonte-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--tinta);
  border: 1px dashed var(--borda);
  background: var(--superficie-2);
  border-radius: var(--raio-sm);
  padding: 8px 11px;
}

.grade-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 16px; }

.secao-form { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--borda); }
.secao-form-titulo {
  font-family: var(--fonte-mono);
  font-size: var(--txt-3xs);
  font-weight: 600;
  letter-spacing: var(--track-versal);
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.sem-borda { border: none; padding: 0; margin: 0; min-width: 0; }

/* Multi-seleção em pílulas */
.opcoes-multi { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.opcao-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--borda);
  background: var(--fundo);
  border-radius: var(--raio-selo);
  padding: 5px 12px;
  font-size: .8rem;
  color: var(--tinta-suave);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.opcao-check input { accent-color: var(--acento); width: 14px; height: 14px; }
.opcao-check.marcada { border-color: var(--acento); color: var(--tinta); background: var(--realce-bg); }

/* Segmentado: "família existente" × "nova família" */
.segmentado {
  display: inline-flex;
  gap: 3px;
  border: 1px solid var(--borda);
  background: var(--fundo);
  border-radius: var(--raio-selo);
  padding: 3px;
}
.segmentado button {
  border: none;
  background: transparent;
  color: var(--tinta-suave);
  font: inherit;
  font-size: .81rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--raio-selo);
  cursor: pointer;
}
.segmentado button[aria-pressed="true"] {
  background: var(--superficie);
  color: var(--tinta);
  border: 1px solid var(--borda-forte);
  /* A sombra foi abolida no repouso: quem marca o segmento ativo e o filete. */
  padding: 5px 13px;
}
.segmentado button:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }

/* Resultados da busca de família dentro do formulário de pessoa */
.resultados {
  margin-top: 8px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--fundo);
  max-height: 190px;
  overflow: auto;
}
.resultado {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--borda);
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-size: .86rem;
  padding: 9px 12px;
  cursor: pointer;
}
.resultado:last-child { border-bottom: none; }
.resultado:hover { background: var(--superficie-2); }
.resultado:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }

.selecionada {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  border: 1px solid var(--acento);
  background: var(--realce-bg);
  border-radius: var(--raio-sm);
  padding: 10px 12px;
  font-size: .86rem;
}

/* ---------- Ficha da família ----------------------------------------------- */
.voltar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  background: transparent;
  color: var(--tinta-suave);
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  padding: 0;
  margin-bottom: 12px;
  cursor: pointer;
}
.voltar:hover { color: var(--acento-texto); }
.voltar:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: 4px; }

.ficha-metricas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  margin-top: 16px;
  padding: 15px 20px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-top: 2px solid var(--borda-forte);
  border-radius: 0 0 var(--raio) var(--raio);
  box-shadow: var(--sombra);
}
.metrica-rotulo {
  font-family: var(--fonte-mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: var(--track-versal);
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.metrica-valor {
  font-family: var(--fonte-display);
  font-size: var(--txt-lg);
  font-weight: 700;
  letter-spacing: var(--track-titulo);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  display: flex;
  align-items: center;
}

.painel {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 20px 22px 22px;
}
.painel-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ============================================================================
   ETAPA 3 · CASO / ACOMPANHAMENTO
   Só acrescenta. Nenhuma regra das Etapas 0/1/2 foi reescrita.
   ========================================================================== */

/* ---------- Aba inerte ("Linha do tempo · em breve") ---------------------- */
.aba:disabled { cursor: not-allowed; color: var(--tinta-fraca); }
.aba:disabled:hover { color: var(--tinta-fraca); }
.tag-aba-breve {
  margin-left: 7px;
  font-family: var(--fonte-mono);
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  border: 1px solid var(--borda);
  border-radius: var(--raio-selo);
  padding: 1px 7px;
  vertical-align: middle;
}

/* ---------- Chips de status (planos e encaminhamentos) -------------------- */
.chip-info      { color: var(--tinta);      background: var(--superficie-2);  border-color: var(--borda); }
.chip-direcao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .74rem;
  font-weight: 600;
  border: 1px solid var(--borda);
  background: var(--fundo);
  border-radius: var(--raio-selo);
  padding: 2px 11px;
  color: var(--tinta-suave);
  white-space: nowrap;
}
.chip-direcao.emitido  { color: var(--acento-texto); border-color: var(--acento-borda); background: var(--acento-fraco); }
.chip-direcao.recebido { color: var(--vinho-texto); border-color: var(--vinho-borda); background: var(--vinho-fraco); }

/* Selo de prazo vencido — nesta etapa é SÓ ESTILO.
   O alerta formal (motor de vulnerabilidade) é da Etapa 5. */
.selo-vencido {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 7px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--critico-texto);
  background: var(--critico-fraco);
  border: 1px solid var(--critico-borda);
  border-radius: var(--raio-selo);
  padding: 1px 8px;
  white-space: nowrap;
}
/* A linha vencida é marcada por barra sólida na primeira célula + tinta MUITO
   discreta: uma tabela inteira de linhas vencidas não pode virar um bloco
   vermelho, senão o realce deixa de realçar. O hover ainda precisa responder,
   então a tinta do repouso é metade da do estado hover. */
.linha-vencida td:first-child { box-shadow: inset 4px 0 0 var(--critico); }
.linha-vencida { background: var(--critico-sutil); }
.linha-vencida:hover { background: var(--critico-fraco); }

/* ---------- Cabeçalho do caso --------------------------------------------- */
.caso-titulo-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.caso-identidade { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 7px; align-items: center; }

/* ---------- Células de texto longo nas tabelas ---------------------------- */
.celula-longa { max-width: 330px; }
.celula-longa .sub-linha { white-space: normal; }

/* ---------- Prontuário: registros em cartões ------------------------------ */
/* Registros do prontuário — DENSOS por decisão (Fase 12): um caso com dezenas
   de evoluções no ano tem de ser varrido de olho, não rolado por minutos. */
.registros { display: flex; flex-direction: column; gap: 6px; }
.caso-registro {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 9px 12px 10px;
}
.caso-registro.meu { border-left: 2px solid var(--acento); }
.caso-registro-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Os botões só aparecem no cartão sob o cursor (ou com foco pelo teclado):
   é o que mantém a faixa de cabeçalho limpa numa lista longa. */
.caso-registro .caso-registro-acoes { opacity: 0; transition: opacity .12s ease; }
.caso-registro:hover .caso-registro-acoes,
.caso-registro:focus-within .caso-registro-acoes { opacity: 1; }
@media (hover: none) {
  .caso-registro .caso-registro-acoes { opacity: 1; }
}
.caso-avatar {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  font-family: var(--fonte-mono);
  font-size: .72rem;
  font-weight: 700;
  color: var(--tinta-suave);
  flex: none;
}
.caso-registro .caso-avatar { width: 22px; height: 22px; font-size: .62rem; }
.caso-registro-autor { font-weight: 600; font-size: .82rem; }
.caso-registro-data {
  margin-left: auto;
  font-family: var(--fonte-mono);
  font-size: .74rem;
  color: var(--tinta-fraca);
  white-space: nowrap;
}
.caso-registro-texto {
  margin-top: 5px;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--tinta-suave);
  white-space: pre-wrap;
}
.caso-registro-acoes { display: flex; gap: 5px; justify-content: flex-end; }
.caso-registro .botao-mini { padding: 2px 8px; font-size: .72rem; }

/* Botão discreto em linha ("Ver completo"), sem a caixa de um botão-mini. */
.botao-texto {
  margin-top: 4px;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: .76rem;
  font-weight: 600;
  color: var(--acento-texto);
  cursor: pointer;
}
.botao-texto:hover { text-decoration: underline; }
.botao-texto:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* ---------- Barra de ação de cada bloco ----------------------------------- */
.bloco-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0 14px;
}

/* ---------- Placeholder da Linha do tempo (Etapa 4) ----------------------- */
.painel-breve {
  background: var(--superficie);
  border: 1px dashed var(--borda);
  border-radius: var(--raio);
  padding: 30px 24px;
  text-align: center;
  color: var(--tinta-fraca);
  font-size: .9rem;
}

/* ---------- Autoria travada no formulário de prontuário -------------------- */
.autoria-travada {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px dashed var(--borda);
  background: var(--superficie-2);
  border-radius: var(--raio-sm);
  padding: 9px 12px;
}
.autoria-travada .caso-avatar { width: 30px; height: 30px; }

/* ---------- Responsividade básica ------------------------------------------ */
@media (max-width: 860px) {
  .aplicacao { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .topo, .view { padding-left: 20px; padding-right: 20px; }
  .topo { flex-wrap: wrap; }
  .perfil-select { max-width: 150px; }
  .tabela th, .tabela td { padding: 10px 12px; }
}

/* ============================================================================
   ETAPA 4 · VISITAS + LINHA DO TEMPO
   Só acrescenta. Nenhuma regra das Etapas 0/1/2/3 foi reescrita.
   ========================================================================== */

/* ---------- Cor por categoria de evento -----------------------------------
   Cada classe injeta a variável --cor-evento, consumida pelo cartão, pelo
   marcador e pela etiqueta da linha do tempo (e pelos chips do filtro). */
.ev-visita         { --cor-evento: var(--acento);  --cor-evento-texto: var(--acento-texto); }
.ev-encaminhamento { --cor-evento: var(--vinho);   --cor-evento-texto: var(--vinho-texto); }
.ev-plano          { --cor-evento: var(--ok);      --cor-evento-texto: var(--ok-texto); }
.ev-prontuario     { --cor-evento: var(--atencao); --cor-evento-texto: var(--atencao-texto); }
/* Sem override por tema: os quatro tokens de categoria já são tema-cientes. */

/* ---------- Filtros em chips (tipo de evento da linha do tempo) ------------ */
.chips-filtro { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.chip-filtro {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--borda);
  background: var(--fundo);
  color: var(--tinta-suave);
  border-radius: var(--raio-selo);
  padding: 5px 13px;
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s ease, border-color .15s ease, color .15s ease;
}
.chip-filtro::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cor-evento, var(--tinta-fraca));
}
.chip-filtro[aria-pressed="true"] {
  border-color: var(--cor-evento, var(--acento));
  color: var(--tinta);
  background: var(--superficie);
  box-shadow: var(--sombra);
}
.chip-filtro[aria-pressed="false"] { opacity: .5; }
.chip-filtro:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.chip-filtro .contador-chip {
  font-family: var(--fonte-mono);
  font-size: .68rem;
  color: var(--tinta-fraca);
}

/* ---------- Situação do acompanhamento da pessoa (Fase 12) ---------------- */
/* Reaproveita .chip-filtro; só troca a cor do ponto por status. */
.filtro-status { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.filtro-status [data-status-pessoas="ativo"]     { --cor-evento: var(--ok); }
.filtro-status [data-status-pessoas="resolvido"] { --cor-evento: var(--tinta-fraca); }
.filtro-status [data-status-pessoas="todos"]     { --cor-evento: var(--acento); }

.chip-status-pessoa {
  display: inline-block;
  font-size: var(--txt-2xs);
  font-weight: var(--peso-forte);
  border: 1px solid var(--borda);
  border-radius: var(--raio-selo);
  padding: 2px 10px;
  white-space: nowrap;
}
.chip-status-pessoa.ativo     { color: var(--ok-texto); background: var(--superficie-2); }
.chip-status-pessoa.resolvido { color: var(--tinta-fraca); background: var(--superficie-2); }

/* A linha resolvida continua legível — só recua um passo do primeiro plano. */
.linha-resolvida .celula-nome { color: var(--tinta-suave); }

/* ---------- Linha do tempo ------------------------------------------------- */
.timeline { position: relative; padding-left: 26px; margin-top: 4px; }
.timeline::before {          /* o "fio" vertical que costura os eventos */
  content: "";
  position: absolute;
  left: 6px; top: 10px; bottom: 10px;
  width: 1px;
  background: var(--borda-forte);
}
.tl-item {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--cor-evento, var(--borda));
  border-radius: var(--raio-sm);
  padding: 8px 12px 9px;
  margin-bottom: 5px;
}
.tl-item::before {           /* o marcador sobre o fio */
  content: "";
  position: absolute;
  left: -24px; top: 13px;
  width: 9px; height: 9px;
  border-radius: 1px;
  background: var(--cor-evento, var(--tinta-fraca));
  border: 2px solid var(--fundo);
}
.tl-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-etiqueta {
  font-family: var(--fonte-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--cor-evento-texto, var(--tinta-suave));
  border: 1px solid var(--cor-evento, currentColor);
  border-radius: var(--raio-selo);
  padding: 1px 7px;
  white-space: nowrap;
}
.tl-data {
  margin-left: auto;
  font-family: var(--fonte-mono);
  font-size: .74rem;
  color: var(--tinta-fraca);
  white-space: nowrap;
}
/* O título divide a faixa do cabeçalho e encolhe antes de empurrar a data. */
.tl-titulo {
  flex: 1 1 12ch;
  min-width: 0;
  font-weight: 600;
  font-size: .84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tl-resumo {
  font-size: .81rem;
  line-height: 1.42;
  color: var(--tinta-suave);
  margin-top: 3px;
  white-space: pre-wrap;
}
.tl-autor {
  font-size: .74rem;
  color: var(--tinta-fraca);
  white-space: nowrap;
}
.tl-autor::before { content: " · "; }
/* "Abrir" só no item sob o cursor (ou com foco) — ver nota em renderBlocoLinhaDoTempo. */
.tl-abrir { opacity: 0; padding: 2px 8px; font-size: .72rem; transition: opacity .12s ease; }
.tl-item:hover .tl-abrir,
.tl-item:focus-within .tl-abrir { opacity: 1; }
@media (hover: none) { .tl-abrir { opacity: 1; } }

/* Realce momentâneo do registro de origem, quando a timeline salta até ele. */
.realce-flash { animation: realce-evento 1.8s ease-out; }
@keyframes realce-evento {
  0%   { background: var(--realce-bg); box-shadow: 0 0 0 2px var(--acento); }
  70%  { background: var(--realce-bg); box-shadow: 0 0 0 2px transparent; }
  100% { background: transparent; box-shadow: none; }
}

/* ---------- Filtros da tela "Visitas" -------------------------------------- */
.filtros-visitas {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 13px 16px;
  margin-bottom: 14px;
}
.filtro-campo { display: flex; flex-direction: column; gap: 4px; }
.filtro-campo label {
  font-family: var(--fonte-mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: var(--track-versal);
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.filtro-campo select,
.filtro-campo input[type="date"] {
  border: 1px solid var(--borda);
  background: var(--fundo);
  color: var(--tinta);
  border-radius: var(--raio-sm);
  padding: 7px 10px;
  font: inherit;
  font-size: .85rem;
}
.filtro-campo select:focus-visible,
.filtro-campo input:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
.filtros-visitas .busca { min-width: 200px; max-width: 300px; }

/* Etiqueta de modalidade da visita (individual / coletivo) */
.chip-modalidade {
  display: inline-flex;
  align-items: center;
  font-size: .72rem;
  font-weight: 600;
  border: 1px solid var(--borda);
  background: var(--superficie-2);
  color: var(--tinta-suave);
  border-radius: var(--raio-selo);
  padding: 2px 10px;
  white-space: nowrap;
}
.chip-modalidade.coletivo { color: var(--acento-texto); background: var(--acento-fraco); border-color: var(--acento-borda); }
/* ============================================================================
   ETAPA 5 · VULNERABILIDADE · ALERTAS · VISÃO GERAL · CONFIGURAÇÕES
   Só acrescenta. Nenhuma regra das etapas anteriores foi reescrita.
   ========================================================================== */

/* ---------- Cards-indicadores (topo da Visão geral) ----------------------- */
.card-indicador .card-numero.estado-critico { color: var(--critico-texto); }
.card-indicador .card-numero.estado-atencao { color: var(--atencao-texto); }

/* Card que abre a lista por trás do número: é <button>, então precisa desfazer
   o estilo de botão do navegador e voltar a parecer exatamente um card. */
.card-abre {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* MARCA DE REMISSÃO — a resposta do "Dossiê" ao cartão clicável.
   Sem sombra e sem canto, nada no cartão diz que ele abre; a sinalização que a
   identidade permite é a mesma do papel: a chamada de anexo. O "›" fica sempre
   visível (é ele que ensina que dá para clicar — o problema original era
   justamente ninguém descobrir) e ganha corpo no hover e no foco.
   Só aparece em .card-abre: o cartão que NÃO abre lista continua mudo, e é essa
   diferença que informa. */
.card-abre::after {
  content: "›";
  position: absolute;
  top: 9px;
  right: 12px;
  font-family: var(--fonte-display);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--acento-texto);
  opacity: .45;
  transition: opacity .15s ease, transform .15s ease;
}
.card-abre:hover,
.card-abre:focus-visible { background: var(--superficie-2); border-color: var(--borda-forte); }
.card-abre:hover::after,
.card-abre:focus-visible::after { opacity: 1; transform: translateX(3px); }
.card-abre:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* O número não deve encostar na marca de remissão. */
.card-abre .card-numero { padding-right: 18px; }

@media (prefers-reduced-motion: reduce) {
  .card-abre::after { transition: none; }
}

/* ---------- Lista de detalhe de um card-indicador ------------------------- */
.detalhe-lista {
  list-style: none;
  margin-top: 14px;
  max-height: 55vh;
  overflow-y: auto;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
}
.detalhe-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--borda);
}
.detalhe-item:last-child { border-bottom: none; }
.detalhe-item.vencido { border-left: 3px solid var(--critico); padding-left: 10px; }
.detalhe-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.detalhe-texto strong { font-size: .88rem; }
.detalhe-texto .sub-linha { font-size: .78rem; }
.card-nota {
  margin-top: 8px;
  font-size: .72rem;
  color: var(--tinta-fraca);
  line-height: 1.35;
}

/* ---------- Seções da Visão geral ----------------------------------------- */
.secao-visao { margin-top: 26px; }
.secao-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fonte-display);
  font-size: var(--txt-lg);
  font-weight: 700;
  letter-spacing: var(--track-titulo);
  margin-bottom: 12px;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--borda-forte);
}
.secao-titulo .contador {
  font-family: var(--fonte-mono);
  font-size: .72rem;
  font-weight: 600;
  color: var(--tinta-fraca);
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-selo);
  padding: 1px 9px;
}
.secao-titulo .contador.critico {
  color: var(--critico-texto);
  background: var(--critico-fraco);
  border-color: var(--critico-borda);
}
.secao-sub { font-size: .8rem; color: var(--tinta-fraca); font-weight: 400; }

/* ---------- Lista de alertas ---------------------------------------------- */
.alerta-lista { display: flex; flex-direction: column; gap: 8px; }
.alerta {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--tinta-fraca);
  border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
  padding: 11px 14px;
  box-shadow: var(--sombra);
  transition: border-color .15s ease;
}
.alerta.critico { border-left-color: var(--critico-texto); }
.alerta.atencao { border-left-color: var(--atencao-texto); }
.alerta.info    { border-left-color: var(--acento); }
.alerta-corpo { flex: 1; min-width: 0; }
.alerta-titulo { font-weight: 600; font-size: .92rem; }
.alerta-msg { color: var(--tinta-suave); font-size: .84rem; margin-top: 1px; }
.alerta-selo {
  font-family: var(--fonte-mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--borda);
  border-radius: var(--raio-selo);
  padding: 2px 8px;
  white-space: nowrap;
  color: var(--tinta-fraca);
  margin-top: 2px;
}
.alerta-selo.critico { color: var(--critico-texto); background: var(--critico-fraco);  border-color: var(--critico-borda); }
.alerta-selo.atencao { color: var(--atencao-texto); background: var(--atencao-fraco); border-color: var(--atencao-borda); }
.alerta-selo.info    { color: var(--tinta-suave); background: var(--superficie-2); }

/* ---------- Calendário / agenda ------------------------------------------- */
.calendario {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 16px 18px 18px;
}
.cal-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cal-mes {
  font-family: var(--fonte-display);
  font-size: var(--txt-md);
  font-weight: 700;
  letter-spacing: var(--track-titulo);
  text-transform: capitalize;
  margin-right: auto;
}
.cal-nav {
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--tinta);
  border-radius: var(--raio-sm);
  width: 30px; height: 30px;
  font: inherit;
  cursor: pointer;
  line-height: 1;
}
.cal-nav:hover { border-color: var(--acento); }
.cal-nav:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cabec {
  text-align: center;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  padding-bottom: 4px;
}
.cal-dia {
  position: relative;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 0;
}
.cal-dia:hover:not(:disabled) { background: var(--superficie-2); }
.cal-dia:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
.cal-dia.fora { visibility: hidden; }
.cal-dia.hoje { border-color: var(--acento); font-weight: 700; }
.cal-dia.selecionado { background: var(--realce-bg); border-color: var(--acento); }
.cal-dia:disabled { cursor: default; color: var(--tinta-fraca); }
.cal-pontos { display: flex; gap: 3px; height: 6px; align-items: center; }
.cal-ponto { width: 5px; height: 5px; border-radius: 50%; }
.cal-ponto.prazo  { background: var(--critico-texto); }
.cal-ponto.plano  { background: var(--atencao); }
.cal-ponto.visita { background: var(--ok); }
.cal-legenda {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 12px; font-size: .74rem; color: var(--tinta-fraca);
}
.cal-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.cal-eventos {
  margin-top: 14px;
  border-top: 1px dashed var(--borda);
  padding-top: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.cal-evento {
  display: flex; align-items: center; gap: 10px;
  font-size: .86rem;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 8px 12px;
}
.cal-evento .cal-ponto { flex: none; }
.cal-evento-texto { flex: 1; min-width: 0; }
.cal-evento-texto .sub-linha { margin-top: 1px; }

/* ---------- Gráficos SVG (estreiam nesta etapa) --------------------------- */
.grade-graficos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
}
.grafico {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 16px 18px 18px;
}
.grafico-titulo { font-size: .92rem; font-weight: 600; }
.grafico-sub { font-size: .74rem; color: var(--tinta-fraca); margin: 2px 0 12px; }
.grafico svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafico-legenda {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 12px; font-size: .76rem; color: var(--tinta-suave);
}
.grafico-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda-cor { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.legenda-valor { font-family: var(--fonte-mono); font-size: .72rem; color: var(--tinta-fraca); }
.grafico-vazio { color: var(--tinta-fraca); font-size: .85rem; text-align: center; padding: 30px 0; }
.svg-rotulo { font-family: var(--fonte-mono); font-size: 10px; fill: var(--tinta-fraca); }
.svg-valor  { font-family: var(--fonte-mono);  font-size: 11px; fill: var(--tinta-suave); font-weight: 600; }
.svg-centro-num {
  font-family: var(--fonte-display);
  font-size: 22px; font-weight: 700;
  letter-spacing: -.02em;
  fill: var(--tinta);
}
.svg-centro-txt { font-family: var(--fonte-mono); font-size: 9px; fill: var(--tinta-fraca); }

/* ---------- Transparência do motor: os "sinais" da vulnerabilidade -------- */
.btn-sinais {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  width: 19px; height: 19px;
  border: 1px solid var(--borda);
  background: var(--superficie-2);
  color: var(--tinta-suave);
  border-radius: 50%;
  font: inherit;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}
.btn-sinais:hover { border-color: var(--acento-texto); color: var(--acento-texto); }
.btn-sinais:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.chip-divergente {
  margin-left: 6px;
  font-family: var(--fonte-mono);
  font-size: .62rem;
  letter-spacing: .04em;
  color: var(--critico-texto);
  background: var(--critico-fraco);
  border: 1px solid var(--critico-borda);
  border-radius: var(--raio-selo);
  padding: 1px 7px;
  white-space: nowrap;
}
.pop-sinais {
  position: fixed;
  z-index: 70;
  width: 330px;
  max-width: calc(100vw - 24px);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra-alta);
  padding: var(--esp-3) var(--esp-4);
}
.pop-titulo {
  display: flex; align-items: center; gap: 8px;
  font-size: .86rem; font-weight: 700;
}
.pop-lista { list-style: none; margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.pop-lista li { display: flex; gap: 9px; font-size: .81rem; color: var(--tinta-suave); line-height: 1.4; }
/* Marca do sinal — substituiu o peso numérico, que saiu da interface. */
.pop-marca {
  flex: none;
  width: 5px; height: 5px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--acento-texto);
}
.pop-rodape {
  margin-top: 11px; padding-top: 9px;
  border-top: 1px dashed var(--borda);
  font-size: .74rem; color: var(--tinta-fraca); line-height: 1.45;
}
.pop-fechar {
  position: absolute; top: 8px; right: 9px;
  border: none; background: transparent; color: var(--tinta-fraca);
  font: inherit; font-size: 1rem; line-height: 1; cursor: pointer; padding: 2px 4px;
}
.pop-fechar:hover { color: var(--tinta); }

/* ---------- Tela de Configurações ----------------------------------------- */
.grade-config {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.campo-limite .campo-ajuda { margin-top: 4px; }
.faixa-limites {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 4px; font-size: .76rem; color: var(--tinta-fraca);
}
.tabela-pesos td.num, .tabela-pesos th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ===================== ETAPA 6 · ASSISTENTE IA ============================= */

/* Faixa pedagógica do guard de anonimização */
.ia-guard {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--borda); border-left: 3px solid var(--acento);
  background: var(--superficie); border-radius: var(--raio);
  padding: 14px 16px; box-shadow: var(--sombra); margin-bottom: 18px;
}
.ia-guard-icone {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--raio-sm);
  display: grid; place-items: center;
  background: var(--realce-bg); color: var(--acento-texto);
}
.ia-guard p { font-size: .84rem; color: var(--tinta-suave); }
.ia-guard strong { color: var(--tinta); }
.ia-fluxo {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: 8px; font-size: .72rem; color: var(--tinta-fraca);
  font-family: var(--fonte-mono); letter-spacing: .01em;
}
.ia-fluxo span {
  background: var(--superficie-2); border: 1px solid var(--borda);
  border-radius: var(--raio-selo); padding: 2px 9px;
}
.ia-fluxo b { color: var(--tinta-fraca); font-weight: 400; }

/* Painel de composição da chamada */
.ia-form { display: grid; gap: 14px; }
.ia-linha-campos {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px;
}
@media (max-width: 900px) { .ia-linha-campos { grid-template-columns: 1fr; } }

.ia-acao-desc {
  font-size: .8rem; color: var(--tinta-suave);
  background: var(--superficie-2); border: 1px solid var(--borda);
  border-radius: var(--raio-sm); padding: 9px 12px;
}
.ia-acao-desc b { color: var(--tinta); font-weight: 600; }

.ia-acoes-barra {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.ia-acoes-barra .espaco-flex { flex: 1; }

/* Botão "Ver o que será enviado" — destacado de propósito */
.botao-inspecionar {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: .84rem; font-weight: 600;
  color: var(--acento); background: var(--realce-bg);
  border: 1px dashed var(--acento); border-radius: var(--raio-sm);
  padding: 9px 14px; cursor: pointer;
  transition: background-color .15s ease, transform .1s ease;
}
.botao-inspecionar:hover { background: var(--atencao-fraco); }
.botao-inspecionar:active { transform: translateY(1px); }

/* Chave BYOK */
.ia-chave {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: .76rem; color: var(--tinta-fraca);
  border-top: 1px solid var(--borda); padding-top: 10px; margin-top: 4px;
}
.ia-chave .pilula { flex: 0 0 auto; }

/* Bloco do payload (read-only) */
.ia-payload {
  font-family: var(--fonte-mono); font-size: .74rem; line-height: 1.5;
  background: var(--superficie-2); border: 1px solid var(--borda);
  border-radius: var(--raio-sm); padding: 12px 14px;
  max-height: 340px; overflow: auto; white-space: pre;
  color: var(--tinta); tab-size: 2;
}
.ia-token { color: var(--acento-texto); font-weight: 600; }

/* Relatório da varredura */
.ia-varredura { display: grid; gap: 8px; margin-top: 14px; }
.ia-achado {
  display: flex; gap: 10px; align-items: flex-start;
  border-radius: var(--raio-sm); padding: 9px 12px; font-size: .8rem;
  border: 1px solid var(--borda); background: var(--superficie-2);
}
.ia-achado.capturado { border-left: 3px solid var(--ok); }
.ia-achado.bloqueado { border-left: 3px solid var(--critico); background: var(--critico-fraco); }
.ia-achado code {
  font-family: var(--fonte-mono); font-size: .75rem;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-selo); padding: 1px 5px;
}
.ia-achado-caminho { color: var(--tinta-fraca); font-size: .72rem; font-family: var(--fonte-mono); }

/* Mapa local token → real */
.ia-mapa { margin-top: 14px; }
.ia-mapa summary {
  cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--tinta-suave);
  padding: 6px 0;
}
.ia-mapa table { width: 100%; border-collapse: collapse; font-size: .78rem; margin-top: 6px; }
.ia-mapa td { padding: 5px 8px; border-bottom: 1px solid var(--borda); }
.ia-mapa td:first-child { font-family: var(--fonte-mono); color: var(--acento-texto); white-space: nowrap; width: 1%; }

/* Bloqueio de envio */
.ia-bloqueio {
  border: 1px solid var(--critico); border-left: 3px solid var(--critico);
  background: var(--critico-fraco); border-radius: var(--raio);
  padding: 14px 16px; margin-top: 16px;
}
.ia-bloqueio h4 { font-family: var(--fonte-display); font-size: 1rem; color: var(--critico-texto); margin-bottom: 4px; }
.ia-bloqueio p { font-size: .84rem; color: var(--tinta-suave); }

/* Erro de chamada */
.ia-erro {
  border: 1px solid var(--borda); border-left: 3px solid var(--critico);
  background: var(--superficie); border-radius: var(--raio);
  padding: 14px 16px; margin-top: 16px; box-shadow: var(--sombra);
}
.ia-erro h4 { font-size: .92rem; margin-bottom: 4px; color: var(--critico-texto); }
.ia-erro p { font-size: .84rem; color: var(--tinta-suave); }

/* Área de resultado */
.ia-resultado { margin-top: 20px; }
.ia-resultado-topo {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 10px;
}
.ia-resultado-topo .espaco-flex { flex: 1; }
.ia-texto {
  white-space: pre-wrap; font-size: .9rem; line-height: 1.62; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 18px 20px; box-shadow: var(--sombra);
}
.ia-nota-destoken {
  display: flex; gap: 8px; align-items: center;
  font-size: .76rem; color: var(--tinta-fraca); margin-top: 10px;
}
.ia-nota-destoken code { font-family: var(--fonte-mono); color: var(--acento-texto); }

/* Carregando */
.ia-carregando {
  display: flex; align-items: center; gap: 10px;
  font-size: .85rem; color: var(--tinta-suave); margin-top: 18px;
}
.ia-spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--borda); border-top-color: var(--acento);
  animation: ia-girar .8s linear infinite;
}
@keyframes ia-girar { to { transform: rotate(360deg); } }

/* Cartões de plano sugerido */
.ia-sugestoes { display: grid; gap: 12px; margin-top: 16px; }
.ia-sugestao {
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--superficie); padding: 14px 16px; box-shadow: var(--sombra);
}
.ia-sugestao-topo {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px;
}
.ia-sugestao-topo .espaco-flex { flex: 1; }
.ia-sugestao h4 { font-size: .92rem; font-weight: 600; }
.ia-sugestao dl { display: grid; gap: 6px; font-size: .85rem; }
.ia-sugestao dt {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-fraca); font-weight: 600;
}
.ia-sugestao dd { color: var(--tinta-suave); }

/* Comparativo motor × IA */
.ia-comparativo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px;
}
@media (max-width: 780px) { .ia-comparativo { grid-template-columns: 1fr; } }
.ia-coluna {
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--superficie); padding: 14px 16px; box-shadow: var(--sombra);
}
.ia-coluna h4 {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-fraca); font-weight: 700; margin-bottom: 10px;
}
.ia-coluna-nivel { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ia-coluna-pontos { font-size: .78rem; color: var(--tinta-fraca); }
.ia-coluna ul { list-style: none; display: grid; gap: 5px; font-size: .83rem; color: var(--tinta-suave); }
.ia-coluna li { display: flex; gap: 7px; }
.ia-coluna li::before { content: '·'; color: var(--acento); font-weight: 700; }
.ia-divergencia {
  margin-top: 14px; border: 1px solid var(--borda); border-left: 3px solid var(--acento);
  background: var(--realce-bg); border-radius: var(--raio-sm); padding: 12px 14px;
  font-size: .84rem; color: var(--tinta-suave);
}
.ia-aplicar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px;
}
.ia-aplicar select {
  font: inherit; font-size: .84rem; padding: 8px 10px;
  border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--superficie); color: var(--tinta);
}

/* ============================================================================
   ETAPA 7 · SAÍDAS .DOCX + PRESTAÇÃO DE CONTAS
   Só acrescenta. Nenhuma regra das etapas anteriores foi reescrita.
   ========================================================================== */

/* ---------- Cartões da tela "Documentos" ---------------------------------- */
.doc-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}
.doc-cartao {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--superficie); box-shadow: var(--sombra);
  padding: 16px 16px 14px;
}
.doc-cartao h4 {
  font-size: .98rem; font-weight: 650; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 8px;
}
.doc-cartao p { font-size: .84rem; color: var(--tinta-suave); line-height: 1.5; }
.doc-cartao .doc-cartao-acao { margin-top: auto; padding-top: 6px; }
.doc-cartao.bloqueado { opacity: .62; }
.doc-icone {
  width: 26px; height: 26px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--raio-sm); background: var(--acento-fraco); color: var(--acento-texto);
}

/* Faixa explicativa do topo (documentos são do SERVIÇO, não da Ellos) */
.doc-nota-marca {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--borda); border-left: 3px solid var(--acento);
  background: var(--superficie); border-radius: var(--raio);
  padding: 13px 15px; margin-bottom: 18px; box-shadow: var(--sombra);
  font-size: .85rem; color: var(--tinta-suave); line-height: 1.55;
}

/* ---------- Prévia do documento dentro do modal --------------------------- */
.doc-previa {
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--fundo); padding: 14px 16px; margin-top: 4px;
  max-height: 240px; overflow: auto;
  font-size: .82rem; line-height: 1.55; color: var(--tinta-suave);
  white-space: pre-wrap;
}
.doc-previa strong { color: var(--tinta); }

/* ---------- Prestação de contas -------------------------------------------- */
.contas-barra {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  margin-bottom: 16px;
}
.contas-barra .campo { min-width: 170px; }
.contas-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 18px;
}
.contas-metrica {
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--superficie); box-shadow: var(--sombra);
  padding: 13px 15px;
}
.contas-metrica .valor {
  font-size: 1.5rem; font-weight: 650; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.contas-metrica .rotulo {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-fraca); margin-top: 2px;
}
.contas-tabelas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.tabela-contas td.num, .tabela-contas th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-contas tfoot td { font-weight: 650; border-top: 1px solid var(--borda); }

/* Campo que ocupa a linha inteira dentro de .grade-campos */
.campo-largo { grid-column: 1 / -1; }

/* ---------- Barra de ações do documento (usada no resultado da IA) --------- */
.doc-acao-inline { display: inline-flex; align-items: center; gap: 6px; }

/* ============================================================================
   ETAPA 8 · AÇÕES COLETIVAS
   Só acrescenta. Nenhuma regra das etapas anteriores foi reescrita.
   ========================================================================== */

/* Chip do tipo da ação (oficina · grupo · ação comunitária).
   O campo é OPCIONAL: sem tipo, o chip cai no neutro em vez de sumir. */
.chip-tipo {
  display: inline-flex;
  align-items: center;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 2px 10px;
  border-radius: var(--raio-selo);
  border: 1px solid var(--borda);
  background: var(--superficie-2);
  color: var(--tinta-suave);
  white-space: nowrap;
}
.chip-tipo.tipo-oficina     { color: var(--acento-texto);   border-color: var(--acento-borda);  background: var(--acento-fraco); }
.chip-tipo.tipo-grupo       { color: var(--ok-texto);       border-color: var(--ok-borda);  background: var(--ok-fraco); }
.chip-tipo.tipo-comunitaria { color: var(--vinho-texto); border-color: var(--vinho-borda);  background: var(--vinho-fraco); }

/* ---------- Encontros (atendimentos coletivos) ---------------------------- */
.encontros { display: grid; gap: 12px; }
.encontro {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 14px 16px;
  border-left: 3px solid var(--acento);
}
.encontro-topo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  margin-bottom: 7px;
}
.encontro-data {
  font-family: var(--fonte-mono);
  font-size: .72rem;
  color: var(--tinta-fraca);
}
.encontro-sintese { color: var(--tinta-suave); font-size: .92rem; }
.encontro-rodape {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 11px;
}
.encontro-presentes { display: flex; flex-wrap: wrap; gap: 5px; }
.presente-selo {
  font-size: .72rem;
  padding: 2px 9px;
  border-radius: var(--raio-selo);
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  color: var(--tinta-suave);
}

/* ---------- Lista de presença (modal do encontro) ------------------------- */
.presenca-barra { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.presenca-lista {
  display: grid;
  gap: 4px;
  max-height: 250px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--superficie-2);
}
.presenca-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 10px;
  border-radius: var(--raio-sm);
  cursor: pointer;
  background: var(--superficie);
  border: 1px solid transparent;
}
.presenca-item:hover { border-color: var(--borda); }
.presenca-item.marcada { background: var(--acento-fraco); border-color: var(--acento-borda); }
.presenca-item input { accent-color: var(--acento); width: 16px; height: 16px; flex: none; }
.presenca-item .sub-linha { display: block; }

/* A busca de pessoa dentro do modal de vínculo ocupa a largura toda. */
.busca-modal { max-width: none; margin-bottom: 12px; }


/* ============================================================================
   FASE 4 · MODO ONLINE — login, usuário logado e ajustes da migração.
   Bloco ANEXADO ao fim do arquivo original (nenhuma regra acima foi tocada).
   ========================================================================== */

/* O botão "Recarregar dados de exemplo" pertence ao modo local: no modo
   online o seed é do servidor. Ele nasce dentro de renderVisaoGeral — função
   de view que a regra de ouro 1 proíbe alterar —, então sai do caminho de
   execução por aqui (decisão registrada em DECISOES.md). */
#botao-seed { display: none; }

/* ---------- Usuário logado (sidebar) --------------------------------------- */
.sidebar-usuario {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--sidebar-borda);
  background: var(--sidebar-superficie);
  border-radius: var(--raio-sm);
}
.sidebar-usuario[hidden] { display: none; }
.sidebar-usuario .perfil-avatar {
  background: var(--acento-fraco);
  color: var(--acento-texto);
}
.usuario-textos { display: flex; flex-direction: column; min-width: 0; }
.usuario-nome {
  font-size: var(--txt-xs);
  font-weight: var(--peso-forte);
  color: var(--sidebar-tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.usuario-funcao {
  font-family: var(--fonte-mono);
  font-size: .66rem;
  color: var(--sidebar-tinta-fraca);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.botao-sair {
  margin-left: auto;
  flex: none;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--sidebar-borda);
  background: transparent;
  color: var(--sidebar-tinta-fraca);
  border-radius: var(--raio-sm);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.botao-sair:hover { color: var(--acento-texto); border-color: var(--acento); background: var(--acento-fraco); }
.botao-sair:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* ---------- Tela de login (reaproveita o cartão do gate) ------------------- */
.login-formulario { margin-top: 8px; }
.login-formulario input[type="email"],
.login-formulario input[type="password"] {
  border: 1px solid var(--borda);
  background: var(--fundo);
  color: var(--tinta);
  border-radius: var(--raio-sm);
  padding: 10px 12px;
  font: inherit;
  font-size: .92rem;
  width: 100%;
}
.login-formulario input:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 1px;
}
.login-erro {
  margin-top: 14px;
  color: var(--critico-texto);
  font-size: .82rem;
}
.login-erro[hidden] { display: none; }
.login-entrar {
  width: 100%;
  justify-content: center;
  margin-top: 18px;
}
.login-esqueci {
  margin-top: 14px;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: .8rem;
  color: var(--tinta-suave);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.login-esqueci:hover { color: var(--acento-texto); }
.login-esqueci:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.login-esqueci-nota[hidden] { display: none; }

/* ============================================================================
   FASE 5 · AUDITORIA — a view autorizada como exceção. Reaproveita os tokens
   e componentes existentes (abas, tabela, chip, painel); só o que é novo
   desta tela mora aqui.
   ========================================================================== */

/* Paginação da trilha */
.paginacao {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

/* Sub-abas da gestão de arquivados (uma coleção por vez) */
.abas-secundarias {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 16px;
}
.aba-secundaria {
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--tinta-suave);
  border-radius: var(--raio-sm, 8px);
  padding: 6px 12px;
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
}
.aba-secundaria:hover { color: var(--tinta); border-color: var(--tinta-fraca); }
.aba-secundaria:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.aba-secundaria[aria-selected="true"] {
  color: var(--tinta);
  border-color: var(--acento);
  background: var(--superficie-2);
}

/* Botão primário na variante perigo (rotina de exclusão física) */
.botao-primario.perigo {
  background: var(--critico-solido);
  border-color: var(--critico-solido);
  color: var(--critico-solido-tinta);
}
.botao-primario.perigo:hover { filter: brightness(1.06); }

/* Modal "histórico deste registro": linha do tempo compacta */
.hist-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 55vh;
  overflow-y: auto;
}
.hist-item {
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm, 8px);
  padding: 10px 12px;
  background: var(--superficie);
}
.hist-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.hist-detalhe { font-size: .85rem; color: var(--tinta-suave); }

/* ============================================================================
   FOCO E ESTADOS (Fase 9, bloco 5) — linha de base de acessibilidade.
   Especificidade ZERO (:where): as regras de foco por componente continuam
   vencendo; isto só garante que NADA interativo fique sem um anel de foco
   visível (o token --foco tem ≥3:1 nos dois temas — WCAG 2.4.11/1.4.11).
   ========================================================================== */
:where(a[href], button, input, select, textarea, summary,
       [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}
/* Estado desabilitado consistente (controles desabilitados são isentos de
   contraste — WCAG 1.4.3). Zero especificidade: um estilo próprio prevalece. */
:where(button, input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: .55;
}

/* Movimento: o painel é ferramenta de trabalho, não vitrine. Toda transição
   fica na faixa de 120–250ms, só em `opacity`/`transform`/cor, e some inteira
   sob prefers-reduced-motion (WCAG 2.3.3). O `!important` é deliberado: é a
   última palavra do arquivo sobre movimento e precisa vencer regras por
   componente que declararam a sua própria duração. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   Fase 11 · View "Serviços e Unidades" (tela administrativa nova, aditiva).
   Só estilo; usa os tokens de tema, então acompanha claro/escuro.
   ========================================================================== */
.tinta-fraca { color: var(--tinta-fraca); }

.servico-cabecalho {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}

.unidades-lista { display: flex; flex-direction: column; gap: 10px; }

.unidade-linha {
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--fundo);
  padding: 12px 14px;
}
.unidade-cabecalho {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}

.lotacao {
  margin-top: 10px; display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px; font-size: .9rem;
}
.lotacao-rotulo { color: var(--tinta-fraca); font-size: .82rem; }

.vinculo-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 6px 3px 10px;
  border: 1px solid var(--borda); border-radius: var(--raio-selo);
  background: var(--superficie); font-size: .85rem;
}
.vinculo-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: var(--raio-selo);
  border: 0; background: transparent; cursor: pointer;
  color: var(--tinta-fraca); font-size: 1.05rem; line-height: 1;
}
.vinculo-x:hover { color: var(--critico-texto, var(--tinta)); }