/* tc-base.css - tema claro/escuro ImaginaTech (portado de css-previews/ambiente-claro/_base em 28/10/2026, batelada 0 F-FUNDACAO).
   Base comum (de claro.css): fontes locais, reset, tipografia, botoes .bt, superficies, selos, campos, abas, tabela, dialogo, toast .toasts>.toast, estados, movimento, regras de celular.
   Cor so por token (var(--papel) de tc-tokens.css); nunca escrever hex/rgba aqui (scripts/tema/teste-sem-cor-fixa.js).
   ORDEM dos <link> num painel: identity -> components -> demais /shared -> tc-tokens -> tc-base -> tc-painel -> tc-compat -> [tc-entrada] -> tc-tema-botao -> tc-tema-cel -> CSS LOCAL por ultimo. ?v= igual em todas as paginas. */

/* ---------- FONTES (S-B 28/10): hospedadas aqui + preload no <head>; sem CSS do Google. Subset latin (variaveis). Licenca OFL em _base/fonts/LICENCA.txt.
   Fallbacks = Arial local com size-adjust/ascent/descent MEDIDOS no Chromium (S-SEO-WV/medir-fonte.js). font-display HIBRIDO (Q-SB 28/10): Red Hat Text = optional (e o corpo que re-quebra linha); Red Hat Display, Orbitron e Inter = swap (fallback calibrado por peso nao desloca). Para mudar, troque a palavra na face. Medidas: RELATORIO-FASE-B.md (S-SEO-WV). */
