/* Definindo o estilo do corpo da página */
body {
    color:white;
    font-family: 'Arial', sans-serif;
    background-color: #111; /* Cor de fundo escuro */
    margin: 0;
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;     /* Centraliza verticalmente */
    flex-direction: column;
}
#box_form_cad {
    background-color: #1a1a1a; /* Fundo mais escuro para o formulário */
    padding: 10px;
    border-radius: 10px;
    width: 100%;
    max-width: 500px;  /* Formulário mais largo */
    text-align: center;
    position: relative;
    box-shadow: 0px 0px 20px rgba(0, 255, 0, 0.7), 0px 0px 30px rgba(0, 255, 0, 0.5); /* Sombra hacker */
    animation: sombraHacker 2s infinite alternate; /* Animação de sombra */
    margin-top: 25px; /* Ajuste para ficar no topo */
}
.campos_cada {
    padding: 7px;
    font-size: 1em;
    border: 2px solid #444; /* Borda cinza escura */
    border-radius: 8px;
    margin-bottom: 5px;
    background-color: #333; /* Fundo preto nos campos */
    color: #fff;
    width: 100%; /* Campos ocupando toda a largura disponível */
    max-width: 97%; /* Ajuste para largura máxima */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0px 0px 8px rgba(0, 255, 0, 0.3); /* Efeito de sombra verde hacker */
}

.campos_cada:focus {
    border-color: #00ff00; /* Foco verde hacker */
    outline: none;
    box-shadow: 0px 0px 8px rgba(0, 255, 0, 0.8); /* Sombra do foco */
}

/* Estilo dos botões */
.bt_cada {
    margin:;
    padding: 5px;
    font-size: 1.1em;
    background: linear-gradient(145deg, #00b300, #009900); /* Botão com gradiente realista */
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    margin-bottom: 5px;
}

.bt_cada:hover {
    transform: scale(1.05); /* Efeito de zoom */
    box-shadow: 0px 4px 12px rgba(0, 255, 0, 0.7); /* Sombra mais forte no hover */
    background: linear-gradient(145deg, #009900, #00b300); /* Efeito de troca no gradiente */
}

.bt_cada:active {
    transform: scale(1); /* Efeito de pressionar o botão */
}


/* Caixa principal do formulário */
#box_form {
    margin-top:25px;
    background-color: #1a1a1a; /* Fundo mais escuro para o formulário */
    padding: 20px;
    border-radius: 10px;
    width: 100%;
    max-width: 350px;  /* Formulário mais compacto */
    text-align: center;
    position: relative;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5); /* Sombra realista */
    animation: sombraHacker 2s infinite alternate; /* Animação de sombra */
}

/* Animação da borda hacker */
@keyframes sombraHacker {
    0% {
        box-shadow: 0px 0px 20px rgba(0, 255, 0, 0.7), 0px 0px 30px rgba(0, 255, 0, 0.5);
    }
    50% {
        box-shadow: 0px 0px 30px rgba(0, 255, 0, 1), 0px 0px 50px rgba(0, 255, 0, 0.3);
    }
    100% {
        box-shadow: 0px 0px 20px rgba(0, 255, 0, 0.7), 0px 0px 30px rgba(0, 255, 0, 0.5);
    }
}

