@ajuarezso/sui-design-system 0.24.1 → 0.25.1

package/docs/sui-brand-logo/README.md

@@ -25,8 +25,8 @@ Regla corta: **la marca es lo que se muestra → brand-logo · es un ícono más
 
 ## 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.** Lo marcado canon está
+> aprobado; lo que sigue en **propuesta** espera decisión.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos directos**. Lo usan por dentro
 > `sui-content-card` (`type="brand"`), `sui-social-button`, `sui-content-label`,
@@ -37,10 +37,10 @@ Regla corta: **la marca es lo que se muestra → brand-logo · es un ícono más
 
 | valor | cuándo | fuente |
 |---|---|---|
-| `whatsapp` | Soporte y contacto con el negocio. | propuesta |
-| `google`, `apple` | Entrar con esa cuenta (vía `sui-social-button`). | propuesta |
-| `instagram`, `facebook` | Las redes del negocio o de la app. | propuesta |
-| las otras 23 (`adobe`, `notion`, `slack`, `stripe`…) | No usar hoy. | propuesta |
+| `whatsapp` | Soporte y contacto con el negocio. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `google`, `apple` | Entrar con esa cuenta (vía `sui-social-button`). | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `instagram`, `facebook` | Las redes del negocio o de la app. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| las otras 23 (`adobe`, `notion`, `slack`, `stripe`…) | No usar hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 **No hay TikTok** en el catálogo (son 28 marcas), aunque la app hace publicidad ahí.
 
@@ -48,45 +48,46 @@ Regla corta: **la marca es lo que se muestra → brand-logo · es un ícono más
 
 | valor | cuándo | fuente |
 |---|---|---|
-| `original` (default) | El normal: sobre fondo claro, con su color oficial. | propuesta |
-| `white` | Sobre fondo oscuro o sobre foto. | propuesta |
-| `black` | No usar hoy. | propuesta |
+| `original` (default) | El normal: sobre fondo claro, con su color oficial. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `white` | Sobre fondo oscuro o sobre foto. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `black` | No usar hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 ### `size`
 
 | valor | px | cuándo | fuente |
 |---|---|---|---|
-| `xs` | 16 | Dentro de un texto o de un tag. | propuesta |
-| `sm` | 20 | Dentro de un botón (lo usa `sui-social-button`). | propuesta |
-| `md` (default) | 24 | Fila de una lista. | propuesta |
-| `lg` | 32 | Tarjeta de contacto (el tamaño del Figma). | propuesta |
-| `xl` | 40 | Tarjeta grande. | propuesta |
-| `2xl` | 48 | Lo pide `sui-content-label` en tamaño grande. | propuesta |
+| `xs` | 16 | Dentro de un texto o de un tag. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `sm` | 20 | Dentro de un botón (lo usa `sui-social-button`). | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `md` (default) | 24 | Fila de una lista o tarjeta de contacto, en la computadora, la tablet y el celular chico (ver «Por dispositivo (D16)»). | canon (aprobado por el dueño, 05-10-2026, bloque B1) · por dispositivo: D16, dueño 05-10-2026 |
+| `lg` | 32 | Tarjeta de contacto o fila en el celular (380–767), un paso arriba del `md` de la computadora; es el tamaño del Figma. También el logo con `href` en la computadora (propuesta). | canon (aprobado por el dueño, 05-10-2026, bloque B1) · por dispositivo: D16, dueño 05-10-2026 |
+| `xl` | 40 | Tarjeta grande. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `2xl` | 48 | Lo pide `sui-content-label` en tamaño grande. Y el logo con `href` en todo lo táctil: es el único que llega a 44. | canon (aprobado por el dueño, 05-10-2026, bloque B1) · con `href`: canon (dueño, 04-10-2026) |
 
 ### `href`, `target`, `rel`, `disabled`, `ariaLabel`
 
 | input | cuándo | fuente |
 |---|---|---|
