/* =====================================================================
   ooptIA · Web.App — Componentes Oo* parte 2 (task 7206, doc 08 §5.5–§5.7, §6.2, §6.3, §6.6, §7)
   Entrada de dados, janelas, etapas, wizard e estados. TagHelpers em Components/Ui
   (EntradaTagHelpers, FluxosTagHelpers, EstadosTagHelpers); comportamento em wwwroot/app/js/forms.js.
   Só tokens de tokens.css. Pontos de quebra do shell: web ≥ 1100 · tablet 600–1099 · celular < 600.
   ===================================================================== */

/* ---------- OoCampo ---------- */
.oo-fld { position: relative; }
.oo-fld > label { display: flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.oo-req { color: var(--bad-text); font-weight: 700; }
.fld .oo-in {
    display: flex; align-items: center; gap: 7px; padding: 0 10px; min-height: 38px;
    border: 1px solid var(--line); background: var(--surface); border-radius: 9px; overflow: visible; white-space: normal;
    transition: border-color .12s var(--ease), box-shadow .12s var(--ease), background-color .12s var(--ease);
}
.fld .oo-in:hover { border-color: var(--line-strong); }
.fld .oo-in:focus-within { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue); }
.fld .oo-in > input, .fld .oo-in > textarea {
    flex: 1; min-width: 0; border: 0; background: none; padding: 8px 0; min-height: 36px; box-shadow: none; outline: none; border-radius: 0;
}
.fld .oo-in > input:focus, .fld .oo-in > textarea:focus { box-shadow: none; border: 0; }
.fld .oo-in > input::placeholder, .fld .oo-in > textarea::placeholder { color: var(--subtle); }
.fld .oo-in.oo-in-area { align-items: flex-start; }
.fld .oo-in > textarea { resize: vertical; min-height: 76px; line-height: 1.4; }
.oo-in svg.ic { width: 17px; height: 17px; flex: none; color: var(--muted); }
.oo-in .oo-in-warn { color: var(--amber-text); }
.oo-in .kbd { flex: none; }
.oo-in-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: -6px; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer; flex: none; }
.oo-in-btn:hover { background: var(--hover-veil); color: var(--ink); }
.oo-in-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; box-shadow: none; }
.oo-in-date { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; right: 12px; bottom: 0; }
/* origem: lido (Otto, foto, CEP, CNPJ) e com dúvida */
.fld .oo-in.auto { background: var(--auto-soft); border-color: var(--auto-line); }
.fld .oo-in.warn { background: var(--amber-soft); border-color: var(--amber); }
/* números à direita, com a fonte de exibição */
.oo-in [data-oo-tipo="dinheiro"], .oo-in [data-oo-tipo="grau"], .oo-in [data-oo-tipo="percentual"] { font-variant-numeric: tabular-nums; }
.oo-in [data-oo-tipo="dinheiro"] { text-align: right; font-family: var(--display); font-weight: 600; }
.oo-in [data-oo-tipo="grau"] { text-align: right; }
/* erro: o que fazer, em erroTexto, ligado ao campo (aria-describedby) */
.oo-fld-err { display: flex; align-items: flex-start; gap: 5px; font-size: 11.5px; color: var(--bad-text); line-height: 1.35; }
.oo-fld-err:empty { display: none; }
.oo-fld-err svg.ic { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.fld.is-invalid .oo-in, .fld .oo-in:has([aria-invalid="true"]) { border-color: var(--bad); background: var(--surface); }
.fld.is-invalid .oo-in:focus-within, .fld .oo-in:has([aria-invalid="true"]):focus-within { box-shadow: 0 0 0 2px var(--bad); }
/* desativado e só leitura */
.fld.is-disabled .oo-in, .fld .oo-in:has(input:disabled) { background: var(--mist); color: var(--subtle); border-color: var(--line); }
.fld .oo-in:has(input[readonly]) { background: var(--bg); }
.oo-busca-r .kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }

/* ---------- grade de formulário ---------- */
.oo-form-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); }
.oo-form-g > .oo-col-2 { grid-column: 1 / -1; }
@media (max-width: 599.98px) { .oo-form-g { grid-template-columns: minmax(0, 1fr); } }

