/* Nei Madeireira — Ordens de serviço (lista, detalhe, Nova OS e modais da OS).
   Base: os-extra.css do Seu Lóza, adaptado para madeireira. Só tokens; funciona no tema escuro e no claro. Prefixo ox-. */

/* ---------- utilidades ---------- */
.ox-nw { white-space: nowrap; }
.ox-mask { letter-spacing: .08em; color: var(--tx-3); white-space: nowrap; }
.ox-noanim, .ox-noanim .rise, .ox-noanim .ox-route li { animation: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.ox-wide { width: 100%; justify-content: center; }
.ox-foot-note { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); min-width: 0; }
.ox-foot-note svg { width: 14px; height: 14px; flex: none; }
.ox-explica { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--s3); font-size: var(--fs-xs); color: var(--tx-2); line-height: 1.45; }
.ox-explica svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--tx-3); }
.ox-ro { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: var(--r-sm); background: var(--bg-2); border: 1px solid var(--line); color: var(--tx-2); font-size: var(--fs-sm); }
.ox-ro svg { width: 14px; height: 14px; color: var(--tx-3); }
.ox-ver__hint { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; background: var(--warn-soft); color: var(--warn); }
.ox-ver__hint svg { width: 13px; height: 13px; }
.ox-actions { align-items: center; }
.ox-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ox-topbar .back { margin-bottom: 0; }
.mini__ic.crit { background: var(--crit-soft); color: var(--crit); }
.mini__ic.ok { background: var(--ok-soft); color: var(--ok); }
.mini__ic.gold { background: var(--gold-soft); color: var(--gold-tx); }

/* ---------- Lista: aviso do setor, KPIs e filtros ---------- */
.ox-meu { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 12px 10px 14px; border-radius: var(--r-md); background: var(--gold-soft); border: 1px solid var(--gold-line); font-size: var(--fs-sm); color: var(--tx-2); }
.ox-meu > svg { width: 17px; height: 17px; color: var(--gold-tx); flex: none; }
.ox-meu > span { flex: 1 1 260px; min-width: 0; }
.ox-meu b { color: var(--tx); font-weight: 600; }
.ox-kpi { cursor: pointer; transition: border-color var(--t-fast), transform var(--t-fast); }
.ox-kpi:hover { border-color: var(--line-3); transform: translateY(-1px); }
.ox-kpi:focus-visible { outline: 2px solid var(--red-tx); outline-offset: 2px; }
.ox-kpi.on { border-color: var(--red-line); box-shadow: inset 0 0 0 1px var(--red-line); }

.ox-fbar { padding: 14px 16px; display: grid; gap: 12px; margin-bottom: 16px; position: relative; z-index: 3; }
.ox-fbar__r1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ox-fbar__r1 .ox-q { flex: 1 1 260px; min-width: 0; }
.ox-tiposel { width: auto; min-width: 200px; height: 38px; }
.ox-sort { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ox-sort > .muted { font-size: var(--fs-xs); white-space: nowrap; }
.ox-sort .segmented button { display: inline-flex; align-items: center; gap: 6px; }
.ox-sort .segmented svg { width: 14px; height: 14px; }
.ox-dir { height: 38px; gap: 7px; font-size: var(--fs-xs); }
.ox-dir svg { width: 15px; height: 15px; flex: none; }
.ox-fbar__r2 { display: flex; align-items: flex-start; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.ox-fbar__lbl { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .08em; color: var(--tx-4); padding-top: 9px; white-space: nowrap; }
.ox-filt { flex: 1; min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ox-filt__chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1; min-width: 0; }
.ox-filt__chips button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--s1); font-size: var(--fs-xs); color: var(--tx-2); white-space: nowrap; transition: all var(--t-fast); }
.ox-filt__chips button svg { width: 13px; height: 13px; flex: none; }
.ox-filt__chips button:hover { border-color: var(--line-3); color: var(--tx); }
.ox-filt__chips button.on { background: var(--red-soft); border-color: var(--red-line); color: var(--tx); }
.ox-filt__chips button em { font-style: normal; font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); display: inline-grid; place-items: center; background: var(--s3); color: var(--tx-3); }
.ox-filt__chips button.on em { background: var(--red-soft); color: var(--red-tx); }
.ox-filt .ox-f-main { font-weight: 600; }
.ox-f-concluida svg { color: var(--ok); }
.ox-f-risco svg, .ox-f-parada svg { color: var(--crit); }
.ox-f-meu { border-color: var(--gold-line) !important; }
.ox-f-meu svg { color: var(--gold-tx); }
.ox-filt__res { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); color: var(--tx-3); white-space: nowrap; padding-top: 6px; flex: none; }
.ox-filt__res b { color: var(--tx); font-size: var(--fs-sm); }
.ox-filt__res .btn svg { width: 13px; height: 13px; }

