:root {
    --bg-body: #f8fafc;
    --text-dark: #2c3e50;
    --primary-color: #3a3a3a; /* Color corporativo */
}

body {
    background-color: var(--bg-body);
    color: var(--text-dark);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

/* --- PANTALLA DE ACCESO DENEGADO --- */
#accessDeniedScreen {
    display: none; /* Oculto por defecto */
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #1e293b;
    z-index: 9999;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* --- HERO SECTION --- */
.page-hero {
    position: relative;
    background: var(--primary-color);
    border-radius: 16px;
    padding: 3rem 2rem;
    margin-bottom: 3rem;
    color: white;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}

.hero-content { position: relative; z-index: 10; }
.hero-title { font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem; }

.btn-sync {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border-radius: 50px;
    padding: 8px 20px;
    border: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
    backdrop-filter: blur(5px);
    transition: all 0.3s;
}
.btn-sync:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-2px); }

/* DECORACIÓN ANIMADA */
.hero-decoration { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 1; }
.decoration-circle { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.08); animation: float 6s ease-in-out infinite; }
.circle-1 { width: 150px; height: 150px; top: -50px; right: -50px; }
.circle-2 { width: 100px; height: 100px; bottom: -30px; left: -30px; animation-delay: 2s; }
.circle-3 { width: 80px; height: 80px; top: 40%; right: 15%; animation-delay: 4s; }
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } }

/* INFO BOX */
.info-box-glass {
    background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px; padding: 15px 25px; display: inline-block;
    backdrop-filter: blur(4px); margin-top: 20px; min-width: 350px;
}

/* TARJETAS MANIFIESTOS */
.manifest-card {
    background: white; padding: 20px; border-radius: 12px; margin-bottom: 20px;
    cursor: pointer; transition: transform 0.3s; box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border-left: 5px solid #ccc;
}
.manifest-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }

.badge-status { padding: 5px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; }
.badge-online { background: #d1fae5; color: #065f46; border: 1px solid #34d399; } 
.badge-offline { background: #fef3c7; color: #92400e; border: 1px solid #f59e0b; }

/* MAPA Y MARCADORES */
.custom-marker {
    background-color: #667eea; width: 30px; height: 30px; border-radius: 50%; 
    border: 2px solid #fff; display: flex; justify-content: center; align-items: center; 
    color: white; cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Marcador REAL (Azul) */
.truck-marker-real {
    background-color: #0d6efd; 
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    display: flex; justify-content: center; align-items: center;
    color: white; font-size: 18px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.5s ease; /* Suavizar movimiento */
}

/* Marcador SIMULADOR (Naranja) */
.truck-marker-sim {
    background-color: #fd7e14;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    display: flex; justify-content: center; align-items: center;
    color: white; font-size: 18px;
    cursor: pointer;
    z-index: 11;
    transition: all 0.5s ease;
}

/* PANEL DE CONTROL DE SIMULACIÓN */
.sim-controls {
    position: absolute;
    top: 10px; left: 10px;
    background: rgba(255,255,255,0.95);
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 5;
    max-width: 220px;
    font-size: 0.85rem;
}
.sim-log {
    font-size: 0.7rem;
    margin-top: 5px;
    max-height: 60px;
    overflow-y: auto;
    border-top: 1px solid #eee;
    padding-top: 5px;
    color: #6c757d;
}

.bg-intra { background-color: var(--primary-color) !important; }
.checkpoint-item:hover { background-color: #f1f5f9; cursor: pointer; }

/* ANIMACIÓN DE PARPADEO (PULSE) */
@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(25, 135, 84, 0); }
    100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

/* Clase base para el marcador parpadeante */
.checkpoint-marker-pulse {
    animation: pulse-red 2s infinite; /* Por defecto rojo */
}

.checkpoint-marker-pulse.completed {
    animation: pulse-green 2s infinite; /* Verde si completado */
    background-color: #198754 !important;
}

.bg-light-success { background-color: #f0fdf4 !important; border-left: 4px solid #22c55e; }
.bg-light-info { background-color: #eff6ff !important; border-left: 4px solid #3b82f6; }