:root {
    /* G.9.W -- design system unificado.
       Verdes consolidados em #52b788 (CLAUDE.md canonico).
       Cinzas consolidados em #8b9c8f.
       Bordas consolidadas em rgba(82,183,136,*). */

    /* Cores canonicas */
    --agd-green: #52b788;
    --agd-green-rgb: 82, 183, 136;
    --agd-cyan: #118ab2;
    --agd-cyan-rgb: 17, 138, 178;
    --agd-yellow: #ffb703;
    --agd-danger: #c92828;       /* G.9.W -- fix contraste WCAG AA */

    /* Backgrounds */
    --agd-bg-base: #070b08;
    --agd-bg-panel: rgba(7, 11, 8, 0.5);
    --agd-bg-panel-light: rgba(7, 11, 8, 0.3);
    --agd-bg-card: #111812;

    /* Bordas */
    --agd-border-default: rgba(82, 183, 136, 0.15);
    --agd-border-subtle: rgba(82, 183, 136, 0.10);
    --agd-border-hover: rgba(82, 183, 136, 0.30);

    /* Tipografia */
    --agd-text-primary: #fff;
    --agd-text-body: #cdd6dc;
    --agd-text-muted: #8b9c8f;
    --text-light: #cdd6dc;       /* G.9.W -- fix fantasma --text-light */

    /* Geometria */
    /* G.9.AA -- vars --agd-radius-{card,md,sm,xs} removidas
       (4 vars com 0 hits via var() confirmados em grep cross-app).
       Backup: /tmp/agrodash-hub.css.G9AA-pre-cleanup.css */

    /* Aliases LEGADO (compatibilidade durante migracao G.9.W).
       Remover na Onda C quando hits de var(--primary-green) etc forem zero. */
    --primary-green: var(--agd-green);
    --text-muted: var(--agd-text-muted);
    --border-color: var(--agd-border-default);
    --bg-dark: var(--agd-bg-base);
    --bg-panel: var(--agd-bg-card);
    --bg-card: var(--cor-superficie-elevada); /* F1: alias unificado ao semantico (era var(--agd-bg-card); a 2a fonte #141d15 no layout foi alinhada junto) */

    /* ============================================================
       THEME FASE 1 (2026-06-09) -- FUNDACAO de tokens semanticos.
       PURAMENTE ADITIVO: nada removido; NENHUMA view alterada.
       Os semanticos abaixo = o tema DARK ATUAL (valores identicos),
       logo o sistema parece IGUAL. O [data-theme="light"] (Fase 2) so'
       sobrescreve estes semanticos -- nao os ~2.352 usos hardcoded.
       Camadas: primitivo (--agd-*) -> semantico (--cor-*) -> componente.
       ============================================================ */

    /* PRIMITIVOS novos (lacunas frequentes da auditoria /tmp/THEME) */
    --agd-danger-light:   #ff6b6b;                  /* 106x hardcoded (erro/alerta) */
    --agd-cinza-100:      #e9ecef;                  /* 79x  (claro) */
    --agd-cyan-light:     #4cc9f0;                  /* 42x  (cyan claro) */
    --agd-yellow-dark:    #fca311;                  /* 32x  (ambar variante) */
    --agd-green-dark:     #2d6a4f;                  /* gradientes/botoes */
    --agd-green-medium:   #40916c;                  /* gradientes/botoes */
    --agd-green-hover:    #6fce9f;                  /* hover verde */
    --agd-overlay-branco: rgba(255,255,255,0.05);   /* divisores sutis */

    /* ============================================================
       F1 (2026-06-09) -- TOKENS ESTRUTURAIS (aditivo; PROMPT 2 exec).
       Valores DARK = praticas vigentes (auditoria C): raios dominantes
       6/8/12/14 + pill/full; sombras = card f2/hub (0 10px 30px .5) e
       modal (0 20px 60px .6); focus ring = padrao de-facto rgba(green,.2).
       Espaco: escala base-8 c/ meio-passo 4 (grade real do sistema e'
       step-2px [6/10/14 dominam] -- refinar adocao no PROMPT 3).
       --agd-accent = indirecao p/ accent customizavel futuro (so alias).
       Light sobrescreve SOMENTE sombras + foco (bloco light abaixo). */
    --font-sans: var(--font-base, 'Segoe UI', system-ui, -apple-system, sans-serif);
    --agd-radius-sm:   6px;
    --agd-radius-md:   8px;
    --agd-radius-lg:   12px;
    --agd-radius-xl:   14px;
    --agd-radius-pill: 999px;
    --agd-radius-full: 50%;
    --agd-shadow-1: 0 4px 12px rgba(0, 0, 0, 0.35);
    --agd-shadow-2: 0 10px 30px rgba(0, 0, 0, 0.5);
    --agd-shadow-3: 0 20px 60px rgba(0, 0, 0, 0.6);
    --agd-shadow-focus: 0 0 0 2px rgba(var(--agd-green-rgb), 0.2);
    --agd-space-1: 4px;
    --agd-space-2: 8px;
    --agd-space-3: 16px;
    --agd-space-4: 24px;
    --agd-space-5: 32px;
    --agd-space-6: 48px;
    --agd-accent:     var(--agd-green);
    --agd-accent-rgb: var(--agd-green-rgb);
    --cor-foco: var(--agd-green);

    /* SEMANTICOS (papeis; = DARK atual; e' o que MUDA por tema na Fase 2) */
    --cor-superficie-base:    var(--agd-bg-base);      /* #070b08 fundo do app */
    --cor-superficie-elevada: var(--agd-bg-card);      /* #111812 cards/paineis */
    --cor-superficie-overlay: #1a241b;                 /* modais/dropdowns (1 nivel acima) */
    --cor-texto-primario:     var(--agd-text-primary); /* #fff */
    --cor-texto-secundario:   var(--agd-text-body);    /* #cdd6dc */
    --cor-texto-suave:        var(--agd-text-muted);   /* #8b9c8f */
    --cor-borda:              var(--agd-border-default);
    --cor-borda-suave:        var(--agd-border-subtle);
    --cor-interativo:         var(--agd-green);         /* accent */
    --cor-interativo-hover:   var(--agd-green-hover);
    --cor-perigo:             var(--agd-danger-light); /* #ff6b6b -- AA 6.5:1 sobre escuro (era #c92828=3.3:1 sub-AA); light sobrescreve p/ #c92828 */
    --cor-sucesso:            var(--agd-green);
    --cor-aviso:              var(--agd-yellow);
    --cor-info:               var(--agd-cyan-light);    /* cyan #4cc9f0 -- info (badges/callouts) */
    --cor-superficie-sutil:   rgba(7, 11, 8, 0.4);       /* recesso translucido sutil -- dark (midpoint panel/panel-light) */
}

/* ============================================================
   THEME FASE 2 (PENDENTE) -- tema claro. Aqui sobrescrever SO os
   semanticos --cor-* (+ os --agd-* de superficie/texto/borda).
   VAZIO de proposito na Fase 1 (so a fundacao). O gancho server-side
   data-theme ja existe em layouts/app.blade.php. NAO preencher agora.
   ============================================================ */
html[data-theme="light"] {
    /* THEME FASE 2 -- tema claro. Sobrescreve SO os 13 semanticos (--cor-*).
       Primitivos (--agd-*) NAO mudam. WCAG AA (texto/fundo >= 4.5:1).
       Views ainda hardcoded seguem dark ate Fase 3 (esperado, nao bug). */
    --cor-superficie-base:    #eef2ee;                 /* fundo claro do app */
    --cor-superficie-elevada: #ffffff;                 /* cards/paineis */
    --cor-superficie-overlay: #ffffff;                 /* modais/dropdowns */
    --cor-texto-primario:     #14241a;                 /* ~13:1 sobre base (AAA) */
    --cor-texto-secundario:   #33433a;                 /* ~9:1 (AAA) */
    --cor-texto-suave:        #5b6b61;                  /* ~5:1 sobre branco (AA) */
    --cor-borda:              rgba(45, 106, 79, 0.22);
    --cor-borda-suave:        rgba(45, 106, 79, 0.12);
    --cor-interativo:         #2d6a4f;                  /* verde escuro ~5.8:1 sobre branco (AA) */
    --cor-interativo-hover:   #245a42;
    --cor-perigo:             #c92828;                  /* ~5:1 (AA) */
    --cor-sucesso:            #2d6a4f;                  /* ~5.8:1 (AA) */
    --cor-aviso:              #8a5600;                  /* ambar escuro ~5.3:1 sobre base (AA-normal) */
    --cor-info:               #0e7490;                  /* cyan escuro ~4.7:1 sobre branco (AA) */
    --cor-superficie-sutil:   rgba(45, 106, 79, 0.06);   /* recesso verde sutil sobre claro */
    /* F1: sombras SUAVES no claro (auditoria: rgba(0,0,0,.5) pesava no fundo claro).
       Familia rgba(20,40,26,a) = a ja' usada pelas regras light do hub/ue (nao inventa). */
    --agd-shadow-1: 0 6px 18px rgba(20, 40, 26, 0.07);
    --agd-shadow-2: 0 8px 26px rgba(20, 40, 26, 0.10);
    --agd-shadow-3: 0 12px 32px rgba(20, 40, 26, 0.14);
    --cor-foco: #2d6a4f;                               /* focus ring AA sobre claro */
}

/* THEME FASE 4 (zona vermelha / dashboard): override de primitivos de CHROME
   escopado aos cards .pro-card (dashboard-only -> NAO afeta cadastros/visao-geral
   #14, que usa .agd-card-* SEM .pro-card). So superficie/texto/borda; as cores de
   DADO (--agd-green/yellow/danger/cyan = status/grafico/mapa) NAO mudam. */
html[data-theme="light"] .pro-card {
    --agd-bg-base:        #eef2ee;
    --agd-bg-card:        #ffffff;
    --agd-bg-panel:       rgba(45, 106, 79, 0.06);
    --agd-bg-panel-light: rgba(45, 106, 79, 0.04);
    --agd-text-primary:   #14241a;
    --agd-text-body:      #33433a;
    --agd-text-muted:     #5b6b61;
    --agd-border-default: rgba(45, 106, 79, 0.22);
    --agd-border-subtle:  rgba(45, 106, 79, 0.12);
}
/* Shell hardcoded/alias dos cards do dashboard (.pro-card bg via alias var(--bg-card),
   .agd-card-header via rgba(0,0,0,.x) hardcoded) NAO pega o override de primitivo ->
   overrides DIRETOS com semanticos, escopados a .pro-card + light (dark byte-identico:
   regra so existe no light; protege visao-geral #14 que nao usa .pro-card). */
html[data-theme="light"] .pro-card { background: var(--cor-superficie-elevada); color: var(--cor-texto-secundario); }
html[data-theme="light"] .pro-card .agd-card-header { background: var(--cor-superficie-sutil); color: var(--cor-texto-primario); }
html[data-theme="light"] .pro-card .agd-card-header-titulo { color: var(--cor-interativo); }
html[data-theme="light"] .pro-card .agd-card-header-foco { color: var(--cor-texto-suave); }
/* Utils dark do Bootstrap + caixas custom dentro dos cards -> claro (escopo .pro-card+light).
   Progress: so o track (bg); o fill colorido (.progress-bar filho) = DADO, nao tocado.
   Mapa (.leaflet-control-layers etc) = BLOCO 3, fora daqui. */
html[data-theme="light"] .pro-card .bg-dark,
html[data-theme="light"] .pro-card .dropdown-menu-dark { background-color: var(--cor-superficie-elevada) !important; color: var(--cor-texto-primario); }
html[data-theme="light"] .pro-card .form-control,
html[data-theme="light"] .pro-card .form-select { background-color: var(--cor-superficie-base) !important; color: var(--cor-texto-primario) !important; border-color: var(--cor-borda) !important; }
html[data-theme="light"] .pro-card .progress { background-color: var(--cor-superficie-sutil); }
html[data-theme="light"] .pro-card .autocomplete-dropdown { background: var(--cor-superficie-elevada); border-color: var(--cor-borda); }
html[data-theme="light"] .pro-card .tech-details { background: var(--cor-superficie-sutil); }
/* Fase 4 BLOCO 2: bg inline rgba(0,0,0,x) de secao/status-box (decoracao) -> claro no
   light via seletor de atributo. So casa "background: rgba(0,0,0,0..." (NAO box-shadow,
   NAO o overlay do mapa rgba(10,15,12) = Bloco 3). Dark byte-identico (inline preservado,
   regra so no light). Cor-de-faixa dos sensores e' JS via style.color/borderColor (NAO
   background) -> intocada. .progress = trilha (chrome); o fill .progress-bar = dado, filho. */
