@ajuarezso/sui-design-system 0.24.1 → 0.25.1

package/docs/sui-tab-menu-horizontal/README.md

@@ -42,10 +42,10 @@ segmented · secciones → tab menu · filtros → tab-chips.**
 | qué | cuándo | fuente |
 |---|---|---|
 | texto | Lo normal: el nombre de la sección, una o dos palabras. | según la guía del DS (ejemplos con texto) |
-| `icon` | Solo si **todas** las pestañas llevan ícono y ayuda a reconocerlas. Nunca en una sola. | propuesta, falta aprobación |
-| `number` | Pendientes **que piden acción** dentro de esa sección («Solicitudes 3»). Es un círculo rojo: no lo uses para totales neutros. | propuesta, falta aprobación |
-| `rightIcon` | No: la flecha dice «te lleva a otra pantalla» y una pestaña no navega. | propuesta, falta aprobación |
-| `disabled` | Una sección que existe pero no aplica todavía (depende del plan). | propuesta, falta aprobación |
+| `icon` | Solo si **todas** las pestañas llevan ícono y ayuda a reconocerlas. Nunca en una sola. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `number` | Pendientes **que piden acción** dentro de esa sección («Solicitudes 3»). Es un círculo rojo: no lo uses para totales neutros. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `rightIcon` | No: la flecha dice «te lleva a otra pantalla» y una pestaña no navega. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `disabled` | Una sección que existe pero no aplica todavía (depende del plan). | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 
 ### `size`
 
@@ -61,7 +61,7 @@ desde el 03-10-2026 (`sui-tab-menu-horizontal.scss`, bloque «Tamaños»). Cuán
 - **A discutir, 1 sin tamaño por plataforma:** el único uso
   (`components/store-ratings-modal/store-ratings-modal.html:43`) es del modal del local, que el
   cliente abre en el teléfono, y no pasa `size`: mide 48 px tocables (`medium`). Llega a 44, pero la
-  propuesta de abajo pide `large` en mobile.
+  regla de abajo (canon, 05-10-2026) pide `large` en mobile.
 
 ## Tamaño en mobile y en web
 
@@ -80,13 +80,31 @@ es solo el texto: el `gap` entre pestañas no responde.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| 2-3 secciones | `large` (52, texto 16) | `medium` (48) | propuesta: el tamaño es extensión SUI aprobada (03-10-2026); el «cuándo» falta aprobarlo |
+| 2-3 secciones | `large` (52, texto 16) | `medium` (48) | canon (aprobado por el dueño, 05-10-2026, bloque B1); el tamaño es extensión SUI aprobada (03-10-2026) |
 | 4+ secciones | si no entran a 390 px, se salen sin poder deslizarse (las 4 del panel de repartidores, con sus números, ya no entran a 360): va `sui-tab-chips` | el mismo | según el código |
 
 ```html
-<sui-tab-menu-horizontal [tabs]="secciones" [(active)]="seccion" [size]="bp.isMobile() ? 'large' : 'medium'" />
+<sui-tab-menu-horizontal [tabs]="secciones" [(active)]="seccion" [size]="bp.tactil() && !bp.celularChico() ? 'large' : 'medium'" />
 ```
 
