/* Importamos las fuentes */
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* ======= SELECTOR UNIVERSAL ======== */
* {
    margin: 0;
    padding: 0;
    text-decoration: none; /* Quitamos el subrayado del texto */
    list-style: none; /* Quitamos las viñetas de los elementos de una lista */
    box-sizing: border-box; /* Asegura que todos los elementos se midan correctamente */
}

/* ======= ESTILOS DE LAS ETIQUETAS ======== */
/* Selector de etiqueta html */
html {
    scroll-behavior: smooth; /* Hace que el scrolleo sea suave */
    overflow-x: hidden; /* Garantiza que no haya desplazamiento horizontal */
}

/* Selector de etiqueta body */
body {
    font-family: 'Public Sans', sans-serif;
    font-size: 16px; /* Tamaño de la fuente base del documento (16px) */
    background-color: azure !important; /* Definimos este estilo como prioritario */
    color: rgb(80, 80, 80); /* Color del texto dentro del body */
}

/* Selector de etiqueta header */
header {
    display: flex;
    align-items: center; /* Alineamos los ítems a lo largo del eje secundario */
    justify-content: space-between; /* Alineamos los ítems a lo largo del eje principal */
    background-color: rgb(191, 247, 247);
    width: 100vw; /* El header ocupa el 100% del ancho del viewport */
}

nav {
    display: flex;
    align-items: center;
    padding-right: 2rem;
    font-family: 'Figtree', sans-serif;
}

/* Selector de etiqueta main */
main {
    position: relative; /* Permite desplazar un elemento respecto a su posición original sin alterar el flujo del documento */
    margin-top: 1.5rem; /* Margen superior del main que evita que esté pegado al nav */
    margin-bottom: 1rem; /* Margen inferior del main que evita que esté pegado al footer */
    width: 100vw; /* El main ocupa el 100% del ancho del viewport */
    padding-left: 1rem;
    padding-right: 1rem;
    
}

/* Estilos de las secciones */
section {
    padding: 1%;
    flex-grow: 1; /* Permite que un ítem crezca para ocupar el espacio disponible */
    flex-shrink: 1; /* Permite que un ítem se encoja si es necesario para evitar desbordamiento */
}

/* Estilos del pie de página */
footer {
    background-color: rgb(118, 223, 223);
    padding: 8px 4px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center; /* Texto alineado al centro */
}

/* ========= ESTILOS DE INDEX.HTML ========== */

/* ========= ESTILOS DEL HEADER ========= */
/* Contenedor del logo */
.logo-container {
    padding-left: 1%;
}

/* Logo de la estación meteorológica */
.logo-img {
    width: 180px;  /* Ancho de la imagen */
    height: 60px; /* Altura de la imagen */
}

/* Lista de enlaces de la barra superior */
.lista-enlaces {
    display: flex;
}

/* Elementos de la lista de enlaces */
.link {
    font-weight: bold;
    display: flex;
    margin-left: 2rem;
    color: rgb(99, 99, 99);
}

/* Menú hamburguesa */
.menu-hamburguesa {
    display: none;
    background: none;
    border: none;
    color: rgb(99, 99, 99);
    font-size: 24px;
    cursor: pointer;
}

/* Contenedor del menú de usuario */
.usuario-container {
    position: relative;
    display: none;
}

/* Botón del menú de usuario */
.boton-usuario {
    background: none;
    border: none;
    color: rgb(99, 99, 99);
    font-size: 18px;
    cursor: pointer;
    margin-left: 32px;
}

/* Menú de usuario desplegable (oculto por defecto) */
.usuario-menu {
    position: absolute;
    top: 50px;
    right: 0;
    background-color: rgb(191, 247, 247);
    border-radius: 8px;
    padding: 10px 0;
    width: 200px;
    display: none;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    z-index: 2;
    gap: 20px; /* Separación entre los elementos del menú */
}

/* Enlaces del menú de usuario */
.usuario-menu li a {
    margin: 0;
}

/* Propiedad para resaltar las opciones del menú de usuario al posicionar el cursor sobre ellas */
.usuario-menu li a:hover {
    background-color: rgba(130, 241, 241, 0.708);
}

/* Clase activa: muestra el menú de usuario cuando se hace clic en el ícono de usuario */
.usuario-menu.active {
    display: flex;
}

