/* Design system do flow (modelo 3), dentro do app.
   Gerado por scripts/design/montar_ds_css.py a partir de docs/design/sistema/ui.css e dominio/*.css.
   Não edite este arquivo: mude a fonte e rode o script de novo. */

/* Flow · modelo 3 — componentes base (camada 1).
   Lê só os tokens (tokens.css, gerado de tokens.json). Nenhum hex, nenhum px de cor aqui.
   Prefixo ui-. Estado por atributo ARIA quando existe (aria-current, aria-selected, aria-pressed,
   aria-invalid, aria-sort, aria-expanded), senão por classe esta-* (esta-ativo, esta-carregando…).
   Modificador: ui-x--y. Parte: ui-x__y. */

/* ── Densidade ─────────────────────────────────────────────────────────────
   Toque é o padrão (o 3 nasceu no celular). Mesa vale dentro de tabela e de [data-densidade="mesa"],
   só com mouse: no celular (pointer: coarse) volta a ser toque. */
:root,
[data-densidade="toque"] {
  --alvo: var(--alvo-toque);
  --chip: var(--chip-toque);
  --linha-min: var(--linha-toque);
  --celula: var(--celula-toque);
  --dado: var(--dado-toque);
}
[data-densidade="mesa"],
.ui-tabela {
  --alvo: var(--alvo-mesa);
  --chip: var(--chip-mesa);
  --linha-min: var(--linha-mesa);
  --celula: var(--celula-mesa);
  --dado: var(--dado-mesa);
}
.ui-tabela[data-densidade="toque"] {
  --alvo: var(--alvo-toque);
  --chip: var(--chip-toque);
  --linha-min: var(--linha-toque);
  --celula: var(--celula-toque);
  --dado: var(--dado-toque);
}
@media (pointer: coarse) {
  [data-densidade="mesa"],
  .ui-tabela {
    --alvo: var(--alvo-toque);
    --chip: var(--chip-toque);
    --linha-min: var(--linha-toque);
    --celula: var(--celula-toque);
    --dado: var(--dado-toque);
  }
}

/* ── Contêineres: os componentes de conteúdo mudam pela largura de onde estão, não da janela
   (uma tabela na gaveta de 560 px já vira cartões). A casca põe ui-conteudo no <main>. */
.ui-conteudo, .ui-gaveta__corpo { container-type: inline-size; }

/* ── Base da página ────────────────────────────────────────────────────── */
:root, [data-theme="claro"] { color-scheme: light; }
[data-theme="escuro"] { color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
:where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
:where(ul, ol) { list-style: none; }
:where(button, input, select, textarea) { font: inherit; color: inherit; margin: 0; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
::selection { background: var(--marca-suave); color: var(--tinta); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
.ui-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ui-apoio { font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.ui-fraco { color: var(--tinta-3); }
.ui-mono { font-family: var(--font-mono); font-size: 14px; }

/* ── Ícone ─────────────────────────────────────────────────────────────────
   <svg class="ui-icone" viewBox="0 0 24 24" aria-hidden="true">…filhos do Lucide…</svg>
   Tamanhos: padrão 20, --p 16, --g 24. Sempre currentColor; nunca sozinho num botão sem nome. */
.ui-icone {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ui-icone--p { width: 16px; height: 16px; }
.ui-icone--g { width: 24px; height: 24px; }
.ui-gira { animation: ui-gira 0.9s linear infinite; }
@keyframes ui-gira { to { transform: rotate(360deg); } }

/* ── Redondo: ícone num círculo (lista, veredito, estado vazio) ──────────
   <span class="ui-redondo ui-redondo--ok"><svg class="ui-icone">…</svg></span>   --g = 64 px */
.ui-redondo {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--raio-pilula);
  background: var(--superficie-suave); color: var(--tinta-2);
}
.ui-redondo--g { width: 64px; height: 64px; font-size: 22px; font-weight: 700; }
.ui-redondo--marca { background: var(--marca-suave); color: var(--marca); }
.ui-redondo--ok { background: var(--ok-fundo); color: var(--ok); }
.ui-redondo--atencao { background: var(--atencao-fundo); color: var(--atencao); }
.ui-redondo--perigo { background: var(--perigo-fundo); color: var(--perigo); }
.ui-redondo--info { background: var(--info-fundo); color: var(--info); }
.ui-redondo--ia { background: var(--ia-fundo); color: var(--ia); }

/* ══ AÇÃO ═════════════════════════════════════════════════════════════════ */

/* Botão
   <button class="ui-botao ui-botao--primario" type="button">
     <svg class="ui-icone">…</svg> Cobrar R$ 99,90 <kbd class="ui-tecla">C</kbd></button>
   Variantes: --primario (uma por área), --secundario, --fantasma, --perigo. --icone (quadrado, exige
   aria-label), --largo (100%). Carregando: class="esta-carregando" + aria-busy="true" + ícone
   loader-circle com ui-gira; o texto muda para o que está acontecendo ("Cobrando…").
   Desligado: disabled + o motivo ESCRITO ao lado (ver .ui-desligado). */
.ui-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-height: var(--alvo); padding: 0 var(--esp-5);
  border: 1px solid transparent; border-radius: var(--raio-m);
  background: var(--superficie-suave); color: var(--tinta);
  font-size: 16px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none;
  white-space: nowrap; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.ui-botao--primario { background: var(--marca); color: var(--sobre-marca); }
.ui-botao--primario:hover { background: var(--marca-forte); }
.ui-botao--secundario { background: var(--superficie-suave); border-color: var(--linha-media); color: var(--tinta); }
.ui-botao--secundario:hover { background: var(--superficie-suave-forte); border-color: var(--linha-forte); }
.ui-botao--fantasma { background: transparent; color: var(--marca); }
.ui-botao--fantasma:hover { background: var(--marca-suave); color: var(--marca-forte); }
.ui-botao--perigo { background: var(--perigo); color: var(--sobre-perigo); }
.ui-botao--perigo:hover { background: var(--perigo-forte); }
/* Perigo suave: a ação que apaga ou cancela, na linha ou no cartão. Ela abre a Janela de confirmação, e só lá o botão é o
   --perigo cheio. Assim a tela não grita vermelho em toda linha. */
.ui-botao--perigo-suave { background: var(--superficie); color: var(--perigo); border-color: var(--perigo-linha); }
.ui-botao--perigo-suave:hover { background: var(--perigo-fundo); border-color: var(--perigo); }
.ui-botao--icone { width: var(--alvo); padding: 0; }
.ui-botao--largo { width: 100%; white-space: normal; }
.ui-botao[aria-pressed="true"] { background: var(--marca-suave); border-color: var(--marca); color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.ui-botao:disabled,
.ui-botao[aria-disabled="true"] { background: var(--linha); border-color: transparent; color: var(--tinta-2); cursor: not-allowed; box-shadow: none; }
.ui-botao.esta-carregando { cursor: progress; }
.ui-botao.esta-carregando .ui-icone { animation: ui-gira 0.9s linear infinite; }
.ui-botao--primario .ui-tecla { background: transparent; border-color: currentColor; color: inherit; }

/* Ação desligada com motivo: o motivo é texto, porque o celular não mostra title.
   <div class="ui-desligado"><button class="ui-botao ui-botao--primario" disabled aria-describedby="m1">Emitir nota</button>
     <p class="ui-desligado__motivo" id="m1">Falta o CPF do tutor.</p></div> */
.ui-desligado { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--esp-1); }
.ui-desligado__motivo { font-size: 14px; line-height: 1.45; color: var(--tinta-2); }

/* Fila de botões: o primário fica por último no computador e em cima no celular.
   <div class="ui-acoes"> …botões… </div>   --fim alinha à direita */
.ui-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); }
.ui-acoes--fim { justify-content: flex-end; }
@container (max-width: 560px) {
  .ui-acoes--pilha { flex-direction: column-reverse; align-items: stretch; }
  .ui-acoes--pilha > .ui-botao { width: 100%; }
}

/* Tecla  <kbd class="ui-tecla">Ctrl K</kbd>. Atalhos só os principais (decisão de 16/10): o Ctrl K da paleta e as teclas dentro dela. */
.ui-tecla {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 7px;
  border: 1px solid var(--linha-media); border-bottom-width: 2px; border-radius: var(--raio-p);
  background: var(--superficie); color: var(--tinta-2);
  font-family: var(--font-sans); font-size: 13px; font-weight: 700; line-height: 1;
}

/* Interruptor (liga/desliga que vale na hora)
   <label class="ui-opcao"><input type="checkbox" role="switch" class="ui-interruptor" checked> Avisar o tutor</label> */
.ui-interruptor {
  appearance: none; flex: none; position: relative;
  width: 44px; height: 26px; border-radius: var(--raio-pilula);
  background: var(--fundo-barra); border: 1px solid var(--linha-forte); cursor: pointer;
  transition: background-color 0.15s ease;
}
.ui-interruptor::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: var(--raio-pilula);
  background: var(--superficie); box-shadow: var(--sombra); border: 1px solid var(--linha-forte);
  transition: transform 0.15s ease;
}
.ui-interruptor:checked { background: var(--marca); border-color: var(--marca); }
.ui-interruptor:checked::after { transform: translateX(18px); border-color: var(--marca); }
.ui-interruptor:disabled { opacity: 0.55; cursor: not-allowed; }

/* Segmentos (escolha de 2 a 4 opções que muda a vista: dia/semana/mês, claro/escuro)
   <div class="ui-segmentos" role="group" aria-label="Período">
     <button class="ui-segmentos__item" aria-pressed="true">Dia</button> … </div> */
.ui-segmentos {
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: var(--raio-m); background: var(--superficie-suave); border: 1px solid var(--linha);
}
.ui-segmentos__item {
  min-height: calc(var(--alvo) - 8px); padding: 0 var(--esp-4);
  border: 0; border-radius: calc(var(--raio-m) - 3px); background: transparent;
  color: var(--tinta-2); font-weight: 700; cursor: pointer;
}
.ui-segmentos__item:hover { color: var(--tinta); }
.ui-segmentos__item[aria-pressed="true"] { background: var(--superficie); color: var(--marca); box-shadow: var(--sombra), inset 0 0 0 1px var(--linha-media); }

/* ══ CAMPOS ═══════════════════════════════════════════════════════════════
   <div class="ui-campo">
     <label class="ui-campo__rotulo" for="cpf">CPF do tutor <span class="ui-campo__opcional">opcional</span></label>
     <input class="ui-entrada" id="cpf" name="cpf" inputmode="numeric" autocomplete="off" aria-describedby="cpf-ajuda cpf-erro">
     <p class="ui-campo__ajuda" id="cpf-ajuda">Só números; a máscara entra sozinha.</p>
     <p class="ui-campo__erro" id="cpf-erro"><svg class="ui-icone ui-icone--p">circle-alert</svg> CPF com dígito errado.</p>
   </div>
   Erro: aria-invalid="true" na entrada + o __erro presente. Marcamos o OPCIONAL, não o obrigatório.
   Valor sugerido pela IA: class="ui-campo e-sugerido" (ver o composto CampoSugerido). */
.ui-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ui-campo__rotulo { font-size: 14px; line-height: 1.45; font-weight: 700; color: var(--tinta); }
.ui-campo__opcional { font-weight: 400; color: var(--tinta-3); }
.ui-campo__opcional::before { content: "· "; }
.ui-campo__ajuda { font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.ui-campo__erro { display: flex; align-items: flex-start; gap: var(--esp-1); font-size: 14px; line-height: 1.45; font-weight: 700; color: var(--perigo); }
.ui-campo__erro .ui-icone { margin-top: 2px; }
.ui-campo__contagem { align-self: flex-end; font-size: 14px; color: var(--tinta-3); }

.ui-entrada {
  display: block; width: 100%; min-height: var(--alvo); padding: 0 var(--esp-4);
  border: 1px solid var(--linha-forte); border-radius: var(--raio-m);
  background: var(--superficie); color: var(--tinta);
  font-size: 16px; line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea.ui-entrada { min-height: 96px; padding: var(--esp-3) var(--esp-4); resize: vertical; }
.ui-entrada::placeholder { color: var(--tinta-3); }
.ui-entrada:hover { border-color: var(--tinta-2); }
.ui-entrada:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-linha); }
.ui-entrada[aria-invalid="true"] { border-color: var(--perigo); box-shadow: 0 0 0 1px var(--perigo); }
.ui-entrada[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--perigo-linha); }
.ui-entrada:disabled { background: var(--superficie-suave); border-color: var(--linha); color: var(--tinta-3); cursor: not-allowed; }
.ui-entrada[readonly] { background: var(--superficie-suave); border-color: var(--linha); }
.ui-entrada--numero { text-align: right; font-variant-numeric: tabular-nums; }
.ui-entrada--codigo { font-family: var(--font-mono); letter-spacing: 0.08em; }

/* Prefixo e sufixo (R$, %, kg, "dias")
   <div class="ui-afixo"><span class="ui-afixo__texto">R$</span><input class="ui-entrada ui-entrada--numero" inputmode="decimal"></div> */
.ui-afixo { position: relative; display: flex; align-items: center; }
.ui-afixo .ui-entrada { flex: 1; }
.ui-afixo__texto {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center;
  font-weight: 700; color: var(--tinta-2); pointer-events: none;
}
.ui-afixo__texto:first-child { left: var(--esp-4); }
.ui-afixo__texto:first-child ~ .ui-entrada { padding-left: calc(var(--esp-4) + 2.2em); }
.ui-afixo__texto:last-child { right: var(--esp-4); }
.ui-afixo:has(.ui-afixo__texto:last-child) .ui-entrada { padding-right: calc(var(--esp-4) + 2.6em); }

/* Seleção (select nativo; o ícone é um svg irmão)
   <div class="ui-selecao"><select class="ui-entrada">…</select><svg class="ui-icone">chevron-down</svg></div> */
.ui-selecao { position: relative; }
.ui-selecao .ui-entrada { appearance: none; padding-right: calc(var(--esp-4) + 28px); cursor: pointer; }
.ui-selecao > .ui-icone { position: absolute; right: var(--esp-4); top: 50%; transform: translateY(-50%); color: var(--tinta-2); pointer-events: none; }

/* Linha de campos lado a lado (intervalo de repetição, quantidade + unidade, de–até)
   <div class="ui-linha-campos"><input class="ui-entrada" …><span class="ui-linha-campos__sep">a cada</span>… </div> */
.ui-linha-campos { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }
.ui-linha-campos > .ui-entrada,
.ui-linha-campos > .ui-selecao,
.ui-linha-campos > .ui-afixo { flex: 1 1 120px; }
.ui-linha-campos__sep { color: var(--tinta-2); }

/* Caixa e rádio (nativos, desenhados)
   <label class="ui-opcao"><input type="checkbox" class="ui-caixa"> <span>Enviar recibo por e-mail <span class="ui-apoio">…</span></span></label>
   <input type="radio" class="ui-radio"> */
.ui-opcao { display: flex; align-items: flex-start; gap: var(--esp-3); min-height: var(--alvo); padding: calc((var(--alvo) - 24px) / 2) 0; cursor: pointer; }
.ui-opcao > span { display: flex; flex-direction: column; }
.ui-caixa,
.ui-radio {
  appearance: none; flex: none; position: relative; width: 22px; height: 22px; margin: 1px 0 0;
  border: 2px solid var(--linha-forte); background: var(--superficie); cursor: pointer;
}
.ui-caixa { border-radius: calc(var(--raio-p) - 2px); }
.ui-radio { border-radius: var(--raio-pilula); }
.ui-caixa:checked,
.ui-caixa:indeterminate { background: var(--marca); border-color: var(--marca); }
.ui-caixa:checked::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 7px; height: 12px;
  border: solid var(--sobre-marca); border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.ui-caixa:indeterminate::after { content: ""; position: absolute; left: 3px; right: 3px; top: 8px; height: 3px; background: var(--sobre-marca); border-radius: 2px; }
.ui-radio:checked { border-color: var(--marca); box-shadow: inset 0 0 0 4px var(--superficie), inset 0 0 0 10px var(--marca); }
.ui-caixa:disabled, .ui-radio:disabled { opacity: 0.55; cursor: not-allowed; }

/* Chips (escolha rápida, única ou múltipla)
   <div class="ui-chips" role="group" aria-label="Porte">
     <button class="ui-chip" aria-pressed="true"><svg class="ui-icone ui-icone--p ui-chip__ok">check</svg> Pequeno <span class="ui-chip__n">12</span></button> </div>
   Com formulário: <label class="ui-chip"><input type="checkbox" class="ui-oculto" name="porte" value="p"> Pequeno</label> */
.ui-chips { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.ui-chip {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  min-height: var(--chip); padding: 0 18px;
  border: 1px solid var(--linha-media); border-radius: var(--raio-pilula);
  background: var(--superficie); color: var(--tinta);
  font-size: 16px; font-weight: 700; line-height: 1.2; cursor: pointer;
}
.ui-chip:hover { background: var(--superficie-suave); border-color: var(--linha-forte); }
.ui-chip__ok { display: none; }
.ui-chip[aria-pressed="true"],
.ui-chip:has(input:checked) { background: var(--marca-suave); border-color: var(--marca); color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.ui-chip[aria-pressed="true"] .ui-chip__ok,
.ui-chip:has(input:checked) .ui-chip__ok { display: block; }
.ui-chip:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
.ui-chip__n {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px;
  border-radius: var(--raio-pilula); background: var(--superficie-suave); color: var(--tinta-2); font-size: 14px;
}
.ui-chip[aria-pressed="true"] .ui-chip__n { background: var(--superficie); color: var(--marca); }

/* Dias da semana: chips quadrados
   <div class="ui-chips ui-dias">…<label class="ui-chip"><input type="checkbox" class="ui-oculto"> S</label>… </div> */
.ui-dias .ui-chip { min-width: var(--chip); padding: 0; justify-content: center; border-radius: var(--raio-m); }

/* Sim/Não em dois botões grandes (flow_ui::escolha_sim_nao; rádio por baixo, sem script)
   <fieldset class="ui-sn ui-sn--obrig"><legend class="ui-campo__rotulo">A loja abriu?</legend><div class="ui-sn__botoes">
     <label class="ui-sn__op ui-sn__op--sim"><input type="radio" class="ui-oculto" name="p0" value="sim"> Sim</label>
     <label class="ui-sn__op ui-sn__op--nao"><input type="radio" class="ui-oculto" name="p0" value="nao"> Não</label></div></fieldset>
   + <p class="ui-sn-falta" data-total="3"></p> depois das perguntas: o contador "Faltam N de 3" é CSS puro. */
.ui-sn { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-sn > legend { padding: 0; margin-bottom: var(--esp-2); }
.ui-sn__botoes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-3); }
.ui-sn__op {
  position: relative; display: flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-height: var(--alvo-toque); padding: 0 var(--esp-4); box-sizing: border-box;
  border: 2px solid var(--linha-media); border-radius: var(--raio-m); background: var(--superficie); color: var(--tinta);
  font-size: 18px; font-weight: 700; line-height: 1.2; cursor: pointer; user-select: none;
}
.ui-sn__op:hover { background: var(--superficie-suave); border-color: var(--linha-forte); }
.ui-sn__ok { display: none; }
.ui-sn__op:has(input:checked) .ui-sn__ok { display: block; }
.ui-sn__op--sim:has(input:checked) { background: var(--ok); border-color: var(--ok); color: var(--sobre-marca); }
.ui-sn__op--nao:has(input:checked) { background: var(--atencao); border-color: var(--atencao); color: var(--sobre-marca); }
.ui-sn__op:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
form:has(.ui-sn--obrig) { counter-reset: sn-falta; }
.ui-sn--obrig:not(:has(input:checked)) { counter-increment: sn-falta; }
.ui-sn-falta { margin: 0; font-size: 14px; font-weight: 700; color: var(--atencao); }
.ui-sn-falta::before { content: "Faltam " counter(sn-falta) " de " attr(data-total) "."; }
form:not(:has(.ui-sn--obrig:not(:has(input:checked)))) .ui-sn-falta { color: var(--ok); }
form:not(:has(.ui-sn--obrig:not(:has(input:checked)))) .ui-sn-falta::before { content: "Tudo respondido."; }

/* Escolha (opção grande com explicação; rádio por baixo)
   <label class="ui-escolha"><input type="radio" class="ui-oculto" name="forma"> <strong>Pix</strong> <span class="ui-apoio">Na hora, sem taxa.</span></label> */
.ui-escolha {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 14px var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m);
  background: var(--superficie-suave); color: var(--tinta); text-align: left; cursor: pointer;
}
.ui-escolha:hover { background: var(--superficie); border-color: var(--linha-forte); }
.ui-escolha:has(input:checked),
.ui-escolha[aria-pressed="true"] { background: var(--marca-suave); border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.ui-escolha:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
.ui-escolhas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--esp-3); }

/* Envio simples de arquivo
   <input type="file" class="ui-envio" accept=".pdf,.xml"> */
.ui-envio { font-size: 14px; color: var(--tinta-2); }
.ui-envio::file-selector-button {
  min-height: var(--alvo); margin-right: var(--esp-3); padding: 0 var(--esp-5);
  border: 1px solid var(--linha-media); border-radius: var(--raio-m);
  background: var(--superficie-suave); color: var(--tinta); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}
.ui-envio::file-selector-button:hover { background: var(--superficie-suave-forte); }

/* Grupo de campos com a contagem do que falta
   <fieldset class="ui-grupo"><legend class="ui-grupo__titulo">Dados do tutor <span class="ui-grupo__falta">faltam 2</span></legend>
     <div class="ui-grade-campos">…ui-campo…</div></fieldset> */
.ui-grupo { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--esp-4); }
.ui-grupo__titulo { display: flex; align-items: center; gap: var(--esp-3); padding: 0; font-size: 18px; line-height: 1.35; font-weight: 700; }
.ui-grupo__falta { font-size: 14px; font-weight: 700; color: var(--atencao); }
.ui-grupo__falta--ok { color: var(--ok); }
.ui-grade-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--esp-4) var(--esp-5); }
.ui-grade-campos > .ui-campo--largo { grid-column: 1 / -1; }

/* Indicador de salvo (um por tela)
   <p class="ui-salvo" role="status"><span class="ui-salvo__luz"></span> Salvo às 09:42</p>
   esta-salvando: "Salvando…"; esta-erro: "Não salvou · tentar de novo" */
.ui-salvo { display: inline-flex; align-items: center; gap: var(--esp-2); font-size: 14px; color: var(--tinta-2); }
.ui-salvo__luz { width: 8px; height: 8px; border-radius: var(--raio-pilula); background: var(--ok-luz); }
.ui-salvo.esta-salvando .ui-salvo__luz { background: var(--tinta-3); animation: ui-pisca 1s ease-in-out infinite; }
.ui-salvo.esta-erro { color: var(--perigo); font-weight: 700; }
.ui-salvo.esta-erro .ui-salvo__luz { background: var(--perigo); }
@keyframes ui-pisca { 50% { opacity: 0.3; } }

/* Busca (campo com lupa e limpar)
   <div class="ui-busca"><svg class="ui-icone">search</svg><input class="ui-entrada" type="search" placeholder="Nome, CPF, contrato ou pet">
     <button class="ui-botao ui-botao--fantasma ui-botao--icone" aria-label="Limpar"><svg>x</svg></button></div>
   --topo: a pílula da casca (52 px, sombra). */
.ui-busca { position: relative; display: flex; align-items: center; }
.ui-busca > .ui-icone { position: absolute; left: var(--esp-4); color: var(--tinta-2); pointer-events: none; }
.ui-busca .ui-entrada { padding-left: calc(var(--esp-4) + 30px); padding-right: calc(var(--alvo) + 4px); }
.ui-busca .ui-entrada::-webkit-search-cancel-button { display: none; }
.ui-busca > .ui-botao { position: absolute; right: 2px; min-height: calc(var(--alvo) - 4px); width: calc(var(--alvo) - 4px); color: var(--tinta-2); }
.ui-busca--topo .ui-entrada { min-height: 52px; border-color: var(--linha); border-radius: var(--raio-pilula); box-shadow: var(--sombra); }

/* ══ ESTRUTURA ════════════════════════════════════════════════════════════ */

/* Cabeçalho de página
   <header class="ui-cabecalho">
     <nav class="ui-migalhas" aria-label="Você está em"><ol><li><a href="#">Clientes</a></li><li aria-current="page">Ana Souza</li></ol></nav>
     <div class="ui-cabecalho__linha"><div><h1 class="ui-cabecalho__titulo">Ana Souza</h1><p class="ui-cabecalho__apoio">Contrato 4821 · desde mar/2021</p></div>
       <div class="ui-acoes">…</div></div></header> */
.ui-cabecalho { display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-cabecalho__linha { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--esp-4); }
.ui-cabecalho__titulo { font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.ui-cabecalho__apoio { margin-top: var(--esp-1); color: var(--tinta-2); }
@container (max-width: 560px) { .ui-cabecalho__titulo { font-size: 26px; } }
.ui-migalhas ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1); font-size: 14px; color: var(--tinta-2); }
.ui-migalhas li + li::before { content: "/"; margin-right: var(--esp-1); color: var(--tinta-3); }
.ui-migalhas a { color: var(--tinta-2); text-decoration: none; }
.ui-migalhas a:hover { color: var(--marca); text-decoration: underline; }
.ui-migalhas [aria-current] { color: var(--tinta); font-weight: 700; }

/* Link  <a class="ui-link" href="…">Ver contrato</a>
   Externo: <a class="ui-link" href="…" target="_blank" rel="noopener">Portal da Spedy <svg class="ui-icone ui-icone--p">external-link</svg><span class="ui-oculto">(abre em outra aba)</span></a> */
.ui-link { display: inline-flex; align-items: center; gap: var(--esp-1); color: var(--marca); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ui-link:hover { color: var(--marca-forte); text-decoration-thickness: 2px; }

/* Cartão (bloco de seção)
   <section class="ui-cartao"><div class="ui-cartao__topo"><h2 class="ui-cartao__titulo">Faturas</h2><div class="ui-acoes">…</div></div>
     …conteúdo…<div class="ui-cartao__rodape">…</div></section>
   --feito: já resolvido (cinza, sem sombra). --toque: o cartão inteiro é a ação (button ou a);
   esta-ativo / aria-current="true": o escolhido. */
.ui-cartao { display: flex; flex-direction: column; gap: var(--esp-4); padding: var(--esp-6); border-radius: var(--raio-g); background: var(--superficie); box-shadow: var(--sombra); color: var(--tinta); }
@container (max-width: 560px) { .ui-cartao { padding: var(--esp-4); } }
.ui-cartao__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.ui-cartao__titulo { font-size: 18px; line-height: 1.35; font-weight: 700; }
.ui-cartao__rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); padding-top: var(--esp-4); border-top: 1px solid var(--linha); }
.ui-cartao--feito { background: var(--superficie-suave); box-shadow: inset 0 0 0 1px var(--linha); }
.ui-cartao--toque { width: 100%; border: 0; font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: box-shadow 0.15s ease; }
.ui-cartao--toque:hover { box-shadow: var(--sombra), 0 0 0 2px var(--linha-media); }
.ui-cartao--toque.esta-ativo,
.ui-cartao--toque[aria-current="true"] { box-shadow: 0 0 0 2px var(--marca), var(--sombra-ativa); }

/* Grade de cartões: cartões lado a lado que viram coluna no estreito
   <div class="ui-grade"> …ui-cartao… </div>   --2: no máximo duas colunas */
.ui-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--esp-4); }
.ui-grade--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }

/* Abas
   <div class="ui-abas" role="tablist"><button class="ui-aba" role="tab" aria-selected="true">Faturas <span class="ui-aba__n">3</span></button>…</div>
   Com URL: <a class="ui-aba" aria-current="page" href="?aba=faturas">. Rola de lado no celular. */
.ui-abas { display: flex; gap: var(--esp-1); overflow-x: auto; border-bottom: 1px solid var(--linha); scrollbar-width: none; }
.ui-aba {
  flex: none; display: inline-flex; align-items: center; gap: var(--esp-2);
  min-height: var(--alvo); padding: 0 var(--esp-4); margin-bottom: -1px;
  border: 0; border-bottom: 3px solid transparent; background: transparent;
  color: var(--tinta-2); font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.ui-aba:hover { color: var(--tinta); border-bottom-color: var(--linha-media); }
.ui-aba[aria-selected="true"],
.ui-aba[aria-current="page"] { color: var(--marca); border-bottom-color: var(--marca); }
.ui-aba__n { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--raio-pilula); background: var(--superficie-suave); color: var(--tinta-2); font-size: 14px; }
.ui-aba[aria-selected="true"] .ui-aba__n,
.ui-aba[aria-current="page"] .ui-aba__n { background: var(--marca-suave); color: var(--marca); }

/* Acordeão
   <details class="ui-acordeao"><summary class="ui-acordeao__titulo">Histórico de pagamentos <span class="ui-apoio">12</span><svg class="ui-icone">chevron-down</svg></summary>
     <div class="ui-acordeao__corpo">…</div></details> */
.ui-acordeao { border-top: 1px solid var(--linha); }
.ui-acordeao:last-child { border-bottom: 1px solid var(--linha); }
.ui-acordeao__titulo { display: flex; align-items: center; gap: var(--esp-3); min-height: var(--alvo); padding: var(--esp-2) 0; font-weight: 700; cursor: pointer; list-style: none; }
.ui-acordeao__titulo::-webkit-details-marker { display: none; }
.ui-acordeao__titulo > .ui-icone:last-child { margin-left: auto; color: var(--tinta-2); transition: transform 0.15s ease; }
.ui-acordeao[open] > .ui-acordeao__titulo > .ui-icone:last-child { transform: rotate(180deg); }
.ui-acordeao__corpo { padding: 0 0 var(--esp-4); }

/* Gaveta à direita (criar e editar). <dialog class="ui-gaveta"> aberta com showModal(); tem URL própria
   e fecha com o "voltar". No celular ocupa a tela.
   <dialog class="ui-gaveta" aria-labelledby="g1"><header class="ui-gaveta__topo"><h2 class="ui-gaveta__titulo" id="g1">Novo pet</h2>
     <button class="ui-botao ui-botao--fantasma ui-botao--icone" aria-label="Fechar"><svg>x</svg></button></header>
     <div class="ui-gaveta__corpo">…</div><footer class="ui-gaveta__rodape"><div class="ui-acoes ui-acoes--fim">…</div></footer></dialog>
   Na prévia do catálogo: class="ui-gaveta ui-gaveta--previa" (sem modal, dentro da moldura). */
.ui-gaveta {
  position: fixed; inset: 0 0 0 auto; margin: 0; width: min(560px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
  padding: 0; border: 0; border-radius: var(--raio-g) 0 0 var(--raio-g);
  background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-gaveta);
  display: none; flex-direction: column;
}
.ui-gaveta[open], .ui-gaveta--previa { display: flex; }
.ui-gaveta::backdrop { background: var(--veu); }
.ui-gaveta__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-4) var(--esp-4) var(--esp-4) var(--esp-6); border-bottom: 1px solid var(--linha); }
.ui-gaveta__titulo { font-size: 18px; line-height: 1.35; font-weight: 700; }
.ui-gaveta__corpo { flex: 1; overflow-y: auto; padding: var(--esp-6); display: flex; flex-direction: column; gap: var(--esp-5); }
.ui-gaveta__rodape { padding: var(--esp-4) var(--esp-6); border-top: 1px solid var(--linha); background: var(--superficie); }
.ui-gaveta--previa { position: relative; inset: auto; height: auto; max-height: none; width: 100%; max-width: 560px; margin-left: auto; }
@container (max-width: 560px) {
  .ui-gaveta--previa { border-radius: 0; }
}
@media (max-width: 560px) {
  .ui-gaveta:not(.ui-gaveta--previa) { width: 100vw; border-radius: 0; }
}
@container (max-width: 560px) {
  .ui-gaveta__topo { padding-left: var(--esp-4); }
  .ui-gaveta__corpo, .ui-gaveta__rodape { padding-left: var(--esp-4); padding-right: var(--esp-4); }
}

/* Janela (só para confirmar)
   <dialog class="ui-janela" aria-labelledby="j1"><h2 class="ui-janela__titulo" id="j1">Cancelar a OS 1182?</h2>
     <p class="ui-janela__texto">…o que acontece…</p><div class="ui-acoes ui-acoes--fim ui-acoes--pilha">…</div></dialog>
   O botão que confirma diz o que faz ("Cancelar a OS"), nunca "OK". --perigo: confirmação de algo que apaga. */
.ui-janela {
  width: min(480px, calc(100vw - 32px)); padding: var(--esp-6); border: 0; border-radius: var(--raio-g);
  background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-gaveta);
  flex-direction: column; gap: var(--esp-4);
}
.ui-janela[open], .ui-janela--previa { display: flex; }
.ui-janela--previa { position: relative; margin: 0 auto; }
.ui-janela::backdrop { background: var(--veu); }
.ui-janela__titulo { font-size: 18px; line-height: 1.35; font-weight: 700; }
.ui-janela__texto { color: var(--tinta-2); }

/* Barra de ação fixa (celular, tela longa)
   <div class="ui-barra-fixa"><button class="ui-botao ui-botao--primario ui-botao--largo">Fechar comanda · R$ 184,00</button></div> */
.ui-barra-fixa > .ui-botao { flex: 1 1 auto; min-width: 0; white-space: normal; }
.ui-barra-fixa {
  position: sticky; bottom: 0; z-index: 5; display: flex; gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4) calc(var(--esp-3) + env(safe-area-inset-bottom));
  background: var(--superficie); border-top: 1px solid var(--linha); box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
}
@media (min-width: 900px) { .ui-barra-fixa--celular { position: static; padding: 0; border: 0; box-shadow: none; background: transparent; } }

/* Menu "mais ações" (popover nativo)
   <button class="ui-botao ui-botao--secundario ui-botao--icone" popovertarget="m1" aria-label="Mais ações"><svg>ellipsis</svg></button>
   <div class="ui-menu" id="m1" popover><button class="ui-menu__item"><svg>pencil</svg> Editar <kbd class="ui-tecla">e</kbd></button>
     <hr class="ui-menu__sep"><button class="ui-menu__item ui-menu__item--perigo"><svg>trash-2</svg> Excluir</button></div> */
.ui-menu {
  min-width: 220px; margin: 0; padding: var(--esp-1); border: 1px solid var(--linha); border-radius: var(--raio-m);
  background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-flutuante);
}
.ui-menu:popover-open, .ui-menu--previa { display: flex; flex-direction: column; }
.ui-menu--previa { position: relative; inset: auto; width: max-content; }
.ui-menu__item {
  display: flex; align-items: center; gap: var(--esp-3); width: 100%; min-height: var(--alvo); padding: 0 var(--esp-3);
  border: 0; border-radius: var(--raio-p); background: transparent; color: var(--tinta);
  font-size: 16px; text-align: left; text-decoration: none; cursor: pointer;
}
.ui-menu__item:hover, .ui-menu__item:focus-visible { background: var(--superficie-suave); outline-offset: -2px; }
.ui-menu__item > .ui-icone { color: var(--tinta-2); }
.ui-menu__item > .ui-tecla { margin-left: auto; }
.ui-menu__item[aria-checked="true"] { font-weight: 700; }
.ui-menu__item--perigo, .ui-menu__item--perigo > .ui-icone { color: var(--perigo); }
.ui-menu__sep { margin: var(--esp-1) 0; border: 0; border-top: 1px solid var(--linha); }
.ui-menu__titulo { padding: var(--esp-2) var(--esp-3) var(--esp-1); font-size: 14px; font-weight: 700; color: var(--tinta-2); }

/* ══ CASCA (modelo 3) ═════════════════════════════════════════════════════ */

/* Trilho: coluna de 92 px no computador; barra de baixo no celular (--barra).
   <nav class="ui-trilho" aria-label="Módulos">   (--coluna: nunca vira barra; --barra: sempre barra)
  <div class="ui-trilho__marca"><span class="ui-trilho__logo">P</span>Pokotucho</div>
     <a class="ui-trilho__item" aria-current="page" href="/hoje"><svg class="ui-icone ui-icone--g">house</svg>Hoje<span class="ui-trilho__n">4</span></a>…</nav> */
.ui-trilho { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 92px; padding: var(--esp-4) var(--esp-2) var(--esp-6); background: var(--superficie); border-right: 1px solid var(--linha); }
.ui-trilho__marca { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--esp-1) 0 14px; font-size: 13px; font-weight: 700; text-align: center; }
.ui-trilho__logo { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: var(--marca); color: var(--sobre-marca); font-size: 22px; font-weight: 700; }
.ui-trilho__item {
  position: relative; width: 76px; min-height: 68px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--esp-1);
  padding: var(--esp-2) 2px; border: 0; border-radius: 16px; background: transparent; color: var(--tinta-2);
  font-size: 13px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
}
.ui-trilho__item:hover { background: var(--superficie-suave); color: var(--tinta); }
.ui-trilho__item[aria-current="page"] { background: var(--marca-suave); color: var(--marca); }
.ui-trilho__n { position: absolute; top: 4px; right: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--raio-pilula); background: var(--marca); color: var(--sobre-marca); font-size: 13px; line-height: 22px; font-weight: 700; text-align: center; }
.ui-trilho__item[aria-current="page"] .ui-trilho__n { box-shadow: 0 0 0 2px var(--marca-suave); }
.ui-trilho__fim { margin-top: auto; }
.ui-trilho--barra { flex-direction: row; width: 100%; gap: var(--esp-1); padding: var(--esp-2) var(--esp-2) calc(var(--esp-2) + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--linha); overflow-x: auto; }
.ui-trilho--barra .ui-trilho__marca { display: none; }
.ui-trilho--barra .ui-trilho__item { flex: 1 0 64px; width: auto; min-height: 60px; }
@media (max-width: 720px) {
  .ui-trilho:not(.ui-trilho--coluna):not(.ui-trilho--barra) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; flex-direction: row; width: 100%; gap: var(--esp-1); padding: var(--esp-2); border-right: 0; border-top: 1px solid var(--linha); overflow-x: auto; }
  .ui-trilho:not(.ui-trilho--coluna):not(.ui-trilho--barra) .ui-trilho__marca { display: none; }
  .ui-trilho:not(.ui-trilho--coluna):not(.ui-trilho--barra) .ui-trilho__item { flex: 1 0 64px; width: auto; min-height: 60px; }
}

/* Casca da página (modelo 3): o trilho (ou o MenuLateral) à esquerda; na coluna principal, o topo, as ações
   frequentes e o conteúdo. No celular (até 720 px) o trilho vira a barra de baixo e o conteúdo ganha espaço para ela.
   <div class="ui-casca"><nav class="ui-trilho">…</nav>
     <div class="ui-casca__principal"><header class="ui-topo">…</header><nav class="ui-acoes-frequentes">…</nav>
       <main class="ui-conteudo ui-casca__conteudo" id="conteudo">…</main></div></div> */
.ui-casca { display: flex; min-height: 100vh; background: var(--fundo); color: var(--tinta); }
.ui-casca > .ui-trilho, .ui-casca > .ui-menu-lateral { flex: none; position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; }
.ui-casca__principal { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--esp-4); padding: var(--esp-4) var(--esp-6) var(--esp-10); }
.ui-casca__conteudo { display: flex; flex-direction: column; gap: var(--esp-5); min-width: 0; }
.ui-casca__principal { container-type: inline-size; }
@media (max-width: 720px) {
  .ui-casca__principal { padding: var(--esp-3) var(--esp-4) calc(96px + var(--esp-4)); }
  .ui-casca > .ui-trilho { position: fixed; top: auto; height: auto; align-self: auto; }
  /* Topo do celular numa linha: a busca ocupa o espaço; Íris, empresa e pessoa viram só o ícone e o avatar
     (o texto continua para o leitor de tela, com font-size 0); o turno aparece no Hoje. */
  .ui-casca .ui-topo { flex-wrap: nowrap; gap: var(--esp-2); }
  .ui-casca .ui-topo > .ui-busca { flex: 1 1 auto; min-width: 0; max-width: none; }
  .ui-casca .ui-topo > .ui-turno { display: none; }
  .ui-casca .ui-topo > .ui-botao, .ui-casca .ui-topo > .ui-empresa, .ui-casca .ui-topo > .ui-usuario { flex: none; gap: 0; padding: 0; min-width: var(--alvo); justify-content: center; font-size: 0; border-color: transparent; box-shadow: none; background: transparent; }
  .ui-casca .ui-topo .ui-avatar { font-size: 15px; }
  .ui-casca .ui-topo .ui-usuario .ui-apoio, .ui-casca .ui-topo .ui-empresa > .ui-icone { display: none; }
}

/* Duas colunas de página: o trabalho à esquerda e o resumo ou as ações à direita (20–24 rem). Abaixo de 960 px de
   conteúdo, a lateral desce para baixo. --esquerda: a coluna estreita fica à esquerda (lista + detalhe).
   <div class="ui-colunas"><div class="ui-colunas__principal">…</div><aside class="ui-colunas__lado" aria-label="…">…</aside></div> */
.ui-colunas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-5); align-items: start; }
.ui-colunas__principal, .ui-colunas__lado { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
@container (min-width: 960px) {
  .ui-colunas { grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); }
  .ui-colunas--esquerda { grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr); }
  .ui-colunas__lado--fixo { position: sticky; top: var(--esp-4); }
}

/* Topo: busca, empresa, turno, pessoa
   <header class="ui-topo"><div class="ui-busca ui-busca--topo">…</div>
     <button class="ui-empresa"><span class="ui-avatar ui-avatar--quadrado">P</span><span>Pokotucho</span><svg>chevron-down</svg></button>
     <span class="ui-turno"><span class="ui-luz"></span>Em turno · 08:01</span>
     <button class="ui-usuario"><span class="ui-avatar">RR</span><span>Renata<span class="ui-apoio">Recepção</span></span></button></header> */
.ui-topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); }
.ui-topo > .ui-busca { flex: 1 1 260px; max-width: 460px; }
.ui-empresa,
.ui-usuario {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: var(--esp-1) 14px var(--esp-1) 6px;
  border: 1px solid var(--linha); border-radius: var(--raio-pilula); background: var(--superficie); box-shadow: var(--sombra);
  color: var(--tinta); font-weight: 700; text-align: left; cursor: pointer;
}
.ui-usuario { border-color: transparent; background: transparent; box-shadow: none; }
.ui-empresa:hover { border-color: var(--linha-media); }
.ui-usuario:hover { background: var(--superficie); }
.ui-usuario > span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.ui-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--raio-pilula); background: var(--marca); color: var(--sobre-marca); font-size: 16px; font-weight: 700; }
.ui-avatar--quadrado { width: 40px; height: 40px; border-radius: var(--raio-m); }
.ui-avatar--p { width: 32px; height: 32px; font-size: 14px; }
.ui-turno { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 var(--esp-4); border: 1px solid var(--ok-linha); border-radius: var(--raio-pilula); background: var(--ok-fundo); color: var(--ok); font-size: 14px; font-weight: 700; white-space: nowrap; }
.ui-turno--fora { border-color: var(--linha); background: var(--superficie-suave); color: var(--tinta-2); }
.ui-turno--fora .ui-luz { background: var(--tinta-3); box-shadow: none; }
.ui-luz { flex: none; width: 10px; height: 10px; border-radius: var(--raio-pilula); background: var(--ok-luz); box-shadow: 0 0 0 4px var(--ok-linha); }

/* ══ DADOS ════════════════════════════════════════════════════════════════ */

/* Etiqueta de estado: o rótulo é obrigatório, o tom só reforça.
   <span class="ui-etiqueta ui-etiqueta--ok"><svg class="ui-icone ui-icone--p">circle-check</svg> Pago</span>
   Tons: --ok --atencao --perigo --info --ia --marca --neutra. O mapa estado → tom é declarado uma vez por domínio. */
.ui-etiqueta { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 12px; border: 1px solid transparent; border-radius: var(--raio-pilula); font-size: 14px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.ui-etiqueta--neutra { background: var(--superficie-suave); border-color: var(--linha); color: var(--tinta-2); }
.ui-etiqueta--marca { background: var(--marca-suave); border-color: var(--marca-linha); color: var(--marca); }
.ui-etiqueta--ok { background: var(--ok-fundo); border-color: var(--ok-linha); color: var(--ok); }
.ui-etiqueta--atencao { background: var(--atencao-fundo); border-color: var(--atencao-linha); color: var(--atencao); }
.ui-etiqueta--perigo { background: var(--perigo-fundo); border-color: var(--perigo-linha); color: var(--perigo); }
.ui-etiqueta--info { background: var(--info-fundo); border-color: var(--info-linha); color: var(--info); }
.ui-etiqueta--ia { background: var(--ia-fundo); border-color: var(--ia-linha); color: var(--ia); }

/* Tabela completa
   <div class="ui-tabela" role="region" aria-label="Faturas" tabindex="0"><table>
     <thead><tr><th class="ui-col-sel"><input type="checkbox" class="ui-caixa" aria-label="Selecionar todas"></th>
       <th aria-sort="descending"><button class="ui-ordenar">Vencimento <svg>arrow-down</svg></button></th>
       <th class="ui-num"><button class="ui-ordenar">Valor <svg>arrow-up-down</svg></button></th><th class="ui-col-acoes"><span class="ui-oculto">Ações</span></th></tr></thead>
     <tbody><tr aria-selected="true"><td class="ui-col-sel">…</td><td data-rotulo="Vencimento">10/10/2026</td><td class="ui-num" data-rotulo="Valor">R$ 99,90</td><td class="ui-col-acoes">…</td></tr></tbody>
     <tfoot><tr><td></td><th scope="row">Total</th><td class="ui-num">R$ 1.284,90</td><td></td></tr></tfoot></table></div>
   Densidade de mesa por padrão (toque no celular). data-rotulo em cada td: no celular a linha vira cartão (--cartoes).
   Negativo: <td class="ui-num ui-negativo">−R$ 12,00</td> (sinal escrito, não só cor). */
.ui-tabela { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); }
.ui-tabela table { width: 100%; border-collapse: collapse; font-size: var(--dado); }
.ui-tabela th, .ui-tabela td { padding: var(--celula) var(--esp-3); text-align: left; vertical-align: middle; }
.ui-tabela thead th { position: sticky; top: 0; z-index: 1; background: var(--superficie-suave); border-bottom: 1px solid var(--linha); font-size: 14px; font-weight: 700; color: var(--tinta-2); white-space: nowrap; }
.ui-tabela tbody tr { border-top: 1px solid var(--linha); }
.ui-tabela tbody tr:first-child { border-top: 0; }
.ui-tabela tbody td { height: var(--linha-min); }
.ui-tabela tbody tr:hover { background: var(--superficie-suave); }
.ui-tabela tbody tr[aria-selected="true"] { background: var(--marca-suave); }
.ui-tabela tfoot th, .ui-tabela tfoot td { border-top: 2px solid var(--linha-forte); font-weight: 700; background: var(--superficie); }
.ui-tabela .ui-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-tabela .ui-negativo { color: var(--perigo); }
.ui-tabela .ui-col-sel { width: 48px; }
.ui-tabela .ui-col-acoes { width: 1%; text-align: right; white-space: nowrap; }
.ui-tabela .ui-botao { min-height: var(--alvo); }
.ui-tabela__principal { font-weight: 700; color: var(--tinta); }
.ui-tabela__apoio { display: block; font-size: 14px; font-weight: 400; color: var(--tinta-2); }
.ui-ordenar { display: inline-flex; align-items: center; gap: var(--esp-1); padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.ui-ordenar > .ui-icone { width: 16px; height: 16px; color: var(--tinta-3); }
.ui-ordenar:hover { color: var(--tinta); }
th[aria-sort="ascending"] .ui-ordenar, th[aria-sort="descending"] .ui-ordenar { color: var(--marca); }
th[aria-sort="ascending"] .ui-ordenar > .ui-icone, th[aria-sort="descending"] .ui-ordenar > .ui-icone { color: var(--marca); }
th.ui-num .ui-ordenar { flex-direction: row-reverse; }
.ui-tabela tr.ui-detalhe { background: var(--superficie-suave); }
.ui-tabela tr.ui-detalhe > td { height: auto; padding: var(--esp-4); }
/* No celular a tabela vira cartões: cada td mostra o rótulo da coluna (data-rotulo). */
@container (max-width: 640px) {
  .ui-tabela--cartoes { border: 0; background: transparent; overflow: visible; }
  .ui-tabela--cartoes table, .ui-tabela--cartoes tbody, .ui-tabela--cartoes tr, .ui-tabela--cartoes td, .ui-tabela--cartoes tfoot { display: block; }
  .ui-tabela--cartoes thead { display: none; }
  .ui-tabela--cartoes tbody { display: flex; flex-direction: column; gap: var(--esp-3); }
  .ui-tabela--cartoes tbody tr { border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); padding: var(--esp-3) var(--esp-4); }
  .ui-tabela--cartoes tbody td { height: auto; padding: 6px 0; display: flex; justify-content: space-between; gap: var(--esp-4); text-align: right; }
  .ui-tabela--cartoes tbody td[data-rotulo]::before { content: attr(data-rotulo); font-size: 14px; font-weight: 700; color: var(--tinta-2); text-align: left; }
  .ui-tabela--cartoes tbody td.ui-col-sel, .ui-tabela--cartoes tbody td.ui-col-acoes { justify-content: flex-start; width: auto; }
  .ui-tabela--cartoes tfoot tr { display: flex; justify-content: space-between; padding: var(--esp-3) var(--esp-4); border-top: 2px solid var(--linha-forte); }
  .ui-tabela--cartoes tfoot th, .ui-tabela--cartoes tfoot td { border-top: 0; padding: 0; background: transparent; }
  .ui-tabela--cartoes tfoot td:empty { display: none; }
}

/* Barra de filtros acima da tabela (densidade de mesa)
   <div class="ui-filtros" data-densidade="mesa"><div class="ui-busca">…</div><div class="ui-chips">…</div><div class="ui-selecao">…</div></div> */
.ui-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); }
.ui-filtros > .ui-busca { flex: 1 1 260px; max-width: 420px; }

/* Ação em lote: aparece quando há linha marcada
   <div class="ui-lote" role="region" aria-label="Seleção"><strong>3 selecionadas</strong><div class="ui-acoes">…</div>
     <button class="ui-botao ui-botao--fantasma">Limpar seleção</button></div> */
.ui-lote { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); padding: var(--esp-2) var(--esp-2) var(--esp-2) var(--esp-4); border: 1px solid var(--marca-linha); border-radius: var(--raio-m); background: var(--marca-suave); color: var(--marca); }
.ui-lote > .ui-acoes { margin-left: auto; }

/* Paginação
   <nav class="ui-paginacao" aria-label="Páginas"><p class="ui-apoio">51–100 de 1.284</p>
     <div class="ui-paginacao__paginas"><a class="ui-botao ui-botao--secundario ui-botao--icone" aria-label="Anterior">‹</a>
       <a class="ui-paginacao__pagina" href="?p=1">1</a><a class="ui-paginacao__pagina" aria-current="page">2</a>…</div></nav>
   Lista longa no celular: "Mostrar mais 50" (ui-botao--secundario ui-botao--largo) no lugar das páginas. */
.ui-paginacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.ui-paginacao__paginas { display: flex; align-items: center; gap: var(--esp-1); }
.ui-paginacao__pagina { display: inline-flex; align-items: center; justify-content: center; min-width: var(--alvo); min-height: var(--alvo); padding: 0 var(--esp-2); border-radius: var(--raio-m); color: var(--tinta); font-weight: 700; text-decoration: none; }
.ui-paginacao__pagina:hover { background: var(--superficie-suave); }
.ui-paginacao__pagina[aria-current="page"] { background: var(--marca); color: var(--sobre-marca); }
.ui-paginacao__reticencias { min-width: 24px; text-align: center; color: var(--tinta-3); }

/* Lista de linhas
   <ul class="ui-lista"><li><a class="ui-lista__linha" href="…"><span class="ui-redondo ui-redondo--marca">…</span>
     <span class="ui-lista__texto"><strong>Thor</strong><span class="ui-apoio">Banho e tosa · 14:00</span></span>
     <span class="ui-lista__valor">R$ 85,00</span><svg class="ui-icone">chevron-right</svg></a></li></ul>
   A linha pode ser div (sem ação), a ou button. */
.ui-lista { display: flex; flex-direction: column; }
.ui-lista > li + li { border-top: 1px solid var(--linha); }
.ui-lista__linha { display: flex; align-items: center; gap: var(--esp-3); width: 100%; min-height: var(--linha-min); padding: var(--esp-2) var(--esp-3); border: 0; border-radius: var(--raio-m); background: transparent; color: var(--tinta); font-size: var(--dado); text-align: left; text-decoration: none; }
a.ui-lista__linha, button.ui-lista__linha { cursor: pointer; transition: background-color 0.15s ease; }
a.ui-lista__linha:hover, button.ui-lista__linha:hover { background: var(--superficie-suave); }
.ui-lista__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ui-lista__texto > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-lista__valor { flex: none; font-weight: 700; text-align: right; }
.ui-lista__linha > .ui-icone:last-child { color: var(--tinta-3); }
.ui-lista__linha:not(:has(> .ui-icone:last-child)) > .ui-lista__valor { margin-right: 32px; }
/* Estreito (celular): o nome quebra em vez de cortar; valor e etiqueta descem para a direita se não couberem. */
@container (max-width: 420px) {
  .ui-lista__linha:has(> .ui-etiqueta) { flex-wrap: wrap; row-gap: var(--esp-1); }
  .ui-lista__linha:has(> .ui-etiqueta) > .ui-lista__texto { flex: 1 1 11rem; }
  .ui-lista__texto > strong { white-space: normal; }
  .ui-lista__linha > .ui-etiqueta { margin-left: auto; }
  .ui-lista__linha:has(> .ui-etiqueta) > .ui-lista__valor { margin-right: 0; }
}

/* Pares rótulo · valor
   <dl class="ui-pares"><div><dt>Plano</dt><dd>Fibra 500 MB</dd></div>…</dl>   --coluna: um embaixo do outro */
.ui-pares { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--esp-3) var(--esp-6); }
.ui-pares > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-pares dt { font-size: 14px; color: var(--tinta-2); }
.ui-pares dd { font-weight: 700; overflow-wrap: anywhere; }
.ui-pares--coluna { grid-template-columns: 1fr; }
.ui-pares--linha > div { flex-direction: row; justify-content: space-between; gap: var(--esp-4); padding: var(--esp-2) 0; border-top: 1px solid var(--linha); }
.ui-pares--linha dd { text-align: right; }

/* Bloco de código (Pix, chave, hash)
   <div class="ui-codigo"><code>00020126580014BR.GOV.BCB.PIX…</code><button class="ui-botao ui-botao--secundario">Copiar</button></div> */
.ui-codigo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--esp-3) var(--esp-3) var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie-suave); }
.ui-codigo > code { flex: 1 1 200px; min-width: 0; font-family: var(--font-mono); font-size: 14px; line-height: 1.5; color: var(--tinta); overflow-wrap: anywhere; }

/* Copiar: o botão vira "Copiado" por 2 s
   <button class="ui-botao ui-botao--secundario ui-copiar"><svg>copy</svg> Copiar</button> → esta-copiado: <svg>check</svg> Copiado */
.ui-copiar.esta-copiado { border-color: var(--ok-linha); background: var(--ok-fundo); color: var(--ok); }

/* Barra de progresso
   <div class="ui-progresso"><div class="ui-progresso__topo"><span>Vacinas em dia</span><strong>12 de 30</strong></div>
     <div class="ui-progresso__trilho" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"><span class="ui-progresso__valor" style="--valor:40%"></span></div></div>
   O --valor vai num atributo de estilo só para a variável: a única exceção ao "nada de style=" (a catraca conta). Tons: --ok --atencao --perigo. */
.ui-progresso { display: flex; flex-direction: column; gap: 6px; }
.ui-progresso__topo { display: flex; justify-content: space-between; gap: var(--esp-3); font-size: 14px; color: var(--tinta-2); }
.ui-progresso__topo strong { color: var(--tinta); }
.ui-progresso__trilho { position: relative; display: block; width: 100%; height: 8px; border-radius: var(--raio-pilula); background: var(--fundo-barra); overflow: hidden; }
.ui-progresso__valor { display: block; width: var(--valor, 0%); max-width: 100%; height: 100%; border-radius: var(--raio-pilula); background: var(--marca); transition: width 0.25s ease; }
.ui-progresso--ok .ui-progresso__valor { background: var(--ok); }
.ui-progresso--atencao .ui-progresso__valor { background: var(--atencao); }
.ui-progresso--perigo .ui-progresso__valor { background: var(--perigo); }

/* Trilha curta por linha: 3 pílulas (pedido → pago → entregue)
   <ol class="ui-trilha-curta" aria-label="Andamento"><li class="esta-feito">Pedido</li><li class="esta-atual" aria-current="step">Pago</li><li>Entregue</li></ol> */
.ui-trilha-curta { display: inline-flex; align-items: center; gap: 0; font-size: 14px; font-weight: 700; }
.ui-trilha-curta > li { display: inline-flex; align-items: center; gap: var(--esp-1); min-height: 28px; padding: 2px 10px; border: 1px solid var(--linha); background: var(--superficie); color: var(--tinta-3); white-space: nowrap; }
.ui-trilha-curta > li + li { margin-left: -1px; }
.ui-trilha-curta > li:first-child { border-radius: var(--raio-pilula) 0 0 var(--raio-pilula); }
.ui-trilha-curta > li:last-child { border-radius: 0 var(--raio-pilula) var(--raio-pilula) 0; }
.ui-trilha-curta > li.esta-feito { background: var(--ok-fundo); border-color: var(--ok-linha); color: var(--ok); position: relative; z-index: 1; }
.ui-trilha-curta > li.esta-atual { background: var(--marca-suave); border-color: var(--marca); color: var(--marca); position: relative; z-index: 2; }
.ui-trilha-curta > li.esta-problema { background: var(--perigo-fundo); border-color: var(--perigo-linha); color: var(--perigo); position: relative; z-index: 2; }

/* Linha do tempo
   <ol class="ui-tempo"><li class="ui-tempo__item"><span class="ui-tempo__marca ui-redondo ui-redondo--ok"><svg class="ui-icone ui-icone--p">…</svg></span>
     <div class="ui-tempo__corpo"><p class="ui-tempo__quando">Hoje, 09:12 · SGP</p><p class="ui-tempo__titulo">Fatura de outubro paga</p><p class="ui-apoio">…</p></div></li></ol> */
.ui-tempo { display: flex; flex-direction: column; }
.ui-tempo__item { position: relative; display: flex; gap: var(--esp-3); padding-bottom: var(--esp-5); }
.ui-tempo__item:last-child { padding-bottom: 0; }
.ui-tempo__item::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; background: var(--linha); }
.ui-tempo__item:last-child::before { display: none; }
.ui-tempo__marca { width: 32px; height: 32px; }
.ui-tempo__corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.ui-tempo__quando { font-size: 14px; color: var(--tinta-3); }
.ui-tempo__titulo { font-weight: 700; }
.ui-tempo__mais { margin-left: 44px; }

/* ══ COMUNICAÇÃO ══════════════════════════════════════════════════════════ */

/* Aviso (no fluxo da página)
   <div class="ui-aviso ui-aviso--atencao" role="status"><svg class="ui-icone">triangle-alert</svg>
     <div class="ui-aviso__corpo"><p class="ui-aviso__titulo">Certificado vence em 12 dias</p><p>Sem ele, a nota não sai.</p></div>
     <div class="ui-aviso__acoes"><a class="ui-botao ui-botao--secundario">Renovar</a></div></div>
   Tons: --ok --atencao --perigo --info --ia. role="alert" só para erro que acabou de acontecer. */
.ui-aviso { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--esp-3); padding: var(--esp-4) var(--esp-5); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie-suave); color: var(--tinta); }
.ui-aviso > .ui-icone { margin-top: 2px; }
.ui-aviso__corpo { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-aviso__titulo { font-weight: 700; }
.ui-aviso__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-self: center; margin-left: auto; }
.ui-aviso--ok { background: var(--ok-fundo); border-color: var(--ok-linha); } .ui-aviso--ok > .ui-icone { color: var(--ok); }
.ui-aviso--atencao { background: var(--atencao-fundo); border-color: var(--atencao-linha); } .ui-aviso--atencao > .ui-icone { color: var(--atencao); }
.ui-aviso--perigo { background: var(--perigo-fundo); border-color: var(--perigo-linha); } .ui-aviso--perigo > .ui-icone { color: var(--perigo); }
.ui-aviso--info { background: var(--info-fundo); border-color: var(--info-linha); } .ui-aviso--info > .ui-icone { color: var(--info); }
.ui-aviso--ia { background: var(--ia-fundo); border-color: var(--ia-linha); } .ui-aviso--ia > .ui-icone { color: var(--ia); }


/* Toast (resultado de uma ação; some sozinho em 6 s, menos o de erro)
   <div class="ui-toasts" aria-live="polite"><div class="ui-toast ui-toast--ok"><svg>circle-check</svg><p>Recibo enviado à Ana.</p>
     <button class="ui-botao ui-botao--fantasma">Desfazer</button><button class="ui-botao ui-botao--fantasma ui-botao--icone" aria-label="Fechar"><svg>x</svg></button></div></div> */
.ui-toasts { position: fixed; right: var(--esp-6); bottom: var(--esp-6); z-index: 50; display: flex; flex-direction: column; gap: var(--esp-2); width: min(420px, calc(100vw - 32px)); }
.ui-toasts--previa { position: static; }
.ui-toasts { container-type: inline-size; }
/* ícone | texto | ação | fechar. Texto quebra; ação e fechar nunca descem sozinhos. Estreito (< 400 px): a ação vai
   para baixo do texto e o fechar fica no canto. */
.ui-toast { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: var(--esp-2); padding: var(--esp-2) var(--esp-2) var(--esp-2) var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); box-shadow: var(--sombra-flutuante); }
.ui-toast > .ui-icone { margin-right: var(--esp-1); }
.ui-toast > p { padding: var(--esp-2) 0; }
.ui-toast > .ui-botao { white-space: nowrap; }
.ui-toast:not(:has(> .ui-botao:not(.ui-botao--icone))) { grid-template-columns: auto minmax(0, 1fr) auto; }
@container (max-width: 400px) {
  .ui-toast { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ui-toast > .ui-botao:not(.ui-botao--icone) { grid-column: 2; grid-row: 2; justify-self: start; margin: calc(-1 * var(--esp-1)) 0 0 calc(-1 * var(--esp-5) - 1px); }
  .ui-toast > .ui-botao--icone { grid-column: 3; grid-row: 1; }
}
.ui-toast--ok > .ui-icone { color: var(--ok); }
.ui-toast--perigo > .ui-icone { color: var(--perigo); }
.ui-toast--info > .ui-icone { color: var(--info); }
@media (max-width: 560px) { .ui-toasts { left: var(--esp-4); right: var(--esp-4); bottom: calc(var(--esp-4) + 76px); width: auto; } }

/* Estado vazio
   <div class="ui-vazio"><span class="ui-redondo ui-redondo--g"><svg class="ui-icone ui-icone--g">inbox</svg></span>
     <p class="ui-vazio__titulo">Nenhuma OS aberta</p><p class="ui-vazio__texto">Quando um chamado virar OS, ela aparece aqui.</p><a class="ui-botao ui-botao--secundario">Abrir OS</a></div> */
.ui-vazio { display: flex; flex-direction: column; align-items: center; gap: var(--esp-2); padding: var(--esp-12) var(--esp-4); text-align: center; }
.ui-vazio > .ui-redondo { margin-bottom: var(--esp-2); }
.ui-vazio__titulo { font-size: 18px; line-height: 1.35; font-weight: 700; }
.ui-vazio__texto { max-width: 42ch; color: var(--tinta-2); }
.ui-vazio > .ui-botao { margin-top: var(--esp-3); }

/* Bloco que carrega sozinho (hx-trigger="load", hx-select="unset", 15 s de limite)
   Carregando: <div class="ui-carregando" aria-busy="true"><svg class="ui-icone ui-gira">loader-circle</svg> Consultando o SGP…</div>
   Esqueleto:  <div class="ui-esqueleto"><span></span><span></span><span></span></div>
   Sem resposta: <div class="ui-sem-resposta" role="status"><svg>wifi-off</svg><p><strong>Sem resposta do SGP</strong> · 15 s sem retorno</p><button class="ui-botao ui-botao--secundario">Tentar de novo</button></div>
   Nunca mostra zero quando a fonte falhou. */
.ui-carregando { display: flex; align-items: center; gap: var(--esp-2); min-height: var(--alvo); color: var(--tinta-2); }
.ui-esqueleto { display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-esqueleto > span { display: block; height: 14px; border-radius: var(--raio-p); background: var(--superficie-suave-forte); animation: ui-pisca 1.4s ease-in-out infinite; }
.ui-esqueleto > span:nth-child(2) { width: 82%; } .ui-esqueleto > span:nth-child(3) { width: 64%; }
.ui-sem-resposta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--esp-3) var(--esp-3) var(--esp-4); border: 1px dashed var(--atencao-linha); border-radius: var(--raio-m); background: var(--atencao-fundo); color: var(--tinta); }
.ui-sem-resposta > .ui-icone { color: var(--atencao); }
.ui-sem-resposta > p { flex: 1 1 200px; }

/* Navegador de período
   <div class="ui-periodo"><a class="ui-botao ui-botao--secundario ui-botao--icone" aria-label="Dia anterior"><svg>chevron-left</svg></a>
     <p class="ui-periodo__rotulo">Sex, 16 de outubro</p><a class="ui-botao ui-botao--secundario ui-botao--icone" aria-label="Próximo dia"><svg>chevron-right</svg></a>
     <a class="ui-botao ui-botao--fantasma">Hoje</a><div class="ui-segmentos">…Dia Semana Mês…</div></div>
   O fim do intervalo permitido desliga a seta (disabled + aria-label explica). */
.ui-periodo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.ui-periodo__rotulo { min-width: 12ch; padding: 0 var(--esp-2); font-size: 18px; font-weight: 700; text-align: center; }
.ui-periodo > .ui-segmentos { margin-left: auto; }
/* O rótulo do período é um botão que abre o calendário embaixo dele (escolher o dia, a semana, o mês ou um período).
   <button class="ui-periodo__rotulo ui-periodo__abrir" popovertarget="cal" aria-haspopup="dialog" aria-expanded="false">12 a 18 de outubro <svg class="ui-icone ui-icone--p">chevron-down</svg></button> */
.ui-periodo__abrir { display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2); min-height: var(--alvo); border: 1px solid transparent; border-radius: var(--raio-m); background: transparent; color: var(--tinta); font-family: inherit; cursor: pointer; }
.ui-periodo__abrir:hover, .ui-periodo__abrir[aria-expanded="true"] { background: var(--superficie-suave); border-color: var(--linha-media); }
.ui-periodo__abrir > .ui-icone { color: var(--tinta-2); }
.ui-periodo__ancora { position: relative; display: inline-flex; flex-direction: column; }

/* Campo de data (SeletorData). Digita dd/mm/aaaa com máscara, ou abre o calendário pelo botão. O calendário abre
   ancorado embaixo do campo (ou do rótulo do período), alinhado à esquerda dele; se não cabe embaixo, abre em cima.
   No celular, vira folha presa embaixo da tela. Nunca no canto da página.
   <div class="ui-data"><input class="ui-entrada ui-data__entrada" id="v" inputmode="numeric" autocomplete="off" placeholder="dd/mm/aaaa" value="10/10/2026">
   <button class="ui-botao ui-botao--fantasma ui-botao--icone ui-data__botao" type="button" popovertarget="cal-v" aria-label="Abrir o calendário de Vencimento"><svg>calendar</svg></button></div>
   <div class="ui-calendario" id="cal-v" popover role="dialog" aria-label="Escolher a data de vencimento">
     <div class="ui-calendario__topo"><button class="ui-botao ui-botao--fantasma ui-botao--icone" aria-label="Mês anterior">‹</button><p class="ui-calendario__mes" aria-live="polite">Outubro de 2026</p><button … aria-label="Próximo mês">›</button></div>
     <table class="ui-calendario__grade" role="grid"><thead><tr><th scope="col" abbr="domingo">D</th>…</tr></thead>
     <tbody><tr><td><button class="ui-calendario__dia [esta-fora|esta-no-periodo|esta-inicio|esta-fim]" aria-current="date" aria-selected="true" aria-label="16 de outubro, sexta-feira">16</button></td>…</tr></tbody></table>
     <div class="ui-calendario__atalhos">chips</div><div class="ui-calendario__rodape"><p class="ui-calendario__resumo">…</p><button class="ui-botao ui-botao--primario">Usar 16/10</button></div></div> */
.ui-data { position: relative; display: flex; align-items: center; min-width: 0; }
.ui-data > .ui-data__entrada { width: 100%; padding-right: 52px; font-variant-numeric: tabular-nums; }
.ui-data > .ui-data__botao { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }
.ui-data__ancora { position: relative; display: flex; flex-direction: column; min-width: 0; }
.ui-calendario {
  margin: 0; padding: var(--esp-3); inset: auto; width: min(21rem, calc(100vw - 32px));
  border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); color: var(--tinta);
  box-shadow: var(--sombra-flutuante);
}
.ui-calendario:popover-open, .ui-calendario--previa { display: flex; flex-direction: column; gap: var(--esp-3); }
.ui-calendario--previa { position: relative; max-width: 100%; margin-top: var(--esp-1); }
.ui-calendario--largo { width: min(36rem, calc(100vw - 32px)); container-type: inline-size; }
.ui-calendario__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); }
.ui-calendario__mes { margin: 0; font-size: 16px; font-weight: 700; text-align: center; }
.ui-calendario__grade { width: 100%; border-collapse: separate; border-spacing: 0 2px; table-layout: fixed; }
.ui-calendario__grade th { padding: var(--esp-1) 0; font-size: 13px; font-weight: 700; color: var(--tinta-2); text-align: center; }
.ui-calendario__grade td { padding: 0; text-align: center; }
.ui-calendario__dia {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 40px; padding: 0;
  border: 1px solid transparent; border-radius: var(--raio-p); background: transparent; color: var(--tinta);
  font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; cursor: pointer;
}
.ui-calendario__dia:hover { background: var(--superficie-suave); border-color: var(--linha-media); }
.ui-calendario__dia.esta-fora { color: var(--tinta-3); }
.ui-calendario__dia[aria-current="date"] { border-color: var(--marca); font-weight: 700; }
.ui-calendario__dia.esta-no-periodo { border-radius: 0; background: var(--marca-suave); color: var(--tinta); }
.ui-calendario__dia[aria-selected="true"], .ui-calendario__dia.esta-inicio, .ui-calendario__dia.esta-fim { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); font-weight: 700; }
.ui-calendario__dia.esta-inicio { border-radius: var(--raio-p) 0 0 var(--raio-p); }
.ui-calendario__dia.esta-fim { border-radius: 0 var(--raio-p) var(--raio-p) 0; }
.ui-calendario__dia:disabled { background: transparent; border-color: transparent; color: var(--tinta-3); text-decoration: line-through; cursor: not-allowed; }
.ui-calendario__meses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-2); }
.ui-calendario__meses > .ui-calendario__dia { height: var(--alvo); font-size: 15px; }
.ui-calendario__atalhos { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.ui-calendario__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2); }
.ui-calendario__corpo { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
.ui-calendario__meses-lado { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); }
.ui-calendario__rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-3); padding-top: var(--esp-3); border-top: 1px solid var(--linha); }
.ui-calendario__resumo { margin: 0; font-size: 14px; color: var(--tinta-2); }
.ui-calendario__resumo > strong { color: var(--tinta); }
.ui-calendario__motivo { margin: 0; font-size: 14px; color: var(--tinta-2); }
@container (min-width: 34rem) {
  .ui-calendario__corpo { display: grid; grid-template-columns: 10rem minmax(0, 1fr); align-items: start; }
  .ui-calendario__corpo > .ui-calendario__atalhos { flex-direction: column; flex-wrap: nowrap; }
  .ui-calendario__corpo > .ui-calendario__atalhos > .ui-chip { justify-content: flex-start; }
}
.ui-calendario--folha { width: 100%; border-radius: var(--raio-g) var(--raio-g) 0 0; }
/* Aberto na tela: sobre o conteúdo, colado embaixo do que foi clicado (o casca.js põe top/left a partir do campo). */
.ui-periodo__ancora > .ui-calendario--previa { position: absolute; top: 100%; left: 0; z-index: 3; max-width: none; }
@media (max-width: 599px) {
  .ui-periodo { position: relative; }
  .ui-periodo__ancora { position: static; }
  .ui-periodo__ancora > .ui-calendario--previa { left: 0; right: 0; width: auto; }
}
@media (max-width: 599px) {
  .ui-calendario:popover-open { position: fixed; inset: auto 0 0 0; width: 100%; max-height: 85vh; overflow-y: auto; border-radius: var(--raio-g) var(--raio-g) 0 0; }
}

/* Catálogo de ícones (só no design system) */
.ui-icones { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 112px), 1fr)); gap: var(--esp-2); }
.ui-icones > figure { display: flex; flex-direction: column; align-items: center; gap: var(--esp-2); padding: var(--esp-3) var(--esp-1); border-radius: var(--raio-m); background: var(--superficie); color: var(--tinta); }
.ui-icones figcaption { font-family: var(--font-mono); font-size: 12px; color: var(--tinta-2); text-align: center; overflow-wrap: anywhere; }

/* ══ IMPRESSÃO ═════════════════════════════════════════════════════════════
   Uma regra: o que vai para o papel usa os tokens papel-* (o mesmo valor no claro e no escuro).

   1. Qualquer tela imprime limpa. Ctrl P numa lista, numa ficha ou num relatório: a casca e os botões somem, o
      conteúdo ocupa a folha A4, as cores viram as do papel (o escuro também sai branco), linha de tabela, par e
      cartão não partem no meio, e cada folha diz "Página 2 de 5" no rodapé. O que precisa sair no papel não fica
      em details fechado nem em aba escondida: a impressão não abre nada.
   2. Documento é página própria (/…/imprimir), feita de folhas: receita, recibo, plano de tratamento, espelho de
      ponto, holerite, ficha. A página tem a barra (só na tela) e uma ui-folha por folha ou via. Comprovante de
      balcão é ui-cupom (bobina de 80 mm da impressora térmica).

   <main class="ui-documento">
     <nav class="ui-documento__barra" aria-label="Documento">
       <a class="ui-botao ui-botao--fantasma" href="…">Voltar</a>
       <div class="ui-acoes"><button class="ui-botao ui-botao--secundario">Enviar no WhatsApp</button>
         <button class="ui-botao ui-botao--primario" type="button" data-imprimir>Imprimir ou salvar em PDF</button></div>
     </nav>
     <article class="ui-folha" aria-labelledby="f1">
       <header class="ui-folha__cab">
         <div class="ui-folha__emissor"><strong>Pokotucho Clínica Veterinária</strong><span>CNPJ · endereço · telefone</span></div>
         <div class="ui-folha__doc"><h1 class="ui-folha__titulo" id="f1">Receituário</h1><p class="ui-folha__via">1ª via · farmácia</p></div>
       </header>
       <dl class="ui-folha__campos"><div><dt>Paciente</dt><dd>Thor</dd></div>…</dl>
       <section class="ui-folha__corpo">… texto, ui-tabela, listas …</section>
       <div class="ui-folha__assinaturas"><div class="ui-folha__assinatura"><span class="ui-folha__linha"></span>
         <strong>Dra. Helena Prado</strong><span>CRMV-TO 0000</span></div></div>
       <footer class="ui-folha__rodape"><span>Emitido em 16/10/2026</span>
         <span class="ui-folha__verificacao"><svg class="ui-grafico ui-folha__qr" role="img" aria-label="QR de verificação">…</svg>Confira em …/v/K7P2</span></footer>
     </article>
   </main>
   <article class="ui-cupom"><header class="ui-cupom__cab"><strong>Pokotucho</strong><span>…</span></header>
     <dl class="ui-cupom__linhas"><div><dt>Banho · Thor</dt><dd>R$ 85,00</dd></div></dl>
     <p class="ui-cupom__total"><span>Total</span><span>R$ 85,00</span></p><p class="ui-cupom__rodape">…</p></article>

   - O "Imprimir" chama window.print() pelo JS da casca (data-imprimir), nunca por onclick. data-imprimir="auto" imprime
     ao abrir (o cupom do balcão).
   - ui-so-tela some no papel; ui-so-papel só aparece no papel ("Impresso em 16/10/2026 14:32 por Joana Lima").
   - A folha e o cupom já usam o papel na tela: no escuro, o documento continua branco, como vai sair. */
.ui-folha, .ui-cupom {
  --fundo: var(--papel); --superficie: var(--papel); --superficie-suave: var(--papel-suave); --superficie-suave-forte: var(--papel-suave);
  --fundo-barra: var(--papel-suave); --tinta: var(--papel-tinta); --tinta-2: var(--papel-tinta-2); --tinta-3: var(--papel-tinta-2);
  --linha: var(--papel-linha); --linha-media: var(--papel-linha); --linha-forte: var(--papel-linha-forte);
  --marca: var(--papel-marca); --marca-forte: var(--papel-marca); --marca-suave: var(--papel-suave); --marca-linha: var(--papel-linha);
  --ok: var(--papel-ok); --ok-fundo: var(--papel); --ok-linha: var(--papel-ok);
  --atencao: var(--papel-atencao); --atencao-fundo: var(--papel); --atencao-linha: var(--papel-atencao);
  --perigo: var(--papel-perigo); --perigo-fundo: var(--papel); --perigo-linha: var(--papel-perigo);
  --info: var(--papel-info); --info-fundo: var(--papel); --info-linha: var(--papel-info);
  --ia: var(--papel-ia); --ia-fundo: var(--papel); --ia-linha: var(--papel-ia);
  color-scheme: light; background: var(--papel); color: var(--papel-tinta);
}
.ui-documento { container-type: inline-size; display: flex; flex-direction: column; align-items: center; gap: var(--esp-5); padding: 0 var(--esp-4) var(--esp-10); background: var(--fundo); color: var(--tinta); }
.ui-documento__barra { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); width: 100%; max-width: 210mm; padding: var(--esp-3) 0; background: var(--fundo); }
.ui-folha {
  display: flex; flex-direction: column; gap: var(--esp-5); width: 100%; max-width: 210mm; min-width: 0;
  padding: var(--esp-10) var(--esp-10) var(--esp-8); border: 1px solid var(--linha); border-radius: var(--raio-p);
  font-size: 14px; line-height: 1.5; font-variant-numeric: tabular-nums;
}
@container (max-width: 520px) { .ui-folha { padding: var(--esp-5) var(--esp-4); } }
.ui-folha__cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--esp-3) var(--esp-6); padding-bottom: var(--esp-4); border-bottom: 2px solid var(--papel-linha-forte); }
.ui-folha__emissor { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-folha__emissor > strong { font-size: 18px; line-height: 1.3; color: var(--papel-marca); }
.ui-folha__emissor > span { font-size: 13px; color: var(--papel-tinta-2); }
.ui-folha__doc { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-left: auto; text-align: right; }
.ui-folha__titulo { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 700; }
.ui-folha__via { margin: 0; font-size: 13px; color: var(--papel-tinta-2); }
.ui-folha__campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--esp-3) var(--esp-5); margin: 0; }
.ui-folha__campos > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-bottom: var(--esp-1); border-bottom: 1px solid var(--papel-linha); }
.ui-folha__campos dt { font-size: 13px; color: var(--papel-tinta-2); }
.ui-folha__campos dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.ui-folha__corpo { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.ui-folha__corpo > h2 { margin: var(--esp-2) 0 0; font-size: 16px; line-height: 1.35; }
.ui-folha__assinaturas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--esp-8); margin-top: var(--esp-6); }
.ui-folha__assinatura { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; text-align: center; color: var(--papel-tinta-2); }
.ui-folha__assinatura > strong { font-size: 14px; color: var(--papel-tinta); }
.ui-folha__linha { align-self: stretch; height: var(--esp-10); margin-bottom: var(--esp-1); border-bottom: 1px solid var(--papel-linha-forte); }
.ui-folha__rodape { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--esp-2) var(--esp-5); margin-top: auto; padding-top: var(--esp-3); border-top: 1px solid var(--papel-linha); font-size: 13px; color: var(--papel-tinta-2); }
.ui-folha__verificacao { display: flex; align-items: center; gap: var(--esp-2); }
.ui-folha__verificacao > .ui-folha__qr { flex: none; width: 64px; height: 64px; }
.ui-folha__qr rect, .ui-folha__qr path { fill: var(--papel-tinta); }
.ui-cupom {
  display: flex; flex-direction: column; gap: var(--esp-2); width: 100%; max-width: 80mm; padding: var(--esp-4) var(--esp-3);
  border: 1px dashed var(--papel-linha); font-family: var(--font-mono); font-size: 13px; line-height: 1.4; page: cupom;
}
.ui-cupom__cab { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.ui-cupom__cab > strong { font-size: 14px; text-transform: uppercase; }
.ui-cupom__linhas { display: flex; flex-direction: column; gap: var(--esp-1); margin: 0; padding: var(--esp-2) 0; border-block: 1px dashed var(--papel-linha-forte); }
.ui-cupom__linhas > div { display: flex; justify-content: space-between; gap: var(--esp-3); }
.ui-cupom__linhas dt { min-width: 0; overflow-wrap: anywhere; }
.ui-cupom__linhas dd { margin: 0; white-space: nowrap; }
.ui-cupom__total { display: flex; justify-content: space-between; gap: var(--esp-3); margin: 0; font-size: 14px; font-weight: 700; }
.ui-cupom__rodape { margin: 0; text-align: center; color: var(--papel-tinta-2); }
.ui-so-papel { display: none; }

@page {
  size: A4; margin: 14mm 14mm 16mm;
  @bottom-right { content: "Página " counter(page) " de " counter(pages); font-family: var(--font-sans); font-size: 13px; color: var(--papel-tinta-2); }
}
@page cupom { size: auto; margin: 2mm; @bottom-right { content: none; } }

@media print {
  :root:root, [data-theme][data-theme] {
    --fundo: var(--papel); --superficie: var(--papel); --superficie-suave: var(--papel-suave); --superficie-suave-forte: var(--papel-suave);
    --fundo-barra: var(--papel-suave); --tinta: var(--papel-tinta); --tinta-2: var(--papel-tinta-2); --tinta-3: var(--papel-tinta-2);
    --linha: var(--papel-linha); --linha-media: var(--papel-linha); --linha-forte: var(--papel-linha-forte);
    --marca: var(--papel-marca); --marca-forte: var(--papel-marca); --marca-suave: var(--papel-suave); --marca-linha: var(--papel-linha);
    --ok: var(--papel-ok); --ok-fundo: var(--papel); --ok-linha: var(--papel-ok);
    --atencao: var(--papel-atencao); --atencao-fundo: var(--papel); --atencao-linha: var(--papel-atencao);
    --perigo: var(--papel-perigo); --perigo-fundo: var(--papel); --perigo-linha: var(--papel-perigo);
    --info: var(--papel-info); --info-fundo: var(--papel); --info-linha: var(--papel-info);
    --ia: var(--papel-ia); --ia-fundo: var(--papel); --ia-linha: var(--papel-ia);
    color-scheme: light;
  }
  body { background: var(--papel); color: var(--papel-tinta); }
  .ui-topo, .ui-trilho, .ui-menu-lateral, .ui-frequentes, .ui-barra-fixa, .ui-toasts, .ui-toast, .ui-paleta,
  .ui-documento__barra, .ui-botao, .ui-copiar, .ui-so-tela { display: none; }
  .ui-so-papel { display: revert; }
  .ui-cartao { box-shadow: none; border: 1px solid var(--linha); }
  .ui-tabela { overflow: visible; border-radius: 0; }
  .ui-tabela thead th { position: static; }
  .ui-tabela tr, .ui-pares > div, .ui-folha__campos > div, .ui-folha__assinaturas, .ui-folha__rodape, .ui-aviso, .ui-grafico, figure, img { break-inside: avoid; }
  h1, h2, h3, .ui-cartao__titulo { break-after: avoid; }
  a { color: inherit; text-decoration: none; }
  .ui-documento { display: block; padding: 0; background: none; }
  .ui-folha, .ui-cupom { max-width: none; padding: 0; border: 0; border-radius: 0; }
  .ui-folha + .ui-folha { break-before: page; }
  .ui-cupom { width: 72mm; }
}



/* ── Ações frequentes (no topo da tela, abaixo do BarraTopo)
   As ações que a pessoa mais usa: as que ela fixou primeiro, depois as que o flow aprendeu (as 6 mais usadas em 30 dias,
   por pessoa e empresa). Sempre verbos que fazem algo ("Nova consulta", "Cobrar"), nunca nomes de página.
   <nav class="ui-frequentes" aria-label="Ações frequentes">
     <a class="ui-frequente" href="/consultas/nova"><svg class="ui-icone">stethoscope</svg>Nova consulta<kbd class="ui-tecla">1</kbd></a>
     <a class="ui-frequente ui-frequente--fixada" href="…"><svg class="ui-icone">pin</svg>…</a>…
     <button class="ui-frequentes__todas" type="button"><svg class="ui-icone">search</svg>Todas as ações<kbd class="ui-tecla">Ctrl K</kbd></button>
   </nav>
   Teclas: Alt+1…Alt+9 na ordem da fila (a dica mostra só o número). No celular a fila rola de lado e as teclas somem. */
/* Largo: a fila quebra em linhas (nada fica escondido). Estreito (conteúdo < 480 px, o celular): uma linha só, que rola
   de lado; o item cortado na borda mostra que há mais. */
.ui-frequentes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); min-width: 0; }
.ui-frequente, .ui-frequentes__todas {
  flex: none; display: inline-flex; align-items: center; gap: var(--esp-2);
  min-height: var(--chip); padding: 0 var(--esp-3) 0 var(--esp-3);
  border: 1px solid var(--linha-media); border-radius: var(--raio-m);
  background: var(--superficie); color: var(--tinta);
  font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ui-frequente > .ui-icone { color: var(--marca); }
.ui-frequente > .ui-tecla, .ui-frequentes__todas > .ui-tecla { min-width: 22px; height: 22px; padding: 0 5px; font-size: 12px; }
.ui-frequente:hover, .ui-frequentes__todas:hover { background: var(--superficie-suave); border-color: var(--linha-forte); }
.ui-frequente:focus-visible, .ui-frequentes__todas:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
/* Fixada pela pessoa: um alfinete pequeno antes do texto, além do ícone da ação. */
.ui-frequente__fixa { width: 14px; height: 14px; color: var(--tinta-3); }
.ui-frequentes__todas { margin-left: auto; border-style: dashed; color: var(--tinta-2); }
.ui-frequentes__todas > .ui-icone { color: var(--tinta-2); }
/* Primeiro dia: ainda não há o que mostrar. */
.ui-frequentes__vazio { display: flex; align-items: center; gap: var(--esp-2); color: var(--tinta-2); font-size: 14px; }
.ui-frequentes--rola { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 2px; }
.ui-frequentes--rola > * { scroll-snap-align: start; }
@container (max-width: 480px) {
  .ui-frequentes { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 2px; }
  .ui-frequentes > * { scroll-snap-align: start; }
  .ui-frequente > .ui-tecla, .ui-frequentes__todas > .ui-tecla { display: none; }
  .ui-frequentes__todas { margin-left: 0; }
}
@media (pointer: coarse) {
  .ui-frequente > .ui-tecla, .ui-frequentes__todas > .ui-tecla { display: none; }
}
/* Quantas cabem: 6 no computador, 4 no celular (decisão do dono, 17/10). Abaixo de 720 px a 5ª e a 6ª somem; o
   "Todas as ações" (um button, fora da conta) fica sempre. */
@media (max-width: 720px) {
  .ui-frequente:nth-of-type(n+5) { display: none; }
}
/* Editar a fila (dentro da Gaveta "Ações frequentes"): cada linha com alfinete e ordem. */
.ui-frequentes-editar { display: flex; flex-direction: column; }
.ui-frequentes-editar__linha { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--esp-3); min-height: var(--linha-min); padding: var(--esp-2) 0; border-top: 1px solid var(--linha); }
.ui-frequentes-editar__linha:first-child { border-top: 0; }
.ui-frequentes-editar__linha > .ui-icone { color: var(--marca); }
.ui-frequentes-editar__uso { font-size: 14px; color: var(--tinta-3); white-space: nowrap; }

/* ── Paleta de ações (Ctrl K, "/" ou o campo do topo)
   Uma busca só para fazer, ir e achar: ações (verbos), páginas ("Ir para", com g+letra), registros (clientes, pets, OS)
   e, por último, "Pedir à Íris" com o texto digitado. Padrão combobox: o foco fica no campo, as setas movem a escolha.
   <div class="ui-paleta" role="dialog" aria-modal="true" aria-label="Ações e busca">   (--previa no catálogo)
     <div class="ui-paleta__campo"><svg class="ui-icone">search</svg>
       <input class="ui-paleta__entrada" role="combobox" aria-expanded="true" aria-controls="pa-lista" aria-activedescendant="pa-1" placeholder="O que você quer fazer?">
       <kbd class="ui-tecla">Esc</kbd></div>
     <div class="ui-paleta__lista" id="pa-lista" role="listbox" aria-label="Resultados">
       <div class="ui-paleta__grupo" role="group" aria-labelledby="pg-1"><p class="ui-paleta__titulo" id="pg-1">Ações</p>
         <div class="ui-paleta__item" role="option" id="pa-1" aria-selected="true"><svg class="ui-icone">plus</svg>
           <span class="ui-paleta__texto"><span><mark>Cob</mark>rar fatura</span><span class="ui-paleta__onde">Dinheiro</span></span>
           <kbd class="ui-tecla">C</kbd></div>…</div>…</div>
     <div class="ui-paleta__rodape"><span><kbd class="ui-tecla">↑</kbd><kbd class="ui-tecla">↓</kbd> escolher</span>…</div>
   </div> */
.ui-paleta {
  container-type: inline-size; display: flex; flex-direction: column;
  width: min(640px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 96px));
  border: 1px solid var(--linha); border-radius: var(--raio-g); background: var(--superficie); color: var(--tinta);
  box-shadow: var(--sombra-gaveta); overflow: hidden;
}
.ui-paleta--previa { position: relative; width: 100%; max-width: 640px; margin: 0 auto; }
.ui-paleta__campo { position: relative; display: flex; align-items: center; gap: var(--esp-3); padding: 0 var(--esp-4); border-bottom: 1px solid var(--linha); }
.ui-paleta__campo > .ui-icone { color: var(--tinta-2); }
.ui-paleta__entrada { flex: 1 1 auto; min-width: 0; min-height: 60px; padding: 0; border: 0; background: transparent; color: var(--tinta); font: inherit; font-size: 18px; }
.ui-paleta__entrada::placeholder { color: var(--tinta-3); }
.ui-paleta__entrada:focus { outline: none; }
.ui-paleta__campo:focus-within { box-shadow: inset 0 -2px 0 var(--marca); }
.ui-paleta__lista { flex: 1 1 auto; overflow-y: auto; padding: var(--esp-2); }
.ui-paleta__grupo + .ui-paleta__grupo { margin-top: var(--esp-2); padding-top: var(--esp-2); border-top: 1px solid var(--linha); }
.ui-paleta__titulo { padding: var(--esp-1) var(--esp-3); font-size: 13px; font-weight: 700; color: var(--tinta-2); text-transform: none; }
.ui-paleta__item {
  display: flex; align-items: center; gap: var(--esp-3); min-height: var(--alvo); padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-m); color: var(--tinta); cursor: pointer; text-decoration: none;
}
.ui-paleta__item > .ui-icone { color: var(--tinta-2); }
.ui-paleta__item:hover { background: var(--superficie-suave); }
.ui-paleta__item[aria-selected="true"] { background: var(--marca-suave); box-shadow: inset 3px 0 0 var(--marca); }
.ui-paleta__item[aria-selected="true"] > .ui-icone { color: var(--marca); }
.ui-paleta__texto { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.ui-paleta__texto > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-paleta__onde { font-size: 14px; color: var(--tinta-2); }
.ui-paleta__item mark { background: transparent; color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--marca-linha); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.ui-paleta__item > .ui-tecla, .ui-paleta__teclas { flex: none; }
.ui-paleta__teclas { display: inline-flex; gap: 4px; }
/* "Pedir à Íris": sempre o último, no tom ia, com o texto digitado entre aspas. */
.ui-paleta__item--iris > .ui-icone { color: var(--ia); }
.ui-paleta__item--iris .ui-paleta__onde { color: var(--ia); }
.ui-paleta__item--iris[aria-selected="true"] { background: var(--ia-fundo); box-shadow: inset 3px 0 0 var(--ia); }
.ui-paleta__item--perigo > .ui-icone, .ui-paleta__item--perigo .ui-paleta__texto > :first-child { color: var(--perigo); }
.ui-paleta__vazio { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-2); padding: var(--esp-4) var(--esp-3); color: var(--tinta-2); }
.ui-paleta__rodape { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); padding: var(--esp-2) var(--esp-4); border-top: 1px solid var(--linha); background: var(--superficie-suave); font-size: 13px; color: var(--tinta-2); }
.ui-paleta__rodape > span { display: inline-flex; align-items: center; gap: 4px; }
.ui-paleta__rodape .ui-tecla { min-width: 22px; height: 22px; padding: 0 5px; font-size: 12px; }
/* Celular: tela inteira, campo no alto, linhas de toque, sem rodapé de teclas. */
@container (max-width: 480px) {
  .ui-paleta__item > .ui-tecla, .ui-paleta__teclas, .ui-paleta__campo > .ui-tecla { display: none; }
  .ui-paleta__item { min-height: 56px; }
}
.ui-paleta--tela { width: 100%; max-height: none; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
.ui-paleta--tela .ui-paleta__rodape { display: none; }

/* ── Menu lateral com busca (o menu inteiro, aberto; o Trilho é a versão curta)
   Todas as áreas que a pessoa vê, por grupo de trabalho, com o campo que filtra na hora (sem servidor, sem acento),
   as fixadas no alto e o contador ao vivo. Sem atalho por letra (decisão de 16/10: atalhos só os principais).
   <nav class="ui-menu-lateral" aria-label="Menu">
     <div class="ui-menu-lateral__busca ui-busca"><svg class="ui-icone">search</svg><input class="ui-entrada" type="search" placeholder="Buscar no menu"></div>
     <div class="ui-menu-lateral__grupo"><p class="ui-menu-lateral__titulo">Fixadas</p>
       <a class="ui-menu-lateral__item" aria-current="page" href="/hoje"><svg class="ui-icone">house</svg><span class="ui-menu-lateral__nome">Hoje</span>
         <span class="ui-menu-lateral__n">4</span></a>…</div>…
     <div class="ui-menu-lateral__pe"><button class="ui-menu-lateral__recolher">…Recolher</button></div>
   </nav>
   Filtrando: os grupos sem resultado somem e o trecho que bateu vai em <mark>. Nada achado: ui-menu-lateral__vazio com o
   botão que abre a Paleta de ações. No celular abre como Gaveta de tela inteira pelo "Mais" do trilho em barra. */
.ui-menu-lateral {
  container-type: inline-size; display: flex; flex-direction: column; gap: var(--esp-3);
  width: 272px; max-width: 100%; padding: var(--esp-4) var(--esp-3); background: var(--superficie); border-right: 1px solid var(--linha);
}
.ui-menu-lateral--tela { width: 100%; border-right: 0; }
.ui-menu-lateral__busca .ui-entrada { min-height: 44px; font-size: 16px; }
.ui-menu-lateral__grupo { display: flex; flex-direction: column; gap: 2px; }
.ui-menu-lateral__titulo { padding: var(--esp-2) var(--esp-3) var(--esp-1); font-size: 13px; font-weight: 700; color: var(--tinta-2); }
.ui-menu-lateral__item {
  display: flex; align-items: center; gap: var(--esp-3); min-height: 44px; padding: 0 var(--esp-2) 0 var(--esp-3);
  border-radius: var(--raio-m); color: var(--tinta-2); font-weight: 700; text-decoration: none;
  transition: background-color 0.15s ease;
}
.ui-menu-lateral__item:hover { background: var(--superficie-suave); color: var(--tinta); }
.ui-menu-lateral__item[aria-current="page"] { background: var(--marca-suave); color: var(--marca); }
.ui-menu-lateral__item:focus-visible { outline: 3px solid var(--foco); outline-offset: -1px; }
.ui-menu-lateral__nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-menu-lateral__item mark { background: transparent; color: inherit; text-decoration: underline; text-decoration-color: var(--marca-linha); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.ui-menu-lateral__n { min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--raio-pilula); background: var(--superficie-suave-forte); color: var(--tinta); font-size: 13px; line-height: 24px; text-align: center; }
/* Contador que pede atenção (cobrança vencida, caixa aberto, queda): tom de atenção, com texto no aria-label do link. */
.ui-menu-lateral__n--quente { background: var(--atencao-fundo); color: var(--atencao); box-shadow: inset 0 0 0 1px var(--atencao-linha); }
.ui-menu-lateral__item > .ui-tecla { min-width: 0; height: 22px; padding: 0 5px; font-size: 12px; font-weight: 400; }
.ui-menu-lateral__vazio { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-2); padding: var(--esp-3); color: var(--tinta-2); font-size: 14px; }
.ui-menu-lateral__vazio > .ui-botao { max-width: 100%; white-space: normal; text-align: left; }
.ui-menu-lateral__pe { margin-top: auto; padding-top: var(--esp-3); border-top: 1px solid var(--linha); }
.ui-menu-lateral__recolher { display: flex; align-items: center; gap: var(--esp-2); width: 100%; min-height: 44px; padding: 0 var(--esp-3); border: 0; border-radius: var(--raio-m); background: transparent; color: var(--tinta-2); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.ui-menu-lateral__recolher:hover { background: var(--superficie-suave); color: var(--tinta); }
.ui-menu-lateral__recolher > .ui-tecla { margin-left: auto; height: 22px; font-size: 12px; }
@container (max-width: 300px) { .ui-menu-lateral__item > .ui-tecla { display: none; } }
@media (pointer: coarse) {
  .ui-menu-lateral__item > .ui-tecla, .ui-menu-lateral__recolher > .ui-tecla { display: none; }
  .ui-menu-lateral__item { min-height: 52px; }
}


/* Lote D · Íris, decisão e dinheiro. Só tokens (var(--…)), prefixo ui-, estado por esta-* ou ARIA.
   Cada composto abaixo traz a marcação mínima no comentário acima das suas regras. */

/* ══ ÍRIS ═════════════════════════════════════════════════════════════════ */

/* PropostaIris
   <section class="ui-cartao ui-proposta"><div class="ui-cartao__topo"><div class="ui-proposta__quem"><span class="ui-redondo ui-redondo--ia">…</span><h2 class="ui-cartao__titulo">Proposta da Íris</h2></div><span class="ui-etiqueta ui-etiqueta--ia">…</span></div>
     <p class="ui-proposta__pedido">"Você pediu: …"</p><p class="ui-proposta__resumo">…</p>
     <ol class="ui-proposta__passos"><li class="ui-proposta__passo esta-ok"><span class="ui-proposta__num">1</span><div class="ui-proposta__corpo"><p class="ui-proposta__titulo">…</p><dl class="ui-pares ui-proposta__previa">…</dl></div><span class="ui-etiqueta ui-etiqueta--ok">Feito</span></li></ol>
     <footer class="ui-cartao__rodape"><div class="ui-acoes">…</div></footer></section>
   Passo: esta-ok | esta-aguardando | esta-executando | esta-falhou. Feita: ui-cartao--feito. */
.ui-proposta { gap: var(--esp-4); }
.ui-proposta__quem { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; }
.ui-proposta__pedido { color: var(--tinta-2); }
.ui-proposta__resumo { font-size: 18px; line-height: 1.35; }
.ui-proposta__passos { display: flex; flex-direction: column; }
.ui-proposta__passo { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--esp-3); align-items: start; padding: var(--esp-3) 0; border-top: 1px solid var(--linha); }
.ui-proposta__passo:first-child { border-top: 0; }
.ui-proposta__num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--raio-pilula); border: 2px solid var(--linha-forte); background: var(--superficie); color: var(--tinta-2); font-size: 14px; font-weight: 700; }
.ui-proposta__corpo { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }
.ui-proposta__titulo { font-weight: 700; }
.ui-proposta__previa { font-size: 14px; }
.ui-proposta__passo.esta-ok .ui-proposta__num { background: var(--ok-fundo); border-color: var(--ok); color: var(--ok); }
.ui-proposta__passo.esta-executando .ui-proposta__num { border-color: var(--marca); color: var(--marca); }
.ui-proposta__passo.esta-aguardando .ui-proposta__titulo { color: var(--tinta-2); }
.ui-proposta__passo.esta-falhou .ui-proposta__num { background: var(--perigo-fundo); border-color: var(--perigo); color: var(--perigo); }
.ui-proposta__passo.esta-falhou .ui-proposta__titulo { color: var(--perigo); }

/* CampoSugerido: valor que a Íris leu. Sem o e-sugerido, é um campo comum.
   <div class="ui-campo e-sugerido"><label class="ui-campo__rotulo" for="c1">CPF do tutor</label>
     <div class="ui-campo__ia"><span class="ui-etiqueta ui-etiqueta--ia">…Lido pela Íris na nota</span><div class="ui-acoes">…Usar · Descartar</div></div>
     <input class="ui-entrada" id="c1"></div> */
.e-sugerido .ui-entrada { border-color: var(--ia); background: var(--ia-fundo); }
.ui-campo__ia { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); }
.ui-campo__ia .ui-botao { min-height: var(--chip); padding: 0 var(--esp-3); font-size: 14px; }

/* RevisaoLadoALado: documento à esquerda, campos lidos à direita. Mais de 560 px em grade de 2.
   <div class="ui-revisao"><div class="ui-revisao__topo"><div class="ui-progresso">…</div></div>
     <div class="ui-revisao__doc"><p class="ui-revisao__doc-titulo">Holerite set/2026</p><p class="ui-mono">…</p></div>
     <div class="ui-revisao__campos"><div class="ui-campo e-sugerido">…</div></div></div>
   No celular: ui-revisao--pilha (ou a própria tela < 560 px). */
.ui-revisao { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--esp-6); align-items: start; }
.ui-revisao--pilha { grid-template-columns: minmax(0, 1fr); }
.ui-revisao__topo { grid-column: 1 / -1; }
.ui-revisao__doc { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-5); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie-suave); }
.ui-revisao__doc-titulo { font-weight: 700; }
.ui-revisao__campos { display: flex; flex-direction: column; gap: var(--esp-5); min-width: 0; }
@media (max-width: 560px) { .ui-revisao { grid-template-columns: minmax(0, 1fr); } }

/* RascunhoIA: texto que a Íris escreveu. Revisado, volta ao campo neutro.
   <div class="ui-aviso ui-aviso--ia" role="status">…</div><label class="ui-campo__rotulo" for="r1">…</label>
   <textarea class="ui-entrada ui-rascunho__texto" id="r1"></textarea> */
.ui-rascunho { display: flex; flex-direction: column; gap: var(--esp-4); }
.ui-rascunho__texto { border-color: var(--ia); min-height: 140px; }

/* LeituraComando: o que a Íris entendeu do comando, com chips para corrigir.
   <div class="ui-comando"><div class="ui-busca ui-busca--topo">…</div>
     <div class="ui-comando__leitura"><span class="ui-apoio">Entendi:</span><button class="ui-chip">Cobrar</button>…</div></div> */
.ui-comando { display: flex; flex-direction: column; gap: var(--esp-3); }
.ui-comando__leitura { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.ui-comando__escolhas { display: flex; flex-direction: column; gap: var(--esp-2); }

/* Hipoteses: lista ordenada por chance. Fonte sem resposta é etiqueta, nunca zero.
   <ol class="ui-hipoteses"><li class="ui-hipotese"><div class="ui-hipotese__topo"><p class="ui-hipotese__titulo">…</p><strong>72%</strong></div>
     <div class="ui-progresso"><div class="ui-progresso__trilho" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"><span class="ui-progresso__valor" style="--valor:72%"></span></div></div>
     <ul class="ui-hipotese__provas"><li class="ui-apoio">…<span class="ui-hipotese__fonte">ACS</span></li></ul></li></ol> */
.ui-hipoteses { display: flex; flex-direction: column; gap: var(--esp-4); }
.ui-hipotese { display: flex; flex-direction: column; gap: var(--esp-2); padding-bottom: var(--esp-4); border-bottom: 1px solid var(--linha); }
.ui-hipotese:last-child { border-bottom: 0; padding-bottom: 0; }
.ui-hipotese__topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-3); }
.ui-hipotese__titulo { font-size: 18px; line-height: 1.35; font-weight: 700; }
.ui-hipotese .ui-progresso__trilho { height: 6px; }
.ui-hipotese__provas { display: flex; flex-direction: column; gap: var(--esp-1); }
.ui-hipotese__provas > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.ui-hipotese__fonte { font-family: var(--font-mono); font-size: 14px; color: var(--tinta-3); }

/* Conversa: balões de até 75%; a Íris tem fundo ia; cada balão leva a hora.
   <div class="ui-conversa"><p class="ui-conversa__sistema">Hoje · 09:12</p>
     <div class="ui-balao ui-balao--cliente"><p>…</p><time class="ui-balao__hora">09:12</time></div></div>
   Atendente: ui-balao--atendente. Íris: ui-balao--iris com <p class="ui-balao__quem">. */
.ui-conversa { display: flex; flex-direction: column; gap: var(--esp-3); }
.ui-conversa__sistema { align-self: center; font-size: 14px; color: var(--tinta-3); }
.ui-balao { display: flex; flex-direction: column; gap: 4px; max-width: 75%; padding: 10px 14px; border: 1px solid var(--linha); border-radius: var(--raio-m); }
.ui-balao > p { margin: 0; }
.ui-balao--cliente { align-self: flex-start; background: var(--superficie-suave); }
.ui-balao--atendente { align-self: flex-end; background: var(--marca-suave); border-color: var(--marca-linha); }
.ui-balao--iris { align-self: flex-start; background: var(--ia-fundo); border-color: var(--ia-linha); }
.ui-balao__quem { display: flex; align-items: center; gap: var(--esp-1); font-size: 14px; font-weight: 700; color: var(--ia); }
.ui-balao__hora { align-self: flex-end; font-size: 14px; color: var(--tinta-2); }
.ui-compositor { display: flex; flex-direction: column; gap: var(--esp-2); padding-top: var(--esp-3); border-top: 1px solid var(--linha); }
.ui-compositor__linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); }
.ui-compositor__acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--esp-2); }
/* Áudio no balão (recebido ou enviado): tocar, trilha, tempo e velocidade. A transcrição é da Íris (tom ia) até alguém ouvir.
   <div class="ui-audio"><button class="ui-botao ui-botao--secundario ui-botao--icone ui-audio__tocar" aria-label="Ouvir o áudio de Ana, 0:42"><svg>play</svg></button>
   <div class="ui-audio__trilha"><div class="ui-progresso__trilho" role="progressbar" aria-label="Tocado" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"><span class="ui-progresso__valor" style="--valor:0%"></span></div></div>
   <span class="ui-audio__tempo">0:42</span><button class="ui-botao ui-botao--fantasma ui-audio__velocidade" aria-label="Velocidade 1x">1x</button></div>
   <details class="ui-transcricao" open><summary class="ui-transcricao__quem"><svg>sparkles</svg> Transcrição da Íris</summary><p>…</p></details> */
.ui-audio { display: flex; align-items: center; gap: var(--esp-2); min-width: min(16rem, 100%); }
.ui-audio__tocar { flex: none; }
.ui-balao:has(> .ui-audio) { width: min(20rem, 75%); }
.ui-audio__trilha { flex: 1 1 4rem; min-width: 3rem; }
.ui-audio__tempo { flex: none; font-size: 14px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.ui-audio .ui-audio__velocidade { flex: none; min-width: 44px; padding: 0 var(--esp-2); font-size: 14px; }
.ui-transcricao { display: flex; flex-direction: column; gap: 4px; padding: var(--esp-2) var(--esp-3); border: 1px solid var(--ia-linha); border-radius: var(--raio-p); background: var(--ia-fundo); }
.ui-transcricao > p { margin: 0; }
.ui-transcricao__quem { display: flex; align-items: center; gap: var(--esp-1); font-size: 13px; font-weight: 700; color: var(--ia); cursor: pointer; list-style: none; }
.ui-transcricao__quem::-webkit-details-marker { display: none; }
.ui-transcricao--falhou { border-color: var(--atencao-linha); background: var(--atencao-fundo); }
.ui-transcricao--falhou .ui-transcricao__quem { color: var(--atencao); cursor: default; }
.ui-anexo { display: flex; align-items: center; gap: var(--esp-2); min-width: 0; padding: var(--esp-2) var(--esp-3); border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--superficie); color: var(--tinta); text-decoration: none; }
.ui-anexo__nome { font-weight: 700; overflow-wrap: anywhere; }
.ui-anexo__tamanho { margin-left: auto; font-size: 14px; color: var(--tinta-2); white-space: nowrap; }
.ui-balao__estado { display: inline-flex; align-items: center; gap: 4px; }
/* Ferramentas do compositor: respostas prontas (também com "/" no campo) e a ajuda da Íris. A Íris nunca envia:
   o que ela escreve cai no campo para a pessoa revisar.
   <div class="ui-compositor__ferramentas" role="group" aria-label="Ajuda para escrever"><button class="ui-chip">…Respostas prontas</button>…</div> */
.ui-compositor__ferramentas { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.ui-chip.ui-chip--ia { border-color: var(--ia-linha); color: var(--ia); }
.ui-respostas { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-3); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); box-shadow: var(--sombra-flutuante); }
.ui-respostas__lista { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ui-respostas__item { display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: var(--alvo); padding: var(--esp-2) var(--esp-3); border: 0; border-radius: var(--raio-p); background: transparent; color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
.ui-respostas__item:hover, .ui-respostas__item[aria-selected="true"] { background: var(--marca-suave); }
.ui-respostas__previa { font-size: 14px; color: var(--tinta-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ui-respostas__nota { margin: 0; font-size: 14px; color: var(--tinta-2); }
/* Gravando áudio: a barra toma o lugar do campo até parar.
   <div class="ui-gravando" role="status"><span class="ui-gravando__ponto"></span><span class="ui-gravando__tempo">Gravando · 0:12</span><div class="ui-gravando__acoes">…</div></div> */
.ui-gravando { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); padding: var(--esp-2) var(--esp-3); border: 1px solid var(--perigo-linha); border-radius: var(--raio-m); background: var(--perigo-fundo); }
.ui-gravando__ponto { flex: none; width: 10px; height: 10px; border-radius: var(--raio-pilula); background: var(--perigo); }
@media (prefers-reduced-motion: no-preference) { .ui-gravando__ponto { animation: ui-gravando-pulso 1.2s ease-in-out infinite; } }
@keyframes ui-gravando-pulso { 50% { opacity: 0.35; } }
.ui-gravando__tempo { font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-gravando__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-left: auto; }
.ui-compositor__mais { flex: none; }

/* ══ DECISÃO ══════════════════════════════════════════════════════════════ */

/* PedidoAprovacao: quem pediu, o quê, o valor e o motivo; o rodapé muda com quem olha.
   <section class="ui-cartao ui-pedido"><dl class="ui-pares ui-pedido__dados"><div><dt>Pediu</dt><dd>Lara</dd></div>…</dl>
     <footer class="ui-cartao__rodape"><div class="ui-acoes">…</div></footer></section> */
.ui-pedido { gap: var(--esp-4); }
.ui-pedido__motivo { color: var(--tinta-2); }
.ui-pedido__valor { font-size: 22px; font-weight: 700; }

/* AcaoComJustificativa: o campo abre no lugar do botão "Pular passo". Não edita nem apaga o que já foi escrito.
   <div class="ui-justificativa"><div class="ui-campo"><label class="ui-campo__rotulo" for="j1">Por que pular este passo?</label>
     <textarea class="ui-entrada" id="j1" aria-describedby="j1-c"></textarea><p class="ui-campo__contagem" id="j1-c">…</p></div>
     <div class="ui-acoes ui-acoes--fim">…</div></div> */
.ui-justificativa { display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-4); border: 1px solid var(--linha-media); border-radius: var(--raio-m); background: var(--superficie-suave); }
.ui-justificativa .ui-acoes { justify-content: flex-end; }
.ui-justificativa__pular { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-2); }

/* ConfirmacaoReforcada: duas janelas de prévia; o botão de perigo só liga quando o texto bate.
   <div class="ui-janela ui-janela--previa"><h2 class="ui-janela__titulo">…</h2><p class="ui-janela__texto">…</p>…</div> */
.ui-confirma { display: flex; flex-direction: column; gap: var(--esp-3); }
.ui-confirma__nota { font-size: 14px; color: var(--tinta-2); }

/* BotoesTransicao: etiqueta do estado atual e só as transições permitidas.
   <div class="ui-transicao"><span class="ui-etiqueta ui-etiqueta--info">Agendado</span><div class="ui-acoes">…</div></div> */
.ui-transicao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.ui-transicao__mais { position: relative; }

/* ══ DINHEIRO ═════════════════════════════════════════════════════════════ */

/* ValorReais: positivo, negativo com o sinal escrito, zero real, ausente ("—", nunca R$ 0,00).
   <p class="ui-valor"><span class="ui-valor__numero">R$ 99,90</span></p>
   <p class="ui-valor ui-valor--perigo"><span class="ui-valor__numero">−R$ 12,00</span></p>
   <p class="ui-valor ui-valor--vazio"><span class="ui-valor__numero" aria-label="sem valor">—</span></p> */
.ui-valor { display: flex; flex-direction: column; gap: 2px; }
.ui-valor__numero { font-size: 18px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.ui-valor--perigo .ui-valor__numero { color: var(--perigo); }
.ui-valor--vazio .ui-valor__numero { color: var(--tinta-3); }

/* PixCopiaECola: QR de 200 px desenhado pelo servidor (aqui, o ícone); código com copiar.
   <section class="ui-cartao ui-pix"><div class="ui-pix__cabeca"><p class="t-numero">R$ 99,90</p><p class="ui-apoio">Vence em 10/10/2026</p></div>
     <div class="ui-pix__qr" role="img" aria-label="QR Code do Pix"><svg class="ui-icone" data-icone="qr-code"></svg></div>
     <div class="ui-codigo"><code>…</code><button class="ui-botao ui-botao--secundario ui-copiar">…</button></div></section> */
.ui-pix { gap: var(--esp-4); }
.ui-pix__cabeca { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--esp-3); }
.ui-pix__qr { display: flex; align-items: center; justify-content: center; width: 200px; height: 200px; margin: 0 auto; border: 1px solid var(--linha-media); border-radius: var(--raio-m); background: var(--superficie); color: var(--tinta); }
.ui-pix__qr > .ui-icone { width: 96px; height: 96px; }
.ui-pix__pago { display: flex; flex-direction: column; align-items: center; gap: var(--esp-2); padding: var(--esp-6); border: 1px solid var(--ok-linha); border-radius: var(--raio-m); background: var(--ok-fundo); color: var(--ok); text-align: center; }
.ui-pix__valor { color: var(--ok); }
.ui-pix__luz { display: flex; align-items: center; gap: var(--esp-2); font-size: 14px; color: var(--tinta-2); }

/* FormasPagamento: escolha de forma, divisão em até 3 formas e o que falta.
   <div class="ui-escolhas">…<label class="ui-escolha"><input type="radio" class="ui-oculto" name="f" checked><svg class="ui-icone" data-icone="qr-code"></svg><strong>Pix</strong></label>…</div>
   <div class="ui-formas__resumo"><span class="ui-etiqueta ui-etiqueta--atencao">Falta R$ 34,00</span></div> */
.ui-formas { display: flex; flex-direction: column; gap: var(--esp-5); }
.ui-formas__escolha { align-items: flex-start; }
.ui-formas__escolha > .ui-icone { color: var(--tinta-2); }
.ui-formas__resumo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); }

/* TotalETroco: total grande, recebido em dinheiro e o troco ou o que falta.
   <div class="ui-total"><div class="ui-total__linha"><span>Total</span><span class="t-numero">R$ 85,00</span></div>…
     <p class="ui-total__resultado ui-total__resultado--ok"><span>Troco</span><span>R$ 15,00</span></p></div> */
.ui-total { display: flex; flex-direction: column; gap: var(--esp-4); }
.ui-total__linha { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-3); }
.ui-total__resultado { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie-suave); font-size: 22px; font-weight: 700; }
.ui-total__resultado--ok { background: var(--ok-fundo); border-color: var(--ok-linha); color: var(--ok); }
.ui-total__resultado--atencao { background: var(--atencao-fundo); border-color: var(--atencao-linha); color: var(--atencao); }
.ui-total__resultado > span:last-child { font-variant-numeric: tabular-nums; }

/* DiferencaFaixa: três valores, cada um com a faixa escrita. Só tom e texto; sem tira na borda.
   <div class="ui-diferenca ui-diferenca--ok"><p class="t-numero ui-diferenca__valor">R$ 0,00</p><span class="ui-etiqueta ui-etiqueta--ok">Bateu</span></div> */
.ui-diferenca { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-4) var(--esp-5); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie-suave); }
.ui-diferenca__valor { font-variant-numeric: tabular-nums; }
.ui-diferenca--ok { background: var(--ok-fundo); border-color: var(--ok-linha); }
.ui-diferenca--ok .ui-diferenca__valor { color: var(--ok); }
.ui-diferenca--atencao { background: var(--atencao-fundo); border-color: var(--atencao-linha); }
.ui-diferenca--atencao .ui-diferenca__valor { color: var(--atencao); }
.ui-diferenca--perigo { background: var(--perigo-fundo); border-color: var(--perigo-linha); }
.ui-diferenca--perigo .ui-diferenca__valor { color: var(--perigo); }

/* Conciliacao: a tabela e, abaixo, o histórico de justificativas (só cresce).
   <div class="ui-tabela ui-tabela--cartoes" role="region" aria-label="Conciliação" tabindex="0"><table>…</table></div>
   <ol class="ui-historico"><li class="ui-historico__item"><p class="ui-apoio">Lívia · 09:40</p><p>…</p></li></ol> */
.ui-conciliacao { display: flex; flex-direction: column; gap: var(--esp-5); }
.ui-historico { display: flex; flex-direction: column; }
.ui-historico__item { display: flex; flex-direction: column; gap: 2px; padding: var(--esp-3) 0; border-top: 1px solid var(--linha); }
.ui-historico__item:first-child { border-top: 0; }
.ui-historico__item > p { margin: 0; }
.ui-conciliacao__campo { display: flex; flex-direction: column; gap: var(--esp-3); }

/* SituacaoCobranca: as seis situações como etiqueta e na linha de uma fatura.
   <div class="ui-situacoes"><span class="ui-etiqueta ui-etiqueta--ok">Paga</span>…</div>
   <ul class="ui-lista"><li><div class="ui-lista__linha"><span class="ui-lista__texto"><strong>…</strong><span class="ui-apoio">…</span></span><span class="ui-lista__valor">R$ 99,90</span><span class="ui-etiqueta ui-etiqueta--ok">Paga</span></div></li></ul> */
.ui-situacoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
/* Linha de cobrança, na estrutura dos Signatários: o redondo com o ícone da situação à esquerda, a situação escrita
   no texto e o valor sempre na última coluna, alinhado à direita (os valores ficam um embaixo do outro).
   <div class="ui-lista__linha ui-cobranca-linha"><span class="ui-redondo ui-redondo--perigo"><svg class="ui-icone ui-icone--p" data-icone="triangle-alert"></svg></span>
   <span class="ui-lista__texto"><strong>Fatura 09/2026</strong><span class="ui-situacao ui-situacao--perigo">Vencida há 36 dias</span><span class="ui-apoio">Venceu em 10/09/2026</span></span>
   <span class="ui-lista__valor ui-valor-coluna"><span>R$ 103,10</span><span class="ui-apoio">com multa e juros</span></span></div> */
.ui-cobranca-linha .ui-lista__texto { gap: 2px; }
.ui-lista .ui-lista__linha.ui-cobranca-linha > .ui-lista__valor { margin-right: 0; }
.ui-situacao { display: inline-flex; align-items: center; gap: var(--esp-1); font-size: 14px; font-weight: 700; color: var(--tinta-2); }
.ui-situacao--marca { color: var(--marca); }
.ui-situacao--ok { color: var(--ok); }
.ui-situacao--atencao { color: var(--atencao); }
.ui-situacao--perigo { color: var(--perigo); }
.ui-situacao--info { color: var(--info); }
.ui-valor-coluna { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 7.5rem; font-variant-numeric: tabular-nums; }
.ui-valor-coluna > .ui-apoio { font-weight: 400; text-align: right; white-space: nowrap; }
.ui-valor-coluna--riscado > span:first-child { text-decoration: line-through; color: var(--tinta-2); }
@container (max-width: 420px) { .ui-valor-coluna > .ui-apoio { display: none; } .ui-valor-coluna { min-width: 0; } }
.ui-fatura-situacao { flex: none; }



/* Lote E: assinatura, comunicação e fontes externas (modelo 3). Só tokens; prefixo ui-. */

/* NivelAssinatura
   <ul class="ui-niveis"><li class="ui-nivel"><span class="ui-etiqueta ui-etiqueta--ok">…</span><p class="ui-apoio">…</p></li></ul> */
.ui-niveis { display: flex; flex-direction: column; gap: var(--esp-4); }
.ui-nivel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-1); }

/* Assinar (cartão do receituário; base: ui-cartao, ui-grupo, ui-segmentos, ui-codigo, ui-pares)
   <section class="ui-cartao ui-assinar"><div class="ui-segmentos ui-assinar__metodo" role="group" aria-label="Método">…</div>…</section> */
.ui-assinar { min-width: 0; }
.ui-assinar__metodo { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; }
.ui-assinar__metodo > .ui-segmentos__item { width: 100%; }
.ui-assinar__comprovante { padding-top: var(--esp-4); border-top: 1px solid var(--linha); }

/* CertificadoDigital (base: ui-cartao, ui-pares, ui-progresso, ui-etiqueta)
   <section class="ui-cartao ui-certificado"><div class="ui-cartao__topo">…</div><dl class="ui-pares ui-pares--coluna">…</dl><div class="ui-progresso ui-progresso--ok">…</div></section> */
.ui-certificado { min-width: 0; }

/* Aceite e lote de assinatura: contêineres (ui-cartao faz o visual)
   <section class="ui-cartao ui-aceite">…</section>   <section class="ui-cartao ui-assinatura-lote">…</section> */
.ui-aceite, .ui-assinatura-lote { min-width: 0; }

/* CodigoAceite: 6 dígitos grandes e centrados
   <div class="ui-campo"><label class="ui-campo__rotulo" for="cod">Código de 6 dígitos</label><input class="ui-entrada ui-aceite__digitos" id="cod" inputmode="numeric" maxlength="6"></div> */
.ui-aceite__digitos { font-size: 28px; font-weight: 700; line-height: 1.2; text-align: center; letter-spacing: 0.3em; }

/* LoteAssinatura: linha de documento com caixa, nome, sha256 e estado
   <ul class="ui-lista"><li class="ui-doc"><input type="checkbox" class="ui-caixa"><span class="ui-doc__texto"><strong>…</strong><span class="ui-doc__hash">sha256 …</span></span><span class="ui-etiqueta ui-etiqueta--ok">…</span></li></ul> */
.ui-doc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); min-height: var(--linha-min); padding: var(--esp-2) var(--esp-3); }
.ui-doc + .ui-doc { border-top: 1px solid var(--linha); }
.ui-doc__texto { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-doc__hash { font-family: var(--font-mono); font-size: 14px; line-height: 1.5; color: var(--tinta-2); overflow-wrap: anywhere; }

/* PendenciasAssinar: o que falta, com link para o campo
   <ul class="ui-pendencias"><li class="ui-pendencia"><code class="ui-pendencia__campo">[preencher: dose]</code><a class="ui-link" href="#dose">ir para o campo</a></li></ul> */
.ui-pendencias { display: flex; flex-direction: column; gap: var(--esp-2); margin-top: var(--esp-2); }
.ui-pendencia { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); min-height: var(--alvo); }
.ui-pendencia__campo { font-family: var(--font-mono); font-size: 14px; line-height: 1.5; color: var(--tinta); }

/* VerificacaoPublica: página sem casca, centrada
   <article class="ui-verificacao"><span class="ui-redondo ui-redondo--g ui-redondo--ok"><svg class="ui-icone ui-icone--g" data-icone="badge-check"></svg></span><h2 class="ui-verificacao__titulo">Documento válido</h2>…</article> */
.ui-verificacao { display: flex; flex-direction: column; align-items: center; gap: var(--esp-3); min-width: 0; padding: var(--esp-6) var(--esp-2); text-align: center; }
.ui-verificacao__titulo { font-size: 22px; line-height: 1.3; font-weight: 700; }
.ui-verificacao__texto { color: var(--tinta-2); max-width: 100%; overflow-wrap: anywhere; }
.ui-verificacao .ui-pares { width: 100%; text-align: left; }

/* VisorPdf: barra, corpo em superfície suave de 360 px; no celular só o botão
   <div class="ui-pdf"><header class="ui-pdf__barra">…</header><div class="ui-pdf__corpo">…</div></div>
   <div class="ui-pdf"><div class="ui-pdf__celular">…<a class="ui-botao ui-botao--primario ui-botao--largo">Abrir PDF</a></div></div> */
.ui-pdf { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); overflow: hidden; }
.ui-pdf__barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border-bottom: 1px solid var(--linha); }
.ui-pdf__nome { flex: 1 1 160px; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.ui-pdf__corpo { display: flex; align-items: center; justify-content: center; height: 360px; padding: var(--esp-6); background: var(--superficie-suave); color: var(--tinta-2); text-align: center; }
.ui-pdf__celular { display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-4); }
.ui-pdf__celular > .ui-pdf__nome { flex: none; }

/* TextoPronto: o texto com as quebras preservadas
   <div class="ui-texto-pronto__texto">Oi, Sérgio!<br>…</div> */
.ui-texto-pronto { min-width: 0; }
.ui-texto-pronto__texto { padding: var(--esp-4); border-radius: var(--raio-m); background: var(--superficie-suave); color: var(--tinta); white-space: pre-line; overflow-wrap: anywhere; }
.ui-texto-pronto__nota { color: var(--tinta-2); }

/* EnviarWhatsApp: janela de 24 h e modelos
   <div class="ui-whats"><div class="ui-aviso ui-aviso--ok" role="status">…</div></div> */
.ui-whats { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-3); min-width: 0; }
.ui-whats > .ui-aviso,
.ui-whats > .ui-campo,
.ui-whats > .ui-acoes { width: 100%; }

/* LinkUsoUnico: link em código, mostrado uma vez
   <div class="ui-cartao ui-link-unico"><div class="ui-codigo"><code>…</code><button class="ui-botao ui-botao--secundario ui-copiar">…</button></div></div> */
.ui-link-unico { min-width: 0; }
.ui-link-unico .ui-codigo > code { font-size: 14px; }
.ui-link-unico--usado .ui-codigo { background: var(--superficie-suave); }
.ui-link-unico--usado .ui-codigo > code { color: var(--tinta-3); text-decoration: line-through; }

/* EditorVariaveis: legenda de variáveis e prévia
   <div class="ui-variaveis" role="group" aria-label="Variáveis"><button class="ui-chip ui-chip--var" type="button">[tutor]</button></div>
   <div class="ui-previa"><div class="ui-previa__texto">…</div></div> */
.ui-variaveis { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.ui-chip--var { min-height: var(--chip); padding: 0 var(--esp-3); font-family: var(--font-mono); font-size: 14px; font-weight: 400; }
.ui-previa { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }
.ui-previa__texto { padding: var(--esp-4); border-radius: var(--raio-m); background: var(--superficie-suave); color: var(--tinta); white-space: pre-line; overflow-wrap: anywhere; }

/* FonteDado: um bloco de dado externo em 4 estados (nunca zero no lugar do que falta)
   <section class="ui-cartao ui-fonte"><div class="ui-cartao__topo"><h2 class="ui-cartao__titulo">Plano no SGP</h2></div>…</section> */
.ui-fonte { min-width: 0; }
.ui-fonte__valor { font-size: 18px; line-height: 1.35; font-weight: 700; overflow-wrap: anywhere; }

/* SeloFrescor: pílula pequena com a idade do dado
   <span class="ui-selo ui-selo--ok"><svg class="ui-icone ui-icone--p" data-icone="circle-check"></svg> Agora</span> */
.ui-selo { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 var(--esp-2); border: 1px solid transparent; border-radius: var(--raio-pilula); font-size: 13px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.ui-selo--ok { background: var(--ok-fundo); border-color: var(--ok-linha); color: var(--ok); }
.ui-selo--atencao { background: var(--atencao-fundo); border-color: var(--atencao-linha); color: var(--atencao); }
.ui-selo--perigo { background: var(--perigo-fundo); border-color: var(--perigo-linha); color: var(--perigo); }
.ui-selo--neutra { background: var(--superficie-suave); border-color: var(--linha); color: var(--tinta-2); }

/* Linha de roteador com o selo ao lado do nome
   <div class="ui-roteador"><span class="ui-roteador__nome">…</span><span class="ui-selo ui-selo--ok">…</span></div> */
.ui-roteador { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-3); min-height: var(--linha-min); padding: var(--esp-2) 0; }
.ui-roteador + .ui-roteador { border-top: 1px solid var(--linha); }
.ui-roteador__nome { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }

/* ProcessandoAoVivo: uma linha com luz que pisca e a barra
   <div class="ui-ao-vivo-bloco"><div class="ui-ao-vivo" role="status"><span class="ui-luz"></span><p class="ui-ao-vivo__texto">…</p></div><div class="ui-progresso">…</div></div> */
.ui-ao-vivo-bloco { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
.ui-ao-vivo { display: flex; align-items: center; gap: var(--esp-3); min-height: var(--alvo); padding: var(--esp-2) var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie-suave); }
.ui-ao-vivo > .ui-luz { animation: ui-pisca 1s ease-in-out infinite; }
.ui-ao-vivo--fim > .ui-luz { animation: none; }
.ui-ao-vivo__texto { font-weight: 700; overflow-wrap: anywhere; }

/* FaixaModo: faixa de largura total no topo da área de trabalho
   <div class="ui-faixa-modo ui-faixa-modo--teste" role="status"><svg class="ui-icone ui-icone--p" data-icone="flask-conical"></svg><p>…</p></div> */
.ui-faixa-modo { display: flex; align-items: center; gap: var(--esp-3); width: 100%; min-height: 48px; padding: var(--esp-2) var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie-suave); color: var(--tinta); font-size: 14px; font-weight: 700; line-height: 1.3; }
.ui-faixa-modo > .ui-icone { flex: none; }
.ui-faixa-modo > p { min-width: 0; }
.ui-faixa-modo--teste { background: var(--atencao-fundo); border-color: var(--atencao-linha); color: var(--atencao); }
.ui-faixa-modo--sandbox,
.ui-faixa-modo--simulacao { background: var(--info-fundo); border-color: var(--info-linha); color: var(--info); }
.ui-faixa-modo--desligada { color: var(--tinta-2); }

/* FaixaSinal: valor em dBm e régua (svg.ui-grafico)
   <div class="ui-sinal"><p class="ui-sinal__valor">−26,0 dBm</p><span class="ui-etiqueta ui-etiqueta--atencao">no limite</span></div>
   <svg class="ui-grafico" viewBox="0 0 400 80" role="img" aria-label="…">…</svg> */
.ui-sinal { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-2); min-width: 0; }
.ui-sinal__valor { font-size: 28px; line-height: 1.2; font-weight: 700; }
/* a régua tem escala própria: largura máxima para o texto não crescer com a célula */
.ui-grafico__faixa--ok { fill: var(--ok); }
.ui-grafico__faixa--atencao { fill: var(--atencao); }
.ui-grafico__faixa--perigo { fill: var(--perigo); }
.ui-grafico__marca { stroke: var(--tinta-2); stroke-width: 2; }
.ui-grafico__eixo { stroke: var(--linha-forte); stroke-width: 1; }
.ui-grafico__ponto { stroke: var(--superficie); stroke-width: 3; }
.ui-grafico__ponto--ok { fill: var(--ok); }
.ui-grafico__ponto--atencao { fill: var(--atencao); }
.ui-grafico__ponto--perigo { fill: var(--perigo); }


/* Lote F1: compostos de progresso, grades, pessoas e arquivos (modelo 3). Só tokens; prefixo ui-.
   Bases usadas: ui-cartao, ui-aviso, ui-etiqueta, ui-botao, ui-acoes, ui-pares, ui-lista, ui-campo, ui-entrada,
   ui-redondo, ui-progresso, ui-turno, ui-luz, ui-chips, ui-acordeao, ui-menu, ui-avatar, ui-lista. */

/* Checklist
   <section class="ui-cartao ui-checklist"><div class="ui-checklist__topo"><strong>5 de 7</strong><div class="ui-progresso">…</div></div>
     <ol class="ui-checklist__itens"><li class="ui-checklist__item esta-feito"><span class="ui-checklist__marca"><svg class="ui-icone ui-icone--p" data-icone="check"></svg></span><span class="ui-checklist__texto"><strong>Orelhas</strong></span><button class="ui-botao ui-botao--fantasma" type="button">Desfazer</button></li></ol></section> */
.ui-checklist { min-width: 0; }
.ui-checklist__topo { display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-checklist__topo > strong { font-size: 18px; line-height: 1.35; }
.ui-checklist__itens { display: flex; flex-direction: column; }
.ui-checklist__item { display: flex; align-items: center; gap: var(--esp-3); min-height: var(--linha-min); padding: var(--esp-2) 0; }
.ui-checklist__item + .ui-checklist__item { border-top: 1px solid var(--linha); }
.ui-checklist__marca { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 2px solid var(--linha-forte); border-radius: var(--raio-pilula); background: var(--superficie); color: var(--tinta-3); }
.ui-checklist__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-checklist__item.esta-feito .ui-checklist__marca { border-color: var(--ok); background: var(--ok-fundo); color: var(--ok); }
.ui-checklist__item.esta-atencao .ui-checklist__marca { border-color: var(--atencao); background: var(--atencao-fundo); color: var(--atencao); }
.ui-checklist__item.esta-dispensado .ui-checklist__marca { background: var(--superficie-suave); color: var(--tinta-2); }
.ui-checklist__item.esta-dispensado .ui-checklist__texto > strong { color: var(--tinta-2); }
.ui-checklist__item > .ui-botao { flex: none; }

/* PassosComTrava, horizontal: o passo da vez tem aria-current="step"; o travado tem esta-travado.
   <ol class="ui-passos"><li class="ui-passos__passo esta-feito"><span class="ui-passos__bolinha"><svg class="ui-icone ui-icone--p" data-icone="check"></svg></span><span class="ui-passos__nome">Itens</span></li><li class="ui-passos__passo" aria-current="step"><span class="ui-passos__bolinha"></span><span class="ui-passos__nome">Ritual</span></li><li class="ui-passos__passo esta-travado"><span class="ui-passos__bolinha"><svg class="ui-icone ui-icone--p" data-icone="lock"></svg></span><span class="ui-passos__nome">Pagar</span></li></ol>
   Vertical (ui-passos--vertical): cada passo vira uma linha (ui-passos__linha); o da vez abre (ui-passos__aberto). */
.ui-passos { display: flex; align-items: flex-start; }
.ui-passos__passo { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--esp-2); }
.ui-passos__passo + .ui-passos__passo::before { content: ""; position: absolute; left: -50%; right: 50%; top: 16px; height: 3px; background: var(--linha-forte); }
.ui-passos__passo.esta-feito + .ui-passos__passo::before { background: var(--ok); }
.ui-passos__bolinha { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border: 2px solid var(--linha-forte); border-radius: var(--raio-pilula); background: var(--superficie); color: var(--tinta-3); }
.ui-passos__passo.esta-feito .ui-passos__bolinha { border-color: var(--ok); background: var(--ok-fundo); color: var(--ok); }
.ui-passos__passo[aria-current="step"] .ui-passos__bolinha { border: 3px solid var(--marca); color: var(--marca); }
.ui-passos__nome { font-size: 14px; line-height: 1.3; font-weight: 700; text-align: center; color: var(--tinta-2); }
.ui-passos__passo.esta-feito .ui-passos__nome { color: var(--tinta); }
.ui-passos__passo[aria-current="step"] .ui-passos__nome { color: var(--marca); }
.ui-passos__passo.esta-travado .ui-passos__nome { color: var(--tinta-3); }
.ui-passos--vertical { flex-direction: column; align-items: stretch; gap: var(--esp-3); }
.ui-passos--vertical .ui-passos__passo { flex: none; align-items: stretch; gap: var(--esp-2); }
.ui-passos--vertical .ui-passos__passo::before { display: none; }
.ui-passos__linha { display: flex; align-items: center; gap: var(--esp-3); min-height: var(--alvo); }
.ui-passos__linha > .ui-passos__nome { flex: none; text-align: left; }
.ui-passos__resumo { flex: 1; min-width: 0; font-size: 14px; color: var(--tinta-2); }
.ui-passos__linha > .ui-botao { margin-left: auto; }
.ui-passos__aberto { display: flex; flex-direction: column; gap: var(--esp-3); margin-left: 48px; padding: var(--esp-4); border: 1px solid var(--marca-linha); border-radius: var(--raio-m); background: var(--superficie); }
.ui-passos__travado { display: flex; align-items: center; gap: var(--esp-2); margin-left: 48px; font-size: 14px; color: var(--tinta-3); }

/* IndiceSecoes: no computador é coluna; na fila (ui-indice--fila) é uma faixa de chips que rola.
   <nav class="ui-indice" aria-label="Seções"><a class="ui-indice__item esta-feita" href="?s=queixa"><span class="ui-indice__ponto"></span>Queixa<span class="ui-indice__estado">feita</span></a><a class="ui-indice__item esta-iniciada" href="?s=exame" aria-current="true">…</a></nav> */
.ui-indice { display: flex; flex-direction: column; gap: 2px; min-width: 200px; }
.ui-indice__item { display: flex; align-items: center; gap: var(--esp-2); min-height: var(--alvo); padding: 0 var(--esp-3); border-radius: var(--raio-m); color: var(--tinta-2); font-size: 16px; text-decoration: none; }
.ui-indice__item:hover { background: var(--superficie-suave); color: var(--tinta); }
.ui-indice__item[aria-current="true"] { background: var(--marca-suave); color: var(--marca); font-weight: 700; }
.ui-indice__ponto { flex: none; width: 10px; height: 10px; border-radius: var(--raio-pilula); background: var(--linha-forte); }
.ui-indice__item.esta-feita .ui-indice__ponto { background: var(--ok); }
.ui-indice__item.esta-iniciada .ui-indice__ponto { background: var(--atencao); }
.ui-indice__item.esta-vazia .ui-indice__ponto { background: var(--tinta-3); }
.ui-indice__estado { margin-left: auto; font-size: 14px; color: var(--tinta-3); }
.ui-indice__item.esta-feita .ui-indice__estado { color: var(--ok); }
.ui-indice__item.esta-iniciada .ui-indice__estado { color: var(--atencao); }
.ui-indice--fila { flex-direction: row; gap: var(--esp-2); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ui-indice--fila .ui-indice__item { flex: none; min-height: var(--chip); padding: 0 var(--esp-4); border: 1px solid var(--linha-media); border-radius: var(--raio-pilula); background: var(--superficie); }
.ui-indice--fila .ui-indice__item[aria-current="true"] { border-color: var(--marca); }

/* CartaoRotina: a rotina que vence agora abre; as outras mostram a hora ou o check.
   <section class="ui-cartao ui-rotina"><div class="ui-cartao__topo"><h2 class="ui-cartao__titulo">Abertura da loja</h2><span class="ui-apoio">2 de 6 feitos</span></div>
     <details class="ui-acordeao" open><summary class="ui-acordeao__titulo">Conferir a água <span class="ui-rotina__hora">09:45</span><svg class="ui-icone" data-icone="chevron-down"></svg></summary><div class="ui-acordeao__corpo"><button class="ui-botao ui-botao--primario" type="button">Feito</button></div></details></section> */
.ui-rotina { min-width: 0; }
.ui-rotina .ui-acordeao__titulo { font-size: 16px; }
.ui-rotina .ui-acordeao__titulo > .ui-icone:last-child { margin-left: 0; }
.ui-rotina__hora { margin-left: auto; font-size: 14px; font-weight: 400; color: var(--tinta-2); }
.ui-rotina__feito { margin-left: auto; color: var(--ok); }
.ui-rotina .ui-acordeao__corpo { display: flex; flex-direction: column; gap: var(--esp-3); }

/* ProgressoLotes: barra em segmentos com peso, excesso e régua de tempo parado.
   <div class="ui-progresso-lotes__barra" role="img" aria-label="Ração 40%, petiscos 25%, areia 35%"><span class="ui-progresso-lotes__seg ui-progresso-lotes__seg--a"></span>…</div>
   <ul class="ui-progresso-lotes__legenda"><li><span class="ui-progresso-lotes__cor ui-progresso-lotes__cor--a"></span>Ração <strong>40%</strong></li>…</ul>
   <div class="ui-progresso-lotes__regua"><span class="ui-progresso-lotes__dia"></span>…</div> */
.ui-progresso-lotes { min-width: 0; }
.ui-progresso-lotes__barra { display: flex; gap: 2px; height: 14px; overflow: hidden; border-radius: var(--raio-pilula); background: var(--fundo-barra); }
.ui-progresso-lotes__seg { display: block; min-width: 0; height: 100%; }
.ui-progresso-lotes__seg--a { flex: 40 1 0; background: var(--marca); }
.ui-progresso-lotes__seg--b { flex: 25 1 0; background: var(--info); }
.ui-progresso-lotes__seg--c { flex: 35 1 0; background: var(--ok); }
.ui-progresso-lotes__legenda { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5); font-size: 14px; color: var(--tinta-2); }
.ui-progresso-lotes__legenda > li { display: inline-flex; align-items: center; gap: var(--esp-2); }
.ui-progresso-lotes__legenda strong { color: var(--tinta); }
.ui-progresso-lotes__cor { flex: none; width: 12px; height: 12px; border-radius: 3px; }
.ui-progresso-lotes__cor--a { background: var(--marca); }
.ui-progresso-lotes__cor--b { background: var(--info); }
.ui-progresso-lotes__cor--c { background: var(--ok); }
.ui-progresso-lotes__regua { display: flex; gap: var(--esp-1); }
.ui-progresso-lotes__dia { flex: 1; height: 8px; border-radius: var(--raio-pilula); background: var(--linha); }
.ui-progresso-lotes__dia--parado { background: var(--atencao); }

/* Matriz: permissões operação × papel. Cabeçalho e primeira coluna fixos; a célula diz o estado.
   <div class="ui-matriz" role="region" aria-label="Permissões" tabindex="0"><table><thead><tr><th class="ui-matriz__primeira">Operação</th><th>Dono</th>…</tr></thead>
     <tbody><tr class="ui-matriz__grupo"><th colspan="6">Caixa</th></tr><tr><th class="ui-matriz__primeira" scope="row">Receber</th><td><button class="ui-matriz__celula ui-matriz__celula--pode" type="button">Pode</button></td>…</tr></tbody></table></div>
   Herdado: ui-matriz__celula--herdado (borda tracejada) + <span class="ui-apoio">herdado</span>. */
.ui-matriz { max-height: 640px; overflow: auto; min-width: 0; border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); }
.ui-matriz table { width: 100%; min-width: 600px; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.ui-matriz th, .ui-matriz td { padding: var(--esp-2) var(--esp-3); border-bottom: 1px solid var(--linha); text-align: left; vertical-align: middle; }
.ui-matriz thead th { position: sticky; top: 0; z-index: 2; background: var(--superficie-suave); color: var(--tinta-2); font-weight: 700; white-space: nowrap; }
.ui-matriz__primeira { position: sticky; left: 0; z-index: 1; min-width: 150px; background: var(--superficie); color: var(--tinta); font-weight: 700; }
.ui-matriz thead .ui-matriz__primeira { z-index: 3; background: var(--superficie-suave); color: var(--tinta-2); }
.ui-matriz__grupo th { background: var(--superficie-suave); color: var(--tinta); font-weight: 700; }
.ui-matriz__celula { display: inline-flex; align-items: center; gap: var(--esp-1); min-height: var(--chip); padding: 0 var(--esp-3); border: 1px solid transparent; border-radius: var(--raio-m); background: var(--superficie-suave); color: var(--tinta); font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.ui-matriz__celula--pode { color: var(--ok); background: var(--ok-fundo); border-color: var(--ok-linha); }
.ui-matriz__celula--nao { color: var(--tinta-2); background: var(--superficie-suave); border-color: var(--linha-media); }
.ui-matriz__celula--aprova { color: var(--atencao); background: var(--atencao-fundo); border-color: var(--atencao-linha); }
.ui-matriz__celula--herdado { border-style: dashed; border-color: var(--tinta-3); }
.ui-matriz__celula .ui-apoio { font-weight: 400; }
.ui-matriz__legenda { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5); font-size: 14px; color: var(--tinta-2); }
.ui-matriz__legenda > li { display: inline-flex; align-items: center; gap: var(--esp-2); }
.ui-matriz__chave { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 28px; padding: 0 var(--esp-2); border: 1px solid transparent; border-radius: var(--raio-m); font-size: 14px; font-weight: 700; }

/* GradePessoaDia: escala do mês, uma letra por célula (T, F, P, A). Colunas de feriado e fim de semana
   ganham o fundo suave; o dia com só uma pessoa ganha contorno em atenção.
   <div class="ui-grade-dias"><table><thead><tr><th class="ui-grade-dias__nome">Equipe</th><th class="ui-grade-dias__dia">1</th>…</tr></thead>
     <tbody><tr><th class="ui-grade-dias__nome" scope="row">Renata</th><td class="ui-grade-dias__celula ui-grade-dias__celula--t">T</td>…</tr></tbody></table></div> */
.ui-grade-dias { min-width: 0; overflow-x: auto; }
.ui-grade-dias table { border-collapse: separate; border-spacing: 3px; font-size: 14px; }
.ui-grade-dias th, .ui-grade-dias td { padding: 0; text-align: center; vertical-align: middle; }
.ui-grade-dias__nome { position: sticky; left: 0; z-index: 1; min-width: 150px; padding-right: var(--esp-3); text-align: left; font-weight: 700; white-space: nowrap; background: var(--superficie); }
.ui-grade-dias__dia { min-width: 36px; height: 36px; font-weight: 400; color: var(--tinta-2); }
.ui-grade-dias__dia--feriado { position: relative; color: var(--marca); font-weight: 700; }
.ui-grade-dias__dia--feriado::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 6px; height: 6px; margin-left: -3px; border-radius: var(--raio-pilula); background: var(--marca); }
.ui-grade-dias__dia--cobertura { color: var(--atencao); font-weight: 700; }
.ui-grade-dias__celula { position: relative; width: 36px; height: 36px; border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--superficie); color: var(--tinta); font-weight: 700; }
.ui-grade-dias__celula--fds { background: var(--superficie-suave); }
.ui-grade-dias__celula--t { color: var(--tinta); }
.ui-grade-dias__celula--f { color: var(--tinta-3); }
.ui-grade-dias__celula--p { color: var(--info); background: var(--info-fundo); border-color: var(--info-linha); }
.ui-grade-dias__celula--a { color: var(--atencao); background: var(--atencao-fundo); border-color: var(--atencao-linha); }
.ui-grade-dias__celula--ajuste::after { content: ""; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: var(--raio-pilula); background: var(--marca); }
.ui-grade-dias__celula--cobertura { box-shadow: inset 0 0 0 2px var(--atencao); }
.ui-grade-dias__legenda { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-4); font-size: 14px; color: var(--tinta-2); }
.ui-grade-dias__legenda > li { display: inline-flex; align-items: center; gap: var(--esp-2); }
.ui-grade-dias__chave { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--superficie); font-weight: 700; color: var(--tinta); }

/* CabecalhoPessoa: o cabeçalho do pet (ou do cliente de internet): identificação, alertas, tutor e contato.
   <section class="ui-cartao ui-cabecalho-pessoa"><div class="ui-cabecalho-pessoa__id"><span class="ui-redondo ui-redondo--g ui-redondo--marca"><svg class="ui-icone ui-icone--g" data-icone="paw-print"></svg></span><div><h2 class="ui-cabecalho__titulo">Thor</h2><span class="ui-etiqueta ui-etiqueta--perigo ui-cabecalho-pessoa__alergia">…Alergia: amoxicilina, dipirona</span><p class="ui-apoio">Shih-tzu · 6 anos · macho</p></div></div>
     <div class="ui-cabecalho-pessoa__alertas"><span class="ui-etiqueta ui-etiqueta--atencao">…Cardiopata</span></div>…</section> */
.ui-cabecalho-pessoa { min-width: 0; }
.ui-cabecalho-pessoa__id { display: flex; align-items: center; gap: var(--esp-4); }
.ui-cabecalho-pessoa__id > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-cabecalho-pessoa__alertas { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.ui-cabecalho-pessoa__contato { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); }
.ui-cabecalho-pessoa__alergia { align-self: flex-start; max-width: 100%; white-space: normal; }
.ui-cabecalho-pessoa__mais { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); min-width: 0; font-size: 14px; color: var(--tinta-2); }
.ui-cabecalho-pessoa__mais > .ui-etiqueta { max-width: 100%; white-space: normal; }

/* BlocoRestrito: o topo mostra o aviso de restrição; quem não pode vê só o texto, sem fragmento.
   <section class="ui-cartao ui-bloco-restrito"><div class="ui-cartao__topo"><h2 class="ui-cartao__titulo">Anamnese</h2><span class="ui-etiqueta ui-etiqueta--neutra"><svg class="ui-icone ui-icone--p" data-icone="lock"></svg> Restrito à equipe clínica</span></div>…</section> */
.ui-bloco-restrito { min-width: 0; }
.ui-bloco-restrito--negado { background: var(--superficie-suave); box-shadow: inset 0 0 0 1px var(--linha-media); }
.ui-bloco-restrito__corpo { display: flex; align-items: center; gap: var(--esp-2); color: var(--tinta-2); }

/* AvisoSaude: o aviso de dado de saúde (base: ui-aviso--info, ui-aviso__acoes).
   <div class="ui-aviso ui-aviso--info ui-aviso-saude" role="status"><svg class="ui-icone" data-icone="shield-check"></svg><div class="ui-aviso__corpo"><p class="ui-aviso__titulo">…</p></div><div class="ui-aviso__acoes"><button class="ui-botao ui-botao--secundario" type="button">Abrir o atestado</button></div></div> */
.ui-aviso-saude { min-width: 0; }

/* SeletorPessoa: escolha do técnico com o estado do dia. O escolhido tem aria-pressed="true".
   <ul class="ui-lista ui-seletor-pessoa"><li><button class="ui-lista__linha ui-seletor-pessoa__linha" type="button" aria-pressed="true"><span class="ui-avatar ui-avatar--p">RR</span><span class="ui-lista__texto"><strong>Renata Ribeiro</strong><span class="ui-apoio">3 OS na mão</span></span><span class="ui-etiqueta ui-etiqueta--ok">Trabalha hoje</span></button></li></ul> */
.ui-seletor-pessoa { border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); overflow: hidden; }
.ui-seletor-pessoa__linha { flex-wrap: wrap; min-height: 64px; padding: var(--esp-3) var(--esp-4); }
.ui-seletor-pessoa__linha > .ui-lista__texto { flex: 1 1 180px; }
.ui-seletor-pessoa__linha > .ui-etiqueta { flex: none; margin-left: auto; }
.ui-seletor-pessoa__linha[aria-pressed="true"] { background: var(--marca-suave); box-shadow: inset 0 0 0 2px var(--marca); }
.ui-seletor-pessoa__vazio { display: flex; flex-direction: column; align-items: center; gap: var(--esp-2); padding: var(--esp-6) var(--esp-4); text-align: center; }

/* ChipTurno: o turno ao lado do nome (base: ui-turno, ui-luz). Estados: ok (padrão), intervalo, atencao, encerrado, fora.
   <span class="ui-turno ui-chip-turno--intervalo"><span class="ui-luz"></span>Em intervalo · volta 13:00</span>
   Disponibilidade: ui-etiqueta com o tom (ok, info, neutra). */
.ui-chip-turno--intervalo { border-color: var(--info-linha); background: var(--info-fundo); color: var(--info); }
.ui-chip-turno--intervalo .ui-luz { background: var(--info); box-shadow: 0 0 0 4px var(--info-linha); }
.ui-chip-turno--atencao { border-color: var(--atencao-linha); background: var(--atencao-fundo); color: var(--atencao); }
.ui-chip-turno--atencao .ui-luz { background: var(--atencao); box-shadow: 0 0 0 4px var(--atencao-linha); }
.ui-chip-turno--encerrado { border-color: var(--linha); background: var(--superficie-suave); color: var(--tinta-2); }
.ui-chip-turno--encerrado .ui-luz { background: var(--tinta-3); box-shadow: none; }
.ui-chip-turno-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); }
.ui-chip-turno-linha > strong { min-width: 0; }

/* CapturaFoto: tirar foto em toque, miniaturas com legenda e avisos (base: ui-botao, ui-aviso).
   <div class="ui-captura-foto"><button class="ui-botao ui-botao--primario ui-botao--largo" type="button"><svg class="ui-icone" data-icone="camera"></svg> Tirar foto</button>
     <ul class="ui-captura-foto__grade"><li class="ui-captura-foto__item"><div class="ui-captura-foto__miniatura"><svg class="ui-icone" data-icone="image"></svg></div><div class="ui-captura-foto__texto">…</div></li></ul></div> */
.ui-captura-foto { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.ui-captura-foto__grade { display: flex; flex-direction: column; gap: var(--esp-4); }
.ui-captura-foto__item { display: flex; align-items: flex-start; gap: var(--esp-3); min-width: 0; }
.ui-captura-foto__miniatura { flex: none; display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: var(--raio-m); background: var(--superficie-suave); color: var(--tinta-2); }
.ui-captura-foto__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-2); }
.ui-captura-foto__texto > .ui-aviso { width: 100%; padding: var(--esp-2) var(--esp-3); }

/* Galeria: grade de miniaturas; um PDF é cartão com o nome, nunca imagem. O menu da foto leva "Usar como foto do perfil" (só foto não clínica).
   <ul class="ui-galeria"><li class="ui-galeria__item"><div class="ui-galeria__foto"><svg class="ui-icone" data-icone="image"></svg></div><div class="ui-galeria__linha"><span class="ui-galeria__nome">Frente · 02/10</span><button class="ui-botao ui-botao--fantasma ui-botao--icone" type="button" aria-label="Mais ações da foto Frente"><svg class="ui-icone" data-icone="ellipsis-vertical"></svg></button></div></li></ul> */
.ui-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)); gap: var(--esp-4) var(--esp-3); }
.ui-galeria__item { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }
.ui-galeria__foto { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: var(--raio-m); background: var(--superficie-suave); color: var(--tinta-2); }
.ui-galeria__item--doc .ui-galeria__foto { flex-direction: column; gap: var(--esp-2); padding: var(--esp-3); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linha); }
.ui-galeria__linha { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-1); min-width: 0; }
.ui-galeria__nome { min-width: 0; overflow-wrap: anywhere; font-size: 14px; line-height: 1.3; }

/* EnvioArquivos: zona de soltar (ui-soltar) com os estados normal, sobre (esta-sobre), enviando e resultado.
   <div class="ui-envio-arquivos"><div class="ui-soltar esta-sobre"><svg class="ui-icone" data-icone="upload"></svg><p class="ui-soltar__texto">Arraste as notas (XML, ZIP ou PDF) ou escolha</p><label class="ui-campo__rotulo" for="env-arq">Notas fiscais</label><input class="ui-envio" id="env-arq" type="file" multiple accept=".xml,.zip,.pdf"></div></div>
   Enviando: .ui-envio-arquivos__fila > .ui-envio-arquivos__arquivo com ui-progresso. Resultado: .ui-envio-arquivos__resultado. */
.ui-envio-arquivos { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
.ui-soltar { display: flex; flex-direction: column; align-items: center; gap: var(--esp-3); padding: var(--esp-6) var(--esp-4); border: 2px dashed var(--linha-forte); border-radius: var(--raio-g); background: var(--superficie-suave); color: var(--tinta-2); text-align: center; }
.ui-soltar.esta-sobre { border-color: var(--marca); background: var(--marca-suave); color: var(--marca); }
.ui-soltar__texto { font-size: 16px; color: var(--tinta); }
.ui-soltar.esta-sobre .ui-soltar__texto { color: var(--marca); font-weight: 700; }
.ui-soltar .ui-envio { max-width: 100%; }
.ui-envio-arquivos__fila { display: flex; flex-direction: column; gap: var(--esp-3); }
.ui-envio-arquivos__arquivo { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); }
.ui-envio-arquivos__nome { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--esp-2); font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.ui-envio-arquivos__resultado { display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-4); border-radius: var(--raio-m); background: var(--superficie-suave); }
.ui-envio-arquivos__links { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); }

/* Segredo: o campo que nunca volta. Guardado: entrada vazia, etiqueta "guardado" e "Mostrar" busca no servidor.
   <div class="ui-campo ui-segredo"><div class="ui-segredo__rotulo"><label class="ui-campo__rotulo" for="sg1">Senha do certificado</label><span class="ui-etiqueta ui-etiqueta--ok">guardado</span></div>
     <div class="ui-segredo__linha"><input class="ui-entrada" id="sg1" type="password" placeholder="Guardado · deixe vazio para manter"><button class="ui-botao ui-botao--secundario" type="button">Mostrar</button></div><p class="ui-apoio">…</p></div> */
.ui-segredo { min-width: 0; }
.ui-segredo__rotulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); }
.ui-segredo__linha { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--esp-2); }
.ui-segredo__linha > .ui-entrada { flex: 1 1 180px; }
.ui-segredo__linha > .ui-botao { flex: none; }


/* Lote F2 · tempo, indicadores e formulários especiais. Só tokens (var(--…)), prefixo ui-.
   Cada composto traz a marcação mínima no comentário acima das suas regras. */

/* ══ TEMPO ════════════════════════════════════════════════════════════════ */

/* FaixaPrazo: validade com o estado escrito; a cor só reforça.
   <ul class="ui-prazos"><li class="ui-prazo ui-prazo--perigo"><svg class="ui-icone ui-icone--p">circle-x</svg>
     <div class="ui-prazo__corpo"><p class="ui-prazo__nome">Certificado A1 · Pokotucho</p><p class="ui-prazo__texto">Venceu há 3 dias · bloqueia a emissão</p></div></li></ul> */
.ui-prazos { display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-prazo { display: flex; align-items: flex-start; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); }
.ui-prazo > .ui-icone { flex: none; margin-top: 2px; color: var(--tinta-2); }
.ui-prazo__corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-prazo__nome { font-weight: 700; }
.ui-prazo__texto { font-size: 14px; color: var(--tinta-2); }
.ui-prazo--ok { border-color: var(--ok-linha); background: var(--ok-fundo); }
.ui-prazo--ok > .ui-icone, .ui-prazo--ok .ui-prazo__texto { color: var(--ok); }
.ui-prazo--atencao { border-color: var(--atencao-linha); background: var(--atencao-fundo); }
.ui-prazo--atencao > .ui-icone, .ui-prazo--atencao .ui-prazo__texto { color: var(--atencao); }
.ui-prazo--perigo { border-color: var(--perigo-linha); background: var(--perigo-fundo); }
.ui-prazo--perigo > .ui-icone, .ui-prazo--perigo .ui-prazo__texto { color: var(--perigo); }

/* PrazoSLA: quanto falta ou quanto venceu, escrito. A régua de tempo parado é ui-progresso.
   <p class="ui-sla ui-sla--ok"><svg class="ui-icone ui-icone--p">clock</svg> Responder até 14:00 · faltam 1 h 20</p>
   <div class="ui-progresso ui-progresso--perigo"><div class="ui-progresso__topo"><span>Parado na fila</span><strong>há 2 dias</strong></div>
     <div class="ui-progresso__trilho" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"><span class="ui-progresso__valor" style="--valor:80%"></span></div></div> */
.ui-sla { display: flex; align-items: center; gap: var(--esp-2); min-height: var(--chip); padding: var(--esp-2) var(--esp-3); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); font-weight: 700; }
.ui-sla > .ui-icone { flex: none; }
.ui-sla--ok { color: var(--ok); border-color: var(--ok-linha); background: var(--ok-fundo); }
.ui-sla--atencao { color: var(--atencao); border-color: var(--atencao-linha); background: var(--atencao-fundo); }
.ui-sla--perigo { color: var(--perigo); border-color: var(--perigo-linha); background: var(--perigo-fundo); }

/* LinhaTempoFonte: filtro por fonte em cima, linha do tempo com o ícone de cada fonte.
   <div class="ui-fontes"><div class="ui-chips" role="group" aria-label="Fonte"><button class="ui-chip" aria-pressed="true">Todas</button>…</div>
     <ol class="ui-tempo"><li class="ui-tempo__item"><span class="ui-tempo__marca ui-redondo ui-redondo--marca"><svg class="ui-icone ui-icone--p">router</svg></span>…</li></ol>
     <button class="ui-botao ui-botao--secundario ui-tempo__mais">Mostrar mais 20</button></div> */
.ui-fontes { display: flex; flex-direction: column; gap: var(--esp-4); }
.ui-fontes .ui-tempo__mais { align-self: flex-start; margin-left: 0; }

/* ══ INDICADORES ══════════════════════════════════════════════════════════ */

/* Kpi: rótulo, valor e apoio. Sem leitura é "—" com o motivo; zero real é 0 com o porquê.
   <div class="ui-kpis"><div class="ui-kpis__fila"><article class="ui-kpi"><p class="ui-kpi__rotulo">Banhos hoje</p>
     <p class="ui-kpi__valor">14</p><p class="ui-kpi__apoio">Hoje, até 09:42</p></article>…</div></div>
   Variação: <p class="ui-kpi__apoio ui-kpi__apoio--ok"><svg class="ui-icone ui-icone--p">trending-up</svg> +12% sobre outubro</p> */
.ui-kpis { container-type: inline-size; }
/* Quantos couberem com pelo menos 14rem cada: 4 no conteúdo largo, 2 em 560 px, 1 no celular estreito. */
.ui-kpis__fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--esp-3); }
.ui-kpi { container-type: inline-size; display: flex; flex-direction: column; gap: var(--esp-1); min-width: 0; padding: var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-g); background: var(--superficie); box-shadow: var(--sombra); }
.ui-kpi__rotulo { font-size: 14px; font-weight: 700; color: var(--tinta-2); }
.ui-kpi__valor { font-size: 32px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
/* Cartão estreito: o número desce para 24 px antes de quebrar. */
@container (max-width: 15rem) { .ui-kpi__valor { font-size: 24px; } }
.ui-kpi__apoio { display: block; font-size: 14px; color: var(--tinta-2); }
.ui-kpi__apoio > .ui-icone { display: inline-block; vertical-align: -3px; margin-right: var(--esp-1); }
.ui-kpi__apoio--ok { color: var(--ok); }
.ui-kpi__apoio--perigo { color: var(--perigo); }
.ui-kpi--vazio .ui-kpi__valor { color: var(--tinta-3); }

/* LinhaIndicador: indicador, valor, meta, anterior, variação, série e situação numa tabela.
   <div class="ui-tabela" role="region" aria-label="Indicadores de outubro" tabindex="0"><table>…<td data-rotulo="Variação" class="ui-num"><span class="ui-var ui-var--ok"><svg class="ui-icone ui-icone--p">trending-up</svg>+16,1%</span></td>…
   Série: <svg class="ui-grafico ui-grafico--mini" viewBox="0 0 80 24" role="img" aria-label="…"><polyline class="ui-grafico__linha" points="…"/></svg> */
.ui-var { display: inline-flex; align-items: center; gap: var(--esp-1); font-weight: 700; white-space: nowrap; }
.ui-var--ok { color: var(--ok); }
.ui-var--perigo { color: var(--perigo); }
.ui-var--neutro { color: var(--tinta-2); }

/* Graficos: svg.ui-grafico com proporção real. Cor só por classe; texto de 13 px em text. */
.ui-grafico { display: block; width: 100%; max-width: 480px; height: auto; overflow: visible; }
.ui-grafico text { font-family: var(--font-sans); font-size: 13px; font-weight: 700; fill: var(--tinta-2); }
.ui-grafico text.ui-grafico__valor { fill: var(--tinta); }
.ui-grafico__barra { fill: var(--marca); }
.ui-grafico__eixo { stroke: var(--linha-forte); stroke-width: 1; }
.ui-grafico__grade { stroke: var(--linha); stroke-width: 1; }
.ui-grafico__linha { fill: none; stroke: var(--marca); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ui-grafico__ponto { fill: var(--marca); stroke: var(--superficie); stroke-width: 2; }
.ui-grafico__ponto--ok { fill: var(--ok); }
.ui-grafico__ponto--atencao { fill: var(--atencao); }
.ui-grafico__ponto--perigo { fill: var(--perigo); }
.ui-grafico__trilho { fill: var(--superficie-suave-forte); }
.ui-grafico__faixa { fill: var(--ok-fundo); stroke: var(--ok-linha); stroke-width: 1; }
.ui-grafico__faixa--neutra { fill: var(--superficie-suave-forte); stroke: var(--linha-media); }
.ui-grafico--mini { width: 80px; max-width: none; height: 24px; }
.ui-grafico--regua { max-width: 360px; }

/* Pequenos múltiplos: um mini-gráfico igual por empresa.
   <div class="ui-pequenos"><figure class="ui-pequeno"><figcaption class="ui-pequeno__nome">Pokotucho</figcaption>
     <svg class="ui-grafico" viewBox="0 0 160 80" role="img" aria-label="…"><polyline class="ui-grafico__linha" points="…"/></svg>
     <p class="ui-apoio">R$ 8.240,00 em outubro</p></figure>…</div> */
.ui-pequenos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: var(--esp-4); }
.ui-pequeno { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; padding: var(--esp-3); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); }
.ui-pequeno__nome { font-size: 14px; font-weight: 700; }
.ui-pequeno .ui-grafico { max-width: 160px; }

/* Faixa de estoque: barra de mínimo a máximo e o ponto do que há agora (fora da faixa, em perigo).
   <svg class="ui-grafico" viewBox="0 0 360 160" role="img" aria-label="…"><rect class="ui-grafico__faixa" x="…" y="…" width="…" height="16"/>
     <circle class="ui-grafico__ponto ui-grafico__ponto--perigo" cx="…" cy="…" r="7"/>…</svg> */

/* ══ FORMULÁRIOS ESPECIAIS ════════════════════════════════════════════════ */

/* ListaEditavel: cada linha é um bloco; no computador, os campos ficam numa fila e as ações à direita.
   <ol class="ui-editavel"><li class="ui-editavel__linha"><div class="ui-editavel__campos">…4 ui-campo…</div>
     <div class="ui-editavel__acoes"><button class="ui-botao ui-botao--secundario ui-botao--icone" aria-label="Subir"><svg>chevron-up</svg></button>…</div></li></ol> */
.ui-editavel { container-type: inline-size; display: flex; flex-direction: column; gap: var(--esp-3); }
.ui-editavel__linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--esp-2) var(--esp-3); align-items: end; padding: var(--esp-3); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); }
.ui-editavel__campos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--esp-2); min-width: 0; }
.ui-editavel__campos .ui-campo__rotulo { font-size: 14px; }
.ui-editavel__acoes { display: flex; gap: var(--esp-1); }
@container (max-width: 560px) {
  .ui-editavel__linha { grid-template-columns: minmax(0, 1fr); }
  .ui-editavel__campos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ui-editavel__campos > :first-child { grid-column: 1 / -1; }
  .ui-editavel__acoes { justify-content: flex-end; }
}

/* CampoCondicional: o tipo escolhido mostra só o campo dele (aqui: porcentagem ou valor fixo).
   <div class="ui-campo"><span class="ui-campo__rotulo" id="rp1">Tipo de repasse</span>
     <div class="ui-segmentos" role="group" aria-labelledby="rp1"><button class="ui-segmentos__item" aria-pressed="true">Porcentagem</button>…</div></div>
   <div class="ui-campo"><label class="ui-campo__rotulo" for="rp2">Repasse</label><div class="ui-afixo"><input class="ui-entrada ui-entrada--numero" id="rp2" inputmode="decimal"><span class="ui-afixo__texto">%</span></div></div> */

/* BuscaResultado: busca com um menu de resultados da largura da busca.
   <div class="ui-busca-linha"><div class="ui-busca"><svg class="ui-icone">search</svg><input class="ui-entrada" type="search" id="b1">…</div>
     <button class="ui-botao ui-botao--secundario ui-botao--icone" aria-label="Ler código de barras"><svg>qr-code</svg></button></div>
   <div class="ui-menu ui-menu--previa ui-busca-menu"><button class="ui-menu__item"><span><strong>Thor</strong> · Ana Souza</span><span class="ui-apoio">Shih-tzu · Contrato 4821</span></button>…</div> */
.ui-busca-linha { display: flex; align-items: center; gap: var(--esp-2); }
.ui-busca-linha > .ui-busca { flex: 1 1 auto; min-width: 0; }
.ui-busca-menu { width: 100%; padding: var(--esp-1) 0; }
.ui-busca-menu .ui-menu__item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: var(--alvo); }
.ui-busca-menu .ui-menu__item .ui-apoio { font-size: 14px; }
.ui-busca-menu .ui-menu__item--novo { flex-direction: row; align-items: center; gap: var(--esp-2); color: var(--marca); font-weight: 700; }

/* CampoFaixaReferencia: o valor, a faixa escrita ao lado e a régua (svg.ui-grafico).
   <div class="ui-campo"><label class="ui-campo__rotulo" for="t1">Temperatura</label>
     <div class="ui-afixo"><input class="ui-entrada ui-entrada--numero" id="t1" inputmode="decimal"><span class="ui-afixo__texto">°C</span></div>
     <div class="ui-faixa-ref"><span class="ui-etiqueta ui-etiqueta--perigo">acima</span><span class="ui-campo__ajuda">Normal 37,5–39,2 °C (cão)</span></div>
     <svg class="ui-grafico ui-grafico--regua" viewBox="0 0 360 56" role="img" aria-label="…">…</svg></div> */
.ui-faixa-ref { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }

/* EditorExpediente: dias × turnos. Cada célula é um botão liga/desliga (aria-pressed).
   <div class="ui-expediente"><div class="ui-expediente__linha ui-expediente__cabeca"><span></span><span>Seg</span>…</div>
     <div class="ui-expediente__linha"><span class="ui-expediente__turno">Manhã</span><button class="ui-expediente__celula" type="button" aria-pressed="true" aria-label="Seg, manhã: aberto"><svg class="ui-icone ui-icone--p" data-icone="check"></svg></button>…</div></div>
   Resumo: <p class="ui-expediente__resumo">Seg a sex, 08:00–18:00 · sáb, 08:00–12:00</p> */
.ui-expediente { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }
.ui-expediente__linha { display: grid; grid-template-columns: 64px repeat(7, minmax(0, 1fr)); gap: var(--esp-1); align-items: center; }
.ui-expediente__cabeca { font-size: 14px; font-weight: 700; color: var(--tinta-2); text-align: center; }
.ui-expediente__turno { font-size: 14px; font-weight: 700; color: var(--tinta-2); }
.ui-expediente__celula { display: inline-flex; align-items: center; justify-content: center; min-width: 0; min-height: var(--alvo); padding: 0; border: 1px solid var(--linha-media); border-radius: var(--raio-p); background: var(--superficie); color: var(--tinta-3); font-size: 14px; font-weight: 700; cursor: pointer; }
.ui-expediente__celula:hover { background: var(--superficie-suave); border-color: var(--linha-forte); }
.ui-expediente__celula[aria-pressed="true"] { background: var(--marca-suave); border-color: var(--marca); color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.ui-expediente__resumo { font-size: 16px; font-weight: 700; }
/* Horas por dia (abre ao tocar em "Horas de cada turno"): uma linha por dia aberto, com início e fim de cada turno.
   Com "Mesmo horário em todos os dias" ligado, vira uma linha só ("Seg a sáb"). No celular, cada dia vira um bloco.
   <div class="ui-expediente-horas [ui-expediente-horas--3]"><div class="ui-expediente-horas__cabeca"><span>Dia</span><span>Manhã</span><span>Tarde</span></div>
   <div class="ui-expediente-horas__dia"><span class="ui-expediente-horas__nome">Seg</span>
   <div class="ui-expediente-horas__turno"><span class="ui-expediente-horas__rotulo">Manhã</span><label class="ui-oculto" for="…">Seg, manhã, início</label><input class="ui-entrada" type="time" id="…"><span class="ui-expediente-horas__sep">às</span>…</div>
   <span class="ui-expediente-horas__fechado">fechado</span> (turno desligado naquele dia)
   <p class="ui-campo__erro ui-expediente-horas__erro">…</p></div></div> */
.ui-expediente-horas { container-type: inline-size; display: flex; flex-direction: column; min-width: 0; }
.ui-expediente-horas__ferramentas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-3); padding-bottom: var(--esp-3); }
.ui-expediente-horas__cabeca, .ui-expediente-horas__dia { display: grid; grid-template-columns: 4.5rem repeat(2, minmax(0, 1fr)); gap: var(--esp-2) var(--esp-4); align-items: center; }
.ui-expediente-horas--3 .ui-expediente-horas__cabeca, .ui-expediente-horas--3 .ui-expediente-horas__dia { grid-template-columns: 4.5rem repeat(3, minmax(0, 1fr)); }
.ui-expediente-horas__cabeca { padding-bottom: var(--esp-1); font-size: 14px; font-weight: 700; color: var(--tinta-2); }
.ui-expediente-horas__dia { padding: var(--esp-2) 0; border-top: 1px solid var(--linha); }
.ui-expediente-horas__dia.esta-erro { background: var(--perigo-fundo); border-radius: var(--raio-p); padding-left: var(--esp-2); padding-right: var(--esp-2); }
.ui-expediente-horas__nome { font-weight: 700; }
.ui-expediente-horas__turno { display: flex; align-items: center; gap: var(--esp-2); min-width: 0; }
.ui-expediente-horas__turno > .ui-entrada { flex: 1 1 0; min-width: 0; }
.ui-expediente-horas__sep { flex: none; font-size: 14px; color: var(--tinta-2); }
.ui-expediente-horas__rotulo { display: none; }
.ui-expediente-horas__fechado { font-size: 14px; color: var(--tinta-3); }
.ui-expediente-horas__erro { grid-column: 1 / -1; margin: 0; }
@container (max-width: 560px) {
  .ui-expediente-horas__cabeca { display: none; }
  .ui-expediente-horas__dia, .ui-expediente-horas--3 .ui-expediente-horas__dia { grid-template-columns: minmax(0, 1fr); gap: var(--esp-2); padding: var(--esp-3) 0; }
  .ui-expediente-horas__rotulo { display: inline; flex: none; width: 3.75rem; font-size: 14px; font-weight: 700; color: var(--tinta-2); }
}
.ui-grafico--sozinho { max-width: 160px; }
.ui-grafico__ponto--info { fill: var(--info); }

/* Onda 5a · AY5 — classes que os pacotes das ondas 4 criaram sem regra, a faixa sem rede e o indicador de espera.
   Só tokens, nenhuma cor escrita à mão. As regras que precisam vencer as de outro arquivo (largura, celular,
   obrigatório, radio e caixa) estão no fim de assets/static/css/ds/app.css, que carrega depois do ds.css. */

/* Consulta · "O que falta": cartão com a faixa de atenção à esquerda e a lista sem recuo. */
.cs-falta { gap: var(--esp-3); border-left: 4px solid var(--atencao); }
.cs-falta-lista { margin: 0; padding: 0; list-style: none; min-width: 0; }
.cs-falta-lista > li { overflow-wrap: anywhere; }

/* Agenda · resumo do expediente da pessoa: uma frase que quebra, não passa de uma linha de leitura. */
.ag-expediente-resumo { display: block; min-width: 0; max-width: 60ch; overflow-wrap: anywhere; }

/* Odontograma · histórico do dente (details que carrega ao abrir). */
.odg-hist-det { min-width: 0; }
.odg-hist-det > summary { display: flex; align-items: center; gap: var(--esp-2); min-height: var(--chip); font-weight: 700; color: var(--marca); cursor: pointer; }
.odg-hist-det[open] > summary { margin-bottom: var(--esp-2); }

/* Plataforma · "Ajustar" dentro da célula da equipe: o resumo é um botão de texto; aberto, os campos empilham. */
.ui-ajustar { min-width: 0; }
.ui-ajustar > summary { display: inline-flex; align-items: center; min-height: var(--chip); font-weight: 700; color: var(--marca); cursor: pointer; }
.ui-ajustar[open] { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 12rem; }

/* Workflows · a área recolhível do editor. */
.wf-area { border-top: 1px solid var(--linha); padding-top: var(--esp-3); min-width: 0; }
.wf-area > summary { min-height: var(--chip); display: flex; align-items: center; font-weight: 700; cursor: pointer; }

/* Integrações · "outras" e Início · "visitas atrasadas": acordeões soltos no fim da página, com respiro em cima. */
.int-outras, .visitas-atrasadas { margin-top: var(--esp-4); }
.visitas-atrasadas > .ui-acordeao__titulo { color: var(--atencao); }

/* Ficha · corpo da seção (dentro do details): campos empilhados com o respiro do cartão. */
.ui-secao-ficha__corpo { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; padding-top: var(--esp-2); }

/* Quadro · links das colunas, desenhados como as abas. */
.ui-abas__aba {
  flex: none; display: inline-flex; align-items: center; gap: var(--esp-2); min-height: var(--alvo); padding: 0 var(--esp-4); margin-bottom: -1px;
  border-bottom: 3px solid transparent; color: var(--tinta-2); font-size: 16px; font-weight: 700; text-decoration: none;
}
.ui-abas__aba:hover { color: var(--tinta); border-bottom-color: var(--linha-media); }
.ui-abas__aba:focus-visible { outline: 3px solid var(--foco); outline-offset: -3px; }

/* Bancada · início desligado: o botão e o motivo na mesma linha, o motivo quebra embaixo se faltar lugar. */
.ui-bancada-inicio-bloqueado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); min-width: 0; }
.ui-bancada-inicio-bloqueado > .ui-apoio { flex: 1 1 14rem; min-width: 0; }
.ui-bancada-inicio-bloqueado > button[disabled] { opacity: 0.7; cursor: not-allowed; }

/* Barra de lista · o "Ordenar por" tem largura própria e vai para o fim da linha. */
.ui-barra-lista__ordem { flex: 0 1 14rem; min-width: 10rem; }

/* Botão pequeno (ação dentro de linha): a altura do chip, texto de 14 px. */
.ui-botao--pequeno { min-height: var(--chip); padding: 0 var(--esp-3); font-size: 14px; }

/* Pesquisa global · um cartão por grupo de resultados. */
.ui-resultados { min-width: 0; gap: var(--esp-3); scroll-margin-top: var(--esp-4); }

/* Rótulo solto (label fora do ui-campo): igual ao rótulo do campo. */
.ui-rotulo { font-size: 14px; line-height: 1.45; font-weight: 700; color: var(--tinta); }

/* Retorno · o texto do "Salvo às 14:32" não muda de largura a cada minuto. */
.ui-salvo__texto { font-variant-numeric: tabular-nums; min-width: 0; }

/* Bancada · a trilha de etapas do workflow: o texto de 14 px (a regra antiga usava 12 px). */
.ui-trilha.trilha li { font-size: 14px; }

/* A faixa sem rede: a do modo teste era laranja de "aviso"; a falta de rede é erro de ambiente, tom de perigo. */
.ui-faixa-modo--rede { background: var(--perigo-fundo); border-color: var(--perigo-linha); color: var(--perigo); }

/* Espera longa: só depois de 1 s esperando um pedido do htmx aparece uma barra fina no alto da janela. O que carrega
   sozinho (polling "every", bloco "load") não acende a barra. Com movimento reduzido, a barra fica parada. */
@keyframes ui-espera-surge { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-espera-corre { from { background-position: 100% 0; } to { background-position: -100% 0; } }
html:has(.htmx-request:not([hx-trigger*="every"]):not([hx-trigger*="load"]))::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--marca-linha) 0%, var(--marca) 50%, var(--marca-linha) 100%); background-size: 200% 100%;
  animation: ui-espera-surge 0.2s linear 1s both, ui-espera-corre 1.2s linear 1s infinite;
}
@media (prefers-reduced-motion: reduce) {
  html:has(.htmx-request:not([hx-trigger*="every"]):not([hx-trigger*="load"]))::before { animation: ui-espera-surge 0.2s linear 1s both; background: var(--marca); }
}

/* Agenda, CRM e reposição (onda 5a, CA). Classes do domínio, sem cor hex: as cores vêm dos tokens. */

/* /agenda/novo: os últimos agendados por quem está agendando. */
.ca-recentes .ui-lista{margin:0;padding-left:1.1em}
.ca-recentes .ui-lista li{margin:2px 0}

/* /agenda/recepcao/modelos: a prévia de cada modelo, abaixo do texto. */
.ca-previa{margin:6px 0 0}

/* /agenda/recursos: o atalho do expediente (mesmo horário, copiar seg.). */
.ca-expediente-acoes{margin:0 0 8px;align-items:center;flex-wrap:wrap}

/* /estoque/reposicao: cobertura do estoque em barra nativa. */
.ca-cobertura{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0}
.ca-cobertura progress{flex:1 1 160px;min-width:120px;height:10px;max-width:360px}

/* /estoque/reposicao: o texto do resumo quebra linha como foi escrito. */
.ca-texto-resumo{white-space:pre-wrap}

/* Onda 5, ARQ-1: o widget de envio direto de arquivos (flow_ui::envio_arquivo + assets/static/js/envio.js). */

.ui-envio [hidden] { display: none !important; }

/* O andamento: a barra ocupa a linha, o texto e os botões vêm embaixo/ao lado. */
.ui-envio__andamento { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); margin-top: var(--esp-2); }
.ui-envio__barra { flex: 1 1 100%; width: 100%; height: 0.5rem; border: 0; border-radius: var(--raio-m); overflow: hidden; background: var(--superficie-2, var(--borda)); accent-color: var(--marca, currentColor); }
.ui-envio__barra::-webkit-progress-bar { background: var(--superficie-2, var(--borda)); border-radius: var(--raio-m); }
.ui-envio__barra::-webkit-progress-value { background: var(--marca, currentColor); border-radius: var(--raio-m); }
.ui-envio__barra::-moz-progress-bar { background: var(--marca, currentColor); border-radius: var(--raio-m); }
.ui-envio__texto { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* Enviando: o botão de escolher fica quieto, sem esconder o nome do arquivo. */
.ui-envio.esta-enviando .ui-arquivo { opacity: 0.7; pointer-events: none; }

/* O erro do servidor aparece abaixo do campo, com o texto que ele mandou. */
.ui-envio__erro { margin-top: var(--esp-2); }

/* Na galeria de fotos da tarefa (form.ph.add): o andamento vai embaixo do "+ foto", sem esticar o quadrado. */
.gal form.ph.add { position: relative; }
.gal form.ph.add .ui-envio__andamento { position: absolute; inset: auto 0 0 0; padding: var(--esp-1) var(--esp-2); background: var(--superficie); }
.gal form.ph.add .ui-envio__erro { position: absolute; inset: auto 0 0 0; padding: var(--esp-1) var(--esp-2); background: var(--superficie); }

/* Espelho de ponto (a página para imprimir e salvar em PDF). Antes era o <style> da view;
   agora é a folha do design system, linkada pela própria página. */
body.espelho{font-family:system-ui,-apple-system,sans-serif;margin:24px;color:var(--papel-tinta);background:var(--papel);font-size:13px}
body.espelho h1{font-size:18px;margin:0 0 6px}
body.espelho p{margin:2px 0}
body.espelho table{border-collapse:collapse;width:100%;margin-top:12px}
body.espelho th,body.espelho td{border:1px solid var(--papel-linha);padding:3px 5px;text-align:left;vertical-align:top}
body.espelho th{background:var(--papel-suave)}
body.espelho tr.dom td{background:var(--papel-suave)}
body.espelho td.oc{font-size:11px;color:var(--papel-perigo)}
body.espelho tfoot td{font-weight:600;background:var(--papel-suave)}
body.espelho .leg{font-size:11px;color:var(--papel-tinta-2);margin-top:8px}
body.espelho .leg code{overflow-wrap:anywhere;word-break:break-all}
body.espelho .leg.interj{max-width:80ch}
body.espelho .acoes{display:flex;gap:10px;margin-bottom:14px}
body.espelho .acoes svg{width:16px;height:16px;vertical-align:-3px;margin-right:4px}
body.espelho .acoes button,body.espelho .acoes a{padding:8px 14px;border-radius:8px;border:1px solid var(--papel-linha);background:var(--papel);color:var(--papel-tinta);text-decoration:none;font-size:13px;cursor:pointer}
body.espelho .assinatura{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-around;margin-top:40px;text-align:center}
body.espelho .tabela-rolagem{overflow-x:auto}
/* A data fica presa à esquerda ao rolar a tabela no celular. */
body.espelho td:first-child,body.espelho th:first-child{position:sticky;left:0;background:var(--papel)}
body.espelho th:first-child{background:var(--papel-suave)}
@media print{body.espelho .acoes{display:none}body.espelho{margin:10mm}body.espelho .tabela-rolagem{overflow:visible}}
@media (max-width:640px){body.espelho{margin:10px}body.espelho table{font-size:11px}body.espelho .ui-so-largo{display:none}}

/* Gráficos da onda 5 (GR): rótulos do eixo x que somem no estreito, valor sobre a barra, nota do menor fora do SVG,
   grade de referência, legenda das barras empilhadas, trilha de etapas, faísca de célula e o período com datas.
   Os componentes são de crates/flow-ui/src/grafico.rs e indicador.rs. Só tokens; cor só por classe. */

/* Figura de barras verticais: o contêiner é ela mesma, para a consulta de largura dos rótulos e dos valores. */
.ui-barras-v { container-type: inline-size; }

/* Rótulos do eixo x: no estreito, os de índice ímpar saem (o título de cada marca continua com a data). */
.ui-grafico__rotulo-x { font-size: 11px; fill: var(--tinta-2); }
@container (max-width: 480px) {
  .ui-barras-v .ui-grafico__rotulo-x--impar { display: none; }
  .ui-barras-v .ui-grafico__valor { display: none; }
}

/* Grade de referência (duas linhas com o valor, sem eixo). */
.ui-grafico__grade { stroke: var(--linha); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.ui-grafico__grade-valor { font-size: 11px; fill: var(--tinta-2); font-variant-numeric: tabular-nums; }

/* Nota do menor da linha: escrita abaixo do SVG, e não sobre a linha. */
.ui-grafico__nota { margin: var(--esp-1) 0 0; font-size: 13px; color: var(--tinta-2); }

/* Barras empilhadas: a legenda escrita embaixo, com o respiro do gráfico. */
.ui-barras-v--empilhadas > .ui-legenda { margin-top: var(--esp-2); }

/* Funil: cada etapa é uma coluna de topo e barra, sem largura estourada. */
.ui-funil-grafico__etapa { display: grid; gap: var(--esp-1); min-width: 0; }

/* Trilha de etapas: horizontal, a atual em destaque, a contagem em cada uma. */
.ui-fluxo-etapas { margin: 0; min-width: 0; }
.ui-fluxo-etapas__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-2); }
.ui-fluxo-etapas__etapa { display: inline-flex; align-items: baseline; gap: var(--esp-2); padding: var(--esp-1) var(--esp-2); border: 1px solid var(--linha); border-radius: 999px; font-size: 14px; color: var(--tinta-2); }
.ui-fluxo-etapas__etapa strong { color: var(--tinta); font-variant-numeric: tabular-nums; }
.ui-fluxo-etapas__etapa a { color: inherit; }
.ui-fluxo-etapas__etapa--atual { border-color: var(--marca); background: var(--marca-suave); color: var(--tinta); font-weight: 700; }

/* Faísca de célula de tabela: pequena, na linha do texto. */
.ui-grafico--mini { display: inline-block; vertical-align: middle; width: 80px; height: 24px; }

/* Meta: o texto do alvo logo abaixo da barra. */
.ui-meta__alvo { margin: var(--esp-1) 0 0; }

/* Período: as datas do intervalo ao lado do rótulo. */
.ui-periodo__datas { color: var(--tinta-2); font-size: 14px; font-variant-numeric: tabular-nums; }

/* O papel A4 dos documentos clínicos (impresso e página pública). Tudo sob .papel (o body da página): o papel é claro em qualquer tema,
   com as cores do papel e não as do app, e não vaza para o resto do design system. */
@page papel{size:A4;margin:14mm 16mm 16mm}
.papel{page:papel}
.papel,.papel *{box-sizing:border-box}
.papel{font-family:Georgia,"Times New Roman",serif;color:var(--papel-tinta);background:var(--papel-suave);margin:0;font-size:11.5pt}
.papel .acoes{font-family:system-ui,sans-serif;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:12px}
.papel .acoes a,.papel .acoes button{padding:8px 14px;border-radius:8px;border:1px solid var(--papel-linha);background:var(--papel);color:var(--papel-tinta);text-decoration:none;font-size:14px;cursor:pointer}
.papel .estado{font-family:system-ui,sans-serif;max-width:178mm;margin:0 auto 10px;padding:10px 14px;border-radius:8px;font-size:14px}
.papel .estado.ok{background:var(--ok-fundo);border:1.5px solid var(--papel-ok)}
.papel .estado.bad{background:var(--perigo-fundo);border:1.5px solid var(--papel-perigo)}
.papel .estado.warn{background:var(--atencao-fundo);border:1.5px solid var(--papel-atencao)}
.papel .folha{background:var(--papel);max-width:178mm;min-height:250mm;margin:0 auto 12px;padding:12mm 14mm;position:relative;display:flex;flex-direction:column;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.papel .cab{display:flex;justify-content:space-between;gap:8mm;border-bottom:1.5px solid var(--papel-tinta);padding-bottom:3mm;margin-bottom:6mm}
.papel .cab h1{font-size:15pt;font-weight:700;margin:0;letter-spacing:.02em}
.papel .cab .dados{font-size:9pt;color:var(--papel-tinta-2);text-align:right;font-family:system-ui,sans-serif}
.papel .via{font-family:system-ui,sans-serif;font-size:8.5pt;text-transform:uppercase;letter-spacing:.08em;color:var(--papel-tinta-2);text-align:right;margin:-3mm 0 3mm}
.papel .texto{white-space:pre-wrap;line-height:1.55;flex:1}
.papel .texto::first-line{font-weight:700;font-size:1.15em;letter-spacing:.02em}
.papel .ass{display:flex;gap:5mm;align-items:flex-end;border-top:1px solid var(--papel-linha);padding-top:3mm;margin-top:8mm;page-break-inside:avoid;font-family:system-ui,sans-serif}
.papel .ass .qr svg{display:block}
.papel .ass .quem{font-size:10.5pt}
.papel .ass .selo{font-size:7.8pt;color:var(--papel-tinta-2);line-height:1.35;margin-top:1.5mm;overflow-wrap:anywhere}
.papel .ass .linha{border-top:1px solid var(--papel-tinta);width:75mm;margin-top:12mm;padding-top:1mm;font-size:9.5pt;text-align:center}
.papel .icp{border:1.2px solid var(--papel-atencao);background:var(--atencao-fundo);padding:2mm 3mm;font-size:8.5pt;margin-top:4mm;font-family:system-ui,sans-serif}
.papel .marca{position:absolute;inset:0;max-width:100%;display:flex;align-items:center;justify-content:center;pointer-events:none;font-family:system-ui,sans-serif;font-size:64pt;font-weight:700;color:rgba(185,28,28,.13);transform:rotate(-28deg)}
@media print{html:has(.papel){height:100%}.papel{height:100%;background:var(--papel)}.papel .acoes,.papel .estado{display:none}.papel .folha{box-shadow:none;margin:0;max-width:none;min-height:100vh;padding:0;page-break-after:always}.papel .folha:last-of-type{page-break-after:auto}}
@media screen{.papel .folha{overflow:hidden}}
/* the receituário (the clinic's model: Pokotucho, HumaVitta) */
.papel .folha.rx{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--rx-escuro);font-size:10.5pt;padding:0 12mm 0;border-top:3mm solid var(--rx)}
.papel .rx.vet{--rx:var(--papel-atencao);--rx-escuro:var(--papel-tinta);--rx-claro:var(--atencao-fundo)}
.papel .rx.odonto,.papel .rx.geral{--rx:var(--papel-marca);--rx-escuro:var(--papel-tinta);--rx-claro:var(--papel-suave)}
.papel .rx-topo{display:flex;justify-content:space-between;align-items:flex-start;padding:8mm 0 4mm}
.papel .rx-marca{display:flex;gap:3mm;align-items:center}
.papel .rx-marca svg{width:12mm;height:12mm;color:var(--rx)}
.papel .rx-nome{font-size:19pt;font-weight:700;line-height:1.05}
.papel .rx-sub{font-size:7.5pt;letter-spacing:.18em;color:var(--rx);text-transform:uppercase;margin-top:1mm}
.papel .rx-tipo{text-align:right;font-size:8.5pt;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.5}
.papel .rx-via{display:inline-block;margin-top:2mm;background:var(--rx);color:var(--papel);border-radius:99px;padding:1mm 3mm;font-size:7pt;letter-spacing:.08em}
.papel .rx-sec{font-size:8.5pt;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin:4mm 0 1.5mm;display:flex;align-items:center;gap:2mm}
.papel .rx-sec::before{content:"";width:1.2mm;height:3.6mm;border-radius:1mm;background:var(--rx)}
.papel .rx-grade{display:flex;gap:4mm;margin-bottom:2mm}
.papel .rx-campo{flex:1;min-width:0;border-bottom:.6pt solid var(--papel-linha);padding-bottom:1mm}
.papel .rx-campo small{display:block;font-size:6.2pt;letter-spacing:.1em;text-transform:uppercase;color:var(--papel-tinta-2);margin-bottom:1mm}
.papel .rx-campo span{display:block;min-height:4.6mm;font-size:10pt;overflow-wrap:anywhere}
.papel .rx-caixa{flex:1;border:.8pt solid var(--papel-linha);border-radius:3mm;padding:4mm 5mm;position:relative;overflow:hidden;min-height:60mm}
.papel .rx-caixa .rx-r{font-family:Georgia,serif;font-size:20pt;font-weight:700;color:var(--rx);line-height:1}
.papel .rx-caixa .rx-r sub{font-size:10pt}
.papel .rx-caixa .rx-emblema{position:absolute;left:50%;top:55%;width:55mm;height:55mm;transform:translate(-50%,-50%);color:var(--rx-claro);z-index:0}
.papel .rx-texto{position:relative;z-index:1;margin-top:2mm;line-height:1.5}
.papel .rx-texto .rx-uso{font-size:8pt;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rx);margin:2.5mm 0 1mm}
.papel .rx-texto .rx-med{display:flex;align-items:baseline;gap:2mm;font-weight:700;margin-top:1.5mm}
.papel .rx-texto .rx-guia{flex:1;border-bottom:.8pt dotted var(--papel-linha);transform:translateY(-1mm)}
.papel .rx-texto .rx-poso{padding-left:5mm}
.papel .rx-texto .rx-vazio{height:2mm}
.papel .rx-pe{display:flex;justify-content:space-between;align-items:flex-end;gap:10mm;margin-top:8mm;page-break-inside:avoid}
.papel .rx-local{flex:0 0 70mm;border-bottom:.6pt solid var(--papel-linha);padding-bottom:1mm}
.papel .rx-local small{display:block;font-size:6.2pt;letter-spacing:.1em;text-transform:uppercase;color:var(--papel-tinta-2);margin-bottom:1mm}
.papel .rx-ass{flex:1;text-align:center;font-size:8pt;color:var(--papel-tinta-2)}
.papel .rx-ass .rx-linha{border-top:.8pt solid var(--rx-escuro);padding-top:1.2mm}
.papel .rx-ass .rx-quem{font-size:9.5pt;color:var(--rx-escuro);margin-top:.8mm}
.papel .rx-ass .rx-digital{display:flex;gap:3mm;align-items:center;text-align:left;font-size:7.5pt}
.papel .rx-aviso{text-align:center;font-style:italic;font-size:7.5pt;color:var(--papel-tinta-2);margin:5mm 0 3mm}
.papel .rx-caixas{display:flex;gap:4mm;margin-top:5mm}
.papel .rx-bloco{flex:1;background:var(--rx-claro);border:.8pt solid var(--papel-linha);border-radius:3mm;padding:3mm 4mm}
.papel .rx-bloco b{font-size:7.5pt;letter-spacing:.08em;text-transform:uppercase}
.papel .rx-rodape{margin:0 -12mm;background:var(--rx-escuro);color:var(--papel);text-align:center;font-size:7.5pt;padding:3.5mm 12mm}
.papel .cab-rodape{font-size:9pt;color:var(--papel-tinta-2);font-family:system-ui,sans-serif}
.papel .ass.centro{justify-content:center}
.papel .rx-hash{font-size:6.5pt;overflow-wrap:anywhere}
.papel .rx-linha--alta{margin-top:9mm}
.papel .rx-bloco--largo{flex:1.7}
.papel .rx-ass--alta{margin-top:12mm}
.papel .rx-data{margin-top:4mm;font-size:8pt}
.papel .estado.topo{margin-top:24px}
@media print{.papel .folha.rx{padding:0 12mm}}

/* ══ Ponto: quiosque, batida, rotinas e as telas de RH do ponto (PQ, 18/10) ═══════════════════════════ */

/* quiosque (PUNCH) */
html{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;background:var(--fundo);color:var(--tinta);font-family:system-ui,-apple-system,sans-serif}
[hidden]{display:none!important}
.ui-quiosque{box-sizing:border-box;width:100%;max-width:420px;min-height:100vh;margin:0 auto;justify-content:flex-start;padding:var(--esp-6) var(--esp-3) var(--esp-6)}
.ui-quiosque > *{max-width:100%}
#video-wrap{position:relative;width:100%;max-width:100%;max-height:35vh;padding:0;overflow:hidden}
#video-wrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.ui-quiosque .ui-entrada::placeholder{color:var(--tinta-2);opacity:1}
.ui-quiosque .ui-campo{width:100%;text-align:left}
#aviso{position:absolute;left:var(--esp-3);right:var(--esp-3);bottom:var(--esp-3);margin:0;padding:var(--esp-3);border-radius:var(--raio-m);background:var(--superficie);color:var(--tinta);font-weight:700;text-align:center}
.nao-quebra{white-space:nowrap}
.ui-quiosque__relogio{margin:0;font-size:clamp(56px,22vw,96px);font-weight:700;line-height:1;text-align:center;font-variant-numeric:tabular-nums;color:var(--tinta)}
#pin-area{display:flex;flex-direction:column;gap:var(--esp-2)}
.ui-quiosque__resultado:has(#resultado:empty){display:none}
#resultado:empty{display:none}
#resultado.ok{color:var(--ok)}
#resultado.bad{color:var(--perigo)}
ul#hoje{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--esp-2);justify-content:center}
ul#hoje li{padding:var(--esp-1) var(--esp-3);border:1px solid var(--linha-media);border-radius:var(--raio-pilula);background:var(--superficie-suave);font-size:14px}
.ui-quiosque__pin{gap:var(--esp-3)}
fieldset.ui-chips{margin:0;border:0;padding:0;gap:var(--esp-3)}
fieldset.ui-chips legend{padding:0}

/* batida (PONTO) */
.ponto-bater{max-width:420px;margin:0 auto;width:100%}
[hidden]{display:none!important}
.ponto-bater{display:flex;flex-direction:column;gap:var(--esp-4);max-width:480px;margin:0 auto;padding:var(--esp-4)}
#video-wrap{position:relative;width:100%;overflow:hidden;aspect-ratio:4/3}
#video-wrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
#aviso{position:absolute;left:var(--esp-3);right:var(--esp-3);bottom:var(--esp-3);margin:0;padding:var(--esp-3);border-radius:var(--raio-m);background:var(--superficie);color:var(--tinta);font-weight:700;text-align:center}
/* O quadro do rosto tem formato de rosto: uma oval em pé (3:4), centrada; o texto de orientação fica fora dela, embaixo. */
#video-wrap.ui-rosto__moldura{width:min(56%,200px);max-height:none;aspect-ratio:3/4;margin-inline:auto;padding:0;border-radius:50%}
.ponto-bater #aviso,#passo-camera #aviso{position:static;background:transparent;padding:0;text-align:center}
/* Hoje: cada batida numa linha só: o tipo com cor, a hora, e o NSR com o código em texto pequeno. */
.ponto-batida{display:flex;flex-wrap:nowrap;align-items:baseline;gap:var(--esp-2);padding:var(--esp-2) var(--esp-3);border-left:4px solid var(--linha-forte);border-radius:var(--raio-m)}
.ponto-batida + .ponto-batida{margin-top:var(--esp-1)}
.ponto-batida__tipo{flex:none;font-weight:700;white-space:nowrap}
.ponto-batida__hora{flex:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.ponto-batida__selo{flex:1 1 auto;min-width:0;margin-left:auto;font-size:12px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ponto-batida--entrada{border-left-color:var(--ok);background:var(--ok-fundo)}
.ponto-batida--entrada .ponto-batida__tipo{color:var(--ok)}
.ponto-batida--pausa{border-left-color:var(--atencao);background:var(--atencao-fundo)}
.ponto-batida--pausa .ponto-batida__tipo{color:var(--atencao)}
.ponto-batida--volta{border-left-color:var(--info);background:var(--info-fundo)}
.ponto-batida--volta .ponto-batida__tipo{color:var(--info)}
.ponto-batida--saida{border-left-color:var(--tinta-2);background:var(--superficie-suave)}
.ponto-batida--saida .ponto-batida__tipo{color:var(--tinta-2)}
.ponto-batida--retida{border-left-color:var(--atencao);color:var(--atencao)}
#resultado{min-height:1.4em;font-weight:600}
#resultado.ok{color:var(--ok)}
#resultado.bad{color:var(--perigo)}
#resultado.warn{color:var(--atencao)}
#opcoes.escolhendo .opcao[aria-pressed=false]{color:var(--tinta-2);border-style:dashed}
#pin-area{display:flex;gap:var(--esp-2);align-items:center;margin-top:var(--esp-2)}
#pin-area .ui-entrada{flex:1;min-width:0}
#alternativas{margin-top:var(--esp-2)}
#esquecida{display:flex;flex-direction:column;gap:var(--esp-2)}
#esquecida[hidden]{display:none}
ul.ui-lista li.retida{color:var(--atencao)}
#progresso{display:flex;gap:var(--esp-2);justify-content:center;list-style:none;padding:0;margin:0}
#progresso li{width:14px;height:14px;border-radius:50%;border:2px solid var(--linha-forte)}
#progresso li.agora{border-color:var(--marca)}
#progresso li.feito{background:var(--ok);border-color:var(--ok)}
.ponto-cargo{flex:1 1 14rem}

/* telas de administração (ADMIN) */
.ponto-admin{padding:16px;max-width:1100px}
.ponto-passos{max-width:70ch}
.ponto-passos .ui-passos__resumo{margin:0 0 0 48px;font-size:15px}
.ponto-admin h2{margin-top:0}
.ponto-admin table{border-collapse:collapse;width:100%;font-size:.92rem}
.ponto-admin th,.ponto-admin td{border:1px solid var(--linha);padding:6px 8px;text-align:left}
.ponto-admin .grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;align-items:end;margin-bottom:18px}
.ponto-admin .grid-form input,.ponto-admin .grid-form select,.ponto-admin .grid-form button{padding:8px}
.ponto-admin .pin-form{display:flex;gap:6px}
.ponto-admin .pin-form input{width:90px}
.ponto-admin .aviso{background:var(--atencao-fundo);border:1px solid var(--atencao);border-radius:8px;padding:10px 14px;margin-bottom:16px}
.ponto-admin .escala-scroll{overflow-x:auto}
.ponto-admin table.escala-grid td,.ponto-admin table.escala-grid th{padding:2px 4px;text-align:center;min-width:22px;font-size:.78rem}
.ponto-admin td.trabalha{color:var(--ok)}
.ponto-admin td.folga{opacity:.35}
.ponto-admin td.plantao{color:var(--atencao);font-weight:700}
.ponto-admin td.afastado{color:var(--perigo);opacity:.7}
.ponto-admin td[data-rotulo="como"],.ponto-admin td[data-rotulo="distância"],.ponto-admin td[data-rotulo="escala"]{white-space:nowrap}
.ponto-admin label.ponto-codigo{min-width:8rem}
.ponto-admin label.ponto-data{max-width:12rem}
.ponto-admin .resumo{list-style:none;padding:0;display:flex;gap:24px;flex-wrap:wrap}
.ponto-admin .resumo li.bad{color:var(--perigo)}
.ponto-admin .botao{display:inline-block;background:var(--info);color:var(--sobre-marca);padding:12px 20px;border-radius:10px;text-decoration:none;font-weight:600}
.ponto-admin .hint{opacity:.7;font-size:.9rem}
.ponto-admin .ok{color:var(--ok);font-weight:600}
.ponto-admin .warn{color:var(--atencao);font-weight:600}
.ponto-admin .como-funciona{border:1px solid var(--b-line,var(--linha));border-radius:12px;padding:4px 16px 8px;margin-bottom:16px}
.ponto-admin .como-funciona li{margin:6px 0}
.ponto-admin ul.links li{margin:6px 0}
.ponto-admin fieldset{border:1px solid var(--b-line,var(--linha));border-radius:10px;padding:10px 14px;margin:0 0 14px}
.ponto-admin fieldset label{display:block;margin:4px 0}

/* rotinas (ROTINA) */
.rotina-cartao fieldset:not(:has(input[value=nao]:checked)) input[name^=obs]{display:none}
.rotina-cartao .item{display:flex;flex-direction:column;gap:var(--esp-2)}
.rotina-cartao .item .ui-cartao__topo{gap:var(--esp-3)}
.rotina-cartao .item .ui-etiqueta{margin-left:var(--esp-2)}
img.miniatura{max-width:140px;max-height:140px;border-radius:10px;object-fit:cover}
.rotina .item .tag{font-size:.75rem;padding:2px 8px;border-radius:999px;border:1px solid currentColor;white-space:nowrap}
.rotina [hidden],.item-ed [hidden]{display:none!important}
.rotina textarea{font-family:inherit}
.rotina .opcao input[type=radio]{width:20px;height:20px;flex-shrink:0}
.rotina .opcao>span{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}

/* edição de item de rotina */
.item-ed{display:flex;flex-direction:column;gap:6px}.item-ed label{display:block}.item-ed [hidden]{display:none!important}

/* rotinas: cada item é um cartão numerado; o número sai do CSS, então reordenar ou remover não deixa número errado */
#itens{counter-reset:item}
#itens>.item-ed{counter-increment:item;margin:0 0 var(--esp-3)}
#itens>.item-ed::before{content:"Item " counter(item);display:block;margin-bottom:var(--esp-2);font-weight:700}

/* Onda 5b, pacote PRV (provedor e campo). Só classes do domínio, prefixo prv-. */

/* Protocolo da conferência e da vistoria: o rótulo e o número lado a lado, com respiro, e quebrando linha no celular. */
.prv-protocolo { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--esp-2); }
.prv-protocolo > b { font-size: 16px; }

/* ══ Meu RH e escalas (RHa, onda 5a, 18/10): o recibo e o comprovante, que saem para impressão, e a matriz da escala proposta ═══ */

/* Recibo e comprovante (página solta, sem a casca). Escopo `.rh-recibo` para não vazar para as telas do app. */
.rh-recibo { font-family: var(--font-sans); margin: var(--esp-6); color: var(--tinta); background: var(--superficie); font-size: 14px; max-width: 760px; }
.rh-recibo h1 { font-size: 19px; margin: 0 0 var(--esp-1); }
.rh-recibo table { border-collapse: collapse; width: 100%; margin: var(--esp-3) 0; }
.rh-recibo th, .rh-recibo td { border: 1px solid var(--linha-media); padding: var(--esp-2); text-align: left; vertical-align: top; }
.rh-recibo th { background: var(--superficie-suave); width: 32%; }
.rh-recibo code { word-break: break-all; }
.rh-recibo .rh-rec-codigo { font-size: 22px; font-weight: 700; letter-spacing: 2px; }
.rh-recibo .rh-rec-leg { font-size: 12px; color: var(--tinta-2); }
.rh-recibo .rh-rec-acoes { display: flex; gap: var(--esp-2); margin-bottom: var(--esp-3); flex-wrap: wrap; }
.rh-recibo .rh-rec-acoes a, .rh-recibo .rh-rec-acoes button { padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-m); border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--tinta); text-decoration: none; font-size: 14px; cursor: pointer; }
.rh-recibo .rh-rec-msg { background: var(--info-fundo); border: 1px solid var(--info-linha); border-radius: var(--raio-m); padding: var(--esp-2) var(--esp-3); margin-bottom: var(--esp-3); }
@media print {
  .rh-recibo .rh-rec-acoes, .rh-recibo .rh-rec-msg { display: none; }
  .rh-recibo { margin: 12mm; background: transparent; }
}

/* Escala proposta: a coluna dos nomes fica presa quando a grade passa da largura da tela (251). */
.rh-escala-matriz .ui-calor :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--superficie); box-shadow: 1px 0 0 var(--linha); }
.rh-escala-matriz .ui-calor thead th:first-child { z-index: 2; background: var(--superficie-suave); }

/* Onda 5b, pacote W1 (clínica, atendimento). Só classes do domínio (Y9): cs-, ag-, odg-, odp-, oa4-. */

/* Consulta: a faixa "O que falta" vira chips (W1-2). */
.cs-falta .cs-falta-titulo { margin: 0 0 8px; font-weight: 600; }
.cs-falta-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-falta-chip {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  border: 1px solid currentColor; font-size: 14px; text-decoration: none;
}

/* Consulta no celular: o "Ações" do lado some (o cs-barra do pé tem as mesmas ações) e a página
   ganha o espaço da barra no pé (W1-2). */
@media (max-width: 640px) {
  .cs-acoes-lado { display: none; }
  #cs-consulta { padding-bottom: calc(var(--status-h) + 64px); }
}

/* Agenda: os estados com movimento, numa linha só (W1-8). */
.ag-estados { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Agenda: os horários que sobram do dia, e os dias depois do segundo (W1-4). */
.ag-mais > summary,
.ag-outros > summary { cursor: pointer; padding: 6px 0; color: var(--cor-apoio, inherit); }
.ag-mais .ag-slot,
.ag-outros .ag-slot { margin-top: 4px; }

/* Odontograma: no estreito, quatro quadrantes no lugar do desenho inteiro (W1-11). */
.odg-quadrantes { display: none; }
@media (max-width: 640px) {
  .odg-mapa { display: none; }
  .odg-quadrantes { display: block; }
  .odg-quadrantes__grade { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 8px; }
  .odg-quadrante { width: 100%; height: auto; }
}

/* Documento clínico: os exames em grade no largo (W1-6). */
.doc-exames { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; }

/* Consulta finalizada: a ação que falta sobe para uma faixa no topo (W1-2). */
.cs-faixa-final { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }

/* W3a (5b): dinheiro, recebimento e contrato. Só classes do domínio do financeiro (`fin-`). */

/* Um cartão que ocupa a grade toda (as notas: os e-mails recebidos). */
.fin-largo {
  grid-column: 1 / -1;
}

/* O "Mostrar mais" de uma lista longa: um resumo com o total, e a lista da continuação abaixo. */
.fin-mostrar-mais > summary {
  cursor: pointer;
  padding: 8px 0;
}

/* O link que não cabe (273, 237): quebra em qualquer ponto em vez de empurrar a página. */
.fin-quebra, .fin-quebra code, .ui-recibo .ui-codigo, .ui-recibo a { overflow-wrap: anywhere; word-break: break-word; }

/* O recibo público no celular (237): 16 px de cada lado, sem encostar na borda da tela. */
.ui-pub .ui-recibo { width: calc(100% - 2 * var(--esp-4)); box-sizing: border-box; }

/* Onda 5b, pacote W3b: dinheiro, fiscal, compras e contabilidade. Só as classes deste domínio. */

/* /compras/config: os campos das alçadas em até 3 colunas no largo, uma no estreito. */
.compras-alcadas .ui-grade-campos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .compras-alcadas .ui-grade-campos { grid-template-columns: minmax(0, 1fr); }
}

/* /campo/abastecer/{id}: o formulário de conferir tem largura de leitura, e o campo com a unidade dentro. */
.abast-conferir { max-width: 40rem; }
.abast-conferir .ui-afixo { max-width: 16rem; }

/* /cobranca: cada desfecho do "Resolver" é um formulário de um botão com a frase embaixo. */
.ui-menu .resolver { display: flex; flex-direction: column; gap: var(--esp-1); padding: var(--esp-1) var(--esp-2); }
.ui-menu .resolver .ui-apoio { padding-inline: var(--esp-2); }

/* Onda 5b, pacote W4a (RH, gestão). Só classes do domínio RH: o ui-* é do UI5 e do AY5. */

/* Escalas: o padrão de cada dia, em fieldset, com Manhã e Tarde lado a lado no celular. */
.rh-dia-padrao {
  border: 0;
  margin: 0 0 12px;
  padding: 0;
}
.rh-dia-padrao > legend {
  font-weight: 600;
  margin-bottom: 4px;
}

/* Convenção: o grupo de cláusulas é um bloco fechado, com o título e a contagem no resumo. */
.rh-grupo-clausulas > summary {
  font-weight: 600;
}

/* KPIs: a definição dos indicadores é um bloco fechado; o resumo ocupa a linha toda. */
.rh-definicao > summary {
  list-style: none;
  cursor: pointer;
}
.rh-definicao > summary::-webkit-details-marker {
  display: none;
}

/* Pendências: um cartão por pessoa. */
.rh-pessoa > p {
  margin: 2px 0 8px;
}

/* Ponto do mês: a semana fechada mostra os números no resumo; o corpo aparece ao abrir. */
.pmes-semana > summary {
  cursor: pointer;
  list-style: none;
}
.pmes-semana > summary::-webkit-details-marker {
  display: none;
}
.pmes-corpo {
  margin-top: 8px;
}

/* W4b (5b): o Meu ponto. As batidas do dia em lista, logo abaixo da data.
   Só classes do domínio de ponto (a numeração dos itens da rotina já é do dominio-5-ponto.css). */
.ponto-batidas {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Onda 5b, pacote W6 (admin e web). Só o que as telas do W6 pedem: o ui-* é do UI5 e do AY5. */

/* Permissões: a caixa de cada célula tem a largura do texto ("não vê", "herda: não vê"),
   e não um mínimo fixo que alarga a coluna inteira no celular. */
.ui-matriz select.ui-matriz__celula {
  field-sizing: content;
  min-width: 0;
  max-width: 100%;
  width: auto;
  text-overflow: ellipsis;
}

/* Formulário recusado dentro de uma célula da matriz: o aviso fica estreito e não alarga a coluna. */
.ui-matriz td form > .ui-aviso {
  margin: 0 0 var(--esp-1);
  max-width: 16rem;
}

/* WhatsApp e integrações: a URL de callback é um campo só de leitura; ela encolhe com o cartão
   (no celular não abre rolagem de lado) e quebra onde couber quando vira texto. */
input[data-selecionar] {
  min-width: 0;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
}
code,
.ui-mono {
  overflow-wrap: anywhere;
}

/* /equipe: o aviso do formulário recusado dentro do "Ajustar" não estoura a coluna. */
.equipe .ui-ajustar form > .ui-aviso {
  margin: 0 0 var(--esp-1);
}

/* /metas: a barra da equipe no topo ocupa a largura toda, antes do resumo. */
.metas-topo {
  margin-bottom: var(--esp-3);
}

/* Workflow, bancada, quadro e filas (onda 5b, WF). Só as classes do domínio; as cores vêm dos tokens. */

/* Barras de busca e filtro de /quadro, /filas e /workflows: campos lado a lado, quebrando no celular. */
.quadro-filtros,.filas-filtros,.wf-busca{display:flex;flex-wrap:wrap;gap:var(--esp-3);align-items:flex-end;margin:0 0 var(--esp-3)}
.quadro-filtros .ui-campo--largo,.wf-busca .ui-campo--largo{flex:1 1 16rem}
.quadro-seletor{margin:0 0 var(--esp-3)}

/* /quadro no celular (WF-3): uma raia por vez, a escolhida em ?raia= ou a primeira com cartão. No largo, lado a lado. */
@media (max-width:720px){
  main.quadro .raias{display:block;overflow-x:visible}
  main.quadro .raias > .raia:not([data-atual]){display:none}
}

/* /filas (WF-2): cada pendente em uma linha; as 5 primeiras à vista, o resto num "ver as N". */
.fila-pendentes{list-style:none;margin:0 0 var(--esp-2);padding:0;display:flex;flex-direction:column}
.fila-pendentes .pendente{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--esp-1) var(--esp-3);padding:var(--esp-2) 0;border-bottom:1px solid var(--linha)}
.fila-pendentes .pendente > a{flex:1 1 14rem;min-width:0}
.fila-resto{margin:0 0 var(--esp-2)}

/* /bancada no celular (WF-5): com uma tarefa aberta, a aba "Tarefa" e a aba "Fila" (links para #mesa e #rail, sem JS). */
.bancada-abas{display:none}
@media (max-width:900px){
  .sala > .ui-cabecalho{order:-3}
  .sala > .bancada-abas{display:flex;order:-2}
  .sala:has(#stage:not(.vazio)):not(:has(#rail:target)) > .rail{display:none}
  .sala:has(#rail:target) > .mesa{display:none}
}

/* "Chegou" na fila da bancada: uma linha por item (título, tipo, espera). O assunto fica no title do link. */
.pc--linha{padding:var(--esp-2) var(--esp-3)}
.pc--linha .ui-tarefa__linha1{flex-wrap:nowrap;align-items:center;gap:var(--esp-2)}
.pc--linha .ui-tarefa__cliente{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc--linha .ui-tarefa__espera{flex:none;white-space:nowrap}

/* /workflows/{chave} (WF-1): o resumo legível acima do texto, e o YAML recolhido. */
.wf-resumo__passos{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:var(--esp-3)}
.wf-resumo__linhas{list-style:disc;margin:var(--esp-1) 0 0;padding-left:1.2em}
.wf-resumo__passa{color:var(--tinta-2)}
.wf-texto{margin:0 0 var(--esp-3)}
.wf-widgets{margin:0 0 var(--esp-2)}

/* Onda 6a · AY6 — o valor e a data que não quebram, o cartão do celular, a rolagem com indicador e as classes das
   peças novas do flow-ui (cabeçalho com situação, linha vazia, efeito, somente leitura, faltam, falha, abas de rota).
   Só tokens, nenhuma cor escrita à mão. As regras de casca, formulário e largura de leitura estão no fim de
   assets/static/css/ds/app.css, que carrega depois do ds.css. */

/* A1: o valor e a data não quebram no meio. O corpo desce por @container (20 px abaixo de 11 rem) em vez de quebrar. */
.ui-kpi__valor { overflow-wrap: normal; white-space: nowrap; }
@container (max-width: 11rem) { .ui-kpi__valor { font-size: 20px; } }
.ui-cartao :is(.ui-num, time, .ui-data), .ui-tabela time { white-space: nowrap; overflow-wrap: normal; }

/* A3: no modo cartão do celular, a célula vazia some e a ação vira a última linha, em largura cheia. */
@container (max-width: 640px) {
  .ui-tabela--cartoes tbody td:empty, .ui-tabela--cartoes tbody td.e-vazio { display: none; }
  .ui-tabela--cartoes tbody td.ui-col-acoes { order: 99; width: 100%; justify-content: stretch; padding-top: var(--esp-3); }
  .ui-tabela--cartoes tbody td.ui-col-acoes > * { flex: 1 1 auto; }
}

/* A4: a rolagem de lado avisa que há mais. O casca.js marca `.tem-mais-x` só quando o conteúdo passa da largura e
   ainda não rolou até o fim: tabela que cabe não perde o fim da última coluna (a das ações). */
.ui-tabela:not(.ui-tabela--cartoes), .ui-grade-dias { overflow-x: auto; }
:is(.ui-tabela:not(.ui-tabela--cartoes), .ui-grade-dias, .ui-abas).tem-mais-x { -webkit-mask-image: linear-gradient(to right, black calc(100% - 1.5rem), transparent); mask-image: linear-gradient(to right, black calc(100% - 1.5rem), transparent); }
.ui-abas.tem-mais-x { padding-inline-end: var(--esp-6); }

/* A7: as classes das peças novas. */
/* Cabeçalho: a situação com número ("Faltam 3 passos"), logo abaixo do objetivo. */
.ui-cabecalho__situacao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); margin: 0; font-size: 16px; font-weight: 700; color: var(--tinta); }
.ui-cabecalho__situacao.esta-ok { color: var(--ok); }
.ui-cabecalho__situacao.esta-atencao { color: var(--atencao); }
.ui-cabecalho__situacao.esta-perigo { color: var(--perigo); }
.ui-cabecalho__situacao.esta-info { color: var(--info); }
.ui-cabecalho__situacao > a { font-weight: 700; color: var(--marca); }

/* Abas que são rotas (com contagem e aria-current): a mesma faixa das abas. */
.ui-abas-rota { display: flex; flex-wrap: nowrap; gap: var(--esp-1); max-width: 100%; overflow-x: auto; border-bottom: 1px solid var(--linha); scrollbar-width: none; }
.ui-abas-rota > ul { display: flex; flex-wrap: nowrap; gap: var(--esp-1); margin: 0; padding: 0; list-style: none; }
.ui-abas-rota > ul > li { flex: none; margin: 0; padding: 0; list-style: none; }
.ui-abas-rota a { flex: none; display: inline-flex; align-items: center; gap: var(--esp-2); min-height: var(--alvo); padding: 0 var(--esp-4); margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--tinta-2); font-size: 16px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.ui-abas-rota a:hover { color: var(--tinta); border-bottom-color: var(--linha-media); }
.ui-abas-rota a[aria-current="page"] { color: var(--marca); border-bottom-color: var(--marca); }
.ui-abas-rota a:focus-visible { outline: 3px solid var(--foco); outline-offset: -3px; }

/* Linha vazia: uma linha ("Nenhuma ONU deste contrato · Procurar no ACS") no lugar de um cartão inteiro vazio. */
.ui-linha-vazia { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); margin: 0; padding: var(--esp-3) var(--esp-4); border: 1px dashed var(--linha-media); border-radius: var(--raio-m); color: var(--tinta-2); }
.ui-linha-vazia > strong { color: var(--tinta); }
.ui-linha-vazia > a, .ui-linha-vazia > .ui-botao { margin-left: auto; }

/* O efeito do botão, em uma frase, sob o primário ("Aprovar publica a escala no ponto de todos"). */
.ui-efeito { margin: var(--esp-1) 0 0; font-size: 14px; line-height: 1.45; color: var(--tinta-2); max-width: 60ch; }

/* Somente leitura: o conjunto de campos desligados, sem cara de erro. */
.ui-somente-leitura { min-width: 0; margin: 0; padding: 0; border: 0; }
.ui-somente-leitura :is(input, select, textarea):disabled { background: var(--superficie-suave); color: var(--tinta-2); border-color: var(--linha); cursor: default; opacity: 1; }
.ui-somente-leitura button:disabled { display: none; }

/* "Faltam 3 de 9 campos": o casca.js atualiza; completo, o tom é ok e discreto. */
.ui-faltam { margin: 0; font-size: 14px; line-height: 1.45; font-weight: 700; color: var(--atencao); font-variant-numeric: tabular-nums; }
.ui-faltam.esta-completo { color: var(--ok); font-weight: 400; }

/* Falha de integração em linguagem de negócio: o conserto, "Tentar de novo" e o detalhe técnico fechado. */
.ui-falha { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; padding: var(--esp-4) var(--esp-5); border: 1px solid var(--perigo-linha); border-left-width: 4px; border-radius: var(--raio-m); background: var(--perigo-fundo); color: var(--tinta); }
.ui-falha > :is(p, strong) { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ui-falha > strong { color: var(--perigo); }
.ui-falha > .ui-acoes { flex-wrap: wrap; }
.ui-falha details > summary { min-height: var(--chip); display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.ui-falha details pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }

/* As classes que o UI6 desenha além do contrato: a situação pelo tom, a contagem da aba, o corpo da falha e o "por quem". */
.ui-cabecalho__situacao--ok { color: var(--ok); }
.ui-cabecalho__situacao--atencao { color: var(--atencao); }
.ui-cabecalho__situacao--perigo { color: var(--perigo); }
.ui-cabecalho__situacao--info { color: var(--info); }
.ui-cabecalho__situacao--marca { color: var(--marca); }
.ui-abas-rota__contagem { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; padding: 0 var(--esp-2); border-radius: 999px; background: var(--superficie-suave); color: var(--tinta-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-abas-rota a[aria-current="page"] .ui-abas-rota__contagem { background: var(--marca); color: var(--superficie); }
.ui-falha__corpo { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }
.ui-falha__corpo > p { margin: 0; overflow-wrap: anywhere; }
.ui-falha__titulo { font-weight: 700; color: var(--perigo); }
.ui-falha__detalhe > summary { min-height: var(--chip); display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.ui-falha__detalhe pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.ui-quem-quando { color: var(--tinta-2); font-size: 14px; white-space: nowrap; }

/* Peças da ação principal (2.3a, item 5): o próximo passo, a barra de impressão e o termo em linha. */
.ui-proximo-passo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--marca-linha); border-radius: var(--raio-m); background: var(--marca-suave); color: var(--tinta); }
.ui-proximo-passo > p { flex: 1 1 14rem; min-width: 0; margin: 0; font-weight: 700; }
.ui-barra-impressao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); }
.ui-barra-impressao > .ui-botao { min-height: var(--alvo); }
span.ui-termo { display: inline; position: relative; }
.ui-termo__palavra { display: inline; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: help; border-bottom: 1px dotted var(--tinta-2); }
.ui-termo__texto[popover] { max-width: min(20rem, calc(100vw - 2 * var(--esp-4))); padding: var(--esp-3); border: 1px solid var(--linha-media); border-radius: var(--raio-m); background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-flutuante); font-size: 14px; }
/* O anel da disponibilidade no avatar (o estado segue à vista quando o formulário sai do topo). */
.ui-usuario[data-disp] .ui-avatar { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--linha-forte); }
.ui-usuario[data-disp="available"] .ui-avatar { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--ok-luz); }
.ui-usuario[data-disp="busy"] .ui-avatar { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--atencao); }
.ui-usuario[data-disp="away"] .ui-avatar { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--linha-forte); }

/* RH: escala proposta no celular e passos empilhados (DF-RH, leva 6a) */

/* Grade por semana: só aparece no celular. A matriz (`.rh-escala-matriz`) fica no largo. */
.rh-escala-semanas { display: none; }
.rh-escala-semana { width: 100%; border-collapse: collapse; table-layout: fixed; margin: var(--esp-3) 0; font-size: 13px; color: var(--tinta); }
.rh-escala-semana caption { text-align: left; font-weight: 700; padding: var(--esp-2) 0; }
.rh-escala-semana th, .rh-escala-semana td { border: 1px solid var(--linha-media); padding: var(--esp-1) 0; text-align: center; }
.rh-escala-semana th { font-weight: 700; background: var(--superficie-suave); }
.rh-escala-semana .rh-escala-nome { width: 5.5rem; text-align: left; padding-left: var(--esp-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.rh-escala-celula.rh-cor-marca { background: var(--marca-suave); }
.rh-escala-celula.rh-cor-serie-1 { background: var(--marca-suave); }
.rh-escala-celula.rh-cor-serie-3 { background: var(--superficie-suave); }
.rh-escala-celula.rh-cor-atencao { background: var(--atencao); font-weight: 700; }
.rh-escala-celula.rh-cor-perigo { background: var(--perigo-fundo); }
.rh-escala-celula.rh-cor-neutra { color: var(--tinta-2); }
.rh-escala-celula a { color: var(--marca); text-decoration: none; }

/* Passos da escala: em linha no largo; empilhados no celular, cada um na sua linha. */
.rh-passos { flex-wrap: wrap; }

@media (max-width: 640px) {
  .rh-escala-matriz { display: none; }
  .rh-escala-semanas { display: block; }
  .rh-passos { display: flex; flex-direction: column; gap: var(--esp-2); }
}

/* R-PONTO (leva 6b): a escala por semana no celular, a legenda em palavras e a lista de marcações legível */

/* A grade do mês no largo; no celular, uma semana por vez (a outra fica escondida). */
.ponto-escala-semana { display: none; }
.ponto-escala-semana table.escala-semana { width: 100%; table-layout: fixed; }
.ponto-escala-semana table.escala-semana td, .ponto-escala-semana table.escala-semana th { min-width: 0; padding: var(--esp-1); font-size: 13px; overflow-wrap: anywhere; }
.ponto-escala-semana nav { margin-bottom: var(--esp-2); }

/* O horário ou a palavra escrita na célula: o texto lê-se sem depender da cor. */
.ponto-admin table.escala-grid td { min-width: 3.4rem; white-space: nowrap; font-size: 13px; }
.ponto-escala-semana table.escala-grid td { white-space: normal; }
.ponto-admin table.escala-grid td.folga { opacity: 1; color: var(--tinta-2); }
.ponto-admin table.escala-grid td.afastado { opacity: 1; color: var(--perigo); font-weight: 700; }
.ponto-admin table.escala-grid td.plantao { color: var(--atencao); font-weight: 700; }
.ponto-admin table.escala-grid td.trabalha { color: var(--ok); font-weight: 700; }

/* A legenda em palavras, uma por linha no celular. */
.ponto-admin .ponto-legenda { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); font-size: 14px; color: var(--tinta); }

/* Marcações e equipe: letra de 15 px (a tabela de 14,7 px passava despercebida). */
.ponto-admin .ponto-tabela td, .ponto-admin .ponto-tabela th { font-size: 15px; }
.ponto-admin .ponto-tabela td:last-child { white-space: normal; }
.ponto-admin .ponto-tabela td:last-child details { margin-top: var(--esp-2); }

@media (max-width: 640px) {
  .ponto-escala-matriz { display: none; }
  .ponto-escala-semana { display: block; }
  .ponto-admin .ponto-legenda { flex-direction: column; }
}

/* Clínica, pet, banho e relacionamento (W2a2, leva 6b): o /hoje agrupa as pendências por tipo, a barra das situações do indicador e o progresso das seções da ficha */

.hoje-grupo + .hoje-grupo {
  margin-top: var(--esp-3);
}

.hoje-grupo__titulo {
  margin: 0 0 var(--esp-2);
  color: var(--tinta-2);
  font-weight: 600;
}

.ficha-sec-prog {
  display: block;
  width: 100%;
  height: var(--esp-2);
  margin-top: var(--esp-1);
  accent-color: var(--marca);
}

.fa4-ass-estado {
  color: var(--tinta);
  font-weight: 600;
}

/* RH, gestão (W4a, leva 6b): o espelho de ponto no celular rola, com a borda marcada (181 e 190) */

@media (max-width: 640px) {
  body.espelho .tabela-rolagem {
    overflow-x: auto;
    box-shadow: inset -12px 0 10px -10px var(--linha-media);
  }
  body.espelho .tabela-rolagem table {
    min-width: 40rem;
  }
}

/* Workflow, bancada, quadro e filas (onda 6b, WF). Só as classes do domínio; as cores vêm dos tokens. */

/* O editor de workflow: o cabeçalho ocupa as duas colunas, e Validar e Salvar andam juntos. */
.editor > .ed-topo{grid-column:1 / -1}
.ed-barra{display:flex;flex-wrap:wrap;gap:var(--esp-2);align-items:center}

/* No celular, Validar e Salvar ficam fixos no rodapé da tela. */
@media (max-width:720px){
  .ed-barra{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:var(--esp-3) var(--esp-4);background:var(--superficie);border-top:1px solid var(--linha);justify-content:stretch}
  .ed-barra .ui-botao{flex:1 1 0}
  .editor{padding-bottom:5rem}
}

/* /quadro: "Minhas · Da equipe" e o "Ver mais" de cada raia. */
.quadro-visao{margin:0 0 var(--esp-3)}
.raia-mais{display:flex;margin-top:var(--esp-2);justify-content:center}
.quadro-pessoas{margin:0 0 var(--esp-3)}

/* /bancada: títulos e datas inteiros no celular, sem quebrar no meio de um número. */
@media (max-width:720px){
  .pc--linha .ui-tarefa__cliente{white-space:normal;overflow:visible;text-overflow:clip}
  .pc .ui-tarefa__motivo,.pc .ui-tarefa__meta{overflow-wrap:normal;word-break:normal}
  .pc .ui-tarefa__espera{white-space:nowrap}
}

/* RH, Meu RH (DF7-b, leva 6c-1): a convenção com os temas em abas acima da lista de cláusulas (112) */

.rh-clausulas-lista {
  display: grid;
  gap: var(--esp-2);
  margin-top: var(--esp-3);
}
.rh-clausulas-lista > details {
  margin: 0;
}

/* Onda 6c, pacote UI7: as peças da ação principal e o termo em linha. Só aditivo; só tokens (var(--…)). */

/* termo (E27) · <span class="ui-termo"><button class="ui-termo__palavra" popovertarget="termo-N">MRR</button><span class="ui-termo__texto" id="termo-N" popover>…</span></span>
   Em linha, sem details: a frase não quebra. A explicação abre ao toque, como um balão. */
.ui-termo { display: inline; }
.ui-termo > .ui-termo__palavra {
  display: inline; margin: 0; padding: 0; min-height: 0; border: 0; border-radius: 0; background: none;
  font: inherit; color: inherit; text-align: inherit; cursor: help;
  border-bottom: 1px dotted var(--tinta-2);
}
.ui-termo > .ui-termo__palavra:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.ui-termo > .ui-termo__texto[popover] {
  max-width: min(42ch, calc(100vw - var(--esp-6)));
  margin: auto; padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie-suave);
  color: var(--tinta-2); font-size: 14px; line-height: 1.45; font-weight: 400; text-align: left;
}

/* proximo_passo · section.ui-proximo-passo: uma frase e o botão, logo depois do cabeçalho. */
.ui-proximo-passo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-4);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--marca); border-radius: var(--raio-m); background: var(--superficie-suave);
}
.ui-proximo-passo__texto { margin: 0; flex: 1 1 16rem; min-width: 0; color: var(--tinta); font-weight: 700; line-height: 1.4; }
.ui-proximo-passo__acao { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
@media (max-width: 720px) {
  .ui-proximo-passo__acao, .ui-proximo-passo__acao > .ui-botao { width: 100%; }
}

/* barra_acao · a variante celular da .ui-barra-fixa (sticky no pé); estática a partir de 900 px (ds.css). */
.ui-barra-fixa--celular { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.ui-barra-fixa--celular > .ui-botao--primario { flex: 1 1 auto; min-width: 0; }

/* barra_impressao · o "Imprimir / salvar PDF" do documento de papel; some na impressão. */
.ui-barra-impressao {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4); margin-bottom: var(--esp-4);
  border-bottom: 1px solid var(--linha); background: var(--superficie-suave);
}
@media print {
  .ui-barra-impressao { display: none; }
}

/* cabecalho_leitura · a tela só de leitura: sem primário, o motivo fica no atributo. */
.ui-cabecalho[data-leitura] .ui-acoes--cabecalho { justify-content: flex-start; }

/* Clínica, agenda e atendimento (leva 6c-2, W1a): o texto da ficha de uma versão antiga usa a fonte de corpo (A07) */

.cs .cs-versao-texto {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
}

/* 6c-2, W3a (dinheiro). Só tokens. */

/* 72 · O total do dia, maior que os cartões das formas. */
.caixa-planilha .cp-total { margin: 8px 0 4px; font-size: 1.25rem; color: var(--b-ink2); }
.caixa-planilha .cp-total b { margin-left: 6px; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--b-ink); }

/* 72 · O rótulo do seletor de dia fica ao lado do campo. */
.caixa-planilha .cp-dia .ui-campo__rotulo { margin: 0; font-size: 13px; color: var(--b-ink2); }

/* 150 · Fornecedor longo vira reticências, com o nome inteiro no title. */
.fin-fornecedor { max-width: 24rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .fin-fornecedor { max-width: none; white-space: normal; }
}

/* Leva 6c-2, W3b1 (fiscal, cobrança e contabilidade). Só tokens; sem cor literal. */

/* 147: os dois cartões do topo da contabilidade alinham pelo topo, sem área vazia embaixo. */
.ct-topo{align-items:start}

/* 212 e 213: o formulário de emissão cabe na largura do celular; o select corta, o rótulo não quebra. */
.ft-emitir select{width:100%;min-width:0}
.ft-emitir .ui-campo__rotulo{white-space:nowrap}

/* 6c-2 · W4a (RH, gestão): a grade larga da proposta de escala fixa o nome da pessoa ao rolar para o lado. Só tokens. */
.rh-escala-matriz th[scope="row"] { position: sticky; left: 0; background: var(--superficie); }

/* Onda 6c, pacote W4b1 (Meu RH): o comprovante centralizado e os dados técnicos em letra menor. Só tokens (var(--…)). */

/* comprovante (ESP3) · o .rh-recibo do ds.css limita a 760 px; aqui ele fica no meio da folha. */
body.rh-recibo { margin: var(--esp-6) auto; }
@media print { body.rh-recibo { margin: 12mm auto 0; } }

/* detalhes técnicos (LEI 3) · a segunda tabela do comprovante, em letra menor; não é details (imprime completa). */
body.rh-recibo .rh-rec-tecnico { font-size: 12px; }

/* Rotinas e ponto (leva 6c-2, W4b2): medida de leitura do termo, linhas da tabela de marcações e contraste do
   quiosque. Só tokens, nenhuma cor escrita à mão. */

/* 221 e 222: o termo de consentimento lê-se melhor com a linha limitada a 70 caracteres. */
.ponto-rosto .ui-leitura { max-width: 70ch; }

/* 126: a tabela de marcações fica mais compacta na vertical. */
.ponto-admin .ponto-tabela td { padding-block: var(--esp-1); }

/* 191: o texto de apoio do quiosque tem o contraste da tinta, não o do apoio. */
.quiosque-apoio { color: var(--tinta); }

/* Onda 6c-2, W6a (administração): só aditivo; só tokens (var(--…)).
   Metas da semana: os gráficos pequenos no fim da página ficam mais altos. */

.metas-semana > * {
  min-height: 16rem;
  padding-block: var(--esp-2);
  border-bottom: 1px solid var(--linha);
}

/* 6c-2 · W6b1: bancada, quadro, filas, workflows, login e comprovante. Só tokens. */

/* Login: o formulário é o cartão, agora dentro de um main. */
body.login > main { width: min(26rem, 100%); }
body.login > main > form.ui-cartao { display: flex; flex-direction: column; gap: var(--esp-4); }

/* Cartão da tarefa: o nome do workflow no lugar do código. */
.ui-tarefa__tipo { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bancada: oferta com o botão de começar ao lado do cartão. */
.oferta-linha { display: flex; gap: var(--esp-2); align-items: center; }
.oferta-linha > .pc { flex: 1; min-width: 0; }

/* Workflows: resumo legível e grade que usa a largura. */
.wf-resumo__linhas { font-size: 0.875rem; }
.wf-area .grade { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.wf-area > summary { display: flex; align-items: center; gap: var(--esp-2); }
.wf-area > summary svg { margin-left: auto; }

/* Ficha do cliente do provedor (19/10): no notebook cada contrato ocupa a largura toda, um embaixo do outro;
   as OS em aberto viram uma faixa compacta abaixo deles. No celular nada muda. */
.ficha-contratos { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.ficha-contrato { min-width: 0; margin: 0; }
.ficha-contrato__os { display: none; margin: var(--esp-3) 0 0; }
.ficha-os { min-width: 0; }
.ficha-os .casa-os-vazio { margin: 0; }

@media (min-width: 900px) {
  .ficha-contrato__os { display: block; }
  .ficha-contrato .casa-wrap { overflow-x: auto; max-width: 100%; }
  .ficha-contrato .casa-svg { min-width: 760px; }
  /* Sem OS: uma linha discreta, sem o cartão. Com OS: uma faixa, sem a altura de uma coluna. */
  .ficha-os .ui-cartao { padding: var(--esp-3) var(--esp-4); }
  .ficha-os .ui-cartao__topo { margin-bottom: var(--esp-2); }
  .ficha-os .ui-cartao__titulo { font-size: 16px; }
  .ficha-os .ui-cartao:has(.casa-os-vazio) { background: transparent; box-shadow: none; border: 0; padding: 0; display: flex; align-items: baseline; gap: var(--esp-3); }
  .ficha-os .ui-cartao:has(.casa-os-vazio) .ui-cartao__topo { margin: 0; }
  .ficha-os .ui-cartao:has(.casa-os-vazio) .ui-cartao__titulo { font-size: 14px; font-weight: 600; color: var(--tinta-2); }
}

/* Bancada e fluxos */

/* ══ BANCADA ══════════════════════════════════════════════════════════════ */

/* BancadaPalco: a tarefa em foco. <section class="ui-cartao ui-bancada-palco"><div class="ui-bancada-palco__cabeca"><div><h2 class="ui-cartao__titulo">…</h2><p class="ui-apoio">…</p></div><span class="ui-bancada-palco__espera">…</span></div><div class="ui-bancada-palco__passo">…</div><div class="ui-bancada-palco__acoes">…</div></section> */
.ui-bancada-palco { gap: var(--esp-4); }
.ui-bancada-palco__cabeca { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--esp-2) var(--esp-3); }
.ui-bancada-palco__cabeca > div { display: flex; flex-direction: column; gap: var(--esp-1); min-width: 0; }
.ui-bancada-palco__espera { display: inline-flex; align-items: center; gap: var(--esp-2); font-size: 14px; color: var(--tinta-2); white-space: nowrap; }
.ui-bancada-palco__passo { display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie-suave); min-width: 0; }
.ui-bancada-palco__passo-titulo { margin: 0; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.ui-bancada-palco__acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--esp-2); }
.ui-bancada-palco__acoes > .ui-desligado { align-items: flex-end; }
.ui-bancada-palco .ui-vazio { padding: var(--esp-6) 0; }

/* BancadaInicios: botões que começam um fluxo. <div class="ui-bancada-inicios"><div class="ui-bancada-inicios__lista"><button class="ui-botao ui-botao--secundario ui-bancada-inicio"><span class="ui-bancada-inicio__nome"><svg class="ui-icone" data-icone="phone"></svg> Segunda via</span></button></div></div> */
.ui-bancada-inicios { container-type: inline-size; min-width: 0; }
.ui-bancada-inicios__lista { display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-bancada-inicios__lista > .ui-desligado { width: 100%; }
.ui-bancada-inicio { width: 100%; min-height: 56px; justify-content: space-between; font-size: 16px; text-align: left; white-space: normal; }
.ui-bancada-inicio__nome { display: inline-flex; align-items: center; gap: var(--esp-2); flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
@container (max-width: 480px) {
  .ui-bancada-inicios__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); }
  .ui-bancada-inicio { min-height: 64px; }
}

/* BancadaFila: a fila de quem espera. <section class="ui-cartao ui-bancada-fila"><div class="ui-cartao__topo"><h2 class="ui-cartao__titulo">Fila</h2><span class="ui-etiqueta ui-etiqueta--neutra">5 esperando</span></div><div class="ui-segmentos">…</div><ul class="ui-bancada-fila__lista" role="listbox">…</ul></section> */
.ui-bancada-fila__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-bancada-fila__aviso { display: flex; align-items: center; gap: var(--esp-2); margin: 0; }

/* CartaoTarefa: uma tarefa numa lista. <li class="ui-tarefa ui-tarefa--atencao" role="option" aria-selected="false"><div class="ui-tarefa__linha1"><span class="ui-tarefa__cliente">…</span><kbd class="ui-tecla">1</kbd></div><p class="ui-tarefa__motivo">…</p><div class="ui-tarefa__meta">…</div><div class="ui-tarefa__regua"><span class="ui-tarefa__regua-trilho"><span class="ui-tarefa__regua-valor" style="--valor:40%"></span></span><span class="ui-tarefa__espera">parado há 12 min</span></div></li> */
.ui-tarefa { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); list-style: none; min-width: 0; }
.ui-tarefa[aria-selected="true"] { border-color: var(--marca); background: var(--marca-suave); }
.ui-tarefa.esta-arrastando { box-shadow: var(--sombra-ativa); }
.ui-tarefa__linha1 { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--esp-2); min-width: 0; }
.ui-tarefa__cliente { display: inline-flex; align-items: center; gap: var(--esp-2); min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.ui-tarefa__motivo { margin: 0; font-size: 14px; color: var(--tinta-2); overflow-wrap: anywhere; }
.ui-tarefa__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); font-size: 13px; color: var(--tinta-2); }
.ui-tarefa__canal { display: inline-flex; align-items: center; gap: var(--esp-1); }
.ui-tarefa__resp { display: inline-flex; align-items: center; gap: var(--esp-2); }
.ui-tarefa__regua { display: flex; flex-direction: column; gap: var(--esp-1); }
.ui-tarefa__regua-trilho { display: block; height: 6px; border-radius: var(--raio-pilula); background: var(--linha-media); overflow: hidden; }
.ui-tarefa__regua-valor { display: block; height: 100%; width: var(--valor); border-radius: var(--raio-pilula); background: var(--ok); }
.ui-tarefa--atencao .ui-tarefa__regua-valor { background: var(--atencao); }
.ui-tarefa--perigo .ui-tarefa__regua-valor { background: var(--perigo); }
.ui-tarefa__espera { font-size: 13px; color: var(--tinta-2); }
.ui-tarefa--perigo .ui-tarefa__espera { color: var(--tinta); font-weight: 700; }
.ui-tarefa__alca { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: -8px 0; border: 0; background: transparent; color: var(--tinta-2); border-radius: var(--raio-m); cursor: grab; }

/* QuadroRaias: quadro por raias. <section class="ui-quadro"><div class="ui-quadro__raias"><section class="ui-quadro__raia"><header class="ui-quadro__raia-topo"><h3 class="ui-quadro__raia-titulo">…</h3><span class="ui-etiqueta ui-etiqueta--neutra">2</span></header><ul class="ui-quadro__cartoes">…li.ui-tarefa…</ul></section></div></section> */
.ui-quadro { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
.ui-quadro__raias { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--esp-3); align-items: start; }
.ui-quadro__raia { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; padding: var(--esp-3); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie-suave); }
.ui-quadro__raia-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); }
.ui-quadro__raia-titulo { margin: 0; font-size: 16px; font-weight: 700; }
.ui-quadro__cartoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-quadro__cartoes .ui-tarefa { padding-left: var(--esp-2); }
.ui-quadro__celular { display: flex; flex-direction: column; gap: var(--esp-3); }
.ui-quadro__celular .ui-quadro__cartoes { margin-top: 0; }

.ui-tarefa-mover__destino { display: flex; flex-direction: column; gap: var(--esp-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.ui-tarefa-mover__destino .ui-escolha { width: 100%; }

/* Disponibilidade: os três estados da pessoa no topo. <div class="ui-segmentos ui-disponibilidade" role="group"><button class="ui-segmentos__item" aria-pressed="true"><span class="ui-disponibilidade__ponto ui-disponibilidade__ponto--ok"></span>Disponível</button>…</div> */
.ui-disponibilidade { flex-wrap: wrap; }
.ui-disponibilidade .ui-segmentos__item { display: inline-flex; align-items: center; gap: var(--esp-2); }
.ui-disponibilidade__ponto { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: var(--raio-pilula); background: var(--tinta-3); }
.ui-disponibilidade__ponto--ok { background: var(--ok); }
.ui-disponibilidade__ponto--atencao { background: var(--atencao); }
.ui-disponibilidade__ponto--ausente { background: var(--tinta-3); }
.ui-disponibilidade__recolhida { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: var(--alvo); padding: 0 var(--esp-4); font-size: 14px; color: var(--tinta-2); }

/* GavetaAvisos: avisos do sistema e das tarefas. <aside class="ui-gaveta ui-gaveta--previa ui-avisos"><header class="ui-gaveta__topo">…</header><div class="ui-gaveta__corpo"><ul class="ui-avisos__lista"><li class="ui-avisos__item esta-nao-lido">…</li></ul></div></aside> */
.ui-avisos { min-width: 0; }
.ui-avisos__filtro { margin-bottom: var(--esp-3); }
.ui-avisos__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--linha); }
.ui-avisos__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--esp-2) var(--esp-3); padding: var(--esp-3) 0; border-bottom: 1px solid var(--linha); }
.ui-avisos__sev { color: var(--tinta-2); align-self: start; margin-top: 2px; }
.ui-avisos__sev--atencao { color: var(--atencao); }
.ui-avisos__sev--perigo { color: var(--perigo); }
.ui-avisos__sev--ok { color: var(--ok); }
.ui-avisos__corpo { display: flex; flex-direction: column; gap: var(--esp-1); min-width: 0; }
.ui-avisos__titulo { font-weight: 400; overflow-wrap: anywhere; }
.ui-avisos__item.esta-nao-lido .ui-avisos__titulo { font-weight: 700; }
.ui-avisos__marca { display: inline-block; width: 8px; height: 8px; border-radius: var(--raio-pilula); background: var(--marca); }
.ui-avisos__marca:empty { display: inline-block; }
.ui-avisos__item:not(.esta-nao-lido) .ui-avisos__marca { background: transparent; }
.ui-avisos__acao { grid-column: 2 / -1; justify-self: start; }
@container (max-width: 480px) {
  .ui-avisos__item { grid-template-columns: auto minmax(0, 1fr); }
  .ui-avisos__item > .ui-botao { grid-column: 2; justify-self: start; }
  .ui-avisos__marca { display: none; }
}

/* StatusAoVivo: indicador da conexão ao vivo. <footer class="ui-aovivo ui-aovivo--ok" role="status"><span class="ui-aovivo__ponto"></span><p class="ui-aovivo__texto">Ao vivo</p><span class="ui-aovivo__contexto">…</span><span class="ui-aovivo__teclas"><kbd class="ui-tecla">/</kbd> ações</span></footer> */
.ui-aovivo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); min-height: var(--alvo); margin: 0; padding: var(--esp-2) var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie-suave); font-size: 14px; color: var(--tinta); }
.ui-aovivo__ponto { flex: none; width: 10px; height: 10px; border-radius: var(--raio-pilula); background: var(--ok); }
.ui-aovivo__texto { margin: 0; font-weight: 700; overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: var(--esp-2); }
.ui-aovivo__contexto { color: var(--tinta-2); margin-left: auto; }
.ui-aovivo__teclas { display: inline-flex; align-items: center; gap: var(--esp-1); color: var(--tinta-2); }
.ui-aovivo--atencao { border-color: var(--atencao-linha); background: var(--atencao-fundo); }
.ui-aovivo--atencao .ui-aovivo__ponto { background: var(--atencao); }
.ui-aovivo--perigo { border-color: var(--perigo-linha); background: var(--perigo-fundo); }
.ui-aovivo--perigo .ui-aovivo__ponto { background: var(--perigo); }
.ui-aovivo__acao { margin-left: auto; }
@media (pointer: coarse) { .ui-aovivo__teclas { display: none; } }

/* ══ NÓS DO FLUXO ═════════════════════════════════════════════════════════ */

/* NoContador (nó Tiles): contador com − número +. O número também soma ao toque (como o tile de hoje).
   Cada botão pode ficar desligado por uma regra, com o motivo escrito embaixo e ligado por aria-describedby.
   <div class="ui-no ui-no-contador" role="group" aria-labelledby="t"><p class="ui-no-contador__titulo" id="t">…</p>
   <div class="ui-no-contador__item [esta-completo|esta-passou]"><div class="ui-no-contador__topo"><p class="ui-no-contador__rotulo" id="r">Volumes</p><span class="ui-no-contador__meta">de 12</span></div>
   <div class="ui-no-contador__controle"><button class="ui-botao ui-botao--secundario ui-botao--icone ui-no-contador__botao" aria-label="Diminuir Volumes">…minus…</button>
   <button class="ui-no-contador__tile" aria-label="Somar Volumes"><output class="ui-no-contador__numero" aria-labelledby="r">3</output></button>
   <button class="ui-botao ui-botao--secundario ui-botao--icone ui-no-contador__botao" aria-label="Aumentar Volumes">…plus…</button></div>
   <p class="ui-desligado__motivo" id="m">…</p></div>
   <div class="ui-no-contador__total"><span>Total</span><strong>…</strong></div></div> */
.ui-no-contador { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
.ui-no-contador__titulo { margin: 0; font-size: 16px; font-weight: 700; }
.ui-no-contador__item { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); }
.ui-no-contador__item.esta-completo { border-color: var(--ok-linha); }
.ui-no-contador__item.esta-passou { border-color: var(--atencao-linha); }
.ui-no-contador__topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--esp-1) var(--esp-3); }
.ui-no-contador__rotulo { margin: 0; font-size: 14px; color: var(--tinta-2); }
.ui-no-contador__meta { display: inline-flex; align-items: center; gap: var(--esp-1); font-size: 14px; color: var(--tinta-2); }
.ui-no-contador__item.esta-completo .ui-no-contador__meta { color: var(--ok); font-weight: 700; }
.ui-no-contador__item.esta-passou .ui-no-contador__meta { color: var(--atencao); font-weight: 700; }
.ui-no-contador__controle { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: var(--esp-3); }
.ui-no-contador .ui-no-contador__botao { width: 48px; height: 48px; min-width: 48px; min-height: 48px; }
.ui-no-contador__numero { font-size: 32px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; text-align: center; min-width: 3ch; }
.ui-no-contador__numero.esta-zero { color: var(--tinta-3); }
.ui-no-contador__tile { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 56px; padding: 0 var(--esp-3); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie-suave); color: var(--tinta); cursor: pointer; }
.ui-no-contador__tile:disabled { cursor: not-allowed; }
.ui-no-contador__tile:disabled .ui-no-contador__numero:not(.esta-zero) { color: var(--tinta); }
.ui-no-contador__item > .ui-desligado__motivo { margin: 0; }
.ui-no-contador__desfazer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); font-size: 14px; color: var(--tinta-2); }
.ui-no-contador__desfazer > .ui-botao { min-height: 48px; }
.ui-no-contador__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-2) var(--esp-4); font-size: 14px; color: var(--tinta-2); }
.ui-no-contador__total > strong { font-size: 18px; color: var(--tinta); font-variant-numeric: tabular-nums; }

/* NoIntencao (nó Intent): o que o cliente quer, lido do texto. <section class="ui-no ui-no-intencao ui-no-intencao--ia"><div class="ui-no-intencao__campo"><label class="ui-campo__rotulo" for="…">…</label><input class="ui-entrada" id="…" value="…"></div><div class="ui-no-intencao__topo"><p class="ui-no-intencao__titulo">…</p><span class="ui-etiqueta ui-etiqueta--ia">…</span></div><div class="ui-escolhas">…</div></section> */
.ui-no-intencao { display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); min-width: 0; }
.ui-no-intencao--ia { border-color: var(--ia-linha); background: var(--ia-fundo); }
.ui-no-intencao__campo { display: flex; flex-direction: column; gap: var(--esp-1); }
.ui-no-intencao__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); }
.ui-no-intencao__titulo { margin: 0; font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.ui-no-intencao .ui-escolha { flex: 1 1 14rem; }

/* NoConfirmar (nó Confirm): o que vai acontecer antes de executar. <section class="ui-cartao ui-no-confirmar"><div class="ui-cartao__topo"><h2 class="ui-cartao__titulo">…</h2></div><dl class="ui-pares">…</dl><p class="ui-no-confirmar__efeito"><svg class="ui-icone" data-icone="info"></svg> Abre um protocolo no SGP.</p><footer class="ui-cartao__rodape"><div class="ui-acoes">…</div></footer></section> */
.ui-no-confirmar__efeito { display: flex; align-items: flex-start; gap: var(--esp-2); margin: 0; padding: var(--esp-3); border-radius: var(--raio-m); background: var(--superficie-suave); color: var(--tinta-2); font-size: 14px; }
.ui-no-confirmar__efeito > .ui-icone { flex: none; margin-top: 2px; }
.ui-no-confirmar__efeito--risco { background: var(--perigo-fundo); color: var(--tinta); }
.ui-no-confirmar__efeito--risco > .ui-icone { color: var(--perigo); }

/* NoRecibo (nó Receipt): o que foi feito, com protocolo copiável. <section class="ui-cartao ui-no-recibo"><div class="ui-cartao__topo"><div class="ui-no-recibo__quem"><span class="ui-redondo ui-redondo--ok">…</span><h2 class="ui-cartao__titulo">…</h2></div><span class="ui-apoio">09:42 · Renata</span></div><div class="ui-codigo">…</div><dl class="ui-pares">…</dl></section> */
.ui-no-recibo__quem { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; }
.ui-no-recibo__quem .ui-cartao__titulo { min-width: 0; overflow-wrap: anywhere; }
.ui-no-recibo__aviso { margin: 0; }

/* NosDoFluxo: mapa dos nós. Sem CSS próprio: usa tabela, cartão e pares base. */

/* EditorWorkflow: lista de fluxos e editor. <section class="ui-cartao ui-workflow"><div class="ui-cartao__topo">…</div><div class="ui-workflow__corpo"><ol class="ui-workflow__linhas">…<li class="esta-erro"><code>…</code></li></ol><aside class="ui-workflow__lado">…</aside></div></section> */
.ui-workflow { container-type: inline-size; min-width: 0; }
.ui-workflow__corpo { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.ui-workflow__yaml { min-width: 0; overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie-suave); }
.ui-workflow__linhas { margin: 0; padding: var(--esp-3) var(--esp-4) var(--esp-3) var(--esp-6); font-family: var(--font-mono); font-size: 13px; line-height: 1.6; color: var(--tinta); }
.ui-workflow__linhas li { white-space: pre; }
.ui-workflow__linhas li.esta-erro { background: var(--perigo-fundo); color: var(--tinta); font-weight: 700; margin-left: calc(var(--esp-4) * -1); padding-left: var(--esp-4); }
.ui-workflow__lado { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
.ui-workflow__previa { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-3); border-radius: var(--raio-m); background: var(--superficie); border: 1px solid var(--linha); }
.ui-workflow__previa-titulo { margin: 0; font-size: 14px; font-weight: 700; }
.ui-workflow__lista-nome { font-weight: 700; overflow-wrap: anywhere; }
@container (min-width: 520px) {
  .ui-workflow__corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); align-items: start; }
}

/* Comprovante: o cupom de 80 mm é ui-cupom (base). Aqui só o que é da Bancada: o aovivo não vai para o papel.
   <div class="ui-acoes ui-so-tela"><button class="ui-botao ui-botao--secundario">Imprimir</button></div> */
@media print {
  .ui-aovivo { display: none; }
}

/* ══ AJUSTES DE BASE DO LOTE (classes de bloco e de estado) ═══════════════ */
.ui-bancada-fila { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
.ui-tarefa--ok { border-color: var(--ok-linha); }
.ui-aovivo--ok { border-color: var(--ok-linha); }
.ui-no { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
.ui-no-confirmar { gap: var(--esp-3); }
.ui-no-recibo { gap: var(--esp-3); }

/* Vendas, agenda, estoque e coleta */

/* ── Comanda · <section class="ui-cartao ui-comanda"><div class="ui-cartao__topo"><h2 class="ui-cartao__titulo">Comanda 412</h2></div><ol class="ui-comanda__itens"><li class="ui-comanda__item"><span class="ui-comanda__nome">…</span><span class="ui-comanda__valor">R$ 45,00</span></li></ol><div class="ui-comanda__total"><span>Total</span><strong class="ui-comanda__total-valor">R$ 184,00</strong></div><footer class="ui-cartao__rodape"><div class="ui-acoes">…</div></footer></section> ── */
.ui-comanda { gap: var(--esp-3); }
.ui-comanda__itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ui-comanda__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--esp-1) var(--esp-3); padding: var(--esp-3) 0; border-bottom: 1px solid var(--linha); }
.ui-comanda__item:last-child { border-bottom: 0; }
.ui-comanda__nome { font-size: 16px; font-weight: 700; line-height: 1.3; }
.ui-comanda__quem { grid-column: 1; font-size: 14px; color: var(--tinta-2); }
.ui-comanda__valor { grid-column: 2; grid-row: 1; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ui-comanda__pacote { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.ui-comanda__desconto { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--linha-media); border-radius: var(--raio-m); background: var(--superficie-suave); }
.ui-comanda__desconto--acima { background: var(--atencao-fundo); border-color: var(--atencao-linha); }
.ui-comanda__apoio { font-size: 14px; color: var(--tinta-2); }
.ui-comanda__total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--esp-2) var(--esp-4); padding-top: var(--esp-3); border-top: 2px solid var(--linha-forte); }
.ui-comanda__total > span { font-size: 16px; font-weight: 700; color: var(--tinta-2); }
.ui-comanda__total-valor { font-size: 28px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ui-comanda--paga .ui-comanda__total-valor { color: var(--ok); }

/* ── Balcão rápido · <div class="ui-balcao"><div class="ui-balcao__chips" role="group" aria-label="Mais vendidos"><button class="ui-balcao__chip" type="button"><span class="ui-balcao__nome">Ração Golden 15 kg</span><span class="ui-balcao__preco">R$ 189,90</span></button></div></div> ── */
.ui-balcao { display: flex; flex-direction: column; gap: var(--esp-4); }
.ui-balcao__chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--esp-3); }
.ui-balcao__chip { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--esp-2); min-height: 6rem; padding: var(--esp-3) var(--esp-4); border: 1px solid var(--linha-media); border-radius: var(--raio-m); background: var(--superficie); color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
.ui-balcao__chip:hover { background: var(--superficie-suave-forte); }
.ui-balcao__chip[aria-pressed="true"] { border-width: 2px; border-color: var(--marca); background: var(--marca-suave); }
.ui-balcao__nome { font-size: 16px; font-weight: 700; line-height: 1.3; }
.ui-balcao__preco { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-balcao__porte { display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-balcao__porte-apoio { font-size: 14px; color: var(--tinta-2); }
.ui-balcao__carrinho { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-m); background: var(--superficie-suave); }
.ui-balcao__linha { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-3); font-size: 14px; }
.ui-balcao__linha strong { font-variant-numeric: tabular-nums; }
.ui-balcao__total { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Estado da agenda (7 tons, sempre com o nome) · <span class="ui-estado-agenda__pilula ui-estado-agenda--confirmado">Confirmado</span> ── */
.ui-estado-agenda__pilula { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 12px; border: 1px solid transparent; border-radius: var(--raio-pilula); font-size: 14px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.ui-estado-agenda--agendado { background: var(--superficie-suave); color: var(--tinta-2); border-color: var(--linha-media); }
.ui-estado-agenda--confirmado { background: var(--marca-suave); color: var(--marca); border-color: var(--marca-linha); }
.ui-estado-agenda--chegou { background: var(--atencao-fundo); color: var(--atencao); border-color: var(--atencao-linha); }
.ui-estado-agenda--atendimento { background: var(--info-fundo); color: var(--info); border-color: var(--info-linha); }
.ui-estado-agenda--concluido { background: var(--ok-fundo); color: var(--ok); border-color: var(--ok-linha); }
.ui-estado-agenda--faltou { background: var(--perigo-fundo); color: var(--perigo); border-color: var(--perigo-linha); }
.ui-estado-agenda--cancelado { background: var(--superficie-suave); color: var(--tinta-3); border-color: var(--linha); text-decoration: line-through; }
.ui-estado-agenda { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.ui-estado-agenda__contagem { font-size: 14px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }

/* ── Cartão de atendimento · <article class="ui-agendamento"><span class="ui-agendamento__hora">09:00</span><div class="ui-agendamento__corpo"><p class="ui-agendamento__titulo">Thor · Ana Souza</p><p class="ui-agendamento__linha">Banho e tosa · Lara Ramos</p></div><div class="ui-agendamento__acao"><span class="ui-estado-agenda__pilula ui-estado-agenda--confirmado">Confirmado</span><button class="ui-botao ui-botao--primario" type="button">Chegou</button></div></article> ── */
.ui-agendamento { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--esp-2) var(--esp-4); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); color: var(--tinta); }
.ui-agendamento__hora { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-agendamento__corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-agendamento__titulo { font-size: 16px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.ui-agendamento__linha { font-size: 14px; color: var(--tinta-2); overflow-wrap: anywhere; }
.ui-agendamento__acao { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-3); }
.ui-agendamento--cancelado .ui-agendamento__titulo,
.ui-agendamento--cancelado .ui-agendamento__linha { text-decoration: line-through; color: var(--tinta-3); }

/* ── Confirmação por WhatsApp · <section class="ui-cartao ui-confirmar-wa"><p class="ui-confirmar-wa__texto">Olá, Ana! …</p><div class="ui-acoes"><button class="ui-botao ui-botao--primario">Enviar no WhatsApp</button></div><ol class="ui-trilha-curta"><li class="esta-feito">Enviada</li><li class="esta-atual" aria-current="step">Lida</li><li>Respondeu</li></ol></section> ── */
.ui-confirmar-wa { gap: var(--esp-3); }
.ui-confirmar-wa__texto { margin: 0; padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-m); background: var(--superficie-suave); font-size: 16px; line-height: 1.45; }
.ui-confirmar-wa__situacao { display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-confirmar-wa__nota { font-size: 14px; color: var(--tinta-2); }

/* ── Grade de horas por recurso · <div class="ui-grade-horas" role="region" aria-label="Agenda de hoje" tabindex="0"><table><thead><tr><th scope="col">Hora</th><th scope="col">Dra. Helena</th></tr></thead><tbody><tr><th scope="row" class="ui-grade-horas__hora">09:00</th><td rowspan="2" class="ui-grade-horas__bloco ui-estado-agenda--confirmado">Thor</td></tr></tbody></table></div> ── */
.ui-grade-horas { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); }
.ui-grade-horas table { width: 100%; min-width: 22rem; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.ui-grade-horas th, .ui-grade-horas td { padding: 0 var(--esp-1); border-top: 1px solid var(--linha); text-align: left; vertical-align: top; }
.ui-grade-horas thead th { padding: var(--esp-2) var(--esp-2); background: var(--superficie-suave); border-top: 0; font-weight: 700; color: var(--tinta); }
.ui-grade-horas__hora { width: 3.5rem; padding: 2px var(--esp-2) 0 var(--esp-2); font-weight: 400; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.ui-grade-horas__meia { border-top-style: dotted; }
.ui-grade-horas__bloco { padding: var(--esp-1) var(--esp-2); border: 1px solid var(--linha-media); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.ui-grade-horas__bloco strong { display: block; font-size: 14px; }
.ui-grade-horas__livre { width: 100%; min-height: var(--alvo-toque); padding: 0 var(--esp-2); border: 1px dashed var(--linha-forte); border-radius: var(--raio-p); background: transparent; color: var(--tinta-2); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.ui-grade-horas__livre:hover { background: var(--superficie-suave); color: var(--marca); }
.ui-grade-horas__agora th, .ui-grade-horas__agora td { border-top: 2px solid var(--marca); }
.ui-grade-horas__agora-rotulo { display: block; font-size: 13px; font-weight: 700; color: var(--marca); white-space: nowrap; }
.ui-grade-horas__cabeca { font-size: 14px; }
.ui-grade-horas__cabeca small { display: block; font-weight: 400; color: var(--tinta-2); }

/* ── Ponto de pedido · <section class="ui-cartao ui-reposicao"><div class="ui-reposicao__topo"><p class="ui-reposicao__item">Ração Golden 15 kg</p><span class="ui-etiqueta ui-etiqueta--atencao">No ponto de pedido</span></div><div class="ui-reposicao__faixa" role="img" aria-label="Estoque 20 de mínimo 12, ponto 20, máximo 60"><span class="ui-reposicao__zona ui-reposicao__zona--abaixo"></span><span class="ui-reposicao__zona ui-reposicao__zona--ponto"></span><span class="ui-reposicao__zona ui-reposicao__zona--ok"></span><span class="ui-reposicao__atual" style="--valor:33%"><span class="ui-reposicao__atual-rotulo">Estoque 20</span></span></div><dl class="ui-pares">…</dl></section> ── */
.ui-reposicao { display: flex; flex-direction: column; gap: var(--esp-4); }
.ui-reposicao__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-3); }
.ui-reposicao__item { margin: 0; font-size: 16px; font-weight: 700; }
.ui-reposicao__faixa { position: relative; margin: var(--esp-8) 0 var(--esp-2); }
.ui-reposicao__trilho { display: flex; height: 28px; border-radius: var(--raio-pilula); overflow: hidden; }
.ui-reposicao__zona { display: block; height: 100%; border: 1px solid transparent; }
.ui-reposicao__zona--abaixo { flex: 20 1 0; background: var(--perigo-fundo); border-color: var(--perigo-linha); }
.ui-reposicao__zona--ponto { flex: 13 1 0; background: var(--atencao-fundo); border-color: var(--atencao-linha); }
.ui-reposicao__zona--ok { flex: 67 1 0; background: var(--ok-fundo); border-color: var(--ok-linha); }
.ui-reposicao__atual { position: absolute; top: -6px; bottom: -6px; left: var(--valor, 0%); width: 0; border-left: 3px solid var(--tinta); }
.ui-reposicao__atual-rotulo { position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); padding: 0 var(--esp-1); background: var(--tinta); color: var(--superficie); font-size: 13px; font-weight: 700; white-space: nowrap; border-radius: var(--raio-p); }
.ui-reposicao__acao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.ui-reposicao__previsao { font-size: 14px; color: var(--tinta-2); }

/* ── Grupo de compra · <section class="ui-cartao ui-grupo-compra"><div class="ui-grupo-compra__topo"><h2 class="ui-cartao__titulo">Pet Sul Atacado</h2><span class="ui-apoio">Estimado R$ 1.284,90</span></div><div class="ui-tabela"><table>…</table></div><footer class="ui-cartao__rodape"><div class="ui-acoes"><button class="ui-botao ui-botao--primario">Gerar pedido de compra</button></div></footer></section> ── */
.ui-grupo-compra { gap: var(--esp-3); }
.ui-grupo-compra__topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--esp-1) var(--esp-3); }
.ui-grupo-compra__contato { font-size: 14px; color: var(--tinta-2); }
.ui-grupo-compra__sem-preco { color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.ui-grupo-compra__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-3); padding-top: var(--esp-2); border-top: 2px solid var(--linha-forte); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-grupo-compra__total > span { font-size: 16px; font-weight: 700; }
.ui-grupo-compra__ultimo { display: flex; flex-direction: column; gap: 2px; }
.ui-grupo-compra__ultimo small { font-size: 13px; color: var(--tinta-2); }

/* ── Cotação de preços · <div class="ui-tabela ui-tabela--cartoes" role="region" aria-label="Cotação" tabindex="0"><table><thead><tr><th scope="col">Item</th><th scope="col" class="ui-num">Pet Sul</th></tr></thead><tbody><tr><th scope="row">Ração Golden 15 kg</th><td class="ui-num ui-cotacao__menor" data-rotulo="Pet Sul">R$ 178,00 <span class="ui-etiqueta ui-etiqueta--ok">menor</span></td></tr></tbody></table></div> ── */
.ui-cotacao { display: flex; flex-direction: column; gap: var(--esp-4); }
.ui-cotacao__menor { background: var(--ok-fundo); color: var(--ok); font-weight: 700; }
.ui-cotacao__menor .ui-etiqueta { margin-left: var(--esp-1); }
.ui-cotacao__semresposta { font-weight: 700; color: var(--atencao); }
.ui-cotacao__convites { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-cotacao__convite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-3); padding: var(--esp-2) 0; border-bottom: 1px solid var(--linha); }
.ui-cotacao__convite:last-child { border-bottom: 0; }
.ui-cotacao__fornecedor { font-size: 16px; font-weight: 700; }

/* ── Cofre bancário (selado) · <section class="ui-cartao ui-cofre-banco"><div class="ui-cofre-banco__dado"><span class="ui-cofre-banco__rotulo">Conta</span><span class="ui-cofre-banco__mascara">••••••-5</span></div><p class="ui-cofre-banco__selo"><span class="ui-etiqueta ui-etiqueta--marca">Selado por Joana em 02/10</span></p></section> ── */
.ui-cofre-banco { gap: var(--esp-3); }
.ui-cofre-banco__dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--esp-3) var(--esp-6); }
.ui-cofre-banco__dado { display: flex; flex-direction: column; gap: 2px; }
.ui-cofre-banco__rotulo { font-size: 14px; color: var(--tinta-2); }
.ui-cofre-banco__mascara { font-family: var(--font-mono); font-size: 16px; font-weight: 700; letter-spacing: 0.02em; }
.ui-cofre-banco__selo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); margin: 0; }
.ui-cofre-banco__pedido { display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-cofre-banco__auditoria { font-size: 14px; color: var(--tinta-2); }

/* ── Lote e validade · <section class="ui-cartao ui-lote-validade"><div class="ui-lote-validade__lotes"><article class="ui-lote-validade__lote"><p class="ui-lote-validade__numero">Lote L2291</p><p class="ui-lote-validade__validade">vence 05/11/2026</p><p class="ui-lote-validade__saldo">12 UN</p></article></div></section> ── */
.ui-lote-validade { gap: var(--esp-4); }
.ui-lote-validade__lotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--esp-3); }
.ui-lote-validade__lote { display: flex; flex-direction: column; gap: var(--esp-1); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--linha-media); border-radius: var(--raio-m); background: var(--superficie); }
.ui-lote-validade__lote--atencao { background: var(--atencao-fundo); border-color: var(--atencao-linha); }
.ui-lote-validade__lote--vencido { background: var(--perigo-fundo); border-color: var(--perigo-linha); }
.ui-lote-validade__numero { margin: 0; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-lote-validade__validade { margin: 0; font-size: 14px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.ui-lote-validade__saldo { margin: 0; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-lote-validade__movimentos { font-variant-numeric: tabular-nums; }
.ui-lote-validade__motivo { display: block; font-size: 13px; color: var(--tinta-2); }

/* ── Inventário · <section class="ui-cartao ui-inventario"><div class="ui-progresso">…</div><div class="ui-tabela"><table>…<input class="ui-entrada ui-inventario__contado" inputmode="numeric" aria-label="Contado: Ração Golden 15 kg"></table></div><footer class="ui-cartao__rodape"><span class="ui-etiqueta ui-etiqueta--info">Enviado para aprovação</span></footer></section> ── */
.ui-inventario { gap: var(--esp-4); }
.ui-inventario__contado { width: 6.5rem; min-height: var(--alvo-toque); text-align: right; font-variant-numeric: tabular-nums; }
.ui-inventario__diferenca { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1) var(--esp-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-inventario__diferenca--atencao { color: var(--atencao); }
.ui-inventario__diferenca--perigo { color: var(--perigo); }
.ui-inventario__diferenca--ok { color: var(--ok); }
.ui-inventario__quem { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--tinta-2); }
.ui-inventario__quem strong { color: var(--tinta); }
.ui-inventario__pendente { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); }

/* ── Coleta (passos com trava) · <ol class="ui-passos ui-passos--vertical"><li class="ui-passos__passo esta-feito"><div class="ui-passos__linha"><span class="ui-passos__bolinha"></span><span class="ui-passos__resumo">Cadastro</span></div></li></ol> ── */
.ui-coleta { gap: var(--esp-4); }
.ui-coleta__conferencias { display: flex; flex-direction: column; gap: var(--esp-2); margin: 0; padding: var(--esp-3) var(--esp-4); border: 1px solid var(--linha-media); border-radius: var(--raio-m); background: var(--superficie-suave); }
.ui-coleta__conferencias > legend { padding: 0 var(--esp-1); font-size: 14px; font-weight: 700; }
.ui-coleta__quem { font-size: 14px; color: var(--tinta-2); }
.ui-coleta__passo-aberto { display: flex; flex-direction: column; gap: var(--esp-3); }
.ui-coleta__tubo { font-size: 14px; color: var(--tinta-2); }

/* ── Orçamento com travas · <div class="ui-orcamento-trava"><div class="ui-aviso ui-aviso--atencao ui-orcamento-trava__item" role="status"><svg class="ui-icone" data-icone="triangle-alert"></svg><div class="ui-aviso__corpo"><p class="ui-aviso__titulo">Ana já tem o orçamento 88 de ontem</p><p>…</p></div><div class="ui-aviso__acoes"><button class="ui-botao ui-botao--secundario">Ver o orçamento 88</button></div></div></div> ── */
.ui-orcamento-trava { display: flex; flex-direction: column; gap: var(--esp-3); }
.ui-orcamento-trava__item { align-items: center; }
.ui-orcamento-trava__item .ui-aviso__corpo { flex: 1 1 14rem; min-width: 0; }
.ui-orcamento-trava__tipo { display: block; font-size: 13px; font-weight: 700; color: var(--tinta-2); }
.ui-orcamento-trava__valor { font-variant-numeric: tabular-nums; font-weight: 700; }
.ui-orcamento-trava__ok { display: flex; align-items: center; gap: var(--esp-2); font-size: 14px; color: var(--ok); font-weight: 700; }
.ui-orcamento-trava__total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--esp-2) var(--esp-4); margin: 0; padding-top: var(--esp-3); border-top: 2px solid var(--linha-forte); }
.ui-orcamento-trava__total strong { font-size: 22px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ui-comanda__barra { display: flex; flex-direction: column; flex: none; }
.ui-comanda__barra > span { font-size: 14px; color: var(--tinta-2); }
.ui-coleta { container-type: inline-size; }
@container (max-width: 30rem) {
  .ui-coleta .ui-passos:not(.ui-passos--vertical) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--esp-4); }
  .ui-coleta .ui-passos:not(.ui-passos--vertical) .ui-passos__passo::before { display: none; }
}
.ui-grade-horas thead th small { display: block; font-size: 13px; font-weight: 400; color: var(--tinta-2); }
.ui-comanda__barra .ui-comanda__total-valor { font-size: 22px; white-space: nowrap; }
.ui-cofre-banco .ui-acoes, .ui-grupo-compra .ui-acoes { flex-wrap: wrap; }
.ui-cofre-banco .ui-botao, .ui-grupo-compra .ui-botao { white-space: normal; max-width: 100%; }

/* Rotinas, administração e agentes */

/* ── RotinaHoje · <ul class="ui-grade ui-rotina-hoje__lista"><li class="ui-rotina-hoje__item"><section class="ui-cartao ui-rotina-hoje">…</section></li></ul> ── */
.ui-rotina-hoje__lista { list-style: none; margin: 0; padding: 0; }
.ui-rotina-hoje__item { min-width: 0; }
.ui-rotina-hoje { gap: var(--esp-3); }
.ui-rotina-hoje__cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); }

/* ── ItemRotina · <section class="ui-cartao ui-rotina-item"><h2 class="ui-rotina-item__texto">…</h2>…</section> ── */
.ui-rotina-item { gap: var(--esp-3); }
.ui-rotina-item__texto { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.25; }
.ui-rotina-item .ui-acoes { flex-direction: column; align-items: stretch; }

/* ── EntregaDinheiro · <section class="ui-cartao ui-entrega-dinheiro"><dl class="ui-pares ui-entrega-dinheiro__partes">…</dl>…</section> ── */
.ui-entrega-dinheiro { gap: var(--esp-3); }
.ui-entrega-dinheiro__partes { margin: 0; }

/* ── EditorRotina · <form class="ui-cartao ui-editor-rotina"> com <ol class="ui-editavel"> e <div class="ui-editor-rotina__link"> ── */
.ui-editor-rotina { gap: var(--esp-4); }
.ui-editor-rotina__link { display: flex; flex-direction: column; gap: var(--esp-2); }

/* ── AbastecimentoVisor · <section class="ui-cartao ui-abastecimento"> e <section class="ui-cartao ui-abastecimento__dia"> ── */
.ui-abastecimento { gap: var(--esp-3); }
.ui-abastecimento__dia { gap: var(--esp-3); }
.ui-abastecimento__tanques { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--esp-3); }

/* ── MatrizPermissoes · <section class="ui-cartao ui-permissoes"> com <form class="ui-permissoes__teste"> ── */
.ui-permissoes { gap: var(--esp-3); }
.ui-permissoes__teste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); align-items: end; gap: var(--esp-3); }
.ui-permissoes__resposta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); margin: 0; }

/* ── CartaoAgente · <section class="ui-cartao ui-agente"> com <div class="ui-agente__cabeca"> e <ul class="ui-agente__ferramentas"> ── */
.ui-agente { gap: var(--esp-3); }
.ui-agente__cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); }
.ui-agente__nome { display: flex; flex-direction: column; gap: var(--esp-1); flex: 1 1 14rem; min-width: 0; }
.ui-agente__nome > .ui-cartao__titulo { margin: 0; }
.ui-agente__ferramentas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-agente__ferramenta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); }
.ui-agente__aviso { margin: 0; }

/* ── EquipePlataforma · <section class="ui-cartao ui-equipe-plat"> com tabela ── */
.ui-equipe-plat { gap: var(--esp-3); }

/* ── AutomacaoCanario · <section class="ui-cartao ui-automacao"> ── */
.ui-automacao { gap: var(--esp-3); }

/* ── RastreioLlm · <section class="ui-cartao ui-rastreio"> com <ul class="ui-rastreio__arvore"> ── */
.ui-rastreio { gap: var(--esp-3); }
.ui-rastreio__arvore { list-style: none; margin: 0; padding: 0 0 0 var(--esp-4); border-left: 1px solid var(--linha-forte); display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-rastreio__passo { min-width: 0; }
.ui-rastreio__tempo { margin-left: auto; font-size: 14px; font-weight: 400; color: var(--tinta-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── PainelAgente · <section class="ui-gaveta ui-gaveta--previa ui-painel-agente"> ── */
.ui-painel-agente { gap: var(--esp-3); }
.ui-painel-agente__corpo { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
.ui-painel-agente__contexto { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.ui-painel-agente__compositor { display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-painel-agente__compositor > .ui-acoes { align-items: flex-end; flex-wrap: nowrap; }
.ui-painel-agente__compositor textarea.ui-entrada { flex: 1 1 auto; min-width: 0; }

/* ── DiferencaConfig · <section class="ui-cartao ui-diferenca-config"> com <del> e <strong> na tabela ── */
.ui-diferenca-config { gap: var(--esp-3); }
.ui-diferenca-config__antes { color: var(--tinta-2); text-decoration: line-through; }
.ui-diferenca-config__depois { font-weight: 700; }

/* ── AuditoriaAgente · <section class="ui-cartao ui-auditoria-agente"> com filtros em ui-chips ── */
.ui-auditoria-agente { gap: var(--esp-3); }
.ui-auditoria-agente__filtros { margin: 0; }

/* ── MarcosProjeto · <section class="ui-cartao ui-marcos"> ── */
.ui-marcos { gap: var(--esp-3); }

/* ── RegistroConsentimento · <section class="ui-cartao ui-consentimento"> ── */
.ui-consentimento { gap: var(--esp-3); }
.ui-consentimento__revogado { margin: 0; }
.ui-marcos { container-type: inline-size; }
@container (max-width: 520px) {
  .ui-marcos .ui-passos:not(.ui-passos--vertical) { flex-direction: column; align-items: stretch; }
  .ui-marcos .ui-passos:not(.ui-passos--vertical) .ui-passos__passo { flex: none; flex-direction: row; align-items: center; gap: var(--esp-3); }
  .ui-marcos .ui-passos:not(.ui-passos--vertical) .ui-passos__passo::before { display: none; }
}
.ui-rotina-hoje__rotinas { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-rotina-hoje__rotina { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); font-size: 14px; }
.ui-rotina-hoje__lista { display: flex; flex-direction: column; gap: var(--esp-3); margin: 0; padding: 0; list-style: none; }
.ui-rotina-hoje__item { min-width: 0; }
.ui-rotina-hoje__cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); }
.ui-entrega-dinheiro .ui-acoes .ui-botao { white-space: normal; max-width: 100%; }
.ui-consentimento .ui-etiqueta { white-space: normal; max-width: 100%; }
.ui-consentimento { min-width: 0; }

/* Customização */

/* ── ItemConfig · <div class="ui-item-config"><div class="ui-item-config__corpo"><p class="ui-item-config__nome">…</p><p class="ui-item-config__valor">…</p></div><div class="ui-acoes">…</div></div> ── */
.ui-item-config { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3) var(--esp-4); padding: var(--esp-3) 0; border-top: 1px solid var(--linha); min-width: 0; }
.ui-item-config:first-child { border-top: 0; padding-top: 0; }
.ui-item-config__corpo { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
.ui-item-config__nome { font-weight: 700; overflow-wrap: anywhere; }
.ui-item-config__valor { font-size: 14px; line-height: 1.45; color: var(--tinta-2); overflow-wrap: anywhere; }
.ui-item-config__valor strong { color: var(--tinta); font-weight: 700; }
.ui-item-config__estado { align-self: flex-start; }
.ui-item-config__travado { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.ui-item-config__travado > .ui-icone { color: var(--tinta-2); }
.ui-item-config__previa { display: flex; flex-direction: column; gap: var(--esp-3); width: 100%; }
.ui-item-config--aberto { flex-direction: column; align-items: stretch; gap: var(--esp-3); padding: var(--esp-4); border: 1px solid var(--linha-media); border-radius: var(--raio-m); background: var(--superficie-suave); }
.ui-item-config--aberto:first-child { padding-top: var(--esp-4); }
.ui-item-config--aberto .ui-item-config__corpo { flex: none; }
.ui-item-config--aberto .ui-acoes--fim { justify-content: flex-end; }
.ui-item-config .ui-diferenca-config { display: flex; flex-direction: column; gap: var(--esp-2); padding: 0; background: transparent; box-shadow: none; }
.ui-item-config .ui-diferenca-config__antes { color: var(--tinta-2); text-decoration: line-through; }
.ui-item-config .ui-diferenca-config__depois { font-weight: 700; }
.ui-item-config .ui-diferenca-config .ui-tabela { margin: 0; }
@container (max-width: 420px) {
  .ui-item-config { gap: var(--esp-2) var(--esp-3); }
  .ui-item-config > .ui-acoes { width: 100%; }
  .ui-item-config > .ui-acoes > .ui-botao { flex: 1 1 auto; }
}

/* ── CentralConfig · <section class="ui-cartao ui-central-config"> com busca, chips, cartões de grupo e ui-item-config ── */
.ui-central-config { display: flex; flex-direction: column; gap: var(--esp-5); min-width: 0; }
.ui-central-config__topo { display: flex; flex-direction: column; gap: var(--esp-4); }
.ui-central-config__grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--esp-4); }
.ui-central-config__grupo { min-width: 0; }
.ui-central-config__itens { display: flex; flex-direction: column; }
.ui-central-config__contagem { font-size: 14px; color: var(--tinta-2); }
.ui-central-config__resultado { display: flex; flex-direction: column; gap: var(--esp-3); }
.ui-central-config__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ui-central-config__lista > li + li { border-top: 1px solid var(--linha); }
.ui-central-config__caminho { font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.ui-central-config__mudou .ui-lista__linha { align-items: flex-start; flex-wrap: wrap; }
.ui-central-config__mudou .ui-lista__linha > span { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
@container (max-width: 420px) {
  .ui-central-config__grupos { grid-template-columns: minmax(0, 1fr); gap: var(--esp-3); }
  .ui-central-config__grupo .ui-cartao { padding: var(--esp-4); }
  .ui-central-config__grupo .ui-item-config { display: none; }
  .ui-central-config__grupo .ui-cartao__topo { flex-wrap: nowrap; }
}

/* ── HistoricoConfig · <section class="ui-cartao ui-historico-config"> com filtros, ui-periodo e <li class="ui-historico-config__mudanca"> ── */
.ui-historico-config { gap: var(--esp-4); }
.ui-historico-config__filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--esp-3); }
.ui-historico-config__filtros > .ui-campo { flex: 1 1 12rem; }
.ui-historico-config__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ui-historico-config__mudanca { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--esp-2) var(--esp-4); padding: var(--esp-4) 0; border-top: 1px solid var(--linha); }
.ui-historico-config__mudanca:first-child { border-top: 0; padding-top: 0; }
.ui-historico-config__quem { font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.ui-historico-config__item { font-weight: 700; overflow-wrap: anywhere; }
.ui-historico-config__troca { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--esp-1) var(--esp-2); font-variant-numeric: tabular-nums; }
.ui-historico-config__antes { font-size: 14px; color: var(--tinta-2); text-decoration: line-through; }
.ui-historico-config__depois { font-weight: 700; }
.ui-historico-config__seta { color: var(--tinta-3); }
.ui-historico-config__acao { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: var(--esp-1); }
.ui-historico-config__etiquetas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.ui-historico-config__segredo { display: inline-flex; align-items: center; gap: var(--esp-2); font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
@container (max-width: 420px) {
  .ui-historico-config__mudanca { grid-template-columns: minmax(0, 1fr); }
  .ui-historico-config__acao { justify-self: start; align-items: flex-start; }
}

/* Customização */

/* ── ModulosEmpresa (prefixo ui-modulos) ───────────────────────────────────
   <section class="ui-cartao ui-modulos"> … <div class="ui-modulos__grupos">
     <section class="ui-modulos__grupo"><h3 class="ui-grupo__titulo">Atendimento</h3>
       <label class="ui-modulos__linha"><span class="ui-modulos__texto"><span class="ui-modulos__nome">Clientes</span><span class="ui-apoio">…</span></span>
         <input type="checkbox" role="switch" class="ui-interruptor" checked></label></section></div></section> */
.ui-modulos { gap: var(--esp-4); }
.ui-modulos__grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--esp-4); }
.ui-modulos__grupo { margin: 0; min-width: 0; display: flex; flex-direction: column; padding: var(--esp-3) var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); }
.ui-modulos__linha { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); min-height: var(--linha-min); padding: var(--esp-2) 0; border-top: 1px solid var(--linha); cursor: pointer; }
.ui-modulos__linha > .ui-interruptor { flex: none; }
.ui-modulos__linha:has(input:disabled) { cursor: not-allowed; }
.ui-modulos__linha--mudando { padding-inline: var(--esp-2); border-radius: var(--raio-m); background: var(--superficie-suave); }
.ui-modulos__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-modulos__nome { font-weight: 700; }
.ui-modulos__linha:has(input:disabled) .ui-modulos__nome { color: var(--tinta-2); }
.ui-modulos__motivo { display: flex; align-items: flex-start; gap: var(--esp-2); padding-top: var(--esp-2); font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.ui-modulos__motivo > .ui-icone { margin-top: 2px; flex: none; }
.ui-modulos__dependencia { margin-top: var(--esp-2); }
.ui-modulos__dependencia .ui-aviso { padding: var(--esp-3); }

/* ── VerComo (prefixo ui-ver-como) ─────────────────────────────────────────
   <div class="ui-ver-como__faixa" role="status"><span class="ui-ver-como__faixa-texto"><svg class="ui-icone ui-icone--p">eye</svg> Você está vendo como Recepção (júnior). Só leitura: nada é gravado.</span>
     <button class="ui-botao ui-botao--secundario">Voltar para a minha visão</button></div> */
.ui-ver-como { gap: var(--esp-4); }
.ui-ver-como__seletor { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--esp-3); }
.ui-ver-como__seletor > .ui-campo { flex: 1 1 14rem; }
.ui-ver-como__seletor > .ui-botao { flex: none; }
.ui-ver-como__faixa { position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--info-linha); border-radius: var(--raio-m); background: var(--info-fundo); color: var(--tinta); font-weight: 700; }
.ui-ver-como__faixa-texto { display: flex; align-items: center; gap: var(--esp-2); min-width: 0; }
.ui-ver-como__faixa-texto > .ui-icone { color: var(--info); flex: none; }
.ui-ver-como__faltam { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.ui-ver-como__faltam-rotulo { font-weight: 700; color: var(--tinta); }

/* ── CamposPersonalizados (prefixo ui-campos-pers) ─────────────────────────
   <ul class="ui-campos-pers__lista"><li class="ui-campos-pers__campo"><div class="ui-campos-pers__corpo">
     <span class="ui-campos-pers__nome">Microchip</span><span class="ui-campos-pers__meta">Texto · opcional · na ficha e na recepção</span></div>
     <button class="ui-botao ui-botao--secundario">Editar</button></li></ul> */
.ui-campos-pers { gap: var(--esp-4); }
.ui-campos-pers__cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.ui-campos-pers__lista { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ui-campos-pers__campo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-3); padding: var(--esp-3) 0; border-top: 1px solid var(--linha); }
.ui-campos-pers__corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 14rem; }
.ui-campos-pers__nome { font-weight: 700; overflow-wrap: anywhere; }
.ui-campos-pers__meta { font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.ui-campos-pers__previa { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-4); border: 1px dashed var(--linha-forte); border-radius: var(--raio-m); background: var(--superficie-suave); }
.ui-campos-pers__previa-rotulo { font-size: 14px; font-weight: 700; color: var(--tinta-2); }
.ui-campos-pers__gaveta { gap: var(--esp-4); }
.ui-ver-como__corpo { display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-4); }
.ui-ver-como .ui-matriz__celula { flex-wrap: wrap; white-space: normal; max-width: 12rem; }

/* Customização */

/* ── Minha conta (PreferenciasPessoa) ──────────────────────────────────────
   <section class="ui-cartao ui-preferencias__secao">
     <div class="ui-cartao__topo"><h2 class="ui-cartao__titulo">Avisos</h2><span class="ui-etiqueta ui-etiqueta--neutra">seu</span></div>
     <div class="ui-preferencias__barra"><div><p>…</p><p class="ui-apoio">…</p></div><a class="ui-botao ui-botao--secundario" href="#">Mudar avisos</a></div>
   </section>
   Miniatura de tema (tokens lidos do data-theme, sem cor escrita):
   <span class="ui-preferencias__mini" aria-hidden="true"><span class="ui-preferencias__tela" data-theme="escuro"><span class="ui-preferencias__folha"><span class="ui-preferencias__risco"></span><span class="ui-preferencias__risco ui-preferencias__risco--marca"></span></span></span></span> */
.ui-preferencias { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.ui-preferencias__secao { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
.ui-preferencias__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.ui-preferencias__barra > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 14rem; }
.ui-preferencias__barra p { margin: 0; }
.ui-preferencias__quem { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); min-width: 0; }
.ui-preferencias__quem > .ui-icone { color: var(--marca); }
.ui-preferencias__tema { align-items: stretch; }
.ui-preferencias__mini { display: flex; width: 100%; height: 64px; overflow: hidden; border: 1px solid var(--linha-media); border-radius: var(--raio-m); }
.ui-preferencias__tela { flex: 1 1 0; min-width: 0; display: flex; padding: 6px; background: var(--fundo); color: var(--tinta); }
.ui-preferencias__folha { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 6px; border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--superficie); }
.ui-preferencias__risco { display: block; height: 5px; width: 70%; border-radius: 3px; background: var(--tinta-3); }
.ui-preferencias__risco--marca { width: 45%; background: var(--marca); }

/* ── Avisos por canal (MatrizAvisos) ───────────────────────────────────────
   <section class="ui-cartao ui-avisos-matriz">
     <div class="ui-tabela ui-avisos-matriz__tabela" role="region" aria-label="Avisos por canal" tabindex="0"><table>…<input type="checkbox" class="ui-caixa">…</table></div>
     <div class="ui-avisos-matriz__blocos"><div class="ui-avisos-matriz__bloco"><h3 class="ui-avisos-matriz__nome">Tarefa nova para mim</h3>
       <label class="ui-opcao"><span>No flow</span><input type="checkbox" role="switch" class="ui-interruptor" checked></label></div></div>
   </section>
   Estreito (o celular): a tabela some e cada aviso vira um bloco com três interruptores. */
.ui-avisos-matriz { container-type: inline-size; display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.ui-avisos-matriz__tabela td { text-align: center; }
.ui-avisos-matriz__tabela td .ui-caixa { margin-inline: auto; }
.ui-avisos-matriz__trava { display: inline-flex; align-items: center; gap: var(--esp-1); font-size: 14px; line-height: 1.45; font-weight: 400; color: var(--tinta-2); }
.ui-avisos-matriz__trava > .ui-icone { color: var(--tinta-2); }
.ui-avisos-matriz__blocos { display: none; flex-direction: column; }
.ui-avisos-matriz__bloco { display: flex; flex-direction: column; gap: var(--esp-1); padding: var(--esp-3) 0; border-top: 1px solid var(--linha); }
.ui-avisos-matriz__bloco:first-child { padding-top: 0; border-top: 0; }
.ui-avisos-matriz__nome { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 700; }
.ui-avisos-matriz__bloco .ui-opcao { display: flex; justify-content: space-between; align-items: center; min-height: var(--alvo); padding: 0; }
.ui-avisos-matriz__silencio { display: flex; flex-direction: column; gap: var(--esp-3); padding-top: var(--esp-4); border-top: 1px solid var(--linha); }
.ui-avisos-matriz__sub { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 700; }
@container (max-width: 440px) {
  .ui-avisos-matriz__tabela { display: none; }
  .ui-avisos-matriz__blocos { display: flex; }
}

/* ── Ações fixadas (FixarAcoes) ────────────────────────────────────────────
   <ol class="ui-fixar__lista"><li class="ui-fixar__linha"><svg class="ui-icone" data-icone="stethoscope"></svg>
     <span class="ui-fixar__nome">Nova consulta</span>
     <div class="ui-acoes ui-fixar__ordens"><button class="ui-botao ui-botao--secundario ui-botao--icone" type="button" aria-label="Subir Nova consulta"><svg class="ui-icone" data-icone="arrow-up"></svg></button>…<button class="ui-botao ui-botao--fantasma" type="button">Tirar</button></div></li></ol> */
.ui-fixar { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.ui-fixar__lista { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ui-fixar__linha { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--esp-3); min-height: var(--linha-min); padding: var(--esp-2) 0; border-top: 1px solid var(--linha); }
.ui-fixar__linha:first-child { border-top: 0; }
.ui-fixar__linha > .ui-icone { color: var(--marca); }
.ui-fixar__nome { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.ui-fixar__ordens { flex-wrap: nowrap; gap: var(--esp-1); }
.ui-fixar__voltar { max-width: 100%; white-space: normal; text-align: left; }
.ui-fixar__contagem { font-size: 14px; color: var(--tinta-2); }
.ui-fixar__bloco { display: flex; flex-direction: column; gap: var(--esp-3); padding-top: var(--esp-4); border-top: 1px solid var(--linha); }
.ui-fixar__bloco-titulo { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 700; }
.ui-fixar__resultados { display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-fixar__resultado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-2) var(--esp-3); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie-suave); }
.ui-fixar__resultado > span { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); min-width: 0; font-weight: 700; }
.ui-fixar__resultado > span > .ui-icone { color: var(--marca); }
.ui-fixar__sugestao { background: var(--superficie); border-color: var(--linha-media); }
.ui-fixar__vez { font-size: 14px; font-weight: 400; color: var(--tinta-2); }

/* ── Marca da empresa (MarcaEmpresa) ───────────────────────────────────────
   <svg class="ui-marca__logo" viewBox="0 0 48 48" role="img" aria-label="Logo da Pokotucho"><circle cx="24" cy="30" r="10"/>…</svg>
   Logo com fundo (o erro): <svg class="ui-marca__logo ui-marca__logo--branco"><rect width="48" height="48" rx="8"/>…</svg>
   Prévia: <div class="ui-marca__pagina"><div class="ui-marca__topo">logo + <span class="ui-marca__nome">…</span></div>…</div> */
.ui-marca { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.ui-marca__logo { flex: none; width: 48px; height: 48px; }
.ui-grafico.ui-marca__logo { display: block; }
.ui-marca__logo circle, .ui-marca__logo ellipse { fill: var(--marca); }
.ui-marca__logo--branco rect { fill: var(--papel); }
.ui-marca__lado { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--esp-4); }
.ui-marca__previa { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }
.ui-marca__pagina { display: flex; flex-direction: column; gap: var(--esp-4); padding: var(--esp-4); border: 1px solid var(--linha-media); border-radius: var(--raio-g); background: var(--fundo); color: var(--tinta); }
.ui-marca__topo { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; padding-bottom: var(--esp-3); border-bottom: 1px solid var(--linha); }
.ui-marca__nome { min-width: 0; font-size: 16px; line-height: 1.3; font-weight: 700; }
.ui-marca__cartao { display: flex; flex-direction: column; align-items: stretch; gap: var(--esp-2); padding: var(--esp-3); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); }
.ui-marca__cartao > strong { font-size: 18px; line-height: 1.3; }
.ui-marca__cabeca { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; }
.ui-marca__folha .ui-marca__logo circle, .ui-marca__folha .ui-marca__logo ellipse { fill: var(--papel-marca); }
.ui-marca__folha .ui-folha__emissor { min-width: 0; }

/* Indicadores e números (P0a): resumo, cartão de KPI com variação e faísca, meta, legenda e vazio de gráfico.
   Os componentes são de crates/flow-ui/src/indicador.rs; o gráfico em si (barras, linha, mapa) é o L13b.
   <section class="ui-resumo" aria-label="Resumo da régua"><div class="ui-kpis"><div class="ui-kpis__fila">
     <a class="ui-kpi ui-kpi--perigo" href="#"><p class="ui-kpi__rotulo">Atrasados</p>
       <div class="ui-kpi__linha"><p class="ui-kpi__valor">320</p><svg class="ui-grafico ui-grafico--mini" viewBox="0 0 80 24" role="img" aria-label="Últimos 8: de 290 a 320"><polyline class="ui-grafico__linha" points="…"/></svg></div>
       <p class="ui-kpi__apoio ui-kpi__apoio--perigo"><svg class="ui-icone ui-icone--p">trending-up</svg> +10,3% sobre a semana anterior</p></a>
   </div></div></section> */

/* Resumo: o cabeçalho de indicadores logo abaixo do título da página. */
.ui-resumo { min-width: 0; }

/* Cartão que é link (filtra a lista). */
a.ui-kpi { color: inherit; text-decoration: none; }
a.ui-kpi:hover { background: var(--superficie-suave); }
a.ui-kpi:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

/* Cartão que pede ação: borda esquerda de 4 px na cor do tom. */
.ui-kpi--atencao { border-left-width: 4px; border-left-color: var(--atencao); }
.ui-kpi--perigo { border-left-width: 4px; border-left-color: var(--perigo); }

/* Valor e faísca lado a lado. */
.ui-kpi__linha { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); min-width: 0; }
.ui-kpi__linha > .ui-kpi__valor { min-width: 0; }

/* Faísca do cartão: 80 × 24, o último ponto marcado. */
.ui-grafico--mini { display: block; width: 80px; max-width: 80px; height: 24px; flex: none; overflow: visible; }
.ui-faisca__ponto { fill: var(--marca); }

/* Barra de meta: trilho, preenchimento por estado e linha tracejada no alvo. */
.ui-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ui-meta__barra { display: block; width: 100%; height: 10px; overflow: visible; }
.ui-grafico__trilho { fill: var(--fundo-barra); }
.ui-grafico__meta { stroke: var(--tinta-2); stroke-width: 2; stroke-dasharray: 4 3; }
.ui-grafico__barra--marca { fill: var(--marca); }
.ui-grafico__barra--ok { fill: var(--ok); }
.ui-grafico__barra--atencao { fill: var(--atencao); }
.ui-grafico__barra--perigo { fill: var(--perigo); }

/* Tabela "Ver os números" embaixo de um gráfico. */
.ui-grafico__numeros { margin-top: var(--esp-2); }

/* Lugar do gráfico sem dado: moldura tracejada do tamanho do gráfico, o motivo e a ação. */
.ui-grafico--vazio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--esp-2); min-height: 160px; padding: var(--esp-4); border: 1px dashed var(--linha-media); border-radius: var(--raio-g); text-align: center; color: var(--tinta-2); }

/* Legenda: a bolinha da cor (ui-chave) e o nome escrito ao lado. */
.ui-legenda { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5); margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--tinta-2); }
.ui-legenda > li { display: inline-flex; align-items: center; gap: var(--esp-2); }
.ui-chave { flex: none; display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--marca); }
.ui-chave--marca { background: var(--marca); }
.ui-chave--serie-1 { background: var(--serie-1); }
.ui-chave--serie-2 { background: var(--serie-2); }
.ui-chave--serie-3 { background: var(--serie-3); }
.ui-chave--serie-4 { background: var(--serie-4); }
.ui-chave--ok { background: var(--ok); }
.ui-chave--atencao { background: var(--atencao); }
.ui-chave--perigo { background: var(--perigo); }
.ui-chave--perigo-forte { background: var(--perigo-forte); }
.ui-chave--neutra { background: var(--tinta-3); }

/* Coluna que some no celular (a tabela vira cartões): ui-so-largo. */
@container (max-width: 560px) { .ui-tabela--cartoes td.ui-so-largo { display: none; } }

/* Gráficos (P0b): barras, empilhadas, proporção, rosca, linha, funil, mapa de calor e colunas que rolam.
   Os componentes são de crates/flow-ui/src/grafico.rs. Só tokens; cor só por classe; o L13a traz as chaves e a legenda.
   <figure class="ui-barras-h"><figcaption class="ui-barras-h__titulo">Atrasadas por tipo</figcaption><ol class="ui-barras-h__lista">
     <li class="ui-barras-h__item"><a class="ui-barras-h__rotulo" href="#">Suporte</a><svg class="ui-barras-h__trilho" viewBox="0 0 100 8" preserveAspectRatio="none" role="img" aria-label="Suporte: 14"><rect class="ui-grafico__trilho" width="100" height="8" rx="4"/><rect class="ui-grafico__barra ui-grafico__barra--marca" width="38.9" height="8" rx="4"><title>14</title></rect></svg><span class="ui-barras-h__valor">14</span></li></ol></figure> */

/* Cores de série e de estado forte (marca, ok, atenção e perigo estão no L13a). */
.ui-grafico__barra--serie-1 { fill: var(--serie-1); }
.ui-grafico__barra--serie-2 { fill: var(--serie-2); }
.ui-grafico__barra--serie-3 { fill: var(--serie-3); }
.ui-grafico__barra--serie-4 { fill: var(--serie-4); }
.ui-grafico__barra--perigo-forte { fill: var(--perigo-forte); }
.ui-grafico__barra--neutra { fill: var(--tinta-3); }

/* Segmento de barra empilhada, de proporção e de rosca: 2 de folga na cor da superfície. */
.ui-grafico__seg { stroke: var(--superficie); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* Ponto da linha na cor da marca (ok, atenção e perigo já existem no ds). */
.ui-grafico__ponto--marca { fill: var(--marca); }

/* Figuras: título e largura própria (o .ui-grafico do ds limita a 480 px; a série longa precisa da largura toda). */
.ui-barras-h, .ui-barras-v, .ui-proporcao, .ui-rosca, .ui-linha, .ui-funil-grafico { margin: 0; min-width: 0; }
.ui-barras-h { width: 100%; container-type: inline-size; }
.ui-barras-h__titulo, .ui-proporcao__titulo { margin: 0 0 var(--esp-2); font-size: 14px; font-weight: 700; color: var(--tinta-2); }
.ui-barras-v > .ui-grafico, .ui-linha > .ui-grafico { max-width: 100%; }
.ui-barras-h__meta { margin: var(--esp-2) 0 0; }

/* Barras horizontais: rótulo, trilho e valor numa grade; no estreito o rótulo sobe para a linha de cima. */
.ui-barras-h__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); }
.ui-barras-h__item { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr auto; align-items: center; gap: var(--esp-3); min-width: 0; }
.ui-barras-h__rotulo { min-width: 0; overflow-wrap: anywhere; color: var(--tinta); }
a.ui-barras-h__rotulo { text-decoration: none; }
a.ui-barras-h__rotulo:hover { text-decoration: underline; }
a.ui-barras-h__rotulo:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.ui-barras-h__trilho { display: block; width: 100%; height: 8px; overflow: visible; }
.ui-barras-h__valor { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
@container (max-width: 480px) {
  .ui-barras-h__item { grid-template-columns: 1fr auto; row-gap: var(--esp-1); }
  .ui-barras-h__rotulo { grid-column: 1 / -1; }
}

/* Referência por barra (o previsto do dia, a capacidade): marca curta em tinta. */
.ui-barras-h__trilho .ui-grafico__marca, .ui-barras-v .ui-grafico__marca { stroke: var(--tinta); stroke-width: 2; }

/* Proporção: barra 100% de 14 px e a legenda com valor e percentual. */
.ui-proporcao__barra { display: block; width: 100%; height: 14px; overflow: hidden; border-radius: 7px; }
.ui-proporcao__legenda { margin-top: var(--esp-3); }
.ui-proporcao__legenda strong { color: var(--tinta); font-variant-numeric: tabular-nums; }

/* Rosca 120 × 120, com o número do centro. */
.ui-rosca { display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-rosca__desenho { display: block; width: 120px; max-width: 120px; height: 120px; overflow: visible; }
.ui-rosca__trilho { fill: none; stroke: var(--fundo-barra); stroke-width: 18; }
.ui-grafico .ui-rosca__centro, .ui-rosca__desenho text.ui-rosca__centro { font-size: 20px; fill: var(--tinta); }

/* Funil: barras centradas e, entre elas, a taxa de passagem escrita. */
.ui-funil-grafico__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-1); }
.ui-funil-grafico__topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-3); font-size: 14px; }
.ui-funil-grafico__topo strong { font-variant-numeric: tabular-nums; }
.ui-funil-grafico__barra { display: block; width: 100%; height: 10px; overflow: visible; }
.ui-funil-grafico__passo { text-align: center; font-size: 13px; color: var(--tinta-2); }

/* Mapa de calor: tabela de células de 28 px, cabeçalho de linha preso à esquerda, rola de lado no celular. */
.ui-calor__rola { overflow-x: auto; max-width: 100%; }
.ui-calor__rola:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.ui-calor { border-collapse: separate; border-spacing: 2px; font-size: 13px; }
.ui-calor__titulo { caption-side: top; text-align: left; margin-bottom: var(--esp-2); font-size: 14px; font-weight: 700; color: var(--tinta-2); }
.ui-calor th { font-weight: 700; color: var(--tinta-2); text-align: center; padding: 0 var(--esp-1); white-space: nowrap; }
.ui-calor tbody th { position: sticky; left: 0; z-index: 1; text-align: left; padding-right: var(--esp-3); background: var(--superficie); }
.ui-calor__celula { min-width: 28px; height: 28px; padding: 0 var(--esp-1); border: 1px solid transparent; border-radius: 4px; text-align: center; font-variant-numeric: tabular-nums; color: var(--tinta); }
.ui-calor__celula a { color: inherit; text-decoration: none; display: block; }
.ui-calor__celula a:hover { text-decoration: underline; }
.ui-calor__celula a:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.ui-calor__celula--n0 { background: var(--superficie-suave-forte); }
.ui-calor__celula--n1 { background: var(--marca-suave); }
.ui-calor__celula--n2 { background: var(--marca-linha); }
.ui-calor__celula--n3 { background: var(--marca); color: var(--sobre-marca); }
.ui-calor__celula--n4 { background: var(--marca-forte); color: var(--sobre-marca); }
.ui-calor__celula--ok { background: var(--ok-fundo); border-color: var(--ok-linha); color: var(--tinta); }
.ui-calor__celula--atencao { background: var(--atencao-fundo); border-color: var(--atencao-linha); color: var(--tinta); }
.ui-calor__celula--perigo { background: var(--perigo-fundo); border-color: var(--perigo-linha); color: var(--tinta); }
.ui-calor__celula--info { background: var(--info-fundo); border-color: var(--info-linha); color: var(--tinta); }
.ui-calor__celula--marca { background: var(--marca-suave); border-color: var(--marca-linha); color: var(--tinta); }
.ui-calor__celula--neutra { background: var(--superficie-suave); border-color: var(--linha); color: var(--tinta); }
/* Células de série (turnos, categorias): o fundo é a cor da série clareada, a borda é a série cheia. */
.ui-calor__celula--serie-1 { background: color-mix(in srgb, var(--serie-1) 22%, var(--superficie)); border-color: var(--serie-1); color: var(--tinta); }
.ui-calor__celula--serie-2 { background: color-mix(in srgb, var(--serie-2) 22%, var(--superficie)); border-color: var(--serie-2); color: var(--tinta); }
.ui-calor__celula--serie-3 { background: color-mix(in srgb, var(--serie-3) 22%, var(--superficie)); border-color: var(--serie-3); color: var(--tinta); }
.ui-calor__celula--serie-4 { background: color-mix(in srgb, var(--serie-4) 22%, var(--superficie)); border-color: var(--serie-4); color: var(--tinta); }
.ui-calor__legenda { margin: var(--esp-2) 0 0; }

/* Colunas que rolam de lado no celular, com o encaixe de cada uma (o /quadro e o quadro do banho).
   A consulta olha o contêiner de cima (a casca), por isso a classe não declara container-type. */
@container (max-width: 720px) {
  .ui-colunas-rolam { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .ui-colunas-rolam > * { flex: 0 0 88%; scroll-snap-align: start; }
}

/* L14 (UI4): a página com índice de seções (E15), o "Salvo às" que ainda não salvou e os toasts de atenção e de
   erro (E11). Componentes: crates/flow-ui/src/indice.rs e retorno.rs. A base (.ui-indice, .ui-salvo, .ui-toasts,
   .ui-toast) está no ui.css; aqui fica só o que faltava. Só tokens. O comportamento (a seção atual, o texto do
   salvo e o teto da pilha) é do casca.js.
   <div class="ui-com-indice"><div class="ui-com-indice__grade">
     <nav class="ui-indice" aria-label="Seções da contabilidade" data-indice="">
       <a class="ui-indice__item esta-feita" href="#calendario" aria-current="true"><span class="ui-indice__ponto" aria-hidden="true"></span><span class="ui-indice__rotulo">Calendário</span> <span class="ui-indice__estado">feita</span></a>…</nav>
     <div class="ui-com-indice__conteudo"><section class="ui-cartao" id="calendario">…</section>…</div>
   </div></div>
   <span class="ui-salvo esta-aguardando" id="salvo-as" data-salvo-as=""><span class="ui-salvo__luz" aria-hidden="true"></span> <span class="ui-salvo__texto">As mudanças salvam sozinhas</span></span> */

/* Página com índice. Celular primeiro: o índice é uma faixa de chips presa no alto da tela, que rola de lado. */
.ui-com-indice { container-type: inline-size; min-width: 0; }
.ui-com-indice__grade { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.ui-com-indice__conteudo { container-type: inline-size; display: flex; flex-direction: column; gap: var(--esp-5); min-width: 0; }
.ui-com-indice__conteudo [id] { scroll-margin-top: calc(var(--chip) + var(--esp-8)); }
.ui-com-indice__grade > .ui-indice { position: sticky; top: 0; z-index: 5; flex-direction: row; gap: var(--esp-2); min-width: 0; overflow-x: auto; scrollbar-width: none; padding: var(--esp-2) 0; border-bottom: 1px solid var(--linha); background: var(--fundo); }
.ui-com-indice__grade > .ui-indice::-webkit-scrollbar { display: none; }
.ui-com-indice__grade > .ui-indice > .ui-indice__item { flex: none; min-height: var(--chip); padding: 0 var(--esp-4); border: 1px solid var(--linha-media); border-radius: var(--raio-pilula); background: var(--superficie); white-space: nowrap; }
.ui-com-indice__grade > .ui-indice > .ui-indice__item:hover { background: var(--superficie-suave); }
.ui-com-indice__grade > .ui-indice > .ui-indice__item[aria-current="true"] { border-color: var(--marca); background: var(--marca-suave); color: var(--marca); }
.ui-com-indice__grade > .ui-indice > .ui-indice__item:focus-visible { outline-offset: -3px; }
.ui-com-indice__grade > .ui-indice .ui-indice__estado { margin-left: 0; }

/* Tela grande (a página com 960 px ou mais): o índice é a coluna da direita, presa ao rolar; rola sozinho quando é
   mais alto que a janela. */
@container (min-width: 960px) {
  .ui-com-indice__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(13rem, 16rem); column-gap: var(--esp-6); align-items: start; }
  .ui-com-indice__conteudo { grid-column: 1; grid-row: 1; }
  .ui-com-indice__conteudo [id] { scroll-margin-top: var(--esp-4); }
  .ui-com-indice__grade > .ui-indice { grid-column: 2; grid-row: 1; top: var(--esp-4); z-index: auto; flex-direction: column; gap: 2px; max-height: calc(100vh - 2 * var(--esp-4)); overflow-x: hidden; overflow-y: auto; padding: 0; border-bottom: 0; background: transparent; }
  .ui-com-indice__grade > .ui-indice > .ui-indice__item { flex: initial; min-height: var(--alvo); padding: 0 var(--esp-3); border: 0; border-radius: var(--raio-m); background: transparent; white-space: normal; }
  .ui-com-indice__grade > .ui-indice > .ui-indice__item:hover { background: var(--superficie-suave); }
  .ui-com-indice__grade > .ui-indice > .ui-indice__item[aria-current="true"] { background: var(--marca-suave); color: var(--marca); }
  .ui-com-indice__grade > .ui-indice .ui-indice__estado { margin-left: auto; }
}

/* Rótulo longo quebra na coluna (na faixa, não quebra). Seção com campo recusado (422). */
.ui-indice__rotulo { min-width: 0; overflow-wrap: anywhere; }
.ui-indice__item.esta-erro .ui-indice__ponto { background: var(--perigo); }
.ui-indice__item.esta-erro .ui-indice__estado { color: var(--perigo); font-weight: 700; }

/* "Salvo às": a hora não muda de largura; antes da primeira gravação, a luz fica neutra (não é verde). */
.ui-salvo { font-variant-numeric: tabular-nums; }
.ui-salvo.esta-aguardando .ui-salvo__luz { background: var(--linha-forte); }

/* Toast de atenção (o casca.js já aceita "atencao") e o de erro, que fica até fechar, com fundo de perigo. */
.ui-toast--atencao > .ui-icone { color: var(--atencao); }
.ui-toast--perigo { border-color: var(--perigo-linha); background: var(--perigo-fundo); }
@keyframes ui-toast-entra { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: no-preference) { .ui-toasts > .ui-toast { animation: ui-toast-entra 160ms ease-out; } }

/* No papel, nem índice nem "Salvo às". */
@media print { .ui-com-indice__grade > .ui-indice, .ui-salvo { display: none; } }

/* Onda 4b, pacote AY: acessibilidade (E16) e o CSS que os pacotes V pedem. Só aditivo. */

/* AY-1 · "Mais ações": details.ui-mais > summary + .ui-menu.
   <details class="ui-mais"><summary>Mais</summary><div class="ui-menu">…</div></details> */
.ui-mais { position: relative; display: inline-block; }
.ui-mais > summary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2); box-sizing: border-box;
  min-height: var(--alvo); padding: 0 var(--esp-4); border: 1px solid var(--linha-media); border-radius: var(--raio-m);
  background: var(--superficie-suave); color: var(--tinta); font: inherit; font-weight: 700; cursor: pointer; list-style: none; user-select: none;
}
.ui-mais > summary::-webkit-details-marker { display: none; }
.ui-mais > summary::marker { content: ""; }
.ui-mais > summary:hover { background: var(--superficie-suave-forte); border-color: var(--linha-forte); }
.ui-mais > .ui-menu { display: none; }
.ui-mais[open] > .ui-menu {
  display: flex; flex-direction: column; position: absolute; z-index: 30; top: calc(100% + var(--esp-1)); right: 0; left: auto;
  box-sizing: border-box; width: max-content; min-width: min(14rem, calc(100vw - 2 * var(--esp-4))); max-width: calc(100vw - 2 * var(--esp-4));
}

/* AY-7 · Foco visível em summary e abas (a 4b cria dezenas de details); a busca da paleta mostra o foco no contêiner. */
summary:focus-visible, .ui-aba:focus-visible, .ui-mais > summary:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.ui-paleta:has(.ui-paleta__entrada:focus), .ui-paleta__campo:has(.ui-paleta__entrada:focus) { outline: 3px solid var(--foco); outline-offset: -3px; }

/* AY-8 · Estado por ARIA: chip e segmento pressionados usam a cor da marca; o chevron do details gira ao abrir. */
.ui-chip[aria-pressed="true"] { background: var(--marca-suave); border-color: var(--marca); color: var(--marca); }
.ui-segmentos__item[aria-pressed="true"] { color: var(--marca); }
details[open] > summary.ui-chevron > .ui-icone:last-child, details[open] > .ui-mais__chevron, .ui-mais[open] > summary > .ui-icone:last-child { transform: rotate(180deg); transition: transform 0.15s ease; }
.ui-secao-ficha__estado--vazia { color: var(--tinta-2); }
.ui-secao-ficha__estado--vazia::before { content: none; }

/* AY-13 · PDF: o iframe ocupa a largura e 70vh, sem a altura fixa de 360 px do espaço reservado. */
.ui-pdf__corpo:has(> iframe) { display: block; height: auto; padding: 0; }
.ui-pdf__corpo > iframe { display: block; width: 100%; height: 70vh; border: 0; }
.ui-pdf > iframe { display: block; width: 100%; height: 70vh; border: 0; }

/* AY-14 · Ficha do banho (be-form): os blocos em duas colunas no largo. */
@media (min-width: 900px) {
  form.be-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4); align-items: start; }
  form.be-form > :not(fieldset.be-bloco) { grid-column: 1 / -1; }
  form.be-form > fieldset.be-bloco { min-width: 0; }
}

/* AY-16 · Coluna que não pode ser cortada (nome do dente, procedimento). */
.ui-col-larga { min-width: 14rem; }

/* AY-2 · A barra de baixo (trilho) não cobre conteúdo: o fim da página ganha o espaço do trilho mais a área segura,
   e o primeiro campo não fica atrás de uma barra presa no alto. */
@media (max-width: 720px) {
  html[data-visual="3"] .ui-casca__principal { padding-bottom: calc(var(--ui-baixo-celular, 88px) + env(safe-area-inset-bottom, 0px) + var(--esp-6)); }
  .ui-form__rodape--fixo, .ui-barra-fixa { bottom: calc(var(--ui-baixo-celular, 88px) + env(safe-area-inset-bottom, 0px) - 12px); z-index: 6; }
}
:is(input, select, textarea, button, [tabindex]):not([tabindex="-1"]) { scroll-margin-top: calc(var(--alvo) + var(--esp-6)); }
:is(.ui-barra-fixa, .ui-form__rodape--fixo) { scroll-margin-top: 0; }

/* AY-21 · Quebra de texto: o editor de workflow e a versão do texto quebram a linha mantendo a indentação; a gaveta
   aberta como página solta não mostra o fechar (a volta é a migalha). */
.yaml, textarea.yaml { white-space: pre-wrap; overflow-wrap: anywhere; }
.cs-versao-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
main > .gaveta .gaveta-fechar { display: none; }

/* AY-20 · Densidade das tabelas: corpo com pelo menos 14 px e linha de 40 px; respiro entre seções e acordeões. */
.ui-tabela tbody td { font-size: max(14px, var(--dado, 14px)); }
.ui-tabela tbody tr { height: auto; }
.ui-tabela tbody td { min-height: 40px; height: max(40px, var(--linha-min, 40px)); }
/* AY-20 (C1 da 5b) · No cartão do celular o td cresce com o conteúdo: sem isto os 40 px prendem o rótulo e o campo vaza para a linha de baixo. */
@container (max-width: 640px) { .ui-tabela--cartoes tbody td { height: auto; min-height: 0; } }
.ui-com-indice__conteudo { gap: var(--esp-6); }
details.ui-acordeao + details.ui-acordeao { margin-top: var(--esp-6); }

/* AY-19 · Páginas públicas: o conteúdo é contêiner, para a tabela em cartões (@container) funcionar no celular. */
.ui-pub__conteudo { container-type: inline-size; }

/* AY-5 · /hoje no celular: as ações do cartão descem para a linha de baixo e quebram; a fila de KPIs cabe em 9 rem. */
@media (max-width: 720px) {
  .ui-decisao__acoes { flex: 1 1 100%; margin-left: 0; }
  .ui-decisao__acoes > .ui-botao { flex: 1 1 auto; white-space: normal; }
  .ui-kpis__fila { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
}

/* AY-9 · .ui-periodo no celular: linha 1 = setas e "Hoje"; linha 2 = a data e Dia/Semana. */
@media (max-width: 720px) {
  .ui-periodo { flex-wrap: wrap; }
  .ui-periodo > :is(.ui-botao, .ui-chip) { order: 1; }
  .ui-periodo::before { content: ""; order: 2; flex: 1 0 100%; height: 0; }
  .ui-periodo > :is(.ui-periodo__rotulo, .ui-periodo__ancora, .ui-segmentos) { order: 3; }
  .ui-periodo > .ui-periodo__rotulo, .ui-periodo > .ui-periodo__ancora { flex: 1 1 auto; text-align: left; }
}

/* AY-10 · Quadro por raias: as colunas rolam de lado com encaixe; a fila da bancada rola por dentro. */
@media (max-width: 720px) {
  .ui-quadro__raias { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(78%, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--esp-3); padding-bottom: var(--esp-2); }
  .ui-quadro__raia { scroll-snap-align: start; }
  .ui-bancada-fila__lista { max-height: 60vh; overflow-y: auto; }
}

/* AY-12 · Tabela-matriz: a primeira coluna fica presa e a rolagem de lado tem desvanecido à direita. */
.ui-tabela--matriz { overflow-x: auto; -webkit-mask-image: linear-gradient(to right, black calc(100% - 1.5rem), transparent); mask-image: linear-gradient(to right, black calc(100% - 1.5rem), transparent); }
.ui-tabela--matriz :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--superficie); box-shadow: 1px 0 0 var(--linha); }
.ui-tabela--matriz thead th:first-child { z-index: 2; background: var(--superficie-suave); }

/* Cliente, início e gestão */

/* ContratoEmFoco: seletor de contrato e o contrato em foco.
   <section class="ui-cartao ui-contrato-foco"><div class="ui-cartao__topo"><h2 class="ui-cartao__titulo">Contrato em foco</h2><span class="ui-etiqueta ui-etiqueta--ok">Ativo</span></div>
     <div class="ui-chips" role="group" aria-label="Contrato"><button class="ui-chip" type="button" aria-pressed="true">4821 · Fibra 500 MB</button>…</div>
     <dl class="ui-pares ui-pares--coluna"><div><dt>Endereço</dt><dd>…</dd></div>…</dl></section> */
.ui-contrato-foco { min-width: 0; }
.ui-contrato-foco__escolha { display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-contrato-foco__escolha > .ui-apoio { font-size: 14px; }
.ui-contrato-foco__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); }
.ui-contrato-foco .ui-pares { gap: var(--esp-2) var(--esp-4); }

/* PlanoConexao: plano, situação da conexão, sinal da ONU (FaixaSinal), IP e teste.
   <section class="ui-cartao ui-plano-conexao"><div class="ui-cartao__topo"><h2 class="ui-cartao__titulo">Plano e conexão</h2></div>
     <dl class="ui-pares"><div><dt>Plano</dt><dd>Fibra 500 MB</dd></div>…</dl>
     <div class="ui-sinal"><p class="ui-sinal__valor">−19,8 dBm</p><span class="ui-etiqueta ui-etiqueta--ok">Bom</span></div><svg class="ui-grafico ui-grafico--regua">…</svg></section> */
.ui-plano-conexao { min-width: 0; }
.ui-plano-conexao .ui-pares { gap: var(--esp-3) var(--esp-5); }
.ui-plano-conexao__sinal { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }
.ui-plano-conexao__sinal > .ui-grafico { max-width: 360px; }
.ui-plano-conexao__teste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); }

/* FaturasCliente: faturas em aberto com as três formas de cobrar e a situação.
   <ul class="ui-lista ui-faturas-cliente"><li class="ui-faturas-cliente__item"><div class="ui-faturas-cliente__linha"><span class="ui-lista__texto"><strong>Outubro · vence 10/10/2026</strong><span class="ui-apoio">…</span></span><span class="ui-faturas-cliente__valor">R$ 103,10</span><span class="ui-etiqueta ui-etiqueta--perigo">Vencida</span></div>
     <div class="ui-acoes"><button class="ui-botao ui-botao--secundario" type="button">Copiar Pix</button>…</div></li></ul> */
.ui-faturas-cliente { margin: 0; padding: 0; list-style: none; }
.ui-faturas-cliente__item { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; padding: var(--esp-3) 0; }
.ui-faturas-cliente__linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); }
.ui-faturas-cliente__linha > .ui-lista__texto { flex: 1 1 200px; }
.ui-faturas-cliente__valor { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-faturas-cliente__acoes { justify-content: flex-start; }
.ui-faturas-cliente__pago { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); }

/* AcoesRapidasCliente: ações do equipamento; a que não alcança diz por quê (ui-desligado).
   <ul class="ui-lista ui-acoes-rapidas"><li class="ui-acoes-rapidas__item"><div class="ui-acoes-rapidas__linha"><span class="ui-redondo ui-redondo--marca">…</span>
     <div class="ui-acoes-rapidas__texto"><strong>Reiniciar o roteador</strong><span class="ui-apoio">…</span></div><div class="ui-desligado">…</div></div></li></ul> */
.ui-acoes-rapidas { margin: 0; padding: 0; list-style: none; }
.ui-acoes-rapidas__item { min-width: 0; }
.ui-acoes-rapidas__linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); padding: var(--esp-3) 0; }
.ui-acoes-rapidas__texto { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-acoes-rapidas__linha > .ui-botao,
.ui-acoes-rapidas__linha > .ui-desligado { margin-left: auto; }

/* ChamadosSgp: ocorrências do contrato, cada uma com as OS de campo aninhadas.
   <ul class="ui-chamados__lista"><li class="ui-chamados__item"><div class="ui-chamados__cabeca"><div><p class="ui-chamados__motivo">Sem internet</p><p class="ui-apoio">…</p></div><span class="ui-etiqueta ui-etiqueta--atencao">Aberto</span></div>
     <ul class="ui-chamados__os"><li class="ui-chamados__os-item">…</li></ul></li></ul> */
.ui-chamados { min-width: 0; }
.ui-chamados__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-3); }
.ui-chamados__item { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; padding: var(--esp-3) var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); }
.ui-chamados__cabeca { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--esp-2) var(--esp-3); }
.ui-chamados__cabeca > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-chamados__motivo { font-weight: 700; }
.ui-chamados__os { list-style: none; margin: 0; padding: var(--esp-2) 0 0 var(--esp-4); border-top: 1px dashed var(--linha-media); display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-chamados__os-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); font-size: 14px; color: var(--tinta-2); }
.ui-chamados__os-item > .ui-mono { color: var(--tinta); font-weight: 700; }

/* DetalhesTecnicos: endereço, serviço, login, senha (com permissão), ONU e roteador.
   <dl class="ui-pares ui-detalhes-tec"><div><dt>Login PPPoE</dt><dd class="ui-mono">…</dd></div><div><dt>Senha PPPoE</dt><dd><span class="ui-detalhes-tec__segredo"><span class="ui-mono">••••••••</span><button class="ui-botao ui-botao--secundario" type="button">Mostrar</button></span></dd></div>…</dl>
   Sem permissão: <div class="ui-bloco-restrito ui-bloco-restrito--negado"><div class="ui-bloco-restrito__corpo">…</div></div> */
.ui-detalhes-tec { gap: var(--esp-3) var(--esp-5); }
.ui-detalhes-tec__segredo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); }
.ui-detalhes-tec__restrito { min-width: 0; padding: var(--esp-3) var(--esp-4); }
.ui-detalhes-tec__restrito > .ui-bloco-restrito__corpo { font-size: 14px; }
.ui-detalhes-tec__registro { font-size: 14px; color: var(--tinta-2); }
.ui-detalhes-tec__nowrap { white-space: nowrap; }

/* HistoricoCliente: linha do tempo da ficha com filtro por tipo.
   <section class="ui-cartao ui-historico-cli"><div class="ui-cartao__topo"><h2 class="ui-cartao__titulo">Histórico</h2></div>
     <div class="ui-chips ui-historico-cli__filtros" role="group" aria-label="Tipo de evento"><button class="ui-chip" aria-pressed="true">Tudo <span class="ui-chip__n">24</span></button>…</div>
     <ol class="ui-tempo">…</ol><button class="ui-botao ui-botao--secundario ui-tempo__mais">Ver mais 20</button></section> */
.ui-historico-cli { min-width: 0; }
.ui-historico-cli__filtros { gap: var(--esp-2); }
.ui-historico-cli .ui-tempo__mais { margin-left: 0; align-self: flex-start; }

/* PainelDoDia: o início de cada cargo: saudação, precisa de você, agora, concluídas hoje.
   <section class="ui-painel-dia"><header class="ui-cabecalho">…</header><section class="ui-cartao ui-painel-dia__bloco">…</section>…</section> */
.ui-painel-dia { display: flex; flex-direction: column; gap: var(--esp-5); min-width: 0; }
.ui-painel-dia__bloco { gap: var(--esp-3); }
.ui-painel-dia__bloco > h2 { font-size: 18px; font-weight: 700; }
.ui-painel-dia__agora { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ui-painel-dia__agora > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); padding: var(--esp-2) 0; border-top: 1px solid var(--linha); }
.ui-painel-dia__agora > li:first-child { border-top: 0; }
.ui-painel-dia__hora { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 48px; }
.ui-painel-dia__agora .ui-apoio { margin-left: auto; }
.ui-painel-dia__agora .ui-lista__texto { flex: 1 1 12rem; }
.ui-painel-dia__agora .ui-lista__texto > strong { white-space: normal; }
.ui-painel-dia .ui-acordeao__corpo { display: flex; flex-direction: column; gap: var(--esp-2); }

/* LinhaDecisao: uma decisão do /hoje, com severidade escrita e as ações da linha.
   <div class="ui-decisao ui-decisao--perigo"><span class="ui-redondo ui-redondo--perigo"><svg class="ui-icone ui-icone--p" data-icone="circle-x"></svg></span>
     <div class="ui-decisao__texto"><p class="ui-decisao__titulo"><span class="ui-etiqueta ui-etiqueta--perigo">Crítico</span> Caixa aberto desde ontem</p><p class="ui-apoio">…</p></div>
     <div class="ui-decisao__acoes"><button class="ui-botao ui-botao--primario">Fechar o caixa</button><button class="ui-botao ui-botao--fantasma">Adiar para amanhã</button></div></div> */
.ui-decisao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); min-width: 0; padding: var(--esp-3) var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); }
.ui-decisao--perigo { border-color: var(--perigo-linha); background: var(--perigo-fundo); }
.ui-decisao--atencao { border-color: var(--atencao-linha); background: var(--atencao-fundo); }
.ui-decisao--info { border-color: var(--info-linha); background: var(--info-fundo); }
.ui-decisao__texto { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-decisao__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); font-weight: 700; }
.ui-decisao__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-left: auto; }
.ui-decisao__lista { display: flex; flex-direction: column; gap: var(--esp-3); }

/* VisitaTecnico: visita do técnico com janela, cliente, motivo e as ações do estado.
   <article class="ui-cartao ui-visita"><div class="ui-visita__topo"><span class="ui-visita__janela"><svg class="ui-icone ui-icone--p" data-icone="clock"></svg> 08:00 às 09:30</span><span class="ui-etiqueta ui-etiqueta--info">A caminho</span></div>
     <div class="ui-visita__corpo"><p class="ui-visita__cliente">…</p><p class="ui-visita__endereco">…</p></div><div class="ui-acoes ui-visita__acoes">…</div></article> */
.ui-visita { min-width: 0; gap: var(--esp-3); padding: var(--esp-4); }
.ui-visita__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-3); }
.ui-visita__janela { display: inline-flex; align-items: center; gap: var(--esp-2); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-visita__corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-visita__cliente { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.ui-visita__endereco { color: var(--tinta-2); overflow-wrap: anywhere; }
.ui-visita__acoes { justify-content: flex-start; }
.ui-visita__acoes .ui-botao--largo { flex: 1 1 100%; }
.ui-visita--feita { background: var(--superficie-suave); box-shadow: inset 0 0 0 1px var(--linha); }
.ui-visita__grupo { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
.ui-visita__periodo { display: flex; align-items: baseline; gap: var(--esp-2); font-size: 18px; font-weight: 700; }
.ui-visita__periodo > .ui-apoio { font-size: 14px; font-weight: 400; }

/* CurvaRecebimento: títulos em aberto por faixa de atraso (barras) e a curva do % recebido por dia.
   <section class="ui-cartao ui-curva"><svg class="ui-grafico" viewBox="0 0 360 200" role="img" aria-label="…"><rect class="ui-curva__barra" …/>…</svg>
     <svg class="ui-grafico" viewBox="0 0 360 160" role="img" aria-label="…"><polyline class="ui-grafico__linha" …/><polyline class="ui-curva__anterior" …/></svg></section> */
.ui-curva { min-width: 0; }
.ui-curva__barra { fill: var(--marca); }
.ui-curva__barra--atraso { fill: var(--atencao); }
.ui-curva__barra--vencido { fill: var(--perigo); }
.ui-curva__anterior { fill: none; stroke: var(--tinta-3); stroke-width: 2; stroke-dasharray: 6 5; stroke-linejoin: round; stroke-linecap: round; }
.ui-curva__legenda { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); list-style: none; margin: 0; padding: 0; font-size: 14px; }
.ui-curva__legenda > li { display: inline-flex; align-items: center; gap: var(--esp-2); }
.ui-curva__cor { display: inline-block; flex: none; width: 14px; height: 4px; border-radius: 2px; background: var(--marca); }
.ui-curva__cor--anterior { height: 0; border-top: 2px dashed var(--tinta-3); background: none; }
.ui-curva__tabela { margin: 0; }

/* CrescimentoChurn: entradas para cima, saídas para baixo, e a linha do churn.
   <section class="ui-cartao ui-churn"><svg class="ui-grafico" viewBox="0 0 360 200" role="img" aria-label="…"><rect class="ui-churn__entrada" …/><rect class="ui-churn__saida" …/></svg>
     <svg class="ui-grafico ui-churn__taxa" viewBox="0 0 360 90" role="img" aria-label="…"><polyline class="ui-grafico__linha" …/></svg>
     <ul class="ui-churn__legenda"><li><span class="ui-churn__cor ui-churn__cor--ok"></span>Entradas <strong>44</strong></li>…</ul></section> */
.ui-churn { min-width: 0; }
.ui-churn__entrada { fill: var(--ok); }
.ui-churn__saida { fill: var(--perigo); }
.ui-churn__taxa { max-width: 360px; }
.ui-churn__legenda { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); list-style: none; margin: 0; padding: 0; font-size: 14px; }
.ui-churn__legenda > li { display: inline-flex; align-items: center; gap: var(--esp-2); }
.ui-churn__cor { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 2px; background: var(--ok); }
.ui-churn__cor--saida { background: var(--perigo); }
.ui-churn__cor--taxa { background: var(--marca); height: 4px; border-radius: 2px; width: 14px; }

/* QualidadeDados: problemas do cadastro, cada um com a tendência escrita e a correção.
   <ul class="ui-lista"><li><div class="ui-lista__linha"><span class="ui-qualidade__qtd">38</span><span class="ui-lista__texto"><strong>clientes sem CPF</strong><span class="ui-qualidade__tendencia ui-qualidade__tendencia--perigo">…</span></span><button class="ui-botao ui-botao--secundario">Corrigir agora</button></div></li></ul> */
.ui-qualidade { min-width: 0; }
.ui-qualidade__qtd { flex: none; min-width: 56px; font-size: 22px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ui-qualidade__tendencia { display: inline-flex; align-items: center; gap: var(--esp-1); font-size: 14px; color: var(--tinta-2); }
.ui-qualidade__tendencia--perigo { color: var(--perigo); }
.ui-qualidade__tendencia--ok { color: var(--ok); }
.ui-qualidade__lista > li + li { border-top: 1px solid var(--linha); }
.ui-qualidade__lista .ui-lista__linha { flex-wrap: wrap; }
.ui-qualidade__lista .ui-lista__texto { flex: 1 1 11rem; }
.ui-qualidade__lista .ui-lista__linha > .ui-botao { margin-left: auto; }
.ui-qualidade__tudo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-2); }

/* PlanoDoMes: análise do mês (tom ia enquanto a Íris não foi conferida) e as ações do plano.
   <section class="ui-cartao ui-plano-mes"><div class="ui-cartao__topo"><h2 class="ui-cartao__titulo">Análise de outubro e plano de novembro</h2><span class="ui-etiqueta ui-etiqueta--ia">Rascunho</span></div>
     <div class="ui-aviso ui-aviso--ia" role="status">…</div><div class="ui-plano-mes__analise ui-plano-mes__analise--ia"><p>…</p></div>
     <h3 class="ui-plano-mes__titulo">Ações</h3><ul class="ui-lista">…</ul></section> */
.ui-plano-mes { min-width: 0; }
.ui-plano-mes__analise { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie-suave); }
.ui-plano-mes__analise > p { overflow-wrap: anywhere; }
.ui-plano-mes__analise--ia { background: var(--ia-fundo); border-color: var(--ia-linha); }
.ui-plano-mes__titulo { font-size: 16px; font-weight: 700; }
.ui-plano-mes .ui-lista__linha { min-height: 0; }

/* SupervisorCartao: um supervisor, a equipe, três números com variação, alertas e o botão.
   <section class="ui-cartao ui-supervisor"><div class="ui-cartao__topo"><div class="ui-supervisor__quem"><span class="ui-avatar ui-avatar--quadrado">JL</span>…</div></div>
     <ul class="ui-supervisor__numeros"><li><p class="ui-supervisor__valor">412</p><p class="ui-apoio">atendimentos</p></li>…</ul>
     <div class="ui-supervisor__alertas"><div class="ui-aviso ui-aviso--atencao" role="status">…</div></div></section> */
.ui-supervisor { min-width: 0; }
.ui-supervisor__quem { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; }
.ui-supervisor__quem > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-supervisor__equipe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.ui-supervisor__numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5rem), 1fr)); gap: var(--esp-3); list-style: none; margin: 0; padding: 0; }
.ui-supervisor__numeros > li { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--esp-3); border-radius: var(--raio-m); background: var(--superficie-suave); }
.ui-supervisor__valor { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-supervisor__alta { display: inline-flex; align-items: center; gap: 2px; color: var(--ok); font-weight: 700; }
.ui-supervisor__alertas { display: flex; flex-direction: column; gap: var(--esp-2); }

/* MetasEquipe: metas do dia por pessoa, com a barra, a situação escrita e o destaque de quem bateu.
   <section class="ui-cartao ui-metas"><ul class="ui-metas__lista"><li class="ui-metas__item"><div class="ui-progresso ui-progresso--ok">…</div><span class="ui-etiqueta ui-etiqueta--ok">Batida</span></li></ul></section> */
.ui-metas { min-width: 0; }
.ui-metas__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-4); }
.ui-metas__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); min-width: 0; }
.ui-metas__item > .ui-progresso { flex: 1 1 200px; min-width: 0; }
.ui-metas__item--batida { padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-m); background: var(--ok-fundo); }

/* LacosDeFundo: as tarefas automáticas, a última execução, o resultado escrito e rodar agora.
   <div class="ui-tabela"><table><thead><tr><th>Laço</th><th>Última</th>…</tr></thead><tbody><tr><td><span class="ui-tabela__principal">…</span></td><td>…</td>…</tr></tbody></table></div> */
.ui-lacos { min-width: 0; }
.ui-lacos__nome { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-lacos__resultado { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ui-lacos__erro { font-size: 14px; color: var(--perigo); }

/* TemposRotas: tempo por rota (p50, p95, pedidos) e as consultas lentas em ui-mono.
   <section class="ui-cartao ui-tempos"><div class="ui-tabela"><table>…</table></div><ul class="ui-lista">…<code class="ui-mono">…</code>…</ul></section> */
.ui-tempos { min-width: 0; }
.ui-tempos__sql { display: block; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; white-space: normal; color: var(--tinta); }
.ui-tempos .ui-lista__linha { align-items: flex-start; }
.ui-tempos__nota { font-size: 14px; color: var(--tinta-2); }

/* Provedor: rede e campo */

/* DiagramaRede · a rede da casa. Desenho no computador; no celular (contêiner abaixo de 480 px) vira a cadeia.
   <div class="ui-rede"><svg class="ui-grafico ui-rede__diagrama" viewBox="0 0 540 150" role="img" aria-label="…">…</svg>
     <ol class="ui-rede__cadeia"><li class="ui-rede__elo ui-rede__elo--liga-atencao">…</li></ol></div> */
.ui-rede { container-type: inline-size; min-width: 0; }
.ui-rede .ui-rede__diagrama { max-width: none; }
.ui-rede__cadeia { display: none; }
@container (max-width: 480px) {
  .ui-rede__diagrama { display: none; }
  .ui-rede__cadeia { display: flex; flex-direction: column; }
}
.ui-rede__no { color: var(--tinta-2); }
.ui-rede__no circle { fill: var(--superficie); stroke: var(--linha-media); stroke-width: 2.5; }
.ui-rede__no--ok { color: var(--ok); }
.ui-rede__no--ok circle { fill: var(--ok-fundo); stroke: var(--ok); }
.ui-rede__no--atencao { color: var(--atencao); }
.ui-rede__no--atencao circle { fill: var(--atencao-fundo); stroke: var(--atencao); }
.ui-rede__no--fora { color: var(--perigo); }
.ui-rede__no--fora circle { fill: var(--perigo-fundo); stroke: var(--perigo); }
.ui-rede__no--neutro circle { fill: var(--superficie-suave); stroke-dasharray: 4 3; }
.ui-rede text.ui-rede__nome { fill: var(--tinta); font-weight: 700; }
.ui-rede text.ui-rede__estado { fill: var(--tinta-2); }
.ui-rede__no--ok text.ui-rede__estado { fill: var(--ok); }
.ui-rede__no--atencao text.ui-rede__estado { fill: var(--atencao); }
.ui-rede__no--fora text.ui-rede__estado { fill: var(--perigo); }
.ui-rede__liga { fill: none; stroke: var(--ok); stroke-width: 3; stroke-linecap: round; }
.ui-rede__liga--atencao { stroke: var(--atencao); stroke-dasharray: 7 6; }
.ui-rede__liga--ruim { stroke: var(--perigo); stroke-dasharray: 7 6; }
.ui-rede__pacote { fill: var(--marca); }
@media (prefers-reduced-motion: no-preference) {
  .ui-rede__pacote { animation: ui-rede-anda 2.4s linear infinite; }
}
@keyframes ui-rede-anda {
  0% { transform: translateX(0); opacity: 0; }
  15%, 85% { opacity: 1; }
  100% { transform: translateX(38px); opacity: 0; }
}

/* DiagramaRede · cadeia do celular: um elo por linha, com a ligação para o próximo.
   <li class="ui-rede__elo"><span class="ui-redondo ui-redondo--ok"><svg class="ui-icone ui-icone--p" data-icone="box"></svg></span>
     <div class="ui-rede__elo-texto"><strong>CTO-07</strong><span class="ui-rede__elo-valor">16 portas</span></div>
     <span class="ui-etiqueta ui-etiqueta--ok">ok</span></li> */
.ui-rede__elo { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--esp-3); padding: var(--esp-3) 0; min-width: 0; }
.ui-rede__elo::after { content: ""; position: absolute; left: 19px; top: 52px; bottom: -12px; width: 2px; background: var(--ok); }
.ui-rede__elo:last-child::after { display: none; }
.ui-rede__elo--liga-atencao::after { width: 0; background: none; border-left: 2px dashed var(--atencao); }
.ui-rede__elo--liga-ruim::after { width: 0; background: none; border-left: 2px dashed var(--perigo); }
.ui-rede__elo-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-rede__elo-texto > strong { overflow-wrap: anywhere; }
.ui-rede__elo-valor { font-size: 14px; line-height: 1.45; color: var(--tinta-2); }

/* SinalOnu · RX da ONU nas últimas 24 h: o valor grande com a etiqueta de faixa, e a série sobre a faixa boa.
   <section class="ui-sinal-onu"><div class="ui-sinal-onu__topo"><p class="ui-sinal-onu__titulo">RX da ONU · 24 h</p></div>
     <div class="ui-sinal-onu__corpo"><div class="ui-sinal">…</div><svg class="ui-grafico ui-sinal-onu__serie" viewBox="0 0 360 120" role="img" aria-label="…">…</svg></div></section> */
.ui-sinal-onu { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; padding: var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-g); background: var(--superficie); box-shadow: var(--sombra); }
.ui-sinal-onu__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); }
.ui-sinal-onu__titulo { font-size: 16px; line-height: 1.35; font-weight: 700; }
.ui-sinal-onu__corpo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-4) var(--esp-5); }
.ui-sinal-onu__corpo > .ui-sinal { flex: none; }
.ui-sinal-onu__serie { flex: 1 1 240px; min-width: 0; max-width: 360px; }

/* SinalFraco · relatório de sinal fraco por OLT/PON → CTO, com a lista de clientes de cada grupo.
   <details class="ui-acordeao ui-sinal-fraco__grupo" open><summary class="ui-acordeao__titulo"><span class="ui-sinal-fraco__cabeca"><strong>…</strong><span class="ui-apoio">6 clientes</span></span><span class="ui-etiqueta ui-etiqueta--perigo">pior: −28,9 dBm</span><svg class="ui-icone" data-icone="chevron-down"></svg></summary>
     <div class="ui-acordeao__corpo"><ul class="ui-lista">…</ul></div></details> */
.ui-sinal-fraco { display: flex; flex-direction: column; min-width: 0; }
.ui-sinal-fraco__grupo[open] > .ui-acordeao__corpo { padding-bottom: var(--esp-3); }
.ui-sinal-fraco__cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--esp-3); flex: 1 1 200px; min-width: 0; }
.ui-sinal-fraco__rx { flex: none; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-sinal-fraco__acao { display: flex; justify-content: flex-end; padding-top: var(--esp-2); }

/* CartaoEquipamento · o roteador no ACS: alcance, dados, operações por risco e a operação pendente.
   <section class="ui-cartao ui-equipamento"><div class="ui-cartao__topo"><h2 class="ui-cartao__titulo">ZTE F670L</h2><span class="ui-etiqueta ui-etiqueta--ok">tempo real</span></div>
     <dl class="ui-pares ui-equipamento__dados">…</dl><div class="ui-acoes">…</div></section> */
.ui-equipamento { container-type: inline-size; }
.ui-equipamento__dados { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.ui-equipamento__grupo { display: flex; flex-direction: column; gap: var(--esp-2); padding-top: var(--esp-3); border-top: 1px solid var(--linha); }
.ui-equipamento__rotulo { font-size: 14px; font-weight: 700; color: var(--tinta-2); }
.ui-equipamento__pendente { display: flex; align-items: center; gap: var(--esp-2); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--atencao-linha); border-radius: var(--raio-m); background: var(--atencao-fundo); color: var(--tinta); }
.ui-equipamento__pendente > .ui-icone { color: var(--atencao); }
.ui-equipamento__teste { font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.ui-equipamento__teste > strong { color: var(--tinta); }

/* CatalogoEquipamentos · matriz modelo × operação, com a célula dizendo o estado por texto e ícone.
   <div class="ui-tabela" role="region" aria-label="Equipamentos e operações" tabindex="0"><table>…<td><span class="ui-catalogo-eq__celula ui-catalogo-eq__celula--ok"><svg class="ui-icone ui-icone--p" data-icone="circle-check"></svg> funciona</span></td>…</table></div> */
.ui-catalogo-eq { min-width: 0; }
.ui-catalogo-eq__celula { display: inline-flex; align-items: center; gap: var(--esp-1); font-size: 14px; font-weight: 700; line-height: 1.3; }
.ui-catalogo-eq__celula--ok { color: var(--ok); }
.ui-catalogo-eq__celula--neutra { color: var(--tinta-2); }
.ui-catalogo-eq__celula--perigo { color: var(--perigo); }
.ui-tabela--cartoes .ui-catalogo-eq tbody th { display: block; padding: 0 0 var(--esp-2); border-bottom: 1px solid var(--linha); }

/* HistoricoTestes · os testes de conexão do contrato, do mais novo para o mais antigo, com a origem.
   <section class="ui-cartao ui-diagnostico"><div class="ui-tabela" role="region" aria-label="Testes deste contrato" tabindex="0"><table>…<tr class="ui-diagnostico__linha--falhou">…</tr></table></div></section> */
.ui-diagnostico { min-width: 0; }
.ui-diagnostico .ui-tabela--cartoes td { white-space: normal; overflow-wrap: anywhere; }
.ui-diagnostico__valor { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-diagnostico__linha--falhou td { background: var(--perigo-fundo); }
.ui-diagnostico__falha { color: var(--perigo); font-weight: 700; }
.ui-diagnostico__vazio { display: flex; flex-direction: column; align-items: center; }

/* CartaoQueda · uma queda: vários clientes sem sinal na mesma PON/CTO, com a escada de toques e as ações do estado.
   <section class="ui-cartao ui-queda"><div class="ui-cartao__topo"><h2 class="ui-cartao__titulo">Queda na PON 3 · CTO-07</h2>…</div>
     <dl class="ui-pares">…</dl><ol class="ui-passos ui-queda__escada">…</ol><div class="ui-acoes ui-acoes--fim">…</div></section> */
.ui-queda { min-width: 0; }
.ui-queda__escada { padding: var(--esp-2) 0; }
.ui-queda__escada .ui-passos__nome { font-size: 14px; }
.ui-queda__duracao { font-weight: 700; color: var(--ok); }

/* ConclusaoDiagnostico · a análise do teste em frases: o que foi medido, a causa provável e o próximo passo.
   <section class="ui-cartao ui-diagnostico-conclusao"><p class="ui-diagnostico-conclusao__medido">…</p>
     <div class="ui-aviso ui-aviso--atencao"><div class="ui-aviso__corpo"><p class="ui-diagnostico-conclusao__causa">…</p></div><div class="ui-acoes">…</div></div></section> */
.ui-diagnostico-conclusao { gap: var(--esp-3); min-width: 0; }
.ui-diagnostico-conclusao__medido { font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.ui-diagnostico-conclusao__causa { font-size: 16px; line-height: 1.45; font-weight: 700; overflow-wrap: anywhere; }
.ui-diagnostico-conclusao__passo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.ui-diagnostico-conclusao__origem { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }

/* TesteVelocidade · a página pública do teste de conexão, em celular: início, medindo e resultado.
   <section class="ui-velocidade"><header class="ui-velocidade__marca"><span class="ui-velocidade__logo">W</span>WNEW</header>…</section> */
.ui-velocidade { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.ui-velocidade__marca { display: flex; align-items: center; gap: var(--esp-2); font-size: 16px; font-weight: 700; }
.ui-velocidade__logo { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--raio-m); background: var(--marca); color: var(--sobre-marca); font-size: 18px; font-weight: 700; }
.ui-velocidade__medidor { display: flex; flex-direction: column; align-items: center; gap: var(--esp-1); padding: var(--esp-6) var(--esp-4); border-radius: var(--raio-g); background: var(--superficie-suave); text-align: center; }
.ui-velocidade__valor { font-size: 32px; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-velocidade__unidade { font-size: 14px; color: var(--tinta-2); }
.ui-velocidade__chips { display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-velocidade__chips > .ui-chips { gap: var(--esp-2); }

/* ReguaCobranca · a régua por dias de atraso: linha do tempo com canal e modelo; a etapa da Anatel não sai.
   <div class="ui-regua"><ol class="ui-regua__trilho" aria-label="Etapas da régua"><li class="ui-regua__etapa" aria-current="step">…</li></ol></div> */
.ui-regua { container-type: inline-size; display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.ui-regua__trilho { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: var(--esp-2); }
.ui-regua__canais { display: flex; flex-wrap: wrap; gap: var(--esp-1); }
.ui-regua__modelo { font-family: var(--font-mono); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; color: var(--tinta-2); }
.ui-regua__etapa { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-2); min-width: 0; padding: var(--esp-2); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie-suave); overflow-wrap: anywhere; }
.ui-regua__etapa > .ui-etiqueta { min-height: 24px; padding: 2px var(--esp-1); font-size: 13px; }
.ui-regua .ui-regua__canais > .ui-etiqueta { min-height: 24px; padding: 2px var(--esp-1); font-size: 13px; }
.ui-regua__etapa[aria-current="step"],
.ui-regua__etapa--aberta { border-color: var(--marca); background: var(--marca-suave); }
.ui-regua__etapa--obrigatoria { border-color: var(--info-linha); }
.ui-regua__dia { font-size: 18px; line-height: 1.2; font-weight: 700; }
.ui-regua__nome { font-size: 14px; line-height: 1.3; font-weight: 700; }
.ui-regua__texto { font-size: 14px; line-height: 1.45; color: var(--tinta-2); overflow-wrap: anywhere; }
.ui-regua__trava { display: flex; align-items: flex-start; gap: var(--esp-1); font-size: 14px; line-height: 1.4; font-weight: 700; color: var(--info); }
.ui-regua__editor { display: flex; flex-direction: column; gap: var(--esp-4); padding: var(--esp-4); border: 1px solid var(--marca-linha); border-radius: var(--raio-m); background: var(--superficie); }
@container (max-width: 480px) {
  .ui-regua__trilho { grid-template-columns: minmax(0, 1fr); }
}

/* HubCampo · início do técnico, em celular: busca no topo, blocos de contagem e a próxima visita.
   <div class="ui-campo-hub"><header class="ui-cabecalho">…</header><div class="ui-busca">…</div>
     <nav class="ui-campo-hub__grade" aria-label="Ferramentas"><a class="ui-campo-hub__bloco" href="…"><span class="ui-redondo ui-redondo--marca">…</span><span class="ui-campo-hub__n">3</span>…</a></nav></div> */
.ui-campo-hub { container-type: inline-size; display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.ui-campo-hub__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); }
@container (min-width: 560px) {
  .ui-campo-hub__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ui-campo-hub__bloco { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-2); min-width: 0; min-height: 128px; padding: var(--esp-4); border-radius: var(--raio-g); background: var(--superficie); box-shadow: var(--sombra); color: var(--tinta); text-decoration: none; }
.ui-campo-hub__bloco:hover { box-shadow: var(--sombra), 0 0 0 2px var(--linha-media); }
.ui-campo-hub__bloco--pendente .ui-campo-hub__n { color: var(--atencao); }
.ui-campo-hub__n { font-size: 28px; line-height: 1.2; font-weight: 700; }
.ui-campo-hub__titulo { font-size: 16px; line-height: 1.3; font-weight: 700; }
.ui-campo-hub__apoio { font-size: 14px; line-height: 1.4; color: var(--tinta-2); }

/* VistoriaCto · o contador de portas que fecha ao vivo: a grade de portas, os splitters e o total.
   <div class="ui-cto"><ol class="ui-cto__portas" aria-label="Portas da CTO-07"><li class="ui-cto__porta ui-cto__porta--ocupada"><span class="ui-cto__num">1</span>…</li></ol>
     <p class="ui-cto__soma">…</p></div> */
.ui-cto { container-type: inline-size; display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.ui-cto__portas { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--esp-2); }
@container (max-width: 480px) {
  .ui-cto__portas { grid-template-columns: repeat(4, 56px); }
}
.ui-cto__porta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--alvo); padding: var(--esp-1); border: 1px solid var(--linha-media); border-radius: var(--raio-m); background: var(--superficie); color: var(--tinta-2); }
.ui-cto__porta--ocupada { background: var(--marca-suave); border-color: var(--marca-linha); color: var(--marca); }
.ui-cto__porta--livre { border-style: dashed; border-color: var(--linha-forte); }
.ui-cto__porta--defeito { background: var(--perigo-fundo); border-color: var(--perigo-linha); color: var(--perigo); }
.ui-cto__num { font-size: 13px; line-height: 1; font-weight: 700; color: var(--tinta); }
.ui-cto__legenda { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.ui-cto__soma { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); font-size: 16px; font-weight: 700; }
.ui-cto__splitters { display: flex; flex-wrap: wrap; gap: var(--esp-2); }

/* ConferenciaAparelho · o técnico confere o serial lido com o do contrato: bate, não bate ou não achado.
   <section class="ui-cartao ui-conferencia-ap"><div class="ui-conferencia-ap__comparacao"><div class="ui-campo">…</div>…</div>
     <div class="ui-aviso ui-aviso--ok" role="status">…</div></section> */
.ui-conferencia-ap { min-width: 0; }
.ui-conferencia-ap__comparacao { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--esp-4); }
.ui-conferencia-ap__foto { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-3); border: 1px dashed var(--linha-forte); border-radius: var(--raio-m); background: var(--superficie-suave); font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.ui-conferencia-ap__foto > .ui-icone { color: var(--tinta-2); }
.ui-conferencia-ap__valor { font-family: var(--font-mono); font-size: 14px; font-weight: 700; overflow-wrap: anywhere; color: var(--tinta); }

/* AtivacoesSemDono · aparelho que o ACS viu ligar sem contrato ligado: serial, visto há quanto e a ação.
   <div class="ui-ativacao"><ul class="ui-lista"><li class="ui-ativacao__item"><div class="ui-ativacao__dados"><span class="ui-ativacao__serial">…</span>…</div><a class="ui-botao ui-botao--secundario">Ligar a um contrato</a></li></ul></div> */
.ui-ativacao { container-type: inline-size; min-width: 0; }
.ui-ativacao__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--esp-3); padding: var(--esp-3) 0; min-width: 0; }
.ui-ativacao__dados { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-ativacao__serial { font-family: var(--font-mono); font-size: 14px; font-weight: 700; overflow-wrap: anywhere; color: var(--tinta); }
.ui-ativacao__linha { font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
@container (max-width: 400px) {
  .ui-ativacao__item { grid-template-columns: minmax(0, 1fr); }
}

/* EstoqueComodato · o estoque do técnico e os aparelhos em comodato, por situação.
   <div class="ui-segmentos" role="group" aria-label="Situação"><button class="ui-segmentos__item" aria-pressed="true">No cliente</button>…</div>
   <ul class="ui-lista"><li class="ui-comodato__linha">…</li></ul> */
.ui-comodato { container-type: inline-size; display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
.ui-comodato__linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--esp-3); min-width: 0; padding: var(--esp-3) 0; }
.ui-comodato__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-comodato__serial { font-family: var(--font-mono); font-size: 14px; font-weight: 700; overflow-wrap: anywhere; color: var(--tinta); }
.ui-comodato__cliente { font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
@container (max-width: 400px) {
  .ui-comodato__linha { grid-template-columns: minmax(0, 1fr); }
}

/* Provedor: cobrança, contratos e integrações */

/* BuscaClientes: busca de clientes com a origem (espelho ou SGP ao vivo). <section class="ui-cartao ui-busca-cli"><div class="ui-busca-cli__origem"><span class="ui-etiqueta ui-etiqueta--neutra">Espelho de 09:40</span><button class="ui-botao ui-botao--fantasma">Buscar ao vivo</button></div><div class="ui-busca-linha">…</div><ul class="ui-busca-cli__lista"><li><a class="ui-busca-cli__item" href="…"><span class="ui-busca-cli__nome"><strong>Sérgio Mendes</strong></span><span class="ui-busca-cli__dados">…</span></a></li></ul></section> */
.ui-busca-cli { gap: var(--esp-3); min-width: 0; }
.ui-busca-cli__origem { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); }
.ui-busca-cli__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--linha); border-radius: var(--raio-m); overflow: hidden; }
.ui-busca-cli__item { display: flex; flex-direction: column; gap: 2px; min-height: var(--alvo-toque); padding: var(--esp-3) var(--esp-4); color: inherit; text-decoration: none; min-width: 0; }
.ui-busca-cli__item + .ui-busca-cli__item { border-top: 1px solid var(--linha); }
.ui-busca-cli__item:hover { background: var(--superficie-suave); }
.ui-busca-cli__nome { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--esp-1) var(--esp-2); min-width: 0; overflow-wrap: anywhere; }
.ui-busca-cli__dados { font-size: 14px; color: var(--tinta-2); overflow-wrap: anywhere; }
.ui-busca-cli__sem { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-2); padding: var(--esp-3) 0 0; }

/* FichaRestrita: ficha sem valores, para quem não vê dinheiro. <section class="ui-cartao ui-ficha-restrita"><div class="ui-aviso ui-aviso--info">…</div><header class="ui-ficha-restrita__cabeca"><div><h2 class="ui-cartao__titulo">Sérgio Mendes</h2></div></header><section class="ui-ficha-restrita__contrato">…</section></section> */
.ui-ficha-restrita { gap: var(--esp-4); min-width: 0; }
.ui-ficha-restrita__cabeca { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--esp-2) var(--esp-3); }
.ui-ficha-restrita__cabeca > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-ficha-restrita__contrato { display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie-suave); min-width: 0; }
.ui-ficha-restrita__contrato-topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.ui-ficha-restrita__restrito { display: inline-flex; align-items: center; gap: var(--esp-1); color: var(--tinta-2); }
.ui-ficha-restrita__mudo { margin: 0; display: flex; align-items: flex-start; gap: var(--esp-2); font-size: 14px; color: var(--tinta-2); }

/* OsAbertas: as OS em aberto do cliente, com o botão de abrir uma nova. <section class="ui-cartao ui-os-abertas"><div class="ui-cartao__topo"><h2 class="ui-cartao__titulo">OS em aberto</h2><button class="ui-botao ui-botao--primario">Abrir OS</button></div><ol class="ui-os-abertas__lista"><li class="ui-os-abertas__item">…</li></ol></section> */
.ui-os-abertas { gap: var(--esp-3); min-width: 0; }
.ui-os-abertas__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-os-abertas__item { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); min-width: 0; }
.ui-os-abertas__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); }
.ui-os-abertas__motivo { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.ui-os-abertas__dados { margin: 0; }

/* FilaCobrancaDia: a fila do dia, ordenada pela régua, com o próximo toque de cada devedor. <section class="ui-cartao ui-fila-cobranca"><div class="ui-kpis">…</div><div class="ui-tabela"><table>…</table></div></section> */
.ui-fila-cobranca { gap: var(--esp-4); min-width: 0; container-type: inline-size; }
@container (min-width: 480px) {
  .ui-fila-cobranca .ui-kpis__fila { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ui-fila-cobranca__proximo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-1); min-width: 0; }
.ui-fila-cobranca__atraso { white-space: nowrap; }
.ui-fila-cobranca__proximo .ui-botao { max-width: 100%; white-space: normal; text-align: left; }

/* DebitosContrato: os títulos de um contrato, com seleção e total. <section class="ui-cartao ui-debitos"><div class="ui-tabela"><table>…</table></div><div class="ui-lote">…</div><div class="ui-total">…</div></section> */
.ui-debitos { gap: var(--esp-3); min-width: 0; }
.ui-debitos__valor { white-space: nowrap; }
.ui-debitos .ui-total { width: 100%; max-width: 24rem; margin-left: auto; }
.ui-debitos__lote { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); }

/* HistoricoToques: os toques da régua num contrato, em linha do tempo. <section class="ui-cartao ui-toques"><ol class="ui-tempo">…</ol></section> */
.ui-toques { min-width: 0; }
.ui-toques .ui-tempo__corpo { gap: var(--esp-1); }
.ui-toques__resultado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.ui-toques__quem { margin: 0; font-size: 14px; color: var(--tinta-3); }

/* FichaContrato: o contrato em blocos; cada bloco edita numa gaveta. <div class="ui-contrato"><header class="ui-contrato__cabeca">…</header><div class="ui-grade"><section class="ui-cartao ui-contrato__bloco">…</section></div></div> */
.ui-contrato { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.ui-contrato__cabeca { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--esp-2) var(--esp-3); }
.ui-contrato__cabeca > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-contrato__bloco { min-width: 0; }
.ui-contrato__bloco .ui-cartao__topo { flex-wrap: wrap; }
.ui-contrato__politica { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.ui-contrato__progresso { display: flex; flex-direction: column; gap: var(--esp-2); }

/* NovoContrato: cadastro em passos com trava; o resumo mostra o que já foi escolhido. <section class="ui-cartao ui-novo-contrato"><ol class="ui-passos">…</ol><div class="ui-novo-contrato__corpo"><div class="ui-novo-contrato__caixa">…</div></div></section> */
.ui-novo-contrato { gap: var(--esp-4); min-width: 0; container-type: inline-size; }
@container (max-width: 480px) {
  .ui-novo-contrato > .ui-passos { overflow-x: auto; }
  .ui-novo-contrato > .ui-passos > .ui-passos__passo { flex: 0 0 6.5rem; }
}
.ui-novo-contrato__corpo { container-type: inline-size; min-width: 0; }
.ui-novo-contrato__caixa { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
@container (min-width: 480px) {
  .ui-novo-contrato__caixa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 14rem); align-items: start; gap: var(--esp-5); }
}
.ui-novo-contrato__form { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
.ui-novo-contrato__resumo { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-4); border-radius: var(--raio-m); background: var(--superficie-suave); min-width: 0; }
.ui-novo-contrato__resumo .ui-pares > div { min-width: 0; }
.ui-novo-contrato__passo-fim { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--esp-2); }

/* SegundaVia: escolher o título, avisar antes do protocolo, enviar por WhatsApp ou e-mail. <section class="ui-cartao ui-segunda-via"><div class="ui-aviso ui-aviso--atencao">…</div><div class="ui-escolhas">…</div><div class="ui-segmentos">…</div></section> */
.ui-segunda-via { gap: var(--esp-4); min-width: 0; }
.ui-segunda-via__titulos { display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-segunda-via__titulos .ui-escolha { min-width: 0; }
.ui-segunda-via__protocolo { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }

/* ChamadoDetalhe: o chamado, com a conversa, a OS ligada e as ações. <section class="ui-cartao ui-chamado"><header class="ui-chamado__cabeca"><div><h2 class="ui-cartao__titulo">…</h2></div><span class="ui-etiqueta">…</span></header><div class="ui-chamado__os">…</div><div class="ui-conversa">…</div><div class="ui-acoes">…</div></section> */
.ui-chamado { gap: var(--esp-4); min-width: 0; }
.ui-chamado__cabeca { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--esp-2) var(--esp-3); }
.ui-chamado__cabeca > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.ui-chamado__os { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-m); background: var(--superficie-suave); font-size: 14px; }
.ui-chamado__conversa { min-width: 0; }
.ui-chamado .ui-conversa .ui-balao { max-width: 85%; min-width: 0; overflow-wrap: anywhere; }

/* SuportePublico: a página que o cliente abre pelo link, celular primeiro, com a marca da empresa. <article class="ui-suporte-pub"><header class="ui-suporte-pub__marca"><span class="ui-suporte-pub__logo">W</span>WNEW</header><h1 class="ui-suporte-pub__titulo">…</h1><div class="ui-suporte-pub__acoes">…</div></article> */
.ui-suporte-pub { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.ui-suporte-pub__marca { display: flex; align-items: center; gap: var(--esp-2); font-weight: 700; }
.ui-suporte-pub__logo { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: var(--raio-p); background: var(--marca); color: var(--sobre-marca); font-weight: 700; }
.ui-suporte-pub__titulo { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 700; overflow-wrap: anywhere; }
.ui-suporte-pub__apoio { margin: 0; font-size: 14px; color: var(--tinta-2); overflow-wrap: anywhere; }
.ui-suporte-pub__acoes { display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-suporte-pub__acoes .ui-botao { width: 100%; }
.ui-suporte-pub .ui-vazio { padding: var(--esp-6) 0; }

/* CartaoIntegracao: o cartão de uma integração na grade por categoria. <article class="ui-cartao ui-integracao"><div class="ui-cartao__topo"><h3 class="ui-cartao__titulo">SGP</h3><span class="ui-etiqueta ui-etiqueta--ok">Ligada</span></div><p class="ui-integracao__descricao">…</p><dl class="ui-pares ui-pares--linha">…</dl><div class="ui-acoes">…</div></article> */
.ui-integracao { gap: var(--esp-3); min-width: 0; }
.ui-integracao__categoria { margin: 0; font-size: 14px; font-weight: 700; color: var(--tinta-2); }
.ui-integracao__descricao { margin: 0; color: var(--tinta-2); overflow-wrap: anywhere; }
.ui-integracao__teste { margin: 0; font-size: 14px; color: var(--tinta-2); overflow-wrap: anywhere; }
.ui-integracao__teste--erro { color: var(--perigo); }
.ui-integracao .ui-cartao__topo { flex-wrap: wrap; }
.ui-integracao--desligada { background: var(--superficie-suave); box-shadow: inset 0 0 0 1px var(--linha); }

/* LinhaConexao: uma conexão de uma integração, com teste, origem e ações. <div class="ui-conexao"><div class="ui-conexao__cabeca"><div class="ui-conexao__nome"><strong>SGP · Definitiva</strong><span class="ui-etiqueta ui-etiqueta--ok">Ativa</span></div></div><p class="ui-conexao__teste">…</p><div class="ui-conexao__acoes"><button class="ui-botao ui-botao--secundario">Testar</button><button class="ui-botao ui-botao--perigo">Desligar</button></div></div> */
.ui-conexao { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); min-width: 0; }
.ui-conexao--desligada { background: var(--superficie-suave); }
.ui-conexao__cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); min-width: 0; }
.ui-conexao__nome { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); min-width: 0; overflow-wrap: anywhere; }
.ui-conexao__teste { margin: 0; display: flex; align-items: flex-start; gap: var(--esp-1); font-size: 14px; color: var(--tinta-2); overflow-wrap: anywhere; }
.ui-conexao__teste--erro { color: var(--perigo); }
.ui-conexao__origem { margin: 0; font-size: 14px; color: var(--tinta-3); }
.ui-conexao__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }

/* WhatsAppNumeros: os números da empresa, cada um com a sessão, a qualidade e o limite. <ul class="ui-whats-numeros"><li class="ui-cartao ui-whats-numeros__item">…</li></ul> */
.ui-whats-numeros { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
.ui-whats-numeros__item { min-width: 0; }
.ui-whats-numeros__cabeca { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--esp-2) var(--esp-3); }
.ui-whats-numeros__cabeca > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.ui-whats-numeros__sessao { margin: 0; font-size: 14px; color: var(--tinta-2); }
.ui-whats-numeros .ui-pares { margin: 0; }
.ui-whats-numeros .ui-pares--linha > div { flex-wrap: wrap; align-items: center; }
.ui-whats-numeros .ui-pares dd { min-width: 0; display: flex; justify-content: flex-end; }
.ui-whats-numeros .ui-etiqueta { height: auto; min-height: 28px; white-space: normal; text-align: left; line-height: 1.3; }

/* SimulacaoConversa: a lista das simulações e a conversa de uma, com o cliente simulado em tom ia. <section class="ui-cartao ui-simulacao"><ul class="ui-simulacao__lista"><li class="ui-simulacao__linha">…</li></ul><div class="ui-conversa">…</div></section> */
.ui-simulacao { gap: var(--esp-4); min-width: 0; }
.ui-simulacao__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--linha); border-radius: var(--raio-m); overflow: hidden; }
.ui-simulacao__linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-3); min-height: var(--alvo-toque); padding: var(--esp-2) var(--esp-3); min-width: 0; }
.ui-simulacao__linha + .ui-simulacao__linha { border-top: 1px solid var(--linha); }
.ui-simulacao__linha--aberta { background: var(--superficie-suave); }
.ui-simulacao__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.ui-simulacao__cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); min-width: 0; }
.ui-simulacao__conversa { min-width: 0; }
.ui-simulacao .ui-balao { max-width: 80%; min-width: 0; overflow-wrap: anywhere; }

/* Consulta vet e odonto */

/* ConsultaPagina
   <div class="ui-consulta"><header class="ui-consulta__topo">…</header><div class="ui-consulta__grade"><div class="ui-consulta__principal">…</div><aside class="ui-consulta__lado">…</aside></div></div> */
.ui-consulta { container-type: inline-size; display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.ui-consulta__topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); }
.ui-consulta__titulo { flex: 1 1 200px; min-width: 0; font-size: 28px; line-height: 1.2; font-weight: 700; }
.ui-consulta__grade { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--esp-4); align-items: start; }
@container (max-width: 760px) { .ui-consulta__grade { grid-template-columns: minmax(0, 1fr); } }
.ui-consulta__principal, .ui-consulta__lado { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.ui-consulta__bloco-resumo { display: flex; flex-direction: column; gap: var(--esp-1); }
.ui-consulta__bloco-resumo > strong { font-size: 16px; }

/* PacienteCabecalho
   <section class="ui-paciente"><div class="ui-paciente__id"><span class="ui-redondo ui-redondo--g ui-redondo--marca">…</span><div>…</div></div><div class="ui-paciente__alertas">…</div></section> */
.ui-paciente { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
.ui-paciente__id { display: flex; align-items: center; gap: var(--esp-4); min-width: 0; }
.ui-paciente__id > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-paciente__nome { font-size: 28px; line-height: 1.2; font-weight: 700; overflow-wrap: anywhere; }
.ui-paciente__dados { font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.ui-paciente__tutor { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); font-size: 16px; }
.ui-paciente__alertas { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.ui-paciente--sem-pet .ui-paciente__nome { font-size: 22px; }
.ui-paciente__alergia { align-self: flex-start; }

/* BarraEtapas
   <nav class="ui-etapas" aria-label="Etapas da consulta"><ol class="ui-etapas__lista"><li class="ui-etapas__item"><a class="ui-etapas__link" href="#anamnese" aria-current="step">…</a></li></ol></nav> */
.ui-etapas { min-width: 0; border-bottom: 1px solid var(--linha); background: var(--superficie); }
.ui-etapas__lista { display: flex; gap: var(--esp-1); overflow-x: auto; scrollbar-width: none; padding: var(--esp-2) 0; }
.ui-etapas__lista::-webkit-scrollbar { display: none; }
.ui-etapas__item { flex: none; }
.ui-etapas__link {
  display: inline-flex; align-items: center; gap: var(--esp-2); min-height: var(--alvo); padding: 0 var(--esp-3);
  border: 1px solid var(--linha-media); border-radius: var(--raio-pilula); background: var(--superficie);
  color: var(--tinta-2); font-weight: 700; text-decoration: none; white-space: nowrap;
}
.ui-etapas__link:hover { color: var(--tinta); border-color: var(--linha-forte); }
.ui-etapas__link[aria-current="step"] { background: var(--marca-suave); border-color: var(--marca); color: var(--marca); }
.ui-etapas__link.esta-feita { color: var(--ok); border-color: var(--ok-linha); }
.ui-etapas__link.esta-pulada { color: var(--tinta-2); border-style: dashed; }
.ui-etapas__estado { font-size: 14px; font-weight: 400; color: var(--tinta-2); }

/* TrazerSecoes
   <details class="ui-trazer"><summary>↺ Trazer da última consulta · 02/10</summary><form class="ui-trazer__corpo"><fieldset class="ui-grupo">…<label class="ui-opcao"><input type="checkbox" class="ui-caixa"> <span>Anamnese</span></label>…</fieldset><button class="ui-botao ui-botao--primario">Trazer 2 seções</button></form></details> */
.ui-trazer { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
.ui-trazer__lista { border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); overflow: hidden; }
.ui-trazer__consulta { min-height: var(--linha-min); }
.ui-trazer__previa { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.ui-trazer__secoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--esp-2) var(--esp-4); }
.ui-trazer__acao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); padding-top: var(--esp-3); border-top: 1px solid var(--linha); }

/* ItemConsulta
   <article class="ui-item-consulta"><div class="ui-item-consulta__linha"><strong class="ui-item-consulta__nome">…</strong><span class="ui-etiqueta">…</span></div><dl class="ui-pares ui-item-consulta__vacina">…</dl></article> */
.ui-item-consulta { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-3) 0; border-top: 1px solid var(--linha); min-width: 0; }
.ui-item-consulta:first-child { border-top: 0; padding-top: 0; }
.ui-item-consulta__linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); }
.ui-item-consulta__nome { flex: 1 1 160px; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.ui-item-consulta__vacina { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--esp-2) var(--esp-4); }
.ui-item-consulta__vacina > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-item-consulta__vacina dt { font-size: 14px; color: var(--tinta-2); }
.ui-item-consulta__vacina dd { font-weight: 700; }
.ui-item-consulta__obs { font-size: 14px; color: var(--tinta-2); }
.ui-item-consulta__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.ui-item-consulta--cobrado { background: var(--superficie-suave); padding-left: var(--esp-3); padding-right: var(--esp-3); border-radius: var(--raio-m); }

/* BuscaCatalogo
   <div class="ui-catalogo-busca"><div class="ui-busca"><svg class="ui-icone">search</svg><input class="ui-entrada" type="search" id="busca-item" aria-describedby="busca-item-ajuda"></div><ul class="ui-catalogo-busca__lista"><li class="ui-catalogo-busca__item">…</li></ul></div> */
.ui-catalogo-busca { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }
.ui-catalogo-busca__lista { display: flex; flex-direction: column; border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); overflow: hidden; }
.ui-catalogo-busca__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); min-height: var(--linha-min); padding: var(--esp-2) var(--esp-3); }
.ui-catalogo-busca__item + .ui-catalogo-busca__item { border-top: 1px solid var(--linha); }
.ui-catalogo-busca__texto { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-catalogo-busca__nome { font-weight: 700; overflow-wrap: anywhere; }
.ui-catalogo-busca__preco { font-weight: 700; white-space: nowrap; }
.ui-catalogo-busca__item .ui-botao { margin-left: auto; }

/* EncerrarConsulta
   <section class="ui-encerrar"><header class="ui-encerrar__topo">…</header><div class="ui-encerrar__resumo"><article class="ui-encerrar__item">…</article>…</div><section class="ui-encerrar__assinar"><h3 class="ui-encerrar__assinar-titulo">…</h3><div class="ui-escolhas">…ui-escolha…</div><div class="ui-encerrar__codigo">…</div></section><div class="ui-encerrar__rodape">…</div></section> */
.ui-encerrar { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.ui-encerrar__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.ui-encerrar__resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--esp-3); }
.ui-encerrar__item { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; padding: var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie-suave); }
.ui-encerrar__item--falta { border-color: var(--atencao-linha); background: var(--atencao-fundo); }
.ui-encerrar__item--feito { background: var(--superficie); }
.ui-encerrar__item-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); }
.ui-encerrar__titulo { font-weight: 700; }
.ui-encerrar__falta { font-size: 14px; color: var(--tinta-2); }
.ui-encerrar__item .ui-botao { align-self: flex-start; }
.ui-encerrar__rodape { display: flex; flex-direction: column; align-items: flex-end; gap: var(--esp-2); padding-top: var(--esp-4); border-top: 1px solid var(--linha); }
@container (max-width: 560px) { .ui-encerrar__rodape { align-items: stretch; } }
.ui-encerrar__assinar { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; padding: var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); }
.ui-encerrar__assinar-titulo { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 700; }
.ui-encerrar__codigo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--esp-2) var(--esp-3); }
.ui-encerrar__codigo > .ui-campo { flex: 1 1 12rem; min-width: 0; }
.ui-encerrar__assinado { min-width: 0; }
.ui-encerrar__assinado > .ui-etiqueta { display: inline-flex; flex-wrap: wrap; white-space: normal; max-width: 100%; height: auto; padding-block: var(--esp-1); line-height: 1.45; }

/* RegistroEvolucao
   <section class="ui-evolucao"><ol class="ui-evolucao__lista"><li class="ui-evolucao__item"><div class="ui-evolucao__cab">…</div><p class="ui-evolucao__texto">…</p></li></ol><form class="ui-evolucao__novo">…</form></section> */
.ui-evolucao { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.ui-evolucao__lista { display: flex; flex-direction: column; gap: var(--esp-3); }
.ui-evolucao__item { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; padding: var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); }
.ui-evolucao__item--adendo { background: var(--superficie-suave); }
.ui-evolucao__cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1) var(--esp-3); font-size: 14px; color: var(--tinta-2); }
.ui-evolucao__cab strong { color: var(--tinta); }
.ui-evolucao__texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-evolucao__visto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.ui-evolucao__novo { display: flex; flex-direction: column; gap: var(--esp-3); padding-top: var(--esp-4); border-top: 1px solid var(--linha); }
.ui-evolucao__novo .ui-botao { align-self: flex-end; }
@container (max-width: 560px) { .ui-evolucao__novo .ui-botao { align-self: stretch; } }

/* Odontograma (arcadas em SVG; cada dente é um link com o número e as faces)
   <section class="ui-cartao ui-odontograma"><div class="ui-cartao__topo">…</div><div class="ui-segmentos" role="group">…</div><div class="ui-odontograma__arcada"><p class="ui-odontograma__rotulo">Arcada superior</p><svg class="ui-grafico ui-odontograma__desenho" viewBox="0 0 720 72" role="img" aria-label="…"><a class="ui-dente" href="#dente-18">…</a></svg></div><ul class="ui-odontograma__legenda"><li class="ui-odontograma__item"><span class="ui-odontograma__cor ui-odontograma__cor--carie"></span>Cárie · a tratar</li></ul></section> */
.ui-odontograma { min-width: 0; }
.ui-odontograma__arcada { display: flex; flex-direction: column; gap: var(--esp-1); overflow-x: auto; scrollbar-width: thin; padding-bottom: var(--esp-1); }
.ui-odontograma__rotulo { font-size: 14px; font-weight: 700; color: var(--tinta-2); }
.ui-odontograma__desenho { display: block; width: 100%; max-width: none; height: auto; min-width: 0; overflow: visible; }
@container (max-width: 480px) { .ui-odontograma__desenho { width: 720px; max-width: none; } }
.ui-odontograma__legenda { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); font-size: 14px; line-height: 1.45; }
.ui-odontograma__item { display: inline-flex; align-items: center; gap: var(--esp-2); }
.ui-odontograma__cor { flex: none; width: 16px; height: 16px; border-radius: var(--raio-p); border: 1px solid var(--linha-forte); background: var(--superficie); }
.ui-odontograma__cor--carie { background: var(--perigo); border-color: var(--perigo); }
.ui-odontograma__cor--restauracao { background: var(--marca); border-color: var(--marca); }
.ui-odontograma__cor--tratamento { background: var(--atencao); border-color: var(--atencao); }
.ui-odontograma__cor--ausente { background: var(--superficie-suave); border-style: dashed; }
.ui-odontograma__cor--protese { background: transparent; border: 3px solid var(--info); }
.ui-odontograma__cor--escolhido { background: transparent; border: 3px solid var(--foco); }
.ui-odontograma__meio { font-size: 14px; color: var(--tinta-2); text-align: center; }
.ui-odontograma__vazio { font-size: 14px; color: var(--tinta-2); }
.ui-odontograma__dica { font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.ui-odontograma--deciduo .ui-dente__contorno { stroke-dasharray: 4 3; }


/* Dente: alvo de toque (rect transparente de 44), faces, contorno, X de ausente e número (SVG dentro do odontograma)
   <a class="ui-dente" href="#dente-36" aria-label="Dente 36, cárie em O e M"><rect class="ui-dente__alvo"/><g><polygon class="ui-dente__face ui-dente__face--carie"/></g><rect class="ui-dente__contorno"/><text class="ui-dente__num">36</text></a> */
.ui-dente { cursor: pointer; outline: none; }
.ui-dente__alvo { fill: transparent; }
.ui-dente__face { fill: var(--superficie); stroke: var(--linha-forte); stroke-width: 1; }
.ui-dente__face--ausente { fill: var(--superficie-suave); }
.ui-dente__face--carie { fill: var(--perigo); }
.ui-dente__face--restauracao { fill: var(--marca); }
.ui-dente__face--tratamento { fill: var(--atencao); }
.ui-dente__contorno { fill: none; stroke: var(--tinta-2); stroke-width: 1.5; }
.ui-dente__x { stroke: var(--tinta-3); stroke-width: 3; stroke-linecap: round; }
text.ui-dente__num { font-family: var(--font-sans); font-size: 16px; font-weight: 700; fill: var(--tinta); text-anchor: middle; }
text.ui-dente__num--deciduo { fill: var(--tinta-2); font-weight: 400; }
.ui-dente--ausente .ui-dente__contorno { stroke: var(--tinta-3); stroke-dasharray: 3 3; }
.ui-dente--protese .ui-dente__contorno { stroke: var(--info); stroke-width: 3; }
.ui-dente:hover .ui-dente__contorno { stroke: var(--tinta); }
.ui-dente.esta-escolhido .ui-dente__contorno { stroke: var(--foco); stroke-width: 3; }
.ui-dente:focus-visible .ui-dente__contorno { stroke: var(--foco); stroke-width: 3; }
@media (prefers-reduced-motion: no-preference) { .ui-dente__face { transition: fill 0.15s ease; } }

/* PaletaDente: o painel do dente escolhido (faces, condição, procedimentos e ações)
   <section class="ui-dente-paleta"><header class="ui-dente-paleta__topo">…</header><div class="ui-dente-paleta__faces"><div class="ui-chips" role="group" aria-label="Faces">…</div></div><div class="ui-dente-paleta__acoes ui-acoes">…</div></section> */
.ui-dente-paleta { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.ui-dente-paleta__topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); }
.ui-dente-paleta__corpo { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr); gap: var(--esp-4); align-items: start; }
@container (max-width: 560px) { .ui-dente-paleta__corpo { grid-template-columns: minmax(0, 1fr); } }
.ui-dente-paleta__desenho { display: block; width: 160px; height: 160px; max-width: 100%; }
.ui-dente-paleta__grupo { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }
.ui-dente-paleta__grupo-titulo { font-size: 14px; font-weight: 700; color: var(--tinta-2); }
.ui-dente-paleta__procs { display: flex; flex-direction: column; border: 1px solid var(--linha); border-radius: var(--raio-m); overflow: hidden; }
.ui-dente-paleta__proc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-3); min-height: var(--linha-min); padding: var(--esp-2) var(--esp-3); background: var(--superficie); }
.ui-dente-paleta__proc + .ui-dente-paleta__proc { border-top: 1px solid var(--linha); }
.ui-dente-paleta__proc.esta-escolhido-proc { background: var(--marca-suave); }
.ui-dente-paleta__acoes { padding-top: var(--esp-4); border-top: 1px solid var(--linha); }

/* PlanoTratamento
   <section class="ui-cartao ui-plano-trat"><header class="ui-cartao__topo">…</header><section class="ui-plano-trat__fase"><h3 class="ui-plano-trat__fase-titulo">…</h3><ol class="ui-plano-trat__linhas"><li>…</li></ol><p class="ui-plano-trat__total">…</p></section><footer class="ui-cartao__rodape">…</footer></section> */
.ui-plano-trat { min-width: 0; }
.ui-plano-trat__fase { display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-plano-trat__fase-titulo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-3); font-size: 16px; font-weight: 700; }
.ui-plano-trat__linhas { display: flex; flex-direction: column; border: 1px solid var(--linha); border-radius: var(--raio-m); overflow: hidden; background: var(--superficie); }
.ui-plano-trat__linhas > li + li { border-top: 1px solid var(--linha); }
.ui-plano-trat__total { display: flex; justify-content: space-between; gap: var(--esp-3); font-size: 14px; color: var(--tinta-2); }
.ui-plano-trat__total strong { color: var(--tinta); font-size: 16px; }
.ui-plano-trat__geral { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); padding-top: var(--esp-4); border-top: 2px solid var(--linha-forte); }
.ui-plano-trat__geral strong { font-size: 22px; line-height: 1.2; }

/* LinhaPlano: um procedimento do plano com 5 situações (proposto, aprovado, agendado, feito, cancelado)
   <li class="ui-linha-plano esta-aprovado"><div class="ui-linha-plano__texto"><strong>…</strong><span class="ui-apoio">…</span></div><span class="ui-etiqueta ui-etiqueta--info">Aprovado</span><div class="ui-acoes"><button class="ui-botao ui-botao--secundario">Agendar</button></div></li> */
.ui-linha-plano { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); min-height: var(--linha-min); padding: var(--esp-3); min-width: 0; }
.ui-linha-plano__texto { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-linha-plano__nome { font-weight: 700; overflow-wrap: anywhere; }
.ui-linha-plano__valor { font-weight: 700; white-space: nowrap; }
.ui-linha-plano__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.ui-linha-plano.esta-cancelado { color: var(--tinta-2); }
.ui-linha-plano.esta-cancelado .ui-linha-plano__nome { text-decoration: line-through; }
.ui-linha-plano.esta-feito { background: var(--superficie-suave); }

/* SugestaoProcedimento: o que a Íris propôs a partir do odontograma (tom ia até alguém conferir)
   <section class="ui-cartao ui-sugestao-proc"><div class="ui-cartao__topo"><span class="ui-etiqueta ui-etiqueta--ia">Escrito pela Íris</span></div><p class="ui-sugestao-proc__texto">…</p><div class="ui-acoes">…</div></section> */
.ui-sugestao-proc { min-width: 0; border: 1px solid var(--ia-linha); background: var(--ia-fundo); }
.ui-sugestao-proc__texto { font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.ui-sugestao-proc__dente { font-weight: 700; }
.ui-sugestao-proc__conferido { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); font-size: 14px; color: var(--tinta-2); }
.ui-sugestao-proc.esta-conferida { background: var(--superficie); border-color: var(--linha); }

/* OrcamentoAssinatura: orçamento do plano e aceite pelo link (paciente) e com certificado (profissional)
   <section class="ui-cartao ui-orcamento-ass"><header class="ui-cartao__topo">…</header><ul class="ui-orcamento-ass__itens">…</ul><div class="ui-orcamento-ass__total">…</div><div class="ui-aceite">…</div></section> */
.ui-orcamento-ass { min-width: 0; }
.ui-orcamento-ass__itens { display: flex; flex-direction: column; border: 1px solid var(--linha); border-radius: var(--raio-m); overflow: hidden; }
.ui-orcamento-ass__itens > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-3); padding: var(--esp-2) var(--esp-3); background: var(--superficie); }
.ui-orcamento-ass__itens > li + li { border-top: 1px solid var(--linha); }
.ui-orcamento-ass__total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--esp-2) var(--esp-4); padding-top: var(--esp-3); border-top: 2px solid var(--linha-forte); }
.ui-orcamento-ass__total strong { font-size: 22px; line-height: 1.2; }
.ui-orcamento-ass__registro { display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-orcamento-ass__link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.ui-orcamento-ass__link .ui-codigo { flex: 1 1 220px; }

/* ProcedimentoDente: procedimento lançado na consulta odonto, com dente e faces
   <article class="ui-proc-dente"><div class="ui-proc-dente__linha"><strong>Restauração em resina</strong><span class="ui-proc-dente__dente">36 · O, M</span></div><dl class="ui-pares">…</dl></article> */
.ui-proc-dente { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; padding: var(--esp-3) var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); }
.ui-proc-dente__linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-3); }
.ui-proc-dente__nome { font-weight: 700; overflow-wrap: anywhere; }
.ui-proc-dente__dente { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: 28px; padding: 2px 12px; border: 1px solid var(--linha-media); border-radius: var(--raio-pilula); font-weight: 700; white-space: nowrap; }
.ui-proc-dente__dente-n { font-variant-numeric: tabular-nums; }
.ui-proc-dente__origem { font-size: 14px; color: var(--tinta-2); }
.ui-proc-dente.esta-assinado { background: var(--superficie-suave); }
.ui-linha-plano.esta-proposto { color: var(--tinta); }
.ui-linha-plano.esta-aprovado { color: var(--tinta); }
.ui-linha-plano.esta-agendado { color: var(--tinta); }
.ui-dente--deciduo .ui-dente__contorno { stroke-dasharray: 4 3; }
.ui-odontograma__desenho--deciduo { max-width: 100%; }

.ui-evolucao__visto .ui-etiqueta { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

/* Ficha clínica, banho, pet e documentos */

/* ── SecaoFicha: uma seção da ficha, com indicador de feita, iniciada, vazia ou do tutor.
   <section class="ui-cartao ui-secao-ficha"><header class="ui-secao-ficha__cabeca"><h3 class="ui-secao-ficha__titulo">Anamnese</h3>
     <span class="ui-etiqueta ui-etiqueta--neutra">do(a) paciente</span><span class="ui-secao-ficha__estado ui-secao-ficha__estado--feita">✓ Feita</span></header>
     <div class="ui-secao-ficha__grade">…ui-campo-ficha…</div></section> */
.ui-secao-ficha { container-type: inline-size; min-width: 0; gap: var(--esp-4); }
.ui-secao-ficha__cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); }
.ui-secao-ficha__titulo { flex: 1 1 12rem; font-size: 18px; line-height: 1.35; font-weight: 700; }
.ui-secao-ficha__estado { display: inline-flex; align-items: center; gap: var(--esp-1); font-size: 14px; font-weight: 700; color: var(--tinta-2); white-space: nowrap; }
.ui-secao-ficha__estado--feita { color: var(--ok); }
.ui-secao-ficha__estado--iniciada { color: var(--info); }
.ui-secao-ficha__estado--tutor { color: var(--info); }
.ui-secao-ficha__ajuda { font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.ui-secao-ficha__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--esp-4) var(--esp-5); align-items: start; }
.ui-secao-ficha__grade > .ui-campo-ficha--largo { grid-column: 1 / -1; }
@container (max-width: 420px) { .ui-secao-ficha__grade { grid-template-columns: minmax(0, 1fr); } }

/* ── CampoFicha: um campo da ficha com a origem escrita (pessoa, Íris, tutor) e o conflito com o cadastro.
   <div class="ui-campo ui-campo-ficha ui-campo-ficha--ia"><div class="ui-campo-ficha__topo"><label class="ui-campo__rotulo" for="f1">Peso (kg)</label>
     <span class="ui-campo-ficha__origem">Lido do áudio · Conferir</span></div><input class="ui-entrada ui-entrada--numero" id="f1">
     <div class="ui-campo-ficha__ia">…</div></div> */
.ui-campo-ficha { min-width: 0; gap: var(--esp-2); }
.ui-campo-ficha__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-1) var(--esp-3); }
.ui-campo-ficha__origem { display: inline-flex; align-items: center; gap: var(--esp-1); font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.ui-campo-ficha__origem--tutor { color: var(--info); }
.ui-campo-ficha__origem--ok { color: var(--ok); }
.ui-campo-ficha--ia .ui-entrada { border-color: var(--ia); background: var(--ia-fundo); }
.ui-campo-ficha__ia { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--ia-linha); border-radius: var(--raio-m); background: var(--ia-fundo); color: var(--tinta); font-size: 14px; line-height: 1.45; }
.ui-campo-ficha__ia .ui-acoes { gap: var(--esp-2); }
.ui-campo-ficha__conflito { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--atencao-linha); border-radius: var(--raio-m); background: var(--atencao-fundo); font-size: 14px; line-height: 1.45; }
.ui-campo-ficha__conflito > p { display: flex; align-items: flex-start; gap: var(--esp-2); }
.ui-campo-ficha__conflito > p > .ui-icone { color: var(--atencao); margin-top: 2px; }
.ui-campo-ficha__conflito .ui-acoes { gap: var(--esp-2); }
.ui-campo-ficha__conflito .ui-botao { min-height: var(--chip); }

/* ── LinkTutor: link para o tutor responder antes da consulta, com validade e situação.
   <section class="ui-cartao ui-link-tutor"><div class="ui-link-tutor__topo"><h3 class="ui-cartao__titulo">Resposta do tutor</h3><span class="ui-etiqueta ui-etiqueta--info">Não aberto</span></div>
     <div class="ui-link-tutor__campo"><input class="ui-entrada ui-entrada--codigo" readonly value="…"><button class="ui-botao ui-botao--secundario">Copiar link</button></div></section> */
.ui-link-tutor { container-type: inline-size; min-width: 0; gap: var(--esp-3); }
.ui-link-tutor__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-3); }
.ui-link-tutor__validade { font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.ui-link-tutor__campo { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: stretch; }
.ui-link-tutor__campo > .ui-entrada { flex: 1 1 14rem; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.ui-link-tutor__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
@container (max-width: 420px) { .ui-link-tutor__campo > .ui-botao, .ui-link-tutor__acoes > .ui-botao { width: 100%; } }
.ui-link-tutor__mensagem { border-top: 1px solid var(--linha); padding-top: var(--esp-3); }
.ui-link-tutor__mensagem pre { white-space: pre-wrap; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--tinta-2); }
.ui-link-tutor--expirado { background: var(--superficie-suave); box-shadow: inset 0 0 0 1px var(--linha-media); }

/* ── FichaPublica: a página que o tutor abre no celular, sem login e sem casca do app.
   <main class="ui-ficha-pub"><header class="ui-ficha-pub__marca"><span class="ui-redondo ui-redondo--marca">…</span><p class="ui-ficha-pub__clinica">Pokotucho</p></header>
     <section class="ui-ficha-pub__corpo"><h1 class="ui-ficha-pub__titulo">Consulta do Thor amanhã às 09:00</h1>…</section></main> */
.ui-ficha-pub { container-type: inline-size; display: flex; flex-direction: column; gap: var(--esp-5); min-width: 0; padding: var(--esp-5); background: var(--superficie); color: var(--tinta); }
.ui-ficha-pub__marca { display: flex; align-items: center; gap: var(--esp-3); }
.ui-ficha-pub__clinica { font-size: 18px; line-height: 1.35; font-weight: 700; }
.ui-ficha-pub__titulo { font-size: 22px; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; }
.ui-ficha-pub__corpo { display: flex; flex-direction: column; gap: var(--esp-4); }
.ui-ficha-pub__progresso { display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-ficha-pub__pergunta { display: flex; flex-direction: column; gap: var(--esp-2); padding-bottom: var(--esp-4); border-bottom: 1px solid var(--linha); }
.ui-ficha-pub__obrigado { display: flex; flex-direction: column; align-items: center; gap: var(--esp-3); padding: var(--esp-6) 0; text-align: center; }
.ui-ficha-pub__obrigado > p { font-size: 16px; line-height: 1.5; }
.ui-ficha-pub__envio { display: flex; flex-direction: column; gap: var(--esp-3); }
.ui-ficha-pub .ui-botao { width: 100%; }

/* ── QuadroBanho: o quadro por etapas (6 colunas) e, no celular, os segmentos com a coluna escolhida.
   <section class="ui-quadro-banho"><div class="ui-quadro-banho__colunas"><section class="ui-quadro-banho__coluna">…</section>…</div>
     <div class="ui-quadro-banho__escolha"><div class="ui-segmentos">…</div><ol class="ui-quadro-banho__lista">…</ol></div></section> */
.ui-quadro-banho { container-type: inline-size; min-width: 0; display: flex; flex-direction: column; gap: var(--esp-3); }
.ui-quadro-banho__colunas { display: grid; grid-template-columns: repeat(6, minmax(9.5rem, 1fr)); gap: var(--esp-2); align-items: start; overflow-x: auto; padding-bottom: var(--esp-1); }
.ui-quadro-banho .ui-botao { min-height: var(--chip); padding: 0 var(--esp-2); font-size: 14px; white-space: normal; }
.ui-quadro-banho__escolha { display: none; flex-direction: column; gap: var(--esp-3); min-width: 0; }
.ui-quadro-banho__escolha .ui-segmentos { flex-wrap: wrap; }
.ui-quadro-banho__escolha .ui-segmentos__item { padding: 0 var(--esp-2); font-size: 14px; }
@container (max-width: 519px) {
  .ui-quadro-banho__colunas { display: none; }
  .ui-quadro-banho__escolha { display: flex; }
}
.ui-quadro-banho__coluna { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; padding: var(--esp-2); border-radius: var(--raio-m); background: var(--superficie-suave); }
.ui-quadro-banho__coluna--vazia { background: transparent; border: 1px dashed var(--linha-media); }
.ui-quadro-banho__cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-1); font-size: 14px; font-weight: 700; color: var(--tinta); }
.ui-quadro-banho__cabeca .ui-quadro-banho__n { font-size: 14px; color: var(--tinta-2); }
.ui-quadro-banho__pilha { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }
.ui-quadro-banho__vazio { font-size: 14px; line-height: 1.45; color: var(--tinta-3); }
.ui-quadro-banho__lista { display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-quadro-banho__coluna--pronto { box-shadow: inset 0 0 0 1px var(--atencao-linha); }

/* ── CartaoBanho: o pet no banho, compacto. Estados: chegou, no banho, pronto, entregue. Prazo "atrasado" tem texto e tom.
   <article class="ui-cartao-banho esta-pronto"><div class="ui-cartao-banho__topo"><span class="ui-redondo ui-redondo--marca">…</span>
     <div class="ui-cartao-banho__quem"><strong class="ui-cartao-banho__nome">Thor</strong><span class="ui-apoio">Shih-tzu · 6 anos</span></div></div>…</article> */
.ui-cartao-banho { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; padding: var(--esp-3); border-radius: var(--raio-m); background: var(--superficie); box-shadow: var(--sombra); color: var(--tinta); font-size: 14px; line-height: 1.4; }
.ui-cartao-banho .ui-redondo { width: 32px; height: 32px; }
.ui-cartao-banho__topo { display: flex; align-items: center; gap: var(--esp-2); min-width: 0; }
.ui-cartao-banho__quem { display: flex; flex-direction: column; min-width: 0; }
.ui-cartao-banho__nome { font-size: 16px; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; }
.ui-cartao-banho__linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1) var(--esp-2); color: var(--tinta-2); }
.ui-cartao-banho__alertas { display: flex; flex-wrap: wrap; gap: var(--esp-1); }
.ui-cartao-banho__alertas .ui-etiqueta { min-height: 24px; padding: 0 var(--esp-2); font-size: 13px; }
.ui-cartao-banho__banhista { color: var(--tinta-2); }
.ui-cartao-banho__fotos { display: flex; gap: var(--esp-1); }
.ui-cartao-banho__foto { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 var(--esp-2); border: 1px solid var(--linha-media); border-radius: var(--raio-p); color: var(--tinta-2); font-size: 13px; }
.ui-cartao-banho__acao { align-self: stretch; }
.ui-cartao-banho__acao .ui-botao { width: 100%; min-height: var(--chip); padding: 0 var(--esp-3); font-size: 14px; }
.ui-cartao-banho--atrasado { box-shadow: inset 0 0 0 2px var(--atencao); }
.ui-cartao-banho.esta-entregue { background: var(--superficie-suave); box-shadow: inset 0 0 0 1px var(--linha); color: var(--tinta-2); }
.ui-cartao-banho.esta-entregue .ui-cartao-banho__nome { color: var(--tinta-2); }

/* ── CheckupBanho: o check-up durante o banho. Cada item é OK ou ATENÇÃO; o achado leva nota e foto.
   <section class="ui-cartao ui-checkup"><div class="ui-checkup__topo"><h3 class="ui-cartao__titulo">Check-up do banho</h3><strong>5 de 7</strong></div>
     <ol class="ui-checkup__itens"><li class="ui-checkup__item ui-checkup__item--ok">…</li></ol></section> */
.ui-checkup { container-type: inline-size; min-width: 0; gap: var(--esp-3); }
.ui-checkup__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-3); }
.ui-checkup__itens { display: flex; flex-direction: column; min-width: 0; }
.ui-checkup__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--esp-2) var(--esp-3); padding: var(--esp-3) 0; border-top: 1px solid var(--linha); }
.ui-checkup__item:first-child { border-top: 0; }
.ui-checkup__marca { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--raio-pilula); background: var(--superficie-suave); color: var(--tinta-3); }
.ui-checkup__item--ok .ui-checkup__marca { background: var(--ok-fundo); color: var(--ok); }
.ui-checkup__item--atencao .ui-checkup__marca { background: var(--atencao-fundo); color: var(--atencao); }
.ui-checkup__corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-checkup__corpo > strong { font-size: 16px; }
.ui-checkup__botoes { display: flex; gap: var(--esp-2); flex-wrap: wrap; justify-content: flex-end; }
.ui-checkup__botoes .ui-botao { min-height: var(--chip); padding: 0 var(--esp-3); font-size: 14px; }
.ui-checkup__achado { grid-column: 2 / -1; display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-checkup__achado .ui-entrada { min-height: var(--chip); font-size: 14px; }
.ui-checkup__achado .ui-chips { gap: var(--esp-1); }
.ui-checkup__achado .ui-chip { min-height: var(--chip-mesa); padding: 0 var(--esp-3); font-size: 14px; }
.ui-checkup__foto { display: flex; align-items: center; gap: var(--esp-2); font-size: 14px; color: var(--tinta-2); }
.ui-checkup__falta { display: flex; flex-direction: column; gap: var(--esp-2); }
@container (max-width: 420px) {
  .ui-checkup__item { grid-template-columns: auto minmax(0, 1fr); }
  .ui-checkup__botoes { grid-column: 1 / -1; justify-content: stretch; }
  .ui-checkup__botoes .ui-botao { flex: 1 1 0; }
  .ui-checkup__achado { grid-column: 1 / -1; }
}
/* Na recepção: a tarefa do achado (foto em miniatura, texto pronto e ações; quem envia é uma pessoa) */
.ui-checkup__recepcao { container-type: inline-size; min-width: 0; }
.ui-checkup__recepcao .ui-cartao__topo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--esp-2) var(--esp-3); }
.ui-checkup__recepcao .ui-cartao__topo > div { min-width: 0; flex: 1 1 14rem; }
.ui-checkup__achado-recepcao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); font-size: 14px; }
.ui-checkup__miniatura { display: inline-flex; align-items: center; gap: var(--esp-2); padding: var(--esp-2) var(--esp-3); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie-suave); color: var(--tinta-2); font-size: 14px; }

/* ── AntesDepois: duas fotos lado a lado, com a hora e a situação do envio ao tutor.
   <div class="ui-antes-depois"><figure class="ui-antes-depois__foto"><div class="ui-antes-depois__alvo ui-antes-depois__alvo--com">…</div><figcaption>Antes · 09:12</figcaption></figure>…</div> */
.ui-antes-depois { container-type: inline-size; display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
.ui-antes-depois__pares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); }
.ui-antes-depois__foto { display: flex; flex-direction: column; gap: var(--esp-2); margin: 0; min-width: 0; }
.ui-antes-depois__alvo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--esp-1); aspect-ratio: 1 / 1; width: 100%; border-radius: var(--raio-m); border: 1px dashed var(--linha-media); background: var(--superficie-suave); color: var(--tinta-2); font-size: 14px; text-align: center; }
.ui-antes-depois__alvo--com { border: 1px solid var(--linha-media); background: var(--superficie-suave-forte); color: var(--tinta); font-weight: 700; }
.ui-antes-depois__legenda { font-size: 14px; color: var(--tinta-2); }
.ui-antes-depois__legenda strong { color: var(--tinta); }
.ui-antes-depois__envio { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-3); padding-top: var(--esp-3); border-top: 1px solid var(--linha); }
@container (max-width: 260px) { .ui-antes-depois__pares { grid-template-columns: minmax(0, 1fr); } }

/* ── LinhaTempoPet: a vida do pet, por fonte. Filtro por tipo em chips; cada evento leva ícone, data, quem e a fonte.
   <div class="ui-tempo-pet"><div class="ui-chips ui-tempo-pet__filtros" role="group" aria-label="Tipo">…</div>
     <ol class="ui-tempo ui-tempo-pet__lista"><li class="ui-tempo__item ui-tempo-pet__evento">…</li></ol></div> */
.ui-tempo-pet { container-type: inline-size; display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.ui-tempo-pet__filtros { gap: var(--esp-2); }
.ui-tempo-pet__filtros .ui-chip { min-height: var(--chip-mesa); font-size: 14px; padding: 0 var(--esp-3); }
.ui-tempo-pet__lista { min-width: 0; }
.ui-tempo-pet__evento .ui-tempo__corpo { gap: 2px; }
.ui-tempo-pet__topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--esp-1) var(--esp-2); font-size: 14px; color: var(--tinta-3); }
.ui-tempo-pet__fonte { display: inline-flex; align-items: center; gap: 4px; color: var(--tinta-2); font-weight: 700; }
.ui-tempo-pet__detalhe { font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.ui-tempo-pet__evento--futuro .ui-tempo__titulo::after { content: " · previsto"; font-weight: 400; color: var(--tinta-2); }
.ui-tempo-pet__mais { font-size: 14px; color: var(--tinta-2); }
@container (max-width: 420px) { .ui-tempo-pet__topo { flex-direction: column; gap: 2px; } }

/* ── CartaoVacina: a situação de uma vacina. Em dia, vence em breve, atrasada, sem registro.
   <article class="ui-cartao ui-vacina ui-vacina--atrasada"><div class="ui-vacina__topo"><div><h3 class="ui-vacina__nome">V10 (polivalente)</h3><p class="ui-apoio">Dose 2 de 3</p></div>
     <span class="ui-etiqueta ui-etiqueta--perigo">Atrasada desde 02/10</span></div><dl class="ui-pares">…</dl><div class="ui-acoes">…</div></article> */
.ui-vacina { container-type: inline-size; min-width: 0; gap: var(--esp-3); padding: var(--esp-4) var(--esp-5); }
.ui-vacina__topo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--esp-2) var(--esp-3); }
.ui-vacina__topo > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-vacina__nome { font-size: 16px; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; }
.ui-vacina .ui-pares { gap: var(--esp-2) var(--esp-5); }
.ui-vacina--sem-registro { background: var(--superficie-suave); box-shadow: inset 0 0 0 1px var(--linha-media); }
.ui-vacina--atrasada { box-shadow: inset 0 0 0 2px var(--perigo); }
.ui-vacina--vencendo { box-shadow: inset 0 0 0 1px var(--atencao-linha); }
.ui-vacina .ui-acoes .ui-botao { min-height: var(--chip); font-size: 14px; }
@container (max-width: 420px) { .ui-vacina .ui-acoes { flex-direction: column; align-items: stretch; } }

/* ── SaldoPacote: o pacote do cliente. Com saldo, sem saldo (último uso) e vencido.
   <section class="ui-cartao ui-pacote"><div class="ui-pacote__topo"><h3 class="ui-pacote__nome">Pacote 4 banhos</h3><span class="ui-etiqueta ui-etiqueta--ok">1 de 4 usados</span></div>
     <div class="ui-progresso">…</div><ol class="ui-pacote__usos">…</ol><footer class="ui-cartao__rodape">…</footer></section> */
.ui-pacote { container-type: inline-size; min-width: 0; gap: var(--esp-3); }
.ui-pacote__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-3); }
.ui-pacote__nome { font-size: 16px; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; }
.ui-pacote__validade { font-size: 14px; color: var(--tinta-2); }
.ui-pacote__usos { display: flex; flex-direction: column; gap: var(--esp-2); font-size: 14px; }
.ui-pacote__usos > li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--esp-1) var(--esp-3); padding-top: var(--esp-2); border-top: 1px solid var(--linha); }
.ui-pacote__usos > li > span:first-child { color: var(--tinta-2); }
.ui-pacote--vencido { background: var(--superficie-suave); box-shadow: inset 0 0 0 1px var(--linha-media); }
.ui-pacote--vencido .ui-pacote__nome { color: var(--tinta-2); }
.ui-pacote .ui-cartao__rodape .ui-botao { min-height: var(--chip); font-size: 14px; }

/* ── RetornoHorarios: marcar o retorno: prazo em chips, horários livres do dia, e o estado final.
   <section class="ui-cartao ui-retorno"><div class="ui-cartao__topo"><h3 class="ui-cartao__titulo">Retorno</h3></div>
     <div class="ui-chips" role="group" aria-label="Prazo">…</div><div class="ui-retorno__horarios" role="group" aria-label="Horários livres">…</div></section> */
.ui-retorno { container-type: inline-size; min-width: 0; gap: var(--esp-4); }
.ui-retorno__bloco { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }
.ui-retorno__rotulo { font-size: 14px; font-weight: 700; color: var(--tinta-2); }
.ui-retorno__horarios { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.ui-retorno__horario { min-height: var(--chip); min-width: 4.5rem; padding: 0 var(--esp-3); border: 1px solid var(--linha-media); border-radius: var(--raio-pilula); background: var(--superficie); color: var(--tinta); font-size: 16px; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; }
.ui-retorno__horario:hover { background: var(--superficie-suave); border-color: var(--linha-forte); }
.ui-retorno__horario[aria-pressed="true"] { background: var(--marca-suave); border-color: var(--marca); color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.ui-retorno__horario:disabled { background: var(--superficie-suave); border-color: var(--linha); color: var(--tinta-3); text-decoration: line-through; cursor: not-allowed; }
.ui-retorno__legenda { font-size: 14px; color: var(--tinta-2); }
.ui-retorno__chips .ui-chip { min-height: var(--chip); font-size: 14px; }
.ui-retorno .ui-aviso { font-size: 14px; }
.ui-retorno__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); justify-content: flex-end; }
@container (max-width: 420px) { .ui-retorno__acoes > .ui-botao { width: 100%; } }

/* ── LivroControlados: o livro de controlados. Tabela no computador; no celular cada linha vira cartão (data-rotulo).
   <section class="ui-cartao ui-controlados"><div class="ui-controlados__topo"><h3 class="ui-cartao__titulo">Cloridrato de tramadol 50 mg</h3>…</div>
     <div class="ui-tabela" role="region" aria-label="Movimentos"><table>…</table></div></section> */
.ui-controlados { container-type: inline-size; min-width: 0; gap: var(--esp-3); }
.ui-controlados__topo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--esp-2) var(--esp-3); }
.ui-controlados__topo > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-controlados__saldo { font-size: 18px; line-height: 1.35; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-controlados__base { font-size: 14px; color: var(--tinta-2); }
.ui-controlados .ui-tabela td { vertical-align: top; }
.ui-controlados__linha--ajuste td { background: var(--atencao-fundo); }
.ui-controlados__motivo { display: block; font-size: 14px; color: var(--tinta-2); }
.ui-controlados__pendencia { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1); font-size: 14px; color: var(--perigo); font-weight: 700; }
.ui-controlados__saldo--perigo { color: var(--perigo); }

/* ── RegraVacina: uma regra de vacinação (espécie, vacina, idades, intervalo, reforço, aviso) e o formulário de edição.
   <div class="ui-regra-vacina"><ul class="ui-regra-vacina__lista"><li class="ui-regra-vacina__item">…</li></ul>
     <form class="ui-cartao ui-regra-vacina__form">…</form></div> */
.ui-regra-vacina { container-type: inline-size; display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.ui-regra-vacina__lista { display: flex; flex-direction: column; min-width: 0; }
.ui-regra-vacina__item { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-3) 0; border-top: 1px solid var(--linha); }
.ui-regra-vacina__item:first-child { border-top: 0; }
.ui-regra-vacina__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); }
.ui-regra-vacina__nome { font-size: 16px; font-weight: 700; }
.ui-regra-vacina__form { gap: var(--esp-4); }
.ui-regra-vacina__form .ui-acoes { justify-content: flex-end; }
.ui-regra-vacina__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--esp-4) var(--esp-5); }
@container (max-width: 420px) { .ui-regra-vacina__form .ui-acoes { flex-direction: column-reverse; align-items: stretch; } }

/* ── PrescricaoEstoque: uma linha de prescrição com a pílula de estoque. Alergia registrada bloqueia o prescrever; "Prescrever mesmo assim" pede justificativa escrita.
   <li class="ui-prescricao__linha ui-prescricao__linha--bloqueada"><div class="ui-prescricao__topo"><strong>Amoxicilina 250 mg</strong><span class="ui-etiqueta ui-etiqueta--ok">Tem na farmácia · 24 un</span></div>…<div class="ui-prescricao__acoes"><span class="ui-desligado">…</span><button class="ui-botao ui-botao--perigo-suave">Prescrever mesmo assim</button></div></li> */
.ui-prescricao { container-type: inline-size; display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
.ui-prescricao__linha { display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-4); border-radius: var(--raio-m); border: 1px solid var(--linha); background: var(--superficie); }
.ui-prescricao__linha--bloqueada { border-color: var(--perigo-linha); background: var(--perigo-fundo); }
.ui-prescricao__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-3); }
.ui-prescricao__nome { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.ui-prescricao__campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--esp-3); }
.ui-prescricao__campos .ui-entrada { min-height: var(--alvo-mesa); font-size: 14px; }
.ui-prescricao__resumo { font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.ui-prescricao__acoes { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--esp-3); }
.ui-prescricao .ui-justificativa { padding: var(--esp-3); }
@container (max-width: 420px) { .ui-prescricao__acoes > .ui-botao, .ui-prescricao__acoes > .ui-desligado { width: 100%; } .ui-prescricao__acoes .ui-botao { width: 100%; } }

/* ── ExamesPedidos: exames pedidos como checklist, com a situação de cada um, e o teste rápido da casa.
   <section class="ui-cartao ui-exames"><h3 class="ui-cartao__titulo">Exames pedidos</h3><ul class="ui-exames__lista"><li class="ui-exames__item">…</li></ul>
     <div class="ui-exames__teste">…</div></section> */
.ui-exames { container-type: inline-size; min-width: 0; gap: var(--esp-4); }
.ui-exames__lista { display: flex; flex-direction: column; }
.ui-exames__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--esp-3); padding: var(--esp-3) 0; border-top: 1px solid var(--linha); }
.ui-exames__item:first-child { border-top: 0; }
.ui-exames__marca { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--linha-forte); border-radius: var(--raio-p); color: var(--tinta-2); }
.ui-exames__item.esta-feito .ui-exames__marca { background: var(--ok-fundo); border-color: var(--ok-linha); color: var(--ok); }
.ui-exames__nome { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-exames__nome > strong { font-size: 16px; }
.ui-exames__teste { display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-4); border-radius: var(--raio-m); background: var(--superficie-suave); }
.ui-exames__teste-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-3); }
.ui-exames__leitura { font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.ui-exames__chips { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
@container (max-width: 420px) { .ui-exames__item { grid-template-columns: auto minmax(0, 1fr); } .ui-exames__item > .ui-etiqueta { grid-column: 2; justify-self: start; } }

/* ── Receituario: o que é só do receituário, dentro de cada via. Cada via é uma ui-folha (cabeçalho, campos,
   corpo, assinaturas e rodapé são da base); aqui ficam o símbolo Rx, as linhas de medicamento, o bloco do comprador e os avisos.
   <article class="ui-folha ui-receituario ui-receituario--controle"><header class="ui-folha__cab">…</header><section class="ui-folha__corpo"><div class="ui-receituario__secao"><h4>Prescrição</h4><div class="ui-receituario__rx"><span class="ui-receituario__simbolo">R<sub>x</sub></span><ol class="ui-receituario__itens">…</ol></div></div><div class="ui-receituario__comprador">…</div></section>…</article> */
.ui-receituario { min-width: 0; }
.ui-receituario--controle .ui-folha__assinaturas { margin-top: var(--esp-6); }
.ui-receituario__secao { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }
.ui-receituario__secao > h4 { font-size: 14px; font-weight: 700; color: var(--papel-tinta-2); }
.ui-receituario__rx { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--esp-3) var(--esp-4); align-items: start; }
.ui-receituario__simbolo { font-size: 28px; font-weight: 700; line-height: 1; color: var(--papel-tinta); }
.ui-receituario__simbolo > sub { font-size: 16px; }
.ui-receituario__itens { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; margin: 0; padding-left: 0; list-style-position: inside; }
.ui-receituario__itens > li { display: flex; flex-direction: column; gap: 2px; font-size: 16px; line-height: 1.45; }
.ui-receituario__itens > li > span { font-size: 14px; color: var(--papel-tinta-2); }
.ui-receituario__comprador { display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--papel-linha-forte); border-radius: var(--raio-m); }
.ui-receituario__comprador > h4 { margin: 0; font-size: 14px; font-weight: 700; color: var(--papel-tinta-2); }
.ui-receituario__campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--esp-3) var(--esp-5); }
.ui-receituario__campo { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: var(--esp-10); min-width: 0; border-bottom: 1px solid var(--papel-linha-forte); }
.ui-receituario__campo > small { font-size: 13px; color: var(--papel-tinta-2); }
.ui-receituario__campo--largo { grid-column: 1 / -1; }
.ui-receituario__local { margin: 0; font-size: 14px; }
.ui-receituario__aviso { margin: 0; font-size: 13px; line-height: 1.45; color: var(--papel-tinta-2); }
.ui-receituario__digital > strong { font-size: 14px; color: var(--papel-tinta); }
@container (max-width: 420px) { .ui-receituario__rx { grid-template-columns: minmax(0, 1fr); } }
.ui-prescricao__lista, .ui-regra-vacina__lista { list-style: none; margin: 0; padding: 0; }
.ui-prescricao__lista { display: flex; flex-direction: column; gap: var(--esp-3); }
.ui-cartao-banho.esta-chegou { background: var(--superficie); }
.ui-cartao-banho.esta-no-banho { box-shadow: inset 0 0 0 1px var(--info-linha), var(--sombra); }
.ui-cartao-banho.esta-pronto { box-shadow: inset 0 0 0 1px var(--ok-linha), var(--sombra); }
.ui-controlados .ui-tabela th:nth-child(2), .ui-controlados .ui-tabela td:nth-child(2) { min-width: 11rem; }

/* Pay, caixa e tesouraria */

/* CobrancaPublica: a página que o pagador abre pelo link, celular primeiro.
   <article class="ui-cobranca-pub"><p class="ui-cobranca-pub__marca"><span class="ui-trilho__logo">P</span>Pokotucho</p>
     <h1 class="ui-cobranca-pub__titulo">Banho e tosa</h1><p class="ui-cobranca-pub__valor">R$ 85,00</p>
     <dl class="ui-pares ui-pares--coluna">…</dl>…cartões de meio de pagamento…<p class="ui-cobranca-pub__rodape">Cobrança nº 4471 · Catalisa Pay</p></article> */
.ui-cobranca-pub { display: flex; flex-direction: column; gap: var(--esp-4); width: 100%; max-width: 560px; min-width: 0; margin: 0 auto; }
.ui-cobranca-pub__marca { display: flex; align-items: center; gap: var(--esp-2); font-size: 14px; font-weight: 700; color: var(--tinta-2); }
.ui-cobranca-pub__marca > .ui-trilho__logo { width: 32px; height: 32px; border-radius: var(--raio-p); font-size: 16px; }
.ui-cobranca-pub__titulo { font-size: 22px; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; }
.ui-cobranca-pub__valor { font-size: 32px; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-cobranca-pub__valor s { color: var(--tinta-3); }
.ui-cobranca-pub__rodape { font-size: 13px; line-height: 1.4; color: var(--tinta-3); text-align: center; }
.ui-cobranca-pub .ui-pares { gap: var(--esp-2) var(--esp-4); }
@container (max-width: 400px) { .ui-cobranca-pub__valor { font-size: 28px; } }

/* CartaoCielo: cadastro do cartão pelo formulário da Cielo. Os campos não têm name (vão direto à Cielo).
   <form class="ui-cartao-cielo" id="cc-form" aria-describedby="cc-seg"><div class="ui-grade-campos">
     <div class="ui-campo ui-campo--largo"><label class="ui-campo__rotulo" for="cc-numero">Número do cartão</label>
       <input class="ui-entrada ui-entrada--numero" id="cc-numero" inputmode="numeric" autocomplete="cc-number"></div>…</div>
     <button class="ui-botao ui-botao--primario ui-botao--largo" type="submit">Cadastrar o cartão</button></form> */
.ui-cartao-cielo { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.ui-cartao-cielo__seguranca { display: flex; align-items: flex-start; gap: var(--esp-2); font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.ui-cartao-cielo__seguranca > .ui-icone { flex: none; margin-top: 2px; color: var(--info); }
.ui-cartao-cielo__bandeira { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); margin-top: var(--esp-1); }
.ui-cartao-cielo__parcelas .ui-entrada { font-variant-numeric: tabular-nums; }
.ui-cartao-cielo__recusa { display: flex; align-items: flex-start; gap: var(--esp-2); }
.ui-cartao-cielo__recusa > .ui-icone { flex: none; margin-top: 2px; color: var(--perigo); }

/* PixRecebidos: prova de cada Pix que o banco confirmou.
   <div class="ui-pix-recebidos"><table class="ui-tabela ui-tabela--cartoes">…<td class="ui-pix-recebidos__id"><span class="ui-mono">4f9c…</span>…</td>…</table></div> */
.ui-pix-recebidos { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
.ui-pix-recebidos__id { display: flex; align-items: center; gap: var(--esp-1); min-width: 0; }
.ui-pix-recebidos__id > .ui-mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16ch; }
.ui-pix-recebidos__situacao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.ui-pix-recebidos__pagador { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* DevolucaoPix: pedido de devolução. Não sai na hora: vira pedido para outra pessoa aprovar.
   <section class="ui-cartao ui-devolucao"><p class="ui-devolucao__valor">R$ 40,00</p><p class="ui-devolucao__regra">…</p>…</section> */
.ui-devolucao { min-width: 0; }
.ui-devolucao__valor { font-size: 22px; line-height: 1.3; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-devolucao__regra { display: flex; align-items: flex-start; gap: var(--esp-2); font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.ui-devolucao__regra > .ui-icone { flex: none; margin-top: 2px; color: var(--info); }
.ui-devolucao__devolvido { color: var(--ok); }

/* ContaPay: o cartão de uma conta bancária ligada à Catalisa Pay.
   <section class="ui-cartao ui-conta-pay"><div class="ui-cartao__topo"><h2 class="ui-cartao__titulo">Sicoob · Pokotucho</h2>…</div>
     <dl class="ui-pares ui-pares--linha">…</dl><div class="ui-chips">…<span class="ui-chip">…</span></div></section> */
.ui-conta-pay { min-width: 0; }
.ui-conta-pay__linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-3); }
.ui-conta-pay__linha > dt { flex: none; }
.ui-conta-pay__linha > dd { min-width: 0; max-width: 100%; overflow-wrap: anywhere; text-align: right; }
.ui-conta-pay__linha > dd > .ui-etiqueta { white-space: normal; }
.ui-conta-pay__capacidades .ui-chip { min-height: 32px; padding: 0 var(--esp-3); font-size: 14px; }
.ui-conta-pay__capacidades .ui-chip > .ui-icone { color: var(--ok); }

/* ProtocoloTeste: o teste de uma conta nova, em 4 passos, com o botão do passo atual.
   <ol class="ui-protocolo-teste__passos"><li class="ui-protocolo-teste__passo ui-protocolo-teste__passo--feito">
     <span class="ui-protocolo-teste__numero">1</span><div class="ui-protocolo-teste__texto"><strong class="ui-protocolo-teste__nome">Gerar um Pix de R$ 0,01</strong></div>
     <span class="ui-etiqueta ui-etiqueta--ok">Feito</span></li>…</ol> */
.ui-protocolo-teste { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--esp-3); }
.ui-protocolo-teste__passos { display: flex; flex-direction: column; gap: var(--esp-3); }
.ui-protocolo-teste__passo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); }
.ui-protocolo-teste__numero { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--raio-pilula); background: var(--superficie-suave); color: var(--tinta-2); font-weight: 700; }
.ui-protocolo-teste__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-protocolo-teste__nome { font-weight: 700; }
.ui-protocolo-teste__detalhe { font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.ui-protocolo-teste__passo--feito > .ui-protocolo-teste__numero { background: var(--ok-fundo); color: var(--ok); }
.ui-protocolo-teste__passo--agora { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.ui-protocolo-teste__passo--agora > .ui-protocolo-teste__numero { background: var(--marca-suave); color: var(--marca); }
.ui-protocolo-teste__passo--falhou { background: var(--perigo-fundo); border-color: var(--perigo-linha); }
.ui-protocolo-teste__passo--falhou > .ui-protocolo-teste__numero { background: var(--superficie); color: var(--perigo); }
.ui-protocolo-teste__passo--falta { color: var(--tinta-2); }
.ui-protocolo-teste__passo--falta > .ui-protocolo-teste__numero { color: var(--tinta-3); }
.ui-protocolo-teste__acao { grid-column: 2 / -1; justify-self: start; }
@container (max-width: 400px) {
  .ui-protocolo-teste__passo { grid-template-columns: auto minmax(0, 1fr); }
  .ui-protocolo-teste__passo > .ui-etiqueta { grid-column: 2; justify-self: start; }
}

/* Divergencias: o painel das pendências entre banco, Pay e SGP. Cada item traz a ação que resolve.
   <div class="ui-divergencias"><section class="ui-divergencias__grupo"><h3 class="ui-divergencias__titulo">…</h3>
     <ul class="ui-divergencias__lista"><li class="ui-divergencias__item"><div class="ui-divergencias__texto">…</div>
     <button class="ui-botao ui-botao--secundario ui-divergencias__acao">Dar baixa no SGP</button></li></ul></section></div> */
.ui-divergencias { display: flex; flex-direction: column; gap: var(--esp-5); min-width: 0; }
.ui-divergencias__grupo { display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-divergencias__titulo { display: flex; align-items: center; gap: var(--esp-2); font-size: 18px; line-height: 1.35; font-weight: 700; }
.ui-divergencias__titulo > .ui-icone { color: var(--atencao); }
.ui-divergencias__lista { display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-divergencias__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-3); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); }
.ui-divergencias__texto { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
.ui-divergencias__texto > strong { overflow-wrap: anywhere; }
.ui-divergencias__valor { font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-divergencias__acao { flex: none; }
.ui-divergencias__vazio { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-4); border: 1px solid var(--ok-linha); border-radius: var(--raio-m); background: var(--ok-fundo); color: var(--ok); font-weight: 700; }

/* RecorrenciaCartao: assinaturas no cartão, com a situação escrita e a próxima cobrança.
   <ul class="ui-recorrencia__lista"><li class="ui-recorrencia__item"><div><strong class="ui-recorrencia__cliente">Sérgio Mendes</strong>…</div>
     <span class="ui-etiqueta ui-etiqueta--ok">Ativa</span></li></ul> */
.ui-recorrencia__lista { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
.ui-recorrencia__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--esp-2) var(--esp-4); padding: var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); }
.ui-recorrencia__item--falhou { border-color: var(--perigo-linha); }
.ui-recorrencia__cliente { display: block; font-weight: 700; overflow-wrap: anywhere; }
.ui-recorrencia__detalhe { display: block; font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.ui-recorrencia__situacao { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.ui-recorrencia__proxima { font-size: 14px; color: var(--tinta-2); }
@container (max-width: 400px) { .ui-recorrencia__item { grid-template-columns: minmax(0, 1fr); } }

/* EstornoCartao: estorno de uma venda de cartão, com quatro olhos (quem pede não aprova).
   <section class="ui-cartao ui-estorno"><div class="ui-cartao__topo"><h2 class="ui-cartao__titulo">Estorno #37</h2><span class="ui-etiqueta ui-etiqueta--atencao">Aguardando aprovação</span></div>
     <dl class="ui-pares ui-pares--linha">…</dl><p class="ui-estorno__regra">…</p><div class="ui-acoes">…</div></section> */
.ui-estorno { min-width: 0; }
.ui-estorno__regra { display: flex; align-items: flex-start; gap: var(--esp-2); font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.ui-estorno__regra > .ui-icone { flex: none; margin-top: 2px; color: var(--info); }
.ui-estorno__resultado { font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.ui-estorno__resultado--ok { color: var(--ok); font-weight: 700; }
.ui-estorno__resultado--perigo { color: var(--perigo); font-weight: 700; }

/* GavetaCaixa: a gaveta do caixa aberto (prévia). Saldo grande, entradas e saídas por forma, e as ações do caixa.
   <aside class="ui-gaveta ui-gaveta--previa ui-gaveta-caixa"><header class="ui-gaveta__topo"><h2 class="ui-gaveta__titulo">Caixa · Balcão</h2></header>
     <div class="ui-gaveta__corpo"><div class="ui-gaveta-caixa__saldo">…</div>…</div><footer class="ui-gaveta__rodape">…</footer></aside> */
.ui-gaveta-caixa { min-width: 0; }
.ui-gaveta-caixa__saldo { display: flex; flex-direction: column; gap: 2px; padding: var(--esp-4); border-radius: var(--raio-m); background: var(--superficie-suave); }
.ui-gaveta-caixa__numero { font-size: 32px; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-gaveta-caixa__lista { display: flex; flex-direction: column; }
.ui-gaveta-caixa__linha { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); min-height: var(--linha-min); padding: var(--esp-2) 0; border-top: 1px solid var(--linha); }
.ui-gaveta-caixa__linha:first-child { border-top: 0; }
.ui-gaveta-caixa__linha > span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.ui-gaveta-caixa__negativo { color: var(--perigo); }
.ui-gaveta-caixa__abrir { display: flex; flex-direction: column; gap: var(--esp-4); }
/* GavetaCaixa: registro de sangria ou suprimento: <div class="ui-gaveta-caixa__registro"> (select, valor, Registrar). */
.ui-gaveta-caixa__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.ui-gaveta-caixa__registro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: var(--esp-3); }
@container (max-width: 400px) { .ui-gaveta-caixa__registro { grid-template-columns: minmax(0, 1fr); } }

/* FechamentoCaixa: o fechamento do caixa. Diferença zero, sobra ou falta, sempre com o texto.
   <section class="ui-cartao ui-fechamento"><div class="ui-tabela"><table>…</table></div>
     <div class="ui-campo"><label class="ui-campo__rotulo" for="fc-por">Se não bater, por quê?</label><textarea class="ui-entrada" id="fc-por"></textarea></div>
     <div class="ui-acoes"><button class="ui-botao ui-botao--primario">Fechar com diferença de −R$ 12,00</button></div></section> */
.ui-fechamento { min-width: 0; }
.ui-fechamento__diferenca { display: inline-flex; align-items: center; gap: var(--esp-2); }
.ui-fechamento__resumo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); padding-top: var(--esp-3); border-top: 2px solid var(--linha-forte); font-weight: 700; }
.ui-fechamento__fechado { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--tinta-2); }
.ui-fechamento .ui-tabela td, .ui-fechamento .ui-tabela th { white-space: nowrap; }

/* DepositosCaixa: dinheiro dos caixas fechados que ainda não foi ao banco. Cada linha abre o registro.
   <div class="ui-depositos"><details class="ui-depositos__item"><summary class="ui-depositos__linha">…</summary>
     <form class="ui-depositos__form">…</form></details></div> */
.ui-depositos { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
.ui-depositos__item { border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); }
.ui-depositos__item > summary { list-style: none; cursor: pointer; }
.ui-depositos__item > summary::-webkit-details-marker { display: none; }
.ui-depositos__linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); min-height: var(--linha-min); padding: var(--esp-3) var(--esp-4); }
.ui-depositos__dados { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
.ui-depositos__valor { font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-depositos__form { display: flex; flex-direction: column; gap: var(--esp-4); padding: 0 var(--esp-4) var(--esp-4); }
.ui-depositos__registrado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--ok-linha); border-radius: var(--raio-m); background: var(--ok-fundo); }
.ui-depositos__registrado > .ui-depositos__dados { color: var(--tinta); }

/* SaldosBancos: saldo por banco lido agora. Banco que não respondeu mostra o motivo, nunca zero.
   <div class="ui-saldos"><div class="ui-saldos__linha"><span class="ui-saldos__logo">Sicoob</span>…<span class="ui-valor"><span class="ui-valor__numero">R$ 8.240,00</span></span></div>
     <div class="ui-saldos__total">…</div></div> */
.ui-saldos { display: flex; flex-direction: column; min-width: 0; }
.ui-saldos__linha { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--esp-3); padding: var(--esp-3) 0; border-top: 1px solid var(--linha); }
.ui-saldos__linha:first-child { border-top: 0; }
.ui-saldos__logo { display: inline-flex; align-items: center; justify-content: center; min-width: 96px; min-height: 36px; padding: 0 var(--esp-2); border: 1px solid var(--linha-media); border-radius: var(--raio-p); font-size: 14px; font-weight: 700; }
.ui-saldos__nome { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.ui-saldos__linha .ui-valor { align-items: flex-end; text-align: right; }
.ui-saldos__linha--sem .ui-valor__numero { color: var(--atencao); }
.ui-saldos__total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--esp-2) var(--esp-3); padding-top: var(--esp-4); border-top: 2px solid var(--linha-forte); }
.ui-saldos__ressalva { font-size: 14px; line-height: 1.45; color: var(--atencao); font-weight: 700; }
@container (max-width: 400px) { .ui-saldos__linha { grid-template-columns: minmax(0, 1fr); } .ui-saldos__logo, .ui-saldos__nome, .ui-saldos__linha .ui-valor { grid-column: 1 / -1; justify-self: start; } .ui-saldos__linha .ui-valor { align-items: flex-start; text-align: left; } }

/* ProjecaoCaixa: saldo projetado dia a dia. A linha é o saldo; o ponto negativo leva o dia escrito.
   <figure class="ui-projecao"><svg class="ui-grafico" viewBox="0 0 480 200" role="img" aria-label="…">…</svg>
     <ul class="ui-lista">…maiores saídas…</ul></figure> */
.ui-projecao { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.ui-projecao__grafico { max-width: none; }
.ui-grafico text.ui-projecao__negativo { fill: var(--perigo); }
.ui-projecao__zero { stroke: var(--linha-forte); stroke-width: 1; stroke-dasharray: 4 4; }
.ui-projecao__area { fill: var(--marca-suave); }
.ui-projecao__leitura { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-4); }
.ui-projecao__saida { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); min-height: var(--linha-min); padding: var(--esp-2) 0; border-top: 1px solid var(--linha); }
.ui-projecao__saida > span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }

/* PedidoPagamento: pedir um pagamento pelo banco (favorecido, chave ou boleto, valor, vencimento, anexo) e a lista dos pedidos.
   <div class="ui-pedido-pag"><form class="ui-pedido-pag__form">…</form><ul class="ui-lista"><li class="ui-pedido-pag__item">…</li></ul></div> */
.ui-pedido-pag { display: flex; flex-direction: column; gap: var(--esp-5); min-width: 0; }
.ui-pedido-pag__form { display: flex; flex-direction: column; gap: var(--esp-4); }
.ui-pedido-pag__regra { display: flex; align-items: flex-start; gap: var(--esp-2); font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.ui-pedido-pag__regra > .ui-icone { flex: none; margin-top: 2px; color: var(--info); }
.ui-pedido-pag__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); padding: var(--esp-3) 0; }
.ui-pedido-pag__item + .ui-pedido-pag__item { border-top: 1px solid var(--linha); }
.ui-pedido-pag__texto { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
.ui-pedido-pag__valor { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Recebimentos, fiscal, contabilidade e CRM */

/* ── Carteira de cobrança: faixas de atraso com barra ──
   <ol class="ui-carteira__faixas"><li class="ui-carteira__faixa"><span>1 a 15 dias</span><span class="ui-num">R$ 260,40</span><div class="ui-progresso">…</div></li></ol> */
.ui-carteira { display: grid; gap: var(--esp-3); }
.ui-carteira__subtitulo { margin: 0; font-size: 16px; font-weight: 700; }
.ui-carteira__faixas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); }
.ui-carteira__faixa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--esp-1) var(--esp-3); align-items: baseline; font-size: 14px; }
.ui-carteira__faixa .ui-progresso { grid-column: 1 / -1; }
.ui-carteira__lembrete summary { cursor: pointer; font-size: 14px; }
.ui-carteira__texto { font-size: 14px; min-height: 6rem; margin-top: var(--esp-2); }

/* ── Repasse: regra do item e extrato ──
   <p class="ui-repasse__regra">Consulta: 40% para o profissional</p> */
.ui-repasse { display: grid; gap: var(--esp-3); }
.ui-repasse__regra { margin: 0; padding: var(--esp-2) var(--esp-3); border: 1px solid var(--linha-media); border-radius: var(--raio-m); background: var(--superficie-suave); font-size: 14px; color: var(--tinta); }
.ui-repasse__totais { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: var(--esp-3); margin: 0; }

/* ── Recibo imprimível: folha, com faixa de cancelado ──
   <article class="ui-recibo"><p class="ui-recibo__faixa">…</p>…</article> */
.ui-recibo { max-width: 40rem; margin-inline: auto; padding: var(--esp-8) var(--esp-6); display: grid; gap: var(--esp-4); background: var(--superficie); color: var(--tinta); border: 1px solid var(--linha-forte); border-radius: var(--raio-p); }
.ui-recibo__cabeca { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--esp-2); }
.ui-recibo__titulo { margin: 0; font-size: 22px; font-weight: 700; }
.ui-recibo__valor { margin: 0; font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-recibo__extenso { margin: 0; font-size: 14px; color: var(--tinta-2); }
.ui-recibo__faixa { margin: 0; padding: var(--esp-2) var(--esp-3); background: var(--perigo-fundo); color: var(--perigo); border: 1px solid var(--perigo-linha); border-radius: var(--raio-m); font-size: 14px; font-weight: 700; }
.ui-recibo__assinatura { margin-top: var(--esp-12); padding-top: var(--esp-2); border-top: 1px solid var(--linha-forte); text-align: center; font-size: 14px; }

/* ── Receber misto: até três formas, uma por linha ──
   <div class="ui-receber__linha"><div class="ui-selecao ui-receber__forma">…</div><div class="ui-afixo ui-receber__valor">…</div><button class="ui-botao ui-botao--fantasma ui-botao--icone ui-receber__remover" aria-label="Remover forma">…</button></div> */
.ui-receber { container-type: inline-size; display: grid; gap: var(--esp-3); }
.ui-receber__linha { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: var(--esp-2); align-items: end; }
.ui-receber__resumo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--esp-2); }
@container (max-width: 26rem) {
  .ui-receber__linha { grid-template-columns: minmax(0, 1fr) auto; }
  .ui-receber__forma { grid-column: 1 / -1; }
}

/* ── Prontidão fiscal: o que falta para a nota sair ──
   <li class="ui-checklist__item ui-prontidao__item--falta">…</li> */
.ui-prontidao { display: grid; gap: var(--esp-3); }
.ui-prontidao__item--falta .ui-checklist__marca { color: var(--perigo); background: var(--perigo-fundo); border-color: var(--perigo-linha); }
.ui-prontidao__item--espera .ui-checklist__marca { color: var(--atencao); background: var(--atencao-fundo); border-color: var(--atencao-linha); }

/* ── Numeração: divergência entre o flow e a Spedy ── */
.ui-numeracao { display: grid; gap: var(--esp-3); }
.ui-numeracao__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); }

/* ── Emissão de NFS-e: cliente, serviço, valor e ISS ──
   <div class="ui-emissao__imposto">ISS 2,01% · R$ 24,12</div> */
.ui-emissao { display: grid; gap: var(--esp-3); }
.ui-emissao__cliente { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--esp-2); }
.ui-emissao__campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--esp-3); }
.ui-emissao__discriminacao { grid-column: 1 / -1; }
.ui-emissao__imposto { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--esp-2); padding: var(--esp-3); border-radius: var(--raio-m); background: var(--superficie-suave); font-size: 14px; color: var(--tinta-2); }
.ui-emissao__imposto strong { color: var(--tinta); }

/* ── Nota na lista: cabeçalho com número e situação ── */
.ui-nota { display: grid; gap: var(--esp-2); }
.ui-nota__cabeca { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--esp-2); }
.ui-nota__pares { margin: 0; }
.ui-nota__motivo { margin: 0; padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-m); background: var(--perigo-fundo); color: var(--perigo); font-size: 14px; }
.ui-nota__prazo { font-size: 13px; color: var(--tinta-2); }

/* ── Item de nota de entrada: decisão, conversão e sugestão da Íris ──
   <div class="ui-entrada-item__sugestao ui-ia">…</div> */
.ui-entrada-item { display: grid; gap: var(--esp-2); padding: var(--esp-3); border: 1px solid var(--linha-media); border-radius: var(--raio-m); background: var(--superficie); color: var(--tinta); }
.ui-entrada-item__linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: var(--esp-2); align-items: baseline; }
.ui-entrada-item__sugestao { display: grid; gap: var(--esp-1); padding: var(--esp-2) var(--esp-3); border: 1px solid var(--ia-linha); border-radius: var(--raio-m); background: var(--ia-fundo); font-size: 14px; }
.ui-entrada-item__conversao { margin: 0; font-size: 14px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.ui-entrada-item__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); }

/* ── Envio de notas: relatório da leitura ── */
.ui-envio-notas { display: grid; gap: var(--esp-3); }
.ui-envio-notas__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); }
.ui-envio-notas__linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--esp-1) var(--esp-2); align-items: center; font-size: 14px; }
.ui-envio-notas__linha .ui-progresso { grid-column: 1 / -1; }

/* ── Obrigações fiscais: grupos de vencidas e próximas ── */
.ui-obrigacoes { display: grid; gap: var(--esp-4); }
.ui-obrigacoes__grupo { display: grid; gap: var(--esp-2); }
.ui-obrigacoes__titulo { margin: 0; font-size: 16px; font-weight: 700; }

/* ── Pacote do contador: colunas de itens, envios e conferências ── */
.ui-pacote-cont { display: grid; gap: var(--esp-4); }
.ui-pacote-cont__colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--esp-4); }
.ui-pacote-cont__bloco { display: grid; gap: var(--esp-2); align-content: start; min-width: 0; }
.ui-pacote-cont__titulo { margin: 0; font-size: 16px; font-weight: 700; }

/* ── Caixa de documentos: prévia ao lado da confirmação ── */
.ui-doc-classificar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--esp-3); align-items: start; }
.ui-doc-classificar__previa { display: grid; place-items: center; gap: var(--esp-1); min-height: 8rem; padding: var(--esp-3); border: 1px dashed var(--linha-forte); border-radius: var(--raio-m); background: var(--superficie-suave); color: var(--tinta-2); font-size: 13px; text-align: center; }
.ui-doc-classificar__corpo { display: grid; gap: var(--esp-2); min-width: 0; }

/* ── DRE: linhas em grade; grupos abrem com details ──
   <dl class="ui-dre__linha ui-dre__linha--total">…</dl> */
.ui-dre { container-type: inline-size; display: grid; gap: var(--esp-1); }
.ui-dre__linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 7.5rem) minmax(0, 7.5rem) minmax(0, 6.5rem); gap: var(--esp-2); align-items: baseline; margin: 0; padding: var(--esp-1) var(--esp-2); border-bottom: 1px solid var(--linha); font-size: 14px; color: var(--tinta); }
.ui-dre__linha--cabeca { font-size: 13px; color: var(--tinta-2); }
.ui-dre__linha--total { font-weight: 700; }
.ui-dre__linha--detalhe { padding-left: var(--esp-6); color: var(--tinta-2); }
.ui-dre__num { text-align: right; font-variant-numeric: tabular-nums; }
.ui-dre__grupo > summary { cursor: pointer; list-style: none; }
.ui-dre__grupo > summary::-webkit-details-marker { display: none; }
.ui-dre__filhos { display: grid; }
@container (max-width: 26rem) {
  .ui-dre__linha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ui-dre__rotulo, .ui-dre__var { grid-column: 1 / -1; }
  .ui-dre__num { text-align: left; }
}

/* ── Funil de leads: colunas por etapa ── */
.ui-funil { display: grid; gap: var(--esp-3); }
.ui-funil__colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--esp-2); align-items: start; }
.ui-funil__coluna { display: grid; gap: var(--esp-2); align-content: start; min-width: 0; padding: var(--esp-2); border-radius: var(--raio-m); background: var(--superficie-suave); }
.ui-funil__cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-1); font-size: 14px; font-weight: 700; }
.ui-funil__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); }
.ui-funil__cartao { display: grid; gap: var(--esp-1); padding: var(--esp-2); border: 1px solid var(--linha-media); border-radius: var(--raio-p); background: var(--superficie); color: var(--tinta); font-size: 14px; }
.ui-funil__nome { font-weight: 700; }
.ui-funil__meta { font-size: 13px; color: var(--tinta-2); }

/* ── Ficha do lead: próximo passo e temperatura ── */
.ui-lead { display: grid; gap: var(--esp-4); }
.ui-lead__temperatura { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.ui-lead__proximo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--esp-2); }
.ui-lead__proximo .ui-campo { flex: 1 1 12rem; min-width: 0; }

/* ── Programa de indicação: regra, link e painel; página de quem recebe o link ── */
.ui-indicacao { display: grid; gap: var(--esp-4); }
.ui-indicacao__regra { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--tinta); }
.ui-indicacao__doc { display: grid; gap: var(--esp-3); max-width: 36rem; margin-inline: auto; padding: var(--esp-6); border: 1px solid var(--linha-forte); border-radius: var(--raio-p); background: var(--superficie); color: var(--tinta); }
.ui-indicacao__titulo { margin: 0; font-size: 22px; font-weight: 700; }
.ui-indicacao__texto { margin: 0; font-size: 14px; color: var(--tinta-2); }

/* ── Crédito do cliente: saldo grande e movimentos ── */
.ui-credito { display: grid; gap: var(--esp-3); }
.ui-credito__saldo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--esp-2); }
.ui-credito__valor { margin: 0; font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-credito__nota { margin: 0; font-size: 14px; color: var(--tinta-2); }

/* Complementos de marcação (recibo, forma de pagamento, numeração, programa) */
.ui-recibo__codigo { margin: 0; font-size: 13px; color: var(--tinta-2); }
.ui-receber__valor { min-width: 0; }
.ui-receber__remover { align-self: end; }
.ui-numeracao__divergencia .ui-aviso__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.ui-indicacao__campos { display: grid; gap: var(--esp-3); }

/* Largura segura no celular: textos longos quebram dentro do cartão */
.ui-entrada-item, .ui-entrada-item__sugestao, .ui-entrada-item__acoes { min-width: 0; }
.ui-entrada-item__sugestao { overflow-wrap: anywhere; }
.ui-entrada-item__acoes .ui-botao { white-space: normal; max-width: 100%; text-align: center; }
.ui-obrigacoes .ui-tabela--cartoes table, .ui-obrigacoes .ui-tabela--cartoes tbody, .ui-obrigacoes .ui-tabela--cartoes tr { min-width: 0; width: 100%; }
.ui-obrigacoes .ui-tabela--cartoes td { overflow-wrap: anywhere; }

/* ProntidaoFiscal: checklist da nota de serviço; o texto e a ação quebram linha no celular. */
.ui-prontidao .ui-cartao__topo { flex-wrap: wrap; }
.ui-prontidao .ui-checklist__item { flex-wrap: wrap; }
.ui-prontidao .ui-checklist__texto { min-width: 0; flex: 1 1 12rem; overflow-wrap: anywhere; }
.ui-prontidao .ui-botao { max-width: 100%; white-space: normal; text-align: center; }

/* Ponto e RH */

/* ── Tons de batida (decisão do design system): entrada ok, pausa e volta atencao, saída info.
   Vermelho nunca é saída. A batida sempre leva o nome escrito. ── */
.ui-batida { display: inline-flex; align-items: center; gap: var(--esp-1); padding: var(--esp-1) var(--esp-3); border: 1px solid var(--linha-media); border-radius: var(--raio-pilula); background: var(--superficie-suave); color: var(--tinta); font: inherit; font-size: 14px; }
.ui-batida--entrada { background: var(--ok-fundo); border-color: var(--ok-linha); }
.ui-batida--pausa { background: var(--atencao-fundo); border-color: var(--atencao-linha); }
.ui-batida--saida { background: var(--info-fundo); border-color: var(--info-linha); }
.ui-batida__hora { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── SeletorBatida: três opções grandes no celular ── */
.ui-batida-seletor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-3); }
.ui-batida-seletor .ui-batida { flex-direction: column; justify-content: center; min-height: 6rem; border-radius: var(--raio-m); padding: var(--esp-4) var(--esp-2); font-size: 16px; font-weight: 700; cursor: pointer; }
.ui-batida-seletor .ui-batida[aria-pressed="true"] { border-width: 2px; border-color: var(--marca); }
.ui-batida-seletor .ui-batida__apoio { font-size: 13px; font-weight: 400; color: var(--tinta-2); }
.ui-batida-feita { display: flex; flex-direction: column; gap: var(--esp-2); }

/* ── QuiosquePonto: tela de aparelho compartilhado; o escuro é fixo (data-theme no próprio elemento) ── */
.ui-quiosque { display: flex; flex-direction: column; align-items: center; gap: var(--esp-4); padding: var(--esp-6) var(--esp-4); background: var(--fundo); color: var(--tinta); border-radius: var(--raio-g); text-align: center; }
.ui-quiosque__empresa { margin: 0; font-size: 16px; color: var(--tinta-2); }
.ui-quiosque__relogio { margin: 0; font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-quiosque__camera { width: min(100%, 300px); aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--esp-2); padding: var(--esp-4); border: 2px solid var(--linha-forte); border-radius: var(--raio-g); background: var(--superficie); color: var(--tinta-2); font-size: 16px; }
.ui-quiosque__resultado { width: min(100%, 420px); padding: var(--esp-4); border: 1px solid var(--linha-media); border-radius: var(--raio-g); background: var(--superficie); color: var(--tinta); font-size: 22px; font-weight: 700; }
.ui-quiosque__resultado--ok { background: var(--ok-fundo); border-color: var(--ok-linha); }
.ui-quiosque__pin { width: min(100%, 320px); display: flex; flex-direction: column; gap: var(--esp-2); }

/* ── CapturaRosto: moldura oval e progresso das fotos ── */
.ui-rosto__consentimento { padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-m); background: var(--superficie-suave); font-size: 16px; }
.ui-rosto__moldura { width: min(100%, 240px); aspect-ratio: 3 / 4; margin-inline: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--esp-2); padding: var(--esp-4); border: 3px solid var(--marca); border-radius: 50%; background: var(--superficie-suave); color: var(--tinta-2); font-size: 14px; text-align: center; }
.ui-rosto__moldura .ui-icone { width: 32px; height: 32px; }
.ui-rosto__progresso { margin: 0; }

/* ── DiaPonto: a linha de um dia no ponto do mês ── */
.ui-dia-ponto { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--esp-3) var(--esp-4); padding: var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); }
.ui-dia-ponto__dia { flex: 0 0 8rem; }
.ui-dia-ponto__data { margin: 0; font-weight: 700; }
.ui-dia-ponto__escala { margin: 0; font-size: 14px; color: var(--tinta-2); }
.ui-dia-ponto__batidas { flex: 1 1 14rem; display: flex; flex-wrap: wrap; gap: var(--esp-2); margin: 0; padding: 0; list-style: none; }
.ui-dia-ponto__batidas li { display: flex; }
.ui-dia-ponto__fonte { display: inline-flex; color: var(--tinta-2); }
.ui-dia-ponto__veredito { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-2); }
.ui-dia-ponto__horas { margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.ui-dia-ponto__antes { text-decoration: line-through; color: var(--tinta-3); }
.ui-dia-ponto__motivo { flex: 1 0 100%; margin: 0; padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-m); background: var(--superficie-suave); font-size: 14px; color: var(--tinta-2); }

/* ── ConferenciaMes: uma pessoa na conferência do mês (RH) ── */
.ui-conferencia-mes { display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); }
.ui-conferencia-mes__cabeca { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--esp-2); }
.ui-conferencia-mes__nome { margin: 0; font-size: 16px; font-weight: 700; }
.ui-conferencia-mes__cargo { margin: 0; font-size: 14px; color: var(--tinta-2); }
.ui-conferencia-mes__contagens { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr)); gap: var(--esp-2) var(--esp-3); margin: 0; }
.ui-conferencia-mes__contagens dt { font-size: 13px; color: var(--tinta-2); }
.ui-conferencia-mes__contagens dd { margin: 0; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-conferencia-mes__dias { margin: 0; padding: var(--esp-3) 0 0; border-top: 1px solid var(--linha); list-style: none; display: flex; flex-direction: column; gap: var(--esp-2); font-size: 14px; }
.ui-conferencia-mes__dias li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--esp-2); }

/* ── PendenciaPonto: um dia com problema de ponto, resolvido pelo RH ── */
.ui-pendencia-ponto { display: flex; flex-direction: column; gap: var(--esp-3); }
.ui-pendencia-ponto__problema { margin: 0; font-size: 14px; color: var(--tinta-2); }
.ui-pendencia-ponto__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.ui-pendencia-ponto__quem { margin: 0; font-size: 14px; color: var(--tinta-2); }

/* ── FechamentoFolha: passos com trava e o resumo em reais ── */
.ui-fechamento-folha { display: flex; flex-direction: column; gap: var(--esp-4); }
.ui-fechamento-folha .ui-pares { margin: 0; }
.ui-fechamento-folha__enviado { margin: 0; font-size: 14px; color: var(--tinta-2); }

/* ── GradeEscala: escala do mês com turno em letra; a cor só reforça ── */
.ui-escala .ui-grade-dias__celula { min-width: 2.25rem; font-weight: 700; }
.ui-escala__celula--m { background: var(--info-fundo); color: var(--tinta); }
.ui-escala__celula--t { background: var(--ok-fundo); color: var(--tinta); }
.ui-escala__celula--f { background: var(--superficie-suave); color: var(--tinta-2); }
.ui-escala__celula--feriado { background: var(--atencao-fundo); color: var(--tinta); }
.ui-escala__celula--cobertura { outline: 2px dashed var(--marca); outline-offset: -2px; }
.ui-escala__celula--ajustada { text-decoration: underline; text-decoration-thickness: 2px; }
.ui-escala th[aria-current="date"] { outline: 2px solid var(--marca); outline-offset: -2px; }
.ui-escala__legenda { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); margin: 0; padding: 0; list-style: none; font-size: 14px; }
.ui-escala__legenda li { display: flex; align-items: center; gap: var(--esp-2); }
.ui-escala__chave { display: inline-flex; min-width: 1.75rem; justify-content: center; padding: 0 var(--esp-1); border-radius: var(--raio-p); font-weight: 700; }

/* ── ParametroConvencao: um parâmetro da CCT com a cláusula que o cita ── */
.ui-convencao { display: flex; flex-direction: column; gap: var(--esp-3); }
.ui-convencao__valor { margin: 0; font-size: 22px; font-weight: 700; }
.ui-convencao__citacao { margin: 0; padding: var(--esp-3) var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie-suave); color: var(--tinta-2); font-size: 14px; }
.ui-convencao__citacao cite { display: block; margin-bottom: var(--esp-1); font-style: normal; font-weight: 700; color: var(--tinta); }
.ui-convencao--ia { padding: var(--esp-3); border: 1px solid var(--ia-linha); border-radius: var(--raio-m); background: var(--ia-fundo); }
.ui-convencao__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); }

/* ── AdmissaoFaltas: o que falta para a admissão, com quem envia ── */
.ui-admissao { display: flex; flex-direction: column; gap: var(--esp-3); }
.ui-admissao__lista { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ui-admissao__item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--esp-2); padding: var(--esp-2) 0; border-bottom: 1px solid var(--linha); }
.ui-admissao__ia { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-3); border: 1px solid var(--ia-linha); border-radius: var(--raio-m); background: var(--ia-fundo); font-size: 14px; }
.ui-admissao__ia p { margin: 0; }

/* ── MeuRhInicio: a entrada do colaborador, celular primeiro ── */
.ui-meu-rh { display: flex; flex-direction: column; gap: var(--esp-3); }
.ui-meu-rh__saudacao { margin: 0; font-size: 22px; font-weight: 700; }
.ui-meu-rh__cartao { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); }
.ui-meu-rh__cabeca { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--esp-2); }
.ui-meu-rh__cabeca h2 { margin: 0; font-size: 16px; }
.ui-meu-rh__destaque { margin: 0; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-meu-rh__lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.ui-meu-rh__lista li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--esp-2); padding: var(--esp-2) 0; border-bottom: 1px solid var(--linha); }

/* ── PedidoRh: um pedido com a linha do tempo e a caixa do RH ── */
.ui-pedido-rh { display: flex; flex-direction: column; gap: var(--esp-3); }
.ui-pedido-rh__caixa { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.ui-pedido-rh__caixa li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--esp-2); padding: var(--esp-3) 0; border-bottom: 1px solid var(--linha); }
.ui-pedido-rh__caixa p { margin: 0; }

/* ── Holerites: lote do contador, separado por pessoa, e o progresso das assinaturas ── */
.ui-holerites { display: flex; flex-direction: column; gap: var(--esp-4); }
.ui-holerites__envio { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--esp-3); }
.ui-holerites__envio .ui-campo { flex: 1 1 14rem; }
.ui-holerites__tabela td { font-size: 14px; }

/* ── TrocaEscala: dois dias lado a lado, com a aceitação da colega ── */
.ui-troca-escala { display: flex; flex-direction: column; gap: var(--esp-3); }
.ui-troca-escala__dias { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--esp-3); }
.ui-troca-escala__dia { flex: 1 1 9rem; display: flex; flex-direction: column; gap: var(--esp-1); padding: var(--esp-3); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie-suave); }
.ui-troca-escala__dia p { margin: 0; }
.ui-troca-escala__seta { align-self: center; display: inline-flex; color: var(--tinta-2); }

/* ── EspelhoPonto: a folha é a ui-folha da base (A4 de papel); aqui só a tabela do mês e as marcas do espelho ── */
.ui-espelho { min-width: 0; }
.ui-espelho__tabela { font-size: 13px; }
.ui-espelho__tabela th, .ui-espelho__tabela td { padding: var(--esp-1) var(--esp-2); vertical-align: top; font-variant-numeric: tabular-nums; }
.ui-espelho__dom td { background: var(--papel-suave); color: var(--papel-tinta-2); }
.ui-espelho__totais td { font-weight: 700; border-top: 1px solid var(--papel-linha-forte); }
.ui-espelho__legenda { margin: var(--esp-3) 0 0; font-size: 13px; color: var(--papel-tinta-2); }
.ui-escala--semana table { table-layout: fixed; width: 100%; }
.ui-escala--semana .ui-grade-dias__celula, .ui-escala--semana .ui-grade-dias__dia { min-width: 0; padding-inline: var(--esp-1); }
.ui-rosto__revogar { white-space: normal; text-align: left; max-width: 100%; }
.ui-fechamento-folha .ui-acoes { flex-wrap: wrap; }
.ui-fechamento-folha .ui-passos__aberto .ui-acoes { display: flex; flex-direction: column; align-items: stretch; }
.ui-fechamento-folha .ui-passos__aberto .ui-botao { white-space: normal; max-width: 100%; }

/* PontoDoMes: o mês de uma pessoa para o RH conferir. Topo (pessoa, mês, situação), regras e limites do mês, totais
   com a explicação aberta (não em tooltip), alertas, e as semanas com os dias. Cada dia: escala, as quatro batidas
   com a marca da fonte, horas, situação e o "Por quê" com a base legal; o RH ajusta, inclui e responde ali mesmo.
   <section class="ui-ponto-mes"><header class="ui-ponto-mes__topo">…</header>
   <details class="ui-acordeao ui-ponto-mes__regras" open>…<dl class="ui-pares">…</dl></details>
   <div class="ui-ponto-mes__totais"><details class="ui-ponto-mes__total"><summary><span class="ui-ponto-mes__total-rotulo">HE 50%</span><strong class="ui-ponto-mes__total-valor">4:40</strong></summary><p>…</p></details>…</div>
   <section class="ui-ponto-mes__semana"><header class="ui-ponto-mes__semana-topo">…</header>
   <article class="ui-ponto-mes__dia [esta-pendente]" id="pmes-20261013"><div class="ui-ponto-mes__quando">…</div>
   <ol class="ui-ponto-mes__batidas"><li><span class="ui-ponto-mes__slot">entrada</span><button class="ui-batida ui-batida--entrada">…</button></li>…</ol>
   <div class="ui-ponto-mes__horas">…</div><div class="ui-ponto-mes__situacao">…</div>
   <details class="ui-ponto-mes__porque">…</details></article></section></section> */
.ui-ponto-mes { container-type: inline-size; display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.ui-ponto-mes__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.ui-ponto-mes__quem { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-ponto-mes__nome { margin: 0; font-size: 22px; font-weight: 700; }
.ui-ponto-mes__regras .ui-pares { padding: var(--esp-3) 0; }
.ui-ponto-mes__regras dd { overflow-wrap: anywhere; }
.ui-ponto-mes__totais { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); gap: var(--esp-2); }
.ui-ponto-mes__total { display: flex; flex-direction: column; min-width: 0; padding: var(--esp-3); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); }
.ui-ponto-mes__total > summary { display: flex; flex-direction: column; gap: 2px; cursor: pointer; list-style: none; }
.ui-ponto-mes__total > summary::-webkit-details-marker { display: none; }
.ui-ponto-mes__total-rotulo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-1); font-size: 14px; font-weight: 700; color: var(--tinta-2); }
.ui-ponto-mes__total-valor { font-size: 22px; font-variant-numeric: tabular-nums; }
.ui-ponto-mes__total-apoio { font-size: 13px; color: var(--tinta-2); }
.ui-ponto-mes__total > p { margin: var(--esp-2) 0 0; font-size: 14px; color: var(--tinta-2); }
.ui-ponto-mes__total.esta-atencao { border-color: var(--atencao-linha); }
.ui-ponto-mes__total.esta-atencao .ui-ponto-mes__total-valor { color: var(--atencao); }
.ui-ponto-mes__alertas { display: flex; flex-direction: column; gap: var(--esp-2); margin: 0; padding: 0; list-style: none; }
.ui-ponto-mes__semana { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }
.ui-ponto-mes__semana-topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--esp-1) var(--esp-3); padding: var(--esp-2) 0; border-bottom: 2px solid var(--linha-forte); }
.ui-ponto-mes__semana-titulo { margin: 0; font-size: 16px; font-weight: 700; display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.ui-ponto-mes__semana-numeros { margin: 0; font-size: 14px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.ui-ponto-mes__semana-numeros strong { color: var(--tinta); }
.ui-ponto-mes__dia { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-2) var(--esp-4); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); }
.ui-ponto-mes__dia.esta-pendente { border-color: var(--atencao-linha); background: var(--atencao-fundo); }
.ui-ponto-mes__dia.esta-folga { background: var(--superficie-suave); }
.ui-ponto-mes__quando { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--esp-2); }
.ui-ponto-mes__data { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-ponto-mes__escala { margin: 0; font-size: 14px; color: var(--tinta-2); }
.ui-ponto-mes__batidas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-2); margin: 0; padding: 0; list-style: none; }
.ui-ponto-mes__batidas > li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-ponto-mes__slot { font-size: 13px; color: var(--tinta-2); }
.ui-ponto-mes__batidas .ui-batida { justify-content: center; min-height: 36px; padding: var(--esp-1) var(--esp-2); font: inherit; color: var(--tinta); cursor: pointer; }
.ui-ponto-mes__vazia { display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-1); min-height: 36px; border: 1px dashed var(--linha-forte); border-radius: var(--raio-pilula); background: transparent; color: var(--tinta-2); font: inherit; font-size: 14px; cursor: pointer; }
.ui-ponto-mes__marca { font-size: 13px; font-weight: 400; color: var(--tinta-2); }
.ui-ponto-mes__descartada { font-size: 13px; color: var(--tinta-2); }
.ui-ponto-mes__descartada s { color: var(--tinta-3); }
.ui-ponto-mes__horas { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-3); margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.ui-ponto-mes__horas strong { font-size: 16px; }
.ui-ponto-mes__situacao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.ui-ponto-mes__porque { border-top: 1px solid var(--linha); padding-top: var(--esp-2); font-size: 14px; }
.ui-ponto-mes__porque > summary { cursor: pointer; font-weight: 700; color: var(--tinta-2); }
.ui-ponto-mes__porque ul { margin: var(--esp-2) 0 0; padding-left: var(--esp-5); display: flex; flex-direction: column; gap: var(--esp-1); }
.ui-ponto-mes__contesta { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-3); border: 1px solid var(--info-linha); border-radius: var(--raio-m); background: var(--superficie); }
.ui-ponto-mes__contesta > p { margin: 0; font-size: 14px; }
.ui-ponto-mes__ajuste { display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-3); border: 1px solid var(--linha-media); border-radius: var(--raio-m); background: var(--superficie); }
.ui-ponto-mes__rodape { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--esp-3); padding-top: var(--esp-3); border-top: 1px solid var(--linha); }
@container (min-width: 760px) {
  .ui-ponto-mes__dia { grid-template-columns: 8rem minmax(0, 1fr) 11rem; align-items: start; }
  .ui-ponto-mes__quando { flex-direction: column; }
  .ui-ponto-mes__horas { flex-direction: column; gap: 2px; }
  .ui-ponto-mes__situacao, .ui-ponto-mes__porque, .ui-ponto-mes__contesta, .ui-ponto-mes__ajuste { grid-column: 2 / -1; }
}
@container (max-width: 420px) {
  .ui-ponto-mes__batidas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ui-ponto-mes__topo > .ui-etiqueta { white-space: normal; }

/* ConferenciaPonto: horas e dinheiro de uma pessoa no mês, contra o PontoTel, o enviado à CONTAD e o pago no holerite.
   Veredito no alto (ui-aviso), a tabela de comparação, e os dias com diferença, cada um com a causa e de que lado ela pesa.
   <section class="ui-conferencia-ponto"><header class="ui-conferencia-ponto__topo">…</header><div class="ui-aviso …">veredito</div>
   <div class="ui-tabela">…<tr class="ui-conferencia-ponto__diferenca">Certo − pago…</tr></div>
   <details class="ui-conferencia-ponto__dia"><summary>…21/09 · certo 1:00 HE50 · PontoTel 0:00 · <span class="ui-etiqueta">a favor</span></summary>
   <p class="ui-conferencia-ponto__causa"><strong>…</strong> …</p></details></section> */
.ui-conferencia-ponto { container-type: inline-size; display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.ui-conferencia-ponto__topo { display: flex; flex-direction: column; gap: 2px; }
.ui-conferencia-ponto__nome { margin: 0; font-size: 22px; font-weight: 700; }
.ui-conferencia-ponto .ui-tabela tr.ui-conferencia-ponto__diferenca td, .ui-conferencia-ponto .ui-tabela tr.ui-conferencia-ponto__diferenca th { font-weight: 700; color: var(--perigo); border-top: 2px solid var(--linha-forte); }
.ui-conferencia-ponto__dias { display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-conferencia-ponto__dia { padding: var(--esp-3) var(--esp-4); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); }
.ui-conferencia-ponto__dia.esta-diferenca { border-color: var(--atencao-linha); }
.ui-conferencia-ponto__dia > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1) var(--esp-3); cursor: pointer; font-size: 14px; font-variant-numeric: tabular-nums; }
.ui-conferencia-ponto__dia > summary > strong { font-size: 16px; }
.ui-conferencia-ponto__dia > summary > .ui-etiqueta { margin-left: auto; }
.ui-conferencia-ponto__causa { margin: var(--esp-3) 0 0; padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-p); background: var(--superficie-suave); font-size: 14px; }
.ui-conferencia-ponto__dia ul { margin: var(--esp-2) 0 0; padding-left: var(--esp-5); font-size: 14px; color: var(--tinta-2); }
.ui-conferencia-ponto__decidir { display: flex; flex-direction: column; gap: var(--esp-3); }

/* ══ Cadastros, busca e páginas públicas (proposta-cadastros, 18/10) ═══════════════════════════════════ */

/* Formulário */
.ui-form { display: flex; flex-direction: column; gap: var(--esp-5); min-width: 0; }
.ui-form__secao { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--esp-4); padding: var(--esp-6); border: 0; border-radius: var(--raio-g); background: var(--superficie); box-shadow: var(--sombra); }
@container (max-width: 560px) { .ui-form__secao { padding: var(--esp-4); } }
.ui-form__titulo { display: flex; align-items: center; gap: var(--esp-3); padding: 0; font-size: 18px; line-height: 1.35; font-weight: 700; color: var(--tinta); }
details.ui-form__secao > summary.ui-form__titulo { min-height: var(--alvo); cursor: pointer; list-style: none; }
details.ui-form__secao > summary::-webkit-details-marker { display: none; }
details.ui-form__secao > summary > .ui-icone:last-child { margin-left: auto; color: var(--tinta-2); transition: transform 0.15s ease; }
details.ui-form__secao[open] > summary > .ui-icone:last-child { transform: rotate(180deg); }
.ui-form__corpo { display: flex; flex-direction: column; gap: var(--esp-4); padding-top: var(--esp-2); }
.ui-form__num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: var(--raio-pilula); background: var(--marca-suave); color: var(--marca); font-size: 14px; }
.ui-form__ajuda { margin: calc(-1 * var(--esp-2)) 0 0; max-width: 72ch; font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.ui-campo__obrigatorio { color: var(--perigo); }
.ui-campo--curto { max-width: 12rem; }
.ui-opcoes { margin: 0; padding: 0; border: 0; min-width: 0; }
.ui-opcoes > legend { padding: 0; margin-bottom: 6px; }
.ui-form__rodape { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); }
.ui-form__nota { margin: 0 0 0 auto; font-size: 14px; color: var(--tinta-2); }
.ui-form__rodape--fixo { position: sticky; bottom: 0; z-index: 6; padding: var(--esp-3) var(--esp-4) calc(var(--esp-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--linha); border-radius: var(--raio-g) var(--raio-g) 0 0; background: var(--superficie); box-shadow: var(--sombra-flutuante); }
@media (max-width: 720px) {
  :root { --ui-baixo-celular: 88px; } /* a barra do trilho no celular; conferir na captura (os toasts usam 96 px) */
  .ui-form__rodape--fixo { bottom: var(--ui-baixo-celular); border-radius: var(--raio-g); }
  .ui-form__rodape > .ui-botao--primario { flex: 1 1 100%; }
  .ui-form__nota { margin: 0; }
}
.ui-resumo-erros { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-4); border: 1px solid var(--perigo-linha); border-left-width: 4px; border-left-color: var(--perigo); border-radius: var(--raio-m); background: var(--perigo-fundo); color: var(--tinta); }
.ui-resumo-erros:focus { outline: 3px solid var(--foco); outline-offset: 2px; }
.ui-resumo-erros__titulo { margin: 0; display: flex; align-items: center; gap: var(--esp-2); font-weight: 700; color: var(--perigo); }
.ui-resumo-erros ul { margin: 0; padding-left: var(--esp-5); }
.ui-resumo-erros a { color: var(--tinta); text-decoration: underline; }
.ui-form__progresso { display: flex; flex-direction: column; gap: 6px; }
.ui-form__progresso > p { margin: 0; font-size: 14px; color: var(--tinta-2); }
.ui-form__progresso > p strong { color: var(--tinta); }
.ui-form__progresso progress { appearance: none; width: 100%; height: 8px; border: 0; border-radius: var(--raio-pilula); background: var(--fundo-barra); overflow: hidden; }
.ui-form__progresso progress::-webkit-progress-bar { background: var(--fundo-barra); }
.ui-form__progresso progress::-webkit-progress-value { background: var(--marca); border-radius: var(--raio-pilula); }
.ui-form__progresso progress::-moz-progress-bar { background: var(--marca); border-radius: var(--raio-pilula); }
.ui-form__secao[hidden], .ui-sugestoes[hidden], .ui-cartao[hidden] { display: none; }

/* Arquivo */
.ui-arquivo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); min-width: 0; cursor: pointer; }
.ui-arquivo:has(input:focus-visible) > .ui-botao { outline: 3px solid var(--foco); outline-offset: 2px; }
.ui-arquivo__nome { min-width: 0; font-size: 14px; color: var(--tinta-2); overflow-wrap: anywhere; }

/* Escolher (combobox) */
.ui-escolher__caixa { position: relative; }
.ui-sugestoes { position: absolute; z-index: 20; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: var(--esp-1); list-style: none; max-height: min(320px, 50vh); overflow-y: auto; border: 1px solid var(--linha-media); border-radius: var(--raio-m); background: var(--superficie); box-shadow: var(--sombra-flutuante); }
.ui-sugestoes__item { display: flex; align-items: center; gap: var(--esp-3); min-height: var(--alvo); padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-p); cursor: pointer; }
.ui-sugestoes__item[aria-selected="true"], .ui-sugestoes__item:hover { background: var(--marca-suave); }
.ui-sugestoes__texto { display: flex; flex-direction: column; min-width: 0; }
.ui-sugestoes__apoio { font-size: 14px; color: var(--tinta-2); overflow-wrap: anywhere; }
.ui-sugestoes__vazio, .ui-sugestoes__novo { padding: var(--esp-2) var(--esp-3); font-size: 14px; color: var(--tinta-2); }

/* Busca e listas */
.ui-realce, .ui-resultado mark { background: transparent; color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--marca-linha); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.ui-busca--grande .ui-entrada { min-height: 56px; font-size: 18px; border-radius: var(--raio-pilula); }
.ui-busca-global { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--esp-3); }
.ui-busca-global > .ui-campo { flex: 1 1 320px; }
.ui-busca-vazia { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--esp-5); }
.ui-dicas { margin: 0; padding-left: var(--esp-5); display: flex; flex-direction: column; gap: var(--esp-1); color: var(--tinta-2); }
.ui-resultados__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ui-resultados__lista > li + li { border-top: 1px solid var(--linha); }
.ui-resultado { display: flex; align-items: center; gap: var(--esp-3); min-height: var(--linha-min); padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-m); color: inherit; text-decoration: none; }
a.ui-resultado:hover { background: var(--superficie-suave); }
a.ui-resultado:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.ui-resultado__icone { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--raio-pilula); background: var(--superficie-suave); color: var(--tinta-2); }
.ui-resultado__texto { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-resultado__titulo { font-weight: 700; overflow-wrap: anywhere; }
.ui-resultado__apoio { font-size: 14px; color: var(--tinta-2); overflow-wrap: anywhere; }
.ui-resultado__lado { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--esp-1); font-size: 14px; color: var(--tinta-3); }
@container (max-width: 560px) { .ui-resultado { flex-wrap: wrap; } .ui-resultado__lado { flex-direction: row; align-items: center; width: 100%; padding-left: 52px; } }
.ui-chip[aria-current="page"] { background: var(--marca-suave); border-color: var(--marca); color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.ui-contagem { margin: 0; font-size: 14px; color: var(--tinta-2); }
.ui-contagem strong { color: var(--tinta); }
.ui-barra-lista { align-items: flex-end; }
.ui-barra-lista__busca { flex: 1 1 280px; max-width: 480px; }

/* Página pública */
.ui-pub { min-height: 100vh; display: flex; flex-direction: column; background: var(--fundo); color: var(--tinta); }
.ui-pub [hidden] { display: none !important; }
.ui-pub__topo, .ui-pub__conteudo, .ui-pub__rodape { width: 100%; max-width: var(--ui-pub-largura, 40rem); margin: 0 auto; }
.ui-pub--larga { --ui-pub-largura: 60rem; }
.ui-pub__topo { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-5) var(--esp-4) var(--esp-3); }
.ui-pub__logo { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; overflow: hidden; border-radius: var(--raio-m); background: var(--marca); color: var(--sobre-marca); font-size: 20px; font-weight: 700; }
.ui-pub__logo img { width: 100%; height: 100%; object-fit: contain; background: var(--superficie); }
.ui-pub__empresa { display: flex; flex-direction: column; min-width: 0; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.ui-pub__contato { font-size: 14px; font-weight: 400; color: var(--tinta-2); }
.ui-pub__conteudo { flex: 1 0 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--esp-5); padding: var(--esp-2) var(--esp-4) var(--esp-8); }
.ui-pub__titulo { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 700; overflow-wrap: anywhere; }
.ui-pub__apoio { margin: 0; color: var(--tinta-2); }
.ui-pub__valor { margin: 0; font-size: 32px; line-height: 1.15; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-pub code, .ui-pub .ui-codigo { overflow-wrap: anywhere; }
.ui-pub__rodape { padding: var(--esp-4); border-top: 1px solid var(--linha); font-size: 13px; color: var(--tinta-3); text-align: center; }
@media (max-width: 560px) { .ui-pub__titulo { font-size: 22px; } .ui-pub__valor { font-size: 28px; } }

/* ══ Meu RH: formulários do colaborador e a visão do grupo (MR, 18/10) ═══════════════════════════════════ */

/* Impressão digital (SHA-256) do documento: quebra em qualquer lugar em vez de estourar a coluna */
.ui-mono--quebra { overflow-wrap: anywhere; }

/* ══ Páginas públicas de ação: teste de conexão e rotina do ponto (U2, 18/10) ═══════════════════════════ */

/* Teste de conexão (/teste/{token}): as linhas de medida e os números grandes */
.ui-teste { display: flex; flex-direction: column; gap: var(--esp-5); min-width: 0; }
.ui-teste__etapa { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.ui-teste__linha { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-3); padding: var(--esp-3) 0; border-bottom: 1px solid var(--linha); }
.ui-teste__linha:last-child { border-bottom: 0; }
.ui-teste__linha .valor { font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-teste__linha[data-estado="medindo"] .valor { color: var(--info); }
.ui-teste__linha[data-estado="feito"] .valor { color: var(--ok); }
.ui-teste__linha[data-estado="erro"] .valor { color: var(--perigo); }
.ui-teste__numeros { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-3); text-align: center; }
.ui-teste__numeros .ui-kpi__valor { font-variant-numeric: tabular-nums; }
.ui-teste__latencia { grid-column: 1 / -1; }
.ui-teste .ui-chips { flex-wrap: wrap; }

/* Rotina do ponto (/ponto/rotina/{token}): as regras do cartão, que antes vinham no <style> da página */
.rotina-cartao fieldset:not(:has(input[value=nao]:checked)) input[name^=obs] { display: none; }
.rotina-cartao .item { display: flex; flex-direction: column; gap: var(--esp-2); }
.rotina-cartao .item .ui-cartao__topo { gap: var(--esp-3); }
.rotina-cartao .item .ui-etiqueta { margin-left: var(--esp-2); }
img.miniatura { max-width: 140px; max-height: 140px; border-radius: 10px; object-fit: cover; }
.rotina .item .tag { font-size: 0.75rem; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.rotina [hidden], .item-ed [hidden] { display: none !important; }
.rotina textarea { font-family: inherit; }
.rotina .opcao input[type=radio] { width: 20px; height: 20px; flex-shrink: 0; }
.rotina .opcao > span { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ui-batidas { display: flex; flex-wrap: wrap; gap: var(--esp-2); list-style: none; margin: 0; padding: 0; }

/* Onda 5a, pacote UI5: as peças novas do flow-ui. Só aditivo; `ui-*` é do UI5 e do AY5. */

/* acoes_cabecalho · largo: secundárias à vista; estreito: só a principal e o "Mais" com tudo. */
.ui-acoes--cabecalho { flex-wrap: wrap; justify-content: flex-end; max-width: 100%; }
.ui-acoes__largo, .ui-acoes__estreito { display: contents; }
.ui-acoes__estreito { display: none; }
@container (max-width: 560px) {
  .ui-acoes__largo { display: none; }
  .ui-acoes__estreito { display: contents; }
  .ui-cabecalho__linha { flex-direction: column; align-items: stretch; }
  .ui-acoes--cabecalho { justify-content: flex-start; }
}

/* termo · <details class="ui-termo"><summary class="ui-termo__palavra">MRR</summary><span class="ui-termo__texto">…</span></details> */
.ui-termo { display: inline; }
.ui-termo > summary { display: inline; cursor: help; list-style: none; border-bottom: 1px dotted var(--tinta-2); }
.ui-termo > summary::-webkit-details-marker { display: none; }
.ui-termo > summary::marker { content: ""; }
.ui-termo > summary:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.ui-termo[open] > .ui-termo__texto {
  display: block; margin-top: var(--esp-1); padding: var(--esp-2) var(--esp-3); max-width: 42ch;
  border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie-suave);
  color: var(--tinta-2); font-size: 14px; line-height: 1.45; font-weight: 400;
}

/* saiba_mais · uma frase à vista e o resto recolhido. */
.ui-saiba-mais { display: flex; flex-direction: column; gap: var(--esp-1); }
.ui-saiba-mais__detalhe > summary { cursor: pointer; color: var(--marca); font-weight: 700; font-size: 14px; }
.ui-saiba-mais__detalhe > summary:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.ui-saiba-mais__corpo { margin-top: var(--esp-2); max-width: 70ch; }

/* vazio_busca */
.ui-vazio--busca { padding-block: var(--esp-8); }

/* atualizado_em */
.ui-atualizado { font-size: 14px; line-height: 1.45; color: var(--tinta-2); }

/* acao_perigosa · <details class="ui-perigo"><summary class="ui-perigo__resumo">…</summary><form class="ui-perigo__form">…</form></details> */
.ui-perigo { display: block; border: 1px solid var(--linha-media); border-radius: var(--raio-m); background: var(--superficie); }
.ui-perigo > summary {
  display: flex; align-items: center; gap: var(--esp-2); min-height: var(--alvo); padding: 0 var(--esp-4);
  color: var(--perigo); font-weight: 700; cursor: pointer; list-style: none;
}
.ui-perigo > summary::-webkit-details-marker { display: none; }
.ui-perigo > summary::marker { content: ""; }
.ui-perigo > summary:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.ui-perigo[open] { border-color: var(--perigo); }
.ui-perigo__form { display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4) var(--esp-4); }


/* ── Acrescentado pelo app (não está no catálogo): só tokens ─────────────── */

/* Link "Pular para o conteúdo": escondido até receber foco; aí aparece no canto de cima. */
.ui-pular { position: fixed; top: var(--esp-2); left: var(--esp-2); z-index: 100; padding: var(--esp-2) var(--esp-4); border-radius: var(--raio-m); background: var(--superficie); color: var(--tinta); font-weight: 700; text-decoration: none; }
.ui-pular:focus { outline: 3px solid var(--foco); outline-offset: 2px; }
.ui-pular:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Avisos no celular: a pilha sobe acima da barra de baixo do trilho (até 720 px), na largura toda. */
@media (max-width: 720px) { .ui-toasts { left: var(--esp-4); right: var(--esp-4); bottom: 96px; width: auto; } }