/*-------------------------------------------ESTILOS RESPONSIVE--------------------------------------*/



/*Estilos responsive para terminos y condiciones y política de privacidad*/

/* Estilos para tamaños de pantalla de tablet (entre 600px y 1200px) */
@media screen and (min-width: 600px) and (max-width: 1200px) {
    .tituloPrincipal {
        margin-top: 3em;
        margin-bottom: 3em;
        font-size: 0.8em;
    }

    .seccionInformación {
        margin-left: 5em;
        margin-right: 5em;
    }

    .tituloSecundario {
        font-size: 0.9em;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

    .texto {
        font-size: 0.85em;
        margin-bottom: 0.5em;
        margin-top: 0.5em;
    }

    .linea-horizontal {
        margin-left: 5em;
        margin-right: 5em;
        margin-bottom: 1.5em;
        margin-top: 1.5em;
    }
}

/* Estilos para tamaños de pantalla mayores a 1200px */
@media screen and (min-width: 1200px) {
    .tituloPrincipal {
        margin-top: 3em;
        margin-bottom: 4em;
        font-size: 1em;
    }

    .seccionInformación {
        margin-left: 15em;
        margin-right: 15em;
    }

    .tituloSecundario {
        font-size: 1em;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

    .texto {
        font-size: 0.9em;
        margin-bottom: 0.5em;
        margin-top: 0.5em;
    }

    .linea-horizontal {
        margin-left: 15em;
        margin-right: 15em;
        margin-bottom: 1.5em;
        margin-top: 1.5em;
    }
}

/*----------------------------------------------------------------------------*/



/* Estilos específicos para tamaños de pantalla pequeños (320px - 480px) */
@media (min-width: 320px) and (max-width: 480px) {
    .wrapper-forms {
        padding: 0 5%;
    }
}
/* Estilos específicos para tamaños de pantalla medianos (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .wrapper-forms {
        padding: 0 5%;
    }
    .estilo-form-inicio-sesion {
        width: auto;
    }
}
/* Estilos específicos para tamaños de pantalla grandes (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .wrapper-forms {
        padding: 0 5%;
    }
    .estilo-form-inicio-sesion {
        width: auto;
    }
}
/* Estilos específicos para tamaños de pantalla extra grandes (1025px - 1280px) */
@media (min-width: 1025px) and (max-width: 1199px) {
    .wrapper-forms {
        padding: 0 5%;
    }
    .estilo-form-inicio-sesion {
        width: auto;
    }
}
/* Pantallas de 1200px a 1499px */
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .wrapper-forms {
        padding: 0 5%
    }
    .estilo-form-inicio-sesion {
        width: auto;
    }
}
/* Pantallas de 1500px a 1799px */
@media only screen and (min-width: 1500px) and (max-width: 1799px) {
    .wrapper-forms {
        padding: 0 5%
    }
    .estilo-form-inicio-sesion {
        width: auto;
    }
}
/* Pantallas de 1800px a 1999px */
@media only screen and (min-width: 1800px) and (max-width: 1999px) {
    .wrapper-forms {
        padding: 0 5%
    }
    .estilo-form-inicio-sesion {
        width: auto;
    }
}
/* Pantallas de 2000px o mayores */
@media only screen and (min-width: 2000px) {
    .wrapper-forms {
        padding: 0 5%
    }
    .estilo-form-inicio-sesion {
        width: auto;
    }
} /*


/*LANDING PAGE RESPONSIVE*/

@media screen and (max-width: 767px) {
    .tamanyos0{
        height: 16rem;
        width: 23rem;
    }
}

@media screen and (min-width: 768px) and (max-width: 1399px) {

    /*Contenedor completo, wrapper de toda la monitorización*/
    .wrapper-landing {
        margin-top: 5vh;
        padding: 5vh 7% 5vh;
    }

    /* Contenedor de la sección hero */
    #landing-page-hero {
        background-image: url("../images/landing-hero-respons2.png");
    }
    .contenedor-flecha-bajar {
        width: 3.2rem;
        height: 3.2rem;
    }
    .contenedor-pc {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    #boton-CTA{
        max-width: 300px;
    }

    #seccion-info1 .columnas-pc,
    #seccion-info2 .columnas-pc,
    #seccion-info3 .columnas-pc {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        background-color: transparent;
    }

    #seccion-info1 .columnas-pc .content,
    #seccion-info2 .columnas-pc .content,
    #seccion-info3 .columnas-pc .content {
        flex: 1;
        margin-right: 5vh; /* Margen entre el texto y la imagen */
    }

    #seccion-info1 .imagenes-landing,
    #seccion-info2 .imagenes-landing,
    #seccion-info3 .imagenes-landing {
        max-width: 400px;
        margin: 20px auto; /* Margen igual en todos los lados */
    }

    .tamanyos0{
        height: 17rem;
        width: 23rem;
    }

    .tamanyos1{
        height: 17rem;
        width: 23rem;
    }

    #contenedor-boton-saber-mas{
        margin-bottom: 1rem;
        margin-top: 1rem;
    }

    .boton-verde-blanco{
        height: 3rem;
    }

    #seccion-mantenimiento{
        margin-bottom: 0;
        margin-top: 0;
    }

    #seccion-mantenimiento .flex-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    #seccion-mantenimiento .content {
        flex: 1;
        text-align: center;
        margin-right: 5vh; /* Margen entre el texto y la imagen */
    }

    #seccion-mantenimiento h3, #seccion-mantenimiento p {
        text-align: left;
    }

    #seccion-mantenimiento .imagenes-landing {
        max-width: 400px;
        margin: 20px auto; /* Margen igual en todos los lados */
        display: block;
    }

    #seccion-resenyas{
        margin-bottom: 0;
        margin-top: 0;
    }

    /*Contenedor para estrellas reseñas*/
    #contenedor-estrellas-opiniones {
        margin-bottom: 4em;
    }

    /*Estilo de las estrellas con la media de las reseñas de los usuarios, estrellas grandes*/
    #estrellas-media-resenyas {
        height: 3em;
        margin-top: 5vh;
        margin-bottom: 1vh;
    }

    /*Los párrafos de dentro del contenedor padre con las estrellas*/
    #contenedor-estrellas-opiniones > p {
        font-size: 1.4em;
    }

    /*Estilo contenedor donde deslizan todos los paneles*/
    .contenedor-resenyas-deslizables {
        border-radius: 2em;
        padding: 1.5rem 2rem;
        height: 10rem;
        width: 29rem;
    }

    /*Estilo del nombre de la persona dentro de cada reseña*/
    .contenedor-cabecera-resenya p {
        font-size: 1.4em;
    }

    /*Estilo para las estrellas verdes específicas de cada reseña de usuarios*/
    .estrellas-resenya-especifica {
        height: 2em;
    }


}


