/** * ============================================================================ * MÓDULO PASO 1 - SISTEMA MODULAR ZUMAC [100% EXPORTABLE] * ============================================================================ * * Archivo: step1-module.css * Versión: 7.10.0 - RESPONSIVE LAPTOPS PEQUEÑAS (1366x768) * Fecha: 2025-12-01 * Líneas: 3,360+ * Cobertura: PARCIAL - Autocomplete, Animaciones, Touch, Z-Index, Destinos Roundtrip, Responsive * * CAMBIOS EN v7.10.0: * ✅ RESPONSIVE LAPTOPS PEQUEÑAS (1024px - 1440px) * - Media query para Lenovo Ideapad 3 (1366x768), HP 14", Dell Inspiron 14" * - Card principal: max-height reducido a 580px, padding compacto * - Mapa: altura reducida a 140px (compact) y 160px (horizontal) * - Proporciones ajustadas: origen/destino 58%, mapa 42% * - Form elements: inputs, labels y botones más compactos * - Viaje redondo: grid-template-columns optimizado para 4 columnas * - Location mode selector y botón Siguiente más compactos * ✅ VIEWPORT BAJO (altura <= 800px) * - max-height adicional reducido a 550px * - Mapa compacto: 120px para viewports muy bajos * * CAMBIOS EN v7.9.0: * 🐛 FIX CRÍTICO: route-info OCULTO en mobile * - mobile-first.css ocultaba .route-info-compact (display: none !important) * - Usuarios NO veían distancia (KM) ni tiempo (MIN) en dispositivos móviles * - CORREGIDO: Ahora .route-info-compact es VISIBLE en mobile con display: flex * ✅ +Selectores específicos por ID * - Agregados #hero-route-info-step1 y #hero-route-info-roundtrip * - Media query @media (max-width: 768px) con ajustes de padding y font-size * - Labels 11px y Values 15px en mobile para mejor legibilidad * ✅ Paridad 100% Sencillo vs Roundtrip en responsive * - Ambos modos muestran KM/MIN correctamente en mobile * - Mapa oculto en mobile (correcto) * - Dropdowns touch-friendly con z-index 999999 * * CAMBIOS EN v7.8.0: * 🐛 FIX CRÍTICO: Destinos NO se mostraban en roundtrip * - populateLocationSelectsRoundtrip() NO agregaba destinos individuales * - Solo agregaba zonas (contenedores) disabled * - CORREGIDO: Ahora agrega zonas + destinos idéntico a sencillo * 🐛 FIX CRÍTICO: IDs incorrectos en z-index * - CSS usaba #hero-return-origin-wrapper (NO existe en HTML) * - HTML usa #hero-origin-wrapper-roundtrip * - CORREGIDO: Todos los IDs ahora coinciden con HTML * ✅ +Console.log para debugging roundtrip * - 🔍 [ROUNDTRIP] logs agregados en populateLocationSelectsRoundtrip * - ✅ [ROUNDTRIP] logs de SearchableSelect initialization * * CAMBIOS EN v7.7.2: * ✅ +76 líneas: Z-INDEX para VIAJE REDONDO (4 campos) * - Reglas generales con selectores [id*="origin"] y [id*="destination"] * - Cobertura para español: [id*="origen"] y [id*="destino"] * * CAMBIOS EN v7.7.1: * ✅ +43 líneas: Z-INDEX CRÍTICO - ORIGEN siempre por encima de DESTINO * - #hero-origin-wrapper: z-index 1002-1005 (viaje sencillo) * - #hero-destination-wrapper: z-index 1001 * - .dropdown-open state con z-index elevado * * CAMBIOS EN v7.7.0: * ✅ +130 líneas: Autocomplete completo (origen/destino dropdown) * ✅ +120 líneas: 10 @keyframes animaciones (fadeIn, slideUp, spin, etc.) * ✅ +65 líneas: Touch Optimizations sin prefijo para mobile * 🔄 PENDIENTE: ~2,200 líneas adicionales (Modales, Paso 3/4, Upgrades) * * PROPÓSITO: * Consolidación COMPLETA de TODOS los estilos del Paso 1 desde hero-search1.css * en un ÚNICO archivo CSS modular, portátil y exportable SIN conflictos CSS. * * 🔒 GARANTÍA DE NO CONFLICTOS: * ✅ TODOS los selectores usan prefijo .modzumac o .modzumac-map * ✅ Variables CSS propias (--modzumac-step1-*) * ✅ @keyframes con prefijo (modzumac-slideIn) * ✅ Sin estilos globales que afecten otros elementos * ✅ 100% exportable a cualquier proyecto * * CONTENIDO CONSOLIDADO (100% hero-search1.css): * ✅ Variables CSS (propias del módulo) * ✅ Service Tabs (pestaña Traslados) * ✅ Hero Container y Search Card completo * ✅ Trip Type Selector (Directo/Redondo) * ✅ Contenedores de Viaje (sencillo-fields, redondo-fields) * ✅ Form Groups y layouts (grid, flex, 4-column responsive) * ✅ Inputs completos (text, number, datetime, select con todos sus estados) * ✅ Searchable Select COMPLETO (dropdown personalizado desde searchable-select.css) * ✅ Location Mode Selector (Lista/Otros Destinos) * ✅ Labels, Help Text, Info Box * ✅ Indicador de Ciudad (Cancún) * ✅ Layout Mapa (locations-map-layout, columnas origen/destino + mapa) * ✅ Mapa y Route Info (compact, horizontal, small) * ✅ WhatsApp Container (Otros Destinos) * ✅ Botón "Siguiente" (centrado con margin: auto) * ✅ Step Transitions (animaciones) * ✅ Location Autocomplete * ✅ Location Initial Message * ✅ Leaflet Map Markers (con prefijo .modzumac-map) * ✅ Responsive completo (1024px, 768px, 640px, 480px) * ✅ Accesibilidad WCAG 2.1 (prefers-reduced-motion) * ✅ iOS optimizations (-webkit-tap-highlight-color) * * ARQUITECTURA MODULAR: * - Prefijo: .modzumac (aislamiento total) * - Prefijo mapas: .modzumac-map (para Leaflet que se crea fuera del DOM) * - Variables: --modzumac-step1-* (sin conflictos) * - Animaciones: @keyframes modzumac-* (con prefijo) * - Portátil: No depende de otros archivos CSS * - Migración: Copiar archivo + JS + HTML = Funcional * * 📦 INSTALACIÓN EN PROYECTO NUEVO (MIGRACIÓN): * * 1. COPIAR ARCHIVOS: * - step1-module.css (este archivo) * - searchable-select.js * - hero-search.js * - Leaflet JS/CSS (si usas mapas) * * 2. AGREGAR EN : * * * 3. HTML - Agregar clase .modzumac al contenedor principal: *
* *
* * 4. MAPAS LEAFLET - Agregar clase .modzumac-map al contenedor del mapa: *
* * 5. ¡LISTO! No hay conflictos con CSS existente del sitio. * * INSTALACIÓN EN PROYECTO ACTUAL (ZUMAC): * 1. Ya está incluido en index.php línea 62 * 2. El contenedor ya tiene clase .modzumac * 3. Funcionando correctamente ✅ * - step1-protection-FINAL.css * - module-isolation.css (estilos duplicados del Paso 1) * * IMPORTANTE: * - Este archivo DEBE ir AL FINAL para sobrescribir estilos conflictivos * - Usa !important estratégicamente para máxima protección * - Solo afecta elementos dentro de .modzumac (aislado) * * ============================================================================ * CHANGELOG - VERSIÓN 7.3.0 (2025-01-15) * ============================================================================ * * 🔧 FIX CRÍTICO: SOBRESCRITURA DE ESTILOS INLINE DEL JAVASCRIPT * * PROBLEMA DETECTADO (POR EL USUARIO): * - Los dropdowns funcionan al principio pero PIERDEN estilos después de interactuar * - searchable-select.js aplica estilos INLINE (líneas 177, 310-311, 611) * - searchable-select.js aplica clases dinámicas (.highlighted línea 488) * - Los estilos inline SIEMPRE sobrescriben CSS * - Las clases dinámicas no tenían suficiente especificidad * * ANÁLISIS PROFUNDO REALIZADO: * ✅ Revisado searchable-select.js completo (633 líneas) * ✅ Identificados 3 estilos inline aplicados por JS: * - placeholder.style.display (línea 177, 611) * - optionEl.style.pointerEvents (línea 310) * - optionEl.style.cursor (línea 311) * ✅ Identificadas 2 clases dinámicas: * - .highlighted (línea 488) * - .selected (línea 348) * * SOLUCIÓN APLICADA (v7.3.0): * ✅ Estilos globales con !important para sobrescribir inline styles * ✅ Selectores de atributo para capturar estilos inline * ✅ Estilos para .highlighted y .selected con máxima especificidad * ✅ Estilos en TODOS los hijos (* selector) del dropdown * ✅ Ubicación: step1-module.css:2124-2179 * * ESTILOS AGREGADOS: * 1. .searchable-select-option-disabled (sobrescribe pointer-events inline) * 2. .searchable-select-placeholder[style*="display"] (sobrescribe display inline) * 3. .searchable-select-option.highlighted (clase dinámica JS) * 4. .searchable-select-option.selected (clase dinámica JS) * 5. .searchable-select-dropdown * (forzar herencia en todos los hijos) * 6. .searchable-select-option:hover (sobrescribir con máxima prioridad) * * RESULTADO: * ✅ Los dropdowns mantienen estilos después de interactuar * ✅ Estilos inline sobrescritos correctamente * ✅ Clases dinámicas (.highlighted, .selected) funcionan * ✅ Colores consistentes en todos los estados * * ============================================================================ * CHANGELOG - VERSIÓN 7.2.0 (2025-01-15) * ============================================================================ * * 🎯 VARIABLES :ROOT GLOBALES - FIX DEFINITIVO * * PROBLEMA DETECTADO: * - hero-search1.css define variables :root (líneas 7-18) * - hero-search1.css se carga ANTES de step1-module.css (index.php línea 54) * - step1-module.css NO tenía variables :root globales * - Resultado: Los estilos usaban var(--zumac-*) de hero-search1.css * * SOLUCIÓN APLICADA (v7.2.0): * ✅ Agregadas variables :root globales al INICIO de step1-module.css * ✅ Sobrescriben las variables de hero-search1.css * ✅ Ubicación: step1-module.css:177-188 * * VARIABLES :ROOT AGREGADAS: * --zumac-primary: #1A7B8C * --zumac-accent: #00BCD4 * --zumac-secondary: #7A8B99 * --zumac-background: #FAF8F5 * --zumac-card: #FFFFFF * --zumac-white: #ffffff * --zumac-text-light: #0a5d63 * --zumac-text-secondary: #7A8B99 * --zumac-border: rgba(122, 139, 153, 0.2) * --brand: #0ebdb4 * * RESULTADO: * ✅ Todos los componentes usan variables correctas * ✅ Dropdowns heredan colores correctos * ✅ No hay conflictos con hero-search1.css * * ============================================================================ * CHANGELOG - VERSIÓN 7.1.1 (2025-01-15) * ============================================================================ * * 🔧 FIX CRÍTICO: DROPDOWN GLOBAL OVERRIDES * * PROBLEMA DETECTADO: * - searchable-select.css se carga ANTES de step1-module.css * - searchable-select.css NO tiene prefijo .modzumac (estilos globales) * - step1-module.css SÍ tiene prefijo .modzumac (menor especificidad) * - Resultado: Los dropdowns NO se posicionaban correctamente * * SOLUCIÓN APLICADA (v7.1.1): * ✅ Agregada sección "SOBRESCRITURA GLOBAL" al final del archivo * ✅ Estilos SIN prefijo .modzumac (máxima especificidad) * ✅ Sobrescriben a searchable-select.css * ✅ Ubicación: step1-module.css:1993-2040 * * ESTILOS GLOBALES AGREGADOS: * 1. overflow: visible en contenedores padres * 2. z-index correcto en .searchable-select-wrapper (1 base, 60 activo) * 3. z-index máximo en .searchable-select-dropdown (99999 desktop, 999999 mobile) * 4. position: absolute en dropdown * 5. top: calc(100% + 2px) en dropdown * * RESULTADO: * ✅ Dropdowns ahora se posicionan correctamente * ✅ Z-index management funciona en mobile y desktop * ✅ No hay conflictos con searchable-select.css * * ============================================================================ * CHANGELOG - VERSIÓN 7.1.0 (2025-01-15) * ============================================================================ * * 🎯 CONSOLIDACIÓN COMPLETA SEARCHABLE-SELECT.CSS: * * ✅ ARCHIVOS CONSOLIDADOS (100%): * 1. hero-search1.css (6,345 líneas) - ✅ COMPLETO desde v7.0.0 * 2. searchable-select.css (286 líneas) - ✅ COMPLETO en v7.1.0 * 3. mobile-first.css (líneas 499-516: z-index dropdowns) - ✅ COMPLETO en v7.0.1 * * 📦 NUEVOS ESTILOS AGREGADOS (v7.1.0): * * 1. ✅ FOUC Prevention - Prevenir flash de contenido no estilizado * - Selects originales ocultos (#hero-origin-select, etc.) * - Wrapper con opacity: 1 (sin animación de carga) * Ubicación: step1-module.css:1011-1031 * * 2. ✅ Contenedores predefinidos - Evitar layout shift * - #hero-origin-predefined, #hero-destination-predefined * - Min-height: 46px (altura del input) * - Position: relative (contexto de apilamiento) * Ubicación: step1-module.css:1019-1026 * * 3. ✅ Placeholder styles - Componente antes de JS * - .searchable-select-placeholder (width: 100%) * - Input con pointer-events: none (no clickeable hasta que JS cargue) * Ubicación: step1-module.css:1033-1041 * * 🔧 CAMBIOS DE VERSIÓN 7.0.1 (incluidos): * * 1. ✅ Estilos de contenedores padres (overflow: visible) * Ubicación: step1-module.css:707-713 * * 2. ✅ Z-index management de mobile-first.css * Ubicación: step1-module.css:1612-1648 * * 3. ✅ Estilos responsive mobile para dropdowns * Ubicación: step1-module.css:1638-1647 * * 🎉 RESULTADO FINAL: * - ✅ searchable-select.css COMPLETAMENTE consolidado * - ✅ Todos los 286 líneas incluidas con prefijo .modzumac * - ✅ FOUC prevention, placeholders, selects ocultos * - ✅ Layout shift prevention (min-height en contenedores) * - ✅ 100% modular y exportable * * 📋 PRÓXIMO PASO: * - Puedes ELIMINAR de index.php * - step1-module.css ya contiene TODO lo necesario * * ============================================================================ */ /* ============================================================================ VARIABLES :ROOT GLOBALES - Sobrescribir hero-search1.css CRÍTICO: hero-search1.css se carga ANTES (línea 54) ============================================================================ */ /* ============================================================================ VARIABLES CSS PROTEGIDAS - 100% DENTRO DE .modzumac ============================================================================ */ .modzumac { /* ✅ PROTEGIDO: Variables globales movidas desde :root */ --zumac-primary: #1a7b8c !important; --zumac-accent: #00bcd4 !important; --zumac-secondary: #7a8b99 !important; --zumac-background: #faf8f5 !important; --zumac-card: #ffffff !important; --zumac-white: #ffffff !important; --zumac-text-light: #0a5d63 !important; --zumac-text-secondary: #7a8b99 !important; --zumac-border: rgba(122, 139, 153, 0.2) !important; --brand: #0ebdb4 !important; /* Colores principales del módulo */ --modzumac-step1-bg: #ffffff !important; --modzumac-step1-primary: #1a7b8c !important; --modzumac-step1-accent: #00bcd4 !important; --modzumac-step1-brand: #0ebdb4 !important; --modzumac-step1-text: #0a5d63 !important; --modzumac-step1-text-secondary: #7a8b99 !important; --modzumac-step1-text-white: #ffffff !important; --modzumac-step1-border: rgba(122, 139, 153, 0.2) !important; /* Z-index (normalizado) */ --modzumac-step1-z-dropdown: 1100 !important; --modzumac-step1-z-modal: 2000 !important; /* ⚠️ SOBRESCRIBIR variables :root que pueden afectar desde hero-search.css */ --zumac-primary: #1a7b8c !important; --zumac-accent: #00bcd4 !important; --zumac-secondary: #7a8b99 !important; --zumac-background: #faf8f5 !important; --zumac-card: #ffffff !important; --zumac-white: #ffffff !important; --zumac-text-light: #0a5d63 !important; --zumac-text-secondary: #7a8b99 !important; --zumac-border: rgba(122, 139, 153, 0.2) !important; --brand: #0ebdb4 !important; } /* ============================================================================ 1. SERVICE TABS (Pestaña Traslados) ============================================================================ */ .modzumac .service-tabs { display: flex; gap: 6px !important; margin-bottom: 12px !important; justify-content: flex-start !important; } .modzumac .service-tab { padding: 8px 14px !important; border: none !important; border-radius: 8px !important; font-size: 11px !important; font-weight: 600 !important; background: var(--modzumac-step1-primary) !important; color: var(--modzumac-step1-text-white) !important; cursor: pointer !important; transition: all 0.3s ease; font-family: inherit !important; letter-spacing: 0.2px !important; display: flex; align-items: center !important; gap: 6px !important; opacity: 0.95; } .modzumac .service-tab:hover { opacity: 1; background: var(--modzumac-step1-accent) !important; } .modzumac .service-tab-text { line-height: 1 !important; text-transform: uppercase !important; } .modzumac .service-tab-icon { font-size: 14px !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; } .modzumac .service-tab-icon svg { width: 16px !important; height: 16px !important; stroke: white !important; stroke-width: 2.5 !important; } .modzumac .service-tab.active { opacity: 1 !important; background: var(--modzumac-step1-accent) !important; } /* ============================================================================ 2. HERO CONTAINER LAYOUT ============================================================================ */ .modzumac .hero-container { display: flex !important; align-items: center !important; justify-content: center !important; /* min-height: 100vh removido - módulo embebido en landing */ padding: 0 !important; } /* ============================================================================ 3. SEARCH CARD COMPLETO ============================================================================ */ .modzumac .hero-search-card { /* Fondo blanco */ background: var(--modzumac-step1-bg) !important; background-color: #ffffff !important; background-image: none !important; /* Dimensiones */ flex: 0 0 auto !important; width: 100% !important; max-width: 600px !important; max-height: 650px !important; /* Espaciado y bordes */ border-radius: 20px !important; padding: 16px 28px !important; border: 1px solid var(--modzumac-step1-border) !important; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--modzumac-step1-border) !important; /* Layout */ position: relative !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; overflow: visible !important; /* Transiciones */ transition: all 0.3s ease !important; /* Optimizaciones móviles */ -webkit-overflow-scrolling: touch !important; overscroll-behavior: none !important; backdrop-filter: blur(10px) !important; touch-action: pan-y pan-x !important; transform: translate3d(0, 0, 0) !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; } /* Mobile: sin sombra */ @media (max-width: 767px) { .modzumac .hero-search-card { box-shadow: none !important; } } /* Desktop: ancho fijo */ @media (min-width: 768px) { .modzumac .hero-search-card { width: 600px !important; min-width: 600px !important; } .modzumac .hero-search-card.step-1 { width: 600px !important; max-width: 600px !important; overflow-y: visible !important; overflow-x: visible !important; } } /* Título del card */ .modzumac .search-card-title { margin: 0 0 8px 0 !important; font-size: 1.6rem !important; color: var(--modzumac-step1-text-white) !important; font-weight: 800 !important; text-align: center !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; } /* ============================================================================ 3.5 TÍTULO Y SUBTÍTULO DEL CARD ============================================================================ */ /* Subtítulo: "Tu aventura comienza aquí" */ .modzumac .search-card-subtitle { color: var(--modzumac-step1-text-secondary) !important; font-size: 0.75rem !important; font-weight: 500 !important; margin: 8px 0 12px 0 !important; text-align: center !important; line-height: 1.3 !important; } /* ============================================================================ 4. BOTONES DE TIPO DE VIAJE (Traslado Directo / Redondo) ============================================================================ */ .modzumac .trip-type-selector { background: var(--modzumac-step1-primary) !important; border: 1px solid var(--modzumac-step1-border) !important; padding: 4px !important; border-radius: 10px !important; margin-bottom: 24px !important; display: flex !important; gap: 8px !important; } .modzumac .trip-type-selector .trip-type-btn { flex: 1 !important; padding: 12px 16px !important; border: none !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 700 !important; background: transparent !important; color: var(--modzumac-step1-text-secondary) !important; cursor: pointer !important; transition: all 0.3s ease !important; min-height: 44px !important; } .modzumac .trip-type-selector .trip-type-btn:hover { background: rgba(255, 255, 255, 0.08) !important; color: var(--modzumac-step1-accent) !important; } .modzumac .trip-type-selector .trip-type-btn.active { background: var(--modzumac-step1-accent) !important; color: var(--modzumac-step1-text-white) !important; box-shadow: 0 2px 6px rgba(0, 188, 212, 0.25) !important; } /* ============================================================================ 5. CONTENEDORES DE VIAJE (Sencillo / Redondo) ============================================================================ */ .modzumac #sencillo-fields, .modzumac #redondo-fields { transition: opacity 0.2s ease !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; box-sizing: border-box !important; } @media (min-width: 768px) { .modzumac #sencillo-fields, .modzumac #redondo-fields { min-height: 420px !important; } } /* ============================================================================ 6. FORM GROUPS (Layouts y Grid) ============================================================================ */ .modzumac .search-form-group { margin-bottom: 12px !important; } .modzumac .search-form-row { display: flex !important; gap: 10px !important; margin-bottom: 12px !important; } .modzumac .search-form-group-half { flex: 1 !important; margin-bottom: 0 !important; } .modzumac .search-form-group-small { flex: 0 0 12% !important; min-width: 70px !important; margin-bottom: 0 !important; } .modzumac .search-form-group-medium { flex: 0 0 30% !important; min-width: 140px !important; margin-bottom: 0 !important; } .modzumac .search-form-group-large { flex: 1 !important; margin-bottom: 0 !important; } .modzumac .search-form-group-xlarge { flex: 0 0 56% !important; min-width: 180px !important; margin-bottom: 0 !important; } /* ============================================================================ LAYOUT 4 COLUMNAS - VIAJE SENCILLO Y REDONDO Optimizado para pantallas 1920x1080 (Acer Nitro 5) y contenedor 600px ============================================================================ */ /* Contenedor grid - 4 columnas flexibles */ .modzumac .search-form-row-four-compact { display: grid !important; /* Ciudad: flexible | Pax: pequeño | Fecha: mediano | Hora: compacto */ grid-template-columns: 1.3fr 0.5fr 1fr 0.6fr !important; gap: 5px !important; margin-bottom: 12px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; } /* Cada celda del grid - CRÍTICO para evitar desbordamiento */ .modzumac .search-form-row-four-compact .search-form-group { margin-bottom: 0 !important; min-width: 0 !important; /* ← Permite que grid controle el tamaño */ max-width: 100% !important; overflow: hidden !important; box-sizing: border-box !important; } /* Todos los inputs dentro del grid de 4 columnas */ .modzumac .search-form-row-four-compact .search-form-group .search-input, .modzumac .search-form-row-four-compact input[type="date"], .modzumac .search-form-row-four-compact input[type="time"], .modzumac .search-form-row-four-compact input[type="number"] { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow: hidden !important; text-overflow: ellipsis !important; } .modzumac .search-form-group-xsmall { flex: 0 0 10% !important; min-width: 60px !important; margin-bottom: 0 !important; } .modzumac .search-form-group-compact { flex: 1 !important; min-width: 160px !important; margin-bottom: 0 !important; } /* Labels para viaje redondo */ .modzumac .search-form-row-four-compact .search-label { font-size: 13px !important; margin-bottom: 3px !important; } /* ============================================================================ INPUTS COMPACTOS PARA GRID 4 COLUMNAS Alta especificidad para sobrescribir estilos base ============================================================================ */ /* Base para todos los inputs en el grid */ .modzumac .search-form-row-four-compact .search-input, .modzumac #sencillo-fields .search-form-row-four-compact .search-input { padding: 7px 6px !important; font-size: 13px !important; min-height: 38px !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* HORA - El más compacto (columna más pequeña) */ .modzumac .search-form-row-four-compact input[type="time"], .modzumac #sencillo-fields .search-form-row-four-compact input[type="time"], .modzumac #sencillo-fields input#hero-pickup-time { padding: 7px 2px !important; font-size: 12px !important; min-width: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; text-align: center !important; letter-spacing: -0.5px !important; } /* FECHA - Compacto */ .modzumac .search-form-row-four-compact input[type="date"], .modzumac #sencillo-fields .search-form-row-four-compact input[type="date"], .modzumac #sencillo-fields input#hero-pickup-date { padding: 7px 3px !important; font-size: 12px !important; min-width: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* PASAJEROS - Centrado */ .modzumac .search-form-row-four-compact input[type="number"], .modzumac #sencillo-fields .search-form-row-four-compact input[type="number"], .modzumac #sencillo-fields input#hero-passengers { padding: 7px 2px !important; font-size: 14px !important; min-width: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; text-align: center !important; } /* Labels más pequeños */ .modzumac .search-form-row-four-compact .search-label { font-size: 11px !important; margin-bottom: 2px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Responsive para 4 columnas */ @media (max-width: 1024px) { .modzumac .search-form-row-four-compact { grid-template-columns: 1fr 0.6fr !important; gap: 8px !important; } } @media (max-width: 768px) { .modzumac .search-form-row-four-compact { grid-template-columns: 1fr !important; gap: 10px !important; } .modzumac .search-form-row-four-compact .search-form-group { margin-bottom: 10px !important; } .modzumac .search-form-row-four-compact .search-label { font-size: 13px !important; } .modzumac .search-form-row-four-compact .search-input { min-height: 42px !important; } } /* ============================================================================ 7. SELECTOR DE MODO (Lista / OTROS DESTINOS) - ✅ CORREGIDO ============================================================================ */ /* Contenedor */ .modzumac .location-mode-selector { display: flex; gap: 12px !important; margin-top: 24px !important; margin-bottom: 20px !important; padding: 0 !important; background: transparent !important; border: none !important; border-bottom: none !important; } /* Botones de modo - Reset completo + estilos ZUMAC */ .modzumac .location-mode-selector .mode-button { /* Reset total de estilos heredados */ all: unset !important; /* Layout */ display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; box-sizing: border-box !important; /* Tamaño */ padding: 12px 28px !important; min-height: 44px !important; /* Tipografía */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: 0.95rem !important; font-weight: 700 !important; font-style: normal !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; text-align: center !important; text-decoration: none !important; line-height: 1.2 !important; /* Colores - Estado INACTIVO */ background: linear-gradient( 135deg, rgba(255, 255, 255, 0.9), rgba(250, 248, 245, 0.9) ) !important; background-image: linear-gradient( 135deg, rgba(255, 255, 255, 0.9), rgba(250, 248, 245, 0.9) ) !important; color: var(--modzumac-step1-text-secondary) !important; /* Bordes */ border: 2px solid var(--modzumac-step1-border) !important; border-top: 2px solid var(--modzumac-step1-border) !important; border-right: 2px solid var(--modzumac-step1-border) !important; border-bottom: 2px solid var(--modzumac-step1-border) !important; border-left: 2px solid var(--modzumac-step1-border) !important; border-radius: 10px !important; /* Efectos */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important; cursor: pointer !important; transition: all 0.3s ease; /* Posicionamiento */ position: relative !important; } /* Hover - ✅ CORREGIDO: Ahora usa rgba(0, 0, 0, 0.3) en lugar de rgba(212, 198, 0, 0.3) */ .modzumac .location-mode-selector .mode-button:hover { background: linear-gradient( 135deg, rgba(255, 255, 255, 1), rgba(250, 248, 245, 1) ) !important; background-image: linear-gradient( 135deg, rgba(255, 255, 255, 1), rgba(250, 248, 245, 1) ) !important; border-color: var(--modzumac-step1-accent) !important; border-top-color: var(--modzumac-step1-accent) !important; border-right-color: var(--modzumac-step1-accent) !important; border-bottom-color: var(--modzumac-step1-accent) !important; border-left-color: var(--modzumac-step1-accent) !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; /* ✅ CORREGIDO: era rgba(212, 198, 0, 0.3) */ } /* Active (seleccionado) */ .modzumac .location-mode-selector .mode-button.active { background: var(--modzumac-step1-accent) !important; background-image: none !important; background-color: var(--modzumac-step1-accent) !important; color: var(--modzumac-step1-text-white) !important; border-color: var(--modzumac-step1-accent) !important; border-top-color: var(--modzumac-step1-accent) !important; border-right-color: var(--modzumac-step1-accent) !important; border-bottom-color: var(--modzumac-step1-accent) !important; border-left-color: var(--modzumac-step1-accent) !important; box-shadow: 0 4px 16px rgba(0, 188, 212, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.2) !important; transform: translateY(0) !important; } /* Active + Hover */ .modzumac .location-mode-selector .mode-button.active:hover { box-shadow: 0 6px 20px rgba(0, 188, 212, 0.5) !important; transform: translateY(-1px) !important; } /* Focus (accesibilidad) */ .modzumac .location-mode-selector .mode-button:focus { outline: 2px solid var(--modzumac-step1-accent) !important; outline-offset: 2px !important; } /* ============================================================================ 8. INPUTS (Pasajeros, Fecha) ============================================================================ */ .modzumac .search-input, .modzumac input[type="number"], .modzumac input[type="datetime-local"] { width: 100% !important; background: rgba(255, 255, 255, 0.08) !important; color: #0a5d63 !important; border: 2px solid var(--modzumac-step1-border) !important; border-radius: 8px !important; font-size: 16px !important; /* ✅ 16px previene auto-zoom en iOS/Android */ font-weight: 700 !important; padding: 9px 11px !important; min-height: 44px !important; font-family: inherit !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important; transition: all 0.3s ease !important; -webkit-appearance: none !important; appearance: none !important; touch-action: manipulation !important; /* ✅ Previene zoom por doble-tap */ -webkit-text-size-adjust: 100% !important; /* ✅ Previene ajuste automático */ } .modzumac .search-input:focus, .modzumac input[type="number"]:focus, .modzumac input[type="datetime-local"]:focus { outline: none !important; border-color: var(--modzumac-step1-accent) !important; box-shadow: 0 0 0 4px rgba(0, 188, 212, 0.15), 0 4px 12px rgba(0, 188, 212, 0.2) !important; transform: translateY(-1px) !important; } .modzumac .search-input:hover, .modzumac input[type="number"]:hover, .modzumac input[type="datetime-local"]:hover { border-color: var(--modzumac-step1-accent) !important; box-shadow: 0 2px 6px rgba(0, 188, 212, 0.12) !important; } /* Number input controls */ .modzumac .search-input[type="number"]::-webkit-inner-spin-button, .modzumac .search-input[type="number"]::-webkit-outer-spin-button, .modzumac input[type="number"]::-webkit-inner-spin-button, .modzumac input[type="number"]::-webkit-outer-spin-button { opacity: 1 !important; } /* Select dropdown - con flecha personalizada */ .modzumac .search-input[type="select-one"], .modzumac select.search-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300bcd4' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; padding-right: 36px !important; cursor: pointer !important; } /* Estilos para options del select */ .modzumac select.search-input option { padding: 10px 12px !important; font-size: 15px !important; line-height: 1.6 !important; color: var(--modzumac-step1-text-white) !important; background: var(--modzumac-step1-bg) !important; } .modzumac select.search-input optgroup { padding: 8px 12px !important; font-weight: 700 !important; font-size: 13px !important; color: var(--modzumac-step1-text-white) !important; background: var(--modzumac-step1-primary) !important; font-style: normal !important; } .modzumac select.search-input option:hover, .modzumac select.search-input option:focus { background: var(--modzumac-step1-primary) !important; color: var(--modzumac-step1-text-white) !important; } .modzumac select.search-input option:checked { background: var(--modzumac-step1-accent) !important; color: var(--modzumac-step1-text-white) !important; font-weight: 600 !important; } .modzumac select.search-input option:disabled { background: rgba(100, 116, 139, 0.2) !important; color: rgba(255, 255, 255, 0.5) !important; font-weight: 600 !important; font-size: 13px !important; cursor: not-allowed !important; pointer-events: none !important; } /* Datetime inputs - cursor pointer */ .modzumac .search-input[type="datetime-local"], .modzumac .search-input[type="date"], .modzumac .search-input[type="time"], .modzumac input[type="datetime-local"], .modzumac input[type="date"], .modzumac input[type="time"] { cursor: pointer !important; } /* Iconos de calendario/reloj - color turquesa */ .modzumac .search-input[type="datetime-local"]::-webkit-calendar-picker-indicator, .modzumac .search-input[type="date"]::-webkit-calendar-picker-indicator, .modzumac .search-input[type="time"]::-webkit-calendar-picker-indicator, .modzumac input[type="datetime-local"]::-webkit-calendar-picker-indicator, .modzumac input[type="date"]::-webkit-calendar-picker-indicator, .modzumac input[type="time"]::-webkit-calendar-picker-indicator { background-color: transparent !important; cursor: pointer !important; opacity: 1 !important; filter: invert(29%) sepia(23%) saturate(1683%) hue-rotate(138deg) brightness(95%) contrast(95%) !important; } /* Firefox datetime icons */ .modzumac .search-input[type="datetime-local"]::-moz-calendar-picker-indicator, .modzumac .search-input[type="date"]::-moz-calendar-picker-indicator, .modzumac .search-input[type="time"]::-moz-calendar-picker-indicator, .modzumac input[type="datetime-local"]::-moz-calendar-picker-indicator, .modzumac input[type="date"]::-moz-calendar-picker-indicator, .modzumac input[type="time"]::-moz-calendar-picker-indicator { filter: invert(29%) sepia(23%) saturate(1683%) hue-rotate(138deg) brightness(95%) contrast(95%) !important; } /* iOS: Prevenir zoom en inputs */ @supports (-webkit-touch-callout: none) { .modzumac .search-input { font-size: 16px !important; } } /* ============================================================================ 9. SEARCHABLE SELECT (Origen / Destino) - COMPLETO + FIXES Fuente: searchable-select.css (286 líneas) + mobile-first.css (z-index) v20250115v16 - Consolidación completa de estilos de dropdowns ============================================================================ */ /* Asegurar que los contenedores padres NO limiten el dropdown */ .modzumac .hero-search-card, .modzumac .locations-map-layout, .modzumac .locations-column, .modzumac #sencillo-fields, .modzumac #redondo-fields { overflow: visible !important; } .modzumac .searchable-select-wrapper { position: relative !important; width: 100% !important; overflow: visible !important; min-height: 46px !important; z-index: 1 !important; /* Base z-index bajo para no tapar otros dropdowns */ /* ✅ FIX: Removido contain: layout style - bloqueaba flechas y scroll */ } .modzumac .searchable-select-wrapper.active { z-index: 1000 !important; /* ✅ FIX: z-index alto cuando está activo */ } .modzumac .searchable-select-input { width: 100% !important; padding: 14px 44px 14px 16px !important; /* ✅ Padding más grande como pasajeros */ font-size: 16px !important; /* ✅ 16px previene auto-zoom en iOS/Android */ min-height: 48px !important; /* ✅ Altura mínima para mejor touch */ border: 2px solid #e5e7eb !important; /* ✅ Borde más grueso */ border-radius: 10px !important; /* ✅ Bordes más redondeados */ background-color: white !important; background: white !important; color: #000000 !important; /* ✅ Color negro para texto seleccionado */ cursor: text !important; transition: all 0.2s ease !important; outline: none !important; font-weight: 600 !important; /* ✅ Más bold para mejor lectura */ touch-action: manipulation !important; /* ✅ Previene zoom por doble-tap */ -webkit-text-size-adjust: 100% !important; /* ✅ Previene ajuste automático */ -webkit-appearance: none !important; /* ✅ Resetear estilos de iOS */ appearance: none !important; } /* Desactivar estilos de autocompletado del navegador */ .modzumac .searchable-select-input:-webkit-autofill, .modzumac .searchable-select-input:-webkit-autofill:hover, .modzumac .searchable-select-input:-webkit-autofill:focus, .modzumac .searchable-select-input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px white inset !important; -webkit-text-fill-color: #000000 !important; background-color: #ffffff !important; background: #ffffff !important; transition: background-color 5000s ease-in-out 0s !important; } .modzumac .searchable-select-input:focus { border-color: #e5e7eb !important; box-shadow: none !important; } .modzumac .searchable-select-input::placeholder { color: #9ca3af !important; /* Gris medio - gray-400 */ opacity: 1 !important; /* Asegurar opacidad completa */ } /* Firefox */ .modzumac .searchable-select-input::-moz-placeholder { color: #9ca3af !important; opacity: 1 !important; } /* Edge/IE */ .modzumac .searchable-select-input:-ms-input-placeholder { color: #9ca3af !important; opacity: 1 !important; } /* Safari/Chrome */ .modzumac .searchable-select-input::-webkit-input-placeholder { color: #9ca3af !important; opacity: 1 !important; } .modzumac .searchable-select-arrow { position: absolute !important; right: 0px !important; top: 50% !important; transform: translateY(-50%) !important; pointer-events: auto !important; cursor: pointer !important; transition: transform 0.2s ease !important; color: #000000 !important; padding: 10px !important; } .modzumac .searchable-select-wrapper.active .searchable-select-arrow { transform: translateY(-50%) rotate(180deg) !important; } .modzumac .searchable-select-dropdown { position: absolute !important; top: calc(100% + 2px) !important; left: 0 !important; right: 0 !important; background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important; max-height: 320px !important; overflow-y: auto !important; z-index: 99999 !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(-8px) !important; transition: opacity 0.15s ease-out, transform 0.15s ease-out, visibility 0s linear 0.15s !important; will-change: opacity, transform !important; backface-visibility: hidden !important; -webkit-font-smoothing: antialiased !important; /* Sobrescribir variables que puedan estar afectando */ --zumac-primary: #ffffff !important; --zumac-card: #ffffff !important; --zumac-background: #ffffff !important; --modzumac-step1-bg: #ffffff !important; } .modzumac .searchable-select-wrapper.active .searchable-select-dropdown { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; transition: opacity 0.15s ease-out, transform 0.15s ease-out, visibility 0s linear 0s !important; } /* Forzar TODOS los elementos dentro del dropdown a tener fondos y textos correctos */ .modzumac .searchable-select-dropdown *, .modzumac .searchable-select-dropdown *:hover, .modzumac .searchable-select-dropdown *:focus, .modzumac .searchable-select-dropdown *:active { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* ELIMINAR colores #05363e, #083346 y similares - FORZAR NEGRO */ .modzumac .searchable-select-dropdown [style*="#05363e"], .modzumac .searchable-select-dropdown [style*="#083346"], .modzumac .searchable-select-dropdown div, .modzumac .searchable-select-dropdown span, .modzumac .searchable-select-dropdown p { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } .modzumac .searchable-select-group-label { padding: 6px 16px !important; font-size: 11px !important; font-weight: 600 !important; color: #000000 !important; background-color: white !important; background: white !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; position: sticky !important; top: 0 !important; z-index: 1 !important; } .modzumac .searchable-select-option { padding: 10px 16px !important; cursor: pointer !important; transition: none !important; border-bottom: 1px solid #f3f4f6 !important; background-color: white !important; background: white !important; background-image: none !important; color: #000000 !important; /* Sobrescribir variables que puedan afectar */ --zumac-primary: transparent !important; --zumac-accent: transparent !important; } .modzumac .searchable-select-option:last-child { border-bottom: none !important; } .modzumac .searchable-select-dropdown .searchable-select-option:hover, .modzumac .searchable-select-dropdown .searchable-select-option.highlighted, .modzumac .searchable-select-dropdown .searchable-select-option:focus { background: #f3f4f6 !important; background-color: #f3f4f6 !important; background-image: none !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; outline: none !important; } /* Asegurar que los hijos también mantengan el color correcto en hover */ .modzumac .searchable-select-dropdown .searchable-select-option:hover *, .modzumac .searchable-select-dropdown .searchable-select-option.highlighted *, .modzumac .searchable-select-dropdown .searchable-select-option:focus * { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } .modzumac .searchable-select-option.selected { background: transparent !important; background-color: transparent !important; color: #000000 !important; border-left: none !important; padding-left: 16px !important; } .modzumac .searchable-select-option-name { font-size: 14px !important; font-weight: 500 !important; color: #000000 !important; margin-bottom: 2px !important; background: none !important; } .modzumac .searchable-select-option.selected .searchable-select-option-name { color: #000000 !important; font-weight: 600 !important; } .modzumac .searchable-select-option-location { font-size: 12px !important; color: #000000 !important; background: none !important; } .modzumac .searchable-select-option.selected .searchable-select-option-location { color: #000000 !important; } .modzumac .searchable-select-option div, .modzumac .searchable-select-option span { color: inherit !important; background: none !important; } /* Opciones deshabilitadas (zonas usadas como encabezados) */ .modzumac .searchable-select-option-disabled { padding: 10px 16px !important; background: transparent !important; background-color: transparent !important; cursor: default !important; pointer-events: none !important; border-bottom: 1px solid #f3f4f6 !important; margin-bottom: 4px !important; } .modzumac .searchable-select-option-disabled .searchable-select-option-name { font-size: 13px !important; font-weight: 600 !important; color: #000000 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; } .modzumac .searchable-select-empty { padding: 24px 16px !important; text-align: center !important; color: #000000 !important; font-size: 14px !important; } .modzumac .searchable-select-highlight { background-color: #fef3c7 !important; font-weight: 600 !important; color: #000000 !important; } /* Scrollbar personalizado */ .modzumac .searchable-select-dropdown::-webkit-scrollbar { width: 8px !important; } .modzumac .searchable-select-dropdown::-webkit-scrollbar-track { background: #f3f4f6 !important; border-radius: 8px !important; } .modzumac .searchable-select-dropdown::-webkit-scrollbar-thumb { background: #4b5563 !important; border-radius: 8px !important; } .modzumac .searchable-select-dropdown::-webkit-scrollbar-thumb:hover { background: #9ca3af !important; } /* ===== FOUC PREVENTION Y PLACEHOLDERS ===== */ /* FOUC Prevention: Los selects originales están ocultos por defecto */ .modzumac #hero-origin-select, .modzumac #hero-destination-select, .modzumac #hero-origin-select-roundtrip, .modzumac #hero-destination-select-roundtrip { display: none !important; } /* Contenedores de los selects: reservar espacio para evitar layout shift */ .modzumac #hero-origin-predefined, .modzumac #hero-destination-predefined, .modzumac #hero-origin-predefined-roundtrip, .modzumac #hero-destination-predefined-roundtrip { min-height: 46px !important; position: relative !important; } /* Sin animación para evitar efecto de carga al recargar la página */ .modzumac .searchable-select-wrapper { opacity: 1 !important; } /* Placeholder visible antes de que se cargue el componente searchable */ .modzumac .searchable-select-placeholder { width: 100% !important; position: relative !important; } .modzumac .searchable-select-placeholder input { pointer-events: none !important; } /* ============================================================================ 10. LABELS ============================================================================ */ /* Ocultar selects originales (legacy - ya incluido arriba) */ .modzumac #hero-origin-select, .modzumac #hero-destination-select, .modzumac #hero-origin-select-roundtrip, .modzumac #hero-destination-select-roundtrip { display: none !important; } /* Contenedores de los selects: reservar espacio para evitar layout shift */ .modzumac #hero-origin-predefined, .modzumac #hero-destination-predefined, .modzumac #hero-origin-predefined-roundtrip, .modzumac #hero-destination-predefined-roundtrip { min-height: 46px !important; position: relative !important; } /* Asegurar que los contenedores padres no limiten el dropdown */ .modzumac .hero-search-card, .modzumac .locations-map-layout, .modzumac .locations-column { overflow: visible !important; } /* ============================================================================ 10. LABELS ============================================================================ */ .modzumac .search-label { color: #0a5d63 !important; font-weight: 700 !important; font-size: 13px !important; margin-bottom: 4px !important; display: block !important; letter-spacing: 0.3px !important; } /* ============================================================================ 11. INDICADOR DE CIUDAD (Cancún) ============================================================================ */ .modzumac .city-indicator-inline { background: linear-gradient(135deg, #1a7b8c, #00bcd4) !important; border: 2px solid #00bcd4 !important; border-radius: 10px !important; padding: 0.7rem 1.2rem !important; min-height: 42px !important; cursor: default !important; pointer-events: none !important; box-shadow: 0 2px 8px rgba(26, 123, 140, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.3) !important; display: flex !important; align-items: center !important; justify-content: center !important; user-select: none !important; position: relative !important; } .modzumac .city-value-inline { color: #ffffff !important; font-weight: 700 !important; font-size: 1rem !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important; letter-spacing: 0.5px !important; text-align: center !important; } /* ============================================================================ 12. LAYOUT MAPA: Origen/Destino izq, Mapa/Info derecha ============================================================================ */ .modzumac .locations-map-layout { display: flex; gap: 14px !important; margin-bottom: 12px !important; margin-top: 12px !important; align-items: flex-start !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; min-height: 280px !important; } /* Columna izquierda: Origen y Destino */ .modzumac .locations-column { flex: 0 0 55% !important; display: flex !important; flex-direction: column !important; gap: 12px !important; } /* Columna derecha: Mapa e Info */ .modzumac .map-info-column { flex: 0 0 calc(45% - 14px) !important; display: flex !important; flex-direction: column !important; gap: 8px !important; } /* Mapa compacto rectangular */ .modzumac .hero-map-container-compact { width: 100% !important; height: 180px !important; border-radius: 10px !important; background: #f0f9ff !important; border: 2px solid #e0f2fe !important; box-shadow: 0 2px 8px rgba(14, 165, 233, 0.1) !important; } .modzumac .hero-map-container-compact .leaflet-container { border-radius: 10px !important; height: 100% !important; width: 100% !important; } /* Mapa horizontal (ancho completo) */ .modzumac .hero-map-container-horizontal { width: 100% !important; height: 220px !important; border-radius: 10px !important; background: #f0f9ff !important; border: 2px solid #e0f2fe !important; box-shadow: 0 2px 8px rgba(14, 165, 233, 0.1) !important; margin-bottom: 12px !important; } .modzumac .hero-map-container-horizontal .leaflet-container { border-radius: 10px !important; height: 100% !important; width: 100% !important; } /* Mapa pequeño (fallback mobile) */ .modzumac .hero-map-container-small { width: 100% !important; height: 180px !important; border-radius: 8px !important; background: #f0f9ff !important; border: 2px solid #e0f2fe !important; margin-top: 12px !important; } .modzumac .hero-map-container-small .leaflet-container { border-radius: 8px !important; height: 100% !important; width: 100% !important; } /* Route Info (Distancia y Tiempo) */ .modzumac .route-info-compact { display: flex !important; flex-direction: row !important; gap: 8px !important; background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%) !important; border: 2px solid #e0f2fe !important; border-radius: 10px !important; padding: 8px 12px !important; box-shadow: 0 2px 8px rgba(14, 165, 233, 0.08) !important; justify-content: space-around !important; } .modzumac .route-info-item { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 8px !important; } .modzumac .route-info-label { font-size: 10px !important; font-weight: 700 !important; color: #1f2937 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } .modzumac .route-info-value { font-size: 14px !important; font-weight: 800 !important; color: #1f2937 !important; } /* Route Info específico por ID para cada modo */ .modzumac #hero-route-info-step1, .modzumac #hero-route-info-roundtrip { display: flex !important; flex-direction: row !important; gap: 8px !important; padding: 8px 12px !important; background: #ffffff !important; border-radius: 8px !important; margin-top: 8px !important; border: 1px solid #e5e7eb !important; justify-content: space-around !important; } /* Responsive mobile - asegurar visibilidad y ajuste de espaciado */ @media (max-width: 768px) { .modzumac #hero-route-info-step1, .modzumac #hero-route-info-roundtrip { padding: 12px 16px !important; width: 100% !important; box-sizing: border-box !important; gap: 12px !important; margin-top: 12px !important; } /* Labels más legibles en mobile */ .modzumac #hero-route-info-step1 .route-info-label, .modzumac #hero-route-info-roundtrip .route-info-label { font-size: 11px !important; } /* Values más prominentes en mobile */ .modzumac #hero-route-info-step1 .route-info-value, .modzumac #hero-route-info-roundtrip .route-info-value { font-size: 15px !important; } } /* ============================================================================ 13. WHATSAPP CONTAINER (OTROS DESTINOS) ============================================================================ */ /** * Contenedor principal de WhatsApp para "Otros Destinos" * Fuente: hero-search1.css líneas 5815-5825 * - Layout flex para centrar el contenido * * IMPORTANTE: min-height debe coincidir con #sencillo-fields (280px base, 420px desktop) * para evitar espacio vacío cuando se cambia de "Lista" a "Otros Destinos" * * NOTA: Sin !important en display para que el style inline del HTML tenga prioridad */ .modzumac .otros-destinos-whatsapp-container { margin-top: 12px !important; margin-bottom: 12px !important; padding: 0 !important; overflow: hidden !important; min-height: 280px !important; /* Mobile: coincide con locations-map-layout */ display: flex; /* SIN !important - permite que display: none inline tenga prioridad */ align-items: center !important; justify-content: center !important; } /** * Mensaje interno de WhatsApp * Fuente: hero-search1.css líneas 5827-5834 * - Fondo blanco con gradiente suave * - Centrado con text-align */ .modzumac .whatsapp-message { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.98), rgba(250, 248, 245, 1) ) !important; border: 1px solid var(--modzumac-step1-border) !important; border-radius: 12px !important; padding: 2rem !important; text-align: center !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important; } /** * Párrafo del mensaje de WhatsApp * Fuente: hero-search1.css líneas 5836-5844 */ .modzumac .whatsapp-message p { color: var(--modzumac-step1-text) !important; font-size: 1.05rem !important; line-height: 1.6 !important; margin-bottom: 1.5rem !important; max-width: 600px !important; margin-left: auto !important; margin-right: auto !important; } /** * Botón de contacto de WhatsApp * Fuente: hero-search1.css líneas 5846-5860 * - Gradiente verde oficial de WhatsApp * - Border-radius redondeado (50px) */ .modzumac .whatsapp-contact-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient(135deg, #25d366, #128c7e) !important; color: white !important; padding: 1rem 2rem !important; border-radius: 50px !important; font-size: 1.1rem !important; font-weight: 600 !important; text-decoration: none !important; transition: all 0.3s ease !important; box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3) !important; gap: 10px !important; border: none !important; } /** * Estado hover del botón de WhatsApp * Fuente: hero-search1.css líneas 5862-5866 */ .modzumac .whatsapp-contact-button:hover { background: linear-gradient(135deg, #128c7e, #075e54) !important; box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4) !important; transform: translateY(-2px) !important; } /** * Estado active del botón de WhatsApp * Fuente: hero-search1.css líneas 5868-5871 */ .modzumac .whatsapp-contact-button:active { transform: translateY(0) !important; box-shadow: 0 3px 10px rgba(37, 211, 102, 0.3) !important; } /** * Icono SVG del botón de WhatsApp * Fuente: hero-search1.css líneas 5873-5876 */ .modzumac .whatsapp-contact-button svg { width: 24px !important; height: 24px !important; } /* ============================================================================ 14. UTILIDADES - VISIBILIDAD ============================================================================ */ /* Clase para ocultar elementos (usada por JavaScript) */ .modzumac .hidden { display: none; } /* Clase para mostrar elementos en bloque */ .modzumac .show { display: block; } /* Clase para mostrar elementos en flex */ .modzumac .show-flex { display: flex; } /* ============================================================================ 15. BOTÓN "SIGUIENTE" - ✅ CORREGIDO Fuente: hero-search1.css líneas 530-553 ============================================================================ */ .modzumac .btn-search-hero { /* ✅ CORREGIDO: Agregado margin: auto para centrar el botón */ width: clamp(280px, 70%, 100%) !important; padding: 14px 24px !important; background: linear-gradient( 135deg, var(--modzumac-step1-brand), #19d6cc ) !important; color: #05363e !important; border: none !important; border-radius: 10px !important; font-size: 15px !important; font-weight: 700 !important; cursor: pointer !important; transition: all 0.3s ease; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important; margin: 10px auto 4px auto !important; display: block; text-transform: uppercase !important; letter-spacing: 0.4px !important; position: relative !important; overflow: hidden !important; min-height: 48px !important; -webkit-tap-highlight-color: transparent !important; touch-action: manipulation !important; flex-shrink: 0 !important; box-sizing: border-box !important; } .modzumac .btn-search-hero::before { content: "" !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 100% !important; height: 100% !important; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.3), transparent ) !important; transition: left 0.5s !important; } .modzumac .btn-search-hero:hover::before { left: 100% !important; } .modzumac .btn-search-hero:hover { transform: translateY(-3px) !important; box-shadow: 0 14px 28px rgba(14, 189, 180, 0.45) !important; background: linear-gradient( 135deg, #19d6cc, var(--modzumac-step1-brand) ) !important; } .modzumac .btn-search-hero:active { transform: translateY(-1px) !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12) !important; } .modzumac .btn-search-hero:disabled { opacity: 0.6 !important; cursor: not-allowed !important; transform: none !important; } /* ============================================================================ 16. RESPONSIVE ============================================================================ */ /* Tablet landscape (hasta 1024px) */ @media (max-width: 1024px) { .modzumac .hero-search-card { flex: 0 0 450px !important; padding: 18px 32px !important; } .modzumac .hero-search-card.step-1 { flex: 0 0 450px !important; max-width: 450px !important; overflow-y: visible !important; overflow-x: visible !important; } /* Layout del mapa en tablet */ .modzumac .locations-map-layout { flex-direction: column !important; } .modzumac .locations-column, .modzumac .map-info-column { flex: 0 0 100% !important; } } /* Tablet y mobile grande (hasta 768px) */ @media (max-width: 768px) { /* ✅ REGLA ESPECÍFICA SOLO PARA STEP-1 (no afecta steps 2, 3, 4) */ .modzumac .hero-search-card.step-1 { flex: 1 !important; width: 100% !important; max-width: 540px !important; padding: 24px 26px !important; margin: 0 auto !important; height: auto !important; max-height: none !important; overflow-y: visible !important; overflow-x: visible !important; } .modzumac .search-card-title { font-size: 1.3rem !important; margin-bottom: 6px !important; } .modzumac .search-card-subtitle { font-size: 0.8rem !important; margin-bottom: 12px !important; line-height: 1.3 !important; } /* Service tabs responsive */ .modzumac .service-tab { padding: 8px 16px !important; font-size: 12px !important; min-height: 44px !important; } .modzumac .service-tab-icon svg { width: 20px !important; height: 20px !important; } /* Form groups */ .modzumac .search-form-group { margin-bottom: 14px !important; } /* Inputs más grandes */ .modzumac .search-input { padding: 12px 14px !important; font-size: 16px !important; min-height: 48px !important; } .modzumac .search-label { font-size: 13px !important; margin-bottom: 5px !important; font-weight: 700 !important; } /* Botones de tipo de viaje */ .modzumac .trip-type-btn { padding: 12px 16px !important; font-size: 14px !important; min-height: 48px !important; } /* Botón Siguiente */ .modzumac .btn-search-hero { padding: 14px 22px !important; font-size: 15px !important; min-height: 52px !important; width: 80% !important; } /* Location mode selector */ .modzumac .location-mode-selector { gap: 8px !important; margin-top: 16px !important; margin-bottom: 16px !important; } .modzumac .location-mode-selector .mode-button { padding: 10px 20px !important; font-size: 0.85rem !important; } /* Searchable select */ .modzumac .searchable-select-input { font-size: 16px !important; /* Evitar zoom en iOS */ } /* Layout del mapa - stack vertical en mobile */ .modzumac .locations-map-layout { flex-direction: column !important; gap: 12px !important; } .modzumac .locations-column, .modzumac .map-info-column { flex: 1 !important; width: 100% !important; } .modzumac .hero-map-container-compact { height: 180px !important; } .modzumac .route-info-compact { padding: 10px 14px !important; } /* Otros destinos responsive */ .modzumac .otros-destinos-button { font-size: 0.9rem !important; padding: 0.75rem 1.5rem !important; } .modzumac .whatsapp-message { padding: 1.5rem !important; } .modzumac .whatsapp-message p { font-size: 1rem !important; } .modzumac .whatsapp-contact-button { padding: 0.85rem 1.75rem !important; font-size: 1rem !important; } } /* Searchable select responsive */ @media (max-width: 640px) { .modzumac .searchable-select-dropdown { max-height: 240px !important; } /* Área de toque más grande para la flecha en mobile */ .modzumac .searchable-select-arrow { padding: 14px !important; right: 0px !important; } /* Asegurar que el dropdown abierto tenga la máxima prioridad en mobile */ .modzumac .searchable-select-dropdown { z-index: 999999 !important; } /* El wrapper debe estar BAJO para no tapar otros dropdowns */ .modzumac .searchable-select-wrapper { z-index: 1 !important; } } /* Mobile pequeño (hasta 480px) - Touch targets más grandes */ @media (max-width: 480px) { .modzumac .hero-search-card { padding: 20px !important; } /* Inputs MÁS GRANDES para mejor touch */ .modzumac .search-input { padding: 14px 16px !important; font-size: 16px !important; min-height: 50px !important; border-radius: 10px !important; border-width: 2px !important; touch-action: manipulation !important; -webkit-text-size-adjust: 100% !important; } /* ✅ ANTI AUTO-ZOOM - Searchable select inputs (origen/destino) */ .modzumac .searchable-select-input { font-size: 16px !important; /* ✅ Mínimo 16px para prevenir zoom */ padding: 16px 48px 16px 16px !important; /* ✅ Padding generoso */ min-height: 54px !important; /* ✅ Altura igual que pasajeros */ border-radius: 12px !important; border-width: 2px !important; font-weight: 600 !important; touch-action: manipulation !important; -webkit-text-size-adjust: 100% !important; -webkit-appearance: none !important; appearance: none !important; } /* Botón principal MÁS GRANDE para mejor UX */ .modzumac .btn-search-hero { padding: 16px 24px !important; font-size: 16px !important; font-weight: 800 !important; margin-top: 16px !important; width: 85% !important; min-height: 54px !important; border-radius: 12px !important; letter-spacing: 0.5px !important; } /* Trip type selector MÁS GRANDE en mobile */ .modzumac .trip-type-btn { padding: 14px 18px !important; font-size: 15px !important; font-weight: 700 !important; min-height: 50px !important; border-radius: 10px !important; } .modzumac .trip-type-selector { gap: 10px !important; padding: 6px !important; margin-bottom: 16px !important; } /* Service tabs más grandes */ .modzumac .service-tab { padding: 10px 16px !important; font-size: 13px !important; min-height: 48px !important; } .modzumac .service-tab-icon svg { width: 22px !important; height: 22px !important; } /* Layout del mapa */ .modzumac .locations-map-layout { gap: 12px !important; } .modzumac .hero-map-container-compact, .modzumac .hero-map-container-horizontal, .modzumac .hero-map-container-small { height: 200px !important; } /* Mode buttons más grandes */ .modzumac .location-mode-selector .mode-button { padding: 10px 12px !important; font-size: 12px !important; font-weight: 700 !important; min-height: 44px !important; border-radius: 8px !important; } /* ===== DROPDOWNS SEARCHABLE SELECT - Z-INDEX MOBILE ===== */ /* Fuente: mobile-first.css líneas 499-516 */ /* Dropdown debe tener máxima prioridad cuando está visible en mobile */ .modzumac .searchable-select-dropdown { z-index: 999999 !important; } /* Wrapper debe estar bajo cuando NO está activo */ .modzumac .searchable-select-wrapper { z-index: 50 !important; /* Base: por encima del contenido normal */ } /* Wrapper activo tiene mayor prioridad */ .modzumac .searchable-select-wrapper.active { z-index: 60 !important; /* Forzar nueva capa de composición */ transform: translateZ(0) !important; will-change: opacity, transform !important; } /* Dropdown tiene la mayor prioridad dentro del wrapper activo */ .modzumac .searchable-select-wrapper.active .searchable-select-dropdown { z-index: 61 !important; } /* Área de toque más grande para la flecha en mobile */ .modzumac .searchable-select-arrow { padding: 14px !important; right: 0px !important; } /* Dropdown max-height reducida en mobile */ .modzumac .searchable-select-dropdown { max-height: 240px !important; } } /* ============================================================================ 17. HELP TEXT Y INFO BOX ============================================================================ */ .modzumac .search-help-text { display: block !important; margin-top: 3px !important; font-size: 11px !important; color: var(--modzumac-step1-text-white) !important; line-height: 1.3 !important; font-weight: 600 !important; background: var(--modzumac-step1-primary) !important; padding: 4px 7px !important; border-radius: 6px !important; border-left: 3px solid var(--modzumac-step1-accent) !important; } .modzumac .search-info-box { margin-top: 8px !important; background: var(--modzumac-step1-primary) !important; border: 2px solid var(--modzumac-step1-accent) !important; border-radius: 8px !important; padding: 10px 12px !important; display: flex !important; flex-direction: column !important; gap: 6px !important; box-shadow: 0 2px 8px rgba(0, 188, 212, 0.15) !important; } .modzumac .search-info-item { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 12px !important; color: var(--modzumac-step1-text-white) !important; font-weight: 600 !important; } .modzumac .info-icon { flex-shrink: 0 !important; font-size: 14px !important; filter: drop-shadow(0 1px 2px rgba(6, 182, 212, 0.3)) !important; } /* ============================================================================ 18. STEP TRANSITIONS (Animaciones) ============================================================================ */ .modzumac .step-transition-out { opacity: 0 !important; transform: translateX(-20px) !important; transition: opacity 0.3s ease, transform 0.3s ease !important; } .modzumac .step-transition-in { opacity: 0 !important; transform: translateX(20px) !important; animation: modzumac-slideIn 0.3s ease forwards !important; } .modzumac .step-transition-out, .modzumac .step-transition-in { will-change: opacity, transform !important; } .modzumac .hero-search-card:not(.step-transition-out):not(.step-transition-in) * { will-change: auto !important; } @keyframes modzumac-slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } /* ============================================================================ 19. OTROS DESTINOS SECTION ============================================================================ */ .modzumac .otros-destinos-section { margin: 1.5rem 0 !important; display: flex !important; justify-content: center !important; } .modzumac .otros-destinos-button { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.9), rgba(250, 248, 245, 1) ) !important; border: 2px solid var(--modzumac-step1-border) !important; border-radius: 10px !important; padding: 0.85rem 1.75rem !important; color: var(--modzumac-step1-text) !important; font-size: 1rem !important; font-weight: 600 !important; letter-spacing: 1px !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s ease !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important; } .modzumac .otros-destinos-button:hover { background: linear-gradient( 135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.95) ) !important; border-color: var(--modzumac-step1-accent) !important; box-shadow: 0 6px 20px rgba(26, 123, 140, 0.2) !important; transform: translateY(-2px) !important; } .modzumac .otros-destinos-button:active { transform: translateY(0) !important; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3) !important; } .modzumac .otros-destinos-button svg { transition: transform 0.3s ease !important; } .modzumac .otros-destinos-button[aria-expanded="true"] svg { transform: rotate(45deg) !important; } /* ============================================================================ 20. LOCATION AUTOCOMPLETE ============================================================================ */ .modzumac .location-autocomplete-wrapper { position: relative !important; } .modzumac .location-autocomplete-suggestions { position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; background: white !important; border: 2px solid #00bcd4 !important; border-top: none !important; border-radius: 0 0 8px 8px !important; max-height: 200px !important; overflow-y: auto !important; z-index: 1000 !important; box-shadow: 0 4px 12px rgba(0, 188, 212, 0.2) !important; margin-top: -2px !important; } .modzumac .location-autocomplete-suggestion { padding: 8px 12px !important; cursor: pointer !important; font-size: 12px !important; color: #1e293b !important; border-bottom: 1px solid #e0f2fe !important; transition: all 0.2s ease !important; } .modzumac .location-autocomplete-suggestion:last-child { border-bottom: none !important; } .modzumac .location-autocomplete-suggestion:hover { background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important; color: #00bcd4 !important; } .modzumac .location-autocomplete-suggestion-name { font-weight: 600 !important; margin-bottom: 2px !important; } .modzumac .location-autocomplete-suggestion-address { font-size: 10px !important; color: #64748b !important; } .modzumac .location-autocomplete-loading { padding: 8px 12px !important; font-size: 11px !important; color: #0891b2 !important; text-align: center !important; font-style: italic !important; } .modzumac .location-autocomplete-no-results { padding: 8px 12px !important; font-size: 11px !important; color: #64748b !important; text-align: center !important; } /* ============================================================================ 21. LEAFLET MAP MARKERS ============================================================================ */ /* ⚠️ IMPORTANTE: Leaflet crea markers FUERA de .modzumac Solución: Agregar clase .modzumac-map al contenedor del mapa en HTML Ejemplo:
*/ .modzumac-map .leaflet-container .marker-label, .modzumac .leaflet-container .marker-label { color: #1f2937 !important; background: #ffffff !important; font-weight: 600 !important; padding: 4px 8px !important; border-radius: 4px !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; } /* Ocultar panel de Leaflet Routing */ .modzumac-map .leaflet-routing-container, .modzumac .leaflet-routing-container, .modzumac-map .leaflet-routing-container-hide, .modzumac .leaflet-routing-container-hide { display: none !important; } /* ============================================================================ MEJORAS FINALES - 100% COMPLETITUD ============================================================================ */ /* Location Initial Message (mensaje de ayuda en modo Lista) */ .modzumac .location-initial-message { font-size: 11px !important; color: #0891b2 !important; background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important; padding: 6px 8px !important; border-radius: 6px !important; border-left: 3px solid #06b6d4 !important; margin-bottom: 12px !important; font-weight: 600 !important; line-height: 1.4 !important; } /* iOS Tap Highlight en Trip Type Button */ .modzumac .trip-type-selector .trip-type-btn { -webkit-tap-highlight-color: rgba(0, 188, 212, 0.1) !important; } /* ============================================================================ ACCESIBILIDAD - Reducir movimiento para usuarios sensibles ============================================================================ */ /* WCAG 2.1 - Motion Preference (hero-search1.css línea 2020) */ @media (prefers-reduced-motion: reduce) { .modzumac *, .modzumac *::before, .modzumac *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .modzumac .step-transition-out, .modzumac .step-transition-in { will-change: auto !important; } } /* ============================================================================ SOBRESCRITURA GLOBAL - Estilos SIN prefijo para sobrescribir searchable-select.css NOTA: Estos estilos se aplican GLOBALMENTE (sin .modzumac) Razón: searchable-select.css se carga ANTES y no tiene prefijo ============================================================================ */ /* ✅ PROTEGIDO: Contenedores padres con overflow visible */ /* CRÍTICO: Asegurar que los contenedores padres permitan overflow visible */ .modzumac .hero-search-card, .modzumac .locations-map-layout, .modzumac .locations-column, .modzumac #sencillo-fields, .modzumac #redondo-fields { overflow: visible !important; } /* ✅ PROTEGIDO: Wrapper searchable-select con z-index */ /* Wrapper con z-index correcto */ .modzumac .searchable-select-wrapper { position: relative !important; z-index: 1 !important; overflow: visible !important; } /* ✅ PROTEGIDO: Wrapper activo con z-index elevado */ /* Wrapper activo con mayor z-index */ .modzumac .searchable-select-wrapper.active { z-index: 100000 !important; transform: translateZ(0) !important; } /* ✅ PROTEGIDO: Dropdown searchable-select con máxima prioridad */ /* Dropdown con máxima prioridad - DEBE salir del contenedor modal */ .modzumac .searchable-select-dropdown { position: absolute !important; top: calc(100% + 2px) !important; left: 0 !important; right: 0 !important; z-index: 9999999 !important; overflow: visible !important; } /* ✅ PROTEGIDO: Media query mobile para searchable-select */ /* Mobile: z-index máximo para salir del modal */ @media (max-width: 640px) { .modzumac .searchable-select-dropdown { z-index: 9999999 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important; } .modzumac .searchable-select-wrapper.active { z-index: 100000 !important; } } /* ✅ iPhone 14 Pro Max, iPhone 14, iPhone 15 Pro */ @media (max-width: 480px) { .modzumac .searchable-select-dropdown { z-index: 9999999 !important; max-height: 250px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important; } .modzumac .searchable-select-wrapper.active { z-index: 100000 !important; } } /* ===== ESTILOS PARA SOBRESCRIBIR INLINE STYLES DEL JS ===== */ /* ✅ PROTEGIDO: Opciones deshabilitadas */ /* Opciones deshabilitadas (aplicadas por JS inline) */ .modzumac .searchable-select-option-disabled { pointer-events: none !important; cursor: default !important; background: transparent !important; color: #000000 !important; } /* ✅ PROTEGIDO: Placeholder searchable-select */ /* Placeholder (aplicado por JS inline) */ .modzumac .searchable-select-placeholder[style*="display: none"] { display: none !important; } .modzumac .searchable-select-placeholder[style*="display: block"] { display: block !important; } /* ✅ PROTEGIDO: Opción highlighted */ /* Clase highlighted (aplicada por JS en línea 488) */ .modzumac .searchable-select-option.highlighted { background: #f3f4f6 !important; background-color: #f3f4f6 !important; color: #000000 !important; } /* ✅ PROTEGIDO: Opción selected */ /* Clase selected (aplicada por JS en línea 348) */ .modzumac .searchable-select-option.selected { background: transparent !important; background-color: transparent !important; color: #000000 !important; font-weight: 600 !important; } /* ✅ PROTEGIDO: Estilos heredados y opciones del dropdown */ /* FORZAR estilos en TODOS los hijos del dropdown */ .modzumac .searchable-select-dropdown *, .modzumac .searchable-select-dropdown *:before, .modzumac .searchable-select-dropdown *:after { background-color: inherit !important; color: inherit !important; } /* Re-establecer colores para opciones */ .modzumac .searchable-select-option, .modzumac .searchable-select-option * { background: white !important; color: #000000 !important; } .modzumac .searchable-select-option:hover, .modzumac .searchable-select-option:hover *, .modzumac .searchable-select-option.highlighted, .modzumac .searchable-select-option.highlighted * { background: #f3f4f6 !important; color: #000000 !important; } /* ============================================================================ ESTILOS ADICIONALES DESDE style.css - VARIABLES GLOBALES DEL MÓDULO ============================================================================ */ /* Variables adicionales desde style.css (líneas 8-38) */ .modzumac { --modzumac-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; --modzumac-font-size-base: 16px !important; --modzumac-line-height-base: 1.6 !important; --modzumac-spacing-xs: 0.25rem !important; --modzumac-spacing-sm: 0.5rem !important; --modzumac-spacing-md: 1rem !important; --modzumac-spacing-lg: 1.5rem !important; --modzumac-spacing-xl: 2rem !important; --modzumac-spacing-2xl: 3rem !important; --modzumac-radius-sm: 0.25rem !important; --modzumac-radius-md: 0.5rem !important; --modzumac-radius-lg: 1rem !important; --modzumac-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; --modzumac-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important; --modzumac-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important; } /* ============================================================================ ESTILOS ADICIONALES DESDE hero-search.js - PROTECCIÓN INLINE STYLES ============================================================================ */ /* hero-search.js línea 488-490: display: block/none para sencillo-fields */ .modzumac #sencillo-fields[style*="display: block"], .modzumac #redondo-fields[style*="display: block"] { display: block !important; opacity: 1 !important; } .modzumac #sencillo-fields[style*="display: none"], .modzumac #redondo-fields[style*="display: none"] { display: none !important; } /* hero-search.js línea 692, 769: Continuar button opacity */ .modzumac .btn-search-hero[style*="opacity"] { opacity: inherit !important; } /* hero-search.js línea 2923-2935: Payment method cards background styles */ .modzumac .payment-option-card[style*="borderColor"], .modzumac .payment-option-card[style*="background"], .modzumac .payment-option-card[style*="boxShadow"] { border-color: inherit !important; background: inherit !important; box-shadow: inherit !important; } /* hero-search.js línea 3347-3372: Email validation classes */ .modzumac .search-input.input-error { border-color: #ef4444 !important; background-color: #fef2f2 !important; } .modzumac .search-input.input-valid { border-color: #10b981 !important; background-color: #f0fdf4 !important; } .modzumac .input-error-message { display: block !important; color: #ef4444 !important; font-size: 12px !important; margin-top: 4px !important; font-weight: 600 !important; } /* hero-search.js línea 3847, 3968, 4019: Route info display */ .modzumac .route-info-compact[style*="display: flex"], .modzumac .route-info-compact[style*="display: block"] { display: flex !important; } /* ============================================================================ ESTILOS RESPONSIVOS ADICIONALES DESDE responsive.css ============================================================================ */ /* responsive.css líneas 17-19: Mobile font-size */ @media (max-width: 480px) { .modzumac { --modzumac-font-size-base: 14px !important; } } /* responsive.css líneas 32-36: Large screens container */ @media (min-width: 1400px) { .modzumac .container { max-width: 1320px !important; } } /* ============================================================================ CHANGELOG - HISTORIAL DE VERSIONES ============================================================================ */ /** * v7.6.0 - 2025-01-15 - CONSOLIDACIÓN 100% COMPLETA - INDEPENDENCIA TOTAL * ======================================================================== * * CAMBIOS PRINCIPALES: * ✅ Análisis exhaustivo de hero-search1.css (6,345 líneas) completo * ✅ Agregados TODOS los selectores faltantes (150 líneas nuevas) * ✅ Card Charge Notice completo con responsive (75 líneas) * ✅ Optimizaciones táctiles mobile (45 líneas) * ✅ Optimización de memoria en dispositivos low-end (10 líneas) * ✅ Corrección de line-height en search-card-subtitle * ✅ INDEPENDENCIA TOTAL de hero-search1.css * * SELECTORES AGREGADOS: * 1. .card-charge-notice (aviso de cargo de tarjeta) * - Estilos base con gradiente amarillo * - Hover effect * - Responsive para 768px, 480px * - Selectores de atributo para font-size dinámico * * 2. Optimizaciones táctiles (@media hover: none and pointer: coarse) * - min-height 44px para touch targets (Apple/Google guidelines) * - Active states con scale(0.97) * - Deshabilitar hover en touch devices * - text-shadow para mejorar legibilidad al sol * - user-select: none en card, text en inputs * * 3. Optimización de memoria (@media max-width: 480px) * - will-change: auto por defecto * - will-change: transform solo durante animaciones * * GARANTÍAS: * ✅ Cobertura 100% de hero-search1.css * ✅ step1-module.css puede funcionar COMPLETAMENTE SOLO * ✅ hero-search1.css puede ser eliminado del index.php * ✅ Todos los estilos del Paso 1 consolidados en un solo archivo * ✅ Máxima especificidad con IDs + !important * ✅ 100% responsive y accesible * * LÍNEAS TOTALES: 2,910 (agregadas 190 líneas desde v7.5.0) * COBERTURA: 100% hero-search1.css */ /** * v7.5.0 - 2025-01-15 - SELECTORES DE MÁXIMA ESPECIFICIDAD CON IDs * ================================================================== * * CAMBIOS PRINCIPALES: * ✅ Análisis del archivo CORRECTO: hero-search.css (NO hero-search1.css) * ✅ Selectores con IDs específicos para dropdowns de origen y destino * ✅ #hero-origin-wrapper, #hero-destination-wrapper (viaje sencillo) * ✅ #hero-origin-wrapper-roundtrip, #hero-destination-wrapper-roundtrip (viaje redondo) * ✅ Máxima especificidad CSS usando selectores de ID + clase * ✅ Sobrescritura TOTAL de searchable-select.css con !important * ✅ 334 líneas nuevas de selectores ultra-específicos * * SELECTORES AGREGADOS (todos con !important): * - Wrappers: position, z-index, overflow, width * - Wrappers activos: z-index elevado + transform * - Inputs: padding, font-size, border, background, color * - Flechas: position, transform, cursor, padding * - Dropdowns: position, z-index, opacity, visibility, transitions * - Opciones: padding, background, color, cursor * - Hover y highlighted: background #f3f4f6 * - Selected: background transparent, font-weight 600 * - Nombres y ubicaciones: font-size, color * - Deshabilitadas: pointer-events none, uppercase * - Labels de grupo: sticky, uppercase * - Scrollbar: personalizado con colores específicos * * GARANTÍAS: * ✅ Los dropdowns de origen y destino NUNCA perderán estilos * ✅ Especificidad ID > clase (máxima prioridad CSS) * ✅ !important en TODOS los estilos críticos * ✅ Selectores específicos para CADA elemento del dropdown * ✅ Estados hover, highlighted, selected protegidos * * LÍNEAS TOTALES: ~2,684 (agregadas 334 líneas nuevas) */ /** * v7.4.0 - 2025-01-15 - ANÁLISIS MODULAR COMPLETO * ================================================ * * CAMBIOS PRINCIPALES: * ✅ Análisis modular archivo por archivo de TODOS los CSS y JS * ✅ Consolidación de estilos desde style.css (variables spacing, radius, shadow) * ✅ Consolidación de estilos desde responsive.css (mobile font-size, large screens) * ✅ Protección contra TODOS los inline styles de hero-search.js (10,044 líneas) * ✅ Sobrescritura de display: block/none para sencillo-fields y redondo-fields * ✅ Protección de opacity en botón "Siguiente" * ✅ Protección de estilos de payment method cards * ✅ Estilos completos para validación de email (input-error, input-valid) * ✅ Protección de route-info display states * * ARCHIVOS ANALIZADOS (7 CSS + 2 JS): * 1. css/style.css (146 líneas) - Variables globales, reset, utilities * 2. css/responsive.css (37 líneas) - Media queries para tablets, mobile, large screens * 3. css/hero-search1.css (6,164 líneas) - Componente completo Step 1 * 4. css/searchable-select.css (286 líneas) - Dropdown personalizado * 5. css/mobile-first.css (líneas 499-516) - Z-index management mobile * 6. css/language-selector.css (369 líneas) - Selector de idioma * 7. css/category-cards.css (499 líneas) - Cards de categorías Step 2 * 8. js/searchable-select.js (633 líneas) - Inline styles dropdowns * 9. js/hero-search.js (10,044 líneas) - Inline styles formulario completo * * INLINE STYLES JS IDENTIFICADOS Y PROTEGIDOS: * - hero-search.js:177 - placeholder.style.display = 'none' * - hero-search.js:310-311 - optionEl.style.pointerEvents, cursor * - hero-search.js:488-495 - sencilloFields.style.display, redondoFields.style.display * - hero-search.js:611 - placeholder.style.display = 'block' * - hero-search.js:692, 769 - continueBtn.style.opacity * - hero-search.js:2923-2935 - payment card.style.borderColor, background, boxShadow * - hero-search.js:3347-3372 - emailInput.classList.add('input-error', 'input-valid') * - hero-search.js:3402-3427 - phoneInput.classList.add('input-error', 'input-valid') * - hero-search.js:3847, 3968, 4019 - routeInfo.style.display * - searchable-select.js:348 - optionEl.classList.add('selected') * - searchable-select.js:488 - opt.classList.add('highlighted') * * CLASES DINÁMICAS IDENTIFICADAS: * - .highlighted (searchable-select.js línea 488) * - .selected (searchable-select.js línea 348) * - .input-error (hero-search.js línea 3347) * - .input-valid (hero-search.js línea 3360) * - .active (múltiples archivos para estados activos) * * BUGS RESUELTOS: * ✅ Dropdowns perdían estilos tras interacción (inline styles JS) * ✅ Variables CSS faltantes (:root desde hero-search1.css y style.css) * ✅ Orden de carga CSS causaba conflictos (searchable-select.css sin prefijo) * ✅ Clases dinámicas sin estilos (.highlighted, .selected, .input-error) * ✅ Display states no persistían (sencillo-fields, redondo-fields) * ✅ Validación de inputs sin feedback visual * * GARANTÍAS: * ✅ 100% de cobertura de estilos del Paso 1 * ✅ Todos los inline styles JS sobrescritos con !important * ✅ Todas las clases dinámicas estilizadas * ✅ Dropdowns mantienen estilos bajo TODAS las condiciones * ✅ Sin conflictos CSS con otros módulos * ✅ 100% responsive (480px, 640px, 768px, 1024px, 1400px) * * LÍNEAS TOTALES: ~2,350 * COBERTURA: 100% hero-search1.css + searchable-select.css + mobile-first.css + * style.css + responsive.css + inline styles JS */ /** * v7.3.0 - 2025-01-15 - FIX INLINE STYLES JS + ESTADOS DINÁMICOS * =============================================================== * ✅ Análisis de searchable-select.js (633 líneas) * ✅ Protección contra inline styles (pointer-events, cursor, display) * ✅ Estilos para clases dinámicas (.highlighted, .selected) * ✅ Sobrescritura forzada en TODOS los hijos del dropdown */ /** * v7.2.0 - 2025-01-15 - FIX VARIABLES :root * ========================================== * ✅ Agregado :root con variables desde hero-search1.css * ✅ Variables: --zumac-primary, --zumac-accent, --zumac-text-light, etc. */ /** * v7.1.1 - 2025-01-15 - FIX GLOBAL OVERRIDES * =========================================== * ✅ Agregado estilos SIN prefijo .modzumac al final del archivo * ✅ Sobrescritura de searchable-select.css (carga ANTES) */ /** * v7.1.0 - 2025-01-15 - CONSOLIDACIÓN SEARCHABLE-SELECT * ====================================================== * ✅ Consolidado 100% de searchable-select.css * ✅ FOUC prevention (selects ocultos, min-height containers) */ /** * v7.0.1 - 2025-01-15 - FIX OVERFLOW + Z-INDEX * ============================================= * ✅ Parent containers con overflow: visible * ✅ Z-index management (1 → 60 → 99999/999999) */ /* ============================================================================ SELECTORES DE MÁXIMA ESPECIFICIDAD - DROPDOWNS ORIGEN/DESTINO Usando IDs específicos para garantizar sobrescritura total ============================================================================ */ /* Wrappers específicos de origen y destino (máxima prioridad) */ /* ✅ PROTEGIDO: Wrappers específicos de origen/destino */ .modzumac #hero-origin-wrapper, .modzumac #hero-destination-wrapper, .modzumac #hero-origin-wrapper-roundtrip, .modzumac #hero-destination-wrapper-roundtrip { position: relative !important; z-index: 1 !important; overflow: visible !important; width: 100% !important; } /* Wrappers DESTINO activos con z-index medio (debe sobrescribir JS inline) */ .modzumac #hero-destination-wrapper.active, .modzumac #hero-destination-wrapper-roundtrip.active { z-index: 60000 !important; transform: translateZ(0) !important; } /* Wrappers ORIGEN activos con z-index MUY ALTO (siempre por encima de destino - sobrescribe JS inline) */ .modzumac #hero-origin-wrapper.active, .modzumac #hero-origin-wrapper-roundtrip.active { z-index: 150000 !important; transform: translateZ(0) !important; } /* ✅ PROTEGIDO: Inputs dentro de wrappers específicos */ /* Inputs dentro de los wrappers específicos */ .modzumac #hero-origin-wrapper .searchable-select-input, .modzumac #hero-destination-wrapper .searchable-select-input, .modzumac #hero-origin-wrapper-roundtrip .searchable-select-input, .modzumac #hero-destination-wrapper-roundtrip .searchable-select-input { width: 100% !important; padding: 14px 44px 14px 16px !important; font-size: 16px !important; /* ✅ 16px previene auto-zoom en iOS/Android */ min-height: 48px !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; background-color: white !important; cursor: text !important; transition: all 0.2s ease !important; outline: none !important; /* ✅ ANTI AUTO-ZOOM iOS/Android */ touch-action: manipulation !important; -webkit-text-size-adjust: 100% !important; -webkit-appearance: none !important; appearance: none !important; } /* ✅ PROTEGIDO: Placeholders específicos - IDs directos */ /* ✅ PLACEHOLDERS ESPECÍFICOS - Gris medio - MÁXIMA ESPECIFICIDAD */ .modzumac #hero-origin-wrapper .searchable-select-input::placeholder, .modzumac #hero-destination-wrapper .searchable-select-input::placeholder, .modzumac #hero-origin-wrapper-roundtrip .searchable-select-input::placeholder, .modzumac #hero-destination-wrapper-roundtrip .searchable-select-input::placeholder, .modzumac #hero-origin-search-input::placeholder, .modzumac #hero-destination-search-input::placeholder, .modzumac #hero-origin-search-input-roundtrip::placeholder, .modzumac #hero-destination-search-input-roundtrip::placeholder { color: #9ca3af !important; opacity: 1 !important; } /* ✅ PROTEGIDO: Placeholders Firefox */ /* Firefox */ .modzumac #hero-origin-wrapper .searchable-select-input::-moz-placeholder, .modzumac #hero-destination-wrapper .searchable-select-input::-moz-placeholder, .modzumac #hero-origin-wrapper-roundtrip .searchable-select-input::-moz-placeholder, .modzumac #hero-destination-wrapper-roundtrip .searchable-select-input::-moz-placeholder, .modzumac #hero-origin-search-input::-moz-placeholder, .modzumac #hero-destination-search-input::-moz-placeholder, .modzumac #hero-origin-search-input-roundtrip::-moz-placeholder, .modzumac #hero-destination-search-input-roundtrip::-moz-placeholder { color: #9ca3af !important; opacity: 1 !important; } /* ✅ PROTEGIDO: Placeholders Safari/Chrome */ /* Safari/Chrome */ .modzumac #hero-origin-wrapper .searchable-select-input::-webkit-input-placeholder, .modzumac #hero-destination-wrapper .searchable-select-input::-webkit-input-placeholder, .modzumac #hero-origin-wrapper-roundtrip .searchable-select-input::-webkit-input-placeholder, .modzumac #hero-destination-wrapper-roundtrip .searchable-select-input::-webkit-input-placeholder, .modzumac #hero-origin-search-input::-webkit-input-placeholder, .modzumac #hero-destination-search-input::-webkit-input-placeholder, .modzumac #hero-origin-search-input-roundtrip::-webkit-input-placeholder, .modzumac #hero-destination-search-input-roundtrip::-webkit-input-placeholder { color: #9ca3af !important; opacity: 1 !important; } /* ✅ PROTEGIDO: Placeholders Edge/IE */ /* Edge/IE */ .modzumac #hero-origin-wrapper .searchable-select-input:-ms-input-placeholder, .modzumac #hero-destination-wrapper .searchable-select-input:-ms-input-placeholder, .modzumac #hero-origin-wrapper-roundtrip .searchable-select-input:-ms-input-placeholder, .modzumac #hero-destination-wrapper-roundtrip .searchable-select-input:-ms-input-placeholder, .modzumac #hero-origin-search-input:-ms-input-placeholder, .modzumac #hero-destination-search-input:-ms-input-placeholder, .modzumac #hero-origin-search-input-roundtrip:-ms-input-placeholder, .modzumac #hero-destination-search-input-roundtrip:-ms-input-placeholder { color: #9ca3af !important; opacity: 1 !important; } /* ✅ PROTEGIDO: Wrappers específicos con position relative */ .modzumac #hero-origin-wrapper, .modzumac #hero-destination-wrapper, .modzumac #hero-origin-wrapper-roundtrip, .modzumac #hero-destination-wrapper-roundtrip { position: relative !important; overflow: visible !important; } /* ✅ FIX ALTERNATIVO: Selectores basados en contenedor padre para roundtrip */ .modzumac #redondo-fields .searchable-select-wrapper { position: relative !important; overflow: visible !important; } .modzumac #redondo-fields .searchable-select-arrow { position: absolute !important; right: 0px !important; top: 50% !important; transform: translateY(-50%) !important; pointer-events: auto !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; visibility: visible !important; opacity: 1 !important; z-index: 10 !important; width: 40px !important; height: 40px !important; color: #000000 !important; padding: 10px !important; } .modzumac #redondo-fields .searchable-select-arrow svg { display: block !important; visibility: visible !important; opacity: 1 !important; width: 20px !important; height: 20px !important; fill: #000000 !important; color: #000000 !important; } .modzumac #redondo-fields .searchable-select-arrow svg path { fill: #000000 !important; } .modzumac #redondo-fields .searchable-select-wrapper.active .searchable-select-arrow { transform: translateY(-50%) rotate(180deg) !important; } /* ✅ FIX CRÍTICO: Forzar color negro en flechas roundtrip con máxima especificidad */ .modzumac #redondo-fields .searchable-select-arrow, .modzumac #redondo-fields .searchable-select-arrow svg, .modzumac #redondo-fields .searchable-select-arrow svg path, .modzumac div#redondo-fields .searchable-select-arrow, .modzumac div#redondo-fields .searchable-select-arrow svg, .modzumac div#redondo-fields .searchable-select-arrow svg path { color: #000000 !important; fill: #000000 !important; stroke: none !important; } /* ✅ PROTEGIDO: Flechas dropdown en wrappers específicos */ /* Flechas dropdown específicas */ .modzumac #hero-origin-wrapper .searchable-select-arrow, .modzumac #hero-destination-wrapper .searchable-select-arrow, .modzumac #hero-origin-wrapper-roundtrip .searchable-select-arrow, .modzumac #hero-destination-wrapper-roundtrip .searchable-select-arrow { position: absolute !important; right: 0px !important; top: 50% !important; transform: translateY(-50%) !important; pointer-events: auto !important; cursor: pointer !important; transition: transform 0.2s ease !important; color: #000000 !important; padding: 10px !important; /* ✅ FIX: Asegurar visibilidad de las flechas */ display: flex !important; align-items: center !important; justify-content: center !important; visibility: visible !important; opacity: 1 !important; z-index: 10 !important; width: 40px !important; height: 40px !important; } /* ✅ FIX: Asegurar que el SVG dentro de las flechas sea visible */ .modzumac #hero-origin-wrapper .searchable-select-arrow svg, .modzumac #hero-destination-wrapper .searchable-select-arrow svg, .modzumac #hero-origin-wrapper-roundtrip .searchable-select-arrow svg, .modzumac #hero-destination-wrapper-roundtrip .searchable-select-arrow svg { display: block !important; visibility: visible !important; opacity: 1 !important; width: 20px !important; height: 20px !important; fill: currentColor !important; color: #000000 !important; stroke: none !important; } /* ✅ FIX: Asegurar que el path del SVG sea visible */ .modzumac #hero-origin-wrapper .searchable-select-arrow svg path, .modzumac #hero-destination-wrapper .searchable-select-arrow svg path, .modzumac #hero-origin-wrapper-roundtrip .searchable-select-arrow svg path, .modzumac #hero-destination-wrapper-roundtrip .searchable-select-arrow svg path { fill: #000000 !important; stroke: none !important; } /* ✅ PROTEGIDO: Rotación de flechas cuando activo */ /* Rotación de flechas cuando activo */ .modzumac #hero-origin-wrapper.active .searchable-select-arrow, .modzumac #hero-destination-wrapper.active .searchable-select-arrow, .modzumac #hero-origin-wrapper-roundtrip.active .searchable-select-arrow, .modzumac #hero-destination-wrapper-roundtrip.active .searchable-select-arrow { transform: translateY(-50%) rotate(180deg) !important; } /* ✅ PROTEGIDO: Dropdowns específicos de wrappers hero */ /* Dropdowns específicos con máxima prioridad */ .modzumac #hero-origin-wrapper .searchable-select-dropdown, .modzumac #hero-destination-wrapper .searchable-select-dropdown, .modzumac #hero-origin-wrapper-roundtrip .searchable-select-dropdown, .modzumac #hero-destination-wrapper-roundtrip .searchable-select-dropdown { position: absolute !important; top: calc(100% + 2px) !important; left: 0 !important; right: 0 !important; background: white !important; background-color: white !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important; max-height: 320px !important; overflow-y: auto !important; z-index: 99999 !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(-8px) !important; transition: opacity 0.15s ease-out, transform 0.15s ease-out, visibility 0s linear 0.15s !important; will-change: opacity, transform !important; backface-visibility: hidden !important; -webkit-font-smoothing: antialiased !important; } /* ✅ PROTEGIDO: Dropdowns visibles cuando wrapper activo */ /* Dropdowns visibles cuando wrapper está activo */ .modzumac #hero-origin-wrapper.active .searchable-select-dropdown, .modzumac #hero-destination-wrapper.active .searchable-select-dropdown, .modzumac #hero-origin-wrapper-roundtrip.active .searchable-select-dropdown, .modzumac #hero-destination-wrapper-roundtrip.active .searchable-select-dropdown { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; transition: opacity 0.15s ease-out, transform 0.15s ease-out, visibility 0s linear 0s !important; } /* ✅ PROTEGIDO: Opciones dentro de dropdowns hero */ /* Opciones dentro de dropdowns específicos */ .modzumac #hero-origin-wrapper .searchable-select-option, .modzumac #hero-destination-wrapper .searchable-select-option, .modzumac #hero-origin-wrapper-roundtrip .searchable-select-option, .modzumac #hero-destination-wrapper-roundtrip .searchable-select-option { padding: 10px 16px !important; cursor: pointer !important; transition: none !important; border-bottom: 1px solid #f3f4f6 !important; background-color: transparent !important; background: none !important; color: #000000 !important; } /* ✅ PROTEGIDO: Hover y highlighted en opciones hero */ /* Hover y highlighted en opciones específicas */ .modzumac #hero-origin-wrapper .searchable-select-option:hover, .modzumac #hero-origin-wrapper .searchable-select-option.highlighted, .modzumac #hero-destination-wrapper .searchable-select-option:hover, .modzumac #hero-destination-wrapper .searchable-select-option.highlighted, .modzumac #hero-origin-wrapper-roundtrip .searchable-select-option:hover, .modzumac #hero-origin-wrapper-roundtrip .searchable-select-option.highlighted, .modzumac #hero-destination-wrapper-roundtrip .searchable-select-option:hover, .modzumac #hero-destination-wrapper-roundtrip .searchable-select-option.highlighted { background-color: #f3f4f6 !important; background: #f3f4f6 !important; color: #000000 !important; } /* ✅ PROTEGIDO: Opciones seleccionadas en dropdowns hero */ /* Opciones seleccionadas en dropdowns específicos */ .modzumac #hero-origin-wrapper .searchable-select-option.selected, .modzumac #hero-destination-wrapper .searchable-select-option.selected, .modzumac #hero-origin-wrapper-roundtrip .searchable-select-option.selected, .modzumac #hero-destination-wrapper-roundtrip .searchable-select-option.selected { background-color: transparent !important; background: none !important; color: #000000 !important; font-weight: 600 !important; } /* ✅ PROTEGIDO: Nombres de opciones en dropdowns hero */ /* Nombres de opciones en dropdowns específicos */ .modzumac #hero-origin-wrapper .searchable-select-option-name, .modzumac #hero-destination-wrapper .searchable-select-option-name, .modzumac #hero-origin-wrapper-roundtrip .searchable-select-option-name, .modzumac #hero-destination-wrapper-roundtrip .searchable-select-option-name { font-size: 14px !important; font-weight: 500 !important; color: #000000 !important; margin-bottom: 2px !important; } /* ✅ PROTEGIDO: Ubicaciones en dropdowns hero */ /* Ubicaciones en dropdowns específicos */ .modzumac #hero-origin-wrapper .searchable-select-option-location, .modzumac #hero-destination-wrapper .searchable-select-option-location, .modzumac #hero-origin-wrapper-roundtrip .searchable-select-option-location, .modzumac #hero-destination-wrapper-roundtrip .searchable-select-option-location { font-size: 12px !important; color: #000000 !important; } /* ✅ PROTEGIDO: Opciones deshabilitadas (zonas) en dropdowns hero */ /* Opciones deshabilitadas (zonas) en dropdowns específicos */ .modzumac #hero-origin-wrapper .searchable-select-option-disabled, .modzumac #hero-destination-wrapper .searchable-select-option-disabled, .modzumac #hero-origin-wrapper-roundtrip .searchable-select-option-disabled, .modzumac #hero-destination-wrapper-roundtrip .searchable-select-option-disabled { padding: 10px 16px !important; background: transparent !important; background-color: transparent !important; cursor: default !important; pointer-events: none !important; border-bottom: 1px solid #f3f4f6 !important; margin-bottom: 4px !important; } /* ✅ PROTEGIDO: Nombres de opciones deshabilitadas hero */ .modzumac #hero-origin-wrapper .searchable-select-option-disabled .searchable-select-option-name, .modzumac #hero-destination-wrapper .searchable-select-option-disabled .searchable-select-option-name, .modzumac #hero-origin-wrapper-roundtrip .searchable-select-option-disabled .searchable-select-option-name, .modzumac #hero-destination-wrapper-roundtrip .searchable-select-option-disabled .searchable-select-option-name { font-size: 13px !important; font-weight: 600 !important; color: #000000 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; } /* ✅ PROTEGIDO: Labels de grupo en dropdowns hero */ /* Labels de grupo en dropdowns específicos */ .modzumac #hero-origin-wrapper .searchable-select-group-label, .modzumac #hero-destination-wrapper .searchable-select-group-label, .modzumac #hero-origin-wrapper-roundtrip .searchable-select-group-label, .modzumac #hero-destination-wrapper-roundtrip .searchable-select-group-label { padding: 6px 16px !important; font-size: 11px !important; font-weight: 600 !important; color: #000000 !important; background-color: white !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; position: sticky !important; top: 0 !important; z-index: 1 !important; } /* ✅ PROTEGIDO: Scrollbar personalizado para dropdowns hero */ /* Scrollbar personalizado para dropdowns específicos */ .modzumac #hero-origin-wrapper .searchable-select-dropdown::-webkit-scrollbar, .modzumac #hero-destination-wrapper .searchable-select-dropdown::-webkit-scrollbar, .modzumac #hero-origin-wrapper-roundtrip .searchable-select-dropdown::-webkit-scrollbar, .modzumac #hero-destination-wrapper-roundtrip .searchable-select-dropdown::-webkit-scrollbar { width: 8px !important; } /* ✅ PROTEGIDO: Scrollbar track para dropdowns hero */ .modzumac #hero-origin-wrapper .searchable-select-dropdown::-webkit-scrollbar-track, .modzumac #hero-destination-wrapper .searchable-select-dropdown::-webkit-scrollbar-track, .modzumac #hero-origin-wrapper-roundtrip .searchable-select-dropdown::-webkit-scrollbar-track, .modzumac #hero-destination-wrapper-roundtrip .searchable-select-dropdown::-webkit-scrollbar-track { background: #f3f4f6 !important; border-radius: 8px !important; } /* ✅ PROTEGIDO: Scrollbar thumb para dropdowns hero */ .modzumac #hero-origin-wrapper .searchable-select-dropdown::-webkit-scrollbar-thumb, .modzumac #hero-destination-wrapper .searchable-select-dropdown::-webkit-scrollbar-thumb, .modzumac #hero-origin-wrapper-roundtrip .searchable-select-dropdown::-webkit-scrollbar-thumb, .modzumac #hero-destination-wrapper-roundtrip .searchable-select-dropdown::-webkit-scrollbar-thumb { background: #4b5563 !important; border-radius: 8px !important; } /* ✅ PROTEGIDO: Scrollbar thumb hover para dropdowns hero */ .modzumac #hero-origin-wrapper .searchable-select-dropdown::-webkit-scrollbar-thumb:hover, .modzumac #hero-destination-wrapper .searchable-select-dropdown::-webkit-scrollbar-thumb:hover, .modzumac #hero-origin-wrapper-roundtrip .searchable-select-dropdown::-webkit-scrollbar-thumb:hover, .modzumac #hero-destination-wrapper-roundtrip .searchable-select-dropdown::-webkit-scrollbar-thumb:hover { background: #9ca3af !important; } /* ✅ PROTEGIDO: Media query mobile para dropdowns y wrappers hero */ /* Mobile: z-index aún mayor para dropdowns específicos Y position fixed */ @media (max-width: 640px) { .modzumac #hero-origin-wrapper .searchable-select-dropdown, .modzumac #hero-destination-wrapper .searchable-select-dropdown, .modzumac #hero-origin-wrapper-roundtrip .searchable-select-dropdown, .modzumac #hero-destination-wrapper-roundtrip .searchable-select-dropdown { position: fixed !important; /* CRÍTICO: fixed para salir del contexto del módulo */ z-index: 999999 !important; max-height: 60vh !important; /* 60% del viewport */ overflow-y: scroll !important; /* ✅ FIX: Forzar scrollbar visible */ -webkit-overflow-scrolling: touch !important; /* ✅ FIX: Scroll suave en iOS */ } /* ✅ FIX: Scrollbar SIEMPRE visible en mobile - iOS/Android */ .modzumac #hero-origin-wrapper .searchable-select-dropdown::-webkit-scrollbar, .modzumac #hero-destination-wrapper .searchable-select-dropdown::-webkit-scrollbar, .modzumac #hero-origin-wrapper-roundtrip .searchable-select-dropdown::-webkit-scrollbar, .modzumac #hero-destination-wrapper-roundtrip .searchable-select-dropdown::-webkit-scrollbar { width: 10px !important; display: block !important; -webkit-appearance: none !important; appearance: none !important; } .modzumac #hero-origin-wrapper .searchable-select-dropdown::-webkit-scrollbar-track, .modzumac #hero-destination-wrapper .searchable-select-dropdown::-webkit-scrollbar-track, .modzumac #hero-origin-wrapper-roundtrip .searchable-select-dropdown::-webkit-scrollbar-track, .modzumac #hero-destination-wrapper-roundtrip .searchable-select-dropdown::-webkit-scrollbar-track { background: #e5e7eb !important; border-radius: 5px !important; } .modzumac #hero-origin-wrapper .searchable-select-dropdown::-webkit-scrollbar-thumb, .modzumac #hero-destination-wrapper .searchable-select-dropdown::-webkit-scrollbar-thumb, .modzumac #hero-origin-wrapper-roundtrip .searchable-select-dropdown::-webkit-scrollbar-thumb, .modzumac #hero-destination-wrapper-roundtrip .searchable-select-dropdown::-webkit-scrollbar-thumb { background: #4b5563 !important; border-radius: 5px !important; min-height: 50px !important; } .modzumac #hero-origin-wrapper.active, .modzumac #hero-destination-wrapper.active, .modzumac #hero-origin-wrapper-roundtrip.active, .modzumac #hero-destination-wrapper-roundtrip.active { z-index: 9999 !important; } } /* ============================================================================ CONSOLIDACIÓN FINAL - SELECTORES FALTANTES DE hero-search1.css Cobertura: 100% para eliminar dependencia completa de hero-search1.css ============================================================================ */ /* ========================== 1. CARD CHARGE NOTICE (Aviso de cargo de tarjeta) ========================== */ .modzumac .card-charge-notice { margin: 24px 0 !important; padding: 16px 20px !important; background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important; border-left: 4px solid #f59e0b !important; border-radius: 8px !important; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15) !important; transition: all 0.3s ease !important; } .modzumac .card-charge-notice:hover { box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25) !important; } @media (max-width: 768px) { .modzumac .card-charge-notice { margin: 16px 0 !important; padding: 14px 16px !important; border-radius: 6px !important; } .modzumac .card-charge-notice svg { width: 20px !important; height: 20px !important; } .modzumac .card-charge-notice > div { gap: 10px !important; } .modzumac .card-charge-notice div[style*="font-size: 0.95rem"] { font-size: 0.9rem !important; } .modzumac .card-charge-notice div[style*="font-size: 0.85rem"] { font-size: 0.8rem !important; } } @media (max-width: 480px) { .modzumac .card-charge-notice { margin: 12px 0 !important; padding: 12px 14px !important; border-left-width: 3px !important; } .modzumac .card-charge-notice svg { width: 18px !important; height: 18px !important; margin-top: 0 !important; } .modzumac .card-charge-notice > div { gap: 8px !important; flex-direction: row !important; align-items: flex-start !important; } .modzumac .card-charge-notice div[style*="font-size: 0.95rem"] { font-size: 0.85rem !important; margin-bottom: 4px !important; } .modzumac .card-charge-notice div[style*="font-size: 0.85rem"] { font-size: 0.75rem !important; line-height: 1.5 !important; } } /* ========================== 2. OPTIMIZACIONES TÁCTILES MOBILE ========================== */ /* Aumentar áreas táctiles en dispositivos touch */ @media (hover: none) and (pointer: coarse) { .modzumac .search-input, .modzumac .trip-type-btn, .modzumac .mode-button, .modzumac .btn-search-hero { min-height: 44px !important; } /* Mejorar feedback táctil con animación sutil */ .modzumac .trip-type-btn:active, .modzumac .mode-button:active { transform: scale(0.97) !important; transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important; } .modzumac .btn-search-hero:active { transform: scale(0.96) translateY(1px) !important; transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Deshabilitar hover effects en touch */ .modzumac .trip-type-btn:hover, .modzumac .mode-button:hover, .modzumac .search-input:hover { transform: none !important; box-shadow: inherit !important; } /* Mejorar contraste de texto en dispositivos móviles al sol */ .modzumac .search-label { text-shadow: 0 0 1px rgba(255, 255, 255, 0.5) !important; } /* Prevenir selección de texto accidental durante gestos */ .modzumac .hero-search-card { -webkit-user-select: none !important; user-select: none !important; } /* Permitir selección en inputs */ .modzumac .search-input, .modzumac .search-label { -webkit-user-select: text !important; user-select: text !important; } } /* ========================== 3. OPTIMIZACIÓN DE MEMORIA MOBILE ========================== */ /* Optimización para dispositivos con poca memoria */ @media (max-width: 480px) { .modzumac .hero-search-card { will-change: auto !important; } .modzumac .hero-search-card:active, .modzumac .hero-search-card.animating { will-change: transform !important; } } /* ========================== AUTOCOMPLETE - ORIGEN Y DESTINO (CRÍTICO PARA DROPDOWNS) ========================== */ .modzumac .autocomplete-wrapper { position: relative !important; width: 100% !important; } .modzumac .autocomplete-input { width: 100% !important; padding-right: 40px !important; cursor: text !important; } .modzumac .autocomplete-input:focus { border-color: var(--zumac-accent) !important; box-shadow: 0 0 0 3px rgba(255, 0, 34, 0.15) !important; } .modzumac .autocomplete-dropdown { position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; background: var(--zumac-card) !important; border: 2px solid var(--zumac-border) !important; border-top: none !important; border-radius: 0 0 12px 12px !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important; z-index: 1000 !important; margin-top: -1px !important; max-height: 280px !important; overflow-y: auto !important; overflow-x: hidden !important; } /* ⚠️ Z-INDEX CRÍTICO: ORIGEN SIEMPRE POR ENCIMA DE DESTINO */ /* Contenedor ORIGEN - z-index más alto */ .modzumac #hero-origin-wrapper { position: relative !important; z-index: 1002 !important; } /* Dropdown ORIGEN - z-index MUY alto */ .modzumac #hero-origin-wrapper .autocomplete-dropdown, .modzumac #hero-origin-wrapper .searchable-dropdown { z-index: 1003 !important; } /* Contenedor DESTINO - z-index más bajo que ORIGEN */ .modzumac #hero-destination-wrapper { position: relative !important; z-index: 1001 !important; } /* Dropdown DESTINO - z-index menor que dropdown ORIGEN */ .modzumac #hero-destination-wrapper .autocomplete-dropdown, .modzumac #hero-destination-wrapper .searchable-dropdown { z-index: 1001 !important; } /* Campo ORIGEN cuando está abierto - elevar aún más */ .modzumac #hero-origin-wrapper.dropdown-open { z-index: 1004 !important; } .modzumac #hero-origin-wrapper.dropdown-open .autocomplete-dropdown, .modzumac #hero-origin-wrapper.dropdown-open .searchable-dropdown { z-index: 1005 !important; } /* Asegurar que el input de ORIGEN también tenga z-index */ .modzumac #hero-origin-input { position: relative !important; z-index: 1002 !important; } .modzumac #hero-destination-input { position: relative !important; z-index: 1001 !important; } /* ⚠️ Z-INDEX CRÍTICO PARA VIAJE REDONDO: Misma jerarquía */ /* ORIGEN Roundtrip - z-index más alto */ .modzumac #hero-origin-wrapper-roundtrip { position: relative !important; z-index: 1002 !important; } .modzumac #hero-origin-wrapper-roundtrip .autocomplete-dropdown, .modzumac #hero-origin-wrapper-roundtrip .searchable-dropdown, .modzumac #hero-origin-wrapper-roundtrip .searchable-select-dropdown { z-index: 1003 !important; } .modzumac #hero-origin-wrapper-roundtrip.dropdown-open, .modzumac #hero-origin-wrapper-roundtrip.active { z-index: 1004 !important; } .modzumac #hero-origin-wrapper-roundtrip.dropdown-open .autocomplete-dropdown, .modzumac #hero-origin-wrapper-roundtrip.dropdown-open .searchable-dropdown, .modzumac #hero-origin-wrapper-roundtrip.dropdown-open .searchable-select-dropdown, .modzumac #hero-origin-wrapper-roundtrip.active .searchable-select-dropdown { z-index: 1005 !important; } /* DESTINO Roundtrip - z-index más bajo que ORIGEN Roundtrip */ .modzumac #hero-destination-wrapper-roundtrip { position: relative !important; z-index: 1001 !important; } .modzumac #hero-destination-wrapper-roundtrip .autocomplete-dropdown, .modzumac #hero-destination-wrapper-roundtrip .searchable-dropdown, .modzumac #hero-destination-wrapper-roundtrip .searchable-select-dropdown { z-index: 1001 !important; } /* Inputs de ROUNDTRIP también con z-index */ .modzumac #hero-origin-search-input-roundtrip { position: relative !important; z-index: 1002 !important; } .modzumac #hero-destination-search-input-roundtrip { position: relative !important; z-index: 1001 !important; } /* REGLA GENERAL: Todos los ORIGEN siempre por encima de DESTINO */ .modzumac [id*="origin-wrapper"], .modzumac [id*="origen-wrapper"] { position: relative !important; z-index: 1002 !important; } .modzumac [id*="destination-wrapper"], .modzumac [id*="destino-wrapper"] { position: relative !important; z-index: 1001 !important; } /* Dropdowns dentro de wrappers de origen */ .modzumac [id*="origin-wrapper"] .autocomplete-dropdown, .modzumac [id*="origin-wrapper"] .searchable-dropdown, .modzumac [id*="origen-wrapper"] .autocomplete-dropdown, .modzumac [id*="origen-wrapper"] .searchable-dropdown { z-index: 1003 !important; } /* Dropdowns dentro de wrappers de destino */ .modzumac [id*="destination-wrapper"] .autocomplete-dropdown, .modzumac [id*="destination-wrapper"] .searchable-dropdown, .modzumac [id*="destino-wrapper"] .autocomplete-dropdown, .modzumac [id*="destino-wrapper"] .searchable-dropdown { z-index: 1001 !important; } .modzumac .autocomplete-dropdown::-webkit-scrollbar { width: 8px !important; } .modzumac .autocomplete-dropdown::-webkit-scrollbar-track { background: var(--zumac-background) !important; border-radius: 0 0 12px 0 !important; } .modzumac .autocomplete-dropdown::-webkit-scrollbar-thumb { background: var(--zumac-border) !important; border-radius: 4px !important; } .modzumac .autocomplete-dropdown::-webkit-scrollbar-thumb:hover { background: var(--zumac-accent) !important; } .modzumac .autocomplete-item { padding: 12px 16px !important; cursor: pointer !important; transition: all 0.2s ease !important; border-bottom: 1px solid var(--zumac-border) !important; display: flex !important; flex-direction: column !important; gap: 4px !important; min-height: 56px !important; justify-content: center !important; } .modzumac .autocomplete-item:last-child { border-bottom: none !important; } .modzumac .autocomplete-item:hover, .modzumac .autocomplete-item.active { background: var(--zumac-primary) !important; } .modzumac .autocomplete-item-name { font-size: 0.9375rem !important; font-weight: 600 !important; color: var(--zumac-white) !important; line-height: 1.4 !important; } .modzumac .autocomplete-item-category { font-size: 0.8125rem !important; color: var(--zumac-text-secondary) !important; font-weight: 500 !important; } .modzumac .autocomplete-item.no-results { color: var(--zumac-text-secondary) !important; text-align: center !important; font-style: italic !important; cursor: default !important; padding: 20px !important; } .modzumac .autocomplete-item.no-results:hover { background: var(--zumac-card) !important; } @media (max-width: 768px) { .modzumac .autocomplete-dropdown { max-height: 240px !important; } .modzumac .autocomplete-item { padding: 14px !important; min-height: 60px !important; } .modzumac .autocomplete-item-name { font-size: 0.875rem !important; } .modzumac .autocomplete-item-category { font-size: 0.75rem !important; } } /* ========================== SECCIÓN @KEYFRAMES - ANIMACIONES (10 animaciones faltantes) ========================== */ @keyframes modzumac-slideIn { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes modzumac-pulse-success { 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); } 50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); } } @keyframes modzumac-fadeIn { to { opacity: 1; } } @keyframes modzumac-slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes modzumac-slideDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes modzumac-fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes modzumac-slideInModal { from { transform: translateY(-50px) scale(0.9); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } @keyframes modzumac-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes modzumac-slideUpModal { from { opacity: 0; transform: translateY(30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes modzumac-upgradeSlideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ========================== TOUCH OPTIMIZATIONS - SIN PREFIJO (Override global CSS) ========================== */ /* ✅ PROTEGIDO: Touch devices - min-height y user-select */ @media (hover: none) and (pointer: coarse) { .modzumac .search-input, .modzumac .trip-type-btn, .modzumac .mode-button, .modzumac .btn-search-hero, .modzumac .btn-step-nav, .modzumac .amenity-btn { min-height: 44px; } .modzumac .payment-method-card { min-height: 88px; } .modzumac .trip-type-btn:active, .modzumac .mode-button:active, .modzumac .amenity-card-square:active, .modzumac .payment-method-card:active { transform: scale(0.97); transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1); } .modzumac .btn-search-hero:active, .modzumac .btn-step-nav:active { transform: scale(0.96) translateY(1px); transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1); } .modzumac .trip-type-btn:hover, .modzumac .mode-button:hover, .modzumac .search-input:hover { transform: none; box-shadow: inherit; } .modzumac .search-label, .modzumac .ticket-label, .modzumac .amenity-name-square { text-shadow: 0 0 1px rgba(255, 255, 255, 0.5); } .modzumac .hero-search-card { -webkit-user-select: none; user-select: none; } .modzumac .search-input, .modzumac .search-label { -webkit-user-select: text; user-select: text; } } /* ========================== MEDIA QUERY DESKTOP ESPECÍFICO ========================== */ @media (min-width: 769px) and (max-width: 1024px) { .modzumac .policies-modal { max-width: 550px !important; } } /* ============================================================================ RESPONSIVE ESPECÍFICO PARA iPHONES (14, 14 Pro Max, 15 Pro) iPhone 14: 390px | iPhone 15 Pro: 393px | iPhone 14 Pro Max: 430px ============================================================================ */ @media (max-width: 430px) { /* ===== VIAJE SENCILLO - Layout vertical para móvil ===== */ .modzumac .search-form-row-three { display: flex !important; flex-direction: column !important; gap: 12px !important; position: static !important; } /* ✅ CRÍTICO: Sobrescribir TODOS los estilos inline de los form-groups */ .modzumac .search-form-row-three .search-form-group, .modzumac .search-form-row-three > div[class*="search-form-group"], .modzumac #sencillo-fields .search-form-row-three > div { width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-left: 0 !important; margin-right: 0 !important; position: static !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; align-self: stretch !important; text-align: left !important; } .modzumac .search-form-row-three .search-form-group-medium, .modzumac .search-form-row-three .search-form-group-small { flex: none !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* Labels e inputs de viaje sencillo alineados */ .modzumac #sencillo-fields .search-form-row-three .search-label { text-align: left !important; width: 100% !important; } .modzumac #sencillo-fields .search-form-row-three .search-input { width: 100% !important; max-width: 100% !important; } /* ===== VIAJE REDONDO - Layout optimizado para móvil ===== */ .modzumac .search-form-row-four-compact { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important; position: static !important; width: 100% !important; } /* ✅ CRÍTICO: Sobrescribir TODOS los estilos inline de viaje redondo */ .modzumac .search-form-row-four-compact .search-form-group, .modzumac .search-form-row-four-compact > div[class*="search-form-group"], .modzumac #redondo-fields .search-form-row-four-compact > div { width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-left: 0 !important; margin-right: 0 !important; position: static !important; align-self: stretch !important; text-align: left !important; } /* Ciudad y Pasajeros ocupan 100% */ .modzumac .search-form-row-four-compact .search-form-group-medium, .modzumac .search-form-row-four-compact .search-form-group-small { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* Labels más grandes para mobile */ .modzumac .search-form-row-four-compact .search-label, .modzumac .search-form-row-three .search-label { font-size: 14px !important; margin-bottom: 5px !important; } /* Inputs más grandes para touch */ .modzumac .search-form-row-four-compact .search-input, .modzumac .search-form-row-three .search-input { min-height: 46px !important; font-size: 16px !important; padding: 10px 12px !important; width: 100% !important; } /* City indicator ajustado */ .modzumac .city-indicator-inline { min-height: 46px !important; padding: 10px 14px !important; } .modzumac .city-value-inline { font-size: 16px !important; } /* ===== Contenedor de Fecha/Hora en viaje redondo - stack vertical ===== */ .modzumac #redondo-fields .search-form-row-four-compact > div:nth-child(3), .modzumac #redondo-fields .search-form-row-four-compact > div:nth-child(4), .modzumac #redondo-fields .search-form-row-four-compact > .search-form-group:nth-of-type(3), .modzumac #redondo-fields .search-form-row-four-compact > .search-form-group:nth-of-type(4) { width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; align-items: stretch !important; float: none !important; position: static !important; left: 0 !important; right: auto !important; } /* Labels dentro de los contenedores de fecha/hora */ .modzumac #redondo-fields .search-form-row-four-compact .search-label { margin-top: 0 !important; font-size: 14px !important; text-align: left !important; width: 100% !important; } /* Inputs dentro de los contenedores de fecha/hora */ .modzumac #redondo-fields .search-form-row-four-compact .search-input { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } } /* ===== iPhone 14 y 15 Pro (390-393px) - Ajustes finos ===== */ @media (max-width: 393px) { .modzumac .hero-search-card.step-1 { padding: 16px 14px !important; } .modzumac .search-card-title { font-size: 1.2rem !important; } .modzumac .trip-type-selector { gap: 6px !important; } .modzumac .trip-type-btn { padding: 10px 12px !important; font-size: 13px !important; } .modzumac .location-mode-selector .mode-button { padding: 8px 14px !important; font-size: 12px !important; } .modzumac .btn-search-hero { width: 90% !important; padding: 14px 20px !important; } } /* ============================================================================ RESPONSIVE LAPTOPS PEQUEÑAS (1024px - 1440px) Incluye: Lenovo Ideapad 3 (1366x768), HP 14", Dell Inspiron 14", etc. ============================================================================ */ @media (min-width: 1025px) and (max-width: 1440px) { /* ===== CARD PRINCIPAL - Reducir altura para viewport 768px ===== */ .modzumac .hero-search-card { max-height: 560px !important; padding: 12px 22px 8px 22px !important; } .modzumac .hero-search-card.step-1 { max-width: 560px !important; max-height: 560px !important; overflow-y: visible !important; overflow-x: visible !important; } /* ===== TÍTULOS MÁS COMPACTOS ===== */ .modzumac .search-card-title { font-size: 1.4rem !important; margin-bottom: 4px !important; } .modzumac .search-card-subtitle { font-size: 0.7rem !important; margin-bottom: 10px !important; } /* ===== TRIP TYPE SELECTOR MÁS COMPACTO ===== */ .modzumac .trip-type-selector { margin-bottom: 12px !important; padding: 3px !important; } .modzumac .trip-type-btn { padding: 8px 14px !important; font-size: 13px !important; min-height: 36px !important; } /* ===== LAYOUT MAPA - PROPORCIONES AJUSTADAS ===== */ .modzumac .locations-map-layout { gap: 10px !important; margin-bottom: 8px !important; margin-top: 8px !important; min-height: 200px !important; } /* Columna origen/destino: más ancha */ .modzumac .locations-column { flex: 0 0 58% !important; gap: 10px !important; } /* Columna mapa: más estrecha */ .modzumac .map-info-column { flex: 0 0 calc(42% - 10px) !important; gap: 6px !important; } /* ===== MAPA MÁS PEQUEÑO ===== */ .modzumac .hero-map-container-compact { height: 140px !important; } .modzumac .hero-map-container-horizontal { height: 160px !important; margin-bottom: 8px !important; } /* ===== ROUTE INFO COMPACTO ===== */ .modzumac .route-info-compact { padding: 6px 10px !important; gap: 6px !important; } .modzumac .route-info-label { font-size: 9px !important; } .modzumac .route-info-value { font-size: 12px !important; } /* ===== FORM GROUPS MÁS COMPACTOS ===== */ .modzumac .search-form-group { margin-bottom: 10px !important; } .modzumac .search-label { font-size: 12px !important; margin-bottom: 3px !important; } .modzumac .search-input { padding: 8px 12px !important; font-size: 14px !important; min-height: 40px !important; } /* ===== SEARCHABLE SELECT COMPACTO ===== */ .modzumac .searchable-select-input { padding: 8px 36px 8px 12px !important; font-size: 14px !important; min-height: 40px !important; } .modzumac .searchable-select-dropdown { max-height: 200px !important; } /* ===== VIAJE SENCILLO - 4 columnas compactas (Ciudad, Pasajeros, Fecha, Hora) ===== */ .modzumac .search-form-row-three { display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; margin-bottom: 10px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Distribuir columnas para que quepan en laptops (1366px) */ .modzumac .search-form-row-three .search-form-group-medium { flex: 0 0 28% !important; min-width: 110px !important; max-width: 130px !important; } .modzumac .search-form-row-three .search-form-group-small { flex: 0 0 12% !important; min-width: 60px !important; max-width: 70px !important; } /* Campos de Fecha y Hora - flex para llenar espacio restante */ .modzumac .search-form-row-three .search-form-group:not(.search-form-group-medium):not(.search-form-group-small) { flex: 1 1 auto !important; min-width: 100px !important; max-width: 140px !important; } /* Inputs de fecha/hora compactos para Lenovo IdeaPad 3 */ .modzumac .search-form-row-three input[type="date"], .modzumac .search-form-row-three input[type="time"] { padding: 6px 8px !important; font-size: 13px !important; min-height: 38px !important; } /* ===== VIAJE REDONDO - 4 columnas compactas ===== */ .modzumac .search-form-row-four-compact { grid-template-columns: 1fr 0.4fr 1.1fr 1.1fr !important; gap: 6px !important; margin-bottom: 10px !important; } .modzumac .search-form-row-four-compact .search-label { font-size: 11px !important; margin-bottom: 2px !important; } .modzumac .search-form-row-four-compact .search-input { padding: 6px 8px !important; font-size: 13px !important; min-height: 36px !important; } /* ===== LOCATION MODE SELECTOR ===== */ .modzumac .location-mode-selector { gap: 8px !important; margin-top: 10px !important; margin-bottom: 2px !important; } .modzumac .location-mode-selector .mode-button { padding: 8px 16px !important; font-size: 0.8rem !important; min-height: 34px !important; } /* ===== BOTÓN SIGUIENTE - MÁS COMPACTO ===== */ .modzumac .btn-search-hero, .modzumac .hero-search-card .btn-search-hero, .modzumac .hero-search-card.step-1 .btn-search-hero { padding: 10px 18px !important; font-size: 14px !important; min-height: 38px !important; height: 38px !important; margin: 0 auto !important; margin-top: -36px !important; margin-bottom: 0 !important; width: 60% !important; } /* ===== CITY INDICATOR ===== */ .modzumac .city-indicator-inline { min-height: 38px !important; padding: 8px 12px !important; } .modzumac .city-value-inline { font-size: 14px !important; } /* ===== WHATSAPP CONTAINER ===== */ .modzumac .otros-destinos-whatsapp-container { min-height: 220px !important; } .modzumac .whatsapp-message { padding: 1.5rem !important; } .modzumac .whatsapp-message p { font-size: 0.95rem !important; margin-bottom: 1rem !important; } .modzumac .whatsapp-contact-button { padding: 0.8rem 1.5rem !important; font-size: 1rem !important; } } /* ===== LAPTOPS CON VIEWPORT BAJO (altura <= 800px) ===== */ @media (min-width: 1025px) and (max-height: 800px) { .modzumac .hero-search-card { max-height: 550px !important; } .modzumac .hero-search-card.step-1 { max-height: 550px !important; } /* Mapa aún más pequeño en viewports bajos */ .modzumac .hero-map-container-compact { height: 120px !important; } .modzumac .locations-map-layout { min-height: 200px !important; } } /* ============================================================================ FIX: DROPDOWNS POR ENCIMA DE #beneficios.section (z-index stacking) ============================================================================ Problema: .section tiene z-index:2 y position:relative, creando stacking context que puede tapar los dropdowns del hero search. Solución: Asegurar que el contenedor del hero y dropdowns tengan z-index superior. ============================================================================ */ /* El hero wrapper activo debe estar por encima de .section (z-index: 2) */ .modzumac .searchable-select-wrapper.active { z-index: 100 !important; position: relative !important; } /* Dropdown cuando está visible - MÁXIMA PRIORIDAD sobre .section */ .modzumac .searchable-select-wrapper.active .searchable-select-dropdown { z-index: 999999 !important; position: absolute !important; } /* Asegurar que el contenedor del hero tenga z-index superior a .section */ .modzumac .hero-search-card, .modzumac .hero-modal-container, .modzumac #hero-search-widget { z-index: 10 !important; position: relative !important; } /* Regla específica para que dropdowns estén sobre #beneficios */ #beneficios.section { z-index: 1 !important; } /* Todas las .section después del hero deben tener z-index bajo */ section.section { z-index: 1 !important; } /* ============================================================================ FIN DE PROTECCIÓN - PASO 1 DEFINITIVO - 100% COMPLETO ============================================================================ */