.alphage-grid-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.numbers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    gap: 8px;
    flex: 1;
}

.number-box {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    cursor: default;
    font-weight: bold;
    border: 2px solid #ccc;
}

.number-available {
    background-color: #f0f0f0;
    color: #333;
}

.number-apartado {
    background-color: orange;
    color: #fff;
}

.number-pagado {
    background-color: green;
    color: #fff;
}

.vendidos-list {
    flex: 1;
    min-width: 250px;
}

.vendidos-list table th,
.vendidos-list table td {
    text-align: center;
}

.circle {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
}

.circle.number-apartado {
    background-color: orange;
}

.circle.number-pagado {
    background-color: green;
}

/* ✅ Responsivo en pantallas pequeñas */
@media (max-width: 768px) {
    .alphage-grid-container {
        flex-direction: column;
    }
    .numbers-grid {
        grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
    }
    .number-box {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    }
}