/*
  Estilo do Compliance Officer Cardiolife — CSS puro, um arquivo só, sem framework, sem build e
  sem nenhuma folha remota.

  ------------------------------------------------------------------------------------------
  A LINGUAGEM VISUAL (F9 — identidade), em seis decisões que explicam quase todas as regras:

  1) TODA COR SAI DE TOKEN. Não existe uma cor literal fora dos dois blocos de token abaixo —
     nem num `box-shadow`, nem num `outline`, nem num `::selection`. É o que faz o tema escuro
     existir sem um segundo arquivo (o escuro só REDEFINE os mesmos nomes), e o que impede a
     décima tela de nascer com um roxo um grau diferente das outras nove. A suíte varre este
     arquivo e falha se achar `#hex`, `rgb(` ou `hsl(` fora dos blocos.

  2) DOIS BLOCOS DE TEMA, E SÓ DOIS. `:root` é o claro; `:root[data-tema="escuro"]` é o
     escuro. Não há um terceiro bloco em `prefers-color-scheme` de propósito: quem resolve a
     preferência do sistema é o `app.js`, que escreve o atributo antes da primeira pintura.
     Com três blocos, um token acrescentado no claro e esquecido num dos escuros produziria uma
     tela quebrada só para parte das pessoas — o defeito que ninguém vê no próprio computador.

  3) ROXO INSTITUCIONAL, VERDE-OLIVA E DOURADO — nunca azul. O roxo (`--roxo`) é a autoridade:
     menu lateral, cabeçalho das telas, botão principal. O verde-oliva (`--verde`) é a
     conformidade: o que está em dia, o que foi aprovado. O dourado (`--ambar`) é o detalhe
     premium e o "atenção" que ainda não é urgência. O terracota (`--vermelho`) e o vinho
     (`--critico`) são o risco. Nada decorativo usa essas cores.

  4) A COR SEMÂNTICA MORA NA BORDA, NO PONTO E NA ETIQUETA — nunca no cartão inteiro. Um painel
     em que o cartão inteiro fica vermelho ensina a clínica a ignorar o vermelho; uma faixa de
     4 px na lateral esquerda, um ponto de 10 px e uma cápsula com a PALAVRA dentro dizem a
     mesma coisa sem gritar. E toda marca colorida traz o texto ao lado ("Vencido há 3 dias",
     "Concluído"): quem não distingue vermelho de verde continua lendo o painel.

  5) FORMA ARREDONDADA, SOMBRA DIFUSA, TRANSIÇÃO CURTA. Cartões em 18 px, modais e painéis em
     24 px, campos e botões em 12–14 px, filtros e etiquetas em cápsula, avatares e indicadores
     em círculo. A separação entre superfícies continua sendo uma linha de 1 px; a sombra existe
     onde alguma coisa de fato FLUTUA (cartão sobre o fundo, diálogo, aviso) e é sempre suave.

  6) DUAS FAMÍLIAS, CADA UMA NO SEU LUGAR. Serifada (Cormorant Garamond) nos títulos e nas áreas
     institucionais — o nome do produto, o título de cada tela, o cabeçalho do relatório que vai
     ao auditor. Sem serifa (Inter) em menu, formulário, tabela e indicador, que é onde a
     legibilidade em tela densa vale mais do que o gesto. As duas moram em `public/fontes/`,
     nunca num CDN: uma folha de fonte remota entrega o IP de quem abre o painel de conformidade
     da clínica a um terceiro que ninguém contratou — e a CSP (`default-src 'self'`) recusaria.
  ------------------------------------------------------------------------------------------
*/

/* ================================================================= fontes locais */

/* Subconjunto `latin` (cobre o português inteiro) na versão VARIÁVEL: um arquivo por família
   cobre todos os pesos usados na tela. Licença e origem em `public/fontes/LICENCAS.md`.
   `font-display: swap` para o texto aparecer na primeira pintura, na pilha de sistema, e trocar
   quando a fonte chegar — nunca uma tela em branco esperando um arquivo. */

@font-face {
  font-family: 'Inter Cardiolife';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fontes/inter-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Cardiolife';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fontes/cormorant-garamond-latin.woff2') format('woff2');
}

/* ================================================================ tokens: tema claro */