/* ---------- Lista: tabela ---------- */
.ox-tbl td { vertical-align: middle; }
.ox-tbl th, .ox-tbl td { padding-left: 8px; padding-right: 8px; }
.ox-tbl th:first-child, .ox-tbl td:first-child { padding-left: 16px; }
.ox-tbl th:last-child, .ox-tbl td:last-child { padding-right: 16px; }
.ox-tbl tr.ox-row:focus-visible { outline: 2px solid var(--red-tx); outline-offset: -2px; }
.ox-tbl .os-id { display: inline-block; font-size: 13px; padding: 3px 7px; border-radius: 7px; background: var(--s3); border: 1px solid var(--line); color: var(--tx); }
.ox-tbl small.block { display: block; font-size: 11px; margin-top: 3px; white-space: nowrap; }
.ox-cli { min-width: 150px; max-width: 200px; }
.ox-cli > div { min-width: 0; display: grid; }
.ox-cli b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ox-cli small { font-size: 11.5px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none; }
.ox-cli .dotc { margin-top: 6px; flex: none; }
.ox-c-prog { min-width: 92px; }
.ox-prog { gap: 6px; } .ox-prog small { width: 28px; }
.ox-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.ox-th-sort:hover, .ox-th-sort.on { color: var(--tx); }
.ox-th-sort svg { width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; color: var(--red-tx); }
.ox-tbl th { white-space: nowrap; }
.ox-c-m3 { white-space: nowrap; color: var(--tx-2); }
.ox-c-ent { white-space: nowrap; }
.ox-ent { display: inline-flex; align-items: center; gap: 7px; }
.ox-ent b { font-weight: 600; }
.ox-tipo { width: 22px; height: 22px; border-radius: 7px; display: inline-grid; place-items: center; background: var(--s3); color: var(--tx-3); flex: none; }
.ox-tipo svg { width: 12px; height: 12px; }
.ox-c-ent small.block { padding-left: 29px; }
.ox-c-st { min-width: 0; }
.ox-c-st .pill { vertical-align: middle; }
.ox-obs { display: flex; align-items: center; gap: 5px; margin-top: 5px; max-width: 176px; font-size: 11px; font-weight: 500; color: var(--warn); }
.ox-obs.crit { color: var(--crit); }
.ox-obs svg { width: 12px; height: 12px; flex: none; }
.ox-obs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ox-c-val { white-space: nowrap; font-weight: 500; }
.ox-tbl tr.ox-row-crit td:first-child { box-shadow: inset 3px 0 0 var(--crit); }
.ox-tbl tr.ox-row-crit { background: color-mix(in srgb, var(--crit-soft) 45%, transparent); }
.ox-empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 30px; color: var(--tx-3); font-size: var(--fs-sm); }
.ox-empty svg { width: 16px; height: 16px; }

/* roteiro compacto: setores feitos (✓), atual em destaque, próximos apagados */
.ox-rmini { display: flex; align-items: center; }
.ox-rd { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 1px solid var(--line-2); background: var(--s2); color: var(--tx-4); }
.ox-rd svg { width: 11px; height: 11px; }
.ox-rd.done { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, transparent); color: var(--ok); }
.ox-rd.next { background: transparent; }
.ox-rc { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 7px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 500; white-space: nowrap; flex: none; background: var(--red-soft); border: 1px solid var(--red-line); color: var(--tx); }
.ox-rc svg { width: 12px; height: 12px; color: var(--red-tx); flex: none; }
.ox-rc.wait { background: var(--s2); border-color: var(--line-3); color: var(--tx-2); }
.ox-rc.wait svg { color: var(--tx-3); }
.ox-rc.stop { background: var(--crit-soft); border-color: color-mix(in srgb, var(--crit) 45%, transparent); box-shadow: none; }
.ox-rc.stop svg { color: var(--crit); }
.ox-rl { width: 8px; height: 2px; flex: none; background: var(--line-2); }
.ox-rl.on { background: color-mix(in srgb, var(--ok) 55%, transparent); }

/* ---------- Detalhe: topo ---------- */
.ox-hero__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.ox-hero__main { min-width: 0; flex: 1 1 380px; }
.ox-hero__ids { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ox-hero__ids .os-hero__id { margin-right: 2px; }
.ox-hero h1 { margin: 8px 0 2px; font-family: var(--serif); font-weight: 600; font-size: 34px; letter-spacing: -.005em; line-height: 1.1; }
.ox-hero__desc { font-size: var(--fs-md) !important; color: var(--tx-2); margin: 0; }
.ox-hero__by { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; font-size: var(--fs-xs) !important; color: var(--tx-3); }
.ox-hero__by b { color: var(--tx); font-weight: 500; }
.ox-hero__by .mono { color: var(--tx-2); }
.ox-hero__acts { justify-content: flex-end; }
.ox-facts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--s1); overflow: hidden; }
.ox-facts > div { display: grid; align-content: start; gap: 2px; padding: 11px 14px; min-width: 0; }
.ox-facts > div + div { border-left: 1px solid var(--line); }
.ox-facts small { display: flex; align-items: center; gap: 5px; font-size: var(--fs-2xs); color: var(--tx-3); white-space: nowrap; }
.ox-facts small svg { width: 12px; height: 12px; flex: none; }
.ox-facts b { font-size: var(--fs-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ox-facts > div > span { font-size: 11.5px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ox-facts .crit-tx { color: var(--crit); } .ox-facts .ok-tx { color: var(--ok); }
.ox-why { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 9px 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--tx-2); background: var(--warn-soft); }
.ox-why.crit { background: var(--crit-soft); }
.ox-why svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--warn); }
.ox-why.crit svg { color: var(--crit); }
.ox-why b { color: var(--tx); font-weight: 600; }

