/* ═══════════════════════════════════════════════════════════════════════════════ ▓ COMPONENTE · PieLista — gemelo vanilla (hoja de estilo) ▓ v0.2 · 2026-10-27 (decisión 322: el pie de TRES LUGARES). Ficha: `design-system/COMPONENTE_LISTA_LARGA.md` §4. Kit React hermano: `catalogo-cd/components/PieLista.jsx`. El PIE de una lista larga, en tres lugares: «Mostrando N de M abonos» a la izquierda, siempre; al centro un segundo dato opcional (una cuenta, nunca una suma); y a la derecha el dato que le sirve a esa lista («Actualizado …» si cambia seguido; si no, otro). Máximo 3 elementos, sin punto medio entre ellos. Contesta tres preguntas con un solo renglón — «¿cuántos veo?», «¿cuántos hay?» y «¿queda algo?». Copiada selector por selector del bloque `CSS` del `.jsx` (2026-08-24). Sólo tokens. REQUISITOS DEL ANFITRIÓN: 1. Los tokens del canon (`colors_and_type.css`). 2. `box-sizing: border-box`. ═══════════════════════════════════════════════════════════════════════════════ */ .exds-pielista { /* TRES LUGARES (decisión 322): rejilla 1fr · auto · 1fr. El centro queda centrado de verdad y los extremos no se mueven aunque el centro o la derecha no existan (cada hijo ancla su columna). */ display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-4, 16px); /* RELLENO LATERAL 12, NO 16 — regla dura 1 del patrón de lista: banda, celdas y pie declaran UN solo relleno lateral. Ver README § Las reglas que no se ven aquí. */ padding: var(--space-3, 12px); /* FONDO COMO EL ENCABEZADO: encabezado y pie son las dos filas de CROMO de la tabla. */ background: var(--color-bg-subtle, #F2F4F6); border-top: 1px solid var(--color-border-subtle, #E5E7EB); font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif); font-size: var(--fs-body-sm, 13px); font-weight: var(--fw-regular, 400); color: var(--fg3, #5C6B7A); } /* Las cifras no bailan al cambiar el filtro. */ .exds-pielista-num { font-variant-numeric: tabular-nums; } /* TEXTO QUE NO CABE (CLAUDE.md 3-quinquies, README regla dura 18; sin decision nueva): cada lugar es una caja que se puede encoger (min-width 0), una sola linea, y lo que sobre termina en «…» con su globo (data-tip + data-tip-si-recorte: abre solo si de verdad se recorta). Nunca se encima con el vecino ni hay doble renglon. */ .exds-pielista-l { grid-column: 1; justify-self: start; white-space: nowrap; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* El centro: un segundo dato opcional (una cuenta, nunca una suma). Vacío no se pinta. */ .exds-pielista-c { grid-column: 2; justify-self: center; white-space: nowrap; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .exds-pielista-r { grid-column: 3; justify-self: end; display: block; white-space: nowrap; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .exds-pielista-r > * + * { margin-left: var(--space-2, 8px); } /* EN UN VACÍO EL CONTEO CALLA — y se apaga con visibility, NO con display: el renglón no se desarma y el dato de la derecha sigue pegado a la derecha. Ver README. */ .exds-pielista.is-vacia .exds-pielista-l, .exds-pielista.is-vacia .exds-pielista-c { visibility: hidden; } /* UNA SOLA LINEA ENTRE LA ULTIMA FILA Y EL PIE (Ricardo, 2026-10-02: «la linea entre el cuerpo y el pie es mas gruesa que en produccion»). Causa medida: cada fila de Tabla lleva su border-bottom de 1 px y el pie su border-top de 1 px; pegados, suman 2 px (la lista de produccion no los suma: su ultima fila va con border-bottom 0). La linea la pinta el PIE, y la ultima fila de la tabla que lo precede renuncia a la suya. Tres topologias del catalogo: la tabla y el pie hermanos (cuerpo de una pestana a sangre en el detalle), el pie hermano del cuerpo de la tarjeta de pestanas, y el pie hermano de .exds-pl-scroll (PantallaLista). */ /* ⛔ ~ no +: PieLista (kit) inyecta