@ajuarezso/sui-design-system 0.25.0 → 0.25.2

package/docs/sui-radio-card/README.md

@@ -57,9 +57,9 @@ checkbox-card.**
 | `label` | Siempre. El nombre de la opción, corto: «Delivery», «Lo antes posible». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
 | `description` | Casi siempre: la consecuencia de elegirla («Lo revisamos y te transferimos. Puede tardar unas horas.»). | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
 | `sublabel` | Una precisión corta entre paréntesis («(canal estable)», «(sin OTA)»). Nunca la explicación: eso es `description`. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
-| `badge` | Marca una opción frente a las otras: «Por defecto». Con string sale azul `light`; pasa el objeto con el color que corresponda según el badge (un «Por defecto» es `gray`). | propuesta |
+| `badge` | Marca una opción frente a las otras: «Por defecto». Con string sale azul `light`; pasa el objeto con el color que corresponda según el badge. Si «Por defecto» va `gray` o con el azul de hoy espera P48. | propuesta, espera P48 |
 | `disabled` | La opción existe pero hoy no se puede: di por qué en la `description` («El local está cerrado ahora»). | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
-| `checked` / `[(ngModel)]` / `sui-radio-group` | El estado: `[checked]` + `(selected)` sueltos (lo normal en la app), o `ngModel` con `name` (checkout), o dentro de un `sui-radio-group`. | propuesta |
+| `checked` / `[(ngModel)]` / `sui-radio-group` | El estado: `[checked]` + `(selected)` sueltos (lo que más usa la app hoy), o `ngModel` con `name` (checkout), o dentro de un `sui-radio-group`. Cuál es el canon (grupo, o sueltos como lo normal) espera P49. | propuesta, espera P49 |
 
 ### `size` (el radio de adentro)
 
@@ -67,7 +67,7 @@ checkbox-card.**
 |---|---|---|
 | `xlarge` (28) | Mobile, vía `bp.controlSize()`. | canon (aprobado por el dueño, 28-09-2026: «componentes grandes») |
 | `large` (24) | Desktop, vía `bp.controlSize()`. | canon (aprobado por el dueño, 28-09-2026) |
-| `medium` (20, default) | No usar en pantallas nuevas. | canon (aprobado por el dueño, 28-09-2026) |
+| `medium` (20, default) | No usar en pantallas nuevas, tampoco en la computadora. | canon (aprobado por el dueño, 28-09-2026) · D16, dueño 06-10-2026 |
 
 **Usos de hoy que rompen las reglas: 0.** Los 5 que iban sin el size del breakpoint y el
 `xlarge` fijo de `pages/customer/mandadito/mandadito.html:30` pasaron a `bp.controlSize()` el
@@ -92,13 +92,27 @@ sola. El `size` cambia solo el radio.
 <sui-radio-card [size]="bp.controlSize()" … />   <!-- isMobile() ? 'xlarge' : 'large' -->
 ```
 
+### Por dispositivo (D16)
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `xlarge` (radio 28) | la card entera ya pasa de 44; el size solo agranda el radio |
+| celular (380–767) | `xlarge` (radio 28) | |
+| tablet táctil (`pointer: coarse`) | `xlarge` (radio 28) | `bp.controlSize()` mira solo el ancho: un iPad de 768 o más recibe `large` hasta que el helper mire el puntero |
+| computadora (`pointer: fine`) | `large` (radio 24) | un paso menos que el celular; no baja a `medium` (D16, dueño 06-10-2026) |
+
+Ultrawide: igual que la computadora (`large`).
+
+En master-pedidos: `[size]="bp.controlSize()"` (`xlarge` hasta 767 px, `large` desde ahí). La
+expresión exacta de D16, con la tablet, es `bp.tactil() ? 'xlarge' : 'large'`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
 |---|---|---|
 | `type="brand"` (0 usos) | no hay servicios de terceros que elegir | elegir el canal por el que te contactamos (WhatsApp, correo) con su logo (`brand`) |
 | `type="card-provider"` (0 usos) | no hay pago con tarjeta guardada | elegir una tarjeta guardada en el checkout, cuando entre Culqi / Niubiz |
-| `size="medium"` | el radio de 20 se pierde en el teléfono | una tabla densa solo de desktop |
+| `size="medium"` | el radio de 20 se pierde en el teléfono | no hay: en la computadora va `large` (D16, dueño 06-10-2026) |
 
 ## API
 
@@ -142,12 +156,52 @@ Implementa `ControlValueAccessor` (el valor del form es el `value` elegido). Den
 - Suelta (sin grupo), elegirla la marca pero **no desmarca a las otras**: el padre tiene que
   bindear `[checked]` de todas a la misma señal. Suelta, además, **cada card es una parada de Tab
   y no hay flechas**; dentro de `sui-radio-group` sí hay un solo tab stop y flechas (revisión 04-10-2026).
+  Cuál de las dos formas es el canon espera P49.
 - `badge` con string sale **azul `light` `small`** (en `sui-content-label` sale naranja).
 - `size` cambia solo el radio, no el padding ni el alto de la card.
 
+## Bien y mal
+
+Motivos de cancelación con un radio nativo
+
+```html
+<!-- ❌ mal: radio del navegador, sin tamaño ni foco del DS (pages/driver/driver-order-detail/driver-order-detail.html:874) -->
+<label class="ts__modal-reason">
+  <input type="radio" name="driverCancelReason" [value]="reason"
+    [checked]="cancelReasonSelected() === reason" (change)="cancelReasonSelected.set(reason)" />
+  <span>{{ reason }}</span>
+</label>
+```
+
+```html
+<!-- ✅ bien: igual que la pantalla hermana, pages/orders/orders.html:567 (sueltas con [checked]; si va en sui-radio-group espera P49) -->
+<sui-radio-card type="basic" [size]="bp.controlSize()" [value]="reason" [label]="reason"
+  [checked]="cancelReasonSelected() === reason" (selected)="cancelReasonSelected.set(reason)" />
+```
+
+Suelta, sin `[checked]`
+
+```html
+<!-- ❌ mal: elegir una no desmarca a las otras; quedan dos marcadas -->
+<sui-radio-card [size]="bp.controlSize()" value="delivery" label="Delivery" (selected)="modo.set('delivery')" />
+<sui-radio-card [size]="bp.controlSize()" value="pickup" label="Recojo en tienda" (selected)="modo.set('pickup')" />
+```
+
+```html
+<!-- ✅ bien: el grupo decide cuál está marcada (como pages/super-admin/master-settings/master-settings.html:438) -->
+<sui-radio-group [ngModel]="modo()" (ngModelChange)="modo.set($event)">
+  <sui-radio-card [size]="bp.controlSize()" value="delivery" label="Delivery" />
+  <sui-radio-card [size]="bp.controlSize()" value="pickup" label="Recojo en tienda" />
+</sui-radio-group>
+```
+
+Sueltas con `[checked]="modo() === '…'"` + `(selected)` también funciona (es lo que hace hoy casi
+toda la app). Cuál de las dos es el canon espera P49.
+
 ## Ejemplo
 
 ```html
