/* ===========================================================================
   hub-ui.css — a biblioteca visual comum do Hub de Sistemas do Grupo Multvision
   ---------------------------------------------------------------------------
   CSS puro de proposito, nao biblioteca de componentes: o Propostas e HTML/JS
   puro e ficaria de fora de qualquer coisa em React. Assim os quatro sistemas
   (Next, React, HTML puro e este) incluem as MESMAS duas linhas e ficam iguais.

   Versionado por caminho (/hub/v1/): mexer na casca nunca quebra um app que
   ainda nao foi adaptado.

   TROCAR A PALETA = trocar o bloco de tokens abaixo, num arquivo so.

   ---------------------------------------------------------------------------
   VAI MONTAR UMA TELA NOVA? LEIA docs/tela-nova.md ANTES.

   Este arquivo tem ~180 pecas prontas. A chance de o que voce precisa ja
   existir e alta, e a peca que voce escrever a mao vai divergir da dos outros
   sistemas num detalhe que so aparece quando alguem poe as telas lado a lado.

   Ja aconteceu: `.nome-sistema` nasceu em 04/set justamente porque cada app
   tinha inventado a sua, e em 07/set a primeira tela do Estoque inventou a
   quarta -- junto com uma moldura propria no lugar de `.cartao`, um `.ajuda`
   no lugar de `.dica`, e um botao "Esqueci a senha" que os tres nao tem POR
   DECISAO do Sidney (o porque esta no comentario de `.entrar-saida`).

   Para procurar antes de escrever:  grep "^\." app/hub/v1/hub-ui.css
   Para a ordem de montagem e o que NAO fazer a mao:  docs/tela-nova.md
   ---------------------------------------------------------------------------
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&family=Inter:wght@400;500;600&display=swap');

/* -------------------------------------------------- PALETA B — roxo + coral */
/* O PADRAO. E a que os quatro sistemas declaram, e a unica passada pelo axe:
   quem nao declarar `data-paleta` cai aqui, que e o lado seguro. */
:root,
[data-paleta="b"] {
  --roxo: #732a7b; --roxo-claro: #9b3db0; --roxo-escuro: #521179; --roxo-tenue: #f7f0f9;
  --destaque: #dd372a; --destaque-bg: #fdeeec;
  /* O #dd372a passa sobre papel (4,51) mas nao sobre a propria pilula (4,00).
     Clarear a pilula ate passar a deixaria branca, entao o TEXTO do selo tem
     seu tom, meio ponto mais escuro. A cor da marca continua sendo a de cima. */
  --destaque-texto: #d12e21;
  /* O ROXO SUAVE existia no CSS do Propostas desde antes da casca comum e nunca
     foi definido em lugar nenhum: `var()` invalido derruba a declaracao e a
     borda caia em currentColor, ou seja, na cor do TEXTO. Ninguem tinha visto
     porque o --texto-3 era claro; quando eu o escureci para passar no contraste
     (06/set), a borda errada ficou escura e apareceu. Aqui a regua e a 1.4.11
     (moldura de controle, 3:1), nao os 4,5 de texto: este tom da 3,90 sobre
     papel e 3,49 sobre a propria pilula, os dois fundos em que ele aparece. */
  --roxo-suave: #bc59c6;
  --fundo: #fdfaf7; --papel: #ffffff; --borda: #f0e6e3;
  --texto: #2b2124; --texto-2: #6f6167; --texto-3: #7c6a73;
  --ok: #1b7e49; --ok-bg: #e7f6ed;
  --espera: #a85c05; --espera-bg: #fef3e2;
  /* vinho escuro, e nao vermelho: com o coral no papel de "sua vez", um
     vermelho comum vira quase a mesma cor e as bolinhas param de informar. */
  --atraso: #7f1d2e; --atraso-bg: #fbe9ec;
  --inerte: #d6cbc8; --inerte-bg: #f4efed;
  /* Os tres niveis de atraso (3, 7 e 15 dias). Rampa que ESCURECE, e nao tres
     matizes diferentes: separa por claro-escuro alem da cor, entao continua
     legivel para quem enxerga cor de outro jeito -- e ninguem precisa decorar
     uma tabela de cores para entender que uma e pior que a outra.
     O coral (--destaque) fica reservado para "e a sua vez, ainda no prazo". */
  --a1: #9c6116; --a1-bg: #fdf1dd;   /* ambar    3 a 6 dias  */
  --a2: #c0400c; --a2-bg: #fdeade;   /* laranja  7 a 14 dias */
  --a3: #7f1d2e; --a3-bg: #fbe9ec;   /* vinho    15+ dias    */
  /* "e a vez, ainda no prazo" precisa ser CALMO e sair da rampa de atraso.
     Com o coral cheio (#e2574c) ele encostava no laranja do nivel 2 -- o mesmo
     erro que eu ja tinha cometido uma vez entre coral e vermelho. Coral claro
     resolve por claridade, nao por matiz. O --destaque cheio segue nos botoes. */
  --vez: #f0937f; --vez-bg: #fdeeeb;
}
/* PALETA UNICA (06/set/2026). Existiam tres — A, B e C — de quando a escolha
   estava em aberto. O Sidney escolheu a B, e as outras duas ficaram no arquivo
   sem ninguem usar. Duas paletas paradas nao seriam problema; estas reprovavam
   o contraste da norma (A em 3 pares, C em 3), e a A ainda era o PADRAO de
   quem esquecesse `data-paleta` — quem chegasse depois herdaria o defeito sem
   ver. Apagadas por decisao do Sidney. Nenhum token exclusivo delas se perdeu:
   conferido antes, os 26 de cada uma existem na B.
   Trocar a paleta agora e trocar os valores AQUI, num lugar so. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--texto);
  font:400 15px/1.55 Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3,.fonte-titulo{font-family:Sora,Inter,system-ui,sans-serif;font-weight:600;letter-spacing:-.01em;margin:0}
a{color:var(--roxo-claro)}

/* ═══════════════════════════════════════════════════════════════════════════
   OS TOKENS DE FORMA — canto, espaço, sombra e escala de letra.

   Por que isto existe (05/set/2026): a biblioteca tinha 28 tokens de COR e
   nenhum de forma. O resultado, medido nos tres sistemas: 14 cantos distintos,
   14 tamanhos de letra, 20 espacamentos, 9 sombras. Cada app escolheu o seu, e
   o proximo -- o Estoque -- ia adivinhar tambem.

   ESTES TOKENS DESCREVEM O QUE JA EXISTE. Nenhum valor foi inventado: cada um
   e o que a peca correspondente do Pipeline usa hoje. Declara-los NAO muda um
   pixel de tela nenhuma -- eles existem para o codigo NOVO ter onde consultar,
   e para o codigo velho migrar quando alguem decidir.

   O que ficou de fora, e por que: os meios-pixels (11,5 · 12,5 · 13,5 · 14,5)
   sao 30 regras da biblioteca e nao entraram na escala. Arredonda-los mexeria
   em tela em uso, e isso e decisao do Sidney, nao minha.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* ---- CANTO. Quatro degraus, tirados das pecas que ja existem. ---------- */
  --raio-mini:  6px;   /* o quadradinho do simbolo na barra */
  --raio:       9px;   /* botao e campo — o canto padrao da casa */
  --raio-cx:   10px;   /* cartao e caixa */
  --raio-jan:  15px;   /* janela */
  --raio-pill: 20px;   /* selo, etiqueta, qualquer coisa em capsula */

  /* ---- ESPACO. A medida de 20 valores achou uma escala de fato em 7-8, 11-13
         e 18-22; estes tres degraus a cobrem sem inventar nada. ------------ */
  --esp-p:      7px;   /* entre irmaos apertados: icone e texto, chip e chip */
  --esp:       13px;   /* o respiro padrao dentro de uma peca */
  --esp-g:     18px;   /* entre blocos */

  /* ---- SOMBRA. Tres, e cada uma tem um trabalho. --------------------- */
  --sombra-cx:  0 3px 14px rgba(115,42,123,.09);   /* cartao que precisa subir */
  --sombra-jan: 0 10px 34px rgba(60,20,70,.09);    /* janela e caixa de entrar */
  --sombra-foco: 0 0 0 2px var(--roxo-claro);      /* o anel de foco */

  /* ---- LETRA. A escala que ja estava em uso, agora escrita. ------------- */
  --letra-mini: 11px;  /* etiqueta em caixa alta */
  --letra-p:    12px;  /* auxiliar, legenda */
  --letra-m:    13px;  /* texto secundario, tabela */
  --letra-bt:   14px;  /* botao, aviso */
  --letra:      15px;  /* o corpo */
  --letra-g:    17px;  /* titulo de bloco */
  --letra-tit:  21px;  /* titulo de tela */
  --letra-num:  26px;  /* numero grande, painel */

  /* ---- PESO. Quatro, e nao mais. --------------------------------------- */
  --peso-normal: 400;
  --peso-medio:  500;  /* rotulo, menu */
  --peso-forte:  600;  /* botao, titulo, destaque */
  --peso-tit:    700;  /* so a marca e o numero de painel */
}

