/* Estilos para pantallas grandes */
body {
  background-color: #343d4b; /* Establecer el color de fondo del cuerpo */
}

.center {
  text-align: center; /* Centrar elementos con clase .center */
  justify-content: center; /* Centrar elementos en línea */
  display: block; /* Establecer el display a bloque */
  margin: auto; /* Establecer margen automático */
}

.w3-quarter {
  float: left; /* Colocar elementos a la izquierda */
  width: 50%; /* Establecer el ancho de las cajas meteorológicas */
  height: 450px; /* Establecer la altura de las cajas meteorológicas */
}

.caja_meteorologia_iz {
    position: relative;
    border-radius: 30px 0px 0px 0px;
    color: #fff;
    background-image: url(/app-asocebu/Fondo.png);
    background-size: cover;
    background-position: center;
    box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 0px 0px inset, rgba(0, 255, 38, 0.54) 0px 0px 6px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
	
	
	
	
}

.caja_meteorologia_iz::before {
 
}

.caja_meteorologia_iz:hover {
  transform: scale(1.1);
  transition: transform 0.5s ease;
}

.caja_meteorologia_de {
background-image: url(/app-asocebu/verde.png);
  border-radius: 0px 0px 30px 0px;
	position: sticky;
    box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 0px 0px inset, rgba(0, 255, 38, 0.54) 0px 0px 6px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

h2,
p {
  padding: 0 25px 0; /* Establecer el relleno para h2 y p */
}

p {
 
}
/* Estilos para el encabezado principal */
.h1_left {
  position: absolute; /* Posición absoluta para ajustar a la parte inferior izquierda */
  bottom: 25px; /* Espacio de 25px hacia arriba desde la parte inferior */
  left: 16px; /* Espacio de 16px desde el borde izquierdo */
  font-size: 3vw; /* Tamaño de fuente relativo al ancho de la pantalla */
  line-height: 1.2; /* Altura de línea del texto */
}

/* Estilos para un subencabezado */
.h3_left {
  position: absolute; /* Posición absoluta para ajustar a la parte inferior izquierda */
  bottom: 0px; /* Espacio de 0px hacia arriba desde la parte inferior */
  left: 16px; /* Espacio de 16px desde el borde izquierdo */
  font-size: 2vw; /* Tamaño de fuente relativo al ancho de la pantalla */
  line-height: 1.2; /* Altura de línea del texto */
}

/* Estilos para una tabla */
table {
  position: relative; /* Posición relativa para permitir el posicionamiento de elementos internos */
  border-spacing:10px 15px;
	/* Espacio entre las celdas de la tabla */
  width:100%;/* Ancho del 85% del contenedor */
  text-align: left; /* Alinear el texto a la izquierda */
  max-width:800px; /* Ancho máximo de 600px */
  margin: 0 auto; 
padding: 0px 0px 0px 5px;
}

/* Estilos para las celdas de encabezado y cuerpo de la tabla */
th,
td {
  font-size: 18px; /* Tamaño de fuente de 18px */
  color: #fff; /* Color de fuente blanco */
}

/* Estilos para las celdas de cuerpo de la tabla */
td {
  text-align: right; /* Alinear el texto a la derecha */
}

/* Estilos para pantallas medianas */
@media only screen and (max-width: 768px) {
  /* Alinear alineación del texto a la izquierda para elementos con clase 'center' */
  .center {
    text-align: left;
  }
  /* Ancho del 49.99999% para elementos con clase 'w3-quarter' */
  .w3-quarter {
    width: 49.99999%;
  }
}

/* Estilos para pantallas pequeñas */
@media only screen and (max-width: 480px) {
  /* Ancho del 100% para elementos con clase 'w3-quarter' */
  .w3-quarter {
    width: 100%;
  }
  /* Alinear alineación del texto a la izquierda para elementos con clase 'center' */
  .center {
    text-align: left;
  }
  /* Posición desde el borde izquierdo en 0 y ancho del 100% para la tabla */
  table {
    left: 0;
    width: 100%;
  }
  /* Agregar un margen inferior de 15px para elementos de lista sin clase */
  ul {
    margin-bottom: 15px;
  }
  li {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }
  .clima_Semana {
    width: 100%;
    margin: 0;
  }
}
.clima_Semana {
  position: relative;
  left: 0%;
  border-collapse: separate;
  border-spacing: 15px;
  width: 95%;
  text-align: left;
  border-radius: 15px;
}
table,
tr:hover {
  color: red;
}

/* Lista desordenada de los dias de la semana*/

ul {
  /*padding: 10px 0px 10px;*/
  margin: 0;
}

li {
  
}

span {

}

.li_active {
  background: #fff;
  color: #222831;
  border-radius: 10px;
}

.li_active:hover {
  transform: scale(1.2);
  transition: transform 0.1s ease;
}

/* Zoom elementos de lista */
.li_active_temp {
  display: inline-block;
  background-color: #222831;
  color: #ffffff;
  transition: background-color 0.5s;
  border-radius: 10px;
}

.li_active_temp:hover {
  transform: scale(1.2);
  transition: transform 0.1s ease;
  background: #fff;
  border-radius: 10px;
  color: #191a1f;
}

.span_temperature {
  font-weight: bold;
}

@media only screen and (max-width: 1200px) {
  /*Estilos para pantallas medianas*/

  .w3-quarter {
    width: 49.99999%;
  }
}

@media (max-width: 480px) {
  /* Estilos para pantallas pequeñas */

  .w3-quarter {
    width: 100%;
  }

  .center {
    text-align: left;
  }

  table {
    left: 0;
    width: 100%;
  }

  ul {
    margin-bottom: 15px;
  }

  li {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }

  .clima_Semana ul {
    display: flex;
    justify-content: space-around;
    list-style: none;
    padding: 0;
  }

  .clima_Semana ul li {
    flex: 0 0 calc(20% - 20px);
    margin: 0 10px;
    font-size: 16px;
  }
}

.change_Location {
  color: #fff;
  font-size: 20px;
  /* Cambia el valor de la opacidad aquí */
  border-radius: 20px;
  width: 70%;
  height: 40px;
  background-image: linear-gradient(
    to right,
    rgba(0, 255, 255, 2),
    rgba(255, 0, 255, 5)
  );
  text-align: center;
}

.change_Location:hover {
  transform: scale(0.9);
  transition: transform 0.1s ease;
}

#div_Form {
  padding: 20px 0 0;
}