:root {
  color-scheme: light;

  /* --- superfícies e traços ---------------------------------------------------------------
     `--fundo` é o chão da aplicação (um off-white morno, e não um cinza-azulado); `--papel` é
     toda caixa apoiada nele; `--papel-2` é a superfície REBAIXADA (cabeçalho de tabela, linha
     de lista dentro de uma caixa) e `--papel-3` é o degrau de baixo (selo neutro, campo
     desabilitado). Quatro níveis é o limite: com cinco, ninguém acerta qual usar. */
  --fundo: #f7f5f2;
  --papel: #ffffff;
  --papel-2: #f3f0f5;
  --papel-3: #e9e4ee;
  --linha: #e5dfe8;
  --linha-forte: #d3cadb;

  /* --- texto ---
     `--tinta-tenue` é o ÚNICO que não fecha 4.5:1, e existe só para placeholder e para
     desenho (traço separador, marca-d'água). Nunca para informação — a suíte não o mede
     porque ele não carrega informação nenhuma. */
  --tinta: #1c1c1c;
  --tinta-media: #4a4550;
  --tinta-fraca: #6b6770;
  --tinta-tenue: #9a94a2;

  /* --- ROXO: a cor institucional ---
     Cinco papéis, e a divisão vale para as quatro escalas semânticas abaixo: `--x` é a cor
     cheia que carrega `--sobre-x` (botão, selo do menu), `--x-forte` é o degrau escuro do
     hover, `--x-fraco` é a superfície tingida, `--x-borda` é a borda dela e `--x-tinta` é a
     tinta que se lê sobre o papel E sobre o tingido. */
  --roxo: #594579;
  --roxo-forte: #3d2f54;
  --roxo-fraco: #f1edf5;
  --roxo-borda: #d8cde6;
  --roxo-tinta: #4c3a68;
  --sobre-roxo: #ffffff;

  /* --- o semáforo: as três cores que a clínica lê de longe ---
     Terracota para "exige atenção agora", dourado para "vence em até 14 dias", verde-oliva
     para "em dia". `--x` é a MARCA (ponto, faixa lateral, segmento do gráfico) e não recebe
     texto por cima; quem recebe texto é `--x-forte`, que é escuro o bastante. */
  --vermelho: #b85c4b;
  --vermelho-forte: #9a4032;
  --vermelho-fraco: #fbf0ed;
  --vermelho-borda: #ebc9c1;
  --vermelho-tinta: #8e3a2c;
  --sobre-vermelho: #ffffff;

  --ambar: #c29765;
  --ambar-forte: #8a6234;
  --ambar-fraco: #f7efe5;
  --ambar-borda: #e6d2b4;
  --ambar-tinta: #7a5527;
  --sobre-ambar: #ffffff;

  --verde: #6b804c;
  --verde-forte: #53663a;
  --verde-fraco: #eff3e9;
  --verde-borda: #cbd9b6;
  --verde-tinta: #455732;
  --sobre-verde: #ffffff;

  /* --- as MARCAS de risco e de estado que não têm escala própria ---
     Só ponto, faixa lateral e contorno: nenhuma delas recebe texto por cima, e por isso
     nenhuma precisa de um par `--sobre-`. O vinho é a severidade crítica (mais grave que o
     terracota, e visivelmente outra coisa); o cinza-roxo é "pendente, ninguém pegou ainda"; o
     ardósia é "arquivado / não se aplica". */
  --critico: #7f1d1d;
  --neutro: #7a7182;
  --arquivado: #64748b;

  /* --- as ÁREAS (`src/compliance.js`), na ordem da auditoria ---
     Seis cores fixas, uma por área, usadas no gráfico da distribuição, no ponto da legenda e
     na faixa lateral da ficha. A cor NUNCA aparece sozinha: o nome, o total e o percentual
     estão escritos ao lado em toda ocorrência. */
  --area-seguranca: #594579;
  --area-lgpd: #826aa2;
  --area-juridico: #6b804c;
  --area-regulatorio: #8fa66a;
  --area-fiscal: #c29765;
  --area-tecnologia: #3d2f54;

  /* --- o MENU LATERAL, que é a única superfície roxa cheia do sistema ---
     Ele tem tokens próprios porque nada mais na tela tem texto claro sobre fundo escuro, e
     porque o item ativo mora numa cápsula com fundo próprio. */
  --barra-fundo: #3d2f54;
  --barra-tinta: #f5f2f9;
  --barra-tinta-media: #c6bad9;
  --barra-linha: #4e3d69;
  --barra-ativo-fundo: #594579;
  --barra-ativo-tinta: #ffffff;

  /* --- estados de interação --- */
  --veu: rgba(28, 21, 41, .48);          /* cortina atrás do diálogo e da gaveta */
  --sombra: 0 1px 2px rgba(61, 47, 84, .05), 0 10px 30px rgba(61, 47, 84, .07);
  --sombra-alta: 0 2px 6px rgba(61, 47, 84, .08), 0 24px 60px rgba(61, 47, 84, .16);
  --sombra-aviso: 0 8px 28px rgba(61, 47, 84, .20);
  --foco: #594579;                        /* anel de foco: sempre visível, nunca removido */
  --realce: rgba(89, 69, 121, .10);       /* linha sob o cursor, item de lista selecionado */
  --barra-rolagem: #cbc2d6;

  /* --- a folha impressa (F6) ---
     O relatório de conformidade é o documento que a clínica entrega ao auditor, e ele sai numa
     impressora ou num "salvar como PDF". Os três tokens abaixo têm o MESMO valor nos dois temas
     de propósito: o papel é branco independentemente do tema que a pessoa escolheu na tela, e um
     relatório impresso a partir do tema escuro gastaria um cartucho para produzir uma folha
     ilegível. Eles existem como token, e não como cor solta dentro do `@media print`, porque a
     regra do arquivo é uma só: nenhuma cor literal fora destes dois blocos. */
  --impresso-fundo: #ffffff;
  --impresso-tinta: #000000;
  --impresso-linha: #767676;

  /* --- geometria, ritmo e tipografia (não são cores; ficam aqui para o resto do arquivo não
     inventar). Os raios sobem em degraus com nome: `p` para o que é pequeno e denso, o padrão
     para campo e botão, `g` para cartão, `xg` para diálogo e painel, `capsula` para etiqueta,
     filtro e indicador. --- */
  --raio-p: 10px;
  --raio: 13px;
  --raio-g: 18px;
  --raio-xg: 24px;
  --raio-capsula: 999px;

  --esp-1: 6px;
  --esp-2: 10px;
  --esp-3: 16px;
  --esp-4: 22px;

  --fonte: 'Inter Cardiolife', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: 'Cormorant Cardiolife', Georgia, "Times New Roman", "Liberation Serif", serif;
  --fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --transicao: 160ms cubic-bezier(.4, 0, .2, 1);
  --barra-largura: 248px;
  --barra-largura-min: 68px;
}

/* ================================================================ tokens: tema escuro */

:root[data-tema="escuro"] {
  color-scheme: dark;

  --fundo: #14111a;
  --papel: #1c1826;
  --papel-2: #241f30;
  --papel-3: #2f2840;
  --linha: #322b43;
  --linha-forte: #463c5c;

  --tinta: #ede9f3;
  --tinta-media: #c4bcd1;
  --tinta-fraca: #a79eb6;
  --tinta-tenue: #7b7289;

  --roxo: #a98fd0;
  --roxo-forte: #c2a9e4;
  --roxo-fraco: #241c33;
  --roxo-borda: #453663;
  --roxo-tinta: #c3aae6;
  --sobre-roxo: #16101f;

  --vermelho: #d98773;
  --vermelho-forte: #e9a08d;
  --vermelho-fraco: #2b1815;
  --vermelho-borda: #5b3227;
  --vermelho-tinta: #e9a190;
  --sobre-vermelho: #231009;

  --ambar: #d6ab77;
  --ambar-forte: #e6c08f;
  --ambar-fraco: #2a2015;
  --ambar-borda: #57411f;
  --ambar-tinta: #e4be8d;
  --sobre-ambar: #241708;

  --verde: #9bb474;
  --verde-forte: #b3c98f;
  --verde-fraco: #1a2216;
  --verde-borda: #37492a;
  --verde-tinta: #b0c78c;
  --sobre-verde: #101806;

  --critico: #e2705f;
  --neutro: #a79bb6;
  --arquivado: #94a3b8;

  --area-seguranca: #a98fd0;
  --area-lgpd: #c0a8dd;
  --area-juridico: #9bb474;
  --area-regulatorio: #b7c993;
  --area-fiscal: #d6ab77;
  --area-tecnologia: #8571ab;

  --barra-fundo: #1a1526;
  --barra-tinta: #ede9f3;
  --barra-tinta-media: #b0a6c2;
  --barra-linha: #2e2542;
  --barra-ativo-fundo: #3a2d52;
  --barra-ativo-tinta: #f3eefa;

  --veu: rgba(6, 4, 10, .66);
  --sombra: 0 1px 2px rgba(0, 0, 0, .40), 0 10px 30px rgba(0, 0, 0, .46);
  --sombra-alta: 0 2px 6px rgba(0, 0, 0, .46), 0 24px 60px rgba(0, 0, 0, .60);
  --sombra-aviso: 0 8px 28px rgba(0, 0, 0, .58);
  --foco: #c3aae6;
  --realce: rgba(169, 143, 208, .14);
  --barra-rolagem: #463c5c;

  /* Os mesmos valores do tema claro, e não uma versão escura deles: ver a nota lá em cima. */
  --impresso-fundo: #ffffff;
  --impresso-tinta: #000000;
  --impresso-linha: #767676;
}

