.meteorologia{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.meteorologia h3{
        text-align: center;
    margin-bottom: 20px;
    font-size: 1.3rem;
}
.containerMeteo{
    border-radius: 15px;
    padding: 20px;
    background-color: rgb(62, 62, 64);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90%;
    margin-bottom: 40px;
}
.searchcontainer{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 20px;
}
.searchcontainer .nube{
    width: 40px;
    margin-bottom: 15px;
}
.pronostico{
  

    margin-left: auto;
    margin-right: auto;

    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}

.arri {
    display: flex;
    /* justify-content: center;  Cambiamos esto para que la nube y la barra estén en los extremos */
    justify-content: space-between; 
    align-items: center;
    /* flex-wrap: wrap; */ 
    margin-bottom: 20px; 
}

.cloud-icon {
    width: 40px; /* Tamaño del icono de la nube */
    height: 40px;
    /* Puedes añadir color si el icono es un SVG que permite cambio de color con CSS */
    /* filter: brightness(0) saturate(100%) invert(50%) sepia(100%) saturate(2000%) hue-rotate(80deg); /* Ejemplo para un color verdoso */
}

.search {
    display: flex;
    align-items: center;
    background-color: #444;
    border-radius: 20px;
    padding: 8px 15px;
    flex-grow: 1; /* Permite que la barra de búsqueda ocupe el espacio restante */
    margin-left: 20px; /* Espacio entre la nube y la barra de búsqueda */
}

.search-icon {
    width: 24px; /* Tamaño del icono de búsqueda */
    height: 24px;
    cursor: pointer;
    /* filter: brightness(0) saturate(100%) invert(80%); /* Ejemplo para un color gris claro */
}

.der, .izq{
    width: 50%;
}

.der{
    display: contents; /* preguntar */
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.der .card{
    background-color: rgb(73, 73, 75);
    height: 110px;
    padding: 5px 5px 5px 5px;
    border-radius: 10px;
}

.card{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-left: 10px;
    margin-left: 10px;
}

.card .day{
    text-align: center;
    margin-bottom: 10px;
}

.card img{
    width: 40px;
    margin-bottom: 10px;
}

.card .temp{
    width: 65px;
    text-align: center;
}

.izq{
    padding-left: 15px;
}

.izq h4{
    font-size: 1.3rem;
text-align: left;
font-weight: bolder;
margin-bottom: 10px;
}

.izq h5{
        font-size: 1.3rem;
margin-bottom: 10px;
text-align: left;
}

.contienerNow{
    display: flex;
    justify-content: start;
    align-items: center;

}

.contienerNow .temp{
    font-size: 2.2rem;
    font-weight: bolder;
    margin-left: 8px;
    margin-right: 8px;
}

.icons{
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.abaj,.arri{
    width: 160px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/*
.arri{
    display: flex;
    justify-content: center;
    align-items: flex-start;    

    margin-bottom: 10px;
}

.arri img{
    width: auto;
}

.search img{
    width: auto;
}
*/

.arri img{
    width: auto;
}

.arri {
    display: flex;
    justify-content: space-between; /* Centra horizontalmente los elementos hijos */
    align-items: center; /* Opcional: centra verticalmente si .arri tiene una altura definida */
    width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
    padding-top: 20px; /* Ajusta según sea necesario para la separación superior */
    box-sizing: border-box; /* Incluye padding en el ancho total */
}

.search {
    display: flex; /* Para alinear el input y el icono de búsqueda */
    align-items: center;
    background-color: transparent; /* Color de fondo de la barra de búsqueda */
    border: 0.1px solid #bbb;

    border-radius: 20px; /* Bordes redondeados */
    padding: 8px 15px; /* Espaciado interno */
}

.search input {
    border: none;
    background: transparent;
    color: white;
    outline: none; /* Quita el borde de enfoque */
    padding-right: 10px; /* Espacio entre el texto y el icono de búsqueda */
    width: 200px; /* Ajusta el ancho del input según sea necesario */
}

.search input::placeholder {
    color: #bbb;
}

.search-icon {
    width: 20px; /* Ajusta el tamaño del icono */
    height: 20px;
    cursor: pointer;
}

.cloud-icon {
    /* Si quieres que el icono de la nube esté a la izquierda de la barra de búsqueda
       y todo el conjunto esté centrado, puedes ajustar el gap en .arri o envolver
       la barra de búsqueda y el icono de la nube en otro div si quieres un control
       más granular. De lo contrario, este icono quedará a la izquierda del grupo centrado. */
    margin-right: 15px; /* Espacio entre el icono de la nube y la barra de búsqueda */
}

.icons .container{
    display: flex;
    justify-content: start;
    align-items: start;
}

.icons .container img{
    width: 20px;
    margin-left: auto;
    margin-right: auto;
     margin-right: 10px;
}

.icons .abaj .humedad{
    width: 15px;
}

.err{
    text-align: center;
    color: red;
    margin-top: 20px;
    margin-left:20px
}
.none{
    display: none;
}
@media only screen and (max-width: 1110px) {
.pronostico{
    flex-direction: column;
}
.izq{
    margin-bottom: 20px;
}
.der{
        display: flex;

    flex-direction:row;
}
.card{
    margin-bottom: 10px;
}
.contienerNow{
    flex-direction: column;
}
}