/* =====================================================================
   field.css — App de Campo (colaboradoras de limpeza / pátio de lavagem)
   Celular barato, 4G fraco, luva, sol na tela, pressa.
   Prioridades: velocidade, certeza, zero confusão. Sem enfeite que custe.
   - Toques ≥ 56px, texto ≥ 16px, contraste alto, nada depende de hover.
   - Uma ação principal por tela, fixa no rodapé (zona do polegar).
   - Seletores sob .field-app ou com prefixo .fx- (não briga com styles.css).
   ===================================================================== */

.field-app {
  --fx-pad: 24px;
  --fx-tap: 56px;
  --fx-ease: var(--ease-out, cubic-bezier(.2, .8, .2, 1));
  --fx-spring: cubic-bezier(.34, 1.56, .64, 1);
  --fx-surface: var(--surface, #fff);
  --fx-ink: var(--ink, #14171E);
  --fx-muted: var(--gray-600, #434A58);
  --fx-line: var(--line, #D9E0EC);
}
@media (max-width: 460px) { .field-app { --fx-pad: 16px; } }
.field-app .stepwrap { padding: var(--fx-pad); }

/* ---------- legibilidade ao sol ---------- */
.field-app .step-title { font-size: 15px; font-weight: 700; letter-spacing: .01em; text-transform: none; color: var(--fx-muted); margin-bottom: 8px; }
.field-app .big-q { font-size: clamp(24px, 6.4vw, 30px); font-weight: 700; color: var(--fx-ink); line-height: 1.2; margin: 10px 0 14px; text-wrap: balance; }
.field-app .big-q.fx-q-sm { font-size: clamp(21px, 5.6vw, 25px); }
.field-app .field-hint { font-size: 17px; line-height: 1.45; color: var(--fx-muted); margin: 0 0 18px; text-wrap: pretty; }
.field-app .field-hint b { color: var(--fx-ink); }
.field-app .btn { min-height: var(--fx-tap); font-size: 16px; }
.field-app .btn.big { min-height: 68px; font-size: 19px; }
.field-app .btn.ghost { color: var(--fx-ink); border-color: var(--gray-300, #BFC8D7); }
.field-app input:not([type=checkbox]):not([type=radio]):not([type=file]),
.field-app select, .field-app textarea { font-size: 17px; min-height: 52px; }
.field-app .field label { font-size: 15px; color: var(--fx-muted); }
.field-app .pick { min-height: 52px; font-size: 16px; }
.field-app .pt-tag .n { font-size: clamp(26px, 7vw, 32px); }
.field-app .pt-tag .m { font-size: 13px; }
.field-app .last-info { font-size: 15px; }
.field-app .review-note { font-size: 15px; margin: 0 0 12px; }
.field-app .wash-train-btn { min-height: 68px; }
.field-app .wash-train-btn b { font-size: 19px; }
.field-app .wash-pick-btn { min-height: 92px; }
.field-app .wash-pick-btn span { font-size: 15px; }
.field-app :focus-visible { outline: 3px solid var(--cyan-deep, #0092C7); outline-offset: 2px; }

/* ---------- topo: voltar + progresso ---------- */
.fx-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.fx-top .fx-steps { flex: 1; margin: 0; }
.fx-back {
  flex: none; min-height: var(--fx-tap); padding: 0 16px; border-radius: 14px;
  background: var(--surface-2, #EDF1F7); color: var(--fx-ink); border: 1px solid var(--fx-line);
  font: 700 16px/1 var(--sans, system-ui); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.fx-back:active { transform: scale(.97); }

/* barra de passos 1..4 — o passo atual "enche" ao entrar */
.field-app .fx-steps { gap: 6px; margin-bottom: 16px; }
.field-app .fx-steps .s { position: relative; height: 10px; border-radius: 6px; overflow: hidden; background: var(--gray-150, #E3E9F2); }
.field-app .fx-steps .s.on { background: var(--blue, #1B0DAE); }
.field-app .fx-steps .s.cur { background: var(--gray-150, #E3E9F2); }
.field-app .fx-steps .s.cur::after {
  content: ''; position: absolute; inset: 0; background: var(--blue, #1B0DAE);
  transform-origin: left center; animation: fx-fill .55s var(--fx-ease) both;
}
@keyframes fx-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- área de ação no rodapé (polegar) ---------- */
.fx-actbar {
  position: sticky; bottom: 0; z-index: 6;
  margin: 18px calc(-1 * var(--fx-pad, 16px)) calc(-1 * var(--fx-pad, 16px));
  padding: 22px var(--fx-pad, 16px) calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to bottom, transparent, var(--fx-surface, #fff) 20px);
  border-radius: 0 0 var(--r, 14px) var(--r, 14px);
}
.fx-actbar[hidden] { display: none; }
/* Simulação dentro do shell do gestor: no celular há a barra inferior fixa (#bnav, 64px) */
@media (max-width: 820px) {
  .fx-in-shell .fx-actbar, body:has(#bnav) .field-app .fx-actbar { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); padding-bottom: 14px; }
}
.fx-actbar .slide { margin-top: 0; }
.fx-go-pt { font-size: 16px; color: var(--fx-muted); margin: 0 2px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-go-pt b { color: var(--fx-ink); font-size: 18px; }

/* ---------- passo 1: QR + lista rápida ---------- */
.field-app .fx-scan { min-height: 84px; font-size: 21px; }
.field-app .fx-scan svg { width: 32px; height: 32px; }
.fx-or { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px; color: var(--fx-muted); font-size: 16px; font-weight: 600; }
.fx-or::before, .fx-or::after { content: ''; flex: 1; height: 1px; background: var(--fx-line); }

.fx-picker { border: 1px solid var(--fx-line); border-radius: 16px; background: var(--fx-surface); overflow: hidden; }
.fx-search { position: relative; padding: 10px; border-bottom: 1px solid var(--fx-line); background: var(--surface-2, #EDF1F7); }
.fx-search-ic { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); color: var(--fx-muted); pointer-events: none; display: grid; }
.fx-search-ic svg { width: 22px; height: 22px; stroke-width: 2.2; }
.fx-search input {
  width: 100%; min-height: 56px; padding: 0 52px 0 48px; border-radius: 12px;
  border: 2px solid var(--gray-300, #BFC8D7); background: var(--fx-surface); color: var(--fx-ink);
  font: 600 18px/1.2 var(--sans, system-ui); -webkit-appearance: none; appearance: none;
}
.fx-search input::-webkit-search-cancel-button { display: none; }
.fx-search input:focus { outline: none; border-color: var(--blue, #1B0DAE); box-shadow: var(--ring, 0 0 0 3px #A9E6FB); }
.fx-clear {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--fx-muted);
  display: grid; place-items: center; cursor: pointer;
}
.fx-clear[hidden] { display: none; }
.fx-clear svg { width: 22px; height: 22px; stroke-width: 2.4; }
.fx-search-sticky { position: sticky; top: 0; z-index: 4; border: 1px solid var(--fx-line); border-radius: 14px; margin-bottom: 14px; }

.fx-chips { display: flex; gap: 8px; overflow-x: auto; padding: 10px; border-bottom: 1px solid var(--fx-line); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.fx-chips::-webkit-scrollbar { display: none; }
.fx-chips[hidden] { display: none; }
.fx-chip {
  flex: none; min-height: 48px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--gray-300, #BFC8D7); background: var(--fx-surface); color: var(--fx-ink);
  font: 700 16px/1 var(--sans, system-ui); white-space: nowrap;
}
.fx-chip.on { background: var(--blue, #1B0DAE); border-color: var(--blue, #1B0DAE); color: #fff; }

.fx-list { max-height: min(58vh, 560px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.fx-group { content-visibility: auto; contain-intrinsic-size: auto 400px; }
.fx-group-h {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: var(--surface-2, #EDF1F7); border-bottom: 1px solid var(--fx-line);
  font: 800 14px/1.2 var(--sans, system-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--fx-muted);
}
.fx-group-h span { margin-left: auto; font-family: var(--mono, monospace); font-weight: 600; }
.fx-group-h svg { width: 16px; height: 16px; stroke-width: 2.2; }
.fx-recent .fx-group-h { color: var(--blue, #1B0DAE); }
.fx-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 62px; padding: 12px 16px;
  border: 0; border-bottom: 1px solid var(--fx-line); border-left: 5px solid transparent;
  background: var(--fx-surface); color: var(--fx-ink); text-align: left; cursor: pointer;
  font: 650 18px/1.25 var(--sans, system-ui); -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-1, 150ms) ease-out;
}
.fx-item:active { background: var(--blue-50, #ECEAF7); }
.fx-item-n { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fx-item-ck { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: transparent; border: 2px solid var(--gray-300, #BFC8D7); }
.fx-item-ck svg { width: 20px; height: 20px; stroke-width: 3; }
.fx-item.on { background: var(--blue-50, #ECEAF7); border-left-color: var(--blue, #1B0DAE); }
.fx-item.on .fx-item-ck { background: var(--blue, #1B0DAE); border-color: var(--blue, #1B0DAE); color: #fff; }
.fx-iso { color: var(--danger, #A93B22); font-size: 14px; font-weight: 800; white-space: nowrap; }
.fx-tag { flex: none; padding: 5px 10px; border-radius: 999px; font: 800 13px/1 var(--sans, system-ui); text-transform: uppercase; letter-spacing: .03em; }
.fx-tag.em { background: var(--danger, #A93B22); color: #fff; }
.fx-tag.im { background: var(--warning-bg, #F7EEDD); color: var(--warning, #9A6318); border: 1px solid var(--warning-border, #E7CE9F); }
.fx-tag.ro { background: var(--success-bg, #EAF1E6); color: var(--success, #3F6B3A); border: 1px solid var(--success-border, #C3D6BB); }
.fx-note, .fx-empty { padding: 18px 16px; font-size: 16px; color: var(--fx-muted); text-align: center; }

.fx-more { display: grid; gap: 10px; margin-top: 18px; }

/* ---------- passo 2: sim/não, motivos ---------- */
.field-app .fx-yn .btn.big { min-height: 128px; }
.fx-reasons { display: grid; gap: 8px; margin-bottom: 6px; }
.fx-reason {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 62px; padding: 12px 16px;
  border: 2px solid var(--fx-line); border-radius: 14px; background: var(--fx-surface); color: var(--fx-ink);
  font: 650 17px/1.25 var(--sans, system-ui); text-align: left; cursor: pointer;
}
.fx-radio { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--gray-400, #8B94A6); display: grid; place-items: center; }
.fx-reason.on { border-color: var(--warning, #9A6318); background: var(--warning-bg, #F7EEDD); }
.fx-reason.on .fx-radio { border-color: var(--warning, #9A6318); }
.fx-reason.on .fx-radio::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--warning, #9A6318); }

/* ---------- passo 3: cronômetro ---------- */
.fx-run { text-align: center; padding: 14px 0 6px; margin-bottom: 14px; }
.fx-live {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px;
  background: var(--success-bg, #EAF1E6); color: var(--success, #3F6B3A); border: 1px solid var(--success-border, #C3D6BB);
  font: 700 16px/1.2 var(--sans, system-ui);
}
.fx-dot { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--success, #3F6B3A); }
.fx-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: fx-ping 1.6s var(--fx-ease) infinite; }
@keyframes fx-ping { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
.field-app .timer.fx-timer {
  font-family: var(--mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; font-weight: 600;
  font-size: clamp(68px, 22vw, 112px); line-height: 1; letter-spacing: -.02em; margin: 14px 0 16px; color: var(--fx-ink);
}
.field-app .timer.fx-timer.paused { opacity: 1; color: var(--warning, #9A6318); }
.fx-run.is-paused .fx-live { background: var(--warning-bg, #F7EEDD); color: var(--warning, #9A6318); border-color: var(--warning-border, #E7CE9F); }
.fx-run.is-paused .fx-dot { background: var(--warning, #9A6318); }
.fx-run.is-paused .fx-dot::after { animation: none; opacity: 0; }
.field-app .fx-pause { max-width: 360px; margin: 0 auto; }
.fx-cancel {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; margin-top: 8px;
  background: none; border: 0; color: var(--danger, #A93B22); font: 700 16px/1 var(--sans, system-ui);
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
.fx-cancel svg { width: 18px; height: 18px; stroke-width: 2.4; }
.fx-durchip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; margin: 0 0 14px;
  background: var(--surface-2, #EDF1F7); color: var(--fx-ink); font-size: 16px;
}
.fx-durchip b { font-family: var(--mono, monospace); font-variant-numeric: tabular-nums; font-size: 18px; }
.fx-durchip svg { width: 18px; height: 18px; }

/* ---------- fotos ---------- */
.fx-photos { gap: 10px; }
.fx-ph-count {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px;
  font-size: 16px; background: var(--warning-bg, #F7EEDD); color: var(--warning, #9A6318); border: 1px solid var(--warning-border, #E7CE9F);
}
.fx-ph-count b { font-weight: 800; }
.fx-ph-count svg { flex: none; width: 22px; height: 22px; stroke-width: 2.4; }
.fx-ph-count.ok { background: var(--success-bg, #EAF1E6); color: var(--success, #3F6B3A); border-color: var(--success-border, #C3D6BB); }
.fx-ph { position: relative; border-radius: var(--r-sm, 10px); }
.fx-photos .fx-ph img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm, 10px); border: 1px solid var(--fx-line); }
.fx-ph-x {
  position: absolute; top: 4px; right: 4px; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 22px; border: 0;
  background: rgba(13, 16, 22, .72); color: #fff; display: grid; place-items: center; cursor: pointer;
  font: 800 14px/1 var(--sans, system-ui);
}
.fx-ph-x svg { width: 20px; height: 20px; stroke-width: 2.8; }
.fx-ph.arm img { outline: 3px solid var(--danger, #A93B22); outline-offset: -3px; }
.fx-ph.arm .fx-ph-x { background: var(--danger, #A93B22); left: 4px; }
.fx-photos .fx-ph-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 104px; aspect-ratio: 1; padding: 8px; text-align: center;
  border: 2px dashed var(--blue-200, #B7AFE3); background: var(--blue-50, #ECEAF7); color: var(--blue, #1B0DAE);
  font-size: 15px; font-weight: 800; -webkit-tap-highlight-color: transparent;
}
.fx-photos .fx-ph-add svg { width: 34px; height: 34px; stroke-width: 2; }
.fx-photos .fx-ph-add:active { transform: scale(.97); }
/* sem nenhuma foto ainda: o botão da câmera vira um bloco grande */
.fx-photos > .fx-ph-add:first-child, .fx-photos > .fx-ph-count + .fx-ph-add {
  grid-column: 1 / -1; aspect-ratio: auto; min-height: 128px; flex-direction: row; gap: 14px; font-size: 19px;
}
.fx-photos > .fx-ph-add:first-child svg, .fx-photos > .fx-ph-count + .fx-ph-add svg { width: 40px; height: 40px; }
.fx-photos .fx-ph-add.busy { cursor: progress; border-style: solid; }

/* ---------- deslizar para confirmar ---------- */
.fx-slide { height: 76px; border-radius: 18px; border-width: 2px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fx-slide .thumb { width: 68px; height: 62px; top: 5px; left: 5px; transition: none; will-change: transform; }
.fx-slide .fill { transition: none; }
.fx-slide .lbl { font-size: 18px; color: var(--gray-700, #313743); opacity: calc(1 - var(--fx-p, 0) * 1.6); }
.fx-slide.fx-spring .thumb { transition: transform .42s var(--fx-spring); }
.fx-slide.fx-spring .fill { transition: width .42s var(--fx-spring); }
.fx-slide.fx-drag .thumb { cursor: grabbing; box-shadow: var(--shadow-md); }
.fx-slide.fx-holding .fill { width: 100% !important; transition: width 1.2s linear; }
.fx-slide.fx-nudge .thumb { animation: fx-nudge .7s var(--fx-ease); }
@keyframes fx-nudge { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(26px); } 55% { transform: translateX(0); } 75% { transform: translateX(10px); } }
.fx-slide.confirmed .lbl { opacity: 1; padding: 0 84px 0 12px; color: var(--success, #3F6B3A); }
.fx-slide.confirmed .fill { background: var(--success-bg, #EAF1E6); }
.fx-slide.fx-busy .thumb { animation: fx-busy 1s ease-in-out infinite; }
@keyframes fx-busy { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ---------- sucesso ---------- */
.fx-done { text-align: center; padding: 8px 0 0; }
.fx-done-mark { display: grid; place-items: center; margin: 4px auto 10px; }
.fx-check { width: 104px; height: 104px; }
.fx-check-c { fill: var(--success-bg, #EAF1E6); stroke: var(--success, #3F6B3A); stroke-width: 3; stroke-dasharray: 145; stroke-dashoffset: 145; animation: fx-draw .45s var(--fx-ease) forwards; }
.fx-check-p { fill: none; stroke: var(--success, #3F6B3A); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: fx-draw .3s .35s var(--fx-ease) forwards; }
@keyframes fx-draw { to { stroke-dashoffset: 0; } }
.fx-done-warn { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--warning-bg, #F7EEDD); color: var(--warning, #9A6318); border: 3px solid var(--warning, #9A6318); }
.fx-done-warn svg { width: 46px; height: 46px; stroke-width: 2.2; }
.fx-done-t { font-family: var(--serif, Georgia, serif); font-size: 34px; font-weight: 700; color: var(--success, #3F6B3A); line-height: 1.1; }
.fx-done.warn .fx-done-t { color: var(--warning, #9A6318); }
.field-app .fx-done-msg { font-size: clamp(20px, 5.4vw, 24px); margin: 10px 0 6px; }
.fx-count { display: grid; gap: 8px; margin-top: 12px; color: var(--fx-muted); font-size: 15px; }
.fx-count-bar { display: block; height: 5px; border-radius: 3px; background: var(--gray-150, #E3E9F2); overflow: hidden; }
.fx-count-bar i { display: block; height: 100%; background: var(--blue, #1B0DAE); transform-origin: left; animation: fx-drain linear forwards; }
@keyframes fx-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.fx-count-t b { font-family: var(--mono, monospace); color: var(--fx-ink); }

/* ---------- retomar sessão / estados ---------- */
.fx-resume { text-align: center; padding: 22px 18px; }
.fx-resume-ic { width: 60px; height: 60px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: var(--warning, #9A6318); color: #fff; }
.fx-resume-ic svg { width: 30px; height: 30px; stroke-width: 2.2; }
.fx-resume .rt { font-size: 22px; font-weight: 800; color: var(--fx-ink); }
.fx-resume .rs { font-size: 16px; color: var(--fx-muted); margin: 6px 0 16px; overflow-wrap: anywhere; }
.fx-resume-acts { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.fx-resume-acts .btn { width: 100%; justify-content: center; }
.fx-loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 40px 0; font-size: 17px; color: var(--fx-muted); }
.fx-empty-state { text-align: center; padding: 10px 0; }
.fx-allset { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 16px; border-radius: 14px; font-size: 17px; background: var(--success-bg, #EAF1E6); color: var(--success, #3F6B3A); }
.fx-allset svg { flex: none; width: 24px; height: 24px; stroke-width: 2.6; }
.fx-wash-code { display: inline-block; padding: 2px 12px; border-radius: 10px; background: var(--blue, #1B0DAE); color: #fff; font-family: var(--mono, monospace); }
.fx-progress-line { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 16px; color: var(--fx-muted); }
.fx-progress-line .bar { flex: 1; height: 8px; border-radius: 4px; background: var(--gray-150, #E3E9F2); overflow: hidden; display: block; }
.fx-progress-line .bar i { display: block; height: 100%; background: var(--success, #3F6B3A); }
.fx-progress-line b { color: var(--fx-ink); }

/* ---------- leitura de QR ---------- */
.fx-scanbox { position: relative; border-radius: 16px; overflow: hidden; background: #000; }
.fx-scanbox .qr-scan { display: block; border: 0; border-radius: 0; max-height: 62vh; object-fit: cover; }
.fx-scan-frame { position: absolute; inset: 14% 16%; border: 3px solid rgba(255, 255, 255, .92); border-radius: 18px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .38); pointer-events: none; overflow: hidden; }
.fx-scan-frame i { position: absolute; left: 6%; right: 6%; height: 3px; top: 10%; border-radius: 2px; background: var(--cyan, #00C2F5); box-shadow: 0 0 12px var(--cyan, #00C2F5); animation: fx-scanline 2s ease-in-out infinite alternate; }
@keyframes fx-scanline { to { top: 88%; } }
.field-app .fx-scan-hint { text-align: center; margin: 14px 0; }
.fx-scan-acts { display: grid; gap: 10px; }
.fx-scan-acts .btn.big { font-size: 17px; }

/* ---------- spinner ---------- */
.fx-spin, .nb-spin { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent; animation: fx-rot .8s linear infinite; flex: none; }
.nb-spin { width: 16px; height: 16px; border-width: 2.5px; }
@keyframes fx-rot { to { transform: rotate(360deg); } }

/* ---------- barra de rede / envio (fixa no topo, na página toda) ---------- */
.netbar.nb {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  min-height: 44px; padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px;
  font: 600 15px/1.3 var(--sans, system-ui); text-align: center; color: #fff;
  box-shadow: 0 2px 10px rgba(13, 16, 22, .18);
  animation: fx-nb-in .24s var(--fx-ease, ease-out);
  transition: opacity .35s ease-out, transform .35s ease-out;
}
.netbar.nb b { font-weight: 800; }
.netbar.nb.off, .netbar.nb.queue { background: var(--warning, #9A6318); }
.netbar.nb.fail { background: var(--danger, #A93B22); }
.netbar.nb.sent { background: var(--success, #3F6B3A); }
.netbar.nb.nb-out { opacity: 0; transform: translateY(-100%); }
.nb-ic { font-weight: 900; }
.netbar.nb .nb-retry {
  min-height: 40px; padding: 0 16px; border-radius: 999px; border: 2px solid #fff; cursor: pointer;
  background: #fff; color: var(--danger, #A93B22); font: 800 15px/1 var(--sans, system-ui); text-decoration: none;
}
.netbar.nb .nb-retry:disabled { opacity: .75; cursor: progress; }
@keyframes fx-nb-in { from { transform: translateY(-100%); } to { transform: none; } }

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .field-app .fx-steps .s.cur::after, .fx-dot::after, .fx-slide.fx-nudge .thumb, .fx-slide.fx-busy .thumb,
  .fx-scan-frame i, .netbar.nb, .fx-count-bar i { animation: none; }
  .fx-check-c, .fx-check-p { animation: none; stroke-dashoffset: 0; }
  .fx-slide.fx-spring .thumb, .fx-slide.fx-spring .fill, .fx-slide.fx-holding .fill, .netbar.nb, .fx-item { transition: none; }
  .fx-spin, .nb-spin { animation-duration: 2.4s; }
}