/* O visual novo: a BASE do sistema inteiro (05/10/2026, pedido do Romeu: «usa os 2 repositórios de habilidades … para
   ficar com o visual e design no sistema mais organizado»). Regras tiradas das skills do projeto
   (.claude/skills/ui-sem-generico e ux-telas-de-operacao): um tamanho de controle, um primário por bloco com
   contraste AA, foco visível, cabeçalho de tabela legível, linhas zebradas, estados vazio/carregando/erro.

   SÓ com o interruptor dos temas (app/temas.py): o base.html só pede este arquivo com `temas_ligados`, e TODA regra
   começa por `:where(:root[data-visual="novo"])` (peso zero: a regra de um módulo, mais específica ou carregada
   depois, continua mandando) ou por `:root[data-visual="novo"]` quando precisa vencer o style.css. Desligado (a
   produção, até o Romeu aprovar), a página sai byte a byte como antes. O teste_visual_novo.py confere.

   Não entra na casca da assistente (ela não usa o base.html): o chat tem o seu próprio CSS. */

/* ------------------------------------------------------------------ tokens (no <body>: as marcas trocam --verde ali) */
:root[data-visual="novo"] body {
  /* espaço: degraus de 4 px */
  --v-esp-1: 4px; --v-esp-2: 8px; --v-esp-3: 12px; --v-esp-4: 16px; --v-esp-5: 24px; --v-esp-6: 32px;
  /* raio: controle, cartão, gaveta; pílula só em selo e chip */
  --v-raio-ctrl: 8px; --v-raio: 10px; --v-raio-grande: 14px; --v-raio-pilula: 999px;
  /* sombra: só para o que flutua (menu, popup); cartão no chão não tem sombra */
  --v-sombra-1: 0 1px 2px rgba(16, 32, 24, .06), 0 4px 12px rgba(16, 32, 24, .08);
  --v-sombra-2: 0 12px 32px rgba(16, 32, 24, .20);
  /* altura dos controles lado a lado (botão, campo, select): normal e compacto (.peq, dentro de tabela) */
  --ctl-h: 36px; --ctl-h-peq: 30px;
  /* o fundo do botão primário: a cor da marca escurecida até o branco passar de 4,5:1 (o #00a859 da Pró dá 3,1:1;
     com 72 % fica #00793f, 5,3:1; nas outras marcas e no escuro também passa) */
  --v-acao: color-mix(in srgb, var(--verde) 72%, #000);
  --v-foco: var(--verde-esc);
  /* tabela: zebra neutra, passada do mouse na cor da marca (as duas distinguíveis entre si e da linha selecionada,
     que cada módulo pinta com a cor cheia dele). A zebra era 4 % de tinta (255 contra 246 no claro: na tela da
     Permissões não se via); com 8 % a diferença passa de 16 pontos de brilho. O cabeçalho (--v-cab) é a marca a 9 % sobre
     o cartão: se destaca da zebra pela cor, e não só pelo tom. O acrílico redefine os três (temas.css). */
  --v-zebra: color-mix(in srgb, var(--tinta) 8%, transparent);
  --v-linha-hover: color-mix(in srgb, var(--verde) 16%, transparent);
  --v-cab: color-mix(in srgb, var(--verde) 9%, var(--branco, #fff));
}
/* escuro: a tinta já é clara (soma ao fundo); o cabeçalho era o --verde-fundo (#0f1613), mais escuro que o cartão */
:root[data-visual="novo"][data-tema="escuro"] body { --v-cab: color-mix(in srgb, #fff 9%, var(--branco, #17211c)); }

/* ------------------------------------------------------------------ cor de texto que não passava no AA (claro) */
/* --amarelo #b7791f dá 3,3:1 sobre o --amarelo-f; #8a5a0f dá 5,4:1 (o escuro já tem os tons dele) */
:root[data-visual="novo"]:not([data-tema="escuro"]) body { --amarelo: #8a5a0f; }
/* «não realiza» e textos apagados: #9aa7a0 dá 2,5:1 no branco; #6a786f dá 4,6:1 */
:where(:root[data-visual="novo"]:not([data-tema="escuro"])) :is(tr.nao-realiza td, .etapas .quando) { color: #6a786f; }

/* ------------------------------------------------------------------ texto e títulos */
:where(:root[data-visual="novo"]) h1 { letter-spacing: -.01em; margin-bottom: var(--v-esp-3); }
:where(:root[data-visual="novo"]) .card > h2:first-child { margin-bottom: var(--v-esp-3); }
:where(:root[data-visual="novo"]) .ajuda { max-width: 90ch; }
:where(:root[data-visual="novo"]) body { accent-color: var(--verde); }
:where(:root[data-visual="novo"]) ::selection { background: color-mix(in srgb, var(--verde) 26%, transparent); }

/* ------------------------------------------------------------------ controles: um tamanho só, sem pulo de estado */
:where(:root[data-visual="novo"]) .btn {
  min-height: var(--ctl-h); padding-block: 0; line-height: 1.2; justify-content: center; box-sizing: border-box;
  border-radius: var(--v-raio-ctrl); background: var(--v-acao); border-color: var(--v-acao);
  vertical-align: middle; }
:where(:root[data-visual="novo"]) .btn.peq, :where(:root[data-visual="novo"]) table .btn {
  min-height: var(--ctl-h-peq); }
:where(:root[data-visual="novo"]) .btn svg { flex: none; width: 1em; height: 1em; }
:where(:root[data-visual="novo"]) .btn:is(:disabled, [aria-disabled="true"]) { opacity: .5; cursor: not-allowed; }
/* alerta (amarelo cheio): branco sobre #b7791f dá 3,2:1; o tom escuro dá 5,1:1 */
:root[data-visual="novo"]:not([data-tema="escuro"]) .btn.alerta { background: #94600f; border-color: #94600f; }
/* LADO A LADO, a mesma altura (varredura de 05/10/2026: badge 26 px, link 30,7, Sair 34, select 28 no mesmo
   cabeçalho; filtro com campo 38, select 36 e botão 40). Numa fileira de controles (.acoes, .filtros), tudo tem a
   altura da fileira: 36 px, ou 30 px quando ela é compacta (tem um .btn.peq); selo e chip ali entram centrados. */
:where(:root[data-visual="novo"]) :is(.acoes, .filtros, .ba-topo) { --linha-h: var(--ctl-h); align-items: center; }
:where(:root[data-visual="novo"]) :is(.acoes, .filtros):has(> .btn.peq, > * > .btn.peq) { --linha-h: var(--ctl-h-peq); }
/* fileira de filtros com o rótulo EM CIMA do campo: centrar a caixa inteira (rótulo + campo) deixava o botão, o chip e a
   caixa de marcar no meio do rótulo, acima dos campos (Romeu, 06/10/2026: «deixa vertical middle»). Pelo pé, com
   todos na altura da fileira, os controles ficam centrados entre si na mesma linha. */
:where(:root[data-visual="novo"]) .filtros:has(> div > label + :is(input, select)) { align-items: end; }
:where(:root[data-visual="novo"]) :is(.acoes, .filtros, .ba-topo) > :is(.btn, .chip, .selo, button),
:where(:root[data-visual="novo"]) :is(.acoes, .filtros) > :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]), select),
:where(:root[data-visual="novo"]) :is(.acoes, .filtros) > div > :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]), select, .btn) {
  height: var(--linha-h); min-height: var(--linha-h); box-sizing: border-box; }
/* formulário de uma linha com botão compacto (urgência da Busca Ativa, filtros do Cardio e das Concluídas): o campo
   acompanha o botão; e, numa fileira compacta, todo botão tem a letra e o recuo do compacto */
:where(:root[data-visual="novo"]) form:has(> .btn.peq) > :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]), select) {
  height: var(--ctl-h-peq); }
