/* =========================================================
   NA BRASA OS — RESPONSIVE REFINEMENT 1.1.2
   Camada estritamente responsiva. Não altera a identidade
   visual, as cores, a tipografia ou os componentes desktop.
   ========================================================= */

*,*::before,*::after{box-sizing:border-box}
html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:auto;
  -webkit-overflow-scrolling:touch;
}
body{
  width:100%;
  max-width:100%;
  overflow-x:clip;
}
img,svg,video,canvas{max-width:100%}
button,input,select,textarea{max-width:100%}

/* Evita que itens de grid/flex imponham largura mínima e estourem a tela. */
.app-shell,.content,.panel,.hero,.hero>*,.brand-row,.hero-actions,
.form-card,.wide-card,.premium-card,.item-card,.section-title,
.enterprise-access-shell,.enterprise-access-story,.enterprise-access-panel,
.enterprise-value-grid>*,.demo-login-actions>*,.more-grid>*,.action-grid>*{min-width:0}



/* A rolagem principal pertence ao elemento raiz. Elementos internos não devem
   capturar ou bloquear a roda/toque quando não são modais ativos. */
.demo-login-gate,
.app-shell,
.content,
.panel.active{
  touch-action:pan-y;
}

/* Modais continuam travando o fundo, mas o conteúdo deles permanece rolável. */
.bottom-sheet,
.profile-modal,
.receipt-modal,
.kitchen-order-modal,
.demo-tour,
.demo-profile-modal,
.dedication-modal{
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}

/* ---------------------------------------------------------
   ACESSO / LOGIN
   --------------------------------------------------------- */
body.auth-locked{
  min-height:100dvh!important;
  height:auto!important;
  overflow-x:clip!important;
  overflow-y:visible!important;
  overscroll-behavior-y:auto!important;
  touch-action:pan-y;
  padding:0!important;
}
.demo-login-gate{
  min-height:100dvh!important;
  height:auto!important;
  overflow:visible!important;
  padding-top:max(clamp(14px,2.8vw,36px),env(safe-area-inset-top))!important;
  padding-right:max(clamp(12px,2.8vw,36px),env(safe-area-inset-right))!important;
  padding-bottom:max(clamp(14px,2.8vw,36px),env(safe-area-inset-bottom))!important;
  padding-left:max(clamp(12px,2.8vw,36px),env(safe-area-inset-left))!important;
}
.enterprise-access-shell{height:auto!important;max-height:none!important}
.enterprise-access-panel.demo-login-card{height:auto!important;min-height:0!important}
.demo-login-actions button{white-space:normal!important}
.demo-login-actions button span,.demo-login-actions button small{min-width:0}

/* Tablet: preserva a composição escura/clara lado a lado em vez de
   transformar a página em duas telas verticais excessivamente longas. */
@media (min-width:720px) and (max-width:1080px){
  .enterprise-access-shell{
    width:100%!important;
    max-width:1020px!important;
    min-height:min(900px,calc(100dvh - clamp(28px,6vw,64px)))!important;
    display:grid!important;
    grid-template-columns:minmax(0,.92fr) minmax(350px,1.08fr)!important;
    border-radius:30px!important;
  }
  .enterprise-access-story{min-height:0!important;padding:clamp(28px,4vw,44px)!important}
  .enterprise-story-copy{margin:clamp(30px,5vh,54px) 0!important}
  .enterprise-story-copy h1{font-size:clamp(38px,5.3vw,56px)!important}
  .enterprise-story-copy p{font-size:14px!important;line-height:1.58!important}
  .enterprise-value-grid{grid-template-columns:1fr!important;gap:7px!important}
  .enterprise-value-grid article{
    min-height:0!important;padding:13px 14px!important;
    display:grid!important;grid-template-columns:28px 1fr!important;column-gap:9px!important;
  }
  .enterprise-value-grid article>span{grid-row:1/3!important;margin:1px 0 0!important}
  .enterprise-value-grid strong{margin:0!important}
  .enterprise-value-grid p{margin-top:4px!important}
  .enterprise-environment-note{margin-top:16px!important}
  .enterprise-access-panel.demo-login-card{
    align-self:stretch!important;justify-content:center!important;
    padding:clamp(30px,4.2vw,48px)!important;
  }
  .enterprise-access-panel h2{font-size:clamp(32px,4.2vw,44px)!important}
}

