@ajuarezso/sui-design-system 0.25.0 → 0.25.2

package/docs/sui-input/README.md

@@ -35,11 +35,14 @@ Regla corta: **una línea → input · varias → textarea · de una lista → s
 > fecha y contador) sin do/don't. Lo marcado «según la guía del DS» sale de esos ejemplos; el
 > resto es canon (CLAUDE.md, CANON-SUI o aprobado por el dueño el 05-10-2026); lo que sigue en **propuesta** espera decisión.
 >
-> Uso medido el 04-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`, más
-> `master-ejercicios`): **195 usos en 61 archivos**. Tipos: 42 `text`, 36 sin `type` (`text`),
-> 34 `amount`, 21 `search`, 21 `number`, 18 `tel`, 10 `email`, 7 `date`, 3 `password-toggle`,
-> 2 `url`, 1 `datetime-local`. Tamaños: 88 `bp.isMobile() ? 'large' : 'medium'`, 77 sin `size`
-> (`medium`), 18 `large`, 3 `xlarge`, 3 `medium`, 1 `small`, 3 `bp.controlSize()`, 2 otros dinámicos.
+> Uso medido el 06-10-2026 en `master-pedidos/src/app` @ `9f0e54c3` (misma exclusión que
+> `sui-badge`, más `master-ejercicios`): **200 usos en 66 archivos** — 196 en 63 `.html` y 4 en
+> templates inline de 3 `.ts` (`components/option-image/option-image.ts`, `pages/dx/modal-test/modal-test.ts`,
+> `pages/dx/sandbox/sandbox.ts`). Tipos: 45 `text`, 35 sin `type` (`text`), 35 `amount`,
+> 22 `search`, 22 `tel`, 18 `number`, 10 `email`, 7 `date`, 3 `password-toggle`, 2 `url`,
+> 1 `datetime-local`. Tamaños, tras la migración a D16: 195 `bp.sizeControl()` (191 en `.html`
+> y los 4 inline), 3 `xlarge` (los buscadores principales del cliente), 1 `bp.controlSize()` y
+> 1 dinámico propio (`components/product-detail-view/product-detail-view.html:223`). Ninguno sin `size`.
 
 ### `type` — qué dato es
 
@@ -116,21 +119,39 @@ teléfono también va en 16 en todos los tamaños (antes se quedaba en 14 al lad
 |---|---|---|---|
 | campo de formulario | `large` (48), igual que el botón del footer | `medium` (40) | mobile `large`: canon (decisión del dueño 04-10-2026, piso táctil 44: `medium` 40 no llega y `large` 48 es el primer size que sí) · web `medium`: canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 | buscador principal del cliente (home, carta, rubro) | `xlarge` (52) + `fullRadius` | `xlarge` + `fullRadius` | canon (aprobado por el dueño, 05-10-2026, bloque B1) (ya es práctica en las 3 pantallas) |
-| buscador o filtro de una lista del panel | `large` (48) | `medium` (40) | mobile `large`: canon (decisión del dueño 04-10-2026, piso táctil 44: `large` 48 es el primer size que llega) · web `medium`: canon (dueño, 05-10-2026, D16) (hoy `pages/orders/orders.html:72` va en `small`: se migra) |
+| buscador o filtro de una lista del panel | `large` (48) | `medium` (40) | mobile `large`: canon (decisión del dueño 04-10-2026, piso táctil 44: `large` 48 es el primer size que llega) · web `medium`: canon (dueño, 05-10-2026, D16) (`pages/orders/orders.html:73` ya va con `bp.sizeControl()`; medido el 06-10-2026) |
 | campo dentro de una tabla o fila densa | no aplica | `medium` (40) | canon (dueño, 05-10-2026, D16): nada en `xsmall` (la guía del DS lo usa ahí) |
 
 ```html
