:root {
    --cor-shadow: #090605;
    --cor-textoPla: #1b1919;
    --cor-fundo: #051224;
    --cor-card: #2A1810;
    --cor-detalhes: #C5A059;
    --cor-destaque: #5A6473; 
    --cor-texto: #E8D9B5;
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

* {
    box-sizing: border-box; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {  
    display: flex;
    flex-direction: column;
    min-height: 100VH;
    background-color: var(--cor-fundo);
}

::placeholder{
    color: var(--cor-textoPla);
    font-family:'Courier New';
}
#logo-img{
    width: 31rem;
    height: 12.5rem;
}


#principal{
    flex: 1;
    
}

#tela__inventario, #tela__cadastro{
    display: none;
}
#div__sair{
    display: flex;
    justify-content:flex-end;
}
#botao__sair{
    border: none;
    background-color: var(--cor-card);
    color:var(--cor-texto);
    border-radius: 0.6em;
    padding: 0.48rem;
    cursor: pointer;
    transition: 0.3;
}

#botao__sair:hover{
    background-color: var(--cor-texto);
    color: var(--cor-fundo);
    transform: scale(1.05)
}
#tela__inventario__geral {
    display: flex;
    flex-direction: column;
    float: right;
    color: var(--cor-texto);
    margin: 2.5rem;
    background-color: var(--cor-card);
    gap: 1.8rem;
    border-radius: 1.5em;
    padding: 1.8rem 3.125rem 1.8rem 3.125rem;
    box-shadow: 9px 9px 8px var(--cor-shadow);
}

#principal__texto{
    margin: 0rem 0rem 0rem 1.28rem;
}

.campo__grupo, .campo__grupo__nome{
    background-color: var(--cor-card);
    display: flex;
    gap: 1.2rem;
    justify-content: space-between;
}



#nome__item, #qtd__item{
    background-color: var(--cor-texto);
    padding: 0.18rem;
    border: none;
    border-radius: 0.5em;
}

#botao__adicionar{

    border: 2px solid var(--cor-detalhes);
    background-color: var(--cor-card);
    color:var(--cor-texto);
    border-radius: 0.6em;
    padding: 0.18rem;
    cursor: pointer;
    transition: 0.3;
    
}
#botao__adicionar:hover{
    background-color: var(--cor-texto);
    color: var(--cor-fundo);
    transform: scale(1.05)
}

.item-lista {
    color: whitesmoke;
    background-color: var(--cor-card);
    border-left: 5px solid var(--cor-texto); 
    padding: 1.25rem 1rem 1.25rem 1rem;
    margin: 0.6rem;
    border-radius: 0.6em;
    max-width: 43%;
    width: 100%;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3); 
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}

.coluna-nome {
    width: 30%; 
    display: flex;
    gap: 2rem;
}

.coluna-qtd {
    width: 35%; 
    display: flex;
    gap: 2rem;
}



.botao-remover {
    background-color: #8B1A1A; 
    color:var(--cor-texto);
    border: none;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5em;
    cursor: pointer;
    transition: 0.3s; 
}

.botao-remover:hover {
    background-color: #c0392b; 
    transform: scale(1.05);    
}


.texto-destaque{
    color: var(--cor-texto);
}

#principal__busca{
    max-width: 43%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
    margin: 5rem 0rem 0rem 2.8rem;
}

#input__busca{
    width: 60%;
    background-color: var(--cor-card);
    color: var(--cor-texto);
    border: none;
    border-radius: 0.5rem;
    padding: 0.3rem;

}

#input__busca::placeholder {
    padding: 0.3rem;
    background-color: var(--cor-card);
    color: var(--cor-texto);
    border-radius: 0.5rem;
}

#botao__busca{
    color: var(--cor-texto);
    background-color: var(--cor-card);
    border: none;
    border-radius: 0.5rem;
    padding: 0.7rem;
}

.mensagem-vazia {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 40%;
    padding: 2.5rem;
    border: 0.1rem dashed var(--cor-detalhes);     
    border-radius: 1.5em;
    color: var(--cor-texto);
    text-align: center;
    opacity: 0.8;
    font-style: italic;
    font-size: 1.1rem;
    margin-top: 1.5rem;
}

#mensagem__login{
    font-size: 1rem;
}

#form__login{
    width: 35%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--cor-texto);
    margin: 1.5rem auto;
    background-color: var(--cor-card);
    gap: 1.8rem;
    border-radius: 1.5em;
    padding: 1.8rem 3.125rem 1.8rem 3.125rem;
    box-shadow: 9px 9px 8px var(--cor-shadow);
}

#campo__cadastro__user,#campo__login__user,#campo__cadastro__email,#campo__login___email{
    width: 100%;
        
}

#campo__cadastro__senha, #campo__login__senha{
    width: 100%;
    position: relative;
}

#frase__user, #frase__senha, #frase__email{
    margin: 0.5rem;
}

#tela__login__user, #tela__login__senha,#tela__cadastro__senha, #tela__cadastro__email, #tela__cadastro__user{
    
    width: 100%;
    padding: 0.5rem;
    border-radius: 0.4rem;
    border: 0.1rem solid var(--cor-detalhes);
    background-color: var(--cor-detalhes);
    font: 'Courier New';
}