/* roteiro em etapas (stepper) */
.ox-rt { padding: 14px 16px 4px; border-radius: var(--r-md); background: var(--s1); border: 1px solid var(--line); }
.ox-rt.stop { border-color: color-mix(in srgb, var(--crit) 45%, transparent); }
.ox-rt__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ox-rt__t { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; }
.ox-rt__t svg { width: 15px; height: 15px; color: var(--red-tx); }
.ox-rt__n { font-size: var(--fs-xs); color: var(--tx-3); }
.ox-rt__who { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--tx-3); min-width: 0; }
.ox-rt__who b { color: var(--tx); font-weight: 500; }
.ox-rt__head .pill { margin-left: auto; }
.ox-route { list-style: none; margin: 18px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); position: relative; }
.ox-route::before { content: ""; position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: 19px; height: 2px; background: var(--line-2); }
.ox-route li { position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; text-align: center; padding: 0 4px; animation: rise .6s var(--ease) both; }
.ox-route li:nth-child(2) { animation-delay: 60ms; } .ox-route li:nth-child(3) { animation-delay: 120ms; } .ox-route li:nth-child(4) { animation-delay: 180ms; } .ox-route li:nth-child(5) { animation-delay: 240ms; } .ox-route li:nth-child(6) { animation-delay: 300ms; } .ox-route li:nth-child(7) { animation-delay: 360ms; }
.ox-route__dot { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--s3); border: 1px solid var(--line-2); color: var(--tx-3); }
.ox-route__dot svg { width: 16px; height: 16px; }
.ox-route__dot em { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--r-pill); display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 600; background: var(--s1); color: var(--tx-3); border: 1px solid var(--line-2); }
.ox-route b { font-weight: 500; font-size: 12px; color: var(--tx-2); margin-top: 5px; line-height: 1.3; }
.ox-route small { font-size: 10.5px; color: var(--tx-4); line-height: 1.3; }
.ox-route__who { font-size: 10px; color: var(--tx-4); }
.ox-route li.done .ox-route__dot { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 40%, transparent); color: var(--ok); }
.ox-route li.done small { color: var(--ok); }
.ox-route li.now .ox-route__dot { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 0 0 4px var(--red-soft); }
.ox-route li.now.wait .ox-route__dot { background: var(--s2); border: 1.5px solid var(--red-line); color: var(--red-tx); box-shadow: 0 0 0 4px var(--red-soft); }
.ox-route li.now.stop .ox-route__dot { background: var(--crit); border-color: var(--crit); box-shadow: 0 0 0 4px var(--crit-soft); }
.ox-route li.now b { color: var(--tx); font-weight: 600; }
.ox-route li.now small { color: var(--red-tx); font-weight: 500; }
.ox-route li.now.stop small { color: var(--crit); }
.ox-rt__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 0; margin-top: 10px; border-top: 1px solid var(--line); }
.ox-rt__dica { font-size: var(--fs-xs); min-width: 0; flex: 1 1 240px; }
.ox-rt__dica b { color: var(--tx); font-weight: 500; }

/* ---------- Cards do detalhe ---------- */
.ox-grid { align-items: start; }
.ox-headacts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.ox-lockhint { display: flex; align-items: center; gap: 6px; margin: 12px 20px 0; padding: 8px 10px; border-radius: var(--r-sm); background: var(--s3); font-size: var(--fs-xs); color: var(--tx-2); line-height: 1.4; }
.ox-lockhint svg { width: 13px; height: 13px; color: var(--warn); flex: none; }

