/* estiloRecover.css - Estilos específicos para Recover_Password.php, adaptados para responsividad */

/* Override para permitir scroll y fondo fijo igual que en login (fondo no se mueve al scroll) */
body {
    overflow: auto; /* Permite scroll */
    height: auto; /* Ajusta altura dinámica */
    min-height: 100vh; /* Asegura que cubra al menos la vista completa */
    background-attachment: fixed; /* Fondo fijo, no se mueve con scroll, para igualar la sensación de 'fijo' en login donde no hay scroll */
    display: block; /* Cambia a block para no centrar verticalmente como en login, ya que aquí hay más contenido */
}

/* Ajustes para el main */
main {
    padding-top: 140px; /* Ajuste del padding superior para compensar el header fijo */
    padding-bottom: 60px; /* Añade padding inferior para evitar choque con soporte */
    text-align: center; /* Centra el contenido dentro del main */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Wrapper para contenido con imagen a la izquierda */
.content-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    margin: 20px auto 0; /* Añade margen superior para separación */
    padding: 0 20px;
    transition: opacity 0.5s ease-in-out; /* Animación suave para el wrapper */
}

.content-wrapper:hover {
    opacity: 0.95; /* Efecto sutil en hover */
}

.ilustracion {
    width: 350px; /* Ajusta el ancho de la ilustración según sea necesario */
    height: auto;
    margin-right: 30px; /* Espacio entre imagen y texto */
    flex-shrink: 0;
    transition: transform 0.3s ease; /* Animación suave para la imagen */
}

.ilustracion:hover {
    transform: scale(1.05); /* Aumentar ligeramente en hover */
}

/* Estilos para el párrafo "Recuperación de Contraseña" */
.quiensomos {
    font-size: 38px; /* Tamaño de fuente más grande para destacar */
    margin: 0 0 20px 0; /* Margen inferior */
    color: #600000;
    transition: color 0.3s ease; /* Animación suave para cambio de color */
}

.quiensomos:hover {
    color: #9D0000; /* Cambio de color en hover */
}

/* Estilos del contenedor de formulario */
.container {
    background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco semitransparente */
    border-radius: 18px;
    padding: 20px; /* Espaciado interno aumentado para mejor legibilidad */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Sombra para mejor estética */
    color: #600000;
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease; /* Transiciones suaves */
    text-align: left;
    max-width: 450px; /* Ancho máximo adaptado */
    height: auto;
}

.container:hover {
    transform: translateY(-5px); /* Efecto levitación en hover */
    box-shadow: 0 8px 16px rgba(0,0,0,0.3); /* Sombra más profunda */
    opacity: 0.98; /* Sutil cambio de opacidad */
}

.container label {
    font-size: 22px;
    display: block;
    margin-top: 10px; /* Añadir margen superior para separar del borde superior */
    color: #600000;
}

.container input[type="email"]{
    width: calc(100% - 40px); /* Ancho completo menos el padding */
    background: linear-gradient(to right, #600000, #9D0000);
    color: #ffffff;
    padding: 10px;
    margin-top: 10px;
    margin-left: 1px;
    border: 1px solid #ccc;
    border-radius: 18px;
    font-size: 18px;
}

.container input[type="email"]::placeholder {
    color: hsla(0, 0%, 100%, 0.8); /* Color blanco del placeholder con algo de transparencia */
    opacity: 1; /* Asegura que el color del placeholder es visible */
    font-size: 18px; /* Tamaño del texto del placeholder */
}

.container #error-message {
    color: red;
    font-size: 14px;
    margin-top: 10px;
    position: relative; /* Cambiado a relative para mejor flujo */
}

/* Estilo base para el botón */
.container #button {
    width: 100px;
    background: linear-gradient(to right, #600000, #9D0000); /* Gradiente de color */
    color: #ffffff; /* Color del texto */
    padding: 10px;
    margin-top: 10px;
    margin-left: 65%;
    border: 1px solid #ccc; /* Borde */
    border-radius: 18px; /* Bordes redondeados */
    font-size: 18px; /* Tamaño de fuente */
    cursor: pointer; /* Cambia el cursor a mano */
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
}

/* Estilo para el botón cuando el usuario pasa el ratón por encima */
.container #button:hover {
    background: linear-gradient(to right, #9D0000, #600000); /* Gradiente inverso */
    border-color: #fff; /* Cambia el color del borde a blanco */
    color: #fff; /* Color del texto se mantiene blanco */
    transform: scale(1.05); /* Aumenta el tamaño ligeramente */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Agrega una sombra */
    text-decoration: none; /* Sin subrayado */
}

