/*
MEDIA QUERIE'S ESTÁNDAR
---------------------------- Celulares
@media (min-width: 480px) {}
---------------------------- Tables
@media (min-width: 768px) {}
---------------------------- Computadoras
@media (min-width: 1140px) {}
@media (min-width: 1400px) {}
*/

/*----------------------------------------------------------------------------- VARIABLES GLOBALES */
:root {
    /* Color crema claro para fondos */
    --primario: #F5F5DC;
    /* Color verde bosque para acentos */
    --secundario: #7b8268;
    /* Blanco puro */
    --blanco: white;
    /* Negro puro */
    --negro: black;
    /* Fuente principal */
    --fuente-principal: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

/*----------------------------------------------------------------------------- AJUSTES GENERALES*/
/*----------------------------------------- HTML */
html {
    /* Tamaño base para fuentes (10px = 1rem) */
    font-size: 62.5%;
    /* Establece el modelo de caja para todo el documento */
    box-sizing: border-box;
}

/*----------------------------------------- BOX-SIZING */
/* Aplica box-sizing heredado a todos los elementos */
*,
*:before,
*:after {
    box-sizing: inherit;
}

/*----------------------------------------- BODY */
/* Estilo base del cuerpo del documento */
body {
    /* Tamaño de feunte*/
    font-size: 16px;
    /* Se asigna la fuente 'Raleway' */
    font-family: var(--fuente-principal);
    /* Espaciado entre las letras */
    letter-spacing: 3px;
    /* Color de fondo del cuerpo */
    background-color: var(--primario);
    /* Centrado total del contenido */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Altura total de la ventana */
    height: 100vh;
}

/*----------------------------------------- ETIQUETAS DE ENCABEZADO */
h1 {
    /* Tamaño de fuente */
    font-size: 3.8rem;
    /* Margen inferior */
    margin-bottom: 20px;
}

h2 {
    font-size: 2.8rem;
}

h3 {
    font-size: 1.8rem;
}

h1,
h2,
h3 {
    /* Alineción del texto */
    text-align: center;
}

/*----------------------------------------------------------------------------- CONTENEDOR PRINCIPAL */
.container {
    /* Bordes redondeados del contenedor */
    border-radius: 30px;
    /* Sombra de fondo */
    box-shadow: 0 5px 15px var(--negro);
    /* Ocultar cualquier desbordamiento */
    overflow: hidden;
    /* Dimensiones del contenedor Ancho - Altura*/
    width: 750px;
    min-height: 480px;
    /* Distribución del contenido en dos columnas */
    display: flex;
}

/*-----------------------------------------------------------------------------
    CONTENEDOR DE LA IMAGEN (LOGO)
-----------------------------------------------------------------------------*/
.img-container {
    /* Establece el color de fondo del contenedor */
    background: var(--secundario);
    /* Ocupa el 50% del ancho total del contenedor padre (container) */
    width: 50%;
    /* Utiliza flexbox para organizar su contenido */
    display: flex;
    /* Centra horizontalmente la imagen dentro del contenedor */
    justify-content: center;
    /* Centra verticalmente la imagen dentro del contenedor */
    align-items: center;
}

.img-container img {
    /* Limita el ancho máximo de la imagen al 100% del contenedor */
    max-width: 100%;
}

/*-----------------------------------------------------------------------------
    CONTENEDOR DEL FORMULARIO
-----------------------------------------------------------------------------*/
.form-container {
    /* Establece el color de fondo del formulario */
    background-color: var(--blanco);
    /* Ocupa el 50% del ancho del contenedor padre (container) */
    width: 50%;
    /* Utiliza flexbox para organizar su contenido */
    display: flex;
    /* Centra horizontalmente los elementos del formulario */
    justify-content: center;
    /* Organiza los elementos en una columna (de arriba hacia abajo) */
    flex-direction: column;
    /* Espaciado horizontal interno (izquierda y derecha) */
    padding: 0 40px;
    /* Establece una posición relativa para que los elementos internos
       (como el mensaje de error) puedan posicionarse de forma absoluta respecto a este contenedor */
    position: relative;
}

/*-----------------------------------------------------------------------------
    ESTILOS PARA LAS ETIQUETAS <label>
-----------------------------------------------------------------------------*/
.container label {
    /* Aplica negrita al texto para dar mayor énfasis */
    font-weight: 600;
}

/*-----------------------------------------------------------------------------
    ESTILOS PARA LOS CAMPOS DE ENTRADA <input>
-----------------------------------------------------------------------------*/
.container input {
    /* Establece el color de fondo de los campos */
    background-color: var(--primario);
    /* Elimina los bordes por defecto del navegador */
    border: none;
    /* Define el margen superior e inferior */
    margin: 10px 0;
    /* Aplica espaciado interno para mejorar la legibilidad del contenido */
    padding: 10px 15px;
    /* Define el tamaño del texto dentro del input */
    font-size: 15px;
    /* Bordes redondeados para un estilo moderno y amigable */
    border-radius: 30px;
    /* El input ocupa todo el ancho disponible */
    width: 100%;
    /* Elimina el borde azul cuando el campo tiene el foco */
    outline: none;
    /* Margen inferior adicional para separar los inputs entre sí */
    margin-bottom: 20px;
}

/* ESTILOS PARA EL TEXTO DE PLACEHOLDER DENTRO DE INPUTS */
input::placeholder {
    /* Establece el color del texto placeholder */
    color: var(--negro);
}

/*-----------------------------------------------------------------------------
    ESTILOS PARA EL BOTÓN DE ENVÍO DEL FORMULARIO
-----------------------------------------------------------------------------*/
.container button {
    /* Define el color de fondo del botón */
    background-color: var(--primario);
    /* Color del texto dentro del botón */
    color: var(--negro);
    /* Tamaño del texto del botón */
    font-size: 15px;
    /* Espaciado interno: alto y laterales */
    padding: 10px 45px;
    /* Elimina el borde por defecto */
    border: none;
    /* Bordes redondeados para una apariencia más suave */
    border-radius: 8px;
    /* Define el grosor del texto */
    font-weight: 600;
    /* Convierte el texto a mayúsculas */
    text-transform: uppercase;
    /* Cambia el cursor a tipo "mano" al pasar sobre el botón */
    cursor: pointer;
    /* El botón se ajusta al 100% del ancho de su contenedor */
    width: 100%;
    /* Margen superior para separarlo de otros elementos */
    margin-top: 20px;
}

/* EFECTO HOVER (AL PASAR EL CURSOR) SOBRE EL BOTÓN */
.container button:hover {
    /* Cambia el fondo al color secundario */
    background-color: var(--secundario);
    /* Cambia el color del texto a blanco */
    color: var(--blanco);
}


/*-----------------------------------------------------------------------------
    MENSAJE DE ERROR (OCULTO POR DEFECTO)
-----------------------------------------------------------------------------*/
.error-message {
    /* Activa el modo flexbox para centrar el contenido */
    display: flex;
    /* Centra verticalmente los elementos */
    align-items: center;
    /* Centra horizontalmente los elementos */
    justify-content: center;
    /* Organiza los elementos en una columna */
    flex-direction: column;
    /* Posiciona el mensaje de forma absoluta respecto a su contenedor padre */
    position: absolute;
    /* Oculta el mensaje desplazándolo muy abajo de la pantalla */
    bottom: -1000px;
    /* Centra el mensaje horizontalmente con respecto al contenedor */
    left: 50%;
    /* Corrige el centrado horizontal con un desplazamiento negativo del 50% de su propio ancho */
    transform: translateX(-50%);
    /* Define el ancho del mensaje como el 90% del contenedor padre */
    width: 90%;
    /* Establece el fondo con el color secundario*/
    background-color: var(--secundario);
    /* Relleno interno del mensaje */
    padding: 10px;
    /* Bordes redondeados para una estética suave */
    border-radius: 10px;
    /* Transiciones suaves para animar la aparición/desaparición del mensaje */
    transition: bottom 0.5s ease, opacity 0.5s ease;
    /* Asegura que el mensaje esté por encima de otros elementos */
    z-index: 10;
}

/*-----------------------------------------------------------------------------
    ESTADO VISIBLE DEL MENSAJE DE ERROR (.show)
-----------------------------------------------------------------------------*/
.error-message.show {
    /* Desliza el mensaje a una posición visible dentro del contenedor */
    bottom: 400px;
    /* Hace el mensaje completamente visible */
    opacity: 1;
    /* Color del texto del mensaje */
    color: var(--blanco);
    /* Aplica negrita al texto */
    font-weight: 600;
    text-align: center;
}

/*----------------------------------------------------------------------------- MEDIA QUERIES RESPONSIVE */
/*------------------------ Celulares (hasta 480px de ancho) */
@media (max-width: 480px) {
    /* Oculta el contenedor de la imagen para ahorrar espacio en pantallas pequeñas */
    .img-container {
        display: none;
    }

    /* El formulario ocupa el 100% del ancho disponible */
    .form-container {
        width: 100%;
    }

    /* Ajustes del mensaje de error para pantallas pequeñas */
    .error-message.show {
        /* Desliza el mensaje a una posición visible dentro del contenedor */
        bottom: 380px;
    }

    /* Reduce el tamaño del título para mayor legibilidad en pantallas pequeñas */
    h1 {
        font-size: 2.4rem;
    }

    /* Ajusta el contenedor general para dispositivos móviles */
    .container {
        /* Reduce el ancho general */
        width: 95%;
        /* Bordes menos redondeados para pantallas pequeñas */
        border-radius: 20px;
        /* Reduce la altura mínima */
        min-height: 450px;
    }
}