@media screen and (min-width: 1400px){

    /*Contenedor completo, wrapper de toda la monitorización*/
    .wrapper-landing {
        margin-top: 5vh;
        padding: 5vh 7% 5vh;
    }

    /* Contenedor de la sección hero */
    #landing-page-hero {
        background-image: url("../images/landing-hero-respons1.png");
    }
    .contenedor-flecha-bajar {
        width: 2.6rem;
        height: 2.6rem;
    }
    .contenedor-pc {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .columnas-pc {
        width: 100%;
        max-width: 350px;
        /*padding: 1.5em;*/
        text-align: center;
    }

    #seccion-info1{
        margin-right: 2.4em;
    }
    #seccion-info2{
        margin-left: 2.4em;
        margin-right: 2.4em;
    }
    #seccion-info3{
        margin-left: 2.4em;
    }

    #boton-CTA{
        max-width: 300px;
        transition: all .5s ease;
    }

    .tamanyos0{
        height: 15rem;
        width: 40rem;
    }

    .tamanyos1{
        height: 15rem;
        width: 40rem;
    }

    .tamanyos2{
        height: 25rem;
        width: 60rem;
    }

    #contenedor-boton-saber-mas{
        margin-bottom: 1rem;
        margin-top: 1rem;
    }

    .boton-verde-blanco{
        height: 3rem;
        transition: all .5s ease;
    }

    #seccion-mantenimiento{
        margin-bottom: 0;
        margin-top: 0;
    }

    #seccion-mantenimiento .flex-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    #seccion-mantenimiento .content {
        flex: 1;
        text-align: center;
        margin-right: 5vh; /* Margen entre el texto y la imagen */
    }

    #seccion-mantenimiento h3, #seccion-mantenimiento p {
        text-align: left;
    }

    #seccion-mantenimiento .imagenes-landing {
        max-width: 400px;
        margin: 20px auto; /* Margen igual en todos los lados */
        display: block;
    }

    #seccion-resenyas{
        margin-bottom: 0;
        margin-top: 0;
    }

    /*Contenedor para estrellas reseñas*/
    #contenedor-estrellas-opiniones {
        /*margin-bottom: 4em;*/
    }

    /*Estilo de las estrellas con la media de las reseñas de los usuarios, estrellas grandes*/
    #estrellas-media-resenyas {
        height: 3em;
        margin-top: 5vh;
        margin-bottom: 1vh;
    }

    /*Los párrafos de dentro del contenedor padre con las estrellas*/
    #contenedor-estrellas-opiniones > p {
        font-size: 1.4em;
    }

    /*Estilo contenedor donde deslizan todos los paneles*/
    .contenedor-resenyas-deslizables {
        border-radius: 2em;
        padding: 1.5rem 2rem;
        height: 12rem;
        width: 40rem;
    }

    /*Estilo del nombre de la persona dentro de cada reseña*/
    .contenedor-cabecera-resenya p {
        font-size: 1.4em;
    }

    /*Estilo para las estrellas verdes específicas de cada reseña de usuarios*/
    .estrellas-resenya-especifica {
        height: 2em;
    }
}


