@ajuarezso/sui-design-system 0.24.1 → 0.25.1

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

@@ -47,57 +47,60 @@ atención de un local (L M M J V S D), filtros que se suman en una barra.
 | multi | cuándo | ejemplo de copy | fuente |
 |---|---|---|---|
 | `true` | Elegir días u opciones que se combinan. | L M M J V S D (días de atención) | canon (aprobado por el dueño, 03-10-2026) |
-| `false` (default) | No: elegir una sola o cambiar de vista va con `sui-segmented-control`. | — | cambiar de vista: canon (aprobado por el dueño, 03-10-2026) · elegir una sola en general: propuesta |
+| `false` (default) | No: elegir una sola o cambiar de vista va con `sui-segmented-control`. | — | cambiar de vista: canon (aprobado por el dueño, 03-10-2026) · elegir una sola: canon (decisión del dueño 04-10-2026: 2–4 opciones excluyentes → `sui-segmented-control`; más opciones → `sui-tab-chips`) |
 
 ### `size`
 
 | size | alto | cuándo | fuente |
 |---|---|---|---|
 | `large` | 48 | Mobile: los días del horario y las opciones de un formulario, para tocar con el dedo. Label/Medium (16/24), ícono 20, radius 12. | canon (aprobado por el dueño, 03-10-2026) · extensión SUI |
-| `medium` | 40 | Mobile cuando la fila es larga (los 7 días) y `large` no entra en 360 px. Label/Small (14/20), ícono 20, radius 10. | alto y tipografía: canon (aprobado por el dueño, 03-10-2026), extensión SUI · cuándo: propuesta |
-| `small` (default) | 36 | Web: los días del horario, formularios. | escala según la guía del DS · cuándo: propuesta |
-| `xsmall` | 32 | Barras de filtros en desktop. | escala según la guía del DS · cuándo: propuesta |
-| `2xsmall` | 24 | Solo desktop, dentro de una tabla o una card densa. Muy chico para el dedo. | escala según la guía del DS · cuándo: propuesta |
+| `medium` | 40 | Web: lo normal (días del horario, formularios, filtros, tablas). Mobile: cuando la fila es larga (los 7 días) y `large` no entra en 360 px. Label/Small (14/20), ícono 20, radius 10. | alto y tipografía: canon (aprobado por el dueño, 03-10-2026), extensión SUI · web: canon (dueño, 05-10-2026, D16) · mobile con la fila larga: propuesta |
+| `small` (default) | 36 | No usar: es chico. En web va `medium`. | escala según la guía del DS · no usarlo: canon (dueño, 05-10-2026, D16), reemplaza el «cuándo» del bloque B1 |
+| `xsmall` | 32 | No usar: es chico. Las barras de filtros van en `medium`. | escala según la guía del DS · no usarlo: canon (dueño, 05-10-2026, D16) |
+| `2xsmall` | 24 | No usar: es chico. En una tabla o una card densa va `medium`. | escala según la guía del DS · no usarlo: canon (dueño, 05-10-2026, D16), reemplaza el «cuándo» del bloque B1 |
 
 ### `items` (lo que lleva cada opción)
 
 | contenido | cuándo | fuente |
 |---|---|---|
-| solo `label` | Lo normal: textos de una a tres letras o una palabra («L», «Delivery»). | propuesta |
-| `leftIcon` + `label` | Cuando el ícono ayuda a distinguir opciones parecidas (moto / bici / auto). | propuesta |
-| solo ícono (`leftIcon`, sin `label`) | Desktop, opciones universales; **`ariaLabel` obligatorio** en cada una. | propuesta |
-| `disabled: true` en una opción | La opción existe pero hoy no se puede elegir (un día que el local no atiende por regla). | propuesta |
+| solo `label` | Lo normal: textos de una a tres letras o una palabra («L», «Delivery»). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `leftIcon` + `label` | Cuando el ícono ayuda a distinguir opciones parecidas (moto / bici / auto). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| solo ícono (`leftIcon`, sin `label`) | Desktop, opciones universales; **`ariaLabel` obligatorio** en cada una. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `disabled: true` en una opción | La opción existe pero hoy no se puede elegir (un día que el local no atiende por regla). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | cuántas | De 2 a 7. Con más, no entra en el ancho del teléfono: lista de `sui-checkbox`. | propuesta (el Figma dibuja de 2 a 6; los días son 7) |
 
 ### `value`, `ariaLabel`, `change`
 
 | prop | cuándo | fuente |
 |---|---|---|
