/* ============================================================ WALATICKETS · REDISEÑO "DIRECCIÓN A" — CSS global Todo scoped bajo .wala-redesign para no afectar a vistas no rediseñadas. Se carga desde layouts (home, home-no-slider) cuando Session::get('redesign') está activo. El toggle vive en SetRedesign middleware (?new=1 / ?new=0). Para retirar: borrar este archivo + el @if en los layouts + middleware SetRedesign + new_directly.blade.php + ticket-card-new.blade.php. ============================================================ */ /* Variables del rediseño en :root para que estén disponibles también FUERA del wrapper .wala-redesign (header, footer, partials globales). Solo se cargan cuando Session::get('redesign'), así que no contaminan nada cuando el rediseño está apagado. Todas con prefijo --wala-* para evitar choques con cualquier var de terceros. */ :root { --wala-ink: #16181d; --wala-ink-2: #4b4f5a; --wala-ink-3: #8a8d96; --wala-border: #ececee; --wala-border-strong: #dcdde0; --wala-surface: #ffffff; --wala-surface-2: #f7f7f8; --wala-brand: #5143d9; --wala-brand-soft: #eeecfb; /* Gradient unificado para los heros (home, blog, lookup, explore, offers, contact, login...). Definido en variables para que el dark mode pueda redefinir los stops sin reescribir cada selector. */ --wala-hero-glow-1: rgba(81, 67, 217, 0.10); --wala-hero-glow-2: rgba(251, 196, 145, 0.18); --wala-hero-bg: radial-gradient(circle at 18% 22%, var(--wala-hero-glow-1) 0%, transparent 45%), radial-gradient(circle at 82% 60%, var(--wala-hero-glow-2) 0%, transparent 45%), var(--wala-surface-2); } /* DARK MODE — swap de paleta cuando Bootstrap pone data-bs-theme="dark" en . El theme-selector vive en partials/theme-selector.blade.php; toda regla CSS del rediseño que use var(--wala-*) hereda automáticamente este swap. Para overrides específicos (gradientes, tonos hardcoded) ver al final del archivo. */ [data-bs-theme="dark"] { --wala-ink: #f4f4f5; --wala-ink-2: #b5b7c0; --wala-ink-3: #7c7f8a; --wala-border: #2a2c35; --wala-border-strong: #3a3c46; --wala-surface: #17181d; --wala-surface-2: #1d1f26; --wala-brand: #6e60ee; --wala-brand-soft: #1c1a33; /* Hero gradient en dark — el naranja-arena se ve fatal sobre fondo oscuro, lo cambiamos a un dorado muy sutil. El brand sube de opacidad porque sobre fondo oscuro las opacidades bajas pierden visibilidad. */ --wala-hero-glow-1: rgba(110, 96, 238, 0.20); --wala-hero-glow-2: rgba(251, 191, 36, 0.06); } .wala-redesign { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: -0.005em; color: var(--wala-ink); } .wala-redesign h1, .wala-redesign h2, .wala-redesign h3, .wala-redesign h4, .wala-redesign h5, .wala-redesign h6 { font-family: inherit; letter-spacing: -0.01em; color: var(--wala-ink); } /* Reset del padding global de
(la plantilla aplica 3.5rem / 2.8rem). Cada section custom (.wala-hero-section, .wala-title-block, .wala-section, .wala-related) define su propio padding/margin. */ .wala-redesign section { padding-top: 0; padding-bottom: 0; } /* ============================================================ HEADER — Dirección A (single sticky bar) Sustituye al partials.header. Markup en partials/header-new.blade.php. ============================================================ */ .wala-header { position: sticky; top: 0; z-index: 1030; background: var(--wala-surface); border-bottom: 1px solid var(--wala-border-strong); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; } .wala-header .navbar { padding-top: 10px; padding-bottom: 10px; } .wala-header .container { gap: 20px; } .wala-header-logo { max-height: 50px; width: auto; display: block; } /* Nav items — texto, sin iconos, hover sutil */ .wala-header-nav { gap: 4px; } .wala-header-nav-link { color: var(--wala-ink-2) !important; font-size: 14px !important; font-weight: 500 !important; padding: 8px 10px !important; border-radius: 8px; position: relative; white-space: nowrap; transition: color 0.15s ease, background 0.15s ease; } .wala-header-nav-link:hover, .wala-header-nav-link:focus { color: var(--wala-ink) !important; background: var(--wala-surface-2); } /* HOT badge — flotante sobre el texto "Ofertas", no sobre el link entero, para que en mobile (link full-width) no se vaya al borde derecho. */ .wala-header-offers-wrap { position: relative; display: inline-block; } .wala-header-badge { position: absolute; top: -7px; right: -22px; background: var(--wala-brand); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 5px; border-radius: 4px; line-height: 1; pointer-events: none; z-index: 10; } /* Search inline */ .wala-header-search { position: relative; display: flex; align-items: center; gap: 8px; border: 1px solid var(--wala-border-strong); border-radius: 999px; padding: 7px 14px; flex: 0 0 280px; /* lock width: ni crece ni se estira */ max-width: 280px; background: var(--wala-surface); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .wala-header-search:focus-within { border-color: var(--wala-ink); box-shadow: 0 0 0 3px rgba(22,24,29,0.06); } .wala-header-search-icon { color: var(--wala-ink-3); font-size: 15px; } .wala-header-search-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 13px; color: var(--wala-ink); padding: 0; } .wala-header-search-input::placeholder { color: var(--wala-ink-3); } .wala-header-search-suggestions { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--wala-surface); border: 1px solid var(--wala-border); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); max-height: 320px; overflow-y: auto; z-index: 1040; margin: 0; padding: 4px; } /* En menos de lg, el form se apila centrado en el menú colapsado */ @media (max-width: 991.98px) { .wala-header-search { flex: 0 0 100%; max-width: 360px; width: 100%; margin: 14px auto; } } /* Acciones derechas — NO permitir wrap, los items deben caber en una línea */ .wala-header-actions { flex-wrap: nowrap; flex-shrink: 0; } .wala-header-actions > * { flex-shrink: 0; } /* Separador visual " · " entre bloques (solo mobile) */ .wala-header-sep { color: var(--wala-ink-3); font-weight: 500; font-size: 16px; line-height: 1; user-select: none; pointer-events: none; } /* Spacer flex que empuja Mi cuenta a la derecha (solo mobile) */ .wala-header-spacer { flex: 1 1 auto; } .wala-header-icon-btn { background: transparent !important; border: 0 !important; color: var(--wala-ink-2) !important; padding: 6px 8px !important; border-radius: 8px; font-size: 13px; } .wala-header-icon-btn:hover, .wala-header-icon-btn:focus, .wala-header-icon-btn[aria-expanded="true"] { background: var(--wala-surface-2) !important; color: var(--wala-ink) !important; } /* Eliminar la flechita default de Bootstrap dropdown-toggle en estos botones */ .wala-header-icon-btn.dropdown-toggle::after { display: none; } .wala-header-flag { width: 22px; height: 22px; } .wala-header-flag-sm { width: 22px; height: 22px; } .wala-header-globe { width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--wala-border); background: var(--wala-surface-2); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--wala-ink-2); } .wala-header-globe-sm { width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--wala-border); background: var(--wala-surface-2); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--wala-ink-2); } .wala-header-currency-symbol { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--wala-border); background: var(--wala-surface); color: var(--wala-ink); font-weight: 600; font-size: 12px; } .wala-header-currency-symbol-sm { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--wala-border); background: var(--wala-surface); color: var(--wala-ink); font-weight: 600; font-size: 11px; } /* Idioma + Moneda combinados — botón texto plano, sin caja ni flecha */ .wala-header-locale-btn { background: transparent; border: 0; color: var(--wala-ink-2); padding: 6px 8px; font-size: 14px; line-height: 1; cursor: pointer; border-radius: 8px; transition: color 0.15s ease, background 0.15s ease; } .wala-header-locale-btn i { color: var(--wala-ink-2); font-size: 15px; } .wala-header-locale-btn:hover, .wala-header-locale-btn:focus, .wala-header-locale-btn[aria-expanded="true"] { color: var(--wala-ink); background: var(--wala-surface-2); } .wala-header .wala-header-locale-btn.dropdown-toggle::after, .wala-header .wala-header-locale-btn::after { display: none !important; content: none !important; } .wala-header-locale-panel { width: 320px; max-width: calc(100vw - 32px); border-radius: 14px; overflow: hidden; border: 1px solid var(--wala-border-strong) !important; box-shadow: 0 12px 28px rgba(0,0,0,0.08) !important; } @media (max-width: 991.98px) { .wala-header-locale-panel { width: min(320px, calc(100vw - 32px)); } } .wala-header-locale-section { padding: 12px 12px 8px; } .wala-header-locale-kicker { font-size: 11px; font-weight: 600; color: var(--wala-ink-3); text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 8px 8px; } .wala-header-locale-divider { border-top: 1px solid var(--wala-border); margin: 0; } .wala-header-locale-item { display: flex; padding: 8px 10px; border-radius: 8px; color: var(--wala-ink); text-decoration: none; transition: background 0.12s ease; } .wala-header-locale-item:hover { background: var(--wala-surface-2); color: var(--wala-ink); } .wala-header-locale-item.is-active { background: var(--wala-ink); color: #fff; } .wala-header-locale-item.is-active .small, .wala-header-locale-item.is-active .text-body-secondary { color: rgba(255,255,255,0.85) !important; } .wala-header-locale-check { color: inherit; font-size: 16px; font-weight: bold; } /* Theme selector toggle button */ .wala-header-theme .btn, .wala-header-theme .nav-link, .wala-header-theme button { background: transparent !important; border: 0 !important; color: var(--wala-ink-2) !important; padding: 6px 8px !important; border-radius: 8px; font-size: 14px; } .wala-header-theme .btn:hover, .wala-header-theme button:hover { background: var(--wala-surface-2) !important; color: var(--wala-ink) !important; } /* Cart */ .wala-header-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; color: var(--wala-ink-2); text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .wala-header-cart:hover { background: var(--wala-surface-2); color: var(--wala-ink); } .wala-header-cart i { font-size: 18px; } .wala-header-cart-badge { position: absolute; top: 2px; right: 2px; background: var(--wala-brand); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 5px; border-radius: 999px; border: 2px solid var(--wala-surface); min-width: 18px; text-align: center; } /* Account / Sign in — pill con borde gris */ .wala-header-account { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--wala-border); border-radius: 999px; background: var(--wala-surface); color: var(--wala-ink); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .wala-header-account:hover, .wala-header-account:focus, .wala-header-account[aria-expanded="true"] { border-color: var(--wala-ink); background: var(--wala-surface); color: var(--wala-ink); } .wala-header-account.dropdown-toggle::after { display: none; } .wala-header-account i { font-size: 15px; } /* Demo badge */ .wala-header-demo { background: #fff5b3; color: #16181d; font-weight: 700; font-size: 11px; padding: 4px 8px; border-radius: 4px; text-decoration: none; letter-spacing: 0.04em; } /* Dropdown menus — neutralizar el fondo activo de Bootstrap (azul) */ .wala-header-dropdown-menu .dropdown-item.active, .wala-header-dropdown-menu .dropdown-item:active { background: var(--wala-ink) !important; color: #fff !important; } .wala-header-dropdown-menu .dropdown-item.active .text-body-secondary { color: rgba(255,255,255,0.7) !important; } /* Mobile toggler */ .wala-header-toggler { color: var(--wala-ink) !important; background: transparent !important; } .wala-header-toggler:focus { box-shadow: none; outline: 0; } /* En móvil, el menú colapsado: items en columna, acciones también */ @media (max-width: 991.98px) { .wala-header .navbar-collapse { background: var(--wala-surface); margin-top: 12px; padding: 12px 16px; border-top: 1px solid var(--wala-border); } .wala-header-nav { flex-direction: column; align-items: stretch; } .wala-header-nav-link { padding: 10px 12px !important; } .wala-header-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--wala-border); } } /* HERO MOSAICO */ .wala-redesign .wala-hero-section { padding-top: 16px; } .wala-redesign .wala-hero { position: relative; display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; height: 460px; border-radius: 18px; overflow: hidden; } .wala-redesign .wala-hero-cell { display: block; position: relative; overflow: hidden; background: var(--wala-surface-2); } .wala-redesign .wala-hero-cell-1 { grid-row: span 2; } .wala-redesign .wala-hero-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .wala-redesign .wala-hero-cell:hover img { transform: scale(1.04); } .wala-redesign .wala-hero-all { position: absolute; bottom: 16px; right: 16px; background: var(--wala-surface); border: 1px solid var(--wala-ink); color: var(--wala-ink); font-size: 13px; font-weight: 500; padding: 10px 16px; border-radius: 10px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; text-decoration: none; line-height: 1; } .wala-redesign .wala-hero-all:hover { background: var(--wala-ink); color: var(--wala-surface); } /* TITLE BLOCK */ .wala-redesign .wala-title-block { padding-top: 18px; padding-bottom: 8px; } /* Context banner mobile (step1): aparece tras el wala-title-block en .nav-link { background: var(--wala-ink) !important; color: #fff !important; border-color: var(--wala-ink) !important; } /* En dark, --wala-ink es blanco → el texto blanco sobre fondo blanco no se ve. Forzamos texto oscuro cuando está activo. */ [data-bs-theme="dark"] .wala-redesign #ticketBaseTabs.nav-pills .nav-link.active, [data-bs-theme="dark"] .wala-redesign #ticketBaseTabs.nav-pills .show > .nav-link { color: #0f1014 !important; } /* Sin caja alrededor del listado: las cards de ticket ya tienen su propio borde. */ .wala-redesign .tab-content { border: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; } .wala-redesign .wala-ticket-row { display: grid; grid-template-columns: 180px 1fr auto; gap: 20px; align-items: center; padding: 16px; border: 1px solid var(--wala-border); border-radius: 14px; background: var(--wala-surface); text-decoration: none; color: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .wala-redesign .wala-ticket-row:hover { border-color: var(--wala-ink); box-shadow: 0 6px 24px rgba(22,24,29,0.06); } .wala-redesign .wala-ticket-row:hover .wala-ticket-cta { color: var(--wala-ink); } .wala-redesign .wala-ticket-row:hover .wala-ticket-cta i { transform: translateX(3px); } .wala-redesign .wala-ticket-row--disabled { opacity: 0.55; cursor: not-allowed; } .wala-redesign .wala-ticket-img { position: relative; width: 180px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--wala-surface-2); } .wala-redesign .wala-ticket-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .wala-redesign .wala-ticket-badge { position: absolute; top: 8px; left: 8px; background: var(--wala-brand); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.04em; } .wala-redesign .wala-ticket-body { min-width: 0; } .wala-redesign .wala-ticket-title { margin: 0 0 4px; font-size: 17px; font-weight: 600; color: var(--wala-ink); line-height: 1.3; } .wala-redesign .wala-ticket-desc-wrap { margin: 0 0 8px; } .wala-redesign .wala-ticket-desc { margin: 0; font-size: 13.5px; color: var(--wala-ink-2); line-height: 1.5; } .wala-redesign .wala-ticket-desc--clamp { max-height: calc(1.5em * 3); overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); } .wala-redesign .wala-ticket-desc :first-child { margin-top: 0; } .wala-redesign .wala-ticket-desc :last-child { margin-bottom: 0; } .wala-redesign .wala-ticket-desc-toggle { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12.5px; font-weight: 500; color: var(--wala-brand); cursor: pointer; user-select: none; } .wala-redesign .wala-ticket-desc-toggle:hover { text-decoration: underline; } .wala-redesign .wala-ticket-desc-toggle:focus-visible { outline: 2px solid var(--wala-brand); outline-offset: 2px; border-radius: 2px; } .wala-redesign .wala-ticket-desc-toggle__icon { font-size: 12px; transition: transform 0.15s ease; } .wala-redesign .wala-ticket-desc-toggle__less { display: none; } .wala-redesign .wala-ticket-desc-toggle[aria-expanded="true"] .wala-ticket-desc-toggle__more { display: none; } .wala-redesign .wala-ticket-desc-toggle[aria-expanded="true"] .wala-ticket-desc-toggle__less { display: inline; } .wala-redesign .wala-ticket-desc-toggle[aria-expanded="true"] .wala-ticket-desc-toggle__icon { transform: rotate(180deg); } .wala-redesign .wala-ticket-tags { display: flex; flex-wrap: wrap; gap: 14px; row-gap: 6px; font-size: 12.5px; color: var(--wala-ink-2); } .wala-redesign .wala-ticket-tag { display: inline-flex; align-items: center; gap: 4px; } .wala-redesign .wala-ticket-tag i.bi-check2 { color: #16a34a; font-weight: bold; } .wala-redesign .wala-ticket-tag--cashback i { color: #16a34a; } .wala-redesign .wala-ticket-price { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; } .wala-redesign .wala-ticket-from { font-size: 11px; color: var(--wala-ink-3); text-transform: uppercase; letter-spacing: 0.05em; } .wala-redesign .wala-ticket-amount { font-size: 22px; font-weight: 700; color: var(--wala-ink); line-height: 1; } .wala-redesign .wala-ticket-old { font-size: 13px; color: var(--wala-ink-3); text-decoration: line-through; margin-right: 4px; } .wala-redesign .wala-ticket-cta { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--wala-ink-2); } .wala-redesign .wala-ticket-cta i { transition: transform 0.15s ease; font-size: 14px; } /* MÓVIL: la card se vuelve apilada */ @media (max-width: 575.98px) { .wala-redesign .wala-ticket-row { grid-template-columns: 1fr; gap: 12px; } .wala-redesign .wala-ticket-img { width: 100%; aspect-ratio: 16 / 9; } .wala-redesign .wala-ticket-price { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; text-align: left; border-top: 1px solid var(--wala-border); padding-top: 12px; } .wala-redesign .wala-ticket-cta { margin-top: 0; } } .wala-redesign .wala-ticket-grid { display: grid; gap: 14px; } /* ABOUT / CONDITIONS — restyle suave */ .wala-redesign #section-about, .wala-redesign #section-conditions { color: var(--wala-ink-2); } .wala-redesign #section-about p, .wala-redesign #section-about li { font-size: 15px; line-height: 1.6; } .wala-redesign #section-conditions .btn-link-primary { color: var(--wala-ink) !important; } /* FAQ — single bordered container, +/- toggle */ .wala-redesign .wala-faq { margin-top: 16px; border: 1px solid var(--wala-border); border-radius: 14px; overflow: hidden; background: var(--wala-surface); } .wala-redesign .wala-faq-item { border-bottom: 1px solid var(--wala-border); } .wala-redesign .wala-faq-item:last-child { border-bottom: 0; } .wala-redesign .wala-faq-q { width: 100%; background: transparent; border: 0; padding: 13px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14.5px; font-weight: 500; color: var(--wala-ink); text-align: left; cursor: pointer; } .wala-redesign .wala-faq-q:hover { background: var(--wala-surface-2); } .wala-redesign .wala-faq-q .ic-toggle { flex-shrink: 0; color: var(--wala-ink-3); font-size: 16px; transition: transform 0.2s ease; } .wala-redesign .wala-faq-q[aria-expanded="true"] .ic-toggle { transform: rotate(45deg); } .wala-redesign .wala-faq-a { padding: 10px 18px 10px 18px; font-size: 14px; color: var(--wala-ink-2); line-height: 1.6; } /* REVIEWS */ .wala-redesign .wala-reviews-summary { display: flex; align-items: center; gap: 24px; padding: 18px 22px; border: 1px solid var(--wala-border); border-radius: 14px; margin-bottom: 20px; background: var(--wala-surface); } .wala-redesign .wala-reviews-summary .num { font-size: 38px; font-weight: 700; color: var(--wala-ink); line-height: 1; } .wala-redesign .wala-reviews-summary .out { color: var(--wala-ink-3); font-size: 14px; } .wala-redesign .wala-reviews-summary .count { color: var(--wala-ink-2); font-size: 14px; margin-top: 4px; } .wala-redesign .wala-review-card { border: 1px solid var(--wala-border); border-radius: 12px; padding: 18px; height: 100%; background: var(--wala-surface); } .wala-redesign .wala-review-card .avatar-lg, .wala-redesign .wala-review-card .rounded-circle { background: var(--wala-surface-2) !important; color: var(--wala-ink-2) !important; width: 40px !important; height: 40px !important; } .wala-redesign .wala-review-card .avatar-initials { color: var(--wala-ink-2) !important; font-size: 15px !important; } .wala-redesign .wala-review-card h6 { font-size: 14px; font-weight: 600; } .wala-redesign .wala-review-card .text-body-secondary { color: var(--wala-ink-3) !important; } .wala-redesign .wala-review-card p { font-size: 13.5px; color: var(--wala-ink-2); line-height: 1.55; font-style: normal !important; } /* Reseña larga (sobre todo desde que llevan respuesta): se recorta el cuerpo y se ofrece expandir. El límite va sobre texto + respuesta, no sobre la cabecera, para que nombre y estrellas se vean siempre. .is-clamped lo pone el JS sólo en las que no caben — marca "esta se puede expandir", y no se quita; el estado abierto/cerrado es .is-expanded. Así las reseñas cortas no llevan ni fade ni botón. El alto lo anima jQuery sobre el max-height; este 200px es el valor que lee para saber a dónde volver al contraer. */ .wala-redesign .wala-review-card__body { position: relative; max-height: 200px; overflow: hidden; } .wala-redesign .wala-review-card__body.is-clamped::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--wala-surface) 85%); opacity: 1; transition: opacity 0.2s ease; } .wala-redesign .wala-review-card__body.is-clamped.is-expanded::after { opacity: 0; } @media (prefers-reduced-motion: reduce) { .wala-redesign .wala-review-card__body.is-clamped::after, .wala-redesign .wala-review-card__toggle i { transition: none; } } .wala-redesign .wala-review-card__toggle { margin-top: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font-size: 13px; font-weight: 600; color: var(--wala-ink); cursor: pointer; } .wala-redesign .wala-review-card__toggle:hover { opacity: 0.7; } .wala-redesign .wala-review-card__toggle i { font-size: 11px; transition: transform 0.15s ease; } .wala-redesign .wala-review-card__toggle[aria-expanded="true"] i { transform: rotate(180deg); } /* MAP / TRANSPORT — quitar shadows ruidosos y unificar */ .wala-redesign #section-location > .card, .wala-redesign #section-transport > .card, .wala-redesign #section-location .card, .wala-redesign #section-transport .card { box-shadow: none !important; border: 1px solid var(--wala-border) !important; border-radius: 14px !important; } .wala-redesign #section-location h3, .wala-redesign #section-transport h3 { font-size: 22px; font-weight: 700; margin-bottom: 16px; } /* RELATED — sección "también te puede interesar" de la ficha de compra. Sólo el envoltorio (paddings + h2); el carrusel de dentro es .wala-carousel-*, que es genérico y vive más abajo. */ .wala-redesign .wala-related { padding-top: 8px; padding-bottom: 56px; } .wala-redesign .wala-related h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 22px; } /* CARRUSEL de entities — componente genérico, no atado a ninguna sección. Markup en partials/entity-carousel.blade.php. Reutiliza .wala-home-exp-card (mismo look que "los más vendidos": marco, imagen 4/3, badges, rating, pie de precio); aquí sólo se define el ancho de cada card dentro del track. */ /* Stage = contexto posicional para track + flechas + fade derecha. Hint visual desktop de "hay más a la derecha". En mobile no hace falta — el touch nativo + bleed lateral ya comunican scroll. */ .wala-redesign .wala-carousel-stage { position: relative; } .wala-redesign .wala-carousel-stage::after { content: ''; position: absolute; top: 0; right: 0; bottom: 4px; width: 56px; pointer-events: none; z-index: 1; background: linear-gradient(to right, rgba(255,255,255,0), var(--wala-surface) 85%); } /* top:30% ≈ centro vertical de la imagen 4/3 de la card (no de la card entera, que además crece con el body). */ .wala-redesign .wala-carousel-arrow { position: absolute; top: 30%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: var(--wala-surface); border: 1px solid var(--wala-border); box-shadow: 0 4px 12px rgba(15,16,20,0.12); color: var(--wala-ink); font-size: 18px; display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 2; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; } .wala-redesign .wala-carousel-arrow:hover { background: var(--wala-ink); color: var(--wala-surface); transform: translateY(-50%) scale(1.05); } .wala-redesign .wala-carousel-arrow--prev { left: -8px; } .wala-redesign .wala-carousel-arrow--next { right: -8px; } @media (hover: hover) and (min-width: 768px) { .wala-redesign .wala-carousel-stage:hover .wala-carousel-arrow { display: inline-flex; } } /* Estados de scroll: ocultar flecha cuando no hay más en esa dirección. Si no hay overflow, ambas clases activas → ambas flechas ocultas + fade ocultado. */ .wala-redesign .wala-carousel-stage.is-at-start .wala-carousel-arrow--prev, .wala-redesign .wala-carousel-stage.is-at-end .wala-carousel-arrow--next { display: none; } .wala-redesign .wala-carousel-stage.is-at-end::after { opacity: 0; } @media (max-width: 767.98px) { .wala-redesign .wala-carousel-arrow { display: none; } .wala-redesign .wala-carousel-stage::after { display: none; } } /* Track scroll horizontal: galería de una fila con snap, sin scrollbar visible. En mobile el track se confina al .container (sin bleed) para que la primera card quede alineada con el h2 y haya padding lateral; el margin negativo + padding del scroll-container no re-indentaba bien el primer hijo y las cards se pegaban al borde. En desktop ofrecemos cursor:grab + JS de drag-to-scroll (ratón) — sin JS, overflow-x:auto sólo responde a wheel/touch, no a drag de ratón. */ .wala-redesign .wala-carousel-track { display: flex; gap: 18px; align-items: stretch; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* El padding vertical deja sitio al hover de la card (translateY(-2px) + sombra): con overflow-y:hidden, sin él se recortarían. */ padding: 4px 0 12px; cursor: grab; user-select: none; } .wala-redesign .wala-carousel-track.is-dragging { cursor: grabbing; scroll-snap-type: none; } .wala-redesign .wala-carousel-track.is-dragging a { pointer-events: none; } .wala-redesign .wala-carousel-track::-webkit-scrollbar { display: none; } .wala-redesign .wala-carousel-track .wala-home-exp-card { flex: 0 0 270px; width: 270px; scroll-snap-align: start; } @media (max-width: 767.98px) { .wala-redesign .wala-carousel-track { margin: 0; padding: 4px 0 10px; gap: 14px; cursor: auto; } /* Más estrecha que en desktop, pero sin bajar de ~230px: la card lleva marco, badges y pie de precio y por debajo de eso el texto empieza a romper. */ .wala-redesign .wala-carousel-track .wala-home-exp-card { flex: 0 0 230px; width: 230px; } } /* SIDEBAR D — caja confianza + TOC neutralizado */ .wala-redesign .wala-sidebar { position: sticky; top: 100px; align-self: flex-start; } .wala-redesign .wala-trust-card { border: 1px solid var(--wala-border); border-radius: 14px; background: var(--wala-surface); padding: 22px; margin-bottom: 14px; } .wala-redesign .wala-trust-card .label { font-size: 12px; color: var(--wala-ink-3); text-transform: uppercase; letter-spacing: 0.06em; } .wala-redesign .wala-trust-card .price { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; } .wala-redesign .wala-trust-card .price .amount { font-size: 28px; font-weight: 700; color: var(--wala-ink); } .wala-redesign .wala-trust-card .price .per { font-size: 13px; color: var(--wala-ink-3); } .wala-redesign .wala-trust-cta { display: block; margin-top: 16px; background: var(--wala-brand); color: #fff !important; font-size: 15px; font-weight: 600; padding: 13px 16px; border-radius: 10px; text-align: center; text-decoration: none; transition: filter 0.15s ease, transform 0.15s ease; } .wala-redesign .wala-trust-cta:hover { filter: brightness(0.93); } .wala-redesign .wala-trust-cta:active { transform: translateY(1px); } .wala-redesign .wala-trust-list { margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--wala-border); list-style: none; display: grid; gap: 14px; } .wala-redesign .wala-trust-list li { display: flex; gap: 12px; align-items: flex-start; } .wala-redesign .wala-trust-list .ic { flex-shrink: 0; color: var(--wala-ink-2); font-size: 18px; line-height: 1; margin-top: 1px; } .wala-redesign .wala-trust-list .t { font-size: 13.5px; font-weight: 600; color: var(--wala-ink); line-height: 1.3; } .wala-redesign .wala-trust-list .d { font-size: 12.5px; color: var(--wala-ink-3); margin-top: 2px; } .wala-redesign .wala-toc { border: 1px solid var(--wala-border); border-radius: 14px; background: var(--wala-surface); overflow: hidden; } .wala-redesign .wala-toc h6 { margin: 0; padding: 14px 18px 10px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wala-ink-3); border-bottom: 1px solid var(--wala-border); } .wala-redesign .wala-toc nav { display: block; } .wala-redesign .wala-toc a { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--wala-border); font-size: 13.5px; font-weight: 500; color: var(--wala-ink); text-decoration: none; transition: background 0.15s ease; } .wala-redesign .wala-toc a:last-child { border-bottom: 0; } .wala-redesign .wala-toc a:hover { background: var(--wala-surface-2); } .wala-redesign .wala-toc a .ic { color: var(--wala-ink-3); font-size: 16px; flex-shrink: 0; } .wala-redesign .wala-toc a .chev { margin-left: auto; color: var(--wala-ink-3); font-size: 13px; } /* En móvil/tablet la sidebar no es sticky y se apila debajo del contenido */ @media (max-width: 1199.98px) { .wala-redesign .wala-sidebar { position: static; margin-top: 24px; } } /* Hero responsive: reducir altura en pantallas medianas */ @media (max-width: 991.98px) { .wala-redesign .wala-hero { height: 360px; } } /* ============================================================ HOME — Dirección A Markup: resources/views/home/default-new.blade.php. Toda la home rediseñada vive en este bloque. Para retirarla: borrar este bloque + el partial + el switch en home/default.blade.php. ============================================================ */ /* ---------- Tonos pastel reutilizables (categorías + ofertas) ---------- */ .wala-redesign .wala-tone-sunset { background: #fbe4d3; color: #8a4c27; } .wala-redesign .wala-tone-cool { background: #e3ecf2; color: #4a6075; } .wala-redesign .wala-tone-green { background: #e3efe4; color: #3e5a41; } .wala-redesign .wala-tone-violet { background: #ebe8fb; color: #3f358a; } .wala-redesign .wala-tone-slate { background: #e7e8ec; color: #555866; } .wala-redesign .wala-tone-yellow { background: #fbf0c7; color: #7a6423; } /* ============ HERO ============ */ /* Full-bleed: imagen panorámica del platform como de fondo (rand 1-3 cada request, paridad con el slider antiguo), overlay oscuro y todo el contenido centrado encima. El contenido NO usa --wala-* porque el overlay siempre es oscuro: texto blanco, badge/chips translúcidos, buscador en pill blanco fijo en ambos themes. La pill del buscador se fuerza a colores light con overrides scoped al hero para que en dark mode no pierda el contraste. */ .wala-redesign .wala-home-hero { position: relative; /* Sin overflow:hidden — recortaba el dropdown de sugerencias del autocomplete (position:absolute anclado al .wala-home-search interior). El fondo (-bg) es un con inset:0 + object-fit:cover que llena la caja exacta, así que no necesita clip para contenerse. */ min-height: 580px; display: flex; align-items: center; border-bottom: 1px solid var(--wala-border); } .wala-redesign .wala-home-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; user-select: none; pointer-events: none; } .wala-redesign .wala-home-hero-overlay { position: absolute; inset: 0; z-index: 1; /* Desktop: gradient HORIZONTAL — oscurece solo el lado izquierdo (donde vive el texto), deja la mitad derecha de la foto respirar con sus colores reales. En <992px el overlay pasa a vertical (ver media query). */ background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.45) 35%, rgba(0, 0, 0, 0.10) 60%, rgba(0, 0, 0, 0.00) 80%); } .wala-redesign .wala-home-hero-content { position: relative; z-index: 2; width: 100%; text-align: left; /* Solo padding-block — el padding-x lo aporta .container (Bootstrap), que en mobile es lo que separa el contenido del borde. */ padding-block: 64px; } /* Base — themed (oscuro sobre claro). Sirve para el hero-split que va sobre panel claro/oscuro normal. El full-bleed dormido lo override más abajo a blanco + text-shadow + centrado vía margin auto. */ .wala-redesign .wala-home-hero-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--wala-ink-2); background: var(--wala-surface); border: 1px solid var(--wala-border); padding: 6px 14px; border-radius: 999px; margin-bottom: 22px; font-weight: 500; } .wala-redesign .wala-home-hero-badge i { color: var(--wala-brand); font-size: 13px; } .wala-redesign .wala-home-hero-title { margin: 0 0 16px; max-width: 880px; font-size: 56px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; color: var(--wala-ink); } .wala-redesign .wala-home-hero-sub { margin: 0 0 32px; font-size: 16.5px; color: var(--wala-ink-2); line-height: 1.5; max-width: 600px; } /* Overrides para el full-bleed lateral — texto blanco + text-shadow porque sale sobre overlay oscuro de la imagen. El contenido vive en una columna ~540px alineada a la izquierda (no centrado), por eso el max-width queda apretado y NO usa margin auto. En mobile (<992px) las max-widths se quitan abajo para que el contenido ocupe todo el ancho del container. */ .wala-redesign .wala-home-hero .wala-home-hero-badge { color: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.24); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .wala-redesign .wala-home-hero .wala-home-hero-badge i { color: #fff; } .wala-redesign .wala-home-hero .wala-home-hero-title { max-width: 580px; color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); } .wala-redesign .wala-home-hero .wala-home-hero-sub { max-width: 540px; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3); } /* SEARCH — base (themed via --wala-*; reusada en explore page). Las overrides scoped al hero más abajo lo fuerzan a colores light + sombra fuerte cuando vive sobre la foto. */ .wala-redesign .wala-home-search { background: var(--wala-surface); border: 1px solid var(--wala-border-strong); border-radius: 16px; padding: 6px; display: flex; align-items: stretch; box-shadow: 0 12px 40px -16px rgba(22, 24, 29, 0.18); max-width: 760px; margin: 0 auto; text-align: left; /* relative para anclar el dropdown de sugerencias del autocomplete */ position: relative; } /* Pill del buscador fijado a colores light en el hero (overlay siempre oscuro, independiente del theme). Fuera del hero conserva el comportamiento --wala-*. */ .wala-redesign .wala-home-hero .wala-home-search { background: #fff; border-color: rgba(255, 255, 255, 0.6); box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.45); /* El search base tiene max-width 760 + margin 0 auto (centrado). En el hero lateral lo apretamos a 540 y lo pegamos a la izquierda. */ max-width: 540px; margin: 0; } .wala-redesign .wala-home-hero .wala-home-search-field { border-left-color: #ececee; } .wala-redesign .wala-home-hero .wala-home-search-label { color: #8a8d96; } .wala-redesign .wala-home-hero .wala-home-search-icon { color: #8a8d96; } .wala-redesign .wala-home-hero .wala-home-search-input, .wala-redesign .wala-home-hero .wala-home-search-select { color: #16181d; } .wala-redesign .wala-home-hero .wala-home-search-input::placeholder { color: #8a8d96; } .wala-redesign .wala-home-hero .wala-home-search-suggestions { background: #fff; border-color: #ececee; } .wala-redesign .wala-home-hero .wala-home-search-suggestions li { color: #16181d; } .wala-redesign .wala-home-hero .wala-home-search-suggestions li:hover { background: #f7f7f8; } .wala-redesign .wala-home-hero .wala-home-search-suggestions li small { color: #8a8d96 !important; } /* Dropdown de sugerencias (autocomplete) — usado por hero home y hero explore. Se ancla al .wala-home-search (que está relative) y ocupa todo su ancho. */ .wala-redesign .wala-home-search-suggestions { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50; margin: 0; padding: 6px; list-style: none; background: var(--wala-surface); border: 1px solid var(--wala-border); border-radius: 12px; max-height: 420px; overflow-y: auto; box-shadow: 0 16px 40px -12px rgba(22, 24, 29, 0.2); } .wala-redesign .wala-home-search-suggestions li { border-radius: 8px; color: var(--wala-ink); font-size: 14px; } .wala-redesign .wala-home-search-suggestions li:hover { background: var(--wala-surface-2); } .wala-redesign .wala-home-search-suggestions li small { color: var(--wala-ink-3) !important; } .wala-redesign .wala-home-search-suggestions li i.text-primary { color: var(--wala-brand) !important; } .wala-redesign .wala-home-search-field { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 16px; border-left: 1px solid var(--wala-border); min-width: 0; cursor: text; margin: 0; } .wala-redesign .wala-home-search-field--select { cursor: pointer; } .wala-redesign .wala-home-search-field:first-child { border-left: 0; } .wala-redesign .wala-home-search-label { font-size: 11px; font-weight: 600; color: var(--wala-ink-3); text-transform: uppercase; letter-spacing: 0.06em; line-height: 1; user-select: none; } .wala-redesign .wala-home-search-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .wala-redesign .wala-home-search-icon { color: var(--wala-ink-3); font-size: 16px; flex-shrink: 0; } .wala-redesign .wala-home-search-input, .wala-redesign .wala-home-search-select { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 14px; color: var(--wala-ink); padding: 0; line-height: 1.3; appearance: none; -webkit-appearance: none; cursor: pointer; } .wala-redesign .wala-home-search-input { cursor: text; } .wala-redesign .wala-home-search-input::placeholder { color: var(--wala-ink-3); } .wala-redesign .wala-home-search-select { padding-right: 18px; background-image: none; } .wala-redesign .wala-home-search-cta { flex-shrink: 0; padding: 0 24px; background: var(--wala-brand); color: #fff; border: 0; border-radius: 12px; font-size: 14.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: filter 0.15s ease, transform 0.15s ease; } .wala-redesign .wala-home-search-cta:hover { filter: brightness(0.93); } .wala-redesign .wala-home-search-cta:active { transform: translateY(1px); } .wala-redesign .wala-home-search-cta i { font-size: 14px; } /* TRENDING chips — base themed. Sirve para hero-split (van sobre el panel blanco/oscuro normal). El full-bleed los override más abajo a translúcidos blancos cuando está activo. */ .wala-redesign .wala-home-trending { margin-top: 22px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .wala-redesign .wala-home-trending-label { font-size: 12.5px; color: var(--wala-ink-3); margin-right: 4px; text-transform: lowercase; } .wala-redesign .wala-home-trending-chip { font-size: 13px; padding: 6px 12px; border-radius: 999px; background: var(--wala-surface); border: 1px solid var(--wala-border); color: var(--wala-ink-2); text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease; } .wala-redesign .wala-home-trending-chip:hover { border-color: var(--wala-ink); color: var(--wala-ink); } /* Overrides dentro del full-bleed (lateral): chips translúcidos blancos sobre la foto, alineados a la izquierda y constreñidos al ancho del bloque texto. */ .wala-redesign .wala-home-hero .wala-home-trending { justify-content: flex-start; max-width: 540px; } .wala-redesign .wala-home-hero .wala-home-trending-label { color: rgba(255, 255, 255, 0.78); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); } .wala-redesign .wala-home-hero .wala-home-trending-chip { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .wala-redesign .wala-home-hero .wala-home-trending-chip:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.45); color: #fff; } /* RESPONSIVE — en <992px no hay sitio para lateralizar (ya no respira la imagen al lado), así que el overlay vuelve a vertical (top→bottom) y las max-widths del texto se quitan para que ocupe todo el ancho del container. Texto sigue alineado a la izquierda (consistencia con el desktop). */ @media (max-width: 991.98px) { .wala-redesign .wala-home-hero { min-height: 480px; } .wala-redesign .wala-home-hero-overlay { background: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.30) 45%, rgba(0, 0, 0, 0.55) 100%); } .wala-redesign .wala-home-hero-content { padding-block: 40px; } .wala-redesign .wala-home-hero-badge { margin-bottom: 16px; } .wala-redesign .wala-home-hero-title { font-size: 36px; margin-bottom: 14px; } .wala-redesign .wala-home-hero .wala-home-hero-title { max-width: none; } .wala-redesign .wala-home-hero-sub { font-size: 14.5px; margin-bottom: 24px; } .wala-redesign .wala-home-hero .wala-home-hero-sub { max-width: none; } .wala-redesign .wala-home-hero .wala-home-search { max-width: none; } .wala-redesign .wala-home-hero .wala-home-trending { max-width: none; } .wala-redesign .wala-home-search { flex-direction: column; padding: 4px; border-radius: 14px; } .wala-redesign .wala-home-search-field { border-left: 0; border-top: 1px solid var(--wala-border); padding: 12px 14px; } .wala-redesign .wala-home-hero .wala-home-search-field { border-top-color: #ececee; } .wala-redesign .wala-home-search-field:first-child { border-top: 0; } .wala-redesign .wala-home-search-cta { margin-top: 4px; padding: 14px; width: 100%; justify-content: center; border-radius: 10px; } } @media (max-width: 575.98px) { /* .wala-redesign .wala-home-hero { min-height: 420px; } */ .wala-redesign .wala-home-hero-title { font-size: 28px; } .wala-redesign .wala-home-hero-sub { font-size: 13.5px; margin-bottom: 20px; } } /* Mobile-only (<768): hero ultra-compacto. Quitamos badge, segundo campo del buscador (Dónde) + botón submit, y los chips de tendencias. Queda H1 + sub + un único input de autocomplete (Enter envía al /enclosures/explore o el tap en una sugerencia navega directo). Además, pegamos el contenido al bottom para que la mitad superior del hero deje respirar la foto, y el overlay pasa a "oscuro abajo → transparente arriba" para legibilidad bajo el texto sin oscurecer la zona donde se ve la imagen. Scoped a .wala-home-hero para no tocar el .wala-home-search del explore page. */ @media (max-width: 767.98px) { .wala-redesign .wala-home-hero { align-items: flex-end; } .wala-redesign .wala-home-hero-overlay { background: linear-gradient(0deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.45) 30%, rgba(0, 0, 0, 0.10) 65%, rgba(0, 0, 0, 0.00) 100%); } .wala-redesign .wala-home-hero .wala-home-hero-badge { display: none; } .wala-redesign .wala-home-hero .wala-home-search-field--select { display: none; } .wala-redesign .wala-home-hero .wala-home-search-cta { display: none; } .wala-redesign .wala-home-hero .wala-home-search-label { display: none; } .wala-redesign .wala-home-hero .wala-home-trending { display: none; } } /* ============ INTRO (texto SEO desplazado del hero) ============ Párrafo descriptivo entre Trust Bar y Categorías que carga los keywords "atracciones / experiencias / ciudades / reserva al instante". */ .wala-redesign .wala-home-intro { padding: 32px 0; border-bottom: 1px solid var(--wala-border); background: var(--wala-surface); } .wala-redesign .wala-home-intro-text { margin: 0 auto; max-width: 760px; text-align: center; font-size: 15.5px; color: var(--wala-ink-2); line-height: 1.6; } @media (max-width: 991.98px) { .wala-redesign .wala-home-intro { padding: 24px 0; } .wala-redesign .wala-home-intro-text { font-size: 14.5px; text-align: left; } } /* ============ HERO B — SPLIT (active) ============ */ /* Layout 50/50 desktop: text panel a la izquierda + imagen panorámica del platform a la derecha (slider1/2/3 random) con badge "social proof" flotante (avatares reales de las 3 entities trending + métrica). El padding-left del text panel se calcula con calc((100vw - 1320px)/2) para que el H1/badge/etc. caigan en el mismo eje vertical que el contenido del Trust Bar / Categorías de abajo (que viven dentro de .container). En <992px se apila: imagen 280px arriba, texto debajo. */ .wala-redesign .wala-home-hero-split { position: relative; border-bottom: 1px solid var(--wala-border); background: var(--wala-surface); overflow: hidden; } .wala-redesign .wala-home-hero-split-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 620px; } .wala-redesign .wala-home-hero-split-text { padding-block: 80px; padding-left: max(24px, calc((100vw - 1320px) / 2 + 12px)); padding-right: 56px; display: flex; flex-direction: column; justify-content: center; min-width: 0; /* Mismo gradient sutil del hero original (radial glows brand + cálido sobre --wala-surface-2). Las posiciones de los glows están al 18%/82% — al contenerlas en el panel (no en la section) se ven ambas dentro del lado izquierdo, en vez de quedar la segunda escondida bajo la imagen. */ background: var(--wala-hero-bg); } .wala-redesign .wala-home-hero-split-image { position: relative; overflow: hidden; background: var(--wala-surface-2); } .wala-redesign .wala-home-hero-split-image > img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; } /* El panel del split es column-flex: el badge inline-flex se estiraría al ancho del panel sin align-self. La base de badge/title/sub ya es themed (oscuro sobre claro), no hace falta override de color. */ .wala-redesign .wala-home-hero-split .wala-home-hero-badge { align-self: flex-start; } .wala-redesign .wala-home-hero-split .wala-home-hero-title { font-size: 56px; line-height: 1.04; max-width: 540px; } .wala-redesign .wala-home-hero-split .wala-home-hero-sub { margin: 0 0 32px; max-width: 480px; } .wala-redesign .wala-home-hero-split .wala-home-search { margin: 0; max-width: 540px; } .wala-redesign .wala-home-hero-split .wala-home-trending { justify-content: flex-start; } /* Floating social-proof badge (bottom-left de la imagen): 3 thumbs reales de las top entities + título "Lo más vendido" y métrica "+X experiencias". */ .wala-redesign .wala-home-hero-split-social { position: absolute; bottom: 28px; left: 28px; background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 12px 18px 12px 12px; border-radius: 14px; display: inline-flex; align-items: center; gap: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); z-index: 2; } .wala-redesign .wala-home-hero-split-social-avatars { display: flex; flex-shrink: 0; } .wala-redesign .wala-home-hero-split-social-avatar { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; background: #f4f4f5; } .wala-redesign .wala-home-hero-split-social-avatar + .wala-home-hero-split-social-avatar { margin-left: -10px; } .wala-redesign .wala-home-hero-split-social-text { line-height: 1.2; } .wala-redesign .wala-home-hero-split-social-t { font-size: 13px; font-weight: 600; color: #16181d; /* fijo dark — el pill es siempre blanco sobre la imagen */ } .wala-redesign .wala-home-hero-split-social-d { font-size: 11.5px; color: #4b4f5a; margin-top: 3px; } @media (max-width: 991.98px) { .wala-redesign .wala-home-hero-split-grid { grid-template-columns: 1fr; min-height: 0; } .wala-redesign .wala-home-hero-split-image { height: 280px; } .wala-redesign .wala-home-hero-split-text { padding: 28px 16px 36px; } .wala-redesign .wala-home-hero-split .wala-home-hero-title { font-size: 36px; max-width: none; } .wala-redesign .wala-home-hero-split .wala-home-hero-sub { font-size: 14.5px; margin-bottom: 24px; max-width: none; } .wala-redesign .wala-home-hero-split .wala-home-search { max-width: none; } .wala-redesign .wala-home-hero-split-social { bottom: 14px; left: 14px; padding: 8px 14px 8px 8px; gap: 10px; border-radius: 12px; } .wala-redesign .wala-home-hero-split-social-avatar { width: 28px; height: 28px; } .wala-redesign .wala-home-hero-split-social-avatar + .wala-home-hero-split-social-avatar { margin-left: -8px; } .wala-redesign .wala-home-hero-split-social-t { font-size: 12px; } .wala-redesign .wala-home-hero-split-social-d { font-size: 10.5px; } } @media (max-width: 575.98px) { .wala-redesign .wala-home-hero-split-image { height: 220px; } .wala-redesign .wala-home-hero-split .wala-home-hero-title { font-size: 30px; } } /* ============ TRUST BAR ============ */ .wala-redesign .wala-home-trust { border-bottom: 1px solid var(--wala-border); padding: 22px 0; background: var(--wala-surface); } .wala-redesign .wala-home-trust-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .wala-redesign .wala-home-trust-item { display: flex; align-items: flex-start; gap: 12px; } .wala-redesign .wala-home-trust-icon { color: var(--wala-ink); font-size: 18px; flex-shrink: 0; margin-top: 2px; } .wala-redesign .wala-home-trust-icon--accent { color: #16a34a; } .wala-redesign .wala-home-trust-t { font-size: 13.5px; font-weight: 600; color: var(--wala-ink); line-height: 1.3; } .wala-redesign .wala-home-trust-d { font-size: 12px; color: var(--wala-ink-3); margin-top: 3px; line-height: 1.4; } @media (max-width: 991.98px) { .wala-redesign .wala-home-trust-grid { grid-template-columns: 1fr 1fr; gap: 18px 24px; } } @media (max-width: 480px) { .wala-redesign .wala-home-trust-grid { grid-template-columns: 1fr; } } /* ============ SECTION HEADER (compartido) ============ */ .wala-redesign .wala-home-section { padding: 48px 0 16px; } .wala-redesign .wala-home-section--top { padding-top: 56px; } .wala-redesign .wala-home-section:last-of-type { padding-bottom: 16px; } .wala-redesign .wala-home-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; background-color: transparent !important; } .wala-redesign .wala-home-section-head--centered { justify-content: center; text-align: center; } .wala-redesign .wala-home-section-kicker { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wala-brand); margin-bottom: 6px; } .wala-redesign .wala-home-section-title { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--wala-ink); text-transform: none; } .wala-redesign .wala-home-section-sub { margin: 8px 0 0; font-size: 15px; color: var(--wala-ink-2); max-width: 560px; line-height: 1.5; } .wala-redesign .wala-home-section-link { font-size: 13.5px; color: var(--wala-ink); text-decoration: none; font-weight: 500; border-bottom: 1.5px solid var(--wala-ink); padding-bottom: 1px; display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; white-space: nowrap; transition: opacity 0.15s ease; } .wala-redesign .wala-home-section-link:hover { opacity: 0.7; color: var(--wala-ink); } .wala-redesign .wala-home-section-link i { font-size: 13px; transition: transform 0.15s ease; } .wala-redesign .wala-home-section-link:hover i { transform: translateX(3px); } @media (max-width: 767.98px) { .wala-redesign .wala-home-section { padding: 32px 0 8px; } .wala-redesign .wala-home-section-head { flex-direction: column; align-items: flex-start; gap: 10px; } .wala-redesign .wala-home-section-title { font-size: 24px; } .wala-redesign .wala-home-section-sub { font-size: 14px; } } /* ============ CATEGORÍAS ============ */ .wala-redesign .wala-home-cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } .wala-redesign .wala-home-cat-card { display: block; text-decoration: none; color: inherit; padding: 18px; background: var(--wala-surface); border: 1px solid var(--wala-border); border-radius: 14px; transition: border-color 0.15s ease, transform 0.15s ease; } .wala-redesign .wala-home-cat-card:hover { border-color: var(--wala-ink); transform: translateY(-2px); color: inherit; } .wala-redesign .wala-home-cat-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 12px; } .wala-redesign .wala-home-cat-icon--sunset { background: #fbe4d3; color: #8a4c27; } .wala-redesign .wala-home-cat-icon--cool { background: #e3ecf2; color: #4a6075; } .wala-redesign .wala-home-cat-icon--green { background: #e3efe4; color: #3e5a41; } .wala-redesign .wala-home-cat-icon--violet { background: #ebe8fb; color: #3f358a; } .wala-redesign .wala-home-cat-icon--slate { background: #e7e8ec; color: #555866; } .wala-redesign .wala-home-cat-icon--yellow { background: #fbf0c7; color: #7a6423; } .wala-redesign .wala-home-cat-name { font-size: 14.5px; font-weight: 600; color: var(--wala-ink); line-height: 1.2; } .wala-redesign .wala-home-cat-meta { font-size: 12px; color: var(--wala-ink-3); margin-top: 4px; } @media (max-width: 1199.98px) { .wala-redesign .wala-home-cat-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 575.98px) { .wala-redesign .wala-home-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } } /* ============ TOP EXPERIENCES ============ */ .wala-redesign .wala-home-exp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .wala-redesign .wala-home-exp-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; border: 1px solid var(--wala-border); border-radius: 14px; background: var(--wala-surface); overflow: hidden; transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .wala-redesign .wala-home-exp-card:hover { border-color: var(--wala-ink); transform: translateY(-2px); box-shadow: 0 12px 28px -16px rgba(22, 24, 29, 0.15); color: inherit; } .wala-redesign .wala-home-exp-img { position: relative; width: 100%; aspect-ratio: 4 / 3; background: var(--wala-surface-2); overflow: hidden; } .wala-redesign .wala-home-exp-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .wala-redesign .wala-home-exp-card:hover .wala-home-exp-img img { transform: scale(1.04); } /* Entities sin imagen (p.ej. las vinculadas a un post del blog). */ .wala-redesign .wala-home-exp-img__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 30px; } .wala-redesign .wala-home-exp-badge { position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 6px; color: #fff; letter-spacing: 0.02em; } .wala-redesign .wala-home-exp-badge--offer { background: #16a34a; } .wala-redesign .wala-home-exp-badge--top { background: #D4453E; } /* Wrapper para apilar varios badges (offer + top) sin superponerlos. */ .wala-redesign .wala-home-exp-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: row; gap: 6px; z-index: 1; } .wala-redesign .wala-home-exp-badges .wala-home-exp-badge { position: static; align-self: flex-start; } .wala-redesign .wala-home-exp-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .wala-redesign .wala-home-exp-cat { font-size: 11px; color: var(--wala-ink-3); text-transform: uppercase; letter-spacing: 0.05em; } .wala-redesign .wala-home-exp-title { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--wala-ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .wala-redesign .wala-home-exp-rating { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--wala-ink-2); } .wala-redesign .wala-home-exp-rating i { color: #f5a524; font-size: 12px; } .wala-redesign .wala-home-exp-rating strong { color: var(--wala-ink); font-weight: 600; } .wala-redesign .wala-home-exp-reviews { color: var(--wala-ink-3); } .wala-redesign .wala-home-exp-meta { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--wala-ink-3); min-width: 0; } .wala-redesign .wala-home-exp-meta i { flex-shrink: 0; } .wala-redesign .wala-home-exp-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .wala-redesign .wala-home-exp-foot { padding-top: 10px; margin-top: auto; border-top: 1px solid var(--wala-border); text-align: right; line-height: 1.1; } .wala-redesign .wala-home-exp-from { font-size: 10.5px; color: var(--wala-ink-3); text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 2px; } .wala-redesign .wala-home-exp-amount { font-size: 19px; font-weight: 700; color: var(--wala-ink); } @media (max-width: 991.98px) { .wala-redesign .wala-home-exp-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } } @media (max-width: 480px) { .wala-redesign .wala-home-exp-grid { grid-template-columns: 1fr; } } /* ============ DESTINATIONS (cards verticales 4:5) ============ */ .wala-redesign .wala-home-dests-section { background: var(--wala-surface-2); margin-top: 16px; padding-top: 56px; padding-bottom: 56px; border-top: 1px solid var(--wala-border); border-bottom: 1px solid var(--wala-border); } .wala-redesign .wala-home-dest-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } .wala-redesign .wala-home-dest-card { display: block; text-decoration: none; color: inherit; background: var(--wala-surface); border: 1px solid var(--wala-border); border-radius: 14px; overflow: hidden; transition: transform 0.15s ease, border-color 0.15s ease; } .wala-redesign .wala-home-dest-card:hover { transform: translateY(-3px); border-color: var(--wala-ink); color: inherit; } .wala-redesign .wala-home-dest-img { width: 100%; aspect-ratio: 4 / 5; background: var(--wala-surface-2); overflow: hidden; } .wala-redesign .wala-home-dest-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .wala-redesign .wala-home-dest-card:hover .wala-home-dest-img img { transform: scale(1.05); } .wala-redesign .wala-home-dest-body { padding: 12px; } .wala-redesign .wala-home-dest-name { font-size: 14.5px; font-weight: 600; color: var(--wala-ink); line-height: 1.2; } .wala-redesign .wala-home-dest-meta { font-size: 12px; color: var(--wala-ink-3); margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; } .wala-redesign .wala-home-dest-meta i { font-size: 11px; } @media (max-width: 991.98px) { .wala-redesign .wala-home-dest-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 575.98px) { .wala-redesign .wala-home-dest-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } /* ============ OFERTAS DE LA SEMANA (banner gradiente + mini cards) ============ */ .wala-redesign .wala-home-offers-banner { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--wala-border); background: linear-gradient(135deg, #eeecfb 0%, #fbe4d3 100%); padding: 48px 56px; display: flex; flex-direction: row; align-items: center; gap: 40px; } .wala-redesign .wala-home-offers-text { flex: 1; min-width: 0; } .wala-redesign .wala-home-offers-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #15803d; background: #dcfce7; padding: 5px 11px; border-radius: 999px; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 14px; } .wala-redesign .wala-home-offers-pill i { font-size: 11px; } .wala-redesign .wala-home-offers-title { margin: 0; font-size: 38px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; color: var(--wala-ink); max-width: 520px; } .wala-redesign .wala-home-offers-sub { margin: 12px 0 20px; font-size: 15.5px; color: var(--wala-ink-2); max-width: 480px; line-height: 1.5; } .wala-redesign .wala-home-offers-cta { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; background: var(--wala-ink); color: #fff; border: 0; border-radius: 10px; font-size: 14.5px; font-weight: 600; text-decoration: none; transition: filter 0.15s ease, transform 0.15s ease; } .wala-redesign .wala-home-offers-cta:hover { filter: brightness(1.15); color: #fff; } .wala-redesign .wala-home-offers-cta:active { transform: translateY(1px); } .wala-redesign .wala-home-offers-cta i { font-size: 14px; } .wala-redesign .wala-home-offers-mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 380px; flex-shrink: 0; } .wala-redesign .wala-home-offers-mini { display: flex; align-items: center; gap: 10px; background: var(--wala-surface); border-radius: 12px; padding: 10px; box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.15); text-decoration: none; color: inherit; transition: transform 0.15s ease; min-width: 0; } .wala-redesign .wala-home-offers-mini:hover { transform: translateY(-2px); color: inherit; } .wala-redesign .wala-home-offers-mini-img { width: 48px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--wala-surface-2); flex-shrink: 0; } .wala-redesign .wala-home-offers-mini-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .wala-redesign .wala-home-offers-mini-body { flex: 1; min-width: 0; } .wala-redesign .wala-home-offers-mini-name { font-size: 13px; font-weight: 600; color: var(--wala-ink); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wala-redesign .wala-home-offers-mini-pct { font-size: 12px; color: #16a34a; font-weight: 700; margin-top: 2px; } @media (max-width: 991.98px) { .wala-redesign .wala-home-offers-banner { flex-direction: column; align-items: flex-start; gap: 24px; padding: 28px 24px; } .wala-redesign .wala-home-offers-title { font-size: 26px; } .wala-redesign .wala-home-offers-mini-grid { width: 100%; } } @media (max-width: 480px) { .wala-redesign .wala-home-offers-mini-grid { grid-template-columns: 1fr; } } /* ============ HOW IT WORKS ============ */ .wala-redesign .wala-home-how-section { background: var(--wala-surface-2); margin-top: 16px; padding-top: 56px; /* padding-bottom: 56px; */ border-top: 1px solid var(--wala-border); /* border-bottom: 1px solid var(--wala-border); */ } .wala-redesign .wala-home-how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .wala-redesign .wala-home-how-card { padding: 28px; background: var(--wala-surface); border: 1px solid var(--wala-border); border-radius: 14px; } .wala-redesign .wala-home-how-num { font-size: 13px; font-weight: 600; color: var(--wala-brand); letter-spacing: 0.06em; margin-bottom: 10px; } .wala-redesign .wala-home-how-t { font-size: 18px; font-weight: 700; color: var(--wala-ink); letter-spacing: -0.01em; line-height: 1.3; } .wala-redesign .wala-home-how-d { margin-top: 8px; font-size: 14px; color: var(--wala-ink-2); line-height: 1.5; } @media (max-width: 767.98px) { .wala-redesign .wala-home-how-grid { grid-template-columns: 1fr; gap: 14px; } .wala-redesign .wala-home-how-card { padding: 20px 22px; } } /* ============ NEWSLETTER ============ */ .wala-redesign .wala-home-newsletter { padding: 56px 0 72px; background: var(--wala-surface-2); } .wala-redesign .wala-home-newsletter-card { max-width: 880px; margin: 0 auto; background: var(--wala-surface); border: 1px solid var(--wala-border); border-radius: 18px; padding: 40px 48px; display: flex; flex-direction: row; align-items: center; gap: 36px; } .wala-redesign .wala-home-newsletter-text { flex: 1; min-width: 0; } .wala-redesign .wala-home-newsletter-pill { display: inline-flex; align-items: center; font-size: 11.5px; color: var(--wala-brand); background: #eeecfb; padding: 4px 10px; border-radius: 999px; font-weight: 600; letter-spacing: 0.04em; margin-bottom: 12px; text-transform: uppercase; } .wala-redesign .wala-home-newsletter-title { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--wala-ink); max-width: 420px; } .wala-redesign .wala-home-newsletter-sub { margin-top: 8px; font-size: 14px; color: var(--wala-ink-2); max-width: 420px; line-height: 1.5; } .wala-redesign .wala-home-newsletter-formwrap { width: 360px; flex-shrink: 0; } .wala-redesign .wala-home-newsletter-form { display: flex; flex-direction: column; gap: 12px; background: transparent; border: 0; border-radius: 0; padding: 0; } /* "Pill" antiguo del form: ahora es una fila interna (input + botón). */ .wala-redesign .wala-home-newsletter-row { display: flex; gap: 6px; background: var(--wala-surface-2); border: 1px solid var(--wala-border); border-radius: 12px; padding: 5px; } /* Wrap del recaptcha — solo controla alineación. El widget tiene tamaño fijo (304x78). */ .wala-redesign .wala-home-newsletter-recaptcha { display: flex; justify-content: flex-start; } .wala-redesign .wala-home-newsletter-input { flex: 1; border: 0; outline: 0; background: transparent; padding: 10px 12px; font-size: 14px; color: var(--wala-ink); min-width: 0; } .wala-redesign .wala-home-newsletter-input::placeholder { color: var(--wala-ink-3); } .wala-redesign .wala-home-newsletter-btn { border: 0; background: var(--wala-ink); color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: filter 0.15s ease; } .wala-redesign .wala-home-newsletter-btn:hover { filter: brightness(1.15); } .wala-redesign .wala-home-newsletter-consent { margin-top: 8px; font-size: 11.5px; color: var(--wala-ink-3); } .wala-redesign .wala-home-newsletter-link { color: var(--wala-ink-2); text-decoration: underline; } .wala-redesign .wala-home-newsletter-link:hover { color: var(--wala-ink); } @media (max-width: 767.98px) { .wala-redesign .wala-home-newsletter { padding: 32px 0 48px; } .wala-redesign .wala-home-newsletter-card { flex-direction: column; align-items: stretch; padding: 28px 22px; gap: 20px; } .wala-redesign .wala-home-newsletter-formwrap { width: 100%; } .wala-redesign .wala-home-newsletter-title { font-size: 22px; } } /* ============================================================ DARK MODE — overrides específicos Las variables --wala-* ya rotan arriba con [data-bs-theme="dark"]. Aquí solo lo que NO usa vars: gradientes, tonos pastel hardcoded y combinaciones que pierden contraste al invertir. ============================================================ */ /* HERO en dark: ya no hace falta override aquí, --wala-hero-bg se redefine en [data-bs-theme="dark"] vía --wala-hero-glow-1 / --wala-hero-glow-2. */ /* CATEGORÍAS: tonos pastel light → tonos oscuros con tinte */ [data-bs-theme="dark"] .wala-redesign .wala-home-cat-icon--sunset { background: #3a2b1f; color: #f5c79f; } [data-bs-theme="dark"] .wala-redesign .wala-home-cat-icon--cool { background: #1f2a35; color: #9bbed7; } [data-bs-theme="dark"] .wala-redesign .wala-home-cat-icon--green { background: #1f2e22; color: #8fc99a; } [data-bs-theme="dark"] .wala-redesign .wala-home-cat-icon--violet { background: #25223f; color: #b9b1f0; } [data-bs-theme="dark"] .wala-redesign .wala-home-cat-icon--slate { background: #232530; color: #b8bac4; } [data-bs-theme="dark"] .wala-redesign .wala-home-cat-icon--yellow { background: #332b15; color: #e8cf7a; } /* TOP EXPERIENCES: badge "top" usa --wala-ink (en dark sería gris claro, ilegible sobre fondo claro de la imagen). Mantener fondo oscuro fijo. */ [data-bs-theme="dark"] .wala-redesign .wala-home-exp-badge--top { background: #D4453E; color: #fff; } /* Footer card precio: el border-top va a --wala-border (correcto, hereda). Pero la cabecera "DESDE" es ink-3, que sigue legible. OK. */ /* OFERTAS BANNER: gradiente light (lavanda → crema) se rompe en dark. Versión dark con tonos brand más profundos. */ [data-bs-theme="dark"] .wala-redesign .wala-home-offers-banner { background: linear-gradient(135deg, #1c1a33 0%, #2a2435 60%, #3a2b1f 100%); border-color: var(--wala-border-strong); } /* Pill verde de "Ofertas de la semana" — el verde claro se ve fluo en dark. Versión más muted. */ [data-bs-theme="dark"] .wala-redesign .wala-home-offers-pill { background: rgba(34, 197, 94, 0.15); color: #4ade80; } /* CTA negro sobre banner queda OK (texto blanco), pero subimos contraste */ [data-bs-theme="dark"] .wala-redesign .wala-home-offers-cta { background: #f4f4f5; color: #16181d; } [data-bs-theme="dark"] .wala-redesign .wala-home-offers-cta:hover { background: #fff; color: #16181d; filter: none; } /* Mini cards: fondo blanco fijo en light se ve mal sobre el banner. Heredan --wala-surface ahora (que es #17181d en dark) — ajustamos sombra */ [data-bs-theme="dark"] .wala-redesign .wala-home-offers-mini { box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.5); } [data-bs-theme="dark"] .wala-redesign .wala-home-offers-mini-pct { color: #4ade80; } /* HOW IT WORKS: número en brand purple — en dark queda bien con --wala-brand swap. Las cards heredan vars. Nada que tocar. */ /* NEWSLETTER pill: brand soft → versión oscura (hereda --wala-brand-soft). El color del texto (--wala-brand) se ve más vivo en dark — lo dejamos. */ [data-bs-theme="dark"] .wala-redesign .wala-home-newsletter-pill { background: var(--wala-brand-soft); color: #b9b1f0; } /* Newsletter row (pill input+botón): el surface-2 puede confundirse con el card. Borde más marcado en dark para diferenciar. */ [data-bs-theme="dark"] .wala-redesign .wala-home-newsletter-row { border-color: var(--wala-border-strong); } /* Botón "Suscribirme" en dark: --wala-ink swap lo pondría en blanco con texto blanco. Forzar fondo blanco con texto oscuro. */ [data-bs-theme="dark"] .wala-redesign .wala-home-newsletter-btn { background: #f4f4f5; color: #16181d; } /* TRENDING chips: hover con border ink (que en dark es claro) → bien. Los chips tienen background --wala-surface ahora (oscuro). OK. */ /* TRUST BAR: icono accent verde — algo más vibrante en dark */ [data-bs-theme="dark"] .wala-redesign .wala-home-trust-icon--accent { color: #4ade80; } /* HEADER: hereda --wala-* todo. La única excepción: el HOT badge sobre "Ofertas" y el badge del carrito ya usan --wala-brand, swappean OK. */ /* Cashback banner (partial separado) — vive fuera de wala-redesign, ya tiene su propio styling en general.css. No tocar aquí. */ /* ============================================================ EXPLORE — Dirección A Markup: resources/views/entities/explore-new.blade.php. Reutiliza .wala-home-exp-card (cards) y .wala-breadcrumb / .wala-h1 del rediseño. Lo de aquí es solo lo específico de la página listado: hero compacto, sidebar de filtros, toolbar, paginador y vista lista. ============================================================ */ /* HERO — usa el gradient unificado --wala-hero-bg (ver :root). */ .wala-redesign .wala-explore-hero { background: var(--wala-hero-bg); border-bottom: 1px solid var(--wala-border); padding: 36px 0 40px; } .wala-redesign .wala-explore-hero-inner { max-width: 820px; } .wala-redesign .wala-explore-hero .wala-breadcrumb { margin-bottom: 14px; } .wala-redesign .wala-explore-hero .wala-h1 { font-size: 38px; } .wala-redesign .wala-explore-hero-sub { margin: 12px 0 0; font-size: 15.5px; color: var(--wala-ink-2); max-width: 600px; line-height: 1.5; } /* Buscador del hero — reutilizamos .wala-home-search con la variante --compact: single-field, ocupa todo el ancho del hero, botón con altura natural (no stretched), padding reducido. Pensado para páginas internas donde el resto de filtros viven en el sidebar. */ .wala-redesign .wala-home-search--compact { align-items: center; /* override del stretch heredado */ padding: 4px; border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); max-width: none; /* ocupa el ancho del padre */ margin: 22px 0 0; } .wala-redesign .wala-home-search--compact .wala-home-search-field { /* compact = single-line (sin label arriba): vuelve a row */ flex-direction: row; align-items: center; gap: 8px; padding: 6px 12px; } .wala-redesign .wala-home-search--compact .wala-home-search-input { padding: 6px 0; } .wala-redesign .wala-home-search--compact .wala-home-search-cta { padding: 9px 16px; font-size: 13.5px; border-radius: 10px; } @media (max-width: 767.98px) { .wala-redesign .wala-home-search--compact { padding: 4px; margin-top: 18px; } .wala-redesign .wala-home-search--compact .wala-home-search-field { padding: 6px 10px; } .wala-redesign .wala-home-search--compact .wala-home-search-cta { padding: 9px 14px; } } /* Chips populares debajo del buscador */ .wala-redesign .wala-explore-popular { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .wala-redesign .wala-explore-popular-label { font-size: 12.5px; color: var(--wala-ink-3); margin-right: 4px; } .wala-redesign .wala-explore-popular-chip { font-size: 13px; padding: 6px 12px; border-radius: 999px; background: var(--wala-surface); border: 1px solid var(--wala-border); color: var(--wala-ink-2); text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease; white-space: nowrap; } .wala-redesign .wala-explore-popular-chip:hover { border-color: var(--wala-ink); color: var(--wala-ink); } @media (max-width: 767.98px) { .wala-redesign .wala-explore-hero { padding: 24px 0 28px; } .wala-redesign .wala-explore-hero .wala-h1 { font-size: 28px; } .wala-redesign .wala-explore-hero-sub { font-size: 14.5px; } } /* BODY — grid 260px sidebar + resultados */ .wala-redesign .wala-explore-body { padding-top: 32px; padding-bottom: 64px; } .wala-redesign .wala-explore-layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; } @media (max-width: 1199.98px) { .wala-redesign .wala-explore-body { padding-top: 24px; padding-bottom: 48px; } .wala-redesign .wala-explore-layout { grid-template-columns: 1fr; gap: 0; } } /* SIDEBAR DE FILTROS — sticky en desktop */ .wala-redesign .wala-explore-filters-aside { position: sticky; top: 84px; align-self: start; } @media (max-width: 1199.98px) { .wala-redesign .wala-explore-filters-aside { position: static; } } .wala-redesign .wala-explore-filters { border: 1px solid var(--wala-border); border-radius: 14px; background: var(--wala-surface); padding: 18px; } .wala-redesign .wala-explore-filters-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; } .wala-redesign .wala-explore-filters-head .t { font-size: 14.5px; font-weight: 600; color: var(--wala-ink); } .wala-redesign .wala-explore-filters-head .clear { font-size: 12.5px; color: var(--wala-ink-3); text-decoration: none; cursor: pointer; background: 0; border: 0; padding: 0; } .wala-redesign .wala-explore-filters-head .clear:hover { color: var(--wala-ink); } .wala-redesign .wala-explore-filter-group { padding: 14px 0; border-bottom: 1px solid var(--wala-border); } .wala-redesign .wala-explore-filter-group:last-child { border-bottom: 0; } .wala-redesign .wala-explore-filter-title { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wala-ink); margin-bottom: 10px; } .wala-redesign .wala-explore-filter-title .count { font-size: 11px; color: var(--wala-ink-3); text-transform: none; letter-spacing: 0; font-weight: 500; } /* Lista de checkboxes nativos del filtro */ .wala-redesign .wala-explore-filter-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .wala-redesign .wala-explore-filter-check { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13.5px; color: var(--wala-ink-2); cursor: pointer; margin: 0; } .wala-redesign .wala-explore-filter-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--wala-brand); margin: 0; flex-shrink: 0; } .wala-redesign .wala-explore-filter-check .label { flex: 1; min-width: 0; } .wala-redesign .wala-explore-filter-check .num { font-size: 12px; color: var(--wala-ink-3); } .wala-redesign .wala-explore-filter-check:hover .label { color: var(--wala-ink); } /* Select de ciudades — nativo styled (sin select2 dentro del rediseño). Caret SVG inline para evitar la flecha doble del navegador + Bootstrap. */ .wala-redesign .wala-explore-city-select { width: 100%; appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 1px solid var(--wala-border); border-radius: 10px; background-color: var(--wala-surface); color: var(--wala-ink-2); font-size: 13.5px; padding: 11px 36px 11px 14px; line-height: 1.2; cursor: pointer; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 14px; transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .wala-redesign .wala-explore-city-select:hover { color: var(--wala-ink); border-color: var(--wala-border-strong); } .wala-redesign .wala-explore-city-select:focus { outline: 0; border-color: var(--wala-ink); color: var(--wala-ink); box-shadow: 0 0 0 3px rgba(22,24,29,0.06); } /* Filtro de valoración — fila checkbox + estrellas + label, mismo patrón que el resto de checks del sidebar. */ .wala-redesign .wala-explore-rating-stars { display: inline-flex; align-items: center; gap: 1px; flex-shrink: 0; } .wala-redesign .wala-explore-rating-stars i { font-size: 12px; line-height: 1; } .wala-redesign .wala-explore-rating-stars .on { color: #f5a524; } .wala-redesign .wala-explore-rating-stars .off { color: var(--wala-border-strong); } /* Botones offcanvas mobile (Limpiar / Filtrar) */ .wala-redesign .wala-explore-filters-actions { padding: 14px 16px; display: flex; gap: 8px; border-top: 1px solid var(--wala-border); } .wala-redesign .wala-explore-filters-actions .btn-outline { flex: 1; padding: 11px 14px; border: 1px solid var(--wala-border); background: var(--wala-surface); color: var(--wala-ink); border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; } .wala-redesign .wala-explore-filters-actions .btn-primary { flex: 2; padding: 11px 14px; border: 0; background: var(--wala-brand); color: #fff; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; } /* Offcanvas Bootstrap → herede surface del rediseño */ .wala-redesign .offcanvas { background: var(--wala-surface); color: var(--wala-ink); } .wala-redesign .offcanvas-header { border-bottom: 1px solid var(--wala-border); } .wala-redesign .offcanvas-title { font-size: 16px; font-weight: 600; } /* TOOLBAR — count + sort + view */ .wala-redesign .wala-explore-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .wala-redesign .wala-explore-toolbar-count { font-size: 22px; font-weight: 700; color: var(--wala-ink); letter-spacing: -0.01em; line-height: 1.15; } .wala-redesign .wala-explore-toolbar-sub { font-size: 13px; color: var(--wala-ink-3); margin-top: 2px; } .wala-redesign .wala-explore-toolbar-actions { display: flex; align-items: center; gap: 8px; } /* Pill button reutilizable (sort, mobile filtros) */ .wala-redesign .wala-explore-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--wala-border); border-radius: 999px; background: transparent; color: var(--wala-ink); font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease; } .wala-redesign .wala-explore-pill:hover, .wala-redesign .wala-explore-pill[aria-expanded="true"] { border-color: var(--wala-ink); color: var(--wala-ink); } /* Bootstrap añade su propia ::after con caret — la matamos para no duplicar la flecha (ya pintamos un dentro del botón). */ .wala-redesign .wala-explore-pill.dropdown-toggle::after, .wala-redesign .wala-explore-pill::after { display: none !important; content: none !important; } .wala-redesign .wala-explore-pill .pill-badge { background: var(--wala-ink); color: var(--wala-surface); font-size: 11px; padding: 0 6px; border-radius: 999px; min-width: 18px; text-align: center; line-height: 18px; } /* Dropdown de orden */ .wala-redesign .wala-explore-sort-menu { border: 1px solid var(--wala-border-strong) !important; border-radius: 12px !important; box-shadow: 0 12px 28px rgba(0,0,0,0.08) !important; padding: 6px; min-width: 200px; } .wala-redesign .wala-explore-sort-menu .dropdown-item { border-radius: 8px; font-size: 13.5px; color: var(--wala-ink); padding: 8px 10px; display: flex; align-items: center; gap: 8px; } .wala-redesign .wala-explore-sort-menu .dropdown-item:hover { background: var(--wala-surface-2); color: var(--wala-ink); } .wala-redesign .wala-explore-sort-menu .dropdown-item.is-active { background: var(--wala-ink); color: var(--wala-surface); } /* Toggle grid/list */ .wala-redesign .wala-explore-view-toggle { display: inline-flex; border: 1px solid var(--wala-border); border-radius: 999px; overflow: hidden; } .wala-redesign .wala-explore-view-btn { padding: 8px 12px; color: var(--wala-ink-2); background: transparent; border: 0; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; transition: background 0.15s ease, color 0.15s ease; } .wala-redesign .wala-explore-view-btn:hover { color: var(--wala-ink); } .wala-redesign .wala-explore-view-btn.is-active { background: var(--wala-ink); color: var(--wala-surface); } .wala-redesign .wala-explore-view-btn i { font-size: 14px; } /* GRID de resultados — 3 cols desktop / 2 mobile / 1 sm. Reutilizamos .wala-home-exp-card del bloque HOME (mismo look). */ .wala-redesign .wala-explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 991.98px) { .wala-redesign .wala-explore-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } } @media (max-width: 480px) { .wala-redesign .wala-explore-grid { grid-template-columns: 1fr; } } /* VISTA LISTA — modificador horizontal de la card. Sobreescribimos el flex-direction y el aspect-ratio de la imagen. */ .wala-redesign .wala-explore-grid--list { grid-template-columns: 1fr; gap: 14px; } .wala-redesign .wala-home-exp-card--list { flex-direction: row; } .wala-redesign .wala-home-exp-card--list .wala-home-exp-img { width: 240px; flex-shrink: 0; aspect-ratio: 4 / 3; } .wala-redesign .wala-home-exp-card--list .wala-home-exp-body { padding: 18px 20px; } .wala-redesign .wala-home-exp-card--list .wala-home-exp-foot { text-align: right; } @media (max-width: 575.98px) { .wala-redesign .wala-home-exp-card--list { flex-direction: column; } .wala-redesign .wala-home-exp-card--list .wala-home-exp-img { width: 100%; } } /* EMPTY STATE */ .wala-redesign .wala-explore-empty { border: 1px dashed var(--wala-border-strong); border-radius: 14px; background: var(--wala-surface); padding: 56px 24px; text-align: center; } .wala-redesign .wala-explore-empty .ic { font-size: 38px; color: var(--wala-ink-3); display: inline-flex; margin-bottom: 12px; } .wala-redesign .wala-explore-empty .t { font-size: 18px; font-weight: 600; color: var(--wala-ink); margin: 0 0 4px; } .wala-redesign .wala-explore-empty .d { font-size: 14px; color: var(--wala-ink-2); max-width: 460px; margin: 0 auto 16px; line-height: 1.5; } .wala-redesign .wala-explore-empty .reset { display: inline-block; padding: 10px 18px; background: var(--wala-ink); color: var(--wala-surface); border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; } .wala-redesign .wala-explore-empty .reset:hover { filter: brightness(1.1); color: var(--wala-surface); } /* PAGINADOR — neutralizar el bootstrap-5 */ .wala-redesign .wala-explore-pagination { margin-top: 32px; display: flex; justify-content: center; } .wala-redesign .wala-explore-pagination nav { width: auto; } .wala-redesign .wala-explore-pagination .pagination { gap: 6px; margin: 0; } .wala-redesign .wala-explore-pagination .page-item .page-link { min-width: 36px; height: 36px; border-radius: 8px !important; border: 1px solid var(--wala-border); background: transparent; color: var(--wala-ink-2); font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .wala-redesign .wala-explore-pagination .page-item .page-link:hover { border-color: var(--wala-ink); color: var(--wala-ink); background: var(--wala-surface); } .wala-redesign .wala-explore-pagination .page-item.active .page-link { background: var(--wala-ink); color: var(--wala-surface); border-color: var(--wala-ink); } .wala-redesign .wala-explore-pagination .page-item.disabled .page-link { opacity: 0.4; background: transparent; color: var(--wala-ink-3); } /* ============================================================ DARK MODE — overrides explore Las vars rotan automáticamente; aquí solo lo hardcoded. ============================================================ */ [data-bs-theme="dark"] .wala-redesign .wala-explore-empty { background: var(--wala-surface-2); } /* ============================================================ OFERTAS (página /pages/offers) — Dirección A Markup: resources/views/pages/offers-new.blade.php. Reutiliza .wala-home-exp-card / .wala-home-exp-badge--offer (cards), .wala-explore-pagination (paginador) y .wala-explore-empty (vacío). Lo de aquí es solo lo específico: hero con stats, oferta destacada (deal hero) y pills de filtro por recinto. ============================================================ */ /* HERO — usa el gradient unificado --wala-hero-bg + título + pill verde + grid de stats */ .wala-redesign .wala-offers-hero { background: var(--wala-hero-bg); border-bottom: 1px solid var(--wala-border); padding: 36px 0 40px; } .wala-redesign .wala-offers-hero .wala-breadcrumb { margin-bottom: 14px; } .wala-redesign .wala-offers-hero-grid { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .wala-redesign .wala-offers-hero-text { flex: 1 1 420px; min-width: 0; } .wala-redesign .wala-offers-hero-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #15803d; background: #dcfce7; padding: 5px 11px; border-radius: 999px; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 14px; text-transform: uppercase; } .wala-redesign .wala-offers-hero-pill i { font-size: 11px; } .wala-redesign .wala-offers-h1 { font-size: 48px; line-height: 1; } .wala-redesign .wala-offers-hero-sub { margin: 12px 0 0; font-size: 15.5px; color: var(--wala-ink-2); max-width: 540px; line-height: 1.5; } .wala-redesign .wala-offers-stats { display: flex; gap: 32px; flex-shrink: 0; } .wala-redesign .wala-offers-stat .v { font-size: 26px; font-weight: 700; color: var(--wala-ink); letter-spacing: -0.02em; line-height: 1; } .wala-redesign .wala-offers-stat--accent .v { color: #16a34a; } .wala-redesign .wala-offers-stat .l { font-size: 11.5px; color: var(--wala-ink-3); margin-top: 5px; text-transform: uppercase; letter-spacing: 0.06em; } @media (max-width: 767.98px) { .wala-redesign .wala-offers-hero { padding: 24px 0 28px; } .wala-redesign .wala-offers-h1 { font-size: 36px; } .wala-redesign .wala-offers-stats { gap: 20px; padding-top: 4px; } .wala-redesign .wala-offers-stat .v { font-size: 22px; } } /* OFERTA DESTACADA (deal hero) — wide card grid 1.3fr / 1fr. Imagen a la izda, texto + CTA a la dcha. Sin countdown ni precio tachado: la API no los expone. */ .wala-redesign .wala-offers-featured-section { padding: 36px 0 0; } .wala-redesign .wala-offers-featured-kicker { font-size: 11.5px; color: var(--wala-brand); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: 12px; display: inline-flex; align-items: center; gap: 6px; } .wala-redesign .wala-offers-featured-kicker i { font-size: 13px; } .wala-redesign .wala-offers-featured { display: grid; grid-template-columns: 1.3fr 1fr; text-decoration: none; color: inherit; border: 1px solid var(--wala-border); border-radius: 18px; overflow: hidden; background: var(--wala-surface); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .wala-redesign .wala-offers-featured:hover { border-color: var(--wala-ink); color: inherit; box-shadow: 0 16px 36px -20px rgba(0, 0, 0, 0.2); } .wala-redesign .wala-offers-featured-img { position: relative; min-height: 320px; background: var(--wala-surface-2); overflow: hidden; } .wala-redesign .wala-offers-featured-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .wala-redesign .wala-offers-featured:hover .wala-offers-featured-img img { transform: scale(1.04); } .wala-redesign .wala-offers-featured-tag { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 6px; background: var(--wala-ink); color: var(--wala-surface); padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; } .wala-redesign .wala-offers-featured-tag i { font-size: 12px; } .wala-redesign .wala-offers-featured-body { padding: 36px 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; } .wala-redesign .wala-offers-featured-cat { font-size: 11.5px; color: var(--wala-ink-3); text-transform: uppercase; letter-spacing: 0.06em; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; } .wala-redesign .wala-offers-featured-cat .dot { color: var(--wala-border-strong); } .wala-redesign .wala-offers-featured-title { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--wala-ink); } .wala-redesign .wala-offers-featured-desc { margin: 12px 0 0; font-size: 14.5px; color: var(--wala-ink-2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .wala-redesign .wala-offers-featured-foot { padding-top: 20px; border-top: 1px solid var(--wala-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .wala-redesign .wala-offers-featured-price .from { font-size: 11px; color: var(--wala-ink-3); text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 2px; } .wala-redesign .wala-offers-featured-price .amount { font-size: 28px; font-weight: 700; color: var(--wala-ink); letter-spacing: -0.02em; } .wala-redesign .wala-offers-featured-cta { display: inline-flex; align-items: center; gap: 6px; padding: 12px 22px; background: var(--wala-ink); color: var(--wala-surface); border-radius: 10px; font-size: 14.5px; font-weight: 600; } .wala-redesign .wala-offers-featured-cta i { font-size: 15px; } @media (max-width: 991.98px) { .wala-redesign .wala-offers-featured { grid-template-columns: 1fr; } .wala-redesign .wala-offers-featured-img { min-height: 220px; aspect-ratio: 16 / 10; } .wala-redesign .wala-offers-featured-body { padding: 24px 22px; } .wala-redesign .wala-offers-featured-title { font-size: 22px; } .wala-redesign .wala-offers-featured-price .amount { font-size: 24px; } } /* FILTROS — pills horizontales con contador. Scroll horizontal en mobile. Pill activa = ink invertido. */ .wala-redesign .wala-offers-filters-section { padding: 32px 0 4px; } .wala-redesign .wala-offers-filters { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; } .wala-redesign .wala-offers-filters-label { font-size: 12.5px; color: var(--wala-ink-3); flex-shrink: 0; } .wala-redesign .wala-offers-filter-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; } .wala-redesign .wala-offers-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--wala-border); background: var(--wala-surface); color: var(--wala-ink-2); font-weight: 500; text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .wala-redesign .wala-offers-pill:hover { border-color: var(--wala-ink); color: var(--wala-ink); } .wala-redesign .wala-offers-pill .num { font-size: 11px; opacity: 0.6; } .wala-redesign .wala-offers-pill.is-active { background: var(--wala-ink); color: var(--wala-surface); border-color: var(--wala-ink); } .wala-redesign .wala-offers-pill.is-active .num { opacity: 0.8; } @media (max-width: 767.98px) { .wala-redesign .wala-offers-filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; } .wala-redesign .wala-offers-filter-pills { flex-wrap: nowrap; } } /* BODY (grid de cards) — reutiliza .wala-home-exp-grid. Solo retoques específicos para la card-title (2 líneas en lugar de 1) y el badge cashback debajo. */ .wala-redesign .wala-offers-body { padding: 24px 0 72px; } .wala-redesign .wala-offers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .wala-redesign .wala-offers-card-title { -webkit-line-clamp: 2; min-height: 2.6em; } .wala-redesign .wala-offers-card-cashback { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: #16a34a; background: #dcfce7; padding: 3px 9px; border-radius: 6px; font-weight: 500; align-self: flex-start; } /* Badges --offer y --top aceptan icono inline. Ajustamos display para que quepan icono + texto cómodos. */ .wala-redesign .wala-home-exp-badge { display: inline-flex; align-items: center; gap: 4px; } .wala-redesign .wala-home-exp-badge i { font-size: 10px; } @media (max-width: 991.98px) { .wala-redesign .wala-offers-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } } @media (max-width: 480px) { .wala-redesign .wala-offers-grid { grid-template-columns: 1fr; } } /* DARK MODE — overrides offers Las vars rotan; aquí solo lo hardcoded (verde, gris, surface fijo). */ [data-bs-theme="dark"] .wala-redesign .wala-offers-hero-pill { background: rgba(34, 197, 94, 0.15); color: #4ade80; } [data-bs-theme="dark"] .wala-redesign .wala-offers-stat--accent .v { color: #4ade80; } [data-bs-theme="dark"] .wala-redesign .wala-offers-card-cashback { background: rgba(34, 197, 94, 0.15); color: #4ade80; } /* CTA negro sobre surface en dark = blanco con ink negro (consistente con offers-cta) */ [data-bs-theme="dark"] .wala-redesign .wala-offers-featured-cta { background: #f4f4f5; color: #16181d; } [data-bs-theme="dark"] .wala-redesign .wala-offers-featured-tag { background: #f4f4f5; color: #16181d; } /* Pill activa en dark: --wala-ink se vuelve claro → texto sobre ink necesita contrario */ [data-bs-theme="dark"] .wala-redesign .wala-offers-pill.is-active { background: var(--wala-ink); color: var(--wala-bg, #0f1014); } /* ============================================================ CONTACTO — Dirección A Página: pages/contact-new.blade.php Estructura: hero (texto + 3 channels + panel soporte) + body grid (form + sidebar con FAQ acordeón y office card). Reusa .wala-faq-* (booking) para el acordeón; añade ajustes. ============================================================ */ /* HERO — usa el gradient unificado --wala-hero-bg. */ .wala-redesign .wala-contact-hero { background: var(--wala-hero-bg); border-bottom: 1px solid var(--wala-border); padding: 28px 0 36px; } .wala-redesign .wala-contact-hero .wala-breadcrumb { margin-bottom: 14px; } .wala-redesign .wala-contact-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: stretch; } .wala-redesign .wala-contact-hero-text { display: flex; flex-direction: column; } .wala-redesign .wala-contact-hero-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--wala-brand); background: var(--wala-brand-soft); padding: 5px 11px; border-radius: 999px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; align-self: flex-start; margin-bottom: 14px; } .wala-redesign .wala-contact-hero-pill i { font-size: 11px; } .wala-redesign .wala-contact-h1 { font-size: 48px; line-height: 1; letter-spacing: -0.03em; margin: 0 0 14px; } .wala-redesign .wala-contact-hero-sub { font-size: 16px; color: var(--wala-ink-2); max-width: 480px; line-height: 1.5; margin: 0 0 24px; } /* Channel cards (WhatsApp / Email / Horario) */ .wala-redesign .wala-contact-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 580px; margin-top: auto; } .wala-redesign .wala-contact-channel { display: flex; flex-direction: column; background: var(--wala-surface); border: 1px solid var(--wala-border); border-radius: 12px; padding: 12px 14px; text-decoration: none; color: var(--wala-ink); position: relative; cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; } .wala-redesign .wala-contact-channel:hover { border-color: var(--wala-ink); transform: translateY(-2px); color: var(--wala-ink); } .wala-redesign .wala-contact-channel--static { cursor: default; } .wala-redesign .wala-contact-channel--static:hover { border-color: var(--wala-border); transform: none; } .wala-redesign .wala-contact-channel-ic { color: var(--wala-ink); font-size: 18px; margin-bottom: 6px; } .wala-redesign .wala-contact-channel-t { font-size: 11px; color: var(--wala-ink-3); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .wala-redesign .wala-contact-channel-v { font-size: 13.5px; color: var(--wala-ink); font-weight: 500; margin-top: 3px; word-break: break-word; } .wala-redesign .wala-contact-channel-tag { position: absolute; top: -8px; right: 10px; font-size: 10px; padding: 2px 7px; border-radius: 999px; background: var(--wala-ink); color: var(--wala-surface); font-weight: 600; letter-spacing: 0.02em; } .wala-redesign .wala-contact-channel-tag--accent { background: #16a34a; color: #fff; } /* Panel soporte (derecha del hero) */ .wala-redesign .wala-contact-support { background: var(--wala-surface); border: 1px solid var(--wala-border); border-radius: 20px; padding: 28px; position: relative; overflow: hidden; } .wala-redesign .wala-contact-support::before { content: ''; position: absolute; top: -80px; right: -80px; width: 280px; height: 280px; border-radius: 50%; background: var(--wala-brand-soft); opacity: 0.5; z-index: 0; } .wala-redesign .wala-contact-support > * { position: relative; z-index: 1; } .wala-redesign .wala-contact-support-team { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .wala-redesign .wala-contact-avatars { display: flex; } .wala-redesign .wala-contact-avatar { width: 48px; height: 48px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; border: 3px solid var(--wala-surface); margin-left: -14px; position: relative; } .wala-redesign .wala-contact-avatar:first-child { margin-left: 0; } .wala-redesign .wala-contact-avatar--sunset { background: #fbe4d3; color: #8a4c27; } .wala-redesign .wala-contact-avatar--green { background: #bbf7d0; color: #166534; } .wala-redesign .wala-contact-avatar--cool { background: #bfdbfe; color: #1d4ed8; } .wala-redesign .wala-contact-avatar--violet { background: var(--wala-brand-soft); color: var(--wala-brand); } .wala-redesign .wala-contact-support-team-title { font-size: 13px; font-weight: 600; color: var(--wala-ink); } .wala-redesign .wala-contact-support-status { font-size: 12px; color: var(--wala-ink-3); display: flex; align-items: center; gap: 6px; margin-top: 2px; } .wala-redesign .wala-contact-support-dot { width: 7px; height: 7px; border-radius: 999px; display: inline-block; } .wala-redesign .wala-contact-support-status.is-open .wala-contact-support-dot { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); } .wala-redesign .wala-contact-support-status.is-closed .wala-contact-support-dot { background: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18); } .wala-redesign .wala-contact-support-pitch { font-size: 20px; font-weight: 700; color: var(--wala-ink); line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 22px; max-width: 360px; } .wala-redesign .wala-contact-support-stats { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--wala-border); } .wala-redesign .wala-contact-support-stat { padding: 16px 4px; border-bottom: 1px solid var(--wala-border); } .wala-redesign .wala-contact-support-stat:nth-child(odd) { border-right: 1px solid var(--wala-border); } .wala-redesign .wala-contact-support-stat:nth-last-child(-n+2) { border-bottom: 0; } .wala-redesign .wala-contact-support-stat .v { font-size: 19px; font-weight: 700; color: var(--wala-ink); letter-spacing: -0.02em; line-height: 1; } .wala-redesign .wala-contact-support-stat .l { font-size: 11px; color: var(--wala-ink-3); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.05em; } /* BODY: grid form + sidebar */ .wala-redesign .wala-contact-body { padding: 56px 0 80px; } .wala-redesign .wala-contact-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: flex-start; } .wala-redesign .wala-contact-kicker { font-size: 12px; color: var(--wala-brand); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: 8px; } .wala-redesign .wala-contact-kicker--sm { font-size: 11px; letter-spacing: 0.06em; color: var(--wala-ink-3); margin-bottom: 8px; } .wala-redesign .wala-contact-h2 { margin: 0 0 6px; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--wala-ink); } .wala-redesign .wala-contact-form-sub { margin: 6px 0 24px; font-size: 14px; color: var(--wala-ink-2); } /* FORM CARD */ .wala-redesign .wala-contact-form-card { background: var(--wala-surface); border: 1px solid var(--wala-border); border-radius: 18px; padding: 32px; } .wala-redesign .wala-contact-form .wala-contact-field { margin-top: 16px; } .wala-redesign .wala-contact-label { font-size: 12.5px; font-weight: 600; color: var(--wala-ink); margin-bottom: 6px; display: block; } .wala-redesign .wala-contact-req { color: #dc2626; } .wala-redesign .wala-contact-input { background: var(--wala-surface-2); border: 1px solid var(--wala-border); color: var(--wala-ink); border-radius: 10px; padding: 11px 14px; font-size: 14px; line-height: 1.4; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .wala-redesign .wala-contact-input:focus { background: var(--wala-surface-2); color: var(--wala-ink); border-color: var(--wala-ink); box-shadow: 0 0 0 3px rgba(81, 67, 217, 0.12); outline: 0; } .wala-redesign .wala-contact-input::placeholder { color: var(--wala-ink-3); } .wala-redesign .wala-contact-input--mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.02em; } .wala-redesign .wala-contact-textarea { min-height: 130px; resize: vertical; } /* Topic chips */ .wala-redesign .wala-contact-chips { display: flex; flex-wrap: wrap; gap: 6px; } .wala-redesign .wala-contact-chip { font-size: 13px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--wala-border); background: transparent; color: var(--wala-ink-2); font-weight: 500; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .wala-redesign .wala-contact-chip:hover { border-color: var(--wala-ink); color: var(--wala-ink); } .wala-redesign .wala-contact-chip.is-active { background: var(--wala-ink); color: var(--wala-surface); border-color: var(--wala-ink); } /* reCAPTCHA wrapper: respeta el badge de Google y mantiene espaciado. */ .wala-redesign .wala-contact-recaptcha { margin-top: 18px; } /* Consent + actions */ .wala-redesign .wala-contact-consent { margin-top: 16px; display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--wala-ink-3); } .wala-redesign .wala-contact-consent .form-check-input { margin-top: 2px; flex-shrink: 0; } .wala-redesign .wala-contact-consent-label { line-height: 1.5; } .wala-redesign .wala-contact-consent a { color: var(--wala-ink-2); text-decoration: underline; } .wala-redesign .wala-contact-consent a:hover { color: var(--wala-ink); } .wala-redesign .wala-contact-actions { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .wala-redesign .wala-contact-secure { font-size: 12px; color: var(--wala-ink-3); display: inline-flex; align-items: center; gap: 6px; } .wala-redesign .wala-contact-submit { padding: 12px 24px; background: var(--wala-ink); color: var(--wala-surface); border: none; border-radius: 10px; font-size: 14.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: filter 0.15s ease, transform 0.15s ease; } .wala-redesign .wala-contact-submit:hover { filter: brightness(0.93); } .wala-redesign .wala-contact-submit:active { transform: translateY(1px); } .wala-redesign .wala-contact-submit i { font-size: 14px; } /* SIDEBAR */ .wala-redesign .wala-contact-side { min-width: 0; } /* FAQ acordeón — reusa .wala-faq pero compacto */ .wala-redesign .wala-contact-faq { margin-top: 14px; background: var(--wala-surface); border: 1px solid var(--wala-border); border-radius: 14px; overflow: hidden; } .wala-redesign .wala-contact-faq-item:last-child { border-bottom: 0; } .wala-redesign .wala-contact-faq-q { padding: 14px 16px; gap: 14px; } .wala-redesign .wala-contact-faq-text { display: flex; flex-direction: column; gap: 3px; text-align: left; min-width: 0; flex: 1; } .wala-redesign .wala-contact-faq-cat { font-size: 11px; color: var(--wala-ink-3); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; order: 2; } .wala-redesign .wala-contact-faq-question { font-size: 13.5px; font-weight: 500; color: var(--wala-ink); line-height: 1.3; order: 1; } .wala-redesign .wala-contact-faq-q .ic-toggle { font-size: 18px; flex-shrink: 0; } .wala-redesign .wala-contact-faq .wala-faq-a { padding: 0 16px 14px; font-size: 13.5px; color: var(--wala-ink-2); line-height: 1.55; } /* OFICINA */ .wala-redesign .wala-contact-office { margin-top: 22px; padding: 18px; background: var(--wala-surface-2); border: 1px solid var(--wala-border); border-radius: 14px; } .wala-redesign .wala-contact-office-name { font-size: 14px; color: var(--wala-ink); font-weight: 500; line-height: 1.5; } .wala-redesign .wala-contact-office-addr { font-size: 13px; color: var(--wala-ink-2); line-height: 1.5; margin-top: 4px; } .wala-redesign .wala-contact-office-cif { font-size: 12px; color: var(--wala-ink-3); margin-top: 8px; } /* RESPONSIVE */ @media (max-width: 991.98px) { .wala-redesign .wala-contact-hero-grid { grid-template-columns: 1fr; gap: 28px; } .wala-redesign .wala-contact-h1 { font-size: 38px; } .wala-redesign .wala-contact-layout { grid-template-columns: 1fr; gap: 36px; } } @media (max-width: 767.98px) { .wala-redesign .wala-contact-hero { padding: 24px 0 28px; } .wala-redesign .wala-contact-h1 { font-size: 32px; } .wala-redesign .wala-contact-channels { grid-template-columns: 1fr; } .wala-redesign .wala-contact-form-card { padding: 22px; } .wala-redesign .wala-contact-h2 { font-size: 22px; } .wala-redesign .wala-contact-actions { flex-direction: column-reverse; align-items: stretch; } .wala-redesign .wala-contact-submit { width: 100%; justify-content: center; } } /* DARK MODE */ [data-bs-theme="dark"] .wala-redesign .wala-contact-channel-tag { background: var(--wala-ink); color: var(--wala-bg, #0f1014); } [data-bs-theme="dark"] .wala-redesign .wala-contact-channel-tag--accent { background: #16a34a; color: #fff; } [data-bs-theme="dark"] .wala-redesign .wala-contact-submit { background: var(--wala-ink); color: var(--wala-bg, #0f1014); } [data-bs-theme="dark"] .wala-redesign .wala-contact-chip.is-active { background: var(--wala-ink); color: var(--wala-bg, #0f1014); } [data-bs-theme="dark"] .wala-redesign .wala-contact-avatar--sunset { background: rgba(245, 158, 11, 0.2); color: #fbbf24; } [data-bs-theme="dark"] .wala-redesign .wala-contact-avatar--green { background: rgba(34, 197, 94, 0.2); color: #4ade80; } [data-bs-theme="dark"] .wala-redesign .wala-contact-avatar--cool { background: rgba(59, 130, 246, 0.2); color: #93c5fd; } [data-bs-theme="dark"] .wala-redesign .wala-contact-avatar--violet { background: rgba(99, 102, 241, 0.25); color: #c4b5fd; } [data-bs-theme="dark"] .wala-redesign .wala-contact-input:focus { box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2); } /* ============================================================ CART SUMMARY (Dirección A) — usado por cart/summary-new.blade.php ============================================================ */ /* Cabecera */ .wala-redesign .wala-cart-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 4px 0 6px; } .wala-redesign .wala-cart-head__sub { margin-top: 8px; font-size: 13.5px; color: var(--wala-ink-3); } .wala-redesign .wala-cart-head__sub .sep { margin: 0 4px; color: var(--wala-ink-3); } .wala-redesign .wala-cart-head__back { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--wala-border); border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--wala-ink-2); text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease; } .wala-redesign .wala-cart-head__back:hover { color: var(--wala-ink); border-color: var(--wala-ink); } /* Sección con padding propio */ .wala-redesign .wala-cart-section { padding: 16px 0 60px; } .wala-redesign .wala-cart-empty-section { padding: 8px 0 60px; } /* ITEM CARD */ .wala-redesign .wala-cart-item { display: grid; grid-template-columns: 160px 1fr; gap: 0; border: 1px solid var(--wala-border); border-radius: 16px; background: var(--wala-surface); overflow: hidden; margin-bottom: 14px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .wala-redesign .wala-cart-item:hover { border-color: var(--wala-border-strong); box-shadow: 0 6px 20px rgba(22,24,29,0.05); } .wala-redesign .wala-cart-item__media { background: var(--wala-surface-2); min-height: 150px; position: relative; } .wala-redesign .wala-cart-item__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .wala-redesign .wala-cart-item__body { padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; } .wala-redesign .wala-cart-item__sub { font-size: 11px; color: var(--wala-ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .wala-redesign .wala-cart-item__title { margin: 0; font-size: 18px; font-weight: 600; color: var(--wala-ink); letter-spacing: -0.01em; line-height: 1.3; } .wala-redesign .wala-cart-item__chips { display: flex; flex-wrap: wrap; gap: 6px; } .wala-redesign .wala-cart-item__chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 6px; background: var(--wala-surface-2); color: var(--wala-ink-2); font-size: 12.5px; } .wala-redesign .wala-cart-item__chip i { font-size: 12px; line-height: 1; } /* Banner ámbar "datos pendientes" */ .wala-redesign .wala-cart-item__alert { padding: 12px 14px; background: #fef3c7; color: #92400e; border-radius: 10px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; font-weight: 500; } .wala-redesign .wala-cart-item__alert-text { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 180px; } .wala-redesign .wala-cart-item__alert-text i { font-size: 13px; } .wala-redesign .wala-cart-item__alert-cta { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: 8px; background: #92400e; color: #fff !important; font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: filter 0.15s ease, transform 0.15s ease; } .wala-redesign .wala-cart-item__alert-cta:hover { filter: brightness(1.12); } .wala-redesign .wala-cart-item__alert-cta:active { transform: translateY(1px); } .wala-redesign .wala-cart-item__alert-cta i { font-size: 12px; } .wala-redesign .wala-cart-item__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; } .wala-redesign .wala-cart-item__actions { display: flex; gap: 6px; } .wala-redesign .wala-cart-item__btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; border-radius: 8px; background: transparent; border: 1px solid var(--wala-border); color: var(--wala-ink-2); font-size: 12.5px; font-weight: 500; text-decoration: none; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .wala-redesign .wala-cart-item__btn:hover { color: var(--wala-ink); border-color: var(--wala-ink); } .wala-redesign .wala-cart-item__btn--ghost { color: var(--wala-ink-3); } .wala-redesign .wala-cart-item__btn i { font-size: 13px; } .wala-redesign .wala-cart-item__price { font-size: 18px; font-weight: 700; color: var(--wala-ink); letter-spacing: -0.01em; white-space: nowrap; } /* Móvil: card apilada (imagen banner arriba) */ @media (max-width: 575.98px) { .wala-redesign .wala-cart-item { grid-template-columns: 1fr; } .wala-redesign .wala-cart-item__media { aspect-ratio: 16/9; min-height: 0; } .wala-redesign .wala-cart-item__body { padding: 14px 16px 16px; } .wala-redesign .wala-cart-item__title { font-size: 16px; } .wala-redesign .wala-cart-item__alert { flex-direction: column; align-items: stretch; gap: 8px; } .wala-redesign .wala-cart-item__alert-text { min-width: 0; } .wala-redesign .wala-cart-item__alert-cta { justify-content: center; } .wala-redesign .wala-cart-item__footer { flex-wrap: wrap; gap: 12px; } .wala-redesign .wala-cart-item__price { margin-left: auto; font-size: 17px; } } /* Strip de confianza bajo la lista */ .wala-redesign .wala-cart-trust { margin-top: 6px; padding: 14px 18px; background: var(--wala-surface-2); border-radius: 12px; display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 12.5px; color: var(--wala-ink-2); } .wala-redesign .wala-cart-trust span { display: inline-flex; align-items: center; gap: 6px; } .wala-redesign .wala-cart-trust i { color: var(--wala-ink); font-size: 14px; } /* Sidebar resumen (extiende .wala-trust-card) */ .wala-redesign .wala-cart-summary { padding: 22px; } .wala-redesign .wala-cart-summary__lines { display: grid; gap: 10px; margin-top: 14px; font-size: 13.5px; } .wala-redesign .wala-cart-summary__line { display: flex; justify-content: space-between; gap: 8px; } .wala-redesign .wala-cart-summary__line > span:first-child { color: var(--wala-ink-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wala-redesign .wala-cart-summary__line > span:last-child { color: var(--wala-ink); font-weight: 500; white-space: nowrap; } .wala-redesign .wala-cart-summary__total-row { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--wala-border); } .wala-redesign .wala-cart-summary__total-row > span:first-child { font-size: 14px; color: var(--wala-ink-2); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .wala-redesign .wala-cart-summary__total-row .amount { font-size: 28px; font-weight: 700; color: var(--wala-ink); letter-spacing: -0.02em; line-height: 1; } .wala-redesign .wala-cart-summary__taxes { margin-top: 4px; font-size: 11.5px; color: var(--wala-ink-3); text-align: right; } /* CTA del resumen — sobreescribe .wala-trust-cta para usar ink (no brand) y un padding más compacto, fiel al diseño. Aplica a la versión activa y a la disabled (ambas comparten forma). */ .wala-redesign .wala-cart-summary__cta, .wala-redesign .wala-cart-summary .wala-trust-cta--disabled { width: 100%; margin-top: 18px; padding: 14px 16px; border-radius: 12px; font-size: 14.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .wala-redesign .wala-cart-summary__cta { background: var(--wala-ink); color: #fff !important; border: none; } .wala-redesign .wala-cart-summary__cta i { font-size: 14px; } .wala-redesign .wala-trust-cta--disabled { background: var(--wala-surface-2) !important; color: var(--wala-ink-3) !important; border: 1px solid var(--wala-border); cursor: not-allowed; } .wala-redesign .wala-trust-cta--disabled:hover { filter: none; } [data-bs-theme="dark"] .wala-redesign .wala-cart-summary__cta { color: var(--wala-bg, #0f1014) !important; } .wala-redesign .wala-cart-summary__hint { margin-top: 10px; font-size: 11.5px; color: var(--wala-ink-3); text-align: center; } .wala-redesign .wala-cart-summary__methods { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--wala-border); } .wala-redesign .wala-cart-summary__methods .label { font-size: 11px; color: var(--wala-ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: 8px; } .wala-redesign .wala-cart-summary__methods-list { display: flex; flex-wrap: wrap; gap: 5px; } .wala-redesign .wala-cart-summary__methods-list span { font-size: 10.5px; padding: 4px 8px; background: var(--wala-surface-2); border: 1px solid var(--wala-border); border-radius: 5px; color: var(--wala-ink-2); font-weight: 600; } /* Estado vacío */ .wala-redesign .wala-cart-empty { text-align: center; padding: 56px 24px; background: var(--wala-surface-2); border: 1px solid var(--wala-border); border-radius: 20px; max-width: 720px; margin: 8px auto 0; } .wala-redesign .wala-cart-empty__icon { width: 72px; height: 72px; margin: 0 auto 18px; background: var(--wala-brand-soft); color: var(--wala-brand); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 32px; } .wala-redesign .wala-cart-empty__title { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--wala-ink); } .wala-redesign .wala-cart-empty__sub { margin: 10px auto 24px; font-size: 14.5px; color: var(--wala-ink-2); max-width: 480px; line-height: 1.5; } .wala-redesign .wala-cart-empty__cta { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; background: var(--wala-ink); color: #fff !important; border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; transition: filter 0.15s ease, transform 0.15s ease; } .wala-redesign .wala-cart-empty__cta:hover { filter: brightness(1.15); } .wala-redesign .wala-cart-empty__cta:active { transform: translateY(1px); } @media (max-width: 575.98px) { .wala-redesign .wala-cart-empty { padding: 36px 20px; } .wala-redesign .wala-cart-empty__title { font-size: 24px; } .wala-redesign .wala-cart-empty__icon { width: 64px; height: 64px; font-size: 28px; } } /* DARK MODE — overrides para tonos hardcoded */ [data-bs-theme="dark"] .wala-redesign .wala-cart-item__alert { background: rgba(245, 158, 11, 0.12); color: #fbbf24; } [data-bs-theme="dark"] .wala-redesign .wala-cart-item__alert-cta { background: #fbbf24; color: #1c1917 !important; } [data-bs-theme="dark"] .wala-redesign .wala-cart-empty__cta { background: var(--wala-ink); color: var(--wala-bg, #0f1014) !important; } /* Sección "Ideas para empezar" — título más pequeño que el de la home, fiel al diseño (22 px desktop / 20 px mobile). */ .wala-redesign .wala-cart-recs-section .wala-home-section-title { font-size: 22px; } @media (max-width: 575.98px) { .wala-redesign .wala-cart-recs-section .wala-home-section-title { font-size: 20px; } } /* ============================================================ BOOKING DETAILS — Dirección A Markup: resources/views/pages/booking-details-new.blade.php. Estados (status): 1 confirmada (verde), 5 pendiente (ámbar), 3 error (rojo). Para retirar: borrar este bloque + el partial + el switch en pages/booking-details.blade.php. ============================================================ */ /* Hero status-aware */ .wala-redesign .wala-booking-hero { padding: 32px 0 36px; border-bottom: 1px solid var(--wala-border); } .wala-redesign .wala-booking-hero--confirmed { background: #ecfdf3; border-bottom-color: #d1fadf; color: #065f46; } .wala-redesign .wala-booking-hero--pending { background: #fffbeb; border-bottom-color: #fde68a; color: #92400e; } .wala-redesign .wala-booking-hero--error { background: #fef2f2; border-bottom-color: #fecaca; color: #991b1b; } .wala-redesign .wala-booking-hero__pill { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; margin-bottom: 14px; } .wala-redesign .wala-booking-hero__pill-dot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: currentColor; } .wala-redesign .wala-booking-hero__pill-dot i { color: #fff; font-size: 12px; } .wala-redesign .wala-booking-hero--pending .wala-booking-hero__pill-dot i { color: #fffbeb; } .wala-redesign .wala-booking-hero--error .wala-booking-hero__pill-dot i { color: #fef2f2; } .wala-redesign .wala-booking-hero__h1 { margin: 0; font-size: 36px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; color: inherit; max-width: 760px; } .wala-redesign .wala-booking-hero__sub { margin: 12px 0 20px; font-size: 15px; line-height: 1.55; color: inherit; opacity: 0.85; max-width: 680px; } @media (max-width: 575.98px) { .wala-redesign .wala-booking-hero { padding: 24px 0 26px; } .wala-redesign .wala-booking-hero__h1 { font-size: 26px; } .wala-redesign .wala-booking-hero__sub { font-size: 14px; margin: 10px 0 16px; } } /* Locator card en el hero (status 1 / 5) */ .wala-redesign .wala-booking-locator { display: inline-flex; align-items: center; gap: 16px; padding: 12px 16px; background: rgba(255, 255, 255, 0.6); border: 1px solid currentColor; border-radius: 12px; flex-wrap: wrap; } .wala-redesign .wala-booking-locator__label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; } .wala-redesign .wala-booking-locator__value { margin-top: 2px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 16px; font-weight: 700; letter-spacing: 0.02em; } .wala-redesign .wala-booking-locator__copy { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid currentColor; color: inherit; font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: 8px; cursor: pointer; transition: background 0.15s ease, opacity 0.15s ease; } .wala-redesign .wala-booking-locator__copy:hover { background: rgba(255, 255, 255, 0.45); } .wala-redesign .wala-booking-locator__copy.is-copied { opacity: 0.85; } /* CTA hero (error → reintentar pago) */ .wala-redesign .wala-booking-hero__cta-row { margin-top: 4px; } .wala-redesign .wala-booking-hero__cta { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; background: var(--wala-ink); color: #fff !important; border-radius: 10px; text-decoration: none; font-size: 15px; font-weight: 600; transition: filter 0.15s ease, transform 0.15s ease; } .wala-redesign .wala-booking-hero__cta:hover { filter: brightness(0.92); } .wala-redesign .wala-booking-hero__cta:active { transform: translateY(1px); } /* Info strip (guarda localizador + revisa spam) */ .wala-redesign .wala-booking-info-strip { padding: 18px 0; border-bottom: 1px solid var(--wala-border); background: var(--wala-surface-2); } .wala-redesign .wala-booking-info-strip__inner { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; } .wala-redesign .wala-booking-info-strip__item { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--wala-ink-2); line-height: 1.5; } .wala-redesign .wala-booking-info-strip__item i { color: var(--wala-ink-3); font-size: 16px; line-height: 1.4; flex-shrink: 0; } @media (max-width: 767.98px) { .wala-redesign .wala-booking-info-strip__inner { grid-template-columns: 1fr; } } /* Banners contextuales (cashback / link-account) */ .wala-redesign .wala-booking-banner-section { padding-top: 18px; } .wala-redesign .wala-booking-banner { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--wala-border); border-radius: 14px; background: var(--wala-surface); flex-wrap: wrap; } .wala-redesign .wala-booking-banner__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--wala-surface-2); color: var(--wala-ink-2); font-size: 18px; flex-shrink: 0; } .wala-redesign .wala-booking-banner__body { flex: 1; min-width: 0; } .wala-redesign .wala-booking-banner__title { font-size: 14px; font-weight: 600; color: var(--wala-ink); line-height: 1.35; } .wala-redesign .wala-booking-banner__sub { margin-top: 2px; font-size: 12.5px; color: var(--wala-ink-3); line-height: 1.5; } .wala-redesign .wala-booking-banner__pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; background: rgba(16, 185, 129, 0.12); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.25); flex-shrink: 0; } .wala-redesign .wala-booking-banner__form { margin: 0; flex-shrink: 0; } .wala-redesign .wala-booking-banner__cta { background: var(--wala-ink); color: #fff; border: none; border-radius: 10px; padding: 10px 16px; font-size: 13px; font-weight: 600; cursor: pointer; transition: filter 0.15s ease, transform 0.15s ease; } .wala-redesign .wala-booking-banner__cta:hover { filter: brightness(0.92); } .wala-redesign .wala-booking-banner__cta:active { transform: translateY(1px); } @media (max-width: 575.98px) { .wala-redesign .wala-booking-banner { padding: 12px 14px; gap: 10px; } .wala-redesign .wala-booking-banner__cta, .wala-redesign .wala-booking-banner__pill { width: 100%; justify-content: center; } .wala-redesign .wala-booking-banner__form { width: 100%; } } /* ===== Main grid ===== */ .wala-redesign .wala-booking-section { padding: 28px 0 64px; } /* Buyer strip */ .wala-redesign .wala-booking-buyer { display: grid; grid-template-columns: 1.2fr auto 1.2fr 1fr; gap: 18px; align-items: center; padding: 16px 22px; border: 1px solid var(--wala-border); border-radius: 14px; background: var(--wala-surface); margin-bottom: 18px; } .wala-redesign .wala-booking-buyer__sep { width: 1px; height: 32px; background: var(--wala-border); } .wala-redesign .wala-booking-buyer__label { font-size: 10.5px; color: var(--wala-ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .wala-redesign .wala-booking-buyer__value { margin-top: 4px; font-size: 13px; color: var(--wala-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wala-redesign .wala-booking-buyer__value--strong { font-weight: 600; color: var(--wala-ink); font-size: 14px; } @media (max-width: 767.98px) { .wala-redesign .wala-booking-buyer { grid-template-columns: 1fr 1fr; padding: 14px 16px; } .wala-redesign .wala-booking-buyer__sep { display: none; } } /* ===== Sub-venta (card grande) ===== */ .wala-redesign .wala-booking-sale { border: 1px solid var(--wala-border); border-radius: 16px; background: var(--wala-surface); margin-bottom: 18px; overflow: hidden; } .wala-redesign .wala-booking-sale__head { display: grid; grid-template-columns: 96px 1fr auto; gap: 18px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--wala-border); } .wala-redesign .wala-booking-sale__media { width: 96px; height: 72px; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 22px; } .wala-redesign .wala-booking-sale__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .wala-redesign .wala-booking-sale__head-body { min-width: 0; } .wala-redesign .wala-booking-sale__kicker { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wala-ink-3); } .wala-redesign .wala-booking-sale__kicker .sep { margin: 0 6px; } .wala-redesign .wala-booking-sale__title { margin: 4px 0 2px; font-size: 19px; font-weight: 700; line-height: 1.2; color: var(--wala-ink); letter-spacing: -0.01em; } .wala-redesign .wala-booking-sale__sub { font-size: 13px; color: var(--wala-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wala-redesign .wala-booking-sale__pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; background: #ecfdf3; color: #065f46; border: 1px solid #a7f3d0; white-space: nowrap; } .wala-redesign .wala-booking-sale__pill--pending { background: #fffbeb; color: #92400e; border-color: #fde68a; } .wala-redesign .wala-booking-sale__pill--error { background: #fef2f2; color: #991b1b; border-color: #fecaca; } @media (max-width: 575.98px) { .wala-redesign .wala-booking-sale__head { grid-template-columns: 64px 1fr; gap: 12px; padding: 14px 16px; } .wala-redesign .wala-booking-sale__media { width: 64px; height: 64px; } .wala-redesign .wala-booking-sale__pill { grid-column: 1 / -1; justify-self: flex-start; } .wala-redesign .wala-booking-sale__title { font-size: 17px; } } /* Eventos / fechas */ .wala-redesign .wala-booking-sale__events { padding: 16px 20px; border-bottom: 1px dashed var(--wala-border); } .wala-redesign .wala-booking-sale__events-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wala-ink-3); margin-bottom: 10px; } .wala-redesign .wala-booking-event { padding: 10px 12px; background: var(--wala-surface-2); border-radius: 10px; margin-bottom: 8px; } .wala-redesign .wala-booking-event:last-child { margin-bottom: 0; } .wala-redesign .wala-booking-event__main { font-size: 14px; font-weight: 600; color: var(--wala-ink); line-height: 1.35; } .wala-redesign .wala-booking-event__date { margin-top: 4px; font-size: 12.5px; color: var(--wala-ink-2); display: inline-flex; align-items: center; gap: 6px; } .wala-redesign .wala-booking-event__extra { margin-top: 6px; font-size: 12px; color: var(--wala-ink-3); display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--wala-surface); border: 1px solid var(--wala-border); } /* Tickets de la sub-venta */ .wala-redesign .wala-booking-sale__tickets { padding: 16px 20px; } .wala-redesign .wala-booking-sale__tickets-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wala-ink-3); margin-bottom: 10px; } .wala-redesign .wala-booking-ticket { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--wala-border); border-radius: 10px; margin-bottom: 8px; background: var(--wala-surface); } .wala-redesign .wala-booking-ticket:last-child { margin-bottom: 0; } .wala-redesign .wala-booking-ticket__num { width: 36px; height: 36px; border-radius: 8px; background: var(--wala-surface-2); color: var(--wala-ink-2); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; font-family: ui-monospace, "SF Mono", Menlo, monospace; } .wala-redesign .wala-booking-ticket__body { min-width: 0; } .wala-redesign .wala-booking-ticket__type { font-size: 14px; font-weight: 600; color: var(--wala-ink); line-height: 1.35; } .wala-redesign .wala-booking-ticket__owner { margin-top: 4px; font-size: 12.5px; color: var(--wala-ink-2); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .wala-redesign .wala-booking-ticket__owner i { color: var(--wala-ink-3); } .wala-redesign .wala-booking-ticket__owner .sep { color: var(--wala-ink-3); } .wala-redesign .wala-booking-ticket__owner .muted { color: var(--wala-ink-3); } .wala-redesign .wala-booking-ticket__extras { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; } .wala-redesign .wala-booking-ticket__extra-chip { font-size: 11.5px; color: var(--wala-ink-2); padding: 3px 8px; border-radius: 999px; background: var(--wala-surface-2); border: 1px solid var(--wala-border); } .wala-redesign .wala-booking-ticket__extra-chip strong { color: var(--wala-ink); font-weight: 600; } .wala-redesign .wala-booking-ticket__price { font-size: 14px; font-weight: 700; color: var(--wala-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Footer sub-venta */ .wala-redesign .wala-booking-sale__footer { padding: 14px 20px; border-top: 1px solid var(--wala-border); background: var(--wala-surface-2); display: flex; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: space-between; } .wala-redesign .wala-booking-sale__footer-meta { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; font-size: 13px; color: var(--wala-ink-2); } .wala-redesign .wala-booking-sale__footer-meta i { color: var(--wala-ink-3); margin-right: 4px; } .wala-redesign .wala-booking-sale__pay strong { color: var(--wala-ink); font-weight: 600; } .wala-redesign .wala-booking-sale__total { display: inline-flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--wala-ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .wala-redesign .wala-booking-sale__total strong { font-size: 17px; color: var(--wala-ink); font-weight: 700; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; } .wala-redesign .wala-booking-sale__form { margin: 0; } .wala-redesign .wala-booking-sale__download { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--wala-surface); color: var(--wala-ink); border: 1px solid var(--wala-border-strong); border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .wala-redesign .wala-booking-sale__download:hover { border-color: var(--wala-ink); background: var(--wala-surface); } .wala-redesign .wala-booking-sale__download .muted { color: var(--wala-ink-3); font-weight: 500; } .wala-redesign .wala-booking-sale__download-soon { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--wala-ink-3); line-height: 1.5; } @media (max-width: 575.98px) { .wala-redesign .wala-booking-sale__footer { flex-direction: column; align-items: stretch; padding: 14px 16px; } .wala-redesign .wala-booking-sale__download { width: 100%; justify-content: center; } .wala-redesign .wala-booking-sale__tickets { padding: 14px 16px; } .wala-redesign .wala-booking-ticket { grid-template-columns: 1fr auto; padding: 10px 12px; } .wala-redesign .wala-booking-ticket__num { display: none; } } /* "Antes de ir" */ .wala-redesign .wala-booking-byg { border: 1px solid var(--wala-border); border-radius: 14px; background: var(--wala-surface-2); padding: 22px; margin-top: 8px; } .wala-redesign .wala-booking-byg__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .wala-redesign .wala-booking-byg__title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--wala-ink); } .wala-redesign .wala-booking-byg__hint { font-size: 11.5px; color: var(--wala-ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .wala-redesign .wala-booking-byg__list { display: grid; gap: 10px; } .wala-redesign .wala-booking-byg__note { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: flex-start; } .wala-redesign .wala-booking-byg__ic { width: 32px; height: 32px; border-radius: 8px; background: var(--wala-surface); border: 1px solid var(--wala-border); display: inline-flex; align-items: center; justify-content: center; color: var(--wala-ink-2); font-size: 14px; flex-shrink: 0; } .wala-redesign .wala-booking-byg__t { font-size: 13.5px; font-weight: 600; color: var(--wala-ink); line-height: 1.35; } .wala-redesign .wala-booking-byg__d { margin-top: 2px; font-size: 12.5px; color: var(--wala-ink-2); line-height: 1.5; } /* ===== Sidebar summary (extiende .wala-trust-card) ===== */ .wala-redesign .wala-booking-summary { padding: 22px; } .wala-redesign .wala-booking-summary__total-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; } .wala-redesign .wala-booking-summary__total-label { font-size: 13px; color: var(--wala-ink-2); } .wala-redesign .wala-booking-summary__total-amount { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--wala-ink); font-variant-numeric: tabular-nums; } .wala-redesign .wala-booking-summary__total-meta { margin-top: 4px; font-size: 12px; color: var(--wala-ink-3); } .wala-redesign .wala-booking-summary__toggle { margin-top: 14px; background: transparent; border: 0; padding: 0; color: var(--wala-ink-2); font-size: 13px; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; } .wala-redesign .wala-booking-summary__toggle:hover { color: var(--wala-ink); } .wala-redesign .wala-booking-summary__toggle i { transition: transform 0.2s ease; } .wala-redesign .wala-booking-summary__toggle.is-open i { transform: rotate(180deg); } .wala-redesign .wala-booking-summary__breakdown { margin-top: 10px; padding: 12px 14px; background: var(--wala-surface-2); border-radius: 10px; display: grid; gap: 6px; font-size: 13px; } .wala-redesign .wala-booking-summary__row { display: flex; justify-content: space-between; align-items: center; color: var(--wala-ink-2); font-variant-numeric: tabular-nums; } .wala-redesign .wala-booking-summary__row--positive { color: #16a34a; } .wala-redesign .wala-booking-summary__row--total { border-top: 1px solid var(--wala-border); padding-top: 6px; color: var(--wala-ink); font-weight: 700; } .wala-redesign .wala-booking-summary__pay { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--wala-border); display: flex; align-items: center; justify-content: space-between; gap: 10px; } .wala-redesign .wala-booking-summary__pay-method { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--wala-ink-2); } .wala-redesign .wala-booking-summary__pay-method i { color: var(--wala-ink-3); font-size: 16px; } .wala-redesign .wala-booking-summary__pay-method span { font-weight: 600; color: var(--wala-ink); } .wala-redesign .wala-booking-summary__pay-pill { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; padding: 4px 8px; border-radius: 999px; background: #ecfdf3; color: #065f46; border: 1px solid #a7f3d0; } .wala-redesign .wala-booking-summary__pay-pill--pending { background: #fffbeb; color: #92400e; border-color: #fde68a; } .wala-redesign .wala-booking-summary__pay-pill--error { background: #fef2f2; color: #991b1b; border-color: #fecaca; } .wala-redesign .wala-booking-summary__actions { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--wala-border); } .wala-redesign .wala-booking-summary__actions-label { font-size: 10.5px; color: var(--wala-ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: 10px; } .wala-redesign .wala-booking-summary__action-form { margin: 0 0 8px; } .wala-redesign .wala-booking-summary__action-form:last-child { margin-bottom: 0; } .wala-redesign .wala-booking-summary__action { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: var(--wala-surface); border: 1px solid var(--wala-border); border-radius: 10px; color: var(--wala-ink); font-size: 13.5px; font-weight: 500; cursor: pointer; text-align: left; transition: border-color 0.15s ease, background 0.15s ease; } .wala-redesign .wala-booking-summary__action:hover { border-color: var(--wala-ink); background: var(--wala-surface-2); } .wala-redesign .wala-booking-summary__action span i { margin-right: 8px; color: var(--wala-ink-2); } .wala-redesign .wala-booking-summary__action > i { color: var(--wala-ink-3); } .wala-redesign .wala-booking-summary__action--primary { background: var(--wala-ink); color: #fff; border-color: var(--wala-ink); } .wala-redesign .wala-booking-summary__action--primary:hover { filter: brightness(0.92); background: var(--wala-ink); color: #fff; } .wala-redesign .wala-booking-summary__action--primary span i, .wala-redesign .wala-booking-summary__action--primary > i { color: #fff; } .wala-redesign .wala-booking-summary__help { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--wala-border); } .wala-redesign .wala-booking-summary__help-text { font-size: 12.5px; color: var(--wala-ink-2); line-height: 1.5; } .wala-redesign .wala-booking-summary__help-link { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--wala-ink); text-decoration: none; border-bottom: 1.5px solid var(--wala-ink); padding-bottom: 1px; } /* ===== DARK MODE — overrides para tonos hardcoded del booking-details ===== */ [data-bs-theme="dark"] .wala-redesign .wala-booking-hero--confirmed { background: rgba(16, 185, 129, 0.10); border-bottom-color: rgba(16, 185, 129, 0.25); color: #6ee7b7; } [data-bs-theme="dark"] .wala-redesign .wala-booking-hero--pending { background: rgba(245, 158, 11, 0.10); border-bottom-color: rgba(245, 158, 11, 0.25); color: #fcd34d; } [data-bs-theme="dark"] .wala-redesign .wala-booking-hero--error { background: rgba(239, 68, 68, 0.10); border-bottom-color: rgba(239, 68, 68, 0.30); color: #fca5a5; } [data-bs-theme="dark"] .wala-redesign .wala-booking-locator { background: rgba(255, 255, 255, 0.06); } [data-bs-theme="dark"] .wala-redesign .wala-booking-locator__copy:hover { background: rgba(255, 255, 255, 0.1); } [data-bs-theme="dark"] .wala-redesign .wala-booking-sale__pill { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.35); } [data-bs-theme="dark"] .wala-redesign .wala-booking-sale__pill--pending { background: rgba(245, 158, 11, 0.15); color: #fcd34d; border-color: rgba(245, 158, 11, 0.35); } [data-bs-theme="dark"] .wala-redesign .wala-booking-sale__pill--error { background: rgba(239, 68, 68, 0.15); color: #fca5a5; border-color: rgba(239, 68, 68, 0.35); } [data-bs-theme="dark"] .wala-redesign .wala-booking-summary__pay-pill { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.35); } [data-bs-theme="dark"] .wala-redesign .wala-booking-summary__pay-pill--pending { background: rgba(245, 158, 11, 0.15); color: #fcd34d; border-color: rgba(245, 158, 11, 0.35); } [data-bs-theme="dark"] .wala-redesign .wala-booking-summary__pay-pill--error { background: rgba(239, 68, 68, 0.15); color: #fca5a5; border-color: rgba(239, 68, 68, 0.35); } [data-bs-theme="dark"] .wala-redesign .wala-booking-banner__pill { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.35); } [data-bs-theme="dark"] .wala-redesign .wala-booking-summary__row--positive { color: #4ade80; } [data-bs-theme="dark"] .wala-redesign .wala-booking-hero__cta { background: var(--wala-ink); color: #0f1014 !important; } [data-bs-theme="dark"] .wala-redesign .wala-booking-summary__action--primary { background: var(--wala-ink); color: #0f1014 !important; border-color: var(--wala-ink); } [data-bs-theme="dark"] .wala-redesign .wala-booking-summary__action--primary span i, [data-bs-theme="dark"] .wala-redesign .wala-booking-summary__action--primary > i { color: #0f1014; } [data-bs-theme="dark"] .wala-redesign .wala-booking-banner__cta { background: var(--wala-ink); color: #0f1014; } /* ============================================================ LOOKUP (Mis compras sin cuenta) — Dirección A Markup: resources/views/pages/booking-info-new.blade.php. También se reutilizan .wala-lookup-field y .wala-lookup-form__cta en el login-new (ahorra duplicar tokens del input). ============================================================ */ .wala-redesign .wala-lookup-hero { background: var(--wala-hero-bg); border-bottom: 1px solid var(--wala-border); padding: 32px 0 36px; } .wala-redesign .wala-lookup-hero .wala-breadcrumb { margin-bottom: 14px; } .wala-redesign .wala-lookup-hero__h1 { margin: 0; font-size: 44px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; color: var(--wala-ink); } .wala-redesign .wala-lookup-hero__sub { margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: var(--wala-ink-2); max-width: 600px; } @media (max-width: 575.98px) { .wala-redesign .wala-lookup-hero { padding: 22px 0 26px; } .wala-redesign .wala-lookup-hero__h1 { font-size: 30px; } .wala-redesign .wala-lookup-hero__sub { font-size: 14.5px; } } .wala-redesign .wala-lookup-section { padding: 40px 0 80px; } @media (max-width: 575.98px) { .wala-redesign .wala-lookup-section { padding: 28px 0 56px; } } /* Form card */ .wala-redesign .wala-lookup-form { background: var(--wala-surface); border: 1px solid var(--wala-border); border-radius: 18px; padding: 32px 36px; } .wala-redesign .wala-lookup-form__kicker { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wala-brand); margin-bottom: 8px; } .wala-redesign .wala-lookup-form__title { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--wala-ink); } .wala-redesign .wala-lookup-form__sub { margin: 8px 0 22px; font-size: 14px; color: var(--wala-ink-2); line-height: 1.5; } .wala-redesign .wala-lookup-form__body { display: grid; gap: 14px; } @media (max-width: 575.98px) { .wala-redesign .wala-lookup-form { padding: 22px 20px; border-radius: 14px; } .wala-redesign .wala-lookup-form__title { font-size: 21px; } } /* Field */ .wala-redesign .wala-lookup-field { display: block; } .wala-redesign .wala-lookup-field__label { display: block; font-size: 12.5px; font-weight: 600; color: var(--wala-ink); margin-bottom: 6px; } .wala-redesign .wala-lookup-field__label .req { color: #dc2626; margin-left: 2px; } .wala-redesign .wala-lookup-field__input { width: 100%; padding: 12px 14px; font-size: 14px; color: var(--wala-ink); background: var(--wala-surface-2); border: 1px solid var(--wala-border); border-radius: 10px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; font-family: inherit; } .wala-redesign .wala-lookup-field__input:focus { border-color: var(--wala-ink); background: var(--wala-surface); box-shadow: 0 0 0 3px var(--wala-brand-soft); } .wala-redesign .wala-lookup-field__input--mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.02em; } .wala-redesign .wala-lookup-field__hint { font-size: 11.5px; color: var(--wala-ink-3); margin-top: 6px; } /* CTA submit */ .wala-redesign .wala-lookup-form__cta { width: 100%; margin-top: 8px; padding: 14px 18px; background: var(--wala-ink); color: #fff; border: none; border-radius: 12px; font-size: 14.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: filter 0.15s ease, transform 0.15s ease; } .wala-redesign .wala-lookup-form__cta:hover { filter: brightness(0.92); } .wala-redesign .wala-lookup-form__cta:active { transform: translateY(1px); } .wala-redesign .wala-lookup-form__cta i { font-size: 14px; } /* Trust line debajo del form */ .wala-redesign .wala-lookup-form__trust { margin-top: 12px; font-size: 12px; color: var(--wala-ink-3); display: inline-flex; align-items: center; gap: 6px; } .wala-redesign .wala-lookup-form__trust i { font-size: 13px; } /* Help cards laterales */ .wala-redesign .wala-lookup-helps { display: grid; gap: 12px; } .wala-redesign .wala-help-card { background: var(--wala-surface); border: 1px solid var(--wala-border); border-radius: 14px; padding: 18px 20px; } .wala-redesign .wala-help-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .wala-redesign .wala-help-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--wala-surface-2); color: var(--wala-ink-2); font-size: 16px; flex-shrink: 0; } .wala-redesign .wala-help-card__title { font-size: 14.5px; font-weight: 600; color: var(--wala-ink); letter-spacing: -0.01em; line-height: 1.3; } .wala-redesign .wala-help-card__text { font-size: 13px; color: var(--wala-ink-2); line-height: 1.5; } .wala-redesign .wala-help-card__cta { margin-top: 12px; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--wala-ink); text-decoration: none; border-bottom: 1.5px solid var(--wala-ink); padding-bottom: 1px; transition: opacity 0.15s ease; } .wala-redesign .wala-help-card__cta:hover { opacity: 0.8; color: var(--wala-ink); } /* ============================================================ LOGIN — Dirección A Markup: resources/views/auth/login-new.blade.php. Reutiliza .wala-lookup-field y .wala-lookup-form__cta. ============================================================ */ .wala-redesign .wala-login-section { padding: 56px 0 80px; min-height: 600px; background: var(--wala-hero-bg); } @media (max-width: 575.98px) { .wala-redesign .wala-login-section { padding: 28px 0 56px; } } .wala-redesign .wala-login-wrap { max-width: 440px; margin: 0 auto; } .wala-redesign .wala-login-head { text-align: center; margin-bottom: 28px; } .wala-redesign .wala-login-icon { width: 56px; height: 56px; margin: 0 auto 16px; background: var(--wala-brand-soft); color: var(--wala-brand); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 26px; } .wala-redesign .wala-login-h1 { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; color: var(--wala-ink); } .wala-redesign .wala-login-sub { margin: 8px 0 0; font-size: 14.5px; color: var(--wala-ink-2); } @media (max-width: 575.98px) { .wala-redesign .wala-login-h1 { font-size: 26px; } } /* Card */ .wala-redesign .wala-login-card { background: var(--wala-surface); border: 1px solid var(--wala-border); border-radius: 18px; padding: 28px 32px; } @media (max-width: 575.98px) { .wala-redesign .wala-login-card { padding: 22px 20px; border-radius: 14px; } } /* Fields wrapper */ .wala-redesign .wala-login-fields { display: grid; gap: 14px; margin: 0; } .wala-redesign .wala-login-field__row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; gap: 12px; } .wala-redesign .wala-login-field__row .wala-lookup-field__label { margin-bottom: 0; } .wala-redesign .wala-login-field__link { font-size: 12px; color: var(--wala-ink-2); text-decoration: underline; text-underline-offset: 2px; } .wala-redesign .wala-login-field__link:hover { color: var(--wala-ink); } /* Submit reutiliza .wala-lookup-form__cta + override de margen */ .wala-redesign .wala-login-cta { margin-top: 8px; } /* Footer "no tienes cuenta?" */ .wala-redesign .wala-login-footer { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--wala-border); text-align: center; font-size: 13px; color: var(--wala-ink-2); } .wala-redesign .wala-login-footer a { color: var(--wala-ink); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--wala-ink); padding-bottom: 1px; margin-left: 4px; } /* Cuando el link es el único contenido del footer (forget-password "Volver al login") no queremos el subrayado fuerte ni el margin-left — solo flecha + texto. */ .wala-redesign .wala-login-footer a:only-child { border-bottom: 0; margin-left: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--wala-ink-2); font-weight: 500; } .wala-redesign .wala-login-footer a:only-child:hover { color: var(--wala-ink); } /* Trust line */ .wala-redesign .wala-login-trust { margin-top: 18px; text-align: center; font-size: 12px; color: var(--wala-ink-3); display: flex; align-items: center; justify-content: center; gap: 6px; } .wala-redesign .wala-login-trust i { font-size: 13px; } /* ===== DARK MODE — overrides ===== */ /* CTA primario: en dark `--wala-ink` es blanco, hay que oscurecer el texto */ [data-bs-theme="dark"] .wala-redesign .wala-lookup-form__cta { color: #0f1014; } /* ============================================================ FLASH MESSAGES (globales) — Dirección A Markup: resources/views/partials/flash-messages.blade.php. Aparecen antes del @yield('content') en home-no-slider y home. ============================================================ */ .wala-redesign .wala-flash { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid; border-radius: 12px; background: var(--wala-surface); } /* Cuando va dentro de una card/form de auth o lookup, separar del siguiente elemento. */ .wala-redesign .wala-login-card .wala-flash, .wala-redesign .wala-lookup-form .wala-flash { margin-bottom: 18px; } .wala-redesign .wala-flash__icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 16px; flex-shrink: 0; } .wala-redesign .wala-flash__body { min-width: 0; } .wala-redesign .wala-flash__title { font-size: 14px; font-weight: 600; line-height: 1.4; } .wala-redesign .wala-flash__list { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; } .wala-redesign .wala-flash__list li { margin-bottom: 2px; } .wala-redesign .wala-flash__list li:last-child { margin-bottom: 0; } /* Variante error */ .wala-redesign .wala-flash--error { background: #fef2f2; border-color: #fecaca; color: #991b1b; } .wala-redesign .wala-flash--error .wala-flash__icon { background: #fecaca; color: #991b1b; } /* Variante success */ .wala-redesign .wala-flash--success { background: #ecfdf3; border-color: #a7f3d0; color: #065f46; } .wala-redesign .wala-flash--success .wala-flash__icon { background: #a7f3d0; color: #065f46; } /* Dark mode overrides */ [data-bs-theme="dark"] .wala-redesign .wala-flash--error { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.30); color: #fca5a5; } [data-bs-theme="dark"] .wala-redesign .wala-flash--error .wala-flash__icon { background: rgba(239, 68, 68, 0.25); color: #fca5a5; } [data-bs-theme="dark"] .wala-redesign .wala-flash--success { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.30); color: #6ee7b7; } [data-bs-theme="dark"] .wala-redesign .wala-flash--success .wala-flash__icon { background: rgba(16, 185, 129, 0.25); color: #6ee7b7; } /* ============================================================ ACCOUNT (Mi cuenta) — Dirección A Markup: - resources/views/account/summary-new.blade.php - resources/views/account/bookings-new.blade.php - resources/views/account/info-new.blade.php - resources/views/account/partials/sidebar-new.blade.php Reutiliza .wala-lookup-field* para los inputs del form de info y .wala-lookup-form__cta para el submit "Guardar". ============================================================ */ .wala-redesign .wala-account-section { padding: 32px 0 80px; } @media (max-width: 575.98px) { .wala-redesign .wala-account-section { padding: 20px 0 56px; } } .wala-redesign .wala-account-grid { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: flex-start; } @media (max-width: 991.98px) { .wala-redesign .wala-account-grid { grid-template-columns: 1fr; gap: 20px; } } /* ===== Sidebar ===== */ .wala-redesign .wala-account-sidebar { border: 1px solid var(--wala-border); border-radius: 14px; background: var(--wala-surface); padding: 18px 16px; position: sticky; top: 96px; } @media (max-width: 991.98px) { .wala-redesign .wala-account-sidebar { position: static; } } .wala-redesign .wala-account-sidebar__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wala-ink-3); margin: 4px 8px 10px; } .wala-redesign .wala-account-sidebar__nav { display: grid; gap: 2px; } .wala-redesign .wala-account-sidebar__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--wala-ink-2); text-decoration: none; border: 1px solid transparent; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .wala-redesign .wala-account-sidebar__item i { font-size: 15px; color: var(--wala-ink-3); } .wala-redesign .wala-account-sidebar__item:hover { background: var(--wala-surface-2); color: var(--wala-ink); } .wala-redesign .wala-account-sidebar__item.is-active { background: var(--wala-surface-2); color: var(--wala-ink); font-weight: 600; border-color: var(--wala-border); } .wala-redesign .wala-account-sidebar__item.is-active i { color: var(--wala-ink); } .wala-redesign .wala-account-sidebar__foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--wala-border); } .wala-redesign .wala-account-sidebar__logout { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 13px; color: var(--wala-ink-3); text-decoration: none; transition: color 0.15s ease, background 0.15s ease; } .wala-redesign .wala-account-sidebar__logout:hover { color: var(--wala-ink); background: var(--wala-surface-2); } .wala-redesign .wala-account-sidebar__logout i { font-size: 14px; } /* ===== Content area ===== */ .wala-redesign .wala-account-content { min-width: 0; } /* Page head (bookings / info) */ .wala-redesign .wala-account-page-head { margin-bottom: 24px; } .wala-redesign .wala-account-page-title { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.025em; color: var(--wala-ink); } .wala-redesign .wala-account-page-sub { margin: 6px 0 0; font-size: 14px; color: var(--wala-ink-2); } @media (max-width: 575.98px) { .wala-redesign .wala-account-page-title { font-size: 24px; } } /* ===== Greeting (summary) ===== */ .wala-redesign .wala-account-greeting { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; } .wala-redesign .wala-account-greeting__avatar { width: 56px; height: 56px; border-radius: 999px; background: var(--wala-brand-soft); color: var(--wala-brand); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; flex-shrink: 0; } .wala-redesign .wala-account-greeting__h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; color: var(--wala-ink); } .wala-redesign .wala-account-greeting__sub { margin-top: 4px; font-size: 13.5px; color: var(--wala-ink-3); } @media (max-width: 575.98px) { .wala-redesign .wala-account-greeting__avatar { width: 44px; height: 44px; font-size: 18px; } .wala-redesign .wala-account-greeting__h1 { font-size: 22px; } } /* ===== Stats ===== */ .wala-redesign .wala-account-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 28px; } .wala-redesign .wala-account-stat { background: var(--wala-surface); border: 1px solid var(--wala-border); border-radius: 12px; padding: 16px 18px; } .wala-redesign .wala-account-stat__value { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--wala-ink); font-variant-numeric: tabular-nums; } .wala-redesign .wala-account-stat__label { margin-top: 6px; font-size: 11.5px; color: var(--wala-ink-3); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } /* ===== Section head (summary subtítulos) ===== */ .wala-redesign .wala-account-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .wala-redesign .wala-account-section-title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; color: var(--wala-ink); } .wala-redesign .wala-account-section-link { font-size: 13px; font-weight: 500; color: var(--wala-ink-2); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .wala-redesign .wala-account-section-link:hover { color: var(--wala-ink); } /* ===== Bookings list ===== */ .wala-redesign .wala-account-bookings-list { display: grid; gap: 8px; margin-bottom: 28px; } .wala-redesign .wala-account-booking { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 14px 18px; background: var(--wala-surface); border: 1px solid var(--wala-border); border-radius: 12px; margin: 0; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .wala-redesign .wala-account-booking:hover { border-color: var(--wala-ink); box-shadow: 0 4px 14px rgba(22, 24, 29, 0.05); } .wala-redesign .wala-account-booking__main { min-width: 0; } .wala-redesign .wala-account-booking__locator { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; font-weight: 600; color: var(--wala-ink); letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wala-redesign .wala-account-booking__date { margin-top: 4px; font-size: 12.5px; color: var(--wala-ink-3); display: inline-flex; align-items: center; gap: 5px; } .wala-redesign .wala-account-booking__total { font-size: 15px; font-weight: 700; color: var(--wala-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .wala-redesign .wala-account-booking__cta { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--wala-border-strong); color: var(--wala-ink); padding: 8px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease; } .wala-redesign .wala-account-booking__cta:hover { background: var(--wala-ink); color: #fff; border-color: var(--wala-ink); } @media (max-width: 575.98px) { .wala-redesign .wala-account-booking { grid-template-columns: 1fr auto; gap: 10px 16px; padding: 12px 14px; } .wala-redesign .wala-account-booking__cta { grid-column: 1 / -1; justify-content: center; } } /* ===== Empty state ===== */ .wala-redesign .wala-account-empty { text-align: center; padding: 40px 24px; background: var(--wala-surface); border: 1px dashed var(--wala-border-strong); border-radius: 14px; margin-bottom: 28px; } .wala-redesign .wala-account-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 999px; background: var(--wala-surface-2); color: var(--wala-ink-2); font-size: 24px; margin-bottom: 14px; } .wala-redesign .wala-account-empty__title { font-size: 16px; font-weight: 600; color: var(--wala-ink); } .wala-redesign .wala-account-empty__text { margin-top: 4px; font-size: 13.5px; color: var(--wala-ink-3); max-width: 360px; margin-left: auto; margin-right: auto; } .wala-redesign .wala-account-empty__cta { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; background: var(--wala-ink); color: #fff; border-radius: 10px; font-size: 13.5px; font-weight: 600; text-decoration: none; transition: filter 0.15s ease; } .wala-redesign .wala-account-empty__cta:hover { filter: brightness(0.92); color: #fff; } /* ===== Shortcuts (summary) ===== */ .wala-redesign .wala-account-shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 14px; } .wala-redesign .wala-account-shortcut { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--wala-surface); border: 1px solid var(--wala-border); border-radius: 12px; text-decoration: none; color: var(--wala-ink); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .wala-redesign .wala-account-shortcut:hover { border-color: var(--wala-ink); box-shadow: 0 4px 14px rgba(22, 24, 29, 0.05); color: var(--wala-ink); } .wala-redesign .wala-account-shortcut__icon { width: 36px; height: 36px; border-radius: 8px; background: var(--wala-surface-2); color: var(--wala-ink-2); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .wala-redesign .wala-account-shortcut__body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .wala-redesign .wala-account-shortcut__title { font-size: 13.5px; font-weight: 600; color: var(--wala-ink); } .wala-redesign .wala-account-shortcut__sub { margin-top: 2px; font-size: 12px; color: var(--wala-ink-3); } .wala-redesign .wala-account-shortcut__arrow { color: var(--wala-ink-3); font-size: 14px; flex-shrink: 0; } /* ===== Cant find booking box (bookings page) ===== */ .wala-redesign .wala-account-link-box { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--wala-surface-2); border: 1px solid var(--wala-border); border-radius: 12px; margin-bottom: 20px; flex-wrap: wrap; } .wala-redesign .wala-account-link-box__icon { width: 36px; height: 36px; border-radius: 8px; background: var(--wala-surface); color: var(--wala-ink-2); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } .wala-redesign .wala-account-link-box__body { flex: 1; min-width: 0; } .wala-redesign .wala-account-link-box__title { font-size: 13.5px; font-weight: 600; color: var(--wala-ink); } .wala-redesign .wala-account-link-box__text { margin-top: 2px; font-size: 12.5px; color: var(--wala-ink-3); } .wala-redesign .wala-account-link-box__cta { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; background: var(--wala-surface); border: 1px solid var(--wala-border-strong); color: var(--wala-ink); border-radius: 10px; font-size: 12.5px; font-weight: 600; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease; } .wala-redesign .wala-account-link-box__cta:hover { background: var(--wala-ink); color: #fff; border-color: var(--wala-ink); } /* ===== Form info ===== */ .wala-redesign .wala-account-form { display: grid; gap: 14px; } .wala-redesign .wala-account-card { background: var(--wala-surface); border: 1px solid var(--wala-border); border-radius: 14px; overflow: hidden; } .wala-redesign .wala-account-card__head { padding: 16px 20px; border-bottom: 1px solid var(--wala-border); } .wala-redesign .wala-account-card__title { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--wala-ink); } .wala-redesign .wala-account-card__sub { margin: 4px 0 0; font-size: 12.5px; color: var(--wala-ink-3); } .wala-redesign .wala-account-card__body { padding: 20px; } .wala-redesign .wala-account-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* Cuando el grid va precedido de otro campo full-width (ej. email arriba), separamos para que no quede pegado. */ .wala-redesign .wala-account-card__body > .wala-lookup-field + .wala-account-form__grid { margin-top: 14px; } @media (max-width: 575.98px) { .wala-redesign .wala-account-form__grid { grid-template-columns: 1fr; } } .wala-redesign .wala-account-form__actions { display: flex; justify-content: flex-end; margin-top: 4px; } .wala-redesign .wala-account-form__submit { width: auto; padding-left: 28px; padding-right: 28px; margin-top: 0; } /* Toggles para preferencias de comunicación */ .wala-redesign .wala-account-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--wala-border); cursor: pointer; } .wala-redesign .wala-account-toggle:last-child { border-bottom: 0; padding-bottom: 0; } .wala-redesign .wala-account-toggle:first-child { padding-top: 0; } .wala-redesign .wala-account-toggle__text { font-size: 13.5px; color: var(--wala-ink-2); line-height: 1.5; } .wala-redesign .wala-account-toggle__switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; } .wala-redesign .wala-account-toggle__switch input { opacity: 0; width: 0; height: 0; position: absolute; } .wala-redesign .wala-account-toggle__slider { position: absolute; inset: 0; background: var(--wala-border-strong); border-radius: 999px; transition: background 0.2s ease; } .wala-redesign .wala-account-toggle__slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 2px; top: 2px; background: #fff; border-radius: 999px; transition: transform 0.2s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .wala-redesign .wala-account-toggle__switch input:checked + .wala-account-toggle__slider { background: var(--wala-ink); } .wala-redesign .wala-account-toggle__switch input:checked + .wala-account-toggle__slider::before { transform: translateX(18px); } /* ===== Dark mode overrides ===== */ [data-bs-theme="dark"] .wala-redesign .wala-account-empty__cta { color: #0f1014 !important; } [data-bs-theme="dark"] .wala-redesign .wala-account-empty__cta:hover { color: #0f1014 !important; } [data-bs-theme="dark"] .wala-redesign .wala-account-booking__cta:hover { color: #0f1014; } [data-bs-theme="dark"] .wala-redesign .wala-account-link-box__cta:hover { color: #0f1014; } [data-bs-theme="dark"] .wala-redesign .wala-account-form__submit { color: #0f1014; } /* ============================================================ BLOG (lista) — Dirección A Markup: resources/views/pages/blog-new.blade.php. Reutiliza .wala-breadcrumb, .wala-tone-* (pastel) y .wala-account-empty. ============================================================ */ .wala-redesign .wala-blog-hero { background: var(--wala-hero-bg); border-bottom: 1px solid var(--wala-border); padding: 32px 0 36px; } .wala-redesign .wala-blog-hero .wala-breadcrumb { margin-bottom: 14px; } .wala-redesign .wala-blog-hero__h1 { margin: 0; font-size: 44px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; color: var(--wala-ink); } .wala-redesign .wala-blog-hero__sub { margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: var(--wala-ink-2); max-width: 640px; } @media (max-width: 575.98px) { .wala-redesign .wala-blog-hero { padding: 22px 0 26px; } .wala-redesign .wala-blog-hero__h1 { font-size: 30px; } .wala-redesign .wala-blog-hero__sub { font-size: 14.5px; } } .wala-redesign .wala-blog-section { padding: 40px 0 80px; } @media (max-width: 575.98px) { .wala-redesign .wala-blog-section { padding: 28px 0 56px; } } .wala-redesign .wala-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; } /* Card */ .wala-redesign .wala-blog-card { background: var(--wala-surface); border: 1px solid var(--wala-border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .wala-redesign .wala-blog-card:hover { border-color: var(--wala-ink); box-shadow: 0 8px 24px rgba(22, 24, 29, 0.06); transform: translateY(-1px); } .wala-redesign .wala-blog-card__media-link { display: block; text-decoration: none; } .wala-redesign .wala-blog-card__media { aspect-ratio: 16 / 10; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 32px; } .wala-redesign .wala-blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .wala-redesign .wala-blog-card:hover .wala-blog-card__media img { transform: scale(1.04); } .wala-redesign .wala-blog-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; } .wala-redesign .wala-blog-card__entity { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; padding: 4px 10px; background: var(--wala-brand-soft); color: var(--wala-brand); border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; margin-bottom: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: filter 0.15s ease; } .wala-redesign .wala-blog-card__entity:hover { filter: brightness(0.95); color: var(--wala-brand); } .wala-redesign .wala-blog-card__entity--static { cursor: default; } .wala-redesign .wala-blog-card__entity--static:hover { filter: none; } .wala-redesign .wala-blog-card__entity i { font-size: 12px; } .wala-redesign .wala-blog-card__title { margin: 0 0 8px; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .wala-redesign .wala-blog-card__title a { color: var(--wala-ink); text-decoration: none; } .wala-redesign .wala-blog-card__title a:hover { color: var(--wala-ink); } .wala-redesign .wala-blog-card:hover .wala-blog-card__title a { text-decoration: underline; text-underline-offset: 3px; } .wala-redesign .wala-blog-card__excerpt { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: var(--wala-ink-2); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; } .wala-redesign .wala-blog-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; } .wala-redesign .wala-blog-card__cta { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600; text-decoration: none; border: 1px solid var(--wala-border-strong); color: var(--wala-ink); background: var(--wala-surface); transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .wala-redesign .wala-blog-card__cta:hover { background: var(--wala-ink); color: #fff; border-color: var(--wala-ink); } .wala-redesign .wala-blog-card__cta--primary { background: var(--wala-ink); color: #fff; border-color: var(--wala-ink); } .wala-redesign .wala-blog-card__cta--primary:hover { filter: brightness(0.92); background: var(--wala-ink); color: #fff; } /* ===== Pagination ===== */ .wala-redesign .wala-blog-pagination { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; margin-top: 48px; } .wala-redesign .wala-blog-pagination__btn, .wala-redesign .wala-blog-pagination__page { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--wala-ink-2); background: var(--wala-surface); border: 1px solid var(--wala-border); text-decoration: none; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; font-variant-numeric: tabular-nums; } .wala-redesign .wala-blog-pagination__btn:hover, .wala-redesign .wala-blog-pagination__page:hover { color: var(--wala-ink); border-color: var(--wala-ink); } .wala-redesign .wala-blog-pagination__page.is-active { background: var(--wala-ink); color: #fff; border-color: var(--wala-ink); font-weight: 600; } .wala-redesign .wala-blog-pagination__btn.is-disabled { opacity: 0.4; pointer-events: none; } .wala-redesign .wala-blog-pagination__sep { color: var(--wala-ink-3); padding: 0 4px; } /* ============================================================ BLOG DETAIL — Dirección A Markup: resources/views/pages/blog-detail-new.blade.php. ============================================================ */ .wala-redesign .wala-blog-detail-hero { background: var(--wala-hero-bg); border-bottom: 1px solid var(--wala-border); padding: 24px 0 32px; } .wala-redesign .wala-blog-detail-hero .wala-breadcrumb { margin-bottom: 14px; } .wala-redesign .wala-blog-detail-hero__inner { max-width: 760px; } .wala-redesign .wala-blog-detail-hero__h1 { margin: 12px 0 0; font-size: 40px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; color: var(--wala-ink); } @media (max-width: 575.98px) { .wala-redesign .wala-blog-detail-hero { padding: 18px 0 24px; } .wala-redesign .wala-blog-detail-hero__h1 { font-size: 26px; } } .wala-redesign .wala-blog-detail-section { padding: 40px 0 80px; } @media (max-width: 575.98px) { .wala-redesign .wala-blog-detail-section { padding: 24px 0 56px; } } .wala-redesign .wala-blog-detail { max-width: 760px; margin: 0 auto; } .wala-redesign .wala-blog-detail__media { width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; margin-bottom: 32px; background: var(--wala-surface-2); } .wala-redesign .wala-blog-detail__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .wala-redesign .wala-blog-detail__media--placeholder { display: flex; align-items: center; justify-content: center; font-size: 56px; } /* Tipografía del contenido (reglas para el HTML que tira la API) */ .wala-redesign .wala-blog-detail__content { font-size: 16px; line-height: 1.7; color: var(--wala-ink-2); } .wala-redesign .wala-blog-detail__content > *:first-child { margin-top: 0; } .wala-redesign .wala-blog-detail__content > *:last-child { margin-bottom: 0; } .wala-redesign .wala-blog-detail__content p { margin: 0 0 18px; } .wala-redesign .wala-blog-detail__content h2, .wala-redesign .wala-blog-detail__content h3, .wala-redesign .wala-blog-detail__content h4 { color: var(--wala-ink); letter-spacing: -0.015em; margin: 32px 0 14px; line-height: 1.25; } .wala-redesign .wala-blog-detail__content h2 { font-size: 26px; font-weight: 700; } .wala-redesign .wala-blog-detail__content h3 { font-size: 21px; font-weight: 700; } .wala-redesign .wala-blog-detail__content h4 { font-size: 17px; font-weight: 600; } .wala-redesign .wala-blog-detail__content ul, .wala-redesign .wala-blog-detail__content ol { margin: 0 0 18px; padding-left: 22px; } .wala-redesign .wala-blog-detail__content li { margin-bottom: 6px; } .wala-redesign .wala-blog-detail__content a { color: var(--wala-brand); text-decoration: underline; text-underline-offset: 2px; } .wala-redesign .wala-blog-detail__content a:hover { filter: brightness(0.85); } .wala-redesign .wala-blog-detail__content img { max-width: 100%; height: auto; border-radius: 10px; margin: 18px 0; display: block; } .wala-redesign .wala-blog-detail__content blockquote { margin: 22px 0; padding: 14px 18px; border-left: 3px solid var(--wala-brand); background: var(--wala-surface-2); border-radius: 0 10px 10px 0; font-style: italic; color: var(--wala-ink); } .wala-redesign .wala-blog-detail__content code { background: var(--wala-surface-2); padding: 1px 6px; border-radius: 4px; font-size: 0.92em; color: var(--wala-ink); } .wala-redesign .wala-blog-detail__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--wala-border); } .wala-redesign .wala-blog-detail__cta { display: inline-flex; align-items: center; gap: 6px; padding: 12px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid var(--wala-border-strong); color: var(--wala-ink); background: var(--wala-surface); transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .wala-redesign .wala-blog-detail__cta:hover { background: var(--wala-ink); color: #fff; border-color: var(--wala-ink); } .wala-redesign .wala-blog-detail__cta--primary { background: var(--wala-ink); color: #fff; border-color: var(--wala-ink); } .wala-redesign .wala-blog-detail__cta--primary:hover { filter: brightness(0.92); background: var(--wala-ink); color: #fff; } /* Entidades del post. Un post puede apuntar a varias, así que los chips se agrupan en un wrapper con wrap; el margin-bottom propio del chip sobra aquí porque la separación ya la da el gap. */ .wala-redesign .wala-blog-card__entities, .wala-redesign .wala-blog-detail-hero__entities { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .wala-redesign .wala-blog-card__entities .wala-blog-card__entity, .wala-redesign .wala-blog-detail-hero__entities .wala-blog-card__entity { margin-bottom: 0; } .wala-redesign .wala-blog-detail-hero__entities { margin-bottom: 0; } /* Con varias entidades el artículo cede su aire final al grid de cards que va debajo (a ancho de container, fuera de la columna de 760px). */ .wala-redesign .wala-blog-detail-section--tight { padding-bottom: 8px; } .wala-redesign .wala-blog-detail-entities { padding-bottom: 80px; } @media (max-width: 575.98px) { .wala-redesign .wala-blog-detail-entities { padding-bottom: 56px; } } /* Dark mode overrides */ [data-bs-theme="dark"] .wala-redesign .wala-blog-card__cta:hover { color: #0f1014; } [data-bs-theme="dark"] .wala-redesign .wala-blog-card__cta--primary { color: #0f1014; } [data-bs-theme="dark"] .wala-redesign .wala-blog-card__cta--primary:hover { color: #0f1014; } [data-bs-theme="dark"] .wala-redesign .wala-blog-pagination__page.is-active { color: #0f1014; } [data-bs-theme="dark"] .wala-redesign .wala-blog-detail__cta:hover { color: #0f1014; } [data-bs-theme="dark"] .wala-redesign .wala-blog-detail__cta--primary { color: #0f1014; } [data-bs-theme="dark"] .wala-redesign .wala-blog-detail__cta--primary:hover { color: #0f1014; } /* ============================================================ OPINIONS — Dirección A Markup: resources/views/opinions/all-new.blade.php. Reutiliza .wala-blog-hero, .wala-trust-card, .wala-blog-pagination, .wala-account-empty, .wala-tone-* (avatares). ============================================================ */ .wala-redesign .wala-opinions-hero__counter { color: var(--wala-ink-3); font-weight: 600; margin-left: 4px; } .wala-redesign .wala-opinions-section { padding: 40px 0 80px; } @media (max-width: 575.98px) { .wala-redesign .wala-opinions-section { padding: 28px 0 56px; } } .wala-redesign .wala-opinions-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 32px; align-items: flex-start; } @media (max-width: 991.98px) { .wala-redesign .wala-opinions-grid { grid-template-columns: 1fr; gap: 24px; } /* En mobile sidebar arriba (orden 1) y lista debajo */ .wala-redesign .wala-opinions-grid > .wala-sidebar { order: -1; } } .wala-redesign .wala-opinions-list { display: grid; gap: 14px; min-width: 0; } /* Card de opinión */ .wala-redesign .wala-opinion-card { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 18px 22px; background: var(--wala-surface); border: 1px solid var(--wala-border); border-radius: 14px; align-items: flex-start; } .wala-redesign .wala-opinion-card__avatar { width: 56px; height: 56px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; flex-shrink: 0; } .wala-redesign .wala-opinion-card__body { min-width: 0; } .wala-redesign .wala-opinion-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; } .wala-redesign .wala-opinion-card__who { min-width: 0; } .wala-redesign .wala-opinion-card__name { font-size: 14.5px; font-weight: 600; color: var(--wala-ink); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wala-redesign .wala-opinion-card__meta { margin-top: 2px; font-size: 12.5px; color: var(--wala-ink-3); line-height: 1.4; } .wala-redesign .wala-opinion-card__meta .sep { margin: 0 4px; } .wala-redesign .wala-opinion-card__rating { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; } .wala-redesign .wala-opinion-card__rating-value { font-size: 14px; font-weight: 700; color: var(--wala-ink); background: var(--wala-surface-2); border: 1px solid var(--wala-border); padding: 2px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; line-height: 1.4; } .wala-redesign .wala-opinion-card__stars { font-size: 11px; line-height: 1; } /* Reset del list-inline del partial star-display dentro de las cards */ .wala-redesign .wala-opinion-card__stars .list-inline, .wala-redesign .wala-opinions-rating-card__stars .list-inline { margin: 0; padding: 0; } .wala-redesign .wala-opinion-card__text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--wala-ink-2); } .wala-redesign .wala-opinion-card__no-comment { color: var(--wala-ink-3); font-style: italic; } /* RESPUESTA a una opinión — bloque anidado bajo el comentario, con barra de acento a la izquierda para que se lea como réplica y no como otra reseña. Compartido por el listado (.wala-opinion-card) y la ficha (.wala-review-card). Hereda dark mode solo, vía var(--wala-*). */ .wala-redesign .wala-opinion-reply { margin-top: 12px; padding: 11px 14px; background: var(--wala-surface-2); border: 1px solid var(--wala-border); border-left: 3px solid var(--wala-brand); border-radius: 0 10px 10px 0; } .wala-redesign .wala-opinion-reply__head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 12.5px; font-weight: 600; color: var(--wala-brand); } .wala-redesign .wala-opinion-reply__text { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--wala-ink-2); } @media (max-width: 575.98px) { .wala-redesign .wala-opinion-card { grid-template-columns: 44px 1fr; gap: 12px; padding: 14px 16px; } .wala-redesign .wala-opinion-card__avatar { width: 44px; height: 44px; font-size: 18px; } .wala-redesign .wala-opinion-card__rating { align-items: flex-start; } } /* Sidebar: card de rating global */ .wala-redesign .wala-opinions-rating-card { text-align: center; padding: 28px 22px; } .wala-redesign .wala-opinions-rating-card__big { font-size: 56px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--wala-ink); font-variant-numeric: tabular-nums; } .wala-redesign .wala-opinions-rating-card__big-max { font-size: 22px; font-weight: 600; color: var(--wala-ink-3); margin-left: 2px; } .wala-redesign .wala-opinions-rating-card__stars { margin-top: 12px; font-size: 18px; } .wala-redesign .wala-opinions-rating-card__counter { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--wala-border); font-size: 13.5px; color: var(--wala-ink-2); line-height: 1.5; } .wala-redesign .wala-opinions-rating-card__counter strong { display: block; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--wala-ink); margin: 4px 0 2px; font-variant-numeric: tabular-nums; } /* ========================================================================== STEP1 — Configura tu reserva (Dirección A) · fiel al step1.jsx Vista: resources/views/booking/step1-new.blade.php. Replica visualmente el `Step1Page` del design canvas: - Progress bar 4 segmentos arriba (NewHeader del jsx). - Una sola .wala-step-card visible a la vez (las demás display:none). El JS legacy toggla .active sobre .wizard-panel; aquí desactivamos el translateX del slider y mostramos sólo el panel .active. - Calendario con celdas grandes verdes (días disponibles), brand-soft cuando seleccionado, precios apilados debajo del día. - Sidebar = 3 tarjetas separadas (Tu experiencia / Tu selección / Para qué tener cuenta). ========================================================================== */ /* ----- Progress bar (4 segmentos arriba) ----- */ .wala-redesign .wala-step-progress { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 26px; } .wala-redesign .wala-step-progress-track { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .wala-redesign .wala-step-progress-segment .bar { height: 3px; border-radius: 2px; background: var(--wala-surface-2); } .wala-redesign .wala-step-progress-segment.is-active .bar, .wala-redesign .wala-step-progress-segment.is-done .bar { background: var(--wala-brand); } .wala-redesign .wala-step-progress-segment .label { margin-top: 8px; font-size: 11.5px; font-weight: 500; color: var(--wala-ink-3); letter-spacing: 0.005em; display: inline-flex; align-items: baseline; gap: 6px; } .wala-redesign .wala-step-progress-segment .label .num { font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; color: var(--wala-ink-3); } .wala-redesign .wala-step-progress-segment.is-active .label { color: var(--wala-ink); font-weight: 600; } .wala-redesign .wala-step-progress-segment.is-active .label .num { color: var(--wala-brand); } .wala-redesign .wala-step-progress-segment.is-done .label { color: var(--wala-ink-2); } .wala-redesign .wala-step-progress-segment.is-done .label .num { color: var(--wala-ink-2); } .wala-redesign .wala-step-progress-counter { font-size: 12px; font-weight: 500; color: var(--wala-ink-3); white-space: nowrap; } @media (max-width: 767.98px) { .wala-redesign .wala-step-progress-segment .label { display: none; } .wala-redesign .wala-step-progress { gap: 10px; align-items: center; margin-bottom: 18px; } } /* ----- Wizard "stage": neutralizamos el slider del legacy. El JS pone .active en el panel actual; aquí solo se muestra ese. ----- */ .wala-redesign .wala-step-stage .wizard-slider, .wala-redesign .wizard-slider { display: block; transform: none !important; transition: none !important; width: 100%; } .wala-redesign .wala-step-panel, .wala-redesign .wizard-panel { display: none !important; min-width: 0; max-width: none; opacity: 1; flex-shrink: initial; box-sizing: border-box; } .wala-redesign .wala-step-panel.active, .wala-redesign .wizard-panel.active { display: block !important; } /* ----- Card (una visible a la vez en el main, también para sidebar) ----- */ .wala-redesign .wala-step-card { background: var(--wala-surface); border: 1px solid var(--wala-border); border-radius: 14px; overflow: hidden; } .wala-redesign .wala-step-card__head { padding: 14px 18px; border-bottom: 1px solid var(--wala-border); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .wala-redesign .wala-step-card__title { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: var(--wala-ink); letter-spacing: -0.01em; } .wala-redesign .wala-step-card__title i { color: var(--wala-ink-2); font-size: 16px; } .wala-redesign .wala-step-card__sub { font-weight: 400; color: var(--wala-ink-3); font-size: 13px; } .wala-redesign .wala-step-card__body { padding: 18px 22px; } .wala-redesign .wala-step-card__foot { padding: 14px 18px; border-top: 1px solid var(--wala-border); display: flex; justify-content: flex-end; } @media (max-width: 767.98px) { .wala-redesign .wala-step-card__head { padding: 12px 14px; } .wala-redesign .wala-step-card__body { padding: 16px 4px; } } /* Sidebar variant: tarjetas más compactas */ .wala-redesign .wala-step-card--side .wala-step-card__head { padding: 13px 18px; } .wala-redesign .wala-step-card--side .wala-step-card__title { font-size: 13.5px; } .wala-redesign .wala-step-card--side .wala-step-card__title i { font-size: 15px; } .wala-redesign .wala-step-card--side .wala-step-card__body { padding: 14px 18px; } /* ----- Hint (verde claro arriba del calendario) ----- */ .wala-redesign .wala-step-hint { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.2); color: #15803d; border-radius: 10px; font-size: 12.5px; font-weight: 500; margin-bottom: 14px; } .wala-redesign .wala-step-hint i { font-size: 13px; } .wala-redesign .wala-step-hint--muted { background: var(--wala-surface-2); border-color: var(--wala-border); color: var(--wala-ink-3); } [data-bs-theme="dark"] .wala-redesign .wala-step-hint { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.25); color: #86efac; } /* ----- Chip "Cambiar fecha" + CTA continuar dentro de card ----- */ .wala-redesign .wala-step-chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--wala-border); background: var(--wala-surface); color: var(--wala-ink-2); font-size: 12.5px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: all .15s; } .wala-redesign .wala-step-chip:hover { background: var(--wala-surface-2); color: var(--wala-ink); } .wala-redesign .wala-step-cta { padding: 13px 24px; border-radius: 12px; background: var(--wala-ink); color: var(--wala-surface) !important; border: none; font-size: 14.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: filter .15s; } .wala-redesign .wala-step-cta:disabled { background: var(--wala-surface-2); color: var(--wala-ink-3) !important; border: 1px solid var(--wala-border); cursor: not-allowed; } .wala-redesign .wala-step-cta:not(:disabled):hover { filter: brightness(0.92); } [data-bs-theme="dark"] .wala-redesign .wala-step-cta { color: #0f1014 !important; } [data-bs-theme="dark"] .wala-redesign .wala-step-cta:disabled { color: var(--wala-ink-3) !important; } /* ----- Loading + foot note ----- */ .wala-redesign .wala-step-loading { text-align: center; padding: 22px 0 6px; } .wala-redesign .wala-step-loading .spinner-border { color: var(--wala-brand); } .wala-redesign .wala-step-loading p { color: var(--wala-ink-3); margin: 8px 0 0; font-size: 13px; } .wala-redesign .wala-step-foot-note { display: block; margin-top: 8px; color: var(--wala-ink-3); font-size: 12px; } /* ----- Overlay carga inicial ----- */ .wala-redesign .wala-step-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); z-index: 9999; display: flex; align-items: center; justify-content: center; } .wala-redesign .wala-step-overlay__inner { text-align: center; color: #fff; padding: 20px; } .wala-redesign .wala-step-overlay .spinner-border { width: 3rem; height: 3rem; color: #fff; margin-bottom: 12px; } .wala-redesign .wala-step-overlay h4 { color: #fff; font-weight: 700; margin: 0 0 6px; } .wala-redesign .wala-step-overlay p { color: rgba(255,255,255,0.8); margin: 0; } #btn-finalizar-compra { box-shadow: none; transition: none; } #btn-finalizar-compra:hover { transform: translateY(-2px); box-shadow: none; } /* ========================================================================== CALENDARIO — bootstrap-datepicker, fiel al `Calendar` del .jsx Reproduce: header con flechas redondas 32×32, días semana en mayúsculas, celdas 48px (56 con precio), días disponibles en verde, no disponibles transparentes, día seleccionado en brand-soft. ========================================================================== */ .wala-redesign .datepicker { background: transparent; width: 100%; padding: 0; } .wala-redesign .datepicker.datepicker-inline, .wala-redesign .datepicker .datepicker-days { width: 100%; } .wala-redesign .datepicker table { width: 100%; border-collapse: separate; border-spacing: 6px; margin: 0; table-layout: fixed; } /* Header (Mes/Año) — neutralizamos las reglas globales de general.css que ponen padding:1em y font-size:1.5em a todos los th, y el font-size:2rem !important + height:3rem a th.prev/th.next. Usamos pseudo-elementos para los botones circulares prev/next porque table-cell + border-radius no renderizan un círculo limpio. */ .wala-redesign .datepicker thead tr:first-child th { padding: 0 !important; background: transparent !important; height: 44px; line-height: 1 !important; } .wala-redesign .datepicker .datepicker-switch { font-size: 16px !important; font-weight: 600 !important; color: var(--wala-ink) !important; letter-spacing: -0.01em; background: transparent !important; border-radius: 8px; padding: 6px 10px !important; line-height: 1.2 !important; } .wala-redesign .datepicker .datepicker-switch:hover { background: var(--wala-surface-2) !important; } /* Botones prev/next — neutralizamos texto nativo (font-size 0) y dibujamos el círculo + flecha con pseudo-elementos centrados absolute (no afectan al ancho de columna; el width lo gestiona table-layout: fixed). */ .wala-redesign .datepicker thead th.prev, .wala-redesign .datepicker thead th.next, .wala-redesign .datepicker .prev, .wala-redesign .datepicker .next { font-size: 0 !important; line-height: 1 !important; height: 44px !important; padding: 0 !important; background: transparent !important; border: 0 !important; position: relative; color: transparent !important; } .wala-redesign .datepicker thead th.prev::after, .wala-redesign .datepicker thead th.next::after { content: ''; position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; transform: translate(-50%, -50%); border-radius: 999px; border: 1px solid var(--wala-border); background: var(--wala-surface); transition: background .12s, border-color .12s; z-index: 0; } .wala-redesign .datepicker thead th.prev::before, .wala-redesign .datepicker thead th.next::before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 14px; font-weight: 600; color: var(--wala-ink-2); line-height: 1; z-index: 1; } .wala-redesign .datepicker thead th.prev::before { content: '‹'; } .wala-redesign .datepicker thead th.next::before { content: '›'; } .wala-redesign .datepicker thead th.prev:hover::after, .wala-redesign .datepicker thead th.next:hover::after { background: var(--wala-surface-2); border-color: var(--wala-border-strong); } .wala-redesign .datepicker thead th.prev:hover::before, .wala-redesign .datepicker thead th.next:hover::before { color: var(--wala-ink); } /* Días de la semana — endurecemos el font-size 1.5em + padding 1em globales. */ .wala-redesign .datepicker thead th.dow { font-size: 11px !important; font-weight: 500 !important; color: var(--wala-ink-3) !important; text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 0 6px !important; line-height: 1.2 !important; text-align: center; background: transparent !important; height: auto !important; width: auto !important; } /* Celdas — base */ .wala-redesign .datepicker table tr td.day { padding: 0 !important; border-radius: 10px !important; background: var(--wala-surface) !important; border: 1px solid var(--wala-border) !important; color: #166534 !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.1 !important; height: 56px !important; width: auto !important; vertical-align: middle; text-align: center; cursor: pointer; transition: background .12s, border-color .12s; } .wala-redesign .datepicker table tr td.day:hover:not(.disabled):not(.old):not(.new) { background: var(--wala-surface-2) !important; } /* No disponibles / fuera de mes */ .wala-redesign .datepicker table tr td.day.disabled, .wala-redesign .datepicker table tr td.day.old, .wala-redesign .datepicker table tr td.day.new, .wala-redesign .datepicker table tr td.day.disabled:hover { background: transparent !important; border: 1px solid transparent !important; color: var(--wala-ink-3) !important; cursor: not-allowed !important; opacity: 0.55; text-decoration: none !important; } /* Seleccionado */ .wala-redesign .datepicker table tr td.active.day, .wala-redesign .datepicker table tr td.active.day:hover, .wala-redesign .datepicker table tr td.active.highlighted, .wala-redesign .datepicker table tr td.active.highlighted:hover { background: rgba(81, 67, 217, 0.10) !important; border-color: rgba(81, 67, 217, 0.28) !important; color: var(--wala-brand) !important; box-shadow: none !important; } [data-bs-theme="dark"] .wala-redesign .datepicker table tr td.day { background: var(--wala-surface) !important; color: #86efac !important; border-color: var(--wala-border) !important; } [data-bs-theme="dark"] .wala-redesign .datepicker table tr td.day:hover:not(.disabled):not(.old):not(.new) { background: var(--wala-surface-2) !important; } [data-bs-theme="dark"] .wala-redesign .datepicker table tr td.active.day, [data-bs-theme="dark"] .wala-redesign .datepicker table tr td.active.day:hover { background: rgba(110, 96, 238, 0.18) !important; border-color: rgba(110, 96, 238, 0.45) !important; color: #b9b1f0 !important; } /* Precio dentro de la celda (cuando data.prices se carga) */ .wala-redesign .datepicker table tr td.day .dp-price-wrapper { display: block; margin-top: 3px; line-height: 1.1; letter-spacing: -0.005em; } .wala-redesign .datepicker table tr td.day .dp-price-wrapper:hover{ background: transparent !important; } .wala-redesign .datepicker table tr td.day .dp-price { color: #16a34a !important; font-weight: 600 !important; background: transparent !important; padding: 0 !important; font-size: 12px !important; line-height: 1.1 !important; } .wala-redesign .datepicker table tr td.day .dp-price-original { color: var(--wala-ink-3) !important; text-decoration: line-through; margin-right: 3px; font-weight: 400 !important; font-size: 11px !important; line-height: 1.1 !important; } .wala-redesign .datepicker table tr td.day.active .dp-price, .wala-redesign .datepicker table tr td.day.active .dp-price-original { color: var(--wala-brand) !important; } [data-bs-theme="dark"] .wala-redesign .datepicker table tr td.day .dp-price { color: #86efac !important; } /* Mobile: celdas un poco más bajas */ @media (max-width: 575.98px) { .wala-redesign .datepicker table { border-spacing: 4px; } .wala-redesign .datepicker table tr td.day { height: 48px !important; font-size: 13px !important; } .wala-redesign .datepicker table tr td.day .dp-price { font-size: 11px !important; } .wala-redesign .datepicker table tr td.day .dp-price-original { font-size: 10px !important; } } /* ========================================================================== ACORDEÓN MULTI-TICKET ========================================================================== */ .wala-redesign .wala-step-multi { display: grid; gap: 10px; } .wala-redesign .wala-step-multi__item { background: var(--wala-surface); border: 1px solid var(--wala-border) !important; border-radius: 14px !important; overflow: hidden; } .wala-redesign .wala-step-multi__item.multi-subticket-locked { opacity: 0.6; } .wala-redesign .wala-step-multi__head.accordion-button { padding: 14px 18px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--wala-ink) !important; font-weight: 600; } .wala-redesign .wala-step-multi__head.accordion-button:focus { box-shadow: none !important; } .wala-redesign .wala-step-multi__inner { display: flex; align-items: center; gap: 12px; flex-grow: 1; min-width: 0; } .wala-redesign .wala-step-multi__num { width: 32px; height: 32px; border-radius: 999px; background: var(--wala-brand-soft); color: var(--wala-brand); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; } .wala-redesign .wala-step-multi__num.bg-success-subtle { background: rgba(34,197,94,0.15) !important; color: #16a34a !important; } .wala-redesign .wala-step-multi__num.bg-warning-subtle { background: rgba(245,158,11,0.15) !important; color: #f59e0b !important; } .wala-redesign .wala-step-multi__text { flex-grow: 1; min-width: 0; } .wala-redesign .wala-step-multi__title { display: block; font-size: 14px; font-weight: 600; color: var(--wala-ink); } .wala-redesign .wala-step-multi__summary { display: block; font-size: 12px; margin-top: 2px; } .wala-redesign .wala-step-multi__summary.text-success { color: #16a34a !important; } .wala-redesign .wala-step-multi__summary.text-warning { color: #f59e0b !important; } .wala-redesign .wala-step-multi__summary.text-muted { color: var(--wala-ink-3) !important; } .wala-redesign .wala-step-multi__body { padding: 14px 18px 18px !important; border-top: 1px solid var(--wala-border); background: var(--wala-surface); } .wala-redesign .wala-step-multi__times { margin-top: 14px; } /* Subticket que hereda la fecha del main ticket — bloque informativo de sólo lectura. */ .wala-redesign .wala-step-multi__inherit-info { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--wala-surface-2, #f6f7fb); border: 1px dashed var(--wala-border); color: var(--wala-ink-2, #475569); font-size: 0.95rem; } .wala-redesign .wala-step-multi__inherit-info i { font-size: 1.1rem; color: var(--wala-accent, #2563eb); } .wala-redesign .wala-step-multi__inherit-text { line-height: 1.35; } .wala-redesign .wala-step-multi__inherit-date { margin-left: 4px; color: var(--wala-ink, #0f172a); } /* ========================================================================== SIDEBAR — 3 tarjetas separadas ========================================================================== */ .wala-redesign .wala-step-sidebar { display: grid; gap: 12px; position: sticky; top: 100px; align-self: flex-start; } @media (max-width: 1199.98px) { .wala-redesign .wala-step-sidebar { position: static; margin-top: 24px; } } /* Card 1: Tu experiencia */ .wala-redesign .wala-step-experience { display: flex; gap: 12px; align-items: flex-start; } .wala-redesign .wala-step-experience__img { width: 64px; height: 64px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--wala-surface-2); } .wala-redesign .wala-step-experience__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .wala-redesign .wala-step-experience__meta { min-width: 0; flex: 1; } .wala-redesign .wala-step-experience__ent { font-size: 14px; font-weight: 600; color: var(--wala-ink); line-height: 1.25; } .wala-redesign .wala-step-experience__tic { font-size: 12px; color: var(--wala-ink-3); margin-top: 3px; } .wala-redesign .wala-step-experience__cond { font-size: 12px; margin-top: 6px; color: var(--wala-brand); } .wala-redesign .wala-step-experience__cond a { color: var(--wala-brand); text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; gap: 3px; } .wala-redesign .wala-step-experience__cond a:hover { text-decoration: underline; } /* Card 2: Tu selección — fiel al SelectionList del .jsx - Layout: filas horizontales `lbl ····· val`, gap 8px, fontSize 12.5px. - lbl: ink-3, icono pequeño 12px en currentColor (NO verde), case normal. - val: ink, weight 500, alineado a la derecha, tabular-nums. - Variante --block para tickets (lista anidada de líneas). */ .wala-redesign .wala-step-summary { display: grid; gap: 8px; font-size: 12.5px; } .wala-redesign .wala-step-summary__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0; } .wala-redesign .wala-step-summary__row .lbl { display: inline-flex; align-items: center; gap: 6px; color: var(--wala-ink-3); font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; margin: 0; flex-shrink: 0; } .wala-redesign .wala-step-summary__row .lbl i { font-size: 12px; color: var(--wala-ink-3); line-height: 1; } .wala-redesign .wala-step-summary__row .val { color: var(--wala-ink); font-weight: 500; font-size: 12.5px; text-align: right; flex: 1 1 auto; min-width: 0; font-variant-numeric: tabular-nums; line-height: 1.4; } /* Variante --block: lbl arriba, val full-width abajo (para summary-tickets, donde el JS escupe varias líneas con label+precio). */ .wala-redesign .wala-step-summary__row--block { flex-direction: column; align-items: stretch; gap: 4px; } .wala-redesign .wala-step-summary__row--block .val { text-align: left; } .wala-redesign .wala-step-summary__empty { text-align: center; padding: 14px 0 4px; color: var(--wala-ink-3); } .wala-redesign .wala-step-summary__empty i { font-size: 24px; opacity: 0.4; display: block; margin-bottom: 6px; color: var(--wala-ink-3); } .wala-redesign .wala-step-summary__empty p { margin: 0; font-size: 12.5px; } /* HTML inyectado por el JS legacy de updateSummary() en #summary-date-value (multi mode) y #summary-tickets-value. El partial step1-script escupe classes Bootstrap (text-body, fw-bold, text-primary, d-flex, justify-content-between). Aquí las redibujamos con tokens wala sin tocar el JS. */ .wala-redesign .wala-step-summary__row .val > div { /* Reset cuando el .val contiene HTML inyectado (multi mode). */ font-weight: 400; font-size: 12.5px; line-height: 1.4; } .wala-redesign .wala-step-summary .d-flex.justify-content-between { padding: 3px 0; margin-bottom: 0 !important; } .wala-redesign .wala-step-summary small, .wala-redesign .wala-step-summary .small { font-size: 12.5px; line-height: 1.4; } .wala-redesign .wala-step-summary small.text-body, .wala-redesign .wala-step-summary .text-body { color: var(--wala-ink-2) !important; } .wala-redesign .wala-step-summary small.fw-bold, .wala-redesign .wala-step-summary .fw-bold { color: var(--wala-ink) !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; } .wala-redesign .wala-step-summary small.text-primary, .wala-redesign .wala-step-summary .text-primary { color: var(--wala-ink) !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; } /* Títulos "Ticket 1", "Ticket 2"... en multi mode (div text-body sin justify-content-between). */ .wala-redesign .wala-step-summary .d-flex.align-items-center.text-body:not(.justify-content-between) { font-size: 10.5px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wala-ink-3) !important; margin: 10px 0 4px !important; padding: 0; } .wala-redesign .wala-step-summary .d-flex.align-items-center.text-body:not(.justify-content-between):first-child { margin-top: 0 !important; } /* Subtotal + CTA dentro de la card 2 — fiel al .jsx: label ink-2 12.5px normal-case, amount ink 18px 700 letter-spacing tight. */ .wala-redesign .wala-step-total { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--wala-border); } .wala-redesign .wala-step-total__row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .wala-redesign .wala-step-total__row .lbl { font-size: 12.5px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--wala-ink-2); } .wala-redesign .wala-step-total__row .amount { font-size: 18px; font-weight: 700; color: var(--wala-ink); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .wala-redesign .wala-step-total__cashback { display: flex; justify-content: flex-end; margin-bottom: 10px; } .wala-redesign .wala-step-total__cta { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 12px 20px; border-radius: 12px; background: var(--wala-ink); color: var(--wala-surface) !important; border: 0; font-size: 14px; font-weight: 600; cursor: pointer; transition: filter .15s; } .wala-redesign .wala-step-total__cta i { transition: transform .15s; } .wala-redesign .wala-step-total__cta:not(:disabled):hover { filter: brightness(0.92); } .wala-redesign .wala-step-total__cta:not(:disabled):hover i { transform: translateX(3px); } .wala-redesign .wala-step-total__cta:disabled { background: var(--wala-surface-2); color: var(--wala-ink-3) !important; border: 1px solid var(--wala-border); cursor: not-allowed; } [data-bs-theme="dark"] .wala-redesign .wala-step-total__cta { color: #0f1014 !important; } [data-bs-theme="dark"] .wala-redesign .wala-step-total__cta:disabled { color: var(--wala-ink-3) !important; } /* Card 3: ¿Para qué tener cuenta? */ .wala-redesign .wala-step-account__list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; } .wala-redesign .wala-step-account__list li { font-size: 12.5px; color: var(--wala-ink-2); display: inline-flex; align-items: center; gap: 6px; } .wala-redesign .wala-step-account__list i { color: #16a34a; font-size: 13px; } .wala-redesign .wala-step-account__cta { display: block; text-align: center; width: 100%; padding: 9px 14px; border: 1px solid var(--wala-border); border-radius: 8px; background: var(--wala-surface); color: var(--wala-ink) !important; text-decoration: none; font-size: 12.5px; font-weight: 500; transition: background .12s; } .wala-redesign .wala-step-account__cta:hover { background: var(--wala-surface-2); text-decoration: none; } /* ========================================================================== STICKY MOBILE BAR ========================================================================== */ .wala-redesign .wala-step-mobile-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--wala-surface); border-top: 1px solid var(--wala-border-strong); box-shadow: 0 -8px 24px rgba(0,0,0,0.06); padding: 12px 16px; z-index: 1030; } .wala-redesign .wala-step-mobile-bar__badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .wala-redesign .wala-step-mobile-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; background: var(--wala-surface-2); border: 1px solid var(--wala-border); border-radius: 999px; color: var(--wala-ink-2); font-size: 11.5px; font-weight: 500; } .wala-redesign .wala-step-mobile-badge i { font-size: 11.5px; color: var(--wala-ink-3); } .wala-redesign .wala-step-mobile-bar__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .wala-redesign .wala-step-mobile-bar__total .amount { font-size: 20px; font-weight: 700; color: var(--wala-ink); font-variant-numeric: tabular-nums; } .wala-redesign .wala-step-mobile-bar__total .cashback { margin-top: 2px; } .wala-redesign .wala-step-mobile-bar__cta { padding: 11px 18px; border-radius: 10px; background: var(--wala-ink); color: var(--wala-surface) !important; border: 0; font-size: 13.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: filter .15s; } .wala-redesign .wala-step-mobile-bar__cta.disabled { background: var(--wala-surface-2); color: var(--wala-ink-3) !important; cursor: not-allowed; } .wala-redesign .wala-step-mobile-bar__cta:not(.disabled):hover { filter: brightness(0.92); } [data-bs-theme="dark"] .wala-redesign .wala-step-mobile-bar__cta { color: #0f1014 !important; } [data-bs-theme="dark"] .wala-redesign .wala-step-mobile-bar__cta.disabled { color: var(--wala-ink-3) !important; } /* Padding-bottom mobile para que la sticky bar no tape */ /* @media (max-width: 1199.98px) { .wala-redesign .wala-body { padding-bottom: 140px; } } */ /* FAQ — separación desde el form */ .wala-redesign .wala-step-faq-section { margin-top: 36px; padding-top: 8px; } /* ========================================================================== TIMESLOTS (intervals partial AJAX) — fiel al `TimeSlots` del .jsx. El partial booking/partials/intervals.blade.php inyecta: .intervals-content └─ .row (outer wrapper de grupos) └─ .row.div-hours-X (inner, con N cols de horarios) └─ .col-xs-3.col-sm-2 > button.booking-hour-option El outer NO se mete en grid (un solo hijo). El inner pasa a grid 6 cols (3 en mobile <576px), igual que el TimeSlots del .jsx. ========================================================================== */ .wala-redesign .intervals-content > .row { display: block !important; margin: 0 !important; } .wala-redesign .intervals-content .row[class*="div-hours-"], .wala-redesign .intervals-content [id^="div-hours-"] { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 8px !important; margin: 0 !important; } .wala-redesign .intervals-content .row[class*="div-hours-"] > [class*="col-"], .wala-redesign .intervals-content [id^="div-hours-"] > [class*="col-"] { width: 100% !important; max-width: none !important; flex: initial !important; padding: 0 !important; } @media (max-width: 575.98px) { .wala-redesign .intervals-content .row[class*="div-hours-"], .wala-redesign .intervals-content [id^="div-hours-"] { grid-template-columns: repeat(3, 1fr) !important; } } /* Chips de hora (booking-hour-option) — fiel al `TimeChip` del .jsx. - Default: surface, border 1px, ink, 13.5px, peso 500. - Hover: surface-2 + border ink (sólo si no disabled). - Active (seleccionado): brand-soft fill, border brand alpha, brand text. - Sold/disabled: surface-2, ink-3, line-through, not-allowed. */ .wala-redesign .btn.booking-hour-option, .wala-redesign .booking-hour-option.btn { width: 100% !important; padding: 10px 4px !important; border-radius: 10px !important; border: 1px solid var(--wala-border) !important; background: var(--wala-surface) !important; color: var(--wala-ink) !important; font-size: 13.5px !important; font-weight: 500 !important; line-height: 1.2 !important; cursor: pointer; transition: background .12s, border-color .12s, color .12s; } /* El partial mete HORA dentro del button — neutralizamos el bold del nativo para que el peso lo controle .booking-hour-option. */ .wala-redesign .booking-hour-option b { font-weight: inherit !important; } .wala-redesign .btn.booking-hour-option:hover:not(:disabled), .wala-redesign .booking-hour-option.btn:hover:not(:disabled) { border-color: var(--wala-ink) !important; background: var(--wala-surface-2) !important; } .wala-redesign .btn.booking-hour-option.active, .wala-redesign .booking-hour-option.btn.active { background: rgba(81, 67, 217, 0.10) !important; border-color: rgba(81, 67, 217, 0.28) !important; color: var(--wala-brand) !important; font-weight: 600 !important; } .wala-redesign .btn.booking-hour-option:disabled, .wala-redesign .booking-hour-option.btn:disabled { background: var(--wala-surface-2) !important; color: var(--wala-ink-3) !important; border-color: var(--wala-border) !important; text-decoration: line-through; cursor: not-allowed; } [data-bs-theme="dark"] .wala-redesign .btn.booking-hour-option.active, [data-bs-theme="dark"] .wala-redesign .booking-hour-option.btn.active { background: rgba(110, 96, 238, 0.18) !important; border-color: rgba(110, 96, 238, 0.45) !important; color: #b9b1f0 !important; } /* ========================================================================== OPTION-SELECTOR (legacy AJAX) — escudo CSS dentro del rediseño. Opción A1 confirmada: no tocamos el partial, sólo re-estilamos. El partial booking/partials/option-selector.blade.php se inyecta dentro del .wala-step-card body. El partial trae: - Un

Selecciona tu entrada

propio → REDUNDANTE (mi card ya lo da). - Un
envolviendo las opciones → REDUNDANTE (mi .wala-step-card ya es el contenedor). - Varios
que meten padding lateral → REDUNDANTE (mi .wala-step-card__body ya tiene padding). Aquí los neutralizamos. ========================================================================== */ /* Oculta el

del primer container ("Selecciona tu entrada") — lo provee mi card head. NO toca el

del bloque de "select_language" si requireLanguage está activo. */ .wala-redesign #option-selector-panel3 > .container:first-of-type h4, .wala-redesign #option-selector > .container:first-of-type h4 { display: none; } /* Quita el padding del .container Bootstrap dentro del partial (ya estamos dentro de .wala-step-card__body). */ .wala-redesign #option-selector-panel3 .container, .wala-redesign #option-selector .container { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; } /* Aplana la .card.shadow envolvente → transparente, sin borde, sin sombra y sin padding propio. Las .ticket-option-card hijas mantienen sus bordes individuales (estilizadas más abajo). */ .wala-redesign #option-selector-panel3 .card.shadow, .wala-redesign #option-selector .card.shadow { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; height: auto !important; } .wala-redesign #option-selector-panel3 .card.shadow > .divOptions > .card-body, .wala-redesign #option-selector .card.shadow > .divOptions > .card-body { padding: 0 !important; } .wala-redesign .ticket-option-card { background: var(--wala-surface); border: 1px solid var(--wala-border); border-radius: 14px; padding: 14px 16px; transition: border-color .15s, box-shadow .15s; height: 100%; } .wala-redesign .ticket-option-card:hover { border-color: var(--wala-ink); box-shadow: none; transform: translateY(0px); } .wala-redesign .ticket-option-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .wala-redesign .ticket-option-icon { width: 38px; height: 38px; border-radius: 999px; background: var(--wala-brand-soft); color: var(--wala-brand); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; } .wala-redesign .ticket-option-info { flex: 1; min-width: 0; } .wala-redesign .ticket-option-info h6 { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--wala-ink); letter-spacing: -0.005em; } .wala-redesign .ticket-option-price { text-align: right; } .wala-redesign .ticket-option-price .original-price, .wala-redesign .ticket-option-price .original-price s { color: var(--wala-ink-3); font-size: 12px; } .wala-redesign .ticket-option-price .text-primary, .wala-redesign .ticket-option-price .fs-5, .wala-redesign .ticket-option-price .fw-bold { color: var(--wala-ink) !important; font-weight: 700 !important; font-variant-numeric: tabular-nums; } .wala-redesign .ticket-option-footer { margin-top: 4px; } .wala-redesign .quantity-selector { display: inline-flex; align-items: center; border: 1px solid var(--wala-border); border-radius: 999px; overflow: hidden; background: var(--wala-surface); } .wala-redesign .quantity-selector .btn-quantity { width: 34px; height: 34px; border: 0; background: transparent; color: var(--wala-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .12s; } .wala-redesign .quantity-selector .btn-quantity:hover { background: var(--wala-surface-2); } .wala-redesign .quantity-selector .btn-quantity:disabled { color: var(--wala-ink-3); cursor: not-allowed; } .wala-redesign .quantity-selector .quantity-input { width: 40px !important; height: 34px !important; border: 0 !important; background: transparent !important; text-align: center; font-weight: 700; color: var(--wala-ink); padding: 0; box-shadow: none !important; font-variant-numeric: tabular-nums; } .wala-redesign .form-select.option-qty { border-radius: 999px; border-color: var(--wala-border); background-color: var(--wala-surface); color: var(--wala-ink); padding: 6px 30px 6px 14px; font-weight: 600; } .wala-redesign .btn-options { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--wala-border); font-size: 13px; font-weight: 500; color: var(--wala-ink-2); background: transparent; margin-right: 6px; margin-bottom: 6px; transition: all .15s; } .wala-redesign .btn-options.btn-pink { background: var(--wala-ink) !important; color: var(--wala-surface) !important; border-color: var(--wala-ink) !important; } [data-bs-theme="dark"] .wala-redesign .btn-options.btn-pink { color: #0f1014 !important; } .wala-redesign .btn-options.btn-blue { background: transparent; color: var(--wala-ink-2); } /* ========================================================================== EXTERNAL EVENTS (Hemisféric / cines / sesiones tipo Tixalia) Renderizado por booking/partials/external-events-new.blade.php cuando Session::get('redesign'). Estructura: acordeón Bootstrap con un radio en cada head + grid de chips de hora + input hidden con la selección. Fiel al `SessionsFlow` del step1.jsx. ========================================================================== */ .wala-redesign .wala-step-events { display: grid; gap: 8px; margin: 0; } .wala-redesign .wala-step-event-item { background: var(--wala-surface); border: 1px solid var(--wala-border); border-radius: 12px; overflow: hidden; transition: border-color .15s, background .15s; } /* Estado seleccionado — fiel al `SessionRow selected={true}` del .jsx: border 2px brand + fondo brand-soft. Toggleado por el handler inline del partial (no se usa :has() por compatibilidad). */ .wala-redesign .wala-step-event-item.is-selected { border-color: transparent; background: var(--wala-brand-soft); } [data-bs-theme="dark"] .wala-redesign .wala-step-event-item.is-selected { border-color: transparent; background: rgba(110, 96, 238, 0.12); } /* Head del accordion (clic abre + selecciona radio vía handler legacy) */ .wala-redesign .wala-step-event-head.accordion-button { padding: 12px 16px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--wala-ink) !important; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 12px; } .wala-redesign .wala-step-event-head.accordion-button:not(.collapsed) { background: transparent !important; color: var(--wala-ink) !important; } .wala-redesign .wala-step-event-head.accordion-button:focus { box-shadow: none !important; } /* Chevron por defecto del .accordion-button (Bootstrap pone una flechita) — la atenuamos a tono ink-3 para que no compita con el radio. */ .wala-redesign .wala-step-event-head.accordion-button::after { width: 14px; height: 14px; background-size: 14px 14px; opacity: 0.6; } [data-bs-theme="dark"] .wala-redesign .wala-step-event-head.accordion-button::after { filter: invert(0.9); } /* Radio dentro del head — círculo plano con interior brand cuando :checked. */ .wala-redesign .wala-step-event-head .external-event-radio.form-check-input { width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--wala-border); background: var(--wala-surface); flex-shrink: 0; } .wala-redesign .wala-step-event-head .external-event-radio.form-check-input:checked { background-color: var(--wala-brand); border-color: var(--wala-brand); box-shadow: none; } .wala-redesign .wala-step-event-head .external-event-radio.form-check-input:focus { box-shadow: 0 0 0 3px rgba(81, 67, 217, 0.15); border-color: var(--wala-brand); } .wala-redesign .wala-step-event-title { color: var(--wala-ink); font-size: 14px; font-weight: 500; line-height: 1.3; text-align: left; } .wala-redesign .wala-step-event-item.is-selected .wala-step-event-title { color: var(--wala-brand); font-weight: 600; } .wala-redesign .wala-step-event-item.is-selected .wala-step-event-head.accordion-button { background: transparent !important; color: var(--wala-brand) !important; } /* Body con grid de chips */ .wala-redesign .wala-step-event-body.accordion-body { padding: 4px 16px 16px !important; } .wala-redesign .wala-step-event-hours-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wala-ink-3); margin: 4px 0 8px; } .wala-redesign .wala-step-event-hours { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } @media (max-width: 575.98px) { .wala-redesign .wala-step-event-hours { grid-template-columns: repeat(3, 1fr); } } /* Chip de hora — fiel al `TimeChip` del .jsx. */ .wala-redesign .wala-step-event-hour { width: 100%; padding: 10px 4px; border-radius: 10px; border: 1px solid var(--wala-border); background: var(--wala-surface); color: var(--wala-ink); font-size: 13.5px; font-weight: 500; line-height: 1.2; cursor: pointer; transition: background .12s, border-color .12s, color .12s; font-family: inherit; } .wala-redesign .wala-step-event-hour:hover:not(:disabled) { border-color: var(--wala-ink); background: var(--wala-surface-2); } .wala-redesign .wala-step-event-hour.is-selected { background: rgba(81, 67, 217, 0.10); border-color: rgba(81, 67, 217, 0.28); color: var(--wala-brand); font-weight: 600; } [data-bs-theme="dark"] .wala-redesign .wala-step-event-hour.is-selected { background: rgba(110, 96, 238, 0.18); border-color: rgba(110, 96, 238, 0.45); color: #b9b1f0; } /* Foot con CTA Continuar */ .wala-redesign .wala-step-event-foot { display: flex; justify-content: flex-end; margin-top: 14px; } /* ========================================================================== STEP 2 — Tus datos personales (Dirección A · step2.jsx Variant A) Vista: resources/views/booking/step2-new.blade.php Partials: customer_data-new, customer_pax_info-new, customer_policies-new. Reusa: .wala-step-card, .wala-step-card--side, .wala-step-cta, .wala-step-sidebar, .wala-step-experience, .wala-step-summary, .wala-step-total, .wala-step-mobile-bar. Aquí sólo lo nuevo de step2: form fields, banner login, attendee cards, terms inline, breakdown PHP-rendered y override del partial legacy customer_pax_extras (Opción A1 — sin partial new). ========================================================================== */ /* ----- Login banner inline (variante A · arriba del form) ----- */ .wala-redesign .wala-step-login { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 18px; border-radius: 10px; background: var(--wala-brand-soft); border: 1px solid rgba(81, 67, 217, 0.18); } [data-bs-theme="dark"] .wala-redesign .wala-step-login { background: rgba(110, 96, 238, 0.10); border-color: rgba(110, 96, 238, 0.25); } .wala-redesign .wala-step-login__text { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--wala-ink-2); line-height: 1.4; } .wala-redesign .wala-step-login__text i { color: var(--wala-brand); font-size: 14px; flex-shrink: 0; } .wala-redesign .wala-step-login__text strong { color: var(--wala-ink); font-weight: 600; } .wala-redesign .wala-step-login__btn { padding: 7px 14px; border-radius: 8px; background: var(--wala-ink); color: var(--wala-surface) !important; border: 0; cursor: pointer; font-size: 13px; font-weight: 600; text-decoration: none; transition: filter .15s; flex-shrink: 0; } .wala-redesign .wala-step-login__btn:hover { filter: brightness(0.92); text-decoration: none; } [data-bs-theme="dark"] .wala-redesign .wala-step-login__btn { color: #0f1014 !important; } /* ----- Form grid + fields (FormBlock del .jsx) ----- */ .wala-redesign .wala-form-grid { display: grid; gap: 14px; } .wala-redesign .wala-form-row { display: grid; gap: 14px; } .wala-redesign .wala-form-row--2col { grid-template-columns: 1fr 1fr; } .wala-redesign .wala-form-row--phone { grid-template-columns: 140px 1fr; } @media (max-width: 575.98px) { .wala-redesign .wala-form-row--2col, .wala-redesign .wala-form-row--phone { grid-template-columns: 1fr; } } .wala-redesign .wala-field { display: block; } .wala-redesign .wala-field__label { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--wala-ink-2); } .wala-redesign .wala-field__req { color: #d97706; margin-left: 3px; } [data-bs-theme="dark"] .wala-redesign .wala-field__req { color: #f59e0b; } .wala-redesign .wala-field__optional { font-size: 12px; color: var(--wala-ink-3); font-weight: 400; } .wala-redesign .wala-field__input { width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--wala-border); background: var(--wala-surface); color: var(--wala-ink); font-size: 14.5px; font-family: inherit; outline: none; transition: border-color .12s, background .12s; line-height: 1.4; } .wala-redesign .wala-field__input::placeholder { color: var(--wala-ink-3); } .wala-redesign .wala-field__input:focus { border-color: var(--wala-ink); background: var(--wala-surface); } .wala-redesign .wala-field.has-error .wala-field__input { border-color: #dc2626; } .wala-redesign .wala-field__hint { font-size: 12px; color: var(--wala-ink-3); margin-top: 5px; } .wala-redesign .wala-field__select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8d96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; padding-right: 38px; } /* Wrapper del select2 del prefijo — debe verse igual que .wala-field__input. Las reglas globales en general.css están con !important, así que aquí replicamos !important con la especificidad de .wala-redesign + .wala-field__prefix para vencerlas. Reemplazamos también la flecha nativa de select2 (un con borders triangulares) por un SVG chevron idéntico al de .wala-field__select para que la familia visual sea coherente. */ .wala-redesign .wala-field__prefix { width: 100%; } .wala-redesign .wala-field__prefix .select2-container { width: 100% !important; display: block !important; } .wala-redesign .wala-field__prefix .select2-container--default .select2-selection--single { height: 44px !important; min-height: 44px !important; padding: 0 38px 0 14px !important; border: 1px solid var(--wala-border) !important; border-radius: 10px !important; background: var(--wala-surface) !important; display: flex !important; align-items: center !important; box-sizing: border-box !important; transition: border-color .12s, background .12s !important; } .wala-redesign .wala-field__prefix .select2-container--default.select2-container--focus .select2-selection--single, .wala-redesign .wala-field__prefix .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--wala-ink) !important; outline: none !important; } .wala-redesign .wala-field__prefix .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--wala-ink) !important; font-size: 14.5px !important; font-weight: 500 !important; line-height: 1.4 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; width: 100%; } /* Bandera dentro del rendered: tamaño consistente con un input compacto */ .wala-redesign .wala-field__prefix .select2-container--default .select2-selection--single .select2-selection__rendered .flag-img { width: 18px !important; height: 13px !important; margin-right: 6px !important; border-radius: 2px; flex-shrink: 0; } /* Sustitución de la flecha nativa por chevron SVG idéntico al de .wala-field__select. Ocultamos el y pintamos el chevron en el contenedor .select2-selection__arrow vía background. */ .wala-redesign .wala-field__prefix .select2-container--default .select2-selection--single .select2-selection__arrow { position: absolute !important; top: 0 !important; right: 12px !important; height: 100% !important; width: 14px !important; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8d96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 14px !important; } .wala-redesign .wala-field__prefix .select2-container--default .select2-selection--single .select2-selection__arrow b { display: none !important; } [data-bs-theme="dark"] .wala-redesign .wala-field__prefix .select2-container--default .select2-selection--single { background: var(--wala-surface) !important; } /* Disclosure de parcel (mismo patrón que customer_data) */ .wala-redesign .wala-step-parcel { margin-top: 6px; padding: 14px 16px; border: 1px dashed var(--wala-border); border-radius: 10px; background: var(--wala-surface-2); } .wala-redesign .wala-step-parcel__toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--wala-ink); margin: 0; } .wala-redesign .wala-step-parcel__toggle .form-check-input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--wala-brand); } /* Disclosure de registro de cuenta */ .wala-redesign .wala-step-register { margin-top: 6px; padding: 14px 16px; border: 1px solid var(--wala-border); border-radius: 10px; background: var(--wala-surface-2); } .wala-redesign .wala-step-register__toggle { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 0; } .wala-redesign .wala-step-register__toggle input[type="checkbox"] { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: var(--wala-brand); } .wala-redesign .wala-step-register__text { font-size: 13px; color: var(--wala-ink-2); line-height: 1.5; } .wala-redesign .wala-step-register__pass { margin-top: 14px; } .wala-redesign .wala-step-register__hint { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; margin-bottom: 10px; border-radius: 8px; background: var(--wala-surface); border: 1px solid var(--wala-border); font-size: 12.5px; color: var(--wala-ink-3); } /* ----- Pax cards (AttendeeCard del .jsx) ----- */ .wala-redesign .wala-pax-list { display: grid; gap: 12px; } .wala-redesign .wala-pax-card { border: 1px solid var(--wala-border); background: var(--wala-surface); border-radius: 12px; padding: 16px 18px; } .wala-redesign .wala-pax-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .wala-redesign .wala-pax-card__num { width: 28px; height: 28px; border-radius: 999px; background: var(--wala-brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; flex-shrink: 0; font-variant-numeric: tabular-nums; } .wala-redesign .wala-pax-card__title { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; color: var(--wala-ink); letter-spacing: -0.005em; } .wala-redesign .wala-pax-card__type { color: var(--wala-ink-3); font-weight: 500; font-size: 13px; } .wala-redesign .wala-pax-card__copy { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--wala-border); background: var(--wala-surface); color: var(--wala-ink-2); font-size: 12px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-family: inherit; transition: all .15s; } .wala-redesign .wala-pax-card__copy:hover { background: var(--wala-surface-2); color: var(--wala-ink); border-color: var(--wala-ink); } .wala-redesign .wala-pax-card__body { display: grid; gap: 12px; } /* select2 dentro de pax_info — wrapper alrededor del .select2-country (init externo). Si no se inicializa select2 sobre estos selects, el browser muestra el