.form-select,
.form-select option {
    text-transform: uppercase;
}


/* Contenedor para que los badges tengan espacio entre ellos */
.d-flex.flex-wrap {
    gap: 8px; /* Reducido */
}

/* Ocultamos el checkbox original que es poco atractivo */
.area-checkbox {
    display: none;
}

/* Estilo base para cada badge (la etiqueta) */
.area-badge {
    display: inline-block;
    padding: 4px 12px; /* Reducido */
    font-size: 0.85rem; /* Reducido */
    border-radius: 16px;
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    opacity: 0.8;
}

    /* Efecto al pasar el mouse por encima */
    .area-badge:hover {
        opacity: 1;
        transform: scale(1.05);
    }

    /* --- ASIGNACIÓN DE COLORES POR POSICIÓN --- */
    .area-badge:nth-child(6n + 1) {
        background-color: #007BFF;
    }
    /* Azul */
    .area-badge:nth-child(6n + 2) {
        background-color: #28A745;
    }
    /* Verde */
    .area-badge:nth-child(6n + 3) {
        background-color: #DC3545;
    }
    /* Rojo */
    .area-badge:nth-child(6n + 4) {
        background-color: #FFC107;
    }
    /* Amarillo (texto oscuro) */
    .area-badge:nth-child(6n + 5) {
        background-color: #6F42C1;
    }
    /* Morado */
    .area-badge:nth-child(6n + 6) {
        background-color: #17A2B8;
    }
    /* Celeste */



    /* --- ESTILO CUANDO EL BADGE ESTÁ SELECCIONADO --- */
    .area-badge:has(.area-checkbox:checked) {
        opacity: 1;
        box-shadow: 0 0 0 2px white, 0 0 0 4px currentColor; /* Borde reducido */
    }