/* A plataforma no visual do Painel da agência (story 4.28; identidade de Cora Cores e interface de Davi Design, 04/10/2026).
   Direção A: marinho e grafite, uma cor de ação (--verba), tema claro por padrão (o escuro só com data-theme="dark").
   Sem serifa nas telas do painel. Plex Sans no texto, Plex Mono só em identificadores (PRONAC, CNPJ, datas). Lista é linha com
   divisória de 1 px e sem caixa; caixa só para objeto separado. Raio por papel: 8 px em controles, 4 px em selos, nenhum em listas.
   Grade de 4 px. Alvo de toque de 44 px. Os valores de cor têm teste contra os do produto, para as duas telas não derivarem.
   Nada daqui chama outro host (ADR 0003, condição 4): as fontes saem de /fontes/. */

@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(/fontes/plex-sans-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(/fontes/plex-sans-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(/fontes/plex-sans-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(/fontes/plex-mono-400.woff2) format("woff2")}

:root{color-scheme:light;
--papel:#F3F5F8;--folha:#FFFFFF;--folha2:#E7EBF1;
--tinta:#0F1724;--tinta2:#3B4657;--tinta3:#566174;
--fio:#8D97A6;--fio2:#C5CCD6;
--verba:#1E3A8A;--verba2:#E1E8F5;--sobreverba:#FFFFFF;
--resalva:#92400E;--resalva2:#FBF1E4;
--recusa:#B42318;
--letra:"IBM Plex Sans",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--mono:"IBM Plex Mono",ui-monospace,Consolas,"Courier New",monospace;
--lateral:248px;--raio:8px;--raio-selo:4px}
:root[data-theme=dark]{
--papel:#0E131A;--folha:#151C26;--folha2:#1D2633;
--tinta:#E7EBF1;--tinta2:#AAB4C3;--tinta3:#8591A3;
--fio:#4C586B;--fio2:#2B3544;
--verba:#86A9E6;--verba2:#1A2744;--sobreverba:#0B1220;
--resalva:#F0B27A;--resalva2:#2E2113;
--recusa:#F97066;color-scheme:dark}

*{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--letra);font-size:1rem;line-height:1.5;min-height:100vh}
h1{font-weight:600;font-size:1.375rem;line-height:1.75rem;letter-spacing:-.01em;margin:0 0 4px;text-wrap:balance}
h2{font-weight:600;font-size:1.0625rem;line-height:1.5rem;margin:0 0 4px}
p{margin:0}
a{color:var(--verba);text-underline-offset:.15em}
:focus-visible{outline:2.4px solid var(--verba);outline-offset:2px}
.mono{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:0}
.so-leitor{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pular{position:absolute;left:-999px;top:0;background:var(--folha);color:var(--tinta);padding:12px 16px;border:1px solid var(--fio);border-radius:var(--raio);z-index:30}
.pular:focus{left:8px;top:8px}

/* O azulejo e os ícones: sempre ao lado da palavra, nunca sozinhos */
.az{width:20px;height:20px;flex:none;vertical-align:-4px}
.marca-az{width:24px;height:24px;vertical-align:-6px}
.ic{width:20px;height:20px;flex:none}
.marca{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:1.0625rem;color:var(--tinta);text-decoration:none}

/* ---- Sem entrar (cadastro e entrada): uma coluna, a marca no topo, o cartão como objeto separado */
.fora .topo{max-width:30rem;margin:0 auto;padding:24px 16px 0}
.fora .miolo{max-width:30rem;margin:0 auto;padding:16px 16px 48px}
.cartao{background:var(--folha);border:1px solid var(--fio2);border-radius:var(--raio);padding:24px;display:flex;flex-direction:column;gap:16px}
.sub{color:var(--tinta2)}

/* ---- A casca de quem entrou: barra lateral clara na mesa, barra inferior no celular */
.casca{display:block}
.lateral{display:none}
.topo-movel{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--folha);border-bottom:1px solid var(--fio2)}
.inferior{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;background:var(--folha);border-top:1px solid var(--fio2);
  padding-bottom:env(safe-area-inset-bottom,0px)}
.inferior a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;padding:6px 4px;
  color:var(--tinta2);text-decoration:none;font-size:12px;line-height:16px;font-weight:500}
.inferior a[aria-current=page]{color:var(--verba);font-weight:600}
.com-casca .miolo{padding:16px 16px calc(80px + env(safe-area-inset-bottom,0px));max-width:100%}
.miolo:focus{outline:none}

@media (min-width:960px){
  body{font-size:.875rem;line-height:1.25rem}
  h1{font-size:1.25rem}
  .casca{display:grid;grid-template-columns:var(--lateral) minmax(0,1fr);min-height:100vh}
  .topo-movel,.inferior{display:none}
  .lateral{display:flex;flex-direction:column;gap:16px;position:sticky;top:0;height:100vh;overflow-y:auto;padding:20px 12px;
    background:var(--folha2);border-right:1px solid var(--fio2)}
  .lateral .marca{padding:0 8px}
  .lateral nav{display:flex;flex-direction:column;gap:2px}
  .lateral nav>a{display:flex;align-items:center;gap:12px;min-height:40px;padding:0 8px;border-radius:var(--raio);color:var(--tinta2);
    text-decoration:none;font-weight:500}
  .lateral nav>a:hover{background:var(--papel)}
  .lateral nav>a[aria-current=page]{background:var(--folha);color:var(--verba);font-weight:600}
  .lateral nav>a .rot{flex:1}
  .lateral nav>a .conta{font-variant-numeric:tabular-nums;color:var(--tinta3);font-weight:500}
  .lateral .projetos{list-style:none;margin:0 0 6px 28px;padding:0 0 0 8px;border-left:1px solid var(--fio2)}
  .lateral .projetos a{display:flex;flex-direction:column;justify-content:center;min-height:40px;padding:2px 8px;border-radius:var(--raio);
    color:var(--tinta2);text-decoration:none}
  .lateral .projetos a:hover{background:var(--papel)}
  .lateral .projetos a[aria-current=page]{background:var(--folha);color:var(--verba)}
  .lateral .projetos .nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:16px}
  .lateral .rodape{margin-top:auto;padding:12px 8px 0;border-top:1px solid var(--fio2);display:flex;flex-direction:column;gap:4px}
  .lateral .rodape .botao-texto{align-self:flex-start;padding-left:0}
  .lateral .rodape .versao{color:var(--tinta3);font-size:12px;line-height:16px}
  .lateral .rodape .quem{color:var(--tinta3);font-size:12px;line-height:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .com-casca .miolo{padding:24px 24px 48px;max-width:72rem}
}

/* ---- Formulários */
form{display:flex;flex-direction:column;gap:16px;margin:0}
.campo{display:flex;flex-direction:column;gap:4px}
label{font-weight:500}
input,textarea{font:inherit;color:var(--tinta);background:var(--folha);border:1px solid var(--fio);border-radius:var(--raio);padding:8px 12px;min-height:44px;width:100%}
textarea{min-height:120px}
input[type=checkbox]{width:20px;height:20px;min-height:0;accent-color:var(--verba)}
.com-erro input,.com-erro textarea{border-color:var(--recusa)}
.ajuda{color:var(--tinta3);font-size:13px;line-height:16px}
.erro{color:var(--recusa);font-size:13px;line-height:16px;font-weight:500}
.botao{font:inherit;font-weight:600;cursor:pointer;min-height:44px;padding:8px 20px;border-radius:var(--raio);border:1px solid var(--verba);
  background:var(--verba);color:var(--sobreverba);display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.botao:hover{filter:brightness(1.08)}
.botao.secundario{background:transparent;color:var(--verba)}
.botao.perigo{background:transparent;color:var(--recusa);border-color:var(--recusa)}
.botao-texto{font:inherit;color:var(--verba);background:none;border:0;padding:0 4px;min-height:44px;cursor:pointer;text-decoration:underline;text-underline-offset:.15em}
td .botao-texto{min-height:32px}
.rodape-form{color:var(--tinta2)}
.rodape-form a{display:inline-block;padding:4px 0}
.acoes{display:flex;flex-wrap:wrap;gap:12px}

/* ---- Avisos e selos. Sem faixa colorida em caixa arredondada; o selo tem 4 px de raio e sempre uma palavra */
.avisos{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.aviso{background:var(--resalva2);color:var(--resalva);border:1px solid var(--fio2);border-radius:var(--raio);padding:12px 16px;font-weight:500}
.aviso.ok,.aviso.success,.aviso.info{background:var(--verba2);color:var(--verba)}
.aviso.warning{background:var(--resalva2);color:var(--resalva)}
.aviso.error{background:var(--resalva2);color:var(--recusa)}
.selo{display:inline-block;font-size:12px;line-height:16px;font-weight:500;padding:2px 8px;border-radius:var(--raio-selo);background:var(--folha2);color:var(--tinta2);white-space:nowrap}
.selo.ok{background:var(--verba2);color:var(--verba)}
.selo.neutro{background:var(--resalva2);color:var(--resalva)}

/* ---- Cabeçalho de página, migalha, metadados */
.migalha{margin-bottom:8px;color:var(--tinta2)}
.meta{color:var(--tinta2)}
.espaco{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 16px}
.espaco-nome{font-weight:600}
.miolo>.sub,.miolo>.meta{margin-bottom:16px}
.nota{color:var(--tinta3)}
.apagado{color:var(--tinta3);font-style:italic}
.etapas{color:var(--tinta2);font-size:13px;line-height:16px}
.dados-do-projeto{display:flex;flex-wrap:wrap;gap:8px 32px;margin:8px 0 16px}
.dados-do-projeto b{color:var(--tinta3);font-weight:500;margin-right:4px}
section[aria-labelledby],section.cliente{margin-top:24px}

/* ---- Lista: linha com divisória, sem caixa. Cabeçalho de 32 px, linha de 40 px na mesa */
.tabela-rolavel{overflow-x:auto;margin-top:8px}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--fio2);vertical-align:middle}
thead th{height:32px;padding-top:0;padding-bottom:0;font-size:12px;line-height:16px;font-weight:500;color:var(--tinta3);
  border-bottom:1px solid var(--fio);white-space:nowrap}
tbody th{font-weight:500}
tbody tr{min-height:40px}
td input[type=checkbox]{vertical-align:middle}
table.leads td,table.leads th{vertical-align:top}
table.leads td.canal{min-width:15rem;max-width:24rem}
a.fonte{font-size:12px;margin-left:4px}
.email{font-family:var(--mono);font-size:13px;word-break:break-all}
.andamento{display:inline-flex;align-items:center;gap:8px}
.andamento b{font-weight:600}
.andamento .etapas{white-space:nowrap}
table.leads td.mono{white-space:nowrap}            /* "R$" e o valor nunca se separam */
.andamento .nenhum{color:var(--tinta3);font-weight:400}

/* ---- Remover: um objeto separado, com a palavra dita */
details.perigo{border:1px solid var(--fio2);border-radius:var(--raio);padding:4px 16px;background:var(--folha)}
details.perigo summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:500;color:var(--recusa)}
details.perigo[open] summary{margin-bottom:8px}
details.perigo p{margin-bottom:12px}

