/* css/casca.css - casca do app no padrao BI LABOR RURAL / Elabore: cabecalho branco, menu lateral agrupado e rodape verde.
   So usa tokens (base.css + aliases abaixo, nomes da skill lr-dashboards). Sem cor solta. */
:root{
  --green-950:var(--brand);--green-800:#09695e;--green-700:#11775d;--green-400:var(--mint);
  --green-300:#8be4d2;--green-100:var(--mint-soft);
  --metric-green:#0F6F57;--ink-strong:var(--brand-deep);
  --surface:var(--panel);--surface-soft:var(--panel2);
  --hd-h:56px;--lado-w:220px;--lado-min:68px;--ft-h:44px;--zoom-app:1
}
body.lado-min{--lado-w:var(--lado-min)}
.material-symbols-rounded{font-variation-settings:"FILL" 0,"wght" 300,"opsz" 24}

/* ===================== CABECALHO ===================== */
header.top{position:fixed;top:0;left:0;right:0;z-index:80;height:calc(var(--hd-h) + env(safe-area-inset-top,0px));background:var(--surface);color:var(--ink);
  display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line-soft);
  padding:0 20px 0 0;padding-top:env(safe-area-inset-top,0px);box-sizing:border-box}
header.top .hd-marca{flex:0 0 var(--lado-w);width:var(--lado-w);align-self:stretch;box-sizing:border-box;display:flex;align-items:center;
  justify-content:space-between;gap:8px;padding:0 10px 0 16px;background:var(--surface);
  border-right:1px solid var(--line-soft);
  transition:width .18s ease,flex-basis .18s ease}
