/* 1. Añadimos una transición suave y el cursor de "mano" para indicar que es clickeable */
i[data-bs-toggle="collapse"] {
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
    display: inline-block !important;
    /* Necesario para que el transform (rotate) funcione */
}

/* 2. Cuando el collapse está abierto, rotamos el icono 180 grados */
/* Usamos aria-expanded="true" y también :not(.collapsed) por si Bootstrap lo maneja distinto */
i[data-bs-toggle="collapse"][aria-expanded="true"],
i[data-bs-toggle="collapse"]:not(.collapsed) {
    transform: rotate(180deg) !important;
}

.bi {
    font-size: 1.2rem;
}