/* ═══════════════════════════════════════════════════════════════════════════ CHISFIS SKIN — estilo, no estructura ═══════════════════════════════════════════════════════════════════════════ Valores medidos sobre chisfis-nextjs.vercel.app (portada, listado y ficha) y traducidos al DOM que ya genera BookingCore. No cambia una sola etiqueta del HTML: donde hace falta reordenar —el precio, que hoy va encima de la foto y en Chisfis va debajo— se usa `display: contents` sobre .thumb-image para promover sus hijos a la rejilla de la tarjeta y colocarlos por `grid-area`. Ese es el truco que permite pedir "estilo sí, estructura no". Se carga la última de todas las hojas. Aun así lleva !important en muchas reglas porque la hoja del vendedor y app.css lo usan a mansalva; sin él no ganaría ni cargando después. Interruptor: todo cuelga de .bc-skin, la clase que el layout pone en según `advanced.style_pack`. Quitarla devuelve el aspecto anterior intacto. ═════════════════════════════════════════════════════════════════════════ */ .bc-skin { /* ═══════════════════════════════════════════════════════════════════ DE CHISFIS SE TOMA LA GEOMETRÍA. LOS COLORES SON LOS DEL TEMA. ═══════════════════════════════════════════════════════════════════ Ni un color fijo en todo el skin: cada tono sale de lo que el vendedor tiene configurado —--bc-primary, --bc-text, --bc-background, --bc-badge— o de una mezcla entre ellos. Los grises de Chisfis quedan solo como reserva por si la hoja del tema no llegara a cargar. Los apagados se calculan igual que ya lo hace vendor-theme-css.blade.php —color-mix del texto sobre el fondo—, así el skin y la hoja del tema no se contradicen y el gris «apagado» de cada minisitio conserva su matiz. */ /* ── Superficies ── */ --sk-bg: var(--bc-background, #ffffff); /* Panel elevado: el fondo del tema aclarado, no un blanco impuesto. Sobre un fondo claro da casi blanco; sobre uno oscuro, sube un escalón. */ --sk-surface: color-mix(in srgb, var(--bc-background, #fff) 88%, #ffffff); --sk-text: var(--bc-text, #111827); --sk-muted: color-mix(in srgb, var(--bc-text, #111827) 62%, var(--bc-background, #fff)); --sk-faint: color-mix(in srgb, var(--bc-text, #111827) 45%, var(--bc-background, #fff)); --sk-accent: var(--bc-primary, #6366f1); /* Distintivos: el color de etiqueta del tema, que por omisión sigue al primario. Antes iba un rojo de Chisfis incrustado. */ --sk-badge: var(--bc-badge, var(--bc-primary, #6366f1)); --sk-badge-fg: var(--bc-badge-text, #ffffff); /* Relleno de la galería mientras carga la foto */ --sk-placeholder: color-mix(in srgb, var(--bc-text, #111827) 10%, var(--bc-background, #fff)); /* ── Las seis decisiones ── Elevación: ninguna. Chisfis no pone sombra en las tarjetas; la profundidad la da el aire, no el desenfoque. */ --sk-shadow: none; --sk-shadow-pop: 0 10px 40px rgba(0, 0, 0, .12); /* Hairline al 10% del texto, no un gris fijo: así sigue al tema */ --sk-line: color-mix(in srgb, var(--sk-text) 10%, transparent); --sk-line-strong: color-mix(in srgb, var(--sk-text) 16%, transparent); /* Radios */ --sk-r-img: 14px; --sk-r-box: 14px; --sk-r-pill: 9999px; --sk-r-chip: 10px; /* Densidad */ --sk-gap-1: 4px; --sk-gap-2: 8px; --sk-gap-3: 12px; --sk-gap-4: 16px; --sk-gap-6: 24px; --sk-gap-8: 32px; /* Proporción de foto de tarjeta: 12:11, casi cuadrada */ --sk-card-ratio: 12 / 11; /* Botón. De Chisfis se copia la forma —píldora de 44px sin sombra—, no el relleno: el suyo es casi negro y el tuyo es el primario configurado. */ --sk-btn-h: 44px; --sk-btn-pad: 10px 22px; --sk-btn-bg: var(--bc-primary, #6366f1); /* La tinta la calcula la hoja del tema a partir del primario elegido (--bc-on-primary): blanco si el primario es oscuro, casi negro si es claro. Poner blanco fijo dejaba el botón ilegible con un turquesa o un amarillo, que es exactamente lo que pasaba. */ --sk-btn-fg: var(--bc-on-primary, #ffffff); /* El color de marca corregido para leerse COMO texto sobre el fondo: para estrellas, iconos, números y cualquier acento tipográfico. */ --sk-accent-ink: var(--bc-primary-ink, var(--bc-primary, #6366f1)); --sk-badge-ink: var(--bc-badge-ink, var(--bc-badge, var(--bc-primary, #6366f1))); } /* ── Modo oscuro ────────────────────────────────────────────────────────── NO se activa solo con la preferencia del sistema. Es deliberado: si un vendedor ha configurado una paleta clara, que su minisitio se vuelva oscuro sin que él lo pida es exactamente no respetar lo que configuró. Se enciende a mano poniendo data-theme="dark" en o en . Y aun encendido conserva su color: el fondo y el texto se derivan de los suyos —invertidos y desaturados hacia el neutro—, no se sustituyen por los grises de Chisfis. El primario, el de etiqueta y el de cabecera y pie se quedan tal cual los tiene puestos. */ .bc-skin[data-theme="dark"], [data-theme="dark"] .bc-skin { --sk-bg: color-mix(in srgb, var(--bc-text, #111827) 92%, #000000); --sk-surface: color-mix(in srgb, var(--bc-text, #111827) 84%, #000000); --sk-text: color-mix(in srgb, var(--bc-background, #ffffff) 94%, #ffffff); --sk-muted: color-mix(in srgb, var(--bc-background, #fff) 62%, var(--bc-text, #111827)); --sk-faint: color-mix(in srgb, var(--bc-background, #fff) 45%, var(--bc-text, #111827)); --sk-line: rgba(255, 255, 255, .12); --sk-line-strong: rgba(255, 255, 255, .20); --sk-placeholder: rgba(255, 255, 255, .10); --sk-shadow-pop: 0 10px 40px rgba(0, 0, 0, .5); } /* ── Base ───────────────────────────────────────────────────────────────── */ .bc-skin, .bc-skin .bc_wrap { background-color: var(--sk-bg) !important; color: var(--sk-text) !important; } /* Escala tipográfica medida: h1 48/55 peso 500 con -1.2px de interletrado, h2 36/40 peso 600, h3 20/28 peso 600, cuerpo 16/24. */ .bc-skin h1, .bc-skin .bc_wrap h1 { font-weight: 500 !important; letter-spacing: -.025em !important; line-height: 1.15 !important; } .bc-skin h2, .bc-skin .bc_wrap h2 { font-weight: 600 !important; letter-spacing: -.015em !important; line-height: 1.15 !important; } .bc-skin h3, .bc-skin h4, .bc-skin .bc_wrap h3, .bc-skin .bc_wrap h4 { font-weight: 600 !important; line-height: 1.4 !important; } .bc-skin .bc_wrap p { color: var(--sk-muted) !important; line-height: 1.5 !important; } /* ═══════════════════════════════════════════════════════════════════════════ TARJETA DE SERVICIO ═══════════════════════════════════════════════════════════════════════════ Chisfis: foto 12:11 radio 14, luego meta gris, título 16/600, ubicación gris con icono, una raya corta de 56px, y abajo precio a la izquierda y nota a la derecha. Plana: sin fondo, sin borde, sin sombra. Aquí la tarjeta pasa a ser una rejilla de dos columnas y seis filas, y cada pieza se coloca por `grid-area`. El orden del HTML deja de importar, que es justo lo que hace falta para mover el precio sin tocarlo. */ .bc-skin .item-loop, .bc-skin .item-loop-wrap { position: relative !important; display: grid !important; /* minmax(0,…) y no 1fr: con `nowrap` en el título, un 1fr crece hasta el ancho del texto y la tarjeta se desborda en vez de recortar. */ grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: var(--sk-gap-2); column-gap: var(--sk-gap-3); background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: var(--sk-shadow) !important; padding: 0 !important; overflow: visible !important; margin-bottom: var(--sk-gap-8) !important; } /* La caja de la foto se disuelve: sus tres hijos —galería, precio y corazón— pasan a ser celdas de la rejilla de la tarjeta. */ .bc-skin .item-loop > .thumb-image { display: contents !important; } .bc-skin .item-loop .bc-card-gallery, .bc-skin .item-loop > .thumb-image > a, .bc-skin .item-loop > .thumb-image > img { grid-area: 1 / 1 / 2 / 3; position: relative; width: 100% !important; aspect-ratio: var(--sk-card-ratio); border-radius: var(--sk-r-img) !important; overflow: hidden !important; margin: 0 0 var(--sk-gap-1) !important; background: var(--sk-placeholder); } .bc-skin .item-loop .bc-card-gallery img, .bc-skin .item-loop > .thumb-image > a > img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 0 !important; } /* El velo negro sobre la foto existía para que se leyera el precio, que iba encima. Ahora el precio va debajo, así que sobra: ensuciaba la imagen. */ .bc-skin .item-loop .bc-card-gallery-slide::before, .bc-skin .item-loop .bc-card-gallery-slide::after { display: none !important; content: none !important; } /* Meta: las comodidades hacen de "Entire cabin · 10 beds" */ .bc-skin .item-loop .amenities { grid-area: 2 / 1 / 3 / 3; display: flex !important; align-items: center; /* app.css las reparte con space-between y quedaban en los dos extremos de la tarjeta; en Chisfis la meta es una frase seguida. */ justify-content: flex-start !important; gap: var(--sk-gap-3) !important; margin: 0 !important; padding: 0 !important; border: 0 !important; font-size: 14px !important; line-height: 20px !important; color: var(--sk-muted) !important; } .bc-skin .item-loop .amenities .amenity { display: inline-flex !important; align-items: center; gap: 6px !important; margin: 0 !important; padding: 0 !important; font-size: 14px !important; color: var(--sk-muted) !important; } .bc-skin .item-loop .amenities .amenity i { font-size: 15px !important; color: var(--sk-faint) !important; } .bc-skin .item-loop .amenities .amenity .text { font-size: 14px !important; color: var(--sk-muted) !important; } /* Título: 16/24 peso 600, una sola línea con puntos suspensivos */ .bc-skin .item-loop .item-title { grid-area: 3 / 1 / 4 / 3; min-width: 0; margin: 0 !important; padding: 0 !important; position: relative; } .bc-skin .item-loop .item-title > a { display: block !important; font-size: 16px !important; font-weight: 600 !important; line-height: 24px !important; color: var(--sk-text) !important; text-decoration: none !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Ubicación: 14/20 gris */ .bc-skin .item-loop .location { grid-area: 4 / 1 / 5 / 3; margin: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 20px !important; color: var(--sk-muted) !important; } .bc-skin .item-loop .location:empty { display: none !important; } /* La raya corta. Es un pseudo-elemento de la propia tarjeta puesto como celda de la rejilla: 56px, no de lado a lado. Es la firma de Chisfis. */ .bc-skin .item-loop::before { /* !important en content: app.css genera pseudo-elementos sobre estas mismas tarjetas y sin él este no llegaba a existir. */ content: "" !important; grid-area: 5 / 1 / 6 / 3 !important; width: 56px !important; height: 0 !important; position: static !important; inset: auto !important; background: none !important; border-bottom: 1px solid var(--sk-line) !important; margin: var(--sk-gap-1) 0 !important; } /* Pie: precio a la izquierda, nota a la derecha, misma fila */ .bc-skin .item-loop .price-wrapper { grid-area: 6 / 1 / 7 / 2; position: static !important; inset: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; text-align: start !important; } .bc-skin .item-loop .price-wrapper .price { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: baseline; gap: 6px !important; padding: 0 !important; background: none !important; } .bc-skin .item-loop .price-wrapper .text-price { font-size: 16px !important; font-weight: 600 !important; line-height: 24px !important; color: var(--sk-text) !important; text-shadow: none !important; } .bc-skin .item-loop .price-wrapper .text-price .unit { font-size: 14px !important; font-weight: 400 !important; color: var(--sk-muted) !important; } /* El precio tachado va detrás, pequeño y apagado. `inline` es necesario: viene como block y partía la fila en dos. */ .bc-skin .item-loop .price-wrapper .onsale { order: 2; /* Venía en absoluto, flotando por encima de la fila del precio: por eso aparecía en su propia línea en vez de al lado. */ position: static !important; inset: auto !important; display: inline !important; font-size: 13px !important; font-weight: 400 !important; color: var(--sk-faint) !important; text-decoration: line-through !important; text-shadow: none !important; } .bc-skin .item-loop .service-review { grid-area: 6 / 2 / 7 / 3; display: flex !important; align-items: center; justify-content: flex-end; gap: 5px !important; margin: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 20px !important; color: var(--sk-muted) !important; } .bc-skin .item-loop .service-review .rate { display: inline-flex !important; align-items: center; gap: 4px !important; font-weight: 500 !important; color: var(--sk-text) !important; background: none !important; padding: 0 !important; } /* Sin reseñas el llega vacío y solo aportaba un hueco suelto */ .bc-skin .item-loop .service-review .rate:empty { display: none !important; } /* La estrella naranja de Chisfis, dibujada donde no hay icono propio */ .bc-skin .item-loop .service-review::before { content: "★"; font-size: 15px; line-height: 1; /* La estrella sigue al color de etiqueta del tema (que por omisión es el primario). Chisfis usa un ámbar fijo; aquí manda tu configuración. */ color: var(--sk-badge-ink); } .bc-skin .item-loop .service-review .review { color: var(--sk-muted) !important; font-size: 14px !important; } /* Punto gris de 4px que separaba nota y número de reseñas. En Chisfis la línea es «★ 4.8 (28)», seguida y sin viñeta. */ .bc-skin .item-loop .service-review .review::after, .bc-skin .item-loop .service-review .review::before { display: none !important; content: none !important; } /* Corazón: círculo translúcido arriba a la derecha de la foto */ .bc-skin .item-loop .service-wishlist { grid-area: 1 / 1 / 2 / 3; justify-self: end; align-self: start; position: relative !important; z-index: 3; inset: auto !important; width: 32px !important; height: 32px !important; margin: 12px 12px 0 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: var(--sk-r-pill) !important; background: rgba(0, 0, 0, .32) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff !important; box-shadow: none !important; } .bc-skin .item-loop .service-wishlist i { font-size: 15px !important; color: #fff !important; } .bc-skin .item-loop .service-wishlist.active i, .bc-skin .item-loop .service-wishlist:hover i { color: var(--sk-badge-ink) !important; } /* Descuento: píldora roja clara arriba a la izquierda de la foto */ .bc-skin .item-loop .item-title .sale_info, .bc-skin .item-loop .sale_info { position: absolute !important; inset: auto auto auto 0 !important; top: calc((100cqw) * 0) !important; display: none !important; } .bc-skin .item-loop > .thumb-image ~ .item-title .sale_info { display: none !important; } /* Se redibuja sobre la galería para que quede sobre la foto sin moverlo de sitio en el HTML. */ .bc-skin .item-loop .bc-card-gallery::after { content: attr(data-sale); position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2; padding: 2px 12px; border-radius: var(--sk-r-pill); border: 1px solid color-mix(in srgb, var(--sk-badge) 34%, transparent); background: color-mix(in srgb, var(--sk-badge) 12%, var(--sk-bg)); color: var(--sk-badge-ink); font-size: 12px; font-weight: 500; line-height: 20px; } .bc-skin .item-loop .bc-card-gallery:not([data-sale])::after { display: none; } /* Puntos de la galería, al estilo Chisfis */ .bc-skin .item-loop .bc-card-gallery-dots { bottom: 10px !important; gap: 5px !important; } .bc-skin .item-loop .bc-card-gallery-dot { width: 6px !important; height: 6px !important; border-radius: var(--sk-r-pill) !important; background: rgba(255, 255, 255, .55) !important; box-shadow: none !important; } .bc-skin .item-loop .bc-card-gallery-dot.is-active { background: #fff !important; transform: none !important; } .bc-skin .item-loop .bc-card-gallery-arrow { width: 30px !important; height: 30px !important; border-radius: var(--sk-r-pill) !important; background: color-mix(in srgb, var(--sk-surface) 92%, transparent) !important; border: 0 !important; color: var(--sk-text) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .16) !important; /* Visibles siempre. Las tenía en opacidad 0 hasta pasar el ratón, que es lo que hace Chisfis en escritorio — pero en móvil no hay ratón y se quedaban invisibles, y en el carrusel de la portada tampoco se veían. */ opacity: .92; transition: opacity .18s ease, transform .18s ease; } .bc-skin .item-loop:hover .bc-card-gallery-arrow, .bc-skin .item-loop .bc-card-gallery-arrow:hover { opacity: 1; } .bc-skin .item-loop .bc-card-gallery-arrow[hidden] { display: none !important; } /* Rejilla del listado: 32px de aire vertical entre tarjetas en móvil */ .bc-skin .bc-list-item .item-loop-wrap, .bc-skin .list-item .item-loop-wrap { margin-bottom: var(--sk-gap-8) !important; } /* ═══════════════════════════════════════════════════════════════════════════ BOTONES ═══════════════════════════════════════════════════════════════════════════ Chisfis: píldora completa, 44px de alto, relleno casi negro y cero sombra. El color primario del tema queda para acentos y enlaces, no para el relleno —ése es el detalle que hace que no parezca una plantilla teñida. */ /* `:not(.btn-search)` no es cosmético: ese es el botón redondo de la lupa del hero, 48x48 con el texto oculto. Al meterle el relleno de píldora el contenido se salía de la caja y la etiqueta asomaba fuera del buscador. */ .bc-skin .btn-primary:not(.btn-search), .bc-skin .bc-theme-cta, .bc-skin .btn.btn-primary:not(.btn-search), .bc-skin .bc_wrap .btn-black, .bc-skin button[type="submit"].btn-primary:not(.btn-search) { min-height: var(--sk-btn-h) !important; padding: var(--sk-btn-pad) !important; border: 0 !important; border-radius: var(--sk-r-pill) !important; background: var(--sk-btn-bg) !important; color: var(--sk-btn-fg) !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.4 !important; box-shadow: none !important; transition: opacity .18s ease, transform .18s ease; } /* Botones de solo icono: mismo relleno oscuro, pero cuadrados y sin padding */ .bc-skin .btn-primary.btn-search { padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: none !important; } .bc-skin .btn-primary:not(.btn-search):hover, .bc-skin .bc-theme-cta:hover { opacity: .88 !important; transform: none !important; box-shadow: none !important; color: var(--sk-btn-fg) !important; } /* Secundario: mismo molde, relleno al 10% del texto */ .bc-skin .btn-default, .bc-skin .btn-secondary, .bc-skin .btn-outline { min-height: var(--sk-btn-h) !important; padding: var(--sk-btn-pad) !important; border: 0 !important; border-radius: var(--sk-r-pill) !important; background: color-mix(in srgb, var(--sk-text) 8%, transparent) !important; color: var(--sk-text) !important; font-weight: 500 !important; box-shadow: none !important; } /* ═══════════════════════════════════════════════════════════════════════════ CAMPOS Y CAJAS ═══════════════════════════════════════════════════════════════════════════ */ .bc-skin .form-control, .bc-skin input[type="text"], .bc-skin input[type="email"], .bc-skin input[type="search"], .bc-skin textarea, .bc-skin select { border-radius: var(--sk-r-box) !important; border: 1px solid var(--sk-line-strong) !important; background: var(--sk-surface) !important; color: var(--sk-text) !important; box-shadow: none !important; } .bc-skin .form-control:focus { border-color: var(--sk-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-accent) 18%, transparent) !important; } /* Cajas de filtros y paneles: superficie plana con hairline, sin sombra */ .bc-skin .bc-list-item .filter-wrapper, .bc-skin .sidebar-item, .bc-skin .g-filter, .bc-skin .filter-item { background: var(--sk-surface) !important; border: 1px solid var(--sk-line) !important; border-radius: var(--sk-r-box) !important; box-shadow: none !important; } /* Cualquier sombra grande heredada se apaga: es lo que más delata a la plantilla vieja debajo. */ .bc-skin .bc_wrap [class*="box_shadow"], .bc-skin .bc_wrap .item-loop, .bc-skin .bc_wrap .featured-item { box-shadow: none !important; } /* ═══════════════════════════════════════════════════════════════════════════ PIE ═══════════════════════════════════════════════════════════════════════════ */ .bc-skin .bc-minisite-footer, .bc-skin .bc-bottombar { background: var(--sk-surface) !important; color: var(--sk-muted) !important; border-top: 1px solid var(--sk-line) !important; } .bc-skin .bc-minisite-footer a, .bc-skin .bc-bottombar a { color: var(--sk-muted) !important; } .bc-skin .bc-minisite-footer a:hover, .bc-skin .bc-bottombar a:hover { color: var(--sk-text) !important; } /* ═══════════════════════════════════════════════════════════════════════════ BUSCADOR MÓVIL EN HOJA ═══════════════════════════════════════════════════════════════════════════ Medido sobre la hoja de Chisfis: fondo #f3f4f6, paneles blancos de radio 14 con 16px de relleno y 12px entre ellos, × de 28px arriba a la derecha y una barra blanca fija abajo de 12/16 con el botón píldora. El formulario no se duplica ni se mueve: es el mismo .g-form-control de siempre, que pasa de estar plegado a ocupar la pantalla. Ver el parcial mobile-search-script.blade.php. */ @media (max-width: 990px) { /* ── La píldora que abre ── */ .bc-skin .bc-msearch-trigger { display: none; width: 100%; align-items: center; gap: var(--sk-gap-3); margin: 0 0 var(--sk-gap-4); padding: 10px 18px; border: 1px solid var(--sk-line-strong); border-radius: var(--sk-r-pill); background: var(--sk-surface); color: var(--sk-text); text-align: start; box-shadow: 0 6px 20px rgba(0, 0, 0, .10); } .bc-skin.bc-msearch-on .bc-msearch-trigger { display: flex; } .bc-skin .bc-msearch-ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--sk-text); } .bc-skin .bc-msearch-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .bc-skin .bc-msearch-title { font-size: 15px; font-weight: 600; color: var(--sk-text); } .bc-skin .bc-msearch-sub { font-size: 12px; color: var(--sk-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bc-skin .bc-msearch-sub:empty::before { content: "·"; color: transparent; } /* ── El formulario, plegado ── */ .bc-skin.bc-msearch-on .bc-msearch-sheet { display: none !important; } /* ── El formulario, desplegado como hoja ── */ .bc-skin.bc-msearch-open .bc-msearch-sheet { display: block !important; position: fixed !important; inset: 0 !important; z-index: 10050 !important; width: auto !important; max-width: none !important; max-height: none !important; height: 100dvh !important; margin: 0 !important; padding: 52px 6px 84px !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; background: color-mix(in srgb, var(--bc-background, #fff) 94%, var(--bc-text, #111827)) !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; } .bc-skin.bc-msearch-open { overflow: hidden !important; } /* Cada bloque del formulario pasa a ser un panel blanco */ .bc-skin.bc-msearch-open .bc-msearch-sheet .tab-content, .bc-skin.bc-msearch-open .bc-msearch-sheet .form-group, .bc-skin.bc-msearch-open .bc-msearch-sheet .item { background: var(--sk-surface) !important; border: 0 !important; border-radius: var(--sk-r-box) !important; margin-bottom: var(--sk-gap-3) !important; padding: var(--sk-gap-4) !important; box-shadow: none !important; } .bc-skin.bc-msearch-open .bc-msearch-sheet .item { margin-bottom: var(--sk-gap-2) !important; } /* Las pestañas de servicio, arriba, como en Chisfis */ .bc-skin.bc-msearch-open .bc-msearch-sheet .nav-tabs { display: flex !important; justify-content: center !important; gap: var(--sk-gap-6) !important; margin: 0 0 var(--sk-gap-3) !important; padding: 0 !important; background: transparent !important; border: 0 !important; } .bc-skin.bc-msearch-open .bc-msearch-sheet .nav-tabs > li > a, .bc-skin.bc-msearch-open .bc-msearch-sheet .nav-tabs .nav-link { padding: 6px 2px !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: transparent !important; color: var(--sk-muted) !important; font-size: 14px !important; } .bc-skin.bc-msearch-open .bc-msearch-sheet .nav-tabs .active > a, .bc-skin.bc-msearch-open .bc-msearch-sheet .nav-tabs .nav-link.active { color: var(--sk-text) !important; border-bottom-color: var(--sk-text) !important; } /* ── La × ── */ .bc-skin .bc-msearch-close { display: none; position: fixed; top: 12px; inset-inline-end: 12px; z-index: 10051; width: 28px; height: 28px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--sk-r-pill); background: color-mix(in srgb, var(--sk-text) 10%, transparent); color: var(--sk-text); line-height: 0; } .bc-skin.bc-msearch-open .bc-msearch-close { display: flex; } /* ── La barra de abajo ── */ .bc-skin.bc-msearch-open .bc-msearch-sheet .g-button-submit { position: fixed !important; inset: auto 0 0 0 !important; z-index: 10051 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; margin: 0 !important; padding: 12px 16px !important; background: var(--sk-surface) !important; border-top: 1px solid var(--sk-line) !important; } /* Dentro de la hoja la lupa deja de ser un círculo: es el botón «Buscar» */ .bc-skin.bc-msearch-open .bc-msearch-sheet .btn-search { width: auto !important; height: var(--sk-btn-h) !important; min-width: 114px !important; padding: 0 22px !important; border-radius: var(--sk-r-pill) !important; background: var(--sk-btn-bg) !important; color: var(--sk-btn-fg) !important; font-size: 16px !important; font-size-adjust: none; text-indent: 0 !important; overflow: visible !important; } } /* ── Correcciones de especificidad dentro de la hoja ────────────────────── modern-airbnb-compact.css pinta el botón de buscar con `.bc_wrap .page-template-content .bc-form-search-all .bc_form .g-button-submit button` —cinco clases y !important—, así que las reglas de arriba, con cuatro, no ganaban. Estas repiten la cadena para poder imponerse. */ @media (max-width: 990px) { .bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .bc_form .g-button-submit button, .bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .g-button-submit button.btn-search, .bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet button.btn.btn-primary.btn-search { width: auto !important; height: var(--sk-btn-h) !important; min-width: 128px !important; padding: 0 24px !important; border: 0 !important; border-radius: var(--sk-r-pill) !important; background: var(--sk-btn-bg) !important; color: var(--sk-btn-fg) !important; font-size: 16px !important; font-weight: 500 !important; box-shadow: none !important; } /* Pestañas de servicio: de píldoras de color a iconos subrayados */ .bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet > .nav.nav-tabs, .bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .nav.nav-tabs { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: var(--sk-gap-4) !important; margin: 0 0 var(--sk-gap-3) !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; } .bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .nav.nav-tabs > li, .bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .nav.nav-tabs .nav-item { margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .nav.nav-tabs a, .bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .nav.nav-tabs .nav-link { display: inline-flex !important; align-items: center !important; gap: 6px !important; margin: 0 !important; padding: 6px 2px !important; background: transparent !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; box-shadow: none !important; color: var(--sk-muted) !important; font-size: 14px !important; font-weight: 500 !important; } .bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .nav.nav-tabs a.active, .bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .nav.nav-tabs .active > a, .bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .nav.nav-tabs .nav-link.active { color: var(--sk-text) !important; border-bottom-color: var(--sk-text) !important; } /* Sin tarjeta dentro de tarjeta: el contenedor de pestañas queda transparente y el panel blanco lo pone cada campo. */ .bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .tab-content, .bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .tab-pane, .bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .bc_form, .bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .form-group { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; max-height: none !important; overflow: visible !important; } .bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .form-group > .item, .bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .item { background: var(--sk-surface) !important; border: 0 !important; border-radius: var(--sk-r-box) !important; margin: 0 0 var(--sk-gap-3) !important; padding: var(--sk-gap-4) !important; box-shadow: none !important; width: 100% !important; max-width: none !important; } } /* Los listados montan el buscador en .bc_form_search y con otra cadena de selectores; el botón se pinta desde `.bc_wrap .bc_search_tour .bc_form_search .bc_form .g-button-submit button`. Misma píldora oscura también ahí. */ @media (max-width: 990px) { .bc-skin .bc_wrap [class*="bc_search_"] .bc_form_search .bc_form .g-button-submit button, .bc-skin.bc-msearch-open .bc_wrap .bc_form_search .bc_form .g-button-submit button { border: 0 !important; border-radius: var(--sk-r-pill) !important; background: var(--sk-btn-bg) !important; color: var(--sk-btn-fg) !important; box-shadow: none !important; } .bc-skin.bc-msearch-open .bc_wrap .bc_form_search .bc_form .g-button-submit button { width: auto !important; height: var(--sk-btn-h) !important; min-width: 128px !important; padding: 0 24px !important; font-size: 16px !important; font-weight: 500 !important; } /* El .bc_form_search trae contenedor y rejilla de Bootstrap dentro; en la hoja estorban y dejaban los campos en una columna estrecha. */ .bc-skin.bc-msearch-open .bc-msearch-sheet > .container, .bc-skin.bc-msearch-open .bc-msearch-sheet .container > .row, .bc-skin.bc-msearch-open .bc-msearch-sheet .row > [class*="col-"] { width: 100% !important; max-width: none !important; flex: 0 0 100% !important; margin: 0 !important; padding: 0 !important; } } /* ═══════════════════════════════════════════════════════════════════════════ QA — correcciones de legibilidad y recortes ═══════════════════════════════════════════════════════════════════════════ */ /* 1. El desplegable de destinos salía cortado en escritorio. Causa: .bc-form-search-all lleva `overflow: hidden` y el autocompletado es absoluto y más alto que el hero, así que se guillotinaba en su borde. El recorte solo hace falta en las variantes con diapositivas o vídeo, que sí tienen hijos que se salen; en la normal no recorta nada útil. */ .bc-skin .bc-form-search-all:not(.carousel):not(.carousel_v2):not(.bg_video) { overflow: visible !important; } .bc-skin .bc-autocomplete, .bc-skin .smart-search .bc-autocomplete { z-index: 999 !important; border-radius: var(--sk-r-box) !important; border: 1px solid var(--sk-line-strong) !important; background: var(--sk-surface) !important; box-shadow: var(--sk-shadow-pop) !important; } .bc-skin .bc-autocomplete li > a, .bc-skin .bc-autocomplete .item { color: var(--sk-text) !important; } /* 2. Números grandes del bloque «Reserva en dos minutos»: iban en el primario puro sobre el fondo del sitio y con un turquesa claro no se leían. Ahora usan la versión del mismo color corregida para contrastar. */ .bc-skin .number-circle, .bc-skin .bc_wrap .number-circle { color: var(--sk-accent-ink) !important; border-color: var(--sk-accent-ink) !important; } /* 3. Texto sobre relleno de marca: la tinta calculada, no blanco fijo. Cubre botones, distintivos y etiquetas de oferta. */ .bc-skin .btn-primary, .bc-skin .btn.btn-primary, .bc-skin .bc-theme-cta, .bc-skin .sale_info, .bc-skin .featured-text, .bc-skin .bc_wrap .featured-text, .bc-skin [class*="badge"]:not(.badge-light) { color: var(--bc-on-badge, var(--bc-on-primary, #fff)) !important; } /* «OFERTAS» y compañía salían en blanco sobre blanco cuando el bloque no tenía imagen de fondo detrás. Se le da el relleno de marca que le tocaba. */ .bc-skin .featured-text { background: var(--sk-badge) !important; border-radius: var(--sk-r-pill) !important; padding: 2px 12px !important; display: inline-block !important; } /* 4. Carruseles: el asomo del siguiente slide es intencional, así que aquí NO se recorta. Recortarlo aquí —como hice en la primera pasada— mataba el efecto de carrete y además escondía las flechas de navegación, que van pegadas al borde. La barra horizontal se corta un nivel más arriba, en .bc_wrap, con `clip` en vez de `hidden`: clip no crea contenedor de desplazamiento, así que no rompe los elementos con `position: sticky` de dentro. */ .bc-skin .owl-carousel, .bc-skin .owl-stage-outer { overflow: visible !important; } .bc-skin .owl-nav { position: relative; z-index: 2; } .bc-skin .bc_wrap { overflow-x: clip; } /* ═══════════════════════════════════════════════════════════════════════════ QA — ronda 2: especificidad y pares de color cruzados ═══════════════════════════════════════════════════════════════════════════ Las reglas de la ronda 1 eran correctas pero perdían: modern-airbnb-compact y app.css pintan estos textos con cinco clases y !important. Aquí se repite la cadena con `body.bc-skin .bc_wrap` delante para poder imponerse. */ /* ── Texto sobre relleno de marca ── Todo lo que lleva el primario de fondo usa la tinta calculada. Con un primario claro el blanco daba 1.36 de contraste sobre 4.5 exigidos. */ body.bc-skin .bc_wrap .btn.btn-primary, body.bc-skin .bc_wrap .btn-primary, body.bc-skin .bc_wrap .bc_form .g-button-submit button, body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .g-button-submit button, body.bc-skin .bc_wrap [class*="bc_search_"] .bc_form_search .bc_form .g-button-submit button, body.bc-skin .bc_wrap .bc-why-link, body.bc-skin .bc_wrap .btn.btn-default, body.bc-skin .bc_wrap .bc-theme-cta { color: var(--bc-on-primary, #111827) !important; } body.bc-skin .bc_wrap .btn.btn-primary i, body.bc-skin .bc_wrap .bc_form .g-button-submit button i, body.bc-skin .bc_wrap .bc-why-link i { color: inherit !important; } /* ── Enlaces y acentos en color de marca ── Iban en el primario puro —o peor, en el azul de BookingCore que se coló— sobre el fondo del sitio. Ahora usan el mismo tono corregido para leerse. */ body.bc-skin .bc_wrap .btn-more, body.bc-skin .bc_wrap .number-circle, body.bc-skin .bc_wrap .page-template-content .bc-call-to-action .context .btn-more, body.bc-skin .bc_wrap a.bc-link, body.bc-skin .bc_wrap .text-primary { color: var(--sk-accent-ink) !important; } body.bc-skin .bc_wrap .number-circle { border-color: var(--sk-accent-ink) !important; } /* ── Distintivo «OFERTAS» ── Era texto blanco sin relleno: sobre un bloque sin foto quedaba blanco sobre blanco, contraste 1.0. Se le da el relleno de marca que le faltaba. */ body.bc-skin .bc_wrap .featured-text { display: inline-block !important; padding: 2px 12px !important; border-radius: var(--sk-r-pill) !important; background: var(--sk-badge) !important; color: var(--bc-on-badge, #111827) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .04em !important; } /* ── Pie: el par de colores estaba cruzado ── El tema tiene configurado footer_bg oscuro (#111827) con footer_text azul claro (#8a9dc0). El skin puso la barra sobre superficie clara pero dejó el texto azul claro: 2.38 de contraste. Se respeta el par tal como está configurado, fondo y texto juntos, en vez de mezclar uno de cada. */ body.bc-skin .bc_wrap .bc-bottombar, body.bc-skin .bc_wrap .bc-minisite-footer { background: var(--bc-footer-bg, #111827) !important; color: var(--bc-footer-text, #8a9dc0) !important; border-top: 0 !important; } body.bc-skin .bc_wrap .bc-bottombar a, body.bc-skin .bc_wrap .bc-bottombar .bc-bottombar-copy, body.bc-skin .bc_wrap .bc-bottombar .bc-bottombar-text, body.bc-skin .bc_wrap .bc-minisite-footer a { color: var(--bc-footer-text, #8a9dc0) !important; opacity: 1 !important; } body.bc-skin .bc_wrap .bc-bottombar a:hover, body.bc-skin .bc_wrap .bc-minisite-footer a:hover { color: #fff !important; } /* ═══════════════════════════════════════════════════════════════════════════ QA — ronda 3: el bloque de ofertas y las tarjetas sin foto ═══════════════════════════════════════════════════════════════════════════ minisite-cards.css pinta estos con `body .bc_wrap .page-template-content .bc-offer .item …` —cinco clases y !important—. Se repite la cadena entera añadiendo .bc-skin, que es la única forma de ganarle. */ body.bc-skin .bc_wrap .page-template-content .bc-offer .item .featured-text { display: inline-block !important; padding: 2px 12px !important; border-radius: var(--sk-r-pill) !important; background: var(--sk-badge) !important; color: var(--bc-on-badge, #111827) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .04em !important; } body.bc-skin .bc_wrap .page-template-content .bc-offer .item a.btn-default, body.bc-skin .bc_wrap .page-template-content .bc-offer .item a.btn-default:hover, body.bc-skin .bc_wrap .page-template-content .bc-offer .item a.btn-default:focus { color: var(--bc-on-primary, #111827) !important; border-color: transparent !important; } body.bc-skin .bc_wrap .page-template-content .bc-featured-item.style2 .number-circle { color: var(--sk-accent-ink) !important; border-color: var(--sk-accent-ink) !important; } /* ── Tarjetas de destino sin foto ── `.no-image` cae a un gris claro de relleno, y encima seguía el texto blanco pensado para ir sobre una foto: 1.61 de contraste. Sin foto detrás, el texto pasa al color del tema. */ body.bc-skin .bc_wrap .destination-item.no-image, body.bc-skin .bc_wrap .destination-item.no-image .image { background: var(--sk-placeholder) !important; } body.bc-skin .bc_wrap .destination-item.no-image .title, body.bc-skin .bc_wrap .destination-item.no-image .title a, body.bc-skin .bc_wrap .destination-item.no-image .content, body.bc-skin .bc_wrap .destination-item.no-image .content *, body.bc-skin .bc_wrap .item.no-image .onsale, body.bc-skin .bc_wrap .destination-item.no-image .onsale { color: var(--sk-text) !important; text-shadow: none !important; } /* app.css fija el precio tachado en blanco con `.item-loop.bc-svc-card .thumb-image .price-wrapper .price .onsale` —cinco clases y !important—, pensado para cuando iba encima de la foto. Ahora va debajo, sobre el fondo del sitio, y en blanco no se veía. */ body.bc-skin .bc_wrap .item-loop.bc-svc-card .thumb-image .price-wrapper .price .onsale { color: var(--sk-faint) !important; } body.bc-skin .bc_wrap .item-loop.bc-svc-card .thumb-image .price-wrapper .price .text-price { color: var(--sk-text) !important; } /* ── Control deslizante de precio (ion.rangeSlider) ─────────────────────── Se había quedado fuera de todo: las burbujas usaban el azul por defecto de BookingCore (#5191fa), no el primario del tema, y las cifras de la escala iban en un gris #999 que sobre el fondo daba 2.48 de contraste. */ body.bc-skin .bc_wrap .irs-bar, body.bc-skin .bc_wrap .irs-from, body.bc-skin .bc_wrap .irs-to, body.bc-skin .bc_wrap .irs-single { background: var(--sk-btn-bg) !important; color: var(--bc-on-primary, #111827) !important; } body.bc-skin .bc_wrap .irs-from:after, body.bc-skin .bc_wrap .irs-to:after, body.bc-skin .bc_wrap .irs-single:after { border-top-color: var(--sk-btn-bg) !important; } body.bc-skin .bc_wrap .irs-handle > i:first-child, body.bc-skin .bc_wrap .irs-handle { border-color: var(--sk-btn-bg) !important; } body.bc-skin .bc_wrap .irs-grid-text { color: var(--sk-muted) !important; } body.bc-skin .bc_wrap .irs-line { background: color-mix(in srgb, var(--sk-text) 12%, var(--sk-bg)) !important; } /* ── Enlaces en color de marca ──────────────────────────────────────────── La hoja del tema pone `a { color: var(--bc-primary) }`. Con un primario claro, cualquier enlace sobre el fondo del sitio queda en 1.18 de contraste. Se cambia por el mismo tono corregido —no por un gris—, y solo fuera de la cabecera y el pie, que tienen sus propios pares de color, y fuera de los botones, que llevan relleno propio. */ body.bc-skin .bc_wrap a:not(.btn):not([class*="btn-"]):not(.bc-theme-cta):not(.bc-logo):not(.bc-logo-text) { color: var(--sk-accent-ink); } body.bc-skin .bc_wrap .bc_header a, body.bc-skin .bc_wrap .bc-bottombar a, body.bc-skin .bc_wrap .bc-minisite-footer a, body.bc-skin .bc_wrap .item-loop .item-title > a { color: inherit; } body.bc-skin .bc_wrap .item-loop .item-title > a { color: var(--sk-text) !important; } /* Numeración del itinerario: círculo relleno con el primario, así que el texto de dentro va con la tinta calculada. */ body.bc-skin .bc_wrap .bc-itinerary-step, body.bc-skin .bc_wrap [class*="-step"][class*="itinerary"] { color: var(--bc-on-primary, #111827) !important; } /* Botón fijo de reservar en la ficha móvil: relleno de marca con texto blanco fijo desde pdp-modern.css. Sobre un primario claro no llega al mínimo. */ body.bc-skin .bc_wrap .btn-reserve-mobile, body.bc-skin .bc_wrap .bc-button-book-mobile, body.bc-skin .bc_wrap .bc-mobile-footer .btn-reserve-mobile { color: var(--bc-on-primary, #111827) !important; } /* ═══════════════════════════════════════════════════════════════════════════ QA de la hoja de búsqueda móvil ═══════════════════════════════════════════════════════════════════════════ Dos fallos, y el primero era una lectura equivocada del DOM. 1) `.item` NO es un campo del formulario: son las sugerencias del autocompletado de destinos. La estructura real es form > .g-field-search > .row > .col-* > .form-group > .form-content Convertir cada `.item` en un panel blanco con 16px de relleno y 12px de margen llenaba la hoja de cajas vacías y descuadraba todo. Se deshace y el panel pasa a ser `.form-group`, que sí es el campo. 2) El calendario se abre pero queda debajo: el plugin lo cuelga de con z-index 3001 y la hoja va a 10050. Se sube por encima y se ancla abajo, a lo ancho, en vez de dejar que calcule coordenadas contra un documento que además está bloqueado con overflow:hidden. */ @media (max-width: 990px) { /* — Deshacer el panel equivocado — */ body.bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .item, body.bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .form-group > .item { background: transparent !important; border-radius: 0 !important; margin: 0 !important; padding: 10px 12px !important; width: auto !important; } body.bc-skin.bc-msearch-open .bc-msearch-sheet .bc-autocomplete .item { display: flex !important; align-items: center !important; gap: 10px !important; border-radius: 10px !important; color: var(--sk-text) !important; } /* — El campo de verdad — */ body.bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .g-field-search .row { display: block !important; margin: 0 !important; } body.bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .g-field-search .row > [class*="col-"] { width: 100% !important; max-width: none !important; flex: 0 0 100% !important; padding: 0 !important; margin: 0 0 12px !important; border: 0 !important; /* .border-right dibujaba un filo vertical */ } body.bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .form-group { position: relative !important; display: block !important; margin: 0 !important; padding: 14px 16px !important; border: 0 !important; border-radius: var(--sk-r-box) !important; background: color-mix(in srgb, var(--bc-background, #fff) 55%, #ffffff) !important; box-shadow: none !important; } body.bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .form-group > .field-icon { position: absolute !important; top: 16px !important; inset-inline-start: 16px !important; font-size: 18px !important; color: var(--sk-faint) !important; } body.bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .form-content { padding: 0 0 0 30px !important; } body.bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .form-content > label { display: block !important; margin: 0 0 2px !important; font-size: 13px !important; font-weight: 600 !important; color: var(--sk-text) !important; } body.bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .form-content .form-control, body.bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .form-content .render { padding: 0 !important; border: 0 !important; background: transparent !important; font-size: 15px !important; color: var(--sk-muted) !important; height: auto !important; } /* El fondo de la hoja se separa del panel: antes ambos caían casi en el mismo gris y los campos no se distinguían. */ body.bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet { background: color-mix(in srgb, var(--bc-background, #fff) 86%, var(--bc-text, #111827)) !important; padding: 52px 10px 84px !important; } /* — El calendario, por encima y anclado abajo — */ body.bc-msearch-open .daterangepicker { position: fixed !important; z-index: 10060 !important; top: auto !important; bottom: 84px !important; inset-inline: 10px !important; width: auto !important; max-width: none !important; margin: 0 !important; border: 0 !important; border-radius: var(--sk-r-box) !important; box-shadow: 0 -8px 40px rgba(0, 0, 0, .22) !important; } /* La flechita apuntaba al campo; anclado abajo ya no apunta a nada */ body.bc-msearch-open .daterangepicker::before, body.bc-msearch-open .daterangepicker::after { display: none !important; } body.bc-msearch-open .daterangepicker .drp-calendar { max-width: none !important; width: 100% !important; } /* Igual para el desplegable de huéspedes, que cuelga del mismo sitio */ body.bc-msearch-open .bc-msearch-sheet .dropdown-menu { z-index: 10060 !important; } } /* ── Desplegables dentro de la hoja: en línea, no flotando ──────────────── Los dos —la lista de destinos y el selector de personas— se abrían pero salían cortados a media altura. La causa es la misma para ambos: el bloque móvil de minisite-cards.css pone `overflow-x: hidden` en .container y .row, y eso los convierte en contenedores de recorte; cualquier hijo absoluto que sobresalga se guillotina. La lista de destinos medía 300px y se veía hasta los 185; el de personas, 109px de los que se veían 13. Se podría subir el z-index y pelearse con las coordenadas, pero en una hoja a pantalla completa lo correcto es lo que hace Chisfis: la lista va debajo del campo, en el flujo, y se desplaza la hoja entera. Sin posicionamiento absoluto no hay nada que recortar. */ @media (max-width: 990px) { body.bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .container, body.bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .row, body.bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .smart-search, body.bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .form-group { overflow: visible !important; } body.bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .bc-autocomplete, body.bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .dropdown-menu { position: static !important; inset: auto !important; transform: none !important; float: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; max-height: none !important; height: auto !important; overflow: visible !important; margin: 12px 0 0 !important; padding: 10px 0 0 !important; border: 0 !important; border-top: 1px solid var(--sk-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* En estático el plugin ya no controla la visibilidad con inline style */ body.bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .bc-autocomplete:not(.show), body.bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .dropdown-menu:not(.show) { display: none !important; } body.bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .bc-autocomplete.show, body.bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .dropdown-menu.show { display: block !important; } /* Filas de la lista de destinos */ body.bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .bc-autocomplete .item { padding: 11px 4px !important; font-size: 15px !important; } body.bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .bc-autocomplete .item i { color: var(--sk-faint) !important; } /* Filas del selector de personas: etiqueta a la izquierda, ± a la derecha */ body.bc-skin.bc-msearch-open .bc_wrap .bc-msearch-sheet .dropdown-menu .item { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 10px 4px !important; } } /* ═══════════════════════════════════════════════════════════════════════════ LISTADOS — rejilla y filtros ═══════════════════════════════════════════════════════════════════════════ */ /* Tres columnas en escritorio. Las tarjetas vienen con .col-lg-6.col-md-6, que son dos; se reparten a un tercio. Se ataca esa pareja de clases y no `.row > *` porque en la misma página hay otra fila —la que separa filtros de resultados— que no debe tocarse. */ @media (min-width: 992px) { body.bc-skin .bc_wrap [class*="bc_search_"] .row > .col-lg-6.col-md-6 { flex: 0 0 33.3333% !important; max-width: 33.3333% !important; } } /* Dos columnas en móvil: por debajo de 768 Bootstrap las pone a ancho completo, así que hay que decirlo explícitamente. */ @media (max-width: 767px) { body.bc-skin .bc_wrap [class*="bc_search_"] .row > .col-lg-6.col-md-6 { flex: 0 0 50% !important; max-width: 50% !important; padding-inline: 6px !important; } body.bc-skin .bc_wrap [class*="bc_search_"] .row { margin-inline: -6px !important; } /* A media anchura la tarjeta necesita respirar con menos cuerpo */ body.bc-skin .bc_wrap [class*="bc_search_"] .item-loop .item-title > a { font-size: 15px !important; line-height: 21px !important; white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; } body.bc-skin .bc_wrap [class*="bc_search_"] .item-loop .amenities, body.bc-skin .bc_wrap [class*="bc_search_"] .item-loop .service-review, body.bc-skin .bc_wrap [class*="bc_search_"] .item-loop .location { font-size: 12px !important; } body.bc-skin .bc_wrap [class*="bc_search_"] .item-loop .price-wrapper .text-price { font-size: 15px !important; } body.bc-skin .bc_wrap [class*="bc_search_"] .item-loop .price-wrapper .onsale { display: none !important; /* no cabe junto al precio a media anchura */ } body.bc-skin .bc_wrap [class*="bc_search_"] .item-loop { margin-bottom: var(--sk-gap-6) !important; } } /* ── Filtros con el mismo traje que las secciones de la ficha ────────────── La ficha usa .listingSection__wrap: radio 16, un filo de 1px, sin relleno y sin sombra. Se replica en cada bloque de filtro para que listado y ficha se vean del mismo sitio. El relleno baja de 32 a 20 porque la columna mide 255 y no 706; el resto es idéntico. El filo se deriva del texto del tema en vez de copiar el gris fijo de la ficha, para que siga a cada minisitio. */ body.bc-skin .bc_wrap .bc_filter .g-filter-item { margin-bottom: var(--sk-gap-4) !important; padding: 20px !important; border: 1px solid color-mix(in srgb, var(--sk-text) 20%, transparent) !important; border-radius: 16px !important; background: transparent !important; box-shadow: none !important; } body.bc-skin .bc_wrap .bc_filter .g-filter-item .item-title { display: flex !important; align-items: center !important; justify-content: space-between !important; margin: 0 0 14px !important; padding: 0 !important; border: 0 !important; background: transparent !important; } body.bc-skin .bc_wrap .bc_filter .g-filter-item .item-title h3 { margin: 0 !important; font-size: 15px !important; font-weight: 600 !important; color: var(--sk-text) !important; } body.bc-skin .bc_wrap .bc_filter .g-filter-item .item-title i { color: var(--sk-faint) !important; } body.bc-skin .bc_wrap .bc_filter .g-filter-item .item-content { padding: 0 !important; } /* El rótulo «FILTRADO POR» va fuera de los paneles, como un encabezado */ body.bc-skin .bc_wrap .bc_filter .filter-title { margin: 0 0 14px !important; padding: 0 !important; border: 0 !important; background: transparent !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: .06em !important; color: var(--sk-muted) !important; } /* Pie de la tarjeta a tres columnas: no cabía. `.service-review` traía «4.3/5 Muy Bueno 3 Reseñas» —243px de una tarjeta de 255— y como vive en la columna `auto` de la rejilla, se quedaba con todo y dejaba la del precio en 0: el importe se salía por encima. Se quita la etiqueta cualitativa, que es lo único prescindible (el número ya lo dice, y Chisfis tampoco la lleva: escribe «★ 4.8 (28)»), y se impide que ninguna de las dos columnas colapse. */ body.bc-skin .bc_wrap .item-loop .service-review .rate-text { display: none !important; } body.bc-skin .bc_wrap .item-loop .price-wrapper, body.bc-skin .bc_wrap .item-loop .service-review { min-width: 0 !important; } body.bc-skin .bc_wrap .item-loop .service-review { white-space: nowrap !important; } /* A media anchura en móvil ni con eso: la cuenta de reseñas se cae. */ @media (max-width: 767px) { body.bc-skin .bc_wrap [class*="bc_search_"] .item-loop .service-review .review { display: none !important; } } /* «APLICAR» del filtro de precio: es un .btn-link —texto sin relleno— y mi regla general de enlaces excluye todo lo que empiece por `btn-`, así que se quedó con el primario puro sobre el fondo: 1.18 de contraste. Los botones de solo texto van con la tinta legible, no con el color de marca crudo. */ body.bc-skin .bc_wrap .btn.btn-link, body.bc-skin .bc_wrap .btn-link, body.bc-skin .bc_wrap a.btn-link { color: var(--sk-accent-ink) !important; background: transparent !important; font-weight: 600 !important; } /* A dos columnas la tarjeta mide ~180px y la fila de datos trae hasta cinco dígitos con icono —huéspedes, camas, baños, superficie…—: no caben y el último se salía cortado por el borde. Chisfis pone dos datos, no cinco. Se permite que la fila salte de línea y se recortan a los tres primeros, que son los que el visitante compara de un vistazo. */ @media (max-width: 767px) { body.bc-skin .bc_wrap [class*="bc_search_"] .item-loop .amenities { flex-wrap: wrap !important; gap: 4px 10px !important; overflow: hidden !important; } body.bc-skin .bc_wrap [class*="bc_search_"] .item-loop .amenities .amenity:nth-child(n+4) { display: none !important; } body.bc-skin .bc_wrap [class*="bc_search_"] .item-loop .amenities .amenity .text { font-size: 12px !important; } body.bc-skin .bc_wrap [class*="bc_search_"] .item-loop .amenities .amenity i { font-size: 13px !important; } /* El precio y la nota tampoco caben en una línea a 180px: se apilan. */ body.bc-skin .bc_wrap [class*="bc_search_"] .item-loop .price-wrapper { grid-area: 6 / 1 / 7 / 3 !important; } body.bc-skin .bc_wrap [class*="bc_search_"] .item-loop .service-review { grid-area: 7 / 1 / 8 / 3 !important; justify-content: flex-start !important; } } /* ═══════════════════════════════════════════════════════════════════════════ MODALES DE ACCESO EN MÓVIL ═══════════════════════════════════════════════════════════════════════════ El de registro mide 967px de alto en una pantalla de 844, y `.modal` está en `overflow: hidden`: los últimos 123px —donde está el botón de registrarse— quedaban fuera y sin forma de llegar a ellos. Además `.modal-dialog-centered` centra en vertical, así que con el contenido más alto que la pantalla el título y la × se salían 42px por arriba. No es cosmético: en un móvil no se podía completar el registro. */ @media (max-width: 767px) { body.bc-skin .modal { overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; } /* Arriba en vez de centrado: cuando el contenido es más alto que la pantalla, centrar significa cortar por los dos extremos. */ body.bc-skin .modal .modal-dialog, body.bc-skin .modal .modal-dialog-centered { align-items: flex-start !important; min-height: 0 !important; margin: 12px auto !important; width: calc(100% - 24px) !important; max-width: 460px !important; } body.bc-skin .modal .modal-content { max-height: none !important; border: 0 !important; border-radius: var(--sk-r-box) !important; box-shadow: var(--sk-shadow-pop) !important; } /* La banda de acceso social: 30px de relleno se comen la pantalla */ body.bc-skin .modal .modal-body .advanced { margin: 18px -20px 0 !important; padding: 20px !important; } body.bc-skin .modal .bc-sso-row { gap: 10px !important; } body.bc-skin .modal .bc-sso-btn { min-height: 46px !important; } } /* La banda gris del acceso social estaba fijada en #f9f9f9 y el separador y el borde de los botones en grises sueltos: no seguían al tema. */ body.bc-skin .modal .modal-body .advanced { background: color-mix(in srgb, var(--sk-text) 4%, var(--sk-bg)) !important; } body.bc-skin .modal .bc-sso-btn { border: 1px solid var(--sk-line-strong) !important; background: var(--sk-surface) !important; color: var(--sk-text) !important; border-radius: var(--sk-r-box) !important; box-shadow: none !important; } body.bc-skin .modal .bc-sso-sep { color: var(--sk-muted) !important; } /* El diálogo se queda con el `translateY(-50px)` de la animación de entrada de Bootstrap: la regla que lo anula al mostrarse tiene la misma especificidad y depende de que la transición llegue a su fin, y aquí no llega. Resultado: el modal abre 50px más arriba de su sitio y el título y la × quedan cortados por encima del borde de la pantalla. En móvil no hay animación que valga si deja la cabecera fuera. */ @media (max-width: 767px) { body.bc-skin .modal.fade .modal-dialog, body.bc-skin .modal.show .modal-dialog, body.bc-skin .modal .modal-dialog { transform: none !important; transition: none !important; } } /* La banda de acceso social se sangra con márgenes negativos para llegar a los bordes del modal, pero el relleno del contenido es de 30px y el margen que le puse, de 20: quedaba desalineada 10px por cada lado. En móvil 30px de relleno es además demasiado —deja los campos en 306px de 390—, así que se baja a 20 y así el sangrado cuadra exacto. */ @media (max-width: 767px) { body.bc-skin .modal .modal-content { padding: 22px 20px 22px !important; } } /* ═══════════════════════════════════════════════════════════════════════════ AFINADO MÓVIL — tamaño de texto y zonas táctiles ═══════════════════════════════════════════════════════════════════════════ Dos cosas que el barrido a 390px sacó en las cuatro pantallas: · Texto a 11.5px en el pie —el copyright y los enlaces de moneda e idioma—. Por debajo de 12px se lee mal en un móvil y además iOS tiende a ofrecer zoom al tocar campos cercanos. · Enlaces y botones de 16 a 27px de alto: «Show on the map», «Compartir», «Guardar», «Read more» y todo el pie. La referencia habitual son 44px de lado; por debajo de 32 se falla el toque a menudo. Se corrige con relleno, no agrandando la letra, para que la maqueta no se descuadre: crece la zona sensible, no el bloque. */ @media (max-width: 767px) { body.bc-skin .bc_wrap .bc-bottombar, body.bc-skin .bc_wrap .bc-bottombar-copy, body.bc-skin .bc_wrap .bc-bottombar-text { font-size: 13px !important; line-height: 1.5 !important; } body.bc-skin .bc_wrap .bc-bottombar { padding-block: 14px !important; } body.bc-skin .bc_wrap .bc-bottombar a { display: inline-block !important; padding-block: 7px !important; font-size: 13px !important; } body.bc-skin .bc_wrap .bc-bottombar .multi-lang > li > a, body.bc-skin .bc_wrap .bc-bottombar .is_login { display: inline-flex !important; align-items: center !important; min-height: 40px !important; padding-inline: 8px !important; font-size: 13px !important; } /* Acciones sueltas del listado y de la ficha */ body.bc-skin .bc_wrap a[href*="map"], body.bc-skin .bc_wrap .bc-read-more-btn, body.bc-skin .bc_wrap .service-wishlist:not(.item-loop .service-wishlist), body.bc-skin .bc_wrap .nc-ListingExperiencesDetailPage button { display: inline-flex !important; align-items: center !important; min-height: 40px !important; } /* La estrella y el corazón de la tarjeta ya son círculos de 32; se suben a 40 para que entren en el mismo criterio sin deformar la foto. */ body.bc-skin .bc_wrap .item-loop .service-wishlist { width: 40px !important; height: 40px !important; } } /* «Registrarse» / «Iniciar sesión» del pie de los modales: auth-sso.css lo pinta con un índigo fijo (#eef2ff sobre #3730a3) que no es de nadie —ni de Chisfis ni del tema—. Pasa al color de marca del vendedor. */ body.bc-skin .modal .bc-auth-switch { background: color-mix(in srgb, var(--sk-accent) 12%, var(--sk-bg)) !important; color: var(--sk-accent-ink) !important; border: 0 !important; } body.bc-skin .modal .bc-auth-switch:hover { background: color-mix(in srgb, var(--sk-accent) 20%, var(--sk-bg)) !important; } /* ═══════════════════════════════════════════════════════════════════════════ BARRA DE BÚSQUEDA EN LÍNEA (portada y listados) ═══════════════════════════════════════════════════════════════════════════ 1) El campo de destino salía con su propio recuadro. Culpa mía: la regla general de `.form-control` del skin —pensada para formularios normales— le puso borde, fondo y radio. Dentro de esta barra los campos no son cajas: la caja es la píldora entera, y cada campo va suelto encima. Con relleno 0 y 26px de alto, ese borde quedaba pegadísimo al texto. */ body.bc-skin .bc_wrap .bc_form_search .form-control, body.bc-skin .bc_wrap .bc_form_search input[type="text"], body.bc-skin .bc_wrap .bc_form_search .smart-search input, body.bc-skin .bc_wrap .g-form-control .form-control, body.bc-skin .bc_wrap .g-form-control input[type="text"], body.bc-skin .bc_wrap .g-form-control .smart-search input { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; height: auto !important; } body.bc-skin .bc_wrap .bc_form_search .form-control:focus, body.bc-skin .bc_wrap .g-form-control .form-control:focus { box-shadow: none !important; outline: none !important; } /* 2) La flecha del selector de personas se veía suelta debajo de la barra. Es el `::after` del .dropdown-toggle: está en `position: absolute` pero sin anclaje, así que caía en su posición estática —al final del texto y fuera de la fila—. Se ancla a la derecha del campo y centrada, y se apaga: una punta de flecha no tiene por qué ir en el color de marca. */ body.bc-skin .bc_wrap .bc_form_search .dropdown-toggle::after, body.bc-skin .bc_wrap .g-form-control .dropdown-toggle::after { position: absolute !important; inset-inline-end: 4px !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; margin: 0 !important; border-top-color: var(--sk-faint) !important; } /* ═══════════════════════════════════════════════════════════════════════════ SUBMENÚ DESPLEGABLE DE LA CABECERA ═══════════════════════════════════════════════════════════════════════════ Dos problemas encadenados, y el primero era mío. 1) Sobre el hero pongo los enlaces de la cabecera en blanco, y el selector que usaba —`.bc-menu ul li > a`— alcanzaba también a los del desplegable, que cuelgan de un `