/* © 2026 KoreStock Ledger — un proyecto de Kitsótaro · Código disponible, todos los derechos reservados (ver LICENSE).
 * CHIP e INSIGNIA — filtros deslizables y etiquetas pequeñas de estado. */
.fila-chips { display: flex; gap: var(--e-2); overflow-x: auto; scrollbar-width: none; padding: var(--e-1) 0; -webkit-overflow-scrolling: touch; }
.fila-chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: var(--e-1); flex-shrink: 0;
  min-height: var(--alto-control-sm); padding: 0 var(--e-3);
  border: 1.5px solid var(--borde-fuerte); border-radius: var(--r-pildora);
  background: var(--superficie); color: var(--texto); font-size: var(--t-sm); font-weight: var(--peso-medio); white-space: nowrap;
}
.chip[aria-pressed="true"], .chip.activo { background: var(--primario-suave); border-color: var(--primario); color: var(--sobre-primario-suave); }
.chip .cuenta { font-family: var(--fuente-mono); font-size: var(--t-xs); opacity: 0.85; }
.chip .quitar { margin-left: var(--e-1); }

.insignia {
  display: inline-flex; align-items: center; gap: 3px; padding: 1px var(--e-2);
  border-radius: var(--r-pildora); font-size: var(--t-xs); font-weight: var(--peso-fuerte); white-space: nowrap; line-height: 1.5;
  background: var(--superficie-3); color: var(--texto-2);
}
.insignia.nuevo { background: var(--info-suave); color: var(--info); }
.insignia.anulada { background: var(--peligro-suave); color: var(--peligro); text-decoration: line-through; }
.insignia.bonif { background: var(--exito-suave); color: var(--exito); }
.insignia.entrada { background: var(--entrada-suave); color: var(--entrada); }
.insignia.venta { background: var(--venta-suave); color: var(--venta); }
.insignia.aviso { background: var(--aviso-suave); color: var(--aviso); }
/* Chip de filtro activo con su «×» para quitar solo ese filtro */
.chip-grupo { display: inline-flex; align-items: center; flex-shrink: 0; }
.chip-grupo .chip[aria-pressed="true"] + .chip-quitar { margin-left: -1.75rem; }
.chip-grupo:has(.chip-quitar) .chip { padding-right: 2rem; }
.chip-quitar { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 0; border-radius: 50%; background: transparent; color: var(--sobre-primario-suave); cursor: pointer; position: relative; }
.chip-quitar:hover { background: color-mix(in srgb, var(--primario) 18%, transparent); }

/* Chips compactos (filtros): el texto se pliega cuando el filtro no está activo.
   Solo cambian max-width y opacity de la etiqueta; el resto no se mueve. */
.chip-compacto .etiqueta-chip { display: inline-block; max-width: 12rem; overflow: hidden; white-space: nowrap; vertical-align: bottom; transition: max-width var(--dur-lenta) var(--curva), opacity var(--dur-media) var(--curva); }
.chip-compacto[aria-pressed="false"] { padding: 0 var(--e-3); }
.chip-compacto[aria-pressed="false"] .etiqueta-chip { max-width: 0; opacity: 0; }
.chip-compacto[aria-pressed="false"] { gap: 0; }
/* Chip pequeño dentro de una tarjeta (p. ej. «Costo promedio» en Ganancia) */
.chip-mini { min-height: 1.75rem; padding: 0 0.4rem; font-size: 0.6875rem; margin-top: var(--e-2); align-self: flex-start; gap: 3px; max-width: 100%; white-space: nowrap; }
.insignia.ajuste { background: var(--precaucion-suave); color: var(--precaucion); }