#botao__olho__cadastro,#botao__olho__login{
    position: absolute;
    background: transparent;
    border: none;
    bottom: 0.5rem;
    right: 0.5rem;
    cursor: pointer;

}

#botao__entrar, #botao__cadastrar{
    width: 100%;
    font-size: 1rem;
    border: 0.1rem solid var(--cor-detalhes);
    background-color: var(--cor-card);
    color:var(--cor-texto);
    border-radius: 0.6em;
    padding: 0.5rem;
    cursor: pointer;
    transition: 0.3;
}

#tela__login__botoes{
    gap: 3rem;  
}

#tela__login__ou::before, #tela__login__ou::after{
    content: "";
    display: inline-block;
    width: 45%;
    height: 0.1rem;
    background-color: var(--cor-texto);
}



#tela__login__visitante{
    margin: 0rem 0rem 0rem 2.2rem;

    cursor: pointer;
    border: none;
    background-color: var(--cor-card);
    color: var(--cor-detalhes);
}

#tela__cadastro__visitante{
    cursor: pointer;
    border: none;
    background-color: var(--cor-card);
    color: var(--cor-detalhes);
}

#tela__login__cadastre-se{
    margin: 0rem 0rem 0rem 2rem;
    cursor: pointer;
    border: none;
    background-color: var(--cor-card);
    color: var(--cor-detalhes);
}
#mensagem__cadastro{
    text-align: center;
    font-size: 1rem;
}
#form__cadastro{
    width: 35%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--cor-texto);
    margin: 0.5rem auto;
    background-color: var(--cor-card);
    gap: 1.8rem;
    border-radius: 1.5em;
    padding: 1.8rem 3.125rem 1.8rem 3.125rem;
    box-shadow: 9px 9px 8px var(--cor-shadow);

}

#rodape{
    font-size: 0.8rem;
    color: var(--cor-detalhes);
    text-align: center;
}

#link{
    color: var(--cor-detalhes);
}

@media (max-width: 1024px) {

    #logo{
       display:none;
    }

    #tela__inventario__geral {
        width: 50%;
        float: none;      
        margin: 1.2rem auto;
    }

    .campo__grupo__nome{
        gap: 3.6rem;
    }

    .item-lista {
        max-width: 85%;
    }

    .coluna-nome, .coluna-qtd {
        width: 100%;
        gap: 0.5rem; 
    }

    #principal__busca{
        max-width: 50%;

    }

    .mensagem-vazia{
        max-width: 100%;

    }

    #mensagem__login{
        text-align: center;
        font-size: 1.3rem;
    }

    #form__login{
        width: 60%;
    }

    #tela__login__botoes{
        gap: 0rem;
    }

    #form__cadastro{
        width: 60%;
    }

}

@media(max-Width: 768px){
    
    #tela__inventario__geral{
        width: 70%;
    }

    #principal__busca{  
        margin: 5rem 0rem 0rem 0.4rem;
        max-width: 95%;

    }
    #mensagem__login{
        font-size: 1rem;
    }
    #form__login{
        gap: 1.3rem;
        width: 70%;
    }
    #tela__login__botoes{
        display: flex;
        gap: 1rem;
    }
    #tela__login__visitante, #tela__cadastro__visitante, #tela__login__cadastre-se{
        margin: 0rem;
        font-size: 1rem;
        padding: 0rem;
    }

    
    #tela__login__ou{
        display: none;
    }

    #form__cadastro{
        width: 80%;
    }
}

@media(max-width: 480px){

    #principal{
    flex: 0.7;
    
    }
    #tela__inventario__geral{
        width: 80%;
        margin: none;
        padding: 1.5rem 2rem 1.5rem 2rem;

    }

    .campo__grupo, .campo__grupo__nome{
        gap: 1rem;
        flex-direction: column;
        align-items: flex-start;

    }
    
    #nome__item, #qtd__item{
            width: 100%;
    }
    .campo__grupo{
        gap: 0.7rem;
    }

    #principal__busca{
        justify-content: start;
        font-size: 0.2rem;
        gap: 0.1rem;
        width: 100%;
        margin: 3rem 0rem 0rem 1rem;

    }
    #botao__busca{
        padding: 0.3rem;
        font-size:0.6rem;
        width: 18%;
    }
    #input__busca{
        width: 70%;
        font-size: 0.6rem;
    }

    #principal__texto{
        font-size: 0.8em;
        margin: 0rem;
    }

    .item__lista{
        max-width: 0rem;
        padding: 0rem 0rem 0rem 0rem;
        width: 100%;
    }

    .coluna-nome, .coluna-qtd {
        font-size: 0.8rem;
        width: 100%;
        gap: 0.3rem; 
    }

    .botao-remover{
        margin-left: 0.2rem;
        padding: 0.3rem;
        font-size: 0.8rem;
    }
    
    .mensagem-vazia{
        margin: 0rem;
    }

    #form__login{
        gap: 1rem;
        width: 90%;
    }

    #form__cadastro{
        margin: 2.5rem auto;
        gap: 1rem;
        width: 90%;
    }


}