:root {
    --nav-bg: #1e3a5f;
    --nav-h: 46px;
    --sub-h: 36px;
    --bg: #f0f2f5;
    --white: #ffffff;
    --bor: #dde1e7;
    --bor2: #c8cdd6;
    --txt: #1a2332;
    --txt2: #4a5568;
    --txt3: #8a94a6;
    --blue: #1e6bbf;
    --blue2: #2980d9;
    --acc: #1e6bbf;
    --red: #e53e3e;
    --grn: #2d8a4e;
    --yel: #d69e2e;
    --orn: #dd6b20;
    --badge-cot: #3182ce;
    --badge-apr: #2d8a4e;
    --badge-ped: #6b46c1;
    --badge-ras: #718096;
    --badge-can: #e53e3e;
    --row-hover: #f0f4ff;
    --row-sel: #eff6ff;
    --sans: 'Inter', system-ui, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: var(--bg);
    color: var(--txt);
    font-family: var(--sans);
    font-size: 14px;
    min-height: 100vh;
}

/* ── NAV PRINCIPAL ── */
.nav-main {
    background: #002d5b;
    height: 46px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.nav-logo {
    width: 36px;
    height: 36px;
    background: transparent;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    margin-right: 20px;
    flex-shrink: 0;
    letter-spacing: -1px;
}

.nav-items {
    display: flex;
    gap: 0;
    flex: 1;
}

.nav-item {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    font-weight: 500;
    padding: 0 14px;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all .15s;
    white-space: nowrap;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: var(--sans);
}

.nav-item:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.nav-item.active {
    color: #fff;
    border-bottom-color: #fff;
}

.nav-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-right span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.nav-avatar {
    width: 28px;
    height: 28px;
    background: var(--blue2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* ── SUB-NAV ── */
.nav-sub {
    background: #fff;
    height: 40px;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 0;
    position: sticky;
    top: 46px;
    z-index: 990;
}

.sub-item {
    color: var(--txt2);
    font-size: 14px;
    font-weight: 500;
    padding: 0 12px;
    height: var(--sub-h);
    display: flex;
    align-items: center;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all .12s;
    white-space: nowrap;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: var(--sans);
}

.sub-item:hover {
    color: var(--blue);
}

.sub-item.active {
    color: var(--blue);
    border-bottom-color: var(--blue);
    font-weight: 600;
}

/* ── PAGE ── */
.page {
    padding: 10px 20px 60px;
    max-width: 1920px;
    margin: 0 auto;
}

.screen {
    display: none;
}

.screen.on {
    display: block;
}

/* ── PAGE HEADER (unificado Sprint UX) ── */
.page-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 10px;
    margin-bottom: 0;
    background: #fff;
    border-bottom: 1px solid var(--bor);
}

.page-hdr-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-icon {
    font-size: 18px;
    line-height: 1;
}

.page-title {
    font-size: 17px;
    font-weight: 600;
    color: #1a2332;
    letter-spacing: -0.2px;
}

/* ── BUTTONS ── */
.btn {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 4px;
    border: 1px solid var(--bor2);
    cursor: pointer;
    background: var(--white);
    color: var(--txt2);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all .12s;
    white-space: nowrap;
}

.btn:hover {
    background: var(--bg);
    color: var(--txt);
    border-color: var(--bor2);
}

.btn-blue {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}

.btn-blue:hover {
    background: var(--blue2);
    border-color: var(--blue2);
    color: #fff;
}

.btn-sm {
    font-size: 12px;
    padding: 4px 10px;
}

.btn-del {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--txt3);
    font-size: 15px;
    padding: 3px 6px;
    border-radius: 3px;
}

.btn-del:hover {
    color: var(--red);
    background: #fff0f0;
}

/* ── CARD ── */
.card {
    background: var(--white);
    border: 1px solid var(--bor);
    border-radius: 6px;
    margin-bottom: 16px;
    overflow: hidden;
}

.card-hdr {
    padding: 10px 16px;
    border-bottom: 1px solid var(--bor);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-hdr h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--txt);
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-hdr .hint {
    font-size: 12px;
    color: var(--txt3);
}

.card-body {
    padding: 16px;
}

/* ── METRICS ── */
.metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 8px;
}

.metric {
    background: var(--white);
    border: 1px solid var(--bor);
    border-radius: 6px;
    padding: 14px 16px;
}

.metric .m-lbl {
    font-size: 12px;
    color: var(--txt3);
    font-weight: 500;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.metric .m-val {
    font-size: 22px;
    font-weight: 700;
    color: var(--txt);
}

.metric .m-val.blue {
    color: var(--blue);
}

.metric .m-val.grn {
    color: var(--grn);
}

.metric .m-val.red {
    color: var(--red);
}

/* ── SEARCH / FILTER BAR (Sprint UX — linha única com flex-wrap) ── */
.filter-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 0;
    align-items: center;
    flex-wrap: wrap;
}

.filter-bar input,
.filter-bar select {
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--bor2);
    border-radius: 6px;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--txt);
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
}

.filter-bar input {
    flex: 2;
    min-width: 200px;
}

.filter-bar select {
    color: var(--txt2);
    cursor: pointer;
}

.filter-bar input:focus,
.filter-bar select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(30,64,175,0.08);
}

/* ── STICKY TOOLS (base — sobrescrito abaixo pelo bloco definitivo) ── */
.sticky-tools {
    position: sticky;
    top: 46px;
    background: #fff;
    z-index: 980;
    padding: 10px 20px 8px;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

/* ── TABLE ── */
.tbl-wrap {
    overflow-x: clip; /* clip não cria scroll container, então position:sticky funciona relativo ao viewport */
}

table.tbl {
    width: 100%;
    border-collapse: collapse;
}

table.tbl thead {
    border-bottom: 2px solid var(--blue);
}

table.tbl thead th {
    font-size: 12px;
    font-weight: 600;
    color: var(--txt2);
    padding: 6px 8px;
    text-align: left;
    white-space: nowrap;
    background: #f8f9fa;
    cursor: pointer;
    user-select: none;
}

/* Shadow under frozen headers — sobrescrito pelo fix sticky no final */

table.tbl thead th:hover {
    color: var(--blue);
    background: #eef3fa;
}

table.tbl thead th.r {
    text-align: right;
}

table.tbl thead th .sort-icon {
    margin-left: 4px;
    color: var(--txt3);
    font-size: 12px;
}

table.tbl thead th.sorted {
    color: var(--blue);
}

table.tbl thead th.sorted .sort-icon {
    color: var(--blue);
}

table.tbl tbody tr {
    border-bottom: 1px solid var(--bor);
    transition: background .1s;
}

table.tbl tbody tr:hover td {
    background: var(--row-hover);
    cursor: pointer;
}

table.tbl tbody tr.selected td {
    background: var(--row-sel);
}

table.tbl td {
    padding: 5px 8px;
    /* Slimmer padding! */
    font-size: 14px;
    color: var(--txt2);
    white-space: nowrap;
}

table.tbl td.b {
    color: var(--txt);
    font-weight: 600;
}

table.tbl td.mono {
    font-family: 'Courier New', monospace;
    font-size: 14px;
}

table.tbl td.r {
    text-align: right;
}

/* checkbox col */
table.tbl td.chk,
table.tbl th.chk {
    width: 36px;
    text-align: center;
    padding: 8px 6px;
}

table.tbl input[type=checkbox] {
    width: 14px;
    height: 14px;
    accent-color: var(--blue);
    cursor: pointer;
}

/* ── BADGE ── */
.badge {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 3px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.b-cot {
    background: #dbeafe;
    color: #1e40af;
}

.b-apr {
    background: #dcfce7;
    color: #166534;
}

.b-ped {
    background: #ede9fe;
    color: #5b21b6;
}

.b-ras {
    background: #f3f4f6;
    color: #6b7280;
}

.b-can {
    background: #fee2e2;
    color: #991b1b;
}

/* ── PAGINATION ── */
.pag {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    justify-content: flex-end;
}

.pag button {
    background: var(--white);
    border: 1px solid var(--bor2);
    color: var(--txt2);
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 14px;
    font-family: var(--sans);
}

.pag button:hover {
    background: var(--bg);
}

.pag button.on {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
    font-weight: 600;
}

.pag span {
    color: var(--txt3);
    font-size: 14px;
}

/* ── GRID ── */
.g2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.g3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.g4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 12px;
}

/* ── FIELD ── */
.field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--txt2);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.field input,
.field select,
.field textarea {
    background: var(--white);
    border: 1px solid var(--bor2);
    border-radius: 4px;
    color: var(--txt);
    font-family: var(--sans);
    font-size: 14px;
    padding: 7px 10px;
    outline: none;
    width: 100%;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 2px rgba(30, 107, 191, .15);
}

.field select option {
    background: var(--white);
}

.mono-in {
    font-family: 'Courier New', monospace !important;
}

/* ── SECTION TITLE ── */
.sec-t {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--txt3);
    margin: 20px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--bor);
}

/* ── ORC HEADER ── */
.orc-hdr {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
}