+<!-- suelta con [checked], como casi toda la app; si va en sui-radio-group espera P49 -->
 <sui-radio-card
   [size]="bp.controlSize()"
   type="left-icon"

package/docs/sui-radio-label/README.md

@@ -36,9 +36,9 @@ o con peso → radio-card · muchas → select.**
 > motivos («Spam», «Acoso», «Infringe las reglas»); el «avanzado» suma (Sublabel), badge «NEW»,
 > descripción, Link Button y la versión con el círculo a la derecha.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`):
-> **1 uso**, las franjas horarias del checkout, con `flip`. Más **1 radio nativo** de motivos
-> (ver abajo a qué componente va).
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`), revisado
+> el 06-10-2026: **2 usos**, las franjas horarias del checkout (con `flip`) y los distritos de
+> «Trabaja con nosotros». Más **1 radio nativo** de motivos (ver abajo a qué componente va).
 
 ### Las piezas
 
@@ -52,17 +52,21 @@ o con peso → radio-card · muchas → select.**
 | `link` | «Ver detalle» que no elige la opción. Solo se ve con `description`. | según la guía del DS |
 | `flip` | Círculo a la derecha en listas de opciones tipo hoja (sheet) y de ajustes, donde el texto es lo que se lee y el círculo es el indicador, como las franjas del checkout. En formularios, a la izquierda. | canon (aprobado por el dueño, 03-10-2026) |
 | `disabled` | La opción existe pero no aplica (franja ya llena). | según la guía del DS |
-| `size` | `medium` (default, Figma): círculo 20, label 14/20. `large`: círculo 24, label 16/24. `xlarge`: círculo 28, label 16/24. En large y xlarge el sublabel y la descripción se quedan en 12/16 (canon, dueño 04-10-2026); el badge sin `size` propio sube a `medium` / `large` y el link a `medium`. Se usa con `[size]="bp.controlSize()"`. | `medium`: según la guía del DS · `large` / `xlarge`: canon (aprobado por el dueño, 03-10-2026), extensión SUI |
+| `size` | `medium` (default, Figma): círculo 20, label 14/20. `large`: círculo 24, label 16/24. `xlarge`: círculo 28, label 16/24. En large y xlarge el sublabel y la descripción se quedan en 12/16 (canon, dueño 04-10-2026); el badge sin `size` propio sube a `medium` / `large` y el link a `medium`. `2xlarge`: círculo 28 con la fila a 44 (su uso por dispositivo está pendiente, ver D16). Se usa con `[size]="bp.controlSize()"`. | `medium`: según la guía del DS · `large` / `xlarge`: canon (aprobado por el dueño, 03-10-2026), extensión SUI |
 
 **Usos de hoy:**
 
-- **1 radio nativo de motivos:** `pages/driver/driver-order-detail/driver-order-detail.html:844`
+- **1 radio nativo de motivos:** `pages/driver/driver-order-detail/driver-order-detail.html:874`
   (motivos de cancelación del repartidor). Por la pantalla hermana va a `sui-radio-card
   type="basic"` como `pages/orders/orders.html:567`, no a este componente.
