/* Portada móvil tipo panel (fase 2). Fichero propio: NO toca Bootstrap ni style-v2. Solo se carga cuando MOBILE_HOME_ENABLED deja pintar el panel (ver home-v2.html + includes/mobile_home.html). Los valores (medidas, radios, sombras, colores) salen de la MAQUETA HTML que hizo ChatGPT en el chat "Rediseño HOME móvil PBC" (13/08/2026). No se inventan: si hay que cambiar algo, se cambia primero en la maqueta. En escritorio el panel no existe y la portada de siempre queda intacta. Por debajo de 768px pasa lo contrario: se ve el panel y se esconden las secciones de marketing, la barra de arriba y el pie. */ .pbc-mhome { display: none; } /* El ajolote que se pasea vive con la portada móvil: en escritorio, ni asomarse (el JS lo cuelga del , así que necesita su propio apagado). */ .pbc-ajolote-paseo { display: none; } @media (max-width: 767.98px) { .pbc-mhome { --mh-blue: #086BC9; --mh-yellow: #FFD51F; --mh-ink: #15263B; --mh-bg: #F4F8FC; --mh-cta-ink: #5B3100; --mh-radius: 24px; --mh-shadow: 0 8px 22px rgba(31, 79, 121, 0.12); display: block; position: relative; min-width: 320px; max-width: 430px; margin: 0 auto; min-height: 100vh; overflow-x: hidden; background: var(--mh-bg); color: var(--mh-ink); } .pbc-mhome svg { display: block; flex: 0 0 auto; } /* La portada de marketing y el marco de siempre se esconden: el panel manda. Se listan a mano (no un "todo menos el panel") para no tocar el chat flotante, los avisos ni los modales, que también cuelgan del body. */ body.has-pbc-mhome > .navbar, body.has-pbc-mhome > section, body.has-pbc-mhome > .site-footer { display: none !important; } /* El mismo fondo del panel: así la franja que queda bajo la barra de abajo no canta. (En la maqueta el gris #DCE6EF era solo el "fuera del móvil".) */ body.has-pbc-mhome { background: #F4F8FC; } /* La CABECERA vive ahora en static/css/mobile-topbar.css, junto a templates/includes/mobile_topbar.html: el 13/08 Guille pidió la MISMA cabecera también en el perfil y dos copias acaban siendo dos cabeceras distintas. Los valores se mudaron tal cual, sin cambiar ninguno. */ /* ── Tarjetas ──────────────────────────────────────────────────────────── */ /* Con la portada limpia (tres cosas y poco más) las tarjetas se quedaban arriba y sobraba media pantalla en blanco: el bloque se CENTRA en el hueco que hay entre la cabecera y la barra de abajo (Guille, 14/08/2026 noche). Es min-height, así que si un día vuelve a haber más tarjetas la portada crece hacia abajo como siempre y esto no estorba. */ .pbc-mhome-body { position: relative; z-index: 2; display: grid; min-height: calc(100vh - 232px); align-content: center; gap: 14px; margin-top: -1px; padding: 0 14px 14px; } @supports (height: 100dvh) { .pbc-mhome-body { min-height: calc(100dvh - 232px); } } .pbc-mhome-card { border: 1px solid rgba(208, 221, 233, 0.62); border-radius: var(--mh-radius); background: #fff; box-shadow: var(--mh-shadow); } .pbc-mhome-hero { position: relative; min-height: 221px; overflow: hidden; padding: 42px 20px 19px; } /* 55%: la zona segura de texto que marcó ChatGPT para que el ajolote no lo pise nunca. */ .pbc-mhome-hero-text { position: relative; z-index: 2; width: 55%; min-width: 0; } .pbc-mhome-h2 { max-width: 215px; margin: 0; color: var(--mh-ink); font-size: clamp(25px, 7.1vw, 30px); font-weight: 800; line-height: 1.18; letter-spacing: -0.65px; } .pbc-mhome-sub { max-width: 205px; margin: 16px 0 0; color: #3E4753; font-size: clamp(14px, 3.8vw, 16px); font-weight: 400; line-height: 1.35; } /* Con clase reservada no hay ajolote: el texto puede ocupar la tarjeta entera. */ .pbc-mhome-hero:not(.pbc-mhome-hero-book) .pbc-mhome-hero-text, .pbc-mhome-hero:not(.pbc-mhome-hero-book) .pbc-mhome-h2, .pbc-mhome-hero:not(.pbc-mhome-hero-book) .pbc-mhome-sub { width: auto; max-width: none; } .pbc-mhome-cta { display: flex; width: min(194px, 100%); height: 48px; align-items: center; justify-content: center; margin-top: 20px; padding: 0 15px; border: 0; border-radius: 15px; font-size: 16px; font-weight: 800; line-height: 1; text-decoration: none; } .pbc-mhome-cta:hover, .pbc-mhome-cta:focus { text-decoration: none; } .pbc-mhome-cta-yellow { color: var(--mh-cta-ink); background: var(--mh-yellow); box-shadow: 0 4px 0 #E3B900, 0 9px 16px rgba(153, 116, 0, 0.17); } .pbc-mhome-cta-yellow:hover, .pbc-mhome-cta-yellow:focus { color: var(--mh-cta-ink); } .pbc-mhome-cta-yellow:active { transform: translateY(3px); box-shadow: 0 1px 0 #E3B900, 0 5px 11px rgba(153, 116, 0, 0.14); } .pbc-mhome-cta-blue { color: #fff; background: var(--mh-blue); box-shadow: 0 4px 0 #05509B; } .pbc-mhome-cta-blue:hover, .pbc-mhome-cta-blue:focus { color: #fff; } .pbc-mhome-cta-blue:active { transform: translateY(3px); box-shadow: 0 1px 0 #05509B; } /* Confirmacion de "ya esta instalada": verde, con tick, y no se puede volver a tocar (Guille, 18/08/2026). */ .pbc-mhome-cta-green { color: #fff; background: #12A150; box-shadow: 0 4px 0 #0C7A3C; } .pbc-mhome-cta-green::before { content: "\2713"; margin-right: 6px; font-weight: 900; } .pbc-mhome-cta-done { pointer-events: none; } /* El ajolote va detrás y a la derecha: NUNCA tapa el botón (regla de marca). Medidas dadas por ChatGPT junto con su recorte: con topes de ancho y alto para que se quede en su esquina y no invada el texto ni se salga por arriba de la tarjeta. */ .pbc-mhome-mascot-box { position: absolute; z-index: 1; /* Un dedo de aire por la derecha y por abajo (Guille, 14/08/2026): pegado al borde el dibujo parecía cortado aunque no lo estuviera. */ /* Pequeño (Guille, 14/08/2026): vuelve el ajolote de la maqueta, pero reducido, para que la tarjeta la mande el texto y el botón. */ /* Más grande (Guille, 14/08/2026 noche): con la portada limpia el ajolote manda más, pero sigue sin llegar nunca al texto ni al botón. */ right: 12px; bottom: 6px; display: block; width: 45%; max-width: 158px; height: calc(100% - 16px); max-height: 178px; user-select: none; -webkit-tap-highlight-color: transparent; } .pbc-mhome-mascot { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; object-position: right bottom; transform-origin: 78% 92%; /* Respira despacito todo el rato: vivo pero sin marear. */ animation: pbc-mascot-breathe 4.6s ease-in-out infinite; } /* AJOLOTE VIVO (Guille, 20/08/2026): saluda al llegar, respira, y al tocarlo bota y suelta burbujas. Solo el dibujo recibe el toque; el resto de la tarjeta sigue siendo del botón de reservar. */ .pbc-mhome-mascot-box .pbc-mhome-mascot { pointer-events: auto; cursor: pointer; } .pbc-mhome-mascot-box.is-greeting .pbc-mhome-mascot { animation: pbc-mascot-greet 1.1s ease-in-out 1, pbc-mascot-breathe 4.6s ease-in-out 1.1s infinite; } .pbc-mhome-mascot-box.is-tapped .pbc-mhome-mascot { animation: pbc-mascot-boing 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 1, pbc-mascot-breathe 4.6s ease-in-out 0.65s infinite; } @keyframes pbc-mascot-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.022, 0.985); } } @keyframes pbc-mascot-greet { 0%, 100% { transform: rotate(0); } 22% { transform: rotate(-6deg); } 50% { transform: rotate(4.5deg); } 76% { transform: rotate(-2.5deg); } } @keyframes pbc-mascot-boing { 0% { transform: scale(1); } 28% { transform: scale(1.1, 0.86); } 58% { transform: scale(0.94, 1.08) translateY(-5px); } 100% { transform: scale(1); } } /* Burbujitas de siempre: tres, lentas y flojas, saliendo de la cabeza. */ .pbc-mhome-mascot-bubbles, .pbc-mhome-mascot-burst { pointer-events: none; } .pbc-mhome-mascot-bubbles i, .pbc-mhome-mascot-burst i { position: absolute; border-radius: 999px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.8); opacity: 0; } .pbc-mhome-mascot-bubbles i { right: 26%; bottom: 62%; width: 7px; height: 7px; animation: pbc-mascot-bubble 5.2s ease-in infinite; } .pbc-mhome-mascot-bubbles i:nth-child(2) { right: 34%; width: 5px; height: 5px; animation-delay: 1.9s; } .pbc-mhome-mascot-bubbles i:nth-child(3) { right: 20%; width: 4px; height: 4px; animation-delay: 3.4s; } @keyframes pbc-mascot-bubble { 0% { opacity: 0; transform: translateY(0) scale(0.7); } 12% { opacity: 0.9; } 55% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-46px) scale(1.15); } } /* Ráfaga del toque: cinco burbujas de golpe, solo mientras dura la reacción. */ .pbc-mhome-mascot-burst i { right: 28%; bottom: 58%; width: 6px; height: 6px; } .pbc-mhome-mascot-box.is-tapped .pbc-mhome-mascot-burst i { animation: pbc-mascot-bubble 0.9s ease-out 1; } .pbc-mhome-mascot-box.is-tapped .pbc-mhome-mascot-burst i:nth-child(2) { right: 18%; width: 5px; height: 5px; animation-delay: 0.06s; } .pbc-mhome-mascot-box.is-tapped .pbc-mhome-mascot-burst i:nth-child(3) { right: 38%; width: 4px; height: 4px; animation-delay: 0.12s; } .pbc-mhome-mascot-box.is-tapped .pbc-mhome-mascot-burst i:nth-child(4) { right: 12%; width: 4px; height: 4px; animation-delay: 0.18s; } .pbc-mhome-mascot-box.is-tapped .pbc-mhome-mascot-burst i:nth-child(5) { right: 32%; width: 6px; height: 6px; animation-delay: 0.24s; } /* ── AJOLOTE POR PIEZAS (Guille, 20/08/2026): nada de verdad ───────────── Capas sueltas: el conjunto sube, baja y se ladea; la cola rema; cada branquia ondea con su pequeño desfase; la mano saluda de vez en cuando. Al tocarlo, botecito con squash del conjunto entero. Posiciones afinadas a ojo sobre la maqueta local (static/images/ajolote/test.html). */ /* AJOLOTE DE RIVE (Guille, 21/08/2026): el lienzo ocupa el mismo hueco que el dibujo y va justo encima. Mientras Rive no ha cargado el lienzo está transparente y se ve el dibujo de siempre; en cuanto carga, la caja se marca ``is-rive`` y el dibujo quieto se esconde (no se borra: si algo fallara después, basta con quitar la clase). */ .pbc-mhome-mascot-rive { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; pointer-events: auto; cursor: pointer; } .pbc-mhome-mascot-box.is-rive .pbc-mhome-mascot { visibility: hidden; } .pbc-mhome-mascot-viva { pointer-events: auto; cursor: pointer; } .pbc-mhome-aj { position: absolute; inset: 0; display: block; } .pbc-mhome-aj img { position: absolute; display: block; height: auto; border: 0; user-select: none; -webkit-user-drag: none; } .pbc-mhome-aj { transform-origin: 50% 85%; animation: pbc-aj-nado 3.2s ease-in-out infinite; } .pbc-mhome-mascot-viva.is-tapped .pbc-mhome-aj { animation: pbc-aj-boing 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 1, pbc-aj-nado 3.2s ease-in-out 0.65s infinite; } @keyframes pbc-aj-nado { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-7px) rotate(2.5deg); } } @keyframes pbc-aj-boing { 0% { transform: scale(1); } 28% { transform: scale(1.1, 0.86); } 58% { transform: scale(0.94, 1.08) translateY(-5px); } 100% { transform: scale(1); } } .aj-cuerpo { left: 44%; bottom: -6px; width: 58%; transform: translateX(-50%); z-index: 3; } .aj-cola { left: 52%; bottom: 0; width: 52%; z-index: 1; transform-origin: 12% 80%; animation: pbc-aj-cola 3.2s ease-in-out infinite; } @keyframes pbc-aj-cola { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(-7deg); } } .aj-b { z-index: 2; transform-origin: 80% 90%; animation: pbc-aj-branquia 3.2s ease-in-out infinite; } .aj-b.aj-izq { transform: scaleX(-1); transform-origin: 20% 90%; animation-name: pbc-aj-branquia-izq; } .aj-b1 { left: 2%; top: 14%; width: 17%; } .aj-b2 { left: -2%; top: 28%; width: 15%; animation-delay: 0.35s; } .aj-b3 { left: 1%; top: 42%; width: 13%; animation-delay: 0.7s; } .aj-b4 { right: 12%; top: 14%; width: 17%; } .aj-b5 { right: 7%; top: 28%; width: 15%; animation-delay: 0.45s; } .aj-b6 { right: 10%; top: 42%; width: 13%; animation-delay: 0.9s; } @keyframes pbc-aj-branquia { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(7deg); } } @keyframes pbc-aj-branquia-izq { 0%, 100% { transform: scaleX(-1) rotate(0deg); } 50% { transform: scaleX(-1) rotate(7deg); } } /* La manita saluda dos veces y descansa, en bucle largo: vivo sin cansar. */ .aj-mano { right: 26%; bottom: 2%; width: 20%; z-index: 4; transform-origin: 50% 88%; animation: pbc-aj-saludo 5.6s ease-in-out infinite; } @keyframes pbc-aj-saludo { 0%, 74%, 100% { transform: rotate(0deg); } 78% { transform: rotate(-24deg); } 82% { transform: rotate(-4deg); } 86% { transform: rotate(-24deg); } 92% { transform: rotate(0deg); } } /* Con "reducir movimiento" del sistema: quieto como antes, sin burbujas. */ @media (prefers-reduced-motion: reduce) { .pbc-mhome-mascot, .pbc-mhome-mascot-box.is-greeting .pbc-mhome-mascot, .pbc-mhome-mascot-box.is-tapped .pbc-mhome-mascot, .pbc-mhome-aj, .aj-cola, .aj-b, .aj-mano, .pbc-mhome-mascot-viva.is-tapped .pbc-mhome-aj, .pbc-mhome-mascot-bubbles i, .pbc-mhome-mascot-box.is-tapped .pbc-mhome-mascot-burst i { animation: none; } } /* ── Confirmar que vienes ────────────────────────────────────────────────── Aviso de acción: solo aparece cuando hay algo pendiente, así que puede permitirse gritar un poco (borde ámbar y fondo cálido) sin ensuciar la portada del día a día. */ .pbc-mhome-confirm { padding: 14px; border: 2px solid #F5B301; background: #FFF8E6; } .pbc-mhome-confirm-head { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 9px; margin-bottom: 11px; } .pbc-mhome-confirm-ico { width: 26px !important; height: 26px !important; color: #B57500; } .pbc-mhome-confirm-text { min-width: 0; } .pbc-mhome-confirm-title { display: block; color: #7A4E00; font-size: 16px; font-weight: 800; line-height: 1.2; overflow-wrap: break-word; } .pbc-mhome-confirm-when { display: block; margin-top: 2px; color: #8A6320; font-size: 14px; font-weight: 700; } /* El botón ocupa TODO el ancho: es lo único que hay que tocar aquí. */ .pbc-mhome-confirm-btn { display: block; width: 100%; border: 0; text-align: center; } .pbc-mhome-confirm-link { display: block; margin-top: 9px; color: #8A6320; font-size: 13px; font-weight: 700; text-align: center; text-decoration: underline; } .pbc-mhome-confirm-done { margin: 0; color: #1A7A3C; font-size: 16px; font-weight: 800; text-align: center; } /* ── Accesos rápidos ───────────────────────────────────────────────────── */ .pbc-mhome-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .pbc-mhome-quick-item { display: grid; min-width: 0; min-height: 88px; grid-template-columns: 43px minmax(0, 1fr) 15px; align-items: center; gap: 9px; padding: 13px; border: 1px solid rgba(208, 221, 233, 0.62); border-radius: 22px; color: var(--mh-ink); background: #fff; box-shadow: var(--mh-shadow); text-align: left; text-decoration: none; } .pbc-mhome-quick-item:hover, .pbc-mhome-quick-item:focus { color: var(--mh-ink); text-decoration: none; } .pbc-mhome-quick-ico { width: 42px; height: 42px; color: #13B9E7; } .pbc-mhome-quick-text { min-width: 0; } .pbc-mhome-quick-title { display: block; /* Los rótulos largos (según el idioma) se quedan DENTRO de su columna: si no, la palabra se comía la flechita. */ min-width: 0; overflow-wrap: break-word; color: var(--mh-ink); /* Un pelín más pequeño que la maqueta (hecha a 430px) para que en un móvil de 375px "Exchanges" quepa entero y no se parta por la mitad. */ font-size: clamp(13px, 3.6vw, 16px); font-weight: 800; line-height: 1.17; } .pbc-mhome-quick-action { display: block; margin-top: 5px; color: var(--mh-blue); font-size: clamp(12px, 3.25vw, 14px); font-weight: 500; line-height: 1.15; white-space: nowrap; } .pbc-mhome-chevron { width: 15px; height: 24px; color: var(--mh-blue); } /* ── Por que PBC funciona (Guille 16/08/2026) ───────────────────────────── Tarjeta de SOLO TEXTO, sin sombra ni icono: tiene que leerse como una nota de la casa, no competir con las tarjetas en las que hay que tocar. */ .pbc-mhome-why { margin-top: 14px; padding: 15px 16px; background: #EAF3FD; border: 1px solid #D2E4F7; border-radius: var(--mh-radius); } /* DESPLEGABLE cerrado de fábrica (Guille, 20/08/2026): fuera solo el título con su flechita, para la home limpia.

nativo, sin JS. */ .pbc-mhome-why-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; } .pbc-mhome-why-summary::-webkit-details-marker { display: none; } .pbc-mhome-why-chev { flex: 0 0 auto; color: var(--mh-blue); transition: transform 0.2s ease; } .pbc-mhome-why[open] .pbc-mhome-why-chev { transform: rotate(180deg); } .pbc-mhome-why[open] .pbc-mhome-why-summary { margin-bottom: 8px; } .pbc-mhome-why-title { margin: 0; color: var(--mh-blue); font-size: 15px; font-weight: 800; line-height: 1.2; } /* En puntos, no en parrafada (Guille 18/08/2026). Los dos primeros llevan palomita verde ("esto te lo damos") y los dos siguientes una raya ámbar ("esto te falta si sólo haces una"). El símbolo va en ::before y no como texto: así no se puede seleccionar ni se lee en voz alta. */ .pbc-mhome-why-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; } .pbc-mhome-why-list li { position: relative; padding-left: 20px; color: var(--mh-ink); font-size: 13px; font-weight: 500; line-height: 1.45; } .pbc-mhome-why-list b { font-weight: 800; } .pbc-mhome-why-list li::before { position: absolute; left: 0; top: 0; font-weight: 900; } .pbc-mhome-why-yes::before { content: "✓"; color: #12A37A; } .pbc-mhome-why-no::before { content: "–"; color: #C08A2A; } .pbc-mhome-why-no { color: #55697C; } .pbc-mhome-why-punch { margin: 10px 0 0; padding-top: 9px; color: var(--mh-blue); border-top: 1px solid #D2E4F7; font-size: 13.5px; font-weight: 800; line-height: 1.4; } /* El punto verde de PBC Live en la fila de Intercambios (Guille, 18/08/2026, segunda vuelta: "Live nunca aparece en la home; como mucho un punto verde parpadeando en el botón Exchanges"). Late despacio: encender y apagar seco marea y en un móvil se lee como un error. Tamaño, sitio y color van en línea en la plantilla, porque las hojas globales pisan a esta. */ .pbc-mhome-quick-live { animation: pbc-mhome-livedot 1.6s ease-in-out infinite; } .pbc-mhome-quick-live[hidden] { display: none; } @keyframes pbc-mhome-livedot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.82); } } @media (prefers-reduced-motion: reduce) { .pbc-mhome-quick-live { animation: none; } } /* ── Descarga la app / activa los avisos ─────────────────────────────────── Guille (18/08/2026): "mucho más bonito, mismo estilo que la home; un botón sin mucho texto y una de nuestras mascotas". Así que la tarjeta no lleva título ni párrafo: mascota grande a la izquierda y el botón mandando. Dragón para la app, lorita para los avisos (las pinta el JS). Nace apagada: la enciende el JS solo a quien le falta algo. */ .pbc-mgetapp { display: none; align-items: center; gap: 4px; overflow: hidden; padding: 12px 16px 12px 8px; } .pbc-mgetapp.is-on { display: flex; } .pbc-mgetapp-mascot { flex: none; width: 104px; height: 104px; margin: -6px 0; object-fit: contain; object-position: center bottom; pointer-events: none; user-select: none; } .pbc-mgetapp-body { flex: 1 1 auto; min-width: 0; } /* El botón manda: ocupa todo el hueco que deja la mascota (el .pbc-mhome-cta de la portada viene con ancho fijo de 194px, aquí se suelta). */ .pbc-mgetapp-cta { width: 100%; margin-top: 0; } .pbc-mgetapp-no { display: block; width: 100%; margin: 9px 0 0; padding: 2px; border: 0; background: none; color: #5F6B7A; font-family: inherit; font-size: 13px; font-weight: 700; } .pbc-mgetapp-hint { margin: 9px 0 0; color: #5F6B7A; font-size: 12.5px; font-weight: 600; line-height: 1.35; } .pbc-mgetapp-hint[hidden] { display: none; } /* ── Usa tu llave (Guille, 23/08/2026) ───────────────────────────────────── Misma piel que la tarjeta del dragón/lorita, justo encima: llave grande a la izquierda, dos líneas de texto y el botón amarillo de la portada ocupando el ancho. Toda la tarjeta es el enlace. */ .pbc-mhome-keys { display: block; padding: 14px 16px; color: inherit; text-decoration: none; } .pbc-mhome-keys:hover, .pbc-mhome-keys:focus { color: inherit; text-decoration: none; } .pbc-mhome-keys-ico { float: left; margin: 0 12px 0 0; font-size: 30px; line-height: 1.1; } .pbc-mhome-keys-text { display: block; overflow: hidden; } .pbc-mhome-keys-text strong { display: block; color: var(--mh-ink); font-size: 16px; font-weight: 800; } .pbc-mhome-keys-text small { display: block; margin-top: 3px; color: #5F6B7A; font-size: 12.5px; font-weight: 600; line-height: 1.35; } .pbc-mhome-keys-btn { width: 100%; margin-top: 12px; } } /* Pantallas estrechas: los mismos ajustes que trae la maqueta para 374px, pero aplicados hasta 409px. La maqueta está dibujada a 430px de ancho; en un móvil de 375 los accesos rápidos se quedaban sin sitio y partían las palabras. */ @media (max-width: 409.98px) { .pbc-mhome-body { padding-right: 11px; padding-left: 11px; } .pbc-mhome-hero { padding-right: 17px; padding-left: 17px; } .pbc-mhome-mascot-box { max-width: 140px; height: calc(100% - 16px); max-height: 164px; } .pbc-mhome-sub { font-size: 13px; } .pbc-mhome-quick { gap: 9px; } .pbc-mhome-quick-item { grid-template-columns: 35px minmax(0, 1fr) 12px; gap: 7px; padding: 12px 9px; } .pbc-mhome-quick-ico { width: 35px; height: 35px; } .pbc-mhome-quick-action { font-size: 11px; } .pbc-mgetapp-mascot { width: 88px; height: 88px; } } /* ── Panel del PROFE (19/08/2026) ────────────────────────────────────────── Sus accesos llevan descripciones más largas que las del alumno ("Open and edit time slots"...): con el nowrap de arriba se salían de la tarjeta y se descuadraban (Guille, 20/08/2026). Aquí la letra baja un punto y puede partirse en dos líneas sin empujar la flechita. */ .pbc-mhome--profe .pbc-mhome-quick-action { font-size: clamp(11px, 3vw, 12.5px); white-space: normal; overflow-wrap: break-word; } .pbc-mhome--profe .pbc-mhome-quick-title { font-size: clamp(13px, 3.4vw, 15px); } @media (max-width: 767.98px) { /* ── EL AJOLOTE QUE SE PASEA (Guille, 21/08/2026) ───────────────────────────── "Que nade por toda la home, que se haga más grande y más pequeño, que se encarame en el icono de ayuda o en el perfil, que baje al pie y se quede ahí un rato". Es el DIBUJO ENTERO de siempre metido en una capa que flota por encima de la portada; quien lo mueve es static/js/pbc-ajolote-paseo.js. Reglas de la casa que se respetan aquí: · La capa NO recibe toques (pointer-events: none): solo el dibujo. El botón de reservar y los iconos de arriba siguen siendo suyos. · Va por debajo de la barra de abajo (z-index 1030) para no taparla nunca. · Solo en el móvil, que es donde vive esta portada. */ /* Cuando hay paseo, el ajolote de la tarjeta se esconde: solo hay UNO, y es el que anda suelto (su casa sigue siendo esta esquina). */ /* El dibujo de siempre solo se esconde MIENTRAS el otro anda suelto (Guille, 23/08/2026: "como siempre es la versión que tiene ahora mismo la gente"). En reposo manda este, que es el que conoce todo el mundo; el que nada aparece al tocarlo y se guarda al volver a su sitio. La clase la pone el JS, así que si el JS no llega la tarjeta se ve igual que siempre. */ .pbc-mhome-mascot-box--paseo.is-paseando .pbc-mhome-mascot, .pbc-mhome-mascot-box--paseo.is-paseando .pbc-mhome-aj { visibility: hidden; } .pbc-ajolote-paseo { display: block; position: fixed; top: 0; left: 0; width: 172px; /* la proporción de cada fotograma de la tira (320x280) */ height: 150px; z-index: 1020; pointer-events: none; will-change: transform; transform-origin: 50% 50%; /* Hasta que el JS lo coloca no se enseña: si no, aparecería un fotograma pegado a la esquina de arriba a la izquierda. */ opacity: 0; transition: opacity .45s ease; } .pbc-ajolote-paseo.is-listo { opacity: 1; } /* Guardado: ni se ve ni recibe toques; el dedo va al dibujo de la tarjeta. */ .pbc-ajolote-paseo.is-guardado { opacity: 0; } .pbc-ajolote-paseo.is-guardado .pbc-ajolote-paseo-img { display: none; } /* El dibujo de verdad no se enseña: es de donde el lienzo copia las tiras. */ .pbc-ajolote-paseo-fuente { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .pbc-ajolote-paseo-img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: auto; cursor: grab; /* Sin esto, en el móvil el dedo arrastra la página en vez del ajolote. */ touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .18)); } /* Al tocarlo: botecito con squash, como el de la tarjeta de siempre. */ .pbc-ajolote-paseo-img.is-tocado { animation: pbc-ajpaseo-boing .6s cubic-bezier(.34, 1.56, .64, 1) 1; } @keyframes pbc-ajpaseo-boing { 0% { transform: scale(1, 1); } 28% { transform: scale(1.18, .84) rotate(-6deg); } 55% { transform: scale(.9, 1.14) rotate(5deg); } 78% { transform: scale(1.06, .96) rotate(-2deg); } 100% { transform: scale(1, 1); } } /* COGIDO CON EL DEDO (Guille, 21/08/2026): crece la sombra, como si lo levantaras del agua. Al soltarlo en un sitio suyo se queda plantado ahí hasta que lo vuelvas a tocar. */ .pbc-ajolote-paseo.is-cogido .pbc-ajolote-paseo-img { cursor: grabbing; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .28)); } .pbc-ajolote-paseo-burbuja { position: absolute; top: 40px; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .82); box-shadow: inset 0 0 0 1px rgba(11, 61, 92, .18); pointer-events: none; animation: pbc-ajpaseo-burbuja 1.3s ease-out forwards; } @keyframes pbc-ajpaseo-burbuja { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 18% { opacity: .95; } 100% { transform: translate(14px, -70px) scale(1.15); opacity: 0; } } @media (prefers-reduced-motion: reduce) { /* Con "reducir movimiento" el JS ni se enciende, pero por si llegase a pintarse: quieto y sin sombras raras. */ .pbc-ajolote-paseo { display: none; } } } /* ── "Tu agenda": todo lo reservado, bajo el hero (Guille, 24/08/2026) ──── Clases en azul, intercambios en verde, eventos en morado. Solo se pinta si hay algo reservado; la vista manda como mucho 4 filas ya ordenadas. */ @media (max-width: 767.98px) { .pbc-mhome-agenda { padding: 18px 18px 14px; /* La tarjeta vive en un grid: sin esto, los textos sin salto (nombre, hora) la hacen MAS ANCHA que la pantalla y toda la portada se corta por la derecha (Guille lo vio 24/08, "como con zoom"). */ min-width: 0; } .pbc-mhome-agenda-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .pbc-mhome-agenda-row { display: flex; align-items: center; gap: 12px; min-height: 48px; color: inherit; text-decoration: none; } .pbc-mhome-agenda-row:hover, .pbc-mhome-agenda-row:focus { color: inherit; text-decoration: none; } .pbc-mhome-agenda-ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 21px; } .pbc-mhome-agenda-ico--class { background: #EAF3FD; } .pbc-mhome-agenda-ico--exchange { background: #E9FBF1; } .pbc-mhome-agenda-ico--event { background: #F3EDFC; } .pbc-mhome-agenda-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .pbc-mhome-agenda-what { font-weight: 700; font-size: 15px; color: var(--mh-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pbc-mhome-agenda-sub { font-size: 12.5px; color: #5F7186; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pbc-mhome-agenda-when { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .pbc-mhome-agenda-time { font-weight: 700; font-size: 13px; color: var(--mh-ink); white-space: nowrap; } .pbc-mhome-agenda-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; border-radius: 999px; padding: 2px 8px; } .pbc-mhome-agenda-tag--class { color: var(--mh-blue); background: #EAF3FD; } .pbc-mhome-agenda-tag--exchange { color: #0B7A46; background: #E9FBF1; } .pbc-mhome-agenda-tag--event { color: #6B3FA0; background: #F3EDFC; } .pbc-mhome-agenda-link { display: block; margin-top: 14px; text-align: center; font-weight: 700; font-size: 14px; color: var(--mh-blue); text-decoration: none; } .pbc-mhome-agenda-link:hover, .pbc-mhome-agenda-link:focus { color: var(--mh-blue); } }