/* ============================================
   MOBILE OPTIMIZATIONS - Versión limpia
   ============================================ */

/* BASE */
*, *::before, *::after { box-sizing: border-box !important; }
html, body { margin: 0; padding: 0; overflow-x: hidden !important; max-width: 100vw !important; }
svg, img { max-width: 100%; height: auto; }

/* Excepción: tarjeta de presentación mantiene su ancho en desktop */
@media (min-width: 769px) {
  .presentation-card[style*="width: 360px"] {
    width: 360px !important;
    max-width: 360px !important;
    flex-shrink: 0 !important;
  }
  /* Hero business en desktop: fila horizontal */
  .hero-business {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
  }
  .hero-business > .glass-card:first-child {
    flex: 1 !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* ============================================
   TABLET (hasta 1024px)
   ============================================ */
@media (max-width: 1024px) {
  .hero-business .presentation-card { width: 100% !important; max-width: 100% !important; }
  .glass-card > div[style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 15px !important; }
  .glass-card > div[style*="grid-template-columns: 2fr 1fr"] { grid-template-columns: 1fr !important; gap: 20px !important; }
}

/* Fix global: evitar desbordamiento en flex children */
.hero-business > .glass-card {
  min-width: 0;
  overflow: hidden;
}
.hero-business > .presentation-card {
  min-width: 0;
}

/* ============================================
   MÓVIL GRANDE (hasta 768px)
   ============================================ */
@media (max-width: 768px) {
  body { font-size: 14px; overflow-x: hidden !important; }

  /* Contenedores */
  .page, .section-block, .container, main {
    overflow-x: hidden !important; max-width: 100vw !important; width: 100% !important;
  }
  section { padding: 24px 16px !important; width: 100% !important; }

  /* Glass cards */
  .glass-card { border-radius: 16px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }

  /* Navbar */
  .topbar { padding: 12px 16px !important; }
  .brand svg { height: 28px !important; }

  /* Footer */
  .footer { padding: 30px 5% !important; }
  .foot-links { flex-direction: column !important; gap: 12px !important; text-align: center !important; }

  /* Ticker */
  .live-ticker { height: 30px !important; font-size: 0.68rem !important; }
  .ticker-item { padding: 0 16px !important; }

  /* Hero */
  .hero { min-height: 55vh !important; padding: 35px 5% 25px !important; }
  .brand-title { font-size: 2.2rem !important; }
  .hero-copy p { font-size: 0.95rem !important; }
  .cta-grid { flex-direction: column !important; gap: 10px !important; }

  /* Carril de fotos */
  .photo-rail-container { width: 100% !important; aspect-ratio: 1/1 !important; max-height: 320px !important; }

  /* Casino */
  #casino-games-container { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .dynamic-game { aspect-ratio: 0.8/1 !important; padding: 14px !important; }
  .casino-img-box { height: 130px !important; }
  .dynamic-game h3 { font-size: 1rem !important; }
  .dynamic-game p { font-size: 0.72rem !important; }

  /* Pronósticos */
  #admin-codes-container, #community-codes-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }

  /* Agencias */
  #physical-agencies-container, #virtual-agencies-container { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }

  /* Trabaja */
  .hero-business {
    display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
    gap: 16px !important; align-items: stretch !important; width: 100% !important;
  }
  .hero-business > * { width: 100% !important; max-width: 100% !important; flex: none !important; }
  .hero-business [style*="width: 360px"], .hero-business [style*="width: 400px"] { width: 100% !important; max-width: 100% !important; }
  .hero-business [style*="flex-shrink: 0"] { flex-shrink: 1 !important; }
  .hero-business [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 12px !important; }
  .hero-business [style*="grid-template-columns: 2fr 1fr"] { grid-template-columns: 1fr !important; gap: 15px !important; }
  .presentation-card { width: 100% !important; max-width: 100% !important; }
  .service-grid[style*="minmax(300px"], .service-grid[style*="minmax(200px"] { grid-template-columns: 1fr !important; gap: 15px !important; }
  #plan-ecuabet, .hero-business + .glass-card { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }

  /* Dinámicas */
  #sorteos-grid, #eventos-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }

  /* Modales */
  .modal-content { width: 95% !important; padding: 18px !important; border-radius: 16px !important; }

  /* Botones */
  .btn { min-height: 42px !important; padding: 11px 16px !important; font-size: 0.85rem !important; }

  /* Anchos fijos globales */
  [style*="width: 1200px"], [style*="width: 1000px"], [style*="width: 800px"],
  [style*="width: 600px"], [style*="width: 500px"], [style*="width: 400px"] {
    width: 100% !important; max-width: 100% !important;
  }
}

/* ============================================
   MÓVIL (hasta 480px)
   ============================================ */
@media (max-width: 480px) {
  section { padding: 20px 14px !important; }

  /* Hero */
  .hero { min-height: 48vh !important; padding: 28px 5% 20px !important; }
  .brand-title { font-size: 1.8rem !important; line-height: 1.1 !important; }
  .hero-copy h2 { font-size: 1.3rem !important; }
  .hero-copy p { font-size: 0.88rem !important; }

  /* Carril de fotos */
  .photo-rail-container { max-height: 280px !important; }

  /* Casino - 1 columna */
  #casino-games-container { grid-template-columns: 1fr !important; gap: 16px !important; padding: 0 !important; }
  .dynamic-game { padding: 20px !important; aspect-ratio: auto !important; border-radius: 18px !important; width: 100% !important; margin: 0 !important; }
  .casino-img-box { height: 220px !important; border-radius: 12px !important; margin-bottom: 14px !important; width: 100% !important; }
  .dynamic-game h3 { font-size: 1.3rem !important; margin: 10px 0 6px !important; }
  .dynamic-game p { font-size: 0.85rem !important; margin-bottom: 12px !important; }
  .dynamic-game [style*="grid-template-columns: 1fr 1fr"] { gap: 10px !important; margin-bottom: 14px !important; }
  .dynamic-game [style*="grid-template-columns: 1fr 1fr"] > div { padding: 10px 8px !important; border-radius: 10px !important; }
  .dynamic-game [style*="grid-template-columns: 1fr 1fr"] > div > div:last-child { font-size: 1rem !important; }
  .dynamic-game .btn { font-size: 0.9rem !important; padding: 13px 0 !important; border-radius: 22px !important; width: 100% !important; }
  .dynamic-game .delete-btn { width: 32px !important; height: 32px !important; top: 14px !important; right: 14px !important; }

  /* Pronósticos - 1 columna */
  #admin-codes-container, #community-codes-grid { grid-template-columns: 1fr !important; gap: 12px !important; padding: 0 !important; }
  .dynamic-code { padding: 18px !important; border-radius: 18px !important; }
  .dynamic-code [style*="font-size: 2.4rem"], .dynamic-code [style*="font-size: 2.2rem"] { font-size: 1.8rem !important; letter-spacing: 3px !important; }
  .dynamic-code p { font-size: 0.82rem !important; }
  .countdown-timer { top: 10px !important; left: 10px !important; padding: 4px 8px !important; font-size: 0.6rem !important; }

  /* Agencias - 1 columna */
  #physical-agencies-container, #virtual-agencies-container { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Trabaja */
  .hero-business { gap: 14px !important; }
  .hero-business .glass-card { padding: 16px !important; }
  .hero-business h1.brand-title, .hero-business h1[style*="font-size: 2.2rem"] { font-size: 1.5rem !important; line-height: 1.2 !important; }
  .hero-business .section-lead, .hero-business p[style*="font-size: 0.95rem"] { font-size: 0.82rem !important; }
  .hero-business [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .hero-business [style*="font-size: 1.6rem"] { font-size: 1.2rem !important; }
  .hero-business [style*="font-size: 2rem"] { font-size: 1.4rem !important; }
  .profile-avatar { width: 75px !important; height: 75px !important; }
  .presentation-card { padding: 18px 16px !important; }
  .presentation-card h2 { font-size: 1.2rem !important; }
  .presentation-card .social-btn { width: 34px !important; height: 34px !important; }
  .presentation-card .btn-whatsapp { padding: 10px !important; font-size: 0.8rem !important; }
  .presentation-card [style*="font-size: 0.72rem"], .presentation-card [style*="font-size: 0.75rem"] { font-size: 0.65rem !important; word-break: break-all !important; }
  #plan-ecuabet { padding: 18px !important; }
  #plan-ecuabet h2.brand-title { font-size: 1.4rem !important; }
  #plan-ecuabet [style*="grid-template-columns: repeat(auto-fit"] { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* Dinámicas - 1 columna */
  #sorteos-grid, #eventos-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .dynamic-sorteo, .dynamic-evento { padding: 16px !important; }
  .dynamic-sorteo h3, .dynamic-evento h3 { font-size: 1rem !important; }

  /* Modales */
  .modal-content { padding: 16px !important; border-radius: 14px !important; }
  .modal-content h2 { font-size: 1.1rem !important; }
  .modal-content input, .modal-content textarea, .modal-content select { font-size: 14px !important; padding: 10px !important; }

  /* Botones */
  .btn { min-height: 44px !important; padding: 12px 16px !important; }
  .btn-primary { padding: 13px 20px !important; }

  /* Ticker */
  .live-ticker { height: 28px !important; font-size: 0.65rem !important; }
  .ticker-item { padding: 0 14px !important; }

  /* Floating WhatsApp */
  .floating-whatsapp { width: 48px !important; height: 48px !important; bottom: 16px !important; right: 16px !important; }
  .floating-whatsapp svg { width: 24px !important; height: 24px !important; }
}

/* ============================================
   MÓVIL PEQUEÑO (hasta 360px)
   ============================================ */
@media (max-width: 360px) {
  section { padding: 16px 12px !important; }
  .brand-title { font-size: 1.6rem !important; }
  .hero-business h1.brand-title { font-size: 1.3rem !important; }
  .hero-business [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 8px !important; }
  .profile-avatar { width: 65px !important; height: 65px !important; }
  .casino-img-box { height: 180px !important; }
  .dynamic-game h3 { font-size: 1.1rem !important; }
  .dynamic-game .btn { font-size: 0.82rem !important; padding: 11px 0 !important; }
  #casino-games-container { gap: 12px !important; }
}

/* ============================================
   CASINO - Efectos visuales móvil
   ============================================ */
@media (max-width: 480px) {
  .dynamic-game {
    box-shadow: 0 8px 30px rgba(0,0,0,0.5) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .dynamic-game:active { transform: scale(0.98) !important; }
  .casino-img-box { box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important; position: relative !important; overflow: hidden !important; }
  .dynamic-game h3 {
    background: linear-gradient(180deg, #fff 0%, rgba(255,224,0,0.9) 100%) !important;
    -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important;
  }
  .dynamic-game [style*="grid-template-columns: 1fr 1fr"] > div {
    background: rgba(255,224,0,0.08) !important; backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255,224,0,0.2) !important;
  }
  .dynamic-game .btn {
    background: linear-gradient(135deg, var(--primary) 0%, #ff8c00 100%) !important;
    box-shadow: 0 4px 15px rgba(255,224,0,0.4) !important;
  }
  .dynamic-game { animation: fadeInUp 0.4s ease-out !important; }
  @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
}

/* ============================================
   TRABAJA - Responsive adicional
   ============================================ */
@media (max-width: 768px) {
  .hero-business[style*="display: flex"] { flex-direction: column !important; }
  .hero-business > div[style*="flex: 1"], .hero-business > div[style*="width: 360px"] { width: 100% !important; max-width: 100% !important; flex: none !important; }
  .glass-card[style*="border-left: 5px solid"] { padding: 20px 15px !important; }
  .glass-card[style*="border-left: 5px solid"] > div[style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 14px !important; }
  .glass-card[style*="border-left: 5px solid"] > div[style*="grid-template-columns: 2fr 1fr"] { grid-template-columns: 1fr !important; gap: 15px !important; }
  .glass-card[style*="border-left: 5px solid"] > div[style*="grid-template-columns: 2fr 1fr"] > div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: repeat(2, 1fr) !important; }
  #plan-ecuabet > div:first-child { flex-direction: column !important; align-items: flex-start !important; }
  #plan-ecuabet .service-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
}