normales hasta que Flickity los toma y los posiciona. Entre que el navegador pinta el HTML y se ejecuta el JavaScript —que además va dentro de un setTimeout de 500 ms— se veían TODOS los banners uno debajo de otro, y de golpe se colapsaban en el carrusel. Un salto feo justo en lo primero que se mira. Flickity añade la clase .flickity-enabled al contenedor cuando termina de montarse. Mientras no esté, se enseña sólo la primera celda: exactamente lo que se verá después, así que no hay salto ninguno. Es CSS puro, no depende de que el JavaScript llegue a tiempo, y si Flickity fallara del todo la página seguiría enseñando un banner en lugar de una columna de banners. */ #Flyers:not(.flickity-enabled) .carousel-cell + .carousel-cell, #OfertasAereas:not(.flickity-enabled) .carousel-cell + .carousel-cell { display: none; } /* --------------------------------------------------------------------------- La X del anuncio emergente --------------------------------------------------------------------------- Cuando el anuncio no lleva botón, ESTA X ES LA SALIDA PRINCIPAL. La de serie de SweetAlert es un aspa gris fina, y aquí se apoya sobre el flyer: encima de una imagen clara casi no se ve, y encima de una oscura tampoco. Alguien que no la encuentre se queda mirando un anuncio que no sabe cerrar. Se le pone chapa propia —círculo oscuro translúcido, aspa blanca— que funciona sobre cualquier imagen sin saber nada de ella. Va por encima del flyer, que empieza pegado al borde superior del modal. */ .asm-announcement-popup .swal2-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; margin: 0; border-radius: 50%; background: rgba(4, 28, 59, .55); color: #ffffff; font-size: 26px; line-height: 34px; text-shadow: none; transition: background .15s ease; } .asm-announcement-popup .swal2-close:hover, .asm-announcement-popup .swal2-close:focus-visible { background: rgba(4, 28, 59, .85); color: #ffffff; outline: 2px solid #ffffff; outline-offset: 2px; } /* Sin botón, la banda de acciones no debe dejar hueco bajo el flyer. */ .asm-announcement-popup .swal2-actions:empty { margin: 0; padding: 0; } /* ========================================================= CALCULADORA FLOTANTE ========================================================= Ver CALCULADORA-FLOTANTE.md. El botón vive encima del de soporte y el panel se ancla a la esquina, como un widget de chat: NO oscurece la página, y ese es todo el punto. Se usa mientras se mira una tarifa, así que taparla con un modal centrado sería volver al problema que resuelve —apuntar el número, ir a otra pantalla, volver—. ========================================================= */ .asm-calc-float { position: fixed; right: 24px; bottom: 88px; /* 24 del de WhatsApp + sus 52 de alto + 12 de aire */ z-index: 1025; display: inline-flex; align-items: center; gap: 9px; min-width: 132px; /* mismo ancho que .asm-whatsapp-float para que queden alineados en columna */ min-height: 52px; padding: 0 18px; border: 0; border-radius: 999px; color: #ffffff; background: var(--asm-navy-900, #041c3b); box-shadow: 0 16px 34px rgba(4, 28, 59, 0.28); font-size: 0.82rem; font-weight: 750; transition: transform var(--asm-transition), box-shadow var(--asm-transition), background var(--asm-transition); } .asm-calc-float i { font-size: 1.2rem; } .asm-calc-float:hover { color: #ffffff; background: var(--asm-navy-950, #021129); box-shadow: 0 20px 40px rgba(4, 28, 59, 0.36); transform: translateY(-3px); } /* Con el panel abierto el botón sobra: la salida es la X del panel. */ .asm-calc-abierta .asm-calc-float { opacity: 0; pointer-events: none; } /* ---- El panel ---- */ .asm-calcp { position: fixed; right: 24px; bottom: 24px; z-index: 1030; /* sobre el botón (1025), bajo los modales (1055) */ display: flex; flex-direction: column; /* * padding: 0 NO es decorativo, es un antídoto. * * assets/css/style.css:192 lleva `section { padding: 80px 0 80px }`, pensado * para las secciones de página del tema. Esto es un

