body{
  font-family: Arial, Helvetica, sans-serif;
  overflow: auto;
}

 

.container1 {
  
    text-align: center;
    padding: 12px;
}

.centrar-botones {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 300px;
    
  }

  .botones {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 65px;
  }
  
  @media screen and (min-width: 600px) {
    .botones {
      flex-direction: row;
      
    }
   
  }


.botones button {
    background-color: #1678bd;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 10px 2px;
    cursor: pointer;
    transition-duration: 0.4s;
}

.botones button:hover {
    background-color: #49b0c1;
}

@media screen and (max-width: 600px) {
    .botones button {
        display: block;
        width: 100%;
        margin: 10px auto;
    }
}


/* Estilos específicos para la página 1 */
.pagina1-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

@media screen and (max-width: 800px) {
    .pagina1-content {
        padding: 0 20px;
    }
}

.logo {
    display: block;
    max-width: 150px;
    height: auto;
    margin: 5px auto 20px;
    border-radius: 50%;
    /* Agrega margen en la parte inferior para separar el logo del título 
    padding: 0px 0px 200px 0px;*/
    /*border: 3px solid #1678bd; /* Agrega un borde sólido */
    box-shadow: 0px 0px 10px #888888; /* Añade una sombra para dar más destaque */
}

footer {
    background-color: #1678bd;
    /* Establece el color de fondo */
    color: white;
    /* Establece el color del texto */
    text-align: center;
    /* Centra el texto horizontalmente */
    /*padding: 20px; /* Agrega un espacio de 20 píxeles alrededor del contenido del footer */
    font-size: 14px;
    /* Establece el tamaño de fuente */
    position: fixed;
    /* Fija el footer en la parte inferior de la ventana del navegador */
    left: 0;
    bottom: 0;
    width: 100%;
    /* Establece la anchura del footer al 100% del ancho de la ventana del navegador */
}

header {
    background-color: #1678bd; /* Establece el color de fondo */
    position: relative;
    text-align: center; /* Centra el contenido horizontalmente */
    padding: 1px 0; /* Agrega un espacio de 20 píxeles en la parte superior e inferior del contenido */
}

.top-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #1678bd;
}

h1 {
    margin: 0; /* Elimina el margen por defecto del título */
    color: white; /* Establece el color del texto */
    font-size: 14px;
    font-family: Arial, sans-serif;
}

.texto-inicio{
    font-family: Arial, sans-serif;
    text-align: center;
    color: white;
    font-size: 14px;
}

.fullscreen-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  
  .boton-servicios {
    display: inline-block;
    border: none;
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
  }
  
  .boton-servicios i {
    margin-right: 10px;
  }
  
  .boton-encuesta {
    display: inline-block;
    border: none;
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
  }
  
  .boton-encuesta i {
    margin-right: 10px;
  }
  
  /* Agrega estilos adicionales para los demás botones */
  
  .boton-login {
    display: inline-block;
    border: none;
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
  }
  
  .boton-login i {
    margin-right: 10px;
  }
  
  .container1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
  }
  
  .boton-login {
    background-color: #49b0c1;
    margin-left: 20px;
  }

  header {
    background-color: #1678bd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
  }
  
  .texto-inicio {
    text-align: center;
    flex-grow: 1;
    color: white;
  }
  
  .boton-login {
    margin-left: 20px;
    background-color: white;
    color: #1678bd;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 16px;
  }

  .boton-login:hover {
    cursor: pointer;
    background-color: #49b0c1;
    color: white;
  }

  .boton-login:hover {
    cursor: pointer;
    background-color: #49b0c1;
    color: white;
}

/* Nuevos estilos */
.container2 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding-left: 20px;
}

.boton-izquierda {
    background-color: white;
    color: #1678bd;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition-duration: 0.4s;
}

.boton-izquierda:hover {
    background-color: #49b0c1;
    color: white;
}

/* boton desplegable*/
.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background-color: #f9f9f9;
  border: none;
  color: black;
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
  border-right: 1px solid #ccc;
}

.dropdown-content {
  position: absolute;
  display: none;
  min-width: 160px;
  z-index: 1;
  background-color: #1678bd;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
  display: block;
  padding: 20px 16px; /* Incrementa el padding superior e inferior para darle más espacio al texto */
  text-decoration: none;
  color: white;
  box-sizing: border-box; /* Asegúrate de que el padding se incluya en el ancho total */
  margin: 0; /* Elimina los márgenes por defecto */
}

.dropdown-content a.reporte:hover {
  background-color: #49b0c1;
  color: rgb(255, 255, 255);
}

.dropdown-content a.createuser:hover {
  background-color: #49b0c1;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}

button i {
  margin-right: 10px; /* Ajusta el valor según tus preferencias */
}

.dropdown-content a i {
  margin-right: 10px; /* Ajusta el valor según tus preferencias */
}


/* de aqui*/