/* ============================================================
   PROVISÃO — Design system
   Regra de ouro: NUNCA cor fixa em view/componente — sempre tokens.
   Mobile-first: 1 coluna nascendo, quebras em 680px e 1024px.
   ============================================================ */

:root {
  /* Marca Provisão: navy #0b2545 · ciano #0ea5d9 · laranja #f5a623 */
  --brand-900: #0b2545;
  --brand-600: #0c7db3;
  --brand-500: #0ea5d9;
  --brand-400: #3fc0ec;
  --brand-100: #dbf1fa;
  --acento: #f5a623;
  /* Texto POR CIMA de --brand-900. Existe como token porque o navy é o mesmo
     nos dois temas: sem isso, cada view acabaria escrevendo #fff na mão e a
     primeira que esquecesse quebrava o contraste no claro. */
  --sobre-brand: #ffffff;
  --sobre-brand-mudo: rgba(255, 255, 255, .64);
  --sobre-brand-linha: rgba(255, 255, 255, .16);
  /* MAPA — tokens próprios, e não os de superfície.
     Tentativa anterior usava --surface-2 sobre --surface: no tema claro isso é
     cinza-clarinho sobre branco, e o mapa sumia. Superfície existe para separar
     painel de fundo; mapa é DADO e precisa de contraste de dado.
     A linha divisória é clara no claro (branco entre municípios é o padrão de
     mapa coroplético — separa sem pesar) e escura no escuro. */
  --mapa-mun: #bacbdd;
  --mapa-mun-hover: #a2b8cf;
  --mapa-linha: #ffffff;
  --mapa-sombra: rgba(11, 37, 69, .13);
  /* Menu lateral (estética inCadência: claro no tema claro, escuro no dark) */
  --menu-bg: var(--surface);
  --menu-ink: var(--ink-700);
  --menu-hover: var(--surface-2);
  --menu-ativo-bg: var(--brand-100);
  --menu-ativo-ink: var(--brand-600);
  --menu-grupo: var(--ink-500);
  --menu-borda: var(--borda);
  /* Neutros */
  --ink-900: #17222e;
  --ink-700: #35455a;
  --ink-500: #61748a;
  --ink-300: #a9bacc;
  --ink-100: #e3eaf1;
  /* Semânticas */
  --ok: #14805e;
  --ok-bg: #e2f4ec;
  --warn: #a86a00;
  --warn-bg: #fdf1dc;
  --danger: #b3362a;
  --danger-bg: #fbe7e4;
  --info: #0c7db3;
  --info-bg: #dff2fa;
  /* Superfícies
     O fundo era #eef3f8 — azul o bastante para o olho ler "template". Agora é
     quase neutro: a cor da marca aparece em acento, não no plano de fundo. */
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --borda: #e2e8ef;
  --sombra: 0 6px 24px rgba(11, 37, 69, 0.08);
  /* Tipografia e forma */
  --fonte: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Raio: era 16/10. Dezesseis é o arredondamento de template de dashboard —
     em superfície grande ele amolece tudo e tira a impressão de instrumento.
     Doze e oito leem como software, não como cartão. */
  --raio: 12px;
  --raio-sm: 8px;
  /* Sombra de repouso ZERADA de propósito. Card com borda E sombra é redundante:
     duas soluções para o mesmo problema, e o resultado é aquele relevo plástico.
     Sombra volta a existir só no que flutua de verdade — modal, toast, menu. */
  --sombra-sm: none;
  --sombra-md: 0 4px 16px rgba(11, 37, 69, 0.07);
  /* 180ms é perceptível como lentidão em clique repetido; 130 some. */
  --transicao: .13s cubic-bezier(.3, 0, .2, 1);
  color-scheme: light;
}

html[data-theme="dark"] {
  --brand-900: #0b2545;
  --brand-600: #35b9e8;
  --brand-500: #0ea5d9;
  --brand-400: #6fd2f5;
  --brand-100: #0e3350;
  --acento: #f5a623;
  --ink-900: #e7edf4;
  --ink-700: #c2cedc;
  --ink-500: #8a9cb2;
  --ink-300: #55677d;
  --ink-100: #22344a;
  --ok: #4ecb9c;
  --ok-bg: #10352a;
  --warn: #e3a94f;
  --warn-bg: #33270f;
  --danger: #e57e72;
  --danger-bg: #391712;
  --info: #6cc4ea;
  --info-bg: #0e3350;
  --bg: #0a1119;
  --surface: #101b26;
  --surface-2: #16232f;
  --borda: #223142;
  --sombra: 0 6px 24px rgba(0, 0, 0, 0.45);
  --sombra-sm: none;   /* mesma regra do claro: borda OU sombra, nunca as duas */
  --sombra-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --mapa-mun: #1b2a38;
  --mapa-mun-hover: #24384b;
  --mapa-linha: #0a1119;
  --mapa-sombra: rgba(0, 0, 0, .45);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fonte);
  background: var(--bg);
  color: var(--ink-900);
  font-size: 15px;
  line-height: 1.5;
}
a { color: var(--brand-600); text-decoration: none; }
/* Sem sublinhado global no hover: ele vazava para cartões, abas e botões feitos
   com <a> e dava cara de página crua. Link de TEXTO ganha o sublinhado animado
   do Bloco 5; link-componente (com classe) cuida do próprio hover. */
svg { display: inline-block; vertical-align: -0.18em; } /* ícone SEMPRE ao lado do texto */
[hidden] { display: none !important; }

/* ---------- Estrutura: topbar + sidebar off-canvas ---------- */
.tela { min-height: 100vh; display: flex; flex-direction: column; }

.topo {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--borda);
  padding: 10px 14px;
}
.topo .marca { font-weight: 700; font-size: 1.05rem; color: var(--brand-600); letter-spacing: .2px; }
.topo .espaco { flex: 1; }

.btn-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--raio-sm);
  border: 1px solid transparent; background: transparent; color: var(--ink-700);
  cursor: pointer;
}
.btn-icone:hover { background: var(--surface-2); border-color: var(--borda); }

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 60;
  width: 264px; max-width: 84vw;
  background: var(--menu-bg);
  border-right: 1px solid var(--menu-borda);
  transform: translateX(-100%);
  transition: transform .22s ease;
  display: flex; flex-direction: column;
  padding: 14px 10px;
  /* A SIDEBAR NÃO ROLA. Quem rola é só a lista de links (.menu), para que a
     logo em cima e o chip de usuário embaixo fiquem sempre visíveis. */
  overflow: hidden;
}
.sidebar .logo-menu { display: block; width: 100%; max-width: 170px; height: auto; aspect-ratio: 2400 / 716; }
.sidebar .cabeca { min-width: 0; flex: 0 0 auto; }
.menu {
  min-width: 0;
  flex: 1 1 auto;
  min-height: 0;          /* sem isso o flex item não encolhe e o scroll não nasce */
  overflow-y: auto;
  overflow-x: hidden;     /* menu nunca rola na horizontal — só vertical */
  scrollbar-gutter: stable;
}
/* Rodapé fixo do menu: nome do usuário e sair, sempre à vista. */
.rodape-menu {
  flex: 0 0 auto;
  margin-top: 8px;
  padding: 10px 6px 2px;
  border-top: 1px solid var(--menu-borda);
  background: var(--menu-bg);
}
.avatar {
  width: 36px; height: 36px; border-radius: 99px; display: grid; place-items: center;
  background: var(--brand-100); color: var(--brand-600); font-weight: 700; font-size: .82rem; flex-shrink: 0;
}
.user-chip { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: var(--raio-sm); transition: var(--transicao); }
.user-chip:hover { background: var(--menu-hover); }
.user-chip.ativo { background: var(--menu-ativo-bg); }
.user-chip .user-link { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 2px; color: inherit; }
.user-chip .user-link:hover { text-decoration: none; }
.user-chip .nome { display: block; font-weight: 600; font-size: .86rem; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip .cargo { display: block; font-size: .74rem; color: var(--ink-500); }
.user-chip.ativo .nome { color: var(--menu-ativo-ink); }
.titulo-topo { display: none; font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
@media (min-width: 1024px) { .titulo-topo { display: block; } }
.sidebar .btn-icone { color: var(--menu-ink); }
.sidebar .btn-icone:hover { background: var(--menu-hover); border-color: transparent; }
.sidebar .btn {
  background: transparent; border-color: var(--menu-borda); color: var(--menu-ink);
}
.sidebar .btn:hover { background: var(--menu-hover); }
.sidebar .texto-mudo { color: var(--menu-grupo); }
.sidebar.aberta { transform: translateX(0); }
.scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, .45); opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
.scrim.aberta { opacity: 1; pointer-events: auto; }

.sidebar .cabeca { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px 14px; }

.menu { display: flex; flex-direction: column; gap: 5px; }
.menu .grupo { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--menu-grupo); padding: 20px 12px 6px; }
.menu a {
  display: flex; align-items: center; gap: 10px;
  /* min-height 42px: alvo de toque confortável no celular (a lei pede >=40) */
  padding: 11px 12px; min-height: 42px; border-radius: var(--raio-sm);
  color: var(--menu-ink); font-weight: 500;
  /* Rótulo longo é truncado com reticências em vez de esticar o menu */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.menu a svg { flex: none; }
.menu a:hover { background: var(--menu-hover); text-decoration: none; }
.menu a.ativo { background: var(--menu-ativo-bg); color: var(--menu-ativo-ink); font-weight: 600; }

.conteudo { flex: 1; padding: 16px 14px 90px; max-width: 1180px; width: 100%; margin: 0 auto; }

/* Desktop: sidebar fixa */
@media (min-width: 1024px) {
  .sidebar { transform: none; position: sticky; top: 0; height: 100vh; }
  .scrim { display: none; }
  .tela { flex-direction: row; }
  .principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .so-mobile { display: none !important; }
  .conteudo { padding: 22px 26px 60px; }
}

/* ---------- Cabeçalhos (tipografia densa, estilo inCadência) ---------- */
.h-hero { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; margin: 6px 0 2px; }
.h-sub { color: var(--ink-500); font-size: .92rem; margin: 0 0 18px; }
.h-section { font-size: 1.08rem; font-weight: 700; letter-spacing: -.02em; margin: 20px 0 10px; }
.eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--ink-500); }
.cabecalho-pagina { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- Cards e KPIs ---------- */
.card { background: var(--surface); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-sm); transition: var(--transicao); }
.card-hover:hover { box-shadow: var(--sombra-md); transform: translateY(-1px); }
.card-pad { padding: 20px; }
.grade-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; }
@media (min-width: 680px) { .grade-kpi { grid-template-columns: repeat(3, 1fr); } }
.kpi { padding: 20px; display: flex; flex-direction: column; gap: 6px; }
/* KPI que virou link (Painel): não sublinha nem muda a cor do texto */
a.kpi, a.card.kpi { text-decoration: none; color: inherit; }
a.kpi:hover .rotulo { color: var(--brand-600); }
.kpi-ico { width: 40px; height: 40px; border-radius: var(--raio-sm); display: grid; place-items: center; background: var(--brand-100); color: var(--brand-600); margin-bottom: 4px; }
.kpi .rotulo { color: var(--ink-500); font-size: .84rem; }
.kpi .numero { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; min-height: 40px;
  border-radius: var(--raio-sm); border: 1px solid var(--borda);
  background: var(--surface); color: var(--ink-900);
  font-size: .92rem; font-weight: 600; cursor: pointer;
  transition: var(--transicao); white-space: nowrap; line-height: 1;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn-primario { background: var(--brand-900); border-color: var(--brand-900); color: #fff; }
.btn-primario:hover { background: var(--brand-600); border-color: var(--brand-600); }
html[data-theme="dark"] .btn-primario { background: var(--brand-500); border-color: var(--brand-500); color: #06121f; }
html[data-theme="dark"] .btn-primario:hover { background: var(--brand-400); border-color: var(--brand-400); }
.btn-perigo { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-mini { padding: 6px 10px; min-height: 34px; font-size: .85rem; }

/* ---------- Badges e chips ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font-size: .76rem; font-weight: 600; line-height: 1.5; }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-mudo { background: var(--ink-100); color: var(--ink-500); }
.badge-aviso { background: var(--warn-bg); color: var(--warn); }
.badge-perigo { background: var(--danger-bg); color: var(--danger); }
.badge-info { background: var(--info-bg); color: var(--info); }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--borda); border-radius: 99px; padding: 4px 12px; font-size: .84rem; }

/* ---------- Tabelas (roláveis — nunca estourar a página) ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--raio); }
.tbl { width: 100%; border-collapse: collapse; min-width: 560px; }
.tbl th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-500); padding: 10px 14px; border-bottom: 1px solid var(--borda); }
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr:hover td { background: var(--surface-2); }

/* ---------- Formulários ---------- */
.form-grade { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 680px) { .form-grade { grid-template-columns: 1fr 1fr; } .campo-largo { grid-column: 1 / -1; } }
/* LEI: o rótulo do campo é o label FILHO DIRETO. Sem o ">", qualquer label
   interno (opção de checkbox, por exemplo) virava bloco e o controle caía
   para cima do texto. Foi exatamente esse bug na tela de usuários. */
.campo > label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: 5px; color: var(--ink-700); }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 10px 12px; min-height: 42px;
  border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--surface); color: var(--ink-900); font-size: .94rem; font-family: var(--fonte);
}

/* ---------- LEI DOS CONTROLES DE ESCOLHA (checkbox e radio) ----------
   Estes controles NUNCA seguem a moldura de campo de texto: não ocupam
   100% da largura, não têm altura mínima de 42px e ficam SEMPRE ao lado do
   rótulo, alinhados pelo topo da primeira linha. Vale em qualquer tela,
   dentro ou fora de .campo — por isso o seletor é global e usa !important:
   é a única forma de vencer a moldura genérica sem caçar caso a caso. */
input[type="checkbox"], input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  min-height: 0 !important;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  accent-color: var(--brand-600);
  cursor: pointer;
}
/* Qualquer label que embrulhe um controle de escolha vira linha alinhada */
.perm-item, .opcao-linha, .label-escolha {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink-700);
  cursor: pointer;
  line-height: 1.45;
}
.perm-item > span, .opcao-linha > span, .label-escolha > span { flex: 1; min-width: 0; }
/* Empurra o controle para a altura da primeira linha do texto */
.perm-item > input, .opcao-linha > input, .label-escolha > input { margin-top: 1px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--brand-400); outline-offset: 1px; border-color: var(--brand-400); }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--ink-300); }
.campo input[readonly], .campo input:disabled, .campo select:disabled, .campo textarea[readonly] {
  background: var(--surface-2); color: var(--ink-500); cursor: not-allowed;
}
.campo .dica { font-size: .78rem; color: var(--ink-500); margin-top: 4px; }
.acoes-form { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

/* ---------- Campos nativos padronizados ----------
   Nenhum controle do navegador fica "cru": select, data, hora e número
   ganham a mesma moldura, o mesmo foco e ícones que respeitam o tema. */

/* Select: moldura COMPLETA (igual aos campos) + aparência do sistema removida
   e seta desenhada com SVG. Regra global de propósito: TODO select fica
   estilizado, esteja dentro de .campo, .linha-acao, .filtros ou solto. */
select, .campo select, .filtros select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  min-height: 42px; padding: 10px 12px;
  border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background-color: var(--surface); color: var(--ink-900);
  font-size: .94rem; font-family: var(--fonte); line-height: 1.2;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2361748a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 34px !important; cursor: pointer;
}
/* Foco e hover valem para QUALQUER select, não só os de dentro de .campo */
select:hover { border-color: var(--ink-300); }
select:focus { outline: 2px solid var(--brand-400); outline-offset: 1px; border-color: var(--brand-400); }
select:disabled { background-color: var(--surface-2); color: var(--ink-500); cursor: not-allowed; opacity: 1; }

