/* t62: Oportunidades. O atributo hidden é tratado UMA vez, na folha base:
   remendo por seletor aqui esconderia o defeito em vez de resolvê-lo.
 O que é geral (métricas, gaveta, tabela, paginação,
   chips) vem de overview.css; aqui fica só o que é deste módulo.

   ⚠️ A altura útil: `.area-resultados` recebe a sobra da janela e o CORPO da
   tabela é quem rola. `flex:1 1 auto` teria base no conteúdo e a região não
   encolheria; por isso é `1 1 0`. A paginação fica FORA da região rolável,
   senão aumentar o tamanho da página alonga o documento externo sem fim. */
/* A sobra da janela é calculada UMA vez, e só sobre a moldura do sistema, que é
   estável: cabeçalho de 76px mais os 38px de respiro em cima e embaixo do
   #content. Título, indicadores e filtros continuam com altura natural, e quem
   recebe o resto é a área de resultados. Subtrair a altura dos blocos internos
   num calc() seria chutar um número que muda a cada texto novo. */
.oportunidades-pagina{display:flex;flex-direction:column;gap:12px;min-width:0;
 /* ⚠️ `height`, e não `min-height`. Com min-height a caixa cresce com o
    conteúdo, `flex:1 1 0` no filho não tem teto nenhum, e a tabela volta a
    empurrar a página: medido em 1920, o documento ia de 2990px para 3668px só
    ao trocar o tamanho da página de 25 para 100. Com altura fechada, quem
    cresce é a REGIÃO ROLÁVEL de dentro. O piso evita que numa janela muito
    baixa a área de resultados vire uma faixa inútil. */
 /* O desconto NÃO é fixo. O shell muda de altura conforme as faixas de aviso
    (segundo fator pendente, configuração a revisar) e conforme o rodapé do
    ambiente, então a tela mede o próprio topo e escreve
    `--altura-oportunidades`. O valor no `calc` é só a rede de segurança para o
    primeiro quadro, antes da medição. */
 height:var(--altura-oportunidades,calc(100dvh - 190px));min-height:420px}
.oportunidades-pagina>header,
.oportunidades-pagina>.oportunidades-metricas,
.oportunidades-pagina>.filtros-oportunidades{flex:0 0 auto}
.oportunidades-topo{margin-bottom:0;align-items:flex-start}
.oportunidades-topo .saudacao{font-size:28px;margin-bottom:4px}
.oportunidades-topo .eyebrow{margin-bottom:6px}
.oportunidades-topo p.muted{margin-bottom:0}
.oportunidades-topo .topo-acoes{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Cinco cartões, como a referência. Em vez de "+20% vs. mês anterior" sem
   fonte, a terceira linha diz o universo do número. */
.oportunidades-metricas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:0}
.oportunidades-metricas .metrica{padding:14px 18px;display:flex;flex-direction:column;gap:4px;min-width:0;
 /* `minmax(0,1fr)` deixa a COLUNA encolher, mas o texto dentro dela continua
    com largura mínima própria e pinta para fora. Em 1440 isso fazia a página
    andar 9px de lado, com o cartão de honorários. */
 overflow:hidden}
.oportunidades-metricas .metrica-rotulo,
.oportunidades-metricas .metrica-valor,
.oportunidades-metricas .metrica-nota{overflow-wrap:anywhere;min-width:0}
.oportunidades-metricas .metrica-valor{font-size:26px;letter-spacing:-.8px;line-height:1.1}
.oportunidades-metricas .metrica-valor-curto{font-size:19px;letter-spacing:-.4px}
.oportunidades-metricas .metrica-nota{font-size:11px;color:var(--muted);margin:0}
.oportunidades-metricas [role=button]{cursor:pointer}
.metrica-sem-base .metrica-valor{color:var(--muted)}

