/* Visão do Campo — calculadora de adubo (Calc.dc.html). Grade de 4/8, campos de 48 px, tabelas
   com número à direita, stepper no topo. Aviso é ícone + texto, sem caixa de fundo. */
.calc { padding-bottom: 8px; }

/* stepper */
.calc-passo { display: flex; align-items: flex-start; padding: 16px 0 12px; border-bottom: 1px solid var(--linha); }
.calc-etapa { flex: 1 1 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 0; background: none; padding: 0; cursor: pointer; min-width: 0; font: inherit; }
.calc-etapa + .calc-etapa::before { content: ''; position: absolute; top: 16px; right: 50%; width: 100%; height: 1px; background: var(--linha-forte); }
.calc-etapa.feito + .calc-etapa::before, .calc-etapa.feito + .calc-etapa.atual::before { background: var(--verde); }
.calc-circulo { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 500 14px var(--ui); background: var(--superficie); color: var(--tinta-2); border: 1px solid var(--m3-contorno); box-sizing: border-box; }
.calc-etapa.feito .calc-circulo, .calc-etapa.atual .calc-circulo { background: var(--verde); color: #FFFFFF; border-color: var(--verde); }
.calc-etapa-rot { font-size: 12px; line-height: 16px; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.calc-etapa.atual .calc-etapa-rot { font-weight: 600; color: var(--tinta); }
.calc-etapa:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; border-radius: var(--r-s); }
.calc-estado { min-height: 16px; margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--tinta-2); }
.calc-estado.m3-erro { color: var(--fogo); }

.calc .folga-curta { --folga-unidade: 48px; }
.calc .folga-larga { --folga-unidade: 64px; }
.calc .m3-campo.curto .m3-rotulo:empty { display: none; }
.calc .m3-grade .m3-unidade { font-size: 12px; }
.calc-espaco { height: 16px; }
.calc-espaco-topo { margin-top: 16px; }
.calc-a-esquerda { align-self: flex-start; margin-left: -12px; }
.calc-direita { text-align: right; }
.invisivel { visibility: hidden; }

.calc-area-linhas { display: flex; flex-direction: column; }
.calc-area-linha { display: flex; justify-content: space-between; align-items: center; min-height: 40px; font-size: 14px; color: var(--tinta-2); border-top: 1px solid var(--linha); }
.calc-area-linha.total { color: var(--tinta); font-weight: 500; border-top-color: var(--linha-forte); }
.calc-fert { flex-wrap: nowrap; gap: 12px; }
.calc-fert-campo { width: 120px; flex: 0 0 auto; --folga-unidade: 32px; }

/* passo Demanda: o modo (segmentado) e a demanda em linhas — campo de 48 px com a unidade dentro e o total na
   área ao lado, igual nos dois modos */
