/* titulo : style.css -- este es el archivo de estilos del websita EnergySaspiensIIoT1.hopto.org --*/

/* --- Estilos base del cuerpo y texto --- */
body {
    background-image: url('web/Imagenes/Planetario_de_la_Ciudad_de_Buenos_Aires_1.jpg');
    background-repeat: no-repeat;
    background-size: cover; /* Ajusta la imagen para cubrir el área, manteniendo la proporción */
    background-attachment: fixed; /* Mantiene la imagen fija al hacer scroll */
    background-position: center center; /* Centra la imagen de fondo */
    background-color: rgb(0, 0, 0); /* Color de fondo sólido si la imagen no carga */
    margin: 0; /* Elimina el margen predeterminado del body */
    padding: 0;
    min-height: 100vh; /* Asegura que el body ocupe al menos toda la altura de la ventana */
    display: flex; /* Activa Flexbox para el body */
    flex-direction: column; /* Apila los elementos principales verticalmente */
    align-items: center; /* Centra horizontalmente el contenido principal */
}

/* Tamaños de fuente responsivos usando clamp() */
h1 {
    font-size: clamp(1.8em, 5vw, 2.5em); /* Mín: 1.8em, Preferido: 5% del ancho del viewport, Máx: 2.5em */
    color: silver;
    text-align: center;
}

h2 {
    font-size: clamp(1.2em, 3vw, 1.5em); /* Mín: 1.2em, Preferido: 3% del ancho del viewport, Máx: 1.5em */
    color: white;
    text-align: left;
}

h3 {
    font-size: clamp(1em, 2.5vw, 1.2em); /* Mín: 1em, Preferido: 2.5% del ancho del viewport, Máx: 1.2em (para texto de botones) */
    color: silver;
    margin: 0; /* Elimina márgenes por defecto */
    padding: 5px; /* Pequeño padding alrededor del texto */
}

h4 {
    font-size: clamp(0.7em, 1.5vw, 0.8em); /* Mín: 0.7em, Preferido: 1.5% del ancho del viewport, Máx: 0.8em */
    color: silver;
}

/* --- Estilos del encabezado --- */
header {
    border-bottom: 2px solid #fff;
    padding: clamp(10px, 2vw, 20px) 0; /* Padding responsivo */
    margin-bottom: clamp(5px, 1vw, 10px); /* Margen responsivo */
    width: 100%;
    text-align: center; /* Centra el contenido del encabezado */
}

header a {
    text-decoration: none;
    color: #fff; /* Propiedad correcta para el color del texto */
    font-size: clamp(14px, 2.5vw, 15px); /* Tamaño de fuente responsivo */
}

/* --- Contenedor principal de los elementos (.main-container) --- */
.main-container {
    width: 95%; /* Porcentaje para adaptabilidad */
    max-width: 1200px; /* Ancho máximo para pantallas muy grandes */
    background-color: rgba(255, 255, 255, 0); /* Fondo completamente transparente */
    margin-top: auto; /* Empuja el contenedor hacia abajo si hay espacio, o lo coloca abajo */
    margin-bottom: 20px; /* Margen en la parte inferior */
    box-sizing: border-box; /* Incluye padding y border en el ancho total */
}

/* --- Estilo de los vínculos dentro del main-container (si aplica) --- */
.main-container a.vinculo {
    font-size: clamp(14px, 2.5vw, 15px); /* Tamaño de fuente responsivo */
    color: #dddddd;
    font-weight: bold;
    text-decoration: none;
    background-color: black;
}

/* --- Estilos para un botón de contacto (si lo usas en otro lugar) --- */
.botonContacto {
    width: clamp(30px, 5vw, 38px); /* Ancho responsivo */
    height: clamp(30px, 5vw, 38px); /* Altura responsiva */
    margin: clamp(4px, 1vw, 6px); /* Margen responsivo */
    padding: clamp(5px, 1.5vw, 7px); /* Padding responsivo */
    background-color: #111111;
    border: 5px solid silver; /* Ancho de borde corregido */
    box-shadow: 4px 4px 4px #888888;
}