@media (min-width:720px) and (max-width:840px){
  .enterprise-access-shell{grid-template-columns:minmax(0,.86fr) minmax(370px,1.14fr)!important}
  .enterprise-access-story{padding:28px 25px!important}
  .enterprise-wordmark{gap:12px!important}
  .enterprise-wordmark .nb-mark{width:58px;height:58px;border-radius:17px}
  .enterprise-story-copy h1{font-size:38px!important}
  .enterprise-story-copy p{font-size:13px!important}
  .enterprise-value-grid p{display:none}
  .enterprise-value-grid article{grid-template-columns:26px 1fr!important;align-items:center!important}
  .enterprise-access-panel.demo-login-card{padding:30px 27px!important}
  .demo-access-steps{margin:22px 0 18px!important}
}

/* Celular: mantém a abertura escura, porém compacta o conteúdo institucional
   e prioriza os botões de entrada antes das etapas explicativas. */
@media (max-width:719px){
  .demo-login-gate{
    place-items:start stretch!important;
    padding-top:max(8px,env(safe-area-inset-top))!important;
    padding-right:max(8px,env(safe-area-inset-right))!important;
    padding-bottom:max(8px,env(safe-area-inset-bottom))!important;
    padding-left:max(8px,env(safe-area-inset-left))!important;
  }
  .enterprise-access-shell{
    min-height:0!important;width:100%!important;
    display:flex!important;flex-direction:column!important;
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:26px!important;overflow:hidden!important;
  }
  .enterprise-access-story{
    flex:0 0 auto!important;min-height:0!important;
    padding:clamp(20px,6vw,28px) clamp(17px,5.5vw,24px) clamp(22px,6vw,30px)!important;
    justify-content:flex-start!important;
  }
  .enterprise-wordmark{gap:12px!important}
  .enterprise-wordmark .nb-mark{width:54px!important;height:54px!important;border-radius:16px!important}
  .enterprise-wordmark .nb-mark span{font-size:17px!important}
  .enterprise-wordmark strong{font-size:12px!important}
  .enterprise-wordmark small{font-size:7px!important}
  .enterprise-story-copy{margin:clamp(22px,6vw,34px) 0 0!important}
  .enterprise-kicker{margin-bottom:12px!important;font-size:8px!important;letter-spacing:.18em!important}
  .enterprise-story-copy h1{
    max-width:12ch!important;margin-bottom:14px!important;
    font-size:clamp(32px,10.4vw,43px)!important;line-height:.98!important;
  }
  .enterprise-story-copy p{font-size:13px!important;line-height:1.52!important}
  .enterprise-value-grid{display:none!important}
  .enterprise-environment-note{
    margin-top:18px!important;grid-template-columns:auto 1fr!important;
    font-size:9px!important;line-height:1.4!important;
  }
  .enterprise-environment-note p{grid-column:2!important;margin-top:2px!important}

  .enterprise-access-panel.demo-login-card{
    flex:0 0 auto!important;height:auto!important;min-height:0!important;
    justify-content:flex-start!important;padding:clamp(25px,7vw,34px) clamp(17px,5.5vw,24px) clamp(28px,8vw,38px)!important;
    border-radius:0!important;overflow:visible!important;
  }
  .enterprise-access-panel>.enterprise-panel-topline{order:1;margin-bottom:22px!important}
  .enterprise-access-panel>h2{order:2;font-size:clamp(30px,9vw,38px)!important}
  .enterprise-access-panel>#loginLead{order:3;font-size:13px!important;line-height:1.52!important}
  .enterprise-access-panel>.demo-login-actions,
  .enterprise-access-panel>.login-waiting,
  .enterprise-access-panel>.login-form{order:4}
  .enterprise-access-panel>.demo-access-steps{order:5}
  .enterprise-access-panel>.demo-login-proof{order:6}
  .enterprise-access-panel>.login-help{order:7}
  .enterprise-access-panel>.login-status{order:8}
  .demo-login-actions{margin-top:20px!important;margin-bottom:0!important}
  .demo-login-actions button{min-height:60px!important;padding:12px 15px!important}
  .demo-access-steps{margin:22px 0 0!important;gap:7px!important}
  .demo-access-steps .access-step{padding:10px 11px!important}
  .demo-login-proof{margin-top:18px!important}
}

/* Aparelhos baixos e modo paisagem: elimina conteúdo secundário da primeira
   dobra sem remover o estilo escuro da apresentação. */