:where(:root[data-visual="novo"]) :is(.acoes, .filtros, form):has(> .btn.peq) > .btn:not(.peq) {
  height: var(--ctl-h-peq); min-height: var(--ctl-h-peq); padding-inline: 10px; font-size: .85rem; }
:where(:root[data-visual="novo"]) :is(.acoes, .filtros, .ba-topo) > :is(.chip, .selo) {
  display: inline-flex; align-items: center; padding-block: 0; }
/* o cabeçalho: link, nome, Sair, empresa e os botões redondos com 34 px (38 px no menu de etapas da Emissão, que tem
   rótulo de duas linhas) */
:where(:root[data-visual="novo"]) .topo nav { --topo-h: 34px; align-items: center; }
/* o cabeçalho de hoje só aparece, no visual novo, nas telas sem a sidebar (o link público aberto por quem está logado,
   a confirmação do código do médico): com 8 px em cima e embaixo ele fica em 61 px, na medida da barra nova (≤ 64) */
:where(:root[data-visual="novo"]) .topo .in { padding-block: 8px; }
:where(:root[data-visual="novo"]) .topo nav:has(.em-passo-nav) { --topo-h: 38px; }
:where(:root[data-visual="novo"]) .topo nav > :is(a, .quem-badge, .ba-sino, .ba-perm, .ba-eu),
:where(:root[data-visual="novo"]) .topo nav > .menu-drop > .menu-topo,
:where(:root[data-visual="novo"]) .topo nav :is(.troca-empresa select, select, input:not([type=hidden])) {
  min-height: var(--topo-h); box-sizing: border-box; }