@font-face{font-family:'Red Hat Text';font-style:normal;font-weight:400 700;font-display:optional;src:url(/shared/fonts/redhattext-400-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Red Hat Display';font-style:normal;font-weight:500;font-display:swap;src:url(/shared/fonts/redhatdisplay-500-900.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Red Hat Display';font-style:normal;font-weight:700;font-display:swap;src:url(/shared/fonts/redhatdisplay-500-900.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Red Hat Display';font-style:normal;font-weight:800;font-display:swap;src:url(/shared/fonts/redhatdisplay-500-900.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Red Hat Display';font-style:normal;font-weight:900;font-display:swap;src:url(/shared/fonts/redhatdisplay-500-900.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Orbitron';font-style:normal;font-weight:600;font-display:swap;src:url(/shared/fonts/orbitron-600-900.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Orbitron';font-style:normal;font-weight:700;font-display:swap;src:url(/shared/fonts/orbitron-600-900.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Orbitron';font-style:normal;font-weight:900;font-display:swap;src:url(/shared/fonts/orbitron-600-900.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/shared/fonts/inter-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Red Hat Text Fallback";src:local("Arial");font-weight:400;size-adjust:98.7%;ascent-override:103.4%;descent-override:31.4%;line-gap-override:0%}
@font-face{font-family:"Red Hat Text Fallback";src:local("Arial");font-weight:500;size-adjust:101.8%;ascent-override:100.2%;descent-override:30.4%;line-gap-override:0%}
@font-face{font-family:"Red Hat Text Fallback";src:local("Arial Bold");font-weight:600;size-adjust:99%;ascent-override:103.1%;descent-override:31.4%;line-gap-override:0%}
@font-face{font-family:"Red Hat Text Fallback";src:local("Arial Bold");font-weight:700;size-adjust:102.3%;ascent-override:99.7%;descent-override:30.3%;line-gap-override:0%}
@font-face{font-family:"Red Hat Display Fallback";src:local("Arial");font-weight:500;size-adjust:99%;ascent-override:103.1%;descent-override:31.3%;line-gap-override:0%}
@font-face{font-family:"Red Hat Display Fallback";src:local("Arial Bold");font-weight:700;size-adjust:96.8%;ascent-override:105.4%;descent-override:32%;line-gap-override:0%}
@font-face{font-family:"Red Hat Display Fallback";src:local("Arial Bold");font-weight:800;size-adjust:98.6%;ascent-override:103.5%;descent-override:31.4%;line-gap-override:0%}
@font-face{font-family:"Red Hat Display Fallback";src:local("Arial Bold");font-weight:900;size-adjust:100.4%;ascent-override:101.5%;descent-override:30.9%;line-gap-override:0%}
@font-face{font-family:"Orbitron Fallback";src:local("Arial Bold");font-weight:600;size-adjust:117.1%;ascent-override:86.1%;descent-override:20.5%;line-gap-override:0%}
@font-face{font-family:"Orbitron Fallback";src:local("Arial Bold");font-weight:700;size-adjust:115%;ascent-override:87.9%;descent-override:20.9%;line-gap-override:0%}
@font-face{font-family:"Orbitron Fallback";src:local("Arial Bold");font-weight:900;size-adjust:115%;ascent-override:87.8%;descent-override:20.9%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";src:local("Arial");font-weight:400;size-adjust:106.2%;ascent-override:91.4%;descent-override:22.6%;line-gap-override:0%}

:root{
  /* cores: vem de /_base/tokens.css (GERADO por _tokens/gerar.js a partir de _tokens/tokens.json). Carregar tokens.css ANTES deste arquivo. */

  /* ---- tipografia (a mesma da home clara) ---- */
  --fonte:'Red Hat Text','Red Hat Text Fallback',Arial,'Helvetica Neue',sans-serif;
  --disp:'Red Hat Display','Red Hat Display Fallback',Arial,'Helvetica Neue',sans-serif;
  --marca:'Orbitron','Orbitron Fallback',var(--disp);   /* SO no nome ImaginaTech */
  --mono:ui-monospace,'Cascadia Mono',Consolas,monospace;
  /* forma (raios --r-*, tipografia --fs-*, espaco --sp-*, movimento --dur- e --ease-, camadas --z-*): tokens.css > bloco "forma" (GERADO de _tokens/tokens.json > forma). --fs-xs 13px = excecao consciente aos 16 do celular. */

  --max:1180px;
  color-scheme:light;
}

/* ---------- reset e base ---------- */
/* utilitarias IGUAIS as de hoje (identity.css / z-index.css): paineis que ja usam .hidden/.visible nao mudam de comportamento */
.hidden{display:none !important}
.visible{visibility:visible !important}
.d-none{display:none}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{font-family:var(--fonte);font-size:var(--fs-base);line-height:1.55;color:var(--txt);background:var(--sup-1);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
button:disabled{cursor:default}
a,button,[role="button"],summary,label[for]{cursor:pointer}
[hidden]{display:none !important}
h1,h2,h3,h4{font-family:var(--disp);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--acc-soft);color:var(--txt)}
:focus{outline:none}
:focus-visible{outline:3px solid var(--acc-ink);outline-offset:3px;border-radius:var(--r-xs)}
.tab-num{font-variant-numeric:tabular-nums}
.sr,.seo-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* scrollbar fina (paineis) */
.rolagem-fina{scrollbar-width:thin;scrollbar-color:var(--sup-4) transparent}
.rolagem-fina::-webkit-scrollbar{width:8px;height:8px}
.rolagem-fina::-webkit-scrollbar-thumb{background:var(--sup-4);border-radius:var(--r-pill)}

/* ---------- icones (Lucide inline, gerado pelo montar.js a partir de <i data-lucide="nome">) ---------- */
.ico{width:1em;height:1em;flex-shrink:0;display:inline-block;vertical-align:-.15em;stroke-width:var(--ico-traco,2)}

/* ---------- tipografia utilitaria ---------- */
.titulo-pagina{font-size:var(--fs-2xl);font-weight:900;letter-spacing:-.025em}
.titulo-secao{font-size:var(--fs-xl);font-weight:800}
.titulo-cartao{font-size:var(--fs-md);font-weight:800;letter-spacing:-.01em}
.lead{color:var(--txt-3);font-size:1.08rem;max-width:60ch}
.legenda{color:var(--txt-3);font-size:var(--fs-sm)}
.muted{color:var(--txt-3)}
.marca{font-family:var(--marca);font-weight:900;letter-spacing:.02em}

/* ---------- layout utilitario ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--sp-6)}
.linha{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.linha-entre{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.pilha{display:flex;flex-direction:column;gap:var(--sp-3)}
.pilha-4{display:flex;flex-direction:column;gap:var(--sp-4)}
.grade-2,.grade-3,.grade-4{display:grid;gap:var(--sp-4)}
.grade-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grade-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grade-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1024px){.grade-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grade-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grade-2,.grade-3,.grade-4{grid-template-columns:minmax(0,1fr)}.wrap{padding-inline:var(--sp-5)}}

/* ============================ BOTOES ============================
   Desenho do Environment: raio 14, peso 700, afunda 3% ao clicar, sombra so no hover
   do primario. Cor = paleta clara: primario azul da home, secundario superficie. */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:44px;padding:0 18px;border-radius:var(--r-md);font-family:var(--disp);font-weight:700;font-size:.95rem;line-height:1;white-space:nowrap;text-align:center;transition:background var(--dur-1) var(--ease-padrao),color var(--dur-1) var(--ease-padrao),box-shadow var(--dur-2) var(--ease-padrao),transform var(--dur-1) var(--ease-padrao)}
.bt .ico{font-size:1.1em}
.bt:active:not(:disabled){transform:scale(.97)}
.bt:disabled,.bt[aria-disabled="true"]{opacity:.5;pointer-events:none}
.bt-p{background:var(--azul);color:var(--sobre-acao)}
.bt-p:hover{background:var(--azul-ink);box-shadow:var(--sombra-azul)}
.bt-acc{background:var(--acc);color:var(--sobre-acc)}
.bt-acc:hover{background:var(--acc-claro)}
.bt-s{background:var(--sup-2);color:var(--txt)}
.bt-s:hover{background:var(--sup-3)}
.bt-branco{background:var(--sup-1);color:var(--txt);box-shadow:var(--sombra-1)}
.bt-branco:hover{box-shadow:var(--sombra-2)}
.bt-escuro{background:var(--sup-inv);color:var(--sobre-inv)}
.bt-escuro:hover{background:var(--acc-forte)}
.bt-ok{background:var(--ok);color:var(--sobre-acao)}
.bt-ok:hover{background:var(--ok-hover)}
.bt-perigo{background:var(--erro-soft);color:var(--erro-ink)}
.bt-perigo:hover{background:var(--erro);color:var(--sobre-acao)}
.bt-fantasma{background:transparent;color:var(--acc-ink)}
.bt-fantasma:hover{background:var(--acc-soft)}
.bt-wa{background:var(--wa);color:var(--sobre-wa)}
.bt-wa:hover{background:var(--wa-hover)}
.bt-sm{min-height:36px;padding:0 14px;font-size:var(--fs-sm);border-radius:var(--r-sm)}
.bt-lg{min-height:52px;padding:0 24px;font-size:var(--fs-base)}
.bt-bloco{width:100%}
/* so icone: redondo, 44 (alvo de toque) */
.bt-ico{flex:none;width:44px;height:44px;min-height:44px;padding:0;border-radius:var(--r-pill);font-size:1.15rem}
.bt-ico.bt-sm{width:36px;height:36px;min-height:36px;font-size:var(--fs-base)}
/* carregando: o rotulo some e entra o giro (botao desabilitado durante a acao) */
.bt.carregando{position:relative;color:transparent;pointer-events:none}
.bt.carregando::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-color:var(--sobre-cor) var(--sobre-cor) transparent transparent;animation:it-girar .8s linear infinite}
.bt-s.carregando::after,.bt-branco.carregando::after{border-color:var(--txt) var(--txt) transparent transparent}

/* aba do Environment (icone sobre o nome), usada no trilho e nas pilulas de baixo */
.aba-ico{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);min-width:60px;min-height:56px;padding:0 6px;border-radius:var(--r-xl);color:var(--txt-3);font:700 var(--fs-xs)/1 var(--disp);white-space:nowrap;transition:background var(--dur-1),color var(--dur-1)}
.aba-ico .ico{font-size:var(--fs-lg)}
.aba-ico:hover{background:var(--sup-2);color:var(--txt)}
.aba-ico[aria-current="page"],.aba-ico[aria-current="true"],.aba-ico.ativa{background:var(--acc-soft);color:var(--acc-ink)}

/* ============================ SUPERFICIES ============================ */
.cartao{background:var(--sup-1);border-radius:var(--r-lg);box-shadow:var(--sombra-1);padding:var(--sp-5)}
.cartao-2{background:var(--sup-1);border-radius:var(--r-lg);box-shadow:var(--sombra-2);padding:var(--sp-6)}
.bloco{background:var(--sup-2);border-radius:var(--r-lg);padding:var(--sp-5)}
.bloco-escuro{background:var(--escuro);color:var(--sobre-cor);border-radius:var(--r-lg);padding:var(--sp-6)}
.bloco-escuro .legenda,.bloco-escuro .muted{color:var(--txt-no-escuro)}
.cartao-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.regua{height:1px;background:var(--divisor);border:0;margin:var(--sp-4) 0}

/* item de lista do Environment: superficie que sobe um degrau no hover */
.lista{display:flex;flex-direction:column;gap:var(--sp-2)}
.item{display:flex;align-items:center;gap:var(--sp-3);min-height:52px;padding:10px 14px;border-radius:var(--r-md);background:var(--sup-2);transition:background var(--dur-1),transform var(--dur-1)}
a.item:hover,button.item:hover,.item.clicavel:hover{background:var(--sup-3)}
/* item que e <button> (acao) alinha o texto como o item que e <a> (link): o botao centralizava por padrao (Q2 27/10) */
button.item{width:100%;text-align:start}
.item .item-ico{flex:none;width:38px;height:38px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--sup-1);color:var(--acc-ink);font-size:1.1rem}
.item .item-txt{flex:1;min-width:0}
.item .item-txt b{display:block;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .item-txt small{display:block;color:var(--txt-3);font-size:var(--fs-sm)}
.item.ativo{background:var(--acc-soft)}

/* ficha: pares chave/valor de um registro (pedido, cliente, equipamento...).
   Vive na base porque /servicos, /mobile e qualquer painel com "ficha" usam o MESMO desenho. */
.fatos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
.fato{background:var(--sup-2);border-radius:var(--r-sm);padding:9px 12px;min-width:0}
.fato-largo{grid-column:1/-1}
.fato-k{display:block;color:var(--txt-3);font-size:var(--fs-sm);font-weight:600}
.fato-v{display:block;font-weight:700;overflow-wrap:anywhere}
.fato-v a{color:var(--acc-ink);font-weight:700}
.fato-v.normal{font-weight:400}

/* numero de destaque (so quando o numero e o assunto) */
.kpi{background:var(--sup-1);border-radius:var(--r-lg);box-shadow:var(--sombra-1);padding:var(--sp-4) var(--sp-5)}
.kpi .kpi-rot{display:flex;align-items:center;gap:var(--sp-1h);color:var(--txt-3);font-size:var(--fs-sm);font-weight:600}
.kpi .kpi-val{font-family:var(--disp);font-weight:800;font-size:1.65rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:var(--sp-1)}
.kpi .kpi-var{font-size:var(--fs-xs);font-weight:700}
.kpi .kpi-var.sobe{color:var(--ok-ink)} .kpi .kpi-var.desce{color:var(--erro-ink)}


/* numero de destaque que tambem filtra (botao com aria-pressed) */
button.kpi{text-align:left;width:100%;transition:box-shadow var(--dur-1),background var(--dur-1)}
button.kpi:hover{box-shadow:var(--sombra-2)}
button.kpi[aria-pressed="true"]{background:var(--acc-soft)}
button.kpi[aria-pressed="true"] .kpi-rot{color:var(--acc-ink)}

/* ============================ SELOS / CHIPS ============================ */
.selo{display:inline-flex;align-items:center;gap:var(--sp-1h);min-height:26px;padding:3px 10px;border-radius:var(--r-pill);background:var(--sup-2);color:var(--txt-2);font-size:var(--fs-xs);font-weight:700;line-height:1.2;white-space:nowrap}
.selo .ico{font-size:.95em}
.selo.acc{background:var(--acc-soft);color:var(--acc-ink)}
.selo.ok{background:var(--ok-soft);color:var(--ok-ink)}
.selo.warn{background:var(--warn-soft);color:var(--warn-ink)}
.selo.erro{background:var(--erro-soft);color:var(--erro-ink)}
.selo.roxo{background:var(--roxo-soft);color:var(--roxo-ink)}
.selo.escuro{background:var(--sup-inv);color:var(--sobre-inv)}
.ponto{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--txt-4);flex:none}
.ponto.ok{background:var(--ok)} .ponto.warn{background:var(--warn)} .ponto.erro{background:var(--erro)} .ponto.acc{background:var(--acc)}
/* chip de filtro (alternavel) */
.chip{text-transform:none;letter-spacing:normal;display:inline-flex;align-items:center;gap:var(--sp-1h);white-space:nowrap;flex:none;min-height:40px;padding:0 14px;border-radius:var(--r-pill);background:var(--sup-2);color:var(--txt-2);font-weight:700;font-size:var(--fs-sm);transition:background var(--dur-1),color var(--dur-1)}
.chip:hover{background:var(--sup-3)}
.chip[aria-pressed="true"],.chip.ativo{background:var(--sup-inv);color:var(--sobre-inv)}
.chips{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.chips.rolar{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;min-width:0;max-width:100%;scrollbar-width:none;padding-bottom:var(--sp-0)}
.chips.rolar::-webkit-scrollbar{display:none}

/* ============================ CAMPOS ============================
   sem borda: o campo e uma superficie (sup-2) que acende (branco + anel interno) no foco */
.campo{display:flex;flex-direction:column;gap:var(--sp-1h);min-width:0}
.campo>label,.rotulo{font-size:var(--fs-sm);font-weight:700;color:var(--txt-2)}
.campo .ajuda{font-size:var(--fs-sm);color:var(--txt-3)}
.campo .erro-msg{font-size:var(--fs-sm);color:var(--erro-ink);font-weight:600;display:flex;gap:var(--sp-1h);align-items:center}
.entrada,.campo input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),.campo select,.campo textarea{width:100%;min-height:46px;padding:11px 14px;border:0;border-radius:var(--r-md);background:var(--sup-2);color:var(--txt);font-size:var(--fs-base);transition:background var(--dur-1),box-shadow var(--dur-1)}
.campo textarea{min-height:110px;resize:vertical;line-height:1.5}
.entrada::placeholder,.campo input::placeholder,.campo textarea::placeholder{color:var(--txt-4)}
.entrada:hover,.campo input:hover,.campo select:hover,.campo textarea:hover{background:var(--sup-3)}
.entrada:focus,.campo input:focus,.campo select:focus,.campo textarea:focus{background:var(--sup-1);box-shadow:inset 0 0 0 2px var(--acc-ink)}
.campo.com-erro input,.campo.com-erro select,.campo.com-erro textarea{box-shadow:inset 0 0 0 2px var(--erro)}
.campo select{appearance:none;padding-right:var(--sp-10);background-image:var(--seta-select);background-repeat:no-repeat;background-position:right 14px center}
/* campo com icone a esquerda (busca) */
.busca{position:relative;display:flex;align-items:center;min-width:0}
.ferramentas .busca{flex:1 1 240px;max-width:360px}
.busca .ico{position:absolute;left:14px;color:var(--txt-3);font-size:1.05rem;pointer-events:none}
.busca .entrada{padding-left:42px}
/* caixa de marcar e interruptor */
.marcar{display:inline-flex;align-items:center;gap:var(--sp-2h);min-height:44px;font-weight:600}
.marcar input:not(.interruptor){width:20px;height:20px;accent-color:var(--azul)}
.interruptor{appearance:none;width:44px;height:26px;border-radius:var(--r-pill);background:var(--sup-4);position:relative;transition:background var(--dur-2) var(--ease-padrao);flex:none}
.interruptor::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--sup-1);box-shadow:var(--sombra-1);transition:transform var(--dur-2) var(--ease-mola)}
.interruptor:checked{background:var(--ok)}
.interruptor:checked::after{transform:translateX(18px)}
/* segmento (escolha unica tipo app) */
.segmento{display:inline-flex;gap:var(--sp-1);padding:var(--sp-1);border-radius:var(--r-pill);background:var(--sup-2)}
.segmento button,.segmento a{min-height:38px;padding:0 16px;border-radius:var(--r-pill);font-weight:700;font-size:var(--fs-sm);color:var(--txt-3);display:inline-flex;align-items:center;gap:var(--sp-1h);transition:background var(--dur-1),color var(--dur-1),box-shadow var(--dur-1)}
.segmento [aria-selected="true"],.segmento [aria-pressed="true"],.segmento .ativo{background:var(--sup-1);color:var(--txt);box-shadow:var(--sombra-1)}