-<sui-input [size]="bp.isMobile() ? 'large' : 'medium'" label="Teléfono" type="tel" … />
+<sui-input [size]="bp.sizeControl()" label="Teléfono" type="tel" … />
 <!-- bp = BreakpointsService de la app -->
 ```
 
-No uses `bp.controlSize()` en campos: da `xlarge` (52) en mobile, más alto que el botón `large`
-del footer (3 usos hoy: `pages/customer/checkout/checkout.html:269`, `:384`,
-`pages/super-admin/master-sonidos-push/master-sonidos-push.html:43`). El texto sube solo a 16 px
-en mobile (evita el zoom de iOS): no hace falta pedirlo.
+No uses `bp.controlSize()` en campos: es el de checkbox/radio/switch, da `xlarge` (52) en mobile,
+más alto que el botón `large` del footer, y `large` en la computadora (1 uso hoy:
+`pages/customer/checkout/checkout.html:385`, el cupón). El texto sube solo a 16 px en mobile (evita
+el zoom de iOS): no hace falta pedirlo.
 
-Hoy: **88 usos** ya van con `bp.isMobile() ? 'large' : 'medium'`; **77 sin `size`** quedan en 40 px
-también en el teléfono (no alinea con el botón `large`).
+Hoy (medido el 06-10-2026): **195 de los 200 usos** ya van con `bp.sizeControl()` (191 en `.html` y
+4 en templates inline de `.ts`); quedan los 3 buscadores principales en `xlarge` fijo (van bien), el cupón con `bp.controlSize()` y un dinámico propio.
+
+### Por dispositivo (D16)
+
+Fila `input` de la tabla D16 (dueño, 05-10-2026). Se toca, así que va por tipo de puntero además
+del ancho, igual que `sui-button`: campo y botón de al lado miden lo mismo en cada dispositivo.
+
+| 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) | mismo alto que el botón `large` del footer |
+| tablet táctil (`pointer: coarse`) | `large` (48) | también se toca con el dedo; `bp.isMobile()` la dejaba en `medium` |
+| computadora (`pointer: fine`) | `medium` (40) | también filtros y campos dentro de tablas; `small` y `xsmall` no se usan |
+
+Buscador principal del cliente (home, carta, rubro): `xlarge` (52) + `fullRadius` en todos los
+dispositivos (B1). Ultrawide (≥ 1920 px): igual que la computadora, `medium`; el espacio extra va a
+ancho y columnas, no a campos más altos.
+
+En master-pedidos: `[size]="bp.sizeControl()"` · buscador principal: `size="xlarge"` + `[fullRadius]="true"`.
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -221,13 +242,55 @@ proyectados con `leadingControl` / `trailingControl`).
 - En el teléfono la X de limpiar y el ojo se ven de 12-20 px pero se tocan en 44 × 44 (área
   invisible, 04-10-2026).
 
+## Bien y mal
+
+Tamaño del campo del cupón
+
+```html
+<!-- ❌ mal: bp.controlSize() es de checkbox/radio/switch: xlarge en el celular y large en la computadora (pages/customer/checkout/checkout.html:385) -->
+<sui-input [size]="bp.controlSize()" placeholder="Código de descuento" [(value)]="cupon" />
+```
+
+```html
+<!-- ✅ bien (y el botón «Aplicar» de al lado, también con bp.sizeControl()) -->
+<sui-input [size]="bp.sizeControl()" placeholder="Código de descuento" [(value)]="cupon" />
+```
+
+DNI con el label afuera
+
+```html
+<!-- ❌ mal: el label suelto no conoce el id del campo (su for no apunta a nada) y el DNI no es un número (pages/driver-onboarding/step-info/step-info.html:56 y :60) -->
+<sui-form-label label="DNI" [required]="true" for="ob-dni" />
+<sui-input [size]="bp.sizeControl()" type="number" inputmode="numeric" placeholder="74523618"
+           [maxlength]="8" [(value)]="dni" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-input label="DNI" [required]="true" type="text" inputmode="numeric" placeholder="74523618"
+           [maxlength]="8" hint="8 dígitos" [size]="bp.sizeControl()" [(value)]="dni" />
+```
+
+Teléfono con espacios en el placeholder
+
+```html
+<!-- ❌ mal: con [maxlength]="9", quien copia los espacios del placeholder llega al tope antes del último dígito (pages/mi-negocio/mi-negocio.html:689) -->
+<sui-input [size]="bp.sizeControl()" type="tel" placeholder="987 654 321" [maxlength]="9" [(value)]="telefono" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-input label="Teléfono" type="tel" [maxlength]="9" autocomplete="tel" placeholder="987654321"
+           [size]="bp.sizeControl()" [(value)]="telefono" />
+```
+
 ## Ejemplo
 
 ```html
 <!-- Campo de formulario -->
 <sui-input label="Teléfono" [required]="true" type="tel" [maxlength]="9" autocomplete="tel"
            placeholder="987654321" hint="9 dígitos, empezando con 9"