/* lista de corte */
.ox-sepcount { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: var(--r-pill); font-size: var(--fs-xs); color: var(--tx-2); background: var(--s3); white-space: nowrap; }
.ox-sepcount svg { width: 14px; height: 14px; color: var(--tx-3); }
.ox-sepcount b { color: var(--tx); }
.ox-sepcount.ok { background: var(--ok-soft); color: var(--ok); }
.ox-sepcount.ok svg, .ox-sepcount.ok b { color: var(--ok); }
.ox-sepbar { padding: 12px 20px 2px; }
.ox-sepbar .progress { height: 5px; }
.ox-sepbar .progress i { transition: width .6s var(--ease); }
.ox-ctbl { margin-top: 10px; }
.ox-ctbl th { padding: 9px 8px; white-space: nowrap; }
.ox-ctbl td { padding: 10px 8px; }
.ox-ctbl th:first-child, .ox-ctbl td:first-child { padding-left: 20px; width: 34px; }
.ox-ctbl th:last-child, .ox-ctbl td:last-child { padding-right: 20px; }
.ox-ctbl tbody tr { transition: background var(--t-fast), opacity var(--t-fast); }
.ox-ctbl tbody tr.sep .ox-cc-p b { color: var(--tx-2); }
.ox-ctbl tbody tr.sep { background: color-mix(in srgb, var(--ok-soft) 45%, transparent); }
.ox-cc-p { min-width: 170px; }
.ox-cc-p b { display: block; font-weight: 500; white-space: nowrap; }
.ox-cc-p small { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 11px; color: var(--tx-3); white-space: nowrap; }
.ox-cc-p small .mono { font-size: 10.5px; }
.ox-cc-p small svg { width: 11px; height: 11px; flex: none; }
.ox-cobs { color: var(--gold-tx) !important; }
.ox-esp { display: flex; align-items: center; gap: 7px; white-space: nowrap; font-size: var(--fs-xs); color: var(--tx-2); }
.ox-cc-e .bitola { display: inline-block; margin: 4px 0 0 17px; font-size: 11px; }
.ox-cc-c, .ox-cc-q, .ox-cc-m, .ox-cc-v { white-space: nowrap; }
.ox-cc-q b { font-weight: 600; }
.ox-u { display: none; color: var(--tx-3); font-size: 11px; }
.ox-faz { display: flex; flex-wrap: wrap; gap: 4px; min-width: 120px; }
.ox-fz { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 500; white-space: nowrap; background: var(--s3); color: var(--tx-3); }
.ox-fz svg { width: 11px; height: 11px; flex: none; }
.ox-fz.gold { background: var(--gold-soft); color: var(--gold-tx); }
.ox-fz.ok { background: var(--ok-soft); color: var(--ok); }
.ox-fz.info { background: var(--info-soft); color: var(--info); }
.ox-fz.red { background: var(--red-soft); color: var(--red-tx); }
.ox-fz.warn { background: var(--warn-soft); color: var(--warn); }
.ox-ctbl tfoot td { padding: 12px 8px 14px; border-top: 1px solid var(--line-2); border-bottom: 0; font-size: var(--fs-sm); white-space: nowrap; }
.ox-ctbl tfoot td:last-child { padding-right: 20px; }
.ox-ctbl tfoot b { font-weight: 600; }
.ox-ctbl tfoot small { font-size: 11px; }
.ox-ck { display: inline-grid; cursor: pointer; }
.ox-ck input { position: absolute; opacity: 0; pointer-events: none; }
.ox-ck__box { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-3); display: grid; place-items: center; background: var(--s1); transition: all var(--t-med) var(--ease); }
.ox-ck__box svg { width: 14px; height: 14px; color: #fff; transform: scale(0); transition: transform var(--t-med) var(--ease); }
.ox-ck input:checked + .ox-ck__box { background: var(--ok); border-color: var(--ok); }
.ox-ck input:checked + .ox-ck__box svg { transform: scale(1); }
.ox-ck input:focus-visible + .ox-ck__box { outline: 2px solid var(--red-tx); outline-offset: 2px; }
.ox-ck:hover .ox-ck__box { border-color: var(--ok); }

/* entrega e montagem */
.ox-ent__body { display: grid; gap: 12px; padding: 14px 18px 18px; }
.ox-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.ox-kv__ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--s3); color: var(--tx-2); }
.ox-kv__ic svg { width: 15px; height: 15px; }
.ox-kv > div { display: grid; min-width: 0; }
.ox-kv small { font-size: var(--fs-2xs); color: var(--tx-3); }
.ox-kv b { font-weight: 500; font-size: var(--fs-sm); line-height: 1.35; }
.ox-kv span { font-size: 11.5px; color: var(--tx-3); overflow: hidden; text-overflow: ellipsis; }
.ox-kv .mono { font-size: 11px; color: var(--tx-2); }
.ox-cap { padding: 10px 12px; border-radius: var(--r-sm); background: var(--bg-2); border: 1px solid var(--line); display: grid; gap: 6px; }
.ox-cap__t { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-xs); color: var(--tx-3); }
.ox-cap__t b { color: var(--tx); font-weight: 600; }
.ox-cap small { font-size: 11px; }
.ox-cap.warn { border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.ox-done { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-sm); background: var(--ok-soft); }
.ox-done > svg { width: 17px; height: 17px; flex: none; color: var(--ok); margin-top: 1px; }
.ox-done b { display: block; font-weight: 600; font-size: var(--fs-sm); }
.ox-done small { font-size: 11.5px; color: var(--tx-2); }
.ox-team { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: center; }
.ox-team > div { display: grid; min-width: 0; }
.ox-team b { font-weight: 500; font-size: var(--fs-sm); }
.ox-team small { font-size: 11.5px; color: var(--tx-3); }
.ox-team .pill { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
.ox-mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ox-mgrid > div { display: grid; gap: 1px; padding: 9px 11px; border-radius: var(--r-sm); background: var(--bg-2); border: 1px solid var(--line); min-width: 0; }
.ox-mgrid small { font-size: var(--fs-2xs); color: var(--tx-3); }
.ox-mgrid b { font-weight: 600; font-size: var(--fs-md); }
.ox-mgrid span { font-size: 11px; color: var(--tx-3); }
.ox-fin .h4 { display: flex; align-items: center; gap: 8px; margin-top: 0; }
.ox-fin .h4 svg { width: 15px; height: 15px; color: var(--tx-3); }
.ox-fin .os-fin > div { grid-template-columns: minmax(0, 1fr) auto; }
.ox-fin__p { font-size: var(--fs-sm) !important; font-weight: 500 !important; }
.ox-fin .btn { margin-top: 12px; }
.ox-finlock { display: flex; gap: 12px; align-items: center; }
.ox-finlock__ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--s3); color: var(--tx-3); flex: none; }
.ox-finlock__ic svg { width: 16px; height: 16px; }
.ox-finlock b { display: block; font-weight: 600; }
.ox-finlock small { font-size: 11.5px; }

