/* ==========================================================================
   Gravity: o que o painel tem por cima do tema da casa.
   Softsul Software

   O desenho e as cores vêm inteiros do tema.css (o do Orbit, sem mudança),
   com o acento azul do Orbit (#3B44E6) nos dois temas: decisão de
   28/10/2026. Aqui ficam só as fontes servidas pelo próprio servidor e o que
   todo painel da casa tem e o tema do Orbit não traz (ficha em modal,
   combobox, avisos, enquadramento de imagem), trazido do EventCity.
   ========================================================================== */

/* Fontes servidas daqui mesmo: a CSP não carrega nada de fora. Open Sans é a
   da interface; IBM Plex Mono é a de dado da casa. Licença SIL OFL em
   assets/fontes/. */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(fontes/open-sans-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(fontes/open-sans-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 300 800; font-display: swap;
  src: url(fontes/open-sans-latin-wght-italic.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fontes/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fontes/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fontes/ibm-plex-mono-latin-600-normal.woff2) format("woff2"); }

:root{
  --ui:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --dado:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* Sair é botão (pede confirmação e vai por POST), com o mesmo vermelho do
   link de sair do Orbit. */
.suspenso > button.sair{color:var(--rubi)}
.suspenso > button.sair svg{color:var(--rubi)}
.suspenso > button.sair:hover{background:var(--rubi-sup); color:var(--rubi)}

/* ------------------------------------------------------------- marca
   A marca (logo, emblema animado, tela de entrada e páginas de erro) mora
   em assets/marca/marca.css. Aqui ficam só o sprite de ícones e o link da
   assinatura. */
.sprite{position:absolute; width:0; height:0; overflow:hidden}
.assinatura a{color:inherit; font-weight:600; text-decoration:none}
.assinatura a:hover{text-decoration:underline}

/* --- cadastro do autenticador: QR e código --- */
.cadastro-2fa{display:flex; flex-direction:column; gap:12px}
.cadastro-2fa .qr{align-self:center; width:200px; padding:10px; background:#fff; border-radius:var(--r); border:1px solid var(--traco)}
.cadastro-2fa .qr svg{display:block; width:100%; height:auto}
.passos-2fa{margin:0; padding-left:20px; color:var(--suave); font-size:13.5px; display:flex; flex-direction:column; gap:4px}

/* ------------------------------------------------- avatar de iniciais
   No Orbit a cor sai de um style com o matiz do nome; a CSP do painel não
   aceita style no elemento, então são doze matizes fixos. Saturação e
   brilho baixos, como lá, para nenhuma combinação berrar. */
.iniciais.matiz-0{background:hsl(0 62% 92%); color:hsl(0 58% 30%); border-color:hsl(0 40% 84%)}
.iniciais.matiz-1{background:hsl(30 62% 92%); color:hsl(30 58% 30%); border-color:hsl(30 40% 84%)}
.iniciais.matiz-2{background:hsl(60 62% 92%); color:hsl(60 58% 26%); border-color:hsl(60 40% 84%)}
.iniciais.matiz-3{background:hsl(90 62% 92%); color:hsl(90 58% 26%); border-color:hsl(90 40% 84%)}
.iniciais.matiz-4{background:hsl(120 62% 92%); color:hsl(120 58% 26%); border-color:hsl(120 40% 84%)}
.iniciais.matiz-5{background:hsl(150 62% 92%); color:hsl(150 58% 26%); border-color:hsl(150 40% 84%)}
.iniciais.matiz-6{background:hsl(180 62% 92%); color:hsl(180 58% 26%); border-color:hsl(180 40% 84%)}
.iniciais.matiz-7{background:hsl(210 62% 92%); color:hsl(210 58% 30%); border-color:hsl(210 40% 84%)}
.iniciais.matiz-8{background:hsl(240 62% 92%); color:hsl(240 58% 34%); border-color:hsl(240 40% 84%)}
.iniciais.matiz-9{background:hsl(270 62% 92%); color:hsl(270 58% 34%); border-color:hsl(270 40% 84%)}
.iniciais.matiz-10{background:hsl(300 62% 92%); color:hsl(300 58% 30%); border-color:hsl(300 40% 84%)}
.iniciais.matiz-11{background:hsl(330 62% 92%); color:hsl(330 58% 30%); border-color:hsl(330 40% 84%)}
[data-tema="escuro"] .iniciais[class*="matiz-"]{filter:brightness(.82) saturate(.9)}
/* A foto entra no lugar das iniciais, no mesmo círculo. */
img.avatar.com-foto, img.brasao.com-foto{object-fit:cover; border-radius:50%}
/* O logo da entidade vai inteiro, sem cortar no círculo: brasão e marca de
   prefeitura têm formato próprio. Fundo branco também no tema escuro,
   porque logo costuma vir feito para papel. */
img.avatar.com-logo, img.brasao.com-logo{object-fit:contain; border-radius:10px; background:#fff; padding:3px; border:1px solid var(--traco)}

/* O ponto colorido do seletor de entidade: no Orbit vem da cor da empresa,
   num style; aqui toda entidade usa o acento. */
.troca-empresa .ponto, .suspenso .ponto{background:var(--ciano)}
.marca-atencao.bom{background:var(--verde-sup); color:var(--verde)}

/* --- página de erro com sessão --- */
.vazio.erro-logado{padding:56px 20px}
.vazio.erro-logado .acoes{justify-content:center; margin-top:18px}
.vazio.erro-logado .ajuda{margin-top:16px}

/* ------------------------------------- aparelhos com digital (Meus dados)
   O nome sugerido pelo navegador erra, então ele é editável ali mesmo, e a
   linha diz se a chave é sincronizada na conta e de onde veio o último uso. */
.renomear-aparelho{display:flex; gap:8px; align-items:center}
.renomear-aparelho .entrada{flex:1; min-width:140px}

/* --- grade de permissões por pessoa --- */
.permissoes select{min-width:120px}
.permissoes select.excecao{border-color:var(--indigo); background:var(--indigo-sup)}

/* --- link de convite para copiar --- */
.copiavel{display:flex; gap:8px; align-items:center}
.copiavel .entrada{flex:1}
.copiavel > .botao{flex:none; width:auto}

/* --- escolha de entidade (tela própria, para o celular) --- */
.lista-escolha{display:grid; gap:10px; max-width:560px}
.escolha{display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px; text-align:left;
  background:var(--branco); border:1px solid var(--traco); border-radius:var(--r); color:var(--tinta); font:inherit; cursor:pointer}
.escolha:hover{border-color:var(--traco2)}
.escolha.atual{border-color:var(--acento-borda); background:var(--indigo-sup)}
.escolha b, .escolha small{display:block}
.escolha small{color:var(--suave)}
.pilulas-filtro.a-direita{margin-left:auto}

/* --------------------------------------------------- ficha em modal
   Grande, porque é um cadastro inteiro, e com o iframe ocupando o corpo. */
dialog.ficha-modal{width:min(980px, calc(100vw - 24px)); max-width:none; height:min(88vh, 900px); padding:0;
  display:flex; flex-direction:column; overflow:hidden}
dialog.ficha-modal:not([open]){display:none}
dialog.ficha-modal iframe{flex:1; width:100%; border:0; background:var(--nuvem)}
body.em-popup .cab-pag{top:0}
/* Fichas em modal mais largas: cabem as colunas sem apertar. */
#modal-ficha{width:min(1240px,96vw)}
/* Ficha em modal: o cabeçalho (foto, nome, Salvar) fica fixo até o fim da
   ficha. Ele está dentro do formulário, e os cartões de baixo ficam fora
   dele; sem isto, o "sticky" acabava junto com o formulário e o cabeçalho
   subia no fim da rolagem. */
body.em-popup main > form:has(> .cab-pag){display:contents}
/* Volta para a ficha anterior, dentro do mesmo modal. */
.voltar-ficha{margin:0 0 10px}
.voltar-ficha a{display:inline-flex; align-items:center; gap:6px; font-size:13px}
.voltar-ficha svg{transform:rotate(180deg)}

/* A busca das listas ocupa toda a largura que sobra na linha, e as pílulas
   de filtro ficam no canto. O botão de filtrar fica no tamanho dele. */
.filtros > .entrada{flex:1 1 auto; max-width:none}
.filtros > .botao{flex:none; width:auto}
.filtros-relatorio .botao{flex:none; width:auto}

/* ------------------------------------------- combobox de múltipla escolha
   O campo tem o desenho de .entrada e mostra o escolhido em fichas; a lista
   abre por baixo, com o desenho dos menus suspensos. */
.multi-escolha{position:relative}
.multi-alvo{width:100%; min-height:44px; justify-content:space-between; gap:8px; cursor:pointer; text-align:left; font:inherit; color:var(--tinta); padding:6px 12px}
.multi-alvo .chevron{transform:rotate(90deg); color:var(--fraca); flex:none; transition:transform .12s}
.multi-escolha.aberta .multi-alvo .chevron{transform:rotate(-90deg)}
.multi-fichas{display:flex; flex-wrap:wrap; gap:6px; min-width:0}
.multi-vazio{color:var(--fraca)}
.multi-ficha{background:var(--indigo-sup); color:var(--indigo-fte)}
.multi-opcoes{position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:30; max-height:320px; overflow:auto;
  padding:6px; background:var(--branco); border:1px solid var(--traco2); border-radius:var(--r); box-shadow:var(--sombra-alta)}
.multi-opcoes[hidden]{display:none !important}
.multi-opcao{display:flex; align-items:flex-start; gap:10px; padding:9px 10px; border-radius:var(--r-p); margin:0}
.multi-opcao:hover{background:var(--leve)}
.multi-opcao span{display:flex; flex-direction:column; gap:1px}
.multi-opcao small{color:var(--fraca); font-size:12px}
.multi-opcao.travada{opacity:.55; cursor:not-allowed}

/* A lista nativa do select segue o tema (o Chrome no Windows usa estas cores). */
select option{background:var(--branco); color:var(--tinta)}

/* Prefixo e sufixo dentro do campo (R$, %, dias). */
.entrada .prefixo{padding-left:12px; color:var(--fraca)}
.entrada .sufixo{padding-right:12px; color:var(--fraca)}

/* Edição em linha: os campos lado a lado, com uma linha nova embaixo. */
.linha-edicao{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.linha-edicao .entrada{flex:1 1 160px; min-width:140px}
.linha-edicao .entrada.larga{flex:2 1 240px}
.linha-edicao.nova{margin-top:12px; padding-top:12px; border-top:1px solid var(--traco)}
.linha-edicao .botao{width:auto}
/* A linha nova não tem "Tirar": a vaga fica guardada para as colunas alinharem. */
.linha-edicao .vaga{visibility:hidden}
/* O .botao do tema nasce com width:100%; no cabeçalho do cartão ele fica ao lado do título. */
.cab-cartao .botao{width:auto; white-space:nowrap}
.linha-acoes{display:flex; flex-wrap:wrap; gap:8px}
.linha-acoes .botao{width:auto}
.checks-coluna{display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:6px}
.botao.mini{padding:4px 10px; font-size:12px; min-height:0}
.botao.mini svg{width:13px; height:13px}

/* Botão que é link: a regra geral de link (a:hover pinta de azul) ganhava da
   cor do botão, e o texto sumia no hover do tema claro. Cada tipo mantém a
   sua cor ao passar o mouse. */
a.botao:hover, a.botao:focus-visible{color:#fff; text-decoration:none}
a.botao.claro:hover, a.botao.claro:focus-visible{color:var(--tinta)}
a.botao.perigo:hover, a.botao.perigo:focus-visible{color:var(--rubi)}

/* Cabeçalho da ficha de pessoa (usuário): foto e dados
   grandes, para reconhecer de quem se trata sem ler o formulário. */
.cab-pessoa .titulo-cliente{gap:20px}
.cab-pessoa .brasao{width:104px; height:104px; border-radius:50%; padding:0}
.cab-pessoa .brasao.iniciais{width:104px; height:104px; border-radius:50%; font-size:34px}
.cab-pessoa .brasao-troca{border-radius:50%}
.cab-pessoa .brasao-troca .brasao-etiqueta{border-radius:0 0 52px 52px; padding:6px 0 8px; font-size:10px}
.cab-pessoa h1, body.em-popup .cab-pessoa h1{font-size:26px; line-height:1.2}
.cab-pessoa .dados-pessoa{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:15px; margin-top:6px}
.cab-pessoa .dados-pessoa span{display:inline-flex; align-items:center; gap:6px}
.cab-pessoa .dados-pessoa svg{font-size:16px}
.etiquetas-pessoa{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0}
.etiquetas-pessoa .pilula{font-size:12px}
.cli .txt .etiqueta-situacao{margin-top:3px}
@media (max-width:640px){
  .cab-pessoa .brasao, .cab-pessoa .brasao.iniciais{width:72px; height:72px; font-size:24px}
  .cab-pessoa h1, body.em-popup .cab-pessoa h1{font-size:20px}
  .cab-pessoa .dados-pessoa{font-size:13px}
}

/* Editor de foto das fichas (Foto::editavel). */
.foto-editavel{flex:none}
button.brasao-troca{border:0; background:none; padding:0; cursor:pointer; color:inherit; font:inherit}
.foto-editavel.mudou .brasao{outline:3px solid var(--indigo); outline-offset:3px}
.editor-foto{width:min(460px,94vw)}
.editor-foto .zona-foto .zona-alvo{padding:42px 16px}
.recorte{display:flex; flex-direction:column; align-items:center; gap:10px}
.recorte-quadro{width:min(300px,72vw); aspect-ratio:1; border-radius:50%; overflow:hidden;
  box-shadow:0 0 0 1px var(--traco); touch-action:none}
.recorte-quadro canvas{width:100%; height:100%; display:block; cursor:grab}
.recorte-quadro canvas:active{cursor:grabbing}
.recorte-controles{display:flex; align-items:center; gap:10px; width:100%}
.recorte-controles input[type=range]{flex:1}
.recorte-controles .botao{width:auto; padding:8px 10px}
.espelhado{transform:scaleX(-1)}
.editor-foto .acoes-modal{flex-wrap:wrap}
.editor-foto > .ajuda{margin-top:10px; text-align:center}

/* Área de soltar arquivo (label.zona-soltar com input file dentro): a forma
   curta da zona de upload, para onde a zonaDeUpload() inteira não cabe. */
.zona-soltar{display:flex; align-items:center; justify-content:center; gap:10px; min-height:84px; padding:16px; border:2px dashed var(--traco2);
  border-radius:12px; background:var(--leve); color:var(--suave); cursor:pointer; text-align:center; position:relative}
.zona-soltar input[type="file"]{position:absolute; inset:0; opacity:0; cursor:pointer}
.zona-soltar svg{width:22px; height:22px; transform:scaleY(-1)}
.zona-soltar.arrastando{border-color:var(--indigo-fte); background:var(--indigo-sup); color:var(--indigo-fte)}
.zona-soltar.com-arquivo{border-style:solid; color:var(--tinta)}
.zona-soltar .zona-nome{font-weight:600}

/* Avisos push: canto superior direito, por cima de tudo, com X. */
#avisos-vivos{top:calc(16px + env(safe-area-inset-top)); bottom:auto; right:16px; z-index:200; width:min(420px,calc(100vw - 32px))}
#avisos-vivos .aviso.push{background:var(--branco); color:var(--tinta); border:1px solid var(--traco);
  border-left:4px solid currentColor; padding:18px 12px 18px 16px; min-height:64px; font-size:14px; gap:12px; align-items:center;
  animation:push-entra .25s ease-out}
#avisos-vivos .aviso.push.bom{border-left-color:var(--verde)}
#avisos-vivos .aviso.push.info{border-left-color:var(--indigo)}
#avisos-vivos .aviso.push.atencao{border-left-color:var(--ambar)}
#avisos-vivos .aviso.push.ruim{border-left-color:var(--rubi)}
#avisos-vivos .aviso.push span{flex:1}
#avisos-vivos .aviso.push svg{font-size:18px; margin-top:0}
#avisos-vivos .aviso.saindo{opacity:0; transform:translateX(24px)}
.fechar-push{border:0; background:none; color:var(--suave); font-size:20px; line-height:1; padding:0 4px; cursor:pointer; flex:none}
.fechar-push:hover{color:var(--tinta)}
@keyframes push-entra{from{opacity:0; transform:translateX(24px)} to{opacity:1; transform:none}}

/* Listas: título, filtros e cabeçalho da tabela ficam fixos ao rolar
   (alturas medidas pelo gravity.js). O fundo cobre o que passa por baixo,
   inclusive o espaço entre os blocos. */
body.lista-fixa main.conteudo > .cab-pag{position:sticky; top:var(--fixo-topo, 0); z-index:4; background:var(--nuvem);
  margin:-22px -22px 0; padding:18px 22px 8px}
body.lista-fixa main.conteudo > form.filtros{position:sticky; top:var(--fixo-cab, 0); z-index:4; background:var(--nuvem);
  margin:-18px -22px 0; padding:10px 22px 14px}
/* Com a trilha (Configurações > Usuários) antes, o cabeçalho não sobe sobre ela. */
body.lista-fixa main.conteudo > .trilha + .cab-pag{margin-top:-8px; padding-top:8px}
@media (min-width:900px){
  body.lista-fixa #lista-viva .rolagem{overflow:visible}
  body.lista-fixa #lista-viva table.dados thead th{position:sticky; top:calc(var(--fixo-tabela, 0px) - 4px); z-index:3;
    box-shadow:0 1px 0 var(--traco)}
}

/* Celular: a página é uma coluna (menu em cima, conteúdo embaixo). Sem
   isto, em tela com pouco conteúdo a sobra da altura ia para a linha do
   menu, que esticava num vão branco. */
@media (max-width:820px){
  .shell{grid-template-rows:auto 1fr; align-content:start}
  /* Título e filtros fixos comem metade da tela do celular: lá, rolam. */
  body.lista-fixa main.conteudo > .cab-pag,
  body.lista-fixa main.conteudo > form.filtros{position:static; margin:0; padding:0; background:none}
  /* Resumos em duas colunas: um por linha empurrava a lista para longe. */
  .metricas{grid-template-columns:1fr 1fr; gap:8px}
  .metricas .metrica{padding:10px 12px}
  .metricas .metrica .val{font-size:20px}
  /* Cabeçalho da ficha de pessoa: foto menor e o Salvar na mesma linha. */
  .cab-pessoa{flex-wrap:nowrap; align-items:center}
  .cab-pessoa .titulo-cliente{flex:1; min-width:0; gap:12px}
  .cab-pessoa .titulo-cliente h1{overflow:hidden; text-overflow:ellipsis}
  .cab-pessoa .brasao, .cab-pessoa .brasao.iniciais{width:56px; height:56px; font-size:20px}
  .cab-pessoa .acoes{flex:none}
}
@media (max-width:640px){
  .cab-pessoa h1, body.em-popup .cab-pessoa h1{font-size:18px}
  .cab-pessoa .dados-pessoa{font-size:12.5px; gap:2px 12px}
  body.em-popup .cab-pessoa > .titulo-cliente > div > p:not(.dados-pessoa):not(.etiquetas-pessoa){display:none}
  .etiquetas-pessoa{margin-top:6px; gap:4px}
  .etiquetas-pessoa .pilula{font-size:11px; padding:2px 8px}
  /* Ficha: nome e contato numa linha só; o resto fica no corpo da ficha. */
  .cab-pessoa .dados-pessoa span{white-space:nowrap}
  .cab-pessoa .dados-pessoa span:last-child:not(:first-child){display:none}
  .cab-pessoa .acoes .pilula{display:none}
  .cab-pessoa h1{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal}
  /* Tabelas: célula não quebra; a tabela rola de lado dentro da moldura. */
  table.dados th, table.dados td{white-space:nowrap}
  table.dados .cli .txt b{white-space:nowrap}
}

/* Painel: cartões em duas colunas; métricas clicáveis. */
.painel-colunas{display:grid; grid-template-columns:repeat(auto-fit, minmax(420px, 1fr)); gap:18px; align-items:stretch}
@media (max-width:820px){ .painel-colunas{grid-template-columns:1fr} }
a.metrica-link{text-decoration:none; color:inherit; transition:border-color .15s, transform .15s}
a.metrica-link:hover{border-color:var(--acento-borda); transform:translateY(-1px)}
a.metrica{text-decoration:none; color:inherit}
.lista-simples{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
/* As listas dos cartões do painel rolam na vertical e nunca na horizontal. */
.painel-colunas .rolagem{overflow-x:hidden; overflow-y:auto; max-height:215px}
.painel-colunas .rolagem.sem-borda table.dados, .painel-colunas table.dados{min-width:0; width:100%; table-layout:fixed}
.painel-colunas table.dados td.acao, .painel-colunas table.dados td.dado{width:64px}
.painel-colunas .cli .txt{min-width:0}
.painel-colunas .cli .txt b, .painel-colunas .cli .txt span{overflow:hidden; text-overflow:ellipsis}
.painel-colunas > .cartao{margin:0}
.painel-colunas .lista-simples{max-height:215px; overflow-y:auto; overflow-x:hidden}

/* Listas: cada célula numa linha só, nunca quebra. O que não cabe termina
   em reticências, e passar o mouse mostra o texto inteiro (gravity.js põe
   o title só na célula cortada). A coluna principal de cada lista (nome,
   título, descrição) leva td.elastica: fica com a sobra da largura e é a
   primeira a encurtar; as outras ficam do tamanho do conteúdo, até 200 px. */
table.dados th, table.dados td{white-space:nowrap}
table.dados td{max-width:200px; overflow:hidden; text-overflow:ellipsis}
table.dados td.elastica{max-width:0; width:38%}
table.dados:has(td.elastica) td:not(.elastica){width:1%}
table.dados td.acao, table.dados td .pilula{overflow:visible}
table.dados td:has(.entrada), table.dados td:has(form){max-width:none; overflow:visible}
table.dados td .cli, table.dados td .cli .txt{min-width:0; max-width:100%}
table.dados td .cli .txt b, table.dados td .cli .txt span,
table.dados td > .txt b, table.dados td > .txt span{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
table.dados td .ev-linha2{overflow:hidden; text-overflow:ellipsis}

/* Abas que são links (uma tela por aba) e as abas de uma ficha. */
.abas-chamado a{display:flex; align-items:center; gap:7px; padding:10px 14px; border-bottom:2px solid transparent; font-size:14px; font-weight:600;
  color:var(--suave); white-space:nowrap; text-decoration:none}
.abas-chamado a svg{width:16px; height:16px}
.abas-chamado a:hover{color:var(--tinta)}
.abas-chamado a[aria-selected="true"]{color:var(--indigo-fte); border-bottom-color:var(--indigo)}
.abas-ficha{margin:0 0 16px; overflow-x:auto}
.abas-ficha button svg{width:16px; height:16px}
.abas-chamado .conta-aba.alerta-aba{background:var(--ambar-sup); color:var(--ambar); font-family:inherit; font-weight:600}

/* Navegação por mês nos filtros e o total embaixo da lista. */
.navegar-mes{display:flex; align-items:center; gap:6px}
.navegar-mes .botao{padding:0 10px}
.navegar-mes .semana-atual{min-width:150px; text-align:center; font-weight:600; font-size:13px}
.soma-lista{margin:10px 2px 0; text-align:right; color:var(--suave); font-size:13px}
.soma-lista b{color:var(--tinta)}

/* Itens que abrem para editar (details), um embaixo do outro. */
.item-editavel{border-top:1px solid var(--traco); padding:10px 0}
.item-editavel:first-of-type{border-top:0}
.item-editavel summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:4px}
.item-editavel summary::-webkit-details-marker{display:none}
.item-editavel[open] summary{margin-bottom:12px}
.item-editavel .como-link{display:inline-flex; align-items:center; gap:6px; color:var(--indigo-fte); font-weight:600; font-size:13px}
.item-editavel .como-link svg{width:15px; height:15px}

/* Área ao vivo (data-vivo): os blocos de dentro mantêm o mesmo vão que o
   conteúdo da página dá entre os seus blocos. */
[data-vivo]{display:flex; flex-direction:column; gap:18px; min-width:0}
[data-vivo] > *{margin-top:0; margin-bottom:0}

/* Número ao lado de um item do menu (o que espera a pessoa). */
.rail .item .conta-item{margin-left:auto; background:var(--rubi); color:#fff; font-size:11px; font-weight:700; border-radius:999px; padding:1px 7px; line-height:1.6}

/* No celular o tema põe as pílulas numa linha só, com rolagem de lado
   (bom para filtro de lista). Aqui são só duas opções e a segunda sumia
   cortada: elas quebram para a linha de baixo. */
.doc-alterna .pilulas-filtro{flex-wrap:wrap; overflow:visible}

/* ------------------------------------------- área de texto na moldura
   O tema da casa desenha o textarea solto no .campo, com borda, fundo e
   anel de foco próprios. Nas fichas do Gravity ele vem dentro da moldura
   .entrada, como os inputs; sem esta regra saíam duas caixas, uma dentro
   da outra, e a de dentro não ocupava a largura (aparecia no celular). A
   moldura fica com a borda e o foco; o textarea só ocupa o espaço. */
.entrada:has(> textarea){align-items:stretch}
.campo .entrada > textarea,
.entrada > textarea{
  flex:1; min-width:0; width:100%; box-sizing:border-box;
  border:0; border-radius:0; background:transparent; box-shadow:none; outline:none;
  padding:12px 0; margin:0; resize:vertical;
  font:inherit; font-size:14.5px; line-height:1.5; color:var(--tinta);
}
.campo .entrada > textarea:focus,
.entrada > textarea:focus{border:0; background:transparent; box-shadow:none; outline:none}
.entrada > textarea::placeholder{color:var(--fraca)}

/* Aviso de campo obrigatório ou inválido, no lugar do balão do navegador
   (ver o bloco "Aviso de campo obrigatório" no gravity.js). Uma seta
   aponta para a moldura do campo, que fica vermelha junto. */
.balao-erro{
  position:relative; display:inline-flex; align-items:center; gap:7px; margin:8px 0 0;
  padding:7px 11px 7px 10px; background:var(--rubi-sup); color:#7E2630;
  border:1px solid var(--rubi); border-radius:var(--r-p); font-size:12.5px; line-height:1.35; font-weight:600;
}
.balao-erro::before{
  content:""; position:absolute; top:-6px; left:16px; width:9px; height:9px;
  background:var(--rubi-sup); border-left:1px solid var(--rubi); border-top:1px solid var(--rubi); transform:rotate(45deg);
}
.balao-erro::after{
  content:"!"; order:-1; flex:none; width:16px; height:16px; border-radius:50%;
  background:var(--rubi); color:#fff; font-size:11px; line-height:16px; text-align:center; font-weight:800;
}
[data-tema="escuro"] .balao-erro{color:#F3C3C9}

/* Combo (gravity.js): o select de verdade com a lista no padrão da casa
   (.sugestoes do Orbit) no lugar da nativa. A seta mostra que abre; a lista
   fica fixa na tela, alinhada à caixa, e não é cortada pelo modal. */
.entrada.combo{position:relative}
.entrada.combo select{padding-right:22px; text-overflow:ellipsis; white-space:nowrap}
.entrada.combo .combo-seta{position:absolute; right:12px; top:50%; width:14px; height:14px; margin-top:-7px;
  color:var(--fraca); transform:rotate(90deg); transition:transform .12s; pointer-events:none; fill:none; stroke:currentColor}
.entrada.combo.combo-aberto{border-color:var(--indigo); box-shadow:var(--anel)}
.entrada.combo.combo-aberto .combo-seta{transform:rotate(-90deg)}
.sugestoes.combo-lista{position:fixed; right:auto; z-index:1000; max-width:min(420px, 92vw)}
.sugestoes.combo-lista li{padding:8px 12px}
.sugestoes.combo-lista li b{font-weight:500; font-size:13.5px}
.sugestoes.combo-lista li[aria-selected="true"] b{font-weight:700; color:var(--indigo-fte)}
.sugestoes.combo-lista li.desabilitada{opacity:.5; cursor:default}

/* Limpar filtros (gravity.js): à direita da linha de filtros, pequeno. */
.filtros .limpar-filtros{flex:0 0 auto; margin-left:auto; padding:7px 12px; font-size:12.5px; gap:6px; width:auto; text-decoration:none; white-space:nowrap}
.filtros .limpar-filtros:hover{text-decoration:none}
.filtros .limpar-filtros svg{width:13px; height:13px}
.filtros .limpar-filtros[hidden]{display:none}

/* ------------------------------------------------------------- Início
   Resumos e gráficos (app/Painel.php e app/Graficos.php). Os gráficos são
   SVG desenhados no servidor; a cor vai no atributo fill, porque a CSP do
   painel não aceita style no elemento. */
.painel-graficos{margin-top:18px}
.painel-graficos .cartao{margin:0; min-width:0}
.cab-cartao .nota{font-size:12px; color:var(--fraca)}
.grafico-svg{width:100%; height:140px; display:block}
.grafico .pes-grafico a.pe{text-decoration:none; color:inherit; border-radius:6px}
.grafico .pes-grafico a.pe:hover{background:var(--leve)}
.grafico .pes-grafico b{font-family:inherit; font-size:12px; font-weight:600; color:var(--suave)}
.grafico .pes-grafico span{font-family:var(--dado); font-size:13px; font-weight:700; color:var(--tinta)}
.legenda-grafico{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; font-size:12px; color:var(--suave)}
.legenda-grafico span{display:inline-flex; align-items:center; gap:6px}
.ponto-legenda{width:9px; height:9px; flex:none}
.barras-h{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.barras-h a,.barras-h li > span:first-child{color:inherit}
.barras-h a,.barras-h li{display:grid; grid-template-columns:minmax(0, 190px) 1fr 32px; align-items:center; gap:10px; text-decoration:none}
.barras-h a{display:contents}
.barras-h .rot{display:flex; align-items:center; gap:7px; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.barras-h .trilho{width:100%; height:8px; display:block}
.barras-h b{font-family:var(--dado); font-size:13px; text-align:right}
.faixa-partes{width:100%; height:14px; display:block; border-radius:7px; overflow:hidden}
.legenda-faixa{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; color:var(--suave)}
.legenda-faixa a,.legenda-faixa li{display:inline-flex; align-items:center; gap:6px; color:inherit; text-decoration:none}
.legenda-faixa a:hover{color:var(--tinta)}
.legenda-faixa b{font-family:var(--dado); color:var(--tinta)}
.sub-cartao{font-size:13px; font-weight:700; margin:18px 0 8px; color:var(--suave)}
.nota-cartao{font-size:12.5px; color:var(--suave); margin:10px 0 0}
.lista-proximos{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.lista-proximos a{display:flex; align-items:center; gap:12px; padding:8px 4px; border-bottom:1px solid var(--traco); text-decoration:none; color:inherit; min-width:0}
.lista-proximos li:last-child a{border-bottom:0}
.lista-proximos a:hover{background:var(--leve)}
.data-prox{display:flex; flex-direction:column; align-items:center; width:42px; flex:none; font-size:11px; text-transform:uppercase; color:var(--fraca); line-height:1.1}
.data-prox b{font-family:var(--dado); font-size:18px; color:var(--tinta)}
.txt-prox{display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:7px; align-items:center; min-width:0}
.txt-prox b{font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.txt-prox > span{grid-column:2; font-size:12px; color:var(--fraca); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* Logo da entidade no seletor do topo. */
.suspenso .logo-menu{width:28px; height:28px; flex:none}
.capa-noticia{margin:0 0 10px}
.capa-noticia img{width:100%; height:auto; border-radius:var(--r-p); display:block}

/* E-mail da plataforma (email.php). */
.metricas-email{margin:0 0 16px}
.cartao-teste-email{margin:0 0 18px}
.cartao-teste-email .linha-teste{margin:0 0 8px}
.form-linha{margin:0; display:inline}

/* Início da plataforma: a tabela das entidades e a saúde das integrações. */
.cartao-entidades{margin:0 0 18px}
.cartao-entidades table.dados th.num, .cartao-entidades table.dados td.num{text-align:right; white-space:nowrap}
.lista-saude{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px}
.lista-saude a, .lista-saude .item-saude{display:flex; align-items:center; gap:12px; padding:10px 8px; border-radius:var(--r); color:inherit; text-decoration:none}
.lista-saude a:hover{background:var(--leve)}
.lista-saude svg{width:18px; height:18px; color:var(--suave); flex:none}
.txt-saude{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.txt-saude b{font-size:13.5px}
.txt-saude span{font-size:12px; color:var(--fraca); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lista-saude .pilula{flex:none}
.cartao-entidades .botao.mini{font-size:12px; padding:4px 10px; min-height:0}
.cartao-entidades + .painel-graficos{margin-top:0}
.metricas + .cartao-entidades{margin-top:18px}

/* Política de privacidade (privacidade.php), sem login. */
.pagina-legal{max-width:760px; margin:0 auto; padding:40px 20px 60px}
.pagina-legal .marca-logo{width:150px; display:block; margin:18px 0 6px}
.voltar-legal{display:inline-flex; align-items:center; gap:6px; font-size:13px}
.voltar-legal .gira{transform:rotate(180deg)}
.texto-legal h2{font-size:17px; margin:26px 0 8px}
.texto-legal p, .texto-legal li{font-size:14.5px; line-height:1.7}
.texto-legal ul{padding-left:20px}
.texto-legal-data{color:var(--fraca); font-size:12.5px !important; margin-top:28px}

/* ------------------------------------------- enquadramento da imagem
   A foto aparece inteira; a moldura, na proporção do tamanho padrão, anda
   sobre ela e muda de tamanho pelos cantos e pelo zoom. Softsul Software */
.confirmador.enquadrador{width:min(820px,96vw)}
.enquadrador .palco-recorte{position:relative; overflow:hidden; margin:14px auto 0; border-radius:var(--r);
  background:#111; touch-action:none; user-select:none; cursor:crosshair}
.enquadrador .palco-recorte img{position:absolute; max-width:none; pointer-events:none; -webkit-user-drag:none}
/* Fora da moldura escurece (a sombra enorme); dentro, a regra dos terços. */
.enquadrador .moldura-recorte{position:absolute; cursor:grab; outline:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.95), 0 0 0 9999px rgba(0,0,0,.55);
  background:linear-gradient(to right,transparent 33.2%,rgba(255,255,255,.35) 33.3%,rgba(255,255,255,.35) 33.5%,transparent 33.6%,transparent 66.5%,rgba(255,255,255,.35) 66.6%,rgba(255,255,255,.35) 66.8%,transparent 66.9%),
             linear-gradient(to bottom,transparent 33.2%,rgba(255,255,255,.35) 33.3%,rgba(255,255,255,.35) 33.5%,transparent 33.6%,transparent 66.5%,rgba(255,255,255,.35) 66.6%,rgba(255,255,255,.35) 66.8%,transparent 66.9%)}
.enquadrador .moldura-recorte:focus-visible{box-shadow:0 0 0 2px var(--indigo), 0 0 0 9999px rgba(0,0,0,.55)}
.enquadrador .palco-recorte.movendo .moldura-recorte{cursor:grabbing}
.enquadrador .alca{position:absolute; width:16px; height:16px; background:#fff; border-radius:3px;
  box-shadow:0 1px 3px rgba(0,0,0,.5)}
.enquadrador .alca[data-canto="nw"]{left:-2px; top:-2px; cursor:nwse-resize}
.enquadrador .alca[data-canto="ne"]{right:-2px; top:-2px; cursor:nesw-resize}
.enquadrador .alca[data-canto="sw"]{left:-2px; bottom:-2px; cursor:nesw-resize}
.enquadrador .alca[data-canto="se"]{right:-2px; bottom:-2px; cursor:nwse-resize}
.enquadrador .zoom-recorte{display:flex; align-items:center; gap:12px; margin-top:14px; font-size:13px; color:var(--suave)}
.enquadrador .zoom-recorte input{flex:1; accent-color:var(--indigo)}
.enquadrador .nitidez-recorte{margin:8px 0 0; font-size:13px; color:var(--verde)}
.enquadrador .nitidez-recorte.media{color:var(--ambar)}
.enquadrador .nitidez-recorte.ruim{color:var(--rubi); font-weight:600}
.enquadrador .acoes-modal .centralizar{margin-right:auto}

/* Meus dados aberto no modal já numa seção (#senha, #aparelhos): o
   cabeçalho da ficha fica fixo no alto e cobria o título da seção. */
body.em-popup .cartao[id]{scroll-margin-top:96px}

/* Taxonomia: a pergunta da Atricon em destaque na ficha do critério, e o
   departamento recuado embaixo da secretaria na lista de órgãos. */
.criterio-texto{font-size:16px; font-weight:600; line-height:1.45; margin:0 0 10px}
.recuo{display:inline-block; width:18px; height:1px; margin-right:8px; vertical-align:middle; border-top:1px solid var(--traco2)}

/* Blocos do site: código (HTML e CSS próprios) em letra fixa, miniatura das
   fotos da abertura e as setas de ordem lado a lado. */
textarea.codigo{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12.5px; line-height:1.5; tab-size:2}
.miniatura-bloco{width:96px; height:54px; object-fit:cover; border-radius:6px; flex:none}
.ordem-bloco{display:flex; gap:4px}
.linha-edicao .entrada.estreita{flex:0 0 76px; min-width:76px}