/* ========================================================================== ALADINO EN EL MÓVIL — la piel de pantalla pequeña ========================================================================== Todo cuelga de `body[data-movil]`, que pone `movil.js` según el ANCHO de la pantalla, nunca según quién eres. Por eso el mismo alumno, desde el computador, sigue viendo el grafo, el consejo y todo lo demás: si la marca no está, este archivo entero no aplica y el escritorio no puede romperse. El principio de todo lo que hay aquí: en el móvil el usuario CONSULTA. No administra, no ingesta, no explora el grafo. Así que en vez de encoger un panel de control de catorce botones, se esconde lo que no es consultar y se agranda lo que sí. Es menos trabajo y mejor resultado. ========================================================================== */ body[data-movil] { /* alto real del móvil: 100vh se equivoca cuando aparece la barra del navegador */ --alto: 100dvh; --abajo: env(safe-area-inset-bottom, 0px); --barra: 58px; /* la navegación de abajo */ overflow: hidden; } /* ---------- 1. FUERA EL GRAFO ---------- No es que estorbe: es que un canvas 3D con bloom a 60 fps en un teléfono es batería, calor y tirones, y a quien pregunta en el bus no le aporta nada. `movil.js` además corta el bucle de dibujo, así que esto no es solo taparlo. */ body[data-movil] #lienzo, body[data-movil] #etiquetas, body[data-movil] #leyenda-panel, body[data-movil] #buscar-grafo, body[data-movil] #salir-foco, body[data-movil] #vineta, body[data-movil] #tip, body[data-movil] #chat-resize { display: none !important; } /* Y su pantalla de "cargando": sin dibujo que esperar, se quedaría encima para siempre tapando la app. Aquí no hay grafo que cargar, así que fuera. */ body[data-movil] #cargando { display: none !important; } /* .top es el rotulo flotante del Atlas —logo, "Atlas – Proyecto Aladino" y el nombre de la boveda— pensado para flotar SOBRE el grafo. Sin grafo debajo cae encima de la cabecera del chat: en el telefono de Cesar se leian a la vez, y superpuestos, el logo, la foto del experto, su nombre y el titulo del Atlas. Aqui no pinta nada: el camino de vuelta al escaparate es "Mis expertos". */ body[data-movil] .top { display: none !important; } /* El globo de abajo a la izquierda (#btn-panel) sirve para APARTAR el chat y ver el grafo. En el movil no hay grafo que ver: solo tapa la conversacion. Fuera, junto con cualquier otro boton flotante pensado para el lienzo. */ body[data-movil] #btn-panel, body[data-movil] .fab { display: none !important; } /* ---------- 2. EL CHAT ES LA APLICACIÓN ---------- En el escritorio es un panel lateral; aquí ocupa la pantalla entera, con la conversación desplazándose y el cuadro de escribir siempre a la vista. */ body[data-movil] aside.chat { position: fixed !important; inset: 0 !important; width: 100% !important; max-width: 100% !important; height: var(--alto) !important; border: 0 !important; border-radius: 0 !important; display: flex !important; flex-direction: column !important; padding-bottom: calc(var(--barra) + var(--abajo)); /* z-index BAJO, y esto no es un detalle: con 100 el chat tapaba la llamada (#llamada-back vive en 70) y no habia forma de llegar a ella. Medido en el navegador a 375 px, no adivinado. El chat es el fondo de la app; todo lo que se abre encima tiene que ganarle. */ z-index: 1; } /* Y lo que se abre ENCIMA gana siempre: llamada, conversacion por voz, galeria, avisos. Por encima incluso de la barra de abajo (9200), que si no recortaria el modal por el pie. */ body[data-movil] #llamada-back, body[data-movil] #convai-back, body[data-movil] #gal-back, body[data-movil] #con-back, body[data-movil] #estudio-back, body[data-movil] #login-back, body[data-movil] #bov-back, body[data-movil] #mat-back, body[data-movil] #nodo-back, body[data-movil] #ie-back, body[data-movil] #cur-back, body[data-movil] #subida-back, body[data-movil] #hilos-drawer { z-index: 9500 !important; } body[data-movil] #dlg-back { z-index: 9700 !important; } body[data-movil] #toasts { z-index: 9800 !important; } /* la cabecera, a lo imprescindible: quién te habla y poco más */ body[data-movil] aside.chat > header { padding: 8px 12px !important; } body[data-movil] aside.chat > header .quien { gap: 9px } body[data-movil] aside.chat > header .quien .t { font-size: 16px !important; font-weight: 650 } body[data-movil] aside.chat > header .quien .rol { font-size: 12px !important } body[data-movil] #av-foto { width: 40px !important; height: 40px !important; font-size: 17px !important } /* Lo que en el móvil solo estorba: los ajustes finos y toda la administración. No es que el alumno no tenga permiso —muchos de estos botones ni le salen—: es que ocupan la pantalla en la que tiene que leer. DOS SE QUEDAN: la rigidez y la extensión de la respuesta. No son administración —son de quien pregunta y solo cambian SU conversación—, y son justo los dos diales que más sirven en una pantalla pequeña: poder pedir "breve" desde el bus vale aquí más que en el escritorio. Su tamaño de dedo, más abajo. */ body[data-movil] #barra-tools, body[data-movil] aside.chat > header .m > span, body[data-movil] #sel-modelo, body[data-movil] #btn-preciso, body[data-movil] #av-corpus, body[data-movil] #av-kpp, body[data-movil] #av-sello, body[data-movil] #user-chip, body[data-movil] #nav-estudio, body[data-movil] #disclaimer-ia { display: none !important; } body[data-movil] aside.chat > header .m { margin-top: 8px !important; display: flex; gap: 8px; flex-wrap: wrap; } /* LOS DOS DIALES, A TAMAÑO DE DEDO. En el escritorio van a 11 px, que aquí es inservible por dos motivos: el dedo no acierta, y por debajo de 16 px iOS hace zoom solo en cuanto los tocas —la misma razón por la que el campo de escribir está a 16 px unas líneas más abajo—. No se toca ningún otro control de esta fila: los botones de hilos y nueva se quedan exactamente como estaban. */ body[data-movil] aside.chat > header .m > #sel-rigidez, body[data-movil] aside.chat > header .m > #sel-concision { font-size: 16px !important; padding: 7px 10px !important; border-radius: 10px !important; min-height: 38px; /* que no se estiren hasta empujar a los botones a otra fila */ flex: 0 1 auto; max-width: 48%; } /* ---------- 3. LA CONVERSACIÓN, LEGIBLE ---------- Lo que se lee no puede ir a 11 px. 15,5 px con interlineado ancho es lo que hace que una respuesta larga no canse. */ body[data-movil] #hilo { flex: 1 1 auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; padding: 12px 13px 4px !important; font-size: 15.5px !important; line-height: 1.62 !important; } body[data-movil] #hilo .cuerpo, body[data-movil] #hilo p, body[data-movil] #hilo li { font-size: 15.5px !important; line-height: 1.62 !important } body[data-movil] #hilo h1 { font-size: 20px !important } body[data-movil] #hilo h2 { font-size: 18px !important } body[data-movil] #hilo h3 { font-size: 16.5px !important } /* las burbujas, a lo ancho: en 360 px no sobra sitio para márgenes decorativos */ body[data-movil] #hilo > div { max-width: 100% !important } body[data-movil] #hilo pre, body[data-movil] #hilo table { max-width: 100%; overflow-x: auto; font-size: 13px !important; } /* ---------- 4. ESCRIBIR SIN PELEARSE ---------- 16 px en el campo NO es capricho: por debajo de 16, iOS hace zoom solo cada vez que tocas para escribir, y esa es media explicación del "todo se ve pequeño". Los botones, a 44 px, que es el tamaño de un dedo. */ /* DOS FILAS, y esto lo dijo la medicion: con el campo y los cuatro botones en una sola linea, el hueco para escribir quedaba en 166 px de 375 — menos de la mitad de la pantalla para lo unico que el alumno hace aqui. Ahora el campo ocupa el ancho entero y los botones van debajo. */ body[data-movil] .entrada { position: sticky; bottom: 0; z-index: 2; padding: 9px 10px calc(9px + var(--abajo)) !important; gap: 8px !important; align-items: center !important; flex-wrap: wrap !important; } body[data-movil] #q { flex: 1 0 100% !important; width: 100% !important; font-size: 16px !important; line-height: 1.45 !important; padding: 12px 14px !important; border-radius: 12px !important; max-height: 34vh !important; } /* los botones, a la derecha y en su propia fila */ body[data-movil] .entrada > button:not(#q), body[data-movil] .entrada > .ico-entrada { margin-left: 0 } body[data-movil] #btn-adjuntar { margin-right: auto !important } body[data-movil] .entrada button, body[data-movil] .ico-entrada { min-width: 44px !important; min-height: 44px !important; font-size: 14px !important; border-radius: 12px !important; } body[data-movil] #enviar { padding: 0 16px !important; font-weight: 600 } body[data-movil] #btn-voz { font-size: 19px !important } /* ---------- 5. LA NAVEGACIÓN, ABAJO ---------- Donde llega el pulgar. No hay HTML nuevo: es la misma barra de espacios que ya existía, puesta abajo y con el "Estudio" escondido. */ body[data-movil] #nav-espacios { position: fixed !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; transform: none !important; width: 100% !important; max-width: 100% !important; height: calc(var(--barra) + var(--abajo)); padding: 0 4px var(--abajo) !important; display: flex !important; align-items: center; justify-content: space-around; gap: 2px !important; border-radius: 0 !important; border: 0 !important; border-top: 1px solid var(--brd) !important; background: var(--panel2, #11141d) !important; backdrop-filter: blur(8px); z-index: 9200 !important; overflow: visible !important; } body[data-movil] #nav-espacios > * { flex: 1 1 0; min-width: 0 } body[data-movil] #nav-espacios button, body[data-movil] #nav-espacios .nav-btn { width: 100% !important; min-height: 46px !important; font-size: 11.5px !important; line-height: 1.15 !important; white-space: normal !important; text-align: center; padding: 6px 2px !important; border-radius: 10px !important; } /* EL SELECTOR DE EXPERTO NO CABE ABAJO, y forzarlo fue un error: con el nombre completo ("Sadarangani Diplomado I+D26") se comia media barra y se montaba encima de "Recepción" y "Consejo", que quedaban ilegibles. Se quita: para cambiar de experto esta "Mis expertos", que es mas claro y ya estaba ahi. */ body[data-movil] #nav-espacios #sel-boveda, body[data-movil] #nav-espacios > span:not([id^="nav-"]), body[data-movil] #nav-espacios > .asa { display: none !important } /* Y con el selector se va su etiqueta. `.nav-exp` es el envoltorio que lleva dentro la palabra "experto" y el desplegable: al esconder solo el desplegable quedaba un hueco con un rotulo suelto que no abria nada, robando un sitio de los cinco que caben. Se esconde el envoltorio entero. */ body[data-movil] #nav-espacios .nav-exp { display: none !important } /* Icono arriba, palabra corta debajo. `nowrap` es lo que impide que un rótulo se parta en dos líneas y empuje al de al lado; si aun así no cabe, se corta con puntos suspensivos en vez de desbordarse encima del vecino. */ /* OJO con el selector: solo los botones que `barraCompacta()` ha marcado. Con un `.nav-btn` a secas, este `display:flex` le ganaba en especificidad al `display:none` que esconde el «Estudio» en el móvil, y el botón reaparecía. */ body[data-movil] #nav-espacios .nav-btn[data-compacto="1"] { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 1px !important; } body[data-movil] #nav-espacios .nav-btn[data-compacto="1"] .nav-ico { font-size: 17px; line-height: 1 } body[data-movil] #nav-espacios .nav-btn[data-compacto="1"] .nav-txt { font-size: 10.5px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* LA CUENTA, EN UNA HOJA Y NO EN LA BARRA. Cambiar la contrasena y salir son dos cosas que se hacen una vez al mes; la barra es para moverse, y con siete botones los rotulos se partian en dos lineas y se montaban unos con otros. Van juntas detras de un solo boton, y la hoja se abre desde abajo, que es de donde viene el pulgar. */ body[data-movil] #cuenta-back { position: fixed; inset: 0; z-index: 9600; display: none; background: rgba(4, 6, 12, .66); backdrop-filter: blur(3px); align-items: flex-end; } body[data-movil] #cuenta-back.abierto { display: flex } body[data-movil] #cuenta-hoja { width: 100%; background: var(--panel2, #11141d); border-top: 1px solid var(--brd, rgba(255,255,255,.12)); border-radius: 16px 16px 0 0; padding: 8px 12px calc(12px + var(--abajo)); display: flex; flex-direction: column; gap: 8px; } body[data-movil] #cuenta-hoja .cuenta-asa { width: 38px; height: 4px; border-radius: 2px; align-self: center; background: var(--brd, rgba(255,255,255,.2)); margin: 2px 0 6px; } body[data-movil] .cuenta-op { width: 100%; min-height: 52px; font-size: 15px; font-family: inherit; text-align: left; padding: 0 14px; border-radius: 12px; cursor: pointer; background: rgba(255,255,255,.05); color: var(--txt, #e8e8ea); border: 1px solid var(--brd, rgba(255,255,255,.12)); } body[data-movil] .cuenta-op.cancelar { background: none; border-color: transparent; color: var(--dim, #8b8f9a); text-align: center; min-height: 46px; } /* ---------- 6. LOS PANELES, A PANTALLA COMPLETA ---------- Galería, consejo, hilos, llamada y los demás ya eran ventanas superpuestas. En el móvil se les quita el aire de "ventana" y ocupan todo. */ body[data-movil] #gal-back, body[data-movil] #con-back, body[data-movil] #llamada-back, body[data-movil] #convai-back, body[data-movil] #bov-back, body[data-movil] #nodo-back, body[data-movil] #ie-back, body[data-movil] #mat-back, body[data-movil] #estudio-back, body[data-movil] #cur-back, body[data-movil] #login-back { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; } /* EL PANEL ENTERO SE DESPLAZA, no una caja de dentro. Antes el contenido vivia en un contenedor de alto fijo con su propio scroll: en "Tus expertos" eso recortaba la rejilla y Sadarangani quedaba fuera del trozo visible —parecia que no estaba, aunque el servidor lo devolvia con permiso de superadmin— y encima el dedo movia solo esa franja. Lo dijo Cesar: debe ocupar la pantalla y moverse entera. */ body[data-movil] #gal-back, body[data-movil] #con-back, body[data-movil] #estudio-back, body[data-movil] #bov-back, body[data-movil] #nodo-back, body[data-movil] #mat-back, body[data-movil] #ie-back, body[data-movil] #cur-back { overflow-y: auto !important; -webkit-overflow-scrolling: touch; } body[data-movil] #gal-back > *, body[data-movil] #con-modal, body[data-movil] #llamada, body[data-movil] #convai, body[data-movil] #estudio, body[data-movil] #nodo-back > *, body[data-movil] #mat-back > * { width: 100% !important; max-width: 100% !important; /* `min-height` de pantalla completa dejaba un vacio enorme debajo de dos fichas: el panel se estiraba aunque no hubiera contenido. Que mida lo que ocupa. */ height: auto !important; min-height: 0 !important; max-height: none !important; border-radius: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; overflow: visible !important; padding-bottom: calc(24px + var(--abajo)) !important; } /* y las rejillas, sin recortes ni scroll propio: que fluyan y crezcan */ body[data-movil] #gal-grid, body[data-movil] #est-grid { height: auto !important; max-height: none !important; overflow: visible !important; flex: 0 0 auto !important; } /* el diálogo de sí/no sigue siendo un diálogo: a media pantalla y centrado */ body[data-movil] #dlg { width: min(92vw, 420px) !important; border-radius: 14px !important } /* ---------- 7. LA GALERÍA APROVECHA LA PANTALLA ---------- Dos expertos en una esquina y el 80% de la pantalla en negro: dos columnas y fichas grandes, que es lo que se toca con el dedo. */ body[data-movil] #gal-grid, body[data-movil] #est-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; padding: 4px 14px 20px !important; } body[data-movil] #gal-grid > *, body[data-movil] #est-grid > * { width: auto !important; margin: 0 !important; min-height: 132px; } body[data-movil] #gal-grid img, body[data-movil] #gal-grid .est-av, body[data-movil] #est-grid img, body[data-movil] #est-grid .est-av { width: 84px !important; height: 84px !important; } body[data-movil] #gal-h { font-size: 22px !important } body[data-movil] #gal-back .sub, body[data-movil] #gal-pie { font-size: 12.5px !important } /* ---------- 8. LA LLAMADA ---------- Es una conversación cara a cara: el avatar grande y los botones donde llega el pulgar. Colgar tiene que ser imposible de fallar. */ body[data-movil] #llamada { justify-content: center !important; text-align: center } body[data-movil] #llamada img, body[data-movil] #llamada .ll-av { width: 148px !important; height: 148px !important; } body[data-movil] #llamada button { min-height: 48px !important; font-size: 15px !important } body[data-movil] #ll-aviso { font-size: 13px !important } /* ---------- 9. HILOS: un cajón que se desliza ---------- */ body[data-movil] #hilos-drawer { width: 88vw !important; max-width: 340px !important; padding-bottom: calc(var(--barra) + var(--abajo)) !important; } /* ========================================================================== LA PORTADA (portada.html) — el escaparate ========================================================================== Es la primera pantalla que ve un alumno, y era la peor. Medido a 375 px: 267 px de vacio arriba —un tercio de la pantalla— y luego todo apretujado abajo a 13,5 px, con el boton principal en 38 px de alto (el minimo comodo para un dedo son 44). Aqui se sube el contenido y se agranda lo que se toca. ========================================================================== */ /* LA PORTADA TIENE QUE PODER DESPLAZARSE. Estaba con `overflow:hidden`: todo lo que no cupiera en la pantalla se perdia, sin manera de llegar. En el escritorio se nota poco; en un telefono, con el nombre en dos lineas y tres preguntas de tres lineas cada una, el boton "Entrar al conocimiento" —lo unico importante de la pantalla— quedaba empujado fuera y era IMPOSIBLE de pulsar. Le paso a Cesar con Sadarangani. Ningun tamaño arregla eso: hace falta poder bajar. */ /* LA FICHA SE DESPLAZA POR DENTRO, y el resto de la portada se queda como estaba. Sacar la ficha del flujo y soltar el scroll de `html`+`body` funcionaba en el emulador y no en el telefono de Cesar: los textos aparecian a medias, sin el nombre ni el boton. Un layout de pantalla completa con capas fijas tiene demasiadas piezas que dependen de esas alturas. Asi que se deja el diseño original —ficha fija, capas fijas, cinta fija— y solo se le da a la ficha su PROPIO scroll. Es lo minimo que resuelve el problema real (que el boton quede fuera) sin mover nada mas de sitio. */ /* #escena se queda fija: es el fondo (la foto del experto y el velo), y debe cubrir la pantalla mientras se baja por el contenido. */ /* EL RESUMEN, RECORTADO A CUATRO LINEAS. Lo habia soltado entero y ocupaba 279 px: empujaba las preguntas al 584, el boton al 900 y el area al 970, con la pantalla en 812. Estaban ahi y eran visibles, pero habia que bajar mucho para encontrarlos y parecia que no existieran. Recortado cabe casi todo de una vez; el texto entero esta dentro, a un toque. */ /* SIN RECORTE. El `-webkit-line-clamp` dejaba la descripcion en ALTURA 0 —el texto estaba, no se veia— y ni poniendole su `-webkit-box` volvio. No merece la pena pelearse con el: la ficha ya se desliza por dentro, asi que el texto entero cabe sin estorbar a nadie. Menos reglas y ningun modo raro que pueda colapsar. */ body[data-movil] #resumen { display: block !important; -webkit-line-clamp: none !important; line-clamp: none !important; max-height: none !important; overflow: visible !important; font-size: 15px !important; line-height: 1.5 !important; } body[data-movil] #podcast { margin-top: 14px !important } body[data-movil] #preguntas { margin-top: 14px !important; gap: 8px !important } body[data-movil] #acciones { margin-top: 16px !important } /* LA CAUSA DE QUE NO SE LLEGARA AL BOTON, y no era el tamaño de nada: `#ficha` es `position:fixed` con `overflow:hidden` — una caja del alto exacto de la pantalla que RECORTA lo que sobra, y al estar fuera del flujo no genera scroll. En el escritorio es correcto: una columna fija sobre la imagen. En un telefono, con el nombre en dos lineas y tres preguntas de tres lineas, el boton "Entrar al conocimiento" caia fuera del recorte y no habia forma humana de pulsarlo. Reproducido a 400x460 px: boton en 450-500 y scroll imposible. Aqui vuelve al flujo normal: la pagina crece y se baja con el dedo. */ body[data-movil] #ficha { /* sigue fija, como en el diseño original, pero ocupando el ancho entero y con su propio desplazamiento: lo que no cabe se alcanza deslizando DENTRO */ width: 100% !important; max-width: 100% !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; justify-content: flex-start !important; /* 56 arriba y no 18: el logo de la marca flota en 16-42 px, y con 18 el nombre del experto le caia encima. Medido en el navegador, no calculado a ojo. Y ABAJO, el alto de la cinta de expertos: esa cinta es `position:fixed` en el borde inferior, asi que aunque la pagina ya baje, el ultimo tramo queda DEBAJO de ella. El boton "Entrar al conocimiento" caia justo ahi: se llegaba a verlo y aun asi no se podia pulsar. Este hueco es lo que lo libera. */ padding: 56px 20px calc(var(--carr-h, 112px) + 28px) !important; gap: 10px !important; height: auto !important; min-height: 0 !important; } body[data-movil] #escena { height: auto !important; min-height: 100dvh } body[data-movil] #nombre { font-size: 30px !important; line-height: 1.1 !important } body[data-movil] #ficha .r, body[data-movil] #rol { font-size: 14px !important } body[data-movil] #ficha p, body[data-movil] #resumen { font-size: 15px !important; line-height: 1.55 !important; } /* las tres preguntas sugeridas: son botones, y se tocan */ body[data-movil] .preg { font-size: 15px !important; line-height: 1.4 !important; padding: 13px 14px !important; min-height: 48px !important; display: flex !important; align-items: center; } body[data-movil] #entrar { font-size: 16px !important; min-height: 50px !important; width: 100% !important; border-radius: 25px !important; font-weight: 600; } body[data-movil] #area-caja, body[data-movil] #area-sel, body[data-movil] #recepcion { min-height: 44px !important; font-size: 15px !important; } /* EL LOGO ARRIBA A LA DERECHA, Y EL BOTON DONDE ESTABA EL LOGO. La esquina superior derecha esta libre —la marca de AvatarExperto vive en la izquierda— y ahi el logotipo de la institucion acompaña sin robarle sitio a nada. El hueco que deja lo ocupa lo unico que el alumno ha venido a hacer: entrar. Sube junto al nombre, donde se ve sin desplazar. Se hace con `order`, asi que el HTML no se toca y el escritorio queda exactamente igual. */ /* La placa, BLANCA. El logotipo trae su propio fondo blanco, y meterlo en una placa oscura translucida dejaba un recuadro blanco flotando dentro de otro oscuro: se veia como un pegote. Con la placa blanca y las esquinas redondeadas, el logo y su marco son la misma pieza. */ /* EL LOGO, EN LA ESQUINA Y SOBRE PLACA BLANCA — EN LAS DOS VERSIONES. Esto se acordo una vez y se aplico solo al movil: en el escritorio seguia en mitad de la ficha, separando el rol de la descripcion. Lo acordado vale para todas las pantallas; dejar la mitad hecha obliga a otra ronda, y esa ronda la paga Cesar. */ #logo-emp-caja { position: fixed !important; top: 14px !important; right: 16px !important; z-index: 7 !important; margin: 0 !important; padding: 7px 12px !important; background: #fff !important; border: 0 !important; border-radius: 10px !important; backdrop-filter: none !important; box-shadow: 0 2px 12px rgba(0,0,0,.38) !important; } /* en escritorio hay sitio de sobra: el logo de la institucion se lee de verdad */ #logo-emp { height: 52px !important; max-width: 230px !important; display: block } body[data-movil] #logo-emp-caja { top: 12px !important; right: 12px !important; padding: 6px 10px !important } body[data-movil] #logo-emp { height: 30px !important; max-width: 126px !important } /* EL TEXTO DEJA VER LA FOTO. Cinco lineas y un "ver mas": lo que el experto es se entiende en cinco lineas, y quien quiera el resto lo abre. Asi la ficha cabe en una pantalla y la fotografia —que es lo que de verdad presenta al experto— vuelve a verse. Se recorta con `max-height` y no con `line-clamp`: ese ya dejo el bloque en altura 0 una vez, y aqui no se puede permitir. */ /* TEXTO COMPLETO, SIN RECORTE — y esto es una rendicion documentada. El "ver mas" era lo correcto, pero este bloque no se deja recortar: la portada le aplica `-webkit-line-clamp` sobre `-webkit-box`, y cualquier intento de limitarlo desde fuera acaba en que el contenido no aporta altura (medido: 69 px cerrado y 69 abierto, o 0 al soltar los frenos) mientras el texto se sigue dibujando. Se arregla tocando el CSS de portada.html, no desde aqui. Mientras tanto, el estado que SI esta comprobado: el texto entero, 419 px. La ficha se desliza, y con el orden nuevo el boton de entrar va antes que las preguntas, asi que la descripcion larga ya no entierra lo importante. */ body[data-movil] #resumen { display: block !important; -webkit-line-clamp: none !important; line-clamp: none !important; /* EL SUELO VUELVE, y ahora se queda. Al quitarlo el bloque colapso otra vez a altura cero y la descripcion desaparecio entera de la ficha —Cesar lo vio antes que yo—. Este elemento no sostiene su propia altura: sin `min-height` no existe. Con 8em se leen unas cinco lineas y el resto crece si el texto da para mas. */ min-height: 8em !important; max-height: none !important; overflow: visible !important; } /* AL ABRIR, SE ABRE DE VERDAD. Antes ponia un scroll dentro del propio texto, y eso no es expandir: si hay que deslizar igual, el "ver mas" no sirve de nada. Ahora el bloque crece hasta donde haga falta y la pagina sigue bajando como siempre. */ /* SOLO SE SUBE EL TECHO. Quitarle tambien el suelo y el recorte parecia lo logico y hacia lo contrario: el bloque colapsaba a ALTURA CERO y desaparecia el texto entero. Este elemento solo tiene altura mientras conserve esas dos anclas, asi que se le respetan y unicamente se le deja crecer. */ body[data-movil] #resumen.abierto { max-height: 200em !important; overflow: visible !important; } /* el "ver mas", con forma de boton y no de enlace suelto */ body[data-movil] #ver-mas { align-self: flex-start; margin-top: 10px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.22); color: #fff; font-size: 13.5px; font-weight: 600; letter-spacing: .01em; padding: 9px 18px; min-height: 40px; border-radius: 999px; cursor: pointer; text-decoration: none; backdrop-filter: blur(4px); transition: background .18s ease, border-color .18s ease; } body[data-movil] #ver-mas:active { background: rgba(255,255,255,.18) } /* EL ORDEN QUE PIDIO CESAR: primero quien es, luego su voz, luego entrar, y al final las preguntas. La logica es buena — se lee, se escucha, se entra — y las preguntas son el ultimo empujon para quien aun duda. */ body[data-movil] #nombre { order: -10 !important } body[data-movil] #rol { order: -9 !important } body[data-movil] #resumen { order: -8 !important } body[data-movil] #ver-mas { order: -7 !important } body[data-movil] #podcast { order: -6 !important } body[data-movil] #acciones { order: -5 !important } body[data-movil] #preguntas { order: -4 !important } /* el boton principal: mas bajo, pero de lado a lado */ body[data-movil] #entrar { min-height: 46px !important; padding: 12px 18px !important; width: 100% !important; } /* y debajo, recepcion y area en ese orden, cada una a lo ancho */ body[data-movil] #acciones { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; } body[data-movil] #recepcion { order: 1; width: 100% !important; min-height: 44px !important } body[data-movil] #area-caja { order: 2; width: 100% !important } body[data-movil] #nombre { order: -3 } body[data-movil] #rol { order: -2 } body[data-movil] #acciones { order: -1; margin-top: 14px !important } body[data-movil] .play { width: 56px !important; height: 56px !important } body[data-movil] #ficha .sub, body[data-movil] .cargando { font-size: 13px !important } /* LA CINTA, SIN CORTE DURO. La franja de expertos empezaba con una linea recta y negra sobre la fotografia: parecian dos pantallas pegadas. Con un degradado que nace transparente, la foto se apaga hacia abajo y la cinta aparece sola. */ body[data-movil] #cinta { padding-bottom: calc(6px + var(--abajo)) !important; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 28%, rgba(0,0,0,.88) 62%, rgba(0,0,0,.96) 100%) !important; border-top: 0 !important; box-shadow: none !important; } /* el area, al final del todo: es el filtro del escaparate, no una accion del experto, y estorbaba entre el boton de entrar y sus preguntas */ body[data-movil] #area-caja { order: 9 !important; margin-top: 16px !important } body[data-movil] #cinta .nom { font-size: 12.5px !important } body[data-movil] .capa { max-width: 100% !important } /* ========================================================================== LA PORTADA, EN LAS DOS VERSIONES ========================================================================== Esto va SIN la marca `data-movil` a proposito: son mejoras del escaparate, no del telefono, y Cesar echaba en falta que no llegaran al escritorio. ========================================================================== */ /* 1. FRANJA LIMPIA PARA LOS LOGOS. Al desplazar, el texto del experto pasaba por encima del logotipo de AvatarExperto y del de la institucion, y se leian los dos a la vez. Con una mascara, el contenido se DESVANECE al entrar en esa franja en vez de montarse: los logos quedan siempre despejados y no hace falta reservar un hueco muerto arriba. */ /* LA FICHA SE DESLIZA TAMBIEN EN ESCRITORIO. Trae `overflow:hidden` con alto fijo, asi que era ELLA la que cortaba la presentacion del experto —no el bloque de texto— y no habia manera de leer el final. Medido: el contenido desbordaba y se perdia. Con su propio desplazamiento se lee entero, igual que en el movil. */ #ficha { overflow-y: auto !important; overscroll-behavior: contain } #ficha { -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 46px, rgba(0,0,0,1) 76px, rgba(0,0,0,1) 100%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 46px, rgba(0,0,0,1) 76px, rgba(0,0,0,1) 100%); } /* 2. EL FONDO SIEMPRE VIVO. La foto tenia una deriva de entrada que terminaba y dejaba la imagen congelada: el efecto se veia "a veces", justo al cambiar de experto. Ahora respira de continuo, muy despacio —60 segundos por ciclo— para que se note sin marear ni distraer de la lectura. */ @keyframes portada-deriva { 0% { transform: scale(1.06) translate3d(0, 0, 0); } 50% { transform: scale(1.18) translate3d(-3.2%, -2.6%, 0); } 100% { transform: scale(1.06) translate3d(0, 0, 0); } } /* 38 s y no 60: a un minuto por ciclo el movimiento era tan leve que Cesar no lo veia, que es lo mismo que no tenerlo. `transition:none` es necesario — la portada pone una transicion de 9 s sobre `transform` que peleaba con la animacion. */ .capa.on { /* 100 s: Cesar lo quiere mas lento. A 38 el movimiento se notaba demasiado y competia con la lectura; a 100 la imagen respira sin llamar la atencion. */ animation: portada-deriva 100s ease-in-out infinite !important; transition: opacity 1.5s ease !important; will-change: transform; } /* quien pida menos movimiento, que no lo tenga: es una preferencia del sistema */ @media (prefers-reduced-motion: reduce) { .capa.on { animation: none } } /* 3. LA CINTA, SIN CORTE DURO — el degradado estaba dentro de las reglas de movil, por eso en el escritorio seguia viendose la linea recta y negra entre la foto y la franja de expertos. Aqui vale para los dos. */ #cinta { border-top: 0 !important; box-shadow: none !important; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 28%, rgba(0,0,0,.88) 62%, rgba(0,0,0,.96) 100%) !important; } /* 4. LA DESCRIPCION DEL EXPERTO, VISIBLE. El mismo bloque que colapsaba en el movil colapsa en el escritorio: la ficha lo recorta por lineas y el contenido no aporta altura, asi que desaparece entero. El suelo estaba puesto solo para movil. */ /* TEXTO COMPLETO EN LAS DOS VERSIONES. El "ver mas" se probo tambien en escritorio y tampoco expande: 128 px antes de pulsarlo y 128 despues. Queda demostrado que no es cuestion del tamaño de pantalla sino del bloque —la ficha lo recorta por lineas sobre `-webkit-box` y el contenido no aporta altura propia—, asi que la unica solucion real pasa por el CSS de portada.html. Mientras tanto, lo que si funciona: sin recorte, con el suelo que impide que colapse, y la ficha se desliza. */ /* LA PIEZA QUE FALTABA: `-webkit-box-orient`. La portada monta este bloque como caja flexible antigua (`display:-webkit-box; -webkit-box-orient:vertical`) para poder recortarlo por lineas. Quitarle el `display` y el recorte no bastaba: mientras quede el `box-orient`, el elemento NO CALCULA SU ALTURA — de ahi los 128 px fijos que no crecian, el colapso a cero cuando le quitaba el suelo, y el texto desbordandose por encima del podcast. Reseteando los tres a la vez, el bloque se comporta como un parrafo normal: mide lo que ocupa y empuja lo que viene detras. Tambien se quita la mascara de desvanecido, que sin recorte no pinta nada. */ #resumen { display: block !important; -webkit-box-orient: initial !important; -webkit-line-clamp: none !important; line-clamp: none !important; /* ALTURA ACOTADA Y SCROLL PROPIO — la solucion que propuso Cesar, y la unica a prueba de este bloque. Con `overflow:visible` el texto se salia de su caja y se imprimia ENCIMA del podcast, que es lo que se veia en su captura. Acotado no puede desbordar sobre nada, y el texto entero sigue accesible deslizando. */ min-height: 0 !important; height: auto !important; max-height: 11em !important; overflow-y: auto !important; padding-right: 14px; /* el texto se DESVANECE al llegar abajo, en vez de cortarse a cuchillo: se entiende que sigue sin necesidad de mirar la barra */ -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%) !important; mask-image: linear-gradient(180deg, #000 78%, transparent 100%) !important; } /* ========================================================================== LAS BARRAS DE DESPLAZAMIENTO, VESTIDAS COMO EL RESTO ========================================================================== Al acotar el texto entro por la puerta de atras la barra gris y cuadrada del navegador, en mitad de una portada cuidada. Funcionaba y estaba mal: un elemento que se añade para resolver algo tiene que ir vestido con el diseño del sitio. Fina, translucida y redondeada; visible lo justo para saber que hay mas. ========================================================================== */ #resumen::-webkit-scrollbar, #ficha::-webkit-scrollbar, aside.chat ::-webkit-scrollbar, #gal-back ::-webkit-scrollbar { width: 5px; height: 5px; } #resumen::-webkit-scrollbar-track, #ficha::-webkit-scrollbar-track, aside.chat ::-webkit-scrollbar-track, #gal-back ::-webkit-scrollbar-track { background: transparent; } #resumen::-webkit-scrollbar-thumb, #ficha::-webkit-scrollbar-thumb, aside.chat ::-webkit-scrollbar-thumb, #gal-back ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 999px; } #resumen::-webkit-scrollbar-thumb:hover, #ficha::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.38); } /* Firefox no tiene los pseudoelementos de arriba, pero sí estas dos propiedades */ #resumen, #ficha { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent } /* ---------- 10. DETALLES QUE SE NOTAN ---------- */ /* nada de texto microscópico heredado del escritorio */ body[data-movil] .sub, body[data-movil] .dim { font-size: 12.5px !important } /* los avisos flotantes, por encima de la barra de abajo */ body[data-movil] #toasts { bottom: calc(var(--barra) + var(--abajo) + 12px) !important } body[data-movil] #reidx { left: 8px; right: 8px; transform: none !important; max-width: none } /* Volver al escritorio, para tabletas o para quien lo quiera. SOLO EN LA GALERIA. Flotando sobre el chat se ponia justo encima del boton del microfono —medido: el boton ocupaba 712-744 px y el microfono 701-745— y tapaba lo que el alumno necesita. En la galeria sobra sitio y es donde uno esta eligiendo, que es el momento en que tiene sentido cambiar de version. */ #volver-escritorio { display: none; position: fixed; z-index: 9600; bottom: calc(var(--barra) + var(--abajo) + 12px); right: 12px; background: var(--panel2, #11141d); color: var(--sub, #9aa4b2); border: 1px solid var(--brd, #2a2f3d); border-radius: 999px; padding: 10px 16px; font-size: 13px; min-height: 44px; } body[data-movil][data-espacio="galeria"] #volver-escritorio { display: block }