:root {
  --verde: #00a859; --verde-esc: #04522d; --verde-claro: #e8f5ee; --verde-fundo: #f4faf6; --linha: #d8e3dc;
  --tinta: #1d2b24; --suave: #5b6b62; --branco: #fff;
  --amarelo: #b7791f; --amarelo-f: #fdf4e3; --vermelho: #c0392b; --vermelho-f: #fbeae8; --azul: #1f5f99; --azul-f: #e7f0f9;
  --raio: 10px;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 "Segoe UI", Roboto, system-ui, -apple-system, sans-serif; color: var(--tinta); background: var(--verde-fundo); }
a { color: var(--verde-esc); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.55rem; } h2 { font-size: 1.2rem; color: var(--verde-esc); } h3 { font-size: 1rem; }
.topo { background: var(--branco); border-bottom: 3px solid var(--verde); }
.topo .in { max-width: 1180px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.topo img { height: 44px; }
.topo .tit { font-weight: 600; color: var(--verde-esc); }
.topo nav { margin-left: auto; display: flex; gap: 14px; }
.pagina { max-width: 1180px; margin: 0 auto; padding: 22px 20px 60px; }
.pagina.estreita { max-width: 980px; }
.card { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px 22px; margin-bottom: 18px; }
.card > h2 { display: flex; align-items: center; gap: 10px; }
.num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--verde); color: #fff; font-size: .85rem; flex: none; }
.ajuda { color: var(--suave); font-size: .88rem; margin: 0 0 12px; overflow-wrap: break-word; }
.grade { display: grid; gap: 12px 16px; grid-template-columns: repeat(12, 1fr); }
.c2 { grid-column: span 2; } .c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; }
.c6 { grid-column: span 6; } .c8 { grid-column: span 8; } .c12 { grid-column: span 12; }
@media (max-width: 760px) { .grade > * { grid-column: span 12 !important; } }
label { display: block; font-size: .8rem; font-weight: 600; color: var(--suave); margin-bottom: 3px; }
label .obr { color: var(--vermelho); }
input[type=text], input[type=email], input[type=password], input:not([type]), input[type=date], input[type=number], input[type=search], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--e-linha-forte, #c5d3ca); border-radius: 7px; font: inherit; background: var(--e-campo, #fff); color: var(--tinta);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--verde); outline-offset: 0; border-color: var(--verde); }
textarea { min-height: 70px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--e-linha-forte, #c5d3ca); border-radius: 20px; padding: 4px 11px; background: var(--e-cartao, #fff); font-size: .88rem; cursor: pointer; font-weight: 500; color: var(--tinta); margin: 0; }
.chip input { margin: 0; accent-color: var(--verde); }
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--verde); background: var(--verde); color: #fff; padding: 9px 16px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--e-verde-esc-forte, var(--verde-esc)); border-color: var(--e-verde-esc-forte, var(--verde-esc)); }
.btn.sec { background: var(--e-cartao, #fff); color: var(--verde-esc); }
.btn.sec:hover { background: var(--verde-claro); }
.btn.peq { padding: 5px 10px; font-size: .85rem; }
.btn.alerta { background: var(--e-amarelo-forte, var(--amarelo)); border-color: var(--e-amarelo-forte, var(--amarelo)); }
.btn.perigo { background: var(--e-vermelho-forte, var(--vermelho)); border-color: var(--e-vermelho-forte, var(--vermelho)); color: #fff; }
.btn.perigo:hover { filter: brightness(.92); }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.barra-fixa { position: sticky; bottom: 0; background: var(--e-veu, rgba(255,255,255,.96)); border-top: 1px solid var(--linha); padding: 12px 20px; margin: 0 -20px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; z-index: 5; }
.msg { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
.msg.erro { background: var(--vermelho-f); color: var(--vermelho); border: 1px solid var(--e-vermelho-b, #f0c4be); }
.msg.ok { background: var(--verde-claro); color: var(--verde-esc); border: 1px solid var(--e-verde-b, #bfe3cd); }
.msg.info { background: var(--azul-f); color: var(--azul); border: 1px solid var(--e-azul-b, #c8dcef); }
.msg ul { margin: 4px 0 0 18px; padding: 0; }
.tabela-wrap { overflow-x: auto; }
/* Nenhuma tela rola de lado (Cicero, 27/09/2026): tabela mais larga que o cartão rola DENTRO do cartão,
   e a página fica parada. Os únicos absolutos dentro de cartão são réguas, que não vazam — nada é cortado. */
.card:has(table) { overflow-x: auto; }
@supports not selector(:has(*)) { .card { overflow-x: auto; } }
table.t { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.t th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .02em; color: var(--suave); border-bottom: 2px solid var(--linha); padding: 7px 8px; background: var(--verde-fundo); position: sticky; top: 0; }
table.t td { border-bottom: 1px solid var(--e-linha, #edf2ee); padding: 6px 8px; vertical-align: middle; }
table.t tr.grupo td { background: var(--verde-claro); font-weight: 700; color: var(--verde-esc); font-size: .8rem; text-transform: uppercase; }
table.t .dir { text-align: right; white-space: nowrap; }
table.t input[type=text] { padding: 5px 7px; }
table.t input.valor { width: 100px; text-align: right; }
table.t input.prazo { width: 150px; }
.selo { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.selo.verde { background: var(--verde-claro); color: var(--verde-esc); }
.selo.amarelo { background: var(--amarelo-f); color: var(--amarelo); }
.selo.vermelho { background: var(--vermelho-f); color: var(--vermelho); }
.selo.azul { background: var(--azul-f); color: var(--azul); }
.selo.cinza, .selo.sem { background: var(--e-sutil, #eef1ef); color: var(--suave); }
/* o .ref quebrava a tela no celular quando o texto era longo (Cicero, 27/09/2026: nada rola de lado) */
.ref { color: var(--suave); font-size: .82rem; overflow-wrap: anywhere; }
.ref b { color: var(--verde-esc); }
tr.l-verde td:first-child { box-shadow: inset 3px 0 var(--verde); }
tr.l-amarelo td:first-child { box-shadow: inset 3px 0 var(--amarelo); }
tr.l-vermelho td:first-child { box-shadow: inset 3px 0 var(--vermelho); }
tr.nao-realiza td { color: var(--e-apagado, #9aa7a0); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: var(--e-cartao, #fff); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; }
.kpi .r { font-size: .75rem; text-transform: uppercase; color: var(--suave); letter-spacing: .03em; }
.kpi .v { font-size: 1.5rem; font-weight: 700; margin-top: 2px; }
.kpi .s { font-size: .8rem; color: var(--suave); }
/* a cor do número (o kpi() dos componentes escreve .v.<cor>): eram três cópias, no cardio, na emissão e no sst */
.kpi .v.verde { color: var(--verde); } .kpi .v.amarelo { color: var(--amarelo); }
.kpi .v.vermelho { color: var(--vermelho); } .kpi .v.azul { color: var(--azul); }
/* texto só para o leitor de tela (legenda da tabela, nome da coluna de botões): vale nos dois layouts */
.so-leitor { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.abas { display: flex; gap: 4px; border-bottom: 2px solid var(--linha); margin-bottom: 18px; flex-wrap: wrap; }
.abas a { padding: 9px 14px; text-decoration: none; color: var(--suave); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.abas a.on { color: var(--verde-esc); border-color: var(--verde); }
.link-box { display: flex; gap: 8px; align-items: center; background: var(--verde-claro); border: 1px dashed var(--verde); padding: 10px 12px; border-radius: 8px; flex-wrap: wrap; }
.link-box code { font-size: .9rem; word-break: break-all; flex: 1; min-width: 200px; }
.unidade { border: 1px solid var(--linha); border-radius: 8px; padding: 14px; margin-bottom: 12px; background: var(--e-cartao-2, #fcfefd); }
.unidade h3 { display: flex; justify-content: space-between; align-items: center; }
.campo-copia { display: flex; gap: 6px; }
.campo-copia input { background: var(--e-cartao-2, #fbfdfc); }
.historico { list-style: none; padding: 0; margin: 0; font-size: .88rem; }
.historico li { padding: 6px 0; border-bottom: 1px solid var(--e-linha, #edf2ee); }
.historico .q { color: var(--suave); font-size: .8rem; margin-right: 8px; }
.hero { background: linear-gradient(135deg, var(--e-verde-esc-forte, var(--verde-esc)), var(--verde)); color: #fff; border-radius: var(--raio); padding: 22px 24px; margin-bottom: 18px; }
.hero h1 { color: #fff; }
.hero p { margin: .3rem 0 0; opacity: .95; }
.passos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; font-size: .85rem; }
.passos span { background: rgba(255,255,255,.18); padding: 4px 10px; border-radius: 20px; }
.muted { color: var(--suave); }
.pequeno { font-size: .84rem; }
.dir { text-align: right; }
.lista-busca td { cursor: default; }
.regras { font-size: .88rem; }
.regras td:first-child { font-weight: 600; }
details.sec { border: 1px solid var(--linha); border-radius: 8px; padding: 10px 14px; background: var(--e-cartao, #fff); margin-bottom: 10px; }
details.sec summary { cursor: pointer; font-weight: 600; color: var(--verde-esc); }
.alerta-prazo { border-left: 4px solid var(--amarelo); background: var(--amarelo-f); padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; }
.alerta-prazo.vencido { border-color: var(--vermelho); background: var(--vermelho-f); }
.barra-prog { height: 7px; background: var(--e-sutil, #e6ece8); border-radius: 10px; overflow: hidden; margin: 3px 0; }
.barra-prog span { display: block; height: 100%; border-radius: 10px; }
.barra-prog.grande { height: 12px; }
.salvo-auto { font-size: .8rem; color: var(--suave); margin-right: auto; align-self: center; }
.lista-unidades { display: grid; gap: 8px; }
.unidade-card { margin: 0; }
.unidade-btn { width: 100%; text-align: left; display: grid; gap: 2px; padding: 12px 16px; background: var(--e-cartao, #fff); border: 1px solid var(--linha); border-radius: 9px; cursor: pointer; font: inherit; color: var(--tinta); }
.unidade-btn:hover, .unidade-btn:focus { border-color: var(--verde); background: var(--verde-fundo); outline: none; }
.un-nome { font-weight: 700; color: var(--verde-esc); }
.un-info { font-size: .84rem; color: var(--suave); }
.un-acao { font-size: .85rem; font-weight: 600; color: var(--verde); margin-top: 4px; }
.parceiro { margin-top: 3px; }
.parceiro-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 500; color: var(--suave); margin: 0; cursor: pointer; }
.parceiro-toggle input { margin: 0; accent-color: var(--verde); }
.par-info { margin-top: 4px; font-size: .84rem; padding: 5px 8px !important; max-width: 360px; }
.selo-parceiro { display: inline-block; font-size: .72rem; background: var(--azul-f); color: var(--azul); border-radius: 10px; padding: 1px 7px; margin-left: 4px; }
.rotulo-grupo { display: block; font-size: .8rem; font-weight: 600; color: var(--suave); margin-bottom: 3px; }

.rodape { text-align: center; font-size: 12px; color: var(--e-suave, #6b7a72); padding: 18px 16px 26px; border-top: 1px solid var(--e-linha, #e3ebe6); margin-top: 24px; }
.rodape a { color: inherit; }

.andamento h2 { margin-top: 0; }
.etapas { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.etapas li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; font-size: .82rem; color: var(--e-suave, #6b7a72); }
.etapas .bola { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--e-linha-forte, #cfdad3); display: flex; align-items: center; justify-content: center; font-weight: 700; background: var(--e-cartao, #fff); }
.etapas li.feito { color: var(--verde-esc); }
.etapas li.feito .bola { background: var(--verde); border-color: var(--verde); color: #fff; }
.etapas li.atual { color: var(--e-tinta, #1d2b24); font-weight: 600; }
.etapas li.atual .bola { border-color: var(--amarelo); color: var(--amarelo); }
.etapas .quando { font-size: .72rem; color: var(--e-apagado, #8a978f); font-weight: 400; }
.proximo { align-items: center; flex-wrap: wrap; gap: 8px; }

.preench-compacto { padding: 10px 16px; }
.preench-compacto summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.preench-compacto summary::-webkit-details-marker { display: none; }
.preench-compacto summary .rot { font-weight: 600; }
.preench-compacto summary .barra-prog { flex: 1; min-width: 120px; max-width: 320px; margin: 0; }
.preench-compacto .pendencias { margin: 10px 0 6px; padding-left: 18px; }

.exame-nome { font-weight: 500; }
.linha-info:empty { display: none; }
table.t td, table.t th { vertical-align: top; }
tr.l-verde td:first-child, tr.l-amarelo td:first-child, tr.l-vermelho td:first-child { padding-left: 12px; }

.pequeno.vermelho, .vermelho { color: var(--vermelho); }

.sem-acordo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--e-linha-forte, #e0e6e2); }

.desfechos { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }

/* ---- Gestão Pró: acréscimos ---- */
.topo nav a { text-decoration: none; font-weight: 600; color: var(--suave); }
.topo nav a.on { color: var(--verde-esc); }
.topo .quem { color: var(--suave); font-size: .85rem; }
/* visual novo (só aparece com os temas ligados): o nome numa badge e o Sair como ícone */
.topo .quem-badge { display: inline-flex; align-items: center; gap: 6px; max-width: 200px; padding: 4px 11px 4px 9px;
  border-radius: 999px; background: var(--verde-claro); color: var(--verde-esc); font-size: .8rem; font-weight: 600;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--verde) 35%, transparent); }
.topo .quem-badge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo .quem-badge svg { flex: none; }
.topo nav a.sair-icone { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 50%; color: var(--suave); }
.topo nav a.sair-icone:hover, .topo nav a.sair-icone:focus-visible { background: var(--vermelho-f); color: var(--vermelho); }
.modulos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.modulo { display: block; background: var(--e-cartao, #fff); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 20px; text-decoration: none; color: var(--tinta); }
.modulo:hover { border-color: var(--verde); box-shadow: 0 2px 10px rgba(0,80,40,.08); }
.modulo b { display: block; font-size: 1.1rem; color: var(--verde-esc); margin-bottom: 4px; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; }
.filtros > div { min-width: 160px; }
.contatos3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 900px) { .contatos3 { grid-template-columns: 1fr; } }
.contato { border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; background: var(--e-cartao, #fff); }
.contato h3 { color: var(--verde-esc); margin-bottom: 6px; }
.contato .linha { font-size: .9rem; margin: 2px 0; word-break: break-word; }
.contato .acoes { margin-top: 10px; }
.btn.whats { background: #1f8f4e; border-color: #1f8f4e; }
.texto-pronto { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--verde-fundo); border: 1px dashed var(--e-linha-forte, #b9cfc1); border-radius: 8px; padding: 10px 12px; font-size: .88rem; }
.linha-tempo { list-style: none; margin: 0; padding: 0; }
.linha-tempo li { border-left: 3px solid var(--linha); padding: 4px 0 10px 12px; font-size: .9rem; }
.linha-tempo li .q { color: var(--suave); font-size: .8rem; }
.grupo-clinica { margin-bottom: 14px; }
.grupo-clinica summary { cursor: pointer; list-style: none; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 16px; background: var(--e-cartao, #fff); border: 1px solid var(--linha); border-radius: var(--raio); }
.grupo-clinica[open] summary { border-radius: var(--raio) var(--raio) 0 0; }
.grupo-clinica .corpo { border: 1px solid var(--linha); border-top: 0; border-radius: 0 0 var(--raio) var(--raio); background: var(--e-cartao, #fff); padding: 6px 10px 10px; }
.grupo-clinica summary b { color: var(--verde-esc); }
.grupo-clinica summary .dir { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.vazio { text-align: center; color: var(--suave); padding: 30px; }
/* ESTADO de uma lista/tabela/painel (05/10/2026, skill ux-telas-de-operacao): diz O QUÊ, POR QUÊ e a PRÓXIMA AÇÃO.
   <div class="estado vazio|carregando|erro" role="status|alert"><b>…</b><p>…</p><div class="acoes">…</div></div>
   (em tabela: <tr><td colspan="N"><div class="estado vazio">…</div></td></tr>). Classe nova: nenhuma tela antiga a
   usa, então a página de hoje não muda. */
.estado { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 26px 18px; color: var(--suave); }
.estado > b, .estado > strong { color: var(--tinta); font-size: 1rem; }
.estado > p { margin: 0; max-width: 60ch; }
.estado > .acoes { justify-content: center; margin-top: 4px; }
.estado.erro > b, .estado.erro > strong { color: var(--vermelho); }
.estado.carregando::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--linha);
  border-top-color: var(--verde); animation: estado-gira .8s linear infinite; }
@keyframes estado-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .estado.carregando::before { animation: none; } }
/* A bolinha da troca de página (static/carregando.js, 07/10/2026, pedido do Romeu) nas telas sem a navegação nova
   (layout de antes, entrada, telas públicas): presa no topo, por cima da página, até a próxima chegar. No layout novo
   ela fica no #nb-carregando, abaixo da barra (navegacao.css). Flutua: leva a sombra. */
.nb-carregando-pagina { position: fixed; top: 72px; left: 0; right: 0; z-index: 1000; display: grid;
  justify-items: center; padding: 0 16px; pointer-events: none; }
.nb-carregando-pagina[hidden] { display: none; }
.nb-carregando-pagina > .estado { pointer-events: auto; width: min(420px, 100%); background: var(--e-cartao, #fff);
  border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: 0 8px 24px rgba(16, 32, 24, .16); }
@media print { .nb-carregando-pagina { display: none !important; } }
/* O botão que espera o servidor (ui.js, ui.carregando e o envio de formulário; pedido do Romeu, 07/10/2026): a bolinha
   gira dentro dele, à esquerda do texto, na cor do próprio texto (que já passa no contraste do botão, nos dois temas):
   o arco cheio é a cor do texto, o trilho é ela a 30%. A largura vem presa pelo script; o giro toma o lugar do ícone
   ou, sem ícone, o respiro lateral. Desligado por ocupado, o botão não esmaece (o visual novo esmaece o :disabled):
   quem olha precisa ler o que está andando. Classes novas, nenhuma tela as escreve. */
.ui-carregando, .btn.ui-carregando[aria-busy="true"] { cursor: progress; opacity: 1; }
.btn.ui-carregando { box-sizing: border-box; overflow: hidden; white-space: nowrap; }
.btn.ui-carregando:not(.ui-gira-icone) { padding-left: 6px; padding-right: 6px; }
.btn.peq.ui-carregando:not(.ui-gira-icone) { padding-left: 3px; padding-right: 3px; }
.ui-gira-icone > .ui-gira + svg { display: none; }
.ui-gira { flex: none; display: inline-block; width: .9em; height: .9em; margin-right: 6px; box-sizing: border-box;
  border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor;
  vertical-align: -.12em; animation: estado-gira .8s linear infinite; }
.btn > .ui-gira { margin-right: 0; }
.btn.peq > .ui-gira { width: .8em; height: .8em; }
/* menos movimento: gira devagar, para continuar dizendo «está andando» sem chamar o olho */
@media (prefers-reduced-motion: reduce) { .ui-gira { animation-duration: 2.4s; } }

/* ---- barra do robô (rodapé do módulo Busca Ativa) ---- */
.robo { position: fixed; left: 0; right: 0; bottom: 0; background: #0e1a14; color: #dfe9e3; font-size: .85rem; z-index: 20; box-shadow: 0 -2px 12px rgba(0,0,0,.18); }
.robo-topo { display: flex; align-items: center; gap: 12px; padding: 9px 20px; cursor: pointer; max-width: 1180px; margin: 0 auto; }
.robo-topo b { color: #7ee2a5; white-space: nowrap; }
.robo-luz { width: 9px; height: 9px; border-radius: 50%; background: #7ee2a5; box-shadow: 0 0 0 0 rgba(126,226,165,.7); animation: pisca 2.4s infinite; flex: none; }
@keyframes pisca { 0% { box-shadow: 0 0 0 0 rgba(126,226,165,.6); } 70% { box-shadow: 0 0 0 7px rgba(126,226,165,0); } 100% { box-shadow: 0 0 0 0 rgba(126,226,165,0); } }
.robo-hoje { color: #9fb3a8; white-space: nowrap; }
.robo-ultimo { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
/* no celular a barra do robô cabe na tela: o resumo do dia encolhe com «…» e a seta fica à vista (ia a 646 px em 390) */
@media (max-width: 700px) {
  .robo-topo { padding: 9px 12px; gap: 8px; }
  .robo-topo > * { min-width: 0; }
  .robo-hoje { overflow: hidden; text-overflow: ellipsis; }
  .robo-seta, .robo-luz, .robo-topo > b { flex: none; }
}
.robo-seta { color: #7ee2a5; transition: transform .2s; }
.robo.aberto .robo-seta { transform: rotate(180deg); }
.robo-lista { display: none; max-width: 1180px; margin: 0 auto; padding: 4px 20px 14px; max-height: 40vh; overflow: auto; }
.robo.aberto .robo-lista { display: block; }
.robo-linha { display: flex; gap: 10px; align-items: center; padding: 5px 0; border-top: 1px solid #1d2f26; }
.robo-linha .ref { margin-left: auto; color: #7d8f85; }
.robo-lista .selo { background: #17281f; color: #7ee2a5; }
.robo-lista .selo.vermelho { background: #3a1d1a; color: #ff9b8f; }
.robo-lista .selo.azul { background: #16263a; color: #8ec4ff; }
.robo-lista .selo.cinza { background: #21272a; color: #b7c2bc; }
body:has(.robo) .pagina { padding-bottom: 96px; }

/* ---- Busca Ativa: tela de trabalho em três colunas ---- */
.pagina.larga { max-width: 1560px; }
.ba-topo { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.ba-busca { flex: 1; min-width: 240px; max-width: 360px; }
.ba-contadores { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.ba-c { background: var(--e-cartao, #fff); border: 1px solid var(--linha); border-radius: 10px; padding: 6px 12px; text-align: center; min-width: 92px; text-decoration: none; color: var(--tinta); }
.ba-c b { display: block; font-size: 1.25rem; line-height: 1.1; }
.ba-c span { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); }
.ba-c.on { border-color: var(--verde); box-shadow: 0 0 0 2px rgba(0,168,89,.15); }
.ba-c.v b { color: var(--vermelho); } .ba-c.a b { color: var(--amarelo); }
.ba-corpo { display: flex; gap: 16px; align-items: flex-start; }
/* em janela estreita o painel lateral ocupava a moldura inteira e a lista saltava para a largura do
   conteúdo, estourando a tela (Cicero, 27/09/2026): um embaixo do outro */
@media (max-width: 760px) { .ba-corpo { display: block; } .ba-painel { margin-top: 16px; max-width: none; } }
.ba-lista { flex: 1; min-width: 0; }
.ba-abas { display: flex; gap: 4px; border-bottom: 2px solid var(--linha); margin-bottom: 12px; }
.ba-abas a { padding: 8px 14px; text-decoration: none; color: var(--suave); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.ba-abas a.on { color: var(--verde-esc); border-color: var(--verde); }
.ba-tabela { background: var(--e-cartao, #fff); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.ba-tabela tr { cursor: pointer; }
.ba-tabela tr:hover td { background: var(--e-cartao-2, #f6faf8); }
.ba-tabela tr.sel td { background: var(--verde-claro); }
.bola { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--e-sutil-2, #ccc); }
/* a bolinha da região (SST): a cor vem do cadastro, por variável (style="--reg: …"), para o acrílico poder tingi-la */
.reg { background: var(--reg); }
.bola.verde { background: var(--verde); } .bola.amarelo { background: var(--e-amarelo-forte, var(--amarelo)); } .bola.vermelho { background: var(--e-vermelho-forte, var(--vermelho)); }
.c-verde { color: var(--verde-esc); } .c-amarelo { color: var(--amarelo); } .c-vermelho { color: var(--vermelho); }
.ba-grupo { background: var(--e-cartao, #fff); border: 1px solid var(--linha); border-radius: var(--raio); margin-bottom: 10px; }
.ba-grupo-topo { display: flex; gap: 12px; align-items: center; padding: 12px 16px; }
.ba-grupo-acao { margin-left: auto; }
.ba-grupo-guias { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px 12px; }
.ba-mini { font-size: .82rem; background: var(--verde-fundo); border: 1px solid var(--linha); border-radius: 20px; padding: 3px 10px; text-decoration: none; color: var(--tinta); }
.ba-mini:hover { border-color: var(--verde); }
.ba-painel { width: 400px; flex: none; background: var(--e-cartao, #fff); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px; position: sticky; top: 12px; max-height: calc(100vh - 120px); overflow: auto; }
.ba-painel-topo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ba-painel-topo h2 { margin: 0; font-size: 1.1rem; }
.ba-painel-topo .ref { width: 100%; }
.ba-frase { background: var(--verde-fundo); border-left: 3px solid var(--verde); border-radius: 0 8px 8px 0; padding: 10px 12px; margin: 12px 0; font-size: .9rem; }
.ba-contatos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ba-contato { border: 1px solid var(--linha); border-radius: 8px; padding: 9px 11px; font-size: .86rem; }
.ba-contato h4 { margin: 0 0 4px; font-size: .7rem; text-transform: uppercase; color: var(--suave); letter-spacing: .03em; }
.ba-contato .acoes { margin-top: 7px; gap: 5px; }
.ba-bloco { border: 1px solid var(--linha); border-radius: 8px; padding: 11px 13px; margin-top: 10px; }
.ba-bloco h4 { margin: 0 0 7px; font-size: .7rem; text-transform: uppercase; color: var(--suave); letter-spacing: .03em; }
.ba-vazio { color: var(--suave); text-align: center; padding: 40px 10px; }
@media (max-width: 1200px) { .ba-corpo { flex-direction: column; } .ba-painel { width: 100%; position: static; max-height: none; } }

.ba-tabela td, .ba-tabela th { padding: 7px 8px; }
.ba-tabela td:nth-child(3) { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ba-tabela td:nth-child(5) { max-width: 120px; font-size: .78rem; }
.ba-tabela td:last-child { white-space: nowrap; }
.ba-tabela .ref { font-size: .76rem; }

/* ---- menu do módulo: três blocos, contadores e item ativo em destaque ---- */
.topo nav { gap: 6px; align-items: center; }
.topo nav a { padding: 6px 11px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.topo nav a.on { background: var(--verde-claro); color: var(--verde-esc); box-shadow: inset 0 -2px var(--verde); }
.topo nav a i { font-style: normal; font-size: .75rem; background: var(--e-sutil, #eef2f0); color: var(--suave); border-radius: 20px; padding: 1px 7px; }
.topo nav a.on i { background: var(--e-cartao, #fff); }
.topo nav a i.alerta { background: var(--vermelho-f); color: var(--vermelho); }
.topo nav a i.nova { background: var(--verde-claro); color: var(--verde-esc); }
.nav-sep { width: 1px; height: 22px; background: var(--linha); margin: 0 6px; }

.topo .in { flex-wrap: nowrap; }
.topo nav { flex-wrap: wrap; row-gap: 4px; }
@media (max-width: 1400px) { .topo nav a { padding: 5px 8px; font-size: .92rem; } }

.robo-hoje b.ent { color: #ffb4a2; } .robo-hoje b.sai { color: #7ee2a5; }

/* tela de ligações: o player precisa caber */
.ba-ligacoes td:last-child { width: 210px; }

/* Respostas das clínicas: tudo dentro do quadro, sem rolagem lateral */
.tabela-respostas { table-layout: fixed; width: 100%; }
.tabela-respostas td, .tabela-respostas th { overflow: hidden; }
.tabela-respostas td.emails { white-space: normal; word-break: break-word; font-size: .8rem; color: var(--suave); line-height: 1.35; }
.tabela-respostas th:nth-child(1), .tabela-respostas td:nth-child(1) { width: 27%; }
.tabela-respostas th:nth-child(2), .tabela-respostas td:nth-child(2) { width: 40%; }
.tabela-respostas th:nth-child(3), .tabela-respostas td:nth-child(3) { width: 11%; }
.tabela-respostas th:nth-child(4), .tabela-respostas td:nth-child(4) { width: 13%; }
.tabela-respostas th:nth-child(5), .tabela-respostas td:nth-child(5) { width: 9%; }
.paginas { display: flex; gap: 12px; align-items: center; justify-content: center; padding: 12px 0 2px; }
.btn.desligado { opacity: .4; pointer-events: none; }

/* Lista paginada e filtrada no servidor (componentes/lista.html; Romeu, 07/10/2026): a caixa «Buscar» cresce, a contagem
   «Mostrando 1–50 de 1.234» à esquerda, os números no meio e o «Por página» à direita; no celular, um embaixo do outro. */
.lista-filtros .lista-busca { flex: 1 1 260px; max-width: 460px; }
.lista-filtros .lista-busca input { width: 100%; }
.lista-paginas { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
  padding: 12px 0 2px; }
.lista-conta { margin: 0; color: var(--e-suave, var(--suave)); }
.lista-conta b { color: var(--e-tinta, var(--tinta)); font-weight: 650; font-variant-numeric: tabular-nums; }
.lista-paginas .lista-nums { padding: 0; gap: 4px; flex-wrap: wrap; }
.lista-nums a:not(.btn) { min-width: 30px; padding: 4px 8px; border-radius: 6px; text-align: center;
  color: var(--e-tinta, var(--tinta)); text-decoration: none; font-variant-numeric: tabular-nums; }
.lista-nums a:not(.btn):hover { background: var(--verde-fundo); }
.lista-nums a.on { background: var(--verde-claro); color: var(--verde-esc); font-weight: 650; }
.lista-por { display: flex; align-items: center; gap: 8px; margin: 0; }
.lista-por label { margin: 0; font-weight: 400; color: var(--e-suave, var(--suave)); }
.lista-por select { width: auto; min-height: var(--ctl-h-peq, 30px); }
th .th-ordem { color: inherit; text-decoration: none; }
th .th-ordem:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .lista-paginas { flex-direction: column; align-items: stretch; }
  .lista-paginas .lista-nums { justify-content: center; }
  .lista-filtros .lista-busca { max-width: none; flex-basis: 100%; }
  .lista-filtros .lista-busca input { font-size: 16px; }
}

/* Ligações e Caixa de saída: tudo dentro do quadro branco, sem rolagem lateral */
.tabela-ligacoes, .tabela-enviados { table-layout: fixed; width: 100%; }
.tabela-ligacoes td, .tabela-enviados td { overflow: hidden; text-overflow: ellipsis; }
.tabela-ligacoes td, .tabela-ligacoes th { white-space: normal; word-break: break-word; }
.tabela-ligacoes th:nth-child(1), .tabela-ligacoes td:nth-child(1) { width: 13%; }
.tabela-ligacoes th:nth-child(2), .tabela-ligacoes td:nth-child(2) { width: 24%; }
.tabela-ligacoes th:nth-child(3), .tabela-ligacoes td:nth-child(3) { width: 17%; }
.tabela-ligacoes th:nth-child(4), .tabela-ligacoes td:nth-child(4) { width: 9%; }
.tabela-ligacoes th:nth-child(5), .tabela-ligacoes td:nth-child(5) { width: 12%; }
.tabela-ligacoes th:nth-child(6), .tabela-ligacoes td:nth-child(6) { width: 25%; }
.tabela-enviados th:nth-child(1), .tabela-enviados td:nth-child(1) { width: 9%; }
.tabela-enviados th:nth-child(2), .tabela-enviados td:nth-child(2) { width: 12%; }
.tabela-enviados th:nth-child(3), .tabela-enviados td:nth-child(3) { width: 17%; }
.tabela-enviados th:nth-child(4), .tabela-enviados td:nth-child(4) { width: 12%; }
.tabela-enviados th:nth-child(5), .tabela-enviados td:nth-child(5) { width: 8%; }
.tabela-enviados th:nth-child(6), .tabela-enviados td:nth-child(6) { width: 15%; }
.tabela-enviados th:nth-child(7), .tabela-enviados td:nth-child(7) { width: 9%; }
.tabela-enviados th:nth-child(8), .tabela-enviados td:nth-child(8) { width: 18%; }
.tabela-enviados td { white-space: normal; word-break: break-word; }
audio { width: 100%; max-width: 100%; height: 32px; display: block; }
.baixar { display: inline-block; margin-top: 4px; font-size: .78rem; font-weight: 600; color: var(--verde-esc); text-decoration: none; }
.baixar:hover { text-decoration: underline; }

.quem-ligou summary { cursor: pointer; display: flex; gap: 12px; align-items: center; list-style: none; }
.quem-ligou summary::-webkit-details-marker { display: none; }
.quem-ligou summary .abrir { margin-left: auto; color: var(--verde-esc); font-weight: 600; }
.quem-ligou[open] summary .abrir::after { content: ""; }

/* números compactos no canto, para sobrar tela para a lista */
.kpis-mini { display: flex; gap: 16px; justify-content: flex-end; flex-wrap: wrap; margin: 0 0 14px; padding: 8px 12px; background: var(--e-cartao, #fff); border: 1px solid var(--linha); border-radius: var(--raio); font-size: .84rem; color: var(--suave); }
.kpis-mini b { font-size: 1.05rem; color: var(--tinta); }
.kpis-mini .falha b { color: var(--vermelho); }
@media (max-width: 900px) { .kpis-mini { margin-top: 4px; justify-content: flex-start; } }

.troca-carteira { text-decoration: none; color: var(--verde-esc); font-weight: 600; white-space: nowrap; }
.troca-carteira:hover { text-decoration: underline; }

/* menu "Busca": os canais de cobrança ficam agrupados */
.menu-drop { position: relative; }
.menu-topo { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 8px; font-weight: 600; color: var(--e-suave, #39493f); cursor: default; white-space: nowrap; }
.menu-drop.on .menu-topo, .menu-drop:hover .menu-topo { background: var(--verde-claro); color: var(--verde-esc); }
.menu-itens { display: none; position: absolute; top: 100%; left: 0; min-width: 180px; background: var(--e-cartao, #fff); border: 1px solid var(--linha); border-radius: 10px; box-shadow: 0 6px 18px rgba(0,60,30,.12); padding: 6px; z-index: 30; }
.menu-drop:hover .menu-itens, .menu-drop:focus-within .menu-itens { display: block; }
.menu-itens a { display: block; padding: 7px 10px; border-radius: 7px; text-decoration: none; color: var(--tinta); font-weight: 500; }
.menu-itens a:hover { background: var(--verde-fundo); }
.menu-itens a.on { background: var(--verde-claro); color: var(--verde-esc); font-weight: 600; }

/* ================================================================== TEMA ESCURO (05/10/2026, pedido do Romeu)
   Padrão de fábrica: o CLARO de sempre. O escuro é escolha de cada pessoa, na abinha do canto inferior direito
   (templates/_temas.html); o script síncrono do <head> (templates/_tema_cabeca.html) põe data-tema="escuro" no
   <html> antes do primeiro desenho, sem piscar.

   COMO O CLARO FICA IDÊNTICO: as cores fixas dos CSS viraram `var(--e-<papel>, <a cor de hoje>)`. Os tokens `--e-*`
   NÃO existem no claro — então vale a reserva, que é exatamente a cor que estava ali. Só o bloco abaixo os define.
   Cor nova num CSS: escreva assim também (`background: var(--e-cartao, #fff)`), escolhendo o papel:
     --e-cartao (superfície), --e-cartao-2 (superfície quase branca), --e-campo (campo de formulário),
     --e-sutil / --e-sutil-2 (cinzas de selo e trilho), --e-veu (branco translúcido de barra fixa),
     --e-tinta / --e-suave / --e-apagado (texto), --e-linha / --e-linha-forte (borda),
     --e-<verde|amarelo|vermelho|azul|roxo>-f / -b / -t (fundo, borda e texto de cada cor de estado),
     --e-<token>-forte (fundo SÓLIDO com texto branco: no escuro o token de texto clareia e o branco sumiria).
   Os tokens de sempre (--tinta, --suave, --linha, --branco, --verde-*…) mudam de valor aqui, sob o mesmo nome.
   Só na TELA (@media screen): imprimir sai sempre no claro. Contraste AA conferido (texto ≥ 4,5:1 no cartão). */
@media screen {
  :root[data-tema="escuro"] {
    color-scheme: dark;
    --verde-fundo: #0f1613; --branco: #17211c; --verde-claro: #183a29; --linha: #2c3a33;
    --tinta: #e3ebe6; --suave: #a3b4aa; --verde-esc: #7fe0aa;
    --amarelo: #e3a948; --amarelo-f: #3b2f15; --vermelho: #ff8577; --vermelho-f: #42201c;
    --azul: #8cbfff; --azul-f: #172a40;
    --e-cartao: #17211c; --e-cartao-2: #1a2520; --e-campo: #111a15; --e-sutil: #233029; --e-sutil-2: #34443b;
    --e-veu: rgba(23, 33, 28, .94);
    --e-tinta: #e3ebe6; --e-suave: #a3b4aa; --e-apagado: #869890;
    --e-linha: #2c3a33; --e-linha-forte: #435549;
    --e-verde-f: #183a29;    --e-verde-b: #2e6248;    --e-verde-t: #7fe0aa;
    --e-amarelo-f: #3b2f15;  --e-amarelo-b: #6b5524;  --e-amarelo-t: #f2c66d;
    --e-vermelho-f: #42201c; --e-vermelho-b: #7a3830; --e-vermelho-t: #ff9a8e;
    --e-azul-f: #172a40;     --e-azul-b: #2f5680;     --e-azul-t: #93c5ff;
    --e-roxo-f: #2b2242;     --e-roxo-b: #57478a;     --e-roxo-t: #cdb6f5;
    --e-verde-esc-forte: #04522d; --e-vermelho-forte: #b0362a; --e-amarelo-forte: #94600f;
    --e-azul-forte: #1f5f99; --e-tinta-forte: #2c3c34;
  }
  /* as marcas trocam os tons --verde* no <body> (marcas.css): no escuro, os tons escuros de cada uma */
  :root[data-tema="escuro"] body.tema-cedusp   { --verde: #4a8dd6; --verde-esc: #a9c9f2; --verde-claro: #1a2c44;
                                                 --verde-fundo: #0f141b; --e-verde-esc-forte: #16355c; }
  :root[data-tema="escuro"] body.tema-prezecor { --verde: #6a80e2; --verde-esc: #b5c1f5; --verde-claro: #1f2550;
                                                 --verde-fundo: #10121c; --e-verde-esc-forte: #1d2b68; }
  :root[data-tema="escuro"] body.tema-laborpro { --verde: #3a92bd; --verde-esc: #9fd3ec; --verde-claro: #16303e;
                                                 --verde-fundo: #0e1519; --e-verde-esc-forte: #0d3346; }

  /* o logo é desenhado para fundo branco: no topo escuro ele fica branco, como na barra dos módulos */
  :root[data-tema="escuro"] body:not(.com-barra) .topo img { filter: brightness(0) invert(1); opacity: .92; }
  :root[data-tema="escuro"] .topo .marca-nome { color: var(--verde-esc); }
  /* a entrada (esteira) já é escura na cor da marca: no escuro ela só fica mais funda */
  :root[data-tema="escuro"] body.entrada { background: #07170f;
    --fundo: color-mix(in srgb, var(--fundo-marca, var(--marca, #0b5c3f)) 52%, #000); }
  :root[data-tema="escuro"] body.entrada .posto, :root[data-tema="escuro"] body.entrada .modulo {
    box-shadow: 0 8px 22px rgba(0, 0, 0, .4); }
  :root[data-tema="escuro"] .menu-itens { box-shadow: 0 8px 22px rgba(0, 0, 0, .5); }
}