+### Por dispositivo (D16)
+
+Fila de `tab-menu-horizontal` en la tabla de D16 (dueño, 05-10-2026): se toca, pero su `medium`
+ya mide 48 de alto, así que el celular chico no necesita subir.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `medium` (48) | ya mide 48: pasa el piso de 44 sin subir |
+| celular (380–767 px) | `large` (52, texto 16) | |
+| tablet táctil (`pointer: coarse`) | `large` (52) | se toca con el dedo, aunque mida más de 767 |
+| computadora (`pointer: fine`) | `medium` (48) | `small` no se usa |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`. `xlarge` no sale de ningún dispositivo.
+
+En master-pedidos: `[size]="bp.tactil() && !bp.celularChico() ? 'large' : 'medium'"`. No hay
+helper propio, y `bp.sizeControl()` no sirve aunque los valores coincidan: da `large` en el celular
+chico.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -141,6 +159,49 @@ interface SuiTabMenuHorizontalItem<T = string> {
 - El ícono de la pestaña activa es `strong-950`, no naranja; en el tab menu vertical es naranja.
   Es a propósito.
 
+## Bien y mal
+
+Pestañas del modal del local, que el cliente abre en el teléfono
+
+```html
+<!-- ❌ mal: sin size queda en medium en el teléfono y la tablet (components/store-ratings-modal/store-ratings-modal.html:43) -->
+<sui-tab-menu-horizontal [tabs]="tabs" [active]="tab()" (tabChange)="tab.set($any($event))" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-tab-menu-horizontal [tabs]="tabs" [(active)]="tab"
+  [size]="bp.tactil() && !bp.celularChico() ? 'large' : 'medium'" />
+```
+
+Flecha en una pestaña
+
+```html
+<!-- ❌ mal: rightIcon dice «te lleva a otra pantalla» y una pestaña no navega -->
+<sui-tab-menu-horizontal [(active)]="tab"
+  [tabs]="[{ value: 'opiniones', label: 'Opiniones', rightIcon: true }, { value: 'info', label: 'Información' }]" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-tab-menu-horizontal [(active)]="tab"
+  [tabs]="[{ value: 'opiniones', label: 'Opiniones' }, { value: 'info', label: 'Información' }]" />
+```
+
+Un total neutro en el círculo rojo
+
+```html
+<!-- ❌ mal: number es para pendientes que piden acción, no para cuántos repartidores hay -->
+<sui-tab-menu-horizontal [(active)]="tab"
+  [tabs]="[{ value: 'activos', label: 'Activos', number: 42 }, { value: 'solicitudes', label: 'Solicitudes' }]" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-tab-menu-horizontal [(active)]="tab"
+  [tabs]="[{ value: 'activos', label: 'Activos' }, { value: 'solicitudes', label: 'Solicitudes', number: 3 }]" />
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-tab-menu-vertical/README.md

@@ -17,13 +17,14 @@ de pago · Repartidores»), el perfil del super admin.
 
 **No lo uses** para:
 
-- **Mobile**: el ítem mide 36 px y ocupa el ancho de la pantalla dejando el contenido debajo. En
-  mobile cada sección es una fila de una lista que abre su propia pantalla.
+- **Mobile y tablet táctil**: el ítem mide 36 px y no llega a los 44 del dedo; en el celular,
+  además, ocupa el ancho de la pantalla dejando el contenido debajo. Ahí cada sección es una fila
+  de una lista que abre su propia pantalla.
 - La navegación de toda la app: `sui-sidebar`.
 - 2 a 4 secciones arriba del contenido: `sui-tab-menu-horizontal`.
 - Filtros de una lista: `sui-tab-chips`.
 
-Regla corta (propuesta, falta aprobación): **secciones de una página de ajustes en web → tab menu
+Regla corta (canon, aprobado por el dueño, 05-10-2026, bloque B7): **secciones de una página de ajustes en web → tab menu
 vertical · en mobile → lista de filas que abren pantalla.**
 
 ## Qué variante usar
@@ -39,14 +40,14 @@ vertical · en mobile → lista de filas que abren pantalla.**
 
 | valor | cuándo | fuente |
 |---|---|---|
-| `card` | El menú flota junto al contenido sobre un fondo gris (`bg-weak-50`): el borde y la sombra lo separan. | según la guía del DS (ejemplo «contenedor con estilo»); el cuándo es propuesta |
-| `list` | El menú vive dentro de una columna que ya tiene fondo o borde propio (una card, un panel). | según la guía del DS (ejemplo base); el cuándo es propuesta |
+| `card` | El menú flota junto al contenido sobre un fondo gris (`bg-weak-50`): el borde y la sombra lo separan. | según la guía del DS (ejemplo «contenedor con estilo»); el cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `list` | El menú vive dentro de una columna que ya tiene fondo o borde propio (una card, un panel). | según la guía del DS (ejemplo base); el cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 ### `dividerLabel`
 
 | valor | cuándo | fuente |
 |---|---|---|
-| vacío (default) | Un solo grupo de secciones. | propuesta, falta aprobación |
+| vacío (default) | Un solo grupo de secciones. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | texto | Nombra el grupo cuando hay más de un menú apilado («Tu local» · «Tu cuenta»). Sale en MAYÚSCULAS y gris. | según la guía del DS (ejemplo con título) |
 
 ### Ítems (`tabs`)
