/*
 * Panel de facturación (2026-09-09).
 *
 * Casi todo sale del tema; acá van solo los dos ajustes que el tema no cubre.
 */

/* Los números grandes de las tarjetas. `tabular-nums` es lo que importa: sin eso, cada refresco
   cambia el ancho de la cifra —el «1» ocupa menos que el «8»— y las tarjetas dan un salto cada
   treinta segundos aunque el total no haya cambiado. */
#pfTarjetas h3 {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Los atajos de período: en móvil los cuatro no caben en una fila cómoda del ancho de la pantalla,
   pero tampoco valen la pena en dos filas. Se dejan que se aprieten y se achica el texto. */
@media (max-width: 575.98px) {
  #pfAtajos .btn { padding-left: .4rem; padding-right: .4rem; font-size: .8rem; }
}

/* El atajo de período elegido. `btn-light` con `.active` del tema se ve MÁS CLARO que los demás,
   o sea al revés de lo que uno espera: el seleccionado parecía el deshabilitado. */
#pfAtajos .btn.active {
  background: var(--ins-primary);
  border-color: var(--ins-primary);
  color: #fff;
}

/* El consecutivo fiscal: veinte dígitos que se comparan a ojo contra el portal de Hacienda. Con
   la tipografía normal cada dígito tiene un ancho distinto y cotejarlos obliga a leer de a uno. */
.pf-consecutivo {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── «Requiere atención» ──────────────────────────────────────────────────────────────────────
   Cada renglón es un enlace al módulo donde se resuelve: mostrar el problema sin la puerta al
   lado obliga a buscarla en el menú, y entonces el panel informa pero no sirve. */
.at-renglon {
    border-color: var(--ins-border-color) !important;
    color: inherit;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.at-renglon:hover {
    background: var(--ins-tertiary-bg, #f6f7fb);
    border-color: var(--ins-secondary-color, #6c757d) !important;
    color: inherit;
}

/* El texto largo cede en vez de estirar la tarjeta. */
.at-renglon .min-w-0 { min-width: 0; }