/* ============================ ABAS ============================ */
/* overflow-y:hidden em TODA faixa que rola de lado (26/10, achado no teste de dedo): com overflow-x:auto o y vira auto
   sozinho; se sobrar 1 px na vertical, o arrasto vertical que comeca na faixa fica PRESO nela e a pagina nao rola */
.abas{display:flex;gap:var(--sp-1);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
/* com o y fechado, o contorno de foco de fora seria cortado: nessas faixas ele fica para dentro */
.abas :focus-visible,.chips.rolar :focus-visible,.mb-chips :focus-visible,.pol-indice :focus-visible,.pj-thumbs :focus-visible,.fotos-trilho :focus-visible{outline-offset:-3px}
.abas::-webkit-scrollbar{display:none}
.abas [role="tab"]{flex:none;display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;padding:0 16px;border-radius:var(--r-pill);font-weight:700;font-size:var(--fs-sm);color:var(--txt-3);transition:background var(--dur-1),color var(--dur-1)}
.abas [role="tab"]:hover{background:var(--sup-2);color:var(--txt)}
.abas [role="tab"][aria-selected="true"]{background:var(--acc-soft);color:var(--acc-ink)}
.abas .contador{min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pill);background:var(--sup-1);display:inline-grid;place-items:center;font-size:.75rem}

