Guia d'estils — Reserves ATECA¶

Referència per a qualsevol persona que escrigui o actualitzi la documentació. L'objectiu és mantenir coherència visual entre l'aplicació i els manuals.

Paleta de colors¶

Colors extrets de la interfície de l'aplicació. Usa les variables CSS definides a extra.css.

Variable	Hex	Ús
`--ateca-900`	`#1e1b4b`	Navy fosc: fons hero, botó Admin
`--ateca-700`	`#3730a3`	Color primari en mode clar
`--ateca-600`	`#4f46e5`	CTA principal, botó primari
`--ateca-500`	`#6366f1`	Accent, estats actius
`--ateca-400`	`#818cf8`	Gradient accent clar
`--ateca-300`	`#a5b4fc`	Text sobre fons fosc
`--ateca-100`	`#e0e7ff`	Fons badge Usuari
`--ateca-orange`	`#f97316`	Incidències, advertències
`--ateca-green`	`#10b981`	Èxit, dispositius
`--ateca-red`	`#ef4444`	Error, eliminar

Captures de pantalla¶

Inserir una captura¶

![Descripció accessible de la captura](../assets/manual/nom-fitxer.png){ .screenshot }

Usa .screenshot-sm per a detalls de botons o camps de formulari (màx. 480 px d'ample).

Peu de foto¶

Escriu text en cursiva a la línia immediatament posterior. Es renderitza com a llegenda:

![Pantalla principal](../assets/manual/home.png){ .screenshot }
*Pantalla principal. L'usuari veu les targetes de cada recurs disponible.*

Nomenclatura dels fitxers d'imatge¶

docs/assets/manual/                ← captures del manual d'usuari
docs/assets/manual/admin/          ← captures del manual d'administrador
docs/assets/tech/                  ← diagrames i captures tècniques

Format del nom: <seccio>-<accio>.png. Exemples: - home-targetes.png - reserva-modal-trams.png - admin-gestio-usuaris.png

Dades fictícies a les captures¶

Usa sempre els noms de referència del projecte:

Rol	Nom a la captura
`Usuari` (professor/a)	Laia Fonts
`Gestor`	Pau Rovira
`Admin`	Marc Sala

Insígnies de rol¶

Per marcar inline quin rol necessita una acció:

Aquesta opció només és visible per a `Admin`{ .badge-admin }.

El rol `Gestor`{ .badge-gestor } pot consultar estadístiques.

Qualsevol `Usuari`{ .badge-usuari } pot fer reserves.

Resultat visual: pills de colors que repliquen el botó "Admin" de l'app.

Captures pendents¶

Per marcar seccions on cal afegir una captura sense que quedi com a text perdut:

!!! pending-screenshot "Captura pendent"
    Afegir captura de la pantalla de confirmació de reserva.

Avisos i notes (admonicions)¶

Convencions d'ús:

Tipus	Quan usar-lo
`note`	Informació addicional no crítica
`tip`	Truc o drecera útil
`warning`	Acció que pot tenir conseqüències no desitjades
`danger`	Acció irreversible (eliminar, reset…)
`info`	Requisit previ o condició
`pending-screenshot`	Captura de pantalla pendent d'afegir

Exemple:

!!! warning "Límit de reserves simultànies"
    Si superes el màxim configurat pel centre, la reserva es rebutjarà.

Nomenclatura¶

Termes canònics de l'aplicació. Usa'ls exactament igual als manuals:

Terme correcte	No usar
Espai	sala, aula, habitació
Dispositiu	equip, material, recurs tecnològic
Recurs	terme genèric per a espais i dispositius
Tram horari	franja, hora, sessió
Reserva	reservació, booking
Incidència	avaria, problema, ticket
Panell d'administració	backoffice, dashboard admin
Rol Admin	administrador/a (sol)
Rol Gestor	coordinador/a, supervisor/a
Rol Usuari	professor/a (en context educatiu)
Cancel·lar	esborrar, eliminar (per a reserves actives)

Estructura dels apartats de manual¶

Cada pàgina de manual segueix aquesta estructura recomanada:

# Títol de la secció

Paràgraf breu d'introducció (1-2 línies, sense encapçalament).

---

## Pas 1 — Acció principal

!!! info "Requisit previ"
    El que l'usuari ha de tenir preparat.

![alt](../assets/manual/captura.png){ .screenshot }
*Llegenda opcional.*

Descripció del que es veu i el que cal fer.

---

## Pas 2 — Següent acció
...

---

**Pas següent:** [Títol del pas següent →](fitxer.md)

Previsualització local¶

mkdocs serve

Obre http://127.0.0.1:8000 per veure els canvis en temps real.