/* Personal / nómina (pantallas 60, 61, 62 y 64). Solo tokens: nada de colores literales. Prefijo propio: `nom-`. */

.nom-vista { min-width: 0; }
.nom-nota { font-size: 12.5px; margin: 6px 0 10px; }
.nom-pills { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: 10px; }
.client-row .nom-pills, .dt .nom-pills { margin: 0; justify-content: flex-end; }
.nom-tabs { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin: 4px 0 14px; }
.nom-tabs button { flex: none; }
.nom-modo-pac { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.nom-uuid { font-size: 12.5px; overflow-wrap: anywhere; }
.nom-botones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 10px; }
.nom-botones:empty { display: none; }

/* Barras de filtros y listas con casilla. */
.nom-barra { flex-wrap: wrap; }
.nom-todos { flex: none; font-size: 13px; }
.nom-check { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.nom-marcado { background: var(--accent-soft); }
.nom-fija { cursor: default; }
.nom-filtros-fecha { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; max-width: 100%; }
.nom-fecha { width: auto; min-width: 0; max-width: 160px; height: 34px; }
.nom-select { width: auto; min-width: 140px; max-width: 260px; height: 34px; }
.nom-acciones-lista { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }

/* Periodo y formularios cortos en panel. */
.nom-periodo { padding: 14px 16px; margin-bottom: 14px; }
.nom-periodo .panel-cabeza { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; padding: 0 0 10px; border: 0; }
.nom-periodo-campos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.nom-periodo-concepto { grid-column: span 2; }
.nom-periodo-campos .campo { min-width: 0; }

/* Conceptos (empleado y ajustes de la precarga): renglón editable que pasa a tarjeta en móvil. */
.nom-conceptos { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.nom-concepto { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.nom-concepto > .pill { flex: none; align-self: center; }
.nom-c-clave { flex: 1 1 220px; min-width: 0; }
.nom-c-texto { flex: 1 1 180px; min-width: 0; }
.nom-concepto > .btn { flex: none; }
.nom-concepto .campo-input { height: 34px; min-width: 0; width: 100%; }
.nom-c-importe { display: flex; flex-direction: column; gap: 2px; flex: 1 1 100px; max-width: 160px; min-width: 0; }
.nom-c-etq { font-size: 11px; color: var(--ink-3); }
.nom-totales { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; justify-content: flex-end; font-size: 13.5px; padding: 8px 0; color: var(--ink-2); }
.nom-totales b { color: var(--ink-1); }

/* Foto y gafete. */
.nom-foto-marco { width: 180px; height: 220px; max-width: 100%; border-radius: 12px; overflow: hidden; background: var(--sunken); border: 1px solid var(--border); display: grid; place-items: center; }
.nom-foto-marco img { width: 100%; height: 100%; object-fit: cover; }
.nom-foto-vacia { display: flex; flex-direction: column; align-items: center; gap: .4rem; color: var(--ink-3); font-size: 13px; text-align: center; padding: 10px; }
.nom-foto-vacia .fas { font-size: 42px; }

/* Bitácora y listas dentro del drawer. */
.nom-bit-form { padding: 12px; margin-bottom: 12px; }
.nom-items { display: flex; flex-direction: column; }
.nom-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.nom-item:last-child { border-bottom: 0; }
.nom-item .who { flex: 1 1 200px; min-width: 0; }
.nom-item .who-name { font: 700 13.5px var(--font-brand); overflow-wrap: anywhere; }
.nom-item .who-id { font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }
.nom-item .metric { text-align: right; }

/* Horas extra / ajustes. */
.nom-te { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.nom-te .campo { flex: 0 1 140px; min-width: 0; }
.nom-te .nom-te-desc { flex: 1 1 200px; }

/* Caja de resultado (por empleado) y errores de negocio. */
.nom-resultado { display: flex; gap: .6rem; align-items: flex-start; font-size: 13.5px; padding: 12px 14px; margin: 0 0 14px; border-radius: 10px; background: var(--sunken); color: var(--ink-1); overflow-wrap: anywhere; }
.nom-resultado > div { flex: 1; min-width: 0; }
.nom-resultado > .fas { margin-top: 3px; }
.nom-resultado b { display: block; margin-bottom: 2px; }
.nom-resultado .nom-item b, .nom-resultado .nom-lista-avisos b { display: inline; }
.nom-resultado.ok { background: var(--success-soft); }
.nom-resultado.ok > .fas { color: var(--success); }
.nom-resultado.mal { background: var(--danger-soft); }
.nom-resultado.mal > .fas { color: var(--danger); }
.nom-resultado.aviso { background: var(--warning-soft); }
.nom-resultado.aviso > .fas { color: var(--warning); }
.nom-resultado.info { background: var(--info-soft); }
.nom-resultado.info > .fas { color: var(--info); }
.nom-resultado .nom-items { margin-top: 8px; }
.nom-ficha-mini { margin: 8px 0 0; font-size: 12.5px; grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
.nom-lista-avisos { margin: 6px 0 0; padding-left: 1.2rem; font-size: 12.5px; }
.nom-aceptar { margin-top: 10px; font-weight: 600; }

/* Vista previa (importes del servidor). */
.nom-vp-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.nom-tabla td.der, .nom-tabla th.der { text-align: right; }
.nom-difiere { color: var(--warning); font-weight: 700; }
.nom-avisos { font-size: 12px; color: var(--warning); }

@media (max-width: 900px) {
  .nom-periodo-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .nom-periodo-campos { grid-template-columns: minmax(0, 1fr); }
  .nom-periodo-concepto { grid-column: auto; }
  .nom-c-importe { max-width: none; }
  .nom-fecha { max-width: 140px; }
  .nom-select { max-width: 100%; }
  .client-row .nom-pills { order: 4; justify-content: flex-start; }
}

/* Pantallas 63, 65, 66, 67 y 68 (tiempo extra, ISN y calculadoras). Importes: SIEMPRE los del servidor. */
.nom-calc-campos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.nom-calc-campos .campo { min-width: 0; }
.nom-calc-campos .campo-input { width: 100%; min-width: 0; }
.nom-calc-ancho { grid-column: span 2; }
.nom-calc-pie { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 12px; font-size: 12.5px; color: var(--ink-3); }
.nom-calc-pie .btn { flex: none; }
.nom-fuente { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: 12.5px; color: var(--ink-2); margin: 0 0 14px; overflow-wrap: anywhere; }
.nom-fuente .fas { color: var(--ink-3); }
.nom-desfasado { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.nom-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 14px; }
.nom-res .panel { min-width: 0; }
.nom-res-lista { margin: 0; padding: 4px 16px 10px; }
.nom-res-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.nom-res-fila:last-child { border-bottom: 0; }
.nom-res-fila dt { color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.nom-res-fila dd { margin: 0; flex: none; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-1); }
.nom-res-fila.total dt, .nom-res-fila.total dd { font-weight: 700; color: var(--ink-1); }
.nom-res-fila .muted { font-size: 12px; }
.nom-tabla-wrap { overflow-x: auto; max-width: 100%; }
.nom-conceptos-fin { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.nom-conceptos-fin th, .nom-conceptos-fin td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.nom-conceptos-fin th { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.nom-conceptos-fin td.der, .nom-conceptos-fin th.der { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nom-conceptos-fin .nom-c-desc { font-size: 12px; color: var(--ink-3); }
.nom-num { font-variant-numeric: tabular-nums; }
.nom-error-fila { color: var(--danger); font-size: 12px; }

@media (max-width: 900px) {
  .nom-calc-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .nom-calc-campos { grid-template-columns: minmax(0, 1fr); }
  .nom-calc-ancho { grid-column: auto; }
  .nom-res { grid-template-columns: minmax(0, 1fr); }
  /* Conceptos del finiquito como tarjetas: sin scroll horizontal. */
  .nom-conceptos-fin thead { display: none; }
  .nom-conceptos-fin tr { display: block; border-bottom: 1px solid var(--border); padding: 6px 0; }
  .nom-conceptos-fin td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: 3px 4px; }
  .nom-conceptos-fin td::before { content: attr(data-label); color: var(--ink-3); font-size: 12px; }
  .nom-conceptos-fin td.nom-c-celda::before { content: none; }
  .nom-conceptos-fin td.nom-c-celda { display: block; }
}