@ajuarezso/sui-design-system 0.24.1 → 0.25.1

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

@@ -56,30 +56,32 @@ marketing: brillo arriba, borde interior claro y un anillo del color del botón.
 | size | cuándo | fuente |
 |---|---|---|
 | `large` (48) | El CTA en el teléfono. Texto 16. | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono; extensión de SUI, la guía no lo tiene |
-| `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 |
+| `medium` (40, default) | El CTA de la landing en la computadora, también dentro de la card de un plan. | escala y default según la guía del DS · cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B1) · la card de un plan: canon (dueño, 05-10-2026, D16) |
+| `small` (36) | No usar: es chico. El CTA dentro de la card de un plan va `medium`. | escala según la guía del DS · no usarlo: canon (dueño, 05-10-2026, D16), reemplaza el «cuándo» del bloque B1 |
+| `xsmall` (32) | Sin caso: en una landing el CTA nunca es tan chico. | escala según la guía del DS · cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 ### Í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 |
+| `rightIcon` (`arrow-right-line`) | El CTA lleva a otra página: «Empieza gratis →». | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `leftIcon` | El ícono dice la acción (descargar, WhatsApp). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `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: canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `href` | El CTA navega (lo normal en una landing): pinta un `<a>`; `rel` ya viene en `'noopener noreferrer'`. | 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** (canon (dueño, 04-10-2026): piso táctil 44 en el teléfono). 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).
+En mobile se toca con el dedo: el área táctil tiene que medir **44 px o más** (canon (dueño, 04-10-2026): piso táctil 44 en el teléfono). En la tablet
+(`pointer: coarse`) va igual que en el celular; en la computadora (`pointer: fine`), `medium`; en el celular
+chico (< 380 px), `medium` a la vista sin bajar el área de 44. Nada en `small` ni `xsmall` (canon, dueño,
+05-10-2026, D16). Hoy la app lo resuelve con `BreakpointsService` (`src/app/services/breakpoints.service.ts`,
+mobile = hasta 767 px).
 
 | size | alto | texto | cuándo | fuente |
 |---|---|---|---|---|
 | `large` | 48 | 16 (Label/Medium) | CTA en el teléfono | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono. Size nuevo del 04-10-2026 |
 | `medium` (default) | 40 | 14 | CTA en web | Figma |
-| `small` | 36 | 14 | CTA dentro de una card en web | Figma |
+| `small` | 36 | 14 | — (no se usa: D16) | Figma |
 | `xsmall` | 32 | 14 | — | Figma |
 
 **Por qué `large` = 48 y no 44**: el fancy es «el mismo botón con otro acabado» que `sui-button` y su
@@ -89,15 +91,33 @@ que va al lado. El texto sube a 16 (regla de tamaños del 03-10-2026); los ícon
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| CTA principal de una landing | `large` (48) | `medium` (40) | propuesta |
-| CTA dentro de la card de un plan | `large` (48) | `small` (36) | propuesta |
+| CTA principal de una landing | `large` (48) | `medium` (40) | mobile: canon (decisión del dueño 04-10-2026, piso táctil 44) · web: canon (dueño, 05-10-2026, D16) |
+| CTA dentro de la card de un plan | `large` (48) | `medium` (40) | mobile: canon (decisión del dueño 04-10-2026, piso táctil 44) · web: canon (dueño, 05-10-2026, D16) |
 
 ```html
-<sui-fancy-button type="primary" [size]="bp.isMobile() ? 'large' : 'medium'">Empieza gratis</sui-fancy-button>
+<sui-fancy-button type="primary" [size]="bp.sizeControl()">Empieza gratis</sui-fancy-button>
 ```
 
 Hoy no hay usos (todo el componente está en «no usar»).
 
