/* ========================================================================== 
    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%);
    overflow: hidden;
    overscroll-behavior: none;
    background-color: #000000;
    /* FIX: Fondo negro base para evitar bordes blancos */
}

:root {
    --map-ad-height: 0px;
    /* Variable dinámica para el anuncio del mapa */
    --iss-live-ad-height: 0px;
    /* Variable dinámica para el anuncio de ISS Live */
    --sky-ad-height: 0px;
    /* Variable dinámica para el anuncio del modo cielo */
    --admob-height: 0px;
    /* Variable dinámica para el anuncio de AdMob (Nativo) */
    --safe-top: 0px;
    /* Por defecto (Web) no dejamos espacio extra arriba */
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    /* Espacio seguro inferior (iOS Web/App) */

    /* 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: #A1A8B3;
    /* Texto secundario (gris más claro para contraste) */
    --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 (Web) */
body.has-map-ad,
body.has-iss-live-ad {
    --bottom-margin-dynamic: 0.25rem;
    /* Margen reducido para que no suba tanto */
}

/* 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);
    /* Ajuste: Bajamos un poco los controles en la app cuando no hay anuncios (1.5rem -> 1rem) */
    --bottom-margin-dynamic: 1rem;
}

/* Lógica para reducir el margen cuando aparece el anuncio (App) */
body.has-admob {
    --bottom-margin-dynamic: 0.75rem;
}

/* AJUSTE DE PANTALLA PARA ADMOB: Levantar el contenedor principal */
body.has-admob #app-container,
body.has-admob #iss-live-screen {
    height: calc(100% - var(--admob-height)) !important;
}

html {
    height: 100%;
    height: 100dvh;
    /* Altura dinámica para móviles */
}

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%;
    height: 100dvh;
    /* Altura dinámica para móviles */
    position: fixed;
    /* Fija el body para evitar scroll elástico del navegador */
    width: 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;
}

/* Ocultar interfaz durante la captura */
body.is-capturing #main-control-panel,
body.is-capturing #bottom-nav-bar,
body.is-capturing #map-style-switcher,
body.is-capturing #action-controls,
body.is-capturing #time-control-panel,
body.is-capturing #toggle-time-control-btn,
body.is-capturing #visibility-controls,
body.is-capturing .leaflet-control-zoom {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Ocultar interfaz durante la selección de área */
body.is-area-selecting #main-control-panel,
body.is-area-selecting #bottom-nav-bar,
body.is-area-selecting #map-style-switcher,
body.is-area-selecting #action-controls,
body.is-area-selecting #time-control-panel,
body.is-area-selecting #toggle-time-control-btn,
body.is-area-selecting #visibility-controls {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* --- MENÚ ESTILO MAPA ISS LIVE --- */
#iss-map-style-menu {
    /* Estilo Liquid Glass Mejorado (Copia de #map-style-options) */
    background: linear-gradient(165deg, rgba(26, 31, 38, 0.98) 0%, rgba(22, 27, 34, 0.92) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    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.25), 0 0 40px -5px rgba(0, 0, 0, 0.6);

    border-radius: 16px;
    padding: 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;
}

#iss-map-style-menu.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* --- MENÚ ESTILO MAPA RADAR 2.0 (Copia de ISS) --- */
#radar-2-map-style-menu {
    background: linear-gradient(165deg, rgba(26, 31, 38, 0.98) 0%, rgba(22, 27, 34, 0.92) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    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.25), 0 0 40px -5px rgba(0, 0, 0, 0.6);
    border-radius: 16px;
    padding: 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;
}

#radar-2-map-style-menu.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* --- BOTONES MODO ISS LIVE --- */
#iss-recenter-btn {
    /* Estilo Liquid Glass High-Contrast */
    background: linear-gradient(165deg, rgba(26, 31, 38, 0.95) 0%, rgba(20, 25, 30, 0.85) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 187, 41, 0.3);
    background-clip: padding-box;

    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
        0 0 15px rgba(255, 187, 41, 0.15),
        0 10px 30px rgba(0, 0, 0, 0.4);

    border-radius: 9999px;
    color: var(--color-warning);

    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;

    font-size: 0.9rem;
    font-weight: 600;

    transition: opacity 0.3s var(--ease-out-quint), transform 0.3s var(--ease-out-quint), border-color 0.2s;
    opacity: 0;
    pointer-events: none;

    /* Posicionamiento manejado por clases de utilidad en HTML, pero aseguramos z-index */
    z-index: 1000;
}

#iss-recenter-btn.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

#iss-recenter-btn:hover {
    border-color: var(--color-warning);
    background-color: rgba(255, 187, 41, 0.1);
}

#iss-passes-btn {
    /* Estilo "Nebula Pill" - Diseño Fijo y Estético */
    background: linear-gradient(145deg, rgba(20, 30, 45, 0.95) 0%, rgba(10, 15, 25, 0.98) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    /* Borde azulado sutil */
    border: 1px solid rgba(88, 166, 255, 0.3);
    border-radius: 9999px;

    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Glow interno estático para llamar la atención sin animar */
    box-shadow:
        inset 0 0 20px rgba(88, 166, 255, 0.15),
        /* Luz interna azul */
        0 4px 15px rgba(0, 0, 0, 0.5);
    /* Sombra externa */

    transition: all 0.2s var(--ease-out-cubic);
}

#iss-passes-btn:hover {
    border-color: rgba(88, 166, 255, 0.5);
    background: linear-gradient(145deg, rgba(25, 35, 55, 0.95) 0%, rgba(15, 20, 30, 0.98) 100%);
    box-shadow:
        inset 0 0 25px rgba(88, 166, 255, 0.25),
        0 6px 20px rgba(0, 0, 0, 0.6);
    transform: translateY(-1px);
}

.active-cam {
    background-color: rgba(48, 129, 247, 0.6) !important;
    /* Azul primario con transparencia */
    border-color: rgba(48, 129, 247, 0.8) !important;
}

#iss-dark-alert.is-visible {
    max-height: 200px;
    /* Altura suficiente para el contenido expandido */
    opacity: 1;
    padding: 0.5rem 1rem;
}

#iss-sunrise-countdown.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Congelar animaciones de marcadores durante la captura */
body.is-capturing .leaflet-marker-icon,
body.is-capturing .leaflet-marker-shadow,
body.is-capturing path {
    transition: none !important;
    filter: none !important;
}

/* Ocultar ícono de información durante la captura */
body.is-capturing .sat-info-icon {
    display: none !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: content-visibility salta el renderizado de lo que no se ve */
    content-visibility: auto;
    contain-intrinsic-size: 100vh;
    /* Necesario para que content-visibility funcione bien */

    /* OPTIMIZACIÓN: contain strict es más agresivo y mejor para rendimiento */
    contain: strict;
    box-sizing: border-box;
    background: var(--color-background);
    /* OPTIMIZACIÓN RADICAL: Fuerza aceleración de hardware permanente */
    transform: translate3d(0, 0, 0);
}

/* --- 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,
#critical-passes-screen::after,
#info-screen-moon::after,
#events-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,
#astrophoto-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) */
    opacity: var(--status-gradient-opacity, 1);
    /* Control dinámico: 1 por defecto, JS lo baja a 0 */
}

/* --- 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 + var(--safe-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: hidden;
    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);
    }
}

/* --- INICIO: Estilos Globo Plano (Portado de V1.1) --- */
#home-3d-container {
    position: fixed !important;
    top: 35% !important;
    left: 50% !important;

    /* Tamaño gigante para el efecto de curvatura */
    width: max(125vmin, 105vh) !important;
    height: max(125vmin, 105vh) !important;

    max-width: 2200px !important;
    max-height: 2200px !important;

    transform: translate3d(-50%, -50%, 0) !important;
    z-index: 1;
    pointer-events: none;
    border-radius: 50%;

    background-color: #000000;
    overflow: hidden;
    opacity: 1;
}

.earth-texture-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;

    background-size: 200% 100%;
    background-repeat: repeat-x;

    /* Posición fija centrada en América (aprox) */
    background-position: 15% 0;

    will-change: background-position;
    transform: translateZ(0);
    z-index: 0;

    /* Animación de rotación continua (bucle de 4 minutos) */
    animation: earthLoop 240s linear infinite;
}

@keyframes earthLoop {
    from {
        background-position: 15% 0;
    }

    to {
        background-position: 215% 0;
    }

    /* +200% es una vuelta exacta del patrón */
}

/* Capa de sombra/iluminación estática */
#home-3d-container::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 90%;
    z-index: 2;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.55);
}

/* Degradado radial inverso (Viñeta) para fundir los bordes */
#start-screen .home-vignette-overlay {
    position: absolute !important;
    inset: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5 !important;
    /* Encima del globo (z-1) */
    pointer-events: none;
    background: radial-gradient(circle at center, transparent 0%, transparent 35%, #000000 85%);
    width: 100%;
    height: 100%;
    margin: 0 !important;
    transform: none !important;
}

/* AJUSTE VERTICAL: Subir el centro del degradado en modo vertical para coincidir con el globo (40%) */
@media (orientation: portrait) {
    #start-screen .home-vignette-overlay {
        background: radial-gradient(circle at 50% -20%, transparent 0%, transparent 05%, #000000 85%) !important;
    }
}

/* CORRECCIÓN: Ajuste para modo horizontal (agujero más chico para tapar bordes) */
@media (orientation: landscape) {
    #start-screen .home-vignette-overlay {
        /* Reducimos drásticamente los porcentajes porque la diagonal es muy larga en horizontal */
        background: radial-gradient(circle at center, transparent 0%, transparent 12%, #000000 55%) !important;
    }

    /* FIX: Centrar el círculo de la Tierra verticalmente en modo horizontal */
    #home-3d-container {
        top: 50% !important;
    }
}

/* Aseguramos que el contenido flote POR ENCIMA del globo */
#start-screen>div:not(#home-3d-container):not(.home-vignette-overlay):not(#star-field) {
    position: relative;
    z-index: 10;
}

/* --- FIN: Estilos Globo Plano --- */

/* ========================================================================== 
    ANIMACIONES GENERALES Y DE PANTALLA
    ========================================================================== */
@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;
}

/* --- NUEVO: Animación de entrada de pantalla --- */
@keyframes screen-enter-in {
    0% {
        opacity: 0;
        transform: scale(0.98);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes screen-enter-out {
    0% {
        opacity: 0;
        transform: scale(1.02);
        /* Zoom-out (overscan) para evitar bordes vacíos en inicio */
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.screen-enter {
    animation: screen-enter-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    will-change: opacity, transform;
}

.screen-enter-back {
    animation: screen-enter-out 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    will-change: opacity, transform;
}

/* ========================================================================== 
    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 REDUCIDO Y OPTIMIZADO */
    padding: 0.7rem 1rem;

    /* ESTILO TECH/ESPACIAL: Glass Gradient Profundo */
    background: linear-gradient(145deg, rgba(22, 32, 45, 0.8) 0%, rgba(32, 32, 38, 0.5) 100%);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Borde más fino y brillante */
    border: 1px solid rgba(255, 255, 255, 0.12);

    /* Corrección de bordes */
    background-clip: padding-box;

    /* Sombra con volumen */
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
        inset 0 0 20px rgba(0, 0, 0, 0.1),
        0 4px 15px -2px rgba(0, 0, 0, 0.4);

    border-radius: 14px;
    /* Squircle más técnico */

    font-size: 1rem;
    /* Texto un poco más compacto */
    font-weight: 600;
    color: var(--color-text-primary);
    text-align: left;
    transition: all 0.25s 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.5);
        /* Borde azul más visible */
        transform: translateY(-2px);
        background: linear-gradient(145deg, rgba(28, 38, 55, 0.9) 0%, rgba(40, 40, 48, 0.6) 100%);
        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.5),
            inset 0 0 20px rgba(88, 166, 255, 0.1);
        color: white;
    }

    /* Efecto Hover en el icono */
    .menu-list-item:hover .menu-icon-left {
        background-color: rgba(48, 129, 247, 0.15);
        /* Fondo azul sutil */
        border-color: rgba(48, 129, 247, 0.3);
        color: var(--color-secondary);
        box-shadow: 0 0 15px rgba(48, 129, 247, 0.2);
        transform: scale(1.05);
    }

    .menu-list-item:hover .menu-chevron {
        opacity: 1;
        color: var(--color-secondary);
        transform: translateX(4px);
    }
}

/* Estilo presionado para móvil (sin transform persistente) */
.menu-list-item.is-pressed {
    border-color: rgba(88, 166, 255, 0.6);
    background: linear-gradient(145deg, rgba(28, 38, 55, 0.9) 0%, rgba(40, 40, 48, 0.6) 100%);
    box-shadow: inset 0 0 20px rgba(88, 166, 255, 0.1);
    color: white;
}

/* Icono principal a la izquierda - REDISEÑADO CON MARCO */
.menu-list-item .menu-icon-left {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 0.9rem;

    /* Marco sutil */
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-secondary);

    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: none;
}

/* FIX: Combinamos hover y is-pressed para los iconos internos */
/* NOTA: Las reglas de hover del icono ahora están integradas en el bloque media query principal de arriba */

.menu-list-item.is-pressed .menu-icon-left {
    background-color: rgba(48, 129, 247, 0.15);
    border-color: rgba(48, 129, 247, 0.3);
    color: var(--color-secondary);
    box-shadow: 0 0 15px rgba(48, 129, 247, 0.2);
}

/* 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-search-glass {
    background: rgba(48, 209, 200, 0.1);
    border: 1px solid rgba(48, 209, 200, 0.4);
    color: #30d1c8;
    border-radius: 9999px;
    padding: 0.4rem 1.5rem;
    width: auto;
    margin-bottom: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    backdrop-filter: blur(5px);
    transition: all 0.2s ease;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
}

.btn-search-glass:hover {
    background: rgba(48, 209, 200, 0.2);
    box-shadow: 0 0 15px rgba(48, 209, 200, 0.2);
    transform: translateY(-1px);
}

.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 {
    /* Eliminamos transform para evitar saltos en botones centrados */
    opacity: 0.8;
    transition: opacity 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 {
    opacity: 0.8;
    transition: opacity 0.1s ease;
}

/* --- INICIO: Estilo para botones de flare --- */
.flare-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(34, 211, 238, 0.1);
    border: 1px solid rgba(34, 211, 238, 0.2);
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.1);
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.flare-info-btn:hover {
    background: rgba(34, 211, 238, 0.2);
    border-color: rgba(34, 211, 238, 0.5);
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
    transform: scale(1.05);
}

.flare-info-btn:active {
    transform: scale(0.95);
}

.nav-item.is-pressed,
.satellite-nav-btn.is-pressed,
.modal-satellite-card.is-pressed,
.pass-card-clickable.is-pressed,
.satellite-entry-clickable.is-pressed {
    opacity: 0.8;
    transition: opacity 0.1s ease;
}

/* --- FIN: Estilo para estado presionado --- */

/* Estilo para descripción en satélites populares */
.pop-sat-desc {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-top: 0.15rem;
    line-height: 1.1;
    font-weight: 400;
    opacity: 0.85;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.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);
}

@media (hover: hover) {
    .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 un poco más visible */
    color: var(--color-text-primary);
    border-color: rgba(255, 255, 255, 0.15);
    /* Borde con mayor contraste (regla 3:1) */
    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-glass-delicate {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--color-text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: none;
    transition: all 0.2s var(--ease-out-cubic);
}

@media (hover: hover) {
    .btn-glass-delicate:hover {
        background-color: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.25);
        color: var(--color-text-primary);
        transform: translateY(-1px);
    }
}

.btn-glass-delicate.is-pressed {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--color-text-primary);
}

.btn-danger {
    background-color: var(--color-danger);
    color: white;
    box-shadow: 0 4px 14px 0 rgba(248, 81, 73, 0.3);
}

@media (hover: hover) {
    .btn-danger:hover {
        background-color: #ff6b64;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px 0 rgba(248, 81, 73, 0.35);
    }
}

.btn-live-red {
    background-color: #ef4444;
    color: white;
    box-shadow: 0 4px 14px 0 rgba(239, 68, 68, 0.3);
}

@media (hover: hover) {
    .btn-live-red:hover {
        background-color: #f87171;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px 0 rgba(239, 68, 68, 0.35);
    }
}

/* ========================================================================== 
   BOTÓN MAPA DE INCENDIOS (FIRMS) - ESTILO FUEGO ABSTRACTO
   ========================================================================== */
.btn-fire-glass {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: 16px;

    /* Fondo oscuro con tinte rojizo muy sutil */
    background: linear-gradient(180deg, rgba(30, 20, 20, 0.6) 0%, rgba(40, 10, 10, 0.8) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(248, 113, 113, 0.2);
    color: #fca5a5;
    font-weight: 700;
    font-size: 1rem;

    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-fire-glass:hover {
    border-color: rgba(248, 113, 113, 0.5);
    background: linear-gradient(180deg, rgba(40, 20, 20, 0.7) 0%, rgba(60, 15, 15, 0.9) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.15);
    color: #fff;
}

/* Resplandor de fuego abstracto en la parte inferior */
.btn-fire-glass::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 45%;

    background: radial-gradient(ellipse at center bottom,
            rgba(255, 87, 34, 0.25) 0%,
            rgba(220, 38, 38, 0.05) 60%,
            transparent 80%);

    filter: blur(6px);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Línea de ignición en el borde inferior */
.btn-fire-glass::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15%;
    width: 70%;
    height: 1px;

    background: linear-gradient(90deg, transparent, #fbbf24, #ef4444, #fbbf24, transparent);

    box-shadow: 0 -1px 8px rgba(251, 191, 36, 0.5);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.btn-fire-glass:hover::before {
    opacity: 1;
    box-shadow: 0 -2px 12px rgba(251, 191, 36, 0.7);
    width: 90%;
    left: 5%;
}

.btn-fire-glass i {
    transition: transform 0.3s ease;
    color: #ef4444;
}

.btn-fire-glass:hover i {
    transform: scale(1.1);
    color: #fbbf24;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.6);
}

/* ========================================================================== 
   BOTÓN IMÁGENES SATELITALES - ESTILO TIERRA/ESPACIO
   ========================================================================== */
.btn-earth-glass {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: 16px;

    /* Fondo: Azul espacial profundo arriba, oscureciéndose hacia abajo (Inverso al fuego) */
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.15) 0%, rgba(15, 23, 42, 0.6) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(56, 189, 248, 0.2);
    color: #7dd3fc;
    /* Sky 300 */
    font-weight: 700;
    font-size: 1rem;

    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-earth-glass:hover {
    border-color: rgba(56, 189, 248, 0.5);
    /* Hover: Más brillo arriba */
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.25) 0%, rgba(15, 23, 42, 0.8) 100%);
    transform: translateY(-2px);
    /* Sombra azulada */
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.15);
    color: #fff;
}

/* Resplandor SUPERIOR (Atmósfera/Horizonte) */
.btn-earth-glass::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 45%;
    /* Gradiente elíptico desde arriba */
    background: radial-gradient(ellipse at center top,
            rgba(56, 189, 248, 0.3) 0%,
            rgba(45, 212, 191, 0.05) 60%,
            /* Teal hint */
            transparent 80%);
    filter: blur(6px);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Línea de borde SUPERIOR (Orbital) */
.btn-earth-glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    width: 70%;
    height: 1px;
    /* Cyan/Teal line */
    background: linear-gradient(90deg, transparent, #38bdf8, #2dd4bf, #38bdf8, transparent);
    /* Sombra hacia abajo */
    box-shadow: 0 1px 8px rgba(56, 189, 248, 0.6);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.btn-earth-glass:hover::before {
    opacity: 1;
    box-shadow: 0 2px 12px rgba(56, 189, 248, 0.8);
    width: 90%;
    left: 5%;
}

.btn-earth-glass i {
    transition: transform 0.3s ease;
    color: #38bdf8;
}

.btn-earth-glass:hover i {
    transform: rotate(-15deg) scale(1.1);
    /* Rotación sutil estilo satélite */
    color: #2dd4bf;
    /* Teal */
    text-shadow: 0 0 10px rgba(45, 212, 191, 0.6);
}

.iss-live-list-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
    pointer-events: auto;
    width: fit-content;
    margin-top: 0.5rem;
}