/* Cuadro que muestra los datos personales del usuario, el cual se muestra al
hacer clic en la opción Perfil del menú de usuario */
.user-data {
    position: absolute;
    top: 80px;
    right: 200px;
    background-color: rgb(218, 226, 249);
    border-radius: 12px;
    padding: 10px;
    width: 250px;
    display: none;
    flex-direction: column;
    gap: 10px;
    z-index: 3;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

/* Clase activa: muestra el menú de usuario cuando se hace clic en la opción perfil */
.user-data.active {
    display: flex;
}

/* ========= ESTILOS DEL MAIN ========= */

/* Sección de bienvenida */

/* Texto de bienvenida */
.txt-bienvenida {
    font-size: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Contenedor de la imagen de la EMA */
.ema-container {
    display: flex;
    justify-content: center;
}

/* Imagen de la EMA */
.ema-img {
    border-radius: 16px; /* La imagen tiene borde redondeado */
    width: 100%; /* La imagen ocupa el 100% del contenedor padre */
    max-width: 700px; /* Ancho máximo de 700 px */
}

/* Seccción de datos actuales */

/* Contenedor que agrupa a todos los datos actuales */
.var-container {
    display: grid; /* Definimos el contenedor de los datos actuales como un grid */
    grid-template-columns: repeat(6, 1fr); /* El grid tendrá 6 columnas */
    gap: 16px; /* Separación entre los elementos del grid */
    margin-top: 1rem;
}

/* Contenedor de cada variable meteorológica */
.var-met {
    font-family: 'Figtree', sans-serif;
    border-radius: 20px; /* Cada elemento del grid tendrá un borde redondeado de 20 px */
    background-color: rgb(191, 247, 247);
    padding: 5%;
    margin-top: 1rem;
}

/* Título de la variable meteorológica en el contenedor */
.tit-var-met {
    font-size: 16px;
    text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Valor de la variable meteorológica */
.val-var-met {
    text-align: center;
    margin-bottom: 0.5rem;
}

/* Sección de ubicación */
/* Texto ubicado debajo del título ubicación */
.txt-ubicacion {
    margin-top: 1rem;
    margin-bottom: 1.2rem;
    font-size: 20px;
}

/* Contenedor del mapa */
.mapa {
    display: flex;
    justify-content: center;
}

.mapa iframe {
    width: 100%; /* El mapa ocupa el 100% del contenedor padre */
    max-width: 700px; /* Tamaño máximo de 700px */
    aspect-ratio: 4/3; /* Relación de aspecto de 4:3 */
    border: 0;
    border-radius: 1rem;
}

/* ========= ESTILOS DEL FOOTER ========= */

/* Contenedor de las redes sociales */
.redes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
}

/* Logotipos de las redes sociales */
.redes > a {
    color: rgb(3, 39, 61);
}

/* Texto "Seguinos en nuestras redes" */
.txt-redes {
    font-size: 18px;
    font-weight: 600;
    margin-right: 3%;
}

/* Descargo de responsabilidad (disclaimer) */
.disclaimer {
    font-weight: 700;
    padding: 1%;
    font-size: 15px;
}

/* Copyright */
.copyright {
    font-size: 14px;
}

/* ======== ESTILOS DE DATOS.HTML ======== */

/* Título "Últimos datos" */
.tit-datos {
    margin-bottom: 2%;
}

/* Texto que está por encima de la tabla */
.text-datos {
    font-size: 18px;
    margin-bottom: 3%;
}

/* Tabla */
.tabla-datos {
    background-color: rgb(191, 219, 251);
    width: 100%; /* La tabla ocupa el 100% del contenedor padre */
    border-radius: 2rem;
    padding: 1rem;
    font-family: 'Figtree', sans-serif;
    font-size: 14px;
    text-align: center; /* Texto alineado al centro */
}

/* Celdas de la tabla */
.tabla-datos td {
    height: 3rem; /* Altura de cada celda */
    border-bottom: 1px solid rgba(169, 193, 220, 0.502); /* Borde inferior de cada celda */
}

/* ======== ESTILOS DE CONTACTO.HTML ======== */
/* Título "Nos interesa conocer su opinión */
.tit-contacto {
    margin-bottom: 1rem;
}

/* Texto por encima del formulario */
.text-contacto {
    font-size: 18px;
    margin-bottom: 1.5rem;
}

/* Contenedor del mensaje de error */
#error-container {
    display: flex;
    justify-content: center;
}

/* Mensaje de error que se muestra por encima del formulario */
#form-error {
    display: none;
    justify-content: center;
    text-align: center;
    background-color: rgb(248, 206, 206);
    width: 600px;
    border-radius: 0.5rem;
    padding: 1%;
    margin-bottom: 12px;
}

