@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/docs/sui-button-group-item/README.md

@@ -0,0 +1,181 @@
+---
+name: sui-button-group-item
+selector: sui-button-group-item
+resumen: Cada opción de un sui-button-group; no se usa suelto
+alternativas: [sui-button-group (el grupo, que ya pinta sus ítems desde items[]), sui-segmented-control (elegir una sola opción), sui-switch (prender o apagar algo suelto)]
+---
+
+# sui-button-group-item
+
+<!-- generado por scripts/gen-docs.mjs — no editar a mano; `npm run docs` -->
+
+> **De dónde sale este doc.** El criterio es el del SUI Angular (`sui-button-group-item`); la API es la de este
+> paquete, leída del código. Los ejemplos se pasaron de Angular de forma mecánica: lo literal va como
+> atributo (`only-icon`, `size="large"`), lo dinámico entre llaves (`size={expr}` → `el.size = expr`)
+> y los eventos como `onValueChange={…}` → `el.addEventListener('valueChange', …)`. `@if`, `@for` y
+> `<ng-template>` quedan como en Angular: se leen como pseudocódigo.
+
+Story: [Atoms/Button/Button Group Item](https://sui-design-system.web.app/?path=/docs/atoms-button-button-group-item--docs)
+
+## Cuándo usarlo / cuándo no
+
+**No lo uses directo.** `sui-button-group` lo pinta solo a partir de su `items[]`: el grupo le pasa
+`size`, `active` y `disabled`, y es quien le redondea las puntas y le junta los bordes. Las reglas de
+uso (cuándo un button-group, qué tamaño, qué lleva cada opción) están en el README de
+`sui-button-group`.
+
+**Suelto** mantiene su propio borde y se ve como un botón de alternar aislado. Para prender o
+apagar algo suelto está `sui-switch`; para una acción, `sui-button`.
+
+## Qué variante usar
+
+> **La guía del DS lo trata como parte del grupo** («ButtonGroup.Item»), sin props propias más
+> que la de componer. Hoy hay **0** usos directos en la app, ni del grupo.
+
+| prop | valor | cuándo | fuente |
+|---|---|---|---|
+| `size` | `large` · `medium` · `small` · `xsmall` · `2xsmall` | El mismo del grupo; lo pone el grupo. Altos 48 · 40 · 36 · 32 · 24. | `small` a `2xsmall`: escala según la guía del DS · `large` y `medium`: canon (aprobado por el dueño, 03-10-2026), extensión SUI |
+| `active` | `true` | La opción está elegida; lo calcula el grupo desde `value`. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `disabled` | `true` | La opción existe pero hoy no se puede elegir; viene de `disabled` en la entrada de `items`. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `label` | texto | Una a tres letras o una palabra. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `leftIcon` / `rightIcon` | RemixIcon | Ícono a la izquierda si ayuda a distinguir; a la derecha, sin caso. Sin `label` queda cuadrado. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `ariaLabel` | texto | Obligatorio si no hay `label`, o si dos opciones tienen el mismo texto. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+
+## Tamaño en mobile y en web
+
+En mobile se toca con el dedo: el área táctil tiene que medir **44 px o más**. En la tablet
+(`pointer: coarse`) va igual que en el celular, porque también se toca; en la computadora
+(`pointer: fine`), `medium`; en el celular chico (< 380 px), `medium` a la vista sin bajar el área de 44.
+Nada en `small` ni `xsmall` (canon, dueño, 05-10-2026, D16; reemplaza al «tamaño por plataforma» del
+03-10-2026, que bajaba la web a `small`). La app lo resuelve con `BreakpointsService`
+(`src/app/services/breakpoints.service.ts`): la señal `bp.tactil()` (celular por ancho o pantalla
+táctil) ya incluye la tablet; ver «Por dispositivo (D16)» abajo. Medido el 04-10-2026 en `master-pedidos`: 166 `size`
+con `bp` (142 `large`/`medium`, 22 `large`/`small`, 2 `medium`/`xsmall`); los 24 que bajan de `medium` se migran.
+
+El tamaño lo pone el grupo: es el mismo `size` de `sui-button-group` (ver su README).
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| dentro de un grupo | `large` (48) · `medium` (40) si la fila no entra | `medium` (40) | mobile: canon (aprobado por el dueño, 03-10-2026) · web: canon (dueño, 05-10-2026, D16), antes `small` |
+| suelto (barra de herramientas) | no va en mobile | `medium` (40) | no va en mobile: canon (aprobado por el dueño, 05-10-2026, bloque B7) · web: canon (dueño, 05-10-2026, D16), antes `xsmall` o `2xsmall` |
+
+### Por dispositivo (D16)
+
+Dentro del grupo el ítem no elige: recibe el `size` de `sui-button-group` (fila `button-group` de
+la tabla D16, dueño 05-10-2026).
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `large` (48) | D16 pide `medium` con área tocable de 44; mientras el DS no estire el área de los `medium`, va `large` (interino) |
+| celular (380–767 px) | `large` (48) | `medium` (40) si los 7 días no entran: **pendiente (P18)**, falta decidir entre `stretch`, lista de `checkbox-label` o bajar el tope |
+| tablet táctil (`pointer: coarse`) | `large` (48) | también se toca con el dedo: Apple pide 44 pt en el iPad |
+| computadora (`pointer: fine`) | `medium` (40) | también suelto en una barra de herramientas |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`; el espacio extra va a ancho y columnas,
+no a controles más grandes.
+
+En master-pedidos: `size={bp.tactil() ? 'large' : 'medium'}` en el grupo (no hay helper propio;
+da el mismo par que `bp.sizeControl()`). Suelto: `size="medium"`.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+Nada se borra del DS. Lo marcado «no usar» no tiene caso en la app de hoy; si un flujo nuevo cae
+en la columna de la derecha, se usa (aprobado por el dueño, 03-10-2026).
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `sui-button-group-item` suelto | el grupo ya lo pinta desde `items[]`, y suelto se lee como un switch mal dibujado | un botón de alternar en una barra de herramientas de desktop (negrita en un editor de texto) |
+| `rightIcon` | en un grupo de opciones cortas, un ícono a la derecha no agrega nada | una opción que abre un menú (con `arrow-down-s-line`) |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `active` | `active` | `boolean` | `false` |
+| `ariaLabel` | `aria-label` | `string` | `''` |
+| `disabled` | `disabled` | `boolean` | `false` |
+| `label` | `label` | `string` | `''` |
+| `leftIcon` | `left-icon` | `string` | `''` |
+| `rightIcon` | `right-icon` | `string` | `''` |
+| `size` | `size` | `"2xsmall" \| "large" \| "medium" \| "small" \| "xsmall"` | `'small'` |
+
+| evento | `event.detail` |
+|---|---|
+| `clicked` | `void` |
+
+### Diferencias con el SUI Angular
+
+Ninguna en nombres de props, eventos y valores.
+<!-- api:fin -->
+
+## Trampas
+
+- **El output es `clicked` y no lleva payload** (`void`), a diferencia de los otros botones, que
+  mandan el `MouseEvent`.
+- **`active` no se prende solo al tocarlo**: el ítem solo avisa; quien lo usa (normalmente el grupo)
+  tiene que cambiar `active`.
+- Los íconos miden 20 en `large`, `medium`, `small` y `xsmall`, y 16 en `2xsmall`.
+- Suelto no recibe las puntas redondeadas del grupo: esas reglas dependen de los atributos
+  `data-sui-first` y `data-sui-last` que pone `sui-button-group`.
+- Es un `<button type="button">` con `aria-pressed`: el lector de pantalla lo anuncia como botón de
+  alternar.
+
+## Bien y mal
+
+Hoy no hay usos en la app (ni del ítem ni del grupo): los pares salen de «Trampas» y de «Cuándo no».
+
+**Opciones armadas a mano en vez de `items`**
+
+```html
+<!-- ❌ mal: sueltos no reciben las puntas redondeadas ni los bordes juntos; eso lo pone el grupo -->
+<div class="horario__dias">
+  <sui-button-group-item label="L" size="medium" active={lunes()} onClicked={() => lunes.set(!lunes())} />
+  <sui-button-group-item label="M" size="medium" active={martes()} onClicked={() => martes.set(!martes())} />
+</div>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-button-group items={dias} multi value={diasAbiertos} onValueChange={(e) => (diasAbiertos = e.detail)} aria-label="Días de atención"
+                  size={bp.tactil() ? 'large' : 'medium'} />
+```
+
+**Botón de alternar suelto en una barra de desktop**
+
+```html
+<!-- ❌ mal: 2xsmall (24) es chico (D16) y, sin label ni ariaLabel, el lector de pantalla no dice qué es -->
+<sui-button-group-item left-icon="bold" size="2xsmall" active={negrita()} onClicked={() => negrita.set(!negrita())} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-button-group-item left-icon="bold" aria-label="Negrita" size="medium"
+                       active={negrita()} onClicked={() => negrita.set(!negrita())} />
+```
+
+**Esperar que se prenda solo al tocarlo**
+
+```html
+<!-- ❌ mal: active no cambia solo; el ítem avisa con (clicked) y se queda apagado -->
+<sui-button-group-item label="Negrita" size="medium" onClicked={() => guardarFormato()} />
+```
+
+```html
+<!-- ✅ bien: quien lo usa cambia active -->
+<sui-button-group-item label="Negrita" size="medium" active={negrita()} onClicked={() => negrita.set(!negrita())} />
+```
+
+## Ejemplo
+
+```html
+<!-- Lo normal: no se escribe a mano, lo arma el grupo -->
+<sui-button-group items={dias} multi value={diasAbiertos} onValueChange={(e) => (diasAbiertos = e.detail)} aria-label="Días de atención"
+                  size={bp.tactil() ? 'large' : 'medium'} />
+
+<!-- Suelto, solo en el caso de «cuándo sí» -->
+<sui-button-group-item left-icon="bold" aria-label="Negrita" size="medium"
+                       active={negrita()} onClicked={() => negrita.set(!negrita())} />
+```

package/docs/sui-card/README.md

@@ -0,0 +1,267 @@
+---
+name: sui-card
+selector: sui-card
+resumen: Superficie con borde, radio y sombra que agrupa contenido, con slots de header, cuerpo, media y footer
+alternativas: [sui-content-card (una fila «cara + nombre + detalle» dentro de su cajita), sui-radio-card / sui-checkbox-card / sui-switch-card (la card ES la opción que se elige), sui-product-card (un producto de la carta), sui-store-card (un local en un listado del cliente), sui-modal-sheet (contenido encima de la pantalla)]
+---
+
+# sui-card
+
+<!-- generado por scripts/gen-docs.mjs — no editar a mano; `npm run docs` -->
+
+> **De dónde sale este doc.** El criterio es el del SUI Angular (`sui-card`); la API es la de este
+> paquete, leída del código. Los ejemplos se pasaron de Angular de forma mecánica: lo literal va como
+> atributo (`only-icon`, `size="large"`), lo dinámico entre llaves (`size={expr}` → `el.size = expr`)
+> y los eventos como `onValueChange={…}` → `el.addEventListener('valueChange', …)`. `@if`, `@for` y
+> `<ng-template>` quedan como en Angular: se leen como pseudocódigo.
+
+Story: [Molecules/Card/Card](https://sui-design-system.web.app/?path=/docs/molecules-card-card--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** como la superficie de una sección o de un ítem: un bloque de KPIs, un gráfico con su
+título, una fila de lista que se toca, un formulario corto dentro de una página.
+
+**No lo uses** para:
+
+- Una fila «foto o ícono + nombre + detalle»: eso es `sui-content-card` (o `sui-content-label`
+  dentro de una card que ya existe).
+- Una opción que se elige: `sui-radio-card`, `sui-checkbox-card` o `sui-switch-card` ya traen la
+  card, el estado elegido y el área táctil.
+- Un producto de la carta o un local del listado del cliente: `sui-product-card` y
+  `sui-store-card`.
+- Contenido que aparece encima de la pantalla: `sui-modal` / `sui-modal-sheet`.
+
+Regla corta: **agrupa contenido → card · es una fila con cara → content-card · se elige → card de
+selección.**
+
+## Qué variante usar
+
+> **La guía del DS no tiene página de la card.** Nada de lo que sigue sale de una guía: lo
+> marcado «propuesta» sale de cómo la usa la app y falta el ok del dueño; lo «canon» ya está
+> aprobado.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (sin `master-preview`,
+> `master-prototipos`, `mockup-*`, `dx/*`, `_guia-*`, `master-rutina`, `master-medico`,
+> `master-ejercicios`): **253 cards en 79 archivos** (254 en 80 si solo se excluyen `master-preview`,
+> `master-prototipos`, `mockup-sheets-`, `dx/`, `master-rutina`, `master-medico` y `dev-index`). Variantes: 227 `default` explícito, 24 sin
+> `variant` (también default), 2 `elevated`, 0 `flat`. Tamaños: 95 `small`, 123 `medium`
+> explícito + 21 sin `size`, 14 `large`, 0 `xlarge`. 9 con `interactive`. Slots: 23
+> `sui-card-header`, 11 `sui-card-footer`, 4 `sui-card-media`. Al 04-10-2026 son 12 con `interactive`.
+
+### `variant`
+
+| variant | cuándo | fuente |
+|---|---|---|
+| `default` | Lo normal: la card sobre el fondo de la app (borde + sombra x-small). 251 de 253. | canon (aprobado por el dueño, 05-10-2026, bloque B2) (práctica de la app) |
+| `elevated` | La card flota sobre un mapa, una foto o un fondo de color, donde el borde se pierde y hace falta la sombra media. Precedente: el seguimiento público del pedido (`pages/public/pedido-en-vivo/pedido-en-vivo.html:19`, `:69`). | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `flat` | Ver «No usar». | propuesta |
+
+### `size` (padding × gap entre slots)
+
+| size | medidas | cuándo | fuente |
+|---|---|---|---|
+| `small` | 16 / 12 | Filas de una lista de cards, KPIs chicos, cards tocables. **Toda card en mobile.** | propuesta |
+| `medium` (default) | 20 / 16 | Secciones en web. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `large` | 24 / 20 | La sección principal de una pantalla de web (los 14 de hoy son gráficos de reportes y los pasos del onboarding). | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `xlarge` | 28 / 24 | Ver «No usar». Extensión SUI (no está en Figma). | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+
+### `interactive`
+
+| valor | cuándo | fuente |
+|---|---|---|
+| `true` | La card entera es **una** acción: abre un detalle o lleva a otra pantalla («Mis direcciones», una factura). Da cursor, hover, foco y el arreglo de iOS. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `false` (default) | La card tiene 2 acciones o más adentro, o ninguna. Las acciones van como botones dentro. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+
+### Slots
+
+| slot | cuándo | fuente |
+|---|---|---|
+| `[sui-card-header]` | Título de la card a la izquierda y, si hace falta, una acción chica a la derecha (`sui-link-button` «Ver todo»). | propuesta |
+| cuerpo (sin atributo) | El contenido. **Con 2 bloques o más, envuélvelos en un div propio con `display:flex; flex-direction:column; gap`** (ver Trampas). | canon (memoria del proyecto, 10-05-2026) |
+| `[sui-card-media]` | Gráfico, mapa o foto de borde a borde, al final. Si después va un footer, la media deja de comerse el borde inferior. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `[sui-card-footer]` | La acción de la card o un resumen. Si son dos botones, siguen el orden de `sui-modal-footer` (secundario a la izquierda, primario a la derecha). | canon (orden de botones, CLAUDE.md) |
+
+**Usos de hoy que rompen las reglas** (revisado el 06-10-2026):
+
+- **`gap` puesto en la clase del `sui-card` para separar lo del cuerpo.** Los 18 que se contaron el
+  03-10-2026 (central-inicio, master-semanas, central-ingresos, invoices, driver-history,
+  driver-wallet) ya van con un wrapper `…-body` propio (commit `103f76fa` de la app). Ese conteo
+  dejó fuera 6 cards en 3 archivos, que siguen igual: su `gap` no separa nada porque todo va en el
+  cuerpo.
+  - `pages/super-admin/master-users/master-users.html:158` · `.mu__card { gap: 6px !important }`
+    (`master-users.scss:57`). Es el «mal» de «Separar las filas del cuerpo», abajo.
+  - `pages/super-admin/master-overview/master-overview.html:444`, `:450`, `:456`, `:462` ·
+    `.mo__quick-link { gap: 8px }` (`master-overview.scss:273`).
+  - `pages/central/central-gastos/central-gastos.html:35` · `.cg__kpi { gap: 4px }`
+    (`central-gastos.scss:37`).
+
+  No cuentan los `gap: 0 !important` (master-settings, master-users `.mu__table-wrap`,
+  master-earnings, master-approvals, master-overview `.mo__recent-list`): apagan el gap entre slots
+  a propósito, no intentan separar hijos.
+- **Cards con `interactive` y además `(keydown.enter)`**: quedan 0. Las 3 que había
+  (master-users, master-settings y driver-dashboard) se corrigieron con el commit `00c3f17c` de la
+  app; hoy ningún `sui-card` lleva `(keydown.enter)`. El `(keydown.enter)` que sigue en
+  `master-users.html:117` es de una fila `<tr>` de la tabla, no de una card.
+
+## Tamaño en mobile y en web
+
+El `size` de la card es su padding, no un área táctil: no tiene que llegar a 44. Lo que importa en
+mobile es no perder ancho.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| sección, KPI, gráfico | `small` (16) | `medium` (20) | propuesta, falta aprobación |
+| sección principal de un reporte | `small` | `large` (24) | propuesta, falta aprobación |
+| fila de lista tocable | `small` | `small` | propuesta, falta aprobación |
+
+```html
+<sui-card size={bp.isMobile() ? 'small' : 'medium'}> … </sui-card>
+```
+
+`bp` es el `BreakpointsService` de la app. Va al ritmo de los gaps de página (12 / 16 / 20 por
+breakpoint). Si la card es tocable, el alto de la fila (≥ 44) lo da su contenido, no el `size`.
+
+### Por dispositivo (D16)
+
+D16 no mueve la card: su `size` es padding y gap, no algo que se toca ni que se lee más grande, y
+no está en la tabla por componente de D16. Lo que va adentro sigue su propio README (los botones,
+`bp.sizeControl()`). El `small` en mobile de la tabla de arriba sigue **pendiente (P12)**: falta
+decidir si va solo en pantallas nuevas, si se migran las de hoy o si queda `medium` en las dos.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `variant="flat"` (0 usos) | la app siempre pone la card sobre el fondo gris, donde la sombra ayuda | una card dentro de otra superficie blanca (un sheet, otra card), donde la sombra dobla el borde |
+| `size="xlarge"` (0 usos) | ninguna pantalla lo pide; no está en Figma | un hero de desktop (la portada de un reporte impreso) |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `interactive` | `interactive` | `boolean` | `false` |
+| `size` | `size` | `"large" \| "medium" \| "small" \| "xlarge"` | `'medium'` |
+| `variant` | `variant` | `"default" \| "elevated" \| "flat"` | `'default'` |
+
+Eventos: ninguno.
+
+Slots: `header`, `(por defecto)`, `media`, `footer`.
+
+### Diferencias con el SUI Angular
+
+Ninguna en nombres de props, eventos y valores.
+<!-- api:fin -->
+
+Slots: `[sui-card-header]`, cuerpo (`<slot>`), `[sui-card-media]`, `[sui-card-footer]`.
+
+## Trampas
+
+- **El `gap` del host separa slots, no hijos.** El cuerpo va dentro de `.sui-card__body` (flex en
+  columna, sin gap). Poner `gap` en una clase del `sui-card` no separa nada de lo que proyectas: se
+  necesita un wrapper propio (`<div class="x__card-body">` con flex y gap).
+- Sin header ni footer el host queda con `gap: 0` (`:has(> .sui-card__body:only-child)`).
+- **`interactive` no trae output, pero sí teclado** (desde 03-10-2026): pone `role="button"`,
+  `tabindex="0"`, hover y foco, y **Enter / Espacio hacen click en la card**, así que tu `click`
+  (o el `routerLink` de un `<a>` que la envuelve) también responde al teclado. No agregues
+  `(keydown.enter)` además: se dispararía dos veces. Una tecla dentro de un campo o botón
+  proyectado es de ese control, no de la card.
+- Los slots son **atributos** (`sui-card-header`), no `slot="…"`.
+- El host tiene `overflow: hidden` y radio 16: lo que sobresalga (un badge colgado de la esquina)
+  se corta.
+- `sui-card-media` rompe el padding con margen negativo leído de `--sui-card-padding-x`; si le
+  cambias el padding a la card desde afuera, la media queda corrida.
+- En modo oscuro `elevated` usa `--sui-card-elevated-border` para el borde (la sombra no se ve).
+
+## Bien y mal
+
+**Separar las filas del cuerpo**
+
+```html
+<!-- ❌ mal: el gap en la clase del card separa slots, no lo que proyectas (master-users.html:158, .mu__card { gap: 6px } en master-users.scss:57) -->
+<sui-card size="small" class="mu__card">
+  <span class="mu__card-name">{u.name}</span>
+  <span class="mu__card-email">{u.email}</span>
+</sui-card>
+```
+
+```html
+<!-- ✅ bien: wrapper propio con display:flex; flex-direction:column; gap:6px -->
+<sui-card size="small">
+  <div class="mu__card-body">
+    <span class="mu__card-name">{u.name}</span>
+    <span class="mu__card-email">{u.email}</span>
+  </div>
+</sui-card>
+```
+
+**Card tocable con botones adentro**
+
+```html
+<!-- ❌ mal: interactive es para UNA acción; esta abre la ficha y además tiene dos botones
+     (pages/super-admin/master-users/master-users.html:158, resumido) -->
+<sui-card size="small" interactive onClick={() => abrirFicha(u)}>
+  …nombre, correo, aparatos, fecha…
+  <div class="mu__card-actions" onClick={(e) => e.stopPropagation()}>
+    <sui-button variant="stroke" color="neutral" size={bp.sizeControl()} onClick={() => openBanModal(u)}>{u.baneado ? 'Desbloquear cuenta' : 'Bloquear cuenta'}</sui-button>
+    <sui-button variant="stroke" color="error" size={bp.sizeControl()} onClick={() => openDeleteUserModal(u)}>Eliminar usuario</sui-button>
+  </div>
+</sui-card>
+```
+
+Son **tres** acciones: abrir la ficha, bloquear y eliminar. Sin `interactive`, abrir la ficha
+pasa a ser una acción explícita, y no entra como tercer botón: el canon de `sui-modal-footer`
+admite dos botones como máximo, y la tercera acción va como `sui-link-button` a la izquierda.
+Ninguna se pierde.
+
+```html
+<!-- ✅ bien: sin interactive; «Ver ficha» es el link de la izquierda y los dos botones quedan a la derecha
+     (.mu__card-actions: display:flex; align-items:center; gap:12px · .mu__card-ver: margin-right:auto) -->
+<sui-card size="small">   <!-- nombre y correo en el cuerpo, con su wrapper como arriba -->
+  <div sui-card-footer class="mu__card-actions">
+    <sui-link-button class="mu__card-ver" variant="primary" size={bp.isMobile() ? 'large' : 'medium'} onClick={() => abrirFicha(u)}>Ver ficha</sui-link-button>
+    <sui-button variant="stroke" color="neutral" size={bp.sizeControl()} onClick={() => openBanModal(u)}>{u.baneado ? 'Desbloquear cuenta' : 'Bloquear cuenta'}</sui-button>
+    <sui-button variant="stroke" color="error" size={bp.sizeControl()} onClick={() => openDeleteUserModal(u)}>Eliminar usuario</sui-button>
+  </div>
+</sui-card>
+```
+
+El tamaño del link sigue su README (`large` en el teléfono está pendiente de P8); los botones van
+con `bp.sizeControl()` (D16). Los dos son `stroke` como en la app: en una lista de cards un
+`filled` rojo por fila pesa más que el dato.
+
+**Enter además de `interactive`**
+
+```html
+<!-- ❌ mal: la card ya hace click con Enter; el handler corre dos veces (pasaba en master-users.html, master-settings.html y driver-dashboard.html; corregido en el commit 00c3f17c de la app) -->
+<sui-card size="small" interactive onClick={() => abrirDirecciones()} (keydown.enter)="abrirDirecciones()">…</sui-card>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-card size="small" interactive onClick={() => abrirDirecciones()}>…</sui-card>
+```
+
+## Ejemplo
+
+```html
+<!-- Sección con título, dos bloques y una acción -->
+<sui-card size={bp.isMobile() ? 'small' : 'medium'}>
+  <div sui-card-header class="ganancias__head">
+    <h3>Tus días del mes</h3>
+    <sui-link-button variant="primary" size="small" onClick={() => verTodo()}>Ver todo</sui-link-button>
+  </div>
+  <div class="ganancias__card-body">   <!-- display:flex; flex-direction:column; gap:12px -->
+    <span>Martes 3 · 6 entregas · S/ 42.00</span>
+    <span>Miércoles 4 · 4 entregas · S/ 28.50</span>
+  </div>
+</sui-card>
+
+<!-- Fila tocable -->
+<sui-card size="small" interactive onClick={() => abrirDirecciones()}>
+  …
+</sui-card>
+```

package/docs/sui-chart-legend/README.md

@@ -0,0 +1,206 @@
+---
+name: sui-chart-legend
+selector: sui-chart-legend
+resumen: Leyenda de un gráfico — punto de color, nombre de la serie y su valor — dibujada fuera del gráfico
+alternativas: [sui-chart-legend-dot (el punto suelto, en una fila o tabla), la leyenda propia de ECharts (cuando hay que poder apagar series tocándolas), sui-badge (una etiqueta, no una serie)]
+---
+
+# sui-chart-legend
+
+<!-- generado por scripts/gen-docs.mjs — no editar a mano; `npm run docs` -->
+
+> **De dónde sale este doc.** El criterio es el del SUI Angular (`sui-chart-legend`); la API es la de este
+> paquete, leída del código. Los ejemplos se pasaron de Angular de forma mecánica: lo literal va como
+> atributo (`only-icon`, `size="large"`), lo dinámico entre llaves (`size={expr}` → `el.size = expr`)
+> y los eventos como `onValueChange={…}` → `el.addEventListener('valueChange', …)`. `@if`, `@for` y
+> `<ng-template>` quedan como en Angular: se leen como pseudocódigo.
+
+Story: [Molecules/Chart/Chart Legend](https://sui-design-system.web.app/?path=/docs/molecules-chart-chart-legend--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** debajo o al lado de un gráfico para decir **qué es cada color**, y cuánto suma cada
+serie si el número importa («Yape 42 · Efectivo 31 · Plin 9»). Es texto de la página, así que se lee
+igual en el celular, sin tocar nada.
+
+**No lo uses** para:
+
+- Una leyenda que tiene que **apagar series** al tocarlas: eso lo hace la leyenda de ECharts
+  (`legend: {…}`), que es interactiva. Esta no tiene clic.
+- Un estado o una categoría que no viene de un gráfico: `sui-badge` o `sui-status-badge`.
+- Esconder los números en un tooltip: en el celular no hay hover (así lo hizo bien
+  `pages/super-admin/master-drivers/master-drivers.html:228`).
+
+## Qué variante usar
+
+> La guía del DS no tiene página para este componente: sale del Figma del DS (set «Chart Legends»).
+> Las reglas de abajo son **canon** (cada fila dice de qué aprobación sale), salvo lo marcado «según el componente».
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (sin prototipos ni vitrinas): **1 uso**, más
+> **5 leyendas hechas a mano** y **9 gráficos con la leyenda de ECharts**.
+
+### `items` — cada serie
+
+| campo | valor | cuándo | fuente |
+|---|---|---|---|
+| `label` | nombre corto | El nombre de la serie, tal como se dice en la app: «Entregados», «Yape». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `color` | sin pasar | **Lo normal** en categorías sin bien ni mal (canales, métodos de pago, distritos): el componente reparte azul, naranja, rojo, verde… en orden. | según el componente (orden) · cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `color` | el del estado | Cuando la serie **es un estado**: entregados `green`, cancelados `red`, pendientes `orange`. Mismo significado que en `sui-badge`. | canon (colores con significado del badge) |
+| `customColor` | el color que ya usa el gráfico | Solo cuando el gráfico tiene su propia paleta y el punto tiene que coincidir. Va el mismo valor en los dos lados. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `value` | número o texto | Cuando el número importa para leer el gráfico: «42», «S/ 1,200.00», «38 %». | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `disabled` | `true` | Una serie sin datos en el período: se ve, apagada, para que no parezca que falta. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+
+Los 12 valores de `color`, uno por uno y con su regla, están en el README de `sui-chart-legend-dot`.
+
+Para que el gráfico y la leyenda pinten **el mismo color**, ECharts recibe la paleta desde
+`SUI_CHART_LEGEND_HEX` (exportado por el paquete): `color: [SUI_CHART_LEGEND_HEX.blue, …]`.
+
+### `orientation`
+
+| orientation | cuándo | fuente |
+|---|---|---|
+| `horizontal` (default) | Debajo de un gráfico de barras o de líneas. Si no entra, baja a la línea siguiente. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `vertical` | Al lado de una dona o un pie, con el `value` de cada serie. En mobile, debajo de la dona. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+
+### Usos de hoy que romperían la regla
+
+- **5 leyendas hechas a mano** (punto con `[style.background]` + nombre + valor) → `sui-chart-legend`
+  con `customColor` o la paleta del DS: `components/marketing-channels/marketing-channels.html:10`,
+  `components/customer-segments/customer-segments.html:26`,
+  `pages/overview/components/overview-retention/overview-retention.html:12`,
+  `pages/reports/reports.html:60` y `:81`.
+- **A discutir — 9 gráficos con la leyenda de ECharts**: `pages/super-admin/master-semanas/master-semanas.ts:187`
+  (y `:248`, `:288`, `:335`), `pages/super-admin/master-overview/master-overview.ts:266` y `:403`,
+  `pages/reports/reports.ts:339` y `:382`, `core/utils/chart-barras-repartidores.ts:166`. Si nadie
+  apaga series tocándolas, pasarían a `sui-chart-legend` (fuente, tamaño y color del DS en vez de
+  `#525252` y 12 px puestos a mano). `pages/reports/` tiene además la leyenda a mano: hay dos
+  leyendas para el mismo gráfico.
+
+## Tamaño en mobile y en web
+
+**No tiene `size`**: punto de 16 px y texto de 12 en las dos. No se toca, así que no tiene mínimo
+para el dedo; lo que cambia por plataforma es la orientación.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| bajo barras o líneas | `horizontal` (envuelve) | `horizontal` | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| junto a una dona | `vertical`, **debajo** de la dona | `vertical`, a la derecha | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+
+```html
+<!-- Junto a una dona: vertical en las dos; el layout la pone debajo en mobile y a la derecha en web -->
+<sui-chart-legend orientation="vertical" items={metodos()} />
+```
+
+El texto de 12 px queda chico en mobile y el componente no tiene un tamaño mayor: no se cambia aquí.
+
+### Por dispositivo (D16)
+
+No aplica: **no tiene `size`** (punto de 16 y texto de 12 en todos los dispositivos, del celular
+chico al ultrawide). Es lo que no se toca, pero no hay un tamaño más grande al que subir en el
+celular; lo único que cambia por dispositivo es dónde se pone (`orientation` y el layout, tabla de
+arriba).
+
+En master-pedidos: no hay helper ni `size`; solo `orientation` según el gráfico.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `disabled` | ningún gráfico muestra series vacías | una serie sin datos en el período elegido |
+| `customColor` con un hex propio | la paleta del DS ya cubre las series | un gráfico con colores de marca de terceros (Yape morado, Plin celeste) |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `items` | — (solo por propiedad JS) | `readonly SuiChartLegendItem[]` | `[]` |
+| `orientation` | `orientation` | `"horizontal" \| "vertical"` | `'horizontal'` |
+
+Eventos: ninguno.
+
+### Diferencias con el SUI Angular
+
+Ninguna en nombres de props, eventos y valores.
+<!-- api:fin -->
+
+```ts
+interface SuiChartLegendItem {
+  label: string;
+  color?: SuiChartLegendColor;  // 'gray' | 'light-gray' | 'blue' | 'orange' | 'red' | 'green' | 'yellow' | 'purple' | 'sky' | 'pink' | 'teal' | 'disabled'
+  customColor?: string;         // cualquier color CSS; gana sobre `color`
+  value?: string | number;
+  disabled?: boolean;           // gana sobre los dos colores
+}
+```
+
+## Trampas
+
+- **Sin `color`, los colores salen en orden fijo** (azul, naranja, rojo, verde, amarillo…), no los
+  del gráfico: si ECharts usa otra paleta, el punto y la barra no coinciden. Usa
+  `SUI_CHART_LEGEND_HEX` en el gráfico o pasa el color.
+- El orden automático empieza en **azul**, no en el naranja de la marca.
+- `value` sale a 4 px del nombre, en negro (el nombre va en gris): el formato («S/ 1,200.00», «38 %») lo arma quien la usa.
+- Host con `role="list"` y cada item `role="listitem"`; el punto es decorativo.
+- `items` es obligatorio.
+
+## Bien y mal
+
+Leyenda bajo una dona
+
+```html
+<!-- ❌ mal: leyenda hecha a mano con el punto en [style.background] (components/marketing-channels/marketing-channels.html:13) -->
+<div class="payment-methods__legend-item">
+  <span class="payment-methods__legend-dot" style={{ 'background': item.color }}></span>
+  <span class="payment-methods__legend-label">{item.name}</span>
+</div>
+```
+
+```html
+<!-- ✅ bien: leyendaPagos() = { label: item.name, customColor: item.color, value: item.value } -->
+<sui-chart-legend orientation="vertical" items={leyendaPagos()} />
+```
+
+Color de cada método de pago
+
+```html
+<!-- ❌ mal: hex suelto en un ternario, distinto de la paleta del gráfico (pages/reports/reports.html:86) -->
+<span class="reports__legend-dot"
+  style={{ 'background-color': pm.method === 'yape' ? '#7e22ce' : '#6366f1' }}></span>
+```
+
+```html
+<!-- ✅ bien: el mismo customColor que recibe ECharts en series[].color -->
+<sui-chart-legend orientation="vertical" items={[
+  { label: 'Yape', customColor: colorYape, value: 42 },
+]} />
+```
+
+Series sin color con un gráfico de paleta propia
+
+```html
+<!-- ❌ mal: sin color salen azul, naranja… y el gráfico pinta otros -->
+<sui-chart-legend items={[{ label: 'Entregados' }, { label: 'Cancelados' }]} />
+```
+
+```html
+<!-- ✅ bien: la serie es un estado, va su color -->
+<sui-chart-legend items={[{ label: 'Entregados', color: 'green' }, { label: 'Cancelados', color: 'red' }]} />
+```
+
+## Ejemplo
+
+```html
+<sui-chart-legend orientation="vertical" items={[
+  { label: 'Yape', value: 42 },
+  { label: 'Efectivo', value: 31 },
+  { label: 'Plin', value: 9 },
+]} />
+
+<sui-chart-legend items={[
+  { label: 'Entregados', color: 'green', value: '86 %' },
+  { label: 'Cancelados', color: 'red', value: '14 %' },
+]} />
+```