@@ -54,10 +55,10 @@ vertical · en mobile → lista de filas que abren pantalla.**
 | qué | cuándo | fuente |
 |---|---|---|
 | texto | El nombre de la sección. Una o dos palabras; si es más largo, se corta con «…». | según la guía del DS (ejemplos con texto) |
-| `icon` | Sí, en todos los ítems: en un menú lateral el ícono ayuda a encontrar rápido. El activo se pinta naranja. | propuesta, falta aprobación |
-| `number` | Pendientes que piden acción en esa sección (círculo rojo). | propuesta, falta aprobación |
+| `icon` | Sí, en todos los ítems: en un menú lateral el ícono ayuda a encontrar rápido. El activo se pinta naranja. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `number` | Pendientes que piden acción en esa sección (círculo rojo). | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
 | `rightIcon` | Cuando el ítem lleva a otra página en vez de cambiar el panel de al lado. | propuesta, falta aprobación |
-| `disabled` | Una sección que depende del plan. | propuesta, falta aprobación |
+| `disabled` | Una sección que depende del plan. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 
 Usos de hoy que rompen las reglas: **0** (no se usa).
 
@@ -68,14 +69,22 @@ Usos de hoy que rompen las reglas: **0** (no se usa).
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| secciones de ajustes | no se usa: lista de filas que abren pantalla | `tab-menu-vertical` | propuesta, falta aprobación |
+| secciones de ajustes | no se usa: lista de filas que abren pantalla | `tab-menu-vertical` | «no se usa en mobile»: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono — el ítem mide 36 y no tiene `size` · la lista de filas en mobile y el uso en web: canon (aprobado por el dueño, 05-10-2026, bloque B7) |
 
 ```html
-@if (!bp.isMobile()) {
+@if (!bp.tactil()) {
   <sui-tab-menu-vertical [tabs]="secciones" [(active)]="seccion" menuStyle="card" />
 }
 ```
 
+### Por dispositivo (D16)
+
+No tiene `size` (ítem único de 36, sin eje de tamaño en Figma): no hay tabla por dispositivo. Como
+se toca y no llega a 44, la regla general de D16 lo deja fuera de todo lo táctil: celular (chico o
+no) y tablet táctil van con la lista de filas que abren pantalla (B7); computadora y ultrawide, el
+menú tal cual. Fuente: D16, dueño 05-10-2026 (columna «lo que se toca»). En master-pedidos:
+`@if (!bp.tactil()) { <sui-tab-menu-vertical … /> }`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -128,6 +137,50 @@ type SuiTabMenuVerticalStyle = 'card' | 'list';
 - `role="tablist"`: si cada ítem navega a una ruta, el lector de pantalla lo anuncia mal; para
   navegación entre rutas, `sui-sidebar`.
 
+## Bien y mal
+
+Menú en el celular
+
+```html
+<!-- ❌ mal: en el celular y la tablet táctil el ítem mide 36 (no llega a 44), y en el celular el contenido queda debajo -->
+<sui-tab-menu-vertical [tabs]="secciones" [(active)]="seccion" />
+```
+
+```html
+<!-- ✅ bien: en el celular y la tablet táctil, cada sección es una fila que abre su pantalla -->
+@if (!bp.tactil()) {
+  <sui-tab-menu-vertical [tabs]="secciones" [(active)]="seccion" />
+}
+```
+
+Ítem activo al entrar
+
+```html
+<!-- ❌ mal: sin active no se marca ningún ítem -->
+<sui-tab-menu-vertical [tabs]="secciones" (tabChange)="mostrar($event)" />
+```
+
+```html
+<!-- ✅ bien: seccion arranca en la primera sección ('datos') -->
+<sui-tab-menu-vertical [tabs]="secciones" [(active)]="seccion" />
+```
+
+Menú dentro de una card
+
+```html
+<!-- ❌ mal: card dentro de una card, borde y sombra dobles -->
+<sui-card>
+  <sui-tab-menu-vertical [tabs]="secciones" [(active)]="seccion" menuStyle="card" />
+</sui-card>
+```
+
+```html
+<!-- ✅ bien: la columna ya tiene fondo y borde, el menú va plano -->
+<sui-card>
+  <sui-tab-menu-vertical [tabs]="secciones" [(active)]="seccion" menuStyle="list" />
+</sui-card>
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-table/README.md

@@ -32,9 +32,9 @@ Regla corta: **comparar por columnas → tabla · leer de a uno → tarjetas ·
 > estructura de dos dimensiones donde cada fila es un ítem y cada columna un dato del ítem»,
 > muestra un solo ejemplo (un directorio de personas **con selección por checkbox**), le pone
 > `overflow-x-auto` al contenedor y deriva el orden, la selección y la paginación a una
-> librería externa. No trae do/don't, tamaños ni comportamiento en mobile. Casi todo lo de
-> abajo es **práctica de la app** o **propuesta, falta aprobación**; lo marcado «canon» sale de
-> `master-pedidos/CLAUDE.md` o de `docs/CANON-SUI.md`.
+> librería externa. No trae do/don't, tamaños ni comportamiento en mobile. Lo de abajo es
+> **práctica de la app**, **canon** (sale de `master-pedidos/CLAUDE.md`, de `docs/CANON-SUI.md` o lo
+> aprobó el dueño el 05-10-2026) o **propuesta, falta aprobación**, que espera decisión.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **9 tablas** en 7 pantallas, sin contar
 > prototipos ni vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`, `dx/*`,