.iss-live-list-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.live-badge-icon {
    position: relative;
    width: 8px;
    height: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.live-solid {
    width: 6px;
    height: 6px;
    background-color: #F85149;
    border-radius: 50%;
    z-index: 2;
}

.live-wave {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #F85149;
    border-radius: 50%;
    opacity: 0.6;
    animation: live-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes live-ping {

    75%,
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

.live-icon-visual {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    transition: color 0.2s ease;
}

.iss-live-list-btn:hover .live-icon-visual {
    color: var(--color-text-primary);
}

.live-text {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.2s ease;
}

.iss-live-list-btn:hover .live-text {
    color: var(--color-text-primary);
}

.input-field,
.textarea-field {
    background-color: var(--color-background);
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* Borde más claro para cumplir contraste */
    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,
#lists-modal,
#magnitude-filter-modal,
#critical-sats-modal {
    z-index: 2100;
    /* 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;
    overflow-x: hidden;
    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);
    transition: transform 0.4s 0.1s var(--ease-out-quint), margin 0.4s var(--ease-out-quint);
    will-change: transform, opacity;
}

.is-visible .modal-content {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Clase para mover el modal arriba durante el tutorial */
.modal-content.tutorial-top {
    margin-bottom: auto;
    margin-top: 120px;
    /* Espacio suficiente para no tapar el header */
}

/* 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,
#starlink-separation-modal .modal-content,
#flare-info-modal .modal-content,
#technical-info-overlay .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' */
}

/* --- NUEVO: Estilos para Header de Info con Favorito --- */
.sat-modal-header-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Centrado visualmente */
    gap: 10px;
    /* Espacio entre nombre y corazón */
    width: 100%;
    max-width: 100%;
    padding: 0 40px;
    /* SAFETY MARGIN: Simétrico para evitar choque con la X */
    box-sizing: border-box;
}

.sat-modal-title-text {
    white-space: normal;
    text-align: center;
    line-height: 1.2;
    min-width: 0;
    /* Vital para que el flexbox corte el texto */
    flex-shrink: 1;
}

.sat-modal-fav-action {
    flex-shrink: 0;
    /* El corazón nunca se achica */
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    /* Gris por defecto */
    font-size: 0.95em;
    /* AJUSTE: Un poco más chico (antes 1.1em) */
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, color 0.2s ease;
}

.sat-modal-fav-action:hover {
    transform: scale(1.15);
    color: var(--color-danger);
    /* Rojo al pasar el mouse */
}

.sat-modal-fav-action.is-active {
    color: var(--color-danger);
    /* Rojo si es favorito */
    animation: heart-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes heart-pop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

.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;
    /* CAMBIO: Eliminado el fondo degradado rojo */
}

.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
    ========================================================================== */

/* FIX: Asegurar que el filtro de críticos flote sobre el slider */
#critical-passes-filter-container {
    position: relative;
    z-index: 50 !important;
    /* Más alto que el slider (z-0 o z-10) */
}

#critical-passes-filter-menu {
    z-index: 100 !important;
    /* Asegurar que el menú tape todo lo de abajo */
}

#map-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* OPTIMIZACIÓN: Aísla el mapa para que lo que pase encima (menús) no obligue a repintar el mapa */
    contain: strict;
    z-index: 0;
}

/* --- 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%;
    /* Fondo por defecto: Negro para evitar parpadeos de color al cargar */
    background-color: var(--color-background);
    transition: background-color 0.3s ease;
}

#radar-2-fake-map {
    background-color: #000000;
}

/* Fondo para Modo Satélite: Azul Océano/Cian */
.satellite-view-active #map {
    background-color: var(--color-background);
}

/* --- 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: brightness(0.7);
}

/* Darker satellite map in FIRMS mode */
.firms-mode-active .leaflet-tile-pane.satellite-map {
    filter: brightness(0.4) contrast(1.2) !important;
}

/* --- 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;
    z-index: auto;
    /* Fix para evitar parpadeos en móviles al mover marcadores */
    backface-visibility: hidden;
    transform: translateZ(0);
}

.no-transition {
    transition: none !important;
}

/* FIX: Clase para saltos instantáneos (Teletransportación) */
.is-teleporting,
.satellite-marker.is-teleporting,
.satellite-label.is-teleporting {
    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;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: 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;
}

.satellite-marker-wrapper.is-starlink .satellite-triangle-icon {
    fill: var(--color-starlink-icon);
    filter: drop-shadow(0 0 5px var(--color-starlink-icon));
}

.satellite-marker-wrapper.is-dot .satellite-triangle-icon {
    display: none;
}

.satellite-marker-wrapper.is-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 5px;
    background-color: var(--color-satellite-icon);
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 50%;
}

.satellite-marker-wrapper.is-dot.is-not-visible::before {
    background-color: #8B949E;
}

/* --- 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 */
}

body.nearby-mode-active .satellite-marker-wrapper.is-starlink:not(.is-not-visible)::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;
}

/* --- INICIO: Estilos para satélites de baja altura (< 200km) --- */
.satellite-marker-wrapper.is-critical-height .satellite-triangle-icon {
    fill: #FF0000;
    filter: drop-shadow(0 0 5px #FF0000);
}

.satellite-marker-wrapper.is-critical-height.is-not-visible .satellite-triangle-icon {
    fill: #8B3A3A;
    filter: drop-shadow(0 0 5px #8B3A3A);
}

body.nearby-mode-active .satellite-marker-wrapper.is-critical-height:not(.is-not-visible)::after {
    background: radial-gradient(circle, rgba(255, 0, 0, 0.4) 0%, rgba(255, 0, 0, 0) 70%);
}

/* --- FIN: Estilos para satélites de baja altura --- */

/* 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(0, 0, 0, 0.95);
    color: #ffffff;
    /* Fondo casi sólido y texto blanco puro */
    border: 1.5px solid var(--color-orbit);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 12.5px;
    /* Borde más grueso y texto más grande */
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    /* Sombra más fuerte */
    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;
}

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;
}

/* Estilo simplificado para etiquetas en modo Radar/Cerca (Sin caja ni flecha) */
body.nearby-mode-active .satellite-integrated-label {
    padding: 0;
    font-size: 11px;
    background-color: transparent;
    border: none !important;
    box-shadow: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

/* 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;
    /* Usamos la variable dinámica --arrow-color si existe, sino el color por defecto */
    border-right-color: var(--arrow-color, var(--color-orbit));
}

/* 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 */
}

/* Ocultar flechas en modo Radar */
body.nearby-mode-active .satellite-integrated-label::before,
body.nearby-mode-active .satellite-integrated-label::after {
    display: none;
}

.satellite-integrated-label.hidden-initially {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

.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-integrated-label.hidden-initially {
    opacity: 0 !important;
    pointer-events: none !important;
}

.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;
    display: flex !important;
    /* Forzamos Flexbox */
    align-items: center;
    /* Centrado Vertical */
    justify-content: center;
    /* Centrado Horizontal */
    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 --- */
#radar-buttons-container {
    opacity: 0;
    transform: translateY(15px);
    pointer-events: none;
    display: flex;
    z-index: 50;
}

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 #radar-buttons-container,
body.nearby-mode-active #main-control-panel.show-compass #radar-buttons-container {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0.1s;
}

/* Ocultar botón de destellos en la vista de paso (solo relevante en radar general) */
body.pass-view-active #open-flare-view-pill-btn {
    display: none;
}

/* Ocultar botón de ver en el cielo en modo radar (nearby) */
body.nearby-mode-active #ar-mode-pill-btn {
    display: none;
}

/* 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);
    color: var(--color-secondary);
}

#nearby-button:hover {
    background-color: rgba(88, 166, 255, 0.1);
}

#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);
    background-color: rgba(30, 36, 44, 0.85);
    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(30, 36, 44, 0.95);
}

#ar-mode-pill-btn.is-pressed {
    transform: scale(0.97) !important;
}

/* Estilos para el botón de Franja de Destellos (Amarillo) */
#open-flare-view-pill-btn {
    box-shadow: inset 0 0 8px 0 rgba(255, 187, 41, 0.5);
    border-color: rgba(255, 187, 41, 0.7) !important;
    color: var(--color-warning) !important;
    background-color: rgba(30, 36, 44, 0.85);
    transition: all 0.3s var(--ease-out-quint);
}

#open-flare-view-pill-btn:hover {
    box-shadow: inset 0 0 14px 2px rgba(255, 187, 41, 0.6);
    border-color: var(--color-warning) !important;
    background-color: rgba(30, 36, 44, 0.95);
}

.nearby-radius-circle {
    stroke-dasharray: 5, 10;
    transition: stroke-opacity 0.5s ease;
}

/* BRÚJULA LUNAR */
.moon-compass-wrapper {
    position: absolute;
    bottom: 15%;
    /* Ajustar altura según preferencia */
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0.9;
    pointer-events: none;
}

.moon-compass-arrow {
    font-size: 28px;
    color: var(--color-secondary);
    filter: drop-shadow(0 0 8px var(--color-secondary));
    transition: transform 0.1s linear;
    /* Suavizado mínimo */
}

.moon-compass-label {
    font-size: 9px;
    color: var(--color-text-secondary);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.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 */
}

/* NUEVO: Barra de Elevación para la Brújula Lunar */
.elevation-bar-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    /* PIVOTE: Rotamos desde el centro real compensando el margen */
    transform-origin: 50% calc(100% + 24px);
    /* PIVOTE: Ajustado a 24px para pegarla bien a la flecha */
    transition: transform 0.1s ease-out;
    /* SINCRONIZACIÓN: Misma inercia que la flecha */
    will-change: transform;
    width: 4px;
    height: 60px;
    /* Largo de la línea */
    background-color: rgba(255, 255, 255, 0.15);
    /* Gris tenue de fondo */
    border-radius: 4px;
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
    /* Z-Index bajado un poco por seguridad */
    margin-top: -32px;
}

.elevation-bar-fill {
    width: 100%;
    height: 0%;
    /* Dinámico por JS */
    background-color: var(--color-secondary);
    /* Azul por defecto */
    position: absolute;
    bottom: 0;
    /* Se llena de abajo hacia arriba (desde la flecha hacia el cielo) */
    transition: height 0.1s linear, background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 10px var(--color-secondary);
}

.elevation-bar-fill.active {
    background-color: var(--color-success);
    /* Verde éxito */
    box-shadow: 0 0 15px var(--color-success);
}

/* --- 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 Deep Glass Moderno (Optimizado) --- */
    /* Fondo más transparente y ligero */
    background: linear-gradient(to bottom, rgba(18, 22, 28, 0.65), rgba(15, 18, 22, 0.55));

    /* Blur reducido para rendimiento y sutileza */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Borde ultra fino */
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-clip: padding-box;

    /* Sombras con volumen real */
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
        /* Luz superior nítida */
        inset 0 0 20px rgba(0, 0, 0, 0.2),
        /* Profundidad interna */
        0 20px 40px -10px rgba(0, 0, 0, 0.6);
    /* Sombra difusa externa */

    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 */

    /* OPTIMIZACIÓN EXTREMA: Aislamiento total del contexto de apilamiento */
    isolation: isolate;
    contain: layout paint style;
    /* Más específico que 'content' para evitar reflujos */
    transform: translate3d(0, 0, 0);
    /* Fuerza capa de composición en GPU */
}

#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,
#flare-radar-canvas,
#nearby-radar-canvas,
#radar-2-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 --- */
}

/* Animación para ocultar el radar al abrir el menú de tiempo */
#nearby-radar-container,
#radar-2-radar-container {
    transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1), transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: center center;
}

#nearby-radar-container.faded-out,
#radar-2-radar-container.faded-out {
    opacity: 0;
    transform: translateY(-60px) scale(0.8);
    pointer-events: none;
}

/* --- 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) + var(--safe-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) + var(--safe-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,
#toggle-time-control-btn-sky,
#toggle-time-control-btn-flare-view {
    position: absolute;
    z-index: 450;
    bottom: calc(60px + var(--bottom-margin-dynamic) + var(--safe-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(26, 31, 38, 0.6) 0%, rgba(20, 25, 30, 0.5) 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 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 */
}

/* Override para la píldora del mapa principal (Más grande) */
#toggle-time-control-btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.95rem;
}

/* Excepción para Flare View: No considerar --map-ad-height y usar margen menor */
#toggle-time-control-btn-flare-view {
    bottom: calc(var(--bottom-margin-dynamic) + var(--safe-bottom));
}

#toggle-time-control-btn.visible-pill,
#toggle-time-control-btn-3d.visible-pill,
#toggle-time-control-btn-sky.visible-pill,
#toggle-time-control-btn-flare-view.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-sky>span,
#toggle-time-control-btn>i,
#toggle-time-control-btn-3d>i,
#toggle-time-control-btn-sky>i,
#toggle-time-control-btn-flare-view>span,
#toggle-time-control-btn-flare-view>i {
    position: relative;
    z-index: 1;
}

/* --- FIN: Asegurar que el texto esté sobre el degradado --- */

#reset-time-btn-pill,
#reset-time-btn-pill-3d,
#reset-time-btn-pill-sky,
#reset-time-btn-pill-flare-view {
    position: absolute;
    z-index: 451;
    /* Justo encima de la píldora de tiempo */
    bottom: calc(60px + var(--bottom-margin-dynamic) + 36px + 0.75rem + var(--safe-bottom) + var(--map-ad-height) + var(--admob-height));
    left: 50%;
    height: 1.8rem;
    padding: 0 0.8rem;
    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;
    font-size: 0.7rem;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
    transition: all 0.3s var(--ease-out-quint);
    pointer-events: none;
}

/* Excepción para Flare View: No considerar --map-ad-height y usar margen menor */
#reset-time-btn-pill-flare-view {
    bottom: calc(var(--bottom-margin-dynamic) + 36px + 0.75rem + var(--safe-bottom));
}

#reset-time-btn-pill.visible,
#reset-time-btn-pill-3d.visible,
#reset-time-btn-pill-sky.visible,
#reset-time-btn-pill-flare-view.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

#reset-time-btn-pill:hover,
#reset-time-btn-pill-3d:hover,
#reset-time-btn-pill-sky: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,
#reset-time-btn-pill-sky.is-pressed {
    transform: translateX(-50%) scale(0.97) !important;
}

body.map-active #reset-time-btn-pill,
body.radar-2-active #reset-time-btn-pill,
body.map-active #reset-time-btn-pill-3d,
body.map-active #reset-time-btn-pill-sky {
    bottom: calc(var(--bottom-margin-dynamic) + 36px + 0.75rem + var(--map-ad-height) + var(--admob-height) + var(--safe-bottom));
}

/* Posicionamiento específico para la fecha en modo Cielo */
#time-travel-date-display-sky {
    bottom: calc(var(--bottom-margin-dynamic) + 36px + 0.75rem + var(--map-ad-height) + var(--admob-height));
    transition: bottom 0.4s var(--ease-out-quint);
}

#time-travel-date-display-flare-view {
    bottom: calc(2.75rem + var(--bottom-margin-dynamic) + var(--safe-bottom));
    transition: bottom 0.4s var(--ease-out-quint);
}

/* Posicionamiento específico para el botón de reset en modo Cielo cuando hay fecha */
body.map-active #reset-time-btn-pill-sky.has-date-below {
    bottom: calc(var(--bottom-margin-dynamic) + 36px + 0.75rem + 1rem + 0.75rem + var(--sky-ad-height) + var(--admob-height) + var(--safe-bottom));
}

body.time-controls-active #reset-time-btn-pill,
body.time-controls-active #reset-time-btn-pill-3d,
body.time-controls-active #reset-time-btn-pill-sky,
body.time-controls-active #reset-time-btn-pill-flare-view,
body.pass-view-active #reset-time-btn-pill {
    opacity: 0 !important;
    transform: translateX(-50%) translateY(10px) !important;
    pointer-events: none !important;
}

#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 + var(--safe-bottom) + var(--map-ad-height) + var(--admob-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) + var(--admob-height) + var(--safe-bottom));
}

#toggle-time-control-btn:hover,
#toggle-time-control-btn-3d:hover,
#toggle-time-control-btn-sky:hover,
#toggle-time-control-btn-flare-view: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,
#time-control-panel-sky,
#time-control-panel-flare-view {
    position: absolute;
    z-index: 500;
    /* --- INICIO: Estilo Deep Glass Moderno (Optimizado) --- */
    background: linear-gradient(to bottom, rgba(18, 22, 28, 0.65), rgba(15, 18, 22, 0.55));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Borde sutil uniforme */
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-clip: padding-box;

    /* Sombras para volumen 3D Equilibrado */
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
        /* Luz superior nítida */
        inset 0 0 20px rgba(0, 0, 0, 0.2),
        /* Profundidad interna */
        0 20px 50px -10px rgba(0, 0, 0, 0.7);
    /* Sombra fuerte para despegar del fondo */
    /* --- FIN: Estilo Deep Glass Moderno --- */
    bottom: calc(60px + var(--bottom-margin-dynamic) + var(--safe-bottom) + var(--map-ad-height) + var(--admob-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;
}

/* Excepción para Flare View: No considerar --map-ad-height y usar margen menor */
#time-control-panel-flare-view {
    bottom: calc(var(--bottom-margin-dynamic) + var(--safe-bottom));
}

#time-control-panel.visible,
#time-control-panel-3d.visible,
#time-control-panel-sky.visible,
#time-control-panel-flare-view.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,
#time-control-panel-sky.visible #reset-time-btn-sky,
#time-control-panel-flare-view.visible #reset-time-btn-flare-view {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

#reset-time-btn,
#reset-time-btn-3d,
#reset-time-btn-sky,
#reset-time-btn-flare-view {
    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),
#reset-time-btn-3d:hover:not(:disabled),
#reset-time-btn-sky:hover:not(:disabled),
#reset-time-btn-flare-view: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,
#reset-time-btn-sky.is-realtime,
#reset-time-btn-flare-view.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,
#reset-time-btn-sky.is-realtime:hover,
#reset-time-btn-flare-view.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,
#reset-time-btn-sky .fa-solid,
#reset-time-btn-flare-view .fa-solid {
    color: inherit;
}

#timeline-slider,
#timeline-slider-3d,
#timeline-slider-sky,
#timeline-slider-flare-view {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 12px;
    background: #30363d;
    outline: none;
    border-radius: 6px;
    cursor: pointer;
    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,
#timeline-slider-sky::-webkit-slider-thumb,
#timeline-slider-flare-view::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    background: var(--color-secondary);
    cursor: pointer;
    border-radius: 50%;
    border: 4px solid var(--color-background);
    /* El desenfoque sutil (15% de opacidad) */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 15px 2px rgba(88, 166, 255, 0.2);
    /* Agregamos box-shadow a la transición */
    transition: transform 0.1s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease, background-color 0.2s;
}

#timeline-slider::-webkit-slider-thumb:hover,
#timeline-slider-3d::-webkit-slider-thumb:hover,
#timeline-slider-sky::-webkit-slider-thumb:hover,
#timeline-slider-flare-view::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    /* Aumentamos el desenfoque en hover */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6), 0 0 20px 5px rgba(88, 166, 255, 0.35);
}

#timeline-slider::-moz-range-thumb,
#timeline-slider-3d::-moz-range-thumb,
#timeline-slider-sky::-moz-range-thumb,
#timeline-slider-flare-view::-moz-range-thumb {
    width: 26px;
    height: 26px;
    background: var(--color-secondary);
    cursor: pointer;
    border-radius: 50%;
    border: 4px solid var(--color-background);
    /* El desenfoque sutil (15% de opacidad) */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 15px 2px rgba(88, 166, 255, 0.2);
    /* Agregamos box-shadow a la transición */
    transition: transform 0.1s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease, background-color 0.2s;
}

#timeline-slider::-moz-range-thumb:hover,
#timeline-slider-3d::-moz-range-thumb:hover,
#timeline-slider-sky::-moz-range-thumb:hover,
#timeline-slider-flare-view::-moz-range-thumb:hover {
    transform: scale(1.15);
    /* Aumentamos el desenfoque en hover */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6), 0 0 20px 5px rgba(88, 166, 255, 0.35);
}

/* --- Estilos para el modo de precisión (Scrubbing) --- */
#timeline-slider.is-scrubbing::-webkit-slider-thumb,
#timeline-slider-3d.is-scrubbing::-webkit-slider-thumb,
#timeline-slider-sky.is-scrubbing::-webkit-slider-thumb,
#timeline-slider-flare-view.is-scrubbing::-webkit-slider-thumb {
    background: var(--color-warning);
    border-color: var(--color-background);
    transform: scale(1.25);
    /* Feedback visual más claro */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7), 0 0 20px 6px rgba(255, 187, 41, 0.6);
    /* Glow Naranja Intenso */
}

#timeline-slider.is-scrubbing::-moz-range-thumb,
#timeline-slider-3d.is-scrubbing::-moz-range-thumb,
#timeline-slider-sky.is-scrubbing::-moz-range-thumb,
#timeline-slider-flare-view.is-scrubbing::-moz-range-thumb {
    background: var(--color-warning);
    border-color: var(--color-background);
    transform: scale(1.25);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7), 0 0 20px 6px rgba(255, 187, 41, 0.6);
}

