/* A.A.M v21.4.87 — camada de estabilidade visual
   Correções defensivas, sem redesenhar a interface. */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  color-scheme:dark;
  background:#070707;
}
*,*::before,*::after{box-sizing:border-box}
body{
  min-height:100dvh;
  margin:0;
  background-color:#070707;
  overflow-wrap:break-word;
}
img,svg,video,canvas{max-width:100%}
input,select,textarea,button{max-width:100%}
/* Evita que flex/grid longos empurrem a tela para fora no celular. */
.wrap,.page,.card,.panel,.row,.toolbar,.form,.field-grid,.dash,.kpis,.statusgrid,.finance-grid{min-width:0}
.row>*,.toolbar>*,.form>*,.field-grid>*,.dash>*,.kpis>*,.statusgrid>*,.finance-grid>*{min-width:0}
/* Mantém a navegação estável e rolável quando necessário. */
.nav-shell .nav{scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav-shell .nav::-webkit-scrollbar{display:none}
.nav-shell .nav button{white-space:nowrap}
/* Modais do sistema permanecem escuros; documentos/assinatura mantêm fundo próprio. */
.modal:not(#documentModal):not(#operationalReportsModal),
.modal-backdrop,.dialog-backdrop{background-color:rgba(0,0,0,.72)}
.modal-content,.dialog,.sheet{background-color:#0f0e0b;color:#f4f1e8}
/* Previne zoom/reflow causado por fonte pequena em campos no iOS/Android WebView. */
@media(max-width:760px){
  input,select,textarea{font-size:max(16px,1rem)}
  .wrap{max-width:100%;overflow-x:clip}
  .card,.panel,.modal-content,.dialog,.sheet{max-width:100%}
}
/* O modo desktop forçado pode rolar horizontalmente por escolha do usuário;
   fora dele, a aplicação não deve criar rolagem lateral acidental. */
html:not([data-aam-interface="desktop"]),
html:not([data-aam-interface="desktop"]) body{overflow-x:hidden}


/* v21.4.87 — acabamento de experiência e acessibilidade */
button, .btn, [role="button"]{
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible, .btn:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:2px solid #d5a535;
  outline-offset:2px;
}
button[aria-label="Fechar"]{
  min-width:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
@media (max-width:520px){
  .title > .btn,
  .admin-page-title > .btn{
    min-height:42px;
  }
  .aam-settings-content .row{
    gap:12px;
  }
  .aam-settings-content .row > .btn,
  .aam-settings-content .row > a.btn{
    flex:0 0 auto;
  }
}

/* v21.5.5 — compatibilidade iPhone/Safari e modais responsivos
   Corrige controles radio/checkbox herdando width:100% e impede modais de
   ultrapassarem a viewport quando o modo "Computador" estiver salvo no celular. */
input[type="radio"],input[type="checkbox"]{
  width:auto;
  max-width:none;
  padding:0;
}
.payment-option>input[type="radio"]{
  flex:0 0 22px;
  width:22px!important;
  height:22px!important;
  min-width:22px;
  max-width:22px;
  margin:1px 0 0;
  padding:0;
}
.payment-option>span{
  flex:1 1 auto;
  width:auto;
  min-width:0;
  max-width:100%;
}

@media (max-width:760px){
  dialog.modal:not(.fullscreen){
    width:calc(100vw - 24px)!important;
    max-width:calc(100vw - 24px)!important;
    min-width:0!important;
    max-height:calc(100dvh - 24px)!important;
    margin:auto!important;
    inset-inline:0!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  dialog.modal:not(.fullscreen)>form{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
  }
  #payModal .mhead{
    width:100%;
    min-width:0;
    gap:12px;
  }
  #payModal .mhead h2{
    min-width:0;
    margin-right:auto;
    font-size:clamp(1.25rem,6vw,1.65rem);
    line-height:1.15;
    overflow-wrap:anywhere;
  }
  #payModal .payment-choice{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    grid-template-columns:minmax(0,1fr)!important;
  }
  #payModal .payment-option{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    align-items:flex-start!important;
    overflow:hidden;
  }
  #payModal .payment-option strong,
  #payModal .payment-option small{
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  #payModal .payment-form-grid{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    grid-template-columns:minmax(0,1fr)!important;
  }
  #payModal .payment-form-grid>*{
    min-width:0!important;
    max-width:100%!important;
    grid-column:auto!important;
  }
  #payModal .payment-breakdown{
    grid-template-columns:minmax(0,1fr)!important;
  }
  #payModal input,#payModal select,#payModal textarea{
    min-width:0!important;
    max-width:100%!important;
  }
}

/* Safari/iOS: respeita as áreas seguras e neutraliza o min-width do modo desktop
   somente para dialogs, sem alterar a interface escolhida pelo usuário. */
html.aam-ios dialog.modal:not(.fullscreen){
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
@media (max-width:760px){
  html.aam-ios[data-aam-interface="desktop"] dialog.modal:not(.fullscreen){
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
    min-width:0!important;
    margin:auto!important;
  }
}


/* v21.5.6 — pagamento personalizado totalmente manual */
#payModal .custom-payment-fields{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  padding:14px;
  margin:2px 0 4px;
  border:1px solid rgba(213,165,53,.26);
  border-radius:14px;
  background:rgba(213,165,53,.055);
}
#payModal .custom-payment-fields[hidden]{display:none!important}
#payModal .custom-payment-fields label{min-width:0}
#payModal .custom-payment-fields input{width:100%;max-width:100%;box-sizing:border-box}
@media (max-width:720px){
  #payModal .custom-payment-fields{grid-template-columns:1fr}
}


/* v21.5.7 — campos manuais inequívocos no pagamento personalizado */
#payModal #customPaymentFields:not([hidden]){display:grid!important}
#payModal #customPaymentFields label{display:flex!important;flex-direction:column!important;gap:7px!important}
#payModal #customPaymentFields input{display:block!important;opacity:1!important;visibility:visible!important;min-height:48px!important}