/* --- SECÇÃO DESTAQUES (PRO) --- */
.pro-section {
    margin-bottom: 20px;
}

.pro-title {
    font-size: 0.9rem;
    color: var(--accent-color); /* Amarelo */
    margin-bottom: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Container que faz o scroll horizontal */
.pro-list-container {
    display: flex;
    gap: 15px;
    overflow-x: auto; /* Permite scroll lateral */
    padding-bottom: 10px;
    padding-right: 10px;
    scrollbar-width: none; /* Esconde barra scroll Firefox */
}
.pro-list-container::-webkit-scrollbar { display: none; } /* Esconde barra Chrome */

/* O CARTÃO PRO (DIFERENCIADO) */
.pro-card {
    min-width: 100px; /* Largura fixa */
    width: 100px;
    background: linear-gradient(180deg, #1a1a1a 0%, #000 100%);
    border: 1px solid #FDD500; /* Borda Dourada */
    border-radius: 16px;
    padding: 15px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 15px rgba(253, 213, 0, 0.15); /* Brilho Dourado */
    cursor: pointer;
    transition: transform 0.2s;
}

.pro-card:active { transform: scale(0.95); }

/* Coroa no topo */
.pro-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #FDD500;
    color: #000;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    z-index: 2;
}

.pro-pic {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #FDD500; /* Borda da foto amarela */
    margin-bottom: 8px;
}

/* Animação de pulso se estiver online */
.pro-pic.online {
    box-shadow: 0 0 10px #32D74B;
    border-color: #32D74B;
}

.pro-name {
    font-size: 0.8rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.pro-status {
    font-size: 0.65rem;
    color: #888;
    margin-top: 2px;
}

.pro-status.on { color: #32D74B; }