body {
    background: linear-gradient(to bottom right, #0f172a, #1e293b, #0f172a);
    color: white;
}

.glass-card {
    background: rgba(30, 41, 59, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid #334155;
    border-radius: 20px;
}

.node {
    position: absolute;
    width: 18px;
    height: 18px;
    background: linear-gradient(45deg, #10b981, #059669);
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 15px rgba(16,185,129,.8);
    animation: pulse 2s infinite;
    cursor: pointer;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16,185,129, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(16,185,129, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16,185,129, 0);
    }
}

.tooltip-country {
    position: absolute;
    background: rgba(0,0,0,0.85);
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 14px;
    white-space: nowrap;
    transform: translate(-50%, -120%);
    display: none;
    color: white;
}

.node:hover + .tooltip-country {
    display: block;
}

.stat-number {
    font-size: 2rem;
    font-weight: bold;
}

.search-input {
    background: #334155;
    border: 1px solid #475569;
    color: white;
}

    .search-input:focus {
        background: #334155;
        color: white;
        border-color: #10b981;
        box-shadow: 0 0 0 0.2rem rgba(16,185,129,.25);
    }

.country-item:hover {
    background: #334155;
    cursor: pointer;
}

/* Clase base para el punto sólido */
.status-dot-solid {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    animation: pulse 1.5s infinite;
    flex-shrink: 0; /* Evita que se deforme en flexbox */
}

/* Variantes de color basadas en tu paleta */
.dot-emerald {
    background-color: #059669;
    box-shadow: 0 0 8px #059669;
}

.dot-blue {
    background-color: #60a5fa;
    box-shadow: 0 0 8px #60a5fa;
}

.dot-purple {
    background-color: #c084fc;
    box-shadow: 0 0 8px #c084fc;
}

/* Animación de pulso mejorada para puntos sólidos */
@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.text-purple-400 {
    color: #c084fc;
}

.text-blue-400 {
    color: #60a5fa;
}

.text-gray-300 {
    color: #d1d5db;
}