body.lado-min header.top .hd-marca{justify-content:center;padding:0}
body.lado-min header.top .logos{display:none}
header.top .logos{display:flex;align-items:center;gap:10px;min-width:0}
header.top .logos img{height:30px;display:block;flex:0 0 auto}
.hd-lado{flex:0 0 auto;width:34px;height:34px;border:0;border-radius:7px;background:none;color:var(--ink-strong);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.hd-lado:hover{background:var(--green-100)}
.hd-lado .ic-abre,body.lado-min .hd-lado .ic-fecha{display:none}
body.lado-min .hd-lado .ic-abre{display:inline-block}

header.top h1{font-family:var(--font-d);font-weight:750;font-size:12.5px;line-height:1.15;letter-spacing:-.2px;
  color:var(--ink-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* seletores no cabecalho: padrao Elabore */
/* so a caixa da propriedade encolhe: selos de status e usuario mantem o tamanho e nunca ficam por baixo dela */
.hd-sels{display:flex;align-items:center;gap:20px;min-width:0;flex:0 1 auto}

/* grupo de selecao de propriedade e safra: label + input combobox */
.hd-sel-prop-wrap{display:flex;align-items:center;gap:10px;position:relative;min-width:0;flex:1 1 auto}
.hd-sel-safra-wrap{display:flex;align-items:center;gap:10px;position:relative;flex:0 0 auto}
.hd-sel-safra-wrap .hd-sel-combo{flex:0 0 145px;width:145px;min-width:130px;padding-left:12px;padding-right:28px}

.hd-sel-prop-label{font-family:var(--font-b);
  font-size:13px;font-weight:600;color:var(--cinza-1000);white-space:nowrap;letter-spacing:-.01em;user-select:none;
  font-feature-settings:"cv11";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* caixa do seletor no padrao Chakra UI Elabore (borda cinza quando nao selecionado) */
.hd-sel-combo{--select-trigger-height:2.5rem;--select-trigger-padding-x:0.75rem;--focus-ring-color:#014945;
  position:relative;flex:1 1 340px;width:340px;max-width:340px;min-width:150px;min-height:var(--select-trigger-height);height:40px;
  display:flex;align-items:center;box-sizing:border-box;margin:0;padding:0;
  padding-left:var(--select-trigger-padding-x);padding-right:30px;background:var(--panel);
  border:1px solid var(--cinza-190);border-radius:8px;outline:0;appearance:none;text-align:start;
  word-wrap:break-word;-webkit-tap-highlight-color:transparent;font-feature-settings:"cv11";
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;color:var(--cinza-1000);cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease}
.hd-sel-combo:hover:not(.aberto){border-color:var(--cinza-350)}
.hd-sel-combo:focus-visible,.hd-sel-combo.aberto{border-color:var(--menu-txt);box-shadow:0 0 0 1px var(--menu-txt)}

.hd-sel-safra-val{font-family:var(--font-b);
  font-size:12px;font-weight:700;color:var(--cinza-1000);letter-spacing:-.01em;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Exibicao em 2 linhas quando fechado: Fazenda em negrito e Empresario embaixo normal */
.hd-sel-display{display:flex;flex-direction:column;justify-content:center;width:100%;min-width:0;
  line-height:1.15;user-select:none;pointer-events:none}
.hd-sel-combo-nome{font-family:var(--font-b);
  font-size:10.5px;font-weight:700;color:var(--cinza-1000);text-transform:uppercase;letter-spacing:-.01em;
  line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-sel-combo-prod{font-family:var(--font-b);
  font-size:9px;font-weight:400;color:var(--azul-530);text-transform:uppercase;letter-spacing:0;
  line-height:1.2;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-sel-combo-ph{font-family:var(--font-b);
  font-size:11.5px;font-weight:400;color:var(--cinza-540);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Campo de busca exibido ao abrir / pesquisar */
.hd-sel-input{width:100%;height:100%;min-width:0;border:0;outline:0;background:transparent;
  font-family:var(--font-b);
  font-size:12px;line-height:1.25rem;font-weight:500;color:var(--cinza-1000);padding:0;margin:0;
  font-feature-settings:"cv11";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;cursor:pointer}
.hd-sel-input:focus{cursor:text}
.hd-sel-input::placeholder{color:var(--cinza-540);font-weight:400;font-size:12px;opacity:1}

.hd-sel-combo-arrow{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-size:18px;color:var(--cinza-540);pointer-events:none;
  transition:transform .2s cubic-bezier(0.4,0,0.2,1),color .15s ease}
.hd-sel-combo:hover .hd-sel-combo-arrow,.hd-sel-combo.aberto .hd-sel-combo-arrow{color:var(--menu-txt)}
.hd-sel-combo.aberto .hd-sel-combo-arrow{transform:translateY(-50%) rotate(180deg)}

/* menu suspenso (dropdown popover) */
.hd-sel-dropdown{position:absolute;top:calc(100% + 4px);left:0;width:100%;min-width:340px;max-width:440px;
  background:var(--panel);border:1px solid var(--cinza-100);border-radius:8px;
  box-shadow:0 4px 12px var(--sombra-a08),0 1px 3px var(--sombra-a04);
  max-height:300px;overflow-y:auto;overflow-x:hidden;z-index:1050;padding:4px;
  scrollbar-width:thin;scrollbar-color:var(--menu-txt) var(--cinza-040);
  animation:topMenuEntrada .15s ease-out}
.hd-sel-dropdown .hd-sel-drop-item,
.hd-sel-dropdown .hd-sel-drop-action{
  animation:dropdownItemSlideIn .18s cubic-bezier(.16,1,.3,1) backwards;
}
.hd-sel-dropdown .hd-sel-drop-item:nth-child(1){animation-delay:.02s}
.hd-sel-dropdown .hd-sel-drop-item:nth-child(2){animation-delay:.04s}
.hd-sel-dropdown .hd-sel-drop-item:nth-child(3){animation-delay:.06s}
.hd-sel-dropdown .hd-sel-drop-item:nth-child(4){animation-delay:.08s}
.hd-sel-dropdown .hd-sel-drop-item:nth-child(5){animation-delay:.10s}
.hd-sel-dropdown[hidden]{display:none}
.hd-sel-dropdown::-webkit-scrollbar{width:6px}
.hd-sel-dropdown::-webkit-scrollbar-track{background:var(--cinza-040);border-radius:3px}
.hd-sel-dropdown::-webkit-scrollbar-thumb{background:var(--menu-txt-fundo);border-radius:3px}

.hd-sel-dropdown.hd-sel-safra-dropdown{min-width:175px;max-width:230px;width:auto;left:0;right:auto}
.hd-sel-safra-item-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}
.hd-sel-safra-item-val{font-family:var(--font-b);
  font-size:12px;font-weight:600;color:inherit}
.hd-sel-safra-tag{font-size:9px;font-weight:700;padding:1px 5px;border-radius:4px;
  background:var(--cinza-040);color:var(--cinza-540);text-transform:uppercase;white-space:nowrap}
.hd-sel-safra-tag.fech{background:var(--vermelho-030);color:var(--vermelho-490)}
.hd-sel-drop-item.selected .hd-sel-safra-tag{background:var(--brilho-a22);color:var(--on-brand)}
.hd-sel-drop-divider{height:1px;background:var(--cinza-100);margin:4px 0}
.hd-sel-drop-action{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:6px;cursor:pointer;
  font-family:var(--font-b);
  font-size:11.5px;font-weight:600;color:var(--menu-txt);transition:background-color .1s ease}
.hd-sel-drop-action:hover{background-color:var(--cinza-040)}
.hd-sel-drop-action .material-symbols-rounded{font-size:16px;color:var(--menu-txt)}

.hd-sel-drop-list{display:flex;flex-direction:column;gap:2px}
.hd-sel-drop-item{padding:7px 10px;text-align:left;cursor:pointer;display:flex;flex-direction:column;
  gap:1px;border-radius:6px;border-bottom:0;transition:background-color .1s ease,color .1s ease;
  font-feature-settings:"cv11"}
.hd-sel-drop-item:hover,.hd-sel-drop-item.highlighted{background-color:var(--cinza-040)}

/* Item selecionado com fundo verde-petroleo escuro (#014945) e texto branco */
.hd-sel-drop-item.selected{background-color:var(--menu-txt-fundo);color:var(--on-brand)}
.hd-sel-drop-item.selected .hd-sel-drop-nome{color:var(--on-brand)}
.hd-sel-drop-item.selected .hd-sel-drop-prod{color:var(--petroleo-280)}

.hd-sel-drop-nome{font-family:var(--font-b);
  font-size:11px;font-weight:700;color:var(--cinza-960);text-transform:uppercase;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-sel-drop-prod{font-family:var(--font-b);
  font-size:9.5px;font-weight:400;color:var(--azul-530);text-transform:uppercase;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-sel-drop-empty{padding:14px;text-align:center;font-size:12px;color:var(--cinza-540);font-style:italic;
  font-family:var(--font-b)}
.hd-esp{flex:1 1 auto}

.hd-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:99px;
  font-size:10.5px;font-weight:700;white-space:nowrap;background:var(--okbg);color:var(--ok);border:1px solid var(--okline)}
button.hd-chip{font-family:inherit;cursor:pointer;transition:filter .15s ease}
button.hd-chip:hover{filter:brightness(.96)}
button.hd-chip:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px}
.hd-chip .fdot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.hd-chip .fdot.off{background:var(--warn)}
.hd-chip .fdot.pend{background:var(--warn)}
.hd-chip--pend{background:var(--green-100);color:var(--green-800);border-color:var(--green-400)}
.hd-chip--pend .material-symbols-rounded{font-size:16px}
.hd-chip--pend.pend{background:var(--warnbg);color:var(--warn);border-color:var(--warnline)}
.hd-papel-oculto{display:none}

.hd-user{position:relative;flex:0 0 auto}
.hd-user-b{display:flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;
  font-family:var(--font-b);color:var(--ink);padding:4px 6px;border-radius:9px}
.hd-user-b:hover{background:var(--green-100)}
.hd-avatar{width:32px;height:32px;border-radius:50%;background:var(--metric-green);color:var(--on-brand);
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.hd-user-t{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;min-width:0;max-width:200px}
.hd-user-t b{font-size:10.5px;font-weight:800;text-transform:uppercase;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hd-user-t small{font-size:9.5px;color:var(--muted)}
.hd-user-b .material-symbols-rounded{font-size:18px;color:var(--green-800)}
.hd-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:90;min-width:240px;background:var(--panel);
  border:1px solid var(--line-soft);border-radius:var(--esp-3, 12px);box-shadow:0 12px 32px var(--petroleo-850-a18);padding:6px;
  animation:topMenuEntrada var(--dur-rapida, 0.15s) var(--ease-elabore)}
.hd-menu[hidden]{display:none}
.hd-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  font-family:var(--font-b);font-size:12px;font-weight:600;color:var(--ink);padding:9px 12px;border-radius:var(--esp-2, 8px);
  transition:background-color var(--dur-rapida, 0.15s) var(--ease-elabore),color var(--dur-rapida, 0.15s) var(--ease-elabore)}
.hd-menu button:hover{background:var(--green-100);color:var(--green-800)}
.hd-menu button svg{flex:0 0 auto;color:var(--muted);transition:color var(--dur-rapida, 0.15s)}
.hd-menu button:hover svg{color:var(--green-800)}
.hd-menu button.hdm-sair:hover{background:var(--vermelho-030);color:var(--vermelho-490)}
.hd-menu button.hdm-sair:hover svg{color:var(--vermelho-490)}

/* ===================== MENU ANCORADO NO TOPO (REVITALIZADO) ===================== */
.hd-menu-wrap{position:relative;display:none;align-items:center}
header.top .fmenu,
.hd-menu-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;box-sizing:border-box;
  background:transparent;color:var(--ink);
  border:1px solid var(--line-soft);border-radius:var(--esp-2, 8px);
  cursor:pointer;
  transition:background-color var(--dur-rapida, 0.15s) var(--ease-elabore),
             color var(--dur-rapida, 0.15s) var(--ease-elabore),
             border-color var(--dur-rapida, 0.15s) var(--ease-elabore),
             transform var(--dur-instant, 80ms) var(--ease-tatil);
}
.hd-menu-btn:hover{
  background:var(--cinza-040);color:var(--brand);border-color:var(--cinza-190);
}
.hd-menu-btn:active{
  transform:scale(0.95);
}
.hd-menu-btn.ativo,
.hd-menu-btn[aria-expanded="true"]{
  background:var(--green-100);color:var(--green-800);border-color:var(--green-400);
}
.hd-menu-btn .ic-menu{display:block;flex:0 0 auto}

.hd-menu-backdrop{
  position:fixed;inset:0;z-index:1040;background:var(--petroleo-920-a28);
  backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);
  animation:fadeInBackdrop var(--dur-rapida, 0.15s) var(--ease-elabore);
}
.hd-menu-backdrop[hidden]{display:none}
@keyframes fadeInBackdrop{from{opacity:0}to{opacity:1}}

.hd-menu-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;
  width:300px;max-width:calc(100vw - 24px);
  max-height:calc(100dvh - var(--hd-h) - var(--bnav-h, 3.5rem) - env(safe-area-inset-bottom, 0rem) - 1.25rem);overflow-y:auto;overflow-x:hidden;
  background:var(--panel);border:1px solid var(--line-soft);
  border-radius:var(--esp-3, 12px);
  box-shadow:0 12px 36px var(--petroleo-850-a18), 0 2px 8px var(--sombra-a08);
  z-index:1050;
  animation:topMenuEntrada .15s ease-out;
  scrollbar-width:thin;
}
.hd-menu-dropdown[hidden]{display:none}
.hd-menu-dropdown.fechando{
  animation:topMenuSaida 90ms ease-out forwards;
}

/* O dropdown container fica fixo na posição; apenas os itens internos se movem */
@keyframes topMenuEntrada{
  from{opacity:0}
  to{opacity:1}
}
@keyframes topMenuSaida{
  from{opacity:1}
  to{opacity:0}
}

@keyframes dropdownItemSlideIn{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}

.hd-menu-dropdown:not(.fechando) .hdm-header{
  animation:dropdownItemSlideIn .18s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:.02s;
}
.hd-menu-dropdown:not(.fechando) .hdm-status-box{
  animation:dropdownItemSlideIn .18s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:.04s;
}
.hd-menu-dropdown:not(.fechando) .hdm-contexto{
  animation:dropdownItemSlideIn .18s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:.06s;
}
.hd-menu-dropdown:not(.fechando) .hdm-item:nth-child(1){
  animation:dropdownItemSlideIn .18s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:.08s;
}
.hd-menu-dropdown:not(.fechando) .hdm-item:nth-child(2){
  animation:dropdownItemSlideIn .18s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:.10s;
}
.hd-menu-dropdown:not(.fechando) .hdm-item:nth-child(3){
  animation:dropdownItemSlideIn .18s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:.12s;
}
.hd-menu-dropdown:not(.fechando) .hdm-item:nth-child(4){
  animation:dropdownItemSlideIn .18s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:.14s;
}
.hd-menu-dropdown:not(.fechando) .hdm-item:nth-child(5){
  animation:dropdownItemSlideIn .18s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:.16s;
}
.hd-menu-dropdown:not(.fechando) .hdm-footer{
  animation:dropdownItemSlideIn .18s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:.18s;
}

/* 1. Header do Usuário no dropdown */
.hdm-header{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;background:var(--cinza-020);
  border-bottom:1px solid var(--line-soft);
}
.hdm-avatar{
  width:40px;height:40px;border-radius:50%;
  background:var(--metric-green);color:var(--on-brand);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-b);font-size:13px;font-weight:700;
  flex:0 0 auto;overflow:hidden;
}
.hdm-avatar img{width:100%;height:100%;object-fit:cover}
.hdm-user-info{
  display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto;
}
.hdm-nome{
  font-family:var(--font-b);font-size:13px;font-weight:750;
  color:var(--ink-strong);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hdm-papel-tag{
  align-self:flex-start;font-family:var(--font-b);font-size:10px;font-weight:700;
  padding:2px 8px;border-radius:99px;background:var(--green-100);color:var(--green-800);
  border:1px solid var(--green-300);text-transform:uppercase;letter-spacing:0.02em;line-height:1.2;
}

/* 2. Status Box */
.hdm-status-box{
  padding:10px 16px;display:flex;flex-direction:column;gap:8px;
  border-bottom:1px solid var(--line-soft);background:var(--panel);
}
.hdm-status-row{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.hdm-status-indicador{
  display:flex;align-items:center;gap:7px;
  font-family:var(--font-b);font-size:11.5px;color:var(--ink);font-weight:600;
}
.hdm-status-indicador .fdot{
  width:7px;height:7px;border-radius:50%;background:var(--ok);flex:0 0 auto;
}
.hdm-status-indicador .fdot.off{background:var(--warn)}
.hdm-status-indicador .fdot.pend{background:var(--warn)}
.hdm-status-ic{
  font-size:16px;color:var(--ok);flex:0 0 auto;
}
.hdm-btn-acao-status{
  border:1px solid var(--line);border-radius:6px;
  background:var(--panel);color:var(--brand);
  font-family:var(--font-b);font-size:10.5px;font-weight:700;
  padding:3px 8px;cursor:pointer;
  transition:all var(--dur-rapida, 0.15s) var(--ease-elabore);
}
.hdm-btn-acao-status:hover{
  background:var(--green-100);color:var(--green-800);border-color:var(--green-400);
}

/* 3. Contexto Ativo (Propriedade & Safra) */
.hdm-contexto-box{
  padding:8px 12px;display:flex;flex-direction:column;gap:5px;
  border-bottom:1px solid var(--line-soft);background:var(--cinza-020);
}
.hdm-contexto-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:7px 10px;border-radius:8px;
  border:1px solid transparent;background:var(--panel);
  cursor:pointer;text-align:left;box-sizing:border-box;
  transition:all var(--dur-rapida, 0.15s) var(--ease-elabore);
}
.hdm-contexto-item:hover{
  border-color:var(--green-400);background:var(--green-100);
}
.hdm-ctx-ic{
  width:18px;height:18px;color:var(--brand);flex:0 0 auto;display:block;
}
.hdm-ctx-info{
  display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto;
}
.hdm-ctx-rot{
  font-family:var(--font-b);font-size:9.5px;font-weight:600;
  color:var(--muted);text-transform:uppercase;letter-spacing:0.03em;
}
.hdm-ctx-val{
  font-family:var(--font-b);font-size:11.5px;font-weight:700;
  color:var(--ink-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hdm-ctx-arrow{
  width:16px;height:16px;color:var(--muted);flex:0 0 auto;display:block;
  transition:transform var(--dur-rapida, 0.15s) var(--ease-elabore),color var(--dur-rapida, 0.15s) var(--ease-elabore);
}
.hdm-contexto-item:hover .hdm-ctx-arrow{
  color:var(--green-800);transform:translateX(2px);
}

/* 4. Ações Principais */
.hdm-acoes{
  padding:6px;display:flex;flex-direction:column;gap:2px;
}
.hdm-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 12px;border-radius:var(--esp-2, 8px);
  border:0;background:none;color:var(--ink);
  font-family:var(--font-b);font-size:12px;font-weight:600;
  cursor:pointer;text-align:left;
  transition:background-color var(--dur-rapida, 0.15s) var(--ease-elabore),
             color var(--dur-rapida, 0.15s) var(--ease-elabore);
}
.hdm-item:hover{
  background:var(--green-100);color:var(--green-800);
}
.hdm-item-ic{
  flex:0 0 auto;color:var(--muted);
  transition:color var(--dur-rapida, 0.15s);
}
.hdm-item:hover .hdm-item-ic{
  color:var(--green-800);
}
.hdm-item--sair:hover{
  background:var(--vermelho-030);color:var(--vermelho-490);
}
.hdm-item--sair:hover .hdm-item-ic{
  color:var(--vermelho-490);
}

/* 5. Rodapé */
.hdm-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 16px 10px;border-top:1px solid var(--line-soft);
  font-family:var(--font-b);font-size:10px;font-weight:600;
  color:var(--muted);background:var(--panel);
}

/* ===================== MENU LATERAL ===================== */
.shell{min-height:calc(100vh / var(--zoom-app) - var(--hd-h) - var(--ft-h));display:grid;grid-template-columns:var(--lado-w) minmax(0,1fr);align-items:start;
  max-width:none;margin:0;transition:grid-template-columns .18s ease}
.conteudo{min-width:0;background:var(--surface);grid-column:2;align-self:stretch}
body{padding-top:calc(var(--hd-h) + env(safe-area-inset-top,0px))}
.sidenav{position:fixed;left:0;top:calc(var(--hd-h) + env(safe-area-inset-top,0px));width:var(--lado-w);z-index:70;box-sizing:border-box;
  height:calc(100vh / var(--zoom-app) - var(--hd-h) - var(--ft-h) - env(safe-area-inset-top,0px));overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;gap:2px;padding:14px 10px 12px;background:var(--surface);
  border-right:1px solid var(--line-soft);
  scrollbar-width:thin;scrollbar-color:var(--green-300) transparent}
.sidenav .gchip,.sidenav .sn-tit{display:flex;align-items:center;gap:12px;width:100%;min-height:36px;
  padding:7px 12px;border:0;border-radius:9px;background:none;color:var(--menu-txt);cursor:pointer;
  font-family:var(--font-b);font-size:11.2px;font-weight:400;letter-spacing:0;text-align:left;line-height:1.25}
.sidenav .gchip:hover,.sidenav .sn-tit:hover{background:var(--green-100)}
.sidenav .gchip.sel{background:var(--green-100);color:var(--menu-txt);font-weight:600;border:0}
.sidenav .material-symbols-rounded{font-size:17px;color:var(--menu-txt);flex:0 0 auto}
.sidenav .ic-svg,.folha-b .ic-svg{display:block;width:17px;height:17px;color:var(--menu-txt);flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sidenav .ic-svg.ic-cheio,.folha-b .ic-svg.ic-cheio{fill:currentColor;stroke:none}
.folha-b .gchip.sel .ic-svg{color:var(--on-brand)}
.sidenav .sn-nome,.sidenav .gt{flex:1 1 auto;min-width:0}
.sidenav .sn-tit .sn-nome{font-weight:400}
.sidenav .sn-tit .material-symbols-rounded:last-child{font-size:16px;color:var(--menu-txt);transition:transform .16s ease}
.sn-grupo.aberto>.sn-tit .material-symbols-rounded:last-child{transform:rotate(180deg)}
.sn-grupo.aberto>.sn-tit{color:var(--menu-txt)}
.sn-itens{display:none;flex-direction:column;gap:1px;padding:2px 0 6px 34px}
.sn-grupo.aberto>.sn-itens{display:flex}
/* subitens (padrão Elabore): texto preto, sem fundo no hover nem no selecionado; hover e selecionado ficam em negrito */
.sn-itens .gchip{min-height:30px;padding:5px 10px;font-weight:400;font-size:11.2px;color:var(--cinza-1000)}
.sidenav .sn-itens .gchip:hover,.sidenav .sn-itens .gchip.sel{background:none;color:var(--cinza-1000);font-weight:700}
/* subitens sem ícone na barra lateral; o ícone fica no HTML porque a barra de baixo do celular o copia (mobile.js) */
.sidenav .sn-itens .gchip .ic-svg{display:none}
.sn-itens .gchip b{font-family:var(--font-d);font-weight:700;font-size:9.5px;color:var(--green-700);
  opacity:.8;flex:0 0 auto;min-width:16px}
.sn-itens .gchip.sel{font-weight:700}
.sn-esp{flex:1 1 auto;min-height:12px}
.sidenav .sn-sync{margin-top:10px;margin-bottom:6px;min-height:52px;padding:8px 12px;border:1px solid var(--line);border-radius:16px;
  background:var(--surface);box-shadow:var(--shadow);font-weight:750;color:var(--ink-strong)}
.sidenav .sn-sync.sel{border-color:var(--green-400)}
.sn-sync-i{width:34px;height:34px;border-radius:50%;background:var(--green-100);display:inline-flex;
  align-items:center;justify-content:center;flex:0 0 auto}
.sn-divisor{height:1px;background:var(--line-soft,var(--azul-090));margin:8px 4px;flex:0 0 auto}
.sn-rodape-versao{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 4px 2px;margin-top:auto}
.sn-novidades-btn{display:inline-flex;align-items:center;gap:4px;background:var(--panel2);color:var(--brand-2);border:1px solid var(--line-soft);
  border-radius:6px;font-family:var(--font-b);font-size:10px;font-weight:700;letter-spacing:.3px;padding:3px 7px;cursor:pointer;white-space:nowrap;
  transition:all var(--dur-rapida) var(--ease-elabore)}
.sn-novidades-btn:hover{background:var(--green-100);border-color:var(--metric-green)}
.sn-novidades-btn .ic-svg{width:12px;height:12px;flex:0 0 auto}
.sn-versao{font-size:9.5px;color:var(--muted);text-align:right;padding:4px 2px;cursor:pointer}
.sn-versao:hover{color:var(--ink-strong);text-decoration:underline}

/* menu recolhido: so icones */
body.lado-min .sidenav{padding:14px 8px 12px}
body.lado-min .sidenav .gt,body.lado-min .sidenav .sn-nome,body.lado-min .sn-versao,body.lado-min .sn-novidades-btn span,
body.lado-min .sidenav .sn-tit .material-symbols-rounded:last-child,body.lado-min .sn-itens,body.lado-min .sn-divisor{display:none!important}
body.lado-min .sidenav .gchip,body.lado-min .sidenav .sn-tit{justify-content:center;padding:8px 0}
body.lado-min .sn-novidades-btn{padding:6px;width:100%;justify-content:center}
body.lado-min .sidenav .sn-sync{border:0;box-shadow:none;min-height:40px;padding:4px 0}
body.lado-min .sn-sync-i{background:none}

/* ===================== RODAPE ===================== */
footer.ft{display:flex;align-items:center;justify-content:space-between;gap:14px;height:var(--ft-h);margin:0;
  padding:0 20px;background:var(--brand-fundo);color:var(--on-brand);border:0;font-size:11px;font-weight:600}
footer.ft img{height:26px;display:block}
footer.ft .ft-c{white-space:nowrap}
/* rodape sempre fixo na base da tela (desktop/tablet); o corpo reserva o espaco dele */
@media (min-width:861px){
  footer.ft{position:fixed;left:0;right:0;bottom:0;z-index:60}
  body{padding-bottom:var(--ft-h)}
}

/* ===================== TABLET (menu vira gaveta) ===================== */
.lado-fundo{display:none}
@media (min-width:861px) and (max-width:1100px){
  :root{--lado-w:240px}
  body.lado-min{--lado-w:240px}
  .shell{grid-template-columns:minmax(0,1fr)}
  .conteudo{grid-column:1}
  .sidenav{position:fixed;left:0;top:calc(var(--hd-h) + env(safe-area-inset-top,0px));z-index:75;width:240px;
    transform:translateX(-100%);transition:transform .18s ease;box-shadow:none}
  body.lado-aberto .sidenav{transform:none;box-shadow:0 10px 28px var(--petroleo-850-a18)}
  body.lado-aberto .lado-fundo{display:block;position:fixed;inset:0;z-index:70;background:var(--petroleo-920-a28)}
  .hd-user-t{display:none}
}
/* abaixo de 1500px o cabecalho nao cabe inteiro: sai o rotulo da propriedade (a caixa ja diz
   "Selecione ou digite para buscar"; o leitor de tela usa o aria-label) */
@media (min-width:861px) and (max-width:1500px){
  #fxPropWrap .hd-sel-prop-label{display:none}
}
@media (min-width:861px) and (max-width:1250px){
  .hd-sels{gap:12px}
  .hd-sel-combo{min-width:120px}
  .hd-sel-safra-wrap .hd-sel-combo{flex-basis:130px;width:130px;min-width:115px}
  .hd-user-t{display:none}
  .hd-sel-dropdown{min-width:240px}
  .hd-sel-dropdown.hd-sel-safra-dropdown{min-width:160px}
  .hd-sel{min-width:90px}
  .hd-chip--pend{display:none}
}

/* ===================== CELULAR ===================== */
@media (max-width:860px){
  header.top{padding:0 12px;gap:10px}
  header.top .hd-marca{flex:0 0 auto;width:auto;padding:0 0 0 12px;border-right:0}
  .hd-lado,.hd-sels,.hd-chip,.hd-user{display:none}
  header.top .hd-esp{display:block}
  .hd-menu-wrap{display:inline-flex;flex:0 0 auto}
  header.top .fmenu{display:inline-flex;flex:0 0 auto}
  .shell{grid-template-columns:minmax(0,1fr);min-height:calc(100vh - var(--hd-h) - var(--ft-h));min-height:calc(100dvh - var(--hd-h) - var(--ft-h))}
  .conteudo{grid-column:1}
  .sidenav{display:none}
  /* rodapé no fluxo com a folga da barra de baixo: --ft-h acompanha a altura real,
     com align-items: flex-start para não cortar o logo/texto atrás da barra inferior */
  :root{--ft-h:calc(112px + env(safe-area-inset-bottom, 0px))}
  footer.ft{height:var(--ft-h);box-sizing:border-box;display:flex;align-items:flex-start;padding:14px 18px calc(76px + env(safe-area-inset-bottom, 0px))}
  footer.ft img{height:22px}
}

@media print{
  header.top,.sidenav,footer.ft,.lado-fundo{display:none!important}
}

/* ===================== LOGIN (portao) ===================== */
/* esquerda: marca sobre fundo verde com linhas diagonais; direita: cartao branco, como no Elabore */
#portao{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:space-around;gap:32px;
  padding:24px 15vw 24px 0;padding-top:calc(16px + max(env(safe-area-inset-top,0px),22px));
  padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));overflow:auto;
  background:var(--brand-fundo) url("../img/wallpaper-1.jpg") center/cover no-repeat}
/* foto da fazenda com camada verde-petroleo por cima, como no BI */
#portao::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,var(--petroleo-850-a78) 0%,var(--petroleo-850-a72) 100%)}
#portao>*{position:relative;z-index:1}
/* marca: metade esquerda da tela, centralizada (icone, titulo, frase) */
#portao .pmarca{flex:0 0 50vw;display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--on-brand);
  padding:0 24px clamp(0px,1.15vw,22px);margin-right:auto}
#portao .pm-ic{margin-bottom:clamp(14px,2.45vw,47px);filter:drop-shadow(0 4px 18px var(--sombra-a30))}
#portao .pm-ic img{width:clamp(96px,8.6vw,170px);height:auto;display:block}
#portao .pm-tit{font-family:var(--font-d);font-weight:800;font-size:clamp(36px,3.75vw,72px);line-height:1.05;letter-spacing:-1px;
  white-space:nowrap}
