@import url(root.css);

main {
    min-height: 100vh;
}

a[href] {
    text-decoration: none;
    color: var(--cor-branco);
}

#logo img {
    width: 12rem;
}

#logo small {
    margin: 0.1rem 0 0.8rem;
}

#logo:hover small {
    color: var(--cor-verde-claro);
}

#menu-login {
    width: 30%; 
    min-width: 390px;
    min-height: 100vh;
    background-color: var(--cor-verde-escuro);
    border-right: 0.4rem solid var(--cor-verde-claro);
    font-family: var(--font-primaria);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

#slogan {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 5rem;
}

#slogan:hover {
    color: var(--cor-verde-claro);
}

#usuario,
#senha {
    width: 18.85rem;
    font-size: 0.95rem;
    padding: 0.4rem 3.4rem 0.4rem 2rem;
    outline: none;
    border-radius: 0.2rem;
    border: 1px solid var(--cor-cinza-claro);
    color: var(--cor-cinza-escuro);
}

#recaptcha {
    width: 18.7rem;
    margin: 0 0.17rem 0 0;
}

#entrar-btn {
    background-color: transparent;
    color: var(--cor-verde-claro);    
    text-align: center;
    border: transparent solid;
    border-radius: 0.2rem;
    cursor: pointer;
    outline: 3px solid var(--cor-verde-claro);
    padding: 0.1rem 1rem;
    margin: 1.2rem 0;
}

#entrar-btn:not(:disabled):hover {
    background-color: var(--cor-verde-claro);
    color: var(--cor-branco);
    font-weight: 700;
    text-align: center;
    outline: 3px solid var(--cor-branco);    
}

#links-login {
    font-size: 0.85rem;
}

#links-login a,
#links-login i {
    color: var(--cor-cinza-claro);
    cursor: default;
}

#links-login a:hover,
#links-login i:hover {
    color: var(--cor-verde-claro);
}

#footer {
    display: flex;
    gap: 3rem;
}

#background-index {
    background-image: url(../img/backgroundconstrucao.jpg);
    background-size: cover;
    background-position: right; 
    background-repeat: no-repeat;
    flex: 1;
}

#icone-usuario {
    position: absolute;
    left: 10px;
    top: 52%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    z-index: 100;
}

#icone-senha {
    position: absolute;
    left: 10px;
    top: 25%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    transform: scaleY(1.7);
    z-index: 100;
}

#icone-visualizar-senha {
    position: absolute;
    right: 10px;
    top: 25%;
    font-size: 1.2rem;
    z-index: 99;
}

.form input{
    text-align: center;
    width: 18.85rem;
    font-size: 0.95rem;
    padding: 0.4rem 2rem;
    outline: none;
    border-radius: 0.2rem;
    color: var(--cor-cinza-escuro);
}

.input-padrao {
    border: 1px solid var(--cor-cinza-claro);
    background-color: var(--cor-branco);
}

.input-padrao:focus {
    outline: 1.5px solid var(--cor-cinza-claro);
}

.input-erro {
    border: 1px solid var(--cor-erro) !important; 
    background-color: var(--background-erro);
}

.input-erro:focus {
    outline: 1.5px solid var(--cor-erro) !important; 
}

.input-check {
    border: 1px solid var(--cor-check) !important; 
    background-color: var(--background-check);
}

.input-check:focus {
    outline: 1.5px solid var(--cor-check) !important; 
}
form .input-group {
    display: flex;
    flex-direction: column;
    position: relative;
}

#icone-erro-usuario,
#icone-check-usuario, 
#icone-erro-senha, 
#icone-check-senha {
    position: absolute;
    right: 10px; /* Ajuste conforme necessário */
    top: 50%;
    transform: translateY(-50%);
    opacity: 0; /* Inicialmente invisível */
    visibility: hidden; /* Inicialmente não interage */
    font-size: 1.2rem;
}

#icone-erro-usuario,
#icone-erro-senha {  
    display: flex;
    align-items: center;
    color: var(--cor-erro);
    z-index: 100; 
}

#mensagem-erro-usuario,
#mensagem-erro-senha {
    width: 17rem;
    text-align: center;
    position: absolute;
    right: 0.2rem;    
    visibility: hidden;
    z-index: 98;
    color: var(--cor-erro);
    background-color: var(--background-erro);
    font-size: 0.7rem;
    font-family: var(--font-primaria);    
}
#mensagem-erro-usuario {
    top: 5%;
    padding: 0.5rem 3rem 0.5rem 0.5rem;
}

#mensagem-erro-senha {
    top: 125%;
    padding: 0.5rem 3.4rem 0.5rem 0.5rem;
}

#icone-check-usuario,
#icone-check-senha {
    color: var(--cor-check);
}

.login-error-message {
   
    text-align: center;
    color: var(--cor-erro);
    background-color: var(--background-erro);
    width: 18.85rem;
    font-size: 0.75rem;
    border-radius: 0.2rem;
    border: 1px solid var(--cor-erro);
    visibility: hidden; /* Inicialmente não visível */
    display: block; /* Garante que sempre ocupe espaço */
    min-height: 1.2rem;
    margin-block: 0.3rem;
    padding-block: 0;
    
    
}