+### Por dispositivo (D16)
+
+Se toca, así que va como «lo que se toca»; la fila de `fancy-button` de la tabla D16 manda
+(canon, dueño, 05-10-2026, D16).
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `medium` + área de 44 ¹ | ¹ el DS todavía no estira a 44 el área del `medium` (40): hasta que lo haga, va `large`, que es lo que ya da el helper |
+| celular (380–767 px) | `large` (48) | del mismo alto que el `large` de `sui-button` que va al lado |
+| tablet táctil (`pointer: coarse`) | `large` (48) | Apple pide 44 pt también en el iPad; `bp.isMobile()` sola la deja en `medium` |
+| computadora (`pointer: fine`) | `medium` (40) | también dentro de la card de un plan; `small` y `xsmall` no se usan |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`. El espacio extra va al ancho de la
+sección, no a un CTA más grande.
+
+En master-pedidos: `[size]="bp.sizeControl()"` (`large` en el celular y en toda pantalla táctil,
+`medium` en la computadora).
+
 ## «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
@@ -144,6 +164,46 @@ El clic se escucha con `(clicked)`. Slots: `<ng-content>` (el texto).
 - 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.
 
+## Bien y mal
+
+**El CTA en el teléfono y en la computadora**
+
+```html
+<!-- ❌ mal: dos componentes para el mismo CTA. La vitrina (master-preview/_guia-atomos/botones.ts:138)
+     todavía pone sui-button large en mobile «porque el fancy mide 40»; desde el 04-10 tiene large (48) -->
+<sui-button size="large">Empieza gratis</sui-button>
+<sui-fancy-button type="primary" size="medium">Empieza gratis</sui-fancy-button>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-fancy-button type="primary" [size]="bp.sizeControl()">Empieza gratis</sui-fancy-button>
+```
+
+**Un formulario que se envía**
+
+```html
+<!-- ❌ mal: `type` es el relleno, no el type HTML; no compila y no hace submit (Trampas) -->
+<sui-fancy-button type="submit">Crear cuenta</sui-fancy-button>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-fancy-button type="primary" htmlType="submit" [size]="bp.sizeControl()">Crear cuenta</sui-fancy-button>
+```
+
+**Una acción destructiva**
+
+```html
+<!-- ❌ mal: una destructiva no es marketing («No usar»), y el brillo la vuelve llamativa -->
+<sui-fancy-button type="destructive">Eliminar cuenta</sui-fancy-button>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-button variant="filled" color="error" [size]="bp.sizeControl()">Eliminar cuenta</sui-button>
+```
+
 ## Ejemplo
 
 ```html

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

@@ -22,8 +22,8 @@ descargar. La etiqueta con la extensión le dice a la persona qué va a abrir.
 
 ## 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; la tabla de mobile y web quedó en canon el 05-10-2026 (P1 b y D16).
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos directos**. Lo usa por dentro
 > `sui-file-upload-card`.
@@ -32,9 +32,9 @@ descargar. La etiqueta con la extensión le dice a la persona qué va a abrir.
 
 | 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 |
+| `filename` | Siempre que haya nombre: saca la extensión y el color solo (`comprobante.pdf` → PDF en rojo). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `extension` | Solo si el nombre no la trae (un archivo de Storage sin extensión). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `color` | No usar: el color dice el tipo y forzarlo miente (un CSV en rojo parece PDF). | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 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.
@@ -43,8 +43,8 @@ imágenes rosa · video morado · audio celeste · comprimidos amarillo · el re
 
 | valor | px | cuándo | fuente |
 |---|---|---|---|
-| `medium` (default) | 40 | Lista de documentos. | propuesta |
-| `xsmall` | 32 | Filas densas, tablas. | propuesta |
+| `medium` (default) | 40 | Siempre: listas de documentos, filas y tablas, en el celular, la tablet y la computadora. | canon (aprobado por el dueño, 05-10-2026, bloque B1) · también filas y tablas: canon (dueño, 05-10-2026, D16) |
+| `xsmall` | 32 | No usar: es chico. Las filas densas y las tablas van en `medium`. | canon (dueño, 05-10-2026, D16); reemplaza el «filas densas, tablas» del bloque B1 |
 
 Usos de hoy que rompen la regla: **0**.
 
