@ajuarezso/sui-design-system 0.19.0 → 0.21.0

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

@@ -0,0 +1,125 @@
+---
+name: sui-key-icon
+selector: sui-key-icon
+resumen: Un ícono dentro de un círculo, con fondo de color si el ícono dice un estado
+alternativas: [sui-icon (el ícono suelto), sui-avatar (cuando es una persona o un local), sui-payment-icon (el círculo ya armado para un pago de servicio)]
+---
+
+# sui-key-icon
+
+Story: [Atoms/Icon/Key Icon](https://sui-design-system.web.app/?path=/docs/atoms-icon-key-icon--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** cuando un ícono tiene que **anclar** algo: el inicio de una fila, la cabecera de un
+modal, el resultado de una acción («Cuenta bloqueada», «¡Gracias por calificar!»).
+
+**No lo uses** para:
+
+- Una persona o un local: `sui-avatar`.
+- Un ícono dentro de un texto o un botón: `sui-icon`.
+- Algo que se toca: no es clickeable (sin foco, sin output). Envuélvelo en la card o el botón.
+
+## Qué variante usar
+
+> **La guía del DS no tiene página para este componente.** Todo es **propuesta, falta
+> aprobación**.
+>
+> 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`.
+
+### `styleVariant`
+
+| 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 |
+
+### `color` — mismo significado que el badge
+
+| 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 |
+
+### `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 |
+
+**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,
+fondo `error-lighter`) y `components/driver-rate-modal/driver-rate-modal.html:17` (64 px,
+`success-lighter`). Los otros cinco se acercan (40–48 px, fondos neutros o `primary-alpha-10`):
+`pages/envios/envios.html:27`, `pages/customer/mandadito/mandadito.html:255`,
+`pages/customer/confirmation/confirmation.html:29`,
+`pages/customer/order-tracking/order-tracking.html:487`, `pages/products/add-product/add-product.html:74`.
+Se encontraron buscando reglas `*icon*` con `border-radius: 50%`, fondo y 32–64 px: puede haber más.
+
+## Tamaño en mobile y en web
+
+En mobile se lee y se toca con el dedo, así que va más grande; en web, más chico. En las
+pantallas que se usan en los dos (panel del local, super admin) se elige con el servicio de
+breakpoints de la app (`bp`, en `services/breakpoints.service.ts`); en las que solo existen en
+el celular (cliente, repartidor) va directo el valor de mobile. Todo es **propuesta**.
+
+| uso | mobile | web |
+|---|---|---|
+| inicio de una fila | `40` | `32` |
+| card | `48` | `40` |
+| resultado de un modal | `64` | `56` |
+
+```html
+<sui-key-icon name="lock-line" styleVariant="lighter" color="red" [size]="bp.isMobile() ? 64 : 56" />
+```
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `stroke` con un color que no sea `gray` | el color solo tiñe el ícono y se confunde con `lighter` | ninguno: si el color significa algo, es `lighter` |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `name` | `string` | — (requerido) |
+| `styleVariant` | `'stroke' \| 'lighter'` | `'stroke'` |
+| `color` | `'gray' \| 'blue' \| 'orange' \| 'red' \| 'green' \| 'yellow' \| 'purple' \| 'pink' \| 'teal'` | `'gray'` |
+| `size` | `32 \| 40 \| 48 \| 56 \| 64` | `40` |
+
+Outputs: ninguno.
+<!-- api:fin -->
+
+## Trampas
+
+- **El estilo se llama `styleVariant`**, no `variant` ni `style` (choca con el `style` del HTML).
+- **`size` es un número**: `[size]="48"`. Con `size="48"` (string) no compila.
+- **El ícono no baja de 20 px**: en `32` sigue en 20 (es el Figma), en el resto es la mitad.
+- **El default es `stroke` `gray`**: si quieres el círculo de color, pide `lighter` explícito.
+- `name` va sin `ri-`, como en `sui-icon`.
+
+## Ejemplo
+
+```html
+<!-- Resultado de un modal -->
+<sui-key-icon name="lock-line" styleVariant="lighter" color="red" [size]="64" />
+
+<!-- Inicio de una fila -->
+<sui-key-icon name="store-2-line" />
+```

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

