/* painel.css — layout do painel. Cores, fontes, raios e sombras vêm dos tokens (brand/tokens.css); botões, chips,
   cards e tabelas vêm dos primitivos da marca (brand/brand.css). Aqui só o que é do painel: login, menu lateral,
   molde de tela e estados. Nenhuma cor escrita à mão: tudo por token, para os dois temas valerem sozinhos. */

.ic{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.logo{display:block;width:auto}
.logo.escuro,:root[data-theme="dark"] .logo.claro{display:none}
:root[data-theme="dark"] .logo.escuro{display:block}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--glow),var(--bg)}
.loginbox{width:min(400px,100%);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl);padding:36px 36px 28px;box-shadow:var(--shadow-lg)}
.loginbox .logo{height:26px;margin-bottom:28px}
.loginbox h1{font-size:26px;line-height:1.1;margin:10px 0 10px}
.loginbox p{color:var(--text);margin-bottom:22px}
.loginbox p b{color:var(--ink);font-weight:600}
.loginbox .err{margin:14px 0 0;font-size:13px;color:var(--descartado)}

/* casca: menu lateral fixo + tela */
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.lateral{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:22px;padding:20px 12px 16px;background:var(--rail-bg);border-right:1px solid var(--rail-line);overflow-y:auto}
.marca{display:flex;align-items:center;gap:10px;padding:2px 10px;text-decoration:none}
.marca .logo{height:22px}
#menu{display:flex;flex-direction:column;gap:20px}
.menusecao{display:flex;flex-direction:column;gap:2px}
.menusecao .eyebrow{padding:0 10px 6px}
.menusecao a{display:block;padding:7px 10px;border-radius:var(--r-btn);color:var(--rail-ink);text-decoration:none;font:500 13.5px/1.3 var(--font-sans)}
.menusecao a:hover{background:var(--rail-hover)}
.menusecao a[aria-current="page"]{background:var(--rail-on);color:var(--rail-on-ink)}
.rodape{margin-top:auto;display:flex;align-items:center;gap:6px;padding:12px 4px 0;border-top:1px solid var(--rail-line)}
.quem{flex:1;min-width:0;font-size:12px;color:var(--rail-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* molde de tela: cabeçalho (eyebrow da seção, título em dois tons, frase do que a tela responde) e corpo */
.tela{min-width:0}
.pghead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 32px 20px;background:var(--panel);background-image:var(--glow);border-bottom:1px solid var(--line)}
.pghead h1{font-size:24px;line-height:1.15;margin-top:8px}
.pghead .sub{max-width:76ch;margin-top:6px;color:var(--muted);font-size:13.5px}
.pgcorpo{display:flex;flex-direction:column;gap:18px;max-width:1320px;padding:24px 32px 48px}
.pgcorpo>*{min-width:0}
#conteudo{display:flex;flex-direction:column;gap:18px}
#conteudo>*{min-width:0} /* sem isto, uma tabela larga alarga a página inteira em vez de rolar dentro do card */

/* estados: a mesma altura mínima nos três, para a página não pular quando o dado chega */
.estado{min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;color:var(--muted);background:var(--panel);border:1px dashed var(--line);border-radius:var(--r-lg)}
.estado .titulo{font:600 14px/1.3 var(--font-sans);color:var(--ink)}
.estado.erro{border-style:solid;border-color:color-mix(in srgb,var(--descartado) 35%,var(--line));color:var(--text)}
.estado.carregando::before{content:"";width:22px;height:22px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--coral);animation:gira .9s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.estado.carregando::before{animation:none}}

/* cards e tabelas: o visual vem do brand.css; aqui a grade e o espaçamento */
.chead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.reptablewrap{overflow-x:auto}
.reptable{width:100%;border-collapse:collapse}
.reptable th,.reptable td{padding:10px 14px;text-align:left;vertical-align:top}
.reptable .num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.reptable th.num{font-family:var(--font-sans)}

