/* =====================================================================
   AGGalvão · Componente — Formulários
   ===================================================================== */

.campo { margin-bottom: 1rem; }
.campo label, .rotulo {
    display: block;
    font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--cinza);
    margin-bottom: .35rem;
}
.campo input[type="text"], .campo input[type="email"], .campo input[type="password"],
.campo input[type="number"], .campo input[type="date"], .campo input[type="search"],
.campo select, .campo textarea,
input.controle, select.controle {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio);
    font: inherit;
    font-size: .86rem;
    color: var(--texto);
    background: #fff;
    transition: border-color .12s, box-shadow .12s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus,
input.controle:focus, select.controle:focus {
    outline: none;
    border-color: var(--vermelho);
    box-shadow: 0 0 0 3px rgba(181, 8, 8, .1);
}
.campo textarea { min-height: 80px; resize: vertical; }
/* Dois seletores de classe + input: vencem input.controle { width: 100% } (o atributo style vencia tudo). */
input.controle.controle-codigo { width: 110px; }
input.controle.controle-numero { width: 66px; text-align: right; }
.campo.campo-curto { flex: 0 0 140px; }
input.controle-cor {
    width: 60px; height: 38px; padding: 2px;
    border: 1px solid var(--borda-forte); border-radius: var(--raio); cursor: pointer;
}
.ajuda { font-size: .72rem; color: var(--cinza); }
.campo .ajuda { font-size: .72rem; color: var(--cinza); margin-top: .3rem; }
.campo-linha { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.campo-checkbox { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: 1rem; }
.campo-checkbox input { margin-top: .2rem; width: 15px; height: 15px; accent-color: var(--vermelho); }
.campo-checkbox label { text-transform: none; letter-spacing: 0; font-size: .84rem; color: var(--texto); margin: 0; font-weight: 500; }

.form-acoes {
    display: flex; gap: .6rem; flex-wrap: wrap;
    padding-top: 1rem; margin-top: .25rem;
    border-top: 1px solid var(--borda);
}
.obrigatorio { color: var(--vermelho); }