/* ---------- Date picker próprio (substitui o calendário nativo) ---------- */
.dp-wrap { position: relative; }
.dp-visor { width: 100%; padding-right: 40px !important; cursor: text; background: var(--surface); }
.dp-visor.dp-erro { border-color: var(--danger); outline: 2px solid var(--danger); outline-offset: 1px; }
.dp-btn { position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 32px; height: 32px; display: grid; place-items: center; border: 0; padding: 0;
  background: transparent; color: var(--ink-500); cursor: pointer; border-radius: var(--raio-sm); transition: var(--transicao); }
.dp-btn:hover { background: var(--surface-2); color: var(--brand-600); }
.dp-wrap.dp-aberto .dp-btn { color: var(--brand-600); }

.dp-cal { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 280px; max-width: 92vw;
  background: var(--surface); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-md); padding: 12px; }
.dp-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dp-titulo { font-weight: 700; color: var(--ink-900); font-size: .92rem; }
.dp-nav { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--borda);
  background: var(--surface); border-radius: var(--raio-sm); color: var(--ink-700); cursor: pointer; transition: var(--transicao); }
.dp-nav:hover { border-color: var(--brand-400); color: var(--brand-600); }
.dp-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.dp-semana span { text-align: center; font-size: .72rem; font-weight: 700; color: var(--ink-500); padding: 4px 0; }
.dp-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dia { border: 0; background: transparent; border-radius: var(--raio-sm); padding: 0; height: 34px;
  color: var(--ink-900); font-size: .86rem; cursor: pointer; font-family: inherit; transition: var(--transicao); }
.dp-dia:hover { background: var(--surface-2); }
.dp-dia.dp-fora { color: var(--ink-300); }
.dp-dia.dp-hoje { box-shadow: inset 0 0 0 1px var(--brand-400); font-weight: 700; }
.dp-dia.dp-sel { background: var(--brand-600); color: #fff; font-weight: 700; }
.dp-dia.dp-sel:hover { background: var(--brand-700, var(--brand-600)); }
.dp-dia.dp-bloq { color: var(--ink-300); cursor: not-allowed; text-decoration: line-through; }
.dp-dia.dp-bloq:hover { background: transparent; }
.dp-rodape { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--borda); }
.dp-link { border: 0; background: none; color: var(--brand-600); font-weight: 600; font-size: .84rem; cursor: pointer; padding: 4px 6px; border-radius: var(--raio-sm); font-family: inherit; }
.dp-link:hover { background: var(--surface-2); }
html[data-theme="dark"] select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a9cb2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  /* repetir aqui é obrigatório: sem isso o background do .btn volta a valer
     e a seta vira ladrilho no modo escuro */
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-color: var(--surface);
}
select option { background: var(--surface); color: var(--ink-900); }

/* Seletor de unidade do topo: mesma linguagem dos botões, mas é um select */
.select-unidade {
  min-height: 38px; padding: 8px 12px; max-width: 200px;
  border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background-color: var(--surface); color: var(--ink-900);
  font-size: .88rem; font-weight: 600; font-family: var(--fonte);
}
.select-unidade:hover { background-color: var(--surface-2); }

/* Data e hora: mesma moldura dos demais campos; o ícone do seletor
   é recolorido para não sumir no modo escuro. */
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
  appearance: none; -webkit-appearance: none;
  font-family: var(--fonte); font-size: .94rem;
  min-height: 42px; padding: 10px 12px;
  border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--surface); color: var(--ink-900);
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .55; padding: 2px; border-radius: 4px;
  transition: var(--transicao);
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1; background: var(--brand-100);
}
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.4); /* sem isso o ícone preto some no escuro */
}
/* Campos vazios mostram o placeholder do formato em tom suave */
input[type="date"]:not(:focus):invalid, input[type="time"]:not(:focus):invalid { color: var(--ink-500); }

/* Número: esconde as setinhas do sistema (feias e inconsistentes) */
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Busca: remove o "x" nativo do Chrome */
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

::placeholder { color: var(--ink-300); opacity: 1; }

/* ---------- Barras de rolagem ----------
   Discretas, na cor do tema — nunca a barra cinza padrão do sistema. */
* { scrollbar-width: thin; scrollbar-color: var(--ink-300) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ink-300); border-radius: 99px;
  border: 3px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-500); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Rolagem horizontal das tabelas com sombra sutil indicando que há mais conteúdo */
.table-wrap { scrollbar-width: thin; }
.table-wrap::-webkit-scrollbar { height: 8px; }

textarea { resize: vertical; min-height: 70px; }

/* Checkboxes de permissão */
.grade-perms { display: grid; grid-template-columns: 1fr; gap: 6px; }
@media (min-width: 680px) { .grade-perms { grid-template-columns: 1fr 1fr; } }
.perm-item { padding: 9px 10px; border-radius: var(--raio-sm); }
.perm-item:hover { background: var(--surface-2); }

/* ---------- Toasts ---------- */
.toasts { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; width: min(480px, calc(100vw - 24px)); }
.toast {
  background: var(--surface); border: 1px solid var(--borda); border-left: 4px solid var(--info);
  border-radius: var(--raio-sm); box-shadow: var(--sombra);
  padding: 12px 14px; font-size: .92rem;
  animation: subir .25s ease;
}
.toast-sucesso { border-left-color: var(--ok); }
.toast-erro { border-left-color: var(--danger); }
.toast-aviso { border-left-color: var(--warn); }
@keyframes subir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Modais próprios (NUNCA alert/confirm nativos) ---------- */
.modal-fundo {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(10, 18, 15, .55);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: aparecer .18s ease;
}
.modal-caixa { background: var(--surface); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); width: min(420px, 100%); padding: 20px; }
.modal-caixa h3 { margin: 0 0 8px; font-size: 1.05rem; }
.modal-caixa p { margin: 0 0 16px; color: var(--ink-700); font-size: .94rem; }
.modal-caixa .acoes { display: flex; gap: 10px; justify-content: flex-end; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Estados vazios ---------- */
.vazio { text-align: center; padding: 40px 20px; color: var(--ink-500); }
.vazio .titulo { font-weight: 600; color: var(--ink-700); margin-bottom: 4px; }

/* ---------- Página de erro ---------- */
.pagina-erro { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--bg); }
.pagina-erro .caixa { max-width: 440px; text-align: center; }
.pagina-erro .codigo { font-size: 3.2rem; font-weight: 800; color: var(--brand-600); }
.pagina-erro .detalhe { margin-top: 14px; text-align: left; background: var(--surface-2); border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: 10px 12px; font-family: monospace; font-size: .8rem; word-break: break-all; color: var(--ink-500); }

/* ---------- Login ---------- */
.tela-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.caixa-login { width: min(400px, 100%); }
.caixa-login .logo { text-align: center; margin-bottom: 18px; }
.caixa-login .logo img { width: min(280px, 78%); height: auto; }
/* TROCA DE LOGO POR TEMA — com !important, e o motivo importa.
 *
 * Estas regras têm 1 classe de especificidade. Qualquer seletor com duas
 * classes que defina `display` as vence — e havia um:
 *     .sidebar .logo-menu { display: block; }   (0,2,0)  linha ~162
 *     .logo-escuro        { display: none;  }   (0,1,0)  aqui
 *
 * No tema CLARO a segunda perdia, então a logo branca era renderizada junto
 * com a colorida, empilhada. Invisível no fundo claro, mas ocupando altura:
 * era isso que fazia o cabeçalho e a proporção da logo mudarem entre os temas.
 * No escuro não aparecia porque `html[data-theme="dark"] .logo-claro` também
 * tem (0,2,0) e vem depois no arquivo — ganhava por ordem, não por desenho.
 *
 * É a mesma armadilha já documentada para `[hidden]`: visibilidade que vale em
 * qualquer contexto precisa ser inegociável, não depender de quem escreveu o
 * seletor mais específico depois. */
.logo-claro { display: inline-block !important; }
.logo-escuro { display: none !important; }
html[data-theme="dark"] .logo-claro { display: none !important; }
html[data-theme="dark"] .logo-escuro { display: inline-block !important; }

/* ---------- Barra de filtros ---------- */
/* LEI DOS FILTROS: grade de colunas iguais, todos os campos com a MESMA
   altura e os botões alinhados pela base — senão cada tela alinha de um
   jeito e o espaçamento quebra ao mudar a quantidade de filtros. */
.filtros {
  display: grid; grid-template-columns: 1fr; gap: 10px 12px; margin-bottom: 16px;
  align-items: end;
}
@media (min-width: 680px) { .filtros { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .filtros { grid-template-columns: repeat(4, 1fr); } }
.filtros .campo { min-width: 0; }
.filtros .campo > label {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Os botões ocupam uma célula da grade e ficam colados na base da linha */
.filtros-acoes {
  display: flex; gap: 8px; align-items: end; flex-wrap: wrap;
  align-self: end;
}
.filtros-acoes .btn { min-height: 42px; }

/* ---------- Campo com busca remota (typeahead) ---------- */
.busca-remota { position: relative; }
.busca-remota .busca-campo {
  width: 100%; padding: 10px 12px; min-height: 42px;
  border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--surface); color: var(--ink-900); font-size: .94rem; font-family: var(--fonte);
}
.busca-remota .busca-campo:focus { outline: 2px solid var(--brand-400); outline-offset: 1px; border-color: var(--brand-400); }
.busca-lista {
  position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--borda); border-radius: var(--raio-sm);
  box-shadow: var(--sombra-md); max-height: 260px; overflow-y: auto; padding: 4px;
}
.busca-lista[hidden] { display: none !important; }
.busca-item {
  display: block; width: 100%; text-align: left; padding: 9px 10px;
  border: 0; background: none; border-radius: var(--raio-sm);
  color: var(--ink-900); font-size: .92rem; font-family: var(--fonte); cursor: pointer;
}
.busca-item:hover, .busca-item.ativo { background: var(--brand-100); color: var(--brand-600); }
.busca-vazio { padding: 10px; color: var(--ink-500); font-size: .88rem; }

/* ---------- Paginação ---------- */
.paginacao { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.paginacao .paginas { display: flex; gap: 6px; flex-wrap: wrap; }
.paginacao .pagina {
  min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 10px; border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--surface); color: var(--ink-700); font-size: .88rem; font-weight: 600;
}
.paginacao .pagina:hover { background: var(--surface-2); text-decoration: none; }
.paginacao .pagina.atual { background: var(--brand-100); color: var(--brand-600); border-color: var(--brand-100); }

/* ---------- Barra de progresso ---------- */
.progress { height: 6px; border-radius: 99px; background: var(--ink-100); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 99px; background: var(--brand-500); transition: width .5s ease; }

/* ---------- Grade operacional (mobile: cards) ---------- */
.grade-agenda { display: grid; grid-template-columns: 1fr; gap: 10px; }
.linha-slot {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  border: 1px solid var(--borda); border-left: 3px solid var(--ink-300);
  border-radius: var(--raio-sm); padding: 12px; background: var(--surface);
}
.linha-slot.st-livre { border-left-color: var(--ok); }
.linha-slot.st-agendado { border-left-color: var(--brand-500); }
.linha-slot.st-confirmado { border-left-color: var(--info); }
.linha-slot.st-faltou { border-left-color: var(--danger); }
.linha-slot.st-atendido, .linha-slot.st-encaminhado { border-left-color: var(--ink-300); }
.linha-slot.passado { opacity: .6; }
.linha-slot .hora-slot { font-weight: 800; font-size: 1.05rem; min-width: 54px; }
.linha-slot .acoes-slot { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.linha-slot .paciente-slot { font-weight: 600; }
@media (min-width: 1024px) {
  .linha-slot { grid-template-columns: 80px 1fr auto; align-items: center; }
  .linha-slot .acoes-slot { margin-top: 0; justify-content: flex-end; }
}

/* ---------- Grade de horários da agenda ---------- */
.grade-horarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.slot {
  border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: 10px 8px;
  text-align: center; background: var(--surface-2);
}
.slot .hora { font-weight: 700; font-size: .95rem; }
.slot .estado { font-size: .72rem; color: var(--ink-500); margin-top: 2px; }
.slot.livre { border-left: 3px solid var(--ok); }
.slot.ocupado { border-left: 3px solid var(--brand-500); background: var(--brand-100); }

/* ---------- Tabela de grau (receita de óculos) ---------- */
.tabela-grau input {
  width: 100%; min-width: 90px; padding: 8px 10px; text-align: center;
  border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--surface); color: var(--ink-900); font-size: 1rem; font-family: var(--fonte);
}
.tabela-grau input:focus { outline: 2px solid var(--brand-400); outline-offset: 1px; }
.tabela-grau td { vertical-align: middle; }