/* ============================ TABELA ============================ */
.tabela-caixa{overflow-x:auto;overflow-y:hidden;min-width:0;max-width:100%;border-radius:var(--r-lg);background:var(--sup-1);box-shadow:var(--sombra-1)}
.tabela{width:100%;border-collapse:collapse;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.tabela th{text-align:left;font-weight:700;color:var(--txt-3);padding:12px 16px;background:var(--sup-2);white-space:nowrap}
.tabela td{padding:12px 16px;border-top:1px solid var(--divisor);vertical-align:middle}
.tabela tbody tr{transition:background var(--dur-1)}
.tabela tbody tr:hover{background:var(--sup-2)}
.tabela .num{text-align:right}

/* ============================ DIALOGO / FOLHA ============================ */
.dialogo-fundo{position:fixed;inset:0;z-index:var(--z-modal);background:var(--scrim);display:grid;place-items:center;padding:var(--sp-4);animation:it-esmaecer var(--dur-2) var(--ease-sair) both}
.dialogo-fundo[aria-hidden="true"]{display:none}
.dialogo{width:min(560px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--sup-1);border-radius:var(--r-xl);box-shadow:var(--sombra-3);animation:it-crescer var(--dur-2) var(--ease-mola) both}
.dialogo-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:20px 20px 12px 24px}
.dialogo-cab h2{font-size:var(--fs-lg);font-weight:800;min-width:0}
.dialogo-cab .bt-ico{flex:none}
.dialogo-corpo{padding:4px 24px 20px}
.dialogo-pe{display:flex;justify-content:flex-end;gap:var(--sp-2);flex-wrap:wrap;padding:12px 20px 20px}
/* 26/10 (dono, opcao A; vale em TODA largura - no iPad Pro e em PC de tela baixa os botoes tambem sumiam): janela longa =
   titulo preso em cima e botoes presos embaixo, so o meio rola. overscroll contain: chegar no fim da janela nao arrasta a
   pagina de tras. O filete acima dos botoes so aparece quando a janela rola de fato (classe .rola, posta pelo ui.js). */
