@ajuarezso/sui-design-system 0.19.0 → 0.21.0

package/docs/sui-drawer-header/README.md

@@ -0,0 +1,140 @@
+---
+name: sui-drawer-header
+selector: sui-drawer-header
+resumen: Cabecera de un panel lateral (título, descripción, cerrar); hoy sin contenedor en SUI y sin uso en la app
+alternativas: [sui-modal (con title y description: la cabecera de todos los modales de la app), sui-modal-header (la cabecera suelta del modal), sui-page-header (título de una página)]
+---
+
+# sui-drawer-header
+
+Story: [Molecules/Drawer/Drawer Header](https://sui-design-system.web.app/?path=/docs/molecules-drawer-drawer-header--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Hoy no se usa.** SUI no tiene el contenedor del drawer (el panel que sale del borde): solo esta
+cabecera y su pie. En la app, todo lo que se abre encima es un `sui-modal` (fullscreen en mobile,
+canon) o un `sui-modal-sheet`, y su cabecera sale de los inputs `title` y `description` del modal.
+
+**Úsalo** cuando exista un panel lateral de web (un detalle que se abre a la derecha sin tapar la
+lista, como el pedido en el panel de órdenes) y haga falta su cabecera.
+
+**No lo uses** para:
+
+- La cabecera de un modal o un sheet: `sui-modal` con `title`/`description` (o `sui-modal-header`).
+- El título de una página: `sui-page-header`.
+- Mobile: un panel lateral en 390 px es un modal fullscreen.
+
+Regla corta: **modal o sheet → sui-modal con title · panel lateral de web → drawer-header (cuando exista el panel).**
+
+## Qué variante usar
+
+> **Lo que dice la guía del DS**: el drawer es «un panel que sale desde el borde de la pantalla».
+> Su cabecera trae título y **botón de cerrar visible por default**. No habla de tipos ni tamaños.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`): **0 usos**.
+
+### `type`
+
+| type | cuándo | fuente |
+|---|---|---|
+| `basic` (default) | Lo normal: título y cerrar. | propuesta, falta aprobación |
+| `left-icon` | El ícono dice de qué es el panel antes de leer («history-line» en el historial). En `small` va suelto (24); en `large`/`xlarge`, en un círculo con borde. | propuesta, falta aprobación |
+
+### `size`
+
+| size | qué cambia | cuándo | fuente |
+|---|---|---|---|
+| `small` (default) | 64 px, todo en una línea; **no muestra `description`** | Panel con título que se explica solo. Es el único que admite `link`. | propuesta, falta aprobación |
+| `large` | 88 px, título arriba y `description` debajo | Panel que necesita una línea de contexto («Últimos 30 días»). | propuesta, falta aprobación |
+| `xlarge` | padding 24, título 20, descripción 16 | No: extensión de SUI sin caso; en web no hace falta letra más grande. | propuesta, falta aprobación |
+
+### Lo demás
+
+| input | valor | cuándo | fuente |
+|---|---|---|---|
+| `showDismiss` | `true` (default) | Siempre. | según la guía del DS (cerrar visible por default) |
+| `showDismiss` | `false` | Solo si el panel no se puede cerrar sin decidir (y entonces es un modal, no un drawer). | propuesta, falta aprobación |
+| `showDivider` | `true` | Cuando el cuerpo scrollea por debajo de la cabecera. | propuesta, falta aprobación |
+| `badge` | número | Pendientes dentro del panel (círculo rojo). | propuesta, falta aprobación |
+| `badge` | texto o `SuiBadgeConfig` | Un estado o etiqueta al lado del título. Pasa `variant: 'lighter'`: el default de aquí es `light` (ver Trampas). | canon (README de `sui-badge`: `lighter` en cabeceras) |
+| `link` | texto | Una acción menor en la cabecera («Ver todo»). Solo en `small`. | propuesta, falta aprobación |
+| `dismissAriaLabel` | «Cerrar» (default) | Ya está en español. | según el código |
+
+Usos de hoy que rompen las reglas: **0** (no se usa).
+
+## Tamaño en mobile y en web
+
+**No tiene tamaño para mobile**: el botón de cerrar mide **24 px** (compact-button `large`), lejos de
+los 40-44 del dedo. Es una pieza de web.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| cabecera de panel | no se usa: `sui-modal` fullscreen con `title` | `small` o `large` | propuesta, falta aprobación |
+
+```html
+@if (!bp.isMobile()) {
+  <sui-drawer-header size="large" title="Pedido #1042" description="Sabores Andinos · hace 5 min" (dismiss)="cerrar()" />
+}
+```
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| el componente entero | SUI no tiene el panel que lo contiene; los modales traen su cabecera | un panel lateral de detalle en web (el pedido en el panel de órdenes) |
+| `xlarge` | sin caso | nunca en web |
+| `showDismiss` en `false` | un panel siempre se cierra | nunca en un drawer |
+| en mobile | cerrar de 24 px | nunca |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `type` | `'basic' \| 'left-icon'` | `'basic'` |
+| `size` | `'small' \| 'large' \| 'xlarge'` | `'small'` |
+| `title` | `string` | `''` |
+| `description` | `string \| null` | `null` |
+| `icon` | `string \| null` | `null` |
+| `badge` | `SuiBadgeConfig \| number \| string \| null` | `null` |
+| `link` | `SuiLinkConfig \| string \| null` | `null` |
+| `showDismiss` | `boolean` | `true` |
+| `showDivider` | `boolean` | `false` |
+| `dismissAriaLabel` | `string` | `'Cerrar'` |
+
+| output | payload |
+|---|---|
+| `dismiss` | `MouseEvent` |
+| `linkClick` | `MouseEvent` |
+<!-- api:fin -->
+
+```ts
+type SuiDrawerHeaderType = 'basic' | 'left-icon';
+type SuiDrawerHeaderSize = 'small' | 'large' | 'xlarge';
+```
+
+## Trampas
+
+- **`description` no se ve en `small`** y **`link` no se ve en `large`/`xlarge`**: los dos se pasan
+  sin error y no aparecen.
+- **El badge de texto sale `orange` + `light` por default**, que va contra el canon del badge
+  (`lighter` en cabeceras, naranja solo si pide atención). Pasa un `SuiBadgeConfig` completo.
+- **`badge` en `0` sí se dibuja** (un círculo rojo con «0»). Pasa `null` para no mostrarlo.
+- **`left-icon` sin `icon` no dibuja nada.**
+- El título es un `<h2>`: si la página ya tiene un `h2` al mismo nivel, revisa el orden de títulos.
+- No hay contenedor: el fondo, el ancho y la animación del panel los pones tú.
+
+## Ejemplo
+
+```html
+<sui-drawer-header
+  type="left-icon"
+  size="large"
+  icon="history-line"
+  title="Historial de pedidos"
+  description="Últimos 30 días"
+  [showDivider]="true"
+  (dismiss)="cerrar()" />
+```

package/docs/sui-emoji/README.md

@@ -0,0 +1,138 @@
+---
+name: sui-emoji
+selector: sui-emoji
+resumen: Un emoji 3D animado (Fluent) para los momentos con emoción: estados vacíos, celebraciones, onboarding
+alternativas: [sui-icon (ícono funcional, monocromo), sui-empty-state (el estado vacío completo, que ya trae su emoji)]
+---
+
+# sui-emoji
+
+Story: [Atoms/Emoji](https://sui-design-system.web.app/?path=/docs/atoms-emoji--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** donde la pantalla tiene que **sentirse**, no solo funcionar: un estado vacío, «¡Pedido
+confirmado!», los pasos de una landing, la barra de calificación.
+
+**No lo uses** para:
+
+- Un ícono funcional (un botón, una fila, un menú): eso es `sui-icon`. Un emoji no es un ícono.
+- Muchos a la vez animados: cada uno es un APNG de ~1 MB en bucle.
+- Una imagen propia que no es un emoji (la moneda de sol): un `<img>`.
+
+## Qué variante usar
+
+> **La guía del DS no tiene este componente**: es propio de SUI. Lo marcado «canon» ya es regla
+> del proyecto; el resto es **propuesta, falta aprobación**.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: 10 emojis en 3 archivos, sin contar
+> prototipos ni vitrinas. El catálogo tiene 59.
+
+### Dónde va
+
+| caso | cómo | fuente |
+|---|---|---|
+| Estados vacíos y celebraciones | Emoji animado, uno solo, en `xl`. Nada de íconos genéricos en un estado vacío. | canon (preferencia del dueño: emojis animados en los estados vacíos) |
+| Pasos de una landing | `lg`, uno por paso. | propuesta |
+| Junto a un título o dentro de un texto | `md` o `sm`, como acento. | propuesta |
+| Como ícono de un botón | No: el botón lleva `leftIcon`. | propuesta |
+
+### `size`
+
+| valor | px | cuándo | fuente |
+|---|---|---|---|
+| `xl` | 48 | Estado vacío, celebración. | propuesta |
+| `lg` | 32 | Pasos de una landing, la barra de calificación. | propuesta |
+| `md` (default) | 24 | Acompaña un título. | propuesta |
+| `sm` | 20 | Dentro de una línea de texto. | propuesta |
+| `xs` | 16 | No usar hoy. | propuesta |
+| `full` | 100 % | Llena su caja: lo usa `sui-empty-state`. | propuesta |
+
+### `animated`, `src`, `name`, `ariaLabel`
+
+| input | cuándo | fuente |
+|---|---|---|
+| `animated` (default `true`) | Uno solo → animado. **Varios a la vez → `false`.** Ojo: solo las 5 caritas de la calificación (`pensive-face` … `grinning-face-smiling-eyes`) tienen copia estática; para el resto, `false` no cambia nada. | propuesta (la regla ya está escrita en `sui-emoji.ts`) |
+| `name` | Uno del catálogo. Si no está, se agrega al catálogo del DS. | propuesta |
+| `src` | Un emoji que no está en el catálogo, mientras se agrega. **Nunca** un `<img>` suelto con la URL del emoji. | propuesta |
+| `ariaLabel` | Solo si el emoji dice algo que el texto no dice. Si no, queda decorativo (`aria-hidden`). | propuesta |
+
+**Usos de hoy que romperían la propuesta:**
+
+- **2 emojis como ícono de botón**: «Encargarme yo» en `pages/orders/orders.html:322` y `:353` → `leftIcon`.
+- **5 animados a la vez** en `pages/public/landing-customers/landing-customers.html:160`–`:184`
+  (más otro en `:56`). No tienen copia estática: o se acepta el peso en la landing o se generan
+  las copias.
+- **Un catálogo paralelo**: `core/fluent-emoji.ts` arma sus propias URLs (otro CDN incluido) y lo
+  importan 8 archivos (`components/permission-prime-modal/permission-prime-modal.ts`,
+  `pages/role-selector/role-selector.ts`, `pages/customer/order-tracking/order-tracking.ts`…).
+- **10 `<img>` con un emoji**, fuera del componente: `pages/products/add-product/add-product.html:122`
+  (la URL del paquete escrita a mano, y 3 más en el mismo archivo),
+  `components/location-flow-outlet/location-flow-outlet.html:14`,
+  `pages/customer/order-tracking/order-tracking.html:249`. No cuentan las imágenes de los rubros
+  (`pages/customer/store-browser/store-browser.html:193` y similares): vienen de datos y no son
+  del catálogo.
+
+## 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 |
+|---|---|---|
+| estado vacío, celebración | `xl` (48) | `xl` (48) |
+| pasos de una landing | `lg` (32) | `xl` (48) |
+| dentro de un texto | `md` (24) | `sm` (20) |
+
+```html
+<sui-emoji name="hamburger" [size]="bp.isMobile() ? 'lg' : 'xl'" />
+```
+
+El emoji no se toca, así que la regla del dedo no aplica: en los casos de ilustración va igual o
+más grande en web, donde sobra espacio. El tamaño con nombre más grande es `xl` (48); para uno más
+grande, `size="full"` dentro de una caja con el alto que se quiera.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `size` `xs` | a 16 px un emoji ya no se distingue | dentro de un tag de categoría, solo con copia estática |
+| como ícono de botón o de fila | un emoji no es un ícono | ninguno |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `name` | `SuiEmojiName \| null` | `null` |
+| `src` | `string \| null` | `null` |
+| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `'md'` |
+| `ariaLabel` | `string \| null` | `null` |
+| `animated` | `boolean` | `true` |
+
+Outputs: ninguno.
+<!-- api:fin -->
+
+## Trampas
+
+- **Pesan**: los animados son APNG de ~1 MB y 73 fotogramas cada uno, servidos desde
+  `raw.githubusercontent.com`. Si ese servidor se cae, no hay emoji.
+- **`animated=false` solo sirve para 5**: las caritas. El resto no tiene copia estática.
+- **`src` gana sobre `name`.**
+- **No toma color**: no responde a `currentColor` ni al tema.
+- Sin `ariaLabel` es decorativo: el lector de pantalla no lo dice.
+- `loading="lazy"`: fuera de la pantalla, no carga hasta que se acerca.
+
+## Ejemplo
+
+```html
+<!-- Celebración -->
+<sui-emoji name="party-popper" size="xl" />
+
+<!-- La barra de calificación: cinco juntos, estáticos -->
+<sui-emoji name="neutral-face" size="lg" [animated]="false" ariaLabel="Regular" />
+```

package/docs/sui-empty-state/README.md

@@ -0,0 +1,145 @@
+---
+name: sui-empty-state
+selector: sui-empty-state
+resumen: Pantalla o lista sin nada que mostrar (o que no pudo cargar) con emoji animado, título, explicación y una acción opcional
+alternativas: [sui-alert (un aviso dentro de una pantalla que sí tiene contenido), sui-banner (aviso de toda la app), skeleton (mientras carga, nunca un empty)]
+---
+
+# sui-empty-state
+
+Story: [Molecules/Empty State](https://sui-design-system.web.app/?path=/docs/molecules-empty-state--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** cuando una lista o una pantalla no tiene nada que mostrar: el carrito vacío, sin pedidos
+aún, una búsqueda sin resultados, un filtro que no trae nada. También cuando la lista **no pudo
+cargar**, con una acción para reintentar.
+
+**No lo uses** para:
+
+- Mientras carga: eso es un skeleton. Un empty que aparece y después se llena se lee como «no
+  hay nada» por un segundo.
+- Un aviso dentro de una pantalla que sí tiene contenido («Tu local está cerrado»): `sui-alert`.
+- Un error de un formulario: el mensaje va en el campo (`error` / `errorMessage`).
+
+Regla corta: **no hay nada que mostrar → empty-state · está cargando → skeleton · hay contenido y
+algo que avisar → alert.**
+
+## Qué variante usar
+
+> **La guía del DS no tiene página del empty state.** El componente de SUI se construyó a
+> propósito con Fluent Emoji animados en vez de ilustraciones: es una decisión del proyecto
+> (memoria «emojis animados en empty states», 17-04-2026).
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **66
+> empty-states en 40 archivos**. 25 con `action` (10 con `route`). 4 con `emoji` propio, 22 con la
+> URL del zorro pegada a mano (que ya es el default) y 40 sin `emoji`. 29 con un atributo `icon`
+> que el componente no tiene.
+
+### Las piezas
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `emoji` vacío (default: el zorro) | Lo normal. El zorro es la mascota de los empty states y sale solo: **no pegues su URL**. | canon (memoria del proyecto) |
+| `emoji` propio | Cuando el emoji dice algo del caso: el reloj de arena en «Aún no tienes facturas» (se está esperando algo), el chef en los avisos del local. Siempre de `FLUENT_EMOJI_ANIM` (`core/fluent-emoji.ts`) o de `assets/emoji-anim/`. | canon (memoria del proyecto) |
+| `title` (obligatorio) | Qué pasa, en corto y sin punto: «Tu carrito está vacío», «Sin pedidos aún». En una búsqueda, repite lo buscado: «Nada con “pollo broaster”». | propuesta (práctica de la app) |
+| `subtitle` | Qué va a pasar o qué puede hacer la persona: «Cuando hagas tu primer pedido, aparecerá aquí.» | propuesta |
+| `action` como string + `(actionClicked)` | La salida es algo de esta misma pantalla: «Reintentar», «Ver todo el catálogo», «Activar captura». | propuesta |
+| `action` como `{ label, route }` | La salida es otra pantalla: «Ver negocios» → `/cliente/inicio`. | propuesta |
+| sin `action` | No hay un paso obvio, o la pantalla ya tiene el botón para llenarla (el «Nuevo local» de arriba). | propuesta |
+| error de carga | Siempre con `action="Reintentar"`. Excepción: la pantalla reintenta sola y lo dice («Seguimos intentando»). | propuesta |
+
+**Usos de hoy que rompen las reglas:**
+
+- **29 con `icon="…"`**: `icon` no es un input, el atributo no hace nada. Ejemplos:
+  `pages/customer/cart/cart.html:18`, `pages/drivers/drivers.html:87`,
+  `pages/customer/order-history/order-history.html:20`. Se borra.
+- **22 con la URL del zorro pegada** (`emoji="…/Animals/Fox.png"`), que ya es el default:
+  `pages/customers/customers.html:65`, `pages/products/products.html:113`,
+  `pages/locations/locations.html:16`. Se borra.
+- **4 errores de carga sin «Reintentar»**:
+  `pages/driver/driver-dashboard/driver-dashboard.html:1071`,
+  `pages/customer/order-history/order-history.html:20`,
+  `pages/super-admin/master-drivers/master-drivers.html:524` y `:754`.
+  (`pages/public/pedido-en-vivo/pedido-en-vivo.html:50` no cuenta: reintenta solo.)
+
+## Tamaño en mobile y en web
+
+El emoji mide 120 en las dos; el padding pasa solo de 48 / 24 en web a 32 / 20 desde tablet hacia
+abajo (media query `bp.medium` del componente). El `size` solo cambia **el botón de la acción**:
+
+| size | botón | fuente |
+|---|---|---|
+| `medium` (default) | 40 px (`sui-button` `medium`) | lo que había en el DS |
+| `large` | 48 px (`sui-button` `large`, texto 16) | canon (aprobado por el dueño, 03-10-2026): extensión SUI |
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| ilustración + texto | lo resuelve el componente | lo resuelve el componente | lo que hay en el DS |
+| botón de la acción | `large` (48) | `medium` (40) | propuesta: el tamaño es extensión SUI aprobada (03-10-2026); el «cuándo» falta aprobarlo |
+
+```html
+<sui-empty-state
+  title="Tu carrito está vacío"
+  [action]="{ label: 'Ver negocios', route: '/cliente/inicio' }"
+  [size]="bp.isMobile() ? 'large' : 'medium'" />
+```
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| un emoji que no sea animado (PNG estático, SVG, ícono) | la regla del proyecto es emoji animado | nunca |
+| empty con `action` que hace lo mismo que un botón ya visible en la pantalla | dos botones para lo mismo | nunca |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `emoji` | `string` | `''` |
+| `title` | `string` | — (requerido) |
+| `subtitle` | `string` | `''` |
+| `action` | `SuiEmptyStateAction \| string \| null` | `null` |
+| `size` | `'medium' \| 'large'` | `'medium'` |
+
+| output | payload |
+|---|---|
+| `actionClicked` | `void` |
+<!-- api:fin -->
+
+```ts
+interface SuiEmptyStateAction { label: string; route?: string; }
+```
+
+`EMPTY_STATE_FOX_EMOJI` (exportada) es la URL del zorro.
+
+## Trampas
+
+- **`icon` no existe.** Viene de un `app-empty-state` viejo; Angular no se queja porque lo toma
+  como atributo HTML.
+- **`emoji` es una URL**, no un nombre de `SuiEmoji` (`'bell'` no funciona).
+- **`title` es obligatorio** y el host borra el atributo `title` del DOM (sin tooltip nativo).
+- Con `route`, el botón usa `routerLink` y **no emite** `actionClicked`.
+- El botón es `sui-button` `filled` `primary`: el color no se cambia; el tamaño sí, con `size` (`medium` 40 · `large` 48).
+- El emoji carga con `loading="lazy"`: en una captura de pantalla completa puede salir vacío.
+
+## Ejemplo
+
+```html
+<!-- Lista vacía con salida a otra pantalla -->
+<sui-empty-state
+  title="Tu carrito está vacío"
+  subtitle="Explora las tiendas y agrega productos para empezar."
+  [action]="{ label: 'Ver negocios', route: '/cliente/inicio' }" />
+
+<!-- Error de carga -->
+<sui-empty-state
+  [emoji]="emoji.thinking"
+  title="No se pudieron cargar tus pedidos"
+  subtitle="Revisa tu conexión y vuelve a intentar."
+  action="Reintentar"
+  (actionClicked)="cargar()" />
+```

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

@@ -0,0 +1,148 @@
+---
+name: sui-fancy-button
+selector: sui-fancy-button
+resumen: Botón con brillo y degradé para el CTA de una landing o campaña
+alternativas: [sui-button (toda acción dentro de la app), sui-app-store-badge (descargar la app desde una landing)]
+---
+
+# sui-fancy-button
+
+Story: [Atoms/Button/Fancy Button](https://sui-design-system.web.app/?path=/docs/atoms-button-fancy-button--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Hoy no se usa** (0 usos en la app). Es el mismo botón que `sui-button` con un acabado de
+marketing: brillo arriba, borde interior claro y un anillo del color del botón.
+
+**Cuándo sí, en un flujo nuevo**: el CTA principal de una landing (`/empresas`, `/repartidores`),
+«Mejorar plan» o una campaña puntual. Uno por pantalla.
+
+**No lo uses** para:
+
+- **Cualquier acción dentro de la app**: `sui-button`. Al lado de botones normales, el fancy
+  compite con todo y rompe la jerarquía.
+- **Una acción destructiva**: `sui-button` `color="error"`.
+- **Descargar la app**: `sui-app-store-badge`.
+
+## Qué variante usar
+
+> **La guía del DS no dice cuándo usar cada tipo.** Su página lo presenta como «botones normales
+> con una apariencia vistosa» y muestra los cuatro tipos, los tres tamaños, los íconos y el
+> deshabilitado, sin do/don't. Todo el componente está en **«no usar» (canon, aprobado por el
+> dueño, 03-10-2026)**; la tabla dice dónde iría cada tipo si aparece el caso.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0** fancy-buttons, sin contar
+> prototipos ni vitrinas.
+
+### Lo que sí dice la guía del DS
+
+- **Para qué es**: un botón normal con un acabado más vistoso.
+- **Default**: `neutral` (negro) en la guía; **`primary` en SUI**.
+- **Tamaños**: `medium` (40), `small` (36) y `xsmall` (32). No hay más grandes.
+- **Hover**: el brillo se aclara, no se oscurece. `basic` pasa a fondo gris plano.
+- **Deshabilitado**: fondo gris plano, sin brillo, sin anillo ni sombra, igual en los cuatro tipos.
+
+### `type` (el relleno)
+
+| type | dónde iría, en un flujo nuevo | ejemplo de copy | fuente |
+|---|---|---|---|
+| `primary` (default SUI) | El CTA principal de una landing o una campaña. Uno por pantalla. | «Empieza gratis», «Mejorar plan» | no usar hoy · cuándo sí: canon (aprobado por el dueño, 03-10-2026) |
+| `neutral` (default de la guía) | El CTA de una landing sobre una sección clara donde el naranja ya se usó arriba. | «Ver planes» | no usar hoy (en la app va `sui-button`) · cuándo sí: propuesta |
+| `basic` | El secundario al lado de un fancy `primary` en la misma landing. | «Saber más» | no usar hoy (en la app va `sui-button`) · cuándo sí: propuesta |
+| `destructive` | Ninguno a la vista: una acción destructiva nunca es marketing. | — | no usar (en la app va `sui-button` `error`) · canon (aprobado por el dueño, 03-10-2026) |
+
+### `size`
+
+| size | cuándo | fuente |
+|---|---|---|
+| `medium` (40, default) | El CTA de la landing en desktop. | escala y default según la guía del DS · cuándo: propuesta |
+| `small` (36) | Un CTA dentro de una card de la landing (la card de un plan). | escala según la guía del DS · cuándo: propuesta |
+| `xsmall` (32) | Sin caso: en una landing el CTA nunca es tan chico. | escala según la guía del DS · cuándo: propuesta |
+
+### Íconos y `disabled`
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `rightIcon` (`arrow-right-line`) | El CTA lleva a otra página: «Empieza gratis →». | propuesta |
+| `leftIcon` | El ícono dice la acción (descargar, WhatsApp). | propuesta |
+| `disabled` | Casi nunca: un CTA de marketing no se deshabilita, se esconde. | cómo se ve: según la guía del DS · cuándo: propuesta |
+| `href` | El CTA navega (lo normal en una landing): pinta un `<a>`; `rel` ya viene en `'noopener noreferrer'`. | 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.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| CTA principal de una landing | no usar fancy: `sui-button` `large` (48) | `medium` (40) | propuesta |
+| CTA dentro de la card de un plan | no usar fancy: `sui-button` `large` | `small` (36) | propuesta |
+
+```html
+@if (bp.isMobile()) {
+  <sui-button size="large">Empieza gratis</sui-button>
+} @else {
+  <sui-fancy-button type="primary" size="medium">Empieza gratis</sui-fancy-button>
+}
+```
+
+**El fancy no tiene un tamaño táctil**: el más grande mide 40, por debajo de 44. En mobile el CTA
+va con `sui-button` `large`. Hoy no hay usos (todo el componente está en «no usar»).
+
+## «No usar»: por qué no hoy y cuándo sí
+
+Nada se borra del DS. Lo marcado «no usar» no tiene caso en la app de hoy; si un flujo nuevo cae
+en la columna de la derecha, se usa (aprobado por el dueño, 03-10-2026).
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `sui-fancy-button` (los 4 tipos) | Es estilo de marketing (brillo, degradé); en la app compite con todo | el CTA principal de una landing (`/empresas`, `/repartidores`), «Mejorar plan» o una campaña |
+| `type="destructive"` | Una acción destructiva va con `sui-button` `error` | no se ve un caso: una destructiva no es marketing |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `type` | `'primary' \| 'neutral' \| 'basic' \| 'destructive'` | `'primary'` |
+| `size` | `'medium' \| 'small' \| 'xsmall'` | `'medium'` |
+| `leftIcon` | `string \| null` | `null` |
+| `rightIcon` | `string \| null` | `null` |
+| `disabled` | `boolean` | `false` |
+| `href` | `string \| null` | `null` |
+| `target` | `string \| null` | `null` |
+| `rel` | `string \| null` | `'noopener noreferrer'` |
+| `htmlType` | `'button' \| 'submit' \| 'reset'` | `'button'` |
+| `ariaLabel` | `string \| null` | `null` |
+
+| output | payload |
+|---|---|
+| `clicked` | `MouseEvent` |
+<!-- api:fin -->
+
+El clic se escucha con `(clicked)`. Slots: `<ng-content>` (el texto).
+
+## Trampas
+
+- **`type` es el relleno**, no el `type` HTML: ese se llama **`htmlType`**. `type="submit"` no
+  compila (no es un tipo válido) y no hace un submit.
+- **El radio es 10 px, no pill.** Al lado de un `sui-button` (pill en SUI) se ven de dos familias.
+- **No hay `large` ni `xlarge`**: el más grande mide 40. En mobile, donde el CTA de la app es de
+  48, un fancy queda más bajo.
+- **El default es `primary`**; en la guía es `neutral`.
+- El anillo del `neutral` es un hex crudo (`#242628`): no hay token para ese gris.
+- Ya trae el arreglo de iOS para el `:active` pegado: no lo agregues.
+
+## Ejemplo
+
+```html
+<!-- Solo en una landing: el CTA principal -->
+<sui-fancy-button type="primary" rightIcon="arrow-right-line" href="/auth/empresa/registro">
+  Empieza gratis
+</sui-fancy-button>
+```

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

@@ -0,0 +1,103 @@
+---
+name: sui-file-icon
+selector: sui-file-icon
+resumen: El ícono de un archivo con su extensión (PDF, XLSX, JPG…) en el color de su tipo
+alternativas: [sui-file-upload-card (el archivo que se está subiendo, con progreso), sui-icon (un ícono genérico de documento)]
+---
+
+# sui-file-icon
+
+Story: [Atoms/Icon/File Icon](https://sui-design-system.web.app/?path=/docs/atoms-icon-file-icon--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** en una **lista de archivos**: comprobantes, documentos del repartidor, un reporte para
+descargar. La etiqueta con la extensión le dice a la persona qué va a abrir.
+
+**No lo uses** para:
+
+- Un archivo que se está subiendo: `sui-file-upload-card` (ya lo trae adentro).
+- Una foto: si se puede ver, se muestra la miniatura.
+- Un ícono de «documento» en general, sin archivo detrás: `sui-icon`.
+
+## 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 usa por dentro
+> `sui-file-upload-card`.
+
+### `filename`, `extension`, `color`
+
+| input | cuándo | fuente |
+|---|---|---|
+| `filename` | Siempre que haya nombre: saca la extensión y el color solo (`comprobante.pdf` → PDF en rojo). | propuesta |
+| `extension` | Solo si el nombre no la trae (un archivo de Storage sin extensión). | propuesta |
+| `color` | No usar: el color dice el tipo y forzarlo miente (un CSV en rojo parece PDF). | propuesta |
+
+Colores automáticos: PDF rojo · Word y texto azul · Excel y CSV verde · PowerPoint naranja ·
+imágenes rosa · video morado · audio celeste · comprimidos amarillo · el resto gris.
+
+### `size`
+
+| valor | px | cuándo | fuente |
+|---|---|---|---|
+| `medium` (default) | 40 | Lista de documentos. | propuesta |
+| `xsmall` | 32 | Filas densas, tablas. | propuesta |
+
+Usos de hoy que rompen la regla: **0**.
+
+## 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 |
+|---|---|---|
+| fila de una lista | `medium` (40) | `xsmall` (32) |
+
+```html
+<sui-file-icon [filename]="doc.nombre" [size]="bp.isMobile() ? 'medium' : 'xsmall'" />
+```
+
+El ícono no se toca: si la fila abre el archivo, la fila da los 44 px. `medium` es el tamaño más
+grande que tiene.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| todo el componente (0 usos directos) | no hay listas de archivos | los documentos del repartidor (DNI, licencia, SOAT) o un reporte para descargar en CSV |
+| `color` | el color dice el tipo; forzarlo miente | ninguno: si la extensión no se reconoce, sale gris y está bien |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `filename` | `string` | `''` |
+| `extension` | `string` | `''` |
+| `size` | `'xsmall' \| 'medium'` | `'medium'` |
+| `color` | `'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'purple' \| 'pink' \| 'gray' \| ''` | `''` |
+
+Outputs: ninguno.
+<!-- api:fin -->
+
+## Trampas
+
+- **La extensión se corta a 4 letras** y va en mayúsculas: `.jpeg` → `JPEG`, `.numbers` → `NUMB`.
+- **`extension` gana sobre `filename`.**
+- **El nombre para el lector de pantalla está en inglés** («File: PDF») y no se puede cambiar.
+- `size` es `xsmall` o `medium`: no hay `small` ni `large`.
+
+## Ejemplo
+
+```html
+<sui-file-icon filename="comprobante-yape.pdf" />
+<sui-file-icon filename="ventas-setiembre.csv" size="xsmall" />
+```