.orc-num {
    font-size: 20px;
    font-weight: 700;
    color: var(--txt);
}

.orc-sub {
    font-size: 14px;
    color: var(--txt3);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.proj-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
    border-radius: 3px;
    padding: 2px 8px;
    font-size: 12px;
    color: #1e40af;
    font-weight: 500;
}

.status-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px 12px;
    background: var(--white);
    border: 1px solid var(--bor);
    border-radius: 4px;
}

.sdot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── BOM TABLE ── */
.bom-wrap {
    overflow-x: auto;
}

table.bom {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

table.bom thead th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--txt3);
    font-weight: 600;
    padding: 0 8px 8px;
    text-align: left;
    white-space: nowrap;
    background: #f7f9fc;
}

table.bom thead th.r {
    text-align: right;
}

table.bom tbody tr {
    border-top: 1px solid var(--bor);
}

table.bom tbody tr:hover td {
    background: var(--row-hover);
}

table.bom td {
    padding: 3px 2px;
    vertical-align: middle;
}

table.bom td input,
table.bom td select {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: var(--txt);
    font-family: var(--sans);
    font-size: 14px;
    padding: 5px 7px;
    outline: none;
    width: 100%;
}

table.bom td input:focus,
table.bom td select:focus {
    background: var(--white);
    border-color: var(--blue);
    box-shadow: 0 0 0 2px rgba(30, 107, 191, .1);
}

table.bom td input.val {
    font-family: 'Courier New', monospace;
    text-align: right;
    font-size: 14px;
}

table.bom td .ro {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: var(--txt2);
    padding: 5px 7px;
    text-align: right;
    white-space: nowrap;
}

table.bom td .ro.hi {
    color: var(--txt);
    font-weight: 600;
}

.drag {
    cursor: grab;
    color: var(--txt3);
    padding: 5px 4px;
    font-size: 14px;
    user-select: none;
}

.addbtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: var(--blue);
    background: #f0f7ff;
    border: 1px dashed #93c5fd;
    border-radius: 4px;
    padding: 6px 14px;
    cursor: pointer;
    margin-top: 10px;
    transition: all .12s;
    font-family: var(--sans);
    font-weight: 500;
}

.addbtn:hover {
    background: #dbeafe;
}

/* ── TOTALS ── */
.tpanel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}

.tblock {
    background: var(--white);
    border: 1px solid var(--bor);
    border-radius: 6px;
    padding: 14px 16px;
}

.tblock h4 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--txt3);
    margin-bottom: 12px;
}

.trow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid var(--bor);
}

.trow:last-child {
    border-bottom: none;
}

.trow .lb {
    color: var(--txt2);
    font-size: 14px;
}

.trow .vl {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: var(--txt);
    font-weight: 600;
}

.trow.big .vl {
    font-size: 15px;
    color: var(--blue);
}

.trow.profit .vl {
    color: var(--grn);
}

.trow.loss .vl {
    color: var(--red);
}

.trow.sub {
    opacity: .7;
}

hr.tdiv {
    border: none;
    border-top: 1px solid var(--bor);
    margin: 8px 0;
}

/* ── SIM TABLE ── */
.stable {
    width: 100%;
    border-collapse: collapse;
}

.stable th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--txt3);
    font-weight: 600;
    padding: 0 8px 8px;
    text-align: right;
    background: #f7f9fc;
}

.stable th:first-child {
    text-align: left;
}

.stable td {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: var(--txt2);
    padding: 6px 8px;
    text-align: right;
    border-top: 1px solid var(--bor);
}

.stable td:first-child {
    text-align: left;
    font-family: var(--sans);
    font-size: 12px;
}

.stable td input {
    background: var(--bg);
    border: 1px solid var(--bor2);
    border-radius: 3px;
    color: var(--txt);
    font-family: 'Courier New', monospace;
    font-size: 14px;
    padding: 3px 7px;
    outline: none;
    width: 84px;
    text-align: right;
}

.stable td input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 2px rgba(30, 107, 191, .15);
}

.stable tr.cur td {
    background: #f0f7ff;
}

.stable tr.cur td:first-child {
    color: var(--blue);
    font-weight: 600;
    font-family: var(--sans);
}

.pos {
    color: var(--grn) !important;
}

.neg {
    color: var(--red) !important;
}

/* ── COND ── */
.citem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--bor);
}

.citem:last-child {
    border-bottom: none;
}

.citem input {
    flex: 1;
    min-width: 0;
    background: var(--bg);
    border: 1px solid var(--bor2);
    border-radius: 4px;
    color: var(--txt);
    font-family: var(--sans);
    font-size: 14px;
    padding: 6px 10px;
    outline: none;
}

.citem input:focus {
    border-color: var(--blue);
    background: var(--white);
}

/* ── PROJ CARD ── */
.pcard {
    background: var(--white);
    border: 1px solid var(--bor);
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 8px;
}

.pcard:hover {
    border-color: var(--bor2);
}

.pcard-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.pcard-nome {
    font-size: 14px;
    font-weight: 600;
    color: var(--txt);
}

.pcard-cli {
    font-size: 12px;
    color: var(--txt3);
    margin-top: 1px;
}

.pcard-vars {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.vchip {
    font-size: 12px;
    background: var(--bg);
    border: 1px solid var(--bor2);
    border-radius: 3px;
    padding: 3px 8px;
    color: var(--txt2);
    cursor: pointer;
    transition: all .12s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.vchip:hover {
    border-color: var(--blue);
    color: var(--blue);
    background: #f0f7ff;
}

.vchip.apr {
    border-color: #86efac;
    color: var(--grn);
    background: #f0fdf4;
}

.vchip.ped {
    border-color: #c4b5fd;
    color: #5b21b6;
    background: #f5f3ff;
}

/* ── INSUMOS TOP BAR ── */
.ins-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.ins-toolbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
    justify-content: flex-end;
}

.ins-search {
    flex: 1;
    min-width: 140px;
    max-width: 220px;
    font-size: 14px;
    padding: 5px 10px;
    border: 1px solid var(--bor2);
    border-radius: 5px;
    background: var(--white);
    color: var(--txt);
    font-family: var(--sans);
    outline: none;
}
.ins-search:focus { border-color: var(--blue); }

.ins-forn-sel {
    flex: 0 0 160px;
    font-size: 14px;
    padding: 5px 8px;
    border: 1px solid var(--bor2);
    border-radius: 5px;
    background: var(--white);
    color: var(--txt);
    font-family: var(--sans);
    outline: none;
    cursor: pointer;
}
.ins-forn-sel:focus { border-color: var(--blue); }

.ins-action-btns {
    display: flex;
    gap: 5px;
    align-items: center;
}

.ins-btn-export {
    font-size: 12px;
    padding: 5px 10px;
    color: var(--txt2);
    border: 1px solid var(--bor2);
    background: var(--white);
}
.ins-btn-export:hover {
    background: var(--bg);
    border-color: var(--blue);
    color: var(--blue);
}

/* ── INSUMOS TABS (pill style inline) ── */
.ins-tabs-pill {
    display: flex;
    gap: 3px;
    border: none !important;
    margin: 0 !important;
}

.ins-tabs-pill .itab {
    font-size: 12px;
    font-weight: 500;
    color: var(--txt2);
    padding: 4px 11px;
    cursor: pointer;
    border-radius: 20px;
    border: 1px solid var(--bor2) !important;
    background: var(--white);
    transition: all .12s;
    font-family: var(--sans);
    margin-bottom: 0 !important;
    white-space: nowrap;
}

.ins-tabs-pill .itab:hover {
    border-color: var(--blue) !important;
    color: var(--blue);
}

.ins-tabs-pill .itab.on {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue) !important;
    font-weight: 600;
}

/* Classic tabs (used elsewhere) */
.itabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--blue);
    margin-bottom: 14px;
}

.itab {
    font-size: 14px;
    font-weight: 500;
    color: var(--txt2);
    padding: 7px 14px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    background: var(--white);
    border-top: 1px solid var(--bor);
    border-left: 1px solid var(--bor);
    border-right: 1px solid transparent;
    transition: all .12s;
    font-family: var(--sans);
}

.itab:first-child { border-radius: 4px 0 0 0; }
.itab:hover { color: var(--blue); background: #f0f7ff; }
.itab.on {
    color: var(--blue);
    font-weight: 600;
    background: var(--white);
    border-bottom-color: var(--white);
    border-right-color: var(--bor);
}

/* ── SUBCATS + COUNTER ── */
.ins-subcats-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    min-height: 28px;
}

/* ── FILTER ROW (below column headers) ── */
.ins-filter-row {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 0 4px;
    border-bottom: 1px solid var(--bor);
    margin-bottom: 2px;
    min-width: max-content;
    background: var(--bg);
}

.ins-filter-row input {
    font-size: 12px;
    padding: 2px 6px;
    border: 1px solid var(--bor2);
    border-radius: 3px;
    background: var(--white);
    color: var(--txt);
    font-family: var(--sans);
    outline: none;
    box-sizing: border-box;
    min-width: 0;
}