/* --- 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"],
label[for="date-input-sky"],
label[for="time-input-sky"],
label[for="date-input-flare-view"],
label[for="time-input-flare-view"] {
    flex-grow: 1;
    min-width: 0;
}

#date-input-display,
#time-input-display,
#date-input-display-sky,
#time-input-display-sky,
#date-input-display-flare-view,
#time-input-display-flare-view {
    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):not(#toggle-time-control-btn-sky):not(#toggle-time-control-btn-flare-view).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,
#toggle-time-control-btn-sky.time-traveling-active,
#toggle-time-control-btn-flare-view.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,
#toggle-time-control-btn-sky.time-traveling-active::before,
#toggle-time-control-btn-flare-view.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) + var(--safe-bottom) + var(--map-ad-height) + var(--admob-height));
    left: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    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(26, 31, 38, 0.98) 0%, rgba(22, 27, 34, 0.92) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    /* 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.5rem 0;
    /* Agregado margen vertical para separar las secciones */
}

.map-style-toggle-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.5rem;
    /* Padding vertical 0 porque usamos height */
    height: 36px;
    /* Altura fija para forzar el centrado vertical exacto */
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

/* --- FIN: Rediseño del control de estilos --- */

/* --- INICIO: Rediseño Botones de Acción en Mapa --- */
.map-style-actions-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.25rem;
    /* Reducido porque el HR de arriba ya da margen */
    padding-top: 0.5rem;
    /* Ajustado para balancear */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.map-action-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--color-text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s var(--ease-out-cubic);
}

.map-action-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-secondary);
    transform: translateX(2px);
    color: white;
}

.map-action-btn .icon-box {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(88, 166, 255, 0.1);
    color: var(--color-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.map-action-btn:hover .icon-box {
    background: var(--color-primary);
    color: white;
}

/* --- FIN: Rediseño Botones de Acción en Mapa --- */

.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) + var(--safe-bottom) + var(--map-ad-height) + var(--admob-height));
    right: 1rem;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 0.5rem;
    /* OPTIMIZACIÓN: Quitamos transición de bottom. Solo transform y opacity */
    transition: opacity 0.4s var(--ease-out-quint), transform 0.4s var(--ease-out-quint);
    will-change: transform;
}

#map-style-toggle-btn,
#add-pass-event-btn,
#toggle-aircraft-btn,
#critical-sats-btn,
#open-ar-btn,
#open-compass-menu-btn,
#filter-magnitude-btn,
#toggle-visibility-bands-btn,
#radar-2-map-style-btn,
#radar-2-toggle-aircraft-btn,
#radar-2-filter-btn,
#time-control-panel label[for="date-input"],
#time-control-panel-3d label[for="date-input-3d"],
#time-control-panel-sky label[for="date-input-sky"],
#time-control-panel-flare-view label[for="date-input-flare-view"],
#close-time-control-btn,
#close-time-control-btn-3d,
#close-time-control-btn-sky,
#close-time-control-btn-flare-view {
    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);
}

@media (hover: hover) {

    #map-style-toggle-btn:hover,
    #add-pass-event-btn:hover,
    #toggle-aircraft-btn:hover,
    #critical-sats-btn:hover,
    #open-ar-btn:hover,
    #open-compass-menu-btn:hover,
    #filter-magnitude-btn:hover,
    #toggle-visibility-bands-btn:hover,
    #radar-2-map-style-btn:hover,
    #radar-2-toggle-aircraft-btn:hover,
    #radar-2-filter-btn:hover,
    #time-control-panel label[for="date-input"]:hover,
    #time-control-panel-3d label[for="date-input-3d"]:hover,
    #time-control-panel-sky label[for="date-input-sky"]:hover,
    #time-control-panel-flare-view label[for="date-input-flare-view"]:hover,
    #close-time-control-btn:hover,
    #close-time-control-btn-3d:hover,
    #close-time-control-btn-sky:hover,
    #close-time-control-btn-flare-view:hover {
        border-color: rgba(255, 255, 255, 0.3);
        color: var(--color-text-primary);
        background-color: rgba(255, 255, 255, 0.1);
        transform: scale(1.05);
    }
}

#toggle-aircraft-btn {
    display: none;
    /* Oculto por defecto */
}

body.nearby-mode-active #toggle-aircraft-btn,
body.radar-2-active #toggle-aircraft-btn {
    display: flex;
    /* Visible solo en modo "Cerca" o "Radar 2" */
}

#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;
}

#btn-iss-world.active {
    color: var(--color-secondary);
    background-color: rgba(88, 166, 255, 0.1);
}

/* -- 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) + var(--safe-bottom) + var(--map-ad-height) + var(--admob-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(22rem, 95vw, 40rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

/* Agrandar título principal para mejor jerarquía */
.start-content-wrapper h1 {
    font-size: clamp(2rem, 8vw, 2.5rem) !important; /* Aumentado */
    letter-spacing: -0.02em;
}

.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;
    /* Gap ligeramente reducido para cohesión */
    gap: clamp(0.5rem, 4vw, 1rem);
    width: 100%;
    padding: clamp(0.9rem, 3.8vw, 1.2rem) clamp(1.2rem, 4.8vw, 1.45rem); /* Padding aumentado para más aire */
    height: clamp(5.6rem, 17vw, 6.6rem); /* Altura aumentada para mejor espaciado */
    box-sizing: border-box;
    overflow: hidden;

    /* Estilo Liquid Glass Mejorado (Restaurado) */
    background-color: rgba(255, 255, 255, 0.07);
    /* Transparencia aumentada para más brillo */
    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.2);
    /* Borde más claro */
    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;
}

@media (hover: hover) {
    .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);
    }
}

/* Ajuste para modo escritorio/horizontal: Botones más compactos */
@media (min-width: 1024px), (orientation: landscape) {
    .start-action-card {
        height: 5.0rem;
        padding: 0.75rem 1.5rem;
        max-width: 28rem;
        margin-left: auto;
        margin-right: auto;
    }
}

.start-action-icon {
    flex-shrink: 0;
    /* Icono más compacto */
    width: clamp(2.4rem, 10.5vw, 2.9rem);
    height: clamp(2.4rem, 10.5vw, 2.9rem);
    border-radius: 16px;
    /* Más redondeado (Squircle suave) */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fuente de icono reducida */
    font-size: clamp(1.0rem, 4.8vw, 1.25rem);

    /* ESTILO NUEVO: Minimalista Flat/Glass - Estilo Hover Fijo */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%);
    color: var(--color-secondary);
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* Borde más visible */

    /* Sin sombra interna pesada, solo un glow suave exterior si se quiere, o nada para minimalismo */
    box-shadow: none;

    position: relative;
    /* <-- Añadido */
    z-index: 1;
    /* <-- Añadido */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Efecto de luz en el ícono interno */
.start-action-icon i {
    filter: drop-shadow(0 0 5px rgba(88, 166, 255, 0.4));
    transition: transform 0.3s ease;
}

/* Efecto Hover en la tarjeta afecta al ícono */
.start-action-card:hover .start-action-icon {
    /* El estilo visual ya está por defecto, solo mantenemos la escala */
    transform: scale(1.05);
}

.start-action-icon.primary {
    color: white;
    /* Ícono blanco brillante */
    /* Fondo sólido con opacidad, más moderno y plano */
    background: rgba(48, 129, 247, 0.15);
    border-color: rgba(48, 129, 247, 0.2);
    /* Borde sutil */
    /* Glow suave solo hacia afuera */
    box-shadow: 0 0 25px rgba(48, 129, 247, 0.15);
}

.start-action-icon.primary i {
    filter: drop-shadow(0 0 8px rgba(48, 129, 247, 0.8));
}

.start-action-text {
    flex-grow: 1;
    text-align: left;
    position: relative;
    /* <-- Añadido */
    z-index: 1;
    /* <-- Añadido */
}

.start-action-title {
    font-weight: 700;
    font-size: 1.05rem; /* Ajustado para coincidir con títulos de pasos */
    color: var(--color-text-primary);
    margin-bottom: 3px;
}

.start-action-subtitle {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 0.75rem; /* Reducido levemente para consistencia */
    color: var(--color-text-secondary);
    line-height: 1.3;
    opacity: 0.9;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.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.95rem;
    /* 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);
}

/* --- Segmented Control para Pestañas (Mejores Pasos) - REFINADO V2 --- */
.segmented-control-container {
    display: flex;
    /* Fondo: Transparente oscuro con toque azulado */
    background-color: rgba(13, 19, 24, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 9999px;
    padding: 3px;
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
    /* Borde: Sutil */
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    /* Sombra interna suave */
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* El fondo que se desliza (LA PESTAÑA ACTIVA) */
.segment-glider {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    /* Fondo activo: Azul Tech con transparencia */
    background-color: rgba(48, 129, 247, 0.25);
    border-radius: 9999px;
    z-index: 0;
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* Glow azul sutil */
    box-shadow: 0 0 15px rgba(48, 129, 247, 0.3);
    border: 1px solid rgba(48, 129, 247, 0.4);
}

/* Estado cuando está a la derecha */
.segmented-control-container.show-all .segment-glider {
    transform: translateX(100%);
}

.segment-btn {
    flex: 1 1 0px;
    /* Fuerza ancho igualitario estricto */
    position: relative;
    z-index: 1;
    /* Texto sobre el glider */
    padding: 4px 0;
    /* Vertical fijo, horizontal 0 para centrar bien */
    border-radius: 9999px;
    border: none;
    background: transparent;
    /* Fondo siempre transparente */
    /* Color inactivo: Gris azulado */
    color: #8b949e;
    font-size: 0.8rem;
    font-weight: 600;
    /* Peso medio constante para evitar saltos */
    cursor: pointer;
    transition: color 0.2s ease;
    /* Solo animamos el color */
    text-align: center;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.segment-btn:hover {
    color: #c9d1d9;
    /* Un gris más claro en hover */
}

.segment-btn.active {
    /* Color activo: Blanco */
    color: #FFFFFF;
    text-shadow: 0 0 10px rgba(48, 129, 247, 0.5);
}

/* --- 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-best-passes-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.4;
    /* FIX: Opacidad reducida y estática para que no parezca activo */

    /* Animación desactivada por defecto para evitar "parpadeo fantasma" */
    /* 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-best-passes-btn {
    border-color: rgba(48, 129, 247, 0.6);
    /* var(--color-primary) con más opacidad */

    /* Sombra con luz interna celeste y glow externo */
    box-shadow:
        inset 0 1px 0 0 rgba(150, 210, 255, 0.55),
        /* Luz superior más brillante */
        inset 0 0 0 1px rgba(150, 210, 255, 0.2),
        /* Anillo perimetral más visible */
        0 8px 30px rgba(0, 0, 0, 0.3),
        0 0 15px rgba(48, 129, 247, 0.2);
}

@media (hover: hover) {
    #open-best-passes-btn:hover {
        border-color: rgba(48, 129, 247, 0.7);
        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);
    }

    /* Activamos la animación SOLO si hay un mouse real encima */
    #open-best-passes-btn:hover::before {
        opacity: 0.8;
        animation: pan-flashes 15s linear infinite;
    }
}

/* --- 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;
}

@media (hover: hover) {
    .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 */
}

/* DESPUÉS */
/* Ajuste para el estado presionado */
.start-action-pill.is-pressed {
    opacity: 0.8;
    transition: opacity 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;
}

@media (hover: hover) {
    .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 */
}

/* DESPUÉS */
/* Ajuste para el estado presionado */
.start-action-pill.is-pressed {
    opacity: 0.8;
    transition: opacity 0.1s ease;
}

/* --- FIN: Estilos para el botón de Radar --- */

/* --- INICIO: Estilos Globo Plano (Portado de V1.1) --- */
#home-3d-container {
    position: fixed !important;
    top: 35% !important;
    left: 50% !important;

    /* Tamaño gigante para el efecto de curvatura */
    width: max(125vmin, 105vh) !important;
    height: max(125vmin, 105vh) !important;

    max-width: 2200px !important;
    max-height: 2200px !important;

    transform: translate3d(-50%, -50%, 0) !important;
    z-index: 1;
    pointer-events: none;
    border-radius: 50%;

    background-color: #000000;
    overflow: hidden;
    opacity: 1;
}

.earth-texture-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;

    background-size: 200% 100%;
    background-repeat: repeat-x;

    /* Posición fija centrada en América (aprox) */
    background-position: 15% 0;

    will-change: background-position;
    transform: translateZ(0);
    z-index: 0;

    /* Animación de rotación continua (bucle de 4 minutos) */
    animation: earthLoop 240s linear infinite;

    /* OPTIMIZACIÓN: Opacidad inicial 0 para fade-in al cargar */
    opacity: 0;
    transition: opacity 1.5s ease-in;
}

@keyframes earthLoop {
    from {
        background-position: 15% 0;
    }

    to {
        background-position: 215% 0;
    }

    /* +200% es una vuelta exacta del patrón */
}

/* Capa de sombra/iluminación estática */
#home-3d-container::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 90%;
    z-index: 2;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.55);
}

/* Degradado radial inverso (Viñeta) para fundir los bordes */
#start-screen .home-vignette-overlay {
    position: absolute !important;
    inset: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5 !important;
    /* Encima del globo (z-1) */
    pointer-events: none;
    background: radial-gradient(circle at center, transparent 0%, transparent 35%, #000000 85%);
    width: 100%;
    height: 100%;
    margin: 0 !important;
    transform: none !important;
}

/* AJUSTE VERTICAL: Subir el centro del degradado en modo vertical para coincidir con el globo (40%) */
@media (orientation: portrait) {
    #start-screen .home-vignette-overlay {
        background: radial-gradient(circle at 50% -20%, transparent 0%, transparent 05%, #000000 85%) !important;
    }
}

/* CORRECCIÓN: Ajuste para modo horizontal (agujero más chico para tapar bordes) */
@media (orientation: landscape) {
    #start-screen .home-vignette-overlay {
        /* Reducimos drásticamente los porcentajes porque la diagonal es muy larga en horizontal */
        background: radial-gradient(circle at center, transparent 0%, transparent 12%, #000000 55%) !important;
    }

    /* FIX: Centrar el círculo de la Tierra verticalmente en modo horizontal */
    #home-3d-container {
        top: 50% !important;
    }
}

/* Aseguramos que el contenido flote POR ENCIMA del globo */
#start-screen>div:not(#home-3d-container):not(.home-vignette-overlay):not(#star-field) {
    position: relative;
    z-index: 10;
}

/* --- FIN: Estilos Globo Plano --- */



/* 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 + var(--safe-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: calc(1.5rem + var(--safe-bottom));
}

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.radar-2-active #toggle-time-control-btn,
body.map-active #toggle-time-control-btn-3d,
body.map-active #toggle-time-control-btn-sky,
#ar-container~#toggle-time-control-btn {
    bottom: calc(var(--bottom-margin-dynamic) + var(--map-ad-height) + var(--admob-height) + var(--safe-bottom));
}

body.map-active #time-control-panel,
body.radar-2-active #time-control-panel,
body.map-active #time-control-panel-3d,
body.map-active #time-control-panel-sky,
#ar-container~#time-control-panel {
    bottom: calc(var(--bottom-margin-dynamic) + var(--map-ad-height) + var(--admob-height) + var(--safe-bottom));
}

body.map-active #prediction-date-display,
body.radar-2-active #prediction-date-display,
#ar-container~#prediction-date-display,
body.map-active #time-travel-date-display,
body.radar-2-active #time-travel-date-display,
#ar-container~#time-travel-date-display {
    bottom: calc(2.75rem + var(--bottom-margin-dynamic) + var(--map-ad-height) + var(--admob-height) + var(--safe-bottom));
}

body.map-active #map-style-switcher,
body.radar-2-active #map-style-switcher {
    bottom: calc(var(--bottom-margin-dynamic) + var(--map-ad-height) + var(--admob-height) + var(--safe-bottom));
}

body.map-active #action-controls,
body.radar-2-active #action-controls {
    bottom: calc(var(--bottom-margin-dynamic) + var(--map-ad-height) + var(--admob-height) + var(--safe-bottom));
}

body.radar-2-active #map-style-switcher,
body.radar-2-active #action-controls {
    pointer-events: none;
    opacity: 1;
    transform: translateY(0);
    z-index: 1000 !important;
}

body.radar-2-active #map-style-toggle-btn {
    display: none !important;
}

body.map-active #visibility-controls {
    bottom: calc(4.25rem + var(--bottom-margin-dynamic) + var(--map-ad-height) + var(--admob-height) + var(--safe-bottom));
}

/* ========================================================================== 
    PANTALLAS DE INFO, SATÉLITES Y PASOS
    ========================================================================== */
.pass-date-header {
    /* REDISEÑO: Texto limpio sin recuadro */
    width: 100%;

    /* Separación entre grupos: Bajamos de 4.5rem a 2rem.
       Sumado al gap del flex, da una separación clara pero no kilométrica. */
    margin-top: 2rem !important;

    /* Separación con la tarjeta: Bajamos drásticamente.
       0.25rem + el gap del flex (0.75rem) = 1rem (16px) total. Ideal para subtítulos. */
    margin-bottom: 0.25rem;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    /* Sacamos el padding extra, ya no hace falta */

    /* Eliminamos estilo de caja */
    background-color: transparent;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    font-size: 0.85rem;
    /* Aumentado para mejor lectura */
    font-weight: 500;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    position: relative;
    /* Para posicionar la línea separadora */
}

/* Ajuste para el primer encabezado: margin-top menor porque no tiene grupo anterior */
.pass-date-header:first-child {
    margin-top: 1rem !important;
}

/* ELIMINADO: Ya no necesitamos forzar margin-top: 0 en la tarjeta siguiente, 
   porque Flexbox gap maneja el espacio consistentemente. */

/* Línea separadora delicada después de la fecha */
.pass-date-header::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.25) 0%, transparent 100%);
    /* Más visible */
    margin-left: 0.75rem;
    pointer-events: none;
    margin-right: -2rem;
}

.pass-date-header::before {
    content: '\f133';
    /* Icono fa-calendar-days */
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
    /* Regular */
    font-size: 1.1em;
    opacity: 1;
    display: inline-block;
    color: var(--color-text-secondary);
    transform: translateY(-1px);
}

.pass-date-header.is-today::before {
    color: inherit;
}

/* EXCEPCIÓN: Ocultar la barra azul en pantallas de Reingresos/Críticos */
#reentries-screen .pass-date-header::before,
#critical-passes-screen .pass-date-header::before {
    /* Restauramos el icono también en estas pantallas */
    display: inline-block;
}

/* ========================================================================== 
   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 {
    font-size: 0.85rem;
    /* Texto más chico */
    font-weight: 700;
    color: var(--color-text-secondary);
    /* Gris en vez de blanco para no competir */
    text-transform: uppercase;
    /* Mayúsculas para categoría */
    letter-spacing: 0.1em;
    /* Tracking amplio */
    padding: 0 0.5rem;
    margin-bottom: 0.75rem;
    margin-top: 1.5rem;
    /* Más separación arriba */
    display: flex;
    align-items: center;
}

/* Eliminamos el acento visual lateral, es ruido innecesario */
.list-title::before {
    display: none;
}

.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);
    /* CAMBIO: Fondo un poco más claro e intenso para separar del negro */
    background-color: #161b22;
    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;
}

/* Ajuste de margen para tarjetas de texto sin icono (Populares/Brillantes) */
.known-satellite-btn .satellite-entry-info {
    padding-left: 0.5rem;
}

.satellite-entry-name {
    font-weight: 700;
    /* Más peso para mejor lectura */
    font-size: 1rem !important;
    /* Un pelín más grande */
    color: rgba(255, 255, 255, 0.95);
    /* Blanco casi puro */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
    /* Tracking moderno */
    margin-bottom: 2px;
    /* Separación sutil del subtítulo */
}

.satellite-entry-desc {
    font-family: 'Space Grotesk', monospace;
    /* Toque técnico */
    font-size: 0.75rem !important;
    /* Más chico para contraste */
    color: rgba(255, 255, 255, 0.5);
    /* Gris más apagado */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.02em;
}

.satellite-entry-desc.expanded {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
}

.see-more-note-btn {
    font-size: 0.7rem;
    color: var(--color-secondary);
    background: none;
    border: none;
    padding: 0;
    margin-top: 2px;
    cursor: pointer;
    font-weight: 600;
    display: inline-block;
    transition: color 0.2s ease;
}

.see-more-note-btn:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.satellite-entry-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    /* Espacio reducido entre botones */
    padding-right: 0;
    /* Padding eliminado, lo maneja el padre */
    flex-shrink: 0;
}

.satellite-entry-actions .sat-status-indicator {
    width: 16px;
    /* Icono de estado más discreto */
    text-align: center;
    color: var(--color-text-secondary);
    opacity: 0.7;
}

