/* El ul con la clase correo-list es el que contiene los correos */

.correo-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* el cursor pointer es para que el mouse se convierta en una mano cuando se pase por encima */
/* Agrega un sobreado en el elemento cuando se pase por encima */
.correo-list li:hover {
    cursor: pointer;
    background-color: #eee;
    /* Agrega una transición para que el cambio de color sea más suave */
    transition: background-color 0.2s ease;
    /* Letra en negrita */
    font-weight: bold;
}

/* Agrega un borde al elemento seleccionado */
.correo-list li.active {
    border-left: 5px solid #333;
}
/* Si el texto es muy largo, se corta y se agrega puntos suspensivos */
.correo-list li .correo-list-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}