/* ==================================================================== base */

* { box-sizing: border-box; }

/* `hidden` PRECISA vencer o `display` das classes. Metade da casca (a cortina, o login, a
   aplicação, o diálogo, a barra de progresso do envio) é escondida por atributo, e uma regra
   como `.modal-fundo { display: grid }` derrotaria o `hidden` do UA em silêncio — a tela
   apareceria por cima de tudo sem ninguém ter pedido. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Os títulos são SERIFADOS e maiores do que a régua de um painel comum: é onde a identidade
   jurídica aparece sem custar legibilidade, porque nenhum deles é texto corrido. */
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; }
h1 {
  font-family: var(--fonte-titulo);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: .01em;
}
h2 { font-size: 16px; }
h3 { font-size: 14px; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--roxo-tinta); text-decoration: none; }
a:hover { text-decoration: underline; }

/* O FOCO NUNCA É REMOVIDO. Quem navega por teclado precisa saber onde está, e um
   `outline: none` "para ficar limpo" é a forma mais rápida de tornar um sistema inteiro
   inutilizável para parte das pessoas. */
:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: var(--raio-p);
}

::selection { background: var(--realce); }

* { scrollbar-color: var(--barra-rolagem) transparent; scrollbar-width: thin; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.pular {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 60;
  background: var(--roxo);
  color: var(--sobre-roxo);
  padding: 10px 18px;
  border-radius: var(--raio-capsula);
}
.pular:focus { left: 8px; }

/* ================================================================== cortina */

.cortina {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: var(--fundo);
}
.cortina-caixa { display: grid; gap: 14px; justify-items: center; color: var(--tinta-media); }
.girador {
  width: 30px;
  height: 30px;
  border: 2px solid var(--linha-forte);
  border-top-color: var(--roxo);
  border-radius: 50%;
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.aviso-noscript {
  padding: 16px;
  background: var(--ambar-fraco);
  color: var(--ambar-tinta);
  border-bottom: 1px solid var(--ambar-borda);
  text-align: center;
}

/* =================================================================== login */

/* O cartão de entrada é a primeira coisa que a clínica vê, e a única tela em que o produto se
   apresenta: selo, nome em serifada, um fio dourado embaixo. O resto é formulário — quem está
   entrando quer entrar. */

.login {
  min-height: 100%;
  display: grid;
  place-content: center;
  gap: 20px;
  padding: 28px;
}
.login-cartao {
  width: min(430px, 92vw);
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-xg);
  padding: 32px 30px;
  box-shadow: var(--sombra-alta);
}
.login-sub { color: var(--tinta-media); margin: 14px 0 22px; }
.login-nota {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--linha);
  color: var(--tinta-fraca);
  font-size: 12.5px;
}
.login-rodape { text-align: center; color: var(--tinta-fraca); font-size: 12.5px; }
.login-confidencial {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 11px 14px;
  border-radius: var(--raio-p);
  background: var(--roxo-fraco);
  border: 1px solid var(--roxo-borda);
  color: var(--roxo-tinta);
  font-size: 12.5px;
}
.login-confidencial-icone { display: inline-flex; flex: none; }
.login form { display: grid; gap: 16px; }

.marca { display: flex; align-items: center; gap: 12px; color: var(--tinta); }
.marca:hover { text-decoration: none; }
.marca-selo {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--roxo);
  color: var(--sobre-roxo);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .06em;
  box-shadow: var(--sombra);
}
.marca-texto {
  font-family: var(--fonte-titulo);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
}
.marca-texto b { font-weight: 700; }
/* A marca GRANDE do cartão de entrada. Ela quebra em duas linhas quando precisa: com
   `nowrap` (que a barra lateral usa, porque lá o corte por reticências é o certo) o nome
   atravessava a borda do cartão numa tela de 360 px. */
.marca-grande { font-size: 17px; flex-wrap: wrap; }
.marca-grande .marca-selo { width: 46px; height: 46px; font-size: 17px; }
.marca-grande .marca-texto { font-size: 24px; white-space: normal; }

/* O fio dourado: o detalhe premium do cartão de entrada.

   `flex: 0 0 100%` com `max-width` porque a marca é um flex container — sem a base de 100% o
   pseudo-elemento vira um terceiro item NA MESMA LINHA e o fio some ao lado do nome. */
.marca-grande::after {
  content: '';
  flex: 0 0 100%;
  max-width: 56px;
  height: 3px;
  margin: 6px 0 0 58px;
  border-radius: var(--raio-capsula);
  background: var(--ambar);
}

/* ================================================================== campos */

.campo { display: grid; gap: 6px; }
.campo-linha { display: flex; align-items: center; gap: 10px; }
.campo-rotulo { font-size: 12.5px; font-weight: 500; color: var(--tinta-media); }
.campo-dica { font-size: 12px; color: var(--tinta-fraca); }

/* O asterisco do campo obrigatório é DOURADO e vem com `aria-hidden`: quem usa leitor de tela
   recebe o `required` do próprio campo, e quem olha vê antes de preencher — e não depois de o
   servidor recusar. */
.campo-obrigatorio { color: var(--ambar-tinta); font-weight: 700; margin-left: 3px; }

input[type="text"], input[type="password"], input[type="email"], input[type="date"],
input[type="search"], input[type="number"], select, textarea {
  width: 100%;
  font: inherit;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 9px 13px;
  min-height: 40px;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover,
input[type="date"]:hover, input[type="search"]:hover, select:hover, textarea:hover {
  border-color: var(--roxo-borda);
}
textarea { min-height: 96px; resize: vertical; line-height: 1.55; border-radius: var(--raio-p); }
input::placeholder, textarea::placeholder { color: var(--tinta-tenue); }
input:disabled, select:disabled, textarea:disabled {
  background: var(--papel-2);
  color: var(--tinta-media);
  cursor: not-allowed;
}
input[type="file"] {
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio);
  padding: 14px;
  background: var(--papel-2);
  width: 100%;
}
input[type="checkbox"] { accent-color: var(--roxo); width: 16px; height: 16px; }

.erro-inline {
  color: var(--vermelho-tinta);
  background: var(--vermelho-fraco);
  border: 1px solid var(--vermelho-borda);
  border-left: 3px solid var(--vermelho);
  border-radius: var(--raio-p);
  padding: 10px 13px;
  font-size: 13px;
}

/* ================================================================== botões */

.botao {
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--raio);
  border: 1px solid var(--linha-forte);
  background: var(--papel);
  color: var(--tinta);
  padding: 9px 17px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  transition: background var(--transicao), border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.botao:hover { background: var(--papel-2); border-color: var(--roxo-borda); }
