/*
|--------------------------------------------------------------------------
| NOVATRACK
| RECUPERACIÓN DE CONTRASEÑA
|--------------------------------------------------------------------------
*/

body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--margin-tu);
    background: var(--color-black);
}

.forgot-container {
    width: 100%;
    max-width: 430px;
   
}

.forgot-card {
    padding: 40px;
    background: var(--bg-modal);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}

.forgot-logo {
    display: flex;
    justify-content: center;
    margin-bottom: var(--margin-ts);
}

.forgot-icon {
    width: 70px;
    height: 70px;
    margin-bottom: var(--margin-tu);
    margin-left: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-round);
    font-size: var(--font-size-4xl);
}

.forgot-logo img {
    width: 350px;
    height: auto;
    display: block;
}

.forgot-title {
    margin: 0;
    color: var(--text-light);
    text-align: center;
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
}

.forgot-description {
    margin: var(--margin-xr);
    color: var(--text-light);
    text-align: center;
    font-size: var(--font-size-lg);
    line-height: 1.2;
    font-weight: var(--font-weight-medium);
}

.form-group {
    margin-bottom: var(--margin-tu);
}

.form-label {
    display: block;
    margin-bottom: 8px;
    color: var(--bg-navbar);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}

.input-wrapper {
    position: relative;
}

.input-wrapper i {
    position: absolute;
    top: var(--radius-round);
    left: var(--margin-tr);
    transform: translateY(-50%);
    color: var(--color-primary);
    pointer-events: none;
}

.input-wrapper:placeholder{
    color: var(--text-sidebar-muted);
}

.form-input {
    width: 100%;
    height: var(--input-height);
    padding: var(--margin-xt);
    box-sizing: border-box;
    background: var(--bg-navbar);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    outline: none;
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.form-input:focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-wt);
}

.btn-submit {
    width: 100%;
    height: var(--button-height);
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition:
        background var(--transition-fast),
        transform var(--transition-fast);
}

.btn-submit:hover {
    background: var(--color-primary-dark);
}

.btn-submit:active {
    transform: translateY(1px);
}

.message {
    margin-bottom: var(--margin-tu);
    padding: var(--margin-xp);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.message-error {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

.message-success {
    background: var(--color-success-light);
    color: var(--color-success);
}

.message-success a {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.back-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: var(--margin-ut);
    color: var(--text-link);
    font-size: var(--font-size-md);
    text-decoration: none;
}

.back-login:hover {
    color: var(--text-light);
    font-weight: var(--font-weight-semibold);
}

@media (max-width: 480px) {

    body {
        padding: var(--margin-tr);
    }

    .forgot-card {
        padding: var(--margin-xn);
    }

    .forgot-logo img {
        width: 180px;
    }

    .forgot-title {
        font-size: var(--font-size-2xl);
    }
}