-           [size]="bp.isMobile() ? 'large' : 'medium'" [(value)]="telefono" />
+           [size]="bp.sizeControl()" [(value)]="telefono" />
 
 <!-- Monto -->
 <sui-input label="Monto de la compra" type="amount" prefix="S/" placeholder="0.00" [(value)]="monto" />

package/docs/sui-integration-switch/README.md

@@ -74,7 +74,7 @@ Regla corta: **servicio externo que se prende y se configura → integration-swi
 | layout | `vertical` | `horizontal` |
 
 ```html
-<sui-integration-switch [size]="bp.isMobile() ? 'large' : 'medium'"
+<sui-integration-switch [size]="bp.sizeControl()"
                         [type]="bp.isMobile() ? 'vertical' : 'horizontal'" … />
 ```
 
@@ -82,11 +82,33 @@ Regla corta: **servicio externo que se prende y se configura → integration-swi
 y a diferencia de `sui-switch-card`, tocar la tarjeta no prende nada: solo responde el
 interruptor. Para algo que se prende y apaga en el teléfono, `sui-switch-card` es la salida.
 
+### Por dispositivo (D16)
+
+No está en la tabla D16 por componente: va como **lo que se toca**, porque el `size` solo agranda
+«Administrar», que es un botón. Fuente: D16, dueño 05-10-2026.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `large` (44) | D16 pide `medium` con área tocable de 44; mientras el DS no estire el área de los `medium`, va `large` (interino) |
+| celular (380–767) | `large` (44) | |
+| tablet táctil (`pointer: coarse`) | `large` (44) | también se toca con el dedo: Apple pide 44 pt en el iPad |
+| computadora (`pointer: fine`) | `medium` (38) | nunca más chico |
+
+En el ultrawide, igual que en la computadora: el espacio extra va a más columnas, no a un
+«Administrar» más grande.
+
+D16 no alcanza al interruptor: es `sui-switch` `medium` fijo dentro del componente, aunque los
+switches sueltos vayan en `xlarge`/`large`. El badge interno arranca en `small`: pásalo como objeto
+con `size: bp.sizeBadge()`.
+
+En master-pedidos: `[size]="bp.sizeControl()"`. El `type` sigue por ancho
+(`bp.isMobile() ? 'vertical' : 'horizontal'`): es layout, no tamaño.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
 |---|---|---|
-| todo el componente (0 usos) | no hay integraciones; además le falta tamaño para mobile | conectar Culqi / Izipay o WhatsApp Business desde el panel del local (web primero) |
+| todo el componente (0 usos) | no hay integraciones (el tamaño para mobile ya existe: `large`, 04-10-2026) | conectar Culqi / Izipay o WhatsApp Business desde el panel del local (web primero) |
 | `vertical` · `list` | sin borde y en columna, el bloque se pierde | casi nunca: una sola integración destacada en una pantalla vacía |
 
 ## API
@@ -135,6 +157,51 @@ Slot: `[sui-integration-brand]` (reemplaza al logo). Implementa `ControlValueAcc
   El interruptor toma su nombre de ese título (y su descripción de `description`) con
   `aria-labelledby` (revisión 04-10-2026); antes el lector decía solo «interruptor».
 
+## Bien y mal
+
+La app no tiene usos todavía: los pares salen de «Cuándo usarlo» y de «Trampas».
+
+Un ajuste propio de la app
+
+```html
+<!-- ❌ mal: avisar de pedidos nuevos es un ajuste de la app, no un servicio externo -->
+<sui-integration-switch title="Notificaciones" brandIcon="notification-3-line"
+  [manage]="false" [active]="avisos()" (activeChange)="avisos.set($event)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-switch-card label="Notificaciones" [size]="bp.controlSize()"
+  [checked]="avisos()" (checkedChange)="avisos.set($event)" />
+```
+
+Servicio que solo se prende
+
+```html
+<!-- ❌ mal: manage arranca en true y pinta «Administrar» aunque no haya nada que configurar -->
+<sui-integration-switch title="Mapbox" brandIcon="map-2-line" [size]="bp.sizeControl()"
+  [active]="mapbox()" (activeChange)="mapbox.set($event)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-integration-switch title="Mapbox" brandIcon="map-2-line" [manage]="false"
+  [active]="mapbox()" (activeChange)="mapbox.set($event)" />
+```
+
+Integración nueva
+
+```html
+<!-- ❌ mal: el string sale naranja light y en small, que D16 no usa -->
+<sui-integration-switch title="Culqi" brandIcon="bank-card-line" badge="Nuevo" … />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-integration-switch title="Culqi" brandIcon="bank-card-line" [size]="bp.sizeControl()"
+  [badge]="{ label: 'Nuevo', color: 'purple', size: bp.sizeBadge() }" … />
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-kbd/README.md