.satellite-entry-actions .favorite-btn,
.satellite-entry-actions .reload-sat-btn,
.satellite-entry-actions .delete-sat-btn,
.satellite-entry-actions .sat-options-btn {
    padding: 0.5rem;
    /* Quitamos el margen negativo excesivo */
    margin: 0;
    height: 32px;
    /* Área de toque fija */
    width: 32px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    /* Fondo transparente (Sin círculo visible) */
    border-radius: 50%;
    /* Círculo perfecto (Mantenido para el hover) */
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Hover estado para los botones de acción */
.satellite-entry-actions .favorite-btn:hover,
.satellite-entry-actions .reload-sat-btn:hover,
.satellite-entry-actions .delete-sat-btn:hover,
.satellite-entry-actions .sat-options-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-primary);
}

/* --- INICIO: Rediseño "Liquid Glass" para Pantalla de Satélites --- */

/* Estilo Píldora Base (Compacto para Brillantes/Mis Satélites) */
.satellite-entry.satellite-pill {
    border-radius: 9999px !important;
    min-height: 56px;
    padding: 0 0.5rem 0 1.25rem !important;
    align-items: center;
}

/* MODIFICADOR: Estilo Grande solo para Populares */
.satellite-entry.satellite-pill.pill-large {
    border-radius: 32px !important;
    min-height: 72px;
    padding: 0.5rem 0.75rem 0.5rem 1.25rem !important;
    margin-bottom: 0.5rem;
}

.glass-screen-bg .satellite-entry {
    /* CAMBIO: Degradado más intenso y claro para contraste */
    background: linear-gradient(145deg, rgba(14, 21, 31, 0.85) 0%, rgba(30, 30, 35, 0.5) 100%);

    /* OPTIMIZACIÓN: Sin desenfoque, solo transparencia */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    /* BORDE: Restaurado al original más brillante */
    border: 1px solid rgba(255, 255, 255, 0.12);

    /* Corrección de bordes */
    background-clip: padding-box;

    /* SOMBRAS: Estilo "Liquid Glass" original con profundidad 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),
        inset 0 0 20px rgba(255, 255, 255, 0.03),
        0 0 30px -5px rgba(0, 0, 0, 0.5);

    /* FORMA: Restaurado a 24px como en v2 (Igual a Pasos) */
    border-radius: 24px;
    transition: all 0.25s var(--ease-out-cubic);
    /* AJUSTE FINO: Padding equilibrado */
    padding: 1rem;
}

.glass-screen-bg .satellite-entry:hover {
    border-color: rgba(255, 255, 255, 0.3);
    /* CAMBIO: Hover también en gris y lineal */
    background: linear-gradient(145deg, rgba(24, 28, 37, 0.8) 0%, rgba(30, 30, 30, 0.5) 100%);
    transform: translateY(-2px);
    /* Restauramos el "float" original */
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.35);
    /* Sombra original más profunda */
}

.glass-screen-bg .satellite-entry-clickable {
    padding: 0;
    /* Sin padding extra para alineación perfecta */
}

.glass-screen-bg .satellite-entry-actions {
    padding-right: 0;
    margin-right: 0;
    /* Sin margen negativo */
}

.glass-screen-bg .satellite-entry-name {
    font-size: 1rem;
    font-weight: 600;
}

.glass-screen-bg .satellite-entry-desc {
    font-size: 0.75rem;
}

.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.4) !important;
    /* Fondo degradado "Cósmico" más intenso para destacar */
    background: radial-gradient(circle at 100% 0%, rgba(88, 166, 255, 0.2) 0%, rgba(20, 25, 30, 0.6) 100%) !important;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-bottom: 0.75rem !important;
    /* REDUCIDO: Para que las listas fijadas queden pegadas como parte del grupo */
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5) !important;
    border-radius: 24px !important;
}

/* 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;
}

@media (hover: hover) {
    .starlink-special-entry:hover {
        border-color: var(--color-starlink-icon) !important;
        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);
    }
}

.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 y botones neutrales */
#change-location-from-start-btn,
.btn-pill-link-small.neutral {
    color: var(--color-text-secondary);
}

#change-location-from-start-btn:hover,
.btn-pill-link-small.neutral: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 */
}

/* --- NUEVO: Tarjetas de Acción Compactas (Menú) --- */
.menu-action-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    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.1);
    border-radius: 9999px;
    color: var(--color-text-secondary);
    transition: all 0.2s ease;
    cursor: pointer;
}

.menu-action-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
    transform: translateY(-2px);
}

.menu-action-card i {
    font-size: 1.2rem;
    color: var(--color-secondary);
}

.menu-action-card.green i {
    color: var(--color-success);
}

.btn-pill-install.green {
    color: var(--color-success);
    border-color: var(--color-success);
    background-color: rgba(57, 211, 83, 0.15);
}

.btn-pill-install.green:hover {
    color: #000;
    border-color: var(--color-success);
    background-color: var(--color-success);
}

.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;
    flex-direction: column;
    /* Cambio a columna para el nuevo diseño */
    align-items: stretch;
    justify-content: flex-start;
    /* AJUSTE FINO: Gap un poco más cerrado para acompañar (max 1rem) */
    gap: 0.5rem;
    border-radius: 24px;
    -webkit-tap-highlight-color: transparent;

    /* Estilo Tech/Espacial - AUMENTADO INTENSIDAD */
    background: linear-gradient(145deg, rgba(22, 32, 45, 0.7) 0%, rgba(32, 32, 38, 0.4) 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);

    /* Borde más visible */
    border: 1px solid rgba(255, 255, 255, 0.2);
    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);

    padding: 1rem 1rem;
    /* Más aire vertical */
    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, border-color 0.3s ease;

    /* Variable de color para el indicador (Azul por defecto) */
    --indicator-color: 48, 129, 247;
}

/* --- INICIO: Altura dinámica para el nombre del satélite (Rediseño Compacto) --- */
.pass-card .flex-grow .font-bold {
    min-height: auto;
    display: block;
    margin-bottom: 0.25rem;
}

/* --- 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.15rem;
        gap: 1rem;
        border-radius: 24px;
        /* Actualizado para coincidir con el nuevo diseño */
    }
}

/* OPTIMIZACIÓN HORIZONTAL: Tarjetas más compactas en escritorio/landscape */
@media (min-width: 1024px),
(orientation: landscape) {
    .pass-card {
        padding: 1rem 1.25rem !important;
        gap: 0.25rem !important;
    }

    .pass-card .flex-grow .font-bold {
        margin-bottom: 0 !important;
    }
}

.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,
#critical-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) */
}

/* --- INICIO: Colores dinámicos para el rating de estrellas --- */
.star-rating-container.stars-1 {
    color: var(--color-danger);
}

.star-rating-container.stars-2 {
    color: #F9733F;
}

.star-rating-container.stars-3 {
    color: #FB9B3A;
}

.star-rating-container.stars-4 {
    color: #FDBE34;
}

.star-rating-container.stars-5 {
    color: var(--color-warning);
}

.star-rating-container.stars-1::after {
    background-color: var(--color-danger);
}

.star-rating-container.stars-2::after {
    background-color: #F9733F;
}

.star-rating-container.stars-3::after {
    background-color: #FB9B3A;
}

.star-rating-container.stars-4::after {
    background-color: #FDBE34;
}

.star-rating-container.stars-5::after {
    background-color: var(--color-warning);
}

/* --- FIN: Colores dinámicos para el rating de estrellas --- */

.filter-btn.active {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

#best-passes-location-feedback,
#critical-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,
#general-launches-screen .overflow-y-auto,
#launch-events-screen .overflow-y-auto,
#eclipses-screen .overflow-y-auto,
#passes-screen .overflow-y-auto,
#iss-passes-screen .overflow-y-auto,
#eclipse-details-screen .overflow-y-auto,
#low-orbits-screen .overflow-y-auto,
#critical-passes-screen .overflow-y-auto,
#prediction-screen .overflow-y-auto,
#all-satellites-screen .overflow-y-auto,
#custom-list-screen .overflow-y-auto,
#search-satellites-screen .overflow-y-auto,
#whereditpass-screen .overflow-y-auto,
#transit-hunter-screen .overflow-y-auto,
#astrophoto-screen .overflow-y-auto,
#reentries-screen .overflow-y-auto {
    padding-top: 1rem;
    padding-bottom: calc(60px + 1.5rem + var(--safe-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 + var(--safe-bottom));
}

#map-style-switcher,
#action-controls,
#orbit-3d-menu-btn,
#orbit-3d-play-btn,
#cinematic-speed-control,
#game-guess-btn,
#radar-2-left-controls,
#radar-2-right-controls {
    transition: opacity 0.4s var(--ease-out-quint), transform 0.4s var(--ease-out-quint), bottom 0.4s var(--ease-out-quint);
    will-change: opacity, transform;
}

body.time-controls-active #map-style-switcher,
body.time-controls-active #action-controls,
body.time-controls-active #sky-filter-magnitude-btn,
body.time-controls-active #sky-orientation-toggle-btn,
body.time-controls-active #orbit-3d-menu-btn,
body.time-controls-active #orbit-3d-play-btn,
body.time-controls-active #cinematic-speed-control,
body.time-controls-active #game-guess-btn,
body.time-controls-active #radar-2-left-controls,
body.time-controls-active #radar-2-right-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);
}


.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;
    }
}

/* ========================================================================== 
    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 */
}

/* --- UI DE CAPTURA DE PANTALLA --- */
#capture-guide-box {
    /* La sombra gigante oscurece todo alrededor del cuadro */
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
}

#capture-action-buttons {
    bottom: calc(2.5rem + var(--map-ad-height) + var(--admob-height) + var(--safe-bottom));
    transition: bottom 0.4s var(--ease-out-quint);
}

#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 {
    margin-top: 1rem;
}


/* ========================================================================== 
   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.05);
    opacity: 1;
    transition-duration: 0.4s;
}

/* --- NUEVO: Fila de metadatos (Estrellas + Info Separación) --- */
.pass-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* Permite bajar si no hay espacio en pantallas mini */
    gap: 0.5rem;
    /* Espacio entre estrellas y estado */
    margin-top: 0;
    /* Margen eliminado, ahora usamos gap en el padre */
}

/* Ajuste para que las estrellas no tengan margen propio dentro de la fila */
.pass-meta-row .star-rating-container {
    margin-top: 0;
}

/* Nuevo estilo minimalista para el estado de Starlink */
.starlink-pass-text {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    /* Texto gris limpio */
    letter-spacing: 0.02em;
}

/* El punto de color indicador */
.starlink-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    box-shadow: 0 0 6px currentColor;
    /* Glow del mismo color que el punto */
}

/* --- Botón de Ángulo de Fase (Minimalista) --- */
.phase-angle-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-secondary);
    font-family: 'Space Grotesk', monospace;
    font-size: 0.65rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 0.5rem;
}

.phase-angle-btn:hover {
    background-color: rgba(88, 166, 255, 0.1);
    border-color: var(--color-secondary);
    color: var(--color-secondary);
    transform: translateY(-1px);
}

/* ========================================================================== 
   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.75rem;
    /* Un poco más chico y técnico */
    font-weight: 700;
    color: var(--color-text-secondary);
    /* Menos agresivo, gris técnico */
    text-transform: uppercase;
    letter-spacing: 0.15em;
    /* Tracking amplio estilo NASA */
    padding: 1.5rem 0.5rem 0.5rem;
    margin-bottom: 0.25rem;
    border-bottom: none;
    text-shadow: none;
    /* Limpiamos el brillo para legibilidad */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    /* Compactado */
    min-height: 50px;
    /* Altura mínima reducida */
}

.setting-item:last-child {
    border-bottom: none;
}

.setting-section-title {
    margin-bottom: 0.5rem;
}

.setting-group {
    /* ESTILO TECH/ESPACIAL: Glass Gradient Profundo (Coincide con Menú) */
    background: linear-gradient(145deg, rgba(22, 32, 45, 0.8) 0%, rgba(32, 32, 38, 0.5) 100%);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Borde más fino y brillante */
    border: 1px solid rgba(255, 255, 255, 0.12);

    /* Corrección de bordes */
    background-clip: padding-box;

    /* Sombra con volumen */
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
        inset 0 0 20px rgba(0, 0, 0, 0.1),
        0 4px 15px -2px rgba(0, 0, 0, 0.4);

    border-radius: 16px;
    /* Squircle más técnico */

    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: 0.75rem;
    font-weight: 500;
    font-size: 0.95rem;
    /* Texto un poco más fino */
    color: rgba(255, 255, 255, 0.9);
}

.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;
    /* ANCHO FIJO Y ESTABLE */
    width: 100%;
    max-width: 320px;
    /* Unifica el tamaño de todos los controles (Pasos, Mapa, etc.) */

    /* Track hundido más oscuro */
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
    border-radius: 9999px;
    /* Píldora perfecta */
    padding: 3px;

    /* Evita que se encoja menos de lo legible */
    min-width: 200px;
}

.segmented-control-btn {
    /* ESTRUCTURA FLEXIBLE PERO FIJA */
    flex: 1;
    /* Ocupan espacios idénticos */
    width: 0;
    /* TRUCO CLAVE: Fuerza al flex a respetar el tamaño del contenedor, no del texto */
    min-width: 0;
    /* Permite que se encoja para mostrar puntos suspensivos */

    text-align: center;
    padding: 0.35rem 0.5rem;
    /* Padding lateral reducido para dar aire al texto */
    border-radius: 9999px;

    /* ESTABILIDAD VISUAL */
    font-weight: 600;
    /* Peso constante para evitar saltos al activar */
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    /* Color apagado por defecto */

    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid transparent;
    background-color: transparent;
    cursor: pointer;

    /* TRUNCADO CON PUNTOS SUSPENSIVOS */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.segmented-control-btn:hover:not(.active) {
    color: var(--color-text-primary);
    background-color: rgba(255, 255, 255, 0.05);
}

.segmented-control-btn.active {
    /* Botón activo con efecto de luz */
    background-color: rgba(48, 129, 247, 0.2);
    color: var(--color-secondary);
    border-color: rgba(48, 129, 247, 0.3);
    box-shadow: 0 0 10px rgba(48, 129, 247, 0.1);
    text-shadow: 0 0 5px rgba(48, 129, 247, 0.5);
}

.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.5rem;

    /* TAMAÑO CONTROLADO */
    width: 100%;
    max-width: 320px;
    /* Coincide con .segmented-control */

    /* Estilo Tech Container */
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    padding: 0.4rem 1rem;

    justify-content: space-between;
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-toggle-btn:hover {
    border-color: var(--color-secondary);
    color: white;
    background-color: rgba(48, 129, 247, 0.1);
    box-shadow: 0 0 10px rgba(48, 129, 247, 0.1);
}

/* 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 {
    /* Eliminamos overrides de padding para mantener la forma de píldora */
    margin-top: 1.25rem;
}

/* ========================================================================== 
   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 */
}

/* ========================================================================== 
   NUEVOS ESTILOS PANTALLA EVENTOS / CALENDARIO (AESTHETIC)
   ========================================================================== */

/* Ajuste específico para el título en la pantalla de eventos */
#events-screen .list-title {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    /* Mucho más chico y sutil */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    /* Tracking amplio para sofisticación */
    color: var(--color-text-secondary);
    opacity: 0.8;
    padding-left: 0.5rem;
}

/* Tarjeta de navegación (Eclipses/Lanzamientos) - Estilo Ultra-Thin Minimal */
.aesthetic-nav-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    /* Gap reducido */
    width: 100%;
    padding: 0.7rem 1rem;
    /* Padding vertical muy reducido para ser "delicado" */

    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.005) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    /* Radio menos pronunciado, más técnico */

    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-align: left;
    min-height: 48px;
    /* Altura mínima mucho más chica */
}

.aesthetic-nav-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.4);
}

/* Contenedor del ícono (Minimalista y Compacto) */
/* Contenedor del ícono (Solo el ícono, sin caja) */
.aesthetic-nav-icon {
    flex-shrink: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    /* Icono delicado */

    background: transparent !important;
    /* Forzamos transparencia */
    border: none;
    box-shadow: none !important;
    /* Sin glow de caja */

    transition: transform 0.3s ease;
}

.aesthetic-nav-card:hover .aesthetic-nav-icon {
    transform: scale(1.1);
}

/* Variación Eclipse: Icono Dorado con Glow de Texto */
.aesthetic-nav-icon.eclipse {
    color: #FFC107;
    filter: drop-shadow(0 0 5px rgba(255, 193, 7, 0.4));
}

.aesthetic-nav-icon.eclipse i {
    color: #FFC107;
}

/* Variación Lanzamiento: Icono Azul con Glow de Texto */
.aesthetic-nav-icon.launch {
    color: var(--color-secondary);
    filter: drop-shadow(0 0 5px rgba(88, 166, 255, 0.4));
}

.aesthetic-nav-icon.launch i {
    color: var(--color-secondary);
}

/* Texto del botón */
.aesthetic-nav-card span.text-lg {
    font-size: 1rem !important;
    /* Forzamos tamaño más chico */
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}

/* Flecha derecha */
.aesthetic-nav-arrow {
    color: var(--color-text-secondary);
    opacity: 0.4;
    font-size: 0.8rem;
    transition: transform 0.3s ease, opacity 0.3s ease;
    margin-left: auto;
    /* Empuja la flecha al final si hay espacio */
}

.aesthetic-nav-card:hover .aesthetic-nav-arrow {
    opacity: 0.8;
    transform: translateX(2px);
    color: var(--color-text-primary);
}


/* ========================================================================== 
   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="date-input-sky"],
label[for="time-input"],
label[for="time-input-3d"],
label[for="time-input-sky"] {
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

label[for="date-input"] input,
label[for="date-input-3d"] input,
label[for="date-input-sky"] input,
label[for="time-input"] input,
label[for="time-input-3d"] input,
label[for="time-input-sky"] 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="date-input-sky"] input::-webkit-calendar-picker-indicator,
label[for="time-input"] input::-webkit-calendar-picker-indicator,
label[for="time-input-3d"] input::-webkit-calendar-picker-indicator,
label[for="time-input-sky"] 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,
label[for="date-input-sky"]>i {
    pointer-events: none;
}

/* ==========================================================================
   AJUSTES PERSONALIZADOS
   ========================================================================== */

/* Estilos para el menú de Vista 3D */
#orbit-3d-options-menu.visible {
    display: block !important;
    opacity: 1 !important;
    transform: scale(1) !important;
}

.orbit-3d-option-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    background: transparent;
    border: 1px solid transparent;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    text-align: left;
}

.orbit-3d-option-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateX(2px);
}

.orbit-3d-option-btn:active {
    transform: scale(0.98);
}

.option-icon-container {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
    color: var(--color-secondary);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.orbit-3d-option-btn:hover .option-icon-container {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-secondary);
    box-shadow: 0 0 10px rgba(48, 129, 247, 0.4);
}

.option-label {
    flex-grow: 1;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

/* Contenedor de controles de tiempo en forma de píldora */
#time-control-panel .flex.items-center.justify-between[class*="rounded-lg"],
#time-control-panel-sky .flex.items-center.justify-between[class*="rounded-lg"] {
    border-radius: 9999px;
}

/* Botón de fecha en forma de píldora */
label[for="date-input"],
label[for="date-input-sky"],
label[for="date-input-flare-view"] {
    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,
#timeline-slider-sky,
#timeline-slider-flare-view {
    height: 14px;
    border-radius: 7px;
}

#timeline-slider::-webkit-slider-thumb,
#timeline-slider-3d::-webkit-slider-thumb,
#timeline-slider-sky::-webkit-slider-thumb,
#timeline-slider-flare-view::-webkit-slider-thumb {
    width: 30px;
    height: 30px;
    border-width: 5px;
}

#timeline-slider::-moz-range-thumb,
#timeline-slider-3d::-moz-range-thumb,
#timeline-slider-sky::-moz-range-thumb,
#timeline-slider-flare-view::-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 {
    --indicator-color: 48, 129, 247;
    /* Azul */
    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 20px 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-5star {
    /* <--- AGREGADO: Ahora las 5 estrellas usan el mismo dorado */
    --indicator-color: 247, 181, 48;
    /* Amarillo */
    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 20px 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 25px 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, aplicamos el diseño "Hoy" (borde+brillo) pero en dorado */
.pass-card-today.pass-card-5star {
    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 25px 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 */
}



/* ========================================================================== 
   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.5rem;
    /* Un poco más pequeño */
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.1em;
    /* Más espaciado (tracking) para elegancia */
    opacity: 0.6;
    /* Menos contraste para no molestar */
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.live-indicator {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: calc(100% + 2rem);
    /* Compensa el padding horizontal de la tarjeta */
    margin: -1.25rem -1rem 0.75rem -1rem;
    /* Compensa padding SUPERIOR y laterales */

    /* Nuevo diseño: Adaptable al color de la tarjeta */
    background: linear-gradient(90deg,
            rgba(var(--indicator-color), 0.1) 0%,
            rgba(var(--indicator-color), 0.2) 50%,
            rgba(var(--indicator-color), 0.1) 100%);
    border-bottom: 1px solid rgba(var(--indicator-color), 0.3);

    color: rgb(var(--indicator-color));
    padding: 0.75rem 0.6rem 0.45rem;

    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;

    box-shadow: 0 5px 20px -5px rgba(var(--indicator-color), 0.15);
    animation: expand-live-bar 0.4s var(--ease-out-quint) forwards;
    overflow: hidden;
}

/* Efecto de brillo que pasa (Shimmer) */
.live-indicator::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--indicator-color), 0.2), transparent);
    transform: skewX(-20deg);
    animation: live-shimmer 3s infinite;
}