-| `[(value)]` | Con `multi`, un `string[]` con los `value` prendidos. | propuesta |
-| `ariaLabel` | Siempre: dice qué se elige («Días de atención»). El host es `role="group"`. | propuesta |
-| `(change)` | Cuando hay que reaccionar al cambio (guardar, filtrar); si alcanza con el `model`, no hace falta. | propuesta |
+| `[(value)]` | Con `multi`, un `string[]` con los `value` prendidos. | según el código |
+| `ariaLabel` | Siempre: dice qué se elige («Días de atención»). El host es `role="group"`. | según el código |
+| `(change)` | Cuando hay que reaccionar al cambio (guardar, filtrar); si alcanza con el `model`, no hace falta. | según el código |
 
 ## 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 web, con mouse,
-va un tamaño más chico. La app ya lo resuelve con `BreakpointsService`
-(`src/app/services/breakpoints.service.ts`, mobile = hasta 767 px):
-`[size]="bp.isMobile() ? 'large' : 'small'"`. Medido el 04-10-2026 en `master-pedidos`: 166 `[size]`
-con `bp` (142 `large`/`medium`, 22 `large`/`small`, 2 `medium`/`xsmall`). Regla del dueño, 03-10-2026.
+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.
 
 Desde el 03-10-2026 el grupo tiene `large` (48) y `medium` (40), la misma escala de `sui-button`,
 así que el par es el de toda la app.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| días del horario, opciones en un formulario | `large` (48) | `small` (36) | canon (aprobado por el dueño, 03-10-2026) |
-| fila larga que no entra a 48 en 360 px (los 7 días con texto) | `medium` (40) | `small` (36) | propuesta, falta aprobación |
-| barra de filtros | `large` | `xsmall` (32) | propuesta, falta aprobación |
-| dentro de una tabla o una card densa | no va en mobile | `2xsmall` (24) | propuesta |
+| días del horario, opciones en un formulario | `large` (48) | `medium` (40) | mobile: canon (aprobado por el dueño, 03-10-2026) · web: canon (dueño, 05-10-2026, D16), antes `small` |
+| fila larga que no entra a 48 en 360 px (los 7 días con texto) | `medium` (40) | `medium` (40) | mobile: propuesta, falta aprobación (espera P18) · web: canon (dueño, 05-10-2026, D16) |
+| barra de filtros | `large` | `medium` (40) | web: canon (dueño, 05-10-2026, D16) · mobile: propuesta, falta aprobación |
+| dentro de una tabla o una card densa | 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 `2xsmall` |
 
 ```html
 <sui-button-group [items]="dias" [multi]="true" [(value)]="diasAbiertos" ariaLabel="Días de atención"
-                  [size]="bp.isMobile() ? 'large' : 'small'" />
+                  [size]="bp.tactil() ? 'large' : 'medium'" />
 ```
 
 En mobile, cada opción va ancha (los 7 días repartidos en todo el ancho, no apretados a la
@@ -105,6 +108,24 @@ izquierda) — propuesta, falta aprobación. **El componente no lo hace solo**:
 `inline-flex` y no hay un input de ancho completo, así que hoy lo tendría que resolver quien lo usa
 con CSS. Si las opciones no entran ni en `medium`, va una lista de `sui-checkbox`.
 
+### Por dispositivo (D16)
+
+Fila `button-group` (+ `-item`) de la tabla D16 (dueño, 05-10-2026). Se toca, así que va por tipo de
+puntero además del ancho.
+
+| 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 en tablas y cards densas |
+
+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'"` (no hay helper propio; da el mismo
+par que `bp.sizeControl()`). `bp.isMobile()` solo no sirve: deja la tablet en `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
@@ -162,11 +183,58 @@ interface SuiButtonGroupEntry {
   acompáñalo con un texto que diga cuántas hay elegidas.
 - Ya trae el arreglo de iOS para el `:active` pegado: no lo agregues.
 
+## Bien y mal
+
+Hoy no hay usos en la app: los pares salen de «Cuándo no» y de «Trampas».
+
+**Cambiar de vista**
+
+```html
+<!-- ❌ mal: elegir una sola vista no es un button-group; con multi en false ni se puede apagar la prendida -->
+<sui-button-group [items]="vistas" [(value)]="vista" ariaLabel="Vista" size="medium" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-segmented-control [tabs]="vistas" [(active)]="vista" ariaLabel="Vista"
+                       [size]="bp.tactil() ? '2xlarge' : 'medium'" />
+```
+
+**Opciones proyectadas en vez de `items`**
+
+```html
+<!-- ❌ mal: el grupo no tiene ng-content (los ítems no se pintan) e items es obligatorio -->
+<sui-button-group ariaLabel="Días de atención">
+  <sui-button-group-item label="L" />
+  <sui-button-group-item label="M" />
+</sui-button-group>
+```
+
+```html
+<!-- ✅ bien: las opciones van en items, con ariaLabel en los dos «M» -->
+<sui-button-group [items]="dias" [multi]="true" [(value)]="diasAbiertos" ariaLabel="Días de atención"
+                  [size]="bp.tactil() ? 'large' : 'medium'" />
+```
+
+**Sin `size`**
+
+```html
+<!-- ❌ mal: sin size queda en small (36): chico en la computadora y sin los 44 del dedo en el teléfono -->
+<sui-button-group [items]="dias" [multi]="true" [(value)]="diasAbiertos" ariaLabel="Días de atención" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-button-group [items]="dias" [multi]="true" [(value)]="diasAbiertos" ariaLabel="Días de atención"
+                  [size]="bp.tactil() ? 'large' : 'medium'" />
+```
+
 ## Ejemplo
 
 ```html
 <!-- Días de atención del local -->
