:root{    

    /* Campos de formulário */
    --campofundo: white;
    --campofundohover: var(--cinza220);
    --campotexto: var(--cianoe);
    --campoplaceholder: var(--cinza128);
    --campoborda: var(--corborda);
    --campofoco: var(--cianoe);
    --campofocosuave: var(--cianocc);
    --campovalido: var(--cianoe);
    --campoerro: var(--vermelho);
    --campominaltura: 2rem;
}

/* Campos */

input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):not([type="range"]):not([type="file"]),
select,
textarea{
    display: block;
    width: 100%;
    min-height: var(--campominaltura);
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--campoborda);
    border-radius: var(--radiuspadrao);
    color: var(--campotexto);
    background-color: var(--campofundo);
    caret-color: var(--campotexto);
    font: inherit;
    line-height: 1.3;
    transition: border-color 0.5s ease, box-shadow 0.5s ease, background-color 0.5s ease, color 0.5s ease;
}

input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):not([type="range"]):not([type="file"]):focus,
select:focus,
textarea:focus{
    outline: none;
    color: var(--campotexto);
    background-color: var(--campofundo);
    box-shadow: 0 0 0 3px var(--campofocosuave);
}

textarea{
    min-height: 10rem;
    height: 18rem;
    resize: none;
}

select{
    cursor: pointer;
}

::placeholder{
    color: var(--campoplaceholder);
    opacity: 1;
}

/* Botões nativos de formulário */
input[type="submit"],
input[type="button"],
input[type="reset"]{
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: var(--campominaltura);
    margin: 0;
    padding: 0.65rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radiuspadrao);
    font: inherit;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, color 0.5s ease, filter 0.5s ease;
}

input[type="submit"]:not(.botao):not(.botaoVazado):not(.botaoLinha),
input[type="button"]:not(.botao):not(.botaoVazado):not(.botaoLinha),
input[type="reset"]:not(.botao):not(.botaoVazado):not(.botaoLinha){
    color: white;
    background-color: var(--corcomp);
    border-color: var(--corcomp);
}

input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover{
    filter: brightness(1.08);
}

input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active{
    filter: brightness(0.96);
}

input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible{
    outline: none;
    box-shadow: 0 0 0 3px var(--campofocosuave);
}

input[type="radio"],
input[type="checkbox"]{
    width: 1.1rem;
    height: 1.1rem;
    min-width: 1.1rem;
    min-height: 1.1rem;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: initial;
    background: initial;
    accent-color: var(--campofoco);
    cursor: pointer;
    vertical-align: middle;
    transition: none;
}

input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible{
    outline: 2px solid var(--campofoco);
    outline-offset: 3px;
    box-shadow: none;
}

input[type="radio"]:disabled,
input[type="checkbox"]:disabled{
    opacity: 0.55;
    cursor: not-allowed;
}

input[type="color"]{
    width: 6rem;
    height: 2.8rem;
    padding: 0;
    border: 1px solid var(--campoborda);
    border-radius: var(--radiuspadrao);
    background-color: var(--campofundo);
    cursor: pointer;
}

input[type="color"]::-webkit-color-swatch-wrapper{
    padding: 0;
}

input[type="color"]::-webkit-color-swatch{
    border: none;
    border-radius: var(--radiuspadrao);
}

/* Autofill do Chrome, Edge e Safari */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
textarea:-webkit-autofill{
    -webkit-text-fill-color: var(--campotexto) !important;
    caret-color: var(--campotexto);
    border-color: var(--campofoco) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--campofundo) inset !important;
    box-shadow: 0 0 0 1000px var(--campofundo) inset, 0 0 0 3px var(--campofocosuave);
    transition: background-color 9999s ease-out 0s;
}

.inputPesquisa, .inputSenha{
    position: relative;
    display: flex;
    align-items: center;
}

.inputPesquisa input{
    padding-left: 2.5rem !important;
}

.inputSenha input{
    padding-right: 2.5rem !important;
}

.inputPesquisa .icone12, .inputSenha .icone12{
    position: absolute;
}

.inputPesquisa .icone12{
    left: 0.7rem;
}

.inputSenha .icone12{
    right: 0.7rem;
}

input:focus ~ .icone12 *,
.inputSenha .icone12:hover *, .inputPesquisa .icone12:hover *,
.inputSenha .icone12:focus *, .inputPesquisa .icone12:focus *,
.inputSenha:has(:user-valid) .icone12 *, .inputPesquisa:has(:user-valid) .icone12 *{
    stroke: var(--campofoco);
}

.inputSenha:has(:user-invalid) .icone12 *{
    stroke: var(--campoerro);
}

input[type="search"]::-webkit-search-cancel-button{
    -webkit-appearance: none;
    appearance: none;
}

.inputSocial{
    width: 100%;
    display: flex;
}

.inputSocial .linkRede{
    background-color: var(--campofundohover);
    padding: 0.5rem 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radiuspadrao) 0 0 var(--radiuspadrao);
    border: 1px solid var(--campoborda);
    border-right: none;
    color: var(--corcomp);
    transition: border-color 0.5s, background-color 0.5s ease, color 0.5s ease;
}

.inputSocial:focus-within .linkRede{
    border-color: var(--campofoco);
    background-color: var(--campofundo);
    color: var(--campofoco);
}