-| `href` + `target="_blank"` | El logo lleva a la red social. `rel` ya viene en `noopener noreferrer`. | propuesta |
-| `ariaLabel` | Con `href`, siempre: «Síguenos en Instagram». Sin `href`, el default («Logo de Instagram») alcanza. | propuesta |
-| `disabled` | No usar hoy. | propuesta |
+| `href` + `target="_blank"` | El logo lleva a la red social. `rel` ya viene en `noopener noreferrer`. | canon (aprobado por el dueño, 05-10-2026, bloque B10) |
+| `ariaLabel` | Con `href`, siempre: «Síguenos en Instagram». Sin `href`, el default («Logo de Instagram») alcanza. | canon (aprobado por el dueño, 05-10-2026, bloque B10) |
+| `disabled` | No usar hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B10) |
 
 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**.
+En mobile se lee y se toca con el dedo, así que va más grande; en web, más chico. 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): con D16 el celular
+chico y la tablet llevan el valor de web en lo que no se toca (D16, dueño 05-10-2026). Todo es
+**propuesta**, salvo lo marcado canon.
 
-| uso | mobile | web |
-|---|---|---|
-| tarjeta de contacto, fila | `lg` (32) | `md` (24) |
-| como link (con `href`, se toca) | `2xl` (48) | `lg` (32) |
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| tarjeta de contacto, fila | `lg` (32) | `md` (24) | canon (dueño, 05-10-2026, P1 b) |
+| como link (con `href`, se toca) | `2xl` (48), también en la tablet táctil | `lg` (32) | mobile: canon (decisión del dueño 04-10-2026, piso táctil 44: `2xl` es el único size que llega) · tablet: D16, dueño 05-10-2026 (lo que se toca) · web: propuesta |
 
 ```html
-<sui-brand-logo company="instagram" [size]="bp.isMobile() ? '2xl' : 'lg'" [href]="url" target="_blank"
+<sui-brand-logo company="instagram" [size]="bp.tactil() ? '2xl' : 'lg'" [href]="url" target="_blank"
                 ariaLabel="Síguenos en Instagram" />
 ```
 
@@ -94,6 +95,25 @@ Con `href` el logo **es** el área táctil: en mobile tiene que medir 44 px o m
 tamaño que llega es `2xl` (48). Si se quiere un logo de 32 px tocable, el link va en un
 contenedor de 44 px.
 
+### Por dispositivo (D16)
+
+Sin `href` no se toca: sigue la fila de `brand-logo` de D16 (sube un paso solo en el celular). Con
+`href` se toca: va `2xl` en todo lo táctil.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `md` · con `href`: `2xl` | lo que no se toca va con el valor de web; el link no tiene otro size que llegue a 44 |
+| celular (380–767) | `lg` · con `href`: `2xl` | el valor de mobile de la tabla de arriba |
+| tablet táctil (`pointer: coarse`) | `md` · con `href`: `2xl` | se toca con el dedo: el link también pide 44 |
+| computadora (`pointer: fine`) | `md` · con `href`: `lg` | el `lg` del link en la computadora sigue siendo propuesta |
+
+Ultrawide: igual que la computadora.
+
+En master-pedidos (no hay helper propio): `[size]="bp.celular() ? 'lg' : 'md'"` sin `href`;
+`[size]="bp.tactil() ? '2xl' : 'lg'"` con `href`. Los size de la fila son los de «tarjeta de
+contacto, fila»: en otro uso (`xs` en un texto, `xl` en una tarjeta grande) se sube un paso igual,
+solo en `bp.celular()`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -131,13 +151,57 @@ Outputs: ninguno.
 - Con `href` y `disabled` a la vez, no se vuelve link.
 - El `aria-label` por defecto es «Logo de <Marca>» (en español desde el 04-10-2026); con `href` pasa uno que diga adónde lleva.
 
