@ajuarezso/sui-design-system 0.25.0 → 0.25.1

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

@@ -83,9 +83,9 @@ En mobile se toca con el dedo: el área táctil tiene que medir **44 px o más**
 (`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`). Hoy la app lo resuelve con `BreakpointsService`
-(`src/app/services/breakpoints.service.ts`, mobile = hasta 767 px): `[size]="bp.isMobile() ? 'large' : 'medium'"`,
-que todavía deja la tablet en `medium` (el helper de D16 está propuesto en la hoja de decisiones). Medido el 04-10-2026 en `master-pedidos`: 166 `[size]`
+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`,
@@ -100,7 +100,7 @@ así que el par es el de toda la app.
 
 ```html
 <sui-button-group [items]="dias" [multi]="true" [(value)]="diasAbiertos" ariaLabel="Días de atención"
-                  [size]="bp.isMobile() ? 'large' : 'medium'" />
+                  [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
@@ -108,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
@@ -165,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

@@ -39,9 +39,9 @@ En mobile se toca con el dedo: el área táctil tiene que medir **44 px o más**
 (`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`). Hoy la app lo resuelve con `BreakpointsService`
-(`src/app/services/breakpoints.service.ts`, mobile = hasta 767 px): `[size]="bp.isMobile() ? 'large' : 'medium'"`,
-que todavía deja la tablet en `medium` (el helper de D16 está propuesto en la hoja de decisiones). Medido el 04-10-2026 en `master-pedidos`: 166 `[size]`
+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).
@@ -51,6 +51,24 @@ El tamaño lo pone el grupo: es el mismo `size` de `sui-button-group` (ver su RE
 | 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
@@ -93,11 +111,57 @@ 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="medium"

package/docs/sui-card/README.md

@@ -74,16 +74,27 @@ selección.**
 | `[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

@@ -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

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

@@ -76,6 +76,16 @@ Es decorativo y no se toca: no tiene mínimo para el dedo.
 
 No cambia por plataforma: va con el tamaño del texto que acompaña, no con la pantalla.
 
+### Por dispositivo (D16)
+
+No aplica: el tamaño va con el texto de al lado (`medium` junto a 14, `small` junto a 12, como en la
+leyenda), igual en celular chico, celular, tablet, computadora y ultrawide. Es lo que no se toca, y
+`medium` ya es su size más grande: el paso extra del celular (P1 b) no tiene a dónde subir (D16,
+dueño 05-10-2026).
+
+En master-pedidos: no hay helper; el `size` va literal según el texto (`size="small"` junto a 12, o
+nada para `medium`).
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -110,6 +120,45 @@ Constantes exportadas: `SUI_CHART_LEGEND_COLORS` (los 11 colores en el orden del
 - `SUI_CHART_LEGEND_HEX` tiene los hex del modo claro: en modo oscuro no se invierten.
 - Es decorativo (`aria-hidden`): el significado lo dice el texto de al lado.
 
+## Bien y mal
+
+Punto de una serie fuera de la leyenda
+
+```html
+<!-- ❌ mal: punto hecho a mano, sin anillo ni sombra (components/customer-retention/customer-retention.html:17) -->
+<span class="customer-retention__stat-dot" [style.background]="seg.color"></span>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-chart-legend-dot [customColor]="seg.color" />
+```
+
+Punto sin `color`
+
+```html
+<!-- ❌ mal: sin color sale el default gray, no el verde de la serie -->
+<span class="fila"><sui-chart-legend-dot /> Entregados <b>86 %</b></span>
+```
+
+```html
+<!-- ✅ bien -->
+<span class="fila"><sui-chart-legend-dot color="green" /> Entregados <b>86 %</b></span>
+```
+
+Varios puntos sueltos que hacen de leyenda
+
+```html
+<!-- ❌ mal: es una leyenda armada a mano con puntos sueltos -->
+<span><sui-chart-legend-dot color="blue" size="small" /> Yape</span>
+<span><sui-chart-legend-dot color="orange" size="small" /> Efectivo</span>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-chart-legend [items]="[{ label: 'Yape' }, { label: 'Efectivo' }]" />
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-checkbox/README.md

@@ -34,11 +34,13 @@ Regla corta: **se suma y se confirma después → checkbox · se aplica ya → s
 > avanzado (sublabel, badge, descripción y link). Lo marcado «según la guía del DS» sale de ahí;
 > el resto es canon del dueño o propuesta.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app`, sin contar prototipos ni vitrinas
-> (`master-preview`, `master-prototipos`, `mockup-sheets-*`, `dx/*`, `_guia-*`, `master-rutina`,
-> `master-medico`, `dev-index`): **5 checkbox en 3 archivos**, todos con tamaño dinámico
-> (`bp.controlSize()` / `ctrlSize()` = `large` en desktop, `xlarge` en mobile, y uno con el
-> `size()` del padre). Más **1 `<input type="checkbox">` nativo** que debería ser este componente.
+> Uso medido el 03-10-2026 y revisado el 06-10-2026 en `master-pedidos/src/app`, sin contar
+> prototipos ni vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`, `dx/*`,
+> `_guia-*`, `master-rutina`, `master-medico`, `dev-index`): **queda 1 `sui-checkbox`**, el de la
+> fila de opciones del detalle de producto, con el `size()` que le pasa el padre (`bp.controlSize()`
+> en la carta del cliente, `ctrlSize()` en la vista previa del modal de producto). Los otros 4 del
+> 03-10 eran casillas con texto armadas a mano y ya pasaron a `sui-checkbox-label`. Quedan además
+> **2 `<input type="checkbox">` nativos** que no deberían serlo (ver abajo).
 
 ### Lo que sí dice la guía del DS
 
@@ -59,25 +61,30 @@ Regla corta: **se suma y se confirma después → checkbox · se aplica ya → s
 
 | size | px | cuándo | fuente |
 |---|---|---|---|
-| `xlarge` | 28 | Mobile. Viene de `bp.controlSize()`. | canon (aprobado por el dueño, 28-09-2026: «componentes grandes») |
-| `large` | 24 | Desktop. Viene de `bp.controlSize()`. | canon (aprobado por el dueño, 28-09-2026) |
-| `medium` (default) | 20 | Solo dentro de un componente que ya fija su escala (la fila de opciones del detalle de producto recibe el `size` del padre). | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `xlarge` | 28 | Celular y tablet táctil (D16). | canon (aprobado por el dueño, 28-09-2026: «componentes grandes») |
+| `large` | 24 | Computadora (D16). | canon (aprobado por el dueño, 28-09-2026) |
+| `medium` (default) | 20 | Solo dentro de un componente que ya fija su escala. Hoy no hay ninguno: la fila de opciones del detalle de producto recibe el `size` del padre, que es el de D16. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 | `small` | 16 | No usar (ver abajo). | canon (aprobado por el dueño, 28-09-2026) |
 
-Regla: **`[size]="bp.controlSize()"`** en toda pantalla. Así ya están los 5 usos de hoy.
+Regla: **`[size]="bp.tactil() ? 'xlarge' : 'large'"`** en toda pantalla (la expresión exacta de
+D16, ver «Por dispositivo»). El único `sui-checkbox` de hoy no la lleva escrita: recibe el `size()`
+del detalle de producto, y ese padre recibe `bp.controlSize()` o `ctrlSize()`.
 
-**Usos de hoy que rompen la regla de componente:**
+**Usos de hoy frente a la regla de componente** (revisado 06-10-2026):
 
-- **4 `sui-checkbox` envueltos en un `<label>` hecho a mano con su texto → `sui-checkbox-label`.**
-  `pages/settings/team/team.html:228` y `:301` (permisos: «Gestionar productos»…),
-  `components/option-sections-manager/option-sections-manager.html:191` (categorías) y `:214`
-  (productos). Además, tocar el texto no marca nada: un `<label>` solo activa controles nativos
-  y `sui-checkbox` no lo es, así que hoy solo responde la casilla.
+- **Los 4 `sui-checkbox` envueltos en un `<label>` a mano ya pasaron a `sui-checkbox-label`** con
+  su tamaño: `pages/settings/team/team.html:237` y `:309` (permisos, `[size]="bp.controlSize()"`),
+  `components/option-sections-manager/option-sections-manager.html:190` (categorías) y `:212`
+  (productos). Estos dos usan `ctrlSize()`, una copia local de `bp.controlSize()`
+  (`option-sections-manager.ts:62`): da lo mismo, pero conviene usar el helper del servicio.
+  Antes, tocar el texto no marcaba nada: un `<label>` solo activa controles nativos y
+  `sui-checkbox` no lo es, así que solo respondía la casilla. `sui-checkbox-label` hace que toda
+  la fila responda.
 - **1 checkbox nativo → `sui-checkbox-label`:** `pages/sales-channels/facebook/facebook.html:69`
-  («Qué se sincroniza»).
-- **Al migrar, pásale el tamaño:** `sui-checkbox-label` tiene `size` (`medium` 20, `large` 24,
-  `xlarge` 28) desde el 03-10-2026. Con `[size]="bp.controlSize()"` los 4 de arriba siguen en
-  24/28 px; sin él caen a 20.
+  («Qué se sincroniza»). **Al migrarlo, pásale el tamaño:** `sui-checkbox-label` arranca en
+  `medium` (casilla de 20); sin `[size]` queda chico en el celular.
+- **1 checkbox nativo que en realidad es un interruptor → `sui-switch-label`:**
+  `components/settings-panel/settings-panel.html:99` (notificaciones push, se aplica al instante).
 - El de `components/product-detail-view/product-detail-view.html:204` está bien pelado: la fila
   es propia (foto, nombre, precio) y es la fila la que recibe el clic.
 
@@ -89,14 +96,38 @@ que lo contiene. En web va un escalón más chico.
 | uso | mobile | web |
 |---|---|---|
 | casilla en una lista, tabla o fila de formulario | `xlarge` (28 px) | `large` (24 px) |
-| dentro de un componente que fija su escala (fila de opciones del detalle de producto) | lo que pase el padre | lo que pase el padre |
+| dentro de un componente que recibe su `size` del padre (fila de opciones del detalle de producto) | lo que pase el padre | lo que pase el padre |
 
 ```html
-<sui-checkbox [size]="bp.controlSize()" … />   <!-- controlSize() = isMobile() ? 'xlarge' : 'large' -->
+<sui-checkbox [size]="bp.tactil() ? 'xlarge' : 'large'" … />   <!-- tactil() = isMobile() || pointer: coarse -->
 ```
 
-El más grande mide 28 px: ningún tamaño llega a 44 px por sí solo. La fila (o el `<label>` que
-envuelve) tiene que medir al menos 44 px de alto para que el toque sea cómodo.
+El más grande mide 28 px: ningún tamaño llega a 44 px por sí solo. La fila que lo
+contiene tiene que medir al menos 44 px de alto para que el toque sea cómodo.
+
+### Por dispositivo (D16)
+
+Fila de `checkbox` en la tabla de D16 (dueño, 05-10-2026; computadora resuelta el 06-10-2026): se
+toca, y en la computadora va **un paso menos que en el celular**, sin bajar a `medium`.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `xlarge` (28) | la fila que lo contiene da los 44 de alto |
+| celular (380–767 px) | `xlarge` (28) | |
+| tablet táctil (`pointer: coarse`) | `xlarge` (28) | Apple pide 44 pt también en iPad; la fila da el alto |
+| computadora (`pointer: fine`) | `large` (24) | un paso menos que el celular (dueño, 06-10-2026) |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `large`. `small` no se usa en ningún dispositivo;
+`medium` solo si un padre fija su propia escala (el detalle de producto hoy no lo hace: recibe el
+tamaño de D16 de su padre).
+
+En master-pedidos, la expresión que da esta tabla completa es
+**`[size]="bp.tactil() ? 'xlarge' : 'large'"`** (`bp.tactil()` = celular por ancho o pantalla
+táctil). La fila de D16 nombra `bp.controlSize()`, que es lo que llevan hoy los usos de la app: da
+lo mismo en el celular y en la computadora, pero mira solo el ancho (≤ 767 px), así que en un iPad
+de 768 o más devuelve `large` y no `xlarge`. Para que la tabla se cumpla en la tablet hay dos
+caminos: escribir la expresión de arriba, o que `controlSize()` pase a mirar `tactil()` en el
+servicio. Eso último cambia todos los usos de golpe y es decisión del dueño.
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -129,7 +160,10 @@ Implementa `ControlValueAccessor`: funciona con `[(ngModel)]` y `formControlName
 ## Trampas
 
 - **No tiene `label`.** Para el texto está `sui-checkbox-label`. Y el host lleva `role="checkbox"`
-  sin `aria-label` propio: pelado, ponle `aria-label="…"` o un `<label>` que lo envuelva.
+  sin `aria-label` propio: pelado, ponle `aria-label="…"` (o `aria-labelledby` apuntando al texto
+  de la fila). **Un `<label>` que lo envuelva no sirve**: `<label>` solo activa y nombra controles
+  nativos, y `sui-checkbox` es un elemento propio con `role="checkbox"`. Tocar el texto no lo marca
+  y el lector de pantalla no lo asocia.
 - **`checked` es model; `indeterminate` es input.** Hay `[(checked)]` pero no `[(indeterminate)]`,
   y el componente **no limpia el guion solo** al tocarlo: mientras `indeterminate` siga en `true`
   se ve el guion aunque cambie `checked`.
@@ -141,12 +175,58 @@ Implementa `ControlValueAccessor`: funciona con `[(ngModel)]` y `formControlName
 - El tilde es un SVG dibujado a mano: no se cambia el ícono.
 - Ya trae el arreglo de iOS para el `:active` pegado: no lo agregues.
 
+## Bien y mal
+
+Casilla con su texto
+
+```html
+<!-- ❌ mal: nativo dentro de un <label> hecho a mano (pages/sales-channels/facebook/facebook.html:69) -->
+<label class="fb-channel__sync-item">
+  <input type="checkbox" [checked]="item.checked" (change)="toggleSync(item.id)" />
+  <span>{{ item.label }}</span>
+</label>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-checkbox-label [size]="bp.tactil() ? 'xlarge' : 'large'" [label]="item.label"
+  [active]="item.checked" (activeChange)="toggleSync(item.id)" />
+```
+
+Algo que se aplica al instante
+
+```html
+<!-- ❌ mal: casilla nativa pintada de interruptor para las notificaciones (components/settings-panel/settings-panel.html:99) -->
+<label class="sp__toggle">
+  <input type="checkbox" [checked]="pushEnabled()" (change)="togglePush(!pushEnabled())" />
+</label>
+```
+
+```html
+<!-- ✅ bien: se aplica ya → switch, no checkbox -->
+<sui-switch-label [size]="bp.tactil() ? 'xlarge' : 'large'" label="Notificaciones push"
+  [active]="pushEnabled()" (activeChange)="togglePush($event)" />
+```
+
+«Seleccionar todo» de una lista
+
+```html
+<!-- ❌ mal: el guion fijo no se limpia al tocar la casilla, y pelada no tiene nombre -->
+<sui-checkbox [size]="bp.tactil() ? 'xlarge' : 'large'" [indeterminate]="true" [(checked)]="todas" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-checkbox [size]="bp.tactil() ? 'xlarge' : 'large'" aria-label="Seleccionar todo"
+  [indeterminate]="algunas() && !todas()" [checked]="todas()" (checkedChange)="marcarTodas($event)" />
+```
+
 ## Ejemplo
 
 ```html
 <!-- Pelado, el texto vive en la fila (celda de tabla, fila propia) -->
-<sui-checkbox [size]="bp.controlSize()" [(checked)]="seleccionado" aria-label="Elegir pedido" />
+<sui-checkbox [size]="bp.tactil() ? 'xlarge' : 'large'" [(checked)]="seleccionado" aria-label="Elegir pedido" />
 
 <!-- Con texto: usa sui-checkbox-label, no esto a mano -->
-<sui-checkbox-label label="Gestionar productos" [(active)]="puedeProductos" />
+<sui-checkbox-label [size]="bp.tactil() ? 'xlarge' : 'large'" label="Gestionar productos" [(active)]="puedeProductos" />
 ```