html[data-theme="light"] .pro-card [style*="background: rgba(0,0,0,0"],
html[data-theme="light"] .pro-card [style*="background:rgba(0,0,0,0"],
html[data-theme="light"] .pro-card [style*="background: rgba(0, 0, 0, 0"] { background-color: var(--cor-superficie-sutil) !important; }
html[data-theme="light"] .pro-card .progress { background-color: var(--cor-superficie-sutil) !important; }

/* ============================================================
   THEME-TEXTO -- legibilidade de texto no claro (dashboard in-card).
   Medido no Chrome (ratios reais): 79 textos in-card falhavam AA no claro
   (texto explicito-claro sobre card branco). Decisao Jonas: dashboard fica
   ESCURO (sem marcador) + paineis de STATUS ficam ESCUROS (cor de status
   EXATA + AA). Tudo escopado a html[data-theme=light] .pro-card => dark
   byte-identico (regras so no claro) + protege visao-geral #14 (sem .pro-card).
   NAO ha seletor pelos hexes de DADO/STATUS (#52b788/#ff6b6b/#fca311 inline-JS,
   NDVI, SENTINEL, poligonos) => cor-dado intocada. */
/* (B-REVISADO @v1.0.14-beta.1, feedback do dono com a dashboard clara no ar):
   paineis-instrumento CLAROS no light -- recesso sutil + borda visivel; o
   SINAL dos status e' preservado por 2-TONS (abaixo). SO os overlays SOBRE
   O TILE do mapa ([rgba(10,15,12]) seguem escuros (instrumento sobre
   satelite, identico nos 2 temas). */
html[data-theme="light"] .pro-card :is(#pulv-status-box,.quadrant-box,#container-ndvi-real-gemeo,[style*="background: rgba(0,0,0,0.2)"],[style*="background:rgba(0,0,0,0.2)"]) {
    background-color: var(--cor-superficie-sutil) !important;
    border-color: var(--cor-borda) !important;
    color: var(--cor-texto-secundario) !important;
}
html[data-theme="light"] .pro-card :is([style*="background: rgba(10, 15, 12"],[style*="background:rgba(10,15,12"]) {
    background-color: #0e1611 !important; border-color: rgba(255,255,255,.07) !important; color: #e9ecef !important;
}
/* 2-TONS de status inline (JS pinta por logica; o CSS so escurece o TOM no
   claro -- MESMO matiz, sinal intacto; padrao consagrado mercado/ticker).
   Dentro dos overlays escuros do mapa o re-exact (abaixo) devolve a cor crua. */