@media (max-width:719px) and (max-height:760px){
  .enterprise-access-story{padding:16px 17px 18px!important}
  .enterprise-wordmark .nb-mark{width:46px!important;height:46px!important;border-radius:14px!important}
  .enterprise-wordmark .nb-mark span{font-size:15px!important}
  .enterprise-story-copy{margin:15px 0 0!important}
  .enterprise-kicker{margin-bottom:8px!important}
  .enterprise-story-copy h1{max-width:13ch!important;font-size:30px!important;margin-bottom:0!important}
  .enterprise-story-copy p,.enterprise-environment-note{display:none!important}
  .enterprise-access-panel.demo-login-card{padding-top:22px!important}
  .enterprise-panel-topline{margin-bottom:16px!important}
  .enterprise-access-panel>h2{font-size:29px!important;margin-bottom:11px!important}
  .enterprise-access-panel>#loginLead{font-size:12px!important;line-height:1.42!important}
  .demo-login-actions{margin-top:15px!important}
}

@media (max-width:390px){
  .demo-login-gate{
    padding-top:max(6px,env(safe-area-inset-top))!important;
    padding-right:max(6px,env(safe-area-inset-right))!important;
    padding-bottom:max(6px,env(safe-area-inset-bottom))!important;
    padding-left:max(6px,env(safe-area-inset-left))!important;
  }
  .enterprise-access-shell{border-radius:22px!important}
  .enterprise-access-panel.demo-login-card{padding-left:15px!important;padding-right:15px!important}
  .demo-login-actions button span{font-size:12px!important}
}

/* ---------------------------------------------------------
   APLICATIVO / CABEÇALHO / NAVEGAÇÃO
   --------------------------------------------------------- */
body:not(.auth-locked){
  padding-top:max(10px,env(safe-area-inset-top))!important;
  padding-left:env(safe-area-inset-left)!important;
  padding-right:env(safe-area-inset-right)!important;
}
.demo-ribbon{
  border-radius:13px!important;
  overflow:hidden!important;
}
.hero{border-radius:26px!important}

