Espaciado y radios

Espaciado

Hoy no hay tokens propios de espaciado. Todo el espaciado usa la escala estándar de Tailwind (gap-2, p-4, mt-6…). Al componer, apóyate en esta escala y evita valores arbitrarios:

4px · 1

8px · 2

12px · 3

16px · 4

24px · 6

32px · 8

48px · 12

64px · 16

Alturas y áreas táctiles

El mínimo táctil de la regla de público (50-70 años) es 44px. Todos los componentes interactivos tokenizados lo cumplen con holgura:

Regla	Valor
Altura mínima de botón (.cw-btn)	48px
Altura mínima de item de nav	48px
Altura mínima de fila de lección (.cw-lesson-row)	56px
Altura mínima de input (.cw-input)	56px
Padding interior de card (.cw-card)	24px
Padding de estado vacío (.cw-empty)	56px 32px
Barra «Marcar como completada» (.cw-btn-complete)	52px de alto, todo el ancho
Botón de grabar (.cw-record-big)	132 × 132 + borde 6px + halo 3px
Check de lección (.cw-check)	22px
Ancho máx. de tarjeta de contenido (--cw-content-max)	920px
Ancho del sidebar de temario (--cw-aside)	288px

Radios

Escala de radios tokenizada (:root de globals.css):

6px · control

10px · sm

12px · base

14px · md

16px · lg

999px · píldora

Token / regla	Valor	Dónde
--radius-control	6px	Controles de formulario (rounded-control). Borde del input.
--cw-radius-sm	10px	Botón, fila de lección, item de nav.
--cw-radius	12px	Radio base libre.
--cw-radius-md	14px	Vídeo 16:9 (.cw-video), fila de feedback.
--cw-radius-lg	16px	Tarjeta de contenido (.cw-card), estado vacío.
Píldoras	999px	Badges, sticker, barra de progreso.

Bordes

Regla	Valor
Borde por defecto (cards, filas)	1px sólido --color-cw-line (#E1E7EF)
Borde de input	2px sólido --color-cw-line; en foco → cw-blue (#0B89B0)
Borde de botón fantasma	2px sólido --color-cw-line

Foco, sombras y movimiento

Detalle	Valor
Foco accesible	outline 3px naranja #F47149, offset 2px (sigue el radio del elemento). No eliminar *:focus-visible.
Sombra de botón primario	0 2px 0 rgba(0,0,0,0.04)
Halo del grabador	0 0 0 3px #F47149, 0 8px 24px rgba(244,113,73,0.35)
--cw-dur-press	0,08s — empuje al pulsar
--cw-dur-ui	0,15s — color/borde/sombra
--cw-dur-move	0,35s — movimiento de entrada (tarjeta/check)
--cw-ease	cubic-bezier(0.4, 0, 0.2, 1)

Movimiento sin dependencias

Todo el movimiento (.cw-rise, .cw-check-pop, .cw-halo-pulse, drawer, ondas) se hace con @keyframes propios. Todas las animaciones se anulan bajo prefers-reduced-motion: reduce. El stack no incluye tailwindcss-animate ni shadcn/ui.

Reglas de espaciado y forma

1. Usa la escala de Tailwind (4, 8, 12, 16, 24, 32, 48, 64); evita valores arbitrarios.
2. Área táctil mínima 48px en CTAs y filas interactivas.
3. Usa los tokens de radio (--cw-radius-*) en vez de literales.
4. Nunca quites el foco visible naranja.