/* --- Estilos base para los botones principales --- */
.button, .angosto, .button-sombreado {
    border: 3px solid silver; /* Ancho de borde corregido */
    background-color: #111188;
    /* Usamos clamp para un ancho y alto responsivo, con límites */
    width: clamp(100px, 10vw, 150px); /* Ancho mínimo, preferido (15% del viewport), máximo */
    height: clamp(80px, 7vw, 120px); /* Altura mínima, preferida (12% del viewport), máxima */
    padding: clamp(8px, 1.5vw, 15px); /* Padding responsivo */
    box-shadow: 4px 4px 3px rgba(136, 136, 221, 0.5); /* Sombra con transparencia */
    text-align: center;
    cursor: pointer; /* Cambia el cursor para indicar que es clickeable */
    transition: background-color 0.3s ease; /* Transición suave al pasar el mouse */
    margin: 0; /* Asegura que el 'gap' del contenedor maneje el espaciado */

    /* Hacemos el botón un flex container para su contenido (imagen y texto) */
    display: flex;
    flex-direction: column; /* Apila la imagen y el texto verticalmente */
    justify-content: center; /* Centra el contenido verticalmente */
    align-items: center; /* Centra el contenido horizontalmente */
}

.button:hover, .angosto, .button-sombreado:hover {
    background-color: #000033;
    color: white; /* Asegúrate de que el texto sea visible al hacer hover */
}

/* Estilo específico para el botón de salida (.angosto) */
.angosto {
    width: clamp(70px, 10vw, 120px); /* Ancho responsivo más angosto */
    height: clamp(60px, 9vw, 100px); /* Altura responsiva ajustada */
}

/* Ajustes de imagen dentro de los botones */
.button img, .angosto img {
    max-width: 100%; /* Las imágenes se adaptarán al ancho del botón */
    height: auto; /* Mantiene la proporción de la imagen */
    margin-bottom: clamp(2px, 0.25vw, 3px); /* Espacio responsivo entre la imagen y el texto */
}
.button-sombreado img {
    max-width: 100%; /* Las imágenes se adaptarán al ancho del botón */
    height: auto; /* Mantiene la proporción de la imagen */
    margin-bottom: clamp(2px, 0.25vw, 3px); /* Espacio responsivo entre la imagen y el texto */
    filter: drop-shadow(3px 3px 5px rgba(144, 250, 144, 0.8)); /* Sombreado de imagen png sin fondo */
}

/* --- Contenedor de los iconos/botones (#links-container) --- */
#links-container {
    display: flex; /* ¡La clave del diseño responsivo! Activa Flexbox */
    flex-wrap: wrap; /* Permite que los elementos salten a la siguiente línea */
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: flex-start; /* Alinea los elementos al inicio del contenedor verticalmente */
    gap: clamp(10px, 0.5vw, 15px); /* Espacio responsivo entre los botones */
    padding: clamp(8px, 1.5vw, 10px); /* Espaciado interno responsivo */
    background-color: rgba(255, 255, 255, 0); /* Fondo completamente transparente, anteriormente: black;  Fondo oscuro del contenedor */
    border-radius: 8px; /* Opcional: bordes redondeados */
    width: 100%; /* Ocupa todo el ancho del .main-container */
    box-sizing: border-box; /* Incluye padding en el ancho */
}

/* --- Estilos para INPUTs --- */
Input[type="text"], Input[type="password"] {
    outline: none;
    padding: clamp(8px, 1.5vw, 10px); /* Padding responsivo */
    display: block;
    width: 90%; /* Ajustado a porcentaje para que se adapte */
    max-width: 300px; /* Ancho máximo para que no sea demasiado grande en desktop */
    border-radius: 3px;
    border: 1px solid #fff; /* Corregida sintaxis de border */
    margin: clamp(5px, 1.5vw, 10px) auto; /* Margen responsivo */
    box-sizing: border-box; /* Incluye padding y border en el ancho total */
    font-size: clamp(14px, 2vw, 16px); /* Tamaño de fuente responsivo */
}