/* ocorrências e histórico */
.ox-oc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; margin: 14px 20px 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); }
.ox-oc.crit { background: var(--crit-soft); border-color: color-mix(in srgb, var(--crit) 40%, transparent); }
.ox-oc__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--s1); color: var(--warn); }
.ox-oc.crit .ox-oc__ic { color: var(--crit); }
.ox-oc__ic svg { width: 17px; height: 17px; }
.ox-oc b { display: block; font-size: var(--fs-sm); font-weight: 600; }
.ox-oc p { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--tx-2); }
.ox-hf { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 20px 4px; }
.ox-hf button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--s1); font-size: 11.5px; color: var(--tx-2); transition: all var(--t-fast); }
.ox-hf button svg { width: 12px; height: 12px; }
.ox-hf button em { font-style: normal; font-size: 10.5px; color: var(--tx-4); font-variant-numeric: tabular-nums; }
.ox-hf button:hover { border-color: var(--line-3); color: var(--tx); }
.ox-hf button.on { background: var(--red-soft); border-color: var(--red-line); color: var(--tx); }
.ox-hist { list-style: none; margin: 0; padding: 12px 20px 16px; display: grid; max-height: 520px; overflow-y: auto; }
.ox-hist > li { position: relative; display: flex; gap: 12px; padding-bottom: 14px; }
.ox-hist > li::before { content: ""; position: absolute; left: 13px; top: 32px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--line); }
.ox-hist > li:last-child { padding-bottom: 0; }
.ox-hist > li:last-child::before { display: none; }
.ox-hist > li > div { min-width: 0; flex: 1; }
.ox-hist__ic { --c: var(--tx-3); --cs: var(--s3); width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--cs); color: var(--c); }
.ox-hist__ic svg { width: 14px; height: 14px; }
.ox-hist li.t-setor .ox-hist__ic { --c: var(--red-tx); --cs: var(--red-soft); }
.ox-hist li.t-ocorrencia .ox-hist__ic { --c: var(--warn); --cs: var(--warn-soft); }
.ox-hist li.t-entrega .ox-hist__ic { --c: var(--info); --cs: var(--info-soft); }
.ox-hist li.t-montagem .ox-hist__ic { --c: var(--gold-tx); --cs: var(--gold-soft); }
.ox-hist li.t-aviso .ox-hist__ic { --c: var(--wa); --cs: var(--wa-soft); }
.ox-hist li.t-concluida .ox-hist__ic { --c: var(--ok); --cs: var(--ok-soft); }
.ox-hist li.first .ox-hist__ic { box-shadow: 0 0 0 3px var(--s3); }
.ox-hist b { display: block; font-weight: 500; font-size: var(--fs-sm); line-height: 1.4; }
.ox-hist small { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; font-size: 11.5px; color: var(--tx-3); }
.ox-hist__tag { height: 17px; padding: 0 6px; border-radius: 5px; display: inline-grid; place-items: center; font-size: 10px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; background: var(--s3); color: var(--tx-3); }
.ox-hist__empty { padding: 10px 0; font-size: var(--fs-sm); }
.ox-404 { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 48px 20px; }
.ox-404 > svg { width: 28px; height: 28px; color: var(--tx-3); }

/* ---------- Modais ---------- */
.modal.ox-modal-sm { width: min(600px, calc(100vw - 32px)); }
.modal.ox-nova { width: min(760px, calc(100vw - 32px)); }
.ox-segw { display: flex; width: 100%; }
.ox-segw button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; white-space: nowrap; }
.ox-segw button svg { width: 14px; height: 14px; flex: none; }
.ox-segw button span { overflow: hidden; text-overflow: ellipsis; }
.ox-segw button em { font-style: normal; font-size: 10.5px; font-weight: 600; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); display: inline-grid; place-items: center; background: var(--s3); color: var(--tx-3); }
.ox-no { display: grid; gap: 16px; align-content: start; min-height: 300px; }
#no-pane { display: grid; gap: 16px; align-content: start; min-width: 0; }
.ox-no-tabs button { height: 34px; }
.ox-no-list { display: grid; gap: 8px; }
.ox-no-orc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--line); }
.ox-no-orc__ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); }
.ox-no-orc__ic svg { width: 17px; height: 17px; }
.ox-no-orc__t { display: grid; min-width: 0; }
.ox-no-orc__t b { font-weight: 500; font-size: var(--fs-sm); }
.ox-no-orc__t small { font-size: 11.5px; color: var(--tx-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ox-no-orc__t small.muted { color: var(--tx-3); }
.ox-no-empty { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 26px 20px 22px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--bg-2); }
.ox-no-empty__ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--s3); color: var(--tx-3); margin-bottom: 4px; }
.ox-no-empty__ic svg { width: 20px; height: 20px; }
.ox-no-empty b { font-weight: 600; font-size: var(--fs-md); }
.ox-no-empty p { margin: 0; max-width: 46ch; font-size: var(--fs-sm); color: var(--tx-3); }
.ox-no-quase { display: grid; gap: 6px; }
.ox-no-quase .lbl { margin-bottom: 2px; }
.ox-no-q { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--r-sm); background: var(--s1); border: 1px solid var(--line); font-size: var(--fs-xs); }
.ox-no-q > .mono { color: var(--tx-3); font-size: 11.5px; }
.ox-no-q__n { display: grid; min-width: 0; font-weight: 500; font-size: var(--fs-sm); }
.ox-no-q__n small { font-weight: 400; font-size: 11px; color: var(--tx-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ox-no-form .input, .ox-no-form .select { width: 100%; }
.ox-no-rot { display: flex; flex-wrap: wrap; gap: 6px; }
.ox-no-rot .chip { cursor: pointer; border-style: solid; border-color: var(--line-2); }
.ox-no-rot .chip svg { width: 13px; height: 13px; }
.ox-chkline { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-sm); background: var(--bg-2); border: 1px solid var(--line); cursor: pointer; }
.ox-chkline input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--red); flex: none; }
.ox-chkline span { display: grid; gap: 1px; }
.ox-chkline b { font-weight: 500; font-size: var(--fs-sm); }
.ox-chkline small { font-size: 11.5px; }
.ox-to { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--r-sm); background: var(--bg-2); border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--tx-2); }
.ox-to > svg { width: 15px; height: 15px; color: var(--tx-3); }
.ox-to b { color: var(--tx); font-weight: 500; }
.ox-to .pill { margin-left: auto; }
.ox-ta { width: 100%; height: auto; min-height: 120px; padding: 10px 12px; line-height: 1.5; resize: vertical; font-family: inherit; }
.kpi__ic.ox-ic-wa { background: var(--wa-soft); color: var(--wa); }