/* ------------------------------------------------------------------ casca */
.hub-topo{position:sticky;top:0;z-index:40;background:var(--papel);
  border-bottom:1px solid var(--borda);display:flex;align-items:center;gap:18px;
  padding:0 20px;height:58px}
.hub-marca{font-family:Sora;font-weight:700;font-size:17px;color:var(--roxo);white-space:nowrap}
.hub-marca span{color:var(--texto-3);font-weight:400}
.hub-menu{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none}
.hub-menu::-webkit-scrollbar{display:none}
.hub-menu a{display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:9px;
  color:var(--texto-2);text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap}
.hub-menu a:hover{background:var(--roxo-tenue);color:var(--roxo)}
.hub-menu a[aria-current]{background:var(--roxo);color:#fff}
.hub-sigla{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:6px;background:var(--roxo-tenue);color:var(--roxo);font-size:10px;font-weight:700;
  flex:none;overflow:hidden}
/* O SIMBOLO OCUPA A CAIXA INTEIRA, e a caixa e a mesma de antes: 22x22. Assim
   a troca da sigla pelo desenho nao muda um pixel da largura do menu -- que
   rola escondendo a barra de rolagem, entao o que crescesse sumiria calado. */
.hub-sigla img{width:100%;height:100%;display:block;border-radius:6px}
/* O DESENHO JA TEM FUNDO ROXO. Quando ele esta presente, o quadradinho lilas
   por tras sobra e vira uma moldura clara em volta; sem fundo, o simbolo
   encosta na borda como no hub. */
.hub-sigla:has(img){background:none}
.hub-menu a[aria-current] .hub-sigla{background:rgba(255,255,255,.22);color:#fff}
/* NA ABA EM QUE VOCE ESTA o fundo do link e roxo chapado -- e o simbolo tambem
   e roxo, entao ele sumiria no proprio fundo. O anel claro o destaca sem
   mudar o desenho. */
.hub-menu a[aria-current] .hub-sigla:has(img){background:rgba(255,255,255,.9);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.9)}
.hub-eu{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--texto-2)}
.hub-avatar{width:30px;height:30px;border-radius:50%;background:var(--roxo);color:#fff;
  display:grid;place-items:center;font-weight:600;font-size:12px;flex:none}

/* A LINHA DE INDICADORES — numero de contexto que a tela toda usa.
   Nasceu no Contratos (IPCA, IGP-M, salario minimo), onde vivia espremida
   dentro da barra de navegacao em 10px sobre roxo. Numero que entra no
   contrato do cliente merece estar legivel, e nao no rodape de um menu.
   Serve a qualquer sistema com dado de contexto: o Estoque tem o valor
   total em estoque, o Pipeline teria o total parado. */
/* A FAIXA E DE PONTA A PONTA, O TEXTO NAO (05/set/2026). Ela pegava a largura
   toda e comecava a 20px da borda, enquanto o miolo comeca a 150px: duas
   margens diferentes na mesma tela. O fundo tem que continuar atravessando --
   por isso o recuo vai no padding e nao em max-width, que encolheria a faixa
   junto com o texto. O calc devolve exatamente o trilho do .pagina. */
.indicadores{ display:flex; flex-wrap:wrap; gap:6px 22px; align-items:baseline;
  padding:9px max(20px, calc((100% - 1180px) / 2 + 20px));
  background:var(--papel); border-bottom:1px solid var(--borda);
  font-size:var(--letra-p); color:var(--texto-3); }
.indicadores b{ color:var(--texto-2); font-weight:var(--peso-forte);
  font-variant-numeric:tabular-nums; margin-left:4px; }
@media (max-width:760px){ .indicadores{ padding:8px 13px; gap:4px 14px; } }

/* ------------------------------------------------------------------ abas */
.abas{display:flex;gap:2px;padding:0 20px;background:var(--papel);
  border-bottom:1px solid var(--borda);overflow-x:auto;scrollbar-width:none}
.abas::-webkit-scrollbar{display:none}
.aba{appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  padding:12px 14px;font:600 14px Inter,sans-serif;color:var(--texto-2);cursor:pointer;white-space:nowrap}
.aba:hover{color:var(--texto)}
/* A ABA MARCADA (06/set/2026). Era `aria-selected`, que so vale dentro de um
   role="tab" de verdade -- fora dele e atributo invalido, e o axe achou 87
   assim. Estas abas nao sao painel com conteudo trocando: elas NAVEGAM entre
   telas. Para isso o certo e `aria-current="page"`, que vale em qualquer
   elemento e que o leitor de tela le como "pagina atual". Vira ARIA de verdade
   (role=tab) exigiria painel associado, seta do teclado e tabindex rotativo --
   maquinaria para um comportamento que estas abas nao tem. */
.aba[aria-current="page"]{color:var(--roxo);border-bottom-color:var(--roxo)}
.aba .conta{margin-left:6px;background:var(--roxo-tenue);color:var(--roxo);
  border-radius:20px;padding:1px 7px;font-size:11px}