.ins-filter-row input:focus { border-color: var(--blue); }
.ins-filter-row input::placeholder { color: var(--txt3); font-size: 12px; }

.ipanel {
    display: none;
}

.ipanel.on {
    display: block;
}

/* ── INSUMOS TABLE ── */
#ins-panels {
    overflow-x: auto;
    min-width: 0;
}

.irow {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 0;
    border-bottom: 1px solid var(--bor);
    min-width: max-content;
}

.irow:last-child {
    border-bottom: none;
}

.irow input,
.irow select {
    background: var(--bg);
    border: 1px solid var(--bor2);
    border-radius: 4px;
    color: var(--txt);
    font-family: var(--sans);
    font-size: 14px;
    padding: 4px 7px;
    outline: none;
    box-sizing: border-box;
    min-width: 0;
}

.irow input:focus,
.irow select:focus {
    border-color: var(--blue);
    background: var(--white);
}

/* Checkbox de seleção */
.ins-chk {
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--blue);
    cursor: pointer;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Definição de larguras de colunas */
.ins-col-cat  { flex: 0 0 80px;  min-width: 80px;  max-width: 80px; }
.ins-col-nome { flex: 1 1 140px; min-width: 140px; }
.ins-col-forn { flex: 0 0 110px; min-width: 110px; max-width: 110px; }
.ins-col-comp { flex: 0 0 165px; min-width: 165px; max-width: 165px; }
.ins-col-larg { flex: 0 0 58px;  min-width: 58px;  max-width: 58px; }
.ins-col-ref  { flex: 0 0 60px;  min-width: 60px;  max-width: 60px; }
.ins-col-prc  { flex: 0 0 82px;  min-width: 82px;  max-width: 82px; }
.ins-col-un   { flex: 0 0 48px;  min-width: 48px;  max-width: 48px; }
.ins-col-rend { flex: 0 0 62px;  min-width: 62px;  max-width: 62px; }
.ins-col-acts { flex: 0 0 76px;  min-width: 76px;  display: flex; gap: 2px; align-items: center; }

/* UX-Draft: linhas em modo visualização — toda edição passa pelo ✏ → draft */
.irow.ins-view input:not([type="checkbox"]) {
    cursor: default;
    pointer-events: none;
    background: transparent;
    border-color: transparent;
}
.irow.ins-view select {
    pointer-events: none;
    border-color: transparent;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
}

/* Cabeçalho: spans não têm borda */
.ins-header span {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--txt3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 2px;
}

/* Botão clonar */
.btn-clone {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--blue);
    font-size: 15px;
    padding: 3px 5px;
    border-radius: 3px;
}

.btn-clone:hover {
    background: #ebf4ff;
    color: #1a5fa8;
}

/* ── TOAST ── */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #1a2332;
    color: #fff;
    padding: 10px 18px;
    border-radius: 5px;
    font-size: 14px;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
    z-index: 999;
    font-weight: 500;
}

.toast.show {
    opacity: 1;
}

/* ── EMPTY STATE ── */
.empty {
    text-align: center;
    padding: 40px;
    color: var(--txt3);
    font-size: 14px;
}

/* ── COL SORT ARROWS ── */
.col-sort {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    margin-left: 4px;
    vertical-align: middle;
    opacity: .4;
}

.col-sort.asc .arr-d,
.col-sort.desc .arr-u {
    display: none;
}

.col-sort .arr {
    font-size: 12px;
    line-height: 1;
}

th.sorted .col-sort {
    opacity: 1;
}

/* ── TECH SUB (BOM sublabel for fabric) ── */
.tech-sub {
    font-size: 12px;
    color: var(--txt3);
    line-height: 1.3;
    margin-top: 2px;
    letter-spacing: .1px;
}

/* ── BOM FUZZY DROPDOWN ── */
.bom-dd {
    position: absolute;
    z-index: 9999;
    background: var(--white);
    border: 1px solid var(--bor2);
    border-radius: 5px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
    max-height: 220px;
    overflow-y: auto;
    min-width: 220px;
}

.bom-dd-item {
    padding: 7px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--bor);
    font-size: 14px;
    transition: background .08s;
}

.bom-dd-item:last-child {
    border-bottom: none;
}

.bom-dd-item:hover,
.bom-dd-item.selected {
    background: var(--row-hover);
}

.bom-dd-item strong {
    color: var(--txt);
    font-weight: 600;
}

/* ── SEARCH HIGHLIGHT ── */
mark.hl {
    background: #fef08a;
    color: var(--txt);
    border-radius: 2px;
    padding: 0 1px;
    font-weight: 600;
}

/* ── STATUS BAR & ARCHIVE (Sprint UX — refinada) ── */
.idx-sbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0 0 0;
    margin-top: 8px;
    font-size: 14px;
    color: var(--txt2);
    border-top: 1px solid var(--bor);
}

.sbar-sep {
    display: inline-block;
    width: 1px;
    height: 12px;
    background: var(--bor);
    margin: 0 2px;
}

.idx-sbar strong {
    color: var(--txt);
    font-weight: 600;
}

.idx-sbar .blue {
    color: var(--blue);
    font-weight: 600;
}

.idx-sbar .grn {
    color: #2d8a4e;
    font-weight: 600;
}

.idx-sbar .orn {
    color: #c05621;
    font-weight: 600;
}

tr.archived td {
    opacity: 0.5;
    text-decoration: line-through;
    text-decoration-color: rgba(0, 0, 0, 0.2);
}

/* ── Sprint UX: Tooltips aprimorados nos ícones de ação da tabela ── */
.tbl td .btn[title] {
    position: relative;
}
.tbl td .btn[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a2332;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 100;
    opacity: 0;
    animation: ttFadeIn 0.15s ease forwards 0.3s;
}
@keyframes ttFadeIn {
    to { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   STICKY DEFINITIVO — sticky-tools fora do .card, thead dentro
   do tbl-wrap com scroll interno. Sem !important, sem conflito.
   ═══════════════════════════════════════════════════════════════ */

/* — Camada 1: Menu azul — */
.nav-main {
    position: sticky;
    top: 0;
    height: 46px;
    z-index: 1000;
    background: #002d5b;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* — Camada 2: Abas — */
.nav-sub {
    position: sticky;
    top: 46px;
    z-index: 990;
    background: #ffffff;
    border-bottom: 1px solid #ddd;
}

/* — Camada 3: Filtros + StatusBar (Sprint UX — refinado) — */
.sticky-tools {
    position: sticky;
    top: 46px;
    z-index: 980;
    background: #ffffff;
    padding: 10px 20px 8px;
    border-bottom: 2px solid #002d5b;
    margin-bottom: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

/* StatusBar compacta (Sprint UX) */
.idx-sbar {
    padding: 6px 0 0 0;
    margin: 8px 0 0;
    font-size: 14px;
    border-radius: 0;
    border-top: 1px solid var(--bor);
    background: transparent;
    border-left: none;
    border-right: none;
    border-bottom: none;
}

/* — Camada 4: Cabeçalho da tabela
   top é calculado dinamicamente pelo JS (fixStickyThead) com base na
   altura real do sticky-tools. Valor aqui é só fallback. — */
#idx-tbl thead th {
    position: sticky;
    top: 220px; /* fallback — JS ajusta para o valor correto */
    z-index: 970;
    background: #eeeeee;
    box-shadow: 0 2px 3px -1px rgba(0,0,0,0.15);
}

/* — Alinhamento fixo das colunas — */
#idx-tbl {
    table-layout: fixed;
    width: 100%;
}

#idx-tbl thead tr th:nth-child(1)  { width: 36px;  }
#idx-tbl thead tr th:nth-child(2)  { width: 55px;  }
#idx-tbl thead tr th:nth-child(3)  { width: 9%;    } /* cliente — trunca c/ "..." */
#idx-tbl thead tr th:nth-child(4)  { width: 8%;    } /* marca   — trunca c/ "..." */
#idx-tbl thead tr th:nth-child(5)  { width: 10%;   } /* artigo  — trunca c/ "..." */
#idx-tbl thead tr th:nth-child(6)  { width: 14%;   } /* projeto — leve redução */
#idx-tbl thead tr th:nth-child(7)  { width: 85px;  }
#idx-tbl thead tr th:nth-child(8)  { width: 60px;  }
#idx-tbl thead tr th:nth-child(9)  { width: 82px;  }
#idx-tbl thead tr th:nth-child(10) { width: 65px;  }
#idx-tbl thead tr th:nth-child(11) { width: 90px;  }
#idx-tbl thead tr th:nth-child(12) { width: 130px; } /* ações — aumentado para caber 3–4 botões */

#idx-tbl td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 0;
}

/* Coluna de ações: nunca clipa botões */
#idx-tbl td:last-child {
    overflow: visible;
}

/* Sem overflow no card do índice — sticky-tools já está fora */
#screen-idx > .card {
    overflow: visible;
    margin-top: 0;
    border-top: none;
    border-radius: 0 0 6px 6px;
}

/* Reduzir espaço no topo da tela de índice */
.page {
    padding-top: 8px;
}

