# Artefactos de Quov: instrucciones para agentes de IA

Usa este archivo cuando un agente genere una página HTML independiente para Quov: un informe, una herramienta pequeña, un resumen para compartir, una página interna. Carga primero `quov-brand.es.md` (https://quov.io/design-system/quov-brand.es.md); este archivo aplica la marca a páginas autocontenidas y nunca la contradice.

Los archivos del logo están listados en el archivo de marca y se sirven desde `https://quov.io/design-system/logo/`. En un artefacto, prefiere el SVG en línea del archivo de marca con `fill="var(--mark)"` en el círculo y `fill="var(--foreground)"` en las letras: así sigue el tema. Nunca vuelvas a dibujar el símbolo.

## Formato

- Un solo archivo HTML autocontenido: CSS y JS en línea, fuentes desde Google Fonts, imágenes como URI `data:` o archivos publicados junto a la página.
- Sin paso de compilación. Bibliotecas solo cuando hacen un trabajo real, cargadas desde un CDN con la versión exacta fijada.
- `<title>`: un nombre corto de dos a cuatro palabras. La explicación va en la página.
- Idioma: el del lector. Español con _tú_, inglés sin contracciones.
- Las páginas internas llevan `<meta name="robots" content="noindex, nofollow">`.

## Tokens: ambos temas

Un artefacto abre en oscuro, como todo lo que hace Quov, y pasa a papel cuando la página anfitriona fija `data-theme="light"` o el sistema del lector prefiere el tema claro. Cada color es un token; los componentes solo usan los tokens. Copia este bloque tal cual:

```css
:root {
  color-scheme: dark;
  --background: oklch(0.11 0.01 260);
  --card: oklch(0.15 0.01 260);
  --secondary: oklch(0.2 0.01 260);
  --muted: oklch(0.2 0.01 260);
  --foreground: oklch(0.93 0.01 260);
  --secondary-foreground: oklch(0.85 0.01 260);
  --muted-foreground: oklch(0.64 0.01 260);
  --primary: oklch(0.93 0 0);
  --primary-foreground: oklch(0.13 0 0);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 12%);
  --ring: oklch(0.55 0.01 260);
  --mark: oklch(0.06 0.005 260);
  --radius: 0.375rem;
  --font-heading: 'Aoboshi One', ui-serif, Georgia, serif;
  --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    color-scheme: light;
    --background: oklch(0.95 0.02 75);
    --card: oklch(0.98 0.015 75);
    --secondary: oklch(0.91 0.02 75);
    --muted: oklch(0.91 0.02 75);
    --foreground: oklch(0.18 0.01 75);
    --secondary-foreground: oklch(0.25 0.01 75);
    --muted-foreground: oklch(0.48 0.01 75);
    --primary: oklch(0.18 0 0);
    --primary-foreground: oklch(0.95 0.02 75);
    --border: oklch(0 0 0 / 10%);
    --input: oklch(0 0 0 / 8%);
    --ring: oklch(0.48 0.02 75);
    --mark: oklch(0.995 0.005 75);
  }
}
:root[data-theme='light'] {
  color-scheme: light;
  --background: oklch(0.95 0.02 75);
  --card: oklch(0.98 0.015 75);
  --secondary: oklch(0.91 0.02 75);
  --muted: oklch(0.91 0.02 75);
  --foreground: oklch(0.18 0.01 75);
  --secondary-foreground: oklch(0.25 0.01 75);
  --muted-foreground: oklch(0.48 0.01 75);
  --primary: oklch(0.18 0 0);
  --primary-foreground: oklch(0.95 0.02 75);
  --border: oklch(0 0 0 / 10%);
  --input: oklch(0 0 0 / 8%);
  --ring: oklch(0.48 0.02 75);
  --mark: oklch(0.995 0.005 75);
}
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font: 400 16px/1.65 var(--font-sans);
}
h1,
h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  text-wrap: balance;
}
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}
```

- `body` siempre define su propio fondo.
- Nunca escribas un color literal en una regla de componente: un literal que funciona en un tema rompe el otro.
- Si el artefacto muestra cifras con signo o estados (una ganancia, una pérdida, una advertencia), agrega los tokens semánticos de `quov-app.es.md` y sigue sus reglas. Nada más lleva color.

Fuentes:

```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Aoboshi+One&family=Geist:wght@400..600&family=Geist+Mono:wght@400..500&display=swap"
/>
```

## Estructura

- **Apertura:** una línea monoespaciada en `--muted-foreground` (el tipo de página y su fecha, por ejemplo `report · 2026-10-25`), el `h1` en Aoboshi One y una o dos oraciones que dicen para qué es la página. Del tamaño de su contenido, nunca del alto completo de la ventana.
- **Primero el resumen:** las cifras clave como una fila con filetes de rótulo y valor (el rótulo en Geist `--muted-foreground`, el valor en Geist Mono), y después el detalle. Nunca mosaicos de cifras con íconos.
- **Secciones:** un `h2` en Aoboshi One, con un índice monoespaciado solo cuando las secciones son una secuencia real.
- **Tablas:** celdas de encabezado en monoespaciada, pequeñas, en `--muted-foreground`, sobre un filete; filetes entre filas; cifras alineadas a la derecha con `font-variant-numeric: tabular-nums`.
- **Controles:** el botón principal en `--primary` con `--primary-foreground`, radio `var(--radius)`; los botones secundarios con un contorno en `--border`. Una sola acción principal por vista.
- **Pie:** "Quov" en monoespaciada, la fecha en que se generó la página y la fuente de sus datos.

## Maquetación

- Contenido de hasta unos 1100 px de ancho, un margen lateral de al menos 16 px y una sola columna en el ancho de un teléfono. Nada se desplaza de lado salvo una tabla o un bloque de código dentro de su propio contenedor con `overflow-x: auto`.
- Bordes con la transparencia de `--border`, radio de `0.375rem`, sin sombras. Una tarjeta solo donde un elemento de verdad es un objeto aparte, y nunca una tarjeta dentro de otra.
- Usa `gap` en los diseños flex y grid en lugar de márgenes por elemento.

## Comportamiento

- Completo en reposo: todo lo legible está visible al cargar; nada espera a que se desplace la página.
- Las herramientas abren en un estado de trabajo realista, con datos de ejemplo marcados como tales, nunca como un cascarón vacío.
- Movimiento solo donde explica algo; solo opacidad y transformación; `prefers-reduced-motion` respetado.
- Foco de teclado visible en cada control; cada control de formulario tiene una etiqueta.

## Textos

- Llanos, específicos, en voz activa. Un botón dice exactamente qué ocurre.
- Sin rayas (em dash), sin superlativos, sin emojis como marcadores de sección, sin cifras inventadas, sin personas.
- Cada número dice de dónde sale. Las cifras internas (costos, horas) nunca van en algo compartido con un enlace público.

## Nunca

Degradados, efecto vidrio, resplandores, un color de acento, bordes laterales de color, métricas de portada, cuadrículas de tarjetas idénticas, fotos de banco, ilustraciones.

## Antes de terminar

1. Revisa la página en ambos temas (cambia `data-theme` en `<html>`) y en el ancho de un teléfono.
2. Confirma que las fuentes cargaron y que ningún color está escrito fuera del bloque de tokens.
3. Relee el texto buscando rayas, contracciones, _usted_ y superlativos.