dl.dados{display:grid;grid-template-columns:max-content 1fr;gap:8px 24px;margin:0}
dl.dados dt{color:var(--tinta3)}
dl.dados dd{margin:0}
.espacos{list-style:none;margin:0;padding:0}
.espacos li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:40px;padding:8px 0;border-bottom:1px solid var(--fio2)}

@media (prefers-reduced-motion:no-preference){.botao{transition:filter .12s}}

/* ---- No celular a tabela vira lista empilhada: cada linha é um bloco, e o rótulo de cada coluna vem acima do valor.
   Seis colunas rolando de lado não são uma tela de celular. A tabela de verdade volta na mesa (960 px). */
@media (max-width:959px){
  table.empilha thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.empilha,table.empilha tbody{display:block}
  table.empilha tr{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:6px;padding:12px 0;border-bottom:1px solid var(--fio2)}
  table.empilha tr>th,table.empilha tr>td{display:block;border:0;padding:0;min-width:0}
  table.empilha tr>th{grid-column:1}
  table.empilha tr>td{grid-column:2}
  table.empilha td[data-label]::before{content:attr(data-label);display:block;font-family:var(--letra);font-size:12px;line-height:16px;color:var(--tinta3)}
  /* A lista de leads: o nome e o caminho ocupam a largura toda; veredito, valor e ano ficam lado a lado numa faixa só */
  table.leads tr{grid-template-columns:auto repeat(3,minmax(0,1fr))}
  table.leads tr>td{grid-column:auto}
  table.leads tr>td[data-label=Empresa],table.leads tr>td.canal{grid-column:2 / -1}
  table.leads tr>td[data-label=Combina]{grid-column:2}
  table.leads tr>td[data-label="Costuma pagar"]{grid-column:3}
  table.leads tr>td[data-label="Último aporte"]{grid-column:4}
  table.leads td[data-label=Empresa]::before{display:none}
  table.leads td.canal{min-width:0;max-width:none}
  table.leads td.mono{white-space:normal}
}

