/* Módulo Nómina. Solo tokens de app.css; estado = tinte + borde completo, nunca barras laterales. */
/* Las pestañas y tablas anchas se desplazan dentro de su caja: la columna principal no debe crecer más que la pantalla. */
.main:has(.nm-page) { min-width: 0; }
.nm-page .stack { grid-template-columns: minmax(0, 1fr); }
.nm-page .stack > * { min-width: 0; }
.nm-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); align-items: start; }
.nm-wrap { flex-wrap: wrap; gap: 10px; }
.nm-end { align-self: end; }
.nm-gap { margin-top: 12px; }
.nm-inline { grid-auto-flow: column; align-items: center; gap: 8px; }
.nm-actions { text-align: right; white-space: nowrap; }
.nm-left { text-align: left; }
.nm-warn { color: var(--warn); }
.nm-row-bad td { background: var(--bad-soft); }
.nm-row-warn td { background: var(--warn-soft); }
.nm-total td { font-weight: 600; border-top: 1px solid var(--border-strong); }
.nm-check { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; font-weight: 500; cursor: pointer; }
.nm-check input { width: 18px; height: 18px; accent-color: var(--sel); }
.nm-check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nm-nov-form { margin-bottom: 14px; }

/* Avisos: .notice (app.css); .nm-banner solo la lista interna */
.nm-banner ul { margin: 6px 0 0; padding-left: 18px; }

/* Configuración */
.nm-fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px 14px; margin: 0; min-width: 0; }
.nm-fieldset legend { padding: 0 6px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }

/* Reportes: la tabla ancha se desplaza dentro de su tarjeta, nunca la página. */
.nm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nm-report { min-width: 640px; }
.nm-report th, .nm-report td { white-space: nowrap; }

/* Prestaciones: barra .bar (app.css) */
.nm-bar { min-width: 80px; }

/* Recibo */
.nm-receipt { display: grid; gap: 18px; }
.nm-receipt-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.nm-receipt-period { text-align: right; }
.nm-receipt-kv { grid-template-columns: minmax(120px, 30%) 1fr; }
.nm-receipt-cols { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
.nm-net { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--radius); padding: 14px 16px; font-weight: 600; }
.nm-net .num { font-size: 22px; letter-spacing: -.02em; }
.nm-sign { padding-top: 8px; }

@media (max-width: 820px) {
  .nm-receipt-period { text-align: left; }
  table.resp td.num, table.resp td.nm-actions { text-align: left; }
  .nm-inline { grid-auto-flow: row; }
}

/* Impresión: solo el documento. */
@media print {
  body:has(.nm-print) .side, body:has(.nm-print) .bottom, .nm-no-print { display: none !important; }
  body:has(.nm-print) .shell { display: block; }
  body:has(.nm-print) .main { padding: 0; max-width: none; }
  .nm-print { border: 0; padding: 0; }
  .nm-print table { page-break-inside: avoid; }
  .nm-net { background: none; }
}

