Componentes y estados
Átomos, moléculas y organismos con todos sus estados. Cada valor sale de tokens.css. El estado de foco se muestra con la clase de demostración .foco-demo; en la app real lo pinta :focus-visible.
Capa 2 · Tokens
Primario y neutros · contraste sobre blanco
Marca (solo decorativo) y semánticos
Estados de reserva (fondo + texto + icono) y tramos de ocupación (color + cifra + patrón)
Colores de grupo (pasada 3) · relleno = identidad de la reserva, siempre con su abreviatura en texto
Ocho fondos suaves con texto oscuro ≥ 8:1; los pares (2, 4, 6, 8) llevan un rayado tenue para distinguirse en escala de grises. El 4 (amarillo claro) y el 5 (lila claro) se reservan a los dos clientes con color fijo. La casilla TURNO (ámbar, 5,4:1) marca al responsable de la pernocta por bloque de 3 días; no se ha adoptado el verde del Excel del cliente porque se confundiría con el color de éxito.
Tipografía · Montserrat · cifras tabulares
- 36 / 1.2 · 600
- 180 comensales
- 28 / 1.2 · 600
- Reserva R-2026-0412
- 22 / 1.2 · 600
- Cuadrante semana 46
- 18 / 1.5 · 500
- CEIP Los Tilos · 48 + 4
- 16 / 1.5 · 400
- Texto base. Mínimo en móvil.
- 14 / 1.5 · 400
- Texto de tabla. Mínimo en escritorio.
- 12 / 1.25 · 500
- ETIQUETA SECUNDARIA · solo escritorio
- tabular
- 10/11/2026 · 09:30 · 1.234,56 € · 1.111,11 €
Espaciado (base 4), radios, sombras, foco
Breakpoints: 768 (tableta) · 1024 (escritorio) · 1280 (ancho). Controles: 44 px móvil, 40 px escritorio. Target mínimo 24 px.
Capa 3 · Átomos
Botones · default / hover / focus / active / disabled
Enlace normal · hover · focus
Campos · default / hover / focus / error / ayuda / solo lectura / disabled
Escribe un correo válido, p. ej. nombre@dominio.es
Solo el recuento por tipo, nunca el nombre del alumno.
Indicadores, avatar, iconos de unidad y servicio, tooltip, badge
Capa 4 · Moléculas
Grupo fecha + hora · selector de unidades
Celda del calendario · celda de comidas · tarjeta de sesión
Tarjeta de sesión (pasada 3): relleno = grupo · abreviatura grande con nombre accesible · borde izquierdo y icono = tipo (continuo reserva, doble externo, punteado interna) · estados que pisan al color: conflicto (rojo) y sin asignar (discontinuo) · marcas: ×2 tandas (rotativo), A/B/C (desdoble), paquete (programa fijo), regla de cliente (generada).
Alertas y toast (aria-live)
3 solicitudes nuevas
Llegaron desde el formulario público esta semana.
Pre-reserva que vence en 2 días
AMPA El Drago · fianza pendiente hasta el 29/10/2026.
Reserva guardada
R-2026-0412 pasa a «fianza pagada».
No se pudo mover la reserva
La cabaña 3 está ocupada del 13 al 15/11. Elige otras unidades.
Diálogo de confirmación con motivo obligatorio
Cancelar la reserva R-2026-0398
Pasará a «cancelada», se liberarán 8 cabañas del 13 al 15/11 y se avisará a cocina y planificación. La fianza (300,00 €) queda pendiente de decisión.
Paginación · menú de acciones en bloque · campo de búsqueda
Capa 5 · Organismos
Logos oficiales y uso
Cuadrado · principal. Acceso, índice, documentos A4 y cualquier sitio con altura ≥ 96 px. Nunca por debajo de 72 px de alto: el texto deja de leerse.
Alargado · cabeceras. Barras de 56 px (app y zona pública) y correos. Altura 32 px (token --logo-alto).
Marca sola · recorte del cuadrado. Favicon, icono de la app en móvil y avatar del sistema. No sustituye al logo en cabeceras.El logo es la única pieza con amarillo y naranja: en texto o controles de la interfaz esos colores no se usan (contraste 1,7 y 2,6). Dejar siempre aire alrededor igual a la altura de la «V». Fondo blanco o neutro claro; sobre fondo oscuro o fotografía hace falta la versión que el cliente aún no ha enviado.
Cabecera con logo, buscador global y usuario
· El Garañón
Barra inferior por rol (móvil) · estado vacío · estado de carga
No hay solicitudes pendientes
Las que lleguen por el formulario público aparecerán aquí.
Crear una reservaTabla de listado con ordenación anunciada, selección múltiple y acciones en bloque
| Estado | Plazas | Importe | Acciones | |||
|---|---|---|---|---|---|---|
| 10/11/2026 | E CEIP Los Tilos | Fianza pagada | 52 | 4.368,00 € | ||
| 13/11/2026 | C Scouts Tamadaba | Pago completo | 120 | 11.520,00 € | ||
| 14/11/2026 | C AMPA El Drago | Pre-reserva · vence 29/10 | 30 | 1.950,00 € |
Leyenda de accesibilidad · pares color + patrón / texto / icono
<abbr title> con el nombre completo; en el PDF y en el mes, leyenda al pie.