+## Bien y mal
+
+**Logo que lleva a la red del negocio**
+
+```html
+<!-- ❌ mal: con `href` el logo ES el área táctil, y `lg` (32) no llega a 44 en el celular -->
+<sui-brand-logo company="instagram" size="lg" [href]="url" target="_blank"
+                ariaLabel="Síguenos en Instagram" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-brand-logo company="instagram" [size]="bp.tactil() ? '2xl' : 'lg'" [href]="url" target="_blank"
+                ariaLabel="Síguenos en Instagram" />
+```
+
+**Entrar con Google**
+
+```html
+<!-- ❌ mal: botón armado a mano con el logo adentro -->
+<sui-button variant="stroke" color="neutral" [size]="bp.sizeControl()">
+  <sui-brand-logo company="google" size="sm" /> Continuar con Google
+</sui-button>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-social-button brand="google" variantStyle="stroke" [size]="bp.sizeControl()" label="Continuar con Google" />
+```
+
+**WhatsApp como un ícono más del botón**
+
+```html
+<!-- ❌ mal: dentro de un botón la marca no es el contenido, y el <img> no toma el color del texto -->
+<sui-button variant="stroke" color="neutral" [size]="bp.sizeControl()">
+  <sui-brand-logo company="whatsapp" size="sm" /> Escríbenos
+</sui-button>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-button variant="stroke" color="neutral" [size]="bp.sizeControl()" leftIcon="whatsapp-line">Escríbenos</sui-button>
+```
+
 ## Ejemplo
 
 ```html
-<!-- Tarjeta de soporte -->
-<sui-brand-logo company="whatsapp" size="lg" />
+<!-- Tarjeta de soporte: no se toca, sube un paso solo en el celular -->
+<sui-brand-logo company="whatsapp" [size]="bp.celular() ? 'lg' : 'md'" />
 
-<!-- Red del negocio, como link -->
-<sui-brand-logo company="instagram" size="2xl" [href]="tenant.instagramUrl" target="_blank"
+<!-- Red del negocio, como link: se toca, 2xl en todo lo táctil -->
+<sui-brand-logo company="instagram" [size]="bp.tactil() ? '2xl' : 'lg'" [href]="tenant.instagramUrl" target="_blank"
                 ariaLabel="Síguenos en Instagram" />
 ```

package/docs/sui-breadcrumb-item/README.md

@@ -31,11 +31,11 @@ desplegable al lado o un separador propio. Hoy no hay ningún caso.
 | input | valor | cuándo | fuente |
 |---|---|---|---|
 | `label` | texto | El nombre del nivel. | según la guía del DS |
-| `icon` | nombre RemixIcon | Solo el primer nivel (inicio), y con `ariaLabel` si va sin texto. | según la guía del DS (el ícono existe); el cuándo es propuesta |
+| `icon` | nombre RemixIcon | Solo el primer nivel (inicio), y con `ariaLabel` si va sin texto. | según la guía del DS (el ícono existe); el cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `href` | ruta | Con ruta: dibuja un `<a>`; una ruta interna (`/…`) navega con el router sin recargar. | según la guía del DS (como enlace) |
 | `href` | vacío | Dibuja un `<button>` y avisa por `(clicked)`. | según el código |
 | `active` | `true` | La página actual: no es clicable, va en negro y lleva `aria-current="page"`. | según la guía del DS |
-| `ariaLabel` | texto | Obligatorio cuando va solo el ícono. | propuesta, falta aprobación |
+| `ariaLabel` | texto | Obligatorio cuando va solo el ícono. | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
 
 Usos de hoy que rompen las reglas: **0** (no se usa).
 
@@ -46,12 +46,23 @@ no se usa en mobile.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| miga | no se usa | el componente (dentro de `sui-breadcrumbs`) | propuesta, falta aprobación |
+| miga | no se usa | el componente (dentro de `sui-breadcrumbs`) | canon (aprobado por el dueño, 05-10-2026, bloque B7) |
 
 ```html
 @if (!bp.isMobile()) { <sui-breadcrumbs [items]="ruta()" /> }
 ```
 
