/* DemandaFlow — folha de estilo única
   Identidade: índigo sobre papel frio; o tempo é o herói da tela. */

:root{
  --ink:#12141C; --ink-2:#1B1E29; --ink-3:#262A38;
  --canvas:#F4F5F8; --surface:#FFFFFF; --line:#E4E6EC;
  --text:#171A23; --muted:#6C7286; --faint:#9AA0B1;
  --accent:#5B4BE8; --accent-soft:#EEEBFE; --accent-dark:#4C3DD4;
  --amber:#B45309; --amber-soft:#FEF3E2;
  --green:#047857; --green-soft:#E6F6F0;
  --red:#DC2626; --red-soft:#FDECEC;
  /* fundo de card com prazo estourado: claro o bastante para o texto do card
     continuar legível, forte o bastante para achar o card de longe */
  --red-card:#FEF2F2; --red-card-forte:#FDE8E8; --amber-card:#FFFBF2;
  --r:12px; --r-sm:8px;
  --shadow:0 1px 2px rgba(18,20,28,.06), 0 4px 16px rgba(18,20,28,.05);
  --shadow-up:0 12px 32px rgba(18,20,28,.14);
  --barra:64px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--canvas); color:var(--text);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3,.display{font-family:Sora,Inter,system-ui,sans-serif;letter-spacing:-.02em}
