/* Estilos generales para el cuerpo de la página */
body {
    margin: 0; /* Elimina el margen predeterminado del body */
    padding: 0; /* Elimina el padding predeterminado del body */
    font-family: 'Arial', sans-serif; /* Define la fuente predeterminada */
    background-image: url('imagenes/IYRindustria4.jpg');
    background-size: 96% 110%; /* Ajusta ancho y alto */
    background-position: center;
    background-attachment: fixed; /* ¡Clave para el efecto fijo! */
    color: #ffffff; /* Color del texto predeterminado */
    display: flex; /* Usa flexbox para centrar el contenido */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    min-height: 100vh; /* Altura mínima del body igual al 100% del viewport */
}

/* Capa oscura semitransparente sobre el fondo */
body::before {
    content: ''; /* Contenido vacío para el pseudo-elemento */
    position: absolute; /* Posicionamiento absoluto respecto al body */
    top: 0; /* Alinea en la parte superior */
    left: 0; /* Alinea en la parte izquierda */
    width: 100%; /* Ocupa el 100% del ancho */
    height: 100%; /* Ocupa el 100% de la altura */
    background-color: rgba(0, 0, 0, 0.4); /* Negro con 50% de opacidad */
    z-index: -1; /* Coloca la capa detrás del contenido */
}


/* Media Queries para ajustar en dispositivos móviles */
@media (max-width: 768px) {
    body {
        background-size: contain; /* Ajusta la imagen para que se vea completa en pantallas pequeñas */
        background-position: top; /* Alinea la imagen en la parte superior */
    }
}

@media (max-width: 480px) {
    body {
        background-size: cover; /* Vuelve a cubrir todo el fondo en pantallas muy pequeñas */
        background-position: center; /* Centra la imagen */
    }
}

/* Estilos para el título del formulario */
h2 {
    font-size: 28px; /* Tamaño de la fuente */
    color: #ffffff; /* Color del texto */
    margin-bottom: 30px; /* Margen inferior para separar del contenido */
}

/* Contenedor principal del formulario de inicio de sesión */
.login-container {
    width: 500px; /* Ancho del contenedor */
    padding: 60px 65px 55px; /* Espaciado interno */
    backdrop-filter: blur(16px); /* Efecto de desenfoque */
    border-radius: 55px; /* Bordes redondeados */
    box-shadow: 0 4px 40px rgba(255, 255, 255, 0.6); /* Sombra */
    text-align: center; /* Centra el texto */
    box-sizing: border-box; /* Incluye el padding en el ancho */
    margin: 0 auto; /* Centra el contenedor */
    position: relative; /* Posicionamiento relativo */
    transform-style: preserve-3d; /* Mantiene la perspectiva 3D */
    perspective: 1000px; /* Perspectiva para efectos 3D */
    transition: transform 1.8s ease, opacity 0.9s ease; /* Transición suave */
    overflow: hidden; /* Oculta el contenido que se desborda */
    opacity: 1; /* Inicialmente, el contenedor es completamente visible */
}

/* Estilos para los grupos de entrada (inputs) */
.input-group {
    position: relative; 
    margin-bottom: 30px;
}

/* Estilos para los placeholders */
.input-group .placeholder {
    display: block; /* Hace que el placeholder ocupe toda la línea */
    text-align: center; /* Centra el texto del placeholder */
    margin-bottom: 10px; /* Espacio entre el placeholder y el input */
    color: #ffffff; /* Color del texto */
    font-size: 16px; /* Tamaño de la fuente */
}

/* Estilos para los íconos dentro de los campos de entrada */
.input-group .icon {
    position: absolute; /* Posicionamiento absoluto dentro del grupo */
    top: 40px; /* Alinea verticalmente al 60% del grupo */
    left: 15px; /* Distancia desde la izquierda */
    transform: translateY(50%); /* Ajuste fino para centrar verticalmente */
    font-size: 18px; /* Tamaño del ícono */
    color: #000000ef; /* Color del ícono */
    transition: left 0.5s ease; /* Transición suave para el movimiento */
    pointer-events: none; /* Importante para no interferir con el click */
    z-index: 2;
}