.page-hdr {
    margin-bottom: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVO — bloco isolado adicionado em 2026-04-06
   Para reverter: apague daqui até o fim do arquivo.
   Nenhuma linha anterior foi modificada.
   ═══════════════════════════════════════════════════════════════ */

/* ── TABLET (≤ 1024px) ──────────────────────────────────────── */
@media (max-width: 1024px) {
    .page { padding: 8px 16px 40px; }
    .metrics { grid-template-columns: repeat(2, 1fr); }
    .g3 { grid-template-columns: 1fr 1fr; }
    .g4 { grid-template-columns: 1fr 1fr; }
    .ins-forn-sel { flex: 0 0 140px; }
}

/* ── MOBILE (≤ 768px) ───────────────────────────────────────── */
@media (max-width: 768px) {

    /* NAV: logo menor + items com scroll horizontal sem barra visível */
    .nav-main { padding: 0 8px; gap: 4px; height: 44px; }
    .nav-logo  { width: 28px; height: 28px; font-size: 10px; flex-shrink: 0; }
    .nav-items { overflow-x: auto; overflow-y: hidden; flex-shrink: 1;
                 gap: 0; scrollbar-width: none; -ms-overflow-style: none; }
    .nav-items::-webkit-scrollbar { display: none; }
    .nav-item  { font-size: 11px; padding: 0 10px; height: 44px;
                 white-space: nowrap; flex-shrink: 0; }
    .nav-right { flex-shrink: 0; }
    .nav-right span { display: none; }

    /* Sub-nav: scroll horizontal sem barra */
    .nav-sub  { overflow-x: auto; overflow-y: hidden;
                scrollbar-width: none; flex-wrap: nowrap !important; }
    .nav-sub::-webkit-scrollbar { display: none; }
    .nav-sub button, .nav-sub select { flex-shrink: 0; white-space: nowrap; }

    /* Sticky offsets (nav ficou 44px) */
    .sticky-tools { top: 46px; }

    /* Page */
    .page { padding: 6px 8px 40px; }
    .page-hdr { flex-wrap: wrap; gap: 6px; }
    .page-title { font-size: 15px; }
    .page-icon  { font-size: 15px; }

    /* Grids */
    .metrics { grid-template-columns: 1fr 1fr; gap: 8px; }
    .g2, .g3 { grid-template-columns: 1fr; gap: 10px; }
    .g4       { grid-template-columns: 1fr 1fr; gap: 8px; }

    /* Cards */
    .card-hdr  { padding: 10px 12px; }
    .card-body { padding: 10px 12px; }

    /* ─── TABELA ÍNDICE: rola horizontalmente ─── 
       Override do overflow-x:clip (necessário para sticky no desktop).
       No mobile o sticky header é menos crítico; priorizamos o scroll. */
    .tbl-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    /* Força a tabela a ser mais larga que a tela → dispara o scroll horizontal */
    table.tbl {
        min-width: 680px;
    }
    /* Células da tabela: remove max-width:0 que espreme colunas no mobile */
    #idx-tbl td {
        max-width: none;
        white-space: nowrap;
    }
    /* Colunas menos importantes ficam mais estreitas mas NÃO somem —
       o usuário desliza para ver (melhor UX que esconder dados) */
    #idx-tbl th:nth-child(6),
    #idx-tbl td:nth-child(6) { display: none; }   /* Projeto/Variação */
    #idx-tbl th:nth-child(11),
    #idx-tbl td:nth-child(11) { display: none; }  /* Faturamento */

    /* BOM */
    .bom-wrap { -webkit-overflow-scrolling: touch; }

    /* Insumos: toolbar empilha */
    .ins-topbar { flex-direction: column; align-items: stretch; gap: 6px; }
    .ins-toolbar-right { flex-wrap: wrap; justify-content: flex-start; gap: 5px; }
    .ins-search  { max-width: 100%; flex: 1 1 180px; }
    .ins-forn-sel { flex: 1 1 140px; }
    .ins-tabs-pill { flex-wrap: wrap; }
    .ins-action-btns { gap: 4px; margin-left: auto; }
    .ins-subcats-bar { flex-wrap: wrap; }

    /* Edit screen */
    .orc-hdr    { flex-direction: column; gap: 8px; }
    .status-bar { flex-wrap: wrap; }
    .field input, .field select, .field textarea { font-size: 12px; padding: 6px 8px; }

    /* Idx sbar (barra de totais) */
    .idx-sbar { flex-wrap: wrap; gap: 6px; }
}

/* ── SMALL MOBILE (≤ 480px) ─────────────────────────────────── */
@media (max-width: 480px) {
    .nav-item  { font-size: 10px; padding: 0 8px; }
    .page      { padding: 4px 6px 30px; }
    .page-title { font-size: 13px; }
    .metrics   { grid-template-columns: 1fr 1fr; }
    .g4        { grid-template-columns: 1fr 1fr; }
    .ins-btn-export { font-size: 10px; padding: 4px 7px; }
    .nav-sub button { font-size: 11px; padding: 4px 8px; }

    /* Tabela ainda mais compacta */
    table.tbl thead th,
    #idx-tbl td { font-size: 11px; padding: 5px 6px; }

    /* Esconde Marca tb em telas muito pequenas */
    #idx-tbl th:nth-child(4),
    #idx-tbl td:nth-child(4) { display: none; }  /* Marca */
}

/* ── LAYOUT 2 COLUNAS — ORÇAMENTO ───────────────────────────── */
.orc-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-top: 16px;
}

/* Coluna esquerda: painel de fotos — sticky enquanto rola o form */
.orc-photos {
    flex: 0 0 290px;
    position: sticky;
    top: 16px;
}

/* Coluna direita: todo o formulário */
.orc-form {
    flex: 1;
    min-width: 0;
}
.orc-form .sec-t:first-child { margin-top: 0; }

/* Foto principal */
.foto-main {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg);
    border: 1px solid var(--bor);
    margin-bottom: 10px;
    cursor: default;
}
.foto-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.foto-main .foto-del {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    border: none;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s;
}
.foto-main:hover .foto-del { opacity: 1; }
.foto-main .foto-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 10px 7px;
    background: linear-gradient(transparent, rgba(0,0,0,.5));
    color: #fff;
    font-size: 12px;
}

/* Miniaturas */
.foto-thumbs {
    display: flex;
    gap: 8px;
}
.foto-thumb {
    position: relative;
    flex: 1;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--bor);
    background: var(--bg);
    cursor: pointer;
    transition: border-color .15s, transform .1s;
}
.foto-thumb:hover { border-color: var(--blue); transform: scale(1.03); }
.foto-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-thumb .foto-del {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    border: none;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s;
}
.foto-thumb:hover .foto-del { opacity: 1; }

/* Botão de adicionar foto */
.foto-add {
    flex: 1;
    aspect-ratio: 1;
    border-radius: 8px;
    border: 1.5px dashed var(--bor2);
    background: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--txt3);
    font-size: 12px;
    font-family: var(--sans);
    transition: border-color .15s, color .15s;
    min-width: 56px;
}
.foto-add:hover { border-color: var(--blue); color: var(--blue); }

/* Estado vazio: grande, convida ao clique */
.foto-empty {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    border: 2px dashed var(--bor2);
    background: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    color: var(--txt3);
    font-size: 14px;
    transition: border-color .15s, color .15s;
}
.foto-empty:hover { border-color: var(--blue); color: var(--blue); }

/* Responsivo: empilha abaixo de 900px */
@media (max-width: 900px) {
    .orc-layout    { flex-direction: column; }
    .orc-photos    { flex: none; width: 100%; position: static; }
    .foto-main     { aspect-ratio: 16 / 9; max-height: 300px; }
}

/* ── FIM DO BLOCO RESPONSIVO ─────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════
   Sprint A — Grade Operacional (ficha técnica de pedido)
   Só estilo, zero regra de negócio. Usada em _renderGradeTable().
   ══════════════════════════════════════════════════════════════════════ */