.dialogo{overscroll-behavior:contain}
.dialogo-cab{position:sticky;top:0;z-index:2;background:var(--sup-1)}
.dialogo-pe{position:sticky;bottom:0;z-index:2;background:var(--sup-1)}
.dialogo.rola .dialogo-pe{box-shadow:0 -1px 0 var(--divisor),0 -8px 16px -12px var(--veu-escuro-25)}
/* rodape dentro do form (/servicos/status/): sem a folga do form embaixo, senao no fim da rolagem ele sobe 20 px */
.dialogo-corpo:has(>.dialogo-pe:last-child){padding-bottom:0}
@media (max-width:600px){
  .dialogo-fundo{place-items:end stretch;padding:0}
  .dialogo{width:100%;border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:92dvh;padding-bottom:env(safe-area-inset-bottom,0px);animation:it-subir var(--dur-3) var(--ease-sair) both}
  .dialogo-pe .bt{flex:1}
  /* com rodape preso (ver bloco CELULAR), a folga da barra do iPhone vai para dentro do rodape */
  .dialogo:has(.dialogo-pe){padding-bottom:0}
  .dialogo-pe{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
}

/* ============================ TOAST ============================ */
.toasts{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--sp-2);align-items:center;pointer-events:none;width:min(440px,calc(100% - 32px))}
.toasts .toast{pointer-events:auto;display:flex;align-items:center;gap:var(--sp-2h);min-height:48px;padding:10px 16px;border-radius:var(--r-md);background:var(--sup-inv);color:var(--sobre-inv);font-weight:600;box-shadow:var(--sombra-3);animation:it-entrar-cima var(--dur-2) var(--ease-mola) both}
.toasts .toast .ico{font-size:1.15rem}
.toasts .toast.ok .ico{color:var(--ok-no-escuro)} .toasts .toast.erro .ico{color:var(--erro-no-escuro)} .toasts .toast.warn .ico{color:var(--warn-no-escuro)}