/* ---------- Responsivo ---------- */
@media (max-width: 1280px) {
  .ox-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ox-facts > div:nth-child(4) { border-left: 0; }
  .ox-facts > div:nth-child(n + 4) { border-top: 1px solid var(--line); }
}
@media (max-width: 1100px) { .ox-filt { flex-wrap: wrap; } }
@media (max-width: 900px) {
  .ox-fbar__r2 { flex-direction: column; } .ox-fbar__lbl { padding-top: 0; }
}
@media (max-width: 760px) {
  .ox-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ox-facts > div { border-left: 0 !important; border-top: 1px solid var(--line); }
  .ox-facts > div:nth-child(-n + 2) { border-top: 0; }
  .ox-facts > div:nth-child(even) { border-left: 1px solid var(--line) !important; }
  .ox-route { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
  .ox-route::before { display: none; }
  .ox-hero h1 { font-size: 26px; }
  .ox-hero__acts { justify-content: flex-start; }
  .ox-oc { grid-template-columns: auto minmax(0, 1fr); }
  .ox-oc > .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 640px) {
  .ox-tiposel { flex: 1 1 100%; min-width: 0; }
  .ox-sort { width: 100%; }
  .ox-sort .segmented { flex: 1; }
  .ox-sort .segmented button { flex: 1; justify-content: center; }
  .ox-dir { width: 100%; justify-content: center; }
  .ox-filt__res { padding-top: 0; }
  /* lista vira cartões */
  .ox-tblcard .table-wrap { overflow: visible; }
  .ox-tbl, .ox-tbl tbody { display: block; }
  .ox-tbl thead { display: none; }
  .ox-tbl tr.ox-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .ox-tbl tr.ox-row:last-child { border-bottom: 0; }
  .ox-tbl tr.ox-row td { padding: 0 !important; border: 0; min-width: 0; }
  .ox-tbl tr.ox-row-crit td:first-child { box-shadow: none; }
  .ox-tbl tr.ox-row-crit { box-shadow: inset 3px 0 0 var(--crit); }
  .ox-c-id { grid-column: 1; grid-row: 1; align-self: start; }
  .ox-c-id small { display: none !important; }
  .ox-c-cli { grid-column: 2 / 4; grid-row: 1; }
  .ox-cli { min-width: 0; max-width: none; }
  .ox-c-rt { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; }
  .ox-rmini { min-width: 0; }
  .ox-c-st { grid-column: 1 / 3; grid-row: 3; }
  .ox-obs { max-width: none; }
  .ox-c-ent { grid-column: 3; grid-row: 3; text-align: right; align-self: start; }
  .ox-c-ent small.block { padding-left: 0; }
  .ox-c-prog { grid-column: 1 / 3; grid-row: 4; min-width: 0; }
  .ox-c-m3 { grid-column: 3; grid-row: 4; text-align: right; }
  .ox-c-val { grid-column: 3; grid-row: 1; display: none; }
  .ox-tbl tr.ox-norow { display: block; }
  /* lista de corte vira cartões */
  .ox-corte .table-wrap { overflow: visible; }
  .ox-ctbl, .ox-ctbl tbody, .ox-ctbl tfoot { display: block; }
  .ox-ctbl thead { display: none; }
  .ox-ctbl tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .ox-ctbl tbody td { padding: 0 !important; border: 0; width: auto !important; min-width: 0; }
  .ox-cc-ck { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .ox-cc-p { grid-column: 2; grid-row: 1; min-width: 0; }
  .ox-cc-p b, .ox-cc-p small { white-space: normal; }
  .ox-cc-q { grid-column: 3; grid-row: 1; }
  .ox-cc-e { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .ox-cc-e .bitola { margin: 0; }
  .ox-cc-c, .ox-cc-m { display: none; }
  .ox-cc-v { grid-column: 3; grid-row: 2; }
  .ox-cc-v .ox-u { display: inline; }
  .ox-cc-f { grid-column: 2 / -1; grid-row: 3; }
  .ox-faz { min-width: 0; }
  .ox-ctbl tfoot tr { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 12px 16px; }
  .ox-ctbl tfoot td { padding: 0 !important; border: 0; }
  .ox-ctbl tfoot td:empty { display: none; }
  .ox-ctbl tfoot td:first-child { display: none; }
  .ox-sepbar { padding: 12px 16px 2px; }
  .ox-corte .card-head { flex-wrap: wrap; }
  .ox-no-orc { grid-template-columns: auto minmax(0, 1fr); }
  .ox-no-orc > .btn { grid-column: 1 / -1; justify-content: center; }
  .ox-no-q { grid-template-columns: minmax(0, 1fr) auto; }
  .ox-no-q > .mono { display: none; }
  .ox-segw button span { font-size: 11px; }
  .ox-rt__who { margin-left: 0; }
  .ox-rt__head .pill { margin-left: 0; }
  /* topo e cards mais compactos no celular */
  .os-hero.ox-hero { padding: 18px 16px 16px; border-radius: var(--r-lg); }
  .ox-hero__by { flex-wrap: nowrap; align-items: flex-start; }
  .ox-hero__by > span:last-child { min-width: 0; }
  .ox-hero__acts .btn { flex: 1 1 auto; justify-content: center; }
  .ox-rt { padding: 12px 10px 4px; }
  .ox-route li { padding: 0 2px; }
  .ox-route b { font-size: 11.5px; }
  .ox-grid .card-head { flex-wrap: wrap; }
  .ox-ctbl tfoot td[colspan] { flex-basis: 100%; }
  .ox-filt { flex-direction: column; gap: 10px; }
  .ox-filt__res { order: -1; }
  .ox-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ox-kpis .mini { padding: 12px; align-items: flex-start; }
  .ox-kpis .mini__ic { display: none; }
  .ox-kpis .mini .muted { white-space: normal; line-height: 1.35; }
}

/* Situação do pátio na lista de corte e madeira da OS avulsa (16/10) */
.ox-est { display: block; margin-top: 4px; }
.ox-nb-mad { display: grid; gap: 10px; }
.ox-nb-vazio { margin: 0; font-size: var(--fs-xs); padding: 12px; border-radius: var(--r-sm); background: var(--bg-2); border: 1px solid var(--line); }
.ox-nb-its { display: grid; gap: 6px; }
.ox-nb-it { display: grid; grid-template-columns: 12px minmax(0, 1.3fr) 92px 104px minmax(0, 1.4fr) 32px; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--bg-2); border: 1px solid var(--line); }
.ox-nb-it__n { display: grid; min-width: 0; } .ox-nb-it__n b { font-size: var(--fs-sm); font-weight: 500; } .ox-nb-it__n small { font-size: var(--fs-2xs); color: var(--tx-3); }
.ox-nb-it .select, .ox-nb-q .input { height: 34px; width: 100%; }
.ox-nb-q { display: flex; align-items: center; gap: 6px; font-size: var(--fs-2xs); color: var(--tx-3); }
.ox-nb-est { min-width: 0; }
.ox-nb-pick { padding: 12px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--s1); }
.ox-nb-pick .em-lista { max-height: 260px; }
@media (max-width: 700px) {
  .ox-nb-it { grid-template-columns: 12px minmax(0, 1fr) 32px; }
  .ox-nb-it .select, .ox-nb-q, .ox-nb-est { grid-column: 2; }
  .ox-nb-it .icon-btn { grid-column: 3; grid-row: 1; }
}

/* ---------- Cabeçalho dos cards: título à esquerda e ações à direita na mesma linha; texto de apoio embaixo (16/10) ---------- */
.os-hero.ox-hero { background: var(--s1); }
.ox-head { min-height: 32px; flex-wrap: wrap; }
.ox-head h3 { margin: 0; }
.ox-head__sub { margin: 4px 20px 0; font-size: var(--fs-xs); color: var(--tx-3); line-height: 1.45; }

/* ---------- Levantamento da obra ---------- */
.ox-lev__body { padding: 14px 20px 0; }
.ox-lev .lv-dl { grid-template-columns: 112px minmax(0, 1fr); }
.ox-lev .lv-por { margin-top: 12px; padding-top: 0; border-top: 0; }
.ox-lev__vazio { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; border-radius: var(--r-sm); background: var(--bg-2); border: 1px solid var(--line); }
.ox-lev__vazio > svg { width: 18px; height: 18px; color: var(--gold-tx); margin-top: 2px; }
.ox-lev__vazio b { display: block; font-size: var(--fs-sm); font-weight: 600; }
.ox-lev__vazio span { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--tx-3); line-height: 1.5; }
.ox-lev__vazio .btn { margin-top: 10px; }
.ox-lev__onde { display: flex; align-items: center; gap: 6px; margin: 14px 20px 0; padding: 11px 0 16px; border-top: 1px solid var(--line); font-size: var(--fs-2xs); color: var(--tx-3); }
.ox-lev__onde > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ox-lev__onde svg { width: 12px; height: 12px; flex: none; }
.ox-lev__onde .lnk { flex: none; font-size: var(--fs-2xs); }