/* Receita impressa */
.folha-receita { max-width: 780px; margin: 0 auto; }
.folha-receita .cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--brand-900); padding-bottom: 12px; }
.folha-receita .cabecalho img { height: 52px; width: auto; }
.folha-receita .bloco-paciente { margin: 18px 0; }
.folha-receita .corpo { min-height: 220px; white-space: pre-wrap; line-height: 1.7; font-size: 1.02rem; }
.folha-receita .assinatura { margin-top: 56px; text-align: center; }
.folha-receita .assinatura .linha { border-top: 1px solid var(--ink-900); width: 300px; margin: 0 auto 6px; }
.grau-impresso { width: 100%; border-collapse: collapse; margin: 12px 0; }
.grau-impresso th, .grau-impresso td { border: 1px solid var(--ink-300); padding: 10px; text-align: center; font-size: 1.05rem; }
.grau-impresso th { background: var(--surface-2); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Impressão (prontuário, receitas, tickets) ---------- */
.so-impressao { display: none; }
@media print {
  .sidebar, .topo, .scrim, .toasts, .nao-imprimir, .acoes-form, .filtros { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .tela, .principal, .conteudo { display: block; margin: 0; padding: 0; max-width: 100%; }
  .card { border: 0; box-shadow: none; page-break-inside: avoid; }
  .card-pad { padding: 0 0 12px; }
  .so-impressao { display: block !important; border-bottom: 1px solid #000; margin-bottom: 12px; padding-bottom: 8px; }
  .so-impressao[hidden] { display: block !important; }
  input, textarea, select {
    border: 0 !important; padding: 0 !important; min-height: 0 !important;
    background: transparent !important; color: #000 !important; resize: none;
  }
  textarea { height: auto !important; overflow: visible !important; }
  .h-section { font-size: 12pt; border-bottom: 1px solid #ccc; margin: 10px 0 6px; }
  a { color: #000; text-decoration: none; }
}

/* ---------- Utilitários ---------- */
.mt-0 { margin-top: 0; } .mb-16 { margin-bottom: 16px; }
.texto-mudo { color: var(--ink-500); font-size: .86rem; }
.linha-flex { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ============================================================
   DASHBOARDS PERSONALIZÁVEIS (Bloco 9)
   Grade de 12 colunas com spans persistidos por widget.
   Nenhuma cor fixa aqui — tudo token, senão o dark quebra.
   ============================================================ */

.acoes-cabecalho { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Abas de painel */
.abas-painel { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip-painel {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--borda); background: var(--surface);
  color: var(--ink-700); font-size: .88rem; font-weight: 600;
  transition: var(--transicao);
}
.chip-painel:hover { border-color: var(--brand-400); color: var(--brand-600); }
.chip-painel.ativo { background: var(--brand-100); border-color: var(--brand-400); color: var(--brand-600); }
.chip-painel small {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; color: var(--ink-500);
}
.chip-painel.ativo small { color: var(--brand-600); }

/* Grade */
.grade-dashboard { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 840px) {
  /* dense: widget largo que não coube na linha não deixa buraco atrás dele */
  .grade-dashboard {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(130px, auto);
    grid-auto-flow: row dense;
  }
  .grade-dashboard .widget {
    grid-column: span var(--w-col, 4);
    grid-row: span var(--w-lin, 1);
  }
}

.widget { display: flex; flex-direction: column; position: relative; overflow: hidden; }
.widget-topo {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px 8px; border-bottom: 1px solid var(--borda);
}
.widget-topo h2 {
  margin: 0; font-size: .92rem; font-weight: 700; color: var(--ink-900);
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.widget-topo .pega { color: var(--ink-300); cursor: grab; display: none; }
.widget-topo .widget-remover { display: none; color: var(--ink-500); }
.widget-topo .widget-remover:hover { color: var(--danger); }
.widget-corpo { padding: 14px; flex: 1; overflow: auto; display: flex; flex-direction: column; }
.alca-resize {
  position: absolute; right: 4px; bottom: 4px; display: none;
  color: var(--ink-300); cursor: nwse-resize; padding: 2px; line-height: 0;
}
.alca-resize:hover { color: var(--brand-500); }

/* Modo edição: as alças só aparecem quando o usuário pede */
.grade-dashboard.editando .widget { border-style: dashed; border-color: var(--brand-400); }
.grade-dashboard.editando .widget-topo .pega,
.grade-dashboard.editando .widget-topo .widget-remover { display: inline-flex; }
@media (min-width: 840px) { .grade-dashboard.editando .alca-resize { display: block; } }
/* pointer-events:none no card arrastado é o que faz elementFromPoint enxergar
   o widget de baixo — sem isso o arrasto nunca encontra alvo. */
.grade-dashboard .widget.arrastando { opacity: .45; pointer-events: none; }
.grade-dashboard.editando .widget-topo .pega { touch-action: none; }
.grade-dashboard .widget.alvo { outline: 2px dashed var(--brand-500); outline-offset: 2px; }

/* Conteúdo: KPI */
/* Preenche o corpo do widget: quando ele cresce, os KPIs se distribuem na
   largura (space-evenly) e centralizam na altura, em vez de ficar no canto. */
.widget-kpis { display: flex; flex-wrap: wrap; gap: 14px 24px; flex: 1;
  align-content: center; justify-content: space-evenly; }
.widget-kpi { display: flex; flex-direction: column; min-width: 92px; }
.widget-kpi .valor { font-size: 1.5rem; font-weight: 700; color: var(--ink-900); line-height: 1.15; }
.widget-kpi .rotulo { font-size: .78rem; color: var(--ink-500); margin-top: 2px; }
.widget-kpi.destaque .valor { color: var(--brand-600); font-size: 1.75rem; }

/* Conteúdo: barras e progresso */
.widget-barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.widget-barras .linha-topo { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.widget-barras .rotulo {
  font-size: .86rem; font-weight: 600; color: var(--ink-700);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
a.rotulo { text-decoration: none; }
a.rotulo:hover { color: var(--brand-600); }
.widget-barras .valor { font-size: .86rem; font-weight: 700; color: var(--ink-900); white-space: nowrap; }
.widget-barras .trilho {
  height: 8px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--borda); overflow: hidden; margin-top: 5px;
}
.widget-barras .preenchido { display: block; height: 100%; background: var(--brand-500); border-radius: 999px; }
.widget-barras .preenchido.alto { background: var(--ok); }
.widget-barras .preenchido.medio { background: var(--brand-500); }
.widget-barras .preenchido.baixo { background: var(--warn); }
.widget-barras .nota { display: block; font-size: .76rem; color: var(--ink-500); margin-top: 4px; }

/* Conteúdo: lista */
.widget-lista { list-style: none; margin: 0; padding: 0; }
.widget-lista li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--borda);
}
.widget-lista li:last-child { border-bottom: 0; }
.widget-lista .texto { min-width: 0; }
.widget-lista .texto strong, .widget-lista .texto a {
  display: block; font-size: .88rem; font-weight: 600; color: var(--ink-900);
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.widget-lista .texto a:hover { color: var(--brand-600); }
.widget-lista .nota { font-size: .76rem; color: var(--ink-500); }
.widget-lista .valor { font-size: .95rem; font-weight: 700; color: var(--brand-600); white-space: nowrap; }

/* Conteúdo: rosca (SVG) */
.widget-rosca { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; flex: 1; justify-content: center; }
.widget-rosca .rosca { width: 118px; height: 118px; flex: 0 0 auto; }
.rosca circle { fill: none; stroke-width: 13; transform: rotate(-90deg); transform-origin: 60px 60px; }
.rosca .trilho-rosca { stroke: var(--surface-2); }
.rosca .fatia.cor-ok { stroke: var(--ok); }
.rosca .fatia.cor-warn { stroke: var(--warn); }
.rosca .fatia.cor-danger { stroke: var(--danger); }
.rosca .fatia.cor-info { stroke: var(--info); }
.rosca .fatia.cor-ink { stroke: var(--ink-300); }
.rosca-total { text-anchor: middle; font-size: 19px; font-weight: 700; fill: var(--ink-900); }
.rosca-legenda { text-anchor: middle; font-size: 8.5px; fill: var(--ink-500); text-transform: uppercase; letter-spacing: .08em; }
.rosca-itens { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 150px; }
.rosca-itens li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: .84rem; }
.rosca-itens .rotulo { flex: 1; color: var(--ink-700); }
.rosca-itens .valor { font-weight: 700; color: var(--ink-900); }
.rosca-itens .valor small { font-weight: 500; color: var(--ink-500); margin-left: 3px; }
.ponto { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.ponto.cor-ok { background: var(--ok); }
.ponto.cor-warn { background: var(--warn); }
.ponto.cor-danger { background: var(--danger); }
.ponto.cor-info { background: var(--info); }
.ponto.cor-ink { background: var(--ink-300); }

/* Conteúdo: linha (SVG) */
.widget-linha .grafico-linha { width: 100%; height: 130px; display: block; }
/* non-scaling-stroke: o SVG é esticado (preserveAspectRatio="none"), então sem
   isso a linha engrossa na horizontal e os marcadores viram elipse. */
.grafico-linha .grade { stroke: var(--ink-100); stroke-width: 1; vector-effect: non-scaling-stroke; }
.grafico-linha .serie {
  fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.grafico-linha .marca { stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.grafico-linha .serie-a, .grafico-linha .marca-a { stroke: var(--brand-500); }
.grafico-linha .serie-b, .grafico-linha .marca-b { stroke: var(--acento); }
.linha-eixo { display: flex; justify-content: space-between; font-size: .72rem; color: var(--ink-500); margin-top: 2px; }
.linha-legenda { display: flex; gap: 16px; margin-top: 10px; font-size: .78rem; color: var(--ink-700); flex-wrap: wrap; }
.linha-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.linha-legenda i.serie-a { background: var(--brand-500); }
.linha-legenda i.serie-b { background: var(--acento); }

/* Empty state dentro do widget */
.widget-vazio { text-align: center; color: var(--ink-500); padding: 18px 8px; }
.widget-vazio p { margin: 6px 0 0; font-size: .84rem; }

/* Galeria de widgets (modal) */
.modal-caixa.modal-largo { width: min(680px, 100%); }
.galeria-widgets { display: grid; gap: 8px; max-height: 56vh; overflow-y: auto; padding-right: 4px; margin-bottom: 16px; }
@media (min-width: 680px) { .galeria-widgets { grid-template-columns: 1fr 1fr; } }
.opcao-widget {
  display: flex; align-items: flex-start; gap: 10px; text-align: left; width: 100%;
  padding: 11px 12px; border: 1px solid var(--borda); border-radius: var(--raio-sm, 10px);
  background: var(--surface); color: var(--ink-700); cursor: pointer; font: inherit;
  transition: var(--transicao);
}
.opcao-widget:hover { border-color: var(--brand-400); background: var(--surface-2); }
.opcao-ico {
  width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto;
  background: var(--brand-100); color: var(--brand-600);
  display: inline-flex; align-items: center; justify-content: center;
}
.opcao-texto { flex: 1; min-width: 0; }
.opcao-texto strong { display: block; font-size: .88rem; color: var(--ink-900); }
.opcao-texto small { display: block; font-size: .76rem; color: var(--ink-500); line-height: 1.35; margin-top: 2px; }
.opcao-mais { color: var(--ink-300); flex: 0 0 auto; }
.opcao-widget:hover .opcao-mais { color: var(--brand-500); }

/* Barra flutuante do modo edição */
.barra-edicao {
  position: sticky; bottom: 12px; z-index: 40;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--brand-400);
  border-radius: 999px; box-shadow: var(--sombra); font-size: .84rem; color: var(--ink-700);
}

/* Linha de opção (checkbox + rótulo) dentro de modais e formulários.
   O checkbox precisa de width:auto explícito: a regra de campo deixa
   inputs com 100% e ele viraria uma barra. */
.opcao-linha { margin: 12px 0; }

/* Textarea da mensagem do WhatsApp: altura confortável e sem resize lateral */
.modal-caixa textarea { width: 100%; resize: vertical; }

/* Lista de explicação (tela de backups, telas de ajuda) */
.lista-info { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lista-info li {
  padding-left: 16px; position: relative;
  font-size: .9rem; color: var(--ink-700); line-height: 1.55;
}
.lista-info li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 99px; background: var(--brand-500);
}
.lista-info code {
  background: var(--surface-2); border: 1px solid var(--borda);
  border-radius: 6px; padding: 1px 5px; font-size: .84em;
}

/* ============================================================
   LEIS DE FORMATAÇÃO — padrões que TODA tela obedece.
   Escritas aqui para que nenhuma view precise de style inline.
   Se você está prestes a escrever style="" numa view, procure
   a classe correspondente nesta seção primeiro.
   ============================================================ */

/* Título de seção que abre um card (sem margem no topo) */
.h-section.mt-0, .card-pad > .h-section:first-child { margin-top: 0; }

/* Blocos de aviso com faixa colorida à esquerda */
.aviso { border-left: 3px solid var(--ink-300); }
.aviso-ok     { border-left: 3px solid var(--ok); }
.aviso-info   { border-left: 3px solid var(--info); }
.aviso-atencao{ border-left: 3px solid var(--warn); }
.aviso-perigo { border-left: 3px solid var(--danger); }
.aviso p, .aviso-ok p, .aviso-info p, .aviso-atencao p, .aviso-perigo p {
  margin: 4px 0 0; color: var(--ink-500); font-size: .86rem;
}

/* Utilitários de tabela — evitam text-align/white-space inline */
.col-acoes { text-align: right; white-space: nowrap; }
.col-numero { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nao-quebra { white-space: nowrap; }
.mt-16 { margin-top: 16px; }
.mt-8 { margin-top: 8px; }
.sem-margem { margin: 0; }

/* Formulário dentro de linha (ações em tabela) sem quebrar o alinhamento */
.form-inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; }

/* LEI DO PERÍODO: filtro de data é SEMPRE dois campos separados, "De" e "Até",
   cada um na sua célula da grade. Empilhar os dois numa célula só faz a linha
   inteira desalinhar — o rótulo de um sobe e o dos vizinhos desce. */
.filtros .campo-data { min-width: 0; }

/* ==========================================================================
   MENU LATERAL PERSONALIZÁVEL
   Reordenar/ocultar itens é preferência pessoal. O modo edição usa pointer
   events (o sistema roda como PWA no celular, onde drag-and-drop HTML5 não
   dispara) e todas as cores saem de token — nada fixo em hex.
   ========================================================================== */
.menu-barra-personalizar { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ink-100);
  display: flex; flex-direction: column; gap: 4px; }
.menu-btn-personalizar { display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: var(--r-md); background: none;
  color: var(--ink-500); font-size: .8rem; font-weight: 600; cursor: pointer; text-align: left; }
.menu-btn-personalizar:hover { background: var(--ink-100); color: var(--ink-700); }
.menu-btn-personalizar.ativo { background: var(--brand-50); color: var(--brand-700); }
.menu-ferramentas { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 0; }
.menu-ferramentas[hidden] { display: none !important; }
.menu-acao { border: 0; background: none; color: var(--ink-500); font-size: .76rem;
  text-align: left; padding: 6px 10px; border-radius: var(--r-sm); cursor: pointer; }
.menu-acao:hover { background: var(--ink-100); color: var(--ink-700); }

/* Modo edição: o menu vira uma bancada — nada navega, tudo se move. */
.menu-editando a[data-menu-id] { cursor: grab; position: relative; }
.menu-editando a[data-menu-id].ativo { background: none; color: var(--ink-600); font-weight: 500; }
.menu-editando span.grupo { outline: 1px dashed var(--ink-200); outline-offset: 3px;
  border-radius: var(--r-sm); cursor: text; }
.menu-editando span.grupo:focus { outline: 2px solid var(--brand-400); }
.menu-item-oculto { opacity: .45; }
.menu-editando .menu-item-oculto .menu-olho { color: var(--danger); }
.menu-olho { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center;
  justify-content: center; width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: none; color: var(--ink-400); cursor: pointer; }
.menu-olho:hover { background: var(--ink-200); color: var(--ink-800); }
/* pointer-events:none faz o elementFromPoint enxergar o alvo, não o arrastado */
.menu-arrastando { opacity: .5; background: var(--brand-50); pointer-events: none; }

/* ==========================================================================
   LEI DA BARRA SUPERIOR EM TELA ESTREITA (Galaxy Z Fold 5 fechado = 344px)
   Descoberto medindo: o documento inteiro nascia com 380px num viewport de
   344 e a página rolava na horizontal em TODAS as telas. Causa: o seletor de
   unidade e a logo são itens flex com min-width:auto — recusam encolher
   abaixo do próprio conteúdo, e empurram a barra. Nada disso aparece em 390px,
   que é onde a maioria testa.
   ========================================================================== */
.topo > * { min-width: 0; }
.topo .titulo-topo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 430px) {
  .topo { gap: 8px; padding: 10px; }
  /* A logo tem width:auto por atributo inline; o teto vem daqui. */
  .topo img { max-width: 104px; height: 24px; object-fit: contain; }
  .select-unidade {
    max-width: 116px; min-width: 0; flex: 0 1 auto;
    padding: 8px 6px; font-size: .78rem;
    overflow: hidden; text-overflow: ellipsis;
  }
  .btn-icone { flex: 0 0 auto; }
}

/* ==========================================================================
   LEI DO MIN-WIDTH ZERO
   Item de grid/flex nasce com min-width:auto — ele se RECUSA a ficar menor
   que o próprio conteúdo. Um e-mail, uma URL ou um nome de arquivo de backup
   (strings sem espaço) esticam a coluna e estouram a página inteira. Foi
   exatamente isso na tela Meu perfil no Z Fold 5: o card ficou 363px dentro
   de uma grade de 306px.
   A regra é geral de propósito: qualquer tela futura com um dado longo já
   nasce protegida, em vez de virar mais um conserto pontual.
   ========================================================================== */
.form-grade > *, .grade-kpi > *, .linha-flex > *, .filtros > *, .acoes > * { min-width: 0; }
.campo, .card { min-width: 0; }

/* Dado longo sem espaço quebra em vez de empurrar o layout. */
.texto-mudo, .dica, .card p, .tbl td { overflow-wrap: anywhere; }
code { overflow-wrap: anywhere; }

/* Botão com rótulo longo ("Cadastrar biometria neste aparelho") tem nowrap por
   padrão e por isso empurra a página em tela estreita. Em telefone o rótulo
   quebra: linha a mais é barata, rolagem horizontal não. */
@media (max-width: 430px) {
  .btn { white-space: normal; text-align: left; }
  .btn svg { flex: 0 0 auto; }
}

/* Modo edição: o olho fica ANCORADO na borda externa e o rótulo desaparece por
   baixo dele com um degradê.

   Por que não deixar o olho no fluxo: "Exames e procedimentos" é mais largo que
   o menu; como item flex, ele empurrava o botão para fora da barra e o item
   ficava sem como ser ocultado. E `text-overflow: ellipsis` não resolve porque
   o rótulo é um nó de texto solto dentro de um container flex — a reticência
   simplesmente não aparece.

   Tirar o olho do fluxo (position:absolute) garante que ele SEMPRE está no
   mesmo lugar, em todo item, independente do tamanho do texto. O degradê deixa
   claro que o texto continua, em vez de parecer um corte a faca. */
.menu-editando a[data-menu-id] {
  position: relative; overflow: hidden; padding-right: 38px;
}
.menu-editando a[data-menu-id]::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 46px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--menu-bg) 55%);
}
.menu-editando a[data-menu-id]:hover::after {
  background: linear-gradient(to right, transparent, var(--menu-hover) 55%);
}
.menu-editando a[data-menu-id] .menu-olho {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  margin-left: 0; z-index: 1;
}

/* ==========================================================================
   TELA DE LOGIN — split (arte + formulário)
   Decisão de 08/08: entre três propostas, esta foi a escolhida.

   Duas regras que sustentam o layout:
   1. A arte SÓ existe a partir de 1024px. No celular ela não encolhe, ela
      some — a coluna do formulário assume a tela inteira. Arte espremida em
      390px não comunica nada e ainda custa pintura.
   2. Nenhuma cor fixa aqui. O painel escuro usa --brand-900 (igual nos dois
      temas) e o texto por cima usa --sobre-brand*.
   ========================================================================== */

.login-split { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .login-split { grid-template-columns: 1.1fr 1fr; } }

/* ---------- Lado da arte ---------- */
.login-arte { position: relative; overflow: hidden; background: var(--brand-900); display: none; }
@media (min-width: 1024px) { .login-arte { display: block; } }

/* Manchas de cor desfocadas. mix-blend-mode:screen faz elas somarem luz em
   vez de tapar uma à outra — sem isso vira uma poça marrom. */
.login-aurora { position: absolute; inset: -30%; filter: blur(90px); opacity: .6; }
.login-aurora i { position: absolute; display: block; border-radius: 50%; mix-blend-mode: screen; }
.login-aurora .a1 { width: 52%; height: 52%; left: 6%; top: 8%; background: var(--brand-500); opacity: .8; animation: login-flutua-1 15s ease-in-out infinite; }
/* O laranja é ACENTO, não protagonista: em painel largo ele vira uma mancha
   marrom se passar de ~0.2. Foi o que aconteceu no primeiro teste ao vivo. */
.login-aurora .a2 { width: 40%; height: 40%; right: 4%; top: 34%; background: var(--acento); opacity: .18; animation: login-flutua-2 19s ease-in-out infinite; }
.login-aurora .a3 { width: 44%; height: 44%; left: 26%; bottom: 2%; background: var(--brand-400); opacity: .55; animation: login-flutua-3 13s ease-in-out infinite; }
@keyframes login-flutua-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(14%, 10%) scale(1.14); } }
@keyframes login-flutua-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-12%, -8%) scale(1.2); } }
@keyframes login-flutua-3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(8%, -12%) scale(.9); } }

