/* * rUthere? — la web en el teléfono. * * Ed, 22/09: «utiliza la app móvil para la vista del teléfono; esas pantallas * ya están diseñadas, y el menú va al pie, no arriba junto a la campana». * * Así que esto no inventa un acomodo: COPIA el de `rUthere Adolescente App`. * De ahí salen, literales, la cabecera (logotipo a 38.1 px a la izquierda y los * botones redondos a la derecha), el cuerpo y la barra de abajo —icono encima, * etiqueta de 11 px, la activa en terracota sobre su fondo tintado—. * * Sólo cambia el ACOMODO bajo 760 px; en pantalla grande el dibujo queda igual. * Las clases `ru-*` se añadieron a la plantilla del dibujo para alcanzarlo. */ @media (max-width: 760px) { /* ---- Páginas del sitio (colegios, landing) ---- */ .ru-raiz { min-width: 0 !important; overflow-x: hidden; } .ru-sec { padding-left: 20px !important; padding-right: 20px !important; } .ru-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; } .ru-fila { flex-direction: column !important; gap: 24px !important; } .ru-sin-min { min-width: 0 !important; flex-basis: 100% !important; } .ru-foto { height: 280px !important; } h1.ru-titulo { font-size: 40px !important; } h2.ru-titulo, div.ru-titulo { font-size: 32px !important; } h3.ru-titulo { font-size: 28px !important; } .ru-nav-enlaces { display: none !important; } /* ---- Portal de estudiante: la cabecera de la app ---- El logotipo completo, no la baldosa suelta: es lo que dibuja la app. El nombre del colegio y el sello se van —la app no los trae y en 390 px empujaban los botones fuera de la pantalla—; el colegio se lee entero en «Mi escuela». */ .ru-est-hdr { padding: 14px 20px 12px !important; gap: 8px 10px !important; flex-wrap: wrap !important; height: auto !important; } .ru-est-hdr img { height: 38.1px !important; width: auto !important; } .ru-ocultar-tel { display: none !important; } /* El nombre del maestro se va en el teléfono, igual que se iba antes: la cabecera del alumno —la que Ed pidió copiar íntegra— lleva el logotipo, el título y los botones, y nada más. Con el nombre puesto, el renglón medía 350 px justos en una pantalla de 350 y los botones se caían al de abajo. En escritorio el nombre y sus grupos siguen ahí. */ .ru-hdr-yo { display: none !important; } /* Ed, 22/09: «PORTAL DE ESTUDIANTE» y «PORTAL DE MAESTROS» tienen que leerse completos, y los botones —fondo, ecos, avisos y «tú»— van en el extremo superior derecho. En el dibujo el logotipo y el título viven DENTRO del mismo contenedor, y los botones son su hermano. Si ese contenedor envuelve para bajar el título, se lleva todo el ancho y empuja a los botones al renglón de abajo, a la izquierda —que es justo lo que Ed marcó—. Con `display:contents` ese contenedor deja de ser una caja: el logotipo y el título pasan a ser hijos directos de la cabecera, y entonces el orden se puede repartir de verdad: logotipo (1) y botones (2) arriba, el título (3) en su propio renglón debajo. Los botones se pegan a la derecha con `margin-left:auto` y arriba con `align-self:flex-start`. */ .ru-est-hdr { align-items: flex-start !important; justify-content: flex-start !important; } .ru-est-hdr > span:first-child, .ru-est-hdr > div:first-child { display: contents !important; } /* Lo que era nieto ahora es hijo: el logotipo primero… */ .ru-est-hdr > span:first-child > *, .ru-est-hdr > div:first-child > * { order: 1 !important; align-self: center !important; } /* …los botones arriba a la derecha… */ .ru-est-hdr > span:last-child, .ru-est-hdr > div:last-child { order: 2 !important; margin-left: auto !important; align-self: flex-start !important; flex: none !important; } /* …y el título completo, en su propio renglón. */ .ru-est-hdr > span:first-child > .ru-hdr-sub, .ru-est-hdr > div:first-child > .ru-hdr-sub { order: 3 !important; flex: 1 0 100% !important; min-width: 0 !important; align-self: auto !important; white-space: normal !important; } .ru-hdr-sub > * { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } /* ---- Y la barra de abajo, que es donde va el menú ---- */ .ru-est-nav { position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 40; /* Ed, 23/09: «podría ser más chico el pie de página, sobra mucho espacio». Sobraba por una suma equivocada: 20 px FIJOS más el hueco del indicador del iPhone —otros 34—, cuando el navegador ya reserva ese hueco por su cuenta. Sumarlos lo contaba dos veces. Con `max()` se toma el mayor de los dos, no los dos juntos. */ padding: 4px 6px max(8px, env(safe-area-inset-bottom)) !important; background: #f6f1e9 !important; backdrop-filter: none !important; border-top: 1px solid rgba(0, 0, 0, .07); border-bottom: none !important; box-shadow: 0 -6px 20px rgba(60, 30, 15, .07); } .ru-est-nav .ru-carril { gap: 2px !important; } .ru-est-nav .ru-carril > button { flex: 1 1 0 !important; flex-direction: column !important; gap: 4px !important; min-height: 44px; padding: 4px 2px !important; border-radius: 10px; border-bottom: none !important; } .ru-est-nav .ru-carril > button > span { font-size: 11px !important; } /* La pestaña activa, como la dibuja la app: terracota sobre su fondo tintado, no la raya de abajo del escritorio. */ .ru-est-nav .ru-carril > button[data-activa="si"] { color: #c25a34 !important; background: color-mix(in oklab, #c25a34 10%, #fffdf9) !important; } /* El globo del «5» se sube a la esquina del icono: abajo, con la palabra debajo del icono, ya no cabe a un lado. */ .ru-est-nav .ru-carril > button { position: relative !important; } .ru-est-nav .ru-carril .ru-badge { position: absolute !important; top: 2px !important; left: 50% !important; margin-left: 4px !important; font-size: 10px !important; min-width: 16px !important; padding: 1px 4px !important; } .ru-carril { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .ru-carril::-webkit-scrollbar { display: none; } .ru-carril > button { white-space: nowrap; } /* El cuerpo deja sitio para la barra. */ .ru-est-nav + .ru-sec { padding-bottom: 104px !important; } /* El cuerpo, a lo ancho del teléfono. El dibujo de escritorio deja 44 px a cada lado: en 390 px eso se come 88 px —casi una cuarta parte— y todo se veía angosto. La app usa 20 px, y eso es lo que se usa aquí. El fondo, además, deja sitio para la barra de abajo. */ .ru-cuerpo { padding: 18px 20px 96px !important; max-width: none !important; } /* ---- Portal de maestros (no tiene app propia: se acomoda, no se copia) ---- */ .ru-panel { width: 100% !important; flex: 1 1 100% !important; } .ru-envolver { flex-wrap: wrap !important; gap: 12px 14px !important; } .ru-envolver > div:first-of-type { flex: 1 1 calc(100% - 70px) !important; } /* ---- Al bajar, las barras se quitan de en medio ---- Ed, 23/09: «cuando haga scroll hacia arriba o hacia abajo se tienen que esconder tanto el encabezado como el pie de página para que se vea más grande la información en pantalla». La marca la pone `barras.js` en el ; aquí sólo se mueven. Se van moviéndose y no desapareciendo, para que el contenido no salte. */ .ru-est-hdr, .ru-est-nav { transition: transform .22s ease; will-change: transform; } html[data-barras="ocultas"] .ru-est-hdr { transform: translateY(-100%); } html[data-barras="ocultas"] .ru-est-nav { transform: translateY(100%); } /* ---- Ecos: la barra de grupos, aquí, es un cajón ---- Ed, 25/09: «quiero que se integre la pantalla de los grupos en esta misma con una barra del lado izquierdo para que todo se maneje desde una sola pantalla». En escritorio esa barra es una columna de 320 px al lado de la conversación. En 390 px no cabe: dejaría la conversación en nada. Así que aquí la misma barra —el mismo HTML, no otro— se despega y entra desde la izquierda encima de la conversación. Se abre con el botón de grupos del encabezado y se cierra con su × o tocando el velo. Los tres nacen con `display:none` en la plantilla y es este archivo quien los enciende, para que en escritorio no aparezcan. */ .ru-eco-rail { position: fixed !important; z-index: 5; top: 0; bottom: 0; left: 0; width: min(86vw, 330px) !important; border-right: none !important; transform: translateX(-102%); transition: transform .24s ease; box-shadow: 0 0 40px rgba(60, 30, 15, .32); } .ru-eco-rail[data-abierta="1"] { transform: translateX(0); } .ru-eco-velo { display: block !important; } .ru-eco-grupos, .ru-eco-cerrar { display: flex !important; } /* ---- QUE EL TECLADO NO DEFORME LA PANTALLA ---- Ed, 25/09: «al colocarte en la barra para escribir un mensaje y se muestra el teclado se deforma la vista y se sale de la pantalla de los extremos izquierdo y derecho, como que crece». No es nuestro CSS: es Safari en iOS. Cuando enfocas un campo cuya letra mide MENOS de 16 px, el navegador decide que no se va a leer y acerca la página entero para ayudarte. Al acercarla, los bordes se salen de cuadro — que es exactamente lo que se ve en la captura— y no vuelve solo. Chrome en Android no hace esto, pero la regla tampoco le estorba. El arreglo es el campo, no el zoom: 16 px y Safari no tiene por qué acercar nada. No se toca `maximum-scale` ni `user-scalable`, que apagarían también el zoom con los dedos y eso sí le hace falta a quien no ve bien. Sólo en el teléfono, y sólo hacia arriba: el campo del código de seis dígitos ya mide 24 px y se queda como está, por eso la excepción por `inputmode="numeric"`. Los de archivo ni se enfocan. */ input:not([inputmode="numeric"]):not([type="file"]), textarea, select { font-size: 16px !important; } } @media (max-width: 760px) and (prefers-reduced-motion: reduce) { .ru-est-hdr, .ru-est-nav, .ru-eco-rail { transition: none; } }