/* TwisterBoost mobile fix: solo pantallas pequeñas */
@media (max-width: 820px){
  html,body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  body{
    -webkit-text-size-adjust:100%;
  }

  .container{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:10px !important;
    box-sizing:border-box !important;
  }

  .header{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
    width:100% !important;
    margin:0 0 10px !important;
    padding:12px !important;
    border-radius:14px !important;
    box-sizing:border-box !important;
  }

  .title{
    font-size:clamp(20px,7vw,28px) !important;
    line-height:1.08 !important;
    word-break:break-word !important;
  }

  .subtitle{
    font-size:12px !important;
    line-height:1.35 !important;
  }

  .header .row,
  .row,
  .dashboardActions,
  .detalleControls,
  .tbActionRow,
  .cleanActions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    width:100% !important;
  }

  button,
  .btnTop,
  input,
  select,
  textarea{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    font-size:16px !important;
  }

  button,
  .btnTop{
    min-height:44px !important;
    white-space:normal !important;
  }

  input,
  select,
  textarea{
    min-height:44px !important;
  }

  .card,
  .menuCard,
  .item,
  .stat,
  .accountBox,
  .clienteAlert,
  .adminFlowModule{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding:14px !important;
    border-radius:14px !important;
    box-sizing:border-box !important;
    word-break:break-word !important;
  }

  .grid,
  .statsGrid,
  .metaGrid,
  .cleanGrid,
  .quickGrid,
  .catalogGrid,
  .productGrid,
  .offersGrid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .statValue{
    font-size:20px !important;
  }

  /* Admin V2: en celular la navegacion debe ser tipo carrusel, no una pared de botones */
  .adminFlowShell{
    width:100% !important;
    margin:10px 0 12px !important;
    padding:10px !important;
    border-radius:14px !important;
    box-sizing:border-box !important;
  }

  .adminFlowTop{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
  }

  .adminFlowActions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    width:100% !important;
  }

  .adminFlowActions button,
  .adminFlowNav button,
  .adminFlowPager button{
    background:#15243a !important;
    color:#eaf2ff !important;
    border-color:rgba(91,132,179,.58) !important;
  }

  .adminFlowNav{
    display:flex !important;
    grid-template-columns:none !important;
    gap:8px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:2px 0 8px !important;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }

  .adminFlowNav button{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:138px !important;
    max-width:190px !important;
    min-height:42px !important;
    padding:9px 12px !important;
    scroll-snap-align:start;
  }

  .adminFlowNav button.active{
    background:linear-gradient(135deg,#4377ff,#19a9d2) !important;
    color:#fff !important;
  }

  .adminFlowModule{
    margin-top:10px !important;
  }

  .adminFlowPager{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .adminFlowPagerInfo{
    order:-1;
  }

  /* Tablas y listados: no romper el ancho del celular */
  .tableWrap,
  .adminFlowList,
  #listaClientes,
  #listaPendientes,
  #listaHistorial,
  #productosLista,
  #productosStreamingLista,
  #stockStreamingLista,
  #listaSolicitudes,
  #listaUsuarios,
  #listaTickets,
  #listaVentas,
  #listaSuscripciones,
  #listaRecargasAdmin,
  #listaClaves,
  #clienteSuscripciones,
  #clienteCompras,
  #clienteRecargas,
  #clienteRecargasAdmin,
  #tablaFechas,
  #tablaProductos,
  #tablaClientes,
  #tablaPlataformas,
  #tablaDetalle{
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  table{
    min-width:640px !important;
  }

  th,td{
    font-size:12px !important;
    padding:8px !important;
  }

  img,
  video,
  canvas{
    max-width:100% !important;
    height:auto !important;
  }

  .productRow{
    display:grid !important;
    grid-template-columns:74px minmax(0,1fr) !important;
    gap:10px !important;
  }

  .productImage{
    max-height:140px !important;
  }

  /* Cliente y gaming */
  .tbShell{
    display:block !important;
    grid-template-columns:1fr !important;
  }

  .tbSidebar{
    display:none !important;
  }

  .tbMain,
  .tbContent,
  main,
  .main,
  .content{
    width:100% !important;
    max-width:100% !important;
    padding-left:10px !important;
    padding-right:10px !important;
    box-sizing:border-box !important;
  }

  .tbTopbar{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    min-height:auto !important;
    padding:12px !important;
  }

  .tbTopLeft{
    min-width:0 !important;
    flex:1 1 100% !important;
  }

  .tbTopSaldo{
    width:100% !important;
    min-width:0 !important;
    justify-content:flex-start !important;
  }

  .quickBtn{
    min-height:98px !important;
  }

  .tbMobileBar{
    left:8px !important;
    right:8px !important;
    bottom:8px !important;
    width:auto !important;
    max-width:none !important;
    overflow:hidden !important;
  }

  .tbMobileBar button{
    font-size:10px !important;
    min-height:44px !important;
    padding:7px 3px !important;
  }
}

@media (max-width: 480px){
  .adminFlowActions{
    grid-template-columns:1fr !important;
  }

  .adminFlowNav button{
    min-width:126px !important;
    max-width:165px !important;
    font-size:13px !important;
  }

  .card h3,
  .adminFlowModule > h3:first-child{
    font-size:18px !important;
  }

  .title{
    font-size:22px !important;
  }

  .subtitle{
    display:block !important;
  }
}