/* Estilos para el enlace en nav (agregado para consistencia con .right y .icon) */
nav ul {
    width: 100%;
    justify-content: flex-start;
}

nav ul li.right {
    margin-left: auto; /* Mueve el último elemento hacia la derecha */
    margin-right: 0; /* Pegado a la derecha */
}

nav ul li a .icon {
    width: 18px; /* Ajusta el tamaño del icono para que coincida con el texto */
    height: 18px;
    margin-right: 5px; /* Espacio entre el icono y el texto */
    vertical-align: middle;
    transition: transform 0.3s ease; /* Animación suave para icono */
}

nav ul li a:hover .icon {
    transform: rotate(360deg); /* Rotación en hover para animación */
}

/* Contenedor para soporte (copiado exactamente de styles.css) */
.support-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    padding: 10px 20px;
    position: absolute;
    bottom: 10px;
    right: 0;
    z-index: 10;
}

.logosp {
    width: 21px; /* Tamaño del icono de usuario */
    height: 21px; /* Tamaño del icono de usuario */
    margin-right: 5px; /* Espacio a la derecha para separar del texto */
    transition: transform 0.3s ease; /* Animación suave */
}

.logosp:hover {
    transform: scale(1.2); /* Aumentar en hover */
}

.support {
    color: #6B1D27;
    text-decoration: none; /* Quita el subrayado */
    font-size: 18px;
    transition: color 0.3s ease, transform 0.3s ease; /* Transición suave para el color y transform */
    font-weight: 550; /* Ajusta este valor para cambiar la intensidad de negrita */
}

.support:hover {
    color: #FFC107; /* Cambia a color mostaza cuando se pasa el cursor */
    text-decoration: none; /* Asegura que no tenga subrayado en hover */
    transform: translateY(-2px); /* Levitación en hover */
}

/* RESPONSIVE - Tablets y móviles (adaptado de styles.css y estilo_header_login.css para mejor visualización en phones) */
@media (max-width: 768px) {
    main {
        padding-top: 120px; /* Ajuste para header más pequeño en tablets */
        padding-bottom: 80px; /* Mayor padding inferior */
    }

    .content-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .ilustracion {
        width: 100%; /* Ocupa todo el ancho en móviles */
        max-width: 300px;
        margin: 15px 0; /* Centrado vertical */
        margin-right: 0;
    }

    .text-content {
        width: 90%;
        text-align: center;
    }

    .quiensomos {
        font-size: 32px;
        margin: 20px 0;
    }

    .container {
        width: 100%;
        max-width: none;
        margin: 10px auto;
        padding: 15px;
        border-radius: 12px; /* Bordes más suaves */
        box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Sombra más refinada */
        text-align: center; /* Centra texto en móviles para mejor lectura */
    }

    .container input[type="email"] {
        width: 100%;
        margin-left: 0;
    }

    .container #button {
        margin-left: 0;
        width: 100%;
    }

    .support-container {
        padding: 10px;
        bottom: 5px;
        justify-content: flex-end; /* Mantiene a la derecha en tablets */
    }

    .logosp {
        width: 18px;
        height: 18px;
        margin-right: 4px;
    }

    .support {
        font-size: 16px;
    }

    nav ul li.right {
        margin-right: 0;
    }
}

@media (max-width: 480px) {
    main {
        padding-top: 100px; /* Ajuste para móviles pequeños */
        padding-bottom: 60px;
    }

    .ilustracion {
        width: 100%;
        max-width: 250px;
        margin: 10px 0;
    }

    .quiensomos {
        font-size: 28px;
    }

    .container {
        padding: 10px;
        width: 100%;
        border-radius: 10px; /* Bordes aún más suaves */
        text-align: left; /* Vuelve a left para mejor flujo, pero ajustable */
    }

    .container label {
        font-size: 18px;
    }

    .container input[type="email"] {
        font-size: 16px;
    }

    .container #button {
        font-size: 16px;
    }

    .container #error-message {
        font-size: 12px;
    }

    .support-container {
        padding: 5px;
        bottom: 0;
        justify-content: flex-end; /* Mantiene a la derecha en móviles */
    }

    .logosp {
        width: 16px;
        height: 16px;
        margin-right: 3px;
    }

    .support {
        font-size: 14px;
    }

    nav ul li.right {
        margin-right: 0;
    }
}