@@ -55,9 +55,9 @@ Regla corta: **comparar por columnas → tabla · leer de a uno → tarjetas ·
 | prop de columna | cuándo | ejemplo real de la app | fuente |
 |---|---|---|---|
 | `priority: 'leading'` + `descriptionKey` | La **primera** columna: el dato que identifica la fila arriba (14/500) y un dato de apoyo debajo (12/400). Se usa en vez de una plantilla propia para la columna principal. | `pages/orders/orders.ts:278` (pedido + «hace 12 min») · `pages/super-admin/master-orders/master-orders.ts:390` | práctica de la app (7 de 9 tablas) |
-| `priority: 'passive'` | Datos de contexto que no deciden nada: fecha, número de comprobante. Se leen en gris (`text-sub-600`). | `pages/super-admin/master-overview/master-overview.ts:192` | propuesta, falta aprobación |
+| `priority: 'passive'` | Datos de contexto que no deciden nada: fecha, número de comprobante. Se leen en gris (`text-sub-600`). | `pages/super-admin/master-overview/master-overview.ts:192` | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 | `priority: 'none'` | Columna de acciones (íconos) sin texto propio. Con `label: ''` y `width` fijo. | `pages/super-admin/master-gastos/master-gastos.ts:143` | práctica de la app |
-| `align: 'right'` | Montos. Así se comparan en vertical. | `pages/central/central-gastos/central-gastos.ts:82` | propuesta, falta aprobación |
+| `align: 'right'` | Montos. Así se comparan en vertical. | `pages/central/central-gastos/central-gastos.ts:82` | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `width` | Columnas de largo fijo: monto, estado, fecha, acciones. | `central-gastos.ts:82-83` | práctica de la app |
 | `minWidth` | Columnas de texto que crecen (nombre, concepto): el piso para que no se aplasten. | `master-orders.ts:392` | práctica de la app |
 | `maxWidth` + `truncate` | Nombres que pueden ser muy largos: corta con «…» y el valor completo sale en tooltip. | `master-overview.ts:193` | práctica de la app |
@@ -72,10 +72,10 @@ Dentro va un componente SUI, no HTML a mano:
 
 | contenido | componente | fuente |
 |---|---|---|
-| estado o categoría | `<sui-badge variant="lighter" size="small">` | canon (CANON-SUI §0: «Chip de estado») |
-| acciones de la fila | `<sui-button variant="ghost" color="neutral" size="2xsmall" [onlyIcon]="true">` | canon (README de `sui-button`: tabla densa = `2xsmall`) |
+| estado o categoría | `<sui-badge variant="lighter" [size]="bp.sizeBadge()">` (`medium` en la computadora, `large` en el celular) | D16, dueño 05-10-2026; CANON-SUI §0 («Chip de estado») todavía dice `small`: hay que actualizarlo en master-pedidos |
+| acciones de la fila | `<sui-button variant="ghost" color="neutral" [size]="bp.sizeControl()" [onlyIcon]="true">` (`medium` en la computadora, `large` donde se toca) | D16, dueño 05-10-2026 (README de `sui-button`: en una tabla, `medium` en la computadora; antes `2xsmall`) |
 | prender/apagar | `<sui-switch>` | propuesta, falta aprobación |