html[data-theme="light"] .pro-card [style*="color: #52b788"],
html[data-theme="light"] .pro-card [style*="color:#52b788"] { color: #2d6a4f !important; }
html[data-theme="light"] .pro-card [style*="color: #ff6b6b"],
html[data-theme="light"] .pro-card [style*="color:#ff6b6b"] { color: var(--cor-perigo) !important; }
html[data-theme="light"] .pro-card [style*="color: #fca311"],
html[data-theme="light"] .pro-card [style*="color:#fca311"],
html[data-theme="light"] .pro-card [style*="color: #ffb703"],
html[data-theme="light"] .pro-card [style*="color:#ffb703"] { color: var(--cor-aviso) !important; }
/* JS que seta el.style.color serializa em rgb() -> o atributo NAO contem o hex.
   Mesmos 2-tons pras formas serializadas (sensores/titulos pintados em runtime). */
html[data-theme="light"] .pro-card [style*="color: rgb(82, 183, 136)"] { color: #2d6a4f !important; }
html[data-theme="light"] .pro-card [style*="color: rgb(255, 107, 107)"] { color: var(--cor-perigo) !important; }
html[data-theme="light"] .pro-card [style*="color: rgb(252, 163, 17)"],
html[data-theme="light"] .pro-card [style*="color: rgb(255, 183, 3)"] { color: var(--cor-aviso) !important; }
html[data-theme="light"] .pro-card [style*="color: rgb(76, 201, 240)"] { color: var(--cor-info) !important; }
/* Branco INLINE solto sobre os paineis agora claros -> texto primario.
   Protecoes: style com background junto = branco-em-botao/CTA (fica);
   classes de botao/badge/pill (ficam). */
html[data-theme="light"] .pro-card :is([style*="color: #fff"],[style*="color:#fff"],[style*="color: rgb(255, 255, 255)"]):not([style*="background"]):not([class*="btn"]):not([class*="badge"]):not([class*="pill"]) { color: var(--cor-texto-primario) !important; }
/* Utilitarios Bootstrap de status sobre superficie clara -> 2-tons do tema
   (BS text-warning #ffc107 = 1.6 medido; success/danger 4.44 limitrofes). */
html[data-theme="light"] .pro-card .text-success { color: var(--cor-sucesso) !important; }
html[data-theme="light"] .pro-card .text-warning { color: var(--cor-aviso) !important; }
html[data-theme="light"] .pro-card .text-danger { color: var(--cor-perigo) !important; }
/* chrome de CLASSE na superficie branca -> token escuro. :where() zera a
   specificity (paineis re-clareiam); :not([style*=color]) ignora texto com
   cor inline (= status). */
html[data-theme="light"] .pro-card .text-white:where(:not([style*="color"]):not([class*="btn"]):not(.badge):not([class*="bg-"]):not([class*="pill"])) { color: var(--cor-texto-primario) !important; }
html[data-theme="light"] .pro-card .kpi-val:where(:not([style*="color"])) { color: var(--cor-texto-primario); }
html[data-theme="light"] .pro-card .kpi-label,
html[data-theme="light"] .pro-card .card-source { color: var(--cor-texto-suave) !important; }
html[data-theme="light"] .pro-card .live-indicator { color: var(--cor-sucesso) !important; }
html[data-theme="light"] .pro-card .agd-card-header-foco { color: var(--cor-texto-suave) !important; }
html[data-theme="light"] .pro-card .btn-tech-toggle,
html[data-theme="light"] .pro-card .text-info,
html[data-theme="light"] .pro-card .agd-status-pill-identidade { color: var(--cor-info) !important; }
html[data-theme="light"] .pro-card .agd-status-pill-live { color: var(--cor-sucesso) !important; }
/* chrome de cor INLINE (muted #adb5bd/#8b9c8f, accent cyan #4cc9f0) -> escuro. */
html[data-theme="light"] .pro-card [style*="color: #adb5bd"],
html[data-theme="light"] .pro-card [style*="color:#adb5bd"],
html[data-theme="light"] .pro-card [style*="color: #8b9c8f"],
html[data-theme="light"] .pro-card [style*="color:#8b9c8f"] { color: var(--cor-texto-suave) !important; }
html[data-theme="light"] .pro-card [style*="color: #4cc9f0"],
html[data-theme="light"] .pro-card [style*="color:#4cc9f0"] { color: var(--cor-info) !important; }
/* DENTRO dos overlays escuros do MAPA o chrome volta a claro e o status volta
   a cor CRUA (re-exact: specificity maior + declarado depois vence o 2-tons).
   Paineis-instrumento agora sao claros -> regras gerais acima ja os cobrem. */
html[data-theme="light"] .pro-card :is([style*="background: rgba(10, 15, 12"],[style*="background:rgba(10,15,12"]) :is(.text-white,.kpi-val,.kpi-label,.card-source,.live-indicator,.text-info,.agd-card-header-foco,.agd-status-pill-live,.agd-status-pill-identidade) { color: #e9ecef !important; }
html[data-theme="light"] .pro-card :is([style*="background: rgba(10, 15, 12"],[style*="background:rgba(10,15,12"]) .btn-tech-toggle { color: #4cc9f0 !important; }
html[data-theme="light"] .pro-card :is([style*="background: rgba(10, 15, 12"],[style*="background:rgba(10,15,12"]) :is([style*="color: #adb5bd"],[style*="color:#adb5bd"]) { color: #adb5bd !important; }
html[data-theme="light"] .pro-card :is([style*="background: rgba(10, 15, 12"],[style*="background:rgba(10,15,12"]) :is([style*="color: #8b9c8f"],[style*="color:#8b9c8f"]) { color: #8b9c8f !important; }
html[data-theme="light"] .pro-card :is([style*="background: rgba(10, 15, 12"],[style*="background:rgba(10,15,12"]) :is([style*="color: #4cc9f0"],[style*="color:#4cc9f0"]) { color: #4cc9f0 !important; }
html[data-theme="light"] .pro-card :is([style*="background: rgba(10, 15, 12"],[style*="background:rgba(10,15,12"]) :is([style*="color: #52b788"],[style*="color:#52b788"]) { color: #52b788 !important; }
html[data-theme="light"] .pro-card :is([style*="background: rgba(10, 15, 12"],[style*="background:rgba(10,15,12"]) :is([style*="color: #ff6b6b"],[style*="color:#ff6b6b"]) { color: #ff6b6b !important; }
html[data-theme="light"] .pro-card :is([style*="background: rgba(10, 15, 12"],[style*="background:rgba(10,15,12"]) :is([style*="color: #fca311"],[style*="color:#fca311"]) { color: #fca311 !important; }
html[data-theme="light"] .pro-card :is([style*="background: rgba(10, 15, 12"],[style*="background:rgba(10,15,12"]) :is([style*="color: #ffb703"],[style*="color:#ffb703"]) { color: #ffb703 !important; }
/* re-exact das formas rgb-serializadas (JS runtime) + branco dentro dos overlays */
html[data-theme="light"] .pro-card :is([style*="background: rgba(10, 15, 12"],[style*="background:rgba(10,15,12"]) [style*="color: rgb(82, 183, 136)"] { color: #52b788 !important; }
html[data-theme="light"] .pro-card :is([style*="background: rgba(10, 15, 12"],[style*="background:rgba(10,15,12"]) [style*="color: rgb(255, 107, 107)"] { color: #ff6b6b !important; }
html[data-theme="light"] .pro-card :is([style*="background: rgba(10, 15, 12"],[style*="background:rgba(10,15,12"]) [style*="color: rgb(252, 163, 17)"] { color: #fca311 !important; }
html[data-theme="light"] .pro-card :is([style*="background: rgba(10, 15, 12"],[style*="background:rgba(10,15,12"]) [style*="color: rgb(255, 183, 3)"] { color: #ffb703 !important; }
html[data-theme="light"] .pro-card :is([style*="background: rgba(10, 15, 12"],[style*="background:rgba(10,15,12"]) [style*="color: rgb(76, 201, 240)"] { color: #4cc9f0 !important; }
html[data-theme="light"] .pro-card :is([style*="background: rgba(10, 15, 12"],[style*="background:rgba(10,15,12"]) :is([style*="color: #fff"],[style*="color:#fff"],[style*="color: rgb(255, 255, 255)"]) { color: #fff !important; }

/* THEME FASE 3: fundo de PAGINA claro escopado a /cadastros/* (body.tema-pagina-clara)
   no tema claro. Engine-safe: dashboard/lab/engines sem o marcador ficam dark.
   Vence body{background:var(--bg-dark)!important} do layout por especificidade. */
html[data-theme="light"] body.tema-pagina-clara {
    background-color: var(--cor-superficie-base) !important;
    color: var(--cor-texto-secundario);
    /* BLOCO C: aliases legados do layout (theme-constant no :root) viram
       SEMANTICOS nas paginas claras -> admin/views antigas reagem ao claro. */
    --text-muted: var(--cor-texto-suave);
    --primary-green: var(--cor-interativo);
}

/* THEME-TEXTO -- chrome de classe propria nas PAGINAS CLARAS (cadastros + config).
   So onde a pagina e' clara de fato (body.tema-pagina-clara | :has(.cfg-hub)) =>
   NAO afeta o dashboard (data-theme=light MAS page-bg escuro). Medido no Chrome:
   .principal (titulos brancos r=1.0), .f2-lock-toggle (#8b9c8f r=2.9), footer
   (#8b9c8f/#b8c0c8). .aba-rotulo da sidebar NAO entra: fica em gradiente escuro. */
html[data-theme="light"] body.tema-pagina-clara .principal,
html[data-theme="light"] body:has(.cfg-hub) .principal { color: var(--cor-texto-primario) !important; }
html[data-theme="light"] body.tema-pagina-clara .f2-lock-toggle,
html[data-theme="light"] body:has(.cfg-hub) .f2-lock-toggle { color: var(--cor-texto-suave) !important; }
html[data-theme="light"] body.tema-pagina-clara footer,
html[data-theme="light"] body:has(.cfg-hub) footer { color: var(--cor-texto-suave) !important; }
html[data-theme="light"] body.tema-pagina-clara footer a,
html[data-theme="light"] body:has(.cfg-hub) footer a { color: var(--cor-interativo) !important; }
/* botao ghost (.agd-btn-ghost usa var(--agd-text-muted) #8b9c8f = nao muda por tema ->
   2.56 no claro). So nas paginas claras -> token semantico AA (dark intocado). */
html[data-theme="light"] body.tema-pagina-clara .agd-btn-ghost,
html[data-theme="light"] body:has(.cfg-hub) .agd-btn-ghost { color: var(--cor-texto-suave) !important; }
/* miss do Lote 1: header sticky .fzn-th (fazendas/index) tem bg DARK hardcoded
   rgba(17,24,18,0.95) (estrutural nao-migrado) + texto no token -> dark-on-dark (3.2)
   no claro. So no claro -> superficie elevada (dark byte-identico: regra so no light). */
html[data-theme="light"] .fzn-th { background: var(--cor-superficie-elevada) !important; }

/* ============================================================
   F4 (2026-06-09) -- RED-ZONE CSS-ONLY (PROMPT 2 exec). ZERO
   edicao nos blades dos motores/Lab; so overrides aqui.
   DECISAO de design (coerente com beta.3 "paineis de status
   escuros"): HUDs/legendas/controle-de-camadas sao overlays
   SOBRE O TILE (satelite/dark = imagem, identica nos 2 temas)
   -> ficam ESCUROS nos 2 temas (instrumento). So os POPUPS
   (.popup-fazenda, definidos no cmm e compartilhados pelos 2
   mapas) ganham tema claro. Satelite/poligonos/overlays NDVI =
   DADO, intocados (SEM filtro em .leaflet-tile). */
html[data-theme="light"] .leaflet-popup.popup-fazenda .leaflet-popup-content-wrapper {
    background: var(--cor-superficie-elevada);
    color: var(--cor-texto-secundario);
    box-shadow: var(--agd-shadow-2), 0 0 0 1px var(--cor-borda);
}
html[data-theme="light"] .leaflet-popup.popup-fazenda .leaflet-popup-content { color: var(--cor-texto-secundario) !important; }
html[data-theme="light"] .leaflet-popup.popup-fazenda .leaflet-popup-tip { background: var(--cor-superficie-elevada); }
html[data-theme="light"] .leaflet-popup.popup-fazenda .leaflet-popup-close-button { color: var(--cor-texto-suave) !important; }
html[data-theme="light"] .popup-fazenda-titulo { color: var(--cor-interativo); }
html[data-theme="light"] .popup-fazenda-id,
html[data-theme="light"] .popup-fazenda-grid .lbl { color: var(--cor-texto-suave); }
html[data-theme="light"] .popup-fazenda-grid strong { color: var(--cor-texto-primario); }
html[data-theme="light"] .popup-fazenda-grid strong.verde { color: var(--cor-interativo); }
/* CTA do popup: branco-em-gradiente-verde = branco-em-botao, identico nos 2 temas. */

/* F4 -- LAB (espectrometria): override de primitivos de CHROME escopado ao
   .lab-container (molde provado do .pro-card). As ~151 var(--agd-*) do Lab
   reagem de uma vez, SEM editar Blade. NAO sobrescreve --agd-green/yellow/
   danger/cyan (cores de indice/ciencia = DADO, identicas nos 2 temas).
   Modais do Lab (fora do .lab-container, custom) ficam escuros = funcionais
   nos 2 temas (residual honesto p/ PROMPT 3). Dark byte-identico (regra so
   no light). #14: ciencia/Service intocados. */
html[data-theme="light"] .lab-container {
    --agd-bg-base:        #eef2ee;
    --agd-bg-card:        #ffffff;
    --agd-bg-panel:       rgba(45, 106, 79, 0.06);
    --agd-bg-panel-light: rgba(45, 106, 79, 0.04);
    --agd-text-primary:   #14241a;
    --agd-text-body:      #33433a;
    --agd-text-muted:     #5b6b61;
    --agd-border-default: rgba(45, 106, 79, 0.22);
    --agd-border-subtle:  rgba(45, 106, 79, 0.12);
}
/* Overlays ESCUROS sobre o mapa do Lab (stats-card/legenda/pills/chips, bg
   rgba(13,19,16|7,11,8) = instrumento sobre tile, identico nos 2 temas):
   RE-override -> texto volta aos tons claros DENTRO deles (padrao re-light). */
html[data-theme="light"] .lab-container :is(.lab-stats-card, .lab-mapa-legenda, .lab-pill, .lab-media, .lab-ferr-tag) {
    --agd-text-primary: #ffffff;
    --agd-text-body:    #cdd6dc;
    --agd-text-muted:   #8b9c8f;
    --agd-bg-base:      #070b08; /* pill ativa usa 'texto da cor do fundo' p/ recorte sobre o badge colorido -> volta escuro (byte-identico ao dark) */
    --text-muted:       #8b9c8f; /* alias legado tambem volta claro dentro dos chips escuros */
    --primary-green:    var(--agd-green);
}
/* idem nos overlays escuros do mapa no dashboard (aliases legados voltam claros;
   paineis-instrumento agora CLAROS @v1.0.14-beta.1 -> sairam desta lista) */
html[data-theme="light"] .pro-card :is([style*="background: rgba(10, 15, 12"],[style*="background:rgba(10,15,12"]) {
    --text-muted:    #8b9c8f;
    --primary-green: var(--agd-green);
    --agd-text-muted: #8b9c8f;
}

/* ============================================================
   BLOCO A (2026-06-10) -- SHELL DO DASHBOARD CLARA (marco final
   da Fase 4). Tudo light-scoped = dark byte-identico. ZERO
   edicao em header.blade/abas (so overrides aqui).
   A.1 header command-center: override de PRIMITIVOS escopado
   (molde Lab/.pro-card) -> FOCO/CAMADAS toggles+menus (cards-
   headers.css usa var(--agd-*)) reagem de uma vez; + overrides
   diretos pros hardcoded. Glow verde de assinatura MANTIDO. */
html[data-theme="light"] .command-center-header {
    --agd-bg-base:        #eef2ee;
    --agd-bg-card:        #ffffff;
    --agd-bg-panel:       rgba(45, 106, 79, 0.06);
    --agd-bg-panel-light: rgba(45, 106, 79, 0.04);
    --agd-text-primary:   #14241a;
    --agd-text-body:      #33433a;
    --agd-text-muted:     #5b6b61;
    --agd-border-default: rgba(45, 106, 79, 0.22);
    --agd-border-subtle:  rgba(45, 106, 79, 0.12);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 30px rgba(20, 40, 26, 0.12),
                0 0 0 1px rgba(82, 183, 136, 0.25); /* assinatura glow verde: identica nos 2 temas */
}
html[data-theme="light"] .system-status { color: var(--cor-interativo); } /* #52b788 2.47 -> #2d6a4f AA sobre claro */
html[data-theme="light"] .search-box-wrapper input {
    background: var(--cor-superficie-base) !important;
    border: 1px solid var(--cor-borda) !important;
    color: var(--cor-texto-primario) !important;
    box-shadow: 0 0 15px rgba(82, 183, 136, 0.08) !important;
}
html[data-theme="light"] .command-center-header .autocomplete-dropdown {
    background: var(--cor-superficie-elevada);
    box-shadow: var(--agd-shadow-2);
}
html[data-theme="light"] .command-center-header .autocomplete-item { color: var(--cor-texto-secundario); border-bottom-color: var(--cor-borda-suave); }
html[data-theme="light"] .command-center-header .autocomplete-item:hover { background: rgba(var(--agd-green-rgb), 0.12); color: var(--cor-texto-primario); }
/* A.2 ticker claro. Cores de VARIACAO/icones por commodity (JS) = DADO, intocadas. */
html[data-theme="light"] .ticker-wrapper { background: var(--cor-superficie-elevada); border-color: var(--cor-borda-suave); }
html[data-theme="light"] .ticker-wrapper::before { background: linear-gradient(to right, rgba(255,255,255,1), transparent); }
html[data-theme="light"] .ticker-wrapper::after  { background: linear-gradient(to left,  rgba(255,255,255,1), transparent); }
html[data-theme="light"] .ticker-item { color: var(--cor-texto-primario); }
html[data-theme="light"] .ticker-item span.label { color: var(--cor-texto-suave); }
/* item de sincronia do ticker (JS injeta style="color: var(--primary-green)") = chrome verde -> AA no claro */
html[data-theme="light"] .ticker-item[style*="--primary-green"] { color: var(--cor-interativo) !important; }
/* ONDA 0 (validacao P2): mercado -- secoes usavam alias --bg-panel (constante #111812)
   e cotacao-card gradiente escuro -> claras no light (texto-token ja' era escuro).
   TradingView dentro da secao segue escuro (iframe/instrumento, decisao tomada). */
html[data-theme="light"] .mercado-secao { background: var(--cor-superficie-elevada); box-shadow: var(--agd-shadow-2); }
html[data-theme="light"] .cotacao-card { background: var(--cor-superficie-base); }
/* ONDA 0: tabelas Bootstrap .table-dark nas PAGINAS CLARAS -> claras (assessoria/etc).
   Redefine as vars do BS (mecanismo nativo) + fallback. */
html[data-theme="light"] body.tema-pagina-clara .table-dark {
    --bs-table-bg: var(--cor-superficie-elevada);
    --bs-table-color: var(--cor-texto-secundario);
    --bs-table-border-color: var(--cor-borda-suave);
    --bs-table-striped-bg: var(--cor-superficie-sutil);
    --bs-table-hover-bg: rgba(var(--agd-green-rgb), 0.06);
    color: var(--cor-texto-secundario);
}
/* cyan-identidade #118ab2 inline (links/icones de tipo) em pagina clara: 2-tons do
   MESMO matiz (#0e7490 AA) -- padrao consagrado; categoria preservada. */
html[data-theme="light"] body.tema-pagina-clara [style*="color:#118ab2"],
html[data-theme="light"] body.tema-pagina-clara [style*="color: #118ab2"] { color: #0e7490 !important; }
/* botoes secondary/warning (outline cyan/ambar) AA sobre claro */
html[data-theme="light"] body.tema-pagina-clara .agd-btn-secondary { color: #0e7490; border-color: rgba(14, 116, 144, 0.45); }
html[data-theme="light"] body.tema-pagina-clara .agd-btn-warning { color: var(--cor-aviso); border-color: rgba(138, 86, 0, 0.45); }
/* BLOCO C: ticker-footer (faixa de cotacoes do rodape) claro nas paginas claras,
   espelhando o ticker do header. Variacoes up/down -> 2-tons AA preservando o
   SINAL verde/vermelho (mesmo padrao do mercado); flat/unidade -> suave. */
html[data-theme="light"] body.tema-pagina-clara .ticker-footer {
    background: rgba(255, 255, 255, 0.95);
    color: var(--cor-texto-primario);
}
html[data-theme="light"] body.tema-pagina-clara .ticker-footer__sim { color: var(--cor-texto-secundario); }
html[data-theme="light"] body.tema-pagina-clara .ticker-footer__preco { color: var(--cor-texto-primario); }
html[data-theme="light"] body.tema-pagina-clara .ticker-footer__var.up { color: var(--cor-sucesso); }
html[data-theme="light"] body.tema-pagina-clara .ticker-footer__var.down { color: var(--cor-perigo); }
html[data-theme="light"] body.tema-pagina-clara .ticker-footer__var.flat,
html[data-theme="light"] body.tema-pagina-clara .ticker-footer__unidade,
html[data-theme="light"] body.tema-pagina-clara .ticker-footer__loading { color: var(--cor-texto-suave); }
/* A.3 paineis laterais (offcanvas Atividades/Historico/etc): override de primitivos.
   As ORELHAS (.aba-*) = IDENTIDADE da marca -> escuras nos 2 temas (decisao A.4,
   mesma da sidebar; pratica de inline-theming de SaaS premium). aba-ferramentas
   (painel de mapa, red-zone) tambem fica escura = instrumento. */
html[data-theme="light"] .offcanvas {
    --agd-bg-base:        #ffffff;
    --agd-bg-card:        #ffffff;
    --agd-bg-panel:       rgba(45, 106, 79, 0.06);
    --agd-text-primary:   #14241a;
    --agd-text-body:      #33433a;
    --agd-text-muted:     #5b6b61;
    --agd-border-default: rgba(45, 106, 79, 0.22);
    box-shadow: var(--agd-shadow-3) !important;
}

/* G.6.A.5 -- wrapper transparente: hub usa o fundo do <main> da plataforma (padrao AGRODASH) */
/* G.6.A.13 -- hub vira flex column com gap uniforme entre header, kpi, bento, explanation.
   Padding zero -- bordas canonicas vem do <main> (G.5.A). */
.agd-hub{font-family:var(--font-sans,system-ui);color:var(--agd-text-body);padding:0;min-height:calc(100vh - 200px);display:flex;flex-direction:column;gap:14px}
/* G.6.A.12 -- definicao original removida (props sobreescritas pelo G.6.A.10 sticky abaixo).
   border-bottom removido pra evitar dupla linha. */
.agd-hub-title{font-size:22px;color:var(--agd-text-primary);font-weight:500;margin:0}
/* G.9.AA -- .agd-hub-subtitle removida (0 hits cross-app). */
.agd-tabs{display:flex;gap:2px;margin-bottom:14px;border-bottom:1px solid var(--agd-border-subtle);flex-wrap:wrap}
.agd-tab{padding:8px 14px;font-size:15px;color:var(--agd-text-muted);cursor:pointer;border:none;border-bottom:2px solid transparent;background:transparent;font-family:inherit;transition:.2s}
.agd-tab:hover{color:var(--agd-text-body)}
.agd-tab.active{color:var(--agd-green);border-bottom-color:var(--agd-green);font-weight:500}
.agd-tab i{font-size:16px;margin-right:4px}
.agd-subtabs{display:flex;gap:2px;margin:10px 0 14px;border-bottom:1px solid var(--agd-border-subtle);flex-wrap:wrap}
.agd-subtab{padding:6px 12px;font-size:14px;color:var(--agd-text-muted);cursor:pointer;background:transparent;border:none;border-bottom:2px solid transparent;font-family:inherit}
.agd-subtab.active{color:var(--agd-cyan);border-bottom-color:var(--agd-cyan);font-weight:500}
.agd-tab-content{display:none}
.agd-tab-content.active{display:block}
/* G.9.Z -- definicao faltante das classes irmas de .agd-subtabs.
   Usadas em 15+ views (cadastros/amostras, fazendas/tabs/*) como containers
   de conteudo das subtabs ativas. Padrao derivado de .agd-tab-content.
   Mecanismo alinhado com agrodash-hub.js (classe .active + style.display
   inline). O JS manipula ambos; CSS cobre o fallback default. */
.agd-subtab-contents{position:relative;width:100%}
.agd-subtab-content{display:none;width:100%}
.agd-subtab-content.active{display:block}
.agd-id-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:4px;font-family:var(--font-mono,monospace);font-size:13px;font-weight:500}
.agd-id-fazenda,.agd-id-produtor,.agd-id-analise{background:rgba(82, 183, 136,.15);color:var(--agd-green)}
.agd-id-talhao,.agd-id-atividade,.agd-id-assessoria{background:rgba(17,138,178,.15);color:var(--agd-cyan)}
.agd-id-safra{background:rgba(255,183,3,.15);color:var(--agd-yellow)}
.agd-id-default{background:rgba(139,155,165,.15);color:var(--agd-text-muted)}
.agd-status{display:inline-block;padding:2px 8px;border-radius:3px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;font-weight:500}
.agd-status-andamento{background:rgba(255,183,3,.15);color:var(--agd-yellow)}
.agd-status-concluida,.agd-status-ativa{background:rgba(82, 183, 136,.15);color:var(--agd-green)}
.agd-status-pendente{background:rgba(255,107,107,.15);color:var(--agd-danger)}
.agd-status-neutro,.agd-status-arquivada{background:rgba(139,155,165,.15);color:var(--agd-text-muted)}
/* G.6.A.3 -- RESET decisivo: !important pra forcar precedencia sobre regras de origem
   antiga ou cascade do Bootstrap. Cards 100% transparentes, fundo so via accent. */
/* G.9.X.1 -- display:flex !important comentado por conflitar com grid-static.
   Mas gap:16px e width:100% restaurados — sao inofensivos pro grid (gap
   funciona em grid tambem) e podem ser necessarios pra containment de
   visuais vizinhos (header, chips). flex-wrap:wrap omitido (no-op em grid). */
.agd-bento { gap: 16px; width: 100%; }
/* .agd-bento{display:flex !important;flex-wrap:wrap;gap:16px;width:100%} */
.agd-bento-card{flex:1 1 220px;min-height:110px;padding:16px;background:transparent !important;border:1px solid rgba(255,255,255,0.04) !important;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,0.45),0 0 0 1px rgba(17,138,178,0.08);position:relative;overflow:hidden;transition:0.3s ease;display:flex;flex-direction:column;justify-content:space-between}
.agd-bento-card.span-1-1{flex:1 1 160px;min-height:100px}
.agd-bento-card.span-2-1{flex:1.4 1 240px;min-height:110px}
.agd-bento-card.span-3-2{flex:2.5 1 340px;min-height:240px}
.agd-bento-card.span-6-1{flex:1 1 100%;min-height:110px}
.agd-bento-card.accent-green{background:linear-gradient(135deg,rgba(82, 183, 136,0.14),rgba(82, 183, 136,0.04)) !important;box-shadow:0 8px 26px rgba(0,0,0,0.5),0 0 0 1px rgba(82, 183, 136,0.28);border-color:transparent !important}
/* G.13.0 -- accent-yellow + accent-red suavizados pra reduzir peso visual.
   Semantica preservada (yellow=atencao, red=alerta).
   Diff yellow: gradient .14->.08 + .04->.02; box-shadow .28->.18;
                hover .45->.30 + .18->.10.
   Diff red: bg .10->.06; box-shadow .25->.15. */
.agd-bento-card.accent-yellow{background:linear-gradient(135deg,rgba(255,183,3,0.08),rgba(255,183,3,0.02)) !important;box-shadow:0 8px 26px rgba(0,0,0,0.5),0 0 0 1px rgba(255,183,3,0.18);border-color:transparent !important}
.agd-bento-card.accent-cyan{background:rgba(17,138,178,0.10) !important;box-shadow:0 8px 26px rgba(0,0,0,0.5),0 0 0 1px rgba(17,138,178,0.25);border-color:transparent !important}
.agd-bento-card.accent-red{background:rgba(255,107,107,0.06) !important;box-shadow:0 8px 26px rgba(0,0,0,0.5),0 0 0 1px rgba(255,107,107,0.15);border-color:transparent !important}
.agd-bento-card.accent-red:hover{box-shadow:0 14px 38px rgba(0,0,0,0.6),0 0 0 1px rgba(255,107,107,0.45),0 0 26px rgba(255,107,107,0.18)}
.agd-bento-card.accent-red::before{background:linear-gradient(90deg,transparent,#ff6b6b,transparent)}
.agd-bento-card:hover{transform:translateY(-3px);box-shadow:0 14px 38px rgba(0,0,0,0.6),0 0 0 1px rgba(82, 183, 136,0.4),0 0 24px rgba(82, 183, 136,0.15)}
.agd-bento-card.accent-yellow:hover{box-shadow:0 14px 38px rgba(0,0,0,0.6),0 0 0 1px rgba(255,183,3,0.30),0 0 26px rgba(255,183,3,0.10)}
.agd-bento-card.accent-cyan:hover{box-shadow:0 14px 38px rgba(0,0,0,0.6),0 0 0 1px rgba(17,138,178,0.45),0 0 26px rgba(17,138,178,0.18)}
.agd-bento-card::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,#52b788,transparent);opacity:0.7}
.agd-bento-card.accent-yellow::before{background:linear-gradient(90deg,transparent,#ffb703,transparent)}
.agd-bento-card.accent-cyan::before{background:linear-gradient(90deg,transparent,#118ab2,transparent)}
/* TESTE-1 G.13.X -- .agd-bento-card::after DESATIVADO temporariamente
   pra validar hipotese de cumulativo gradient branco top causar "nevoa". */
/* G.6.A.2 -- LIVE dot pulsante: bolinha verde com glow */
.agd-live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--agd-green);box-shadow:0 0 0 0 rgba(82, 183, 136,.7);animation:agd-pulse 1.8s infinite;margin-right:4px;vertical-align:middle}
@keyframes agd-pulse{0%{box-shadow:0 0 0 0 rgba(82, 183, 136,.6)}70%{box-shadow:0 0 0 8px rgba(82, 183, 136,0)}100%{box-shadow:0 0 0 0 rgba(82, 183, 136,0)}}
.agd-card-label{font-size:11px;text-transform:uppercase;letter-spacing:1.5px}
.agd-card-sublabel{font-size:12px;font-family:var(--font-mono,monospace);color:var(--agd-text-body)}
.agd-card-value{font-size:26px;color:var(--agd-text-primary);font-weight:500;font-family:var(--font-mono,monospace)}
.agd-card-title{font-size:16px;color:var(--agd-text-primary);font-weight:500}
.agd-card-detail{font-size:13px;color:var(--agd-text-body)}
/* G.9.AA -- removidas 6 classes orfas (0 hits cross-app):
   .agd-form-grid, .agd-field, .agd-label, .agd-input, .agd-select, .agd-textarea
   (forms reais usam .agd-form-row* + .agd-modal-body inputs, definidos abaixo) */
.agd-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;border:1px solid transparent;font-family:inherit;transition:.2s}
.agd-btn-primary{background:var(--agd-green);color:var(--agd-bg-base)}
.agd-btn-primary:hover{background:var(--agd-green);filter:brightness(1.1)}
.agd-btn-secondary{background:transparent;border-color:rgba(17,138,178,.4);color:var(--agd-cyan)}
.agd-btn-secondary:hover{border-color:var(--agd-cyan);background:rgba(17,138,178,.08)}
.agd-btn-warning{background:transparent;border-color:rgba(255,183,3,.4);color:var(--agd-yellow)}
.agd-btn-danger{background:transparent;border-color:rgba(255,107,107,.4);color:var(--agd-danger)}
.agd-btn-ghost{background:transparent;border-color:rgba(139,155,165,.3);color:var(--agd-text-muted)}
.agd-btn-sm{padding:4px 10px;font-size:13px}
.agd-kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin:0}
/* G.6.A.13 -- KPIs viram cards flutuantes igual aos .agd-bento-card */
.agd-kpi{background:rgba(20,30,25,.45);border:1px solid rgba(255,255,255,.04);border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 0 1px rgba(17,138,178,.08);padding:16px;position:relative;overflow:hidden}
.agd-kpi::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;opacity:.7;background:linear-gradient(90deg,transparent,rgba(17,138,178,.4),transparent)}
.agd-kpi.accent-green::before{background:linear-gradient(90deg,transparent,var(--agd-green),transparent)}
.agd-kpi.accent-yellow::before{background:linear-gradient(90deg,transparent,var(--agd-yellow),transparent)}
.agd-kpi.accent-cyan::before{background:linear-gradient(90deg,transparent,var(--agd-cyan),transparent)}
/* TESTE-2 G.13.X -- .agd-kpi::after DESATIVADO temporariamente
   pra validar hipotese de cumulativo gradient branco top causar "nevoa". */
.agd-kpi-label{font-size:12px;color:var(--agd-text-muted);text-transform:uppercase;letter-spacing:1px}
.agd-kpi-value{font-size:26px;font-weight:500;font-family:var(--font-mono,monospace);margin-top:4px}
.agd-kpi-hint{font-size:12px;color:var(--agd-text-body);margin-top:2px}
.agd-kpi.accent-green .agd-kpi-value{color:var(--agd-green)}
.agd-kpi.accent-cyan .agd-kpi-value{color:var(--agd-cyan)}
.agd-kpi.accent-yellow .agd-kpi-value{color:var(--agd-yellow)}
/* ============================================================
   POLISH v1.0.14-beta.1 (P2) -- CONTRASTE DE SUPERFICIE da familia
   bento/kpi nas paginas CLARAS. A familia foi desenhada pro dark
   (bg transparente + borda branca 4% + sombra preta + textos --agd-*
   claros) = INVISIVEL sobre pagina clara (medido: titulo r=1.13,
   detail 1.30, kpi ambar 1.54). Principio do dono: "tela branca ->
   componente com borda/sombra/fundo diferenciado + texto escuro".
   Light-scoped => dark byte-identico. #14: Card NDVI I.3 = SO chrome
   (valor NDVI usa var(--agd-green) primitivo NAO sobrescrito aqui;
   mini-mapa/ndviColor() intocados). */
html[data-theme="light"] body.tema-pagina-clara .agd-bento-card {
    background: var(--cor-superficie-elevada) !important;
    border-color: var(--cor-borda) !important;
    box-shadow: var(--agd-shadow-1) !important;
}
html[data-theme="light"] body.tema-pagina-clara .agd-bento-card.accent-green { background: linear-gradient(135deg, rgba(45,106,79,0.10), rgba(45,106,79,0.02)) !important; box-shadow: var(--agd-shadow-1), 0 0 0 1px rgba(45,106,79,0.35) !important; }
html[data-theme="light"] body.tema-pagina-clara .agd-bento-card.accent-yellow { background: linear-gradient(135deg, rgba(138,86,0,0.08), rgba(138,86,0,0.02)) !important; box-shadow: var(--agd-shadow-1), 0 0 0 1px rgba(138,86,0,0.35) !important; }
html[data-theme="light"] body.tema-pagina-clara .agd-bento-card.accent-cyan { background: rgba(14,116,144,0.08) !important; box-shadow: var(--agd-shadow-1), 0 0 0 1px rgba(14,116,144,0.35) !important; }
html[data-theme="light"] body.tema-pagina-clara .agd-bento-card.accent-red { background: rgba(201,40,40,0.06) !important; box-shadow: var(--agd-shadow-1), 0 0 0 1px rgba(201,40,40,0.30) !important; }
html[data-theme="light"] body.tema-pagina-clara .agd-kpi {
    background: var(--cor-superficie-elevada);
    border-color: var(--cor-borda);
    box-shadow: var(--agd-shadow-1);
}
/* textos da familia -> tokens escuros (SEM !important: cor inline de
   dado, se existir, continua vencendo) */
html[data-theme="light"] body.tema-pagina-clara :is(.agd-card-value, .agd-card-title) { color: var(--cor-texto-primario); }
html[data-theme="light"] body.tema-pagina-clara :is(.agd-card-detail, .agd-card-sublabel, .agd-kpi-hint) { color: var(--cor-texto-secundario); }
html[data-theme="light"] body.tema-pagina-clara :is(.agd-card-label, .agd-kpi-label) { color: var(--cor-texto-suave); }
/* valores de KPI acentuados -> 2-tons VIA CLASSE (nao toca primitivo =
   nao alcanca o valor NDVI do Card I.3, que e' var(--agd-green) inline) */
html[data-theme="light"] body.tema-pagina-clara .agd-kpi.accent-green .agd-kpi-value { color: var(--cor-sucesso); }
html[data-theme="light"] body.tema-pagina-clara .agd-kpi.accent-cyan .agd-kpi-value { color: var(--cor-info); }
html[data-theme="light"] body.tema-pagina-clara .agd-kpi.accent-yellow .agd-kpi-value { color: var(--cor-aviso); }
/* labels de chrome com var(--agd-yellow)/var(--agd-text-muted) INLINE
   (ex.: SAFRA ATUAL) -> 2-tons/suave. var(--agd-green) inline NAO entra
   (guard #14: valor NDVI byte-identico). */
html[data-theme="light"] body.tema-pagina-clara :is(.agd-bento-card,.agd-kpi) [style*="color:var(--agd-yellow)"] { color: var(--cor-aviso) !important; }
html[data-theme="light"] body.tema-pagina-clara :is(.agd-bento-card,.agd-kpi) [style*="color:var(--agd-text-muted)"] { color: var(--cor-texto-suave) !important; }
html[data-theme="light"] body.tema-pagina-clara :is(.agd-bento-card,.agd-kpi) [style*="color:var(--agd-cyan)"] { color: var(--cor-info) !important; }
/* P4 -- banner do hub da fazenda (.agd-hub-header rgba(20,30,25,.45) =
   chumbo sobre pagina clara). Superficie clara + override de primitivos
   escopado (molde Lab) -> chips/textos com var(--agd-*) reagem juntos. */
html[data-theme="light"] body.tema-pagina-clara .agd-hub-header {
    background: var(--cor-superficie-elevada);
    border-color: var(--cor-borda);
    box-shadow: var(--agd-shadow-1);
    color: var(--cor-texto-secundario);
    --agd-bg-panel-light: rgba(45, 106, 79, 0.06);
    --agd-text-primary: var(--cor-texto-primario);
    --agd-text-body: var(--cor-texto-secundario);
    --agd-text-muted: var(--cor-texto-suave);
    --agd-border-default: rgba(45, 106, 79, 0.22);
}
html[data-theme="light"] body.tema-pagina-clara .agd-hub-header .agd-header-row-1 { border-bottom-color: var(--cor-borda-suave); }
html[data-theme="light"] body.tema-pagina-clara .agd-hub-header .text-white:not([class*="btn"]):not(.badge) { color: var(--cor-texto-primario) !important; }
/* P4 -- residuais inline dentro de bento/kpi/hub-header nas paginas claras:
   tokens claros do dark e hexes de chrome -> escuros/2-tons. O valor NDVI do
   Card I.3 usa var(--agd-green) (NAO hex, NAO listado) = byte-identico (guard
   #14, convencao cientifica documentada). Branco com background junto =
   branco-em-botao (fica). */
html[data-theme="light"] body.tema-pagina-clara :is(.agd-bento-card,.agd-kpi,.agd-hub-header) [style*="color:var(--agd-text-body)"] { color: var(--cor-texto-secundario) !important; }
html[data-theme="light"] body.tema-pagina-clara :is(.agd-bento-card,.agd-kpi,.agd-hub-header) :is([style*="color: #cdd6dc"],[style*="color:#cdd6dc"]) { color: var(--cor-texto-secundario) !important; }
html[data-theme="light"] body.tema-pagina-clara :is(.agd-bento-card,.agd-kpi,.agd-hub-header) :is([style*="color: #adb5bd"],[style*="color:#adb5bd"],[style*="color: #8b9c8f"],[style*="color:#8b9c8f"]) { color: var(--cor-texto-suave) !important; }
html[data-theme="light"] body.tema-pagina-clara :is(.agd-bento-card,.agd-kpi,.agd-hub-header) :is([style*="color: #ffb703"],[style*="color:#ffb703"],[style*="color: #fca311"],[style*="color:#fca311"]) { color: var(--cor-aviso) !important; }
html[data-theme="light"] body.tema-pagina-clara :is(.agd-bento-card,.agd-kpi,.agd-hub-header) :is([style*="color: #52b788"],[style*="color:#52b788"]) { color: #2d6a4f !important; }
html[data-theme="light"] body.tema-pagina-clara :is(.agd-bento-card,.agd-kpi,.agd-hub-header) :is([style*="color: #ff6b6b"],[style*="color:#ff6b6b"]) { color: var(--cor-perigo) !important; }
html[data-theme="light"] body.tema-pagina-clara :is(.agd-bento-card,.agd-kpi,.agd-hub-header) :is([style*="color: #fff"],[style*="color:#fff"],[style*="color: rgb(255, 255, 255)"]):not([style*="background"]):not([class*="btn"]):not([class*="badge"]) { color: var(--cor-texto-primario) !important; }
/* seta decorativa de hover dos bento (verde 40% = fantasma no claro) */
html[data-theme="light"] body.tema-pagina-clara .agd-card-arrow { color: rgba(45, 106, 79, 0.65); }
/* inline com PRIMITIVO theme-constant de texto (var(--agd-text-primary)=#fff) */
html[data-theme="light"] body.tema-pagina-clara :is(.agd-bento-card,.agd-kpi,.agd-hub-header) [style*="color:var(--agd-text-primary)"] { color: var(--cor-texto-primario) !important; }
/* label-CHROME com var(--agd-green) (ex.: EVOLUCAO NDVI) -> 2-tons; restrito
   a .agd-card-label = o VALOR NDVI (span sem classe) nao casa (guard #14). */
html[data-theme="light"] body.tema-pagina-clara .agd-card-label[style*="color:var(--agd-green)"] { color: #2d6a4f !important; }
/* recessos internos rgba(0,0,0,x) dos cards (itens de alerta etc.) -> sutil */
html[data-theme="light"] body.tema-pagina-clara .agd-bento-card :is([style*="background:rgba(0,0,0,0"],[style*="background: rgba(0,0,0,0"],[style*="background: rgba(0, 0, 0, 0"]) { background-color: var(--cor-superficie-sutil) !important; }
/* texto herdado do dark dentro dos cards claros */
html[data-theme="light"] body.tema-pagina-clara :is(.agd-bento-card,.agd-kpi) { color: var(--cor-texto-secundario); }
/* ============================================================
   SHELL-0 (v1.0.15-beta) -- FUNDACAO DO APP SHELL.
   body.modo-shell e' ligado POR ROTA no app.blade (padrao do
   tema-pagina-clara: reversivel por tela; lista comeca com o
   piloto insumos). A pagina vira JANELA FIXA: o main e' preso na
   viewport (os paddings 140/80 existentes absorvem header+ticker
   fixos) e o scroll passa a viver DENTRO de .agd-painel-scroll.
   GOTCHA central: min-height:0 em TODA a cadeia flex que rola.
   MOBILE (<992px): shell DESLIGA -> fluxo normal de pagina. */
body.modo-shell {
    height: 100dvh;
    overflow: hidden;
}
body.modo-shell .main-content {
    height: 100dvh;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* painel rolavel: o coracao do shell */
.agd-painel-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--cor-borda) transparent;
}
.agd-painel-scroll::-webkit-scrollbar { width: 8px; }
.agd-painel-scroll::-webkit-scrollbar-track { background: transparent; }
.agd-painel-scroll::-webkit-scrollbar-thumb {
    background: var(--cor-borda);
    border-radius: 4px;
}
.agd-painel-scroll::-webkit-scrollbar-thumb:hover { background: var(--cor-interativo); }
/* a11y: regiao rolavel recebe tabindex=0 na view -> foco visivel */
.agd-painel-scroll:focus-visible {
    outline: 2px solid var(--cor-foco, #52b788);
    outline-offset: -2px;
}
@media (max-width: 992px) {
    body.modo-shell { height: auto; overflow: visible; }
    body.modo-shell .main-content { height: auto; overflow: visible; display: block; }
    .agd-painel-scroll { overflow-y: visible; min-height: auto; }
}

/* ============================================================
   NAV v1.0.14-beta.3 -- CONTROLES DE NAVEGACAO VISIVEIS NOS 2 TEMAS.
   Caso-indice (Jonas): X do painel ATIVIDADES -- o glyph do Bootstrap
   .btn-close e' um SVG PRETO embutido; o blade aplica invert(1) = BRANCO
   fixo. O painel de Atividades CLAREIA no tema claro (theming) -> X
   branco sobre painel branco = INVISIVEL. No claro o glyph volta ao
   preto nativo (specificity vence o <style> do componente). Historico/
   Ferramentas seguem ESCUROS nos 2 temas (painel-instrumento) -> X
   branco correto la, intocado. Dark byte-identico (regra so no light). */
html[data-theme="light"] #painelAtividades .btn-close { filter: none; opacity: 0.6; }
html[data-theme="light"] #painelAtividades .btn-close:hover { opacity: 1; }
/* Affordance de teclado pra TODA a familia de controles de fechar:
   foco visivel com o token do tema (nos 2 temas). */
.btn-close:focus-visible,
.agd-modal-close:focus-visible,
.prev-btn-close:focus-visible,
.leaflet-popup-close-button:focus-visible {
    outline: 2px solid var(--cor-foco, #52b788);
    outline-offset: 2px;
    box-shadow: none;
}
/* hit-area do X do preview de fazendas (26x22 -> ~34x30 via padding,
   sem mudar layout: botao e' inline-flex no header do pane) */
.prev-btn-close { padding: 4px 8px !important; min-width: 34px; min-height: 30px; }

/* P4 -- badges de status do admin (texto vivo sobre tint claro 13% = 2.4-2.7
   medido). 2-tons SO no texto; tint de fundo + borda na cor crua FICAM =
   o sinal visual do status e' preservado. */
html[data-theme="light"] body.tema-pagina-clara .badge-status[style*="color: #52b788"] { color: #2d6a4f !important; }
html[data-theme="light"] body.tema-pagina-clara .badge-status[style*="color: #ff6b6b"] { color: var(--cor-perigo) !important; }
html[data-theme="light"] body.tema-pagina-clara .badge-status:is([style*="color: #fca311"],[style*="color: #ffb703"]) { color: var(--cor-aviso) !important; }
html[data-theme="light"] body.tema-pagina-clara .badge-status[style*="color: #4cc9f0"] { color: var(--cor-info) !important; }
/* G.6.A.13 -- explanation alinha com card flutuante (margin-top zero, gap do flex parent cuida) */
.agd-explanation{background:rgba(82, 183, 136,.06);border:1px solid rgba(255,255,255,.04);border-left:3px solid var(--agd-green);border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 0 1px rgba(82, 183, 136,.15);padding:16px;margin-top:0;display:flex;gap:10px;align-items:flex-start}
.agd-explanation>i{font-size:22px;color:var(--agd-green)}
.agd-explanation-title{font-size:14px;color:var(--agd-green);font-weight:500;text-transform:uppercase;letter-spacing:1px}
.agd-explanation-text{font-size:15px;color:var(--agd-text-body);margin-top:4px;line-height:1.5}
.agd-storyboard-dim{opacity:.25;transition:opacity .5s}
.agd-storyboard-active{opacity:1;transition:opacity .5s}
.agd-storyboard-highlight{box-shadow:0 0 0 2px rgba(82, 183, 136,.6);transition:box-shadow .4s}
.agd-drill-detail{background:var(--agd-bg-card);border:1px solid var(--agd-border-default);border-radius:8px;padding:16px;margin-top:10px}
/* G.6.A.4 -- utilitarios visuais pros novos cards (sparkline, avatar stack, event list) */
.agd-spark{display:flex;align-items:flex-end;gap:2px;height:38px;margin-top:8px}
.agd-spark>div{flex:1;background:var(--agd-green);border-radius:1px;opacity:.7}
.agd-spark.yellow>div{background:var(--agd-yellow)}
.agd-spark.cyan>div{background:var(--agd-cyan)}
.agd-avatar-stack{display:flex;align-items:center;gap:8px;margin-top:8px}
.agd-avatar-stack .stack{display:flex}
.agd-avatar{width:26px;height:26px;border-radius:50%;border:2px solid var(--agd-bg-base);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;margin-left:-6px}
.agd-avatar:first-child{margin-left:0}
.agd-avatar.green{background:rgba(82, 183, 136,.3);color:var(--agd-green)}
.agd-avatar.cyan{background:rgba(17,138,178,.3);color:var(--agd-cyan)}
.agd-avatar.yellow{background:rgba(255,183,3,.3);color:var(--agd-yellow)}
/* G.9.AA -- removidas .agd-event + .agd-event-date (0 hits — eram do
   card "proximas atividades" do hub-bento G.9.X-decommissionado). */
/* G.6.A.7 -- utilitarios: half span, sparkline grande, mapa, donut */
.agd-bento-card.span-half{flex:1 1 calc(50% - 8px);min-height:220px}
.agd-spark-lg{display:flex;align-items:flex-end;gap:4px;height:80px;margin-top:10px}
.agd-spark-lg>div{flex:1;background:var(--agd-green);border-radius:3px 3px 1px 1px;opacity:.7}
.agd-map-area{background:linear-gradient(135deg,rgba(82, 183, 136,.08),rgba(82, 183, 136,.02));border-radius:8px;height:200px;display:flex;align-items:center;justify-content:center;margin-top:10px}
.agd-donut-row{display:flex;align-items:center;gap:20px;margin-top:14px;flex-wrap:wrap}
.agd-donut-info{flex:1 1 180px;display:flex;flex-direction:column;gap:8px}
.agd-donut-legend{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--agd-text-body)}
.agd-donut-legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.agd-donut-legend .val-num{margin-left:auto;color:var(--agd-text-primary);font-family:var(--font-mono,monospace);font-weight:500}
.agd-donut-sep{height:1px;background:rgba(255,255,255,.08);margin:4px 0}
/* ===========================================================
   G.9.X — bloco GridStack + widget toggle COMENTADO.
   Decommission da UI de edicao do hub Fazenda (tab Visao Geral).
   Backend em quarentena 30 dias antes do drop definitivo.
   Reaproveitamento futuro: ver git history (commit pre-G.9.X)
   ou descomentar o bloco abaixo se reativar GridStack.
   =========================================================== */
/* ORIGINAL G.6.A.8/.9 -- GridStack integration AGRODASH
.grid-stack{background:transparent;min-height:600px}
.grid-stack.agd-bento{display:block;gap:0}
.grid-stack-item{max-width:100%}
.grid-stack>.grid-stack-item>.grid-stack-item-content{inset:0;padding:0;background:transparent;border:none;overflow:hidden}
.grid-stack-item-content>.agd-bento-card{height:100%;width:100%;box-sizing:border-box;flex:initial !important;min-height:0 !important}
.grid-stack .ui-resizable-handle{opacity:0;pointer-events:none;transition:opacity .2s}
.grid-stack:not(.editing)>.grid-stack-item{cursor:default}
.grid-stack.editing>.grid-stack-item{cursor:move}
.grid-stack.editing>.grid-stack-item .agd-bento-card{outline:1px dashed rgba(82, 183, 136,.4);outline-offset:2px}
.grid-stack.editing .ui-resizable-handle{opacity:1;pointer-events:auto}
.grid-stack.editing .ui-resizable-se{width:18px;height:18px;bottom:4px;right:4px;background:var(--agd-green);border-radius:3px;opacity:.6}
.grid-stack.editing .ui-resizable-se:hover{opacity:1}
.grid-stack-placeholder>.placeholder-content{background:rgba(82, 183, 136,.1);border:2px dashed var(--agd-green);border-radius:14px;inset:0}
.agd-card-remove{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:rgba(255,107,107,.2);border:1px solid rgba(255,107,107,.4);color:var(--agd-danger);display:none;align-items:center;justify-content:center;cursor:pointer;z-index:10;transition:all .2s;font-size:12px;padding:0}
.grid-stack.editing .agd-bento-card .agd-card-remove{display:flex}
.agd-card-remove:hover{background:var(--agd-danger);color:#fff;transform:scale(1.1)}
.agd-add-card-wrapper{position:relative;display:inline-block}
.agd-add-card-dropdown{position:absolute;top:calc(100% + 6px);left:0;background:var(--agd-bg-card);border:1px solid var(--agd-border-default);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.6);padding:6px;min-width:220px;max-height:320px;overflow-y:auto;z-index:100;display:none}
.agd-add-card-dropdown.open{display:block}
.agd-add-card-item{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:13px;color:var(--agd-text-body);border-radius:6px;cursor:pointer;transition:background .15s}
.agd-add-card-item:hover{background:rgba(82, 183, 136,.1);color:var(--agd-green)}
.agd-add-card-item i{font-size:16px;opacity:.7}
.agd-add-card-empty{padding:16px;text-align:center;font-size:12px;color:var(--agd-text-muted)}
FIM ORIGINAL G.6.A.8/.9 */
/* G.6.A.10 -- Header rico 2 linhas: identidade + chips, sticky com backdrop blur */
/* G.6.A.13 -- header vira card flutuante igual aos .agd-bento-card.
   Removidos: sticky, backdrop-filter, margens negativas, border-bottom externo. */
.agd-hub-header{background:rgba(20,30,25,.45);border:1px solid rgba(255,255,255,.04);border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 0 1px rgba(17,138,178,.08);padding:16px;margin:0;position:relative;overflow:hidden;display:block}
.agd-hub-header::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--agd-green),transparent);opacity:.7}
/* G.13.0 -- .agd-hub-header::after REMOVIDO (causa raiz da "nevoa branca"
   no topo identificada no estudo G.12.4). Era linear-gradient branco
   .03 cobrindo 50% top do header (~100px de "luz vinda de cima").
   .agd-kpi::after e .agd-bento-card::after PRESERVADOS pois sao
   compartilhados entre hubs e individualmente sutis. */
.agd-header-row-1{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.06)}
.agd-header-identity{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.agd-header-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.agd-header-chips{display:flex;flex-wrap:wrap;gap:8px}
.agd-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:var(--agd-bg-panel-light);border:1px solid var(--agd-border-default);border-radius:20px;font-size:12px;transition:border-color .2s}
.agd-chip:hover{border-color:var(--agd-border-hover)}
.agd-chip>i{font-size:14px;flex-shrink:0}
.agd-chip-label{color:var(--agd-text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:10px;font-weight:500}
.agd-chip-value{color:var(--agd-text-primary);font-weight:500}
/* G.6.A.1 -- auto-fit ja adapta naturalmente; mantemos so ajustes finos por viewport */
@media(max-width: 500px){.agd-bento{gap:12px}.agd-bento-card{padding:14px}}

/* =================================================================
   G.7.U -- MODAIS, FORMS e BOTOES GLOBAIS (componentes compartilhados)
   Antes desta levaa, .agd-modal-* / .agd-form-row* viviam em CSS inline
   em cada view -- novos modais (modal-safra, modal-talhao, etc) que
   nao redefiniram acabavam sem estilo. Centralizado aqui pra eliminar.
   ================================================================= */

/* ------- MODAIS ------- */
.agd-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 99999; display: none; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; }
.agd-modal-overlay[style*="flex"] { display: flex !important; }
@keyframes agdFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes agdSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.agd-modal-overlay[style*="flex"] { animation: agdFadeIn 0.15s ease; }
/* THEME FASE 3 -- .agd-modal-* / .agd-form-* tokenizados (semanticos -> tema-aware).
   NAO usados pela zona vermelha (so form-modals/forms) -> seguro. .agd-btn-* fica
   pra Fase 4 (compartilhado c/ dashboard/lab). Dark = identico (semanticos=dark). */
.agd-modal-content { background: var(--cor-superficie-elevada); border: 1px solid var(--cor-borda); border-radius: 14px; width: 100%; max-width: 560px; max-height: 90vh; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(82,183,136,0.1); display: flex; flex-direction: column; animation: agdSlideUp 0.2s ease; }
.agd-modal-header { padding: 16px 20px; border-bottom: 1px solid var(--cor-borda); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.agd-modal-header h3 { margin: 0; font-size: 16px; font-weight: 500; color: var(--cor-texto-primario); display: flex; align-items: center; gap: 10px; }
.agd-modal-header h3 i { font-size: 20px; }
.agd-modal-close { background: transparent; border: 1px solid var(--cor-borda); color: var(--cor-texto-suave); width: 32px; height: 32px; border-radius: 8px; font-size: 20px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .15s; padding: 0; }
.agd-modal-close:hover { background: rgba(255,107,107,0.1); color: var(--cor-perigo); border-color: rgba(255,107,107,0.3); }
.agd-modal-body { padding: 18px 20px; overflow-y: auto; flex: 1; }
.agd-modal-footer { padding: 14px 20px; border-top: 1px solid var(--cor-borda); display: flex; justify-content: flex-end; gap: 10px; background: var(--cor-superficie-base); flex-shrink: 0; }

/* ------- FORM ROWS ------- */
.agd-form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.agd-form-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
/* G.9.AA -- .agd-form-row-3col removida (0 hits — todos forms usam -2col). */
.agd-form-row label, .agd-form-row-2col label, .agd-form-row-3col label { display: block; font-size: 11px; color: var(--cor-texto-suave); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; margin-bottom: 6px; }
.agd-form-row input, .agd-form-row select, .agd-form-row textarea, .agd-form-row-2col input, .agd-form-row-2col select, .agd-form-row-2col textarea, .agd-form-row-3col input, .agd-form-row-3col select, .agd-form-row-3col textarea, .agd-modal-body input[type="text"], .agd-modal-body input[type="number"], .agd-modal-body input[type="email"], .agd-modal-body input[type="tel"], .agd-modal-body input[type="date"], .agd-modal-body input[type="file"], .agd-modal-body select, .agd-modal-body textarea { width: 100%; padding: 10px 12px; background: var(--cor-superficie-base); border: 1px solid var(--cor-borda); border-radius: 8px; color: var(--cor-texto-primario); font-size: 13px; font-family: inherit; transition: border-color .15s, background .15s; box-sizing: border-box; }
.agd-form-row input:focus, .agd-form-row select:focus, .agd-form-row textarea:focus, .agd-form-row-2col input:focus, .agd-form-row-2col select:focus, .agd-form-row-2col textarea:focus, .agd-form-row-3col input:focus, .agd-form-row-3col select:focus, .agd-form-row-3col textarea:focus, .agd-modal-body input:focus, .agd-modal-body select:focus, .agd-modal-body textarea:focus { outline: none; border-color: var(--cor-interativo); background: var(--cor-superficie-base); }
/* THEME F3: ghost button (compartilhado) dentro de modal no claro -> contraste AA local (nao toca o global usado pela red zone). */
html[data-theme="light"] .agd-modal-content .agd-btn-ghost { color: var(--cor-texto-suave); border-color: var(--cor-borda); }
.agd-form-row textarea, .agd-modal-body textarea { resize: vertical; min-height: 60px; }

/* ------- VARIANTES DE BOTAO (extensoes do .agd-btn ja existente) ------- */
.agd-btn-sm { padding: 6px 12px; font-size: 12px; }
.agd-btn-sm i { font-size: 13px; }
.agd-btn-primary { background: linear-gradient(135deg, var(--agd-green, #52b788), #2d6a4f); color: #fff; box-shadow: 0 3px 10px rgba(64,145,108,0.25); }
.agd-btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(64,145,108,0.4); }
.agd-btn-secondary { background: rgba(17,138,178,0.15); color: var(--agd-cyan, #118ab2); border: 1px solid rgba(17,138,178,0.35); }
.agd-btn-secondary:hover:not(:disabled) { background: rgba(17,138,178,0.25); }
.agd-btn-warning { background: rgba(255,183,3,0.15); color: var(--agd-yellow, #ffb703); border: 1px solid rgba(255,183,3,0.35); }
.agd-btn-warning:hover:not(:disabled) { background: rgba(255,183,3,0.25); }
.agd-btn-danger { background: rgba(255,107,107,0.15); color: var(--agd-danger, #ff6b6b); border: 1px solid rgba(255,107,107,0.35); }
.agd-btn-danger:hover:not(:disabled) { background: rgba(255,107,107,0.25); }
.agd-btn-ghost { background: transparent; color: var(--agd-text-muted, #8b9c8f); border: 1px solid var(--agd-border-default, rgba(82,183,136,0.15)); }
.agd-btn-ghost:hover:not(:disabled) { color: var(--agd-text-primary, #e9ecef); background: rgba(255,255,255,0.05); }
.agd-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ------- BOTOES ICON-ONLY ------- */
.agd-btn-icon { width: 28px; height: 28px; padding: 0; border: 1px solid transparent; background: transparent; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--agd-text-muted, #8b9c8f); transition: all .15s; font-size: 14px; }
.agd-btn-icon:hover { background: rgba(255,255,255,0.05); }
.agd-btn-icon-warning:hover { color: var(--agd-yellow, #ffb703); border-color: rgba(255,183,3,0.3); }
.agd-btn-icon-danger:hover { color: var(--agd-danger, #ff6b6b); border-color: rgba(255,107,107,0.3); }

/* ------- KPI STRIP + SUB-TABS (componentes auxiliares) ------- */
.agd-kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.agd-subtabs { display: flex; gap: 4px; background: rgba(7,11,8,0.5); border: 1px solid var(--agd-border-default, rgba(82,183,136,0.15)); border-radius: 12px; padding: 4px; width: fit-content; flex-wrap: wrap; margin-bottom: 14px; }
.agd-subtab { padding: 8px 14px; border-radius: 8px; background: transparent; border: none; color: var(--agd-text-muted, #8b9c8f); font-size: 11px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all .15s; font-family: inherit; }
.agd-subtab:hover { color: var(--agd-text-primary, #e9ecef); background: rgba(82,183,136,0.05); }
.agd-subtab.active { background: rgba(82,183,136,0.15); color: var(--agd-green, #52b788); }

/* ------- RESPONSIVO MOBILE ------- */
@media (max-width: 500px) {
    .agd-modal-overlay { padding: 10px; align-items: flex-end; }
    .agd-modal-content { max-width: 100%; max-height: 95vh; border-radius: 14px 14px 0 0; }
    .agd-form-row-2col, .agd-form-row-3col { grid-template-columns: 1fr; }
}

/* G.7.Y -- smartphone (≤500px): grids reduzem mais, modal de
   atividade empilha o "novo insumo" (select sai pro topo).
   !important sobrescreve inline styles fortes de varios arquivos. */
@media (max-width: 500px) {
    .agd-kpi-strip { grid-template-columns: 1fr 1fr !important; gap: 8px; }
    #agd-novo-insumo-grid {
        grid-template-columns: 1fr 1fr auto !important;
    }
    #agd-novo-insumo-grid > select { grid-column: 1 / -1; }
}

/* G.7.Z -- spin animation propria (desacopla do FontAwesome CDN).
   Substitui fa-spin nos loaders ti ti-loader / ti ti-satellite. */
@keyframes agd-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.agd-spin {
    display: inline-block;
    animation: agd-spin 1s linear infinite;
}

/* ============================================================ */
/* G.8.B -- Card Produtor vinculado a fazenda (tab Cadastro).   */
/* Coerente com cards Fazenda/Talhao (token-based, sem deps).   */
/* ============================================================ */
.prd-card-vinculo {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 16px 18px;
    background: rgba(7,11,8,0.5);
    border: 1px solid rgba(82,183,136,0.15);
    border-radius: 14px;
    margin-bottom: 16px;
    transition: border-color 0.2s;
}
.prd-card-vinculo:hover { border-color: rgba(82,183,136,0.3); }

.prd-card-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #52b788, #118ab2);
    display: grid; place-items: center;
    color: #fff; font-weight: 600; font-size: 18px;
    position: relative;
    flex-shrink: 0;
}
.prd-card-avatar .prd-badge-arquivado {
    position: absolute; top: -4px; right: -4px;
    background: #ffb703; color: #000;
    border-radius: 50%; width: 20px; height: 20px;
    display: grid; place-items: center; font-size: 12px;
    font-weight: 700;
}

.prd-card-info { min-width: 0; }
.prd-card-nome {
    font-size: 16px; color: #e9ecef; font-weight: 500;
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.prd-card-id {
    font-size: 10px;
    color: var(--agd-text-muted);
    background: rgba(82,183,136,0.1);
    padding: 2px 8px; border-radius: 4px;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
}
.prd-card-doc {
    font-size: 12px; color: var(--agd-text-muted);
    margin-top: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prd-card-sep { margin: 0 6px; opacity: .4; }
.prd-card-kpis {
    font-size: 11px; color: var(--agd-text-muted);
    margin-top: 6px;
    background: rgba(17,138,178,0.05);
    border: 1px solid rgba(17,138,178,0.15);
    border-radius: 6px;
    padding: 4px 8px;
    display: inline-flex; align-items: center; gap: 6px;
}

.prd-card-acoes {
    display: flex; gap: 6px;
    flex-shrink: 0; flex-wrap: wrap;
}

.prd-card-empty {
    grid-column: 1 / -1;
    display: flex; flex-direction: column;
    align-items: center; gap: 8px;
    padding: 24px 20px; text-align: center;
}
.prd-card-empty-titulo {
    font-size: 14px; color: #e9ecef; font-weight: 500;
}
.prd-card-empty-sub {
    font-size: 12px; color: var(--agd-text-muted);
    margin-bottom: 8px;
    max-width: 380px;
}

@media (max-width: 500px) {
    .prd-card-vinculo {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 10px;
    }
    .prd-card-avatar { margin: 0 auto; }
    .prd-card-doc { white-space: normal; }
    .prd-card-acoes { justify-content: center; }
}

/* Item da lista no modal "Trocar produtor" */
.prd-item-resultado {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    align-items: center;
    transition: background .15s;
}
.prd-item-resultado:hover { background: rgba(82,183,136,0.08); }

/* ===========================================================
   G.9.X — AGD-BENTO-STATIC: layout fixo da Visao Geral do hub
   Fazenda. Grid 12-col, posicoes explicitas por data-card-id.
   Substitui GridStack drag-drop+persistencia (decommiss G.9.X).
   Respeita main.main-content (padding 140px top / 80px bottom
   ja reserva espaco pro header e footer fixos do layout master).
   =========================================================== */
.agd-bento-static {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(120px, auto);
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}
.agd-bento-static .agd-bento-card {
    background: var(--agd-panel, rgba(7, 11, 8, 0.5));
    border: 1px solid var(--agd-border-default, rgba(82, 183, 136, 0.15));
    border-radius: 14px;
    padding: 14px 16px;
    overflow: hidden;
    box-sizing: border-box;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Posicoes desktop (>=1001px) -- 12 colunas */
.agd-bento-static [data-card-id="safra"]      { grid-column: 1 / 5;  grid-row: 1; }
.agd-bento-static [data-card-id="alertas"]    { grid-column: 5 / 9;  grid-row: 1; }
.agd-bento-static [data-card-id="equipe"]     { grid-column: 9 / 13; grid-row: 1; }
.agd-bento-static [data-card-id="meta"]       { grid-column: 1 / 7;  grid-row: 2; }
.agd-bento-static [data-card-id="custos"]     { grid-column: 7 / 13; grid-row: 2; }
.agd-bento-static [data-card-id="mapa"]       { grid-column: 1 / 7;  grid-row: 3 / span 2; min-height: 280px; }
.agd-bento-static [data-card-id="ndvi-spark"] { grid-column: 7 / 10; grid-row: 3; }
.agd-bento-static [data-card-id="chuva"]      { grid-column: 10 / 13; grid-row: 3; }
.agd-bento-static [data-card-id="assessoria"] { grid-column: 7 / 10; grid-row: 4; }
.agd-bento-static [data-card-id="atividades"] { grid-column: 10 / 13; grid-row: 4; }

/* Tablet (<=1000px) -- 6 colunas, cards reorganizam */
@media (max-width: 1000px) {
    .agd-bento-static {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: minmax(110px, auto);
    }
    .agd-bento-static [data-card-id="safra"]      { grid-column: 1 / 7;  grid-row: auto; }
    .agd-bento-static [data-card-id="alertas"]    { grid-column: 1 / 4;  grid-row: auto; }
    .agd-bento-static [data-card-id="equipe"]     { grid-column: 4 / 7;  grid-row: auto; }
    .agd-bento-static [data-card-id="meta"]       { grid-column: 1 / 7;  grid-row: auto; }
    .agd-bento-static [data-card-id="custos"]     { grid-column: 1 / 7;  grid-row: auto; }
    .agd-bento-static [data-card-id="mapa"]       { grid-column: 1 / 7;  grid-row: auto; min-height: 240px; }
    .agd-bento-static [data-card-id="ndvi-spark"] { grid-column: 1 / 4;  grid-row: auto; }
    .agd-bento-static [data-card-id="chuva"]      { grid-column: 4 / 7;  grid-row: auto; }
    .agd-bento-static [data-card-id="assessoria"] { grid-column: 1 / 4;  grid-row: auto; }
    .agd-bento-static [data-card-id="atividades"] { grid-column: 4 / 7;  grid-row: auto; }
}

/* Mobile (<=500px) -- 1 coluna empilhada */
@media (max-width: 500px) {
    .agd-bento-static {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(100px, auto);
        gap: 8px;
    }
    .agd-bento-static [data-card-id] {
        grid-column: 1;
        grid-row: auto;
        min-height: 100px;
    }
    .agd-bento-static [data-card-id="mapa"] {
        min-height: 220px;
    }
}

/* ===========================================================
   G.9.X.1 -- FIX de especificidade reforcada para .agd-bento-static.
   Combinar .agd-bento.agd-bento-static eleva specificity de 10 -> 20,
   vencendo regras .agd-bento legadas com display:flex (mesmo se algum
   dia removerem o comentario do !important na linha 32).
   Tambem usa "> [data-card-id]" pra pegar direct children, garantindo
   que apenas filhos diretos do bento-static herdem as regras
   (nao netos como svgs de donut).
   =========================================================== */
.agd-bento.agd-bento-static {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(120px, auto);
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    /* G.9.X.1+ -- unset's de flex removidos por desnecessarios em grid
       context e potencial fonte de artifacts visuais em alguns browsers. */
}

.agd-bento.agd-bento-static > .agd-bento-card,
.agd-bento.agd-bento-static > [data-card-id] {
    background: var(--agd-panel, rgba(7, 11, 8, 0.5));
    border: 1px solid var(--agd-border-default, rgba(82, 183, 136, 0.15));
    border-radius: 14px;
    padding: 14px 16px;
    overflow: hidden;
    box-sizing: border-box;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* Reset GridStack item residual */
    position: static;
    transform: none;
    width: auto;
    height: auto;
    left: auto;
    top: auto;
    /* Reset flex-item sizing (linha 33 define flex:1 1 220px que aqui e' inerte
       mas neutralizamos pra evitar warnings em DevTools) */
    flex: initial;
}

/* Posicoes desktop (>=1001px) -- 12 colunas */
.agd-bento.agd-bento-static > [data-card-id="safra"]      { grid-column: 1 / 5;  grid-row: 1; }
.agd-bento.agd-bento-static > [data-card-id="alertas"]    { grid-column: 5 / 9;  grid-row: 1; }
.agd-bento.agd-bento-static > [data-card-id="equipe"]     { grid-column: 9 / 13; grid-row: 1; }
.agd-bento.agd-bento-static > [data-card-id="meta"]       { grid-column: 1 / 7;  grid-row: 2; }
.agd-bento.agd-bento-static > [data-card-id="custos"]     { grid-column: 7 / 13; grid-row: 2; }
.agd-bento.agd-bento-static > [data-card-id="mapa"]       { grid-column: 1 / 7;  grid-row: 3 / span 2; min-height: 280px; }
.agd-bento.agd-bento-static > [data-card-id="ndvi-spark"] { grid-column: 7 / 10; grid-row: 3; }
.agd-bento.agd-bento-static > [data-card-id="chuva"]      { grid-column: 10 / 13; grid-row: 3; }
.agd-bento.agd-bento-static > [data-card-id="assessoria"] { grid-column: 7 / 10; grid-row: 4; }
.agd-bento.agd-bento-static > [data-card-id="atividades"] { grid-column: 10 / 13; grid-row: 4; }

/* Tablet (<=1000px) -- 6 colunas */
@media (max-width: 1000px) {
    .agd-bento.agd-bento-static {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: minmax(110px, auto);
    }
    .agd-bento.agd-bento-static > [data-card-id="safra"]      { grid-column: 1 / 7;  grid-row: auto; }
    .agd-bento.agd-bento-static > [data-card-id="alertas"]    { grid-column: 1 / 4;  grid-row: auto; }
    .agd-bento.agd-bento-static > [data-card-id="equipe"]     { grid-column: 4 / 7;  grid-row: auto; }
    .agd-bento.agd-bento-static > [data-card-id="meta"]       { grid-column: 1 / 7;  grid-row: auto; }
    .agd-bento.agd-bento-static > [data-card-id="custos"]     { grid-column: 1 / 7;  grid-row: auto; }
    .agd-bento.agd-bento-static > [data-card-id="mapa"]       { grid-column: 1 / 7;  grid-row: auto; min-height: 240px; }
    .agd-bento.agd-bento-static > [data-card-id="ndvi-spark"] { grid-column: 1 / 4;  grid-row: auto; }
    .agd-bento.agd-bento-static > [data-card-id="chuva"]      { grid-column: 4 / 7;  grid-row: auto; }
    .agd-bento.agd-bento-static > [data-card-id="assessoria"] { grid-column: 1 / 4;  grid-row: auto; }
    .agd-bento.agd-bento-static > [data-card-id="atividades"] { grid-column: 4 / 7;  grid-row: auto; }
}

/* Mobile (<=500px) -- 1 coluna */
@media (max-width: 500px) {
    .agd-bento.agd-bento-static {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(100px, auto);
        gap: 8px;
    }
    .agd-bento.agd-bento-static > [data-card-id] {
        grid-column: 1;
        grid-row: auto;
        min-height: 100px;
    }
    .agd-bento.agd-bento-static > [data-card-id="mapa"] {
        min-height: 220px;
    }
}

/* ===========================================================
   G.12.0 -- Leaflet dark theming AGRODASH.
   Tooltips, popups e controles com identidade visual coerente
   com o tema escuro. Scope no container .agd-mapa-container
   (usado pelo component <x-agd.mapa-fazendas>) -- preserva
   estilo padrao em mapas legados.
   .agd-row-highlighted: feedback bidirecional lista <-> mapa.
   =========================================================== */

.agd-mapa-container .leaflet-control-zoom a,
.agd-mapa-container .leaflet-control-attribution {
    background: rgba(20, 24, 22, 0.92);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.agd-mapa-container .leaflet-control-zoom a:hover {
    background: rgba(40, 44, 42, 0.95);
    color: #fff;
}

.agd-mapa-container .leaflet-control-attribution a {
    color: var(--agd-green);
}

.agd-mapa-container .leaflet-tooltip {
    background: rgba(20, 24, 22, 0.95);
    color: #fff;
    border: 1px solid var(--agd-border-default);
    border-radius: 6px;
    box-shadow: none;
    font-size: 12px;
}

.agd-mapa-container .leaflet-tooltip-top:before {
    border-top-color: rgba(20, 24, 22, 0.95);
}

.agd-mapa-container .leaflet-tooltip-bottom:before {
    border-bottom-color: rgba(20, 24, 22, 0.95);
}

.agd-mapa-container .leaflet-popup-content-wrapper,
.agd-mapa-container .leaflet-popup-tip {
    background: rgba(20, 24, 22, 0.95);
    color: #fff;
    box-shadow: none;
    border: 1px solid var(--agd-border-default);
}

.agd-row-highlighted {
    background: rgba(82, 183, 136, 0.08) !important;
}

/* ===========================================================
   G.13.2 -- scrollbar customizada pro tema escuro AGRODASH.
   Padrao Chrome em Windows = track + thumb cinza claro, fica
   "barra branca" conspicua sobre o fundo escuro do hub
   (descoberto via Chrome controlado -- Jonas reportou como
   "nevoa branca atras do header"). Custom segue paleta verde
   sutil do design system.
   =========================================================== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--agd-bg-base, #070b08);
}
::-webkit-scrollbar-thumb {
    background: rgba(82, 183, 136, 0.25);
    border-radius: 5px;
    border: 2px solid var(--agd-bg-base, #070b08);
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(82, 183, 136, 0.45);
}
::-webkit-scrollbar-corner {
    background: var(--agd-bg-base, #070b08);
}
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(82, 183, 136, 0.3) var(--agd-bg-base, #070b08);
}

/* ============================================================
   BLOCO E (2026-06-10) -- FERRAMENTAS DE PREFERENCIA.
   E.1 DENSIDADE compacta (html[data-density=compact], padrao =
   confortavel/sem atributo): reduz paddings dos COMPONENTES-CHAVE
   (cards/tabelas/forms). Adocao plena de --agd-space-* nos
   componentes e' gradual (dividas doc.); aqui = passos de ~4px.
   AA preservado (so espacamento, nunca cor). */
html[data-density="compact"] :is(.f2-card, .mercado-secao, .agd-bento-card, .show-card, .info-card, .ass-card) { padding: var(--agd-space-3, 16px); }
html[data-density="compact"] .pro-card .agd-card-header { padding: 6px 12px; }
html[data-density="compact"] :is(.f2-tabela th, .f2-tabela td) { padding: 0.4rem 0.45rem; }
html[data-density="compact"] :is(.fzn-th, .fzn-tr) { padding: 8px 14px; }
html[data-density="compact"] .cotacao-card { padding: 0.5rem 0.65rem; }
html[data-density="compact"] :is(.agd-form-row input, .agd-form-row select, .f2-input, .f2-select) { padding: 0.45rem 0.7rem; }
html[data-density="compact"] .cfg-item { padding: 0.4rem 0.6rem; }
html[data-density="compact"] .agd-btn { padding: 6px 12px; }

/* E.2 ACCENT (cor de destaque do usuario): redefine SOMENTE
   --agd-accent(-rgb) + --cor-interativo(-hover) -- STATUS/DADO
   (--cor-sucesso/perigo/aviso, NDVI, sensores) JAMAIS mudam.
   Opcoes seguras (sem colisao com semantica de dado): cyan, teal.
   2 tons por tema (AA nos 2). Ordem: depois do bloco light ->
   [data-accent][data-theme=light] (0,2,1) vence ambos. */
html[data-accent="cyan"] {
    --agd-accent: var(--agd-cyan);
    --agd-accent-rgb: var(--agd-cyan-rgb);
    --cor-interativo: #118ab2;
    --cor-interativo-hover: #4cc9f0;
}
html[data-accent="cyan"][data-theme="light"] {
    --cor-interativo: #0e7490;
    --cor-interativo-hover: #0c5f75;
}
html[data-accent="teal"] {
    --agd-accent: #14b8a6;
    --agd-accent-rgb: 20, 184, 166;
    --cor-interativo: #14b8a6;
    --cor-interativo-hover: #2dd4bf;
}
html[data-accent="teal"][data-theme="light"] {
    --cor-interativo: #0f766e;
    --cor-interativo-hover: #115e59;
}

/* ============================================================
   F5 (2026-06-09) -- A11Y QUICK-WINS (PROMPT 2 exec).
   1) prefers-reduced-motion: kill-switch global respeitoso --
      para animacoes/transicoes decorativas (pulses, shimmers,
      slides) p/ usuarios que pedem menos movimento no SO.
      So CSS; nenhuma logica afetada (JS continua rodando).
   2) foco visivel TOKENIZADO: anel consistente nos 2 temas via
      --cor-foco (#52b788 dark / #2d6a4f light, AA). :focus-visible
      = so teclado (clique de mouse nao mostra anel). !important
      vence os outline:none locais das views (a11y > estetica). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
:focus-visible {
    outline: 2px solid var(--cor-foco, #52b788) !important;
    outline-offset: 2px;
}