/* =========================================================
   negocio.css — Avaliar Negócio (seção #sec-negocio)

   Só layout. O vocabulário visual desta tela é o do próprio
   sistema: .ctx/h1 no cabeçalho, .tabs/.tab para trocar de
   negócio, .card/.head/.body nos blocos, .chips/.chip nas
   escolhas, e .vs-status/.vs-pares/.vs-card/.vs-item-acao no
   veredito, os mesmos de Visão Geral, Patrimônio e Sucessão.
   Nada aqui cria componente novo nem redefine cor.
   ========================================================= */

/* Duas colunas: o negócio à esquerda, o veredito à direita e fixo na
   rolagem. Abaixo de 1080px empilha, com o veredito por último. */
.aghtml .neg-grade{display:grid; gap:16px; grid-template-columns:minmax(0,1fr)}
@media (min-width:1080px){
  .aghtml .neg-grade{grid-template-columns:minmax(0,1fr) minmax(340px,400px); align-items:start}
  /* Com o gráfico embaixo, a coluna passa de uma tela de altura.
     Presa no topo sem limite, o fim dela ficaria inalcançável,
     então ela rola por dentro quando não couber. */
  .aghtml .neg-lado{
    position:sticky; top:0;
    /* Sem overscroll-behavior de propósito: quando a coluna chega
       ao fim, a rolagem tem de seguir para a página, senão o
       produtor fica preso dentro dela. */
    max-height:100dvh; overflow-y:auto;
  }
}
/* No painel lateral os três números empilham, em vez de disputarem a
   largura de um cartão estreito. */
@media (min-width:1080px){
  .aghtml .neg-lado .vs-pares{grid-template-columns:minmax(0,1fr)}
}
/* Empilhado, o veredito sobe: no celular ninguém deve rolar o
   formulário inteiro para descobrir se o negócio presta. */
@media (max-width:1079px){
  .aghtml .neg-lado{order:-1}
}

/* Grade de campos: a única coisa que faltava no conjunto atual.
   auto-FILL, e não auto-fit: com auto-fit as trilhas vazias somem e os
   campos esticam, então um bloco de dois campos ficava com caixas de
   310px e o de três com caixas de 203px dentro do MESMO cartão. Com
   auto-fill a trilha é a mesma em todos os blocos, e as caixas nascem
   sempre na mesma coluna. */
.aghtml .neg-campos{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(min(180px,100%), 1fr));
}
/* Bloco de um campo só não precisa ocupar a largura inteira do cartão,
   mas continua preso à grade: ocupa duas trilhas, não uma largura solta. */
@media (min-width:720px){
  .aghtml .neg-campos.curto > .neg-campo{grid-column:span 2}
}
.aghtml .neg-campo > label{
  display:block; margin-bottom:5px;
  font-size:11.5px; font-weight:600; color:var(--txt2);
}
.aghtml .neg-campo .inp{width:100%}
.aghtml .neg-campo .dica{margin-top:5px; font-size:11.5px; line-height:1.45; color:var(--txt2)}

/* Linha de resultado calculado logo abaixo dos campos. */
.aghtml .neg-leitura{
  margin-top:12px; padding:10px 12px;
  background:var(--verde-claro); border-radius:8px;
  font-size:13px; line-height:1.5; color:var(--txt);
}
.aghtml .neg-leitura + .neg-leitura{margin-top:8px}
.aghtml .neg-leitura strong{font-weight:700}

/* Sub-bloco dentro de um cartão, com o mesmo rótulo miúdo em
   maiúsculas que os cabeçalhos de tabela do app já usam. */
.aghtml .neg-bloco{margin-top:18px; padding-top:16px; border-top:1px solid var(--borda)}
.aghtml .neg-bloco.primeiro{margin-top:0; padding-top:0; border-top:0}
.aghtml .neg-bloco > .rot{
  margin:0 0 10px; font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--txt2);
}
/* Os chips já trazem a margem de baixo deles; dentro do bloco a
   margem dupla abria um buraco. */
