/* =========================================================================== mobile.css — Capa de correcciones MÓVIL (carril Mobile, 2026-06-13). Se carga la ÚLTIMA del de page-head.php para ganar la cascada. NO crea componentes nuevos: solo CORRIGE responsive. Cada regla verificada con medición DevTools + captura en viewport móvil antes de desplegar. Regla de oro: NADA de overflow-x:hidden en html/body (rompería el header sticky). Para tap targets se usa min-width/min-height, que son ORTOGONALES a width/height → ganan sin pelear especificidad ni orden de carga. No llega a las landings (tienen propio); esas las cubre @SEO. =========================================================================== */ /* ───────────────────────── v1 (verificado en vivo) ───────────────────────── */ /* 1) iOS no hace zoom al enfocar un input si su font-size es >= 16px. */ @media (max-width: 768px) { input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px; } } /* 2) Reset defensivo: ninguna imagen/vídeo desborda el ancho del móvil. */ img, svg, video { max-width: 100%; } /* 3) Cuerpo del artículo (la página de más tráfico móvil): min-width:0 evita que un hijo flex ancho empuje la columna; tablas/pre/código que pueda emitir la rutina hacen scroll DENTRO de su caja en vez de romper el ancho de página. */ @media (max-width: 768px) { .news-article { min-width: 0; } .news-article-body table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .news-article-body pre { overflow-x: auto; } .news-article-body :is(pre, code) { max-width: 100%; } } /* 4) /ofertas/ — las cabeceras de sección hacen wrap → elimina el scroll horizontal de ~45px medido a 360px. (override CSS-only; @Ofertas hace la raíz) */ @media (max-width: 768px) { .deals-section-head { flex-wrap: wrap; } } /* ───────────────────────── v2 (13-jun) ───────────────────────── */ /* 5) Tap targets cómodos (>=40-44px) en controles pequeños reales. min-width/min-height NO pelean con width/height (propiedades distintas): si el control es más pequeño, el mínimo lo agranda; si ya es mayor, no afecta. */ @media (max-width: 768px) { /* votos del foro y del widget de comunidad */ .foro-hilo-vote-btn, .foro-vote-btn, .fh-vote-btn { min-width: 40px; min-height: 40px; } .frc-hilo-arrow { min-width: 36px; min-height: 30px; } /* acciones de respuesta del foro (en móvil quedan icon-only) */ .foro-rsp-act { min-height: 40px; } /* botones del feed de comunidad (Pulso / Responder / Ver hilo) */ .cmf-btn { min-height: 40px; } /* +Pendiente / avísame de las cards del catálogo */ .juego-card-pendiente-btn { min-width: 40px; min-height: 40px; } /* ficha: compartir, abrir comparador, quitar de lista, CTA de oferta */ .juego-sb-share-btns a { min-width: 44px; min-height: 44px; } .juego-cmp > summary { min-height: 44px; } .juego-tk-quitar { min-height: 40px; display: inline-flex; align-items: center; } .offer-card-cta { min-height: 44px; } } /* 6) /ofertas/ — rescatar el CTA flotante de Telegram que quedaba TAPADO por la barra inferior (botón inalcanzable). Se sube por encima de la barra (70px). Red de seguridad CSS-only; @Ofertas hará el fix de raíz (bottom+transform). */ @media (max-width: 768px) { .deals-mobile-cta { bottom: calc(70px + env(safe-area-inset-bottom) + 12px) !important; } } /* 7) Enlaces de texto del footer (hubs) con más área táctil para no fallar el toque entre enlaces pegados (no afecta a los logos de tiendas asociadas). */ @media (max-width: 768px) { footer p a { display: inline-block; padding: 4px 2px; } } /* 8) Floor de micro-tipografía: subir a 11px los labels INFORMATIVOS que estaban a 9-9.5px (planes/plataforma/stats), para legibilidad real en móvil. */ @media (max-width: 768px) { .jc-tier, .jc-pa-chip { font-size: 11px !important; } .juego-hero-stat-k { font-size: 11px !important; } .juego-cmp-tag { font-size: 11px !important; } }