Tema, estilos y componentes

El frontend documentado utiliza teal. El violeta de este portal pertenece a la documentación; no es el color instalado en el ERP.

Tokens que gobiernan el tema

Fuente: src/app/globals.css.

background, foreground, muted, border, input, card, popover y los tokens sidebar-* completan las superficies. Los valores completos están en :root y .dark; modifica ambos temas y verifica contraste sobre los fondos reales. Las paletas chart-* y funnel-* distinguen series y niveles: no las cambies sin comprobar legibilidad y diferenciación.

Clases semánticas

<section className="rounded-lg border bg-card p-6 text-card-foreground">
  <h2 className="text-lg font-medium">Información del servicio</h2>
  <p className="text-sm text-muted-foreground">Datos de la vertical</p>
</section>

Usa cn de @/shared/lib/cn para componer clases. Evita introducir hexadecimales en cada pantalla: un cambio de marca debe poder propagarse desde los tokens.

Tipografía

src/app/layout.tsx carga Inter y Geist Mono con next/font/google. El frontend no usa las fuentes previstas para el portal como fuente implícita.

La escala normal usa las utilidades Tailwind. Evita text-[Npx]: el guard tipográfico lo rechaza. Para texto principal y formularios prioriza tamaños legibles; la existencia de un token pequeño no lo hace adecuado para cada uso.

Primitivos shadcn

components.json define radix-nova, base neutral, variables CSS e iconos Lucide. Los componentes viven en src/shared/ui y se importan mediante @/shared/ui/*.

pnpm dlx shadcn@latest add accordion

Revisa el diff que produzca el instalador antes de aceptar cambios sobre componentes ya personalizados. Conserva sus props de accesibilidad, foco y estado. Los patrones de shadcnblocks-admin son referencia de diseño; su código no debe copiarse ni redistribuirse en el frontend.