/**
 * finanzas-nomina.css — WTF Publicidad Panel Interno
 * Finanzas · Módulo 2: Nómina (bloques/finanzas-nomina.html y
 * assets/js/finanzas-nomina.js). Sobre finanzas.css y ventas.css: aquí solo
 * lo propio de Nómina. El verde es acento; texto verde sobre blanco con el
 * verde oscuro (lo resuelven las variables de ventas.css).
 */

/* «Viene de Nómina» en Gastos */
.fin-etq.nomina { background:rgba(155,89,182,.1); border-color:rgba(155,89,182,.32); color:var(--vta-morado); }

/* Periodo actual: cinco tarjetas en el Resumen, cuatro en el periodo */
.nom-main #nom-q-tarjetas { grid-template-columns:repeat(4, minmax(0,1fr)); }
.nom-main #nom-r-tarjetas { grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width: 1100px) { .nom-main #nom-q-tarjetas { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 1000px) { .nom-main #nom-r-tarjetas { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px)  { .nom-main #nom-q-tarjetas, .nom-main #nom-r-tarjetas { grid-template-columns:1fr; } }

.nom-main .vta-periodo-tit { font-size:22px; }
.nom-tabla .vta-fila-sub { display:flex; flex-wrap:wrap; gap:.25rem .45rem; align-items:center; }
.nom-nota { display:inline-flex; align-items:center; gap:.2rem; color:var(--ts); font-style:italic; }
.nom-nota i { font-size:12px; }
.nom-anulado { opacity:.55; }
.nom-anulado span { text-decoration:line-through; }

/* La ficha del pago: neto − descuentos = a pagar */
.nom-apagar { margin-top:.2rem; }
.nom-movs .fin-archivo { flex-wrap:wrap; }
.nom-movs .fin-archivo .der { margin-left:auto; font-variant-numeric:tabular-nums; }
.nom-seg-tipo { max-width:100%; }
.nom-hist-tabla td { vertical-align:top; }

/* Inicio: las tarjetas de Nómina dentro del bloque Finanzas */
#inicio-nomina-pagado, #inicio-nomina-pendiente { cursor:pointer; }

/* El título del periodo: largo en pantalla, corto en el celular */
.nom-tit-corto { display:none; }
@media (max-width: 560px) {
  .nom-tit-largo { display:none; }
  .nom-tit-corto { display:inline; }
}
@media (max-width: 760px) {
  .nom-main .vta-periodo-tit { font-size:18px; }
  .nom-seg-tipo button { padding:6px 9px; }
}