/* ═══════════════════════════════════════════════════════════════════════
   CRM CONFIANÇA — BASE E COMPONENTES COMPARTILHADOS
   Usado pela equipe (admin/), pelo avaliador (v/) e pelo cliente (cliente/).
   Só a camada semântica de tokens.css. Os componentes reproduzem o
   vocabulário do site (relatório 7 §B.9): papel, hairline, raio de 2px,
   selo com quadradinho, botão em que a tinta sobe, barra "medindo".

   Índice: base · tipografia · botões · campos · escolha (chips) · selos ·
   avisos · cartões · ficha nome/valor · tabela · abas · modal · toast ·
   medindo · menu suspenso · utilitários · movimento reduzido
   ═══════════════════════════════════════════════════════════════════════ */

/* ── base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{background:var(--fundo); -webkit-text-size-adjust:100%; text-size-adjust:100%}
body{background:var(--fundo); color:var(--texto); font-family:var(--sans);
  font-size:var(--fs-corpo); line-height:var(--lh-corpo);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
body::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:var(--grao-opacidade); mix-blend-mode:var(--grao-mistura); background-image:var(--grao)}
::selection{background:var(--selecao-fundo); color:var(--selecao-texto)}
:focus-visible{outline:2px solid var(--acento); outline-offset:2px}
@media (forced-colors: active){ body :focus-visible{outline:2px solid Highlight !important} }
img,svg{display:block; max-width:100%}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
a{color:inherit; text-underline-offset:3px; text-decoration-thickness:1px}
[hidden]{display:none !important}
::-webkit-scrollbar{width:8px; height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--borda-forte); border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--texto-3)}

/* ── tipografia ───────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; text-wrap:balance; color:var(--texto)}
h1,h2{font-variation-settings:var(--serif-titulo); font-optical-sizing:auto}
h1{font-size:var(--fs-h1-app); line-height:1.12; letter-spacing:-.01em}
h2{font-size:var(--fs-h2-app); line-height:1.2}
h3{font-variation-settings:var(--serif-h3); font-size:19px; line-height:1.22}
h4{font-family:var(--sans); font-weight:600; font-size:15px; line-height:1.35}
p{text-wrap:pretty}
.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
.codigo{font-family:var(--mono); font-size:.94em; letter-spacing:0; word-break:break-all}
.rotulo{font-family:var(--sans); font-weight:600; font-size:var(--fs-rotulo);
  letter-spacing:0; text-transform:none; color:var(--acento-texto)}
.sub{color:var(--texto-2); font-size:15px; line-height:1.5}
.fraco{color:var(--texto-3)}
.grafite{color:var(--texto-2)}
.nota{font-size:var(--fs-nota); color:var(--texto-3); line-height:1.45}
.link{color:var(--acento-texto); background:none; border:0; padding:0; font:inherit; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.link:hover{color:var(--texto)}

/* ── botões ───────────────────────────────────────────────────────────────
   .bt               neutro (moldura de papel)
   .bt.principal     laranja; no hover a tinta SOBE de baixo (micro.css do site)
   .bt.discreto      só texto, para ações secundárias em linha
   .bt.perigo        moldura; no hover vira laranja (ação destrutiva)
   .bt.pequeno       versão densa (tabelas); .bt.grande (destaque de tela)
   .bt-icone         quadrado só com ícone (sempre com aria-label)            */
.bt{position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; justify-content:center;
  gap:8px; min-height:40px; padding:8px 16px; border-radius:var(--raio);
  border:1px solid var(--borda-forte); background:var(--cartao); color:var(--texto);
  font-family:var(--sans); font-size:15px; font-weight:600; line-height:1.2; letter-spacing:0;
  text-decoration:none; white-space:nowrap; cursor:pointer; user-select:none;
  transition:border-color var(--tique) ease, background-color var(--tique) ease,
             color var(--gesto) var(--ease), box-shadow var(--gesto) var(--ease), transform 90ms ease-out}
.bt > *{position:relative; z-index:1}
.bt svg{width:18px; height:18px; flex:none}
.bt:hover{border-color:var(--texto-3); background:var(--fundo-2)}
.bt:active{transform:scale(.985)}
.bt[disabled],.bt[aria-disabled="true"]{opacity:.5; cursor:not-allowed; transform:none}
.bt.principal{background:var(--acento); border-color:var(--acento); color:var(--sobre-acento)}
.bt.principal::before{content:""; position:absolute; inset:-1px; z-index:-1; background:var(--preenche-cta);
  transform:translateY(101%); transition:transform 420ms var(--ease)}
