/* Estilos generales */
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px; /* Tamaño de fuente base */
    margin: 0;
    padding: 0;
}

/* Estilos para el ícono de WhatsApp */
.btn-wsp {
    position: fixed;
    cursor: pointer;
    width: 62px;
    height: 62px;
    line-height: 63px;
    bottom: 25px;
    right: 25px;
    padding: 15px;
    background: #25D366;
    color: #FFF;
    border-radius: 50%;
    font-size: 25px;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
    z-index: 100;
    transition: all 0.3s ease;
    animation: efecto 1.2s infinite;
}

.btn-wsp:hover {
    transform: scale(1.1);
    text-decoration: none;
    transition: 0.3s;
    color: #25D366;
    background: #fff;
    /* ... */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5); /* Efecto de sombra al pasar el ratón */
    transform: rotate(360deg); /* Gira 360 grados */
}
/* Estilos para el contenedor de WhatsApp */
#whatsapp-icon {
    position: fixed;
    bottom: 30px;
    right: 30px;
    /*COLOCAR COLOR ROJO A BORDE DE VENTANA DEL CONTENEDOR*/
    background-color: #f5433c;
    padding: 13px;
    border-radius: 5px;
    cursor: pointer;
    z-index: 9999;
    display: flex;
    align-items: center;
}

#whatsapp-img {
    width: 60px;
    height: 60px;
    margin-right: 10px;
    max-width: 100%; /* Evitar que la imagen sea más grande que su contenedor */
    max-height: 100%;
    
}

/* Estilos para el contenedor de información */
#info-container {
    display: none;
    flex-direction: column;
    color: #3afa3a;
    position: relative; /* Añade posición relativa para que el pseudo-elemento funcione */


}
#info-container {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-image: url('EDIFICIO.jpg'); Reemplaza con la URL de tu imagen */
    background-size: auto;
    background-repeat: no-repeat;
    /*background-position: center center;*/
    background-position: right right;
    z-index: -1; /* Coloca el pseudo-elemento detrás del contenido */
    border: 5px solid rgb(255, 52, 45); /* Cambia el color del borde a rojo */
}

#info-container h3 {
    font-size: 15px; /* Tamaño de fuente */
    margin: 0; /* Elimina el margen superior predeterminado */
    padding: 10px; /* Espaciado interior para crear el fondo blanco */
    background-color: rgb(253, 67, 67); /* Fondo blanco */
    color: #fff; /* Color del texto blanco */
    display: inline-block; /* Alinea el fondo alrededor del texto */
    padding: 2px 4px; /* Agregar un espacio alrededor del texto */
    border-radius: 4px; /* Agregar esquinas redondeadas */
}

#info-container ul {
    list-style: none;
    padding: 0;
}

#info-container li {
    margin: 5px 0;
    font-size: 15px;
    
}

/* COLOR DE TEXTO DE NÚMEROS */
#info-container a {
    color: #02010c;
    text-decoration: dotted;
}
/* COLOR DE TEXTO DE AREAS */
#info-container b {
    color: #02010c;
    text-decoration: dotted;
    font-size: 14px;
}

#info-container a:hover,
#info-container b:hover {
    text-decoration: none;
    background-color: #1ce666; /* #25D366 #b7ff8e Cambiar el fondo al pasar el ratón */
    color: #141313; /* Cambiar el color del texto al pasar el ratón */
    padding: 2px 4px; /* Agregar un espacio alrededor del texto */
    border-radius: 4px; /* Agregar esquinas redondeadas */
    transition: all 0.3s ease;
}
#info-container img {
    width: 85px; /* Tamaño de la imagen */
    height: auto; /* Mantén la proporción de la imagen */
    margin-right: 10px; /* Espaciado derecho */
    float: right; /* Alinea la imagen a la derecha */
    margin-bottom: 10px; /* Espaciado inferior */
    transition: transform 0.3s ease; /* Agregar una transición suave */
}
#info-container img:hover {
    transform: scale(1.1); /* Hacer zoom al pasar el ratón sobre la imagen */
    transform: rotate(360deg); /* Gira el logo 360 grados cuando se hace hover */
}

/* Mostrar el contenedor de información al pasar el ratón */
#whatsapp-icon:hover #info-container {
    display: block;
}
/* EFECTOS PARA ICONO-WHATS*/
@media only screen and (min-width:320px) and (max-width:768px){
    .btn-wsp{
        width:63px;
        height:63px;
        line-height: 66px;
        transition: ease 1s;
	}
}
@keyframes efecto{
    0%{
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.85);
    }
    100%{
        box-shadow: 0 0 0  40px rgba(0, 0, 0, 0);
    }

}

/* Estilos para dispositivos de pantalla pequeña (móviles) */
@media screen and (max-width: 768px) {
    body {
        font-size: 12px; /* Reducir el tamaño de fuente para dispositivos de pantalla mediana */
    }

    /* Ajustar el tamaño del ícono de WhatsApp para dispositivos móviles */
    .btn-wsp {
        width: 52px;
        height: 52px;
        line-height: 51px;
    }

    /* Ajustar el tamaño de la fuente para dispositivos móviles */
    #info-container li {
        font-size: 14px;
    }
    #info-img img{
    width:52px;
		}
    #info-img{
    float: right;/*CAMBIA LA ALINEACION AL LADO DERECHO*/
    margin-left: 10px;/*AGREGA UN MARGEN IZQUIERDO*/
	     }

}

