button{color:inherit}
/* ============================================================
   glass.css — visual "liquid glass" (inspirado no iOS 26) para a
   Central Team Carol Macedo. Carregado depois do CSS da página.
   Princípios (HIG da Apple / skill Claude Liquid Glass):
   - vidro na camada de navegação e controles, flutuando sobre o conteúdo;
   - conteúdo em superfícies foscas e legíveis;
   - cantos concêntricos; cor só com significado (marrom = ação principal);
   - sem transparência para quem pede "Reduzir transparência".
   Fonte: a do sistema (SF Pro no iPhone e no Mac).
   ============================================================ */
:root{
  --cream:#FAFAF8;
  --g-fill: rgba(255,255,255,.72);
  --g-fill-strong: rgba(255,255,255,.74);
  --g-edge: rgba(255,255,255,.72);
  --g-line: rgba(104,71,53,.10);
  --g-shadow: 0 12px 34px rgba(48,34,27,.10), 0 2px 6px rgba(48,34,27,.05);
  --g-hi: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.25);
  --g-blur: saturate(180%) blur(22px);
  --g-blur-soft: saturate(160%) blur(12px);
  --g-brown: #5B402E;
  /* SF Pro no iPhone/Mac, Segoe no Windows, Roboto no Android */
  --f-sys-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --f-sys-text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* fundo com cor para o vidro ter o que refratar */
html{background:#FAFAF8!important}
body{background:transparent!important}
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(135deg,#FFFFFF 0%,#FAFAF8 55%,#F5F6F7 100%);
}

/* ---------- barra superior: vidro flutuante ---------- */
header.top{
  position:sticky!important; top:10px; z-index:60;
  margin:10px max(12px, calc((100vw - 1304px)/2)) 0!important;
  padding:9px 12px 9px 18px!important; border-radius:24px;
  background:var(--g-fill)!important; color:var(--ink)!important;
  -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge)!important; box-shadow:var(--g-shadow), var(--g-hi)!important;
}
.brand{display:flex; align-items:center; gap:12px}
.brandlogo{height:42px; width:auto; display:block}
.brand .area{font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--g-brown);
  padding:6px 11px; border-radius:999px; background:rgba(255,255,255,.6); border:1px solid var(--g-edge); box-shadow:var(--g-hi)}
header.top .linkbtn{color:var(--g-brown)!important; text-decoration:none!important; padding:9px 12px!important; border-radius:999px; font-weight:500}
header.top .linkbtn:hover{background:rgba(255,255,255,.6)}
/* botão Início: destaque, à esquerda, como o "voltar" do iOS */
header.top .homebtn{all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 16px 0 6px; border-radius:999px; background:#5B402E; color:#fff;
  font:600 14px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif; letter-spacing:-.01em;
  box-shadow:0 6px 16px rgba(91,64,46,.28), inset 0 1px 0 rgba(255,255,255,.18); transition:transform .15s, background .15s; flex:0 0 auto}
