/*==========================================================================================================
Cuadro informativo:
Estos son los estilos para los mensajes y preguntas para el usuario que hace el sistema.
==========================================================================================================*/

/* Cuadro */
#cuadroInformativo {
    position: fixed; width: 350px; background-color: #d1d1d1; top: 20px; left: calc(50% - 175px);
    border-radius: 5px; padding: 10px 5px 10px 5px;
}

/* Titulo del cuadro (Mensaje o pregunta) */
#cuadroInformativo p:nth-of-type(1) {
    font-family: 'Montserrat', sans-serif; color: #525252; text-align: center; -webkit-padding-before: 2px;
    font-size: 14px;
}

/* Boton para cerrar el cuadro informativo */
.btnCerrarInformativo {
    position: absolute; top: 8px; right: 5px; background-color: transparent; color: #525252;
    border: none; width: 18px; height: 18px; border-radius: 50%; font-family: 'Montserrat', sans-serif; cursor: pointer;
    padding-top: 1px;
}

/* Estilos para el texto del mensaje o pregunta */
.textoInformativo {
    margin-top: 5px; color: #000000; font-family: 'Montserrat', sans-serif; max-height: 100px; overflow-y: auto;
    font-size: 13px; padding: 0px 8px;
}

/* Área de botones */
.btnInformativo {display: flex; margin-top: 15px;}
.btnInformativo button {
    width: 40%; margin: auto; background-color: #1290c9; border: none; color: #ffffff;
    padding: 3px; border-radius: 3px; font-family: 'Montserrat', sans-serif; cursor: pointer; display: block; margin: auto;
}
.btnInformativo button:hover {background-color: #71a73f;}
.btnInformativo button:focus {outline: none; background-color: #71a73f;}
.btnInformativo button:active {background-color: #000000;}

/*=========================================================================================================*/