.info{
    background-color: #6bc0ad; /* verde rodam */
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    color: whitesmoke;
    font-family: var(--fuente-primaria);
}

.warning {
    background-color: var(--naranja); /* amarillo rodam */
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    color: white;
    font-family: var(--fuente-primaria);
}
.success{
    background-color: #6bc0ad; /* verde rodam */
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    color: whitesmoke;
    font-family: var(--fuente-primaria);

}
.error{
    background-color: #DB2E55;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    color: whitesmoke;
    font-family: var(--fuente-primaria);
}

.mensajes-texto{
    color: whitesmoke;
    font-family: var(--fuente-primaria);

}
#contenedor-mensajes {
    margin: 5px;    /* or whatever spacing fits your layout */
}
.mensajes-cerrar {
    position: relative;
    padding-right: 25px;
}



.mensajes-cerrar-btn:hover {
    color: #000;
}


.mensajes-cerrar-btn {
    position: absolute;
    top: -8px;   /* adjust visually to match the p background box */
    right: -8px;
    background: whitesmoke;   /* <p> background color — adjust here */
    border: 1px solid gray; /* same as p border */
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
}