header.top .homebtn:hover{background:#4A3324}
header.top .homebtn:active{transform:scale(.96)}
header.top .homebtn:focus-visible{outline:2px solid #C9A88C; outline-offset:2px}
header.top .homebtn .hb-ic{width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.16); font-size:22px; line-height:1; padding-bottom:2px; box-sizing:border-box}
.brand.tem-inicio .brandlogo{padding-left:4px; border-left:1px solid rgba(91,64,46,.14); padding-left:14px}
header.top .userpick, header.top .bell{
  background:rgba(255,255,255,.55)!important; border:1px solid var(--g-edge)!important; color:var(--ink)!important;
  box-shadow:var(--g-hi)
}
header.top .bell:hover{background:rgba(255,255,255,.85)!important}

/* ---------- abas: cápsula de vidro flutuante ---------- */
nav.tabs{
  position:sticky!important; top:86px!important; z-index:55;
  width:max-content; max-width:calc(100vw - 24px);
  margin:14px auto 0!important; padding:5px!important; gap:2px!important;
  border-radius:999px; background:var(--g-fill)!important;
  -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge)!important; box-shadow:var(--g-shadow), var(--g-hi)!important;
}
nav.tabs button{border-radius:999px!important; padding:9px 16px!important; color:#6E6157!important}
nav.tabs button:hover{background:rgba(255,255,255,.55)!important; color:var(--ink)!important}
nav.tabs button.on{background:rgba(255,255,255,.95)!important; color:var(--ink)!important; box-shadow:0 4px 14px rgba(48,34,27,.12), var(--g-hi)!important}
main{padding-top:40px!important}

/* ---------- botões ---------- */
.btn{border-radius:999px!important; transition:transform .12s ease, box-shadow .2s, background .2s}
.btn:active{transform:scale(.97)}
.btn-primary,.btn-brown{
  background:linear-gradient(180deg,#7A5741 0%,#5B402E 100%)!important; color:#fff!important;
  box-shadow:0 8px 20px rgba(91,64,46,.28), inset 0 1px 0 rgba(255,255,255,.28)!important; border:0!important
}
.btn-primary:hover,.btn-brown:hover{background:linear-gradient(180deg,#86604A 0%,#664834 100%)!important}
.btn-ghost{
  background:rgba(255,255,255,.58)!important; border:1px solid var(--g-edge)!important; color:var(--ink)!important;
  -webkit-backdrop-filter:var(--g-blur-soft); backdrop-filter:var(--g-blur-soft);
  box-shadow:0 2px 10px rgba(48,34,27,.06), var(--g-hi)
}
.btn-ghost:hover{background:rgba(255,255,255,.85)!important}
.eo-mini,.eo-wa,.eo-stbtn,.eo-chip,.xbtn{border-radius:999px!important}
.eo-mini,.eo-stbtn,.eo-chip:not(.on),.xbtn{background:rgba(255,255,255,.66)!important; border-color:var(--g-edge)!important; box-shadow:var(--g-hi)}
.eo-mini:active,.eo-wa:active,.eo-chip:active{transform:scale(.96)}

/* ---------- controles segmentados ---------- */
.seg,.eo-seg,.viewswitch{
  background:rgba(255,255,255,.42)!important; border:1px solid var(--g-edge); border-radius:999px!important; padding:3px!important;
  -webkit-backdrop-filter:var(--g-blur-soft); backdrop-filter:var(--g-blur-soft); box-shadow:var(--g-hi)
}
.seg button,.eo-seg button,.viewswitch button{border-radius:999px!important}
.seg button.on,.eo-seg button.on,.viewswitch button.on{background:rgba(255,255,255,.95)!important; box-shadow:0 3px 10px rgba(48,34,27,.12)!important}
.eo-nav button{border-radius:999px!important; background:rgba(255,255,255,.6)!important; border-color:var(--g-edge)!important; box-shadow:var(--g-hi)}
.toolbar{background:rgba(255,255,255,.5)!important; border-color:var(--g-edge)!important; border-radius:22px!important;
  -webkit-backdrop-filter:var(--g-blur-soft); backdrop-filter:var(--g-blur-soft); box-shadow:var(--g-hi)!important}
.eo-tools input[type=search],.eo-tools select,.filter,select.filter{border-radius:999px!important; background:rgba(255,255,255,.75)!important; border-color:var(--g-edge)!important}

/* ---------- superfícies de conteúdo: foscas e legíveis ---------- */
.panel,.eo-panel,.eo-kpi,.stat,.eo-day,.calgrid{
  background:rgba(255,255,255,.72)!important; border:1px solid var(--g-edge)!important;
  -webkit-backdrop-filter:var(--g-blur-soft); backdrop-filter:var(--g-blur-soft);
  box-shadow:0 8px 26px rgba(48,34,27,.06), var(--g-hi)!important
}
.panel,.eo-panel{border-radius:28px!important}
.eo-kpi,.stat{border-radius:22px!important}
.eo-card,.kcard,.list .row,.eo-lcard,.eo-ev,.dcard,.icard,.lcard,.mcard{
  background:rgba(255,255,255,.84)!important; border-color:rgba(255,255,255,.8)!important;
  box-shadow:0 4px 16px rgba(48,34,27,.06), var(--g-hi)!important
}
.eo-card{border-radius:22px!important} .eo-ev,.eo-lcard,.kcard{border-radius:18px!important}
.kcol,.eo-kcol{background:rgba(255,255,255,.34)!important; border-color:var(--g-edge)!important; border-radius:24px!important}
.eo-day.today{background:rgba(255,248,236,.9)!important}

/* ---------- folhas (modais) ---------- */
.overlay{background:rgba(40,30,24,.26)!important; -webkit-backdrop-filter:blur(10px) saturate(120%); backdrop-filter:blur(10px) saturate(120%)}
.modal{
  background:rgba(250,247,242,.82)!important; -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur);
  border:1px solid rgba(255,255,255,.75)!important; border-radius:32px!important;
  box-shadow:0 30px 80px rgba(33,25,22,.26), inset 0 1px 0 rgba(255,255,255,.9)!important
}
.modal input,.modal select,.modal textarea{background:rgba(255,255,255,.88)!important; border-color:rgba(104,71,53,.14)!important}
.eo-metrics label,.eo-info div,.eo-li,.eo-det,.eo-drop{background:rgba(255,255,255,.78)!important; border-color:rgba(255,255,255,.85)!important; box-shadow:var(--g-hi)}

/* ---------- tela inicial ---------- */
.eo-home .homelogo{height:64px; width:auto; margin-bottom:22px}

/* avisos em cima das portas: pilha de notificações em vidro */
.eo-avisos{margin:0 0 22px; display:flex; flex-direction:column; gap:8px}
.eo-aviso{display:flex; align-items:center; gap:14px; width:100%; text-align:left; color:var(--ink);
  padding:12px 16px 12px 12px; border-radius:22px; background:rgba(255,255,255,.62); border:1px solid var(--g-edge);
  -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur); box-shadow:0 8px 24px rgba(48,34,27,.08), var(--g-hi);
  transition:transform .12s ease, background .2s}
.eo-aviso:hover{background:rgba(255,255,255,.82)}
.eo-aviso:active{transform:scale(.99)}
.eo-aviso .ico{width:40px; height:40px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; box-shadow:var(--g-hi)}
.eo-aviso .bd{flex:1; min-width:0}
.eo-aviso .t{font-weight:600; font-size:14.5px; line-height:1.3}
.eo-aviso .s{font-size:12.5px; color:var(--muted); margin-top:2px}
.eo-aviso .qd{font-size:12px; color:var(--muted); white-space:nowrap; align-self:flex-start; padding-top:3px}
.eo-avisos-mais{align-self:flex-start; margin:2px 0 0 6px}
.eo-avh{display:flex; align-items:center; justify-content:space-between; padding:0 6px 2px}
.eo-avh-t{font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--muted)}
.eo-avh-t b{display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; margin-left:6px; border-radius:999px; background:rgba(91,64,46,.12); color:var(--ink); font-size:11.5px; letter-spacing:0}
.eo-avh-b{all:unset; cursor:pointer; font-size:13px; font-weight:500; color:var(--ink); padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.55); border:1px solid var(--g-edge); box-shadow:var(--g-hi)}
.eo-avh-b:hover{background:rgba(255,255,255,.85)} .eo-avh-b i{font-style:normal; font-size:11px; margin-left:4px; color:var(--muted)}
.eo-avstack{position:relative; margin-bottom:12px}
.eo-avstack::before,.eo-avstack::after{content:''; position:absolute; left:14px; right:14px; bottom:-7px; height:22px; border-radius:0 0 20px 20px; background:rgba(255,255,255,.45); border:1px solid var(--g-edge); border-top:0; z-index:0}
.eo-avstack.dois::after{left:28px; right:28px; bottom:-13px; background:rgba(255,255,255,.3)}
.eo-avstack::after{display:none} .eo-avstack.dois::after{display:block}
.eo-avstack .eo-aviso{position:relative; z-index:1}
.eo-avresumo{all:unset; cursor:pointer; display:flex; flex-wrap:wrap; gap:6px; padding:6px 4px 0}
.eo-avresumo .pl{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink); padding:5px 11px 5px 5px; border-radius:999px; background:rgba(255,255,255,.5); border:1px solid var(--g-edge); white-space:nowrap}
.eo-avresumo .pl i{width:22px; height:22px; border-radius:8px; display:grid; place-items:center; font-style:normal; font-size:11px}
.eo-avresumo .pl.mais{padding:5px 11px; color:var(--muted); font-weight:600}
.eo-avresumo:hover .pl{background:rgba(255,255,255,.8)}
.eo-aviso.entra{animation:eoAvEntra .22s ease-out both}
@keyframes eoAvEntra{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .eo-aviso.entra{animation:none} }
@media (max-width:760px){ .eo-avresumo{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:6px 16px 2px} .eo-avresumo::-webkit-scrollbar{display:none} }

