/**
 * gps.css - Estilos específicos del módulo GPS (Técnico y Supervisor)
 * @version 2.0 Enterprise
 */

/* ===== VARIABLES (si no están en estilos.css) ===== */
:root {
    --map-bg: #1a1a1a;
    --panel-bg: rgba(255,255,255,0.95);
    --primary: #1976D2;
    --success: #4CAF50;
    --warning: #FF9800;
    --danger: #f44336;
    --dark: #2c3e50;
    --gray: #95a5a6;
}

/* ===== LAYOUT DEL MAPA (gpl.php) ===== */
.map-supervisor {
    display: flex;
    height: calc(100vh - 50px);
    width: 100%;
    overflow: hidden;
}
.map-container {
    flex: 0 0 80%;
    height: 100%;
    position: relative;
}
.mapa-principal {
    height: 100%;
    width: 100%;
    background: var(--map-bg);
}
.panel-usuarios {
    flex: 0 0 20%;
    background: #f8f9fa;
    border-left: 2px solid #dee2e6;
    padding: 15px;
    overflow-y: auto;
    box-shadow: -5px 0 10px rgba(0,0,0,0.1);
}
.panel-usuarios h3 {
    margin-top: 0;
    color: var(--dark);
    font-size: 1.2rem;
    border-bottom: 2px solid var(--primary);
    padding-bottom: 10px;
}
/* Tabla de usuarios */
.table-usuarios {
    width: 100%;
    border-collapse: collapse;
}
.table-usuarios td {
    padding: 12px 5px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}
.table-usuarios tr:last-child td {
    border-bottom: none;
}
.usuario-info {
    display: flex;
    flex-direction: column;
}
.usuario-nombre {
    font-weight: 600;
    color: var(--dark);
}
.usuario-celular {
    font-size: 0.8rem;
    color: var(--gray);
}
.estado-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
}
.estado-icon.verde {
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
}
.estado-icon.gris {
    background: var(--gray);
}
.btn-geo {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-geo:hover {
    background: #0b5e9e;
    transform: scale(1.05);
}

/* ===== ESTILOS PARA GEOCERCAS ===== */
.geofence-circle {
    fill: rgba(25,118,210,0.2);
    stroke: #1976D2;
    stroke-width: 2;
    stroke-dasharray: 5,5;
}

/* ===== ESTILOS PARA LA PWA TÉCNICO (gpx.php) ===== */
/* (Los estilos ya están incluidos inline en gpx.php por simplicidad,
   pero se pueden mover aquí si se desea) */
.tec-panel {
    /* ... */
}

/* ===== ANIMACIONES ESPECÍFICAS ===== */
@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(76,175,80,0.7); }
    70% { box-shadow: 0 0 0 10px rgba(76,175,80,0); }
    100% { box-shadow: 0 0 0 0 rgba(76,175,80,0); }
}
.estado-icon.verde.activo {
    animation: pulse-green 2s infinite;
}

/* ===== RESPONSIVE PARA EL PANEL ===== */
@media (max-width: 768px) {
    .map-supervisor {
        flex-direction: column;
    }
    .map-container {
        flex: 0 0 60%;
    }
    .panel-usuarios {
        flex: 0 0 40%;
        border-left: none;
        border-top: 2px solid #dee2e6;
    }
}