/* App GSS — moldura única (gss-shell.js). FONTE ÚNICA: dist/shared/gss-shell.css.
   Usa só os tokens do gss-web.css (mesmos do desktop, src/css/tokens.css).
   Celular/tablet: barra inferior. Computador (≥1024px): barra de título + menu
   lateral flutuante que abre ao passar o mouse — espelho do desktop (shell.css). */
:root{--gs-tb:44px;--gs-sb:240px;--gs-mini:64px;--gs-gap:12px}

/* ── Transição entre páginas ── */
html.gs-trans body{visibility:hidden}
html.gs-trans::before{content:"";position:fixed;inset:0;background:var(--surface-50,#f5f6f9);z-index:99998}
html.gs-trans::after{content:"";position:fixed;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:3px solid var(--brand-100,#e8ecfa);border-top-color:var(--brand-700,#1f2f7a);animation:gs-gira .8s linear infinite;z-index:99999}
.gs-trans{position:fixed;inset:0;z-index:99999;background:var(--surface-50);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .22s var(--ease-out)}
.gs-trans.on{opacity:1;pointer-events:auto}
.gs-trans-in{display:flex;flex-direction:column;align-items:center;gap:18px}
.gs-trans-in img{height:44px;animation:gs-pulsa 1.2s ease-in-out infinite}
.gs-trans-barra{width:140px;height:4px;border-radius:4px;background:var(--brand-100);overflow:hidden}
.gs-trans-barra span{display:block;width:40%;height:100%;border-radius:4px;background:var(--brand-700);animation:gs-corre 1s var(--ease-out) infinite}
@keyframes gs-gira{to{transform:rotate(360deg)}}
@keyframes gs-pulsa{50%{opacity:.55;transform:scale(.96)}}
@keyframes gs-corre{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
/* Troca de tela dentro da página: entra suave em vez de piscar. */
body.gs-on .screen.active,body.gs-on #app-content>*{animation:gs-entra .24s var(--ease-out)}
@keyframes gs-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── Molduras antigas das páginas: saem quando a moldura única está ligada ── */
body.gs-on .app-sidebar{display:none!important}
body.gs-on .app-main{margin-left:0!important}
body.gs-on #btn-switch-app{display:none!important}
body.gs-on .app-content{padding:16px!important}
body.gs-on .app-topbar{padding-left:16px!important;padding-right:16px!important}

/* ── Barra inferior ── */
.gs-titlebar,.gs-side{display:none}
.gs-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;padding:0 8px env(safe-area-inset-bottom);pointer-events:none}
.gs-bar-in{position:relative;max-width:640px;margin:0 auto;height:68px;background:var(--surface-0);border-radius:22px 22px 0 0;box-shadow:0 -4px 20px rgba(16,24,40,.10);display:flex;align-items:stretch;pointer-events:auto}
body.gs-on .gs-bar{display:block}
body.gs-on{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.gs-item{flex:1;min-width:0;border:0;background:none;padding:10px 2px 8px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;color:var(--ink-muted);font-size:11px;font-weight:500;cursor:pointer;position:relative;z-index:2;-webkit-tap-highlight-color:transparent;font-family:inherit}
.gs-item-vazio{pointer-events:none}
.gs-item .gs-ic{display:flex;transition:transform .28s var(--ease-out),color .2s}
.gs-item .gs-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.gs-item.ativo{color:var(--brand-700)}
.gs-item.ativo .gs-lbl{font-weight:700;color:var(--ink)}
.gs-item.ativo .gs-ic{transform:translateY(-22px) scale(1.12)}
.gs-selo{position:absolute;top:6px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;border-radius:var(--radius-full);background:var(--accent-600);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center}
.gs-ponto{position:absolute;top:9px;left:calc(50% + 8px);width:9px;height:9px;border-radius:50%;background:var(--success-600);box-shadow:0 0 0 2px var(--surface-0)}
.gs-item.ativo .gs-selo,.gs-item.ativo .gs-ponto{display:none}
.gs-bolha{position:absolute;top:-24px;left:0;width:54px;height:54px;border-radius:50%;background:var(--brand-100);box-shadow:0 0 0 6px var(--surface-50);z-index:1;transition:transform .32s var(--ease-out),opacity .2s;opacity:0;pointer-events:none}
.gs-bolha.on{opacity:1}
.gs-mais-wrap{flex:1;display:flex;justify-content:center;position:relative;z-index:3}
.gs-mais{width:58px;height:58px;margin-top:-22px;border-radius:50%;border:0;background:var(--accent-600);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px var(--surface-50),var(--shadow-3);cursor:pointer;transition:transform .2s var(--ease-out)}
.gs-mais:active{transform:scale(.94)}
.gs-mais.aberto{transform:rotate(45deg)}

/* ── Folhas ── */
.gs-fundo{position:fixed;inset:0;background:rgba(11,18,51,.45);z-index:9600;opacity:0;pointer-events:none;transition:opacity .2s}
.gs-fundo.on{opacity:1;pointer-events:auto}
.gs-folha{position:fixed;left:0;right:0;bottom:0;z-index:9601;max-width:640px;margin:0 auto;background:var(--surface-0);border-radius:22px 22px 0 0;padding:10px 16px calc(18px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .28s var(--ease-out);max-height:85vh;overflow-y:auto}
.gs-folha.on{transform:none}
.gs-folha-puxador{width:40px;height:4px;border-radius:4px;background:var(--surface-100);margin:0 auto 12px}
.gs-folha h2{font-size:16px;font-weight:700;margin:0 0 12px;color:var(--ink)}
.gs-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.gs-op{border:1px solid var(--surface-100);background:var(--surface-0);border-radius:var(--radius-md);padding:14px 6px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;text-align:center;position:relative;font-family:inherit}
.gs-op:hover{border-color:var(--brand-700)}
.gs-op .gs-op-ic{width:44px;height:44px;border-radius:50%;background:var(--brand-100);color:var(--brand-700);display:flex;align-items:center;justify-content:center}
.gs-op.destaque .gs-op-ic{background:var(--accent-600);color:#fff}
.gs-aviso{font-size:13px;color:var(--ink-muted);margin:0 0 8px;line-height:1.45}
.gs-form label{display:block;font-size:12px;font-weight:600;color:var(--ink-muted);margin:10px 0 4px}
.gs-form input,.gs-form select{width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:15px;background:var(--surface-0);color:var(--ink);font-family:inherit}
.gs-form-bt{display:flex;gap:8px;margin-top:14px}
.gs-form-bt .btn{flex:1;width:auto}
.gs-form-bt.gs-col{flex-direction:column}
.gs-link{border:0;background:none;color:var(--brand-700);font-weight:600;font-size:13px;cursor:pointer;padding:8px;font-family:inherit}
.gs-link.perigo{color:var(--danger-600)}
.gs-alerta{display:flex;gap:12px;align-items:flex-start}
.gs-alerta>.icon{color:var(--warning-600);flex-shrink:0;margin-top:2px}
.gs-lista button{width:100%;display:flex;align-items:center;gap:12px;padding:13px 6px;border:0;border-top:1px solid var(--surface-100);background:none;font-size:14px;color:var(--ink);cursor:pointer;text-align:left;font-family:inherit}
.gs-lista button:first-child{border-top:0}
.gs-lista button .icon{color:var(--brand-700)}
.gs-lista button.perigo,.gs-lista button.perigo .icon{color:var(--danger-600)}

/* ── Computador: espelho do desktop ── */
@media (min-width:1024px){
  body.gs-on{padding:calc(var(--gs-tb) + 4px) 0 0 calc(var(--gs-mini) + var(--gs-gap) * 2)}
  body.gs-on.gs-fixo{padding-left:calc(var(--gs-sb) + var(--gs-gap) * 2)}
  body.gs-on .gs-bar{display:none}
  body.gs-on .gs-titlebar{display:flex}
  body.gs-on .gs-side{display:flex}
  .gs-titlebar{position:fixed;top:0;left:0;right:0;height:var(--gs-tb);z-index:9500;background:var(--titlebar);color:#fff;align-items:center;gap:16px;padding:0 12px 0 16px}
  .gs-tb-marca{display:flex;align-items:center;gap:10px;font-size:13px;min-width:200px}
  .gs-tb-marca img{width:26px;height:26px;border-radius:7px;background:#fff;padding:2px;object-fit:contain}
  .gs-tb-trilha{flex:1;font-size:13px;color:#a9b2d6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .gs-tb-trilha span{margin:0 6px;opacity:.5}
  .gs-tb-trilha b{color:#fff;font-weight:600}
  .gs-tb-acoes{display:flex;align-items:center;gap:6px}
  .gs-tb-btn{position:relative;border:0;background:none;color:#c3cae6;width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;cursor:pointer}
  .gs-tb-btn:hover{background:rgba(255,255,255,.08);color:#fff}
  .gs-tb-btn .gs-avatar{width:28px;height:28px;font-size:11px}
  .gs-tb-ponto{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--accent-600);box-shadow:0 0 0 2px var(--titlebar)}
  .gs-tb-livro{display:flex;align-items:center;gap:6px;border:0;border-radius:var(--radius-full);background:rgba(29,122,70,.25);color:#b9f0cf;font-size:12px;font-weight:600;padding:5px 12px;cursor:pointer;font-family:inherit}
  .gs-tb-livro.atrasado{background:rgba(200,36,43,.3);color:#ffd2d2}
  .gs-side{position:fixed;z-index:9400;top:calc(var(--gs-tb) + var(--gs-gap));bottom:var(--gs-gap);left:var(--gs-gap);width:var(--gs-mini);background:var(--brand-900);border-radius:var(--radius-md);box-shadow:var(--shadow-3);flex-direction:column;padding:12px 10px;overflow:hidden;transition:width .2s var(--ease-out)}
  .gs-side:hover,body.gs-fixo .gs-side{width:var(--gs-sb);transition-delay:.12s}
  body.gs-fixo .gs-side{transition-delay:0s}
  .gs-side .gs-rot{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .15s}
  .gs-side:not(:hover) .gs-rot{opacity:0}
  body.gs-fixo .gs-side .gs-rot{opacity:1}
  .gs-side-novo{display:flex;align-items:center;gap:10px;border:0;border-radius:var(--radius-sm);background:var(--accent-600);color:#fff;font-weight:700;font-size:13px;padding:10px 13px;margin-bottom:10px;cursor:pointer;font-family:inherit;flex-shrink:0}
  .gs-side-nav{flex:1;overflow-y:auto;overflow-x:hidden}
  .gs-grupo{font-size:11px;font-weight:600;letter-spacing:.04em;color:rgba(195,202,230,.55);padding:12px 12px 4px;white-space:nowrap}
  .gs-side:not(:hover) .gs-grupo{height:1px;padding:0;margin:8px 8px;background:rgba(255,255,255,.1);color:transparent;overflow:hidden}
  body.gs-fixo .gs-side .gs-grupo{height:auto;padding:12px 12px 4px;margin:0;background:none;color:rgba(195,202,230,.55)}
  .gs-side-item{width:100%;display:flex;align-items:center;gap:12px;border:0;background:none;color:var(--sidebar-ink);font-size:13px;font-weight:500;padding:9px 12px;border-radius:var(--radius-sm);cursor:pointer;text-align:left;position:relative;font-family:inherit}
  .gs-side-item:hover{background:rgba(255,255,255,.07);color:#fff}
  .gs-side-item.ativo{background:rgba(255,255,255,.12);color:#fff;font-weight:600}
  .gs-side-ic{display:flex;flex-shrink:0}
  .gs-side-badge{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-full);background:var(--accent-600);color:#fff;font-size:10px;font-weight:700;line-height:18px;text-align:center}
  .gs-side .gs-ponto{top:7px;left:30px}
  .gs-side:not(:hover) .gs-side-badge{position:absolute;top:4px;left:28px;margin:0;min-width:8px;width:8px;height:8px;padding:0;font-size:0}
  body.gs-fixo .gs-side .gs-side-badge{position:static;margin-left:auto;min-width:18px;width:auto;height:18px;padding:0 5px;font-size:10px}
  .gs-side-rodape{border-top:1px solid rgba(255,255,255,.08);padding-top:10px;flex-shrink:0}
  .gs-side-usuario{width:100%;display:flex;align-items:center;gap:10px;border:0;background:none;color:#fff;cursor:pointer;padding:4px 2px;text-align:left;font-family:inherit}
  .gs-uinfo b{display:block;font-size:13px}
  .gs-uinfo small{display:block;font-size:11px;color:#a9b2d6}
  .gs-avatar{width:36px;height:36px;border-radius:50%;background:var(--brand-700);color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  /* Topo das páginas (voltar / título / fechar livro) abaixo da barra de título. */
  body.gs-on .app-topbar{top:calc(var(--gs-tb) + 4px);background:transparent;border-bottom:0}
  body.gs-on .app-content{max-width:1280px;padding:20px 28px!important}
  .gs-folha{bottom:auto;top:50%;left:50%;right:auto;width:min(560px,92vw);border-radius:var(--radius-md);transform:translate(-50%,-40%);opacity:0;pointer-events:none;transition:transform .22s var(--ease-out),opacity .2s}
  .gs-folha.on{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
  .gs-folha-puxador{display:none}
}

@media (prefers-reduced-motion:reduce){
  .gs-bolha,.gs-item .gs-ic,.gs-folha,.gs-fundo,.gs-mais,.gs-side,.gs-trans{transition:none}
  body.gs-on .screen.active,body.gs-on #app-content>*{animation:none}
}