-- El único uso actual, `pages/customer/checkout/checkout.html:473`, controla la selección con
-  `[checked]` + `(selected)` por fila, sin `sui-radio-group`. Funciona porque el padre fija el
-  estado, pero no se enchufa a un formulario. **Va sin `size`** (`medium`, círculo de 20 px) en
-  una hoja del checkout del cliente, que se usa en el teléfono: rompe la tabla de abajo.
+- `pages/customer/checkout/checkout.html:474` controla la selección con `[checked]` +
+  `(selected)` por fila, sin `sui-radio-group`. Funciona porque el padre fija el estado, pero no se
+  enchufa a un formulario. Va con `bp.isMobile() ? '2xlarge' : 'medium'`: en la computadora baja a
+  `medium`, que D16 ya no usa (va `large`, dueño 06-10-2026). El `2xlarge` del teléfono está
+  pendiente (ver D16).
+- `pages/customer/trabaja/trabaja.html:150` va con `bp.isMobile() ? 'xlarge' : 'large'`, que es lo
+  mismo que `bp.controlSize()`: cumple la fila de D16. Sin descripción la fila mide 28 en el
+  teléfono, no 44; si pasa a `2xlarge` está pendiente (ver D16).
 
 ## Tamaño en mobile y en web
 
@@ -74,12 +78,12 @@ dueño, 28-09-2026).
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| opciones de un formulario o una hoja (franjas horarias, método de entrega) | `2xlarge` (fila de 44 como mínimo, círculo 28, label 16/24) | `large` (círculo 24, label 16/24) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono; web: canon (aprobado por el dueño, 03-10-2026) |
-| lista densa de desktop | — | `medium` (círculo 20, label 14/20) | propuesta, falta aprobación |
+| opciones de un formulario o una hoja (franjas horarias, método de entrega) | `xlarge` (círculo 28, label 16/24; sin descripción la fila mide 28, no 44: `2xlarge` pendiente, ver D16) | `large` (círculo 24, label 16/24) | D16 (fila de checkbox, radio y switch; dueño 06-10-2026) |
+| lista densa de desktop | — | `large` (círculo 24): no baja a `medium` | D16, dueño 06-10-2026 |
 | opciones con mucho contexto cada una | `sui-radio-card` con `bp.controlSize()` | `sui-radio-card` con `bp.controlSize()` | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 ```html
-<sui-radio-label value="recojo" [size]="bp.isMobile() ? '2xlarge' : 'large'" label="Recojo en tienda" />
+<sui-radio-label value="recojo" [size]="bp.controlSize()" label="Recojo en tienda" />
 ```
 
 | size | círculo | label | sublabel / descripción | alto de la fila sin descripción |
@@ -89,21 +93,42 @@ dueño, 28-09-2026).
 | `xlarge` | 28 | 16/24 | 12/16 | 28 |
 | `2xlarge` | 28 | 16/24 | 12/16 | **44** (`min-height`) |
 
-`2xlarge` (canon (dueño, 04-10-2026): piso táctil 44 en el teléfono) es la fila del teléfono: mismo círculo de 28 y mismo label que `xlarge`,
-pero la fila mide 44 como mínimo con todo centrado en vertical, y el texto secundario se queda en 12
-(regla del 03-10). Con descripción la fila ya pasa de 44 y vuelve a alinearse arriba.
+`2xlarge` (canon, dueño 04-10-2026: piso táctil 44 en el teléfono) tiene el mismo círculo de 28 y
+el mismo label que `xlarge`, pero la fila mide 44 como mínimo con todo centrado en vertical, y el
+texto secundario se queda en 12 (regla del 03-10). Con descripción la fila ya pasa de 44 y vuelve a
+alinearse arriba. Si reemplaza a `xlarge` en el celular y la tablet está **pendiente** (ver D16).
 
 Toda la fila se toca (el host recibe el click). Con `xlarge` el contenido baja 2 px para que la
 línea del label (24) quede centrada con el círculo (28).
 
-Sin descripción, la fila en `xlarge` mide 28 px (lo que mide el círculo): en el teléfono va
-`2xlarge`, que la lleva a 44. Con descripción llega sola: 2 + 24 (label) + 4 + 16 (descripción) = 46 px
+Sin descripción, la fila en `xlarge` mide 28 px (lo que mide el círculo):
+`2xlarge` la lleva a 44 (pendiente, ver D16). Con descripción llega sola: 2 + 24 (label) + 4 + 16 (descripción) = 46 px
 en `xlarge` y en `2xlarge`.
 
 **Regla de tamaños aplicada (canon, dueño 04-10-2026):** en `large` y `xlarge` el label sube a
 16/24 y el sublabel y la descripción se quedan en 12/16, igual que `sui-switch-label`. Antes subían
 a 14/20. El badge y el link siguen creciendo con el size.
 
+### Por dispositivo (D16)
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `xlarge` | círculo de 28 |
+| celular (380–767) | `xlarge` | |
+| tablet táctil (`pointer: coarse`) | `xlarge` | `bp.controlSize()` mira solo el ancho: un iPad de 768 o más recibe `large` hasta que el helper mire el puntero |
+| computadora (`pointer: fine`) | `large` | un paso menos que el celular; no baja a `medium` (D16, dueño 06-10-2026) |
+
+Ultrawide: igual que la computadora (`large`).
+
+En master-pedidos: `[size]="bp.controlSize()"` (`xlarge` hasta 767 px, `large` desde ahí). La
+expresión exacta de D16, con la tablet, es `bp.tactil() ? 'xlarge' : 'large'`.
+
+**Pendiente: `2xlarge` en el celular y la tablet.** Sin descripción, `xlarge` deja la fila en 28 px,
+por debajo del piso de 44. El dueño aprobó `2xlarge` el 04-10-2026 justo para eso (fila de 44), pero
+la fila de D16 dice `xlarge` para toda la familia y ningún helper devuelve `2xlarge`. Falta que el
+dueño decida si en este componente el celular y la tablet pasan a `2xlarge` (y que D16 y
+`bp.controlSize()` lo recojan). Mientras no lo decida, manda la fila de D16: `xlarge`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -140,7 +165,8 @@ a 14/20. El badge y el link siguen creciendo con el size.
 - **No implementa `ControlValueAccessor`.** El formulario se engancha al `sui-radio-group`, no a
   cada opción. Sin grupo, se maneja con `[(checked)]`.
 - **`size` arranca en `medium`** (círculo de 20 px): sin `[size]="bp.controlSize()"` choca con la
