/* ==========================================================================
   AGRACTA — casca de uso
   Uma gaveta no topo para as ferramentas, uma faixa de datas no rodapé para os
   índices. O mapa fica limpo; o polegar alcança tudo. Carregado por último.
   ========================================================================== */

/* ---- o dock flutuante sai de cena; o FAB vira o botão do topo ---- */
.toolbar-extra,.toolbar-extra.open{display:none!important}

/* O painel antigo continua existindo para o resto do código perguntar "o NDVI
   está ligado?" (ele lê style.display). Some da tela, mas responde igual. */
#ndviPanel{display:none!important}

/* Mesma história com o painel da máscara: nesta casca quem regula a opacidade
   é a linha da gaveta mais a régua do rodapé, onde dá para VER o mapa mudando.
   O painel continua no app.js como reserva de quem não tem esta folha. */
#mascaraPanel{display:none!important}

/* ---- botão único no topo ---- */
.btn-tools{order:0!important;position:relative}
.btn-tools.on{color:var(--gp-green,#3bd27f)!important;border-color:var(--gp-green,#3bd27f)!important}
.btn-tools .ag-dot{
  position:absolute;top:5px;right:6px;width:7px;height:7px;border-radius:50%;
  background:var(--gp-green,#3bd27f);box-shadow:0 0 0 2px var(--gp-s1,#111c16);display:none
}
.btn-tools.layer-on .ag-dot{display:block}

/* ---- gaveta ---- */
.ag-drawer-bg{
  position:fixed;inset:0;z-index:2400;background:rgba(8,14,11,.44);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .2s ease
}
.ag-drawer-bg.on{opacity:1;pointer-events:auto}

.ag-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:2500;width:min(400px,94vw);
  display:flex;flex-direction:column;
  background:var(--gp-glass-strong,rgba(15,24,18,.96));
  backdrop-filter:var(--gp-blur,blur(22px));-webkit-backdrop-filter:var(--gp-blur,blur(22px));
  border-left:1px solid var(--gp-line,rgba(232,244,235,.10));
  box-shadow:-12px 0 36px rgba(0,0,0,.18);
  transform:translateX(102%);transition:transform .26s cubic-bezier(.22,.9,.28,1);
  font-family:var(--ag-font,system-ui)
}
.ag-drawer.on{transform:none}

/* FECHADA, A GAVETA SAI DE CENA DE VERDADE.
   Fechada ela só andava 102% para a direita, e a sombra larga que a
   profundidade.css lhe dá (até 65px para a esquerda) continuava sendo pintada
   dentro da tela: uma faixa cinza na borda direita de todas as telas, dobrada
   porque são duas gavetas (Mapa e Menu). Escondida por visibilidade ela também
   para de ser lida pelo VoiceOver e de entrar no Tab, e o Safari do iPhone deixa
   de pintar o desfoque dela por cima do mapa a cada quadro. A visibilidade só
   troca no fim do deslize, para a gaveta não sumir no meio do caminho. */
.ag-drawer{visibility:hidden;transition:transform .26s cubic-bezier(.22,.9,.28,1),visibility 0s linear .26s}
.ag-drawer.on{visibility:visible;transition:transform .26s cubic-bezier(.22,.9,.28,1),visibility 0s}
.ag-drawer-bg{visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
.ag-drawer-bg.on{visibility:visible;transition:opacity .2s ease,visibility 0s}

/* iPhone deitado: a ilha fica num dos lados e o iOS reserva 62 pt dos dois.
   A gaveta encosta na borda direita; o conteúdo dela não pode ficar embaixo da
   ilha. Em pé (e fora do iPhone) env() vale 0 e nada muda. */
.ag-drawer{padding-right:env(safe-area-inset-right,0px);box-sizing:border-box}

.ag-dw-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(16px + env(safe-area-inset-top)) 18px 12px;
  border-bottom:1px solid var(--gp-line,rgba(232,244,235,.10))
}
.ag-dw-head h2{
  margin:0;font:650 22px/1.2 var(--ag-font,system-ui);letter-spacing:-.025em;
  color:var(--gp-text,#f2f7f3)
}
.ag-dw-x{
  background:none;border:none;cursor:pointer;padding:6px;border-radius:10px;
  color:var(--gp-text-2,#7f9085);display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px
}
.ag-dw-x:hover{background:var(--gp-s3,#203026);color:var(--gp-text,#f2f7f3)}

.ag-dw-body{flex:1;overflow-y:auto;padding:14px 14px calc(22px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}

.ag-sec{margin-bottom:20px}
.ag-sec-t{
  font:650 .875rem/1.4 var(--ag-font,system-ui);letter-spacing:0;
  color:var(--gp-text-2,#7f9085);margin:0 12px 6px
}

/* linhas de ferramenta */
.ag-row{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;
  padding:14px 12px;margin-bottom:2px;border-radius:10px;min-height:52px;
  background:transparent;border:1px solid transparent;
  color:var(--gp-text,#bdc9c0);font:550 1rem/1.35 var(--ag-font,system-ui);
  transition:background .14s,border-color .14s,color .14s
}
.ag-row:hover{background:var(--gp-s2,#17231b);color:var(--gp-text,#f2f7f3)}
.ag-row:active{transform:translateY(1px)}
.ag-row .ag-ic{flex:0 0 auto;width:20px;height:20px;color:var(--gp-text-3,#7f9085);display:flex}
.ag-row .ag-lbl{flex:1;min-width:0}
.ag-row .ag-sub{display:block;margin-top:4px;font:400 .875rem/1.4 var(--ag-font,system-ui);color:var(--gp-text-2,#7f9085)}
.ag-menu-details{border-top:1px solid var(--gp-line);padding-top:8px;margin-bottom:8px}
.ag-menu-details>summary{cursor:pointer;padding:12px;font:550 1rem/1.4 var(--ag-font,system-ui);color:var(--gp-text)}
.ag-menu-details[open]>summary{margin-bottom:6px}
.ag-row.on{
  background:color-mix(in srgb,var(--gp-green,#3bd27f) 14%,transparent);
  border-color:color-mix(in srgb,var(--gp-green,#3bd27f) 34%,transparent);
  color:var(--gp-text,#f2f7f3)
}
.ag-row.on .ag-ic{color:var(--gp-green,#3bd27f)}
.ag-row .ag-chk{
  flex:0 0 auto;width:34px;height:20px;border-radius:999px;position:relative;
  background:var(--gp-s3,#203026);transition:background .18s
}
.ag-row .ag-chk::after{
  content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--gp-text-3,#7f9085);transition:transform .18s,background .18s
}
.ag-row.on .ag-chk{background:var(--gp-green,#3bd27f)}
.ag-row.on .ag-chk::after{transform:translateX(14px);background:#fff}

/* controles finos dentro da gaveta */
.ag-ctl{display:flex;align-items:center;gap:11px;padding:9px 13px;font:600 12px var(--ag-font,system-ui);color:var(--gp-text-2,#bdc9c0)}
.ag-ctl>span{flex:0 0 78px}
.ag-ctl input[type=range]{flex:1;accent-color:var(--gp-green,#3bd27f)}

/* ==========================================================================
   Faixa de datas — o coração do uso diário do NDVI
   ========================================================================== */
/* Cartão flutuante logo ACIMA da barra de navegação — a navegação continua
   acessível com o NDVI ligado, e a faixa fica na altura do polegar. */
.ag-ndvibar{
  position:fixed;left:10px;right:10px;z-index:1150;
  bottom:calc(84px + env(safe-area-inset-bottom,0px));
  padding:9px 0 10px;border-radius:20px;
  background:var(--gp-glass-strong,rgba(15,24,18,.96));
  backdrop-filter:var(--gp-blur,blur(22px));-webkit-backdrop-filter:var(--gp-blur,blur(22px));
  border:1px solid var(--gp-line,rgba(232,244,235,.10));
  box-shadow:0 18px 50px rgba(12,35,20,.22),0 4px 13px rgba(12,35,20,.10);
  font-family:var(--ag-font,system-ui);
  transform:translateY(14px) scale(.97);opacity:0;
  /* invisível também por visibilidade: transparente, o Safari 26 ainda a lia
     para tingir a barra dele e pintava o desfoque por cima do mapa */
  visibility:hidden;
  transition:transform .24s cubic-bezier(.22,.9,.28,1),opacity .18s ease,visibility 0s linear .24s;
  pointer-events:none
}
.ag-ndvibar.on{transform:none;opacity:1;pointer-events:auto;visibility:visible;
  transition:transform .24s cubic-bezier(.22,.9,.28,1),opacity .18s ease,visibility 0s}
@media(min-width:721px){
  .ag-ndvibar{left:50%;right:auto;transform:translateX(-50%) translateY(14px) scale(.97);width:min(620px,calc(100vw - 24px))}
  .ag-ndvibar.on{transform:translateX(-50%)}
}

.nb-top{display:flex;align-items:center;gap:8px;padding:0 12px 8px}

.nb-seg{display:flex;gap:2px;padding:2px;border-radius:11px;background:var(--gp-s1,#111c16);flex:0 0 auto}
.nb-seg button{
  border:none;background:none;cursor:pointer;padding:6px 11px;border-radius:9px;
  font:700 11px/1 var(--ag-mono,ui-monospace);letter-spacing:.06em;
  color:var(--gp-text-3,#7f9085);transition:background .14s,color .14s
}
.nb-seg button.on{background:var(--gp-green,#3bd27f);color:#062015}

/* O recado ocupa a linha inteira embaixo — antes ele disputava espaço com os
   botões e virava "Não co…", que não informa nada. */
.nb-status{
  padding:7px 13px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:550 11px/1.35 var(--ag-font,system-ui);color:var(--gp-text-3,#7f9085)
}
.nb-status:empty{display:none}
.nb-gap{flex:1}
.nb-ico{
  flex:0 0 auto;background:none;border:none;cursor:pointer;padding:6px;border-radius:9px;
  color:var(--gp-text-3,#7f9085);display:flex
}
.nb-ico:hover{background:var(--gp-s3,#203026);color:var(--gp-text,#f2f7f3)}
.nb-ico.on{color:var(--gp-green,#3bd27f)}

/* trilho de datas */
.nb-dates{
  display:flex;gap:7px;overflow-x:auto;padding:1px 12px 2px;scroll-behavior:smooth;
  scrollbar-width:none;-webkit-overflow-scrolling:touch
}
.nb-dates::-webkit-scrollbar{display:none}
.nb-d{
  flex:0 0 auto;cursor:pointer;border:1px solid var(--gp-line,rgba(232,244,235,.10));
  background:var(--gp-s1,#111c16);border-radius:13px;padding:7px 11px 6px;min-width:62px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  transition:background .14s,border-color .14s,transform .1s
}
.nb-d:active{transform:scale(.96)}
.nb-d b{font:700 12.5px/1 var(--ag-font,system-ui);color:var(--gp-text,#f2f7f3);white-space:nowrap}
.nb-d i{font:600 9.5px/1 var(--ag-font,system-ui);font-style:normal;color:var(--gp-text-3,#7f9085);display:flex;align-items:center;gap:4px}
.nb-d i::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--nb-c,#7f9085)}
.nb-d.on{
  background:color-mix(in srgb,var(--gp-green,#3bd27f) 16%,transparent);
  border-color:var(--gp-green,#3bd27f)
}
.nb-d.on b{color:var(--gp-green,#3bd27f)}
.nb-d.novo b::after{content:' •';color:var(--gp-green,#3bd27f)}

.nb-adv{padding:4px 12px 0;display:none}
.nb-adv.on{display:block}
.nb-adv .ag-ctl{padding:7px 0}
.nb-rank{max-height:132px;overflow-y:auto;margin-top:4px}

/* dá espaço pra faixa não cobrir os botões flutuantes do mapa */
body.ndvibar-on .leaflet-bottom{bottom:200px}
body.ndvibar-on #scoutingBanner{bottom:calc(200px + env(safe-area-inset-bottom,0px))}

@media (max-width:520px){
  .nb-seg button{padding:6px 8px;font-size:10px}
  .nb-d{min-width:56px;padding:6px 9px 5px}
}

/* ---- tema claro ---- */
html.light .ag-drawer,html.light .ag-ndvibar{background:rgba(255,255,252,.97)}
html.light .ag-drawer-bg{background:rgba(20,36,26,.24)}
html.light .nb-seg button.on{background:var(--gp-green,#238452);color:#fff}
html.light .btn-tools .ag-dot{box-shadow:0 0 0 2px #fff}

/* ---- a tela de login merece o mesmo cuidado ---- */
.auth-box{border-radius:20px!important;padding:34px 26px!important}
.auth-title{letter-spacing:-.02em}
.auth-logo{color:var(--gp-green,#238452)!important}

/* modo tela cheia do mapa esconde a casca inteira */
body.map-full .ag-ndvibar,body.map-full .ag-drawer,body.map-full .ag-drawer-bg{display:none!important}

/* Preparo: números em primeiro plano, opções em um único painel. */
.calc-box{background:var(--gp-s1)!important;color:var(--gp-text)!important;border:1px solid var(--gp-line)!important;border-radius:20px!important;width:min(720px,96vw)!important;max-width:96vw!important;padding:20px!important;box-shadow:0 20px 64px rgba(0,0,0,.2)!important}
.calc-box .calc-title{font:650 1.25rem/1.3 var(--ag-font)!important;letter-spacing:-.025em}
.calc-box .calc-sub{font-size:.875rem!important;color:var(--gp-text-2)!important;line-height:1.5!important}
.calc-box .calc-grid{gap:14px!important}
.calc-box .calc-lab,.calc-box .calc-kv,.calc-box .calc-mix,.calc-box .calc-warn,.calc-box .calc-terr{font-size:.875rem!important;line-height:1.5!important}
.calc-box .calc-inp,.calc-box .calc-sel,.calc-box .calc-inpi,.calc-box .calc-seli{min-height:44px!important;font-size:1rem!important;color:var(--gp-text)!important;background:var(--gp-bg)!important;border:1px solid var(--gp-line-2)!important;border-radius:8px!important;box-sizing:border-box}
.calc-box .calc-inp:focus,.calc-box .calc-sel:focus{outline:2px solid var(--gp-green);outline-offset:2px}
.calc-box .calc-cfg{background:var(--gp-bg)!important;border:1px solid var(--gp-line)!important;border-radius:12px!important}
.calc-box .calc-cfgh{display:flex;width:100%;align-items:center;justify-content:space-between;text-align:left;gap:12px;color:var(--gp-text)!important;border:0;background:transparent;padding:14px!important;min-height:48px;font-size:.875rem!important;cursor:pointer}
.calc-box .calc-card{border:0!important;border-top:1px solid var(--gp-line)!important;border-radius:0!important;padding:18px 0!important;background:transparent!important}
.calc-box .calc-cardh{gap:12px;flex-wrap:wrap}
.calc-box .calc-tname{font-size:1rem!important;color:var(--gp-text)!important}
.calc-box .calc-abas{gap:4px!important;padding:5px!important;background:var(--gp-bg);border-radius:12px}
.calc-box .calc-aba{min-height:44px!important;font-size:.875rem!important;background:transparent!important;color:var(--gp-text-2)!important;border:0!important;border-radius:8px!important}
.calc-box .calc-aba.on{background:var(--gp-s2)!important;color:var(--gp-text)!important;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.calc-box .calc-prep{background:var(--gp-bg)!important;border:0!important;border-left:3px solid var(--gp-green)!important;border-radius:8px!important;padding:16px!important;color:var(--gp-text)!important}
.calc-box .calc-prep>span{font-size:.75rem!important;letter-spacing:.06em!important;color:var(--gp-text-2)!important}
.calc-box .calc-prep>b{font:650 2rem/1.25 var(--ag-font)!important;font-variant-numeric:tabular-nums;letter-spacing:-.035em}
.calc-box .calc-prep>small{font-size:.875rem!important;line-height:1.5!important;color:var(--gp-text-2)!important}
.calc-box .calc-prep.bad{border-left-color:var(--gp-red)!important}
.calc-box .calc-copy,.calc-box .calc-close,.calc-box .calc-navb,.calc-box .calc-x{min-height:44px!important;font-size:.875rem!important;border:1px solid var(--gp-line-2)!important;background:var(--gp-s2)!important;color:var(--gp-text)!important;border-radius:9px!important}
.calc-box .calc-x{min-width:44px;font-size:1.5rem!important}
.calc-box .calc-mixr{border-color:var(--gp-line)!important}
.calc-box .calc-kv b{color:var(--gp-text)!important;font-variant-numeric:tabular-nums}
.calc-box .calc-kv span,.calc-box .calc-eq{color:var(--gp-text-2)!important}
.bio-configurar{display:block;width:100%;margin:12px 0;padding:14px;text-align:left;min-height:48px;border:1px solid var(--gp-line-2);border-radius:10px;background:var(--gp-s2);color:var(--gp-text);font:600 1rem/1.4 var(--ag-font);cursor:pointer}
.bio-configurar span{display:block;margin-top:4px;font-size:.875rem;font-weight:400;color:var(--gp-text-2)}
.calc-drone{margin:12px 0;border:1px solid var(--gp-line);border-radius:12px;overflow:hidden}
.calc-drone>summary{padding:14px;cursor:pointer;font-weight:650;font-size:1rem}
.calc-drone>summary span{display:block;margin:4px 0 0 18px;font-size:.875rem;font-weight:400;color:var(--gp-text-2)}
.calc-drone .calc-grid{padding:0 14px 12px}
.calc-drone-check{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-size:.875rem;min-height:44px}
.calc-drone-check input{width:20px;height:20px;accent-color:var(--gp-green)}
.calc-drone-note,.calc-drone-status p{font-size:.875rem;line-height:1.5;margin:8px 14px 14px;color:var(--gp-text-2)}
.calc-drone-status{margin:12px 0;padding:14px;background:var(--gp-bg);border-radius:10px;border-left:3px solid var(--gp-amber);font-size:.875rem}
.calc-drone-status.incompativel{border-left-color:var(--gp-red)}
.calc-drone-status.conferido{border-left-color:var(--gp-green)}
.calc-drone-status p{margin:8px 0 0}
@media(max-width:480px){.calc-box{padding:14px!important;border-radius:14px!important}.calc-box .calc-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.calc-box .calc-actions{flex-wrap:wrap}.calc-box .calc-actions>button{flex:1 1 130px}.calc-drone .calc-f{min-width:0}.calc-drone .calc-inp{width:100%}}
@media(prefers-reduced-motion:reduce){.ag-drawer,.ag-drawer-bg,.ag-row{transition:none!important}}

/* ==========================================================================
   MAPA LIMPO — nada de chrome flutuante sobre a imagem
   Engrenagem, ☰, giro e "1 ha" moravam soltos por cima das quadras. Foram
   todos para a gaveta "Menu", que abre de lado igual à do Mapa. Sobre o mapa
   fica só o mostrador do clima.
   ========================================================================== */
.leaflet-top.leaflet-left .leaflet-control,
.leaflet-top.leaflet-right .leaflet-control,
.rot-ctl,.menu-ctl,.ha-ctl,.mapctl-toggle{display:none!important}

/* a barra de cima deixa de ser barra: vira só o cantinho do mostrador */
.top-bar{
  position:absolute!important;top:0;left:0;right:0;z-index:60;
  background:none!important;border:none!important;box-shadow:none!important;
  /* As áreas seguras entram AQUI, uma vez: em cima (barra de status quando a
     página corre por baixo dela) e dos lados (a ilha do iPhone deitado). O
     mostrador do clima mora dentro desta moldura e não soma outra vez. */
  padding:calc(8px + env(safe-area-inset-top,0px)) calc(12px + env(safe-area-inset-right,0px)) 0 calc(12px + env(safe-area-inset-left,0px))!important;min-height:0!important;
  pointer-events:none!important;
}
.tb-brand{
  background:none!important;border:none!important;box-shadow:none!important;
  height:auto!important;max-width:none!important;padding:0!important;
}
#localChip{display:none!important}          /* o local mudou-se para a gaveta */
.top-bar-info{display:none!important}

/* ---- mostrador do clima ----
   Sem placa. Uma caixa em cima do mapa é mais uma janela disputando espaço com
   a lavoura, e era exatamente isso que queríamos tirar. Ficam só os números,
   legíveis sobre imagem clara ou escura por halo — a mesma solução que os
   rótulos das quadras já usam — em vez de fundo. Menor, mais junto, mais
   contrastado: lê-se de relance e some do caminho. */
html body .clima-chip{
  pointer-events:auto!important;
  position:absolute!important;
  /* 5px abaixo da moldura (.top-bar), que já desceu a área segura de cima.
     Somar env() de novo aqui empurrava o clima para 137px num aparelho com
     62px de área segura: o dobro. */
  top:5px!important;left:11px!important;right:auto!important;
  display:inline-flex!important;align-items:baseline!important;gap:5px!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
  background:none!important;box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  max-width:none!important;width:auto!important;min-width:0!important;
  min-height:0!important;height:auto!important;overflow:visible!important;
  font-family:var(--ag-font,system-ui,sans-serif)!important;
  font-variant-numeric:tabular-nums!important;
  color:#fff!important;opacity:1!important;
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 6px rgba(0,0,0,.75)!important;
  white-space:nowrap!important;letter-spacing:0!important;
}
html body .clima-chip svg{display:none!important}
html body .clima-chip .cc-t{
  font:800 14px/1 var(--ag-font,system-ui,sans-serif)!important;
  /* o atalho `font:` acima zera o font-variant-numeric herdado do chip; sem
     esta linha o numero volta a mudar de largura a cada atualizacao */
  font-variant-numeric:tabular-nums!important;
  color:#fff!important;letter-spacing:-.015em!important;
}
html body .clima-chip .cc-v{
  display:inline!important;
  max-width:none!important;overflow:visible!important;text-overflow:clip!important;
  font:600 10.5px/1 var(--ag-font,system-ui,sans-serif)!important;
  font-variant-numeric:tabular-nums!important;
  color:#fff!important;opacity:.85!important;letter-spacing:0!important;white-space:nowrap!important;
}
html body .clima-chip .cc-v .cc-w{display:inline!important}
html body .clima-chip .cc-src{display:none!important}
html body .clima-chip:hover{opacity:.75!important;background:none!important}

/* No tema claro vale o mesmo: o fundo é sempre imagem de satélite, então o que
   garante leitura é o halo, não a cor do tema. */
html.light body .clima-chip,
html.light body .clima-chip .cc-t,
html.light body .clima-chip .cc-v{color:#fff!important}

/* ---- faixa temporária de rotação: aparece, gira, some ---- */
.ag-rotbar{
  position:fixed;left:10px;right:10px;z-index:1160;
  bottom:calc(84px + env(safe-area-inset-bottom,0px));
  padding:11px 14px;border-radius:20px;display:none;align-items:center;gap:12px;
  background:var(--gp-glass-strong,rgba(15,24,18,.96));
  backdrop-filter:var(--gp-blur,blur(22px));-webkit-backdrop-filter:var(--gp-blur,blur(22px));
  border:1px solid var(--gp-line,rgba(232,244,235,.10));
  box-shadow:0 18px 50px rgba(12,35,20,.22);
  font-family:var(--ag-font,system-ui);
}
.ag-rotbar.on{display:flex}
.ag-rotbar input[type=range]{flex:1;min-width:0;accent-color:var(--gp-green,#3bd27f)}
.ag-rotbar .rb-v{
  flex:0 0 auto;font:700 12px/1 var(--ag-mono,ui-monospace);color:var(--gp-green,#3bd27f);
  min-width:42px;text-align:right;font-variant-numeric:tabular-nums
}
.ag-rotbar button{
  flex:0 0 auto;border:1px solid var(--gp-line,rgba(232,244,235,.10));cursor:pointer;
  background:var(--gp-s1,#111c16);color:var(--gp-text-2,#bdc9c0);
  border-radius:10px;padding:7px 12px;font:700 11px var(--ag-font,system-ui)
}
.ag-rotbar button.ok{background:var(--gp-green,#3bd27f);color:#062015;border-color:transparent}
/* Rótulo da régua da máscara: a de giro não precisa (a palavra "Norte" no
   botão já diz do que se trata), esta precisa dizer o que está regulando. */
.ag-rotbar .rb-t{
  flex:0 0 auto;font:700 11px var(--ag-font,system-ui);color:var(--gp-text-2,#bdc9c0);
  letter-spacing:.02em
}
@media(min-width:721px){
  .ag-rotbar{left:50%;right:auto;transform:translateX(-50%);width:min(620px,calc(100vw - 24px))}
}

/* botões de passo dentro da gaveta (zoom, 1 ha) */
.ag-steps{display:flex;gap:6px;padding:2px 2px 6px}
.ag-steps button{
  flex:1;cursor:pointer;border-radius:12px;padding:11px 6px;
  background:var(--gp-s1,#111c16);border:1px solid var(--gp-line,rgba(232,244,235,.10));
  color:var(--gp-text-2,#bdc9c0);font:700 12px var(--ag-font,system-ui)
}
.ag-steps button:hover{background:var(--gp-s2,#17231b);color:var(--gp-text,#f2f7f3)}
.ag-drawer #localChip{display:inline-flex!important;margin:2px 2px 8px!important;max-width:100%!important}
.btn-menu{order:5!important}
.btn-menu.on{color:var(--gp-green,#3bd27f)!important;border-color:var(--gp-green,#3bd27f)!important}

/* ==========================================================================
   Correções de especificidade — o app injeta <style> em tempo de execução,
   depois desta folha, então aqui é preciso mirar o CANTO do Leaflet (o pai) em
   vez de cada controle: escondido o canto, nenhuma regra filha ressuscita.
   ========================================================================== */
.leaflet-top.leaflet-left,
.leaflet-top.leaflet-right{display:none!important}
.leaflet-control-scale{display:none!important}
body.mapctl-open .leaflet-top.leaflet-left{display:none!important}

/* a marca some do mapa: ela já está na tela de login e no cabeçalho impresso */
.tb-brand::before{display:none!important}
.tb-brand{gap:0!important}

/* ==========================================================================
   Busca de alvo biológico na nova coluna de avaliação
   ========================================================================== */
.avcol-lab-dim{font-weight:500;opacity:.6}
.alvo-lista{
  margin:6px 0 2px;max-height:236px;overflow-y:auto;
  border-radius:12px;background:rgba(0,0,0,.03);
  -webkit-overflow-scrolling:touch
}
.alvo-lista:empty{display:none}
.alvo-cab{
  padding:8px 11px 5px;font:650 9.5px/1 var(--ag-font,system-ui);
  letter-spacing:.12em;text-transform:uppercase;color:#8a978e
}
.alvo-item{
  width:100%;display:flex;align-items:flex-start;gap:9px;cursor:pointer;text-align:left;
  padding:9px 11px;border:0;background:none;border-top:1px solid rgba(20,40,28,.07)
}
.alvo-item:hover{background:rgba(35,132,82,.09)}
.alvo-item:active{background:rgba(35,132,82,.16)}
.alvo-n{
  flex:1;min-width:0;font:650 13px/1.25 var(--ag-font,system-ui);color:#22312a
}
.alvo-n i{
  display:block;margin-top:2px;font:italic 400 11px/1.3 var(--ag-font,system-ui);color:#7a8a80
}
.alvo-g{
  flex:0 0 auto;margin-top:2px;padding:2px 6px;border-radius:5px;
  font:700 8.5px/1.5 var(--ag-font,system-ui);letter-spacing:.06em;text-transform:uppercase
}
.alvo-g-d{background:rgba(191,75,62,.13);color:#a53f33}   /* doença */
.alvo-g-p{background:rgba(156,104,23,.15);color:#8a5c14}   /* praga  */
.alvo-g-w{background:rgba(35,132,82,.13);color:#1d6b44}    /* daninha */

html:not(.light) .alvo-lista{background:rgba(255,255,255,.04)}
html:not(.light) .alvo-item{border-top-color:rgba(232,244,235,.07)}
html:not(.light) .alvo-n{color:#e8f1ea}
html:not(.light) .alvo-n i{color:#93a89b}


/* ==========================================================================
   O menu de locais nasce com z-index 1600 e a gaveta tem 2500: com o seletor
   morando dentro da gaveta, o menu abria ATRÁS dela e o toque parecia não
   fazer nada. Aqui ele sobe para cima de tudo.
   ========================================================================== */
.loc-menu{z-index:2600!important}
.ag-drawer #localChip{
  display:flex!important;width:100%!important;max-width:100%!important;
  justify-content:space-between!important;margin:0 0 6px!important;
  min-height:46px!important;padding:0 13px!important;border-radius:14px!important;
}
.ag-local-dica{
  margin:0 4px 2px;font:500 11px/1.4 var(--ag-font,system-ui);color:var(--gp-text-3,#7f9085)
}

/* ==========================================================================
   Locais: lista aberta na gaveta
   O seletor era um chip que abria um menu flutuante POR CIMA da gaveta. Além
   de estranho, ele sumia: remontar a gaveta apagava o chip, que tinha sido
   mudado de lugar para dentro dela. Lista construída na hora não some.
   ========================================================================== */
.ag-row.ag-local .ag-ic{color:var(--gp-text-3,#7f9085)}
.ag-row.ag-local.on .ag-ic{color:var(--gp-green,#3bd27f)}
.ag-local-acoes{display:flex;gap:6px;margin-top:8px}
.ag-local-acoes button{
  flex:1;cursor:pointer;border-radius:12px;padding:10px 6px;
  background:transparent;border:1px dashed var(--gp-line-2,rgba(232,244,235,.20));
  color:var(--gp-text-3,#7f9085);font:650 11.5px var(--ag-font,system-ui)
}
.ag-local-acoes button:hover{color:var(--gp-text,#f2f7f3);border-color:var(--gp-green,#3bd27f)}
.ag-local-dica{margin:0 4px;font:500 11px/1.4 var(--ag-font,system-ui);color:var(--gp-text-3,#7f9085)}

/* aviso da troca automática — sempre com volta */
.ag-aviso{
  position:fixed;left:12px;right:12px;z-index:2200;
  bottom:calc(84px + env(safe-area-inset-bottom,0px));
  display:none;align-items:center;gap:10px;padding:11px 14px;border-radius:16px;
  background:var(--gp-glass-strong,rgba(15,24,18,.96));
  backdrop-filter:var(--gp-blur,blur(22px));-webkit-backdrop-filter:var(--gp-blur,blur(22px));
  border:1px solid var(--gp-line,rgba(232,244,235,.10));
  box-shadow:0 18px 50px rgba(12,35,20,.24);
  font:550 12.5px/1.35 var(--ag-font,system-ui);color:var(--gp-text-2,#bdc9c0)
}
.ag-aviso.on{display:flex}
.ag-aviso span{flex:1;min-width:0}
.ag-aviso b{color:var(--gp-text,#f2f7f3);font-weight:750}
.ag-aviso button{
  flex:0 0 auto;cursor:pointer;border:0;border-radius:11px;padding:8px 13px;
  background:var(--gp-green,#3bd27f);color:#062015;font:700 11.5px var(--ag-font,system-ui)
}
@media(min-width:721px){
  .ag-aviso{left:50%;right:auto;transform:translateX(-50%);width:min(560px,calc(100vw - 24px))}
}

/* ---- a faixa branca no alto do mapa ----
   A .top-bar já não é barra: virou só a moldura que posiciona o mostrador do
   clima. Mas styles.css pinta `html.light .top-bar` com fundo quase branco, e
   esse seletor (0,2,1) ganha do `.top-bar` (0,1,0) daqui mesmo com !important
   dos dois lados. Sobrava uma tira de 8px de fundo claro por cima do satélite.
   A caixa fica — é o padding dela que segura o clima no lugar, e ela é
   pointer-events:none, então não rouba toque. Só deixa de ser pintada. */
html.light .top-bar,
html:not(.light) .top-bar{
  background:none!important;border:0!important;box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}

/* ==========================================================================
   AGENDA EM CALENDÁRIO E PAINEL DO DIA (21a publicação)
   A folhinha do mês com uma bolinha por TIPO de compromisso em cada dia, e o
   HOJE como painel: faixa da semana, números do dia, o que fazer, o que já saiu.
   As cores são as de ESTADO do app (cores-padrao.css): vermelho é atrasado,
   verde é feito; aplicação e avaliação ganham âmbar e azul, e a legenda diz.
   ========================================================================== */
.ag-modo{display:flex;gap:4px;padding:3px;margin:0 0 12px;border-radius:12px;background:var(--gp-s3,#eeeef0)}
.ag-modo button{
  flex:1;cursor:pointer;border:0;border-radius:9px;padding:8px 0;background:transparent;
  font:650 12.5px var(--ag-font,system-ui);color:var(--gp-text-2,#555860)
}
.ag-modo button.on{background:var(--gp-s1,#fff);color:var(--gp-text,#202124);box-shadow:0 1px 3px rgba(16,17,20,.14)}

.agc-nav{display:flex;align-items:center;gap:6px;margin:0 0 8px}
.agc-mes{flex:1;text-align:center;font:700 15px/1.2 var(--ag-font,system-ui);color:var(--gp-text,#202124)}
.agc-mes::first-letter{text-transform:uppercase}
.agc-seta{
  flex:none;width:36px;height:36px;cursor:pointer;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;padding:0;
  background:transparent;border:1px solid var(--gp-line,#dedee2);
  font:500 20px/1 var(--ag-font,system-ui);color:var(--gp-text,#202124)
}
.agc-seta:hover{background:var(--gp-s3,#eeeef0)}
.agc-hoje{
  flex:none;cursor:pointer;border-radius:999px;padding:7px 12px;
  background:var(--gp-s3,#eeeef0);border:1px solid var(--gp-line,#dedee2);
  font:650 11.5px var(--ag-font,system-ui);color:var(--gp-text,#202124)
}
.agc-atr{
  display:flex;align-items:center;gap:7px;width:100%;margin:0 0 10px;cursor:pointer;
  padding:8px 12px;border-radius:12px;text-align:left;
  background:var(--ag-err-bg,rgba(220,38,38,.07));border:1px solid var(--ag-err-line,rgba(220,38,38,.28));
  font:650 12.5px var(--ag-font,system-ui);color:var(--ag-err,#dc2626)
}
.agc-atr.on{background:var(--ag-err,#dc2626);color:#fff;border-color:transparent}
.agc-atr.on .agc-pt.atrasado{background:#fff}

.agc-grade{display:flex;flex-direction:column;gap:2px}
.agc-sem{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.agc-cab span{
  text-align:center;padding:2px 0 4px;
  font:700 10.5px var(--ag-font,system-ui);letter-spacing:.06em;color:var(--gp-text-3,#666a73)
}
.agc-dia{
  position:relative;min-width:0;height:46px;padding:5px 0 0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;
  background:transparent;border:1px solid transparent;border-radius:12px;color:var(--gp-text,#202124)
}
.agc-dia:hover{background:var(--gp-s2,#f7f7f8)}
.agc-n{
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font:600 13.5px/1 var(--ag-font,system-ui);font-variant-numeric:tabular-nums
}
.agc-dia.passado .agc-n{color:var(--gp-text-3,#666a73)}
.agc-dia.fora{opacity:.38}
.agc-dia.hoje .agc-n{background:var(--gp-text,#202124);color:var(--gp-s1,#fff);font-weight:800}
.agc-dia.sel{background:var(--gp-s3,#eeeef0);border-color:var(--gp-line-2,#c3c5ca)}

.agc-pts{display:flex;align-items:center;justify-content:center;gap:3px;min-height:6px}
.agc-pt{display:inline-block;flex:none;width:6px;height:6px;border-radius:50%;background:var(--gp-text-3,#666a73)}
.agc-pt.apl{background:var(--ag-warn,#d97706)}
.agc-pt.av{background:var(--ag-info,#2563eb)}
.agc-pt.atrasado{background:var(--ag-err,#dc2626)}
.agc-pt.feito{background:transparent;box-shadow:inset 0 0 0 1.6px var(--ag-ok,#16a34a)}

.agc-leg{
  display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;margin:10px 0 2px;
  font:550 10.5px var(--ag-font,system-ui);color:var(--gp-text-3,#666a73)
}
.agc-leg span{display:inline-flex;align-items:center;gap:5px}

.agc-det{margin-top:12px;padding-top:12px;border-top:1px solid var(--gp-line,#dedee2)}
.agc-det-t{margin:0 0 9px;font:700 13.5px/1.3 var(--ag-font,system-ui);color:var(--gp-text,#202124)}
.agc-det-t::first-letter{text-transform:uppercase}
.agc-det-t span{font-weight:500;color:var(--gp-text-3,#666a73)}
.agc-det-dia{margin:12px 0 6px;font:700 10.5px var(--ag-font,system-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--gp-text-3,#666a73)}
.agc-prox,.hj-prox{
  display:block;width:100%;margin-top:8px;cursor:pointer;text-align:left;
  padding:10px 12px;border-radius:12px;background:var(--gp-s2,#f7f7f8);border:1px solid var(--gp-line,#dedee2);
  font:600 12.5px/1.4 var(--ag-font,system-ui);color:var(--gp-text,#202124)
}
.agc-prox:hover,.hj-prox:hover{border-color:var(--gp-line-2,#c3c5ca)}
/* O nome da quadra no item da agenda vinha de uma regra do tema claro sem
   escopo (styles.css: cor fixa #1d2723) e sumia no tema escuro — escuro sobre
   escuro. A cor passa a seguir o tema. */
.ag-item-qid{color:var(--gp-text,#202124)}
.ag-item.ag-feito{opacity:.8}
.ag-item .ag-feito-sel{color:var(--ag-ok,#16a34a)!important}
.agc~.ag-acoes{margin:14px 0 0}

/* ---- HOJE ---- */
.hj-clima{
  display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:7px;
  font:600 12.5px var(--ag-font,system-ui);color:var(--gp-text-2,#555860)
}
.hj-clima svg{width:14px;height:14px;flex:none}
.hj-clima small{font:500 11px var(--ag-font,system-ui);color:var(--gp-text-3,#666a73)}
.hj-faixa{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:0 0 14px}
.hj-dia{
  min-width:0;min-height:66px;padding:8px 0 7px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  border-radius:14px;background:var(--gp-s2,#f7f7f8);border:1px solid var(--gp-line,#dedee2);
  color:var(--gp-text,#202124)
}
.hj-dia:hover{border-color:var(--gp-line-2,#c3c5ca)}
.hj-dia.hoje{background:var(--gp-text,#202124);border-color:var(--gp-text,#202124);color:var(--gp-s1,#fff)}
.hj-sigla{font:700 9.5px var(--ag-font,system-ui);letter-spacing:.06em;opacity:.72}
.hj-n{font:750 17px/1.1 var(--ag-font,system-ui);font-variant-numeric:tabular-nums}
.hj-dia .agc-pts{margin-top:2px}

.hj-livre{
  padding:14px;border-radius:14px;
  background:var(--ag-ok-bg,rgba(22,163,74,.08));border:1px solid var(--ag-ok-line,rgba(22,163,74,.28))
}
.hj-livre-t{font:700 14px var(--ag-font,system-ui);color:var(--ag-ok,#16a34a)}
.hj-livre-s{margin-top:6px;font:500 12.5px/1.45 var(--ag-font,system-ui);color:var(--gp-text-2,#555860)}
.hj-livre .hj-prox{background:var(--gp-s1,#fff)}

.today-card-guia{margin-top:5px;font:600 12.5px/1.4 var(--ag-font,system-ui);color:var(--ag-info,#2563eb)}
.today-card-aviso{margin-top:5px;font:600 12px/1.4 var(--ag-font,system-ui);color:var(--ag-warn,#d97706)}

.hj-feitos{display:flex;flex-direction:column;gap:6px}
.hj-feito{
  display:flex;align-items:center;gap:10px;width:100%;cursor:pointer;text-align:left;
  padding:10px 12px;border-radius:12px;background:var(--gp-s1,#fff);border:1px solid var(--gp-line,#dedee2);
  color:var(--gp-text,#202124)
}
.hj-feito:hover{border-color:var(--gp-line-2,#c3c5ca)}
.hj-ok{
  flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--ag-ok-bg,rgba(22,163,74,.08));color:var(--ag-ok,#16a34a);font:800 12px var(--ag-font,system-ui)
}
.hj-feito-t{min-width:0}
.hj-feito-t b{display:block;font:650 13px/1.35 var(--ag-font,system-ui)}
.hj-feito-t small{display:block;margin-top:1px;font:500 11.5px var(--ag-font,system-ui);color:var(--gp-text-3,#666a73)}

.hj-rodape{display:flex;flex-direction:column;gap:10px;margin-top:22px;padding-top:14px;border-top:1px solid var(--gp-line,#dedee2)}
.hj-rodape .ag-acoes{margin:0}
.hj-agenda{
  width:100%;cursor:pointer;padding:12px;border-radius:12px;background:transparent;
  border:1px solid var(--gp-line-2,#c3c5ca);font:650 13px var(--ag-font,system-ui);color:var(--gp-text,#202124)
}
.hj-agenda:hover{background:var(--gp-s2,#f7f7f8)}
@media(prefers-reduced-motion:reduce){.agc-dia,.hj-dia{transition:none!important}}
/* O selo de "sessão local" fica por cima do pé da agenda no celular, e com o
   calendário a agenda passou a ocupar a tela inteira: o último botão morava
   atrás dele. Enquanto o selo aparece, a agenda ganha um pé do tamanho dele. */
@media(max-width:720px){
  body:has(#cloudBadge[style*="display: block"]) .agenda-panel{padding-bottom:66px!important}
}

/* ==========================================================================
   iPhone: o que só o Safari do iOS faz (o @supports abaixo só vale lá)
   ========================================================================== */
@supports (-webkit-touch-callout:none){
  /* Data e hora: o iOS centraliza o valor e não deixa o campo encolher numa
     grade estreita (ele vaza para o lado). Alinhado como os outros campos, com
     altura de toque mesmo vazio (campo de data vazio no iOS não tem altura). */
  input[type=date],input[type=time],input[type=datetime-local],input[type=month]{min-width:0;min-height:44px}
  input::-webkit-date-and-time-value{text-align:left}
}
/* Rolar até o fim de uma tela cheia não arrasta o app nem o mapa de trás
   (o "elástico" do iPhone). O formulário do estudo (.se-overlay) já fazia isso. */
.sd-overlay,.today-overlay,.con-overlay,.c3-overlay,.ag-dw-body{overscroll-behavior:contain}