/* TwisterBoost global: navegacion legible y responsive final */
*{box-sizing:border-box}
html,body{
  max-width:100% !important;
  overflow-x:hidden !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video,canvas,iframe{
  max-width:100% !important;
}

/* Contenedores seguros para laptop y movil */
.container,.wrap,.page,.shell,.main,.content,.tbShell,.tbMain,.tbContent,.adminShell,.adminMain{
  max-width:100% !important;
}
.tbMain,.content,.main,.adminMain{
  min-width:0 !important;
}
.card,.panel,.box,.section,.tbTopbar,.toolbar{
  max-width:100% !important;
}

/* Botones generales mas legibles */
button,.btn,.topBtn,.menuBtn,.quickBtn,a.btn,
.btnBlue,.btnGreen,.btnGray,.btnRed{
  font-size:15px !important;
  font-weight:900 !important;
  line-height:1.15 !important;
}

/* Menus laterales y superiores */
.tbNav button,
.nav button,
.sidebar button,
.side button,
.menu button{
  min-height:48px !important;
  padding:12px 14px !important;
  font-size:15px !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  border-radius:10px !important;
  display:flex !important;
  align-items:center !important;
  gap:11px !important;
}

.tbNav a,
.nav a,
.topnav a,
.navbar a,
header nav a{
  min-height:42px !important;
  padding:11px 15px !important;
  font-size:15.5px !important;
  line-height:1 !important;
  font-weight:900 !important;
  border-radius:10px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Barras inferiores de navegacion: cliente, saldo, historial, soporte, etc. */
.tbMobileBar,
.mobileBar,
.mobile-nav,
.bottomNav,
.bottom-nav,
.bottomTabs,
.bottom-tabs,
.tabbar,
.navBottom,
.nav-bottom{
  min-height:86px !important;
  padding:10px !important;
  gap:8px !important;
  border-radius:16px !important;
  max-width:min(760px, calc(100vw - 20px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.tbMobileBar button,
.mobileBar button,
.mobile-nav button,
.bottomNav button,
.bottom-nav button,
.bottomTabs button,
.bottom-tabs button,
.tabbar button,
.navBottom button,
.nav-bottom button,
.tbMobileBar a,
.mobileBar a,
.mobile-nav a,
.bottomNav a,
.bottom-nav a,
.bottomTabs a,
.bottom-tabs a,
.tabbar a,
.navBottom a,
.nav-bottom a{
  min-height:62px !important;
  padding:9px 8px !important;
  margin:0 !important;
  border-radius:12px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  font-size:14px !important;
  line-height:1.05 !important;
  font-weight:950 !important;
  letter-spacing:0 !important;
  text-align:center !important;
  white-space:normal !important;
  min-width:0 !important;
}

.tbMobileBar svg,
.mobileBar svg,
.mobile-nav svg,
.bottomNav svg,
.bottom-nav svg,
.bottomTabs svg,
.bottom-tabs svg,
.tabbar svg,
.navBottom svg,
.nav-bottom svg,
.tbMobileBar i,
.mobileBar i,
.mobile-nav i,
.bottomNav i,
.bottom-nav i,
.bottomTabs i,
.bottom-tabs i,
.tabbar i,
.navBottom i,
.nav-bottom i{
  width:24px !important;
  height:24px !important;
  font-size:24px !important;
  line-height:1 !important;
  margin:0 !important;
  flex:0 0 auto !important;
}

/* Titulos y textos base */
h1{overflow-wrap:break-word}
h2,h3{line-height:1.15}
.small,.sub,.muted,.hint{
  line-height:1.45 !important;
}

/* Tablas/listados no deben romper pantalla */
table{
  max-width:100% !important;
}
.tableWrap,.table-wrapper,.listWrap,.list-wrapper{
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
}

@media(max-width:1180px){
  .quickGrid,.grid,.cardsGrid,.featureGrid,.adminGrid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:980px){
  .tbShell,.adminShell{
    grid-template-columns:1fr !important;
  }
  .tbSidebar,.adminSidebar,.sidebar{
    display:none !important;
  }
  .tbTopbar,.topbar,.header{
    max-width:calc(100vw - 20px) !important;
  }
  .quickGrid,.grid,.cardsGrid,.featureGrid,.adminGrid,.accountGrid,.clienteAlertGrid,.entregasGrid{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:620px){
  body{
    font-size:16px !important;
  }
  .container,.wrap,.page,.tbContent,.content,.main{
    width:100% !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
  button,.btn,.topBtn,.menuBtn,.quickBtn,a.btn,
  .btnBlue,.btnGreen,.btnGray,.btnRed{
    min-height:48px !important;
    font-size:15px !important;
  }
  .tbMobileBar,
  .mobileBar,
  .mobile-nav,
  .bottomNav,
  .bottom-nav,
  .bottomTabs,
  .bottom-tabs,
  .tabbar,
  .navBottom,
  .nav-bottom{
    left:8px !important;
    right:8px !important;
    bottom:8px !important;
    max-width:calc(100vw - 16px) !important;
    min-height:78px !important;
    padding:8px !important;
    gap:5px !important;
  }
  .tbMobileBar button,
  .mobileBar button,
  .mobile-nav button,
  .bottomNav button,
  .bottom-nav button,
  .bottomTabs button,
  .bottom-tabs button,
  .tabbar button,
  .navBottom button,
  .nav-bottom button,
  .tbMobileBar a,
  .mobileBar a,
  .mobile-nav a,
  .bottomNav a,
  .bottom-nav a,
  .bottomTabs a,
  .bottom-tabs a,
  .tabbar a,
  .navBottom a,
  .nav-bottom a{
    min-height:58px !important;
    padding:8px 4px !important;
    font-size:12.5px !important;
    gap:5px !important;
  }
  .tbMobileBar svg,
  .mobileBar svg,
  .mobile-nav svg,
  .bottomNav svg,
  .bottom-nav svg,
  .bottomTabs svg,
  .bottom-tabs svg,
  .tabbar svg,
  .navBottom svg,
  .nav-bottom svg,
  .tbMobileBar i,
  .mobileBar i,
  .mobile-nav i,
  .bottomNav i,
  .bottom-nav i,
  .bottomTabs i,
  .bottom-tabs i,
  .tabbar i,
  .navBottom i,
  .nav-bottom i{
    width:21px !important;
    height:21px !important;
    font-size:21px !important;
  }
}

@media(max-width:380px){
  .tbMobileBar button,
  .mobileBar button,
  .mobile-nav button,
  .bottomNav button,
  .bottom-nav button,
  .bottomTabs button,
  .bottom-tabs button,
  .tabbar button,
  .navBottom button,
  .nav-bottom button,
  .tbMobileBar a,
  .mobileBar a,
  .mobile-nav a,
  .bottomNav a,
  .bottom-nav a,
  .bottomTabs a,
  .bottom-tabs a,
  .tabbar a,
  .navBottom a,
  .nav-bottom a{
    font-size:11.5px !important;
  }
}