Input[type="submit"] {
    padding: clamp(8px, 1.5vw, 10px) clamp(12px, 2vw, 15px); /* Padding responsivo */
    color: #fff;
    background: #0098cb;
    width: auto; /* Corregida sintaxis de width */
    margin: 2px auto;
    margin-top: 0px;
    border: 0px;
    border-radius: 3px;
    cursor: pointer;
    font-size: clamp(14px, 2vw, 16px); /* Tamaño de fuente responsivo */
}

Input[type="submit"]:hover {
    background-color: #00b8cb;
}

/* --- Media Queries para ajustes finos --- */
/* Estas media queries ahora son menos críticas para el tamaño de los botones
   debido al uso de clamp(), pero aún pueden ser útiles para ajustar el layout
   o tamaños si se desea un control más granular en ciertos breakpoints.
   Mantendremos la lógica de flex-direction: column para el links-container. */

@media (max-width: 768px) {
    h1 {
        font-size: clamp(1.5em, 4vw, 1.8em); /* Ajuste de h1 para tabletas */
    }
    /* Los tamaños de .button y .angosto ya están manejados por clamp,
       estos overrides podrían ser redundantes o necesitar un ajuste fino si se desea.
       Los dejo comentados para que veas que clamp() los hace menos necesarios. */
    /* .button {
        width: clamp(100px, 18vw, 120px);
        height: clamp(80px, 15vw, 100px);
    }
    .angosto {
        width: clamp(70px, 12vw, 80px);
        height: clamp(60px, 10vw, 80px);
    } */
}

@media (max-width: 480px) {
    h1 {
        font-size: clamp(1.2em, 3.5vw, 1.5em); /* Ajuste de h1 para móviles pequeños */
    }
    #links-container {
        flex-direction: column; /* Apila los botones verticalmente en pantallas muy pequeñas */
        align-items: center; /* Centra los botones apilados */
        gap: clamp(8px, 2.5vw, 10px); /* Espacio responsivo */
    }
    /* Los tamaños de .button y .angosto ya están manejados por clamp,
       estos overrides podrían ser redundantes o necesitar un ajuste fino si se desea.
       Los dejo comentados para que veas que clamp() los hace menos necesarios. */
    /* .button {
        width: 100%;/* titulo : style.css -- este es el archivo de estilos del websita EnergySaspiensIIoT1.hopto.org --*/

/* --- Estilos base del cuerpo y texto --- */
body {
    background-image: url('web/Imagenes/IIoTM-wsbg-Layout1.jpg');
    background-repeat: no-repeat;
    background-size: cover; /* Ajusta la imagen para cubrir el área, manteniendo la proporción */
    background-attachment: fixed; /* Mantiene la imagen fija al hacer scroll */
    background-position: center center; /* Centra la imagen de fondo */
    background-color: rgb(0, 0, 0); /* Color de fondo sólido si la imagen no carga */
    margin: 0; /* Elimina el margen predeterminado del body */
    padding: 0;
    min-height: 100vh; /* Asegura que el body ocupe al menos toda la altura de la ventana */
    display: flex; /* Activa Flexbox para el body */
    flex-direction: column; /* Apila los elementos principales verticalmente */
    align-items: center; /* Centra horizontalmente el contenido principal */
}

/* Tamaños de fuente responsivos usando clamp() */
h1 {
    font-size: clamp(1.8em, 5vw, 2.5em); /* Mín: 1.8em, Preferido: 5% del ancho del viewport, Máx: 2.5em */
    color: silver;
    text-align: center;
}

h2 {
    font-size: clamp(1.2em, 3vw, 1.5em); /* Mín: 1.2em, Preferido: 3% del ancho del viewport, Máx: 1.5em */
    color: white;
    text-align: left;
}

h3 {
    font-size: clamp(1em, 2.5vw, 1.2em); /* Mín: 1em, Preferido: 2.5% del ancho del viewport, Máx: 1.2em (para texto de botones) */
    color: silver;
    margin: 0; /* Elimina márgenes por defecto */
    padding: 5px; /* Pequeño padding alrededor del texto */
}

h4 {
    font-size: clamp(0.7em, 1.5vw, 0.8em); /* Mín: 0.7em, Preferido: 1.5% del ancho del viewport, Máx: 0.8em */
    color: silver;
}

