/*
 * Archivo: css/forgot_password.css
 * Descripción: Estilos para la página de preguntas de seguridad.
 */

/* Estilos Generales y Reseteos */
body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fuente un poco más moderna */
    background: url('../img/fondoAzul.jpg') no-repeat center center fixed; /* Asegúrate de que la ruta sea correcta */
    background-size: cover;
    color: #333; /* Color de texto base más oscuro para legibilidad */
}

/* Contenedor Principal para centrar el formulario */
.recover-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Usar min-height para asegurar que cubre toda la altura incluso con poco contenido */
    padding: 20px; /* Un poco más de padding general */
    box-sizing: border-box; /* Asegura que el padding no cause desbordamiento */
}

/* Tarjeta del Formulario de Recuperación */
.recover-card {
    background: rgba(255, 255, 255, 0.98); /* Un poco más opaco */
    padding: 30px; /* Más padding interno */
    border-radius: 12px; /* Ligeramente menos redondeado para un look más moderno */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15); /* Sombra más suave y extendida */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 380px; /* Ancho máximo un poco más amplio */
    position: relative;
    padding-top: 60px; /* Espacio superior para el logo */
}

/* Estilos para el logo como enlace */
.logo-link {
    display: block;
    text-decoration: none;
    margin-bottom: 25px; /* Más espacio debajo del logo */
    line-height: 0;
}

.logo {
    width: 120px; /* Tamaño del logo un poco más grande */
    height: auto; /* Mantiene la proporción */
}

/* Título del Formulario */
.recover-card h2 {
    margin: 0 0 25px 0; /* Ajuste de márgenes */
    color: #2c3e50;
    text-align: center;
    font-size: 1.8em; /* Título un poco más grande */
}

/* Texto de Instrucciones */
.instructions-text {
    margin-bottom: 25px; /* Más espacio */
    text-align: center;
    color: #666; /* Un color más suave */
    font-size: 1em; /* Tamaño de fuente normal */
    line-height: 1.5; /* Espaciado entre líneas */
}

/* Etiquetas de los Campos (Label) */
label {
    align-self: flex-start;
    margin-bottom: 8px; /* Más espacio debajo de la etiqueta */
    font-weight: 600; /* Un poco más de grosor */
    color: #333;
    display: block;
    font-size: 0.95em;
}

/* Campos de Entrada (Input text) */
input[type="text"] {
    width: 100%;
    padding: 12px; /* Más padding para mayor área de clic/toque */
    margin: 0 0 20px 0; /* Ajuste de márgenes */
    border: 1px solid #ddd; /* Borde más sutil */
    border-radius: 8px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
    font-size: 1em;
}

input:focus {
    border-color: #3498db;
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.3); /* Sombra más suave y extendida */
    outline: none;
}

/* Botón de Envío */
button {
    background-color: #3498db; /* Cambiado a un azul más común para acciones primarias */
    color: white;
    padding: 14px; /* Más padding para mayor área de clic */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1em; /* Fuente un poco más grande */
    font-weight: bold;
    width: 100%;
    margin-top: 25px; /* Más espacio superior */
    transition: background-color 0.3s ease, transform 0.2s ease;

}

button:hover {
    background-color: #2980b9; /* Azul más oscuro al pasar el mouse */
    transform: translateY(-2px); /* Un ligero efecto de levantamiento */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Pequeña sombra al hover */
}

button:active {
    transform: translateY(0); /* Vuelve a la posición original al hacer clic */
    box-shadow: none;
}

/* Estilos para los mensajes de feedback (éxito/error) */
.feedback-message {
    margin-top: 20px; /* Más espacio superior */
    font-weight: bold;
    font-size: 1em;
    text-align: center;
    padding: 10px; /* Añade un poco de padding para que el texto no toque los bordes */
    border-radius: 5px;
}

.feedback-message.error-message {
    color: #c0392b; /* Rojo más fuerte para errores */
    background-color: #fcebeb; /* Fondo claro para el error */
    border: 1px solid #e74c3c; /* Borde para el error */
}

.feedback-message.success-message {
    color: #27ae60; /* Verde más fuerte para éxito */
    background-color: #e9f5ed; /* Fondo claro para el éxito */
    border: 1px solid #2ecc71; /* Borde para el éxito */
}


/* Media Queries para Responsive Design */
@media (max-width: 480px) {
    .recover-card {
        padding: 20px; /* Menos padding en pantallas muy pequeñas */
        padding-top: 40px;
        border-radius: 10px;
    }

    .logo {
        width: 90px;
    }

    .recover-card h2 {
        font-size: 1.5em;
    }

    input[type="text"], button {
        padding: 10px;
        font-size: 0.95em;
    }

    .feedback-message {
        font-size: 0.9em;
    }
}

@media (min-width: 768px) {
    .recover-card {
        padding: 40px;
        padding-top: 70px;
        max-width: 450px; /* Un poco más de ancho en pantallas medianas/grandes */
    }

    .logo {
        width: 150px;
    }

    button {
        font-size: 1.2em;
        padding: 16px;
    }
}
/* Añade esto al final de tu css/forgot_password.css */

.reset-link-text {
    margin-top: 20px; /* Espacio encima del enlace */
    font-size: 0.9em;
    text-align: center;
}

.reset-direct-link {
    color: #3498db; /* Color de tu botón principal */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.reset-direct-link:hover {
    color: #2980b9;
    text-decoration: underline;
}