/**
 * ============================================================================
 * MEUSISTEMA
 * ============================================================================
 * MDA-009 — Recuperação de Senha
 * Arquivo: recuperar_senha.css
 * ----------------------------------------------------------------------------
 * Objetivo:
 * Folha de estilos exclusiva do módulo de recuperação de senha.
 *
 * Responsável por:
 *
 * - Formulário de recuperação;
 * - Formulário de nova senha;
 * - Mensagens;
 * - Botões;
 * - Responsividade.
 *
 * Compatível:
 * - Desktop
 * - Tablet
 * - Mobile
 *
 * Projeto:
 * MEUSISTEMA
 *
 * Versão:
 * 1.0.0
 *
 * ============================================================================
 */


/* ============================================================================
   Descrição inicial
===============================================================================

Este arquivo complementa o index.css.

O objetivo é evitar alterações no layout principal
da tela de login.

============================================================================ */


/* ============================================================================
   Texto auxiliar
============================================================================ */


.descricao {

    color: #666;

    font-size: 14px;

    line-height: 1.6;

    margin-bottom: 20px;

}



/* ============================================================================
   Campos do formulário
============================================================================ */


.campo {

    width: 100%;

    margin-bottom: 18px;

    text-align: left;

}



.campo label {


    display: block;

    margin-bottom: 8px;

    font-size: 14px;

    font-weight: 600;

    color: #333;


}



.campo label i {


    margin-right: 6px;

    color: #2563eb;


}



.campo input {


    width: 100%;

    height: 42px;

    padding: 0 12px;

    border: 1px solid #d1d5db;

    border-radius: 6px;

    font-size: 14px;

    outline: none;

    transition: .3s;


}



.campo input:focus {


    border-color: #2563eb;

    box-shadow: 0 0 0 3px rgba(37,99,235,.15);


}



/* ============================================================================
   Botão principal
============================================================================ */


.btn-principal {


    width: 100%;

    height: 45px;

    border: none;

    border-radius: 6px;

    background: #2563eb;

    color: #fff;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition: .3s;


}



.btn-principal i {


    margin-right: 6px;


}



.btn-principal:hover {


    background: #1d4ed8;


}





/* ============================================================================
   Mensagens de retorno
============================================================================ */


.mensagem-feedback {


    width: 100%;

    padding: 12px;

    margin-bottom: 20px;

    border-radius: 6px;

    background: #eff6ff;

    border: 1px solid #bfdbfe;

    color: #1e40af;

    font-size: 14px;

    line-height: 1.5;


}





/* ============================================================================
   Área de ações
============================================================================ */


.acoes {


    margin-top: 20px;

    text-align: center;


}



.acoes a {


    color: #2563eb;

    font-size: 14px;

    text-decoration: none;

    font-weight: 500;


}



.acoes a:hover {


    text-decoration: underline;


}





/* ============================================================================
   Mensagem de erro / bloqueio de token
============================================================================ */


.alerta {


    background: #fef2f2;

    border: 1px solid #fecaca;

    color: #991b1b;

    padding: 15px;

    border-radius: 6px;

    font-size: 14px;


}





/* ============================================================================
   Link de recuperação inválido
============================================================================ */


.link-voltar {


    display: inline-block;

    margin-top: 15px;

    color: #2563eb;

    text-decoration: none;

}





/* ============================================================================
   Responsividade Mobile
============================================================================ */


@media(max-width:600px){



    .campo input {


        height: 44px;

        font-size: 16px;


    }



    .btn-principal {


        height: 48px;

        font-size: 16px;


    }



    .descricao {


        font-size: 13px;


    }



}