/* NEXUZ 5.0 · pantallas nuevas (ficha del trabajador, liquidación editable, paquetes, correos,
   Personal externo por empresa). Mismo estilo que las imágenes aprobadas por Claudio y los colores
   del armazón del ERP. */

.nx5 { color: var(--nx-ink, #1b1f23); font-size: 14px; }
.nx5 *, .nx5-modal * { box-sizing: border-box; }
.nx5-i { flex: none; vertical-align: middle; }

/* ---------- Botones, pastillas, chips ---------- */
.nx5-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 10px; font: inherit; font-weight: 750; border: 1px solid var(--nx-line, #dfe3e6); background: #fff; color: var(--nx-ink, #1b1f23); cursor: pointer; white-space: nowrap; text-decoration: none; }
.nx5-btn:hover { border-color: #c9ced3; }
.nx5-btn.red { background: var(--nx-red, #cf0912); border-color: var(--nx-red, #cf0912); color: #fff; }
.nx5-btn.red:hover { background: var(--nx-red-dark, #a3070d); }
.nx5-btn.dark { background: var(--nx-graphite, #1f2428); border-color: var(--nx-graphite, #1f2428); color: #fff; }
.nx5-btn.ghost { background: transparent; border-color: transparent; color: var(--nx-muted, #5e6872); }
.nx5-btn.small { height: 30px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.nx5-btn.wide { width: 100%; justify-content: center; }
.nx5-btn[disabled] { opacity: .55; cursor: not-allowed; }
.nx5-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 750; color: var(--nx-red, #cf0912); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.nx5-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; background: #eef0f2; color: #3a4148; }
.nx5-pill.g { background: #e6f4ec; color: #11673f; }
.nx5-pill.y { background: #fff4de; color: #7a4b00; }
.nx5-pill.r { background: #fcebec; color: #a90913; }
.nx5-pill.b { background: #e8f0fb; color: #1c5d99; }
.nx5-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nx5-chip { font: inherit; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: #f4f5f7; color: #5e6872; border: 0; cursor: pointer; white-space: nowrap; }
.nx5-chip.on { background: var(--nx-graphite, #1b1f23); color: #fff; }
.nx5-chip.red { background: #fcebec; color: #a90913; }
.nx5-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #b7bdc3; }
.nx5-dot.ok { background: #1a9a5b; } .nx5-dot.warn { background: #e09a00; } .nx5-dot.bad { background: #cf0912; }

/* ---------- Distribución lista + panel ---------- */
.nx5-split { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 0; background: #fff; border: 1px solid var(--nx-line, #e6e8eb); border-radius: 16px; overflow: hidden; min-height: calc(100vh - 150px); }
.nx5-list { border-right: 1px solid var(--nx-line, #e6e8eb); display: flex; flex-direction: column; min-width: 0; background: #fff; }
.nx5-list-head { padding: 14px; border-bottom: 1px solid #eef0f2; display: flex; flex-direction: column; gap: 10px; }
.nx5-search { height: 38px; border: 1px solid #dfe3e6; border-radius: 10px; display: flex; align-items: center; gap: 8px; padding: 0 12px; color: #8a929a; background: #fff; }
.nx5-search input { border: 0; outline: 0; font: inherit; width: 100%; color: var(--nx-ink, #1b1f23); background: transparent; }
.nx5-list-body { overflow: auto; flex: 1; }
.nx5-li { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border: 0; border-bottom: 1px solid #f1f2f4; width: 100%; background: #fff; text-align: left; font: inherit; cursor: pointer; color: inherit; }
.nx5-li:hover { background: #fafbfc; }
.nx5-li.on { background: #fcebec; box-shadow: inset 3px 0 0 var(--nx-red, #cf0912); }
.nx5-li b { display: block; font-size: 14px; }
.nx5-li small { color: #6b747c; font-size: 12px; }
.nx5-li .st { margin-left: auto; }
.nx5-avatar { width: 36px; height: 36px; border-radius: 50%; background: #e9ebee; display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #3a4148; flex: none; }
.nx5-avatar.big { width: 60px; height: 60px; font-size: 21px; background: var(--nx-graphite, #1b1f23); color: #fff; }
.nx5-list-foot { padding: 14px; border-top: 1px solid #eef0f2; }
.nx5-pane { padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.nx5-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.nx5-head h1 { margin: 0; font-size: 24px; line-height: 1.15; }
.nx5-head .meta { color: #5e6872; margin-top: 3px; }
.nx5-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.nx5-tabs { display: flex; gap: 4px; border-bottom: 1px solid #e3e6e9; overflow-x: auto; }
.nx5-tab { padding: 10px 14px; font: inherit; font-weight: 700; color: #6b747c; border: 0; border-bottom: 3px solid transparent; background: none; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.nx5-tab.on { color: var(--nx-red, #cf0912); border-color: var(--nx-red, #cf0912); }
.nx5-empty { padding: 40px 16px; text-align: center; color: #6b747c; }

/* ---------- Tarjetas y tablas ---------- */
.nx5-grid { display: grid; gap: 14px; }
.nx5-grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nx5-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nx5-grid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nx5-card { background: #fff; border: 1px solid var(--nx-line, #e6e8eb); border-radius: 14px; padding: 16px; min-width: 0; }
.nx5-card h3 { margin: 0 0 12px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #6b747c; display: flex; align-items: center; gap: 8px; }
.nx5-card h3 .e { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 13px; }
.nx5-card.dark { background: var(--nx-graphite, #1b1f23); color: #fff; border-color: var(--nx-graphite, #1b1f23); }
.nx5-card.soft-ok { background: #f3faf6; border-color: #bfe0cc; }
.nx5-card.soft-warn { background: #fffaf0; border-color: #f3d9a4; }
.nx5-big { font-size: 26px; font-weight: 800; }
.nx5-mut { color: #6b747c; font-size: 13px; }
.nx5-kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); row-gap: 8px; column-gap: 10px; align-items: center; }
.nx5-kv > span { color: #6b747c; }
.nx5-table { width: 100%; border-collapse: collapse; }
.nx5-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #6b747c; text-align: left; padding: 9px 10px; border-bottom: 1px solid #e6e8eb; font-weight: 800; white-space: nowrap; }
.nx5-table td { padding: 11px 10px; border-bottom: 1px solid #f1f2f4; vertical-align: middle; }
#erpAuthed .nx5 .nx5-table td, .nx5-modal .nx5-table td { font-size: 14px; }
#erpAuthed .nx5 .nx5-table th { font-size: 12px; }
.nx5-table td.n, .nx5-table th.n { text-align: right; }
.nx5-table tr.hot td { background: #fffaf0; }
.nx5-table tr.total td { background: #fcebec; color: #a90913; font-weight: 800; }
.nx5-table tr.click { cursor: pointer; }
.nx5-table tr.click:hover td { background: #fafbfc; }
.nx5-table tr.sel td { background: #fcebec; }
.nx5-table tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--nx-red, #cf0912); }
.nx5-scroll { overflow-x: auto; }
.nx5-note { background: #fff4de; color: #7a4b00; border-radius: 10px; padding: 10px 12px; font-size: 13px; font-weight: 600; }
.nx5-note.ok { background: #e6f4ec; color: #11673f; }
.nx5-note.info { background: #f5f8fc; color: #39424a; border: 1px solid #dfe7f1; }
.nx5-kpi { background: #fff; border: 1px solid #e6e8eb; border-radius: 14px; padding: 12px 14px; }
.nx5-kpi .k { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; color: #6b747c; text-transform: uppercase; }
.nx5-kpi .v { font-size: 24px; font-weight: 800; margin-top: 2px; }
.nx5-kpi .s { font-size: 12px; color: #6b747c; }

/* ---------- Campos ---------- */
.nx5-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nx5-field > span { font-size: 12px; font-weight: 700; color: #6b747c; }
.nx5-input, .nx5-field input, .nx5-field select, .nx5-field textarea { border: 1px solid #dfe3e6; border-radius: 9px; height: 36px; padding: 0 10px; font: inherit; font-weight: 600; background: #fff; color: inherit; min-width: 0; width: 100%; }
.nx5-field textarea { height: auto; padding: 8px 10px; resize: vertical; }
.nx5-input.num { text-align: right; }
.nx5-input:focus, .nx5-field input:focus, .nx5-field select:focus { outline: none; border-color: var(--nx-red, #cf0912); box-shadow: 0 0 0 3px #fcebec; }
.nx5-input.hot { border-color: var(--nx-red, #cf0912); box-shadow: 0 0 0 3px #fcebec; }
.nx5-ed { display: inline-flex; align-items: center; gap: 6px; }
.nx5-ed .nx5-i { color: #b7bdc3; }
.nx5-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.nx5-toggle { width: 38px; height: 22px; border-radius: 12px; background: #cfd4d9; position: relative; display: inline-block; vertical-align: middle; border: 0; cursor: pointer; padding: 0; flex: none; }
.nx5-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.nx5-toggle.on { background: #1a9a5b; }
.nx5-toggle.on::after { left: 19px; }
.nx5-toggle[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Ventanas y visor ---------- */
body.nx5-modal-open { overflow: hidden; }
.nx5-modal { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 24px; }
.nx5-modal-scrim { position: absolute; inset: 0; background: rgba(20, 24, 28, .45); }
.nx5-modal-box { position: relative; background: #fff; border-radius: 18px; box-shadow: 0 30px 60px rgba(0, 0, 0, .3); width: min(640px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden; }
.nx5-modal-box.wide { width: min(1080px, 100%); }
.nx5-modal-box.full { width: min(1200px, 100%); height: calc(100vh - 48px); }
.nx5-modal-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #eef0f2; }
.nx5-modal-title { font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx5-modal-extra { margin-left: auto; display: flex; gap: 8px; }
.nx5-modal-body { padding: 16px 20px; overflow: auto; flex: 1; }
.nx5-modal-foot { padding: 14px 20px; background: #f4f5f7; display: flex; align-items: center; gap: 12px; }
.nx5-viewer { display: flex; flex-direction: column; align-items: center; gap: 14px; background: #e9ebee; margin: -16px -20px; padding: 18px; min-height: 100%; }
.nx5-viewer .nx5-page { width: min(900px, 100%); height: auto; background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .12); }
.nx5-viewer.zoom .nx5-page { width: 200%; max-width: none; }
.nx5-viewer.zoom { align-items: flex-start; overflow: auto; }
.nx5-loading { padding: 60px 20px; color: #5e6872; font-weight: 700; }
.nx5-loading.bad { color: #a90913; }

/* ---------- Ficha: asistencia ---------- */
.nx5-days { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 10px; }
.nx5-days i { width: 18px; height: 18px; border-radius: 4px; background: #eef0f2; display: inline-block; }
.nx5-days i.ok { background: #1a9a5b; } .nx5-days i.warn { background: #e09a00; } .nx5-days i.off { background: #f4f5f7; border: 1px dashed #dfe3e6; }
.nx5-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.nx5-cal .d { border: 1px solid #eef0f2; border-radius: 8px; padding: 6px; min-height: 58px; font-size: 12px; }
.nx5-cal .d b { display: block; font-size: 12px; color: #6b747c; }
.nx5-cal .d.ok { background: #f3faf6; border-color: #bfe0cc; }
.nx5-cal .d.warn { background: #fffaf0; border-color: #f3d9a4; }
.nx5-cal .d.out { opacity: .35; }
.nx5-cal .h { font-size: 11px; font-weight: 800; color: #6b747c; text-transform: uppercase; text-align: center; }

/* ---------- Liquidación editable ---------- */
.nx5-slip { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; }
.nx5-line { display: grid; grid-template-columns: minmax(0, 1fr) 140px 30px; gap: 8px; align-items: center; padding: 6px 0; }
.nx5-line.earn { grid-template-columns: minmax(0, 1fr) 150px 140px 30px; }
.nx5-line button { border: 0; background: none; color: #9aa1a8; cursor: pointer; padding: 4px; }
.nx5-line button:hover { color: #a90913; }
.nx5-slip-sec { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #6b747c; margin: 14px 0 4px; }

/* ---------- Ubicar firmas en un PDF ---------- */
.nx5-place { display: grid; grid-template-columns: 130px minmax(0, 1fr) 290px; gap: 0; height: calc(100vh - 170px); min-height: 480px; margin: -16px -20px; }
.nx5-place .nx5-stage { overflow: auto; }
.nx5-thumbs { border-right: 1px solid #e6e8eb; padding: 12px; overflow: auto; display: flex; flex-direction: column; gap: 10px; background: #fff; }
.nx5-thumb { border: 2px solid #e6e8eb; border-radius: 8px; background: #fff; position: relative; cursor: pointer; padding: 0; }
.nx5-thumb.on { border-color: var(--nx-red, #cf0912); }
.nx5-thumb canvas { width: 100%; display: block; border-radius: 6px; }
.nx5-thumb span { position: absolute; bottom: 4px; left: 6px; font-size: 12px; font-weight: 800; background: rgba(255,255,255,.85); padding: 0 4px; border-radius: 4px; }
.nx5-thumb i { position: absolute; right: 6px; top: 6px; width: 12px; height: 9px; border-radius: 2px; background: var(--nx-red, #cf0912); }
.nx5-stage { background: #e9ebee; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; overflow: auto; }
.nx5-sheet { position: relative; background: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, .15); user-select: none; touch-action: none; }
.nx5-sheet canvas { display: block; width: 100%; height: auto; }
.nx5-box { position: absolute; border: 2px dashed; border-radius: 6px; font-size: 11px; font-weight: 800; padding: 3px 6px; cursor: move; overflow: hidden; white-space: nowrap; }
.nx5-box .grip { position: absolute; right: -1px; bottom: -1px; width: 14px; height: 14px; border-radius: 3px; cursor: nwse-resize; }
.nx5-box .del { position: absolute; right: 2px; top: 1px; border: 0; background: none; font-weight: 900; cursor: pointer; padding: 0 3px; }
.nx5-side { border-left: 1px solid #e6e8eb; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: #fff; overflow: auto; }
.nx5-signer { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e6e8eb; border-radius: 12px; cursor: pointer; background: #fff; font: inherit; text-align: left; width: 100%; }
.nx5-signer.on { border-color: currentColor; box-shadow: 0 0 0 2px currentColor inset; }
.nx5-signer i { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.nx5-seg { display: inline-flex; gap: 6px; }
.nx5-seg button { width: 40px; height: 36px; border-radius: 10px; border: 1px solid #dfe3e6; background: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.nx5-seg button.on { background: var(--nx-graphite, #1b1f23); color: #fff; border-color: var(--nx-graphite, #1b1f23); }

/* ---------- Paquete ---------- */
.nx5-check { display: flex; gap: 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid #f1f2f4; cursor: pointer; }
.nx5-check input { width: 20px; height: 20px; accent-color: var(--nx-red, #cf0912); flex: none; }
.nx5-check.off { opacity: .55; cursor: default; }

/* ---------- Externos ---------- */
.nx5-company-head .nx5-avatar.big { background: #6b4f2a; width: 52px; height: 52px; font-size: 18px; }
.nx5-mono { font-variant-numeric: tabular-nums; }
.nx5-step { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--nx-red, #cf0912); color: #fff; font-size: 12px; font-weight: 900; margin-right: 8px; flex: none; }
.nx5-dayin { border: 1px solid #e6e8eb; border-radius: 12px; padding: 8px 10px; background: #fff; flex: 1; min-width: 92px; }
.nx5-dayin .d { font-size: 12px; font-weight: 800; color: #6b747c; }
.nx5-dayin input { margin-top: 4px; height: 32px; }
.nx5-dayin small { display: block; color: #6b747c; font-size: 11.5px; margin-top: 4px; white-space: nowrap; }
.nx5-receipt { height: 150px; border-radius: 10px; background: #f1efe9; border: 1px solid #e3e0d6; display: grid; place-items: center; overflow: hidden; }
.nx5-receipt img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------- Editor de ubicación de firmas (pantalla y ventana) ---------- */
.nx5-pe { display: flex; flex-direction: column; gap: 10px; min-height: 0; height: 100%; }
.nx5-pe-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.nx5-pe-pages { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.nx5-pe-pages label { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; cursor: pointer; }
.nx5-pe-pages input, .nx5-pe-sheetopt input { width: 17px; height: 17px; accent-color: var(--nx-red, #cf0912); }
.nx5-pe-sheetopt { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.nx5-pe-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 0; background: #eef0f2; border-radius: 12px; overflow: hidden; }
.nx5-pe .nx5-thumbs { background: transparent; border-right: 1px solid #e0e3e6; padding: 10px; gap: 8px; }
.nx5-pe .nx5-stage { background: transparent; padding: 10px 14px; overflow: auto; }
.nx5-thumb .m { position: absolute; right: 4px; top: 4px; display: flex; gap: 2px; }
.nx5-thumb .m i { position: static; width: 9px; height: 7px; border-radius: 2px; }
.nx5-box .nm { display: inline-block; max-width: calc(100% - 14px); overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.nx5-sheet .nx5-loading { padding: 60px 20px; text-align: center; color: #6b747c; }

/* ---------- Personal externo 5.0 (armazón por empresa) ---------- */
#externalAdminScreen.nx5-x > .ext-hero, #externalAdminScreen.nx5-x > .ext-kpis, #externalAdminScreen.nx5-x > .ext-tabs, #externalAdminScreen.nx5-x [data-ext-panel="summary"] { display: none !important; }
.nx5-xshell { display: grid; grid-template-columns: 270px minmax(0, 1fr); background: #fff; border: 1px solid var(--nx-line, #e6e8eb); border-radius: 16px; min-height: calc(100vh - 150px); }
.nx5-xside { border-right: 1px solid var(--nx-line, #e6e8eb); display: flex; flex-direction: column; min-width: 0; position: sticky; top: 0; align-self: start; max-height: calc(100vh - 110px); }
.nx5-xside-h { padding: 16px 14px 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6b747c; }
.nx5-xmain { padding: 18px 22px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; background: #f7f8f9; border-radius: 0 16px 16px 0; }
.nx5-xbody { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.nx5-xpanel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.nx5-xpanel[hidden] { display: none; }
.nx5-xold { min-width: 0; }
.nx5-xold > .ext-panel { margin: 0; }
#externalAdminScreen.nx5-x .card { border-radius: 14px; }
#externalAdminScreen.nx5-x .nx5 .nx5-table td { font-size: 14px; }
#externalAdminScreen.nx5-x .nx5 .nx5-table th { font-size: 12px; }
#externalAdminScreen.nx5-x .nx5 .nx5-table td .nx5-mut, #externalAdminScreen.nx5-x .nx5 .nx5-mut { font-size: 12.5px; }
#externalAdminScreen.nx5-x .nx5 .nx5-table td b { font-size: 14px; }
/* Trabajadores: formulario de siempre solo cuando se abre una persona */
#externalAdminScreen.nx5-x [data-ext-panel="workers"] > .card + .card { display: none; }
/* Asistencia y geocercas: la empresa ya está elegida arriba */
#externalAdminScreen.nx5-x .ext-attendance-filters .field:first-child,
#externalAdminScreen.nx5-x .ext-fence-layout > div > .field:first-child { display: none; }
/* Propinas en 4 pasos (mismo cálculo de siempre) */
#externalAdminScreen.nx5-x[data-x5-view="tips"] .ext-payroll-panel > :not(.ext-tips-card):not(.ext-report-modal) { display: none !important; }
#externalAdminScreen.nx5-x[data-x5-view="tips"] .ext-tips-card { background: transparent; border: 0; box-shadow: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
#externalAdminScreen.nx5-x[data-x5-view="tips"] .ext-tips-card > .ext-section-heading { display: none; }
#externalAdminScreen.nx5-x[data-x5-view="tips"] .ext-tip-range,
#externalAdminScreen.nx5-x[data-x5-view="tips"] .ext-tip-worker-picker,
#externalAdminScreen.nx5-x[data-x5-view="tips"] .ext-tip-days { background: #fff; border: 1px solid #e6e8eb; border-radius: 14px; padding: 14px 16px; margin: 0; position: relative; }
#externalAdminScreen.nx5-x[data-x5-view="tips"] .ext-tip-range::before,
#externalAdminScreen.nx5-x[data-x5-view="tips"] .ext-tip-worker-picker::before,
#externalAdminScreen.nx5-x[data-x5-view="tips"] .ext-tip-days::before,
#externalAdminScreen.nx5-x[data-x5-view="tips"] .ext-tip-save-row::before { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; margin-bottom: 8px; width: 100%; grid-column: 1 / -1; flex-basis: 100%; }
#externalAdminScreen.nx5-x[data-x5-view="tips"] .ext-tip-range .field { margin: 0; }
#externalAdminScreen.nx5-x[data-x5-view="tips"] .ext-tip-range { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
#externalAdminScreen.nx5-x[data-x5-view="tips"] .ext-tip-range::before { content: "①  Período"; }
#externalAdminScreen.nx5-x[data-x5-view="tips"] .ext-tip-worker-picker::before { content: "②  Quiénes participan"; }
#externalAdminScreen.nx5-x[data-x5-view="tips"] .ext-tip-days::before { content: "③  Propina de cada día · se reparte según las horas trabajadas de cada persona ese día (método actual, sin cambios)"; font-size: 14px; }
#externalAdminScreen.nx5-x[data-x5-view="tips"] .ext-tip-save-row { background: #fff; border: 1px solid #e6e8eb; border-radius: 14px 14px 0 0; padding: 14px 16px; margin: 0; flex-wrap: wrap; }
#externalAdminScreen.nx5-x[data-x5-view="tips"] .ext-tip-save-row::before { content: "④  Resultado y comprobantes"; }
#externalAdminScreen.nx5-x[data-x5-view="tips"] .ext-tips-reconciliation,
#externalAdminScreen.nx5-x[data-x5-view="tips"] .ext-tips-card > .ext-batch-actions,
#externalAdminScreen.nx5-x[data-x5-view="tips"] .ext-tips-card > .ext-report-message,
#externalAdminScreen.nx5-x[data-x5-view="tips"] .ext-tips-card > .scroll { background: #fff; border-left: 1px solid #e6e8eb; border-right: 1px solid #e6e8eb; margin: -12px 0 0; padding: 8px 16px; }
#externalAdminScreen.nx5-x[data-x5-view="tips"] .ext-tips-card > .scroll { border-bottom: 1px solid #e6e8eb; border-radius: 0 0 14px 14px; padding-bottom: 14px; }
/* Cortina: estado y prueba a la izquierda, lista única de permisos a la derecha */
#externalAdminScreen.nx5-x .ext-door-panel:not([hidden]) { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 14px; align-items: start; }
#externalAdminScreen.nx5-x .ext-door-panel > .ext-door-intro { display: none; }
#externalAdminScreen.nx5-x .ext-door-panel > .ext-door-grid { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 14px; margin: 0; }
#externalAdminScreen.nx5-x .ext-door-panel > .x5-doorcard { grid-column: 2; grid-row: 1; }
#externalAdminScreen.nx5-x .ext-door-grid .ext-door-log { margin: 0; }
#externalAdminScreen.nx5-x .ext-door-panel > .ext-door-permissions { display: none; }
#externalAdminScreen.nx5-x:not(.x5-door-edit) .ext-door-panel .ext-door-settings,
#externalAdminScreen.nx5-x:not(.x5-door-edit) .ext-door-panel > .ext-door-users,
#externalAdminScreen.nx5-x:not(.x5-door-edit) .ext-door-panel .ext-door-actions { display: none; }
#externalAdminScreen.nx5-x.x5-door-edit .ext-door-panel > .ext-door-users { grid-column: 1 / -1; margin: 0; }
#externalAdminScreen.nx5-x.x5-door-edit .ext-door-panel:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
#externalAdminScreen.nx5-x.x5-door-edit .ext-door-panel > .x5-doorcard { grid-column: 1; grid-row: auto; }
.x5-doorcard tr.x5-off td { opacity: .55; }
.x5-doorcard td, .x5-doorcard th { padding: 9px 6px; }
.x5-doorcard th:nth-child(n+2):nth-child(-n+4), .x5-doorcard td:nth-child(n+2):nth-child(-n+4) { width: 64px; padding-left: 2px; padding-right: 2px; }
.x5-doorcard td:nth-child(5) { white-space: nowrap; font-size: 12.5px; }
.x5-doorcard td:first-child { min-width: 150px; }
/* Facturas */
.x5-inv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.x5-inv.with-side { grid-template-columns: minmax(0, 1fr) 310px; }
.x5-row { cursor: pointer; }
.x5-row:hover td { background: #fafbfc; }
.x5-row.on td { background: #fcebec; }
.x5-row.on td:first-child { box-shadow: inset 3px 0 0 var(--nx-red, #cf0912); }
.x5-invside { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 10px; }
.x5-photo { height: 120px; border-radius: 10px; background: #f1efe9; border: 1px solid #e3e0d6; display: grid; place-items: center; overflow: hidden; position: relative; padding: 0; cursor: pointer; width: 100%; }
.x5-photo img { width: 100%; height: 100%; object-fit: cover; }
.x5-photo span { position: absolute; right: 8px; bottom: 8px; background: rgba(255,255,255,.92); border-radius: 8px; padding: 3px 8px; font-size: 12px; font-weight: 800; }
.x5-photo.off { cursor: default; height: 54px; }
.x5-photo.off span { position: static; background: none; color: #6b747c; }
.x5-hot { border-color: var(--nx-red, #cf0912) !important; box-shadow: 0 0 0 1px var(--nx-red, #cf0912) inset; }
.x5-del summary { cursor: pointer; color: #6b747c; font-size: 13px; }
.x5-bare { border: 0; background: transparent; font: inherit; font-weight: 800; cursor: pointer; }
/* Sueldos */
.x5-pay { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 14px; align-items: start; }
.x5-weeks td, .x5-weeks th { padding: 7px 4px; }
.x5-weeks th { white-space: normal; line-height: 1.2; }
.x5-weeks .nx5-input { height: 36px; text-align: right; font-weight: 750; }
.x5-weeks .x5-n { width: 46px; text-align: center; }
.x5-weeks .x5-h { width: 104px; }
.x5-weeks tr.x5-reason .nx5-input { text-align: left; font-weight: 500; }
.x5-weeks .nx5-pill { white-space: normal; line-height: 1.2; }
.x5-weeks .nx5-link { font-size: 12px; }
#externalAdminScreen.nx5-x .nx5 .nx5-input, #externalAdminScreen.nx5-x .nx5 select.nx5-input { font-size: 14px; }
.x5-weeks tr.x5-edited td { background: #fffaf0; }
.x5-weeks tr.x5-reason td { padding-top: 0; }
.x5-weeks tfoot td { background: #fcebec; color: #a90913; font-weight: 800; padding: 12px 6px; }
.x5-salary .x5-kv { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.x5-salary .x5-kv > span { flex: 1; min-width: 0; }
.x5-salary .x5-kv small { display: block; color: #6b747c; font-size: 12px; }
.x5-salary .x5-kv > .nx5-input { width: 118px; text-align: right; font-weight: 800; }
.x5-salary select { border: 0; background: none; font: inherit; font-size: 12px; color: #6b747c; padding: 0; }
.x5-plain { border: 0; border-bottom: 1px dashed #c9ced3; font: inherit; font-weight: 700; width: 100%; padding: 2px 0; background: transparent; }
.x5-totalcard .k { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.x5-totalcard .v { font-size: 32px; font-weight: 850; margin: 4px 0; }
.x5-totalcard .s { font-size: 12.5px; opacity: .9; }
/* Café en una página */
.x5-cafe-team { margin-bottom: 14px; }
.x5-cafe-h { display: block; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #6b747c; margin: 0 0 8px 2px; }
.x5-cafe-team .cga-team td:first-child { min-width: 180px; }
.x5-cafe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.x5-cafe-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.x5-cafe .cga-grid { display: flex; flex-direction: column; gap: 14px; }
.x5-cafe .cga-card { margin: 0; }

/* ---------- Celular ---------- */
@media (max-width: 1100px) {
  .nx5-split { grid-template-columns: 1fr; }
  .nx5-list { border-right: 0; border-bottom: 1px solid #e6e8eb; max-height: 320px; }
  .nx5-slip { grid-template-columns: 1fr; }
  .nx5-place { grid-template-columns: 1fr; }
  .nx5-thumbs { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid #e6e8eb; }
  .nx5-thumb { min-width: 90px; }
  .nx5-xshell { grid-template-columns: 1fr; }
  .nx5-xside { position: static; max-height: 260px; border-right: 0; border-bottom: 1px solid #e6e8eb; }
  .nx5-xmain { border-radius: 0 0 16px 16px; padding: 14px; }
  .x5-pay, .x5-inv.with-side, .x5-cafe { grid-template-columns: 1fr; }
  #externalAdminScreen.nx5-x .ext-door-panel:not([hidden]) { grid-template-columns: 1fr; }
  #externalAdminScreen.nx5-x .ext-door-panel > .x5-doorcard { grid-column: 1; grid-row: auto; }
}
@media (max-width: 760px) {
  .nx5-grid.g2, .nx5-grid.g3, .nx5-grid.g4, .nx5-form-grid { grid-template-columns: 1fr; }
  .nx5-pane { padding: 14px; }
  .nx5-head h1 { font-size: 20px; }
  .nx5-modal { padding: 0; }
  .nx5-modal-box, .nx5-modal-box.wide, .nx5-modal-box.full { width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; }
}

/* 5.0.1 · Personal externo › Ubicación (lugares de marcación, opción B) */
.x5pl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 10px; }
.x5pl-place { font: inherit; text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--nx-line, #e6e8eb); background: #fff; color: inherit; cursor: pointer; min-width: 0; }
.x5pl-place:hover { border-color: #c9ced3; }
.x5pl-place.on { border-color: var(--nx-red, #cf0912); box-shadow: inset 0 0 0 1px var(--nx-red, #cf0912); background: #fffafa; }
.x5pl-place-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.x5pl-place-top b { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x5pl-place-top b .nx5-i { color: var(--nx-red, #cf0912); flex: none; }
.x5pl-place small { color: #6b747c; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x5pl-place-n { display: inline-flex; align-items: center; gap: 4px; font-weight: 750; font-size: 13px; }
.x5pl-place.warn { background: #fffaf2; border-color: #f3d9b0; }
.x5pl-place.warn b { color: #9a5a00; }
.x5pl-place.warn small { white-space: normal; }
.x5pl-place.add { border-style: dashed; align-items: center; justify-content: center; flex-direction: row; color: var(--nx-red, #cf0912); font-weight: 800; min-height: 64px; }
.x5pl-place.add.on { border-style: solid; }
.x5pl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; min-height: 470px; }
.x5pl-mapcard { padding: 0; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.x5pl-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding: 10px 12px; position: relative; z-index: 3; }
.x5pl-bar label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.x5pl-bar label > span:first-child { font-size: 11.5px; font-weight: 800; color: #6b747c; }
.x5pl-bar input { height: 34px; border: 1px solid var(--nx-line, #dfe3e6); border-radius: 10px; padding: 0 10px; font: inherit; min-width: 0; background: #fff; }
.x5pl-name { flex: 1 1 160px; max-width: 240px; }
.x5pl-bar .nx5-btn { height: 34px; }
.x5pl-search { flex: 2 1 280px; position: relative; }
.x5pl-row { display: flex; gap: 6px; }
.x5pl-row input { flex: 1; }
.x5pl-results { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: #fff; border: 1px solid var(--nx-line, #dfe3e6); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.14); display: flex; flex-direction: column; overflow: hidden; }
.x5pl-results button { font: inherit; text-align: left; border: 0; background: #fff; padding: 9px 12px; cursor: pointer; border-top: 1px solid #f0f1f3; }
.x5pl-results button:first-child { border-top: 0; }
.x5pl-results button:hover { background: #fff1f2; }
.x5pl-coords { display: flex; gap: 6px; flex: 1 1 100%; }
.x5pl-coords input { width: 150px; }
.x5pl-mapwrap { position: relative; flex: 1; min-height: 470px; background: #eef0ea; }
.x5pl-mapwrap > .x5pl-map { position: absolute !important; inset: 0; }
.x5pl-nomap { position: absolute; inset: 0; display: grid; place-items: center; color: #6b747c; padding: 20px; text-align: center; }
.x5pl-size { position: absolute; left: 12px; bottom: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: fit-content; max-width: calc(100% - 24px); background: rgba(255,255,255,.97); border-radius: 12px; padding: 8px 10px; box-shadow: 0 2px 12px rgba(0,0,0,.14); z-index: 2; }
.x5pl-step { width: 30px; padding: 0; justify-content: center; font-size: 17px; }
.x5pl-m { font-size: 15px; min-width: 64px; text-align: center; }
.x5pl-save { display: inline-flex; align-items: center; gap: 6px; padding-left: 8px; margin-left: 2px; border-left: 1px solid var(--nx-line, #e6e8eb); white-space: nowrap; }
.x5pl-size > .nx5-mut { white-space: nowrap; }
.x5pl-save b { color: #9a5a00; font-size: 12.5px; }
.x5pl-coordlink { position: absolute; left: 12px; top: 12px; z-index: 2; font: inherit; font-size: 12px; font-weight: 700; border: 0; border-radius: 99px; padding: 5px 10px; background: rgba(255,255,255,.95); color: #3a4148; box-shadow: 0 1px 6px rgba(0,0,0,.12); cursor: pointer; }
.x5pl-mk { display: flex; align-items: center; gap: 5px; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; }
.x5pl-mk i { width: 14px; height: 14px; border-radius: 50%; background: #2563eb; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.x5pl-mk span { background: #1e3a8a; color: #fff; font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.x5pl-people { display: flex; flex-direction: column; min-width: 0; }
.x5pl-title { font-size: 16px; font-weight: 800; }
.x5pl-list { flex: 1; overflow: auto; margin-top: 8px; max-height: 470px; }
.x5pl-person { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-top: 1px solid #f0f1f3; border-radius: 8px; }
.x5pl-person:first-child { border-top: 0; }
.x5pl-person .nx5-avatar { width: 30px; height: 30px; font-size: 11px; }
.x5pl-person.here .nx5-avatar { background: #e6f4ec; color: #11673f; }
.x5pl-person.focus { background: #fff8e6; }
.x5pl-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.x5pl-who b { font-size: 13.5px; line-height: 1.2; }
.x5pl-who small { color: #6b747c; font-size: 12px; }
.x5pl-person .nx5-pill { font-size: 11px; padding: 3px 8px; max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
.x5pl-act { flex: none; width: 96px; display: flex; justify-content: flex-end; }
.x5pl-act .nx5-btn { padding: 0 9px; }
.x5pl-rm { color: #6b747c; }
.x5pl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--nx-line, #e6e8eb); }
.x5pl-door.on { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; color: #11673f; background: #e6f4ec; border-radius: 10px; padding: 8px 12px; }
.x5pl-del { font: inherit; font-size: 12.5px; font-weight: 700; color: #a90913; background: none; border: 0; cursor: pointer; margin-left: auto; padding: 6px; }
.x5pl-note { margin-top: 8px; font-size: 12px; }
@media (max-width: 1180px) { .x5pl-grid { grid-template-columns: minmax(0, 1fr); } .x5pl-list { max-height: none; } }

/* 5.0.2 · Trabajadores › Ubicación (mismo diseño que Personal externo) */
.erp-screen[data-erpscreen="geo"].x5pl-staff > :not(.x5pl-host) { display: none !important; }
.x5pl-host { display: flex; flex-direction: column; gap: 14px; }
.x5pl-host .nx5-head h1 { margin: 0; }