/* ============================================================================
   Mobile Overrides — Diseño responsive profundo para <= 900px
   Objetivo: versión móvil compacta, perfecta y atractiva
   Alcance: topbar, hero, chips, mini-banners, proveedores, tarjetas, modales,
            navegación inferior, footer, formularios, utilidades y animaciones
   ============================================================================ */

/* ===== Reset y variables móviles ===== */
@media (max-width: 900px) {
  :root {
    --mobile-radius: 14px;
    --mobile-gap: 12px;
    --mobile-pad: 10px;
    --mobile-font-xs: 11px;
    --mobile-font-sm: 12px;
    --mobile-font-md: 13px;
    --mobile-font-lg: 15px;
    --mobile-line: 1.25;
    --mobile-shadow: 0 10px 30px rgba(0,0,0,.35);
    --mobile-blur-bg: rgba(20,20,22,.72);
  }

  html, body { overscroll-behavior-y: contain; }
  body.with-left-rail { padding-left: 0 !important; }
  .left-rail { display: none !important; }
  .page-content { padding-left: 0 !important; padding-bottom: 84px !important; }
  .container-fluid { padding-left: 10px !important; padding-right: 10px !important; }
  .section { margin: 10px 0 16px !important; }
  .section .header { padding: 6px 8px !important; }
  .section-title-main { font-size: 18px !important; line-height: var(--mobile-line) !important; }
  .section-subtitle { font-size: var(--mobile-font-xs) !important; opacity: .85; }
  /* Botón "Mostrar todo" — evitar cortes y ajustar tamaño */
  .section .header { gap: 8px !important; }
  .section .header .right { flex: 0 0 auto !important; }
  .section .header .right .see-all,
  .see-all {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    padding: 6px 10px !important;
    font-size: var(--mobile-font-sm) !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    min-height: 30px !important;
    gap: 6px;
  }
}

/* ===== Topbar ===== */
@media (max-width: 900px) {
  .topbar { position: sticky; top: 0; z-index: 1000; }
  .topbar-inner { min-height: 52px; padding: 8px 12px; backdrop-filter: saturate(120%) blur(10px); background: rgba(10,10,12,.70); }
  .brand-logo { height: 26px !important; }
  .nav-actions .btn-compact { font-size: var(--mobile-font-sm) !important; padding: 6px 10px !important; border-radius: 12px !important; }
  .btn-compact.btn-outline { border-color: rgba(255,255,255,.18) !important; }
}

/* ===== Hero (banner principal) ===== */
@media (max-width: 900px) {
  .hero-main { margin: 0; padding: 0; }
  .hero-carousel-wrapper { height: 160px !important; border-radius: 16px !important; overflow: hidden; box-shadow: var(--mobile-shadow); }
  .hero-nav-btn { display: none !important; }
  .hero-indicators { bottom: 8px !important; gap: 6px !important; padding: 0 8px; }
  .hero-dot { width: 7px !important; height: 7px !important; opacity: .9; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.18); }
  .hero-dot.active { background: rgba(84,220,110,.9) !important; border-color: rgba(84,220,110,1) !important; }
  .hero-carousel-wrapper img,
  .hero-carousel-wrapper picture,
  .hero-carousel-wrapper .hero-slide,
  .hero-carousel-wrapper .hero-slide img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; }
  .hero-bg-decor { display: none !important; }
  .hero-main + .bucket-strip { margin-top: 10px !important; }
}

/* ===== Chips / filtros arriba ===== */
@media (max-width: 900px) {
  .providers-carousel { display: block !important; }
  .providers-carousel .scroll { gap: 10px !important; }
  .providers-carousel .item { border-radius: var(--mobile-radius); padding: 8px 12px; }
  .providers-carousel .item { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.12) !important; }
  .providers-carousel .item img { width: 30px !important; height: 30px !important; }
  .providers-carousel .actions .btn-compact { padding: 6px 9px !important; font-size: var(--mobile-font-xs) !important; }
}

