/**
 * Nómina y asistencia, parte A (Etapa 7a, #1768) — complementos al primitivo ListPage.
 *
 * Solo tokens de design-tokens.css (se adaptan solos al tema oscuro). La estructura la dan
 * ListPage y las tablas del ERP; aquí solo van las pestañas, los avisos, los indicadores y las
 * piezas del modal propias de Lectores biométricos y del cierre de período. Sin max-width que
 * formen islas: la vista usa el ancho del shell.
 */

.nl-root { min-width: 0; }
.nl-panel { min-width: 0; }

/* Pestañas */
.nl-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--surface-border); margin-bottom: var(--space-4); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nl-tab { flex: none; min-height: 44px; padding: var(--space-2) var(--space-4); background: none; border: 0; border-bottom: 2px solid transparent; color: var(--gray-500); font-size: .88rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.nl-tab:hover { color: var(--gray-800); }
.nl-tab.active { color: var(--primary-600); border-bottom-color: var(--primary-500); }
.nl-tab:focus-visible { outline: 2px solid var(--primary-500); outline-offset: -2px; }
.nl-tab-n { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: var(--space-1); border-radius: var(--radius-md); background: var(--gray-100); color: var(--gray-600); font-size: .72rem; text-align: center; }
.nl-tab-n--alerta { background: var(--error); color: #fff; }

/* Etiquetas de estado en tema oscuro (los tonos de list-page.css son claros) */
[data-theme="dark"] .nl-root .lp-tag--red { background: rgba(248, 113, 113, .14); color: var(--error); border-color: rgba(248, 113, 113, .35); }
[data-theme="dark"] .nl-root .lp-tag--amber { background: rgba(251, 191, 36, .14); color: var(--warning); border-color: rgba(251, 191, 36, .35); }
[data-theme="dark"] .nl-root .lp-tag--green { background: rgba(74, 222, 128, .14); color: var(--success); border-color: rgba(74, 222, 128, .35); }

/* Texto auxiliar */
.nl-sub { display: block; margin-top: 2px; color: var(--gray-500); font-size: .76rem; font-weight: 400; }
.nl-sin { color: var(--gray-400); }
.nl-neg { color: var(--error); font-weight: 700; }
.nl-nota { margin: 0 0 var(--space-3); color: var(--gray-500); font-size: .82rem; line-height: 1.45; }
.nl-filtros { margin-bottom: var(--space-3); }
.nl-filtros input[type="date"] { width: auto; flex: 0 1 170px; min-width: 150px; }

/* Acciones de fila */
.nl-acciones { white-space: normal; }
.nl-acciones .btn { margin: 0 var(--space-1) var(--space-1) 0; display: inline-flex; align-items: center; gap: 6px; }

/* Secciones del flujo de importación (una sola agrupación funcional, sin tarjetas flotantes) */
.nl-seccion { margin-bottom: var(--space-6); min-width: 0; }
.nl-h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500); }
.nl-h3 { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-5) 0 var(--space-2); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); }
.nl-seccion[hidden], .nl-grid[hidden] { display: none; }
.nl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.nl-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); margin: var(--space-3) 0; }
.nl-barra .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.nl-pol { display: flex; flex-direction: column; gap: 4px; margin-right: auto; font-size: .8rem; font-weight: 600; color: var(--gray-700); }
.nl-pol .form-control { min-width: 260px; }

/* Indicadores del resultado */
.nl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); }
.nl-kpi { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); border: 1px solid var(--surface-border); border-left-width: 3px; border-radius: var(--radius-lg); background: var(--surface-card); }
.nl-kpi strong { font-size: 1.4rem; font-weight: 700; color: var(--gray-900); }
.nl-kpi span { font-size: .75rem; color: var(--gray-500); }
.nl-kpi--ok { border-left-color: var(--success); }
.nl-kpi--warn { border-left-color: var(--warning); }
.nl-kpi--err { border-left-color: var(--error); }

/* Avisos */
.nl-aviso { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-3); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); font-size: .82rem; line-height: 1.45; }
.nl-aviso svg { flex: none; margin-top: 2px; }
.nl-aviso--info { background: var(--info-bg, rgba(37, 99, 235, .08)); border-color: rgba(37, 99, 235, .3); color: var(--gray-800); }
.nl-aviso--warn { background: var(--warning-bg, rgba(217, 119, 6, .1)); border-color: rgba(217, 119, 6, .35); color: var(--gray-800); }
.nl-aviso--ok { background: var(--success-bg, rgba(22, 163, 74, .1)); border-color: rgba(22, 163, 74, .35); color: var(--gray-800); }

.nl-lista { margin: 0 0 var(--space-2); padding-left: var(--space-5); font-size: .84rem; color: var(--gray-700); }
.nl-lista li { margin-bottom: 2px; }
.nl-check { display: flex; align-items: flex-start; gap: var(--space-2); font-size: .85rem; color: var(--gray-700); cursor: pointer; }
.nl-check input { margin-top: 3px; }

/* Token y direcciones copiables */
.nl-copiar { display: flex; gap: var(--space-2); align-items: stretch; }
.nl-copiar code { flex: 1; min-width: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--surface-border); border-radius: var(--radius-md); background: var(--gray-50); color: var(--gray-900); font-size: .8rem; overflow-wrap: anywhere; user-select: all; }
.nl-copiar .btn { flex: none; display: inline-flex; align-items: center; gap: 6px; }

/* Modal */
.nl-modal { display: flex; flex-direction: column; max-height: 88vh; min-width: 0; }
.nl-modal-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--surface-border); flex-shrink: 0; }
.nl-modal-head > div { flex: 1; min-width: 0; }
.nl-modal-head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--gray-900); }
.nl-modal-head p { margin: 2px 0 0; font-size: .8rem; color: var(--gray-500); overflow-wrap: anywhere; }
.nl-modal-ico { width: 40px; height: 40px; border-radius: var(--radius-xl); background: var(--gray-100); color: var(--primary-500); display: flex; align-items: center; justify-content: center; flex: none; }
.nl-modal-ico--ok { background: rgba(22, 163, 74, .12); color: var(--success); }
.nl-modal-ico--warn { background: rgba(217, 119, 6, .12); color: var(--warning); }
.nl-x { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: var(--radius-md); color: var(--gray-400); cursor: pointer; }
.nl-x:hover { color: var(--gray-700); background: var(--gray-100); }
.nl-modal-body { padding: var(--space-5) var(--space-6); overflow-y: auto; flex: 1; }
.nl-modal-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--surface-border); flex-shrink: 0; background: var(--gray-50); }
.nl-modal-foot .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }

/* Mini-tablas dentro de modales (sin acciones de toolbar): scroll propio, sin desbordar el modal */
.nl-tabla { overflow-x: auto; border: 1px solid var(--surface-border); border-radius: var(--radius-lg); }
.nl-tabla .table { margin: 0; }
.nl-tabla .table td, .nl-tabla .table th { white-space: nowrap; }

/* Tablas con vista de lista (TableResponsive) y tamaños táctiles en móvil */
@media (max-width: 767px) {
    .nl-modal-head, .nl-modal-body, .nl-modal-foot { padding-left: var(--space-4); padding-right: var(--space-4); }
    .nl-acciones .btn { min-height: 40px; }
    .nl-pol { margin-right: 0; width: 100%; }
    .nl-pol .form-control { min-width: 0; width: 100%; }
    .nl-barra .btn { flex: 1 1 auto; justify-content: center; }
    .nl-copiar { flex-direction: column; }
}