/* ============================================
   ESTILOS GENERALES Y RESET
   ============================================ */

/* Reset básico para eliminar márgenes y padding por defecto */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilos del cuerpo de la página - Fondo morado oscuro */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    background-color: #532e91; /* Color morado de fondo */
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* ============================================
   CONTENEDOR PRINCIPAL DEL LOGIN
   ============================================ */

/* Contenedor principal que centra la tarjeta de login */
.login-container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Tarjeta principal del login - Card flotante con sombra y bordes */
.login-card {
    /*background-color: #FFFFFF; /* Fondo blanco de la tarjeta */
    border-radius: 20px; /* Bordes redondeados */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); /* Sombra más oscura para efecto flotante */
    border: none; /* Sin borde para eliminar el borde blanco */
    display: flex;
    width: 100%;
    max-width: 700px; /* Ancho máximo reducido */
    overflow: hidden; /* Oculta el contenido que se desborde */
    min-height: 450px; /* Altura mínima reducida */
}

/* ============================================
   SECCIÓN DE BRANDING (IZQUIERDA)
   ============================================ */

/* Sección izquierda con el branding y logo */
.branding-section {
    flex: 2; /* Ocupa 2/3 del ancho de la tarjeta */
    /*background-color: #E8E8E8; /* Fondo gris claro para la sección de branding */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0; /* Sin padding para que la imagen ocupe todo el espacio */
    position: relative;
    overflow: hidden; /* Oculta cualquier desbordamiento */
    border-top-left-radius: 20px; /* Bordes redondeados en la esquina superior izquierda */
    border-bottom-left-radius: 20px; /* Bordes redondeados en la esquina inferior izquierda */
}

/* Imagen de branding - Cubre todo el espacio disponible incluyendo esquinas redondeadas */
.branding-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cubre todo el espacio disponible sin deformarse */
    object-position: center; /* Centra la imagen */
    display: block;
    border-top-left-radius: 20px; /* Bordes redondeados que coinciden con el card */
    border-bottom-left-radius: 20px; /* Bordes redondeados que coinciden con el card */
    transform: scale(1.02); /* Escala ligeramente para cubrir completamente las esquinas */
}

/* ============================================
   SECCIÓN DEL FORMULARIO (DERECHA)
   ============================================ */