-| calificación | `<sui-rating>` de solo lectura | propuesta, falta aprobación |
+| calificación | `<sui-rating>` de solo lectura | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 
 Si la columna tiene plantilla, `descriptionKey` y `truncate` **no se aplican**: solo funcionan en
 el render de texto plano. Por eso `orders.html:94` deja la columna del pedido sin plantilla.
@@ -118,17 +118,17 @@ secundaria dentro de un tablero) y 6 sin `size` (o sea `medium`).
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | tabla principal de una pantalla | `medium` | `medium` | práctica de la app |
-| tabla secundaria dentro de un tablero | `small` | `small` | práctica de la app (1 uso) |
-| filas con dos líneas y un badge | `medium` | `medium` | propuesta, falta aprobación |
+| tabla secundaria dentro de un tablero | `medium` | `medium` | D16, dueño 05-10-2026 (antes `small`, práctica de la app: `master-overview.html:126`) |
+| filas con dos líneas y un badge | `medium` | `medium` | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 
-El patrón `[size]="bp.isMobile() ? 'large' : 'medium'"` de los botones **no aplica aquí**: la fila
-ya mide 64 y el toque es sobre toda la fila. `large`/`xlarge` no tienen uso hoy.
+El patrón por dispositivo de los botones (`bp.sizeControl()`) **no aplica al `size` de la tabla**:
+la fila ya mide 64 y el toque es sobre toda la fila. `large`/`xlarge` no tienen uso hoy.
 
 **Qué pasa en mobile (≤ 767 px):** la tabla scrollea en horizontal dentro de sí misma; la
 cabecera y el cuerpo miden lo mismo y la barra de scroll se oculta. En la app conviven dos
-salidas, y las dos son práctica, no regla:
+salidas, y cuándo va cada una ya es regla:
 
-| salida | dónde | cuándo elegirla (propuesta) |
+| salida | dónde | cuándo elegirla (canon (aprobado por el dueño, 05-10-2026, bloque B7)) |
 |---|---|---|
 | la misma tabla, con scroll lateral | `orders`, `master-orders`, `central-gastos`, `central-ingresos` | 3-4 columnas, y la primera (`leading`) ya dice casi todo |
 | tarjetas en grilla por debajo de 1350 px | `drivers` (`drivers.ts:282`), `master-gastos` | 6+ columnas: con el sidebar abierto no entran ni en laptop ni en iPad |
@@ -140,6 +140,19 @@ solo en Android**: pone `touch-action: pan-x` por JS para que el scroll horizont
 y mueve él mismo la página con el gesto vertical (con inercia). En iOS no hace nada: WebKit delega
 el vertical solo. Por eso la página **no** agrega `touch-action` ni un wrapper con `overflow-x`.
 
+### Por dispositivo (D16)
+
+El `size` de la tabla no depende del dispositivo: cambia el alto de la fila (48 a 96), no el área
+que se toca, y la fila entera ya pasa los 44 del dedo. Va `medium` (el default) en el celular
+chico, el celular, la tablet táctil, la computadora y el ultrawide; por eso no hay tabla de D16.
+Lo que sí sigue a D16 es lo que va **dentro** de las celdas: el badge como lo que no se toca y el
+botón de acción como lo que se toca. Fuente: D16, dueño 05-10-2026.
+
+En master-pedidos: `<sui-table>` sin `size`, y en las plantillas `[size]="bp.sizeBadge()"` (badge)
+y `[size]="bp.sizeControl()"` (botón). Las tablas de la app que tienen badge o botón en una celda
+ya llevan esos helpers; la que queda fuera es `master-overview.html:126`, que pasa `size="small"` a
+la tabla.
+
 ## Pista de scroll (canon, aprobado por el dueño el 05-10-2026)
 
 Desde la **0.24.0**. Cuando la tabla scrollea en horizontal (≤ 767 px, o con una columna `sticky`)
@@ -256,6 +269,54 @@ trabajo de la página.
 - **El degradado de la pista es `bg-white-0`**, el fondo de la propia tabla. Si la tabla vive
   sobre otro fondo (no es el caso hoy), se pisa `--sui-pista-de-scroll-fondo` en un contenedor.
 