@keyframes live-shimmer {
    0% {
        left: -100%;
    }

    20% {
        left: 200%;
    }

    100% {
        left: 200%;
    }
}

/* Punto pulsante (Indicador de grabación/vivo) */
.live-indicator::before {
    content: '';
    width: 6px;
    height: 6px;
    background-color: rgb(var(--indicator-color));
    border-radius: 50%;
    box-shadow: 0 0 8px rgb(var(--indicator-color));
    animation: live-dot-pulse 1.5s infinite;
}

@keyframes live-dot-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes expand-live-bar {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pass-card.is-live-card {
    z-index: 10;
    border-color: rgba(var(--indicator-color), 0.5) !important;
    box-shadow: 0 0 30px rgba(var(--indicator-color), 0.15), inset 0 0 0 1px rgba(var(--indicator-color), 0.3) !important;
}

.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) */
}

/* --- INICIO: Colores dinámicos para el rating de estrellas --- */
.star-rating-container.stars-1 {
    color: var(--color-danger);
}

.star-rating-container.stars-2 {
    color: #F9733F;
}

.star-rating-container.stars-3 {
    color: #FB9B3A;
}

.star-rating-container.stars-4 {
    color: #FDBE34;
}

.star-rating-container.stars-5 {
    color: var(--color-warning);
}

.star-rating-container.stars-1::after {
    background-color: var(--color-danger);
}

.star-rating-container.stars-2::after {
    background-color: #F9733F;
}

.star-rating-container.stars-3::after {
    background-color: #FB9B3A;
}

.star-rating-container.stars-4::after {
    background-color: #FDBE34;
}

.star-rating-container.stars-5::after {
    background-color: var(--color-warning);
}

/* --- FIN: Colores dinámicos para el rating de estrellas --- */

@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;
}

.social-share-icon.capture:hover {
    border-color: #a855f7;
    background-color: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

.social-share-icon.capture:hover {
    border-color: #a855f7;
    background-color: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

/* --- INICIO: Estilo para Popup de Paso Compartido (Liquid Glass) --- */
.shared-popup-glass {
    background: linear-gradient(145deg, rgba(22, 32, 45, 0.9) 0%, rgba(32, 32, 38, 0.7) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    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 20px 50px -10px rgba(0, 0, 0, 0.6);
    border-radius: 24px;
}

/* --- FIN: Estilo para Popup de Paso Compartido --- */

/* ========================================================================== 
   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.6rem clamp(1rem, 4vw, 1.5rem);
    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;
    justify-content: center;
}

.filter-pill-btn:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--color-text-primary);
}

.filter-pill-btn.is-modified {
    background-color: rgba(48, 129, 247, 0.15);
    border-color: var(--color-primary);
    color: white;
    box-shadow: 0 0 10px rgba(48, 129, 247, 0.2);
}

.filter-pill-btn span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 35vw;
}

.filter-pill-btn i {
    flex-shrink: 0;
}

/* --- INICIO: Nuevas Tarjetas de Navegación (Jerarquía Mejorada) --- */
.nav-feature-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem;
    height: 100%;
    min-height: 110px;

    background: linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;

    cursor: pointer;
    transition: all 0.3s var(--ease-out-quint);
    position: relative;
    overflow: hidden;
}

.nav-feature-card:hover {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.nav-feature-card .feature-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Color base delicado (Azul) visible siempre */
    background: rgba(88, 166, 255, 0.1);
    color: var(--color-secondary);
    border: 1px solid rgba(88, 166, 255, 0.2);
    box-shadow: 0 0 15px rgba(88, 166, 255, 0.1);
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.nav-feature-card:hover .feature-icon-box {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    box-shadow: 0 0 15px rgba(48, 129, 247, 0.4);
}

.nav-feature-card .feature-text-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: 100%;
}

.nav-feature-card .feature-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: white;
    line-height: 1.2;
}

.nav-feature-card .feature-subtitle {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    font-weight: 500;
    margin-top: 2px;
}

.nav-feature-card .feature-arrow {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    opacity: 0.5;
}

/* Variante para Reingresos (Rojo/Naranja) */
/* Estado base visible siempre */
.nav-feature-card.reentry-mode .feature-icon-box {
    background: rgba(248, 81, 73, 0.1);
    color: var(--color-danger);
    border-color: rgba(248, 81, 73, 0.2);
    box-shadow: 0 0 15px rgba(248, 81, 73, 0.15);
}

.nav-feature-card.reentry-mode:hover {
    border-color: rgba(248, 81, 73, 0.4);
}

.nav-feature-card.reentry-mode:hover .feature-icon-box {
    background: var(--color-danger);
    color: white;
    border-color: var(--color-danger);
    box-shadow: 0 0 15px rgba(248, 81, 73, 0.4);
}

/* --- FIN: Nuevas Tarjetas de Navegación --- */

/* ========================================================================== 
   NUEVOS BOTONES DASHBOARD (Mis Satélites / Reingresos)
   ========================================================================== */
.action-dashboard-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: clamp(105px, 32vw, 120px);
    /* Altura fija para consistencia */
    border-radius: 24px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;

    /* 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);

    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.action-dashboard-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.35);
}

/* Efecto de luz de fondo */
.card-bg-glow {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 50% 50%, var(--glow-color, rgba(255, 255, 255, 0.1)) 0%, transparent 60%);
    opacity: 0.3;
    /* Aumentado para que se vea el color por defecto */
    transition: opacity 0.3s ease, transform 0.5s ease;
    z-index: 0;
    pointer-events: none;
}

.action-dashboard-card:hover .card-bg-glow {
    opacity: 0.4;
    /* Cambio sutil */
    transform: scale(1.05);
}

.card-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: clamp(0.7rem, 4.8vw, 1.1rem);
    gap: 0.5rem;
}

.card-icon-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.icon-circle {
    width: clamp(32px, 10vw, 38px);
    height: clamp(32px, 10vw, 38px);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.9rem, 4vw, 1.1rem);
    /* Aplicamos el color y brillo por defecto */
    background: var(--btn-accent-color);
    border: 1px solid var(--btn-accent-color);
    box-shadow: 0 0 15px var(--btn-glow-color);
    color: white;
    transition: all 0.3s ease;
}

.action-dashboard-card:hover .icon-circle {
    transform: scale(1.1);
    /* Solo escala y brillo sutil */
    filter: brightness(1.2);
}

.card-text-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: 100%;
}

.card-label {
    font-size: 1rem;
    font-weight: 700;
    color: white;
    line-height: 1.1;
    margin-bottom: 2px;
}

.card-sublabel {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
}

/* --- ESTILOS ESPECÍFICOS POR TARJETA --- */

/* Mis Satélites (Azul/Violeta Tech) */
.card-favs {
    --glow-color: rgba(88, 166, 255, 0.8);
    --btn-accent-color: var(--color-primary);
    --btn-glow-color: rgba(48, 129, 247, 0.5);
    background: linear-gradient(145deg, rgba(20, 40, 70, 0.65) 0%, rgba(20, 25, 30, 0.3) 100%);
}

/* Reingresos (Naranja/Rojo Alerta) */
.card-risk {
    --glow-color: rgba(248, 81, 73, 0.8);
    --btn-accent-color: var(--color-danger);
    --btn-glow-color: rgba(248, 81, 73, 0.5);
    background: linear-gradient(145deg, rgba(70, 25, 25, 0.65) 0%, rgba(20, 25, 30, 0.3) 100%);
}

/* Eclipses (Naranja Intenso) */
.card-eclipse {
    --glow-color: rgba(249, 115, 22, 0.8);
    --btn-accent-color: #f97316;
    --btn-glow-color: rgba(249, 115, 22, 0.5);
    background: linear-gradient(145deg, rgba(70, 30, 10, 0.65) 0%, rgba(30, 15, 10, 0.3) 100%);
}

/* Lanzamientos (Violeta Cósmico) */
.card-launch {
    --glow-color: rgba(168, 85, 247, 0.8);
    --btn-accent-color: #a855f7;
    --btn-glow-color: rgba(168, 85, 247, 0.5);
    background: linear-gradient(145deg, rgba(45, 10, 60, 0.65) 0%, rgba(25, 10, 35, 0.3) 100%);
}

/* Badge "LIVE" para reingresos */
.live-dot-badge {
    font-size: 0.6rem;
    font-weight: 900;
    color: var(--color-danger);
    background: rgba(248, 81, 73, 0.15);
    border: 1px solid rgba(248, 81, 73, 0.3);
    padding: 2px 6px;
    border-radius: 999px;
    letter-spacing: 0.05em;
    animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
    0% {
        border-color: rgba(248, 81, 73, 0.3);
        box-shadow: 0 0 0 0 rgba(248, 81, 73, 0.2);
    }

    50% {
        border-color: rgba(248, 81, 73, 0.8);
        box-shadow: 0 0 5px 2px rgba(248, 81, 73, 0.2);
    }

    100% {
        border-color: rgba(248, 81, 73, 0.3);
        box-shadow: 0 0 0 0 rgba(248, 81, 73, 0);
    }
}

.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);
}


/* ========================================================================== 
   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.25rem;
    /* Reducido para agrupar mejor con la lista */
    padding: 0 0.25rem;
    /* Alineado con las tarjetas */
    margin-top: 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 {
    /* CORRECCIÓN: Agregado !important para evitar que el flex del padre lo mueva */
    position: absolute !important;
    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.25rem;
    /* 40px, igual altura que la píldora central para simetría */
    height: 2.25rem;
    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; Eliminado para permitir que el resplandor del icono se vea */
    /* Para el ellipsis */
    min-width: 0;
}

#daily-update-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    /* Permitir que el resplandor salga */
    /* 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 */
    overflow: visible;
    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 */
    }
}

/* --- ESTILOS PLANIFICADOR ASTROFOTO --- */
#astrophoto-exposure-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--color-secondary);
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 0 10px rgba(88, 166, 255, 0.6);
}

#astrophoto-passes-container .pass-card {
    border-left: 3px solid #c084fc !important; /* Acento púrpura para foto */
}

/* Resaltado de selección en Astrofoto (Sobrescribe estilos base y 5 estrellas) */
.pass-card.astro-selected {
    border-color: #c084fc !important;
    box-shadow: 0 0 25px rgba(192, 132, 252, 0.35) !important;
}

/* Adaptación específica para pasos especiales (Hoy/5 Estrellas) para mantener su anillo de luz interno, pero con glow violeta */
.pass-card.pass-card-5star.astro-selected,
.pass-card.pass-card-today.astro-selected {
    box-shadow: 
        0 0 35px rgba(192, 132, 252, 0.4),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.6),
        inset 0 0 20px rgba(192, 132, 252, 0.2) !important;
}

/* --- PÍLDORA DE TIEMPO ESTIRADA (ASTROFOTO) --- */
.astrophoto-time-pill {
    border-color: rgba(192, 132, 252, 0.6) !important;
    background: linear-gradient(165deg, rgba(26, 31, 38, 0.85) 0%, rgba(20, 15, 30, 0.8) 100%) !important;
    box-shadow: 
        inset 0 1px 0 0 rgba(255, 255, 255, 0.15), 
        0 10px 30px rgba(0, 0, 0, 0.5), 
        0 0 20px rgba(192, 132, 252, 0.3) !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    white-space: nowrap !important;
    min-width: 230px !important;
}

.astrophoto-time-pill span {
    color: #e9d5ff !important;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.astrophoto-time-pill i.fa-chevron-up {
    color: #c084fc !important;
}

/* --- OVERRIDE: Píldora de Tiempo Simulado en Modo Astrofoto (Degradado Violeta) --- */
#toggle-time-control-btn-sky.astrophoto-time-pill.time-traveling-active {
    border-color: rgba(192, 132, 252, 0.8) !important;
    box-shadow: 
        inset 0 1px 0 0 rgba(255, 255, 255, 0.15), 
        0 10px 30px rgba(0, 0, 0, 0.5), 
        0 0 25px rgba(192, 132, 252, 0.4) !important;
}

#toggle-time-control-btn-sky.astrophoto-time-pill.time-traveling-active::before {
    background:
        radial-gradient(circle at 25% -50%,
            rgba(192, 132, 252, 0.55),
            rgba(192, 132, 252, 0.15),
            transparent 50%),
        radial-gradient(circle at 75% -50%,
            rgba(192, 132, 252, 0.55),
            rgba(192, 132, 252, 0.15),
            transparent 50%) !important;
}

/* 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: calc(4.5rem + var(--safe-top));
    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;

    /* FIX: Evitar que se aplasten y asegurar scroll */
    flex-shrink: 0;
    width: 100%;
}

/* --- 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 15px 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 15px 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 12px 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%);
}


.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,
#nearby-radar-moon-icon,
#radar-2-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;
}

#nearby-radar-moon-icon {
    width: 12px;
    height: 12px;
}

#radar-2-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,
#nearby-radar-moon-icon .moon-phase-shadow,
#radar-2-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 */
}

/* Degradado Hero estilo YouTube Music / Nebulosa - REDISEÑADO */
.top-hero-gradient {
    position: absolute;
    top: -10vh;
    /* Subimos todo el bloque un 15% de la altura de pantalla */
    left: 0;
    width: 100%;
    height: 45vh;
    /* Altura reducida para que termine antes */
    background:
        /* Luz cenital Cyan (Brillo central superior) - MÁS BRILLANTE */
        radial-gradient(ellipse at 50% -20%, rgba(200, 100, 255, 0.15), transparent 50%),
        /* Foco Principal Azul Eléctrico (Izquierda) - MÁS INTENSO */
        radial-gradient(circle at 0% 0%, rgba(30, 120, 255, 0.45), transparent 55%),
        /* Profundidad Azul/Indigo (Derecha) - CAMBIADO DE VIOLETA A AZULADO */
        radial-gradient(circle at 100% 0%, rgba(130, 100, 255, 0.35), transparent 50%);

    z-index: 0;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.1s linear;
    will-change: opacity;
    /* El toque mágico: Blur fuerte + Saturación para mezclar los colores */
    filter: blur(40px) saturate(130%);
    /* Corrección para bordes blancos en algunos navegadores */
    transform: translateZ(0);
}

/* OVERRIDE: Degradado Rojo/Naranja para Pantalla de Críticos */
#critical-passes-gradient {
    background:
        /* Luz cenital (Amarillo suave) */
        radial-gradient(ellipse at 50% -20%, rgba(255, 200, 50, 0.05), transparent 50%),
        /* Foco Principal (Rojo Peligro - Izquierda) */
        radial-gradient(circle at 0% 0%, rgba(248, 81, 73, 0.45), transparent 55%),
        /* Profundidad (Naranja Alerta - Derecha) */
        radial-gradient(circle at 100% 0%, rgba(247, 181, 48, 0.35), transparent 50%);
}

/* Ocultar degradado en escritorio o modo horizontal */
@media (min-width: 1024px),
(orientation: landscape) {
    .top-hero-gradient {
        display: none;
    }
}

/* Fix: Z-Index superior para Mejores Pasos y Satélites (para que no lo tape el wrapper z-10) */
#best-passes-screen::after,
#known-satellites-screen::after,
#events-screen::after,
#astrophoto-screen::after {
    z-index: 20;
}

/* Override: El degradado oscuro de la status bar empieza invisible en esta pantalla */
#known-satellites-screen::after,
#best-passes-screen::after,
#events-screen::after {
    opacity: var(--status-gradient-opacity, 0);
    transition: opacity 0.1s linear;
}

/* Override: Header controlado por JS para ver el degradado */
#known-satellites-screen header,
#best-passes-screen header,
#events-screen header {
    /* Eliminamos !important para permitir que el JS controle el color y el blur al hacer scroll */
    background: transparent;
    border-bottom: 1px solid transparent;
    box-shadow: none;
    transition: background-color 0.1s linear, backdrop-filter 0.1s linear;
}

#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;
}

/* Animaciones de deslizamiento para listas (Eclipses) */
@keyframes slideOutLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(-50px);
        opacity: 0;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(50px);
        opacity: 0;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(50px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-out-left {
    animation: slideOutLeft 0.2s ease-in forwards;
}

.slide-out-right {
    animation: slideOutRight 0.2s ease-in forwards;
}

.slide-in-right {
    animation: slideInRight 0.25s ease-out forwards;
}

.slide-in-left {
    animation: slideInLeft 0.25s ease-out forwards;
}


/* ========================================================================== 
   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) + var(--safe-bottom));
    padding-bottom: var(--safe-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 */
}

/* FIX: Ocultar barra de navegación al escribir (teclado abierto) para evitar que suba */
body:has(input:focus) #bottom-nav-bar,
body:has(textarea:focus) #bottom-nav-bar {
    display: none !important;
}

#bottom-nav-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 150vw;
    height: 100%;

    /* ESTILO LIQUID GLASS: Fondo mucho más transparente y sutil */
    background-color: rgba(0, 0, 0, 0.4);

    /* Blur aumentado para efecto de vidrio esmerilado premium */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    /* Borde superior más brillante y definido */
    border-top: 1px solid rgba(255, 255, 255, 0.02);

    /* SOMBRAS DE VOLUMEN: Luz interna (inset) y sombra suave abajo */
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.15),
        /* Luz superior interna */
        inset 0 0 20px rgba(255, 255, 255, 0.03),
        /* Brillo difuso */
        0 -10px 30px rgba(0, 0, 0, 0.3);
    /* Sombra externa */

    border-radius: 50% 50% 0 0;
    z-index: -1;
    /* Aislar repintado de la barra */
    will-change: transform;
    /* OPTIMIZACIÓN: Evita que el blur se recalcule fuera de su caja */
    contain: strict;
}

@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);
    }
}

/* Estilo activo al tocar (se va al soltar gracias al JS) */
.nav-item.is-pressed {
    color: var(--color-text-primary);
}

.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.75rem;
    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;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.85rem 1rem;

    /* 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: 16px;
    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: 1px solid rgba(57, 211, 83, 0.3) !important;
    background: radial-gradient(circle at 50% 30%, rgba(57, 211, 83, 0.15) 0%, rgba(20, 25, 30, 0.6) 100%) !important;
    background-clip: padding-box;
    box-shadow:
        0 0 20px rgba(57, 211, 83, 0.15),
        inset 0 0 0 1px rgba(140, 255, 170, 0.4),
        inset 0 0 20px rgba(57, 211, 83, 0.05) !important;
}

/* Estilo para Lanzamientos Fallidos (Rojo) */
.launch-card.is-failed {
    border: 1px solid rgba(248, 81, 73, 0.4) !important;
    background: radial-gradient(circle at 50% 30%, rgba(248, 81, 73, 0.15) 0%, rgba(20, 25, 30, 0.6) 100%) !important;
    background-clip: padding-box;
    box-shadow:
        0 0 20px rgba(248, 81, 73, 0.15),
        inset 0 0 0 1px rgba(248, 81, 73, 0.2),
        inset 0 0 20px rgba(248, 81, 73, 0.05) !important;
}

.launch-card.is-failed .launch-card-icon-container {
    color: var(--color-danger);
    background-color: rgba(248, 81, 73, 0.1);
    border-color: rgba(248, 81, 73, 0.2);
}

/* 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;
}

/* Restaurado estilo de iconos de estado para lanzamientos pasados */
.launch-card.is-past .launch-card-icon {
    color: var(--color-success);
}

/* ========================================================================== 
   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: 1rem;
}

.launch-card-date {
    font-family: monospace;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.status-tag {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    /* Colores por defecto para estados sin clase específica */
    background-color: rgba(161, 168, 179, 0.15);
    color: var(--color-text-secondary);
}

.launch-date-tab {
    width: calc(100% + 2rem);
    /* Compensa el padding horizontal de la tarjeta */
    margin: 0.25rem -1rem -0.85rem -1rem;
    /* Compensa padding y lo pega abajo */
    padding: 0.5rem 1rem;
    background: rgba(70, 70, 100, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-family: monospace;
    letter-spacing: 0.05em;
}

.status-tag.is-go {
    background-color: rgba(88, 166, 255, 0.15);
    color: var(--color-secondary);
}

.status-tag.is-success {
    background-color: rgba(57, 211, 83, 0.15);
    color: var(--color-success);
}

.status-tag.is-warning {
    background-color: rgba(255, 187, 41, 0.15);
    color: var(--color-warning);
}

.status-tag.is-danger {
    background-color: rgba(248, 81, 73, 0.15);
    color: var(--color-danger);
}

/* ========================================================================== 
   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.8rem;
    color: var(--color-text-primary);
    line-height: 1.5;
}

.eclipse-card-visibility {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    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: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    padding: 1rem;
    margin: 0.5rem 0.5rem 1.5rem;

    /* Estilo Flat Minimalista */
    background-color: rgba(22, 32, 45, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;

    box-shadow: none;

    position: relative;
    overflow: hidden;
}

.passes-context-card::before {
    display: none;
}

.context-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: none;
    z-index: 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 REMOVIDO para estilo propio */
.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.16) 0%,
            transparent 75%);

    z-index: 0;
    /* Se sitúa entre el fondo de la tarjeta y su contenido */
    pointer-events: none;
    opacity: 0.6;
    /* Sutil por defecto */
    transition: opacity 0.3s var(--ease-out-quint);
}