/* Título principal */
.titulos {
    margin-top:2px;
    font-size: 1.8em;
    color: #00ff00; /* Verde hacker */
    margin-bottom: 10px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Estilo do formulário */
form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Estilo dos campos de input */
.campos_cad {
    padding: 12px;
    font-size: 1em;
    border: 2px solid #444; /* Borda cinza escura */
    border-radius: 8px;
    margin-bottom: 15px;
    background-color: #333; /* Fundo preto nos campos */
    color: #fff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.campos_cad:focus {
    border-color: #00ff00; /* Foco verde hacker */
    outline: none;
    box-shadow: 0px 0px 8px rgba(0, 255, 0, 0.8); /* Sombra do foco */
}

/* Estilo dos botões */
.bt_cad {
    padding: 12px;
    font-size: 1.1em;
    background: linear-gradient(145deg, #00b300, #009900); /* Botão com gradiente realista */
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    margin-bottom: 2px;
}

.bt_cad:hover {
    transform: scale(1.05); /* Efeito de zoom */
    box-shadow: 0px 4px 12px rgba(0, 255, 0, 0.7); /* Sombra mais forte no hover */
    background: linear-gradient(145deg, #009900, #00b300); /* Efeito de troca no gradiente */
}

.bt_cad:active {
    transform: scale(1); /* Efeito de pressionar o botão */
}



/* Estilo do link "Voltar para página principal" */
.form_link {
    font-size: 0.9em;
    color: #00ff00;
    text-decoration: none;
    transition: color 0.3s ease;
    margin-top:5px;
}

.form_link:hover {
    color: #003300; /* Cor mais escura no hover */
}

/* Estilo do parágrafo do cadastro */
.p_form {
    font-size: 0.9em;
    color: #ccc; /* Texto mais suave */
    margin-top: 10px;
}

/* Ajuste para alinhar o botão "Voltar" à esquerda */
.voltar_botao {
    display: inline-flex;
    align-items: center; /* Alinha o ícone e o texto na vertical */
    justify-content: flex-start; /* Alinha o conteúdo à esquerda */
    padding: 15px 25px; /* Tamanho maior do botão */
    background-color: #333;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1.2em;
    margin-top: 20px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); /* Sombra mais suave */
    margin-left: 0; /* Alinha o botão à esquerda */
    position: relative; /* Pode ser útil para ajustar o posicionamento mais precisos */
}

/* Efeito hover para o botão "Voltar" */
.voltar_botao:hover {
    background-color: #444;
    transform: scale(1.05); /* Efeito de aumentar o botão */
}

/* Estilo para o ícone dentro do botão */
.voltar_botao i {
    margin-right: 10px; /* Espaço entre ícone e texto */
}


/* Ajuste no link de fazer login para parecer com um botão */
.form_link {
    margin-top:1px;
    color: #fff; /* Cor do texto dentro do "botão" */
    font-size: 1.2em;
    text-decoration: none;
    padding: 5px 5px; /* Adiciona mais espaçamento para o formato de botão */
    background-color: green; /* Cor de fundo */
    border-radius: 8px; /* Bordas arredondadas */
    display: inline-block; /* Faz o link se comportar como um bloco, permitindo padding e margin */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Efeitos ao passar o mouse */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Sombra suave */
}

/* Efeito hover para o link de login */
.form_link:hover {
    background-color: #007BFF; /* Altera a cor de fundo ao passar o mouse */
    color: #fff; /* Mantém a cor do texto branca */
    text-decoration: none; /* Remove o sublinhado ao passar o mouse */
    transform: scale(1.05); /* Efeito de aumento no botão */
}

.custom-file-upload {
        background-color: #4CAF50; /* Cor de fundo verde */
        color: white;              /* Cor do texto */
        padding: 10px 20px;        /* Espaçamento */
        border-radius: 5px;        /* Bordas arredondadas */
        cursor: pointer;          /* Muda o cursor para uma mãozinha */
        text-align: center;        /* Alinha o texto ao centro */
    }
    
    /* Opcional: mudar o estilo quando o mouse estiver sobre o botão */
    .custom-file-upload:hover {
        background-color: #45a049;
    }


/* Responsividade: Ajustar para telas menores */
@media (max-width: 768px) {
    #box_form {
        padding: 20px;
    }

    .titulos {
        font-size: 1.6em;
    }

    .campos_cad {
        font-size: 1em;
    }

    .bt_cad {
        font-size: 1em;
    }
}

/* Responsividade para dispositivos móveis */
@media (max-width: 480px) {
    body {
        padding: 10px;
    }

    #box_form {
        padding: 15px;
        width: 100%;
        max-width: 90%;
    }

    .titulos {
        font-size: 1.4em;
    }

    .campos_cad {
        font-size: 0.9em;
    }

    .bt_cad {
        font-size: 1em;
    }

    .form_link {
        font-size: 0.8em;
    }

    .p_form {
        font-size: 0.9em;
    }
}