+## Bien y mal
+
+Segunda línea en la columna principal
+
+```html
+<!-- ❌ mal: la columna tiene descriptionKey, pero con plantilla la segunda línea no sale (central-gastos.html:49, central-gastos.ts:83) -->
+<ng-template suiTableCell="concepto" let-row>
+  <span class="cg__concepto">{{ row.concepto }}</span>
+</ng-template>
+```
+
+```html
+<!-- ✅ bien: sin plantilla en 'concepto'; leading + descriptionKey pintan las dos líneas (como orders.html:94) -->
+<sui-table [columns]="columnas" [rows]="filas()" emptyMessage="No hay gastos registrados este mes." />
+```
+
+Columnas que no entran
+
+```html
+<!-- ❌ mal: wrapper con overflow-x desde la página (drivers.html:212, drivers.scss:111) -->
+<div class="drivers__table-wrap">
+  <sui-table [columns]="tableColumns" [rows]="filteredDrivers()" rowKey="id" />
+</div>
+```
+
+```html
+<!-- ✅ bien: las columnas entran en el ancho real; con 6+ columnas, tarjetas por debajo de 1350 px -->
+<sui-table [columns]="tableColumns" [rows]="filteredDrivers()" rowKey="id" />
+```
+
+Botón dentro de una fila que abre el detalle
+
+```html
+<!-- ❌ mal: el clic edita y además abre el detalle por rowClicked -->
+<ng-template suiTableCell="acciones" let-row>
+  <sui-button variant="ghost" color="neutral" [size]="bp.sizeControl()" [onlyIcon]="true"
+              leftIcon="pencil-line" aria-label="Editar" (click)="editar(row)" />
+</ng-template>
+```
+
+```html
+<!-- ✅ bien -->
+<ng-template suiTableCell="acciones" let-row>
+  <sui-button variant="ghost" color="neutral" [size]="bp.sizeControl()" [onlyIcon]="true"
+              leftIcon="pencil-line" aria-label="Editar" (click)="$event.stopPropagation(); editar(row)" />
+</ng-template>
+```
+
 ## Ejemplo
 
 ```html
@@ -268,12 +329,12 @@ trabajo de la página.
     emptyMessage="Sin pedidos en este estado."
     (rowClicked)="abrirDetalle($event)">
     <ng-template suiTableCell="estado" let-row>
-      <sui-badge [color]="row.color" variant="lighter" size="small">{{ row.estadoLabel }}</sui-badge>
+      <sui-badge [color]="row.color" variant="lighter" [size]="bp.sizeBadge()">{{ row.estadoLabel }}</sui-badge>
     </ng-template>
   </sui-table>
 
   @if (hayMas()) {
-    <sui-button variant="stroke" color="neutral" [size]="bp.isMobile() ? 'large' : 'small'"
+    <sui-button variant="stroke" color="neutral" [size]="bp.sizeControl()"
                 [disabled]="cargandoMas()" (click)="cargarMas()">Cargar más</sui-button>
   }
 </sui-card>

package/docs/sui-tag/README.md

@@ -35,7 +35,7 @@ tab-chips o segmented-control.**
 > **La guía del DS dice para qué es, no cuándo usar cada estilo.** Su página lo define como
 > «categorizar y etiquetar contenido» y muestra `stroke` (default), `gray`, deshabilitado, con
 > imagen, con avatar y con botón de quitar. No trae do/don't. Lo marcado «según la guía del DS»
-> sale de ahí; el resto es **propuesta, falta aprobación**.
+> sale de ahí; lo marcado canon lo aprobó el dueño; el resto es **propuesta, falta aprobación** y espera decisión.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 tags**, sin contar prototipos ni
 > vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`, `dx/*`, `_guia-*`,
@@ -48,12 +48,12 @@ tab-chips o segmented-control.**
 | `tagStyle` | `stroke` (default) | Lo normal. Sirve sobre cualquier fondo (blanco o gris claro). | — | según la guía del DS (default) |
 | `tagStyle` | `gray` | Solo sobre blanco, cuando hay muchos tags juntos y el borde hace ruido. **Sobre gris claro desaparece.** | Varios filtros aplicados en fila | propuesta, falta aprobación |
 | `dismissible` | `true` | Lo que se nombra se puede quitar. Emite `(dismiss)`; la pantalla lo saca. | «Abierto ahora ✕» | según la guía del DS |