-<sui-button-group [items]="dias" [multi]="true" [(value)]="diasAbiertos" ariaLabel="Días de atención" />
+<sui-button-group [items]="dias" [multi]="true" [(value)]="diasAbiertos" ariaLabel="Días de atención"
+                  [size]="bp.tactil() ? 'large' : 'medium'" />
 ```
 
 ```ts

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

@@ -27,26 +27,47 @@ apagar algo suelto está `sui-switch`; para una acción, `sui-button`.
 | 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`. | propuesta |
-| `disabled` | `true` | La opción existe pero hoy no se puede elegir; viene de `disabled` en la entrada de `items`. | propuesta |
-| `label` | texto | Una a tres letras o una palabra. | propuesta |
-| `leftIcon` / `rightIcon` | RemixIcon | Ícono a la izquierda si ayuda a distinguir; a la derecha, sin caso. Sin `label` queda cuadrado. | propuesta |
-| `ariaLabel` | texto | Obligatorio si no hay `label`, o si dos opciones tienen el mismo texto. | propuesta |
+| `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 web, con mouse,
-va un tamaño más chico. La app ya lo resuelve con `BreakpointsService`
-(`src/app/services/breakpoints.service.ts`, mobile = hasta 767 px):
-`[size]="bp.isMobile() ? 'large' : 'small'"`. Medido el 04-10-2026 en `master-pedidos`: 166 `[size]`
-con `bp` (142 `large`/`medium`, 22 `large`/`small`, 2 `medium`/`xsmall`). Regla del dueño, 03-10-2026.
+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 | `small` (36) | canon (aprobado por el dueño, 03-10-2026) |
-| suelto (barra de herramientas) | no va en mobile | `xsmall` o `2xsmall` | propuesta |
+| 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í
 
@@ -90,13 +111,59 @@ en la columna de la derecha, se usa (aprobado por el dueño, 03-10-2026).
 - 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()" (clicked)="lunes.set(!lunes())" />
+  <sui-button-group-item label="M" size="medium" [active]="martes()" (clicked)="martes.set(!martes())" />
+</div>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-button-group [items]="dias" [multi]="true" [(value)]="diasAbiertos" ariaLabel="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 leftIcon="bold" size="2xsmall" [active]="negrita()" (clicked)="negrita.set(!negrita())" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-button-group-item leftIcon="bold" ariaLabel="Negrita" size="medium"
+                       [active]="negrita()" (clicked)="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" (clicked)="guardarFormato()" />
+```
+
+```html
+<!-- ✅ bien: quien lo usa cambia active -->
+<sui-button-group-item label="Negrita" size="medium" [active]="negrita()" (clicked)="negrita.set(!negrita())" />
+```
+
 ## Ejemplo
 
 ```html
 <!-- Lo normal: no se escribe a mano, lo arma el grupo -->
-<sui-button-group [items]="dias" [multi]="true" [(value)]="diasAbiertos" ariaLabel="Días de atención" />
+<sui-button-group [items]="dias" [multi]="true" [(value)]="diasAbiertos" ariaLabel="Días de atención"
+                  [size]="bp.tactil() ? 'large' : 'medium'" />
 
 <!-- Suelto, solo en el caso de «cuándo sí» -->