-  regla de controles grandes (dueño, 28-09-2026) en mobile.
+  regla de controles grandes (dueño, 28-09-2026) y con D16. Aun con `xlarge`, la fila sin
+  descripción queda en 28: si pasa a `2xlarge` está pendiente (ver D16).
 - **Tocar una opción ya elegida no la desmarca** (bien, es un radio). Tocar el link tampoco la elige.
 - **`link` solo se dibuja con `description`.**
 - El `sui-radio` de adentro no recibe clics (`pointer-events: none`): no le pongas handlers.
@@ -151,12 +177,53 @@ a 14/20. El badge y el link siguen creciendo con el size.
 - El badge con string sale naranja; en `sui-radio-card` el default es azul.
 - `flip` usa CSS `order`: el orden para lector de pantalla no cambia.
 
+## Bien y mal
+
+Sin size
+
+```html
+<!-- ❌ mal: sin size queda en medium, círculo de 20 en el teléfono y en la computadora -->
+<sui-radio-label [value]="d" [label]="d" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-radio-label [size]="bp.controlSize()" [value]="d" [label]="d" />
+```
+
+Franjas horarias en la computadora
+
+```html
+<!-- ❌ mal: medium en la computadora; D16 no baja de large (pages/customer/checkout/checkout.html:474) -->
+<sui-radio-label [size]="bp.isMobile() ? '2xlarge' : 'medium'" [value]="'' + f.inicioMs"
+  [label]="etiquetaFranja(f)" [flip]="true" [disabled]="!f.disponible" />
+```
+
+```html
+<!-- ✅ bien (si el teléfono pasa a 2xlarge está pendiente, ver D16) -->
+<sui-radio-label [size]="bp.controlSize()" [value]="'' + f.inicioMs"
+  [label]="etiquetaFranja(f)" [flip]="true" [disabled]="!f.disponible" />
+```
+
+Link sin descripción
+
+```html
+<!-- ❌ mal: link solo se dibuja con description; «Ver precios» no aparece -->
+<sui-radio-label value="pro" label="Plan Pro" [link]="{ label: 'Ver precios', href: '/precios' }" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-radio-label [size]="bp.controlSize()" value="pro" label="Plan Pro"
+  description="Facturación mensual." [link]="{ label: 'Ver precios', href: '/precios' }" />
+```
+
 ## Ejemplo
 
 ```html
 <sui-radio-group [(ngModel)]="motivo" class="lista-vertical">
   @for (m of motivos; track m) {
-    <sui-radio-label [value]="m" [label]="m" />
+    <sui-radio-label [size]="bp.controlSize()" [value]="m" [label]="m" />
   }
 </sui-radio-group>
 ```

package/docs/sui-rating/README.md

@@ -50,7 +50,7 @@ lista cargada, que viene con tope. La fórmula depende de `n`: otro denominador
 | appearance | cuándo | ejemplo real | fuente |
 |---|---|---|---|
 | `inline` (default), `readonly` | **Mostrar** una nota: la fila de estrellas pelada. | `components/ratings-detail/ratings-detail.html:31` (la nota del local) | según la guía del DS (ejemplo «Rating Review») |
-| `inline`, interactivo | Pedir la nota en grande: en el teléfono con `size="2xlarge"` (estrellas de 32 en botones de 44 × 44); `xlarge` (28 tocables) queda para web. | `pages/customer/rate-order/rate-order.html:93` y `:167` (hoy en `xlarge`) | tamaño: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono; el «cuándo inline vs bar» sigue como propuesta |
+| `inline`, interactivo | Pedir la nota en grande: en el teléfono y la tablet con `size="2xlarge"` (estrellas de 32 en botones de 44 × 44); en la computadora, `medium`. | `pages/customer/rate-order/rate-order.html:95` y `:169` (hoy `2xlarge` / `xlarge`, cortado con `bp.isMobile()`) | teléfono: canon (dueño, 04-10-2026): piso táctil 44 · computadora: D16, dueño 05-10-2026 (antes `xlarge`) · el «cuándo inline vs bar» sigue como propuesta |
 | `bar` | **Pedir** una nota en el celular: con `size="2xlarge"` las celdas miden 64 × 44 (36 en los demás sizes). | `components/rate-entity-card/rate-entity-card.html:40` | según la guía del DS (ejemplo «Rating Bar») |
 | `cell` | **No usar** hoy (ver abajo). | — | según la guía del DS (ejemplo «Rating Cell») |
 | `bar-area` | **No usar** hoy (ver abajo). | — | según la guía del DS (ejemplo «Rating Bar With Textarea») |