+### Por dispositivo (D16)
+
+No aplica: no tiene `size` y mide 20 px fijos en todo dispositivo. Ni la miga ni `sui-breadcrumbs`
+se ocultan solos (no tienen `@media` ni lógica para eso): **lo decide la pantalla que usa la ruta**,
+con su propio `@if (!bp.isMobile())`. Con eso no se muestra en el celular chico ni en el celular, y
+sí en la computadora y el ultrawide. En la tablet táctil con 768 px o más `bp.isMobile()` es falso, la
+ruta se muestra y la miga de 20 px no llega al piso de 44 de lo táctil: no hay size que lo arregle y
+queda sin decidir, igual que en `sui-breadcrumbs`.
+
+En master-pedidos: sin `[size]`; la pantalla envuelve `sui-breadcrumbs` en `@if (!bp.isMobile())`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -85,6 +96,46 @@ no se usa en mobile.
   `SuiBreadcrumbEntry`. No son lo mismo.
 - No trae separador: el separador lo pone `sui-breadcrumbs`.
 
+## Bien y mal
+
+**Ruta armada a mano**
+
+```html
+<!-- ❌ mal: separador propio y activo a mano; sui-breadcrumbs ya hace las dos cosas -->
+<sui-breadcrumb-item label="Productos" href="/empresa/productos" />
+<sui-icon name="arrow-right-s-line" />
+<sui-breadcrumb-item label="Hamburguesas" [active]="true" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-breadcrumbs [items]="[{ label: 'Productos', href: '/empresa/productos' }, { label: 'Hamburguesas' }]" />
+```
+
+**Inicio solo con el ícono**
+
+```html
+<!-- ❌ mal: sin texto ni `ariaLabel`, el lector de pantalla no dice adónde lleva -->
+<sui-breadcrumb-item icon="home-5-line" href="/empresa/inicio" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-breadcrumb-item icon="home-5-line" ariaLabel="Inicio" href="/empresa/inicio" />
+```
+
+**Navegar dos veces**
+
+```html
+<!-- ❌ mal: con `href` el clic ya navega y además emite `clicked` -->
+<sui-breadcrumb-item label="Productos" href="/empresa/productos" (clicked)="router.navigateByUrl('/empresa/productos')" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-breadcrumb-item label="Productos" href="/empresa/productos" />
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-breadcrumbs/README.md

@@ -38,17 +38,17 @@ Regla corta: **3+ niveles en web → breadcrumbs · mobile o 1-2 niveles → fle
 | divider | cuándo | fuente |
 |---|---|---|
 | `arrow` (default) | Siempre en la app. | según la guía del DS (es su default) |
-| `slash` | No: misma función que la flecha; dos estilos en la misma app se leen como dos cosas. | según la guía del DS (la forma existe); el no es propuesta |
-| `dot` | No: el punto separa metadatos («12 min · S/ 4.50»), no niveles. Extensión de SUI. | propuesta, falta aprobación |
+| `slash` | No: misma función que la flecha; dos estilos en la misma app se leen como dos cosas. | según la guía del DS (la forma existe); el no: canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `dot` | No: el punto separa metadatos («12 min · S/ 4.50»), no niveles. Extensión de SUI. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 ### Ítems (`items`)
 
 | qué | cuándo | fuente |
 |---|---|---|
 | `label` | Siempre el nombre real del nivel («Hamburguesas», no «Categoría»). Un id nunca es el nombre. | canon (CLAUDE.md, «un identificador nunca es el título de nada») |
-| `href` | Cada nivel anterior con su ruta interna (`/empresa/productos`): navega con el router, sin recargar. | propuesta, falta aprobación |
-| sin `href` + `(navigate)` | Cuando volver no es una ruta (cerrar un panel, limpiar un filtro). | propuesta, falta aprobación |
-| `icon` solo en el primero | El inicio como casa (`home-5-line`) con `ariaLabel`. | según la guía del DS (ítems con ícono); el cuándo es propuesta |
+| `href` | Cada nivel anterior con su ruta interna (`/empresa/productos`): navega con el router, sin recargar. | canon (aprobado por el dueño, 05-10-2026, bloque B10) |
+| sin `href` + `(navigate)` | Cuando volver no es una ruta (cerrar un panel, limpiar un filtro). | canon (aprobado por el dueño, 05-10-2026, bloque B10) |
+| `icon` solo en el primero | El inicio como casa (`home-5-line`) con `ariaLabel`. | según la guía del DS (ítems con ícono); el cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `active` | No hace falta: el último ya es el activo. Solo si la página actual no va al final (raro). | según el código |
 
 Usos de hoy que rompen las reglas: **0** (no se usa).
@@ -59,7 +59,7 @@ Alto fijo de **20 px** (texto 14, ícono 20), sin `size`. **No tiene tamaño par
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| ruta de 3+ niveles | no se usa: flecha de volver | `sui-breadcrumbs` | propuesta, falta aprobación |
+| ruta de 3+ niveles | no se usa: flecha de volver | `sui-breadcrumbs` | canon (aprobado por el dueño, 05-10-2026, bloque B7) |
 
 ```html
 @if (!bp.isMobile()) {
@@ -67,6 +67,16 @@ Alto fijo de **20 px** (texto 14, ícono 20), sin `size`. **No tiene tamaño par
 }
 ```
 
+### Por dispositivo (D16)
+
+No aplica: no tiene `size` y sus migas miden 20 px fijos (texto 14, ícono 20) en todo dispositivo;
+lo que cambia por dispositivo es si se muestra, no su tamaño. En el celular chico y el celular no se
+usa (flecha de volver); en la computadora y el ultrawide va tal cual. En la tablet táctil con 768 px o
+más `bp.isMobile()` es falso y la ruta se muestra, con migas de 20 px que no llegan al piso de 44 de
+lo táctil: no hay size que lo arregle y no está decidido si se oculta también ahí.
+
+En master-pedidos: sin `[size]`; se muestra con `@if (!bp.isMobile())`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -111,6 +121,44 @@ type SuiBreadcrumbDivider = 'arrow' | 'slash' | 'dot';
 - El host dice `aria-label="Ruta de navegación"` (hasta el 03-10-2026, «Breadcrumb») y no se puede cambiar.
 - `SuiBreadcrumbEntry` (los datos) no es `SuiBreadcrumbItem` (el componente de cada miga).
 
+## Bien y mal
+
+**Ruta en el celular**
+
+```html
+<!-- ❌ mal: en 390 px la fila se corta y compite con el título -->
+<sui-breadcrumbs [items]="ruta()" />
+```
+
+```html
+<!-- ✅ bien -->
+@if (!bp.isMobile()) { <sui-breadcrumbs [items]="ruta()" /> }
+```
+
+**El nombre del nivel**
+
+```html
+<!-- ❌ mal: un id nunca es el nombre de nada -->
+<sui-breadcrumbs [items]="[{ label: 'Productos', href: '/empresa/productos' }, { label: producto.id }]" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-breadcrumbs [items]="[{ label: 'Productos', href: '/empresa/productos' }, { label: producto.name }]" />
+```
+
+**Navegar dos veces**
+
+```html
+<!-- ❌ mal: los ítems con `href` ya navegan; `navigate` sale igual y vuelve a navegar -->
+<sui-breadcrumbs [items]="ruta()" (navigate)="router.navigateByUrl($event.href ?? '')" />
+```
+
+```html
+<!-- ✅ bien: con `href`, sin `(navigate)` -->
+<sui-breadcrumbs [items]="ruta()" />
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-button/README.md

