/* Stile per il container attivo/selezionato */
.active-container {
    border: 2px solid #2ecc71 !important; /* Verde più brillante per il container attivo */
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.3) !important; /* Ombra verde leggera */
}

.active-container label {
    color: #2ecc71 !important; /* Verde brillante per le etichette nel container attivo */
}

/* Stile per i container cliccabili */
.clickable-container {
    cursor: pointer;
    position: relative;
    transition: transform 0.1s ease;
}

.clickable-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(40, 167, 69, 0.05); /* Overlay verde molto leggero */
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.clickable-container:hover::before {
    opacity: 1;
}

.clickable-container:active::before {
    background-color: rgba(40, 167, 69, 0.15); /* Overlay verde leggermente più visibile quando cliccato */
}

/* Stile per il pulsante di toggle della voce */
#toggle-voice-btn {
    background-color: #343a40;
    border: 1px solid #454d55;
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s;
}

#toggle-voice-btn:hover {
    background-color: #23272b;
}

#toggle-voice-btn i {
    color: #2ecc71; /* Icona verde come nella cassa generale */
}

#toggle-voice-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(46, 204, 113, 0.1), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
}

#toggle-voice-btn:hover::before {
    opacity: 1;
}

/* Stile per i pulsanti della barra principale */
.button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.button-container button {
    background-color: #343a40;
    color: #f8f9fa;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s;
}

.button-container button:hover {
    background-color: #23272b;
}

.button-container button.active {
    background-color: #ff8c00 !important; /* Arancione per il pulsante attivo */
    color: white !important;
}

.button-container button.active i {
    color: white !important;
}