Todo lo que se construye debe funcionar en las cuatro vistas:
| Vista | Ancho | Mixin |
|---|---|---|
| Celular | 320 – 599 px | (estilo base) |
| Tablet | 600 – 1023 px | @include tablet |
| Portátil | 1024 – 1439 px | @include laptop |
| Monitor | 1440 px o más | @include desktop |
Cómo se escribe
Mobile first: el estilo base es el del celular y cada bloque agrega solo lo que cambia. Un solo archivo de estilos por componente, con un bloque por vista:
@use '@/design/tokens' as *;
.incident-card { /* celular */ }
@include tablet { .incident-card { /* tablet */ } }
@include laptop { .incident-card { /* portátil */ } }
@include desktop { .incident-card { /* monitor */ } }Cuando la estructura cambia por completo (por ejemplo, tarjetas en celular y tabla en portátil), se usan dos componentes visuales que comparten la misma lógica de la capa application.
@media escrito a mano está prohibido fuera de design/: si una vista necesita un ajuste especial, se toca su bloque o su token.