/* ---------- Histórico: edições com "de → para" ---------- */
.ox-hist li.t-edicao .ox-hist__ic { --c: var(--gold-tx); --cs: var(--gold-soft); }
.ox-hist li.t-orc .ox-hist__ic { --c: var(--info); --cs: var(--info-soft); }
.ox-hist b .lnk { font-weight: 500; }
.ox-mud { list-style: none; margin: 8px 0 2px; padding: 9px 12px; display: grid; gap: 7px; border-radius: var(--r-sm); background: var(--bg-2); border: 1px solid var(--line); }
.ox-mud li { display: grid; grid-template-columns: minmax(110px, 32%) minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: var(--fs-xs); line-height: 1.4; }
.ox-mud__k { color: var(--tx-3); overflow-wrap: anywhere; }
.ox-mud__v { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; overflow-wrap: anywhere; }
.ox-mud__v i { display: inline-grid; color: var(--tx-4); }
.ox-mud__v svg { width: 12px; height: 12px; }
.ox-mud__de { color: var(--tx-3); }
.ox-mud__para { color: var(--tx); font-weight: 500; }
.ox-mud__nada { color: var(--tx-4); font-style: italic; }
.ox-mud li.ox-mud__solo { grid-template-columns: minmax(0, 1fr); color: var(--tx-2); }
.ox-mud li.ox-mud__oculto { display: flex; align-items: center; gap: 6px; color: var(--tx-3); }
.ox-mud__oculto svg { width: 12px; height: 12px; flex: none; }

