/* Camada 3: estruturas reutilizáveis de página e responsividade. */
.ui-page {
    width: min(100%, var(--ui-content-max));
    margin-inline: auto;
    padding: clamp(var(--ui-space-3), 1.5vw, var(--ui-space-6));
}

.ui-stack { display: grid; gap: var(--ui-space-4); }
.ui-stack-sm { display: grid; gap: var(--ui-space-2); }
.ui-stack-lg { display: grid; gap: var(--ui-space-6); }

.ui-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-3);
}

.ui-split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-4);
}

.ui-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--ui-space-4);
}

.ui-app-layout {
    display: grid;
    grid-template-columns: minmax(14rem, var(--ui-sidebar-width)) minmax(0, 1fr);
    align-items: start;
    gap: var(--ui-space-6);
}

@media (max-width: 62rem) {
    .ui-app-layout { grid-template-columns: 1fr; }
}

@media (max-width: 47.998rem) {
    .ui-page { padding: var(--ui-space-3); }
    .ui-cluster > .btn,
    .ui-split > .btn { min-height: var(--ui-control-height); }

    /* Conta: a regra responsiva precisa prevalecer sobre o grid legado. */
    .password-layout {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .password-layout > * {
        min-width: 0;
        width: 100%;
    }
}