/* NUEVO: Glow específico para tarjetas de Satélite (Neutro y Sutil) */
.satellite-entry::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    border-radius: inherit;
    /* Glow neutro muy suave para mantener la estética "Dark Tech" */
    background: radial-gradient(ellipse 150% 100% at -150px 50%,
            var(--card-glow-color, rgba(42, 134, 255, 0.16)) 0%,
            transparent 75%);
    z-index: 0;
    pointer-events: none;
    opacity: 0.6;
    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.16) 0%,
                transparent 75%);
    }
}

/* --- 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-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,
.launch-card.is-failed::before,
.launch-card.is-failed::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: Relative para respetar el ancho del contenedor padre (padding) */
    position: relative;
    height: 0;
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;

    /* 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;

    /* Centrar contenido por si el anuncio es más angosto */
    text-align: center;
}

/* ESTADO ACTIVO: Solo se aplica si Google llenó el anuncio */
.ad-card-container.ad-loaded {
    /* Restaurar al flujo */
    pointer-events: auto;

    /* 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: 0 !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: 0;
    /* 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;
}

/* --- SISTEMA DE ANUNCIOS INDEPENDIENTE (WEB vs APP) --- */

/* 1. WEB (Google AdSense) - Recuperando el estilo "Caja Elevadora" de la Versión 1 */
body:not(.is-native) .map-ad-container.ad-loaded {
    height: auto;
    opacity: 1;
    /* Padding original para el recuadro */
    padding: 4px 0 calc(4px + var(--safe-bottom));

    /* Estilo Liquid Glass (El recuadro visual) */
    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);
}

/* 2. APP (Google AdMob) - Estilo Independiente */
body.is-native .map-ad-container.ad-loaded {
    height: auto;
    opacity: 1;
    /* Mantenemos el estilo base pero separado para futuras modificaciones */
    padding: 4px 0 calc(4px + var(--safe-bottom));
    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,
#flare-radar-pointer.is-compass-mode,
#nearby-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 */
}

/* --- Estilo para el puntero en Modo Entrenamiento (Tocando) --- */
#radar-pointer.is-touching,
#large-radar-pointer.is-touching,
#flare-radar-pointer.is-touching,
#nearby-radar-pointer.is-touching {
    background-color: var(--color-success) !important;
    border-color: #fff !important;
    box-shadow: 0 0 15px var(--color-success) !important;
    transform: translate(-50%, -50%) scale(1.3) !important;
    /* Efecto de pulso/agrandamiento */
    transition: transform 0.1s ease, background-color 0.1s ease;
}

/* --- 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 */
.pass-card.pass-card-5star::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 {
        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: 0.95rem !important;
    /* 16px base, se achicará solo */
}

/* Hora del Paso */
.pass-card .flex-grow .text-sm {
    font-size: 0.85rem !important;
    /* Aumentado ligeramente para mejor lectura */
}

/* Valor de Elevación */
.pass-card .text-center .text-lg {
    font-size: 1rem !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.85rem;
    padding: 1rem 1.25rem;
    /* Más ancho lateral */
    border-radius: 24px;
    /* Más curvo */
    /* Fondo Glass más sólido */
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.25s var(--ease-out-quint);
    position: relative;
    overflow: hidden;
}

.event-quick-nav:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.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);
}

/* Lanzamientos: Verde/Azul Tech */
.launch-nav .nav-icon-container {
    color: #4ade80;
    /* Verde brillante */
    background-color: rgba(74, 222, 128, 0.2);
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.3);
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.launch-nav:hover {
    border-color: #4ade80;
    box-shadow: 0 5px 15px rgba(74, 222, 128, 0.15);
}

.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: linear-gradient(165deg, rgba(20, 25, 30, 0.95) 0%, rgba(20, 25, 30, 0.9) 100%) !important;
    border: 1px solid rgba(88, 166, 255, 0.3) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;

    box-shadow:
        0 10px 30px -5px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 15px rgba(88, 166, 255, 0.15) !important;

    border-radius: 20px !important;
    /* Menos redondo para acomodar 2 líneas */
    padding: 0.6rem 1.5rem !important;

    /* Layout Vertical */
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;

    width: auto !important;
    max-width: 90vw !important;
    text-align: center !important;
}

/* Ocultamos el span original porque vamos a inyectar estructura nueva */
#game-ui-header>span {
    display: none !important;
}

/* Estilos para la nueva estructura inyectada por JS */
.game-hud-round {
    font-family: 'Space Grotesk', monospace;
    font-size: 0.65rem !important;
    text-transform: uppercase;
    letter-spacing: 0.15em !important;
    color: var(--color-secondary) !important;
    font-weight: 700 !important;
    text-shadow: 0 0 10px rgba(88, 166, 255, 0.5);
    margin-bottom: 2px;
}

.game-hud-instruction {
    font-family: 'Space Grotesk', sans-serif;
    /* Sans-serif para mejor lectura */
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: white !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    line-height: 1.1 !important;
    white-space: nowrap !important;
    /* Mantenemos una línea para el título principal */
}

/* Si la pantalla es MUY chica, permitimos que la instrucción baje de línea */
@media (max-width: 360px) {
    .game-hud-instruction {
        white-space: normal !important;
        font-size: 0.85rem !important;
    }
}

#game-ui-header i {
    display: none !important;
    /* Ocultamos el ícono viejo, usamos texto limpio */
}

/* 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));
}

/* ==========================================================================
   CALENDARIO DE EVENTOS (NUEVO)
   ========================================================================== */
/* --- AESTHETIC CALENDAR REDESIGN --- */

/* Tarjeta contenedora principal estilo Glass */
.aesthetic-calendar-card {
    background: linear-gradient(145deg, rgba(22, 32, 45, 0.5) 0%, rgba(32, 32, 38, 0.1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 28px;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
        inset 0 0 20px rgba(255, 255, 255, 0.03),
        0 20px 40px -10px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 1.5rem 1rem;
    overflow: hidden;
    position: relative;
}

/* Header del calendario */
.aesthetic-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
}

.calendar-month-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-text-primary);
    text-transform: capitalize;
    letter-spacing: -0.02em;
    text-align: center;
    min-width: 140px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.calendar-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.calendar-nav-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Días de la semana */
/* Días de la semana */
.calendar-weekday {
    text-align: center;
    font-size: 0.7rem;
    /* Más sutil */
    font-weight: 700;
    color: var(--color-text-secondary);
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 0.5rem;
}

/* Grilla */
.aesthetic-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* Aspect ratio cuadrado perfecto para los días */
    gap: 4px;
    /* Gap reducido para ganar espacio interno en vertical */
    padding: 0 2px;
}

/* Celdas de día */
.aesthetic-day {
    aspect-ratio: 0.82;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: all 0.2s var(--ease-out-cubic);
    background: transparent;
    border: 1px solid transparent;
    /* Truco visual: Padding abajo empuja el número hacia arriba, separándolo de los puntos */
    padding-bottom: 8px;
}

.aesthetic-day:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Día actual (Hoy) - Resaltado fuerte */
.aesthetic-day.is-today {
    background: radial-gradient(circle at 50% 0%, rgba(48, 129, 247, 0.4) 0%, rgba(48, 129, 247, 0.1) 100%);
    border: 1px solid rgba(48, 129, 247, 0.5);
    box-shadow: 0 0 20px rgba(48, 129, 247, 0.3), inset 0 0 10px rgba(48, 129, 247, 0.1);
}

.aesthetic-day.is-today .day-number {
    color: white;
    font-weight: 800;
}

/* Número del día */
.day-number {
    font-size: 0.9rem;
    /* Tamaño adaptable */
    font-weight: 600;
    /* Un poco más de peso para lectura clara */
    color: var(--color-text-secondary);
    line-height: 1;
    z-index: 2;
    transition: color 0.2s ease;
}

.aesthetic-day:hover .day-number {
    color: white;
}

/* Días con eventos (punto indicador) */
.aesthetic-day-markers {
    position: absolute;
    bottom: 4px;
    /* Más abajo para despegar del número */
    display: flex;
    gap: 3px;
    pointer-events: none;
}

.aesthetic-dot {
    width: 3.5px;
    /* Un toque más finos */
    height: 3.5px;
    border-radius: 50%;
    /* Glow para los dots */
    box-shadow: 0 0 5px currentColor;
    opacity: 0.9;
}

.aesthetic-dot.type-yellow {
    background-color: var(--color-warning);
    color: var(--color-warning);
}

.aesthetic-dot.type-blue {
    background-color: var(--color-secondary);
    color: var(--color-secondary);
}

.aesthetic-dot.type-green {
    background-color: var(--color-success);
    color: var(--color-success);
}

/* --- TARJETAS DE NAVEGACIÓN "AESTHETIC" (REDISEÑO COMPACTO) --- */
.aesthetic-nav-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0.85rem 1rem;

    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.08);
    border-radius: 16px;

    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.aesthetic-nav-card:hover {
    transform: translateY(-3px);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 20px -5px rgba(0, 0, 0, 0.4);
}

.aesthetic-nav-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    border: none;
    box-shadow: none;
    flex-shrink: 0;
}

/* Override para el texto dentro de la tarjeta */
.aesthetic-nav-card span.text-lg {
    font-size: 1rem !important;
    font-weight: 600 !important;
}

.aesthetic-nav-icon.eclipse {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.2);
}

.aesthetic-nav-icon.launch {
    color: var(--color-secondary);
    background: rgba(88, 166, 255, 0.1);
    box-shadow: 0 0 15px rgba(88, 166, 255, 0.15);
}

.aesthetic-nav-icon.transit {
    color: #39D353;
    background: rgba(57, 211, 83, 0.1);
    box-shadow: 0 0 15px rgba(57, 211, 83, 0.15);
}

.aesthetic-nav-arrow {
    color: var(--color-text-secondary);
    opacity: 0.5;
}

/* Modal de Día */
.day-detail-header {
    text-align: center;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 1rem;
}

.day-detail-date {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.day-detail-weekday {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.calendar-event-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 0.5rem;
}

.calendar-event-time {
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    min-width: 45px;
}

.calendar-event-info {
    flex-grow: 1;
}

.calendar-event-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text-primary);
}

.calendar-event-desc {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.calendar-event-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.05);
}

.calendar-event-item.is-important {
    border-color: rgba(247, 181, 48, 0.3);
    background: linear-gradient(90deg, rgba(247, 181, 48, 0.05), transparent);
}

.calendar-event-item.is-important .calendar-event-icon {
    color: var(--color-warning);
    background: rgba(247, 181, 48, 0.1);
}


/* --- INICIO: Rediseño Interfaz de Captura --- */

/* Dropdown de Menú (Tres puntos) */
.capture-menu-glass {
    position: absolute;
    top: calc(4rem + var(--safe-top));
    /* top-20 equivalent */
    right: 1rem;

    background: rgba(20, 25, 30, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);

    border-radius: 16px;
    padding: 0.5rem;

    box-shadow:
        0 10px 30px -5px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);

    min-width: 160px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    pointer-events: auto;
    z-index: 2100;
}

.editable-text {
    pointer-events: auto !important;
    cursor: text;
    transition: background-color 0.2s ease;
    border-radius: 4px;
}

.editable-text:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.editable-text:focus,
.editable-text:focus-within {
    outline: none;
    background-color: rgba(255, 255, 255, 0.2);
}

.capture-banner.news .editable-text:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.capture-banner.news .editable-text:focus,
.capture-banner.news .editable-text:focus-within {
    background-color: rgba(0, 0, 0, 0.1);
}

.capture-style-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.capture-style-btn:hover {
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
}

.capture-style-btn.active {
    background-color: var(--color-primary);
    color: white;
    box-shadow: 0 0 15px rgba(48, 129, 247, 0.4);
    font-weight: 700;
}

.capture-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

.capture-menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.capture-menu-item i:first-child {
    color: var(--color-secondary);
    width: 20px;
    text-align: center;
}

/* Modal de Formato (Central) */
.capture-modal-glass {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;

    /* Estilo Liquid Glass Premium */
    background: linear-gradient(165deg, rgba(20, 25, 30, 0.9) 0%, rgba(20, 25, 30, 0.7) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.15),
        0 20px 50px rgba(0, 0, 0, 0.6);

    border-radius: 24px;
    z-index: 2200;
}

.capture-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    text-align: center;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 0.25rem;
}

.capture-modal-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.capture-section-label {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: 0.25rem;
}

.capture-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Botones de Opción (Estilo Segmentado) */
.format-option-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text-secondary);
    padding: 0.6rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s var(--ease-out-quint);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
}

.format-option-btn:hover {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.format-option-btn.active {
    background: var(--color-surface);
    color: var(--color-secondary);
    /* Azul */
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    font-weight: 700;
}

.format-option-btn.active i {
    color: var(--color-secondary);
}

/* --- Estilos de Banners para Captura --- */
.capture-banner {
    position: absolute;
    left: 0;
    right: 0;
    padding: 1.5rem 1.25rem;
    z-index: 10;
    color: white;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    /* Para poder arrastrar el mapa a través de ellos */
}

.capture-banner.top {
    top: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
    align-items: flex-start;
    padding-top: 1.5rem;
}

.capture-banner.bottom {
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0) 100%);
    align-items: flex-end;
    padding-bottom: 1.5rem;
    text-align: right;
}

.capture-banner.news {
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: transparent;
    padding: 0;
    overflow: visible;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #000;
    pointer-events: none;
}

.news-floating-badge {
    background-color: var(--color-danger);
    color: white;
    font-weight: 800;
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 4px 4px 0 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

.news-content-box {
    background: white;
    border-radius: 0 8px 8px 8px;
    width: 100%;
    padding: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.banner-badge {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-secondary);
    background: rgba(88, 166, 255, 0.15);
    border: 1px solid rgba(88, 166, 255, 0.3);
    padding: 2px 8px;
    border-radius: 999px;
    margin-bottom: 4px;
    backdrop-filter: blur(4px);
}

.banner-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    max-width: 80%;
}

.news-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    line-height: 1.2;
    color: #000;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.news-subtitle {
    font-size: 0.85rem;
    color: #555;
    font-weight: 600;
}

.banner-info-row {
    display: flex;
    align-items: center;
    font-family: monospace;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.banner-location {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

@keyframes weather-fade-in {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.weather-icon-display {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.9rem;
    color: var(--color-secondary);
    vertical-align: middle;
    width: 16px;
    text-align: center;
    opacity: 0;
    /* Empieza invisible */
    animation: weather-fade-in 0.4s var(--ease-out-quint) forwards;
}

.weather-icon-display.fa-cloud {
    color: #9ca3af;
}

/* Gris para nublado */
.weather-icon-display.fa-cloud-showers-heavy {
    color: #9ca3af;
}

/* Gris lluvia */
.weather-icon-display.fa-moon {
    color: #fbbf24;
}

/* Amarillo luna */
.weather-icon-display.fa-cloud-moon {
    color: #fbbf24;
}

/* Amarillo parcial */

/* --- FIN: Rediseño Interfaz de Captura --- */

/* --- Slider de Velocidad Cinemática --- */
#cinematic-speed-control {
    transform: translateX(-50%);
    /* Animación de entrada suave */
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
}

#cinematic-speed-control.visible {
    display: flex !important;
    /* Forzamos flex */
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

#cinematic-slider {
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    height: 4px;
    border-radius: 2px;
}

#cinematic-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--color-secondary);
    /* Azul */
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(88, 166, 255, 0.5);
}

/* --- Etiqueta de Estado Starlink (Responsive) --- */
.starlink-status-badge {
    /* Estilos base (Diseño de la píldora) - REDISEÑO MINIMALISTA */
    background: transparent;
    /* Fondo transparente */
    padding: 1px 6px;
    /* Padding reducido */
    border-radius: 9999px;
    /* Bordes redondeados estilo píldora */
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* Borde base */
    font-size: 0.6rem;
    /* Texto más fino */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    opacity: 0.9;
}

/* Modo Vertical / Móvil (Por defecto): Ahora estático y alineado */
.starlink-status-badge {
    position: static;
    margin-left: auto;
    /* Empujar a la derecha */
    transform: none;
    font-size: 0.65rem;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.05);
    /* Fondo sutil */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Modo Horizontal / Escritorio (Pantallas más anchas): Junto a las estrellas */
@media (min-width: 768px) {
    .starlink-status-badge {
        position: static;
        /* Vuelve al flujo normal */
        margin-left: 0;
        /* Separación manejada por el gap */
        transform: translateY(1px);
        /* Ajuste fino vertical */
        background: rgba(255, 255, 255, 0.05);
        /* Un poco más sutil en escritorio */
    }
}

/* --- TARJETAS DE TRÁNSITO --- */
.transit-card {
    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: 20px;
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.transit-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.3);
}

.transit-card.solar {
    border-left: 4px solid #ffbb29;
}

.transit-card.lunar {
    border-left: 4px solid #A0A0A0;
}

.transit-icon-box {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: transparent;
    overflow: hidden;
}

.transit-dist-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-secondary);
}

.text-accent {
    color: var(--color-secondary);
}

#cinematic-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

#cinematic-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--color-secondary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(88, 166, 255, 0.5);
    border: 2px solid white;
}

/* --- Barra de Progreso para Cargas Pesadas --- */
.loading-progress-container {
    width: 200px;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    /* Píldora perfecta */
    overflow: hidden;
    /* Recorta lo que sobra */
    margin: 0 auto 10px;
    /* Centrado */
    padding: 0;
    /* CLAVE: Sin relleno interno */
    border: none;
    /* Sin bordes que ocupen espacio */
    position: relative;
}

.loading-progress-bar {
    height: 100%;
    background-color: var(--color-warning);
    /* Usa el amarillo/naranja de alerta */
    width: 0%;
    transition: width 0.15s ease-out;
    /* Movimiento fluido */
    box-shadow: 0 0 10px var(--color-warning);
    /* Glow para efecto neón */
    border-radius: 999px;
    /* Coincide con el contenedor */
}

/* ========================================================================== 
   ESTILOS PARA TABS DESLIZABLES (SLIDER) - CON MARGEN
   ========================================================================== */
.slider-viewport {
    width: 100%;
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
    transition: height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    /* Transición suave de altura */
}

.slider-track {
    display: flex;
    width: 200%;
    gap: 1.5rem;
    transform: translateX(0);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    align-items: flex-start;
    /* Evita que la página corta se estire al tamaño de la larga */
}

.slider-page {
    width: 50%;
    flex-shrink: 0;
    padding: 0;
    box-sizing: border-box;
    /* Height auto por defecto para que el body maneje el scroll */
}

/* ======================================================================== 
   ESTILOS PARA TABS DESLIZABLES (SLIDER) - CON DEGRADADOS VISIBLES
   ========================================================================== */
.slider-viewport {
    /* Técnica de expansión: Rompemos los márgenes del contenedor padre */
    width: calc(100% + 2rem);
    /* 100% + compensación de márgenes (1rem izq + 1rem der) */
    margin-left: -1rem;
    /* Nos movemos a la izquierda para tocar el borde */
    margin-right: -1rem;
    /* Nos movemos a la derecha */

    overflow: hidden;
    position: relative;
    touch-action: pan-y;

    /* FIX: Altura mínima para que el gesto de deslizar funcione incluso si la lista está vacía */
    min-height: 60vh;
    /* IMPORTANTE: Quitamos transition height para que el cambio de tab sea instantáneo y el scroll no salte */
}

.slider-track {
    display: flex;
    width: 200%;
    gap: 1.5rem;
    transform: translateX(0);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    align-items: flex-start;
}

.slider-page {
    width: 50%;
    flex-shrink: 0;
    box-sizing: border-box;

    /* Restauramos el margen visual usando padding interno */
    /* Arriba: 0 | Derecha: 1rem | Abajo: 6rem (espacio menú) | Izquierda: 1rem */
    padding: 0 1rem 6rem 1rem;
}

/* Ajuste para pantallas más grandes (Tablets/PC) que usan sm:px-6 (1.5rem) */
@media (min-width: 640px) {
    .slider-viewport {
        width: calc(100% + 3rem);
        /* 1.5rem * 2 */
        margin-left: -1.5rem;
        margin-right: -1.5rem;
    }

    .slider-page {
        padding: 0 1.5rem 6rem 1.5rem;
    }
}