/* ---- Pedidos (story 4.29): abas por momento, o que está parado, e o contador de dias */
.abas{display:flex;flex-wrap:wrap;gap:4px;margin:16px 0 8px}
.abas a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:var(--raio);color:var(--tinta2);text-decoration:none;font-weight:500}
.abas a:hover{background:var(--folha2)}
.abas a[aria-current=page]{background:var(--verba2);color:var(--verba);font-weight:600}
.abas .n{font-variant-numeric:tabular-nums;color:var(--tinta3);font-weight:500}
.abas a[aria-current=page] .n{color:var(--verba)}
.lembretes{list-style:none;margin:8px 0 0;padding:0}
.lembretes li{display:flex;align-items:center;gap:12px;min-height:40px;padding:8px 0;border-bottom:1px solid var(--fio2)}
.lembretes .quem{flex:1;min-width:0}
.dias{display:inline-block;font-size:12px;line-height:16px;font-weight:600;padding:2px 8px;border-radius:var(--raio-selo);background:var(--resalva2);color:var(--resalva);white-space:nowrap}
table.pedidos td,table.pedidos th{vertical-align:top}
@media (max-width:959px){
  table.pedidos tr{grid-template-columns:auto repeat(2,minmax(0,1fr))}
  table.pedidos tr>td{grid-column:2 / -1}
  table.pedidos tr>td[data-label=Pedido]{grid-column:2}
  table.pedidos tr>td[data-label=Atualizado]{grid-column:3}
  table.pedidos td[data-label=Momento]::before{display:none}
}
@media (max-width:959px){
  .abas{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}      /* as abas rolam numa linha só, em vez de ocupar três */
  .abas a{flex:none;white-space:nowrap}
}

