@ajuarezso/sui-design-system 0.24.1 → 0.25.1

package/docs/sui-avatar/README.md

@@ -29,7 +29,7 @@ Regla corta: **es alguien → avatar · es una cosa → key-icon · son varios
 
 > **La guía del DS dice qué es y qué opciones tiene, no cuándo usar cada una.** Lo marcado
 > «según la guía del DS» sale de su texto o de su código publicado; lo marcado «canon» ya es
-> regla escrita del proyecto (`CLAUDE.md`); el resto es **propuesta, falta aprobación**.
+> regla escrita del proyecto (`CLAUDE.md`) o lo aprobó el dueño; el resto es **propuesta, falta aprobación**.
 >
 > Uso medido el 04-10-2026 en `master-pedidos/src/app`: 55 avatares en los templates, sin contar
 > prototipos ni vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`, `dx/*`,
@@ -58,21 +58,21 @@ la foto falla al cargar, cae sola a las iniciales.
 |---|---|---|
 | foto (`src`) | Siempre que exista. Si es la foto **de otra persona**, es su `avatarUrl` de nuestro Storage, denormalizada en el documento por la Cloud Function y filtrada por `fotoDeStorage()`. **Nunca `photoURL` de Google**: solo carga en el navegador del dueño de esa cuenta. | canon (`CLAUDE.md`, «Fotos de otra persona») |
 | `initials` | Sin foto. Pasa el **nombre completo**: el componente saca las iniciales. | según la guía del DS |
-| `icon` | Solo para «todavía no hay nadie»: pedido sin repartidor (`e-bike-2-line`), envío sin destinatario (`user-3-line`). Va con `color="gray"`. Extensión de SUI. | propuesta |
+| `icon` | Solo para «todavía no hay nadie»: pedido sin repartidor (`e-bike-2-line`), envío sin destinatario (`user-3-line`). Va con `color="gray"`. Extensión de SUI. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
 | silueta | Cae sola cuando no hay ni nombre. No se pide a propósito. | según la guía del DS |
 
 ### `size`
 
 | size | px | cuándo | ejemplo real de la app | fuente |
 |---|---|---|---|---|
-| `xs` | 20 | Pegado a un texto en la misma línea. | `components/sidebar/sidebar.html:77` (selector de local) · `pages/envios/envios.html:250` | propuesta |
-| `sm` | 24 | Chips y filas compactas. | `pages/driver/driver-dashboard/driver-dashboard.html:1047` (quién tomó el pedido) | propuesta |
-| `md` (default SUI) | 32 | Filas de listas y tablas. | `pages/super-admin/master-orders/master-orders.html:197` | propuesta |
-| `lg` | 40 | La tarjeta de una persona o de un local. | `pages/customer/order-tracking/order-tracking.html:348` (tu repartidor) | propuesta |
-| `xl` | 48 | Cabecera de un panel. | `pages/driver/driver-dashboard/driver-dashboard.html:19` (tu foto) | propuesta |
-| `2xl` | 56 | Cabecera de una ficha. | `pages/super-admin/master-users/master-user-sheet.html:21` | propuesta |
-| `3xl` | 64 | Tu propia foto al registrarte. | `pages/driver-onboarding/step-info/step-info.html:31` | propuesta |
-| `4xl` / `5xl` | 72 / 80 | No usar hoy (ver «No usar»). | — | propuesta |
+| `xs` | 20 | Pegado a un texto en la misma línea. | `components/sidebar/sidebar.html:77` (selector de local) · `pages/envios/envios.html:250` | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `sm` | 24 | Chips y filas compactas. | `pages/driver/driver-dashboard/driver-dashboard.html:1047` (quién tomó el pedido) | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `md` (default SUI) | 32 | Filas de listas y tablas. | `pages/super-admin/master-orders/master-orders.html:197` | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `lg` | 40 | La tarjeta de una persona o de un local. | `pages/customer/order-tracking/order-tracking.html:348` (tu repartidor) | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `xl` | 48 | Cabecera de un panel. | `pages/driver/driver-dashboard/driver-dashboard.html:19` (tu foto) | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `2xl` | 56 | Cabecera de una ficha. | `pages/super-admin/master-users/master-user-sheet.html:21` | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `3xl` | 64 | Tu propia foto al registrarte. | `pages/driver-onboarding/step-info/step-info.html:31` | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `4xl` / `5xl` | 72 / 80 | No usar hoy (ver «No usar»). | — | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 
 Hasta `md` (32 px) se ve **una** inicial; desde `lg` (40 px), dos. Es del Figma: en chico dos
 letras no entran.
@@ -113,11 +113,11 @@ logueada sigue en el default.
 
 | status | cuándo | fuente |
 |---|---|---|
-| `online` | Conectado **ahora** (repartidor en línea). No significa «cuenta activa». | propuesta (el valor es de la guía) |
-| `away` | En pausa: conectado pero sin recibir pedidos. | propuesta (el valor es de la guía) |
-| `busy` | Ocupado: ya lleva un pedido. | propuesta (el valor es de la guía) |
-| `offline` | Desconectado. Si en esa lista todos estarían `offline` casi siempre, mejor sin punto. | propuesta (el valor es de la guía) |
-| `company` | Repartidor propio de un local: el logo del local abajo (con `companyLogoSrc`). | propuesta (la guía lo muestra como «con logo de marca») |
+| `online` | Conectado **ahora** (repartidor en línea). No significa «cuenta activa». | canon (aprobado por el dueño, 05-10-2026, bloque B2) (el valor es de la guía) |
+| `away` | En pausa: conectado pero sin recibir pedidos. | canon (aprobado por el dueño, 05-10-2026, bloque B2) (el valor es de la guía) |
+| `busy` | Ocupado: ya lleva un pedido. | canon (aprobado por el dueño, 05-10-2026, bloque B2) (el valor es de la guía) |
+| `offline` | Desconectado. Si en esa lista todos estarían `offline` casi siempre, mejor sin punto. | canon (aprobado por el dueño, 05-10-2026, bloque B2) (el valor es de la guía) |
+| `company` | Repartidor propio de un local: el logo del local abajo (con `companyLogoSrc`). | canon (aprobado por el dueño, 05-10-2026, bloque B2) (la guía lo muestra como «con logo de marca») |
 
 **Usos de hoy que rompen la regla: 2.** Los dos usan el punto para el **estado de la cuenta**,
 no para la presencia: `pages/settings/team/team.html:99` (activo/pendiente/inactivo →
@@ -128,9 +128,9 @@ online/away/offline, mapeo en `pages/settings/team/team.ts:99`) y `pages/employe
 
 | topBadge | cuándo | fuente |
 |---|---|---|
-| `verified` | Identidad revisada (repartidor aprobado). | propuesta (la guía muestra un sello de verificado arriba) |
-| `notification` | Tiene algo sin leer. | propuesta (el punto rojo arriba es de la guía) |
-| `favorite`, `pin`, `add`, `remove` | No usar hoy (ver «No usar»). | propuesta |
+| `verified` | Identidad revisada (repartidor aprobado). | canon (aprobado por el dueño, 05-10-2026, bloque B2) (la guía muestra un sello de verificado arriba) |
+| `notification` | Tiene algo sin leer. | canon (aprobado por el dueño, 05-10-2026, bloque B2) (el punto rojo arriba es de la guía) |
+| `favorite`, `pin`, `add`, `remove` | No usar hoy (ver «No usar»). | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 Hoy no hay ningún `topBadge` en la app.
 
@@ -138,10 +138,10 @@ Hoy no hay ningún `topBadge` en la app.
 
 | input | cuándo | fuente |
 |---|---|---|
-| `alt` | **Siempre** el nombre de quien es. Con foto va en el `<img>`; con iniciales, ícono o silueta el host pasa a `role="img"` con `aria-label` = `alt` (desde el 04-10-2026; antes el lector leía la letra suelta). Sin `alt`, el lector no dice nada. | propuesta |
-| `companyLogoSrc` | Solo con `status="company"`. | propuesta |
-| `memojiSrc`, `illustrationSrc` | No usar hoy. | propuesta |
-| `bgColor` | No usar (ver abajo). | propuesta |
+| `alt` | **Siempre** el nombre de quien es. Con foto va en el `<img>`; con iniciales, ícono o silueta el host pasa a `role="img"` con `aria-label` = `alt` (desde el 04-10-2026; antes el lector leía la letra suelta). Sin `alt`, el lector no dice nada. | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
+| `companyLogoSrc` | Solo con `status="company"`. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `memojiSrc`, `illustrationSrc` | No usar hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `bgColor` | No usar (ver abajo). | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 **Usos de hoy sin `alt`: 9** (más uno decorativo que está bien sin él,
 `pages/super-admin/master-orders/master-orders.html:586`). Ejemplos:
@@ -168,7 +168,10 @@ disfrazado. Todos pasaron a `color` por rol.
 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**.
+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).
+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 |
 |---|---|---|
@@ -178,12 +181,32 @@ el celular (cliente, repartidor) va directo el valor de mobile. Todo es **propue
 | cabecera de una ficha | `3xl` (64) | `2xl` (56) |
 
 ```html
-<sui-avatar [size]="bp.isMobile() ? 'lg' : 'md'" color="blue" [initials]="c.nombre" [alt]="c.nombre" />
+<sui-avatar [size]="bp.sizeAvatar('md')" color="blue" [initials]="c.nombre" [alt]="c.nombre" />
 ```
 
 El avatar no se toca solo: si la fila o la card es tocable, el área táctil (44 px o más) la da
-la fila, no el avatar. Hoy **ningún** avatar cambia de tamaño por breakpoint; las pantallas del
-cliente y del repartidor usan `lg` en las tarjetas, un paso por debajo de esta tabla.
+la fila, no el avatar. Medido el 06-10-2026: 56 de los 57 avatares de la app ya van con
+`bp.sizeAvatar(…)`; el único fijo es `pages/driver-onboarding/step-info/step-info.html:31`
+(`3xl`, tu foto al registrarte).
+
+### Por dispositivo (D16)
+
+El avatar 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» (`md` en una fila) | no se toca: no sube aunque sea un celular |
+| celular (380–767) | valor «mobile» (`lg` en una fila) | un paso más que en la computadora |
+| tablet táctil (`pointer: coarse`) | valor «web» (`md` en una fila) | no se toca: el puntero no cambia nada |
+| computadora (`pointer: fine`) | valor «web» (`md` en una fila) | |
+
+En el ultrawide, igual que en la computadora: el espacio extra va a más columnas, no a avatares
+más grandes.
+
+En master-pedidos: `[size]="bp.sizeAvatar('md')"` — recibe el valor de la computadora y en el
+celular devuelve el siguiente de la escala, con tope en `3xl` (no sube a `4xl`/`5xl`). No uses
+`bp.isMobile() ? 'lg' : 'md'`: `isMobile` incluye el celular chico, que va con el valor de web.
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -249,15 +272,55 @@ interface SuiAvatarConfig {
 - **No tiene `title`, ni output, ni es clickeable.** Para tocarlo, envuélvelo en un botón o en
   la card que ya lo es.
 
+## Bien y mal
+
+Estado de la cuenta de un empleado
+
+```html
+<!-- ❌ mal: el punto es presencia (conectado ahora), no «cuenta activa»; y sin alt (pages/employees/employees.html:70) -->
+<sui-avatar [size]="bp.sizeAvatar('lg')" color="orange" [initials]="employee.initials"
+  [status]="employee.status === 'Activo' ? 'online' : 'offline'" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-avatar [size]="bp.sizeAvatar('lg')" color="orange" [initials]="employee.initials" [alt]="employee.name" />
+<sui-badge [size]="bp.sizeBadge()" color="green">Activo</sui-badge>
+```
+
+Repartidor en una fila
+
+```html
+<!-- ❌ mal: sin alt, el lector de pantalla no dice quién es; y en una fila (aquí, el ranking de rendimiento) la tabla de tamaños pide md en web, no lg (pages/super-admin/master-drivers/master-drivers.html:256) -->
+<sui-avatar [size]="bp.sizeAvatar('lg')" color="green" [initials]="iniciales(d.nombre)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-avatar [size]="bp.sizeAvatar('md')" color="green" [initials]="iniciales(d.nombre)" [alt]="d.nombre" />
+```
+
+Color de una persona
+
+```html
+<!-- ❌ mal: el color sale del vehículo, no del rol. El conductor queda blue, que es el color de cliente, y el motorizado purple, que no dice ningún rol. Los dos son postulantes a repartidor: green. Y falta el alt (pages/super-admin/master-solicitudes/master-solicitudes.html:24) -->
+<sui-avatar [size]="bp.sizeAvatar('md')" [color]="f.tipo === 'conductor' ? 'blue' : 'purple'" [initials]="iniciales(f.nombre)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-avatar [size]="bp.sizeAvatar('md')" color="green" [initials]="iniciales(f.nombre)" [alt]="f.nombre" />
+```
+
 ## Ejemplo
 
 ```html
 <!-- Tu repartidor, en la tarjeta del seguimiento -->
-<sui-avatar size="lg" color="green" [src]="driverPhotoUrl()" [initials]="driverName" [alt]="driverName" />
+<sui-avatar [size]="bp.sizeAvatar('lg')" color="green" [src]="driverPhotoUrl()" [initials]="driverName" [alt]="driverName" />
 
 <!-- El local, en una fila -->
-<sui-avatar size="md" color="orange" [src]="tenantLogo" [initials]="tenantName" [alt]="tenantName" />
+<sui-avatar [size]="bp.sizeAvatar('md')" color="orange" [src]="tenantLogo" [initials]="tenantName" [alt]="tenantName" />
 
 <!-- Todavía sin repartidor -->
-<sui-avatar size="md" color="gray" icon="e-bike-2-line" alt="Sin repartidor" />
+<sui-avatar [size]="bp.sizeAvatar('md')" color="gray" icon="e-bike-2-line" alt="Sin repartidor" />
 ```

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

@@ -23,7 +23,8 @@ conectados en una zona. Cada persona se ve chica; el grupo es lo que cuenta.
 ## Qué variante usar
 
 > **La guía del DS dice qué es y sus tamaños, no cuándo usarlo.** Lo marcado «según la guía
-> del DS» sale de su texto o de su código; el resto es **propuesta, falta aprobación**.
+> del DS» sale de su texto o de su código; lo marcado «canon» ya lo aprobó el dueño; el resto es
+> **propuesta, falta aprobación**.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos directos**. En el DS no lo
 > monta ningún componente: `sui-table` solo lo nombra como contenido que se proyecta en una celda.
@@ -39,11 +40,11 @@ conectados en una zona. Cada persona se ve chica; el grupo es lo que cuenta.
 
 | input | valor | cuándo | fuente |
 |---|---|---|---|
-| `size` | `sm` (24) | Dentro de una fila: «los que tomaron pedidos hoy». | propuesta |
-| `size` | `md` (32, default SUI) | La card del equipo de un local. | propuesta |
-| `size` | `lg` (40) | La cabecera de un panel (repartidores en la zona). | propuesta |
-| `size` | `xs`, `xl` a `5xl` | No usar hoy: en `xs` el «+N» no se lee; desde `xl` ya no es un resumen. | propuesta |
-| `max` | `3` | Tres visibles y el «+N», como el ejemplo de la guía. El default de SUI es `4`. | propuesta |
+| `size` | `sm` (24) | Dentro de una fila: «los que tomaron pedidos hoy». | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `size` | `md` (32, default SUI) | La card del equipo de un local. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `size` | `lg` (40) | La cabecera de un panel (repartidores en la zona). | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `size` | `xs`, `xl` a `5xl` | No usar hoy: en `xs` el «+N» no se lee; desde `xl` ya no es un resumen. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `max` | `3` | Tres visibles y el «+N», como el ejemplo de la guía. El default de SUI es `4`. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 | `items` | — | Cada item es `{ src, initials, color, alt }`. Las reglas de foto y color son las de `sui-avatar`: la foto de otra persona es su `avatarUrl` de Storage, y el `color` va **siempre** explícito por rol (sin `color` el item cae a `slate`). | canon (`CLAUDE.md`, «Fotos de otra persona») · canon (aprobado por el dueño, 03-10-2026: naranja local, verde repartidor, azul cliente) |
 
 Usos de hoy que rompen la regla: **0** (no hay usos).
@@ -53,7 +54,10 @@ Usos de hoy que rompen la regla: **0** (no hay usos).
 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**.
+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).
+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 |
 |---|---|---|
@@ -61,9 +65,29 @@ el celular (cliente, repartidor) va directo el valor de mobile. Todo es **propue
 | dentro de una card | `lg` (40) | `md` (32) |
 
 ```html
-<sui-avatar-group [size]="bp.isMobile() ? 'md' : 'sm'" [max]="3" [items]="equipo" />
+<sui-avatar-group [size]="bp.sizeAvatar('sm')" [max]="3" [items]="equipo" />
 ```
 
+### Por dispositivo (D16)
+
+El grupo no se toca: sigue la misma regla que `sui-avatar` y 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» (`sm` en una fila, `md` en una card) | no se toca: no sube aunque sea un celular |
+| celular (380–767) | valor «mobile» (`md` en una fila, `lg` en una card) | un paso más que en la computadora |
+| tablet táctil (`pointer: coarse`) | valor «web» | no se toca: el puntero no cambia nada |
+| computadora (`pointer: fine`) | valor «web» | |
+
+En el ultrawide, igual que en la computadora.
+
+En master-pedidos: `[size]="bp.sizeAvatar('sm')"` (fila) · `[size]="bp.sizeAvatar('md')"` (card).
+No hay un helper propio del grupo: `sizeAvatar` sirve porque usa la misma escala (`SuiAvatarSize`).
+No uses `bp.isMobile() ? 'md' : 'sm'`: `isMobile` incluye el celular chico, que va con el valor
+de web. Ojo: con `bp.sizeAvatar('lg')` (cabecera de un panel) el celular sale en `xl`, que arriba
+está en «no usar» — pendiente de decidir si la cabecera se queda en `lg` también en el celular.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -103,10 +127,52 @@ interface SuiAvatarGroupItem {
 - El solape cambia con el tamaño (−4 px en `xs`/`sm`, −16 px desde `2xl`): en `lg` las iniciales
   de dos letras quedan tapadas a medias.
 
+## Bien y mal
+
+Hoy no hay usos en la app (0 el 06-10-2026): los pares salen de las reglas de arriba.
+
+Color de cada persona
+
+```html
+<!-- ❌ mal: items sin color caen a slate y no dicen el rol (ver «size y max») -->
+<sui-avatar-group [size]="bp.sizeAvatar('md')" [max]="3"
+  [items]="[{ initials: 'Carlos Mamani', alt: 'Carlos Mamani' }, { initials: 'Ana Torres', alt: 'Ana Torres' }]" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-avatar-group [size]="bp.sizeAvatar('md')" [max]="3"
+  [items]="[{ initials: 'Carlos Mamani', color: 'green', alt: 'Carlos Mamani' }, { initials: 'Ana Torres', color: 'green', alt: 'Ana Torres' }]" />
+```
+
+Grupo dentro de una fila
+
+```html
+<!-- ❌ mal: en xs (20 px) el «+N» no se lee, y sin [max] salen 4 en vez de 3 -->
+<sui-avatar-group size="xs" [items]="equipo" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-avatar-group [size]="bp.sizeAvatar('sm')" [max]="3" [items]="equipo" />
+```
+
+Tamaño fijo en una pantalla que se ve en los dos
+
+```html
+<!-- ❌ mal: md fijo en el panel; en el celular queda un paso por debajo (D16) -->
+<sui-avatar-group size="md" [max]="3" [items]="equipo" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-avatar-group [size]="bp.sizeAvatar('md')" [max]="3" [items]="equipo" />
+```
+
 ## Ejemplo
 
 ```html
-<sui-avatar-group size="md" [max]="3" [items]="[
+<sui-avatar-group [size]="bp.sizeAvatar('md')" [max]="3" [items]="[
   { initials: 'Carlos Mamani', color: 'green', alt: 'Carlos Mamani' },
   { src: repartidor2.avatarUrl, initials: repartidor2.nombre, color: 'green', alt: repartidor2.nombre },
   { initials: 'Luis Huamán', color: 'green', alt: 'Luis Huamán' },

package/docs/sui-badge/README.md

@@ -77,7 +77,7 @@ Regla corta: **etiqueta, número o estado con muchos valores → badge · comple
 fijos y los ternarios legibles en el template; el resto de los 77 dinámicos, que salen de
 funciones o campos, no):
 
-- **5 casos.** «Pendiente» en `red`: `pages/super-admin/super-admin.html:626`. «Pendiente» en
+- **5 casos.** «Pendiente» en `red`: `pages/super-admin/super-admin.html:637`. «Pendiente» en
   `yellow` (ausente): `pages/super-admin/master-gastos/master-gastos.html:67` y `:115`. «No cuadra»
   en `yellow`: `pages/super-admin/master-gastos/master-gastos.html:60` y `:129`. Los cinco pasan a
   `orange`.
@@ -117,7 +117,7 @@ un paso más fuerte con texto **oscuro**; `filled` = fondo saturado con texto bl
 
 - **16 `light` → `lighter`** (salvo que estén sobre superficie teñida; no se verificó
   renderizado). Ejemplos: `pages/super-admin/master-drivers/master-drivers.html:781`, `:783`, `:785`,
-  `pages/super-admin/master-users/master-user-sheet.html:44`, `pages/reports/reports.html:215`.
+  `pages/super-admin/master-users/master-user-sheet.html:44`, `pages/reports/reports.html:217`.
 - **1 `filled` como metadato → `lighter`:** `pages/customer/profile/profile.html:122` («Por defecto»).
   A discutir: `pages/public/pricing/pricing.html:37` (el «Popular» del plan destacado).
 - **1 `lighter` sobre superficie oscura → `dark`:** `pages/mi-negocio/mi-negocio.html:89` («Mes gratis»).
@@ -126,9 +126,8 @@ un paso más fuerte con texto **oscuro**; `filled` = fondo saturado con texto bl
 
 | eje | valor | cuándo | fuente |
 |---|---|---|---|
-| `size` | `small` (default, 16 px) | Lo normal. **Va en MAYÚSCULAS.** | según la guía del DS (mayúsculas y default) |
-| `size` | `small` | Una o dos palabras, justamente por las mayúsculas. | canon (aprobado por el dueño, 03-10-2026) |
-| `size` | `medium` (20 px) | Texto que no debe ir en mayúsculas (nombres, montos) o un badge que acompaña un título grande. | canon (aprobado por el dueño, 03-10-2026) |
+| `size` | `small` (default, 16 px) | **No usar**: es chico (D16). Es el default del componente, así que hay que pasar `size` siempre. Va en MAYÚSCULAS (eso sí es de la guía). Hasta el 05-10-2026 era el normal de web. | D16, dueño 05-10-2026 (reemplaza la regla del 03-10-2026) · mayúsculas y default: según la guía del DS |
+| `size` | `medium` (20 px) | **Lo normal en la computadora, la tablet y el celular chico** (el badge no se toca), sin mayúsculas. En el celular, `large` o `xlarge` (ver «Tamaño»). | canon (dueño, 05-10-2026, D16); antes, canon del 03-10-2026 solo para nombres, montos y títulos grandes |
 | `type` | `number` | **Números**: queda cuadrado/circular. | según la guía del DS |
 | `type` | `number` | Va con `filled` cuando el conteo pide acción. | canon (aprobado por el dueño, 03-10-2026) |
 | `type` | `with-dot` | Un estado **vivo** que cambia solo (abierto, en línea, en curso). La guía lo muestra pero no dice cuándo. | canon (aprobado por el dueño, 03-10-2026) |
@@ -156,7 +155,7 @@ pedidos con muchos estados (`pages/orders/orders.html:113`) se quedan como badge
 
 ## Tamaño en mobile y en web
 
-En mobile el badge se lee de más lejos y al lado de textos de 16 px; en web va más chico.
+En mobile el badge se lee de más lejos y al lado de textos de 16 px; en la computadora, la tablet y el celular chico va `medium`, un paso más chico (P1 b), y nunca `small` (D16).
 `large` (24) y `xlarge` (28) son extensión SUI del 03-10-2026.
 
 | size | alto | texto | ícono del slot |
@@ -175,18 +174,49 @@ canon (dueño, 04-10-2026):** el badge mantiene su escala propia 12 / 14 / 16 (`
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| estado en una lista o card | `large` (24) | `small` (16, mayúsculas) | canon (aprobado por el dueño, 03-10-2026) |
-| junto a un título o un monto | `xlarge` (28) | `medium` (20) | propuesta, falta aprobación |
-| conteo (`type="number"`) | `large` (24) | `small` (16) | propuesta, falta aprobación |
-
-Patrón (`bp` = `BreakpointsService`, mobile hasta 767 px). Medido el 04-10-2026: solo 6 de los
-214 badges de la app lo aplican (`pages/customer/cart/cart.html:71`,
-`pages/customer/order-history/order-history.html:176`…); el resto va con `size` fijo:
+| estado en una lista o card | `large` (24) | `medium` (20) | mobile: canon (aprobado por el dueño, 03-10-2026) · web: canon (dueño, 05-10-2026, D16), antes `small` (03-10-2026) · un paso de diferencia: canon (dueño, 05-10-2026, P1 b) |
+| junto a un título o un monto | `xlarge` (28) | `medium` (20) | canon (dueño, 05-10-2026, P1 b) |
+| conteo (`type="number"`) | `large` (24) | `medium` (20) | canon (dueño, 05-10-2026, P1 b); web `medium`: canon (dueño, 05-10-2026, D16) · antes de migrar, ver en captura que el contador de 24 no tape el ícono de la barra inferior |
+
+Patrón (`bp` = `BreakpointsService`). Medido el 06-10-2026 en `master-pedidos/src/app` (sin
+`master-preview`, `master-prototipos`, `mockup-sheets-*`, `dx/*`, `master-rutina`, `master-medico`
+ni `dev-index`): 211 de los 228 badges ya van con `bp.sizeBadge()`. Quedan **17 fijos**:
+
+- **2 en `small`**, el conteo de la barra inferior: `components/glass-tab-bar/glass-tab-bar.html:16`
+  y `:33` (pendiente de ver en captura que el de 24 no tape el ícono).
+- **15 en `medium`**, que en el celular no suben (van a `large`, o a `xlarge` si están junto a un
+  título o un monto, según la tabla de arriba):
+  `components/product-categories/product-categories.html:17` y `:52`,
+  `components/total-sales/total-sales.html:20`, `components/metrics-cards/metrics-cards.html:15`,
+  `pages/products/products.html:61`, `pages/customers/customers.html:16`,
+  `pages/discounts/discounts.html:20`,
+  `pages/super-admin/master-semanas/master-semanas.html:26`, `:40`, `:52` y `:64`,
+  `pages/overview/components/overview-visitors/overview-visitors.html:11`,
+  `pages/overview/components/overview-conversion/overview-conversion.html:11`,
+  `pages/overview/components/overview-sales/overview-sales.html:11` y
+  `pages/reports/reports.html:40`.
 
 ```html
-<sui-badge [size]="bp.isMobile() ? 'large' : 'small'" …/>
+<sui-badge [size]="bp.sizeBadge()" …/>
 ```
 
+### Por dispositivo (D16)
+
+El badge no se toca: sube **solo en el celular de 380 px o más**. Fuente: D16, dueño 05-10-2026.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `medium` | no se toca: no sube aunque sea un celular |
+| celular (380–767) | `large` (`xlarge` junto a un título o un monto) | un paso más que en la computadora |
+| tablet táctil (`pointer: coarse`) | `medium` | no se toca: el puntero no cambia nada |
+| computadora (`pointer: fine`) | `medium` | nunca `small`; `medium` va sin MAYÚSCULAS |
+
+En el ultrawide, igual que en la computadora.
+
+En master-pedidos: `[size]="bp.sizeBadge()"` (`large` en el celular, `medium` en el resto). Junto
+a un título o un monto, donde el celular va en `xlarge`, el helper no alcanza (solo devuelve
+`large` o `medium`): `[size]="bp.celular() ? 'xlarge' : 'medium'"`.
+
 ## API
 
 <!-- api:inicio -->
@@ -233,15 +263,53 @@ interface SuiBadgeConfig {
 - `disabled` no baja la opacidad: pinta todo en los grises de deshabilitado.
 - El host lleva `role="status"`: el lector de pantalla anuncia los cambios.
 
+## Bien y mal
+
+Estado pendiente
+
+```html
+<!-- ❌ mal: red es error; «Pendiente» pide atención (pages/super-admin/super-admin.html:637) -->
+<sui-badge variant="lighter" color="red" [size]="bp.sizeBadge()">Pendiente</sui-badge>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-badge color="orange" [size]="bp.sizeBadge()">Pendiente</sui-badge>
+```
+
+Categoría en una lista
+
+```html
+<!-- ❌ mal: light es solo para una superficie ya teñida; en una lista va lighter (pages/reports/reports.html:217) -->
+<sui-badge variant="light" color="gray" [size]="bp.sizeBadge()">{{ product.category }}</sui-badge>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-badge color="gray" [size]="bp.sizeBadge()">{{ product.category }}</sui-badge>
+```
+
+Metadato al lado de un nombre
+
+```html
+<!-- ❌ mal: filled es para un conteo que pide acción o encima de una foto; «Por defecto» es un metadato sin carga, va gray lighter (pages/customer/profile/profile.html:122) -->
+<sui-badge variant="filled" color="orange" [size]="bp.sizeBadge()">Por defecto</sui-badge>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-badge color="gray" [size]="bp.sizeBadge()">Por defecto</sui-badge>
+```
+
 ## Ejemplo
 
 ```html
 <!-- Metadato en una lista: lighter (default) -->
-<sui-badge color="green">Conectado</sui-badge>
+<sui-badge color="green" [size]="bp.sizeBadge()">Conectado</sui-badge>
 
 <!-- Estado vivo -->
-<sui-badge color="green" type="with-dot">Abierto</sui-badge>
+<sui-badge color="green" type="with-dot" [size]="bp.sizeBadge()">Abierto</sui-badge>
 
 <!-- Conteo que pide acción -->
-<sui-badge color="orange" variant="filled" type="number">3</sui-badge>
+<sui-badge color="orange" variant="filled" type="number" [size]="bp.sizeBadge()">3</sui-badge>
 ```

package/docs/sui-banner/README.md

@@ -44,7 +44,7 @@ puesto.
 
 > La guía del DS dice **para qué** es el banner, pero no cuándo va cada relleno ni cada tipo. Lo
 > marcado «según la guía del DS» sale de su texto o de sus ejemplos publicados; lo marcado
-> «canon» ya lo aprobó el dueño en el README de `sui-alert`; el resto es **propuesta** y falta su ok.
+> «canon» ya lo aprobó el dueño (en el README de `sui-alert` o el 05-10-2026); el resto es **propuesta** y falta su ok.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`, sin contar prototipos ni vitrinas
 > (`master-preview`, `master-prototipos`, `mockup-*`, `dx/*`, `_guia-*`, `master-rutina`,
@@ -67,10 +67,10 @@ Los mismos cinco tipos que `sui-alert`, con el mismo significado.
 
 | variant | cuándo | ejemplo real de la app | fuente |
 |---|---|---|---|
-| `info` (default) | Un dato de toda la app que conviene saber y no pide nada: hay una versión nueva, estás viendo datos de prueba. | (sin uso hoy) | propuesta (sigue la regla canon del alert) |
-| `success` | Un estado bueno que dura y afecta a todo: «Tu local ya está publicado». Si es la confirmación de un clic, es toast. | (sin uso hoy) | propuesta (sigue la regla canon del alert) |
-| `warning` | Hay que hacer algo pronto o lo que hagas tiene consecuencia para toda la cuenta: el plan vence, estás administrando un local que no es tuyo. | `components/subscription-banner/subscription-banner.html:5` («Tu plan vence en 3 días») · candidato: `components/impersonation-banner/impersonation-banner.ts:17` | propuesta (sigue la regla canon del alert) |
-| `error` | Algo ya pasó y afecta a toda la cuenta. | `components/subscription-banner/subscription-banner.html:5` («Tu plan venció») | propuesta (sigue la regla canon del alert) |
+| `info` (default) | Un dato de toda la app que conviene saber y no pide nada: hay una versión nueva, estás viendo datos de prueba. | (sin uso hoy) | canon (aprobado por el dueño, 05-10-2026, bloque B3) (sigue la regla canon del alert) |
+| `success` | Un estado bueno que dura y afecta a todo: «Tu local ya está publicado». Si es la confirmación de un clic, es toast. | (sin uso hoy) | canon (aprobado por el dueño, 05-10-2026, bloque B3) (sigue la regla canon del alert) |
+| `warning` | Hay que hacer algo pronto o lo que hagas tiene consecuencia para toda la cuenta: el plan vence, estás administrando un local que no es tuyo. | `components/subscription-banner/subscription-banner.html:5` («Tu plan vence en 3 días») · candidato: `components/impersonation-banner/impersonation-banner.ts:17` | canon (aprobado por el dueño, 05-10-2026, bloque B3) (sigue la regla canon del alert) |
+| `error` | Algo ya pasó y afecta a toda la cuenta. | `components/subscription-banner/subscription-banner.html:5` («Tu plan venció») | canon (aprobado por el dueño, 05-10-2026, bloque B3) (sigue la regla canon del alert) |
 | `feature` | Novedad que alcanza a toda la app. **Aquí es gris**, no morado como en el alert. | (sin uso hoy) | canon (decisión documentada en el `.ts`, recogida en el README del alert) |
 
 ### `variantStyle` — el peso visual
@@ -79,20 +79,20 @@ Misma pregunta que en el alert: **¿este aviso tiene que ganarle a todo lo demá
 
 | variantStyle | cuándo | ejemplo real de la app | fuente |
 |---|---|---|---|
-| `lighter` | El aviso **acompaña**: hay que tenerlo presente, pero se puede seguir trabajando. Es el caso normal. | `subscription-banner.html:7` en el caso «vence en N días» (hoy en `light`) | propuesta |
-| `filled` (default de la guía) | Hay que **actuar ya**, o la app está en un **modo que cambia lo que haces**: el plan venció, estás administrando otro local. Uno a la vez. | `subscription-banner.html:7` («Tu plan venció») | propuesta |
-| `light` | No usar hoy, como en el alert. **Cuándo sí:** un banner dentro de una zona ya teñida, donde `lighter` se pierde. | — | propuesta |
-| `stroke` (default SUI) | No usar hoy: un banner blanco con borde se confunde con la barra superior. **Cuándo sí:** arriba de una pantalla a sangre (un mapa o una foto), donde la banda blanca sí se distingue. | — | propuesta |
+| `lighter` | El aviso **acompaña**: hay que tenerlo presente, pero se puede seguir trabajando. Es el caso normal. | `subscription-banner.html:7` en el caso «vence en N días» (hoy en `light`) | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `filled` (default de la guía) | Hay que **actuar ya**, o la app está en un **modo que cambia lo que haces**: el plan venció, estás administrando otro local. Uno a la vez. | `subscription-banner.html:7` («Tu plan venció») | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `light` | No usar hoy, como en el alert. **Cuándo sí:** un banner dentro de una zona ya teñida, donde `lighter` se pierde. | — | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `stroke` (default SUI) | No usar hoy: un banner blanco con borde se confunde con la barra superior. **Cuándo sí:** arriba de una pantalla a sangre (un mapa o una foto), donde la banda blanca sí se distingue. | — | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 ### `dismissible`, `showIcon`, acción y título
 
 | prop | valor | cuándo | fuente |
 |---|---|---|---|
-| `dismissible` | `true` | Solo si el aviso se puede ignorar sin problema (versión nueva, novedad). La guía lo muestra en todos sus ejemplos. | según la guía del DS (que exista) · propuesta (cuándo) |
-| `dismissible` | `false` (default) | Todo `filled` y todo aviso que tiene que seguir ahí: plan vencido, administrando otro local. Cerrarlo no arregla nada. | propuesta |
-| `showIcon` | `true` (default) | Siempre: el ícono es la mitad del significado del tipo. | propuesta |
-| `showIcon` | `false` | No usar hoy. **Cuándo sí:** cuando se proyecta un avatar o logo en `slot="icon"` (ver abajo), que ya ocupa ese lugar. | propuesta |
-| `slot="icon"` | avatar o logo | Reemplaza al ícono del tipo: el logo del local que estás administrando. | propuesta |
+| `dismissible` | `true` | Solo si el aviso se puede ignorar sin problema (versión nueva, novedad). La guía lo muestra en todos sus ejemplos. | según la guía del DS (que exista) · canon (aprobado por el dueño, 05-10-2026, bloque B8) (cuándo) |
+| `dismissible` | `false` (default) | Todo `filled` y todo aviso que tiene que seguir ahí: plan vencido, administrando otro local. Cerrarlo no arregla nada. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `showIcon` | `true` (default) | Siempre: el ícono es la mitad del significado del tipo. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `showIcon` | `false` | No usar hoy. **Cuándo sí:** cuando se proyecta un avatar o logo en `slot="icon"` (ver abajo), que ya ocupa ese lugar. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `slot="icon"` | avatar o logo | Reemplaza al ícono del tipo: el logo del local que estás administrando. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `slot="action"` | **un** `sui-link-button` `variant="modifiable"` con `[underline]="true"` | La única acción del banner: «Renovar plan», «Salir», «Actualizar». Nunca un `sui-button`, nunca dos. | según la guía del DS |
 | `title` | frase corta | Lo que pasa, en sentence case y sin punto final. | canon (copy de la app) |
 | `description` | complemento | Qué hacer o hasta cuándo. Una línea en web; en mobile se envuelve. | según la guía del DS (una línea) |
@@ -106,7 +106,7 @@ Misma pregunta que en el alert: **¿este aviso tiene que ganarle a todo lo demá
 - **Barra hecha a mano que es un banner — 1:** `components/impersonation-banner/impersonation-banner.ts:17`
   («Estás administrando … como super admin» + botón «Salir»), con `#fff` y `rgb()` sueltos. Pasaría a
   `<sui-banner variant="warning" variantStyle="filled">` con un link «Salir».
-- **Romperían la propuesta — 1 `light` → `lighter`:** `components/subscription-banner/subscription-banner.html:7`
+- **Rompe el canon (aprobado por el dueño, 05-10-2026, bloque B2) — 1 `light` → `lighter`:** `components/subscription-banner/subscription-banner.html:7`
   (el caso «vence en N días»).
 - No confundir: `components/upgrade-banner/` (6 pantallas) se llama «banner» pero es un aviso dentro
   de una sección; su destino es `sui-alert`, ya anotado en `docs/CANON-SUI.md`.
@@ -119,19 +119,37 @@ El banner **no tiene `size`**: mide 44 px de alto en web, centrado; en mobile (
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | la barra | 44 px mínimo, crece si el texto envuelve | 44 px fijos, una línea | según el componente |
-| el link de acción | `large` (24 px) | `medium` (20 px) | propuesta, falta aprobación |
+| el link de acción | **pendiente (P8)**: `medium` con el área de 44 en la barra (a, recomendada) o `large` (b) | `medium` (20 px) | web: D16, dueño 05-10-2026 · mobile: pendiente P8 (antes decía `large` como propuesta) |
 | la X de cerrar | se ve de 24 px; **se toca en 44 × 44** | se ve de 24; se toca en 40 × 40 | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono (antes 40, pedido del dueño 03-10-2026): área táctil invisible, extensión SUI |
 
 ```html
 <sui-banner variant="warning" variantStyle="lighter" title="Tu plan vence en 3 días"
   description="Renueva para seguir recibiendo pedidos">
-  <sui-link-button slot="action" variant="modifiable" [underline]="true"
-    [size]="bp.isMobile() ? 'large' : 'medium'" (clicked)="renovar()">Renovar plan</sui-link-button>
+  <sui-link-button slot="action" variant="modifiable" [underline]="true" (clicked)="renovar()">Renovar plan</sui-link-button>
 </sui-banner>
 ```
 
-`size="large"` del link-button ya está publicado (la app usa 0.22.0). Hoy el link del banner de la
-suscripción (`subscription-banner.html:10`) sigue con `medium` en las dos.
+`size="large"` del link-button ya está publicado (la app usa 0.24.1), pero mientras P8 siga
+pendiente el link queda en su default (`medium`), que es como está hoy el de la suscripción
+(`subscription-banner.html:10`).
+
+### Por dispositivo (D16)
+
+La barra **no tiene `size`**: su alto lo decide el ancho (≤ 767 px envuelve con mínimo de 44; más
+ancho, 44 fijos en una línea). Lo único que cambia por dispositivo es el link del slot `action`, que
+sigue la fila de `link-button` de D16.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | link `medium` | la barra envuelve; la X se toca en 44 × 44 |
+| celular (380–767) | link **pendiente (P8)** | la barra envuelve; la X se toca en 44 × 44. Ningún size del link llega a 44 por sí solo |
+| tablet táctil (`pointer: coarse`) | link **pendiente (P8)** | con ≥ 768 px la barra va en una línea y la X se toca en 40 × 40: el área de 44 sale con `max-width: 767px`, no con el puntero (el mixin `sui-tactil` está propuesto, sin aprobar) |
+| computadora (`pointer: fine`) | link `medium` | 44 px fijos, una línea; X en 40 × 40 |
+
+Ultrawide: igual que la computadora; el banner ya ocupa todo el ancho de su contenedor.
+
+En master-pedidos: el banner no lleva `[size]`; el link va sin `[size]` (su default `medium`)
+hasta que se decida P8. No hay helper en `BreakpointsService` para el link.
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -188,6 +206,53 @@ y `[slot=action]` (el link).
 - En mobile, una pantalla con modal a pantalla completa tapa el banner: el de la suscripción se
   esconde con `uiOverlay.fullscreenOpen()` para no quedar encima.
 
+## Bien y mal
+
+**Aviso de un pedido, no de toda la app**
+
+```html
+<!-- ❌ mal: es el cobro de UN pedido, dentro de su detalle (driver-order-detail.html:410) -->
+<sui-banner [variant]="pagaElLocal() ? 'error' : 'info'" variantStyle="filled"
+  [title]="quienPagaTitulo()" [description]="cobro" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-alert [variant]="pagaElLocal() ? 'error' : 'info'" [variantStyle]="pagaElLocal() ? 'filled' : 'lighter'"
+  [title]="quienPagaTitulo()" [description]="cobro" />
+```
+
+**Plan por vencer: acompaña, no grita**
+
+```html
+<!-- ❌ mal: `light` no se usa hoy; el aviso que acompaña es `lighter` (subscription-banner.html:7) -->
+<sui-banner [variant]="isDanger() ? 'error' : 'warning'"
+  [variantStyle]="isDanger() ? 'filled' : 'light'" [title]="bannerTitle()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-banner [variant]="isDanger() ? 'error' : 'warning'"
+  [variantStyle]="isDanger() ? 'filled' : 'lighter'" [title]="bannerTitle()" />
+```
+
+**Modo de toda la app hecho a mano**
+
+```html
+<!-- ❌ mal: barra propia con #fff y un <button> suelto (impersonation-banner.ts:17) -->
+<div class="imp" role="status">
+  <span class="imp__text">Estás administrando <strong>{{ t.name }}</strong> como super admin</span>
+  <button type="button" class="imp__exit" (click)="exit()">Salir</button>
+</div>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-banner variant="warning" variantStyle="filled" [title]="'Estás administrando ' + t.name + ' como super admin'">
+  <sui-link-button slot="action" variant="modifiable" [underline]="true" (clicked)="exit()">Salir</sui-link-button>
+</sui-banner>
+```
+
 ## Ejemplo
 
 ```html