/* ========================================================================== 
    BOTÓN DE AGREGAR SATÉLITE (BÚSQUEDA GLOBAL)
   ========================================================================== */
.add-global-sat-btn {
    height: 2.5rem;
    /* 40px */
    width: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 10;

    /* Estilo sutil y delicado por defecto */
    background-color: rgba(88, 166, 255, 0.1);
    border: 1px solid rgba(88, 166, 255, 0.3);
    color: var(--color-secondary);

    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Efecto rebote suave */
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* FIX: Hover solo en dispositivos que lo soportan para evitar que se pegue en táctil */
@media (hover: hover) {
    .add-global-sat-btn:hover {
        background-color: var(--color-secondary);
        color: var(--color-background);
        transform: scale(1.1);
        box-shadow: 0 0 15px rgba(88, 166, 255, 0.4);
        border-color: var(--color-secondary);
    }
}

/* Estado Agregado (Verde y Delicado) */
.add-global-sat-btn.is-added {
    background-color: rgba(57, 211, 83, 0.15);
    /* Fondo verde sutil */
    border-color: var(--color-success);
    color: var(--color-success);
}

@media (hover: hover) {
    .add-global-sat-btn.is-added:hover {
        background-color: var(--color-success);
        color: white;
        box-shadow: 0 0 15px rgba(57, 211, 83, 0.4);
    }
}

/* Eliminamos estilos de foco molestos */
.add-global-sat-btn:focus {
    outline: none;
    box-shadow: none;
}

.elevation-bar-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    /* PIVOTE: Rotamos desde el centro real compensando el margen */
    transform-origin: 50% calc(100% + 24px);
    /* PIVOTE: Ajustado a 24px para pegarla bien a la flecha */
    transition: transform 0.1s ease-out;
    /* SINCRONIZACIÓN: Misma inercia que la flecha */
    will-change: transform;
    width: 4px;
    height: 60px;
    /* Largo de la línea */
    background-color: rgba(255, 255, 255, 0.15);
    /* Gris tenue de fondo */
    border-radius: 4px;
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
    /* Z-Index bajado un poco por seguridad */
    margin-top: -32px;
}

.elevation-bar-fill {
    width: 100%;
    height: 0%;
    /* Dinámico por JS */
    background-color: var(--color-secondary);
    position: absolute;
    bottom: 0;
    /* Se llena de abajo hacia arriba */
    transition: height 0.1s linear, background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 10px var(--color-secondary);
}

.elevation-bar-fill.active {
    background-color: var(--color-success);
    /* Verde éxito */
    box-shadow: 0 0 15px var(--color-success);
}

.add-global-sat-btn:active {
    transform: scale(0.9);
    /* Efecto de presión */
}

/* Estado Agregado (Verde + Check + Giro) */
.add-global-sat-btn.is-added {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: white;
    /* Icono blanco */
    transform: scale(1.1) rotate(360deg);
    /* Vuelta completa de celebración */
    box-shadow: 0 0 20px rgba(57, 211, 83, 0.5);
    cursor: default;
    pointer-events: none;
    /* Evita clics múltiples */
}

/* --- TARJETAS DE LISTAS (REDISEÑO APPLE STYLE) --- */
.list-entry-card {
    position: relative;
    display: flex;
    align-items: stretch;
    /* Estirar para que el botón de borrar ocupe todo el alto */
    width: 100%;
    margin-bottom: 0.75rem;

    /* Fondo Linear Gradient más moderno y limpio (Apple Style) */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);

    /* Blur eliminado por transparencia */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    /* Borde estilo Liquid Glass */
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-clip: padding-box;

    /* Sombras para volumen 3D (Liquid Glass) */
    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 12px rgba(0, 0, 0, 0.2);

    border-radius: 24px;
    /* Más redondeado (igual a Starlink/Populares) */
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
}

/* --- TARJETAS EXPANDIBLES (REDISEÑO UNIFICADO) --- */
.expandable-card {
    position: relative;
    display: block;
    /* Block evita espacios extra de flexbox */
    width: 100%;
    margin-bottom: 0.75rem;

    /* REDISEÑO: Estilo "Deep Tech" - Más oscuro y sofisticado para diferenciar de las listas */
    background: linear-gradient(165deg, rgba(22, 27, 34, 0.7) 0%, rgba(13, 17, 23, 0.5) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    /* Borde más sutil y técnico */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;

    /* Sombra más difusa */
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);

    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
}

.expandable-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: linear-gradient(165deg, rgba(28, 33, 40, 0.8) 0%, rgba(18, 22, 28, 0.6) 100%);
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.expandable-card.is-expanded {
    /* Estado Abierto: Fondo sólido oscuro con borde acentuado */
    background: #0d1117;
    border-color: rgba(88, 166, 255, 0.3);
    /* Acento azul sutil */
    box-shadow:
        0 15px 40px -10px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(88, 166, 255, 0.05);
    /* Glow interno muy sutil */
}

.expandable-header {
    display: flex;
    align-items: center;
    padding: 1rem;
    cursor: pointer;
    gap: 1rem;
    width: 100%;
    /* Sin min-height para que se ajuste exactamente al contenido */
}

.expandable-content-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.expandable-card.is-expanded .expandable-content-wrapper {
    grid-template-rows: 1fr;
}

.expandable-content {
    overflow: hidden;
    min-height: 0;
}

.expandable-body {
    padding: 0 1rem 1.5rem 1rem;
    border-top: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.expandable-card.is-expanded .expandable-body {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

/* Ajuste para el chevron */
.expandable-card .chevron-icon {
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.expandable-card.is-expanded .chevron-icon {
    transform: rotate(180deg);
    color: var(--color-secondary);
}

.list-entry-card:hover {
    transform: scale(1.01);
    /* Escala sutil estilo iOS */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* Eliminamos la barra lateral anterior */
.list-entry-card::before {
    display: none;
}

.list-entry-content {
    flex-grow: 1;
    display: flex;
    align-items: center;
    padding: 1rem;
    cursor: pointer;
    gap: 1rem;
    min-width: 0;
}

.list-icon-container {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    /* Squircle */

    /* Degradado Apple-style (Pink/Purple) */
    /* background: linear-gradient(135deg, #ff5e99 0%, #a855f7 100%);  <-- Eliminado, ahora es dinámico */

    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;

    /* Sin borde, solo sombra interna sutil */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    border: none;
    transition: filter 0.2s ease;
}

.list-entry-card:hover .list-icon-container {
    transform: none;
    filter: brightness(1.1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.list-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
    gap: 2px;
}

.list-name {
    font-size: 1rem;
    font-weight: 600;
    /* Semibold, no Bold */
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
}

.list-count {
    font-size: 0.85rem;
    color: #8e8e93;
    /* iOS Gray */
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.list-count i {
    font-size: 0.75rem;
    opacity: 0.8;
}

.list-arrow {
    color: #636366;
    /* Darker gray for chevron */
    font-size: 0.9rem;
    margin-right: 0.25rem;
    opacity: 1;
    transition: transform 0.2s ease, color 0.2s ease;
}

.list-entry-card:hover .list-arrow {
    color: #8e8e93;
    transform: translateX(4px);
}

.list-options-btn {
    width: 44px;
    /* height: 100%; Eliminado para evitar problemas de alineación */
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    /* Separador vertical sutil */
    color: #8e8e93;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
    font-size: 1.1rem;
    align-self: stretch;
    /* Asegura que ocupe el alto */
    margin: 0;
    padding: 0;
    position: relative;
}

.list-options-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0.1) 70%, transparent 100%);
    transition: background 0.2s ease;
}

.list-options-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

.list-options-btn:hover::before {
    background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.25) 30%, rgba(255, 255, 255, 0.25) 70%, transparent 100%);
}

.list-options-btn:hover i {
    transform: none;
}

/* ========================================================================== 
   ESTILOS DEL TUTORIAL
   ========================================================================== */
#tutorial-card {
    /* Posición por defecto (abajo) */
    bottom: calc(2rem + env(safe-area-inset-bottom));
    top: auto;

    /* Estilo Sólido Moderno (Azul Oscuro) - Sin Blur para evitar parpadeos */
    background: linear-gradient(165deg, rgba(22, 32, 45, 0.96) 0%, rgba(15, 20, 30, 0.98) 100%);

    /* Borde azul sutil */
    border: 1px solid rgba(88, 166, 255, 0.2);

    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.15),
        /* Luz superior interna */
        0 20px 50px -10px rgba(0, 0, 0, 0.8),
        /* Sombra de elevación */
        0 0 150px 50px rgba(0, 0, 0, 0.8),
        /* Halo oscuro ambiental para separar del fondo */
        inset 0 0 20px rgba(88, 166, 255, 0.05);
    /* Glow interno azul */

    border-radius: 24px;
}

#tutorial-card.tutorial-top {
    /* Posición alternativa (arriba) */
    top: calc(4rem + env(safe-area-inset-top));
    bottom: auto;
}

#tutorial-spotlight {
    pointer-events: none;
    /* Permite clicks a través del hueco */
    /* OPTIMIZACIÓN: Prepara al navegador para cambios de geometría y evita parpadeos en la sombra */
    will-change: top, left, width, height, border-radius;
    backface-visibility: hidden;
    transform: translateZ(0);
}

#tutorial-text {
    max-height: 180px;
    /* Altura máxima para permitir descripciones largas */
    overflow-y: auto;
    /* Habilitar scroll vertical */
    padding-right: 0.5rem;
    /* Espacio para el scrollbar */
    -webkit-overflow-scrolling: touch;
    /* Scroll suave en iOS */
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    /* Firefox */
}

/* Restaurar scrollbar visible solo para este elemento */
#tutorial-text::-webkit-scrollbar {
    display: block;
    width: 4px;
}

#tutorial-text::-webkit-scrollbar-track {
    background: transparent;
}

#tutorial-text::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

/* --- NUEVO: Animación de pulso para el tutorial (Acción Requerida) --- */
@keyframes border-pulse-yellow {

    0%,
    100% {
        border-color: rgba(255, 187, 41, 0.5);
    }

    50% {
        border-color: rgba(255, 187, 41, 1);
    }
}

@keyframes ripple-effect {
    0% {
        transform: scale(1);
        opacity: 0.8;
        border-width: 2px;
    }

    100% {
        transform: scale(1.35);
        opacity: 0;
        border-width: 0px;
    }
}

#tutorial-spotlight.action-required {
    /* La sombra gigante ahora es estática. Esto estabiliza el renderizado en WebViews */
    box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.6);
    animation: border-pulse-yellow 2s infinite ease-in-out;
    border-style: solid;
    border-width: 2px;
    /* Fuerza aceleración de hardware */
    transform: translateZ(0);
    will-change: border-color;
}

#tutorial-spotlight.action-required::after {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid var(--color-warning);
    border-radius: inherit;
    animation: ripple-effect 1.5s infinite ease-out;
    z-index: 1;
}

/* --- MODO OBSERVACIÓN (Solo mirar) --- */
@keyframes border-pulse-white {

    0%,
    100% {
        border-color: rgba(255, 255, 255, 0.3);
        box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.7), 0 0 15px rgba(255, 255, 255, 0.1);
    }

    50% {
        border-color: rgba(255, 255, 255, 0.9);
        box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.7), 0 0 25px rgba(255, 255, 255, 0.3);
    }
}

#tutorial-spotlight.observation-mode {
    border-style: solid;
    border-width: 2px;
    animation: border-pulse-white 3s infinite ease-in-out;
    transform: translateZ(0);
    will-change: border-color, box-shadow;
}

#tutorial-spotlight.observation-mode::after {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: inherit;
    animation: ripple-effect 1.5s infinite ease-out;
    z-index: 1;
}

/* ========================================================================== 
   OPTIMIZACIÓN DE RENDIMIENTO (MODO TUTORIAL)
   ========================================================================== */
/* Ocultamos el mapa 3D y las estrellas durante el tutorial para evitar parpadeos
   y reducir la carga de la GPU mientras se muestra el overlay oscuro. */
body.tutorial-mode-active #home-3d-container,
body.tutorial-mode-active #star-field {
    display: none !important;
}

/* Aseguramos que el modal de confirmación de cierre esté por encima del overlay del tutorial (z-9999) */
#tutorial-confirm-modal {
    z-index: 10000 !important;
}

/* Ocultar botón de tutorial en modo horizontal o escritorio */
@media (min-width: 1024px),
(orientation: landscape) {
    #menu-btn-tutorial {
        display: none !important;
    }
}

/* --- Estilos para el Modal de Filtro de Magnitud (Rediseño) --- */
.mag-filter-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s var(--ease-out-cubic);
    text-align: left;
    position: relative;
    overflow: hidden;
}

.mag-filter-option:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.mag-filter-option.active {
    background: linear-gradient(145deg, rgba(48, 129, 247, 0.15) 0%, rgba(48, 129, 247, 0.05) 100%);
    border-color: var(--color-secondary);
    box-shadow: 0 4px 20px rgba(48, 129, 247, 0.15);
}

.mag-icon-container {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--color-text-secondary);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.mag-filter-option.active .mag-icon-container {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 0 15px rgba(48, 129, 247, 0.4);
}

.mag-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mag-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text-primary);
}

.mag-desc {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    line-height: 1.3;
}

.mag-check {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-success);
    font-size: 1.1rem;
}

.mag-threshold {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mag-threshold::before {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    background-color: currentColor;
    border-radius: 50%;
    opacity: 0.6;
}

/* --- ESTILOS PARA MODAL DE PASOS ISS (LIVE) --- */
/* #iss-passes-modal eliminado, ahora es una pantalla */

.iss-pass-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 1rem 1.25rem;

    /* Estilo Liquid Glass (Igual a pass-card) */
    background: linear-gradient(145deg, rgba(22, 32, 45, 0.7) 0%, rgba(32, 32, 38, 0.4) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;

    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);

    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.iss-pass-card:hover {
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.35);
}

.iss-pass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    border-radius: inherit;
    background: radial-gradient(ellipse 175% 90% at -150px 50%,
            rgba(42, 134, 255, 0.16) 0%,
            transparent 75%);
    z-index: 0;
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 0.3s var(--ease-out-quint);
}

.iss-pass-card:hover::before {
    opacity: 1.0;
}

/* ========================================================================== 
   OPTIMIZACIÓN ISS LIVE (LANDSCAPE / DESKTOP)
   ========================================================================== */
@media (orientation: landscape),
(min-width: 1024px) {
    #iss-live-screen:not(.hidden) {
        display: grid !important;
        grid-template-rows: auto 1fr;
        grid-template-columns: 1fr 35%;
        /* Video grande a la izquierda, mapa a la derecha */
        overflow: hidden;
    }

    /* Ajuste para pantallas muy anchas (Desktop) */
    @media (min-width: 1280px) {
        #iss-live-screen {
            grid-template-columns: 1fr 400px;
            /* Mapa fijo a 400px */
        }
    }

    #iss-live-header {
        grid-column: 1 / -1;
        grid-row: 1 / 2;
        width: 100%;
        z-index: 30;
    }

    #iss-video-wrapper {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        height: 100% !important;
        /* Ocupa todo el alto disponible */
        border-bottom: none !important;
        border-right: 1px solid rgba(255, 255, 255, 0.15);
        position: relative;
    }

    #iss-live-map-container {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        height: 100% !important;
        width: 100% !important;
    }
}

/* --- Puntero Central Modo Cielo --- */
.sky-reticle-dot {
    width: 4px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

.sky-reticle-ring {
    position: absolute;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
}

/* AJUSTE FINO ADMOB: Levantar más los controles del mapa cuando hay AdMob */
body.has-admob #map-style-switcher,
body.has-admob #action-controls,
body.has-admob #toggle-time-control-btn,
body.has-admob #time-control-panel,
body.has-admob #reset-time-btn-pill,
body.has-admob #prediction-date-display,
body.has-admob #time-travel-date-display,
body.has-admob #visibility-controls,
body.has-admob #live-pass-indicator,
body.has-admob #iss-map-style-btn,
body.has-admob #iss-recenter-btn,
body.has-admob #iss-passes-btn,
body.has-admob #iss-map-style-menu {
    margin-bottom: 15px !important;
}

/* --- Overrides para el anuncio en Modo Cielo --- */
#toggle-time-control-btn-sky {
    bottom: calc(60px + var(--bottom-margin-dynamic) + var(--safe-bottom) + var(--sky-ad-height)) !important;
}

body.map-active #toggle-time-control-btn-sky {
    bottom: calc(var(--bottom-margin-dynamic) + var(--sky-ad-height) + var(--safe-bottom)) !important;
}

#time-control-panel-sky {
    bottom: calc(60px + var(--bottom-margin-dynamic) + var(--safe-bottom) + var(--sky-ad-height)) !important;
}

body.map-active #time-control-panel-sky {
    bottom: calc(var(--bottom-margin-dynamic) + var(--sky-ad-height) + var(--safe-bottom)) !important;
}

#time-travel-date-display-sky {
    bottom: calc(60px + 2.75rem + var(--bottom-margin-dynamic) + var(--safe-bottom) + var(--sky-ad-height)) !important;
}

body.map-active #time-travel-date-display-sky {
    bottom: calc(2.75rem + var(--bottom-margin-dynamic) + var(--sky-ad-height) + var(--safe-bottom)) !important;
}

#sky-filter-magnitude-btn {
    bottom: calc(var(--bottom-margin-dynamic) + var(--sky-ad-height) + var(--safe-bottom)) !important;
    transition: bottom 0.4s var(--ease-out-quint), transform 0.4s var(--ease-out-quint), opacity 0.4s var(--ease-out-quint);
}

#sky-orientation-toggle-btn {
    bottom: calc(3.5rem + var(--bottom-margin-dynamic) + var(--sky-ad-height) + var(--safe-bottom)) !important;
    transition: bottom 0.4s var(--ease-out-quint), transform 0.4s var(--ease-out-quint), opacity 0.4s var(--ease-out-quint);
}

#reset-time-btn-pill-sky {
    bottom: calc(60px + var(--bottom-margin-dynamic) + 36px + 0.75rem + var(--safe-bottom) + var(--sky-ad-height)) !important;
}

body.map-active #reset-time-btn-pill-sky {
    bottom: calc(var(--bottom-margin-dynamic) + 36px + 0.75rem + var(--sky-ad-height) + var(--safe-bottom)) !important;
}

body.map-active #reset-time-btn-pill-sky.has-date-below {
    bottom: calc(var(--bottom-margin-dynamic) + 36px + 0.75rem + 1rem + 0.75rem + var(--sky-ad-height) + var(--admob-height) + var(--safe-bottom)) !important;
}

/* --- Overrides para el anuncio en ISS Live --- */
#iss-map-style-btn,
#iss-recenter-btn,
#iss-passes-btn {
    bottom: calc(var(--bottom-margin-dynamic) + var(--iss-live-ad-height) + var(--safe-bottom)) !important;
    transition: bottom 0.4s var(--ease-out-quint), transform 0.2s;
}

#iss-map-style-menu {
    bottom: calc(3.5rem + var(--bottom-margin-dynamic) + var(--iss-live-ad-height) + var(--safe-bottom)) !important;
    transition: bottom 0.4s var(--ease-out-quint), opacity 0.3s, transform 0.3s;
}

/* --- Estilos para el Modal de Búsqueda en Cielo (Tamaño Fijo) --- */
#sky-search-modal .modal-content {
    height: 60vh;
    display: flex;
    flex-direction: column;
}

/* --- Estilos para Pantalla de Análisis de Lanzamientos --- */
#launch-events-screen {
    background: #000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#launch-analysis-map {
    width: 100%;
    height: 100%;
    background: #111;
}

.launch-legend {
    position: absolute;
    bottom: 30px;
    left: 10px;
    background: rgba(0, 0, 0, 0.8);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 1000;
    pointer-events: none;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    font-size: 0.8rem;
    color: #fff;
}

.legend-color {
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border-radius: 2px;
}

#sky-search-results {
    flex-grow: 1;
    max-height: none !important;
    min-height: 0;
}

/* Ajustes para controles 3D con Safe Area */
#orbit-3d-menu-btn,
#orbit-3d-play-btn,
#cinematic-speed-control {
    bottom: calc(var(--bottom-margin-dynamic) + var(--safe-bottom)) !important;
}

#orbit-3d-options-menu {
    bottom: calc(5.5rem + var(--safe-bottom)) !important;
}