/* Formulario */
.formulario {
    text-align: center;
    padding-bottom: 16px;
    padding-top: 12px;
    background-color: rgb(214, 226, 241);
    font-size: 18px;
    border-radius: 24px;
    width: 600px;
    margin: auto;
}

/* Campos de nombre y apellido y de dirección de correo electrónico */
.formulario > input[type="text"], input[type="email"] {
    margin-bottom: 12px;
}

/* Área de texto (campo de mensaje) */
.formulario > textarea {
    color: rgb(50, 50, 50);
    width: 90%;  /* Ocupa el 90% del ancho del formulario */
    max-width: 100%;  /* Garantizamos que el área de texto no se salga del contenedor */
    min-height: 200px;  /* Altura mínima de 200px*/
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 16px;  /* Margen inferior */
    margin-top: 8px;  /* Margen superior */
    border: 1px solid rgb(23, 63, 113);
    border-radius: 8px;
    padding: 8px;
    font-family: 'Public Sans', sans-serif;
}

.formulario > label {
    font-weight: bold; /* Texto en negrita */
}

/* Botón de enviar */
.bot-enviar {
    padding: 12px;
    background-color: rgb(23, 63, 113);
    color: rgb(220, 220, 220); /* Color del texto dentro del botón */
    font-size: 16px;
    border-radius: 10px;
    font-family: 'Public Sans', sans-serif;
    border: 0;
}

/* Cambiamos el color del botón al posicionar el cursor sobre el mismo */
.bot-enviar:hover {
    background-color: rgb(9, 26, 47);
}

/* ======== ESTILOS DE NOSOTROS.HTML ====== */

/* Sección nosotros */
/* Párrafos */
#nosotros p {
    font-size: 20px;
    margin-top: 1rem;
}

/* Contenedor sobre nosotros */
.acerca-container {
    display: flex;
    align-items: center;
    gap: 3rem; /* Separación entre el texto y la imagen */
    padding: 2%;
    background-color: rgba(161, 203, 252, 0.733);
    border-radius: 2rem;
}

/* Contenedores de la imagen y el texto */
.acerca-img, .acerca-text {
    flex-grow: 1;
    flex-basis: 0%;
}

/* Imagen del contenedor sobre nosotros */
.img-nosotros {
    max-width: 90%; /* Ancho máximo del 90% */
    display: block;
    border-radius: 1rem;
}

/* Sección cómo funciona */
/* Párrafo */
#como-funciona p {
    font-size: 20px;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Lista desordenada */
#como-funciona ul {
    margin-left: 1%; /* Margen izquierdo */
    margin-right: 1%; /* Margen derecho */
    margin-bottom: 1%; /* Margen inferior */
}

/* Elementos de la lista */
#como-funciona li {
    list-style: circle; /* Estilo de la viñeta (círculo) */
    margin-left: 1rem;
    font-size: 18px;
}

/* ======== ESTILOS DE LOGIN.HTML Y SIGNUP.HTML ====== */

/* Contenedor del logo */
.img-signup-login-container {
    display: flex;
    justify-content: center;
}

/* Logo de la estación meteorológica */
.img-signup-login {
    width: 320px;
    height: 120px;
}

/* Texto de inicio de sesión */
.txt-signup-login {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-bottom: 1%;
}

/* Contenedor del mensaje de error */
#error-cont {
    display: flex;
    justify-content: center;
}

/* Mensaje de error (oculto por defecto) */
#login-error {
    display: none;
    justify-content: center;
    padding: 1%;
    background-color: rgb(248, 206, 206);
    border-radius: 0.5rem;
    margin-bottom: 12px;
    width: 400px;
}

/* Formularios */
.form-signup-login {
    background-color: rgb(208, 212, 252);
    border-radius: 1rem;
    width: 400px;
    margin: auto;
    text-align: center;
    padding-top: 5px;
}

/* Etiquetas del formulario para crear cuenta */
.label-field {
    font-size: 18px;
    font-weight: 500; /* Texto en negrita */
    margin-top: 16px;
}

/* Campos de los formularios */
.form-fields {
    color: rgb(50, 50, 50);
    width: 70%;
    font-size: 1rem;
    font-weight: 400;
    font-family: 'Public Sans', sans-serif;
    border: 1px solid rgb(53, 103, 165);
    border-radius: 8px;
    padding: 12px;
    margin-top: 12px;
}

/* Campo de error (formulario para crear cuenta) */
.error-field {
    color:  rgb(241, 54, 54);
    display: none;
}