@@ -46,20 +46,44 @@ Usos de hoy que rompen la regla: **0**.
 
 ## Tamaño en mobile y en web
 
-No es táctil: es una tecla dibujada. En mobile no hay teclado físico, así que no se muestra; en
-web tiene un solo tamaño. Donde la pantalla existe en los dos (panel del local, super admin) se
-oculta con el servicio de breakpoints de la app (`bp`, en `services/breakpoints.service.ts`). Todo
-es **canon (aprobado por el dueño, 05-10-2026, bloque B7)**.
+No es táctil: es una tecla dibujada. Donde se usa con el dedo no hay teclado físico, así que no se
+muestra; con mouse tiene un solo tamaño. Donde la pantalla existe en los dos (panel del local,
+super admin) se oculta con el servicio de breakpoints de la app (`bp`, en
+`services/breakpoints.service.ts`). Que no vaya en mobile es **canon (aprobado por el dueño,
+05-10-2026, bloque B7)**; que la tablet táctil cuente como mobile sale de D16 (ver abajo).
 
-| uso | mobile | web |
+| uso | mobile (celular y tablet táctil) | web (computadora) |
 |---|---|---|
 | atajo de teclado | no se muestra | tamaño único (20 px de alto) |
 
 ```html
-@if (!bp.isMobile()) { <sui-kbd>⌘K</sui-kbd> }
+@if (!bp.tactil()) { <sui-kbd>⌘K</sui-kbd> }
 ```
 
-No tiene tamaños: en mobile no hay teclado físico, así que no se pinta.
+No tiene tamaños: con el dedo no hay teclas, así que no se pinta.
+
+### Por dispositivo (D16)
+
+El tamaño no aplica: `sui-kbd` no tiene `size` (20 px fijo). Lo que depende del dispositivo es
+**si se muestra**, y eso no va por ancho sino por puntero, como D16: el iPad (768–1024 px,
+`pointer: coarse`) da `bp.isMobile()` falso, y con `!bp.isMobile()` el ⌘K saldría en una pantalla
+sin teclas.
+
+| dispositivo | se muestra | nota |
+|---|---|---|
+| celular chico (< 380) | no | con el dedo no hay teclas |
+| celular (380–767) | no | |
+| tablet táctil (`pointer: coarse`) | no | misma razón que el celular: se usa con el dedo |
+| computadora (`pointer: fine`) | sí, 20 px | |
+| ultrawide | sí, 20 px | igual que la computadora |
+
+**Pendiente**: el iPad con teclado físico. Con un teclado conectado los atajos sí funcionan, pero
+la pantalla sigue siendo táctil y ni el ancho ni el puntero dicen si hay un teclado conectado;
+falta que el dueño decida si se muestra ahí. Hasta entonces va oculto, que es el lado seguro: un atajo que falta no confunde, uno
+que no se puede apretar sí.
+
+En master-pedidos: `@if (!bp.tactil()) { <sui-kbd>⌘K</sui-kbd> }` (`tactil` = celular por ancho
+o cualquier pantalla `pointer: coarse`). No uses `!bp.isMobile()`: deja pasar la tablet.
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -88,6 +112,46 @@ Slot: `<ng-content>` (el texto o el `sui-icon`).
 - El ícono de adentro va a 16 px y toma `text-sub-600` aunque le pongas otro color.
 - Mide 20 px de alto fijo: no crece con el texto de al lado.
 