@@ -0,0 +1,221 @@
+---
+name: sui-link-button
+selector: sui-link-button
+resumen: Acción que se lee como texto, sin caja
+alternativas: [sui-button (acción con caja: la principal o la secundaria de un grupo), sui-compact-button (solo ícono, sin texto), sui-alert (sus acciones se pasan en actions[] y ya salen como link)]
+---
+
+# sui-link-button
+
+Story: [Atoms/Button/Link Button](https://sui-design-system.web.app/?path=/docs/atoms-button-link-button--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para una acción que se lee como texto: «Ver todas» en la cabecera de una sección,
+«Omitir» o «Ahora no», «Términos y condiciones» dentro de un párrafo, «Cambiar» junto a un dato.
+Es el reemplazo del `sui-button` `ghost` `primary`.
+
+**No lo uses** para:
+
+- **La acción principal** de un grupo: `sui-button` `filled`.
+- **Abrir una acción destructiva grande** (cancelar un pedido, rechazarlo, anular un gasto):
+  `sui-button` `stroke` `error`. El link `error` es para quitar algo menor.
+- **Las acciones de un alert o un toast**: se pasan en `actions[]` y el componente ya las pinta
+  como link `modifiable`. No proyectes un link-button a mano dentro.
+- **Un ícono solo**: `sui-compact-button`.
+
+## Qué variante usar
+
+> **La guía del DS no dice cuándo usar cada variante.** Su página muestra los cinco colores,
+> los dos tamaños, el subrayado, los íconos y el deshabilitado, sin do/don't. Las reglas de
+> abajo son **canon (aprobado por el dueño, 03-10-2026)** salvo donde dice otra fuente.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: 22 link-buttons en 17 archivos, sin
+> contar prototipos ni vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`,
+> `dx/*`, `master-rutina`, `master-medico`, `dev-index`) ni la copia local del componente en
+> `components/sui/sui-link-button/`. Variantes: 10 `gray` (1 por default), 7 `primary`,
+> 3 `error`, 2 `modifiable`, 0 `black`. Tamaños: 16 `medium`, 6 `small`. 8 con `leftIcon`,
+> 4 con `rightIcon`, 4 con `href`, 2 con `underline`, 2 con `disabled`.
+
+### Lo que sí dice la guía del DS
+
+- **Para qué es**: botones que se integran con el texto que los rodea.
+- **Defaults**: `gray` + `medium`. Igual que SUI.
+- **`modifiable` no tiene color propio**: hereda el del contenedor, para que lo pinte quien lo usa.
+- **Subrayado**: aparece al pasar el mouse; con `underline` queda fijo.
+- **Deshabilitado**: el texto pasa a `text-disabled-300` y se va el subrayado.
+- **Tamaños**: `large` (24 px, texto `label-md`, ícono 20; extensión SUI para mobile), `medium` (20 px, `label-sm`, ícono 20) y `small` (16 px, `label-xs`, ícono 16).
+
+### `variant`
+
+| variant | cuándo | ejemplo real de la app | fuente |
+|---|---|---|---|
+| `primary` | El link principal de una sección: «Ver todas», «Cambiar horario», «Descargar la app». Reemplaza al `sui-button` `ghost` `primary`. | `pages/customer/checkout/checkout.html:165` («Cambiar horario») · `pages/public/landing-business/landing-business.html:208` («Descargar la app») | canon (aprobado por el dueño, 03-10-2026) |
+| `gray` (default) | Salida de baja jerarquía: «Omitir», «Ahora no», «Cerrar sesión», «Más información». | `pages/account-suspended/account-suspended.html:70` («Cerrar sesión») · `pages/super-admin/master-approvals/master-approvals.html:90` («Más información») | canon (aprobado por el dueño, 03-10-2026) |
+| `black` | Un link dentro de un texto, con `underline`: «Términos y condiciones», «Ver política». | (sin uso hoy) | canon (aprobado por el dueño, 03-10-2026) |
+| `error` | Quitar algo menor, en texto: «Quitar», «Borrar foto». Nunca para abrir una destructiva grande. | (sin uso correcto hoy) | canon (aprobado por el dueño, 03-10-2026) |
+| `modifiable` | Toma el color del contenedor: las acciones del alert, del banner y del toast. | `components/sui/sui-toast/sui-toast-outlet.html:36` (acción del toast) · `components/subscription-banner/subscription-banner.html:10` («Renovar plan») | hereda el color: según la guía del DS · dónde va: canon (aprobado por el dueño, 03-10-2026) |
+
+**Usos de hoy que rompen la regla:**
+
+- **3 `error` que abren una destructiva grande → `sui-button` `stroke` `error`:**
+  `pages/super-admin/master-orders/master-orders.html:425` («Cancelar pedido»),
+  `pages/orders/orders.html:232` («Rechazar pedido»), `pages/central/central-gastos/central-gastos.html:101`
+  («Anular gasto»).
+- A discutir: `pages/super-admin/master-orders/master-orders.html:430` («Liberar» en `gray`): es una
+  acción de operación, no una salida de baja jerarquía.
+
+### `size`
+
+| size | cuándo | fuente |
+|---|---|---|
+| `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) |
+
+### `underline`
+
+| underline | cuándo | fuente |
+|---|---|---|
+| `false` (default) | Lo normal: la línea aparece al pasar el mouse o con foco. | según la guía del DS |
+| `true` | Solo la **primera** acción de un alert, banner o toast, o un link dentro de un párrafo (`black`). | solo la primera subrayada: según la guía del DS (alert) · el resto: canon (aprobado por el dueño, 03-10-2026) |
+
+### Íconos
+
+| 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 |
+
+Los íconos son nombres RemixIcon sin el prefijo `ri-`. Miden 20 px en `large` y `medium`, y 16 px en `small`.
+
+### `disabled`
+
+| 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 |
+
+Ejemplos: `components/add-product-modal/add-product-modal.html:330` («Vista previa» mientras guarda),
+`pages/orders/orders.html:232`.
+
+### `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 |
+
+## 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'"`, 27 usos hoy en `master-pedidos` (16 `large`/`small`,
+9 `large`/`medium`, 2 `medium`/`xsmall`). Regla del dueño, 03-10-2026.
+
+| size | alto | texto | ícono |
+|---|---|---|---|
+| `large` | 24 px | `label-md` 16/24 | 20 |
+| `medium` (default) | 20 px | `label-sm` 14/20 | 20 |
+| `small` | 16 px | `label-xs` 12/16 | 16 |
+
+`large` es extensión SUI (03-10-2026); Figma trae `medium` y `small`. El ícono de `large` es 20
+(como el `sui-button` large), no 24: con 24 el chevron pesa más que el texto.
+
+| 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 |
+
+```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>
+```
+
+**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: hoy hay 6 links `small` fijos
+(`pages/driver/driver-profile/driver-profile.html:258`, `:264`, `pages/driver/driver-dashboard/driver-dashboard.html:1089`,
+`pages/mi-negocio/mi-negocio.html:472`, `pages/customer/order-history/order-history.html:413`,
+`components/add-product-modal/add-product-modal.html:330`); los 4 de repartidor y cliente se usan
+sí o sí en el teléfono → `[size]="bp.isMobile() ? 'medium' : 'small'"`.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+Ningún valor del link-button está en «no usar»: los cinco colores, los tres tamaños y el
+subrayado tienen un caso. `black` y `error` hoy no tienen un uso correcto en la app, pero la regla
+de arriba dice dónde van.
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `variant` | `'gray' \| 'black' \| 'primary' \| 'error' \| 'modifiable'` | `'gray'` |
+| `size` | `'large' \| 'medium' \| 'small'` | `'medium'` |
+| `underline` | `boolean` | `false` |
+| `disabled` | `boolean` | `false` |
+| `leftIcon` | `string \| null` | `null` |
+| `rightIcon` | `string \| null` | `null` |
+| `href` | `string \| null` | `null` |
+| `target` | `string \| null` | `null` |
+| `rel` | `string \| null` | `null` |
+| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` |
+| `ariaLabel` | `string \| null` | `null` |
+
+| output | payload |
+|---|---|
+| `clicked` | `MouseEvent` |
+<!-- api:fin -->
+
+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`,
+  `pages/super-admin/master-approvals/master-approvals.html:90`, `pages/central/central-gastos/central-gastos.html:101`,
+  `pages/account-suspended/account-suspended.html:66` y `:70`, `pages/customer/viaje/viaje.html:215`).
+  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.
+- **`disabled` le gana a `href`**: deshabilitado, el componente pinta un `<button>` y el link desaparece.
+- `modifiable` sin un `color` en el contenedor hereda el color del texto que lo rodea: sobre una
+  superficie blanca sale gris oscuro, no naranja.
+- En hover, `primary` y `error` se oscurecen (`primary-dark`, `red-700`); con foco mantienen el
+  color base y solo se subrayan.
+- El subrayado va solo bajo el texto, no bajo los íconos.
+- Es `display: inline-flex` alineado a la base del texto: fluye dentro de un párrafo como un link
+  normal. Para posicionarlo suelto, lo ubica quien lo usa.
+- En `master-pedidos` hay una **copia local** en `src/app/components/sui/sui-link-button/` (la usa el
+  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.
+
+## Ejemplo
+
+```html
+<!-- Link principal de una sección -->
+<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()">
+  Mi billetera
+</sui-link-button>
+
+<!-- Link dentro de un párrafo -->
+<p>Al continuar aceptas la
+  <sui-link-button variant="black" [underline]="true" href="/privacidad">Política de privacidad</sui-link-button>.
+</p>
+
+<!-- Externo -->
+<sui-link-button variant="primary" leftIcon="download-2-line" href="https://master-pedidos.com/descargar"
+                 target="_blank" rel="noopener noreferrer" ariaLabel="Descargar la app de Master Pedidos">
+  Descargar la app
+</sui-link-button>
+```

package/docs/sui-logo/README.md

@@ -0,0 +1,152 @@
+---
+name: sui-logo
+selector: sui-logo
+resumen: El logo de Master Pedidos (la M y la palabra), dibujado en SVG y coloreable
+alternativas: [sui-brand-logo (logos de OTRAS marcas: WhatsApp, Google, Apple…), sui-avatar (el logo de un local, que es una foto)]
+---
+
+# sui-logo
+
+Story: [Atoms/Logo](https://sui-design-system.web.app/?path=/docs/atoms-logo--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** siempre que aparezca la marca Master Pedidos: barras, login, «Acerca de», la pantalla
+de actualización, las páginas públicas.
+
+**No lo uses** para:
+
+- El logo de un local: es una foto, va en `sui-avatar`.
+- Logos de terceros: `sui-brand-logo`.
+- El splash nativo (`index.html`): se pinta antes de que arranque Angular, así que es una copia a
+  mano en SVG. Si se cambia el logo, hay que tocar las dos.
+
+**Nunca un PNG o un SVG suelto del logo**: con `sui-logo` el color sigue al tema y el dibujo es
+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.
+>
+> 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`.
+
+### `orientation` y `markOnly`
+
+| 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 |
+
+No existe la versión de una sola línea («Master Pedidos» en un renglón): es otro dibujo.
+
+### `size` y `height`
+
+`size` fija el **alto**; el ancho sale solo.
+
+| 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.**
+`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`).
+
+### `markColor` y `textColor`
+
+| 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 |
+
+**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`,
+`pages/empresa/about/about.html:12`.
+
+**Logo que no pasa por el componente: 1.** `components/landing-footer/landing-footer.html:7` usa
+`assets/landing/logo-blanco.png` → `sui-logo` con los dos colores en `--sui-static-white`.
+
+### `decorative` y `ariaLabel`
+
+| 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 |
+
+## 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**.
+
+| uso | mobile | web |
+|---|---|---|
+| barra | `[markOnly]="true"` `size="lg"` | `horizontal` `size="lg"` |
+| pantalla de entrada (selector de rol, login) | `2xl` (48) | `xl` (40) |
+| pantalla de marca («Acerca de», actualización) | `stacked` `[height]="120"` | igual |
+
+```html
+<sui-logo size="lg" [markOnly]="bp.isMobile()" />
+```
+
+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.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `size` `xs`, `sm` con palabra | la palabra no se lee | con `markOnly`: el ícono chico en una firma o un pie de página |
+| un color fuera de los tres | la marca es naranja, negra o blanca | ninguno previsto |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `orientation` | `'horizontal' \| 'stacked'` | `'horizontal'` |
+| `markOnly` | `boolean` | `false` |
+| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` | `'md'` |
+| `height` | `number \| string \| null` | `null` |
+| `markColor` | `string` | `'var(--sui-primary-base)'` |
+| `textColor` | `string` | `'var(--sui-text-strong-950)'` |
+| `decorative` | `boolean` | `false` |
+| `ariaLabel` | `string` | `'Master Pedidos'` |
+
+Outputs: ninguno.
+<!-- api:fin -->
+
+## Trampas
+
+- **`height` gana sobre `size`.** Un número son px; un string es cualquier valor CSS (`'60%'`).
+- **Los colores van por custom property**: `markColor="var(--sui-primary-base)"` funciona; un
+  `fill` puesto desde afuera, no.
+- **Con `markOnly`, `orientation` no hace nada.**
+- **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.
+
+## Ejemplo
+
+```html
+<!-- Barra de una página pública -->
+<sui-logo size="md" />
+
+<!-- «Acerca de»: el título ya dice el nombre -->
+<sui-logo orientation="stacked" [height]="120" [decorative]="true" />
+
+<!-- Sobre el fondo naranja -->
+<sui-logo [markOnly]="true" size="2xl" markColor="var(--sui-static-white)" />
+```