:where(:root[data-visual="novo"]) .topo nav > :is(a, .quem-badge) { display: inline-flex; align-items: center; }
:where(:root[data-visual="novo"]) .topo nav :is(.troca-empresa select, select) { height: var(--topo-h); }
:where(:root[data-visual="novo"]) .topo nav > a.sair-icone { width: var(--topo-h); height: var(--topo-h); }
/* cartões de uma mesma grade: a mesma altura na linha */
:where(:root[data-visual="novo"]) .grade > :is(.c2, .c3, .c4, .c5, .c6, .c8):has(> .card:only-child) {
  display: flex; flex-direction: column; }
:where(:root[data-visual="novo"]) .grade > :is(.c2, .c3, .c4, .c5, .c6, .c8) > .card:only-child { flex: 1; }
/* WhatsApp: branco sobre #1f8f4e dá 4,1:1; #17733f dá 5,9:1 */
:root[data-visual="novo"] .btn.whats { background: #17733f; border-color: #17733f; }
/* campo e select de uma linha: a mesma altura do botão ao lado */
:where(:root[data-visual="novo"]) :is(input:not([type]), input[type=text], input[type=email], input[type=password],
  input[type=date], input[type=number], input[type=search], input[type=tel], input[type=time], input[type=url],
  input[type=datetime-local], input[type=month], select:not([multiple]):not([size])) {
  height: var(--ctl-h); padding-block: 0; line-height: normal; border-radius: var(--v-raio-ctrl); box-sizing: border-box; }
:where(:root[data-visual="novo"]) table :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select) {
  height: var(--ctl-h-peq); }