@@ -53,18 +53,36 @@ Usos de hoy que rompen la regla: **0**.
 En mobile se lee y se toca con el dedo, así que va más grande; en web, más chico. En las
 pantallas que se usan en los dos (panel del local, super admin) se elige con el servicio de
 breakpoints de la app (`bp`, en `services/breakpoints.service.ts`); en las que solo existen en
-el celular (cliente, repartidor) va directo el valor de mobile. Todo es **propuesta**.
+el celular (cliente, repartidor) va directo el valor de mobile. No se toca, así que la tablet va
+con el valor de web, y el celular chico (< 380 px) también (D16).
+Es **canon (dueño, 05-10-2026, P1 b y D16)**.
 
 | uso | mobile | web |
 |---|---|---|
-| fila de una lista | `medium` (40) | `xsmall` (32) |
+| fila de una lista | `medium` (40) | `medium` (40) |
 
 ```html
-<sui-file-icon [filename]="doc.nombre" [size]="bp.isMobile() ? 'medium' : 'xsmall'" />
+<sui-file-icon [filename]="doc.nombre" size="medium" />
 ```
 
 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.
+grande que tiene y `xsmall` es chico (D16), así que va igual en las dos: es la excepción a P1 b
+(«un paso más grande en el celular»), porque no hay un paso más.
+
+### Por dispositivo (D16)
+
+No se toca; la fila de `file-icon` de la tabla D16 manda (canon, dueño, 05-10-2026, D16).
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `medium` (40) | |
+| celular (380–767 px) | `medium` (40) | es el más grande que tiene: no hay un paso más para subir (P1 b) |
+| tablet táctil (`pointer: coarse`) | `medium` (40) | si la fila abre el archivo, los 44 los da la fila |
+| computadora (`pointer: fine`) | `medium` (40) | también en filas densas y tablas; `xsmall` no se usa |
+
+Ultrawide (≥ 1920 px): igual, `medium`.
+
+En master-pedidos: `size="medium"` fijo, o se omite (es el default). No hay helper ni hace falta `bp`.
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -95,9 +113,49 @@ Outputs: ninguno.
 - El nombre para el lector de pantalla es «Archivo PDF» (en español desde el 04-10-2026) y no se puede cambiar.
 - `size` es `xsmall` o `medium`: no hay `small` ni `large`.
 
+## Bien y mal
+
+**Un archivo en una tabla**
+
+```html
+<!-- ❌ mal: xsmall es chico (D16). La vitrina (master-preview/_guia-atomos/identidad.ts:422)
+     todavía lo ofrece para «filas densas, tablas» -->
+<sui-file-icon [filename]="doc.nombre" size="xsmall" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-file-icon [filename]="doc.nombre" size="medium" />
+```
+
+**El color del tipo**
+
+```html
+<!-- ❌ mal: forzar el color miente; un CSV en rojo parece PDF (vitrina identidad.ts:424) -->
+<sui-file-icon filename="ventas.csv" color="red" />
+```
+
+```html
+<!-- ✅ bien: el color sale solo de la extensión (CSV en verde) -->
+<sui-file-icon filename="ventas.csv" />
+```
+
+**Un archivo que se está subiendo**
+
+```html
+<!-- ❌ mal: el ícono solo no dice cómo va la subida («Cuándo no») -->
+<sui-file-icon filename="carta-octubre.pdf" />
+```
+
+```html
+<!-- ✅ bien: la card ya trae el ícono, la barra y el estado -->
+<sui-file-upload-card file="carta-octubre.pdf" state="in-progress" [progress]="45"
+                      description="1.2 MB de 2.6 MB" />
+```
+
 ## Ejemplo
 
 ```html
 <sui-file-icon filename="comprobante-yape.pdf" />
-<sui-file-icon filename="ventas-setiembre.csv" size="xsmall" />
+<sui-file-icon filename="ventas-setiembre.csv" size="medium" />
 ```

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

