/* Ajustes propios del panel. */
.kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 32px; }
@media (min-width: 1024px) { .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Inicio: tarjeta de pendientes. */
.hn-pend { display: grid; gap: 24px; }
@media (min-width: 1024px) { .hn-pend { grid-template-columns: 2fr 3fr; } }
.hn-pend h3 { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #54664d; margin: 0 0 8px; }
.hn-pend-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 4px 14px; padding: 10px 12px;
  border-radius: 8px; border-left: 4px solid rgba(84,102,77,.5); background: rgba(84,102,77,.07); margin-bottom: 6px; color: inherit; text-decoration: none; }
.hn-pend-row.late { border-left-color: #c27a2c; background: rgba(194,122,44,.12); }
.hn-pend-row small { grid-column: 1 / -1; opacity: .7; }
.hn-pend-row b { font-size: 18px; font-variant-numeric: tabular-nums; }
.hn-pend-row a { color: inherit; white-space: nowrap; }
.hn-pend-row a:hover, a.hn-pend-row:hover { text-decoration: underline; }
.hn-pend-old, .hn-pend-zero { opacity: .6; font-size: 13px; white-space: nowrap; }
.hn-pend-ok { opacity: .7; margin: 0; }
.hn-pend-note { font-size: 12px; opacity: .6; margin: 8px 0 0; }