/* ---Estilos para dispositivos de pantalla pequeña--- (móviles) */
@media screen and (max-width: 480px) {
    body {
        font-size: 10px; /* Reducir aún más el tamaño de fuente para dispositivos móviles pequeños */
    }

 /* Ajustar el tamaño del ícono de WhatsApp para dispositivos móviles */
    .btn-wsp {
        width: 50px;
        height: 50px;
        line-height: 40px;
    }

    /* Ajustar el tamaño de la fuente para dispositivos móviles */
   	#info-container li {
        font-size: 10px;
    	}
	#info-img img{
	width:60px;}
	
       #info-img{
       float: right;/*CAMBIA LA ALINEACION AL LADO DERECHO*/
       margin-left: 10px;/*AGREGA UN MARGEN IZQUIERDO*/
	     }

	}


/*CODIGO NUEVO-15-09-2023*/

/* Estilos para la imagen 
#info-img {*/
    /* width: 65px; Ajusta el ancho de la imagen según tus necesidades */
    /* height: auto; Mantén la proporción de la imagen */
    /*margin-right: 10px;  Espaciado derecho */
    /*float: right;  Alinea la imagen a la izquierda */
    /* margin-bottom: 10px; Espaciado inferior */

/* }*/
/* Estilos para la imagen de fondo info-img */
#info-img {
    position: relative; /* Añade posición relativa para pseudo-elementos */
    width: 80px; /* Tamaño de la imagen */
    height: auto; /* Mantén la proporción de la imagen */
    margin-right: 10px; /* Espaciado derecho */
    float: right; /* Alinea la imagen a la derecha */
    margin-bottom: 10px; /* Espaciado inferior */
}

/* Pseudo-elemento para aplicar la opacidad a la imagen de fondo */
#info-container::before {
    content: ""; /* Contenido vacío, necesario para el pseudo-elemento */
    position: absolute; /* Posición absoluta para cubrir la imagen de fondo */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('EDIFICIO2.png');  /*Imagen de fondo */
    background-size: cover;
    background-position: right right;
    background-repeat: no-repeat;
    z-index: -1; /* Coloca el pseudo-elemento detrás del contenido */
    opacity: 0.7; /* Establece la opacidad deseada (0.0 - 1.0) */
}


/* Agrega esta regla para el giro cuando se hace clic (CODIGO AGREGADO A BOTON-BNT)*/
#whatsapp-icon.clicked #whatsapp-img {
    transform: rotate(360deg); /* Gira 360 grados */
}

/* Estilos para el icono "X" */
#close-icon {
    display: none;
    cursor: pointer;
    font-size: 24px;
    position: absolute;
    top: 10px;
    right: 10px;
    color: #5363f1;
}

/* Estilos para el contenedor de información con bordes */
#info-container {
    display: none;
    flex-direction: column;
    color: #02010c;
    background-color: #f7f7f7; /* Fondo oscuro para resaltar el contenido */
    padding: 4px; /* Añadir espacio alrededor del contenido */
    border: 2px solid #f3f56d; /* Borde con color de WhatsApp */
    border-radius: 8px; /* Esquinas redondeadas */
    position: relative; /* Para posicionar el icono "X" sobre el contenedor */
}

/* Estilos para el encabezado dentro de #info-container */
#encabezado-info {
    background-color: #f13535; /* Color ROJO ENCABEZADO COLEGIO DE INGENIEROS*/
    color: #fff; /* Color del texto blanco */
    padding: 8px; /* Espaciado interior */
    font-weight: bold; /* Texto en negrita */
    text-align: center; /* Alinear texto al centro */
    font-size: 15px; /* Tamaño de fuente */
    border-radius: 8px; /* Esquinas redondeadas */
    margin: 0; /* Eliminar el margen superior predeterminado */
    margin-bottom: 10px; /* Agregar margen inferior para separar del contenido */
}


/* Estilos para cada elemento <li> dentro de #info-container */
#info-container li {
    background-color: #ffffff; /* Fondo verde claro para tus mensajes */
    border: 1px solid #df2929; /* Borde con el color de WhatsApp */
    border-radius: 8px; /* Esquinas redondeadas */
    padding: 4px; /* Espaciado interno para cada mensaje */
    margin: 3px 0; /* Margen vertical entre mensajes */
    font-weight: normal; /* Texto con peso normal */
    max-width: 70%; /* Ancho máximo para que los mensajes no ocupen toda la pantalla */
}

/*CODIGO NUEVO 18/09/2023*/

/* Estilos para el enlace de horario */
#horario-link {
    position: relative; /* Añade posición relativa para el posicionamiento absoluto del mensaje emergente */
}

/* Estilos para el mensaje emergente */
#horario-link::after {
    content: "Lun - Vie 08:00 a 13:00 y 14:00 a 18:00"; /* Contenido del mensaje emergente */
    position: absolute; /* Posición absoluta con respecto al enlace */
    background-color: #ffffff; /* Fondo blanco */
    border: 1px solid #ccc; /* Borde del mensaje emergente */
    padding: 5px; /* Espaciado interior */
    font-size: 14px; /* Tamaño de fuente */
    display: none; /* Inicialmente oculto */
    z-index: 1; /* Asegura que el mensaje emergente esté sobre otros elementos */
    top: 25px; /* Distancia desde la parte superior del enlace */
    left: 0; /* Alineado a la izquierda del enlace */
    white-space: nowrap; /* Evita que el texto se divida en múltiples líneas */
    font-weight: bold;
}

/* Mostrar el mensaje emergente al pasar el cursor por encima */
#horario-link:hover::after {
    display: block;
}