/* Lucro e Margens. Assenta no `vendas.css`. */

.lu-duas { display: grid; gap: 30px; grid-template-columns: minmax(420px, 1fr) 1fr; align-items: start; }
@media (max-width: 1100px) { .lu-duas { grid-template-columns: 1fr; } }

/* ===== A CASCATA =========================================================
   Cada degrau com o valor à direita e uma barra proporcional por baixo. */
.lu-passo {
  display: grid; grid-template-columns: 1fr auto;
  gap: 4px 16px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--ilha-linha);
}
.lu-passo__nome { font-size: 16px; }
.lu-passo__valor { font-size: 18px; font-variant-numeric: tabular-nums; text-align: right; }
.lu-passo__nota { grid-column: 1 / -1; font-size: 13px; color: var(--ilha-apagado); }

.lu-passo.e-subtotal { background: var(--ilha-fundo-suave); padding-left: 10px; padding-right: 10px; }
.lu-passo.e-subtotal .lu-passo__nome,
.lu-passo.e-subtotal .lu-passo__valor { font-weight: 600; }

.lu-passo.e-total {
  border-top: 2px solid var(--ilha-linha-forte); border-bottom: none;
  padding-left: 10px; padding-right: 10px; margin-top: 4px;
}
.lu-passo.e-total .lu-passo__nome { font-weight: 700; }
.lu-passo.e-total .lu-passo__valor { font-weight: 700; font-size: 24px; }

/* ⚠️ Uma saída escreve-se com o sinal e em tom apagado. Um número negativo a preto
   forte no meio da cascata lê-se como um resultado, e é um desconto. */
.lu-passo.e-saida .lu-passo__valor { color: var(--ilha-apagado); }
/* ⚠️ O que não se sabe nunca fica a zero nem desaparece: fica no sítio, em itálico. */
.lu-passo.e-incerto .lu-passo__valor { color: var(--ilha-apagado); font-style: italic; font-weight: 500; }

/* ⚠️ Uma margem que não é de fiar esbate-se e leva marca. Não se esconde a linha:
   esconder é outra maneira de mentir, porque a unidade desaparecia da lista. */
.lu-fraca td { opacity: .55; }
.lu-selo {
  display: inline-block; font-size: 12px; padding: 2px 7px; margin-left: 8px;
  border-radius: var(--ilha-raio-pastilha);
  background: rgba(239, 137, 46, .16); color: #8a4b00; white-space: nowrap;
}

/* ⚠️ O degrau «vendas sem custo preenchido» NÃO é uma saída de dinheiro — é a parte que fica
   de fora das contas. Tracejado, para se ver que é uma exclusão e não um custo. */
.lu-passo.e-aparte { border-bottom-style: dashed; }
.lu-passo.e-aparte .lu-passo__nome,
.lu-passo.e-aparte .lu-passo__valor { color: var(--ilha-apagado); }

/* ===== GRÁFICO DA EVOLUÇÃO ================================================
   Duas barras sobrepostas por mês: vendas atrás, lucro à frente. */
.ev-barra {
  flex: 1 1 0; min-width: 26px; position: relative; height: 100%;
  display: flex; align-items: flex-end; justify-content: center;
}
.ev-barra__vendas {
  position: absolute; bottom: 18px; left: 4px; right: 4px;
  background: var(--ilha-cor); border-radius: 3px 3px 0 0; opacity: .3;
}
.ev-barra__lucro {
  position: absolute; bottom: 18px; left: 11px; right: 11px;
  background: var(--ilha-cor); border-radius: 3px 3px 0 0;
}
.ev-barra__mes {
  position: absolute; bottom: 0; font-size: 12px; color: var(--ilha-apagado);
}
.ev-barra:hover .ev-barra__vendas { opacity: .5; }
.ev-barra:hover .ev-barra__lucro { background: var(--ilha-cor2); }

/* ⚠️ O mês a meio vai tracejado: a última barra é sempre a mais baixa e lê-se como quebra. */
.ev-barra.e-parcial .ev-barra__vendas,
.ev-barra.e-parcial .ev-barra__lucro {
  background: repeating-linear-gradient(45deg, var(--ilha-cor), var(--ilha-cor) 4px,
    rgba(255,255,255,.65) 4px, rgba(255,255,255,.65) 8px);
}
/* ⚠️ E um mês sem histórico não é um mês de zero vendas. Fica quase invisível, de propósito. */
.ev-barra.e-sem-historico .ev-barra__vendas,
.ev-barra.e-sem-historico .ev-barra__lucro { background: var(--ilha-linha); opacity: 1; }
.ev-barra.e-sem-historico .ev-barra__mes { opacity: .4; }