.botao:active { transform: translateY(1px); }
.botao:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.botao-primario {
  background: var(--roxo);
  border-color: var(--roxo);
  color: var(--sobre-roxo);
  box-shadow: var(--sombra);
}
.botao-primario:hover { background: var(--roxo-forte); border-color: var(--roxo-forte); }
.botao-perigo { background: var(--vermelho-forte); border-color: var(--vermelho-forte); color: var(--sobre-vermelho); }
.botao-perigo:hover { background: var(--vermelho-tinta); border-color: var(--vermelho-tinta); }
.botao-largo { width: 100%; }
.botao-p {
  padding: 5px 13px;
  min-height: 30px;
  font-size: 12.5px;
  border-radius: var(--raio-capsula);
}

.botao-icone {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--tinta-media);
  padding: 0;
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.botao-icone:hover { background: var(--roxo-fraco); color: var(--roxo-tinta); border-color: var(--roxo-borda); }

.icone { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icone-p { width: 15px; height: 15px; }
.icone-g { width: 22px; height: 22px; }

/* ============================================================ aplicação */

/* `minmax(0, 1fr)` e não `1fr`: a coluna de conteúdo precisa poder ENCOLHER. Com `1fr` o
   tamanho mínimo automático é o do conteúdo, e uma linha de lista com texto sem quebra
   (`Próximos`, `Vencidos`, a trilha) estica a coluna inteira — a página ganha rolagem
   horizontal e o `text-overflow: ellipsis` nunca chega a agir. É o mesmo motivo em toda grade
   deste arquivo que tem uma coluna flexível. */
.app { display: grid; grid-template-columns: var(--barra-largura) minmax(0, 1fr); min-height: 100%; }
.app[data-barra="recolhida"] { grid-template-columns: var(--barra-largura-min) minmax(0, 1fr); }

/* O MENU LATERAL é a superfície roxa do sistema: fundo institucional, opções em cápsula e o
   item ativo dentro da sua própria cápsula, com um fio dourado à esquerda. */
.barra {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 12px;
  background: var(--barra-fundo);
  color: var(--barra-tinta);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.barra .marca { color: var(--barra-tinta); }
.barra .marca-selo {
  background: var(--barra-ativo-fundo);
  color: var(--barra-ativo-tinta);
  border: 1px solid var(--barra-linha);
}
.barra-topo { padding: 4px 8px 14px; border-bottom: 1px solid var(--barra-linha); overflow: hidden; }
.barra .marca { min-width: 0; }
.barra .marca-texto { font-size: 17px; overflow: hidden; text-overflow: ellipsis; }
/* `align-content: start` porque o `flex: 1` faz o grid ocupar a altura toda da barra: sem
   isto as opções ficam espalhadas de cima a baixo, com um vão enorme entre elas. */
.menu { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 3px; flex: 1; }
.menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--raio-capsula);
  color: var(--barra-tinta-media);
  font-weight: 500;
  transition: background var(--transicao), color var(--transicao);
}
.menu-item:hover { background: var(--barra-ativo-fundo); color: var(--barra-tinta); text-decoration: none; }
.menu-item.ativo { background: var(--barra-ativo-fundo); color: var(--barra-ativo-tinta); font-weight: 600; }
/* O fio dourado do item ativo: o segundo sinal, para quem não distingue o roxo da cápsula. */
.menu-item.ativo::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: var(--raio-capsula);
  background: var(--ambar);
}
.menu-rotulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-selo {
  margin-left: auto;
  min-width: 22px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: var(--raio-capsula);
  background: var(--vermelho-forte);
  color: var(--sobre-vermelho);
}

.barra-rodape { display: grid; gap: 10px; border-top: 1px solid var(--barra-linha); padding-top: 14px; }
.rodape-nome {
  color: var(--barra-tinta-media);
  font-size: 12.5px;
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rodape-nome:hover { color: var(--barra-tinta); }
.barra-acoes { display: flex; gap: 4px; padding: 0 2px; }
.barra .botao-icone { color: var(--barra-tinta-media); }
.barra .botao-icone:hover { background: var(--barra-ativo-fundo); color: var(--barra-ativo-tinta); border-color: var(--barra-linha); }

.app[data-barra="recolhida"] .marca-texto,
.app[data-barra="recolhida"] .menu-rotulo,
.app[data-barra="recolhida"] .rodape-nome { display: none; }
.app[data-barra="recolhida"] .barra-acoes { flex-direction: column; }
.app[data-barra="recolhida"] .menu-item { justify-content: center; padding: 10px 0; }
.app[data-barra="recolhida"] .menu-item.ativo::before { display: none; }

.botao-barra { display: none; }
.barra-veu { display: none; }

.conteudo { padding: 30px 34px 72px; max-width: 1360px; width: 100%; min-width: 0; }

/* ============================================================== cabeçalho de tela */

/* O cabeçalho de cada tela é a "área institucional": título serifado em roxo, fio dourado
   embaixo e o subtítulo explicando o que a tela responde. */
.tela-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--linha);
}
.tela-titulo { display: grid; gap: 6px; position: relative; }
.tela-titulo h1 { color: var(--roxo-tinta); }
.tela-titulo h1::after {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 8px;
  border-radius: var(--raio-capsula);
  background: var(--ambar);
}
.sub { color: var(--tinta-media); font-size: 13.5px; max-width: 78ch; }
.sub-fraco { color: var(--tinta-fraca); font-size: 12.5px; max-width: 78ch; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; }

.abas { display: flex; gap: 6px; margin-bottom: 22px; flex-wrap: wrap; }
.aba {
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-capsula);
  color: var(--tinta-media);
  padding: 8px 18px;
  min-height: 36px;
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.aba:hover { color: var(--roxo-tinta); border-color: var(--roxo-borda); }
.aba[aria-selected="true"] {
  background: var(--roxo);
  border-color: var(--roxo);
  color: var(--sobre-roxo);
  font-weight: 600;
}

/* ================================================================== caixas */

.caixa {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: 22px;
  box-shadow: var(--sombra);
}
.caixa + .caixa { margin-top: 18px; }
.caixa-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tinta-fraca);
}
/* O selo redondo que leva o ícone de escudo, cadeado ou documento no título da caixa. */
.secao-selo {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--roxo-fraco);
  color: var(--roxo-tinta);
  border: 1px solid var(--roxo-borda);
}
.secao-selo-dourado { background: var(--ambar-fraco); color: var(--ambar-tinta); border-color: var(--ambar-borda); }
.secao-selo-verde { background: var(--verde-fraco); color: var(--verde-tinta); border-color: var(--verde-borda); }

/* As grades de UMA coluna declaram `minmax(0, 1fr)` pelo motivo do `.app`: sem isso, o filho
   mais largo (uma linha de trilha, um título sem quebra) define a largura da grade inteira. */
.grade,
.ficha,
.evidencias,
.linha-tempo,
.distribuicao-legenda,
.lista-prazo,
.trilha,
.envio,
.modal-corpo,
.campo { grid-template-columns: minmax(0, 1fr); }

.grade { display: grid; gap: 18px; align-items: start; }
.grade-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grade-3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.vazio { color: var(--tinta-fraca); padding: 14px 2px; font-size: 13px; }