/* ---------- Modal Editar OS ---------- */
.modal.ox-edit { width: min(800px, calc(100vw - 32px)); }
.ox-eo { display: grid; padding-top: 8px; padding-bottom: 8px; }
.ox-eo-sec { display: grid; gap: 12px; padding: 18px 0; border-top: 1px solid var(--line); min-width: 0; }
.ox-eo-sec:first-child { border-top: 0; padding-top: 4px; }
.ox-sec-h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; min-height: 30px; }
.ox-sec-h h4 { white-space: nowrap; }
.ox-sm-show { display: none; }
.ox-sec-h h4 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--tx); }
.ox-sec-h h4 svg { width: 15px; height: 15px; color: var(--tx-3); }
.ox-sec-h .lbl { margin: 0; }
.ox-sec-h__n { font-size: var(--fs-xs); color: var(--tx-3); text-align: right; }
.ox-eo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.ox-eo-grid.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ox-eo-f { display: grid; align-content: start; min-width: 0; }
.ox-eo-f.largo { grid-column: 1 / -1; }
.ox-eo-f .input, .ox-eo-f .select { width: 100%; }
.ox-eo-nota { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: var(--fs-xs); color: var(--tx-3); line-height: 1.45; }
.ox-eo-nota svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.ox-eo-aviso { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--line); }
.ox-eo-aviso > svg { width: 18px; height: 18px; color: var(--gold-tx); }
.ox-eo-aviso b { display: block; font-size: var(--fs-sm); font-weight: 600; }
.ox-eo-aviso span { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--tx-3); line-height: 1.45; }
.ox-eo-aviso .btn { white-space: nowrap; }
.ox-chip.lock { cursor: default; }
.ox-chip.lock svg { color: var(--ok); }
.ox-chip[disabled]:not(.lock) { opacity: .4; cursor: not-allowed; }
.ox-kv span.ox-reag { display: flex; align-items: center; gap: 5px; color: var(--warn); font-weight: 500; }
.ox-reag svg { width: 12px; height: 12px; flex: none; }
.ox-nb-sem { color: var(--tx-4); font-size: var(--fs-xs); text-align: center; }
@media (max-width: 640px) {
  .ox-eo-grid, .ox-eo-grid.tres { grid-template-columns: minmax(0, 1fr); }
  .ox-eo-aviso { grid-template-columns: auto minmax(0, 1fr); }
  .ox-eo-aviso > .btn { grid-column: 1 / -1; justify-self: start; }
  .ox-mud li { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .modal.ox-edit .modal__foot { flex-wrap: wrap; }
  .modal.ox-edit .ox-foot-note { flex-basis: 100%; }
  .ox-head__sub { margin: 4px 16px 0; }
  .ox-lev__body { padding: 14px 16px 0; }
  .ox-lev__onde { margin: 14px 16px 0; }
  .ox-lev .lv-dl { grid-template-columns: minmax(0, 1fr); }
  .ox-sm-hide { display: none; } .ox-sm-show { display: inline; }
  .ox-grid .card-head.ox-head { padding: 16px 16px 0; }
  .ox-grid .ox-histcard .card-head.ox-head { flex-wrap: nowrap; } .ox-head h3 { min-width: 0; }
  .ox-sec-h__n { text-align: left; }
  .ox-eo-aviso { align-items: start; }
  .modal.ox-edit .ox-segw button svg { display: none; }
}

/* Ajustar roteiro (16/10) */
.ox-rt__mudar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--bg-2); border: 1px solid var(--line); font-size: var(--fs-xs); color: var(--tx-3); }
.ox-rt__mudar > svg { width: 14px; height: 14px; flex: none; }
.ox-rt__mudar span { flex: 1; min-width: 0; }
.ox-ar { display: grid; gap: 16px; }
.ox-ar-res { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--r-sm); background: var(--bg-2); border: 1px solid var(--line); font-size: var(--fs-sm); }
.ox-ar-res svg { width: 14px; height: 14px; color: var(--tx-3); }
.ox-ar-de { color: var(--tx-3); text-decoration: line-through; }
.ox-ar-sug { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.ox-ar-sug .chip { border-style: solid; }
.ox-obrig { font-size: var(--fs-2xs); color: var(--warn); font-weight: 500; margin-left: 4px; }
#ar-mot { width: 100%; resize: vertical; min-height: 60px; padding-top: 10px; }

/* O que o cliente comprou (16/10) */
.ox-cp td { vertical-align: middle; }
.ox-cp td small { color: var(--tx-3); font-weight: 400; }
.ox-cp-p { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ox-cp-p > span { display: grid; min-width: 0; }
.ox-cp-p b { font-weight: 500; }
.ox-cp-p small { font-size: var(--fs-2xs); }
.ox-cp-sv { display: grid; place-items: center; width: 12px; color: var(--tx-3); font-style: normal; }
.ox-cp-sv svg { width: 13px; height: 13px; }
.ox-cp-tot { display: grid; gap: 8px; padding: 14px 20px 18px; border-top: 1px solid var(--line); }
.ox-cp-tot > div { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-sm); color: var(--tx-2); }
.ox-cp-tot > div b { color: var(--tx); font-weight: 500; }
.ox-cp-tot__t { padding-top: 8px; border-top: 1px solid var(--line); }
.ox-cp-tot__t span { font-weight: 600; color: var(--tx); }
.ox-cp-tot__t b { font-size: var(--fs-lg); font-weight: 600 !important; }
.ox-cp-vazio { padding: 0 20px 14px; margin: 0; font-size: var(--fs-sm); }
.ox-lev__onde { display: flex; align-items: center; gap: 8px; }
.ox-lev__onde > span { flex: 1; min-width: 0; }
.ox-lev__onde .btn { flex: none; }