/*ESILOS PARA LA PÁGINA DE PRODUCTO*/

@media screen and (min-width: 850px) {
    /* Contenedor de las columnas */
    /* Página del Producto */
    #producto-page {
        flex-direction: column;
        align-content: flex-start;
        text-align: left;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin-top: 3em;
    }

    .columnas-paralelas {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    /* Columna de las imágenes */
    .columna-imagenes {
        width: 300px;
        margin-right: 2em;
    }

    /* Estilos para la imagen grande */
    .columna-imagenes .image-selector {
        margin: 0 auto;
        display: block;
        max-width: 100%;
        height: auto;
        width: 100%;
        margin-bottom: 10px;
    }

    /* Estilos para las imágenes pequeñas */
    .columna-imagenes .row .column img {
        width: 50px;
        height: 50px;
        object-fit: cover;
        margin-bottom: 5px;
    }

    /* Columna de la descripción y botón */
    .columna-descripcion {
        flex: 1;
        margin-left: 2em;
    }


    .boton-producto {
        width: 85%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2em;
        margin-bottom: 3em;
    }

}

.seccion-preguntas{
    margin-top: 1vh;
}

.titulo-preguntas{
    margin-top: 2vh;
    margin-bottom: 2vh;
}

@media screen and (min-width: 600px) and (max-width: 850px){
    .boton-producto {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 4em;
        margin-bottom: 3em;
    }
}


@media screen and (min-width: 1000px){
    .boton-producto {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 4em;
        margin-bottom: 3em;
    }
}


@media screen and (min-width: 1200px){
    .boton-producto {
        width: 60%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 4em;
        margin-bottom: 3em;
    }
}



/*---------ESITLOS PARA EL  HEADER Y MENU RESPONSIVE---------------*/