#portao .pm-sub{font-size:clamp(16px,1.6vw,30px);margin-top:clamp(6px,1.1vw,21px);font-weight:400}
#portao .pcx{flex:0 0 auto;width:100%;max-width:387px;background:var(--surface);border-radius:4px;
  box-shadow:0 18px 60px var(--sombra-a35);padding:28px 25px 24px}
#portao .plogo{display:none;justify-content:center;margin-bottom:16px}
#portao .plogo img{height:54px;display:block}
#portao h2{font-family:var(--font-d);font-weight:800;font-size:30px;letter-spacing:-.4px;color:var(--ink-strong);margin-bottom:22px}
#portao .psub{font-size:12px;color:var(--muted);margin:-12px 0 18px;line-height:1.5}
#portao .psub:empty{display:none}
#portao label{display:block;font-size:11px;font-weight:500;color:var(--ink);margin:0 0 4px}
#portao input{width:100%;font-family:var(--font-b);font-size:11.2px;color:var(--cinza-1000);font-weight:500;
  height:32px;padding:0 10px;border:1px solid var(--line);border-radius:3px;background:var(--surface);margin-bottom:11px}
#portao input:focus{outline:0;border-color:var(--metric-green);box-shadow:0 0 0 3px var(--petroleo-750-a14)}
#portao .psenha{position:relative;margin-bottom:11px}
#portao .psenha input{margin-bottom:0;padding-right:38px}
#portao .pver{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:28px;height:28px;padding:0;background:none;border:0;
  border-radius:4px;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center}