.num{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
a{color:var(--accent)}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{
  font-family:inherit;font-size:16px;width:100%;padding:11px 12px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input[type=checkbox]{width:20px;height:20px;padding:0;accent-color:var(--accent);flex:none}
input[type=color]{height:46px;padding:4px}
textarea{resize:vertical;min-height:84px}
label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px;
  text-transform:uppercase;letter-spacing:.04em}
.field{margin-bottom:16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- botões (mínimo 44px de altura) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:11px 18px;border-radius:var(--r-sm);
  font-weight:600;font-size:15px;transition:background .15s,transform .1s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover:not([disabled]){background:var(--accent-dark)}
.btn-ghost{background:var(--surface);border:1px solid var(--line);color:var(--text)}
.btn-ghost:hover:not([disabled]){background:var(--canvas)}
.btn-danger{background:var(--red-soft);color:var(--red)}
.btn-block{width:100%}
.btn-sm{min-height:38px;padding:8px 13px;font-size:14px}

/* ---------- avisos ---------- */
.notice{padding:12px 14px;border-radius:var(--r-sm);font-size:14px;margin-bottom:16px;display:none}
.notice.show{display:block}
.notice.err{background:var(--red-soft);color:var(--red)}
.notice.ok{background:var(--green-soft);color:var(--green)}
.notice.info{background:var(--accent-soft);color:var(--accent-dark)}

/* ---------- páginas públicas ---------- */
.pagina{max-width:720px;margin:0 auto;padding:28px 20px 60px}
.pagina h1{font-size:26px;margin-bottom:6px}
.pagina h2{font-size:17px;margin:28px 0 8px}
.pagina p,.pagina li{color:var(--text);margin-bottom:10px;line-height:1.65}
.pagina ul{padding-left:20px}
.pagina .sub{color:var(--muted);margin-bottom:22px}
.voltar{display:inline-flex;align-items:center;gap:6px;margin-bottom:20px;
  color:var(--muted);font-weight:600;text-decoration:none;font-size:14px}

/* ---------- entrada (login / cadastro / instalar) ---------- */
.entrada{display:grid;grid-template-columns:1fr;min-height:100dvh}
@media(min-width:960px){.entrada{grid-template-columns:1.05fr 1fr}}
.vitrine{display:none;background:var(--ink);color:#fff;padding:56px 48px;
  flex-direction:column;justify-content:space-between}
@media(min-width:960px){.vitrine{display:flex}}
.vitrine h2{font-size:34px;line-height:1.15;margin-bottom:14px}
.vitrine p{color:#A9AEC0;max-width:40ch}
.marca{display:flex;align-items:center;gap:10px;font-family:Sora;font-weight:700;font-size:17px}
.demo{margin-top:40px}
.demo .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#7A8199;margin-bottom:12px}
.demo-bar{display:flex;height:38px;border-radius:8px;overflow:hidden}
.demo-bar span{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}
.demo-legenda{display:flex;gap:16px;margin-top:12px;flex-wrap:wrap;font-size:12px;color:#8A90A6}
.demo-legenda i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}
.formulario{display:flex;align-items:center;justify-content:center;
  padding:calc(28px + var(--safe-t)) 20px calc(28px + var(--safe-b));background:var(--surface)}
.cartao{width:100%;max-width:390px}
.cartao h1{font-size:25px;margin-bottom:6px}
.cartao .sub{color:var(--muted);margin-bottom:26px}
.troca{text-align:center;margin-top:20px;color:var(--muted);font-size:14px}
.troca button{color:var(--accent);font-weight:600}
.legal{font-size:12px;color:var(--faint);text-align:center;margin-top:22px;line-height:1.6}
.aceite{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--text);margin-bottom:18px}
.aceite label{text-transform:none;letter-spacing:0;font-size:13px;font-weight:400;color:var(--text);margin:0}

/* ---------- aplicação ---------- */
.app{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
@media(min-width:900px){.app{display:grid;grid-template-columns:214px 1fr}}

.lateral{display:none;background:var(--ink);color:#fff;flex-direction:column;padding:18px 12px;overflow-y:auto}
@media(min-width:900px){.lateral{display:flex}}
.lateral .marca{padding:6px 10px 20px}
.menu{display:flex;flex-direction:column;gap:2px;flex:1}
.menu-item{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:var(--r-sm);
  color:#A2A8BD;font-weight:500;text-align:left;width:100%;min-height:44px}
.menu-item:hover{background:var(--ink-2);color:#fff}
.menu-item.on{background:var(--ink-3);color:#fff}
.menu-item svg{width:18px;height:18px;flex:none}
.rodape-lateral{border-top:1px solid var(--ink-3);padding-top:14px;margin-top:14px}
.quem{display:flex;align-items:center;gap:10px;padding:0 4px 12px}
.inicial{width:34px;height:34px;border-radius:9px;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.quem-nome{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quem-papel{font-size:11px;color:#7A8199}
.versao{font-size:11px;color:#5F6578;padding:10px 4px 0}

.trabalho{display:flex;flex-direction:column;overflow:hidden;min-height:0}
.topo{display:flex;align-items:center;gap:12px;padding:calc(12px + var(--safe-t)) 18px 12px;
  background:var(--surface);border-bottom:1px solid var(--line);flex:none}
.topo h2{font-size:18px;flex:1}
.tela{flex:1;overflow:auto;padding:18px;-webkit-overflow-scrolling:touch}
@media(max-width:899px){.tela{padding:14px 14px calc(var(--barra) + var(--safe-b) + 14px)}}

/* barra inferior: só no celular, rola na horizontal se houver muitas abas */
.barra{display:none}
@media(max-width:899px){
  .barra{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--surface);border-top:1px solid var(--line);
    padding-bottom:var(--safe-b);
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .barra::-webkit-scrollbar{display:none}
  .barra-item{
    flex:1 0 auto;min-width:22%;min-height:var(--barra);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:8px 12px;color:var(--faint);font-size:11px;font-weight:600;
  }
  .barra-item svg{width:21px;height:21px}
  .barra-item.on{color:var(--accent)}
}

/* ---------- faixa de licença ---------- */
.faixa{padding:11px 18px;font-size:13.5px;display:flex;align-items:center;gap:12px;flex:none}
.faixa.aviso{background:var(--amber-soft);color:var(--amber)}
.faixa.parada{background:var(--red-soft);color:var(--red)}
.faixa button{font-weight:700;text-decoration:underline;margin-left:auto;white-space:nowrap}

/* ---------- quadro ---------- */
.quadro{display:flex;gap:14px;align-items:flex-start;min-height:100%;padding-bottom:4px}
@media(max-width:899px){.quadro{scroll-snap-type:x mandatory}}
.coluna{background:#EDEFF3;border-radius:var(--r);width:292px;flex:none;
  display:flex;flex-direction:column;max-height:100%;scroll-snap-align:start}
@media(max-width:899px){.coluna{width:84vw}}
.coluna-topo{padding:13px 14px 10px;display:flex;align-items:center;gap:9px}
.bolinha{width:9px;height:9px;border-radius:3px;flex:none}
.coluna-nome{font-weight:600;font-size:13px;flex:1;letter-spacing:-.01em}
.contador{background:rgba(23,26,35,.08);padding:2px 9px;border-radius:20px;
  font-size:11px;font-weight:700;color:var(--muted)}
.coluna-tempo{padding:0 14px 10px;font-size:11.5px;color:var(--muted);
  display:flex;justify-content:space-between;gap:8px}
.coluna-tempo b{color:var(--text)}
.pilha{padding:0 10px 10px;display:flex;flex-direction:column;gap:9px;overflow-y:auto;min-height:72px}
.pilha.alvo{background:rgba(91,75,232,.08);border-radius:var(--r-sm);
  outline:2px dashed rgba(91,75,232,.4);outline-offset:-4px}
.coluna-add{margin:0 10px 10px;min-height:44px;padding:10px;border-radius:var(--r-sm);
  border:1px dashed #C6CAD6;color:var(--muted);font-size:14px;font-weight:500}
.coluna-add:hover{border-color:var(--accent);color:var(--accent);background:rgba(91,75,232,.05)}
.vazio-col{padding:14px 4px;font-size:12.5px;color:var(--faint)}

.cartao-demanda{background:var(--surface);border-radius:var(--r-sm);padding:12px;
  box-shadow:var(--shadow);cursor:grab;border:1px solid transparent;text-align:left;width:100%}
.cartao-demanda:hover{box-shadow:var(--shadow-up)}
.cartao-demanda.arrastando{opacity:.45}
.cartao-demanda.pronta{background:#F7F8FA;border-color:var(--line);box-shadow:none;cursor:default}
.c-topo{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px}
.c-titulo{font-weight:600;font-size:13.5px;line-height:1.35;flex:1;letter-spacing:-.01em}
.prio{width:7px;height:7px;border-radius:50%;margin-top:6px;flex:none}
.prio.alta{background:var(--red)}.prio.normal{background:#C6CAD6}.prio.baixa{background:#9AA0B1}
.c-meta{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--faint);margin-top:9px}
.decorrido{font-weight:700;color:var(--muted)}
.etiqueta{background:var(--canvas);border:1px solid var(--line);padding:2px 7px;
  border-radius:5px;font-size:10.5px;font-weight:600;color:var(--muted)}
.quem-mini{width:21px;height:21px;border-radius:6px;background:var(--accent-soft);
  color:var(--accent);display:grid;place-items:center;font-size:9.5px;font-weight:700;flex:none}
.cadeados{display:flex;gap:3px;margin-top:7px;flex-wrap:wrap}
.cadeado{font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px;color:#fff}

/* a barra de trilha: cada bloco é uma etapa, a largura é o tempo real */
.trilha{display:flex;height:5px;border-radius:3px;overflow:hidden;background:#EDEFF3;margin-top:10px}
.trilha span{transition:width .3s}
.trilha-g{height:34px;border-radius:var(--r-sm);margin:0}
.trilha-g span{display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700}

/* ---------- painéis e listas ---------- */
.indicadores{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.indicador{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.indicador .k{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
.indicador .v{font-size:25px;font-weight:700;margin-top:6px;letter-spacing:-.03em}
.indicador .n{font-size:12px;color:var(--faint);margin-top:3px}

.painel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin-bottom:18px}
.painel-topo{padding:14px 18px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.painel-topo h3{font-size:15px;flex:1;min-width:140px}
.painel-corpo{padding:18px}
.dica{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:7px}

.linhas{display:flex;flex-direction:column}
.linha{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.linha:last-child{border-bottom:none}
.linha-main{flex:1;min-width:150px}
.linha-t{font-weight:600;font-size:13.5px}
.linha-s{font-size:12px;color:var(--muted);margin-top:2px}
.fichas{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.ficha{font-size:11px;padding:3px 9px;border-radius:20px;background:var(--canvas);
  border:1px solid var(--line);color:var(--muted);font-weight:500}
.selo{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;text-transform:capitalize}
.selo.admin{background:var(--accent-soft);color:var(--accent)}
.selo.coordenador{background:#E7F0FE;color:#1D4ED8}
.selo.comprador{background:var(--amber-soft);color:var(--amber)}
.selo.membro{background:var(--canvas);color:var(--muted)}
.selo.master{background:var(--ink);color:#fff}

.ranking{display:flex;flex-direction:column;gap:16px}
.rk-topo{display:flex;align-items:baseline;gap:9px;margin-bottom:7px}
.rk-nome{font-weight:600;font-size:13.5px;flex:1}
.rk-total{font-weight:700;font-size:14px}
.rk-sub{font-size:11.5px;color:var(--faint);margin-top:5px}
.medidor{height:10px;background:#EDEFF3;border-radius:5px;overflow:hidden}
.medidor span{display:block;height:100%;border-radius:5px;transition:width .4s}

.vazio{text-align:center;padding:48px 20px;color:var(--muted)}
.vazio h3{font-size:16px;margin-bottom:6px;color:var(--text)}
.vazio p{font-size:13.5px;margin-bottom:18px}

/* ---------- permissões: um bloco por função, papéis como interruptores ----------
   Tabela de 5 colunas é frágil e impossível de ler no celular. Aqui cada
   função é um cartão e cada papel é um botão que liga e desliga. */
.perm-lista{display:flex;flex-direction:column}
.perm-item{padding:16px 18px;border-bottom:1px solid var(--line)}
.perm-item:last-child{border-bottom:none}
.perm-n{font-weight:600;font-size:14px}
.perm-a{font-size:12px;color:var(--faint);margin-top:2px;line-height:1.45}
.perm-papeis{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}

.chave{display:inline-flex;align-items:center;gap:8px;min-height:40px;
  padding:8px 14px;border-radius:22px;border:1px solid var(--line);
  background:var(--surface);font-size:13px;font-weight:600;color:var(--muted);
  transition:background .15s,border-color .15s,color .15s}
.chave:hover:not([disabled]){border-color:var(--accent);color:var(--accent)}
.chave .marca{width:17px;height:17px;border-radius:5px;border:1.5px solid #C6CAD6;
  display:grid;place-items:center;flex:none;transition:background .15s,border-color .15s}
.chave .marca svg{width:11px;height:11px;stroke:#fff;stroke-width:3.4;fill:none;opacity:0}

.chave[aria-checked="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-dark)}
.chave[aria-checked="true"] .marca{background:var(--accent);border-color:var(--accent)}
.chave[aria-checked="true"] .marca svg{opacity:1}

.chave[disabled]{opacity:.5;cursor:not-allowed;background:var(--canvas)}
.chave[disabled] .rotulo{text-decoration:line-through}

.perm-legenda{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);
  padding:14px 18px;border-top:1px solid var(--line);background:var(--canvas)}
.perm-legenda span{display:inline-flex;align-items:center;gap:7px}
.perm-legenda i{width:15px;height:15px;border-radius:5px;border:1.5px solid #C6CAD6;display:inline-block}
.perm-legenda i.on{background:var(--accent);border-color:var(--accent)}
.perm-legenda i.off{background:var(--canvas);opacity:.5}

/* ---------- janela (modal) ---------- */
.janela{position:fixed;inset:0;background:rgba(14,16,24,.55);z-index:100;
  display:none;align-items:flex-end;justify-content:center}
@media(min-width:700px){.janela{align-items:center;padding:24px}}
.janela.aberta{display:flex}
.folha{background:var(--surface);width:100%;max-width:580px;max-height:92dvh;overflow-y:auto;
  border-radius:16px 16px 0 0;padding-bottom:var(--safe-b)}
@media(min-width:700px){.folha{border-radius:var(--r);padding-bottom:0}}
.folha-topo{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;
  position:sticky;top:0;background:var(--surface);z-index:2}
.folha-topo h3{font-size:17px;flex:1;min-width:0}
.fechar{width:44px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;
  color:var(--muted);font-size:24px;flex:none}
.fechar:hover{background:var(--canvas)}
.folha-corpo{padding:20px}
.folha-pe{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;
  position:sticky;bottom:0;background:var(--surface)}
.folha-pe .btn{flex:1}

.escolha{display:flex;flex-direction:column;gap:6px;max-height:230px;overflow-y:auto;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:10px}
.opcao{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer;
  padding:7px 2px;min-height:40px}
.opcao span.nome{flex:1}
/* a opção é um <label>, e o <label> de formulário é caixa-alta neste app.
   Sem desfazer isso aqui, o texto de ajuda sai gritando em maiúsculas e
   colado no rótulo — foi exatamente o que aconteceu. */
.opcao,.opcao span.nome{text-transform:none;letter-spacing:normal;font-weight:500;
  color:var(--text);font-size:14px}
.opcao span.nome{align-items:flex-start}
.opcao .sub{display:block;margin-top:3px;font-size:12px;line-height:1.5;
  font-weight:400;color:var(--muted)}
.opcao:has(.sub){align-items:flex-start;padding-top:9px}

/* ---------- histórico ---------- */
.historico{display:flex;flex-direction:column}
.hist{display:flex;gap:13px;padding-bottom:16px;position:relative}
.hist:not(:last-child)::before{content:'';position:absolute;left:14px;top:30px;bottom:0;width:2px;background:var(--line)}
.hist-ponto{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;flex:none;
  color:#fff;font-size:11px;font-weight:700;z-index:1}
.hist-corpo{flex:1;padding-top:3px;min-width:0}
.hist-t{font-weight:600;font-size:13.5px;display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.hist-tempo{margin-left:auto;font-weight:700;font-size:13px}
.hist-s{font-size:11.5px;color:var(--faint);margin-top:2px}
.agora{background:var(--green-soft);color:var(--green);font-size:10px;font-weight:700;
  padding:2px 8px;border-radius:20px}

/* ---------- avulsos ---------- */
.aviso-toast{position:fixed;left:50%;bottom:calc(var(--barra) + var(--safe-b) + 16px);
  transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 20px;
  border-radius:var(--r-sm);font-size:14px;font-weight:500;z-index:200;
  box-shadow:var(--shadow-up);max-width:90vw;text-align:center}
@media(min-width:900px){.aviso-toast{bottom:24px}}
.girando{width:26px;height:26px;border:2.5px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:gira .7s linear infinite;margin:52px auto}
@keyframes gira{to{transform:rotate(360deg)}}
.salvando{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.salvando::before{content:'';width:10px;height:10px;border:2px solid var(--line);
  border-top-color:var(--accent);border-radius:50%;animation:gira .7s linear infinite}
.rodape-app{text-align:center;font-size:11px;color:var(--faint);padding:14px 0 4px}

/* visualizador de impressão: nunca abre outra aba */
.impressao{position:fixed;inset:0;background:#fff;z-index:300;display:none;flex-direction:column}
.impressao.aberta{display:flex}
.impressao-topo{display:flex;gap:10px;padding:calc(12px + var(--safe-t)) 16px 12px;
  border-bottom:1px solid var(--line);align-items:center}
.impressao-corpo{flex:1;overflow:auto;padding:22px}
@media print{
  body *{visibility:hidden}
  .impressao,.impressao *{visibility:visible}
  .impressao{position:absolute;inset:0}
  .impressao-topo{display:none}
}

@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* ---------- filtros de período ---------- */
.filtros{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.campo-data{flex:1;min-width:132px}
.campo-data label{margin-bottom:5px}
.atalhos{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.atalho{border:1px solid var(--line);background:var(--surface);border-radius:20px;
  padding:7px 14px;font-size:13px;font-weight:600;color:var(--muted);min-height:38px}
.atalho:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- gráfico ---------- */
.grafico-caixa{position:relative}
.grafico{width:100%;height:auto;display:block}
.g-rotulo{font-family:Inter,sans-serif;font-size:12.5px;fill:var(--text);font-weight:500}
.g-valor{font-family:"JetBrains Mono",monospace;font-size:12px;fill:var(--muted);font-weight:700}
.g-barra{fill:var(--accent)}
.barra-g{cursor:default}
.barra-g:hover .g-barra{fill:var(--accent-dark)}
.barra-g:hover .g-rotulo{fill:var(--accent-dark)}
.grafico-dica{position:absolute;left:0;right:0;bottom:-6px;background:var(--ink);color:#fff;
  padding:9px 13px;border-radius:var(--r-sm);font-size:12.5px;opacity:0;
  transition:opacity .15s;pointer-events:none}
.grafico-dica.vendo{opacity:1}

/* ---------- tabela de dados ---------- */
table.tabela{width:100%;border-collapse:collapse;font-size:13px}
table.tabela th{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);
  font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);white-space:nowrap}
table.tabela td{padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
table.tabela tr:last-child td{border-bottom:none}
table.tabela td.num,table.tabela th:not(:first-child){text-align:right}
table.tabela td:first-child{text-align:left}

/* ---------- frentes paralelas ---------- */
.frentes{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px}
.frente{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;
  padding:3px 8px;border-radius:20px;color:#fff}
.frente .t{opacity:.85;font-weight:600}

/* o mesmo card ecoando na coluna da frente paralela */
.cartao-demanda.eco{background:repeating-linear-gradient(135deg,
    var(--surface),var(--surface) 7px,#FBFBFD 7px,#FBFBFD 14px);
  border:1px dashed #C6CAD6;box-shadow:none;cursor:pointer}
.eco-aviso{font-size:10.5px;font-weight:700;color:var(--accent);
  display:flex;align-items:center;gap:5px;margin-bottom:7px}
.eco-aviso::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent)}
.btn-eco{width:100%;margin-top:9px;min-height:38px;border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:12.5px;font-weight:600;color:var(--accent);background:var(--surface)}
.btn-eco:hover{background:var(--accent-soft)}

/* ---------- ciclo x esforço, lado a lado ---------- */
.duas-medidas{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.duas-medidas>div{background:var(--canvas);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:13px}
.duas-medidas .k{font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);font-weight:600}
.duas-medidas .v{font-size:20px;font-weight:700;margin-top:4px;letter-spacing:-.02em}
.duas-medidas .n{font-size:11px;color:var(--faint);margin-top:2px}

/* ═══════════════════════════════════════════════════════════════
   SLA — PRAZOS NO QUADRO

   Três relógios correm ao mesmo tempo e precisam ser lidos de relance,
   numa coluna com dezenas de cards. A solução tem três camadas:

   1. tarja na borda esquerda — a camada de varredura. A pessoa percorre a
      coluna com o olho e vê onde está o problema, sem ler nada.
   2. selo com símbolo — ◷ passagem, Σ acumulado, ⚑ prazo final. O símbolo e
      o número carregam a informação inteira, então quem não distingue
      vermelho continua lendo. Cor sozinha nunca é o único canal.
   3. hachura no selo do acumulado — é o estado que mais confunde ("o card
      acabou de chegar!"), e o padrão diagonal avisa que aquele número fala
      de todas as passagens, não desta.
   ══════════════════════════════════════════════════════════════ */

.cartao-demanda{position:relative}
.cartao-demanda.tarja-atencao,
.cartao-demanda.tarja-estourado,
.cartao-demanda.tarja-acumulado,
.cartao-demanda.tarja-prazo{padding-left:15px}
.cartao-demanda[class*="tarja-"]::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  border-radius:var(--r-sm) 0 0 var(--r-sm);
}
.cartao-demanda.tarja-atencao::before{background:var(--amber)}
.cartao-demanda.tarja-estourado::before{background:var(--red)}
.cartao-demanda.tarja-acumulado::before{
  background:repeating-linear-gradient(135deg,var(--red) 0 3px,#8E1616 3px 6px);
}
.cartao-demanda.tarja-prazo::before{background:#6D28D9}

/* FUNDO DO CARD ESTOURADO.

   A tarja na lateral é discreta por desenho — bom para o dia a dia, fraco
   para achar o que está atrasado numa coluna cheia. O fundo em vermelho muito
   claro resolve isso de longe, e a tarja, o selo e o texto continuam lá: a
   cor é mais um sinal, nunca o único. Quem não distingue a cor lê "prazo
   furado" escrito no selo do mesmo jeito.

   O tom é fraco de propósito. Vermelho forte num card que também precisa
   mostrar título, classificação e valores deixa de ser aviso e vira ruído —
   e, com cinco cards vermelhos na coluna, nenhum chama atenção. */
.cartao-demanda.tarja-estourado,
.cartao-demanda.tarja-acumulado,
.cartao-demanda.tarja-prazo{background:var(--red-card)}
.cartao-demanda.tarja-estourado:hover,
.cartao-demanda.tarja-acumulado:hover,
.cartao-demanda.tarja-prazo:hover{background:var(--red-card-forte)}
/* o prazo final estourado é o mais grave: um tom a mais de ênfase */
.cartao-demanda.tarja-prazo{background:var(--red-card-forte)}
/* atenção (ainda dentro do prazo, mas perto) fica em âmbar bem leve */
.cartao-demanda.tarja-atencao{background:var(--amber-card)}
/* card concluído volta ao neutro mesmo que tenha estourado no caminho:
   atrasado e encerrado é história, não pendência. Vem depois das regras de
   tarja de propósito, para vencê-las. */
.cartao-demanda.pronta{background:#F7F8FA}

.slas{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 0}
.slas.compacto{margin:5px 0 0}
.sla{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10.5px;font-weight:700;letter-spacing:.01em;
  padding:3px 7px;border-radius:999px;white-space:nowrap;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;
}
.sla-atencao{background:var(--amber-soft);color:var(--amber)}
.sla-estourado{background:var(--red-soft);color:var(--red)}
.sla-acum.sla-estourado{
  background:repeating-linear-gradient(135deg,var(--red-soft) 0 4px,#F9D9D9 4px 8px);
}
.sla-prazo.sla-estourado{background:#EDE6FD;color:#5B21B6}
.sla-prazo.sla-atencao{background:var(--amber-soft);color:var(--amber)}

.coluna-sla{
  font-size:10px;font-weight:700;color:var(--muted);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  background:rgba(18,20,28,.06);padding:2px 6px;border-radius:999px;white-space:nowrap;
}

/* a legenda só aparece quando há prazo configurado; senão seria ruído */
.sla-legenda{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 14px;margin-bottom:12px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);font-size:11.5px;color:var(--muted);
}
.sla-legenda .le{display:inline-flex;align-items:center;gap:5px}
.sla-legenda .le b{font-size:13px;color:var(--text)}
.sla-legenda .le-sep{flex:1}
.filtro-atraso{
  font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);min-height:32px;
}
.filtro-atraso:hover{border-color:var(--red);color:var(--red)}
.filtro-atraso.on{background:var(--red-soft);color:var(--red);border-color:transparent}

/* coluna de outro setor: existe, mas não mostra a fila */
.coluna.alheia{background:#F2F3F6;border:1px dashed var(--line)}
.coluna.alheia .coluna-nome{color:var(--muted)}
.vazio-col.fora{
  padding:18px 10px;font-size:11.5px;color:var(--faint);text-align:center;line-height:1.55;
}

/* os três relógios no card aberto, com barra de progresso */
.relogios{display:flex;flex-direction:column;gap:14px}
.relogio{padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.rel-t{font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:7px;margin-bottom:8px}
.rel-t b{font-size:14px;color:var(--muted);font-weight:400}
.rel-edita{
  margin-left:auto;font-size:11px;font-weight:600;color:var(--accent);
  text-decoration:underline;padding:4px 2px;
}
.rel-barra{height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.rel-barra span{display:block;height:100%;border-radius:999px;background:var(--green);transition:width .3s}
.rel-barra.atencao span{background:var(--amber)}
.rel-barra.estourado span{background:var(--red)}
.rel-n{font-size:11.5px;color:var(--muted);margin-top:7px}
.rel-n.ruim{color:var(--red);font-weight:600}
.dica.ruim,.num.ruim,td.ruim{color:var(--red);font-weight:600}

/* grade de prazos por coluna */
.sla-grade{display:flex;flex-direction:column;gap:2px}
.sla-cab,.sla-linha{display:grid;grid-template-columns:1fr 84px 84px;gap:8px;align-items:center}
.sla-cab{font-size:11px;color:var(--muted);font-weight:700;padding:0 2px 6px;border-bottom:1px solid var(--line)}
.sla-cab span:not(:first-child),.sla-linha input{text-align:center}
.sla-linha{padding:7px 0;border-bottom:1px solid var(--line)}
.sla-linha:last-child{border-bottom:none}
.sla-nome{font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px;min-width:0}
.sla-nome .bolinha{width:9px;height:9px;flex:none}
.sla-linha input{min-height:40px;padding:8px 6px}

/* setores do usuário: os mesmos interruptores das permissões */
.setores{display:flex;flex-wrap:wrap;gap:7px}
.setores .chave .rotulo{display:inline-flex;align-items:center;gap:6px}
.setores .chave .bolinha{width:9px;height:9px;flex:none}

/* faixas de usuários no plano */
.faixas{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.faixa-op{
  flex:1;min-width:72px;padding:12px 8px;border:1.5px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);text-align:center;min-height:62px;
}
.faixa-op b{display:block;font-size:19px;font-weight:700;font-family:"JetBrains Mono",ui-monospace,monospace}
.faixa-op span{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
.faixa-op:hover:not(:disabled){border-color:var(--accent)}
.faixa-op.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dark)}
.faixa-op.on span{color:var(--accent-dark)}
.faixa-op.atual::after{content:"";display:block;width:5px;height:5px;border-radius:50%;
  background:var(--green);margin:4px auto 0}
.faixa-op:disabled{opacity:.4;cursor:not-allowed}

.plano-op{
  border:1px solid var(--line);border-radius:var(--r);padding:16px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.aviso-caixa{
  border:1px solid var(--line);border-left:3px solid var(--amber);
  border-radius:var(--r-sm);padding:13px 15px;margin-bottom:14px;background:var(--amber-soft);
}
.aviso-caixa b{display:block;font-size:13.5px;margin-bottom:5px;color:var(--amber)}
.aviso-caixa p{font-size:12.5px;color:var(--text);margin-bottom:10px;line-height:1.55}

.dois{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){
  .dois{grid-template-columns:1fr;gap:0}
  .sla-cab,.sla-linha{grid-template-columns:1fr 68px 68px;gap:6px}
  .sla-legenda{gap:8px;font-size:11px}
  .sla-legenda .le-sep{display:none}
  .filtro-atraso{width:100%}
}

/* ═══════════════════════════════════════════════════════════════
   SINCRONIZAÇÃO AO VIVO

   O pontinho no topo existe por uma razão de confiança: num quadro
   compartilhado, a pessoa precisa saber se o que ela está vendo é de agora
   ou de dez minutos atrás. Verde parado = acompanhando. Piscada roxa =
   alguém mexeu. Vermelho = perdeu o servidor, e o que está na tela é velho.
   ══════════════════════════════════════════════════════════════ */

.ao-vivo{
  width:8px;height:8px;border-radius:50%;flex:none;margin-left:2px;
  background:var(--green);box-shadow:0 0 0 3px var(--green-soft);
  transition:background .2s, box-shadow .2s, transform .2s;
}
.ao-vivo.mudou{background:var(--accent);box-shadow:0 0 0 5px var(--accent-soft);transform:scale(1.25)}
.ao-vivo.off{background:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.ao-vivo.desligado{background:var(--faint);box-shadow:none}

/* o card que chegou agora, movido por outra pessoa: pisca uma vez e some.
   Sem isso o card aparece do nada e a tela parece ter se perdido. */
@keyframes chegou{
  0%   {box-shadow:0 0 0 3px var(--accent), var(--shadow); transform:translateY(-2px)}
  60%  {box-shadow:0 0 0 3px var(--accent), var(--shadow)}
  100% {box-shadow:0 0 0 0 rgba(91,75,232,0), var(--shadow); transform:none}
}
.cartao-demanda.chegou{animation:chegou 2.2s ease-out}
@media (prefers-reduced-motion:reduce){
  .cartao-demanda.chegou{animation:none;box-shadow:0 0 0 2px var(--accent), var(--shadow)}
  .ao-vivo{transition:none}
}

/* ═══════════════════════════════════════════════════════════════
   O TOPO — IDENTIDADE DA EMPRESA E DE QUEM ESTÁ LOGADO

   Num sistema multiempresa, "em qual cliente eu estou mexendo?" é uma
   pergunta de verdade — e fica séria quando o master entra na conta de um
   cliente para dar suporte. Por isso a empresa vem acima do nome da tela,
   com monograma, como num papel timbrado: o olho encontra a identidade
   antes de encontrar a função.

   Do outro lado, quem está logado com o papel escrito por extenso. Só as
   iniciais num círculo não respondem "posso concluir esta demanda?", e é
   essa a dúvida que aparece no uso real.
   ══════════════════════════════════════════════════════════════ */

.topo{
  display:flex;align-items:center;gap:14px;
  padding:calc(10px + var(--safe-t)) 18px 10px;
  background:var(--surface);border-bottom:1px solid var(--line);flex:none;
}
.topo-id{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}

.emp-linha{display:flex;align-items:center;gap:9px;min-width:0}
.emp-mono{
  flex:none;width:26px;height:26px;border-radius:7px;
  display:grid;place-items:center;
  font-family:Sora,Inter,sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.02em;
  color:var(--ink);background:var(--canvas);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 #fff;
}
.emp-nome{
  font-family:Sora,Inter,sans-serif;font-weight:700;font-size:17px;
  letter-spacing:-.02em;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
/* o master dentro da conta de um cliente: tem de saltar aos olhos */
.emp-nome.suporte{color:var(--accent-dark)}
.emp-nome.suporte::after{
  content:"suporte";margin-left:8px;vertical-align:2px;
  font-family:Inter,sans-serif;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);
  background:var(--accent-soft);padding:3px 7px;border-radius:999px;
}
.topo h2{
  font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);font-family:Inter,sans-serif;padding-left:35px;
}

.topo-dir{display:flex;align-items:center;gap:10px;position:relative;flex:none}

.quem{
  display:flex;align-items:center;gap:9px;
  padding:5px 9px 5px 5px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);min-height:40px;
  transition:border-color .15s, background .15s;
}
.quem:hover{border-color:var(--accent);background:var(--accent-soft)}
.quem[aria-expanded="true"]{border-color:var(--accent);background:var(--accent-soft)}
.quem-ini{
  flex:none;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--ink);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.02em;
}
.quem-txt{display:flex;flex-direction:column;align-items:flex-start;min-width:0;line-height:1.25}
.quem-n{font-size:13px;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.quem-p{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.quem-seta{width:15px;height:15px;color:var(--faint);flex:none}

.quem-menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:224px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-up);padding:6px;
}
.qm-cab{padding:10px 11px 11px;border-bottom:1px solid var(--line);margin-bottom:6px}
.qm-n{font-size:13.5px;font-weight:600}
.qm-e{font-size:12px;color:var(--muted);word-break:break-all;margin-top:2px}
/* o atributo hidden perde para qualquer display declarado — sem esta linha,
   "Trocar de empresa" aparecia para quem não é do suporte */
.qm-item[hidden]{display:none}
.qm-item{
  display:block;width:100%;text-align:left;padding:10px 11px;border-radius:var(--r-sm);
  font-size:13.5px;font-weight:500;color:var(--text);min-height:40px;
}
.qm-item:hover{background:var(--canvas)}
.qm-item.perigo{color:var(--red)}
.qm-item.perigo:hover{background:var(--red-soft)}

@media (max-width:899px){
  .topo{padding-left:14px;padding-right:14px;gap:10px}
  .emp-nome{font-size:16px}
}
@media (max-width:620px){
  /* O nome da pessoa sai — ela sabe o próprio nome. O papel fica, porque é a
     informação que responde "posso concluir isto?", e é a que falta quando
     alguém usa o sistema pelo celular no chão de fábrica. */
  .quem{padding:4px 9px 4px 4px;gap:7px}
  .quem-n{display:none}
  .quem-p{max-width:96px}
  .quem-seta{display:none}
  .topo h2{padding-left:0}
  .emp-mono{display:none}
}
@media (max-width:420px){
  /* mesmo no telefone pequeno o papel continua: é a informação que a pessoa
     não sabe de cabeça. O que cede é o nome da empresa, que trunca. */
  .quem{padding:4px 7px 4px 4px;gap:6px}
  .quem-p{max-width:74px;font-size:10px}
  .emp-nome{font-size:15px}
}
.qm-papel{
  display:inline-block;margin-top:8px;padding:3px 9px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-dark);
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   CLASSIFICAÇÕES, LEGENDA DE CORES E RELATÓRIO
   ══════════════════════════════════════════════════════════════ */

/* A barrinha colorida do card mostra como o tempo se repartiu entre as
   etapas. Sem saber qual cor é qual, ela é só enfeite — esta legenda é o
   que a transforma em informação. */
.legenda-cores{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding:9px 14px;margin-bottom:10px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);
}
.lc-rot{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint);margin-right:3px}
.lc-item{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);
  padding:3px 9px 3px 7px;border-radius:999px;background:var(--canvas);white-space:nowrap}
.lc-item i{width:9px;height:9px;border-radius:50%;flex:none}
.lc-item b{color:var(--text);font-variant-numeric:tabular-nums;font-size:11.5px}

/* classificação: a cor vem da própria classe, por variável */
.classes-card{display:flex;gap:5px;flex-wrap:wrap;margin:7px 0 0}
.classe-sel{
  display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:5px;
  color:#fff;background:var(--cc,#6366F1);
}
.classes-lista{display:flex;flex-wrap:wrap;gap:7px}
.classe-op{
  display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;
  border:1.5px solid var(--line);background:var(--surface);
  font-size:13px;font-weight:600;color:var(--muted);min-height:40px;
}
.classe-op::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--cc);flex:none}
.classe-op b{font-size:11px;font-weight:700;color:var(--faint);
  font-family:"JetBrains Mono",ui-monospace,monospace}
.classe-op:hover{border-color:var(--cc);color:var(--text)}
.classe-op.on{border-color:var(--cc);color:var(--text);background:var(--canvas)}
.classe-op.on b{color:var(--text)}

.cores{display:flex;gap:8px;flex-wrap:wrap}
.cor-op{width:34px;height:34px;border-radius:9px;border:2px solid transparent;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.cor-op.on{border-color:var(--ink);transform:scale(1.08)}

.dica-pdf{font-size:12px;color:var(--muted)}
@media(max-width:700px){.dica-pdf{display:none}}

/* financeiro: colunas de receita por mês, desenhadas sem biblioteca */
.colunas-mes{display:flex;align-items:flex-end;gap:10px;overflow-x:auto;padding:6px 0 0}
.cm{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:58px;flex:1}
.cm-v{font-size:10.5px;font-weight:700;color:var(--muted);
  font-family:"JetBrains Mono",ui-monospace,monospace;white-space:nowrap}
.cm-barra{width:100%;max-width:46px;border-radius:5px 5px 0 0;
  background:linear-gradient(180deg,var(--accent),var(--accent-dark));min-height:4px}
.cm-m{font-size:11px;color:var(--faint);white-space:nowrap}

.painel.destaque{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}
.selo-contagem{background:var(--amber);color:#fff;font-size:12px;font-weight:700;
  padding:3px 10px;border-radius:999px;min-width:26px;text-align:center}

/* comprovante de comissão, visto dentro da própria janela do app */
.comprovante-img{display:block;max-width:100%;border-radius:var(--r-sm);border:1px solid var(--line)}
.comprovante-pdf{display:block;width:100%;height:58vh;border:1px solid var(--line);border-radius:var(--r-sm)}

/* ═══════════════════════════════════════════════════════════════════════════
   1.5 — acesso de grupo, esforço por coluna e relatório do card
   ═══════════════════════════════════════════════════════════════════════════ */

/* rótulo com ação ao lado: é o que faz "Quem pode ver" deixar de ser um texto
   morto e passar a ser o lugar onde se mexe no acesso */
.rotulo-acao{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px}
.rotulo-acao label{margin:0}

/* ---------- janela de acesso ---------- */
.acesso-estado{font-size:13px;color:var(--muted);background:var(--bg-soft);border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;margin:10px 0 14px;line-height:1.45}
.acesso-lista{display:flex;flex-direction:column;gap:2px}
.acesso-linha{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line)}
.acesso-linha:last-child{border-bottom:none}
/* quem está dentro ganha marca à esquerda: a cor não é o único sinal, o texto
   do botão ("Retirar" vs "Incluir") também diz o estado */
.acesso-linha.tem{box-shadow:inset 3px 0 0 var(--green);background:var(--green-soft);border-radius:8px}
.acesso-nome{flex:1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;font-weight:600}
.acesso-n{font-size:11px;color:var(--muted);font-weight:500}
.acesso-eu{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  background:var(--accent-soft);color:var(--accent);padding:2px 7px;border-radius:999px}

/* ---------- esforço por coluna (tela Tempos) ---------- */
.esf-grade{display:flex;flex-direction:column;gap:2px}
.esf-linha{display:grid;grid-template-columns:150px 1fr 62px 68px;gap:10px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--line)}
.esf-grade.com-rateio .esf-linha{grid-template-columns:150px 1fr 62px 68px 118px}
.esf-grade.com-custo .esf-linha{grid-template-columns:150px 1fr 62px 68px 118px}
/* 118px porque "R$ 1.681,9 mil" cabe: com 92px o número quebrava em duas
   linhas e desalinhava a tabela inteira */
.esf-grade.com-rateio.com-custo .esf-linha{grid-template-columns:132px 1fr 56px 62px 112px 112px}
.esf-linha:last-child{border-bottom:none}
.esf-cab{font-size:11px;color:var(--muted);font-weight:700;padding-bottom:6px;
  border-bottom:1px solid var(--line)}
.esf-cab .esf-pct,.esf-cab .esf-tempo,.esf-cab .esf-dinheiro{text-align:right}
.esf-nome{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.esf-barra{height:14px;background:var(--bg-soft);border-radius:999px;overflow:hidden}
.esf-barra i{display:block;height:100%;border-radius:999px;min-width:2px}
.esf-pct{text-align:right;font-weight:700;font-size:13px}
.esf-tempo,.esf-dinheiro{text-align:right;font-size:12px;color:var(--muted);white-space:nowrap}
.esf-rot{display:none}
.esf-totais{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.esf-totais>div{flex:1;min-width:160px;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px}
.esf-totais span{display:block;font-size:11px;color:var(--muted);font-weight:700;
  text-transform:uppercase;letter-spacing:.04em}
.esf-totais b{display:block;font-size:20px;margin:3px 0 2px;font-variant-numeric:tabular-nums}
.esf-totais small{font-size:11px;color:var(--muted)}

/* ---------- ajustes: as duas contas de rateio ---------- */
.rateio-opcao{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px}
.rateio-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;
  font-size:14px}

/* custo por hora entra como quarta coluna da grade de prazos */
.sla-grade.com-custo .sla-cab,.sla-grade.com-custo .sla-linha{grid-template-columns:1fr 76px 76px 84px}

/* ---------- relatório impresso ---------- */
.impresso{max-width:920px;margin:0 auto;color:#111;font-size:13px;line-height:1.5}
.impresso h1{font-size:22px;margin:0 0 4px;line-height:1.25}
.impresso h2{font-size:14px;margin:26px 0 10px;padding-bottom:5px;border-bottom:2px solid #111;
  text-transform:uppercase;letter-spacing:.05em}
.imp-sub{margin:0 0 14px;font-size:12px;color:#555}
.imp-desc{margin:0 0 14px;padding:10px 12px;background:#f6f6f7;border-radius:8px;font-size:12px}
.imp-ficha,.imp-tabela{width:100%;border-collapse:collapse;font-size:12px}
.imp-ficha th,.imp-ficha td{padding:6px 8px;border:1px solid #ddd;text-align:left;vertical-align:top}
.imp-ficha th{background:#f6f6f7;font-weight:700;width:14%;white-space:nowrap}
.imp-tabela th,.imp-tabela td{padding:6px 8px;border-bottom:1px solid #e3e3e5;text-align:left}
.imp-tabela thead th{background:#f6f6f7;border-bottom:2px solid #111;font-size:11px;
  text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.imp-tabela tfoot th{border-top:2px solid #111;border-bottom:none;font-weight:800;background:#fafafa}
.imp-tabela .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.imp-bolinha{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;
  vertical-align:middle}
/* a barra no relatório é apoio à leitura do número, não a informação: o
   percentual vem escrito do lado, porque impressão em preto e branco e
   daltonismo não podem depender da barra */
.imp-barra{display:inline-block;width:62px;height:8px;background:#e8e8ea;border-radius:999px;
  overflow:hidden;vertical-align:middle;margin-right:7px}
.imp-barra i{display:block;height:100%;background:#444;border-radius:999px;min-width:1px}
.imp-cartoes{display:flex;gap:10px;flex-wrap:wrap}
.imp-cartao{flex:1;min-width:150px;border:1px solid #ddd;border-radius:8px;padding:10px 12px}
.imp-cartao span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:#555;
  font-weight:700}
.imp-cartao b{display:block;font-size:19px;margin:2px 0 3px;font-variant-numeric:tabular-nums}
.imp-cartao small{font-size:10px;color:#666;line-height:1.35;display:block}
.imp-nota{margin:10px 0 0;padding:9px 11px;background:#f6f6f7;border-left:3px solid #999;
  border-radius:0 6px 6px 0;font-size:11.5px;line-height:1.5}
.imp-marca{display:inline-block;font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;border:1px solid #bbb;border-radius:999px;padding:1px 6px;margin-left:6px}
.imp-ruim{font-weight:700}
.imp-ruim::after{content:" ●"}
.imp-atencao::after{content:" ◐"}
.imp-pe{margin-top:30px;padding-top:10px;border-top:1px solid #ddd;font-size:10px;color:#777;
  text-align:center}

@media print{
  .impresso h2{page-break-after:avoid}
  .imp-tabela{page-break-inside:auto}
  .imp-tabela tr{page-break-inside:avoid}
  .imp-cartoes,.imp-nota{page-break-inside:avoid}
}

@media (max-width:640px){
  .esf-linha,.esf-grade.com-rateio .esf-linha,.esf-grade.com-custo .esf-linha,
  .esf-grade.com-rateio.com-custo .esf-linha{grid-template-columns:1fr 54px 62px;
    grid-template-areas:"nome pct tempo" "barra barra barra"}
  .esf-nome{grid-area:nome}
  .esf-barra{grid-area:barra}
  .esf-pct{grid-area:pct}
  .esf-tempo{grid-area:tempo}
  /* No celular o cabeçalho da tabela some, então o dinheiro precisa dizer o
     que é. Sem isso aparecem dois valores soltos um embaixo do outro e não dá
     para saber qual é valor rateado e qual é custo. */
  .esf-dinheiro{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;
    gap:10px;font-weight:600;color:var(--text);padding-top:2px}
  .esf-rot{display:block;font-size:11px;font-weight:700;color:var(--muted);
    text-transform:uppercase;letter-spacing:.04em}
  .esf-cab .esf-dinheiro{display:none}
  .sla-grade.com-custo .sla-cab,.sla-grade.com-custo .sla-linha{grid-template-columns:1fr 56px 56px 64px;gap:5px}
  .imp-ficha th{width:auto}
}

/* campos escolhidos para aparecer na cara do card */
.c-campos{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0 0}
.c-campo{display:inline-flex;align-items:baseline;gap:5px;max-width:100%;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:7px;
  padding:3px 8px;font-size:11.5px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-campo i{font-style:normal;font-weight:500;color:var(--muted);font-size:10px;
  text-transform:uppercase;letter-spacing:.03em}

/* o que ficou fora do quadro — dito, nunca escondido */
.fora-quadro{margin:18px auto 0;max-width:900px;padding:12px 16px;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;
  color:var(--muted);font-size:12.5px;line-height:1.55}
.fora-quadro p{margin:0 0 6px}
.fora-quadro p:last-child{margin:0}

/* ═══════════════════════════════════════════════════════════════════════════
   GRADE DE PERMISSÕES — perfis nas colunas, permissões nas linhas
   ═══════════════════════════════════════════════════════════════════════════ */

/* A tabela rola de lado no celular, e a coluna dos nomes fica presa à
   esquerda. Sem isso, a pessoa arrasta para ver o quarto perfil e perde de
   vista qual linha está marcando — que é o jeito mais fácil de configurar
   permissão errada. */
.pg-rolo{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--line)}
.perm-grade{border-collapse:separate;border-spacing:0;width:100%;min-width:520px}

.perm-grade th,.perm-grade td{border-bottom:1px solid var(--line)}
.pg-canto,.pg-perm{position:sticky;left:0;z-index:2;background:var(--surface);
  text-align:left;padding:10px 14px;min-width:210px;max-width:260px}
.pg-canto{z-index:3;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);font-weight:700;border-bottom:2px solid var(--line)}
/* a borda à direita marca onde a parte presa termina */
.pg-canto::after,.pg-perm::after{content:"";position:absolute;top:0;bottom:0;right:0;
  width:1px;background:var(--line)}

.pg-col{padding:10px 8px 12px;text-align:center;vertical-align:bottom;min-width:104px;
  border-bottom:2px solid var(--line);background:var(--surface)}
.pg-col.proprio{background:var(--accent-soft)}
.pg-nome{display:block;font-size:13px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.pg-sub{display:block;font-size:10px;color:var(--muted);line-height:1.4;margin-top:2px}
.pg-acoes{display:flex;gap:8px;justify-content:center;margin-top:6px}
.pg-mini{font-size:10.5px;color:var(--accent);text-decoration:underline;padding:2px}
.pg-mini.ruim{color:var(--red)}

.pg-pn{display:block;font-size:13px;font-weight:600;line-height:1.3}
.pg-pa{display:block;font-size:11px;color:var(--muted);line-height:1.4;margin-top:2px}
.perm-grade tbody tr:nth-child(odd) .pg-perm,
.perm-grade tbody tr:nth-child(odd) .pg-cel{background:var(--canvas)}
.perm-grade tbody tr:hover .pg-perm,
.perm-grade tbody tr:hover .pg-cel{background:var(--accent-soft)}

/* FAIXA DE SEÇÃO — 18 permissões seguidas são uma parede. Agrupadas por
   assunto ("Trabalho no quadro", "Dinheiro"), a pessoa encontra a linha que
   quer pelo assunto em vez de ler as 18.

   A faixa ocupa a linha inteira, então prendê-la não adianta: quem fica para
   trás ao rolar de lado é o TEXTO dentro dela. Por isso o nome vem num span
   preso à esquerda — assim ele acompanha a rolagem horizontal e continua
   legível junto da coluna dos nomes. Preso no topo, não: subiria por cima da
   barra fixa do app, que já ocupa aquele lugar. */
.perm-grade tr.pg-secao th{background:var(--canvas);color:var(--muted);
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  text-align:left;padding:8px 14px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.perm-grade tr.pg-secao th span{position:sticky;left:14px;display:inline-block}
.perm-grade tr.pg-secao:first-child th{border-top:none}
.perm-grade tbody tr.pg-secao:hover th{background:var(--canvas)}

/* contador de restrição: âmbar, porque é informação ("algumas empresas
   desligaram isto"), não erro */
.pg-restr{display:inline-block;margin-top:3px;font-size:10px;font-weight:700;
  line-height:1.3;color:var(--amber-texto,#92400E);background:var(--amber-card);
  border-radius:5px;padding:2px 6px;white-space:nowrap}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) .pg-restr{color:#FCD34D}
}
:root[data-tema="escuro"] .pg-restr{color:#FCD34D}

.pg-cel{text-align:center;padding:6px 8px;background:var(--surface)}
/* alvo de toque de 40px: a célula inteira, não só o quadradinho */
.pg-chave{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:9px;border:1.5px solid var(--line);
  background:var(--surface);transition:background .12s,border-color .12s}
.pg-chave .marca{display:block;width:17px;height:17px;opacity:0}
.pg-chave .marca svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:3}
.pg-chave[aria-checked="true"]{background:var(--green);border-color:var(--green)}
.pg-chave[aria-checked="true"] .marca{opacity:1}
.pg-chave[disabled]{background:repeating-linear-gradient(135deg,
  var(--canvas) 0 5px,#E9EBF1 5px 10px);border-style:dashed;cursor:not-allowed;opacity:.75}
.pg-chave:not([disabled]):hover{border-color:var(--accent)}
.pg-chave:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media (max-width:640px){
  .pg-canto,.pg-perm{min-width:150px;max-width:170px;padding:9px 10px}
  .pg-pa{display:none}            /* a ajuda longa não cabe; o nome basta */
  .pg-col{min-width:92px}
  .pg-chave{width:36px;height:36px}
}

/* aviso dentro de uma opção: âmbar, não vermelho — é um "isto não vai fazer
   o que você espera", não um erro */
.opcao .sub.aviso-campo{margin-top:7px;color:var(--amber-texto,#92400E);
  background:var(--amber-card);border-radius:7px;padding:7px 10px}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) .opcao .sub.aviso-campo{color:#FCD34D}
}
:root[data-tema="escuro"] .opcao .sub.aviso-campo{color:#FCD34D}