/* Os ÚNICOS utilitários do arquivo. Existem porque a CSP proíbe o atributo `style`, e sem
   eles cada ajuste de respiro viraria uma classe nova com nome de tela. Seis, e param aqui. */
.espaco-topo { margin-top: 18px; }
.nota { margin-top: 12px; }
.nota-baixo { margin-bottom: 14px; }
.acoes-fim { justify-content: flex-end; }
.selos-inicio { justify-content: flex-start; }
.tela-topo-interno { margin-bottom: 16px; }

/* ============================================================== painel */

/* O SEMÁFORO em três cartões. A cor mora na FAIXA LATERAL, no ponto e no número — o cartão
   continua branco. Pintar o cartão inteiro de vermelho ensina a clínica a não olhar. */
.semaforo { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); }
.farol {
  border: 1px solid var(--linha);
  border-left: 4px solid var(--linha-forte);
  border-radius: var(--raio-g);
  padding: 20px 22px;
  display: grid;
  gap: 6px;
  background: var(--papel);
  box-shadow: var(--sombra);
}
.farol-numero { font-family: var(--fonte-titulo); font-size: 52px; font-weight: 600; line-height: 1; }
.farol-nome { font-weight: 600; display: flex; align-items: center; gap: 9px; }
.farol-dica { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--tinta-fraca); }
.farol-dica .icone { flex: none; }
.farol-vermelho { border-left-color: var(--vermelho); }
.farol-vermelho .farol-numero, .farol-vermelho .farol-nome { color: var(--vermelho-tinta); }
.farol-ambar { border-left-color: var(--ambar); }
.farol-ambar .farol-numero, .farol-ambar .farol-nome { color: var(--ambar-tinta); }
.farol-verde { border-left-color: var(--verde); }
.farol-verde .farol-numero, .farol-verde .farol-nome { color: var(--verde-tinta); }

.ponto { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.ponto-vermelho { background: var(--vermelho); }
.ponto-ambar { background: var(--ambar); }
.ponto-verde { background: var(--verde); }

.conclusao { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.conclusao-pct {
  font-family: var(--fonte-titulo);
  font-size: 58px;
  font-weight: 600;
  line-height: 1;
  color: var(--roxo-tinta);
}
.barra-progresso {
  height: 10px;
  border-radius: var(--raio-capsula);
  background: var(--papel-3);
  overflow: hidden;
  margin-top: 16px;
}
/* Nasce em zero e cresce por CSSOM (`element.style.width`): o atributo `style=` é bloqueado
   pela CSP do servidor, então a largura NUNCA pode vir do HTML. */
.barra-progresso-fita {
  height: 100%;
  width: 0;
  background: var(--verde);
  border-radius: var(--raio-capsula);
  transition: width var(--transicao);
}

.lista-prazo { display: grid; gap: 3px; }
.linha-prazo, .item-linha, .legenda-linha, .trilha-linha { min-width: 0; }
.linha-prazo {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: var(--raio-p);
  padding: 10px 12px;
  color: var(--tinta);
  transition: background var(--transicao);
}
.linha-prazo:hover { background: var(--realce); }
.linha-codigo {
  font-family: var(--fonte-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--roxo-tinta);
  background: var(--roxo-fraco);
  border: 1px solid var(--roxo-borda);
  border-radius: var(--raio-capsula);
  padding: 2px 9px;
  flex: none;
}
.linha-titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-quando { font-size: 12.5px; color: var(--tinta-media); flex: none; }

/* ======================================================= distribuição por área (F9) */

/* A rosca é desenhada em SVG no próprio DOM, a partir dos números REAIS do `GET /api/painel`
   (`porArea`). Cada segmento tem legenda com nome, total, percentual, pendências em aberto e
   itens críticos — a cor é o quinto sinal, e nunca o primeiro. */

.distribuicao {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 26px;
  align-items: center;
}
.distribuicao-grafico { display: grid; place-items: center; position: relative; }
.rosca { width: 208px; height: 208px; display: block; }
.rosca-fatia { fill: none; stroke-linecap: round; transition: opacity var(--transicao); }
.rosca-trilho { fill: none; stroke: var(--papel-3); }
.rosca-centro { display: grid; place-items: center; position: absolute; inset: 0; pointer-events: none; }
.rosca-centro-numero { font-family: var(--fonte-titulo); font-size: 40px; font-weight: 600; line-height: 1; color: var(--roxo-tinta); }
.rosca-centro-nome { font-size: 11.5px; color: var(--tinta-fraca); text-transform: uppercase; letter-spacing: .07em; }

.distribuicao-legenda { display: grid; gap: 8px; }
.legenda-linha {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 11px 14px;
  color: var(--tinta);
  transition: background var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.legenda-linha:hover { background: var(--papel-2); transform: translateX(2px); }
.legenda-marca { width: 12px; height: 12px; border-radius: 50%; flex: none; border: 1px solid var(--linha-forte); }
.legenda-nome { font-weight: 600; }
.legenda-numeros { color: var(--tinta-fraca); font-size: 12.5px; margin-top: 2px; display: flex; gap: 10px; flex-wrap: wrap; }
.legenda-pct {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--tinta-media);
  white-space: nowrap;
}

/* A faixa lateral de cada área — o mesmo mapa de cores da rosca. */
.area-seguranca { border-left-color: var(--area-seguranca); }
.area-lgpd { border-left-color: var(--area-lgpd); }
.area-juridico { border-left-color: var(--area-juridico); }
.area-regulatorio { border-left-color: var(--area-regulatorio); }
.area-fiscal { border-left-color: var(--area-fiscal); }
.area-tecnologia { border-left-color: var(--area-tecnologia); }

.marca-seguranca { background: var(--area-seguranca); }
.marca-lgpd { background: var(--area-lgpd); }
.marca-juridico { background: var(--area-juridico); }
.marca-regulatorio { background: var(--area-regulatorio); }
.marca-fiscal { background: var(--area-fiscal); }
.marca-tecnologia { background: var(--area-tecnologia); }

.traco-seguranca { stroke: var(--area-seguranca); }
.traco-lgpd { stroke: var(--area-lgpd); }
.traco-juridico { stroke: var(--area-juridico); }
.traco-regulatorio { stroke: var(--area-regulatorio); }
.traco-fiscal { stroke: var(--area-fiscal); }
.traco-tecnologia { stroke: var(--area-tecnologia); }

/* =================================================================== selos */

.selo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 11px;
  border-radius: var(--raio-capsula);
  background: var(--papel-3);
  color: var(--tinta-media);
  border: 1px solid transparent;
  white-space: nowrap;
}
.selo-vermelho { background: var(--vermelho-fraco); color: var(--vermelho-tinta); border-color: var(--vermelho-borda); }
.selo-ambar { background: var(--ambar-fraco); color: var(--ambar-tinta); border-color: var(--ambar-borda); }
.selo-roxo { background: var(--roxo-fraco); color: var(--roxo-tinta); border-color: var(--roxo-borda); }
.selo-verde { background: var(--verde-fraco); color: var(--verde-tinta); border-color: var(--verde-borda); }

/* O PONTO do selo de estado e de severidade: a cor entra por aqui, e o texto continua sendo o
   que carrega a informação. É o que permite o estado ter cor própria sem o selo virar mancha. */
.selo-ponto { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.ponto-critico { background: var(--critico); }
.ponto-neutro { background: var(--neutro); }
.ponto-arquivado { background: var(--arquivado); }
.ponto-roxo { background: var(--roxo); }

/* ================================================================= tabelas */

/* Toda tabela mora dentro de um contêiner arredondado, com o cabeçalho rebaixado e as bordas
   externas presas ao raio da caixa. */
.tabela-rolo {
  overflow-x: auto;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel);
}
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left;
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tinta-fraca);
  background: var(--papel-2);
  padding: 11px 14px;
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}
thead th:first-child { border-top-left-radius: var(--raio); }
thead th:last-child { border-top-right-radius: var(--raio); }
tbody td { padding: 12px 14px; border-bottom: 1px solid var(--linha); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--papel-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.celula-acoes { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }

/* ============================================================== filtros em cápsula */

.filtros { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 18px; }
.filtros .campo { min-width: 170px; }
.filtros .campo-busca { min-width: 260px; flex: 1; }

/* O filtro em CÁPSULA: um grupo por dimensão (área, estado, risco, responsável), cada opção um
   botão redondo que acende quando está escolhido. Substitui o `<select>` onde a lista é curta e
   a escolha precisa ficar VISÍVEL — um filtro escondido dentro de um menu suspenso é a causa
   número um de "o sistema perdeu meus itens". */
.filtros-capsula {
  display: grid;
  gap: 14px;
  margin-bottom: 20px;
  padding: 18px 20px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
}
.filtro-grupo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filtro-grupo-rotulo {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tinta-fraca);
  min-width: 88px;
}
.capsula {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 14px;
  min-height: 32px;
  border-radius: var(--raio-capsula);
  border: 1px solid var(--linha-forte);
  background: var(--papel);
  color: var(--tinta-media);
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.capsula:hover { border-color: var(--roxo-borda); color: var(--roxo-tinta); background: var(--roxo-fraco); }
.capsula[aria-pressed="true"] {
  background: var(--roxo);
  border-color: var(--roxo);
  color: var(--sobre-roxo);
  font-weight: 600;
}
.capsula[aria-pressed="true"] .selo-ponto { border: 1px solid var(--sobre-roxo); }
.filtros-busca { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.filtros-busca .campo { min-width: 240px; flex: 1; }
.filtros-resumo { color: var(--tinta-fraca); font-size: 12.5px; }

/* ============================================================== compliance */

.item-linha {
  display: grid;
  grid-template-columns: auto 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--linha-forte);
  border-radius: var(--raio-g);
  padding: 14px 18px;
  color: var(--tinta);
  box-shadow: var(--sombra);
  transition: border-color var(--transicao), background var(--transicao), transform var(--transicao);
}
.item-linha + .item-linha { margin-top: 10px; }
.item-linha:hover { background: var(--papel-2); transform: translateX(2px); }
.item-vermelho { border-left-color: var(--vermelho); }
.item-ambar { border-left-color: var(--ambar); }
.item-verde { border-left-color: var(--verde); }
/* Os dois são `<span>` dentro de um `<span>` (o `h()` monta assim): sem `display: block` eles
   fluem na mesma linha e o título encosta na meta — "…RIPD e ROPALGPD · Alta · …". */
.item-titulo { display: block; font-weight: 600; }
.item-meta { display: block; color: var(--tinta-fraca); font-size: 12.5px; margin-top: 3px; }
.item-selos { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.ficha { display: grid; gap: 18px; }
.ficha-campos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ficha-campo {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  background: var(--papel-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
}
.ficha-rotulo { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-fraca); }
.ficha-valor { color: var(--tinta); overflow-wrap: anywhere; font-weight: 500; }
.ficha-texto { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--tinta-media); }

.evidencias { display: grid; gap: 8px; }
.evidencia {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--linha);
  border-left: 3px solid var(--verde);
  border-radius: var(--raio-p);
  background: var(--papel-2);
}
.evidencia-nome { flex: 1; overflow-wrap: anywhere; }
.evidencia-meta { color: var(--tinta-fraca); font-size: 12px; margin-top: 2px; }

