.form-grid {
    display: grid;
    /* minmax(0, 1fr): la columna no crece con el ancho natural de los inputs. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    max-width: 640px;
}

.form-grid > * {
    min-width: 0;
}

.form-field {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.form-field label {
    font-size: var(--fs-xs);
    font-weight: 600;
}

.form-field input,
.form-field textarea,
.form-field select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-size: var(--fs-sm);
    color: var(--color-text);
}

.form-field input[type="checkbox"],
.form-field input[type="radio"] {
    width: auto;
    padding: 0;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    border-color: var(--color-primary);
}

.form-field textarea {
    resize: vertical;
    min-height: 140px;
}

.form-error {
    color: var(--color-danger);
    font-size: var(--fs-2xs);
}

.form-hint {
    color: var(--color-text-muted);
    font-size: var(--fs-2xs);
}

.alert {
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    margin-bottom: var(--space-6);
}

.alert--success {
    background: rgba(20, 108, 67, 0.1);
    color: var(--color-success);
    border: 1px solid rgba(20, 108, 67, 0.25);
}

.alert--danger {
    background: rgba(184, 5, 16, 0.08);
    color: var(--color-danger);
    border: 1px solid rgba(184, 5, 16, 0.25);
}

/* Zona de arrastrar-y-soltar. El <label> envuelve el input real (oculto)
   por lo que clic/tecla Enter abren el selector nativo sin JavaScript;
   el drag & drop es una mejora progresiva encima de eso. */
.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-10) var(--space-6);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--duration-fast) var(--ease-editorial),
                background-color var(--duration-fast) var(--ease-editorial);
}

.dropzone:hover,
.dropzone:focus-within {
    border-color: var(--color-primary);
    background: rgba(10, 31, 137, 0.03);
}

.dropzone.is-dragover {
    border-color: var(--color-accent);
    background: rgba(227, 6, 19, 0.05);
}

.dropzone__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dropzone__icon {
    color: var(--color-primary);
}

.dropzone__text {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-text);
}

.dropzone__hint {
    font-size: var(--fs-2xs);
    color: var(--color-text-muted);
}

.dropzone__submit {
    margin-top: var(--space-4);
}

/* Honeypot anti-spam: oculto visualmente y a lectores de pantalla */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Filas de dos campos (definidas inline en las vistas): se apilan en móvil. */
@media (max-width: 560px) {
    .form-grid > div[style*="grid-template-columns"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}