/* |-------------------------------------------------------------------------- | asm-marca.css — sistema de diseño de Agency Solutions Max |-------------------------------------------------------------------------- | | Port a CSS plano del sistema de diseño que vive en Tailwind dentro de | asm_blindado (`frontend/src/app/globals.css`). Se carga DESPUÉS de | asm-redesign.css: las variables de :root se redefinen aquí y, como el | resto de la hoja las consume, todo el sitio adopta la paleta sin tocar | los 215 KB del archivo anterior. | | Los valores no son una interpretación: están medidos sobre el sitio en | producción y sobre el logotipo. | - Azul marino de titulares .... rgb(5, 38, 78) #05264e | - Rojo de llamada a la acción . rgb(205, 44, 34) #cd2c22 | - Rojo puro del logotipo ...... #ff0000 (sólo acento; sobre blanco no | llega a AA para texto, así que nunca se usa en superficies grandes) | - Tipografía .................. Jost | | El tema oscuro se activa por atributo (`data-theme="dark"`, que pone | assets/js/tema.js antes del primer pintado), NO por prefers-color-scheme: | el claro es la identidad y el oscuro sólo si el usuario lo elige. */ /* |-------------------------------------------------------------------------- | 1. Tokens |-------------------------------------------------------------------------- */ :root { /* Escala azul marino, anclada en el #05264e del sitio */ --asm-navy-50: #f2f6fb; --asm-navy-100: #e4ebf4; --asm-navy-200: #c5d4e6; --asm-navy-300: #96b0cf; --asm-navy-400: #5f83ad; --asm-navy-500: #375f8d; --asm-navy-600: #1d4370; --asm-navy-700: #0d3159; --asm-navy-800: #05264e; --asm-navy-900: #041c3b; --asm-navy-950: #021129; /* Escala de marca, anclada en el #cd2c22 del botón principal */ --asm-brand-50: #fdf3f2; --asm-brand-100: #fbe3e1; --asm-brand-200: #f7c9c5; --asm-brand-300: #ef9d96; --asm-brand-400: #e35f54; --asm-brand-500: #cd2c22; --asm-brand-600: #b0231b; --asm-brand-700: #8e1c16; --asm-brand-pure: #ff0000; /* * Tokens semánticos. Son los únicos que cambian entre temas: las * escalas navy y brand se quedan quietas para que un fondo azul marino * siga siendo azul marino en ambos temas (hero, columna de acceso). */ --asm-primary: #05264e; --asm-primary-soft: #0d3159; --asm-accent: #cd2c22; --asm-accent-dark: #b0231b; --asm-background: #f1f4f9; --asm-surface: #ffffff; --asm-surface-soft: #f8fafc; --asm-border: #e4e7ec; --asm-text: #05264e; /* * Medido sobre --asm-background: 5,7:1. El #667085 anterior se quedaba * en 4,51 — pasa AA por milímetros y cualquier ajuste lo tumbaría. */ --asm-muted: #55607a; --asm-subtle: #78849c; --asm-success: #12b76a; --asm-radius-sm: 12px; --asm-radius: 16px; --asm-radius-lg: 24px; --asm-radius-pill: 999px; /* Sombras teñidas de azul marino, no de negro: el gris puro ensucia */ --asm-shadow-sm: 0 1px 2px rgba(5, 38, 78, .05), 0 6px 18px rgba(5, 38, 78, .07); --asm-shadow: 0 1px 2px rgba(5, 38, 78, .05), 0 6px 18px rgba(5, 38, 78, .07); --asm-shadow-lift: 0 20px 48px rgba(5, 38, 78, .16); --asm-transition: 180ms ease; } :root[data-theme="dark"] { --asm-background: #060d1a; --asm-surface: #0e1729; --asm-surface-soft: #141f36; --asm-border: #1f2d4a; --asm-text: #e8eef8; --asm-muted: #93a4bf; --asm-subtle: #6b7f9e; --asm-primary: #e8eef8; --asm-primary-soft: #c5d4e6; /* El #cd2c22 pierde legibilidad sobre superficie oscura: sube un paso */ --asm-accent: #e35f54; --asm-accent-dark: #cd2c22; --asm-brand-50: rgba(205, 44, 34, .14); color-scheme: dark; } /* |-------------------------------------------------------------------------- | 2. Tipografía |-------------------------------------------------------------------------- | | Jost es la tipografía del sitio. Se declara en cascada con la pila del | sistema detrás: si Google Fonts no responde, el texto sigue leyéndose con | métricas parecidas en lugar de caer a Times. */ body, .asm-home, .asm-main-header { font-family: Jost, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif; } body { background: var(--asm-background); color: var(--asm-text); -webkit-font-smoothing: antialiased; } /* Foco visible y consistente: requisito de accesibilidad, no decoración. */ :focus-visible { outline: 2px solid var(--asm-accent); outline-offset: 2px; } /* |-------------------------------------------------------------------------- | 3. Primitivas |-------------------------------------------------------------------------- */ .asm-card { background: var(--asm-surface); border: 1px solid var(--asm-border); border-radius: var(--asm-radius); box-shadow: var(--asm-shadow-sm); } .asm-campo { width: 100%; border: 1px solid var(--asm-border); border-radius: var(--asm-radius-sm); background: var(--asm-surface); color: var(--asm-text); padding: .8rem .875rem; font-size: .9375rem; transition: border-color var(--asm-transition), box-shadow var(--asm-transition); } .asm-campo::placeholder { color: var(--asm-subtle); } .asm-campo:focus { outline: none; border-color: var(--asm-accent); box-shadow: 0 0 0 4px rgba(205, 44, 34, .12); } .asm-etiqueta { display: block; margin-bottom: .375rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--asm-muted); } .asm-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 1px solid transparent; border-radius: var(--asm-radius-sm); padding: .8rem 1.5rem; font-size: .9375rem; font-weight: 600; line-height: 1; cursor: pointer; text-decoration: none; transition: background var(--asm-transition), border-color var(--asm-transition), color var(--asm-transition), transform var(--asm-transition); } .asm-btn--acento { background: var(--asm-accent); color: #fff; text-transform: uppercase; letter-spacing: .06em; font-size: .875rem; } .asm-btn--acento:hover { background: var(--asm-accent-dark); color: #fff; } .asm-btn--acento:active { transform: translateY(1px); } .asm-btn--acento:disabled { opacity: .6; cursor: not-allowed; } .asm-btn--linea { background: transparent; border-color: var(--asm-border); color: var(--asm-text); } .asm-btn--linea:hover { border-color: var(--asm-muted); color: var(--asm-text); } .asm-btn--bloque { width: 100%; } /* |-------------------------------------------------------------------------- | 4. Cabecera sobre el hero |-------------------------------------------------------------------------- | | La cabecera va superpuesta a la foto, no encima de ella: por eso es | absoluta y con fondo transparente hasta que se hace scroll. El logotipo | tiene dos versiones apiladas en una caja de dimensiones fijas y sólo se | anima la opacidad — así no salta al cambiar de una a otra. */ /* * La clase la pone quien monta la página (home.php, login.php, * registro.php), no un selector de posición: el
es hermano * anterior de
, así que desde .asm-home no se le puede llegar. * * `fixed` en lugar del `sticky` general: sticky ocupa sitio en el flujo y * empujaba el hero 74 px hacia abajo, de modo que la foto no llegaba al * borde superior. Fijo se mantiene en fixed también al hacer scroll, así * que no hay salto cuando entra `is-scrolled` y la barra se vuelve sólida. */ /* * Sin arrastre horizontal en móvil. El ya lleva overflow-x:hidden * (style.css), pero el no: cualquier resto de gutter (p. ej. la fila * g-5 del pie) dejaba desplazar la página de lado, y con el navbar fijo se * veía "corrido" al hacer scroll —notorio cuando hay barra de scroll clásica, * como en la vista Responsive del navegador—. Se usa `clip`, no `hidden`, * para NO romper el position:sticky de las cabeceras no-hero del panel. */ html { overflow-x: clip; } .asm-main-header.asm-header--hero { position: fixed !important; top: 0; left: 0; right: 0; z-index: 1030; } .asm-main-header.asm-header--hero:not(.is-scrolled) { background: transparent !important; border-bottom-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* * `background` es imprescindible aquí, no sólo el color del texto: * .asm-nav-login trae `background: #ffffff` y sobre la foto quedaba una * pastilla blanca con el texto blanco dentro, es decir, invisible. */ .asm-main-header.asm-header--hero:not(.is-scrolled) .asm-nav-login, .asm-main-header.asm-header--hero:not(.is-scrolled) .asm-tema, .asm-main-header.asm-header--hero:not(.is-scrolled) .asm-header-icon-button { color: rgba(255, 255, 255, .82) !important; border-color: rgba(255, 255, 255, .28) !important; background: rgba(255, 255, 255, .1) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .asm-main-header.asm-header--hero:not(.is-scrolled) .asm-nav-login:hover, .asm-main-header.asm-header--hero:not(.is-scrolled) .asm-tema:hover, .asm-main-header.asm-header--hero:not(.is-scrolled) .asm-header-icon-button:hover { color: #fff !important; border-color: rgba(255, 255, 255, .5) !important; background: rgba(255, 255, 255, .2) !important; } .asm-main-header.asm-header--hero .asm-nav-register { background: var(--asm-brand-500); color: #fff; border-color: transparent; } .asm-main-header.asm-header--hero .asm-nav-register:hover { background: var(--asm-brand-600); color: #fff; } /* * Sobre la foto hay que usar el logotipo claro. Los dos van apilados en una * caja de dimensiones fijas y sólo se anima la opacidad, así que el cambio * no mueve nada de sitio. */ .asm-main-header.asm-header--hero:not(.is-scrolled) .asm-logo-default { opacity: 0; visibility: hidden; } /* min_as_b_256_alt.png ya es la versión para fondo oscuro: no lleva filtro. */ .asm-main-header.asm-header--hero:not(.is-scrolled) .asm-logo-scrolled { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); } /* * Estado PEGAJOSO (is-scrolled). * * Se deja el MISMO comportamiento que la portada: barra navy sólida con el * logotipo y los controles en blanco (lo aporta asm-redesign.css). Aquí sólo * se garantiza que quede SÓLIDA de verdad —sin el desenfoque translúcido que * arrastraban los botones del hero— reafirmando el color de fondo y quitando * el backdrop-filter. El problema real por el que se veía translúcida no era * el estilo, sino que is-scrolled no llegaba a activarse: eso se corrigió en * assets/js/funciones.js (initAsmHeader con IntersectionObserver). */ .asm-main-header.asm-header--hero.is-scrolled { background: rgba(8, 24, 38, .98) !important; border-bottom: 1px solid rgba(255, 255, 255, .08) !important; box-shadow: 0 10px 30px rgba(5, 20, 38, .18) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Controles del hero: fuera la pastilla translúcida y el desenfoque. */ .asm-main-header.asm-header--hero.is-scrolled .asm-nav-login, .asm-main-header.asm-header--hero.is-scrolled .asm-tema, .asm-main-header.asm-header--hero.is-scrolled .asm-header-icon-button { background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .14) !important; color: #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* |-------------------------------------------------------------------------- | 5. Hero de portada |-------------------------------------------------------------------------- */ .asm-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--asm-navy-950); padding: 7rem 0 13rem; } .asm-hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } /* * Velo. El sitio original funde la foto hacia negro puro; aquí se funde * hacia el azul marino corporativo, que da más profundidad y deja el rojo * del logotipo mucho más limpio encima. */ .asm-hero__velo { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient( 100deg, rgba(2, 17, 41, .28) 0%, rgba(4, 28, 59, .86) 38%, var(--asm-navy-900) 68%, var(--asm-navy-950) 100% ); } .asm-hero__titular { max-width: 40rem; margin: 0; font-size: clamp(2.1rem, 5.5vw, 3.75rem); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; color: #fff; } .asm-hero__titular span { display: block; color: var(--asm-brand-400); } .asm-hero__entrada { max-width: 32rem; margin: 1.5rem 0 0; font-size: 1rem; line-height: 1.65; color: rgba(255, 255, 255, .7); } /* |-------------------------------------------------------------------------- | 6. Buscador montado sobre el hero |-------------------------------------------------------------------------- | | El buscador es el producto, así que monta sobre la foto en vez de ir | debajo. El margen negativo lo sube; la sombra larga lo despega. | | Sin overflow:hidden en la tarjeta: recortaría el calendario y el | desplegable de aeropuertos, que son flotantes y salen de sus límites a | propósito. */ .asm-search-stage--portada { position: relative; z-index: 10; margin-top: -9rem; padding: 0; background: none; } /* * Variante del buscador dentro del PANEL de la agencia (home autenticado). * La banda navy (.asm-panel-hero) es más corta que el hero con foto de la * portada, así que el solape -9rem sería excesivo: aquí la tarjeta flota * apenas sobre el borde inferior de la banda. Se declara después de --portada * para ganar por orden de cascada (misma especificidad). */ .asm-search-stage--panel { margin-top: -3rem; } .asm-search-stage--portada .asm-booking-hero { padding: 0; } /* * El buscador trae su propio titular ("Vuelos, hoteles y más para tu * agencia"). En la portada lo lleva el hero, así que aquí sobra: dos H1 en * la misma pantalla, además, es un error de estructura del documento. */ .asm-search-stage--portada #Buscador-Titulo { display: none; } /* * La tarjeta pasa de cristal sobre fondo oscuro a superficie blanca: ahora * flota sobre la foto del hero, no sobre una banda de color. * !important porque las reglas que sustituye ya lo llevan. */ .asm-search-stage--portada #Buscador-Body .search-wrap { padding: 1.25rem !important; border: 1px solid var(--asm-border); border-radius: var(--asm-radius) !important; background: var(--asm-surface); box-shadow: var(--asm-shadow-lift); } /* Las pestañas de producto se dibujaron para el cristal oscuro. */ .asm-search-stage--portada .nav-tabs.simple-tabs .nav-link { color: var(--asm-muted); } .asm-search-stage--portada .nav-tabs.simple-tabs .nav-link.active { color: var(--asm-accent); } .asm-portada__pie { margin: 1rem 0 0; text-align: center; font-size: .875rem; color: var(--asm-muted); } .asm-portada__pie a { color: var(--asm-accent); font-weight: 600; text-underline-offset: 4px; } /* |-------------------------------------------------------------------------- | 7. Secciones |-------------------------------------------------------------------------- */ .asm-seccion { padding: 3.5rem 0; } .asm-seccion--suave { background: var(--asm-surface-soft); border-block: 1px solid var(--asm-border); } .asm-seccion__titulo { margin: 0 0 2.5rem; text-align: center; font-size: clamp(1.375rem, 3vw, 1.875rem); font-weight: 700; letter-spacing: -.02em; color: var(--asm-text); } /* |-------------------------------------------------------------------------- | 8. Rutas populares y ofertas |-------------------------------------------------------------------------- | | Se conserva la tarjeta que ya existía —insignia "Popular", foto arriba, | pie blanco con los dos códigos IATA y el avión rojo en medio— y el | carrusel. Sus estilos viven en asm-redesign.css y adoptan la paleta nueva | solos, porque consumen los tokens que este archivo redefine. | | Los datos siguen saliendo de `busquedas` (últimos 30 días) y de | `ofertas_aereas`: si no hay filas, la sección no se pinta. | | Lo que había aquí debajo era una tarjeta alternativa, con la foto a sangre | y el texto encima. Se retira para no dejar dos diseños compitiendo. */ /* * auto-fill, no auto-fit: con auto-fit dos ofertas se estiraban hasta * ocupar media pantalla cada una. Con auto-fill las pistas se mantienen y * la tarjeta mide lo mismo haya dos elementos o doce. */ .asm-rutas { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); list-style: none; margin: 0; padding: 0; } /* * La foto ocupa la tarjeta entera y el texto va encima, sobre un degradado * que baja hasta el azul marino. Antes la imagen era una banda con un pie * blanco debajo: la foto quedaba pequeña y la tarjeta, partida en dos. * * El degradado no es decoración: es lo que garantiza el contraste del texto * sobre una foto cualquiera, que puede venir clara u oscura del CDN. */ .asm-ruta { position: relative; display: block; overflow: hidden; height: 15rem; border-radius: var(--asm-radius); background: var(--asm-navy-900); box-shadow: var(--asm-shadow-sm); text-decoration: none; color: inherit; transition: box-shadow var(--asm-transition), transform var(--asm-transition); } .asm-ruta:hover { box-shadow: var(--asm-shadow-lift); transform: translateY(-2px); color: inherit; } .asm-ruta__foto { position: absolute; inset: 0; display: block; overflow: hidden; } .asm-ruta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms ease; } .asm-ruta:hover .asm-ruta__foto img { transform: scale(1.06); } .asm-ruta__foto::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient( to top, var(--asm-navy-950) 0%, rgba(2, 17, 41, .72) 34%, rgba(2, 17, 41, .12) 62%, rgba(2, 17, 41, .05) 100% ); } /* * El par origen-destino se lee como una unidad, alineado a la izquierda. * Estaba repartido a los dos extremos de la tarjeta, con la flecha perdida * en medio de un hueco vacío: se leía como dos datos sueltos y no como una * ruta. */ .asm-ruta__pie { position: absolute; inset: auto 0 0; display: block; padding: 1.125rem 1.125rem 1.25rem; } .asm-ruta__par { display: flex; align-items: baseline; gap: .5rem; } .asm-ruta__iata { font-size: 1.375rem; font-weight: 700; line-height: 1; letter-spacing: .03em; color: #fff; } .asm-ruta__flecha { color: var(--asm-brand-pure); font-size: 1.0625rem; line-height: 1; } .asm-ruta__ciudades { display: block; margin-top: .45rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .75rem; color: rgba(255, 255, 255, .58); } .asm-ruta__ciudad { display: block; margin-top: .3rem; font-size: .75rem; color: rgba(255, 255, 255, .62); } /* Dentro de la tarjeta de oferta el pie sigue sobre superficie clara. */ .asm-oferta-card .asm-ruta__iata { color: var(--asm-text); font-size: 1.125rem; } .asm-oferta-card .asm-ruta__ciudad { color: var(--asm-muted); } .asm-oferta-card .asm-ruta__flecha { color: var(--asm-accent); padding-bottom: 0; } /* |-------------------------------------------------------------------------- | 9. Ofertas aéreas |-------------------------------------------------------------------------- */ .asm-ofertas { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); list-style: none; margin: 0; padding: 0; } .asm-oferta-card { display: flex; flex-direction: column; overflow: hidden; height: 100%; border: 1px solid var(--asm-border); border-radius: var(--asm-radius); background: var(--asm-surface); box-shadow: var(--asm-shadow-sm); } .asm-oferta-card__foto { position: relative; height: 10rem; background: var(--asm-surface-soft); } .asm-oferta-card__foto img { width: 100%; height: 100%; object-fit: cover; } .asm-oferta-card__tipo { position: absolute; top: .75rem; left: .75rem; border-radius: var(--asm-radius-pill); background: rgba(2, 17, 41, .78); color: #fff; font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: .3rem .7rem; } .asm-oferta-card__cuerpo { display: flex; flex-direction: column; gap: .875rem; flex: 1; padding: 1rem; } .asm-oferta-card__ruta { display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .asm-oferta-card__nota { margin: 0; font-size: .8125rem; line-height: 1.55; color: var(--asm-muted); } .asm-oferta-card__linea { display: flex; align-items: center; gap: .625rem; padding-top: .875rem; border-top: 1px solid var(--asm-border); } .asm-oferta-card__linea img { width: 2rem; height: 2rem; object-fit: contain; } .asm-oferta-card__linea small { display: block; font-size: .8125rem; color: var(--asm-text); } .asm-oferta-card__linea strong { display: block; font-size: .75rem; font-weight: 500; color: var(--asm-muted); } .asm-oferta-card__precio { display: flex; align-items: baseline; justify-content: space-between; margin-top: auto; padding-top: .875rem; border-top: 1px solid var(--asm-border); } .asm-oferta-card__precio span { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--asm-muted); } .asm-oferta-card__precio strong { font-size: 1.375rem; font-weight: 700; color: var(--asm-text); } /* |-------------------------------------------------------------------------- | 10. Qué resuelve la plataforma |-------------------------------------------------------------------------- */ .asm-valores { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); list-style: none; margin: 0; padding: 0; } .asm-valor__icono { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--asm-radius-sm); background: var(--asm-brand-50); color: var(--asm-accent); } .asm-valor__icono svg { width: 1.25rem; height: 1.25rem; } .asm-valor h3 { margin: 1rem 0 0; font-size: 1rem; font-weight: 600; color: var(--asm-text); } .asm-valor p { margin: .375rem 0 0; font-size: .875rem; line-height: 1.6; color: var(--asm-muted); } /* |-------------------------------------------------------------------------- | 11. Proveedores |-------------------------------------------------------------------------- | | Los logotipos van en gris y a media opacidad: son marcas ajenas y no | deben competir con la propia. Recuperan color al pasar por encima. */ .asm-partners { padding: 3rem 0; } .asm-partners__etiqueta { margin: 0 0 2rem; text-align: center; font-size: .75rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--asm-subtle); } .asm-partners__lista { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 3rem; list-style: none; margin: 0; padding: 0; } .asm-partners__lista img { display: block; height: 1.75rem; width: auto; max-width: 8.5rem; object-fit: contain; opacity: .45; filter: grayscale(1); transition: opacity var(--asm-transition), filter var(--asm-transition); } .asm-partners__lista li:hover img { opacity: .9; filter: grayscale(0); } /* En oscuro el gris se pierde: se invierten para que sigan leyéndose. */ :root[data-theme="dark"] .asm-partners__lista img { filter: grayscale(1) brightness(0) invert(1); opacity: .4; } :root[data-theme="dark"] .asm-partners__lista li:hover img { opacity: .8; } .asm-partners__nota { margin: 2rem auto 0; max-width: 44rem; text-align: center; font-size: .8125rem; line-height: 1.6; color: var(--asm-subtle); } /* |-------------------------------------------------------------------------- | 12. Banda de registro |-------------------------------------------------------------------------- */ .asm-registro { background: var(--asm-surface-soft); border-block: 1px solid var(--asm-border); padding: 2.75rem 0; } .asm-registro__fila { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .asm-registro__fila h2 { margin: 0; font-size: 1.375rem; font-weight: 700; letter-spacing: -.01em; color: var(--asm-text); } .asm-registro__fila p { margin: .5rem 0 0; max-width: 38rem; font-size: .9375rem; line-height: 1.6; color: var(--asm-muted); } .asm-registro__acciones { display: flex; gap: .75rem; flex-wrap: wrap; } /* |-------------------------------------------------------------------------- | 13. Cabecera de las páginas interiores |-------------------------------------------------------------------------- | | Sustituye a las bandas con foto de archivo y velo negro (bg8.jpg y | compañía): una foto genérica de stock detrás de un título no informa de | nada y pesaba 200 KB por página. */ .asm-page-hero { position: relative; background: var(--asm-navy-800); background-image: linear-gradient( 160deg, var(--asm-navy-950) 0%, var(--asm-navy-900) 55%, var(--asm-navy-800) 100% ); padding: 8.5rem 0 3.5rem; } /* * Variante con foto (quiénes somos). La imagen va al fondo y el velo la * funde al azul marino, el mismo gesto que la portada, para que el titular * mantenga contraste sobre cualquier zona de la foto. */ .asm-page-hero--foto { isolation: isolate; overflow: hidden; padding-bottom: 5rem; } .asm-page-hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .asm-page-hero__velo { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient( 100deg, rgba(2, 17, 41, .5) 0%, rgba(4, 28, 59, .82) 42%, var(--asm-navy-900) 74%, var(--asm-navy-950) 100% ); } .asm-page-hero .container { position: relative; } /* * Fondo de las páginas públicas interiores. .asm-public-page traía de la * hoja anterior un gris claro fijo (#f6f8fb) que en tema oscuro se quedaba * claro y dejaba el texto —ya aclarado— ilegible sobre él. Se ata al token, * que sí cambia con el tema. */ .asm-public-page { background: var(--asm-background); } /* |-------------------------------------------------------------------------- | Páginas informativas (condiciones, bancos, contactos): foto y tema oscuro |-------------------------------------------------------------------------- | | Estas páginas usan las familias .asm-public-* / .asm-legal-* / .asm-bank / | .asm-contact de asm-redesign.css, con colores claros fijos (#fff, #e4e7ec, | #101828...) y sin tema oscuro. Aquí se les añade: | - la foto del hero (como el sitio original), y | - el remapeo a tokens en oscuro, para que las superficies y el texto | dejen de quedarse claros con el contenido ya aclarado encima. */ /* Foto en el hero de las informativas. */ .asm-public-hero--foto { position: relative; isolation: isolate; overflow: hidden; } .asm-public-hero--foto .asm-public-hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .asm-public-hero--foto .asm-public-hero__velo { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient( 100deg, rgba(2, 17, 41, .55) 0%, rgba(4, 28, 59, .84) 42%, var(--asm-navy-900) 74%, var(--asm-navy-950) 100% ); } .asm-public-hero--foto .container { position: relative; z-index: 1; } /* * Fuera la píldora teal del hero ("Información legal", "Métodos de pago", * "Atención y soporte"...): es de otra paleta y el cliente la rechazó. El * titular del hero ya dice de qué va la página. */ .asm-public-hero__eyebrow { display: none !important; } /* * Kicker de las secciones informativas: estaba en turquesa (#2dd4bf), fuera * de la marca. Se pasa al rojo de marca, que es el acento del sitio. Afecta * al "Cuentas asignadas individualmente" de bancos y equivalentes. */ .asm-public-page .asm-public-kicker { color: var(--asm-accent) !important; } .asm-public-page .asm-public-kicker i { color: var(--asm-accent) !important; } /* * Vistos del panel de acceso: el verde chillón se cambia por el verde del * sistema (--asm-success), más sobrio y coherente con el resto. */ .asm-public-page .asm-bank-access-points i, .asm-public-page .asm-bank-access-points .fa-circle-check { color: var(--asm-success) !important; } /* * El botón "Acceso personalizado" del panel oscuro de bancos: su texto era * turquesa. Al blanco tenue, que es lo que va sobre el azul marino. */ .asm-public-page .asm-bank-access-card__badge { color: rgba(255, 255, 255, .82) !important; border-color: rgba(255, 255, 255, .18) !important; } /* * Fuera las decoraciones del hero: la rejilla y, sobre todo, el círculo con * halo rojizo (::after). Encima de la foto quedaban sucios. La foto y el * velo bastan. */ .asm-public-hero--foto::before, .asm-public-hero--foto::after { content: none !important; display: none !important; } /* -- Tema oscuro de las superficies de contenido ------------------------ */ :root[data-theme="dark"] .asm-public-page .asm-public-surface, :root[data-theme="dark"] .asm-public-page .asm-legal-sidebar, :root[data-theme="dark"] .asm-public-page .asm-legal-document, :root[data-theme="dark"] .asm-public-page .asm-bank-card, :root[data-theme="dark"] .asm-public-page .asm-bank-country, :root[data-theme="dark"] .asm-public-page .asm-contact-feature, :root[data-theme="dark"] .asm-public-page .asm-about-intro, :root[data-theme="dark"] .asm-public-page .asm-about-visual, :root[data-theme="dark"] .asm-public-page .card, :root[data-theme="dark"] .asm-public-page .accordion-item { background: var(--asm-surface) !important; border-color: var(--asm-border) !important; } /* Bandas suaves, cabeceras de tarjeta y separadores internos. */ :root[data-theme="dark"] .asm-public-page .asm-legal-document__header, :root[data-theme="dark"] .asm-public-page .asm-bank-card__header, :root[data-theme="dark"] .asm-public-page .asm-bank-card__footer, :root[data-theme="dark"] .asm-public-page .asm-bank-country__header, :root[data-theme="dark"] .asm-public-page .asm-contact-service, :root[data-theme="dark"] .asm-public-page .asm-bank-access { background: var(--asm-surface-soft) !important; border-color: var(--asm-border) !important; } /* Divisores internos que traen un gris claro literal. */ :root[data-theme="dark"] .asm-public-page .asm-legal-document__body > *, :root[data-theme="dark"] .asm-public-page [class*="__header"], :root[data-theme="dark"] .asm-public-page [class*="__footer"] { border-color: var(--asm-border) !important; } /* * Texto. Las familias usan sobre todo utilidades de color de Bootstrap y * literales oscuros; se remapean a tokens dentro de la página informativa. */ :root[data-theme="dark"] .asm-public-page h1, :root[data-theme="dark"] .asm-public-page h2, :root[data-theme="dark"] .asm-public-page h3, :root[data-theme="dark"] .asm-public-page h4, :root[data-theme="dark"] .asm-public-page h5, :root[data-theme="dark"] .asm-public-page h6, :root[data-theme="dark"] .asm-public-page strong, :root[data-theme="dark"] .asm-public-page b, :root[data-theme="dark"] .asm-public-page .text-dark, :root[data-theme="dark"] .asm-public-page .asm-legal-sidebar__title, :root[data-theme="dark"] .asm-public-page .asm-bank-detail__value, :root[data-theme="dark"] .asm-public-page .asm-bank-country__count { color: var(--asm-text) !important; } :root[data-theme="dark"] .asm-public-page p, :root[data-theme="dark"] .asm-public-page li, :root[data-theme="dark"] .asm-public-page .text-muted, :root[data-theme="dark"] .asm-public-page .asm-legal-document__body, :root[data-theme="dark"] .asm-public-page .asm-bank-detail__label, :root[data-theme="dark"] .asm-public-page .asm-bank-card__header span, :root[data-theme="dark"] .asm-public-page dd, :root[data-theme="dark"] .asm-public-page small { color: var(--asm-muted) !important; } /* El hero NO se toca: va sobre foto/navy, se lee igual en ambos temas. */ :root[data-theme="dark"] .asm-public-page .asm-public-hero * { color: inherit; } /* Enlaces del índice lateral y celdas. */ :root[data-theme="dark"] .asm-public-page .asm-legal-nav a { color: var(--asm-muted) !important; } :root[data-theme="dark"] .asm-public-page .asm-legal-nav a:hover, :root[data-theme="dark"] .asm-public-page .asm-legal-nav a.is-active { color: var(--asm-accent) !important; background: var(--asm-surface-soft) !important; } /* * Contacto — Representantes de zona. Estas piezas traían blancos y pasteles * literales (#fff, #eef4ff, #ecfdf3, #eff8ff) que quedaban como parches * claros sobre el fondo oscuro. Se remapean a los tokens del tema. */ :root[data-theme="dark"] .asm-public-page .asm-representative-card, :root[data-theme="dark"] .asm-public-page .asm-empty-state, :root[data-theme="dark"] .asm-public-page .asm-contact-email-box { background: var(--asm-surface) !important; border-color: var(--asm-border) !important; } :root[data-theme="dark"] .asm-public-page .asm-representative-card__footer { background: var(--asm-surface-soft) !important; } :root[data-theme="dark"] .asm-public-page .asm-representative-avatar { background: var(--asm-surface-soft) !important; color: var(--asm-accent) !important; } :root[data-theme="dark"] .asm-public-page .asm-representative-whatsapp { background: rgba(18, 183, 106, .16) !important; color: #6ee7a8 !important; } :root[data-theme="dark"] .asm-public-page .asm-contact-service { color: var(--asm-text) !important; } :root[data-theme="dark"] .asm-public-page .asm-contact-email-box a { color: #5aa0ff !important; } :root[data-theme="dark"] .asm-public-page .asm-contact-email-box span { color: var(--asm-muted) !important; } /* * Botón blanco de los hero (Escribir a operaciones, Crear una cuenta, Iniciar * sesión). La regla .asm-public-hero * { color: inherit } le heredaba el texto * claro y quedaba blanco sobre blanco, ilegible. Se re-afirma su color propio. */ :root[data-theme="dark"] .asm-public-page .asm-public-primary-button { color: #0b1d2d !important; background: #ffffff !important; } /* * Bancos. Las superficies de la tarjeta de acceso y las listas traían blancos * literales; los puntos y los iconos de estado, pasteles claros. Al tema. */ :root[data-theme="dark"] .asm-public-page .asm-bank-access-card, :root[data-theme="dark"] .asm-public-page .asm-bank-state-card, :root[data-theme="dark"] .asm-public-page .asm-bank-list-surface { background: var(--asm-surface) !important; border-color: var(--asm-border) !important; } :root[data-theme="dark"] .asm-public-page .asm-bank-access-points div { color: var(--asm-text) !important; } :root[data-theme="dark"] .asm-public-page .asm-bank-state-card__icon { background: var(--asm-surface-soft) !important; } .asm-page-hero__ruta { margin: 0 0 .875rem; font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .45); } .asm-page-hero h1 { margin: 0; max-width: 46rem; font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: #fff; } .asm-page-hero__entrada { margin: 1rem 0 0; max-width: 42rem; font-size: 1rem; line-height: 1.65; color: rgba(255, 255, 255, .7); } /* |-------------------------------------------------------------------------- | 14. Prosa (páginas legales e informativas) |-------------------------------------------------------------------------- | | Medida de línea acotada: los textos legales venían a todo el ancho del | contenedor, que en un monitor son más de 200 caracteres por línea y hace | que se pierda el renglón al saltar. */ .asm-prose { max-width: 46rem; margin: 0 auto; padding: 3.5rem 0; color: var(--asm-text); font-size: 1rem; line-height: 1.75; } .asm-prose--ancha { max-width: 62rem; } .asm-prose > :first-child { margin-top: 0; } .asm-prose h2 { margin: 2.75rem 0 1rem; font-size: 1.375rem; font-weight: 700; letter-spacing: -.01em; color: var(--asm-text); } .asm-prose h3 { margin: 2rem 0 .75rem; font-size: 1.0625rem; font-weight: 600; color: var(--asm-text); } .asm-prose h4 { margin: 1.5rem 0 .5rem; font-size: .9375rem; font-weight: 600; color: var(--asm-text); } .asm-prose p, .asm-prose li { color: var(--asm-muted); } .asm-prose p { margin: 0 0 1.125rem; } .asm-prose ul, .asm-prose ol { margin: 0 0 1.125rem; padding-left: 1.375rem; } .asm-prose li { margin-bottom: .5rem; } .asm-prose strong, .asm-prose b { color: var(--asm-text); font-weight: 600; } .asm-prose a { color: var(--asm-accent); text-underline-offset: 3px; } /* Los textos legales llegan con text-align:justify en línea; se anula. */ .asm-prose p[style], .asm-prose li[style], .asm-prose div[style] { text-align: left !important; } .asm-prose table { width: 100%; margin: 0 0 1.5rem; border-collapse: collapse; font-size: .9375rem; } .asm-prose th, .asm-prose td { border: 1px solid var(--asm-border); padding: .625rem .75rem; text-align: left; vertical-align: top; } .asm-prose th { background: var(--asm-surface-soft); font-weight: 600; color: var(--asm-text); } /* Tablas anchas: barra propia, el documento nunca se desplaza en horizontal */ .asm-prose__tabla { overflow-x: auto; } /* |-------------------------------------------------------------------------- | 15. Pantallas de acceso |-------------------------------------------------------------------------- | | Dos columnas: la de marca reproduce el gesto del sitio público —foto que | se funde en el azul marino con el logotipo grande encima— y la derecha | lleva el formulario. Por debajo de 992 px la columna de marca se retira: | en un móvil roba la pantalla entera al formulario, que es a lo que se | viene. */ .asm-auth { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 100vh; } .asm-auth__marca { position: relative; overflow: hidden; background: var(--asm-navy-950); display: flex; flex-direction: column; justify-content: space-between; padding: 3rem; } .asm-auth__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .asm-auth__velo { position: absolute; inset: 0; z-index: 1; background-image: linear-gradient( 100deg, rgba(2, 17, 41, .28) 0%, rgba(4, 28, 59, .86) 38%, var(--asm-navy-900) 68%, var(--asm-navy-950) 100% ); } /* * El contenido va por delante de la foto, PERO la foto y el velo quedan * fuera: esta regla, escrita como `> *`, les ganaba el `position: absolute` * y devolvía la imagen al flujo. Por eso se veía arriba, con su proporción * natural, y debajo quedaba una franja de azul marino plano. */ .asm-auth__marca > *:not(.asm-auth__foto):not(.asm-auth__velo) { position: relative; z-index: 2; } .asm-auth__cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; } .asm-auth__cabecera img { height: 4.5rem; width: auto; } .asm-auth__lema { margin: .5rem 0 0; white-space: nowrap; font-size: .6875rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: rgba(255, 255, 255, .45); } .asm-auth__titular { margin: 3rem 0; max-width: 34rem; font-size: clamp(2rem, 3.2vw, 3.25rem); font-weight: 700; line-height: 1.06; letter-spacing: -.02em; color: #fff; } .asm-auth__titular span { display: block; color: var(--asm-brand-400); } .asm-auth__claves { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; list-style: none; margin: 2rem 0 0; padding: 0; } .asm-auth__claves li { display: flex; align-items: center; gap: .625rem; font-size: .875rem; color: rgba(255, 255, 255, .7); } .asm-auth__claves svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--asm-brand-400); } .asm-auth__partners { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .1); } .asm-auth__partners img { height: 1.25rem; width: auto; max-width: 6rem; object-fit: contain; opacity: .4; filter: brightness(0) invert(1); transition: opacity var(--asm-transition); } .asm-auth__partners img:hover { opacity: .75; } .asm-auth__panel { position: relative; display: flex; align-items: center; justify-content: center; background: var(--asm-surface); padding: 3rem 1.5rem; } .asm-auth__caja { width: 100%; max-width: 24rem; } .asm-auth__logo-movil { display: none; } /* * Variante de una sola columna, centrada. La usan las pantallas cortas del * flujo de recuperación —código, nueva clave, avisos—: no necesitan la * columna de marca porque son un paso intermedio, no la entrada. */ .asm-auth--corta { grid-template-columns: 1fr; min-height: 100vh; } .asm-auth--corta .asm-auth__panel { padding: 3rem 1.5rem; } .asm-auth__caja--centro { text-align: center; } .asm-auth__caja--centro .asm-etiqueta { text-align: left; } .asm-auth__caja--centro .asm-auth__kicker, .asm-auth__caja--centro .asm-auth__intro { text-align: center; } .asm-auth__logo-centro { display: block; margin-bottom: 2rem; } .asm-auth__logo-centro img { height: 3.25rem; width: auto; } /* |-------------------------------------------------------------------------- | Modal de aviso |-------------------------------------------------------------------------- | | Para errores que NO deben sacar al usuario de la pantalla: "correo no | registrado", "demasiados intentos"... Antes reemplazaban todo el | #main-wrapper y borraban el formulario recién escrito. Ahora aparecen | encima, con animación, y al cerrarlos el formulario sigue ahí. | | Se cuelga de , así que sus reglas no llevan ámbito. */ .asm-modal-overlay { position: fixed; inset: 0; z-index: 1090; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(2, 17, 41, .55); opacity: 0; transition: opacity 200ms ease; } .asm-modal-overlay.is-open { opacity: 1; } .asm-modal { width: 100%; max-width: 25rem; padding: 2.25rem 2rem 2rem; border-radius: var(--asm-radius); background: var(--asm-surface); box-shadow: var(--asm-shadow-lift); text-align: center; transform: translateY(12px) scale(.98); opacity: 0; transition: transform 220ms cubic-bezier(.16, 1, .3, 1), opacity 220ms ease; } .asm-modal-overlay.is-open .asm-modal { transform: none; opacity: 1; } .asm-modal__x { position: absolute; top: 1rem; right: 1rem; width: 2rem; height: 2rem; border: 0; border-radius: 8px; background: transparent; color: var(--asm-subtle); font-size: 1.25rem; line-height: 1; cursor: pointer; } .asm-modal__x:hover { background: var(--asm-surface-soft); color: var(--asm-text); } .asm-modal h2 { margin: .25rem 0 0; font-size: 1.375rem; font-weight: 700; letter-spacing: -.01em; color: var(--asm-text); } .asm-modal p { margin: .625rem 0 1.5rem; font-size: .9375rem; line-height: 1.55; color: var(--asm-muted); } @media (prefers-reduced-motion: reduce) { .asm-modal-overlay, .asm-modal { transition: none; } .asm-modal { transform: none; } } /* Aviso (error / expiración): un círculo con icono, no una tarjeta aparte. */ .asm-auth__aviso { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; margin: 0 auto 1.25rem; border-radius: 50%; } .asm-auth__aviso svg { width: 1.75rem; height: 1.75rem; } .asm-auth__aviso--error { background: var(--asm-brand-50); color: var(--asm-accent); } .asm-auth__aviso--exito { background: rgba(18, 183, 106, .14); color: var(--asm-success); } .asm-auth__caja--ancha { max-width: 34rem; } /* |-------------------------------------------------------------------------- | Registro paso 3: formulario ancho |-------------------------------------------------------------------------- | | El paso 3 es un formulario largo (datos de la agencia + usuario principal + | términos), así que NO usa la composición de dos columnas con foto: ocuparía | media pantalla para un formulario que necesita ancho. En su lugar, cabecera | de marca centrada arriba y el formulario a lo ancho. | | No se reescriben sus campos —siguen siendo .form-control/.form-label de | Bootstrap con todos sus id—: se tematizan por selector para que adopten el | sistema de diseño sin tocar el HTML ni el texto legal. */ .asm-authwide { max-width: 62rem; margin: 0 auto; padding: 2.5rem 1.25rem 3.5rem; } .asm-authwide__head { text-align: center; margin-bottom: 2rem; } .asm-authwide__head .asm-auth__pasos { max-width: 30rem; margin-inline: auto; } .asm-authwide__logo { display: inline-block; margin-bottom: 1.5rem; } .asm-authwide__logo img { height: 3rem; width: auto; } .asm-authwide__seccion { padding: 0; background: transparent; } .asm-authwide__seccion .container { padding: 0; max-width: 100%; } .asm-authwide__card { padding: 0; overflow: hidden; } .asm-authwide__col { padding: 1.75rem; } /* Dos columnas (agencia / usuario) con un filete entre ellas en escritorio. */ @media (min-width: 992px) { .asm-authwide__card .col-lg-6:first-child .asm-authwide__col { border-right: 1px solid var(--asm-border); } } .asm-authwide__subtitulo { margin: 0 0 .25rem; font-size: 1.0625rem; font-weight: 700; color: var(--asm-text); } .asm-authwide__nota { margin: 0 0 1.25rem; font-size: .875rem; color: var(--asm-muted); } /* Campos: adoptan el aspecto de .asm-campo por selector. */ .asm-authwide .form-group { margin-bottom: 1rem; } .asm-authwide .form-label { display: block; margin-bottom: .375rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--asm-muted); } .asm-authwide .form-control, .asm-authwide .form-select, .asm-authwide textarea.form-control, .asm-authwide .select2-container .select2-selection--single { width: 100%; min-height: 48px; padding: .7rem .875rem; border: 1px solid var(--asm-border) !important; border-radius: var(--asm-radius-sm) !important; background: var(--asm-surface) !important; color: var(--asm-text) !important; font-size: .9375rem; box-shadow: none !important; } .asm-authwide textarea.form-control { min-height: 5rem; resize: vertical; } .asm-authwide .form-control::placeholder { color: var(--asm-subtle); } .asm-authwide .form-control:focus, .asm-authwide .form-select:focus { border-color: var(--asm-accent) !important; box-shadow: 0 0 0 4px rgba(205, 44, 34, .12) !important; } .asm-authwide .form-control:disabled { background: var(--asm-surface-soft) !important; color: var(--asm-muted) !important; } /* select2 del código de área, alineado con el resto. */ .asm-authwide .select2-container .select2-selection--single { display: flex; align-items: center; } .asm-authwide .select2-container .select2-selection__rendered { padding: 0 !important; line-height: 1.4 !important; color: var(--asm-text) !important; } .asm-authwide .select2-container .select2-selection__arrow { height: 100% !important; top: 0 !important; } /* Ojo de "ver contraseña" heredado (toggle-password de la plantilla). */ .asm-authwide .toggle-password { color: var(--asm-subtle); cursor: pointer; } .asm-authwide .toggle-password:hover { color: var(--asm-accent); } /* Aviso de correo inválido en línea. */ .asm-authwide #xmail h6 { font-size: .8125rem; margin: .375rem 0 0; } .asm-authwide__acciones { display: flex; gap: .75rem; justify-content: flex-end; flex-wrap: wrap; margin-top: 1.5rem; } .asm-authwide__acciones .asm-btn { min-width: 12rem; } /* * El botón "Volver" (.asm-btn--linea) recibía de asm-redesign.css un color * fijo que en tema oscuro quedaba navy sobre navy. Se reafirma con el token, * que sí cambia con el tema. */ .asm-authwide__acciones .asm-btn--linea { color: var(--asm-text) !important; border-color: var(--asm-border); background: transparent; } .asm-authwide__acciones .asm-btn--linea:hover { border-color: var(--asm-muted); color: var(--asm-text); } /* * En oscuro se fuerza con un valor literal: alguna regla de la plantilla * mantiene var(--asm-text) resuelto al navy claro sobre este botón, y sobre * fondo oscuro quedaba invisible (1,29:1). El literal garantiza el contraste. */ :root[data-theme="dark"] .asm-authwide__acciones .asm-btn--linea { color: #e8eef8 !important; } /* Términos: el acordeón adopta el sistema, el texto legal no se toca. */ .asm-authwide__seccion h2 { font-size: 1.375rem; font-weight: 700; color: var(--asm-text); letter-spacing: -.01em; } .asm-authwide .accordion-item { border: 1px solid var(--asm-border) !important; border-radius: var(--asm-radius-sm) !important; background: var(--asm-surface); margin-bottom: .5rem; overflow: hidden; } .asm-authwide .accordion-button { background: var(--asm-surface) !important; color: var(--asm-text) !important; font-weight: 600; font-size: .9375rem; box-shadow: none !important; } .asm-authwide .accordion-button:not(.collapsed) { background: var(--asm-surface-soft) !important; color: var(--asm-accent) !important; } .asm-authwide .accordion-body { color: var(--asm-muted); font-size: .875rem; line-height: 1.65; } .asm-authwide .accordion-body ul { padding-left: 1.25rem; } .asm-authwide .form-check-input { border-color: var(--asm-border); } .asm-authwide .form-check-input:checked { background-color: var(--asm-accent); border-color: var(--asm-accent); } .asm-authwide .form-check-label { color: var(--asm-text); font-size: .9375rem; } /* Resumen final del alta (paso 4). */ .asm-reg-resumen { margin: .5rem 0 1.5rem; padding: 1.25rem; border: 1px solid var(--asm-border); border-radius: var(--asm-radius-sm); background: var(--asm-surface-soft); text-align: left; } .asm-reg-resumen .text-dark { color: var(--asm-text) !important; font-size: .8125rem; } .asm-reg-resumen .text-muted { color: var(--asm-muted) !important; font-size: .875rem; } /* El título "Términos y Condiciones" vive fuera de __seccion: se cubre aquí. */ .asm-authwide h2 { color: var(--asm-text); } @media (max-width: 767.98px) { .asm-authwide__acciones { flex-direction: column-reverse; } .asm-authwide__acciones .asm-btn { width: 100%; } } /* * Tema oscuro del formulario de registro. Casi todo sale de tokens, pero el * acordeón de términos y el resumen llevan superficies que hay que fijar. */ :root[data-theme="dark"] .asm-authwide .accordion-item, :root[data-theme="dark"] .asm-authwide .accordion-button { background: var(--asm-surface) !important; color: var(--asm-text) !important; } :root[data-theme="dark"] .asm-authwide .accordion-button:not(.collapsed) { background: var(--asm-surface-soft) !important; color: var(--asm-accent) !important; } :root[data-theme="dark"] .asm-reg-resumen { background: var(--asm-surface-soft); } /* * Código de verificación: cuatro grupos de tres dígitos. El original los * ponía en una rejilla de Bootstrap con inputs genéricos; aquí son campos * grandes y centrados, del tamaño que pide teclear un código. */ .asm-auth__codigo { display: grid; grid-template-columns: repeat(4, 1fr); gap: .625rem; margin-bottom: 1.5rem; } .asm-auth__codigo-campo { text-align: center; font-size: 1.25rem; font-weight: 700; letter-spacing: .1em; padding-left: .25rem; padding-right: .25rem; } @media (max-width: 380px) { .asm-auth__codigo { gap: .4rem; } .asm-auth__codigo-campo { font-size: 1.0625rem; } } .asm-auth__kicker { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--asm-accent); } .asm-auth__caja h1, .asm-auth__titulo { margin: .75rem 0 0; font-size: 2rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--asm-text); } /* reCAPTCHA: sólo ocupa sitio cuando Google lo ha dibujado. */ .asm-auth__captcha:not(:empty) { margin-bottom: 1.125rem; } .asm-auth__intro { margin: .625rem 0 0; font-size: .875rem; line-height: 1.6; color: var(--asm-muted); } /* * Progreso del alta: cuatro pantallas y antes no se decía en ninguna * cuántas quedaban. * * Círculos numerados unidos por una línea. La línea no es decoración: es lo * que convierte cuatro etiquetas sueltas en un recorrido, y de un vistazo * se ve dónde estás y cuánto falta. */ .asm-auth__pasos { display: flex; list-style: none; margin: 1.75rem 0 0; padding: 0; } .asm-auth__paso { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; font-size: .625rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--asm-subtle); } /* * El tramo de línea pertenece al paso que llega, no al que sale: así el * último no dibuja una línea que no lleva a ninguna parte. */ .asm-auth__paso + .asm-auth__paso::before { content: ""; position: absolute; top: .9375rem; right: 50%; left: -50%; height: 2px; background: var(--asm-border); } .asm-auth__paso-num { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 1.875rem; height: 1.875rem; border: 2px solid var(--asm-border); border-radius: 50%; background: var(--asm-surface); color: var(--asm-subtle); font-size: .8125rem; font-weight: 700; letter-spacing: 0; } /* Paso hecho: el número deja sitio a la marca de verificación. */ .asm-auth__paso--hecho .asm-auth__paso-num { border-color: var(--asm-accent); background: var(--asm-accent); color: #fff; } .asm-auth__paso--hecho + .asm-auth__paso::before { background: var(--asm-accent); } .asm-auth__paso--activo { color: var(--asm-accent); } .asm-auth__paso--activo .asm-auth__paso-num { border-color: var(--asm-accent); background: var(--asm-accent); color: #fff; box-shadow: 0 0 0 4px rgba(205, 44, 34, .14); } @media (max-width: 400px) { .asm-auth__paso { font-size: .5625rem; letter-spacing: .03em; } .asm-auth__paso-num { width: 1.625rem; height: 1.625rem; font-size: .75rem; } .asm-auth__paso + .asm-auth__paso::before { top: .8125rem; } } .asm-auth__formulario { margin-top: 2rem; } .asm-auth__grupo { margin-bottom: 1.125rem; position: relative; } /* Deja sitio al ojo para que no se solape con el texto escrito. */ .asm-auth__grupo .asm-campo[type="password"], .asm-auth__grupo .asm-campo[type="text"]#password-field { padding-right: 2.75rem; } /* * La etiqueta se oculta a la vista pero NO se borra: sin ella el campo se * queda sin nombre para un lector de pantalla y el navegador pierde la * pista para autocompletar. El placeholder solo no sirve: desaparece en * cuanto se escribe. */ .asm-auth__grupo .asm-etiqueta { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* * El ojo se estira de arriba abajo del grupo y centra su contenido: así * queda a la altura del texto sin depender de cuánto mida la etiqueta. */ /* * Dos clases en el selector, y `height`/`transform` explícitos: el botón * lleva también `asm-toggle-password` —para reutilizar el manejador que ya * existe en funciones.js— y esa clase trae de asm-redesign.css un * `top: 50%; transform: translateY(-50%)` con alto propio, pensado para los * campos flotantes del modal. Con la misma especificidad el resultado * dependía del orden, y el ojo acababa 25 px por encima del campo. */ .asm-auth__grupo .asm-auth__ver-clave { position: absolute; top: 0; bottom: 0; right: .5rem; height: auto; transform: none; display: flex; align-items: center; justify-content: center; width: 2.25rem; border: 0; background: none; padding: 0; color: var(--asm-subtle); cursor: pointer; border-radius: 8px; } .asm-auth__grupo .asm-auth__ver-clave:hover { color: var(--asm-accent); } /* * Estado de carga del botón. funciones.js sustituye el contenido por un * .spinner-border de Bootstrap más el texto "Cargando...". */ .asm-btn .spinner-border { width: 1rem; height: 1rem; border-width: .15em; } .asm-btn:disabled { opacity: .75; cursor: progress; } .asm-auth__enlaces { margin: 1rem 0 0; text-align: center; font-size: .875rem; color: var(--asm-muted); } .asm-auth__enlaces a { color: var(--asm-accent); font-weight: 600; text-underline-offset: 4px; } .asm-auth__sellos { display: flex; align-items: center; gap: 1.25rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--asm-border); } .asm-auth__sellos img { height: 1.75rem; width: auto; object-fit: contain; opacity: .7; } .asm-auth__sellos p { margin: 0; font-size: .6875rem; line-height: 1.5; color: var(--asm-subtle); } /* |-------------------------------------------------------------------------- | 16. Adaptación a pantalla estrecha |-------------------------------------------------------------------------- */ @media (max-width: 991.98px) { .asm-auth { grid-template-columns: 1fr; min-height: 0; } .asm-auth__marca { display: none; } .asm-auth__panel { padding: 2.5rem 1.25rem 3rem; } .asm-auth__logo-movil { display: block; margin-bottom: 2rem; } .asm-auth__logo-movil img { height: 3.5rem; width: auto; } } /* * Tableta y móvil: la barra de navegación de la plantilla se pliega tras el * botón de menú y el selector de producto vuelve dentro de la tarjeta * (lo devuelve assets/js/buscador-navbar.js). */ @media (max-width: 991.98px) { .asm-main-header, .asm-main-header .container { max-width: 100vw; } .asm-main-header .asm-nav-brand { width: 150px; } .asm-main-header .asm-logo { height: 36px !important; } /* El hueco del navbar no debe dejar espacio si no tiene nada dentro. */ .asm-productos:not(.asm-productos--listo) { display: none; } } @media (max-width: 767.98px) { .asm-hero { padding: 5.5rem 0 13rem; } .asm-hero__titular { font-size: 2.1rem; } .asm-hero__entrada { font-size: .9375rem; margin-top: 1.125rem; } .asm-search-stage--portada { margin-top: -10.5rem; } .asm-search-stage--portada #Buscador-Body .search-wrap { padding: .875rem !important; } /* Controles algo más bajos: en una pantalla de 375 px, 52 px por campo obligaban a desplazarse demasiado para ver el botón de buscar. */ .asm-search-stage--portada { --alto-campo: 46px; } .asm-search-stage--portada .nav-bottom-line { flex-wrap: wrap; } /* Los interruptores de GDS, en rejilla: en fila se cortaban a la mitad. */ .asm-search-stage--portada .bg-white.rounded.py-2 { margin-right: .875rem; margin-bottom: .5rem; } .asm-page-hero { padding: 6.5rem 0 2.5rem; } .asm-prose { padding: 2.5rem 0; } .asm-seccion { padding: 2.5rem 0; } .asm-seccion__titulo { margin-bottom: 1.75rem; } .asm-ruta { height: 12.5rem; } .asm-partners { padding: 2.25rem 0; } .asm-partners__lista { gap: 1.25rem 2rem; } .asm-partners__lista img { height: 1.375rem; } .asm-registro__fila { flex-direction: column; align-items: flex-start; } .asm-registro__acciones { width: 100%; } .asm-registro__acciones .asm-btn { flex: 1; } /* El pie: cuatro columnas apiladas necesitan aire entre ellas. */ .asm-footer-main { padding: 2.5rem 0 2rem; } .asm-provider-grid { grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); } } /* Pantallas muy estrechas (360 px y menos). */ @media (max-width: 22.5rem) { .asm-main-header .asm-nav-brand { width: 128px; } .asm-main-header .asm-logo { height: 32px !important; } .asm-hero__titular { font-size: 1.875rem; } .asm-partners__lista { gap: 1rem 1.5rem; } } /* |-------------------------------------------------------------------------- | 17. Logotipo de la cabecera |-------------------------------------------------------------------------- | | .asm-logo-scrolled se posicionaba con `top: 30%` y `translateY(-50%)`: | sobre una caja de 74 px eso deja el borde superior del logotipo en -1 px, | o sea, recortado por arriba. Con 50 % queda centrado de verdad. */ /* * El logotipo se salía de la barra por arriba, y el problema eran dos cosas * encadenadas: * * 1. La caja de la marca no ocupaba el alto de la barra: declaraba 74 px * pero una regla más específica del tema la dejaba en `auto`, así que * medía lo que la imagen y quedaba pegada al borde superior. * 2. La imagen hereda `height: 100 %` de la caja, de modo que al darle a * la caja sus 74 px el logotipo crecía hasta 74 px y volvía a * desbordar. * * Por eso hay que fijar las dos cosas: la caja al alto de la barra y la * imagen a un alto propio. Los dos logotipos se posicionan igual —absolutos * y centrados—, de forma que al cambiar de uno a otro sólo cambia la * opacidad y nada se mueve de sitio. */ .asm-main-header .asm-nav-header { display: flex !important; align-items: center !important; justify-content: space-between; min-height: 74px; min-width: 0; } /* * `flex: 0 0 auto` es obligatorio: sin él la caja de la marca hereda * `flex: 1 1 0%`, crece hasta el ancho máximo de su contenido y, como la * barra de navegación de la plantilla es un `display: table`, ese ancho * arrastraba a la cabecera entera a 388 px dentro de una pantalla de 375. * Resultado: 13 px de desplazamiento horizontal en toda la página. */ .asm-main-header .asm-nav-brand { position: relative; flex: 0 0 auto; width: 190px; height: 74px !important; align-items: center !important; } .asm-main-header .asm-logo { position: absolute !important; top: 50% !important; left: 0; height: 44px !important; max-height: 44px; width: auto; transform: translateY(-50%) !important; } /* |-------------------------------------------------------------------------- | 18. Interruptor de tema |-------------------------------------------------------------------------- | | El botón existía pero no se leía: 36 px con un icono de 17 px y borde del | mismo color que el fondo. Ahora tiene tamaño de objetivo táctil (40 px), | el icono ocupa lo que debe y hay un estado activo claro. | | El sol se ve en claro y la luna en oscuro: el icono representa el tema al | que se va a cambiar, no el actual. */ .asm-tema { width: 40px; height: 40px; border-radius: var(--asm-radius-sm); border: 1px solid var(--asm-border); background: var(--asm-surface); color: var(--asm-muted); flex-shrink: 0; } .asm-tema svg { width: 19px; height: 19px; stroke-width: 1.9; } .asm-tema:hover { border-color: var(--asm-accent); color: var(--asm-accent); background: var(--asm-brand-50); } .asm-tema:active { transform: scale(.94); } :root[data-theme="dark"] .asm-tema { background: var(--asm-surface-soft); border-color: var(--asm-border); color: var(--asm-muted); } /* |-------------------------------------------------------------------------- | 19. Tema oscuro en los bloques nuevos |-------------------------------------------------------------------------- | | Sólo cambian los tokens semánticos, así que casi todo se adapta solo. Lo | que va aquí es lo que NO puede salir de un token: superficies que en claro | son blancas por decisión de contraste, y logotipos ajenos. */ :root[data-theme="dark"] .asm-search-stage--portada #Buscador-Body .search-wrap { background: var(--asm-surface); border-color: var(--asm-border); box-shadow: 0 20px 48px rgba(0, 0, 0, .45); } /* El buscador trae .bg-white en línea: en oscuro sería un folio encendido. */ :root[data-theme="dark"] .asm-search-stage--portada .tab-content.bg-white, :root[data-theme="dark"] .asm-search-stage--portada .bg-white { background: var(--asm-surface) !important; color: var(--asm-text); } /* * Los campos ya salen del tema: su regla base usa var(--asm-surface) y * var(--asm-text), que cambian solos. Aquí sólo van los elementos que * llevan un color literal en la hoja de la plantilla. */ :root[data-theme="dark"] .asm-search-stage--portada .select2-results__option { background: var(--asm-surface-soft); color: var(--asm-text); } :root[data-theme="dark"] .asm-search-stage--portada .select2-results__option--highlighted { background: var(--asm-accent) !important; color: #fff !important; } /* * Los desplegables del buscador (pasajeros, cabina, filtros) llevan * `background: #fff` en la hoja del tema. En oscuro quedaban blancos con el * texto ya aclarado encima: 1,17:1 de contraste, es decir, invisible. */ :root[data-theme="dark"] .asm-search-stage--portada .guests-input__options, :root[data-theme="dark"] .asm-search-stage--portada .booking-form__input, :root[data-theme="dark"] .asm-search-stage--portada .dropdown-menu, :root[data-theme="dark"] .asm-search-stage--portada .select2-dropdown, :root[data-theme="dark"] .asm-search-stage--portada .ui-autocomplete { background: var(--asm-surface-soft) !important; border-color: var(--asm-border) !important; color: var(--asm-text) !important; } :root[data-theme="dark"] .asm-search-stage--portada .guests-input__ctrl { color: var(--asm-muted); } :root[data-theme="dark"] .asm-seccion--suave { background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-soft-section { background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-flyer-card { background: var(--asm-surface); border-color: var(--asm-border); } :root[data-theme="dark"] .asm-registro { background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-oferta-card { background: var(--asm-surface); } :root[data-theme="dark"] .asm-valor__icono { background: rgba(227, 95, 84, .16); } /* La cabecera del hero no cambia: va sobre una foto, no sobre el tema. */ /* |-------------------------------------------------------------------------- | 20. Buscador: ajuste fino |-------------------------------------------------------------------------- | | No se toca el HTML de src/buscador.php —son 129 KB con la lógica de los | cuatro productos—: se le aplica el sistema de diseño desde fuera. */ /* * Selector de producto en la barra de navegación. * * Es el patrón de southcenter.travel: elegir entre vuelos, hoteles, seguros * y autos es navegación, no un campo del formulario. Subiéndolo aquí, la * tarjeta del buscador se queda sólo con los campos y baja mucho la carga * visual. Lo mueve assets/js/buscador-navbar.js. */ @media (min-width: 992px) { .asm-main-header .asm-nav-wrapper { display: flex !important; align-items: center; justify-content: flex-end; gap: 1.5rem; } .asm-productos { margin-right: auto; } } .asm-productos #tour-pills-tab { flex-wrap: nowrap; gap: .125rem; margin: 0; border: 0 !important; } .asm-productos .nav-link { display: inline-flex; align-items: center; border: 0 !important; border-radius: var(--asm-radius-pill) !important; background: transparent !important; padding: .5rem .95rem !important; color: var(--asm-muted) !important; font-size: .8125rem; font-weight: 600; white-space: nowrap; transition: color var(--asm-transition), background var(--asm-transition); } .asm-productos .nav-link b { font-weight: 600; } .asm-productos .nav-link:hover { color: var(--asm-text) !important; background: var(--asm-surface-soft) !important; } .asm-productos .nav-link.active { color: var(--asm-accent) !important; background: var(--asm-brand-50) !important; } /* * Barra oscura: sobre la foto del hero y también al hacer scroll, porque * .is-scrolled pinta la barra de azul marino en todas las páginas. Con la * regla clara, la pastilla activa salía blanca (#fdf3f2) y quedaba como un * parche encima del azul. */ .asm-header--hero .asm-productos .nav-link, .asm-main-header.is-scrolled .asm-productos .nav-link { color: rgba(255, 255, 255, .7) !important; } .asm-header--hero .asm-productos .nav-link:hover, .asm-main-header.is-scrolled .asm-productos .nav-link:hover { color: #fff !important; background: rgba(255, 255, 255, .12) !important; } .asm-header--hero .asm-productos .nav-link.active, .asm-main-header.is-scrolled .asm-productos .nav-link.active { color: #fff !important; background: rgba(255, 255, 255, .16) !important; } /* Con las pestañas fuera, su caja dentro de la tarjeta sobra. */ .fliore.asm-sin-pestanas > .rounded-top-3 { display: none !important; } /* * El contenedor de pestañas ya no necesita su propia caja: traía un gris * (#eef2f7) que partía la tarjeta en dos bandas y que en tema oscuro se * quedaba claro con el texto ya aclarado encima —ilegible—. */ .asm-search-stage--portada .fliore > .rounded-top-3 { display: block !important; overflow: visible !important; background: transparent !important; } /* * Pestañas DENTRO de la tarjeta. Es lo que se ve por debajo de 992 px, donde * no suben a la barra de navegación. * * El tema las pintaba como cuadrados azul marino casi negros sobre una * banda gris: en un móvil, cuatro bloques oscuros seguidos son lo primero * que se ve al abrir la página y se comen el contraste de todo lo demás. * Ahora es un control segmentado: la banda es la superficie suave, las * pestañas son transparentes y sólo la activa se levanta en blanco. */ /* * El selector lleva los DOS identificadores a propósito. * * src/buscador.php trae en su