/* ---------- login ---------- */
.loginwrap{background:transparent!important}
.logincard{background:rgba(255,255,255,.62)!important; -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge)!important; border-radius:32px!important; box-shadow:var(--g-shadow), var(--g-hi)!important}
.logincard::before{display:none!important}
.logincard .loginlogo{height:58px; width:auto; display:block; margin:0 0 22px}

/* ---------- aviso (toast) ---------- */
.toast{background:rgba(37,28,25,.86)!important; -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur);
  border:1px solid rgba(255,255,255,.14); box-shadow:0 14px 34px rgba(33,25,22,.28)!important; border-radius:999px!important}

/* ---------- celular: barra de abas embaixo, como no iOS ---------- */
@media (max-width:640px){
  header.top{top:8px!important; margin:8px 8px 0!important; padding:8px 8px 8px 14px!important; border-radius:22px; min-height:0!important}
  .brandlogo{height:34px}
  .brand .area{display:none}
  header.top .userpick{display:none!important}
  .brand.tem-inicio{gap:10px}
  .brand.tem-inicio .brandlogo{height:30px;padding-left:10px}
  header.top .homebtn{height:36px;padding:0 13px 0 5px;font-size:13.5px;gap:6px}
  header.top .homebtn .hb-ic{width:26px;height:26px;font-size:20px}
  nav.tabs{
    position:fixed!important; top:auto!important; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom));
    width:auto!important; max-width:none!important; margin:0!important; z-index:70;
    justify-content:flex-start; border-radius:26px!important; padding:6px!important;
    background:rgba(255,255,255,.66)!important
  }
  nav.tabs button{padding:10px 14px!important; font-size:13px!important}
  main{padding-bottom:120px!important; padding-top:26px!important}
  .toast{bottom:calc(86px + env(safe-area-inset-bottom))!important; border-radius:18px!important}
  .modal{border-radius:30px 30px 0 0!important; padding-top:30px!important; position:relative}
  .modal::before{content:''; position:absolute; top:10px; left:50%; transform:translateX(-50%); width:38px; height:5px; border-radius:999px; background:rgba(37,28,25,.18)}
  .eo-home .homelogo{height:48px}
  .eo-aviso .qd{display:none}
}