.filtros-oportunidades{margin:0;padding:14px 18px}
.filtros-linha{display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.filtros-linha label{margin:0;flex:0 1 190px;min-width:0}
.filtros-linha .busca-campo{flex:1 1 280px}
.filtros-linha input,.filtros-linha select{margin-top:6px;min-height:38px;min-width:0;max-width:100%}
.filtros-linha .secondary{min-height:38px}
.filtros-extra{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.filtro-arquivadas{flex:0 0 auto;align-self:center;margin-top:18px!important}

/* ⚠️ `flex:1 1 0`, não `1 1 auto`: com base no conteúdo a região não encolhe e
   a tabela volta a empurrar a página. O piso evita que, numa janela muito
   baixa, a área de resultados suma atrás do cabeçalho. */
/* O piso é 420px, e não 260px. Medido em 1440x900: com 260 sobravam 103px de
   corpo de tabela, ou seja UMA linha visível, e a tela ficava inútil sem rolar.
   Com 420 o documento rola um pouco mais, e ainda assim menos que a Visão
   geral rola no mesmo viewport. Tabela usável vale mais que página imóvel. */
.area-resultados{display:flex;flex-direction:column;min-height:420px;min-width:0;flex:1 1 0;margin:0;padding:0;
 /* `contain:layout paint` fecha a conta: com dez colunas, a tabela mede 1.673px
    em 1440 e o excedente vazava 9px para o documento mesmo com overflow:hidden
    no pai. O contêiner passa a ser o limite de pintura, e quem rola de lado é a
    região da tabela, não a página. */
 overflow:hidden;position:relative;contain:paint}
.oportunidades-visoes{display:flex;align-items:center;gap:8px;padding:10px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.visao-botao{border:1px solid transparent;background:none;border-radius:6px;padding:8px 14px;font-size:12px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.visao-botao.ativa{color:var(--accent);border-color:#f1dcc8;background:var(--accent-soft)}
.visao-total{margin-left:auto;font-size:12px;color:var(--muted)}
.ordenar-inline{display:flex;align-items:center;gap:8px;margin:0;font-size:12px}
.ordenar-inline select{width:auto;margin:0;min-height:34px}
/* ⚠️ `position:relative` NÃO é enfeite aqui, é o que faz o recorte valer.
   `overflow` só recorta descendente ABSOLUTO quando o recortador é o bloco
   container dele, e um recortador `static` não é. O rótulo `.visually-hidden`
   do checkbox de cada linha é `position:absolute`: com o corpo estático, os 25
   rótulos escapavam do recorte, iam parar na altura natural da linha e
   esticavam o DOCUMENTO. Medido em 1920: a página rolava 1.910px com o corpo
   da tabela ocupando 254px, e `document.body.scrollHeight` continuava dizendo
   1.092, o que faz esse defeito passar despercebido em qualquer medição que
   olhe só o body. */
.resultados-corpo{flex:1 1 0;min-height:0;overflow:auto;position:relative}
.area-resultados>.paginacao{border-top:1px solid var(--line);margin:0;padding:12px 20px;flex:0 0 auto}
.tabela-rolagem{min-inline-size:0}
.tabela-oportunidades{width:100%}
.tabela-oportunidades thead th{position:sticky;top:0;background:#fff;z-index:2}
/* DENSIDADE E LARGURA. Sem `table-layout:fixed` o navegador dimensiona pelo
   conteúdo: "Empresa sintética 4" quebrava em três linhas, a linha ia a 98px e
   em 263px de corpo cabiam duas linhas e meia. A referência mostra oito. Com
   largura fixa por coluna e reticência no secundário, a linha fica perto de
   56px e as dez colunas cabem em 1600px sem rolagem lateral. */
.tabela-oportunidades{table-layout:fixed;width:100%}
.tabela-oportunidades td{padding:7px 10px;vertical-align:middle;overflow:hidden}
.tabela-oportunidades th{padding:11px 10px;white-space:nowrap}
.tabela-oportunidades td small{margin-top:2px;line-height:1.35}
/* ⚠️ TUDO EM PORCENTAGEM, somando 100. Misturar coluna em px com coluna em
   porcentagem sob `table-layout:fixed` estoura a largura: medido em 1440, a
   coluna de ações ficou com 12px e o botão saiu da tabela. */
.tabela-oportunidades th:nth-child(1),.tabela-oportunidades td:nth-child(1){width:3%}
.tabela-oportunidades th:nth-child(2),.tabela-oportunidades td:nth-child(2){width:20%}
.tabela-oportunidades th:nth-child(3),.tabela-oportunidades td:nth-child(3){width:10%}
.tabela-oportunidades th:nth-child(4),.tabela-oportunidades td:nth-child(4){width:10%}
.tabela-oportunidades th:nth-child(5),.tabela-oportunidades td:nth-child(5){width:9%}
.tabela-oportunidades th:nth-child(6),.tabela-oportunidades td:nth-child(6){width:14%}
.tabela-oportunidades th:nth-child(7),.tabela-oportunidades td:nth-child(7){width:9%}
.tabela-oportunidades th:nth-child(8),.tabela-oportunidades td:nth-child(8){width:9%}
.tabela-oportunidades th:nth-child(9),.tabela-oportunidades td:nth-child(9){width:11%}
.tabela-oportunidades th:nth-child(10),.tabela-oportunidades td:nth-child(10){width:5%}
/* A compacta tem oito colunas: fase e responsável herdam o espaço da empresa
   e da última interação, que foram para a prévia. */
.tabela-compacta th:nth-child(1),.tabela-compacta td:nth-child(1){width:3%}
.tabela-compacta th:nth-child(2),.tabela-compacta td:nth-child(2){width:27%}
.tabela-compacta th:nth-child(3),.tabela-compacta td:nth-child(3){width:13%}
.tabela-compacta th:nth-child(4),.tabela-compacta td:nth-child(4){width:14%}
.tabela-compacta th:nth-child(5),.tabela-compacta td:nth-child(5){width:18%}
.tabela-compacta th:nth-child(6),.tabela-compacta td:nth-child(6){width:11%}
.tabela-compacta th:nth-child(7),.tabela-compacta td:nth-child(7){width:6%}
.tabela-compacta th:nth-child(8),.tabela-compacta td:nth-child(8){width:8%}
/* Texto secundário some em reticência em vez de empurrar a linha para baixo.
   O conteúdo inteiro continua no title e na prévia. */
.tabela-oportunidades td>*,
.tabela-oportunidades td small,
.tabela-oportunidades .link-forte{max-width:100%}
/* ⚠️ NUNCA `display:block` num `<td>`: isso tira a célula do layout de tabela
   e a linha inteira se desmonta. Medido: a coluna Empresa virou um bloco solto
   e as colunas da direita saíram da área. O corte vai nos FILHOS. */
.celula-oportunidade .link-forte,.celula-oportunidade small,
.celula-empresa>span,.celula-empresa small,
.celula-retorno small,.celula-retorno b,
.interacao small,.interacao b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabela-oportunidades td:nth-child(5){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabela-oportunidades .etiquetas{margin-top:3px;flex-wrap:nowrap;overflow:hidden}
.tabela-oportunidades .etiqueta{padding:1px 7px;white-space:nowrap}
.tabela-oportunidades .marca{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:inline-block;vertical-align:middle}
.tabela-oportunidades .numero-celula{text-align:right;white-space:nowrap}
.tabela-oportunidades .celula-selecao{width:38px;padding-left:20px}
.tabela-oportunidades .celula-selecao input{width:16px;height:16px;margin:0;accent-color:var(--accent)}
.tabela-oportunidades .celula-oportunidade{min-width:220px}
/* ⚠️ A coluna de ações FICA PRESA À DIREITA. Sem isso, em 1366 a tabela mede
   1.142px numa região de 1.038 e o botão "Prévia" simplesmente não alcança a
   janela: nem o ponteiro chega nele. Grudar a última coluna resolve para o
   usuário e para a prova, e é o padrão de tabela larga. */
.tabela-oportunidades .acoes-celula{white-space:nowrap;padding-right:20px;
 position:sticky;right:0;background:var(--surface);box-shadow:-10px 0 12px -10px #1c1d1b26}
.tabela-oportunidades thead .acoes-celula,
.tabela-oportunidades th:last-child{position:sticky;right:0;background:#fff;z-index:3}
.linha-marcada .acoes-celula{background:var(--accent-soft)}
.linha-marcada{background:var(--accent-soft)}
.celula-retorno b{display:block;font-size:12px}
.retorno-atrasado b,.cartao-retorno.retorno-atrasado{color:#b64e38}
.retorno-hoje b,.cartao-retorno.retorno-hoje{color:var(--accent-ink)}
.retorno-ausente,.retorno-ausente b{color:var(--muted)}
.interacao b{display:block;font-size:12px}

.etiquetas{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.etiqueta{background:#f1f2ec;color:#5f665d;border-radius:20px;padding:3px 9px;font-size:10px}
.etiqueta-mais{background:none;border:1px dashed var(--line)}
.fase-marca{background:#eef1f6;color:#54637c}
.fase-nao-mapeada{background:#fdf0e2;color:#9a6a24}
.resultado-open{background:#e9f0e7;color:#4e6b48}
.resultado-won{background:#e6f1ea;color:#2f6b45;font-weight:600}
.resultado-lost{background:#f6eceb;color:#9c5142}

.barra-selecao{display:flex;align-items:center;gap:14px;padding:12px 20px;background:var(--accent-soft);border-bottom:1px solid #f1dcc8;font-size:12px;flex-wrap:wrap}

/* Gaveta: acoplada quando ainda sobra tabela, sobreposta quando não sobra. */
.gaveta-oportunidade{background:#fff;border-left:1px solid var(--line);padding:22px;overflow:auto;min-width:0}
.oportunidades-pagina.com-gaveta{display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-rows:auto auto auto minmax(0,1fr);gap:16px;align-items:start}
.oportunidades-pagina.com-gaveta>header,
.oportunidades-pagina.com-gaveta>.oportunidades-metricas,
.oportunidades-pagina.com-gaveta>.filtros-oportunidades{grid-column:1/-1}
.oportunidades-pagina.com-gaveta>.area-resultados{grid-column:1;grid-row:4}
.oportunidades-pagina.com-gaveta>.gaveta-oportunidade{grid-column:2;grid-row:4;position:sticky;top:16px;max-height:calc(100vh - 120px);border:1px solid var(--line);border-radius:9px}
.gaveta-oportunidade.sobreposta{position:fixed;inset:0 0 0 auto;width:min(420px,100vw);z-index:60;box-shadow:-18px 0 44px #1c1d1b1f}
.previa-topo{align-items:flex-start;gap:10px}
.previa-acoes-topo{display:flex;gap:6px;align-items:center;margin-left:auto}
.previa-tipo{font-size:11px;color:var(--muted);margin:0 0 12px}
.previa-contatos .canal{display:flex;align-items:center;gap:6px}
.previa-destaque{border:1px solid var(--line);border-radius:8px;padding:14px;margin:12px 0;background:#fafbf8}
.previa-destaque.retorno-atrasado{border-color:#e7c9c1;background:#fdf4f2}
.previa-destaque.retorno-hoje{border-color:#f1dcc8;background:var(--accent-soft)}
.previa-destaque strong{display:block;font-size:15px;margin:4px 0}
.previa-destaque p{font-size:12px;margin:0 0 10px}
.previa-grade{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.previa-caixa{border:1px solid var(--line);border-radius:8px;padding:11px 13px;min-width:0}
.previa-caixa span{display:block;font-size:10px;color:var(--muted)}
.previa-caixa strong{display:block;font-size:14px;margin-top:4px;overflow-wrap:anywhere}
.previa-bloco{margin:14px 0}
.previa-bloco h3{font-size:13px;margin-bottom:6px}
.previa-bloco p{font-size:12px;margin:0}
.abas-previa{margin:14px 0 10px}
.abas-previa .aba{border:0;background:none}
.previa-corpo{min-height:120px}
.previa-tempo li{padding:10px 0}
.previa-rodape{margin-top:18px;display:flex;gap:10px}
.previa-rodape .botao-link{flex:1}

/* Kanban: colunas com largura confortável e rolagem horizontal, nunca colunas
   espremidas para caber todas na tela. */
.area-quadro .resultados-corpo{overflow:hidden;display:flex}
.quadro-area{flex:1 1 0;min-width:0;overflow:auto;position:relative;padding:16px 20px}
.quadro-trilho{display:flex;gap:14px;align-items:flex-start;min-height:100%}
.quadro-coluna{flex:0 0 300px;display:flex;flex-direction:column;background:#f5f6f2;border:1px solid var(--line);border-radius:9px;max-height:100%;min-height:220px}
.coluna-encerrada{background:#f2f3ef;border-style:dashed}
.coluna-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.coluna-topo h3{margin:0;font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:#6b7268}
.coluna-total{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.coluna-aviso{font-size:10px;color:var(--muted);padding:8px 14px 0;margin:0}
.coluna-corpo{flex:1 1 0;min-height:110px;overflow:auto;position:relative;padding:12px;display:flex;flex-direction:column;gap:10px}
.coluna-vazia{font-size:12px;color:var(--muted);text-align:center;padding:24px 8px;border:1px dashed var(--line);border-radius:8px;margin:0}
.coluna-rodape{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-top:1px solid var(--line);font-size:11px}
.coluna-rodape .secondary{padding:6px 10px;font-size:11px}
.quadro-cartao{background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px;font-size:12px;cursor:grab}
.quadro-cartao:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:2px}
.quadro-cartao-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.quadro-interessado{margin:6px 0 4px;color:var(--muted);font-size:11px}
.quadro-retorno{margin:0 0 8px;font-size:11px;font-weight:600}
.quadro-cartao-rodape{display:flex;justify-content:space-between;gap:8px;font-size:11px}
.cartao-pendente{opacity:.55;pointer-events:none}
.destino-ativo{outline:2px dashed var(--accent);outline-offset:-4px}
.destino-recusado{outline:2px dashed #b64e38;outline-offset:-4px}
.destino-esperando{outline:2px dashed #b9bdb4;outline-offset:-4px}
.marcador-solta{height:3px;background:var(--accent);border-radius:3px}
/* ⚠️ `fixed`, não `absolute`: a área de resultados tem overflow:hidden, e um
   menu posicionado dentro dela seria RECORTADO na borda da coluna. */
.quadro-menu{position:fixed;z-index:70;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 30px #1c1d1b1f;padding:10px;min-width:220px}
.quadro-menu-titulo{font-size:10px;letter-spacing:1px;color:var(--muted);margin:0 0 6px;text-transform:uppercase}
.quadro-menu ul{list-style:none;margin:0 0 6px;padding:0}
.quadro-menu li button{width:100%;text-align:left;border:0;background:none;padding:9px 8px;border-radius:6px;font-size:12px}
.quadro-menu li button:hover{background:var(--accent-soft)}

/* Nova oportunidade: formulário com a maior parte da área e o resumo à
   direita, como na referência. */
.oportunidade-form-pagina{min-width:0}
.jornada-faixa{padding:16px 20px;margin-bottom:16px}
.jornada{display:flex;gap:10px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.jornada-passo{flex:1 1 180px;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fafbf8;min-width:0}
.jornada-passo.atual{border-color:#f1dcc8;background:var(--accent-soft)}
.jornada-numero{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#eceee7;color:#6b7268;font-size:12px;font-weight:700;flex-shrink:0}
.jornada-passo.atual .jornada-numero{background:var(--accent);color:#fff}
.jornada-texto b{display:block;font-size:13px}
.jornada-texto small{margin-top:2px}
.jornada-nota{font-size:11px;margin:12px 0 0}
.form-layout{display:grid;grid-template-columns:minmax(0,72fr) minmax(280px,28fr);gap:18px;align-items:start}
.form-coluna{min-width:0}
.bloco-form{padding:22px 24px;margin-bottom:16px}
.bloco-cabecalho{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
.bloco-numero{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);font-weight:700;font-size:13px;flex-shrink:0}
.bloco-cabecalho h2{margin:0 0 2px;font-size:18px}
.bloco-cabecalho p{margin:0;font-size:12px}
.form-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px}
.form-grade-necessidade{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
.form-grade-passo{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,.8fr)}
.campo{margin:10px 0 14px;min-width:0}
.campo-largo{grid-column:1/-1}
.campo input,.campo select,.campo textarea{width:100%;margin-top:6px;min-height:38px}
.campo textarea{border:1px solid #dfe2d9;border-radius:5px;padding:11px 12px;font:inherit;font-size:13px;resize:vertical}
.campo-obrigatorio>span{color:var(--accent)}
.contador{text-align:right}
.bloco-adicional{padding:18px 24px;margin-bottom:16px}
.bloco-adicional summary{cursor:pointer;display:flex;flex-direction:column;gap:2px;min-height:34px}
.bloco-adicional summary small{margin:0}
.form-acoes{display:flex;justify-content:flex-end;gap:10px;padding-bottom:10px}
.form-acoes .primary,.form-acoes .secondary{min-height:40px}
.oportunidade-resumo{position:sticky;top:16px;display:flex;flex-direction:column;gap:14px;min-width:0}
.oportunidade-resumo .panel{margin:0;padding:18px 20px}
.resumo-cabecalho{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px}
.resumo-cabecalho h2{margin:0;font-size:15px}
.resumo-cabecalho p{margin:2px 0 0;font-size:11px}
.resumo-icone{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:var(--accent-soft);color:var(--accent-ink);flex-shrink:0}
.resumo-dados div{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:12px}
.resumo-dados div:last-child{border:0}
.resumo-dados dt{color:var(--muted)}
.resumo-dados dd{margin:0;text-align:right;overflow-wrap:anywhere}
.resumo-aviso{font-size:11px;color:var(--muted);margin:10px 0 0}
.checklist{list-style:none;margin:0;padding:0}
.checklist li{display:flex;gap:9px;align-items:center;padding:7px 0;font-size:12px}
.checklist .checklist-marca{color:#c3c8be}
.checklist .pronto .checklist-marca,.checklist li.pronto .checklist-marca{color:var(--accent)}
.resumo-dica{background:#fdf6ee;border-color:#f3e2cf}

/* Ficha */
.oportunidade-ficha-pagina{min-width:0}
.ficha-oportunidade-topo .ficha-marcas{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.menu-acoes{position:relative;display:inline-block}
.menu-suspenso{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 30px #1c1d1b1f;list-style:none;margin:0;padding:8px;min-width:220px;z-index:40}
.menu-suspenso li button{width:100%;text-align:left;border:0;background:none;padding:9px 8px;border-radius:6px;font-size:12px}
.menu-suspenso li button:hover{background:var(--accent-soft)}
.aba-contagem{background:#eceee7;border-radius:20px;padding:1px 7px;font-size:10px;margin-left:5px}
.ficha-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.ficha-proximo{grid-column:1/-1}
.ficha-necessidade{font-size:13px;white-space:pre-wrap}
.eventos-formularios{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:18px}
.evento-form{margin:0;padding:16px 18px}
.evento-form summary{cursor:pointer;display:flex;flex-direction:column;gap:2px;min-height:34px}
.evento-form summary small{margin:0}
.evento-form .form-grade{margin-top:12px}
.eventos-lista{list-style:none;margin:0;padding:0}
.evento{border-left:3px solid var(--line);padding:14px 0 14px 14px;margin-bottom:12px}
.evento-pending{border-left-color:var(--accent)}
.evento-atrasado{border-left-color:#b64e38}
.evento-cancelled{border-left-color:#d6d9d2;opacity:.75}
.evento-cabecalho{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.evento-quando{font-size:12px;margin:6px 0}
.evento-resultado{font-size:12px;margin:6px 0}
.evento-acoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}

@media(max-width:1400px){
 .oportunidades-metricas{grid-template-columns:repeat(3,minmax(0,1fr))}
 .oportunidades-pagina.com-gaveta{display:flex}
}
@media(max-width:1100px){
 .form-layout{grid-template-columns:minmax(0,1fr)}
 .oportunidade-resumo{position:static;order:-1}
 .ficha-grade{grid-template-columns:minmax(0,1fr)}
 .eventos-formularios{grid-template-columns:minmax(0,1fr)}
}
/* Modo estreito: a classe vem do JS, que mede a largura ÚTIL. A lista é de
   cartões e a página rola inteira, então prender a altura aqui criaria uma
   segunda rolagem dentro de uma tela que já rola. */
.oportunidades-pagina.modo-estreito{height:auto;min-height:0}
.modo-estreito .area-resultados{overflow:visible;flex:0 0 auto;contain:none}
.modo-estreito .resultados-corpo{overflow:visible}
.modo-estreito .oportunidades-metricas{grid-template-columns:repeat(2,minmax(0,1fr))}
.modo-estreito .oportunidades-metricas .metrica-valor{font-size:24px}
.modo-estreito .filtros-linha label{flex:1 1 100%}
.modo-estreito .form-acoes{position:sticky;bottom:0;background:var(--paper);padding:12px 0;border-top:1px solid var(--line);z-index:5}

@media(max-width:900px){
 .oportunidades-metricas{grid-template-columns:repeat(2,minmax(0,1fr))}
 .oportunidades-metricas .metrica-valor{font-size:24px}
 .filtros-linha label{flex:1 1 100%}
 .form-grade,.form-grade-necessidade,.form-grade-passo{grid-template-columns:minmax(0,1fr)}
 .gaveta-oportunidade.sobreposta{width:100vw}
 .quadro-coluna{flex-basis:88vw}
 .oportunidade-cartao{border:1px solid var(--line);border-radius:9px;padding:14px;margin-bottom:10px;background:#fff}
 .cartao-marcas{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
 .cartao-retorno{font-size:12px;font-weight:600;margin:6px 0}
 .cartao-rodape{display:flex;justify-content:space-between;gap:10px;font-size:12px}
 /* O rodapé de ações não pode cobrir o campo nem o teclado virtual. */
 .form-acoes{position:sticky;bottom:0;background:var(--paper);padding:12px 0;border-top:1px solid var(--line);z-index:5}
 .form-acoes button{flex:1;min-height:44px}
 .oportunidades-topo .topo-acoes{width:100%}
 .oportunidades-topo .topo-acoes .botao-link,.oportunidades-topo .topo-acoes .secondary{flex:1;min-height:44px}
}

/* ⚠️ Em 390 o cabeçalho é UMA LINHA de flex: o título come toda a largura e o
   bloco de ações fica com 0px, então "＋ Nova oportunidade" existia no HTML
   com largura e altura ZERO. Nem o ponteiro chegava nele. Medido na prova de
   navegador: `{"w":0,"h":0}`. O cabeçalho precisa quebrar. */
.modo-estreito .oportunidades-topo{flex-wrap:wrap;align-items:flex-start}
.modo-estreito .oportunidades-topo>div:first-child{flex:1 1 100%;min-width:0}
.modo-estreito .oportunidades-topo .topo-acoes{width:100%;flex:1 0 100%;margin-top:12px}
.modo-estreito .oportunidades-topo .topo-acoes>*{flex:1 1 auto;min-height:44px}
/* 23/09: `.quadro-area` também é a classe do quadro de Tarefas, e overview.css
   fixa nela `block-size: 100dvh - 360px` (540 px em 900). Aqui o painel tem
   ~360 px e overflow:hidden: a base da área, onde mora a barra de rolagem
   lateral, ficava cortada e o Kanban não andava para a direita. Presa ao painel,
   a barra aparece e cada coluna rola por dentro (max-height:100% na coluna). */
.area-quadro .resultados-corpo>.quadro-area{position:absolute;inset:0;block-size:auto;max-block-size:none}