/* ================================================================ DARK MODE — Apartamentos Manzano Web pública (/index.html) + Portal huésped (/huesped/) Activado con: La clase .theme-ready se añade por JS tras DOMContentLoaded para activar transiciones solo después del primer render. ================================================================ */ /* ── Transiciones suaves (solo activas tras primer render) ────── */ html.theme-ready body, html.theme-ready .hg-body, html.theme-ready .hg-topbar, html.theme-ready .hg-shell, html.theme-ready .hg-main, html.theme-ready .hg-card, html.theme-ready .hg-field__input, html.theme-ready .hg-btn, html.theme-ready .hg-banner, html.theme-ready .navbar__inner, html.theme-ready .price-banner, html.theme-ready .price-banner__inner, html.theme-ready .section, html.theme-ready .card, html.theme-ready .apt-card, html.theme-ready .apt-card__body, html.theme-ready .footer, html.theme-ready input, html.theme-ready select, html.theme-ready textarea { transition: background-color 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } /* ================================================================ VARIABLES DARK — web pública (styles.css + redesign.css) ================================================================ */ [data-theme="dark"] { --color-bg: #0e1117; --color-white: #1a1f2e; --color-dark: #dde2e8; --color-dark-light: #9ba5b5; --color-gray-100: #161b27; --color-gray-200: #1e2535; --color-gray-300: #27334a; --color-gray-400: #607080; --color-gray-500: #8090a4; --color-gray-600: #a0aab8; --color-gray-700: #bbc5d0; --color-gray-900: #e5eaf0; --color-primary: #4da325; --color-primary-dark:#3d8f20; --color-navy: #3b5a8f; --color-gold: #c9a44e; --color-gold-light: #1c1608; --color-green: #2fc870; --color-green-light: #091a10; --color-red: #f07070; --color-red-light: #1f0a0a; --color-success: #2fc870; --color-error: #f07070; --shadow-sm: 0 2px 4px rgba(0,0,0,.25); --shadow-md: 0 4px 12px rgba(0,0,0,.4); --shadow-lg: 0 8px 24px rgba(0,0,0,.5); --shadow-xl: 0 12px 32px rgba(0,0,0,.55); } /* ================================================================ VARIABLES DARK — portal huésped (guest-skin.css) ================================================================ */ [data-theme="dark"] { --hg-bg: #0e1117; --hg-surface: #1a1f2e; --hg-surface-soft: #1e2535; --hg-ink: #dde2e8; --hg-ink-soft: #9ba5b5; --hg-ink-muted: #607080; --hg-line: rgba(255,255,255,.07); --hg-line-strong: rgba(255,255,255,.13); --hg-accent: #4da325; --hg-accent-dark: #3d8f20; --hg-accent-soft: #091a10; --hg-warn-bg: #1c1608; --hg-warn-ink: #d4a830; --hg-error-bg: #1f0a0a; --hg-error-ink: #f07070; --hg-success-bg: #091a10; --hg-success-ink: #4fd48a; --hg-shadow-sm: 0 1px 2px rgba(0,0,0,.35); --hg-shadow-md: 0 4px 16px rgba(0,0,0,.5); --hg-shadow-lg: 0 18px 48px rgba(0,0,0,.6); } /* ================================================================ BODY / BASE ================================================================ */ [data-theme="dark"] body { background: var(--color-bg); color: var(--color-dark); } /* ================================================================ WEB PÚBLICA — componentes concretos con color hardcodeado ================================================================ */ /* Price banner (tiene #fff hardcodeado en inline styles) */ [data-theme="dark"] .price-banner { background: var(--color-bg); } [data-theme="dark"] .price-banner__inner { background: var(--color-gray-100) !important; border-color: var(--color-gray-200) !important; color: var(--color-dark); } [data-theme="dark"] .price-banner__heading { color: var(--color-dark); } [data-theme="dark"] .price-banner__inner p { color: var(--color-gray-500); } /* Secciones con fondos blancos/claros */ [data-theme="dark"] .section { background: var(--color-bg); } [data-theme="dark"] .section--alt, [data-theme="dark"] .section--light, [data-theme="dark"] .section--gray { background: var(--color-gray-100); } /* Headings */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5 { color: var(--color-dark); } /* Tarjetas de apartamentos */ [data-theme="dark"] .apt-card { background: var(--color-gray-100); border-color: var(--color-gray-200); } [data-theme="dark"] .apt-card__body { background: var(--color-gray-100); } [data-theme="dark"] .apt-card__title, [data-theme="dark"] .apt-card__name { color: var(--color-dark); } [data-theme="dark"] .apt-card__desc, [data-theme="dark"] .apt-card__location { color: var(--color-gray-500); } /* Cards genéricas */ [data-theme="dark"] .card { background: var(--color-gray-100); border-color: var(--color-gray-200); color: var(--color-dark); } [data-theme="dark"] .card-body { background: var(--color-gray-100); } [data-theme="dark"] .card-title { color: var(--color-dark); } /* Inputs y formularios */ [data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--color-gray-200) !important; color: var(--color-dark) !important; border-color: var(--color-gray-300) !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--color-gray-500); } [data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(77,163,37,.2) !important; } /* Footer */ [data-theme="dark"] .footer { background: #070a0f; color: var(--color-gray-500); } [data-theme="dark"] .footer__heading, [data-theme="dark"] .footer__brand { color: var(--color-gray-700); } [data-theme="dark"] .footer a { color: var(--color-gray-500); } [data-theme="dark"] .footer a:hover { color: var(--color-gray-700); } [data-theme="dark"] .footer__divider, [data-theme="dark"] .footer hr { border-color: var(--color-gray-200); } /* Navbar scrolled state (ya tiene fondo oscuro al inicio) */ [data-theme="dark"] .navbar.is-scrolled .navbar__inner, [data-theme="dark"] .navbar--scrolled .navbar__inner { background: rgba(14, 17, 23, 0.97); border-color: rgba(255,255,255,.08); } /* Navbar dropdown */ [data-theme="dark"] .navbar__dd-menu { background: #1a1f2e; border-color: rgba(255,255,255,.1); } [data-theme="dark"] .navbar__dd-menu li a { color: var(--color-gray-600); } [data-theme="dark"] .navbar__dd-menu li a:hover { background: rgba(255,255,255,.06); color: var(--color-dark); } /* Booking drawer overlay */ [data-theme="dark"] .drawer-overlay, [data-theme="dark"] .dp-overlay { background: rgba(0,0,0,.65); } [data-theme="dark"] .drawer, [data-theme="dark"] .dp-drawer, [data-theme="dark"] .drawer-panel { background: var(--color-gray-100); color: var(--color-dark); } [data-theme="dark"] .drawer__header, [data-theme="dark"] .dp-drawer__header { background: var(--color-gray-100); border-bottom-color: var(--color-gray-200); } [data-theme="dark"] .drawer__title, [data-theme="dark"] .dp-drawer__title { color: var(--color-dark); } /* Modal / overlay genérico */ [data-theme="dark"] .modal-content, [data-theme="dark"] .modal__content { background: var(--color-gray-100); color: var(--color-dark); border-color: var(--color-gray-200); } [data-theme="dark"] .modal__header, [data-theme="dark"] .modal-header { border-bottom-color: var(--color-gray-200); } [data-theme="dark"] .modal__footer, [data-theme="dark"] .modal-footer { border-top-color: var(--color-gray-200); } /* Página de apartamento — detalle */ [data-theme="dark"] .apt-detail, [data-theme="dark"] .apt-detail__body { background: var(--color-bg); } [data-theme="dark"] .apt-detail__sidebar, [data-theme="dark"] .booking-box, [data-theme="dark"] .price-box { background: var(--color-gray-100); border-color: var(--color-gray-200); } /* Welcome / info sections */ [data-theme="dark"] .welcome-section, [data-theme="dark"] .info-block, [data-theme="dark"] .text-content { color: var(--color-dark); } [data-theme="dark"] .welcome-section p, [data-theme="dark"] .info-block p { color: var(--color-gray-500); } /* Chips / badges */ [data-theme="dark"] .badge, [data-theme="dark"] .chip { background: var(--color-gray-200); color: var(--color-dark); } /* ================================================================ HOME — tarjetas de valoraciones / reseñas ================================================================ */ [data-theme="dark"] .valoracion-card { background: var(--color-gray-100) !important; border-color: var(--color-gray-200) !important; } [data-theme="dark"] .valoracion-card__quote { color: var(--color-gray-300) !important; } [data-theme="dark"] .valoracion-card__text { color: var(--color-gray-600) !important; } [data-theme="dark"] .valoracion-card__foot { border-top-color: var(--color-gray-200) !important; } [data-theme="dark"] .valoracion-card__author { color: var(--color-gray-700) !important; } /* HOME — cards de apartamentos en grid home */ [data-theme="dark"] .home-apartment-card { background: var(--color-gray-100); } /* ================================================================ HERO OVERLAYS sobre imágenes — texto siempre blanco (estos elementos se colocan sobre fotos con overlay oscuro, no deben heredar el --color-white invertido del dark mode) ================================================================ */ [data-theme="dark"] .apartments-page__hero-overlay, [data-theme="dark"] .apartments-page__hero-overlay span, [data-theme="dark"] .apartments-page__hero-overlay h1, [data-theme="dark"] .city-page__hero-overlay, [data-theme="dark"] .city-page__hero-copy { color: #fff !important; } /* ================================================================ APARTAMENTOS — listing cards (.apt-showcase) ================================================================ */ [data-theme="dark"] .apt-showcase { background: var(--color-gray-100) !important; border-color: var(--color-gray-200) !important; } [data-theme="dark"] .apt-showcase__content { background: var(--color-gray-100) !important; } [data-theme="dark"] .apt-showcase__title { color: var(--color-dark) !important; } [data-theme="dark"] .apt-showcase__desc { color: var(--color-gray-500) !important; } [data-theme="dark"] .apt-showcase__meta { color: var(--color-gray-500) !important; border-top-color: var(--color-gray-200) !important; } [data-theme="dark"] .apt-showcase__link { color: var(--color-primary) !important; } [data-theme="dark"] .apt-showcase__media-hint { background: rgba(0,0,0,.55) !important; color: #fff !important; } /* ================================================================ DETALLE APARTAMENTO (.apt-detail-v2 / .apt-dv2__*) ================================================================ */ [data-theme="dark"] .apt-detail-v2, [data-theme="dark"] .apt-dv2__main, [data-theme="dark"] .apt-dv2__body { background: var(--color-bg) !important; color: var(--color-dark) !important; } [data-theme="dark"] .apt-dv2__desc { color: var(--color-gray-500) !important; } [data-theme="dark"] .apt-dv2__services-title { color: var(--color-dark) !important; } [data-theme="dark"] .apt-services-list__item { background: var(--color-gray-200) !important; color: var(--color-gray-700) !important; border-color: var(--color-gray-300) !important; box-shadow: none !important; } /* Sidebar / booking box */ [data-theme="dark"] .apt-dv2__sidebar, [data-theme="dark"] .apt-dv2__card { background: var(--color-gray-100) !important; border-color: var(--color-gray-200) !important; } [data-theme="dark"] .apt-dv2__price { color: var(--color-dark) !important; } [data-theme="dark"] .apt-dv2__price-sub { color: var(--color-gray-600) !important; } [data-theme="dark"] .apt-dv2__price-row { color: var(--color-gray-600) !important; border-bottom-color: var(--color-gray-200) !important; } [data-theme="dark"] .apt-dv2__field-label { color: var(--color-gray-600) !important; } /* Desglose de precios: hardcoded #5a5249 / #1a1a1a en redesign.css */ [data-theme="dark"] .apt-dv2__quote-line { color: var(--color-gray-600) !important; border-top-color: var(--color-gray-300) !important; } [data-theme="dark"] .apt-dv2__quote-line > span, [data-theme="dark"] .apt-dv2__quote-line > :last-child { color: var(--color-gray-700) !important; } [data-theme="dark"] .apt-dv2__quote-line--total { border-top-color: var(--color-gray-300) !important; color: var(--color-dark) !important; } [data-theme="dark"] .apt-dv2__quote-line--total > span, [data-theme="dark"] .apt-dv2__quote-line--total > :last-child { color: var(--color-dark) !important; } [data-theme="dark"] .apt-dv2__guarantee { color: var(--color-gray-500) !important; } [data-theme="dark"] .booking-min-stay-note { background: var(--color-gray-200) !important; color: var(--color-gray-600) !important; border-color: var(--color-gray-300) !important; } [data-theme="dark"] .apt-dv2__chip { background: rgba(255,255,255,.12) !important; color: #fff !important; } [data-theme="dark"] .apt-dv2__gallery-cta { background: rgba(0,0,0,.55) !important; color: #fff !important; } /* ================================================================ CONTACTO — cards categoría, FAQ, formulario (.chc-*) ================================================================ */ [data-theme="dark"] .chc-cat { background: var(--color-gray-100) !important; border-color: var(--color-gray-200) !important; } [data-theme="dark"] .chc-cat__icon { background: var(--color-gray-200) !important; color: var(--color-primary) !important; } [data-theme="dark"] .chc-cat__title { color: var(--color-dark) !important; } [data-theme="dark"] .chc-cat__desc { color: var(--color-gray-500) !important; } [data-theme="dark"] .chc-cat__arrow { color: var(--color-gray-500) !important; } /* FAQ items */ [data-theme="dark"] .chc-faq-item { background: var(--color-gray-100) !important; border-color: var(--color-gray-200) !important; } [data-theme="dark"] .chc-faq-item__q { color: var(--color-dark) !important; } [data-theme="dark"] .chc-faq-item__body { color: var(--color-gray-500) !important; border-top-color: var(--color-gray-200) !important; } [data-theme="dark"] .chc-faq-item__cat { background: var(--color-gray-200) !important; color: var(--color-gray-600) !important; } /* Intro lead box */ [data-theme="dark"] .chc-section-title, [data-theme="dark"] .chc-hero__title { color: var(--color-dark) !important; } [data-theme="dark"] .chc-hero__subtitle, [data-theme="dark"] .chc-section-subtitle { color: var(--color-gray-500) !important; } /* Apartment strip in contact */ [data-theme="dark"] .chc-apt-card { background: var(--color-gray-100) !important; border-color: var(--color-gray-200) !important; } [data-theme="dark"] .chc-apt-card__title { color: var(--color-dark) !important; } [data-theme="dark"] .chc-apt-card__meta { color: var(--color-gray-500) !important; } /* Contact channels */ [data-theme="dark"] .chc-channel { background: var(--color-gray-100) !important; border-color: var(--color-gray-200) !important; color: var(--color-dark) !important; } [data-theme="dark"] .chc-channel__icon { background: var(--color-gray-200) !important; color: var(--color-primary) !important; } /* Direct contact section */ [data-theme="dark"] .chc-direct { background: var(--color-gray-100) !important; } /* ================================================================ EXPERIENCIAS — cards (.experiences-page__*) ================================================================ */ [data-theme="dark"] .experiences-page__card { background: var(--color-gray-100) !important; border-color: var(--color-gray-200) !important; } [data-theme="dark"] .experiences-page__body { background: var(--color-gray-100) !important; } [data-theme="dark"] .experiences-page__body h3, [data-theme="dark"] .experiences-page__body .card-title { color: var(--color-dark) !important; } [data-theme="dark"] .experiences-page__body p, [data-theme="dark"] .experiences-page__body .card-text { color: var(--color-gray-500) !important; } /* ================================================================ CIUDAD — cards atracciones (.city-page__*) ================================================================ */ [data-theme="dark"] .city-page__lead { background: var(--color-gray-100) !important; border-color: var(--color-gray-200) !important; color: var(--color-gray-500) !important; } [data-theme="dark"] .city-page__item { background: var(--color-gray-100) !important; border-color: var(--color-gray-200) !important; } [data-theme="dark"] .city-page__stop-copy h3, [data-theme="dark"] .city-page__item h3, [data-theme="dark"] .city-page__item h4 { color: var(--color-dark) !important; } [data-theme="dark"] .city-page__stop-copy p, [data-theme="dark"] .city-page__item p { color: var(--color-gray-500) !important; } [data-theme="dark"] .city-page__media-card { background: var(--color-gray-100) !important; border-color: var(--color-gray-200) !important; } /* ================================================================ PORTAL HUÉSPED — componentes adicionales ================================================================ */ /* Topbar (tiene rgba(250,250,247,0.92) hardcodeado) */ [data-theme="dark"] .hg-topbar { background: rgba(14, 17, 23, 0.96) !important; border-bottom-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .hg-topbar__brand, [data-theme="dark"] .hg-topbar__user { color: var(--hg-ink); } /* Dropdown nav mobile */ [data-theme="dark"] .hg-topbar__nav { background: var(--hg-surface); border-color: var(--hg-line-strong); } /* Active link: texto oscuro sobre fondo claro en dark mode */ [data-theme="dark"] .hg-topbar__link.is-active { background: var(--hg-ink); color: #0e1117; } /* Login — panel derecho */ [data-theme="dark"] .hg-login__panel { background: var(--hg-bg); } [data-theme="dark"] .hg-login__title, [data-theme="dark"] .hg-login__lede { color: var(--hg-ink); } [data-theme="dark"] .hg-login__switch { color: var(--hg-ink-muted); } [data-theme="dark"] .hg-login__switch button { color: var(--hg-ink); border-bottom-color: var(--hg-line-strong); } [data-theme="dark"] .hg-login__footer { border-top-color: var(--hg-line); color: var(--hg-ink-muted); } [data-theme="dark"] .hg-login__footer a { color: var(--hg-ink); border-bottom-color: var(--hg-line-strong); } /* Meter de fortaleza de contraseña */ [data-theme="dark"] .hg-meter__bar { background: var(--hg-line-strong); } /* Botón secundario */ [data-theme="dark"] .hg-btn--secondary { background: var(--hg-surface); color: var(--hg-ink); border-color: var(--hg-line-strong); } [data-theme="dark"] .hg-btn--secondary:hover { border-color: var(--hg-ink); } /* Banners de color */ [data-theme="dark"] .hg-banner--info { background: var(--hg-accent-soft); border-color: rgba(77,163,37,.3); color: #7de056; } [data-theme="dark"] .hg-banner--warning { background: var(--hg-warn-bg); border-color: rgba(212,168,48,.3); color: var(--hg-warn-ink); } [data-theme="dark"] .hg-banner--error { background: var(--hg-error-bg); border-color: rgba(240,112,112,.3); color: var(--hg-error-ink); } [data-theme="dark"] .hg-banner--success { background: var(--hg-success-bg); border-color: rgba(79,212,138,.3); color: var(--hg-success-ink); } /* Inline error */ [data-theme="dark"] .hg-inline-error { background: var(--hg-error-bg); color: var(--hg-error-ink); } /* Greeting */ [data-theme="dark"] .hg-greeting__title { color: var(--hg-ink); } [data-theme="dark"] .hg-greeting__title em { color: var(--hg-accent); } /* ================================================================ PILL TOGGLE — botón dark/light mode fijo ================================================================ */ #theme-toggle-btn { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9900; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; /* Light mode: botón oscuro con icono luna */ background: #1a1f2e; color: #c8d2de; box-shadow: 0 4px 16px rgba(0,0,0,.28), 0 1px 4px rgba(0,0,0,.18); transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease, color 200ms ease; padding: 0; outline: none; -webkit-tap-highlight-color: transparent; } #theme-toggle-btn:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(0,0,0,.38), 0 2px 6px rgba(0,0,0,.22); } #theme-toggle-btn:active { transform: scale(0.95); } #theme-toggle-btn:focus-visible { outline: 2px solid #337a1a; outline-offset: 3px; } #theme-toggle-btn svg { width: 20px; height: 20px; display: block; flex-shrink: 0; } /* Dark mode: botón claro con icono sol */ [data-theme="dark"] #theme-toggle-btn { background: #dde2e8; color: #0e1117; box-shadow: 0 4px 16px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.35); } [data-theme="dark"] #theme-toggle-btn:hover { box-shadow: 0 6px 24px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.45); }