—porque * semánticamente lo es— así que se comía 80 px de relleno por arriba y otros * 80 por abajo. El panel salía con un hueco enorme sobre el título y bajo el * botón, y daba la impresión de no ajustarse a su contenido: se ajustaba, lo * que no cabía era el relleno heredado. */ padding: 0; width: 380px; max-width: calc(100vw - 32px); max-height: min(560px, calc(100vh - 48px)); overflow: hidden; border-radius: 18px; background: #ffffff; box-shadow: 0 24px 60px rgba(16, 24, 40, 0.28); } .asm-calcp__cabecera { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; color: #ffffff; background: var(--asm-navy-900, #041c3b); } .asm-calcp__cabecera h2 { margin: 0; font-size: 0.98rem; font-weight: 750; /* * El color va aquí y no se hereda del padre. style.css:327 pone * `h1,h2,h3,h4,h5,h6 { color: var(--headingColor) }`, y un color EXPLÍCITO * gana siempre a uno heredado, por muy específico que sea el padre. El * resultado era el título en color de titular oscuro sobre el azul marino * de la barra: casi ilegible. */ color: #ffffff; } .asm-calcp__cerrar { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; color: #ffffff; background: rgba(255, 255, 255, 0.14); font-size: 20px; line-height: 1; } .asm-calcp__cerrar:hover { background: rgba(255, 255, 255, 0.26); } .asm-calcp__cuerpo { overflow-y: auto; /* el scroll va DENTRO, la página no se mueve */ padding: 16px 18px 18px; } .asm-calcp-campos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } /* * Desde que sólo se pide el total, la rejilla de tres columnas dejaría el único * campo encogido en un tercio del ancho. Al ser el dato de entrada —y el único— * ocupa todo y se pinta más grande: es donde va el cursor al abrir el panel. */ .asm-calcp-campos--unico { grid-template-columns: 1fr; } .asm-calcp-campos--unico .asm-calcp-campo input { padding: 10px 12px; font-size: 1.05rem; } .asm-calcp-campo { display: flex; flex-direction: column; gap: 3px; font-size: 0.68rem; font-weight: 700; color: #667085; text-transform: uppercase; letter-spacing: 0.02em; } .asm-calcp-campo input { width: 100%; padding: 7px 9px; border: 1px solid #d0d5dd; border-radius: 8px; font-size: 0.9rem; font-weight: 600; color: #101828; } .asm-calcp-campo input:focus { border-color: var(--asm-navy-900, #041c3b); outline: 2px solid rgba(4, 28, 59, 0.12); } /* * Aquí estaba .asm-calcp-total, la línea "Total de venta" que sumaba tarifa + * fee SC + fee agencia. Retirada el 20/08/2026 con los dos fees: con un único * campo de entrada, esa línea repetía el número que se acababa de teclear. */ .asm-calcp-metodos { margin: 14px 0 0; padding: 0; list-style: none; } .asm-calcp-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid #eaecf0; flex-wrap: wrap; } /* * El icono es lo que hace la lista legible de un vistazo. Sin él son cuatro * renglones de texto casi iguales y hay que leerlos; con él, la forma y el * color identifican el método antes de leer nada. Son los mismos iconos y los * mismos colores que las tarjetas de la página completa. */ .asm-calcp-fila__icono { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; font-size: 0.85rem; } .asm-calcp-fila__icono.is-verde { color: #067647; background: #ecfdf3; } .asm-calcp-fila__icono.is-amarillo { color: #b54708; background: #fffaeb; } .asm-calcp-fila__icono.is-azul { color: #175cd3; background: #eff8ff; } .asm-calcp-fila__icono.is-morado { color: #6941c6; background: #f4f3ff; } .asm-calcp-fila__nombre { flex: 1 1 auto; /* empuja el importe a la derecha */ font-size: 0.86rem; font-weight: 650; color: #344054; } .asm-calcp-fila__nombre small { margin-left: 4px; font-weight: 500; color: #98a2b3; } .asm-calcp-fila strong { font-size: 0.95rem; color: #101828; } /* * Los desplegables del destino de la transferencia, debajo de los importes y * encima del total. * * Sin fondo ni separador: forman parte del mismo bloque que los campos de * arriba —todo esto es lo que se introduce— y el corte visual va después, en * el total, que es donde empieza lo que la calculadora devuelve. Meterles una * franja gris aquí partiría en dos algo que es una sola cosa. */ .asm-calcp-destino { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } .asm-calcp-destino select { width: 100%; min-width: 0; /* sin esto un banco de nombre largo estira la franja */ padding: 7px 9px; border: 1px solid #d0d5dd; border-radius: 8px; font-size: 0.78rem; color: #344054; background: #ffffff; } .asm-calcp-destino select:disabled { color: #98a2b3; background: #f2f4f7; } .asm-calcp-limpiar { width: 100%; margin-top: 14px; padding: 9px; border: 1px solid #d0d5dd; border-radius: 9px; background: #ffffff; font-size: 0.82rem; font-weight: 650; color: #475467; } .asm-calcp-limpiar:hover { background: #f9fafb; } .asm-calcp-vacio { margin: 0; padding: 22px 4px; text-align: center; font-size: 0.85rem; color: #667085; } /* ---- El abanico de móvil ---- */ /* En escritorio no existe: allí hay dos botones y se ven los dos. */ .asm-fab { display: none; } .asm-fab__acciones { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin-bottom: 12px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .16s ease, transform .16s ease; } .asm-fab-abierto .asm-fab__acciones { opacity: 1; transform: translateY(0); pointer-events: auto; } .asm-fab__accion { display: inline-flex; align-items: center; gap: 10px; padding: 0 6px 0 14px; border: 0; border-radius: 999px; background: transparent; color: #ffffff; font-size: 0.8rem; font-weight: 700; } /* La etiqueta lleva su propia chapa para leerse sobre cualquier fondo. */ .asm-fab__accion span { padding: 5px 11px; border-radius: 8px; background: rgba(16, 24, 40, 0.82); } .asm-fab__accion i { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--asm-navy-900, #041c3b); font-size: 1.15rem; box-shadow: 0 10px 22px rgba(4, 28, 59, 0.3); } .asm-fab__accion--wsp i { background: #16a365; box-shadow: 0 10px 22px rgba(22, 163, 101, 0.3); } .asm-fab__boton { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-left: auto; border: 0; border-radius: 50%; color: #ffffff; background: var(--asm-navy-900, #041c3b); box-shadow: 0 14px 30px rgba(4, 28, 59, 0.34); font-size: 1.25rem; transition: transform .16s ease; } .asm-fab-abierto .asm-fab__boton { transform: rotate(45deg); /* el + se convierte en × */ } /* * El punto de corte es el MISMO que ya usa .asm-whatsapp-float para volverse * círculo (línea 1889). Inventar aquí un tercer umbral habría dejado una * franja de anchuras con el botón de soporte ya en círculo pero todavía dos * botones sueltos. */ @media (max-width: 991.98px) { /* * Los dos botones sueltos desaparecen y los sustituye el abanico. No se * suman: si no, habría tres cosas flotando en la pantalla más pequeña. */ .asm-calc-float, .asm-whatsapp-float { display: none !important; } .asm-fab { position: fixed; right: 16px; /* * env(safe-area-inset-bottom) sube el botón por encima de la barra * inferior del navegador en iPhone. Sin esto queda debajo y no se * puede pulsar, que es justo el motivo por el que en móvil no se * apilan dos. */ bottom: calc(17px + env(safe-area-inset-bottom, 0px)); z-index: 1025; display: flex; flex-direction: column; align-items: flex-end; } /* El panel pasa a ser una hoja que sube desde abajo. */ .asm-calcp { right: 0; left: 0; bottom: 0; width: auto; max-width: none; max-height: 85vh; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); } /* Con la hoja abierta, el abanico estorba. */ .asm-calc-abierta .asm-fab { display: none; } } /* |-------------------------------------------------------------------------- | Panel de aviso de RateHawk |-------------------------------------------------------------------------- | | Los bloques "Políticas del Hotel" e "Información Adicional" de ratehawk.js | llevaban el color en un style="" en línea. Un style en línea no lo puede | tumbar ninguna hoja sin !important, así que en tema oscuro se quedaba gris | claro sí o sí. El color se muda aquí sin cambiar de valor: en tema claro | esto se ve exactamente igual que antes. */ .asm-panel-aviso { background: #e5e5e5; } /* ===================================================================== Formulario de pasajeros (01/09/2026) Se estiliza por CONTENEDOR (#Paso-2, que comparten los cinco motores de vuelo y el flujo de hoteles) en vez de tocar el markup: son seis mil líneas de PHP con manejadores en línea que actualizan el resumen lateral y guardan en la base, y reescribirlas para cambiar el aspecto era mucho riesgo para nada. ===================================================================== */ #Paso-2 .card, .asm-pax-form .card { border: 1px solid var(--asm-border); border-radius: var(--asm-radius); box-shadow: var(--asm-shadow-sm); overflow: hidden; } #Paso-2 .card-header, .asm-pax-form .card-header { background: var(--asm-surface-soft); border-bottom: 1px solid var(--asm-border); padding: 0.85rem 1.15rem; } #Paso-2 .card-header h4, .asm-pax-form .card-header h4 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--asm-text); display: flex; align-items: center; gap: 0.5rem; } /* El punto rojo delante del título: da con qué anclar la vista al recorrer una lista de pasajeros, sin tener que tocar el HTML. */ #Paso-2 .card-header h4::before, .asm-pax-form .card-header h4::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--asm-accent); flex: 0 0 auto; } #Paso-2 .card-body, .asm-pax-form .card-body { padding: 1.15rem; } #Paso-2 .form-group, .asm-pax-form .form-group { margin-bottom: 1rem; } #Paso-2 .form-label, .asm-pax-form .form-label { font-size: 0.78rem; font-weight: 500; color: var(--asm-muted); margin-bottom: 0.3rem; letter-spacing: 0.01em; } #Paso-2 .form-control, #Paso-2 .form-select, .asm-pax-form .form-control, .asm-pax-form .form-select { border: 1px solid var(--asm-border); border-radius: var(--asm-radius-sm); padding: 0.55rem 0.8rem; font-size: 0.9rem; background: var(--asm-surface); color: var(--asm-text); transition: border-color var(--asm-transition), box-shadow var(--asm-transition); } #Paso-2 .form-control:focus, #Paso-2 .form-select:focus, .asm-pax-form .form-control:focus, .asm-pax-form .form-select:focus { border-color: var(--asm-primary-soft); box-shadow: 0 0 0 3px rgba(29, 41, 57, 0.08); outline: none; } #Paso-2 .select2-container--default .select2-selection--single, .asm-pax-form .select2-container--default .select2-selection--single { border: 1px solid var(--asm-border); border-radius: var(--asm-radius-sm); height: auto; padding: 0.2rem 0.25rem; } /* Los radios de género, con aire y alineados con el resto */ #Paso-2 .form-check-inline, .asm-pax-form .form-check-inline { margin-right: 1.1rem; } #Paso-2 .form-check-label, .asm-pax-form .form-check-label { font-size: 0.88rem; color: var(--asm-text); } /* ------------------------------------------------- campos con problema */ .asm-campo-invalido, .asm-campo-invalido.form-control, .asm-campo-invalido.select2-selection { border-color: var(--asm-accent) !important; background-color: rgba(230, 57, 70, 0.03) !important; } .asm-campo-invalido:focus { box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.12) !important; } .asm-campo-error { display: block; margin-top: 0.3rem; font-size: 0.76rem; line-height: 1.35; color: var(--asm-accent-dark); } .asm-campo-error::before { content: "\26A0"; margin-right: 0.35rem; } /* Los radios no tienen borde que pintar: se marca su etiqueta */ .form-check-input.asm-campo-invalido { outline: 2px solid var(--asm-accent); outline-offset: 2px; } /* ===================================================================== Red de seguridad para los desplegables que cuelgan del (01/09/2026) jQuery UI y select2 no dibujan su menú dentro del campo: lo añaden al final del y lo colocan con `position:absolute` + top/left. Ese `absolute` vive en SU hoja de estilos, así que si esa hoja no llega —el CDN caído, un proxy, una VPN— el menú se queda en flujo normal y aparece como una lista suelta al final de la página, debajo del footer. Con estas reglas el menú sigue anclado aunque falte su CSS. Repiten lo que jquery-ui.css ya dice: si la hoja carga, no cambian nada. ===================================================================== */ .ui-autocomplete { position: absolute; z-index: 1100; list-style: none; padding: 0; margin: 0; background: var(--asm-surface); } .ui-front { z-index: 1100; } /* El input espejo que jQuery UI usa para lectores de pantalla: sin su CSS se ve como un campo vacío suelto en la página. */ .ui-helper-hidden-accessible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .select2-dropdown { position: absolute; } /* ========================================================================== Aviso de tarificación en curso (KIU) -------------------------------------------------------------------------- Los vuelos de KIU llegan sin precio y se tarifan por lotes después de pintar los resultados. Sin este aviso, el agente ve una lista donde unos vuelos tienen precio y otros no, sin nada que explique por qué. Lo inserta y lo retira assets/js/funciones.js (KiuProgressivePricing). ========================================================================== */ .asm-aviso-tarifando { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 11px 16px; border-radius: 10px; border: 1px solid rgba(13, 31, 60, .12); background: #eef2f8; color: #0d1f3c; font-size: .875rem; font-weight: 500; transition: opacity .35s ease, transform .35s ease; } /* El brillo que recorre la pastilla mientras se tarifa. */ .asm-aviso-tarifando::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 100deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, 0) 80% ); transform: translateX(-100%); animation: asm-brillo-tarifando 1.6s ease-in-out infinite; pointer-events: none; } @keyframes asm-brillo-tarifando { to { transform: translateX(100%); } } .asm-aviso-tarifando__spinner { flex: 0 0 auto; width: 15px; height: 15px; border: 2px solid rgba(13, 31, 60, .22); border-top-color: #0d1f3c; border-radius: 50%; animation: asm-gira-tarifando .8s linear infinite; } @keyframes asm-gira-tarifando { to { transform: rotate(360deg); } } .asm-aviso-tarifando__detalle { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; opacity: .75; } /* Se le pone al retirarlo, para que no desaparezca de golpe. */ .asm-aviso-tarifando.asm-aviso-tarifando--fin { opacity: 0; transform: translateY(-6px); } /* Quien prefiera no ver movimiento conserva el aviso, sin animación. */ @media (prefers-reduced-motion: reduce) { .asm-aviso-tarifando::after, .asm-aviso-tarifando__spinner { animation: none; } .asm-aviso-tarifando::after { display: none; } } /* * Insignia flotante de reCAPTCHA: oculta. * * Ocupaba la esquina inferior derecha, donde ya se apilan el botón de la * calculadora y el de volver arriba, y no aporta nada al agente. * * OJO, no es solo estética: Google permite ocultarla SIEMPRE QUE se muestre en * su lugar el aviso de que el sitio está protegido por reCAPTCHA, con enlace a * su política de privacidad y sus términos. Ese aviso está en src/footer.php. * Si se quita de ahí, hay que volver a enseñar la insignia. */ .grecaptcha-badge { visibility: hidden; } /* El aviso de reCAPTCHA comparte la barra inferior con el copyright y los * enlaces legales: mismo tamaño y color apagado para que no compita con ellos. */ .asm-footer-recaptcha { margin: 0; color: #98a2b3; font-size: 0.7rem; white-space: nowrap; } .asm-footer-recaptcha a { color: inherit; text-decoration: underline; } .asm-footer-recaptcha a:hover { color: #667085; } @media (max-width: 991px) { .asm-footer-recaptcha { white-space: normal; } } /* * Velo de carga sobre la zona que se recarga (órdenes, reservas). * * Translúcido a propósito: se sigue viendo la tabla anterior debajo, así el * agente mantiene la referencia visual de dónde estaba en vez de quedarse * ante un bloque en blanco. * * DOS DECISIONES QUE PARECEN RAREZAS Y NO LO SON * * 1. El velo cubre el contenedor (absolute), pero el GIRO va `fixed` y * centrado en la pantalla. Si el giro se coloca respecto al contenedor, * con la cabecera fija encima queda recortado arriba, y en una tabla larga * acaba fuera de la vista al estar desplazado. Fijo al centro de la * ventana se ve siempre, mire donde mire el agente. * * 2. NO se usa `backdrop-filter`. Aunque quedaba bien, convierte al velo en * bloque contenedor de sus hijos posicionados: el `fixed` del giro dejaría * de referirse a la ventana y volvería a centrarse en el velo, que es el * problema que se quería resolver. El fondo translúcido solo cumple igual. */ .asm-velo-carga { position: absolute; inset: 0; z-index: 1040; background: rgba(255, 255, 255, 0.62); cursor: progress; /* Aparece con un punto de retraso: si la respuesta llega en 80 ms, no * llega a verse un parpadeo molesto. */ animation: asm-velo-entrada 0.45s ease forwards; opacity: 0; } @keyframes asm-velo-entrada { 0% { opacity: 0; } 40% { opacity: 0; } 100% { opacity: 1; } } .asm-velo-carga__giro { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1041; width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(17, 24, 39, 0.12); border-top-color: #e11d48; animation: asm-velo-giro 0.8s linear infinite; /* Un halo claro detrás: sobre una tabla densa, el aro solo se confunde * con el contenido que asoma por el velo. */ box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.62); } /* Los dos extremos, declarados. El giro ya lleva un translate para * centrarse: si el fotograma final solo dijera `rotate()`, el navegador * tendría que deducir el inicial y el aro daría un salto al arrancar. */ @keyframes asm-velo-giro { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /* Modo oscuro: el velo debe oscurecer, no aclarar. */ [data-bs-theme="dark"] .asm-velo-carga, .dark-mode .asm-velo-carga { background: rgba(17, 24, 39, 0.6); } [data-bs-theme="dark"] .asm-velo-carga__giro, .dark-mode .asm-velo-carga__giro { border-color: rgba(255, 255, 255, 0.15); border-top-color: #fb7185; box-shadow: 0 0 0 10px rgba(17, 24, 39, 0.6); } /* Quien prefiera menos movimiento: el velo se queda, el giro no. */ @media (prefers-reduced-motion: reduce) { .asm-velo-carga { animation: none; opacity: 1; } .asm-velo-carga__giro { animation: none; } }