/* Declaración de compensación y constancia */
.nm-big { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.nm-group th { padding-top: 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
.nm-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nm-bars .nm-bar { margin-top: 4px; }
.nm-gap-b { margin-bottom: 12px; }
.nm-letter { display: grid; gap: 14px; max-width: 760px; }
.nm-letter p { line-height: 1.65; }
.nm-letter-table { max-width: 460px; }
.nm-signature { margin-top: 36px; display: grid; gap: 2px; justify-items: start; }
.nm-sign-line { width: 240px; max-width: 100%; border-top: 1px solid var(--text); margin-bottom: 6px; }
@media print {
  .nm-statement, .nm-letter { break-inside: avoid; font-size: 12px; }
  .bar span { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}


/* Fase visual 2B · Mis recibos: dato héroe, acumulado en mini indicadores y recibos por mes (sin tarjetas dentro de tarjetas). */
.nm-hero { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-radius: var(--r-xl); padding: 22px 24px; border: 1px solid var(--border);
  background: linear-gradient(120deg, var(--accent-soft), var(--bg) 70%); }
.nm-hero-kpi { display: grid; gap: 4px; min-width: 0; }
.nm-hero-kpi small { color: var(--text-2); font-size: 13px; }
.nm-hero-kpi > b { font-size: var(--fs-kpi-hero); letter-spacing: -.035em; line-height: 1.1; text-align: left; }
.nm-hero-act { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.nm-mini { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nm-mini > div { border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; display: grid; gap: 2px; background: var(--bg); min-width: 0; }
.nm-mini small { font-size: 12px; color: var(--text-2); }
.nm-mini b { font-size: 17px; letter-spacing: -.02em; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .nm-mini > div { background: var(--surface); border-color: transparent; }
.nm-month { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 14px 0 4px; }
.nm-recs > .nm-month:first-child { margin-top: 0; }
.nm-rec { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; text-decoration: none; border-radius: var(--r-md); padding: 4px; margin: -4px; }
.nm-rec:hover { background: var(--surface); }
.nm-rec-txt { display: grid; gap: 2px; min-width: 0; }
.nm-rec-amt { display: grid; justify-items: end; gap: 0; }
.nm-rec-amt b { font-size: 15px; }
/* Nómina (RRHH/Dirección): quincena protagonista, etapas por empresa, historial plegable */
.nm-cur-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.nm-cur-head h2 { margin: 4px 0 2px; }
.nm-co-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) 150px; gap: 14px; align-items: center; }
.nm-co-row > .btn { justify-self: end; }
.nm-co { display: grid; gap: 2px; min-width: 0; }
.nm-co-name { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.nm-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--text-3); flex: none; }
.nm-flow { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12px; }
.nm-flow span { padding: 3px 9px; border-radius: 99px; background: var(--surface-2); color: var(--text-2); font-weight: 550; white-space: nowrap; }
.nm-flow span.done { background: var(--ok-soft); color: var(--ok); }
.nm-flow span.on { background: var(--accent); color: var(--on-accent); }
.nm-hist { border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 14px; background: var(--bg); }
.nm-hist > summary { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; }
.nm-hist > summary::-webkit-details-marker { display: none; }
.nm-hist > summary::after { content: "+"; color: var(--text-3); font-size: 18px; width: 14px; text-align: center; }
.nm-hist[open] > summary::after { content: "–"; }
.nm-hist-t { flex: 1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.nm-hist > .list { padding-bottom: 14px; }
.nm-hist > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
@media (max-width: 820px) {
  .nm-hero { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .nm-hero-act { justify-content: flex-start; }
  .nm-hero-kpi > b { font-size: 32px; }
  .nm-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nm-co-row { grid-template-columns: minmax(0, 1fr) auto; }
  .nm-co-row .nm-flow { grid-column: 1 / -1; order: 3; }
}
.nm-recs ul.list { list-style: none; margin: 0; padding: 0; }

/* Planilla con desglose del devengado (salario · bonificación · comisiones …) y fila de totales */
.nm-table-wrap { overflow-x: auto; }
.nm-breakdown { min-width: 980px; }
.nm-breakdown td, .nm-breakdown th { white-space: nowrap; }
.nm-breakdown td:first-child { white-space: normal; min-width: 180px; }
.nm-breakdown tfoot th, .nm-breakdown tfoot td { border-top: 2px solid var(--border-strong); border-bottom: 0; padding-top: 12px; font-weight: 600; text-align: left; }
.nm-breakdown tfoot td.num { text-align: right; }
@media (max-width: 820px) {
  .nm-breakdown { min-width: 0; }
  .nm-breakdown td, .nm-breakdown th { white-space: normal; }
  .nm-breakdown tfoot { display: block; }
  .nm-breakdown tfoot tr { display: grid; gap: 4px; padding: 12px 0; border-top: 2px solid var(--border-strong); }
  .nm-breakdown tfoot th, .nm-breakdown tfoot td { border: 0; padding: 0; }
  .nm-breakdown tfoot td:empty { display: none; }
}
/* Configuración por empresa: contraída por defecto, con resumen de los valores clave */
.nm-cfg { padding: 0; }
.nm-cfg-sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 16px 20px; flex-wrap: wrap; }
.nm-cfg-sum::-webkit-details-marker { display: none; }
.nm-cfg-sum:hover { background: var(--surface); border-radius: inherit; }
.nm-cfg-t { display: grid; gap: 2px; flex: 1 1 320px; min-width: 0; }
.nm-cfg-t h2 { margin: 0; }
.nm-cfg-chev { width: 10px; height: 10px; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(-45deg); transition: transform .15s; flex: none; margin-right: 2px; }
.nm-cfg[open] .nm-cfg-chev { transform: rotate(45deg); }
.nm-cfg-body { padding: 0 20px 20px; }
/* Configuración (v2): bloques compactos en rejilla, estructura salarial y matriz de componentes */
.nm-cfg-body { display: grid; gap: 16px; }
.cfg-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cfg-box { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; display: grid; gap: 12px; align-content: start; min-width: 0; background: var(--bg); }
.cfg-box.span2 { grid-column: 1 / -1; }
.cfg-box-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.cfg-box-h h3 { margin: 0; font-size: 14px; font-weight: 600; }
.cfg-fields { display: grid; gap: 8px; }
.cfg-fields.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.cfg-field { display: grid; grid-template-columns: minmax(0, 1fr) 150px; align-items: center; gap: 12px; }
.cfg-field label { font-size: 13px; color: var(--text-2); }
.cfg-in { position: relative; }
.cfg-in .input { height: 36px; padding-right: 52px; text-align: right; }
.cfg-in .input:not(.num) { text-align: left; }
.cfg-unit { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--text-3); pointer-events: none; }
.cfg-opts { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cfg-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.cfg-opt:has(input:checked) { border-color: var(--sel); background: var(--sel-soft); box-shadow: 0 0 0 1px var(--sel) inset; }
.cfg-opt input { margin-top: 3px; }
.cfg-opt-t { display: grid; gap: 2px; }
.cfg-matrix-wrap { overflow-x: auto; }
.cfg-matrix { width: 100%; border-collapse: collapse; }
.cfg-matrix th { font-size: 12px; font-weight: 500; color: var(--text-2); text-align: center; padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.cfg-matrix th:first-child { text-align: left; }
.cfg-matrix td { padding: 8px; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; }
.cfg-matrix td:first-child { text-align: left; }
.cfg-matrix tr:last-child td { border-bottom: 0; }
.cfg-matrix tr.locked td:first-child .n { color: var(--text-2); }
.cfg-warn { color: var(--warn); }
.cfg-tog { display: inline-flex; cursor: pointer; }
.cfg-tog input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cfg-tog span { width: 34px; height: 20px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border-strong); position: relative; transition: background .15s; }
.cfg-tog span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.cfg-tog input:checked + span { background: var(--ok); border-color: var(--ok); }
.cfg-tog input:checked + span::after { transform: translateX(14px); }
.cfg-tog input:disabled + span { opacity: .45; cursor: not-allowed; }
.cfg-tog input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.cfg-foot { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; padding-top: 14px; border-top: 1px solid var(--border); }
.cfg-note { flex: 1 1 320px; margin: 0; }
@media (max-width: 900px) {
  .cfg-grid, .cfg-opts, .cfg-fields.two { grid-template-columns: minmax(0, 1fr); }
  .cfg-field { grid-template-columns: minmax(0, 1fr) 130px; }
  .cfg-matrix thead { display: none; }
  .cfg-matrix, .cfg-matrix tbody, .cfg-matrix tr, .cfg-matrix td { display: block; width: 100%; }
  .cfg-matrix tr { border-bottom: 1px solid var(--border); padding: 8px 0; }
  .cfg-matrix td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; align-items: center; text-align: left; }
  .cfg-matrix td:first-child { display: block; }
  .cfg-matrix td[data-label]::before { content: attr(data-label); font-size: 13px; color: var(--text-2); }
}

/* Configuración por pestañas: cada panel es su propio formulario, con su propio guardado. */
.nm-cfg-body > .tabs { margin: 0 0 16px; }
.cfg-panel[hidden] { display: none; }
.cfg-panel .cfg-foot { justify-content: space-between; align-items: center; margin-top: 16px; }
.cfg-firma { display: grid; gap: 12px; max-width: 640px; }

/* Comisiones por objetivos: una sección plegable por persona, con su plan y el cálculo en vivo. */
.nm-comi-body { padding: 0 16px 14px; }
.nm-comi-body .nm-end { justify-content: flex-end; margin-top: 10px; }
input.nm-logro { max-width: 110px; text-align: right; }

/* Opción de estructura que todavía no se puede usar: se ve que está condicionada, pero sigue siendo pulsable —
   al pulsarla abre el formulario del dictamen en vez de no hacer nada. */
.cfg-opt-bloq { border-style: dashed; }
.cfg-opt-bloq .cfg-opt-t > b { color: var(--text-2); }
.cfg-opt-aviso { display: block; margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--warn); }

/* Quincena impresa o guardada como PDF (pedido 2026-09-26): sin menú, botones ni formularios; la planilla completa y en horizontal. */
@media print {
  @page { size: landscape; margin: 10mm; }
  body:has(.nm-period-head) .side, body:has(.nm-period-head) .bottom, body:has(.nm-period-head) .topbar, body:has(.nm-period-head) .back-link { display: none !important; }
  body:has(.nm-period-head) .shell { display: block; }
  body:has(.nm-period-head) .main { padding: 0; max-width: none; }
  .nm-period-head .row, .nm-period-head ~ * form, .nm-period-head ~ * .btn, .nm-period-head ~ * details.menu, .nm-actions { display: none !important; }
  .nm-period-head ~ * .card { break-inside: avoid; border-color: #ccc; }
  .nm-table-wrap { overflow: visible !important; }
  .nm-table { font-size: 10pt; }
}

/* Menú «Acciones» de la quincena y notas al pie de la planilla (pedido 2026-09-26) */
.nm-acts > summary.menu-b { min-width: 0; padding-inline: 14px; font-size: var(--fs-body); gap: 6px; }
.nm-acts .menu-pop { right: 0; left: auto; min-width: 250px; }
.nm-ref { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 99px; border: 1px solid var(--warn-line);
  background: var(--warn-soft); color: var(--warn); font: 600 12px/1 var(--font); vertical-align: 2px; cursor: pointer; }
.nm-ref.bad { border-color: var(--bad-line); background: var(--bad-soft); color: var(--bad); }
.nm-ref:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nm-notes { margin: 14px 0 0; padding: 12px 16px 12px 34px; border-top: 1px solid var(--border); display: grid; gap: 6px; color: var(--text-2); }
.nm-notes li::marker { font-weight: 600; color: var(--warn); }
.nm-notes li.bad::marker, .nm-notes li.bad b { color: var(--bad); }
.nm-notes li.hl { background: var(--warn-soft); border-radius: var(--r-sm); transition: background var(--d2); }

/* ---------- Plan del mes y del año (2026-09-26): empresas × 1.ª/2.ª quincena, fechas límite y atrasos ---------- */
.nm-mhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.nm-mhead h2 { margin: 2px 0 0; }
.nm-mnav { gap: 8px; align-items: center; }
.nm-mnav .nm-fco { width: auto; min-width: 190px; }
.nm-plan-sub { margin: -6px 0 0; }
.nm-alert { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; width: 100%; }
.nm-counts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.nm-mtx-wrap { overflow-x: auto; }
.nm-mtx, .nm-year { width: 100%; border-collapse: collapse; }
.nm-mtx { min-width: 900px; }
.nm-mtx th, .nm-mtx td { padding: 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.nm-mtx td.num, .nm-mtx th.num { text-align: right; white-space: nowrap; }
.nm-mtx thead th { font-size: var(--fs-xs); color: var(--text-2); font-weight: 600; }
.nm-th-sub { display: block; font-weight: 500; color: var(--text-3); margin-top: 2px; }
.nm-mtx tfoot th, .nm-mtx tfoot td { font-weight: 600; background: var(--surface); border-bottom: 0; }
.nm-co-name { display: block; font-weight: 600; }
.nm-cell { display: grid; gap: 4px; justify-items: start; }
.nm-cell > span:first-child { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.nm-cell-a { color: inherit; text-decoration: none; border-radius: var(--r-sm); padding: 6px 8px; margin: -6px -8px; }
.nm-cell-a:hover { background: var(--surface-2); }
.nm-cell-a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nm-amt { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.nm-due { font-size: var(--fs-xs); color: var(--text-2); }
.nm-due.bad { color: var(--bad); font-weight: 550; }
.nm-due.warn { color: var(--warn); }
.nm-dates { margin: 6px 0 0; color: var(--text-2); }
.nm-pend { display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.nm-pend:last-child { border-bottom: 0; }
.nm-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); }
.nm-legend span { display: inline-flex; gap: 6px; align-items: center; }
.nm-year { min-width: 920px; }
.nm-year th, .nm-year td { padding: 10px 4px; text-align: center; border-bottom: 1px solid var(--border); white-space: nowrap; }
.nm-year th:first-child, .nm-year tbody th, .nm-year tfoot th { text-align: left; padding-left: 12px; }
.nm-year td.num, .nm-year th.num { text-align: right; padding-right: 12px; }
.nm-year thead a { color: var(--text-2); text-decoration: none; font-size: var(--fs-xs); font-weight: 600; }
.nm-year thead a:hover { color: var(--text); text-decoration: underline; }
.nm-year tfoot th, .nm-year tfoot td { font-weight: 600; background: var(--surface); border-bottom: 0; }
.nm-q { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin: 0 1px; border: 1px solid var(--border-strong); background: var(--bg); vertical-align: middle; }
.nm-q.pub { background: var(--ok); border-color: var(--ok); }
.nm-q.prep { background: var(--warn-soft); border-color: var(--warn); }
.nm-q.miss { background: var(--bad-soft); border-color: var(--bad); }
.nm-q.late { background: var(--bad); border-color: var(--bad); }
.nm-q.fut { border-style: dashed; }
.nm-q.pre { background: var(--surface-2); border-color: var(--border); }
a.nm-q:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (max-width: 820px) {
  .nm-mnav { width: 100%; }
  .nm-mnav .nm-fco { flex: 1 1 100%; }
  .nm-mtx { min-width: 0; }
  .nm-mtx thead { display: none; }
  .nm-mtx, .nm-mtx tbody, .nm-mtx tr, .nm-mtx td, .nm-mtx tfoot, .nm-mtx tfoot th { display: block; width: 100%; }
  .nm-mtx tbody tr { border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px 12px; margin-bottom: 10px; }
  .nm-mtx td { border-bottom: 1px solid var(--border); padding: 10px 0; text-align: left !important; }
  .nm-mtx td:last-child { border-bottom: 0; }
  .nm-mtx td[data-label]:not([data-label="Empresa"])::before { content: attr(data-label); display: block; font-size: var(--fs-xs); color: var(--text-3); margin-bottom: 4px; }
  .nm-mtx tfoot tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .nm-mtx tfoot td:empty { display: none; }
  .nm-pend { grid-template-columns: 1fr; gap: 6px; }
}
/* Filtro principal del plan (mes o año) antes de las flechas: etiqueta pequeña encima, alineado con los botones. */
.nm-mnav { align-items: flex-end; }
.nm-pick { margin: 0; min-width: 210px; }
.nm-pick label { font-size: var(--fs-xs); color: var(--text-2); }
@media (max-width: 820px) { .nm-pick { flex: 1 1 100%; } }
/* Flujo de liberación (2026-09-27): prepara → Gerencia General → Dirección, con quién y cuándo. Estado por tinte y borde completo. */
.nm-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.nm-steps li { border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; display: grid; gap: 2px; background: var(--bg); }
.nm-steps li b { font-size: 13px; }
.nm-steps li span { font-size: var(--fs-xs); color: var(--text-2); }
.nm-steps li.done { background: var(--ok-soft); border-color: var(--ok-line); }
.nm-steps li.now { background: var(--warn-soft); border-color: var(--warn-line); }
.nm-steps li.skip { background: var(--surface); border-style: dashed; }
@media (max-width: 820px) { .nm-steps { grid-template-columns: 1fr; } }
@media print { .nm-steps { display: none; } }
/* Selector de quién libera la nómina: nombres largos, a todo lo ancho bajo su etiqueta. */
.cfg-field.cfg-wide { grid-template-columns: 1fr; gap: 6px; }
.cfg-field.cfg-wide .cfg-in .input { padding-right: 12px; text-align: left; width: 100%; }

/* Capa de vida · Mis recibos (2026-09-27): la portada es la de tinta del núcleo (.vh); aquí se anulan los estilos anteriores de .nm-hero. */
.nm-hero.vh { border-radius: 26px; border-bottom-right-radius: 96px; padding: 26px 30px; background: var(--vh-ink); border: 1px solid var(--border); }
.nm-next { display: flex; align-items: center; gap: 14px; }
.nm-next-t { display: grid; gap: 2px; font-size: 13px; max-width: 16ch; }
.nm-next-t b { font-size: 14px; line-height: 1.2; }
.nm-next-t span { opacity: .85; }
.nm-rec .stamp { margin-right: 2px; }
@media (max-width: 720px) { .nm-hero.vh { border-radius: 22px; } }
/* Capa de vida · Plan de nómina: portada índigo con el periodo y quiénes cobran; controles debajo; costo como protagonista. */
.nm-mhead { display: grid; gap: 12px; }
.nm-planhero .vh-title { font-size: clamp(26px, 3vw, 36px); }
.nm-plan-people { display: grid; justify-items: end; gap: 8px; font-size: 13px; opacity: .92; }
.nm-adv { display: flex; align-items: center; gap: 10px; }
@media (max-width: 720px) { .nm-plan-people { justify-items: start; } }
/* Portada del plan a todo el ancho; montos del bento en una línea (GTQ 406,447.28 cabe en la tarjeta de 1/5). */
.nm-mhead { justify-content: normal; align-items: stretch; } /* la regla vieja (flex, space-between) impedía que la columna del grid se estirara */
.nm-kbento .bt-v { font-size: clamp(18px, 1.5vw, 22px); overflow-wrap: normal; white-space: nowrap; }
@media (max-width: 760px) { .nm-kbento .bt-v { white-space: normal; overflow-wrap: anywhere; } }
.nm-kbento .bt-blob { display: none; } /* tarjeta chica: el adorno circular rozaba el monto */
ul.nm-pend-list { list-style: none; margin: 0; padding: 0; }