/* =========================================================
   visao-simples.css — camada ADICIONAL da "Visão simples".
   Não altera nenhuma regra existente: todo seletor é prefixado
   .vs- e vive dentro de #sec-operacao / #sec-planejamento sem
   tocar nas classes das telas completas.
   Paleta e tokens vêm de css/styles.css (:root), sem cor nova.
   ========================================================= */

/* ── Barra Simples / Completo ───────────────────────────── */
.vs-barra{display:flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--borda-suave);
  border-radius:999px; padding:4px; box-shadow:var(--sombra-1);}
.vs-barra button{border:0; background:transparent; font-family:var(--fonte); font-size:13px; font-weight:600;
  /* MEDIDO: var(--neutro) (#8a8d83) sobre branco fecha só 3,38:1 nesta
     fonte de 13px, abaixo dos 4,5:1 exigidos para texto normal. #6b6e64
     é o mesmo tom neutro, mais escuro, e fecha 5,2:1 sem mudar a
     hierarquia visual (aba inativa continua mais apagada que a ativa). */
  color:#6b6e64; padding:0 14px; min-height:44px; display:inline-flex; align-items:center;
  border-radius:999px; cursor:pointer; white-space:nowrap;}
.vs-barra button:hover{color:var(--texto);}
.vs-barra button.ativo{background:var(--verde-lavoura); color:#fff;}

.vs-topo{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:16px;}
.vs-topo h2{font-size:22px; font-weight:700; color:var(--verde-lavoura); margin:0;}
.vs-topo-fazenda{font-weight:400; font-size:15px; color:#5c5f54;}
/* Abaixo de 560px o cabecalho verde ja mostra o nome da fazenda: repetir
   aqui so forca a quebra de linha do titulo (ex.: "Lavoura" isolado numa
   linha propria, empurrando o alternador Simples/Completo pra baixo). */
@media (max-width:560px){ .vs-topo-fazenda{display:none;} }

/* Frase de propósito logo abaixo do título de uma tela Simples (hoje só
   Mercado & Decisão usa). #5c5f54 é o mesmo tom neutro já medido acima
   de 4,5:1 sobre o fundo claro, em 15px. */
.vs-subtitulo{font-size:15px; color:#5c5f54; margin:-6px 0 14px; max-width:60ch;}

/* ── Hero: o número que manda na tela ───────────────────── */
.vs-hero{border-radius:var(--raio); padding:20px 22px; margin-bottom:14px; box-shadow:var(--sombra-1);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.vs-hero.pos{background:var(--verde-tinta); border:1px solid #c9e0c6;}
.vs-hero.neg{background:#fbeceb; border:1px solid #f0c9c5;}
.vs-hero .rot{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px;}
.vs-hero.pos .rot{color:#3d6b3f;} .vs-hero.neg .rot{color:#8a4a45;}
.vs-hero .num{font-size:36px; font-weight:700; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums;}
.vs-hero.pos .num{color:var(--pos);} .vs-hero.neg .num{color:var(--neg);}
.vs-hero .frase{font-size:13px; margin-top:8px; max-width:52ch;}
.vs-hero.pos .frase{color:#3d6b3f;} .vs-hero.neg .frase{color:#8a4a45;}
.vs-hero .lado{font-size:12px; text-align:right; line-height:1.7;}
.vs-hero .lado b{font-size:15px; color:var(--texto); font-variant-numeric:tabular-nums;}

/* ── Dois blocos (entradas / saídas) ────────────────────── */
.vs-tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-bottom:14px;}
.vs-tile{background:var(--card); border:1px solid var(--borda-suave); border-radius:var(--raio); padding:14px 16px;
  box-shadow:var(--sombra-1); display:flex; align-items:center; gap:12px;}
.vs-tile .ico{width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.vs-tile .ico.pos{background:var(--verde-tinta);} .vs-tile .ico.neg{background:#fbeceb;}
.vs-tile .lbl{font-size:11.5px; color:#5c5f54;}
.vs-tile .val{font-size:19px; font-weight:700; font-variant-numeric:tabular-nums;}
.vs-tile .val.pos{color:var(--pos);} .vs-tile .val.neg{color:var(--neg);}

/* ── Cartão genérico da visão simples ───────────────────── */
.vs-card{background:var(--card); border:1px solid var(--borda-suave); border-radius:var(--raio);
  box-shadow:var(--sombra-1); padding:16px 18px; margin-bottom:14px;}
.vs-card > .tit{font-size:14px; font-weight:700; margin-bottom:14px; display:flex; align-items:baseline;
  justify-content:space-between; gap:10px;}
.vs-card > .tit .dica{font-size:11.5px; font-weight:400; color:#5c5f54;}
.vs-graf{position:relative; height:230px;}

/* ── Ranking de barras (para onde vai o dinheiro) ───────── */
.vs-rank{display:flex; flex-direction:column; gap:11px;}
.vs-rank .lin .top{display:flex; justify-content:space-between; gap:10px; font-size:12.5px; margin-bottom:4px;}
.vs-rank .lin .top b{font-variant-numeric:tabular-nums;}
.vs-rank .lin .track{height:9px; border-radius:6px; background:#eef0ef; overflow:hidden;}
.vs-rank .lin .fill{height:100%; border-radius:6px; background:var(--verde-lavoura);}
.vs-rank .lin .fill.terra{background:var(--terra-clara);}

/* ── Barras divergentes em torno do zero ────────────────── */
.vs-div{position:relative;}
.vs-div .zero{position:absolute; left:50%; top:0; bottom:0; width:1.5px; background:#c9c5b8;}
.vs-div .lin{display:flex; align-items:center; gap:10px; padding:5px 0;}
.vs-div .lin.destaque{background:#faf1dc; margin:0 -8px; padding:7px 8px; border-radius:10px;}
.vs-div .lin .nome{width:34%; font-size:12.5px; text-align:right; color:#5c5f54; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;}
.vs-div .lin.destaque .nome{color:var(--texto); font-weight:700;}
.vs-div .lin .faixa{flex:1; position:relative; height:20px;}
.vs-div .lin .faixa > i{position:absolute; height:100%; display:block;}
.vs-div .lin .faixa > i.neg{right:50%; background:var(--neg); border-radius:6px 0 0 6px;}
.vs-div .lin .faixa > i.pos{left:50%; background:var(--pos); border-radius:0 6px 6px 0;}
.vs-div .lin .num{width:112px; text-align:right; font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums;}
.vs-div .lin .num.pos{color:var(--pos);} .vs-div .lin .num.neg{color:var(--neg);}

/* ── Cabeçalho do orçamento (Planejamento simples) ──────── */
.vs-orc{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.vs-orc .ico{width:44px; height:44px; border-radius:12px; background:var(--verde-tinta); display:flex;
  align-items:center; justify-content:center; font-size:20px; flex:0 0 auto;}
.vs-orc .nome{font-weight:700; font-size:15px;}
.vs-orc .sub{font-size:11.5px; color:#5c5f54; margin-top:2px;}
.vs-orc .pe{margin-left:auto; text-align:right;}
.vs-orc .pe .lbl{font-size:10.5px; color:#5c5f54;}
.vs-orc .pe .val{font-size:15px; font-weight:700;
  /* MEDIDO: var(--dourado-soja) (#d9a521) como texto de 15px sobre branco
     fecha so 2,24:1. #8a6a0d e o mesmo tom dourado, mais escuro, e fecha
     5,06:1 sem perder a identidade da cor. */
  color:#8a6a0d; font-variant-numeric:tabular-nums;}

.vs-nota{font-size:12.5px; color:#5c5f54; margin-top:12px; padding-top:11px; border-top:1px solid var(--borda-suave);}
.vs-vazio{padding:30px; text-align:center; color:#5c5f54; font-size:13px;}

/* ── Cartão de status: 3 estados (Visão Geral simples) ──── */
.vs-status{display:flex; align-items:flex-start; gap:14px; border-radius:var(--raio); padding:20px 22px;
  margin-bottom:14px; box-shadow:var(--sombra-1);}
.vs-status-ico{font-size:30px; line-height:1; flex:0 0 auto;}
.vs-status-tit{font-size:17px; font-weight:700; margin-bottom:4px;}
.vs-status-txt{font-size:13.5px; max-width:56ch; line-height:1.45;}
.vs-status--pos{background:var(--verde-tinta); border:1px solid #c9e0c6;}
.vs-status--pos .vs-status-tit{color:var(--verde-escuro);}
.vs-status--pos .vs-status-txt{color:#3d6b3f;}
.vs-status--alerta{background:#fbf3dd; border:1px solid #ecd693;}
.vs-status--alerta .vs-status-tit,.vs-status--alerta .vs-status-txt{color:#6b4e00;}
.vs-status--neg{background:#fbeceb; border:1px solid #f0c9c5;}
.vs-status--neg .vs-status-tit,.vs-status--neg .vs-status-txt{color:#8a4a45;}

/* ── Pares rótulo/valor (caixa hoje x menor saldo) ──────── */
.vs-pares{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-bottom:14px;}
.vs-par{background:var(--card); border:1px solid var(--borda-suave); border-radius:var(--raio); padding:14px 16px;
  box-shadow:var(--sombra-1);}
.vs-par .lbl{font-size:11.5px; color:#5c5f54; margin-bottom:4px;}
.vs-par .val{font-size:21px; font-weight:700; letter-spacing:-.01em; font-variant-numeric:tabular-nums;}
.vs-par--pos .val{color:var(--pos);}
.vs-par--neg .val{color:var(--neg);}
.vs-par .nota{font-size:11px; color:#5c5f54; margin-top:6px; line-height:1.4;}

/* ── Lista de ações ("o que fazer hoje") ────────────────── */
.vs-acoes{display:flex; flex-direction:column; gap:10px;}
.vs-item-acao{display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--borda-suave);
  border-radius:var(--raio); padding:13px 15px; box-shadow:var(--sombra-1);}
.vs-item-acao .ico{width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  font-size:19px; flex:0 0 auto; background:var(--verde-tinta);}
.vs-item-acao--negativa .ico{background:#fbeceb;}
.vs-item-acao--alerta .ico{background:#fbf3dd;}
.vs-item-acao .txt{flex:1 1 auto; min-width:0;}
.vs-item-acao .txt .principal{font-size:13.5px; font-weight:600; color:var(--texto);}
.vs-item-acao .txt .sub{font-size:11.5px; color:#5c5f54; margin-top:2px;}
.vs-item-acao .acao{flex:0 0 auto;}
.vs-item-acao .acao button{min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--verde-claro); background:#fff; color:var(--verde-lavoura); font-family:var(--fonte);
  font-weight:600; font-size:12.5px; padding:0 15px; border-radius:999px; cursor:pointer; white-space:nowrap;}
.vs-item-acao .acao button:hover{background:var(--verde-tinta);}
.vs-item-acao--negativa .acao button{border-color:var(--neg); color:var(--neg);}
.vs-item-acao--negativa .acao button:hover{background:#fbeceb;}

@media (max-width:520px){
  .vs-item-acao{flex-wrap:wrap;}
  .vs-item-acao .acao{width:100%;}
  .vs-item-acao .acao button{width:100%;}
}

/* ── Revelação "Como cheguei nesse número" (Mercado & Decisão) ──
   Gauntlet de UX, jornada "Decidir se vende o grão agora ou
   espera" (volta 2): veto de acessibilidade no celular. O
   <summary> nativo do <details class="card"> só herdava a altura
   da linha de texto (~20px, text-sm do Tailwind), abaixo do alvo
   mínimo de toque de 44x44px. Reaproveita o mesmo padrão de altura
   mínima já usado em .vs-item-acao .acao button acima (min-height
   44px + display flex + align-items center), sem alargar o cartão
   inteiro e sem mudar o texto do rótulo. */
#sec-mercado details.card > summary{
  min-height:44px; display:flex; align-items:center; padding:10px 0; cursor:pointer;
}