/* ============================ ESTADOS ============================ */
.vazio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-2);padding:40px 20px;color:var(--txt-3)}
.vazio .ico{font-size:2rem;color:var(--txt-4);margin-bottom:var(--sp-1)}
.vazio b{color:var(--txt);font-family:var(--disp);font-size:var(--fs-md)}
.esqueleto{border-radius:var(--r-sm);background:linear-gradient(90deg,var(--sup-2) 25%,var(--sup-3) 50%,var(--sup-2) 75%);background-size:200% 100%;animation:it-brilho 1.4s linear infinite;min-height:14px}
.aviso{display:flex;gap:var(--sp-3);align-items:flex-start;padding:14px 16px;border-radius:var(--r-md);background:var(--acc-soft);color:var(--txt-2)}
.aviso .ico{font-size:1.2rem;color:var(--acc-ink);margin-top:var(--sp-0)}
.aviso.ok{background:var(--ok-soft)} .aviso.ok .ico{color:var(--ok-ink)}
.aviso.warn{background:var(--warn-soft)} .aviso.warn .ico{color:var(--warn-ink)}
.aviso.erro{background:var(--erro-soft)} .aviso.erro .ico{color:var(--erro-ink)}
.progresso{height:8px;border-radius:var(--r-pill);background:var(--sup-3);overflow:hidden}
.progresso>i{display:block;height:100%;border-radius:inherit;background:var(--acc)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--acc-soft);color:var(--acc-ink);display:grid;place-items:center;font-weight:800;font-family:var(--disp);flex:none;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}