/* ====================================================== linha do tempo curva (F9) */

/* O histórico de um item de compliance: a trilha que já existe (`GET /api/trilha?entidade=item`),
   desenhada como linha do tempo. A curva é real — um quarto de círculo de 14 px sai do trilho
   vertical e entra em cada registro —, e não uma imagem: o trilho é um pseudo-elemento e a
   curva é a borda arredondada do outro. */
.linha-tempo { position: relative; display: grid; gap: 16px; padding-left: 30px; }
.linha-tempo::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 12px;
  width: 2px;
  border-radius: var(--raio-capsula);
  background: var(--linha-forte);
}
.linha-tempo-item { position: relative; }
.linha-tempo-item::before {
  content: '';
  position: absolute;
  left: -23px;
  top: 9px;
  width: 15px;
  height: 15px;
  border-left: 2px solid var(--linha-forte);
  border-bottom: 2px solid var(--linha-forte);
  border-bottom-left-radius: var(--raio);
  transform: translateY(-13px);
}
.linha-tempo-marca {
  position: absolute;
  left: -30px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--papel);
  border: 3px solid var(--roxo);
  box-shadow: var(--sombra);
}
.linha-tempo-corpo {
  background: var(--papel-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  padding: 10px 14px;
}
.linha-tempo-quando {
  font-size: 11.5px;
  color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: 2px;
}
.linha-tempo-fato { font-weight: 500; }
.linha-tempo-detalhe { color: var(--tinta-media); font-size: 12.5px; margin-top: 3px; overflow-wrap: anywhere; }

/* =================================================================== cofre */

.quota {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--tinta-media);
  font-size: 12.5px;
}
.quota-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--raio-capsula);
  background: var(--papel-2);
  border: 1px solid var(--linha);
}
.envio { display: grid; gap: 14px; }
.envio-linha { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.envio-limites {
  color: var(--tinta-fraca);
  font-size: 12.5px;
  background: var(--papel-2);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--ambar);
  border-radius: var(--raio-p);
  padding: 12px 14px;
}
.progresso { display: grid; gap: 6px; }
.progresso-nome { font-size: 12.5px; color: var(--tinta-media); }
.doc-nome { overflow-wrap: anywhere; font-weight: 500; }

/* =================================================================== trilha */