+## Bien y mal
+
+La app no lo usa directo: los pares salen de «Cuándo usarlo» y de «Trampas».
+
+Flecha al pie de un menú
+
+```html
+<!-- ❌ mal: subtle no se elige solo al poner un ícono; sale con el fondo blanco del texto -->
+<sui-kbd><sui-icon name="arrow-up-line" [size]="16" /></sui-kbd>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-kbd variant="subtle"><sui-icon name="arrow-up-line" [size]="16" /></sui-kbd>
+```
+
+Atajo en una pantalla que también se ve en el celular
+
+```html
+<!-- ❌ mal: con el dedo no hay teclas; con !bp.isMobile() el ⌘K igual sale en el iPad (768–1024, táctil) -->
+@if (!bp.isMobile()) { <sui-kbd>⌘K</sui-kbd> }
+```
+
+```html
+<!-- ✅ bien -->
+@if (!bp.tactil()) { <sui-kbd>⌘K</sui-kbd> }
+```
+
+Una etiqueta que no es una tecla
+
+```html
+<!-- ❌ mal: no es un atajo; además sale en MAYÚSCULAS -->
+<sui-kbd>Nuevo</sui-kbd>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-badge color="purple" [size]="bp.sizeBadge()">Nuevo</sui-badge>
+```
+
 ## Ejemplo
 
 ```html

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

@@ -74,11 +74,10 @@ Se encontraron buscando reglas `*icon*` con `border-radius: 50%`, fondo y 32–6
 
 ## 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. No se toca, así que la tablet va
-con el valor de web, y el celular chico (< 380 px) también (D16).
+En mobile se lee con el celular en la mano, así que va más grande; en web, más chico. Se elige
+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): no se toca, así que la tablet
+va con el valor de web, y el celular chico (< 380 px) también (D16, dueño 05-10-2026).
 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.
 
@@ -89,9 +88,28 @@ se migra todo ahora, no solo al tocar cada pantalla.
 | resultado de un modal | `64` | `56` |
 
 ```html
-<sui-key-icon name="lock-line" styleVariant="lighter" color="red" [size]="bp.isMobile() ? 64 : 56" />
+<sui-key-icon name="lock-line" styleVariant="lighter" color="red" [size]="bp.celular() ? 64 : 56" />
 ```
 
+### Por dispositivo (D16)
+
+La key-icon no se toca: sube un paso **solo en el celular de 380 px o más**. Fuente: D16, dueño
+05-10-2026 (P1 b).
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | valor «web» (`32` fila · `40` card · `56` modal) | no se toca: no sube aunque sea un celular |
+| celular (380–767) | valor «mobile» (`40` fila · `48` card · `64` modal) | un paso más que en la computadora |
+| tablet táctil (`pointer: coarse`) | valor «web» (`32` · `40` · `56`) | no se toca: el puntero no cambia nada |
+| computadora (`pointer: fine`) | valor «web» (`32` · `40` · `56`) | |
+
+En el ultrawide, igual que en la computadora: el espacio extra va a más columnas, no a círculos
+más grandes.
+
+En master-pedidos no hay helper: `[size]="bp.celular() ? 40 : 32"` (fila),
+`[size]="bp.celular() ? 48 : 40"` (card) o `[size]="bp.celular() ? 64 : 56"` (resultado de un
+modal). 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 |
@@ -121,6 +139,47 @@ Outputs: ninguno.
 - **El default es `stroke` `gray`**: si quieres el círculo de color, pide `lighter` explícito.
 - `name` va sin `ri-`, como en `sui-icon`.
 
+## Bien y mal
+
+Resultado de un modal: cuenta bloqueada
+
+```html
+<!-- ❌ mal: círculo hecho a mano, 64 fijo y un ícono de 30 fuera de la escala (components/cuenta-bloqueada/cuenta-bloqueada.html:4) -->
+<span class="cb__icono"><sui-icon name="lock-line" [size]="30" /></span>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-key-icon name="lock-line" styleVariant="lighter" color="red" [size]="bp.celular() ? 64 : 56" />
+```
+
+Resultado de un modal: calificación enviada
+
+```html
+<!-- ❌ mal: el mismo círculo a mano, con los colores del estado en el SCSS (components/driver-rate-modal/driver-rate-modal.html:17) -->
+<div class="drm__exito-icono" [class.drm__exito-icono--tibio]="!fueBueno()" aria-hidden="true">
+  <sui-icon [name]="fueBueno() ? 'check-line' : 'heart-3-line'" [size]="32" />
+</div>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-key-icon [name]="fueBueno() ? 'check-line' : 'heart-3-line'" styleVariant="lighter"
+  [color]="fueBueno() ? 'green' : 'blue'" [size]="bp.celular() ? 64 : 56" />
+```
+
+Tamaño por dispositivo
+
+```html
+<!-- ❌ mal: isMobile incluye el celular chico, que va con el valor de web (D16) -->
+<sui-key-icon name="store-2-line" [size]="bp.isMobile() ? 40 : 32" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-key-icon name="store-2-line" [size]="bp.celular() ? 40 : 32" />
+```
+
 ## Ejemplo
 
 ```html

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