/* componentes que 2+ paginas repetiam (U-UNIFICACAO P-1; .passo* NAO sobe: /obrigado usa .passo.agora/.feito com CSS proprio) */
.estados-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:var(--sp-4)}
.estados-grade>div{padding:var(--sp-4);border-radius:var(--r-lg);background:var(--sup-2);display:flex;flex-direction:column;gap:var(--sp-2)}
.esq-60{width:60%}
.esq-40{width:40%}
.galeria .foto{aspect-ratio:1;border-radius:var(--r-sm)}
.galeria .foto .sel-foto.fim{background:var(--ok-forte)}
.galeria .foto .sel-foto.emb{background:var(--roxo-forte)}
.espaco-abaixo{margin-bottom:var(--sp-3)}

/* foto de projeto: fundo borrado da propria foto + foto inteira por cima (padrao da home) */
.foto{position:relative;overflow:hidden;background:var(--sup-foto);border-radius:var(--r-md);aspect-ratio:4/3}
.foto img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(18px) saturate(1.1) brightness(.9);transform:scale(1.2)}
.foto img.fg{position:relative;width:100%;height:100%;object-fit:contain}

/* ============================ MOVIMENTO ============================ */
@keyframes it-entrar-cima{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes it-crescer{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes it-subir{from{transform:translateY(100%)}to{transform:none}}
@keyframes it-esmaecer{from{opacity:0}to{opacity:1}}
@keyframes it-girar{to{transform:rotate(360deg)}}
@keyframes it-brilho{from{background-position:200% 0}to{background-position:-200% 0}}
.anim-cascata>*{animation:it-entrar-cima var(--dur-2) var(--ease-sair) both}
.anim-cascata>:nth-child(2){animation-delay:30ms}.anim-cascata>:nth-child(3){animation-delay:60ms}.anim-cascata>:nth-child(4){animation-delay:90ms}
.anim-cascata>:nth-child(5){animation-delay:120ms}.anim-cascata>:nth-child(6){animation-delay:150ms}.anim-cascata>:nth-child(7){animation-delay:180ms}.anim-cascata>:nth-child(8){animation-delay:210ms}
.anim-girar{animation:it-girar .9s linear infinite}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ============================ CELULAR: toque >= 44 px e texto >= 15-16 px ============================
   Excecoes CONSCIENTES abaixo de 16 px (como as abas da home): rotulo de aba com icone (13), selo (13),
   contador (12) e legenda/metadado curto (15). Texto corrido e campos ficam em 16. */
@media (max-width:820px){
  .bt,.bt-sm{min-height:44px;font-size:var(--fs-base)}
  .bt-ico.bt-sm{width:44px;height:44px}
  .chip{min-height:44px;font-size:var(--fs-denso)}
  .segmento button,.segmento a{min-height:44px;font-size:var(--fs-denso)}
  .abas [role="tab"]{font-size:var(--fs-denso)}
  .legenda,.item .item-txt small,.kpi .kpi-rot,.campo>label,.rotulo,.campo .ajuda,.campo .erro-msg,.tabela,.fato-k{font-size:var(--fs-denso)}
  .usuario{font-size:var(--fs-denso)}
  /* 26/10 (dono, opcao B): abas continuam rolando de lado; a borda que ainda tem aba escondida esmaece
     (classes mais-esq/mais-dir postas pelo ui.js) e o arrasto nao passa para a pagina */
  .abas{overscroll-behavior-x:contain}
  .abas [role="tab"]{padding:0 12px;gap:var(--sp-1h)}
  .abas.mais-dir{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  .abas.mais-esq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)}
  .abas.mais-esq.mais-dir{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
  /* texto comprido em botao quebra em 2 linhas em vez de vazar para fora */
  .bt{white-space:normal;line-height:1.2;padding-block:var(--sp-2)}
}