/* ===== AgroAgenda — folha de estilo ===== */
:root{
  --verde:#2f7a3e; --verde-esc:#1e5228; --verde-claro:#e8f3e9;
  --terra:#8a6b3d; --amarelo:#e0a020; --vermelho:#c0392b; --azul:#2b6cb0;
  --bg:#f4f6f3; --surface:#ffffff; --surface-2:#fafbf9;
  --texto:#1f2a22; --texto-2:#5d6b60; --borda:#dde3dc;
  --sombra:0 1px 2px rgba(20,40,25,.06), 0 4px 14px rgba(20,40,25,.06);
  --r:10px; --r-sm:7px;
  --fs:14px;
}
@media (prefers-color-scheme: dark){
  :root{
    --verde:#5cb46e; --verde-esc:#8fd39c; --verde-claro:#1a2b1e;
    --bg:#12160f; --surface:#1a1f18; --surface-2:#161b14;
    --texto:#e6ece5; --texto-2:#9db0a1; --borda:#2c352a;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--texto);
  font:var(--fs)/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0 0 .4em; line-height:1.25; font-weight:650}
h1{font-size:1.35rem} h2{font-size:1.1rem} h3{font-size:.98rem} h4{font-size:.88rem}
p{margin:0 0 .7em}
a{color:var(--verde)}
small{font-size:.82em}

/* ===== Layout ===== */
#app{display:flex; min-height:100vh}
#sidebar{
  width:222px; flex:0 0 222px; background:var(--surface); border-right:1px solid var(--borda);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.brand{display:flex; gap:10px; align-items:center; padding:14px 12px; border-bottom:1px solid var(--borda); position:relative}
.brand-logo{font-size:24px; flex:0 0 auto}
.brand-txt{flex:1; min-width:0}
.brand strong{display:block; font-size:15px; letter-spacing:-.2px}
.brand small{display:block; color:var(--texto-2); font-size:11.5px; margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#btn-recolher{flex:0 0 auto; font-size:14px}

#nav{display:flex; flex-direction:column; padding:8px 8px 14px; gap:1px; overflow-y:auto; flex:1}
.nav-item{
  display:flex; align-items:center; gap:9px; padding:8px 10px; border:0; border-radius:var(--r-sm);
  background:none; color:var(--texto); font:inherit; font-size:13.5px; cursor:pointer; text-align:left; width:100%;
}
.nav-item .ic{flex:0 0 18px; width:18px; text-align:center; font-size:14px}
.nav-item .tx{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nav-item:hover{background:var(--verde-claro)}
.nav-item.active{background:var(--verde); color:#fff; font-weight:600}

/* grupos retráteis */
.nav-grupo{display:flex; flex-direction:column}
.nav-grupo > .nav-cab{
  display:flex; align-items:center; gap:9px; padding:8px 10px; border:0; border-radius:var(--r-sm);
  background:none; color:var(--texto-2); font:inherit; font-size:11px; font-weight:750;
  text-transform:uppercase; letter-spacing:.5px; cursor:pointer; width:100%; text-align:left;
}
.nav-grupo > .nav-cab:hover{background:var(--verde-claro); color:var(--texto)}
.nav-cab .ic{flex:0 0 18px; width:18px; text-align:center; font-size:14px}
.nav-cab .tx{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nav-cab .seta{font-size:9px; color:var(--texto-2); transition:transform .18s; flex:0 0 auto}
.nav-grupo.aberto > .nav-cab .seta{transform:rotate(90deg)}
.nav-grupo > .nav-sub{display:none; flex-direction:column; gap:1px; margin:1px 0 4px}
.nav-grupo.aberto > .nav-sub{display:flex}
.nav-sub .nav-item{padding-left:14px; font-size:13px}
.nav-sub .nav-item .ic{font-size:13px}
.nav-sub .nav-item:not(.active){color:var(--texto-2)}
.nav-sub .nav-item:not(.active):hover{color:var(--texto)}
.nav-grupo.tem-ativo > .nav-cab{color:var(--verde); }

.sidebar-foot{padding:10px; border-top:1px solid var(--borda); display:flex; gap:6px}
.sidebar-foot .btn{flex:1; font-size:11.5px; padding:6px 4px; gap:4px}

/* ---- estado recolhido ---- */
#app.recolhido #sidebar{width:58px; flex:0 0 58px}
#app.recolhido .brand{padding:12px 0; justify-content:center; gap:0}
#app.recolhido .brand-txt{display:none}
#app.recolhido .brand-logo{display:none}
#app.recolhido #btn-recolher{font-size:17px; padding:6px 10px}
#app.recolhido #nav{padding:8px 6px; align-items:center}
#app.recolhido .nav-cab{display:none}
#app.recolhido .nav-grupo > .nav-sub{display:flex}
#app.recolhido .nav-grupo{border-bottom:1px solid var(--borda); padding-bottom:4px; margin-bottom:4px; width:100%}
#app.recolhido .nav-grupo:last-of-type{border-bottom:0}
#app.recolhido .nav-item{justify-content:center; padding:9px 0; width:44px}
#app.recolhido .nav-item .tx{display:none}
#app.recolhido .nav-sub .nav-item{padding-left:0}
#app.recolhido .sidebar-foot{flex-direction:column; padding:8px 6px}
#app.recolhido .sidebar-foot .tx{display:none}
#app.recolhido .sidebar-foot .btn{font-size:13px; padding:7px 0}

#main{flex:1; min-width:0; display:flex; flex-direction:column}
#topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:14px 22px; background:var(--surface); border-bottom:1px solid var(--borda);
  position:sticky; top:0; z-index:400;
}
#topbar-actions{display:flex; gap:8px; flex-wrap:wrap}
#view{padding:20px 22px 60px; flex:1}

/* ===== Componentes ===== */
.card{background:var(--surface); border:1px solid var(--borda); border-radius:var(--r); box-shadow:var(--sombra); padding:16px; margin-bottom:16px; min-width:0; max-width:100%}
.card > h2:first-child, .card > h3:first-child{margin-top:0}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.card-head h2,.card-head h3{margin:0}
/* minmax(0,…) e min-width:0 impedem que um filho largo (tabela, texto sem quebra)
   estufe a coluna e force rolagem lateral na página inteira */
.grid{display:grid; gap:14px}
.grid > *{min-width:0}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(165px,100%),1fr))}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.row.end{justify-content:flex-end}
.spacer{flex:1}
.muted{color:var(--texto-2)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px}
.center{text-align:center}
.right{text-align:right}
.nowrap{white-space:nowrap}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 13px; border-radius:var(--r-sm); border:1px solid var(--borda);
  background:var(--surface); color:var(--texto); font:inherit; font-size:13px; font-weight:550;
  cursor:pointer; white-space:nowrap; transition:filter .12s,background .12s;
}
.btn:hover{filter:brightness(.97)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--verde); border-color:var(--verde); color:#fff}
.btn-danger{background:var(--vermelho); border-color:var(--vermelho); color:#fff}
.btn-warn{background:var(--amarelo); border-color:var(--amarelo); color:#241c00}
.btn-ghost{background:transparent}
.btn-sm{padding:5px 9px; font-size:12px}
.btn:disabled{opacity:.5; cursor:not-allowed}
/* modo selecionado numa barra de ferramentas — contorno, não preenchimento */
.btn.modo-ativo{box-shadow:inset 0 0 0 2px var(--verde); background:var(--verde-claro); font-weight:700}
.icon-btn{background:none;border:0;color:var(--texto-2);font-size:16px;cursor:pointer;padding:4px 6px;border-radius:6px;line-height:1}
.icon-btn:hover{background:var(--verde-claro); color:var(--texto)}

label{display:block; font-size:12px; font-weight:600; color:var(--texto-2); margin-bottom:3px}
input,select,textarea{
  width:100%; padding:7px 9px; border:1px solid var(--borda); border-radius:var(--r-sm);
  background:var(--surface-2); color:var(--texto); font:inherit; font-size:13px;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--verde); outline-offset:-1px; background:var(--surface)}
textarea{min-height:62px; resize:vertical}
input[type=checkbox],input[type=radio]{width:auto; accent-color:var(--verde)}
.field{margin-bottom:11px}
.field-inline{display:flex; align-items:center; gap:7px}
.field-inline label{margin:0; font-weight:500; font-size:13px; color:var(--texto)}
fieldset{border:1px solid var(--borda); border-radius:var(--r-sm); padding:11px; margin:0 0 12px}
legend{font-size:12px; font-weight:650; color:var(--texto-2); padding:0 5px}

table{width:100%; border-collapse:collapse; font-size:13px}
th,td{padding:7px 9px; text-align:left; border-bottom:1px solid var(--borda); vertical-align:middle}
th{font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--texto-2); font-weight:700; white-space:nowrap}
tbody tr:hover{background:var(--surface-2)}
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0}
td.acoes{white-space:nowrap; text-align:right}