@@ -98,13 +98,14 @@ Uso medido el 04-10-2026: 123 `large`, 93 `small`, 58 `medium` (5 por default),
 | size | cuándo | fuente |
 |---|---|---|
 | `large` (48 px) | Footers de modal y CTA táctiles en mobile. | ya es canon (default de sui-modal-footer); extensión de SUI, la guía no lo tiene |
-| `medium` (40 px, default) | CTA en desktop y formularios. | default según la guía del DS; el «cuándo» es propuesta |
-| `small` (36) / `xsmall` (32) | Acciones dentro de cards, filas y cabeceras de sección. | escala según la guía del DS; el «cuándo» es propuesta |
-| `2xsmall` (28) | Acciones de ícono en tablas y filas densas. Si el espacio es de verdad chico, mirar antes `sui-compact-button`. | escala según la guía del DS; el «cuándo» es propuesta |
+| `medium` (40 px, default) | Todo botón en la computadora: CTA, formularios, acciones de cards, filas, cabeceras y tablas. En el celular chico (< 380 px), a la vista, con el área de 44. La tablet va como el celular. | default según la guía del DS; el «cuándo»: canon (aprobado por el dueño, 05-10-2026, bloque B1) y, para filas, cabeceras y tablas, canon (dueño, 05-10-2026, D16); solo en web (en el teléfono manda el piso táctil de 44) |
+| `small` (36) / `xsmall` (32) | No usar: son chicos. Las acciones de cards, filas y cabeceras van en `medium` en web y `large` en el teléfono. | escala según la guía del DS; no usarlos: canon (dueño, 05-10-2026, D16), reemplaza el «cuándo» del bloque B13 |
+| `2xsmall` (28) | No usar: es chico. Las acciones de ícono en tablas van en `medium` `onlyIcon`; si de verdad no entra, `sui-compact-button`. | escala según la guía del DS; no usarlo: canon (dueño, 05-10-2026, D16), reemplaza el «cuándo» del bloque B13 |
 | `xlarge` (52) | Extensión de SUI. Sin uso hoy. | canon (aprobado por el dueño, 03-10-2026) |
 