.aghtml .neg-bloco > .chips{margin-bottom:0}
.aghtml .neg-bloco > .chips + .neg-campos{margin-top:12px}

/* Linha editável (descrição, valor e apagar) na MESMA grade dos
   campos: a descrição ocupa três trilhas e o valor a quarta, então
   as caixas ficam alinhadas com as dos blocos de cima e de baixo em
   vez de cada seção ter a própria largura. O botão de apagar divide
   a célula do valor, para não roubar uma trilha da grade. */
.aghtml .neg-linha{
  display:grid; gap:12px; margin-bottom:10px; align-items:center;
  grid-template-columns:repeat(auto-fill, minmax(min(180px,100%), 1fr));
}
.aghtml .neg-linha .valor{display:flex; gap:8px; align-items:center; min-width:0}
.aghtml .neg-linha .valor .inp{flex:1 1 auto; min-width:0}
.aghtml .neg-linha .valor .btn{flex:none}
/* 1 / -2 é "da primeira trilha até a penúltima", seja qual for o número
   de trilhas: a descrição toma o que sobra e o valor cai sempre na
   ÚLTIMA coluna, alinhado com o último campo dos blocos de cima. */
@media (min-width:720px){
  .aghtml .neg-linha > .inp:first-child{grid-column:1 / -2}
}

/* "Afinar a conta" é um .card comum que abre e fecha: o summary usa
   o mesmo .head dos outros cartões, com a seta à direita. */