@@ -68,9 +68,9 @@ lista cargada, que viene con tope. La fórmula depende de `n`: otro denominador
 
 | size | px | cuándo | fuente |
 |---|---|---|---|
-| `small` | 16 | Web: filas y listas (cada reseña, tablas, historial). | propuesta, falta aprobación |
-| `medium` (default) | 20 | Web: perfil, ficha, detalle. Mobile: filas y listas. | propuesta, falta aprobación |
-| `large` | 24 | Web: la nota grande de un resumen, la card de una calificación enviada. Mobile: perfil y ficha. | propuesta, falta aprobación |
+| `small` | 16 | **No se usa**: es chico. Las filas y listas de la computadora (cada reseña, tablas, historial) van en `medium`. | D16, dueño 05-10-2026 (antes «web: filas y listas», propuesta) |
+| `medium` (default) | 20 | Computadora, tablet y celular chico: filas, listas, perfil, ficha y detalle. | D16, dueño 05-10-2026 |
+| `large` | 24 | Celular (380–767): filas, listas, perfil y ficha (un paso más que la computadora). Computadora: la nota grande de un resumen, la card de una calificación enviada. | celular: D16, dueño 05-10-2026 · resumen en la computadora: propuesta, falta aprobación |
 | `xlarge` | 28 | Extensión SUI. Mobile: la nota grande de un resumen. | propuesta, falta aprobación |
 
 ### El resto de las propiedades
@@ -98,8 +98,8 @@ lista cargada, que viene con tope. La fórmula depende de `n`: otro denominador
   `pages/super-admin/master-users/master-user-sheet.html:142`.
 - **1 rating usado como ícono** (`type="heart"` con `max=1` para los favoritos):
   `components/ratings-detail/ratings-detail.html:45`. Va `sui-icon name="heart-3-fill"`.
-- **A discutir, 2 `inline` interactivos de 28 px** como input:
-  `pages/customer/rate-order/rate-order.html:93` y `:167`. Alternativa: `appearance="bar"`.
+- **A discutir, 2 `inline` interactivos de 28 px en la computadora** (en el teléfono ya van en `2xlarge`) como input:
+  `pages/customer/rate-order/rate-order.html:95` y `:169`. Alternativa: `appearance="bar"`.
 
 ## No usar: por qué no hoy y cuándo sí
 
@@ -120,15 +120,16 @@ Criterio de la app: **D16, tamaño por dispositivo** (canon, dueño, 05-10-2026)
 380 px o más y, en lo que se toca, también la tablet (`pointer: coarse`). La columna «web» es la
 computadora (`pointer: fine`) y, en lo que no se toca, también la tablet. En el celular chico
 (< 380 px) va `medium` a la vista, sin achicar el área de 44 de lo que se toca. **Nada en `small` ni
-`xsmall`**, salvo lo que el componente solo tiene en chico. Hoy la app corta con
-`BreakpointsService.isMobile()` (≤ 767 px), que todavía no mira el puntero ni los 380 px.
+`xsmall`**, salvo lo que el componente solo tiene en chico. En la app, `bp.isMobile()` mira solo el
+ancho (≤ 767 px); `bp.celular()` (380–767) y `bp.tactil()` (celular o pantalla táctil) ya miran los
+380 px y el puntero: son las dos señales que usa este componente (ver «Por dispositivo (D16)»).
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| Mostrar en una fila o lista | `medium` (20) | `small` (16) | propuesta, falta aprobación |
-| Mostrar en perfil o ficha | `large` (24) | `medium` (20) | propuesta, falta aprobación |
+| Mostrar en una fila o lista | `large` (24) | `medium` (20) | D16, dueño 05-10-2026 (antes `medium` / `small`) |
+| Mostrar en perfil o ficha | `large` (24) | `medium` (20) | D16, dueño 05-10-2026 |
 | La nota grande de un resumen | `xlarge` (28) | `large` (24) | propuesta, falta aprobación |
-| Pedir una nota | `2xlarge`: `inline` (estrellas de 32 en botones de 44 × 44) o `bar` (celdas de 64 × 44) | `bar` (64 × 36), o `inline` `large` con mouse | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono; web: propuesta |
+| Pedir una nota | `2xlarge`: `inline` (estrellas de 32 en botones de 44 × 44) o `bar` (celdas de 64 × 44) | `bar` (64 × 36), o `inline` `medium` con mouse | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · web: D16, dueño 05-10-2026 (lo que se toca va `medium` en la computadora; antes `large`, propuesta) |
 
 ```ts
 readonly bp = inject(BreakpointsService); // master-pedidos: src/app/services/breakpoints.service.ts
@@ -136,7 +137,7 @@ readonly bp = inject(BreakpointsService); // master-pedidos: src/app/services/br
 
 ```html
 <sui-rating [value]="local.rating" [readonly]="true" [halfStep]="true"
