/* ===========================================================================
   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.
   =========================================================================== */

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

/* ---------------------------------------------------------------- PALETA A */
:root,
[data-paleta="a"] {
  --roxo:        #732a7b;   /* brandbook */
  --roxo-claro:  #8b22d5;
  --roxo-escuro: #521179;
  --roxo-tenue:  #f6eef8;
  --destaque:    #732a7b;   /* "sua vez" */
  --destaque-bg: #f6eef8;

  --fundo:       #faf8fb;
  --papel:       #ffffff;
  --borda:       #ebe4ee;
  --texto:       #241a28;
  --texto-2:     #6b5f72;
  --texto-3:     #9a8fa0;

  --ok:          #1f9254;  --ok-bg:      #e7f6ed;
  --espera:      #b8860b;  --espera-bg:  #fdf4e0;
  --atraso:      #c0392b;  --atraso-bg:  #fdecea;
  --inerte:      #cfc7d3;  --inerte-bg:  #f2eff3;
  --a1: #b8860b; --a1-bg: #fdf4e0;
  --a2: #c0392b; --a2-bg: #fdecea;
  --a3: #6b1226; --a3-bg: #f9e6ea;
}
/* -------------------------------------------------- PALETA B — roxo + coral */
[data-paleta="b"] {
  --roxo: #732a7b; --roxo-claro: #9b3db0; --roxo-escuro: #521179; --roxo-tenue: #f7f0f9;
  --destaque: #e2574c; --destaque-bg: #fdeeec;
  --fundo: #fdfaf7; --papel: #ffffff; --borda: #f0e6e3;
  --texto: #2b2124; --texto-2: #6f6167; --texto-3: #a2939a;
  --ok: #1f9254; --ok-bg: #e7f6ed;
  --espera: #d97706; --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: #e08c1f; --a1-bg: #fdf1dd;   /* ambar    3 a 6 dias  */
  --a2: #c2410c; --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 C — roxo + turquesa */
[data-paleta="c"] {
  --roxo: #6c2b86; --roxo-claro: #8b22d5; --roxo-escuro: #4a1263; --roxo-tenue: #f1ecf7;
  --destaque: #0d9488; --destaque-bg: #e6f6f4;
  --fundo: #f7f9fb; --papel: #ffffff; --borda: #e4e9ef;
  --texto: #1f2937; --texto-2: #5b6675; --texto-3: #94a1b2;
  /* verde, e nao turquesa: com o turquesa no papel de "sua vez", concluida e
     vez ficavam com a mesma matiz e a fileira de bolinhas virava um borrao. */
  --ok: #15803d; --ok-bg: #e8f6ec;
  --espera: #b45309; --espera-bg: #fdf3e3;
  --atraso: #be123c; --atraso-bg: #fdeaef;
  --a1: #b45309; --a1-bg: #fdf3e3;
  --a2: #be123c; --a2-bg: #fdeaef;
  --a3: #7a0d28; --a3-bg: #fae6eb;
  --inerte: #cbd5e1; --inerte-bg: #eef2f6;
}

*,*::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)}

/* ------------------------------------------------------------------ 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}
.hub-menu a[aria-current] .hub-sigla{background:rgba(255,255,255,.22);color:#fff}
.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}

/* ------------------------------------------------------------------ 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)}
.aba[aria-selected="true"]{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-selected="true"] .conta{background:var(--roxo);color:#fff}

/* ------------------------------------------------------------- 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}

/* --------------------------------------------------------------- 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}
.btn:disabled{opacity:.5;cursor:not-allowed}
.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}

/* --------------------------------------------------------------- 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)}
.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){
  .hub-topo{padding:0 13px;gap:11px}
  .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:14.5px;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}
.pt{appearance:none;padding:0;cursor:pointer;background:transparent;
  width:16px;height:16px;border-radius:50%;border:2px solid var(--inerte);flex:none;
  transition:transform .1s}
.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:13.5px}
.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:12.5px}

@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" */
.topo-2{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filtros input,.filtros select{width:auto}
.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:14.5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.proc-sub{color:var(--texto-2);font-size:12.5px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proc-tempo{text-align:right;font-size:12.5px;min-width:118px}
.proc-etapa{display:block;color:var(--texto-3);font-size:11.5px}
.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:11.5px;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:13.5px;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:12.5px;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:12.5px;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:11.5px}

.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%}
  .topo-2 #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 13.5px 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:12.5px;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:12.5px;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:12.5px;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:12.5px}

@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:13.5px;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:13.5px;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:13.5px}
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:13.5px;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%}
}