/* NEXUZ 4.0.0 · menú por áreas y pantallas nuevas (Firma electrónica, Encarpado, Facturas,
   Firmas y contactos, Almacenamiento y archivo, planilla). Usa los colores del armazón. */

/* ---------- Menú por áreas ---------- */
#erpAuthed .erp-nav .nx-nav-hidden { display: none !important; }
#erpAuthed .erp-nav.nx4-nav .nx-hub { display: flex; align-items: center; gap: 10px; }
#erpAuthed .erp-nav.nx4-nav .nx-hub-icon { width: 22px; text-align: center; font-size: 16px; line-height: 1; }
#erpAuthed .erp-nav.nx4-nav .erp-nav-group { letter-spacing: .08em; }
body.nx-collapsed #erpAuthed .erp-nav.nx4-nav .nx-hub-label { display: none; }
.nx4-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 16px; padding: 6px; background: #fff; border: 1px solid var(--nx-line, #e3e6ea); border-radius: 12px; }
.nx4-tabs[hidden] { display: none; }
.nx4-tabs-title { font-weight: 800; color: var(--nx-ink, #1b1f23); padding: 0 10px 0 6px; margin-right: 4px; border-right: 1px solid var(--nx-line, #e3e6ea); }
.nx4-tabs button { border: 0; background: transparent; padding: 8px 12px; border-radius: 8px; font: inherit; font-weight: 600; color: var(--nx-text, #39424a); cursor: pointer; }
.nx4-tabs button:hover { background: #f2f3f5; }
.nx4-tabs button.on { background: var(--nx-graphite, #1f2428); color: #fff; }

/* ---------- Base ---------- */
.nx4-screen { color: var(--nx-ink, #1b1f23); }
.nx4-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.nx4-head h2 { margin: 0 0 4px; font-size: 26px; }
.nx4-head p { margin: 0; color: var(--nx-muted, #5e6872); max-width: 760px; }
.nx4-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.nx4-actions.end { justify-content: flex-end; margin-top: 12px; }
.nx4-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--nx-line, #e3e6ea); background: #fff; color: var(--nx-ink, #1b1f23); border-radius: 10px; padding: 9px 14px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.nx4-btn:hover { border-color: #c9ced3; }
.nx4-btn.primary { background: var(--nx-red, #cf0912); border-color: var(--nx-red, #cf0912); color: #fff; }
.nx4-btn.primary:hover { background: var(--nx-red-dark, #a3070d); }
.nx4-btn.ghost { background: transparent; border-color: transparent; color: var(--nx-muted, #5e6872); }
.nx4-btn.danger { color: #a00000; }
.nx4-btn.small { padding: 5px 10px; font-size: 13px; border-radius: 8px; }
.nx4-btn[disabled] { opacity: .6; cursor: progress; }
.nx4-card { background: #fff; border: 1px solid var(--nx-line, #e3e6ea); border-radius: 14px; padding: 16px; margin-bottom: 14px; }
.nx4-card h3, .nx4-card h4, .nx4-col h4 { margin: 0 0 10px; }
.nx4-sub { color: var(--nx-muted, #5e6872); font-size: 12.5px; }
.nx4-note { background: #f5f8fc; border: 1px solid #dfe7f1; border-radius: 12px; padding: 12px 14px; color: #39424a; margin: 10px 0; }
.nx4-note.small { font-size: 13px; }
.nx4-alert { border-radius: 10px; padding: 10px 12px; background: var(--nx-warn-soft, #fff3dc); color: var(--nx-warn, #7a4b00); margin: 10px 0; font-weight: 600; }
.nx4-alert.ok { background: var(--nx-ok-soft, #e6f4ec); color: var(--nx-ok, #11613a); }
.nx4-alert.bad { background: var(--nx-red-soft, #fcebec); color: #a00000; }
.nx4-empty { text-align: center; color: var(--nx-muted, #5e6872); padding: 28px 12px !important; }
.nx4-row-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.nx4-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nx4-grid2.top { align-items: start; }
.nx4-grid2.tight { gap: 8px; }
.nx4-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.nx4-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.nx4-field.wide { grid-column: 1 / -1; }
.nx4-field > span { font-size: 12px; font-weight: 700; color: var(--nx-muted, #5e6872); }
.nx4-field input, .nx4-field select, .nx4-field textarea, .nx4-screen textarea, .nx4-rcpt input, .nx4-search, .nx4-seg input { border: 1px solid #c9ced3; border-radius: 9px; padding: 9px 11px; font: inherit; background: #fff; color: inherit; min-width: 0; }
.nx4-screen textarea { width: 100%; box-sizing: border-box; resize: vertical; line-height: 1.5; }
.nx4-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; margin-right: 10px; }
.nx4-search { min-width: 220px; margin-left: auto; }
.nx4-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.nx4-pill { border: 1px solid var(--nx-line, #e3e6ea); background: #fff; border-radius: 999px; padding: 7px 14px; font: inherit; font-weight: 700; cursor: pointer; }
.nx4-pill.on { background: var(--nx-graphite, #1f2428); color: #fff; border-color: var(--nx-graphite, #1f2428); }
.nx4-seg { display: inline-flex; border: 1px solid var(--nx-line, #e3e6ea); border-radius: 10px; overflow: hidden; background: #fff; }
.nx4-seg button { border: 0; background: transparent; padding: 7px 12px; font: inherit; font-weight: 700; cursor: pointer; }
.nx4-seg button.on { background: var(--nx-graphite, #1f2428); color: #fff; }
.nx4-seg input { border: 0; border-radius: 0; }
.nx4-st { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 7px; background: #eef0f2; color: #39424a; font-size: 13px; font-weight: 700; white-space: nowrap; }
.nx4-st.ok { background: var(--nx-ok-soft, #e6f4ec); color: var(--nx-ok, #11613a); }
.nx4-st.bad { background: var(--nx-red-soft, #fcebec); color: #a00000; }
.nx4-st.warn { background: var(--nx-warn-soft, #fff3dc); color: var(--nx-warn, #7a4b00); }
.nx4-st.info { background: #e8f1fd; color: #0f4fa8; }
.nx4-tag { display: inline-block; padding: 1px 7px; border-radius: 6px; background: #eef0f2; font-size: 11.5px; font-weight: 700; font-style: normal; color: #39424a; }
.nx4-tag.ok { background: var(--nx-ok-soft, #e6f4ec); color: var(--nx-ok, #11613a); }
.nx4-tag.info { background: #e8f1fd; color: #0f4fa8; }
.nx4-tag.warn { background: var(--nx-warn-soft, #fff3dc); color: var(--nx-warn, #7a4b00); }
.nx4-src { font-size: 10.5px; color: #0f4fa8; background: #e8f1fd; border-radius: 5px; padding: 1px 6px; font-weight: 700; margin-left: 4px; }
.nx4-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--nx-line, #e3e6ea); background: #f6f7f8; border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 600; text-decoration: none; color: inherit; }
.nx4-chip.dark { background: var(--nx-graphite, #1f2428); color: #fff; border-color: var(--nx-graphite, #1f2428); }
.nx4-chip.ghost { background: #fff; cursor: pointer; }
.nx4-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0; }
.nx4-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nx4-x { border: 1px solid var(--nx-line, #e3e6ea); background: #fff; border-radius: 9px; width: 32px; height: 32px; font-size: 18px; cursor: pointer; flex: none; }
.nx4-x.light { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.nx4-when { white-space: nowrap; color: var(--nx-muted, #5e6872); }
.nx4-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
code { background: #f2f3f5; padding: 1px 5px; border-radius: 5px; }

/* ---------- Tablas ---------- */
.nx4-table-wrap { overflow-x: auto; padding: 0; }
.nx4-card.nx4-table-wrap { padding: 0; }
.nx4-card.nx4-table-wrap > .nx4-row-between { padding: 12px 14px 0; }
.nx4-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.nx4-table th { text-align: left; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--nx-muted, #5e6872); padding: 10px 12px; border-bottom: 1px solid var(--nx-line, #e3e6ea); background: #fafbfc; white-space: nowrap; }
.nx4-table td { padding: 10px 12px; border-bottom: 1px solid var(--nx-line-soft, #eef0f2); vertical-align: middle; }
.nx4-table tbody tr[data-open], .nx4-table tbody tr[data-toggle] { cursor: pointer; }
.nx4-table tbody tr:hover { background: #fafbfc; }
.nx4-table tbody tr.on { background: #fff8ec; }
.nx4-table tbody tr.muted td { color: #a3a9af; }
.nx4-table tfoot td { border-top: 2px solid var(--nx-line, #e3e6ea); background: #fafbfc; }
.nx4-table .r, .nx4-mini .r { text-align: right; }
.nx4-table .chk { width: 32px; }
.nx4-table.dense td { padding: 6px 10px; }
.nx4-child td:first-child, .nx4-child td:nth-child(2) { padding-left: 28px; }
.nx4-mini { width: 100%; border-collapse: collapse; font-size: 14px; }
.nx4-mini td { padding: 7px 4px; border-bottom: 1px solid var(--nx-line-soft, #eef0f2); vertical-align: top; }
.nx4-kv { border-collapse: collapse; margin: 8px 0 12px; font-size: 14px; width: 100%; }
.nx4-kv td { border: 1px solid var(--nx-line, #e3e6ea); padding: 6px 10px; }
.nx4-kv td:first-child { background: #f6f7f8; color: var(--nx-muted, #5e6872); font-weight: 700; width: 38%; }
.nx4-progress b { font-size: 13px; }
.nx4-progress span { display: block; width: 120px; height: 6px; background: #e9ecef; border-radius: 4px; margin-top: 4px; overflow: hidden; }
.nx4-progress i { display: block; height: 100%; background: var(--nx-ok, #11613a); }
.nx4-bulk { display: flex; gap: 10px; align-items: center; background: #fff8ec; border: 1px solid #f3dfb8; border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; }

/* ---------- Bandeja con panel lateral ---------- */
.nx4-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.nx4-layout.with-side { grid-template-columns: minmax(0, 1fr) 380px; }
.nx4-side { background: #fff; border: 1px solid var(--nx-line, #e3e6ea); border-radius: 14px; padding: 16px; position: sticky; top: 84px; max-height: calc(100vh - 110px); overflow: auto; }
.nx4-side-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.nx4-side-head h3 { margin: 0 0 4px; }
.nx4-history { list-style: none; margin: 0 0 12px; padding: 0 0 0 4px; }
.nx4-history li { position: relative; padding: 0 0 12px 26px; border-left: 2px solid #e3e6ea; margin-left: 8px; }
.nx4-history li:last-child { border-left-color: transparent; }
.nx4-history li::before { content: ''; position: absolute; left: -9px; top: 1px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #c9ced3; background: #fff; }
.nx4-history li.done::before { border-color: var(--nx-ok, #11613a); background: var(--nx-ok, #11613a); box-shadow: inset 0 0 0 2px #fff; }
.nx4-history li.bad::before { border-color: #a00000; background: #a00000; }
.nx4-history b { display: block; font-size: 14px; }
.nx4-history span { color: var(--nx-muted, #5e6872); font-size: 12.5px; }
.nx4-side-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

/* ---------- Documento manual ---------- */
.nx4-manual { display: grid; grid-template-columns: 260px minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.nx4-col.preview { position: sticky; top: 84px; }
.nx4-tpl-row { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.nx4-tpl { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; border: 1px solid var(--nx-line, #e3e6ea); background: #fff; border-radius: 12px; padding: 10px; font: inherit; cursor: pointer; margin-bottom: 8px; }
.nx4-tpl-row .nx4-tpl { margin-bottom: 0; }
.nx4-tpl.on { border-color: var(--nx-red, #cf0912); box-shadow: 0 0 0 2px var(--nx-red-soft, #fcebec); }
.nx4-tpl b { display: block; }
.nx4-tpl small { color: var(--nx-muted, #5e6872); }
.nx4-tpl-ic { width: 38px; height: 38px; border-radius: 9px; background: #f2f3f5; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; color: var(--nx-muted, #5e6872); }
.nx4-toolbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; background: #f6f7f8; border: 1px solid #c9ced3; border-bottom: 0; border-radius: 9px 9px 0 0; }
.nx4-toolbar button, .nx4-toolbar select { border: 1px solid var(--nx-line, #e3e6ea); background: #fff; border-radius: 7px; padding: 4px 9px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.nx4-toolbar select { color: #0f4fa8; }
.nx4-toolbar + textarea { border-radius: 0 0 9px 9px !important; }
.nx4-picker { position: relative; }
.nx4-picker input { border: 1px dashed #c9ced3; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; min-width: 220px; }
.nx4-pick-list { position: absolute; top: 100%; left: 0; z-index: 20; background: #fff; border: 1px solid var(--nx-line, #e3e6ea); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.12); min-width: 280px; padding: 4px; margin-top: 4px; }
.nx4-pick-list button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 7px 9px; border-radius: 7px; font: inherit; cursor: pointer; }
.nx4-pick-list button:hover { background: #f2f3f5; }
.nx4-pick-list small { color: var(--nx-muted, #5e6872); margin-left: 6px; }
.nx4-extform { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: end; background: #f6f7f8; border-radius: 12px; padding: 10px; margin: 8px 0; }
.nx4-extform .nx4-actions, .nx4-extform .nx4-chips { grid-column: 1 / -1; }
.nx4-radio { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--nx-line, #e3e6ea); border-radius: 12px; padding: 12px; cursor: pointer; background: #fff; }
.nx4-radio.on { border-color: var(--nx-red, #cf0912); box-shadow: 0 0 0 2px var(--nx-red-soft, #fcebec); }
.nx4-radio b { display: block; }
.nx4-radio small { display: block; color: var(--nx-muted, #5e6872); }
.nx4-radio input { accent-color: var(--nx-red, #cf0912); margin-top: 3px; }
.nx4-preview { background: #fff; border: 1px solid var(--nx-line, #e3e6ea); border-radius: 12px; height: 70vh; min-height: 420px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.nx4-preview iframe { width: 100%; height: 100%; border: 0; }
.nx4-preview-empty { display: grid; place-items: center; height: 100%; color: var(--nx-muted, #5e6872); padding: 20px; text-align: center; }

/* ---------- Firmar un PDF ---------- */
.nx4-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.nx4-step { background: #fff; border: 1px solid var(--nx-line, #e3e6ea); border-radius: 12px; padding: 12px; }
.nx4-step span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #9aa1a8; color: #fff; font-weight: 800; font-size: 13px; margin-bottom: 6px; }
.nx4-step b { display: block; }
.nx4-step small { color: var(--nx-muted, #5e6872); }
.nx4-step.done { border-color: var(--nx-ok, #11613a); }
.nx4-step.done span { background: var(--nx-ok, #11613a); }
.nx4-step.now { border-color: var(--nx-red, #cf0912); }
.nx4-step.now span { background: var(--nx-red, #cf0912); }
.nx4-upload { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; align-items: start; }
.nx4-drop { display: flex; gap: 12px; align-items: center; border: 2px dashed #c9ced3; border-radius: 12px; padding: 14px; cursor: pointer; background: #fff; margin-bottom: 12px; }
.nx4-drop.big { padding: 20px; }
.nx4-drop.over { border-color: var(--nx-red, #cf0912); background: var(--nx-red-soft, #fcebec); }
.nx4-drop b { display: block; }
.nx4-drop small { color: var(--nx-muted, #5e6872); }
.nx4-fi { width: 34px; height: 40px; border-radius: 6px; color: #fff; font-weight: 800; font-size: 10.5px; display: grid; place-items: center; flex: none; background: #8a939b; }
.nx4-fi.pdf { background: #cf0912; }
.nx4-fi.xml { background: #0f6e4f; }
.nx4-fi.txt { background: #4a5560; }
.nx4-fi.hes { background: #2f7bd8; }
.nx4-signer { display: flex; gap: 12px; align-items: center; border: 1px solid var(--nx-line, #e3e6ea); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.nx4-signer > span:nth-child(2) { flex: 1; }
.nx4-signer small { display: block; color: var(--nx-muted, #5e6872); }
.nx4-signer select { border: 1px solid #c9ced3; border-radius: 8px; padding: 6px; font: inherit; }
.nx4-n { width: 28px; height: 28px; border-radius: 50%; background: var(--nx-graphite, #1f2428); color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; }
.nx4-sheet { background: #fff; border: 1px solid var(--nx-line, #e3e6ea); border-radius: 10px; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.06); font-size: 12px; }
.nx4-sheet-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; border-bottom: 3px solid var(--nx-red, #cf0912); padding-bottom: 8px; margin-bottom: 8px; }
.nx4-sheet-head img { height: 36px; }
.nx4-sheet-head div { text-align: right; }
.nx4-sheet-head b { display: block; font-size: 12px; }
.nx4-sheet-head small { color: var(--nx-muted, #5e6872); font-size: 10px; }
.nx4-sheet-box { border: 1.5px dashed #9aa1a8; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.nx4-sheet-box.solid { border-style: solid; border-color: #26313d; }
.nx4-sheet-box small { display: block; font-size: 9px; font-weight: 800; letter-spacing: .05em; color: var(--nx-muted, #5e6872); }
.nx4-sheet-box b { display: block; }
.nx4-sheet-box span { font-size: 10px; color: var(--nx-muted, #5e6872); }

/* ---------- Correos armados ---------- */
.nx4-mail { background: #fff; border: 1px solid var(--nx-line, #e3e6ea); border-radius: 14px; overflow: hidden; box-shadow: 0 12px 34px rgba(0,0,0,.08); }
.nx4-mail-head { background: var(--nx-graphite, #1f2428); color: #fff; padding: 11px 16px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.nx4-mail-head span { color: #cfd5da; font-size: 13px; }
.nx4-mail-fields { border-bottom: 1px solid var(--nx-line, #e3e6ea); }
.nx4-rcpt { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: start; border-bottom: 1px solid var(--nx-line-soft, #eef0f2); }
.nx4-rcpt-label { padding: 10px 12px; font-weight: 700; color: var(--nx-muted, #5e6872); background: #f6f7f8; align-self: stretch; }
.nx4-rcpt-box { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 10px; align-items: center; cursor: text; }
.nx4-rcpt-box input, .nx4-rcpt > input { border: 0; padding: 6px; min-width: 200px; flex: 1; font: inherit; outline: none; }
.nx4-rcpt-saved { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px; padding: 0 10px 8px; }
.nx4-rcpt-saved .nx4-chip { font-size: 12px; }
.nx4-mail-body { padding: 14px 18px; font-size: 14px; line-height: 1.55; }
.nx4-pre { white-space: pre-wrap; margin-bottom: 10px; }
.nx4-mail-body textarea { margin-bottom: 10px; }
.nx4-mail-foot { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--nx-line, #e3e6ea); background: #fafbfc; }
.nx4-mail-foot .nx4-sub { margin-right: auto; }
.nx4-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.nx4-file { display: flex; gap: 8px; align-items: center; border: 1px solid var(--nx-line, #e3e6ea); border-radius: 10px; padding: 6px 10px; font-size: 12.5px; }
.nx4-file b { display: block; }
.nx4-file small { color: var(--nx-muted, #5e6872); }
.nx4-filerow { display: flex; gap: 10px; align-items: center; padding: 6px 0; }
.nx4-filerow > span:nth-child(2) { flex: 1; }
.nx4-filerow b { display: block; }
.nx4-filerow small { color: var(--nx-muted, #5e6872); }
.nx4-sii { border-top: 1px solid var(--nx-line-soft, #eef0f2); padding-top: 10px; margin-top: 6px; }
.nx4-invoice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.nx4-mailsig { display: flex; gap: 14px; align-items: center; border-top: 1px solid var(--nx-line, #e3e6ea); padding-top: 12px; margin: 6px 0 14px; }
.nx4-mailsig img { height: 42px; border-right: 2px solid var(--nx-red, #cf0912); padding-right: 14px; }
.nx4-mailsig b, .nx4-mailsig i, .nx4-mailsig small { display: block; }
.nx4-mailsig i, .nx4-mailsig small { color: var(--nx-muted, #5e6872); font-size: 12.5px; }

/* ---------- Encarpado ---------- */
.nx4-trucks { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.nx4-bar { display: flex; height: 12px; border-radius: 3px; overflow: hidden; min-width: 8px; }
.nx4-bar.empty { width: 0; }
.nx4-bar i { display: block; height: 100%; }
.barcell { width: 26%; }
.nx4-peak { background: #e8f1fd; color: #0f4fa8; border-radius: 6px; padding: 2px 8px; font-weight: 700; font-size: 13px; white-space: nowrap; }
.nx4-inc { border: 1px solid #f0c674; background: #fff8e6; color: #7a4b00; border-radius: 8px; padding: 3px 9px; font: inherit; font-weight: 800; cursor: pointer; }
.nx4-big { font-size: 28px; font-weight: 800; }
.nx4-hours { display: flex; align-items: flex-end; gap: 4px; height: 150px; margin-top: 12px; border-bottom: 1px solid var(--nx-line, #e3e6ea); }
.nx4-hours span { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; position: relative; }
.nx4-hours i { display: block; width: 100%; background: #bcd6f6; border-radius: 3px 3px 0 0; min-height: 2px; }
.nx4-hours i.top { background: #2f7bd8; }
.nx4-hours small { position: absolute; bottom: -18px; font-size: 10px; color: var(--nx-muted, #5e6872); }
.nx4-stack { display: flex; height: 22px; border-radius: 5px; overflow: hidden; gap: 2px; margin-bottom: 10px; }
.nx4-incidents { display: grid; gap: 10px; }
.nx4-incident { display: grid; grid-template-columns: auto 150px minmax(0, 1fr); gap: 12px; align-items: start; border: 1px solid var(--nx-line, #e3e6ea); border-radius: 12px; padding: 10px; background: #fff; }
.nx4-incident > input { margin-top: 6px; }
.nx4-photo { width: 150px; height: 110px; border-radius: 9px; background: #3a4148; overflow: hidden; display: grid; place-items: center; color: #cfd5da; font-size: 12px; }
.nx4-photo img { width: 100%; height: 100%; object-fit: cover; }
.nx4-inc-body { display: grid; gap: 3px; font-size: 14px; }
.nx4-plate { display: inline-block; font-family: ui-monospace, Menlo, monospace; font-weight: 800; letter-spacing: .08em; border: 1.5px solid #26313d; border-radius: 5px; padding: 1px 8px; background: #fff; }
.nx4-inc-kind { font-weight: 800; }
.nx4-drawer { position: fixed; inset: 0; z-index: 80; background: rgba(20,24,28,.35); display: flex; justify-content: flex-end; }
.nx4-drawer-in { width: min(720px, 100%); height: 100%; background: #f6f7f8; padding: 20px; overflow: auto; box-shadow: -10px 0 40px rgba(0,0,0,.2); }
.nx4-modal { position: fixed; inset: 0; z-index: 90; background: rgba(20,24,28,.45); display: grid; place-items: center; padding: 20px; overflow: auto; }
.nx4-modal .nx4-mail { width: min(860px, 100%); max-height: calc(100vh - 40px); overflow: auto; }

/* ---------- Indicadores ---------- */
.nx4-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.nx4-kpis .nx4-card { margin: 0; }
.nx4-kpis small { display: block; color: var(--nx-muted, #5e6872); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.nx4-kpis b { display: block; font-size: 22px; margin: 4px 0; }
.nx4-kpis span { color: var(--nx-muted, #5e6872); font-size: 13px; }
.nx4-meter { height: 8px; background: #e9ecef; border-radius: 5px; overflow: hidden; margin-top: 8px; }
.nx4-meter i { display: block; height: 100%; background: var(--nx-ok, #11613a); }
.nx4-meter i.warn { background: #e0a020; }
.nx4-meter i.bad { background: var(--nx-red, #cf0912); }
.nx4-sigbox { display: block; border: 1.5px solid #26313d; border-radius: 8px; padding: 10px 12px; margin-top: 8px; background: #fff; }
.nx4-sigbox small { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; border-bottom: 1px solid #26313d; padding-bottom: 3px; margin-bottom: 5px; }
.nx4-sigbox em { display: block; font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 22px; color: #0f3d91; font-style: normal; }
.nx4-sigbox em.co { font-family: inherit; font-weight: 800; font-size: 17px; color: var(--nx-ink, #1b1f23); }
.nx4-sigbox span { display: block; font-size: 11.5px; color: #58616b; }
.nx4-radio.stack { flex: 1; }
.nx4-planilla h3 { margin: 0 0 4px; }

/* ---------- Avisos ---------- */
.nx4-toast { position: fixed; right: 18px; bottom: 18px; z-index: 120; display: grid; gap: 8px; max-width: min(420px, calc(100vw - 36px)); }
.nx4-toast-item { background: var(--nx-graphite, #1f2428); color: #fff; padding: 11px 14px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); font-weight: 600; }
.nx4-toast-item.error { background: #a00000; }

/* ---------- Celular y pantallas medianas ---------- */
@media (max-width: 1280px) {
  .nx4-manual { grid-template-columns: minmax(0, 1fr) 340px; }
  .nx4-manual > .nx4-col:first-child { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
  .nx4-manual > .nx4-col:first-child h4 { width: 100%; margin: 4px 0; }
  .nx4-manual > .nx4-col:first-child .nx4-tpl, .nx4-manual > .nx4-col:first-child .nx4-tpl-row { width: auto; }
  .nx4-trucks { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .nx4-layout.with-side, .nx4-manual, .nx4-upload, .nx4-invoice, .nx4-grid2 { grid-template-columns: 1fr; }
  .nx4-grid3, .nx4-extform, .nx4-steps { grid-template-columns: 1fr 1fr; }
  .nx4-side, .nx4-col.preview { position: static; max-height: none; }
  .nx4-preview { height: 60vh; }
}
@media (max-width: 640px) {
  .nx4-grid3, .nx4-extform, .nx4-steps { grid-template-columns: 1fr; }
  .nx4-incident { grid-template-columns: auto 1fr; }
  .nx4-photo { width: 100%; grid-column: 1 / -1; }
  .nx4-search { min-width: 0; width: 100%; }
  .nx4-head h2 { font-size: 22px; }
}

/* ---------- Inicio 4.0 ---------- */
.nx4-home { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.nx4-home-title { margin: 0 0 10px; font-size: 16px; }
.nx4-todo { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--nx-line, #e3e6ea); border-radius: 14px; padding: 12px 16px; margin-bottom: 10px; }
.nx4-todo > span:nth-child(2) { flex: 1; }
.nx4-todo b { display: block; font-size: 15.5px; }
.nx4-todo small { display: block; color: var(--nx-muted, #5e6872); }
.nx4-todo-ic { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; font-size: 20px; background: #f2f3f5; flex: none; }
.nx4-todo.nx-bad .nx4-todo-ic { background: var(--nx-red-soft, #fcebec); }
.nx4-todo.nx-warn .nx4-todo-ic { background: var(--nx-warn-soft, #fff3dc); }
.nx4-close-steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); padding: 0; margin: 8px 0 12px; counter-reset: none; }
.nx4-close-steps li { position: relative; text-align: center; font-size: 13px; }
.nx4-close-steps li::before { content: ''; position: absolute; top: 15px; left: -50%; width: 100%; height: 3px; background: #e3e6ea; z-index: 0; }
.nx4-close-steps li:first-child::before { display: none; }
.nx4-close-steps li.done::before, .nx4-close-steps li.now::before { background: var(--nx-ok, #11613a); }
.nx4-close-steps span { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto 6px; border-radius: 50%; background: #c9ced3; color: #fff; font-weight: 800; border: 3px solid #fff; box-shadow: 0 0 0 1px #e3e6ea; }
.nx4-close-steps li.done span { background: var(--nx-ok, #11613a); }
.nx4-close-steps li.now span { background: var(--nx-red, #cf0912); }
.nx4-close-steps b { display: block; }
.nx4-close-steps small { color: var(--nx-muted, #5e6872); }
.nx4-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nx4-quick .nx4-btn { justify-content: flex-start; padding: 12px 14px; }
.nx4-field-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.nx4-field-kpis > div { border: 1px solid var(--nx-line, #e3e6ea); border-radius: 12px; padding: 12px; }
.nx4-field-kpis small { display: block; font-weight: 800; color: var(--nx-muted, #5e6872); font-size: 11.5px; letter-spacing: .04em; }
.nx4-field-kpis b { display: block; font-size: 26px; margin: 4px 0; }
.nx4-field-kpis span { color: var(--nx-muted, #5e6872); font-size: 13px; }
@media (max-width: 980px) { .nx4-home { grid-template-columns: 1fr; } .nx4-close-steps { font-size: 11px; } }
@media (max-width: 640px) { .nx4-quick, .nx4-field-kpis { grid-template-columns: 1fr; } .nx4-todo { flex-wrap: wrap; } }

/* ---------- App del trabajador · firma 4.0 ---------- */
.nx4w-card { background: #fff; border: 1px solid #e3e6ea; border-radius: 16px; padding: 16px; margin: 0 0 14px; }
.nx4w-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.nx4w-head h3 { margin: 0; font-size: 18px; }
.nx4w-count { background: #cf0912; color: #fff; border-radius: 999px; padding: 2px 10px; font-weight: 800; }
.nx4w-doc { display: flex; gap: 12px; align-items: center; justify-content: space-between; border-top: 1px solid #eef0f2; padding: 12px 0; flex-wrap: wrap; }
.nx4w-doc.late { opacity: .7; }
.nx4w-doc b { display: block; font-size: 15.5px; }
.nx4w-doc small { color: #5e6872; }
.nx4w-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.nx4w-actions.end { justify-content: flex-end; }
.nx4w-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid #e3e6ea; background: #fff; color: #1b1f23; font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; }
.nx4w-btn.primary { background: #cf0912; border-color: #cf0912; color: #fff; }
.nx4w-btn.ghost { background: transparent; border-color: transparent; color: #5e6872; }
.nx4w-btn.wide { width: 100%; margin-top: 10px; }
.nx4w-btn[disabled] { opacity: .5; }
.nx4w-sub { color: #5e6872; font-size: 13px; margin-top: 8px; }
.nx4w-empty { color: #5e6872; padding: 10px 0; }
.nx4w-note { background: #fff3dc; color: #7a4b00; border-radius: 12px; padding: 10px 12px; font-weight: 600; margin-bottom: 10px; }
.nx4w-error { background: #fcebec; color: #a00000; border-radius: 10px; padding: 10px 12px; font-weight: 700; margin: 8px 0; }
.nx4w-grid { display: grid; gap: 10px; }
.nx4w-grid label, .nx4w-pin { display: grid; gap: 4px; font-weight: 700; color: #5e6872; font-size: 13px; }
.nx4w-grid input, .nx4w-pin input { min-height: 48px; border: 1px solid #c9ced3; border-radius: 12px; font-size: 22px; letter-spacing: .5em; text-align: center; color: #1b1f23; }
.nx4w-check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; margin: 10px 0; }
.nx4w-check input { width: 22px; height: 22px; accent-color: #cf0912; flex: none; }
.nx4w-tip { display: block; width: 100%; text-align: left; border: 1px solid #f3dfb8; background: #fff8ec; color: #7a4b00; border-radius: 14px; padding: 12px 14px; font: inherit; font-weight: 700; margin: 0 0 12px; cursor: pointer; }
.nx4w-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(20,24,28,.55); display: flex; align-items: flex-end; justify-content: center; }
.nx4w-overlay.full { align-items: stretch; }
.nx4w-sheet { background: #fff; width: min(560px, 100%); border-radius: 20px 20px 0 0; padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); max-height: 90vh; overflow: auto; }
.nx4w-sheet h3 { margin: 0 0 8px; }
.nx4w-list { margin: 0 0 8px; padding-left: 18px; color: #39424a; }
.nx4w-viewer { background: #f4f5f7; width: 100%; display: flex; flex-direction: column; height: 100%; }
.nx4w-viewer-top { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: #fff; border-bottom: 1px solid #e3e6ea; }
.nx4w-viewer-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx4w-pages { flex: 1; overflow: auto; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 8px; -webkit-user-select: none; user-select: none; }
.nx4w-pages canvas { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.12); max-width: 100%; }
.nx4w-viewer-bottom { background: #fff; border-top: 1px solid #e3e6ea; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
body.nx4w-locked { overflow: hidden; }
body.nx-shell #erpAuthed .erp-nav.nx4-nav .nx-hub::before { display: none !important; }
.nx4-home .nx-card { margin-bottom: 14px; }
.nx4-home > div > .nx-card:last-child { margin-bottom: 0; }
.nx4-preview { overflow: auto; background: #e9ecef; }
.nx4-preview-pages { display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 8px; }
.nx4-preview-pages canvas { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.nx4-table.dense th, .nx4-table.dense td { white-space: nowrap; padding: 6px 8px; }
.nx4-table.dense .barcell { width: 18%; min-width: 90px; }
.nx4-inc { white-space: nowrap; }
.nx4-bar { border: 0 !important; }
.nx4w-overlay { z-index: 10000; }
.nx4w-viewer { height: 100dvh; max-height: 100%; }
.nx4w-pages { min-height: 0; }

/* 4.0.2: «Ampliar» en el visor de documentos de la App (la App no permite zoom con los dedos). */
.nx4w-zoom-btn { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }
.nx4w-pages.zoom { align-items: flex-start; }
.nx4w-pages.zoom canvas { width: 200% !important; max-width: none; }
.nx4w-viewer-top .nx4w-btn { white-space: nowrap; }

/* 5.0: paquete de documentos en la App (imagen 09) */
.nx4w-pack { border: 1px solid #f0c9cb; border-radius: 16px; overflow: hidden; margin: 6px 0 12px; background: #fff; }
.nx4w-pack-top { background: linear-gradient(135deg, #cf0912, #a3070d); color: #fff; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.nx4w-pack-top b { font-size: 17px; }
.nx4w-pack-top small { opacity: .92; font-size: 13px; }
.nx4w-bar { height: 6px; border-radius: 6px; background: rgba(255,255,255,.3); overflow: hidden; }
.nx4w-bar i { display: block; height: 100%; background: #fff; border-radius: 6px; }
.nx4w-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 0; border-top: 1px solid #eef0f2; background: #fff; text-align: left; font: inherit; cursor: pointer; color: inherit; min-height: 64px; }
.nx4w-item b { display: block; font-size: 15px; }
.nx4w-item small { color: #6b747c; }
.nx4w-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fcebec; flex: none; font-size: 15px; }
.nx4w-item.read .nx4w-ico { background: #e6f4ec; color: #11673f; font-weight: 900; }
.nx4w-chev { margin-left: auto; color: #9aa1a8; font-size: 22px; }
.nx4w-pack > .nx4w-btn.wide { margin: 12px 16px 16px; width: calc(100% - 32px); }
.nx4w-btn[disabled] { opacity: .5; cursor: not-allowed; }
.nx4w-btn.dark { background: #1b1f23; color: #fff; border-color: #1b1f23; }
.nx4w-pos { margin-left: auto; color: #6b747c; font-weight: 700; white-space: nowrap; }
.nx4w-link { border: 0; background: none; color: #6b747c; text-decoration: underline; font: inherit; font-size: 13px; padding: 8px 0 0; cursor: pointer; }

/* 5.0: «Firmar un PDF» en una sola pantalla (imagen 21) */
.nx4-up5-top { display: grid; grid-template-columns: minmax(260px, 1.2fr) minmax(200px, 1fr) 200px auto; gap: 12px; align-items: end; margin-bottom: 12px; }
.nx4-up5-top .nx4-field { margin: 0; }
.nx4-drop.small { padding: 8px 12px; }
.nx4-up5 { display: grid; grid-template-columns: 300px minmax(0, 1fr) 270px; gap: 12px; height: calc(100vh - 210px); min-height: 560px; }
.nx4-up5-col { margin: 0; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: auto; }
.nx4-up5-col.center { overflow: hidden; }
.nx4-up5-h { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 15px; }
.nx4-up5-h > span { width: 24px; height: 24px; border-radius: 50%; background: var(--nx-red, #cf0912); color: #fff; display: grid; place-items: center; font-size: 13px; flex: none; }
.nx4-up5-h small { margin-left: auto; font-weight: 500; color: var(--nx-muted, #5e6872); font-size: 12px; }
.nx4-sw { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.nx4-up5 .nx4-signer { margin: 0; cursor: pointer; padding: 8px 10px; }
.nx4-up5 .nx4-signer.on { box-shadow: 0 0 0 2px var(--nx-graphite, #1f2428) inset; }
.nx4-up5 .nx4-signer select { padding: 4px; font-size: 12px; max-width: 110px; }
.nx4-up5-add { display: flex; gap: 8px; align-items: center; }
.nx4-up5-add .nx4-picker { flex: 1; }
.nx4-up5-add .nx4-picker input { width: 100%; }
.nx4-seg.wide { display: flex; }
.nx4-seg.wide button { flex: 1; }
.nx4-kv5 { display: grid; grid-template-columns: 96px 1fr; row-gap: 6px; font-size: 13px; }
.nx4-kv5 span { color: var(--nx-muted, #5e6872); }
.nx4-note.small.ok { background: #e6f4ec; border-color: #bfe0cc; color: #11673f; }
.nx4-note.small.info { margin: 0; }
.nx4-up5 .nx4-note.small { margin: 0; }
.nx4-up5-editor { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.nx4-up5-empty { flex: 1; border: 2px dashed #c9ced3; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; color: var(--nx-muted, #5e6872); }
.nx4-up5-empty b { color: var(--nx-ink, #1b1f23); font-size: 16px; }
.nx4-up5-send { margin-top: auto; }
.nx4-btn.wide { width: 100%; justify-content: center; height: 46px; }
.nx4-up5 .nx4-extform { display: grid; grid-template-columns: 1fr; gap: 6px; }
@media (max-width: 1200px) {
  .nx4-up5 { grid-template-columns: 1fr; height: auto; }
  .nx4-up5-col.center { height: 640px; }
  .nx4-up5-top { grid-template-columns: 1fr 1fr; }
}
.nx4-up5, .nx4-up5-top { font-size: 14px; }
.nx4-up5 .nx4-signer b { font-size: 14px; }
.nx4-up5 .nx4-signer small { font-size: 12px; overflow-wrap: anywhere; }
.nx4-up5 .nx4-seg button { padding: 8px 6px; font-size: 13px; }
.nx4-up5-add { flex-wrap: wrap; }
.nx4-up5-add .nx4-picker { flex: 1 1 100%; }
.nx4-up5-add .nx4-btn { flex: 1 1 100%; justify-content: center; }
.nx4-up5 .nx4-chip { font-size: 12px; }
.nx4-up5 .nx4-field input, .nx4-up5 .nx4-field select { font-size: 14px; }
.nx4-up5-top .nx4-drop b { font-size: 14px; }
.nx4-up5-top .nx4-drop small { font-size: 12px; }
.nx4-up5-top .nx4-field input, .nx4-up5-top .nx4-field select { font-size: 14px; height: 40px; }
.nx4-up5 .nx4-signer.off { background: #f6f7f8; cursor: default; }
.nx4-up5 .nx4-signer.off b { color: #8a929a; }
.nx4-up5 .nx4-signer > span:nth-child(2) select { display: block; margin-top: 4px; }
.nx4-sw-toggle { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 800; color: #5e6872; cursor: pointer; flex: none; }
.nx4-sw-toggle input { appearance: none; width: 38px; height: 22px; border-radius: 12px; background: #cfd4d9; position: relative; cursor: pointer; margin: 0; transition: background .15s; }
.nx4-sw-toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.nx4-sw-toggle input:checked { background: #1a9a5b; }
.nx4-sw-toggle input:checked::after { left: 19px; }