/* ================================================================
   SERVERLYX — RESPONSIVE GLOBAL
   Breakpoints: 1024px (laptop), 768px (tablet), 480px (mobile)
   ================================================================ */

/* ── Hamburger button (inyectado por mobile-nav.js) ─────────────── */
.ham-btn {
  display: none;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  cursor: pointer;
  margin-right: 8px;
  padding: 0;
  transition: border-color 0.18s, background 0.18s;
}
.ham-btn:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.2); }
.ham-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: #e8eaf0;
  border-radius: 2px;
  transition: 0.2s;
  pointer-events: none;
}

/* ── Overlay ────────────────────────────────────────────────────── */
.mob-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 998;
  -webkit-tap-highlight-color: transparent;
}
.mob-overlay.open { display: block; }

/* ── Mobile drawer ──────────────────────────────────────────────── */
.mob-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: min(300px, 88vw);
  height: 100vh;
  height: 100dvh;
  background: #0f1218;
  border-left: 1px solid rgba(255,255,255,0.08);
  z-index: 999;
  display: flex;
  flex-direction: column;
  transition: right 0.26s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  box-shadow: -8px 0 32px rgba(0,0,0,0.5);
}
.mob-drawer.open { right: 0; }

.mob-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.mob-drawer-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #e8a030;
}
.mob-drawer-close {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: #8890a8;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.15s;
  line-height: 1;
}
.mob-drawer-close:hover { background: #1e2535; color: #e8eaf0; }

.mob-drawer-nav {
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 2px;
  flex: 1;
}
.mob-drawer-nav a {
  display: block;
  padding: 11px 14px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #8890a8;
  text-decoration: none;
  border-radius: 8px;
  transition: 0.15s;
}
.mob-drawer-nav a:hover  { background: #1e2535; color: #e8eaf0; }
.mob-drawer-nav a.active { color: #e8a030; background: rgba(232,160,48,0.08); }
.mob-drawer-sep {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 8px 4px;
}

/* ================================================================
   NAV — consistencia global: mismo font, padding reducido,
   el texto puede hacer wrap en 2 líneas (estilo imagen de referencia)
   ================================================================ */
.nav a {
  padding: 6px 11px !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  line-height: 1.25 !important;
}

/* ================================================================
   BREAKPOINT: LAPTOP / TABLET LANDSCAPE  (≤ 1024px)
   ================================================================ */
@media (max-width: 1024px) {
  .topbar           { padding: 0 12px !important; }
  .logo             { margin-right: 8px !important; }
  .nav a            { padding: 5px 8px !important; font-size: 13px !important; }
  .topbar-searchbar { flex: 0 0 150px !important; margin: 0 8px !important; }
}

/* ================================================================
   BREAKPOINT: TABLET  (≤ 768px)
   ================================================================ */
@media (max-width: 768px) {
  /* Mostrar hamburger */
  .ham-btn { display: flex; }

  /* Ocultar nav principal */
  .nav, .dash-nav { display: none !important; }

  /* Banners laterales — ocultar (ya lo hace banners.css a 1150px,
     pero aquí forzamos por si alguna página no carga banners.css) */
  .side-banners { display: none !important; }

  /* Topbar */
  .topbar        { padding: 0 12px !important; }
  .topbar-inner  { height: 60px !important; }
  .logo img      { height: 46px !important; }

  /* Ocultar elementos de topbar que no caben */
  .topbar-searchbar { display: none !important; }

  /* Ajustar topbar-right */
  .topbar-right   { gap: 6px !important; }

  /* Dashboard layout: ya colapsa a 900px, pero aseguramos sidebar oculta */
  .dash-sidebar   { display: none !important; }
  .dash-layout    { padding: 16px 12px !important; }

  /* Secciones de página con max-width */
  .topbar-inner,
  .hero-inner,
  .servers-inner,
  .page-inner,
  .page-hero-inner,
  .footer-inner,
  .breadcrumb-inner,
  .server-hero-inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Grids → 1 columna en tablet */
  .hero-stats { gap: 16px !important; }

  /* Footer: reducir columnas */
  .footer-cols { gap: 24px !important; }
}

/* ================================================================
   BREAKPOINT: MOBILE  (≤ 480px)
   ================================================================ */
@media (max-width: 480px) {
  /* Fuentes y padding generales */
  body { font-size: 14px; }

  .topbar-inner { height: 56px !important; }
  .logo img     { height: 40px !important; }

  /* Ocultar botón Login si hay poco espacio */
  .topbar-right .btn-ghost { display: none !important; }

  /* Tarjetas y cards: padding reducido */
  .card, .sidebar-card, .stat-card { padding: 14px !important; }

  /* Grids de stats */
  .stat-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  /* Modales: ancho completo en móvil pequeño */
  .modal { width: 96vw !important; max-width: 96vw !important; padding: 20px 16px !important; }
}

/* ================================================================
   PREVENCIÓN GLOBAL DE SCROLL HORIZONTAL
   ================================================================ */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
img, video, iframe, embed {
  max-width: 100%;
}