/* --- CONFIGURACIÓN DE MAPA FULL-SCREEN (scope local a contenedores de seguimiento) --- */ /* No modificar el overflow global del para no impedir el scroll en otras páginas. */ .tracking-wrapper, .main-container, #mapContainer { overflow: hidden; /* Evita scroll dentro del área del mapa */ } .tracking-wrapper { position: relative; height: 100vh; width: 100vw; /* Mantenemos tu ajuste de layout pero lo hacemos dinámico */ margin-top: calc(-1 * var(--navbar-height, 20px)); } #mapContainer { height: 100vh; width: 100%; z-index: 1; background-color: #eee; /* Color de carga */ } /* --- PANEL DE INFORMACIÓN (Glassmorphism Gold) --- */ .status-card { position: absolute; top: 100px; left: 20px; z-index: 1000; width: 320px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 25px; border-radius: 25px; box-shadow: 0 10px 40px rgba(71, 40, 37, 0.2); border: 1px solid rgba(211, 171, 128, 0.4); font-family: 'Poppins', sans-serif; animation: slideInLeft 0.6s cubic-bezier(0.23, 1, 0.32, 1); } /* Caja de Tiempo Estimado (ETA) */ .eta-box { background: #472825; color: white; padding: 18px; border-radius: 18px; text-align: center; margin-top: 15px; box-shadow: 0 5px 15px rgba(71, 40, 37, 0.3); transition: var(--transicion, all 0.3s ease); } .eta-box:hover { transform: translateY(-3px); background: #5d3531; } .eta-box h4 { font-size: 0.8rem; text-transform: uppercase; opacity: 0.8; margin-bottom: 5px; } .eta-box span { font-size: 1.5rem; font-weight: 800; display: block; } /* --- ICONO DE MOTO ANIMADO --- */ .moto-icon-div i { font-size: 35px; color: #472825; filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); animation: motoVibration 0.3s infinite alternate; } /* Animación de motor encendido */ @keyframes motoVibration { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-2px) rotate(2deg); } } /* Animación de entrada del panel */ @keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } /* --- RESPONSIVE MÓVIL (Crítico para Mapas) --- */ @media (max-width: 768px) { .status-card { top: auto; bottom: 30px; /* En móvil, el panel va abajo para manejo con una mano */ left: 5%; right: 5%; width: 90%; padding: 20px; animation: slideUpMobile 0.5s ease-out; } .tracking-wrapper { margin-top: 0; /* Reset en móvil */ } .eta-box { display: flex; justify-content: space-between; align-items: center; text-align: left; padding: 12px 20px; } .eta-box h4 { margin-bottom: 0; } /* Pequeño indicador para "deslizar" el panel (decorativo) */ .status-card::before { content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; background: rgba(0,0,0,0.1); border-radius: 10px; } } @keyframes slideUpMobile { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Estilo para los markers del mapa (si usas Leaflet o Google Maps) */ .custom-marker { background: var(--accent-main); border: 3px solid white; border-radius: 50%; box-shadow: 0 0 15px rgba(211, 171, 128, 0.6); } /* ----------------------------------------------------------------- Styles moved from Views/Pedido/Seguimiento.cshtml ----------------------------------------------------------------- */ /* Ocultar elementos que estorban (solo dentro del contexto de seguimiento) */ /* Nota: no ocultamos el elemento