/* ---- Gravar pedidos (story 4.30) */
.andamento.grande b{font-size:1.0625rem}
.andamento.grande .az{width:28px;height:28px}
form.em-linha{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:12px}
select{font:inherit;color:var(--tinta);background:var(--folha);border:1px solid var(--fio);border-radius:var(--raio);padding:8px 12px;min-height:44px;width:100%;max-width:28rem}
form.em-linha select{width:auto;min-width:14rem}
a.andamento{text-decoration:none;color:inherit}
a.andamento:hover b{text-decoration:underline}
table.leads td.acao{white-space:nowrap}
@media (max-width:959px){
  table.leads tr>td.acao{grid-column:2 / -1}
}

/* ---- Conferência visual (story 4.32) */
td.canal .apagado,td.canal .etapas{font-size:13px;line-height:18px}
td.acao .botao-texto{padding:0 4px;min-height:44px;white-space:nowrap}
td.acao form{display:flex;justify-content:flex-start;margin:0}
.so-aprovado{display:none}                                       /* o valor aprovado só faz sentido para quem aprovou */
form:has(#resposta option[value=aprovado]:checked) .so-aprovado{display:block}
/* Alvo de toque de 44 px no celular. Link solto dentro de texto cresce a área clicável sem mexer na linha: padding e margem negativa se anulam. */
@media (max-width:959px),(pointer:coarse){
  .abas a,.filtros-empresas a,.filtros-empresas input{min-height:44px}
  .marca{min-height:44px}
  .topo-movel{padding-block:4px}
  .migalha a,p a,ul.evidencias a,.itens-ficha a,.acao-empresa a,table.empilha a,dl.dados a,.lembretes a,a.fonte{display:inline-block;padding-block:15px;margin-block:-15px}
}

/* ---- Ficha do patrocinador (story 4.33) */
dl.numeros{display:flex;flex-wrap:wrap;gap:16px 40px;margin:24px 0}
dl.numeros>div{min-width:0}
dl.numeros dt{font-size:12px;line-height:16px;color:var(--tinta3)}
dl.numeros dd{margin:2px 0 0;font-size:20px;line-height:28px;font-weight:600}
.bloco{padding:16px 0;border-top:1px solid var(--fio2)}
.bloco h2{margin:0 0 4px}
.bloco .veredito{margin:0 0 8px;font-size:1.125rem;line-height:1.5rem;font-weight:600}
ul.evidencias{margin:0;padding:0;list-style:none;max-width:68ch}
ul.evidencias li{margin:0 0 6px}
.painel{display:flex;flex-wrap:wrap;gap:2px;margin:8px 0;max-width:52rem}
.painel i{display:block;width:10px;height:10px;border:1px solid var(--fio);border-radius:100% 0 0 0}
.painel i:nth-child(3n+2){border-radius:0 100% 0 0}
.painel i:nth-child(5n+3){border-radius:0 0 100% 0}
.painel i:nth-child(7n+5){border-radius:0 0 0 100%}
.painel i.cheio{background:var(--verba);border-color:var(--verba)}
pre.rascunho{white-space:pre-wrap;font:inherit;font-size:14px;line-height:1.5;margin:8px 0 0;max-width:68ch;overflow-wrap:anywhere}

/* ---- Hoje (story 4.34) */
.grupo{max-width:720px;display:flex;justify-content:space-between;align-items:baseline;margin:32px 0 0;padding:0 0 6px;font-size:12.5px;line-height:16px;font-weight:500;color:var(--tinta3);border-bottom:1px solid var(--fio2)}
.itens{list-style:none;margin:0 0 16px;padding:0;max-width:720px}
.itens li{border-bottom:1px solid var(--fio2)}
.itens a.corpo{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:0 12px;align-items:center;min-height:62px;padding:8px 0;color:var(--tinta);text-decoration:none}
.itens a.corpo:hover .quem{text-decoration:underline}
.itens .txt{min-width:0}
.itens .quem{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.itens .como{display:block;font-size:13px;line-height:18px;color:var(--tinta3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.itens .como b{font-weight:500;color:var(--tinta2)}
.dias.prazo{background:var(--verba2);color:var(--verba)}
.vazio-hoje{margin:32px 0 0;padding:24px 0;border-top:1px solid var(--fio2);border-bottom:1px solid var(--fio2);max-width:720px}
.vazio-hoje p{margin:0 0 4px}
.inferior a{position:relative}
.inferior .pip{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--resalva);color:var(--folha);font-size:11px;line-height:18px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums}
.lateral nav>a .conta.atencao{color:var(--resalva);font-weight:600}

/* ---- Empresas (story 4.35) */
.mesa-empresas{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
@media (min-width:1100px){.mesa-empresas{grid-template-columns:minmax(0,1fr) 360px}}
.filtros-empresas{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.filtros-empresas a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--fio);border-radius:var(--raio);color:var(--tinta2);text-decoration:none;font-size:13px}
.filtros-empresas a[aria-current=true]{border-color:var(--tinta);color:var(--tinta);font-weight:600}
.filtros-empresas form{margin:0 0 0 auto}
.filtros-empresas input{width:200px;max-width:100%;min-height:36px;padding:4px 12px}
ul.lista-empresas{list-style:none;margin:0;padding:0;border-top:1px solid var(--fio2)}
.lista-empresas li{border-bottom:1px solid var(--fio2)}
.lista-empresas a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 12px;align-items:center;min-height:56px;padding:8px;color:var(--tinta);text-decoration:none}
.lista-empresas a:hover{background:var(--folha2)}
.lista-empresas a[aria-current]{background:var(--verba2)}
.lista-empresas .txt{min-width:0}
.lista-empresas .quem{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lista-empresas .canal{display:block;font-size:13px;line-height:18px;color:var(--tinta3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lista-empresas .canal .ok{color:var(--verba);font-weight:500}
.lista-empresas .qtd{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.ficha-empresa h2{font-size:18px;line-height:24px;margin:0}
.ficha-empresa h3{font-size:13px;line-height:16px;font-weight:600;color:var(--tinta2);margin:20px 0 4px}
.ficha-empresa .quem-e{font-size:13px;color:var(--tinta3);margin:2px 0 8px}
@media (min-width:1100px){.ficha-empresa{position:sticky;top:16px;padding-left:24px;border-left:1px solid var(--fio2)}}
.dl-empresa{margin:0}
.dl-empresa>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;padding:9px 0;border-bottom:1px solid var(--fio2);font-size:14px}
.dl-empresa dt{color:var(--tinta3)}
.dl-empresa dd{margin:0;min-width:0;overflow-wrap:anywhere}
.dl-empresa small{display:block;color:var(--tinta3)}
.barras-meses{display:grid;gap:5px;margin-top:2px}
.barras-meses>span{display:grid;grid-template-columns:36px minmax(0,1fr) 40px;gap:8px;align-items:center;font-size:12.5px}
.barras-meses i{display:block;height:6px;border-radius:1px;background:var(--verba)}
.itens-ficha{list-style:none;margin:0;padding:0}
.itens-ficha li{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--fio2);font-size:14px;flex-wrap:wrap}
.acao-empresa{margin-top:20px;display:grid;gap:8px}
.acao-empresa form{margin:0}
.acao-empresa .botao{width:100%}
.voltar-empresas{margin:0 0 8px}
@media (max-width:1099px){.com-ficha .coluna-lista{display:none}}
@media (min-width:1100px){.voltar-empresas{display:none}}

/* O alvo de toque vem DEPOIS das regras de Empresas: mesma especificidade, vale a última. */
@media (max-width:959px),(pointer:coarse){
  .filtros-empresas a,.filtros-empresas input{min-height:44px}
}

/* ---- Achar o projeto (story 4.37) */
form.busca-projeto{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;align-items:center;max-width:44rem;margin:16px 0}
form.busca-projeto input{flex:1 1 16rem;min-width:0}
ol.achados{list-style:none;margin:0;padding:0;max-width:52rem;border-top:1px solid var(--fio2)}
.achados li{display:flex;gap:16px;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--fio2)}
.achados .corpo{min-width:0}
.achados p{margin:0 0 2px}
.achados .nome{font-weight:600}
.achados .acao form{margin:0}
@media (max-width:959px){.achados li{flex-direction:column;align-items:stretch}.achados .acao .botao{width:100%}}

/* ---- Filtros da lista de um projeto (story 4.38) */
details.filtros-mais{margin:8px 0 16px}
details.filtros-mais summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:500;color:var(--tinta2)}
form.filtros{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;margin:4px 0 0}
form.filtros .campo{min-width:0}
form.filtros input[type=text]{width:9rem}
form.filtros select{min-width:8rem;width:auto}
form.filtros .acoes{display:flex;gap:12px;align-items:center}

/* ---- Seus dados: apagar com pergunta (story 4.39) */
.botao.perigo{background:var(--recusa);border-color:var(--recusa);color:var(--folha)}
.apagar-pedido{margin-top:32px}
.apagar-pedido a{color:var(--recusa)}

/* ---- Seus dados: apagar com pergunta (story 4.39) */
.botao.perigo{background:var(--recusa);border-color:var(--recusa);color:var(--folha)}
.apagar-pedido{margin-top:32px}
.apagar-pedido a{color:var(--recusa)}

/* ---- Privacidade e exclusão de conta (story 4.40) */
.texto-longo{max-width:68ch}
.texto-longo h2{margin:28px 0 6px}
.texto-longo p,.texto-longo li{line-height:1.55}
.cartao .acoes{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:16px}

/* ---- Contexto do projeto (story 4.41) */
details.contexto{margin:32px 0 0;max-width:68ch}
details.contexto summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600}
dl.numeros small{font-size:13px;font-weight:400;color:var(--tinta3)}

/* ---- Passe visual (story 4.44): cancelar e limpar também têm 44 px no celular. Depois das regras de .acoes: vale a última. */
@media (max-width:959px),(pointer:coarse){
  .acoes a,form.filtros .acoes a{display:inline-flex;align-items:center;min-height:44px}
}

/* ---- Passe visual (story 4.44) */
dl.numeros dd .mono{font-size:inherit;line-height:inherit}                 /* o número do resumo tem o tamanho do valor, não os 13 px do identificador */
dl.numeros dd small{display:inline}
.aviso + h2,.nota + h2,.dados-do-projeto ~ h2{margin-top:28px}
td.acao form{align-items:flex-start}                                        /* a ação fica à esquerda: o botão não estica na coluna */
td.acao .botao-texto{width:auto;text-align:left}
details.filtros-mais summary,details.contexto summary{list-style:none}
details.filtros-mais summary::-webkit-details-marker,details.contexto summary::-webkit-details-marker{display:none}
details.filtros-mais summary::before,details.contexto summary::before{content:"";flex:none;width:7px;height:7px;margin-right:12px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .12s}
details.filtros-mais[open] > summary::before,details.contexto[open] > summary::before{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){details.filtros-mais summary::before,details.contexto summary::before{transition:none}}
form.filtros ~ h2{margin-top:32px}
td.canal a{font-size:14px}

/* ---- Registrar resposta em 3 toques: a folha inferior (story 4.46) */
.itens .registrar{display:inline-flex;align-items:center;min-height:44px;margin:0 0 8px 32px;font-size:14px;font-weight:500}
dialog.folha{position:fixed;inset:auto 0 0 0;margin:0 auto;width:min(100%,34rem);max-height:92vh;overflow:auto;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));
  border:0;border-top:1px solid var(--fio);border-radius:8px 8px 0 0;background:var(--folha);color:var(--tinta)}