/* Grade técnica por cima, esmaecida nas bordas pela máscara radial. */
.login-malha {
  position: absolute; inset: 0; opacity: .16;
  background-image:
    linear-gradient(var(--sobre-brand-linha) 1px, transparent 1px),
    linear-gradient(90deg, var(--sobre-brand-linha) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse at 40% 40%, #000 20%, transparent 72%);
          mask-image: radial-gradient(ellipse at 40% 40%, #000 20%, transparent 72%);
}

.login-arte-conteudo {
  position: relative; height: 100%; padding: 38px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
}
.login-arte-conteudo .logo-menu { max-width: 190px; height: auto; }

.login-frase {
  color: var(--sobre-brand); font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 800;
  letter-spacing: -.035em; line-height: 1.12; max-width: 13ch; margin: 0;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .28); /* legibilidade sobre a aurora clara */
  animation: login-sobe .8s ease both;
}
.login-frase span { color: var(--brand-400); }
@keyframes login-sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Grade, não flex-wrap: com wrap, o terceiro item caía sozinho numa linha em
   telas médias e a coluna virava um degrau. Três colunas iguais a partir de
   1280px, duas antes disso. */
.login-provas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; list-style: none; margin: 0; padding: 0; max-width: 620px; }
@media (min-width: 1280px) { .login-provas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.login-provas li { color: var(--sobre-brand); display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.login-provas svg { flex: 0 0 auto; margin-top: 1px; color: var(--brand-400); }
.login-provas span { min-width: 0; }
.login-provas b { display: block; font-size: .9rem; font-weight: 700; line-height: 1.35; }
.login-provas small { display: block; font-size: .78rem; line-height: 1.45; color: var(--sobre-brand-mudo); margin-top: 3px; }

/* ---------- Lado do formulário ---------- */
.login-form { display: flex; align-items: center; justify-content: center; padding: 28px 20px; background: var(--surface); }
.login-caixa { width: min(380px, 100%); }
.login-caixa .logo-mobile { display: block; margin-bottom: 22px; text-align: center; }
/* aspect-ratio explícito: a altura fica reservada antes de a imagem carregar,
   então não há salto de layout no primeiro paint nem ao alternar o tema. */
.login-caixa .logo-mobile img { width: min(240px, 70%); height: auto; aspect-ratio: 2400 / 716; }
@media (min-width: 1024px) { .login-caixa .logo-mobile { display: none; } }
.login-caixa h1 { margin: 0 0 3px; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.login-caixa .oi { margin: 0 0 22px; color: var(--ink-500); font-size: .9rem; }
.login-caixa .btn { width: 100%; }
.login-ou { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--ink-500); font-size: .78rem; }
.login-ou::before, .login-ou::after { content: ''; flex: 1; height: 1px; background: var(--borda); }
.login-rodape { margin-top: 18px; text-align: center; font-size: .8rem; color: var(--ink-500); }
.login-rodape .btn { width: auto; }

/* ---------- Acessibilidade ----------
   Quem pediu menos movimento no sistema operacional recebe a mesma tela,
   parada. Não é enfeite: animação contínua dispara enxaqueca e enjoo em
   parte real do público, e ainda queima bateria em tablet de recepção. */
@media (prefers-reduced-motion: reduce) {
  .login-aurora i, .login-frase { animation: none !important; }
}

/* ==========================================================================
   SITE PÚBLICO (landing institucional)

   Direção: moderno sem "cara de IA". Três regras que valem para tudo abaixo:
   1. Separar por alinhamento e espaço, não por caixa. Quase nada aqui é card.
   2. Contraste tipográfico largo — título muito grande e apertado convivendo
      com metadado pequeno. Interface genérica tem tudo no mesmo tamanho.
   3. Raio menor que o do sistema (--raio é 16px e é o visual de template).
      Aqui o padrão é 10px, e superfície grande usa 14px no máximo.
   ========================================================================== */

/* Coluna de altura total: em páginas curtas (ex.: agradecimento da triagem) o
   rodapé gruda na base da tela em vez de flutuar com espaço branco embaixo. */
.pagina-site { background: var(--surface); min-height: 100vh; display: flex; flex-direction: column; }
.pagina-site > main { flex: 1 0 auto; }
.pagina-site > .site-rodape { flex: none; margin-top: auto; }
.site-largura { width: min(1180px, 100% - 40px); margin-inline: auto; }

/* ---------- Topo ---------- */
.site-topo {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 18px;
  padding: 12px max(20px, calc((100% - 1180px) / 2));
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borda);
}
.site-topo .espaco { flex: 1; }
.site-marca img { height: 42px; width: auto; display: block; aspect-ratio: 2400 / 716; }
.site-nav { display: none; gap: 22px; }
@media (min-width: 900px) { .site-nav { display: flex; } }
.site-nav a { color: var(--ink-700); font-size: .9rem; font-weight: 500; }
.site-nav a:hover { color: var(--brand-600); text-decoration: none; }

/* ---------- Hero ---------- */
/* O hero é uma FAIXA, não branco sobre branco.
   Sem isso o mapa flutuava em #fff e as cidades acesas viravam duas manchas
   ciano gritando no vazio — o salto de contraste era o que incomodava, não a
   falta dele. A faixa dá chão ao mapa e reduz o pulo. */
.site-hero { padding: 48px 0 34px; background: var(--bg); border-bottom: 1px solid var(--borda); }
.site-hero-grade { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: center; }
@media (min-width: 1024px) { .site-hero-grade { grid-template-columns: 1fr 1fr; gap: 56px; } }

.site-eyebrow {
  display: inline-block; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em; color: var(--brand-600); margin-bottom: 14px;
}
.site-hero-texto h1 {
  margin: 0 0 18px;
  /* O salto de tamanho é o que tira a cara de template: 2.6rem a 4.2rem contra
     um parágrafo de 1.05rem. Sistema genérico vive na faixa de 1.2 a 1.8. */
  font-size: clamp(2.6rem, 5.2vw, 4.2rem);
  font-weight: 800; letter-spacing: -.045em; line-height: 1.02;
}
.site-chamada { margin: 0 0 26px; font-size: 1.05rem; line-height: 1.65; color: var(--ink-700); max-width: 46ch; }
.site-acoes { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }
.site-acoes .btn { border-radius: 10px; }

/* ---------- Mapa ---------- */
.site-hero-mapa { position: relative; }
.mapa-to { position: relative; perspective: 1400px; }
.mapa-to-svg {
  display: block; width: 100%; height: auto; max-height: 74vh; margin-inline: auto;
  /* Inclinação sutil: dá profundidade sem virar maquete. Mais que 8 graus e o
     norte do estado começa a parecer distorcido — o Bico do Papagaio é fino e
     denuncia qualquer exagero. */
  transform: rotateX(7deg) rotateZ(-1.5deg);
  transform-origin: 50% 45%;
  filter: drop-shadow(0 22px 38px var(--mapa-sombra));
  animation: mapa-entra 1s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes mapa-entra { from { opacity: 0; transform: rotateX(16deg) rotateZ(-1.5deg) translateY(26px); } }

.mun {
  /* Traço FINO de propósito: são 139 polígonos: linha grossa vira uma malha
     branca que clareia a massa inteira e devolve o efeito lavado. */
  fill: var(--mapa-mun); stroke: var(--mapa-linha); stroke-width: .55;
  transition: fill .13s ease;
}
.mun:hover { fill: var(--mapa-mun-hover); cursor: default; }
.mun-ativa { fill: var(--brand-500); stroke: var(--brand-400); }
.mun-ativa:hover { fill: var(--brand-400); }

.pino { animation: pino-cai .5s cubic-bezier(.2, .8, .3, 1) both; animation-delay: var(--atraso, 0s); }
@keyframes pino-cai { from { opacity: 0; transform: translateY(-16px); } }
.pino-nucleo { fill: var(--acento); }
.pino-onda { fill: none; stroke: var(--acento); stroke-width: 2; transform-origin: center; animation: pino-onda 2.6s ease-out infinite; }
@keyframes pino-onda { 0% { r: 5; opacity: .85; } 100% { r: 20; opacity: 0; } }

.site-mapa-legenda { display: flex; gap: 20px; justify-content: center; margin-top: 14px; font-size: .8rem; color: var(--ink-500); flex-wrap: wrap; }
.site-mapa-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.site-mapa-legenda .ponto-ativo { background: var(--brand-500); }
.site-mapa-legenda .ponto-inativo { background: var(--mapa-mun); border: 1px solid var(--mapa-linha); }

/* ---------- Números ----------
   Faixa com divisórias, não três cards. Card de KPI no topo é o clichê visual
   que mais entrega "template de IA"; a régua com linha divisória lê como
   painel de instrumento. */
.site-numeros { border-bottom: 1px solid var(--borda); padding: 26px 0; }
.site-numeros-linha { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 680px) { .site-numeros-linha { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 680px) { .site-numeros-linha > * + * { border-left: 1px solid var(--borda); padding-left: 26px; } }
.site-numeros b { display: block; font-size: 2.6rem; font-weight: 800; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.site-numeros small { display: block; margin-top: 7px; font-size: .84rem; color: var(--ink-500); }

/* ---------- Seções ---------- */
.site-secao { padding: 62px 0; }
.site-titulo-secao { margin: 0 0 26px; font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 800; letter-spacing: -.035em; }

.site-cidades { display: flex; flex-wrap: wrap; gap: 8px 10px; list-style: none; margin: 0; padding: 0; }
.site-cidades li { padding: 7px 14px; border: 1px solid var(--borda); border-radius: 8px; font-size: .88rem; color: var(--ink-700); }

/* Passos numerados: o número grande em tom fraco faz a hierarquia sozinho,
   sem precisar de ícone em círculo colorido (outro clichê). */
.site-passos { display: grid; grid-template-columns: 1fr; gap: 30px 34px; }
@media (min-width: 680px) { .site-passos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .site-passos { grid-template-columns: repeat(4, 1fr); } }
.site-passos article { border-top: 2px solid var(--brand-500); padding-top: 16px; }
.site-passo-num { display: block; font-size: .82rem; font-weight: 800; letter-spacing: .1em; color: var(--ink-300); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.site-passos h3 { margin: 0 0 7px; font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.site-passos p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--ink-500); }

.site-secao-escura { background: var(--brand-900); color: var(--sobre-brand); }
.site-secao-escura .site-titulo-secao { color: var(--sobre-brand); }
.site-secao-escura p { color: var(--sobre-brand-mudo); line-height: 1.65; max-width: 52ch; }
.site-parceiros { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: center; }
@media (min-width: 900px) { .site-parceiros { grid-template-columns: 1.1fr .9fr; gap: 56px; } }
.site-lista-marcada { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.site-lista-marcada li { display: flex; gap: 11px; align-items: flex-start; color: var(--sobre-brand); font-size: .95rem; }
.site-lista-marcada svg { flex: 0 0 auto; margin-top: 2px; color: var(--brand-400); }

/* ---------- Rodapé ---------- */
.site-rodape { background: var(--brand-900); color: var(--sobre-brand-mudo); padding: 46px 0 22px; border-top: 1px solid var(--sobre-brand-linha); }
.site-rodape-grade { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 768px) { .site-rodape-grade { grid-template-columns: 2fr 1fr 1fr; gap: 44px; } }
.site-rodape-logo { height: 38px; width: auto; margin-bottom: 16px; }
.site-rodape h3 { margin: 0 0 10px; font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--sobre-brand); }
.site-rodape p { margin: 0 0 7px; font-size: .9rem; line-height: 1.6; }
.site-rodape a { color: var(--brand-400); }
.site-rodape-fim { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--sobre-brand-linha); font-size: .78rem; }

@media (prefers-reduced-motion: reduce) {
  .mapa-to-svg, .pino, .pino-onda { animation: none !important; }
}

.mapa-to-dica {
  position: absolute; z-index: 5; pointer-events: none;
  transform: translate(14px, -50%);
  padding: 5px 10px; border-radius: 7px;
  background: var(--ink-900); color: var(--bg);
  font-size: .78rem; font-weight: 600; white-space: nowrap;
  box-shadow: var(--sombra-md);
}

/* ==========================================================================
   BLOCO 4 — MODERNIZAÇÃO DA MOLDURA (09/08/2026)

   Pedido do Gabriel: "mais moderno, menos cara de IA, mas usual".
   A revisão do docs/27 mostrou que NENHUMA view fixa cor — então tudo abaixo
   muda as 45 telas sem tocar em uma linha de view.

   As quatro decisões, e o porquê de cada uma:

   1. CARD SEM SOMBRA EM REPOUSO. Borda mais sombra é redundância; o relevo
      plástico em cima de tudo é o que mais entrega "gerado". Sombra ficou para
      o que flutua de verdade.
   2. KPI VIRA RÉGUA, NÃO CAIXA. Três a quatro cards de número no topo é O
      clichê de dashboard. A mesma informação com divisória vertical lê como
      painel de instrumento — e ocupa menos altura, então a tabela sobe.
   3. ESCALA TIPOGRÁFICA MAIS LARGA. O sistema vivia entre 0.84 e 1.75rem,
      quase tudo em 700/800. Sem contraste não há hierarquia, e sem hierarquia
      tudo parece igualmente importante — que é como interface genérica parece.
   4. TABELA MAIS DENSA. Linha de 12px e cabeçalho em caixa alta gastam altura
      sem informar. Aqui se lê agenda e prontuário o dia inteiro: cabem mais
      linhas na tela, ganha-se rolagem.

   Para REVERTER: apague este bloco e devolva os tokens --raio, --raio-sm,
   --sombra-sm, --bg e --transicao aos valores antigos (16px, 10px, sombra
   leve, #eef3f8, .18s).
   ========================================================================== */

/* ---------- 1. Superfícies ---------- */
.card { box-shadow: none; }
.card-hover:hover { box-shadow: none; border-color: var(--brand-400); transform: none; }
.card-pad { padding: 18px 20px; }

/* Sombra só onde há flutuação real */
.modal-caixa, .toast, .busca-lista, .sidebar { box-shadow: var(--sombra); }

/* ---------- 2. KPI: de caixa para régua ----------
   Feito só em CSS: as views continuam mandando .card.kpi e não precisam mudar. */
.grade-kpi {
  gap: 0;
  margin: 18px 0 26px;
  border-block: 1px solid var(--borda);
  padding: 20px 0;
}
.grade-kpi .card.kpi {
  background: transparent; border: 0; border-radius: 0;
  padding: 4px 22px; gap: 2px;
}
@media (min-width: 680px) {
  /* grid-auto-flow: column, NÃO repeat(3, 1fr).
     O painel tem QUATRO KPIs. Com três colunas o quarto cai numa segunda
     linha e a divisória vertical do `+` aparece no primeiro item de baixo,
     onde não existe vizinho à esquerda — risco solto no meio da régua.
     Fluxo em coluna mantém tudo numa linha só, seja qual for a contagem. */
  .grade-kpi { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .grade-kpi .card.kpi + .card.kpi { border-left: 1px solid var(--borda); }
}
/* No celular a régua vira duas colunas com divisória horizontal entre as linhas. */
@media (max-width: 679px) {
  .grade-kpi .card.kpi { padding: 12px 14px; }
  .grade-kpi .card.kpi:nth-child(odd) { border-right: 1px solid var(--borda); }
  .grade-kpi .card.kpi:nth-child(n+3) { border-top: 1px solid var(--borda); padding-top: 16px; }
}
.kpi .numero {
  font-size: 2.1rem; font-weight: 800; letter-spacing: -.045em; line-height: 1.05;
  font-variant-numeric: tabular-nums; /* número não dança ao atualizar */
}
.kpi .rotulo { font-size: .82rem; color: var(--ink-500); }
/* O ícone em quadrado colorido era decoração: repetia o que o rótulo já diz e
   enchia a régua de blocos. Vira marca discreta ao lado do número. */
.kpi .kpi-ico {
  width: auto; height: auto; background: none; color: var(--ink-300);
  margin: 0 0 6px; justify-items: start;
}

/* ---------- 3. Tipografia ---------- */
.h-hero { font-size: clamp(1.75rem, 2.6vw, 2.15rem); letter-spacing: -.042em; line-height: 1.1; margin: 2px 0 4px; }
.h-sub { font-size: .95rem; margin: 0 0 22px; }
.h-section { font-size: 1rem; font-weight: 700; letter-spacing: -.015em; }
.eyebrow { letter-spacing: .14em; }
.cabecalho-pagina { align-items: center; }

/* ---------- 4. Tabelas mais densas ---------- */
.tbl th {
  font-size: .74rem; text-transform: none; letter-spacing: 0;
  font-weight: 600; color: var(--ink-500); padding: 8px 12px;
}
.tbl td { padding: 9px 12px; }
.tbl td, .tbl th { font-variant-numeric: tabular-nums; }
.table-wrap { border-radius: var(--raio-sm); }

/* ---------- Botões e chips: menos pílula ---------- */
.btn { border-radius: var(--raio-sm); font-weight: 600; }
.chip { border-radius: 8px; }
.badge { border-radius: 6px; font-weight: 600; }

/* ---------- Menu lateral: item mais compacto ---------- */
.menu a { min-height: 38px; padding: 8px 11px; font-size: .92rem; }
.menu .grupo { padding: 18px 11px 5px; letter-spacing: .12em; }

/* ---------- Estado vazio menos "cartão de erro" ---------- */
.vazio { padding: 34px 20px; }
.vazio .titulo { font-size: 1rem; }

/* ---------- Busca remota com UF na frente ----------
   Grade de duas colunas: a UF é estreita e fixa (são duas letras), a cidade
   toma o resto. Em tela estreita empilha — dois campos lado a lado em 344px
   deixariam o nome do município ilegível. */
.busca-com-uf { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 420px) { .busca-com-uf { grid-template-columns: 92px 1fr; } }
.busca-uf {
  min-height: 42px; padding: 10px 8px;
  border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--surface); color: var(--ink-900);
  font: inherit; font-size: .94rem; font-weight: 600;
}
.busca-uf:focus { outline: 2px solid var(--brand-400); outline-offset: 1px; border-color: var(--brand-400); }
.busca-uf:disabled { background: var(--surface-2); color: var(--ink-500); cursor: not-allowed; }
/* A lista fica na largura toda do componente. Tentei prendê-la à coluna da
   cidade com grid-column, mas ela é position:absolute — o comportamento de
   item absoluto dentro de grid depende de detalhe de spec que nem todo
   navegador trata igual. Largura cheia é previsível e lê melhor. */

/* ---------- Botão flutuante de contato (landing) ----------
   No desktop é pílula com rótulo; no celular vira círculo só com o ícone —
   pílula larga em 390px cobre conteúdo e briga com o polegar.
   Fica à direita e acima da borda inferior para não colidir com a barra de
   gestos do iOS/Android. */
.site-flutuante {
  position: fixed; z-index: 60;
  right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 16px;
  border-radius: 999px;
  background: #25d366; color: #06210f;   /* verde do WhatsApp: marca de terceiro, não token nosso */
  font-weight: 700; font-size: .95rem;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .28);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.site-flutuante:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, .34); }
.site-flutuante:active { transform: translateY(0); }
.site-flutuante svg { flex: 0 0 auto; }
@media (max-width: 640px) {
  .site-flutuante { width: 56px; padding: 0; justify-content: center; }
  .site-flutuante span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .site-flutuante { transition: none; } }


/* ---------- Grade de valores da tabela de preço ----------
   Campo numérico estreito e alinhado à direita: preço se confere pela coluna
   dos centavos, não pela esquerda. tabular-nums para os dígitos não dançarem
   de linha para linha. */
.campo-valor {
  width: 110px; max-width: 100%;
  padding: 7px 10px; min-height: 36px;
  text-align: right; font-variant-numeric: tabular-nums;
  border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--surface); color: var(--ink-900); font: inherit; font-size: .92rem;
}
.campo-obs {
  width: 100%; min-width: 160px;
  padding: 7px 10px; min-height: 36px;
  border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--surface); color: var(--ink-900); font: inherit; font-size: .92rem;
}
.campo-valor:focus, .campo-obs:focus { outline: 2px solid var(--brand-400); outline-offset: 1px; border-color: var(--brand-400); }
.campo-valor[readonly], .campo-obs[readonly] { background: var(--surface-2); color: var(--ink-500); }