/* --- Manual Override for Segmented Control (Tabs) --- */
.segmented-control-container {
    height: 40px !important;
    /* Un poquitito más grande, punto de equilibrio exacto */
    background-color: rgba(30, 35, 45, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    padding: 4px !important;
    display: inline-flex;
    position: relative;
    width: 100%;
    max-width: 210px;
    min-width: 0;
    align-items: center;
}

.segment-btn {
    height: 100%;
    border-radius: 9999px;
    font-size: 0.875rem !important;
    /* Letra un poco más legible (aprox 14px) */
    font-weight: 600;
    z-index: 2;
    /* Ensure clickability over glider */
    flex: 1;
    /* Distribute space evenly */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    transition: color 0.3s ease;
}

.segment-btn.active {
    color: white;
}

/* Glider styling assumption - enforcing pill shape */
.segment-glider {
    border-radius: 9999px !important;
    height: calc(100% - 8px) !important;
    /* Ajustado por el nuevo padding de 4px */
    top: 4px !important;
    left: 4px !important;
}

/* --- Banner "Sin pasos hoy" --- */
.no-pass-today-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(145deg, rgba(248, 81, 73, 0.1) 0%, rgba(20, 25, 30, 0.4) 100%);
    border: 1px solid rgba(248, 81, 73, 0.3);
    border-radius: 20px;
    margin-bottom: 1rem;
    margin-top: 0.5rem;
}

.no-pass-today-banner .icon-box {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(248, 81, 73, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-danger);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.no-pass-today-banner .text-content {
    display: flex;
    flex-direction: column;
}

.no-pass-today-banner .title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-danger);
}

.no-pass-today-banner .subtitle {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

/* --- Banner "Sin pasos hoy" --- */
.no-pass-today-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(145deg, rgba(20, 25, 30, 0.6) 0%, rgba(20, 25, 30, 0.4) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    margin-bottom: 0;
    margin-top: 1.5rem;
}

.no-pass-today-banner .icon-box {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(248, 81, 73, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-danger);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.no-pass-today-banner .text-content {
    display: flex;
    flex-direction: column;
}

.no-pass-today-banner .title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text-primary);
}

.no-pass-today-banner .subtitle {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

/* ==========================================================================
   ESTILOS PARA BADGE CLICKEABLE DE ESTADO ORBITAL
   ========================================================================== */

/* Badge de estado orbital clickeable */
.orbit-status-badge-clickable {
    cursor: pointer !important;
    transition: all 0.2s var(--ease-out-cubic) !important;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.orbit-status-badge-clickable:hover {
    transform: scale(1.05);
    filter: brightness(1.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.orbit-status-badge-clickable:active {
    transform: scale(0.95);
}

/* Indicador visual de que es clickeable (punteado sutil) */
.orbit-status-badge-clickable::after {
    content: '';
    position: absolute;
    inset: -2px;
    border: 1px dashed currentColor;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.orbit-status-badge-clickable:hover::after {
    opacity: 0.3;
}

/* --- Estilos para tarjetas de Pasos Críticos --- */
.pass-card-critical {
    border: 1px solid rgba(248, 113, 113, 0.4) !important;
    background: radial-gradient(circle at 50% 30%, rgba(248, 113, 113, 0.15) 0%, rgba(20, 25, 30, 0.6) 100%) !important;
    box-shadow:
        0 0 20px rgba(248, 113, 113, 0.15),
        inset 0 0 0 1px rgba(248, 113, 113, 0.2),
        inset 0 0 20px rgba(248, 113, 113, 0.05) !important;
}

.pass-card-extreme {
    border: 1px solid rgba(239, 68, 68, 0.6) !important;
    background: radial-gradient(circle at 50% 30%, rgba(239, 68, 68, 0.25) 0%, rgba(20, 25, 30, 0.6) 100%) !important;
    box-shadow:
        0 0 25px rgba(239, 68, 68, 0.3),
        inset 0 0 0 1px rgba(239, 68, 68, 0.4),
        inset 0 0 20px rgba(239, 68, 68, 0.1) !important;
    animation: pulse-border-red 2s infinite;
}

.pass-card-decayed {
    border: 1px solid rgba(156, 163, 175, 0.4) !important;
    background: radial-gradient(circle at 50% 30%, rgba(156, 163, 175, 0.15) 0%, rgba(20, 25, 30, 0.6) 100%) !important;
    box-shadow:
        0 0 15px rgba(156, 163, 175, 0.1),
        inset 0 0 0 1px rgba(156, 163, 175, 0.2) !important;
    opacity: 0.8;
}

@keyframes pulse-border-red {
    0% {
        border-color: rgba(239, 68, 68, 0.4);
    }

    50% {
        border-color: rgba(239, 68, 68, 0.8);
        box-shadow: 0 0 30px rgba(239, 68, 68, 0.4), inset 0 0 20px rgba(239, 68, 68, 0.2);
    }

    100% {
        border-color: rgba(239, 68, 68, 0.4);
    }
}

/* Fix para que los dropdowns de filtros no se corten y floten sobre el modal */
#passes-filters-modal .modal-content,
#single-pass-filters-modal .modal-content,
#weather-area-filters-modal .modal-content {
    overflow: visible;
}

/* Estado activo para el botón principal de filtros */
#open-passes-filters-btn.is-active-filter,
#show-previous-passes-btn-new.is-active-filter,
#show-previous-passes-btn-critical.is-active-filter,
#show-previous-passes-btn-single.is-active-filter {
    color: var(--color-secondary);
    background-color: rgba(88, 166, 255, 0.15);
    border-color: rgba(88, 166, 255, 0.5);
}

/* Pasos Previos: AHORA EN GRIS (Estilo apagado) - MOVIDO AL FINAL PARA PRIORIDAD */
.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%) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* --- Estilos Visuales para Incendios (FIRMS) --- */
.fire-layer {
    /* MODO ESTÉTICO (Móvil/Vertical): Drop Shadow intenso para efecto incandescente */
    filter: drop-shadow(0 0 2px rgba(255, 0, 0, 0.8)) drop-shadow(0 0 6px rgba(255, 100, 0, 0.6)) brightness(1.3) contrast(1.5);
    will-change: filter;
}

/* MODO OPTIMIZADO (Escritorio/Horizontal): Filtros de color rápidos y mezcla de luz */
@media (min-width: 1024px),
(orientation: landscape) {
    .fire-layer {
        filter: brightness(2.5) saturate(4.0) contrast(1.2);
        mix-blend-mode: screen;
        will-change: transform, opacity;
    }
}

/* --- UI Específica para Modo FIRMS (Incendios) --- */
body.firms-mode-ui #timeline-slider,
body.firms-mode-ui #time-control-panel .w-full.py-2 {
    display: none !important;
}

body.firms-mode-ui #time-step-btn {
    display: none !important;
}

body.firms-mode-ui #time-rewind-btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

body.firms-mode-ui #time-forward-btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Header Text for FIRMS Mode */
body.firms-mode-ui #nearby-header-text {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0.1s;
}

/* Header Text for Satellite Imagery Mode */
body.satellite-imagery-mode-ui #nearby-header-text {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0.1s;
}

/* Red Aesthetic for Time Pill in FIRMS Mode - REDESIGNED (Fire Style) */
body.firms-mode-ui #toggle-time-control-btn {
    /* Fondo oscuro con tinte rojizo muy sutil (Adaptado de .btn-fire-glass) */
    background: linear-gradient(180deg, rgba(30, 20, 20, 0.5) 0%, rgba(40, 10, 10, 0.7) 100%) !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
    color: #fca5a5 !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden;
    /* Asegura que los efectos no se salgan */
}

body.firms-mode-ui #toggle-time-control-btn:hover {
    border-color: rgba(248, 113, 113, 0.6) !important;
    background: linear-gradient(180deg, rgba(40, 20, 20, 0.7) 0%, rgba(60, 15, 15, 0.85) 100%) !important;
    transform: translateX(-50%) translateY(-2px) scale(1.03);
    box-shadow: 0 12px 35px rgba(220, 38, 38, 0.25) !important;
    color: #fff !important;
}

/* Resplandor de fuego abstracto en la parte inferior */
body.firms-mode-ui #toggle-time-control-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55%;
    background: radial-gradient(ellipse at center bottom, rgba(255, 87, 34, 0.35) 0%, rgba(220, 38, 38, 0.1) 60%, transparent 80%);
    filter: blur(5px);
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 0;
}

/* Earth Aesthetic for Time Pill in Satellite Imagery Mode */
body.satellite-imagery-mode-ui #toggle-time-control-btn {
    background: linear-gradient(180deg, rgba(20, 30, 40, 0.6) 0%, rgba(10, 40, 30, 0.8) 100%) !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
    color: #7dd3fc !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden;
}

body.satellite-imagery-mode-ui #toggle-time-control-btn:hover {
    border-color: rgba(56, 189, 248, 0.6) !important;
    background: linear-gradient(180deg, rgba(30, 40, 50, 0.7) 0%, rgba(20, 60, 50, 0.9) 100%) !important;
    transform: translateX(-50%) translateY(-2px) scale(1.03);
    box-shadow: 0 12px 35px rgba(14, 165, 233, 0.25) !important;
    color: #fff !important;
}

/* Resplandor inferior */
body.satellite-imagery-mode-ui #toggle-time-control-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55%;
    background: radial-gradient(ellipse at center bottom, rgba(14, 165, 233, 0.35) 0%, rgba(16, 185, 129, 0.1) 60%, transparent 80%);
    filter: blur(5px);
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 0;
}

/* ========================================================================== 
   ESTILOS ESPECÍFICOS PARA MODO INCENDIOS (FIRMS)
   ========================================================================== */

/* Botón de Estilo de Mapa con estética de fuego delicada */
body.firms-mode-ui #map-style-toggle-btn {
    background: linear-gradient(180deg, rgba(30, 20, 20, 0.5) 0%, rgba(40, 10, 10, 0.7) 100%) !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
    color: #fca5a5 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    overflow: hidden;
}

body.firms-mode-ui #map-style-toggle-btn:hover {
    border-color: rgba(248, 113, 113, 0.6) !important;
    background: linear-gradient(180deg, rgba(40, 20, 20, 0.7) 0%, rgba(60, 15, 15, 0.85) 100%) !important;
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.25) !important;
    color: #fff !important;
}

/* Resplandor inferior sutil */
body.firms-mode-ui #map-style-toggle-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: radial-gradient(ellipse at center bottom, rgba(255, 87, 34, 0.35) 0%, rgba(220, 38, 38, 0.1) 60%, transparent 80%);
    filter: blur(4px);
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 0;
}

body.firms-mode-ui #map-style-toggle-btn i {
    position: relative;
    z-index: 1;
}

/* Ocultar botón de Radar en modo incendios */
body.firms-mode-ui #open-compass-menu-btn {
    display: none !important;
}

/* ========================================================================== 
   LOADER DE FUEGO (FIRMS)
   ========================================================================== */
#firms-loading-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.fire-loader-container {
    position: relative;
    width: 60px;
    height: 80px;
}

.fire-particle {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, #ffeb3b 0%, #ff5722 100%);
    border-radius: 50%;
    transform: translateX(-50%);
    filter: blur(4px);
    opacity: 0;
    animation: fire-rise 1.2s infinite ease-out;
    mix-blend-mode: screen;
}

.fire-particle:nth-child(1) {
    animation-delay: 0.0s;
    width: 25px;
    height: 25px;
    margin-left: -5px;
}

.fire-particle:nth-child(2) {
    animation-delay: 0.2s;
    width: 18px;
    height: 18px;
    margin-left: 8px;
}

.fire-particle:nth-child(3) {
    animation-delay: 0.4s;
    width: 22px;
    height: 22px;
    margin-left: -10px;
}

.fire-particle:nth-child(4) {
    animation-delay: 0.6s;
    width: 15px;
    height: 15px;
    margin-left: 5px;
}

.fire-particle:nth-child(5) {
    animation-delay: 0.8s;
    width: 20px;
    height: 20px;
    margin-left: 0px;
}

.fire-particle:nth-child(6) {
    animation-delay: 1.0s;
    width: 12px;
    height: 12px;
    margin-left: -8px;
}

@keyframes fire-rise {
    0% {
        transform: translateX(-50%) translateY(0) scale(0.5);
        opacity: 0;
    }

    20% {
        opacity: 0.8;
    }

    100% {
        transform: translateX(-50%) translateY(-60px) scale(1.5);
        opacity: 0;
    }
}

.fire-loading-text {
    color: #ff5722;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(255, 87, 34, 0.6);
    animation: pulse-fire-text 2s infinite ease-in-out;
}

@keyframes pulse-fire-text {

    0%,
    100% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
        text-shadow: 0 0 20px rgba(255, 87, 34, 1);
    }
}

#flare-view-canvas {
    touch-action: none;
}

/* ========================================================================== 
   ESTILOS RADAR 2.0 (OPTIMIZACIONES)
   ========================================================================== */
.radar2-sat-marker {
    /* Transición rápida ajustada a 40ms (25fps) para respuesta inmediata */
    transition: transform 0.05s linear;
    will-change: transform;
}

/* Desactivar transición si se mueve rápido (Slider o Botones) para evitar "lag" visual */
body.is-fast-velocity .radar2-sat-marker,
body.fast-glow-transition .radar2-sat-marker {
    transition: none !important;
}

/* --- Radar 2.0 Glow Effects --- */
.radar2-icon-wrapper {
    position: relative;
}

.radar2-icon-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 0.5s ease-out, height 0.5s ease-out;
    z-index: -1;
    pointer-events: none;
}

.radar2-icon-wrapper.is-starlink::after {
    background: radial-gradient(circle, rgba(88, 166, 255, 0.4) 0%, rgba(88, 166, 255, 0) 70%);
}

.radar2-icon-wrapper.is-critical::after {
    background: radial-gradient(circle, rgba(255, 0, 0, 0.4) 0%, rgba(255, 0, 0, 0) 70%);
}

/* ========================================================================== 
   OPTIMIZACIONES DE RENDIMIENTO PARA APP NATIVA (WebView)
   ========================================================================== */
/* Reducir drásticamente la carga de GPU en efectos de vidrio para evitar lag */
body.is-native .glass-header,
body.is-native .menu-list-item,
body.is-native .modal-content,
body.is-native #panel-inner-wrapper,
body.is-native #time-control-panel,
body.is-native .daily-update-card,
body.is-native .pass-card,
body.is-native .satellite-entry,
body.is-native #bottom-nav-bar::before,
body.is-native .start-action-card,
body.is-native .aesthetic-calendar-card,
body.is-native .aesthetic-nav-card,
body.is-native .capture-menu-glass,
body.is-native .capture-modal-glass {
    /* Blur reducido a 5px (vs 10-20px en web). Suficiente para el efecto, mucho más rápido. */
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

/* --- POPUP RADAR 2.0 (Estilo Globo Glass) --- */
.radar-popup-glass .leaflet-popup-content-wrapper {
    background: rgba(20, 25, 30, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    padding: 0;
}

.radar-popup-glass .leaflet-popup-content {
    margin: 10px 12px;
    line-height: 1.4;
}

.radar-popup-glass .leaflet-popup-tip {
    background: rgba(20, 25, 30, 0.85);
}

/* --- Popup Personalizado Radar 2.0 (Fuera del Mapa) --- */
.radar-custom-popup {
    position: absolute;
    background: rgba(20, 25, 30, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: white;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
    padding: 10px 12px;
    pointer-events: auto;
    transform-origin: bottom center;
    will-change: transform;
    z-index: 10;
}

/* --- Marcador de Próximo Objetivo en ISS Live --- */
.next-city-marker-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.next-city-dot {
    width: 6px;
    height: 6px;
    background-color: #ffffff;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}

.next-city-pulse {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-secondary);
    border-radius: 50%;
    animation: pulse-next-city 2s infinite;
    z-index: 1;
    opacity: 0;
}

@keyframes pulse-next-city {
    0% {
        transform: scale(0.5);
        opacity: 1;
        border-width: 2px;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
        border-width: 0px;
    }
}

/* --- PULL TO REFRESH (HISTORIAL) --- */
.pull-refresh-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    /* Alineado abajo para que aparezca al deslizar */
    justify-content: center;
    background: transparent;
    z-index: 10;
    pointer-events: none;
    padding-bottom: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20px);
    mask-image: linear-gradient(to bottom, transparent 0%, black 20px);
}

.pull-indicator-card {
    width: calc(100% - 2rem);
    margin: 0 1rem 10px 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 2000px;
    padding: 0 1rem 0.75rem 1rem;
}

.pull-indicator-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pull-refresh-indicator[style*="height"] .pull-indicator-content {
    opacity: 1;
}

.pull-icon-wrapper {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pull-icon {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    transition: transform 0.3s ease, color 0.3s ease;
}

.pull-progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
}

.pull-progress-circle-bg {
    fill: transparent;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 2.5;
}

.pull-progress-circle {
    fill: transparent;
    stroke: var(--color-secondary);
    stroke-width: 2.5;
    stroke-dasharray: 100;
    /* 2 * PI * 16 approx */
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 0.1s linear;
}

.pull-text {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
}

.pull-refresh-indicator.is-holding .pull-icon {
    color: var(--color-secondary);
    transform: scale(1.1);
}

.pull-refresh-indicator.is-holding .pull-text {
    color: var(--color-text-primary);
}

/* --- DIVISOR DE SECCIÓN STARLINK (Estético) --- */
.starlink-passes-divider {
    position: relative;
    width: calc(100% + 2rem);
    /* Romper padding del contenedor padre */
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 1.5rem 0 1rem;
    /* Espacio vertical reducido */
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

@media (min-width: 640px) {
    .starlink-passes-divider {
        width: calc(100% + 3rem);
        margin-left: -1.5rem;
        margin-right: -1.5rem;
    }
}

.divider-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Degradado sutil de Azul a Violeta a Transparente */
    background: linear-gradient(to bottom,
            rgba(48, 129, 247, 0.15) 0%,
            rgba(168, 85, 247, 0.05) 50%,
            transparent 100%);
    /* Línea de corte superior sutil */
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Luz central en el borde superior */
.divider-gradient::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(88, 166, 255, 0.8), transparent);
    box-shadow: 0 0 20px rgba(88, 166, 255, 0.4);
}

.divider-title {
    position: relative;
    z-index: 1;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;

    /* Estilo limpio sin píldora */
    padding: 0;

    /* Estilo de Texto con Degradado (Celeste/Blanco) */
    background: linear-gradient(135deg, #38bdf8 0%, #e0f2fe 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.3));
}

/* --- EFECTO DE CHISPA EN TRAYECTORIA (Restaurado) --- */
.trajectory-spark-container {
    pointer-events: none;
    will-change: transform;
    z-index: 2000 !important;
}

.spark-head {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background-color: #ffffff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    /* Glow intenso naranja/dorado original */
    box-shadow:
        0 0 8px 2px #ffbb29,
        0 0 15px 6px rgba(255, 140, 0, 0.6),
        0 0 30px 12px rgba(255, 69, 0, 0.3);
    animation: spark-flicker 0.1s infinite alternate;
}

@keyframes spark-flicker {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0.8;
    }
}

/* ========================================================================== 
   ESTILOS PARA BOTONES DE DIRECCIÓN EN "¿QUÉ FUE LO QUE VISTE?"
   ========================================================================== */
.wdys-dir-btn {
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.wdys-dir-btn:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

.wdys-dir-btn.active {
    border-color: var(--color-success) !important;
    background: radial-gradient(circle at 50% 50%, rgba(57, 211, 83, 0.20) 0%, rgba(20, 25, 30, 0.5) 100%) !important;
    box-shadow: 0 0 20px rgba(57, 211, 83, 0.25), inset 0 0 15px rgba(57, 211, 83, 0.15) !important;
    transform: scale(1.03);
}

.wdys-dir-btn i {
    color: #9ca3af;
    transition: color 0.3s ease, filter 0.3s ease;
}

.wdys-dir-btn.active i {
    color: var(--color-success) !important;
    filter: drop-shadow(0 0 6px rgba(57, 211, 83, 0.6));
}

.wdys-dir-btn span {
    color: #d1d5db;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.wdys-dir-btn.active span {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

/* ========================================================================== 
   ESTILOS PARA RESULTADOS DE "¿QUÉ FUE LO QUE VISTE?"
   ========================================================================== */
.wdys-result-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    margin-bottom: 1rem;
    border-radius: 20px;
    overflow: hidden;
    
    /* Estilo Liquid Glass Base */
    background: linear-gradient(145deg, rgba(22, 32, 45, 0.6) 0%, rgba(15, 20, 25, 0.4) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 
        inset 0 1px 0 0 rgba(255, 255, 255, 0.15),
        0 10px 30px -5px rgba(0, 0, 0, 0.5);
        
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
}

.wdys-result-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.6);
}

/* Glow de fondo dinámico según el tipo */
.wdys-result-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, var(--card-glow-color, rgba(255, 255, 255, 0.1)) 0%, transparent 70%);
    opacity: 0.5;
    border-radius: 50%;
    transform: translate(30%, -30%);
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.wdys-result-card:hover::before {
    opacity: 0.8;
    transform: translate(20%, -20%) scale(1.1);
}

.wdys-info-box {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2);
}