/* glossário: largura fixa por coluna, para os cards de conceitos diferentes ficarem alinhados um embaixo do outro */
.glossario{table-layout:fixed;min-width:760px}
.glossario th:nth-child(1){width:22%}.glossario th:nth-child(2){width:46%}.glossario th:nth-child(n+3){width:16%}
.glossario td:first-child{font-weight:600;color:var(--heading)}
.glossario td:nth-child(2){color:var(--text)}
.glossario td:nth-child(n+3){color:var(--muted)}

/* tela estreita: o menu vira uma faixa no topo */
@media (max-width:860px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .lateral{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 18px}
  .rodape{margin-top:0;border-top:0;padding-top:0}
  .pghead,.pgcorpo{padding-left:16px;padding-right:16px}
}

/* cores das fontes nos gráficos e marcas: a cor segue a fonte em toda a tela. Validadas com o validate_palette do
   skill de dataviz (faixa de luminosidade, croma, separação para daltonismo e contraste) nos dois temas; a tinta
   (#002117) dos tokens reprovava como cor de série por ler como preto. */
:root{--serie-hubspot:#2a76b0;--serie-inbox:#e8705a}
:root[data-theme="dark"]{--serie-hubspot:#3d8fcc;--serie-inbox:#d9634d}

.pgdireita{display:flex;align-items:center;gap:10px}
.recarregando{opacity:.5;pointer-events:none;transition:opacity .15s}

/* selo de frescor: a pior fonte no resumo, cada uma aberta no detalhe. Verde/âmbar/vermelho são cores de estado e
   sempre vêm com o texto da situação ao lado. */
.selo{position:relative}
.selo summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--panel);font:500 12.5px/1.3 var(--font-sans);color:var(--ink)}
.selo summary::-webkit-details-marker{display:none}
.selo ul{position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:min(380px,90vw);list-style:none;display:flex;flex-direction:column;gap:12px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.selo li,.saude li{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--text)}
.selo li span:not(.ponto),.saude li span:not(.ponto){display:block;color:var(--muted)}
.selo li small,.saude li small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.ponto{flex:none;width:8px;height:8px;border-radius:50%;background:var(--muted);margin-top:4px}
.ponto.ok{background:var(--pos)}.ponto.atrasado{background:var(--cb-amber)}.ponto.parado,.ponto.sem_dado{background:var(--descartado)}

/* filtros: uma linha só, acima de tudo o que eles recortam */
.filtros{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.filtros .seg{flex-wrap:wrap;max-width:100%}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.kpis .statcard{display:flex;flex-direction:column;gap:8px}
.kpis .statval{font-variant-numeric:normal}
.kfonte{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;column-gap:8px;row-gap:2px}
.kfonte .krot{font-size:12.5px;color:var(--text)}
.kfonte .kval{font:600 22px/1.1 var(--font-display);color:var(--heading)}
.kfonte .delta,.kfonte .kn{grid-column:2 / 4}
.kn{font-size:12px;color:var(--muted)}
.delta{font-size:12px;font-weight:600}
.delta.sobe{color:var(--pos)}.delta.desce{color:var(--neg)}
.nota{margin-top:-8px}

/* marca de fonte: cheio = sim, vazio = não, tracejado = sem dado */
.m{flex:none;display:inline-block;width:10px;height:10px;border-radius:50%;border:2px solid var(--serie-hubspot)}
.m.inbox{border-color:var(--serie-inbox)}
.m.sim{background:var(--serie-hubspot)}.m.inbox.sim{background:var(--serie-inbox)}
.m.sem{border-style:dashed;opacity:.55}
.par{display:inline-flex;gap:5px}
.legenda{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin:-4px 0 10px}
.legenda .m{margin-left:6px}.legenda .m:first-child{margin-left:0}

.grade2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:14px}