/* ===== Mini-banners (bucket strip) ===== */
@media (max-width: 900px) {
  .bucket-strip { margin: 6px 0 8px; }
  .bucket-grid { display: flex !important; gap: 12px !important; padding: 6px 8px !important; overflow-x: auto !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; justify-content: flex-start; }
  .bucket-grid::-webkit-scrollbar { height: 8px; }
  .bucket-grid::-webkit-scrollbar-thumb { background: linear-gradient(90deg, rgba(84,220,110,.65), rgba(42,172,94,.65)); border-radius: 8px; }
  .bucket-grid > .bucket-card { flex: 0 0 auto; width: 160px !important; min-height: 96px !important; border-radius: 14px !important; scroll-snap-align: start; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); }
  .bucket-card .bucket-bg { object-fit: cover !important; width: 100% !important; height: 100% !important; }
  .bucket-card:hover { transform: translateY(-2px); }
}

/* ===== Proveedores (grid → fila) ===== */
@media (max-width: 900px) {
  .providers-modern .providers-grid-modern { display: flex !important; gap: 12px !important; padding: 6px 8px !important; overflow-x: auto !important; scroll-snap-type: x mandatory; }
  .providers-modern .provider-card-modern { flex: 0 0 auto; width: 140px; min-height: 76px; border-radius: 14px !important; scroll-snap-align: start; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); }
  .providers-modern .provider-card-modern:hover { transform: translateY(-2px); }
  .provider-logo-img { height: 32px !important; }
}

/* ===== Filas de tarjetas (juegos XL) ===== */
@media (max-width: 900px) {
  .section .cards-row { gap: 12px !important; padding: 6px 8px !important; overflow-x: auto !important; scroll-snap-type: x mandatory; }
  .section .cards-row .game-card-xl { width: 168px !important; flex: 0 0 168px !important; min-height: 0 !important; border-radius: 16px !important; scroll-snap-align: start; }
  .section .cards-row .game-card-xl .overlay { padding: 8px !important; }
  .section .cards-row .game-card-xl .title { font-size: 11.5px !important; line-height: 1.2; }
  .section .cards-row .game-card-xl .vendor { font-size: 9.5px !important; }
  .section .cards-row .game-card-xl .cta { font-size: 11px !important; padding: 5px 9px !important; }
  .game-card-xl .poster { width: 100% !important; height: 100% !important; object-fit: cover !important; }
}

/* ===== Sección títulos ===== */
@media (max-width: 900px) {
  .see-all { font-size: var(--mobile-font-sm) !important; }
}

/* ===== Promos (fila con snap) ===== */
@media (max-width: 900px) {
  .promo-grid { display: flex !important; gap: 12px !important; padding: 6px 8px !important; overflow-x: auto !important; scroll-snap-type: x mandatory; }
  .promo-card { flex: 0 0 auto; min-width: 220px; min-height: 140px; border-radius: var(--mobile-radius); scroll-snap-align: start; }
  .promo-card:hover { transform: translateY(-2px); }
}

/* ===== Navegación inferior (mv-bottom) ===== */
@media (max-width: 900px) {
  .mv-bottom { grid-template-columns: repeat(5, 1fr) !important; gap: 8px !important; padding: 10px 12px !important; position: fixed; left: 0; right: 0; bottom: 0; background: var(--mobile-blur-bg); backdrop-filter: blur(12px); border-top: 1px solid rgba(255,255,255,.12); }
  .mv-bottom a .mv-icon { width: 52px !important; height: 52px !important; border-radius: 16px !important; border: 1px solid rgba(255,255,255,.12) !important; }
  .mv-bottom a span:last-child { font-size: 10px !important; }
}

/* ===== Footer compacto ===== */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .footer-bottom { flex-direction: column !important; gap: 10px !important; padding: 10px 12px !important; background: rgba(255,255,255,.04); border-radius: 12px; }
}

/* ===== Utilidades generales ===== */
@media (max-width: 900px) {
  .only-desktop { display: none !important; }
  .only-mobile { display: inline-flex !important; }
}

/* ===== Formularios compactos ===== */
@media (max-width: 900px) {
  input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="password"], select, textarea {
    font-size: var(--mobile-font-md) !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    background: rgba(255,255,255,.06) !important;
  }
  label { font-size: var(--mobile-font-sm) !important; opacity: .88; }
}

/* ===== Modales y sheets ===== */
@media (max-width: 900px) {
  .providers-modal .providers-sheet { border-radius: 18px 18px 0 0 !important; background: rgba(15,15,17,.98) !important; }
  .providers-modal .sheet-header { padding: 10px 12px !important; }
  .providers-modal .sheet-search input { font-size: var(--mobile-font-sm) !important; }
  .providers-modal .grid { gap: 10px !important; grid-template-columns: repeat(2, 1fr) !important; }
}

