@ajuarezso/sui-design-system 0.24.1 → 0.25.1

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

@@ -22,8 +22,8 @@ modal, el resultado de una acción («Cuenta bloqueada», «Gracias por califica
 
 ## Qué variante usar
 
-> **La guía del DS no tiene página para este componente.** Todo es **propuesta, falta
-> aprobación**.
+> **La guía del DS no tiene página para este componente.** Las reglas marcadas canon están
+> aprobadas (05-10-2026); los tamaños quedaron en canon el 05-10-2026 (P1 b).
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos directos**. Lo usan por dentro
 > `sui-content-label` y `sui-payment-icon`.
@@ -32,8 +32,8 @@ modal, el resultado de una acción («Cuenta bloqueada», «Gracias por califica
 
 | valor | cuándo | fuente |
 |---|---|---|
-| `lighter` | El ícono dice un estado: el color del fondo **es** el significado («Cuenta bloqueada» en rojo, «Calificación enviada» en verde). | propuesta |
-| `stroke` (default) | Ícono neutro al inicio de una fila, sobre fondo blanco. **Siempre con `color="gray"`.** | propuesta |
+| `lighter` | El ícono dice un estado: el color del fondo **es** el significado («Cuenta bloqueada» en rojo, «Calificación enviada» en verde). | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `stroke` (default) | Ícono neutro al inicio de una fila, sobre fondo blanco. **Siempre con `color="gray"`.** | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 ### `color` — mismo significado que el badge, salvo `teal`
 
@@ -43,25 +43,25 @@ ni un color para stable.
 
 | valor | estado de la paleta | cuándo | fuente |
 |---|---|---|---|
-| `gray` (default) | faded | Neutro. El único color para `stroke`. | propuesta |
-| `blue` | information | Información. | propuesta |
-| `orange` | warning | Pendiente, pide atención. | propuesta |
-| `red` | error | Error, bloqueado, rechazado. | propuesta |
-| `green` | success | Bien, listo, aprobado. | propuesta |
-| `yellow` | away | En pausa. | propuesta |
-| `purple` | feature | Novedad. | propuesta |
-| `pink` | highlighted | Destacado. | propuesta |
-| `teal` | verified | Verificado. | propuesta |
+| `gray` (default) | faded | Neutro. El único color para `stroke`. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `blue` | information | Información. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `orange` | warning | Pendiente, pide atención. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `red` | error | Error, bloqueado, rechazado. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `green` | success | Bien, listo, aprobado. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `yellow` | away | En pausa. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `purple` | feature | Novedad. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `pink` | highlighted | Destacado. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `teal` | verified | Verificado. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
 
 ### `size`
 
 | valor | ícono | cuándo | fuente |
 |---|---|---|---|
-| `32` | 20 | Filas densas. | propuesta |
-| `40` (default) | 20 | Filas de una lista. | propuesta |
-| `48` | 24 | Cards. | propuesta |
-| `56` | 28 | Cabecera de un modal. | propuesta |
-| `64` | 32 | El resultado de un modal: cuenta bloqueada, calificación enviada. | propuesta |
+| `32` | 20 | Filas densas. | canon (dueño, 05-10-2026, P1 b) |
+| `40` (default) | 20 | Filas de una lista. | canon (dueño, 05-10-2026, P1 b) |
+| `48` | 24 | Cards. | canon (dueño, 05-10-2026, P1 b) |
+| `56` | 28 | Cabecera de un modal. | canon (dueño, 05-10-2026, P1 b) |
+| `64` | 32 | El resultado de un modal: cuenta bloqueada, calificación enviada. | canon (dueño, 05-10-2026, P1 b) |
 
 **Usos de hoy que romperían la propuesta: 7 círculos con ícono hechos a mano.** Dos son un
 `sui-key-icon` `lighter` exacto: `components/cuenta-bloqueada/cuenta-bloqueada.html:4` (64 px,
@@ -74,10 +74,12 @@ 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. Todo es **propuesta**.
+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.
 
 | uso | mobile | web |
 |---|---|---|
@@ -86,9 +88,28 @@ el celular (cliente, repartidor) va directo el valor de mobile. Todo es **propue
 | 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 |
@@ -118,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`
@@ -73,7 +73,7 @@ Es el reemplazo del `sui-button` `ghost` `primary`.
 |---|---|---|
 | `large` (24 px, texto 16, ícono 20) | Mobile, donde se lee y se toca con el dedo: el link suelto de una pantalla de teléfono. | propuesta: el tamaño es extensión SUI aprobada (03-10-2026); el «cuándo» falta aprobarlo |
 | `medium` (20 px, default) | Lo normal: cabeceras de sección, párrafos, acciones sueltas. | default según la guía del DS; el «cuándo» es canon (aprobado por el dueño, 03-10-2026) |
-| `small` (16 px) | Junto a un dato en una fila: «Cambiar», «Mi billetera», «Cambiar mi calificación». | canon (aprobado por el dueño, 03-10-2026) |
+| `small` (16 px) | No usar: es chico. Junto a un dato en una fila («Cambiar», «Mi billetera») va `medium` en web. | canon (dueño, 05-10-2026, D16), reemplaza la regla del 03-10-2026 |
 
 ### `underline`
 
@@ -87,8 +87,8 @@ Es el reemplazo del `sui-button` `ghost` `primary`.
 | prop | cuándo | fuente |
 |---|---|---|
 | `rightIcon` (`arrow-right-s-line`) | Cuando el link lleva a otra pantalla: «Ver la carta», «Mi billetera». | canon (aprobado por el dueño, 03-10-2026) |
-| `leftIcon` | Cuando el ícono dice la acción: descargar, editar, agregar, ver. «Descargar la app», «Agregar nota para el conductor». | propuesta |
-| los dos a la vez | No: con dos íconos el link deja de leerse como texto. | propuesta |
+| `leftIcon` | Cuando el ícono dice la acción: descargar, editar, agregar, ver. «Descargar la app», «Agregar nota para el conductor». | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| los dos a la vez | No: con dos íconos el link deja de leerse como texto. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 
 Los íconos son nombres RemixIcon sin el prefijo `ri-`. Miden 20 px en `large` y `medium`, y 16 px en `small`.
 
@@ -96,27 +96,30 @@ Los íconos son nombres RemixIcon sin el prefijo `ri-`. Miden 20 px en `large` y
 
 | disabled | cuándo | fuente |
 |---|---|---|
-| `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: propuesta |
+| `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`
 
 | prop | cuándo | fuente |
 |---|---|---|
-| `href` | Navegar, sin otra acción: el componente pinta un `<a>` real. Las rutas internas (`/cliente/…`) navegan con el Router, sin recargar. | propuesta |
-| `target="_blank"` | Solo para destinos externos: la descarga, un documento, WhatsApp. **Pon también `rel="noopener noreferrer"`**: aquí el default de `rel` es `null`. | propuesta |
-| `type="submit"` | Solo dentro de un `<form>`. El resto, `button` (default). | propuesta (mismo criterio que `sui-button`) |
-| `ariaLabel` | Cuando el texto visible no basta fuera de contexto: «Descargar la app» → «Descargar la app de Master Pedidos». | propuesta |
+| `href` | Navegar, sin otra acción: el componente pinta un `<a>` real. Las rutas internas (`/cliente/…`) navegan con el Router, sin recargar. | canon (aprobado por el dueño, 05-10-2026, bloque B10) |
+| `target="_blank"` | Solo para destinos externos: la descarga, un documento, WhatsApp. **Pon también `rel="noopener noreferrer"`**: aquí el default de `rel` es `null`. | canon (aprobado por el dueño, 05-10-2026, bloque B10) |
+| `type="submit"` | Solo dentro de un `<form>`. El resto, `button` (default). | canon (aprobado por el dueño, 05-10-2026, bloque B10) (mismo criterio que `sui-button`) |
+| `ariaLabel` | Cuando el texto visible no basta fuera de contexto: «Descargar la app» → «Descargar la app de Master Pedidos». | canon (aprobado por el dueño, 05-10-2026, bloque B10) |
 
 ## 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 web, con mouse,
-va un tamaño más chico. La app ya lo resuelve con `BreakpointsService`
-(`src/app/services/breakpoints.service.ts`, mobile = hasta 767 px):
-`[size]="bp.isMobile() ? 'large' : 'small'"`. Medido el 04-10-2026 en `master-pedidos`: 166 `[size]`
-con `bp` (142 `large`/`medium`, 22 `large`/`small`, 2 `medium`/`xsmall`). Regla del dueño, 03-10-2026.
+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 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 |
 |---|---|---|---|
@@ -130,23 +133,42 @@ con `bp` (142 `large`/`medium`, 22 `large`/`small`, 2 `medium`/`xsmall`). Regla
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | link suelto (cabecera de sección, «Omitir», «Ver todas») | `large` (24) | `medium` (20) | web: canon (aprobado por el dueño, 03-10-2026) · mobile `large`: propuesta: el tamaño es extensión SUI aprobada (03-10-2026); el «cuándo» falta aprobarlo (antes era `medium`) |
-| junto a un dato en una fila («Cambiar», «Mi billetera») | `medium` (20) | `small` (16) | canon (aprobado por el dueño, 03-10-2026) |
-| dentro de un párrafo | el del texto que lo rodea | el del texto que lo rodea | propuesta |
+| junto a un dato en una fila («Cambiar», «Mi billetera») | `medium` (20) | `medium` (20) | web: canon (dueño, 05-10-2026, D16), antes `small` · mobile `medium`: canon (aprobado por el dueño, 03-10-2026); D16 lo llevaría a `large`, pero el tamaño del link en el teléfono espera P8 |
+| dentro de un párrafo | el del texto que lo rodea | el del texto que lo rodea | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 
 ```html
 <sui-link-button variant="primary" [size]="bp.isMobile() ? 'large' : 'medium'" rightIcon="arrow-right-s-line">Ver todas</sui-link-button>
-<sui-link-button variant="gray" [size]="bp.isMobile() ? 'medium' : 'small'" rightIcon="arrow-right-s-line">Mi billetera</sui-link-button>
+<sui-link-button variant="gray" size="medium" rightIcon="arrow-right-s-line">Mi billetera</sui-link-button>
 ```
 
 **Ningún tamaño llega a 44 px**: el link mide 16–24 de alto y no tiene padding. En mobile el área
 táctil la pone el contenedor: la fila o el bloque donde vive tiene que medir 44 px o más de alto, o
-dejar aire alrededor del link. `small` (16) no va en mobile. Medido el 04-10-2026: los 4 de
+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í
 
@@ -183,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.
@@ -201,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
@@ -208,7 +277,7 @@ Slots: `<ng-content>` (el texto).
 <sui-link-button variant="primary" (clicked)="verTodas()">Ver todas</sui-link-button>
 
 <!-- Junto a un dato, lleva a otra pantalla -->
-<sui-link-button variant="gray" size="small" rightIcon="arrow-right-s-line" (clicked)="irABilletera()">
+<sui-link-button variant="gray" rightIcon="arrow-right-s-line" (clicked)="irABilletera()">
   Mi billetera
 </sui-link-button>
 

package/docs/sui-logo/README.md

@@ -27,7 +27,8 @@ uno solo.
 ## Qué variante usar
 
 > **La guía del DS no tiene este componente**: es propio de SUI, porque es la marca de la app.
-> Todo lo de abajo es **propuesta, falta aprobación**; los ejemplos salen de cómo se usa hoy.
+> Todo lo de abajo es **canon** (aprobado por el dueño el 05-10-2026, o la decisión que cita cada fila); los ejemplos salen
+> de cómo se usa hoy.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: 10 logos en 8 archivos, sin contar
 > prototipos ni vitrinas. 4 `horizontal`, 3 `stacked`, 3 `markOnly`; 7 con `[height]` y 3 con `size`.
@@ -36,9 +37,9 @@ uno solo.
 
 | valor | cuándo | ejemplo real de la app | fuente |
 |---|---|---|---|
-| `horizontal` (default) | Barras y cabeceras: la M a la izquierda y la palabra en dos líneas. | `layouts/public/public-layout.html:4` · `pages/public/pedido-en-vivo/pedido-en-vivo.html:72` · `pages/role-selector/role-selector.html:10` | propuesta |
-| `stacked` | Pantallas de marca centradas: la M arriba y la palabra abajo. | `pages/empresa/about/about.html:12` · `components/ota-update/ota-update.html:118` | propuesta |
-| `[markOnly]="true"` | Donde la palabra no entra o ya está escrita al lado: nav mobile, login. | `layouts/public/public-layout.html:6` · `pages/auth/login/login.html:3` | propuesta |
+| `horizontal` (default) | Barras y cabeceras: la M a la izquierda y la palabra en dos líneas. | `layouts/public/public-layout.html:4` · `pages/public/pedido-en-vivo/pedido-en-vivo.html:72` · `pages/role-selector/role-selector.html:10` | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `stacked` | Pantallas de marca centradas: la M arriba y la palabra abajo. | `pages/empresa/about/about.html:12` · `components/ota-update/ota-update.html:118` | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `[markOnly]="true"` | Donde la palabra no entra o ya está escrita al lado: nav mobile, login. | `layouts/public/public-layout.html:6` · `pages/auth/login/login.html:3` | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 No existe la versión de una sola línea («Master Pedidos» en un renglón): es otro dibujo.
 
@@ -48,14 +49,14 @@ No existe la versión de una sola línea («Master Pedidos» en un renglón): es
 
 | valor | alto | cuándo | fuente |
 |---|---|---|---|
-| `xs` / `sm` | 16 / 20 | No usar hoy: la palabra no se lee (con `markOnly` sí sirve). | propuesta |
-| `md` (default) | 24 | Barra de una página pública. | propuesta |
-| `lg` | 32 | Nav pública, login. | propuesta |
-| `xl` | 40 | Pantalla de actualización. | propuesta |
-| `2xl` | 48 | Selector de rol. | propuesta |
-| `height` | libre | **Solo para más de 48 px**: el apilado de 120 en «Acerca de» y en la actualización. | propuesta |
-
-**Usos de hoy que romperían la propuesta: 4 `[height]` que van a la escala.**
+| `xs` / `sm` | 16 / 20 | No usar hoy: la palabra no se lee (con `markOnly` sí sirve). | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `md` (default) | 24 | Barra de una página pública. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `lg` | 32 | Nav pública, login. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `xl` | 40 | Pantalla de actualización. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `2xl` | 48 | Selector de rol. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `height` | libre | **Solo para más de 48 px**: el apilado de 120 en «Acerca de» y en la actualización. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+
+**Usos de hoy que romperían la regla: 4 `[height]` que van a la escala.**
 `components/ota-update/ota-update.html:17` (`40` → `size="xl"`),
 `pages/public/pedido-en-vivo/pedido-en-vivo.html:72` (`22` → `md`),
 `layouts/public/public-layout.html:6` (`28` → `lg`), `pages/customer/about/about.html:19` (`44` → `xl` o `2xl`).
@@ -64,10 +65,10 @@ No existe la versión de una sola línea («Master Pedidos» en un renglón): es
 
 | combinación | cuándo | fuente |
 |---|---|---|
-| de marca (default): M `--sui-primary-base` + palabra `--sui-text-strong-950` | Sobre fondo claro. **No hace falta pasar los colores**: ya son el default. | propuesta |
-| monocromo: todo `--sui-text-strong-950` | Login y nav pública, donde el naranja ya está en el botón principal. | propuesta |
-| blanco: todo `--sui-static-white` | Sobre naranja o sobre foto. `static-white` no cambia con el tema. | propuesta |
-| cualquier otro color | No usar. | propuesta |
+| de marca (default): M `--sui-primary-base` + palabra `--sui-text-strong-950` | Sobre fondo claro. **No hace falta pasar los colores**: ya son el default. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| monocromo: todo `--sui-text-strong-950` | Login y nav pública, donde el naranja ya está en el botón principal. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| blanco: todo `--sui-static-white` | Sobre naranja o sobre foto. `static-white` no cambia con el tema. | canon (decisión del dueño, regla de tres blancos del modo oscuro: `static-white` sobre fondo fijo) |
+| cualquier otro color | No usar. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
 
 **Usos de hoy redundantes: 6** pasan a mano los colores que ya son el default (no rompen nada,
 sobran): `components/ota-update/ota-update.html:17`, `pages/role-selector/role-selector.html:10`,
@@ -80,15 +81,18 @@ sobran): `components/ota-update/ota-update.html:17`, `pages/role-selector/role-s
 
 | input | cuándo | fuente |
 |---|---|---|
-| `[decorative]="true"` | Cuando al lado ya está escrito «Master Pedidos» (el título de «Acerca de»): así el lector de pantalla no lo dice dos veces. | propuesta |
-| `ariaLabel` | No tocar: ya dice «Master Pedidos». | propuesta |
+| `[decorative]="true"` | Cuando al lado ya está escrito «Master Pedidos» (el título de «Acerca de»): así el lector de pantalla no lo dice dos veces. | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
+| `ariaLabel` | No tocar: ya dice «Master Pedidos». | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
 
 ## Tamaño en mobile y en web
 
-En mobile se lee y se toca con el dedo, así que va más grande; en web, más chico. En las
-pantallas que se usan en los dos (panel del local, super admin) se elige con el servicio de
-breakpoints de la app (`bp`, en `services/breakpoints.service.ts`); en las que solo existen en
-el celular (cliente, repartidor) va directo el valor de mobile. Todo es **propuesta**.
+En 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 |
 |---|---|---|
@@ -103,6 +107,34 @@ el celular (cliente, repartidor) va directo el valor de mobile. Todo es **propue
 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 |
@@ -138,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