/* ================================================================
   Painel Jaqueline Cassol -- Design System
   Paleta: navy (institucional) + vinho (marca) + verde/ambar (status)
   ================================================================ */

:root {
  /* ----------------------------------------------------------------
     COR

     O fundo cinza (#cccccc) deixava o Painel com cara de formulario
     antigo: cinza sobre cinza, sem profundidade, e todo card lutando
     para se destacar. Agora o desenho e o de painel moderno --

       fundo azul-acinzentado bem claro  ->  o "papel" da tela
       cartao branco puro                ->  onde o conteudo mora
       azul vivo                         ->  o que se pode clicar
       navy                              ->  a barra lateral (identidade)
       vinho/dourado                     ->  a marca da campanha

     O branco do cartao sobre o azul-claro do fundo e o que cria a
     sensacao de "cartao flutuando", sem precisar de borda pesada.
     ---------------------------------------------------------------- */
  --bg: #eef2f9;
  --surface: #ffffff;
  --surface-2: #f4f7fc;
  --ink: #0f172a;
  --ink-soft: #475569;
  --muted: #5c6a80;
  --line: #dde4ef;
  --line-soft: #e9eef6;

  --navy: #131c38;
  --navy-2: #0a1024;
  --wine: #7a1f1f;
  --wine-2: #591616;
  --gold: #c9932f;

  /* Azul de acao -- e o "clicavel" do Painel inteiro (botao, link ativo,
     foco do teclado).
     E o AZUL ACO: da a presenca que um botao precisa ter sem o brilho do
     azul de aplicativo, e fica na mesma familia do navy da barra
     lateral. Num sistema de gestao o clicavel precisa parecer serio, nao
     chamativo -- quem faz o papel de destaque e o dourado da marca,
     usado com parcimonia.
     Contraste conferido: branco sobre --brand da 9,2:1 e --brand sobre
     cartao branco da 9,2:1 -- folgado em AAA nos dois sentidos. */
  --brand: #24487A;
  --brand-forte: #1A3660;
  --brand-escuro: #12253F;
  --brand-suave: #F0F4FA;
  --brand-borda: #cbd8ec;
  /* A versao clara existe para o que fica SOBRE o navy da barra lateral,
     onde o azul aco quase desapareceria (contraste 1,8:1). */
  --brand-claro: #7AA6E0;

  --success: #15803d;
  --success-bg: #dcfce7;
  --warn: #92400e;
  --warn-bg: #fef3c7;
  --danger: #b91c1c;
  --danger-bg: #fee2e2;
  --info: #24487A;
  --info-bg: #F0F4FA;
  --info-borda: #cbd8ec;

  /* Espacamento */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;

  /* Raio e sombra -- cantos mais abertos e sombra azulada (a sombra
     cinza-neutra sobre fundo azul-claro parecia sujeira). */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 2px 10px rgba(26,54,96,.06);
  --shadow-md: 0 4px 12px rgba(15,23,42,.05), 0 12px 32px rgba(26,54,96,.10);
  --shadow-lg: 0 8px 20px rgba(15,23,42,.07), 0 24px 56px rgba(26,54,96,.15);

  /* Tipografia -- Inter quando o navegador conseguir baixar; se nao
     conseguir (internet bloqueada, servidor sem acesso), cai na fonte
     do proprio sistema e nada quebra. */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-num: "Inter", ui-monospace, "SF Mono", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
/* O atributo hidden do HTML tem que ganhar de qualquer display definido
   na folha de estilo. Sem isto, esconder um .form-field (display:flex)
   com hidden nao esconde nada -- foi o que aconteceu com o campo de
   arquivo da janela de anexo. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
html, body { margin:0; padding:0; overflow-x:hidden; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  width: 100%;
}
img, svg:not(.icon) { max-width: 100%; height: auto; }
canvas { max-width: 100%; }
a { color: inherit; }
::selection { background: rgba(36,72,122,.18); }

/* Foco acessivel visivel em qualquer elemento navegavel por teclado */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2.5px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}

.icon { width: 18px; height: 18px; flex: none; display:inline-block; vertical-align: -4px; }

/* ---------------- Layout geral: barra lateral + conteudo ---------------- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

.app-shell { display:flex; align-items:stretch; min-height: 100vh; }

/* ----------------------------------------------------------------
   BARRA LATERAL

   São catorze categorias e mais de cinquenta telas. O que faz esse
   menu funcionar não é estilo, é HIERARQUIA em três níveis:

     SEÇÃO     (Campanha, Relacionamento, Operação, Análise, Sistema)
       CATEGORIA  (Base de Eleitores, Contratos, Financeiro...)
         TELA       (Cadastro Eleitor, Aniversariantes...)

   Cada nível tem peso, cor e tamanho próprios -- a pessoa acha a seção
   primeiro, depois a categoria, e só então lê a lista de telas. Antes,
   os catorze rótulos tinham a mesma cor apagada e o olho não tinha
   onde se apoiar.
   ---------------------------------------------------------------- */
.sidebar {
  width: 268px; flex: none;
  background: linear-gradient(180deg, var(--navy-2), var(--navy) 78%);
  color:#fff; display:flex; flex-direction:column;
  padding: 20px 14px 16px; position: sticky; top:0; height:100vh;
  overflow-y:auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 99px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.32); }