@media screen and (min-width: 760px) {

    /*Oculta el icono del menu*/
    .menu-hamburguesa {
        display: none;
    }

    /* Ajusta el orden de los elementos en el header */
    .contenedor-iconos {
        display: flex;
        align-items: center;
        gap: 30px;
    }


    /*para mostrar los elementos del menu en línea horizontal*/
    #main-menu ul {
        flex-direction: row;
        position: static;
        width: auto;
        height: auto;
        transform: none;
        order: 0;
        align-items: center;
    }

    /*para especificar los tamaños, el grosor y el color de la letra de los elementos del menu*/
    #main-menu ul li {
        font-size: 16px; /
    font-weight: normal;
        color: var(--second-color-green);
        transition: all .5s ease;
    }

    /*.boton-cerrar-sesion {
        padding-top: 0.4rem;
        transition: all .5s ease;
    }
    .boton-cerrar-sesion a {
        color: var(--main-color-white);
        transition: all .5s ease;
    }*/


    /*agrega margenes entre los elementos del menu*/
    #main-menu ul li {
        margin-right: 30px; /* Margen derecho entre elementos */
    }


    /*agrega margenes entre el borde de pantalla y los elementos*/
    #icono-inicio-sesion {
        margin-right: 30px; /* Margen derecho entre el icono y el borde */
        order: 1;
    }

    /*.boton-cerrar-sesion {
        width: 8rem;
        height: 2.3rem;
        transition: all .5s ease;
    }*/
}


/*ESTILOS RESPONSIVE PARA MONITORIZACIÓN*/
@media screen and (min-width: 250px) and (max-width: 370px) {
    /*Estilo parrafo con el numero de notificaciones*/
    #parrafo-numero-notificaciones {
        font-size: 70%;
        font-weight: 500;
    }
}

@media screen and (min-width: 370px) and (max-width: 400px) {
    /*Estilo parrafo con el numero de notificaciones*/
    #parrafo-numero-notificaciones {
        font-size: 80%;
        font-weight: 500;
    }
}

@media screen and (min-width: 400px) and (max-width: 430px) {
    /*Estilo parrafo con el numero de notificaciones*/
    #parrafo-numero-notificaciones {
        font-size: 90%;
        font-weight: 500;
    }
}

@media screen and (min-width: 700px) {
    #contenedor-espacio-personal-completo{
        width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    /*Contenedor completo, wrapper de toda la monitorización*/
    .wrapper {
        margin-top: 12vh;
        padding: 5vh 7% 5vh;
    }
}

/*Estilo responsive para el widget monitorizacion*/
@media screen and (max-width: 560px){
    .ww-box{
        width: 17rem;
        height: 4rem;
        font-size: 15px;
    }

    #contenedor-fecha-hora-huerto{
        margin-bottom: 1.2rem;
    }
}

@media screen and (max-width: 385px){
    .ww-box{
        width: 15rem;
        height: 5rem;
        font-size: 15px;
    }

    #contenedor-fecha-hora-huerto{
        margin-bottom: 0.8rem;
    }
}


/*ESTILOS PARA CONTRASENYA_NUEVA*/

#inicio-de-sesion-titulo{
    margin-top: 2vh;
}

.h1-formularios-titulos{
    margin-top: 1em;
    margin-bottom: 1em;
}

#enviar-contraseña\ abrir-popup{
    margin-top: 2vh;
}
.boton-enviar{
    margin-bottom: 3vh;
}

.datos{
    margin-top: 1vh;
    margin-bottom: 1vh;
}

@media screen and (min-width: 700px) {

    #inicio-de-sesion-titulo{
        margin-top: 1vh;
    }

    .h1-formularios-titulos{
        margin-top: 1em;
        margin-bottom: 1em;
    }

}

/*ESTILOS PARA CONTRASEÑA OLVIDADA*/

.contra-olvidada{
    margin-top: 10vh;
}