/* Efecto al hacer hover sobre los grupos de entrada o al enfocar el input */
.input-group input:focus ~ .icon,
.input-group input:not(:placeholder-shown) ~ .icon {
    left: calc(100% - 45px); /* <-- AJUSTE CLAVE: Usamos 45px para que quede dentro del padding */
}

/* Estilos para los campos de entrada (inputs) */
.login-container input {
    width: 90%; /* Ancho del input */
    padding: 12px 20px; /* Espaciado interno */
    margin: 10px 0; /* Margen superior e inferior */
    border: 1px solid #f4fb32c6; /* Borde del input */
    border-radius: 70px; /* Bordes redondeados */
    background-color: #f0f0f5; /* Color de fondo del input */
    color: #000000; /* Color del texto */
    font-size: 16px; /* Tamaño de la fuente */
    transition: border-color 0.3s ease; /* Transición suave para el borde */
}

/* Estilos cuando el input está enfocado */
.login-container input:focus {
    border-color: #d7dead; /* Cambia el color del borde al enfocar */
    outline: none; /* Elimina el contorno predeterminado */
}

/* Estilos para el placeholder del input */
.login-container input::placeholder {
    color: #ffffff; /* Color del placeholder */
}

/* Estilos para el botón de "Ingresar" */
.login-submit {
    display: block; /* Hace que el botón sea un bloque */
    width: 90%; /* Ancho del botón */
    padding: 13px; /* Espaciado interno */
    margin: 30px 0; /* Margen superior e inferior */
    background-color: #184c7d; /* Color de fondo */
    color: #ffffff; /* Color del texto */
    border: none; /* Sin borde */
    border-radius: 70px; /* Bordes redondeados */
    font-size: 16px; /* Tamaño de la fuente */
    font-weight: bold; /* Texto en negrita */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    transition: background-color 0.3s ease; /* Transición suave para el color de fondo */
    text-align: center; /* Centra el texto dentro del botón */
    transform: translateX(20px); /* Mueve el botón 20px a la derecha */
}

/* Efecto al hacer hover sobre el botón de "Ingresar" */
.login-submit:hover {
    background-color: #f4fb32c6; /* Cambia el color de fondo al pasar el mouse */
    color: #000000; /* Texto negro */
}

/* Estilos para el mensaje de error */
.error-message {
    color: #ff4444; /* Color del texto */
    font-size: 14px; /* Tamaño de la fuente */
    margin-top: 10px; /* Margen superior */
}

/* Clase para ocultar elementos */
.hidden {
    display: none; /* Oculta el elemento */
}

/* Contenedor para las opciones "Recuérdame" y "recuperar contraseña" */
.options-container {
    display: flex; /* Usa flexbox para alinear elementos */
    justify-content: space-between; /* Espacio entre elementos */
    align-items: center; /* Alineación vertical */
    margin: 15px 0; /* Margen superior e inferior */
    width: 100%;
    margin-top: 15px;
}
/* Estilos para la opción "Recuérdame" */
.remember-me {
    display: flex; /* Usa flexbox para alinear elementos */
    align-items: center; /* Alineación vertical */
    gap: 8px; /* Espacio entre checkbox y label (reemplaza margin-right) */
}

/* Estilos para el checkbox */
.remember-me input[type="checkbox"] {
    cursor: pointer;
    order: 2; /* Coloca el checkbox después */
    width: 16px;
  height: 16px;
  accent-color: #f4fb32; /* Color personalizado */
  transition: transform 0.2s ease;
}

.remember-me input[type="checkbox"]:hover {
  transform: scale(1.05);
}


/* Estilos para el label de "Recuérdame" */
.remember-me label {
    color: #ffffff; /* Color del texto */
    font-size: 14px; /* Tamaño de la fuente */
    cursor: pointer;
    
}

/* Estilos para "recuperar contraseña" */
.forgot-password {
    color: #ffffffc6;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease;
}

.forgot-password:hover {
    text-decoration: underline;
    color: #f4fb32c6;
}

