/* =========================================================
   estruturador.css: a aba "Estruturador" de Comercialização
   (js/sections/comercializacao.estruturador*.js). Camada
   própria: todo seletor é prefixado .est- e nenhuma regra
   existente é alterada. Tokens de css/styles.css.

   A partir de 768 px: coluna de etapas estreita (380 px) que
   rola sozinha, e painel do resultado com o resto da largura e
   a altura que sobra na janela (--est-alto, medida pelo
   módulo), sem rolagem própria. No painel só o gráfico cresce
   (flex 1); as outras faixas têm altura fixa.
   Até 767 px: painel primeiro, gráfico com 45vh, página rola.
   ========================================================= */

/* ── Layout ───────────────────────────────────────────── */
.est-layout{display:flex; flex-direction:column; gap:14px;}
.est-direita{order:-1; min-width:0;}
.est-esquerda{min-width:0;}
.est-painel{display:flex; flex-direction:column; gap:6px; background:var(--card,#fff); border:1px solid var(--borda-suave,#e8e5da);
  border-radius:12px; padding:10px 12px;}
.est-curva{height:45vh; min-height:240px; position:relative;}

@media (min-width:768px){
  .est-layout{display:grid; grid-template-columns:380px minmax(0,1fr); align-items:stretch; height:var(--est-alto, 720px);}
  .est-direita{order:0; position:sticky; top:0; height:100%; overflow:hidden;}
  .est-esquerda{height:100%; overflow-y:auto; padding-right:4px; overscroll-behavior:contain;}
  .est-painel{height:100%; box-sizing:border-box; overflow:hidden;}
  .est-curva{flex:1 1 auto; height:auto; min-height:0;}
}
.est-svg{display:block; overflow:hidden;}
@media (max-width:767px){
  .est-controle{flex-wrap:wrap;}
  .est-slider{flex:1 1 100%; flex-wrap:wrap;}
  .est-slider input{min-width:0; width:100%;}
}

/* ── Painel: faixas de altura fixa ─────────────────────── */
.est-painel-topo{flex:0 0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;}
.est-cartao-titulo{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#5c5f54; margin:0;}
#est-selo{flex:1 1 auto; min-width:0;}
.est-modo{display:inline-flex; border:1px solid #d2c9b6; border-radius:8px; overflow:hidden; margin-left:auto;}
.est-modo-btn{min-height:44px; padding:4px 12px; font-size:13.5px; background:#fff; border:0; cursor:pointer; color:#5c5f54;}
.est-modo-btn.ativo{background:var(--verde-lavoura); color:#fff; font-weight:600;}
.est-modo-btn[disabled]{opacity:.45; cursor:not-allowed;}

.est-faixa-alertas{flex:0 0 auto; height:44px;}
.est-alerta{display:flex; align-items:center; gap:8px; height:44px; box-sizing:border-box; border-radius:8px; padding:0 4px 0 10px;
  background:#fdf6e3; border-left:4px solid #8a6a0d; font-size:13px; color:var(--texto);}
.est-alerta-alto{background:#fbeceb; border-left-color:var(--neg);}
.est-alerta-info{background:#f6f5f1; border-left-color:#5c5f54;}
.est-alerta-conta{font-weight:700; flex-shrink:0;}
.est-alerta-texto{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.est-sem-alerta{display:flex; align-items:center; height:44px; margin:0; font-size:13px; color:#5c5f54;}
.est-alertas{list-style:none; padding:0; margin:0 0 12px; display:flex; flex-direction:column; gap:6px;}
.est-alerta-item{font-size:13.5px; line-height:1.4; border-radius:8px; padding:8px 12px; background:#fdf6e3; border-left:4px solid #8a6a0d;}
.est-alerta-item.est-alerta-alto{background:#fbeceb; border-left-color:var(--neg);}

.est-controle{flex:0 0 auto; display:flex; align-items:center; gap:10px;}
.est-slider{flex:1; display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; color:var(--texto); min-width:0;}
.est-slider span{white-space:nowrap;}
.est-slider input{flex:1; min-width:120px; min-height:44px; accent-color:var(--verde-lavoura);}

.est-resto{flex:0 0 auto;}

.est-numeros{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:4px;}
.est-numero{background:#f6f5f1; border-radius:8px; padding:6px 8px; display:flex; flex-direction:column; gap:1px; min-width:0;}
.est-numero-rotulo{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#5c5f54;}
.est-numero-valor{font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--texto); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.est-numero-detalhe{font-size:11.5px; color:#5c5f54; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.est-pos{color:var(--pos);}
.est-neg{color:var(--neg);}

/* ── Tabela de cenários (gaveta) ───────────────────────── */
.est-btn-topo{padding:4px 10px;}
.est-gaveta{flex:0 0 auto;}
.est-tabela{width:100%; border-collapse:collapse; font-size:12.5px; font-variant-numeric:tabular-nums;}
.est-tabela th{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:#5c5f54; text-align:left; padding:3px 6px;
  border-bottom:1px solid var(--borda-suave,#e8e5da); position:sticky; top:0; background:#fff;}
.est-tabela td{padding:3px 6px; border-bottom:1px solid var(--borda-suave,#e8e5da); white-space:nowrap;}
.est-tabela .num{text-align:right;}
.est-tabela-hoje td{background:#fdf6e3; font-weight:700;}
@media (min-width:768px){
  /* Com a tabela aberta o painel mostra tudo junto: alertas, controle,
     gráfico, decomposição, números e tabela. Só o gráfico cede altura. */
  .est-com-tabela .est-curva{flex:1 1 0; min-height:150px;}
  .est-com-tabela .est-gaveta{flex:0 0 auto; overflow:visible;}
}

/* ── Meus estudos ──────────────────────────────────────── */
.est-estudos-topo{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.est-estudos{list-style:none; padding:0; margin:6px 0 0;}
.est-estudos li{display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; border-bottom:1px solid var(--borda-suave,#e8e5da); padding:2px 0;}
.est-estudo-nome{font-weight:600; font-size:13px; flex:1 1 140px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.est-estudo-data{font-size:11.5px; color:#5c5f54;}
.est-estudo-acoes{display:flex; margin-left:auto;}
.est-estudos-msg{font-size:12.5px; border-radius:6px; padding:4px 8px; margin:6px 0 0;}
.est-estudos-erro{background:#fbeceb; color:var(--neg);}
.est-estudos-ok{background:#e3f0e1; color:var(--pos);}

/* ── Evidência do que muda ─────────────────────────────── */
.est-selo-dif{display:inline-block; font-size:13px; font-weight:700; border-radius:999px; padding:4px 10px; font-variant-numeric:tabular-nums;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.est-selo-sobe{background:#e3f0e1; color:var(--pos);}
.est-selo-desce{background:#fbeceb; color:var(--neg);}
.est-selo-igual{background:#f6f5f1; color:#5c5f54;}

/* ── Coluna de etapas: campos compactos ───────────────── */
.est-bloco{background:var(--card,#fff); border:1px solid var(--borda-suave,#e8e5da); border-radius:12px; padding:12px; margin-bottom:10px;}
.est-etapa-cab{display:flex; gap:10px; align-items:flex-start; margin-bottom:8px;}
.est-etapa-num{flex-shrink:0; width:24px; height:24px; border-radius:50%; background:var(--verde-lavoura); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;}
.est-etapa-titulo{font-size:15px; font-weight:700; color:var(--texto); margin:0;}
.est-etapa-texto{font-size:12.5px; color:#5c5f54; margin:2px 0 0;}

.est-linha{display:flex; flex-wrap:wrap; gap:6px 8px; margin-top:6px;}
.est-campo{display:flex; flex-direction:column; gap:2px;}
.est-campo-rotulo{font-size:11.5px; color:#5c5f54; line-height:1.2; white-space:nowrap;}
.est-w-s{width:90px;} .est-w-m{width:110px;} .est-w-l{width:130px;}
.est-w-nome{width:200px;} .est-w-forma{width:230px;}
.est-inp{height:32px; box-sizing:border-box; border:1px solid #d2c9b6; border-radius:6px; padding:2px 8px; font-size:14px; background:#fff;
  color:var(--texto); font-variant-numeric:tabular-nums; width:100%;}
.est-inp:focus{outline:2px solid var(--verde-lavoura); outline-offset:1px;}
@media (max-width:640px){ .est-inp{font-size:16px;} }
.est-nota{font-size:12px; color:#5c5f54; margin:6px 0 0;}
.est-destaque{font-size:13px; font-weight:600; color:var(--texto); background:var(--verde-tinta,#eef4ec); border-radius:8px; padding:6px 10px; margin:0 0 8px;}

.est-btn{min-height:44px; padding:6px 12px; border-radius:8px; font-size:13.5px; cursor:pointer; background:#fff; border:1px solid #d2c9b6; color:var(--texto);}
.est-btn-contorno{border-color:var(--verde-lavoura); color:var(--verde-lavoura); font-weight:600;}
.est-btn-contorno:hover{background:var(--verde-lavoura); color:#fff;}
.est-btn-leve{border-color:transparent; background:transparent; text-decoration:underline; text-underline-offset:3px; color:#5c5f54; padding:6px 8px;}
.est-btn-perigo{border-color:transparent; background:transparent; color:var(--neg); text-decoration:underline; text-underline-offset:3px; padding:6px 8px;}
.est-btn-ajuda{min-width:44px; border-radius:50%; font-weight:700; color:#0369a1; border-color:#0369a1; padding:0;}
.est-proximo{display:flex; justify-content:flex-end; margin-top:4px;}
.est-add{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}

.est-receitas{display:flex; flex-direction:column; gap:6px; margin-top:6px;}
.est-receita{display:flex; flex-direction:column; gap:2px; text-align:left; min-height:44px; padding:8px 10px; border:1px solid var(--borda-suave,#e8e5da);
  border-radius:8px; background:#f6f5f1; cursor:pointer;}
.est-receita:hover{border-color:var(--verde-lavoura);}
.est-receita-nome{font-weight:700; color:var(--texto); font-size:13.5px;}
.est-receita-resumo{font-size:12.5px; color:#5c5f54;}
.est-receita-aprender{font-size:11.5px; color:#0369a1;}

.est-peca{border:1px solid var(--borda-suave,#e8e5da); border-radius:10px; padding:8px 10px; margin-top:8px; background:#fff;}
.est-desligada{opacity:.55; background:#f6f5f1;}
.est-peca-topo{display:flex; flex-wrap:wrap; align-items:center; gap:4px;}
.est-peca-acoes{margin-left:auto; display:flex; gap:2px;}
.est-selo{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--verde-lavoura);
  background:var(--verde-tinta,#eef4ec); border-radius:999px; padding:3px 8px;}
.est-selo-protecao{color:#0369a1; background:#e6f1f8;}
.est-selo-credito{color:#8a6a0d; background:#f8f0dc;}

.est-alocacao{margin:4px 0 2px;}
.est-alocacao-trilho{height:10px; border-radius:999px; background:#e8e5da; overflow:hidden;}
.est-alocacao-cheio{display:block; height:100%; background:var(--verde-lavoura);}
.est-alocacao-excesso{background:var(--neg);}
.est-alocacao-texto{font-size:12px; color:#5c5f54; margin:4px 0 0;}

.est-segurar{margin-top:8px; background:#f6f5f1; border-radius:8px; padding:8px 10px; font-size:12.5px; line-height:1.4;}
.est-segurar-titulo{font-weight:700; margin:0 0 2px;}
.est-segurar ul{margin:0; padding-left:16px;}

.est-cet{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; background:#f8f0dc; border-radius:8px; padding:6px 10px; margin-top:6px;}
.est-cet-rotulo{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#8a6a0d;}
.est-cet-valor{font-size:17px; font-weight:700; color:var(--texto); font-variant-numeric:tabular-nums;}
.est-cet-origem{font-size:12px; color:#5c5f54;}
.est-aviso-inline{font-size:12px; color:#8a6a0d; margin:4px 0 0;}
.est-descontos{margin-top:8px;}
.est-desconto{display:flex; align-items:center; gap:4px;}
.est-desconto-nome{width:52px; font-size:12.5px; color:var(--texto);}
.est-inp-modo{width:56px;}
.est-inp-desconto{width:90px;}
.est-check{display:flex; align-items:center; gap:8px; min-height:44px; font-size:13px; margin-top:4px;}

/* ── Janela sobre a tela (ajuda, alertas, detalhe) ─────── */
.est-veu{position:fixed; inset:0; z-index:60; background:rgba(35,41,31,.45); display:flex; align-items:center; justify-content:center; padding:16px;}
.est-modal{background:#fff; border-radius:14px; max-width:560px; width:100%; max-height:90vh; overflow-y:auto; padding:18px; font-size:14.5px; line-height:1.5;}
.est-ajuda-titulo{font-size:17px; font-weight:700; margin:0 0 6px;}
.est-ajuda-familia{font-size:13px; color:#0369a1; margin:0 0 8px;}

/* ── Compactação das faixas em volta do gráfico (desktop) ──
   O gráfico é o elemento que cresce; tudo ao redor dele é denso. */
@media (min-width:768px){
  .est-modo-btn{min-height:30px; padding:2px 10px;}
  .est-faixa-alertas, .est-faixa-alertas .est-alerta, .est-sem-alerta{height:32px;}
  .est-painel{padding:8px 10px; gap:4px;}
}