-| `dismissLabel` | texto | Siempre «Quitar» + el nombre: el lector de pantalla no ve el texto del tag desde la X. | `dismissLabel="Quitar Abierto ahora"` | propuesta, falta aprobación |
+| `dismissLabel` | texto | Siempre «Quitar» + el nombre: el lector de pantalla no ve el texto del tag desde la X. | `dismissLabel="Quitar Abierto ahora"` | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
 | `leading` + `[data-slot=start]` | avatar | Nombra a una persona o un local. | «Burger House» con su logo | según la guía del DS (con avatar, con imagen) |
 | `leading` + `[data-slot=start]` | ícono de 16 | El ícono dice qué tipo de dato es. | «Andahuaylas» con un pin | según la guía del DS (`Tag.Icon`) |
 | `sublabel` | texto | Cuántos resultados trae ese filtro, entre paréntesis. | «Pollerías (12)» | propuesta, falta aprobación |
-| `disabled` | `true` | **No usar** hoy (ver abajo). | — | según la guía del DS (existe) · propuesta (cuándo) |
-| `interactive` | `true` | **No usar** hoy (ver abajo). | — | propuesta, falta aprobación |
+| `disabled` | `true` | **No usar** hoy (ver abajo). | — | según la guía del DS (existe) · canon (aprobado por el dueño, 05-10-2026, bloque B6) (cuándo) |
+| `interactive` | `true` | **No usar** hoy (ver abajo). | — | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 Usos de hoy que rompen la regla: **0** (no hay usos).
 
@@ -67,10 +67,14 @@ Usos de hoy que rompen la regla: **0** (no hay usos).
 
 ## Tamaño en mobile y en web
 
-Criterio de la app: **en mobile se lee y se toca con el dedo, así que va más grande; en web
-(desktop), más chico.** Mobile es `≤ 767 px`, el mismo corte de `BreakpointsService.isMobile()`
-en master-pedidos. Fuente: canon del dueño (03-10-2026), el mismo patrón que ya usan 27 controles
-de la app.
+Criterio de la app: **D16, tamaño por dispositivo** (canon, dueño, 05-10-2026), que reemplaza al
+«tamaño por plataforma» del 03-10-2026 (mobile grande, web chico). La columna «mobile» es el celular de
+380 px o más y, en lo que se toca, también la tablet (`pointer: coarse`). La columna «web» es la
+computadora (`pointer: fine`) y, en lo que no se toca, también la tablet. En el celular chico
+(< 380 px) va `medium` a la vista, sin achicar el área de 44 de lo que se toca. **Nada en `small` ni
+`xsmall`**, salvo lo que el componente solo tiene en chico. `BreakpointsService` ya mira el puntero
+y los 380 px (`bp.toque()`, `bp.celularChico()`, `bp.celular()`, `bp.tactil()`), pero no tiene un
+helper para el tag: se usa la expresión de «Por dispositivo (D16)».
 
 | size | alto | texto | leading | X de quitar (área táctil) |
 |---|---|---|---|---|
@@ -94,17 +98,42 @@ máximo se sigue cortando, y la X queda siempre visible.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| Tag con X (filtro aplicado, elegido que se quita) | `xlarge` (40) | `medium` (24) | propuesta: el tamaño es extensión SUI aprobada (03-10-2026); el «cuándo» falta aprobarlo |
-| Tag de solo lectura (sin X) | `large` (32) | `medium` (24) | propuesta: el tamaño es extensión SUI aprobada (03-10-2026); el «cuándo» falta aprobarlo |
-| Separación entre tags | 8 px | 4–6 px | propuesta, falta aprobación |
+| Tag con X (filtro aplicado, elegido que se quita) | `xlarge` (40) | `medium` (24) | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono — solo la X de `xlarge` llega a 44 (en la tablet de más de 767 px, 40: ver «Por dispositivo») · web: canon (dueño, 05-10-2026, D16) (`medium` es el más chico que tiene) |
+| Tag de solo lectura (sin X) | `large` (32) | `medium` (24) | canon (dueño, 05-10-2026, P1 b); el tamaño es extensión SUI aprobada (03-10-2026) |
+| Separación entre tags | 8 px | 4–6 px | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 
 ```html
-<sui-tag [size]="bp.isMobile() ? 'xlarge' : 'medium'" [dismissible]="true" (dismiss)="quitar(f)">{{ f.nombre }}</sui-tag>
+<sui-tag [size]="bp.tactil() ? 'xlarge' : 'medium'" [dismissible]="true" (dismiss)="quitar(f)">{{ f.nombre }}</sui-tag>
 ```
 
 El leading proyectado (ícono, avatar, bandera) se escala solo a la caja de 20 en los grandes; un
 `<i class="ri-…">` necesita además su `font-size` en 20.
 
