/* E-Farm v0.5 - acabamento visual: tipografia, menu em grupos que abrem e fecham, login, trilha e animacoes. */
:root { --raio: 14px; --sombra: 0 1px 2px rgba(16, 32, 52, .04), 0 8px 24px rgba(16, 32, 52, .06) }
body { background: radial-gradient(1200px 520px at 88% -12%, rgba(60, 207, 134, .08), transparent 60%), radial-gradient(900px 520px at 18% -6%, rgba(31, 95, 191, .07), transparent 60%), #f3f5f8; background-attachment: fixed }
h1, h2, .kpi .val, .marca-efarm b, .cx-login h1 { font-family: Manrope, Inter, "Segoe UI", sans-serif }
h1 { font-size: 26px; font-weight: 800; letter-spacing: -.03em } h2 { font-size: 15.5px; letter-spacing: -.012em }
.cab-pagina p { font-size: 14px }

/* ---------- menu ---------- */
.nav[hidden], .grupo[hidden], .nav.oculto { display: none !important }
.lateral > * { flex-shrink: 0 } /* sem isso os itens encolhem quando o menu passa da altura da tela */
.lateral { width: 266px; flex: 0 0 266px; padding: 18px 12px 14px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent }
.lateral::-webkit-scrollbar { width: 6px } .lateral::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 3px }
.marca-efarm { padding: 4px 8px 18px; margin-bottom: 10px }
.marca-efarm img { width: 44px; height: 44px; flex-basis: 44px }
.marca-efarm b { font-size: 22px } .marca-efarm span { font-size: 12px; margin-top: 4px }
.grupo { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 2px; padding: 10px 10px; border-radius: 9px; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: #7f95b2; cursor: pointer; user-select: none; transition: color .15s, background .15s }
.grupo:hover { color: #e2ebf7; background: rgba(255, 255, 255, .045) }
.grupo::after { content: ""; width: 6px; height: 6px; margin-right: 5px; border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .18s; opacity: .85 }
.grupo.fechado::after { transform: rotate(-45deg) }
.nav { height: 38px; padding: 0 12px; gap: 12px; margin: 1px 0; font-size: 13.5px; font-weight: 500; letter-spacing: 0; line-height: 1; color: #c7d3e4; border-radius: 10px }
.nav svg { width: 18px; height: 18px; flex: 0 0 18px; stroke-width: 1.8 }
.nav.ativo { background: linear-gradient(90deg, rgba(60, 207, 134, .22), rgba(31, 95, 191, .16)); box-shadow: inset 0 0 0 1px rgba(111, 227, 168, .2) }
.nav.ativo::before { top: 9px; bottom: 9px }
.rodape-lateral { padding-top: 14px; margin-top: 14px }

/* ---------- topo ---------- */
.barra-topo { padding-top: 12px; padding-bottom: 12px; gap: 14px }
.trilha { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--fraco); white-space: nowrap } .trilha b { color: var(--texto); font-weight: 600 } .trilha i { font-style: normal; opacity: .5 }
.chip-usuario { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--linha); border-radius: 999px; padding: 4px 5px 4px 12px; font-size: 12.5px }
.chip-usuario button { border: 0; background: var(--linha2); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 11.5px; cursor: pointer; color: var(--suave) } .chip-usuario button:hover { background: var(--vermelho-claro); color: var(--vermelho) }

/* ---------- componentes ---------- */
.pagina.ativa { animation: entra .28s ease } @keyframes entra { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.cartao { border-color: #e6ebf2 }
.kpi { transition: transform .15s, box-shadow .15s; padding: 14px 16px 14px 18px }
.kpi:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(16, 32, 52, .05), 0 14px 30px rgba(16, 32, 52, .1) }
.kpi::before { width: 4px; top: 12px; bottom: 12px; border-radius: 0 4px 4px 0 }
.kpi .val { font-size: 25px }
.botao { transition: background .15s, box-shadow .15s, transform .05s } .botao:active { transform: translateY(1px) }
.botao.prim { background: linear-gradient(180deg, #2a70d8, #1f5fbf); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 4px 12px rgba(31, 95, 191, .26) }
.botao.prim:hover { background: linear-gradient(180deg, #2466c9, #184f9f) }
.tabela th { background: #f7f9fc } .mapa { border-radius: 12px }
.leaflet-tooltip { border: 0; border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); font-size: 12px; padding: 6px 9px }
.rotulo-talhao { box-shadow: none; padding: 2px 6px }
.aba { padding: 10px 15px; font-size: 13.5px }

/* ---------- login ---------- */
.tela-login { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; background: radial-gradient(900px 600px at 18% 8%, rgba(60, 207, 134, .28), transparent 60%), radial-gradient(900px 600px at 92% 92%, rgba(31, 95, 191, .4), transparent 60%), #0b1727 }
.cx-login { width: min(390px, 92vw); background: rgba(255, 255, 255, .97); border-radius: 22px; padding: 36px 30px 24px; display: grid; gap: 12px; text-align: center; box-shadow: 0 30px 80px rgba(0, 0, 0, .45) }
.cx-login img { width: 66px; height: 66px; margin: 0 auto 2px; border-radius: 19px; box-shadow: 0 12px 28px rgba(31, 163, 122, .38) }
.cx-login h1 { font-size: 27px } .cx-login p { margin: -8px 0 8px; color: var(--suave) }
.cx-login input { padding: 11px 13px; border-radius: 10px } .cx-login .botao { padding: 11px; font-size: 15px; border-radius: 10px }
#loginErro { color: var(--vermelho); font-size: 13px; min-height: 18px } .cx-login small { color: var(--fraco); font-size: 11px }
@media (max-width: 860px) { .lateral { width: auto; flex: none } .grupo { display: none } .trilha { display: none } }