/* --- Estilos del encabezado --- */
header {
    border-bottom: 2px solid #fff;
    padding: clamp(10px, 2vw, 20px) 0; /* Padding responsivo */
    margin-bottom: clamp(5px, 1vw, 10px); /* Margen responsivo */
    width: 100%;
    text-align: center; /* Centra el contenido del encabezado */
}

header a {
    text-decoration: none;
    color: #fff; /* Propiedad correcta para el color del texto */
    font-size: clamp(14px, 2.5vw, 15px); /* Tamaño de fuente responsivo */
}

/* --- Contenedor principal de los elementos (.main-container) --- */
.main-container {
    width: 95%; /* Porcentaje para adaptabilidad */
    max-width: 1200px; /* Ancho máximo para pantallas muy grandes */
    background-color: rgba(255, 255, 255, 0); /* Fondo completamente transparente */
    margin-top: auto; /* Empuja el contenedor hacia abajo si hay espacio, o lo coloca abajo */
    margin-bottom: 20px; /* Margen en la parte inferior */
    box-sizing: border-box; /* Incluye padding y border en el ancho total */
}

/* --- Estilo de los vínculos dentro del main-container (si aplica) --- */
.main-container a.vinculo {
    font-size: clamp(14px, 2.5vw, 15px); /* Tamaño de fuente responsivo */
    color: #dddddd;
    font-weight: bold;
    text-decoration: none;
    background-color: black;
}

/* --- Estilos para un botón de contacto (si lo usas en otro lugar) --- */
.botonContacto {
    width: clamp(30px, 5vw, 38px); /* Ancho responsivo */
    height: clamp(30px, 5vw, 38px); /* Altura responsiva */
    margin: clamp(4px, 1vw, 6px); /* Margen responsivo */
    padding: clamp(5px, 1.5vw, 7px); /* Padding responsivo */
    background-color: #111111;
    border: 5px solid silver; /* Ancho de borde corregido */
    box-shadow: 4px 4px 4px #888888;
}

/* --- Estilos base para los botones principales --- */
.button, .angosto {
    border: 3px solid silver; /* Ancho de borde corregido */
    background-color: #111188;
    /* Usamos clamp para un ancho y alto responsivo, con límites */
    width: clamp(100px, 15vw, 180px); /* Ancho mínimo, preferido (15% del viewport), máximo */
    height: clamp(80px, 12vw, 150px); /* Altura mínima, preferida (12% del viewport), máxima */
    padding: clamp(8px, 1.5vw, 15px); /* Padding responsivo */
    box-shadow: 4px 4px 3px rgba(136, 136, 221, 0.5); /* Sombra con transparencia */
    text-align: center;
    cursor: pointer; /* Cambia el cursor para indicar que es clickeable */
    transition: background-color 0.3s ease; /* Transición suave al pasar el mouse */
    margin: 0; /* Asegura que el 'gap' del contenedor maneje el espaciado */

    /* Hacemos el botón un flex container para su contenido (imagen y texto) */
    display: flex;
    flex-direction: column; /* Apila la imagen y el texto verticalmente */
    justify-content: center; /* Centra el contenido verticalmente */
    align-items: center; /* Centra el contenido horizontalmente */
}

.button:hover, .angosto:hover {
    background-color: #000033;
    color: white; /* Asegúrate de que el texto sea visible al hacer hover */
}

/* Estilo específico para el botón de salida (.angosto) */
.angosto {
    width: clamp(70px, 10vw, 120px); /* Ancho responsivo más angosto */
    height: clamp(60px, 9vw, 100px); /* Altura responsiva ajustada */
}

/* Ajustes de imagen dentro de los botones */
.button img, .angosto img {
    max-width: 80%; /* Las imágenes se adaptarán al ancho del botón */
    height: auto; /* Mantiene la proporción de la imagen */
    margin-bottom: clamp(3px, 0.5vw, 5px); /* Espacio responsivo entre la imagen y el texto */
}