.aghtml details.neg-mais > summary{cursor:pointer; list-style:none}
.aghtml details.neg-mais > summary::-webkit-details-marker{display:none}
.aghtml details.neg-mais > summary::after{
  content:''; margin-left:auto; width:8px; height:8px;
  border-right:2px solid var(--txt2); border-bottom:2px solid var(--txt2);
  transform:rotate(45deg) translateY(-2px); transition:transform .16s ease;
}
.aghtml details.neg-mais[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.aghtml details.neg-mais > summary:hover{background:var(--verde-claro)}

/* ── Veredito: um cartão só ──────────────────────────────
   As peças continuam sendo .vs-status, .vs-par e .vs-item-acao, as
   mesmas de Visão Geral e Patrimônio. Aqui elas perdem a moldura
   própria e viram linhas de um cartão, separadas por fio, senão
   ficam cinco caixas soltas empilhadas. */
.aghtml .neg-lado .vs-status{margin:0}
.aghtml .neg-lado .vs-pares{display:block; margin:0}
.aghtml .neg-lado .vs-par{
  background:transparent; border:0; border-top:1px solid var(--borda);
  border-radius:0; padding:14px 0 12px; box-shadow:none;
}
.aghtml .neg-lado .vs-par:first-child{border-top:0; padding-top:16px}
.aghtml .neg-lado .vs-card{
  background:transparent; border:0; border-top:1px solid var(--borda);
  border-radius:0; padding:14px 0 0; margin:0; box-shadow:none;
}
.aghtml .neg-lado .vs-card > .tit{margin-bottom:6px}
.aghtml .neg-lado .vs-item-acao{
  background:transparent; border:0; border-radius:0;
  padding:10px 0; margin:0; box-shadow:none;
}
.aghtml .neg-lado .vs-item-acao + .vs-item-acao{border-top:1px solid var(--n-100, #f0f2ee)}
.aghtml .neg-lado .vs-item-acao .ico{width:30px; height:30px; border-radius:9px; font-size:14px}

/* Margem negativa de um ciclo: é a informação que o produtor precisa
   enxergar de relance, porque um ciclo no vermelho derruba o negócio
   inteiro mesmo com preço de saca bom. Cor sozinha nunca é o único
   sinal: o número já vem com o menos na frente. */
.aghtml .neg-ruim{color:var(--neg); font-weight:700}

/* Tabela de ciclos: as células têm campo dentro, e ela vive na coluna
   estreita do negócio (cerca de 630px), onde seis colunas com input
   não cabem sozinhas. Larguras fixas em porcentagem resolvem: sem
   elas o navegador dava 36px ao nome do ciclo e empurrava as duas
   últimas colunas para fora. Empilhada no celular (.tabela-cartoes
   vira cartão abaixo de 640px) as porcentagens não valem mais, e a
   célula é flex com o campo dividindo a linha com o rótulo. */
.aghtml table.neg-ciclos{table-layout:fixed; width:100%}
.aghtml table.neg-ciclos th, .aghtml table.neg-ciclos td{padding-left:6px; padding-right:6px}
/* Cabeçalho de tabela do app não quebra linha; nestas colunas
   estreitas os rótulos se sobrepunham um no outro. */
.aghtml table.neg-ciclos th{white-space:normal; vertical-align:bottom; line-height:1.25}
.aghtml table.neg-ciclos th:nth-child(1), .aghtml table.neg-ciclos td:nth-child(1){width:24%}
.aghtml table.neg-ciclos th:nth-child(2), .aghtml table.neg-ciclos td:nth-child(2){width:16%}
.aghtml table.neg-ciclos th:nth-child(3), .aghtml table.neg-ciclos td:nth-child(3){width:16%}
.aghtml table.neg-ciclos th:nth-child(4), .aghtml table.neg-ciclos td:nth-child(4){width:17%}
.aghtml table.neg-ciclos th:nth-child(5), .aghtml table.neg-ciclos td:nth-child(5){width:17%}
.aghtml table.neg-ciclos th:nth-child(6), .aghtml table.neg-ciclos td:nth-child(6){width:10%}
.aghtml table.neg-ciclos td .inp{width:100%; min-width:0; padding-left:8px; padding-right:8px}
.aghtml table.neg-ciclos td .btn{width:100%; padding-left:0; padding-right:0}
@media (max-width:640px){
  .aghtml table.neg-ciclos, .aghtml table.neg-ciclos td{width:100%}
  .aghtml table.neg-ciclos td{flex-wrap:wrap}
  .aghtml table.neg-ciclos td .inp{flex:1 1 130px; width:auto}
  .aghtml table.neg-ciclos td .btn{width:auto; padding-left:14px; padding-right:14px}
}

/* Campo largo: seletor de bem guarda nome comprido ("Caminhonete Ford
   F-250 2022"), que numa trilha só de 203px sai cortado. Ocupa duas
   trilhas da mesma grade, então continua alinhado com os campos de
   cima e de baixo em vez de virar largura solta. Abaixo de 720px a
   grade já é de uma coluna e a regra não se aplica. */
@media (min-width:720px){
  .aghtml .neg-campo.largo{grid-column:span 2}
}
.aghtml .neg-campo.largo select.inp{width:100%; text-overflow:ellipsis}

/* Botão de tirar uma fonte de pagamento, dentro do próprio rótulo do
   bloco: a fonte é um bloco inteiro, então a ação de remover mora no
   título dela e não numa coluna à parte. */
.aghtml .neg-bloco > .rot{display:flex; align-items:center; gap:8px}
.aghtml .neg-rot-apagar{margin-left:auto; padding:2px 10px; min-height:28px; line-height:1}

/* O gráfico do caixa precisa de altura declarada: charts.js desliga
   a proporção fixa (fill) para o canvas preencher o container, e sem
   altura o Chart.js nasce com zero. */
.aghtml .neg-graf{height:230px; position:relative}
.aghtml .neg-graf-card{margin-top:14px}
.aghtml .neg-graf-card .nota{margin-top:10px}

/* Jornada (08/10/2026): casco e trilha do Projetos. */
.aghtml.neg-jornada{max-width:none}
.aghtml.neg-jornada .prj-casco{margin-top:12px}
.aghtml.neg-jornada .prj-lay{grid-template-columns:200px minmax(0,1fr)}
.aghtml.neg-jornada .neg-nav{display:flex; justify-content:space-between; gap:12px; margin-top:16px}