dialog.folha::backdrop{background:rgba(15,23,36,.45)}
dialog.folha h2{margin:0 0 4px;font-size:20px;line-height:28px}
dialog.folha h2:focus{outline:none}
@media (min-width:960px){dialog.folha{inset:50% auto auto 50%;transform:translate(-50%,-50%);border:1px solid var(--fio);border-radius:8px}}
.folha-form{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.folha-form fieldset{border:0;margin:0;padding:0;min-width:0}
.folha-form legend{padding:0;margin:0 0 4px;font-weight:600}
label.opcao{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 4px;border-bottom:1px solid var(--fio2);cursor:pointer}
label.opcao input{width:20px;height:20px;flex:none;margin:0;accent-color:var(--verba)}
.folha-form [hidden]{display:none}
.folha-form .acoes{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.folha-form .acoes{position:sticky;bottom:calc(-16px - env(safe-area-inset-bottom,0px));margin:0 -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--folha);border-top:1px solid var(--fio2)}

/* ---- A lista por exceção: a linha inteira leva à empresa (story 4.47). O link do nome é esticado por cima da linha; os outros links
   (Salic, canal, contato) ficam acima dele e continuam clicáveis. */
table.leads tbody tr{position:relative}
table.leads tbody tr:hover{background:var(--folha2)}
table.leads a.empresa::after{content:"";position:absolute;inset:0}
table.leads a.empresa:focus-visible{outline:none}
table.leads a.empresa:focus-visible::after{outline:2px solid var(--verba);outline-offset:-2px}
table.leads td a:not(.empresa){position:relative;z-index:1}

/* Título que é link (o nome do cliente na carteira) também chega a 44 px no celular, sem empurrar a linha. */
@media (max-width:959px),(pointer:coarse){
  h1 a,h2 a{display:inline-block;padding-block:11px;margin-block:-11px}
}

/* ---- A busca no topo e a ação principal na barra fixa (story 4.49) */
.barra-topo{display:none}
.buscar-movel{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--tinta2)}
.buscar-movel .ic{width:22px;height:22px}
@media (min-width:960px){
  .buscar-movel{display:none}
  .barra-topo{display:block;padding:12px 24px 0;max-width:72rem}
  .busca-topo{position:relative;max-width:30rem}
  .busca-topo .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--tinta3);pointer-events:none}
  .busca-topo input{width:100%;min-height:40px;padding-left:38px}
}
/* "Uma ação principal por tela, numa barra fixa embaixo" (Davi Design, v2). No celular o MESMO botão sobe para uma barra acima da navegação
   (não há segundo botão); na mesa fica onde está. A página reserva espaço embaixo para a barra não cobrir o último item. */