.bt.principal:hover{background:var(--acento); box-shadow:var(--sombra-cta)}
.bt.principal:hover::before{transform:translateY(0)}
.bt.principal[disabled]::before{transform:translateY(101%)}
.bt.principal[disabled]:hover{box-shadow:none}
.bt.discreto{border-color:transparent; background:transparent; color:var(--texto-2); padding-left:10px; padding-right:10px}
.bt.discreto:hover{color:var(--texto); background:var(--fundo-2); border-color:transparent}
.bt.perigo:hover{border-color:var(--acento); color:var(--acento-texto); background:var(--cartao)}
.bt.pequeno{min-height:34px; padding:5px 11px; font-size:14px; gap:6px}
.bt.pequeno svg{width:16px; height:16px}
.bt.grande{min-height:52px; padding:12px 24px; font-size:16px}
.bt.largo{width:100%}
.bt.ocupado{cursor:progress}
.bt.ocupado::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:2;
  background:currentColor; transform-origin:left; animation:btMede 1.1s var(--ease) infinite}
@keyframes btMede{0%{transform:scaleX(0)}60%{transform:scaleX(1)}100%{transform:scaleX(1); opacity:0}}
.bt-icone{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  border:1px solid transparent; border-radius:var(--raio); background:transparent; color:var(--texto-2);
  transition:background-color var(--tique) ease, color var(--tique) ease, border-color var(--tique) ease}
