/* TwisterBoost mobile global layer.
   This file only changes layout on tablets/phones. It does not touch logic. */

@media (max-width: 860px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100% !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  body {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

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

  img,
  video,
  canvas {
    height: auto !important;
  }

  iframe {
    max-width: 100% !important;
  }

  h1,
  .title,
  .tbTopTitle,
  .heroTitle,
  .pageTitle {
    font-size: clamp(25px, 8vw, 34px) !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  h2 {
    font-size: clamp(21px, 6.4vw, 28px) !important;
    line-height: 1.14 !important;
  }

  h3 {
    font-size: 19px !important;
    line-height: 1.18 !important;
  }

  p,
  .small,
  .sub,
  .subtitle,
  .muted,
  .tbTopSub {
    line-height: 1.45 !important;
  }

  /* Page shells: convert desktop grids into real phone pages. */
  .shell,
  .tbShell,
  .layout,
  .appShell,
  .app-shell,
  .dashboardShell,
  .adminShell,
  .panelShell {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 100dvh !important;
  }

  .main,
  .tbMain,
  main,
  .content,
  .container,
  .page,
  .page-content,
  .adminMain,
  .panelMain,
  #app {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 14px !important;
  }

  body:has(.tbMobileBar) .tbMain,
  body:has(.mobileBar) .tbMain,
  body:has(.bottomNav) .tbMain {
    padding-bottom: 92px !important;
  }

  /* Sidebars. In cliente we hide the sidebar because it already has bottom nav.
     In gaming/admin we turn sidebars into compact horizontal menus. */
  body:has(.tbMobileBar) .tbSidebar {
    display: none !important;
  }

  .side,
  .sidebar,
  .tbSidebar,
  aside,
  nav.side {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 14px !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, .20) !important;
  }

  .side .brand,
  .sidebar .brand,
  .tbSidebar .brand,
  .side h1,
  .tbSidebar h1 {
    margin-bottom: 12px !important;
  }

  .nav,
  .side nav,
  .sidebar nav,
  .tbNav,
  .side .nav,
  .tbSidebar .nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 8px !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity !important;
  }

  .nav button,
  .nav a,
  .side nav button,
  .side nav a,
  .sidebar nav button,
  .sidebar nav a,
  .tbNav button,
  .tbNav a,
  .tbSidebar button,
  .tbSidebar a {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 136px !important;
    max-width: 210px !important;
    min-height: 42px !important;
    white-space: normal !important;
    text-align: left !important;
    scroll-snap-align: start !important;
  }

  .navTitle,
  .tbNavTitle,
  .side .navTitle,
  .tbSidebar .navTitle {
    margin: 10px 0 7px !important;
    font-size: 11px !important;
  }

  /* Top sections and headers. */
  .top,
  .header,
  .topbar,
  .tbTopbar,
  .hero,
  .heroWrap,
  .hero-card,
  .landingHero,
  .pageHero {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 14px !important;
    padding: 14px !important;
    border-radius: 16px !important;
  }

  .tbTopLeft,
  .topLeft,
  .headerLeft,
  .heroLeft {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .tbTopSaldo,
  .balancePill,
  .saldoBox,
  .walletBox,
  .topActions {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
  }

  .topActions,
  .actions,
  .row,
  .dashboardActions,
  .detalleControls,
  .tbActionRow,
  .cleanActions,
  .buttonRow,
  .btnRow,
  .formActions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* Cards and panels. */
  .card,
  .panel,
  .box,
  .section,
  .menuCard,
  .quickBtn,
  .item,
  .stat,
  .accountBox,
  .clienteAlert,
  .detalleProducto,
  .entregaCard,
  .compraItem,
  .adminFlowShell,
  .adminFlowModule,
  .modal,
  .modal-content,
  .authCard {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 15px !important;
    border-radius: 16px !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  .quickBtn {
    min-height: 96px !important;
    display: grid !important;
    grid-template-columns: 38px 1fr !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .quickBtn .tbxIcon,
  .menuBtn .tbxIcon,
  .tbxIcon {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }

  .quickBtn b,
  .quickBtn strong,
  .menuBtn b,
  .menuBtn strong {
    font-size: 16px !important;
    line-height: 1.15 !important;
  }

  .quickBtn span,
  .quickBtn p,
  .menuBtn span,
  .menuBtn p {
    font-size: 12px !important;
    line-height: 1.38 !important;
  }

  /* Grids: one column, no tiny boxes. */
  .grid,
  .grid2,
  .statsGrid,
  .metaGrid,
  .cleanGrid,
  .quickGrid,
  .catalogGrid,
  .productGrid,
  .offersGrid,
  .clienteAlertGrid,
  .accountGrid,
  .entregasGrid,
  .cardsGrid,
  .dashboardGrid,
  .selectionLayout,
  .heroGrid,
  .featuresGrid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* Gaming/catalog pages. */
  .catalog,
  .gameGrid,
  .gamesGrid,
  .categoryGrid,
  .offerGrid,
  .productsGrid,
  .products,
  .categories {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 13px !important;
    width: 100% !important;
  }

  .catalog .item,
  .gameCard,
  .offerCard,
  .productCard,
  .categoryCard {
    min-height: auto !important;
    width: 100% !important;
  }

  .catalog .item img,
  .gameCard img,
  .offerCard img,
  .productCard img,
  .categoryCard img {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
  }

  .toolbar,
  .searchRow,
  .filterRow {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .countPill,
  .statusPill {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Recargar saldo. */
  .amountBox,
  .amountInput,
  .amountInputWrap,
  .moneyBox,
  .moneyInput {
    display: grid !important;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .amountBox input,
  .amountInput input,
  .amountInputWrap input,
  .moneyBox input,
  .moneyInput input {
    width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
    font-size: clamp(24px, 8vw, 32px) !important;
  }

  .presetGrid,
  .amountPresets,
  .presetRow {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .methods,
  .paymentMethods {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .method,
  .paymentMethod {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 66px !important;
  }

  .methodIcon,
  .paymentIcon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
  }

  #binanceUid,
  #bankText,
  .copyRow,
  .payDataRow {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  /* Forms and buttons. */
  button,
  .btn,
  .btnTop,
  input,
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
  }

  button,
  .btn,
  .btnTop,
  a.btn,
  input[type="button"],
  input[type="submit"] {
    min-height: 46px !important;
    white-space: normal !important;
    text-align: center !important;
  }

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

  label {
    display: block !important;
    margin-bottom: 7px !important;
  }

  /* Tables and long lists: scroll only inside the table, not the whole phone page. */
  .tableWrap,
  .table-wrapper,
  .listWrap,
  .adminFlowList,
  #listaClientes,
  #listaPendientes,
  #listaHistorial,
  #productosLista,
  #productosStreamingLista,
  #clientesList,
  #historialList,
  #ordersList {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  table {
    width: 100% !important;
    min-width: 650px !important;
  }

  /* Admin flow created in earlier scripts. */
  .adminFlowTop {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

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

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

  .adminFlowNav button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 145px !important;
    max-width: 210px !important;
    background: #17263d !important;
    color: #edf5ff !important;
    border-color: rgba(111, 150, 201, .52) !important;
  }

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

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

  .adminFlowPagerInfo {
    order: -1 !important;
  }

  .adminFlowPager button {
    background: #17263d !important;
    color: #edf5ff !important;
    border-color: rgba(111, 150, 201, .52) !important;
  }

  /* Cliente bottom bar. */
  .tbMobileBar,
  .mobileBar,
  .bottomNav {
    position: fixed !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    z-index: 9999 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: auto !important;
    max-width: none !important;
    padding: 8px !important;
    border-radius: 18px !important;
  }

  .tbMobileBar button,
  .mobileBar button,
  .bottomNav button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 6px 3px !important;
    font-size: 10.5px !important;
    line-height: 1.12 !important;
  }

  .tbMobileBar svg,
  .mobileBar svg,
  .bottomNav svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* Floating and fixed desktop objects should not cover phone content. */
  .floating,
  .desktopOnly,
  .desktop-only {
    max-width: 100% !important;
  }
}

@media (max-width: 520px) {
  .main,
  .tbMain,
  main,
  .content,
  .container,
  .page,
  .page-content,
  .adminMain,
  .panelMain,
  #app {
    padding: 11px !important;
  }

  .card,
  .panel,
  .box,
  .section,
  .menuCard,
  .quickBtn,
  .item,
  .stat,
  .accountBox,
  .clienteAlert,
  .detalleProducto,
  .entregaCard,
  .compraItem,
  .adminFlowShell,
  .adminFlowModule,
  .authCard {
    padding: 13px !important;
    border-radius: 14px !important;
  }

  .presetGrid,
  .amountPresets,
  .presetRow {
    grid-template-columns: 1fr 1fr !important;
  }

  .amountBox,
  .amountInput,
  .amountInputWrap,
  .moneyBox,
  .moneyInput {
    grid-template-columns: 78px minmax(0, 1fr) !important;
  }

  .method,
  .paymentMethod {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }

  .quickBtn {
    grid-template-columns: 34px 1fr !important;
  }

  .adminFlowActions {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 390px) {
  .tbMobileBar,
  .mobileBar,
  .bottomNav {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 7px !important;
  }

  .tbMobileBar button,
  .mobileBar button,
  .bottomNav button {
    font-size: 9.5px !important;
    min-height: 45px !important;
  }
}