.acao-principal{margin:16px 0}
@media (max-width:959px){
  .acao-principal{position:fixed;left:0;right:0;bottom:calc(57px + env(safe-area-inset-bottom,0px));z-index:19;margin:0;padding:8px 16px;background:var(--folha);border-top:1px solid var(--fio2)}
  .acao-principal .botao{width:100%}
  body.com-casca:has(.acao-principal) .miolo{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
}

/* ---- Atalhos de teclado (story 4.50). A ajuda só existe na mesa: no celular não há teclado. */
.atalhos{display:none}
@media (min-width:960px){
  .atalhos{display:block;margin:0 0 8px;font-size:13px;color:var(--tinta2)}
  .atalhos summary{cursor:pointer;min-height:32px;display:flex;align-items:center}
  .atalhos dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:4px 0 8px}
  .atalhos dd{margin:0}
  .atalhos kbd{font:12px/16px var(--mono);padding:1px 6px;border:1px solid var(--fio);border-radius:4px;background:var(--folha)}
  .opcao-atalhos{display:flex;gap:8px;align-items:center;min-height:32px}
}
:is(.itens li,.lista-empresas li,table.pedidos tr)[data-item]:focus-within{background:var(--verba2)}

/* ---- Anotar várias (story 3.7): a caixa de marcar não herda a regra dos campos de texto (largura toda, preenchimento); o alvo de toque
   de 44 px é o rótulo em volta dela. Fica no fim do arquivo porque desfaz a regra geral de input (a ordem manda). */