/* ===== Tarjetas comunes ===== */
@media (max-width: 900px) {
  .card, .game-card-modern, .quick-card, .stat-card { border: 1px solid rgba(255,255,255,.10) !important; background: rgba(255,255,255,.06) !important; border-radius: 16px !important; }
  .card:hover, .game-card-modern:hover, .quick-card:hover, .stat-card:hover { transform: translateY(-2px); }
}

/* ===== Pantallas pequeñas (<= 620px) ===== */
@media (max-width: 620px) {
  .hero-carousel-wrapper { height: 150px !important; }
  .bucket-grid > .bucket-card { width: 150px !important; min-height: 92px !important; }
  .section .cards-row .game-card-xl { width: 160px !important; flex: 0 0 160px !important; }
  .provider-logo-img { height: 30px !important; }
  .mv-bottom a .mv-icon { width: 50px !important; height: 50px !important; }
  /* Botón "Mostrar todo" aún más compacto en pantallas muy pequeñas */
  .section .header .right .see-all,
  .see-all { padding: 6px 8px !important; font-size: var(--mobile-font-xs) !important; min-height: 28px !important; }
}

/* ===== Micro-interacciones suaves (móvil) ===== */
@media (max-width: 900px) {
  .bucket-card:hover, .promo-card:hover, .provider-card-modern:hover, .game-card-xl:hover { transform: translateY(-3px) scale(1.01); }
}

/* ============================================================================
   Utilidades móviles (espaciado, tipografía, layout)
   ============================================================================ */