.grade-op-wrap {
    overflow-x: auto;
    border: 1px solid var(--bor);
    border-radius: 6px;
    background: #fff;
}
table.grade-op {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    table-layout: auto;
}
table.grade-op thead th {
    background: #f4f6fa;
    color: var(--txt2);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--bor2);
    white-space: nowrap;
    text-align: right;
}
table.grade-op thead th.go-var   { text-align: left;  min-width: 160px; max-width: 240px; }
table.grade-op thead th.go-tam   { min-width: 72px; }
table.grade-op thead th.go-total { min-width: 86px; background: #eef2ff; color: var(--blue); border-left: 1px solid var(--bor2); }
table.grade-op thead th.go-act   { width: 34px; background: #f4f6fa; }

table.grade-op tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--bor);
    font-family: 'Courier New', monospace;
    font-size: 14px;
    text-align: right;
    vertical-align: middle;
    background: #fff;
}
table.grade-op tbody tr:hover td { background: #fafbfd; }
table.grade-op tbody td.go-var {
    font-family: var(--sans);
    text-align: left;
    font-weight: 600;
    color: var(--txt);
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
table.grade-op tbody td.go-var input {
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    width: 100%;
    padding: 0;
    outline: none;
}
table.grade-op tbody td.go-var input:focus { background: #eef2ff; }
table.grade-op tbody td.go-tam input {
    width: 100%;
    min-width: 56px;
    border: 1px solid var(--bor2);
    border-radius: 4px;
    padding: 4px 6px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    text-align: right;
    background: #fff;
    outline: none;
    box-sizing: border-box;
}
table.grade-op tbody td.go-tam input:focus { border-color: var(--blue); background: #eef7ff; }
table.grade-op tbody td.go-total {
    font-weight: 700;
    color: var(--blue);
    background: #f8f9fa;
    border-left: 1px solid var(--bor2);
    padding: 6px 12px;
}
table.grade-op tbody td.go-act { padding: 4px; text-align: center; }

/* Linha final TOTAL GERAL — sticky no fundo do wrapper */
table.grade-op tfoot td {
    position: sticky;
    bottom: 0;
    background: #eef2ff;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--blue);
    padding: 8px 10px;
    border-top: 2px solid var(--blue);
    text-align: right;
    z-index: 2;
}
table.grade-op tfoot td.go-var   { font-family: var(--sans); text-align: left; color: var(--txt2); text-transform: uppercase; letter-spacing: .4px; font-size: 12px; }
table.grade-op tfoot td.go-total { background: #dbe5ff; border-left: 1px solid var(--blue); }
table.grade-op tfoot td.go-act   { background: #eef2ff; }

/* Título discreto dos blocos dentro do painel da grade */
.grade-block-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--txt2);
    margin: 0 0 6px 0;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--bor);
}

/* ══════════════════════════════════════════════════════════════════════
   Sprint C — Ficha Técnica editável do Pedido
   Células editáveis leves, sem mexer na estética geral da .tbl
   ══════════════════════════════════════════════════════════════════════ */
table.ficha-ed td {
    padding: 4px 6px;
    vertical-align: middle;
}
table.ficha-ed input.fed-txt,
table.ficha-ed input.fed-num,
table.ficha-ed select.fed-cat,
table.ficha-ed select.fed-un {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 3px;
    padding: 3px 6px;
    font-size: 14px;
    font-family: inherit;
    color: var(--txt);
    outline: none;
    box-sizing: border-box;
}
table.ficha-ed input.fed-num {
    text-align: right;
    font-family: 'Courier New', monospace;
}
table.ficha-ed input.fed-txt:hover,
table.ficha-ed input.fed-num:hover,
table.ficha-ed select.fed-cat:hover,
table.ficha-ed select.fed-un:hover {
    border-color: var(--bor2);
    background: #fff;
}
table.ficha-ed input.fed-txt:focus,
table.ficha-ed input.fed-num:focus,
table.ficha-ed select.fed-cat:focus,
table.ficha-ed select.fed-un:focus {
    border-color: var(--blue);
    background: #eef7ff;
}
table.ficha-ed tbody tr:hover td { background: #fafbfd; }
table.ficha-ed tbody tr .btn-del { visibility: hidden; }
table.ficha-ed tbody tr:hover .btn-del { visibility: visible; }

/* ── Sprint D fase 0: bloco diagnóstico de materiais da ficha (read-only) ── */
.grade-mat-diag {
    margin-top: 18px;
    padding: 10px 12px;
    border: 1px dashed #c7d3e8;
    border-radius: 6px;
    background: #f7f9fc;
}
.grade-mat-diag-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b46c1;
    margin-bottom: 8px;
}
.grade-mat-diag-empty {
    font-size: 12px;
    color: #8a94a6;
    font-style: italic;
    padding: 4px 0;
}
table.grade-mat-diag-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
table.grade-mat-diag-tbl th {
    text-align: left;
    font-weight: 700;
    color: #4b5563;
    padding: 4px 8px;
    border-bottom: 1px solid #dde3ed;
    background: #eef2fa;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
table.grade-mat-diag-tbl td {
    padding: 4px 8px;
    border-bottom: 1px solid #edf1f7;
    vertical-align: top;
}
table.grade-mat-diag-tbl td.mono {
    font-family: 'Courier New', monospace;
    color: #374151;
}
table.grade-mat-diag-tbl td.mat-ref { width: 140px; color: #6b46c1; }
table.grade-mat-diag-tbl td.mat-cat { width: 120px; font-weight: 600; }
table.grade-mat-diag-tbl td.mat-ins { width: 90px; text-align: right; color: #8a94a6; }
table.grade-mat-diag-tbl tr:last-child td { border-bottom: none; }

/* ══════════════════════════════════════════════════════════════════════════
   Sprint D fase 1 — Grade BOM (modelo paralelo isolado, ligado à ficha)
   Render alternativo de _renderGradeTable quando variantesGradeAtivo=true.
   ══════════════════════════════════════════════════════════════════════════ */

/* Banner de ativação/estado (aparece no topo do bloco Grade) */
.grade-bom-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px 0;
    padding: 6px 10px;
    background: #f5f3ff;
    border: 1px solid #c7bff5;
    border-radius: 4px;
}
.grade-bom-banner.grade-bom-banner-on {
    background: #ecfdf5;
    border-color: #6ee7b7;
}
.grade-bom-banner-txt {
    font-size: 12px;
    color: #4c1d95;
    font-weight: 600;
}
.grade-bom-banner.grade-bom-banner-on .grade-bom-banner-txt {
    color: #065f46;
}
.grade-bom-banner-btn {
    flex-shrink: 0;
    font-size: 12px;
    padding: 3px 10px;
}

/* Cabeçalho resumo dos materiais da ficha */
.grade-bom-mats-head {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 0 10px 0;
    padding: 6px 8px;
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: 4px;
}
.grade-bom-mats-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--txt2);
    min-width: 100px;
}
.grade-bom-mats-empty {
    font-size: 12px;
    color: var(--txt3);
    font-style: italic;
}
.grade-bom-mat-chip {
    display: inline-flex;
    align-items: center;
    background: #dbeafe;
    border: 1px solid #93c5fd;
    color: #1e3a8a;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tabela principal da grade BOM */
.grade-bom-wrap {
    overflow-x: auto;
    border: 1px solid #dde3ed;
    border-radius: 4px;
    background: #fff;
}
table.grade-bom {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
table.grade-bom thead th {
    padding: 6px 8px;
    background: #eef2fa;
    border-bottom: 2px solid #c7d0df;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #374151;
    text-align: left;
    white-space: nowrap;
}
table.grade-bom thead th.gb-var { min-width: 140px; }
table.grade-bom thead th.gb-mat {
    min-width: 110px;
    max-width: 180px;
    background: #eef2ff;
    color: #3730a3;
    /* Sprint "Variantes UX" (fix): quebra de linha natural, tipo Excel.
       Título "Etiq. Tam. Bordada" quebra entre palavras quando a coluna
       não cabe. Sem flex/clamp — `display: -webkit-box` num <th> destrói
       o layout de tabela (cada TH vira item flex e empilha). */
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
    vertical-align: middle;
}
table.grade-bom thead th.gb-tam {
    min-width: 60px;
    text-align: center;
    background: #f0fdf4;
    color: #065f46;
}
table.grade-bom thead th.gb-total {
    min-width: 70px;
    text-align: right;
    background: #fef3c7;
    color: #78350f;
}
table.grade-bom thead th.gb-act { width: 32px; }

table.grade-bom tbody td {
    padding: 3px 4px;
    border-bottom: 1px solid #edf1f7;
    vertical-align: middle;
}
table.grade-bom tbody td.gb-var input,
table.grade-bom tbody td.gb-mat input,
table.grade-bom tbody td.gb-tam input {
    width: 100%;
    border: 1px solid var(--bor2);
    border-radius: 3px;
    font-size: 12px;
    padding: 3px 6px;
    background: #fff;
    box-sizing: border-box;
}
table.grade-bom tbody td.gb-tam input {
    text-align: right;
}
table.grade-bom tbody td.gb-total {
    text-align: right;
    font-weight: 700;
    color: #78350f;
    background: #fffbeb;
    padding: 4px 8px;
}
table.grade-bom tbody td.gb-act {
    text-align: center;
    padding: 2px;
}

table.grade-bom tfoot td {
    padding: 6px 8px;
    background: #f3f4f6;
    border-top: 2px solid #c7d0df;
    font-weight: 700;
    font-size: 12px;
    color: #374151;
    text-align: center;
}
table.grade-bom tfoot td.gb-var,
table.grade-bom tfoot td.gb-total-lbl {
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 12px;
    padding-right: 10px;
}
table.grade-bom tfoot td.gb-tam-tot { color: #065f46; }
table.grade-bom tfoot td.gb-total {
    background: #fef3c7;
    color: #78350f;
    text-align: center;
}

/* Grade Variante — linha "Razão da grade" no thead */
table.grade-bom thead tr.gb-razao-row th {
    background: #fefce8;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: #78350f;
    padding: 4px 6px;
}
table.grade-bom thead th.gb-razao-lbl {
    text-align: right;
    font-size: 12px;
    color: #92400e;
}
table.grade-bom thead th.gb-razao-cell {
    text-align: center;
    padding: 3px 4px;
}
table.grade-bom thead th.gb-razao-cell input {
    width: 48px;
    text-align: center;
    border: 1px solid #e0b85a;
    border-radius: 3px;
    font-size: 12px;
    padding: 2px 4px;
    background: #fff;
    box-sizing: border-box;
}
table.grade-bom thead th.gb-razao-hint {
    text-align: center;
    color: #a16207;
    font-size: 14px;
    cursor: help;
}

/* Grade Variante — input editável na coluna Total (distribui conforme razão) */
table.grade-bom tbody td.gb-total input.gb-total-in {
    width: 100%;
    text-align: right;
    font-weight: 700;
    color: #78350f;
    border: 1px solid #e0b85a;
    border-radius: 3px;
    font-size: 12px;
    padding: 3px 6px;
    background: #fffbeb;
    box-sizing: border-box;
}

/* Hardening 2026-04-11: aviso discreto de duplicidade de categoria na ficha.
   Usado em renderFichaTecnica e _renderEtapas. Não muda regra de sync. */
.dup-cat-aviso {
    margin: 6px 0;
    padding: 5px 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 3px solid #f59e0b;
    border-radius: 3px;
    color: #78350f;
    font-size: 12px;
    line-height: 1.45;
    cursor: help;
}

/* ══ OVERRIDE PREÇO NO PEDIDO (Sprint Preço Override) ══
   Bloco dentro da tela do Pedido que expõe preço original do orçamento,
   preço aplicado, badge de override, motivo e ações. */
.ped-preco-bloco {
    font-size: 14px;
    color: var(--txt1);
}
.ped-preco-line {
    margin: 4px 0;
    line-height: 1.5;
}
.ped-preco-lbl {
    font-size: 14px;
    color: var(--txt3);
}
.ped-preco-orig {
    color: var(--txt3);
    opacity: 0.85;
    font-size: 14px;
}
.ped-preco-apl {
    color: var(--txt1);
    font-size: 15px;
    font-weight: 700;
}
.ped-preco-badge-ovr {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    vertical-align: middle;
}
.ped-preco-motivo {
    font-size: 14px;
    color: var(--txt2);
    margin: 4px 0;
    padding: 5px 10px;
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    border-radius: 2px;
}
.ped-preco-data {
    color: var(--txt3);
    font-size: 12px;
}
.ped-preco-hint {
    color: var(--txt3);
    font-size: 12px;
    font-style: italic;
    margin-left: 6px;
}
.ped-preco-actions {
    margin-top: 6px;
}

/* ── Sprint Pedido Completo — Resumo Financeiro & Pagamentos ── */
.fin-kpis {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.fin-kpi {
    flex: 1 1 140px;
    background: var(--bg2);
    border: 1px solid var(--bor);
    border-radius: 8px;
    padding: 10px 14px;
    min-width: 120px;
}
.fin-kpi-lbl {
    font-size: 12px;
    color: var(--txt2);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}
.fin-kpi-val {
    font-size: 20px;
    font-weight: 700;
    color: var(--txt);
    line-height: 1.15;
}
.fin-kpi-sub {
    font-size: 12px;
    color: var(--txt3);
    margin-top: 2px;
}
.fin-kpi.green  { border-color: #22c55e; background: #f0fdf4; }
.fin-kpi.amber  { border-color: #f59e0b; background: #fffbeb; }
.fin-kpi.red    { border-color: #ef4444; background: #fef2f2; }
.fin-kpi.green .fin-kpi-val { color: #16a34a; }
.fin-kpi.amber .fin-kpi-val { color: #b45309; }
.fin-kpi.red   .fin-kpi-val { color: #dc2626; }
/* Sprint Pedido Completo – Resumo Financeiro compacto (fin-strip) */
.fin-strip {
    display: flex;
    gap: 0;
    border: 1px solid var(--bor);
    border-radius: 8px;
    overflow: hidden;
    background: var(--card);
    margin-bottom: 4px;
}
.fin-s-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 10px 8px;
    border-right: 1px solid var(--bor);
    gap: 2px;
    text-align: center;
}
.fin-s-item:last-child { border-right: none; }
.fin-s-lbl {
    font-size: 12px;
    font-weight: 700;
    color: var(--txt3);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.fin-s-val {
    font-size: 15px;
    font-weight: 700;
    color: var(--txt);
    line-height: 1.2;
}
.fin-s-sub {
    font-size: 12px;
    color: var(--txt3);
    margin-top: 1px;
}
.fin-s-item.green { background: #f0fdf4; }
.fin-s-item.amber { background: #fffbeb; }
.fin-s-item.red   { background: #fef2f2; }
.fin-s-item.green .fin-s-val { color: #16a34a; }
.fin-s-item.amber .fin-s-val { color: #b45309; }
.fin-s-item.red   .fin-s-val { color: #dc2626; }


.fin-parc-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-top: 2px;
}
.fin-parc-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.fin-parc-item label {
    font-size: 12px;
    color: var(--txt2);
    font-weight: 600;
}
.fin-parc-inp {
    width: 90px;
    text-align: right;
    font-size: 14px;
}

/* Pagamentos cliente */
.pgtos-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-top: 4px;
}
.pgtos-table th {
    text-align: left;
    font-size: 12px;
    color: var(--txt2);
    font-weight: 600;
    padding: 4px 6px;
    border-bottom: 1px solid var(--bor);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.pgtos-table td {
    padding: 5px 6px;
    border-bottom: 1px solid var(--bor);
    vertical-align: middle;
}
.pgtos-table tr:last-child td { border-bottom: none; }
.pgtos-table input[type=date],
.pgtos-table input[type=text],
.pgtos-table select {
    font-size: 14px;
    padding: 2px 5px;
    border: 1px solid var(--bor);
    border-radius: 4px;
    background: var(--bg);
    color: var(--txt);
    width: 100%;
}
.pgto-recebido { background: #f0fdf4 !important; }
.pgto-recebido td { color: #15803d; }
.pgtos-footer td {
    font-weight: 700;
    font-size: 14px;
    color: var(--txt2);
    padding-top: 8px;
    border-top: 2px solid var(--bor);
}

/* ── Etapas de Produção: inputs e selects com borda suave ── */
#ped-etapas input,
#ped-etapas select {
    border-color: #e8eaed !important;
}
#ped-etapas input:focus,
#ped-etapas select:focus {
    border-color: var(--blue) !important;
    outline: none;
}

/* ══════════════════════════════════════════════════════════════
   ERP DESIGN SYSTEM — Sprint UI 1 (2026-05-06)
   Classes reutilizáveis para modais, formulários e contatos.
══════════════════════════════════════════════════════════════ */

/* ── ERP Modal ── */
@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.erp-modal {
    background: var(--white);
    border-radius: 10px;
    width: calc(100vw - 48px);
    max-width: 1100px;
    height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 48px rgba(0,0,0,.28);
    overflow: hidden;
    animation: modalFadeIn .18s ease-out;
}
/* ── Abas do modal de cliente ── */
.cli-modal-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    flex-shrink: 0;
}
.cli-modal-tab {
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    letter-spacing: .1px;
    transition: color .12s, border-color .12s;
}
.cli-modal-tab:hover { color: #1e40af; }
.cli-modal-tab.active {
    color: #1e40af;
    border-bottom-color: #1e40af;
    background: #fff;
}
.erp-modal-hdr {
    padding: 14px 22px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: #f8fafc;
}
.erp-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -.2px;
}
.erp-modal-close {
    background: none; border: none; cursor: pointer;
    font-size: 22px; color: #94a3b8; padding: 0 4px; line-height: 1;
    border-radius: 4px;
    transition: color .1s, background .1s;
}
.erp-modal-close:hover { color: var(--red); background: #fff0f0; }
.erp-modal-body {
    overflow-y: auto;
    padding: 22px 30px;
    flex: 1;
}
.erp-modal-ftr {
    padding: 12px 22px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: #f8fafc;
}

/* ── ERP Section ── */
.erp-sec {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #475569;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e2e8f0;
}
.erp-sec-wrap {
    margin-bottom: 22px;
}

/* ── ERP Grids ── */
.erp-grid-2 { display: grid; grid-template-columns: 1fr 1fr;           gap: 0 16px; }
.erp-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr;       gap: 0 16px; }
.erp-grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;   gap: 0 16px; }

/* ── ERP Field ── */
.erp-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}
.erp-field label {
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}
.erp-field input,
.erp-field select {
    background: var(--white);
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #0f172a;
    font-family: var(--sans);
    font-size: 14px;
    padding: 7px 11px;
    height: 36px;
    outline: none;
    width: 100%;
    transition: border-color .15s, box-shadow .15s;
}
.erp-field textarea {
    background: var(--white);
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #0f172a;
    font-family: var(--sans);
    font-size: 14px;
    padding: 7px 11px;
    outline: none;
    width: 100%;
    resize: vertical;
    min-height: 58px;
    transition: border-color .15s, box-shadow .15s;
}
.erp-field input:focus,
.erp-field select:focus,
.erp-field textarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.10);
}
.erp-field input::placeholder,
.erp-field textarea::placeholder {
    color: #94a3b8;
    font-size: 14px;
}
.erp-field select option {
    background: var(--white);
}

/* Uppercase em campos que devem exibir maiúsculo */
.erp-ucase { text-transform: uppercase; }

/* ── ERP Contact Card ── */
.erp-ct-card {
    border: 1px solid var(--bor);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #f8fafc;
}
.erp-ct-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.erp-ct-nome {
    font-size: 14px;
    font-weight: 700;
    color: var(--txt);
}
.erp-ct-badge {
    font-size: 12px;
    background: #fef3c7;
    color: #92400e;
    border-radius: 3px;
    padding: 1px 6px;
    font-weight: 700;
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.erp-ct-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Botões ERP ── */
.btn-erp-neutral {
    background: none;
    border: 1px solid var(--bor2);
    border-radius: 4px;
    color: var(--txt3);
    font-size: 12px;
    font-weight: 500;
    padding: 3px 9px;
    cursor: pointer;
    font-family: var(--sans);
    transition: all .1s;
}
.btn-erp-neutral:hover {
    color: var(--txt);
    border-color: #9ca3af;
    background: var(--bg);
}
.btn-erp-danger {
    background: none;
    border: 1px solid var(--bor2);
    border-radius: 4px;
    color: var(--txt3);
    font-size: 12px;
    font-weight: 500;
    padding: 3px 9px;
    cursor: pointer;
    font-family: var(--sans);
    transition: all .1s;
}
.btn-erp-danger:hover {
    color: var(--red);
    border-color: var(--red);
    background: #fff0f0;
}

/* ════════════════════════════════════════════════════
   UX/UI Sprint — Modal Cliente
   ════════════════════════════════════════════════════ */

/* ── Checkbox row uniforme ── */
.erp-check-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--txt);
    cursor: pointer;
    line-height: 1.4;
    padding: 1px 0;
    text-transform: none;
    letter-spacing: 0;
}
.erp-check-row input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--blue, #2563eb);
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

/* ── Botão-ferramenta (RF / Sintegra / MEI / Grupo) ── */
.btn-tool {
    height: 32px;
    padding: 0 10px;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    flex-shrink: 0;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #475569;
    font-family: var(--sans);
    line-height: 1;
    transition: background .12s, border-color .12s;
}
.btn-tool:hover { background: #f1f5f9; border-color: #94a3b8; }
.btn-tool.azul  { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.btn-tool.azul:hover  { background: #dbeafe; border-color: #93c5fd; }
.btn-tool.verde { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.btn-tool.verde:hover { background: #dcfce7; border-color: #86efac; }
.btn-tool.amber { background: #fefce8; border-color: #fde68a; color: #92400e; }
.btn-tool.amber:hover { background: #fef9c3; border-color: #fcd34d; }

/* ── IE row: input + botões em linha ── */
.erp-ie-row {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
}
.erp-ie-row input { flex: 1; min-width: 0; }

/* ── Campo-checkbox (alinha no fundo da célula do grid) ── */
.erp-field-check {
    display: flex;
    align-items: flex-end;
    padding-bottom: 12px;
    margin-bottom: 12px;
}

/* ── Hint de seção ── */
.erp-sec-hint {
    font-size: 12px;
    color: var(--txt3);
    margin: 3px 0 10px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}


/* ═══════════════════════════════════════════════════════════════
   TELA CLIENTES — Grade Operacional ERP
   ═══════════════════════════════════════════════════════════════ */

/* ── Topbar ── */
.cli-topbar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: nowrap;
    min-width: 0;
}
.cli-search-input {
    flex: 1;
    height: 32px;
    border: 1px solid #D7E0EA;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 14px;
    font-family: var(--sans);
    color: var(--txt);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
    min-width: 0;
}
.cli-search-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.10);
    outline: none;
}
.cli-search-input::placeholder { color: #94a3b8; }

/* Pill toggle Ativos / Arquivados */
.cli-arq-pill {
    display: flex;
    align-items: center;
    background: #EEF3F8;
    border-radius: 20px;
    padding: 2px 4px;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    border: 1px solid #D7E0EA;
}
.cli-pill-opt {
    font-size: 12px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 14px;
    color: #64748b;
    transition: background .12s, color .12s;
    white-space: nowrap;
}
.cli-pill-sep { color: #c4cfdc; font-size: 12px; padding: 0 1px; }
.cli-arq-pill:not(.arq-ativo) .cli-pill-ativos {
    background: #fff;
    color: #0F172A;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.cli-arq-pill.arq-ativo .cli-pill-arq {
    background: #fff;
    color: #0F172A;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

/* ── Layout master: lista + painel ── */
.cli-master-wrap {
    display: flex;
    /* gap e overflow removidos — painel lateral inativo; lista ocupa largura total */
    align-items: flex-start;
    min-width: 0;
}
.cli-lista-wrap {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.cli-detalhe-wrap {
    width: 36%;
    max-width: 430px;
    min-width: 300px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #D7E0EA;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 148px);
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   GRADE OPERACIONAL
   ═══════════════════════════════════════════════════════════════ */

.cli-grid {
    width: 100%;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

/* Cabeçalho da grade */
.cli-grid-head {
    display: flex;
    align-items: center;
    background: #F8FAFC;
    border-bottom: 2px solid #E2E8F0;
    padding: 0;
    min-width: 0;
}
.cli-grid-head .cli-gc {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #64748b;
    padding: 7px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
}

/* Seção de grupo dentro da grade */
.cli-grid-sect {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #F1F5F9;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #64748b;
}
.cli-grid-sect:first-child { border-top: none; }
.cli-group-count {
    font-size: 12px;
    font-weight: 400;
    background: #E2E8F0;
    border-radius: 3px;
    padding: 1px 5px;
    color: #64748b;
    text-transform: none;
    letter-spacing: 0;
}
.cli-group-edit-btn {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 12px;
    padding: 0 3px;
    border-radius: 3px;
    line-height: 1;
    margin-left: auto;
}
.cli-group-edit-btn:hover { color: var(--txt); background: #E2E8F0; }

/* ── Linha da grade ── */
.cli-grid-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #EEF3F8;
    cursor: pointer;
    transition: background .1s;
    min-height: 52px;
    background: #fff;
}
.cli-grid-row:last-child { border-bottom: none; }
.cli-grid-row:hover { background: #F8FAFC; }
.cli-grid-row.ativo {
    background: #EFF6FF;
    border-left: 3px solid #2563eb;
}
.cli-grid-row.ativo .cli-gc { padding-left: 5px; }
.cli-grid-row.ativo .cli-gc-nome { padding-left: 5px; }
.cli-grid-row.arquivado { opacity: .55; }

/* ── Células da grade (colunas) ── */
.cli-gc {
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: #334155;
    flex-shrink: 0;
    min-width: 0;
    display: flex;
    align-items: center;
}

/* Coluna Cliente — flex, ocupa espaço restante */
.cli-gc-nome {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 10px;
    overflow: hidden;
}
.cli-g-nome {
    font-size: 14px;
    font-weight: 600;
    color: #0F172A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    line-height: 1.3;
}
.cli-g-razao {
    font-size: 14px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    line-height: 1.2;
}

/* Coluna Documento */
.cli-gc-doc {
    width: 230px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    color: #475569;
    letter-spacing: 0;
}

/* Coluna Cidade/UF */
.cli-gc-cidade { width: 175px; font-size: 14px; color: #475569; }

/* Coluna Telefone principal */
.cli-gc-contato {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 6px 10px;
}
.cli-ct-fone {
    font-size: 14px;
    color: #1e40af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}
.cli-ct-fone-label {
    font-size: 12px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1;
}
.cli-ct-linha {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 0;
    border-bottom: 1px solid #f1f5f9;
}
.cli-ct-linha:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
/* Links WA/email (mantidos para uso futuro no painel lateral) */
.cli-ct-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    transition: background .12s, transform .1s;
    flex-shrink: 0;
}
.cli-ct-link:hover { transform: scale(1.12); }
.cli-ct-link-wa   { background: #dcfce7; color: #16a34a; }
.cli-ct-link-wa:hover { background: #bbf7d0; }
.cli-ct-link-mail { background: #dbeafe; color: #1d4ed8; }
.cli-ct-link-mail:hover { background: #bfdbfe; }

/* Coluna Tipo/Status */
.cli-gc-tipo { width: 115px; justify-content: flex-start; font-size: 13.5px; }

/* Coluna Pendências */
.cli-gc-pend { width: 95px; justify-content: flex-start; }

/* Coluna Orç./Ped. */
.cli-gc-orcped { width: 100px; font-size: 14px; color: #475569; }


/* Coluna Último mov. */
.cli-gc-mov { width: 95px; font-size: 14px; color: #64748b; }

/* Coluna Ações */
.cli-gc-acoes {
    width: 50px;
    justify-content: center;
    flex-shrink: 0;
}
.cli-g-edit-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    color: #94a3b8;
    transition: color .1s, border-color .1s, background .1s;
}
.cli-g-edit-btn:hover {
    color: #2563eb;
    border-color: #BFDBFE;
    background: #EFF6FF;
}

/* ── Badges ── */
.cli-badge {
    display: inline-block;
    font-size: 12px;
    border-radius: 3px;
    padding: 1px 5px;
    white-space: nowrap;
    font-weight: 500;
    background: #EEF3F8;
    color: #64748b;
    line-height: 1.5;
}
.cli-badge-pend   { background: #fef9c3; color: #a16207; cursor: pointer; }
.cli-badge-orc    { background: #EFF6FF; color: #1d4ed8; font-size: 14px; padding: 2px 7px; }
.cli-badge-ped    { background: #F0FDF4; color: #15803d; font-size: 14px; padding: 2px 7px; }
.cli-badge-bloq   { background: #FEE2E2; color: #dc2626; }
.cli-badge-semov  { background: #FEF3C7; color: #92400e; }
.cli-badge-inativo { background: #F3F4F6; color: #6b7280; }
.cli-badge-incomp { background: #FEF3C7; color: #b45309; cursor: help; }
.cli-badge-dupl   { background: #fee2e2; color: #b91c1c; cursor: help; }
.cli-badge-inad   { background: #fef2f2; color: #dc2626; border: 1px solid #fca5a5; font-weight: 600; }
.cli-badge-curva  { font-weight: 600; }
.cli-badge-curva-a { background: #d1fae5; color: #065f46; }
.cli-badge-curva-b { background: #fef9c3; color: #854d0e; }
.cli-badge-curva-c { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; }

/* ── Texto vazio "—" nas células ── */
.cli-gc-empty { color: #cbd5e1; font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════
   PAINEL DIREITO (detalhe do cliente)
   ═══════════════════════════════════════════════════════════════ */

.cli-panel-inner {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px 6px;
    min-height: 0;
}
.cli-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #EEF3F8;
}
.cli-panel-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: .5px;
}
.cli-panel-info { flex: 1; min-width: 0; }
.cli-panel-nome {
    font-size: 14px;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.2;
    word-break: break-word;
    margin-bottom: 2px;
}
.cli-panel-cnpj {
    font-size: 12px;
    color: #64748b;
    font-family: var(--mono, monospace);
    letter-spacing: .3px;
}
.cli-panel-city { font-size: 12px; color: #94a3b8; margin-top: 1px; }
.cli-panel-badges { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.cli-panel-close {
    background: none;
    border: none;
    font-size: 18px;
    color: #94a3b8;
    cursor: pointer;
    line-height: 1;
    padding: 0 3px;
    border-radius: 4px;
    flex-shrink: 0;
}
.cli-panel-close:hover { color: #dc2626; background: #fff0f0; }

/* KPIs — só mostrados quando há dado real */
.cli-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-bottom: 10px;
}
.cli-kpi {
    background: #F8FAFC;
    border: 1px solid #E8EEF5;
    border-radius: 6px;
    padding: 6px 10px;
}
.cli-kpi-val {
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cli-kpi-lbl {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.cli-kpi.cli-kpi-danger .cli-kpi-val { color: #dc2626; }
.cli-kpi.cli-kpi-danger .cli-kpi-lbl { color: #dc2626; opacity: .8; }

/* Sem histórico */
.cli-sem-hist {
    font-size: 14px;
    color: #94a3b8;
    padding: 8px 0 10px;
    font-style: italic;
}

/* ── Abas ── */
.cli-tabs {
    display: flex;
    border-bottom: 2px solid #EEF3F8;
    margin-bottom: 8px;
    gap: 0;
}
.cli-tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 4px 8px 6px;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: color .1s, border-color .1s;
    white-space: nowrap;
    font-family: var(--sans);
}
.cli-tab-btn:hover { color: #334155; }
.cli-tab-btn.ativo {
    color: #2563eb;
    border-bottom-color: #2563eb;
    font-weight: 700;
}
.cli-tab-cnt {
    display: inline-block;
    background: #EEF3F8;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    padding: 0 4px;
    min-width: 14px;
    text-align: center;
    margin-left: 2px;
    color: #64748b;
    vertical-align: middle;
}
.cli-tab-btn.ativo .cli-tab-cnt { background: #DBEAFE; color: #1d4ed8; }
.cli-tb-content { padding-bottom: 4px; }

/* Pendências */
.cli-pend-item {
    display: flex;
    align-items: flex
/* ═══════════════════════════════════════════════
   BASES TABLE — layout inspirado no grid Clientes
   ═══════════════════════════════════════════════ */

/* Layout fixo: respeita as larguras do thead */
table.bases-tbl {
    table-layout: fixed;
    width: 100%;
}

/* Coluna Nome — largura controlada, texto truncado */
table.bases-tbl th.bases-th-nome,
table.bases-tbl td.bases-td-nome {
    width: 260px;
    max-width: 260px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Container com borda arredondada */
.bases-tbl-wrap {
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

/* Header */
table.bases-tbl thead {
    border-bottom: 2px solid #E2E8F0;
}
table.bases-tbl thead th {
    background: #F8FAFC;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #64748b;
    padding: 8px 10px;
    border-bottom: none;
    cursor: default;
}
table.bases-tbl thead th:hover {
    background: #F8FAFC;
    color: #64748b;
}

/* Linhas */
table.bases-tbl tbody tr {
    border-bottom: 1px solid #EEF3F8;
    transition: background .1s;
}
table.bases-tbl tbody tr:last-child {
    border-bottom: none;
}
table.bases-tbl tbody tr:hover td {
    background: #F8FAFC;
    cursor: pointer;
}

/* Células */
table.bases-tbl td {
    padding: 10px 10px;
    font-size: 14px;
    color: #334155;
    vertical-align: middle;
}

/* Coluna Código — badge azul estilo monospace */
table.bases-tbl td.bases-td-codigo {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: 700;
    color: #1d4ed8;
    white-space: nowrap;
}

/* Coluna Nome — primário + subtítulo tipo Clientes */
table.bases-tbl td.bases-td-nome .bases-nome-primario {
    font-size: 14px;
    font-weight: 600;
    color: #0F172A;
    display: block;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
table.bases-tbl td.bases-td-nome .bases-nome-tipo {
    font-size: 12px;
    color: #94a3b8;
    display: block;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Células numéricas (NCM, Peso, Uso) */
table.bases-tbl td.bases-td-ncm {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #475569;
}
table.bases-tbl td.bases-td-peso {
    font-size: 14px;
    color: #475569;
    text-align: right;
}
table.bases-tbl td.bases-td-uso {
    text-align: center;
}

/* Célula Ativa */
table.bases-tbl td.bases-td-ativa {
    text-align: center;
    font-size: 14px;
}

/* Célula Ações */
table.bases-tbl td.bases-td-acoes {
    text-align: right;
    white-space: nowrap;
}

/* "—" vazio */
table.bases-tbl .bases-vazio {
    color: #cbd5e1;
    font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Sprint UX Cleanup 1 (2026-05-11) — Dropdown nativo + badges + aviso
 * Não afeta @page/print; classes prefixadas com `ux-` para isolamento.
 * ═══════════════════════════════════════════════════════════════════════════ */

.ux-dd {
    position: relative;
    display: inline-block;
}
.ux-dd > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    /* Herda visual de .btn .btn-sm (já aplicado via classe HTML) */
}
.ux-dd > summary::-webkit-details-marker { display: none; }
.ux-dd > summary::marker { display: none; content: ''; }
.ux-dd[open] > summary {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.20);
    position: relative;
    z-index: 5;
}

.ux-dd-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 200;
    min-width: 240px;
    max-width: 340px;
    background: var(--card, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ux-dd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--txt, #1a2332);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background-color .12s ease;
    font-family: inherit;
}
.ux-dd-item:hover, .ux-dd-item:focus {
    background: var(--bg, #f7f9fc);
    outline: none;
}
.ux-dd-emoji {
    flex-shrink: 0;
    font-size: 16px;
    width: 22px;
    text-align: center;
}
.ux-dd-label {
    flex: 1;
    min-width: 0;
    font-weight: 600;
}
.ux-dd-sep {
    height: 1px;
    background: var(--border, #e5e7eb);
    margin: 4px -2px;
}

/* ─── [Sprint UX Cleanup 1B 2026-05-11] Badges removidas da UI.
       Patrick reprovou (visualmente confusas). Classes preservadas inertes
       caso volte uso futuro; sem uso atual no HTML. ─── */
.ux-badge,
.ux-badge-cliente,
.ux-badge-interno,
.ux-badge-legado,
.ux-badge-novo { display: none; }

/* ─── Aviso fixo (ex: estoque manual) ─── */
.ux-note {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 14px;
}
.ux-note-warn {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}
.ux-note strong { font-weight: 700; }