/* PROCORBAN V8.1 - Financeiro */
.sidebar{overflow-y:auto;overscroll-behavior:contain}
.sidebar nav{flex-shrink:0}
.sidebar .nav-title.nav-section-heading{font-size:10px;letter-spacing:.13em;color:#a9a8d6;margin:14px 0 3px;padding:8px 14px 2px;border-top:1px solid rgba(214,214,255,.10)}
.sidebar nav .nav-section-heading:first-child{border-top:0;margin-top:0}
.sidebar .nav-title.nav-section-heading+ a{margin-top:3px}
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.pay-selection{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;max-width:700px}
.pay-selection label,.pay-form label{display:grid;gap:8px;font-weight:700;font-size:13px;color:#384260}
.pay-selection .btn{height:47px}
.pay-details{display:grid;gap:0;border:1px solid #e3e1f5;background:#fbfaff;border-radius:14px;padding:8px 17px;margin:17px 0}
.pay-details>div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:13px 0;border-bottom:1px solid #eae8f5}
.pay-details>div:last-child{border:0}
.pay-details span{font-size:13px;color:#7a829a}
.pay-details strong{font-size:14px;text-align:right;overflow-wrap:anywhere;word-break:break-word;max-width:65%}
.pay-preview{border:2px solid #d7cfff;background:#faf9ff}
.pay-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:13px}
.pay-response{margin-top:22px}
.pay-response .check{display:flex}
.pay-rejection{border-radius:12px;background:#fff2f1;border:1px solid #f2d0cc;color:#95434a;padding:15px;line-height:1.6;overflow-wrap:anywhere}
.pay-meta{display:flex;gap:13px;align-items:center;flex-wrap:wrap;margin:15px 0}
.pay-meta small{color:#7b839c}
.pay-personal{max-width:960px}
@media(max-width:1100px){.pay-grid{grid-template-columns:1fr}}
@media(max-width:620px){.pay-selection{grid-template-columns:1fr}.pay-selection .btn{width:100%}.pay-details>div{display:grid;gap:5px}.pay-details strong{max-width:100%;text-align:left}.pay-actions .btn{width:100%}}

/* ==========================================================
   PROCORBAN V8.2 — Leitura do menu e conforto no celular
   Ajuste EXCLUSIVAMENTE visual; preserva formulario, permissoes,
   dados, calculos e as classes existentes da V8.1.
   ========================================================== */

/* Identidade das categorias no menu: hierarquia clara sem criar menus novos */
.sidebar nav{display:flex;flex-direction:column;align-items:stretch;gap:3px;min-width:0}
.sidebar .nav-title.nav-section-heading{
  display:flex;align-items:center;gap:9px;
  margin:17px 3px 7px;padding:10px 11px;
  border:1px solid rgba(165,152,249,.24);
  border-left:3px solid #9b88ff;
  border-radius:9px;
  background:linear-gradient(95deg,rgba(133,109,230,.24),rgba(133,109,230,.075));
  color:#f2efff;
  font-size:10.5px;font-weight:850;letter-spacing:.11em;
  line-height:1.35;overflow-wrap:anywhere;
}
.sidebar nav .nav-section-heading:first-child{margin-top:4px;border:1px solid rgba(165,152,249,.24);border-left:3px solid #9b88ff}
.sidebar .nav-title.nav-section-heading::before{
  content:"";flex:none;width:5px;height:5px;border-radius:50%;
  background:#c8b9ff;box-shadow:0 0 0 3px rgba(200,185,255,.13);
}
.sidebar nav a{
  margin:0 3px;padding:11px 12px;
  line-height:1.4;border-radius:9px;
  font-size:13px;font-weight:650;
  color:#dce0f7;
  overflow-wrap:anywhere;
}
.sidebar nav a:hover,.sidebar nav a:focus-visible{
  background:rgba(144,127,245,.19);color:#fff;
}
.sidebar nav a[aria-current="page"]{
  background:rgba(137,118,244,.24);color:#fff;
  box-shadow:inset 3px 0 #a590ff;
}
.sidebar .sidebar-bottom{flex-shrink:0;margin-top:auto}
.sidebar .nav-title:not(.nav-section-heading){color:#aaa9d1;letter-spacing:.14em}

/* Formulário da conta PIX e painéis: sem colunas comprimidas */
.pay-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pay-grid>.surface,.pay-personal,.pay-selection,.pay-form{min-width:0;max-width:100%}
.pay-grid .surface .stack{gap:16px}
.pay-grid .surface .stack label,.pay-selection label,.pay-form label{min-width:0;line-height:1.45}
.pay-grid .surface .stack :is(input,select,textarea),
.pay-selection :is(input,select),.pay-form :is(input,select,textarea){min-width:0;max-width:100%;width:100%}
.pay-grid .surface .stack>.btn{width:100%;min-height:50px}
.pay-details{max-width:100%}
.pay-details strong{overflow-wrap:anywhere}

@media(max-width:1200px){
  .pay-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:850px){
  .sidebar{
    width:min(298px,calc(100vw - 35px));max-width:100%;
    height:100vh;height:100dvh;
    overflow-x:hidden;overflow-y:auto;
    padding:19px 12px 15px;
    overscroll-behavior:contain;
  }
  .sidebar .brand{padding:0 7px 17px}
  .sidebar nav .nav-section-heading{margin-top:13px;margin-bottom:5px}
  .sidebar nav a{padding:10px 11px}
  .sidebar-bottom{padding-bottom:12px}
}
@media(max-width:620px){
  /* Os campos aparecem um abaixo do outro em telas pequenas */
  .main{min-width:0;padding:19px 13px 30px}
  .surface{min-width:0;padding:21px 17px;border-radius:17px;margin-bottom:15px}
  .page-intro{gap:12px;margin-bottom:20px}
  .pay-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
  .pay-grid>.surface{margin-bottom:15px}
  .pay-selection{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
  .pay-selection .btn,.pay-grid .surface .stack>.btn,.pay-form .btn{width:100%;min-height:49px}
  .pay-grid .surface h2,.pay-personal h2{font-size:20px;line-height:1.25}
  .pay-grid .surface p.muted,.pay-personal p.muted{font-size:14px;line-height:1.55}
  .pay-grid .surface .stack{gap:15px}
  .pay-grid .surface .stack :is(input,select,textarea),
  .pay-selection :is(input,select),.pay-form :is(input,select,textarea){
    font-size:16px;min-height:49px;padding:12px 13px;
  }
  .pay-details{padding:6px 13px;margin:14px 0}
  .pay-details>div{display:grid;gap:5px;align-items:start;padding:11px 0}
  .pay-details strong{max-width:100%;text-align:left;font-size:14px}
  .pay-details span{font-size:12px}
  .pay-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
  .pay-actions .btn{width:100%;max-width:100%}
  .table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table-scroll table{width:max-content;min-width:100%}
}
@media(max-width:385px){
  .main{padding:15px 10px 26px}
  .surface{padding:18px 13px}
  .topbar{padding:10px 12px}
  .pay-grid .surface h2{font-size:19px}
}