td.marcar,th.marcar{width:1%;white-space:nowrap;padding-left:0;padding-right:0}
.marcar-alvo{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;cursor:pointer}
.marcar-alvo input[type=checkbox]{width:20px;height:20px;min-height:0;padding:0;margin:0;accent-color:var(--verba)}
.anotar-varias{margin-top:12px}
.marcar-texto{display:none}
/* No celular a caixa vai para o fim do bloco da empresa, na largura toda e com a palavra ao lado: na coluna da posição ela empurrava
   as colunas de valor e desalinhava as linhas sem caixa (conferido na tela, 390 px). */
@media (max-width:959px){
  table.leads tr>td.marcar{grid-column:2 / -1;order:99}
  table.leads td.marcar::before{display:none}
  .marcar-alvo{justify-content:flex-start;gap:8px}
  .marcar-texto{display:inline;color:var(--tinta2)}
}

/* ---- Aportou no assunto (story 4.58): a linha diz o porquê do aviso, então quebra em vez de cortar com reticências (o nome do segmento
   do Salic é longo e empurrava o porquê para fora; conferido na tela, 06/10/2026). A data do recibo é fato, não urgência: selo neutro. */
.itens .como.quebra{white-space:normal;overflow:visible}
.dias.data{background:var(--folha2);color:var(--tinta2)}