@media (max-width: 900px) {
  /* Margins */
  .m-0{margin:0!important}.mt-0{margin-top:0!important}.mr-0{margin-right:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}
  .m-4{margin:4px!important}.mt-4{margin-top:4px!important}.mr-4{margin-right:4px!important}.mb-4{margin-bottom:4px!important}.ml-4{margin-left:4px!important}
  .m-6{margin:6px!important}.mt-6{margin-top:6px!important}.mr-6{margin-right:6px!important}.mb-6{margin-bottom:6px!important}.ml-6{margin-left:6px!important}
  .m-8{margin:8px!important}.mt-8{margin-top:8px!important}.mr-8{margin-right:8px!important}.mb-8{margin-bottom:8px!important}.ml-8{margin-left:8px!important}
  .m-10{margin:10px!important}.mt-10{margin-top:10px!important}.mr-10{margin-right:10px!important}.mb-10{margin-bottom:10px!important}.ml-10{margin-left:10px!important}
  .m-12{margin:12px!important}.mt-12{margin-top:12px!important}.mr-12{margin-right:12px!important}.mb-12{margin-bottom:12px!important}.ml-12{margin-left:12px!important}
  .m-14{margin:14px!important}.mt-14{margin-top:14px!important}.mr-14{margin-right:14px!important}.mb-14{margin-bottom:14px!important}.ml-14{margin-left:14px!important}
  .m-16{margin:16px!important}.mt-16{margin-top:16px!important}.mr-16{margin-right:16px!important}.mb-16{margin-bottom:16px!important}.ml-16{margin-left:16px!important}
  .m-18{margin:18px!important}.mt-18{margin-top:18px!important}.mr-18{margin-right:18px!important}.mb-18{margin-bottom:18px!important}.ml-18{margin-left:18px!important}
  .m-20{margin:20px!important}.mt-20{margin-top:20px!important}.mr-20{margin-right:20px!important}.mb-20{margin-bottom:20px!important}.ml-20{margin-left:20px!important}

  /* Paddings */
  .p-0{padding:0!important}.pt-0{padding-top:0!important}.pr-0{padding-right:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}
  .p-4{padding:4px!important}.pt-4{padding-top:4px!important}.pr-4{padding-right:4px!important}.pb-4{padding-bottom:4px!important}.pl-4{padding-left:4px!important}
  .p-6{padding:6px!important}.pt-6{padding-top:6px!important}.pr-6{padding-right:6px!important}.pb-6{padding-bottom:6px!important}.pl-6{padding-left:6px!important}
  .p-8{padding:8px!important}.pt-8{padding-top:8px!important}.pr-8{padding-right:8px!important}.pb-8{padding-bottom:8px!important}.pl-8{padding-left:8px!important}
  .p-10{padding:10px!important}.pt-10{padding-top:10px!important}.pr-10{padding-right:10px!important}.pb-10{padding-bottom:10px!important}.pl-10{padding-left:10px!important}
  .p-12{padding:12px!important}.pt-12{padding-top:12px!important}.pr-12{padding-right:12px!important}.pb-12{padding-bottom:12px!important}.pl-12{padding-left:12px!important}
  .p-14{padding:14px!important}.pt-14{padding-top:14px!important}.pr-14{padding-right:14px!important}.pb-14{padding-bottom:14px!important}.pl-14{padding-left:14px!important}
  .p-16{padding:16px!important}.pt-16{padding-top:16px!important}.pr-16{padding-right:16px!important}.pb-16{padding-bottom:16px!important}.pl-16{padding-left:16px!important}
  .p-18{padding:18px!important}.pt-18{padding-top:18px!important}.pr-18{padding-right:18px!important}.pb-18{padding-bottom:18px!important}.pl-18{padding-left:18px!important}
  .p-20{padding:20px!important}.pt-20{padding-top:20px!important}.pr-20{padding-right:20px!important}.pb-20{padding-bottom:20px!important}.pl-20{padding-left:20px!important}

  /* Radius */
  .radius-8{border-radius:8px!important}.radius-10{border-radius:10px!important}.radius-12{border-radius:12px!important}
  .radius-14{border-radius:14px!important}.radius-16{border-radius:16px!important}.radius-18{border-radius:18px!important}
  .radius-20{border-radius:20px!important}.radius-24{border-radius:24px!important}

  /* Text utilities */
  .text-xs{font-size:var(--mobile-font-xs)!important}.text-sm{font-size:var(--mobile-font-sm)!important}
  .text-md{font-size:var(--mobile-font-md)!important}.text-lg{font-size:var(--mobile-font-lg)!important}
  .text-center{text-align:center!important}.text-right{text-align:right!important}
  .text-muted{opacity:.8!important}

  /* Flex utilities */
  .flex{display:flex!important}.inline-flex{display:inline-flex!important}
  .items-center{align-items:center!important}.justify-center{justify-content:center!important}
  .justify-between{justify-content:space-between!important}.justify-start{justify-content:flex-start!important}
  .gap-6{gap:6px!important}.gap-8{gap:8px!important}.gap-10{gap:10px!important}.gap-12{gap:12px!important}

  /* Grid utilities */
  .grid{display:grid!important}.grid-cols-2{grid-template-columns:repeat(2,1fr)!important}
  .grid-cols-3{grid-template-columns:repeat(3,1fr)!important}.grid-cols-4{grid-template-columns:repeat(4,1fr)!important}
  .grid-auto-rows-110{grid-auto-rows:110px!important}.grid-auto-rows-120{grid-auto-rows:120px!important}

  /* Shadows */
  .shadow-sm{box-shadow:0 6px 16px rgba(0,0,0,.25)!important}
  .shadow-md{box-shadow:0 10px 30px rgba(0,0,0,.35)!important}

  /* Borders */
  .border{border:1px solid rgba(255,255,255,.12)!important}
  .border-strong{border:1px solid rgba(255,255,255,.18)!important}

  /* Blur backgrounds */
  .blur-bg{background:var(--mobile-blur-bg)!important;backdrop-filter:blur(12px)!important}

  /* Safe area paddings */
  .pb-safe{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 12px)!important}
}

/* ===== Ajustes específicos Home ===== */
@media (max-width: 900px) {
  .rail-item{display:none!important}
  .rail-spacer{display:none!important}
  .nav-actions{transition:left .25s ease!important}
  .nav-actions.active{left:0!important}
  #providersModal .grid .card span{font-size:var(--mobile-font-sm)!important}
  #providersModal .grid .card img{width:42px!important;height:42px!important}
  .quick-grid{grid-template-columns:1fr!important;gap:12px!important}
  .stats-grid{grid-template-columns:1fr!important;gap:12px!important}
}

/* ===== Microinteracciones ===== */
@media (max-width: 900px) {
  .tap:hover{transform:translateY(-1px)!important}
  .tap:active{transform:scale(.98)!important}
  .soft-transition{transition:all .2s ease!important}
}

/* ===== Accesibilidad móvil ===== */
@media (max-width: 900px) {
  .touch{min-height:42px!important;min-width:42px!important}
  .focus-ring:focus{outline:2px solid rgba(84,220,110,.9)!important;outline-offset:2px!important}
}