@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,308 @@
+---
+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
+
+<!-- generado por scripts/gen-docs.mjs — no editar a mano; `npm run docs` -->
+
+> **De dónde sale este doc.** El criterio es el del SUI Angular (`sui-link-button`); la API es la de este
+> paquete, leída del código. Los ejemplos se pasaron de Angular de forma mecánica: lo literal va como
+> atributo (`only-icon`, `size="large"`), lo dinámico entre llaves (`size={expr}` → `el.size = expr`)
+> y los eventos como `onValueChange={…}` → `el.addEventListener('valueChange', …)`. `@if`, `@for` y
+> `<ng-template>` quedan como en Angular: se leen como pseudocódigo.
+
+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` (el 04-10-2026 ya son 23): 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**: `medium` (20 px, `label-sm`, ícono 20) y `small` (16 px, `label-xs`, ícono 16).
+  `large` (24 px, `label-md`, ícono 20) **no está en la guía**: es extensión de SUI para mobile.
+
+### `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:89` («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:**
+
+- **4 `error` que abren una destructiva grande → `sui-button` `stroke` `error`:**
+  `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:774` («Cancelar» el
+  pedido, en `large`; nuevo, medido el 04-10-2026).
+- 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`
+
+| 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) | 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`
+
+| 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». | 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`.
+
+### `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: canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+
+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. | 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 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 |
+|---|---|---|---|
+| `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) | `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'} right-icon="arrow-right-s-line">Ver todas</sui-link-button>
+<sui-link-button variant="gray" size="medium" right-icon="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 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: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: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í
+
+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` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `ariaLabel` | `aria-label` | `null \| string` | `null` |
+| `disabled` | `disabled` | `boolean` | `false` |
+| `href` | `href` | `null \| string` | `null` |
+| `leftIcon` | `left-icon` | `null \| string` | `null` |
+| `rel` | `rel` | `null \| string` | `null` |
+| `rightIcon` | `right-icon` | `null \| string` | `null` |
+| `size` | `size` | `"large" \| "medium" \| "small"` | `'medium'` |
+| `target` | `target` | `null \| string` | `null` |
+| `type` | `type` | `"button" \| "reset" \| "submit"` | `'button'` |
+| `underline` | `underline` | `boolean` | `false` |
+| `variant` | `variant` | `"black" \| "error" \| "gray" \| "modifiable" \| "primary"` | `'gray'` |
+
+| evento | `event.detail` |
+|---|---|
+| `clicked` | `MouseEvent` |
+
+Slots: `(por defecto)`.
+
+### Diferencias con el SUI Angular
+
+Ninguna en nombres de props, eventos y valores.
+<!-- api:fin -->
+
+Slots: `<slot>` (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 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: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.
+- **`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.
+
+## 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" onClicked={() => showCancelModal.set(true)}>
+  Cancelar {comoSeLlama}
+</sui-link-button>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-button variant="stroke" color="error" size={bp.sizeControl()} onClick={() => 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" right-icon="arrow-right-s-line"
+  onClicked={() => goToProducts()}>Ir a Productos</sui-link-button>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-link-button variant="gray" size="medium" right-icon="arrow-right-s-line"
+  onClicked={() => 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}
+  onClick={() => cambiar(f, 'nueva')}>Reabrir</sui-link-button>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-link-button variant="gray" size="medium" disabled={ocupada() === f.id}
+  onClicked={() => cambiar(f, 'nueva')}>Reabrir</sui-link-button>
+```
+
+## Ejemplo
+
+```html
+<!-- Link principal de una sección -->
+<sui-link-button variant="primary" onClicked={() => verTodas()}>Ver todas</sui-link-button>
+
+<!-- Junto a un dato, lleva a otra pantalla -->
+<sui-link-button variant="gray" right-icon="arrow-right-s-line" onClicked={() => irABilletera()}>
+  Mi billetera
+</sui-link-button>
+
+<!-- Link dentro de un párrafo -->
+<p>Al continuar aceptas la
+  <sui-link-button variant="black" underline href="/privacidad">Política de privacidad</sui-link-button>.
+</p>
+
+<!-- Externo -->
+<sui-link-button variant="primary" left-icon="download-2-line" href="https://master-pedidos.com/descargar"
+                 target="_blank" rel="noopener noreferrer" aria-label="Descargar la app de Master Pedidos">
+  Descargar la app
+</sui-link-button>
+```

package/docs/sui-logo/README.md

@@ -0,0 +1,235 @@
+---
+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
+
+<!-- generado por scripts/gen-docs.mjs — no editar a mano; `npm run docs` -->
+
+> **De dónde sale este doc.** El criterio es el del SUI Angular (`sui-logo`); la API es la de este
+> paquete, leída del código. Los ejemplos se pasaron de Angular de forma mecánica: lo literal va como
+> atributo (`only-icon`, `size="large"`), lo dinámico entre llaves (`size={expr}` → `el.size = expr`)
+> y los eventos como `onValueChange={…}` → `el.addEventListener('valueChange', …)`. `@if`, `@for` y
+> `<ng-template>` quedan como en Angular: se leen como pseudocódigo.
+
+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 **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`.
+
+### `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` | 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) |
+| `mark-only` | 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.
+
+### `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). | 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`).
+
+### `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. | 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`,
+`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` | 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 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 |
+|---|---|---|
+| barra | `mark-only` `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.
+
+### 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 `mark-only` `lg` | valor de web en el tamaño; la palabra tampoco entra en la barra |
+| celular (380–767) | entrada `2xl` · barra `mark-only` `lg` | sube un paso (P1 b) |
+| tablet táctil, 600–767 | entrada `2xl` · barra `mark-only` `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 |
+|---|---|---|
+| `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` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `ariaLabel` | `aria-label` | `string` | `'Master Pedidos'` |
+| `decorative` | `decorative` | `boolean` | `false` |
+| `height` | `height` | `null \| number \| string` | `null` |
+| `markColor` | `mark-color` | `string` | `'var(--sui-primary-base)'` |
+| `markOnly` | `mark-only` | `boolean` | `false` |
+| `orientation` | `orientation` | `"horizontal" \| "stacked"` | `'horizontal'` |
+| `size` | `size` | `"2xl" \| "lg" \| "md" \| "sm" \| "xl" \| "xs"` | `'md'` |
+| `textColor` | `text-color` | `string` | `'var(--sui-text-strong-950)'` |
+
+Eventos: ninguno.
+
+### Diferencias con el SUI Angular
+
+Ninguna en nombres de props, eventos y valores.
+<!-- 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.
+
+## 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" mark-color="var(--sui-static-white)" text-color="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"
+  mark-color="var(--sui-primary-base)" text-color="var(--sui-text-strong-950)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-logo size={bp.celular() ? '2xl' : 'xl'} />
+```
+
+## 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 />
+
+<!-- Sobre el fondo naranja -->
+<sui-logo mark-only size="2xl" mark-color="var(--sui-static-white)" />
+```