/* Signup flow (/asociarse, /asociarse/exito, /asociarse/cancelado).
   Page-local layout; all colour/size values reference design tokens. */

.signup {
    max-width: var(--mt-form-max);
    margin: 0 auto;
    padding: var(--mt-space-8) var(--mt-space-4);
}

.signup h1 {
    margin-top: 0;
}

.signup__intro {
    color: var(--mt-color-text-secondary);
}

.signup__required-mark {
    color: var(--mt-color-danger);
}

.signup__group {
    border: 1px solid var(--mt-color-border);
    border-radius: var(--mt-radius-md);
    margin-bottom: var(--mt-space-6);
    padding: var(--mt-space-4);
}

.signup__group legend {
    padding: 0 var(--mt-space-2);
    font-family: var(--mt-font-heading);
    font-weight: var(--mt-weight-bold);
    font-size: var(--mt-text-h5);
}

.signup__field {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--mt-space-4);
}

.signup__field label {
    font-weight: var(--mt-weight-medium);
    font-size: var(--mt-text-sm);
    color: var(--mt-color-text-secondary);
    margin-bottom: var(--mt-space-1);
}

.signup__field input,
.signup__field textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: var(--mt-space-3) var(--mt-space-4);
    border: 1px solid var(--mt-color-border-input);
    border-radius: var(--mt-radius-sm);
    font-size: var(--mt-text-base);
    font-family: var(--mt-font-body);
    color: var(--mt-color-ink);
    background-color: var(--mt-color-surface);
}

.signup__field input::placeholder,
.signup__field textarea::placeholder {
    color: var(--mt-color-text-muted);
}

.signup__field input:focus,
.signup__field textarea:focus {
    border-color: var(--mt-color-ink);
    outline: var(--mt-focus-outline);
    outline-offset: var(--mt-focus-offset);
    box-shadow: var(--mt-focus-ring);
}

.signup__field--checkbox label {
    display: flex;
    align-items: flex-start;
    gap: var(--mt-space-2);
    font-weight: var(--mt-weight-regular);
    font-size: var(--mt-text-base);
    color: var(--mt-color-ink);
}

.signup__field--checkbox input {
    width: auto;
    min-height: 0;
    margin-top: var(--mt-space-1);
    accent-color: var(--mt-color-gold-active);
}

.signup__error {
    color: var(--mt-color-danger);
    font-size: var(--mt-text-sm);
    min-height: 1.2em;
    margin-top: var(--mt-space-1);
}

.signup__error--warning {
    color: var(--mt-color-warning);
}

/* The non-blocking NIF/CIF hint. Its own element rather than the error one, so a real error can
   sit beside it instead of overwriting it. */
.signup__warning {
    color: var(--mt-color-warning);
    font-size: var(--mt-text-sm);
    margin-top: var(--mt-space-1);
}

/* The billing block revealed by unticking the coincidence checkbox. Indented against the rule so
   it reads as belonging to the checkbox above it, and inheriting the group's own spacing so the
   three fields sit exactly like every other field on the page — including at 380px, where the
   inputs are already full-width and nothing here adds a fixed dimension. */
.signup__billing {
    margin-top: var(--mt-space-4);
    padding-left: var(--mt-space-4);
    border-left: 2px solid var(--mt-color-border);
}

.signup__billing[hidden] {
    display: none;
}

.signup__submit {
    display: flex;
    align-items: center;
    gap: var(--mt-space-4);
    flex-wrap: wrap;
    margin-top: var(--mt-space-6);
}

.signup__submit button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--mt-color-gold);
    color: var(--mt-color-ink);
    border: 1.5px solid var(--mt-color-gold);
    border-radius: var(--mt-radius-md);
    padding: var(--mt-space-3) var(--mt-space-6);
    font-family: var(--mt-font-body);
    font-size: var(--mt-text-base);
    font-weight: var(--mt-weight-medium);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.signup__submit button:hover {
    background-color: var(--mt-color-gold-hover);
    border-color: var(--mt-color-gold-hover);
}

.signup__submit button:disabled {
    background-color: var(--mt-color-disabled-bg);
    border-color: var(--mt-color-disabled-bg);
    color: var(--mt-color-disabled-text);
    cursor: not-allowed;
}

.signup__status {
    color: var(--mt-color-text-secondary);
}

.signup__status--error {
    color: var(--mt-color-danger);
}

.signup__success {
    border: 1px solid var(--mt-color-border);
    border-left: 3px solid var(--mt-color-gold);
    border-radius: var(--mt-radius-md);
    padding: var(--mt-space-6);
    background-color: var(--mt-color-surface-2);
}

.signup__contact {
    margin-bottom: 0;
}

@media (max-width: 380px) {
    .signup {
        padding: var(--mt-space-4) var(--mt-space-3);
    }

    .signup__group {
        padding: var(--mt-space-3);
    }
}