/** * Multicines PWA — mcp-pantallas.css * * v0.2.2 (D2.3): estilos propios de cada pantalla (lo que no es componente reutilizable). * Solo tokens semánticos. * v0.2.3 (D2.4): la imagen se limita también por la altura (antes, a 320x568 el botón quedaba abajo * del pliegue) y en horizontal el paso se reparte en dos columnas. Textos con --mcp-sobre-marca. */ /* ── Bienvenida (Onboarding.tsx + NotificationEnable.tsx) ─────────────── */ .mcp-pantalla-bienvenida, .mcp-pagina-bienvenida { background: var(--mcp-marca-fondo); } /* en computadora, sin franjas blancas a los lados. v0.2.6: clase del en vez de :has(), que Safari 15 no soporta */ .mcp-pantalla-bienvenida .mcp-main { padding: 0; display: flex; min-width: 0; } .mcp-bienvenida { flex: 1; min-width: 0; /* sin esto el carrusel ensancha la página (hallazgo en QA v0.2.2) */ display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; /* v0.2.6: respaldo en vh para Safari < 15.4 */ background: var(--mcp-marca-fondo); /* AppGradient.tsx: morado plano */ color: var(--mcp-sobre-marca); /* Onboarding.tsx: textos blancos */ padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } .mcp-bienvenida-barra { display: flex; align-items: center; justify-content: space-between; padding: var(--mcp-esp-3) var(--mcp-gutter); } .mcp-bienvenida-logo { height: 36px; width: auto; } /* v0.2.4: el RN no pone logo en el onboarding; se sube de 24 a 36 px para que se lea */ .mcp-bienvenida-omitir { /* mejora: "Omitir" estaba comentado en Onboarding.tsx */ display: inline-flex; align-items: center; min-height: var(--mcp-tactil-min); padding: 0 var(--mcp-esp-3); color: var(--mcp-sobre-marca); font-size: var(--mcp-texto-base); font-weight: var(--mcp-peso-semi); text-decoration: underline; text-underline-offset: 3px; } .mcp-bienvenida-pista { flex: 1; min-width: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } .mcp-bienvenida-pista::-webkit-scrollbar { display: none; } .mcp-bienvenida-pista:focus { outline: none; } .mcp-bienvenida-paso { flex: 0 0 100%; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--mcp-esp-5); padding: var(--mcp-esp-5) var(--mcp-gutter); text-align: center; } .mcp-bienvenida-titulo { font-size: var(--mcp-texto-4xl); font-weight: var(--mcp-peso-bold); } /* v0.2.4: Onboarding.tsx:137 fontPixel(32) = 30 px */ .mcp-bienvenida-titulo:focus { outline: none; } .mcp-bienvenida-imagen img { width: min(72vw, 300px); width: min(72vw, 300px, 36dvh); height: auto; } /* v0.2.6: respaldo sin dvh */ /* Onboarding: 300-350 */ .mcp-bienvenida-texto { max-width: 20rem; font-size: var(--mcp-texto-base); line-height: 1.5; } /* v0.2.4: Onboarding.tsx:143 fontPixel(17) = 16 px */ .mcp-bienvenida-acciones { width: 100%; max-width: 22rem; display: grid; gap: var(--mcp-esp-3); margin-top: var(--mcp-esp-3); } .mcp-bienvenida-campana { color: var(--mcp-sobre-marca); } .mcp-bienvenida-campana svg { width: min(150px, 38vw); height: auto; } /* NotificationEnable.tsx:16 size 150 */ /* NotificationEnable: bell-o 150 blanco */ .mcp-bienvenida-titulo--avisos { font-size: var(--mcp-texto-2xl); font-weight: var(--mcp-peso-semi); max-width: 20rem; } /* v0.2.4: NotificationEnable.tsx:53-55 X22 / 600 */ .mcp-bienvenida-puntos { display: flex; justify-content: center; gap: var(--mcp-esp-2); padding: var(--mcp-esp-3) 0 var(--mcp-esp-5); } .mcp-bienvenida-punto { /* Swiper: dotColor grey, activeDotColor white */ display: flex; align-items: center; justify-content: center; width: var(--mcp-tactil-min); height: var(--mcp-tactil-min); } .mcp-bienvenida-punto::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); transition: width var(--mcp-transicion), background-color var(--mcp-transicion); } .mcp-bienvenida-punto.is-activo::after { width: 24px; border-radius: var(--mcp-radio-pill); background: var(--mcp-sobre-marca); } /* v0.2.3 (D2.4): teléfono en horizontal. Imagen a la izquierda, título, texto y botón a la derecha. */ @media (max-height: 30em) and (min-width: 30em) { .mcp-bienvenida-paso { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "imagen titulo" "imagen texto" "imagen acciones"; align-content: center; justify-items: start; column-gap: var(--mcp-esp-6); row-gap: var(--mcp-esp-3); text-align: left; } .mcp-bienvenida-titulo { grid-area: titulo; font-size: var(--mcp-texto-2xl); } .mcp-bienvenida-imagen, .mcp-bienvenida-campana { grid-area: imagen; align-self: center; } .mcp-bienvenida-imagen img { width: min(40vw, 55dvh); } .mcp-bienvenida-campana svg { width: min(30vw, 40dvh); height: auto; } .mcp-bienvenida-texto { grid-area: texto; } .mcp-bienvenida-acciones { grid-area: acciones; margin-top: 0; } .mcp-bienvenida-paso--avisos { grid-template-areas: "imagen titulo" "imagen acciones"; } .mcp-bienvenida-puntos { padding: 0 0 var(--mcp-esp-2); } .mcp-bienvenida-barra { padding-block: var(--mcp-esp-1); } } /* v0.2.3 (D2.4): alto contraste. Los puntos eran solo manchas de color. */ @media (forced-colors: active) { .mcp-bienvenida-punto::after { forced-color-adjust: none; background: CanvasText; } .mcp-bienvenida-punto.is-activo::after { background: Highlight; } } @media (prefers-reduced-motion: reduce) { .mcp-bienvenida-punto::after { transition: none; } }