-En la app el patrón responsive ya es `[size]="bp.isMobile() ? 'large' : 'medium'"` (o
-`bp.controlSize()`).
+En la app el patrón responsive es `[size]="bp.sizeControl()"`: `large` en el celular y la tablet
+táctil, `medium` en la computadora (D16, dueño 05-10-2026). **No uses `bp.controlSize()` en un
+botón**: es el de checkbox/radio/switch y da `large` en la computadora. Ver «Por dispositivo (D16)».
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -127,20 +128,26 @@ flujo nuevo cae en la columna de la derecha, se usa (aprobado por el dueño, 03-
 ## Tamaño en mobile y en web
 
 En mobile se toca con el dedo: **44 px como mínimo** (piso táctil, canon del dueño 04-10-2026) y 48
-en la acción principal. En web, 28–40.
+en la acción principal. En la computadora, `medium` (40); la tablet va como el celular; en el celular chico
+(< 380 px), `medium` a la vista con el área de 44. Nada en `small`, `xsmall` ni `2xsmall` (canon, dueño,
+05-10-2026, D16).
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | acción principal de la pantalla o footer de modal | `large` (48) | `medium` (40) | canon (aprobado por el dueño, 03-10-2026) (footer de modal siempre `large`) |
-| acción dentro de una card o una fila | `large` (48) | `small` (36) / `xsmall` (32) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono — antes `medium` (40), que no llega |
-| acción en una tabla densa | — (no hay tablas en mobile) | `2xsmall` (28) | canon (aprobado por el dueño, 03-10-2026) |
+| acción dentro de una card o una fila | `large` (48) | `medium` (40) | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono — antes `medium` (40), que no llega · web: canon (dueño, 05-10-2026, D16), antes `small` / `xsmall` |
+| acción en una tabla | — (no hay tablas en mobile) | `medium` (40) | canon (dueño, 05-10-2026, D16), antes `2xsmall` (03-10-2026) |
 | CTA de landing | `xlarge` (52) | `large` (48) | propuesta, falta aprobación |
 
-Patrón (`bp` = `BreakpointsService`, mobile hasta 767 px). Medido el 04-10-2026: 9 `sui-button` con este
-par exacto y 30 con algún tamaño por `bp`; en toda la app hay 142 `[size]` con este mismo par:
+Patrón (`bp` = `BreakpointsService`). Medido el 06-10-2026 en `master-pedidos/src/app`, sin
+prototipos ni vitrinas: 399 de 412 `sui-button` ya van con `bp.sizeControl()`; quedan 5 con
+`sizeAccionesCard()` de `master-drivers.ts:243` (`bp.isMobile()` solo: deja la tablet en `medium`),
+1 con `bp.controlSize()` (`checkout.html:392`), 1 en `small` (`notifications.html:50`), 2 sin
+`size` y 4 en `large` fijo (2 en el footer de `copy-text-dialog`, donde va bien; `cart.html:190` y
+`master-orders.html:662` no son footer de modal y en la computadora irían en `medium`):
 
 ```html
-<sui-button [size]="bp.isMobile() ? 'large' : 'medium'" …/>
+<sui-button [size]="bp.sizeControl()" …/>
 ```
 
 ### Piso táctil de 44 en el teléfono (canon, dueño 04-10-2026)
@@ -179,6 +186,23 @@ Vale para todos los componentes que tienen `size` `large` / `xlarge`:
 En large y xlarge el texto sube a 16 px (regla del 03-10-2026): el botón ya usa Label/Medium 16/24
 en esos dos tamaños.
 
+### Por dispositivo (D16)
+
+Fila `button` 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) | |
+| 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, filas y cabeceras; `small`, `xsmall` y `2xsmall` no se usan |
+
+Footer de modal: `large` en todos (D2). Ultrawide (≥ 1920 px): igual que la computadora, `medium`;
+el espacio extra va a ancho y columnas, no a botones más grandes.
+
+En master-pedidos: `[size]="bp.sizeControl()"`.
+
 ## API
 
 <!-- api:inicio -->