/* ---------- acessibilidade: sem transparência quando o sistema pede ---------- */
@media (prefers-reduced-transparency: reduce){
  header.top,nav.tabs,.modal,.panel,.eo-panel,.eo-kpi,.stat,.eo-day,.eo-porta,.eo-portas,.eo-aviso,.logincard,.toolbar,.seg,.eo-seg,.btn-ghost,.toast{
    -webkit-backdrop-filter:none!important; backdrop-filter:none!important; background:#FBF8F3!important
  }
  .toast{background:#251C19!important}
  .overlay{-webkit-backdrop-filter:none!important; backdrop-filter:none!important; background:rgba(40,30,24,.55)!important}
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  header.top,nav.tabs,.modal,.logincard,.eo-porta,.eo-portas,.eo-aviso{background:#FBF8F3!important}
}
@media (prefers-contrast: more){
  header.top,nav.tabs,.modal,.panel,.eo-panel,.eo-card,.btn-ghost{border-color:rgba(37,28,25,.35)!important}
}

/* ---------- iPhone: sem zoom automático ----------
   O Safari do iPhone dá zoom sozinho quando a pessoa toca num campo com letra
   menor que 16px (o login tinha 14px) e o zoom continua depois de entrar,
   cortando as bordas de todas as páginas. Em telas de toque os campos ficam com 16px. */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
@media (hover:none) and (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea,[contenteditable="true"]{font-size:16px!important}
}