/* Sección derecha con el formulario de login */
.form-section {
    flex: 1; /* Ocupa 1/3 del ancho de la tarjeta */
    background-color: #FFFFFF; /* Fondo blanco para el formulario */
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Formulario de login */
.login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ============================================
   ELEMENTOS DEL FORMULARIO
   ============================================ */

/* Grupo de campo del formulario (input-wrapper + error) */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Contenedor del input con icono - Permite posicionar el icono dentro del campo */
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Icono dentro del campo de entrada - Posicionado a la izquierda */
.input-icon {
    position: absolute;
    left: 15px;
    width: 16px;
    height: 16px;
    color: #333333; /* Color gris oscuro para el icono */
    z-index: 1;
    pointer-events: none; /* Permite hacer clic a través del icono */
}

/* Campo de entrada del formulario - Con padding izquierdo para el icono */
.form-input {
    width: 100%;
    padding: 12px 40px; /* Padding simétrico para centrar el texto considerando el icono */
    border: 1px solid #E0E0E0; /* Borde gris claro más suave */
    border-radius: 8px; /* Bordes redondeados */
    background-color: #FFFFFF; /* Fondo blanco */
    font-size: 14px;
    color: #333333; /* Texto gris oscuro */
    text-align: center; /* Centra el texto del input */
    transition: all 0.3s ease;
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Sombra sutil en el input */
}

/* Placeholder del input - Estilo gris oscuro para el texto placeholder */
.form-input::placeholder {
    color: #333333; /* Color gris oscuro para el placeholder */
    opacity: 1; /* Asegura que el color se muestre correctamente */
    text-align: center; /* Centra el placeholder */
}

/* Estado hover del campo de entrada */
.form-input:hover {
    border-color: #999999;
}

/* Estado focus del campo de entrada */
.form-input:focus {
    border-color: #4A2C5A;
    box-shadow: 0 0 0 3px rgba(74, 44, 90, 0.1);
}

/* Estado de error del campo de entrada */
.form-input:invalid:not(:placeholder-shown),
.form-input.error {
    border-color: #E74C3C;
}

/* Mensaje de error debajo del campo */
.error-message {
    color: #E74C3C;
    font-size: 12px;
    min-height: 16px;
    display: block;
    text-align: center; /* Centra el mensaje de error */
}

/* ============================================
   ENLACES Y BOTONES
   ============================================ */

/* Enlace de "Olvidó contraseña/usuario" - Color morado oscuro */
.forgot-link {
    color: #4A2C5A; /* Color morado oscuro */
    font-size: 12px;
    text-decoration: none;
    margin-top: -5px;
    text-align: center; /* Centra el enlace */
    display: block; /* Permite centrar el texto */
    transition: color 0.3s ease;
}

/* Estado hover del enlace de olvidó contraseña */
.forgot-link:hover {
    color: #6B3D7A;
    text-decoration: underline;
}

/* Botón principal de iniciar sesión */
.login-button {
    width: 100%;
    padding: 11px 18px; /* Padding reducido para botón más pequeño */
    background-color: #E8E8E8; /* Fondo gris claro del botón */
    color: #333333; /* Texto gris oscuro */
    border: 1px solid #D0D0D0; /* Borde gris claro */
    border-radius: 8px; /* Bordes redondeados */
    font-size: 14px; /* Tamaño de fuente reducido */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil en el botón */
}

/* Estado hover del botón de login */
.login-button:hover {
    background-color: #D0D0D0;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Estado active del botón de login */
.login-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Enlace de crear cuenta nueva - Color morado distintivo */
.create-account-link {
    color: #6B3D7A; /* Color morado para el enlace */
    font-size: 14px;
    text-decoration: none;
    text-align: center;
    margin-top: 10px;
    transition: color 0.3s ease;
}

/* Estado hover del enlace de crear cuenta */
.create-account-link:hover {
    color: #6B3D7A;
    text-decoration: underline;
}

/* ============================================
   DISEÑO RESPONSIVO
   ============================================ */

/* Tablets y pantallas medianas (hasta 768px) */
@media (max-width: 768px) {
    /* Cambia el layout de horizontal a vertical en tablets */
    .login-card {
        flex-direction: column;
        max-width: 500px;
    }

    /* Ajusta la sección de branding para tablets */
    .branding-section {
        flex: 1;
        padding: 0;
        min-height: 300px;
    }

    /* Ajusta la sección del formulario para tablets */
    .form-section {
        padding: 40px 30px;
    }
}

/* Móviles (hasta 480px) */
@media (max-width: 480px) {
    /* Ajusta el padding del body en móviles */
    body {
        padding: 10px;
    }

    /* Ajusta la tarjeta de login en móviles */
    .login-card {
        border-radius: 15px;
        min-height: auto;
    }

    /* Ajusta la sección de branding en móviles */
    .branding-section {
        padding: 0;
        min-height: 250px;
    }

    /* Ajusta la sección del formulario en móviles */
    .form-section {
        padding: 30px 20px;
    }

    /* Ajusta el espaciado del formulario en móviles */
    .login-form {
        gap: 15px;
    }

    /* Ajusta el tamaño de fuente de los inputs en móviles */
    .form-input {
        font-size: 16px; /* Previene zoom en iOS */
    }
}

/* Pantallas muy pequeñas (hasta 320px) */
@media (max-width: 320px) {
    /* Ajusta el padding del body en pantallas muy pequeñas */
    body {
        padding: 5px;
    }

    /* Ajusta la sección de branding en pantallas muy pequeñas */
    .branding-section {
        padding: 0;
        min-height: 200px;
    }

    /* Ajusta la sección del formulario en pantallas muy pequeñas */
    .form-section {
        padding: 20px 15px;
    }
}