@@ -60,11 +60,11 @@ Es el reemplazo del `sui-button` `ghost` `primary`.
 **Usos de hoy que rompen la regla:**
 
 - **4 `error` que abren una destructiva grande → `sui-button` `stroke` `error`:**
-  `pages/super-admin/master-orders/master-orders.html:425` («Cancelar pedido»),
+  `pages/super-admin/master-orders/master-orders.html:467` («Cancelar pedido»),
   `pages/orders/orders.html:233` («Rechazar pedido»), `pages/central/central-gastos/central-gastos.html:101`
-  («Anular gasto») y `pages/driver/driver-order-detail/driver-order-detail.html:745` («Cancelar» el
+  («Anular gasto») y `pages/driver/driver-order-detail/driver-order-detail.html:774` («Cancelar» el
   pedido, en `large`; nuevo, medido el 04-10-2026).
-- A discutir: `pages/super-admin/master-orders/master-orders.html:430` («Liberar» en `gray`): es una
+- A discutir: `pages/super-admin/master-orders/master-orders.html:472` («Liberar» en `gray`): es una
   acción de operación, no una salida de baja jerarquía.
 
 ### `size`
@@ -98,7 +98,7 @@ Los íconos son nombres RemixIcon sin el prefijo `ri-`. Miden 20 px en `large` y
 |---|---|---|
 | `true` | La acción existe pero ahora no se puede: mientras se guarda, mientras se procesa otra acción. Mejor que esconderla si la persona la espera en ese lugar. | cómo se ve: según la guía del DS · cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 
-Ejemplos: `components/add-product-modal/add-product-modal.html:339` («Vista previa» mientras guarda),
+Ejemplos: `components/add-product-modal/add-product-modal.html:341` («Vista previa» mientras guarda),
 `pages/orders/orders.html:233`.
 
 ### `href`, `target`, `rel`, `type`, `ariaLabel`
@@ -112,13 +112,13 @@ Ejemplos: `components/add-product-modal/add-product-modal.html:339` («Vista pre
 
 ## Tamaño en mobile y en web
 
-En mobile se toca con el dedo: el área táctil tiene que medir **44 px o más**. En la tablet
-(`pointer: coarse`) va igual que en el celular, porque también se toca; en la computadora
-(`pointer: fine`), `medium`; en el celular chico (< 380 px), `medium` a la vista sin bajar el área de 44.
+En mobile se toca con el dedo: el área táctil tiene que medir **44 px o más**. En el celular y en
+la tablet (`pointer: coarse`) el size está **pendiente (P8)**, porque ningún size del link llega a
+44; en la computadora (`pointer: fine`), `medium`; en el celular chico (< 380 px), `medium`.
 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]`
+que es la propuesta sin aprobar de P8 (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.
 
 | size | alto | texto | ícono |
@@ -146,10 +146,29 @@ táctil la pone el contenedor: la fila o el bloque donde vive tiene que medir 44
 dejar aire alrededor del link. `small` (16) no va en ningún lado (D16, 05-10-2026). Medido el 04-10-2026: los 4 de
 repartidor y cliente ya usan `[size]="bp.isMobile() ? 'medium' : 'small'"`
 (`pages/driver/driver-profile/driver-profile.html:258` y `:264`,
-`pages/driver/driver-dashboard/driver-dashboard.html:1092`,
+`pages/driver/driver-dashboard/driver-dashboard.html:1210`,
 `pages/customer/order-history/order-history.html:412`). Quedan 2 `small` fijos, los dos del panel
-de la empresa: `pages/mi-negocio/mi-negocio.html:474` y
-`components/add-product-modal/add-product-modal.html:339`.
+de la empresa: `pages/mi-negocio/mi-negocio.html:473` y
+`components/add-product-modal/add-product-modal.html:341`.
+
+### Por dispositivo (D16)
+
+Fila `link-button` de la tabla D16 (dueño, 05-10-2026). Se toca, pero ningún size llega a 44, así
+que el tamaño en las pantallas táctiles espera P8.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `medium` | |
+| celular (380–767) | pendiente (P8) | a) el contenedor (fila o card) llega a 44 y el link va `medium` (recomendada) · b) `large` (24) por legibilidad |
+| tablet táctil (`pointer: coarse`) | pendiente (P8) | la misma pregunta: también se toca con el dedo |
+| computadora (`pointer: fine`) | `medium` | también en filas y cabeceras; `small` no se usa |
+
+En el ultrawide, igual que en la computadora. Dentro de un párrafo, el size del texto que lo rodea.
+
+En master-pedidos no hay helper hasta que se decida P8: `size="medium"` en la computadora y en el
+celular chico. No uses `bp.sizeControl()` (sería elegir la b) ni bajes a `small`. El
+`[size]="bp.isMobile() ? 'large' : 'medium'"` que hoy lleva el link suelto es la propuesta sin
+aprobar, y además deja el celular chico en `large`.
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -186,9 +205,10 @@ Slots: `<ng-content>` (el texto).
 ## Trampas
 
 - **El output es `(clicked)`**, no `(click)` como en `sui-button`. `(click)` sobre el host igual
-  funciona porque el clic burbujea, pero hoy hay 6 usos así (`components/subscription-banner/subscription-banner.html:10`,
+  funciona porque el clic burbujea, pero hoy hay 8 usos así (`components/subscription-banner/subscription-banner.html:10`,
   `pages/super-admin/master-approvals/master-approvals.html:89`, `pages/central/central-gastos/central-gastos.html:101`,
-  `pages/account-suspended/account-suspended.html:66` y `:70`, `pages/customer/viaje/viaje.html:216`).
+  `pages/account-suspended/account-suspended.html:66` y `:70`, `pages/customer/viaje/viaje.html:211`,
+  `pages/super-admin/master-solicitudes/master-solicitudes.html:47` y `:50`; medido el 06-10-2026).
   Usa `(clicked)`, que ya respeta `disabled`.
 - **`rel` arranca en `null`**, a diferencia de compact, fancy y social, que traen
   `'noopener noreferrer'`. Con `target="_blank"` hay que ponerlo a mano.
@@ -204,6 +224,52 @@ Slots: `<ng-content>` (el texto).
   toast local). No es la del paquete: un arreglo en el DS no le llega.
 - Ya trae el arreglo de iOS para el `:active` pegado: no lo agregues.
 
+## Bien y mal
+
+Cancelar un pedido
+
+```html
+<!-- ❌ mal: error en link es para quitar algo menor; cancelar el pedido es una destructiva grande (pages/driver/driver-order-detail/driver-order-detail.html:774) -->
+<sui-link-button variant="error" size="large" (clicked)="showCancelModal.set(true)">
+  Cancelar {{ comoSeLlama }}
+</sui-link-button>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-button variant="stroke" color="error" [size]="bp.sizeControl()" (click)="showCancelModal.set(true)">
+  Cancelar {{ comoSeLlama }}
+</sui-button>
+```
+
+Link al pie de una sección del panel
+
+```html
+<!-- ❌ mal: small no se usa en ningún lado (D16); igual order-history.html:412 con 'medium' : 'small' (pages/mi-negocio/mi-negocio.html:473) -->
+<sui-link-button variant="gray" size="small" rightIcon="arrow-right-s-line"
+  (clicked)="goToProducts()">Ir a Productos</sui-link-button>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-link-button variant="gray" size="medium" rightIcon="arrow-right-s-line"
+  (clicked)="goToProducts()">Ir a Productos</sui-link-button>
+```
+
+Acción que se deshabilita mientras procesa
+
+```html
+<!-- ❌ mal: (click) escucha el host, no el output; (clicked) es el que respeta disabled (pages/super-admin/master-solicitudes/master-solicitudes.html:47) -->
+<sui-link-button variant="gray" size="medium" [disabled]="ocupada() === f.id"
+  (click)="cambiar(f, 'nueva')">Reabrir</sui-link-button>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-link-button variant="gray" size="medium" [disabled]="ocupada() === f.id"
+  (clicked)="cambiar(f, 'nueva')">Reabrir</sui-link-button>
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-logo/README.md

@@ -86,10 +86,13 @@ sobran): `components/ota-update/ota-update.html:17`, `pages/role-selector/role-s
 
 ## 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. Es **canon (aprobado por el dueño, 05-10-2026, bloque B1)**.
+En el celular va un paso más grande que en la computadora: el logo no se toca, así que sigue la
+regla de «lo que no se toca» (P1 b). 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 (< 380) lleva el valor de web en la
+pantalla de entrada, así que «mobile» ya no es un valor fijo para ellas (ver «Por dispositivo»).
+En la tabla, «mobile» es el celular de 380 a 767 px y «web» la computadora. Es **canon (aprobado
+por el dueño, 05-10-2026, bloque B1 y D16)**.
 
 | uso | mobile | web |
 |---|---|---|
@@ -104,6 +107,34 @@ el celular (cliente, repartidor) va directo el valor de mobile. Es **canon (apro
 En la barra no cambia el alto, cambia la forma: en mobile no entra la palabra. Es lo que ya hace
 `layouts/public/public-layout.html:4`–`:6`, con dos logos y CSS.
 
+### Por dispositivo (D16)
+
+El logo **no se toca**, así que va como «lo que no se toca» de D16 (la misma fila que
+`brand-logo`): sube un paso solo en el celular de 380 px o más; el celular chico, la tablet y la
+computadora llevan el valor de web (con el matiz de la tablet de 600 a 767, abajo). En la
+práctica solo cambia la pantalla de entrada: la barra cambia de forma por ancho (no de tamaño) y
+la pantalla de marca va a 120 en todos.
+
+La app distingue el celular **por ancho, no por puntero**: `bp.celular()` y `bp.isMobile()` son
+`max-width: 767px`. Por eso la tablet táctil de 600 a 767 px (una Android chica en vertical) cae
+del lado del celular, igual que con `bp.sizeBadge()`; la tablet «de web» empieza en 768.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | entrada `xl` · barra `[markOnly]="true"` `lg` | valor de web en el tamaño; la palabra tampoco entra en la barra |
+| celular (380–767) | entrada `2xl` · barra `[markOnly]="true"` `lg` | sube un paso (P1 b) |
+| tablet táctil, 600–767 | entrada `2xl` · barra `[markOnly]="true"` `lg` | se lee como celular: la app separa por ancho, no por puntero |
+| tablet táctil, 768–1024 | entrada `xl` · barra `horizontal` `lg` | no se toca: valor de web; desde 768 la palabra ya entra |
+| computadora | entrada `xl` · barra `horizontal` `lg` | |
+
+Ultrawide: igual que la computadora; el espacio extra no agranda el logo. La pantalla de marca
+(«Acerca de», actualización) es `stacked` `[height]="120"` en los cinco. Fuente: D16, dueño
+05-10-2026.
+
+En master-pedidos: no hay helper. Entrada `[size]="bp.celular() ? '2xl' : 'xl'"`; barra
+`size="lg" [markOnly]="bp.isMobile()"`. Se usa `bp.celular()` y no `bp.tactil()`: el logo no
+se toca, la tablet desde 768 no sube.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -139,6 +170,45 @@ Outputs: ninguno.
 - **No trae padding**: el `viewBox` es justo el dibujo. El aire lo pone quien lo usa.
 - **No es `sui-brand-logo`**: ese sirve logos de otras marcas como imágenes que no se pueden teñir.
 
+## Bien y mal
+
+Un tamaño de la escala, no un alto a mano
+
+```html
+<!-- ❌ mal: alto libre por debajo de 48 (components/ota-update/ota-update.html:17) -->
+<sui-logo orientation="horizontal" [height]="40" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-logo size="xl" />
+```
+
+El logo en el pie de la landing
+
+```html
+<!-- ❌ mal: PNG suelto, no sigue al dibujo ni al tema (components/landing-footer/landing-footer.html:7) -->
+<img src="assets/landing/logo-blanco.png" alt="Master Pedidos" width="150" height="53" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-logo size="2xl" markColor="var(--sui-static-white)" textColor="var(--sui-static-white)" />
+```
+
+Selector de rol en el celular y en la computadora
+
+```html
+<!-- ❌ mal: 2xl fijo y los colores que ya son el default (pages/role-selector/role-selector.html:10) -->
+<sui-logo orientation="horizontal" size="2xl"
+  markColor="var(--sui-primary-base)" textColor="var(--sui-text-strong-950)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-logo [size]="bp.celular() ? '2xl' : 'xl'" />
+```
+
 ## Ejemplo
 
 ```html