/* Visão geral: painel de trabalho. Escala de espaço 4/8/12/16/24/32, borda fina,
   sombra só onde separa plano, canto 10px. Sem hero e sem ilustração grande. */
/* style.css estiliza o SELETOR header (altura fixa, fundo, padding lateral) para
   a barra do topo. Este e um cabecalho de PAGINA e precisa desfazer aquilo,
   senao ele fica preso em 48px e o conteudo vaza por cima do resto. */
.pagina-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5);block-size:auto;padding:0;background:none;border-bottom:0}
.pagina-topo p{margin:var(--s1) 0 0;font-size:14px}
.saudacao{font-family:var(--display);font-size:30px;font-weight:600;letter-spacing:-.8px;margin:0;line-height:1.1}
.saudacao span{color:var(--accent)}
.faixa-alerta{display:flex;align-items:center;gap:var(--s3);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:var(--radius);padding:var(--s3) var(--s4);margin-bottom:var(--s5)}
/* Só o PRIMEIRO span é o ícone. Sem o >:first-child, qualquer span de apoio
   dentro da faixa virava uma bolinha laranja solta no meio da frase. */
.faixa-alerta>span:first-child{inline-size:22px;block-size:22px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;flex-shrink:0}
.faixa-alerta p{margin:0;font-size:14px;flex:1}
.metricas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s4);margin-bottom:var(--s4)}
.metrica{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s1)}
.metrica[data-ir]{cursor:pointer;transition:border-color .15s,box-shadow .15s}
.metrica[data-ir]:hover,.metrica[data-ir]:focus-visible{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 1px 2px #1c1d1b10}
.metrica-rotulo{font-size:12px;color:var(--muted);letter-spacing:.2px}
.metrica-valor{font-family:var(--display);font-size:28px;font-weight:600;letter-spacing:-.6px;line-height:1.15;font-variant-numeric:tabular-nums}
.metrica small{margin-top:0}
.ov-linha{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin-bottom:var(--s4);align-items:start}
.ov-linha.dupla{grid-template-columns:repeat(2,minmax(0,1fr))}
.painel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4);margin:0}
.painel-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.painel-topo h2{font-size:15px;font-weight:600;letter-spacing:-.2px;margin:0}
.painel-topo small{margin-top:2px}
.painel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.painel li{padding:var(--s3) 0;border-top:1px solid var(--line)}
.painel li:first-child{border-top:0;padding-top:0}
.pendencias li,.agenda li,.atividade li{display:flex;gap:var(--s3);align-items:flex-start}
.pendencias li{flex-direction:column;gap:2px}
.pendencias li[data-ir],.agenda li[data-ir]{cursor:pointer}
.pendencias li[data-ir]:hover strong,.agenda li[data-ir]:hover strong{color:var(--accent)}
.painel strong{font-size:14px;font-weight:600;display:block}
.agenda time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-inline-size:48px;padding-top:2px}
.agenda div{flex:1;min-inline-size:0}
.atividade{gap:0}
.atividade li{align-items:center}
.atividade div{flex:1;font-size:13px;min-inline-size:0}
.atividade strong{display:inline}
.atividade time{font-size:12px;color:var(--muted);white-space:nowrap}
.avatar-mini{inline-size:26px;block-size:26px;border-radius:50%;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;font-size:11px;font-weight:700;text-transform:uppercase;flex-shrink:0}
.marca{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:2px var(--s2);white-space:nowrap;align-self:flex-start}
.funil{gap:var(--s3)}
.funil li{border-top:0;padding:0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 var(--s3)}
.funil-barra{grid-row:1;block-size:8px;border-radius:99px;background:var(--paper);overflow:hidden}
.funil-barra i{display:block;block-size:100%;background:var(--accent);border-radius:99px}
.funil strong{grid-row:1;font-variant-numeric:tabular-nums;font-size:13px}
.funil small{grid-column:1/-1;margin-top:0}
.acoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.acao{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:var(--s3);font-size:13px;display:flex;align-items:center;gap:var(--s2);text-align:left}
.acao:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:var(--accent-soft)}
.acao span{color:var(--accent);font-size:15px}
.vazio{font-size:13px;color:var(--muted);margin:var(--s2) 0 0}
.erro-bloco{font-size:13px;color:#8a3324;background:#fdf2ef;border:1px solid #f0d5cd;border-radius:8px;padding:var(--s3);margin:0}
.nota-rodape{font-size:12px;color:var(--muted);line-height:1.6;border-top:1px solid var(--line);padding-top:var(--s3);margin:var(--s2) 0 0}
.esqueleto{background:linear-gradient(90deg,var(--line)33%,#f1f2ee 50%,var(--line)66%);background-size:300% 100%;border-radius:var(--radius);animation:esqueleto 1.3s linear infinite}
@keyframes esqueleto{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.esqueleto{animation:none}}
@media (max-width:1280px){.metricas{grid-template-columns:repeat(3,minmax(0,1fr))}.ov-linha{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.metricas{grid-template-columns:repeat(2,minmax(0,1fr))}.ov-linha,.ov-linha.dupla{grid-template-columns:1fr}.acoes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.metricas{grid-template-columns:1fr}.saudacao{font-size:26px}.pagina-topo{gap:var(--s3)}.pagina-topo .primary{inline-size:100%}}

/* Marca: o símbolo e a assinatura vêm do componente oficial do site. */
.marca-simbolo{display:block;block-size:var(--marca-altura,30px);inline-size:auto;color:var(--ink)}
.marca-assinatura{display:inline-flex;flex-direction:column;gap:.35em;line-height:1;font-size:var(--marca-altura,22px)}
.marca-nome{font-family:var(--display);font-weight:700;letter-spacing:-.045em;font-size:1em}
.marca-ponto{color:var(--accent)}
.marca-papel{font-family:Satoshi,sans-serif;font-weight:300;font-size:.3em;letter-spacing:.18em;opacity:.72}

/* Casca: menu por área, cabeçalho com busca, e o modo recolhido. */
.marca-topo{padding:0 var(--s3) var(--s5);display:flex;align-items:center;min-block-size:44px}
.marca-topo .so-simbolo{--marca-altura:26px}
.menu{display:flex;flex-direction:column;gap:var(--s1);overflow-y:auto;flex:1;margin:0 calc(var(--s2) * -1)}
.menu-grupo{display:flex;flex-direction:column}
.menu-titulo{border:0;background:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s2);inline-size:100%;padding:var(--s2) var(--s3);color:var(--muted);font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase}
.menu-titulo i{font-style:normal;font-size:11px;opacity:.8}
.menu-titulo:hover{color:var(--ink)}
.menu-grupo ul{list-style:none;margin:0 0 var(--s2);padding:0;display:flex;flex-direction:column;gap:2px}
.menu .nav-item{padding:8px var(--s3);margin:0;border-radius:8px;font-size:12.5px;line-height:1.25;gap:10px;color:var(--muted)}
/* Uma linha por item, sempre. O nome completo continua no title e no caminho. */
.menu .nav-nome{flex:1 1 auto;min-inline-size:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu .nav-item .nav-icone{font-size:15px;inline-size:18px;text-align:center;flex-shrink:0}
.menu .nav-item:hover{background:var(--paper);color:var(--ink)}
.menu .nav-item.active{background:var(--accent-soft);color:var(--accent-ink);font-weight:600;box-shadow:inset 2px 0 0 var(--accent)}
.cabecalho{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-block-size:60px}
.cabecalho-esq,.cabecalho-dir{display:flex;align-items:center;gap:var(--s3);min-inline-size:0}
.cabecalho-dir{flex:1;justify-content:flex-end}
.cabecalho .breadcrumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.cabecalho .breadcrumb b{font-weight:600;color:var(--ink)}
.icone-botao{border:1px solid var(--line);background:var(--surface);border-radius:8px;inline-size:34px;block-size:34px;display:grid;place-items:center;font-size:15px;color:var(--muted);flex-shrink:0}
.icone-botao:hover{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.busca{flex:1;max-inline-size:420px;min-inline-size:0}
.busca input{inline-size:100%;border:1px solid var(--line);border-radius:8px;padding:8px var(--s3);font-size:13px;background:var(--surface);color:var(--ink)}
.busca input::placeholder{color:var(--muted)}
/* O nome do perfil nao pode ser espremido: quem encolhe primeiro e a busca. */
.perfil-botao{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:4px var(--s2) 4px 4px;display:flex;align-items:center;gap:var(--s2);font-size:13px;max-inline-size:220px;flex-shrink:0}
.perfil-botao .avatar{inline-size:26px;block-size:26px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;text-transform:uppercase;flex-shrink:0}
.perfil-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.perfil-botao i{font-style:normal;color:var(--muted);font-size:10px}
.visually-hidden{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.layout.menu-recolhido .sidebar{inline-size:72px;padding-inline:var(--s3)}
.layout.menu-recolhido .nav-nome,.layout.menu-recolhido .menu-titulo span,.layout.menu-recolhido .org-card div:last-child,.layout.menu-recolhido .switch-label,.layout.menu-recolhido .profile span:not(.avatar),.layout.menu-recolhido .menu-titulo i{display:none}
.layout.menu-recolhido .menu-titulo{justify-content:center;padding-inline:0}
.layout.menu-recolhido .nav-item{justify-content:center;padding-inline:0}
.layout.menu-recolhido .marca-topo{justify-content:center;padding-inline:0}
@media (max-width:900px){.busca{display:none}.cabecalho{min-block-size:52px}.perfil-nome{display:none}}
.linha-pendencia{display:flex;align-items:center;gap:var(--s2)}
.contador{font-size:11px;font-weight:700;color:var(--accent-ink);background:var(--accent-soft);border-radius:99px;padding:1px var(--s2);white-space:nowrap}
.faixa-alerta .muted{color:inherit;opacity:.7}
.settings-notice.compacta{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4)}
.settings-notice.compacta details{flex:1;min-inline-size:0}
.settings-notice.compacta summary{cursor:pointer;font-size:13px;list-style:none}
.settings-notice.compacta summary::-webkit-details-marker{display:none}
.settings-notice.compacta summary strong{font-weight:600}
.settings-notice.compacta summary .text-button{font-size:12px}
.settings-notice.compacta details[open]>div{margin-top:var(--s3)}
#mfa-next-step.panel{padding:var(--s3) var(--s4);display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
#mfa-next-step.panel p{margin:0;font-size:13px;flex:1;min-inline-size:220px}
#mfa-next-step.panel button{flex-shrink:0}
.org-simbolo{--marca-altura:34px;flex-shrink:0;display:flex}

.menu-fechar{display:none}

/* Mobile: a barra lateral vira GAVETA. O tratamento antigo empilhava o menu
   inteiro acima do conteúdo, e a primeira tela do celular virava menu. */
@media (max-width:900px){
 /* A gaveta fechada fica fora da tela por transform, e transform CONTA para a
    largura rolavel: sem o clip, o celular ganha rolagem horizontal fantasma. */
 .layout{display:flex;overflow-x:clip}
 .sidebar{position:fixed;inset-block:0;inset-inline-start:0;inline-size:min(84vw,300px);z-index:40;transform:translateX(-101%);transition:transform .16s ease;box-shadow:0 0 0 100vmax #1c1d1b00;padding:var(--s4);border-right:1px solid var(--line);block-size:100dvh;overflow-y:auto;display:flex}
 .layout.menu-aberto .sidebar{transform:none;box-shadow:0 0 0 100vmax #1c1d1b55}
 .menu-fechar{display:flex;align-self:flex-end;min-block-size:44px;margin-bottom:var(--s3);flex-shrink:0}
 .workspace{inline-size:100%;min-inline-size:0}
 .sidebar .org-card,.sidebar-bottom .profile{position:static;inline-size:auto;block-size:auto;padding:var(--s3) var(--s2);border:0}
 .sidebar-bottom .profile{border-top:1px solid var(--line)}
 .sidebar-bottom .profile>span:not(:first-child){display:inline}
 .pagina-topo{flex-direction:column;align-items:stretch}
 .pagina-topo .primary{inline-size:100%;margin-top:0}
 .marca-topo{padding-bottom:var(--s4)}
 /* No celular o caminho inteiro nao cabe ao lado do selo e do perfil: fica o
    nome da pagina, que e a informacao que importa. */
 .trilha-inicio{display:none}
}
@media (prefers-reduced-motion:reduce){.sidebar{transition:none}}

/* Barra um pouco mais larga: o texto do menu cabe sem encolher a leitura. */
.sidebar{inline-size:252px}
/* Monitor muito largo: a leitura para de esticar e o olho para de viajar. */
#content{max-inline-size:1600px}
@media (max-width:1150px){.sidebar{inline-size:224px}}

/* Central de pendências: triagem compacta, tabela e gaveta. */
.topo-acoes{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.pendencias-metricas{grid-template-columns:repeat(4,minmax(0,1fr))}
.metrica[data-cartao]{cursor:pointer}
.metrica-ativa{border-color:var(--accent);background:var(--accent-soft)}
.filtros-pendencias{margin-bottom:var(--s4)}
.filtros-linha{display:flex;gap:var(--s3);align-items:flex-end;flex-wrap:wrap}
.filtros-linha label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);min-inline-size:0}
.filtros-linha select,.filtros-linha input{border:1px solid var(--line);border-radius:8px;padding:8px var(--s3);font-size:13px;background:var(--surface);color:var(--ink);max-inline-size:100%}
.busca-campo{flex:1;min-inline-size:200px}
.busca-campo input{inline-size:100%}
.chips{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3);align-items:center}
.chip{border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));background:var(--accent-soft);color:var(--accent-ink);border-radius:99px;padding:4px var(--s3);font-size:12px}
.tabela-area{padding:0;overflow:hidden}
.tabela-pendencias{inline-size:100%;border-collapse:collapse;font-size:14px}
.tabela-pendencias th{text-align:left;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);font-weight:600;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);white-space:nowrap}
.tabela-pendencias td{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);vertical-align:top}
.tabela-pendencias tbody tr{cursor:pointer}
.tabela-pendencias tbody tr:hover{background:var(--paper)}
.tabela-pendencias tbody tr:last-child td{border-bottom:0}
.tabela-pendencias strong{font-size:14px;font-weight:600;display:block}
.tabela-pendencias td small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-inline-size:52ch}
.tabela-pendencias td:first-child{max-inline-size:44ch}
.prazo-data{font-variant-numeric:tabular-nums;white-space:nowrap}
.prazo-grave{color:#a8321c;font-weight:600}
.prazo-aviso{color:var(--accent-ink)}
.prazo-neutro{color:var(--muted)}
.coluna-fraca{color:var(--muted)}
.acoes-celula{text-align:right;white-space:nowrap}
.carregando-faixa{padding:var(--s2) var(--s4);font-size:12px;color:var(--muted);background:var(--paper)}
.paginacao{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;padding:var(--s3) var(--s4);border-top:1px solid var(--line)}
.paginacao-botoes{display:flex;align-items:center;gap:var(--s1);flex-wrap:wrap}
.paginacao-botoes button{padding:5px 11px;font-size:13px;border-radius:7px;border:1px solid var(--line);background:var(--surface)}
/* ⚠️ `.paginacao-botoes button` (classe + tipo) vence `.primary` (classe) e
   devolvia o fundo branco, mas a COR do texto continuava branca: o número da
   página atual ficava invisível, um círculo laranja vazio. Vale para toda a
   paginação da casa, não só para o quadro. */
.paginacao-botoes button.primary{border-color:var(--accent);background:var(--accent);color:#fff}
.por-pagina{display:flex;align-items:center;gap:var(--s2);font-size:12px;color:var(--muted)}
.por-pagina select{border:1px solid var(--line);border-radius:7px;padding:4px var(--s2);font-size:13px;background:var(--surface);color:var(--ink)}
.pendencias-lista{display:flex;flex-direction:column}
.pendencia-cartao{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:4px;text-align:left;background:none;border-inline:0;border-block-start:0;cursor:pointer}
.pendencia-cartao div{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;font-size:12px;margin-top:2px}
/* ⚠️ 18/09: o botao do minichat (z-index 60) cobria o botao de salvar da
   gaveta (z-index 30) em 1440: elementFromPoint no centro de "Salvar cliente"
   devolvia #minichat-botao, e o clique nao chegava ao destino. A gaveta e
   superficie de edicao focada: ela fica acima do lancador do chat e abaixo
   do toast (100). Em 390 o botao ocupa a largura e nao era interceptado. */
.gaveta{position:fixed;inset-block:0;inset-inline-end:0;inline-size:min(92vw,460px);background:var(--surface);border-left:1px solid var(--line);box-shadow:-8px 0 24px #1c1d1b12;padding:var(--s5) var(--s4);overflow-y:auto;z-index:70;display:flex;flex-direction:column;gap:var(--s3)}
.drawer-topo{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:0}
.drawer-topo div{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.gaveta h2{font-size:18px;margin:0}
.drawer-descricao{font-size:13px;color:var(--muted);margin:0;line-height:1.6}
.drawer-dados{display:flex;flex-direction:column;gap:var(--s3);margin:0;border-block:1px solid var(--line);padding-block:var(--s4)}
.drawer-dados div{display:grid;grid-template-columns:120px 1fr;gap:var(--s3);align-items:baseline}
.drawer-dados dt{font-size:12px;color:var(--muted)}
.drawer-dados dd{margin:0;font-size:14px}
.drawer-dados dd small{margin-top:2px}
.drawer-porque h3{font-size:13px;margin:0 0 var(--s1)}
.drawer-porque p{font-size:13px;color:var(--muted);margin:0;line-height:1.6}
.drawer-acoes{margin-top:auto;padding-top:var(--s4)}
.drawer-acoes .primary{inline-size:100%}
@media (max-width:1100px){.pendencias-metricas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.pendencias-metricas{grid-template-columns:repeat(2,minmax(0,1fr))}.gaveta{inline-size:100%;inset-inline-start:0}.filtros-linha label{inline-size:100%}.busca-campo{inline-size:100%}}
/* No celular, uma coluna preserva os valores inteiros nos cartões de Custos,
   Despesas e Memorial. Duas colunas cortavam valores ou separavam os centavos,
   mesmo com a largura total da página limitada ao tamanho da tela. */
@media (max-width:560px){
 .metrics,.pendencias-metricas{grid-template-columns:minmax(0,1fr)}
 .pendencias-metricas .metrica-valor{font-size:clamp(17px,5.6vw,28px);overflow-wrap:normal}
 .metrica-valor{overflow-wrap:anywhere}
 .pendencias-metricas .metrica{min-inline-size:0}
}

/* Clientes: lista, prévia e ficha. Reaproveita a tabela e a gaveta da Central
   de Pendências; o que entra aqui é só o que a ficha trouxe de novo. */
.tabela-clientes td:first-child{max-inline-size:34ch}
.celula-cliente small{display:block;color:var(--muted);font-size:12px}
.link-forte{font-weight:600;color:var(--ink);text-decoration:none}
.link-forte:hover,.link-forte:focus-visible{text-decoration:underline;color:var(--accent-ink)}
.numero-celula{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabela-pendencias th:has(+ th),.numero-celula{white-space:nowrap}
.marca.situacao-active{background:#eef5ef;color:var(--green)}
.marca.situacao-inactive{background:var(--paper);color:var(--muted)}
.marca.situacao-archived{background:#f1eee9;color:#7a6a55}
.chip-x{background:none;border:0;margin-inline-start:6px;cursor:pointer;color:inherit;font-size:11px;padding:0}
.filtros-extra{margin-top:var(--s3);padding-top:var(--s3);border-top:1px dashed var(--line)}
.cliente-cartao a{font-size:14px}
.botao-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

/* Formulário sob demanda: blocos curtos, e o que é raro fica recolhido. */
.gaveta-form{inline-size:min(94vw,600px)}
.form-cliente{display:flex;flex-direction:column;gap:var(--s3);min-block-size:0;overflow-y:auto}
.form-cliente fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--s2)}
.form-cliente legend{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);padding:0;margin-bottom:var(--s1)}
.form-cliente label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.form-cliente input,.form-cliente select,.form-cliente textarea{border:1px solid var(--line);border-radius:8px;padding:8px var(--s3);font-size:14px;background:var(--surface);color:var(--ink);inline-size:100%;font-family:inherit}
.form-cliente .bloco-extra{border:1px solid var(--line);border-radius:10px;padding:var(--s3)}
.form-cliente .bloco-extra summary{cursor:pointer;font-size:13px;font-weight:600}
.form-cliente .bloco-extra[open]{display:flex;flex-direction:column;gap:var(--s2)}
.erro-formulario{color:#a8321c;font-size:13px;margin:0}
.form-acoes{display:flex;gap:var(--s3);justify-content:flex-end}
.form-acoes .primary,.form-acoes .secondary{inline-size:auto}

/* Ficha: cabeçalho compacto, abas e corpo por aba. */
.trilha{font-size:12px;color:var(--muted);margin-bottom:var(--s2)}
.trilha a{color:var(--muted)}
.ficha-topo{align-items:flex-start}
.abas{display:flex;gap:var(--s1);border-bottom:1px solid var(--line);margin-bottom:var(--s4);overflow-x:auto;scrollbar-width:thin}
.aba{padding:9px var(--s3);font-size:13px;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
.aba:hover{color:var(--ink)}
.aba.ativa{color:var(--accent-ink);border-bottom-color:var(--accent);font-weight:600}
.ficha-grade{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--s4);align-items:start}
.ficha-metricas{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:var(--s3)}
.ficha-corpo .tabela-pendencias{margin-top:var(--s2)}
.lista-simples{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2);font-size:14px}
.aviso-bloco{font-size:12px;color:var(--muted);background:var(--paper);border-radius:8px;padding:var(--s2) var(--s3);margin:0 0 var(--s3)}
.linha-do-tempo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.linha-do-tempo li{border-left:2px solid var(--line);padding-left:var(--s3);font-size:14px}
.linha-do-tempo small{display:block;color:var(--muted);font-size:12px}
@media (max-width:1100px){.ficha-grade{grid-template-columns:1fr}}
@media (max-width:900px){.ficha-metricas{grid-template-columns:repeat(3,minmax(0,1fr))}.form-acoes{flex-direction:column-reverse}.form-acoes .primary,.form-acoes .secondary{inline-size:100%}}

/* Propostas: lista, editor em quatro etapas e ficha. */
.marca.situacao-draft{background:var(--paper);color:var(--muted)}
.marca.situacao-approved{background:#eef5ef;color:var(--green)}
.marca.situacao-converted{background:var(--accent-soft);color:var(--accent-ink)}
.tabela-propostas td:first-child{max-inline-size:32ch}
.proposta-cartao div{justify-content:space-between}

/* Stepper: etapa atual, concluídas e as que têm pendência. */
.stepper{display:flex;gap:var(--s2);margin-bottom:var(--s4);flex-wrap:wrap}
.passo{display:flex;align-items:center;gap:var(--s2);padding:8px var(--s3);border:1px solid var(--line);border-radius:99px;background:var(--surface);font-size:13px;color:var(--muted);cursor:pointer}
.passo-numero{inline-size:20px;block-size:20px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-size:11px;font-weight:600}
.passo-atual{border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.passo-atual .passo-numero{background:var(--accent);color:#fff}
.passo-feito{color:var(--ink)}
.passo-feito .passo-numero{background:var(--green);color:#fff}
.passo-erro{border-color:#e0b4a6}
.passo-alerta{color:#a8321c;font-weight:700}

.editor-corpo{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s4);align-items:start}
.editor-simples{grid-template-columns:minmax(0,1fr)}
.editor-principal{display:flex;flex-direction:column;gap:var(--s3)}
.editor-principal label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.editor-principal input,.editor-principal select,.editor-principal textarea{border:1px solid var(--line);border-radius:8px;padding:8px var(--s3);font-size:14px;background:var(--surface);color:var(--ink);font-family:inherit;max-inline-size:520px}
.editor-principal .linha-opcao{flex-direction:row;align-items:center;gap:var(--s2);font-size:13px;color:var(--ink)}
.editor-principal .linha-opcao input{inline-size:auto}
.passo-topo{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.sugestoes{display:flex;flex-direction:column;gap:4px;max-block-size:220px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;padding:var(--s2)}
.sugestao{text-align:left;background:none;border:0;padding:6px var(--s2);border-radius:6px;cursor:pointer;font-size:13px;display:flex;flex-direction:column}
.sugestao:hover,.sugestao:focus-visible{background:var(--paper)}
.sugestao.escolhida{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.sugestao small{color:var(--muted);font-size:11px}
.escolha-atual{font-size:13px;margin:0}
/* Ancora o rótulo absoluto de Ações dentro da rolagem do escopo. Sem isso,
   seu pixel oculto escapa do recipiente e alarga o documento no celular. */
.tabela-escopo{position:relative}
.tabela-escopo small{display:block;color:var(--muted);font-size:11px}

.resumo-calculo{border:1px solid var(--line);border-radius:12px;padding:var(--s4);background:var(--surface);position:sticky;top:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.resumo-calculo h2{font-size:15px;margin:0}
.resumo-velho{border-color:#e0b4a6}
.resumo-total{display:flex;justify-content:space-between;align-items:baseline;margin:0;padding-top:var(--s3);border-top:1px solid var(--line);font-size:14px}
.resumo-total strong{font-size:22px;font-family:var(--display)}
.memoria summary{cursor:pointer;font-size:12px;color:var(--muted)}
.memoria ol{font-size:12px;color:var(--muted);margin-top:var(--s2)}
.checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2);font-size:14px}
.checklist li{display:flex;align-items:center;gap:var(--s2)}
.checklist .ok{color:var(--green)}
.checklist .falta{color:#a8321c}
.vazio-acao{display:flex;flex-direction:column;align-items:center;gap:var(--s3);padding:var(--s5)}

/* ⚠️ 18/09: mesma regra da gaveta. O lancador do chat (z-index 60) ficava por
   cima do rodape de acao no celular: elementFromPoint no centro de
   "Continuar" (x=279, y=938, 93x42) devolvia #minichat-botao, e o toque nao
   chegava ao botao. Superficie de acao ganha do lancador; o toast (100)
   continua acima de tudo. */
.editor-rodape{position:sticky;bottom:0;z-index:70;display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;margin-top:var(--s4);background:var(--paper);border-top:1px solid var(--line)}
.editor-rodape .estado-salvamento{flex:1;font-size:12px}
@media (max-width:1100px){.editor-corpo{grid-template-columns:minmax(0,1fr)}.resumo-calculo{position:static}}
@media (max-width:900px){.editor-rodape{flex-wrap:wrap}.editor-rodape button{flex:1}.stepper{overflow-x:auto;flex-wrap:nowrap}}

/* Quadro de Projetos e entregas: a altura útil é da janela, a rolagem horizontal
   é só da área do quadro e cada coluna rola por dentro.
   O topo desta tela é MEDIDO: a 1366x768 ele comia 342 dos 566px de conteúdo e
   sobravam 148px para cartões de 189px, ou seja, nenhum cartão inteiro. Título
   em uma linha, indicadores recolhidos, navegação de coluna dentro da barra de
   filtros e cabeçalho de coluna enxuto trocam esse topo por cartão. */
.quadro-titulo{align-items:center;margin-bottom:0}
.quadro-filtros .filtros-linha{gap:var(--s2) var(--s3);align-items:end}
/* ⚠️ `label{margin:15px 0 8px}` da folha do sistema custa 23px de altura POR
   controle, e numa faixa horizontal isso vira altura de linha. Medido: a faixa
   caiu de 179px para uma linha só. */
.quadro-filtros .filtros-linha label{font-size:11px;margin:0}
/* Uma altura só para tudo que fica na faixa: campo, seletor e botão. Sem isto
   os botões nascem mais altos que os campos e a barra fica desalinhada. */
.quadro-filtros .filtros-linha select,.quadro-filtros .filtros-linha input{padding:6px var(--s2);block-size:34px}
/* Descendente, não filho direto: os botões de coluna moram dentro da navegação
   e ficavam 2px mais altos que o resto da barra. */
.quadro-filtros .filtros-linha button{block-size:34px;min-block-size:34px;padding-block:0;display:inline-flex;
 align-items:center;justify-content:center;font-size:13px;white-space:nowrap;margin:0}
.quadro-filtros .icone-botao{inline-size:34px;padding:0}
.quadro-filtros .busca-campo{flex:1 1 160px;max-inline-size:200px}
.quadro-filtros .filtros-linha>label:not(.busca-campo){flex:0 1 140px}
.quadro-filtros .chips{margin-top:var(--s2)}
.quadro-titulo h1{font-size:22px;margin:0}
.quadro-titulo .quadro-subtitulo{margin:2px 0 0;font-size:12px}
.quadro-navegacao{display:flex;align-items:center;gap:var(--s2);flex-wrap:nowrap}
.quadro-filtros .quadro-navegacao{border-inline-start:1px solid var(--line);padding-inline-start:var(--s3);margin-inline-start:var(--s1)}
/* A faixa não quebra em duas linhas: "Ir para" e o seletor andam juntos. Quando
   quebrava, a navegação custava 61px por 38px de conteúdo. */
.quadro-filtros .ir-para{display:flex;flex-direction:row;align-items:center;gap:var(--s2);font-size:12px;color:var(--muted);white-space:nowrap;flex:0 0 auto}
.quadro-filtros .ir-para select{max-inline-size:130px}
.quadro-filtros .quadro-navegacao{align-items:end}
.ir-para select{border:1px solid var(--line);border-radius:8px;padding:5px var(--s2);font-size:13px;background:var(--surface);color:var(--ink);max-inline-size:220px}
.quadro-area{display:flex;gap:var(--s3);overflow-x:auto;overflow-y:hidden;padding-bottom:var(--s2);
 /* A altura vem MEDIDA da tela (`--altura-do-quadro`). O clamp continua como
    rede de segurança para o primeiro quadro, antes da medição, e o 360 de
    desconto era exatamente o chute que deixava faixa vazia embaixo da
    paginação em 1366x768. */
 block-size:var(--altura-do-quadro,clamp(360px,calc(100dvh - 360px),820px));scroll-snap-type:x proximity}
.coluna-quadro{flex:0 0 304px;display:flex;flex-direction:column;min-block-size:0;min-inline-size:0;block-size:100%;max-block-size:100%;
 background:var(--surface);border:1px solid var(--line);border-radius:12px;scroll-snap-align:start;overflow:clip}
/* ⚠️ `header{height:76px}` da folha do sistema vale para QUALQUER <header>, e
   este cabeçalho de coluna é um. Sem devolver a altura ao conteúdo, a coluna
   gastava 76px de moldura para 24px de texto. */
.quadro-area .coluna-topo{display:block;padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);flex:0 0 auto;block-size:auto}
.quadro-area .coluna-topo h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quadro-area .coluna-topo div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2)}
.quadro-area .coluna-topo h2{font-size:13px;margin:0;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);min-inline-size:0}
.quadro-area .coluna-total{font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.quadro-area .coluna-topo small{display:block;margin-top:2px;font-size:11px;line-height:1.3}
@media (max-height:900px) and (min-width:901px){.quadro-area .coluna-topo small{display:none}}
.quadro-area .coluna-corpo{flex:1 1 0;min-block-size:0;overflow-y:auto;padding:var(--s2);display:flex;flex-direction:column;gap:var(--s2);overscroll-behavior:contain}
.quadro-area .coluna-corpo.destino-ativo{background:var(--accent-soft);outline:2px dashed var(--accent);outline-offset:-4px}
/* Destino que recusa este cartão diz isso DURANTE o arraste, não depois de
   soltar: o motivo vai no fantasma, e a coluna fica marcada em vermelho. */
.quadro-area .coluna-corpo.destino-recusado{background:#fdeceb;outline:2px dashed #a8321c;outline-offset:-4px}
.quadro-area .coluna-corpo.destino-esperando{outline:2px dashed var(--line);outline-offset:-4px}
.marcador-solta{flex:0 0 auto;block-size:3px;border-radius:3px;background:var(--accent)}
/* O fantasma é NOSSO: largura do cartão, altura limitada e dentro da página,
   então aparece em captura de tela. O nativo do navegador não faz nada disso. */
.cartao-fantasma{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:90;pointer-events:none;
 max-block-size:200px;overflow:clip;opacity:.95;box-shadow:0 12px 28px #1c1d1b33;rotate:1.5deg;cursor:grabbing}
.cartao-fantasma .fantasma-aviso{margin:var(--s2) 0 0;font-size:11px;line-height:1.3;color:var(--accent-ink)}
.cartao-fantasma[data-recusado="sim"]{border-color:#a8321c}
.cartao-fantasma[data-recusado="sim"] .fantasma-aviso{color:#a8321c}
body.arrastando-cartao{cursor:grabbing;user-select:none}
/* ⚠️ Com `scroll-snap-type` ligado, somar 19px por quadro à rolagem é DESFEITO
   pelo navegador, que reencaixa na coluna mais próxima: a rolagem automática
   ficava parada em zero. Enquanto o cartão está na mão, o encaixe sai. */
body.arrastando-cartao .quadro-area{scroll-snap-type:none}
.quadro-area .coluna-vazia{padding:var(--s4) var(--s2);font-size:12px;text-align:center}
.coluna-rodape{border-top:1px solid var(--line);padding:var(--s2)}
.coluna-rodape{flex:0 0 auto}
.coluna-rodape .paginacao{padding:0;border:0;gap:var(--s2);font-size:11px;flex-wrap:nowrap;justify-content:center}
/* Numa coluna de 304px o intervalo "Mostrando 1—10 de 14 projetos" não cabe ao
   lado dos botões, e empurrava "Próxima" para fora. O total já está no
   cabeçalho da coluna, e a página, no botão marcado. */
.coluna-rodape .paginacao>.muted{display:none}
/* Com muitas páginas (a coluna "A liberar" do escritório tem 19) a fila de
   números não cabe nos 288px da coluna, e "Próxima" ficava cortado pelo recorte.
   Aqui ficam só as três coisas que a pessoa usa: voltar, onde está, avançar.
   O salto para uma página distante continua na tela de lista. */
.coluna-rodape .paginacao-botoes{flex-wrap:nowrap;min-inline-size:0}
.coluna-rodape .paginacao-botoes>*{display:none}
.coluna-rodape .paginacao-botoes>:first-child,
.coluna-rodape .paginacao-botoes>:last-child,
.coluna-rodape .paginacao-botoes>[aria-current]{display:inline-flex}
.coluna-rodape .paginacao-botoes button{padding:3px 8px;font-size:12px}

.cartao-projeto{border:1px solid var(--line);border-radius:10px;padding:6px var(--s3);background:var(--surface);
 display:flex;flex-direction:column;gap:2px;cursor:grab;font-size:13px;flex:0 0 auto;touch-action:manipulation}
.cartao-projeto .cartao-menu{inline-size:24px;block-size:24px;font-size:13px}
.cartao-projeto:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cartao-projeto>.link-forte{line-height:1.25;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
/* O original fica no lugar, apagado, enquanto o fantasma anda: quem arrasta
   precisa ver de onde o cartão saiu. */
.cartao-projeto.arrastando{opacity:.35;outline:2px dashed var(--line)}
.cartao-projeto[data-arrastavel="nao"]{cursor:default}
.cartao-atrasado{border-left:3px solid #a8321c}
.cartao-topo{display:flex;align-items:center;justify-content:space-between}
.cartao-codigo{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.cartao-menu{padding:0 4px;line-height:1}
.cartao-projeto>small{color:var(--muted);font-size:11px}
.cartao-linha{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.cartao-linha .marca{font-size:10px;padding:2px 7px}
.cartao-rodape{display:flex;justify-content:space-between;gap:var(--s2);font-size:11px}
.prioridade-alta{background:#fdeceb;color:#a8321c}
.prioridade-média{background:var(--accent-soft);color:var(--accent-ink)}
.prioridade-baixa{background:var(--paper);color:var(--muted)}

.menu-flutuante{position:fixed;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);
 background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px #1c1d1b22;
 padding:var(--s3);z-index:35;min-inline-size:min(92vw,360px);display:flex;flex-direction:column;gap:4px}
.menu-titulo-cartao{font-size:12px;color:var(--muted);margin:0 0 var(--s2)}
.menu-secao{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin:var(--s2) 0 2px}
.menu-vazio{font-size:12px;color:var(--muted);margin:0 0 var(--s2);line-height:1.4}
.menu-acao small{display:block;color:var(--muted);font-size:11px;line-height:1.3}
.menu-acao{text-align:left;background:none;border:0;padding:8px var(--s2);border-radius:8px;font-size:13px;cursor:pointer;color:var(--ink);text-decoration:none;display:block}
.menu-acao:hover:not([disabled]){background:var(--paper)}
.menu-acao-bloqueada{color:var(--muted);cursor:not-allowed}
.menu-acao small{color:var(--muted);font-size:11px}
.transicoes li{display:flex;flex-direction:column;gap:4px;border-left:2px solid var(--line);padding-left:var(--s3)}
.transicoes li.ok{border-left-color:var(--green)}
.transicoes li.falta{border-left-color:#e0b4a6}
.transicoes small{color:var(--muted);font-size:12px;line-height:1.4}
.transicoes button{align-self:flex-start;margin-top:2px}
@media (max-width:900px){
 .quadro-area{block-size:auto;max-block-size:none;scroll-snap-type:x mandatory;align-items:flex-start}
 .coluna-quadro{flex:0 0 86vw;block-size:auto;max-block-size:none}
 /* ⚠️ `flex:1 1 0` numa coluna de altura AUTOMÁTICA colapsa: a base zero é a
    altura hipotética, e não sobra espaço para distribuir. No celular o corpo
    volta a ter a altura do conteúdo, e quem rola é a página. */
 .quadro-area .coluna-corpo{flex:0 0 auto;max-block-size:none;overflow-y:visible}
 /* Celular: os filtros dividem a linha em vez de ocupar uma cada. Medido: a
    faixa inteira caía de 364px para menos de um terço disso.
    ⚠️ Cada seletor aqui precisa EMPATAR OU GANHAR do de desktop lá de cima,
    senão a declaração nasce morta. Quatro destas nasceram assim e não valiam
    nada: `.ir-para` perde para `.quadro-filtros .ir-para`, e `.quadro-navegacao`
    perde para `body.tela-dados .quadro-navegacao`. */
 .quadro-filtros .filtros-linha>label:not(.busca-campo){inline-size:auto;flex:1 1 150px;min-inline-size:0}
 .quadro-filtros .busca-campo{flex:1 1 100%;max-inline-size:none}
 body.tela-dados .quadro-filtros .quadro-navegacao{margin-inline-start:0;flex:1 1 100%}
 .quadro-filtros .ir-para{flex:1 1 auto}
 .quadro-filtros .ir-para select{max-inline-size:none;inline-size:100%}
}

/* Custos e recebimentos: valor com estado, e pendência que leva à origem. */
/* ⚠️ t87: a linha da tabela de custos media 156px em 1366px, porque o nome do
   projeto quebrava em três linhas e o resumo de pendências empilhava em mais
   três. Seis linhas assim pedem 936px, mais que a janela inteira. O nome NÃO
   é cortado: ele ganha largura e para em duas linhas, com o texto completo no
   link e na ficha do projeto. Medido: 156px por linha viraram 76px. */
/* ⚠️ Medido depois de publicar: 38ch davam 247px à coluna e a tabela passou
   a estourar 74px da caixa, ou seja, eu troquei um defeito por outro. O que
   derruba a altura da linha é o clamp, não a largura, então a coluna volta
   para uma medida que cabe e o respiro entre colunas cede o resto. */
.tabela-custos td:first-child{max-inline-size:30ch}
.tabela-custos td{padding-block:8px}
@media (max-width:1600px){
 .tabela-custos th,.tabela-custos td{padding-inline:6px}
 .tabela-custos td:first-child{max-inline-size:26ch}
}
.tabela-custos .celula-cliente a{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tabela-custos .celula-cliente small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:30ch}
.valor-parcial{color:var(--accent-ink)}
.valor-parcial small{font-size:10px;text-transform:uppercase;letter-spacing:.4px}
.celula-cobertura{max-inline-size:22ch}
/* O resumo de pendências para em duas linhas; o texto inteiro continua no
   painel que o próprio botão abre. */
.celula-cobertura .pendencia-abrir{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:start}
.pendencia-abrir{text-align:left;font-size:12px;line-height:1.35}
.pendencias-cobertura li{display:flex;flex-direction:column;gap:2px;border-left:2px solid #e0b4a6;padding-left:var(--s3)}
.pendencias-cobertura small{color:var(--muted);font-size:12px}
.pendencias-cobertura button{align-self:flex-start}
.custo-cartao div{display:flex;justify-content:space-between;gap:var(--s2);font-size:12px}
.metricas .metrica small{display:block;margin-top:2px;font-size:11px;line-height:1.3}

/* ---------------------------------------------------------------------------
   Páginas de dados (Custos e Quadro): a JANELA é o limite, e quem rola é a
   região de resultados. Antes, 100 linhas empilhavam dentro de #content e
   levavam a paginação junto para o fim do documento: trocar de página exigia
   rolar a lista inteira. A corrente de altura precisa dos três elos, e cada um
   precisa de min-block-size:0, senão o filho nunca encolhe abaixo do conteúdo.
   Vale SÓ sob .tela-dados: as outras rotas mantêm a rolagem natural. */
body.tela-dados .layout{block-size:100dvh}
body.tela-dados .workspace{display:flex;flex-direction:column;min-block-size:0}
body.tela-dados #content{flex:1;min-block-size:0;display:flex;flex-direction:column;gap:var(--s4);
 /* Tabela e quadro usam a largura que existe à direita da barra. */
 max-inline-size:none;padding:20px 24px;margin:0}
body.tela-dados #content>*{flex:0 0 auto}
/* Precisa do #content também: sem ele, a regra acima (que tem id) vence por
   especificidade, a região de resultados nunca encolhe e o documento cresce. */
/* ⚠️ t87: `flex:1 1 0`, e NÃO `1 1 auto`. Com base `auto` a base do item é o
   TAMANHO DO CONTEÚDO: a tabela entrava na conta com 3.578 px, os irmãos
   entravam como `0 0 auto` e não cediam nada, e o navegador cobrava o
   déficit inteiro de quem tinha a maior base. A região de resultados
   encolhia até o piso e ficava com 114 px de janela para 3.578 px de
   tabela, ou seja 3% visível, enquanto a paginação prometia 25 registros.
   Com base 0 ela não entra no déficit: recebe o espaço que sobra.
   Medido no staging, em 1366x768: 2 linhas completas viraram 9. */
body.tela-dados #content>.tabela-area,body.tela-dados #content>.quadro-area{flex:1 1 0;min-block-size:0;display:flex;flex-direction:column;overflow:hidden}
.tabela-rolagem{flex:1 1 0;min-block-size:0;overflow:auto;
 /* Sem isto, rolar até uma linha (por clique ou por Tab) a joga EMBAIXO do
    cabeçalho fixo, e o botão dela fica inalcançável. */
 scroll-padding-block-start:3rem}
/* O cabeçalho da tabela acompanha a rolagem do corpo dela. */
.tabela-rolagem thead th{position:sticky;inset-block-start:0;z-index:2;background:var(--surface);box-shadow:inset 0 -1px 0 var(--line)}
body.tela-dados #content>.tabela-area .paginacao{flex:0 0 auto;border-top:1px solid var(--line)}
/* Em tela baixa ou com zoom, o que encolhe é o espaço decorativo, nunca o dado.
   O corte é em 900px de altura porque o notebook comum (1366x768) precisa dele:
   sem isso, cabeçalho, cartões e filtros comiam a altura toda e a tabela ficava
   com 2px, que é pior que documento comprido. */
@media (max-height:900px){body.tela-dados #content{gap:var(--s3);padding:14px 20px}
 body.tela-dados .pagina-topo{margin-block-end:0}
 body.tela-dados .metricas .metrica{padding:var(--s3)}
 body.tela-dados .metricas .metrica small{display:none}
 body.tela-dados .filtros-pendencias{padding:var(--s3)}}
/* Piso da região de resultados: se ainda assim não couber, o documento rola um
   pouco. Tabela de 2px de altura é pior do que página comprida.
   ⚠️ t87: o piso subiu de 200px para caber a meta de 6 linhas completas em
   1366x768 depois de posicionar a tabela na janela. O teto de `100dvh-210px`
   existe para o piso não virar uma tela alta demais em janela baixa, onde ele
   empurraria a paginação para fora. */
/* ⚠️ Medido depois de publicar: com 560px a lista de Tarefas mostrava 5
   linhas completas de 25, e a meta são 6. A linha de lá tem 97px, então o
   piso precisa de 640px. O teto por altura de janela continua mandando:
   em tela baixa o piso cede, senão ele empurraria a paginação para fora. */
body.tela-dados #content>.tabela-area,body.tela-dados #content>.quadro-area{min-block-size:min(640px,calc(100dvh - 210px))}
/* Celular: uma rolagem principal por tela, a do documento. */
@media (max-width:900px){body.tela-dados .layout{block-size:auto}
 body.tela-dados #content{display:block;padding:16px}
 body.tela-dados #content>.tabela-area,body.tela-dados #content>.quadro-area{overflow:visible}
 .tabela-rolagem{overflow:visible}
 .tabela-rolagem thead th{position:static}}

/* Ficha financeira do projeto: abas que trocam o painel, não a página. */
.abas-projeto{display:flex;gap:var(--s2);border-block-end:1px solid var(--line);padding-block-end:var(--s2)}
.abas-projeto button{background:none;border:0;padding:var(--s2) var(--s3);border-radius:8px;cursor:pointer;color:var(--muted);font-size:14px}
.abas-projeto button.ativa{color:var(--ink);background:var(--surface);font-weight:600;box-shadow:inset 0 -2px 0 var(--accent)}
.abas-financeiro{display:flex;gap:var(--s2);flex-wrap:wrap}
.abas-financeiro button{background:none;border:1px solid var(--line);border-radius:999px;padding:6px var(--s3);cursor:pointer;font-size:13px;color:var(--muted)}
.abas-financeiro button.ativa{border-color:var(--accent);color:var(--ink);font-weight:600}
.ficha-topo h1{margin-block:var(--s1) 0}
.ficha-valores{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.historico-financeiro li{display:flex;flex-direction:column;gap:2px;padding-block:var(--s2);border-block-end:1px solid var(--line)}
.historico-financeiro small{color:var(--muted);font-size:12px}
@media (max-width:760px){.abas-financeiro{overflow-x:auto;flex-wrap:nowrap}
 .ficha-valores{grid-template-columns:1fr}}

/* O quadro sob o shell de dados: a altura vem da JANELA, não de um clamp em
   pixels que sobra em monitor grande e corta em notebook. A barra horizontal
   fica no rodapé da região, e é por ela que a última coluna é alcançada. */
/* ⚠️ `flex:1 1 auto` tem base no CONTEÚDO: a região ficava com a sobra da
   janela e mais nada, 148px a 1366x768. Com base ZERO ela pede o espaço que
   existe, e o piso garante coluna legível mesmo em janela apertada.
   `contain:layout paint` segura o transbordo dentro da região: sem ele, a sobra
   das colunas chega à raiz e a página inteira anda. */
body.tela-dados #content>.quadro-area{flex:1 1 0;min-block-size:260px;block-size:auto;flex-direction:row;
 overflow-x:auto;overflow-y:hidden;scrollbar-width:auto;contain:layout paint}
body.tela-dados .quadro-navegacao{flex:0 0 auto}
/* Em janela baixa o subtítulo sai: ele custa uma linha inteira e o número de
   projetos já aparece no seletor de coluna. */
@media (max-height:820px){body.tela-dados .quadro-subtitulo{display:none}}
@media (max-width:900px){body.tela-dados #content>.quadro-area{block-size:auto;min-block-size:0;overflow-x:auto;overflow-y:visible;contain:none}}

/* O lançador do chat é fixo no canto inferior direito (54px, 22px de folga) e
   cobria a coluna de ações das últimas linhas em 1366x768. Em página de dados a
   faixa dele fica reservada, e só quando o chat existe naquela conta. */
body.tela-dados:has(.minichat-botao) #content{padding-block-end:76px}
body.tela-dados:has(.minichat-botao) .paginacao{padding-inline-end:var(--s5)}
.cartao-acoes{display:flex;gap:var(--s3);align-items:center}