-  [size]="bp.isMobile() ? 'medium' : 'small'" ariaLabel="Nota del local" />
+  [size]="bp.celular() ? 'large' : 'medium'" ariaLabel="Nota del local" />
 ```
 
 En `bar` el `size` no cuenta salvo `2xlarge` (celda de 44 de alto en vez de 36; íconos fijos de 20
@@ -157,6 +158,28 @@ nota de solo lectura sigue `medium`/`large`.
 (el botón es el ícono, sin padding) y `2xlarge` 44 px (32 + 6 + 6); `bar` 36 px (8 + 20 + 8 de cada
 celda) y en `2xlarge` 44 (12 + 20 + 12); `cell` 58 px (12 + 32 + 12 de padding y 2 de borde).
 
+### Por dispositivo (D16)
+
+`rating` no está en la tabla por componente de D16 (dueño, 05-10-2026), así que va por la regla
+general y tiene **dos filas según el modo**: mostrar una nota (`readonly`) es «lo que no se toca» y
+pedirla es «lo que se toca».
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | mostrar `medium` · pedir `2xlarge` | D16 pide `medium` con área de 44 para pedir, pero solo `2xlarge` llega a 44: hasta que el DS estire el área (nota ¹ de D16), se queda el grande |
+| celular (380–767 px) | mostrar `large` · pedir `2xlarge` | mostrar sube un paso (P1 b); pedir: `inline` 44 × 44 o `bar` 64 × 44 |
+| tablet táctil (`pointer: coarse`) | mostrar `medium` · pedir `2xlarge` | se pide con el dedo: mismo piso de 44 que el celular |
+| computadora (`pointer: fine`) | mostrar `medium` · pedir `medium` | en `bar` el `size` no cuenta salvo `2xlarge` (celdas de 36) |
+
+Ultrawide (≥ 1920 px): igual que la computadora. `small` no se usa en ningún dispositivo. La nota
+grande de un resumen va un paso arriba de esta tabla (`large` en la computadora, `xlarge` en el
+celular), y eso sigue en propuesta.
+
+En master-pedidos, sin helper propio:
+
+- mostrar: `[size]="bp.celular() ? 'large' : 'medium'"` (resumen, en propuesta: `bp.celular() ? 'xlarge' : 'large'`)
+- pedir: `[size]="bp.tactil() ? '2xlarge' : 'medium'"`
+
 ## API
 
 <!-- api:inicio -->
@@ -209,13 +232,57 @@ Implementa `ControlValueAccessor` sobre `value` (sirve con `formControlName`). `
   nativo), Home/End van a 1 y al máximo, sin vuelta. Cada flecha elige y emite `valueChange`. Si
   la pantalla ya escribe la nota al lado, ponle `aria-hidden="true"` para que no se lea dos veces.
 
+## Bien y mal
+
+Lo favorito no es una nota
+
+```html
+<!-- ❌ mal: un rating de un corazón como ícono (components/ratings-detail/ratings-detail.html:45) -->
+<sui-rating type="heart" appearance="inline" [readonly]="true" [value]="1" [max]="1" />
+```
+
+```html
+<!-- ✅ bien: ícono del mismo tamaño que las estrellas de al lado -->
+<sui-icon name="heart-3-fill" [size]="bp.celular() ? 28 : 24" aria-hidden="true" />
+```
+
+La nota grande de un resumen
+
+```html
+<!-- ❌ mal: tamaños invertidos, más chico en el celular (components/ratings-detail/ratings-detail.html:34) -->
+<sui-rating [value]="average()" [readonly]="true" [halfStep]="true"
+  [size]="bp.isMobile() ? 'large' : 'xlarge'" />
+```
+
+```html
+<!-- ✅ bien: regla general de lo que no se toca, un paso más grande en el celular.
+     El paso extra del resumen (`xlarge` / `large`) sigue en propuesta, falta aprobación -->
+<sui-rating [value]="average()" [readonly]="true" [halfStep]="true"
+  [size]="bp.celular() ? 'large' : 'medium'" />
+```
+
+La nota en una fila o lista
+
+```html
+<!-- ❌ mal: `small` fijo, 16 px también en el celular (pages/drivers/drivers.html:160, pages/customer/order-tracking/order-tracking.html:407) -->
+<sui-rating type="star" size="small" [value]="driver.rating" [readonly]="true" [halfStep]="true" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-rating type="star" [size]="bp.celular() ? 'large' : 'medium'"
+  [value]="driver.rating" [readonly]="true" [halfStep]="true" />
+```
+
 ## Ejemplo
 
 ```html
 <!-- Mostrar la nota del local (promedio, desde el agregado) -->
 <span class="nota">{{ notaTexto }}</span>
-<sui-rating [value]="local.rating" [readonly]="true" [halfStep]="true" size="small" aria-hidden="true" />
+<sui-rating [value]="local.rating" [readonly]="true" [halfStep]="true"
+  [size]="bp.celular() ? 'large' : 'medium'" aria-hidden="true" />
 
 <!-- Pedir la nota al repartidor -->
-<sui-rating appearance="bar" type="star" [(value)]="nota" ariaLabel="Califica al repartidor" />
+<sui-rating appearance="bar" type="star" [size]="bp.tactil() ? '2xlarge' : 'medium'"
+  [(value)]="nota" ariaLabel="Califica al repartidor" />
 ```

package/docs/sui-rich-editor/README.md

@@ -47,6 +47,12 @@ Regla corta: **hoy, siempre `sui-textarea`.**
 **No tiene `size`.** Los botones de la barra son de 28 px: **no tiene tamaño suficiente para
 mobile**. Si alguna vez se usa, que sea en el panel web.
 