@@ -234,6 +258,46 @@ interface SuiFooterButtonConfig {
   disabled propio desde afuera.
 - Ya trae el arreglo de iOS para el `:active` pegado (`touchstart`/`touchend`): no lo agregues.
 
+## Bien y mal
+
+**Botón de ícono en una cabecera**
+
+```html
+<!-- ❌ mal: small (36) no llega a 44 en el teléfono y en la computadora va medium (pages/notifications/notifications.html:50) -->
+<sui-button variant="stroke" color="neutral" size="small" [onlyIcon]="true" leftIcon="check-double-line"
+            aria-label="Marcar todas como leídas" (click)="markAllAsRead()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-button variant="stroke" color="neutral" [size]="bp.sizeControl()" [onlyIcon]="true" leftIcon="check-double-line"
+            aria-label="Marcar todas como leídas" (click)="markAllAsRead()" />
+```
+
+**El helper equivocado para el tamaño**
+
+```html
+<!-- ❌ mal: controlSize() es de checkbox/radio/switch y da large en la computadora (pages/customer/checkout/checkout.html:392) -->
+<sui-button [size]="bp.controlSize()" (click)="applyCoupon()">Aplicar</sui-button>
+```
+
+```html
+<!-- ✅ bien: large en celular y tablet táctil, medium en la computadora -->
+<sui-button [size]="bp.sizeControl()" (click)="applyCoupon()">Aplicar</sui-button>
+```
+
+**El botón que abre una confirmación de borrar**
+
+```html
+<!-- ❌ mal: filled error es para confirmar; este solo abre el modal (pages/empresa/about/about.html:46, igual en repartidor/about) -->
+<sui-button variant="filled" color="error" [size]="bp.sizeControl()" (click)="openDeleteModal()">Eliminar mi cuenta</sui-button>
+```
+
+```html
+<!-- ✅ bien: stroke error abre; el filled error queda para el «Sí, eliminar» del modal -->
+<sui-button variant="stroke" color="error" [size]="bp.sizeControl()" (click)="openDeleteModal()">Eliminar mi cuenta</sui-button>
+```
+
 ## Ejemplo
 
 ```html
@@ -247,6 +311,6 @@ interface SuiFooterButtonConfig {
 </sui-button>
 
 <!-- Solo ícono -->
-<sui-button variant="ghost" color="neutral" size="2xsmall" leftIcon="pencil-line" [onlyIcon]="true"
+<sui-button variant="ghost" color="neutral" [size]="bp.sizeControl()" leftIcon="pencil-line" [onlyIcon]="true"
             aria-label="Editar" (click)="editar()" />
 ```