.bt-icone:hover{background:var(--fundo-2); color:var(--texto)}
.bt-icone svg{width:18px; height:18px}
@media (pointer:coarse){ .bt{min-height:var(--alvo)} .bt.pequeno{min-height:40px} .bt-icone{width:var(--alvo); height:var(--alvo)} }
.acoes{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.acoes.direita{justify-content:flex-end}

/* ── campos ───────────────────────────────────────────────────────────────
   Rótulo ACIMA, palavra normal (placeholder não substitui rótulo).          */
.campo{display:flex; flex-direction:column; gap:6px; min-width:0}
.campo > .campo-rotulo{font-size:14px; font-weight:500; color:var(--texto-2); line-height:1.3}
.campo > .campo-rotulo .opcional{font-weight:400; color:var(--texto-3)}
.campo-ajuda{font-size:var(--fs-nota); color:var(--texto-3); line-height:1.45}
.campo-erro{font-size:14px; color:var(--acento-texto); line-height:1.4}
.entrada, .campo input:not([type=checkbox]):not([type=radio]):not([type=file]),
.campo select, .campo textarea{width:100%; min-height:42px; padding:9px 12px; font-size:15px; line-height:1.35;
  color:var(--texto); background:var(--cartao); border:1px solid var(--borda-forte);
  border-radius:var(--raio-campo); transition:border-color var(--tique) ease, box-shadow var(--tique) ease}
.campo textarea{min-height:88px; resize:vertical; line-height:1.5}
.entrada::placeholder, .campo input::placeholder, .campo textarea::placeholder{color:var(--placeholder)}
.entrada:hover, .campo input:hover, .campo select:hover, .campo textarea:hover{border-color:var(--texto-3)}
.entrada:focus, .campo input:focus, .campo select:focus, .campo textarea:focus{outline:none;
  border-color:var(--acento); box-shadow:var(--anel-campo)}
.campo.com-erro input, .campo.com-erro select, .campo.com-erro textarea{border-color:var(--acento)}
.campo input[readonly]{background:var(--fundo-2); color:var(--texto-2)}
select.entrada, .campo select{appearance:none; -webkit-appearance:none; padding-right:34px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23737061' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:12px 8px}
.campo input.num, .entrada.num{text-align:right}
.campo-moeda{position:relative}
.campo-moeda > span{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--texto-3); font-size:15px; pointer-events:none}
.campo-moeda > input{padding-left:38px !important; text-align:right; font-variant-numeric:tabular-nums}
.marcar{display:inline-flex; align-items:flex-start; gap:10px; font-size:15px; line-height:1.4; cursor:pointer; color:var(--texto)}
.marcar input{appearance:none; -webkit-appearance:none; flex:none; width:20px; height:20px; margin-top:1px;
  border:1.5px solid var(--borda-forte); border-radius:3px; background:var(--cartao); cursor:pointer; display:grid; place-content:center;
  transition:background-color var(--tique) ease, border-color var(--tique) ease}
.marcar input::after{content:""; width:10px; height:6px; border:2px solid var(--sobre-acento); border-top:0; border-right:0;
  transform:rotate(-45deg) translate(1px,-1px) scale(0); transition:transform var(--tique) var(--ease)}
.marcar input:checked{background:var(--acento); border-color:var(--acento)}
.marcar input:checked::after{transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.marcar input:focus-visible{outline:2px solid var(--acento); outline-offset:2px}
.marcar .marcar-nota{display:block; font-size:var(--fs-nota); color:var(--texto-3)}
.grade-campos{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px 18px}
.grade-campos > *{grid-column:span 12}
.grade-campos > .c2{grid-column:span 2} .grade-campos > .c3{grid-column:span 3}
.grade-campos > .c4{grid-column:span 4} .grade-campos > .c5{grid-column:span 5}
.grade-campos > .c6{grid-column:span 6} .grade-campos > .c7{grid-column:span 7}
.grade-campos > .c8{grid-column:span 8} .grade-campos > .c9{grid-column:span 9}
@media (max-width:720px){ .grade-campos > [class^="c"], .grade-campos > [class*=" c"]{grid-column:span 12} }
.grupo-campos{border:0; padding:0; min-width:0}
.grupo-campos > legend{font-family:var(--serif); font-variation-settings:var(--serif-h3); font-size:19px;
  padding:0; margin-bottom:14px; color:var(--texto)}
.arquivo{display:flex; align-items:center; gap:12px; min-height:56px; padding:10px 14px; cursor:pointer;
  border:1px dashed var(--borda-forte); border-radius:var(--raio); background:var(--fundo-2); color:var(--texto-2);
  font-size:15px; transition:border-color var(--tique) ease, background-color var(--tique) ease}
.arquivo:hover, .arquivo.sobre{border-color:var(--acento); background:var(--acento-lavado); color:var(--texto)}
.arquivo input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.arquivo:focus-within{outline:2px solid var(--acento); outline-offset:2px}
.arquivo b{color:var(--texto); font-weight:600}

/* ── escolha: chips ──────────────────────────────────────────────────── */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:5px 12px;
  border:1px solid var(--borda-forte); border-radius:var(--raio); background:var(--cartao); color:var(--texto);
  font-size:14px; font-weight:500; line-height:1.2; cursor:pointer; white-space:nowrap;
  transition:border-color var(--tique) ease, background-color var(--tique) ease, color var(--tique) ease}
.chip:hover{border-color:var(--acento)}
.chip[aria-pressed="true"], .chip.sel{background:var(--acento); border-color:var(--acento); color:var(--sobre-acento)}
.chip .chip-n{font-variant-numeric:tabular-nums; color:var(--texto-3); font-weight:500}
.chip[aria-pressed="true"] .chip-n, .chip.sel .chip-n{color:inherit; opacity:.85}
@media (pointer:coarse){ .chip{min-height:var(--alvo)} }

/* ── selos (status) ───────────────────────────────────────────────────────
   Archivo 600 na cor do estado, moldura 1px da mesma cor, quadradinho de 6px.
   A cor vem SEMPRE de uma classe da lista fechada (.tom-*), nunca do servidor. */
.selo{--cor:var(--st-aguardando); display:inline-flex; align-items:center; gap:7px;
  padding:3px 9px 3px 8px; min-height:26px; border:1px solid var(--cor); border-radius:var(--raio);
  color:var(--cor); background:transparent; font-family:var(--sans); font-size:14px; font-weight:600;
  line-height:1.2; letter-spacing:0; text-transform:none; white-space:nowrap; max-width:100%}
.selo::before{content:""; width:6px; height:6px; flex:none; background:var(--cor)}
.selo > span{overflow:hidden; text-overflow:ellipsis}
.selo.tom-aguardando{--cor:var(--st-aguardando)}
.selo.tom-andamento{--cor:var(--acento-texto)}
.selo.tom-concluido{--cor:var(--st-concluido)}
.selo.tom-cancelado{--cor:var(--st-cancelado); text-decoration:line-through; text-decoration-thickness:1px}
.selo.tom-pausado{--cor:var(--st-cancelado); border-style:dashed}
.selo.tom-pausado::before{width:6px; height:7px; background:none; border-left:2px solid var(--cor); border-right:2px solid var(--cor)}
.selo.cheio{background:var(--cor); color:var(--sobre-acento)}
.selo.cheio::before{background:var(--sobre-acento)}
.selo.leve{border-color:transparent; padding-left:0}

/* ── prazo (atrasado / vence hoje / perto / ok) ──────────────────────── */
.prazo{display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:500;
  color:var(--texto-2); white-space:nowrap; line-height:1.2; font-variant-numeric:tabular-nums}
.prazo .prazo-data{color:var(--texto-3); font-weight:400}
.prazo.p-atrasado{background:var(--acento); color:var(--sobre-acento); font-weight:600; padding:4px 8px; border-radius:var(--raio)}
.prazo.p-atrasado .prazo-data{color:inherit; opacity:.85}
.prazo.p-hoje{border:1.5px solid var(--acento); color:var(--acento-texto); font-weight:600; padding:3px 7px; border-radius:var(--raio)}
.prazo.p-perto{color:var(--acento-texto); font-weight:600}
.prazo.p-concluido{color:var(--texto-3)}

/* ── avisos ───────────────────────────────────────────────────────────── */
.aviso{padding:11px 14px; border-radius:var(--raio-campo); background:var(--fundo-2);
  border-left:2px solid var(--borda-forte); font-size:14px; line-height:1.55; color:var(--texto-2)}
.aviso.erro{background:var(--erro-fundo); border-left-color:var(--acento); color:var(--texto)}
.aviso.ok{border-left-color:var(--st-concluido)}
.aviso b{color:var(--texto)}

/* ── cartões ─────────────────────────────────────────────────────────────
   .cartao   folha sobre a página (hairline de contato + sombra longa)
   .doc      cartão-documento: lombada de 3px na cor do estado, cabeçalho
             com hairline dupla (tinta + fio claro).                       */
.cartao{background:var(--cartao); border:1px solid var(--borda); border-radius:var(--raio);
  box-shadow:var(--sombra-repouso)}
.cartao-corpo{padding:20px 22px}
.cartao-cab{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 22px 12px; border-bottom:1px solid var(--borda)}
.cartao-cab h2, .cartao-cab h3{font-size:19px; font-variation-settings:var(--serif-h3)}
.doc{--cor:var(--borda-forte); position:relative; background:var(--cartao); border:1px solid var(--borda-forte);
  border-radius:var(--raio-doc); box-shadow:var(--sombra-repouso)}
.doc::before{content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:3px; background:var(--cor)}
.doc-cab{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 22px 10px;
  border-bottom:1px solid var(--texto); position:relative}
.doc-cab::after{content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:var(--borda-forte)}
.doc-corpo{padding:22px}
.pontilhado{background-image:radial-gradient(circle at 2px 1.5px, var(--borda-forte) 1.2px, transparent 1.4px);
  background-size:7px 3px; background-repeat:repeat-x; background-position:left top; padding-top:18px; margin-top:18px}

/* ── ficha nome/valor ────────────────────────────────────────────────── */
.ficha{display:flex; flex-direction:column}
.ficha-linha{display:grid; grid-template-columns:minmax(110px,190px) minmax(0,1fr); gap:12px; align-items:baseline;
  padding:9px 0; border-bottom:1px solid var(--borda); min-width:0}
.ficha-linha:last-child{border-bottom:0}
.ficha-linha > dt, .ficha-linha > .k{font-size:14px; font-weight:500; color:var(--texto-3)}
.ficha-linha > dd, .ficha-linha > .v{font-size:15px; color:var(--texto); min-width:0; overflow-wrap:anywhere}
.ficha-linha .vazio-v{color:var(--texto-3)}
@media (max-width:520px){ .ficha-linha{grid-template-columns:1fr; gap:2px} }
.valor-destaque{font-family:var(--serif); font-variation-settings:var(--serif-numero); font-size:clamp(26px,3vw,34px);
  line-height:1.1; font-variant-numeric:tabular-nums; color:var(--texto)}

/* ── tabela ──────────────────────────────────────────────────────────────
   Cabeçalho com a hairline dupla do documento (tinta + fio). Linhas de 44px. */
.tabela-caixa{overflow:auto; background:var(--cartao); border:1px solid var(--borda); border-radius:var(--raio)}
.tabela{width:100%; border-collapse:separate; border-spacing:0; font-size:15px; line-height:1.35}
.tabela th{position:sticky; top:0; z-index:2; background:var(--cartao); text-align:left; vertical-align:bottom;
  font-size:14px; font-weight:600; color:var(--texto-2); padding:11px 12px 9px; white-space:nowrap;
  border-bottom:1px solid var(--texto); box-shadow:0 3px 0 -2px var(--borda-forte)}
.tabela td{padding:10px 12px; border-bottom:1px solid var(--borda); vertical-align:middle}
.tabela tbody tr{transition:background-color var(--tique) ease}
.tabela tbody tr:hover{background:var(--realce)}
.tabela tbody tr:last-child td{border-bottom:0}
.tabela .dir{text-align:right}
.tabela .centro{text-align:center}
.tabela td.num, .tabela th.num{text-align:right; font-variant-numeric:tabular-nums}
.tabela .encolhe{width:1%; white-space:nowrap}
.tabela th.ordenavel{cursor:pointer; user-select:none}
.tabela th.ordenavel:hover{color:var(--texto)}
.tabela th[aria-sort="ascending"]::after{content:" ↑"; color:var(--acento-texto)}
.tabela th[aria-sort="descending"]::after{content:" ↓"; color:var(--acento-texto)}
.tabela tr.clicavel{cursor:pointer}
/* no celular: a tabela comum rola de lado em vez de espremer as colunas;
   a .empilha (UI.tabela({empilhar:true})) vira um bloco por linha */
@media (max-width:640px){
  .tabela:not(.empilha) th, .tabela:not(.empilha) td{white-space:nowrap}
  .tabela:not(.empilha) td .quebra{white-space:normal; display:inline-block; min-width:220px}
  .tabela.empilha thead{display:none}
  .tabela.empilha, .tabela.empilha tbody{display:block}
  .tabela.empilha tbody tr{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:12px 14px; border-bottom:1px solid var(--borda)}
  .tabela.empilha tbody tr:last-child{border-bottom:0}
  .tabela.empilha td{display:block; padding:0; border:0; text-align:left !important; min-width:0}
  .tabela.empilha td:first-child{flex:1 1 100%; font-size:16px}
  .tabela.empilha td:not(:first-child)[data-rotulo]:not([data-rotulo=""])::before{content:attr(data-rotulo) ": "; color:var(--texto-3); font-size:14px}
  .tabela.empilha td > .linha{display:inline-flex; vertical-align:middle}
  .tabela.empilha td.dir{flex:1 1 100%; margin-top:6px}
  .tabela.empilha td.dir .acoes{justify-content:flex-start}
}

/* ── abas ─────────────────────────────────────────────────────────────── */
.abas{display:flex; gap:2px; border-bottom:1px solid var(--borda); overflow-x:auto; scrollbar-width:none}
.abas::-webkit-scrollbar{display:none}
.aba{position:relative; display:inline-flex; align-items:center; gap:7px; padding:11px 14px 12px;
  font-size:15px; font-weight:500; color:var(--texto-2); text-decoration:none; white-space:nowrap;
  background:none; border:0; cursor:pointer; transition:color var(--tique) ease}
.aba::after{content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; background:var(--acento);
  transform:scaleX(0); transform-origin:left; transition:transform var(--gesto) var(--ease)}
.aba:hover{color:var(--texto)}
.aba:hover::after{transform:scaleX(.35)}
.aba[aria-selected="true"], .aba.ativa{color:var(--texto); font-weight:600}
.aba[aria-selected="true"]::after, .aba.ativa::after{transform:scaleX(1)}
.aba .aba-n{font-size:13px; font-weight:600; min-width:20px; padding:1px 6px; border-radius:10px; text-align:center;
  background:var(--fundo-2); color:var(--texto-2); font-variant-numeric:tabular-nums}
.aba .aba-alerta{width:7px; height:7px; background:var(--acento); flex:none}

/* ── modal ────────────────────────────────────────────────────────────── */
.modal-veu{position:fixed; inset:0; z-index:900; background:var(--veu); display:flex; align-items:flex-start;
  justify-content:center; padding:clamp(16px,8vh,96px) 16px 24px; overflow-y:auto;
  animation:veuEntra var(--gesto) var(--ease)}
.modal{position:relative; width:100%; max-width:560px; background:var(--cartao); border:1px solid var(--borda);
  border-radius:var(--raio-cartao); box-shadow:var(--sombra-cartao), 0 1px 0 var(--borda-forte);
  animation:modalEntra var(--gesto) var(--ease)}
.modal.largo{max-width:820px}
.modal-cab{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:22px 24px 0}
.modal-cab h2{font-size:24px}
.modal-corpo{padding:16px 24px 8px; font-size:15px; color:var(--texto)}
.modal-corpo > p + p{margin-top:10px}
.modal-pe{display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; padding:18px 24px 22px}
@keyframes veuEntra{from{opacity:0}}
@keyframes modalEntra{from{opacity:0; transform:translateY(10px)}}
@media (max-width:520px){
  .modal-veu{padding:0; align-items:flex-end}
  .modal{border-radius:var(--raio-cartao) var(--raio-cartao) 0 0; max-height:92vh; overflow-y:auto}
  .modal-pe > .bt{flex:1 1 auto}   /* base no texto: com 3 botões quebra a linha em vez de cortar o rótulo */
}

/* ── toast ────────────────────────────────────────────────────────────── */
.toasts{position:fixed; right:20px; bottom:20px; z-index:1000; display:flex; flex-direction:column; gap:10px;
  align-items:flex-end; pointer-events:none; max-width:min(420px,calc(100vw - 32px))}
.toast{pointer-events:auto; display:flex; align-items:flex-start; gap:10px; padding:12px 16px 12px 14px;
  background:var(--tinta); color:var(--papel); border-radius:var(--raio); box-shadow:var(--sombra-balao);
  font-size:15px; line-height:1.4; border-left:3px solid var(--ouro-claro); animation:toastEntra var(--gesto) var(--ease)}
.toast.erro{border-left-color:var(--laranja)}
.toast.info{border-left-color:var(--grafite)}
.toast.sai{opacity:0; transform:translateY(6px); transition:opacity var(--gesto) var(--ease), transform var(--gesto) var(--ease)}
@keyframes toastEntra{from{opacity:0; transform:translateY(8px)}}
@media (max-width:520px){ .toasts{left:16px; right:16px; bottom:16px; align-items:stretch} }

/* ── carregando: um instrumento medindo, não um spinner ───────────────── */
.medindo{height:2px; background:var(--borda-forte); overflow:hidden; max-width:260px; border-radius:1px}
.medindo > i{display:block; height:100%; width:40%; background:var(--acento); animation:varre 1.15s var(--ease) infinite}
@keyframes varre{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.carregando{display:flex; flex-direction:column; gap:14px; padding:40px 4px; color:var(--texto-3); font-size:15px}
.progresso{height:3px; background:var(--borda); overflow:hidden; border-radius:2px}
.progresso > i{display:block; height:100%; background:var(--acento); transform-origin:left; transform:scaleX(0);
  transition:transform 200ms linear}

/* ── vazio ────────────────────────────────────────────────────────────── */
.vazio{padding:36px 28px; border:1px dashed var(--borda-forte); border-radius:var(--raio); background:var(--fundo-2);
  text-align:left; color:var(--texto-2); font-size:15px}
.vazio .vazio-t{font-family:var(--serif); font-variation-settings:var(--serif-titulo); font-size:21px; color:var(--texto); line-height:1.2}
.vazio .vazio-t + *{margin-top:8px}
.vazio .acoes{margin-top:18px}

/* ── menu suspenso (autocompletar, ações) ─────────────────────────────── */
.suspenso{position:absolute; z-index:800; min-width:220px; max-height:320px; overflow-y:auto; padding:6px;
  background:var(--cartao); border-radius:var(--raio-campo); box-shadow:var(--sombra-menu)}
.suspenso-item{display:flex; flex-direction:column; gap:1px; width:100%; padding:8px 10px; text-align:left;
  border:0; border-radius:var(--raio); background:transparent; color:var(--texto); font-size:15px; cursor:pointer}
.suspenso-item small{font-size:13px; color:var(--texto-3)}
.suspenso-item:hover, .suspenso-item[aria-selected="true"]{background:var(--realce)}
.suspenso-item mark{background:none; color:var(--acento-texto); font-weight:600}
.suspenso-vazio{padding:10px; font-size:14px; color:var(--texto-3)}

/* ── ícones (svg de traço; UI.icone) ──────────────────────────────────── */
.ico{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round}

/* ── prumo (marca) ────────────────────────────────────────────────────── */
.prumo{height:34px; width:auto; color:var(--marca-fio); flex:none}
.prumo .fio{fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round}
.prumo .ponto{fill:var(--marca-ponto)}

/* ── utilitários ──────────────────────────────────────────────────────── */
.linha{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.linha.entre{justify-content:space-between}
.pilha{display:flex; flex-direction:column; gap:16px}
.pilha.curta{gap:8px}
.cresce{flex:1 1 auto; min-width:0}
.direita{margin-left:auto}
.sr{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.truncar{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.quebra{overflow-wrap:anywhere}
.ponto-sep::before{content:"·"; margin:0 6px; color:var(--texto-3)}

/* ── movimento reduzido ──────────────────────────────────────────────────
   O que responde ao cursor continua (decisão do dono); o que roda sozinho para. */
@media (prefers-reduced-motion: reduce){
  .medindo > i{animation-duration:2.4s}
  .modal, .modal-veu, .toast{animation:none}
  .bt.ocupado::after{animation:none; transform:scaleX(1); opacity:.6}
}

/* ── selo de etapa: cada etapa com a sua cor (tokens --etapa-*), fundo levemente tingido ── */
.selo.etapa{background:color-mix(in srgb, var(--cor) 9%, transparent)}
.selo.etapa-novo{--cor:var(--etapa-novo)}
.selo.etapa-documentos{--cor:var(--etapa-documentos)}
.selo.etapa-aguardando_vistoria{--cor:var(--etapa-aguardando_vistoria)}
.selo.etapa-vistoria_feita{--cor:var(--etapa-vistoria_feita)}
.selo.etapa-pesquisa{--cor:var(--etapa-pesquisa)}
.selo.etapa-calculo{--cor:var(--etapa-calculo)}
.selo.etapa-revisao{--cor:var(--etapa-revisao)}
.selo.etapa-finalizacao{--cor:var(--etapa-finalizacao)}
.selo.etapa-concluido{--cor:var(--etapa-concluido)}
.selo.etapa-pausado{--cor:var(--etapa-pausado)}
.selo.etapa-cancelado{--cor:var(--etapa-cancelado)}

/* ── senha (assets/senha.js, 16/10/2026): o campo com "Mostrar" e as regras ✓/✗ ──
   Prefixo sn- para não esbarrar no .senha-caixa do login antigo do admin. */
.sn-caixa{position:relative; display:block}
.sn-caixa > input{padding-right:96px !important}
.sn-mostrar{position:absolute; right:5px; top:50%; transform:translateY(-50%); min-height:40px; min-width:44px;
  padding:0 12px; border:0; border-radius:var(--raio); background:transparent; color:var(--acento-texto);
  font-size:15px; font-weight:600; cursor:pointer}
.sn-mostrar:hover{background:var(--fundo-2); color:var(--texto)}
.sn-mostrar:focus-visible{outline:2px solid var(--acento); outline-offset:1px}
.sn-caps{font-size:14px; color:var(--acento-texto); line-height:1.4}
.sn-caps[hidden]{display:none}
.sn-regras{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.sn-regras li{display:flex; align-items:flex-start; gap:9px; font-size:15px; line-height:1.4; color:var(--texto-2)}
.sn-regras li > svg{width:17px; height:17px; flex:none; margin-top:2px; stroke-width:2.4}
.sn-regras li.sn-ok{color:var(--texto)}
.sn-regras li.sn-ok > svg{color:var(--ouro-texto)}
.sn-regras li.sn-nao{color:var(--acento-texto)}
.sn-regras li.sn-nao > svg{color:var(--acento-texto)}
.sn-ponto{display:block; flex:none; width:7px; height:7px; margin:7px 5px 0; border-radius:50%; background:var(--borda-forte)}