/* ROI Foliar — Agrobiozone · tema claro e limpo com identidade da marca
   Paleta/fontes oficiais: ver /static/brand/ (espelho de brand/ do repo). */

/* ---- Fontes da marca ---- */
@font-face { font-family:"HeadingNow"; font-weight:700; font-display:swap; src:url("/static/brand/fonts/HeadingNow-56Bold.ttf") format("truetype"); }
@font-face { font-family:"HeadingNow"; font-weight:800; font-display:swap; src:url("/static/brand/fonts/HeadingNow-57Extrabold.ttf") format("truetype"); }
@font-face { font-family:"HeadingPro"; font-weight:400; font-display:swap; src:url("/static/brand/fonts/HeadingPro-Regular.ttf") format("truetype"); }
@font-face { font-family:"HeadingPro"; font-weight:700; font-display:swap; src:url("/static/brand/fonts/HeadingPro-Bold.ttf") format("truetype"); }

:root {
  /* paleta oficial */
  --cyan:#00AFEF; --verde-claro:#95C949; --verde-medio:#54B952; --verde-escuro:#079D50;
  --gradiente:linear-gradient(90deg,var(--cyan) 0%,var(--verde-medio) 55%,var(--verde-escuro) 100%);
  /* neutros (tema claro) */
  --bg:#f5f8f6; --card:#ffffff; --line:#e3eae6; --txt:#0f2e22; --sub:#5b7268;
  /* acentos de dado */
  --green:var(--verde-escuro); --p1:var(--verde-escuro); --p2:var(--cyan); --p3:var(--verde-claro);
  --inv:#e07a3e; /* investimento (laranja de contraste) */
  --font-titulo:"HeadingNow",system-ui,Arial,sans-serif;
  --font-texto:"HeadingPro",system-ui,Arial,sans-serif;
}
* { box-sizing:border-box }
body { font-family:var(--font-texto); background:var(--bg); color:var(--txt); margin:0; padding:0 16px 48px; -webkit-font-smoothing:antialiased }

/* ---- Cabeçalho com logo ---- */
header { display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:1000px; margin:0 auto; padding:18px 0 16px; border-bottom:1px solid var(--line) }
.brand { display:flex; align-items:center; gap:12px; min-width:0 }
.brand img { height:46px; width:auto; display:block }
.brand .titles { display:flex; flex-direction:column; line-height:1.15 }
.brand .wordmark { font-family:var(--font-titulo); font-weight:800; font-size:20px; letter-spacing:.5px;
  background:var(--gradiente); -webkit-background-clip:text; background-clip:text; color:transparent; text-transform:uppercase }
.brand h1 { font-family:var(--font-texto); font-weight:400; font-size:13px; color:var(--sub); margin:1px 0 0 }
.print { font-family:var(--font-texto); background:#fff; color:var(--verde-escuro); border:1px solid var(--verde-medio);
  border-radius:9px; padding:9px 14px; cursor:pointer; font-size:13px; font-weight:700; white-space:nowrap; transition:.15s }
.print:hover { background:var(--verde-escuro); color:#fff; border-color:var(--verde-escuro) }

/* ---- Layout ---- */
form { max-width:1000px; margin:18px auto 0; display:flex; flex-direction:column; gap:16px }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:0 1px 2px rgba(15,46,34,.04) }
h2 { font-family:var(--font-titulo); font-weight:700; font-size:15px; margin:0 0 14px; color:var(--txt) }
h2 small { color:var(--sub); font-weight:400; font-family:var(--font-texto) }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
label { display:block; font-size:12px; color:var(--sub) }
input, select { width:100%; margin-top:5px; padding:10px; border-radius:9px; border:1px solid var(--line);
  background:#fff; color:var(--txt); font-size:14px; font-family:var(--font-texto) }
input:focus, select:focus { outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,175,239,.12) }
.combo { display:flex; gap:6px; margin-top:5px } .combo input { margin:0; flex:2 } .combo select { margin:0; flex:1 }
details { margin-top:14px } summary { cursor:pointer; color:var(--verde-escuro); font-size:13px; font-weight:700 }