/* Cabeçalho de grupo dentro da tabela: separa categorias sem virar outra tabela. */
.linha-grupo {
  background: var(--surface-2); color: var(--ink-500);
  font-size: .72rem !important; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700 !important; text-align: left; padding: 7px 12px !important;
}

/* ---------- Redes sociais no rodapé do site ----------
   Alvo de 40px mesmo com ícone de 20: no celular o dedo não acerta o glifo,
   acerta a área ao redor dele. */
.site-redes { display: flex; gap: 6px; margin-top: 12px !important; }
.site-redes a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--raio-sm);
  color: var(--sobre-brand); border: 1px solid var(--sobre-brand-linha);
  transition: var(--transicao);
}
.site-redes a:hover { background: var(--sobre-brand-linha); color: var(--brand-400); text-decoration: none; }

/* ------------------------------------------------------------------ LEADS
   Barras em HTML/CSS (não SVG) de propósito: usam os tokens, então trocam
   sozinhas no tema escuro, e colapsam bem no celular. Nada de cor fixa. */
.grade-leads { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 16px 0; }
@media (min-width: 900px) { .grade-leads { grid-template-columns: 1fr 1fr; } }
.lead-bloco h3 { font-size: .9rem; color: var(--ink-700); margin: 0 0 12px; }
.lead-barras { display: flex; flex-direction: column; gap: 10px; }
.lead-barra { display: grid; grid-template-columns: 116px 1fr auto; align-items: center; gap: 10px; }
.lead-barra .rot { font-size: .84rem; color: var(--ink-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-barra .trilho { background: var(--surface-2); border: 1px solid var(--borda); border-radius: 999px; height: 12px; overflow: hidden; }
.lead-barra .preenche { height: 100%; background: var(--brand-500); border-radius: 999px; min-width: 3px; transition: width .3s ease; }
.lead-barra .val { font-size: .84rem; font-weight: 700; color: var(--ink-900); min-width: 24px; text-align: right; }
.lead-serie { display: flex; align-items: flex-end; gap: 6px; height: 96px; padding-top: 6px; }
.lead-serie .col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.lead-serie .col i { width: 100%; max-width: 26px; background: var(--brand-400); border-radius: 5px 5px 0 0; min-height: 2px; display: block; }
.lead-serie .col span { font-size: .68rem; color: var(--ink-500); }
.lead-serie .col b { font-size: .72rem; color: var(--ink-700); font-weight: 700; }
/* Etapas do funil como pastilha colorida na timeline e na lista */
.status-lead { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600;
  padding: 3px 10px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.status-lead::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.status-novo        { color: var(--ink-500);  background: var(--surface-2); border-color: var(--borda); }
.status-em_contato  { color: var(--info);     background: var(--info-bg); }
.status-qualificado { color: var(--warn);     background: var(--warn-bg); }
.status-convertido  { color: var(--ok);       background: var(--ok-bg); }
.status-descartado  { color: var(--danger);   background: var(--danger-bg); }
/* Timeline de contatos do lead */
.lead-time { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.lead-time li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 0 0 16px; position: relative; }
.lead-time li::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: var(--borda); }
.lead-time li:last-child::before { display: none; }
.lead-time .pino { width: 22px; height: 22px; border-radius: 999px; background: var(--brand-100); color: var(--brand-600);
  display: grid; place-items: center; z-index: 1; }
.lead-time .pino.sis { background: var(--surface-2); color: var(--ink-500); }
.lead-time .quando { font-size: .76rem; color: var(--ink-500); }
.lead-time .texto { color: var(--ink-900); margin: 2px 0 0; white-space: pre-wrap; word-break: break-word; }
.lead-time .canal { font-size: .74rem; color: var(--ink-500); }
.lead-detalhe { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .lead-detalhe { grid-template-columns: 340px 1fr; align-items: start; } }
.lead-dados dt { font-size: .76rem; color: var(--ink-500); margin-top: 12px; }
.lead-dados dd { margin: 2px 0 0; color: var(--ink-900); }
.lead-dados dt:first-child { margin-top: 0; }
.rotulo-forte { display: block; font-weight: 600; color: var(--ink-700); font-size: .84rem; margin-bottom: 8px; }
.linha-acao { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.linha-acao select { flex: 1 1 auto; }

/* --------------------------------------------------------------- TRIAGEM */
.triagem-aviso { border-left: 3px solid var(--warn); }
.triagem-aviso p { margin: 0 0 8px; }
.triagem-aviso p:last-child { margin-bottom: 0; }
.triagem-secao { margin-top: 14px; }
.triagem-secao-titulo { font-size: 1rem; margin: 0 0 4px; color: var(--ink-900); }
.triagem-pergunta { margin-top: 18px; }
.triagem-label { display: block; font-weight: 600; color: var(--ink-900); margin-bottom: 8px; }
.triagem-numero { display: flex; align-items: center; gap: 8px; }
.triagem-numero input { max-width: 140px; }
.triagem-opcoes { display: flex; flex-direction: column; gap: 8px; }
.triagem-opcao { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--borda);
  border-radius: var(--raio-sm); cursor: pointer; transition: var(--transicao); background: var(--surface); }
.triagem-opcao:hover { border-color: var(--brand-400); background: var(--surface-2); }
.triagem-opcao input { margin-top: 2px; flex: none; }
.triagem-opcao span { color: var(--ink-900); }
.triagem-opcao-alerta { border-color: var(--danger); }
.triagem-opcao-alerta span { color: var(--danger); font-weight: 600; }
.lead-triagem { padding-top: 14px; border-top: 1px solid var(--borda); }
.lead-triagem .badge svg { vertical-align: -0.12em; }

/* Botão "ver senha" (olho) dentro do campo de senha */
.campo-senha { position: relative; }
.campo-senha input { padding-right: 46px; }
.btn-ver-senha { position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center; border: 0; padding: 0;
  background: transparent; color: var(--ink-500); cursor: pointer; border-radius: var(--raio-sm);
  transition: var(--transicao); }
.btn-ver-senha:hover { background: var(--surface-2); color: var(--ink-700); }
.btn-ver-senha.ativo { color: var(--brand-600); }

/* Formulário público de captação na landing */
.campo-isca { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.site-contato { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .site-contato { grid-template-columns: 1fr 1fr; } }
.site-contato-caixa .campo { margin-bottom: 12px; }
.site-contato-enviar { width: 100%; justify-content: center; margin-top: 4px; }
.site-contato-nota { font-size: .76rem; color: var(--ink-500); margin: 10px 0 0; }
.site-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--raio-sm);
  background: var(--surface-2); border: 1px solid var(--borda); color: var(--ink-900); margin-bottom: 14px; font-size: .9rem; }
.site-aviso svg { flex: none; margin-top: 1px; }
.site-aviso-ok { background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.site-aviso-erro { background: var(--danger-bg); border-color: transparent; color: var(--danger); }

/* Triagem PÚBLICA (avaliação de risco na landing) */
.site-triagem-largura { max-width: 760px; margin-inline: auto; }
.site-triagem-topo { margin-bottom: 8px; }
.site-triagem-topo .site-titulo-secao { margin-top: 6px; }
.site-triagem-form .triagem-secao { margin-top: 16px; }
.site-triagem-enviar { min-width: 220px; justify-content: center; }
.triagem-consentimento { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; color: var(--ink-900); }
.triagem-consentimento input { margin-top: 3px; flex: none; width: 18px; height: 18px; }
.triagem-consentimento span { font-size: .92rem; line-height: 1.5; }
.site-triagem-fim { max-width: 640px; margin-inline: auto; }
.site-triagem-fim .site-aviso-ok p { margin: 8px 0 0; font-size: .9rem; line-height: 1.5; }

/* Central de ajuda / tutorial — layout de duas colunas */
.ajuda-layout { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .ajuda-layout { grid-template-columns: 250px 1fr; } }

.ajuda-nav { position: static; }
@media (min-width: 900px) { .ajuda-nav { position: sticky; top: 16px; } }
.ajuda-nav nav { display: flex; flex-direction: column; gap: 3px; padding: 10px; border: 1px solid var(--borda);
  border-radius: var(--raio-sm); background: var(--surface); }
.ajuda-nav-titulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-500);
  font-weight: 700; padding: 6px 10px 8px; }