-<sui-button-group-item leftIcon="bold" ariaLabel="Negrita" size="xsmall"
+<sui-button-group-item leftIcon="bold" ariaLabel="Negrita" size="medium"
                        [active]="negrita()" (clicked)="negrita.set(!negrita())" />
 ```

package/docs/sui-card/README.md

@@ -45,8 +45,8 @@ selección.**
 
 | variant | cuándo | fuente |
 |---|---|---|
-| `default` | Lo normal: la card sobre el fondo de la app (borde + sombra x-small). 251 de 253. | propuesta (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`). | propuesta |
+| `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)
@@ -54,16 +54,16 @@ selección.**
 | 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. | propuesta |
-| `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). | propuesta |
-| `xlarge` | 28 / 24 | Ver «No usar». Extensión SUI (no está en Figma). | 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. | propuesta |
-| `false` (default) | La card tiene 2 acciones o más adentro, o ninguna. Las acciones van como botones dentro. | propuesta |
+| `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
 
@@ -71,19 +71,30 @@ selección.**
 |---|---|---|
 | `[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. | propuesta |
+| `[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 04-10-2026):
-
-- **Los 18 `gap` puestos en la clase del `sui-card`** (central-inicio, master-semanas,
-  central-ingresos, invoices, driver-history, driver-wallet) ya van con un wrapper `…-body` propio
-  desde el 03-10-2026 (commit `103f76fa` de la app). Quedan 0.
-- **3 cards tocables con `[interactive]` y además `(keydown.enter)`**: la card ya dispara el click
-  con Enter, así que el handler corre **dos veces** (ver Trampas).
-  `pages/super-admin/master-users/master-users.html:156`,
-  `pages/super-admin/master-settings/master-settings.html:611` (con `routerLink`) y
-  `pages/driver/driver-dashboard/driver-dashboard.html:990`. Se borra el `(keydown.enter)`.
+**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
 
@@ -103,6 +114,13 @@ mobile es no perder ancho.
 `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 |
@@ -144,6 +162,75 @@ Slots: `[sui-card-header]`, cuerpo (`<ng-content>`), `[sui-card-media]`, `[sui-c
   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]="true" (click)="abrirFicha(u)">
+  …nombre, correo, aparatos, fecha…
+  <div class="mu__card-actions" (click)="$event.stopPropagation()">
+    <sui-button variant="stroke" color="neutral" [size]="bp.sizeControl()" (click)="openBanModal(u)">{{ u.baneado ? 'Desbloquear cuenta' : 'Bloquear cuenta' }}</sui-button>
+    <sui-button variant="stroke" color="error" [size]="bp.sizeControl()" (click)="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'" (click)="abrirFicha(u)">Ver ficha</sui-link-button>
+    <sui-button variant="stroke" color="neutral" [size]="bp.sizeControl()" (click)="openBanModal(u)">{{ u.baneado ? 'Desbloquear cuenta' : 'Bloquear cuenta' }}</sui-button>
+    <sui-button variant="stroke" color="error" [size]="bp.sizeControl()" (click)="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]="true" (click)="abrirDirecciones()" (keydown.enter)="abrirDirecciones()">…</sui-card>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-card size="small" [interactive]="true" (click)="abrirDirecciones()">…</sui-card>
+```
+
 ## Ejemplo
 
 ```html

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

@@ -26,7 +26,7 @@ igual en el celular, sin tocar nada.
 ## Qué variante usar
 
 > La guía del DS no tiene página para este componente: sale del Figma del DS (set «Chart Legends»).
-> Todo lo de abajo es **propuesta**, salvo lo marcado «según el componente» o «canon».
+> 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**.
@@ -35,12 +35,12 @@ igual en el celular, sin tocar nada.
 
 | campo | valor | cuándo | fuente |
 |---|---|---|---|
-| `label` | nombre corto | El nombre de la serie, tal como se dice en la app: «Entregados», «Yape». | propuesta |
-| `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: propuesta |
+| `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. | propuesta |
-| `value` | número o texto | Cuando el número importa para leer el gráfico: «42», «S/ 1,200.00», «38 %». | propuesta |
-| `disabled` | `true` | Una serie sin datos en el período: se ve, apagada, para que no parezca que falta. | propuesta |
+| `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`.
 
@@ -51,8 +51,8 @@ Para que el gráfico y la leyenda pinten **el mismo color**, ECharts recibe la p
 
 | 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. | propuesta |
-| `vertical` | Al lado de una dona o un pie, con el `value` de cada serie. En mobile, debajo de la dona. | propuesta |
+| `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
 
@@ -75,8 +75,8 @@ para el dedo; lo que cambia por plataforma es la orientación.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| bajo barras o líneas | `horizontal` (envuelve) | `horizontal` | propuesta |
-| junto a una dona | `vertical`, **debajo** de la dona | `vertical`, a la derecha | propuesta |
+| 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 -->
@@ -85,6 +85,15 @@ para el dedo; lo que cambia por plataforma es la orientación.
 
 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 |
@@ -125,6 +134,50 @@ interface SuiChartLegendItem {
 - 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