.trilha { display: grid; gap: 4px; }
.trilha-linha {
  display: grid;
  grid-template-columns: 156px 180px minmax(0, 1fr);
  gap: 14px;
  padding: 11px 14px;
  border-radius: var(--raio-p);
  align-items: baseline;
  transition: background var(--transicao);
}
.trilha-linha:nth-child(odd) { background: var(--papel-2); }
.trilha-linha:hover { background: var(--realce); }
.trilha-quando { color: var(--tinta-fraca); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.trilha-autor { color: var(--tinta-media); font-size: 12.5px; overflow-wrap: anywhere; }
.trilha-fato { overflow-wrap: anywhere; }
.trilha-de-para { color: var(--tinta-fraca); font-size: 12.5px; margin-top: 3px; }
.mono { font-family: var(--fonte-mono); font-size: 12px; }

/* =================================================================== modal */

.modal-fundo {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--veu);
  display: grid;
  place-items: center;
  padding: 24px;
}
.modal {
  width: min(720px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-xg);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
}
.modal-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--linha);
  background: var(--papel-2);
}
.modal-topo h2 { font-family: var(--fonte-titulo); font-size: 22px; font-weight: 600; color: var(--roxo-tinta); }
.modal-corpo { padding: 22px 24px; overflow-y: auto; display: grid; gap: 16px; }
.modal-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--linha);
  background: var(--papel-2);
  flex-wrap: wrap;
}

/* =================================================================== avisos */

.avisos {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: grid;
  gap: 10px;
  max-width: min(420px, 90vw);
}
.aviso {
  padding: 13px 17px;
  border-radius: var(--raio);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--linha-forte);
  background: var(--papel);
  color: var(--tinta);
  box-shadow: var(--sombra-aviso);
  overflow-wrap: anywhere;
}
.aviso-ok { background: var(--verde-fraco); border-color: var(--verde-borda); border-left-color: var(--verde); color: var(--verde-tinta); }
.aviso-erro { background: var(--vermelho-fraco); border-color: var(--vermelho-borda); border-left-color: var(--vermelho); color: var(--vermelho-tinta); }

/* ================================================================ relatório (F6) */

/* O relatório é o documento que sai da tela e vira papel. Na TELA ele segue a mesma linguagem
   das outras telas (caixa arredondada, borda de 1px, selo com a palavra ao lado da cor); no
   PAPEL ele vira preto no branco, sem menu e sem botão — ver o `@media print` no fim do
   arquivo. As duas aparências saem do MESMO HTML de propósito: um segundo caminho de montagem
   só para imprimir seria um segundo lugar para o relatório divergir do painel. */

.relatorio-cabecalho { display: block; }
.relatorio-clinica {
  font-family: var(--fonte-titulo);
  font-size: 26px;
  font-weight: 600;
  color: var(--roxo-tinta);
  margin-bottom: 4px;
}

.relatorio-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.relatorio-numero {
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid var(--linha);
  border-left: 4px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--papel-2);
}
.relatorio-numero-vermelho { border-left-color: var(--vermelho); }
.relatorio-numero-ambar { border-left-color: var(--ambar); }
.relatorio-numero-verde { border-left-color: var(--verde); }
.relatorio-numero-roxo { border-left-color: var(--roxo); }
.relatorio-numero-valor { font-family: var(--fonte-titulo); font-size: 30px; font-weight: 600; line-height: 1.05; }
.relatorio-numero-nome { font-size: 13px; color: var(--tinta-media); }
.relatorio-numero-dica { font-size: 12px; color: var(--tinta-fraca); }

.relatorio-area { margin-top: 18px; }
.relatorio-tabela { width: 100%; }
.relatorio-tabela td { vertical-align: top; }
.relatorio-codigo { font-family: var(--fonte-mono); font-size: 12px; white-space: nowrap; color: var(--roxo-tinta); }
.relatorio-titulo { display: block; font-weight: 600; }
.relatorio-referencia { display: block; font-size: 12px; color: var(--tinta-fraca); }
.relatorio-situacao { display: block; font-size: 12px; color: var(--tinta-media); margin-top: 4px; }

.relatorio-evidencias { margin-top: 6px; font-size: 12px; color: var(--tinta-media); }
.relatorio-evidencias li { display: flex; gap: 10px; justify-content: space-between; }
.relatorio-evidencia-nome { overflow-wrap: anywhere; }
.relatorio-evidencia-data { white-space: nowrap; color: var(--tinta-fraca); }

.relatorio-rodape {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--linha);
  font-size: 12px;
  color: var(--tinta-fraca);
}

/* =========================================================== segundo fator (F8) */

/* A tela de ativação do segundo fator e o segundo passo do login.

   Duas decisões visuais que valem escrever:

   1) O QR SAI SEMPRE ESCURO SOBRE CLARO, mesmo no tema escuro. Ele usa os tokens da folha
      impressa (`--impresso-fundo`/`--impresso-tinta`), que têm o mesmo valor nos dois temas —
      é o único par do arquivo com essa propriedade, e é exatamente o que o QR precisa: um
      código invertido não é lido pela maioria dos aplicativos de autenticação.

   2) SEGREDO E CÓDIGOS DE RECUPERAÇÃO EM MONOESPAÇADA, com espaço entre os caracteres. São
      textos para copiar à mão, às vezes de um papel, às vezes de madrugada — e é aí que `rn` vira
      `m` e o `5` vira `S`. O alfabeto dos códigos já evita `0`, `O`, `1`, `I` e `L`; a fonte
      faz a outra metade do trabalho. */

.login-alternativas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}
.botao-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  color: var(--roxo-tinta);
  cursor: pointer;
  text-decoration: underline;
}
.botao-link:hover { color: var(--roxo-forte); }