/* faixas / sliders */
.faixa { margin:12px 0; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fbfdfc }
.faixa-head { display:flex; justify-content:space-between; align-items:center; font-size:14px }
.faixa-head .cur { color:var(--verde-escuro); font-weight:700; font-family:var(--font-titulo) }
.faixa input[type=range] { width:100%; margin:10px 0; accent-color:var(--cyan) }
.minmax { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--sub) }
.minmax input { width:90px; margin:0 }

/* equipamento + financiamento */
.equip { display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px; margin-top:10px; font-size:13px; color:var(--sub) }
.equip .modelo { font-weight:700; color:var(--verde-escuro); font-family:var(--font-titulo) }
.equip input { width:120px; display:inline-block }
.fin { margin-top:14px; padding-top:14px; border-top:1px dashed var(--line) }
.fin-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:8px }
.fin .parcela { margin-top:10px; font-size:14px; color:var(--txt) }
.fin .parcela b { font-family:var(--font-titulo); color:var(--verde-escuro); font-size:18px }

/* KPIs */
.head { display:grid; grid-template-columns:repeat(4,1fr); gap:12px }
.big { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:14px; text-align:center }
.big span { font-size:12px; color:var(--sub); display:block }
.big b { font-family:var(--font-titulo); font-weight:800; font-size:24px; display:block; margin:5px 0; color:var(--verde-escuro) }
.big small { font-size:11px; color:var(--sub) }
.big.invest b { color:var(--cyan) }

/* pilares */
.pilares { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px }
.pilar { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:14px; border-top:3px solid var(--line) }
.pilar span { font-size:12px; color:var(--sub); display:block } .pilar b { font-family:var(--font-titulo); font-size:19px; font-weight:700 } .pilar small { color:var(--sub) }
.pilar.p1 { border-top-color:var(--p1) } .pilar.p1 b { color:var(--p1) }
.pilar.p2 { border-top-color:var(--p2) } .pilar.p2 b { color:var(--p2) }
.pilar.p3 { border-top-color:var(--p3) } .pilar.p3 b { color:var(--p3) }

/* gráficos */
.charts { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px }
.chartbox { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; min-height:240px }

.fin-resumo { margin:14px 0 0; padding:10px 12px; background:var(--bg); border:1px solid var(--line);
  border-radius:10px; font-size:12.5px; color:var(--sub) }
.fin-resumo b { font-family:var(--font-titulo); color:var(--verde-escuro) }

.selos { margin:14px 0 0; padding:12px 14px; border:1px solid var(--line); border-radius:12px;
  background:linear-gradient(0deg,#fbfdfc,#fff) }
.selos-tit { font-family:var(--font-titulo); font-weight:700; font-size:12px; text-transform:uppercase;
  letter-spacing:.5px; color:var(--verde-escuro); display:block; margin-bottom:8px }
.selos ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px }
.selos li { font-size:13px; color:var(--txt); display:flex; align-items:center; gap:6px }
.selos li small { color:var(--sub) }
.selos .check { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
  border-radius:50%; background:var(--verde-medio); color:#fff; font-size:11px; font-weight:700 }

footer { max-width:1000px; margin:18px auto; color:var(--sub); font-size:11px; text-align:center }

@media (max-width:720px){ .grid,.head,.pilares,.charts,.fin-grid{ grid-template-columns:1fr } .brand .wordmark{ font-size:17px } }

@media print {
  /* cores da marca saem no PDF (sem isso o navegador remove os fundos/realces) */
  html, body, * { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  body{ background:#fff; padding:0 6mm 6mm } header .print{ display:none } header{ border-color:#ccc }
  .card{ box-shadow:none; padding:14px; border-radius:10px }
  form{ gap:10px; margin-top:10px }
  /* PDF do cliente: esconde os controles técnicos (faixa min/max crua e o slider de cenário) */
  .minmax{ display:none } .faixa input[type=range]{ display:none } .faixa{ margin:6px 0; padding:8px }
  /* nada de card/gráfico/KPI cortado entre páginas */
  .card, .chartbox, .charts, .big, .pilar, .selos, .fin-resumo, .faixa { break-inside:avoid; page-break-inside:avoid }
  .head, .pilares { break-inside:avoid }
  .chartbox,.big,.pilar,.faixa{ background:#fff }
}