.inputSocial input{
    width: 100%;
    border-radius: 0 var(--radiuspadrao) var(--radiuspadrao) 0;
    color: var(--campotexto);
}

.inputReais{
    position: relative;
    display: flex;
    align-items: center;
}

.inputReais input{
    padding-left: 2rem !important;
}

.inputReais::before{
    content: "R$";
    position: absolute;
    left: 0.5rem;
    color: var(--cinza100);
    transition: color 0.5s ease;
}

.inputReais:focus-within::before,
.inputReais:has(:user-valid)::before{
    color: var(--campofoco);
}

label{
    transition: color 0.5s ease;
}

.labelCard{
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--campoborda);
    border-radius: var(--radiuspadrao);
    color: var(--cinza20);
    background-color: white;
    cursor: pointer;
    transition: border-color 0.5s ease, background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}

.labelCard:hover{
    border-color: var(--campofoco);
}

.labelCard input[type="radio"],
.labelCard input[type="checkbox"]{
    position: relative;
    top: 0.12rem;
}

.labelCard:has(input[type="radio"]:checked),
.labelCard:has(input[type="checkbox"]:checked){
    color: var(--campofoco);
    background-color: var(--campofocosuave);
    border-color: var(--campofoco);
}

.labelCard:has(input:focus-visible){
    box-shadow: 0 0 0 3px var(--campofocosuave);
}

.labelCard:not(:has(input[type="radio"]:checked)):not(:has(input[type="checkbox"]:checked)){
    color: var(--cinza100);
    background-color: white;
    border-color: var(--campoborda);
}

.labelCard:has(input:checked) span,
.labelCard:has(input:checked) p{
    color: var(--campofoco);
}

.labelCard:not(:has(input:checked)) span,
.labelCard:not(:has(input:checked)) p{
    color: var(--cinza100);
}

.obrigatorio::after,
.opcional::after{
    display: inline-flex;
}

.obrigatorio::after{
    content: "*";
    color: var(--vermelho);
}

.opcional::after{
    content: "[opcional]";
    color: var(--corcompc);
    font-style: italic;
}

/* Grupos de inputs */

.grupoInput{
    display: grid;
    gap: 0.3rem;
}

.grupoInput:focus-within label{
    color: var(--campofoco);
}

.grupoInput .erro{
    color: var(--campoerro);
    margin-top: 0.3rem;
    display: none;
}

.grupoInput input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):not([type="range"]):not([type="file"]):valid:not(:placeholder-shown),
.grupoInput textarea:valid:not(:placeholder-shown),
.grupoInput select:valid{
    color: var(--campotexto);
    border-color: var(--campovalido);
    background-color: var(--campofundo);
}

/* Campo inválido após interação do usuário */
.grupoInput input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):not([type="range"]):not([type="file"]):user-invalid,
.grupoInput select:user-invalid,
.grupoInput textarea:user-invalid{
    color: var(--campotexto);
    border-color: var(--campoerro);
    background-color: var(--vermelhocc);
}

/* Hover preserva a borda determinada pelo estado */
.grupoInput input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):not([type="range"]):not([type="file"]):valid:not(:placeholder-shown):hover,
.grupoInput textarea:valid:not(:placeholder-shown):hover,
.grupoInput select:valid:hover{
    border-color: var(--campovalido);
}

.grupoInput input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):not([type="range"]):not([type="file"]):user-invalid:hover,
.grupoInput textarea:user-invalid:hover,
.grupoInput select:user-invalid:hover{
    border-color: var(--campoerro);
}

/* Focus adiciona sombra sem mudar a cor da borda */
.grupoInput input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):not([type="range"]):not([type="file"]):valid:not(:placeholder-shown):focus,
.grupoInput textarea:valid:not(:placeholder-shown):focus,
.grupoInput select:valid:focus{
    border-color: var(--campovalido);
}

.grupoInput input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):not([type="range"]):not([type="file"]):user-invalid:focus,
.grupoInput textarea:user-invalid:focus,
.grupoInput select:user-invalid:focus{
    border-color: var(--campoerro);
}

/* Labels acompanham somente o estado do próprio grupo textual */
.grupoInput:has(
    input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):not([type="range"]):not([type="file"]):valid:not(:placeholder-shown)
) > label:not(.labelCard),
.grupoInput:has(textarea:valid:not(:placeholder-shown)) > label:not(.labelCard),
.grupoInput:has(select:valid) > label:not(.labelCard){
    color: var(--campovalido);
}

.grupoInput:has(
    input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):not([type="range"]):not([type="file"]):user-invalid
) > label:not(.labelCard),
.grupoInput:has(select:user-invalid) > label:not(.labelCard),
.grupoInput:has(textarea:user-invalid) > label:not(.labelCard){
    color: var(--campoerro);
}

.grupoInput:has(:user-invalid) .erro{
    display: block;
}

.condicoesSenha{
    list-style: none;
}

.condicoesSenha .invalido{
    color: var(--vermelho) !important;    
}

.condicoesSenha .invalido::before{
    content: "X ";
    color: var(--vermelho) !important;  
}

.condicoesSenha .valido{
    color: var(--verde) !important;
}

.condicoesSenha .valido::before{
    content: "✔ ";
    color: var(--verde) !important;  
}