.ajuda-nav a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--raio-sm);
  font-size: .88rem; color: var(--ink-700); text-decoration: none; transition: var(--transicao); }
.ajuda-nav a:hover { background: var(--surface-2); color: var(--brand-600); }
.ajuda-nav a svg { flex: none; color: var(--ink-500); }
.ajuda-nav a:hover svg { color: var(--brand-600); }

.ajuda-conteudo { min-width: 0; }
.ajuda-secao { margin-bottom: 16px; scroll-margin-top: 16px; }
.ajuda-destaque { border-left: 3px solid var(--brand-500); }

/* Fluxo numerado (agenda de ponta a ponta) */
.ajuda-fluxo { list-style: none; margin: 12px 0 0; padding: 0; }
.ajuda-fluxo > li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--borda); }
.ajuda-fluxo > li:first-child { border-top: 0; padding-top: 4px; }
.ajuda-fluxo-num { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  background: var(--brand-500); color: #fff; font-weight: 700; font-size: .9rem; }
.ajuda-fluxo > li > div { min-width: 0; }
.ajuda-fluxo > li > div > strong { display: block; color: var(--ink-900); margin-bottom: 2px; }
.ajuda-fluxo > li > div > p { margin: 4px 0; line-height: 1.55; color: var(--ink-800); }
.ajuda-fluxo a { color: var(--brand-600); text-decoration: none; }
.ajuda-fluxo a:hover { color: var(--brand-500); }
.ajuda-nota { display: flex; align-items: flex-start; gap: 8px; background: var(--warn-bg); color: var(--warn);
  border-radius: var(--raio-sm); padding: 9px 12px; font-size: .86rem; margin-top: 8px !important; }
.ajuda-nota svg { flex: none; margin-top: 2px; }
.ajuda-secao h3 { margin: 18px 0 6px; color: var(--ink-900); font-size: 1rem; }
.ajuda-tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  color: var(--brand-600); background: var(--surface-2); border-radius: 999px; padding: 2px 9px; margin-left: 8px; vertical-align: middle; }
.ajuda-passos, .ajuda-lista { padding-left: 20px; margin: 8px 0; }
.ajuda-passos li, .ajuda-lista li { margin: 6px 0; line-height: 1.55; color: var(--ink-800); }
.ajuda-passos { list-style: decimal; }
.ajuda-lista { list-style: disc; }
.ajuda-faq dt { font-weight: 600; color: var(--ink-900); margin-top: 12px; }
.ajuda-faq dd { margin: 4px 0 0; color: var(--ink-700); line-height: 1.55; }

/* ---------- Resgate (retorno vencido + exames solicitados) ---------- */
/* Seletor de tipo: controle segmentado, não chip solto */
.res-segmento { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--borda);
  border-radius: 999px; background: var(--surface-2); align-self: flex-start; }
.res-segmento a { padding: 7px 14px; border-radius: 999px; font-size: .86rem; font-weight: 600;
  color: var(--ink-500); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: var(--transicao); }
.res-segmento a:hover { color: var(--ink-900); }
.res-segmento a.ativo { background: var(--surface); color: var(--brand-600); box-shadow: 0 1px 3px rgba(16,42,67,.12); }
.res-contador { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--brand-600); color: #fff; font-size: .72rem; font-weight: 700; }

/* Números do topo */
.res-resumo { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); margin-bottom: 16px; }
@media (min-width: 900px) { .res-resumo { grid-template-columns: repeat(4, 1fr); } }
.res-num { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--borda);
  border-radius: var(--raio); background: var(--surface); text-decoration: none; color: inherit; transition: var(--transicao); }
.res-num:hover { border-color: var(--brand-400); }
.res-num strong { font-size: 1.6rem; font-weight: 800; line-height: 1.1; color: var(--ink-900); }
.res-num span { font-size: .8rem; color: var(--ink-500); }
.res-num.alerta { border-color: var(--danger); background: var(--danger-bg); }
.res-num.alerta strong, .res-num.alerta span { color: var(--danger); }
.res-num.ok strong { color: var(--ok); }