/* --- Contenedor de los iconos/botones (#links-container) --- */
#links-container {
    display: flex; /* ¡La clave del diseño responsivo! Activa Flexbox */
    flex-wrap: wrap; /* Permite que los elementos salten a la siguiente línea */
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: flex-start; /* Alinea los elementos al inicio del contenedor verticalmente */
    gap: clamp(10px, 2vw, 15px); /* Espacio responsivo entre los botones */
    padding: clamp(8px, 1.5vw, 10px); /* Espaciado interno responsivo */
    background-color: black; /* Fondo oscuro del contenedor */
    border-radius: 8px; /* Opcional: bordes redondeados */
    width: 100%; /* Ocupa todo el ancho del .main-container */
    box-sizing: border-box; /* Incluye padding en el ancho */
}

/* --- Estilos para INPUTs --- */
Input[type="text"], Input[type="password"] {
    outline: none;
    padding: clamp(8px, 1.5vw, 10px); /* Padding responsivo */
    display: block;
    width: 90%; /* Ajustado a porcentaje para que se adapte */
    max-width: 300px; /* Ancho máximo para que no sea demasiado grande en desktop */
    border-radius: 3px;
    border: 1px solid #fff; /* Corregida sintaxis de border */
    margin: clamp(5px, 1.5vw, 10px) auto; /* Margen responsivo */
    box-sizing: border-box; /* Incluye padding y border en el ancho total */
    font-size: clamp(14px, 2vw, 16px); /* Tamaño de fuente responsivo */
}

Input[type="submit"] {
    padding: clamp(8px, 1.5vw, 10px) clamp(12px, 2vw, 15px); /* Padding responsivo */
    color: #fff;
    background: #0098cb;
    width: auto; /* Corregida sintaxis de width */
    margin: 2px auto;
    margin-top: 0px;
    border: 0px;
    border-radius: 3px;
    cursor: pointer;
    font-size: clamp(14px, 2vw, 16px); /* Tamaño de fuente responsivo */
}

Input[type="submit"]:hover {
    background-color: #00b8cb;
}

/* --- Media Queries para ajustes finos --- */
/* Estas media queries ahora son menos críticas para el tamaño de los botones
   debido al uso de clamp(), pero aún pueden ser útiles para ajustar el layout
   o tamaños si se desea un control más granular en ciertos breakpoints.
   Mantendremos la lógica de flex-direction: column para el links-container. */

@media (max-width: 768px) {
    h1 {
        font-size: clamp(1.5em, 4vw, 1.8em); /* Ajuste de h1 para tabletas */
    }
    /* Los tamaños de .button y .angosto ya están manejados por clamp,
       estos overrides podrían ser redundantes o necesitar un ajuste fino si se desea.
       Los dejo comentados para que veas que clamp() los hace menos necesarios. */
    /* .button {
        width: clamp(100px, 18vw, 120px);
        height: clamp(80px, 15vw, 100px);
    }
    .angosto {
        width: clamp(70px, 12vw, 80px);
        height: clamp(60px, 10vw, 80px);
    } */
}

@media (max-width: 480px) {
    h1 {
        font-size: clamp(1.2em, 3.5vw, 1.5em); /* Ajuste de h1 para móviles pequeños */
    }
    #links-container {
        flex-direction: column; /* Apila los botones verticalmente en pantallas muy pequeñas */
        align-items: center; /* Centra los botones apilados */
        gap: clamp(8px, 2.5vw, 10px); /* Espacio responsivo */
    }
    /* Los tamaños de .button y .angosto ya están manejados por clamp,
       estos overrides podrían ser redundantes o necesitar un ajuste fino si se desea.
       Los dejo comentados para que veas que clamp() los hace menos necesarios. */
    /* .button {
        width: 100%;
        max-width: 140px;
        height: clamp(90px, 18vw, 100px);
    }
    .angosto {
        width: 100%;
        max-width: 100px;
        height: clamp(70px, 14vw, 80px);
    } */
}
        max-width: 140px;
        height: clamp(90px, 18vw, 100px);
    }
    .angosto {
        width: 100%;
        max-width: 100px;
        height: clamp(70px, 14vw, 80px);
    } */
}