/* /assets/css/forgot-password.css */

/* --- Variáveis CSS (Copie do seu style.css ou trocar-senha.css para garantir consistência) --- */
:root {
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    --spacing-xxl: 40px;

    --font-size-sm: 0.9em;
    --font-size-md: 1em;
    --font-size-lg: 1.1em;
    --font-size-xl: 1.2em;

    --color-primary: #0d447c;
    --color-secondary: #0a335a;
    --color-warning: #ffc107;
    --color-warning-hover: #e0a800;
    --color-danger: #dc3545;
    --color-danger-hover: #c82333;

    --color-text: #333;
    --color-text-label: #555;
    --color-text-secondary: #777;
    --color-background-body: #f8faff;
    --color-background-card: #ffffff;
    --color-border: #e6e9ec;
    --color-border-light: #f0f2f5;
    --color-table-border: #e9ebee;
    --color-table-header-background: #f4f7fa;
    --color-table-header-text: #333;
    --color-table-row-even: #fbfdff;
    --color-table-row-hover: #eef2f6;

    --color-button-text-light: #fff;
    --color-button-text-dark: #333;
    --color-link: #0d447c;
    --color-link-hover: #0a335a;
    --color-background-hover: #e9ecef;

    --border-radius-default: 8px;
    --box-shadow-default: 0 4px 15px rgba(0, 0, 0, 0.08);
    --box-shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* --- Estilos Globais de Layout para a página de recuperação de senha --- */
body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-background-body);
    margin: 0;
    padding: 0;
    display: flex; /* Para centralizar o conteúdo verticalmente e horizontalmente */
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Ocupa a altura total da viewport */
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 450px; /* Largura ideal para um formulário de login/recuperação */
    width: 90%; /* Responsividade */
    background-color: var(--color-background-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-default);
    box-shadow: var(--box-shadow-default);
    padding: var(--spacing-xl);
    box-sizing: border-box;
    text-align: center; /* Centraliza o texto dentro do container */
}

.form-container h2 {
    font-size: 2em;
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    font-weight: 700;
}

.form-container p {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
}

/* --- Estilos para o Formulário --- */
.form-group {
    margin-bottom: var(--spacing-md);
    text-align: left; /* Alinha labels e inputs à esquerda */
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
    color: var(--color-text-label);
    font-size: var(--font-size-md);
}

.form-group input[type="email"] {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-default);
    font-size: var(--font-size-md);
    color: var(--color-text);
    background-color: var(--color-background-card);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
    min-height: 40px;
}

.form-group input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(13, 68, 124, 0.2);
    outline: none;
}

/* --- Estilos para o Botão de Submit --- */
.btn, button[type="submit"] { /* Aplica estilos tanto para .btn quanto para button[type="submit"] */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    border-radius: var(--border-radius-default);
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
    font-weight: bold;
    margin-top: var(--spacing-lg); /* Espaço acima do botão */
    width: 100%; /* Ocupa a largura total */
    max-width: 250px; /* Limita a largura máxima */
    background-color: var(--color-primary);
    color: var(--color-button-text-light);
}

.btn:hover, button[type="submit"]:hover {
    background-color: var(--color-secondary);
    color: var(--color-button-text-light);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* --- Estilos para Mensagens (Sucesso/Erro) --- */
.message {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-default);
    margin-bottom: var(--spacing-md);
    font-weight: 500;
    text-align: center;
}

.message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* --- Estilo para o link "Voltar para o Login" --- */
.back-link {
    display: block; /* Ocupa a largura total */
    margin-top: var(--spacing-lg);
    color: var(--color-link);
    text-decoration: none;
    font-size: var(--font-size-md);
    font-weight: 500;
}

.back-link:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

/* --- Responsividade --- */
@media (max-width: 768px) {
    .container {
        padding: var(--spacing-lg);
        width: 95%;
    }
    .form-container h2 {
        font-size: 1.8em;
    }
    .btn, button[type="submit"] {
        font-size: var(--font-size-md);
        padding: var(--spacing-sm);
    }
}

@media (max-width: 480px) {
    .container {
        padding: var(--spacing-md);
    }
    .form-container h2 {
        font-size: 1.6em;
    }
    .form-group label,
    .form-group input,
    .btn, button[type="submit"],
    .back-link {
        font-size: var(--font-size-sm);
    }
}