/* Abas + busca na mesma linha */
.res-barra { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid var(--borda); margin-bottom: 14px; }
.res-abas { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.res-abas::-webkit-scrollbar { display: none; }
.res-abas a { padding: 10px 14px; font-size: .9rem; font-weight: 600; color: var(--ink-500); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.res-abas a:hover { color: var(--ink-900); }
.res-abas a.ativo { color: var(--brand-600); border-bottom-color: var(--brand-600); }
.res-busca { position: relative; display: flex; align-items: center; margin-bottom: 8px; flex: 0 1 280px; }
.res-busca > svg { position: absolute; left: 11px; color: var(--ink-500); pointer-events: none; }
.res-busca input[name="busca"] { width: 100%; min-height: 38px; padding: 8px 32px 8px 34px; border: 1px solid var(--borda);
  border-radius: 999px; background: var(--surface); color: var(--ink-900); font-family: var(--fonte); font-size: .9rem; }
.res-busca input[name="busca"]:focus { outline: 2px solid var(--brand-400); outline-offset: 1px; }
.res-limpar { position: absolute; right: 8px; color: var(--ink-500); display: grid; place-items: center; }

/* Cartão compacto */
.res-lista { display: grid; gap: 10px; }
.res-cartao { padding: 14px 16px; border-left: 3px solid var(--borda); }
.res-cartao.atrasado { border-left-color: var(--danger); }
.res-linha { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.res-paciente { min-width: 0; }
.res-nome { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.res-nome a { font-weight: 700; font-size: 1rem; color: var(--ink-900); text-decoration: none; }
.res-nome a:hover { color: var(--brand-600); }
.res-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: .82rem; color: var(--ink-500); }
.res-meta span { display: inline-flex; align-items: center; gap: 5px; }
.res-total { text-align: right; flex: none; }
.res-total strong { display: block; font-size: 1.25rem; font-weight: 800; color: var(--brand-600); line-height: 1.15; }
.res-total strong.sem { font-size: .95rem; color: var(--ink-500); font-weight: 700; }
.res-total small { font-size: .74rem; color: var(--ink-500); }

/* Itens: resumo numa linha; detalhe e valores sob demanda */
.res-itens { margin-top: 10px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--surface-2); }
.res-itens summary { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer;
  list-style: none; font-size: .86rem; color: var(--ink-700); }
.res-itens summary::-webkit-details-marker { display: none; }
.res-qtd { flex: none; font-weight: 700; color: var(--ink-900); }
.res-resumo-itens { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-ver { margin-left: auto; flex: none; color: var(--brand-600); font-weight: 600; font-size: .8rem; }
.res-itens[open] .res-ver { visibility: hidden; }
.res-itens ul { list-style: none; margin: 0; padding: 0 12px 6px; }
.res-itens li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--borda);
  font-size: .85rem; color: var(--ink-800); }
.res-itens li small { color: var(--ink-500); }
.res-itens li > span:last-child { white-space: nowrap; font-weight: 600; color: var(--ink-900); }
.res-itens li > span.sem { color: var(--ink-500); font-weight: 500; }

/* Rodapé: WhatsApp + observação + resultado em um clique */
.res-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.res-obs { flex: 1 1 200px; min-height: 34px; padding: 6px 10px; border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--surface); color: var(--ink-900); font-family: var(--fonte); font-size: .85rem; }
.res-obs:focus { outline: 2px solid var(--brand-400); outline-offset: 1px; }
.res-sem-wpp { font-size: .8rem; }
.res-resultados { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.res-btn { min-height: 34px; padding: 6px 12px; border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--surface); color: var(--ink-700); font-family: var(--fonte); font-size: .82rem; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: var(--transicao); }
.res-btn:hover { border-color: var(--brand-400); color: var(--brand-600); }
.res-btn.ok { border-color: var(--ok); color: var(--ok); background: var(--ok-bg); }
.res-btn.ok:hover { filter: brightness(.97); }
.res-baixa-feita { justify-content: space-between; font-size: .84rem; color: var(--ink-500); }
.res-baixa-feita em { color: var(--ink-700); }

@media (max-width: 640px) {
  .res-linha { flex-direction: column; }
  .res-total { text-align: left; }
  .res-busca { flex-basis: 100%; }
  .res-resultados { width: 100%; }
  .res-btn { flex: 1 1 calc(50% - 6px); justify-content: center; }
}

/* Hub de Configuração: grade de cartões-atalho */
.grade-config { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grade-config { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .grade-config { grid-template-columns: 1fr 1fr 1fr; } }
.config-cartao { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; transition: var(--transicao); }
.config-cartao:hover { border-color: var(--brand-400); transform: translateY(-1px); }
.config-cartao-icone { flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: var(--raio-sm); background: var(--surface-2); color: var(--brand-600); }
.config-cartao-texto { display: flex; flex-direction: column; min-width: 0; }
.config-cartao-texto strong { color: var(--ink-900); }
.config-cartao-texto small { color: var(--ink-500); font-size: .82rem; line-height: 1.4; margin-top: 2px; }
.config-cartao-seta { margin-left: auto; flex: none; color: var(--ink-500); }

/* Wizard: um passo por vez (só quando o JS liga o modo em-passos) */
.em-passos .triagem-passo { display: none; }
.em-passos .triagem-passo.ativo { display: block; animation: passo-entra .25s ease; }
@keyframes passo-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.triagem-progresso { margin: 4px 0 16px; }
.triagem-progresso-barra { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--borda); }
.triagem-progresso-barra i { display: block; height: 100%; width: 0; background: var(--brand-500); transition: width .3s ease; }
.triagem-progresso-txt { margin-top: 7px; font-size: .82rem; color: var(--ink-500); font-weight: 600; }
.triagem-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; }
.triagem-nav .btn { min-width: 130px; justify-content: center; }

/* Banda CTA da avaliação, na home */
.site-triagem-cta-caixa { display: grid; gap: 18px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .site-triagem-cta-caixa { grid-template-columns: 2fr 1fr; } }
.site-triagem-cta-caixa .site-acoes { margin: 0; justify-self: start; }
@media (min-width: 900px) { .site-triagem-cta-caixa .site-acoes { justify-self: end; } }

/* ==========================================================================
   BLOCO 5 — INTERAÇÃO E MOVIMENTO (28/09/2026)

   Pedido do Gabriel: tirar a "linha padrão" do hover e trabalhar animação e
   acabamento — fácil de usar, bonito de entender. Mesmas regras do Bloco 4:
   só CSS, nenhuma view muda.

   Princípios:
   1. SUBLINHADO SÓ EM LINK DE TEXTO, e animado (cresce da esquerda). Link que
      é componente (cartão, aba, botão, nome em lista) muda de cor/relevo.
   2. UM SISTEMA DE MOVIMENTO: três durações e uma curva de saída. Hover rápido,
      abrir/entrar médio, nada acima de ~360ms (clique repetido não pode pesar).
   3. O QUE É CLICÁVEL SE DENUNCIA: superfície clicável levanta 2px e ganha
      sombra suave no hover e "afunda" ao pressionar. Repouso continua plano.
   4. FOCO DE TECLADO VISÍVEL e consistente, só para teclado (:focus-visible).
   5. prefers-reduced-motion desliga tudo.
   ========================================================================== */
:root {
  --ease-saida: cubic-bezier(.2, .8, .2, 1);
  --mov-rapido: .14s var(--ease-saida);
  --mov: .22s var(--ease-saida);
  --mov-lento: .36s var(--ease-saida);
  --sombra-hover: 0 10px 24px -10px rgba(11, 37, 69, .28);
}
html[data-theme="dark"] { --sombra-hover: 0 12px 28px -12px rgba(0, 0, 0, .75); }

/* ---------- 1. Links ---------- */
a:not([class]) { transition: color var(--mov-rapido), background-size var(--mov); }
a:not([class]):hover { color: var(--brand-500); }
/* Link dentro de TEXTO corrido: sublinhado fino que desenha da esquerda */
:is(p, dd, .dica, .h-sub, .texto-mudo, .ajuda-secao li, .site-contato-nota) a:not([class]) {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1.5px;
  padding-bottom: 1px;
}
:is(p, dd, .dica, .h-sub, .texto-mudo, .ajuda-secao li, .site-contato-nota) a:not([class]):hover { background-size: 100% 1.5px; }

/* ---------- 2. Foco de teclado ---------- */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: var(--raio-sm);
}
:where(a, button, summary):focus:not(:focus-visible) { outline: none; }
:where(.campo input, .campo select, .campo textarea, select, .res-obs, .res-busca input, .dp-visor) {
  transition: border-color var(--mov-rapido), box-shadow var(--mov-rapido), background-color var(--mov-rapido);
}

/* ---------- 3. Botões ---------- */
.btn, .res-btn {
  transition: background-color var(--mov-rapido), border-color var(--mov-rapido), color var(--mov-rapido),
              box-shadow var(--mov), transform var(--mov-rapido);
}
.btn:not(.btn-primario):not(.btn-perigo):hover { border-color: var(--ink-300); }
.btn-primario:hover, .btn-perigo:hover { transform: translateY(-1px); box-shadow: var(--sombra-hover); }
.btn:active, .res-btn:active { transform: translateY(0) scale(.97); box-shadow: none; transition-duration: .06s; }
.btn:disabled, .btn[disabled] { transform: none; box-shadow: none; cursor: not-allowed; opacity: .6; }

/* ---------- 4. Superfícies clicáveis ---------- */
:is(.card-hover, a.card, .config-cartao, .res-num, .chip-painel) {
  transition: border-color var(--mov), box-shadow var(--mov), transform var(--mov), background-color var(--mov);
}
:is(.card-hover, a.card, .config-cartao, .res-num):hover {
  transform: translateY(-2px); box-shadow: var(--sombra-hover); border-color: var(--brand-400);
}
:is(.card-hover, a.card, .config-cartao, .res-num):active {
  transform: translateY(0) scale(.99); box-shadow: none; transition-duration: .06s;
}
.res-num.alerta:hover { border-color: var(--danger); }
/* KPI do Painel é régua (sem caixa): em vez de levantar, ganha fundo suave */
.grade-kpi a.card.kpi { border-radius: var(--raio-sm); }
.grade-kpi a.card.kpi:hover { transform: none; box-shadow: none; background: var(--surface-2); }
.grade-kpi a.card.kpi:hover .numero { color: var(--brand-600); }
.grade-kpi a.card.kpi .numero { transition: color var(--mov); }
.config-cartao .config-cartao-seta { transition: transform var(--mov); }
.config-cartao:hover .config-cartao-seta { transform: translateX(3px); color: var(--brand-600); }

/* ---------- 5. Abas: indicador que desliza ---------- */
.res-abas a { position: relative; border-bottom-color: transparent !important; transition: color var(--mov-rapido); }
.res-abas a::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px;
  background: var(--ink-300); transform: scaleX(0); transition: transform var(--mov), background-color var(--mov);
}
.res-abas a:hover::after { transform: scaleX(.35); }
.res-abas a.ativo::after { transform: scaleX(1); background: var(--brand-600); }
.res-segmento a { transition: background-color var(--mov), color var(--mov), box-shadow var(--mov); }
.chip { transition: border-color var(--mov-rapido), background-color var(--mov-rapido), color var(--mov-rapido); }
a.chip:hover { border-color: var(--brand-400); color: var(--brand-600); }

/* ---------- 6. Menu lateral ---------- */
.menu a { position: relative; transition: background-color var(--mov-rapido), color var(--mov-rapido); }
.menu a svg { transition: transform var(--mov); }
.menu a:hover svg { transform: translateX(2px); }
.menu a.ativo::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--menu-ativo-ink); transform-origin: center; animation: indicador-entra var(--mov-lento) backwards;
}
@keyframes indicador-entra { from { transform: scaleY(0); } }

/* ---------- 7. Tabelas ---------- */
.tbl td { transition: background-color var(--mov-rapido); }

/* ---------- 8. Entrada de página e de listas ----------
   fill-mode "backwards": ao terminar, NENHUM transform fica aplicado — senão o
   elemento viraria bloco de contenção e quebraria modal position:fixed. */
@keyframes entra { from { opacity: 0; transform: translateY(6px); } }
.conteudo > :not(.modal-fundo):not([hidden]):not(script) { animation: entra var(--mov-lento) backwards; }
.conteudo > :nth-child(2) { animation-delay: 30ms; }
.conteudo > :nth-child(3) { animation-delay: 60ms; }
.conteudo > :nth-child(4) { animation-delay: 90ms; }
.conteudo > :nth-child(n+5) { animation-delay: 120ms; }
.res-lista > .res-cartao { animation: entra var(--mov-lento) backwards; }
.res-lista > .res-cartao:nth-child(2) { animation-delay: 40ms; }
.res-lista > .res-cartao:nth-child(3) { animation-delay: 80ms; }
.res-lista > .res-cartao:nth-child(n+4) { animation-delay: 120ms; }