.aba[aria-current="page"] .conta{background:var(--roxo);color:#fff}

/* A FILEIRA DE DENTRO. Quando uma tela tem navegacao propria abaixo da
   principal -- os seis passos do contrato, as quatro secoes de Cadastros --
   ela usa a mesma aba, com moldura, para nao competir com a de cima.
   O Pipeline ja fazia isso a mao no Cadastros; agora e peca. */
.abas-interna{ border:1px solid var(--borda); border-radius:var(--raio-cx);
  background:var(--papel); margin-bottom:14px; padding:0 6px; }

/* ------------------------------------------------------------- estrutura */
.pagina{max-width:1180px;margin:0 auto;padding:22px 20px 80px}
.cartao{background:var(--papel);border:1px solid var(--borda);border-radius:13px}
.vazio{text-align:center;padding:56px 24px;color:var(--texto-2)}
.vazio .emoji{font-size:34px;display:block;margin-bottom:10px}
/* .vazio-recusa -- 07/set/2026. A peca .vazio descreve so a FORMA (texto ao
   centro, com ar em volta), e a mesma forma serve a cinco sentidos: carregando,
   procurando, nada aqui, terminou bem, e RECUSADO. Os quatro primeiros
   informam; o quinto NEGA, e negativa anunciada como status chega a quem nao ve
   no mesmo tom de "carregando".
   Foi encontrado no Estoque: "Link fora do prazo" usava role="status" porque a
   biblioteca so oferecia .vazio e o guia manda por status nele -- ou seja, a
   peca empurrava para o erro, e acertar exigia sair dela.
   Nao inventei atributo novo para isso: o sentido ja existe no HTML, e duas
   fontes de verdade para a mesma coisa divergem. USE role="alert" AQUI. */
.vazio-recusa{color:var(--destaque-texto)}
.vazio-recusa .emoji{opacity:.9}

/* --------------------------------------------------------------- botoes */
.btn{appearance:none;border:1px solid transparent;border-radius:9px;cursor:pointer;
  font:600 14px Inter,sans-serif;padding:9px 16px;display:inline-flex;align-items:center;
  gap:7px;justify-content:center;transition:filter .12s,background .12s;
  /* Piso de 24px de altura (06/set/2026): e o minimo de alvo que a norma pede,
     e vale para o botao pequeno tambem -- varios estavam com 19 e 22. */
  min-height:24px;
  /* O rotulo de botao nao quebra (05/set/2026): "Buscar CNPJ" apertado ao lado
     de um campo virava duas linhas e o botao crescia para cima e para baixo,
     desalinhando a fileira inteira. Quem aperta o botao aperta o texto todo. */
  white-space:nowrap}
/* O BOTAO DESABILITADO PRECISA PARECER DESABILITADO (05/set/2026).
   Ate aqui a biblioteca nao definia estado nenhum: o botao ficava IDENTICO ao
   ativo e so nao respondia ao clique -- a pessoa clica, nada acontece, e ela
   nao sabe se e o sistema travado ou ela fazendo errado.
   Apaga sem trocar a cor, de proposito: o botao continua reconhecivel como o
   que e, so desligado. E `pointer-events` fica de fora para o `title` do botao
   continuar aparecendo -- e ali que mora a explicacao de por que ele parou. */
.btn:disabled, .btn[disabled]{ opacity:.55; cursor:not-allowed; filter:none; }
.btn:disabled:hover, .btn[disabled]:hover{ filter:none; }
.btn:disabled{opacity:.5;cursor:not-allowed}
/* OS MODIFICADORES NAO ANDAM SOZINHOS -- e agora nao quebram se andarem
   (07/set/2026). Quem carrega a familia da fonte e o `.btn`, pelo atalho
   `font:600 14px Inter`. Os seis modificadores abaixo so mexem em cor, borda ou
   tamanho, entao um deles usado SEM o `.btn` junto perdia a familia inteira e
   caia em Arial -- foi o que aconteceu na primeira tela do Estoque, e passou
   despercebido porque o botao continua parecendo botao. Os quatro sistemas
   estavam limpos (100 usos conferidos, zero sem `.btn`), mas a armadilha
   esperava o proximo. Uma linha fecha os seis. O jeito certo continua sendo
   `class="btn btn-principal"`; isto e a rede embaixo. */
.btn-texto,.btn-p,.btn-calmo,.btn-principal,.btn-perigo,.btn-fazer{
  font-family:Inter,system-ui,sans-serif}
.btn-principal{background:var(--roxo);color:#fff}
.btn-principal:hover:not(:disabled){background:var(--roxo-escuro)}
.btn-fazer{background:var(--ok);color:#fff}
.btn-fazer:hover:not(:disabled){filter:brightness(.93)}
.btn-calmo{background:var(--papel);color:var(--texto);border-color:var(--borda)}
.btn-calmo:hover:not(:disabled){background:var(--roxo-tenue);border-color:var(--roxo-claro);color:var(--roxo)}
.btn-texto{background:none;color:var(--roxo);padding:6px 8px;font-weight:500}
.btn-p{padding:6px 11px;font-size:13px}

/* --------------------------------------------------------------- formulario */
.campo{display:block;margin-bottom:14px}
.campo > span{display:block;font-size:13px;font-weight:500;color:var(--texto-2);margin-bottom:5px}
input,select,textarea{width:100%;padding:10px 13px;border:1px solid var(--borda);border-radius:9px;
  background:var(--papel);color:var(--texto);font:400 15px Inter,sans-serif}
input:focus,select:focus,textarea:focus{outline:2px solid var(--roxo-claro);outline-offset:-1px;border-color:transparent}

/* O MESMO CAMPO, PRESO A CLASSE.
   A regra acima e de ELEMENTO NU, e por isso nao pode ir para um app que ainda
   vive de estilo embutido: ela alcancaria todo <input> da tela, inclusive os
   que o app dimensiona sozinho. O Contratos e esse caso.
   Esta copia diz exatamente a mesma coisa presa ao `.campo`, e e ela que viaja
   no subconjunto. Duplicacao consciente: quando o Contratos for portado, esta
   regra sai e a de cima basta.
   MUDOU UMA, MUDE A OUTRA -- ou o campo passa a ter duas caras. */
.campo input, .campo select, .campo textarea{
  width:100%;padding:10px 13px;border:1px solid var(--borda);border-radius:9px;
  background:var(--papel);color:var(--texto);font:400 15px Inter,sans-serif}
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:2px solid var(--roxo-claro);outline-offset:-1px;border-color:transparent}

/* --------------------------------------------------------------- etiquetas */
.selo{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:2px 10px;
  font-size:12px;font-weight:600;white-space:nowrap}
.selo-ok{background:var(--ok-bg);color:var(--ok)}
.selo-vez{background:var(--vez-bg,var(--destaque-bg));color:var(--destaque-texto,var(--destaque))}
.selo-atraso{background:var(--atraso-bg);color:var(--atraso)}
.selo-espera{background:var(--espera-bg);color:var(--espera)}
.selo-inerte{background:var(--inerte-bg);color:var(--texto-2)}
.selo-roxo{background:var(--roxo-tenue);color:var(--roxo)}

/* --------------------------------------------------------------- avisos */
.aviso{border-radius:11px;padding:13px 15px;font-size:14px;display:flex;gap:10px;align-items:flex-start}
.aviso-erro{background:var(--atraso-bg);color:var(--atraso)}
.aviso-ok{background:var(--ok-bg);color:var(--ok)}
.aviso-atencao{background:var(--espera-bg);color:var(--espera)}

/* ------------------------------------------------------------ entrar */
.entrar-fundo{min-height:100vh;display:grid;place-items:center;padding:20px;
  background:linear-gradient(160deg,var(--roxo-tenue),var(--fundo) 55%)}
.entrar-caixa{width:100%;max-width:390px;background:var(--papel);border:1px solid var(--borda);
  border-radius:17px;padding:34px 30px;box-shadow:0 10px 34px rgba(60,20,70,.09)}

/* ------------------------------------------------------------ responsivo */
@media (max-width:760px){
  /* A barra QUEBRA em duas linhas no celular. Sem isto o menu rola na
     horizontal e a aba em que a pessoa esta fica escondida atras do avatar --
     ela perde a referencia de onde esta. */
  .hub-topo{padding:8px 13px;gap:9px;height:auto;flex-wrap:wrap}
  .hub-menu{order:3;flex-basis:100%;padding-bottom:2px}
  .hub-eu{margin-left:auto}
  .hub-marca span{display:none}
  .hub-eu .hub-nome{display:none}
  .pagina{padding:14px 12px 70px}
  .abas{padding:0 8px}
}

/* ---------------------------------------------------------------- recados
   O aviso de "salvou" / "nao salvou" mora FORA da area que se redesenha.
   A primeira versao punha o aviso dentro do #conteudo, e o recarregamento da
   lista apagava a mensagem 200ms depois de ela aparecer -- ninguem lia, e a
   pessoa ficava sem saber se o clique funcionou. */
.recados{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;z-index:60;
  display:flex;flex-direction:column;gap:8px;width:min(520px,calc(100vw - 24px));pointer-events:none}
.recado{pointer-events:auto;border-radius:12px;padding:13px 15px;font-size:14px;font-weight:500;
  display:flex;gap:10px;align-items:flex-start;box-shadow:0 8px 26px rgba(40,15,50,.18);
  animation:sobe .18s ease-out}
@keyframes sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.recado-ok{background:var(--ok);color:#fff}
.recado-erro{background:var(--atraso);color:#fff}
.recado b{font-weight:700}
.recado .fechar{margin-left:auto;background:none;border:0;color:inherit;opacity:.75;
  cursor:pointer;font-size:17px;line-height:1;padding:0 2px}

/* --------------------------------------------------------- feitas agora
   O que a pessoa acabou de fazer, para ela nao ficar na duvida depois que o
   cartao some da lista. */
.feitas{background:var(--ok-bg);border:1px solid color-mix(in srgb,var(--ok) 22%,transparent);
  border-radius:12px;padding:12px 15px;margin-bottom:14px}
.feitas h2{font-size:13px;font-weight:700;color:var(--ok);text-transform:uppercase;letter-spacing:.04em}
.feitas ul{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:5px}
.feitas li{font-size:14px;color:var(--texto);display:flex;gap:8px;align-items:baseline}
.feitas li .hora{color:var(--texto-3);font-size:12px;font-variant-numeric:tabular-nums}

/* cartao enquanto grava: retorno imediato, antes de o banco responder */
.cartao.salvando{opacity:.55;position:relative}
.cartao.salvando::after{content:"";position:absolute;inset:0;border-radius:13px;
  border:2px solid var(--destaque);animation:pulsa 1s ease-in-out infinite}
@keyframes pulsa{0%,100%{opacity:.25}50%{opacity:.9}}

/* alvo de toque no celular: 44px de altura e o botao ocupando a largura */
@media (max-width:760px){
  .btn{min-height:44px;padding:11px 18px}
  .cartao .btn[data-fazer]{width:100%}
}

/* --------------------------------------------------------------- a régua
   As 7 etapas do processo dentro do cartao. E CONTEXTO: o cartao continua
   sendo sobre a etapa da pessoa, a regua so diz onde ela esta no caminho.
   O Pagamento fica separado por uma barra porque nao trava ninguem -- e e
   isso que explica os dois cartoes do mesmo cliente. */
.regua{display:flex;align-items:center;gap:5px;margin-top:11px;flex-wrap:wrap}
.regua-sep{width:1px;height:17px;background:var(--borda);margin:0 5px}
.regua-rot{font-size:11px;color:var(--texto-3);margin-right:2px}
/* A BOLINHA CONTINUA COM 16px, O ALVO PASSA A TER 24 (06/set/2026). A norma
   pede 24x24 de area para tocar; a bolinha tinha 16, e no celular -- que e
   como a equipe usa -- errar o alvo abre a etapa errada. O ::after e que fica
   com 24: o desenho nao muda um pixel, so a area que aceita o dedo. Aumentar a
   bolinha em si teria mexido na altura de todos os cartoes. */
.pt{appearance:none;padding:0;cursor:pointer;background:transparent;position:relative;
  width:16px;height:16px;border-radius:50%;border:2px solid var(--inerte);flex:none;
  transition:transform .1s}
.pt::after{content:"";position:absolute;left:50%;top:50%;width:24px;height:24px;
  transform:translate(-50%,-50%)}
.pt:hover{transform:scale(1.28)}
.pt-ok{background:var(--ok);border-color:var(--ok)}
.pt-vez{background:var(--vez,var(--destaque));border-color:var(--vez,var(--destaque))}
.pt-atraso{background:var(--atraso);border-color:var(--atraso)}
.pt-nao{background:transparent;border-color:var(--inerte)}
.pt-aqui{box-shadow:0 0 0 3px var(--papel),0 0 0 5px currentColor}
.pt-ok.pt-aqui{color:var(--ok)} .pt-vez.pt-aqui{color:var(--vez,var(--destaque))}
.pt-atraso.pt-aqui{color:var(--atraso)} .pt-nao.pt-aqui{color:var(--texto-3)}

/* a caixinha que abre ao tocar numa bolinha */
.detalhe{margin-top:10px;background:var(--roxo-tenue);border-radius:10px;padding:11px 13px;font-size:13px}
.detalhe .qual{font-weight:600;font-size:14px;margin-bottom:3px}
.detalhe .quando{color:var(--texto-2)}
.detalhe .acoes{margin-top:9px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.detalhe .porque{color:var(--texto-3);font-size:12px}

@media (max-width:760px){
  .pt{width:19px;height:19px}          /* alvo de toque maior no celular */
  .regua{gap:7px}
}

/* o grupo "fora da fila" quebra a linha inteiro, e nao deixa a barra
   separadora pendurada sozinha no fim da linha no celular */
.regua-fora{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}

/* ================================================ tela "Todos os processos" */
.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-bottom:14px}
.filtros input,.filtros select{width:auto}
/* O FILTRO TAMBEM E CAMPO, E CAMPO TEM ROTULO (06/set/2026). A norma exige
   rotulo em todo campo e diz que o texto DE DENTRO nao serve: ele some quando
   a pessoa digita, e leitor de tela costuma nao ler. Entao a fileira de
   filtros usa `.campo` como o resto -- so sem a margem de baixo, que aqui
   quem da e o gap da fileira. O texto de dentro continua, como EXEMPLO. */
.filtros .campo{margin-bottom:0}
.filtros .campo > span{font-size:12px;margin-bottom:4px}
@media (max-width:760px){ .filtros{gap:8px} .filtros .campo{flex:1 1 100%} }
.f-busca{flex:1;min-width:220px}
.f-meus{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--texto-2);white-space:nowrap}
.f-meus input{width:auto}

.lista{display:grid;gap:7px}
.proc{background:var(--papel);border:1px solid var(--borda);border-radius:12px;overflow:hidden}
.proc-aberta{border-color:var(--roxo-claro);box-shadow:0 3px 14px rgba(115,42,123,.09)}
.proc-cab{display:flex;align-items:center;gap:14px;padding:11px 14px;cursor:pointer}
.proc-cab:hover{background:var(--roxo-tenue)}
.proc-quem{flex:1;min-width:0}
.proc-nome{font-weight:600;font-size:14px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.proc-sub{color:var(--texto-2);font-size:12px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proc-tempo{text-align:right;font-size:12px;min-width:118px}
.proc-etapa{display:block;color:var(--texto-3);font-size:11px}
.t-atraso{color:var(--atraso);font-weight:600}
.t-normal{color:var(--texto-2)}
.proc-seta{color:var(--texto-3);font-size:13px;width:12px}
.badge{background:var(--destaque);color:#fff;border-radius:20px;padding:1px 7px;font-size:11px;font-weight:700}
.proc-corpo{border-top:1px solid var(--borda);padding:14px;background:var(--fundo);display:grid;gap:12px}

/* as etapas com a regra escrita */
.et-lista,.et-fora{display:grid;gap:1px;background:var(--borda);border-radius:10px;overflow:hidden}
.et-fora{margin-top:2px}
.et-fora-rot{font-size:11px;color:var(--texto-3);margin:6px 0 5px;text-transform:uppercase;letter-spacing:.04em}
.et{display:flex;align-items:center;gap:12px;padding:9px 12px;background:var(--papel);flex-wrap:wrap}
.et-nome{font-weight:600;font-size:13px;min-width:150px}
.et-regra{flex:1;font-size:13px;color:var(--texto-2);min-width:180px}
.et-acao{margin-left:auto}
.et-ok .et-nome{color:var(--ok)}
.et-vez{background:var(--vez-bg,var(--destaque-bg))} .et-vez .et-nome{color:var(--destaque)}
.et-trava .et-nome{color:var(--texto-3)} .et-trava .et-regra{color:var(--texto-3)}
.et .fora{color:var(--texto-3)} .et .falta{color:var(--espera);font-weight:600}

.cx{background:var(--papel);border:1px solid var(--borda);border-radius:10px;padding:11px 13px}
.cx-t{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--texto-3);margin-bottom:8px}
.cx-n{background:var(--roxo-tenue);color:var(--roxo);border-radius:20px;padding:1px 7px;font-size:11px}
.cx-i{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:14px;cursor:pointer}
.cx-i input{width:auto;min-height:auto}
.vazio-p{color:var(--texto-3);font-size:12px;margin-top:6px}
.nv{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nv input{width:auto;flex:1;min-width:130px}
.nv-ok{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--texto-2);white-space:nowrap}
.nv-ok input{width:auto;min-height:auto}

.cm-lista{display:grid;gap:8px;max-height:290px;overflow:auto}
.cm{background:var(--fundo);border-radius:9px;padding:8px 10px}
.cm-cab{display:flex;gap:7px;align-items:center;font-size:12px;flex-wrap:wrap}
.cm-q{color:var(--texto-3);margin-left:auto}
.cm-tx{font-size:14px;margin-top:3px;white-space:pre-wrap}
.cm-novo{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}
.cm-novo select{width:auto;flex:0 0 auto}
.cm-novo input{flex:1;min-width:150px}

.recolhe{margin-top:18px}
.recolhe-t{appearance:none;background:none;border:0;cursor:pointer;font:600 14px Inter,sans-serif;
  color:var(--texto-2);padding:7px 0;display:flex;align-items:center;gap:8px}
.recolhe-t:hover{color:var(--roxo)}
.recolhe-t .conta{background:var(--inerte-bg);color:var(--texto-2);border-radius:20px;padding:1px 8px;font-size:11px}

.modal-fundo{position:fixed;inset:0;background:rgba(35,12,42,.42);z-index:70;display:grid;place-items:center;padding:16px}
.modal{background:var(--papel);border-radius:15px;padding:22px;width:min(460px,100%);max-height:88vh;overflow:auto}
.modal-pe{display:flex;gap:9px;justify-content:flex-end;margin-top:6px}

@media (max-width:760px){
  .proc-cab{flex-wrap:wrap;gap:8px;padding:12px 13px}
  .proc-quem{flex:1 1 100%;order:1}
  .proc .regua{order:2;flex:1 1 100%}
  .proc-tempo{order:3;text-align:left;min-width:0}
  .proc-seta{order:4;margin-left:auto}
  .et{gap:6px}
  .et-nome{min-width:0;flex:1 1 100%}
  .et-regra{flex:1 1 100%;min-width:0}
  .et-acao{margin-left:0;flex:1 1 100%}
  .et-acao .btn{width:100%}
  .barra-pagina #bNovo{width:100%}
}

.faixa-aviso{display:block;width:100%;text-align:left;appearance:none;cursor:pointer;
  background:var(--espera-bg);color:var(--espera);border:1px solid color-mix(in srgb,var(--espera) 26%,transparent);
  border-radius:11px;padding:11px 14px;font:500 13px Inter,sans-serif;margin-bottom:12px}
.faixa-aviso:hover{filter:brightness(.97)}
.faixa-aviso strong{font-weight:700}

/* =============================================== os tres niveis de atraso
   Regra do Sidney (30/ago/2026): 3, 7 e 15 dias parado. Os NUMEROS vivem no
   banco, em pipeline.niveis_atraso -- aqui so mora a cor, que e desenho.
   A rampa escurece de proposito: quem nao distingue as matizes ainda enxerga
   qual e a pior pelo tom. */
.pt-a1{background:var(--a1);border-color:var(--a1)}
.pt-a2{background:var(--a2);border-color:var(--a2)}
.pt-a3{background:var(--a3);border-color:var(--a3);box-shadow:0 0 0 2px var(--a3-bg)}
.pt-a1.pt-aqui{color:var(--a1)} .pt-a2.pt-aqui{color:var(--a2)} .pt-a3.pt-aqui{color:var(--a3)}

.selo-a1{background:var(--a1-bg);color:var(--a1)}
.selo-a2{background:var(--a2-bg);color:var(--a2)}
.selo-a3{background:var(--a3-bg);color:var(--a3)}

.tempo-vez{color:var(--texto-2)}
.tempo-a1{color:var(--a1);font-weight:600}
.tempo-a2{color:var(--a2);font-weight:600}
.tempo-a3{color:var(--a3);font-weight:700}

.et-a1{background:var(--a1-bg)} .et-a1 .et-nome{color:var(--a1)}
.et-a2{background:var(--a2-bg)} .et-a2 .et-nome{color:var(--a2)}
.et-a3{background:var(--a3-bg)} .et-a3 .et-nome{color:var(--a3)}
.nivel-1{color:var(--a1);font-weight:600}
.nivel-2{color:var(--a2);font-weight:600}
.nivel-3{color:var(--a3);font-weight:700}

/* legenda, para ninguem precisar adivinhar o que cada cor quer dizer */
.legenda{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:-4px 0 12px;
  font-size:12px;color:var(--texto-2)}
.legenda i{width:11px;height:11px;border-radius:50%;display:inline-block;vertical-align:-1px;margin-right:5px;border:2px solid}
.lg-ok{background:var(--ok);border-color:var(--ok)}
.lg-vez{background:var(--vez,var(--destaque));border-color:var(--vez,var(--destaque))}
.lg-a1{background:var(--a1);border-color:var(--a1)}
.lg-a2{background:var(--a2);border-color:var(--a2)}
.lg-a3{background:var(--a3);border-color:var(--a3)}
.lg-nao{background:transparent;border-color:var(--inerte)}

/* caixa de algo que FALTA preencher: os 7 de marco sem vendedor sao a tarefa
   que o Sidney vai fazer em seguida, entao precisam saltar dentro da linha */
.cx-falta{border-color:var(--a1);background:var(--a1-bg)}
.cx-falta .cx-t{color:var(--a1)}

/* acao que nao se desfaz sozinha pede botao com cara de aviso */
.btn-perigo{background:var(--a3);color:#fff}
.btn-perigo:hover:not(:disabled){filter:brightness(1.15)}
.cx-cancelado{border-color:var(--inerte);background:var(--inerte-bg)}
.cx-cancelado .cx-t{color:var(--texto-2)}
.motivo{font-size:14px;margin-top:4px}
.motivo em{color:var(--texto-3);font-style:normal;font-size:12px;display:block;margin-top:3px}
.modal p.aviso-modal{background:var(--a3-bg);color:var(--a3);border-radius:10px;padding:11px 13px;
  font-size:14px;margin:0 0 14px}

/* ============================================== selecao para cancelar em lote
   A barra fica GRUDADA NO TOPO, e nao no rodape: o rodape ja e onde moram os
   recados, e duas coisas disputando o mesmo canto e como um "cancelei 3" acaba
   escondido atras de outra caixa. */
.sel-barra{position:sticky;top:58px;z-index:35;display:flex;align-items:center;gap:12px;
  flex-wrap:wrap;background:var(--a3);color:#fff;border-radius:11px;padding:10px 14px;margin-bottom:12px;
  box-shadow:0 6px 18px rgba(60,10,30,.22)}
.sel-barra strong{font-weight:700}
.sel-barra .btn{margin-left:auto}
.sel-barra .btn-calmo{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.sel-barra .btn-calmo:hover{background:rgba(255,255,255,.14);color:#fff}
.sel-barra .btn-perigo{background:#fff;color:var(--a3)}
.sel-barra .btn-perigo:hover{background:#fff;filter:brightness(.94)}
.sel-teto{font-size:12px;opacity:.85}

.proc-sel{display:flex;align-items:center;padding-right:2px}
.proc-sel input{width:19px;height:19px;min-height:0;accent-color:var(--roxo);cursor:pointer}
.proc-marcada{border-color:var(--a3);background:var(--a3-bg)}

.lista-nomes{margin:0 0 14px;padding:11px 13px;background:var(--fundo);border-radius:10px;
  max-height:200px;overflow:auto}
.lista-nomes li{font-size:14px;margin:3px 0}
.lista-nomes li span{color:var(--texto-3);font-size:12px}

@media (max-width:760px){
  .sel-barra{top:0;padding:11px 12px}
  .sel-barra .btn{margin-left:0;flex:1 1 100%}
  .proc-sel input{width:22px;height:22px}
}

/* ====================================================== tela 3 — Cadastros */
.checks{display:flex;flex-wrap:wrap;gap:8px}
.chk{display:flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--borda);
  border-radius:9px;font-size:13px;cursor:pointer;background:var(--papel)}
.chk:has(input:checked){border-color:var(--roxo);background:var(--roxo-tenue);color:var(--roxo);font-weight:600}
.chk input{width:auto;min-height:0;accent-color:var(--roxo)}
.chk:has(input:disabled){opacity:.55;cursor:not-allowed}

.exc{list-style:none;margin:0 0 9px;padding:0;display:grid;gap:5px}
.exc li{font-size:13px;background:var(--fundo);border-radius:8px;padding:7px 10px;
  display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.exc li .btn{margin-left:auto}

input.inline{width:auto;flex:1;min-width:120px;padding:6px 10px;font-size:13px}
input.inline.curto{width:72px;flex:0 0 auto;min-width:0}

.porques{margin:0;padding-left:18px;display:grid;gap:7px}
.porques li{font-size:13px;color:var(--texto-2)}
.porques strong{color:var(--texto)}

@media (max-width:760px){
  .chk{flex:1 1 100%}
  .exc li .btn{margin-left:0;flex:1 1 100%}
  input.inline{flex:1 1 100%}
}

/* ===========================================================================
   A PARTIR DAQUI: o que a porta de entrada acrescentou (30-31/ago/2026).
   ---------------------------------------------------------------------------
   Foi tudo ACRESCENTADO, nada alterado -- por isso a copia que o Pipeline
   carrega continua valendo e as duas nao divergem na aparencia.
   A FONTE DA VERDADE deste arquivo e o repositorio hub-multvision.
   =========================================================================== */

/* -------------------------------------------------------------- ladrilhos
   Os sistemas da pessoa. Web primeiro: no computador e uma grade de cartoes
   largos; no celular vira uma coluna. O ladrilho inteiro e o link -- alvo
   grande, que e o que funciona no celular e para quem tem pouca pratica. */
.saudacao{margin:6px 0 20px}
.saudacao h1{font-size:26px;margin-bottom:5px}
.saudacao p{margin:0;color:var(--texto-2);font-size:15px}

.ladrilhos{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.ladrilho{position:relative;display:flex;align-items:center;gap:15px;padding:19px 18px;min-height:88px;
  background:var(--papel);border:1px solid var(--borda);border-radius:14px;
  text-decoration:none;color:inherit;transition:border-color .13s,box-shadow .13s,transform .13s}
.ladrilho:hover{border-color:var(--roxo-claro);box-shadow:0 7px 22px rgba(60,20,70,.09);transform:translateY(-1px)}
.ladrilho:focus-visible{outline:2px solid var(--roxo-claro);outline-offset:2px}
.ladrilho .marca{flex:none;width:50px;height:50px;border-radius:13px;display:grid;place-items:center;
  background:var(--roxo-tenue);color:var(--roxo);font:700 17px Sora,Inter,sans-serif}
.ladrilho .txt{min-width:0}
.ladrilho .txt strong{display:block;font:600 17px Sora,Inter,sans-serif;margin-bottom:2px}
/* A descricao QUEBRA em vez de cortar: "Da venda a conclusa..." nao informa
   nada, e sao poucas palavras -- duas linhas cabem sem apertar o ladrilho. */
.ladrilho .txt span{display:block;font-size:13px;color:var(--texto-2);line-height:1.35}
.ladrilho .seta{margin-left:auto;color:var(--texto-3);font-size:19px;flex:none}
.ladrilho:hover .seta{color:var(--roxo)}

/* ------------------------------------------------------------ grade de acesso
   Tabela no computador (a forma padrao, web primeiro) e cartoes no celular.
   Uma coluna por sistema, uma linha por pessoa: quem ve o que cabe num olhar. */
.grade-acesso{width:100%;border-collapse:collapse;font-size:14px}
.grade-acesso th,.grade-acesso td{padding:11px 12px;border-bottom:1px solid var(--borda);text-align:left}
.grade-acesso thead th{font:600 12px Inter,sans-serif;text-transform:uppercase;letter-spacing:.04em;
  color:var(--texto-3);background:var(--papel)}
.grade-acesso td.centro,.grade-acesso th.centro{text-align:center;width:104px}
.grade-acesso tbody tr:hover{background:var(--roxo-tenue)}
.grade-acesso .quem strong{display:flex;align-items:center;gap:8px;font-weight:600}
.grade-acesso .quem strong .selo{flex:none}
.grade-acesso .quem span{display:block;font-size:12px;color:var(--texto-3)}

.chave{appearance:none;border:0;background:none;cursor:pointer;padding:4px;border-radius:8px;line-height:0}
.chave:disabled{cursor:not-allowed;opacity:.45}
.chave i{display:block;width:40px;height:23px;border-radius:23px;background:var(--inerte);
  position:relative;transition:background .15s}
.chave i::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;
  background:#fff;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.22)}
.chave[aria-pressed="true"] i{background:var(--ok)}
.chave[aria-pressed="true"] i::after{transform:translateX(17px)}
.chave:focus-visible{outline:2px solid var(--roxo-claro);outline-offset:1px}

@media (max-width:860px){
  .grade-acesso,.grade-acesso tbody,.grade-acesso tr,.grade-acesso td{display:block;width:100%}
  .grade-acesso thead{display:none}
  .grade-acesso tr{border:1px solid var(--borda);border-radius:12px;margin-bottom:11px;
    padding:6px 4px;background:var(--papel)}
  .grade-acesso td{border-bottom:0;display:flex;align-items:center;justify-content:space-between;
    padding:9px 13px;text-align:left;width:auto}
  .grade-acesso td.centro{width:auto}
  .grade-acesso td[data-rot]::before{content:attr(data-rot);font-size:13px;color:var(--texto-2)}
  .grade-acesso td.quem{display:block;border-bottom:1px solid var(--borda);margin-bottom:3px}
  .grade-acesso td.quem strong{margin-bottom:2px}
}

/* --------------------------------------------------------------- rodape */
.rodape{margin-top:30px;padding-top:16px;border-top:1px solid var(--borda);
  font-size:12px;color:var(--texto-3);display:flex;flex-wrap:wrap;gap:8px 18px}

/* ------------------------------------------------------------ trocar senha
   Formulario estreito de proposito: linha longa demais atrapalha a leitura, e
   no celular a coluna unica ja e o formato natural. */
.caixa-senha{max-width:520px;padding:22px}
.caixa-senha .regra{margin-bottom:20px;align-items:flex-start}
.caixa-senha .regra ul{margin:6px 0 6px 18px;padding:0}
.caixa-senha .regra li{margin:2px 0}
.caixa-senha .pronto{margin-bottom:18px}

/* o campo com o botao "ver" dentro: alvo grande, que e o que funciona no
   celular -- digitar senha as cegas em tela pequena e onde mais se erra.

   CHAMAVA-SE .olho ATE 02/set/2026, E O NOME CUSTOU CARO. O gerador de
   documento do Propostas usa .olho ha meses para outra coisa: o titulinho em
   caixa alta acima de cada bloco ("Proximo passo", "A operacao"). Quando esta
   biblioteca entrou no Propostas, no Bloco 1, as duas viraram a mesma classe:
   os titulos do documento do cliente herdaram `position:absolute`, fundo lilas,
   cantos arredondados e preenchimento de botao. O texto saiu do lugar e passou
   por cima do paragrafo seguinte.

   Nome curto e generico em folha compartilhada e armadilha: quem escreve a
   biblioteca nao sabe o que ja existe nos apps que vao usa-la. Daqui em diante
   componente da casa leva nome que diz o que e. */
.campo-com-botao{position:relative;display:block}
.campo-com-botao input{padding-right:74px}
.btn-ver-senha{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  appearance:none;border:0;background:var(--roxo-tenue);color:var(--roxo);
  font:600 12px Inter,sans-serif;padding:7px 11px;border-radius:7px;cursor:pointer;min-width:60px}
.btn-ver-senha:hover{background:var(--roxo);color:#fff}
.btn-ver-senha:focus-visible{outline:2px solid var(--roxo-claro);outline-offset:1px}

.dica{display:block;margin-top:5px;font-size:12px;color:var(--texto-3)}
.dica-boa{color:var(--ok)}
.dica-ruim{color:var(--espera)}
.btn.larga{width:100%;margin-top:6px}

@media (max-width:760px){
  .caixa-senha{padding:16px}
  .olho{min-width:54px;padding:7px 9px}
}

/* =========================================================== a marca ======
   A logo veio do brandbook oficial (Marca_Multvision, 7 paginas), extraida em
   VETOR -- nada foi redesenhado. Fonte guardada em hub-multvision/marca/.

   Duas maneiras de aplicar, para o Sidney escolher. A diferenca esta so na
   barra de cima; a tela de entrada leva a logo nas duas.
     data-logo ausente  -> OPCAO A: barra com o nome escrito (como hoje)
     data-logo="topo"   -> OPCAO B: barra com a logo no lugar do nome
   ========================================================================= */
.marca-entrar{display:block;height:46px;width:auto;margin:0 auto 6px}
/* O NOME DO SISTEMA, embaixo da logo. Existia solto em cada app -- inline de
   22px no Pipeline, uma classe local no Propostas, e no Contratos nem existia:
   ele escrevia "MULTVISION" em texto no lugar da logo. Tres portas, tres caras.
   Agora e uma peca so. */
.nome-sistema{ font-family:Sora,Inter,system-ui,sans-serif; font-weight:var(--peso-forte);
  font-size:var(--letra-tit); color:var(--roxo); text-align:center; margin:14px 0 26px;
  letter-spacing:-.01em; }
/* o subtitulo opcional, para quem quiser dizer o que o sistema faz */
.nome-sistema small{ display:block; font-family:Inter,sans-serif; font-weight:var(--peso-normal);
  font-size:var(--letra-p); color:var(--texto-3); letter-spacing:0; margin-top:3px; }
/* a acao secundaria embaixo do botao de entrar */
.entrar-acao{ text-align:center; margin-top:14px; }

/* A SAIDA DA PORTA (05/set/2026).
   Nenhum sistema recupera senha por conta propria: a conta e a MESMA nos tres,
   entao trocar senha e assunto do hub -- decisao do Sidney. Mas porta sem saida
   e pior que porta com saida no lugar errado: quem esquece a senha e entra
   direto no Pipeline precisa saber para onde ir.
   Uma frase, um link, igual nos tres, vinda daqui. */
.entrar-saida{ text-align:center; margin-top:16px; padding-top:14px;
  border-top:1px solid var(--borda); font-size:var(--letra-m); color:var(--texto-3); }
.entrar-saida a{ color:var(--roxo); font-weight:var(--peso-medio); text-decoration:none; }
.entrar-saida a:hover{ text-decoration:underline; }
.marca-topo{height:23px;width:auto;display:none;flex:none}
[data-logo="topo"] .marca-topo{display:block}
[data-logo="topo"] .hub-marca{display:none}

@media (max-width:760px){
  /* Celular: a logo encolhe de proposito. Tela pequena e espaco de trabalho,
     e marca grande demais rouba linha de conteudo. */
  .marca-entrar{height:38px}
  .marca-topo{height:19px}
}

/* OPCAO C: na barra, so o logotipo -- sem o slogan. No tamanho da barra a linha
   "TECNOLOGIA EM SEGURANCA" fica ilegivel e vira sujeira; aqui ela sai, e a
   marca respira. Continua sendo a arte oficial, so a parte do logotipo. */
.marca-topo-nome{height:19px;width:auto;display:none;flex:none}
[data-logo="topo-nome"] .marca-topo-nome{display:block}
[data-logo="topo-nome"] .hub-marca{display:none}
@media (max-width:760px){ .marca-topo-nome{height:17px} }

/* --------------------------------------------- simbolo de cada sistema
   O ladrilho deixa de ser sigla e passa a ter simbolo proprio. O quadrado
   perde o fundo lilas: o simbolo ja tem a cor do sistema dentro dele. */
.ladrilho .marca{background:none;width:52px;height:52px;padding:0}
.ladrilho .marca img{width:52px;height:52px;display:block}
@media (max-width:760px){
  .ladrilho .marca,.ladrilho .marca img{width:46px;height:46px}
}

/* ====================================================== grade de sistemas ===
   O simbolo vira o protagonista: cartao grande, simbolo grande em cima, nome
   embaixo. Tres por linha no computador; no celular dois, que e o que cabe bem
   sem virar um icone minusculo ao lado de texto. */
.grade{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);max-width:840px}
.grade .ladrilho{flex-direction:column;align-items:center;text-align:center;
  gap:0;padding:26px 18px 22px;min-height:0}
.grade .ladrilho .simbolo{width:86px;height:86px;display:block;margin-bottom:14px}
.grade .ladrilho .sigla{width:86px;height:86px;margin-bottom:14px;border-radius:22px;
  background:var(--roxo-tenue);color:var(--roxo);display:grid;place-items:center;
  font:700 26px Sora,Inter,sans-serif}
.grade .ladrilho strong{font:600 17px Sora,Inter,sans-serif;margin-bottom:4px}
.grade .ladrilho span{font-size:13px;color:var(--texto-2);line-height:1.35}

/* Espaco reservado: presente, mas claramente ainda nao. Sem seta, sem cursor
   de link, e o simbolo desbotado -- a pessoa entende sem precisar tentar. */
.ladrilho-porvir{cursor:default;background:transparent;
  border-style:dashed;border-color:var(--borda)}
.ladrilho-porvir:hover{border-color:var(--borda);box-shadow:none;transform:none}
.ladrilho-porvir .simbolo{opacity:.4}
.ladrilho-porvir strong{color:var(--texto-2)}
.ladrilho-porvir .selo{margin-left:6px;vertical-align:2px}

@media (max-width:900px){ .grade{grid-template-columns:repeat(2,1fr);gap:12px} }
@media (max-width:760px){
  .grade .ladrilho{padding:20px 12px 16px}
  .grade .ladrilho .simbolo,.grade .ladrilho .sigla{width:64px;height:64px;margin-bottom:10px}
  .grade .ladrilho strong{font-size:15px}
  .grade .ladrilho span{font-size:12px}
}
/* O selo "em breve" sempre em linha propria: com nome curto ele cabia ao lado
   e com nome longo quebrava, e os cartoes ficavam desalinhados entre si. */
.ladrilho-porvir strong .selo{display:block;width:fit-content;margin:6px auto 0}

/* ==========================================================================
   TRABALHO EM TELA LARGA  (nasceu no Propostas, 02/set/2026)
   --------------------------------------------------------------------------
   Ate aqui a biblioteca servia telas de LEITURA: o menu de sistemas, a lista
   de processos, o cadastro de acesso. O Propostas trouxe a primeira tela de
   TRABALHO -- uma lista longa que a pessoa filtra, percorre e da qual escolhe
   um item para olhar de perto. Em tela grande isso pede duas coisas que a
   biblioteca ainda nao tinha: uma barra de pagina com titulo e acoes, e a
   dupla "lista + painel", que deixa a pessoa ver um item sem perder a lista.

   O que NAO entra aqui: a aparencia da linha de cada sistema. A linha da
   proposta tem numero, cliente e escopo; a do processo tem etapa e atraso.
   Cada um pinta a sua no seu proprio arquivo -- aqui fica so o que os dois
   fariam igual.
   ========================================================================== */

/* Barra de pagina: titulo a esquerda, acoes a direita. Some no celular a
   distincao entre as duas pontas -- vira uma coluna, acoes embaixo. */
.barra-pagina{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.barra-pagina h1{font-size:21px;color:var(--texto)}
.barra-pagina .sub{color:var(--texto-2);font-size:14px;margin-top:4px}
.barra-pagina .acoes{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}

/* A dupla: lista a esquerda, painel a direita. O painel ACOMPANHA a rolagem
   (sticky) porque a lista e sempre mais alta que ele; sem isso a pessoa rola
   ate o fim da lista e o painel some da vista, o que anula a razao de existir
   dele. Abaixo de 1100px vira uma coluna so e o painel sai de cena -- em tela
   estreita ele roubaria a lista sem caber. */
.dupla{display:grid;grid-template-columns:minmax(0,1fr) 356px;gap:18px;align-items:start}
.painel{position:sticky;top:86px;background:var(--papel);border:1px solid var(--borda);
  border-radius:13px;padding:18px;max-height:calc(100vh - 110px);overflow:auto}
.painel .painel-vazio{color:var(--texto-3);font-size:13px;text-align:center;padding:34px 8px}
.painel h2{font-size:16px;margin-bottom:3px}
.painel .painel-sub{color:var(--texto-2);font-size:13px;margin-bottom:14px}
.painel dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 12px;font-size:13px}
.painel dt{color:var(--texto-3)}
.painel dd{margin:0;color:var(--texto);text-align:right}
.painel .painel-pe{margin-top:17px;display:grid;gap:8px}

/* Cabecalho da tabela larga: os rotulos das colunas. So faz sentido quando as
   linhas estao em colunas, entao ele SOME junto com elas no celular. */
.cab-tabela{display:grid;gap:12px;padding:0 15px 7px;font:600 11px Inter,sans-serif;
  color:var(--texto-3);text-transform:uppercase;letter-spacing:.05em}

@media (max-width:1100px){
  .dupla{grid-template-columns:minmax(0,1fr)}
  .painel{display:none}
}
@media (max-width:760px){
  .cab-tabela{display:none}
  .barra-pagina .acoes{margin-left:0;width:100%}
  .barra-pagina .acoes .btn{flex:1}
}

/* ═══════════════════════════════════════════════════ TABELA ══════════════
   NAO EXISTIA. Nenhum dos tres sistemas desenhou uma <table> ate hoje -- as
   listas sao feitas de blocos, que funcionam bem no celular. O Estoque vai
   precisar de tabela de verdade (produto, quantidade, movimento), e sem uma
   regra na casa ele inventaria a dele.

   As decisoes, e o motivo de cada uma:
   - CABECALHO EM CAIXA ALTA PEQUENA, e nao em negrito grande: a mesma
     linguagem dos rotulos `.cx-t` que a casa ja usa, e nao rouba a atencao da
     linha de dado.
   - SEPARADOR SO ENTRE LINHAS, sem grade vertical: coluna se separa pelo
     alinhamento, e grade cheia vira gaiola. Zebra tambem nao -- ela compete
     com a marcacao de estado, que aqui e semantica.
   - NUMERO SEMPRE A DIREITA E TABULAR, porque numero que nao alinha nao se
     compara, e comparar e para o que serve uma tabela.
   - ROLA NA HORIZONTAL DENTRO DA PROPRIA CAIXA, nunca empurrando a pagina.
     No celular a tabela e larga por natureza; o que nao pode e a pagina
     inteira andar de lado.
   ═════════════════════════════════════════════════════════════════════════ */
.tabela-cx{ overflow-x:auto; border:1px solid var(--borda); border-radius:var(--raio-cx);
  background:var(--papel); }
.tabela{ width:100%; border-collapse:collapse; font-size:var(--letra-m); min-width:520px; }
.tabela th, .tabela td{ padding:10px 13px; text-align:left; }
.tabela thead th{ font:var(--peso-medio) var(--letra-mini)/1.4 Inter,sans-serif;
  letter-spacing:.07em; text-transform:uppercase; color:var(--texto-3);
  border-bottom:1px solid var(--borda); white-space:nowrap; }
.tabela tbody tr + tr td{ border-top:1px solid var(--borda); }
.tabela tbody tr:hover td{ background:var(--roxo-tenue); }
/* o numero alinhado a direita e com digito de largura fixa */
.tabela .num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tabela thead th.num{ text-align:right; }
/* a coluna que identifica a linha nao encolhe nem quebra */
.tabela .chave{ font-weight:var(--peso-forte); color:var(--texto); white-space:nowrap; }
/* a celula de acao encosta na direita e nao estica */
.tabela .acao{ text-align:right; width:1%; white-space:nowrap; }
.tabela tfoot td{ border-top:2px solid var(--borda); font-weight:var(--peso-forte); }
@media (max-width:760px){
  /* no celular a tabela rola dentro da caixa; o respiro encolhe para caber
     mais coluna na tela antes de precisar rolar */
  .tabela th, .tabela td{ padding:9px 10px; }
}

/* ---------------------------------------------- alvo de toque das caixinhas */
/* Caixas de marcar nasciam com 13px em algumas telas: abaixo dos 24 da norma,
   e desconfortavel no celular mesmo para quem enxerga bem. */
input[type=checkbox],input[type=radio]{width:18px;height:18px;accent-color:var(--roxo);
  flex:none;cursor:pointer;margin:3px}
label:has(> input[type=checkbox]),label:has(> input[type=radio]){cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;min-height:24px}

/* -------------------------------------------------------- linha desativada */
/* "Desativado" nao pode ser desbotado: opacidade derruba o contraste de tudo
   que esta dentro, e a norma vale para o texto que APARECE na tela, nao para o
   que ele seria em cima. O estado vira fundo e borda; a palavra continua
   escrita na linha, que e o que de fato informa. */
.cartao-inativo{background:var(--inerte-bg);border-color:var(--inerte)}

/* --------------------------------------------------- pular para o conteudo */
/* Sem ele, o teclado atravessa a barra e todas as abas a cada tela antes de
   chegar no miolo. Fica escondido ate receber o foco -- e so aparece para quem
   esta usando o teclado, que e quem precisa. Nao usa display:none nem
   visibility:hidden: os dois tirariam o link do foco junto. */
.pular{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--roxo);color:#fff;padding:10px 16px;border-radius:0 0 9px 0;
  font:600 14px Inter,sans-serif;text-decoration:none}
.pular:focus{left:0}
/* NA PORTA NAO HA O QUE PULAR (07/set/2026). A tela de entrada nao tem barra
   nem abas: o link levava a pessoa a um alvo que so passa a existir DEPOIS do
   login -- defeito que eu mesmo criei ao adicionar o link sem conferir os dois
   estados. Dar um alvo na porta seria remendo: o certo e ele nao existir onde
   nao serve. `:has` pergunta ao DOM em que estado a pagina esta, sem JS e sem
   cada app precisar saber disso. */
body:has(.entrar-fundo) .pular{display:none}

/* -------------------------------------------------------- so para ser lido */
/* Texto que existe para o leitor de tela e nao ocupa lugar na tela. O
   clip+1px e a receita que continua sendo LIDA -- `display:none` some tambem
   para o leitor, que e o contrario do que se quer aqui. */
.so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------- titulo de cartao de lista */
/* O nome do cliente e o TITULO do cartao: quem usa leitor de tela navega uma
   lista pulando de titulo em titulo, e sem isso a unica saida e ler tudo em
   ordem. Vira <h2> pela estrutura, e nao pela aparencia -- por isso a regra
   desfaz a Sora dos titulos e mantem exatamente o que a lista ja mostrava. */
h2.cartao-titulo{font-family:Inter,system-ui,sans-serif;font-weight:700;
  font-size:15px;letter-spacing:0;margin:0;display:inline}

/* --------------------------------------------------------- campo com erro */
/* `aria-invalid` ja dizia ao leitor de tela QUAL campo esta errado; faltava
   dizer a quem enxerga. A borda nao substitui a mensagem -- ela continua
   escrita logo acima do botao, porque cor sozinha nao pode ser a unica forma
   de informar. Aqui a borda so REPETE o que a frase ja diz. */
[aria-invalid="true"]{border-color:var(--atraso) !important;background:var(--atraso-bg)}
[aria-invalid="true"]:focus{border-color:var(--atraso) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--atraso) 22%, transparent)}

/* ------------------------------------------- campo com botao ou selo ao lado */
/* No celular o "Buscar CNPJ" ao lado do campo espremia o campo para ~20px: o
   rotulo do botao nao quebra (e nao deve), entao quem cedia largura era o campo
   -- justamente o que a pessoa precisa enxergar para digitar. Aqui a fileira
   QUEBRA: em tela estreita o botao desce para a linha de baixo e o campo fica
   inteiro. O `min-width` e o que impede o campo de encolher antes disso. */
.campo-linha,.campo > span.campo-linha{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:0}
.campo-linha > input,.campo-linha > select,.campo-linha > textarea{flex:1 1 11ch;width:auto;min-width:0}
.campo-linha > .btn{flex:0 0 auto}

/* ------------------------------------------------------------- abrindo */
/* A TELA DE ESPERA, UMA SO PARA OS QUATRO (07/set/2026). Cada sistema tinha a
   sua: o Pipeline e o hub mostravam "Carregando…" em cinza sem marca, o
   Propostas mostrava a marca com "Abrindo…", e o Contratos nao mostrava nada --
   quem abria os quatro em sequencia via quatro coisas diferentes. Agora e
   "Carregando <Sistema>" com a marca embaixo, igual nos quatro.

   O ATRASO DE 300ms E O PONTO PRINCIPAL. O Sidney notou que num deles a tela
   abre tao rapido que a espera nem aparece -- e piscar por 200ms e pior do que
   nao aparecer: parece defeito, nao informacao. Entao ela nasce INVISIVEL e so
   surge aos 300ms. Se o sistema abriu antes disso, ninguem viu nada, e esse e
   o comportamento certo. 300ms porque abaixo disso a pessoa ainda percebe a
   acao como imediata e um lampejo so atrapalha; acima, o silencio comeca a
   parecer travamento.

   Sem JS de proposito: o atraso e do CSS, entao os quatro herdam sem cada um
   precisar acertar o proprio temporizador. `role="status"` continua no HTML --
   quem usa leitor de tela e avisado mesmo quando a espera nao chega a pintar,
   porque para essa pessoa o que importa e que a pagina ainda esta carregando. */
.abrindo{ position:fixed; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; background:var(--fundo);
  z-index:60; opacity:0; animation:abrindo-surge .2s ease 300ms forwards; }
.abrindo-txt{ font-family:Sora,Inter,system-ui,sans-serif;
  font-weight:var(--peso-forte); font-size:var(--letra-tit); color:var(--roxo);
  letter-spacing:-.01em; }
.abrindo-marca{ height:34px; width:auto; opacity:.85 }
@keyframes abrindo-surge{ to{ opacity:1 } }
@media (prefers-reduced-motion:reduce){ .abrindo{ animation-duration:.01ms } }