body {
    background-color: #f8f9fa;
}

#map-container {
    position: relative; /* Establece el contexto de posicionamiento para el tooltip */
    height: 85vh;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: auto; /* Opcional: asegura que nada se salga del contenedor */
}

/* Estilo por defecto de los departamentos */
.department {
    fill: #adb5bd;
    stroke: #fff;
    stroke-width: 1;
    transition: fill 0.2s ease-in-out;
    cursor: pointer;
}

/* Estilo al pasar el cursor sobre un departamento */
.department:hover {
    fill: #6c757d;
}

/* Estilo para el departamento seleccionado */
.department.active {
    fill: #007bff;
}

/* Estilo para el tooltip */
.tooltip-container {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 14px;
    pointer-events: none; /* Evita que el tooltip interfiera con los eventos del mouse */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    z-index: 1000;
    white-space: nowrap; /* Evita que el texto del tooltip se parta en dos líneas */
}

#user-info {
    height: 85vh;
    overflow-y: auto; /* Permite scroll si la lista de usuarios es muy larga */
}

.user-item {
    padding: 10px;
    border-bottom: 1px solid #dee2e6;
}

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

.user-name {
    font-weight: bold;
}

.user-city {
    color: #6c757d;
}

@media (max-width: 768px) {
    #map-container {
        height: 50vh;
    }
}