+### Por dispositivo (D16)
+
+No aplica: no tiene input `size` y la barra mide 28 px en todos los dispositivos, así que no llega a
+los 44 de D16 (dueño, 05-10-2026) en el celular ni en la tablet táctil. Solo en la computadora
+(`pointer: fine`); en master-pedidos no hay nada que bindear.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -106,6 +112,45 @@ Sub-componente: `sui-rich-editor-item` (cada botón de la barra).
 - Por default muestra solo la barra: sin `[editable]="true"` no hay dónde escribir.
 - El label de tamaño por default es técnico («14px»); el de título ya está en español («Título», 04-10-2026).
 
+## Bien y mal
+
+Una descripción o una nota
+
+```html
+<!-- ❌ mal: el texto se guarda y se muestra plano; la barra sobra y en el teléfono no se toca -->
+<sui-rich-editor [editable]="true" placeholder="Describe el producto…" [(value)]="descripcion" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-textarea [size]="bp.sizeControl()" label="Descripción" [rows]="4"
+  placeholder="Describe el producto…" [(value)]="descripcion" />
+```
+
+La barra entera esperando que todo funcione
+
+```html
+<!-- ❌ mal: título, tamaño, enlace, comentario y mención solo emiten (action); nadie los resuelve -->
+<sui-rich-editor [editable]="true" [(value)]="html" />
+```
+
+```html
+<!-- ✅ bien: solo lo que el editor aplica solo -->
+<sui-rich-editor layout="formatting" [showMore]="false" [editable]="true" [(value)]="html" />
+```
+
+Un editor sin dónde escribir
+
+```html
+<!-- ❌ mal: sin [editable]="true" solo se dibuja la barra -->
+<sui-rich-editor layout="formatting" placeholder="Escribe la respuesta…" [(value)]="html" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-rich-editor layout="formatting" [editable]="true" placeholder="Escribe la respuesta…" [(value)]="html" />
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-segmented-control/README.md

@@ -34,13 +34,15 @@ tab-chips · secciones → tab menu.**
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`):
 > **5 usos en 4 archivos**. Tamaños: 3 `small`, 1 `medium`, 1 sin `size` (`medium`). 1 con solo
-> íconos (vista cuadrícula / lista del catálogo).
+> íconos (vista cuadrícula / lista del catálogo). El 06-10-2026 ya eran **9 usos en 7 archivos**
+> (ver «Usos de hoy» abajo).
 
 ### `size`
 
 | size | cuándo | fuente |
 |---|---|---|
-| `xlarge` | Mobile: es el único que se acerca a los 44 px de área táctil (segmento de 40 px). | canon (dueño: «componentes grandes», 28-09-2026, y D16, 05-10-2026) |
+| `2xlarge` | Celular y tablet táctil: el único que llega a 44 px por segmento. | canon (dueño, 04-10-2026: piso táctil 44 en el teléfono) y D16, dueño 05-10-2026 |
+| `xlarge` | No se usa: 40 px no llega a 44 en el teléfono y sobra en la computadora. Ninguna pantalla de la app lo usa (medido el 06-10-2026; solo aparece en la vitrina `master-preview`). | D16, dueño 05-10-2026 (antes «mobile», 28-09-2026) |
 | `large` | No aporta: 32 px, chico para el dedo y grande para web. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 | `medium` (default) | Computadora: junto a títulos o filtros, también solo íconos en una barra. | canon (dueño, 05-10-2026, D16); el valor exacto, canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 | `small` | No usar: es chico. Los íconos de una barra (cuadrícula / lista) van en `medium`. | canon (dueño, 05-10-2026, D16) |
@@ -57,17 +59,21 @@ tab-chips · secciones → tab menu.**
 **Usos de hoy que rompen las reglas:**
 
 - **2 dentro de un borrador que se guarda después (a discutir):**
-  `pages/super-admin/master-settings/master-settings.html:303` (modo de envío: «Por distancia» /
-  «Precio único») y `:336` («Por calle» / «En línea recta»). La guía dice que se aplica de
+  `pages/super-admin/master-settings/master-settings.html:281` (modo de envío: «Por distancia» /
+  «Precio único») y `:314` («Por calle» / «En línea recta»). La guía dice que se aplica de
   inmediato; aquí la elección espera al «Guardar». Es trabajo de `sui-radio-card`.
-- **1 con textos largos, a verificar en mobile:** `pages/super-admin/master-roles/master-roles.html:47`
+- **1 con textos largos, a verificar en mobile:** `pages/super-admin/master-roles/master-roles.html:48`
   («Administrador de ciudad» / «Jefe de operaciones»). Por ancho de texto quedan apretados cerca
   del borde a 390 px; no se midió en la pantalla real.
-- **2 en `small` con texto** (la propuesta deja `small` solo para íconos): `master-settings.html:303`
-  y `:336`. El tercero en `small`, `pages/products/products.html:81`, está bien: solo íconos.
-- **5 sin tamaño por plataforma** (todos fijos): ninguno cambia a `xlarge` en mobile. Ejemplo:
-  `pages/driver/driver-schedule/driver-schedule.html:30` (`size="medium"` en una pantalla del
-  repartidor, que se usa en el teléfono).
+- **2 en `small` con texto** (D16: `small` no se usa): `master-settings.html:281` y `:314`. El
+  tercero, `pages/products/products.html:83`, va en `small` en la computadora con solo íconos: con
+  D16 también pasa a `medium`.
+- **Sin tamaño por dispositivo** (revisado el 06-10-2026): `master-roles.html:48` (sin `size`) y
+  `pages/super-admin/master-categorias/master-categorias.html:124` (`medium` fijo) se quedan en 28
+  en el teléfono; `master-settings.html:224` usa `tallaServicio()` (`master-settings.ts:452`), que
+  da `large` (32) en el teléfono. Los que cortan con `bp.isMobile()`
+  (`pages/driver/driver-schedule/driver-schedule.html:31`, `pages/overview/overview.html:45`,
+  `pages/driver/driver-dashboard/driver-dashboard.html:865`) dejan la tablet táctil en `medium`.
 
 ## Tamaño en mobile y en web
 