@media (max-width:680px){
  body:not(.auth-locked){padding-top:max(8px,env(safe-area-inset-top))!important}
  .demo-ribbon{
    width:calc(100% - 16px)!important;margin:0 8px!important;
    border-radius:16px!important;
  }
  .hero{
    width:auto!important;margin:8px 9px 12px!important;
    border-radius:22px!important;padding:17px!important;gap:14px!important;
  }
  .hero .brand-row{width:100%!important;align-items:center!important}
  .hero p{max-width:100%!important}
  .hero-actions{
    width:100%!important;display:grid!important;
    grid-template-columns:minmax(0,1.25fr) minmax(0,.72fr) minmax(0,1.12fr)!important;
    gap:7px!important;
  }
  .hero-actions>*{width:100%!important;min-width:0!important;min-height:48px!important;margin:0!important}
  .profile-chip{grid-column:auto!important;flex:none!important;padding:7px 9px!important}
  .profile-chip small{display:none!important}
  .profile-chip strong{font-size:11px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .profile-avatar{width:30px!important;height:30px!important;flex:0 0 30px!important}
  .notify-btn{padding:7px!important;justify-content:center!important}
  .notify-label{display:none!important}
  .access-btn,.install-btn{padding:8px 9px!important;font-size:10px!important;line-height:1.15!important;white-space:normal!important}

  .content{padding-left:11px!important;padding-right:11px!important}
  .section-title{min-width:0}
  .section-title h2,.section-title h3{overflow-wrap:anywhere}
  .quick-status{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .quick-status:not(.four)>:last-child:nth-child(odd){grid-column:1/-1}
  .quick-status.four{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .status-card{min-width:0!important}
  .status-card strong,.status-card small,.status-card .label{overflow-wrap:anywhere}

  .form-row,.phase11-form,.phase10-form{grid-template-columns:1fr!important}
  .form-row>*{min-width:0}
  .item-head{flex-wrap:wrap}
  .item-head>*{min-width:0}
  .order-actions,.phase10-actions,.p1-card-actions{align-items:stretch}
  .order-actions button,.order-actions a{flex:1 1 150px}

  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  th,td{white-space:nowrap}

  .sheet-backdrop,.profile-modal-backdrop,.receipt-overlay,
  .demo-tour-backdrop,.demo-profile-backdrop,.dedication-modal-backdrop{
    padding-top:max(8px,env(safe-area-inset-top))!important;
    padding-right:max(8px,env(safe-area-inset-right))!important;
    padding-bottom:max(8px,env(safe-area-inset-bottom))!important;
    padding-left:max(8px,env(safe-area-inset-left))!important;
  }
  .bottom-sheet,.profile-modal,.receipt-modal,.demo-tour,.demo-profile-modal{
    max-width:100%!important;max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
  }

  .bottom-nav{
    width:calc(100% - 14px)!important;
    max-width:860px!important;
    left:50%!important;right:auto!important;
    bottom:calc(7px + env(safe-area-inset-bottom))!important;
    transform:translateX(-50%)!important;
    border:1px solid rgba(255,255,255,.08)!important;
    border-radius:16px!important;
  }
}

@media (max-width:430px){
  .demo-ribbon{grid-template-columns:auto minmax(0,1fr)!important;gap:7px!important;padding:8px 10px!important}
  .demo-ribbon strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .demo-ribbon button{grid-column:1/-1!important;width:100%!important;min-height:38px!important}
  .hero h1{font-size:26px!important}
  .hero .eyebrow{font-size:8px!important}
  .hero p{font-size:11px!important}
  .brand-mark.nb-mark-small{width:46px!important;height:46px!important;flex-basis:46px!important}
  .hero-actions{grid-template-columns:minmax(0,1.2fr) minmax(0,.7fr) minmax(0,1.1fr)!important}
  .quick-status{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .action-grid{grid-template-columns:1fr!important}
  .meta-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .sheet-actions,.receipt-actions,.bell-drawer-actions{grid-template-columns:1fr!important}
  .order-actions button,.order-actions a{flex-basis:100%;width:100%}
  .bottom-nav{padding-left:4px!important;padding-right:4px!important;gap:1px!important}
  .bottom-nav a{min-width:0!important;padding-left:2px!important;padding-right:2px!important}
  .bottom-nav a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

@media (max-width:330px){
  .hero-actions{grid-template-columns:1fr 1fr!important}
  .profile-chip{grid-column:1/-1!important}
  .quick-status,.quick-status.four,.meta-grid{grid-template-columns:1fr!important}
  .quick-status>*{grid-column:auto!important}
}

/* Modo paisagem em celulares: cabeçalho e modais menos altos. */
@media (max-height:560px) and (orientation:landscape){
  body:not(.auth-locked){padding-top:max(5px,env(safe-area-inset-top))!important}
  .demo-ribbon{padding-top:6px!important;padding-bottom:6px!important}
  .hero{padding:13px 15px!important;margin-top:6px!important}
  .hero p{display:none!important}
  .hero-actions>*{min-height:42px!important}
  .bottom-sheet,.profile-modal,.receipt-modal,.demo-tour,.demo-profile-modal{max-height:calc(100dvh - 10px)!important}
}

/* Regras antigas do cabeçalho usam seletores mais específicos. Esta seção
   apenas garante que a versão mobile acima prevaleça sem tocar no desktop. */
@media (max-width:680px){
  header.hero{
    width:auto!important;max-width:none!important;
    margin:8px 9px 12px!important;padding:17px!important;
    border-radius:22px!important;display:grid!important;gap:14px!important;
  }
  header.hero .hero-actions{
    margin-top:0!important;display:grid!important;flex-wrap:nowrap!important;
    grid-template-columns:minmax(0,1.25fr) minmax(0,.72fr) minmax(0,1.12fr)!important;
    gap:7px!important;align-items:stretch!important;
  }
  header.hero .hero-actions button,
  header.hero .hero-actions a{
    min-width:0!important;width:100%!important;min-height:48px!important;
    padding:7px 9px!important;border-radius:12px!important;
    font-size:10px!important;line-height:1.15!important;
  }
  header.hero h1{font-size:28px!important;line-height:1!important;max-width:none!important;margin:4px 0 6px!important}
  header.hero p{max-width:100%!important;font-size:12px!important;line-height:1.3!important}
  header.hero .eyebrow{font-size:8px!important;line-height:1.1!important;margin-bottom:4px!important}
  header.hero small{letter-spacing:normal!important;margin:0!important}
  header.hero .profile-chip small{display:none!important}
  .demo-ribbon{max-width:none!important}
}

@media (max-width:430px){
  header.hero .hero-actions{
    grid-template-columns:minmax(0,1.2fr) minmax(0,.7fr) minmax(0,1.1fr)!important;
  }
  header.hero h1{font-size:26px!important}
}

@media (max-width:330px){
  header.hero .hero-actions{grid-template-columns:1fr 1fr!important}
  header.hero .profile-chip{grid-column:1/-1!important}
}