#portao .pver svg{display:block}
#portao .pver .olho-f{display:none}
#portao .pver.mostrando .olho-a{display:none}
#portao .pver.mostrando .olho-f{display:block}
#portao .pver:hover{background:var(--green-100)}
#portao .pver:focus-visible{outline:2px solid var(--metric-green);outline-offset:1px}
#portao .pesq{text-align:left;margin:2px 0 16px}
#portao .btn{width:100%;justify-content:center;margin-bottom:9px;text-transform:uppercase;letter-spacing:1px;
  font-size:12px;font-weight:800;background:var(--brand-fundo)}
#portao .btn:hover{background:var(--brand-deep-fundo)}
#portao .btn.ghost{background:var(--surface);color:var(--green-800);border:1px solid var(--green-400)}
#portao .btn.ghost:hover{background:var(--green-100)}
#portao .btn.big{padding:12px 24px}
/* ENTRAR compacto e centralizado, como no BI */
#portao #ptEntrar,#portao #ptGravarNova{width:auto;min-width:130px;margin:4px auto 6px;display:flex}
#portao .btn.ghost{font-size:11px;font-weight:700}
#portao .pdiv{display:flex;align-items:center;gap:10px;margin:14px 0 12px;color:var(--muted);font-size:10.5px;
  letter-spacing:.5px;text-transform:uppercase}