.calc-modo button { padding: 0 8px; line-height: 18px; }
.calc-modo-razao { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
/* o botão de texto encosta no texto dos dois lados: na mesma linha à direita, quebrado à esquerda */
.calc-modo-razao .m3-botao { margin: 0 -12px; }
.calc-meta { max-width: 240px; }
.calc-dem { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
.calc-dem-linha { display: grid; grid-template-columns: minmax(0, 240px) minmax(80px, 120px); justify-content: start; align-items: start; gap: 12px; }
/* com um nutriente que se tira, TODAS as linhas guardam a coluna do ×: os totais ficam alinhados */
.calc-dem.removiveis .calc-dem-linha { grid-template-columns: minmax(0, 240px) minmax(80px, 120px) 40px; }
.calc-dem-campo { --folga-unidade: 84px; }
.calc-dem-total { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; min-height: 48px; font-variant-numeric: tabular-nums; }
.calc-dem-total b { font: 500 14px/20px var(--ui); color: var(--tinta); white-space: nowrap; }
.calc-dem-total small { font-size: 12px; line-height: 16px; color: var(--tinta-2); }
.calc-dem-linha .calc-remover { margin-top: 4px; }
/* o rótulo do campo agora fica EM CIMA (política de 2026-10-04): o total e o × descem com o campo */
.calc-dem-linha:has(> .m3-campo:not(.curto) > .m3-rotulo) > .calc-dem-total { margin-top: 24px; }
.calc-dem-linha:has(> .m3-campo:not(.curto) > .m3-rotulo) > .calc-remover { margin-top: 28px; }
.calc-produto-ctl:has(> .m3-campo:not(.curto) > .m3-rotulo) > .calc-fixar { align-self: flex-start; margin-top: 28px; }
.calc-dem-chips { padding-bottom: 4px; }
.calc-fonte { margin-top: -8px; }
.calc-fora { font-size: 14px; }

/* "Ajustes da referência": disclosure fechado por padrão, o resumo diz quantos estão fora do padrão */
.calc-ajustes { border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.calc-ajustes summary { display: flex; align-items: center; min-height: 48px; cursor: pointer; list-style: none; font-size: 14px; }
.calc-ajustes summary::-webkit-details-marker { display: none; }
.calc-ajustes summary::after { content: ''; width: 8px; height: 8px; margin-left: auto; margin-right: 6px; border-right: 1.5px solid var(--tinta-2); border-bottom: 1.5px solid var(--tinta-2); transform: rotate(45deg); transition: transform 0.15s; }
.calc-ajustes[open] summary::after { transform: rotate(-135deg); }
.calc-ajustes summary:focus-visible { outline: 2px solid var(--verde); border-radius: var(--r-s); }
.calc-ajustes-tit { font-weight: 500; color: var(--tinta); }
.calc-ajustes-n { color: var(--tinta-2); white-space: pre; }
.calc-ajustes-corpo { display: flex; flex-direction: column; gap: 24px; padding: 8px 0 24px; }
.calc-ajustes-acoes { flex-wrap: wrap; }
.calc-ajustes-acoes .m3-botao.m3-texto { margin-right: -12px; }

/* passo Área sem análise: a análise é uma linha opcional */
.calc-analise-linha { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 8px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.calc-analise-linha .m3-botao { margin-right: -12px; flex-shrink: 0; }

/* histórico da safra e produtos */
.calc-hist > li, .calc-produtos > li { padding: 12px 0; }
.calc-vazio { padding: 16px 0 !important; }
.calc-marcavel { align-items: center; }
.calc-marcavel .m3-item-txt { cursor: pointer; }
.calc-chk { width: 18px; height: 18px; margin: 0 3px; accent-color: var(--verde); flex-shrink: 0; cursor: pointer; }
.m3-item.mudo .m3-item-txt b { color: var(--tinta-3); }
.calc-hist-acoes { margin-top: 8px; }
.calc-opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-opcoes .m3-botao { padding: 0 16px; }
.calc-dose-linha { flex-wrap: nowrap; align-items: flex-start; }
.calc-dose-linha .m3-seg { flex: 1 1 auto; margin-top: 4px; }
.calc-dose { width: 110px; flex: 0 0 auto; --folga-unidade: 56px; }
.calc-dose-add { width: 136px; flex: 0 0 auto; --folga-unidade: 56px; }

/* produtos do plano, agrupados pelo nutriente-guia: a dose é da conta, em destaque */
.calc-grupo { display: flex; flex-direction: column; border-top: 1px solid var(--linha-forte); padding-top: 12px; margin-top: 8px; }
.calc-grupo-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.calc .calc-grupo-nome { margin: 0; font: 600 14px/20px var(--ui); }
.calc-grupo-meta { font-size: 12px; line-height: 16px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.calc-grupo .calc-produtos > li:last-child { border-bottom: 0; }
.calc-grupo-pe { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 40px; font-size: 12px; line-height: 16px; }
.calc-grupo-falta { color: var(--fogo); font-weight: 500; }
.calc-grupo-sobra { color: var(--ambar); font-weight: 500; }
.calc-grupo-ok { color: var(--tinta-2); }
.calc-plano-add { padding-top: 8px; }
.calc-produto { display: flex; flex-direction: column; gap: 8px; }
.calc-produto-topo { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.calc-produto-nome { flex: 1 1 auto; font-size: 14px; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.calc-produto-topo .calc-remover { margin-right: -8px; }
.calc-via { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 1px solid var(--linha-forte); border-radius: var(--r-xs); font-size: 12px; font-weight: 500; color: var(--tinta-2); white-space: nowrap; flex-shrink: 0; }
.calc-produto-dose { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.calc-dose-bloco { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.calc-dose-valor { font: 500 22px/28px var(--ui); color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-dose-valor small { font-size: 14px; font-weight: 400; color: var(--tinta-2); }
.calc-dose-valor.espera, .calc-dose-valor.nd { font-size: 14px; line-height: 28px; font-weight: 400; color: var(--tinta-3); }
.calc-fixa { font-size: 12px; line-height: 16px; color: var(--tinta-2); }
.calc-produto-nota { font-size: 12px; line-height: 16px; color: var(--tinta-2); text-align: right; font-variant-numeric: tabular-nums; }
.calc-produto-ctl { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.calc-parte { width: 88px; flex: 0 0 auto; --folga-unidade: 28px; }
.calc-produto-ctl .m3-campo-select { width: 136px; flex: 0 0 auto; }
.calc-produto-ctl .m3-seg { flex: 1 1 140px; margin-top: 4px; }
.calc-fixar { margin-left: auto; align-self: center; }
.calc-produto-acoes { display: flex; justify-content: flex-end; }
.calc-entrega { font-variant-numeric: tabular-nums; }
.calc-opcao-mais { flex-shrink: 0; color: var(--verde); }
.calc-produto-mao { flex-wrap: nowrap; }
.calc-produto-mao .m3-seg { flex: 1 1 auto; }
.calc-vezes { width: 88px; flex: 0 0 auto; }
.calc-remover { width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: var(--r-full); background: none; color: var(--tinta-2); cursor: pointer; display: grid; place-items: center; }
.calc-remover:hover { background: var(--superficie-2); color: var(--tinta); }
.calc-remover:focus-visible { outline: 2px solid var(--verde); }

/* balanço */
.calc-saldo { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 18px; }
.calc-saldo small { font-size: 12px; line-height: 14px; font-weight: 400; color: var(--tinta-3); }
.calc-saldo.falta { color: var(--fogo); font-weight: 500; }
.calc-saldo.sobra { color: var(--ambar); font-weight: 500; }
.calc-saldo.ok { color: var(--verde); font-weight: 500; }
.calc-saldo.nd { color: var(--tinta-3); font-size: 12px; }
.calc-balanco td { height: 48px; }

/* aplicação */
.calc-totais td:first-child { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calc-meses th.centro { text-align: center; border-bottom: 1px solid var(--linha); height: 32px; }
.calc-meses thead tr:last-child th { height: 32px; }
.calc-meses .m3-campo.curto { width: 56px; margin-left: auto; }
.calc-meses .m3-campo.curto .m3-entrada { padding: 0 6px; }
.calc-mes { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
.calc-mes svg { transition: transform 0.15s; flex-shrink: 0; }
.calc-mes svg.girado { transform: rotate(90deg); }
.calc-feito { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-left: 4px; border-radius: var(--r-xs); background: var(--m3-selecionado); color: var(--m3-sobre-selecionado); font-size: 12px; font-weight: 500; }
.calc-mes-fora td { color: var(--m3-contorno); }
.calc-mes-aberto td.calc-mes-det { background: var(--superficie-2); padding: 8px 12px 12px 20px; height: auto; }
.calc-mes-item { min-height: 24px; font-size: 14px; flex-wrap: nowrap; }
.calc-mes-item small { color: var(--tinta-2); }
.calc-mes-total { min-height: 32px; margin-top: 8px; border-top: 1px solid var(--linha); font-weight: 500; }
.calc-mao-linha { display: flex; align-items: center; gap: 8px; }
.calc-mao-linha .m3-campo { flex: 1 1 auto; }
.calc-mao-dose { white-space: nowrap; }

/* telas cheias dentro da calculadora: adicionar produto, cadastrar pelo rótulo */
.calc-tela-topo { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; height: 64px; background: var(--superficie); border-bottom: 1px solid var(--linha); }
.calc-tela-titulo { flex: 1 1 auto; margin: 0; font: 400 22px/28px var(--ui) !important; }
.calc-icone-botao { width: 48px; height: 48px; margin-left: -12px; border: 0; background: none; border-radius: 24px; cursor: pointer; display: grid; place-items: center; color: var(--tinta); }
.calc-icone-botao:hover { background: var(--superficie-2); }
.calc-contagem { font-size: 12px; line-height: 16px; color: var(--tinta-2); padding-bottom: 8px; border-bottom: 1px solid var(--linha-forte); }
.calc-opcoes-lista > li { padding: 0; }
.calc-opcao-botao { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 64px; padding: 8px 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: var(--tinta); }
.calc-opcao-botao .m3-item-txt b { font-size: 16px; line-height: 24px; }
.calc-opcao-botao .m3-item-txt small { font-size: 14px; line-height: 20px; }
.calc-opcao-botao[aria-checked="true"] .m3-radio-bola { border-color: var(--verde); }
.calc-opcao-botao[aria-checked="true"] .m3-radio-bola::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--verde); }
.calc-opcao-botao:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; }
.calc-opcao-dose { display: flex; align-items: center; gap: 12px; padding: 8px 0 16px; }
.calc-foto { display: flex; gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--linha-forte); border-radius: var(--r-s); }
.calc-foto > svg { flex-shrink: 0; }
.calc-garantias { display: flex; flex-direction: column; }
.calc-garantia { display: flex; align-items: center; gap: 8px; min-height: 64px; border-bottom: 1px solid var(--linha); padding-top: 8px; }
.calc-garantia-n { width: 120px; flex: 0 0 auto; }
.calc-garantia-v { flex: 1 1 auto; --folga-unidade: 48px; }
.calc-rot-fim { padding-bottom: 24px; }
.calc-escopo-lista { margin-top: 12px; }
.calc-escopo-lista .m3-apoio { margin: 2px 0 0; }

/* O RODAPÉ FICA À MÃO (D-13): no passo 1 o "Próximo" estava em y=877–917 numa janela de 900 e exigia rolar. Cola no
   pé da lateral enquanto o passo é maior que a tela, de ponta a ponta (a margem negativa é o padding do corpo). */
.calc-rodape { position: sticky; bottom: 0; z-index: 3; display: flex; justify-content: space-between; margin: 24px -24px 0; padding: 12px 24px; background: var(--superficie); border-top: 1px solid var(--linha); }
@media (max-width: 900px) { .calc-rodape { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; } }
/* a lateral tem padding embaixo (36 px no computador, 24 na folha) e o `sticky` conta a partir DELE: o rodapé parava
   acima do pé da lateral e o formulário aparecia rolando por baixo dele. Com o rodapé fixo, a lateral fica sem esse
   padding — o respiro do fim é o do próprio corpo (revisão de design, 2026-10-04) */
.com-ferramentas .sidebar-direita:has(.calc-rodape) { padding-bottom: 0; }
/* celular deitado (altura ≤ 500): a folha tem ~230 px e cabeçalho + etapas + rodapé fixo a enchiam — não sobrava linha
   do passo à vista. Ali o rodapé volta a ir no fim do passo */
@media (max-height: 500px) { .calc-rodape { position: static; } .com-ferramentas .sidebar-direita:has(.calc-rodape) { padding-bottom: 24px; } }

@media (max-width: 380px) {
  .calc-etapa-rot { font-size: 12px; }
  .calc .m3-grade[style*="--col:3"] { --col: 2 !important; }
  .calc-meses { font-size: 14px; }
  .calc-meses .m3-campo.curto { width: 48px; }
}

/* o agendado da safra, recolhido: um parcelado agenda onze parcelas */
.calc-agendadas summary { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; font-size: 14px; color: var(--tinta-2); list-style: none; }
.calc-agendadas summary::-webkit-details-marker { display: none; }
.calc-agendadas summary::after { content: ''; width: 8px; height: 8px; margin-left: auto; margin-right: 6px; border-right: 1.5px solid var(--tinta-2); border-bottom: 1.5px solid var(--tinta-2); transform: rotate(45deg); transition: transform 0.15s; }
.calc-agendadas[open] summary::after { transform: rotate(-135deg); }
.calc-agendadas summary:focus-visible { outline: 2px solid var(--verde); border-radius: var(--r-s); }

/* Análise do passo 1: a última da área, resumida; os valores abrem sob demanda (dono, 2026-09-27) */
.calc-analise-tit { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.calc-analise-principais { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.calc-analise-valores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr) auto); gap: 8px 12px; margin: 8px 0 0; font-size: 14px; line-height: 20px; }
.calc-analise-valores dt { color: var(--tinta-2); }
.calc-analise-valores dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.m3-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.m3-apoio.m3-erro { color: var(--fogo); }
@container (max-width: 420px) { .calc-analise-valores { grid-template-columns: repeat(2, minmax(0, 1fr) auto); } }