/* =========================================================
   NA BRASA OS — DEMO STABILITY 1.6.2
   Largura ampla de referência, responsividade e feedback da demo.
   Carregado por último para consolidar o layout final.
   ========================================================= */

:root{
  --nb-demo-max:1600px;
  --nb-demo-gutter:clamp(10px,2vw,22px);
  --nb-demo-nav-gap:clamp(7px,1.1vw,12px);
}

*,*::before,*::after{box-sizing:border-box}

/* Um único eixo horizontal para faixa, cabeçalho, conteúdo e navegação. */
body:not(.auth-locked) .app-shell{
  width:min(100%,var(--nb-demo-max))!important;
  max-width:var(--nb-demo-max)!important;
  margin-inline:auto!important;
  padding-inline:0!important;
}

body:not(.auth-locked) .demo-ribbon,
body:not(.auth-locked) .hero,
body:not(.auth-locked) header.hero,
body:not(.auth-locked) .bell-drawer,
body:not(.auth-locked) .content,
body:not(.auth-locked) .app-main,
body:not(.auth-locked) .main-content{
  width:auto!important;
  max-width:none!important;
  margin-left:var(--nb-demo-gutter)!important;
  margin-right:var(--nb-demo-gutter)!important;
}

body:not(.auth-locked) .content,
body:not(.auth-locked) .app-main,
body:not(.auth-locked) .main-content{
  padding-left:0!important;
  padding-right:0!important;
}