#portao .pdiv::before,#portao .pdiv::after{content:"";flex:1;height:1px;background:var(--line)}
#portao .pmsg{margin-top:12px}
#portao .pft{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:11px;color:var(--muted);line-height:1.6}
#portao .plink{background:none;border:0;color:var(--green-800);font-family:var(--font-b);font-size:11.5px;
  font-weight:700;cursor:pointer;text-decoration:underline;padding:6px 0;display:inline-block;min-height:36px;box-sizing:border-box}
/* durante a autenticação: botão apagado e sem clique (ENTRANDO…), como no BI */
#portao .btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
#portao.ocupado .pcx input,#portao.ocupado .pcx .btn,#portao.ocupado .pcx .plink,#portao.ocupado .pver{pointer-events:none}
#portao.ocupado .pcx .btn.ghost,#portao.ocupado .pcx .plink{opacity:.6}
#portao .prod{position:absolute;right:clamp(16px,1.6vw,30px);bottom:clamp(14px,3.4vh,40px);color:var(--on-brand);
  font-size:clamp(12px,1.05vw,18px);font-weight:500}
#portao .pajuda{position:absolute;top:clamp(14px,3.4vh,40px);right:clamp(16px,1.6vw,30px);display:flex;align-items:center;gap:8px;
  background:none;border:0;color:var(--on-brand);font-family:var(--font-b);font-weight:700;font-size:clamp(14px,1.2vw,20px);cursor:pointer;
  padding:4px 6px;border-radius:6px}
#portao .pajuda:hover{background:var(--brilho-a14)}
#portao .pajuda:focus-visible{outline:2px solid var(--panel);outline-offset:2px}
@media(max-width:900px){
  #portao{justify-content:center;padding:1.5rem 0.875rem}
  #portao .pmarca{display:none}
  #portao .plogo{display:flex}
  #portao .prod{left:0;right:0;text-align:center}
  #portao input{font-size:1rem;height:2.625rem;padding:0 0.75rem}
  #portao .psenha input{padding-right:42px}
  #portao .pver{width:36px;height:36px;right:4px}
}

/* portao nao mostra cabecalho/rodape: sem reserva de espaco */
body.trancado{padding-top:0;padding-bottom:0}