+### Por dispositivo (D16)
+
+Fila `tag` de la tabla D16 (dueño, 05-10-2026). El tag con X se toca (la X); el de solo lectura no:
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | con X `xlarge` · solo lectura `medium` | la X solo llega a 44 en `xlarge` (el área de 44 se prende con `max-width: 767px`) |
+| celular (380–767) | con X `xlarge` · solo lectura `large` | lo que no se toca sube un paso en el celular (P1 b) |
+| tablet táctil (`pointer: coarse`) | con X `xlarge` · solo lectura `medium` | la X se toca con el dedo (Apple pide 44 también en el iPad), pero en la tablet de más de 767 px hoy se toca en **40×40**, no en 44: ver abajo |
+| computadora (`pointer: fine`) | `medium` | `medium` es el más chico que tiene |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`.
+
+**La X en la tablet queda en 40×40.** El área de 44 de la X de `xlarge` se prende con
+`@media (max-width: 767px)` (`sui-tag.scss`, `inset` −10); en una tablet de más de 767 px de ancho
+(casi todos los iPad, y cualquiera en horizontal) la X se toca en 40×40 (`inset` −8). `xlarge`
+sigue siendo lo correcto en la tablet (es el más grande que tiene); llega a 44 cuando el DS cambie
+ese media query por el mixin `sui-tactil` (`max-width: 767px` o `pointer: coarse`), que está
+propuesto en el doc de D16 y todavía no se hizo.
+
+En master-pedidos (no hay helper para el tag):
+
+- con X: `[size]="bp.tactil() ? 'xlarge' : 'medium'"`
+- solo lectura: `[size]="bp.celular() ? 'large' : 'medium'"`
+
 ## API
 
 <!-- api:inicio -->
@@ -143,6 +172,51 @@ Slots: `[data-slot=start]` (avatar, logo, bandera o ícono de 16 px) y `<ng-cont
 - `sui-avatar` no tiene 16 px: el `xs` (20) se escala por CSS dentro del slot.
 - Radio de 6 px, 24 px de alto en `medium`, sin mayúsculas: no es un badge (radio completo).
 
+## Bien y mal
+
+Dato de solo lectura
+
+```html
+<!-- ❌ mal: solo se lee y no lleva nada a la izquierda, eso es un badge -->
+<sui-tag tagStyle="gray" sublabel="3 días">Frecuencia</sui-tag>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-badge color="gray" [size]="bp.sizeBadge()">Frecuencia: 3 días</sui-badge>
+```
+
+Filtro aplicado que se quita
+
+```html
+<!-- ❌ mal: sin size la X mide 16 en el celular, y el lector de pantalla solo oye «Quitar» -->
+<sui-tag [dismissible]="true" (dismiss)="quitarFiltro('abierto')">Abierto ahora</sui-tag>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-tag [size]="bp.tactil() ? 'xlarge' : 'medium'" [dismissible]="true"
+         dismissLabel="Quitar Abierto ahora" (dismiss)="quitarFiltro('abierto')">Abierto ahora</sui-tag>
+```
+
+Logo a la izquierda
+
+```html
+<!-- ❌ mal: con algo en [data-slot=start] y sin [leading]="true", el padding queda mal -->
+<sui-tag [size]="bp.celular() ? 'large' : 'medium'">
+  <sui-avatar data-slot="start" size="xs" [src]="local.imageUrl" [initials]="'B'" />
+  Burger House
+</sui-tag>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-tag [size]="bp.celular() ? 'large' : 'medium'" [leading]="true">
+  <sui-avatar data-slot="start" size="xs" [src]="local.imageUrl" [initials]="'B'" />
+  Burger House
+</sui-tag>
+```
+
 ## Ejemplo
 
 ```html