/* Fijas de Élite v2.0.3 — viewport móvil seguro.
   Evita el desplazamiento lateral del documento SIN bloquear el scroll
   horizontal deliberado de los menús de navegación. */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; /* compatibilidad con navegadores móviles antiguos */
  overflow-x: clip;   /* sin desplazamiento horizontal del documento */
}

/* Los hijos de flex y grid nunca deben ensanchar la página. */
#dashboard, #customer-area,
#dashboard .admin-shell, #dashboard .admin-sidebar, #dashboard .admin-content,
.client-shell, .client-sidebar, .client-content,
.auth-layout, .customer-area,
#dashboard [data-panel], .client-panel,
.client-payment-layout, .client-form-card, .client-payment-info,
.telegram-client-grid, .telegram-client-card,
.vip-summary, .vip-head, .client-welcome,
#vipPanel, #financePanel, #staffPanel,
.client-memberships, .membership-group, .membership-card {
  min-width: 0;
  max-width: 100%;
}

#dashboard .admin-content, .client-content,
#dashboard .card, .client-panel,
.client-memberships, .telegram-client-card {
  overflow-wrap: anywhere;
}

/* Evita que emails, IDs, urls o errores del API se salgan de una tarjeta. */
#dashboard .card *, .client-panel *, .auth-card *,
#dashboard .heading *, .client-welcome * {
  min-width: 0;
}
#dashboard input, #dashboard textarea, #dashboard select,
.client-content input, .client-content textarea, .client-content select,
.auth-card input, .auth-card textarea, .auth-card select {
  max-width: 100%;
}
pre, code {max-width:100%;overflow-wrap:anywhere}
pre {overflow-x:auto;white-space:pre-wrap}
img, video, iframe {max-width:100%;height:auto}

/* Decoración de la landing: los círculos absolutos de 800/420px
   sobresalían a la derecha y creaban un ancho de página fantasma. */
.ambient {right:0;max-width:100%;}
.hero-visual .orb-one {width:min(370px,100%);height:auto;aspect-ratio:1;}
.hero-visual .orb-two {width:min(420px,100%);height:auto;aspect-ratio:1;}

@media (max-width:700px) {
  #dashboard .admin-shell, .client-shell,
  #dashboard .admin-content, .client-content,
  #dashboard .card, .client-panel {
    width: 100%;
  }
  #dashboard .admin-content, .client-content {padding-left:14px;padding-right:14px;}
  #dashboard .admin-nav, .client-nav {
    min-width:0;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }
  /* Estos controles sí pueden desplazarse dentro del menú, no en la página. */
  #dashboard .admin-nav button, .client-nav button {flex-shrink:0;}
  #dashboard .heading, .client-welcome {flex-wrap:wrap;}
  #dashboard .stats, .client-panel .vip-stats {grid-template-columns:repeat(2,minmax(0,1fr));}
  #vipPanel .vip-search-results,
  .finance-cards, .finance-panels, .my-vip-picks,
  .telegram-admin-cards, .telegram-client-grid,
  .client-payment-layout, .client-panel .customer-picks,
  #vipPanel .vip-action-grid {
    grid-template-columns:minmax(0,1fr);
  }
  #dashboard .vip-selected, #dashboard .vip-heading {min-width:0;}
  #dashboard .vip-trust {white-space:normal;overflow-wrap:anywhere;}
  #dashboard .staff-controls {min-width:0;max-width:100%;}
  #dashboard .staff-controls button,
  #dashboard .vip-search-row button,
  #dashboard .vip-action button,
  .telegram-client-card button,
  .telegram-client-card .telegram-action {
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .client-form-card, .client-payment-info, .telegram-client-card {
    padding:clamp(14px,4vw,24px);
  }
  .client-shortcuts, .client-panel .customer-picks {grid-template-columns:minmax(0,1fr);}
}

@media(max-width:360px) {
  .topbar {gap:8px;padding-left:12px;padding-right:12px;}
  .topbar .logo {min-width:0;white-space:normal;font-size:10px;gap:6px;line-height:1.25;}
  .topbar .logo-mark {width:30px;height:30px;flex-shrink:0;}
  .topbar .nav-cta {flex:0 0 auto;padding:8px 8px;font-size:10px;}
  .topbar .nav-cta span {padding-left:4px;}

  #dashboard .admin-content, .client-content {padding-left:10px;padding-right:10px;}
  #dashboard .card, .membership-group {padding:14px;}
  #dashboard .stats article {padding:12px;}
  #dashboard .stats strong, .vip-stat strong {font-size:clamp(20px,7vw,28px);}
  .client-welcome {align-items:flex-start;}
  .client-panel .vip-summary {padding:15px;}
  .client-brand, #dashboard .side-brand {letter-spacing:0;}
}