@ajuarezso/sui-design-system 0.24.1 → 0.25.1

package/docs/sui-password-strength/README.md

@@ -18,7 +18,7 @@ la barra se llena (rojo, naranja, verde) y cada condición se marca a medida que
 
 - El login: la contraseña ya existe, no se evalúa.
 - Una sola regla («Mínimo 6 caracteres»): alcanza el `hint` del `sui-input`, como hoy en
-  `pages/auth/register/register.html:124`.
+  `pages/auth/register/register.html:132`.
 
 Regla corta: **contraseña nueva con 2+ reglas → este · una regla → hint.**
 
@@ -43,6 +43,12 @@ Regla corta: **contraseña nueva con 2+ reglas → este · una regla → hint.**
 
 No se toca: es texto (12 px) y una barra de 4 px a todo el ancho. **No necesita `bp`.**
 
+### Por dispositivo (D16)
+
+No aplica: no tiene `size` y no se toca; mide lo mismo en el celular chico, el celular, la tablet,
+la computadora y el ultrawide. Lo que sí cambia por dispositivo es el campo de arriba:
+`sui-input` con `[size]="bp.sizeControl()"` (D16, dueño 05-10-2026).
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -89,6 +95,49 @@ interface SuiPasswordStrengthCondition {
 - `strengthChange` no emite el nivel inicial.
 - No incluye el campo: va debajo de un `sui-input type="password-toggle"`.
 
+## Bien y mal
+
+Reglas de la contraseña
+
+```html
+<!-- ❌ mal: sin conditions usa las default (8, mayúscula, número) y marca «débil» lo que el registro acepta. No hay usos en la app: la vitrina lo muestra a propósito como fila de «mal» (pages/super-admin/master-preview/_guia-moleculas/campos.ts:339) -->
+<sui-password-strength [value]="clave()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-password-strength [value]="clave()" [conditions]="reglas" />
+```
+
+Una sola regla
+
+```html
+<!-- ❌ mal: una barra de tres niveles para una sola condición -->
+<sui-input label="Contraseña" type="password-toggle" [size]="bp.sizeControl()" [(value)]="clave" />
+<sui-password-strength [value]="clave()" [conditions]="soloSeisCaracteres" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-input label="Contraseña" type="password-toggle" [size]="bp.sizeControl()"
+           hint="Mínimo 6 caracteres" [(value)]="clave" />
+```
+
+En el login
+
+```html
+<!-- ❌ mal: la contraseña ya existe; no hay nada que evaluar -->
+<sui-input label="Contraseña" type="password-toggle" autocomplete="current-password"
+           [size]="bp.sizeControl()" [(value)]="clave" />
+<sui-password-strength [value]="clave()" [conditions]="reglas" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-input label="Contraseña" type="password-toggle" autocomplete="current-password"
+           [size]="bp.sizeControl()" [(value)]="clave" />
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-payment-icon/README.md

@@ -23,8 +23,8 @@ el color ya elegidos.
 
 ## Qué variante usar
 
-> **La guía del DS no tiene página para este componente.** Todo es **propuesta, falta
-> aprobación**.
+> **La guía del DS no tiene página para este componente.** Las reglas marcadas canon están
+> aprobadas; lo que sigue en propuesta espera decisión.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos**.
 
@@ -32,39 +32,61 @@ el color ya elegidos.
 
 | valor | ícono y color | cuándo | fuente |
 |---|---|---|---|
-| `water` | gota, celeste | No usar hoy. | propuesta |
-| `gas` | fuego, rojo | No usar hoy. | propuesta |
-| `electricity` | foco, amarillo | No usar hoy. | propuesta |
-| `donate` | mano con corazón, rosa | No usar hoy. | propuesta |
-| `internet` | wifi, azul | No usar hoy. | propuesta |
-| `phone` | celular, naranja | No usar hoy. | propuesta |
-| `rent` | casa, verde | No usar hoy. | propuesta |
-| `tax` | documento, morado | No usar hoy. | propuesta |
+| `water` | gota, celeste | No usar hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `gas` | fuego, rojo | No usar hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `electricity` | foco, amarillo | No usar hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `donate` | mano con corazón, rosa | No usar hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `internet` | wifi, azul | No usar hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `phone` | celular, naranja | No usar hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `rent` | casa, verde | No usar hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `tax` | documento, morado | No usar hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 ### `size` y `ariaLabel`
 
 | input | cuándo | fuente |
 |---|---|---|
-| `size` `40` (default) | El único tamaño del Figma. Los demás (32, 48, 56, 64) heredan la escala de `sui-key-icon`. | propuesta |
-| `ariaLabel` | Solo si al lado no está escrito el servicio. Si no, es decorativo. | propuesta |
+| `size` `40` (default) | El único tamaño del Figma. Los demás (32, 48, 56, 64) heredan la escala de `sui-key-icon`. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `ariaLabel` | Solo si al lado no está escrito el servicio. Si no, es decorativo. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 
 Usos de hoy que rompen la regla: **0**.
 
 ## Tamaño en mobile y en web
 
-En mobile se lee y se toca con el dedo, así que va más grande; en web, más chico. En las
-pantallas que se usan en los dos (panel del local, super admin) se elige con el servicio de
-breakpoints de la app (`bp`, en `services/breakpoints.service.ts`); en las que solo existen en
-el celular (cliente, repartidor) va directo el valor de mobile. Todo es **propuesta**.
+No se toca: es un ícono que se lee. Va un paso más grande en el celular de 380 px o más (`40`)
+y más chico en la computadora (`32`); la tablet y el celular chico (< 380 px) van con el valor de
+web (D16). Se elige siempre con el servicio de breakpoints de la app (`bp`, en
+`services/breakpoints.service.ts`), **también en las pantallas que solo existen en el celular**
+(cliente, repartidor): un `40` fijo ahí deja el celular chico con el valor de mobile.
+Es **canon (dueño, 05-10-2026, P1 b)**: un paso más grande en el celular que en computadora, y
+se migra todo ahora, no solo al tocar cada pantalla.
 
 | uso | mobile | web |
 |---|---|---|
 | fila de una lista | `40` | `32` |
 
 ```html
-<sui-payment-icon type="electricity" [size]="bp.isMobile() ? 40 : 32" />
+<sui-payment-icon type="electricity" [size]="bp.celular() ? 40 : 32" />
 ```
 
+### Por dispositivo (D16)
+
+Fila `payment-icon` de la tabla D16 (dueño, 05-10-2026, P1 b): no se toca, así que sube un paso
+**solo en el celular de 380 px o más**.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `32` | valor «web»: no se toca, no sube aunque sea un celular |
+| celular (380–767 px) | `40` | valor «mobile», un paso más que en la computadora |
+| tablet táctil (`pointer: coarse`) | `32` | valor «web»: el puntero no cambia lo que no se toca |
+| computadora (`pointer: fine`) | `32` | |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `32`; el espacio extra va a más columnas, no a
+íconos más grandes.
+
+En master-pedidos: `[size]="bp.celular() ? 40 : 32"` (no hay helper propio: `bp.sizeAvatar` y
+`bp.sizeBadge` devuelven los nombres de otra escala). No uses `bp.isMobile()`: incluye el celular
+chico, que va con el valor de web.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -91,8 +113,48 @@ Outputs: ninguno.
 - **`type` decide el ícono y el color**: no se pueden cambiar. Si necesitas otro, usa `sui-key-icon`.
 - **`size` es un número**: `[size]="48"`.
 
-## Ejemplo
+## Bien y mal
+
+Ícono en una fila de pagos
+
+```html
+<!-- ❌ mal: isMobile incluye el celular chico, que va con el valor de web (D16) -->
+<sui-payment-icon type="water" [size]="bp.isMobile() ? 40 : 32" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-payment-icon type="water" [size]="bp.celular() ? 40 : 32" />
+```
+
+Servicio ya escrito al lado
 
 ```html
+<!-- ❌ mal: el lector dice «Pago de luz» y después «Luz»; el texto ya lo nombra -->
+<sui-payment-icon type="electricity" ariaLabel="Pago de luz" />
+<span>Luz</span>
+```
+
+```html
+<!-- ✅ bien -->
 <sui-payment-icon type="electricity" />
+<span>Luz</span>
+```
+
+Tamaño fijo
+
+```html
+<!-- ❌ mal: size es un número; "48" llega como texto y no es ninguno de 32/40/48/56/64 -->
+<sui-payment-icon type="rent" size="48" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-payment-icon type="rent" [size]="48" />
+```
+
+## Ejemplo
+
+```html
+<sui-payment-icon type="electricity" [size]="bp.celular() ? 40 : 32" />
 ```

package/docs/sui-period-range/README.md

@@ -21,21 +21,21 @@ costado del calendario.
 - **Cambiar de período en un resumen** («Hoy · 7 días · 30 días»): `sui-segmented-control` si son 2
   a 4 opciones, `sui-tab-chips` si son 5 o más o se deslizan (canon, dueño 04-10-2026). Hoy la app
   los tiene en `sui-tab-chips` (super admin `master-overview.html:13`, ganancias del repartidor) y
-  en `sui-select` (resumen del local, `overview.html:44`): con 3 opciones pasan a segmented.
+  en `sui-segmented-control` (resumen del local, `overview.html:43`, medido el 06-10-2026).
 
 ## Qué variante usar
 
-> **La guía del DS no tiene página para este componente** (vive dentro del datepicker). Todo es
-> **propuesta, falta aprobación**.
+> **La guía del DS no tiene página para este componente** (vive dentro del datepicker). Las reglas
+> marcadas canon están aprobadas; lo que sigue en propuesta espera decisión.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos directos**. Lo usa por dentro
 > `sui-datepicker`.
 
 | input | valor | cuándo | fuente |
 |---|---|---|---|
-| `label` | texto | El período en palabras de la persona: «Hoy», «Últimos 7 días», «Este mes». Sin fechas: para eso está el calendario al lado. | propuesta |
-| `active` | `true` | El preset que coincide con el rango elegido. Uno solo; si el rango se tocó a mano, ninguno. | propuesta |
-| `disabled` | `true` | El período no tiene datos (un local que abrió hace 10 días con «Últimos 3 meses»). Mejor sacarlo de la lista si nunca va a tener datos. | propuesta |
+| `label` | texto | El período en palabras de la persona: «Hoy», «Últimos 7 días», «Este mes». Sin fechas: para eso está el calendario al lado. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `active` | `true` | El preset que coincide con el rango elegido. Uno solo; si el rango se tocó a mano, ninguno. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `disabled` | `true` | El período no tiene datos (un local que abrió hace 10 días con «Últimos 3 meses»). Mejor sacarlo de la lista si nunca va a tener datos. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 
 Usos de hoy que rompen la regla: **0**.
 
@@ -47,17 +47,34 @@ se desplaza de costado.
 
 | size | alto | texto | uso | fuente |
 |---|---|---|---|---|
-| `large` | **44** (10 + 24 + 10) | 16/24 | mobile | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
-| `medium` (default) | 36 | 14/20 | web, columna de presets | medido (Figma 443:341) |
+| `large` | **44** (10 + 24 + 10) | 16/24 | celular y tablet táctil | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · la tablet: D16, dueño 05-10-2026 |
+| `medium` (default) | 36 | 14/20 | computadora, columna de presets | medido (Figma 443:341) |
 
 ```html
-<sui-period-range [size]="bp.isMobile() ? 'large' : 'medium'" label="Últimos 7 días"
+<sui-period-range [size]="bp.tactil() ? 'large' : 'medium'" label="Últimos 7 días"
                   [active]="preset() === '7d'" (clicked)="aplicar('7d')" />
 ```
 
 Fuera del datepicker, en el celular los períodos fijos de 2 a 4 opciones van en
 `sui-segmented-control` y los de más opciones en `sui-tab-chips` (canon del dueño, 04-10-2026).
 
+### Por dispositivo (D16)
+
+No está en la tabla por componente de D16; se toca (es un ítem clickeable), así que va como «lo
+que se toca» (D16, dueño 05-10-2026).
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `large` (44) | D16 pide `medium` con área tocable de 44; `medium` mide 36 y el DS no estira su área, así que va `large` (interino) |
+| celular (380–767 px) | `large` (44) | |
+| tablet táctil (`pointer: coarse`) | `large` (44) | se toca con el dedo: Apple pide 44 pt también en el iPad |
+| computadora (`pointer: fine`) | `medium` (36) | la columna de presets al costado del calendario |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`.
+
+En master-pedidos: `[size]="bp.tactil() ? 'large' : 'medium'"` (no hay helper propio; es la misma
+cuenta que `bp.sizeControl()`). No uses `bp.isMobile()`: deja la tablet táctil en `medium` (36).
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -89,9 +106,51 @@ Fuera del datepicker, en el celular los períodos fijos de 2 a 4 opciones van en
 - Ancho fijo de 168 px.
 - `active` no se apaga solo: lo maneja quien lo usa.
 
+## Bien y mal
+
+Períodos de un resumen
+
+```html
+<!-- ❌ mal: un resumen con períodos fijos no es la columna de un calendario -->
+<sui-period-range label="Hoy" [active]="periodo() === 'hoy'" (clicked)="periodo.set('hoy')" />
+<sui-period-range label="7 días" [active]="periodo() === '7d'" (clicked)="periodo.set('7d')" />
+<sui-period-range label="30 días" [active]="periodo() === '30d'" (clicked)="periodo.set('30d')" />
+```
+
+```html
+<!-- ✅ bien: de 2 a 4 períodos fijos, segmented-control -->
+<sui-segmented-control [size]="bp.tactil() ? '2xlarge' : 'medium'"
+  [tabs]="periodOptions" [(active)]="periodo" />
+```
+
+Texto del preset
+
+```html
+<!-- ❌ mal: las fechas las muestra el calendario de al lado; el preset dice el período en palabras -->
+<sui-period-range label="29/09 – 05/10" (clicked)="aplicar('7d')" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-period-range label="Últimos 7 días" (clicked)="aplicar('7d')" />
+```
+
+Tamaño en la tablet
+
+```html
+<!-- ❌ mal: isMobile deja la tablet táctil en medium (36), bajo el piso de 44 -->
+<sui-period-range [size]="bp.isMobile() ? 'large' : 'medium'" label="Hoy" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-period-range [size]="bp.tactil() ? 'large' : 'medium'" label="Hoy" />
+```
+
 ## Ejemplo
 
 ```html
-<sui-period-range label="Hoy" [active]="true" />
-<sui-period-range label="Últimos 30 días" (clicked)="aplicar('30d')" />
+<sui-period-range [size]="bp.tactil() ? 'large' : 'medium'" label="Hoy" [active]="true" />
+<sui-period-range [size]="bp.tactil() ? 'large' : 'medium'" label="Últimos 30 días"
+                  (clicked)="aplicar('30d')" />
 ```

package/docs/sui-popover/README.md

@@ -32,8 +32,9 @@ una función nueva que conviene mostrar donde está («Aquí programas tus pedid
 > La guía del DS dice para qué es, pero no cuándo va cada pie ni cada posición. Lo marcado «según la
 > guía del DS» sale de su texto; «canon» es lo ya aprobado en la app; el resto es **propuesta**.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos**, y ningún recorrido de
-> bienvenida hecho a mano. Todo lo de abajo es para el primer flujo que lo necesite.
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (re-medido el 06-10-2026, sin cambios): **0
+> usos** fuera de la página de guía de master-preview, y ningún recorrido de bienvenida hecho a
+> mano. Todo lo de abajo es para el primer flujo que lo necesite.
 
 ### Lo que sí dice la guía del DS
 
@@ -55,11 +56,11 @@ una función nueva que conviene mostrar donde está («Aquí programas tus pedid
 
 | prop | valor | cuándo | fuente |
 |---|---|---|---|
-| `doubleButton` | `true` (default) | Desde el segundo paso de un recorrido («Atrás» / «Siguiente»), o un aviso suelto con «Ahora no» / «Probar». | propuesta |
-| `doubleButton` | `false` | El primer paso de un recorrido o un aviso suelto con una sola salida («Entendido»). | propuesta |
+| `doubleButton` | `true` (default) | Desde el segundo paso de un recorrido («Atrás» / «Siguiente»), o un aviso suelto con «Ahora no» / «Probar». | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `doubleButton` | `false` | El primer paso de un recorrido o un aviso suelto con una sola salida («Entendido»). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `backLabel` · `nextLabel` | texto en español | Los defaults ya son «Atrás» y «Siguiente» (03-10-2026); el último paso pasa `nextLabel="Listo"`. | canon (CANON-SUI §5.1 y §5.3: sentence case, tuteo) |
 | orden | secundario a la izquierda, primario a la derecha | Ya lo hace el componente (stroke neutral + filled primary), igual que `sui-modal-footer`. | canon (CLAUDE.md, «Botones — composición y orden») |
-| `step` | `{ current, total }` | Con `stepper`. Sin `step`, el componente asume **1 de 4**. | propuesta |
+| `step` | `{ current, total }` | Con `stepper`. Sin `step`, el componente asume **1 de 4**. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 
 ### Flecha, ícono, texto y cierre
 
@@ -71,13 +72,13 @@ una función nueva que conviene mostrar donde está («Aquí programas tus pedid
 | `position` | `bottom-*` | El elemento está abajo (la barra de pestañas): el popover va encima. | propuesta |
 | `position` | `left-*` · `right-*` | Elementos de una barra lateral (el sidebar del panel). | propuesta |
 | `position` | `*-left` · `*-center` · `*-right` | Alinea la flecha con el elemento cuando el popover no puede centrarse sobre él (está cerca de un borde). | propuesta |
-| `icon` | el de lo que se explica | Siempre uno que diga el tema (`calendar-schedule-line` para programar). El default es un ícono de persona. | propuesta |
-| `icon` | `null` | Cuando el texto ya basta y el ícono sería decoración. | propuesta |
+| `icon` | el de lo que se explica | Siempre uno que diga el tema (`calendar-schedule-line` para programar). El default es un ícono de persona. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `icon` | `null` | Cuando el texto ya basta y el ícono sería decoración. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `title` | frase corta | Qué es, en sentence case y sin punto final. | canon (CANON-SUI §5.1 y §5.2) |
 | `description` | una o dos frases | Qué hace o por qué importa. | propuesta |
-| `dismissIcon` | `true` (default) | Siempre: un recorrido se puede saltar. | propuesta |
-| `dismissIcon` | `false` | No usar hoy. **Cuándo sí:** un paso que no se puede saltar porque sin él no funciona lo siguiente. | propuesta |
-| `[data-slot=body]` | contenido propio | No usar hoy. **Cuándo sí:** el paso necesita una imagen o una lista en vez de título y texto. | propuesta |
+| `dismissIcon` | `true` (default) | Siempre: un recorrido se puede saltar. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `dismissIcon` | `false` | No usar hoy. **Cuándo sí:** un paso que no se puede saltar porque sin él no funciona lo siguiente. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `[data-slot=body]` | contenido propio | No usar hoy. **Cuándo sí:** el paso necesita una imagen o una lista en vez de título y texto. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 ## Tamaño en mobile y en web
 
@@ -96,19 +97,37 @@ extensión SUI 03-10-2026).
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | el panel | 320 px (cabe desde 352 px de pantalla) | 320 px | según el componente |
-| botones del pie | `large` (48) | `small` (36) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+| botones del pie | `large` (48), también en la tablet táctil | `medium` (40) | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · tablet y web: D16, dueño 05-10-2026; antes `small` (el default del componente: hay que pasarlo) |
 | la X | se ve de 24, se toca en 40 | igual | canon (aprobado por el dueño, 03-10-2026) |
 
 ```html
-<sui-popover footer="stretch" [size]="bp.isMobile() ? 'large' : 'small'" … />
+<sui-popover footer="stretch" [size]="bp.sizeControl()" … />
 ```
 
 `large` es el siguiente de la escala del `sui-button` (48, el del footer de los modales). `medium`
-(40) queda para quien ya lo usa: no llega al piso de 44.
+(40) es el de la computadora, con puntero fino (D16); no llega a 44, por eso no va en lo táctil.
 
 En mobile, si el recorrido es la bienvenida de la app, conviene una pantalla o un
 `sui-modal-sheet` por paso en vez del popover (propuesta, falta aprobación).
 
+### Por dispositivo (D16)
+
+Fila `popover` (botones del pie) de la tabla D16 (dueño, 05-10-2026). Los botones se tocan, así
+que van por tipo de puntero además del ancho. El panel no cambia: 320 px en todos.
+
+| 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). El panel de 320 cabe desde 352 px |
+| celular (380–767 px) | `large` (48) | |
+| tablet táctil (`pointer: coarse`) | `large` (48) | se toca con el dedo: Apple pide 44 pt también en el iPad |
+| computadora (`pointer: fine`) | `medium` (40) | el default es `small` (36): hay que pasarlo |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`.
+
+En master-pedidos: `[size]="bp.sizeControl()"` — el `size` del popover es el de sus `sui-button`,
+así que va el mismo helper del botón (`large` con `bp.tactil()`, `medium` si no). No uses
+`bp.isMobile()`: deja la tablet táctil en `medium`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 Hoy el popover entero tiene **0 usos**; esto es lo que no se usaría aunque llegue un flujo nuevo.
@@ -168,6 +187,52 @@ Slot: `[data-slot=body]` reemplaza título y descripción.
   (crecen si el texto no entra). Hasta el 03-10-2026 no pasaba: el `.scss` apuntaba a
   `.sui-popover__btn` y el template pone `.sui-popover__action`.
 
+## Bien y mal
+
+Botones del pie
+
+```html
+<!-- ❌ mal: sin size queda en small, botones de 36. Sale de la página de guía, no de un uso real
+     (pages/super-admin/master-preview/_guia-moleculas/avisos.ts:224) -->
+<sui-popover position="top-center" icon="wallet-3-line" title="Aquí ves lo que ganaste hoy"
+  [doubleButton]="false" nextLabel="Entendido" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-popover position="top-center" icon="wallet-3-line" title="Aquí ves lo que ganaste hoy"
+  [doubleButton]="false" nextLabel="Entendido" [size]="bp.sizeControl()" />
+```
+
+Recorrido con puntos
+
+```html
+<!-- ❌ mal: sin step, los puntos dicen «1 de 4» aunque el recorrido tenga 3 pasos -->
+<sui-popover footer="stepper" icon="calendar-schedule-line" title="Programa tus pedidos"
+  [size]="bp.sizeControl()" (back)="anterior()" (next)="siguiente()" (dismissed)="saltar()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-popover footer="stepper" [step]="{ current: 2, total: 3 }" icon="calendar-schedule-line"
+  title="Programa tus pedidos" [size]="bp.sizeControl()"
+  (back)="anterior()" (next)="siguiente()" (dismissed)="saltar()" />
+```
+
+Ícono del tema
+
+```html
+<!-- ❌ mal: sin icon sale una persona (user-6-line), que no dice nada de programar -->
+<sui-popover title="Programa tus pedidos" description="Elige el día y la hora."
+  [size]="bp.sizeControl()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-popover icon="calendar-schedule-line" title="Programa tus pedidos"
+  description="Elige el día y la hora." [size]="bp.sizeControl()" />
+```
+
 ## Ejemplo
 
 ```html
@@ -175,10 +240,11 @@ Slot: `[data-slot=body]` reemplaza título y descripción.
 <sui-popover position="top-left" icon="calendar-schedule-line"
   title="Programa tus pedidos" description="Elige el día y la hora, y el pedido entra solo a la cocina."
   footer="stepper" [step]="{ current: 2, total: 3 }"
-  backLabel="Atrás" nextLabel="Siguiente"
+  backLabel="Atrás" nextLabel="Siguiente" [size]="bp.sizeControl()"
   (back)="anterior()" (next)="siguiente()" (dismissed)="saltar()" />
 
 <!-- Aviso suelto con una sola salida -->
 <sui-popover position="bottom-center" icon="wallet-3-line" title="Aquí ves lo que ganaste hoy"
-  [doubleButton]="false" nextLabel="Entendido" (next)="cerrar()" (dismissed)="cerrar()" />
+  [doubleButton]="false" nextLabel="Entendido" [size]="bp.sizeControl()"
+  (next)="cerrar()" (dismissed)="cerrar()" />
 ```

package/docs/sui-product-card/README.md

@@ -30,34 +30,38 @@ Regla corta: **producto en la grilla de la carta → product-card · producto en
 > de la carta de la app. La card **dibuja, no decide**: el precio, si se vende ahora y la
 > etiqueta de no disponible le llegan ya resueltos.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **3
+> Uso medido el 03-10-2026 y re-medido el 06-10-2026 en `master-pedidos/src/app` (misma exclusión
+> que `sui-card`; las líneas son las del 06-10-2026): **3
 > product-cards en 2 archivos**: la carta del cliente
 > (`pages/customer/restaurant-menu/restaurant-menu.html:323` y `:386`) y la grilla del local
-> (`pages/products/products.html:145`, con `action="edit"`).
+> (`pages/products/products.html:147`, con `action="edit"`).
 
 ### Las piezas
 
 | prop | cuándo | fuente |
 |---|---|---|
-| `name`, `price` (obligatorios) | Siempre. El precio sale con 2 decimales y punto: «S/ 35.00». | propuesta |
-| `description` | Una línea que diga qué trae: «Con hierbas aromáticas y papas nativas». | propuesta |
-| `image` como objeto `{ url, fallbackUrl, position }` | Lo normal: `url` = la miniatura, `fallbackUrl` = la foto grande por si la miniatura no carga, `position` = encuadre vertical guardado. | propuesta (así lo hace la carta) |
-| `image` como string | Solo la url, sin respaldo. | propuesta |
-| `image = null` + `fallback` | Sin foto: banda de color con el nombre (default). La carta pasa `{ color }` para variar el color por visita con `SUI_PRODUCT_FALLBACK_COLORS`. | propuesta |
-| `available=false` + `unavailableLabel` | Agotado o fuera de horario; la etiqueta dice cuál («Agotado», «Desde las 12 m.»). Se atenúa y pierde el «+». | propuesta |
-| `quantity` | Cuántos hay en el carrito: con más de 0, el «+» pasa a stepper (− / cantidad / +). | propuesta |
-| `closed` | El local no recibe pedidos: se ve, no se agrega. | propuesta |
-| `action="add"` (default) | La carta del cliente. | propuesta |
-| `action="edit"` | La grilla del dueño: lápiz siempre (también en agotado, que es justo el que quiere tocar), nunca stepper. | propuesta |
-| `currencySymbol` | Default `S/`. No se cambia: la app cobra en soles. | propuesta |
-| `fallback.variant="icon"` | Ver «No usar». | propuesta |
+| `name`, `price` (obligatorios) | Siempre. El precio sale con 2 decimales y punto: «S/ 35.00». | canon (CANON-SUI §5.5: «S/ » + espacio, punto decimal y 2 decimales; el precio se pasa como número y el componente formatea) |
+| `description` | Una línea que diga qué trae: «Con hierbas aromáticas y papas nativas». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `image` como objeto `{ url, fallbackUrl, position }` | Lo normal: `url` = la miniatura, `fallbackUrl` = la foto grande por si la miniatura no carga, `position` = encuadre vertical guardado. | canon (aprobado por el dueño, 05-10-2026, bloque B9) (así lo hace la carta) |
+| `image` como string | Solo la url, sin respaldo. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `image = null` + `fallback` | Sin foto: banda de color con el nombre (default). La carta pasa `{ color }` para variar el color por visita con `SUI_PRODUCT_FALLBACK_COLORS`. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `available=false` + `unavailableLabel` | Agotado o fuera de horario; la etiqueta dice cuál («Agotado», «Desde las 12 m.»). Se atenúa y pierde el «+». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `quantity` | Cuántos hay en el carrito: con más de 0, el «+» pasa a stepper (− / cantidad / +). | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `closed` | El local no recibe pedidos: se ve, no se agrega. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `action="add"` (default) | La carta del cliente. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `action="edit"` | La grilla del dueño: lápiz siempre (también en agotado, que es justo el que quiere tocar), nunca stepper. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `currencySymbol` | Default `S/`. No se cambia: la app cobra en soles. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `fallback.variant="icon"` | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 Outputs: `openDetail` (toque en la card), `add`, `increment`, `decrement`, `edit`.
 
-**Usos de hoy que rompen las reglas:** 0. **Pendiente de migrar:** el precio tachado y la chapa de
-descuento ya existen en el DS (`precioLista`, ver «Precio con descuento»), pero la carta los sigue
-dibujando afuera (`pages/customer/restaurant-menu/restaurant-menu.scss:426`, deuda anotada) y
-ninguna de las 3 cards pasa `precioLista` ni `size`.
+**Usos de hoy que rompen las reglas:** 3 (medido el 06-10-2026). Las 3 cards pasan
+`[size]="bp.isMobile() ? 'large' : 'small'"` (`products.html:147`, `restaurant-menu.html:323` y
+`:386`): `small` en la computadora y en la tablet táctil, cuando D16 pide `medium` y `large`. Va
+`bp.sizeControl()` (ver «Por dispositivo (D16)»). **Pendiente de migrar:** el precio tachado y la
+chapa de descuento ya existen en el DS (`precioLista`, ver «Precio con descuento»), pero la carta
+los sigue dibujando afuera (`pages/customer/restaurant-menu/restaurant-menu.scss:426`, deuda
+anotada) y ninguna de las 3 cards pasa `precioLista`.
 
 ## Tamaño en mobile y en web
 
@@ -77,13 +81,32 @@ lápiz sí siguen al lado del precio.
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | grilla de la carta | 2 columnas (`1fr 1fr`, gap 12) | `repeat(auto-fill, minmax(220px, 1fr))` desde 600 px y `minmax(180px, 1fr)` en desktop | lo que hay en la app |
-| botón «+», lápiz, stepper | `large` (44) | `small` (36) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+| botón «+», lápiz, stepper | `large` (44), también en la tablet táctil | `medium` (40) | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · tablet y web: D16, dueño 05-10-2026; antes `small` (el default del componente: hay que pasarlo) |
 
 ```html
-<sui-product-card [size]="bp.isMobile() ? 'large' : 'small'" … />
+<sui-product-card [size]="bp.sizeControl()" … />
 ```
 
-`medium` (40) queda para quien ya lo usa: no llega al piso de 44 del teléfono.
+`medium` (40) es el de la computadora (D16); la tablet va como el teléfono, porque se toca.
+
+### Por dispositivo (D16)
+
+Fila `product-card` de la tabla D16 (dueño, 05-10-2026). El «+», el lápiz y el stepper se tocan,
+así que van por tipo de puntero además del ancho.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `large` (44) | D16 pide `medium` con área tocable de 44; mientras el DS no estire el área de los `medium`, va `large` (interino). El stepper baja a su propia línea |
+| celular (380–767 px) | `large` (44) | grilla de 2 columnas: el stepper baja a su propia línea |
+| tablet táctil (`pointer: coarse`) | `large` (44) | se toca con el dedo: Apple pide 44 pt también en el iPad |
+| computadora (`pointer: fine`) | `medium` (40) | el default es `small` (36): hay que pasarlo |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`; el espacio extra va a más columnas de
+la grilla, no a botones más grandes.
+
+En master-pedidos: `[size]="bp.sizeControl()"` — el «+» y el lápiz son la escala del `sui-button`,
+así que va el mismo helper (`large` con `bp.tactil()`, `medium` si no). No uses
+`bp.isMobile() ? 'large' : 'small'`: deja la tablet táctil y la computadora en `small`.
 
 ## Precio con descuento
 
@@ -158,10 +181,55 @@ interface SuiProductCardFallback { variant?: 'name' | 'icon'; color?: string | n
 - Cada url nueva vuelve a mostrar el barrido de carga; si la miniatura falla, intenta con
   `fallbackUrl` antes de apagarlo.
 
+## Bien y mal
+
+Tamaño de los botones del pie
+
+```html
+<!-- ❌ mal: small (36) en la computadora y en la tablet táctil (pages/customer/restaurant-menu/restaurant-menu.html:323) -->
+<sui-product-card [size]="bp.isMobile() ? 'large' : 'small'"
+  [name]="product.name" [price]="product.price" (add)="onCardAdd(product)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-product-card [size]="bp.sizeControl()"
+  [name]="product.name" [price]="product.price" (add)="onCardAdd(product)" />
+```
+
+La grilla del dueño del local
+
+```html
+<!-- ❌ mal: sin action="edit" el dueño ve el «+» del cliente, y en agotado ni eso -->
+<sui-product-card [size]="bp.sizeControl()" [name]="p.name" [price]="p.priceNum"
+  [available]="seVendeAhora(p)" (openDetail)="editProduct(p)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-product-card [size]="bp.sizeControl()" action="edit" [name]="p.name" [price]="p.priceNum"
+  [available]="seVendeAhora(p)" (openDetail)="editProduct(p)" (edit)="editProduct(p)" />
+```
+
+Foto del producto
+
+```html
+<!-- ❌ mal: como string no hay respaldo si la miniatura falla, ni encuadre guardado -->
+<sui-product-card [size]="bp.sizeControl()" [name]="p.name" [price]="p.price"
+  [image]="p.thumbnailUrl" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-product-card [size]="bp.sizeControl()" [name]="p.name" [price]="p.price"
+  [image]="p.thumbnailUrl ? { url: p.thumbnailUrl, fallbackUrl: p.imageUrl, position: p.imagePosition ?? 50 } : null" />
+```
+
 ## Ejemplo
 
 ```html
 <sui-product-card
+  [size]="bp.sizeControl()"
   [name]="p.name"
   [description]="p.description ?? ''"
   [price]="p.price"