/* funil: as duas fontes lado a lado, a barra é a fração do topo de cada uma */
.funil{width:100%;border-collapse:collapse;font-size:13px}
.funil th,.funil td{padding:8px 10px;text-align:left;border-top:1px solid var(--line-soft)}
.funil thead th{border-top:0;font:500 12px/1.3 var(--font-sans);color:var(--muted)}
.funil thead .m{margin-right:6px;vertical-align:-1px}
.funil tbody th{font-weight:600;color:var(--heading);white-space:nowrap}
.funil td{width:40%}
.funil td.vazio{color:var(--muted)}
.fbarra{height:8px;border-radius:4px;background:var(--chip-bg);overflow:hidden;margin-bottom:4px}
.fbarra span{display:block;height:100%;border-radius:0 4px 4px 0;background:var(--serie-hubspot)}
.fbarra.inbox span{background:var(--serie-inbox)}
.fnum{font-weight:600;color:var(--ink);margin-right:6px;font-variant-numeric:tabular-nums}
.fpct{font-size:12px;color:var(--muted)}

/* gráficos semanais: a altura inclui a faixa do eixo x, para o card não ganhar rolagem interna */
.mini{margin-bottom:12px}
.minititulo{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.cbox{position:relative;height:150px}
.mini .estado{min-height:150px}
.comotabela summary{cursor:pointer;font-size:12.5px;color:var(--muted)}
.comotabela .reptablewrap{margin-top:8px}

/* tabela de contatos */
.cheadacoes{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.cheadacoes .seg{flex-wrap:wrap;max-width:100%}
.reptable td a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.reptable td a:hover{border-bottom-color:var(--coral)}
.paginacao{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:10px;font-size:12.5px;color:var(--muted)}
.paginacao span{margin-right:auto}

/* vendedores: barra do cap, mapa de semanas e conversão por vendedor */
.aviso{margin:0 0 12px;padding:10px 12px;border-radius:var(--r-sm);background:var(--cb-amber-soft);color:var(--cb-amber-ink);font-size:12.5px}
:root[data-theme="dark"] .aviso{background:rgba(245,196,107,.12);color:var(--cb-amber)}
.capacidade td.capbarra{width:46%}
.capacidade td.origens{color:var(--muted);font-size:12.5px}
.fbarra.acima span{background:var(--descartado)}
.alerta{font-size:11.5px;font-weight:600;color:var(--descartado);margin-left:6px}
.mapa td.num{text-align:center;font-size:12px;border-left:2px solid var(--panel)}
.mapa td.acima{color:var(--descartado);font-weight:700}
.mapa th{white-space:nowrap}
.porvendedor .grupo{text-align:center;border-bottom:1px solid var(--line)}
.porvendedor th{font-size:12px;white-space:nowrap}
.porvendedor .m{vertical-align:-1px}
.porvendedor td .fnum{display:block}
.porvendedor td .fpct{font-size:11.5px}

/* dot plot: ponto = taxa, barra = intervalo de 95%, linha vertical = média de todos */
.pontos{position:relative;display:flex;flex-direction:column;gap:4px;padding-left:0}
.prow{display:grid;grid-template-columns:minmax(120px,26%) 1fr minmax(170px,24%);align-items:center;gap:12px;min-height:30px}
.prot{font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptrilho{position:relative;height:22px;border-bottom:1px solid var(--line-soft)}
.pic{position:absolute;top:9px;height:4px;border-radius:2px;background:color-mix(in srgb,var(--serie-hubspot) 35%,transparent)}
.ppto{position:absolute;top:5px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--serie-hubspot);box-shadow:0 0 0 2px var(--panel)}
.pontos.inbox .pic{background:color-mix(in srgb,var(--serie-inbox) 35%,transparent)}
.pontos.inbox .ppto{background:var(--serie-inbox)}
.pval{font-size:12.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.pval small{color:var(--muted);font-size:11.5px}
/* a média, repetida em cada trilho para ficar na mesma escala do ponto */
.pbase{position:absolute;top:2px;bottom:2px;width:0;border-left:1px solid var(--muted);opacity:.7}
/* no celular o mínimo do rótulo e do valor somava a largura toda e o trilho sumia: os dois sobem para uma linha e o
   trilho fica com a de baixo inteira */
@media (max-width:600px){
  .prow{grid-template-columns:minmax(72px,1fr) minmax(0,max-content);row-gap:0}
  .prot,.pval{grid-row:1}
  .pval{grid-column:2;text-align:right}
  .ptrilho{grid-row:2;grid-column:1 / -1}
}
.veredito{display:inline-block;white-space:nowrap;margin-top:3px;padding:1px 7px;border-radius:var(--r-pill);font-size:11px;font-weight:600}
.veredito.acima{background:color-mix(in srgb,var(--pos) 16%,transparent);color:var(--pos)}
.veredito.abaixo{background:color-mix(in srgb,var(--neg) 16%,transparent);color:var(--neg)}
.lotes td .fpct{display:block}
.statde{font:500 16px/1 var(--font-sans);color:var(--muted)}
.cbox.alto{height:240px}
.textolongo{max-width:42ch;color:var(--text);font-size:12.5px}
.funil .fbarra span{background:var(--muted)}
.funil .fbarra.hubspot span{background:var(--serie-hubspot)}
.funil .fbarra.inbox span{background:var(--serie-inbox)}

/* Comentários: o motivo da perda é uma frase, não cabe numa linha; e a taxa por corte não é de nenhuma das duas
   fontes do funil de convites, então o ponto fica neutro */
.perdas tbody th{white-space:normal;font-weight:500}
.perdas th small,.comentados td small{display:block;margin-top:2px;font-size:11.5px;font-weight:400;color:var(--muted)}
.chartbox .comotabela{margin-top:8px}
.pilha{display:flex;flex-direction:column;gap:14px;min-width:0}
/* sem largura mínima, o texto do comentário vira uma coluna de três palavras e cada linha da tabela fica enorme */
.comentados th,.comentados td{padding:8px 10px}
.comentados td:last-child{min-width:34ch}
.comentados td.textolongo:not(:last-child){max-width:28ch}
.comentados td.curta{max-width:20ch}
.pontos.neutra .pic{background:color-mix(in srgb,var(--ink) 22%,transparent)}
.pontos.neutra .ppto{background:var(--ink)}

/* lead: busca com resultados e ficha */
.busca{position:relative;max-width:640px}
.busca .modalinput{width:100%}
.resultados{position:absolute;z-index:15;left:0;right:0;top:calc(100% + 4px);max-height:360px;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:6px}
.resultados button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:8px 10px;border:0;border-radius:var(--r-sm);background:none;text-align:left;cursor:pointer;color:var(--ink)}
.resultados button:hover,.resultados button:focus-visible{background:var(--hover)}
.resultados button span{font-size:12px;color:var(--muted)}
.resultados p{padding:8px 10px}
.fichacab{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.fichacab h2{font-size:20px;line-height:1.2;margin-bottom:4px}
.fichacab p{color:var(--text)}
.fichalinks{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.fichalinks a{text-decoration:none}
.fichastatus td{width:40%}
.envios{display:flex;flex-direction:column;gap:14px}

/* divergências */
.linkbtn{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--heading);cursor:pointer;border-bottom:1px solid var(--line)}
.linkbtn:hover{border-bottom-color:var(--coral)}
.divergencias tr.on{background:var(--hover)}
.divergencias th .m{vertical-align:-1px}
.porque{margin:-2px 0 12px;padding:10px 12px;border-radius:var(--r-sm);background:var(--panel2);border:1px solid var(--line-soft);font-size:12.5px;color:var(--text)}

/* Explorar segmentos: perfis acima e abaixo da média, cada um abre a sua dimensão */
.destaque h3{font:600 13px/1.3 var(--font-sans);color:var(--ink);margin-bottom:8px}
.destaque ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.destaque button{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 12px;padding:8px 12px;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-left-width:3px;border-radius:var(--r-md);color:var(--ink);cursor:pointer;font:inherit}
.destaque.acima button{border-left-color:var(--pos)}
.destaque.abaixo button{border-left-color:var(--neg)}
.destaque button:hover{background:var(--hover)}
.destaque button:focus-visible{outline:none;box-shadow:var(--focus)}
.dnome{flex:1 1 140px;display:flex;flex-direction:column;min-width:0}
.dnome small,.dval small{color:var(--muted);font-size:11.5px}
.dnome b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dval{margin-left:auto;text-align:right;font-variant-numeric:tabular-nums}
.dval small{display:block}

/* Plano da semana: o construtor do ICP, um campo por dimensão */
.icpresumo{font-size:13px;color:var(--ink);margin-bottom:12px}
.sugestoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:12px;margin-bottom:16px}
.sugestoes .eyebrow{margin-bottom:6px}
.construtor{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:12px 16px}
.dimcampo{display:flex;flex-direction:column;gap:6px;min-width:0}
.dimcampo label{font:500 12px/1.3 var(--font-sans);color:var(--muted)}
.dimchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.dimchips .chip{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.dimchips .chip small{color:var(--muted);font-size:11px}
.dimchips .chip.on small{color:inherit;opacity:.75}
.dimadd{max-width:100%;min-width:0;flex:1 1 140px}
.chip.on.alerta{background:var(--neg);border-color:var(--neg)}
.chip.evitar{cursor:default;border-style:dashed;color:var(--muted)}
.chip.evitar:hover{background:var(--chip-bg)}
.plano td{width:42%}
.plano td .fpct{display:block}
.kpis .statcard .veredito{align-self:flex-start}

/* Recrutamento: dot plot sem fonte de vendas (cor neutra) e a busca dentro do card da tabela */
.pontos.neutra .pic{background:color-mix(in srgb,var(--muted) 35%,transparent)}
.pontos.neutra .ppto{background:var(--muted)}
.chartbox>.filtros{margin-bottom:12px}
.chartbox>.filtros .sel{max-width:100%}
.rolavel{overflow-x:auto}
.buscatab{flex:1 1 240px;min-width:0;max-width:420px;padding:7px 12px;font-size:13px}
.repetidas{margin-top:8px}
#aba{display:flex;flex-direction:column;gap:18px}
#aba>*{min-width:0}
.grupos td .fpct{white-space:nowrap}
.reptable td.lista{min-width:32ch;font-size:12.5px;color:var(--text)}

/* descartes: o tipo do motivo embaixo do nome; nomes de campo do HubSpot são longos e quebram */
.motivos tbody th,.preenchimento tbody th{white-space:normal;overflow-wrap:break-word}
.motivos tbody th small{display:block;font-weight:400;font-size:11.5px;color:var(--muted)}
.preenchimento tbody th{font-weight:500;font-size:12.5px}

/* Evolução: safras em ordem, numa rampa de um tom só (o coral da inbox), da mais antiga (clara) para a mais nova
   (forte). Safra é ordinal, então a cor mostra a ordem em vez de inventar uma identidade por safra. Validadas com o
   validate_palette --ordinal do skill de dataviz nos dois temas (luminosidade monotônica, passo de 0,07 e a ponta
   clara acima de 2:1 contra o fundo do card). */
:root{--safra-1:#f59d8b;--safra-2:#eb7d69;--safra-3:#d36854;--safra-4:#bb523f;--safra-5:#a43d2b;--safra-6:#8c2716}
:root[data-theme="dark"]{--safra-1:#9d3725;--safra-2:#b54c39;--safra-3:#cc624d;--safra-4:#e47762;--safra-5:#ee9684;--safra-6:#fab8aa}
.cbox.curva{height:320px}
.semcurva{margin:12px 0 0;padding:10px 12px;border-radius:var(--r-sm);background:var(--panel2);border:1px solid var(--line-soft);font-size:12.5px;color:var(--text)}
.semcurva b{color:var(--ink);font-weight:600}
.meses td .fpct{display:block;font-family:var(--font-sans)}
.meses .maturacao{font-size:12px;color:var(--muted);min-width:120px}
.meses th small{display:block;font-weight:400;font-size:11.5px;color:var(--muted)}

.tres th .fpct,.tres td .fpct{display:block}
.tres tr.ativo{background:var(--hover)}
.tres td:nth-child(2){max-width:420px}
.linkpapel{background:none;border:0;padding:0;font:600 13px/1.3 var(--font-sans);color:var(--heading);cursor:pointer;text-align:left}
.linkpapel.muted{font-weight:400;color:var(--muted)}
.linkpapel:hover{text-decoration:underline}
.linkpapel:focus-visible{outline:none;box-shadow:var(--focus);border-radius:4px}
.volumerot{font-size:12px;color:var(--muted)}
.volume{width:110px;font-size:15px;padding:6px 10px}

/* Relatório semanal */
.icplista{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:13px}
.icplista b{display:inline-block;min-width:70px;color:var(--heading)}
.gravar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 12px;align-items:center;max-width:860px}
.gravar label[for=planilha]{font-size:12.5px;color:var(--muted)}
.gravar .caixa,.gravar [data-gravar]{grid-column:2;justify-self:start}
.caixa{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink)}
.previa{max-height:620px;overflow:auto}
.previa td{white-space:nowrap;max-width:320px;overflow:hidden;text-overflow:ellipsis}
.previa tr.forte td{font-weight:600;color:var(--heading)}
a.sel{text-decoration:none;display:inline-flex;align-items:center}

/* Extração de Vagas */
form.filtros .modalinput{flex:1 1 220px;min-width:0;padding:7px 12px}
.construtor fieldset{border:0;padding:0;margin:0;min-width:0}
.construtor .largo{grid-column:1/-1}
.comando{width:100%;font:400 13px/1.4 var(--font-mono)}
.filtros.acoes{margin-top:10px}

/* Respostas do Slack */
.grade3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:14px}
.destaque.monitorar button{border-left-color:var(--cb-amber)}
.destaque h3 small{font-weight:400;color:var(--muted)}
.destaque > .sel{margin-top:8px}
.veredito.monitorar{background:color-mix(in srgb,var(--cb-amber) 22%,transparent);color:var(--cb-amber-ink)}
:root[data-theme="dark"] .veredito.monitorar{color:var(--cb-amber)}
.motivoslack td{width:60%}
.motivoslack td:nth-child(2){width:auto;color:var(--muted);white-space:nowrap}
td.comentario{max-width:420px;white-space:normal;color:var(--text)}

/* Enriquecimento */
.urls{width:100%;font:13px/1.5 var(--font-mono, ui-monospace, monospace);resize:vertical}
.enriqopcoes{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:10px}
.previa-custo{margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel2, var(--panel));font-size:13px}
.previa-custo ul{margin:6px 0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.enriqlog{margin:10px 0;font-size:12.5px;color:var(--text)}
.enriqlog ul{margin:6px 0 0;padding-left:18px}
.enriq td{white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}

/* Visão geral: busca global, saúde dos módulos, cap da semana e atalhos */
.buscaglobal{display:flex;flex-direction:column;gap:14px}
.buscaglobal .modalinput{width:100%;max-width:640px}
.achados{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:14px;align-items:start}
.achado{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-top:1px solid var(--line-soft);color:var(--ink);text-decoration:none;min-width:0;overflow-wrap:anywhere}
.achado:first-child{border-top:0;padding-top:0}
a.achado:hover b{text-decoration:underline}
.achado span{font-size:12px;color:var(--muted)}
.achado a{align-self:flex-start;font-size:12px;color:var(--ink)}
.saudetopo{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;font-size:13px;color:var(--ink)}
.saudetopo p{display:flex;gap:8px;align-items:flex-start}
.saude{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px 24px}
.caplinha{display:grid;grid-template-columns:minmax(64px,max-content) minmax(60px,1fr) auto;gap:4px 12px;align-items:center;padding:6px 0;font-size:13px}
.caplinha .fbarra{margin:0}
.caplinha .alerta{display:block;margin:2px 0 0}
.caplink{margin-top:12px}
.atalhos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:10px}
.atalhos a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);text-decoration:none;color:var(--ink)}
.atalhos a:hover{background:var(--hover)}
.atalhos a:focus-visible{outline:none;box-shadow:var(--focus)}
.atalhos a span{font-size:12px;color:var(--muted)}