/* ---------- OoOpcao ---------- */
.oo-opts { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.oo-legend { font-size: 11.5px; color: var(--muted); font-weight: 600; padding: 0; margin-bottom: 2px; }
.opt { position: relative; transition: border-color .12s var(--ease), background-color .12s var(--ease); min-height: 44px; }
.opt:hover { background-image: linear-gradient(var(--hover-veil), var(--hover-veil)); }
.opt .oo-opt-in { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.opt:has(.oo-opt-in:checked) { border-color: var(--blue); background-color: var(--blue-soft); }
.opt:has(.oo-opt-in:checked) i { border-color: var(--blue); background: radial-gradient(var(--blue) 45%, var(--surface) 50%); }
.opt:has(.oo-opt-in:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.opt .opt-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.opt .opt-t small { font-size: 11.5px; color: var(--muted); }
.opt .opt-v { margin-left: auto; font-family: var(--display); font-weight: 700; white-space: nowrap; }
.opt.is-disabled { opacity: .55; cursor: not-allowed; }
.oo-opts.is-invalid .opt { border-color: var(--bad); }
/* Documento fiscal "perguntar na hora": o aviso some quando alguém escolhe. */
.oo-opts:has(.oo-opt-in:checked) + [data-fiscal-escolha] { display: none; }

/* ---------- OoChave ---------- */
.oo-sw { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; }
.oo-sw-t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.oo-sw-l { font-family: var(--display); font-weight: 600; font-size: 13px; }
.oo-sw-t small { font-size: 11.5px; color: var(--muted); }
.sw { transition: background-color .12s var(--ease); }
.sw:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; box-shadow: none; border-radius: 99px; }
.sw[disabled] { opacity: .5; cursor: not-allowed; }
/* área de toque de 44 sem mudar o desenho de 34 × 20 */
.sw::before { content: ""; position: absolute; inset: -12px -6px; }

/* ---------- OoCheck / OoPermissaoLinha ---------- */
.ck { width: 17px; height: 17px; border-radius: 5px; border: 2px solid var(--line-strong); flex: none; display: inline-grid; place-items: center; color: var(--sobrePrimaria); font-size: 11px; line-height: 1; transition: background-color .12s var(--ease), border-color .12s var(--ease); }
.ck.on, .oo-ck-in:checked + .ck { background: var(--blue); border-color: var(--blue); }
.ck.on::after, .oo-ck-in:checked + .ck::after { content: "✓"; }
.ck.lock, .oo-ck-in:checked + .ck.lock { background: var(--line-strong); border-color: var(--line-strong); }
.ck.lock::after { content: "✓"; }
.perm { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 12.5px; min-height: 40px; cursor: pointer; position: relative; }
.perm .perm-t { display: flex; flex-direction: column; min-width: 0; }
.perm .perm-t b { font-weight: 600; }
.perm .perm-t small { color: var(--muted); font-size: 11.5px; }
.oo-ck-in { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.oo-ck-in:focus-visible + .ck { outline: 2px solid var(--blue); outline-offset: 2px; }
.perm.is-lock { cursor: default; color: var(--muted); }
.perm.is-disabled { cursor: not-allowed; opacity: .55; }

/* ---------- OoBusca (com resultados agrupados) ---------- */
.oo-busca-r { position: relative; }
.oo-busca-r input { padding-right: 34px; }
.oo-busca-res {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: var(--z-popover);
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md);
    max-height: min(420px, 60vh); overflow: auto; padding: 6px;
}
.oo-busca-res[hidden] { display: none; }
.oo-busca-g { font-family: var(--display); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 8px 8px 4px; }
.oo-busca-i { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-sm); cursor: pointer; color: inherit; text-decoration: none; min-height: 40px; }
.oo-busca-i .t { min-width: 0; flex: 1; }
.oo-busca-i .t b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oo-busca-i .t span { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oo-busca-i .v { font-family: var(--display); font-size: 12.5px; white-space: nowrap; }
.oo-busca-i:hover, .oo-busca-i[aria-selected="true"] { background: var(--blue-soft); }
.oo-busca-i mark { background: none; color: var(--blue-text); font-weight: 700; }
.oo-busca-m { padding: 12px 10px; font-size: 12.5px; color: var(--muted); }
/* RN-EST-045: a linha limpa da busca de produto: miniatura, nome, cor e tamanho, preço e o estoque com a cor dele. */
.oo-selp-i { gap: 12px; padding: 8px; min-height: 56px; }
.oo-selp-i + .oo-selp-i { border-top: 1px solid var(--line); border-radius: 0; }
.oo-selp-i:hover, .oo-selp-i[aria-selected="true"] { border-radius: var(--r-sm); }
.oo-selp-foto {
    flex: none; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; display: grid; place-items: center;
    background: var(--bg, #f3f6fb); color: var(--muted); font-family: var(--display); font-weight: 700; font-size: 16px; text-transform: uppercase;
}
.oo-selp-foto.tem-foto { background: #fff; }
.oo-selp-foto img { width: 100%; height: 100%; object-fit: contain; }
.oo-selp-i .t b { font-size: 13.5px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.oo-selp-i .t span { font-size: 12px; margin-top: 1px; }
.oo-selp-dir { flex: none; display: grid; justify-items: end; gap: 3px; }
.oo-selp-dir .v { font-size: 13px; font-weight: 700; }
.oo-selp-est { font-size: 11px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.oo-selp-est::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.oo-selp-est.is-tem { color: var(--ok-text); }
.oo-selp-est.is-ultimo { color: var(--amber-text); }
.oo-selp-est.is-sem { color: var(--muted); }
.oo-selp-i.is-sem .oo-selp-foto, .oo-selp-i.is-sem .t, .oo-selp-i.is-sem .v { opacity: .55; }

/* ---------- janela (ooAbrir) ---------- */
.oo-ov { align-items: center; padding: var(--sp-4); }
.oo-ov.is-in { animation: oo-veu-in .18s var(--ease); }
.oo-ov.is-out { animation: oo-veu-out .12s ease-in forwards; }
.oo-modal { display: flex; flex-direction: column; padding: 0; overflow: hidden; width: 640px; }
.oo-modal.is-larga { width: 880px; max-width: calc(100vw - 2 * var(--sp-4)); }
.oo-ov.is-in .oo-modal { animation: oo-janela-in .18s var(--ease); }
.oo-ov.is-out .oo-modal { animation: oo-janela-out .12s ease-in forwards; }
.oo-modal-h { display: flex; align-items: flex-start; gap: var(--sp-3); padding: 22px 24px 0; }
.oo-modal-h > div { flex: 1; min-width: 0; }
.oo-modal-h h2 { font-size: 21px; }
.oo-modal-h p { color: var(--muted); font-size: 13px; margin-top: 3px; }
.oo-modal-x { margin: -4px -8px 0 0; }
.oo-modal-b { padding: 16px 24px; overflow: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.oo-modal-a { display: flex; gap: var(--sp-2); justify-content: flex-end; padding: 14px 24px 20px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.oo-modal-a:empty { display: none; }
.oo-modal-q { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin: 0 24px 0; padding: 10px 12px; border-radius: 12px; background: var(--amber-soft); color: var(--amber-text); font-size: 13px; border: 1px solid var(--amber); }
.oo-modal-q b { flex: 1; min-width: 14ch; font-family: var(--display); }
.oo-modal-q[hidden] { display: none; }
@keyframes oo-veu-in { from { opacity: 0; } }
@keyframes oo-veu-out { to { opacity: 0; } }
@keyframes oo-janela-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes oo-janela-out { to { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes oo-folha-in { from { transform: translateY(100%); } }
@keyframes oo-folha-out { to { transform: translateY(100%); } }
/* travar a rolagem da página com janela aberta */
html.oo-sem-rolagem, html.oo-sem-rolagem body { overflow: hidden; }

@media (max-width: 599.98px) {
    /* celular: folha de baixo (ou tela cheia) */
    .oo-ov { align-items: end; padding: 0; place-items: end stretch; }
    .oo-modal, .oo-modal.is-larga { width: 100%; max-width: 100%; border-radius: var(--r-xl) var(--r-xl) 0 0; max-height: 92dvh; }
    .oo-modal::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--line-strong); margin: 8px auto 0; flex: none; }
    .oo-ov.is-in .oo-modal { animation: oo-folha-in .18s var(--ease); }
    .oo-ov.is-out .oo-modal { animation: oo-folha-out .12s ease-in forwards; }
    .oo-modal-h { padding: 12px 16px 0; }
    .oo-modal-h h2 { font-size: 18px; }
    .oo-modal-b { padding: 12px 16px; }
    .oo-modal-a { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
    .oo-modal-a .btn { flex: 1; height: 48px; }
    .oo-modal-q { margin: 0 16px; }
    .oo-ov.is-cheia .oo-modal { height: 100dvh; max-height: 100dvh; border-radius: 0; }
    .oo-ov.is-cheia .oo-modal::before { display: none; }
    .oo-ov.is-cheia .oo-modal-h { padding-top: 16px; }
}

/* ---------- OoEtapas ---------- */
.oo-steps { list-style: none; margin: 0; padding: 0; flex-wrap: wrap; row-gap: 6px; }
.oo-steps .st-sep { display: flex; align-items: center; }
.oo-steps .st-b { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 2px 4px 2px 0; margin: -2px 0; color: inherit; font: inherit; cursor: pointer; border-radius: var(--r-pill); }
.oo-steps .st-b:hover span { text-decoration: underline; }
.oo-steps .st-b:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; box-shadow: none; }
.oo-steps .st.done { color: var(--ink); }
@media (max-width: 599.98px) {
    .oo-steps .st-sep em { width: 10px; }
}

/* ---------- OoPergunta ---------- */
.oo-ask { text-align: center; }
.oo-ask-t { font-size: 22px; }
.oo-ask .ask { margin-top: 16px; }
.oo-ask .ask > a, .oo-ask .ask > button { transition: transform .06s, background-image .12s; }
.oo-ask .ask > a:hover, .oo-ask .ask > button:hover { background-image: linear-gradient(var(--hover-veil), var(--hover-veil)); }
.oo-ask .ask > a:focus-visible, .oo-ask .ask > button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; box-shadow: none; border-radius: 18px; }
.oo-ask .ask small.ask-f { margin-top: 6px; }
.oo-ask-r { margin-top: 14px; font-size: 13px; color: var(--muted); }

/* ---------- OoBarraDeAcoes ---------- */
.oo-foot { display: flex; align-items: center; gap: 10px; padding-top: var(--sp-3); border-top: 1px solid var(--line); margin-top: var(--sp-2); }
.oo-foot > .btn:last-child { margin-left: 0; }
.oo-foot .foot-tt { margin-right: auto; display: flex; flex-direction: column; }
.oo-foot .foot-tt span { font-size: 11px; color: var(--muted); }
.oo-foot .foot-tt b { font-family: var(--display); font-size: 18px; letter-spacing: -0.02em; }
.oo-foot .foot-sec { display: flex; align-items: center; gap: var(--sp-2); margin-right: auto; position: relative; }
.oo-foot .foot-tt + .foot-sec { margin-right: 0; }
.foot-sec .foot-sec-i { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.foot-sec .foot-more { display: none; }
.oo-foot > [hidden] { display: none !important; }
@media (max-width: 599.98px) {
    .oo-foot.is-fixa {
        position: sticky; bottom: 0; z-index: var(--z-sticky);
        margin: var(--sp-2) calc(-1 * var(--sp-3)) 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: var(--surface); border-top: 1px solid var(--line);
    }
    .oo-foot > .btn:not(.foot-more) { height: 48px; }
    .oo-foot > .btn[type="submit"], .oo-foot > .btn:last-child { flex: 1; }
    .oo-foot .foot-sec { order: -1; margin-right: 0; }
    .oo-foot .foot-tt { order: -2; }
    .foot-sec .foot-more { display: inline-grid; place-items: center; width: 48px; height: 48px; }
    .foot-sec .foot-sec-i {
        display: none; position: absolute; bottom: calc(100% + 8px); left: 0; min-width: 220px; z-index: var(--z-popover);
        flex-direction: column; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md);
    }
    .foot-sec.is-open .foot-sec-i { display: flex; }
    .foot-sec .foot-sec-i .btn { width: 100%; justify-content: flex-start; height: 44px; }
}

/* ---------- OoOQueVaiAcontecer ---------- */
.oo-what > b { display: flex; align-items: center; gap: 6px; }
.oo-what > b svg.ic { width: 16px; height: 16px; color: var(--blue-text); }
.what-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; transition: opacity .12s; }
.what-l.is-busy { opacity: .55; }
.what-i { display: flex; align-items: flex-start; gap: 8px; line-height: 1.35; }
.what-i svg.ic { width: 16px; height: 16px; flex: none; color: var(--blue-text); margin-top: 1px; }
.what-i.what-alerta svg.ic { color: var(--amber-text); }
.what-t { flex: 1; min-width: 0; }
.what-v { font-family: var(--display); white-space: nowrap; display: inline; margin: 0; }

/* ---------- OoWizard ---------- */
.oo-wz { display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; min-height: 560px; }
.oo-wz .wl {
    width: 36%; flex: none; color: var(--sobreNoite); padding: 26px 24px; display: flex; flex-direction: column; gap: 12px;
    background: radial-gradient(520px 420px at 30% 20%, var(--navy-2), var(--navy));
}
.oo-wz .wl .wm { font-size: 30px; color: var(--sobreNoite); }
.oo-wz .wl-h { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.2; letter-spacing: -0.02em; }
.oo-wz .wl-p { color: var(--side-text); font-size: 13px; }
.oo-wz .say { background: var(--sobreNoiteDivisor); border: 1px solid var(--sobreNoiteBorda); border-radius: 14px 14px 14px 4px; padding: 10px 12px; font-size: 13px; color: var(--sobreNoite); }
.oo-wz .wl-otto { align-self: center; margin-top: auto; }
.oo-wz .wl-otto-sm { display: none; }
.oo-wz .wr { flex: 1; min-width: 0; padding: 26px 30px; display: flex; flex-direction: column; gap: 12px; }
.oo-wz .wsteps { display: flex; gap: 6px; }
.oo-wz .wsteps i { flex: 1; height: 5px; border-radius: 9px; background: var(--mist); }
.oo-wz .wsteps i.on { background: var(--blue); }
.oo-wz .wsteps i.ok { background: var(--ok); }
.oo-wz .wz-passo { font-size: 11.5px; color: var(--muted); font-family: var(--display); font-weight: 600; }
.oo-wz .wz-t { font-size: 20px; }
.oo-wz .wz-s { margin: -6px 0 2px; color: var(--muted); font-size: 13px; }
.oo-wz .wz-c { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.oo-wz .wz-c > form { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.oo-wz .oo-foot { margin-top: auto; }
.price { font-family: var(--display); font-weight: 800; font-size: 34px; letter-spacing: -0.03em; }
.price small { font-size: 13px; font-weight: 600; color: var(--muted); }
.oo-wz .wl .price small { color: var(--side-text); }
@media (max-width: 1099.98px) {
    .oo-wz .wl { width: 34%; }
    .oo-wz .wr { padding: 22px 24px; }
}
@media (max-width: 599.98px) {
    .oo-wz { flex-direction: column; border-radius: 0; border: 0; min-height: 0; }
    .oo-wz .wl { width: auto; padding: 14px 16px; flex-direction: row; align-items: center; gap: 10px; }
    .oo-wz .wl .wm { font-size: 22px; }
    .oo-wz .wl-h, .oo-wz .wl-p, .oo-wz .say, .oo-wz .wl-otto { display: none; }
    .oo-wz .wl-otto-sm { display: block; margin-left: auto; }
    .oo-wz .wr { padding: 14px; gap: 10px; }
    .oo-wz .wz-t { font-size: 17px; }
}

/* ---------- padrão 6.2: formulário em etapas ---------- */
.oo-fe-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.oo-fe-body { display: grid; gap: var(--sp-3); align-items: start; }
.oo-fe-step { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.oo-fe-step[hidden] { display: none; }
.oo-fe-h { font-size: 17px; outline: none; }
.oo-fe-resumo { position: sticky; top: var(--sp-3); }
@media (max-width: 599.98px) {
    .oo-fe-resumo { display: none; } /* celular: o total vai para a barra de ações */
}

/* ---------- padrão 6.3: detalhe com abas ---------- */
.oo-da { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.oo-da-h { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.oo-da-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.oo-da-tt h2 { font-size: 21px; }
.oo-da-tt .sub { color: var(--muted); font-size: 12.5px; }
.oo-da-acoes { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.oo-da-acoes .foot-sec { display: flex; align-items: center; gap: var(--sp-2); position: relative; }
.oo-da-acoes .foot-sec .foot-sec-i { display: flex; gap: var(--sp-2); }
@media (max-width: 599.98px) {
    .oo-da-h { gap: var(--sp-2); }
    .oo-da-tt h2 { font-size: 18px; }
    .oo-da-acoes { position: absolute; right: 0; top: 0; }
    .oo-da { position: relative; }
    .oo-da-acoes .foot-sec .foot-sec-i {
        /* bottom/flex-wrap: desfaz o "abre para cima" da barra de ações (regra de .foot-sec acima) — com top E bottom o menu ficava sem altura. */
        display: none; position: absolute; top: calc(100% + 6px); bottom: auto; right: 0; left: auto; min-width: 220px; z-index: var(--z-popover); flex-wrap: nowrap;
        flex-direction: column; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md);
    }
    .oo-da-acoes .foot-sec.is-open .foot-sec-i { display: flex; }
    .oo-da-acoes .foot-sec .foot-more { display: inline-grid; }
    .oo-da-acoes .foot-sec .foot-sec-i .btn { width: 100%; justify-content: flex-start; height: 44px; }
    /* a ação principal vai para a barra de ações, acima da barra inferior */
    .oo-da-principal {
        position: fixed; left: 0; right: 0; bottom: var(--bnav-h); z-index: var(--z-float);
        padding: 10px 12px; background: var(--surface); border-top: 1px solid var(--line);
    }
    .oo-da-principal .btn { width: 100%; height: 48px; }
    .oo-da:has(.oo-da-principal) { padding-bottom: 72px; }
}

/* ---------- padrão 6.6: janela de confirmação ---------- */
.oo-cf { display: flex; flex-direction: column; gap: var(--sp-4); }
.oo-cf-b { display: flex; flex-direction: column; gap: 4px; }

/* ---------- OoVazio ---------- */
.oo-vazio { gap: 10px; padding: var(--sp-6) var(--sp-4); }
.oo-vazio-otto { display: block; }
.oo-vazio .btn { margin-top: 4px; }
.oo-vazio.is-compacto { flex-direction: row; text-align: left; flex-wrap: wrap; padding: var(--sp-4); gap: var(--sp-3); }
.oo-vazio.is-compacto h3 { font-size: 15px; }

/* ---------- OoEsqueleto (mesma forma do conteúdo final; brilho de 1,1 s) ---------- */
.oo-sk .skel { display: block; height: 12px; border-radius: 6px; animation-duration: 1.1s; }
.oo-sk-in { display: flex; flex-direction: column; gap: 10px; }
.oo-sk-linha .skel:nth-child(2n) { width: 82%; }
.oo-sk-linha .skel:nth-child(3n) { width: 64%; }
.oo-sk .s-xs { width: 40%; height: 10px; }
.oo-sk .s-sm { width: 55%; height: 10px; }
.oo-sk .s-num { width: 70%; height: 22px; margin: 4px 0; }
.oo-sk .s-h { width: 45%; height: 16px; margin-bottom: 6px; }
.oo-sk .s-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.oo-sk .s-btn { width: 72px; height: 30px; border-radius: var(--r-sm); flex: none; }
.oo-sk .s-btn-lg { width: 140px; height: 38px; margin-top: 6px; }
.oo-sk .s-in { height: 38px; border-radius: 9px; }
.oo-sk .s-av { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.oo-sk .s-r { justify-self: end; width: 60%; }
.oo-sk-kpi { display: flex; flex-direction: column; gap: 4px; min-height: 70px; }
.oo-sk-kpi.tot { background: var(--navy); }
.oo-sk-kpi.tot .skel { opacity: .25; }
.oo-sk-li { display: flex; align-items: center; gap: 10px; min-height: 52px; border-top: 1px solid var(--line); }
.oo-sk-li:first-child, .card > .s-h + .oo-sk-li { border-top: 0; }
.oo-sk-li > span { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.oo-sk-tr { display: grid; grid-template-columns: 2fr 1.2fr 1fr 1fr; gap: 16px; align-items: center; height: 40px; padding: 0 10px; border-top: 1px solid var(--line); }
.oo-sk-th { background: var(--surface-sunken); border-top: 0; border-radius: var(--r-sm) var(--r-sm) 0 0; }
.oo-sk-fld { display: flex; flex-direction: column; gap: 6px; }
.oo-sk-head { display: flex; align-items: center; gap: 12px; }
.oo-sk-head > span { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.oo-sk-tabs { display: flex; gap: 16px; padding: 6px 0 10px; border-bottom: 1px solid var(--line); }
.oo-sk-tabs .skel { width: 72px; }
.oo-sk .card { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 599.98px) {
    .oo-sk-tr { grid-template-columns: 2fr 1fr; }
    .oo-sk-tr > :nth-child(2), .oo-sk-tr > :nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .oo-sk .skel { animation: none; } }

/* ---------- OoErro (no lugar do bloco que falhou) ---------- */
.oo-falha { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 14px; border-radius: var(--r-lg); background: var(--bad-soft); border: 1px solid var(--bad); color: var(--ink); }
.oo-falha-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--surface); color: var(--bad-text); flex: none; }
.oo-falha-ic svg.ic { width: 18px; height: 18px; }
.oo-falha-t { flex: 1; min-width: 18ch; display: flex; flex-direction: column; gap: 2px; }
.oo-falha-t b { font-family: var(--display); font-size: 14px; color: var(--bad-text); }
.oo-falha-t span { font-size: 12.5px; }
.oo-falha-a { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }

/* ---------- OoSemPermissao ---------- */
.oo-negado { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: var(--sp-6) var(--sp-4); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
.oo-negado-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--mist); color: var(--muted); }
.oo-negado-ic svg.ic { width: 26px; height: 26px; }
.oo-negado h3 { font-size: 17px; }
.oo-negado p { color: var(--muted); max-width: 44ch; font-size: 13px; }

/* ---------- OoToast (ooAvisar) ---------- */
.oo-toasts { position: fixed; left: 50%; bottom: var(--sp-6); transform: translateX(-50%); z-index: var(--z-toast); width: max-content; max-width: calc(100% - 32px); pointer-events: none; }
.oo-toast {
    display: flex; align-items: center; gap: 12px; pointer-events: auto;
    background: var(--navy); color: var(--sobreNoite); border-radius: 12px; padding: 10px 12px 10px 16px; font-size: 13px;
    box-shadow: var(--shadow-md); animation: oo-toast-in .18s var(--ease);
}
.oo-toast.out { opacity: 0; transform: translateY(6px); transition: opacity .12s, transform .12s; }
.oo-toast .oo-toast-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: none; }
.oo-toast.is-verde .oo-toast-dot { display: block; background: var(--ok); }
.oo-toast.is-vermelho .oo-toast-dot { display: block; background: var(--bad); }
.oo-toast .oo-toast-t { flex: 1; min-width: 0; }
.oo-toast button, .oo-toast a { border: 0; background: none; color: var(--cyan); font-family: var(--display); font-weight: 700; font-size: 13px; cursor: pointer; padding: 6px 8px; border-radius: var(--r-sm); text-decoration: none; }
.oo-toast button:hover, .oo-toast a:hover { background: var(--sobreNoiteRealce); }
.oo-toast button:focus-visible, .oo-toast a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; box-shadow: none; }
@keyframes oo-toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 599.98px) { .oo-toasts { bottom: calc(var(--bnav-h) + var(--sp-3)); width: calc(100% - 24px); } }

/* ---------- OoAvisoSemInternet ---------- */
.oo-offline { display: flex; align-items: center; gap: 8px; padding: 8px var(--sp-4); background: var(--amber-soft); color: var(--amber-text); border-bottom: 1px solid var(--amber); font-size: 12.5px; font-weight: 600; }
.oo-offline svg.ic { width: 16px; height: 16px; flex: none; }
.oo-offline.is-fila { background: var(--mist); color: var(--muted); border-bottom-color: var(--line); }
.oo-offline[hidden] { display: none; }
.app-main > .oo-offline { position: sticky; top: var(--top-h); z-index: var(--z-sticky); }

/* atributo hidden vence o display dos componentes (ex.: "Voltar" na primeira etapa) */
.btn[hidden], .oo-sw[hidden], .oo-fld[hidden] { display: none !important; }