body:not(.auth-locked) .quick-status,
body:not(.auth-locked) .panel,
body:not(.auth-locked) .panel.active,
body:not(.auth-locked) .section-title,
body:not(.auth-locked) .card-list,
body:not(.auth-locked) .action-grid{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* A navegação acompanha exatamente a largura útil do cabeçalho. */
body:not(.auth-locked) .bottom-nav{
  width:min(
    calc(100vw - var(--nb-demo-gutter) - var(--nb-demo-gutter)),
    calc(var(--nb-demo-max) - var(--nb-demo-gutter) - var(--nb-demo-gutter))
  )!important;
  max-width:none!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  padding-left:var(--nb-demo-nav-gap)!important;
  padding-right:var(--nb-demo-nav-gap)!important;
}

/* O conteúdo não fica artificialmente estreito em monitores grandes. */
@media (min-width:1081px){
  body:not(.auth-locked) .quick-status{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  body:not(.auth-locked) .home-smart-stats,
  body:not(.auth-locked) .home-executive-grid{
    width:100%!important;
  }
}

/* Tablet: mantém a mesma moldura e reduz densidade sem quebrar os cards. */
@media (min-width:681px) and (max-width:1080px){
  :root{--nb-demo-gutter:clamp(12px,2vw,18px)}
  body:not(.auth-locked) .hero,
  body:not(.auth-locked) header.hero{
    margin-bottom:14px!important;
  }
  body:not(.auth-locked) .bottom-nav{
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
  }
}

/* Mobile: bordas coerentes, largura integral e safe areas preservadas. */
@media (max-width:680px){
  :root{
    --nb-demo-gutter:9px;
    --nb-demo-nav-gap:4px;
  }
  body:not(.auth-locked){
    padding-left:env(safe-area-inset-left)!important;
    padding-right:env(safe-area-inset-right)!important;
  }
  body:not(.auth-locked) .demo-ribbon,
  body:not(.auth-locked) .hero,
  body:not(.auth-locked) header.hero,
  body:not(.auth-locked) .bell-drawer,
  body:not(.auth-locked) .content,
  body:not(.auth-locked) .app-main,
  body:not(.auth-locked) .main-content{
    margin-left:var(--nb-demo-gutter)!important;
    margin-right:var(--nb-demo-gutter)!important;
  }
  body:not(.auth-locked) .content,
  body:not(.auth-locked) .app-main,
  body:not(.auth-locked) .main-content{
    padding-left:0!important;
    padding-right:0!important;
  }
  body:not(.auth-locked) .bottom-nav{
    bottom:calc(7px + env(safe-area-inset-bottom))!important;
  }
  body:not(.auth-locked) .hero-actions{
    max-width:100%!important;
  }
  body:not(.auth-locked) table{
    width:max-content;
    min-width:100%;
  }
}

@media (max-width:390px){
  :root{--nb-demo-gutter:7px}
  body:not(.auth-locked) .demo-ribbon,
  body:not(.auth-locked) .hero,
  body:not(.auth-locked) header.hero,
  body:not(.auth-locked) .bell-drawer{
    border-radius:18px!important;
  }
}

/* Avisos contextuais para áreas que dependem de integrações na implantação real. */
.demo-capability-note{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:11px;
  width:100%;
  margin:0 0 16px!important;
  padding:13px 15px;
  border:1px solid rgba(212,90,50,.22);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(212,90,50,.09),rgba(255,255,255,.018));
  color:var(--nbp-text-soft,#d5d9d5);
}
.demo-capability-note>span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:25px;
  padding:0 8px;
  border:1px solid rgba(212,90,50,.28);
  border-radius:999px;
  background:rgba(212,90,50,.13);
  color:#ef9b80;
  font-size:8px;
  font-weight:900;
  letter-spacing:.15em;
  white-space:nowrap;
}
.demo-capability-note p{
  margin:0;
  color:var(--nbp-muted,#929c96)!important;
  font-size:11px;
  line-height:1.55;
}
.demo-capability-note strong{color:var(--nbp-text,#f4f1eb)!important}

/* Fallback de interação: aparência clara de que o clique foi reconhecido. */
.demo-feedback-pulse{
  animation:nbDemoFeedbackPulse .44s ease both!important;
}
@keyframes nbDemoFeedbackPulse{
  0%{box-shadow:0 0 0 0 rgba(212,90,50,.32)}
  100%{box-shadow:0 0 0 7px rgba(212,90,50,0)}
}

.demo-feedback-dialog-backdrop{
  position:fixed;
  inset:0;
  z-index:10050;
  display:grid;
  place-items:center;
  padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  background:rgba(3,5,4,.78);
  backdrop-filter:blur(12px);
}
.demo-feedback-dialog-backdrop[hidden]{display:none!important}
.demo-feedback-dialog{
  position:relative;
  width:min(520px,100%);
  padding:24px;
  border:1px solid var(--nbp-line-strong,rgba(239,244,240,.16));
  border-radius:24px;
  background:linear-gradient(145deg,#18201c,#0e1311);
  color:var(--nbp-text,#f4f1eb);
  box-shadow:0 34px 110px rgba(0,0,0,.58);
}
.demo-feedback-dialog .demo-feedback-tag{
  display:inline-flex;
  margin-bottom:13px;
  padding:6px 9px;
  border:1px solid rgba(212,90,50,.27);
  border-radius:999px;
  background:rgba(212,90,50,.12);
  color:#efa086;
  font-size:8px;
  font-weight:900;
  letter-spacing:.15em;
}
.demo-feedback-dialog h3{margin:0 40px 9px 0!important;font-size:clamp(21px,4vw,28px)!important}
.demo-feedback-dialog p{margin:0!important;color:var(--nbp-muted,#929c96)!important;font-size:13px;line-height:1.62}
.demo-feedback-dialog button{
  width:100%;
  min-height:46px;
  margin-top:20px;
  border:1px solid rgba(212,90,50,.42);
  border-radius:14px;
  background:linear-gradient(135deg,#d45a32,#a83625);
  color:#fff;
  font-weight:850;
}
.demo-feedback-dialog-close{
  position:absolute;
  top:14px;
  right:14px;
  width:36px!important;
  min-height:36px!important;
  margin:0!important;
  padding:0!important;
  border-color:var(--nbp-line,rgba(239,244,240,.09))!important;
  background:rgba(255,255,255,.04)!important;
  font-size:20px;
}

@media (max-width:480px){
  .demo-capability-note{padding:12px;gap:9px}
  .demo-capability-note p{font-size:10px}
  .demo-feedback-dialog{padding:21px 18px;border-radius:21px}
}

/* Em tablets, os controles do cabeçalho permanecem compactos e lado a lado. */
@media (min-width:681px) and (max-width:1080px){
  body:not(.auth-locked) .hero-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    flex-wrap:wrap!important;
    gap:9px!important;
  }
  body:not(.auth-locked) .hero-actions>*{
    width:auto!important;
    min-width:0!important;
    flex:0 0 auto!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }
  body:not(.auth-locked) .hero-actions .profile-chip{min-width:170px!important}
}