/* WMS Framework 1.0.1 — instalador web */
.wms-installer {
    min-height: 100vh;
    padding: clamp(1rem, 4vw, 3rem);
    background:
        radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--wms-color-primary) 12%, transparent), transparent 32rem),
        var(--wms-color-background);
}

.wms-installer__container {
    width: min(100%, 78rem);
    margin-inline: auto;
}

.wms-installer__brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wms-space-4);
    margin-bottom: var(--wms-space-8);
}

.wms-installer-card {
    width: min(100%, 42rem);
    margin: clamp(2rem, 10vh, 8rem) auto 0;
    padding: clamp(1.5rem, 5vw, 3rem);
    border: 1px solid var(--wms-color-border);
    border-radius: var(--wms-radius-2xl);
    background: var(--wms-color-surface);
    box-shadow: var(--wms-shadow-lg);
}

.wms-installer-card h1 { margin-top: var(--wms-space-3); }
.wms-installer-card > p { margin-top: var(--wms-space-3); }
.wms-installer-card .wms-alert { margin-top: var(--wms-space-5); }
.wms-installer-card .wms-form { margin-top: var(--wms-space-6); }

.wms-installer-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--wms-space-8);
    align-items: end;
    padding: clamp(1.75rem, 5vw, 3rem);
    border: 1px solid var(--wms-color-border);
    border-radius: var(--wms-radius-2xl);
    color: var(--wms-color-text-inverse);
    background: var(--wms-color-surface-inverse);
    overflow: hidden;
}

.wms-installer-hero p {
    max-width: 48rem;
    margin-top: var(--wms-space-3);
    color: color-mix(in srgb, currentColor 74%, transparent);
}

.wms-installer-steps {
    display: grid;
    gap: var(--wms-space-2);
    font-size: var(--wms-font-size-sm);
    font-weight: var(--wms-font-weight-semibold);
}

.wms-installer-steps span {
    padding: .45rem .7rem;
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius: var(--wms-radius-sm);
    background: color-mix(in srgb, currentColor 7%, transparent);
}

.wms-installer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wms-space-5);
}

.wms-installer-checks {
    display: grid;
    gap: var(--wms-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wms-installer-checks li {
    display: flex;
    gap: var(--wms-space-3);
    align-items: center;
    padding: var(--wms-space-3);
    border: 1px solid var(--wms-color-border);
    border-radius: var(--wms-radius-sm);
    background: var(--wms-color-surface-muted);
}

.wms-installer-checks li.is-ok .wms-icon { color: var(--wms-color-success); }
.wms-installer-checks li.is-error .wms-icon { color: var(--wms-color-danger); }
.wms-installer-checks span { display: grid; gap: .15rem; }
.wms-installer-checks small { color: var(--wms-color-text-muted); }

.wms-installer-complete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--wms-space-6);
    padding: clamp(1.5rem, 5vw, 3rem);
    border: 1px solid color-mix(in srgb, var(--wms-color-success) 38%, var(--wms-color-border));
    border-radius: var(--wms-radius-xl);
    background: color-mix(in srgb, var(--wms-color-success) 7%, var(--wms-color-surface));
}

.wms-installer-complete p {
    max-width: 48rem;
    margin-top: var(--wms-space-2);
    color: var(--wms-color-text-muted);
}

.wms-installer-complete .wms-form { width: auto; margin: 0; }

@media (max-width: 64rem) {
    .wms-installer-hero { grid-template-columns: 1fr; }
    .wms-installer-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wms-installer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 40rem) {
    .wms-installer { padding-inline: var(--wms-space-3); }
    .wms-installer__brand { align-items: flex-start; flex-direction: column; }
    .wms-installer-steps { grid-template-columns: 1fr; }
    .wms-installer-complete { align-items: stretch; flex-direction: column; }
    .wms-installer-complete .wms-form,
    .wms-installer-complete .wms-button { width: 100%; }
}


.wms-installer-card--narrow {
    width: min(100%, var(--wms-container-sm));
    margin-inline: auto;
}