:root {
    /* Tons de Azul */
    --azul-escuro: #2F3D5B;        /* Fundo escuro, textos fortes */
    --azul-medio: #45516B;         /* Fundo intermediário, botões */
    --azul-claro: #C2D4E2;         /* Fundo suave, destaques leves */
    --cinza-azulado: #E6E9EF;      /* Fundo geral ou containers */
    --cinza-medio: #a2a1a1;        /* Texto suave*/
    --cinza-suave: #c8c8c8;        /* Fundo suave*/
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

button, a {
    touch-action: manipulation;
}

input, select, textarea {
    font-size: 16px;
}

body{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 12px;
    color: var(--nome);
    background-color: var(--cinza-azulado);
    line-height: 1.5;
}

html, body {
    height: 100%;
    overflow-x: hidden;
}

main {
    display: flex;
    align-items: baseline;
    justify-content: center;
    padding: 10px;
    gap: 10px;
    min-height: 100%;
    width: 100%;
    background-color: var(--cinza-azulado);
}

.layout{
    margin-top: 0px;
}

.fundo{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: baseline;
    max-width:100%;
    gap: 20px;
    background-color: var(--cinza-azulado);
}

.cabecalho{
    display: flex;
    flex-direction: column;
    align-items:baseline;
    justify-content: center;
    background: linear-gradient(80deg, #0050FF 0%, #00C6FF 100%);
    color: white;
    padding: 20px;
    box-shadow: 0px 4px 20px rgba(0,0,0,0.15);
    border-radius:20px;
}

.nome_empresa {
    width: 100%;
    text-align: left;
}

.sub_cabecalho{
    width: 100%;
    text-align: left;
}

.corpo{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: white;
    padding:20px;
    border-radius: 10px ;
    gap: 20px;
    box-shadow: 0px 4px 20px rgba(0,0,0,0.15);
}

.enunciado{
    width: 100%;
    text-align: left;
}

.enunciado p{
    color: var(--cinza-medio);
}

.cad_btn_frames{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background-color: var(--cinza-suave);
    padding: 4px;
    border-radius: 20px;
    width: 100%;
}

.cad_btn_frames button{
    background-color: var(--cinza-suave);
    border-radius: 20px;
    border: none;
    width: 50%;
    height: 35px;
    color: rgba(0, 0, 0, 0.774);
}

.cad_btn_frames button:hover{
    background-color: white;
    color: var(--cinza-medio);
}

.cad_novo, .cad_existente{
    width: 100%;
}

.input_cad_novo, .input_cad_existente{
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: baseline;
    width: 100%;
    gap: 10px;
}

.campo_inputs{
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: baseline;
    gap: 5px;
    width: 100%;
}

.campo_inputs input{
    border: 1px solid var(--cinza-suave);
    border-radius: 8px;
    width: 100%;
    height: 35px;
    padding: 8px;
    font-size: 14px;
}

.botao_continuar{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.botao_continuar button{
    background: linear-gradient(80deg, #0050FF 0%, #00C6FF 100%);
    border-radius: 20px;
    border: none;
    width: 50%;
    height: 35px;
    color: white;
    width: 100%;
}