/* ========================================================================== iLESSO — Ajustes responsive del sitio público (public-responsive.css) Resuelve los dos extremos que se veían mal: 1. PANTALLAS GRANDES: los contenedores estaban topados en 1280px (`max-w-7xl` de Tailwind). En un monitor de 1920px eso dejaba 640px vacíos — un tercio de la pantalla — y en uno de 2560px, 1280px. Aquí se ensanchan por tramos, sin llegar a la línea de texto infinita (que se vuelve incómoda de leer). 2. PANTALLAS PEQUEÑAS: los formularios de las herramientas gratuitas (IMC, riesgo cardiovascular, sueño, estrés) apretaban los campos a 129px y usaban tipografía de 14px, que en iOS provoca que Safari haga zoom automático al tocar el campo y descuadre la página. Va scopeado bajo `.sitio-publico` (clase del del layout público) para no alterar las utilidades de Tailwind en el resto del sistema. ========================================================================== */ /* -------------------------------------------------------------------------- 1. APROVECHAR LAS PANTALLAS GRANDES Se sube el tope por tramos. El texto corrido mantiene su propio límite (max-w-2xl / max-w-3xl) para que las líneas no se vuelvan interminables: lo que se ensancha son las rejillas de tarjetas y las secciones. -------------------------------------------------------------------------- */ @media (min-width: 1536px) { .sitio-publico .max-w-7xl { max-width: 1480px; } } @media (min-width: 1800px) { .sitio-publico .max-w-7xl { max-width: 1640px; } } /* Con más ancho disponible, las rejillas de tarjetas ganan una columna en vez de estirar cada tarjeta hasta deformarla. */ @media (min-width: 1536px) { .sitio-publico .rejilla-amplia { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1800px) { .sitio-publico .rejilla-amplia { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* -------------------------------------------------------------------------- 2. HERRAMIENTAS GRATUITAS EN MÓVIL -------------------------------------------------------------------------- */ /* 16px es el mínimo que evita el zoom automático de Safari en iOS al enfocar un campo. Por debajo de eso, el navegador amplía la página y el usuario se pierde. Se aplica a TODOS los campos del sitio público, no solo al IMC. */ @media (max-width: 767px) { .sitio-publico input[type="text"], .sitio-publico input[type="number"], .sitio-publico input[type="email"], .sitio-publico input[type="tel"], .sitio-publico input[type="search"], .sitio-publico input[type="date"], .sitio-publico select, .sitio-publico textarea { font-size: 16px; } } /* Campos y botones con altura cómoda para el dedo (recomendación de 44px). */ @media (max-width: 640px) { .sitio-publico .herramienta-campo-input, .sitio-publico .herramienta-form select { min-height: 46px; padding-top: 0.6rem; padding-bottom: 0.6rem; } .sitio-publico .herramienta-boton { width: 100%; min-height: 48px; justify-content: center; } /* En pantallas muy estrechas los dos campos del IMC (peso y estatura) dejan de compartir fila: a 129px cada uno costaba escribir. */ .sitio-publico .herramienta-form { grid-template-columns: 1fr; } } /* Entre 480 y 640 sí caben dos columnas holgadas. */ @media (min-width: 481px) and (max-width: 640px) { .sitio-publico .herramienta-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* El medidor semicircular se adapta al ancho disponible en vez de quedarse en su tamaño fijo y salirse o verse diminuto. */ .sitio-publico .herramienta-medidor { width: 100%; max-width: 280px; height: auto; margin-inline: auto; } /* Las tarjetas de selección de herramienta: en móvil, dos por fila con el texto en dos líneas si hace falta, sin recortarlo. */ @media (max-width: 640px) { .sitio-publico #ht-tarjetas > * { min-height: 74px; padding: 0.6rem 0.5rem; } .sitio-publico #ht-tarjetas > * span { white-space: normal; line-height: 1.2; text-align: center; } } /* -------------------------------------------------------------------------- 3. RETOQUES GENERALES DE MÓVIL -------------------------------------------------------------------------- */ @media (max-width: 640px) { /* Menos aire vertical: en móvil el padding de escritorio obliga a desplazarse mucho para ver poco contenido. */ .sitio-publico section { padding-top: 2.25rem; padding-bottom: 2.25rem; } /* Ningún bloque puede provocar desplazamiento lateral. */ .sitio-publico img, .sitio-publico table, .sitio-publico pre { max-width: 100%; } }