@@ -30,8 +30,10 @@ elegido → file-upload-card.**
 > buscar en el equipo**, para subir un archivo. Su ejemplo arma el texto así: una línea que invita
 > («Elige un archivo o arrástralo aquí»), una línea con **formatos y tamaño máximo** («JPEG, PNG,
 > PDF y MP4, hasta 50 MB») y el botón **«Buscar archivo»**. Trae aparte el ícono por tipo de
-> archivo (en SUI, `sui-file-icon`). No dice cuándo usar cada tamaño. El resto es **propuesta,
-> falta aprobación**.
+> archivo (en SUI, `sui-file-icon`). No dice cuándo usar cada tamaño. Lo de abajo marcado canon
+> está aprobado; el `small` en mobile sigue en propuesta: lo cubre **P13, pendiente**. D16 en
+> general no usa `small`, pero la hoja de decisiones (05-10-2026) dejó estas filas esperando la
+> respuesta a P13.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos**. Hoy todo lo que se sube es
 > imagen y va con `sui-image-upload` (13) o con un `<input type="file">` a mano (3: `renewal-modal`,
@@ -43,48 +45,48 @@ elegido → file-upload-card.**
 |---|---|---|
 | `title` | Qué se sube, en la voz de la persona: «Sube tu carta en PDF», «Arrastra tu Excel aquí». Si se omite, sale «Arrastra y suelta el archivo aquí». | guía (línea que invita) |
 | `subtitle` | **Formatos y tamaño máximo**, siempre: «PDF o Excel, hasta 10 MB». El default «o haz clic para seleccionar» no dice nada que el área no diga. | guía (formatos y tamaño) |
-| `browseLabel` | El default ya es «Buscar archivo»; se pasa solo para otro texto («Elegir foto»). | guía (el botón) · el texto es propuesta |
+| `browseLabel` | El default ya es «Buscar archivo»; se pasa solo para otro texto («Elegir foto»). | guía (el botón) · el texto, canon (aprobado por el dueño, 05-10-2026, bloque B4) |
 
 ### `accept`, `multiple`, `maxSize`
 
 | input | cuándo | fuente |
 |---|---|---|
-| `accept` | Siempre, con lo mismo que dice el `subtitle`: `".pdf,.xlsx,.csv"`. Si el texto y el filtro no coinciden, la persona elige un archivo que se rechaza. | propuesta |
-| `multiple` | Varios archivos del mismo tipo (las boletas del mes). Con `multiple` cada archivo va en su `sui-file-upload-card`. | propuesta |
-| `maxSize` | Siempre, en **bytes** (`10 * 1024 * 1024`), y el mismo número en el `subtitle`. | propuesta |
+| `accept` | Siempre, con lo mismo que dice el `subtitle`: `".pdf,.xlsx,.csv"`. Si el texto y el filtro no coinciden, la persona elige un archivo que se rechaza. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `multiple` | Varios archivos del mismo tipo (las boletas del mes). Con `multiple` cada archivo va en su `sui-file-upload-card`. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `maxSize` | Siempre, en **bytes** (`10 * 1024 * 1024`), y el mismo número en el `subtitle`. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 
 ### `size`
 
 | valor | padding | cuándo | fuente |
 |---|---|---|---|
-| `small` | 24 | En mobile y dentro de un modal o una card. | propuesta |
-| `medium` (default) | 32 | En web, en una página o un modal ancho. | guía (es el único tamaño que muestra) |
-| `large` | 40 | Cuando subir el archivo es lo único de la pantalla (importar la carta). | propuesta |
+| `small` | 24 | Propuesta: en mobile y dentro de un modal o una card. Pendiente (P13): la opción recomendada es que no (en mobile `medium` o `large`, por D8), y D16 en general no usa `small`, pero el dueño todavía no respondió. | pendiente (P13) |
+| `medium` (default) | 32 | En web, en una página o un modal ancho. En mobile: pendiente (P13). | guía (es el único tamaño que muestra) |
+| `large` | 40 | Cuando subir el archivo es lo único de la pantalla (importar la carta). | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 | `xlarge` | 48 | No usar: más aire no ayuda a soltar el archivo. | no usar |
 
 ### Estados: `error`, `errorMessage`, `disabled`
 
 | input | cuándo | fuente |
 |---|---|---|
-| `error` + `errorMessage` | El archivo se subió y el servidor lo rechazó («El PDF está protegido con clave»). Lo de tamaño y tipo ya lo avisa solo. | propuesta |
-| `disabled` | Mientras se sube, o si ya se llegó al máximo de archivos. | propuesta |
+| `error` + `errorMessage` | El archivo se subió y el servidor lo rechazó («El PDF está protegido con clave»). Lo de tamaño y tipo ya lo avisa solo. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `disabled` | Mientras se sube, o si ya se llegó al máximo de archivos. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 
 Usos de hoy que rompen la regla: **0** (no hay file-upload).
 
 ## Tamaño en mobile y en web
 
 En mobile se toca con el dedo: lo que se toca mide **44 px o más**. Aquí **toda el área se toca**
-(abre el selector), así que pasa en cualquier tamaño; en el celular no se arrastra, por eso va
-más compacta. En pantallas de los dos, con el servicio de breakpoints de la app (`bp`, en
-`services/breakpoints.service.ts`).
+(abre el selector), así que pasa en cualquier tamaño. En pantallas de los dos, con el servicio
+de breakpoints de la app (`bp`, en `services/breakpoints.service.ts`).
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| subir un documento en un formulario o modal | `small` | `medium` | propuesta |
-| subir es lo único de la pantalla | `medium` | `large` | propuesta |
+| subir un documento en un formulario o modal | pendiente (P13) | `medium` | mobile: pendiente (P13; la propuesta era `small`) · web: guía |
+| subir es lo único de la pantalla | `medium` | `large` | canon (aprobado por el dueño, 05-10-2026, bloque B1) · va al revés de D16: ver abajo |
 
 ```html
-<sui-file-upload [size]="bp.isMobile() ? 'small' : 'medium'"
+<!-- en web, en un formulario o modal; el size en mobile espera P13 -->
+<sui-file-upload size="medium"
                  title="Sube tu carta en PDF" subtitle="PDF, hasta 10 MB"
                  accept=".pdf" [maxSize]="10 * 1024 * 1024" (filesSelected)="subir($event)" />
 ```
@@ -93,6 +95,20 @@ Llena el ancho del contenedor (antes 400 fijo; extensión SUI, 03-10-2026). El b
 archivo» mide 32 px (`xsmall`) en todos los tamaños: solo, en mobile **no
 llegaría**; pasa porque el área entera también abre el selector.
 
+### Por dispositivo (D16)
+
+**Pendiente (P13).** `file-upload` no está en la tabla por componente de D16, y la hoja de
+decisiones (05-10-2026, «Lo que esta hoja no cierra») deja sus dos filas de tamaño esperando P13.
+Se toca, así que la regla general de D16 sería «lo que se toca»: grande en el celular y en la
+tablet, `medium` en la computadora (y en ultrawide). Eso choca con la fila de B1 («subir es lo
+único de la pantalla»: `medium` en mobile y `large` en web), que va en la dirección contraria, y
+D16 dice que reemplaza el tamaño por plataforma. Cuál manda no está decidido: se resuelve con P13.
+
+Hasta entonces, lo cerrado es: `medium` en la computadora en un formulario o modal (guía) y
+`xlarge` no se usa. Si P13 cierra con la regla general de D16, en master-pedidos quedaría
+`[size]="bp.tactil() ? 'large' : 'medium'"` (no hay helper propio; `sizeControl()` es de
+botón, input, select y textarea).
+
 ## «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
@@ -148,6 +164,50 @@ en la columna de la derecha, se usa (aprobado por el dueño, 03-10-2026).
   hace quien lo usa.
 - El atributo `title` del host se borra solo (no sale el tooltip gris del navegador).
 
+## Bien y mal
+
+**El error que se pasa a mano**
+
+```html
+<!-- ❌ mal: el componente ya muestra solo el aviso de tamaño debajo del área (y lo emite por errorEvent); este errorMessage lo tapa con otro texto -->
+<sui-file-upload accept=".pdf" [maxSize]="10 * 1024 * 1024"
+                 title="Sube tu carta en PDF" subtitle="PDF, hasta 10 MB"
+                 [error]="pesaDeMas()" errorMessage="El archivo pesa más de 10 MB" />
+```
+
+```html
+<!-- ✅ bien: errorMessage solo para lo que rechaza el servidor después de subirlo -->
+<sui-file-upload accept=".pdf" [maxSize]="10 * 1024 * 1024"
+                 title="Sube tu carta en PDF" subtitle="PDF, hasta 10 MB"
+                 [error]="rechazado()" errorMessage="El PDF está protegido con clave" />
+```
+
+**El límite de tamaño**
+
+```html
+<!-- ❌ mal: maxSize va en bytes (10 = 10 bytes) y el subtitle no dice formatos ni tamaño (Trampas) -->
+<sui-file-upload accept=".pdf" [maxSize]="10" title="Sube tu carta" />
+```
+
+```html
+<!-- ✅ bien: el mismo límite en el filtro y en el texto -->
+<sui-file-upload accept=".pdf" [maxSize]="10 * 1024 * 1024"
+                 title="Sube tu carta en PDF" subtitle="PDF, hasta 10 MB" />
+```
+
+**El filtro y el texto**
+
+```html
+<!-- ❌ mal: el subtitle promete Excel y accept lo rechaza: la persona elige un archivo que no entra -->
+<sui-file-upload accept=".pdf" title="Sube tu carta" subtitle="PDF o Excel, hasta 10 MB" />
+```
+
+```html
+<!-- ✅ bien: lo que promete el subtitle es lo que dejan pasar accept y maxSize -->
+<sui-file-upload accept=".pdf,.xlsx" [maxSize]="10 * 1024 * 1024"
+                 title="Sube tu carta" subtitle="PDF o Excel, hasta 10 MB" />
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-file-upload-card/README.md

@@ -23,7 +23,8 @@ subiendo con su barra, listo, o falló con «Reintentar».
 ## Qué variante usar
 
 > **La guía del DS no tiene página para este componente** (su página del file upload solo muestra
-> el área y el ícono por tipo). Todo es **propuesta, falta aprobación**.
+> el área y el ícono por tipo). Las reglas marcadas canon están aprobadas y las de «según el
+> código» describen lo que el componente ya hace.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos**. Las subidas de hoy son de
 > imágenes y avisan con el `subtitle` del image-upload («Procesando…») o lo deshabilitan.
@@ -32,20 +33,20 @@ subiendo con su barra, listo, o falló con «Reintentar».
 
 | valor | cuándo | qué muestra | fuente |
 |---|---|---|---|
-| `in-progress` (default) | Mientras sube. Va con `progress`. | barra azul, ícono de carga, X para cancelar | propuesta |
-| `success` | Subió. | check verde, tacho para quitar | propuesta |
-| `error` | Falló. Va con `statusText` que diga por qué. | ícono rojo, «Reintentar», tacho | propuesta |
+| `in-progress` (default) | Mientras sube. Va con `progress`. | barra azul, ícono de carga, X para cancelar | según el código |
+| `success` | Subió. | check verde, tacho para quitar | según el código |
+| `error` | Falló. Va con `statusText` que diga por qué. | ícono rojo, «Reintentar», tacho | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
 
 ### Textos y datos
 
 | input | cuándo | fuente |
 |---|---|---|
-| `file` | El nombre real del archivo (`'carta-octubre.pdf'`). La extensión da el ícono y el color. | propuesta |
-| `description` | **Siempre** se pasa: el default es un texto de ejemplo («0 KB de 120 KB»). Subiendo: «1.2 MB de 3.4 MB»; listo: «3.4 MB» (punto decimal, como el «10.0 MB» que arma `sui-file-upload`). | propuesta |
-| `progress` | 0–100, solo en `in-progress`. | propuesta |
-| `statusText` | Los defaults ya están en español («Subiendo…», «Completado», «Falló»); en error, mejor el motivo: «Se cortó la conexión». | propuesta |
-| `showStatus=false` | Solo en `success`, cuando el check sobra porque la lista ya dice «Archivos subidos». | propuesta |
-| `retryLabel` | El default ya es «Reintentar». | propuesta |
+| `file` | El nombre real del archivo (`'carta-octubre.pdf'`). La extensión da el ícono y el color. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `description` | **Siempre** se pasa: el default es un texto de ejemplo («0 KB de 120 KB»). Subiendo: «1.2 MB de 3.4 MB»; listo: «3.4 MB» (punto decimal, como el «10.0 MB» que arma `sui-file-upload`). | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `progress` | 0–100, solo en `in-progress`. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `statusText` | Los defaults ya están en español («Subiendo…», «Completado», «Falló»); en error, mejor el motivo: «Se cortó la conexión». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `showStatus=false` | Solo en `success`, cuando el check sobra porque la lista ya dice «Archivos subidos». | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `retryLabel` | El default ya es «Reintentar». | canon (CANON-SUI §5.3 y §6.4: «Reintentar» es copy de acción canon) |
 
 Usos de hoy que rompen la regla: **0**.
 
@@ -64,10 +65,18 @@ reintente.
 | «Reintentar» | link de 20 px — **no llega** | link | medido |
 
 ```html
-<sui-file-upload-card [file]="a.nombre" [state]="a.estado" [progress]="a.pct"
-                      [description]="a.peso" (actionClicked)="quitar(a)" (retryClicked)="reintentar(a)" />
+<sui-file-upload-card [file]="a.nombre" [state]="a.estado" [progress]="a.pct" [description]="a.peso"
+                      (actionClicked)="a.estado === 'in-progress' ? cancelar(a) : quitar(a)"
+                      (retryClicked)="reintentar(a)" />
 ```
 
+### Por dispositivo (D16)
+
+No aplica: **no tiene input `size`** y nada en ella cambia por dispositivo (la fila llena el ancho y
+la X o el tacho mide 32 en el celular, la tablet y la computadora). Que esa X y «Reintentar» lleguen
+a 44 en lo táctil es trabajo pendiente del DS, no un `size` que se elija. En master-pedidos: sin
+`[size]` ni `bp`.
+
 ## «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
@@ -119,6 +128,49 @@ interface SuiFileUploadCardFile { filename: string; extension?: string; }
 - La barra de progreso es azul, no naranja.
 - No sube nada: refleja el estado que le pasan.
 
+## Bien y mal
+
+**El peso del archivo**
+
+```html
+<!-- ❌ mal: coma decimal; el canon es punto, como el «10.0 MB» de sui-file-upload
+     (vitrina master-preview/_guia-moleculas/fechas.ts:182) -->
+<sui-file-upload-card file="carta-octubre.pdf" state="in-progress" [progress]="45"
+                      description="1,2 MB de 2,6 MB" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-file-upload-card file="carta-octubre.pdf" state="in-progress" [progress]="45"
+                      description="1.2 MB de 2.6 MB" />
+```
+
+**Los textos de fábrica**
+
+```html
+<!-- ❌ mal: sin description sale «0 KB de 120 KB», y sin progress la barra arranca en 10 -->
+<sui-file-upload-card [file]="a.nombre" state="in-progress" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-file-upload-card [file]="a.nombre" state="in-progress" [progress]="a.pct" [description]="a.peso" />
+```
+
+**La X de la derecha**
+
+```html
+<!-- ❌ mal: mientras sube, la X cancela; tratarla siempre como «quitar» (Trampas) -->
+<sui-file-upload-card [file]="a.nombre" [state]="a.estado" [description]="a.peso"
+                      (actionClicked)="quitar(a)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-file-upload-card [file]="a.nombre" [state]="a.estado" [description]="a.peso"
+                      (actionClicked)="a.estado === 'in-progress' ? cancelar(a) : quitar(a)" />
+```
+
 ## Ejemplo
 
 ```html