# Reglas de interacción

**Última actualización:** 14 de noviembre de 2026.

Estas reglas definen el comportamiento compartido de la interfaz de Salud365. Se aplican junto a los requisitos funcionales de cada módulo y a las definiciones de [Componentes](componentes.md).

## 1. Composición por pasos

1. Cada paso debe caber en una sola vista en tamaños habituales de móvil y escritorio, evitando desplazamiento innecesario.
2. Mantener visibles las acciones principales y todos los campos obligatorios.
3. Utilizar pasos adicionales o modales cuando aporten claridad, por ejemplo para detalles u opciones secundarias.
4. Conservar legibilidad y navegación por teclado. Permitir desplazamiento cuando sea necesario por texto ampliado, teclado virtual o pantallas excepcionalmente pequeñas.
5. Comprobar altura del contenido y visibilidad de las acciones, además del ancho.

## 2. Acciones y navegación

| Situación | Regla |
| --- | --- |
| Acción principal | Usar una etiqueta concreta y un nivel visual dominante dentro del bloque. |
| Continuar | Explicar qué falta cuando una condición impida avanzar. |
| Volver | Conservar los datos que puedan mantenerse de forma segura. |
| Acción destructiva | Mostrar qué se afectará y solicitar confirmación cuando corresponda. |
| Enlace | Identificar claramente el destino o contenido que se abrirá. |
| Control de solo icono | Añadir nombre accesible; la ayuda visual no reemplaza ese nombre. |
| Navegación activa | Señalar el destino actual mediante texto, forma o indicador, además del color. |

## 3. Formularios

- Asociar etiquetas, ayudas y errores a sus controles.
- Marcar los campos obligatorios de manera visible y accesible.
- Conservar los valores introducidos cuando falle una validación o solicitud.
- Mostrar errores cerca del campo o bloque afectado, con una explicación útil.
- Elegir el teclado adecuado para correo, teléfono o números cuando corresponda.
- Permitir pegar y usar funciones de autocompletado compatibles con la operación.
- Facilitar localizar el primer error cuando un formulario tenga varios.
- No comunicar éxito antes de recibir el resultado que exige la operación.

## 4. Estados de operación

| Estado | Qué debe comprender el usuario |
| --- | --- |
| Listo | Qué puede hacer y qué información necesita. |
| Cargando o enviando | Qué está ocurriendo y qué acciones siguen disponibles. |
| Completado | Qué operación terminó y cuál es el siguiente paso. |
| Rechazado o fallido | Qué no se completó y cómo continuar. |
| Resultado no confirmado | Que el resultado todavía no es definitivo; evitar presentarlo como éxito o permitir una repetición insegura. |
| Sin datos | Que la ausencia de contenido es distinta de una carga fallida. |

Durante un envío, impedir activaciones repetidas de la misma acción. Un indicador visual no sustituye los controles de consistencia del servidor.

## 5. Modales y elementos desplegables

1. Usar un título que identifique la tarea.
2. Llevar el foco al diálogo al abrirlo y mantenerlo dentro mientras esté activo.
3. Ofrecer una salida clara y devolver el foco al activador al cerrar.
4. Mantener el contenido y las acciones utilizables en ventanas pequeñas.
5. Proporcionar navegación por teclado en menús, pestañas y selectores.
6. Conservar datos al abrir y cerrar información secundaria.
7. Evitar que un elemento superpuesto tape de forma permanente el contenido necesario para completar la tarea.

## 6. Adaptación a móvil y escritorio

La composición se adapta por ancho y altura disponibles. Se definen los siguientes puntos de corte para reorganizar el contenido:

| Condición | Aplicación |
| --- | --- |
| Menos de 640 px de ancho | Composición móvil en una columna cuando corresponda. |
| Desde 640 px | Ajustes de espaciado y distribución de formularios. |
| Desde 768 px | Variantes de navegación y controles para escritorio o tableta. |
| Desde 1024 px | Distribuciones de escritorio y composición lateral cuando exista espacio. |
| Desde 1024 px y 896 px de alto | Variante de escritorio alto. |
| Desde 1024 px y menos de 896 px de alto | Variante compacta de escritorio. |
| Menos de 1024 px y hasta 700 px de alto | Variante compacta para celulares bajos. |

Los puntos de corte no identifican un dispositivo concreto. El contenido y el tipo de interacción también determinan la composición. Revisar los controles con puntero preciso y con pantalla táctil, incluso a igual ancho.

## 7. Accesibilidad y movimiento

- Contraste legible sobre el fondo real y estados que no dependan exclusivamente del color.
- Foco visible, orden lógico de tabulación y activación mediante teclado.
- Área táctil de al menos 44 × 44 px como criterio de diseño para las acciones principales; revisar variantes pequeñas del catálogo.
- Texto alternativo en imágenes informativas y tratamiento decorativo en iconos redundantes.
- Anuncios accesibles para errores y resultados relevantes, evitando avisos repetitivos.
- Respetar la preferencia de reducción de movimiento. Las animaciones deben ayudar a comprender cambios de estado.
- Mantener la posibilidad de ampliar el texto y usar zoom del navegador.

## 8. Comprobación de una implementación

| Comprobación | Evidencia esperada |
| --- | --- |
| Móvil compacto | Campos y acciones visibles o alcanzables sin recortes. |
| Escritorio | Distribución proporcionada al ancho y a la altura disponibles. |
| Teclado | Acceso a controles, foco visible y salida de modales. |
| Texto ampliado | Reorganización del contenido sin perder información o acciones. |
| Estados | Carga, vacío, error, éxito y deshabilitado comprobados según el componente. |
| Contraste | Evaluación de texto y controles sobre sus superficies efectivas. |
| Interacción táctil | Áreas utilizables y ausencia de activaciones accidentales entre controles próximos. |
| Validación automatizada | Pruebas de interfaz que comprueben ancho, altura, visibilidad y funcionamiento de las acciones. |