/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   2026-10-01 — VIDRO DO iPHONE ("Liquid Glass", iOS 26) na casca de app da área de saúde
   (APP_Zoukei/design/site-mobile-app.md §2). Só com html.zk-glass: o <head> (app/layout.php) põe a classe no iPhone/iPad
   com backdrop-filter, ou com ?glass=1 (teste no Android e no computador); ?glass=0 desliga. Android e computador
   seguem com o visual do app Android (assets/mobile-app.css). Tudo até 767 px, como a casca.
   Onde entra o vidro (com desfoque): a barra de baixo em cápsula flutuante, o topo fixo ao rolar, o segmentado, as
   folhas de baixo, os menus (zkdd), a fileira de categorias do Hoje, o "+" e os botões principais. Nos cartões do conteúdo
   SÓ o tom translúcido e a borda brilhante, sem backdrop-filter (pesa no Safari).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── materiais (tokens): claro ── */
:root.zk-glass{
  --zk-cat:var(--accent);
  --zk-glass-bg:color-mix(in srgb,var(--panel) 62%,transparent);
  --zk-glass-bg-strong:color-mix(in srgb,var(--panel) 70%,transparent);
  --zk-glass-card:color-mix(in srgb,var(--panel) 74%,transparent);
  --zk-glass-blur:blur(24px) saturate(180%);
  --zk-glass-hi:rgba(255,255,255,.62);          /* brilho no alto (specular) */
  --zk-glass-side:rgba(255,255,255,.34);
  --zk-glass-lo:rgba(255,255,255,.10);          /* some embaixo */
  --zk-glass-line:rgba(15,23,42,.08);           /* contorno para o vidro claro não sumir no fundo claro */
  --zk-glass-shadow:0 12px 32px rgba(15,23,42,.14),0 2px 6px rgba(15,23,42,.06);
  --zk-glass-r:28px;
  --zk-glass-scrim:rgba(15,23,42,.28);
}
/* ── materiais: escuro (o tema escuro do site: data-theme=dark ou auto + sistema escuro) ── */
:root.zk-glass[data-theme="dark"]{
  --zk-glass-bg:color-mix(in srgb,var(--panel) 58%,transparent);
  --zk-glass-bg-strong:color-mix(in srgb,var(--panel) 68%,transparent);
  --zk-glass-card:color-mix(in srgb,var(--panel) 70%,transparent);
  --zk-glass-hi:rgba(255,255,255,.30);
  --zk-glass-side:rgba(255,255,255,.12);
  --zk-glass-lo:rgba(255,255,255,.03);
  --zk-glass-line:rgba(0,0,0,.35);
  --zk-glass-shadow:0 14px 36px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.30);
  --zk-glass-scrim:rgba(0,0,0,.45);
}
@media (prefers-color-scheme:dark){
  :root.zk-glass[data-theme="auto"]{
    --zk-glass-bg:color-mix(in srgb,var(--panel) 58%,transparent);
    --zk-glass-bg-strong:color-mix(in srgb,var(--panel) 68%,transparent);
    --zk-glass-card:color-mix(in srgb,var(--panel) 70%,transparent);
    --zk-glass-hi:rgba(255,255,255,.30);
    --zk-glass-side:rgba(255,255,255,.12);
    --zk-glass-lo:rgba(255,255,255,.03);
    --zk-glass-line:rgba(0,0,0,.35);
    --zk-glass-shadow:0 14px 36px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.30);
    --zk-glass-scrim:rgba(0,0,0,.45);
  }
}
/* tom de fundo de cada categoria (o vidro precisa de algo para refratar) */
:root.zk-glass[data-zk-sub="dose"],:root.zk-glass[data-zk-sub="reverse"],:root.zk-glass[data-zk-sub="weight"],
:root.zk-glass[data-zk-sub="track"],:root.zk-glass[data-zk-sub="proto"]{--zk-cat:#8B5CF6}
:root.zk-glass[data-zk-sub="body"],:root.zk-glass[data-zk-sub="photos"]{--zk-cat:#0891B2}
:root.zk-glass[data-zk-sub="meals"],:root.zk-glass[data-zk-sub="water"]{--zk-cat:#16A34A}
:root.zk-glass[data-zk-sub="activity"]{--zk-cat:#E11D48}
:root.zk-glass[data-zk-sub="symptoms"],:root.zk-glass[data-zk-sub="meds"],:root.zk-glass[data-zk-sub="exams"]{--zk-cat:#D97706}
:root.zk-glass[data-zk-mtab="guia"]{--zk-cat:#6F5FB0}
:root.zk-glass[data-zk-mtab="conta"]{--zk-cat:#3B82F6}

@media (max-width:767px){
  /* ── fundo: degradê suave do tom da categoria, fixo atrás do conteúdo ── */
  html.zk-glass{background-color:var(--bg)}
  html.zk-glass body{background:transparent!important}
  html.zk-glass body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:
      radial-gradient(90% 55% at 100% 0%,color-mix(in srgb,var(--zk-cat) 22%,transparent),transparent 70%),
      radial-gradient(80% 50% at 0% 38%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%),
      radial-gradient(90% 60% at 60% 100%,color-mix(in srgb,var(--zk-cat) 12%,transparent),transparent 70%),
      var(--bg);
    transition:background-color .3s ease}

  /* ── topo: some no alto da página e vira vidro ao rolar ── */
  html.zk-glass .pub-topbar{background:transparent!important;border-bottom-color:transparent!important;box-shadow:none!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;transition:background-color .2s ease,box-shadow .2s ease}
  html.zk-glass.zk-scrolled .pub-topbar{background:var(--zk-glass-bg)!important;
    -webkit-backdrop-filter:var(--zk-glass-blur)!important;backdrop-filter:var(--zk-glass-blur)!important;
    box-shadow:inset 0 -1px 0 var(--zk-glass-line),0 6px 18px rgba(15,23,42,.06)!important}

  /* ── barra de baixo: cápsula flutuante, afastada das bordas (barra de abas do iOS 26) ── */
  html.zk-glass{--zk-bar-gap:calc(8px + var(--zk-sab) * .25)}
  html.zk-glass .zk-hbar--bottom{left:calc(14px + var(--zk-sal));right:calc(14px + var(--zk-sar));
    bottom:calc(var(--zk-sab) * .75 + 8px);width:auto!important;min-height:var(--zk-bar-h);padding:5px;border-radius:32px;
    background:var(--zk-glass-bg);-webkit-backdrop-filter:var(--zk-glass-blur);backdrop-filter:var(--zk-glass-blur);
    border:1px solid var(--zk-glass-side);border-top-color:var(--zk-glass-hi);border-bottom-color:var(--zk-glass-lo);
    box-shadow:var(--zk-glass-shadow),inset 0 1px 0 var(--zk-glass-hi),0 0 0 .5px var(--zk-glass-line)}
  html.zk-glass .zk-hbar--bottom .zk-hbar-item{border-radius:26px;min-height:52px;gap:2px;font-size:11px;font-weight:650;color:var(--text)}
  html.zk-glass .zk-hbar--bottom .zk-nav-ic{padding:2px 0;background:transparent!important}
  html.zk-glass .zk-hbar--bottom .zk-hbar-item.on{color:var(--zk-acc-ink);font-weight:800;
    background:color-mix(in srgb,var(--text) 9%,transparent)}

  /* ── o "+": círculo de vidro com o acento ── */
  html.zk-glass .zk-mapp-fab{border-radius:999px;color:var(--zk-acc-ink);background:var(--zk-glass-bg);
    -webkit-backdrop-filter:var(--zk-glass-blur);backdrop-filter:var(--zk-glass-blur);
    border:1px solid var(--zk-glass-side);border-top-color:var(--zk-glass-hi);border-bottom-color:var(--zk-glass-lo);
    box-shadow:var(--zk-glass-shadow),inset 0 1px 0 var(--zk-glass-hi),0 0 0 .5px var(--zk-glass-line)}

  /* ── segmentado (sub-abas) e fileira de categorias do Hoje: vidro, presos ao topo ── */
  html.zk-glass .calc-tabs-wrap{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html.zk-glass .zk-hcat-wrap{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html.zk-glass #calcTabsBar,
  html.zk-glass .zk-hcat{background:var(--zk-glass-bg)!important;-webkit-backdrop-filter:var(--zk-glass-blur);backdrop-filter:var(--zk-glass-blur);
    border:1px solid var(--zk-glass-side)!important;border-top-color:var(--zk-glass-hi)!important;border-bottom-color:var(--zk-glass-lo)!important;
    box-shadow:0 6px 18px rgba(15,23,42,.08),inset 0 1px 0 var(--zk-glass-hi),0 0 0 .5px var(--zk-glass-line);border-radius:22px}
  html.zk-glass #calcTabsBar>.calc-tab-btn{border-radius:18px}
  html.zk-glass #calcTabsBar>.calc-tab-btn.active,html.zk-glass #calcTabsBar>.zk-pick-ind{border-radius:18px;
    background:color-mix(in srgb,var(--panel) 80%,transparent);box-shadow:0 1px 4px rgba(15,23,42,.12),inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}

  /* ── folhas de baixo e menus: vidro forte ── */
  html.zk-glass :is(.dose-modal-backdrop,.bmform-modal,.actlog-modal-backdrop,.zk-msheet-bd){background:var(--zk-glass-scrim)!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html.zk-glass :is(.dose-modal,.bmform-dialog,.actlog-modal,.zk-msheet,.zk-bug-card,.zkb-card){background:var(--zk-glass-bg-strong)!important;
    -webkit-backdrop-filter:var(--zk-glass-blur);backdrop-filter:var(--zk-glass-blur);
    border-top:1px solid var(--zk-glass-hi)!important;border-radius:var(--zk-glass-r) var(--zk-glass-r) 0 0!important;
    box-shadow:0 -12px 40px rgba(15,23,42,.18),inset 0 1px 0 var(--zk-glass-hi)!important}
  html.zk-glass :is(.dm-head,.bmform-head,.bmform-foot,.actlog-head){background:transparent!important}
  html.zk-glass :is(.zkdd-pop,.color-picker-panel,.pub-lang-panel){
    background:var(--zk-glass-bg-strong)!important;-webkit-backdrop-filter:var(--zk-glass-blur);backdrop-filter:var(--zk-glass-blur);
    border:1px solid var(--zk-glass-side)!important;border-top-color:var(--zk-glass-hi)!important;border-radius:20px;
    box-shadow:var(--zk-glass-shadow)!important}
  html.zk-glass .zk-msheet-act,html.zk-glass .zk-msheet-chip,html.zk-glass .zk-msheet-x{background:color-mix(in srgb,var(--panel) 55%,transparent);
    border-color:var(--zk-glass-side);border-top-color:var(--zk-glass-hi)}

  /* ── botões principais: cápsulas de vidro tingidas com o acento (texto escuro sobre o dourado, contraste ≥ 4,5:1) ── */
  html.zk-glass :is(.btn.primary,.zk-hero-dose .btn,.calc-next-btn){border-radius:999px!important;
    background:color-mix(in srgb,var(--accent) 86%,transparent)!important;
    -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);
    border:1px solid rgba(255,255,255,.45)!important;border-bottom-color:rgba(255,255,255,.08)!important;
    box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 30%,transparent),inset 0 1px 0 rgba(255,255,255,.55)!important}
  /* chips: vidro leve */
  html.zk-glass :is(.zk-ph-chip,.zk-fn-chip,.zk-hcat-chip,.zk-sum-act:not(.zk-sum-act-solid)){
    background:color-mix(in srgb,var(--panel) 58%,transparent);border:1px solid var(--zk-glass-side);border-top-color:var(--zk-glass-hi)}

  /* ── cartões do conteúdo: SÓ tom translúcido + borda brilhante (sem backdrop-filter) ── */
  html.zk-glass :is(.calc-panel,.zk-sum-card,.calc-step,.calc-result-panel,.calc-accum,.calc-bf7,.track-card,.meal-goal-card,
    .meal-analyze-card,.meal-day-card,.my-profile-section,.pep-calc-card,.calc-preset-btn,.home-reg){
    background-color:var(--zk-glass-card)!important;
    border-color:var(--zk-glass-side)!important;border-top-color:var(--zk-glass-hi)!important;border-bottom-color:var(--zk-glass-lo)!important;
    box-shadow:0 1px 2px rgba(15,23,42,.05),0 8px 24px rgba(15,23,42,.06),inset 0 1px 0 var(--zk-glass-hi)!important}
}

/* ── acessibilidade ── */
@media (max-width:767px) and (prefers-reduced-transparency:reduce){
  :root.zk-glass{--zk-glass-bg:var(--panel);--zk-glass-bg-strong:var(--panel);--zk-glass-card:var(--panel);--zk-glass-blur:none}
  html.zk-glass body::before{background:var(--bg)}
}
@media (max-width:767px) and (prefers-contrast:more){
  :root.zk-glass{--zk-glass-bg:color-mix(in srgb,var(--panel) 92%,transparent);--zk-glass-bg-strong:var(--panel);
    --zk-glass-card:var(--panel);--zk-glass-side:color-mix(in srgb,var(--text) 45%,transparent);
    --zk-glass-hi:color-mix(in srgb,var(--text) 55%,transparent);--zk-glass-lo:color-mix(in srgb,var(--text) 45%,transparent);
    --zk-glass-line:color-mix(in srgb,var(--text) 50%,transparent)}
  html.zk-glass .zk-hbar--bottom .zk-hbar-item{color:var(--text)}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  html.zk-glass body::before,html.zk-glass .pub-topbar{transition:none}
}