/* ---------- 9. Modal ---------- */
@keyframes modal-entra { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.modal-caixa { animation: modal-entra var(--mov) backwards; }

/* ---------- 10. Resgate: cartão, itens e botões de resultado ---------- */
.res-cartao { transition: border-color var(--mov), box-shadow var(--mov); }
.res-cartao:hover { box-shadow: var(--sombra-hover); }
.res-nome a { transition: color var(--mov-rapido); }
.res-itens summary { border-radius: var(--raio-sm); transition: background-color var(--mov-rapido); }
.res-itens summary:hover { background: var(--surface); }
.res-ver { display: inline-flex; align-items: center; gap: 6px; }
.res-ver::after {
  content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform var(--mov);
}
.res-itens[open] .res-ver { visibility: visible; font-size: 0; }
.res-itens[open] .res-ver::before { content: "ocultar"; font-size: .8rem; }
.res-itens[open] .res-ver::after { transform: translateY(2px) rotate(-135deg); }
@keyframes desdobra { from { opacity: 0; transform: translateY(-4px); } }
.res-itens[open] ul { animation: desdobra var(--mov) backwards; }
.res-btn.ok:hover { background: var(--ok); border-color: var(--ok); color: #fff; filter: none; }
html[data-theme="dark"] .res-btn.ok:hover { color: #06121f; }
.res-btn[value="pensar"]:hover { background: var(--info-bg); border-color: var(--info); color: var(--info); }
.res-btn[value="nao_quer"]:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.res-btn[value="sem_contato"]:hover { background: var(--surface-2); border-color: var(--ink-300); color: var(--ink-900); }

/* ---------- 11. Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  :is(.card-hover, a.card, .config-cartao, .res-num, .btn-primario):hover { transform: none; }
}

/* Resumo de itens: clique de mouse não deixa a moldura preta do navegador;
   teclado continua com anel de foco visível e discreto. */
.res-itens summary:focus { outline: none; }
.res-itens summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--brand-400); }

/* ---------- Resgate: números do topo como FILTROS ----------
   Antes o "atrasados" tinha fundo vermelho fixo e parecia sempre selecionado.
   Agora: repouso neutro (o alerta fica só no número vermelho); SELECIONADO =
   borda da marca + fundo tingido + marca de check no canto. */
.res-num { position: relative; }
.res-num.alerta { background: var(--surface); border-color: var(--borda); }
.res-num.alerta span { color: var(--ink-500); }
.res-num.alerta strong { color: var(--danger); }
.res-num.alerta.zerado strong { color: var(--ink-900); }
.res-num.ativo {
  border-color: var(--brand-500); background: color-mix(in srgb, var(--brand-500) 7%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--brand-500);
}
.res-num.ativo span { color: var(--brand-600); font-weight: 600; }
.res-num.alerta.ativo {
  border-color: var(--danger); background: var(--danger-bg); box-shadow: inset 0 0 0 1px var(--danger);
}
.res-num.alerta.ativo span { color: var(--danger); }
.res-num.ativo::after {
  content: ""; position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand-600) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
  animation: marca-entra var(--mov) backwards;
}
.res-num.alerta.ativo::after { background-color: var(--danger); }
@keyframes marca-entra { from { transform: scale(.4); opacity: 0; } }
.res-num.ativo:hover { transform: none; box-shadow: inset 0 0 0 1px var(--brand-500); }
.res-num.alerta.ativo:hover { box-shadow: inset 0 0 0 1px var(--danger); }

/* ---------- Concluídos: chips de status ---------- */
.res-status { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.res-status a {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--surface); color: var(--ink-700);
  font-size: .82rem; font-weight: 600; text-decoration: none;
  transition: border-color var(--mov-rapido), background-color var(--mov-rapido), color var(--mov-rapido);
}
.res-status a span { font-size: .72rem; color: var(--ink-500); font-weight: 700; }
.res-status a:hover { border-color: var(--brand-400); color: var(--brand-600); }
.res-status a.ativo { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.res-status a.ativo span { color: rgba(255, 255, 255, .8); }
html[data-theme="dark"] .res-status a.ativo { color: #06121f; }
html[data-theme="dark"] .res-status a.ativo span { color: rgba(6, 18, 31, .75); }

/* ---------- Concluídos: situação atual + registrar movimento ---------- */
.res-atual { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; font-size: .84rem; color: var(--ink-500); }
.res-mover, .res-hist { margin-top: 8px; }
.res-mover > summary, .res-hist > summary {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--raio-sm);
  font-size: .84rem; font-weight: 600; color: var(--brand-600); cursor: pointer; list-style: none;
  transition: background-color var(--mov-rapido);
}
.res-mover > summary::-webkit-details-marker, .res-hist > summary::-webkit-details-marker { display: none; }
.res-mover > summary:hover, .res-hist > summary:hover { background: var(--surface-2); }
.res-mover > summary:focus, .res-hist > summary:focus { outline: none; }
.res-mover > summary:focus-visible, .res-hist > summary:focus-visible { box-shadow: inset 0 0 0 2px var(--brand-400); }
.res-mover[open] > summary { background: var(--surface-2); }
.res-mover-form { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 4px; animation: desdobra var(--mov) backwards; }
.res-mover-form .res-obs { flex: none; width: 100%; }
.res-reabrir { margin-top: 4px; }
.btn-link { border: 0; background: none; padding: 4px 0; color: var(--ink-500); font-family: var(--fonte);
  font-size: .8rem; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: color var(--mov-rapido); }
.btn-link:hover { color: var(--danger); }

/* ---------- Histórico: linha do tempo ---------- */
.res-hist > summary { color: var(--ink-500); }
.res-hist > summary span { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--surface-2); border: 1px solid var(--borda); font-size: .7rem; color: var(--ink-700); }
.res-hist ol { list-style: none; margin: 8px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--borda);
  animation: desdobra var(--mov) backwards; }
.res-hist li { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 0 0 12px 10px; }
.res-hist li::before { content: ""; position: absolute; left: -20px; top: 6px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--brand-400); }
.res-hist li:first-child::before { background: var(--brand-600); border-color: var(--brand-600); }
.res-hist li:last-child { padding-bottom: 2px; }
.res-hist li .badge { flex: none; }
.res-hist li p { margin: 0 0 2px; font-size: .86rem; color: var(--ink-800); }
.res-hist li small { font-size: .76rem; color: var(--ink-500); }

/* Token intermediário usado por textos de lista (faltava no tema) */
:root { --ink-800: #243140; }
html[data-theme="dark"] { --ink-800: #d4dee9; }

/* ---------- Resgate: status FINAL (Realizou) ---------- */
.res-final { margin-top: 10px; padding: 10px 12px; border-radius: var(--raio-sm);
  background: var(--ok-bg); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.res-final-selo { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 700; color: var(--ok); }
.res-desfazer > summary { list-style: none; cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--ink-500);
  padding: 4px 8px; border-radius: var(--raio-sm); transition: color var(--mov-rapido), background-color var(--mov-rapido); }
.res-desfazer > summary::-webkit-details-marker { display: none; }
.res-desfazer > summary:hover { color: var(--danger); background: var(--surface); }
.res-desfazer > summary:focus { outline: none; }
.res-desfazer > summary:focus-visible { box-shadow: inset 0 0 0 2px var(--brand-400); }
.res-desfazer[open] { flex-basis: 100%; }
.res-desfazer[open] > summary { color: var(--danger); }
.res-desfazer-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; animation: desdobra var(--mov) backwards; }
.res-desfazer-form .res-obs { flex: 1 1 260px; }
.res-btn.perigo { border-color: var(--danger); color: var(--danger); background: var(--surface); }
.res-btn.perigo:hover { background: var(--danger); color: #fff; }

/* ---------- Anonimização: pop-up da 2ª etapa ---------- */
.modal-anonimizar { width: min(520px, 100%); border-top: 3px solid var(--danger); }
.modal-anonimizar h3 { display: flex; align-items: center; gap: 8px; color: var(--danger); margin: 0 0 4px; }
.anon-consequencias { margin: 12px 0; padding: 12px 14px; border-radius: var(--raio-sm);
  background: var(--danger-bg); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  max-height: 240px; overflow-y: auto; }
.anon-consequencias p { margin: 0 0 8px; font-size: .86rem; line-height: 1.5; color: var(--ink-900); }
.anon-consequencias p:last-child { margin-bottom: 0; }
.anon-ciente { margin: 4px 0 14px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: var(--raio-sm);
  transition: border-color var(--mov-rapido), background-color var(--mov-rapido); }
.anon-ciente:has(input:checked) { border-color: var(--danger); background: var(--danger-bg); }
.modal-anonimizar .acoes { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- Óbito do paciente ---------- */
.obito-faixa { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  border-left: 3px solid var(--ink-500); background: var(--surface-2); }
.obito-faixa strong { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-900); }
.obito-desfazer > summary { list-style: none; cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--ink-500);
  padding: 4px 8px; border-radius: var(--raio-sm); transition: color var(--mov-rapido), background-color var(--mov-rapido); }
.obito-desfazer > summary::-webkit-details-marker { display: none; }
.obito-desfazer > summary:hover { color: var(--ink-900); background: var(--surface); }
.obito-desfazer[open] { flex-basis: 100%; }
.obito-desfazer form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; animation: desdobra var(--mov) backwards; }
.obito-desfazer input { flex: 1 1 240px; min-height: 34px; padding: 6px 10px; border: 1px solid var(--borda);
  border-radius: var(--raio-sm); background: var(--surface); color: var(--ink-900); font-family: var(--fonte); }
.obito-cartao { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  border-left: 3px solid var(--ink-300); }
.modal-obito { width: min(560px, 100%); border-top: 3px solid var(--ink-500); }
.modal-obito h3 { margin: 0 0 10px; }
.obito-efeitos { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--raio-sm); background: var(--surface-2);
  border: 1px solid var(--borda); max-height: 260px; overflow-y: auto; font-size: .86rem; }
.obito-efeitos p { margin: 0 0 6px; }
.obito-efeitos ul { margin: 0 0 10px; padding-left: 18px; }
.obito-efeitos li { margin: 3px 0; color: var(--ink-800); }
.obito-lista li { font-weight: 600; }
.modal-obito .acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* ==========================================================================
   BASE GLOBAL DE CAMPOS — nenhum input fica "cru"
   Antes só havia estilo para inputs DENTRO de .campo; qualquer campo fora dele
   (ex.: "adiar contato em [30] dias") saía com a aparência do navegador.
   :where() = especificidade zero: todo componente com estilo próprio
   (.campo, .res-obs, .dp-visor, busca…) continua vencendo.
   ========================================================================== */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"])
       :not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
       textarea) {
  min-height: 38px; padding: 8px 12px;
  border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background-color: var(--surface); color: var(--ink-900);
  font-family: var(--fonte); font-size: .92rem; line-height: 1.3;
  transition: border-color var(--mov-rapido), box-shadow var(--mov-rapido), background-color var(--mov-rapido);
}
:where(input, textarea)::placeholder { color: var(--ink-300); opacity: 1; }
:where(input:not([type="checkbox"]):not([type="radio"]), textarea):hover { border-color: var(--ink-300); }
:where(input:not([type="checkbox"]):not([type="radio"]), textarea):focus {
  outline: 2px solid var(--brand-400); outline-offset: 1px; border-color: var(--brand-400);
}
:where(input, textarea):disabled, :where(input)[readonly] { background-color: var(--surface-2); color: var(--ink-500); }
/* Número: sem as setinhas do sistema (feias e minúsculas); digita-se o valor */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Campo com sufixo: [ 30 | dias ] ---------- */
.campo-sufixo { display: inline-flex; align-items: stretch; border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--surface); overflow: hidden; transition: border-color var(--mov-rapido), box-shadow var(--mov-rapido); }
.campo-sufixo:hover { border-color: var(--ink-300); }
.campo-sufixo:focus-within { border-color: var(--brand-400); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-400) 35%, transparent); }
.campo-sufixo input { border: 0 !important; outline: none !important; border-radius: 0; width: 64px; min-height: 36px;
  text-align: center; font-weight: 700; background: transparent; }
.campo-sufixo span { display: grid; place-items: center; padding: 0 12px; background: var(--surface-2);
  border-left: 1px solid var(--borda); color: var(--ink-500); font-size: .84rem; font-weight: 600; }

/* ---------- Linha "adiar contato" da ficha ---------- */
.adiar-contato { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.adiar-contato > label { font-size: .88rem; color: var(--ink-700); font-weight: 600; }
.adiar-atalhos { display: inline-flex; gap: 4px; }
.adiar-atalhos button { border: 1px solid var(--borda); background: var(--surface); color: var(--ink-700); border-radius: 999px;
  padding: 4px 10px; font-size: .78rem; font-weight: 600; cursor: pointer; font-family: var(--fonte);
  transition: border-color var(--mov-rapido), color var(--mov-rapido), background-color var(--mov-rapido); }
.adiar-atalhos button:hover { border-color: var(--brand-400); color: var(--brand-600); }
.adiar-atalhos button.ativo { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
html[data-theme="dark"] .adiar-atalhos button.ativo { color: #06121f; }

/* ---------- Botões: contraste no hover e estado desabilitado ----------
   O hover genérico (.btn:hover = fundo cinza-claro) vazava para o botão de
   perigo: texto branco sobre fundo quase branco. Agora cada variante colorida
   tem o próprio hover (tom mais escuro, texto sempre legível). */
.btn-perigo:hover { background: color-mix(in srgb, var(--danger) 85%, #000); border-color: color-mix(in srgb, var(--danger) 85%, #000); color: #fff; }
html[data-theme="dark"] .btn-perigo { color: #1b0a08; }
html[data-theme="dark"] .btn-perigo:hover { background: color-mix(in srgb, var(--danger) 85%, #fff); border-color: color-mix(in srgb, var(--danger) 85%, #fff); color: #1b0a08; }

/* Desabilitado não reage a hover (antes ficava ainda mais apagado ao passar o
   mouse) e mantém a própria cor, só esmaecida — dá para ler o que será feito. */
.btn:disabled, .btn[disabled] { pointer-events: none; opacity: .5; transform: none; box-shadow: none; }
.btn-perigo:disabled, .btn-perigo[disabled] { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-primario:disabled, .btn-primario[disabled] { background: var(--brand-900); border-color: var(--brand-900); color: #fff; }
html[data-theme="dark"] .btn-primario:disabled { background: var(--brand-500); border-color: var(--brand-500); color: #06121f; }
/* O que libera o botão é a ciência: o cursor explica isso no container */
[data-modal-ciente]:has([data-exige-ciente]:disabled) .acoes,
.modal-anonimizar:has([data-anon-confirmar]:disabled) .acoes { cursor: not-allowed; }

/* ---------- Marca de paciente falecido (flor + túmulo) ----------
   Discreta e respeitosa: flor em rosa-antigo, túmulo em cinza. Aparece na
   frente do nome em todas as telas (helper marca_obito). */
:root { --obito-flor: #b5627f; }
html[data-theme="dark"] { --obito-flor: #e3a3bd; }
.marca-obito { display: inline-flex; align-items: center; gap: 1px; margin-right: 4px; vertical-align: -0.12em; cursor: help; }
.marca-obito svg { flex: none; }
.marca-obito svg:first-child { color: var(--obito-flor); }
.marca-obito svg:last-child { color: var(--ink-500); }
h1 .marca-obito svg, .h-hero .marca-obito svg { width: 22px; height: 22px; }