/* Estilos para el botón de volver */
.back-button {
    display: block; /* Hace que el botón sea un bloque */
    width: 30%; /* Ancho completo */
    padding: 10px; /* Espaciado interno */
    margin: 20px 0; /* Margen entre botones */
    background-color: transparent; /* Fondo transparente */
    border: 2px solid #7c7834; /* Borde blanco */
    color: #d8d7d7; /* Color del texto */
    font-size: 16px; /* Tamaño del texto */
    border-radius: 50px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave */
    transform: translateX(130px); /* Mueve el botón 20px a la derecha */
}

/* Efecto al hacer hover sobre el botón de volver */
.back-button:hover {
    background-color:  #f4fb32c6; /* Fondo blanco */
    color: #000000; /* Texto negro */
}

/* Formulario frontal (login) */
.form-front {
    backface-visibility: hidden; /* Oculta la parte trasera del elemento */
    transform: rotateY(0deg); /* Rotación inicial */
}

/* Formulario de registro (form-back) */
.form-back {
    position: absolute; /* Posicionamiento absoluto */
    top: 0; /* Alinea en la parte superior */
    left: 0; /* Alinea en la parte izquierda */
    width: 100%; /* Ocupa el 100% del ancho */
    height: 100%; /* Ocupa el 100% de la altura */
    backface-visibility: hidden; /* Oculta la parte trasera del elemento */
    transform: rotateY(180deg); /* Rotación inicial */
    border-radius: 55px; /* Bordes redondeados */
    padding: 20px 65px 55px; /* Espaciado interno */
    box-sizing: border-box; /* Incluye el padding en el ancho */
    
}

/* Contenido del formulario de registro */
.form-back .form-content {
    transform: rotateY(0deg); /* Rotación inicial */
    transform-style: preserve-3d; /* Mantiene la perspectiva 3D */
}

/* Aislar el texto de la rotación */
.form-back .form-content * {
    transform: rotateY(0deg); /* Rotación inicial */
}

/* Cuando el contenedor gira, ajustamos la visibilidad de los formularios */
.login-container.flipped .form-front {
    transform: rotateY(180deg); /* Rotación al girar */
}

.login-container.flipped .form-back {
    transform: rotateY(0deg); /* Rotación al girar */
}

/* Estilos específicos para los grupos de entrada en el formulario de registro */
.form-back .input-group {
    margin-bottom: 20px; /* Espacio entre los campos */
}

.form-back .input-group .placeholder {
    display: block; /* Hace que el placeholder ocupe toda la línea */
    text-align: center; /* Centra el texto del placeholder */
    margin-bottom: 10px; /* Espacio entre el placeholder y el input */
    color: #ffffff; /* Color del texto */
    font-size: 16px; /* Tamaño de la fuente */
    
}

.form-back .input-group input {
    width: 90%; /* Ancho del input */
    padding: 12px 20px; /* Espaciado interno */
    margin: 10px 0; /* Margen superior e inferior */
    border: 1px solid #ccc; /* Borde del input */
    border-radius: 70px; /* Bordes redondeados */
    font-size: 16px; /* Tamaño de la fuente */
    color: #000; /* Color del texto */
    background-color: #f9f9f9; /* Color de fondo del input */
    border: 1px solid #f4fb32c6; /* Borde del input */
}

.form-back .input-group input:focus {
    border-color: #5575a5; /* Cambia el color del borde al enfocar */
    outline: none; /* Elimina el contorno predeterminado */
}

/* Efecto de encendido/apagado */
.login-container.turning {
    opacity: 0; /* Durante el giro, el contenedor se vuelve transparente */
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.7); /* Añade un resplandor */
}

/* Media Queries para ajustar en pantallas pequeñas */
@media (max-width: 768px) {
    .login-container {
        width: 90%; /* Ancho del contenedor en pantallas pequeñas */
        max-width: 500px; /* Ancho máximo */
        padding: 40px 30px; /* Espaciado interno */
        border-radius: 30px; /* Bordes redondeados */
    }
}

@media (max-width: 480px) {
    .login-container {
        width: 95%; /* Ancho del contenedor en pantallas muy pequeñas */
        padding: 30px 20px; /* Espaciado interno */
        border-radius: 20px; /* Bordes redondeados */
    }
}