/* ooptIA · Web.App — layouts SEM o shell (08-design-system §4).
     .wz   _LayoutWizard: contratação e passo a passo A1–A9 (mockups .wz: painel 36% web / 34% tablet; faixa no celular)
     O portal do cliente (_LayoutPublico) NÃO usa esta folha: o CSS dele vai embutido no próprio layout. */

/* ---------- faixa "sem internet" (mesma do shell) ---------- */
.offline-bar {
    display: none; align-items: center; gap: var(--sp-2); flex: none;
    padding: 8px 18px;
    background: var(--amber-soft); color: var(--amber-text);
    border-bottom: 1px solid var(--amber);
    font-size: 12.5px;
}
:root[data-offline="true"] .offline-bar { display: flex; }

/* ---------- passo a passo ---------- */
.wz { display: flex; min-height: 100vh; min-height: 100dvh; background: var(--surface); overflow-x: hidden; }
.wz-l {
    width: 36%; flex: none;
    background: radial-gradient(520px 420px at 30% 20%, var(--azulPasso), var(--navy));
    color: var(--sobreNoite); padding: 26px 24px;
    display: flex; flex-direction: column; gap: 12px;
}
.wz-l .wm { font-size: 30px; color: var(--sobreNoite); }
.wz-l h1 { font-size: 21px; line-height: 1.2; }
.wz-l p { margin: 0; color: var(--sobreNoiteLegenda); font-size: 13px; }
.wz-l .say { background: var(--sobreNoiteDivisor); border: 1px solid var(--sobreNoiteBorda); border-radius: 14px 14px 14px 4px; padding: 10px 12px; font-size: 13px; }
.wz-l .ot-full { align-self: center; margin-top: auto; }
.wz-r { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wz-steps { display: flex; gap: 6px; padding: 26px 30px 0; }
.wz-steps i { flex: 1; height: 5px; border-radius: 9px; background: var(--mist); }
.wz-steps i.on { background: var(--blue); }
.wz-steps i.ok { background: var(--ok); }
.wz-b { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 30px 26px; display: flex; flex-direction: column; gap: 12px; max-width: 720px; width: 100%; }
.wz-f { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); padding: 12px 30px; border-top: 1px solid var(--line); background: var(--surface); }
.wz-f > :first-child:not(:last-child) { margin-right: auto; }

@media (min-width: 1100px) {
    .wz { height: 100vh; height: 100dvh; }
}
@media (min-width: 600px) and (max-width: 1099.98px) {
    .wz { height: 100vh; height: 100dvh; }
    .wz-l { width: 34%; }
    .wz-steps { padding: 22px 24px 0; }
    .wz-b { padding: 16px 24px 22px; }
    .wz-f { padding: 12px 24px; }
}
@media (max-width: 599.98px) {
    .wz { flex-direction: column; }
    .wz-l { width: auto; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; flex-direction: row; align-items: center; gap: 10px; }
    .wz-l .wm { font-size: 22px; }
    .wz-l h1, .wz-l p, .wz-l .say { display: none; }
    .wz-l .ot-full { margin: 0 0 0 auto; width: 44px; height: 56px; }
    .wz-steps { padding: 14px 14px 0; }
    .wz-b { padding: 14px; gap: 10px; }
    .wz-f { position: sticky; bottom: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); }
}