/* Botones de los formularios */
.but-form {
    font-size: 16px;
    font-family: 'Public Sans', sans-serif;
    margin: 12px;
    padding: 12px;
    background-color: rgb(4, 79, 172);
    color: rgb(233, 233, 233);
    border-radius: 8px;
    border: 0;
}

.but-form:hover {
    background-color: rgb(3, 47, 100);
}

/* Contenedor para registrarse, el cual se encuentra por debajo del formulario */
#signup-cont {
    margin-top: 16px;
    display: block;
    text-align: center;
}

/* Texto "Registrarse como usuario" */
.txt-signup {
    margin-bottom: 8px;
}

/* Botón para crear nueva cuenta */
#but-signup {
    margin-top: 12px;
    padding: 10px;
    font-family: 'Public Sans', sans-serif;
    font-size: 16px;
    background-color: rgb(198, 209, 222);
    border: 0;
    border-radius: 8px;
}

/* ======== MEDIA QUERIES ======== */
/* Permite que se muestren tres contenedores de datos actuales por fila
cuando el ancho está entre 700 y 1200 px */
@media screen and (700px <= width <= 1200px) {
    .var-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Permite que la imagen quede debajo del texto en la sección "Acerca de nosotros" y
que se reduzca el tamaño de los campos del formulario cuando el ancho es menor a 800px */
@media screen and (max-width: 800px) {

    /* ======== ESTILOS DE NOSOTROS.HTML ======== */
    .acerca-container {
        flex-direction: column;
        gap: 2rem;
        padding: 3%;
    }

    .acerca-img {
        display: flex;
        justify-content: center;
        margin-bottom: 1rem;
    }

    /* ======== ESTILOS DE CONTACTO.HTML ======== */
    /* Modificamos el tamaño de los campos de texto del formulario */
    .formulario, #form-error {
        width: 90%;
    }

}

/* Permite que los contenedores de datos actuales se muestren uno debajo del otro 
y que se habilite el menú hamburguesa cuando el ancho es menor a 700 px */
@media screen and (max-width: 700px) {
    /* ======== ESTILOS DEL HEADER ======== */

    /* Cambiamos los estilos de la barra de navegación para que los enlaces
    queden dentro del menú hamburguesa */
    .lista-enlaces {
        display: none;
        flex-direction: column;
        align-items: center;
        background-color: rgb(191, 247, 247);
        position: absolute;
        top: 70px;
        right: 20px;
        width: 150px;
        padding: 10px 5px;
        border-radius: 8px;
        gap: 20px;
        z-index: 1;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    }
    
    .user-data {
        right: 50%;
        top: 180px;
    }

    /* Enlaces de la barra de navegación */
    .link {
        margin: 0;
    }

    /* Menú hamburguesa */
    .menu-hamburguesa {
        display: block;
    }

    /* Mostramos los enlaces cuando se hace clic en el ícono del menú hamburguesa */
    .lista-enlaces.active {
        display: flex;
    }

    .lista-enlaces a:hover {
        background-color:rgba(130, 241, 241, 0.708);
    }

    /* ======== ESTILOS DEL MAIN (INDEX.HTML) ======== */
    /* Ubicamos los contenedores de los datos actuales uno debajo del otro */
    .var-container {
        grid-template-columns: repeat(1, 1fr);
        gap: 1;
        display: block;
    }

    /* ======== ESTILOS DEL MAIN (DATOS.HTML) ======== */
    /* Reducimos el tamaño de los elementos de la tabla de datos */
    .tabla-datos {
        font-size: 10px;
        word-wrap: break-word;
    }

    .tabla-datos th, .tabla-datos td {
        padding: 4px;
    }

}

/* Permite reducir el tamaño de las fuente de los formularios cuando el
ancho es menor a 500 px */
@media screen and (max-width: 500px) {

    /* ======== ESTILOS DE LOGIN.HTML Y SIGNUP.HTML ======== */
    /* Formulario de inicio de sesión y creación de cuenta */
    .form-signup-login {
        width: 80%;
    }

    /* Campos del formulario y botones */
    .form-fields, .but-form {
        font-size: 14px;
    }

    #but-signup {
        font-size: 14px;
    }

    #login-error {
        width: 80%;
        font-size: 14px;
        text-align: center;
    }

    /* ======== ESTILOS DEL CONTACTO.HTML ======== */
    .formulario > textarea {
        font-size: 16px;
    }
    
    .bot-enviar {
        font-size: 14px;
    }
}