/* Ingresso On · interface de app. Base do design system do Cardápio MOV (fundo quente, cartões suaves,
   menu de baixo flutuante de 68 px a 12 px da borda, cantos de 22 px, vidro com blur, toque com resposta),
   com a cor da marca do Ingresso On (verde). Vale no celular; no computador continua a barra lateral. */
:root{
  --io-bg:#f6f5f0;--io-card:#fff;--io-line:#e8e8e2;--io-ink:#18201f;--io-muted:#5f635e;
  --io-green:#25D366;--io-green-ink:#102b1b;--io-navbg:rgba(24,32,31,.94);--io-nav-h:68px;--io-gap:12px;
  --io-safe:env(safe-area-inset-bottom,0px);
}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
button,a,summary,[role="button"],input,select{touch-action:manipulation}

/* ---------- Menu de baixo flutuante (mesmo componente do MOV) ---------- */
.io-bnav{display:none}
@media (max-width:800px){
  body.io-has-bnav{padding-bottom:calc(var(--io-nav-h) + var(--io-gap)*2 + var(--io-safe) + 8px)}
  .io-bnav{display:flex;position:fixed;left:var(--io-gap);right:var(--io-gap);bottom:calc(var(--io-gap) + var(--io-safe));height:var(--io-nav-h);box-sizing:border-box;z-index:60;
    align-items:stretch;justify-content:flex-start;gap:6px;padding:8px 10px;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;
    scroll-padding:0 10px;scroll-snap-type:x proximity;touch-action:pan-x pan-y;background:var(--io-navbg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.12);border-radius:22px;box-shadow:0 12px 32px rgba(0,0,0,.35);animation:ioNavIn .5s cubic-bezier(.2,.8,.2,1) both}
  .io-bnav::-webkit-scrollbar{display:none}
  .io-bnav::after{content:'';flex:0 0 2px}
  .io-bnav a{flex:0 0 auto;min-width:72px;max-width:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:7px 10px;border-radius:12px;
    color:#fff;font:700 11px/1.15 'DM Sans',sans-serif;text-align:center;white-space:nowrap;text-decoration:none;scroll-snap-align:center;
    transition:background .2s,color .2s,transform .15s}
  .io-bnav a svg{width:20px;height:20px;flex:0 0 20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .io-bnav a span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .io-bnav a:active{transform:scale(.94)}
  .io-bnav a[aria-current="page"]{background:var(--io-green);color:#18201f}
  .io-bnav a[aria-current="page"] svg{animation:ioPopIcon .35s cubic-bezier(.34,1.56,.64,1)}
  .io-bnav a .io-dot{position:absolute}
}
@keyframes ioNavIn{from{transform:translateY(120%);opacity:0}to{transform:none;opacity:1}}
@keyframes ioPopIcon{0%{transform:scale(.7)}100%{transform:scale(1)}}

/* ---------- Casca de app no celular ---------- */
@media (max-width:800px){
  body{background:var(--io-bg)}
  /* Painel do produtor: sem barra lateral, conteúdo em tela cheia */
  .dashboard{display:block;min-height:100vh;background:var(--io-bg)}
  .dashboard .sidebar{display:none}
  .dash-main{min-width:0}
  .dash-top{position:sticky;top:0;z-index:40;height:56px;padding:0 16px;background:rgba(246,245,240,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--io-line)}
  .dash-top>span{font-weight:700;color:var(--io-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:58vw}
  .dash-top .top-actions{gap:10px}
  .dash-content,.dash-main>section,.dash-main>div:not(.dash-top){padding-left:16px;padding-right:16px}
  .dash-heading{flex-direction:column;align-items:flex-start;gap:12px}
  .dash-heading h1{font-size:26px;line-height:1.1}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  /* Cartões macios, como no MOV */
  .stat,.card,.panel,.dash-card,.order-card,.event-card{background:var(--io-card);border:1px solid var(--io-line);border-radius:18px;box-shadow:0 1px 2px rgba(16,43,27,.05),0 8px 22px -14px rgba(16,43,27,.18)}
  .stat{padding:16px}
  .btn{min-height:48px;border-radius:14px}
  .btn:active,.stat:active,.card:active{transform:scale(.97)}
  /* Vitrine do comprador: topo compacto e links no menu de baixo */
  .topbar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .topbar .nav-links{display:none}
  .topbar .nav{min-height:60px;gap:12px}
  .topbar .nav-search{flex:1;min-width:0}
  .footer{padding-bottom:12px}
  /* Entrada de página, como troca de tela em app */
  #app.io-page-in>*{animation:ioPage .38s cubic-bezier(.2,.8,.2,1) both}
  dialog#modal{border-radius:22px 22px 0 0;margin:auto 0 0;max-width:100%;width:100%}
}
@keyframes ioPage{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .io-bnav,.io-bnav a,#app.io-page-in>*{animation:none!important;transition:none!important}
}