/* mês, hora, telefone, endereço: o style.css não os vestia e o navegador desenhava o dele (branco fixo no escuro) */
:where(:root[data-visual="novo"]) :is(input[type=tel], input[type=time], input[type=url], input[type=month],
  input[type=week], input[type=datetime-local]) {
  padding-inline: 10px; border: 1px solid var(--e-linha-forte, #c5d3ca); background: var(--e-campo, #fff);
  color: var(--tinta); font: inherit; }
:where(:root[data-visual="novo"]) textarea { border-radius: var(--v-raio-ctrl); }
/* chip, selo e abas: estado por cor, nunca por borda que surge ou negrito que alarga */
:where(:root[data-visual="novo"]) .chip { min-height: var(--ctl-h-peq); box-sizing: border-box; }
:where(:root[data-visual="novo"]) .selo { line-height: 1.45; vertical-align: middle; }
:where(:root[data-visual="novo"]) .abas a { font-weight: 600; }

/* número/contador com letra branca sobre o verde da marca: o mesmo fundo do primário (3,1:1 → 5,3:1) */
:where(:root[data-visual="novo"]) :is(.num, .etapas li.feito .bola) { background: var(--v-acao); border-color: var(--v-acao); }
:root[data-visual="novo"] .topo nav a.em-passo-nav.on .em-passo-num { background: var(--v-acao); }
/* a bolinha «feito» da trilha da guia (Emissão) e a «atual»: ✓ branco sobre o verde da marca dava 3,1:1, e o número em
   verde sobre o cartão, 2,7:1 (varredura de 06/10/2026) */
:root[data-visual="novo"] .fx-ok .fx-bola { background: var(--v-acao); box-shadow: 0 0 0 1px var(--v-acao); }
:root[data-visual="novo"] .fx-atual .fx-bola { color: var(--verde-esc); }
/* o número grande do indicador «verde»: o tom escuro do papel (o verde da marca dá 2,3:1 sobre o vidro) */
:root[data-visual="novo"] .kpi .v.verde { color: var(--verde-esc); }
/* o cabeçalho na cor da marca: nome do módulo e os subtítulos do menu legíveis sobre ela (o subtítulo da Emissão
   vinha em --suave, cinza-escuro sobre verde-escuro: 1,1:1) */
:root[data-visual="novo"] body.com-barra .marca-mod { color: rgba(255, 255, 255, .92); }
:root[data-visual="novo"] body.com-barra .topo nav a small { color: rgba(255, 255, 255, .95); }

/* ------------------------------------------------------------------ foco visível (3:1 contra o fundo, nos dois temas) */
:where(:root[data-visual="novo"]) :is(a, button, summary, [tabindex]:not([tabindex="-1"]), .btn):focus-visible {
  outline: 2px solid var(--v-foco); outline-offset: 2px; }
:where(:root[data-visual="novo"]) .unidade-btn:focus-visible { outline: 2px solid var(--v-foco); outline-offset: 2px; }
/* a abinha de aparência trazia amarelo (#ffd166: 1,4:1 sobre o branco da página) */
:root[data-visual="novo"] .tm-aba:focus-visible, :root[data-visual="novo"] .tm-foto:focus-visible {
  outline-color: var(--v-foco); }

/* ------------------------------------------------------------------ tabelas: cabeçalho legível, zebra, passada */
:where(:root[data-visual="novo"]) table.t th { text-transform: none; letter-spacing: 0; font-weight: 650; background: var(--v-cab); }
:where(:root[data-visual="novo"]) .kpi .r { text-transform: none; letter-spacing: 0; font-weight: 600; }
/* ZEBRA de toda tabela de dados. O seletor INTEIRO dentro de :where() (peso zero): a linha que o módulo pinta —
   grupo, selecionada, atrasada — vence sempre. Sem <thead>, a 1ª linha é o cabeçalho e conta como ímpar: a zebra
   recomeça para a 1ª linha de dados ficar lisa, como nas tabelas com <thead>. */
:where(:root[data-visual="novo"] table:not(.ficha):not([class*="fp-"]):not(.rom-linhas) tr:nth-child(even) > td) { background-color: var(--v-zebra); }
:where(:root[data-visual="novo"] table:not(.ficha):not([class*="fp-"]):not(.rom-linhas) tr:first-child:has(> th):not(:has(> td)) ~ tr:nth-child(even) > td) {
  background-color: transparent; }
:where(:root[data-visual="novo"] table:not(.ficha):not([class*="fp-"]):not(.rom-linhas) tr:first-child:has(> th):not(:has(> td)) ~ tr:nth-child(odd) > td) {
  background-color: var(--v-zebra); }
/* listas que se comportam como tabela (linha = nome, valor, explicação): a mesma zebra. :nth-of-type porque o título
   do cartão (h2) vem antes das linhas e desalinharia a conta; o respiro lateral vale para todas, para o texto não pular. */
:root[data-visual="novo"] :is(.dp-ind, .ficha-item, ul.historico > li) { padding-inline: var(--v-esp-2); }
:where(:root[data-visual="novo"] :is(.dp-ind:nth-of-type(even), .ficha-item:nth-of-type(even), ul.historico > li:nth-child(even))) {
  background-color: var(--v-zebra); }
/* a passada do mouse vem depois da zebra (mesmo peso: vale a ordem) e é mais forte que ela */
:where(:root[data-visual="novo"] table:not(.ficha):not([class*="fp-"]):not(.rom-linhas) tr:has(> td):hover > td) { background-color: var(--v-linha-hover); }
:where(:root[data-visual="novo"]) tr[onclick] { cursor: pointer; }
/* as passadas próprias da Busca Ativa e do datagrid dos Agendamentos tinham quase o tom da zebra */
:root[data-visual="novo"] :is(.ba-tabela, .ag-dg) tr:hover td { background: var(--v-linha-hover); }

/* ------------------------------------------------------------------ o que flutua */
:where(:root[data-visual="novo"]) .menu-itens { box-shadow: var(--v-sombra-1); }
:where(:root[data-visual="novo"]) dialog { border-radius: var(--v-raio-grande); box-shadow: var(--v-sombra-2); }

/* ------------------------------------------------------------------ estados (o componente mora no style.css) */
:where(:root[data-visual="novo"]) .vazio { color: var(--suave); }

/* ------------------------------------------------------------------ movimento: quem pediu menos, recebe menos */
@media (prefers-reduced-motion: reduce) {
  :where(:root[data-visual="novo"]) .robo-luz { animation: none; }
}