.sidebar-brand {
  padding: 4px 10px 16px; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.brand-name { font-size:17px; font-weight:800; line-height:1.25; letter-spacing:-.01em; }
.brand-sub { font-size:11px; color:#a9b4d2; font-weight:700; margin-top:4px; text-transform:uppercase; letter-spacing:.05em; }

/* Quem está usando o sistema -- com a inicial no avatar, que é o que
   o olho reconhece de relance melhor do que o nome escrito. */
.sidebar-user {
  display:flex; align-items:center; gap:10px;
  padding: 0 10px 14px; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.sidebar-user-ini {
  flex:none; width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center; font-size:14px; font-weight:800; color:#211705;
  background: linear-gradient(135deg, var(--gold), #b8842a);
}
.sidebar-user-txt { min-width:0; }
.sidebar-user-name { font-size:13.5px; font-weight:800; color:#fff; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user-role { font-size:10.5px; color:#a9b4d2; font-weight:700; margin-top:2px;
  text-transform:uppercase; letter-spacing:.04em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Busca -- num menu deste tamanho, digitar é mais rápido que procurar. */
.sidebar-busca {
  display:flex; align-items:center; gap:8px; margin-bottom:14px;
  padding: 9px 11px; border-radius:10px;
  background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
}
.sidebar-busca:focus-within { border-color: var(--brand-claro); background: rgba(255,255,255,.12); }
.sidebar-busca .icon { width:16px; height:16px; color:#a9b4d2; flex:none; }
.sidebar-busca input {
  flex:1; min-width:0; background:none; border:0; outline:none; color:#fff;
  font-family:inherit; font-size:13.5px; font-weight:600;
}
.sidebar-busca input::placeholder { color:#8f9bbd; font-weight:600; }
.sidebar-busca kbd {
  flex:none; font-family:inherit; font-size:11px; font-weight:800; color:#a9b4d2;
  border:1px solid rgba(255,255,255,.18); border-radius:5px; padding:1px 6px;
}
.sidebar-busca.is-ativa kbd { display:none; }

.sidebar-nav { display:flex; flex-direction:column; gap:2px; }
.sidebar-vazio { margin: 12px 10px; font-size:12.5px; color:#a9b4d2; }

/* NÍVEL 1 -- a seção. Fina, espaçada, com um fio de cada lado. */
.sidebar-secao {
  display:flex; align-items:center; gap:9px;
  margin: 16px 8px 4px; color:#7e8bb0;
  font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
}
.sidebar-secao::after {
  content:''; flex:1; height:1px; background: rgba(255,255,255,.10);
}
.sidebar-nav > .sidebar-secao:first-of-type { margin-top: 2px; }

/* NÍVEL 2 -- a categoria. Clicável, com área de toque de verdade. */
.sidebar-nav-label {
  width:100%; padding:9px 11px; border-radius:9px;
  font-size:12.2px; font-weight:800; letter-spacing:.03em;
  color:#c3cde8; background:none; border:none; font-family:inherit;
  display:flex; align-items:center; gap:8px; cursor:pointer; text-align:left;
  transition: background .15s ease, color .15s ease;
}
.sidebar-nav-label:hover { background: rgba(255,255,255,.07); color:#fff; }
.sidebar-nav-label:focus-visible { outline:2px solid var(--brand-claro); outline-offset:2px; }
.sidebar-nav-label .chevron {
  width:14px; height:14px; flex:none; margin-left:auto; opacity:.7;
  transition: transform .18s ease;
  transform: rotate(90deg);          /* aberto: aponta para baixo */
}
.sidebar-nav-group:not(.open) .sidebar-nav-label .chevron { transform: rotate(0deg); }

/* A categoria da tela aberta fica marcada mesmo quando recolhida --
   é o "você está aqui" do menu. */
.sidebar-nav-group.is-atual > .sidebar-nav-label { color:#fff; }
.sidebar-nav-group.is-atual > .sidebar-nav-label::before {
  content:''; width:6px; height:6px; border-radius:50%; background: var(--gold); flex:none;
}

.sidebar-nav-items {
  display:flex; flex-direction:column; gap:2px;
  margin: 2px 0 6px; padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,.10);
}
.sidebar-nav-group:not(.open) .sidebar-nav-items { display:none; }

/* NÍVEL 3 -- a tela. Alvo grande, texto claro, ícone sempre visível. */
.sidebar-nav a {
  position:relative;
  display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:9px;
  color:#dde4f5; text-decoration:none; font-weight:600; font-size:13.8px; line-height:1.25;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.sidebar-nav a .icon { width:17px; height:17px; opacity:.72; flex:none; transition: opacity .15s ease; }
.sidebar-nav a:hover { background: rgba(255,255,255,.09); color:#fff; }
.sidebar-nav a:hover .icon { opacity:1; }
.sidebar-nav a:focus-visible { outline:2px solid var(--brand-claro); outline-offset:2px; }
/* O item aberto era uma pastilha dourada -- forte demais, e brigava com
   o dourado que a marca usa para destaque. Agora e o azul de acao, o
   mesmo de todo botao do Painel: quem esta aberto fica evidente sem a
   tela parecer enfeitada. */
.sidebar-nav a.active {
  background: linear-gradient(90deg, rgba(66,116,190,.42), rgba(66,116,190,.08));
  color:#fff; font-weight:800; box-shadow: inset 3px 0 0 var(--brand-claro);
}
.sidebar-nav a.active .icon { opacity:1; }
/* O traço à esquerda amarra o item ativo à linha da categoria. */
.sidebar-nav a.active::before {
  content:''; position:absolute; left:-11px; top:6px; bottom:6px;
  width:2px; border-radius:2px; background: var(--brand-claro);
}

.sidebar-nav-exit {
  margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.12);
  color:#f0a9a9 !important; border-radius:0 !important;
}
.sidebar-nav-exit:hover { background: rgba(185,28,28,.22) !important; color:#fff !important; border-radius:9px !important; }


/* Faixa do topo + gaveta -- só aparecem no celular (ver o bloco
   responsivo lá embaixo). No computador ficam fora do caminho. */
.barra-topo { display:none; }
.sidebar-fundo { display:none; }
.sidebar-fechar { display:none; }

/* Busca em andamento: some tudo que não casou, sem mexer no resto.
   A categoria continua escrita em cima do resultado -- saber que
   "Prestador de serviço" está em Contratos é metade da resposta. */
.sidebar.is-buscando .sidebar-secao { display:none; }
.sidebar.is-buscando .sidebar-nav-label {
  pointer-events:none; cursor:default;
  padding: 10px 11px 3px; font-size:10px; letter-spacing:.14em;
  color:#8f9bbd; background:none !important;
}
.sidebar.is-buscando .sidebar-nav-label .chevron { display:none; }
.sidebar.is-buscando .sidebar-nav-group.is-atual > .sidebar-nav-label::before { display:none; }
.sidebar.is-buscando .sidebar-nav-items { display:flex !important; }
.sidebar.is-buscando .sidebar-nav-group.is-oculto { display:none; }
.sidebar.is-buscando .sidebar-nav a.is-oculto { display:none; }

.sidebar-foot {
  margin-top:auto; padding-top:16px; border-top:1px solid rgba(255,255,255,.12);
  font-size:11px; color:#8b93ac; line-height:1.6;
}

.content { flex:1; min-width:0; padding: 30px 34px 70px; }
.content > * { max-width: 1280px; margin-left:auto; margin-right:auto; }

.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom: 26px; }
.page-head-text h1 { font-size: clamp(21px,2.6vw,27px); margin:0 0 5px; font-weight:800; letter-spacing:-.01em; }
.page-sub { color: var(--muted); font-size: 13.6px; margin:0; max-width: 640px; }
.page-head-extra { flex:none; display:flex; gap:10px; flex-wrap:wrap; }
.page-date-badge {
  display:inline-flex; align-items:center; gap:9px; background: var(--surface);
  border:1px solid var(--line-soft); border-radius: var(--radius-sm); padding:11px 16px;
  font-size:13px; font-weight:700; color: var(--ink-soft); box-shadow: var(--shadow-sm);
}
.page-date-badge .icon { color: var(--navy); }

/* ---------------- KPIs ---------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 26px; }
/* -----------------------------------------------------------------
   O CARTAO DE DESTAQUE

   Era um gradiente laranja-dourado com brilho pulsante, e o texto
   ficava azul-escuro por cima do laranja -- ilegivel e com cara de
   promocao de loja, nao de sistema de gestao. Num painel, "este numero
   e o mais importante" nao se diz gritando: se diz invertendo o cartao.
   Fundo navy (a mesma cor da barra lateral, entao pertence ao sistema),
   numero em branco e um fio dourado no topo -- o dourado da marca,
   usado como assinatura e nao como tinta.
   Contraste do branco sobre o navy: 16,8:1.
   ----------------------------------------------------------------- */
.kpi-card.highlight {
  background: linear-gradient(160deg, #1B2547 0%, var(--navy) 55%, var(--navy-2) 100%);
  color:#fff; border-color: transparent;
  box-shadow: 0 6px 20px rgba(10,16,36,.22), var(--shadow-sm);
  position: relative; overflow: hidden;
}
.kpi-card.highlight::before {
  content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background: linear-gradient(90deg, var(--gold), #e5c06b 55%, var(--gold));
}
.kpi-card.highlight:hover { border-color: transparent; box-shadow: 0 10px 28px rgba(10,16,36,.30); }
.kpi-card.highlight .kpi-value { color:#fff; }
.kpi-card.highlight .kpi-label { color: #c3cbe4; }
.kpi-card.highlight small, .kpi-card.highlight .kpi-hint { color: rgba(255,255,255,.62); }
.kpi-card.highlight .kpi-icon { background: rgba(255,255,255,.13); color: #e5c06b; }
#uso-api-anthropic .zone-tag { display:inline-block; }
.kpi-grid-4 { grid-template-columns: repeat(4, 1fr); }
.kpi-grid-2 { grid-template-columns: repeat(2, 1fr); }
/* Os numeros do topo eram seis blocos azul-escuros, pesados, todos com o
   mesmo peso visual -- a tela abria "escura" e o olho nao sabia onde
   pousar. Viraram cartoes brancos com um quadradinho de cor no icone: o
   numero e a unica coisa escura, e e nele que o olho bate primeiro. */
.kpi-card {
  background: var(--surface);
  color: var(--ink); border-radius: var(--radius); padding: 20px 16px 18px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--line-soft);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--brand-borda); }
.kpi-icon {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--brand-suave); color: var(--brand-forte);
  display:flex; align-items:center; justify-content:center;
}
/* tabular-nums e o que impede a fileira de numeros de "dancar" quando um
   valor muda -- num painel que se atualiza sozinho isso se nota. */
.kpi-value { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height:1.1; font-variant-numeric: tabular-nums; }
.kpi-label { font-size: 12.2px; color: var(--muted); font-weight: 600; line-height:1.35; }
.kpi-card > small, .kpi-hint { font-size: 11.5px; color: var(--muted); font-weight:500; line-height:1.35; }

/* Variacao de cor do quadradinho do icone: o olho separa um numero do
   outro sem que a tela vire arco-iris. Todos sao tons FECHADOS, na
   mesma familia do azul aco -- num painel de gestao, cor saturada
   demais tira a seriedade do numero, que e o que importa ali.
   Contraste de cada tom sobre o proprio fundo: de 4,8:1 a 8,3:1. */
.kpi-card:nth-child(6n+2) .kpi-icon { background:#EEF6F5; color:#1F6F6B; }
.kpi-card:nth-child(6n+3) .kpi-icon { background:#FAF3E4; color:#8A6417; }
.kpi-card:nth-child(6n+4) .kpi-icon { background:#F1F2FA; color:#3F4A7A; }
.kpi-card:nth-child(6n+5) .kpi-icon { background:#FAF0F0; color:#8C3A3A; }
.kpi-card:nth-child(6n+6) .kpi-icon { background:#EDF5F8; color:#1F5F73; }

/* ---------------- Paineis / cards ---------------- */
section.panel {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  border: 1px solid var(--line-soft);
  padding: 26px; margin-bottom: 22px;
}
h2 { font-size: 18.5px; margin: 0 0 5px; font-weight: 800; letter-spacing: -.005em; display:flex; align-items:center; gap:9px; }
.panel-sub { color: var(--muted); font-size: 13.3px; margin: 0 0 18px; max-width: 820px; }

/* ---------------- Mapa / legenda / barras ---------------- */
.map-photo {
  position: relative; margin: 0 0 24px; padding: 0; text-align:center;
  border-radius: var(--radius); overflow:hidden;
  border: 1px solid var(--line-soft); box-shadow: var(--shadow-md);
  background: var(--surface-2);
  width: fit-content; max-width: 100%; margin-left:auto; margin-right:auto;
}
.map-photo img { display:block; width:100%; max-width:460px; margin:0 auto; height:auto; cursor: zoom-in; }
.map-photo-zoom {
  position:absolute; top:10px; right:10px; z-index:2;
  display:flex; align-items:center; gap:6px;
  background: rgba(11,18,32,.72); color:#fff; border:none; border-radius:999px;
  padding:7px 13px 7px 11px; font-size:12px; font-weight:700; cursor:pointer;
  backdrop-filter: blur(2px); transition: background .15s ease;
}
.map-photo-zoom:hover { background: rgba(11,18,32,.9); }
.map-photo-zoom .icon { width:15px; height:15px; }

/* Mapa interativo por municipio (bolhas de confirmados sobre a arte) */
.map-photo .mun-map-wrap { position:relative; width:100%; max-width:680px; margin:0 auto; line-height:0; }
.map-photo .mun-map-wrap img { display:block; width:100%; max-width:none; height:auto; margin:0; cursor: zoom-in; }
.mun-pin {
  position:absolute; transform:translate(-50%,-50%); border-radius:50%;
  border:2px solid rgba(255,255,255,.92); box-shadow:0 2px 6px rgba(16,26,51,.35);
  cursor:pointer; transition: transform .15s ease, box-shadow .15s ease; z-index:3;
}
.mun-pin:hover, .mun-pin:focus-visible { transform:translate(-50%,-50%) scale(1.25); box-shadow:0 3px 12px rgba(16,26,51,.55); z-index:6; outline:none; }
.mun-pin.active { box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--navy-2), 0 3px 10px rgba(16,26,51,.5); z-index:7; }
.mun-pin.zero { opacity:.5; }
.mun-pin::after {
  content: attr(data-tip);
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background: var(--navy-2); color:#fff; font-size:11px; font-weight:700; white-space:nowrap;
  padding:6px 10px; border-radius:7px; opacity:0; pointer-events:none; transition:opacity .15s ease;
  box-shadow: var(--shadow-md); z-index:20;
}
.mun-pin:hover::after, .mun-pin:focus-visible::after { opacity:1; }

.img-lightbox {
  display:none; position: fixed; inset:0; z-index: 200;
  background: rgba(8,12,22,.86); align-items:center; justify-content:center; padding: 32px;
}
.img-lightbox.open { display:flex; }
.img-lightbox img { max-width: min(92vw, 1100px); max-height: 88vh; width:auto; height:auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.img-lightbox-close {
  position:absolute; top:20px; right:24px; width:40px; height:40px; border-radius:50%;
  background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: background .15s ease;
}
.img-lightbox-close:hover { background: rgba(255,255,255,.22); }

/* ---------------- Modal de edicao ---------------- */
.modal-overlay {
  display:none; position: fixed; inset:0; z-index: 210;
  background: rgba(8,12,22,.55); align-items:center; justify-content:center; padding: 20px;
}
.modal-overlay.open { display:flex; }
.modal-box {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  width:100%; max-width: 440px; padding: 22px 22px 24px; max-height: 90vh; overflow-y:auto;
}
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.modal-head h3 { margin:0; font-size:16.5px; font-weight:800; }
.modal-close {
  width:32px; height:32px; flex:none; border-radius:50%; border:1px solid var(--line);
  background: var(--surface-2); color: var(--ink-soft); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition: background .15s ease;
}
.modal-close:hover { background: var(--line-soft); }
.modal-close .icon { width:16px; height:16px; }
.map-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: start; }
/* Sem isso, um item de grid nao encolhe alem do tamanho "natural" do que
   tem dentro (min-width:auto e' o padrao do CSS Grid). Um <canvas> do
   Chart.js tem largura intrinseca em pixels -- entao, no celular, a coluna
   do grafico forcava a coluna inteira (e a pagina) a ficar mais larga que a
   tela, mesmo com "overflow-x:hidden" no body e o grid ja "colapsado" para
   1 coluna. min-width:0 permite o item encolher normalmente. */
.map-grid > * { min-width: 0; }
.ro-map { width: 100%; height: auto; max-height: 540px; }
.region-shape { cursor: pointer; }
.region-shape path { transition: filter .15s ease, opacity .15s ease; }
.region-shape:hover path, .region-shape:focus path { filter: brightness(1.14); }
.region-shape.dim path { opacity: .32; }
.region-label { fill:#fff; font-size:46px; font-weight:700; text-anchor:middle; pointer-events:none;
  paint-order: stroke; stroke: rgba(0,0,0,.55); stroke-width:6px; }

.legend { display:flex; flex-wrap:wrap; gap:8px; margin-top: 16px; }
.legend-item {
  display:flex; align-items:center; gap:7px; border:1px solid var(--line); background:var(--surface);
  border-radius:999px; padding:7px 13px; font-size:12.5px; font-weight:600; cursor:pointer; color:var(--ink);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.legend-item:hover { border-color:#c8cede; transform: translateY(-1px); }
.legend-item.active { background:var(--navy-2); color:#fff; border-color:var(--navy-2); }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; flex:none; box-shadow: 0 0 0 3px rgba(0,0,0,.04); }

.bars { display:flex; flex-direction:column; gap:15px; }
.bar-row { display:grid; grid-template-columns: 180px 1fr; row-gap:5px; align-items:center; }
.bar-label { font-size:12.5px; font-weight:700; display:flex; align-items:center; gap:7px; }
.bar-track { background: var(--surface-2); border-radius:8px; height:12px; overflow:hidden; grid-column:2; box-shadow: inset 0 0 0 1px var(--line-soft); }
.bar-fill { height:100%; border-radius:8px; transition: width .5s ease; }
.bar-value { grid-column:2; font-size:11.5px; color:var(--muted); margin-top:2px; }

/* ---------------- Graficos interativos (Chart.js) ---------------- */
.chart-hint { font-size:11.5px; color:var(--muted); margin:0 0 12px; }
.chart-wrap { position: relative; height: 300px; overflow: hidden; max-width: 100%; }
/* Titulo de um grafico dentro de um painel que tem varios. Menor que o
   h2 do painel de proposito: e sub-assunto, nao assunto novo. */
.chart-titulo {
  font-size: 13px; font-weight: 800; color: var(--ink-soft);
  margin: 0 0 8px; letter-spacing: -.005em;
}
.chart-wrap.small { height: 240px; }
/* Radar e outros graficos que sao quadrados por natureza: numa caixa
   larga eles ficam pequenos e encostados num canto. */
.chart-wrap.chart-quadrado { height: 330px; max-width: 420px; margin-left:auto; margin-right:auto; }
.chart-legend-custom { display:flex; flex-wrap:wrap; gap:9px 18px; margin-top:16px; justify-content:center; }
.chart-legend-custom span { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--ink-soft); }
.chart-legend-custom .dot { width:10px; height:10px; }

/* ---------------- Velocimetros + semaforo por regiao (meta de cadastros) ---------------- */
.gauge-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap:14px; margin-top:12px; }
.gauge-card { background:var(--surface); border:1px solid var(--line-soft); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding:14px; text-align:center; }
.gauge-card-head { display:flex; align-items:center; justify-content:center; gap:6px; font-size:12.5px; font-weight:800; color:var(--ink-soft); margin-bottom:2px; }
.gauge-card-head .dot { width:8px; height:8px; box-shadow:none; }
.gauge-canvas-wrap { position:relative; height:104px; }
.gauge-falta { font-size:12px; color:var(--muted); margin-top:2px; }
.gauge-falta strong { color:var(--ink); }
.gauge-status { font-size:11.5px; font-weight:800; margin-top:8px; }
.semaforo { display:flex; justify-content:center; align-items:center; gap:6px; margin-top:10px; }
.semaforo .luz { width:12px; height:12px; border-radius:50%; background:var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-soft); transition: background .2s ease, box-shadow .2s ease; }
.semaforo .luz.vermelha.on { background:#dc2626; box-shadow: 0 0 8px rgba(220,38,38,.55); }
.semaforo .luz.amarela.on { background:#b45309; box-shadow: 0 0 8px rgba(180,83,9,.55); }
.semaforo .luz.verde.on { background:#15803d; box-shadow: 0 0 8px rgba(21,128,61,.55); }

/* ---------------- Cartoes de regiao (accordion) ---------------- */
.zone-card {
  background:var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  margin-bottom: 12px; border: 1px solid var(--line-soft); border-left: 6px solid var(--zc); overflow:hidden;
  transition: box-shadow .15s ease;
}
.zone-card.open { box-shadow: var(--shadow-md); }
.zone-card-header {
  width:100%; background:none; border:none; cursor:pointer; text-align:left;
  display:flex; align-items:center; gap:12px; padding:16px 18px; font: inherit; color:inherit; flex-wrap:wrap;
}
.zone-card-header:hover { background: var(--surface-2); }
.zone-chip { width:12px; height:12px; border-radius:3px; flex:none; }
.zone-name { font-weight:800; font-size:15.5px; }
.zone-count { font-size:11.5px; font-weight:700; color:var(--muted); background:var(--surface-2); padding:4px 10px; border-radius:999px; }
.zone-mini-stats { margin-left:auto; font-size:12px; color:var(--muted); }
.zone-mini-stats strong { color: var(--ink); }
.chevron { transition: transform .2s ease; color: var(--muted); }
.zone-card.open .chevron { transform: rotate(180deg); }
.zone-card-body { max-height:0; overflow:hidden; transition: max-height .3s ease; }
.zone-card.open .zone-card-body { max-height: 900px; }

/* ---------------- Tabelas ---------------- */
table { width:100%; border-collapse: collapse; font-size: 13.2px; }
.mini-table { padding: 0 18px 16px; }
th, td {
  text-align:center; padding: 12px 13px; border-bottom: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
}
th.num, td.num { text-align:right; }
td:first-child, th:first-child { text-align:left; }
th:last-child, td:last-child { border-right:none; }
thead th {
  font-size:12.5px; color:#fff; background: linear-gradient(180deg, var(--navy), var(--navy-2));
  position: sticky; top: 0; font-weight: 800; letter-spacing:.01em; border-bottom:none;
  border-right: 1px solid rgba(255,255,255,.14);
}
thead th:last-child { border-right:none; }
thead th:first-child { border-top-left-radius: var(--radius-sm); }
thead th:last-child { border-top-right-radius: var(--radius-sm); }
tbody tr { transition: background .12s ease; background: var(--surface); }
tbody tr:hover { background: var(--surface-2); }
.full-table-wrap { overflow-x:auto; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.full-table-wrap table { min-width: 640px; }
.empty-state { text-align:center; color:var(--muted); padding: 34px 16px !important; font-size: 13.5px; }

.inline-form { display:inline; }

.zone-tag { font-size:10.5px; font-weight:800; padding:4px 9px; border-radius:999px; white-space:nowrap; letter-spacing:.02em; }
.status-pill {
  font-size:11px; font-weight:800; padding:5px 13px; border-radius:999px; display:inline-flex;
  align-items:center; gap:5px; letter-spacing:.01em;
}
.status-pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.status-pill.ok { background:var(--success-bg); color:var(--success); }
.status-pill.mid { background:var(--warn-bg); color:var(--warn); }
.status-pill.no { background:var(--line-soft); color:var(--muted); }
.status-pill.urgente { background:var(--danger-bg); color:var(--danger); }

/* ---------------- Materiais de Campanha: linhas de item repetiveis ---------------- */
.item-linha {
  display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap;
}
.item-linha select { flex:2 1 240px; }
.item-linha input[type="number"], .item-linha input[type="text"] { flex:1 1 140px; }
.item-linha select, .item-linha input {
  padding:11px 13px; border-radius:10px; border:1.5px solid var(--line); font-size:14.5px; font-family:inherit; background:var(--surface); color:var(--ink);
}
.item-linha .icon-btn { flex:none; }

/* ---------------- Calendario Eleitoral ---------------- */
.calendario-proximos { display:flex; flex-direction:column; gap:10px; }
.calendario-item {
  display:flex; align-items:flex-start; gap:14px; padding:14px 16px; border-radius:var(--radius-sm);
  background:var(--surface-2, #f8f9fc); border:1px solid var(--line-soft);
}
.calendario-item-data {
  flex:none; width:64px; text-align:center; font-weight:800; color:var(--navy);
  border-right:1px solid var(--line-soft); padding-right:14px;
}
.calendario-item-data .dia { font-size:20px; line-height:1.1; display:block; }
.calendario-item-data .mes { font-size:11px; text-transform:uppercase; color:var(--muted); display:block; }
.calendario-item-body { flex:1 1 auto; min-width:0; }
.calendario-item-titulo { font-weight:700; color:var(--navy); margin-bottom:2px; }
.calendario-item-desc { font-size:13px; color:var(--muted); margin-top:4px; }
.calendario-timeline-mes { font-weight:800; color:var(--navy); margin:22px 0 8px; font-size:14px; text-transform:uppercase; letter-spacing:.03em; }
.calendario-timeline-mes:first-child { margin-top:0; }
.calendario-row-passado { opacity:.55; }
#linha-do-tempo tbody tr.calendario-mes-tint-a { background:rgba(37,99,235,.045); }
#linha-do-tempo tbody tr.calendario-mes-tint-b { background:rgba(217,119,6,.045); }
#linha-do-tempo tbody tr.calendario-mes-tint-a:hover { background:rgba(37,99,235,.1); }
#linha-do-tempo tbody tr.calendario-mes-tint-b:hover { background:rgba(217,119,6,.1); }
#linha-do-tempo tbody tr.calendario-mes-tint-a .calendario-timeline-mes,
#linha-do-tempo tbody tr.calendario-mes-tint-b .calendario-timeline-mes { background:transparent; }
.calendario-badge-clicavel { border:none; cursor:pointer; font-family:inherit; transition:filter .15s, transform .15s; }
.calendario-badge-clicavel:hover, .calendario-badge-clicavel:focus-visible { filter:brightness(1.08); transform:translateY(-1px); }

/* ---------------- Calendario Eleitoral: legenda de categorias ---------------- */
.calendario-legenda { display:flex; flex-wrap:wrap; gap:14px; margin:0 0 20px; }
.calendario-legenda-item { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); font-weight:600; }
.calendario-legenda-dot { width:10px; height:10px; border-radius:50%; flex:none; }

/* ---------------- Calendario Eleitoral: navegacao (Hoje / setas / titulo) ---------------- */
.gcal-nav { display:flex; align-items:center; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.gcal-btn-hoje {
  font-size:12.5px; font-weight:700; color:var(--navy); background:var(--surface); border:1px solid var(--line-soft);
  border-radius:999px; padding:7px 16px; cursor:pointer; transition:background .15s;
}
.gcal-btn-hoje:hover, .gcal-btn-hoje:focus-visible { background:var(--surface-2, #f7f8fb); }
.gcal-nav-setas { display:flex; gap:4px; }
.gcal-btn-seta {
  width:32px; height:32px; border-radius:50%; border:1px solid var(--line-soft); background:var(--surface);
  color:var(--navy); font-size:18px; line-height:1; cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; transition:background .15s;
}
.gcal-btn-seta:hover, .gcal-btn-seta:focus-visible { background:var(--surface-2, #f7f8fb); }
.gcal-nav-titulo { font-size:18px; font-weight:800; color:var(--navy); margin:0; text-transform:capitalize; }
.gcal-nav .gcal-badge-eventos {
  font-size:11px; font-weight:700; color:var(--muted); background:var(--surface-2, #f7f8fb);
  border-radius:999px; padding:3px 10px;
}

/* ---------------- Calendario Eleitoral: grade estilo Google Calendar (um mes por vez) ---------------- */
.gcal-meses { position:relative; }
.gcal-mes-card { display:none; border:1px solid var(--line-soft); border-radius:var(--radius-sm); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-sm); }
.gcal-mes-card.ativo { display:block; }
.gcal-grid { display:grid; grid-template-columns:repeat(7, 1fr); }
.gcal-dow {
  font-size:11px; font-weight:700; color:var(--muted); text-align:center; text-transform:uppercase;
  padding:10px 4px; background:var(--surface-2, #f7f8fb); border-bottom:1px solid var(--line-soft);
}
.gcal-dia {
  min-height:112px; padding:8px 6px; position:relative; background:var(--surface);
  border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:6px;
}
.gcal-dia:nth-child(7n) { border-right:none; }
.gcal-dia.vazio { background:var(--surface-2, #f7f8fb); }
.gcal-dia-num {
  font-size:12.5px; color:var(--navy); font-weight:600; line-height:1; align-self:flex-start;
  width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.gcal-dia.hoje .gcal-dia-num { background:var(--gold, #c9932f); color:#fff; font-weight:800; }
.gcal-dia-eventos { display:flex; flex-direction:column; gap:3px; max-width:100%; }
.gcal-evento-chip {
  display:flex; align-items:center; gap:4px; border:none; padding:2px 4px; border-radius:4px;
  background:var(--surface-2, #f7f8fb); cursor:pointer; max-width:100%; font-family:inherit;
  transition:background .15s, transform .15s;
}
.gcal-evento-chip:hover, .gcal-evento-chip:focus-visible { background:var(--line-soft); transform:translateX(1px); }
.gcal-evento-dot { width:7px; height:7px; border-radius:50%; flex:none; }
.gcal-evento-label {
  font-size:9.5px; font-weight:700; color:var(--navy); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; line-height:1.2;
}
.gcal-dia-mais { font-size:9px; font-weight:700; color:var(--muted); line-height:1; padding-left:2px; }

/* ---------------- Formularios / filtros ---------------- */
.filter-form { display:flex; gap:12px; flex-wrap:wrap; align-items:end; margin-bottom: 18px; }
.filter-field { display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--ink-soft); font-weight:700; }
.filter-field input, .filter-field select {
  padding:10px 13px; border-radius:10px; border:1.5px solid var(--line); font-size:14px; min-width:180px;
  font-family: inherit; background:var(--surface); color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease;
}
.filter-field input:hover, .filter-field select:hover { border-color:#c8cede; }
.filter-field input:focus, .filter-field select:focus {
  border-color: var(--navy); box-shadow: 0 0 0 3.5px rgba(16,26,51,.12); outline: none;
}

.btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, var(--brand), var(--brand-forte)); color: #fff; font-weight: 700; font-size: 13.5px;
  cursor: pointer; text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); filter: brightness(1.06); }
.btn:active { transform: translateY(0); filter: brightness(.97); }
.btn.secondary { background:var(--surface-2); color:var(--ink); box-shadow:none; border: 1.5px solid var(--line); }
.btn.secondary:hover { background: var(--line-soft); }
.btn.small { padding:6px 12px; font-size:12px; border-radius:8px; }
.btn.ghost { background: var(--surface); color: var(--brand-forte); border:1.5px solid var(--line); box-shadow:none; }
.btn.ghost:hover { background: var(--brand-suave); border-color: var(--brand-borda); }
.btn.danger { background: var(--danger); color:#fff; }
.btn.danger:hover { filter: brightness(1.08); }

/* ---------------- Botao com menu (ex: "Imprimir PDF") ---------------- */
.dropdown-btn { position:relative; display:inline-flex; }
.dropdown-btn summary { list-style:none; }
.dropdown-btn summary::-webkit-details-marker { display:none; }
.dropdown-btn[open] summary { filter:brightness(.95); }
.dropdown-menu {
  position:absolute; top:calc(100% + 8px); right:0; z-index:60; min-width:270px;
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:6px;
  box-shadow: var(--shadow-md); display:flex; flex-direction:column; gap:2px;
}
.dropdown-menu a {
  display:block; padding:10px 12px; border-radius:8px; color:var(--ink); text-decoration:none;
  font-size:13.5px; font-weight:600;
}
.dropdown-menu a:hover { background:var(--surface-2); }
.dropdown-sep { height:1px; background:var(--line-soft); margin:5px 2px; }

.form-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; }
.form-field { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.form-field label { font-size:12.5px; font-weight:800; color: var(--ink-soft); }
.form-field input, .form-field select, .form-field textarea {
  padding:11px 13px; border-radius:10px; border:1.5px solid var(--line); font-size:14.5px; font-family:inherit;
  transition: border-color .15s ease, box-shadow .15s ease; background:var(--surface); color:var(--ink);
}
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color:#c8cede; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--navy); box-shadow: 0 0 0 3.5px rgba(16,26,51,.12); outline: none;
}
.form-field textarea { resize: vertical; min-height:76px; }
.checkbox-row { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; }
.checkbox-row input[type="checkbox"], .checkbox-row input[type="radio"] { width:16px; height:16px; accent-color: var(--navy); }

.checklist-secao {
  margin:14px 0; padding:14px 18px; border:1.5px solid var(--line-soft); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.checklist-secao-title {
  display:block; margin-bottom:10px; font-size:12.5px; font-weight:800; letter-spacing:.03em;
  text-transform: uppercase; color: var(--info);
}
.checklist-secao label.checkbox-row { align-items:flex-start; font-weight:400; margin-bottom:10px; }
.checklist-secao label.checkbox-row input { margin-top:3px; }

.alert {
  display:flex; align-items:flex-start; gap:10px;
  padding:13px 16px; border-radius:12px; font-size:13.5px; margin-bottom:18px; font-weight:600;
  border: 1px solid transparent;
}
.alert::before { font-weight:900; flex:none; line-height:1.35; }
.alert.success { background:var(--success-bg); color:var(--success); border-color: rgba(21,128,61,.18); }
.alert.success::before { content: "\2713"; }
.alert.error { background:var(--danger-bg); color:var(--danger); border-color: rgba(185,28,28,.18); }
.alert.error::before { content: "\26A0"; }
.alert.warning { background:var(--warn-bg); color:var(--warn); border-color: rgba(146,64,14,.18); align-items:center; flex-wrap:wrap; }
.alert.warning::before { content: "\26A0"; }
.alert.warning .inline-form { margin-left:auto; }
/* Recado neutro, informativo: usado quando uma tela se atualizou
   sozinha e precisa dizer o que mudou. */
.alert.info { background: var(--info-bg); color: var(--info); border-color: var(--info-borda); }
.alert.info::before { content: "\2139"; }

/* ---------------- Backup: barra de progresso ---------------- */
.backup-progress { margin-top:14px; }
.backup-progress-track {
  width:100%; height:10px; border-radius:999px; background:var(--surface-2, #f7f8fb);
  border:1px solid var(--line-soft); overflow:hidden;
}
.backup-progress-fill {
  height:100%; width:0%; border-radius:999px; background:var(--gold, #c9932f);
  transition:width .3s ease, background-color .3s ease;
}
.backup-progress-label { margin:8px 0 0; font-size:12.5px; color:var(--muted); font-weight:600; }
.backup-progress-label span:first-child { color:var(--navy); font-weight:800; }
.alert:not(.success):not(.error) { background:var(--info-bg); color:var(--info); border-color: rgba(55,48,163,.16); }
.alert:not(.success):not(.error)::before { content: "\2139"; }

.pagination {
  display:flex; gap:8px; margin-top:18px; flex-wrap:nowrap;
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth; padding:2px 2px 8px;
}
.pagination::-webkit-scrollbar { height:6px; }
.pagination::-webkit-scrollbar-track { background:transparent; }
.pagination::-webkit-scrollbar-thumb { background:var(--line); border-radius:99px; }
.pagination::-webkit-scrollbar-thumb:hover { background:#c8cede; }
.pagination a, .pagination span {
  flex:none;
  padding:7px 13px; border-radius:8px; border:1.5px solid var(--line); font-size:12.5px; text-decoration:none;
  font-weight:700; transition: border-color .15s ease, background .15s ease;
}
.pagination a:hover { border-color:#c8cede; background: var(--surface-2); }
.pagination .current { background:var(--navy-2); color:#fff; border-color:var(--navy-2); }

.badge-source { display:inline-block; background:var(--surface-2); color:var(--muted); font-size:11px; font-weight:700; padding:4px 10px;
  border-radius:999px; margin-left:8px; }

/* ---------------- Rumo ao Sucesso: progresso e funil ---------------- */
.meta-progress-wrap { margin: 20px 0 10px; }
.meta-progress-track {
  background: var(--surface-2); border-radius:14px; height:30px; overflow:hidden; position:relative;
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.meta-progress-fill {
  height:100%; border-radius:14px; background: linear-gradient(90deg, var(--navy-2), var(--wine));
  transition: width .6s cubic-bezier(.22,.9,.34,1);
}
.meta-progress-label {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:800; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.4); letter-spacing:.01em;
}
.jornada-grid { display:grid; grid-template-columns: 1fr 1.05fr; gap:28px; align-items:start; }
.meta-form { display:flex; gap:12px; align-items:end; flex-wrap:wrap; }
.meta-form input[type="number"] {
  padding:10px 13px; border-radius:10px; border:1.5px solid var(--line); font-size:14px; width:170px; font-family:inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.meta-form input[type="number"]:focus { border-color: var(--navy); box-shadow: 0 0 0 3.5px rgba(16,26,51,.12); outline:none; }

/* ---- Funil da jornada (ilustracao 100% CSS -- cadastros > enviados >
   confirmados, cada barra proporcional a etapa anterior, com seta entre
   cada passo). A meta de votos e uma barra de progresso separada logo
   abaixo, porque e uma grandeza (milhares de votos) que nao cabe na mesma
   escala visual das etapas de contato. ---- */
.gami-funil { display:flex; flex-direction:column; gap:6px; margin-bottom:22px; }
.gami-funil-etapa { display:flex; flex-direction:column; gap:6px; }
.gami-funil-barra-wrap { width:100%; }
.gami-funil-barra {
  width: var(--etapa-largura, 100%); min-width:150px; max-width:100%;
  display:flex; align-items:center; gap:10px; height:52px; padding:0 18px;
  border-radius: 12px 999px 999px 12px;
  background: linear-gradient(100deg, var(--etapa-cor), color-mix(in srgb, var(--etapa-cor) 65%, #000));
  color:#fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--etapa-cor) 35%, transparent);
  transition: width .8s cubic-bezier(.22,.9,.34,1);
  animation: gami-funil-entra .6s cubic-bezier(.22,1.1,.4,1) both;
}
.gami-funil-icon { width:22px; height:22px; flex:none; opacity:.92; }
.gami-funil-valor { font-size:17px; font-weight:800; letter-spacing:-.01em; }
.gami-funil-legenda { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color: var(--ink-soft); padding-left:2px; }
.gami-funil-legenda .dot { width:9px; height:9px; flex:none; }
.gami-funil-conv { color: var(--muted); font-weight:600; }
.gami-funil-seta { display:flex; align-items:center; padding-left:20px; color: var(--line); margin:-2px 0; }
.gami-funil-seta svg { width:16px; height:16px; }
@keyframes gami-funil-entra {
  from { opacity:0; transform: translateX(-14px) scaleX(.92); transform-origin:left center; }
  to   { opacity:1; transform: translateX(0) scaleX(1); }
}

.gami-funil-meta {
  margin-top:6px; padding-top:18px; border-top:1px dashed var(--line-soft);
}
.gami-funil-meta-topo { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:9px; }
.gami-funil-meta-label { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color: var(--navy-2); }
.gami-funil-meta-label svg { width:18px; height:18px; color: var(--wine); }
.gami-funil-meta-topo strong { font-size:15px; color: var(--wine); }
.gami-funil-meta-track {
  height:16px; border-radius:999px; background: var(--surface-2); overflow:hidden;
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.gami-funil-meta-fill {
  height:100%; border-radius:999px; background: linear-gradient(90deg, var(--wine), var(--gold));
  transition: width 1.1s cubic-bezier(.22,.9,.36,1);
}
.gami-funil-meta-sub { font-size:12px; color: var(--muted); font-weight:600; margin-top:7px; }

/* ---------------- Login ---------------- */
.login-body {
  background: linear-gradient(160deg, var(--navy-2), var(--navy) 55%, var(--wine-2));
  min-height: 100vh;
}
.login-shell {
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px; gap:22px;
}
.login-top-brand {
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.login-top-logo {
  width:76px; height:76px; border-radius:22px; box-shadow: var(--shadow-lg); display:block;
}
.login-top-brand-text {
  color:#fff; font-size:20px; font-weight:400; letter-spacing:0; text-align:center;
  text-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.login-card {
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width:100%; max-width:400px; padding:34px 30px 30px;
}
.login-brand { text-align:center; margin-bottom:22px; }
.login-brand .brand-sub {
  color: var(--muted); text-transform:uppercase; letter-spacing:.04em; font-size:11px;
  font-weight:700;
}
.login-card h1 { font-size:20px; margin:0 0 4px; text-align:center; justify-content:center; }
.login-card .panel-sub { text-align:center; margin: 0 0 20px; max-width:none; }
.login-submit { width:100%; justify-content:center; }

/* ---------------- Rodape ---------------- */
footer {
  color:var(--muted); font-size:12px; text-align:center; padding: 26px 20px 4px;
  border-top: 1px solid var(--line-soft); line-height:1.7;
}

/* ---------------- Responsivo ---------------- */
@media (max-width: 980px) {
  .kpi-grid, .kpi-grid-4 { grid-template-columns: repeat(3,1fr); }
  .map-grid { grid-template-columns: 1fr; }
  .jornada-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  section.panel { padding: 20px; }
  .content { padding: 24px 20px 60px; }
}
/* CELULAR -- o menu vira gaveta.
   A tira horizontal que existia aqui punha mais de cinquenta telas em
   fila indiana: achar "Prestador de Serviço" exigia arrastar o dedo
   umas dez vezes, sem categoria nenhuma à vista. A gaveta mantém as
   cinco seções, as categorias e a busca -- é o mesmo menu do
   computador, só que por cima da tela e fechando ao escolher. */
@media (max-width: 860px) {
  .app-shell { flex-direction: column; }

  /* Fixa, não "sticky": o painel usa overflow-x:hidden no body, e com
     isso o sticky rola junto e some. Fixa + um respiro do mesmo
     tamanho no topo do conteúdo resolve sem efeito colateral. */
  .barra-topo {
    display:flex; align-items:center; gap:12px;
    position: fixed; top:0; left:0; right:0; z-index: 60;
    height: 58px; padding: 0 14px; background: #0b1220;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .app-shell { padding-top: 58px; }
  .barra-topo-menu {
    display:flex; align-items:center; gap:8px;
    padding: 9px 13px; border-radius:10px; cursor:pointer;
    background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
    color:#fff; font-family:inherit; font-size:13.5px; font-weight:800;
  }
  .barra-topo-menu .icon { width:18px; height:18px; }
  .barra-topo-menu:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
  .barra-topo-nome {
    flex:1; min-width:0; color:#fff; font-size:14px; font-weight:800;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .barra-topo-ini {
    flex:none; width:32px; height:32px; border-radius:9px;
    display:grid; place-items:center; font-size:13px; font-weight:800; color:#211705;
    background: linear-gradient(135deg, var(--gold), #b8842a);
  }

  .sidebar {
    position: fixed; top:0; left:0; bottom:0; z-index: 80;
    width: 300px; max-width: 86vw; height:100vh;
    transform: translateX(-100%); transition: transform .22s ease, visibility .22s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.5);
    /* fechada, some de verdade -- senão o Tab passeia por cinquenta
       links invisíveis antes de chegar ao conteúdo da tela. */
    visibility: hidden;
  }
  body.menu-aberto .sidebar { transform: translateX(0); visibility: visible; }
  body.menu-aberto { overflow: hidden; }

  .sidebar-fundo {
    display:block; position:fixed; inset:0; z-index:70;
    background: rgba(4,8,18,.6); backdrop-filter: blur(2px);
  }
  .sidebar-fechar {
    display:grid; place-items:center; position:absolute; top:14px; right:12px;
    width:34px; height:34px; border-radius:9px; cursor:pointer;
    background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#fff;
  }
  .sidebar-fechar .icon { width:18px; height:18px; }
  .sidebar-brand { padding-right: 52px; }

  /* Alvos maiores: no toque, 44px é o mínimo confortável. */
  .sidebar-nav a { padding: 13px 12px; font-size:14.5px; }
  .sidebar-nav-label { padding: 12px 11px; font-size:12.5px; }

  .page-head { align-items:flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}
@media (max-width: 560px) {
  .kpi-grid, .kpi-grid-4, .kpi-grid-2 { grid-template-columns: repeat(2,1fr); }
  .zone-mini-stats { margin-left:0; width:100%; }
  .bar-row { grid-template-columns: 1fr; row-gap:6px; }
  .bar-track, .bar-value { grid-column: 1; }
  .chart-wrap { height: 240px; }
  .chart-wrap.small { height: 220px; }
  .filter-form, .meta-form { flex-direction:column; align-items:stretch; }
  .filter-field input, .filter-field select { min-width:0; width:100%; }
  .meta-form input[type="number"] { width:100%; }
  .filter-form .btn, .filter-form .btn.secondary,
  .meta-form .btn, .form-field + .btn { width:100%; justify-content:center; }
  .page-head { flex-direction:column; align-items:stretch; }
  .page-head-extra .btn, .page-head-extra { width:100%; }
  .page-head-extra .btn { justify-content:center; }
  .page-head-extra .dropdown-btn { width:100%; }
  .page-head-extra .dropdown-btn summary.btn { width:100%; justify-content:center; }
  .dropdown-menu { left:0; right:0; width:auto; }
  .gami-funil-barra { width:100% !important; min-width:0; }
  .gami-funil-seta { padding-left:0; justify-content:center; }
  .gami-destaque-top3 { flex-direction:column; }
}
@media (max-width: 480px) {
  .content { padding: 18px 14px 50px; }
  section.panel { padding: 16px; }
  .kpi-grid, .kpi-grid-4, .kpi-grid-2 { grid-template-columns: repeat(2,1fr); gap:10px; }
  .kpi-value { font-size:21px; }
  .modal-box { padding: 18px 16px 20px; }
  .map-photo-zoom span, .map-photo-zoom { font-size:11px; padding:6px 11px 6px 9px; }
  table { font-size:12.4px; }
  th, td { padding:9px 10px; }
  td > .btn.small, td .inline-form { display:block; margin:0 0 6px; }
  td > .btn.small:last-child, td .inline-form:last-child { margin-bottom:0; }
  .meta-progress-track { height:auto; min-height:34px; padding:8px 6px; }
  .meta-progress-fill { position:absolute; inset:0; z-index:0; height:auto; }
  .meta-progress-label {
    position:relative; z-index:1; white-space:normal; line-height:1.3; font-size:11.5px;
    padding:0 4px; text-align:center;
  }
  .gcal-nav { gap:10px; }
  .gcal-nav-titulo { font-size:15px; width:100%; order:3; }
  .gcal-dia { min-height:64px; padding:5px 3px; }
  .gcal-dia-num { font-size:11px; width:20px; height:20px; }
  .gcal-dow { font-size:9px; padding:7px 2px; }
  .gcal-evento-label { font-size:8.5px; }
}
@media (max-width: 360px) {
  .kpi-grid, .kpi-grid-4, .kpi-grid-2 { grid-template-columns: 1fr; }
}

/* ---------------- Lideranca: checkbox extra, badge e banner ---------------- */
.checkbox-field { margin-top:2px; margin-bottom:18px; }
.field-hint { font-weight:400; color:var(--muted); font-size:12px; }

.badge-lideranca {
  background: rgba(122,31,31,.12); color: var(--wine); margin-left:6px;
}
.badge-multiplicador {
  background: rgba(201,147,47,.16); color: var(--gold, #c9932f); margin-left:6px;
}

section.panel.lideranca-banner {
  display:flex; align-items:center; gap:18px;
  background: linear-gradient(135deg, var(--wine), var(--wine-2));
  color:#fff;
}
.lideranca-banner-icon {
  flex:none; width:48px; height:48px; border-radius:50%;
  background: rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center;
}
.lideranca-banner-icon .icon { width:24px; height:24px; color:#fff; }
.lideranca-banner-title { font-size:17px; font-weight:800; }
.lideranca-banner-sub { font-size:13px; opacity:.85; margin-top:2px; }

.presenca-list {
  display:flex; flex-direction:column; gap:2px; max-height:400px; overflow-y:auto;
  padding-right:6px; margin-top:6px; border-top:1px solid var(--line-soft); padding-top:4px;
}
.presenca-list .checkbox-row { font-weight:600; }

.presenca-item {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 4px; border-bottom:1px solid var(--line-soft);
}
.presenca-item:last-child { border-bottom:none; }
.presenca-nome { font-size:13.5px; font-weight:700; color:var(--navy); }
.presenca-opcoes { display:flex; gap:14px; flex:none; }
.presenca-opcoes label {
  display:flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; color:var(--muted);
  white-space:nowrap; cursor:pointer;
}
.presenca-opcoes input[type="radio"] { width:15px; height:15px; accent-color: var(--navy); margin:0; }
.presenca-opcoes label:has(input:checked) { color:var(--navy); }

.status-pill-btn {
  border:none; -webkit-appearance:none; appearance:none; cursor:pointer; font-family:inherit;
  transition: filter .15s ease;
}
.status-pill-btn:hover, .status-pill-btn:focus-visible { filter:brightness(.94); }

.nomes-popup-list { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:2px; max-height:380px; overflow-y:auto; }
.nomes-popup-list li {
  display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--navy);
  padding:9px 4px; border-bottom:1px solid var(--line-soft);
}
.nomes-popup-list li:last-child { border-bottom:none; }

@media (max-width: 560px) {
  .lideranca-banner { flex-direction:column; align-items:flex-start; gap:10px; }
  .presenca-item { flex-direction:column; align-items:flex-start; gap:8px; }
}

/* ---------------- Cadastros: acoes em icone colorido + tooltip ---------------- */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.actions-icons { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
/* Sobrescreve a regra generica "td .inline-form { display:block }" do modo
   mobile (ela e para os botoes de texto antigos) -- aqui os forms sempre
   ficam lado a lado, como icones. */
.actions-icons .inline-form { display:inline-flex; margin:0; }

.icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9px; border:1.5px solid transparent;
  cursor:pointer; position:relative; padding:0; flex:none;
  transition: transform .12s ease, filter .12s ease, background .12s ease, color .12s ease;
}
.icon-btn .icon { width:16px; height:16px; }
.icon-btn:hover { transform:translateY(-1px); filter:brightness(.95); }
.icon-btn:active { transform:translateY(0); }
.icon-btn:focus-visible { outline:2px solid var(--navy-2); outline-offset:2px; }

.icon-btn.edit    { background:var(--info-bg);    color:var(--info);    border-color:rgba(55,48,163,.16); }
.icon-btn.info    { background:var(--info-bg);    color:var(--info);    border-color:rgba(55,48,163,.16); }
.glossario-lista dt { font-weight:600; color:var(--navy-2); margin-top:14px; }
.glossario-lista dt:first-child { margin-top:0; }
.glossario-lista dd { margin:2px 0 0; color:var(--muted, #565f78); }
.glossario-lista h4 { margin:18px 0 4px; font-size:13px; text-transform:uppercase; letter-spacing:.02em; color:var(--info); }
.glossario-lista h4:first-child { margin-top:0; }
.icon-btn.send    { background:var(--warn-bg);    color:var(--warn);    border-color:rgba(146,64,14,.16); }
.icon-btn.confirm { background:var(--success-bg); color:var(--success); border-color:rgba(21,128,61,.16); }
.icon-btn.delete  { background:var(--danger-bg);  color:var(--danger);  border-color:rgba(185,28,28,.16); }

.icon-btn.send.active    { background:var(--warn);    color:#fff; }
.icon-btn.confirm.active { background:var(--success); color:#fff; }

/* Tooltip customizado (mesmo padrao usado no mapa de municipios) */
.icon-btn[data-tip]::after {
  content: attr(data-tip);
  position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%) translateY(4px);
  background:var(--navy-2); color:#fff; font-size:11.5px; font-weight:700; white-space:nowrap;
  padding:6px 11px; border-radius:7px; opacity:0; pointer-events:none;
  transition: opacity .15s ease, transform .15s ease; z-index:30;
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
}
.icon-btn[data-tip]::before {
  content:""; position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--navy-2); opacity:0; pointer-events:none;
  transition: opacity .15s ease; z-index:30;
}
.icon-btn[data-tip]:hover::after, .icon-btn[data-tip]:focus-visible::after,
.icon-btn[data-tip]:hover::before, .icon-btn[data-tip]:focus-visible::before {
  opacity:1; transform:translateX(-50%) translateY(0);
}

@media (max-width: 640px) {
  td .actions-icons { justify-content:flex-start; }
}

/* ---------------- Aniversariantes ---------------- */
section.panel.aniversario-banner {
  background: linear-gradient(135deg, var(--gold), #a97423);
  color:#2b1c05;
}
.aniversario-banner-head { display:flex; align-items:center; gap:18px; }
.aniversario-banner-icon {
  flex:none; width:48px; height:48px; border-radius:50%;
  background: rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center;
}
.aniversario-banner-icon .icon { width:24px; height:24px; color:#2b1c05; }
.aniversario-banner-title { font-size:17px; font-weight:800; }
.aniversario-banner-sub { font-size:13px; opacity:.8; margin-top:2px; }

.aniversario-hoje-grid {
  display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:12px; margin-top:18px;
}
.aniversario-card {
  background: rgba(255,255,255,.55); border-radius: var(--radius-sm); padding:14px 16px;
  border: 1px solid rgba(255,255,255,.6);
}
.aniversario-card-nome { font-size:14.5px; font-weight:800; color:#2b1c05; }
.aniversario-card-info { font-size:12px; color:#4a3510; margin-top:2px; font-weight:600; }
.aniversario-card-fone {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:8px;
  font-size:12.5px; font-weight:700; color:#2b1c05;
}
.aniversario-card-fone .icon { width:14px; height:14px; flex:none; }
.aniversario-wa-link {
  margin-left:auto; font-size:11.5px; font-weight:800; color:#15803d; text-decoration:none;
  background:var(--surface); padding:4px 10px; border-radius:999px; box-shadow: var(--shadow-sm);
}
.aniversario-wa-link:hover { filter:brightness(.96); }

tr.linha-aniversario-hoje td { background: #fdf3e0; }

@media (max-width: 560px) {
  .aniversario-banner-head { flex-direction:column; align-items:flex-start; gap:10px; }
}

/* ---------------- Enquete (perfil DISC do eleitor) ---------------- */
.link-publico-row { display:flex; gap:10px; flex-wrap:wrap; }
.link-publico-row input[type="text"] {
  flex:1; min-width:220px; padding:10px 12px; border:1px solid var(--line-soft); border-radius: var(--radius-sm);
  font-size:13px; color: var(--ink-soft); background: var(--surface-2); font-family: monospace;
}
.link-publico-row .btn { flex:none; }

.disc-form { display:flex; flex-direction:column; gap:22px; }

.disc-pergunta { border-top: 1px solid var(--line-soft); padding-top:16px; }
.disc-pergunta-titulo { font-size:14.5px; font-weight:800; margin-bottom:12px; }

.disc-alternativas { display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:10px; }
.disc-alternativa {
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  background: var(--surface-2); border: 1.5px solid var(--line-soft); border-radius: var(--radius-sm);
  padding:12px 14px; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.disc-alternativa:hover { border-color: var(--gold); }
.disc-alternativa input[type="radio"] { margin-top:2px; width:16px; height:16px; flex:none; accent-color: var(--navy); }
.disc-alternativa:has(input:checked) {
  border-color: var(--navy); background:var(--surface); box-shadow: 0 0 0 1px var(--navy) inset, var(--shadow-sm);
}
.disc-alternativa-letra {
  flex:none; width:24px; height:24px; border-radius:50%; background: var(--navy);
  color:#fff; font-size:11.5px; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.disc-alternativa-texto { font-size:13.3px; font-weight:600; color: var(--ink-soft, #2c3550); line-height:1.35; }

/* KPIs coloridos por perfil (--dc definido inline via style="--dc:...") */
.disc-kpi-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap:14px; }
.disc-kpi-card {
  border-radius: var(--radius); padding:16px 15px; text-align:center;
  background: linear-gradient(135deg, var(--navy-2), var(--navy) 70%); border: 1px solid var(--navy-2);
  display:flex; flex-direction:column; align-items:center; gap:4px;
  border-top: 4px solid var(--dc, var(--gold)); color:#fff;
}
.disc-kpi-total { border-top-color: var(--gold); }
.disc-kpi-card .disc-kpi-label { color:#c3cbe4; }
.disc-kpi-sigla {
  width:26px; height:26px; border-radius:50%; background: var(--dc, var(--muted)); color:#fff;
  font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:2px;
}
.disc-kpi-value { font-size:22px; font-weight:800; letter-spacing:-.01em; }
.disc-kpi-label { font-size:11.8px; color: var(--muted); font-weight:700; }

/* Legenda de interpretacao dos 4 perfis + misto */
.disc-legenda-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:14px; }
.disc-legenda-card {
  border-radius: var(--radius-sm); padding:15px 16px; background: #fff;
  border: 1px solid var(--line-soft); border-left: 5px solid var(--dc, var(--muted));
}
.disc-legenda-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.disc-legenda-sigla {
  flex:none; width:32px; height:32px; border-radius:50%; background: var(--dc, var(--muted)); color:#fff;
  font-size:14px; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.disc-legenda-nome { font-size:14px; font-weight:800; }
.disc-legenda-apelido { font-size:11.8px; color: var(--dc, var(--muted)); font-weight:700; }
.disc-legenda-desc { font-size:12.8px; color: var(--ink-soft, #2c3550); line-height:1.45; margin:0; }

/* Selo de perfil usado na tabela de enquetes recentes */
.disc-perfil-pill {
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800;
  padding:4px 10px; border-radius:999px; background: color-mix(in srgb, var(--dc, var(--muted)) 15%, #fff);
  color: var(--dc, var(--muted));
}

@media (max-width: 560px) {
  .disc-alternativas { grid-template-columns: 1fr; }
}

/* ---------------- Popup "Ver respostas" da enquete ---------------- */
.mvr-box { max-width: 560px; }
.mvr-meta { font-size:12.6px; color: var(--muted); margin:0 0 8px; }
.mvr-perfil-tag { margin-bottom:16px; }
.mvr-secao { margin-top:18px; }
.mvr-secao h4 {
  margin:0 0 8px; font-size:13px; font-weight:800; color: var(--navy-2);
  text-transform: uppercase; letter-spacing:.02em;
}
.mvr-lista { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.mvr-lista li {
  background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding:10px 12px; font-size:12.8px; line-height:1.5;
}
.mvr-lista li strong { display:block; color: var(--ink, #1c2436); font-size:12.8px; margin-bottom:3px; }
.mvr-lista-resp { color: var(--ink-soft, #2c3550); }
.mvr-card { border-radius: var(--radius-sm); padding:14px 16px; border:1px solid var(--line-soft); }
.mvr-card p { margin:0; font-size:12.8px; line-height:1.55; color: var(--ink-soft, #2c3550); }
.mvr-card-pessoa { background: var(--surface-2); }
.mvr-card-pessoa .mvr-hint { font-size:11.3px; color: var(--muted); margin-bottom:8px; font-style:italic; }
.mvr-card-afinidade { background: var(--info-bg, #eef2ff); border-color: rgba(55,48,163,.16); }
.mvr-afinidade-rotulo { font-size:13px; font-weight:800; color: var(--info, #3730a3); margin-bottom:6px; }
.mvr-aviso { margin-top:10px !important; font-size:11.3px !important; color: var(--muted) !important; font-style:italic; }

/* Aviso introdutorio do popup de exclusao de enquete (motivo obrigatorio) */
.mev-aviso {
  font-size:12.6px; line-height:1.5; color: var(--ink-soft, #2c3550);
  background: var(--danger-bg); border: 1px solid rgba(185,28,28,.16); border-radius: var(--radius-sm);
  padding:11px 13px; margin:0 0 16px;
}
/* Aviso de janelinha em tom neutro: usado quando a acao NAO e destrutiva
   (desativar manda para o Caderninho, nao apaga) -- o vermelho do aviso
   padrao daria a entender que a ficha some. */
.mev-aviso.is-info {
  background: var(--brand-suave); border-color: var(--brand-borda);
}
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:6px; }

/* ---------------- Arvore do coordenador (Colaborador > filtro Coordenador) ----------------
   A leitura tem de ser imediata: a faixa escura abre o grupo, as linhas
   da equipe entram recuadas com um tracinho de conexao. Sem isso a
   "hierarquia" seria so uma lista em outra ordem. */
.hier-cabeca td {
  background: var(--brand-suave);
  border-top: 2px solid var(--brand);
  padding: 12px 14px;
}
.hier-cabeca.is-alerta td { background: var(--danger-bg); border-top-color: var(--wine); }
.hier-titulo { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hier-titulo strong { font-size:15px; color: var(--ink); }
.hier-selo {
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:#fff; background: var(--brand);
  border-radius:999px; padding:3px 10px;
}
.hier-selo.is-alerta { background: var(--wine); }
.hier-cidade { font-size:12.6px; color: var(--muted); }
.hier-resumo { font-size:12.6px; color: var(--ink-soft); margin-top:4px; }
.hier-filho td { background: var(--surface-2); }
/* O seletor e longo de proposito: mais abaixo neste arquivo existe
   "body.tab-contratos #lista-colaboradores table td { padding-left: 8px }",
   que aperta a tabela de 10 colunas. Sem a mesma forca, o recuo da
   arvore simplesmente nao acontecia -- e a hierarquia virava uma lista
   comum em outra ordem. */
body.tab-contratos #lista-colaboradores .hier-filho td:first-child,
.hier-filho td:first-child { padding-left: 34px; position:relative; }
/* Coordenador dentro de coordenador: mais um degrau de recuo por nivel. */
body.tab-contratos #lista-colaboradores .hier-filho.n2 td:first-child,
.hier-filho.n2 td:first-child { padding-left: 56px; }
.hier-filho.n2 .hier-traco { left: 38px; }
body.tab-contratos #lista-colaboradores .hier-filho.n3 td:first-child,
.hier-filho.n3 td:first-child { padding-left: 78px; }
.hier-filho.n3 .hier-traco { left: 60px; }
.hier-traco {
  position:absolute; left:16px; top:0; bottom:0; width:10px;
  border-left:2px solid var(--brand-borda);
  border-bottom:2px solid var(--brand-borda);
  border-bottom-left-radius:6px; height:50%;
}
body.tab-contratos #lista-colaboradores .hier-vazio,
.hier-vazio { color: var(--muted); font-size:12.6px; padding-left:34px; }

/* ---------------- Niveis de acesso (checkboxes, ate 3 por usuario) ---------------- */
.niveis-checklist { max-width: 620px; }
.niveis-checklist > label { display:block; font-size:12.6px; font-weight:700; color:var(--ink-soft, #2c3550); margin-bottom:8px; }
.niveis-grid {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:8px 16px;
  background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding:12px 14px;
}
.niveis-grid .checkbox-row { font-weight:500; }
.niveis-grid input[type="checkbox"]:disabled { opacity:.35; cursor:not-allowed; }
.niveis-grid label:has(input:disabled) { opacity:.55; }

@media (max-width: 560px) {
  .niveis-grid { grid-template-columns: 1fr; }
}

/* ---------------- Acesso por modulo (usuarios.php) ---------------- */
.modulos-checklist { max-width: 100%; margin-top: 18px; }
.modulos-checklist > label { display:block; font-size:12.6px; font-weight:700; color:var(--ink-soft, #2c3550); margin-bottom:6px; }
.modulos-grade {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:12px;
  align-items:start;   /* sem isto o card de Contratos estica todos os vizinhos */
  background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding:14px;
}
.modulos-grupo {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); padding:10px 12px;
}
.modulos-grupo-topo { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px; }
.modulos-grupo-nome { font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--navy); }
.modulos-grupo-todos {
  background:none; border:0; padding:0; cursor:pointer;
  font-size:11.5px; font-weight:700; color:var(--wine); text-decoration:underline;
}
.modulos-grupo-aviso {
  font-size:11.5px; line-height:1.45; color:var(--warn, #92400e);
  background:rgba(146,64,14,.07); border-radius:6px; padding:6px 8px; margin:0 0 8px;
}
.modulos-grupo .checkbox-row { font-weight:500; align-items:flex-start; margin-bottom:6px; font-size:13px; }
.modulos-grupo .checkbox-row input { margin-top:2px; flex:0 0 auto; }
.modulos-grupo .checkbox-row small { display:block; font-weight:400; font-size:10.5px; color:var(--ink-soft, #2c3550); opacity:.8; }
.modulos-grupo .checkbox-row.is-herdado { opacity:.62; }
.modulos-grupo .checkbox-row.is-herdado::after {
  content:"do n\00ED vel"; font-size:10px; font-weight:700; letter-spacing:.03em;
  color:var(--ink-soft, #2c3550); background:rgba(16,26,51,.08);
  border-radius:5px; padding:1px 5px; margin-left:auto; white-space:nowrap;
}

/* Modulos avulsos na listagem de usuarios */
.usu-modulos { margin-top:6px; }
.usu-modulos > summary { cursor:pointer; font-size:11.5px; font-weight:700; color:var(--wine); }
.usu-modulos ul { margin:6px 0 0; padding-left:16px; font-size:11.5px; line-height:1.5; color:var(--ink-soft, #2c3550); }

@media (max-width: 560px) {
  .modulos-grade { grid-template-columns: 1fr; }
}

/* ---------------- Analise Estrategica (IA) ---------------- */
.analise-texto {
  font-size:13.8px; line-height:1.7; color: var(--ink-soft, #2c3550);
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding:26px 28px; white-space: normal;
}
.analise-texto h3 {
  margin:22px 0 8px; font-size:15px; font-weight:800; color: var(--navy-2);
  padding-bottom:6px; border-bottom:2px solid rgba(122,31,31,.14);
}
.analise-texto h3:first-child { margin-top:0; }
.analise-texto p { margin:0 0 10px; }
.analise-texto ul { margin:0 0 14px; padding-left:20px; }
.analise-texto li { margin:0 0 6px; }
.analise-texto strong { color: var(--navy-2); font-weight:700; }
#btn-gerar-analise:disabled { opacity:.7; cursor:wait; }
#btn-gerar-analise .icon { animation: analise-girar 1.4s linear infinite paused; }
#btn-gerar-analise:disabled .icon { animation-play-state: running; }
@keyframes analise-girar { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

.chave-api-actions { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.chave-api-form { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.chave-api-form .form-field { margin-bottom:0; }

.analise-dash-grid {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap:14px;
  margin:14px 0 22px;
  align-items: stretch;   /* os quatro cartoes com a mesma altura */
}
.analise-dash-grid .gauge-card { display:flex; flex-direction:column; }
.analise-dash-grid .gauge-falta { margin-top:auto; padding-top:8px; }
.analise-dash-grid .gauge-card { text-align:center; }
.analise-dash-grid .chart-card .gauge-card-head { justify-content:center; }
/* A rosca precisa de altura para o total caber no buraco -- com 150px
   o numero do meio encostava no anel e virava borrao. */
.pizza-canvas-wrap { position:relative; height:210px; margin-top:6px; }
/* Dez regioes em barras precisam de mais altura que uma rosca. */
.pizza-canvas-wrap.pizza-canvas-alta { height:278px; }

#historico-analises table td.max-resumo,
#historico-analises .linha-atual { background: rgba(122,31,31,.05); }
#historico-analises .linha-atual td:first-child { border-left:3px solid #7a1f1f; }

/* =================================================================
   Gamificacao -- menu "Rumo ao Sucesso"
   ================================================================= */

/* ---- Emblema base (brasao em formato de escudo), reaproveitado no nivel
   da campanha, nos avatares do podio/ranking e nas medalhas de conquista.
   Usa a variavel --tier-cor (pessoas/conquistas) ou --lvl-cor (nivel da
   campanha) para colorir -- a mesma classe serve para os dois casos. ---- */
.gami-emblem {
  position:relative; flex:none;
  clip-path: polygon(50% 0%, 100% 22%, 100% 68%, 50% 100%, 0% 68%, 0% 22%);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--tier-cor, var(--lvl-cor, var(--navy))) 85%, #fff) 0%,
    var(--tier-cor, var(--lvl-cor, var(--navy))) 55%,
    color-mix(in srgb, var(--tier-cor, var(--lvl-cor, var(--navy))) 70%, #000) 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.gami-emblem-letra { position:relative; z-index:2; color:#fff; font-weight:800; text-shadow:0 1px 3px rgba(0,0,0,.35); }
.gami-emblem-icon { position:absolute; inset:0; margin:auto; width:60%; height:60%; color:#fff; opacity:.28; z-index:1; }
.gami-emblem-stamp {
  position:absolute; bottom:-7px; left:50%; transform:translateX(-50%); z-index:3;
  width:20px; height:20px; border-radius:50%; background:var(--surface);
  border:2px solid var(--tier-cor, var(--lvl-cor, var(--navy)));
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
}
.gami-emblem-stamp svg { width:11px; height:11px; color: var(--tier-cor, var(--lvl-cor, var(--navy))); }

/* ---- Hero: nivel da campanha ----
   Observacao: usamos o seletor composto "section.panel.gami-hero" (em vez de
   so ".gami-hero") de proposito -- a regra generica "section.panel" (que
   define o fundo claro padrao dos paineis) tem especificidade elemento+classe,
   maior que uma classe sozinha. Sem o composto, o fundo escuro do hero perdia
   a "briga" de especificidade e caia no fundo claro padrao, deixando o texto
   branco ilegivel por cima. O mesmo vale para o banner de destaque abaixo. */
section.panel.gami-hero { background: linear-gradient(135deg, var(--navy-2), var(--navy) 75%); color:#fff; border:none; position:relative; overflow:hidden; }
.gami-hero .panel-sub { color:#c3cbe4; }
.gami-hero-top { display:flex; align-items:center; gap:20px; flex-wrap:wrap; position:relative; z-index:2; }
.gami-hero-watermark {
  position:absolute; top:-34px; right:-28px; width:230px; height:230px;
  color:#fff; opacity:.07; pointer-events:none; z-index:1;
}
.gami-hero-spark {
  position:absolute; border-radius:50%; background: var(--gold); opacity:.55; pointer-events:none;
  animation: gami-float 4.2s ease-in-out infinite; z-index:1;
}
.gami-hero-spark-1 { top:16%; right:22%; width:8px; height:8px; animation-delay:0s; }
.gami-hero-spark-2 { top:52%; right:9%;  width:5px; height:5px; animation-delay:1.3s; }
.gami-hero-spark-3 { top:74%; right:30%; width:6px; height:6px; animation-delay:2.4s; }
@keyframes gami-float {
  0%, 100% { transform: translateY(0); opacity:.4; }
  50% { transform: translateY(-16px); opacity:1; }
}
.gami-level-badge {
  width:82px; height:90px; flex-direction:column;
  animation: gami-pulse 2.6s ease-in-out infinite;
}
.gami-level-badge-num { position:relative; z-index:2; font-size:26px; font-weight:800; line-height:1; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.35); }
.gami-level-badge-tag { position:relative; z-index:2; font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.9); margin-top:2px; }
.gami-level-badge .gami-emblem-icon { width:52%; height:52%; opacity:.32; }
.gami-hero-text { flex:1; min-width:220px; }
.gami-hero-kicker { font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--gold); margin:0 0 2px; }
.gami-hero-title { font-size:24px; font-weight:800; margin:0 0 8px; color:#fff; }

.gami-xp-track {
  position:relative; height:22px; border-radius:999px; margin-top:20px; overflow:hidden;
  background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.gami-xp-fill {
  position:relative; height:100%; border-radius:999px; transition: width 1.1s cubic-bezier(.22,.9,.36,1);
  background: linear-gradient(90deg, var(--lvl-cor), color-mix(in srgb, var(--lvl-cor) 60%, #fff));
  box-shadow: 0 0 14px color-mix(in srgb, var(--lvl-cor) 70%, transparent);
}
.gami-xp-fill::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.35) 45%, transparent 60%);
  background-size: 220% 100%; animation: gami-shimmer 2.4s linear infinite;
}
.gami-xp-label {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.4); letter-spacing:.02em;
}
.gami-hero .kpi-card { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color:#fff; }
.gami-hero .kpi-card.highlight { background: rgba(201,147,47,.16); border-color: rgba(201,147,47,.34); box-shadow:none; }
.gami-hero .kpi-card.highlight::before { display:none; }
.gami-hero .kpi-label { color:#c3cbe4; }
.gami-hero .kpi-icon { color:#fff; }

@keyframes gami-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255,255,255,.14), 0 8px 22px rgba(0,0,0,.35); }
  50% { box-shadow: 0 0 0 8px rgba(255,255,255,.06), 0 8px 26px rgba(0,0,0,.4); }
}
@keyframes gami-shimmer {
  from { background-position: 220% 0; }
  to { background-position: -20% 0; }
}

/* ---- Banner "quem vem se destacando" (top 3) ---- */
section.panel.gami-destaque-banner {
  background: linear-gradient(120deg, rgba(201,147,47,.12), rgba(122,31,31,.05));
  border-color: rgba(201,147,47,.3);
}
.gami-destaque-header { display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.gami-destaque-icone {
  flex:none; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(201,147,47,.18); color: var(--gold); animation: gami-flame 1.8s ease-in-out infinite;
}
.gami-destaque-icone .icon { width:26px; height:26px; }
.gami-destaque-kicker { font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color: var(--gold); margin:0 0 2px; }
@keyframes gami-flame {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

.gami-destaque-top3 { display:flex; gap:14px; flex-wrap:wrap; }
.gami-destaque-card {
  position:relative; flex:1 1 220px; display:flex; align-items:center; gap:12px;
  background: var(--surface); border:1px solid var(--line-soft); border-radius: var(--radius);
  padding:14px 16px; box-shadow: var(--shadow-sm);
}
.gami-destaque-card-1 {
  border-color: color-mix(in srgb, var(--gold) 45%, var(--line-soft));
  box-shadow: 0 5px 16px rgba(201,147,47,.2);
}
.gami-destaque-crown {
  position:absolute; top:-11px; left:16px; width:20px; height:20px; color: var(--gold);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.25));
}
.gami-destaque-avatar { width:44px; height:50px; font-size:16px; flex:none; }
.gami-destaque-info { min-width:0; flex:1; }
.gami-destaque-pos { font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color: var(--muted); }
.gami-destaque-nome { font-size:14px; font-weight:800; color: var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:1px 0 5px; }
.gami-destaque-xp { font-size:11px; font-weight:700; color: var(--navy-2); margin-top:5px; }

/* ---- Selo de tier (bronze/prata/ouro/platina/diamante/lendario) ---- */
.gami-tier-pill {
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800;
  padding:3px 10px 3px 7px; border-radius:999px; white-space:nowrap;
  background: color-mix(in srgb, var(--tier-cor, var(--muted)) 16%, #fff);
  color: var(--tier-cor, var(--muted));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tier-cor, var(--muted)) 30%, transparent);
}
.gami-tier-pill-icon { width:12px; height:12px; flex:none; }

/* ---- Podio (top 3 do ranking de destaque) ---- */
.gami-podium { display:flex; align-items:flex-end; justify-content:center; gap:14px; margin:8px 0 20px; flex-wrap:wrap; }
.gami-podium-item {
  flex:1 1 160px; max-width:220px; display:flex; flex-direction:column; align-items:center; gap:6px;
  background: var(--surface-2); border:1px solid var(--line-soft); border-radius: var(--radius);
  padding:20px 14px 16px; text-align:center; position:relative;
  animation: gami-pop-in .5s cubic-bezier(.22,1.4,.4,1) both;
}
.gami-podium-1 { order:2; padding-top:14px; border-top:4px solid var(--gold); transform: translateY(-10px); box-shadow: var(--shadow-md); animation-delay:.05s; }
.gami-podium-2 { order:1; border-top:4px solid #8a94a6; animation-delay:.15s; }
.gami-podium-3 { order:3; border-top:4px solid #a05a2c; animation-delay:.25s; }
.gami-podium-crown { width:26px; height:26px; color: var(--gold); margin-bottom:-2px; animation: gami-float 3s ease-in-out infinite; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.gami-podium-avatar { width:54px; height:60px; font-size:19px; margin-bottom:8px; }
.gami-podium-1 .gami-podium-avatar { width:68px; height:76px; font-size:23px; }
.gami-podium-1 .gami-emblem-stamp { width:24px; height:24px; }
.gami-podium-1 .gami-emblem-stamp svg { width:13px; height:13px; }
.gami-podium-lugar { font-size:12px; font-weight:800; color: var(--muted); }
.gami-podium-nome { font-size:14px; font-weight:800; color: var(--ink); }
.gami-podium-xp { font-size:12.5px; font-weight:700; color: var(--navy-2); }
@keyframes gami-pop-in {
  from { opacity:0; transform: translateY(14px) scale(.94); }
  to { opacity:1; transform: translateY(0) scale(1); }
}

/* ---- Lista do ranking (posicoes 4 em diante) ---- */
.gami-rank-list { display:flex; flex-direction:column; gap:8px; }
.gami-rank-row {
  display:grid; grid-template-columns: 30px 40px 1fr auto auto; align-items:center; gap:12px;
  background: var(--surface-2); border:1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding:12px 14px 10px;
}
.gami-rank-pos { font-size:12.5px; font-weight:800; color: var(--muted); text-align:center; }
.gami-rank-avatar { width:34px; height:38px; font-size:13px; margin-bottom:2px; }
.gami-rank-avatar .gami-emblem-stamp { width:14px; height:14px; bottom:-5px; }
.gami-rank-avatar .gami-emblem-stamp svg { width:8px; height:8px; }
.gami-rank-info { min-width:0; }
.gami-rank-nome { font-size:13.2px; font-weight:700; color: var(--ink); margin-bottom:5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.gami-rank-bar-track { height:6px; border-radius:999px; background: var(--line-soft); overflow:hidden; }
.gami-rank-bar-fill { height:100%; border-radius:999px; transition: width .9s cubic-bezier(.22,.9,.36,1); }
.gami-rank-xp { font-size:12.5px; font-weight:800; color: var(--navy-2); white-space:nowrap; }

/* ---- Catalogo de conquistas: cada uma vira uma medalha com fita ---- */
.gami-badge-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap:16px 14px; }
.gami-badge-card {
  background: var(--surface-2); border:1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding:18px 14px 16px; text-align:center; opacity:.55; filter:grayscale(.5); transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}
.gami-badge-card.is-unlocked { opacity:1; filter:none; border-color: rgba(201,147,47,.35); background: linear-gradient(160deg, rgba(201,147,47,.1), var(--surface-2) 60%); }
.gami-badge-card.is-unlocked:hover { transform: translateY(-3px); }
.gami-badge-icon {
  position:relative; width:48px; height:54px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center;
  clip-path: polygon(50% 0%, 100% 22%, 100% 70%, 50% 100%, 0% 70%, 0% 22%);
  background: linear-gradient(160deg, rgba(122,31,31,.2), rgba(16,26,51,.12)); color: var(--navy-2);
}
.gami-badge-icon::before, .gami-badge-icon::after {
  content:''; position:absolute; bottom:-8px; width:8px; height:14px;
  background: rgba(16,26,51,.22);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 68%, 0 100%);
}
.gami-badge-icon::before { left:9px; transform:rotate(8deg); }
.gami-badge-icon::after  { right:9px; transform:rotate(-8deg); }
.gami-badge-card.is-unlocked .gami-badge-icon {
  background: linear-gradient(160deg, #f0c869, var(--gold) 75%); color:#fff;
  box-shadow: 0 5px 12px rgba(201,147,47,.4);
}
.gami-badge-card.is-unlocked .gami-badge-icon::before,
.gami-badge-card.is-unlocked .gami-badge-icon::after { background: color-mix(in srgb, var(--gold) 55%, #7a1f1f); }
.gami-badge-icon .icon { width:22px; height:22px; }
.gami-badge-nome { font-size:12.8px; font-weight:800; color: var(--ink); margin-bottom:4px; }
.gami-badge-desc { font-size:11.3px; color: var(--muted); line-height:1.4; margin-bottom:8px; min-height:30px; }
.gami-badge-contagem { font-size:10.8px; font-weight:700; color: var(--navy-2); text-transform:uppercase; letter-spacing:.02em; }

/* ---- Ranking de regioes (times) ---- */
.gami-regiao-lista { display:flex; flex-direction:column; gap:10px; }
.gami-regiao-row { display:flex; align-items:center; gap:14px; }
.gami-regiao-lugar {
  flex:none; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; background: var(--surface-2); color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.gami-regiao-lugar svg { width:17px; height:17px; }
.gami-regiao-lugar-1 { background: linear-gradient(160deg, #f0c869, var(--gold) 80%); color:#fff; box-shadow: 0 3px 8px rgba(201,147,47,.4); }
.gami-regiao-lugar-2 { background: linear-gradient(160deg, #c7cedb, #8a94a6 80%); color:#fff; box-shadow: 0 3px 8px rgba(138,148,166,.35); }
.gami-regiao-lugar-3 { background: linear-gradient(160deg, #cf8a56, #a05a2c 80%); color:#fff; box-shadow: 0 3px 8px rgba(160,90,44,.35); }
.gami-regiao-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }

/* ================================================================
 * Comunicacao > WhatsApp: Kanban de Atendimento + painel de conversa (chat)
 * ================================================================ */
.status-pill.info { background: var(--info-bg); color: var(--info); }

.kanban-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.kanban-busca { display:flex; gap:8px; }
.kanban-busca input { padding:9px 12px; border:1.5px solid var(--line-soft); border-radius: var(--radius-sm); font-size:13.5px; min-width:260px; }
.kanban-aviso { background: var(--info-bg); color: var(--info); font-size:12.5px; font-weight:700; padding:8px 14px; border-radius: var(--radius-sm); }
.kanban-aviso a { color: inherit; text-decoration: underline; }

/* Barra da lista de conversas: selo de "atualizando sozinho" + botao de som. */
.atend-toolbar-dir { display:flex; align-items:center; gap:10px; margin-left:auto; }
.atend-auto {
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; font-weight:700; color: var(--muted);
  white-space:nowrap;
}
.atend-auto-ponto {
  width:8px; height:8px; border-radius:999px; background: var(--success, #16a34a);
  box-shadow: 0 0 0 0 rgba(22,163,74,.45);
  animation: atendPulso 2.2s ease-out infinite;
}
@keyframes atendPulso {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.45); }
  70%  { box-shadow: 0 0 0 7px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}
@media (prefers-reduced-motion: reduce) { .atend-auto-ponto { animation: none; } }
.atend-som { display:inline-flex; align-items:center; gap:6px; }
.atend-som.is-mudo { color: var(--muted); opacity:.85; }

.kanban-board { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; align-items:start; }
.kanban-col { background: var(--surface); border:1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow-sm); display:flex; flex-direction:column; min-width:0; }
.kanban-col-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 14px 10px; }
.kanban-col-count { font-size:12px; font-weight:800; color: var(--muted); background: var(--surface-2); border-radius:999px; padding:2px 9px; }
.kanban-col-body { display:flex; flex-direction:column; gap:10px; padding:0 12px 14px; max-height: 620px; overflow-y:auto; }
.kanban-empty { padding: 18px 8px !important; font-size:12.5px; }

.kanban-card {
  background:#fff; border:1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding:11px 12px; cursor:pointer; transition: transform .12s ease, box-shadow .12s ease;
  display:flex; flex-direction:column; gap:5px;
}
.kanban-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color:#b7bfd4; }
.kanban-card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.kanban-card-nome { font-weight:800; font-size:13.5px; color: var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kanban-badge-naolidas { background: var(--danger); color:#fff; font-size:11px; font-weight:800; border-radius:999px; min-width:19px; height:19px; display:inline-flex; align-items:center; justify-content:center; padding:0 5px; flex:none; }
.kanban-card-tel { font-size:11.5px; color: var(--muted); }
.kanban-card-assunto { font-size:12px; font-weight:700; color: var(--navy); }
.kanban-card-preview { font-size:12px; color: var(--ink-soft); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.kanban-card-tags { display:flex; flex-wrap:wrap; gap:5px; }
.kanban-card-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:2px; }
.kanban-card-tempo { font-size:11px; color: var(--muted); }
.kanban-card-atendente { font-size:11px; color: var(--muted); font-weight:700; }

.chip {
  display:inline-flex; align-items:center; background: var(--surface-2); color: var(--ink-soft);
  font-size:11px; font-weight:700; border-radius:999px; padding:3px 10px; white-space:nowrap;
}
.chip-btn { border:1.5px solid var(--line-soft); background:#fff; cursor:pointer; transition: background .12s ease; }
.chip-btn:hover { background: var(--surface-2); }

/* ---- Painel lateral de conversa (chat) ---- */
.chat-overlay { display:none; position:fixed; inset:0; z-index:220; background: rgba(11,18,32,.45); }
.chat-overlay.open { display:flex; justify-content:flex-end; }
.chat-drawer-box {
  width:min(440px, 100%); height:100%; background:#fff; box-shadow: var(--shadow-lg);
  display:flex; flex-direction:column; animation: chat-slide-in .18s ease;
}
@keyframes chat-slide-in { from { transform: translateX(24px); opacity:.4; } to { transform: translateX(0); opacity:1; } }
.chat-drawer-head { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line-soft); }
.chat-drawer-nome { font-weight:800; font-size:15px; }
.chat-drawer-tel { font-size:12px; color: var(--muted); }
.chat-drawer-acoes { display:flex; flex-wrap:wrap; gap:8px; padding:10px 18px; border-bottom:1px solid var(--line-soft); }
/* min-height:0 e obrigatorio: um filho de flex nao encolhe abaixo do
   proprio conteudo sem isso, e a rolagem interna nunca chega a valer --
   o texto simplesmente transborda o cartao. */
.chat-drawer-body { flex:1 1 auto; min-height:240px; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:10px; background: var(--surface); }
.chat-bubble { max-width:82%; padding:9px 12px; border-radius:12px; font-size:13px; line-height:1.42; white-space:pre-wrap; word-break:break-word; }
.chat-bubble.in { align-self:flex-start; background:#fff; border:1px solid var(--line-soft); border-bottom-left-radius:3px; }
.chat-bubble.out { align-self:flex-end; background: var(--navy-2); color:#fff; border-bottom-right-radius:3px; }
.chat-bubble-hora { display:block; margin-top:4px; font-size:10px; opacity:.65; text-align:right; }
.chat-drawer-respostas { flex:0 0 auto; display:flex; flex-wrap:wrap; gap:6px; padding:10px 18px 0; }
.chat-drawer-form { flex:0 0 auto; display:flex; gap:8px; padding:12px 18px; border-top:1px solid var(--line-soft); }
.chat-drawer-form textarea { flex:1; resize:none; padding:9px 12px; border:1.5px solid var(--line-soft); border-radius: var(--radius-sm); font-size:13px; font-family:inherit; }
/* As anotacoes rolam dentro da propria caixa: abrir o bloco nao pode
   roubar a conversa inteira nem vazar para fora do cartao. */
.chat-drawer-crm { border-top:1px solid var(--line-soft); padding:12px 18px 16px; flex:0 1 auto; max-height:300px; overflow-y:auto; }
.chat-drawer-crm summary { cursor:pointer; font-weight:700; font-size:12.5px; color: var(--navy); }
.chat-drawer-crm form { margin-top:12px; display:flex; flex-direction:column; gap:12px; }

.dash-grid { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.periodo-toggle { display:inline-flex; border:1.5px solid var(--line-soft); border-radius:999px; overflow:hidden; }
.periodo-toggle a { padding:7px 14px; font-size:12.5px; font-weight:700; color: var(--ink-soft); }
.periodo-toggle a.active { background: var(--navy-2); color:#fff; }

@media (max-width: 900px) {
  .kanban-board { grid-template-columns: 1fr; }
  .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .chat-drawer-box { width:100%; }
}

@media (max-width: 720px) {
  .gami-rank-row { grid-template-columns: 26px 32px 1fr; row-gap:6px; }
  .gami-rank-xp, .gami-rank-row .gami-tier-pill { grid-column: 3; justify-self:start; }
  .gami-podium-item { max-width:none; flex-basis:100%; }
  .gami-podium-1, .gami-podium-2, .gami-podium-3 { order:0; transform:none; }
}

/* ================================================================
   Chat-bot visual (Comunicacao > Chat-bot)
   ================================================================ */
.chatbot-back-link { font-size:12.5px; font-weight:700; color:var(--muted); white-space:nowrap; }
.chatbot-back-link:hover { color:var(--navy); }

.chatbot-toolbar {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--line-soft);
}
.chatbot-name-input {
  width:100%; border:1.5px solid transparent; background:transparent;
  font-size:17px; font-weight:800; color:var(--ink); padding:6px 8px; border-radius:var(--radius-sm);
}
.chatbot-name-input:hover { border-color:var(--line-soft); }
.chatbot-name-input:focus { border-color:var(--navy-2); background:#fff; outline:none; }

.chatbot-status-chip {
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
  font-size:12px; font-weight:800; white-space:nowrap;
}
.chatbot-status-chip.is-active { background:var(--success-bg); color:var(--success); }
.chatbot-status-chip.is-inactive { background:var(--line-soft); color:var(--muted); }
.chatbot-status-dot { width:7px; height:7px; border-radius:50%; background:currentColor; }
.chatbot-status-chip.is-active .chatbot-status-dot { animation: wa-pulse-ring-verde 1.8s ease-out infinite; }

.chatbot-warning-banner {
  background:var(--warn-bg); color:var(--warn); border:1px solid rgba(146,64,14,.18);
  border-radius:var(--radius-sm); padding:12px 16px; margin-bottom:16px; font-size:13px;
  animation: atend-rise .4s cubic-bezier(.16,1,.3,1);
}
.chatbot-warning-banner strong { display:block; margin-bottom:4px; }
.chatbot-warning-banner ul { margin:0; padding-left:20px; }
.chatbot-warning-banner li { margin:2px 0; }

.chatbot-palette {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px;
}
.chatbot-palette-label { font-size:12.5px; font-weight:800; color:var(--ink-soft); margin-right:4px; }

/* -- Listagem de fluxos (kpi-card reaproveitado, com toque proprio) -- */
.wa-chatbot-kpis .wa-chatbot-card {
  animation: atend-rise .45s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
  align-items:flex-start; text-align:left;
}
.wa-chatbot-icone {
  width:32px; height:32px; border-radius:9px; flex:none;
  background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center;
}
.wa-chatbot-icone .icon { width:17px; height:17px; }
.wa-chatbot-card.is-ativo { box-shadow: 0 0 0 2px rgba(21,128,61,.35), var(--shadow-sm); }
.wa-chatbot-card.is-ativo .wa-chatbot-icone { background:rgba(52,211,153,.3); }
@media (prefers-reduced-motion: reduce) {
  .chatbot-status-chip.is-active .chatbot-status-dot, .chatbot-warning-banner, .wa-chatbot-kpis .wa-chatbot-card { animation:none !important; }
}

#chatbot-canvas-wrap {
  position:relative; width:100%; height:560px; overflow:auto;
  background:var(--surface); border:1.5px solid var(--line-soft); border-radius:var(--radius);
  background-image: radial-gradient(circle, var(--line-soft) 1px, transparent 1px);
  background-size: 18px 18px;
}
#chatbot-canvas { position:relative; width:1600px; height:1200px; }
#chatbot-edges-svg { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; overflow:visible; }

.chatbot-edge-path { fill:none; stroke:var(--navy-2); stroke-width:2; }
.chatbot-edge-path-temp { fill:none; stroke:var(--gold); stroke-width:2; stroke-dasharray:5 4; }

.chatbot-node {
  position:absolute; width:220px; background:#fff; border-radius:var(--radius-sm);
  border:1.5px solid var(--line-soft); border-left-width:5px; box-shadow:var(--shadow-sm);
  cursor:default; user-select:none;
}
.chatbot-node:hover { box-shadow:var(--shadow-md); }
.chatbot-node-inicio { border-left-color:var(--gold); }
.chatbot-node-mensagem { border-left-color:var(--info); }
.chatbot-node-menu { border-left-color:var(--navy-2); }
.chatbot-node-encaminhar { border-left-color:var(--warn); }
.chatbot-node-encerrar { border-left-color:var(--danger); }

.chatbot-node-header {
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  padding:8px 10px; border-bottom:1px solid var(--line-soft);
}
.chatbot-node-type { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); }
.chatbot-node-del {
  width:20px; height:20px; line-height:18px; text-align:center; border-radius:50%;
  color:var(--muted); font-size:15px; flex:none;
}
.chatbot-node-del:hover { background:var(--danger-bg); color:var(--danger); }

.chatbot-node-body { padding:10px; cursor:grab; }
.chatbot-node-body:active { cursor:grabbing; }
.chatbot-node-preview { font-size:12.5px; color:var(--ink); line-height:1.4; word-break:break-word; }
.chatbot-node-empty { color:var(--muted); font-style:italic; }

.chatbot-port {
  position:absolute; width:14px; height:14px; border-radius:50%;
  background:#fff; border:2.5px solid var(--navy-2); cursor:crosshair; z-index:2;
}
.chatbot-port:hover { background:var(--gold); border-color:var(--gold); }
.chatbot-port-in { left:-8px; top:34px; }
.chatbot-port-out-wrap { position:relative; }
.chatbot-port-out { right:-8px; }

.chatbot-menu-options { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.chatbot-option-editor-row { display:flex; align-items:center; gap:8px; }
.chatbot-option-editor-row .chatbot-option-label {
  flex:1; padding:8px 10px; border:1.5px solid var(--line-soft); border-radius:var(--radius-sm); font-size:13px;
}
.chatbot-option-remove {
  width:26px; height:26px; flex:none; border-radius:50%; color:var(--muted); font-size:15px;
}
.chatbot-option-remove:hover { background:var(--danger-bg); color:var(--danger); }

/* ---- Selecionar provedor (Comunicacao > Configuracoes) ---- */
.provider-select { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:20px; }
.provider-option {
  display:block; border:1.5px solid var(--line-soft); border-radius:var(--radius); padding:14px 16px;
  cursor:pointer; background:#fff; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  animation: atend-rise .45s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}
.provider-option:hover { border-color:var(--navy-2); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.provider-option input[type="radio"] { margin-right:8px; }
.provider-option.is-checked { border-color:var(--navy-2); box-shadow:0 0 0 2px rgba(11,18,32,.1), var(--shadow-sm); }
.provider-option-icon {
  display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  border-radius:9px; margin-bottom:8px; color:#fff;
  transition: transform .18s ease;
}
.provider-option-icon .icon { width:17px; height:17px; }
.provider-option:hover .provider-option-icon { transform:scale(1.08) rotate(-3deg); }
.provider-icon-evolution { background:linear-gradient(135deg, #34d399, #15803d); }
.provider-icon-meta { background:linear-gradient(135deg, #60a5fa, #1d4ed8); }
.provider-icon-apibrasil { background:linear-gradient(135deg, #fb923c, #b91c1c); }
.provider-option-title { display:block; font-weight:800; font-size:13.5px; color:var(--ink); }
.provider-option-desc { display:block; margin-top:4px; font-size:12px; color:var(--muted); line-height:1.4; }
.provider-fields { display:none; padding:16px; background:var(--surface); border-radius:var(--radius); margin-bottom:20px; }
.provider-fields.is-active { display:block; animation: wa-fields-in .3s ease-out; }
@keyframes wa-fields-in {
  from { opacity:0; transform:translateY(-6px); }
  to { opacity:1; transform:translateY(0); }
}
.status-pill.wa-pill-live::before { animation: wa-pulse-ring-verde 1.8s ease-out infinite; }
@keyframes wa-pulse-ring-verde {
  0% { box-shadow:0 0 0 0 rgba(21,128,61,.55); }
  70% { box-shadow:0 0 0 8px rgba(21,128,61,0); }
  100% { box-shadow:0 0 0 0 rgba(21,128,61,0); }
}
@media (prefers-reduced-motion: reduce) {
  .provider-option, .provider-fields.is-active, .status-pill.wa-pill-live::before { animation:none !important; }
}

@media (max-width: 900px) {
  .provider-select { grid-template-columns:1fr; }
}

/* ================================================================
   Atendimento (whatsapp.php) -- cards de resumo + lista de conversas
   Paleta com intencao (psicologia das cores): vermelho/laranja = urgencia
   (Em espera, prende atencao primeiro), indigo/azul = foco/confianca (Em
   atendimento, trabalho em curso), verde = conclusao/alivio (Fechadas),
   navy/dourado = marca/visao geral (Todas). Animacoes sutis (entrada em
   cascata, pulso, contagem crescente) para dar sensacao de "vivo" sem
   distrair do trabalho -- tudo respeita prefers-reduced-motion no final.
   ================================================================ */
.atend-stats-row { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:12px; }
.atend-stat-card, .atend-info-card {
  position:relative; display:flex; align-items:center; gap:14px; background:#fff;
  border:1.5px solid var(--line-soft); border-radius:var(--radius); padding:14px 16px;
  overflow:hidden; animation:atend-rise .5s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:calc(var(--i, 0) * 55ms);
}
.atend-stat-card {
  transition: border-color .18s ease, box-shadow .25s ease, transform .18s ease;
  isolation:isolate;
}
.atend-stat-card::before {
  content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .25s ease;
  background:radial-gradient(120px 90px at 15% 15%, rgba(11,18,32,.06), transparent 70%);
}
.atend-stat-card:hover { border-color:var(--navy-2); box-shadow:var(--shadow-md); transform:translateY(-3px); }
.atend-stat-card:hover::before { opacity:1; }
.atend-stat-urgente:hover { box-shadow:0 10px 26px rgba(185,28,28,.18); }
.atend-stat-info:hover { box-shadow:0 10px 26px rgba(55,48,163,.18); }
.atend-stat-ok:hover { box-shadow:0 10px 26px rgba(21,128,61,.18); }
.atend-stat-card.is-active { border-color:var(--navy-2); box-shadow:0 0 0 2px rgba(11,18,32,.1); }

.atend-stat-icon {
  flex:none; width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--navy), var(--navy-2)); color:#fff;
  box-shadow:0 4px 12px rgba(11,18,32,.22);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.atend-stat-card:hover .atend-stat-icon, .atend-info-card:hover .atend-stat-icon { transform:scale(1.08) rotate(-4deg); }
.atend-stat-icon .icon { width:20px; height:20px; }
/* Os quadradinhos dos cartoes de resumo do Atendimento. Cada um tem cor
   propria -- e assim que o olho acha "em espera" sem ler --, mas todos
   em tons fechados, na mesma familia do azul aco. Antes eram gradientes
   saturados (laranja-vermelho, indigo eletrico, verde-menta) que
   destoavam do resto do Painel. */
.atend-stat-icon-espera, .atend-stat-urgente .atend-stat-icon { background:linear-gradient(135deg, #A85A2A, #8C3A3A); box-shadow:0 4px 14px rgba(140,58,58,.22); }
.atend-stat-icon-atendimento, .atend-stat-info .atend-stat-icon { background:linear-gradient(135deg, #3F5FA0, #24487A); box-shadow:0 4px 14px rgba(36,72,122,.24); }
.atend-stat-icon-fechadas, .atend-stat-ok .atend-stat-icon { background:linear-gradient(135deg, #2E8F76, #1B6B55); box-shadow:0 4px 14px rgba(27,107,85,.22); }
.atend-stat-icon-conexao { background:linear-gradient(135deg, #8A93A3, #5C6A80); box-shadow:0 4px 14px rgba(92,106,128,.2); }
.atend-stat-icon-conexao.is-live { background:linear-gradient(135deg, #2E8F76, #1B6B55); box-shadow:0 4px 14px rgba(27,107,85,.22); }
.atend-stat-icon-naolidas { background:linear-gradient(135deg, #A45252, #7E2F2F); box-shadow:0 4px 14px rgba(126,47,47,.2); }
.atend-stat-icon-midias { background:linear-gradient(135deg, #C9932F, #8A6417); box-shadow:0 4px 14px rgba(138,100,23,.2); }
.atend-stat-icon-noar { background:linear-gradient(135deg, #5C6A80, #2E3A4E); box-shadow:0 4px 14px rgba(46,58,78,.2); }

.atend-stat-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.atend-stat-label { font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.02em; color:var(--muted); }
.atend-stat-value { font-size:21px; font-weight:800; color:var(--ink); line-height:1.1; font-variant-numeric:tabular-nums; }
.atend-stat-dot {
  position:absolute; top:13px; right:13px; width:9px; height:9px; border-radius:50%; background:var(--danger);
  box-shadow:0 0 0 0 rgba(185,28,28,.55); animation:atend-pulse-ring 1.8s ease-out infinite;
}
.atend-stats-row-info { margin-bottom:20px; }
.atend-info-card { cursor:default; }
.atend-info-value { font-size:15px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.atend-info-value-ok { color:var(--success); }
.atend-info-value-alerta { color:var(--danger); }
.atend-info-value-muted { color:var(--muted); font-weight:700; font-size:13px; }

.atend-lista { display:flex; flex-direction:column; gap:8px; }
.atend-card {
  display:flex; align-items:center; gap:12px; background:#fff; border:1.5px solid var(--line-soft);
  border-radius:var(--radius); padding:12px 14px; cursor:pointer;
  transition: border-color .18s ease, box-shadow .22s ease, transform .18s ease;
  animation:atend-rise .45s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:calc(min(var(--i, 0), 14) * 40ms);
}
.atend-card:hover { border-color:var(--navy-2); box-shadow:var(--shadow-md); transform:translateY(-2px) translateX(2px); }
.atend-avatar {
  flex:none; width:40px; height:40px; border-radius:50%; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px;
  box-shadow:0 3px 8px rgba(11,18,32,.2); transition:transform .2s ease;
}
.atend-card:hover .atend-avatar { transform:scale(1.06); }
.atend-avatar-c0 { background:linear-gradient(135deg, var(--navy), var(--navy-2)); }
.atend-avatar-c1 { background:linear-gradient(135deg, #6366f1, #3730a3); }
.atend-avatar-c2 { background:linear-gradient(135deg, #14b8a6, #0f766e); }
.atend-avatar-c3 { background:linear-gradient(135deg, var(--gold), #92400e); }
.atend-avatar-c4 { background:linear-gradient(135deg, #fb7185, var(--wine)); }
.atend-avatar-c5 { background:linear-gradient(135deg, #8b5cf6, #5b21b6); }
.atend-card-info { flex:1; min-width:0; }
.atend-card-top { display:flex; align-items:center; gap:8px; }
.atend-tag { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.02em; padding:2px 8px; border-radius:999px; flex:none; }
.atend-tag-conhecido { background:var(--success-bg); color:var(--success); }
.atend-tag-novo { background:var(--surface-2); color:var(--muted); }
.atend-card-nome { font-weight:800; font-size:13.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.atend-badge-naolidas {
  margin-left:auto; background:linear-gradient(135deg, #fb7185, var(--danger)); color:#fff; font-size:11px; font-weight:800;
  border-radius:999px; min-width:19px; height:19px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 5px; flex:none; animation:atend-badge-pop .35s cubic-bezier(.34,1.56,.64,1) backwards; animation-delay:inherit;
}
.atend-card-tel { font-size:11.5px; color:var(--muted); margin-top:1px; }
.atend-card-preview { font-size:12px; color:var(--ink-soft); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- Estado vazio ilustrado ---- */
.atend-empty { display:flex; flex-direction:column; align-items:center; text-align:center; padding:36px 20px 30px; }
.atend-empty-compact { padding:26px 20px; }
.atend-empty-illustration { margin-bottom:6px; }
.atend-empty-illustration .atend-empty-blob { animation:atend-breathe 4s ease-in-out infinite; transform-origin:center; }
.atend-empty-illustration .atend-empty-bubble { animation:atend-float 3.6s ease-in-out infinite; transform-origin:center; }
.atend-empty-illustration.is-vivo .atend-empty-typing-dot { animation:atend-typing 1.2s ease-in-out infinite; }
.atend-empty-illustration .atend-empty-typing-dot:nth-child(1) { animation-delay:0s; }
.atend-empty-illustration .atend-empty-bubble .atend-empty-typing-dot:nth-of-type(2) { animation-delay:.15s; }
.atend-empty-illustration .atend-empty-bubble .atend-empty-typing-dot:nth-of-type(3) { animation-delay:.3s; }
.atend-empty-dot { animation:atend-float 3s ease-in-out infinite; transform-origin:center; }
.atend-empty-dot-1 { animation-duration:3.4s; }
.atend-empty-dot-2 { animation-duration:2.6s; animation-delay:.4s; }
.atend-empty-dot-3 { animation-duration:3.8s; animation-delay:.2s; }
.atend-empty-icone-busca {
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); color:var(--muted); margin-bottom:12px;
}
.atend-empty-icone-busca .icon { width:24px; height:24px; }
.atend-empty-titulo { margin:6px 0 4px; font-size:16px; color:var(--ink); }
.atend-empty-texto { margin:0 0 16px; max-width:360px; font-size:13px; color:var(--muted); line-height:1.5; }

.chat-drawer-head-acoes { display:flex; align-items:center; gap:8px; flex:none; }
/* O topo da conversa: identidade a esquerda, acoes a direita. O
   min-width:0 e o que permite o nome ser cortado com reticencias em vez
   de empurrar os botoes para fora. */
.chat-drawer-ident { min-width:0; flex:1; }
.chat-drawer-nome { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* O campo de dar nome, escondido ate alguem pedir. */
.chat-nome-form { display:flex; align-items:center; gap:7px; margin-top:9px; flex-wrap:wrap; }
.chat-nome-form input {
  flex:1; min-width:160px; padding:7px 11px; font-size:13px; font-family:inherit;
  border:1.5px solid var(--line); border-radius: var(--radius-sm); background:var(--surface);
}
.chat-nome-form input:focus { border-color: var(--brand); outline:none; }
.chat-nome-aviso {
  margin:8px 0 0; padding:8px 11px; font-size:11.8px; line-height:1.45;
  background: var(--info-bg); color: var(--info); border:1px solid var(--info-borda);
  border-radius: var(--radius-sm);
}
.chat-drawer-controles { flex: 0 0 auto; display:flex; flex-wrap:wrap; gap:8px; padding:10px 18px; border-bottom:1px solid var(--line-soft); position:relative; }
.chat-drawer-select { padding:7px 10px; border:1.5px solid var(--line-soft); border-radius:var(--radius-sm); font-size:12.5px; background:#fff; }
.chat-drawer-vincular { position:relative; flex:1; min-width:180px; }
.chat-drawer-vincular .chat-drawer-select { width:100%; }
.chat-vincular-resultados {
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:30; background:#fff;
  border:1.5px solid var(--line-soft); border-radius:var(--radius-sm); box-shadow:var(--shadow-md);
  max-height:220px; overflow-y:auto;
}
.chat-vincular-item { display:block; width:100%; text-align:left; padding:8px 12px; font-size:12.5px; border-bottom:1px solid var(--line-soft); }
.chat-vincular-item:last-child { border-bottom:none; }
.chat-vincular-item:hover { background:var(--surface); }

@keyframes atend-rise {
  from { opacity:0; transform:translateY(12px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes atend-pulse-ring {
  0% { box-shadow:0 0 0 0 rgba(185,28,28,.55); }
  70% { box-shadow:0 0 0 9px rgba(185,28,28,0); }
  100% { box-shadow:0 0 0 0 rgba(185,28,28,0); }
}
@keyframes atend-badge-pop {
  0% { transform:scale(0); opacity:0; }
  70% { transform:scale(1.15); opacity:1; }
  100% { transform:scale(1); }
}
@keyframes atend-breathe {
  0%, 100% { transform:scale(1); opacity:.16; }
  50% { transform:scale(1.06); opacity:.26; }
}
@keyframes atend-float {
  0%, 100% { transform:translateY(0); }
  50% { transform:translateY(-6px); }
}
@keyframes atend-typing {
  0%, 60%, 100% { transform:translateY(0); opacity:.55; }
  30% { transform:translateY(-5px); opacity:1; }
}

@media (max-width: 900px) {
  .atend-stats-row { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .atend-stats-row { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .atend-stat-card, .atend-info-card, .atend-card, .atend-stat-dot, .atend-badge-naolidas,
  .atend-empty-blob, .atend-empty-bubble, .atend-empty-dot, .atend-empty-typing-dot {
    animation:none !important;
  }
  .atend-stat-card, .atend-card { transition:border-color .12s ease, box-shadow .12s ease; }
}

/* ================================================================
   Dashboard de Atendimento (whatsapp_relatorios.php)
   ================================================================ */
.dash-fila-agora { display:flex; gap:28px; }
.dash-fila-agora > div { display:flex; flex-direction:column; gap:2px; }
.dash-fila-valor { font-size:28px; font-weight:800; line-height:1.1; }
.dash-fila-espera { color:var(--danger); }
.dash-fila-atendimento { color:var(--info); }
.dash-atendente-lista { display:flex; flex-direction:column; gap:2px; }
.dash-atendente-lista li { display:flex; align-items:center; justify-content:space-between; padding:10px 2px; border-bottom:1px solid var(--line-soft); font-size:13.5px; }
.dash-atendente-lista li:last-child { border-bottom:none; }
.dash-atendente-lista strong { color:var(--navy); }

/* -- Polish: entrada animada + cores por categoria dos KPIs, pulso no
      card "hero" (tempo medio de resposta), e paineis/linhas com stagger. -- */
.wa-relat-kpis .kpi-card,
.wa-dash-panel {
  animation: atend-rise .5s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
/* Tons fechados, como o resto dos quadradinhos de icone do Painel:
   diferenciam um numero do outro sem virar arco-iris. */
.wa-relat-kpis .wa-kpi-recebidas .kpi-icon { background:#F1F2FA; color:#3F4A7A; }
.wa-relat-kpis .wa-kpi-respondidas .kpi-icon { background:#EEF6F5; color:#1F6F6B; }
.wa-relat-kpis .wa-kpi-finalizadas .kpi-icon { background:#EDF5F8; color:#1F5F73; }
/* O destaque desta tela usa o mesmo cartao invertido do resto do
   Painel (.kpi-card.highlight acima). O brilho pulsante saiu: num
   painel que fica aberto o dia inteiro, uma animacao que nunca para
   cansa e nao informa nada. */
body.tab-whatsapp_relatorios .kpi-card.highlight {
  animation: atend-rise .5s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
body.tab-whatsapp_relatorios .kpi-card.highlight .kpi-value .wa-kpi-vazio { font-size:22px; opacity:.7; letter-spacing:.04em; }
.dash-atendente-lista li {
  animation: atend-rise .4s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay: calc(min(var(--i, 0), 10) * 45ms);
}
.wa-empty-icon { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:22px 14px !important; }
.wa-empty-icon::before {
  content:"";
  width:42px; height:42px; border-radius:50%; flex:none;
  background-color: var(--surface-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:20px;
}
.wa-relat-tabela tbody tr { transition: background-color .15s ease; }
.wa-relat-tabela tbody tr:hover { background: var(--surface-2); }
@media (prefers-reduced-motion: reduce) {
  .wa-relat-kpis .kpi-card, .wa-dash-panel, .dash-atendente-lista li, body.tab-whatsapp_relatorios .kpi-card.highlight {
    animation: none !important;
  }
}

/* ================================================================
   Mensagens Padrao (whatsapp_respostas.php)
   ================================================================ */
.resp-nova-form { display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; }
.resp-nova-form .form-field { margin-bottom:0; flex:1; min-width:200px; }
.resp-nova-texto { flex:2; min-width:280px; }
.resp-nova-texto textarea { min-height:44px; resize:vertical; }
.resp-nova-btn { flex:none; height:41px; }
.resp-lista { display:flex; flex-direction:column; gap:10px; }
.resp-card {
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  background:#fff; border:1.5px solid var(--line-soft); border-left:3px solid var(--gold);
  border-radius:var(--radius); padding:14px 16px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  animation: atend-rise .4s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay: calc(min(var(--i, 0), 14) * 45ms);
}
.resp-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-left-color:var(--navy-2); }
.resp-card-icone {
  flex:none; width:34px; height:34px; border-radius:10px;
  background:linear-gradient(135deg, rgba(201,147,47,.18), rgba(201,147,47,.32));
  color:var(--gold); display:flex; align-items:center; justify-content:center;
}
.resp-card-icone .icon { width:18px; height:18px; }
.resp-card-texto { min-width:0; flex:1; }
.resp-card-titulo { display:flex; align-items:center; gap:8px; font-weight:800; font-size:13.5px; color:var(--ink); margin-bottom:4px; }
.resp-card-mensagem { font-size:12.5px; color:var(--ink-soft); line-height:1.5; }
.resp-card-acoes { display:flex; gap:8px; flex:none; }

@media (max-width: 700px) {
  .resp-nova-form { flex-direction:column; align-items:stretch; }
  .resp-card { flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) {
  .resp-card { animation:none !important; }
}

/* ================================================================
   Contatos (whatsapp_contatos.php)
   ================================================================ */
.wa-contato-linha { display:inline-flex; align-items:center; gap:10px; }
.wa-contato-avatar { width:28px; height:28px; font-size:11px; box-shadow:0 2px 5px rgba(11,18,32,.18); }
.wa-contatos-tabela tbody tr {
  animation: atend-rise .35s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay: calc(min(var(--i, 0), 16) * 30ms);
}
@media (prefers-reduced-motion: reduce) {
  .wa-contatos-tabela tbody tr { animation:none !important; }
}

/* ================================================================
   CONTRATOS -- Cadastro de Colaborador (assistente em 5 etapas)
   ================================================================ */

/* ================================================================
   Painel do módulo Contratos -- faixa de destaque, cartões e gráficos
   ================================================================ */

.ct-dash { display:grid; gap:16px; margin-bottom:26px; }

/* ---------- Entrada suave, escalonada ---------- */
@keyframes ct-in {
  from { opacity:0; transform: translateY(16px); }
  to   { opacity:1; transform: none; }
}
.ct-hero, .ct-kpi, .ct-viz, .ct-vazio {
  animation: ct-in .5s cubic-bezier(.22,.7,.3,1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

/* ---------- Faixa de destaque ---------- */
.ct-hero {
  position:relative; overflow:hidden;
  display:grid; grid-template-columns: minmax(0,1fr) auto; align-items:center; gap:28px;
  padding:26px 250px 26px 30px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 150% at 88% 12%, rgba(201,147,47,.24) 0%, rgba(201,147,47,0) 55%),
    linear-gradient(135deg, #152442 0%, #101a33 46%, #0b1220 100%);
  box-shadow: var(--shadow-md);
  color:#fff;
}
.ct-hero-art { position:absolute; top:0; bottom:0; right:-4px; z-index:0; height:100%; width:230px; pointer-events:none; }
.ct-hero-txt { position:relative; z-index:1; }

.ct-eyebrow {
  display:inline-block; font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); background:rgba(201,147,47,.14); border:1px solid rgba(201,147,47,.3);
  padding:4px 11px; border-radius:99px;
}
.ct-hero-num {
  margin:12px 0 0; font-size:clamp(42px, 6vw, 60px); font-weight:900; line-height:1;
  letter-spacing:-.03em; color:#fff; font-variant-numeric: tabular-nums;
}
.ct-hero-cap { margin:6px 0 0; font-size:14px; color:rgba(255,255,255,.74); }
.ct-hero-cap b { color:#fff; }

.ct-hero-cta {
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  padding:11px 20px; border-radius:99px; text-decoration:none;
  font-size:13.5px; font-weight:900; letter-spacing:.01em;
  color:var(--navy-2); background: linear-gradient(135deg, #e8b551, #c9932f);
  box-shadow: 0 6px 18px rgba(201,147,47,.34);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.ct-hero-cta svg { width:16px; height:16px; }
.ct-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(201,147,47,.44); filter: brightness(1.05); }
.ct-hero-cta:active { transform: none; }

/* mini-série de 8 semanas -- painel translúcido, para não brigar com a ilustração */
.ct-hero-serie {
  position:relative; z-index:2; margin:0; width:284px; max-width:44vw;
  padding:14px 16px 12px; border-radius:16px;
  background: rgba(11,18,32,.55); border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ct-hero-serie figcaption {
  font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.6); margin-bottom:10px; white-space:nowrap;
}
.ct-hero-serie svg { width:100%; height:62px; display:block; overflow:visible; }
.ct-serie-legenda { margin:8px 0 0; font-size:12px; color:rgba(255,255,255,.62); }
.ct-serie-legenda b { color:var(--gold); font-weight:900; }
@keyframes ct-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes ct-fade { from { opacity:0; } to { opacity:1; } }
.ct-serie-linha {
  stroke-dasharray:1; stroke-dashoffset:1; pathLength:1;
  animation: ct-draw 1.1s .3s cubic-bezier(.5,0,.2,1) both;
}
.ct-serie-area { animation: ct-fade .7s .9s both; }
.ct-serie-dot  { animation: ct-fade .4s 1.3s both; }

/* ilustração do hero */
@keyframes ct-spin { to { transform: rotate(360deg); } }
@keyframes ct-pop  { 0% { transform: scale(.4); opacity:0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity:1; } }
@keyframes ct-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.ct-art-ring   { transform-origin:232px 86px; animation: ct-spin 42s linear infinite; }
.ct-art-ring-2 { animation-duration: 26s; animation-direction: reverse; }
.ct-art-doc    { animation: ct-float 5.5s ease-in-out infinite; }
.ct-art-check  { transform-box: fill-box; transform-origin:center; animation: ct-pop .55s 1.1s both; }
.ct-art-tick   { stroke-dasharray:22; stroke-dashoffset:22; animation: ct-draw2 .45s 1.5s forwards; }
@keyframes ct-draw2 { to { stroke-dashoffset:0; } }

/* ---------- Cartões ---------- */
.ct-kpis { display:grid; grid-template-columns: repeat(auto-fit, minmax(215px,1fr)); gap:14px; }
.ct-kpi {
  position:relative; overflow:hidden;
  background: var(--surface); border:1.5px solid var(--line); border-radius: var(--radius);
  padding:18px 18px 16px; box-shadow: var(--shadow-sm);
  display:flex; flex-direction:column; gap:2px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ct-kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color:#98a0b4; }
.ct-kpi::after {
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background: linear-gradient(180deg, var(--gold), var(--wine));
  opacity:.85;
}
.ct-kpi-ic {
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center; margin-bottom:10px;
  background: linear-gradient(135deg, rgba(16,26,51,.09), rgba(122,31,31,.13));
  color: var(--navy);
}
.ct-kpi-ic svg { width:19px; height:19px; }
.ct-kpi-rot {
  font-size:11.5px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; color: var(--muted);
}
.ct-kpi-val {
  font-size:29px; font-weight:900; line-height:1.15; color: var(--navy);
  letter-spacing:-.02em; font-variant-numeric: tabular-nums;
}
.ct-kpi-meta { font-size:12.2px; color: var(--muted); line-height:1.4; margin-top:2px; }
.ct-kpi-meta.is-alta { color: var(--success); font-weight:700; }
.ct-kpi.is-alerta { border-color: rgba(146,64,14,.42); background: var(--warn-bg); }
.ct-kpi.is-alerta::after { background: linear-gradient(180deg, #d9a03a, var(--warn)); opacity:1; }
.ct-kpi.is-alerta .ct-kpi-val,
.ct-kpi.is-alerta .ct-kpi-meta { color: var(--warn); }
.ct-kpi.is-alerta .ct-kpi-ic { background: rgba(146,64,14,.14); color: var(--warn); }

/* ---------- Gráficos ---------- */
.ct-vizrow { display:grid; grid-template-columns: 1.1fr 1fr; gap:16px; }
.ct-viz {
  margin:0; background: var(--surface); border:1.5px solid var(--line);
  border-radius: var(--radius); padding:20px 22px 22px; box-shadow: var(--shadow-sm);
}
.ct-viz figcaption { margin-bottom:18px; }
.ct-viz h3 { margin:0; font-size:15.5px; font-weight:900; color: var(--navy); letter-spacing:-.01em; }
.ct-viz figcaption p { margin:4px 0 0; font-size:12.6px; color: var(--muted); }
.ct-viz figcaption p b { color: var(--wine); font-weight:900; }

/* barras horizontais -- rampa sequencial de uma matiz */
.ct-bars { display:grid; gap:14px; }
.ct-bar-row {
  display:grid; grid-template-columns: 116px minmax(0,1fr) 34px;
  grid-template-areas: "rot track val" "rot sub sub";
  align-items:center; column-gap:12px; row-gap:3px;
}
.ct-bar-rot { grid-area:rot; font-size:12.8px; font-weight:800; color: var(--ink-soft); align-self:center; }
.ct-bar-track {
  grid-area:track; height:14px; border-radius:0 4px 4px 0;
  background: rgba(16,26,51,.07);
}
@keyframes ct-grow { from { width:0; } to { width: var(--w); } }
.ct-bar-fill {
  height:100%; width: var(--w); min-width:3px; background: var(--c);
  border-radius:0 4px 4px 0;
  animation: ct-grow .85s cubic-bezier(.22,.7,.3,1) both;
  animation-delay: calc(.35s + var(--d, 0s));
}
.ct-bar-row { transition: opacity .15s ease; }
.ct-bars:hover .ct-bar-row { opacity:.55; }
.ct-bars:hover .ct-bar-row:hover { opacity:1; }
.ct-legenda li { transition: opacity .15s ease; }
.ct-legenda:hover li { opacity:.55; }
.ct-legenda:hover li:hover { opacity:1; }
.ct-bar-val {
  grid-area:val; text-align:right; font-size:16px; font-weight:900;
  color: var(--navy); font-variant-numeric: tabular-nums;
}
.ct-bar-sub { grid-area:sub; font-size:11.6px; color: var(--muted); }

/* barra empilhada -- 2px de superfície separando os segmentos */
.ct-stack {
  display:flex; gap:2px; height:18px; border-radius:6px; overflow:hidden;
  background: var(--surface-2);
}
.ct-stack-seg {
  width: var(--w); background: var(--c); min-width:4px;
  animation: ct-grow .8s cubic-bezier(.22,.7,.3,1) both;
  animation-delay: calc(.35s + var(--d, 0s));
}
.ct-legenda { list-style:none; margin:18px 0 0; padding:0; display:grid; gap:11px; }
.ct-legenda li { display:flex; align-items:center; gap:11px; }
.ct-legenda-cor { flex:none; width:11px; height:11px; border-radius:3px; }
.ct-legenda-txt { flex:1; min-width:0; }
.ct-legenda-txt b { display:block; font-size:13px; font-weight:800; color: var(--ink); }
.ct-legenda-txt em { display:block; font-style:normal; font-size:11.8px; color: var(--muted); margin-top:1px; }
.ct-legenda .status-pill { flex:none; font-variant-numeric: tabular-nums; }

/* ---------- Estado vazio ilustrado ---------- */
.ct-vazio {
  display:grid; grid-template-columns: auto minmax(0,1fr); align-items:center; gap:30px;
  background: var(--surface); border:1.5px dashed var(--line); border-radius: var(--radius);
  padding:26px 30px; box-shadow: var(--shadow-sm);
}
.ct-vazio-art { width:200px; height:auto; flex:none; }
.ct-vazio-doc { animation: ct-float 6s ease-in-out infinite; }
.ct-vazio-check { transform-box: fill-box; transform-origin:center; animation: ct-pop .6s .5s both; }
.ct-vazio-txt h3 { margin:0 0 8px; font-size:17px; font-weight:900; color: var(--navy); }
.ct-vazio-txt p { margin:0 0 16px; font-size:13.4px; color: var(--ink-soft); max-width:60ch; }

@media (max-width: 1080px) {
  .ct-vizrow { grid-template-columns: 1fr; }
}
@media (max-width: 1180px) {
  .ct-hero { padding-right:30px; }
  .ct-hero-art { display:none; }
}
@media (max-width: 860px) {
  .ct-hero { grid-template-columns: 1fr; padding:22px; }
  .ct-hero-serie { width:100%; max-width:none; }
  .ct-vazio { grid-template-columns: 1fr; text-align:center; justify-items:center; gap:16px; }
  .ct-vazio-art { width:160px; }
  .ct-bar-row { grid-template-columns: 96px minmax(0,1fr) 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-hero, .ct-kpi, .ct-viz, .ct-vazio,
  .ct-bar-fill, .ct-stack-seg, .ct-serie-linha, .ct-serie-area, .ct-serie-dot,
  .ct-art-ring, .ct-art-doc, .ct-art-check, .ct-art-tick,
  .ct-vazio-doc, .ct-vazio-check {
    animation: none !important;
  }
  .ct-serie-linha { stroke-dashoffset:0; }
  .ct-kpi:hover, .ct-hero-cta:hover { transform:none; }
}

/* --- Trilha de etapas --- */
.wz-steps {
  list-style:none; margin:0 0 10px; padding:0;
  display:grid; grid-template-columns: repeat(5, 1fr); gap:8px;
}
.wz-step {
  display:flex; align-items:center; gap:9px; cursor:pointer; user-select:none;
  padding:10px 12px; border-radius: var(--radius-sm); border:1.5px solid var(--line);
  background: var(--surface); transition: background .14s ease, border-color .14s ease;
}
.wz-step:hover { border-color: var(--brand-borda); background: var(--brand-suave); }
.wz-step-n {
  flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-size:12.5px; font-weight:900; background: var(--surface-2); color: var(--ink-soft);
}
.wz-step-t { font-size:12.5px; font-weight:800; color: var(--ink-soft); line-height:1.25; }
.wz-step.is-active { background: var(--brand-forte); border-color: var(--brand-forte); }
.wz-step.is-active .wz-step-n { background: rgba(255,255,255,.92); color: var(--brand-forte); }
.wz-step.is-active .wz-step-t { color:#fff; }
.wz-step.is-done .wz-step-n { background: var(--success); color:#fff; }
.wz-step.is-done .wz-step-n::after { content:"\2713"; }
.wz-step.is-done .wz-step-n { font-size:0; }
.wz-step.is-done .wz-step-n::after { font-size:13px; }

.wz-progress { height:5px; background: var(--surface-2); border-radius:99px; overflow:hidden; margin-bottom:22px; }
.wz-progress-bar { height:100%; width:20%; background: linear-gradient(90deg, var(--brand), var(--gold)); transition: width .28s ease; }

/* --- Cabecalho de cada etapa --- */
.wz-intro { margin-bottom:20px; padding-left:14px; border-left:4px solid var(--gold); }
.wz-intro h3 { margin:0 0 6px; font-size:17px; font-weight:900; color: var(--navy); }
.wz-intro p { margin:0; font-size:13.4px; color: var(--ink-soft); max-width:820px; }

.wz-req {
  display:inline-block; margin-left:6px; font-size:10.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; color: var(--wine); background: rgba(122,31,31,.09); padding:2px 7px; border-radius:99px;
}
.form-field.tem-erro input, .form-field.tem-erro select, .form-field.tem-erro textarea {
  border-color: var(--danger); background:#fff6f6;
}
.wz-erro { font-size:12px; font-weight:700; color: var(--danger); }
.wz-locked { background: var(--surface-2) !important; font-weight:800; letter-spacing:.03em; }

/* --- CPF + botao consultar --- */
.wz-input-action { display:flex; gap:8px; align-items:stretch; }
.wz-input-action input { flex:1; min-width:0; }
.wz-input-action .btn { flex:none; white-space:nowrap; }

/* --- Caixa de resultado da consulta --- */
.wz-verify { margin: 4px 0 20px; }
.wz-verify-box {
  border:1.5px solid var(--line); border-left-width:5px; border-radius: var(--radius-sm);
  padding:14px 16px; background: var(--surface); font-size:13.3px; color: var(--ink-soft);
}
/* Só o título do quadro vira bloco. <strong> dentro dos parágrafos precisa
   continuar em linha -- senão frases como "preenchido: nome e nascimento"
   quebram em várias linhas soltas. */
.wz-verify-box > strong { display:block; font-size:14.5px; color: var(--navy); margin-bottom:4px; }
.wz-verify-box.ok   { border-left-color: var(--success); background: var(--success-bg); }
.wz-verify-box.ok strong { color: var(--success); }
.wz-verify-box.erro { border-left-color: var(--danger);  background: var(--danger-bg); }
.wz-verify-box.erro strong { color: var(--danger); }
.wz-verify-box.warn { border-left-color: var(--warn);    background: var(--warn-bg); }
.wz-verify-box.info { border-left-color: var(--info);    background: var(--info-bg); }
.wz-verify-txt { margin-top:6px; }
.wz-verify-lista { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; }
.wz-verify-lista li { display:flex; justify-content:space-between; gap:12px; font-size:13px; border-bottom:1px dashed rgba(0,0,0,.12); padding-bottom:5px; }
.wz-verify-lista li:last-child { border-bottom:0; }
.wz-verify-lista span { color: var(--muted); font-weight:700; }
.wz-verify-lista b { font-weight:800; color: var(--ink); text-align:right; }
.wz-verify-lista b.ok { color: var(--success); }
.wz-verify-lista b.no { color: var(--danger); }

/* --- Interruptor --- */
.wz-switch-box { margin:18px 0 4px; padding:14px 16px; border:1.5px dashed var(--line); border-radius: var(--radius-sm); background: var(--info-bg); }
.wz-switch { display:flex; gap:12px; align-items:flex-start; cursor:pointer; }
.wz-switch input { position:absolute; opacity:0; width:0; height:0; }
.wz-switch-ui {
  flex:none; width:42px; height:24px; border-radius:99px; background:#b9bed0; position:relative;
  transition: background .16s ease; margin-top:2px;
}
.wz-switch-ui::after {
  content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition: transform .16s ease;
}
.wz-switch input:checked + .wz-switch-ui { background: var(--wine); }
.wz-switch input:checked + .wz-switch-ui::after { transform: translateX(18px); }
.wz-switch input:focus-visible + .wz-switch-ui { outline:2px solid var(--navy); outline-offset:2px; }
.wz-switch-text strong { display:block; font-size:13.5px; font-weight:800; color: var(--ink); }
.wz-switch-text em { display:block; font-style:normal; font-size:12.5px; color: var(--ink-soft); margin-top:3px; }

/* --- Escolha da funcao --- */
.wz-choices { display:grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap:12px; }
.wz-choice input { position:absolute; opacity:0; width:0; height:0; }
.wz-choice-box {
  display:block; padding:14px 16px; border:2px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); cursor:pointer; height:100%; transition: border-color .14s ease, background .14s ease;
}
.wz-choice-box:hover { border-color:#9aa2b8; }
.wz-choice-box strong { display:block; font-size:14px; font-weight:900; color: var(--navy); }
.wz-choice-box em { display:block; font-style:normal; font-size:12.3px; color: var(--muted); margin-top:4px; line-height:1.4; }
.wz-choice input:checked + .wz-choice-box { border-color: var(--wine); background:#fff; box-shadow: inset 0 0 0 1px var(--wine); }
.wz-choice input:checked + .wz-choice-box strong { color: var(--wine); }
.wz-choice input:focus-visible + .wz-choice-box { outline:2px solid var(--navy); outline-offset:2px; }

/* --- Check list --- */
.wz-ck-status { margin-bottom:16px; }
.wz-ck-bar { height:9px; border-radius:99px; background: var(--surface-2); overflow:hidden; }
.wz-ck-bar-fill { height:100%; width:0; background: var(--warn); transition: width .25s ease; }
.wz-ck-bar-fill.is-full { background: var(--success); }
.wz-ck-legenda { margin:8px 0 0; font-size:13px; color: var(--ink-soft); }
.wz-ck-legenda strong.ok { color: var(--success); }

.wz-ck-list { display:grid; gap:10px; }
.wz-ck-item { border:1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); overflow:hidden; }
.wz-ck-item.is-ok { border-color: rgba(21,128,61,.45); background: #f3fbf5; }
.wz-ck-item.is-inativo { opacity:.55; }
.wz-ck-head { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; cursor:pointer; }
.wz-ck-head input { position:absolute; opacity:0; width:0; height:0; }
.wz-ck-mark {
  flex:none; width:22px; height:22px; border-radius:6px; border:2px solid var(--line);
  background:#fff; margin-top:2px; display:grid; place-items:center; transition: background .14s ease, border-color .14s ease;
}
.wz-ck-head input:checked + .wz-ck-mark { background: var(--success); border-color: var(--success); }
.wz-ck-head input:checked + .wz-ck-mark::after { content:"\2713"; color:#fff; font-size:14px; font-weight:900; line-height:1; }
.wz-ck-head input:focus-visible + .wz-ck-mark { outline:2px solid var(--navy); outline-offset:2px; }
.wz-ck-text { flex:1; min-width:0; }
.wz-ck-text strong { display:block; font-size:13.8px; font-weight:800; color: var(--ink); }
.wz-ck-text em { display:block; font-style:normal; font-size:12.4px; color: var(--muted); margin-top:3px; line-height:1.45; }
.wz-ck-tag { flex:none; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; padding:3px 8px; border-radius:99px; white-space:nowrap; }
.wz-ck-tag.is-req { background: rgba(122,31,31,.1); color: var(--wine); }
.wz-ck-tag.is-off { background: var(--surface-2); color: var(--muted); }
.wz-ck-anexo { border-top:1px dashed var(--line); padding:10px 16px 12px; background: rgba(0,0,0,.015); }
.wz-ck-anexo label { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:12.3px; color: var(--muted); font-weight:700; }
.wz-ck-anexo input[type=file] { font-size:12px; }
.wz-ck-anexo-link { display:inline-block; margin-top:6px; font-size:12.3px; font-weight:800; color: var(--info); }
.wz-ck-item.is-inativo .wz-ck-anexo { display:none; }

/* --- Autorizacao excepcional --- */
.wz-override { margin:18px 0; padding:14px 16px; border:1.5px solid rgba(146,64,14,.35); border-radius: var(--radius-sm); background: var(--warn-bg); }
.wz-override textarea { width:100%; margin-top:10px; border:1.5px solid var(--line); border-radius:10px; padding:9px 11px; font: inherit; font-size:13px; }

/* --- Resumo --- */
.wz-resumo { margin-top:20px; border:1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); padding:16px 18px; }
.wz-resumo h4 { margin:0 0 12px; font-size:14px; font-weight:900; color: var(--navy); text-transform:uppercase; letter-spacing:.03em; }
.wz-resumo-lista { margin:0; display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:10px 22px; }
.wz-resumo-lista div { border-bottom:1px dashed var(--line-soft); padding-bottom:7px; }
.wz-resumo-lista dt { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color: var(--muted); }
.wz-resumo-lista dd { margin:2px 0 0; font-size:13.4px; font-weight:700; color: var(--ink); }
.wz-resumo-lista dd.vazio { color: var(--danger); font-weight:600; font-style:italic; }

/* --- Barra de acao --- */
.wz-actions {
  position:sticky; bottom:0; z-index:5; margin:24px -22px -22px; padding:14px 22px;
  background: rgba(247,247,247,.96); backdrop-filter: blur(6px);
  border-top:1.5px solid var(--line); border-radius:0 0 var(--radius) var(--radius);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.wz-actions-msg { flex:1; min-width:220px; font-size:12.8px; }
.wz-actions-btns { display:flex; gap:10px; flex-wrap:wrap; }
.wz-msg { color: var(--muted); font-weight:700; }
.wz-msg.ok { color: var(--success); }
.wz-msg.no { color: var(--wine); }
#wz-salvar:disabled { opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }

@media (max-width: 780px) {
  .wz-steps { grid-template-columns: repeat(5, 1fr); gap:4px; }
  .wz-step { flex-direction:column; gap:4px; padding:8px 4px; text-align:center; }
  .wz-step-t { font-size:10.5px; }
  .wz-input-action { flex-direction:column; }
  .wz-actions { position:static; margin:20px 0 0; border-radius: var(--radius-sm); }
}

/* (A regra global [hidden] { display:none !important } no topo da folha
   ja cobre o que esta linha resolvia so dentro de Contratos.) */
body[class*="tab-contratos"] input::placeholder { text-transform: none; }
body[class*="tab-contratos"] .wz-ck-list + .form-field,
body[class*="tab-contratos"] .wz-override + .form-field { margin-top: 22px; }

/* ================================================================
   CONTRATOS -- impressões, conferência manual, ícones e configuração
   ================================================================ */

/* --- Botão de impressão dentro do item do check list --- */
.wz-ck-acao {
  border-top: 1px dashed var(--line);
  padding: 12px 16px;
  background: rgba(201,147,47,.09);
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
}
.wz-ck-acao .btn { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.wz-ck-acao .btn .icon { width: 16px; height: 16px; }
.wz-ck-acao-txt {
  flex: 1; min-width: 220px; font-size: 12.4px; line-height: 1.5; color: var(--ink-soft);
}
.wz-ck-item.is-inativo .wz-ck-acao { display: none; }

/* --- Conferência manual do CPF --- */
.wz-manual {
  margin: 18px 0; padding: 14px 16px;
  border: 1.5px solid rgba(55,48,163,.28); border-radius: var(--radius-sm);
  background: var(--info-bg);
}
.wz-manual .wz-switch-text a { font-weight: 800; color: var(--info); }
.wz-manual .wz-switch input:checked + .wz-switch-ui { background: var(--info); }

/* --- Ícones de ação na listagem --- */
.acoes-icones { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.ic-btn {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border: 1.5px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--navy); cursor: pointer;
  transition: background .13s ease, border-color .13s ease, transform .13s ease;
}
.ic-btn svg { width: 17px; height: 17px; }
.ic-btn:hover { background: var(--navy); border-color: var(--navy); color: #fff; transform: translateY(-1px); }
.ic-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.ic-menu { position: relative; }
.ic-menu-lista {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  min-width: 210px; padding: 6px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-md);
  display: none;
}
.ic-menu.aberto .ic-menu-lista { display: block; }
.ic-menu.aberto > .ic-btn { background: var(--navy); border-color: var(--navy); color: #fff; }
.ic-menu-lista a {
  display: block; padding: 9px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none; text-align: left;
}
.ic-menu-lista a:hover { background: var(--surface-2); }

/* --- Pendência de cópias digitais --- */
.col-anexos { min-width: 150px; }
.falta-anexo { margin-top: 5px; }
.falta-anexo summary {
  cursor: pointer; font-size: 11.8px; font-weight: 800; color: var(--warn);
  list-style: none;
}
.falta-anexo summary::-webkit-details-marker { display: none; }
.falta-anexo summary::before { content: "▸ "; }
.falta-anexo[open] summary::before { content: "▾ "; }
.falta-anexo ul {
  margin: 6px 0 0; padding-left: 16px;
  font-size: 11.8px; color: var(--muted); line-height: 1.5;
}

/* --- Tela de Configuração --- */
.cfg-placeholders {
  margin: 0 0 18px; padding: 14px 16px;
  border: 1.5px dashed var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.cfg-placeholders h3 {
  margin: 0 0 2px; font-size: 12.5px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .06em; color: var(--navy);
}
.cfg-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cfg-tag {
  border: 1.5px solid var(--line); border-radius: 99px; background: #fff;
  padding: 4px 11px; cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 700;
  color: var(--wine);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.cfg-tag:hover { border-color: var(--wine); background: rgba(122,31,31,.07); }
.cfg-tag.is-copiado { background: var(--success); border-color: var(--success); color: #fff; }
.cfg-editor {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.6px; line-height: 1.6; min-height: 420px;
}

@media (max-width: 780px) {
  .acoes-icones { justify-content: flex-start; }
  .ic-menu-lista { right: auto; left: 0; }
}

/* --- Resposta crua da API, para diagnóstico --- */
.wz-verify-cru { margin-top: 10px; }
.wz-verify-cru summary {
  cursor: pointer; font-size: 12px; font-weight: 800; color: var(--danger); list-style: none;
}
.wz-verify-cru summary::-webkit-details-marker { display: none; }
.wz-verify-cru summary::before { content: "▸ "; }
.wz-verify-cru[open] summary::before { content: "▾ "; }
.wz-verify-cru code {
  display: block; margin-top: 6px; padding: 8px 10px;
  background: rgba(0,0,0,.05); border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; line-height: 1.5; word-break: break-word; color: var(--ink);
}
.wz-verify-cru span {
  display: block; margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; color: var(--muted);
}

/* --- Teste de consulta e ajustes avançados (Configuração) --- */
.cfg-teste {
  margin-top: 22px; padding: 16px 18px;
  border: 1.5px dashed var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.cfg-teste h3 {
  margin: 0 0 2px; font-size: 12.5px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .06em; color: var(--navy);
}
.cfg-teste-form { display: grid; grid-template-columns: 200px 1fr auto; gap: 12px; align-items: end; margin-top: 12px; }
.cfg-teste-form .form-field { margin-bottom: 0; }
.cfg-teste-form .btn { height: 40px; }

.cfg-resultado {
  margin-top: 14px; padding: 14px 16px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line); border-left-width: 5px; background: #fff; font-size: 13px;
}
.cfg-resultado.ok   { border-left-color: var(--success); background: var(--success-bg); }
.cfg-resultado.erro { border-left-color: var(--danger);  background: var(--danger-bg); }
.cfg-resultado > strong { display: block; margin-bottom: 6px; font-size: 14px; }
.cfg-resultado.ok > strong   { color: var(--success); }
.cfg-resultado.erro > strong { color: var(--danger); }
.cfg-resultado p { margin: 0 0 10px; }
.cfg-resultado dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 8px 18px; margin: 0; }
.cfg-resultado dt { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cfg-resultado dd { margin: 1px 0 0; font-weight: 700; word-break: break-word; }
.cfg-resultado details { margin-top: 12px; }
.cfg-resultado summary { cursor: pointer; font-size: 12px; font-weight: 800; }
.cfg-resultado pre {
  margin: 8px 0 0; padding: 10px 12px; max-height: 320px; overflow: auto;
  background: var(--navy-2); color: #e6e9f2; border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; line-height: 1.5;
}

.cfg-avancado { margin-top: 18px; }
.cfg-avancado > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 800; color: var(--ink-soft);
  padding: 8px 0;
}
.cfg-avancado[open] > summary { color: var(--navy); }

@media (max-width: 760px) {
  .cfg-teste-form { grid-template-columns: 1fr; }
}

/* --- Tabela do diagnóstico de rotas --- */
.cfg-rotas { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 12.5px; }
.cfg-rotas th, .cfg-rotas td {
  text-align: left; padding: 7px 10px; border-bottom: 1px solid rgba(0,0,0,.12); vertical-align: middle;
}
.cfg-rotas th {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.cfg-rotas code { font-size: 11.5px; word-break: break-all; }
.cfg-rotas tr.is-ok { background: rgba(21,128,61,.12); }
.cfg-rotas tr.is-ok td { font-weight: 700; }

/* ================================================================
   CONTRATOS > Arquivos -- ficha funcional por colaborador
   ================================================================ */
.arq-pessoa {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); margin-bottom: 12px; overflow: hidden;
}
.arq-cab {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; cursor: pointer;
  transition: background .13s ease;
}
.arq-cab:hover { background: var(--surface-2); }
.arq-toggle {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 0;
}
.arq-chevron { width: 15px; height: 15px; transition: transform .18s ease; }
.arq-pessoa.is-aberta .arq-chevron { transform: rotate(90deg); }
.arq-ident { flex: 1; min-width: 0; }
.arq-ident strong { display: block; font-size: 14.5px; font-weight: 800; color: var(--navy); }
.arq-ident span { display: block; font-size: 12.2px; color: var(--muted); margin-top: 2px; }
.arq-conta {
  flex: none; font-size: 11.5px; font-weight: 800; color: var(--ink-soft);
  background: var(--surface-2); border-radius: 99px; padding: 4px 11px; white-space: nowrap;
}
.arq-todos { flex: none; display: flex; align-items: center; gap: 7px; cursor: pointer; }
.arq-todos span { font-size: 12px; font-weight: 800; color: var(--ink-soft); white-space: nowrap; }

.arq-corpo { display: none; padding: 4px 18px 18px; border-top: 1px dashed var(--line); }
.arq-pessoa.is-aberta .arq-corpo { display: block; }

.arq-grupo {
  margin: 16px 0 8px; font-size: 11px; font-weight: 900;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.arq-vazio { font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--line); margin-left: 6px; }

.arq-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.arq-lista li {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--line-soft); border-radius: 10px;
  padding: 9px 12px; background: #fff;
  transition: border-color .13s ease;
}
.arq-lista li:hover { border-color: #9aa2b8; }
.arq-item { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; cursor: pointer; }
.arq-ic {
  flex: none; width: 38px; height: 26px; border-radius: 6px; display: grid; place-items: center;
  font-size: 9.5px; font-weight: 900; letter-spacing: .04em; color: #fff;
}
.arq-ic.pdf { background: var(--wine); }
.arq-ic.img { background: var(--info); }
.arq-nome { min-width: 0; }
.arq-nome b { display: block; font-size: 13px; font-weight: 800; color: var(--ink); }
.arq-nome em {
  display: block; font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 1px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all;
}

/* barra fixa de download */
.arq-barra {
  position: sticky; bottom: 0; z-index: 6;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 16px; padding: 14px 18px;
  background: rgba(247,247,247,.97); backdrop-filter: blur(6px);
  border: 1.5px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.arq-todos-geral { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.arq-todos-geral span { font-size: 13px; font-weight: 800; color: var(--ink); }
.arq-contador { flex: 1; font-size: 12.8px; color: var(--muted); font-weight: 700; }
#arq-baixar { display: inline-flex; align-items: center; gap: 8px; }
#arq-baixar .icon { width: 16px; height: 16px; }
#arq-baixar:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Pop-up de exclusão ---------- */
.ic-btn.is-perigo { color: var(--danger); border-color: rgba(185,28,28,.35); }
.ic-btn.is-perigo:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.mex-alvo {
  border-left: 4px solid var(--danger); background: var(--danger-bg);
  border-radius: 0 8px 8px 0; padding: 10px 14px; margin-bottom: 14px;
}
.mex-alvo strong { display: block; font-size: 15px; font-weight: 900; color: var(--danger); }
.mex-alvo span { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.mex-aviso { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--ink-soft); }

@media (max-width: 760px) {
  .arq-cab { flex-wrap: wrap; }
  .arq-conta, .arq-todos { order: 3; }
  .arq-lista li { flex-wrap: wrap; }
}

/* ================================================================
   CONTRATOS -- situacao do CPF (ativo / nao ativo / inconsistente)
   ================================================================ */
.cst {
  margin: 4px 0 22px; padding: 16px 18px 14px; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); background: #fff;
}
.cst legend {
  padding: 0 8px; font-size: 12px; font-weight: 900; letter-spacing: .06em;
  text-transform: uppercase; color: var(--navy);
}
.cst-ajuda { margin: 0 0 12px; font-size: 12.6px; line-height: 1.55; color: var(--ink-soft); }
.cst-opcoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cst-op {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 13px; background: var(--surface);
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.cst-op:hover { border-color: #c3c8d8; background: #fff; }
.cst-op input { position: absolute; opacity: 0; width: 0; height: 0; }
.cst-bola {
  flex: none; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px;
  border: 2px solid #b9bed0; background: #fff; position: relative; transition: border-color .14s ease;
}
.cst-bola::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background: transparent; transition: background .14s ease;
}
.cst-txt strong { display: block; font-size: 13.6px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.cst-txt em { display: block; font-style: normal; font-size: 11.8px; line-height: 1.45; color: var(--muted); margin-top: 3px; }

/* Cor de cada opcao -- so acende quando marcada, para a tela nao virar
   um semaforo de tres luzes acesas ao mesmo tempo. */
.cst-op.is-verde.is-marcada    { border-color: var(--success); background: var(--success-bg); box-shadow: inset 0 0 0 1px var(--success); }
.cst-op.is-verde.is-marcada .cst-bola { border-color: var(--success); }
.cst-op.is-verde.is-marcada .cst-bola::after { background: var(--success); }
.cst-op.is-verde.is-marcada .cst-txt strong { color: var(--success); }

.cst-op.is-vermelho.is-marcada { border-color: var(--danger); background: var(--danger-bg); box-shadow: inset 0 0 0 1px var(--danger); }
.cst-op.is-vermelho.is-marcada .cst-bola { border-color: var(--danger); }
.cst-op.is-vermelho.is-marcada .cst-bola::after { background: var(--danger); }
.cst-op.is-vermelho.is-marcada .cst-txt strong { color: var(--danger); }

.cst-op.is-ambar.is-marcada    { border-color: var(--warn); background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn); }
.cst-op.is-ambar.is-marcada .cst-bola { border-color: var(--warn); }
.cst-op.is-ambar.is-marcada .cst-bola::after { background: var(--warn); }
.cst-op.is-ambar.is-marcada .cst-txt strong { color: var(--warn); }

.cst-op input:focus-visible + .cst-bola { outline: 2px solid var(--navy); outline-offset: 2px; }
.cst-origem { margin: 12px 0 0; font-size: 12.2px; color: var(--muted); }
.cst-origem strong { color: var(--ink); }

/* Selo da situacao, usado na lista de colaboradores */
.cst-selo {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
  border-radius: 99px; font-size: 10.5px; font-weight: 900; letter-spacing: .03em;
  text-transform: uppercase; white-space: nowrap;
}
.cst-selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cst-selo.is-verde    { background: var(--success-bg); color: var(--success); }
.cst-selo.is-vermelho { background: var(--danger-bg);  color: var(--danger); }
.cst-selo.is-ambar    { background: var(--warn-bg);    color: var(--warn); }
.cst-selo.is-cinza    { background: #eceef4;           color: var(--muted); }

/* Resultado anterior mantido na tela, atras do aviso novo */
.wz-verify-box.antiga { margin-top: 8px; opacity: .78; border-left-color: #c3c8d8; }
.wz-verify-auto { border-left: 3px solid var(--success); padding-left: 10px; margin-top: 10px; }

/* ================================================================
   CONTRATOS -- historico de movimentacao da ficha
   ================================================================ */
.hist { margin-top: 26px; padding-top: 22px; border-top: 2px solid var(--line); }
.hist-cab { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hist-cab h3 { margin: 0; font-size: 16px; font-weight: 900; color: var(--navy); }
.hist-conta {
  font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
  background: #eceef4; color: var(--muted); border-radius: 99px; padding: 3px 10px;
}
.hist-sub { margin: 6px 0 18px; font-size: 12.8px; line-height: 1.6; color: var(--ink-soft); max-width: 78ch; }

.hist-linha { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; }
.hist-linha::before {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--line);
}
.hist-item { position: relative; padding: 0 0 18px 12px; }
.hist-item:last-child { padding-bottom: 0; }
.hist-ponto {
  position: absolute; left: -22px; top: 4px; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 3px solid #b9bed0;
}
.hist-item.is-verde .hist-ponto { border-color: var(--success); }
.hist-item.is-azul  .hist-ponto { border-color: var(--info); }
.hist-item.is-ambar .hist-ponto { border-color: var(--warn); }
.hist-item.is-cinza .hist-ponto { border-color: #b9bed0; }

.hist-topo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hist-topo strong { font-size: 13.8px; font-weight: 800; color: var(--ink); }
.hist-tag {
  font-size: 10px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
  background: #eceef4; color: var(--muted); border-radius: 4px; padding: 2px 7px;
}
.hist-item.is-verde .hist-tag { background: var(--success-bg); color: var(--success); }
.hist-item.is-azul  .hist-tag { background: var(--info-bg);    color: var(--info); }
.hist-item.is-ambar .hist-tag { background: var(--warn-bg);    color: var(--warn); }
.hist-detalhe { list-style: none; margin: 7px 0 0; padding: 0; display: grid; gap: 3px; }
.hist-detalhe li {
  font-size: 12.6px; line-height: 1.5; color: var(--ink-soft);
  padding-left: 12px; position: relative;
}
.hist-detalhe li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px;
  border-radius: 50%; background: #c3c8d8;
}
.hist-quem { display: block; margin-top: 7px; font-size: 11.5px; color: var(--muted); }

/* ================================================================
   CONTRATOS -- a tela HISTORICO (os quatro modulos juntos)
   Reaproveita a linha do tempo acima; aqui entram so as pecas que
   a tela cheia pede: o cabecalho do dia, o cartao por modulo, a
   barra de filtros e a paginacao.
   ================================================================ */
/* ================================================================
   WHATSAPP > ATENDIMENTO -- caixa de entrada em duas colunas
   ================================================================
   A conversa deixou de ser uma gaveta por cima da tela e passou a ficar
   AO LADO da lista: o atendente ve com quem esta falando e a fila que
   ainda espera, ao mesmo tempo. No celular nao cabe -- ali a mesma caixa
   volta a ser gaveta, com o mesmo HTML e o mesmo JS.
   ================================================================ */
.atend-split { display: block; }
.atend-coluna-lista { min-width: 0; }

@media (min-width: 1000px) {
  .atend-split {
    display: grid;
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }
  .atend-coluna-lista {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 4px;
  }
  /* A gaveta vira coluna: sai do "position:fixed" e entra no grid. */
  .atend-split .chat-overlay {
    display: flex; position: static; inset: auto;
    background: none; z-index: auto;
  }
  .atend-split .chat-drawer-box {
    width: 100%; max-width: none;
    /* Mais alta que antes, e com piso: a conversa e o miolo da tela, nao
       pode sobrar so uma faixa de duas linhas entre os controles e o
       campo de escrever. */
    height: calc(100vh - 190px); min-height: 660px;
    border-radius: var(--radius); border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-sm);
    /* Sem isto, abrir "Dados de atendimento" empurrava o conteudo para
       FORA do cartao -- era o que quebrava o layout por cima do rodape. */
    overflow: hidden;
  }
  .atend-coluna-lista { max-height: calc(100vh - 190px); }
  /* No computador nao existe "fechar" -- a conversa mora ali. */
  .atend-split .chat-drawer-head .modal-close { display: none; }
}

/* O card aberto no computador -- sem isso nao da para saber onde se esta. */
.atend-card.is-aberta {
  border-color: var(--navy); border-width: 2px;
  box-shadow: var(--shadow-md); background: #fbfbfd;
}

/* Selo de temperatura, na lista e no topo da conversa. */
.temp-selo, .sent-selo {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase;
  border-radius: 99px; padding: 2px 8px; border: 1.5px solid transparent; white-space: nowrap;
}
.temp-selo.is-quente { background: #fdecea; color: #a13636; border-color: #e6b3ad; }
.temp-selo.is-morno  { background: var(--warn-bg); color: var(--warn); border-color: #e3c887; }
.temp-selo.is-frio   { background: #eaf1f8; color: #33608c; border-color: #b7cee2; }
.sent-selo.is-negativo { background: var(--danger-bg); color: var(--danger); border-color: #e8b4b4; }
.sent-selo.is-positivo { background: var(--success-bg); color: var(--success); border-color: #a9d8bb; }
.sent-selo.is-neutro   { background: #eceef4; color: var(--muted); border-color: var(--line-soft); }

/* ================================================================
   ATENDIMENTO -- botoes de situacao, emoji e a janela de anexo
   ================================================================ */

/* Situacao: tres botoes no lugar da lista. Sao poucas opcoes e usadas o
   tempo todo -- numa lista sao dois cliques, e a atual so aparece depois
   de abrir. */
.chat-status-botoes { display: flex; gap: 6px; flex-wrap: wrap; }
.chat-status-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 99px; cursor: pointer;
  border: 1.5px solid var(--line-soft); background: #fff;
  font-family: inherit; font-size: 12.5px; font-weight: 800; color: var(--ink-soft);
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.chat-status-btn:hover { background: var(--surface); }
.chat-status-ponto { width: 8px; height: 8px; border-radius: 50%; background: #c3c8d8; }
.chat-status-btn.is-espera .chat-status-ponto      { background: var(--warn); }
.chat-status-btn.is-atendimento .chat-status-ponto { background: var(--info); }
.chat-status-btn.is-fechada .chat-status-ponto     { background: var(--success); }
/* A situacao atual fica acesa -- e o unico jeito de saber onde se esta
   sem abrir nada. */
.chat-status-btn.is-ativo { border-width: 2px; color: var(--ink); }
.chat-status-btn.is-espera.is-ativo      { border-color: var(--warn);    background: var(--warn-bg); color: var(--warn); }
.chat-status-btn.is-atendimento.is-ativo { border-color: var(--info);    background: var(--info-bg); color: var(--info); }
.chat-status-btn.is-fechada.is-ativo     { border-color: var(--success); background: var(--success-bg); color: var(--success); }
.chat-status-btn[disabled] { opacity: .55; cursor: default; }

/* Barra de icones do campo de mensagem. */
.chat-drawer-form { position: relative; flex-wrap: wrap; align-items: flex-end; }
.chat-form-acoes { display: flex; gap: 4px; align-items: center; }
.chat-icone-btn {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; cursor: pointer; border: 1.5px solid var(--line-soft);
  background: #fff; color: var(--ink-soft); transition: background .12s ease, color .12s ease;
}
.chat-icone-btn:hover { background: var(--surface); color: var(--navy); }
.chat-icone-btn.is-aberto { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Painel de emoji -- sobe por cima do campo, nao empurra a conversa. */
.chat-emoji-painel {
  position: absolute; bottom: calc(100% + 8px); left: 12px; z-index: 30;
  width: min(340px, calc(100% - 24px)); max-height: 260px; overflow-y: auto;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 12px;
}
.chat-emoji-grupo + .chat-emoji-grupo { margin-top: 10px; }
.chat-emoji-titulo {
  display: block; font-size: 10.5px; font-weight: 900; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
}
.chat-emoji-lista { display: flex; flex-wrap: wrap; gap: 2px; }
.chat-emoji {
  width: 34px; height: 34px; font-size: 19px; line-height: 1; cursor: pointer;
  border: none; background: none; border-radius: 8px; padding: 0;
}
.chat-emoji:hover { background: var(--surface-2, #f1f2f7); }

/* Midia recebida dentro da bolha da conversa. */
.chat-bubble img.chat-midia { max-width: 260px; border-radius: 10px; display: block; margin-bottom: 6px; }
.chat-bubble video.chat-midia { max-width: 280px; border-radius: 10px; display: block; margin-bottom: 6px; }
.chat-bubble audio.chat-midia { width: 260px; display: block; margin-bottom: 6px; }
.chat-midia-arquivo {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px;
  border-radius: 10px; background: rgba(0,0,0,.06); text-decoration: none;
  color: inherit; font-weight: 700; font-size: 12.6px; margin-bottom: 6px;
}

/* O botao que leva o arquivo recebido direto para a ficha de alguem.
   Fica DENTRO da bolha, embaixo do arquivo, em linha propria: e uma
   acao secundaria, nao pode competir com o proprio arquivo. */
.chat-bubble-anexar {
  display: flex; width: fit-content; align-items: center; gap: 6px;
  margin: 8px 0 2px; padding: 6px 11px;
  border: 1px solid var(--brand-borda); border-radius: 999px;
  background: var(--brand-suave); color: var(--brand-forte);
  font-size: 12px; font-weight: 800; font-family: inherit;
  cursor: pointer; line-height: 1.2;
  transition: background .14s ease, border-color .14s ease;
}
.chat-bubble-anexar .icon { width: 13px; height: 13px; vertical-align: 0; }
.chat-bubble-anexar:hover { background: #e4ebf6; border-color: #adc2de; }
.chat-bubble-anexar + .chat-bubble-hora { display: block; }

/* ==================================================================
   VISUALIZADOR DE IMAGEM COM RECORTE

   Fundo bem escuro de proposito: e o unico jeito de a foto de um
   documento aparecer como ela e, sem a tela branca por tras
   "lavando" o contraste.
   ================================================================== */
.visor-overlay.open { align-items: stretch; }
.visor-box {
  display: flex; flex-direction: column;
  width: min(1100px, 96vw); height: min(92vh, 900px);
  margin: auto; background: var(--surface);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg);
}
.visor-head {
  flex: none; display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line-soft);
}
.visor-head h3 { margin: 0; font-size: 15.5px; font-weight: 800; }

.visor-palco {
  flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center;
  background: #10151f; padding: 14px; overflow: hidden;
}
/* O quadro tem exatamente o tamanho da imagem desenhada: e o que faz a
   selecao poder ser posicionada em porcentagem sem contas de sobra. */
.visor-quadro {
  position: relative; line-height: 0; max-width: 100%; max-height: 100%;
  /* touch-action:none e o que permite arrastar a selecao no celular sem
     a pagina rolar junto. */
  touch-action: none;
}
.visor-quadro img {
  display: block; max-width: 100%; max-height: 100%;
  width: auto; height: auto; user-select: none; -webkit-user-drag: none;
  cursor: crosshair;
}

.visor-selecao {
  position: absolute; box-sizing: border-box;
  border: 1.5px solid #fff; cursor: move;
  /* A sombra gigante escurece TUDO o que esta fora do retangulo -- e o
     truque que dispensa quatro divs de mascara. */
  box-shadow: 0 0 0 9999px rgba(8, 12, 20, .62);
}
.visor-alca {
  position: absolute; width: 14px; height: 14px; border-radius: 3px;
  background: #fff; border: 1.5px solid var(--brand-forte);
}
.visor-alca[data-canto="nw"] { top: -8px; left: -8px; cursor: nwse-resize; }
.visor-alca[data-canto="ne"] { top: -8px; right: -8px; cursor: nesw-resize; }
.visor-alca[data-canto="sw"] { bottom: -8px; left: -8px; cursor: nesw-resize; }
.visor-alca[data-canto="se"] { bottom: -8px; right: -8px; cursor: nwse-resize; }
.visor-medida {
  position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%);
  pointer-events: none;
  background: rgba(8, 12, 20, .82); color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap; line-height: 1.5;
}

/* Selecao colada no pe da imagem: a medida sobe para dentro, senao
   ficaria escondida atras da barra de acoes. */
.visor-selecao.is-medida-acima .visor-medida { bottom: auto; top: 6px; }

.visor-acoes {
  flex: none; display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 12px 18px; border-top: 1px solid var(--line-soft); background: var(--surface);
}
.visor-espaco { flex: 1; }
.visor-info { font-size: 12.5px; font-weight: 700; color: var(--muted); }

@media (max-width: 720px) {
  .visor-box { width: 100vw; height: 100vh; border-radius: 0; }
  .visor-acoes { padding: 10px 12px; }
  .visor-info { width: 100%; }
}

/* A regra de "encerrar sozinho" na tela do Chat-bot. */
.chatbot-ociosidade {
  margin: 0 0 14px; padding: 12px 14px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.chatbot-ociosidade summary {
  cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.chatbot-ocio-chip {
  font-size: 11.5px; font-weight: 800; padding: 2px 9px; border-radius: 999px;
  background: var(--brand-suave); color: var(--brand-forte); border: 1px solid var(--brand-borda);
}
.chatbot-ocio-chip.is-off { background: var(--surface); color: var(--muted); border-color: var(--line); }
.chatbot-ocio-form { margin-top: 14px; max-width: 620px; }
.chatbot-ocio-form textarea {
  width: 100%; padding: 9px 11px; font-family: inherit; font-size: 13px; line-height: 1.5;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); resize: vertical;
}

/* A janela de anexar na ficha. */
.modal-box-largo { max-width: 620px; }
.anexo-passo-cab {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: 13.5px; font-weight: 900; color: var(--navy);
}
.anexo-passo-cab .btn { margin-left: auto; }
.anexo-passo-n {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: var(--navy); color: #fff; display: inline-flex;
  align-items: center; justify-content: center; font-size: 12px; font-weight: 900;
}
.anexo-lista { margin-top: 10px; max-height: 300px; overflow-y: auto; display: grid; gap: 6px; }
.anexo-item-pessoa {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  width: 100%; text-align: left; cursor: pointer; padding: 10px 12px;
  border: 1.5px solid var(--line-soft); border-radius: var(--radius-sm);
  background: #fff; font-family: inherit;
}
.anexo-item-pessoa:hover { border-color: var(--navy); background: var(--surface); }
.anexo-item-nome { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.anexo-item-sub  { font-size: 11.8px; color: var(--muted); margin-top: 2px; }
.anexo-item-falta {
  font-size: 10.5px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 99px; padding: 3px 9px; white-space: nowrap;
  background: var(--warn-bg); color: var(--warn);
}
.anexo-item-falta.is-ok { background: var(--success-bg); color: var(--success); }

.anexo-escolhida {
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line-soft); margin-bottom: 12px;
}
.anexo-itens { display: grid; gap: 6px; max-height: 240px; overflow-y: auto; }
.anexo-item-check {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 9px; align-items: start;
  padding: 9px 11px; border: 1.5px solid var(--line-soft); border-radius: var(--radius-sm);
  cursor: pointer; background: #fff; font-size: 13px; line-height: 1.45;
}
.anexo-item-check:hover { background: var(--surface); }
.anexo-item-check.is-marcado { border-color: var(--navy); border-width: 2px; background: var(--surface); }
.anexo-item-check .anexo-tag {
  font-size: 10px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 99px; padding: 2px 8px; white-space: nowrap;
}
.anexo-tag.is-falta { background: var(--warn-bg); color: var(--warn); }
.anexo-tag.is-tem   { background: var(--success-bg); color: var(--success); }

/* Recado de "o arquivo ja chegou pelo WhatsApp" dentro da janela de anexo. */
.anexo-recebido {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 14px; padding: 10px 12px;
  border: 1px solid var(--info-borda, rgba(37, 99, 235, .25));
  background: var(--info-bg, rgba(37, 99, 235, .08));
  color: var(--info, #1d4ed8);
  border-radius: var(--radius-sm); font-size: 12.8px; line-height: 1.45;
}
.anexo-recebido .icon { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; }

.anexo-aviso { margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 12.8px; }
.anexo-aviso.is-erro { background: var(--danger-bg); color: var(--danger); }
.anexo-aviso.is-ok   { background: var(--success-bg); color: var(--success); }
.modal-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ================================================================
   ATENDIMENTO -- o quadro de temperatura (rosca + legenda)
   ================================================================
   As tres cores passaram no validador de daltonismo sobre este fundo:
   adjacentes com dE 14.9 no deutan e 18.7 na visao normal. Ainda assim
   o numero vem sempre escrito ao lado do rotulo -- cor e reforco, nunca
   a unica informacao.
   ================================================================ */
.atend-leitura-row {
  display: grid; gap: 16px; margin: 18px 0 4px;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
.atend-card-viz {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.atend-card-viz-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.atend-card-viz-topo h3 { margin: 0; font-size: 15px; font-weight: 900; color: var(--navy); }
.atend-card-viz-topo p { margin: 3px 0 0; font-size: 12.4px; color: var(--muted); }

.atend-rosca-wrap { display: flex; align-items: center; gap: 22px; margin-top: 14px; flex-wrap: wrap; }
.atend-rosca { position: relative; width: 160px; height: 160px; flex: none; }
.atend-rosca svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.atend-rosca circle { fill: none; stroke-width: 20; }
.atend-rosca-trilho { stroke: #eceef4; }
.atend-rosca-arco {
  stroke-linecap: butt;
  /* Entra desenhando: 700ms uma vez, sem repetir -- animacao que fica
     piscando atrapalha quem esta lendo a fila. */
  animation: atend-rosca-entra .7s ease-out both;
}
.atend-rosca-arco.is-quente { stroke: #a13636; }
.atend-rosca-arco.is-morno  { stroke: #b07f1e; }
.atend-rosca-arco.is-frio   { stroke: #2E6191; }
@keyframes atend-rosca-entra { from { stroke-dasharray: 0 999; } }
@media (prefers-reduced-motion: reduce) { .atend-rosca-arco { animation: none; } }

.atend-rosca-centro {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 2px;
}
.atend-rosca-centro strong { font-size: 30px; font-weight: 900; color: var(--navy); line-height: 1; font-variant-numeric: tabular-nums; }
.atend-rosca-centro span { font-size: 10.5px; line-height: 1.3; color: var(--muted); }

.atend-legenda { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 210px; display: grid; gap: 6px; }
.atend-legenda-item {
  display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm); text-decoration: none;
  border: 1.5px solid transparent; transition: background .12s ease, border-color .12s ease;
}
.atend-legenda-item:hover { background: var(--surface); }
.atend-legenda-bolinha { width: 10px; height: 10px; border-radius: 50%; }
.atend-legenda-item.is-quente .atend-legenda-bolinha { background: #a13636; }
.atend-legenda-item.is-morno  .atend-legenda-bolinha { background: #b07f1e; }
.atend-legenda-item.is-frio   .atend-legenda-bolinha { background: #1f6fae; }
.atend-legenda-item.is-quente.is-ativo { border-color: #a13636; background: #fdecea; }
.atend-legenda-item.is-morno.is-ativo  { border-color: #b07f1e; background: var(--warn-bg); }
.atend-legenda-item.is-frio.is-ativo   { border-color: #2E6191; background: #eef3f8; }
.atend-legenda-rotulo { font-size: 13px; font-weight: 700; color: var(--ink); }
.atend-legenda-n { font-size: 17px; font-weight: 900; color: var(--navy); font-variant-numeric: tabular-nums; }
.atend-legenda-pct { font-size: 11.5px; color: var(--muted); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }

.atend-viz-alerta {
  margin: 14px 0 0; padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--danger-bg); color: var(--danger); font-size: 12.4px; line-height: 1.5;
}
.atend-viz-alerta strong { font-weight: 900; }

.atend-dica-lista { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.atend-dica-lista li {
  display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start;
  font-size: 12.6px; line-height: 1.55; color: var(--ink-soft);
  padding-left: 10px; border-left: 3px solid var(--line-soft);
}
.atend-dica-lista li.is-quente { border-left-color: #a13636; }
.atend-dica-lista li.is-morno  { border-left-color: #b07f1e; }
.atend-dica-lista li.is-frio   { border-left-color: #1f6fae; }
.atend-dica-lista li.is-nota   { border-left-color: var(--navy); }
.atend-dica-emoji { font-size: 15px; line-height: 1.3; }

@media (max-width: 900px) {
  .atend-leitura-row { grid-template-columns: 1fr; }
}

/* A leitura da conversa, no topo do chat. */
.chat-leitura { flex: 0 0 auto; padding: 10px 18px; border-bottom: 1px solid var(--line-soft); background: #fbfbfd; }
.chat-leitura-selos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chat-leitura-origem { font-size: 11px; color: var(--muted); }
.chat-leitura-por > summary { cursor: pointer; margin-top: 6px; font-size: 11.5px; font-weight: 800; color: var(--info); }
.chat-leitura-por ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; }
.chat-leitura-por li {
  position: relative; padding-left: 12px; font-size: 12.2px; line-height: 1.5; color: var(--ink-soft);
}
.chat-leitura-por li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px;
  border-radius: 50%; background: #c3c8d8;
}
.chat-leitura-ajuste { margin-top: 10px; display: grid; gap: 5px; }
.chat-leitura-ajuste label { font-size: 11.5px; font-weight: 800; color: var(--ink); }

/* WhatsApp -- o corpo cru da chamada do webhook, no diagnostico. */
.wh-payload > summary { cursor: pointer; font-size: 12px; font-weight: 800; color: var(--info); margin-top: 4px; }
.wh-payload pre {
  margin: 6px 0 0; padding: 10px 12px; max-height: 240px; overflow: auto;
  background: #0f1626; color: #e6e9f2; border-radius: var(--radius-sm);
  font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-all;
}

/* O atalho no cabecalho do historico da ficha. */
.hist-cab-link { font-size: 12.4px; font-weight: 800; color: var(--info); text-decoration: none; }
.hist-cab-link:hover { text-decoration: underline; }

.hist-item.is-vinho .hist-ponto { border-color: var(--wine); }
.hist-item.is-vinho .hist-tag   { background: var(--danger-bg); color: var(--wine); }

/* Cabecalho de cada dia: gruda no topo enquanto aquele dia rola. */
.hist-dia {
  position: sticky; top: 0; z-index: 2;
  margin: 22px 0 12px; padding: 6px 0;
  font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  color: var(--navy); background: var(--surface);
  border-bottom: 2px solid var(--line);
}
.hist-dia:first-of-type { margin-top: 6px; }

/* Etiqueta do modulo, ao lado do tipo de movimento. */
.hist-mod {
  font-size: 10px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
  border-radius: 4px; padding: 2px 7px; border: 1.5px solid var(--line-soft); color: var(--ink-soft);
}
.hist-mod.is-vinho { border-color: var(--wine);    color: var(--wine); }
.hist-mod.is-azul  { border-color: var(--info);    color: var(--info); }
.hist-mod.is-verde { border-color: var(--success); color: var(--success); }
.hist-mod.is-ambar { border-color: var(--warn);    color: var(--warn); }

.hist-ficha { margin-top: 4px; font-size: 13px; color: var(--ink-soft); }
.hist-ficha a { font-weight: 800; color: var(--navy); }
.hist-ficha em { color: var(--muted); }

.hist-mais > summary {
  cursor: pointer; margin-top: 7px; font-size: 12.4px; font-weight: 800; color: var(--info);
}
.hist-mais[open] > summary { margin-bottom: 2px; }

/* Cartoes de contagem por modulo -- o numero sempre escrito. */
.hist-resumo { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.hist-resumo-item {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 14px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line-soft); background: #fff;
  text-decoration: none; transition: border-color .12s ease, background .12s ease;
}
.hist-resumo-item:hover { background: var(--surface-2, #f1f2f7); }
.hist-resumo-item.is-ativo { border-width: 2px; background: var(--surface-2, #f1f2f7); }
.hist-resumo-n { font-size: 19px; font-weight: 900; color: var(--navy); font-variant-numeric: tabular-nums; }
.hist-resumo-r { font-size: 12.6px; font-weight: 700; color: var(--ink-soft); }
.hist-resumo-item.is-vinho { border-left: 5px solid var(--wine); }
.hist-resumo-item.is-azul  { border-left: 5px solid var(--info); }
.hist-resumo-item.is-verde { border-left: 5px solid var(--success); }
.hist-resumo-item.is-ambar { border-left: 5px solid var(--warn); }

/* Barra de filtros: a busca ocupa o dobro, o resto se acomoda. */
.hist-filtros {
  display: grid; gap: 12px 14px; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.hist-filtros .form-field { margin: 0; }
.hist-filtros .form-field:first-child { grid-column: span 2; }
.hist-filtros-acoes { display: flex; gap: 8px; align-items: center; }

.hist-atalhos {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft);
  font-size: 12.6px; color: var(--muted);
}
.hist-atalhos .chip { text-decoration: none; color: var(--ink-soft); font-weight: 700; }
.hist-atalhos .chip.is-ativo { border-color: var(--navy); color: var(--navy); font-weight: 900; }

.hist-paginas {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-soft);
  font-size: 12.8px; color: var(--muted);
}

@media (max-width: 860px) {
  /* No celular a faixa preta do topo e fixa (58px): o cabecalho do dia
     precisa parar logo abaixo dela, senao fica escondido atras. */
  .hist-dia { top: 58px; }
}

@media (max-width: 720px) {
  .hist-filtros .form-field:first-child { grid-column: span 1; }
  .hist-resumo-item { flex: 1 1 45%; }
}

@media (max-width: 760px) {
  .cst-opcoes { grid-template-columns: 1fr; }
}

/* ================================================================
   CONTRATOS -- Arquivos: nome abre o arquivo, caixinha so seleciona
   ================================================================ */
/* A caixinha ganha area propria de clique, separada do nome. Antes a
   linha inteira era um <label> e clicar no nome so marcava a caixa --
   ninguem conseguia abrir o documento. */
.arq-marcar {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 8px; cursor: pointer; transition: background .13s ease;
}
.arq-marcar:hover { background: #eceef4; }
.arq-marcar input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--wine); }

a.arq-item { text-decoration: none; border-radius: 8px; padding: 2px 4px; }
a.arq-item:hover .arq-nome b { color: var(--wine); text-decoration: underline; }
a.arq-item:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.arq-abrir {
  flex: none; margin-left: auto; font-size: 10.5px; font-weight: 900;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  opacity: 0; transition: opacity .13s ease;
}
.arq-lista li:hover .arq-abrir { opacity: 1; color: var(--wine); }
.arq-nome { flex: 1; }

/* A tabela de colaboradores tem 9 colunas: com o selo de situacao ela
   passava alguns pixels da area visivel e escondia o ultimo icone de
   acao. Aperta so o necessario -- e a coluna de acoes fica fixa a
   direita, para nunca sumir com a rolagem lateral. */
body.tab-contratos #lista-colaboradores table th,
body.tab-contratos #lista-colaboradores table td { padding-left: 8px; padding-right: 8px; }
body.tab-contratos #lista-colaboradores .acoes-icones { gap: 4px; }
body.tab-contratos #lista-colaboradores .cst-selo { white-space: normal; text-align: left; }
body.tab-contratos #lista-colaboradores table th:last-child,
body.tab-contratos #lista-colaboradores table td:last-child {
  position: sticky; right: 0; background: #fff; box-shadow: -6px 0 8px -6px rgba(16,26,51,.18);
}
body.tab-contratos #lista-colaboradores table th:last-child { background: var(--navy); }

/* ================================================================
   CONTRATOS -- Prestador de Servico: galeria dos 13 modelos
   ================================================================ */
.pcard-grid {
  display: grid; gap: 14px; margin-top: 18px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.pcard {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 15px 16px 13px; background: #fff;
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.pcard:hover {
  border-color: var(--wine); transform: translateY(-2px);
  box-shadow: 0 8px 20px -12px rgba(122,31,31,.5);
}
.pcard:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

.pcard-topo { display: flex; align-items: center; gap: 8px; }
.pcard-selo {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 7px; background: var(--wine); color: #fff;
  font-size: 12px; font-weight: 900; letter-spacing: .02em;
}
.pcard-qtd {
  margin-left: auto; font-size: 10.5px; font-weight: 900; letter-spacing: .04em;
  text-transform: uppercase; color: var(--success);
  background: var(--success-bg); border-radius: 99px; padding: 2px 9px;
}
.pcard-titulo { font-size: 14.5px; font-weight: 900; color: var(--navy); line-height: 1.3; }
.pcard-resumo {
  margin: 0; font-size: 12.3px; line-height: 1.5; color: var(--ink-soft); flex: 1;
}
.pcard-pe {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 4px; padding-top: 9px; border-top: 1px dashed var(--line);
  font-size: 11px; color: var(--muted);
}
.pcard-tag {
  font-weight: 900; letter-spacing: .03em; text-transform: uppercase;
  color: var(--warn); background: var(--warn-bg); border-radius: 4px; padding: 1px 7px;
}
.pcard-ir { margin-left: auto; font-weight: 900; color: var(--wine); }

/* ---------- Objeto do contrato escolhido ---------- */
.pobj {
  border: 1.5px solid var(--line); border-left: 5px solid var(--wine);
  border-radius: var(--radius-sm); background: var(--surface);
  padding: 13px 16px; margin: 4px 0 22px;
}
.pobj-cab { display: flex; align-items: center; gap: 12px; }
.pobj-cab > div { flex: 1; min-width: 0; }
.pobj-cab strong { display: block; font-size: 14px; font-weight: 900; color: var(--navy); }
.pobj-cab em {
  display: block; font-style: normal; font-size: 11.8px; color: var(--muted); margin-top: 2px;
}
.pobj-texto {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line);
  font-size: 12.4px; line-height: 1.62; color: var(--ink-soft); text-align: justify;
  max-height: 320px; overflow-y: auto;
}

/* ---------- Formulario do prestador ---------- */
.pform-secao {
  margin: 28px 0 4px; padding-bottom: 7px; border-bottom: 2px solid var(--line);
  font-size: 13px; font-weight: 900; letter-spacing: .04em;
  text-transform: uppercase; color: var(--navy);
}
.pform-secao:first-of-type { margin-top: 6px; }
.pform-ajuda {
  margin: 0 0 14px; font-size: 12.4px; line-height: 1.55; color: var(--ink-soft); max-width: 82ch;
}

/* Campos exigidos so por alguns modelos (hoje: veiculo, no motorista) */
.pextra {
  border: 1.5px dashed var(--warn); border-radius: var(--radius-sm);
  background: var(--warn-bg); padding: 14px 16px; margin: 6px 0 18px;
}
.pextra-cab { margin-bottom: 10px; }
.pextra-cab strong { display: block; font-size: 13.2px; font-weight: 900; color: var(--warn); }
.pextra-cab em {
  display: block; font-style: normal; font-size: 11.8px; line-height: 1.5;
  color: var(--ink-soft); margin-top: 2px;
}

@media (max-width: 760px) {
  .pcard-grid { grid-template-columns: 1fr; }
}
.pobj-campo {
  background: var(--warn-bg); color: var(--warn); border-radius: 4px;
  padding: 0 5px; font-weight: 800; font-style: normal;
}
.pobj-nota {
  margin: 10px 0 0; padding-top: 9px; border-top: 1px dashed var(--line);
  font-size: 11.6px; color: var(--muted); text-align: left;
}

/* ---------- Abas de Arquivos: colaboradores x prestadores ---------- */
.arq-abas { display: flex; gap: 6px; margin: 4px 0 14px; flex-wrap: wrap; }
.arq-aba {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  padding: 8px 15px; border-radius: 99px; border: 1.5px solid var(--line);
  background: var(--surface); color: var(--ink-soft);
  font-size: 13px; font-weight: 800;
  transition: border-color .13s ease, background .13s ease, color .13s ease;
}
.arq-aba:hover { border-color: #9aa2b8; color: var(--ink); }
.arq-aba span {
  font-size: 11px; font-weight: 900; background: #eceef4; color: var(--muted);
  border-radius: 99px; padding: 1px 8px;
}
.arq-aba.is-ativa { background: var(--navy); border-color: var(--navy); color: #fff; }
.arq-aba.is-ativa span { background: rgba(255,255,255,.18); color: #fff; }

/* Selo de pendência na pasta da pessoa */
.arq-pendente {
  flex: none; font-size: 10.5px; font-weight: 900; letter-spacing: .03em;
  text-transform: uppercase; color: var(--warn); background: var(--warn-bg);
  border-radius: 99px; padding: 2px 9px; white-space: nowrap;
}

/* Data e hora do envio, no link do anexo dentro do check list */
.wz-ck-anexo-link em {
  display: inline-block; font-style: normal; margin-left: 6px;
  font-size: 10.5px; font-weight: 700; color: var(--muted);
}

/* ================================================================
   ARQUIVOS -- anexar o documento assinado na propria pasta
   ================================================================ */
/* A linha do arquivo vira duas: o documento em cima, a tirinha do
   assinado embaixo. */
.arq-lista li.tem-assinado { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
.arq-linha { display: flex; align-items: center; gap: 12px; padding: 9px 12px; }

/* ---- Folha do check list em PDF ---- */
.cfg-folhas { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.arq-folha {
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:0 0 12px; font-size:12.5px;
}
.arq-folha a {
  display:inline-flex; align-items:center; gap:6px;
  font-weight:700; color:var(--wine); text-decoration:none;
  border-bottom:1px solid rgba(122,31,31,.3);
}
.arq-folha a:hover { border-bottom-color: var(--wine); }
.arq-folha .icon { width:15px; height:15px; }
.arq-folha span { color:var(--ink-soft, #5a6478); font-size:12px; }
.wz-link-folha {
  float:right; display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; color:var(--wine); text-decoration:none;
  border:1px solid rgba(122,31,31,.35); border-radius:99px; padding:4px 11px;
  background:var(--surface);
}
.wz-link-folha:hover { background:var(--wine); color:#fff; border-color:var(--wine); }
.wz-link-folha .icon { width:14px; height:14px; }

@media (max-width: 560px) {
  .wz-link-folha { float:none; margin-bottom:10px; }
  .cfg-folhas .btn { flex:1 1 auto; text-align:center; justify-content:center; }
}

/* ---- "Pedir por link" dentro do check list da ficha ---- */
.wz-link {
  border: 1px solid var(--line-soft); border-left: 3px solid var(--gold);
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 13px 15px; margin: 0 0 16px;
}
.wz-link-topo { display: flex; gap: 10px; align-items: flex-start; }
.wz-link-topo .icon { width: 18px; height: 18px; color: var(--gold); flex: 0 0 auto; margin-top: 2px; }
.wz-link-topo strong { display: block; font-size: 13.5px; color: var(--navy); }
.wz-link-topo em { display: block; font-style: normal; font-size: 12px; line-height: 1.5;
                   color: var(--ink-soft, #5a6478); margin-top: 2px; }
.wz-link-aviso { font-size: 12.5px; color: var(--ink-soft, #5a6478); margin: 10px 0 0; }
.wz-link-aviso.is-erro { color: var(--danger); font-weight: 600; }
.wz-link [data-link-vazio] { margin-top: 10px; }
.wz-link-pronto { margin-top: 10px; }
.wz-link-url {
  width: 100%; padding: 8px 10px; font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  border: 1px solid var(--line-soft); border-radius: 6px;
  background: var(--surface); color: var(--navy);
}
.wz-link-acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.wz-link-validade { display: inline-block; margin-top: 6px; font-size: 11.5px; color: var(--ink-soft, #5a6478); }

@media (max-width: 560px) {
  .wz-link-acoes .btn.small { flex: 1 1 auto; text-align: center; }
}

/* ---------------- Link de envio (pedir o documento por WhatsApp) ---------------- */
.arq-link {
  display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap;
  background:var(--surface-2); border:1px solid var(--line-soft);
  border-left:3px solid var(--gold);
  border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:14px;
}
.arq-link-texto { flex:1 1 300px; min-width:0; }
.arq-link-texto > strong { display:block; font-size:13px; color:var(--navy); }
.arq-link-texto > strong em { font-style:normal; font-weight:600; font-size:11.5px; color:var(--ink-soft, #5a6478); }
.arq-link-texto > span { display:block; font-size:12px; line-height:1.5; color:var(--ink-soft, #5a6478); margin-top:2px; }
.arq-link-url {
  width:100%; margin-top:8px; padding:7px 9px; font-size:12px;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  border:1px solid var(--line-soft); border-radius:6px; background:var(--surface); color:var(--navy);
}
.arq-link-acoes { display:flex; gap:6px; flex-wrap:wrap; align-items:flex-start; }
.arq-link .btn.small { white-space:nowrap; }

@media (max-width: 640px) {
  /* Em coluna, o flex-basis de 300px viraria ALTURA e abriria um buraco
     entre o texto e o botao -- por isso ele e zerado aqui. */
  .arq-link { flex-direction:column; gap:10px; }
  .arq-link-texto { flex:0 0 auto; width:100%; }
  .arq-link-acoes { width:100%; }
  .arq-link-acoes .btn.small, .arq-link .btn.small { flex:1 1 auto; text-align:center; }
}

.arq-assinado {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px 9px; border-top: 1px dashed var(--line);
  background: var(--surface); border-radius: 0 0 9px 9px;
}
.arq-assinado.is-ok { background: var(--success-bg); border-top-color: rgba(21,128,61,.22); }
.arq-assinado.is-enviando { opacity: .6; pointer-events: none; }

.arq-assinado-rot {
  font-size: 10.5px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
  color: var(--success);
}
.arq-assinado-rot.is-falta { color: var(--warn); }

.arq-assinado-link {
  font-size: 12.3px; font-weight: 700; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.18);
}
.arq-assinado-link:hover { color: var(--wine); border-bottom-color: var(--wine); }
.arq-assinado-link em {
  font-style: normal; font-weight: 700; color: var(--muted); font-size: 10.8px; margin-left: 5px;
}

/* O input de arquivo fica escondido atrás de um botão de verdade --
   o controle nativo do navegador não combina com o resto do painel. */
.arq-enviar { position: relative; overflow: hidden; display: inline-flex; margin-left: auto; }
.arq-enviar input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0;
}
.arq-enviar-bt {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px dashed var(--wine); color: var(--wine); background: #fff;
  border-radius: 99px; padding: 4px 13px;
  font-size: 11.5px; font-weight: 800; white-space: nowrap;
  transition: background .13s ease, color .13s ease;
}
.arq-enviar-bt::before { content: "+"; font-size: 14px; font-weight: 900; line-height: 1; }
.arq-enviar:hover .arq-enviar-bt { background: var(--wine); color: #fff; }
.arq-assinado.is-ok .arq-enviar-bt { border-color: #9aa2b8; color: var(--muted); }
.arq-assinado.is-ok .arq-enviar:hover .arq-enviar-bt { background: #6b7280; border-color: #6b7280; color: #fff; }

/* Atalho da câmera: mesmo botão, sem o "+" e sem empurrar os outros para
   a esquerda (só o primeiro da linha carrega o margin-left:auto). */
.arq-enviar.arq-foto { margin-left: 4px; }
.arq-enviar.arq-foto .arq-enviar-bt::before { content: none; }
.arq-enviar.arq-foto .arq-enviar-bt { border-style: solid; }
.arq-enviar.arq-foto svg { flex: 0 0 auto; }

.arq-enviar-manual { margin-left: 4px; }

/* Itens que ainda não têm nenhuma cópia */
.arq-lista-falta li { border-style: dashed; }
.arq-ic.falta {
  background: #eceef4; color: var(--muted); font-size: 15px; font-weight: 900;
}

/* ================================================================
   CONTRATOS > Locações
   ================================================================ */

/* Escolha "pessoa física × pessoa jurídica": mesmo desenho das opções
   de situação do CPF, mas em duas colunas e sem cor de semáforo -- não
   há certo nem errado aqui, é só o tipo de locador. */
.cst-opcoes.cst-2 { grid-template-columns: repeat(2, 1fr); }
.cst-op.is-neutra.is-marcada {
  border-color: var(--navy); background: #eef1f8; box-shadow: inset 0 0 0 1px var(--navy);
}
.cst-op.is-neutra.is-marcada .cst-bola { border-color: var(--navy); }
.cst-op.is-neutra.is-marcada .cst-bola::after { background: var(--navy); }
.cst-op.is-neutra.is-marcada .cst-txt strong { color: var(--navy); }

/* Subtítulo dentro de uma etapa ("Motorista indicado", "Onde recebe") */
.wz-sub {
  margin: 22px 0 10px; padding-top: 14px; border-top: 1px solid #e3e6ef;
  font-size: .82rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--navy);
}

@media (max-width: 760px) {
  .cst-opcoes.cst-2 { grid-template-columns: 1fr; }
}

/* A tabela de locações tem 9 colunas e passa da largura visível. Mesma
   solução da lista de colaboradores: aperta o espaçamento e prende a
   coluna de ações à direita, para o ícone de excluir nunca sumir na
   rolagem lateral. */
body.tab-contratos_locacao #lista-locacoes table th,
body.tab-contratos_locacao #lista-locacoes table td { padding-left: 8px; padding-right: 8px; }
body.tab-contratos_locacao #lista-locacoes .acoes-icones { gap: 4px; }
body.tab-contratos_locacao #lista-locacoes table th:last-child,
body.tab-contratos_locacao #lista-locacoes table td:last-child {
  position: sticky; right: 0; background: #fff; box-shadow: -6px 0 8px -6px rgba(16,26,51,.18);
}
body.tab-contratos_locacao #lista-locacoes table th:last-child { background: var(--navy); }

/* ================================================================
   CONTRATOS > Termos, Autorizações e Diversos
   ================================================================ */

/* Campo que ocupa a linha inteira (textarea de vistoria, endereço
   longo da autorização). */
.form-grid.form-grid-1 { grid-template-columns: 1fr; }
.form-field-larga textarea { min-height: 84px; }

/* ---- Grade de lançamentos (relatório de militância, combustível) ----
   Uma tabela editável: o cabeçalho e as linhas usam a MESMA definição
   de colunas, para nunca saírem desalinhados. */
.dlin {
  margin-top: 18px; border: 1px solid #e1e4ee; border-radius: 12px;
  background: #fff; overflow: hidden;
}
.dlin-cab, .dlin-linha {
  display: grid; gap: 6px; align-items: center;
  grid-template-columns: repeat(var(--dlin-colunas, 5), minmax(0, 1fr)) 34px;
}
.dlin-cab {
  padding: 9px 12px; background: var(--navy); color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.dlin-cab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlin-corpo { padding: 6px 12px 10px; }
.dlin-linha { padding: 4px 0; }
.dlin-linha input {
  width: 100%; padding: 7px 8px; font-size: .84rem;
  border: 1px solid #dfe3ee; border-radius: 8px; background: #fff;
}
.dlin-linha input:focus { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
.dlin-remover {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid #e6d5d5;
  background: #fff; color: var(--danger); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.dlin-remover:hover { background: var(--danger-bg); border-color: var(--danger); }
.dlin-pe {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border-top: 1px solid #eef0f6; background: var(--surface);
}
.dlin-total { margin-left: auto; font-weight: 800; color: var(--navy); font-size: .88rem; }

@media (max-width: 900px) {
  /* Em tela estreita a grade vira uma lista de campos empilhados --
     tabela de 7 colunas no celular é ilegível. */
  .dlin-cab { display: none; }
  .dlin-linha {
    grid-template-columns: 1fr; gap: 6px;
    padding: 10px 0; border-bottom: 1px dashed #e1e4ee;
  }
  .dlin-remover { justify-self: end; }
}

/* Listas dos três menus: mesma solução de largura das outras telas. */
body.tab-contratos_termos #lista-documentos table th,
body.tab-contratos_termos #lista-documentos table td,
body.tab-contratos_autorizacoes #lista-documentos table th,
body.tab-contratos_autorizacoes #lista-documentos table td,
body.tab-contratos_diversos #lista-documentos table th,
body.tab-contratos_diversos #lista-documentos table td { padding-left: 8px; padding-right: 8px; }
body.tab-contratos_termos #lista-documentos .acoes-icones,
body.tab-contratos_autorizacoes #lista-documentos .acoes-icones,
body.tab-contratos_diversos #lista-documentos .acoes-icones { gap: 4px; }
body.tab-contratos_termos #lista-documentos table th:last-child,
body.tab-contratos_termos #lista-documentos table td:last-child,
body.tab-contratos_autorizacoes #lista-documentos table th:last-child,
body.tab-contratos_autorizacoes #lista-documentos table td:last-child,
body.tab-contratos_diversos #lista-documentos table th:last-child,
body.tab-contratos_diversos #lista-documentos table td:last-child {
  position: sticky; right: 0; background: #fff; box-shadow: -6px 0 8px -6px rgba(16,26,51,.18);
}
body.tab-contratos_termos #lista-documentos table th:last-child,
body.tab-contratos_autorizacoes #lista-documentos table th:last-child,
body.tab-contratos_diversos #lista-documentos table th:last-child { background: var(--navy); }

/* ================================================================
   CONTRATOS > Dashboard -- blocos dos seis menus

   Regras que valem para tudo aqui:
   - marca fina, grade discreta, respiro generoso;
   - 2px de SUPERFÍCIE separando marcas que se tocam (nunca uma borda
     desenhada em volta);
   - texto nunca veste a cor da série -- a identidade vem da marca
     colorida ao lado, não da cor da letra.
   ================================================================ */

/* A figura de destaque usa algarismos proporcionais: `tabular-nums`
   dá a todo dígito a largura do zero e, em corpo grande, faz um
   número como 121 parecer frouxo. */
.ct-hero-num { font-variant-numeric: normal; }

/* Cartão que virou link: mantém o desenho, ganha o cursor. */
a.ct-kpi { text-decoration:none; color:inherit; }
a.ct-kpi:hover .ct-kpi-rot { color: var(--wine); }

/* ---------- As quatro medidas de dinheiro ---------- */
.ct-medidas {
  /* Quatro colunas fixas: com auto-fit as quatro medidas ficavam
     espremidas à esquerda e sobrava um vão cinza à direita. */
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:2px;
  background: var(--line); border:1.5px solid var(--line); border-radius: var(--radius);
  overflow:hidden; box-shadow: var(--shadow-sm);
}
/* align-content:start -- sem isto, as linhas do grid esticam para
   preencher o cartão mais alto e os rótulos saem desalinhados entre
   um cartão e outro. */
.ct-medida { background: var(--surface); padding:16px 18px 14px; display:grid; gap:2px; align-content:start; }
.ct-medida-cor { width:22px; height:4px; border-radius:99px; margin-bottom:8px; }
.ct-medida-rot {
  font-size:11.2px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; color: var(--muted);
}
.ct-medida-val { font-size:21px; font-weight:900; color: var(--navy); letter-spacing:-.02em; }
.ct-medida-aj { font-size:11.6px; color: var(--muted); line-height:1.4; margin-top:2px; }
.ct-medidas-nota {
  grid-column: 1 / -1; margin:0; padding:12px 18px;
  background: var(--surface-2); border-top:1px solid var(--line);
  font-size:12.2px; color: var(--ink-soft); line-height:1.5;
}
.ct-medidas-nota strong { color: var(--wine); }

/* ---------- Barras: valor numérico à direita da legenda ---------- */
.ct-legenda-num {
  flex:none; font-size:13px; font-weight:900; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.ct-legenda-ic { flex:none; width:15px; height:15px; display:grid; place-items:center; }
.ct-legenda-ic svg { width:15px; height:15px; }
.ct-legenda-linha { display:flex; flex-wrap:wrap; gap:8px 20px; }
.ct-legenda-linha li { gap:7px; }
.ct-legenda-linha .ct-legenda-txt b { font-size:12.4px; }

a.ct-bar-link { text-decoration:none; }
a.ct-bar-link:hover .ct-bar-rot { color: var(--wine); }
.ct-bars-2col { grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); }

/* ---------- Colunas empilhadas por semana ---------- */
.ct-viz-larga { grid-column: 1 / -1; }
.ct-cols { position:relative; padding-left:34px; }

/* Grade: fios de 1px SÓLIDOS (nunca tracejados), um passo fora da
   superfície, atravessando o gráfico -- é assim que o olho compara a
   altura de duas colunas distantes. O número sai na canaleta da
   esquerda, fora da área das barras. */
.ct-cols-plot {
  position:relative; height:190px; display:flex; align-items:flex-end; gap:2%;
  border-left:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  padding:0 6px;
}
.ct-cols-grade {
  position:absolute; left:0; right:0; top: var(--p); height:0; z-index:0;
  border-top:1px solid var(--line-soft);
}
.ct-cols-grade i {
  position:absolute; right:100%; top:-7px;
  font-style:normal; font-size:10.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; padding-right:7px;
}
/* As colunas ficam acima da grade */
.ct-col { z-index:1; }
.ct-col {
  position:relative; flex:1 1 0; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  cursor:default; outline:none;
}
/* A área sensível ao mouse é a coluna inteira, não só a barrinha --
   alvo de 8px é impossível de acertar. */
.ct-col::before { content:""; position:absolute; inset:0; }
.ct-col-pilha {
  position:relative; width:100%; max-width:26px; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end; gap:2px;
}
@keyframes ct-col-sobe { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.ct-col-seg {
  display:block; width:100%; height: var(--h); min-height:3px; background: var(--c);
  transform-origin: bottom;
  animation: ct-col-sobe .7s cubic-bezier(.22,.7,.3,1) both;
  animation-delay: calc(.3s + var(--d, 0s));
}
/* Ponta arredondada só no topo da pilha; a base fica reta na linha zero */
.ct-col-pilha > .ct-col-seg:first-child { border-radius:4px 4px 0 0; }
.ct-col-topo {
  position:absolute; bottom:100%; margin-bottom:5px;
  font-size:11px; font-weight:900; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  animation: ct-fade .4s 1s both;
}
.ct-col-rot {
  position:absolute; top:calc(100% + 7px);
  font-size:10.5px; color: var(--muted); white-space:nowrap;
}
.ct-cols-plot { margin-bottom:26px; }
.ct-col:hover .ct-col-seg, .ct-col:focus-visible .ct-col-seg { filter: brightness(1.12); }
.ct-col:focus-visible { box-shadow: inset 0 0 0 2px var(--navy); border-radius:6px; }
.ct-cols-plot:hover .ct-col:not(:hover) .ct-col-seg { opacity:.5; }

/* Balão do mouse -- realce, nunca o único caminho para o número:
   o total já está impresso no topo da coluna e na tabela. */
.ct-col-dica {
  position:absolute; z-index:5; pointer-events:none;
  transform: translate(-50%, -100%);
  background: var(--navy-2, #0b1220); color:#fff;
  padding:8px 11px; border-radius:9px; font-size:11.8px; line-height:1.45;
  box-shadow: 0 8px 22px rgba(11,18,32,.28); white-space:nowrap;
}
.ct-col-dica b { display:block; font-size:12.6px; margin-bottom:2px; }
.ct-col-dica em { font-style:normal; opacity:.8; }

/* ---------- Medidores (uma razão contra um limite) ---------- */
.ct-medidores { display:grid; gap:13px; }
.ct-medidor {
  display:grid; grid-template-columns: 128px minmax(0,1fr) 44px;
  grid-template-areas: "rot track val" "rot sub sub";
  align-items:center; column-gap:12px; row-gap:3px;
}
.ct-medidor-rot { grid-area:rot; font-size:12.6px; font-weight:800; color: var(--ink-soft); }
/* A pista é um tom claro da MESMA matiz do preenchimento, para o
   estado ser legível na barra inteira. */
.ct-medidor-track {
  grid-area:track; height:12px; border-radius:99px; overflow:hidden;
  background: rgba(161,54,54,.13);
}
.ct-medidor-fill {
  height:100%; width: var(--w); min-width:3px; border-radius:99px;
  animation: ct-grow .9s cubic-bezier(.22,.7,.3,1) both; animation-delay:.45s;
}
.ct-medidor.is-bom     .ct-medidor-track { background: rgba(22,101,52,.14); }
.ct-medidor.is-bom     .ct-medidor-fill  { background: var(--success); }
.ct-medidor.is-atencao .ct-medidor-track { background: rgba(161,98,7,.16); }
.ct-medidor.is-atencao .ct-medidor-fill  { background: #B45309; }
.ct-medidor.is-grave   .ct-medidor-track { background: rgba(185,28,28,.13); }
.ct-medidor.is-grave   .ct-medidor-fill  { background: var(--danger); }
.ct-medidor-val {
  grid-area:val; text-align:right; font-size:15px; font-weight:900;
  color: var(--navy); font-variant-numeric: tabular-nums;
}
.ct-medidor-sub { grid-area:sub; font-size:11.4px; color: var(--muted); }

/* ---------- "Ver os números": a versão em texto de cada gráfico ----------
   Todo gráfico tem uma. É o que garante que ninguém precise enxergar
   cor para ler o painel. */
.ct-tabela { margin-top:18px; border-top:1px solid var(--line-soft); padding-top:12px; }
.ct-tabela summary {
  cursor:pointer; font-size:12px; font-weight:800; color: var(--muted);
  list-style:none; display:inline-flex; align-items:center; gap:6px;
}
.ct-tabela summary::-webkit-details-marker { display:none; }
.ct-tabela summary::before {
  content:""; width:0; height:0; border-left:5px solid currentColor;
  border-top:4px solid transparent; border-bottom:4px solid transparent;
  transition: transform .18s ease;
}
.ct-tabela[open] summary::before { transform: rotate(90deg); }
.ct-tabela summary:hover { color: var(--wine); }
.ct-tabela table { width:100%; border-collapse:collapse; margin-top:10px; }
.ct-tabela th, .ct-tabela td {
  text-align:left; padding:6px 8px; font-size:12.2px; border-bottom:1px solid var(--line-soft);
}
.ct-tabela th { font-size:10.8px; text-transform:uppercase; letter-spacing:.05em; color: var(--muted); font-weight:900; }
.ct-tabela td:not(:first-child) { text-align:right; font-variant-numeric: tabular-nums; }
.ct-tabela th:not(:first-child) { text-align:right; }
.ct-tabela .ct-tabela-total td { font-weight:900; color: var(--navy); border-bottom:none; }

@media (max-width: 1080px) {
  .ct-medidor { grid-template-columns: 104px minmax(0,1fr) 40px; }
}
@media (max-width: 900px) {
  .ct-medidas { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .ct-cols-plot { height:150px; }
  .ct-col-rot { font-size:9.5px; }
  .ct-medida-val { font-size:19px; }
}

/* Quem pediu menos movimento vê tudo parado -- e completo. */
@media (prefers-reduced-motion: reduce) {
  .ct-hero, .ct-kpi, .ct-viz, .ct-vazio, .ct-medidas,
  .ct-bar-fill, .ct-stack-seg, .ct-col-seg, .ct-medidor-fill,
  .ct-serie-linha, .ct-serie-area, .ct-serie-dot, .ct-col-topo,
  .ct-art-ring, .ct-art-doc, .ct-art-check, .ct-art-tick,
  .ct-vazio-doc, .ct-vazio-check {
    animation: none !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
  }
}

/* ================================================================
   CONTRATOS -- titulo de eleitor (situacao eleitoral)
   ================================================================
   O bloco fica na etapa 1, embaixo da situacao do CPF. O painel
   mostra TUDO o que a consulta devolveu -- por isso e uma grade de
   duas colunas que quebra sozinha no celular, e nao uma lista fixa.
   ================================================================ */
.tit-bloco { margin-top: 4px; }
.tit-painel { margin-top: 12px; }

.tit-caixa {
  border: 1.5px solid var(--line); border-left-width: 5px; border-radius: var(--radius-sm);
  padding: 14px 16px; background: var(--surface); font-size: 13.3px; color: var(--ink-soft);
}
.tit-caixa > strong { display: block; font-size: 14.5px; color: var(--navy); margin-bottom: 4px; }
.tit-caixa.ok   { border-left-color: var(--success); background: var(--success-bg); }
.tit-caixa.ok > strong   { color: var(--success); }
.tit-caixa.erro { border-left-color: var(--danger); background: var(--danger-bg); }
.tit-caixa.erro > strong { color: var(--danger); }
.tit-caixa.info { border-left-color: var(--info); background: var(--info-bg); }

.tit-dados {
  margin: 10px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 22px;
}
.tit-dados > div {
  display: flex; justify-content: space-between; gap: 12px;
  border-bottom: 1px dashed rgba(0,0,0,.12); padding: 4px 0;
}
.tit-dados dt { color: var(--muted); font-weight: 700; font-size: 12.6px; }
.tit-dados dd { margin: 0; font-weight: 800; color: var(--ink); text-align: right; font-size: 13px; word-break: break-word; }
.tit-txt { margin-top: 8px; font-size: 12.4px; color: var(--muted); }
.tit-erro { margin-top: 6px; font-weight: 700; color: var(--danger); }

/* Etiqueta "opcional" ao lado do rotulo do campo */
.wz-req.is-opt { background: var(--surface-2); color: var(--muted); }

/* Item de check list opcional: visivel e anexavel, fora da conta */
.wz-ck-tag.is-opt { background: rgba(201,147,47,.16); color: var(--gold-dark, #8a6416); }
.wz-ck-item.is-opcional { opacity: 1; }
.wz-ck-item.is-opcional .wz-ck-anexo { display: block; }

/* ---------------------------------------------------------------
   RG novo (CIN) -- a marcacao embaixo do campo de RG
   --------------------------------------------------------------- */
.rg-cin {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 9px;
  padding: 9px 11px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  background: var(--surface-2); cursor: pointer;
}
.rg-cin:hover { border-color: var(--navy); }
.rg-cin input { flex: none; margin-top: 3px; width: 16px; height: 16px; accent-color: var(--navy); }
.rg-cin strong { display: block; font-size: 13px; font-weight: 800; color: var(--ink); }
.rg-cin em { display: block; font-style: normal; font-size: 11.8px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
input.is-espelho { background: var(--surface-2); color: var(--ink-soft); font-weight: 700; }

/* Tabela de valores por funcao (Configuracao dos contratos) */
.cfg-valores { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 4px 0 18px; }
.cfg-valores .form-field { margin-bottom: 0; }

/* ---------------------------------------------------------------
   A conta do pagamento -- dias x diaria = total
   --------------------------------------------------------------- */
.pgto {
  border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface-2);
  padding: 15px 17px; margin: 6px 0 18px;
}
.pgto[data-vazio="1"] { opacity: .92; }
.pgto-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 13px; }
.pgto-cab strong { font-size: 14px; font-weight: 800; color: var(--ink); }
.pgto-cab span { font-size: 12px; color: var(--muted); }
.pgto-conta { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.pgto-parcela {
  flex: 1 1 150px; min-width: 0; background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.pgto-parcela > span { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
.pgto-parcela > b { display: block; font-size: 24px; font-weight: 900; color: var(--navy);
  line-height: 1.25; font-variant-numeric: tabular-nums; margin-top: 3px; }
.pgto-parcela > em { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.pgto-parcela input { font-size: 20px; font-weight: 900; padding: 4px 8px; height: auto; }
.pgto-parcela.is-total { background: var(--navy); border-color: var(--navy); }
.pgto-parcela.is-total > span,
.pgto-parcela.is-total > em { color: rgba(255,255,255,.72); }
.pgto-parcela.is-total > b { color: #fff; }
.pgto-sinal { align-self: center; font-size: 20px; font-weight: 900; color: var(--muted); padding: 0 2px; }
/* A caixa "incluir a conta no contrato" -- decisão que muda o texto
   assinado, então ela é grande, explicada e fica junto da conta. */
.pgto-incluir {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 14px;
  padding: 12px 14px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.55); border: 1.5px solid var(--line);
}
.pgto-incluir:hover { border-color: var(--gold); }
.pgto-incluir input { margin-top: 2px; width: 17px; height: 17px; flex: none; accent-color: var(--gold); }
.pgto-incluir strong { display: block; font-size: 13.4px; }
.pgto-incluir em { display: block; margin-top: 3px; font-size: 12.2px; font-style: normal; color: var(--muted); line-height: 1.5; }
.pgto-incluir:has(input:checked) { border-color: var(--gold); background: rgba(201,147,47,.10); }

.pgto-acao { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 13px;
  padding-top: 12px; border-top: 1px dashed var(--line); }
.pgto-acao span { flex: 1 1 220px; font-size: 12.6px; font-weight: 700; color: var(--warn); }
.wz-choice-valor { display: block; margin-top: 5px; font-size: 12.4px; font-weight: 800; color: var(--wine); }
@media (max-width: 640px) {
  .pgto-sinal { display: none; }
  .pgto-parcela { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------
   Excluir um documento anexado (Contratos > Arquivos)
   --------------------------------------------------------------- */
.arq-assinado-par { display: inline-flex; align-items: center; gap: 4px; }
.arq-excluir {
  display: inline-flex; align-items: center; gap: 4px; border: 1px solid transparent;
  background: none; cursor: pointer; padding: 2px 6px; border-radius: 6px;
  font-size: 11.5px; font-weight: 700; color: var(--muted); font-family: inherit;
}
.arq-excluir:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }

.arq-exclusao {
  flex: 1 1 100%; margin-top: 10px; padding: 14px 15px;
  border: 1px solid var(--danger); border-radius: var(--radius-sm); background: var(--surface);
}
.arq-exclusao > strong { display: block; font-size: 13.5px; color: var(--ink); }
.arq-exclusao > p { margin: 5px 0 12px; font-size: 12.2px; color: var(--muted); line-height: 1.5; }
.arq-exclusao-rot { display: block; font-size: 12px; font-weight: 800; color: var(--ink); margin-bottom: 7px; }
.arq-motivos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.arq-motivo-bt {
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft);
  border-radius: 999px; padding: 4px 11px; font-size: 11.8px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.arq-motivo-bt:hover { border-color: var(--navy); color: var(--navy); }
.arq-motivo-bt.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.arq-exclusao textarea { width: 100%; font-size: 13px; }
.arq-troca {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 11px; padding: 9px 11px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface-2); cursor: pointer;
}
.arq-troca input { flex: none; margin-top: 3px; width: 16px; height: 16px; accent-color: var(--navy); }
.arq-troca strong { display: block; font-size: 12.8px; color: var(--ink); }
.arq-troca em { display: block; font-style: normal; font-size: 11.6px; color: var(--muted); margin-top: 2px; }
.arq-troca-campo { margin-top: 9px; }
.arq-troca-campo input[type="file"] { font-size: 12.5px; }
.arq-exclusao-acoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 13px; }

/* ----------------------------------------------------------------
   REQUISITOS DA SENHA (tela de primeiro acesso)

   A lista acende conforme a pessoa digita. O cinza é o estado "ainda
   não", o verde é "atendido" -- e a marca de conferido só aparece
   quando o item passa, para o olho encontrar o que falta sem ler.
   ---------------------------------------------------------------- */
.senha-requisitos {
  list-style: none; margin: 4px 0 16px; padding: 12px 14px;
  border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line-soft);
  display: grid; gap: 7px;
}
.senha-requisitos li {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; color: var(--muted);
  transition: color .18s ease;
}
.senha-req-marca {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--line); color: transparent;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.senha-req-marca svg { width: 11px; height: 11px; }
.senha-requisitos li.ok { color: #0f7a45; font-weight: 700; }
.senha-requisitos li.ok .senha-req-marca {
  background: #17a05a; color: #fff; transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .senha-requisitos li, .senha-req-marca { transition: none; }
}

/* ================================================================
   DASHBOARD DE CONTRATOS -- os blocos novos (agosto/2026)

   1. Contratos por município e por tipo (barra empilhada)
   2. Assinaturas (anel) e documentos faltando (ilustração)

   Toda animação é de ENTRADA, uma vez só: painel que fica piscando
   numa sala com gente trabalhando cansa em dez minutos. Quem pediu
   menos movimento no sistema operacional não vê nenhuma (ver o
   prefers-reduced-motion no fim).
   ================================================================ */

/* ---------- 1. município × tipo ---------- */
.ct-tipos-legenda {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
}
.ct-tipos-legenda li { display: flex; align-items: center; gap: 7px; font-size: 12.4px; }
.ct-tipos-legenda b { font-weight: 700; color: var(--ink-soft); }
.ct-tipos-legenda em {
  font-style: normal; font-weight: 900; color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.ct-mt-lista { display: grid; gap: 9px; margin-top: 18px; }
.ct-mt-linha {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) 52px;
  align-items: center; column-gap: 12px;
  animation: ct-sobe .5s cubic-bezier(.22,.7,.3,1) both;
  animation-delay: var(--d, 0s);
}
.ct-mt-nome {
  font-size: 12.8px; font-weight: 800; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ct-mt-barra {
  display: flex; gap: 2px; height: 20px; border-radius: 6px;
  background: rgba(16,26,51,.05); overflow: hidden;
}
.ct-mt-seg {
  width: var(--w); background: var(--c); min-width: 4px;
  animation: ct-grow .8s cubic-bezier(.22,.7,.3,1) both;
  animation-delay: calc(.25s + var(--d, 0s));
  transition: filter .15s ease;
}
.ct-mt-barra:hover .ct-mt-seg { filter: saturate(.5) opacity(.65); }
.ct-mt-barra .ct-mt-seg:hover { filter: none; }
.ct-mt-total {
  text-align: right; font-size: 15px; font-weight: 900;
  color: var(--navy); font-variant-numeric: tabular-nums;
}
@keyframes ct-sobe { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- 2. assinaturas e documentos ---------- */
.ct-pend {
  display: grid; grid-template-columns: 230px minmax(0, 1fr) 300px;
  gap: 22px; align-items: start; margin-top: 18px;
}
.ct-pend-anel { margin: 0; text-align: center; }
.ct-pend-anel svg { width: 100%; max-width: 190px; height: auto; }
@keyframes ct-anel { from { stroke-dashoffset: var(--dash); } to { stroke-dashoffset: var(--falta); } }
.ct-anel-fill {
  stroke-dasharray: var(--dash);
  stroke-dashoffset: var(--falta);
  animation: ct-anel 1.1s cubic-bezier(.22,.7,.3,1) .25s both;
}
.ct-anel-num { font-size: 27px; font-weight: 900; fill: var(--navy); font-family: inherit; }
.ct-anel-rot { font-size: 10.5px; font-weight: 700; fill: var(--muted); font-family: inherit;
               letter-spacing: .08em; text-transform: uppercase; }
.ct-pend-anel figcaption { font-size: 12.4px; color: var(--muted); line-height: 1.5; margin-top: 6px; }
.ct-pend-anel figcaption b { color: var(--navy); font-weight: 900; }

.ct-pend-lista { display: grid; gap: 14px; }
.ct-pend-item { animation: ct-sobe .5s cubic-bezier(.22,.7,.3,1) both; animation-delay: var(--d, 0s); }
.ct-pend-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ct-pend-cab b { font-size: 13.2px; font-weight: 800; color: var(--ink); }
.ct-pend-cab span { font-size: 13px; font-weight: 900; color: var(--navy); font-variant-numeric: tabular-nums; }
.ct-pend-track {
  height: 10px; border-radius: 99px; background: rgba(16,26,51,.07);
  margin: 5px 0 4px; overflow: hidden;
}
.ct-pend-fill {
  display: block; height: 100%; width: var(--w); min-width: 3px; border-radius: 99px;
  background: linear-gradient(90deg, #166534, #17a05a);
  animation: ct-grow .85s cubic-bezier(.22,.7,.3,1) both;
  animation-delay: calc(.3s + var(--d, 0s));
}
.ct-pend-item em { font-style: normal; font-size: 11.8px; color: var(--muted); }

.ct-pend-docs {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-soft);
}
.ct-pend-art { width: 96px; height: auto; }
.ct-art-folha { animation: ct-flutua 5.5s ease-in-out infinite; transform-origin: center; }
.ct-art-folha-2 { animation-delay: .8s; }
@keyframes ct-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.ct-pend-num {
  margin: 0; font-size: 34px; font-weight: 900; line-height: 1;
  color: var(--wine); font-variant-numeric: tabular-nums;
}
.ct-pend-cap { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.ct-pend-cap b { color: var(--navy); font-weight: 800; }

@media (max-width: 1080px) {
  .ct-pend { grid-template-columns: 200px minmax(0, 1fr); }
  .ct-pend-docs { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .ct-pend { grid-template-columns: 1fr; }
  .ct-mt-linha { grid-template-columns: 110px minmax(0, 1fr) 42px; }
  .ct-tipos-legenda { gap: 4px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-mt-linha, .ct-mt-seg, .ct-pend-item, .ct-pend-fill, .ct-anel-fill, .ct-art-folha {
    animation: none !important;
  }
  .ct-anel-fill { stroke-dashoffset: var(--falta); }
}