.tag{display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:650; background:var(--verde-claro); color:var(--verde-esc); white-space:nowrap}
.tag.cinza{background:var(--borda); color:var(--texto-2)}
.tag.verde{background:#dff3e2; color:#1e5228}
.tag.amarelo{background:#fdf0d5; color:#8a6414}
.tag.vermelho{background:#fbe0dc; color:#8c2b1e}
.tag.azul{background:#dde9f7; color:#204a78}
.tag.roxo{background:#e9e0f7; color:#4a2878}
@media (prefers-color-scheme: dark){
  .tag.verde{background:#1d3a24;color:#8fd39c} .tag.amarelo{background:#3a3016;color:#e8c46a}
  .tag.vermelho{background:#3d1f1a;color:#e79a8c} .tag.azul{background:#1b2c40;color:#8ab6e8}
  .tag.roxo{background:#2a2140;color:#bda6ea}
}

.kpi{background:var(--surface); border:1px solid var(--borda); border-radius:var(--r); padding:13px 15px; box-shadow:var(--sombra)}
.kpi .v{font-size:23px; font-weight:700; letter-spacing:-.5px; line-height:1.15}
.kpi .l{font-size:11.5px; color:var(--texto-2); text-transform:uppercase; letter-spacing:.4px; font-weight:650}
.kpi .s{font-size:11.5px; color:var(--texto-2); margin-top:2px}
.kpi.ok .v{color:var(--verde)} .kpi.alerta .v{color:var(--amarelo)} .kpi.critico .v{color:var(--vermelho)}

.alert{display:flex; gap:9px; padding:9px 12px; border-radius:var(--r-sm); font-size:12.8px; margin-bottom:8px; border:1px solid transparent; align-items:flex-start}
.alert b{font-weight:700}
.alert-erro{background:#fbe0dc; border-color:#f0bdb4; color:#7d2417}
.alert-aviso{background:#fdf0d5; border-color:#f0dcac; color:#7a5811}
.alert-info{background:#dde9f7; border-color:#bcd3ee; color:#1d456f}
.alert-ok{background:#dff3e2; border-color:#b9e0c2; color:#1c4d26}
@media (prefers-color-scheme: dark){
  .alert-erro{background:#3d1f1a;border-color:#5e2f26;color:#f0b6a9}
  .alert-aviso{background:#3a3016;border-color:#57481f;color:#efd08b}
  .alert-info{background:#1b2c40;border-color:#2b4463;color:#a8c9ee}
  .alert-ok{background:#1d3a24;border-color:#2c5636;color:#a8dcb4}
}
.alert .ico{font-size:14px; line-height:1.35}

.vazio{padding:34px 18px; text-align:center; color:var(--texto-2); font-size:13px}
.vazio .big{font-size:34px; display:block; margin-bottom:8px; opacity:.65}

/* ===== Modal ===== */
#modal-root{position:fixed; inset:0; z-index:9000}
#modal-root[hidden]{display:none}
.modal-camada{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:18px}
.modal-backdrop{position:absolute; inset:0; background:rgba(15,25,18,.5); backdrop-filter:blur(2px)}
.modal{
  position:relative; background:var(--surface); border-radius:12px; box-shadow:0 18px 48px rgba(0,0,0,.28);
  width:min(760px,100%); max-height:90vh; display:flex; flex-direction:column; border:1px solid var(--borda);
}
.modal.wide{width:min(1060px,100%)}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:13px 17px; border-bottom:1px solid var(--borda)}
.modal-head h2{margin:0; font-size:1.02rem}
.modal-body{padding:17px; overflow-y:auto; flex:1}
.modal-foot{padding:12px 17px; border-top:1px solid var(--borda); display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap}
.modal-foot .spacer{flex:1}

#toast-root{position:fixed; right:16px; bottom:16px; z-index:9500; display:flex; flex-direction:column; gap:8px; align-items:flex-end}
.toast{background:var(--texto); color:var(--bg); padding:9px 14px; border-radius:8px; font-size:13px; box-shadow:0 6px 20px rgba(0,0,0,.25); animation:slidein .18s ease}
.toast.ok{background:var(--verde); color:#fff}
.toast.erro{background:var(--vermelho); color:#fff}
@keyframes slidein{from{opacity:0; transform:translateY(8px)}}

/* ===== Mapa ===== */
.mapa{height:420px; border-radius:var(--r); border:1px solid var(--borda); overflow:hidden; z-index:1}
.mapa.sm{height:290px}
.mapa.lg{height:540px}
.map-toolbar{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; align-items:center}
.leaflet-container{font:inherit; background:#e8ece6}
.leaflet-top,.leaflet-bottom{z-index:380}
.pin-praga{background:none;border:0}
.pin-praga div{
  width:22px;height:22px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.vert-handle{background:#fff;border:2px solid var(--verde);border-radius:50%}

/* ===== Calendário ===== */
/* minmax(0,…) impede que um chip de texto longo estufe a coluna e a grade inteira */
.cal{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px}
.cal-dow{font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--texto-2); font-weight:700; text-align:center; padding:3px 0}
.cal-dia{
  min-height:98px; min-width:0; border:1px solid var(--borda); border-radius:8px; padding:5px; background:var(--surface-2);
  display:flex; flex-direction:column; gap:3px; cursor:pointer; position:relative; overflow:hidden;
}
.cal-dia:hover{border-color:var(--verde)}
.cal-dia.fora{opacity:.4}
.cal-dia.hoje{border-color:var(--verde); border-width:2px; padding:4px}
.cal-dia.nao-util{background:var(--verde-claro)}
.cal-dia .n{font-size:12px; font-weight:700; display:flex; justify-content:space-between; align-items:center; gap:3px}
.cal-dia .n .fer{font-size:9px; font-weight:600; color:var(--vermelho); text-align:right; line-height:1.1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:70%}
.cal-dia .clima{font-size:9.5px; color:var(--texto-2); display:flex; gap:4px; align-items:center; flex-wrap:wrap}
.chip{
  font-size:10.5px; padding:2px 5px; border-radius:5px; background:var(--verde); color:#fff;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; font-weight:600;
}
.chip.aplicacao{background:var(--azul)} .chip.plantio{background:var(--verde)}
.chip.colheita{background:var(--terra)} .chip.adubacao{background:#7a5aa8}
.chip.outro{background:var(--texto-2)}
.chip.realizada{opacity:.55; text-decoration:line-through}
.chip.temalerta{box-shadow:inset 0 0 0 2px var(--amarelo)}

/* ===== Clima ===== */
.janela{display:flex; gap:2px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px}
.hora{
  flex:0 0 40px; text-align:center; font-size:9.5px; border-radius:5px; padding:3px 1px; color:#fff; line-height:1.25;
  cursor:default;
}
.hora.ideal{background:#2f7a3e} .hora.atencao{background:#e0a020; color:#241c00} .hora.ruim{background:#c0392b}
.hora b{display:block; font-size:10.5px}
/* ===== caderno de campo (histórico da safra) ===== */
.dados-safra{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr)); gap:10px; font-size:13.5px}
.dados-safra b{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.4px;
  color:var(--texto-2); font-weight:700}

.linha-tempo{display:flex; flex-direction:column; gap:9px}
.lt-item{display:grid; grid-template-columns:62px 1fr; gap:11px; border:1px solid var(--borda);
  border-left:4px solid var(--texto-2); border-radius:var(--r-sm); padding:10px 12px; background:var(--surface-2)}
.lt-item.aplicacao{border-left-color:var(--azul)}
.lt-item.plantio{border-left-color:var(--verde)}
.lt-item.colheita{border-left-color:var(--terra)}
.lt-item.adubacao{border-left-color:#7a5aa8}
.lt-data{text-align:center; line-height:1.25; padding-top:1px}
.lt-data b{display:block; font-size:14px}
.lt-data small{display:block; font-size:10px; color:var(--texto-2)}
.lt-corpo{min-width:0}
.lt-cab{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:3px}
.lt-cab b{font-size:13.5px}
.lt-meta{font-size:11.5px; color:var(--texto-2); margin-bottom:4px}
.lt-produtos{display:flex; gap:6px; flex-wrap:wrap; margin:4px 0}
.lt-produtos span{font-size:11.5px; background:var(--verde-claro); color:var(--verde-esc);
  padding:2px 8px; border-radius:20px}
.lt-clima{font-size:11.5px; color:var(--texto); background:var(--surface); border:1px dashed var(--borda);
  border-radius:6px; padding:5px 8px; margin-top:5px; display:inline-block}
.lt-clima.sem{color:var(--texto-2); font-style:italic; border-style:dotted}
.lt-obs{font-size:12px; color:var(--texto-2); margin-top:5px; font-style:italic}
@media(max-width:620px){
  .lt-item{grid-template-columns:48px 1fr; gap:8px; padding:9px 10px}
  .lt-data b{font-size:12.5px}
}

/* ===== gráficos financeiros ===== */
.graf-barras{display:flex; flex-direction:column; gap:7px; margin:4px 0}
.gb-linha{display:grid; grid-template-columns:minmax(120px,1.5fr) 3fr minmax(88px,auto); gap:10px; align-items:center}
.gb-rot{font-size:12.5px; line-height:1.3; overflow:hidden}
.gb-rot small{display:block; color:var(--texto-2); font-size:11px}
.gb-trilho{position:relative; height:16px; background:var(--surface-2); border-radius:4px; overflow:hidden;
  display:flex; align-items:center; border:1px solid var(--borda)}
.gb-trilho.centro{justify-content:center}
.gb-trilho.centro::before{content:''; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--borda)}
.gb-barra{display:block; height:12px; border-radius:0 4px 4px 0; min-width:2px; transition:width .25s}
.gb-trilho.centro .gb-barra{position:absolute; left:50%}
.gb-trilho.centro .gb-barra.neg{left:auto; right:50%; border-radius:4px 0 0 4px}
.gb-val{font-size:12.5px; font-weight:700; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.gb-val.neg{color:var(--vermelho)}
.gb-pilha{display:flex; height:12px; border-radius:0 4px 4px 0; overflow:hidden; gap:2px; min-width:2px}
.gb-pilha i{display:block; height:100%}
.gb-pilha i:last-child{border-radius:0 4px 4px 0}

.graf-grupos{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.gg-bloco{border:1px solid var(--borda); border-radius:var(--r-sm); padding:10px 12px; background:var(--surface-2)}
.gg-rot{font-size:13px; font-weight:700; margin-bottom:7px}
.gg-rot small{display:block; font-weight:500; color:var(--texto-2); font-size:11px}
.gg-series{display:flex; flex-direction:column; gap:5px}
.gg-linha{display:grid; grid-template-columns:62px 1fr minmax(84px,auto); gap:8px; align-items:center}
.gg-nome{font-size:11.5px; color:var(--texto-2)}
.gg-val{font-size:12px; font-weight:700; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.gg-val.neg{color:var(--vermelho)}

.graf-matriz td.mx-cel{text-align:right; vertical-align:middle; min-width:96px}
.mx-val{display:block; font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap}
.mx-barra{display:block; height:5px; border-radius:3px; background:var(--surface-2);
  border:1px solid var(--borda); overflow:hidden; margin-top:3px}
.mx-barra i{display:block; height:100%; border-radius:2px}

.graf-legenda{display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--texto-2); margin-top:10px}
.graf-legenda i{display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:5px; vertical-align:-1px}
@media(max-width:620px){
  .gb-linha{grid-template-columns:minmax(90px,1fr) 2fr auto; gap:6px}
  .gb-rot{font-size:11.5px}
}

/* gráfico de chuva em mm */
.chuva-graf{display:flex; gap:4px; align-items:flex-end; overflow-x:auto; padding-bottom:4px}
.chuva-col{flex:1 0 42px; display:flex; flex-direction:column; align-items:center; gap:3px; min-width:42px}
.chuva-mm{font-size:10px; font-weight:700; color:var(--texto-2); white-space:nowrap}
.chuva-barra{width:100%; height:78px; display:flex; align-items:flex-end; background:var(--surface-2);
  border-radius:4px; overflow:hidden; border:1px solid var(--borda)}
.chuva-barra i{display:block; width:100%; border-radius:3px 3px 0 0; transition:height .2s}
.chuva-dia{font-size:9.5px; color:var(--texto-2); text-align:center; line-height:1.25; white-space:nowrap}

.dia-clima{border:1px solid var(--borda); border-radius:var(--r-sm); padding:10px; background:var(--surface-2)}
.dia-clima.hoje{border-color:var(--verde)}
.dia-clima h4{margin:0 0 5px; display:flex; justify-content:space-between; align-items:center; gap:6px; font-size:13px}
.barra{height:6px; border-radius:4px; background:var(--borda); overflow:hidden; display:flex}
.barra i{display:block; height:100%}

/* ===== Memória de cálculo ===== */
.memoria{
  background:var(--surface-2); border:1px dashed var(--borda); border-left:3px solid var(--verde);
  border-radius:var(--r-sm); padding:11px 13px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px; line-height:1.65; white-space:pre-wrap; overflow-x:auto; margin:0 0 12px; color:var(--texto);
}
.memoria .tit{font-weight:700; color:var(--verde-esc)}
.passo{display:flex; gap:8px; padding:3px 0; border-bottom:1px dotted var(--borda)}
.passo:last-child{border:0}
.passo .op{color:var(--texto-2)}

details.acc{border:1px solid var(--borda); border-radius:var(--r-sm); margin-bottom:8px; background:var(--surface-2)}
details.acc > summary{padding:9px 12px; cursor:pointer; font-weight:600; font-size:13px; list-style:none; display:flex; justify-content:space-between; gap:8px; align-items:center}
details.acc > summary::-webkit-details-marker{display:none}
details.acc > summary::after{content:'▾'; color:var(--texto-2); transition:transform .15s}
details.acc[open] > summary::after{transform:rotate(180deg)}
details.acc > div{padding:0 12px 12px}

.itens-lista{display:flex; flex-direction:column; gap:8px}
.item-linha{display:grid; grid-template-columns:1fr 92px 122px 40px; gap:7px; align-items:end}
.item-linha .del{align-self:end}
@media(max-width:720px){ .item-linha{grid-template-columns:1fr 1fr} }

.legenda{display:flex; gap:12px; flex-wrap:wrap; font-size:11.5px; color:var(--texto-2); margin-top:8px}
.legenda i{display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:4px; vertical-align:-1px}

.print-doc{background:#fff; color:#111; padding:24px; border-radius:var(--r-sm); border:1px solid #ddd; font-size:13px; line-height:1.6}
.print-doc h3{color:#1e5228; border-bottom:2px solid #2f7a3e; padding-bottom:5px}
.print-doc table{font-size:12.5px}
.print-doc th,.print-doc td{border-bottom:1px solid #e2e2e2; color:#111}
.print-doc th{color:#555}

/* ===================================================================
   CELULAR E TABLET
   O menu continua empilhado na coluna da esquerda; em telas estreitas
   vira a faixa de ícones e pode ser aberto por cima do conteúdo.
   =================================================================== */
@media (max-width:860px){
  #sidebar{width:196px; flex:0 0 196px}
  #view{padding:14px}
  #topbar{padding:11px 14px}
  #topbar h1{font-size:1.12rem}
  .mapa{height:360px} .mapa.lg{height:420px} .mapa.sm{height:260px}
  .grid.g4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  /* a 1ª coluna acompanha a rolagem lateral, para não perder o contexto da linha */
  .table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .table-wrap thead th:first-child,
  .table-wrap tbody td:first-child{
    position:sticky; left:0; z-index:2; background:var(--surface);
    box-shadow:1px 0 0 var(--borda)}
}

@media (max-width:760px){
  /* faixa de ícones fixa, com área de toque confortável */
  #app.recolhido #sidebar{width:54px; flex:0 0 54px}
  #app.recolhido .nav-item{width:44px; height:44px; padding:0}
  #app.recolhido .nav-item .ic{font-size:17px}
  #app.recolhido #nav{gap:3px; padding:8px 5px}
  #app.recolhido .nav-grupo{padding-bottom:6px; margin-bottom:6px}
  #app.recolhido .sidebar-foot .btn{min-height:40px}

  /* menu aberto POR CIMA do conteúdo, sem espremer a tela */
  #app.menu-aberto #sidebar{
    position:fixed; top:0; left:0; bottom:0; z-index:8000; width:238px; flex-basis:238px;
    box-shadow:6px 0 24px rgba(0,0,0,.28); overflow-y:auto;
    padding-bottom:env(safe-area-inset-bottom);
  }
  #app.menu-aberto .brand-txt, #app.menu-aberto .brand-logo{display:block}
  #app.menu-aberto .brand{padding:14px 12px; justify-content:flex-start; gap:10px}
  #app.menu-aberto .nav-cab{display:flex}
  #app.menu-aberto .nav-item{width:100%; height:auto; padding:11px 10px; justify-content:flex-start}
  #app.menu-aberto .nav-item .tx{display:block}
  #app.menu-aberto .nav-sub .nav-item{padding-left:14px}
  #app.menu-aberto #nav{padding:8px; align-items:stretch}
  #app.menu-aberto .sidebar-foot{flex-direction:row}
  #app.menu-aberto .sidebar-foot .tx{display:inline}
  #veu-menu{position:fixed; inset:0; z-index:7900; background:rgba(15,25,18,.45); backdrop-filter:blur(1px)}

  /* indicadores em 2 colunas: 3+1 deixa um card órfão */
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}

  #btn-menu{display:inline-flex !important; flex:0 0 auto}
  /* título numa linha, ações na outra — o nome da tela não pode ser cortado */
  #topbar{padding:10px 12px; gap:8px; flex-wrap:wrap; align-items:center}
  #topbar h1{font-size:1.05rem; flex:1 1 auto; min-width:0}
  #topbar-actions{gap:6px; flex:1 1 100%; justify-content:flex-start}
  #topbar-actions:empty{display:none}
  #topbar-actions > select{flex:1 1 140px; min-width:0}
  #view{padding:12px 12px 26px}
}

@media (max-width:620px){
  :root{--fs:15px; --r:9px}
  #view{padding:11px 11px 24px}
  #topbar{padding:9px 11px; padding-top:calc(9px + env(safe-area-inset-top))}
  #sidebar{padding-top:env(safe-area-inset-top)}

  /* toque não dispara zoom no iOS quando a fonte é >= 16px */
  input,select,textarea{font-size:16px; padding:10px 11px}
  /* rótulos longos quebram em vez de estourar a largura da tela */
  .btn{min-height:40px; padding:9px 13px; white-space:normal; max-width:100%; text-align:center}
  .btn-sm{min-height:34px; padding:6px 10px; font-size:12.5px}
  .icon-btn{min-width:34px; min-height:34px}
  label{font-size:12.5px}

  /* indicadores em duas colunas em vez de uma */
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px}
  .grid.g3, .grid.g2{grid-template-columns:1fr}
  .kpi{padding:11px 12px}
  .kpi .v{font-size:19px}
  .kpi .l{font-size:10.5px}
  .kpi .s{font-size:11px}
  .card{padding:13px; margin-bottom:12px}
  .card-head{gap:8px}
  h1{font-size:1.18rem} h2{font-size:1.02rem}

  /* tabelas: rolam de lado com a 1ª coluna fixa, para não perder o contexto */
  .table-wrap{position:relative; overflow-x:auto; scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch; border-radius:var(--r-sm)}
  .table-wrap table{font-size:12.5px; min-width:max-content}
  .table-wrap th, .table-wrap td{padding:7px 8px}
  .table-wrap thead th:first-child,
  .table-wrap tbody td:first-child{
    position:sticky; left:0; z-index:2; background:var(--surface);
    box-shadow:1px 0 0 var(--borda); max-width:130px}
  .table-wrap tbody tr:hover td:first-child{background:var(--surface-2)}
  .rolavel::after{content:'↔ arraste para ver mais'; display:block; text-align:right;
    font-size:11px; color:var(--texto-2); margin-top:4px}

  /* modais quase em tela cheia */
  #modal-root .modal-camada{padding:0}
  .modal, .modal.wide{width:100%; max-width:100%; max-height:100dvh; height:100dvh;
    border-radius:0; border:0}
  .modal-head{padding:12px 14px; padding-top:calc(12px + env(safe-area-inset-top))}
  .modal-body{padding:13px}
  .modal-foot{padding:10px 12px; padding-bottom:calc(10px + env(safe-area-inset-bottom));
    gap:7px; position:sticky; bottom:0; background:var(--surface)}
  .modal-foot .btn{flex:1 1 auto; min-width:0}
  .modal-foot .spacer{display:none}
  .modal-body .grid.g2{grid-template-columns:1fr}
  .row > div[style*="flex"]{min-width:100% !important}
  .item-linha{grid-template-columns:1fr 1fr !important; gap:8px}
  .item-linha .del{grid-column:span 2; justify-self:end}

  /* calendário compacto: o dia vira um ponto colorido por atividade */
  .cal{gap:3px}
  .cal-dia{min-height:58px; padding:3px; gap:2px; border-radius:6px}
  .cal-dia .n{font-size:11px}
  .cal-dia .n .fer{display:none}
  .cal-dia .clima{display:none}
  .cal-dia .chip{font-size:0; padding:0; height:6px; border-radius:3px; min-height:6px}
  .cal-dia.hoje{padding:2px}
  .cal-dow{font-size:9.5px}

  /* gráficos */
  .gb-linha{grid-template-columns:minmax(78px,1fr) 1.6fr auto; gap:6px}
  .gb-rot{font-size:11.5px} .gb-rot small{font-size:10px}
  .gb-val{font-size:11.5px}
  .graf-grupos{grid-template-columns:1fr}
  .gg-linha{grid-template-columns:54px 1fr auto}
  .chuva-col{flex:0 0 38px; min-width:38px}
  .janela{gap:3px} .hora{flex:0 0 36px; font-size:9px}

  .map-toolbar{gap:5px}
  .map-toolbar .btn{flex:1 1 auto}
  .mapa{height:56vh; min-height:250px} .mapa.lg{height:62vh} .mapa.sm{height:44vh; min-height:210px}

  .legenda, .graf-legenda{gap:9px; font-size:11px}
  #toast-root{left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); align-items:stretch}
  .toast{text-align:center}
  .print-doc{padding:14px}
}

@media (max-width:420px){
  .kpi .v{font-size:17px; letter-spacing:-.3px}
  .kpi .l{font-size:9.5px; letter-spacing:.3px}
  .kpi .s{font-size:10px; line-height:1.3}
  #topbar-actions .btn{font-size:12px; padding:8px 10px}
  .cal-dia{min-height:52px}
}
@media (max-width:340px){
  .grid.g4{grid-template-columns:1fr}
}

/* aparelho com tela de toque: alvos maiores e sem estados de hover presos */
@media (hover:none){
  .nav-item, .btn, .icon-btn{-webkit-tap-highlight-color:transparent}
  tbody tr:hover{background:none}
  .nav-item:hover{background:none}
  .nav-item.active{background:var(--verde)}
}
@media print{
  #sidebar,#topbar,.modal-foot,.no-print{display:none!important}
  body,#view{background:#fff; padding:0}
  .card{box-shadow:none; border-color:#ccc; break-inside:avoid}
}

/* ===== Ficha de preparo da calda =====
   Pensada para ser lida em pé, ao lado do pulverizador, e no papel.
   Números grandes, alto contraste e nada que dependa só de cor. */
.ficha-calda{font-size:15px}
.ficha-calda .fc-cabecalho{border-bottom:3px solid var(--texto); padding-bottom:10px; margin-bottom:14px}
.ficha-calda .fc-cabecalho h1{font-size:26px; margin:0 0 2px; letter-spacing:-.01em}
.ficha-calda .fc-cabecalho h2{font-size:17px; margin:0 0 10px; font-weight:600; color:var(--texto-2)}
.fc-dados{display:flex; flex-wrap:wrap; gap:8px 22px}
.fc-dado{display:flex; flex-direction:column; min-width:0}
.fc-dado span{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--texto-2)}
.fc-dado b{font-size:17px; white-space:nowrap}

.fc-aviso{border:2px solid var(--borda); border-radius:var(--r); padding:10px 13px; margin-bottom:13px; font-size:14px}
.fc-aviso.erro{border-color:var(--vermelho); background:rgba(192,57,43,.08)}
.fc-aviso.erro b{font-size:18px; color:var(--vermelho)}
.fc-aviso.aviso{border-color:var(--amarelo); background:rgba(224,160,32,.10)}
.fc-aviso.ok{border-color:var(--verde); background:var(--verde-claro)}

.fc-editor{border:1px dashed var(--borda); border-radius:var(--r); padding:11px 13px; margin-bottom:16px}
.fc-editor-cab{display:flex; flex-direction:column; margin-bottom:9px}
.fc-editor-cab small{font-size:12px}
.fc-vols{display:flex; flex-wrap:wrap; gap:9px; align-items:center}
.fc-vol{display:flex; align-items:center; gap:5px; border:1px solid var(--borda);
  border-radius:var(--r-sm); padding:4px 9px; background:var(--surface-2)}
.fc-vol.parcial{border-color:var(--amarelo); border-width:2px}
.fc-vol span{font-size:12px; color:var(--texto-2); white-space:nowrap}
.fc-vol input{width:78px; font-size:16px; font-weight:650; padding:3px 5px; text-align:right;
  border:0; background:transparent; color:var(--texto)}
.fc-vol em{font-style:normal; font-size:12px; color:var(--texto-2)}

.fc-carga{border:2px solid var(--texto); border-radius:var(--r); margin-bottom:15px;
  overflow:hidden; break-inside:avoid; page-break-inside:avoid}
.fc-carga.parcial{border-color:var(--amarelo)}
/* cores fixas, não tokens do tema: a barra tem de ficar escura o bastante para
   texto branco tanto no claro quanto no escuro */
.fc-carga-cab{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:9px 14px; background:#1e5228; color:#fff}
.fc-carga.parcial .fc-carga-cab{background:#8a5f0a; color:#fff}
@media (prefers-color-scheme: dark){
  .fc-carga-cab{background:#2c6b39}
  .fc-carga.parcial .fc-carga-cab{background:#9c6d10}
}
.fc-n{font-size:22px; font-weight:800; letter-spacing:.02em}
.fc-n small{font-size:12px; font-weight:500; opacity:.8; margin-left:5px}
.fc-litros{font-size:24px; font-weight:800; text-align:right; white-space:nowrap}
.fc-litros small{display:block; font-size:11px; font-weight:700; letter-spacing:.08em; opacity:.85}

table.tab-carga{width:100%; border-collapse:collapse}
table.tab-carga td, table.tab-carga th{border-bottom:1px solid var(--borda); padding:11px 12px; vertical-align:middle}
table.tab-carga tr:last-child td{border-bottom:0}
table.tab-carga tr[data-check]{cursor:pointer}
table.tab-carga tr[data-check]:hover{background:var(--surface-2)}
table.tab-carga tr.feito{background:var(--verde-claro)}
table.tab-carga tr.feito .fc-prod b, table.tab-carga tr.feito .fc-qtd b{text-decoration:line-through; opacity:.6}
.fc-ord{width:46px; text-align:center; font-size:19px; font-weight:800; color:var(--texto-2)}
/* o quadradinho de marcar — no papel fica vazio para o operador riscar */
table.tab-carga tr[data-check] .fc-ord::after{
  content:''; display:block; width:20px; height:20px; margin:5px auto 0;
  border:2px solid var(--texto-2); border-radius:4px}
table.tab-carga tr.feito .fc-ord::after{content:'✓'; color:#fff; background:var(--verde);
  border-color:var(--verde); font-size:14px; line-height:17px; font-weight:800}
.fc-prod b{font-size:18px; letter-spacing:-.01em; display:block; line-height:1.2}
.fc-prod small{display:block; font-size:12px; color:var(--texto-2); margin-top:3px; font-weight:500}
.fc-form{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.06em;
  border:1.5px solid var(--texto-2); border-radius:4px; padding:0 5px; vertical-align:2px}
.fc-qtd{text-align:right; white-space:nowrap; width:34%}
.fc-qtd b{font-size:26px; font-weight:800; letter-spacing:-.02em; display:block; line-height:1.1}
.fc-qtd small{display:block; font-size:12px; color:var(--texto-2); margin-top:2px}
.fc-passo td{background:var(--surface-2); font-size:14px}
.fc-passo b{font-size:15px}

.fc-avulso{border:1px dashed var(--borda); border-radius:var(--r); padding:11px 13px; margin-bottom:15px}
.fc-avulso #vol-avulso{font-size:18px; font-weight:650; text-align:right}
.fc-avulso .tab-carga{margin-top:9px}

.fc-rodape{border-top:3px solid var(--texto); padding-top:11px}
.fc-rodape table.resumo th{font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--texto-2); text-align:left; border-bottom:2px solid var(--borda)}
.fc-rodape table.resumo th.right, .fc-rodape table.resumo td.right{text-align:right}
.fc-assina{display:flex; flex-wrap:wrap; gap:14px 26px; margin:18px 0 8px}
.fc-assina div{flex:1; min-width:150px}
.fc-assina span{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--texto-2)}
.fc-assina i{display:block; border-bottom:1.5px solid var(--texto-2); height:26px}
.fc-nota{font-size:12px; color:var(--texto-2); margin:9px 0 0}
.fc-nota.alerta{color:var(--amarelo); font-weight:600; padding:0 13px 11px}

@media (max-width:620px){
  .ficha-calda .fc-cabecalho h1{font-size:21px}
  .fc-n{font-size:18px} .fc-litros{font-size:20px}
  .fc-prod b{font-size:16px} .fc-qtd b{font-size:22px}
  .fc-ord{width:38px; font-size:17px}
  table.tab-carga td{padding:10px 8px}
  .fc-qtd{width:38%}
}
/* celular: nome e dose param de disputar a mesma linha — a dose vai embaixo,
   em corpo grande, e o nome usa a largura inteira */
@media (max-width:520px){
  table.tab-carga, table.tab-carga tbody{display:block}
  table.tab-carga tr{display:grid; grid-template-columns:42px 1fr;
    border-bottom:1px solid var(--borda)}
  table.tab-carga tr:last-child{border-bottom:0}
  table.tab-carga td{border:0; padding:9px 10px}
  .fc-ord{grid-row:1 / -1; align-self:start; padding:11px 0 0}
  .fc-prod{grid-column:2; padding-bottom:0}
  .fc-prod b{font-size:17px}
  .fc-qtd{grid-column:2; width:auto; text-align:left; padding-top:2px}
  .fc-qtd b{font-size:27px; display:inline}
  .fc-qtd small{display:inline; margin-left:8px}
  .fc-passo td:last-child{grid-column:2}
}
/* no papel: preto no branco, sem sombra, uma carga nunca partida ao meio */
@media print{
  .ficha-calda{font-size:12pt; color:#000}
  .ficha-calda .fc-cabecalho, .fc-rodape{border-color:#000}
  .fc-carga{border-color:#000}
  .fc-carga-cab{background:#000!important; color:#fff!important}
  .fc-carga.parcial .fc-carga-cab{background:#000!important; color:#fff!important}
  .fc-carga.parcial{border-width:3px; border-style:double}
  table.tab-carga tr.feito{background:transparent}
  table.tab-carga tr.feito .fc-prod b, table.tab-carga tr.feito .fc-qtd b{text-decoration:none; opacity:1}
  table.tab-carga tr.feito .fc-ord::after{content:''; background:transparent; border-color:#000}
  .fc-aviso.erro{border-width:3px}
}

/* repetir aplicação em vários talhões, cada um com a sua dose */
fieldset.dup-talhao{margin:0 0 10px; border-color:var(--borda)}
fieldset.dup-talhao.ativo{border-color:var(--verde); background:var(--verde-claro)}
fieldset.dup-talhao legend{padding:0 4px}
fieldset.dup-talhao legend label{cursor:pointer}
fieldset.dup-talhao table{font-size:13px}
.dose-par{display:flex; gap:6px; align-items:center}
.dose-par input{width:80px; text-align:right; flex:0 0 auto}
.dose-par select{min-width:0; flex:1 1 auto}

/* agenda filtrada por um talhão: ficha de identificação no topo */
.ficha-talhao{border-left:4px solid var(--verde)}
.ft-dados{display:flex; flex-wrap:wrap; gap:10px 24px}
.ft-dado{display:flex; flex-direction:column; min-width:0}
.ft-dado span{font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--texto-2)}
.ft-dado b{font-size:14px}
/* seletor de pulverizador dentro da ficha de preparo */
.fc-pulv{margin-bottom:14px}
.fc-pulv .field{margin-bottom:0}

/* ===== calendário: dia colorido pela aptidão para pulverizar =====
   A cor vem sempre acompanhada de símbolo (● ▲ ■) e palavra — quem não
   distingue cores lê o calendário igual. */
.cal-dia.apt-ideal{background:rgba(47,122,62,.13); border-color:rgba(47,122,62,.45)}
.cal-dia.apt-atencao{background:rgba(224,160,32,.15); border-color:rgba(224,160,32,.5)}
.cal-dia.apt-ruim{background:rgba(192,57,43,.12); border-color:rgba(192,57,43,.42)}
.cal-dia.apt-ideal::before,
.cal-dia.apt-atencao::before,
.cal-dia.apt-ruim::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
}
.cal-dia.apt-ideal::before{background:var(--verde)}
.cal-dia.apt-atencao::before{background:var(--amarelo)}
.cal-dia.apt-ruim::before{background:var(--vermelho)}
/* o fim de semana continua reconhecível pela borda tracejada */
.cal-dia.nao-util.apt-ideal, .cal-dia.nao-util.apt-atencao, .cal-dia.nao-util.apt-ruim{
  border-style:dashed; border-width:2px; padding:4px
}
.apt-selo{display:flex; align-items:baseline; gap:4px; flex-wrap:wrap; font-size:9.5px; line-height:1.2; padding-left:3px}
.apt-selo b{font-size:10px; letter-spacing:.01em}
.apt-selo span{color:var(--texto-2)}
.cal-dia.apt-ideal .apt-selo b{color:var(--verde-esc)}
.cal-dia.apt-atencao .apt-selo b{color:#8a5f0a}
.cal-dia.apt-ruim .apt-selo b{color:var(--vermelho)}
@media (prefers-color-scheme: dark){
  .cal-dia.apt-ideal .apt-selo b{color:#7fd08e}
  .cal-dia.apt-atencao .apt-selo b{color:#f0c25a}
  .cal-dia.apt-ruim .apt-selo b{color:#f08076}
}
.legenda .lg-apt{font-weight:650}
.legenda .lg-apt.ideal{color:var(--verde)}
.legenda .lg-apt.atencao{color:var(--amarelo)}
.legenda .lg-apt.ruim{color:var(--vermelho)}
.apt-selo b i{font-style:normal}
.apt-selo b .sim{margin-right:3px}
@media (max-width:620px){
  /* no celular só cabe o símbolo — a palavra fica no toque sobre o dia */
  .apt-selo span, .apt-selo b .txt{display:none}
  .apt-selo{justify-content:center; padding:0}
  .apt-selo b .sim{font-size:15px; margin:0}
  .cal-dia.apt-ideal::before, .cal-dia.apt-atencao::before, .cal-dia.apt-ruim::before{width:3px}
}

/* contador de pano de batida — usado em pé, no meio da lavoura */
.contador-campo .cc-linha{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.contador-campo .cc-rot{flex:1; font-size:16px; font-weight:650}
.contador-campo .cc-valor{min-width:62px; text-align:center; font-size:30px; font-weight:800;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.contador-campo .cc-btn{width:56px; height:56px; border-radius:14px; border:2px solid var(--borda);
  background:var(--surface-2); color:var(--texto); font-size:26px; font-weight:700; cursor:pointer;
  line-height:1; -webkit-tap-highlight-color:transparent}
.contador-campo .cc-btn:active{transform:scale(.94)}
.contador-campo .cc-btn.mais{background:var(--verde); border-color:var(--verde); color:#fff}
.contador-campo .cc-total{border-top:2px solid var(--borda); padding-top:10px; margin-top:4px;
  font-size:15px; text-align:right}
.contador-campo .cc-total b{font-size:22px}

/* escolha de quem fornece cada item do pedido — preço não é o único critério */
.ofertas-item{display:flex; flex-direction:column; gap:6px; min-width:260px}
.of-card{display:flex; align-items:flex-start; gap:8px; padding:7px 9px; cursor:pointer;
  border:1.5px solid var(--borda); border-radius:var(--r-sm); background:var(--surface-2)}
.of-card:hover{border-color:var(--verde)}
.of-card.ativa{border-color:var(--verde); border-width:2px; background:var(--verde-claro); padding:6px 8px}
.of-card input{margin-top:3px; flex:0 0 auto}
.of-corpo{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1}
.of-topo{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.of-topo b{font-size:13px}
.of-topo em{font-style:normal; font-weight:700; font-size:14px; white-space:nowrap}
.of-tags{display:flex; flex-wrap:wrap; gap:4px}
.of-tags .tag{font-size:10px}
.of-cond, .of-obs{font-size:11px; color:var(--texto-2); line-height:1.3}
.of-obs{font-style:italic}
@media (max-width:620px){
  .ofertas-item{min-width:0}
  .of-topo{flex-wrap:wrap; gap:2px}
}
/* o nome do produto acompanha a rolagem lateral das ofertas */
table.tab-escolha thead th:first-child,
table.tab-escolha tbody td.col-produto{
  position:sticky; left:0; z-index:2; background:var(--surface); min-width:168px;
  box-shadow:1px 0 0 var(--borda)}
table.tab-escolha td.col-produto b{font-size:13px}

/* registro do que foi executado, dentro da ficha de preparo */
.fc-exec{border:2px dashed var(--borda); border-radius:var(--r); padding:12px 14px; margin:16px 0}
.fc-exec h3{margin:0 0 2px}
.fc-hora{display:inline-block; font-size:11px; font-weight:700; color:var(--verde-esc);
  background:var(--verde-claro); border-radius:4px; padding:1px 5px; margin-left:6px; white-space:nowrap}
@media (prefers-color-scheme: dark){ .fc-hora{color:#bfe6c7; background:rgba(47,122,62,.3)} }
@media print{ .fc-exec{border-style:solid; border-color:#000} .fc-hora{color:#000; background:transparent; border:1px solid #000} }

/* chuvas do ciclo da safra */
.chuva-meses{display:flex; gap:8px; align-items:flex-end; min-height:130px;
  padding:6px 2px; overflow-x:auto}
.cm-col{display:flex; flex-direction:column; align-items:center; gap:4px; min-width:42px; flex:1}
.cm-val{font-size:11.5px; font-weight:700; white-space:nowrap}
.cm-barra{width:100%; max-width:46px; height:88px; display:flex; align-items:flex-end;
  background:var(--surface-2); border-radius:4px; overflow:hidden}
.cm-barra i{display:block; width:100%; background:var(--azul); border-radius:4px 4px 0 0}
.cm-rot{font-size:10.5px; color:var(--texto-2); text-align:center; line-height:1.15}
.cm-grave{color:var(--vermelho)}
.chuva-dias{display:flex; gap:1px; align-items:flex-end; height:86px; padding:4px 0;
  border-bottom:1.5px solid var(--borda); overflow-x:auto}
.chuva-dias i{display:block; flex:1 0 2px; min-width:2px; background:var(--azul);
  border-radius:1px 1px 0 0; cursor:help}
.chuva-dias i.prev{background:var(--texto-2); opacity:.55}
.chuva-eixo{display:flex; justify-content:space-between; gap:8px; font-size:10.5px;
  color:var(--texto-2); margin-top:4px}
@media print{
  .cm-barra i, .chuva-dias i{background:#000!important}
  .chuva-dias i.prev{background:#888!important}
}
.contador-campo .cc-cab{display:flex; flex-direction:column; gap:2px; margin-bottom:12px;
  padding-bottom:9px; border-bottom:1px solid var(--borda)}
.contador-campo .cc-cab b{font-size:15px}
.contador-campo .cc-cab span{font-size:12.5px; color:var(--texto-2)}
.contador-campo .cc-cab small{font-size:11.5px; color:var(--texto-2); font-family:ui-monospace,Menlo,monospace}
/* marca de incerteza no dia: os modelos de previsão não concordam */
.apt-duvida{font-style:normal; font-weight:800; font-size:11px; color:var(--texto-2);
  border:1.5px solid var(--texto-2); border-radius:50%; width:14px; height:14px;
  display:inline-flex; align-items:center; justify-content:center; cursor:help; flex:0 0 auto}

/* agenda em semana e em 3 dias: menos dias na tela, mais detalhe em cada um */
.cal-semana .cal-dia{min-height:230px}
.cal-dias3 .cal-dia{min-height:300px}
.cal-semana .cal-dia .n, .cal-dias3 .cal-dia .n{font-size:14px}
.cal-semana .cal-dia .n small, .cal-dias3 .cal-dia .n small{
  font-size:10.5px; font-weight:600; color:var(--texto-2); text-transform:uppercase}
.cal-semana .cal-dia .clima, .cal-dias3 .cal-dia .clima{font-size:11.5px}
.cal-semana .apt-selo b, .cal-dias3 .apt-selo b{font-size:12px}
.cal-semana .apt-selo span, .cal-dias3 .apt-selo span{font-size:11px}
.cal-semana .chip, .cal-dias3 .chip{font-size:12px; padding:4px 7px; white-space:normal}
.cal-dias3 .cal-dia .fer{max-width:100%}
@media (max-width:620px){
  /* no celular, semana e 3 dias viram uma coluna só — cabe o dia inteiro */
  .cal.cal-semana, .cal.cal-dias3{grid-template-columns:1fr!important}
  .cal-semana .cal-dia, .cal-dias3 .cal-dia{min-height:0}
  .cal-semana .cal-dia .clima, .cal-dias3 .cal-dia .clima{display:flex}
  .cal-semana .cal-dia .n .fer, .cal-dias3 .cal-dia .n .fer{display:inline}
  .cal-semana .chip, .cal-dias3 .chip{font-size:12px; padding:4px 7px; height:auto; min-height:0; border-radius:6px}
  .cal-semana .apt-selo .txt, .cal-dias3 .apt-selo .txt{display:inline}
  .cal-semana .apt-selo span, .cal-dias3 .apt-selo span{display:inline}
}
/* média do talhão por fase do inseto, dentro da classificação */
table.tab-fases{width:100%; border-collapse:collapse; margin:10px 0 8px; font-size:12.5px}
table.tab-fases th{font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--texto-2); text-align:left; padding:0 6px 3px; border-bottom:1px solid var(--borda)}
table.tab-fases th.right, table.tab-fases td.right{text-align:right}
table.tab-fases td{padding:3px 6px; border-bottom:1px solid var(--borda)}
table.tab-fases tr:last-child td{border-bottom:0}
table.tab-fases td:first-child{color:var(--texto-2)}

/* galeria de fotos das ocorrências */
.galeria{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
.galeria .foto{margin:0; border:1px solid var(--borda); border-radius:var(--r-sm);
  overflow:hidden; background:var(--surface-2); display:flex; flex-direction:column}
.galeria .foto img{width:100%; aspect-ratio:4/3; object-fit:cover; cursor:zoom-in;
  background:var(--borda); display:block}
.galeria .foto figcaption{display:flex; gap:4px; align-items:center; padding:5px 5px 2px}
.galeria .foto figcaption input{font-size:12px; padding:3px 5px; min-width:0; flex:1}
.galeria .foto small{padding:0 7px 6px; font-size:10.5px}
@media (max-width:620px){
  .galeria{grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px}
}
@media print{ .galeria{grid-template-columns:repeat(3,1fr)} .galeria .foto figcaption button{display:none} }