/* Contenedor blanco del formulario. */
.contenido-formulario {
    max-width: 760px;
    margin-bottom: 56px;
    padding: 28px;
    background-color: white;
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

/* Elimina el borde predeterminado de fieldset y separa grupos. */
fieldset {
    margin: 0 0 24px;
    padding: 0;
    border: 0;
}

/* Título de cada conjunto de campos. */
legend {
    width: 100%;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-borde);
    font-size: 1.2rem;
    font-weight: 700;
}

/* Cada campo usa Flexbox vertical. */
.formulario-campos {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

/* Apariencia compartida de controles del formulario. */
input,
select,
textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #aeb3b8;
    border-radius: 6px;
    background-color: white;
    font: inherit;
}

/* Resalta el control activo para navegación y accesibilidad. */
input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-principal);
    outline: 3px solid rgba(198, 40, 40, 0.18);
}

/* Los radios se presentan en una fila flexible. */
.opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.opciones label {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Radios y checkbox no deben ocupar el 100% del ancho. */
.opciones input,
.campo-checkbox input {
    width: auto;
}

/* Checkbox y texto quedan alineados horizontalmente. */
.campo-checkbox {
    flex-direction: row;
    align-items: flex-start;
}

.label-grupo {
    font-weight: 500;
}

small {
    color: #5f6368;
}

/* Reserva un espacio visible para el resultado del formulario. */
.mensaje-formulario {
    min-height: 24px;
    margin: 16px 0 0;
    font-weight: 700;
}

/* Clase que JavaScript agrega cuando la validación es exitosa. */
.mensaje-formulario.exito {
    color: #1b5e20;
}

/* Clase que JavaScript agrega si encuentra un error. */
.mensaje-formulario.error {
    color: #b71c1c;
}

/* En celular se reduce el espacio interno. */
@media (max-width: 600px) {
    .contenido-formulario {
        padding: 20px;
    }
}