.dois-fatores-estado {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.qr-caixa {
  display: grid;
  place-items: center;
  margin: 18px 0;
  padding: 16px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  background: var(--impresso-fundo);
}

.segredo-manual {
  padding: 13px 16px;
  border: 1px solid var(--linha);
  border-left: 3px solid var(--ambar);
  border-radius: var(--raio-p);
  background: var(--papel-2);
  color: var(--tinta);
  font-size: 13px;
  letter-spacing: .09em;
  word-break: break-all;
  user-select: all;
}

.codigos-recuperacao {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 18px 0;
  padding: 16px;
  list-style: none;
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  background: var(--papel-2);
}
.codigos-recuperacao li {
  font-size: 13px;
  letter-spacing: .07em;
  color: var(--tinta);
  user-select: all;
  padding: 6px 10px;
  border-radius: var(--raio-p);
  background: var(--papel);
  border: 1px solid var(--linha);
  text-align: center;
}

/* ================================================================== celular */

@media (max-width: 900px) {
  .distribuicao { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  /* No celular a rosca sai e sobra a LISTA de cartões compactos: um gráfico de 200 px numa tela
     de 360 px não é leitura, é decoração. Os números continuam todos escritos. */
  .distribuicao-grafico { display: none; }
}

@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app[data-barra="recolhida"] { grid-template-columns: minmax(0, 1fr); }
  .barra {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: var(--barra-largura);
    transform: translateX(-100%);
    transition: transform var(--transicao);
  }
  .app[data-gaveta="aberta"] .barra { transform: translateX(0); }
  .app[data-barra="recolhida"] .marca-texto,
  .app[data-barra="recolhida"] .menu-rotulo,
  .app[data-barra="recolhida"] .rodape-nome { display: revert; }
  .app[data-barra="recolhida"] .barra-acoes { flex-direction: row; }
  .app[data-barra="recolhida"] .menu-item { justify-content: flex-start; padding: 10px 14px; }
  .botao-barra {
    display: grid;
    place-items: center;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 60;
    width: 42px;
    height: 42px;
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid var(--linha);
    background: var(--papel);
    color: var(--roxo-tinta);
    box-shadow: var(--sombra);
  }
  .barra-veu { display: block; position: fixed; inset: 0; z-index: 45; background: var(--veu); }
  /* No celular a barra é gaveta, e uma gaveta não se "recolhe": o botão perderia o sentido. */
  .botao-colapsar { display: none; }
  .conteudo { padding: 70px 16px 72px; }
  .trilha-linha { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  /* Três colunas ainda no celular — ponto, código e texto —, e os selos na linha de baixo.
     Com duas, o código caía sozinho na primeira linha e quebrava no meio ("LGP" / "02"). */
  .item-linha { grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; padding: 14px; }
  .item-selos { grid-column: 1 / -1; justify-content: flex-start; }
  /* A linha de prazo vira duas: código e prazo em cima, título inteiro embaixo. Cortar o
     título em doze caracteres ("Cifra de c…") não informa nada a quem abre o painel no
     celular — que é onde ele é mais lido. */
  .linha-prazo { flex-wrap: wrap; }
  .linha-quando { margin-left: auto; }
  .linha-titulo { flex-basis: 100%; order: 3; white-space: normal; overflow: visible; }
  .tela-topo { margin-bottom: 20px; }
  h1 { font-size: 26px; }
  .farol-numero { font-size: 44px; }
  .conclusao-pct { font-size: 46px; }
  .filtro-grupo-rotulo { min-width: 100%; }
  .legenda-linha { grid-template-columns: auto minmax(0, 1fr); }
  .legenda-pct { grid-column: 2; }
}

@media (max-width: 420px) {
  .conteudo { padding: 66px 12px 60px; }
  .caixa { padding: 16px; border-radius: var(--raio); }
  .login-cartao { padding: 24px 20px; }
  .marca-grande .marca-selo { width: 40px; height: 40px; font-size: 15px; }
  .marca-grande::after { margin-left: 52px; }
  h1 { font-size: 23px; }
  .marca-grande .marca-texto { font-size: 20px; }
  .farol-numero { font-size: 38px; }
  .modal-corpo { padding: 16px; }
  .modal-topo, .modal-acoes { padding: 14px 16px; }
}

/* Quem pede menos movimento recebe menos movimento — inclusive no girador da cortina e nas
   transições de hover, que são as duas coisas que este sistema anima. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .barra { transition: none; }
  .girador { animation: none; }
  .botao:active, .item-linha:hover, .legenda-linha:hover { transform: none; }
}


/* ================================================================== impressão */

/* A FOLHA IMPRESSA do relatório de conformidade (F6).

   Quatro decisões, e o motivo de cada uma:

   1) TUDO O QUE NÃO É O DOCUMENTO SOME. Menu, barra lateral, botões, campo de busca, diálogo e
      região de avisos saem da folha. Um relatório entregue a um auditor com um botão "Exportar
      PDF" impresso no canto é um relatório que denuncia ter sido tirado de uma tela às pressas.

   2) FUNDO BRANCO E TEXTO PRETO, SEMPRE — inclusive quando a pessoa está no tema escuro. Sem
      isto, imprimir do tema escuro produz uma folha ilegível (ou um cartucho gasto), e o pior é
      que só se descobre depois de imprimir.

   3) A COR NUNCA É O ÚNICO SINAL. O selo do semáforo perde o fundo colorido e vira uma borda com
      a PALAVRA dentro ("Vencido há 3 dias", "Concluído"), que é o que a tela já mostra ao lado
      da cor. Numa impressora preto e branco — que é a impressora de qualquer clínica — três
      tons de cinza indistinguíveis seriam informação nenhuma.

   4) CADA ÁREA COMEÇA EM PÁGINA NOVA, e nenhuma linha de item é partida ao meio. É como a
      auditoria de 07/08/2026 chegou e como a conversa acontece: a folha de segurança vai para
      quem cuida de segurança, a de jurídico para a advogada. */

@media print {
  /* O `!important` aqui não é preguiça: ele vence as regras de tela sem que cada uma delas
     precise ser reescrita, e a folha impressa não tem cascata concorrente para atrapalhar. */
  html, body {
    background: var(--impresso-fundo) !important;
    color: var(--impresso-tinta) !important;
  }

  .barra,
  .barra-veu,
  .botao-barra,
  .botao,
  .tela-topo .acoes,
  .filtros,
  .filtros-capsula,
  .avisos,
  .modal-fundo,
  .pular,
  .botao-icone { display: none !important; }

  .app,
  .app[data-barra="recolhida"] { display: block; grid-template-columns: 1fr; }
  .conteudo { padding: 0; overflow: visible; }
  .tabela-rolo { overflow: visible; border: none !important; }

  .caixa,
  .relatorio-numero {
    background: var(--impresso-fundo) !important;
    color: var(--impresso-tinta) !important;
    border: 1px solid var(--impresso-linha) !important;
    box-shadow: none !important;
  }

  .tela-titulo h1,
  .relatorio-clinica,
  .relatorio-codigo,
  .sub,
  .sub-fraco,
  .relatorio-numero-nome,
  .relatorio-numero-dica,
  .relatorio-referencia,
  .relatorio-situacao,
  .relatorio-evidencias,
  .relatorio-evidencia-data,
  .relatorio-rodape { color: var(--impresso-tinta) !important; }

  /* O fio dourado do cabeçalho não sai na impressora preto e branco: vira um traço cinza que
     ninguém pediu. Some. */
  .tela-titulo h1::after,
  .marca-grande::after { display: none !important; }

  /* O selo perde a cor de fundo e mantém a PALAVRA — é ela que carrega a informação no papel. */
  .selo,
  .selo-vermelho,
  .selo-ambar,
  .selo-roxo,
  .selo-verde {
    background: var(--impresso-fundo) !important;
    color: var(--impresso-tinta) !important;
    border: 1px solid var(--impresso-linha) !important;
  }

  table { border-collapse: collapse; width: 100%; }
  th, td {
    border-bottom: 1px solid var(--impresso-linha) !important;
    color: var(--impresso-tinta) !important;
    background: var(--impresso-fundo) !important;
  }

  /* Quebra POR ÁREA, e linha de item inteira na mesma página. */
  .relatorio-area { break-before: page; break-inside: auto; margin-top: 0; }
  .relatorio-cabecalho { break-after: avoid; }
  .relatorio-tabela tr { break-inside: avoid; }
  .relatorio-rodape { break-before: avoid; }

  @page { margin: 14mm; }
}