/* ========================================================================== PALETA DE COLORES Y ESTILO BASE - TECH/ESPACIAL ========================================================================== */ html { /* NIVEL DIOS AJUSTADO (Punto 30%): - Subimos a 4.3vw. - Esto retrasa el momento del achique. - Ahora se mantiene en tamaño completo hasta que el ancho baja de ~372px. */ font-size: clamp(85%, 4.3vw, 100%); } :root { --map-ad-height: 0px; /* Variable dinámica para el anuncio del mapa */ --safe-top: 0px; /* Por defecto (Web) no dejamos espacio extra arriba */ /* DINÁMICO: 1.5rem si no hay anuncio, 0.75rem si hay anuncio (para ahorrar espacio) */ --bottom-margin-dynamic: 1.5rem; --color-background: #000000; /* Negro Puro */ --color-surface: #0d1318; /* El color de fondo anterior, para mantener contraste */ --color-primary: #3081F7; /* Azul brillante para acentos */ --color-secondary: #58A6FF; /* Azul claro */ --color-accent: #0c2955; /* Azul de acento */ --color-text-primary: #FFFFFF; /* Texto principal (blanco puro) */ --color-text-secondary: #8B949E;/* Texto secundario (gris) */ --color-success: #39D353; /* Verde para éxito */ --color-danger: #F85149; /* Rojo para errores */ --color-warning: #ffbb29; /* Naranja/amarillo para advertencias */ --color-orbit: #e2931b; /* Amarillo/Naranja para la órbita */ --color-satellite-icon: #ffee58; /* Amarillo dorado para el ícono */ --color-starlink-icon: #58A6FF; /* Azul para Starlinks */ --color-aircraft: #FF5733; /* Naranja rojizo para los aviones */ --start-screen-gradient-color: rgba(48, 110, 192, 0.185); /* Color por defecto */ --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1); } /* Lógica para reducir el margen cuando aparece el anuncio */ body.has-map-ad { --bottom-margin-dynamic: 0.75rem; /* Margen intermedio optimizado */ } /* Solo si es App Nativa, activamos el espacio seguro para el notch/barra de estado */ body.is-native { --safe-top: max(env(safe-area-inset-top), 25px); } html { height: 100%; } body { font-family: 'Space Grotesk', sans-serif; background-color: var(--color-background); color: var(--color-text-primary); overflow: hidden; user-select: none; cursor: default; height: 100%; margin: 0; display: flex; flex-direction: column; /* MEJORAS DE DEFINICIÓN */ -webkit-font-smoothing: antialiased; /* Texto más fino y nítido en Webkit/Android */ -moz-osx-font-smoothing: grayscale; /* Texto más nítido en Firefox/iOS */ text-rendering: optimizeLegibility; /* Mejora el kerning y ligaduras */ image-rendering: -webkit-optimize-contrast; /* Mejora contraste de imágenes */ } /* OPTIMIZACIÓN: Capa de ruido eliminada para mejorar rendimiento general */ body::after { display: none; } /* ========================================================================== SCROLLBAR PERSONALIZADO ========================================================================== */ /* Oculta todas las barras de scroll */ body { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE y Edge */ } ::-webkit-scrollbar { display: none; /* Chrome, Safari y Opera */ } ::selection { background-color: var(--color-primary); color: white; } #app-container { flex-grow: 1; min-height: 0; } @media (min-width: 1024px) { #app-container { position: absolute; left: 220px; width: calc(100% - 220px); height: 100%; } } .hidden { display: none !important; } .hide-for-screenshot { visibility: hidden !important; } .screen { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; /* PUNTO MEDIO: 7.5vw */ padding: clamp(1rem, 7.5vw, 2rem); position: absolute; top: 0; left: 0; /* OPTIMIZACIÓN: Añadida backface-visibility para reducir parpadeos en móviles */ will-change: transform, opacity; backface-visibility: hidden; perspective: 1000px; /* OPTIMIZACIÓN: contain strict es más agresivo y mejor para rendimiento */ contain: strict; box-sizing: border-box; background: var(--color-background); } /* --- INICIO: Degradado para Barra de Estado (Status Bar) --- */ /* Crea un fondo oscuro sutil solo en la parte superior para que se lean los iconos del sistema (batería, hora) sobre el contenido scrolleable */ #best-passes-screen::after, #info-screen-moon::after, #events-screen::after, #launches-screen::after, #eclipses-screen::after, #latest-starlinks-screen::after, #brightest-satellites-screen::after, #my-satellites-screen::after, #known-satellites-screen::after, #info-screen-settings::after, #info-screen-about::after, #info-screen-legal::after, #eclipse-details-screen::after, #whereditpass-screen::after, #learn-screen::after, #guide-screen::after, #contact-screen::after, #about-screen::after, #passes-screen::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; /* Altura dinámica: safe-area (barra estado) + 60px de degradado suave */ /* CAMBIO: Usamos var(--safe-top) */ height: calc(var(--safe-top) + 20px); background: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, transparent 100%); pointer-events: none; /* Permite clicks debajo */ z-index: 5; /* Encima del contenido, pero debajo del Header (z-index: 10) */ } /* --- FIN: Degradado para Barra de Estado --- */ body.loading-share-active #start-screen { filter: blur(5px); transition: filter 0.15s ease-out; } @media (min-width: 1024px) { .screen { width: calc(100% - 220px); left: 220px; } #start-screen { /* Restablece el padding en la vista de escritorio donde no hay barra inferior */ padding-bottom: 2rem; } } #start-screen { /* El fondo ahora lo maneja la clase glass-screen-bg */ /* Añade padding inferior para compensar la barra de navegación y centrar el contenido */ padding-bottom: calc(70px + 1rem + env(safe-area-inset-bottom)); /* Ajustado a 70px de nav + 1rem */ /* PUNTO MEDIO: 11.5vh */ /* CAMBIO: Usamos var(--safe-top) que es 0 en web */ padding-top: calc(clamp(3.5rem, 11.5vh, 4.5rem) + var(--safe-top)); position: relative; overflow-y: auto; /* Permitir scroll si el contenido es largo */ transition: background 0.8s ease-in-out; } @media (orientation: portrait) and (max-width: 768px) { #start-screen { background: radial-gradient(ellipse at center, var(--start-screen-gradient-color) 0%, transparent 65%), var(--color-background); } } /* ========================================================================== ANIMACIONES GENERALES Y DE PANTALLA ========================================================================== */ @keyframes screen-fade-in { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } } @keyframes screen-fade-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.98); } } .screen-enter-active { animation: screen-fade-in 0.15s var(--ease-out-quint) forwards; } .screen-exit-active { animation: screen-fade-out 0.1s var(--ease-out-cubic) forwards; } @keyframes item-fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .list-item-animation { opacity: 0; animation: item-fade-in-up 0.2s var(--ease-out-quint) forwards; } /* ========================================================================== PANTALLA DE MENÚ PRINCIPAL ========================================================================== */ .menu-list-item { display: flex; align-items: center; justify-content: space-between; /* Separa el contenido de la flecha */ gap: 1rem; width: 100%; padding: 1.25rem; /* Padding aumentado para mayor cuerpo */ /* Estilo Liquid Glass (Igual a pass-card) */ background: linear-gradient(145deg, rgba(20, 25, 30, 0.658) 0%, rgba(20, 25, 30, 0.3) 100%); /* Borde sutil uniforme */ border: 1px solid rgba(255, 255, 255, 0.12); /* Corrección de bordes */ background-clip: padding-box; /* Sombras para volumen 3D - Equilibradas */ box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 30px -5px rgba(0, 0, 0, 0.5); border-radius: 24px; /* Curvas modernas */ font-size: 1.05rem; font-weight: 700; /* Texto más bold */ color: var(--color-text-primary); text-align: left; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; overflow: hidden; } /* FIX: Hover solo en PC */ @media (hover: hover) { .menu-list-item:hover { border-color: rgba(88, 166, 255, 0.4); /* Borde azul sutil en hover */ transform: translateY(-2px); box-shadow: 0 10px 35px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(88, 166, 255, 0.05); /* Brillo interior azul muy sutil */ color: white; } } /* Estilo presionado para móvil (sin transform persistente) */ .menu-list-item.is-pressed { border-color: rgba(88, 166, 255, 0.4); box-shadow: inset 0 0 20px rgba(88, 166, 255, 0.05); color: white; } /* Icono principal a la izquierda */ .menu-list-item .menu-icon-left { font-size: 1.25rem; width: 24px; text-align: center; color: var(--color-text-secondary); transition: color 0.3s ease; } /* FIX: Combinamos hover y is-pressed para los iconos internos */ @media (hover: hover) { .menu-list-item:hover .menu-icon-left { color: var(--color-secondary); text-shadow: 0 0 10px rgba(88, 166, 255, 0.5); } .menu-list-item:hover .menu-chevron { opacity: 1; color: var(--color-secondary); transform: translateX(4px); } } .menu-list-item.is-pressed .menu-icon-left { color: var(--color-secondary); text-shadow: 0 0 10px rgba(88, 166, 255, 0.5); } /* Flecha a la derecha (Chevron) */ .menu-list-item .menu-chevron { font-size: 0.9rem; color: var(--color-text-secondary); opacity: 0.5; transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease; } .menu-list-item.is-pressed .menu-chevron { opacity: 1; color: var(--color-secondary); /* Sin transform en touch para que se sienta más sólido */ } /* ========================================================================== COMPONENTES DE UI (BOTONES, INPUTS, MODALES) ========================================================================== */ .btn { font-weight: 500; padding: 0.75rem 1.5rem; border-radius: 8px; border: 1px solid transparent; transition: all 0.1s var(--ease-out-cubic); cursor: pointer; -webkit-tap-highlight-color: transparent; font-size: 1rem; will-change: transform, box-shadow; } .btn.is-pressed { transform: translateY(0px) scale(0.97) !important; transition: transform 0.1s ease; } .btn:disabled { background-color: #30363d !important; color: #8b949e !important; cursor: not-allowed !important; box-shadow: none !important; transform: none !important; border-color: #30363d !important; } /* --- INICIO: Estilo para estado presionado (controlado por JS) --- */ .menu-list-item.is-pressed { transform: translateY(0px) scale(0.97) !important; transition: transform 0.1s ease; } .nav-item.is-pressed, .satellite-nav-btn.is-pressed, .modal-satellite-card.is-pressed, .pass-card-clickable.is-pressed, .satellite-entry-clickable.is-pressed { transform: scale(0.98); transition: transform 0.1s ease; } /* --- FIN: Estilo para estado presionado --- */ .btn-primary { background-color: var(--color-primary); color: white; box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.25), 0 4px 14px 0 rgba(0, 118, 255, 0.39); } .btn-primary:hover { background-color: var(--color-secondary); transform: translateY(-2px); box-shadow: 0 6px 20px 0 rgba(0, 118, 255, 0.45); } .btn-secondary { /* Estilo "Liquid Glass" para botones secundarios */ background-color: rgba(255, 255, 255, 0.05); /* Fondo de vidrio sutil */ color: var(--color-text-primary); border-color: rgba(255, 255, 255, 0.15); /* Borde de vidrio sutil */ box-shadow: none; /* Quitamos la sombra interior para un look más limpio */ } /* FIX: Hover solo en PC */ @media (hover: hover) { .btn-secondary:hover { border-color: var(--color-secondary); /* Borde se ilumina de azul */ color: var(--color-secondary); /* Texto se pone azul */ background-color: rgba(88, 166, 255, 0.1); /* Fondo se tiñe de azul */ transform: translateY(-2px); /* Mantenemos el hover-lift */ } } /* Estilo presionado para móvil */ .btn-secondary.is-pressed { border-color: var(--color-secondary); color: var(--color-secondary); background-color: rgba(88, 166, 255, 0.1); } .btn-danger { background-color: var(--color-danger); color: white; box-shadow: 0 4px 14px 0 rgba(248, 81, 73, 0.3); } .btn-danger:hover { background-color: #ff6b64; transform: translateY(-2px); box-shadow: 0 6px 20px 0 rgba(248, 81, 73, 0.35); } .input-field, .textarea-field { background-color: var(--color-background); border: 1px solid #30363d; color: var(--color-text-primary); padding: 0.6rem; border-radius: 8px; width: 100%; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .input-field:focus, .textarea-field:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(48, 129, 247, 0.3); } .input-field::placeholder, .textarea-field::placeholder { color: var(--color-text-secondary); } .modal-overlay { position: fixed; inset: 0; display: flex; justify-content: center; align-items: center; z-index: 1000; background-color: rgba(0, 0, 0, 0.514); /* Tinte gris oscuro casi negro */ backdrop-filter: blur(8px); /* desenfoque más pronunciado */ -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.3s var(--ease-out-cubic); pointer-events: none; } .modal-overlay.is-visible { opacity: 1; pointer-events: auto; } #notification-modal { z-index: 1100; /* Asegura que aparezca por encima de la info del satélite */ } .modal-content { /* Estilo "Liquid Glass" principal */ background-color: rgba(255, 255, 255, 0.05); /* Vidrio blanco muy sutil */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.15); /* Borde sutil */ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); /* Sombra para profundidad */ border-radius: 16px; /* Más redondeado */ /* Layout general */ color: var(--color-text-primary); /* CLAMP: Padding se reduce */ padding: clamp(1rem, 5vw, 1.5rem); /* CLAMP: Ancho mínimo baja a 280px para pantallas muy chicas */ width: clamp(280px, 90vw, 450px); max-height: 90vh; overflow-y: auto; position: relative; /* Para el botón de cerrar */ /* Animación de entrada */ transform: scale(0.95) translateY(10px); opacity: 0; transition: transform 0.4s 0.1s var(--ease-out-quint); will-change: transform, opacity; } .is-visible .modal-content { opacity: 1; transform: scale(1) translateY(0); } /* Clase para bloquear el scroll del fondo cuando hay un modal abierto */ body.body-no-scroll { overflow: hidden !important; touch-action: none; /* Ayuda en algunos dispositivos táctiles */ } /* Ajuste para que la guía de Starlink no quede tapada por la barra inferior */ #starlink-info-modal .modal-content { /* Aumentamos el espacio restado para dejar margen con la barra inferior */ max-height: calc(100vh - 180px); overscroll-behavior: contain; /* Evita que el scroll se propague al fondo */ } .modal-content h3 { font-size: 1.25rem; font-weight: 700; text-align: center; color: var(--color-text-primary); border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding-bottom: 1rem; margin-bottom: 1.25rem; margin-top: 1rem; /* Espacio para el botón 'X' */ } .social-card { background-color: var(--color-background); border: 1px solid #30363d; border-radius: 12px; padding: 1rem; text-align: center; text-decoration: none; transition: all 0.3s var(--ease-out-quint); will-change: transform, border-color, box-shadow; } .social-card:hover { transform: translateY(-5px); border-color: var(--color-secondary); box-shadow: 0 8px 25px rgba(0,0,0,0.3); } .favorite-btn { position: relative; /* Añadido para posicionar el pseudo-elemento */ z-index: 1; /* Asegura que el botón esté por encima del desenfoque */ color: var(--color-text-secondary); transition: color 0.2s var(--ease-out-cubic), transform 0.2s var(--ease-out-cubic); } .favorite-btn:hover { transform: scale(1.15); } .favorite-btn.is-favorite { color: var(--color-danger); } .favorite-btn::after { content: ''; position: absolute; z-index: -1; /* Detrás del ícono del corazón */ top: 50%; /* Centrado */ left: 50%; width: 35px; /* Más amplio */ height: 35px; background-color: var(--color-danger); /* El mismo color rojo */ border-radius: 50%; /* Más desenfocado y degradado */ filter: blur(13px); /* Un poquito hacia abajo (ajustado levemente) */ transform: translate(-50%, calc(-50% + 5px)); opacity: 0; /* Oculto por defecto */ transition: opacity 0.4s var(--ease-out-quint); } .favorite-btn.is-favorite::after { opacity: 0.1; /* Más sutil */ } .known-satellite-item.is-loading .known-satellite-btn, .known-satellite-item.is-error .known-satellite-btn { cursor: not-allowed; opacity: 0.6; } .options-menu-item { display: flex; align-items: center; gap: 1rem; width: 100%; padding: 0.75rem 1rem; border-radius: 8px; font-size: 1rem; font-weight: 500; text-align: left; color: var(--color-text-primary); background-color: var(--color-surface); transition: all 0.2s var(--ease-out-cubic); border: 1px solid #30363d; cursor: pointer; } .options-menu-item:hover { border-color: var(--color-secondary); background-color: rgba(88, 166, 255, 0.1); color: var(--color-secondary); } .options-menu-item i { font-size: 1rem; width: 16px; text-align: center; color: var(--color-text-secondary); } .options-menu-item i { font-size: 1rem; width: 16px; text-align: center; color: var(--color-text-secondary); } /* ========================================================================== ESTILOS DEL MAPA Y ELEMENTOS ========================================================================== */ #map-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 14vw; font-weight: 700; color: var(--color-text-secondary); opacity: 0.03; pointer-events: none; z-index: 400; white-space: nowrap; user-select: none; letter-spacing: -0.02em; transition: opacity 0.4s ease; } .satellite-view-active #map-watermark { opacity: 0.10; } .visible-watermark-active #map-watermark { opacity: 0.1; } .visible-watermark-active.satellite-view-active #map-watermark { opacity: 0.2; } #map-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* --- INICIO: Efecto Viñeta (Sombra Sutil Arriba/Abajo) --- */ #map-container::after { content: ''; position: absolute; inset: 0; pointer-events: none; /* Z-INDEX 300: Encima del mapa base, pero debajo de los marcadores */ z-index: 300; /* Degradado MUY sutil y corto, solo para dar legibilidad a los menús */ background: linear-gradient( to bottom, rgba(0, 0, 0, 0.6) 0%, /* Menos opaco (antes 0.85) */ rgba(0, 0, 0, 0) 12%, /* Se desvanece mucho más rápido (antes 20%) */ rgba(0, 0, 0, 0) 88%, /* Todo el centro limpio */ rgba(0, 0, 0, 0.6) 100% /* Menos opaco abajo */ ); } /* --- FIN: Efecto Viñeta --- */ #map { width: 100%; height: 100%; background-color: #000; } /* --- INICIO: Mapa más oscuro y contrastado (OPTIMIZADO) --- */ .leaflet-tile-pane { /* Quitamos la transición de filtro y los filtros en sí para rendimiento máximo */ will-change: transform; } /* Modo Oscuro: Ya no aplicamos filtros a los tiles móviles */ .leaflet-tile-pane.dark-map { filter: none; } /* Modo Satélite: Ya no aplicamos filtros a los tiles móviles */ .leaflet-tile-pane.satellite-map { filter: none; } /* --- FIN: Mapa más oscuro (OPTIMIZADO) --- */ .leaflet-control-zoom, .leaflet-control-attribution { display: none; } .leaflet-zoom-anim .leaflet-zoom-animated { transition: transform 0.1s cubic-bezier(0,0,0.25,1); } .satellite-marker { transition: transform 0.2s var(--ease-out-cubic); will-change: transform; /* OPTIMIZACIÓN EXTRA: */ contain: layout style; /* Evita que los cambios en el marcador afecten el layout global del mapa */ z-index: auto; /* Evita contextos de apilamiento innecesarios si no es requerido */ } .no-transition { transition: none !important; } /* --- CORRECCIÓN: Permitir movimiento suave, pero color instantáneo --- */ /* 1. EXCEPCIÓN: Tanto el MARCADOR como la ETIQUETA se mueven suave (transform) */ /* Esto asegura que viajen pegados a la misma velocidad */ .satellite-marker.no-transition, .satellite-label.no-transition { transition: transform 0.2s var(--ease-out-cubic) !important; } /* 2. Matar transiciones SOLO en los contenidos internos (colores, iconos, brillos) */ /* Esto evita el flash amarillo, pero permite que el contenedor padre se mueva suave */ .satellite-marker.no-transition .satellite-marker-wrapper, .satellite-marker.no-transition .satellite-triangle-icon, /* .satellite-marker.no-transition .satellite-marker-wrapper::after, <--- BORRADA */ .satellite-label.no-transition span, .satellite-label.no-transition i { transition: none !important; animation: none !important; } /* --- FIN CORRECCIÓN --- */ /* --- INICIO: Estilos para la sombra de la noche --- */ .night-overlay { fill: #000; fill-opacity: 0.3; stroke: none; pointer-events: none; /* Permite interactuar con el mapa debajo */ } /* --- FIN: Estilos para la sombra de la noche --- */ .satellite-marker-wrapper { transform-origin: center; } .satellite-triangle-icon { fill: var(--color-satellite-icon); filter: drop-shadow(0 0 5px var(--color-satellite-icon)); transition: fill 0.5s ease-in-out, filter 0.5s ease-in-out; stroke: #1b1b1a; stroke-width: 0.7; } /* NUEVO: Estilo para Starlinks visibles */ .satellite-marker-wrapper.is-starlink .satellite-triangle-icon { fill: var(--color-starlink-icon); filter: drop-shadow(0 0 5px var(--color-starlink-icon)); } /* --- INICIO: Resplandor para satélites en modo "Cerca" --- */ .satellite-marker-wrapper::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--glow-size, 0px); height: var(--glow-size, 0px); background: radial-gradient(circle, rgba(255, 235, 59, 0.4) 0%, rgba(255, 235, 59, 0) 70%); border-radius: 50%; transition: width 1s ease-out, height 1s ease-out, opacity 0.5s ease-out; opacity: 0; z-index: -1; /* Para que esté detrás del triángulo */ pointer-events: none; /* <-- AGREGAMOS ESTO */ } .satellite-marker-wrapper.is-starlink::after { background: radial-gradient(circle, rgba(88, 166, 255, 0.4) 0%, rgba(88, 166, 255, 0) 70%); } body.nearby-mode-active .satellite-marker-wrapper:not(.is-not-visible)::after { opacity: 1; } /* Acelera drásticamente la transición del glow cuando se interactúa con el tiempo */ body.fast-glow-transition .satellite-marker-wrapper::after { transition: width 0.1s ease-out, height 0.1s ease-out, opacity 0.1s ease-out !important; } /* --- FIN: Resplandor para satélites en modo "Cerca" --- */ .satellite-marker-wrapper.is-not-visible .satellite-triangle-icon { fill: var(--color-text-secondary); filter: drop-shadow(0 0 5px var(--color-text-secondary)); } .user-location-icon { width: 14px; height: 14px; background-color: var(--color-secondary); border-radius: 50%; border: 2px solid white; box-shadow: 0 0 10px var(--color-secondary); animation: pulse-user-location 2s infinite; } @keyframes pulse-user-location { 0%, 100% { transform: scale(1); box-shadow: 0 0 10px var(--color-secondary); } 50% { transform: scale(0.9); box-shadow: 0 0 15px var(--color-secondary); } } @keyframes pulse-active-mode { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } } .gps-location-prompt { cursor: pointer; color: var(--color-secondary); transition: color 0.2s ease, transform 0.2s ease; } .gps-location-prompt:hover { color: var(--color-primary); transform: scale(1.05); } .satellite-label { background-color: rgba(13, 17, 23, 0.8); color: var(--color-text-primary); border: 1px solid var(--color-orbit); border-radius: 6px; padding: 3px 8px; font-size: 12px; font-weight: 500; white-space: nowrap; box-shadow: 0 2px 10px rgba(0,0,0,0.5); transition: color 0.5s ease-in-out, border-color 0.5s ease-in-out, opacity 0.3s ease, transform 0.2s var(--ease-out-cubic); display: flex; align-items: center; gap: 0.4rem; cursor: pointer; } .satellite-label.is-starlink { border-color: var(--color-starlink-icon); } body.nearby-mode-active .satellite-label { font-size: 11px; padding: 2px 6px; } .satellite-label > span { /* El cursor ahora está en la etiqueta principal, no es necesario aquí */ } .satellite-label .sat-info-icon, .satellite-integrated-label .sat-info-icon { color: var(--color-text-secondary); transition: color 0.2s ease, transform 0.2s ease; font-size: 11px; } .satellite-label:hover .sat-info-icon, .satellite-integrated-label:hover .sat-info-icon { color: var(--color-secondary); transform: scale(1.1); } /* Nueva etiqueta integrada dentro del marcador */ .satellite-integrated-label { position: absolute; left: 42px; /* Más separado del icono */ top: 50%; transform: translateY(-50%); background-color: rgba(13, 17, 23, 0.8); color: var(--color-text-primary); border: 1px solid var(--color-orbit); border-radius: 6px; padding: 3px 7px; /* Punto intermedio */ font-size: 11.5px; /* Punto intermedio */ font-weight: 500; white-space: nowrap; box-shadow: 0 2px 10px rgba(0,0,0,0.5); display: flex; align-items: center; gap: 0.4rem; cursor: pointer; pointer-events: auto; /* Asegura que el click funcione */ transition: opacity 0.2s ease, border-color 0.2s ease; } /* Mantener tamaño compacto SOLO en modo Radar/Cerca */ body.nearby-mode-active .satellite-integrated-label { padding: 2px 6px; font-size: 11px; } /* Flecha (Borde exterior) */ .satellite-integrated-label::before { content: ''; position: absolute; top: 50%; right: 100%; /* Pegado a la izquierda */ transform: translateY(-50%); border: 6px solid transparent; border-right-color: var(--color-orbit); /* Color del borde */ } /* Flecha (Relleno interior para tapar el borde y que parezca hueca) */ .satellite-integrated-label::after { content: ''; position: absolute; top: 50%; right: 100%; transform: translateY(-50%); border: 5px solid transparent; border-right-color: rgba(13, 17, 23, 0.8); /* Color del fondo */ margin-right: -1px; /* Ajuste fino para superponer */ } /* Color Starlink (Azul) SOLO en modo Radar */ body.nearby-mode-active .satellite-integrated-label.is-starlink { border-color: var(--color-starlink-icon); } /* Color de la flecha cuando es Starlink (Azul) SOLO en modo Radar */ body.nearby-mode-active .satellite-integrated-label.is-starlink::before { border-right-color: var(--color-starlink-icon); } .satellite-integrated-label.is-not-visible { color: var(--color-text-secondary); border-color: var(--color-text-secondary); opacity: 0.7; } /* Flecha gris cuando no es visible */ .satellite-integrated-label.is-not-visible::before { border-right-color: var(--color-text-secondary); } .satellite-label.is-not-visible { color: var(--color-text-secondary); border-color: var(--color-text-secondary); } .aircraft-marker-wrapper { transform-origin: center; /* Ya no es necesaria la transición de rotación para un punto */ } .aircraft-dot { width: 12px; height: 12px; background-color: var(--color-aircraft); border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 0 10px var(--color-aircraft); } .aircraft-label { background-color: rgba(13, 17, 23, 0.8); color: var(--color-text-primary); border: 1px solid var(--color-aircraft); border-radius: 6px; padding: 3px 8px; font-size: 11px; font-weight: 500; white-space: nowrap; box-shadow: 0 2px 10px rgba(0,0,0,0.5); } .trajectory-time-label { background-color: rgba(13, 17, 23, 0.85); color: var(--color-secondary); border: 1px solid var(--color-accent); border-radius: 6px; padding: 2px 6px; font-size: 11px; font-weight: 700; text-align: center; white-space: nowrap; box-shadow: 0 2px 5px rgba(0,0,0,0.6); pointer-events: none; opacity: 0; transform: scale(0.9); transition: opacity 0.3s var(--ease-out-cubic), transform 0.3s var(--ease-out-cubic); } .trajectory-time-label.visible { opacity: 1; transform: scale(1); } #satellite-name-display { cursor: pointer; transition: color 0.2s ease-in-out; } #satellite-name-display:hover { color: var(--color-secondary); } .header-logo-text { font-size: 1.20rem !important; /* Usamos !important para asegurar que sobreescriba el text-sm */ letter-spacing: -0.025em !important; /* tracking-tight */ font-family: 'Space Grotesk', sans-serif !important; /* Asegura la fuente correcta */ } /* --- INICIO: Estilos para la transición del texto del encabezado --- */ #satellite-info-header { height: 100%; } .header-content-item { position: absolute; display: flex; align-items: center; justify-content: center; transition: opacity 0.4s var(--ease-out-quint), transform 0.4s var(--ease-out-quint); } #satellite-name-container { opacity: 1; transform: translateY(0); } #radar-header-text, #radar-elevation-display { opacity: 0; transform: translateY(15px); pointer-events: none; font-weight: 700; color: var(--color-secondary); text-align: center; font-size: clamp(1rem, 4vw, 1.15rem); /* Tamaño de fuente adaptable */ letter-spacing: 0.025em; width: 100%; white-space: nowrap; /* Asegura que el texto no se divida en varias líneas */ } #nearby-header-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; } #nearby-header-text span { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.025em; /* tracking-tight */ text-shadow: 0 1px 4px rgba(0,0,0,0.5); } /* --- INICIO: Lógica de visibilidad para el modo de predicción de paso --- */ #ar-mode-pill-btn { opacity: 0; transform: translateY(15px); pointer-events: none; display: flex; } body.pass-view-active #satellite-name-container, body.pass-view-active #nearby-button { display: none; } /* --- INICIO: Lógica de visibilidad para el modo "Cerca" en el panel --- */ body.nearby-mode-active #main-control-panel:not(.show-compass) #satellite-info-header { opacity: 0; pointer-events: none; } body.nearby-mode-active #main-control-panel:not(.show-compass) #nearby-header-text { opacity: 1; pointer-events: auto; transition-delay: 0.1s; } /* --- FIN: Lógica de visibilidad --- */ body.pass-view-active #ar-mode-pill-btn, body.nearby-mode-active #main-control-panel.show-compass #ar-mode-pill-btn { opacity: 1; transform: translateY(0); pointer-events: auto; transition-delay: 0.1s; } /* Oculta el nombre del satélite cuando el panel está colapsado en modo Radar/Cerca */ body.nearby-mode-active #main-control-panel:not(.expanded) #satellite-name-container { opacity: 0; pointer-events: none; } /* --- FIN: Lógica de visibilidad --- */ /* --- INICIO: Comportamiento del botón "Cerca" --- */ #location-bar-container { gap: 0; transition: gap 0.4s var(--ease-out-quint); } #main-control-panel.location-set #location-bar-container { gap: 0.5rem; /* Corresponde a gap-2 de Tailwind */ } #nearby-button { opacity: 0; transform: scale(0.8); pointer-events: none; width: 0; overflow: hidden; font-size: 0; padding: 0; /* Asegura que no haya padding */ border-width: 0; /* Elimina el borde */ transition: all 0.4s var(--ease-out-quint); } #main-control-panel.location-set #nearby-button { opacity: 1; transform: scale(1); pointer-events: auto; width: 2.5rem; /* h-10 en tailwind es 2.5rem */ padding: 0; border-width: 1px; /* Restaura el borde */ font-size: 1.125rem; } /* --- FIN: Comportamiento del botón "Cerca" --- */ /* --- INICIO: Estilos para el modo "Cerca" --- */ #nearby-button { transition: all 0.3s var(--ease-out-quint); box-shadow: inset 0 0 8px 0 rgba(88, 166, 255, 0.4); color: var(--color-secondary); } #nearby-button:hover { box-shadow: inset 0 0 14px 2px rgba(88, 166, 255, 0.6); } #nearby-button.active { background-color: var(--color-primary); color: white; border-color: var(--color-primary); box-shadow: 0 0 15px rgba(48, 129, 247, 0.3); } #ar-mode-pill-btn { box-shadow: inset 0 0 8px 0 rgba(88, 166, 255, 0.5); border-color: rgba(88, 166, 255, 0.7); color: var(--color-secondary); transition: all 0.3s var(--ease-out-quint); } #ar-mode-pill-btn:hover { box-shadow: inset 0 0 14px 2px rgba(88, 166, 255, 0.6); border-color: var(--color-secondary); background-color: rgba(88, 166, 255, 0.1); } #ar-mode-pill-btn.is-pressed { transform: translateX(-50%) scale(0.97) !important; } .nearby-radius-circle { stroke-dasharray: 5, 10; animation: dash-flow 20s linear infinite; } .nearby-mask-overlay { pointer-events: none; /* Permite hacer clic a través de la máscara */ fill-opacity: 0.5; /* Opacidad por defecto */ transition: fill-opacity 0.3s ease-in-out; /* Transición suave */ } /* Reduce la opacidad de la máscara en el modo "Radar" */ body.nearby-mode-active .nearby-mask-overlay { fill-opacity: 0.4; /* Un poco menos oscuro */ } /* --- INICIO: Contenedor recortado para los marcadores del modo "Cerca" --- */ #map .leaflet-pane.leaflet-nearby-markers-pane { clip-path: url(#nearby-clip); } /* --- FIN: Contenedor recortado --- */ .radar-soft-beam { stroke: none; pointer-events: none; mix-blend-mode: screen; /* Clave para el efecto de luz */ /* REDUCIDO: De 15px a 8px. Esto define los bordes sin perder la suavidad interna */ filter: blur(8px); will-change: transform; /* Transform es mejor para evitar parpadeos en zoom */ transform: translateZ(0); /* Fuerza a la GPU a renderizar esta capa */ } /* Nueva clase para las líneas de borde */ .radar-edge-line { stroke-linecap: round; pointer-events: none; mix-blend-mode: screen; /* Glow muy sutil solo en la línea para integrarla con la luz */ filter: drop-shadow(0 0 4px var(--color-secondary)); will-change: transform; } /* --- INICIO: Estilo para la etiqueta de Destellos (rediseñada) --- */ .flare-arc-label { cursor: pointer; /* <--- NUEVO */ background-color: rgba(13, 17, 23, 0.8); color: var(--color-text-primary); border: 1px solid var(--color-orbit); /* Borde amarillo/naranja */ border-radius: 9999px; /* Forma de píldora */ padding: 3px 10px; /* Un poco más de padding horizontal para la píldora */ font-size: 12px; font-weight: 500; white-space: nowrap; box-shadow: 0 2px 10px rgba(0,0,0,0.5); display: flex; align-items: center; gap: 0.4rem; } .flare-arc-label .sat-info-icon { color: var(--color-text-secondary); font-size: 11px; } /* --- FIN: Estilo para la etiqueta de Destellos --- */ @keyframes dash-flow { to { stroke-dashoffset: -200; } } /* --- FIN: Estilos para el modo "Cerca" --- */ #main-control-panel.expanded.show-compass #satellite-name-container { opacity: 0; pointer-events: none; } #main-control-panel.expanded.show-compass #nearby-button { opacity: 0 !important; pointer-events: none !important; } #main-control-panel.expanded.show-compass #satellite-name-container { transform: translateY(-15px); } #main-control-panel.expanded.show-compass #radar-header-text { opacity: 1; transform: translateY(0); pointer-events: auto; transition-delay: 0.1s; } body.nearby-mode-active #main-control-panel.expanded.show-compass #radar-header-text { opacity: 0; pointer-events: none; } #main-control-panel.expanded.show-compass.pointing-up #radar-header-text { opacity: 0; transform: translateY(-15px); pointer-events: none; transition-delay: 0s; } #main-control-panel.expanded.show-compass.pointing-up #radar-elevation-display { opacity: 1; transform: translateY(0); pointer-events: auto; transition-delay: 0.1s; } body.pass-view-active #main-control-panel.expanded.show-compass #radar-header-text, body.pass-view-active #main-control-panel.expanded.show-compass #radar-elevation-display, body.nearby-mode-active #main-control-panel.expanded.show-compass #radar-elevation-display { opacity: 0 !important; pointer-events: none !important; } /* --- FIN: Estilos para la transición del texto del encabezado --- */ #nearby-button { opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease-out-quint), transform 0.4s var(--ease-out-quint); } #main-control-panel.satellite-loaded #nearby-button { opacity: 1; pointer-events: auto; } .orbit-path, .orbit-path-shadow { transition: opacity 0.3s ease-in-out; } .orbit-path { stroke: var(--color-orbit); stroke-width: 2.5; stroke-opacity: 0.9; fill: none; filter: drop-shadow(0 0 6px var(--color-orbit)); } .orbit-path-shadow { stroke: var(--color-text-secondary); stroke-width: 2; stroke-opacity: 0.7; stroke-dasharray: 4, 4; fill: none; } #main-control-panel { /* CAMBIO: Márgenes laterales fluidos (de 0.5rem a 1rem) para acompañar el achique */ /* CAMBIO: Usamos var(--safe-top) */ position: absolute; z-index: 500; top: calc(1rem + var(--safe-top)); left: clamp(0.5rem, 3vw, 1rem); right: clamp(0.5rem, 3vw, 1rem); max-width: 1000px; margin-left: auto; margin-right: auto; } #panel-inner-wrapper { /* --- Estilo Liquid Glass High-Contrast Optimizado --- */ /* Fondo un poco más sólido para evitar repaint costoso */ background: linear-gradient(165deg, rgba(20, 25, 30, 0.90) 0%, rgba(20, 25, 30, 0.6) 100%); /* Blur reducido */ backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); /* Borde sutil uniforme */ border: 1px solid rgba(255, 255, 255, 0.12); background-clip: padding-box; /* Sombras optimizadas */ box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 8px 25px rgba(0, 0, 0, 0.5); border-radius: 24px; /* Optimización de animación */ overflow: hidden; transition: max-height 0.5s var(--ease-out-quint), box-shadow 0.3s ease; max-height: 3.625rem; will-change: max-height; /* Prepara a la GPU para el cambio de altura */ contain: paint; /* Aisla el repintado */ } #main-control-panel.expanded:not(.show-compass) #panel-inner-wrapper { /* CAMBIO: 214px -> 13.375rem */ max-height: 13.375rem; /* box-shadow eliminado para mantener consistencia con el estado cerrado */ } #main-control-panel.expanded.show-compass #panel-inner-wrapper { /* CAMBIO: Ajuste fino para achicar un poco el radar (18.45rem -> 17rem) */ max-height: 17rem; /* box-shadow eliminado para mantener consistencia con el estado cerrado */ } /* Panel más alto en App Nativa para acomodar radar más grande */ body.is-native #main-control-panel.expanded.show-compass #panel-inner-wrapper { max-height: 18.25rem; } /* CAMBIO: height 58px -> 3.625rem */ #collapsed-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem; cursor: ns-resize; height: 3.625rem; } #expanded-content { opacity: 0; transition: opacity 0.4s var(--ease-out-quint) 0.1s; pointer-events: none; } #main-control-panel.expanded #expanded-content { opacity: 1; pointer-events: auto; } #toggle-menu-btn .fa-chevron-down { transition: transform 0.4s var(--ease-out-quint); } #main-control-panel.expanded #toggle-menu-btn .fa-chevron-down { transform: rotate(180deg); } .status-badge { font-size: 0.8rem; font-weight: 500; padding: 0.2rem 0.6rem; border-radius: 1rem; background-color: var(--color-surface); border: 1px solid #30363d; } #panel-pages-wrapper { transition: transform 0.4s var(--ease-out-quint); } #main-control-panel.show-compass #panel-pages-wrapper { transform: translateX(-100%); } #radar-canvas, #large-radar-canvas { width: 100%; height: 100%; border-radius: 50%; /* --- INICIO: Estilo Liquid Glass --- */ background-color: rgba(255, 255, 255, 0.05); /* Vidrio blanco muy sutil */ border: 1px solid rgba(255, 255, 255, 0.15); /* Borde sutil */ /* --- FIN: Estilo Liquid Glass --- */ } /* --- INICIO: Radar Oscuro (Modo Radar desde Inicio) --- */ /* Esta regla oscurece solo el radar del panel superior cuando se activa el modo Radar. */ body.nearby-mode-active #radar-canvas { background-color: rgba(10, 10, 10, 0.712); /* Vidrio oscuro */ border: 1px solid rgba(255, 255, 255, 0.1); } /* --- FIN: Radar Oscuro --- */ /* -- NUEVO: Transición y tamaño del radar -- */ #radar-container { /* CAMBIO: 13.75rem -> 12.5rem. Un poco más chico */ max-width: 12.5rem; } /* Aumentar tamaño solo en App Nativa */ body.is-native #radar-container { max-width: 13.75rem; } #main-control-panel.expanded.show-compass #radar-container { } /* Estilos para el mensaje de calibración del radar */ .calibration-overlay { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.6); /* Un poco menos oscuro (60%) */ backdrop-filter: blur(10px); /* Blur más intenso */ -webkit-backdrop-filter: blur(10px); border-radius: 50%; /* Máscara para limpiar el borde y evitar bordes pixelados en el desenfoque */ -webkit-mask-image: radial-gradient(circle, white 98%, transparent 100%); mask-image: radial-gradient(circle, white 98%, transparent 100%); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease-out-quint); z-index: 10; } .calibration-overlay.is-visible { opacity: 1; } /* Ajustamos el texto e íconos internos para que coincidan */ .calibration-overlay div { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .calibration-overlay span, .calibration-overlay p { font-size: 0.8rem; /* Tamaño igual al tutorial */ font-weight: 700; color: var(--color-text-primary); text-transform: uppercase; /* Mayúsculas igual al tutorial */ letter-spacing: 0.05em; text-shadow: 0 2px 4px rgba(0,0,0,0.8); margin: 0; /* Reseteo de margen */ } .calibration-overlay i { font-size: 1.5rem; /* Ícono un poco más sutil */ filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8)); } #prediction-date-display { /* Usamos 2.75rem de base + el margen dinámico */ bottom: calc(60px + 2.75rem + var(--bottom-margin-dynamic) + env(safe-area-inset-bottom) + var(--map-ad-height)); opacity: 0.85; transition: bottom 0.4s var(--ease-out-quint); } #time-travel-date-display { bottom: calc(60px + 2.75rem + var(--bottom-margin-dynamic) + env(safe-area-inset-bottom) + var(--map-ad-height)); opacity: 0.85; transition: bottom 0.4s var(--ease-out-quint); } #toggle-time-control-btn, #toggle-time-control-btn-3d { position: absolute; z-index: 450; bottom: calc(60px + var(--bottom-margin-dynamic) + env(safe-area-inset-bottom) + var(--map-ad-height)); left: 50%; transform: translateX(-50%) translateY(20px); height: auto; width: auto; padding: 0.5rem 1rem; /* --- INICIO: Estilo Liquid Glass High-Contrast (Blur suave) --- */ background: linear-gradient(165deg, rgba(20, 25, 30, 0.75) 0%, rgba(20, 25, 30, 0.4) 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); /* Borde sutil uniforme */ border: 1px solid rgba(255, 255, 255, 0.12); background-clip: padding-box; /* Sombras para volumen 3D Equilibrado */ box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), /* Luz superior suave */ inset 0 0 0 1px rgba(255, 255, 255, 0.05), /* Anillo perimetral */ 0 10px 30px rgba(0, 0, 0, 0.4); /* --- FIN: Estilo Liquid Glass High-Contrast --- */ border-radius: 9999px; color: var(--color-text-primary); display: flex; justify-content: center; align-items: center; font-size: 0.9rem; /* Transición separada para movimiento de entrada y efectos hover */ transition: opacity 0.4s var(--ease-out-quint), transform 0.4s var(--ease-out-quint), border-color 0.2s, background-color 0.2s, color 0.2s, box-shadow 0.2s; overflow: hidden; /* <-- AÑADIDO */ opacity: 0; pointer-events: none; /* Estado inicial oculto */ } #toggle-time-control-btn.visible-pill, #toggle-time-control-btn-3d.visible-pill { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } /* --- INICIO: Asegurar que el texto esté sobre el degradado --- */ #toggle-time-control-btn > span, #toggle-time-control-btn-3d > span, #toggle-time-control-btn > i, #toggle-time-control-btn-3d > i { position: relative; z-index: 1; } /* --- FIN: Asegurar que el texto esté sobre el degradado --- */ #reset-time-btn-pill, #reset-time-btn-pill-3d { position: absolute; z-index: 451; /* Justo encima de la píldora de tiempo */ bottom: calc(60px + var(--bottom-margin-dynamic) + 36px + 0.75rem + env(safe-area-inset-bottom) + var(--map-ad-height)); left: 50%; height: 2.25rem; padding: 0 1rem; border-radius: 9999px; background: rgba(22, 27, 34, 0.8); backdrop-filter: blur(8px); border: 1px solid #30363d; color: var(--color-warning); font-weight: 700; box-shadow: none; align-items: center; justify-content: center; opacity: 0; transform: translateX(-50%) translateY(10px); transition: all 0.3s var(--ease-out-quint); pointer-events: none; } #reset-time-btn-pill.visible, #reset-time-btn-pill-3d.visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } #reset-time-btn-pill:hover, #reset-time-btn-pill-3d:hover { transform: translateX(-50%) scale(1.05) !important; background-color: rgba(247, 181, 48, 0.1); } #reset-time-btn-pill.is-pressed, #reset-time-btn-pill-3d.is-pressed { transform: translateX(-50%) scale(0.97) !important; } body.map-active #reset-time-btn-pill, body.map-active #reset-time-btn-pill-3d { bottom: calc(var(--bottom-margin-dynamic) + 36px + 0.75rem + var(--map-ad-height)); } body.time-controls-active #reset-time-btn-pill, body.pass-view-active #reset-time-btn-pill { opacity: 0; transform: translateX(-50%) translateY(10px); pointer-events: none; } #live-pass-indicator { position: absolute; z-index: 450; left: 50%; transform: translateX(-50%); /* Posición base: altura de nav + margen + altura píldora + un poco de aire */ bottom: calc(60px + var(--bottom-margin-dynamic) + 38px + 8px + env(safe-area-inset-bottom) + var(--map-ad-height)); font-size: 0.75rem; font-weight: 800; color: var(--color-secondary); /* Azul */ text-transform: uppercase; letter-spacing: 0.15em; /* Brillo azul intenso */ text-shadow: 0 0 10px rgba(88, 166, 255, 0.8), 0 0 20px rgba(88, 166, 255, 0.4); opacity: 0; pointer-events: none; transition: bottom 0.4s var(--ease-out-quint), opacity 0.3s ease; } #live-pass-indicator.visible { opacity: 1; animation: pulse-live-text 2s infinite ease-in-out; } @keyframes pulse-live-text { 0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); } 50% { opacity: 0.7; transform: translateX(-50%) scale(0.95); } } body.map-active #live-pass-indicator { /* Ajuste para cuando la barra de navegación baja */ bottom: calc(var(--bottom-margin-dynamic) + 38px + 8px + var(--map-ad-height)); } #toggle-time-control-btn:hover, #toggle-time-control-btn-3d:hover { border-color: rgba(255, 255, 255, 0.3); /* Borde más brillante */ color: var(--color-text-primary); /* Mantenemos texto blanco */ transform: translateX(-50%) scale(1.03); /* Un scale más sutil */ background-color: rgba(255, 255, 255, 0.1); /* Fondo resaltado sutil */ } /* ========================================================================== NUEVOS ESTILOS PARA EL PANEL DE CONTROL DE TIEMPO ========================================================================== */ #time-control-panel, #time-control-panel-3d { position: absolute; z-index: 500; /* --- INICIO: Estilo Liquid Glass High-Contrast (Blur suave) --- */ background: linear-gradient(165deg, rgba(20, 25, 30, 0.85) 0%, rgba(20, 25, 30, 0.5) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* Borde sutil uniforme */ border: 1px solid rgba(255, 255, 255, 0.12); background-clip: padding-box; /* Sombras para volumen 3D Equilibrado */ box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), /* Luz superior suave */ inset 0 0 0 1px rgba(255, 255, 255, 0.05), /* Anillo perimetral */ 0 10px 40px rgba(0, 0, 0, 0.5); /* --- FIN: Estilo Liquid Glass High-Contrast --- */ bottom: calc(60px + var(--bottom-margin-dynamic) + env(safe-area-inset-bottom) + var(--map-ad-height)); left: 1rem; right: 1rem; max-width: 1000px; margin-left: auto; margin-right: auto; border-radius: 24px; /* Más curvo */ visibility: hidden; opacity: 0; transform: translateY(20px) scale(0.98); transition: opacity 0.4s var(--ease-out-quint), transform 0.4s var(--ease-out-quint), visibility 0s 0.4s; touch-action: none; } #time-control-panel.visible, #time-control-panel-3d.visible { visibility: visible; opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; transition-delay: 0s; } #time-control-panel.visible #reset-time-btn, #time-control-panel-3d.visible #reset-time-btn-3d { opacity: 1; transform: translateY(0); transition-delay: 0.1s; } #reset-time-btn, #reset-time-btn-3d { position: absolute; top: -2.75rem; right: 0; height: 2.25rem; padding: 0 1rem; border-radius: 9999px; background: rgba(22, 27, 34, 0.8); backdrop-filter: blur(8px); border-color: #30363d; color: var(--color-warning); font-weight: 700; box-shadow: none; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(10px); transition: all 0.3s var(--ease-out-quint); } #reset-time-btn:hover:not(:disabled) { /* Apply hover only when not disabled */ transform: scale(1.05) !important; box-shadow: none; /* Removed glow on hover */ background-color: rgba(247, 181, 48, 0.1); } #reset-time-btn.is-realtime, #reset-time-btn-3d.is-realtime { border-color: #30363d; /* Darker border for disabled state */ color: var(--color-text-secondary); /* Gray text for disabled state */ background-color: var(--color-surface); /* Darker background for disabled state */ cursor: not-allowed; box-shadow: none; pointer-events: auto; /* Allow pointer events but cursor is not-allowed */ } #reset-time-btn.is-realtime:hover, #reset-time-btn-3d.is-realtime:hover { transform: none !important; /* No transform on hover when disabled */ background-color: var(--color-surface); /* Keep background same on hover when disabled */ box-shadow: none; } #reset-time-btn .fa-solid, #reset-time-btn-3d .fa-solid { color: inherit; } #timeline-slider, #timeline-slider-3d { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: #30363d; outline: none; border-radius: 4px; transition: background 0.5s ease; } .time-display-container { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; } .time-panel-date { font-size: 0.75rem; /* 12px */ font-weight: 500; color: var(--color-text-secondary); } #timeline-slider::-webkit-slider-thumb, #timeline-slider-3d::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: var(--color-secondary); cursor: pointer; border-radius: 50%; border: 3px solid var(--color-background); /* El desenfoque sutil (15% de opacidad) */ box-shadow: 0 0 15px 2px rgba(88, 166, 255, 0.15); /* Agregamos box-shadow a la transición */ transition: transform 0.2s var(--ease-out-cubic), box-shadow 0.2s var(--ease-out-cubic); } #timeline-slider::-webkit-slider-thumb:hover, #timeline-slider-3d::-webkit-slider-thumb:hover { transform: scale(1.1); /* Aumentamos el desenfoque en hover */ box-shadow: 0 0 20px 4px rgba(88, 166, 255, 0.25); } #timeline-slider::-moz-range-thumb, #timeline-slider-3d::-moz-range-thumb { width: 20px; height: 20px; background: var(--color-secondary); cursor: pointer; border-radius: 50%; border: 3px solid var(--color-background); /* El desenfoque sutil (15% de opacidad) */ box-shadow: 0 0 15px 2px rgba(88, 166, 255, 0.15); /* Agregamos box-shadow a la transición */ transition: transform 0.2s var(--ease-out-cubic), box-shadow 0.2s var(--ease-out-cubic); } #timeline-slider::-moz-range-thumb:hover, #timeline-slider-3d::-moz-range-thumb:hover { transform: scale(1.1); /* Aumentamos el desenfoque en hover */ box-shadow: 0 0 20px 4px rgba(88, 166, 255, 0.25); } /* --- Estilos para el modo de precisión (Scrubbing) --- */ #timeline-slider.is-scrubbing::-webkit-slider-thumb, #timeline-slider-3d.is-scrubbing::-webkit-slider-thumb { background: var(--color-warning); border-color: var(--color-background); box-shadow: 0 0 15px 4px rgba(255, 187, 41, 0.5); /* Glow Naranja */ } #timeline-slider.is-scrubbing::-moz-range-thumb, #timeline-slider-3d.is-scrubbing::-moz-range-thumb { background: var(--color-warning); border-color: var(--color-background); box-shadow: 0 0 15px 4px rgba(255, 187, 41, 0.5); /* Glow Naranja */ } /* --- INICIO: Estilos para el nuevo control de tiempo segmentado --- */ .time-control-group { display: flex; align-items: center; justify-content: center; background-color: rgba(8, 8, 8, 0.8); border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); padding: 4px; width: 240px; margin: 0 auto; } .time-control-segment { flex-grow: 1; height: 38px; border: none; background-color: transparent; color: var(--color-text-primary); font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; } .time-control-segment:first-child { border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; } .time-control-segment:last-child { border-top-right-radius: 9999px; border-bottom-right-radius: 9999px; } .time-control-segment:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.1); } .time-control-segment:hover { background-color: rgba(255, 255, 255, 0.1); color: var(--color-text-primary); } .time-control-segment.is-pressed { background-color: var(--color-primary); color: white !important; transform: scale(0.98); transition: transform 0.1s ease; box-shadow: 0 0 10px rgba(48, 129, 247, 0.5); } /* --- FIN: Estilos para el nuevo control de tiempo segmentado --- */ /* Ajustes para los botones de fecha y hora */ label[for="date-input"], label[for="time-input"] { flex-grow: 1; min-width: 0; } #date-input-display, #time-input-display { text-align: center; width: 100%; } /* -------------------------------------------------------------------------- */ /* Estilo original de pulso, pero ahora excluye la píldora principal del mapa */ :not(#toggle-time-control-btn):not(#toggle-time-control-btn-3d).time-traveling-active { color: var(--color-warning) !important; animation: pulse-warning 2s infinite; } /* --- INICIO: Nuevo Estilo para Píldora de Tiempo Simulado (Degradado Amarillo) --- */ #toggle-time-control-btn.time-traveling-active, #toggle-time-control-btn-3d.time-traveling-active { color: var(--color-warning) !important; /* 1. Texto amarillo */ text-shadow: 0 0 8px rgba(255, 187, 41, 0.5); /* Sombra de texto para legibilidad */ animation: none; /* Quitamos la animación de pulso */ /* 2. Borde amarillo (similar al azul de "live") */ border-color: rgba(255, 187, 41, 0.4) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 187, 41, 0.2); } /* 3. El pseudo-elemento con el degradado en movimiento (AMARILLO) */ #toggle-time-control-btn.time-traveling-active::before, #toggle-time-control-btn-3d.time-traveling-active::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; /* Degradados radiales AMARILLOS (usando 255, 187, 41 que es --color-warning) */ background: radial-gradient( circle at 25% -50%, rgba(255, 187, 41, 0.45), rgba(255, 187, 41, 0.1), transparent 50% ), radial-gradient( circle at 75% -50%, rgba(255, 187, 41, 0.45), rgba(255, 187, 41, 0.1), transparent 50% ); background-size: 250% 100%; background-repeat: repeat-x; opacity: 0.8; /* Usamos la misma animación pan-flashes que ya está definida en el CSS */ animation: pan-flashes 15s linear infinite; z-index: 0; /* Detrás del contenido */ border-radius: 9999px; /* Coincide con la píldora */ /* Desenfoque para suavizar */ filter: blur(10px); } /* --- FIN: Estilo para Píldora de Tiempo Simulado --- */ @keyframes pulse-warning { 0%, 100% { opacity: 1; text-shadow: 0 0 5px var(--color-warning); } 50% { opacity: 0.7; text-shadow: none; } } /* --- INICIO: Estilo para Píldora de Tiempo Real en Vista de Paso (Degradado) --- */ body.pass-view-active #toggle-time-control-btn:not(.time-traveling-active) { color: var(--color-text-primary) !important; /* 1. Texto blanco */ text-shadow: none; animation: none; /* 2. Borde azul (similar al botón de radar) */ border-color: rgba(48, 129, 247, 0.4) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 15px rgba(48, 129, 247, 0.2); } /* 3. El pseudo-elemento con el degradado en movimiento */ body.pass-view-active #toggle-time-control-btn:not(.time-traveling-active)::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; /* Usamos los mismos degradados radiales que #open-map-btn */ background: radial-gradient( circle at 25% -50%, rgba(48, 129, 247, 0.45), rgba(48, 129, 247, 0.1), transparent 50% ), radial-gradient( circle at 75% -50%, rgba(48, 129, 247, 0.45), rgba(48, 129, 247, 0.1), transparent 50% ); background-size: 250% 100%; background-repeat: repeat-x; opacity: 0.8; /* Usamos la misma animación (pan-flashes está definida al inicio de style.css) */ animation: pan-flashes 15s linear infinite; z-index: 0; /* Detrás del contenido (texto e ícono) */ border-radius: 9999px; /* Coincide con la píldora */ /* Desenfoque para suavizar */ filter: blur(10px); } /* --- FIN: Estilo para Píldora de Tiempo Real --- */ #map-style-switcher { position: absolute; z-index: 449; bottom: calc(60px + var(--bottom-margin-dynamic) + env(safe-area-inset-bottom) + var(--map-ad-height)); left: 1rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; pointer-events: none; transition: bottom 0.4s var(--ease-out-quint), opacity 0.4s var(--ease-out-quint), transform 0.4s var(--ease-out-quint); } #map-style-options { /* --- INICIO: Estilo Liquid Glass Mejorado --- */ background: linear-gradient(165deg, rgba(20, 25, 30, 0.95) 0%, rgba(20, 25, 30, 0.8) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); /* Borde sutil uniforme */ border: 1px solid rgba(255, 255, 255, 0.12); background-clip: padding-box; /* Sombras para volumen 3D */ box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.25), /* Luz superior suavizada */ 0 0 40px -5px rgba(0, 0, 0, 0.6); /* --- FIN: Estilo Liquid Glass Mejorado --- */ border-radius: 16px; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; opacity: 0; transform: translateY(10px) scale(0.95); transition: opacity 0.3s var(--ease-out-quint), transform 0.3s var(--ease-out-quint); pointer-events: none; width: 170px; /* Cambiado a un ancho fijo para que sea más compacto y consistente */ } #map-style-switcher.is-open #map-style-options { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } /* --- INICIO: Rediseño del control de estilos --- */ .style-button-group { display: flex; background-color: var(--color-background); border-radius: 6px; border: 1px solid #30363d; padding: 2px; } .map-style-btn { flex-grow: 1; text-align: center; padding: 0.4rem 0.5rem; border-radius: 5px; font-weight: 500; color: var(--color-text-primary); transition: background-color 0.2s ease, color 0.2s ease; border: none; background: none; font-size: 0.875rem; } .map-style-btn:hover:not(.active) { background-color: rgba(255, 255, 255, 0.1); } .map-style-btn.active { background-color: var(--color-primary); color: white; box-shadow: 0 1px 4px rgba(48, 129, 247, 0.25); } hr.style-divider { border: none; height: 1px; background-color: #30363d; margin: 0; } .map-style-toggle-option { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0.5rem; font-weight: 500; font-size: 0.875rem; color: var(--color-text-primary); } /* --- FIN: Rediseño del control de estilos --- */ #developer-option .style-button-group { margin-top: 0.5rem; } .toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.2); transition: .3s var(--ease-out-cubic); border-radius: 22px; } .toggle-slider:before { position: absolute; content: ""; height: 16px; /* Un poco más grande */ width: 16px; left: 2px; bottom: 2px; background-color: var(--color-text-secondary); transition: .3s var(--ease-out-cubic); border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } .toggle-switch input:checked + .toggle-slider { background-color: var(--color-primary); border-color: var(--color-primary); box-shadow: 0 0 10px rgba(48, 129, 247, 0.4); /* Glow al encender */ } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(18px); background-color: white; box-shadow: 0 1px 4px rgba(0,0,0,0.2); } /* --- FIN: Estilos para el toggle de Día/Noche --- */ #action-controls { position: absolute; z-index: 500; bottom: calc(60px + var(--bottom-margin-dynamic) + env(safe-area-inset-bottom) + var(--map-ad-height)); right: 1rem; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 0.5rem; transition: bottom 0.4s var(--ease-out-quint), opacity 0.4s var(--ease-out-quint), transform 0.4s var(--ease-out-quint); } #map-style-toggle-btn, #add-pass-event-btn, #toggle-aircraft-btn, #open-ar-btn, #open-compass-menu-btn, #toggle-visibility-bands-btn, #time-control-panel label[for="date-input"], #time-control-panel-3d label[for="date-input-3d"], #close-time-control-btn, #close-time-control-btn-3d { pointer-events: auto; /* Restaura clics para botones dentro de contenedores 'pointer-events: none' */ /* --- INICIO: Estilo Liquid Glass Mejorado --- */ background: linear-gradient(145deg, rgba(20, 25, 30, 0.85) 0%, rgba(20, 25, 30, 0.5) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* Borde sutil uniforme */ border: 1px solid rgba(255, 255, 255, 0.12); /* Corrección de bordes entrecortados */ background-clip: padding-box; /* Sombras para volumen 3D (Sombra centrada) */ box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.25), /* Luz superior suavizada */ 0 0 30px -5px rgba(0, 0, 0, 0.5); /* --- FIN: Estilo Liquid Glass Mejorado --- */ border-radius: 50%; /* Redondo */ color: var(--color-text-primary); transition: all 0.2s var(--ease-out-cubic); } #map-style-toggle-btn:hover, #add-pass-event-btn:hover, #toggle-aircraft-btn:hover, #open-ar-btn:hover, #open-compass-menu-btn:hover, #toggle-visibility-bands-btn:hover, #time-control-panel label[for="date-input"]:hover, #time-control-panel-3d label[for="date-input-3d"]:hover, #close-time-control-btn:hover, #close-time-control-btn-3d:hover { border-color: rgba(255, 255, 255, 0.3); /* Borde más brillante */ color: var(--color-text-primary); /* Mantenemos texto blanco */ background-color: rgba(255, 255, 255, 0.1); /* Fondo resaltado sutil */ transform: scale(1.05); } #toggle-aircraft-btn { display: none; /* Oculto por defecto */ } body.nearby-mode-active #toggle-aircraft-btn { display: flex; /* Visible solo en modo "Cerca" */ } #toggle-aircraft-btn.toggled-off { color: var(--color-text-secondary); border-color: #30363d; background-color: var(--color-surface); } #toggle-aircraft-btn.toggled-off:hover { color: var(--color-text-secondary); border-color: #30363d; } /* -- NUEVO: Anclaje dinámico del cartel de visibilidad para respetar el anuncio -- */ #visibility-controls { position: absolute; z-index: 450; /* 60px (nav) + 4.25rem (offset fecha) + margen dinámico + safe-area + anuncio */ bottom: calc(60px + 4.25rem + var(--bottom-margin-dynamic) + env(safe-area-inset-bottom) + var(--map-ad-height)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; /* Transición suave igual que los otros controles */ transition: bottom 0.4s var(--ease-out-quint); pointer-events: none; /* Evitar bloquear el mapa */ } #visibility-controls > * { pointer-events: auto; /* Reactivar clicks en la leyenda */ } #visibility-legend .fa-circle { font-size: 0.6em; vertical-align: middle; margin-right: 0.5rem; } #toggle-visibility-bands-btn.active { background-color: var(--color-accent); border-color: var(--color-secondary); color: white; } .visibility-band { transition: fill-opacity 0.4s var(--ease-out-quint); } /* Eliminamos el fondo de estrellas y los estilos de botones/texto viejos */ #start-screen::before { display: none; } .start-content-wrapper { width: 100%; /* CLAMP: Achicamos el ancho máximo en pantallas angostas */ max-width: clamp(20rem, 85vw, 30rem); display: flex; flex-direction: column; align-items: center; padding-left: 1rem; padding-right: 1rem; } .start-actions-grid { width: 100%; display: flex; flex-direction: column; /* PUNTO MEDIO: 1.9vh y 7.5vh */ gap: clamp(0.5rem, 1.9vh, 0.75rem); margin-top: clamp(1rem, 7.5vh, 2rem); } .start-action-card { display: flex; align-items: center; text-decoration: none; /* PUNTO MEDIO: 4.75vw y 4.5vw */ gap: clamp(0.5rem, 4.75vw, 1.25rem); width: 100%; padding: clamp(0.75rem, 4.5vw, 1rem); /* Estilo Liquid Glass Mejorado (Restaurado) */ background-color: rgba(255, 255, 255, 0.03); /* Transparencia original */ backdrop-filter: blur(12px); /* Blur original de alta calidad */ -webkit-backdrop-filter: blur(12px); /* Borde sutil uniforme */ border: 1px solid rgba(255, 255, 255, 0.12); background-clip: padding-box; /* Sombras para volumen 3D Equilibrado (Restaurado) */ box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 4px 24px -1px rgba(0, 0, 0, 0.2); border-radius: 24px; transition: all 0.25s var(--ease-out-quint); cursor: pointer; position: relative; overflow: hidden; /* Mantenemos una optimización ligera pero sin afectar visuales */ will-change: transform; } .start-action-card:hover { border-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); box-shadow: 0 10px 35px rgba(0, 0, 0, 0.35); } .start-action-icon { flex-shrink: 0; /* PUNTO MEDIO: 12vw */ width: clamp(2.5rem, 12vw, 3rem); height: clamp(2.5rem, 12vw, 3rem); border-radius: 12px; display: flex; align-items: center; justify-content: center; /* PUNTO MEDIO: 6.5vw */ font-size: clamp(1.2rem, 6.5vw, 1.5rem); background-color: var(--color-surface); color: var(--color-secondary); border: 1px solid #30363d; position: relative; /* <-- Añadido */ z-index: 1; /* <-- Añadido */ } .start-action-icon.primary { color: var(--color-primary); background-color: var(--color-accent); border-color: var(--color-primary); box-shadow: 0 0 15px rgba(48, 129, 247, 0.2); } .start-action-text { flex-grow: 1; text-align: left; position: relative; /* <-- Añadido */ z-index: 1; /* <-- Añadido */ } .start-action-title { font-weight: 700; /* PUNTO MEDIO: 4.75vw */ font-size: clamp(0.95rem, 4.75vw, 1.125rem); color: var(--color-text-primary); } .start-action-desc { font-size: 0.875rem; /* 14px */ color: var(--color-text-secondary); } .start-action-chevron { flex-shrink: 0; color: var(--color-text-secondary); font-size: 0.875rem; /* 14px */ opacity: 0.5; transition: all 0.25s var(--ease-out-quint); position: relative; /* <-- Añadido */ z-index: 1; /* <-- Añadido */ } .start-action-card:hover .start-action-chevron { opacity: 1; color: var(--color-secondary); transform: translateX(2px); } /* --- INICIO: Animación de desenfoque para el botón de Mapa --- */ @keyframes pan-flashes { 0% { background-position: 0% -50%; } 100% { background-position: -250% -50%; } } #open-map-btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; /* Degradados mejorados con pasos intermedios para evitar el banding */ background: /* Flash 1 */ radial-gradient( circle at 25% -50%, rgba(48, 129, 247, 0.5) 0%, rgba(48, 129, 247, 0.2) 25%, rgba(48, 129, 247, 0.05) 45%, transparent 60% ), /* Flash 2 */ radial-gradient( circle at 75% -50%, rgba(48, 129, 247, 0.5) 0%, rgba(48, 129, 247, 0.2) 25%, rgba(48, 129, 247, 0.05) 45%, transparent 60% ); background-size: 250% 100%; /* Fondo 2.5x más ancho para el patrón (antes 200%) */ background-repeat: repeat-x; /* Repetir para bucle infinito */ opacity: 0.8; /* Opacidad base constante (más visible) */ /* Animación: 6s (antes 4s), en bucle, lineal */ animation: pan-flashes 15s linear infinite; z-index: 0; /* Detrás del contenido */ border-radius: 24px; /* Para que coincida con el borde del botón */ /* Aumentamos el blur para mezclar mejor los colores */ filter: blur(12px); /* Forzar renderizado en GPU para evitar pixelado en la animación */ will-change: transform; transform: translateZ(0); } /* --- FIN: Animación de desenfoque --- */ /* --- INICIO: Contorno azul sutil para el botón de Mapa --- */ #open-map-btn { border-color: rgba(48, 129, 247, 0.4); /* var(--color-primary) con opacidad */ /* Sombra con luz interna celeste y glow externo */ box-shadow: inset 0 1px 0 0 rgba(150, 210, 255, 0.4), /* Luz superior celeste */ inset 0 0 0 1px rgba(150, 210, 255, 0.1), /* Anillo perimetral celeste */ 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 15px rgba(48, 129, 247, 0.2); } #open-map-btn:hover { border-color: rgba(48, 129, 247, 0.7); /* Más brillante en hover */ /* Intensificar rim light y glow */ box-shadow: inset 0 1px 0 0 rgba(150, 210, 255, 0.6), inset 0 0 0 1px rgba(150, 210, 255, 0.2), 0 10px 35px rgba(0, 0, 0, 0.35), 0 0 25px rgba(48, 129, 247, 0.3); } /* --- FIN: Contorno azul sutil --- */ /* --- INICIO: Estilos para el botón de Radar (Píldora) --- */ .start-action-pill { display: flex; align-items: center; justify-content: center; /* <-- CAMBIO: Centra el contenido */ gap: 1.25rem; /* 20px, igual que las cards */ width: 280px; /* <-- CAMBIO: Ancho fijo (intermedio) */ align-self: center; /* <-- CAMBIO: Centra la píldora */ padding: 0.6rem 1.5rem; /* 10px vertical (más bajo), 24px horizontal */ /* Estilo Liquid Glass (copiado de .start-action-card) */ background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 9999px; /* Forma de píldora */ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); transition: all 0.25s var(--ease-out-quint); cursor: pointer; } .start-action-pill:hover { border-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); box-shadow: 0 10px 35px rgba(0, 0, 0, 0.35); } /* Estilo para el ícono dentro de la píldora (más chico) */ .start-action-pill i { font-size: 1.25rem; /* 20px */ color: var(--color-secondary); /* Contenedor más chico para el ícono */ width: 2.25rem; /* 36px */ height: 2.25rem; /* 36px */ border-radius: 12px; display: flex; align-items: center; justify-content: center; /* Transparente, sin borde */ background-color: transparent; border: none; } /* Estilo para el título dentro de la píldora (ya tiene .start-action-title) */ .start-action-pill .start-action-title { font-weight: 700; font-size: 1.125rem; /* 18px (el mismo que los otros botones) */ color: var(--color-text-primary); text-align: left; /* Aseguramos alineación izquierda */ } /* Ajuste para el estado presionado */ .start-action-pill.is-pressed { transform: scale(0.98); transition: transform 0.1s ease; } /* --- FIN: Estilos para el botón de Radar --- */ /* --- INICIO: Estilos para el botón de Radar (Píldora) --- */ .start-action-pill { display: flex; align-items: center; justify-content: center; /* <-- CAMBIO: Centra el contenido */ gap: 1rem; /* 16px (Era 1.25rem) */ width: 280px; /* <-- CAMBIO: Ancho fijo (intermedio) */ align-self: center; /* <-- CAMBIO: Centra la píldora */ padding: 0.6rem 1.25rem; /* 10px vertical, 20px horizontal (Era 1.5rem) */ /* Estilo Liquid Glass (copiado de .start-action-card) */ background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 9999px; /* Forma de píldora */ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); transition: all 0.25s var(--ease-out-quint); cursor: pointer; } .start-action-pill:hover { border-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); box-shadow: 0 10px 35px rgba(0, 0, 0, 0.35); } /* Estilo para el ícono dentro de la píldora (más chico) */ .start-action-pill i { font-size: 1.25rem; /* 20px */ color: var(--color-secondary); /* Contenedor más chico para el ícono */ width: 2.25rem; /* 36px */ height: 2.25rem; /* 36px */ border-radius: 12px; display: flex; align-items: center; justify-content: center; /* Transparente, sin borde */ background-color: transparent; border: none; } /* Estilo para el título dentro de la píldora (ya tiene .start-action-title) */ .start-action-pill .start-action-title { font-weight: 700; font-size: 1.125rem; /* 18px (el mismo que los otros botones) */ color: var(--color-text-primary); text-align: left; /* Aseguramos alineación izquierda */ } /* Ajuste para el estado presionado */ .start-action-pill.is-pressed { transform: scale(0.98); transition: transform 0.1s ease; } /* --- FIN: Estilos para el botón de Radar --- */ /* Coloca el contenido de la pantalla de inicio por encima de las estrellas */ #start-screen > * { position: relative; z-index: 1; } /* Baja ligeramente el bloque central del logo y los botones en la pantalla de inicio */ #start-screen .text-center { margin-top: 2.5rem; } /* --- INICIO: Límite de 2 líneas para ubicación en inicio --- */ #open-map-from-start-location-btn { display: inline-flex; align-items: center; max-width: 100%; /* Asegura que no desborde el ancho del padre */ vertical-align: middle; text-align: left; /* Para que si son 2 líneas, se alineen bien junto al ícono */ } #current-location-name-start { display: -webkit-box; -webkit-line-clamp: 2; /* Máximo 2 líneas */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; /* Puntos suspensivos */ white-space: normal; /* Permite que el texto baje de línea */ line-height: 1.2; /* Interlineado ajustado */ word-break: break-word; /* Corta palabras largas si es necesario */ } /* --- FIN: Límite de 2 líneas --- */ #menu-screen #open-social-btn { bottom: calc(80px + 1rem + env(safe-area-inset-bottom)); } /* Ajusta la posición del botón de redes sociales en la pantalla de menú para escritorio */ @media (min-width: 1024px) { #menu-screen #open-social-btn { bottom: 1.5rem; /* 24px, lo alinea correctamente en la parte inferior */ } } /* ========================================================================== ADAPTACIÓN PARA LA BARRA DE NAVEGACIÓN INFERIOR ========================================================================== */ body.map-active #bottom-nav-bar { transform: translateY(100%); } body.map-active #open-social-btn { bottom: 1.5rem; } body.map-active .info-screen .overflow-y-auto, body.map-active #known-satellites-screen .overflow-y-auto, body.map-active #best-passes-screen .overflow-y-auto, body.map-active #my-satellites-screen .overflow-y-auto, body.map-active #latest-starlinks-screen .overflow-y-auto, body.map-active #brightest-satellites-screen .overflow-y-auto { padding-bottom: 1rem; } body.map-active #toggle-time-control-btn, body.map-active #toggle-time-control-btn-3d, #ar-container ~ #toggle-time-control-btn { bottom: calc(var(--bottom-margin-dynamic) + var(--map-ad-height)); } body.map-active #time-control-panel, body.map-active #time-control-panel-3d, #ar-container ~ #time-control-panel { bottom: calc(var(--bottom-margin-dynamic) + var(--map-ad-height)); } body.map-active #prediction-date-display, #ar-container ~ #prediction-date-display, body.map-active #time-travel-date-display, #ar-container ~ #time-travel-date-display { bottom: calc(2.75rem + var(--bottom-margin-dynamic) + var(--map-ad-height)); } body.map-active #map-style-switcher { bottom: calc(var(--bottom-margin-dynamic) + var(--map-ad-height)); } body.map-active #action-controls { bottom: calc(var(--bottom-margin-dynamic) + var(--map-ad-height)); } body.map-active #visibility-controls { bottom: calc(4.25rem + var(--bottom-margin-dynamic) + var(--map-ad-height)); } /* ========================================================================== PANTALLAS DE INFO, SATÉLITES Y PASOS ========================================================================== */ .pass-date-header { /* CLAMP: Se achica sutilmente */ font-size: clamp(0.8rem, 3.5vw, 0.9rem); font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; padding: 1rem 0.25rem 0.25rem; } /* ========================================================================== NUEVO DISEÑO - PANTALLA DE SATÉLITES ========================================================================== */ .passes-header, .satellites-header { /* CLAMP: Padding general del header */ padding: clamp(1rem, 4vw, 1.25rem) 1rem 1rem; /* CAMBIO: Usamos var(--safe-top) que es 0 en web */ padding-top: calc(clamp(1rem, 4vw, 1.25rem) + var(--safe-top)); } @media (min-width: 640px) { /* Aumentado a 1.75rem en pantallas sm y mayores */ .passes-header, .satellites-header { padding: 1.75rem; padding-top: 1.75rem; /* Asegura que el sm: override gane */ } } /* --- INICIO: Ajustes para achicar el header de 'Mejores Pasos' en móvil --- */ /* Se achica el título y los botones solo en la vista móvil */ .passes-header h2 { /* CLAMP: Título se achica hasta 1.15rem (igual a V1) */ font-size: clamp(1rem, 5vw, 1.15rem); } .passes-header button { /* CLAMP: Botones de volver se ajustan */ height: clamp(2rem, 9vw, 2.25rem); width: clamp(2rem, 9vw, 2.25rem); } /* Restaurar en sm+ */ @media (min-width: 640px) { .passes-header h2 { font-size: 1.25rem; /* Restaura text-xl */ } .passes-header button { height: 2.5rem; /* Restaura h-10 */ width: 2.5rem; /* Restaura w-10 */ } } /* --- FIN: Ajustes para achicar el header de 'Mejores Pasos' --- */ /* --- INICIO: Ajustes para achicar el header de 'Mejores Pasos' en móvil --- */ /* Estas reglas ahora se eliminan para usar el tamaño estándar */ /* Restaurar en sm+ */ @media (min-width: 640px) { .passes-header h2 { /* Ya no se necesita regla específica */ } .passes-header button { /* Ya no se necesita regla específica */ } } /* --- FIN: Ajustes para achicar el header de 'Mejores Pasos' --- */ .satellite-nav { display: flex; gap: 0.75rem; margin-top: 2.5rem; } .satellite-nav-btn { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.6rem 1rem; border-radius: 8px; font-weight: 500; font-size: 0.9rem; background-color: var(--color-surface); color: var(--color-text-primary); border: 1px solid #30363d; transition: all 0.2s var(--ease-out-cubic); cursor: pointer; box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1); } .satellite-nav-btn:hover { border-color: var(--color-secondary); background-color: rgba(88, 166, 255, 0.1); color: var(--color-secondary); transform: translateY(-2px); } .satellite-nav-btn i { font-size: 1rem; } .list-title { /* CLAMP: Títulos más pequeños en pantallas chicas */ font-size: clamp(0.8rem, 4vw, 0.9rem); font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; padding: 0 0.5rem 0.5rem; margin-bottom: 0.5rem; } .launch-section-header { font-size: 0.9rem; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; padding: 0 0.25rem 0.75rem; margin-top: 1.5rem; border-bottom: 1px solid #30363d; } .satellite-entry { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-radius: 8px; border: 1px solid transparent; transition: all 0.25s var(--ease-out-cubic); background-color: var(--color-surface); position: relative; overflow: hidden; } .satellite-entry:hover { border-color: #30363d; transform: translateY(-2px); box-shadow: 0 5px 20px rgba(0,0,0,0.25); } .satellite-entry-clickable { flex-grow: 1; cursor: pointer; /* CLAMP: Padding vertical y horizontal se ajustan en pantallas angostas */ padding: clamp(0.6rem, 3vw, 0.85rem) clamp(0.8rem, 5vw, 1.25rem); min-width: 0; } .satellite-entry-info { min-width: 0; } .satellite-entry-name { font-weight: 500; /* LIMPIEZA: Volvemos a rem fijo (1rem, igual a V1). La elasticidad la da el HTML ahora. */ font-size: 1rem !important; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .satellite-entry-desc { /* LIMPIEZA: Valor fijo (0.8rem, igual a V1), se escala solo */ font-size: 0.8rem !important; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .satellite-entry-actions { display: flex; align-items: center; /* CLAMP: Gap y padding derecho dinámicos */ gap: clamp(0.85rem, 3.5vw, 1.25rem); /* Aumentado para separar mejor los botones */ padding-right: clamp(0.8rem, 5vw, 1.25rem); flex-shrink: 0; } .satellite-entry-actions .sat-status-indicator { width: 20px; text-align: center; color: var(--color-text-secondary); } .satellite-entry-actions .favorite-btn, .satellite-entry-actions .reload-sat-btn, .satellite-entry-actions .delete-sat-btn { padding: 0.5rem; margin: -0.5rem; height: auto; width: auto; /* CLAMP: Iconos se achican ligeramente */ font-size: clamp(0.95rem, 5vw, 1.1rem); display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; } /* --- INICIO: Rediseño "Liquid Glass" para Pantalla de Satélites --- */ .glass-screen-bg .satellite-entry { /* Fondo más transparente para que se vea menos pesado */ background: linear-gradient(145deg, rgba(20, 25, 30, 0.658) 0%, rgba(20, 25, 30, 0.3) 100%); /* OPTIMIZACIÓN DE RENDIMIENTO: Sin desenfoque */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; /* Borde sutil uniforme (sin corte en la curva) */ border: 1px solid rgba(255, 255, 255, 0.12); /* Corrección de bordes entrecortados */ background-clip: padding-box; /* Sombras para volumen 3D - Equilibradas */ box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), /* Luz superior reducida un poquito */ inset 0 0 0 1px rgba(255, 255, 255, 0.05), /* NUEVO: Anillo suave en todos los lados para igualar */ inset 0 0 20px rgba(255, 255, 255, 0.03), 0 0 30px -5px rgba(0, 0, 0, 0.5); /* Sombra centrada y suave */ border-radius: 24px; /* Radio aumentado para coincidir con Best Passes */ transition: all 0.25s var(--ease-out-cubic); /* LIMPIEZA: Padding fijo en rem (1rem, igual a V1). Se achica automáticamente con el HTML. */ padding: 1rem; } .glass-screen-bg .satellite-entry:hover { border-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); box-shadow: 0 10px 35px rgba(0, 0, 0, 0.35); } .glass-screen-bg .satellite-entry-clickable { padding: 0.25rem 0.25rem 0.25rem 0.5rem; /* Ajuste de padding interno */ } .glass-screen-bg .satellite-entry-actions { padding-right: 0.5rem; /* Ajuste de padding interno */ } .glass-screen-bg .satellite-entry-name { font-size: 1rem; font-weight: 500; } .glass-screen-bg .satellite-entry-desc { font-size: 0.85rem; } .glass-screen-bg .satellite-entry .favorite-btn { color: var(--color-text-secondary); } .glass-screen-bg .satellite-entry .favorite-btn.is-favorite { color: var(--color-danger); } /* Tarjeta especial de Starlink en la lista */ .starlink-special-entry { /* Borde azul sutil */ border-color: rgba(88, 166, 255, 0.3) !important; /* Fondo degradado "Cósmico" azulado */ background: radial-gradient(circle at 0% 0%, rgba(88, 166, 255, 0.15) 0%, rgba(20, 25, 30, 0.4) 100%) !important; cursor: pointer; position: relative; overflow: hidden; } /* Línea de luz superior para efecto cristal */ .starlink-special-entry::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(88, 166, 255, 0.6), transparent); opacity: 0.6; } .starlink-special-entry:hover { border-color: var(--color-starlink-icon) !important; /* Glow azul al pasar el mouse */ box-shadow: 0 0 30px rgba(88, 166, 255, 0.2), inset 0 0 20px rgba(88, 166, 255, 0.05) !important; transform: translateY(-2px); } /* === AJUSTES FLUIDOS PARA LA TARJETA STARLINK ESPECIAL === */ .starlink-special-entry .w-10 { /* Originalmente w-10 es 2.5rem (40px) */ width: clamp(2rem, 9vw, 2.5rem) !important; height: clamp(2rem, 9vw, 2.5rem) !important; } .starlink-special-entry .text-2xl { /* Originalmente text-2xl es 1.5rem (24px) */ font-size: clamp(1.2rem, 6vw, 1.5rem) !important; } .starlink-special-entry .mr-4 { margin-right: clamp(0.75rem, 3.5vw, 1rem) !important; } /* Descripción en gris claro */ .starlink-special-entry .satellite-entry-desc { color: rgba(255, 255, 255, 0.7) !important; } /* Icono con brillo */ .starlink-special-entry i { filter: drop-shadow(0 0 8px rgba(88, 166, 255, 0.6)); transition: transform 0.3s ease; } .starlink-special-entry:hover i.fa-satellite-dish { transform: rotate(-10deg) scale(1.1); } /* --- Títulos de sección (sin línea divisora) --- */ .glass-screen-bg .list-header { margin-bottom: 0; /* Espacio ahora controlado por el 'mt-3' de la lista */ } .glass-screen-bg .list-title { padding-bottom: 0; /* Eliminado padding para centrado vertical */ margin-bottom: 0; } .glass-screen-bg .list-header .search-toggle-btn { color: var(--color-text-primary); } /* Estilo "Glass" para la barra de búsqueda expandible */ .glass-screen-bg .list-header .search-input-known { background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); } .glass-screen-bg .list-header .search-input-known:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(48, 129, 247, 0.3); } /* Botón de Starlink especial (efecto glass) */ .btn-starlink-special-glass { position: relative; overflow: hidden; color: #FFEB3B !important; border: 1px solid rgba(247, 181, 48, 0.3) !important; /* Fondo radial subido al 30% verticalmente */ background: radial-gradient(circle at 50% 30%, rgba(247, 181, 48, 0.15) 0%, rgba(20, 25, 30, 0.4) 100%) !important; background-clip: padding-box; /* Corrección de bordes */ box-shadow: 0 0 35px rgba(247, 181, 48, 0.15), /* Glow dorado centrado y sutil */ inset 0 1px 0 0 rgba(247, 181, 48, 0.6), /* Luz interna dorada suavizada */ inset 0 0 20px rgba(247, 181, 48, 0.05) !important; } /* Eliminamos el ::before complejo anterior ya que el estilo está integrado en el elemento principal */ .btn-starlink-special-glass::before { display: none; } .btn-starlink-special-glass:hover { box-shadow: 0 0 40px rgba(247, 181, 48, 0.25), inset 0 1px 0 0 rgba(247, 181, 48, 0.5), inset 0 0 20px rgba(247, 181, 48, 0.1) !important; } /* --- FIN: Rediseño "Liquid Glass" --- */ .reload-sat-btn { color: var(--color-warning); transition: color 0.2s ease, transform 0.2s ease; } .reload-sat-btn:hover { transform: scale(1.1) rotate(45deg); } .view-orbit-btn { color: var(--color-text-secondary); transition: color 0.2s ease, transform 0.2s ease; padding: 0.5rem; margin: -0.5rem; /* Para compensar padding y mantener alineación */ cursor: pointer; background: none; border: none; } .view-orbit-btn:hover { color: var(--color-primary); transform: scale(1.15); } .delete-sat-btn { transition: color 0.2s ease, transform 0.2s ease; } .delete-sat-btn:hover { transform: scale(1.15); } /* Ocultar spinner cuando se carga el TLE o hay error */ .satellite-entry:not(.is-loading) .sat-status-indicator { display: none; } /* Ocultar botón de favorito durante la carga o si hay error */ .satellite-entry.is-loading .favorite-btn, .satellite-entry.is-error .favorite-btn { display: none; } /* Ocultar botón de recarga si no hay error */ .satellite-entry:not(.is-error) .reload-sat-btn { display: none; } .satellite-entry.is-error .satellite-entry-clickable { cursor: not-allowed; opacity: 0.6; } .btn-pill-link { font-weight: 500; color: var(--color-secondary); transition: all 0.2s ease; cursor: pointer; background: none; border: 1px solid #30363d; border-radius: 9999px; padding: 0.5rem 1.25rem; font-size: 0.9rem; } .btn-pill-link:hover { color: var(--color-secondary); border-color: var(--color-secondary); background-color: rgba(88, 166, 255, 0.1); } .btn-pill-link-small { font-weight: 500; color: var(--color-secondary); transition: all 0.2s ease; cursor: pointer; /* Estilo Liquid Glass Base Mejorado */ background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%); border: 1px solid rgba(255, 255, 255, 0.12); background-clip: padding-box; /* Rim Light sutil */ box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.05); border-radius: 9999px; padding: 0.25rem 0.75rem; /* Corresponds to py-1 px-3 */ font-size: 0.75rem; /* Corresponds to text-xs */ } .btn-pill-link-small:hover { color: var(--color-secondary); border-color: var(--color-secondary); background-color: rgba(88, 166, 255, 0.1); } /* Override específico para el botón de cambiar ubicación */ #change-location-from-start-btn { color: var(--color-text-secondary); } #change-location-from-start-btn:hover { color: var(--color-text-primary); border-color: var(--color-text-primary); background-color: rgba(255, 255, 255, 0.1); } .btn-pill-install { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; font-weight: 700; color: var(--color-secondary); transition: all 0.2s ease; cursor: pointer; background-color: var(--color-accent); background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 50%); border: 1px solid var(--color-primary); border-radius: 9999px; padding: 0.6rem 1.25rem; font-size: 0.9rem; box-shadow: none; /* Eliminamos el brillo exterior */ } .btn-pill-install:hover { color: white; border-color: var(--color-secondary); background-color: var(--color-primary); background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 60%); transform: none; /* Eliminamos el movimiento */ box-shadow: none; /* Nos aseguramos que no haya brillo en hover */ } .passes-header, .satellites-header { /* CLAMP: Padding general del header */ padding: clamp(1rem, 4vw, 1.25rem) 1rem 1rem; /* CAMBIO: Usamos var(--safe-top) que es 0 en web */ padding-top: calc(clamp(1rem, 4vw, 1.25rem) + var(--safe-top)); } @media (min-width: 640px) { /* Aumentado a 1.75rem en pantallas sm y mayores */ .passes-header, .satellites-header { padding: 1.75rem; padding-top: 1.75rem; /* Asegura que el sm: override gane */ } } /* === INICIO: Header deslizable (Mejores Pasos) === */ .sliding-header { position: absolute; top: 0; left: 0; right: 0; z-index: 10; /* Re-aplica el efecto de vidrio que perderá al ser 'absolute' */ background: rgba(0, 0, 0, 0.75); /* Igual al bottom-nav-bar */ backdrop-filter: blur(5px); /* Igual al bottom-nav-bar */ -webkit-backdrop-filter: blur(5px); border-bottom: none; /* Línea divisora eliminada */ /* Transición para el 'snap' (cuando se suelta) */ transition: transform 0.3s var(--ease-out-quint); will-change: transform; } .sliding-scroller { /* El padding-top se aplica con JS. */ scroll-padding-top: 1rem; overflow-x: hidden; width: 100%; /* OPTIMIZACIÓN: Mejora drástica del scroll en móviles */ -webkit-overflow-scrolling: touch; will-change: scroll-position; /* Aislamos el repintado al hacer scroll */ contain: content; } /* === FIN: Header deslizable === */ .search-pill { position: relative; display: flex; align-items: center; } .search-pill-icon { position: absolute; /* Reducido de 0.85rem a 0.75rem */ left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--color-text-secondary); pointer-events: none; } /* Restaurar en sm+ */ @media (min-width: 640px) { .search-pill-icon { left: 0.85rem; } } .search-pill-input { background-color: rgba(8, 8, 8, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--color-text-primary); /* CLAMP: Padding lateral y vertical se ajustan */ padding: 0.6rem clamp(2rem, 8vw, 2.5rem) 0.6rem clamp(2rem, 8vw, 2.5rem); border-radius: 9999px; width: 100%; transition: border-color 0.2s ease, box-shadow 0.2s ease; font-size: clamp(0.8rem, 4vw, 0.9rem); font-weight: 500; } .search-pill-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(48, 129, 247, 0.3); } .search-pill-input::placeholder { color: var(--color-text-secondary); font-weight: 400; } .search-pill-input:-webkit-autofill, .search-pill-input:-webkit-autofill:hover, .search-pill-input:-webkit-autofill:focus, .search-pill-input:-webkit-autofill:active { -webkit-text-fill-color: var(--color-text-primary) !important; box-shadow: 0 0 0 30px var(--color-background) inset !important; transition: background-color 5000s ease-in-out 0s; } /* === INICIO: Estilo especial para la píldora de ubicación compartida === */ #location-share-modal .search-pill-input { border-color: var(--color-accent); box-shadow: 0 0 12px 0 rgba(48, 129, 247, 0.3); } #location-share-modal .search-pill-input:focus { box-shadow: 0 0 0 3px rgba(48, 129, 247, 0.3), 0 0 18px 0 rgba(48, 129, 247, 0.4); } .location-preview-map { width: 100%; height: 180px; border-radius: 12px; margin-top: 1rem; background-color: var(--color-surface); border: 1px solid rgba(255, 255, 255, 0.15); overflow: hidden; } /* === FIN: Estilo especial para la píldora de ubicación compartida === */ .pass-card { position: relative; display: flex; align-items: center; justify-content: space-between; /* AJUSTE FINO: Gap un poco más cerrado para acompañar (max 1rem) */ gap: clamp(0.5rem, 3.5vw, 1rem); border-radius: 24px; -webkit-tap-highlight-color: transparent; background: linear-gradient(145deg, rgba(20, 25, 30, 0.658) 0%, rgba(20, 25, 30, 0.3) 100%); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; /* OPTIMIZACIÓN: contain strict para que el navegador no recalcule layout de fuera */ contain: layout style; transform: translateZ(0); border: 1px solid rgba(255, 255, 255, 0.12); background-clip: padding-box; /* Sombra optimizada: Menos radio de difusión para mejor rendimiento */ box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 0 20px rgba(255, 255, 255, 0.03), 0 4px 15px -2px rgba(0, 0, 0, 0.5); /* Sombra externa más ajustada */ padding: 1.25rem; overflow: hidden; /* Transiciones específicas en lugar de 'all' */ transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease; } /* --- INICIO: Forzar altura de 2 líneas para el nombre del satélite --- */ .pass-card .flex-grow .font-bold { /* Tailwind 'text-base' tiene 1.5rem de line-height. 2 líneas = 3rem */ min-height: 3rem; /* Centra verticalmente el texto si es una sola línea */ display: flex; align-items: center; } /* --- Revertir la altura de 2 líneas en escritorio --- */ @media (min-width: 640px) { .pass-card .flex-grow .font-bold { min-height: auto; /* Vuelve a la altura automática */ display: block; /* Vuelve al display normal */ } } /* --- FIN: Forzar altura de 2 líneas --- */ /* Restaurar en sm+ */ @media (min-width: 640px) { .pass-card { padding: 1.25rem; gap: 1rem; border-radius: 24px; /* Actualizado para coincidir con el nuevo diseño */ } } .pass-card:hover { /* Efectos eliminados a pedido para mantener el color de fondo original */ } .pass-card-clickable { cursor: pointer; } /* Estilo "Glass" específico para las pantallas de lista */ #best-passes-screen .search-pill-input, #brightest-satellites-screen .search-pill-input { background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); } .star-rating-container { margin-top: 0.35rem; /* FIX: Tamaño fijo en rem para que escale junto con el root, sin achicarse antes */ font-size: 0.9rem; color: var(--color-warning); letter-spacing: 0.1em; display: block; /* <-- Vuelve a ser block para estar en su propia línea */ width: fit-content; /* <-- La nueva clave: el bloque se ajusta al contenido */ position: relative; /* Contenedor para el pseudo-elemento */ z-index: 1; /* Asegura que las estrellas estén sobre el resplandor */ } .star-rating-container .fa-regular { color: var(--color-text-secondary); opacity: 0.5; } .star-rating-container { position: relative; /* Contenedor para el pseudo-elemento */ z-index: 1; /* Asegura que las estrellas estén sobre el resplandor */ } .star-rating-container::after { content: ''; position: absolute; z-index: -1; /* Detrás de las estrellas */ top: 50%; /* Por defecto (1 estrella), el centro es 10% desde la izquierda */ left: 10%; width: 30px; /* Ancho base para 1 estrella */ height: 30px; /* Altura (más redonda para 1 estrella) */ background-color: var(--color-warning); /* Color de las estrellas */ border-radius: 50%; filter: blur(15px); /* Desenfoque sutil */ /* Centramos el resplandor (horizontal y vertical) en el punto 'left' */ transform: translate(-50%, -50%); opacity: 0.15; /* Sutil (REBAJADO) */ /* Agregamos 'left' a la transición */ transition: opacity 0.4s var(--ease-out-quint), width 0.4s var(--ease-out-quint), height 0.4s var(--ease-out-quint), left 0.4s var(--ease-out-quint); } .star-rating-container.stars-2::after { width: 45px; height: 28px; /* Un poco más ovalado */ left: 20%; /* Centro entre estrella 1 y 2 */ } .star-rating-container.stars-3::after { width: 60px; height: 28px; left: 30%; /* Centro en estrella 2 (de 3) */ } .star-rating-container.stars-4::after { width: 75px; height: 26px; /* Más ovalado */ left: 40%; /* Centro entre estrella 2 y 3 */ } .star-rating-container.stars-5::after { width: 90px; height: 26px; left: 50%; /* Centro en estrella 3 (de 5) */ } .filter-btn.active { background-color: var(--color-primary); color: white; border-color: var(--color-primary); } #best-passes-location-feedback { display: none; } /* Regla para pantallas de la SPA (mantiene padding estándar) */ .info-screen .overflow-y-auto, #known-satellites-screen .overflow-y-auto, #best-passes-screen .overflow-y-auto, #my-satellites-screen .overflow-y-auto, #latest-starlinks-screen .overflow-y-auto, #brightest-satellites-screen .overflow-y-auto, #events-screen .overflow-y-auto, #launches-screen .overflow-y-auto, #eclipses-screen .overflow-y-auto, #passes-screen .overflow-y-auto, #eclipse-details-screen .overflow-y-auto { padding-top: 1rem; padding-bottom: calc(60px + 1.5rem + env(safe-area-inset-bottom)); } /* Regla corregida para pantallas estáticas (Aprender, Guía, Contacto, Sobre) Aumentamos el padding-top a 5.5rem para librar la altura del header absoluto */ #learn-screen .overflow-y-auto, #guide-screen .overflow-y-auto, #contact-screen .overflow-y-auto, #about-screen .overflow-y-auto { padding-top: calc(5.5rem + var(--safe-top)); padding-bottom: calc(60px + 1.5rem + env(safe-area-inset-bottom)); } #map-style-switcher, #action-controls { transition: opacity 0.4s var(--ease-out-quint), transform 0.4s var(--ease-out-quint); will-change: opacity, transform; } body.time-controls-active #map-style-switcher, body.time-controls-active #action-controls { opacity: 0; transform: translateY(calc(100% + 1.5rem)); pointer-events: none; } /* Pasos Previos: AHORA EN GRIS (Estilo apagado) */ .previous-pass { border-color: rgba(139, 148, 158, 0.6) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(139, 148, 158, 0.2) !important; background-image: radial-gradient(at top left, rgba(139, 148, 158, 0.2), transparent 70%); background-color: rgba(255, 255, 255, 0.05); } /* Pasos Críticos (ROJO - Inminente/Peligroso) */ .critical-pass-card { border: 1px solid rgba(248, 81, 73, 0.4) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(248, 81, 73, 0.1) !important; background: radial-gradient(circle at 50% 0%, rgba(248, 81, 73, 0.15) 0%, rgba(20, 25, 30, 0.6) 100%) !important; background-clip: padding-box; } /* Pasos de Advertencia (NARANJA - Muy Bajo) */ .warning-pass-card { border: 1px solid rgba(247, 181, 48, 0.4) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(247, 181, 48, 0.1) !important; background: radial-gradient(circle at 50% 0%, rgba(247, 181, 48, 0.15) 0%, rgba(20, 25, 30, 0.6) 100%) !important; background-clip: padding-box; } .pass-row.previous-pass { box-shadow: inset 3px 0 0 0 var(--color-danger); } .info-content { color: var(--color-text-primary); line-height: 1.7; } .info-content h3 { font-size: 1.25rem; font-weight: 700; color: var(--color-secondary); margin-top: 2rem; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid #30363d; } .info-content h3:first-of-type { margin-top: 0; } .info-content p, .info-content ul { color: var(--color-text-primary); margin-bottom: 1rem; } .info-content a { color: var(--color-secondary); text-decoration: none; transition: color 0.2s ease; } .info-content a:hover { text-decoration: underline; color: var(--color-primary); } .info-content ul { list-style-position: inside; padding-left: 0.5rem; } .info-content li::marker { color: var(--color-primary); } .info-content li { margin-bottom: 0.5rem; } .info-content code { background-color: var(--color-background); padding: 0.2rem 0.4rem; border-radius: 4px; font-family: monospace; font-size: 0.9em; color: var(--color-warning); } /* ========================================================================== ESTILOS ADAPTATIVOS PARA ESCRITORIO (1024px y superior) ========================================================================== */ @media (min-width: 1024px) { #main-actions-group { flex-direction: row; gap: 1.5rem; } #main-control-panel { top: 1.5rem; left: 50%; transform: translateX(-50%); right: auto; width: 420px; margin: 0; } #time-control-panel, #time-control-panel-3d { left: 50%; right: auto; bottom: 1.5rem; width: 100%; max-width: 420px; transform: translateX(-50%) translateY(20px) scale(0.98); } #time-control-panel.visible, #time-control-panel-3d.visible { transform: translateX(-50%) translateY(0) scale(1); } #map-style-switcher { left: 1.5rem; right: auto; bottom: 1.5rem; align-items: flex-start; } #action-controls { bottom: 1.5rem; right: 1.5rem; flex-direction: row-reverse; align-items: center; } #map-watermark { font-size: 7vw; } } /* ========================================================================== INDICADOR DE PÁGINA DEL PANEL ========================================================================== */ /* ========================================================================== INDICADOR DE PÁGINA DEL PANEL ========================================================================== */ #page-indicator-dots { position: absolute; bottom: 10px; /* Posición final para centrado vertical en el margen */ left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 510; pointer-events: none; transition: opacity 0.3s ease; opacity: 0; /* <-- AGREGAMOS ESTO PARA OCULTARLOS VISUALMENTE */ } #main-control-panel.expanded #page-indicator-dots { /* Mantenemos la opacidad en 0, pero la regla es necesaria para la lógica JS */ } .dot { width: 6px; height: 6px; background-color: var(--color-text-secondary); border-radius: 50%; transition: background-color 0.3s ease; } .dot.active-dot { background-color: var(--color-text-primary); } /* ========================================================================== ESTILOS PARA SELECCIÓN MÚLTIPLE ========================================================================== */ #toggle-multi-select-btn.active { background-color: var(--color-accent); border-color: var(--color-secondary); color: white; } .favorite-select-btn { position: relative; overflow: hidden; transition: padding 0.3s var(--ease-out-quint), background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; } .favorite-select-btn::before { content: '\f00c'; /* Font Awesome check icon */ font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 50%; right: 1.5rem; transform: translateY(-50%) scale(0.5); color: white; font-size: 1.25rem; opacity: 0; transition: all 0.3s var(--ease-out-quint); } .multi-select-active .favorite-select-btn.is-selected { background-color: var(--color-primary); border-color: var(--color-secondary); color: white; padding-right: 4rem; /* Hacemos espacio para el check */ } .multi-select-active .favorite-select-btn.is-selected::before { opacity: 1; transform: translateY(-50%) scale(1); } /* ========================================================================== ESTILOS PARA EL MODAL DE SATÉLITES ========================================================================== */ .modal-satellite-card { background-color: var(--color-surface); border: 1px solid #30363d; color: var(--color-text-primary); padding: 0.75rem 1.25rem; border-radius: 8px; width: 100%; transition: all 0.2s var(--ease-out-cubic); cursor: pointer; text-align: left; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; } .modal-satellite-card:hover { border-color: var(--color-secondary); background-color: rgba(88, 166, 255, 0.05); } .multi-select-active .modal-satellite-card.is-selected { background-color: var(--color-primary); border-color: var(--color-secondary); color: white; padding-right: 4rem; /* Hacemos espacio para el check */ } .multi-select-active .modal-satellite-card.is-selected::before { content: '\f00c'; /* Font Awesome check icon */ font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 50%; right: 1.5rem; transform: translateY(-50%) scale(1); opacity: 1; transition: all 0.3s var(--ease-out-quint); } /* Ajustes para el botón 'Ver' en modo multiselección */ #show-selected-sats-btn { min-width: 80px; padding: 0.6rem 1.25rem; } /* Animación para el footer de selección múltiple */ #favorites-modal-footer { border-top: 1px solid transparent; transition: all 0.4s var(--ease-out-quint); height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; } #favorites-modal-footer.controls-visible { height: 73px; padding-top: 1rem; padding-bottom: 1rem; border-top-color: #30363d; } #favorites-modal-footer > span, #favorites-modal-footer > div { opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease; } #favorites-modal-footer.controls-visible > span, #favorites-modal-footer.controls-visible > div { opacity: 1; transform: translateY(0); transition-delay: 0.2s; } /* ========================================================================== MEJORAS PARA EL MODAL DE PASES (#passes-modal) ========================================================================== */ /* --- INICIO: Overrides para Modales Especiales --- */ #passes-modal .modal-content, #favorites-modal .modal-content { /* Estos modales son paneles de pantalla completa, no ventanas "glass" */ background: var(--color-background); backdrop-filter: none; -webkit-backdrop-filter: none; border: none; box-shadow: none; border-radius: 0; width: 100%; height: 100%; max-height: 100%; padding: 0; } #passes-modal .modal-content h3, #favorites-modal .modal-content h3 { /* Los H3 de estos modales no necesitan el margen superior para el botón 'X' */ margin-top: 0; } #radar-modal .modal-content { width: clamp(320px, 90vw, 800px); /* El modal del radar necesita ser más ancho */ } #loading-modal .modal-content { width: auto; max-width: 20rem; /* El modal de carga es pequeño */ } #share-modal .modal-content h3 { margin-top: 0; /* El modal de compartir tiene un ícono arriba, no un botón X */ } /* --- FIN: Overrides para Modales Especiales --- */ #passes-modal .modal-content { height: 80vh; /* Se establece una altura fija */ } #passes-modal .passes-header { padding-bottom: 1rem; } #passes-modal .overflow-y-auto { padding-top: 0; padding-bottom: 1rem; } #passes-modal .pass-card { padding: 0.85rem 1.25rem; } #passes-modal .pass-date-header { padding: 1.5rem 0.25rem 0.5rem; } /* ========================================================================== CORRECCIONES DE TEXTO ========================================================================== */ #favorites-modal .pass-date-header { font-size: 0.8rem; padding-top: 0.75rem; } /* ========================================================================== ESTILO ESPECIAL BOTÓN STARLINK (MODIFICADO) ========================================================================== */ .btn-starlink-special { position: relative; overflow: hidden; background-color: var(--color-surface); color: #FFEB3B; /* Color del estado hover */ border-color: #30363d; transition: all 0.3s var(--ease-out-cubic); box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), 0 0 25px rgba(247, 181, 48, 0.2); /* Sombra del estado hover */ } /* Capa para el borde con gradiente y la sombra sutil */ .btn-starlink-special::before { content: ''; position: absolute; inset: 0; border-radius: 8px; padding: 1px; background: linear-gradient(45deg, var(--color-warning), #FFD700, var(--color-warning)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 1; /* Opacidad del estado hover, ahora fija */ transition: opacity 0.3s ease; } /* Capa para el efecto de brillo que se mueve */ .btn-starlink-special::after { content: ''; position: absolute; top: 50%; left: 50%; width: 200%; padding-bottom: 200%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 235, 59, 0.2) 0%, rgba(255, 235, 59, 0) 60%); transform: translate(-50%, -50%) scale(0); transition: transform 0.6s var(--ease-out-quint), opacity 0.6s var(--ease-out-quint); opacity: 0; } /* Mantenemos un hover sutil para dar feedback */ .btn-starlink-special:hover { box-shadow: 0 0 30px rgba(247, 181, 48, 0.35); /* Sombra un poco más intensa */ } .btn-starlink-special:hover::after { transform: translate(-50%, -50%) scale(1); opacity: 1; transition-duration: 0.4s; } /* ========================================================================== ANIMACIÓN DE FAVORITOS ========================================================================== */ .favorite-toggle-btn { color: var(--color-text-secondary); transition: color 0.2s var(--ease-out-cubic), transform 0.2s var(--ease-out-cubic); padding: 0.5rem; margin: -0.5rem; cursor: pointer; background: none; border: none; } .favorite-toggle-btn:hover { transform: scale(1.15); } .favorite-toggle-btn.is-favorite { color: var(--color-danger); } .moving-favorite { transition: transform 0.6s var(--ease-out-quint); z-index: 10; position: relative; } /* ========================================================================== NUEVOS ESTILOS PARA LA PANTALLA DE AJUSTES ========================================================================== */ h3.setting-section-title { font-size: 0.85rem; font-weight: 800; color: var(--color-secondary); /* Color azul para el título */ text-transform: uppercase; letter-spacing: 0.05em; padding: 1.5rem 0.5rem 0.5rem; margin-bottom: 0.5rem; border-bottom: none; text-shadow: 0 0 15px rgba(88, 166, 255, 0.2); } .setting-item { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem; /* Más espacio interno */ min-height: 70px; } .setting-item:last-child { border-bottom: none; } .setting-section-title { margin-bottom: 0.5rem; } .setting-group { /* Estilo Liquid Glass */ background: linear-gradient(145deg, rgba(20, 25, 30, 0.658) 0%, rgba(20, 25, 30, 0.3) 100%); /* Borde sutil uniforme */ border: 1px solid rgba(255, 255, 255, 0.12); background-clip: padding-box; /* Sombras para volumen 3D */ box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 10px 30px -5px rgba(0, 0, 0, 0.5); border-radius: 24px; /* Curvas modernas */ overflow: visible; /* IMPORTANTE: Permite que los menús desplegables se salgan */ margin-bottom: 1rem; position: relative; /* Para el contexto de apilamiento */ z-index: 1; transition: z-index 0s linear 0.3s; /* Retraso para que baje el z-index después de la animación */ } /* CLASE CLAVE: Eleva todo el grupo por encima del siguiente */ .setting-group.is-elevated { z-index: 100; transition: z-index 0s; /* Sin retraso al subir */ } .setting-group .setting-item { border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Línea separadora muy sutil */ padding-left: 1.5rem; padding-right: 1.5rem; } .setting-group .setting-item:last-child { border-bottom: none; } .setting-item-label { display: flex; align-items: center; gap: 1rem; font-weight: 600; font-size: 1rem; color: var(--color-text-primary); } .setting-item-label i { color: var(--color-text-secondary); font-size: 1.1rem; } .setting-item-control { display: flex; align-items: center; } /* Estilo para el interruptor (Mapa) */ .segmented-control { display: flex; background-color: rgba(0, 0, 0, 0.3); /* Fondo oscuro semitransparente */ border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 9999px; /* Forma de píldora completa */ padding: 4px; width: auto; min-width: 180px; } .segmented-control-btn { flex-grow: 1; text-align: center; padding: 0.5rem 1rem; border-radius: 9999px; /* Botones internos también píldora */ font-weight: 600; font-size: 0.85rem; color: var(--color-text-secondary); transition: all 0.3s var(--ease-out-quint); border: 1px solid transparent; /* Para evitar saltos al añadir borde activo */ background-color: transparent; cursor: pointer; } .segmented-control-btn.active { background-color: var(--color-primary); color: white; border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 2px 12px rgba(48, 129, 247, 0.4); } .map-style-btn:disabled, .segmented-control-btn:disabled { background-color: var(--color-surface) !important; color: var(--color-text-secondary) !important; cursor: not-allowed !important; box-shadow: none !important; transform: none !important; opacity: 0.5; border-color: #30363d !important; } /* Estilo para el menú desplegable (Idioma) */ .dropdown-control { position: relative; } .dropdown-toggle-btn { display: flex; align-items: center; gap: 0.75rem; /* Estilo Glass Pill */ background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 9999px; padding: 0.5rem 1.25rem; min-width: 140px; justify-content: space-between; font-weight: 600; font-size: 0.9rem; color: var(--color-text-primary); cursor: pointer; transition: all 0.2s var(--ease-out-cubic); } .dropdown-toggle-btn:hover { border-color: var(--color-secondary); color: white; background-color: rgba(255, 255, 255, 0.1); box-shadow: 0 0 15px rgba(88, 166, 255, 0.15); } /* Control contenedor: cuando está activo, se eleva sobre TODO */ .dropdown-control.is-active { position: relative; z-index: 100 !important; /* Esto arregla que la píldora de abajo lo tape */ } .dropdown-menu { position: absolute; right: 0; top: calc(100% + 12px); /* Un poco más separado */ min-width: 100%; /* Asegura que cubra el ancho */ width: max-content; /* Se adapta si el contenido es más ancho */ max-width: 250px; /* Límite para que no sea gigante */ /* Nuevo Estilo Liquid Glass con Blur Intenso */ background: rgba(20, 25, 30, 0.85); /* Más transparente para lucir el blur */ backdrop-filter: blur(20px); /* Desenfoque fuerte del fondo */ -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 20px; /* Más redondeado */ /* Sombra profunda para separarlo visualmente */ box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.1); z-index: 2000; padding: 0.5rem; opacity: 0; transform: translateY(-15px) scale(0.95); pointer-events: none; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } /* Cuando el control padre está activo, mostramos el menú */ .dropdown-control.is-active .dropdown-menu, .dropdown-menu.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .dropdown-item { width: 100%; text-align: left; padding: 0.6rem 1rem; border-radius: 6px; font-weight: 500; color: var(--color-text-primary); transition: background-color 0.2s ease, color 0.2s ease; border: none; background: none; cursor: pointer; font-size: 0.9rem; } .dropdown-item:hover { background-color: rgba(88, 166, 255, 0.1); color: var(--color-secondary); } .dropdown-item.active { color: var(--color-secondary); font-weight: 700; } /* ========================================================================== ESTILOS PARA PÍLDORA DE NOTIFICACIÓN Y CALENDARIO ========================================================================== */ .notification-pill { display: inline-flex; /* Para que se ajuste al contenido */ align-items: center; border: 1px solid rgba(255, 255, 255, 0.15); /* Borde sutil */ border-radius: 9999px; padding: 0; /* Sin padding, los botones ocupan todo */ background-color: rgba(255, 255, 255, 0.05); /* Vidrio blanco muy sutil */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra para profundidad */ transition: border-color 0.2s var(--ease-out-cubic); overflow: hidden; /* Para que los botones redondeados no se salgan */ } .notification-pill:hover { border-color: rgba(255, 255, 255, 0.3); /* Borde más claro al pasar el mouse */ } .notification-pill button { background-color: transparent; /* Fondo transparente */ border: none; /* CLAMP: Botones más compactos en pantallas angostas */ height: clamp(26px, 8vw, 30px); width: clamp(32px, 10vw, 36px); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-text-secondary); transition: all 0.2s var(--ease-out-cubic); } /* NUEVO: Achicar los iconos dentro de los botones */ .notification-pill button i { font-size: clamp(0.9rem, 4.5vw, 1.125rem) !important; } /* Restaurar en sm+ */ @media (min-width: 640px) { .notification-pill button { height: 34px; width: 40px; } } /* Redondea las esquinas exteriores para el efecto "media píldora" */ .notification-pill button:first-child { border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; } .notification-pill button:last-child { border-top-right-radius: 9999px; border-bottom-right-radius: 9999px; } /* La línea divisora ahora es el 'gap', por lo que estas reglas ya no son necesarias */ .notification-pill .more-options-btn { border-left: 1px solid rgba(255, 255, 255, 0.1); /* Divisor sutil de vidrio */ } .notification-pill:hover .more-options-btn { border-left-color: rgba(255, 255, 255, 0.3); /* Divisor más claro en hover */ } /* Restaurar en sm+ */ @media (min-width: 640px) { .notification-pill button { height: 34px; width: 40px; } } .notification-pill button:hover { background-color: rgba(255, 255, 255, 0.1); /* Resaltado de vidrio blanco */ color: var(--color-secondary); } /* El botón de más opciones hereda los estilos y le agregamos un borde izquierdo */ .notification-pill .more-options-btn { border-left: 1px solid #30363d; transition: all 0.2s var(--ease-out-cubic); } .notification-pill:hover .more-options-btn { border-left-color: var(--color-secondary); } .notification-pill button:hover { background-color: rgba(255, 255, 255, 0.1); /* Resaltado de vidrio blanco */ color: var(--color-secondary); } /* ========================================================================== ESTILOS MEJORADOS PARA EL MODAL DE PASOS EN MÓVILES ========================================================================== */ /* Reduce el padding general y el espacio entre el título y los filtros */ #passes-modal .modal-content > div:first-child { padding: 1.5rem 1rem 1rem 1rem; gap: 1rem; } /* Achica el padding de la lista de resultados */ #passes-modal .overflow-y-auto { padding-left: 1rem; padding-right: 1rem; } /* Título principal más chico y centrado */ #passes-modal-title { font-size: 1.15rem; text-align: center; } /* Botones de filtro más compactos */ #passes-modal-filter .filter-btn { padding: 0.25rem 0.75rem; /* Menos padding vertical y horizontal */ font-size: 0.8rem; /* Letra un poco más chica */ } /* Ajustes finos a las tarjetas de cada paso */ #passes-modal .pass-card { padding: 0.75rem 1rem; /* Padding más ajustado */ gap: 0.75rem; /* Menos espacio entre los elementos */ } /* Nombre del satélite un poco más chico */ #passes-modal .pass-card .font-bold { font-size: 0.95rem; } /* Texto de la hora más compacto */ #passes-modal .pass-card .font-mono { font-size: 0.8rem; } /* Tamaño de la elevación y de los íconos de la píldora */ #passes-modal .pass-card .text-lg { font-size: 1.05rem; } /* La "píldora" de notificaciones y calendario más pequeña */ #passes-modal .notification-pill button { height: 30px; /* Altura reducida */ width: 38px; } /* Encabezados de fecha más sutiles */ #passes-modal .pass-date-header { font-size: 0.8rem; padding: 1.25rem 0 0.5rem 0; } /* ========================================================================== NUEVOS ESTILOS "LIQUID GLASS" PARA EL MODAL DE INFO DE SATÉLITE ========================================================================== */ #satellite-info-modal .modal-content { /* Ajustes de layout */ width: clamp(320px, 90vw, 400px); /* Hacemos la ventana un poco más angosta */ } #satellite-info-modal #satellite-info-content { /* El contenido ya no tiene bordes, es una lista limpia */ padding: 0.5rem 0; } #satellite-info-modal .btn-secondary { /* El botón de cerrar ahora es una 'X', este estilo ya no se usa */ display: none; } /* Media query para teléfonos un poco más grandes, para que el título no quede tan chico */ @media (min-width: 480px) { #passes-modal-title { font-size: 1.25rem; } } /* Estilo para el botón de notificación activado en el MODAL */ #notification-options .btn.active { border-color: var(--color-success); color: var(--color-success); background-color: rgba(57, 211, 83, 0.15); font-weight: 700; box-shadow: 0 0 10px rgba(57, 211, 83, 0.2); } /* Estilo para la campanita activada en la TARJETA */ .notification-btn.active { color: var(--color-success) !important; } .notification-btn.active i { font-weight: 900; /* Pone el ícono sólido */ text-shadow: 0 0 8px rgba(57, 211, 83, 0.6); /* Brillo verde */ } /* ========================================================================== TOAST NOTIFICATIONS (POP-UP) ========================================================================== */ #toast-container { position: fixed; /* En web safe-top es 0, así que queda a 1.5rem del borde */ top: calc(1.5rem + var(--safe-top)); left: 1rem; right: 1rem; width: auto; transform: none; z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; pointer-events: none; } @keyframes toast-in-out { 0% { transform: translateY(-100%); opacity: 0; } 10%, 90% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-100%); opacity: 0; } } .toast-message { display: flex; align-items: center; justify-content: center; gap: 0.75rem; background: rgba(22, 27, 34, 0.9); color: var(--color-text-primary); padding: 0.75rem 1.25rem; border-radius: 12px; font-weight: 500; font-size: 0.9rem; border: 1px solid #30363d; box-shadow: 0 8px 30px rgba(0,0,0,0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: toast-in-out 4s ease-in-out forwards; max-width: 95vw; box-sizing: border-box; text-align: center; } .toast-message .fa-solid { font-size: 1.1rem; } .toast-message.success { border-color: var(--color-success); } .toast-message.success .fa-solid { color: var(--color-success); } .toast-message.error { border-color: var(--color-danger); } .toast-message.error .fa-solid { color: var(--color-danger); } /* ========================================================================== ESTILOS PARA LOS NUEVOS BOTONES DE FECHA/HORA ========================================================================== */ label[for="date-input"], label[for="date-input-3d"], label[for="time-input"], label[for="time-input-3d"] { position: relative; -webkit-tap-highlight-color: transparent; } label[for="date-input"] input, label[for="date-input-3d"] input, label[for="time-input"] input, label[for="time-input-3d"] input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1; /* Pone el input invisible por encima del texto y el ícono */ } label[for="date-input"] input::-webkit-calendar-picker-indicator, label[for="date-input-3d"] input::-webkit-calendar-picker-indicator, label[for="time-input"] input::-webkit-calendar-picker-indicator, label[for="time-input-3d"] input::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; } /* Hace que el ícono no intercepte los clics para que lleguen al input invisible */ label[for="date-input"] > i, label[for="date-input-3d"] > i { pointer-events: none; } /* ========================================================================== AJUSTES PERSONALIZADOS ========================================================================== */ /* Contenedor de controles de tiempo en forma de píldora */ #time-control-panel .flex.items-center.justify-between[class*="rounded-lg"] { border-radius: 9999px; } /* Botón de fecha en forma de píldora */ label[for="date-input"] { background-color: var(--color-surface) !important; border: 1px solid #30363d !important; } /* Aumentar tamaño de la línea de tiempo */ #timeline-slider, #timeline-slider-3d { height: 14px; border-radius: 7px; } #timeline-slider::-webkit-slider-thumb, #timeline-slider-3d::-webkit-slider-thumb { width: 30px; height: 30px; border-width: 5px; } #timeline-slider::-moz-range-thumb, #timeline-slider-3d::-moz-range-thumb { width: 30px; height: 30px; border-width: 5px; } .time-control-title { display: flex; flex-direction: column; justify-content: center; /* Center vertically */ align-items: flex-start; /* Align to the left */ height: 2.25rem; /* Similar to h-9 */ font-size: 0.875rem; /* text-sm from original span */ font-weight: 700; /* bold */ color: var(--color-text-secondary); /* text-text-secondary */ text-transform: uppercase; /* uppercase */ letter-spacing: 0.05em; /* tracking-wider */ line-height: 1; /* Adjust line height for two lines */ } /* ========================================================================== ESTILO PARA RESALTAR PASOS DEL DÍA ACTUAL (MODIFICADO A AZUL) ========================================================================== */ .pass-card-today { border: 1px solid rgba(48, 129, 247, 0.3) !important; /* Fondo radial subido al 30% verticalmente */ background: radial-gradient(circle at 50% 30%, rgba(48, 129, 247, 0.25) 0%, rgba(20, 25, 30, 0.6) 100%); background-clip: padding-box; /* Corrección de bordes */ box-shadow: 0 0 35px rgba(48, 129, 247, 0.25), /* Glow azul centrado y sutil */ inset 0 0 0 1px rgba(150, 210, 255, 0.5), /* Anillo UNIFORME celeste brillante (Mantenemos el anillo de luz para el efecto vidrio) */ inset 0 0 20px rgba(48, 129, 247, 0.1) !important; } .pass-card-starlink, .pass-card-5star { /* <--- AGREGADO: Ahora las 5 estrellas usan el mismo dorado */ border: 1px solid rgba(247, 181, 48, 0.3) !important; /* Fondo radial subido al 30% verticalmente */ background: radial-gradient(circle at 50% 30%, rgba(247, 181, 48, 0.15) 0%, rgba(20, 25, 30, 0.4) 100%) !important; /* !important agregado para asegurar override sobre 'today' */ background-clip: padding-box; /* Corrección de bordes */ box-shadow: 0 0 35px rgba(247, 181, 48, 0.15), /* Glow dorado centrado y sutil */ inset 0 1px 0 0 rgba(247, 181, 48, 0.6), /* Luz interna dorada más intensa */ inset 0 0 20px rgba(247, 181, 48, 0.05) !important; } .pass-card-today.pass-card-5star, .pass-card-today.pass-card-starlink { border: 1px solid rgba(247, 181, 48, 0.3) !important; /* Fondo radial dorado subido al 30% verticalmente */ background: radial-gradient(circle at 50% 30%, rgba(247, 181, 48, 0.20) 0%, rgba(20, 25, 30, 0.4) 100%) !important; box-shadow: 0 0 40px rgba(247, 181, 48, 0.3), /* Glow dorado centrado e intenso */ inset 0 1px 0 0 rgba(247, 181, 48, 0.6), /* Luz superior dorada */ inset 0 0 20px rgba(247, 181, 48, 0.1) !important; /* Brillo interno dorado */ } /* PRIORIDAD: Si es Hoy Y es 5 estrellas (o Starlink), aplicamos el diseño "Hoy" (borde+brillo) pero en dorado */ .pass-card-today.pass-card-5star, .pass-card-today.pass-card-starlink { border: 1px solid rgba(247, 181, 48, 0.3) !important; /* Fondo radial dorado subido al 30% verticalmente */ background: radial-gradient(circle at 50% 30%, rgba(247, 181, 48, 0.20) 0%, rgba(20, 25, 30, 0.4) 100%) !important; box-shadow: 0 0 40px rgba(247, 181, 48, 0.3), /* Glow dorado centrado e intenso */ inset 0 0 0 1px rgba(255, 225, 100, 0.6), /* AÑADIDO: Anillo UNIFORME dorado (igual estructura que el azul) */ inset 0 0 20px rgba(247, 181, 48, 0.1) !important; /* Brillo interno dorado */ } /* PRIORIDAD MÁXIMA: Si es Hoy Y es Crítico, aplicamos el diseño "Hoy" pero en ROJO */ .pass-card-today.critical-pass-card { border: 1px solid rgba(248, 81, 73, 0.5) !important; /* Fondo radial rojo subido al 30% verticalmente */ background: radial-gradient(circle at 50% 30%, rgba(248, 81, 73, 0.25) 0%, rgba(20, 25, 30, 0.6) 100%) !important; box-shadow: 0 0 40px rgba(248, 81, 73, 0.3), /* Glow rojo centrado e intenso */ inset 0 0 0 1px rgba(248, 81, 73, 0.6), /* Anillo UNIFORME rojo */ inset 0 0 20px rgba(248, 81, 73, 0.1) !important; /* Brillo interno rojo */ } /* ========================================================================== ESTILOS PARA TARJETAS DE ÓRBITAS CRÍTICAS (REDISEÑO PRO) ========================================================================== */ .orbit-risk-card { padding: 0.35rem 0.75rem !important; /* Ajuste fino de padding interno */ } .orbit-status-badge { font-size: 0.55rem; /* Letra bien chica */ font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.15rem 0.4rem; /* Padding reducido */ border-radius: 4px; border: 1px solid; display: flex; align-items: center; gap: 0.3rem; white-space: nowrap; } .orbit-risk-card .satellite-entry-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .orbit-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.15rem; padding-top: 0.4rem; border-top: 1px solid rgba(255, 255, 255, 0.05); /* Línea divisora muy sutil */ } .orbit-stat-item { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; position: relative; padding-left: 0.25rem; } /* Línea separadora vertical sutil entre items, excepto el primero */ .orbit-stat-item:not(:first-child) { border-left: 1px solid rgba(255, 255, 255, 0.05); padding-left: 0.75rem; } .stat-value { font-family: 'Space Grotesk', monospace; font-size: 0.85rem; /* Texto más chico y delicado */ font-weight: 700; line-height: 1.1; margin-top: 1px; } .stat-value .unit { font-size: 0.6rem; font-weight: 400; color: var(--color-text-secondary); margin-left: 1px; } .stat-label { font-size: 0.6rem; /* Etiqueta bien pequeña */ text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); opacity: 0.8; } /* ========================================================================== ESTILOS PARA LISTA DESPLEGABLE DE STARLINKS POR AÑO ========================================================================== */ .year-group.open .year-toggle-btn { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-color: #30363d; } .year-toggle-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1rem 1.25rem; border-radius: 8px; font-size: 1.1rem; font-weight: 700; text-align: left; color: var(--color-text-primary); background-color: var(--color-surface); transition: all 0.2s var(--ease-out-cubic); border: 1px solid #30363d; cursor: pointer; } .year-toggle-btn:hover { border-color: var(--color-secondary); background-color: rgba(88, 166, 255, 0.1); } .year-toggle-btn i { transition: transform 0.4s var(--ease-out-quint); } .year-group.open .year-toggle-btn i { transform: rotate(180deg); } .year-satellites-container { max-height: 0; overflow: hidden; background-color: var(--color-surface); border: 1px solid transparent; border-top: none; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .year-group.open .year-satellites-container { max-height: 2000vh; /* Un valor muy alto para permitir la expansión completa */ border-color: #30363d; padding: 0.5rem; } .year-satellites-container .satellite-entry { background-color: transparent; border: none; border-bottom: 1px solid #1a2029; border-radius: 0; margin-bottom: 0.25rem; } .year-satellites-container .satellite-entry:hover { background-color: rgba(13, 17, 23, 0.5); transform: none; box-shadow: none; border-color: #1a2029; } .year-satellites-container .satellite-entry:last-child { border-bottom: none; } /* --- ESTILOS PARA GRUPOS DE LANZAMIENTO (ACORDEÓN) --- */ .starlink-group-header { background: linear-gradient(145deg, rgba(20, 25, 30, 0.8) 0%, rgba(20, 25, 30, 0.5) 100%); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; padding: 1rem 1.25rem; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: all 0.2s ease; margin-bottom: 0.5rem; color: var(--color-text-primary); } .starlink-group-header:hover { border-color: rgba(88, 166, 255, 0.4); background-color: rgba(255, 255, 255, 0.05); } .starlink-group-header.active { border-color: var(--color-secondary); border-bottom-left-radius: 0; border-bottom-right-radius: 0; background-color: rgba(88, 166, 255, 0.1); margin-bottom: 0; } .starlink-group-header .group-title { font-weight: 700; font-size: 1rem; display: flex; flex-direction: column; } .starlink-group-header .group-subtitle { font-size: 0.75rem; color: var(--color-text-secondary); font-weight: 400; margin-top: 2px; } .starlink-group-header i { transition: transform 0.3s ease; color: var(--color-secondary); } .starlink-group-header.active i { transform: rotate(180deg); } .starlink-group-content { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Animación suave */ background-color: rgba(20, 25, 30, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); border-top: none; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; margin-bottom: 1rem; } .starlink-group-content.open { /* max-height se setea dinámicamente con JS, pero ponemos un fallback */ max-height: 5000px; } .starlink-group-content .satellite-entry { border-radius: 0; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.05); background: transparent; box-shadow: none; } /* ---------------------------------------------------- */ .pass-elevation-label { /* FIX: Tamaño fijo en rem para consistencia */ font-size: 0.55rem; font-weight: 700; line-height: 1.1; letter-spacing: 0.05em; opacity: 0.8; text-transform: uppercase; color: var(--color-text-secondary); } .live-indicator { /* FIX: Tamaño fijo en rem para consistencia */ font-size: 0.75rem; font-weight: 700; color: var(--color-secondary); animation: pulse-live 2s infinite ease-in-out; padding-top: 0.5rem; } .pass-card .text-center .font-bold { color: var(--color-text-secondary); } .star-rating-container { margin-top: 0.35rem; /* FIX: Tamaño fijo en rem para que escale junto con el root, sin achicarse antes */ font-size: 0.9rem; color: var(--color-warning); letter-spacing: 0.1em; display: block; /* <-- Vuelve a ser block para estar en su propia línea */ width: fit-content; /* <-- La nueva clave: el bloque se ajusta al contenido */ position: relative; /* Contenedor para el pseudo-elemento */ z-index: 1; /* Asegura que las estrellas estén sobre el resplandor */ } .star-rating-container .fa-regular { color: var(--color-text-secondary); opacity: 0.5; } .star-rating-container { position: relative; /* Contenedor para el pseudo-elemento */ z-index: 1; /* Asegura que las estrellas estén sobre el resplandor */ } .star-rating-container::after { content: ''; position: absolute; z-index: -1; /* Detrás de las estrellas */ top: 50%; /* Por defecto (1 estrella), el centro es 10% desde la izquierda */ left: 10%; width: 30px; /* Ancho base para 1 estrella */ height: 30px; /* Altura (más redonda para 1 estrella) */ background-color: var(--color-warning); /* Color de las estrellas */ border-radius: 50%; filter: blur(15px); /* Desenfoque sutil */ /* Centramos el resplandor (horizontal y vertical) en el punto 'left' */ transform: translate(-50%, -50%); opacity: 0.15; /* Sutil (REBAJADO) */ /* Agregamos 'left' a la transición */ transition: opacity 0.4s var(--ease-out-quint), width 0.4s var(--ease-out-quint), height 0.4s var(--ease-out-quint), left 0.4s var(--ease-out-quint); } .star-rating-container.stars-2::after { width: 45px; height: 28px; /* Un poco más ovalado */ left: 20%; /* Centro entre estrella 1 y 2 */ } .star-rating-container.stars-3::after { width: 60px; height: 28px; left: 30%; /* Centro en estrella 2 (de 3) */ } .star-rating-container.stars-4::after { width: 75px; height: 26px; /* Más ovalado */ left: 40%; /* Centro entre estrella 2 y 3 */ } .star-rating-container.stars-5::after { width: 90px; height: 26px; left: 50%; /* Centro en estrella 3 (de 5) */ } @keyframes pulse-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } /* ========================================================================== ESTILOS PARA EL POPUP DE OPCIONES DE PASO ========================================================================== */ .pass-options-popup { position: absolute; z-index: 1100; background: rgba(22, 27, 34, 0.548); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid #30363d; border-radius: 8px; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; box-shadow: 0 8px 30px rgba(0,0,0,0.5); opacity: 0; transform: translateY(-10px) scale(0.95); transition: opacity 0.3s var(--ease-out-quint), transform 0.3s var(--ease-out-quint); pointer-events: none; } .pass-options-popup.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .pass-options-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; border-radius: 6px; font-weight: 500; color: var(--color-text-primary); background: none; border: none; cursor: pointer; text-align: left; white-space: nowrap; transition: background-color 0.2s ease, color 0.2s ease; } .pass-options-item:hover { background-color: rgba(88, 166, 255, 0.1); color: var(--color-secondary); } .pass-options-item i { color: var(--color-text-secondary); width: 16px; text-align: center; } /* ========================================================================== ESTILOS PARA MODAL DE COMPARTIR (REDiseñado) ========================================================================== */ #copy-share-link-btn:hover { transform: translateY(-50%); } #copy-share-link-btn.is-pressed { transform: translateY(-50%) scale(0.97) !important; } .social-share-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background-color: var(--color-surface); border: 1px solid #30363d; color: var(--color-text-secondary); font-size: 1.5rem; text-decoration: none; transition: all 0.2s var(--ease-out-cubic); } .social-share-icon:hover { color: var(--color-text-primary); transform: translateY(-3px) scale(1.05); box-shadow: 0 5px 15px rgba(0,0,0,0.3); } .social-share-icon.whatsapp:hover { border-color: #25D366; background-color: rgba(37, 211, 102, 0.1); color: #25D366; } .social-share-icon.x-twitter:hover { border-color: #ffffff; background-color: rgba(255, 255, 255, 0.1); color: #ffffff; } /* ========================================================================== ESTILOS PARA FILTRO DE PASOS ========================================================================== */ .filter-dropdown { position: relative; display: inline-block; } .filter-pill-btn { background-color: rgba(255, 255, 255, 0.05); color: var(--color-text-primary); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 9999px; /* CLAMP: Padding lateral y fuente se reducen en pantallas muy chicas */ padding: 0.35rem clamp(0.6rem, 4vw, 1rem); font-weight: 500; font-size: clamp(0.75rem, 3.5vw, 0.875rem); cursor: pointer; transition: all 0.2s var(--ease-out-cubic); display: flex; align-items: center; } .filter-pill-btn:hover { border-color: rgba(255, 255, 255, 0.3); color: var(--color-text-primary); } /* --- INICIO: Modificación de altura para botones de navegación de satélites --- */ .satellite-nav-pill { /* CLAMP: Padding vertical y fuente */ padding-top: clamp(0.45rem, 2.5vw, 0.6rem); padding-bottom: clamp(0.45rem, 2.5vw, 0.6rem); font-size: clamp(0.8rem, 4vw, 0.9rem); /* Estilo Liquid Glass Base Mejorado */ border: 1px solid rgba(255, 255, 255, 0.12); background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%); background-clip: padding-box; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.25); /* Luz suave */ } .satellite-nav-pill.reentry-style { border-color: rgba(248, 81, 73, 0.5); background-color: rgba(248, 81, 73, 0.05); color: var(--color-danger); } .satellite-nav-pill.reentry-style:hover { border-color: var(--color-danger); background-color: rgba(248, 81, 73, 0.15); color: white; box-shadow: 0 0 15px rgba(248, 81, 73, 0.2); } /* --- FIN: Modificación de altura --- */ .filter-menu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: rgba(22, 27, 34, 0.548); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid #30363d; border-radius: 8px; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; box-shadow: 0 8px 30px rgba(0,0,0,0.5); opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.95); transition: opacity 0.3s var(--ease-out-quint), transform 0.3s var(--ease-out-quint); pointer-events: none; z-index: 10; } .filter-dropdown.is-open .filter-menu { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); pointer-events: auto; } .filter-btn { text-align: center; padding: 0.5rem 1rem; border-radius: 6px; font-weight: 500; color: var(--color-text-primary); transition: background-color 0.2s ease, color 0.2s ease; border: none; background-color: transparent; cursor: pointer; white-space: nowrap; } .filter-btn:hover { background-color: rgba(255, 255, 255, 0.1); } .filter-btn.active { background-color: var(--color-primary); color: white; } .filter-chevron { transition: transform 0.3s var(--ease-out-quint); } .filter-dropdown.is-open .filter-chevron { transform: rotate(180deg); } #show-previous-passes-btn-new { display: flex; align-items: center; justify-content: center; /* Estilos originales */ height: 34px; width: 34px; padding: 0; } /* ========================================================================== ESTILOS PARA EL MODAL DE CARGA ========================================================================== */ #loading-modal .modal-content { /* Se eliminaron los overrides de fondo. Ahora hereda el estilo .modal-content "Liquid Glass" por defecto. */ } #loading-modal.is-visible { pointer-events: all; /* Asegura que no se pueda hacer clic detrás */ } /* --- INICIO: Nuevo Loader Personalizado --- */ @keyframes orbit-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes orbit-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.5; } 50% { transform: translate(-50%, -50%) scale(1); opacity: 1; } } .custom-loader { position: relative; width: 50px; /* Tamaño del contenedor */ height: 50px; margin: 0 auto; /* Centra el loader */ animation: orbit-rotate 2.2s linear infinite; /* Mantenemos el margen que tenía el spinner original */ margin-bottom: 0.5rem; } .loader-dot { position: absolute; width: 12px; /* Tamaño de los puntos */ height: 12px; background-color: var(--color-secondary); border-radius: 50%; opacity: 0; box-shadow: 0 0 12px 2px var(--color-secondary); /* Efecto "glow" */ animation: orbit-pulse 1.6s ease-in-out infinite; } /* Posicionamiento y retardo de animación para cada punto */ .loader-dot:nth-child(1) { top: 0; left: 50%; transform: translate(-50%, -50%); animation-delay: 0s; } .loader-dot:nth-child(2) { top: 50%; right: 0; transform: translate(50%, -50%); animation-delay: -0.4s; } .loader-dot:nth-child(3) { bottom: 0; left: 50%; transform: translate(-50%, 50%); animation-delay: -0.8s; } .loader-dot:nth-child(4) { top: 50%; left: 0; transform: translate(-50%, -50%); animation-delay: -1.2s; } /* --- FIN: Nuevo Loader Personalizado --- */ /* ========================================================================== ESTILOS PARA BARRA DE BÚSQUEDA EXPANDIBLE ========================================================================== */ .list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; padding: 0 0.5rem; } .list-header .list-title { padding: 0; margin: 0; } .search-wrapper { position: relative; display: flex; align-items: center; justify-content: flex-end; } .search-toggle-btn { /* CLAMP: Botón lupa se achica */ width: clamp(30px, 8vw, 36px); height: clamp(30px, 8vw, 36px); border-radius: 50%; background-color: transparent; border: none; color: var(--color-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s var(--ease-out-cubic); z-index: 2; } .search-toggle-btn:hover { color: var(--color-secondary); } .search-input-known { width: 0; /* CLAMP: Altura del input */ height: clamp(30px, 8vw, 36px); background-color: var(--color-surface); border: 1px solid #30363d; border-radius: 18px; outline: none; color: var(--color-text-primary); padding: 0; /* CLAMP: Fuente interna */ font-size: clamp(0.8rem, 4vw, 0.9rem); font-weight: 500; opacity: 0; transition: width 0.4s var(--ease-out-quint), opacity 0.3s ease, padding 0.4s var(--ease-out-quint); position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .search-wrapper.is-active .search-input-known { width: 200px; opacity: 1; padding: 0.5rem 1rem 0.5rem 1.25rem; } .search-wrapper.is-active .search-toggle-btn { color: var(--color-text-primary); } .search-wrapper.is-active .search-toggle-btn { color: var(--color-text-primary); } /* --- INICIO: Estilos para el botón de "Ver Pasos Previos" --- */ .view-more-link { color: var(--color-secondary); font-weight: 700; letter-spacing: 0.05em; font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease-in-out; background: none; border: none; padding: 0.5rem 1rem; } .view-more-link:hover:not(:disabled) { color: var(--color-primary); text-shadow: 0 0 8px var(--color-primary); } .view-more-link:disabled { color: var(--color-text-secondary); cursor: not-allowed; } /* --- FIN: Estilos para el botón de "Ver Pasos Previos" --- */ /* ========================================================================== PÍLDORA Y MODAL DE ACTUALIZACIÓN DIARIA ========================================================================== */ /* Nuevo Wrapper para centrar el conjunto Píldora + Botón Juego */ #start-header-wrapper { position: absolute; top: calc(1.5rem + var(--safe-top)); left: 0; width: 100%; /* Ocupa todo el ancho */ z-index: 1000; display: flex; align-items: center; justify-content: center; /* Centra la píldora perfectamente */ pointer-events: none; /* Permite clicks a través de las áreas vacías */ } #daily-update-pill { pointer-events: auto; /* Reactiva clicks en la píldora */ position: relative; /* Cambiado de absolute */ top: auto; left: auto; transform: none; /* Reseteo de posicionamiento */ /* z-index removido, lo maneja el wrapper */ display: flex; align-items: center; /* Rediseño para estructura plana */ gap: 0.75rem; padding: 0.5rem 1rem; /* Dimensiones en REM para escalar con el diseño adaptativo */ width: 13.75rem; /* ~220px escalable */ max-width: 85vw; height: 2.5rem; /* ~40px escalable */ /* Estilo "Liquid Glass" Premium */ background: linear-gradient(165deg, rgba(20, 25, 30, 0.75) 0%, rgba(20, 25, 30, 0.4) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), 0 8px 30px rgba(0, 0, 0, 0.3); border-radius: 9999px; color: var(--color-text-primary); cursor: pointer; transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1); /* Para el efecto de resplandor interno */ overflow: hidden; } #daily-update-pill:hover { border-color: rgba(255, 255, 255, 0.3); background: linear-gradient(165deg, rgba(20, 25, 30, 0.85) 0%, rgba(20, 25, 30, 0.5) 100%); transform: translateY(-2px); /* Eliminado el translateX(-50%) */ box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.2), 0 12px 35px rgba(0, 0, 0, 0.4); } /* Nuevo Botón de Juego (Rediseño Minimalista) */ #start-game-btn { position: absolute; /* Saca el botón del flujo para no mover la píldora */ right: 1.5rem; /* Lo ancla a la derecha */ pointer-events: auto; /* Reactiva clicks en el botón */ width: 2.5rem; /* 40px, igual altura que la píldora central para simetría */ height: 2.5rem; border-radius: 50%; /* Estilo Liquid Glass (Igual a la píldora) */ background: linear-gradient(165deg, rgba(20, 25, 30, 0.75) 0%, rgba(20, 25, 30, 0.4) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.12); /* Centrado y color base sutil */ display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary); /* Gris por defecto, elegante */ font-size: 1rem; padding-left: 3px; /* Ajuste óptico para centrar el icono de Play */ box-shadow: 0 4px 15px rgba(0,0,0,0.3); transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1); } /* Botón ARRIESGAR (Juego) */ #game-guess-btn { box-shadow: 0 0 20px rgba(48, 129, 247, 0.5), inset 0 1px 0 rgba(255,255,255,0.3); border: 1px solid rgba(255,255,255,0.2); text-shadow: 0 1px 2px rgba(0,0,0,0.5); background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-accent) 100%); border: 1px solid var(--color-success); color: var(--color-success); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 15px rgba(57, 211, 83, 0.2); transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1); } #start-game-btn:hover { border-color: rgba(255, 255, 255, 0.4); color: white; /* Icono se ilumina a blanco */ background: linear-gradient(165deg, rgba(20, 25, 30, 0.85) 0%, rgba(20, 25, 30, 0.5) 100%); transform: translateY(-2px); /* Elevación sutil en vez de escala bruta */ /* Glow refinado y sombra de profundidad */ box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.2), 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 15px rgba(88, 166, 255, 0.15); /* Glow azul muy tenue */ } #start-game-btn:active { transform: scale(0.95); } /* --- Nuevos Elementos Internos --- */ .daily-pill-label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-secondary); /* Azul Starlink */ flex-shrink: 0; padding-top: 1px; /* Ajuste óptico vertical */ } .daily-pill-separator { width: 1px; height: 14px; background-color: rgba(255, 255, 255, 0.15); flex-shrink: 0; } #daily-update-content-wrapper { display: flex; align-items: center; justify-content: center; /* Centra la info en el espacio disponible */ gap: 0.6rem; flex-grow: 1; overflow: hidden; /* Para el ellipsis */ min-width: 0; } #daily-update-icon { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; /* Eliminados estilos de fondo/sombra viejos */ background: transparent !important; box-shadow: none !important; } /* El SVG de la luna (generado por JS) */ .moon-svg-visual { width: 100%; height: 100%; display: block; /* Sombra sutil para la luna */ filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3)); } #daily-update-text-pill { font-size: 0.85rem; font-weight: 500; color: rgba(255, 255, 255, 0.95); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Sombra de texto muy suave para legibilidad sobre glass */ text-shadow: 0 1px 2px rgba(0,0,0,0.5); } /* --- Animaciones de Estado (Eclipses/Eventos) --- */ /* Animación "Radar Sofisticado": Glow interno + Onda expansiva mediante sombras */ @keyframes sophisticated-radar-pulse { 0% { border-color: rgba(255, 255, 255, 0.15); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), inset 0 0 0 0 rgba(var(--target-rgb), 0), 0 0 0 0 rgba(var(--target-rgb), 0); } 10% { /* FASE 2: ENCENDIDO (Se ilumina el borde y el interior) */ border-color: rgba(var(--target-rgb), 0.9); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.5), inset 0 0 30px rgba(var(--target-rgb), 0.35), 0 0 15px rgba(var(--target-rgb), 0.8); } 45% { /* FASE 3: RETENCIÓN (Se mantiene iluminado un rato antes de soltar la onda) */ border-color: rgba(var(--target-rgb), 0.9); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.5), inset 0 0 30px rgba(var(--target-rgb), 0.35), 0 0 15px rgba(var(--target-rgb), 0.8); } 100% { /* FASE 4: ONDA EXPANSIVA (El borde se apaga, la sombra sale hacia afuera) */ border-color: rgba(255, 255, 255, 0.15); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), inset 0 0 0 rgba(var(--target-rgb), 0), 0 0 90px 15px rgba(var(--target-rgb), 0); /* ONDA DELICADA: Mucho blur, poco spread */ } } /* Animación Sólida: Azul Tech (#3081F7) */ @keyframes sophisticated-radar-pulse-lightblue { 0%, 100% { border-color: rgba(48, 129, 247, 0.3); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), inset 0 0 0 0 rgba(48, 129, 247, 0), 0 0 0 0 rgba(48, 129, 247, 0); } 50% { border-color: rgba(48, 129, 247, 1); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.5), inset 0 0 15px rgba(48, 129, 247, 0.4), 0 0 25px rgba(48, 129, 247, 0.7); /* Glow externo fuerte sin expandirse */ } } #daily-update-pill.has-special-event { --target-rgb: 48, 129, 247; /* Azul Tech para el estado hover */ animation: sophisticated-radar-pulse-lightblue 1s infinite ease-in-out; } /* Animación Sólida: Amarillo Constante (#ffbb29) */ @keyframes sophisticated-radar-pulse-yellow { 0%, 100% { border-color: rgba(255, 187, 41, 0.3); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), inset 0 0 0 0 rgba(255, 187, 41, 0), 0 0 0 0 rgba(255, 187, 41, 0); } 50% { border-color: rgba(255, 187, 41, 1); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.5), inset 0 0 15px rgba(255, 187, 41, 0.4), 0 0 30px rgba(255, 187, 41, 0.8); /* Glow externo muy fuerte */ } } #daily-update-pill.has-warning-event { --target-rgb: 255, 187, 41; /* Amarillo para el estado hover */ animation: sophisticated-radar-pulse-yellow 1s infinite ease-in-out; } /* Override para el estado hover cuando tiene animación */ #daily-update-pill.has-special-event:hover, #daily-update-pill.has-warning-event:hover { border-color: rgba(var(--target-rgb), 0.9); background: linear-gradient(165deg, rgba(20, 25, 30, 0.9) 0%, rgba(var(--target-rgb), 0.15) 100%); /* Tinte sutil en fondo */ box-shadow: 0 0 30px rgba(var(--target-rgb), 0.4), /* Glow estático intenso */ inset 0 0 20px rgba(var(--target-rgb), 0.1); animation: none; /* Detener el pulso al hacer hover para feedback sólido */ transform: scale(1.05); /* Eliminado translateX */ } /* Placeholder de carga (más sutil) */ #daily-update-pill.loading-placeholder { opacity: 0.7; pointer-events: none; min-width: 140px; } #daily-update-pill.loading-placeholder > * { opacity: 0; } /* Spinner de carga simulado con gradiente */ #daily-update-pill.loading-placeholder::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent); transform: translateX(-100%); animation: loading-shimmer 1.5s infinite; } @keyframes loading-shimmer { 100% { transform: translateX(100%); } } #daily-update-modal-content { position: absolute; top: 4.5rem; left: 50%; transform: translateX(-50%); width: 320px; max-width: 100vw; display: flex; flex-direction: column; gap: 1rem; max-height: calc(100vh - 6rem); overflow-y: auto; padding: 20px; padding-bottom: calc(70px + 2rem + env(safe-area-inset-bottom)); box-sizing: border-box; } #start-screen.modal-open { filter: blur(5px); transition: filter 0.15s ease-out; } .daily-update-card { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-radius: 20px; /* Un poco más curvas */ color: var(--color-text-primary); /* Base sólida oscura para legibilidad */ background-color: rgba(20, 25, 30, 0.95); border: 1px solid rgba(255, 255, 255, 0.1); /* Sombra profunda para que flote sobre el blur */ box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6); text-align: center; transition: all 0.25s var(--ease-out-cubic); position: relative; overflow: hidden; cursor: pointer; } /* --- Variantes de Color (Diseño Sofisticado con Glow) --- */ /* AZUL: Satélites Estándar */ .daily-update-card.card-blue { border: 1px solid rgba(48, 129, 247, 0.3) !important; background: radial-gradient(circle at 50% 30%, rgba(48, 129, 247, 0.25) 0%, rgba(20, 25, 30, 0.85) 100%); background-clip: padding-box; /* Glow azul centrado + Anillo interno brillante */ box-shadow: 0 0 35px rgba(48, 129, 247, 0.25), inset 0 0 0 1px rgba(150, 210, 255, 0.5), inset 0 0 20px rgba(48, 129, 247, 0.1); } /* AMARILLO: Alertas, Starlink, Estación Alta, Luna Llena */ .daily-update-card.card-yellow { border: 1px solid rgba(247, 181, 48, 0.3) !important; background: radial-gradient(circle at 50% 30%, rgba(247, 181, 48, 0.2) 0%, rgba(20, 25, 30, 0.85) 100%); background-clip: padding-box; /* Glow dorado centrado + Anillo interno brillante */ box-shadow: 0 0 35px rgba(247, 181, 48, 0.25), inset 0 0 0 1px rgba(255, 225, 120, 0.6), inset 0 0 20px rgba(247, 181, 48, 0.1); } /* LUNA/NEUTRO: Blanco/Plata suave */ .daily-update-card.card-moon { border: 1px solid rgba(255, 255, 255, 0.2) !important; background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.12) 0%, rgba(20, 25, 30, 0.85) 100%); background-clip: padding-box; /* Glow blanco sutil + Anillo interno */ box-shadow: 0 0 30px rgba(255, 255, 255, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.05); } /* Pseudo-elemento eliminado, ya no es necesario con el nuevo background */ .daily-update-card::before { display: none; } /* Destello blanco/gris para la tarjeta de la Luna en la pantalla de Eventos */ #events-screen div.daily-update-card { background-color: rgba(255, 255, 255, 0.08); /* Tinte gris sutil */ } #events-screen div.daily-update-card::before { background-image: radial-gradient(at top left, rgba(255, 255, 255, 0.2), transparent 50%); } /* Sobrescribir Tinte para el botón de Lanzamiento (que también es un daily-update-card) */ #open-launches-screen-btn.daily-update-card { background-color: rgba(88, 166, 255, 0.05); /* Tinte azul sutil */ } .daily-update-card:hover::before { opacity: 0.6; } .daily-update-card-main { display: flex; align-items: center; gap: 0.8rem; font-size: 1.1rem; font-weight: 700; /* Más bold */ color: rgba(255, 255, 255, 0.95); /* Ligeramente off-white */ } .daily-update-card-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; /* Un poco más de espacio */ width: 100%; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil */ } .detail-item { display: flex; flex-direction: column; align-items: center; /* Centrado */ gap: 0; /* Sin gap, controlado por márgenes */ text-align: center; /* Centrado */ } .detail-item i { font-size: 0.9rem; /* Icono un poco más grande */ color: var(--color-text-secondary); margin-bottom: 0.2rem; /* Espacio pequeño sobre el valor */ line-height: 1; } .detail-item .detail-value { font-weight: 500; /* Menos bold */ font-size: 1.1rem; /* Ligeramente más grande */ color: rgba(255, 255, 255, 0.95); line-height: 1.2; } .detail-item .detail-label { font-size: 0.7rem; /* Más pequeño y delicado */ color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.1; } /* ========================================================================== ICONO DE LUNA EN EL RADAR ========================================================================== */ #radar-moon-icon, #large-radar-moon-icon { position: absolute; border-radius: 50%; background-color: #f0f0f0; overflow: hidden; box-shadow: 0 0 5px rgba(240, 240, 240, 0.6); pointer-events: none; z-index: 5; transform: translate(-50%, -50%); /* Para centrarlo en su posición */ } #radar-moon-icon { width: 12px; height: 12px; } #large-radar-moon-icon { width: 16px; height: 16px; } #radar-moon-icon .moon-phase-shadow, #large-radar-moon-icon .moon-phase-shadow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background-color: var(--color-background); } /* ========================================================================== PANTALLA DE LA LUNA (LIQUID GLASS) ========================================================================== */ .moon-screen-bg, .glass-screen-bg { /* Fondo de nebulosa sutil para que el vidrio resalte */ background: var(--color-background); } .glass-header { background: rgba(0, 0, 0, 0.75) !important; /* Igual al bottom-nav-bar */ /* Se eliminaron el borde y la sombra para un look más limpio */ } #daily-update-moon-card { cursor: pointer; } .daily-update-card:hover { border-color: rgba(255, 255, 255, 0.25); /* Borde más brillante */ transform: scale(1.02); /* Escala sutil en lugar de mover */ box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35); /* Sombra más profunda */ } .moon-day-card { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 1rem; padding: 1.25rem; /* Estilo Liquid Glass (Igual a pass-card) */ background: linear-gradient(145deg, rgba(20, 25, 30, 0.658) 0%, rgba(20, 25, 30, 0.3) 100%); /* Borde sutil uniforme */ border: 1px solid rgba(255, 255, 255, 0.12) !important; /* Corrección de bordes entrecortados */ background-clip: padding-box; /* Sombras para volumen 3D - Equilibradas */ box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 0 20px rgba(255, 255, 255, 0.03), 0 0 30px -5px rgba(0, 0, 0, 0.5); border-radius: 24px; /* OPTIMIZACIONES DE RENDERIZADO */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: translateZ(0); /* Fuerza aceleración de hardware simple */ will-change: auto; /* Dejar que el navegador decida, forzarlo a veces empeora */ /* INTERACCIÓN HABILITADA */ pointer-events: auto; user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer; transition: transform 0.2s var(--ease-out-cubic), border-color 0.2s ease; } .moon-day-card:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.3) !important; } .moon-day-card.is-today { /* Borde transparente para evitar conflictos de renderizado en móviles */ border: 1px solid transparent !important; /* Fondo radial subido al 30% verticalmente */ background: radial-gradient(circle at 50% 30%, rgba(48, 129, 247, 0.25) 0%, rgba(20, 25, 30, 0.6) 100%) !important; background-clip: padding-box; /* Sombras estables: Anillo uniforme más sólido (0.8) para que se vea bien */ box-shadow: 0 0 35px rgba(48, 129, 247, 0.25), inset 0 0 0 1px rgba(150, 210, 255, 0.8), /* Anillo más visible */ inset 0 0 20px rgba(48, 129, 247, 0.1) !important; /* Evita que el navegador intente animar esto */ transform: none !important; } .moon-day-card .moon-phase-visual { width: 50px; height: 50px; border-radius: 50%; background-color: #f0f0f0; position: relative; overflow: hidden; flex-shrink: 0; box-shadow: 0 0 10px rgba(240, 240, 240, 0.4) inset, 0 0 5px rgba(240, 240, 240, 0.5); } .moon-day-card .moon-phase-visual .moon-phase-shadow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; /* Sombra semitransparente para que funcione sobre el vidrio */ background-color: rgba(0, 0, 0, 0.8); transition: transform 0.5s ease; } .moon-day-card .moon-date { font-weight: 700; font-size: 1rem; } .moon-day-card .moon-phase-name { font-size: 0.85rem; color: var(--color-text-secondary); } .moon-day-card .moon-day-details { text-align: right; font-size: 0.9rem; } .moon-day-card .moon-illumination { font-weight: 500; color: var(--color-warning); position: relative; /* Contenedor para el pseudo-elemento */ z-index: 1; /* Asegura que el texto esté sobre el resplandor */ display: inline-block; /* Para que la caja se ajuste al texto y el centrado del ::after funcione */ } /* Resplandor sutil para el porcentaje de iluminación */ .moon-day-card .moon-illumination::after { content: ''; position: absolute; z-index: -1; /* Detrás del texto */ top: 50%; left: 50%; /* Centrado en el texto */ width: 35px; /* Ancho del resplandor */ height: 30px; /* Altura del resplandor (ligeramente ovalado) */ background-color: var(--color-warning); /* Color amarillo */ border-radius: 50%; filter: blur(15px); /* Desenfoque */ transform: translate(-50%, calc(-50% + 5px)); /* Centrado y bajado 5px, como el corazón */ opacity: 0.20; /* Opacidad sutil (un poco más que las estrellas) */ transition: opacity 0.4s var(--ease-out-quint); } .moon-day-card .moon-times { color: var(--color-text-secondary); font-family: monospace; } .moon-day-card.is-full-moon { /* Borde transparente */ border: 1px solid transparent !important; /* Fondo radial */ background: radial-gradient(circle at 50% 30%, rgba(247, 181, 48, 0.15) 0%, rgba(20, 25, 30, 0.4) 100%) !important; background-clip: padding-box; /* Sombra uniforme dorada */ box-shadow: 0 0 35px rgba(247, 181, 48, 0.15), inset 0 0 0 1px rgba(255, 225, 120, 0.8), /* Anillo uniforme dorado */ inset 0 0 20px rgba(247, 181, 48, 0.05) !important; transform: none !important; } /* ========================================================================== BARRA DE NAVEGACIÓN INFERIOR ========================================================================== */ #bottom-nav-bar { position: fixed; bottom: 0; left: 0; right: 0; /* CAMBIO: Altura mínima sube a 64px para mantener el aire inferior */ height: calc(clamp(64px, 15vw, 70px) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background-color: transparent; display: flex; justify-content: space-around; align-items: flex-start; /* Mantenemos el padding superior igual */ padding-top: clamp(8px, 3vw, 14px); z-index: 1200; transition: transform 0.4s var(--ease-out-quint); /* overflow: hidden; */ /* <-- Eliminado */ } #bottom-nav-bar::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 150vw; height: 100%; /* Fondo ligeramente más opaco para compensar menos blur */ background-color: rgba(0, 0, 0, 0.75); /* Blur reducido al mínimo necesario */ backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-top: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50% 50% 0 0; z-index: -1; /* Aislar repintado de la barra */ will-change: transform; } @media (min-width: 1024px) { #bottom-nav-bar { top: 0; right: auto; bottom: auto; width: 220px; height: 100vh; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; padding: 0; border-top: none; border-right: 1px solid rgba(255, 255, 255, 0.1); /* Borde de vidrio tenue */ background-color: rgba(26, 28, 29, 0.61); /* Tinte negro sutil (igual al panel superior) */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* overflow: visible; */ /* <-- Eliminado */ } #bottom-nav-bar::before { display: none; } } .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; /* CLAMP: Gap reducido */ gap: clamp(2px, 1vw, 4px); color: var(--color-text-secondary); background-color: transparent; border: none; cursor: pointer; font-family: 'Space Grotesk', sans-serif; transition: all 0.2s var(--ease-out-cubic); border-radius: 8px; /* CLAMP: Padding lateral reducido */ padding: 4px clamp(6px, 2vw, 12px); -webkit-tap-highlight-color: transparent; /* position: relative; */ /* <-- Eliminado */ /* z-index: 2; */ /* <-- Eliminado */ } @media (min-width: 1024px) { .nav-item { flex-direction: row; justify-content: flex-start; width: 85%; padding: 1rem; gap: 1.5rem; } } .nav-item i { /* CLAMP: Icono se achica (aprox de 20px a 17px) */ font-size: clamp(1.1rem, 5.5vw, 1.25rem); line-height: 1; } .nav-item span { /* CLAMP: Texto se achica */ font-size: clamp(0.6rem, 3vw, 0.7rem); font-weight: 500; letter-spacing: 0.025em; } @media (min-width: 1024px) { .nav-item i { font-size: 1.5rem; width: 30px; /* Ancho fijo para alinear el texto */ text-align: center; } .nav-item span { font-size: 1rem; } } /* FIX: Hover solo en PC. En móvil usamos is-pressed para que no se pegue */ @media (hover: hover) { .nav-item:hover { color: var(--color-text-primary); background-color: rgba(88, 166, 255, 0.1); } } /* Estilo activo al tocar (se va al soltar gracias al JS) */ .nav-item.is-pressed { color: var(--color-text-primary); background-color: rgba(88, 166, 255, 0.1); } .nav-item.active { color: var(--color-text-primary); } /* ========================================================================== NUEVOS ESTILOS PARA LA PANTALLA DE EVENTOS ========================================================================== */ /* --- INICIO: Ajustes de layout para tarjetas de Eventos --- */ #events-screen .daily-update-card { flex-direction: row; align-items: center; gap: 1.25rem; padding: 1rem; } #events-screen .daily-update-card:hover { transform: translateY(-2px); /* Restaura el hover sutil */ } /* Oculta los detalles que ya no se usan en este layout */ #events-screen .daily-update-card-details { display: none; } /* Ajusta el texto principal para que crezca */ #events-screen .daily-update-card-main { flex-grow: 1; /* Resetea los overrides de la versión 31.5.7 */ align-items: center !important; font-size: 1rem !important; gap: 1.25rem; } /* Contenedores de info */ .launch-info-event, .moon-info-event { flex-grow: 1; } /* --- FIN: Ajustes de layout para tarjetas de Eventos --- */ .event-section { /* Se eliminó el margin-top: 1.75rem; */ } .event-section-title { font-size: 0.9rem; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; padding: 0 0.25rem 0.5rem; /* <-- Cambiado de 0.75rem a 0.5rem (8px) */ border-bottom: 1px solid transparent; margin-bottom: 0.75rem; /* <-- Cambiado de 1rem a 0.75rem (12px) */ } /* Slider de Eventos Destacados */ #featured-events-container { /* Hacemos que el contenedor ignore el padding de su padre para que el slider ocupe todo el ancho */ margin-left: -1rem; margin-right: -1rem; } @media (min-width: 640px) { #featured-events-container { margin-left: -1.5rem; margin-right: -1.5rem; } } #featured-events-slider { padding-bottom: 1rem; /* Espacio para que la sombra no se corte */ /* Añadimos padding a la izquierda para alinear la primera tarjeta con el contenido. */ padding-left: 1rem; /* scroll-padding alinea el punto de "snap" con el inicio del contenido. */ scroll-padding-left: 1rem; } @media (min-width: 640px) { #featured-events-slider { padding-left: 1.5rem; scroll-padding-left: 1.5rem; } } .event-card-featured { flex: 0 0 calc(100% - 4rem); max-width: calc(100% - 4rem); aspect-ratio: 16 / 9; margin-right: 1rem; position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,0.4); transition: transform 0.3s var(--ease-out-quint); } .event-card-featured:first-child { margin-left: 0; } .event-card-featured:hover { transform: translateY(-4px); } .event-card-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease-out-quint); } .event-card-featured:hover .event-card-image { transform: scale(1.05); } .event-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13, 17, 23, 0.95) 10%, rgba(13, 17, 23, 0.5) 35%, transparent 70%); padding: 1rem; display: flex; flex-direction: column; justify-content: flex-end; } .event-card-title { font-size: 1.1rem; font-weight: 700; color: var(--color-text-primary); line-height: 1.3; text-shadow: 0 2px 5px rgba(0,0,0,0.7); } .event-card-desc { font-size: 0.8rem; color: var(--color-text-secondary); line-height: 1.4; margin-top: 0.25rem; text-shadow: 0 1px 3px rgba(0,0,0,0.7); } #slider-dots { bottom: 20px; /* Sube los puntos para que queden dentro de la tarjeta */ } #slider-dots .dot { width: 7px; height: 7px; background-color: var(--color-surface); border: 1px solid var(--color-text-secondary); } #slider-dots .dot.active-dot { background-color: var(--color-secondary); border-color: var(--color-secondary); } /* Ajusta el contenedor del slider para que se extienda a los bordes de la pantalla */ #featured-events-container { margin-left: -1rem; margin-right: -1rem; } /* Añade padding interno al slider para alinear la primera tarjeta con el contenido */ #featured-events-slider { padding-left: 1rem; scroll-padding-left: 1rem; /* Para que el snap funcione con el padding */ } @media (min-width: 640px) { #featured-events-container { margin-left: -1.5rem; margin-right: -1.5rem; } #featured-events-slider { padding-left: 1.5rem; scroll-padding-left: 1.5rem; } } /* Ajusta el contenedor del slider para que se extienda a los bordes de la pantalla */ #featured-events-container { margin-left: -1rem; margin-right: -1rem; } /* Añade padding interno al slider para alinear la primera tarjeta con el contenido */ #featured-events-slider { padding-left: 1rem; scroll-padding-left: 1rem; /* Para que el snap funcione con el padding */ } @media (min-width: 640px) { #featured-events-container { margin-left: -1.5rem; margin-right: -1.5rem; } #featured-events-slider { padding-left: 1.5rem; scroll-padding-left: 1.5rem; } } .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } /* Botones de Navegación del Slider de Eventos (Solo Escritorio) */ .slider-nav-btn { display: none; /* Ocultos por defecto en móvil */ position: absolute; top: 50%; /* Se ajusta el centrado vertical para compensar el padding inferior del slider */ transform: translateY(calc(-50% - 0.5rem)); z-index: 10; width: 44px; height: 44px; border-radius: 50%; background-color: rgba(22, 27, 34, 0.7); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid #30363d; color: var(--color-text-primary); cursor: pointer; transition: all 0.2s var(--ease-out-cubic); } .slider-nav-btn:hover { background-color: var(--color-surface); border-color: var(--color-secondary); color: var(--color-secondary); transform: translateY(-50%) scale(1.05); } .slider-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: translateY(-50%); } .slider-nav-btn.left-0 { left: 24px; /* Aumenta el margen para que esté dentro */ } .slider-nav-btn.right-0 { right: 24px; /* Aumenta el margen para que esté dentro */ } @media (min-width: 1024px) { .slider-nav-btn { display: flex; align-items: center; justify-content: center; } } /* Tarjeta de Pasos de Satélites */ .pass-card-event { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; background-color: var(--color-surface); border-radius: 8px; border-left: 3px solid var(--color-secondary); } .pass-card-event .satellite-name { font-weight: 500; color: var(--color-text-primary); } .pass-card-event .pass-time { font-size: 0.85rem; font-family: monospace; color: var(--color-text-secondary); } .pass-card-event .pass-elevation { font-weight: 700; color: var(--color-text-secondary); margin-left: auto; } .pass-card-event.skeleton { height: 60px; background-color: var(--color-surface); animation: pulse-bg 2s infinite; } @keyframes pulse-bg { 50% { background-color: #1a2029; } } /* Tarjeta de Luna (Rediseñada a Glass) */ .moon-card-event { /* Estilo obsoleto, reemplazado por .daily-update-card en el HTML */ } .moon-phase-visual-event { width: 48px; height: 48px; border-radius: 50%; background-color: #f0f0f0; position: relative; overflow: hidden; flex-shrink: 0; box-shadow: 0 0 10px rgba(240, 240, 240, 0.4) inset, 0 0 5px rgba(240, 240, 240, 0.5); } .moon-phase-shadow-event { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background-color: rgba(0, 0, 0, 0.8); /* Sombra semitransparente para vidrio */ } /* Tarjeta de Lanzamientos (Rediseñada a Glass) */ .launch-icon-event { font-size: 2.5rem; color: var(--color-secondary); text-shadow: 0 0 15px var(--color-secondary); width: 40px; /* Ancho fijo para alinear */ text-align: center; flex-shrink: 0; } .launch-card-event { /* Estilo obsoleto, reemplazado por .daily-update-card en el HTML */ } .launch-icon-event { /* Estilo obsoleto */ } /* Botones de Navegación de Eventos */ /* ========================================================================== BOTONES DE NAVEGACIÓN DE EVENTOS (PÍLDORAS) ========================================================================== */ .event-nav-pill { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0.75rem 1rem; border-radius: 9999px; font-weight: 700; font-size: 0.9rem; background-color: var(--color-surface); color: var(--color-text-primary); border: 1px solid #30363d; transition: all 0.2s var(--ease-out-cubic); cursor: pointer; position: relative; /* Añadido */ overflow: hidden; /* Añadido */ } .event-nav-pill:hover { border-color: var(--color-secondary); background-color: rgba(88, 166, 255, 0.1); color: var(--color-secondary); } .event-nav-pill-eclipse-glass { color: var(--color-danger); border-color: rgba(248, 81, 73, 0.5) !important; background-color: rgba(248, 81, 73, 0.05) !important; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 50%); box-shadow: 0 0 15px rgba(248, 81, 73, 0.2); } .event-nav-pill-eclipse-glass:hover { color: #fff !important; border-color: var(--color-danger) !important; background-color: rgba(248, 81, 73, 0.15) !important; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 50%); box-shadow: 0 0 20px rgba(248, 81, 73, 0.3); } .event-nav-pill-special-glass { color: var(--color-secondary) !important; border-color: rgba(88, 166, 255, 0.5) !important; background-color: rgba(88, 166, 255, 0.05) !important; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 50%); box-shadow: 0 0 15px rgba(88, 166, 255, 0.2); } .event-nav-pill-special-glass:hover { color: #fff !important; border-color: var(--color-secondary) !important; background-color: rgba(88, 166, 255, 0.15) !important; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 50%); box-shadow: 0 0 20px rgba(88, 166, 255, 0.3); } /* ========================================================================== ESTILOS ADAPTATIVOS PARA LA BARRA DE NAVEGACIÓN (ESCRITORIO) ========================================================================== */ /* === INICIO: AJUSTE DE CENTRADO PARA PANTALLA DE INICIO EN ESCRITORIO === */ @media (min-width: 1024px) { /* Mantenemos el ajuste para el bloque principal del logo y botones */ #start-screen .text-center { /* La transformación translateX(-110px) se elimina para un centrado correcto */ } /* Centramos la píldora (que es position: absolute) combinando su propio centrado con el ajuste */ #daily-update-pill { /* Se elimina el ajuste (-110px) para centrarla correctamente */ transform: none; /* Eliminado translateX */ } #daily-update-pill:hover { /* Combinamos el hover con la nueva transformación de centrado */ transform: scale(1.03); /* Eliminado translateX */ } } /* === FIN: AJUSTE DE CENTRADO === */ @media (min-width: 1024px) { /* Ajuste del cuerpo para dejar espacio a la barra lateral (con transición) */ body { transition: padding-left 0.4s var(--ease-out-quint); } /* Posiciona los contenedores principales a la derecha de la barra (con transición) */ #app-container, .screen { left: 220px; width: calc(100% - 220px); transition: width 0.4s var(--ease-out-quint), left 0.4s var(--ease-out-quint); } /* Transforma la barra inferior en una barra lateral izquierda más ancha */ #bottom-nav-bar { top: 0; bottom: 0; left: 0; right: auto; width: 220px; height: 100%; flex-direction: column; justify-content: center; align-items: center; padding: 0; gap: 1rem; border-top: none; /* Estilo Unificado con Móvil */ border-right: 1px solid rgba(255, 255, 255, 0.1); /* Borde de vidrio tenue */ background: rgba(10, 11, 14, 2); /* Gris casi negro con tinte azulado muy sutil */ /* Efectos iguales a la versión vertical */ backdrop-filter: blur(10px); /* Un poco más de blur para suavizar el gris */ -webkit-backdrop-filter: blur(10px); box-shadow: none; /* Sin sombra externa para mantener la limpieza */ } /* Oculta la barra lateral cuando la vista de mapa está activa */ body.map-active #bottom-nav-bar { transform: translateX(-100%); } /* Expande el contenido principal cuando la barra se oculta */ body.map-active { } body.map-active #app-container, body.map-active .screen { width: 100%; left: 0; } /* Ajusta el diseño de cada botón de navegación para la barra ancha */ .nav-item { flex-direction: row; justify-content: flex-start; align-items: center; width: 85%; /* No ocupa todo el ancho para un mejor centrado y estética */ padding: 1rem; gap: 1.5rem; border-radius: 16px; /* Curvas más suaves acorde al nuevo diseño */ border: 1px solid transparent; /* Reserva espacio para evitar saltos si se agregan bordes en hover */ transition: all 0.2s var(--ease-out-cubic); } /* Ajusta el tamaño del ícono y el texto */ .nav-item i { font-size: 1.5rem; width: 30px; /* Ancho fijo para alinear el texto */ text-align: center; } .nav-item span { font-size: 1rem; } } /* ========================================================================== ESTILOS PARA LA PANTALLA DE LANZAMIENTOS (LIQUID GLASS) ========================================================================== */ .launch-card { display: flex; align-items: center; /* Alineación horizontal */ gap: 1rem; padding: 1.25rem; /* Estilo Liquid Glass Base */ background: linear-gradient(145deg, rgba(20, 25, 30, 0.658) 0%, rgba(20, 25, 30, 0.3) 100%); /* Borde sutil uniforme */ border: 1px solid rgba(255, 255, 255, 0.12); background-clip: padding-box; /* Sombras para volumen 3D */ box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 30px -5px rgba(0, 0, 0, 0.5); border-radius: 24px; position: relative; overflow: hidden; /* Importante: Sin cursor de mano ni interacción */ cursor: default; } /* Estilo para Lanzamientos Pasados (Verde sutil) */ .launch-card.is-past { border-color: rgba(57, 211, 83, 0.3) !important; background: radial-gradient(circle at 0% 0%, rgba(57, 211, 83, 0.1) 0%, rgba(20, 25, 30, 0.4) 100%) !important; /* Sin sombra brillante externa, mantenemos el look apagado pero teñido */ } /* Estilo para Lanzamientos de Hoy (Azul brillante igual a pases) */ .launch-card.is-today { border: 1px solid rgba(48, 129, 247, 0.3) !important; background: radial-gradient(circle at 50% 30%, rgba(48, 129, 247, 0.25) 0%, rgba(20, 25, 30, 0.6) 100%) !important; background-clip: padding-box; box-shadow: 0 0 35px rgba(48, 129, 247, 0.25), inset 0 0 0 1px rgba(150, 210, 255, 0.5), inset 0 0 20px rgba(48, 129, 247, 0.1) !important; } /* Elementos internos reestructurados */ .launch-card-icon-container { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--color-secondary); } .launch-card.is-past .launch-card-icon-container { color: var(--color-success); background-color: rgba(57, 211, 83, 0.1); border-color: rgba(57, 211, 83, 0.2); } .launch-card-info { flex-grow: 1; min-width: 0; /* Para que el truncate funcione */ display: flex; flex-direction: column; /* Apila título, fecha y estado verticalmente */ gap: 0.25rem; /* Pequeño espacio entre elementos */ } /* Contenedor para el estado (para darle aire arriba) */ .launch-card-status-row { margin-top: 0.25rem; display: flex; } .launch-card-name { font-weight: 700; font-size: 1rem; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .launch-card-date { font-family: monospace; /* 'Space Grotesk' mono style */ font-size: 0.85rem; color: var(--color-text-secondary); margin-top: 0.25rem; } .launch-card-status { flex-shrink: 0; } /* ========================================================================== ESTILOS PARA EL MODAL DE DETALLES DEL ECLIPSE ========================================================================== */ .eclipse-details-card { background-color: var(--color-surface); border: 1px solid #30363d; border-radius: 8px; padding: 1.25rem; margin-bottom: 1rem; } .eclipse-details-header { text-align: center; margin-bottom: 1.5rem; } .eclipse-details-header h3 { font-size: 1rem; font-weight: 500; color: var(--color-text-secondary); margin-bottom: 0.25rem; } .eclipse-details-header p { font-size: 1.5rem; font-weight: 700; color: var(--color-warning); } .eclipse-timeline { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1rem; padding: 0 0.5rem; } .timeline-event { display: flex; flex-direction: column; align-items: center; text-align: center; width: 60px; } .timeline-event.is-hidden { visibility: hidden; } .timeline-event .event-time { font-family: monospace; font-size: 0.85rem; font-weight: 500; } .timeline-event .event-label { font-size: 0.65rem; text-transform: uppercase; color: var(--color-text-secondary); margin-top: 0.25rem; } .timeline-bar-container { height: 10px; width: 100%; background-color: var(--color-surface); border-radius: 5px; margin: 0.5rem 0; position: relative; } .timeline-bar-progress { position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-primary) 100%); border-radius: 5px; } .eclipse-grid-details { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; } .detail-item-box { background-color: var(--color-surface); padding: 1rem; border-radius: 8px; text-align: center; } .detail-item-box .label { font-size: 0.8rem; color: var(--color-text-secondary); margin-bottom: 0.25rem; } .detail-item-box .value { font-size: 1.1rem; font-weight: 700; color: var(--color-text-primary); } .eclipse-visibility-verdict { margin-top: 1.5rem; padding: 1rem; border-radius: 8px; font-weight: 700; text-align: center; } .details-section-title { font-size: 0.8rem; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; padding-bottom: 0.5rem; margin-top: 1.5rem; text-align: center; } .eclipse-details-grid { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.75rem; } .detail-block { background-color: var(--color-surface); border: 1px solid #30363d; border-radius: 8px; padding: 0.75rem 1rem; } .detail-block-title { font-weight: 700; color: var(--color-text-primary); font-size: 0.9rem; } .detail-block-time { font-family: monospace; font-size: 0.8rem; color: var(--color-text-secondary); margin-bottom: 0.5rem; } .detail-block-grid { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; font-size: 0.85rem; } .detail-block-grid div:nth-child(odd) { color: var(--color-text-secondary); } .detail-block-grid div:nth-child(even) { font-weight: 500; text-align: right; } .verdict-visible { background-color: rgba(57, 211, 83, 0.15); color: var(--color-success); } .verdict-partial { background-color: rgba(247, 181, 48, 0.15); color: var(--color-warning); } .verdict-not-visible { background-color: rgba(248, 81, 73, 0.15); color: var(--color-danger); } .launch-card-icon { font-size: 1.75rem; color: var(--color-text-secondary); width: 30px; text-align: center; } .launch-card-name { font-weight: 700; font-size: 1.1rem; } .launch-card-date { font-family: monospace; font-size: 0.9rem; color: var(--color-text-secondary); } .status-tag { font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.75rem; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.05em; } .status-tag.is-go { background-color: rgba(57, 211, 83, 0.15); color: var(--color-success); } .status-tag.is-success { background-color: rgba(88, 166, 255, 0.15); color: var(--color-secondary); } /* ========================================================================== ESTILOS PARA LA PANTALLA DE ECLIPSES ========================================================================== */ .eclipse-section-header { font-size: 1rem; font-weight: 700; color: var(--color-text-primary); padding: 1rem 0.25rem 0.75rem; margin-top: 1.5rem; border-bottom: 1px solid #30363d; } .eclipse-section-header:first-of-type { margin-top: 0; } .eclipse-card { display: flex; flex-direction: column; background-color: rgba(255, 255, 255, 0.05); /* Vidrio blanco muy sutil */ border: 1px solid rgba(255, 255, 255, 0.15); /* Borde sutil */ border-radius: 16px; /* Más redondeado */ transition: all 0.2s var(--ease-out-quint); overflow: hidden; margin-bottom: 0; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); /* Sombra para profundidad */ position: relative; } .eclipse-card:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.3); /* Borde más brillante */ box-shadow: 0 10px 35px rgba(0, 0, 0, 0.35); /* Sombra más profunda */ } .eclipse-card.eclipse-card-solar { cursor: pointer; } .eclipse-card.eclipse-card-solar:hover { border-color: var(--color-warning); /* transform y box-shadow son heredados del .eclipse-card:hover base */ } .eclipse-card.eclipse-card-visible { border-color: rgba(88, 166, 255, 0.5) !important; /* Borde de color sutil */ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(88, 166, 255, 0.3) !important; /* Sombra base + Brillo azul */ background-image: radial-gradient(at top left, rgba(88, 166, 255, 0.15), transparent 70%); background-color: rgba(255, 255, 255, 0.05); /* Asegura el fondo de vidrio */ } .eclipse-card-icon { font-size: 1.75rem; color: var(--color-warning); margin-top: 0.25rem; } .eclipse-card-info { flex-grow: 1; display: flex; gap: 1rem; padding: 1rem; align-items: flex-start; } .eclipse-card-verdict { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1.25rem; background-color: transparent; /* Sin fondo, es parte de la tarjeta de vidrio */ border-top: 1px solid rgba(255, 255, 255, 0.15); /* Borde de vidrio sutil */ font-weight: 700; font-size: 0.85rem; transition: color 0.2s ease, border-color 0.2s ease; color: var(--color-text-primary); } .verdict-left { display: flex; align-items: center; gap: 0.75rem; } .eclipse-verdict-percentage { font-size: 0.9rem; font-weight: 700; } .eclipse-card-verdict i { font-size: 1rem; } .eclipse-card-verdict.verdict-visible { background-image: linear-gradient(to right, rgba(57, 211, 83, 0.15), transparent 70%); border-top-color: var(--color-success); color: var(--color-success); } .eclipse-card-verdict.verdict-partial { background-image: linear-gradient(to right, rgba(247, 181, 48, 0.15), transparent 70%); border-top-color: var(--color-warning); color: var(--color-warning); } .eclipse-card-verdict.verdict-not-visible { background-image: linear-gradient(to right, rgba(248, 81, 73, 0.15), transparent 70%); border-top-color: var(--color-danger); color: var(--color-danger); } .eclipse-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .eclipse-card-date { font-weight: 700; } .eclipse-card-tag { font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.05em; background-color: var(--color-surface); color: var(--color-text-secondary); border: 1px solid #30363d; } .eclipse-card-desc { font-size: 0.9rem; color: var(--color-text-primary); line-height: 1.5; } .eclipse-card-visibility { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--color-text-secondary); margin-top: 0.75rem; } #eclipse-details-screen .overflow-y-auto { padding-bottom: calc(60px + 1.5rem + env(safe-area-inset-bottom)); } .eclipse-verdict-card { border: 1px solid #30363d; border-radius: 12px; padding: 1.25rem; text-align: center; font-weight: 700; } .eclipse-verdict-card .verdict-icon { font-size: 2.5rem; margin-bottom: 0.75rem; } .eclipse-verdict-card .verdict-text { font-size: 1.25rem; } .eclipse-verdict-card .verdict-subtext { font-size: 0.9rem; color: var(--color-text-secondary); font-weight: 500; margin-top: 0.25rem; } .eclipse-summary-card { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; background-color: var(--color-surface); border-radius: 12px; padding: 1.25rem; } .summary-item { text-align: center; } .summary-item .label { font-size: 0.8rem; color: var(--color-text-secondary); margin-bottom: 0.25rem; } .summary-item .value { font-size: 1.5rem; font-weight: 700; color: var(--color-text-primary); } .eclipse-timeline-card { background-color: var(--color-surface); border-radius: 12px; padding: 1.25rem; } .timeline-item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid #1a2029; } .timeline-item:last-child { border-bottom: none; } .timeline-item .icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; } .timeline-item .time-info .label { font-weight: 700; } .timeline-item .time-info .time { font-family: monospace; color: var(--color-text-secondary); font-size: 0.9rem;} .timeline-item .elevation-info { text-align: right; margin-left: auto; } .timeline-item .elevation-info .value { font-weight: 700; font-size: 1.1rem;} .timeline-item .elevation-info .commentary { color: var(--color-text-secondary); font-size: 0.8rem; } .timeline-item .time-info { flex-shrink: 0; } .timeline-item .time-info .time { font-weight: 700; font-size: 1.1rem; color: var(--color-text-primary); } .timeline-item .time-info .label { font-weight: 500; font-size: 0.9rem; color: var(--color-text-secondary); } /* ========================================================================== SECCIÓN APRENDER (FAQ) - ESTILO LIQUID GLASS ========================================================================== */ .faq-category h3 { font-size: 0.9rem; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; padding: 1rem 0.5rem 0.5rem; margin-bottom: 0.25rem; border-bottom: none; } .faq-item { /* Estilo Liquid Glass (Igual a menu-list-item) */ background: linear-gradient(145deg, rgba(20, 25, 30, 0.658) 0%, rgba(20, 25, 30, 0.3) 100%); border: 1px solid rgba(255, 255, 255, 0.12); background-clip: padding-box; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 30px -5px rgba(0, 0, 0, 0.5); border-radius: 24px; overflow: hidden; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } .faq-item.open { border-color: rgba(88, 166, 255, 0.4); background: linear-gradient(145deg, rgba(20, 25, 30, 0.8) 0%, rgba(20, 25, 30, 0.5) 100%); box-shadow: 0 10px 35px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(88, 166, 255, 0.05); } .faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1.25rem; text-align: left; font-weight: 700; font-size: 1.05rem; color: var(--color-text-primary); background: none; border: none; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; } .faq-question span { padding-right: 1rem; } .faq-question i { color: var(--color-text-secondary); transition: transform 0.4s var(--ease-out-quint), color 0.3s ease; flex-shrink: 0; opacity: 0.5; } .faq-item.open .faq-question i { transform: rotate(180deg); color: var(--color-secondary); opacity: 1; } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease-out-quint); } .faq-answer p { padding: 0 1.25rem 1.25rem; color: var(--color-text-secondary); /* Gris claro */ line-height: 1.7; font-size: 0.95rem; } .faq-answer ul, .faq-answer ol { padding: 0 1.25rem 1.25rem 2rem; /* Padding izquierdo aumentado para viñetas */ color: var(--color-text-secondary); line-height: 1.7; font-size: 0.95rem; } /* Estilos específicos para tablas dentro de FAQ */ .faq-answer table { width: calc(100% - 2.5rem); /* Ajustar ancho considerando padding */ margin: 0 1.25rem 1.25rem; border-collapse: separate; border-spacing: 0; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); } .faq-answer th, .faq-answer td { border: 1px solid rgba(255, 255, 255, 0.05); padding: 0.75rem; } .faq-answer th { background-color: rgba(255, 255, 255, 0.05); color: var(--color-text-primary); font-weight: 700; } .faq-answer ul, .faq-answer ol { padding: 0 1.25rem 1.25rem; color: var(--color-text-secondary); line-height: 1.6; } /* ========================================================================== ESTILOS PARA REALIDAD AUMENTADA (AR) ========================================================================== */ #ar-container { position: fixed; inset: 0; background-color: #000; z-index: 2000; /* Por encima de todo */ } #ar-video { width: 100%; height: 100%; object-fit: cover; /* Cubre toda la pantalla sin distorsionar */ } #ar-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; } .ar-logo { position: absolute; /* Centrado vertical exacto respecto al botón: margen + safe-area + mitad de altura del botón (24px) */ /* CAMBIO: Usamos var(--safe-top) */ top: calc(0.5rem + var(--safe-top) + 24px); left: 50%; transform: translate(-50%, -50%); z-index: 2001; font-size: 1.5rem; font-weight: 700; color: white; letter-spacing: -0.025em; /* Corresponde a 'tracking-tight' */ text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); pointer-events: none; } #ar-back-btn { /* CAMBIO: Usamos var(--safe-top) */ top: calc(0.5rem + var(--safe-top)) !important; } /* --- INICIO: Estilos para el modo "Cerca" en la vista de paso --- */ #add-pass-event-btn.active { background-color: var(--color-primary); color: white; border-color: var(--color-primary); box-shadow: 0 0 15px rgba(48, 129, 247, 0.3); } .pass-view-nearby-circle { stroke: var(--color-secondary); stroke-opacity: 0.7; stroke-dasharray: 4, 8; animation: dash-flow 25s linear infinite; } /* --- FIN: Estilos para el modo "Cerca" en la vista de paso --- */ /* --- INICIO: Estilos para info de satélite en modal de pasos (Context Card) --- */ .passes-context-card { display: flex; flex-direction: column; /* Estructura vertical */ align-items: center; /* Centra el botón horizontalmente */ gap: 0.75rem; /* Espacio entre info y botón */ padding: 1.25rem; margin: 0 1rem 1rem; /* Estilo Liquid Glass Premium */ background: linear-gradient(145deg, rgba(20, 25, 30, 0.85) 0%, rgba(20, 25, 30, 0.5) 100%); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 24px; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 8px 30px rgba(0, 0, 0, 0.4); position: relative; overflow: hidden; } /* Efecto de luz superior */ .passes-context-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); opacity: 0.5; } .context-icon { width: 38px; height: 38px; border-radius: 50%; background-color: rgba(88, 166, 255, 0.1); border: 1px solid rgba(88, 166, 255, 0.2); color: var(--color-secondary); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; box-shadow: 0 0 15px rgba(88, 166, 255, 0.1); } .change-sat-pill-btn { width: auto; /* Ancho automático ajustado al contenido */ padding: 0.35rem 1.5rem; /* Píldora chiquita y ancha */ min-width: 120px; /* Ancho mínimo para que no quede ridículo */ /* Estilo Glass Sutil y Delicado */ background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 9999px; color: rgba(255, 255, 255, 0.9); font-weight: 500; font-size: 0.8rem; /* Texto pequeño */ cursor: pointer; transition: all 0.2s var(--ease-out-cubic); display: flex; align-items: center; justify-content: center; /* Centrado */ gap: 0.5rem; } .change-sat-pill-btn:hover { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); color: white; transform: translateY(-1px); } /* Icono pequeño de flechas */ .change-sat-pill-btn::after { content: '\f021'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.9em; opacity: 0.8; } /* --- FIN: Estilos para info de satélite en modal de pasos --- */ /* ========================================================================== FILTRO DE AÑO PARA ECLIPSES (MODIFICADO) ========================================================================== */ #eclipses-screen .satellites-header { /* Ajusta el padding del header para que la barra de filtros quepa bien */ padding-bottom: 0.75rem; /* 12px */ } .year-filter-container { width: 100%; overflow-x: auto; white-space: nowrap; margin-top: 1rem; /* 16px, AUMENTADO */ -ms-overflow-style: none; /* IE y Edge */ scrollbar-width: none; /* Firefox */ } .year-filter-container::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } @media (min-width: 640px) { .year-filter-container { /* Padding eliminado para que se alinee con el scroller padre */ } } .year-filter-pills { display: flex; gap: 0.75rem; padding-bottom: 4px; /* Pequeño padding para que la sombra no se corte */ } .year-filter-pill { display: inline-block; flex-shrink: 0; padding: 0.5rem 1rem; border-radius: 9999px; font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: all 0.2s var(--ease-out-cubic); /* Estilo "Glass" inactivo */ background-color: rgba(255, 255, 255, 0.05); color: var(--color-text-primary); border: 1px solid rgba(255, 255, 255, 0.15); } .year-filter-pill:hover { border-color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.1); } .year-filter-pill.active { background-color: var(--color-primary); color: white; border-color: var(--color-primary); box-shadow: 0 0 15px rgba(48, 129, 247, 0.3); } /* ========================================================================== CAMPO DE ESTRELLAS PANTALLA INICIO ========================================================================== */ #star-field { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; z-index: 0; /* Detrás del contenido de start-screen */ } .star-ring { position: absolute; border-radius: 50%; animation: rotate-stars linear infinite; /* OPTIMIZACIÓN: will-change y 3d transform para forzar capa de GPU */ will-change: transform; transform: translateZ(0); } .star { position: absolute; background-color: white; border-radius: 50%; opacity: 0.8; /* OPTIMIZACIÓN: Evita sub-pixel rendering costoso en puntos pequeños */ transform: translateZ(0); box-shadow: none !important; /* Aseguramos que no haya sombras costosas */ } @keyframes rotate-stars { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* OPTIMIZACIÓN: Avisamos al navegador que esto va a cambiar */ .star-ring { will-change: transform; /* Usamos 3D transform para forzar aceleración de hardware */ transform: translateZ(0); } /* ========================================================================== PLACEHOLDER PARA CARGA DE PÍLDORA DE INICIO ========================================================================== */ #daily-update-pill.loading-placeholder { /* Mantiene el layout y la altura de la píldora */ background: var(--color-surface); /* Un fondo base sutil */ border-color: #30363d; box-shadow: none; cursor: default; } #daily-update-pill.loading-placeholder:hover { /* Evita el efecto hover mientras carga */ transform: none; /* Eliminado translateX */ border-color: #30363d; } #daily-update-pill.loading-placeholder > * { /* Oculta el contenido (span "Hoy" y el píldora interna) */ opacity: 0; transition: none; } /* ========================================================================== ABRIGO DE RESPLANDOR RADIAL PARA TARJETAS ========================================================================== */ /* El contenido interno de estas tarjetas (texto, iconos) ya está posicionado sobre el fondo por ser hijos de un flex/grid container. Este pseudo-elemento con z-index: 0 se renderizará entre el fondo de la tarjeta y el contenido. */ .pass-card::before, .satellite-entry::before, .moon-day-card::before, .eclipse-card::before, .launch-card::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; border-radius: inherit; /* Hereda el redondeo para evitar esquinas cuadradas */ /* El centro del radial está 150px a la izquierda del borde (left: 0) y centrado verticalmente (50%). El resplandor es azul (color-secondary) con 10% de opacidad. Se degrada a transparente al 70% del radio del CÍRCULO. */ background: radial-gradient(ellipse 175% 90% at -150px 50%, rgba(42, 134, 255, 0.192) 0%, transparent 70% ); z-index: 0; /* Se sitúa entre el fondo de la tarjeta y su contenido */ pointer-events: none; opacity: 0.7; /* Sutil por defecto */ transition: opacity 0.3s var(--ease-out-quint); } /* --- INICIO: Ajuste para modo horizontal (menos estirado) --- */ @media (orientation: landscape) { .pass-card::before, .satellite-entry::before, .moon-day-card::before, .eclipse-card::before, .launch-card::before { /* Reducimos el ancho horizontal del elipse al 100% para que no llegue tan lejos */ background: radial-gradient(ellipse 100% 120% at -150px 50%, rgba(42, 134, 255, 0.192) 0%, transparent 70% ); } } /* --- FIN: Ajuste para modo horizontal --- */ /* --- INICIO: Ocultar degradado azul genérico en tarjetas con color propio --- */ .pass-card.pass-card-today::before, .pass-card.pass-card-starlink::before, .pass-card.pass-card-5star::before, /* <--- AGREGADO: Ocultamos el azul en las 5 estrellas también */ .pass-card.previous-pass::before, .launch-card.is-today::before, .launch-card.is-past::before, .eclipse-card.eclipse-card-visible::before, .moon-day-card.is-today::before, .moon-day-card.is-full-moon::before { display: none; } /* --- FIN: Ocultar degradado azul genérico --- */ /* Intensifica el resplandor en hover, pero solo si la tarjeta es clickeable */ .pass-card-clickable:hover::before, .satellite-entry:hover::before, .moon-day-card:hover::before, .eclipse-card.eclipse-card-solar:hover::before, /* Solo en eclipses clickeables */ .launch-card:hover::before { opacity: 1.0; } /* Las tarjetas que ya tienen un fondo radial (ej. is-today, is-past) usan `background-image`. El `z-index: 0` de este resplandor lo pondrá *detrás* de ese background-image, lo cual es perfecto. */ /* --- INICIO: Estilos para Contenedores de Anuncios (Optimizado) --- */ .ad-card-container { width: 100%; /* ESTADO INICIAL: 1px físico para detección, sin márgenes para evitar huecos */ height: 1px; min-height: 0; overflow: hidden; opacity: 0; /* IMPORTANTE: Forzamos reset de márgenes para anular el espacio automático de la lista */ margin: 0 !important; padding: 0 !important; border: none !important; /* Transición suave de altura y márgenes */ transition: height 0.5s ease-out, opacity 0.5s ease-in, margin 0.3s ease, padding 0.3s ease; } /* ESTADO ACTIVO: Solo se aplica si Google llenó el anuncio */ .ad-card-container.ad-loaded { /* Estilo Liquid Glass */ background: linear-gradient(145deg, rgba(20, 25, 30, 0.658) 0%, rgba(20, 25, 30, 0.3) 100%); border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 24px; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15); display: flex; justify-content: center; align-items: center; /* Restauramos dimensiones */ height: auto; /* Dejamos que crezca según el anuncio */ min-height: 100px; opacity: 1; /* Restauramos márgenes ARRIBA y ABAJO para que no se pegue */ margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; padding: 1rem !important; overflow: hidden; /* FIX: Corta cualquier contenido que se escape a la derecha */ } /* Ajuste para que el anuncio ocupe el ancho disponible */ .ad-card-container ins.adsbygoogle { display: block !important; width: 100%; max-width: 100%; /* Asegura límites dentro del padding */ overflow: hidden; /* Recorta excedentes internos */ border-radius: 12px; /* Suaviza bordes del anuncio */ } /* --- FIN: Estilos para Contenedores de Anuncios --- */ /* --- INICIO: Estilos Anuncio Footer Mapa (Sticky) --- */ .map-ad-container { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 490; /* Debajo de controles (500), sobre mapa */ height: 0; overflow: hidden; opacity: 0; /* Transición suave para cuando aparece */ transition: height 0.4s var(--ease-out-quint), opacity 0.4s ease, padding 0.4s ease; display: flex; justify-content: center; align-items: center; } /* Estado cuando carga (Estilo Tarjeta Glass) */ .map-ad-container.ad-loaded { height: auto; opacity: 1; /* OPTIMIZACIÓN: Padding reducido a 4px para que quede bien ajustado al anuncio de 50px */ padding: 4px 0 calc(4px + env(safe-area-inset-bottom)); /* Estilo Liquid Glass (Igual a las otras tarjetas) */ background: linear-gradient(180deg, rgba(20, 25, 30, 0.85) 0%, rgba(20, 25, 30, 0.95) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 -5px 20px rgba(0,0,0,0.3); } /* --- FIN: Estilos Anuncio Footer Mapa --- */ /* --- INICIO: Estilos para el puntero en Modo Brújula --- */ #radar-pointer.is-compass-mode, #large-radar-pointer.is-compass-mode { width: 10px !important; /* Definimos ancho real */ height: 12px !important; /* Un poco más chico y estilizado */ background-color: var(--color-secondary) !important; /* Eliminamos el hack de bordes anterior */ border: none !important; /* Forma de cuña / flecha de navegación (cóncava en la base) */ clip-path: polygon(50% 0%, 0% 100%, 50% 75%, 100% 100%); border-radius: 0 !important; box-shadow: none !important; filter: drop-shadow(0 0 4px var(--color-secondary)); /* Glow para la flecha */ } /* --- FIN: Estilo para el puntero en Modo Brújula --- */ /* --- INICIO: Tutorial de Radar (Apunta hacia arriba) --- */ .radar-tutorial-overlay { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.6); /* Un poco menos oscuro (60%) */ backdrop-filter: blur(10px); /* Blur más intenso */ -webkit-backdrop-filter: blur(10px); border-radius: 50%; /* Máscara para limpiar el borde y evitar bordes pixelados en el desenfoque */ -webkit-mask-image: radial-gradient(circle, white 98%, transparent 100%); mask-image: radial-gradient(circle, white 98%, transparent 100%); display: flex; align-items: center; justify-content: center; z-index: 20; /* Por encima del puntero y canvas */ opacity: 0; pointer-events: none; transition: opacity 0.5s ease-in-out; } .radar-tutorial-overlay.is-visible { opacity: 1; } .radar-tutorial-overlay span { color: var(--color-text-primary); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; text-align: center; padding: 0 1rem; text-shadow: 0 2px 4px rgba(0,0,0,0.8); animation: pulse-opacity 2s infinite; } @keyframes pulse-opacity { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } /* --- FIN: Tutorial de Radar --- */ /* ========================================================================== ESTILOS PARA PANTALLA DE DETALLE DE LUNA ========================================================================== */ /* Wrapper padre: Contiene el gráfico y las etiquetas externas */ .moon-trajectory-wrapper { position: relative; width: 100%; max-width: 320px; height: 160px; /* Aumentamos margen superior a 2.5rem para separar del título */ margin: 2.5rem auto 1rem; } /* Contenedor interno: Solo el gráfico recortado */ .moon-trajectory-container { width: 100%; height: 100%; position: relative; display: flex; justify-content: center; align-items: flex-end; border-top-left-radius: 160px; border-top-right-radius: 160px; /* Recorte estricto abajo (0px). Reduje los laterales a -30px para evitar scroll horizontal */ clip-path: inset(-200px -30px 0px -30px); overflow: visible; z-index: 1; } /* Fondo de color (Día/Noche) */ .moon-atmosphere-bg { position: absolute; inset: 0; border-top-left-radius: 160px; border-top-right-radius: 160px; transition: background 0.1s linear; z-index: 0; /* Al fondo de todo */ } /* Nueva capa de niebla inferior para ocultar la luna suavemente al bajar */ .moon-bottom-fog { position: absolute; bottom: 0; /* Extendemos hacia los costados (valores negativos) para que llegue hasta el borde del recorte */ left: -50px; right: -50px; height: 30px; /* Mucho más bajito y sutil */ background: linear-gradient(to top, #000000 0%, transparent 100%); z-index: 15; /* Encima de la luna (5) y el arco (1), debajo del texto (20) */ pointer-events: none; } /* La línea del arco (Bóveda celeste) */ /* La línea del arco (Bóveda celeste) */ .sky-arc-track { width: 100%; height: 100%; border: 2px dashed rgba(255, 255, 255, 0.15); border-bottom: none; border-radius: 160px 160px 0 0; /* Radio igual a la altura */ position: absolute; bottom: 0; left: 0; box-sizing: border-box; /* CAPA 1: Fondo absoluto */ z-index: 1; } /* Etiquetas de horizonte */ .horizon-label { position: absolute; bottom: -25px; font-size: 0.75rem; color: var(--color-text-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; /* CAPA 4: Tope absoluto (encima de la niebla) */ z-index: 20; } .horizon-label.left { left: 0; } .horizon-label.right { right: 0; } /* El ícono de la luna que se mueve */ .moving-moon-icon { position: absolute; width: 40px; height: 40px; /* Centramos el punto de pivote para que el centro del icono siga la línea */ transform: translate(-50%, 50%); filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.3)); bottom: 0; left: 0; /* Transición suave para el movimiento */ transition: bottom 0.1s linear, left 0.1s linear; /* CAPA 2: Por encima del arco, pero por debajo de la atmósfera */ z-index: 5; /* SIN MÁSCARA: Para que se vea completa y con el brillo perfecto */ } /* Contenedor del slider y hora */ .moon-slider-wrapper { width: 100%; max-width: 320px; margin: 0 auto 2rem; display: flex; flex-direction: column; gap: 1rem; /* Un poco más de aire */ } .moon-slider-time { text-align: center; font-family: 'Space Grotesk', monospace; font-size: 1.5rem; /* Un pelín más grande */ font-weight: 700; color: var(--color-secondary); text-shadow: 0 0 15px rgba(88, 166, 255, 0.4); } /* Estilos del Slider Lunar (Igual al principal) */ #moon-sim-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: rgba(255, 255, 255, 0.1); /* Fondo sutil */ outline: none; border-radius: 4px; } #moon-sim-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; /* Tamaño generoso para el dedo */ height: 24px; background: var(--color-secondary); cursor: pointer; border-radius: 50%; border: 3px solid var(--color-background); /* Crea el efecto de 'anillo' */ box-shadow: 0 0 15px 2px rgba(88, 166, 255, 0.3); /* El brillo neon */ transition: transform 0.1s ease; } #moon-sim-slider::-webkit-slider-thumb:active { transform: scale(1.1); background: var(--color-primary); box-shadow: 0 0 20px 4px rgba(48, 129, 247, 0.5); } /* Estilos reutilizados para texto */ .moon-hero-date { font-size: 0.9rem; font-weight: 500; color: var(--color-text-secondary); text-align: center; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; order: -2; } .moon-hero-phase { font-size: 1.5rem; font-weight: 700; color: var(--color-text-primary); text-align: center; margin-bottom: 0; line-height: 1.1; text-shadow: 0 0 20px rgba(255,255,255,0.1); order: -1; } .moon-stats-panel { width: 100%; background: linear-gradient(165deg, rgba(20, 25, 30, 0.85) 0%, rgba(20, 25, 30, 0.6) 100%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 24px; padding: 0; /* Quitamos padding general para manejarlo por secciones */ display: flex; flex-direction: column; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.5); margin-bottom: 2rem; overflow: hidden; } /* Sección Superior: Iluminación y Elevación (Grandes) */ .moon-stats-primary { display: grid; grid-template-columns: 1fr 1fr; padding: 1.5rem 1.5rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .moon-big-stat { display: flex; flex-direction: column; gap: 0.25rem; } .moon-big-stat.align-right { align-items: flex-end; text-align: right; } .moon-big-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-secondary); display: flex; align-items: center; gap: 0.5rem; } .moon-big-value { font-size: 1.75rem; font-weight: 700; color: var(--color-text-primary); font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.03em; line-height: 1; } /* Sección Inferior: Salida, Distancia, Puesta */ .moon-stats-secondary { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 1rem 0.5rem; background-color: rgba(0, 0, 0, 0.2); /* Fondo ligeramente más oscuro */ } .moon-compact-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.25rem; padding: 0 0.25rem; border-right: 1px solid rgba(255, 255, 255, 0.05); } .moon-compact-stat:last-child { border-right: none; } .moon-compact-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); opacity: 0.8; } .moon-compact-value { font-size: 0.95rem; font-weight: 600; color: var(--color-text-primary); white-space: nowrap; } .moon-stat-icon { color: var(--color-secondary); font-size: 0.85rem; } /* --- CORRECCIÓN DEFINITIVA: Sincronización Slider y Anti-Lag --- */ /* 1. MOVIMIENTO SINCRONIZADO: Tanto el marcador como la etiqueta deben tener EXACTAMENTE la misma transición de 'transform'. Usamos 0.1s linear para que sea fluido pero pegado al dedo. */ body.is-timeline-scrubbing .satellite-marker, body.is-timeline-scrubbing .satellite-label { transition: transform 0.1s linear !important; /* Forzamos que SOLO se anime la posición, nada más */ transition-property: transform !important; } /* 2. APARICIÓN INSTANTÁNEA (Anti-Vuelo): Matamos la transición de opacidad. Esto evita que la etiqueta "vuele" desde la esquina superior izquierda cuando aparece por primera vez. Simplemente aparece en su lugar correcto instantáneamente. */ body.is-timeline-scrubbing .satellite-marker-wrapper, body.is-timeline-scrubbing .satellite-triangle-icon, body.is-timeline-scrubbing .satellite-marker-wrapper::after, body.is-timeline-scrubbing .satellite-label, /* Aplicado al contenedor de la etiqueta también */ body.is-timeline-scrubbing .satellite-label span, body.is-timeline-scrubbing .satellite-label i { transition: none !important; animation: none !important; opacity: 1; /* Asegura visibilidad inmediata si la lógica JS lo permite */ } /* 3. Ocultamiento instantáneo para elementos no visibles */ body.is-timeline-scrubbing .is-not-visible { transition: none !important; } /* --- SISTEMA ADAPTATIVO DE VELOCIDAD Y ESTABILIDAD --- */ /* 1. ESTADO BASE (Normal y Gris): Animación Suave de Posición Aplicamos la animación de movimiento a todo, INCLUSO si está en gris. */ .satellite-marker, .satellite-label, .satellite-marker.is-not-visible, .satellite-label.is-not-visible { transition: transform 0.25s var(--ease-out-cubic) !important; will-change: transform; } /* 2. ESTADO VELOCIDAD ALTA (Rápido): Sin animación Si mueves el slider rápido, matamos TODAS las animaciones, incluyendo el resplandor. */ body.is-fast-velocity .satellite-marker, body.is-fast-velocity .satellite-label, body.is-fast-velocity .satellite-marker.is-not-visible, body.is-fast-velocity .satellite-label.is-not-visible, body.is-fast-velocity .satellite-marker-wrapper::after, /* <--- AGREGADO: Congela el resplandor */ body.is-fast-velocity .satellite-triangle-icon { /* <--- AGREGADO: Congela el icono */ transition: none !important; } /* 3. COSMÉTICA INSTANTÁNEA: Anti-Flash Amarillo Forzamos cambios instantáneos SOLO en elementos que parpadean color (etiquetas, iconos). **IMPORTANTE:** Sacamos 'satellite-marker-wrapper::after' de acá para que pueda animar su tamaño (width/height) suavemente en velocidad lenta. */ .satellite-marker-wrapper, .satellite-triangle-icon, /* .satellite-marker-wrapper::after, <--- ELIMINADO DE ACÁ para permitir su animación suave */ .satellite-label span, .satellite-label i, .satellite-label.is-not-visible { transition-property: transform !important; } /* Clase utilitaria general */ .no-transition { transition: none !important; } /* Reflejo lateral dorado para tarjetas de 5 estrellas y Starlink */ .pass-card.pass-card-5star::before, .pass-card.pass-card-starlink::before { display: block; /* Asegura que se muestre */ background: radial-gradient(ellipse 175% 90% at -150px 50%, rgba(247, 181, 48, 0.192) 0%, /* Color dorado con la misma opacidad que el azul */ transparent 70% ); } /* Ajuste para modo horizontal (Landscape) igual que el original */ @media (orientation: landscape) { .pass-card.pass-card-5star::before, .pass-card.pass-card-starlink::before { background: radial-gradient(ellipse 100% 120% at -150px 50%, rgba(247, 181, 48, 0.192) 0%, transparent 70% ); } } /* === AJUSTES (Ahora más simples gracias al HTML fluido) === */ /* Nombre del Satélite */ .pass-card .flex-grow span.text-base { font-size: 1rem !important; /* 16px base, se achicará solo */ } /* Hora del Paso */ .pass-card .flex-grow span.text-sm { font-size: 0.875rem !important; /* 14px base */ } /* Valor de Elevación */ .pass-card .text-center .text-lg { font-size: 1.125rem !important; /* 18px base */ } /* ========================================================================== REDISEÑO PANTALLA DE EVENTOS (DASHBOARD) ========================================================================== */ /* --- TARJETA HERO DE LUNA --- */ .event-hero-card { position: relative; border-radius: 24px; overflow: hidden; padding: 1.5rem; /* Fondo base oscuro */ background-color: var(--color-surface); border: 1px solid rgba(255, 255, 255, 0.1); transition: transform 0.2s var(--ease-out-cubic); } .moon-hero { /* Degradado nocturno profundo */ background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1); cursor: pointer; } .moon-hero:hover { transform: scale(1.02); border-color: rgba(255, 255, 255, 0.2); } .moon-hero-content { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1; } .moon-hero-text { flex: 1; padding-right: 1rem; } .moon-hero-visual { flex-shrink: 0; } .moon-phase-visual-event-large { width: 100px; height: 100px; /* El filtro drop-shadow crea el resplandor de la luna */ filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.15)); } .moon-phase-visual-event-large svg { width: 100%; height: 100%; display: block; } /* --- BOTONES DE NAVEGACIÓN RÁPIDA --- */ .event-quick-nav { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 20px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; transition: all 0.2s ease; } .event-quick-nav:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-2px); } .eclipse-nav:hover { border-color: var(--color-danger); box-shadow: 0 5px 15px rgba(248, 81, 73, 0.15); } .special-nav:hover { border-color: var(--color-secondary); box-shadow: 0 5px 15px rgba(88, 166, 255, 0.15); } .nav-icon-container { flex-shrink: 0; /* FIX: Evita que el círculo se aplaste en pantallas chicas */ width: 36px; height: 36px; border-radius: 50%; /* FIX: Círculo perfecto */ background: rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } /* Eclipses: Rojo Intenso */ .eclipse-nav .nav-icon-container { color: var(--color-danger); background-color: rgba(248, 81, 73, 0.55); /* Rojo mucho más sólido */ box-shadow: 0 0 25px rgba(248, 81, 73, 0.7); /* Resplandor fuerte */ border: none; } /* Especiales: Únicamente la estrella (Sin contenedor visible) */ .special-nav .nav-icon-container { color: var(--color-secondary); background: none; /* Sin fondo */ box-shadow: none; /* Sin la sombra que hacía el círculo/cuadrado */ border: none; /* Hacemos que la estrella brille por sí sola */ text-shadow: 0 0 15px rgba(88, 166, 255, 0.8); } .nav-label { font-weight: 700; font-size: 0.95rem; color: var(--color-text-primary); flex-grow: 1; text-align: left; } .nav-arrow { color: var(--color-text-secondary); font-size: 0.8rem; opacity: 0.5; } /* --- TARJETA DE LANZAMIENTO HERO --- */ .event-launch-card { display: flex; align-items: center; gap: 1rem; width: 100%; padding: 1.25rem; border-radius: 24px; /* Estilo Glass */ background: linear-gradient(145deg, rgba(20, 25, 30, 0.65) 0%, rgba(20, 25, 30, 0.3) 100%); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 8px 25px rgba(0,0,0,0.3); cursor: pointer; transition: all 0.2s ease; margin-bottom: 1rem; } .event-launch-card:hover { transform: translateY(-2px); border-color: var(--color-secondary); } /* Ajustes para el título de sección en esta pantalla */ #events-screen .event-section-title { margin-bottom: 0.75rem; padding-left: 0.25rem; opacity: 0.8; } /* ========================================================================== ESTILOS PARA LA GUÍA DE USO ========================================================================== */ .guide-card { /* Estilo Liquid Glass */ background: linear-gradient(145deg, rgba(20, 25, 30, 0.658) 0%, rgba(20, 25, 30, 0.3) 100%); border: 1px solid rgba(255, 255, 255, 0.12); background-clip: padding-box; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 30px -5px rgba(0, 0, 0, 0.5); border-radius: 24px; padding: 1.5rem; overflow: hidden; } .guide-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--color-secondary); margin-bottom: 1rem; display: flex; align-items: center; /* Brillo sutil en el título */ text-shadow: 0 0 15px rgba(88, 166, 255, 0.3); } .guide-card p { color: var(--color-text-secondary); line-height: 1.6; margin-bottom: 0.75rem; font-size: 0.95rem; } .guide-card p:last-child { margin-bottom: 0; } .guide-card ul, .guide-card ol { padding-left: 1.5rem; margin-bottom: 1rem; color: var(--color-text-secondary); } .guide-card li { margin-bottom: 0.5rem; font-size: 0.95rem; line-height: 1.5; } .guide-card ul { list-style-type: disc; } .guide-card ol { list-style-type: decimal; } .guide-card strong { color: var(--color-text-primary); } .guide-card code { background-color: rgba(255, 255, 255, 0.1); padding: 0.2rem 0.4rem; border-radius: 4px; font-family: monospace; color: var(--color-warning); font-size: 0.9em; } /* ========================================================================== ESTILOS PARA CONTACTO (LIQUID GLASS) ========================================================================== */ .contact-card { /* Estilo Liquid Glass (Consistente con el resto de la app) */ background: linear-gradient(145deg, rgba(20, 25, 30, 0.658) 0%, rgba(20, 25, 30, 0.3) 100%); border: 1px solid rgba(255, 255, 255, 0.12); background-clip: padding-box; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 30px -5px rgba(0, 0, 0, 0.5); border-radius: 24px; padding: 1.5rem; overflow: hidden; } /* ========================================================================== ESTILOS PARA SOBRE NOSOTROS (LIQUID GLASS) ========================================================================== */ .about-card { /* Estilo Liquid Glass (Consistente con el resto) */ background: linear-gradient(145deg, rgba(20, 25, 30, 0.658) 0%, rgba(20, 25, 30, 0.3) 100%); border: 1px solid rgba(255, 255, 255, 0.12); background-clip: padding-box; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 30px -5px rgba(0, 0, 0, 0.5); border-radius: 24px; padding: 1.5rem; overflow: hidden; } #orbit-3d-screen { background-color: #000; overflow: hidden; } #orbit-3d-container canvas { display: block; outline: none; } #orbit-3d-screen { background-color: #000; overflow: hidden; } #orbit-3d-container canvas { display: block; outline: none; } /* ========================================================================== ESTILOS PANTALLA JUEGO (REDESIGN) ========================================================================== */ /* Efecto de brillo en texto */ .text-shadow-glow { text-shadow: 0 0 15px rgba(88, 166, 255, 0.4); } /* --- ESCÁNER DE RADAR CENTRAL --- */ .game-scanner-container { position: relative; width: 240px; height: 240px; display: flex; align-items: center; justify-content: center; } /* Anillos concéntricos animados */ .scanner-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(88, 166, 255, 0.1); box-shadow: 0 0 15px rgba(88, 166, 255, 0.05); } .scanner-ring.ring-1 { width: 100%; height: 100%; animation: scanner-pulse 4s infinite ease-out; border-color: rgba(88, 166, 255, 0.05); } .scanner-ring.ring-2 { width: 70%; height: 70%; animation: scanner-pulse 4s infinite ease-out 1s; /* Retraso para efecto onda */ } .scanner-ring.ring-3 { width: 40%; height: 40%; border-color: rgba(88, 166, 255, 0.2); background: radial-gradient(circle, rgba(88, 166, 255, 0.05) 0%, transparent 70%); } /* Línea de escaneo giratoria */ .scanner-line { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0%, transparent 80%, rgba(88, 166, 255, 0.15) 100%); animation: scanner-rotate 4s linear infinite; z-index: 1; } /* Icono central fijo */ .scanner-icon { position: relative; z-index: 2; width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, rgba(88, 166, 255, 0.1), rgba(88, 166, 255, 0.05)); border: 1px solid rgba(88, 166, 255, 0.3); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 30px rgba(88, 166, 255, 0.15); } @keyframes scanner-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes scanner-pulse { 0% { transform: scale(0.95); opacity: 0.5; border-color: rgba(88, 166, 255, 0.3); } 50% { opacity: 0.2; } 100% { transform: scale(1.1); opacity: 0; } } /* --- ANIMACIÓN GRADIENTE BOTÓN --- */ @keyframes gradient-xy { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .animate-gradient-xy { background-size: 200% 200%; animation: gradient-xy 3s ease infinite; } /* ========================================================================== ESTILOS DE INTERFAZ DEL JUEGO (GAME UI) ========================================================================== */ /* Header Flotante "Ronda X" */ #game-ui-header { background: rgba(13, 17, 23, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important; border-radius: 12px !important; /* Menos redondo, más técnico */ padding: 0.75rem 1.5rem !important; } #game-ui-header span { font-family: 'Space Grotesk', monospace; letter-spacing: 0.1em; font-size: 0.85rem !important; color: var(--color-secondary); } /* Botones de Acción (Confirmar / Volver / Arriesgar) */ #game-confirm-btn, #game-finish-btn, #game-guess-btn { border-radius: 12px !important; /* Bordes más rectos */ font-family: 'Space Grotesk', monospace; letter-spacing: 0.1em; font-size: 0.9rem !important; text-transform: uppercase; padding: 1rem 2rem !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important; transition: all 0.2s var(--ease-out-quint); } /* Botón ARRIESGAR (Naranja Tactico) */ #game-guess-btn { background: linear-gradient(135deg, rgba(255, 187, 41, 0.15), rgba(255, 187, 41, 0.05)) !important; border: 1px solid rgba(255, 187, 41, 0.5) !important; color: var(--color-warning) !important; box-shadow: 0 0 20px rgba(255, 187, 41, 0.15) !important; } #game-guess-btn:hover { background: rgba(255, 187, 41, 0.2) !important; transform: translateX(-50%) scale(1.05) !important; box-shadow: 0 0 30px rgba(255, 187, 41, 0.3) !important; } /* Botón CONFIRMAR (Azul Tech) */ #game-confirm-btn { background: #0d1318 !important; border: 1px solid var(--color-secondary) !important; color: var(--color-secondary) !important; /* Efecto de escaneo en el borde */ box-shadow: 0 0 20px rgba(88, 166, 255, 0.2), inset 0 0 20px rgba(88, 166, 255, 0.1) !important; } #game-confirm-btn:hover { background: var(--color-secondary) !important; color: #000 !important; box-shadow: 0 0 40px rgba(88, 166, 255, 0.5) !important; transform: translateX(-50%) translateY(-2px) !important; } /* Botón FINALIZAR / SIGUIENTE (Verde Tech) */ #game-finish-btn { background: #0d1318 !important; border: 1px solid var(--color-success) !important; color: var(--color-success) !important; } #game-finish-btn:hover { background: var(--color-success) !important; color: #000 !important; box-shadow: 0 0 30px rgba(57, 211, 83, 0.4) !important; transform: translateX(-50%) translateY(-2px) !important; } /* --- MARCADORES DEL MAPA (Estilo Mira) --- */ /* Mira del usuario (Selección) */ .game-marker-guess .target-reticle { width: 40px; height: 40px; border: 2px solid var(--color-secondary); border-radius: 50%; position: relative; box-shadow: 0 0 15px var(--color-secondary), inset 0 0 10px var(--color-secondary); animation: reticle-pulse 1.5s infinite; background: rgba(88, 166, 255, 0.1); } .game-marker-guess .target-reticle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4px; height: 4px; background: white; border-radius: 50%; } .game-marker-guess .target-reticle::before { content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); width: 2px; height: 10px; background: var(--color-secondary); } @keyframes reticle-pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } } /* Marcador Objetivo Real (Target) */ .game-marker-target .target-point { width: 30px; height: 30px; background: rgba(57, 211, 83, 0.2); border: 2px solid var(--color-success); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-success); font-size: 16px; box-shadow: 0 0 20px var(--color-success); } /* Marcador Usuario Final (Punto) */ .game-marker-user .user-point { width: 20px; height: 20px; background: var(--color-secondary); border: 2px solid white; border-radius: 50%; box-shadow: 0 0 15px var(--color-secondary); } /* Tooltips de Resultados */ .leaflet-tooltip.game-tooltip { background-color: rgba(13, 17, 23, 0.9); border: 1px solid; color: white; font-family: 'Space Grotesk', monospace; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); border-radius: 4px; } .leaflet-tooltip.game-tooltip::before { display: none; } /* Ocultar flecha default */ .game-tooltip.target { border-color: var(--color-success); color: var(--color-success); } .game-tooltip.user { border-color: var(--color-secondary); color: var(--color-secondary); } /* Línea de resultado animada */ .game-result-line { animation: dash-flow 1s linear infinite; filter: drop-shadow(0 0 5px rgba(248, 81, 73, 0.5)); }