/* ========================================================================= Plantilla Clásica — site.css Variables semánticas + reset + utilidades + estados hover + dark mode ========================================================================= */ /* — Tokens de diseño (modo claro — default) — */ :root { --cs-primary: #f7921f; /* Surfaces */ --cs-bg: #fbf8f3; --cs-surface: #fff; --cs-band: #f3ece1; --cs-deep: #223740; --cs-green: #465b2d; /* Borders */ --cs-border: #efe7da; /* Ink */ --cs-ink: #223740; --cs-ink-strong: #141414; --cs-ink-soft: #6b7378; --cs-muted: #8a8178; /* Accent variants */ --cs-accent-text: var(--cs-primary); --cs-tint: #fcefe2; /* Hero veil (oscuridad del degradado sobre imágenes) */ --cs-veil-k: 1; } /* — Modo oscuro (se activa con data-theme="dark" en ) — */ html[data-theme="dark"] { --cs-bg: #14171a; --cs-surface: #1c2124; --cs-band: #191d20; --cs-tint: rgba(255,255,255,.07); --cs-deep: #101315; --cs-ink: #e8eef0; --cs-ink-strong: #f4f6f7; --cs-ink-soft: #a4b0b5; --cs-muted: #9aa3a8; --cs-border: #2b3236; --cs-accent-text: color-mix(in srgb, var(--cs-primary) 45%, #fff); --cs-range-band: color-mix(in srgb, var(--cs-primary) 45%, transparent); } /* — Variantes de velo (data-veil en ) — */ html[data-veil="suave"] { --cs-veil-k: 0.6; } html[data-veil="oscuro"] { --cs-veil-k: 1; } html[data-veil="intenso"] { --cs-veil-k: 1.3; } /* ========================================================================= RESET ========================================================================= */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--cs-font-body, "Rubik", system-ui, sans-serif); color: var(--cs-ink-soft); background: var(--cs-bg); -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } input, textarea, select { font-family: inherit; } h1,h2,h3,h4,h5,h6 { margin: 0; font-family: var(--cs-font-heading, 'Lora', serif); } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } /* ========================================================================= LAYOUT ========================================================================= */ .cs-container { width: 100%; max-width: 1300px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } /* ========================================================================= NAV RESPONSIVE ========================================================================= */ .cs-burger { display: none; } @media (max-width: 1199px) { .cs-nav-desktop { display: none !important; } .cs-burger { display: inline-flex !important; } } @media (max-width: 767px) { .cs-hide-mb { display: none !important; } } /* ========================================================================= ANIMACIONES ========================================================================= */ @keyframes csFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } .cs-fade { animation: csFadeUp .7s cubic-bezier(.2,.7,.2,1) both; } @keyframes csFade { from { opacity: 0; } to { opacity: 1; } } @keyframes csDrawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } } /* ========================================================================= HOVER / INTERACTIVE STATES ========================================================================= */ .cs-navlink:hover { color: var(--cs-accent-text) !important; } .cs-link-u:hover { color: var(--cs-accent-text) !important; } .cs-social { transition: background .2s; } .cs-social:hover { background: var(--cs-primary) !important; } .cs-btn-primary { transition: filter .25s; } .cs-btn-primary:hover { filter: brightness(1.08); } .cs-btn-primary-dark { transition: filter .25s; } .cs-btn-primary-dark:hover { filter: brightness(1.08); } .cs-btn-deep { transition: background .25s; } .cs-btn-deep:hover { background: #141414 !important; } .cs-btn-orange { transition: background .25s; } .cs-btn-orange:hover { background: #e07f12 !important; } .cs-lift { transition: transform .3s, box-shadow .3s; } .cs-lift:hover { transform: translateY(-6px); box-shadow: 0 30px 52px -34px rgba(34,55,64,.55); } .cs-lift-alt { transition: transform .3s, box-shadow .3s; } .cs-lift-alt:hover { transform: translateY(-6px); box-shadow: 0 34px 56px -34px rgba(34,55,64,.6); } .cs-lift-sm { transition: transform .3s, box-shadow .3s; } .cs-lift-sm:hover { transform: translateY(-5px); box-shadow: 0 28px 48px -34px rgba(34,55,64,.5); } .cs-zoom { transition: transform .3s; } .cs-zoom:hover { transform: scale(1.03); } .cs-zoom-sm { transition: transform .3s; } .cs-zoom-sm:hover { transform: scale(1.015); } /* Gallery */ .cs-gallery-header { text-align: center; max-width: 560px; margin: 0 auto 38px; } .cs-gallery-header__title { font-family: var(--cs-font-heading, 'Lora', serif); color: var(--cs-ink-strong); font-size: clamp(26px, 3.4vw, 38px); line-height: 1.14; } .cs-gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } .cs-gallery-item { position: relative; border-radius: 16px; overflow: hidden; cursor: pointer; } .cs-gallery-item__img { aspect-ratio: 4/3; background-color: var(--cs-band); background-size: cover; background-position: center; } .cs-gallery-item__label { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; background: linear-gradient(0deg, rgba(34,55,64,.62), transparent); color: #fff; font-size: 12.5px; font-weight: 500; padding: 18px 12px 11px; } .cs-icon-btn { transition: background .2s; } .cs-icon-btn:hover { background: rgba(255,255,255,.24) !important; } .cs-icon-btn-accent { transition: background .2s; } .cs-icon-btn-accent:hover { background: var(--cs-primary) !important; } .cs-subscribe { transition: background .25s; } .cs-subscribe:hover { background: #f7a83f !important; } .cs-menu-item { transition: background .15s; } .cs-menu-item:hover { background: var(--cs-tint) !important; } /* ========================================================================= FORMS ========================================================================= */ .cs-input:focus, textarea.cs-input:focus, select.cs-input:focus { outline: none; border-color: var(--cs-primary) !important; } .cs-input { width: 100%; border: 1px solid var(--cs-border); border-radius: 12px; padding: 14px; font-size: 15px; color: var(--cs-ink); background: var(--cs-bg); } textarea.cs-input { resize: vertical; min-height: 110px; } .cs-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--cs-muted); font-weight: 600; margin-bottom: 8px; } /* ========================================================================= MENU GRID (restaurante) ========================================================================= */ .cs-menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; } /* ========================================================================= LAYOUT COMPONENTS (shared across pages) ========================================================================= */ /* Page header (banner internal pages) */ .cs-page-header { position: relative; background: var(--cs-deep); padding: clamp(58px,9vw,104px) 0 clamp(54px,8vw,90px); overflow: hidden; } .cs-page-header__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .cs-page-header__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(34,55,64,calc(.4*var(--cs-veil-k))), rgba(20,28,33,calc(.85*var(--cs-veil-k)))); } .cs-page-header__inner { position: relative; text-align: center; color: #fff; } .cs-page-header__crumbs { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: rgba(255,255,255,.7); margin-bottom: 16px; } .cs-page-header__crumbs a { color: rgba(255,255,255,.7); } .cs-page-header__crumbs .cs-sep { color: var(--cs-primary); } .cs-page-header__title { font-family: var(--cs-font-heading, 'Lora', serif); font-weight: 400; font-size: clamp(34px,5.4vw,64px); line-height: 1.08; margin-bottom: 16px; } .cs-page-header__lead { color: rgba(255,255,255,.8); font-size: clamp(15px,1.6vw,17px); line-height: 1.65; max-width: 640px; margin: 0 auto; } /* Section container */ .cs-section { padding-top: clamp(54px,7vw,96px); padding-bottom: clamp(54px,7vw,96px); } .cs-section--tight { padding-top: clamp(40px,5vw,60px); padding-bottom: clamp(40px,5vw,60px); } /* Grid layouts */ .cs-grid { display: grid; gap: 26px; } .cs-grid--3 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); max-width: calc(4 * 300px + 3 * 26px); } .cs-grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .cs-grid--2 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); max-width: calc(2 * 420px + 26px); } .cs-grid--2-wide { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); } /* Cards */ .cs-card { display: flex; flex-direction: column; background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: 22px; overflow: hidden; box-shadow: 0 24px 46px -36px rgba(34,55,64,.5); } .cs-card__img { aspect-ratio: 16/11; background-color: var(--cs-band); background-size: cover; background-position: center; } .cs-card__img--wide { aspect-ratio: 16/10; } .cs-card__body { padding: 26px; display: flex; flex-direction: column; flex: 1; } .cs-card__body--lg { padding: 28px; } .cs-card__title { font-family: var(--cs-font-heading, 'Lora', serif); color: var(--cs-ink-strong); font-size: 22px; margin-bottom: 11px; } .cs-card__text { font-size: 14.5px; line-height: 1.7; color: var(--cs-ink-soft); margin-bottom: 18px; } .cs-card__text--clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .cs-card__footer { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--cs-border); } /* Service card (compact) */ .cs-svc-card { background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: 20px; padding: 32px 28px; } .cs-svc-card__icon { width: 58px; height: 58px; border-radius: 15px; background: var(--cs-tint); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: var(--cs-primary); } .cs-svc-card__icon img { width: 28px; height: 28px; object-fit: contain; } .cs-svc-card__title { font-size: 18px; color: var(--cs-ink-strong); font-weight: 600; margin-bottom: 9px; } .cs-svc-card__text { font-size: 14px; line-height: 1.6; color: var(--cs-ink-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .cs-grid--svc { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; max-width: calc(4 * 300px + 3 * 22px); } /* Room card (horizontal layout) */ .cs-room-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: 22px; overflow: hidden; box-shadow: 0 24px 46px -36px rgba(34,55,64,.5); } .cs-room-card__img { min-height: 360px; background-color: var(--cs-band); background-size: cover; background-position: center; } .cs-room-card__body { padding: clamp(28px,3vw,46px); display: flex; flex-direction: column; } .cs-room-card__title { font-family: var(--cs-font-heading, 'Lora', serif); color: var(--cs-ink-strong); font-size: clamp(24px,2.6vw,32px); line-height: 1.1; margin-bottom: 12px; } .cs-room-card__meta { display: flex; flex-wrap: wrap; gap: 18px; color: var(--cs-muted); font-size: 13.5px; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--cs-border); } .cs-room-card__text { font-size: 15px; line-height: 1.75; color: var(--cs-ink-soft); margin-bottom: 24px; } .cs-room-card__amenities { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .cs-room-card__services-label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--cs-muted); font-weight: 600; margin-bottom: 14px; } .cs-room-card__services { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px 24px; margin-bottom: 30px; } /* Amenity pill (text only) */ .cs-amenity { display: inline-flex; align-items: center; background: var(--cs-tint); color: var(--cs-ink-soft); font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: 999px; } /* Service item (icon + text) */ .cs-service-item { display: flex; align-items: center; gap: 9px; color: var(--cs-ink-soft); font-size: 14px; line-height: 1.35; } .cs-service-item__icon { width: 28px; height: 28px; flex: none; } /* Contact info card */ .cs-info-card { display: flex; gap: 16px; background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: 18px; padding: 24px; } .cs-info-card__icon { width: 50px; height: 50px; border-radius: 14px; background: var(--cs-tint); display: flex; align-items: center; justify-content: center; flex: none; } .cs-info-card__label { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--cs-muted); font-weight: 600; margin-bottom: 5px; } .cs-info-card__value { font-size: 15.5px; color: var(--cs-ink); line-height: 1.5; } /* Contact form wrapper */ .cs-form-card { background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: 22px; padding: clamp(26px,3vw,40px); box-shadow: 0 24px 50px -38px rgba(34,55,64,.5); } .cs-form-card__title { font-family: var(--cs-font-heading, 'Lora', serif); color: var(--cs-ink-strong); font-size: 26px; margin-bottom: 8px; } .cs-form-card__sub { font-size: 14.5px; color: var(--cs-ink-soft); line-height: 1.6; margin-bottom: 24px; } .cs-form-legal { margin-top: 16px; font-size: 12px; line-height: 1.6; color: var(--cs-ink-soft); } .cs-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .cs-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; align-items: start; } .cs-contact-info { display: flex; flex-direction: column; gap: 16px; } .cs-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .cs-form-field { display: block; margin-bottom: 16px; } .cs-form-row .cs-form-field { margin-bottom: 0; } .cs-form-field__label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--cs-muted); font-weight: 600; margin-bottom: 8px; } .cs-input--textarea { resize: vertical; min-height: 110px; } .cs-btn--icon { gap: 10px; } /* Buttons */ .cs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; border: none; border-radius: 13px; white-space: nowrap; text-decoration: none; cursor: pointer; } .cs-btn--primary { background: var(--cs-primary); color: #fff; font-size: 16px; padding: 17px 30px; } .cs-btn--primary-full { width: 100%; background: var(--cs-primary); color: #fff; font-size: 16px; padding: 17px; } .cs-btn--deep { background: var(--cs-deep); color: #fff; font-size: 14.5px; padding: 13px 24px; border-radius: 11px; } .cs-btn--deep:hover { background: #141414; } /* Hero search bar */ .cs-hero-search { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; background: rgba(255,255,255,.1); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.16); border-radius: 18px; padding: 12px; max-width: 760px; margin: 0 auto; } .cs-hero-search__field { flex: 1; min-width: 150px; text-align: left; background: var(--cs-surface); border-radius: 11px; padding: 10px 15px; } .cs-hero-search__field--sm { min-width: 120px; } .cs-hero-search__label { font-size: 11px; letter-spacing: .05em; color: var(--cs-muted); text-transform: uppercase; } .cs-hero-search__value { font-size: 15px; color: var(--cs-ink); font-weight: 500; margin-top: 2px; } .cs-hero-search__btn { display: flex; align-items: center; justify-content: center; gap: 9px; background: var(--cs-primary); color: #fff; font-weight: 600; font-size: 15px; padding: 0 26px; border-radius: 11px; white-space: nowrap; text-decoration: none; border: none; min-height: 48px; } /* Summary panel (dark) */ .cs-summary { background: var(--cs-deep); border-radius: 22px; padding: clamp(26px,3vw,38px); color: #fff; } .cs-summary__title { font-family: var(--cs-font-heading, 'Lora', serif); font-size: 24px; margin-bottom: 22px; } .cs-summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .cs-summary__label { color: rgba(255,255,255,.6); font-size: 13.5px; } .cs-summary__value { font-size: 15px; font-weight: 500; } .cs-summary__divider { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.14); } .cs-summary__note { color: rgba(255,255,255,.6); font-size: 13px; line-height: 1.6; margin-bottom: 22px; } .cs-summary__perk { display: flex; align-items: flex-start; gap: 10px; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.5; } /* Booking field (date/stepper) */ .cs-booking-field { border: 1px solid var(--cs-border); border-radius: 12px; padding: 12px 15px; background: var(--cs-bg); } .cs-booking-field__label { display: block; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--cs-muted); font-weight: 600; margin-bottom: 4px; } .cs-booking-field__value { font-size: 15px; color: var(--cs-ink); font-weight: 500; } /* Map placeholder */ .cs-map { position: relative; height: clamp(260px,38vw,420px); border-radius: 22px; overflow: hidden; } .cs-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Menu card (restaurante) */ .cs-menu-card { position: relative; aspect-ratio: 4/3; border-radius: 22px; overflow: hidden; background-color: var(--cs-band); background-size: cover; background-position: center; } .cs-menu-card__veil { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15,21,25,.86), rgba(15,21,25,.05) 60%); } .cs-menu-card__info { position: absolute; left: clamp(16px,2.4vw,24px); right: 16px; bottom: clamp(14px,2.2vw,20px); color: #fff; } .cs-menu-card__title { font-family: var(--cs-font-heading, 'Lora', serif); font-size: clamp(19px,2vw,23px); } .cs-menu-card__price { font-family: var(--cs-font-heading, 'Lora', serif); font-size: clamp(21px,2.2vw,25px); color: var(--cs-primary); font-weight: 600; } .cs-menu-card__note { font-size: 13px; color: rgba(255,255,255,.82); } /* Featured badge */ .cs-badge { position: absolute; top: 16px; left: 16px; background: var(--cs-primary); color: #fff; font-weight: 700; font-size: 14px; padding: 7px 15px; border-radius: 10px; } /* Ficha meta pills (direccion, telefono, url) */ .cs-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--cs-tint); color: var(--cs-ink-soft); font-size: 12.5px; font-weight: 500; padding: 8px 13px; border-radius: 999px; text-decoration: none; } .cs-pill-group { margin-top: auto; display: flex; flex-wrap: wrap; gap: 9px; } /* Ficha claim */ .cs-card__claim { font-size: 13.5px; line-height: 1.7; color: var(--cs-ink-soft); margin-bottom: 10px; } /* Topbar */ .cs-topbar { background: var(--cs-deep); color: rgba(255,255,255,.82); font-size: 13px; } .cs-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 42px; padding-top: 7px; padding-bottom: 7px; } .cs-topbar__left { display: flex; align-items: center; gap: 22px; } .cs-topbar__right { display: flex; align-items: center; gap: 16px; } .cs-topbar__phone { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; } .cs-topbar__note { opacity: .72; } .cs-topbar__social { display: flex; align-items: center; gap: 14px; opacity: .85; } .cs-topbar__social-label { font-size: 12px; letter-spacing: .04em; opacity: .7; } /* Language selector (topbar) */ .cs-lang-pill { display: inline-flex; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; overflow: hidden; } .cs-lang-pill__item { display: inline-block; padding: 6px 13px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-decoration: none; } .cs-lang-pill__item--active { background: var(--cs-primary); color: #fff; } .cs-lang-pill__item--inactive { background: transparent; color: rgba(255,255,255,.75); } /* Main nav bar */ .cs-navbar { background: var(--cs-surface); position: sticky; top: 0; z-index: 50; box-shadow: 0 8px 30px -22px rgba(20,20,20,.55); } .cs-navbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 80px; } .cs-navbar__brand { display: flex; align-items: center; gap: 12px; flex: none; text-decoration: none; } .cs-navbar__logo { display: inline-flex; width: 42px; height: 42px; border-radius: 50%; background: var(--cs-primary); align-items: center; justify-content: center; flex: none; } .cs-navbar__logo:has(img) { width: auto; height: auto; border-radius: 0; background: none; } .cs-navbar__name { font-family: var(--cs-font-heading, 'Lora', serif); font-size: 25px; color: var(--cs-ink-strong); letter-spacing: .2px; } .cs-navbar__kicker { font-size: 10px; letter-spacing: .32em; color: var(--cs-accent-text); font-weight: 600; margin-top: 3px; } .cs-navbar__nav { display: flex; align-items: center; gap: 24px; } .cs-navbar__link { font-size: 15px; font-weight: 500; letter-spacing: .2px; white-space: nowrap; text-decoration: none; color: var(--cs-ink); } .cs-navbar__link--active { font-weight: 600; color: var(--cs-accent-text); } .cs-navbar__actions { display: flex; align-items: center; gap: 14px; flex: none; } /* Nav overflow "Más" dropdown */ .cs-nav-more { position: relative; flex: none; } .cs-nav-more__btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; font-size: 15px; font-weight: 500; color: var(--cs-ink); padding: 0; white-space: nowrap; cursor: pointer; } .cs-nav-more__btn.cs-navbar__link--active { font-weight: 600; color: var(--cs-accent-text); } .cs-nav-more__dropdown { display: none; position: absolute; top: calc(100% + 14px); right: 0; background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: 14px; box-shadow: 0 24px 46px -28px rgba(20,20,20,.4); padding: 8px; min-width: 190px; flex-direction: column; gap: 2px; z-index: 60; } .cs-nav-more__dropdown.is-open { display: flex; } .cs-nav-more__item { display: block; padding: 11px 14px; border-radius: 10px; font-size: 14.5px; font-weight: 500; white-space: nowrap; color: var(--cs-ink); text-decoration: none; } .cs-nav-more__item:hover { background: var(--cs-tint); } .cs-nav-more__item--active { font-weight: 600; color: var(--cs-accent-text); } /* Drawer: idiomas */ .cs-drawer__langs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .cs-drawer__lang { border: 1px solid var(--cs-border); border-radius: 999px; padding: 9px 16px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-decoration: none; color: var(--cs-ink); background: transparent; } .cs-drawer__lang--active { background: var(--cs-primary); border-color: var(--cs-primary); color: #fff; } /* Footer */ .cs-footer { background: var(--cs-deep); } .cs-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 42px; padding-top: 24px; padding-bottom: 54px; } .cs-footer__col-title { color: #fff; font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 18px; } .cs-footer__link { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.62); font-size: 14px; padding: 6px 0; text-decoration: none; } .cs-footer__contact { display: flex; gap: 11px; color: rgba(255,255,255,.62); font-size: 14px; line-height: 1.55; text-decoration: none; } .cs-footer__bar { background: var(--cs-green); border-top: 1px solid rgba(255,255,255,.08); } .cs-footer__bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: 20px; padding-bottom: 20px; } .cs-footer__copy { color: rgba(255,255,255,.5); font-size: 13px; margin: 0; } .cs-footer__legal { display: flex; gap: 22px; } .cs-footer__legal a { color: rgba(255,255,255,.55); font-size: 13px; text-decoration: none; } /* CTA band */ .cs-cta { border-radius: 22px; padding: clamp(28px,4vw,48px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; } .cs-cta--accent { background: var(--cs-primary); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--cs-primary) 50%, transparent); } .cs-cta--green { background: var(--cs-green); box-shadow: 0 30px 60px -30px rgba(70,91,45,.7); } .cs-cta__title { font-family: var(--cs-font-heading, 'Lora', serif); color: #fff; font-size: clamp(24px,3vw,34px); line-height: 1.15; margin-bottom: 10px; } .cs-cta__text { color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.6; } /* Hero */ .cs-hero { position: relative; min-height: clamp(440px,66vh,640px); display: flex; align-items: center; background: var(--cs-deep); overflow: hidden; } .cs-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .cs-hero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,28,33,calc(.5*var(--cs-veil-k))) 0%, rgba(20,28,33,calc(.72*var(--cs-veil-k))) 100%); } .cs-hero__inner { position: relative; z-index: 2; text-align: center; padding-top: 60px; padding-bottom: 60px; } .cs-hero__kicker { font-size: clamp(13px,1.4vw,15px); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); font-weight: 600; margin-bottom: 16px; } .cs-hero__title { font-family: var(--cs-font-heading, 'Lora', serif); color: #fff; font-weight: 400; font-size: clamp(42px,7vw,92px); line-height: 1.04; margin-bottom: 20px; } .cs-hero__sub { color: rgba(255,255,255,.82); font-size: clamp(16px,1.7vw,19px); line-height: 1.6; max-width: 560px; margin: 0 auto 34px; } /* Drawer mobile */ .cs-drawer { position: fixed; inset: 0; z-index: 200; display: none; } .cs-drawer__overlay { position: absolute; inset: 0; background: rgba(20,20,20,.55); } .cs-drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(84vw,350px); background: var(--cs-surface); padding: 24px 24px 32px; display: flex; flex-direction: column; animation: csDrawerIn .3s cubic-bezier(.2,.7,.2,1) both; overflow-y: auto; } .cs-drawer__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .cs-drawer__name { font-family: var(--cs-font-heading, 'Lora', serif); font-size: 22px; color: var(--cs-ink-strong); } .cs-drawer__close { width: 42px; height: 42px; border: none; background: var(--cs-bg); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--cs-ink); } .cs-drawer__link { padding: 14px 4px; border-bottom: 1px solid var(--cs-border); font-size: 17px; text-decoration: none; display: block; } .cs-drawer__link--active { font-weight: 600; color: var(--cs-accent-text); } .cs-drawer__link--normal { font-weight: 500; color: var(--cs-ink); } /* Portada section cards */ .cs-portada-card { background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: 20px; overflow: hidden; } .cs-portada-card__img { height: 160px; overflow: hidden; } .cs-portada-card__img img { width: 100%; height: 100%; object-fit: cover; } .cs-portada-card__body { padding: 24px; } .cs-portada-card__title { font-family: var(--cs-font-heading, 'Lora', serif); font-size: 20px; color: var(--cs-ink-strong); font-weight: 600; margin-bottom: 8px; } .cs-portada-card__text { font-size: 14.5px; line-height: 1.65; color: var(--cs-ink-soft); } /* Portada section header (title + link "Ver todo") */ .cs-portada-section-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 42px; } .cs-portada-section-header__text { max-width: 560px; } .cs-portada-section-header__title { font-family: var(--cs-font-heading, 'Lora', serif); color: var(--cs-ink-strong); font-size: clamp(28px, 3.6vw, 42px); line-height: 1.15; margin-bottom: 14px; } .cs-portada-section-header__lead { font-size: 16px; line-height: 1.7; color: var(--cs-ink-soft); } .cs-portada-section-header__link { display: inline-flex; align-items: center; gap: 9px; color: var(--cs-ink); font-weight: 600; font-size: 15px; border-bottom: 2px solid var(--cs-primary); padding-bottom: 4px; } /* Welcome (Bienvenida — Highlights con datos destacados) */ .cs-stat { background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: 20px; padding: 34px 28px; } .cs-stat__icon { width: 62px; height: 62px; border-radius: 16px; background: var(--cs-tint); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .cs-stat__title { font-size: 19px; color: var(--cs-ink-strong); font-weight: 600; margin-bottom: 10px; } .cs-stat__text { font-size: 14.5px; line-height: 1.65; color: var(--cs-ink-soft); } /* ── PDI Modal (ventana de detalle) ───── */ .cs-pdi-overlay { position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); display: none; align-items: flex-start; justify-content: center; padding: clamp(14px,4vw,54px); overflow-y: auto; } .cs-pdi-panel { position: relative; width: min(560px,100%); background: var(--cs-surface); border-radius: 16px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.4); } .cs-pdi-img { position: relative; height: clamp(140px,28vw,220px); background-color: var(--cs-band); background-size: cover; background-position: center; } .cs-pdi-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; } .cs-pdi-body { padding: 28px 30px 32px; } .cs-pdi-title { font-size: 24px; color: var(--cs-ink-strong); margin-bottom: 8px; } .cs-pdi-claim { font-size: 14px; color: var(--cs-primary); margin-bottom: 14px; } .cs-pdi-desc { font-size: 15px; line-height: 1.8; color: var(--cs-ink); } .cs-pdi-meta { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; } .cs-pdi-row { display: none; font-size: 14px; color: var(--cs-ink-soft); } .cs-pdi-row a { color: var(--cs-primary); } .cs-pdi-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .cs-pdi-btn-map { display: none; align-items: center; gap: 9px; padding: 12px 20px; border-radius: 8px; background: var(--cs-primary); color: #fff; font-size: 13px; font-weight: 600; } .cs-pdi-btn-book { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 8px; border: 1px solid var(--cs-border); color: var(--cs-ink); font-size: 13px; font-weight: 600; } /* Chips de filtro por categoria */ .cs-chip { border-radius: 999px; padding: 11px 20px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--cs-border); background: transparent; color: var(--cs-ink); transition: background .25s, color .25s, border-color .25s; } .cs-chip:hover { border-color: var(--cs-primary); } .cs-chip[aria-pressed="true"] { border-color: var(--cs-primary); background: var(--cs-primary); color: #fff; } /* ═══════════════════ Motor de reservas — layout (patron om-*) ═══════════════════ */ .cs-motor-wrap { max-width: 1340px; margin: 0 auto; padding: clamp(16px, 2.6vw, 26px) clamp(16px, 3vw, 32px) 80px; display: flex; flex-direction: column; gap: 28px; } .cs-motor-search { border-radius: 18px; } .cs-motor-cols { display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: 28px; align-items: start; } .cs-motor-main { min-width: 0; overflow: hidden; /* Necesario para ocultar la slide inactiva del slider 200% (habitaciones/servicios) */ /* Mapear tokens de la web del alojamiento a los tokens del motor de reservas. El motor (om-motor.css) usa --accent, --ink, --surface, etc. La plantilla de la web usa --cs-primary, --cs-ink, --cs-surface, etc. Sobreescribimos aqui para que el motor herede los colores del alojamiento. */ --accent: var(--cs-primary); --ink: var(--cs-ink, #272C54); --surface: var(--cs-surface, #FFFFFF); --surface-2: var(--cs-surface, #F3F4FA); --surface-3: #F6F7FC; --border: var(--cs-border, #E7E9F2); --border-soft: #F0F1F7; --text: var(--cs-ink, #272C54); --text-body: var(--cs-ink-soft, #5C6183); --text-muted: var(--cs-muted, #8B90AB); --text-faint: #A2A6BE; --on-accent: #FFFFFF; --panel-strong: var(--cs-ink, #272C54); --ink-40: color-mix(in srgb, var(--cs-ink, #272C54) 40%, transparent); /* Mandos de forma (om-motor.css los usa para radios, tipografia, bordes) */ --om-sans: inherit; --om-serif: inherit; --om-label: inherit; --om-title-weight: 600; --om-amount-weight: 700; --om-tab-size: 15px; --om-tab-weight: 600; --om-tab-tracking: .2px; --om-tab-transform: none; --om-radius-card: 22px; --om-radius-media: 16px; --om-radius-control: 12px; --om-radius-btn: 14px; --om-border-w: 1px; --on-accent-btn: #FFFFFF; } /* El contenedor de servicios (#bdg2ServiciosOpcionales_V2) viene con display:none inline. Las pestañas solo hacen translateX en el slider, no quitan ese display:none. Lo forzamos visible — el slider translateX + overflow:hidden controla visibilidad. */ .cs-motor-main #bdg2ServiciosOpcionales_V2 { display: block !important; } .cs-motor-cart-col { align-self: start; min-width: 0; /* Heredar tokens del motor para que la cesta (TBudget) use los mismos colores */ --accent: var(--cs-primary); --ink: var(--cs-ink, #272C54); --surface: var(--cs-surface, #FFFFFF); --surface-2: #F3F4FA; --surface-3: #F6F7FC; --border: var(--cs-border, #E7E9F2); --border-soft: #F0F1F7; --border-line: #ECEEF4; --text: var(--cs-ink, #272C54); --text-body: var(--cs-ink-soft, #5C6183); --text-muted: var(--cs-muted, #8B90AB); --text-faint: #A2A6BE; --text-disabled: #C9CCDC; --on-accent: #FFFFFF; --on-accent-btn: #FFFFFF; --panel-strong: var(--cs-ink, #272C54); --chip: #EEF0F8; --shadow-strong: color-mix(in srgb, var(--cs-ink, #272C54) 55%, transparent); --om-radius-card: 22px; --om-radius-control: 12px; --om-radius-btn: 14px; --om-border-w: 1px; /* Este div es el que TBudget.parents('div') encuentra. Su width() devuelve los 384px de la columna grid (correcto). TBudget aplica position:fixed con ese width al hacer scroll. */ } /* Responsive: <1080px carrito pasa debajo */ @media (max-width: 1080px) { .cs-motor-cols { grid-template-columns: minmax(0, 1fr); } } /* En movil el buscador se apila verticalmente */ @media (max-width: 720px) { .cs-motor-wrap { padding: 16px 16px 80px; gap: 18px; } .cs-motor-search { border-radius: 14px; } } /* ── Portada: Reserva directa (handoff 19) ── */ .cs-book-band { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(26px,4vw,52px); align-items: center; background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: 24px; padding: clamp(20px,2.4vw,26px); box-shadow: 0 34px 60px -44px rgba(34,55,64,.5); } .cs-book-band__media { position: relative; border-radius: 18px; overflow: hidden; min-height: clamp(230px,27vw,320px); } .cs-book-band__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cs-book-band__veil { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(20,28,33,.05) 0%, rgba(20,28,33,.52) 100%); } .cs-book-band__body { padding: clamp(6px,1vw,16px) clamp(6px,1.6vw,20px); } .cs-book-band__title { font-family: var(--cs-font-heading, 'Lora', serif); color: var(--cs-ink-strong); font-size: clamp(28px,3.6vw,42px); line-height: 1.12; margin-bottom: 14px; } .cs-book-band__text { font-size: 15.5px; line-height: 1.7; color: var(--cs-ink-soft); max-width: 52ch; margin-bottom: 22px; } .cs-book-perk { display: inline-flex; align-items: center; gap: 13px; background: var(--cs-tint); border: 1px solid var(--cs-primary); border-radius: 14px; padding: 15px 22px; margin-bottom: 28px; } .cs-book-perk__check { flex: none; width: 30px; height: 30px; border-radius: 999px; background: var(--cs-primary); display: grid; place-items: center; } .cs-book-perk__text { font-family: var(--cs-font-heading, 'Lora', serif); font-size: clamp(17px,1.9vw,20px); font-weight: 600; line-height: 1.25; color: var(--cs-ink-strong); } @media (max-width: 860px) { .cs-book-band { grid-template-columns: minmax(0,1fr); } .cs-book-band__media { min-height: 200px; } } /* ========================================================================= Motor de reservas V13 (om-*) — hereda la identidad visual de la web. El motor (om-motor.css) define --accent y su paleta en :root con un color fijo (#F18A5D). Aqui, dentro de .om-root (contenedor del motor en la web), redefinimos --accent con el color corporativo de la web (--cs-primary). Como las derivadas del motor (--accent-strong/-soft/-shadow...) usan color-mix(... var(--accent) ...), se resuelven en los elementos del motor tomando este --accent → toda la paleta de acento se recalcula sola. No se toca el motor; solo la web define los tokens en su .om-root. Se usa .om-root.om-root (especificidad 0,2,0) para ganar al :root del propio om-motor.css, que el motor re-inyecta por AJAX (lista_disponible_9.html) DESPUES de este site.css. Con un solo .om-root, el :root re-inyectado mas tarde podia prevalecer para los nodos pintados dentro del contenido AJAX. ========================================================================= */ /* .om-confirm-page.om-confirm-page: la pagina de confirmacion V13 (TBudgetV2Inc) se inyecta como HTML propio con y NO cuelga de .om-root. Comparte el mismo set de tokens del motor para heredar el color corporativo (--accent = --cs-primary) y sus derivadas. Doble clase (0,2,0) para ganar al :root de om-motor.css que el propio V13 carga en su . */ .om-root.om-root, .om-confirm-page.om-confirm-page { /* Acento: color corporativo configurado por el propietario (config_json.color_primario) */ --accent: var(--cs-primary); --on-accent: #fff; --on-accent-btn: #fff; /* Legacy TCheckin_Complementos (basics.css) define --color_principal en su :root con un azul fijo (rgb(38,153,251)). Lo usan los textos de enfasis de los servicios opcionales de la confirmacion (.TChkCmpl_texto_enfasis, precios de servicio). Redefinido aqui con el color corporativo para que esos textos hereden el primary de la web. No se toca basics.css. */ --color_principal: var(--cs-primary); /* Derivadas del acento: hay que redefinirlas aqui. Motivo: una custom property con var() se COMPUTA en el elemento donde se DECLARA. Las derivadas del motor estan declaradas en :root de om-motor.css, asi que alli var(--accent) = #F18A5D (el fijo). Redefinirlas en .om-root (con las mismas formulas color-mix) las recomputa con NUESTRO --accent. Esto arregla .om-rate.is-on (usa --accent-soft/--accent-line), chips, etc. */ --accent-strong: color-mix(in srgb, var(--accent) 80%, #7A2B00); --accent-deep: color-mix(in srgb, var(--accent) 62%, #3D1400); --accent-soft: color-mix(in srgb, var(--accent) 17%, var(--surface)); --accent-line: color-mix(in srgb, var(--accent) 48%, var(--surface)); --accent-shadow: color-mix(in srgb, var(--accent) 80%, transparent); --link-hover: color-mix(in srgb, var(--accent) 72%, #7A2B00); /* Superficies y tinta alineadas con la web (mejor integracion visual) */ --surface: var(--cs-surface); --surface-3: var(--cs-bg); --ink: var(--cs-ink-strong); --text: var(--cs-ink); --text-body: var(--cs-ink-soft); --border: var(--cs-border); } /* ========================================================================= MOTOR DE RESERVAS — MODO OSCURO ------------------------------------------------------------------------- El :root de om-motor.css trae un bloque [data-theme="dark"] con el set oscuro completo (superficies, tinta, bordes, semanticos, sombras, velos y derivadas del acento con FORMULAS DISTINTAS a las de modo claro). PERO el motor NO cuelga de , y ademas re-inyecta om-motor.css por AJAX (lista_disponible_9.html) DESPUES de site.css. Por eso, en la web generada, el motor en dark solo heredaba superficie/tinta base de nuestros --cs-* (via .om-root.om-root claro) y dejaba en CLARO: derivadas del acento (--accent-soft/-line), chips, panel-strong, semanticos (--danger/ok/warn/ info + *-soft), sombras (--shadow-*), scrim y velos (--ink-*). Solucion: replicar aqui el set [data-theme="dark"] del diseño, con especificidad html[data-theme="dark"] .om-root.om-root (0,2,1) para ganar tambien al :root re-inyectado por AJAX (mismo motivo que el fix de acento). DECISION (2026-09-01): se usan los GRISES NEUTROS DEL DISEÑO tal cual (#1A1B1D, #232528, #101113...) para que el motor en dark sea identico al mock. El acento (--accent) SI hereda el color corporativo (--cs-primary) del bloque .om-root.om-root claro; aqui solo se recalculan sus DERIVADAS con las formulas dark. ALTERNATIVA (documentada, NO aplicada): mapear las superficies/tinta/borde a nuestros --cs-* dark (var(--cs-surface), var(--cs-bg), var(--cs-ink)...) para que el motor en dark se integre con el fondo del alojamiento en vez de usar los grises fijos del diseño. Cambiar los valores de superficie/tinta/ borde de este bloque por sus equivalentes --cs-*. Los semanticos y velos no tienen equivalente --cs-*, se dejarian con los valores del diseño. ========================================================================= */ html[data-theme="dark"] .om-root.om-root, html[data-theme="dark"] .cs-motor-cart-col, html[data-theme="dark"] .om-confirm-page.om-confirm-page { color-scheme: dark; /* Superficies (grises del diseño) */ --surface: #1A1B1D; --surface-2: #232528; --surface-3: #101113; --chip: #2A2C30; --panel-strong: #26282C; /* Tinta */ --text: #F2F3F4; --text-body: #B7B9BD; --text-chip: #C9CBCF; --text-muted: #8E9195; --text-faint: #6F7276; --text-disabled: #4C4F53; /* Bordes */ --border: #34373B; --border-soft: #2A2C30; --border-line: #2A2C30; /* Derivadas del acento — FORMULAS DARK del diseño (--accent lo hereda el bloque .om-root.om-root claro = var(--cs-primary)). Ojo: en dark las mezclas van contra #101113 y con % mas altos que en claro. */ --accent-soft: color-mix(in srgb, var(--accent) 34%, #101113); --accent-line: color-mix(in srgb, var(--accent) 88%, #101113); --accent-strong: color-mix(in srgb, var(--accent) 84%, #FFE7D8); --accent-deep: color-mix(in srgb, var(--accent) 62%, #3D1400); --accent-shadow: color-mix(in srgb, var(--accent) 80%, transparent); --link-hover: color-mix(in srgb, var(--accent) 70%, #FFFFFF); /* Semanticos (versiones oscuras del diseño) */ --danger: #EE8E88; --danger-soft: #351F1E; --ok: #63C7A6; --ok-soft: #1D2B27; --warn: #DFB56A; --warn-soft: #302A1E; --info: #B6BAC0; --info-soft: #2A2C30; /* Sombras y velos (negros translucidos — antes se calculaban sobre --ink claro) */ --shadow-soft: rgba(0,0,0,.55); --shadow-strong: rgba(0,0,0,.68); --scrim: rgba(0,0,0,.68); --ink-deep: #0B0C0D; --ink-32: rgba(0,0,0,.34); --ink-40: rgba(0,0,0,.42); --ink-50: rgba(0,0,0,.52); --ink-60: rgba(0,0,0,.62); --ink-72: rgba(0,0,0,.72); --ink-86: rgba(0,0,0,.86); --ink-88: rgba(0,0,0,.88); --ink-94: rgba(9,10,11,.96); } /* ========================================================================= CONFIRMACION — Labels del formulario en MODO OSCURO ------------------------------------------------------------------------- El V13 pinta `.om-field__label` con `color: var(--text-muted)`. En claro (#8B90AB sobre blanco) se lee bien, pero en dark `--text-muted` = #8E9195 (gris medio) queda con poco contraste sobre la superficie oscura. Fix: en dark subir la tinta del label a `--text-body` (#B7B9BD) para mejor legibilidad, sin igualarla al valor del input (que usa --text). No se toca el V13. Especificidad con .om-confirm-page para acotar solo a la confirmacion. ========================================================================= */ html[data-theme="dark"] .om-confirm-page .om-field__label { color: var(--text-body) !important; } /* Labels de checkboxes y consentimientos RGPD (Terminos y Condiciones, recibir informacion...). El texto va en un que hereda el color del label. En dark forzamos tinta clara para legibilidad. */ html[data-theme="dark"] .om-confirm-page .om-check__label, html[data-theme="dark"] .om-confirm-page .om-rgpd__label, html[data-theme="dark"] .om-confirm-page .om-rgpd__title, html[data-theme="dark"] .om-confirm-page .om-check__label .RGPD_titulo_evnt, html[data-theme="dark"] .om-confirm-page .om-rgpd__label .RGPD_titulo_evnt { color: var(--text) !important; } /* Total de la barra "Finalizar" (.om-footer-bar__total): el V13 lo pinta con color inline #1e293b (oscuro), ilegible sobre la barra oscura en dark. Se fuerza tinta clara. !important para ganar al estilo inline. */ html[data-theme="dark"] .om-confirm-page .om-footer-bar__total { color: var(--text) !important; } /* Campos del formulario (.om-field__input/select/textarea). El markup los pinta tambien con `.form-control` (Bootstrap), que fuerza background:#fff y color oscuro → en dark salen con fondo blanco. El diseño om- quiere fondo transparente (hereda la superficie oscura de la seccion, como el checkbox), texto claro y placeholder legible. Se fuerza con !important + .om-confirm-page para ganar a Bootstrap. No se toca el V13 ni bootstrap.css. */ html[data-theme="dark"] .om-confirm-page .om-field__input, html[data-theme="dark"] .om-confirm-page .om-field__select, html[data-theme="dark"] .om-confirm-page .om-field__textarea { background: transparent !important; color: var(--text) !important; border-color: var(--border) !important; } /* Placeholder: gris medio-claro, oscuro respecto al texto pero visible sobre el fondo oscuro del input. */ html[data-theme="dark"] .om-confirm-page .om-field__input::placeholder, html[data-theme="dark"] .om-confirm-page .om-field__textarea::placeholder { color: var(--text-muted) !important; opacity: 1; } /* Options del select: al desplegarse usan el fondo del sistema; forzar fondo oscuro + texto claro para coherencia (algunos navegadores respetan estos). */ html[data-theme="dark"] .om-confirm-page .om-field__select option { background: var(--surface-2) !important; color: var(--text) !important; } /* ========================================================================= MOTOR — CESTA: fondo del bloque de habitaciones seleccionadas ------------------------------------------------------------------------- El bloque de conceptos de habitacion (form_principal_confirmacion36.html, dentro de #bdg_fila_concepto_N) esta envuelto en `.bdg_fila_concepto`, que en `budget.css` (Smarty) fija `background-color` (#FFF en modo TPack, #F2F2F2 o color oscuro segun operador) cuando reserva!=1. Ese fondo claro asoma en la cesta y en dark deja el texto ilegible. Los servicios NO usan esa clase (van en `.om-svcblock`), por eso solo afecta al bloque de habs. Fix: dentro del motor, el bloque hereda el fondo del contenedor (`.om-cart-body`, transparente/surface). No se toca budget.css. ========================================================================= */ .om-root .bdg_fila_concepto { background-color: transparent !important; } /* ========================================================================= MOTOR — CESTA: fondo gris legacy del contenedor (banda en esquinas) ------------------------------------------------------------------------- El contenedor de la cesta (`.om-cart`) tambien lleva la clase legacy `.bdg2_cuadro_seccion` (TBudget_V2.css), que fija `background-color:#f6f6f6` (reglas `.TBudgetIntegrated .bdg2_cuadro_seccion` y `.bdg2_cuadro_seccion`). En modo claro ese gris se confundia con el fondo; en dark asoma en las esquinas redondeadas del contenedor (`border-radius:22px`), formando la banda clara. El head/body/foot ya aportan su propio fondo, asi que el contenedor no debe pintar ninguno. Fix: fondo transparente. No se toca el motor. ========================================================================= */ .om-root .om-cart.bdg2_cuadro_seccion { background-color: transparent !important; } /* ========================================================================= MOTOR — Boton "Quitar" (.om-remove): usar color corporativo ------------------------------------------------------------------------- `.om-remove` (om-motor.css) usa `color: var(--danger)` (rojo) y hover con `--danger-soft`. Aqui lo cambiamos al color primary del alojamiento. El motor usa !important, asi que el override tambien (con .om-root delante para especificidad). No se toca el motor. ========================================================================= */ .om-root .om-remove { color: var(--cs-primary) !important; } .om-root .om-remove:hover { background: color-mix(in srgb, var(--cs-primary) 14%, transparent) !important; } /* ========================================================================= MOTOR — CESTA: texto legacy `.bdg_texto_blanco` en MODO OSCURO ------------------------------------------------------------------------- En la web, `budget.css` (Smarty) resuelve `.bdg_texto_blanco` por la rama `$ModuloOrigen=='TPack'` → `color:#2a2c2e !important` (gris oscuro), no #fff. Ese gris se lee bien sobre el fondo claro del modo claro, pero en dark queda texto oscuro sobre fondo oscuro (casi ilegible). Afecta p.ej. al aviso "Esta reserva no requiere pago en este momento..." (forma_pago_sin_requerimiento.html, forma_pago.html): ``. Fix: en dark, dentro del motor/cesta, el texto usa la tinta clara del motor (`--text` = #F2F3F4 en dark). `!important` + especificidad para ganar al `!important` del legacy. No se toca budget.css. ========================================================================= */ html[data-theme="dark"] .om-root .bdg_texto_blanco, html[data-theme="dark"] .cs-motor-cart-col .bdg_texto_blanco { color: var(--text) !important; } /* ========================================================================= MOTOR — Loaders (spinner de carga): centrar en sus contenedores ------------------------------------------------------------------------- Flujo real (analizado en codigo): - Resultados: el buscador (class.TWidget.js `BuscarDisponibilidadCasa`) resuelve la capa desde `TEwsResultadoCoreSearch="cs-motor-resultados"` y llama a `TSS_getSimpleSearch(...,'#cs-motor-resultados',...)`. Este (misc.TSimpleSearch.js L490) hace `iCl('#cs-motor-resultados').html(TSS_getCargando())`. `TSS_getCargando` devuelve `

` → un DIV SIN CLASE (solo estilo inline). [El `getCargando()` de TWidget NO se usa aqui: solo aplica cuando TEws_sin_contenido!=1 (SideLayer/portal), y web-clasica usa sin_contenido.] - Cesta: `.TBdg_loading_evnt` (TBudget getCargando) dentro de la cesta. Como el div del loader no tiene clase, se apunta al contenedor via :has() (mientras contiene un img de loading) y se centra con flex. Se usa !important en el contenedor para ganar al posible reajuste del motor reinyectado por AJAX. El `> div` del loader se normaliza (quita el padding-top:85px / margin:auto / width:90% inline que lo descentran). El :has apunta al img a cualquier profundidad (sin `>`) por robustez. No se toca el JS del motor. ========================================================================= */ /* Contenedor de resultados: centrar mientras solo esta el spinner */ .om-root#cs-motor-resultados:has(img[src*="loading"]), .om-root #cs-motor-resultados:has(img[src*="loading"]) { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 260px !important; } /* ========================================================================= MOTOR — Spinner de la CESTA: (sin override) ------------------------------------------------------------------------- El loader de la cesta (`.TBdg_loading_evnt`) tiene `display:none` inline y el motor (TBudget) lo alterna a visible cuando carga. Cualquier override de `display` desde CSS lo forzaba a mostrarse SIEMPRE (bug). Se deja el comportamiento nativo del motor: el loader se muestra donde TBudget lo pinta, centrado en X por su `margin:auto` inline. No se toca. Si en el futuro se quiere centrar en Y, hay que hacerlo desde JS (al mostrar/ocultar el loader), no desde CSS, para respetar el `display:none` inline. ========================================================================= */ /* ========================================================================= MOTOR — Spinner de RESULTADOS de busqueda (YA VALIDADO — no tocar) ========================================================================= */ .om-root#cs-motor-resultados:has(img[src*="loading"]), .om-root #cs-motor-resultados:has(img[src*="loading"]) { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 260px !important; } .om-root#cs-motor-resultados > div:has(img[src*="loading"]), .om-root #cs-motor-resultados > div:has(img[src*="loading"]) { width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: center !important; } .om-root#cs-motor-resultados img[src*="loading"], .om-root #cs-motor-resultados img[src*="loading"] { display: inline-block !important; width: 80px !important; height: auto !important; max-width: 80px !important; } /* ========================================================================= MOTOR — Spinner INICIAL del widget (antes de renderizar el buscador) ------------------------------------------------------------------------- Al cargar el motor, `IniciarFormBuscador` (class.TWidget.js L1715) pinta el spinner dentro del PROPIO div del widget `#cs-motor-reservas` (porque no lleva TEws_sin_contenido=1). El HTML (TWidget getCargando, L1245) es: `

`. Ese contenedor esta en `.cs-motor-search` y NO cuelga de `.om-root`, por eso se trata aparte de los loaders de resultados/cesta. Fix: centrar `#cs-motor-reservas` mientras contiene el spinner (via :has) y dar tamaño explicito al del SVG para que no colapse. No se toca el JS del motor. ========================================================================= */ #cs-motor-reservas:has(img[src*="loading"]) { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 200px !important; } #cs-motor-reservas .ews_capa_cargando_evnt { width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: center !important; } #cs-motor-reservas img[src*="loading"] { display: inline-block !important; width: 80px !important; height: auto !important; max-width: 80px !important; }