:root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --accent-color: #e74c3c;
            --success-color: #27ae60;
            --warning-color: #f39c12;
            --light-color: #ecf0f1;
            --dark-color: #2c3e50;
        }
        
        body {
            background-color: #f5f7fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .navbar-brand img {
            height: 40px;
        }
        
        .card {
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border: none;
            margin-bottom: 20px;
            transition: transform 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-5px);
        }
        
        .card-header {
            background-color: var(--primary-color);
            color: white;
            border-radius: 10px 10px 0 0 !important;
            font-weight: 600;
        }
        
        .btn-primary {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
        }
        
        .btn-success {
            background-color: var(--success-color);
            border-color: var(--success-color);
        }
        
        .btn-warning {
            background-color: var(--warning-color);
            border-color: var(--warning-color);
        }
        
        .btn-danger {
            background-color: var(--accent-color);
            border-color: var(--accent-color);
        }
        
        #qr-reader {
            display: none;
            margin: 0 auto;
            max-width: 500px;
            border: 3px solid var(--secondary-color);
            border-radius: 10px;
            overflow: hidden;
        }
        
        #qr-reader-results {
            display: none;
            margin-top: 10px;
            padding: 10px;
            border-radius: 5px;
            background-color: #f8f9fa;
        }
        
        .list-group-item {
            transition: all 0.3s ease;
        }
        
        .list-group-item:hover {
            background-color: var(--light-color);
            transform: translateX(5px);
        }
        
        .badge-count {
            font-size: 0.9rem;
            background-color: var(--dark-color);
        }
        
        .scan-animation {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.4); }
            70% { box-shadow: 0 0 0 10px rgba(52, 152, 219, 0); }
            100% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0); }
        }
        
        .status-card {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
            min-width: 300px;
            display: none;
        }
        
        .progress-bar {
            height: 5px;
        }
        
        .form-control:focus {
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
        }
        
        .empty-state {
            text-align: center;
            padding: 20px;
            color: #7f8c8d;
        }
        
        .empty-state i {
            font-size: 3rem;
            margin-bottom: 15px;
            color: #bdc3c7;
        }
        
        .location-info {
            font-size: 0.8rem;
            color: #6c757d;
        }
        
        .user-badge {
            background-color: #6f42c1;
            color: white;
            padding: 3px 8px;
            border-radius: 10px;
            font-size: 0.8rem;
            font-weight: bold;
        }
        
        /* Ocultar elementos de audio */
        .audio-element {
            display: none;
        }
        
        .action-buttons {
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid #eee;
        }
        
        .navbar-user {
            color: white;
            margin-left: 15px;
            font-weight: 500;
        }
        
        .navbar-user i {
            margin-right: 5px;
        }
        
        /* Estilo para conexión */
        .connection-status {
            position: fixed;
            top: 10px;
            right: 10px;
            z-index: 1000;
            padding: 5px 10px;
            border-radius: 5px;
            font-weight: bold;
            display: none;
        }
        
        .online {
            background-color: var(--success-color);
            color: white;
        }
        
        .offline {
            background-color: var(--accent-color);
            color: white;
        }

        /* Estilos para el badge de estado de conexión */
#connectionStatusBadge {
    font-size: 0.8rem;
    padding: 5px 10px;
    transition: all 0.3s ease;
}

/* Estados de conexión */
.connection-online {
    background-color: var(--success-color);
    color: white;
}

.connection-offline {
    background-color: var(--accent-color);
    color: white;
}

/* Estilo para el email del usuario */
.navbar-user {
    color: white;
    font-weight: 500;
    font-size: 0.9rem;
}

.navbar-user i {
    margin-right: 5px;
}