@@ -80,8 +86,8 @@ En large, xlarge y 2xlarge el texto sube a 16 px (regla del 03-10-2026): Label/M
 `large` el padding del segmento con texto bajó de 6 a 4 para que siga midiendo 32.
 
 **`2xlarge` es el size del teléfono**: 44 px por segmento, con texto o solo ícono (canon (dueño,
-04-10-2026): piso táctil 44 en el teléfono). `xlarge` (40) no cambia y queda para las pantallas que
-ya lo usan.
+04-10-2026): piso táctil 44 en el teléfono). `xlarge` (40) no se usa: no llega a 44 y ninguna
+pantalla de la app lo tiene.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
@@ -89,9 +95,27 @@ ya lo usan.
 | solo íconos en una barra (cuadrícula / lista) | `2xlarge` (44) | `medium` | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · web: canon (dueño, 05-10-2026, D16), antes `small` |
 
 ```html
-<sui-segmented-control [size]="bp.isMobile() ? '2xlarge' : 'medium'" … />
+<sui-segmented-control [size]="bp.tactil() ? '2xlarge' : 'medium'" … />
 ```
 
+### Por dispositivo (D16)
+
+Fila de `segmented-control` en la tabla de D16 (dueño, 05-10-2026): se toca, y el size que llega a
+44 es `2xlarge`.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `2xlarge` (44) | D16 pide `medium` con área de 44, pero el DS todavía no estira el área de los `medium` (nota ¹ de D16): hasta entonces se queda el grande |
+| celular (380–767 px) | `2xlarge` (44) | con texto o solo íconos |
+| tablet táctil (`pointer: coarse`) | `2xlarge` (44) | Apple pide 44 también en el iPad |
+| computadora (`pointer: fine`) | `medium` (28) | también solo íconos en una barra; nunca `small` |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`; el espacio extra va al `max-width`, no a
+segmentos más altos.
+
+En master-pedidos: `[size]="bp.tactil() ? '2xlarge' : 'medium'"`. No hay helper: `bp.sizeChips()`
+llega a `xlarge` (40) y `bp.sizeControl()` a `large` (32), y ninguno de los dos da 44 aquí.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -145,12 +169,57 @@ interface SuiSegmentedControlItem<T = string> {
 - Los tamaños son extensión de SUI: la guía tiene uno solo. Su versión redondeada (`Rounded`)
   no existe en SUI.
 
+## Bien y mal
+
+Vista cuadrícula / lista
+
+```html
+<!-- ❌ mal: `small` en la computadora; D16 no usa `small` (pages/products/products.html:83) -->
+<sui-segmented-control [size]="bp.isMobile() ? '2xlarge' : 'small'"
+  [tabs]="viewToggleItems" [(active)]="viewMode" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-segmented-control [size]="bp.tactil() ? '2xlarge' : 'medium'"
+  [tabs]="viewToggleItems" [(active)]="viewMode" />
+```
+
+Modo del servicio en el panel
+
+```html
+<!-- ❌ mal: `large` (32) en el teléfono no llega a 44 (master-settings.html:224, tallaServicio en master-settings.ts:452) -->
+<sui-segmented-control [size]="bp.isMobile() ? 'large' : 'medium'"
+  ariaLabel="Cómo se cobra la tarifa de servicio"
+  [tabs]="MODOS_SERVICIO" [active]="borrador().servicioModo" (tabChange)="setModoServicio($event)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-segmented-control [size]="bp.tactil() ? '2xlarge' : 'medium'"
+  ariaLabel="Cómo se cobra la tarifa de servicio"
+  [tabs]="MODOS_SERVICIO" [active]="borrador().servicioModo" (tabChange)="setModoServicio($event)" />
+```
+
+Rol a invitar
+
+```html
+<!-- ❌ mal: sin `size` ni `ariaLabel`: 28 px también en el teléfono y el grupo sin nombre (pages/super-admin/master-roles/master-roles.html:48) -->
+<sui-segmented-control [tabs]="rolesCiudad" [active]="rolStaff()" (activeChange)="rolStaff.set($any($event))" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-segmented-control [size]="bp.tactil() ? '2xlarge' : 'medium'" ariaLabel="Rol"
+  [tabs]="rolesCiudad" [active]="rolStaff()" (activeChange)="rolStaff.set($any($event))" />
+```
+
 ## Ejemplo
 
 ```html
 <div style="max-width: 320px">
   <sui-segmented-control
-    [size]="bp.isMobile() ? '2xlarge' : 'medium'"
+    [size]="bp.tactil() ? '2xlarge' : 'medium'"
     [tabs]="[{ value: 'grid', label: 'Vista cuadrícula', icon: 'layout-grid-line', iconOnly: true },
              { value: 'list', label: 'Vista lista', icon: 'list-unordered', iconOnly: true }]"
     [(active)]="vista" />