# SuperLeads — Guía de Estilos y Sistema de Diseño

> **Versión 3.4** · Destilada de Rayos X V3, el sitio público y las herramientas internas.
> Esta guía es la fuente de verdad. Si un diseño no coincide con lo que aquí dice,
> el que está mal es el diseño.

**Cómo usarla:** copia los tokens de la sección 3 al inicio de tu CSS, carga la
tipografía de la sección 4, y de ahí en adelante nunca escribas un color, un radio
o un tiempo "a mano" — todo sale de aquí. Al terminar, corre el checklist final.

---

## 1. Los seis principios

Todo lo demás en esta guía es consecuencia de estos seis:

1. **El fondo manda el color.** El verde solo existe sobre oscuro. El navy solo
   sobre claro. Nunca al revés. Esta es la regla que más se rompe y la que más
   delata un diseño que no es nuestro.
2. **Los bordes son de medio píxel.** `.5px solid`, nunca `1px`. Un borde grueso
   es lo que separa una interfaz cara de una barata.
3. **Todo lo que se toca, responde.** Un botón que no se mueve al pasarle el cursor
   se siente muerto. Ver sección 7.
4. **El movimiento es lento y suave.** Un solo easing (`--ease`), y las cosas suben
   2 o 3 píxeles, no 10. Si la animación se nota, está mal calibrada.
5. **Jerarquía con color, no con opacidad.** Un texto secundario es `#5b6478`, no
   negro al 50%. La opacidad se adivina en pantalla y desaparece impresa.
6. **Nada se inventa.** Si no hay dato, va un guion largo `—`. Un cero fingiendo
   ser dato es peor que un hueco honesto.

---

## 2. Logo

**Logos oficiales SVG (383×68) — usar SIEMPRE estos, en toda página, diseño e imagen:**

| Versión | URL | Cuándo |
|---|---|---|
| **AZUL** | `https://assets.cdn.filesafe.space/E6Gh1sE1RnPtadmL7wmG/media/69cde95ac859395cde4752e3.svg` | Fondos claros y blancos |
| **BLANCO** | `https://assets.cdn.filesafe.space/E6Gh1sE1RnPtadmL7wmG/media/69cde95a69eb1fa3e7917e1d.svg` | Fondos oscuros y navy |

- Tamaños de referencia: **nav** ancho 180px · **sidebar de app** alto 32px ·
  **footer** ancho 140px · **imágenes OG** alto ~48px
- Siempre enlaza a `https://superleads.mx` (o al inicio de la app si es interna)
- El logo va **solo**, sin caja blanca detrás ni contenedor decorativo. Si el fondo
  es oscuro, usa la versión blanca — no metas el logo azul en un recuadro.
- **Ícono de "acceder"**: `https://assets.cdn.filesafe.space/E6Gh1sE1RnPtadmL7wmG/media/68bdf4dd6d0aaa7737d9cfdd.png`
- ~~Versión texto "Super<span>Leads</span>" y PNG viejo `698e530bc08665d629146a14.png`~~ — no usar en diseños nuevos.

---

## 3. Color

### 3.1 Colores primarios

Los tres que definen la marca. Con estos tres se resuelve el 80% de cualquier pantalla.

| Token | Hex | Nombre | Uso |
|---|---|---|---|
| `--green` | `#56EF9F` | Verde SuperLeads | **Acento principal.** Botones CTA, highlights, íconos y acentos sobre fondo oscuro. |
| `--navy` | `#002582` | Navy | **Texto y botones sobre fondo claro.** Es el color de la voz de la marca. |
| `--navy-deep` | `#001240` | Navy profundo | **Fondo oscuro.** Hero, footer, sidebar, bloques de CTA. |

### 3.2 Colores secundarios

Sostienen, matizan y dan profundidad. Nunca compiten con los primarios.

| Token | Hex | Uso |
|---|---|---|
| `--green-d` | `#2BC878` | Hover del verde en superficies sólidas |
| `--navy-mid` | `#001a5e` | Fondo oscuro secundario · hover de botón navy |
| `--blue` | `#0039C8` | Links, bordes activos, tags y eyebrows en contexto claro |
| `--blue-mid` | `#2A89FB` | Íconos, stats, acentos de gráfica |
| `--blue-soft` | `#F4F7FF` | **Fondo de sección clara** y fondo general de app |
| `--blue-softer` | `#EEF2FF` | Fondo de tarjetas y bloques dentro de contexto claro |

### 3.3 Neutros y texto

| Token | Hex | Uso |
|---|---|---|
| `--ink` | `#1a1a1a` | Texto body sobre claro |
| `--border` | `#e0e8f8` | Bordes estructurales en fondos claros |
| `--muted` | `#5b6478` | Texto secundario, hints, notas al pie |
| `--dim` | `#98a1b0` | Texto terciario, fechas, metadatos, marcas de gráfica |

**Textos sobre fondo oscuro** (jerarquía por color, nunca por opacidad):

| Hex | Uso |
|---|---|
| `#ffffff` | Texto principal |
| `#7a9fd4` | Subtítulos y descripciones |
| `#4a6aaa` | Labels, notas, contadores |
| `#3a5a9a` | Texto de apoyo, el más tenue que se permite |

### 3.4 Colores de estado

**Reservados.** Nunca se usan como color decorativo ni como "serie 4" de una gráfica.
Siempre acompañados de un texto o ícono — el color solo nunca comunica.

| Estado | Hex | Significado |
|---|---|---|
| Bien / Saludable | `#0ca30c` | Dentro de meta |
| Atención | `#eb6834` | Requiere revisión |
| Crítico / Urgente | `#d03b3b` | Fuera de rango, acción inmediata |
| Destructivo | `#d92d43` | Borrar, cancelar, errores de formulario |

### 3.5 Tokens — copia esto al inicio de tu CSS

```css
:root {
  /* — Primarios — */
  --green:       #56EF9F;
  --navy:        #002582;
  --navy-deep:   #001240;

  /* — Secundarios — */
  --green-d:     #2BC878;
  --navy-mid:    #001a5e;
  --blue:        #0039C8;
  --blue-mid:    #2A89FB;
  --blue-soft:   #F4F7FF;
  --blue-softer: #EEF2FF;

  /* — Neutros — */
  --ink:         #1a1a1a;
  --border:      #e0e8f8;
  --muted:       #5b6478;
  --dim:         #98a1b0;

  /* — Estado — */
  --ok:          #0ca30c;
  --warn:        #eb6834;
  --bad:         #d03b3b;
  --destructive: #d92d43;

  /* — Gráficas (paleta validada, separada de la marca) — */
  --chart-1:     #2a78d6;
  --chart-2:     #eb6834;
  --chart-3:     #1baf7a;

  /* — Movimiento — */
  --ease:        cubic-bezier(.16, 1, .3, 1);

  /* — Sombras — */
  --shadow-sm:   0 1px 2px rgba(0,37,130,.04);
  --shadow-card: 0 10px 32px rgba(0,37,130,.08);
  --shadow-btn:  0 10px 28px rgba(0,37,130,.22);
  --shadow-cta:  0 10px 28px rgba(86,239,159,.28);
  --shadow-pill: 0 10px 32px rgba(0,37,130,.08);
}
```

### 3.6 Reglas de uso de color — las que no se negocian

| Regla | Por qué |
|---|---|
| **Verde `#56EF9F` SOLO sobre navy/oscuro.** Nunca sobre blanco. | Sobre blanco no alcanza contraste y se ve barato. Sobre claro, usa navy o blue. |
| **Navy `#002582`** para texto y botones sobre fondos claros. | Es la voz de la marca en documentos y formularios. |
| **Blue `#0039C8`** para links, bordes activos y eyebrows claros. | Es el "verde del contexto claro". |
| **Los colores de estado no se reciclan** como decorativos. | Si el rojo también es decorativo, el rojo de alerta deja de alarmar. |
| **Las gráficas usan `--chart-*`, no la marca.** | La paleta de marca no pasa pruebas de daltonismo en marcas pequeñas. Ver sección 15. |
| **Texto siempre en tinta** (`--ink`, `--muted`, blanco), nunca del color de su serie. | Un valor pintado del color de su barra se vuelve ilegible; el color lo carga la marca al lado. |

---

## 4. Tipografía

**Familia única: `"Plus Jakarta Sans"`.** No hay segunda fuente.

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,700;1,800&display=swap" rel="stylesheet">
```

```css
body { font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; }
```

### 4.1 Escala

| Rol | Tamaño | Peso | Letter-spacing | Line-height |
|---|---|---|---|---|
| Hero H1 | 46–50px | 800 | -1.8px | 1.07 |
| Título de página | 32–36px | 800 | -0.8px | 1.12 |
| Título de sección | 20–24px | 700 | -0.4px | 1.2 |
| Título de tarjeta | 16–22px | 800 | -0.3px | 1.2 |
| Subtítulo de sección | 14–15px | 400 | — | 1.7 |
| Texto body | 13–15px | 400–500 | — | 1.78 |
| Label de campo | 13px | 500 | — | 1.4 |
| Hint bajo campo | 11px | 400 | — | 1.45 |
| Eyebrow / label | 10–11px | 700 | 1.3px | — |
| Stat mediano | 26–32px | 800 | -1px | 1 |
| Stat héroe | 48–60px | 800 | -1.8px | 1 |
| Nota / aviso | 10–11px | 400 | — | 1.4 |

### 4.2 Reglas tipográficas

- **Énfasis en H1**: `<em>` en italic — verde `var(--green)` sobre oscuro, azul
  `var(--blue)` sobre claro.
- **Números en columnas o que cambian en vivo**: `font-variant-numeric: tabular-nums`.
  Sin esto, los dígitos bailan al actualizarse.
- **Nunca centres párrafos** de más de dos líneas. Títulos sí, texto corrido no.
- **Ancho máximo de lectura**: 65–75 caracteres (`max-width: 46rem` para documentos).

---

## 5. Espaciado, radios y ritmo

**Escala de espaciado** (múltiplos de 4, sin excepción):
`4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 56 · 72`

**Radios:**

| Elemento | Radio |
|---|---|
| Botones, inputs, chips | `8px` |
| Tarjetas, paneles | `12px` |
| Tarjetas grandes, contenedores hero | `16–24px` |
| Píldoras, badges, avatares | `9999px` (completo) |

**Padding de sección:**

| Contexto | Desktop | Mobile |
|---|---|---|
| Hero / Footer / CTA block | `72px 56px` | `28px 18px` |
| Sección estándar | `72px 56px` | `28px 18px` |
| Tarjeta | `20–24px` | `16px` |
| Panel interno / bloque | `16–20px` | `14px` |

---

## 6. Pantallas — de un celular a una sala de juntas

### 6.1 No es el tamaño: es la distancia

Un texto de 14px se lee perfecto a 50 cm y es **invisible a 3 metros**. Antes de
elegir tamaños, pregúntate a qué distancia está el ojo:

Celular **30 cm** · Laptop **50–60 cm** · Monitor **60–80 cm** · Sala o TV **2–5 m**.
Entre la laptop y la sala hay **5 veces más distancia**: el contenido crece igual.

### 6.2 Los cinco anchos que existen

| Rango | Qué es | Distancia | Columnas | Padding | Texto base |
|---|---|---|---|---|---|
| `320–639` | Celular | 30 cm | **1** | `18px` | 14px |
| `640–1023` | Tablet · ventana partida | 40 cm | **2** | `24px` | 14px |
| `1024–1439` | Laptop 13"–15" | 50–60 cm | **2–3** | `40px` | 14px |
| `1440–2559` | Monitor 24"–27" | 60–80 cm | **3–4** | `56px` | 15px |
| `2560+` | Monitor 32" · TV · proyector | 1–5 m | **4** + tope | `56px` | 16px |

### 6.3 Qué se hace en cada uno

**Celular (320–639)** — consulta rápida, de pie, una mano. **Nunca** se llena un
Rayos X aquí; sí se lee la hoja del cliente. Una columna, botones de ancho
completo, acciones importantes abajo (donde llega el pulgar).

**Tablet (640–1023)** — lectura y presentación uno a uno; también una laptop con
la ventana a media pantalla. Dos columnas, la barra lateral se esconde, área
táctil de 44px obligatoria.

**Laptop 13"–15" (1024–1439)** — **donde se trabaja de verdad**: aquí se llena el
Rayos X en vivo. Es el tamaño más común del equipo, **optimiza para acá**.

**Monitor 24"–27" (1440–2559)** — trabajo con datos y varias ventanas. Contenido
topado a 1240–1400px y centrado. **No lo estires**: una línea de 2000px no se lee.

**Sala de juntas · TV (2560+)** — presentar a un grupo, a metros. Texto base 16px,
cifras protagonistas al doble, nada por debajo de 14px, máximo 3 ideas por vista.

### 6.4 Los puntos de corte

Cinco rangos, cuatro cortes. **No inventes más**: cada corte extra es una
combinación más que alguien tiene que probar.

```css
/* Base: móvil primero. Sin media query = celular. */
:root{ --max:1240px; --pad:18px; }
body{ font-size:14px; }

@media (min-width:640px){ :root{ --pad:24px } }          /* tablet */
@media (min-width:1024px){ :root{ --pad:40px } }         /* laptop */
@media (min-width:1680px){                                /* monitor grande */
  :root{ --pad:56px } body{ font-size:15px }
}
@media (min-width:2400px){                                /* sala / 4K */
  :root{ --max:1420px } body{ font-size:16px }
}
```

**La regla que ahorra la mitad de los cortes:** antes de escribir un `@media`,
usa una rejilla que se acomode sola. Pero escríbela bien:

```css
/* ❌ Desborda si el contenedor es más angosto que 280px */
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

/* ✅ El min() la deja encogerse hasta el ancho disponible */
grid-template-columns: repeat(auto-fit, minmax(min(280px,100%), 1fr));
```

### 6.5 El caso SuperLeads: la videollamada

Nuestro escenario más delicado son **dos pantallas a la vez**.

| Lado | Realidad | Consecuencia |
|---|---|---|
| **El asesor** | Laptop 13"–15" con Zoom encima | El área útil real es **~1100px**, no 1440 |
| **El cliente** | Ve el video **escalado**, a veces en celular | Pierde ~30% de nitidez: **nada crítico bajo 14px** |
| **Compresión** | El video aplasta los tonos suaves | Jerarquía por **color y tamaño**, no por sutileza |
| **Lo compartido** | La pantalla completa, con menú | Por eso existe el **modo presentación** |

**La prueba real:** comparte pantalla en una llamada contigo mismo desde el
celular. Si no lees la cifra principal desde el teléfono, está muy chica.

### 6.6 Dos cosas que no son el ancho

- **Zoom del navegador**: mucha gente trabaja al 110–125%. Alguien al 125% en una
  pantalla de 1440px ve **1152px**: se le aplica el diseño de laptop chica. Por eso
  los cortes van donde cambia el *uso*, no donde está el hardware.
- **Alto de pantalla**: una laptop de 13" tiene **~700px de alto útil**. Sin
  desplazar deben verse **el título, la cifra principal y la primera acción**.
- **Densidad (Retina)**: una pantalla de 2880px reporta 1440px al navegador. Los
  píxeles CSS son los que importan; la densidad solo pide **logos en SVG**.

### 6.7 Dónde se rompen las pantallas

| Ancho | Qué se rompe | La causa |
|---|---|---|
| `320px` | Tablas y URLs largas empujan la página | Falta `overflow-wrap:anywhere` y envolver la tabla en `overflow-x:auto` |
| `~430px` | Una rejilla salta a 2 columnas ilegibles | `minmax` con mínimo muy chico: súbelo a 240–280px |
| `768px` | Se esconde el menú y no hay salida | El botón de volver solo existía en la barra lateral |
| `1024px` | Contenido aplastado | Falta `min-width:0` en el área de contenido |
| `2560px+` | Todo diminuto y perdido | El ancho se topó pero el texto nunca creció |

### 6.8 Prueba de pantallas (90 segundos)

- [ ] **390px** — una columna, nada se sale, botones alcanzables con el pulgar
- [ ] **768px** — dos columnas, hay forma de navegar sin barra lateral
- [ ] **1280px** — **el más importante**: aquí se trabaja en vivo
- [ ] **1920px** — contenido centrado y topado, no estirado
- [ ] **2560px** — se lee de lejos, sin islas perdidas
- [ ] En todos: **cero scroll horizontal** — si aparece, falta un `min-width:0`

---

## 8. Sombras y bordes — la escala de elevación

Las sombras de SuperLeads son **grandes, suaves y teñidas de navy** — nunca negras
ni duras. Una sombra negra sobre nuestro azul se ve sucia.

```css
/* Nivel 0 — al ras. Bordes, no sombra. */
border: .5px solid var(--border);

/* Nivel 1 — apoyado. Tarjetas en reposo. */
box-shadow: 0 1px 2px rgba(0,37,130,.04);

/* Nivel 2 — levantado. Tarjeta en hover, panel flotante. */
box-shadow: 0 10px 32px rgba(0,37,130,.08);

/* Nivel 3 — encima de todo. Modales, píldoras flotantes, menús. */
box-shadow: 0 8px 40px rgba(0,0,0,.12);

/* Sombra de intención — botón CTA verde en hover. */
box-shadow: 0 10px 28px rgba(86,239,159,.28);

/* Sombra de intención — botón navy en hover. */
box-shadow: 0 10px 28px rgba(0,37,130,.22);
```

**Bordes:**
- Estructurales: **siempre `.5px solid`**. En Tailwind: `border-[0.5px]`.
- Sobre claro: `var(--border)` `#e0e8f8`.
- Sobre oscuro: `rgba(255,255,255,.07)`, hover `rgba(86,239,159,.25)`.
- Punteado (`dashed`) solo para zonas de "agregar" y estados vacíos.

---

## 8. Movimiento — el sentir del clic

Esta sección es la que separa una interfaz que se siente cara de una que se siente
lenta. Todo se mide desde que el dedo toca.

### 7.1 La única curva

```css
--ease: cubic-bezier(.16, 1, .3, 1);
```

Sale rápido y frena suave. **Todo** usa esta curva. Si algo usa `linear` o `ease-in-out`,
está fuera del sistema.

### 7.2 Los tiempos

| Interacción | Duración | Qué se mueve |
|---|---|---|
| **Presionado (active)** | `0ms` — inmediato | El elemento baja a `scale(.98)` o pierde su lift. **Debe ser instantáneo**: es el acuse de recibo del clic. |
| Hover de botón | `200ms` | `translateY(-2px)` + sombra de intención |
| Hover de tarjeta | `300ms` | `translateY(-3px)` + sombra nivel 2 |
| Cambio de color (link, ícono, fondo) | `200ms` | `color`, `background-color`, `border-color` |
| Aparición de panel / acordeón | `300ms` | `opacity` + `translateY(6px→0)` |
| Modal / overlay | `250ms` | `opacity` + `scale(.95→1)` |
| Fondo decorativo | `90–130s` | Deriva imperceptible. Ver sección 16. |

### 7.3 La regla de los 400 ms

Lo que tarda una acción define cómo se comunica:

| Tarda | Qué mostrar |
|---|---|
| **< 100ms** | Nada. Solo el estado `active` del botón. |
| **100–400ms** | Nada más que el `active`. Un spinner que parpadea molesta más que ayuda. |
| **400ms – 2s** | Spinner dentro del botón + botón deshabilitado. El texto no cambia. |
| **2s – 10s** | Spinner + **texto que cambia** ("Guardando…", "Analizando…"). |
| **> 10s** | Pantalla de proceso con **etapas que avanzan** ("Consultando el censo…", "Ubicando la competencia…"). El usuario tiene que ver que algo pasa, no un spinner eterno. |

### 7.4 Retrasos de guardado (debounce)

| Acción | Espera | Por qué |
|---|---|---|
| Autoguardado de formulario | `2500ms` tras el último cambio | Suficiente para no guardar en cada tecla, corto para no perder trabajo. |
| Autoguardado de nota / texto largo | `1200ms` | El texto libre se escribe en ráfagas más cortas. |
| Búsqueda mientras se escribe | `300ms` | Debajo de esto se siente nervioso; arriba, lento. |
| **Al salir de la pantalla** | `0ms` — guardado inmediato | Todo debounce pendiente **debe dispararse** al desmontar o cerrar. Nunca se pierde lo tecleado. |

### 7.5 El acuse de recibo

Todo botón que dispara algo debe, en este orden:
1. Hundirse al instante (`active`).
2. Deshabilitarse mientras trabaja (no se puede clicar dos veces).
3. Decir cómo terminó: `Guardado 14:32` en verde/tinta, o el **mensaje real del error** en rojo.
   Nunca "algo salió mal" — siempre qué salió mal y qué hacer.

---

## 9. Botones

### 8.1 Botón primario — verde (CTA principal)

El de la acción más importante de la pantalla. **Solo uno por vista.**
Vive sobre fondo oscuro o sobre superficie clara donde su verde es el único acento.

```css
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--green); color: var(--navy);
  padding: 14px 26px; border-radius: 8px; border: none;
  font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s;
}
.btn-primary:hover  { transform: translateY(-2px); box-shadow: var(--shadow-cta); background: var(--green); }
.btn-primary:active { transform: translateY(0); box-shadow: none; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
```

### 8.2 Botón secundario — navy

La acción importante pero no principal. Sobre fondo claro.

```css
.btn-navy {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--navy); color: #fff;
  padding: 12px 22px; border-radius: 8px; border: none;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s;
}
.btn-navy:hover  { background: var(--navy-mid); transform: translateY(-2px); box-shadow: var(--shadow-btn); }
.btn-navy:active { transform: translateY(0); box-shadow: none; }
```

### 8.3 Botón terciario — contorno

Acciones de apoyo que conviven en fila (imprimir, compartir, actualizar).

```css
.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--navy);
  border: .5px solid var(--border);
  padding: 10px 18px; border-radius: 8px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.btn-outline:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
```

### 8.4 Botón fantasma y destructivo

```css
/* Fantasma — navegación, cancelar, "Atrás" */
.btn-ghost {
  background: transparent; color: var(--muted);
  padding: 10px 18px; border-radius: 8px; border: none;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.btn-ghost:hover { background: rgba(0,37,130,.05); color: var(--navy); }

/* Destructivo — borrar. Discreto hasta que se necesita. */
.btn-danger {
  background: transparent; color: var(--muted);
  border: none; border-radius: 8px; padding: 8px;
  transition: background-color .2s, color .2s;
}
.btn-danger:hover { background: #fef2f2; color: var(--destructive); }
```

### 8.5 Tamaños

| Tamaño | Padding | Fuente | Cuándo |
|---|---|---|---|
| Grande | `16px 30px` | 15px | Hero, CTA de cierre |
| Normal | `14px 26px` | 14px | Acción principal de pantalla |
| Compacto | `10px 18px` | 13px | Barras de acciones, filas de botones |
| Mini | `6px 14px` | 12px | Dentro de tarjetas, nav |
| Ícono | `size: 36px` | — | Cuadrado, solo ícono, con `title` obligatorio |

### 8.6 Íconos dentro de botones

- Tamaño `14–16px`, `stroke-width: 2`, `fill: none`.
- Color: `var(--navy)` sobre verde · `#fff` sobre navy · hereda en outline/ghost.
- `gap: 8px` respecto al texto. Ícono a la **izquierda** salvo flechas de avance (`→` a la derecha).

### 8.7 Estado de carga

```html
<button class="btn-primary" disabled>
  <svg class="spinner" width="14" height="14">…</svg>
  Guardando…
</button>
```

El botón **no cambia de tamaño** al entrar en carga (reserva el ancho). Un botón que
se encoge y crece es el detalle que arruina una interfaz por lo demás correcta.

---

## 10. Formularios

### 9.1 La rejilla que se compacta sola

Los formularios se acomodan solos al ancho disponible: **dos columnas en escritorio,
una en móvil**, sin media queries a mano.

```css
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
/* Un campo que necesita todo el ancho (textarea, chips, selección múltiple) */
.form-grid .full { grid-column: 1 / -1; }
```

`auto-fit` + `minmax` es la clave: si caben dos columnas de 280px, las pone; si no,
colapsa a una. **Nunca uses `repeat(2, 1fr)` fijo** — se desborda en móvil.

Para grupos de tres (stats, selectores cortos): `minmax(200px, 1fr)`.

### 9.2 Anatomía de un campo

```html
<div class="field">
  <label for="matricula">Matrícula actual</label>
  <input id="matricula" type="number" inputmode="decimal" placeholder="480">
  <p class="hint">Solo alumnos pagando colegiatura hoy — sin lista de espera.</p>
  <p class="error">Este dato es obligatorio.</p>
</div>
```

```css
.field { display: flex; flex-direction: column; gap: 6px; }

.field label {
  font-size: 13px; font-weight: 500; color: var(--navy);
}

.field input, .field textarea, .field select {
  width: 100%;
  padding: 10px 14px;
  border: .5px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-family: inherit; font-size: 14px; color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder { color: var(--dim); }

.field input:hover { border-color: #c9d6f0; }
.field input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,57,200,.10);
}

.field .hint  { font-size: 11px; line-height: 1.45; color: var(--muted); }
.field .error { font-size: 12px; font-weight: 500; color: var(--destructive); }

/* Campo con error */
.field input[aria-invalid="true"] { border-color: var(--destructive); }
```

**El hint es obligatorio** en cualquier campo donde quepa duda de qué contar o en
qué unidad. Resuelve la pregunta antes de que se haga: *qué incluir, qué no incluir,
o a qué cálculo alimenta el dato.*

### 9.3 Número grande (dato protagonista)

Cuando de un campo sale una cifra que se muestra en pantalla, el input se escribe grande:

```css
.field input.grande {
  height: 56px; font-size: 24px; font-weight: 600;
  color: var(--navy); font-variant-numeric: tabular-nums;
}
```

### 9.4 Campo con acción directa

Si el dato es accionable (WhatsApp, web, Drive), el campo lleva su botón al lado —
el asesor no debe copiar y pegar durante una llamada.

```css
.field-con-accion { display: flex; gap: 8px; }
.field-con-accion input { flex: 1; }
.field-con-accion a {
  display: flex; width: 36px; height: 36px; flex-shrink: 0;
  align-items: center; justify-content: center;
  border-radius: 8px; background: #ecfdf5; color: #059669;
  transition: background-color .2s;
}
.field-con-accion a:hover { background: #d1fae5; }
/* Sin dato válido: mismo espacio, punteado y apagado — nunca desaparece */
.field-con-accion .apagado {
  border: .5px dashed var(--border); color: var(--dim); background: transparent;
}
```

### 9.5 Selección con chips (en lugar de `<select>`)

En una llamada en vivo hay que ver **todas** las opciones de un vistazo, no abrir un
menú. Los desplegables solo para listas de más de ~8 opciones.

```css
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 14px; border-radius: 8px;
  border: .5px solid var(--border); background: #fff;
  font-size: 13px; font-weight: 500; color: var(--navy); cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.chip:hover { border-color: var(--navy); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
```

### 9.6 La regla de los tres estados

**Nada arranca seleccionado.** Un Sí/No con "No" preseleccionado hace que el campo
se vea contestado sin que nadie lo haya contestado — y contamina los datos.

| Valor | Significa | Se ve |
|---|---|---|
| `null` | Sin preguntar | Ningún chip activo |
| `0` / `no` | Respondió que no | Chip "No" activo |
| `1` / `sí` | Respondió que sí | Chip "Sí" activo |

Clic sobre la opción ya activa la **des-selecciona** (vuelve a `null`).
Y en el código: `if (valor != null)`, nunca `if (valor)` — porque `0` es una respuesta.

### 9.7 Validación

- **Valida al salir del campo** (`blur`), no en cada tecla. Validar mientras se
  escribe marca en rojo un correo a medio teclear.
- **Solo lo verdaderamente obligatorio bloquea.** En una sesión en vivo, un campo
  que frena el avance es un campo que rompe la conversación.
- **Si el envío falla por validación, lleva al usuario al error.** Un botón que no
  hace nada porque hay un error en otra pantalla es un botón roto.

### 9.8 Autoguardado

El estándar en herramientas internas: **se guarda solo**, y se dice.

- Debounce de 2.5s (formulario) o 1.2s (nota).
- Flush inmediato al cambiar de pantalla, desmontar o cerrar pestaña.
- Indicador junto al título: `Guardando…` → `Guardado 14:32`.
- Si falla: **el mensaje real**, en rojo, sin perder lo escrito.
- El botón de avanzar se llama **"Guardar y Continuar"**, no "Continuar" — nombra
  lo que hace y da tranquilidad.

---

## 11. Menús y navegación

### 10.1 Nav público (sitio web)

```css
.nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 56px;
  background: rgba(0, 18, 64, .97);
  border-bottom: .5px solid rgba(86,239,159,.1);
  backdrop-filter: blur(16px);
}
.nav a {
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.4);
  transition: color .2s;
}
.nav a:hover, .nav a[aria-current="page"] { color: #fff; }
```

- **Logo** izquierda (blanco, 180px) · **Links** centro · **CTA verde** derecha (`9px 18px`, 12px).
- **Mobile**: hamburguesa a la derecha, links en panel desplegable a pantalla completa.

### 10.2 Sidebar de aplicación

El patrón para herramientas internas. Ancho `288px` (`w-72`), fondo `--navy-deep`.

**Orden obligatorio, de arriba a abajo:**
1. **Logo** (blanco) + badge de producto.
2. **CTA principal** — la acción más importante va **arriba**, nunca al fondo.
3. **Navegación**, con descripción bajo cada entrada.
4. **Pie** con copyright, separado por `.5px`.

```css
.sidebar {
  width: 288px; flex-shrink: 0;
  display: flex; flex-direction: column;
  background: var(--navy-deep); color: #fff;
  border-right: .5px solid rgba(86,239,159,.1);
}
.sidebar-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  border: .5px solid transparent;
  transition: background-color .2s;
}
.sidebar-item:hover  { background: rgba(255,255,255,.05); }
.sidebar-item.activo { background: rgba(255,255,255,.07); border-color: rgba(86,239,159,.25); }

.sidebar-item .icono {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.5);
  transition: background-color .2s, color .2s;
}
.sidebar-item.activo .icono { background: var(--green); color: var(--navy); }

.sidebar-item .titulo { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.6); }
.sidebar-item.activo .titulo, .sidebar-item:hover .titulo { color: #fff; }
.sidebar-item .desc   { font-size: 11px; line-height: 1.35; color: #4a6aaa; }
```

**Cada entrada lleva descripción.** Un menú que solo dice "Analítica" obliga a entrar
para saber qué hay; uno que dice "Tendencias, llenado por bloque y hallazgos IA"
informa antes del clic. La descripción puede llevar cifras vivas
("15 diagnósticos · 9 finalizados").

### 10.3 Topbar flotante (píldora)

Para contexto e identidad dentro de una app. Flota centrada arriba.

```css
.topbar {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 10px 24px; border-radius: 9999px;
  background: rgba(255,255,255,.8);
  border: .5px solid var(--border);
  box-shadow: var(--shadow-pill);
  backdrop-filter: blur(16px);
}
```

- Contiene: **identidad** (nombre principal + secundario más chico debajo),
  separador `.5px`, y **máximo dos indicadores**.
- **Nunca pongas cifras sensibles aquí** si la pantalla se comparte en videollamada.

### 10.4 Pestañas

```css
.tabs { display: grid; gap: 4px; padding: 4px; border-radius: 12px; background: var(--blue-softer); }
.tab {
  padding: 10px 16px; border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--muted);
  transition: background-color .2s, color .2s;
}
.tab[aria-selected="true"] { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }
```

> **Cuidado al imprimir:** si el contenido de las pestañas inactivas se desmonta, el
> PDF sale incompleto. Mantenlas montadas y ocúltalas con CSS.

### 10.5 Acordeones

Para revelar profundidad sin abrumar. Se anidan hasta **tres niveles**: contenedor →
categoría → elementos. Todos **cerrados por defecto**.

```css
.acordeon { border: .5px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
.acordeon > button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; text-align: left; background: transparent;
  transition: background-color .2s;
}
.acordeon > button:hover { background: rgba(244,247,255,.6); }
.acordeon .chevron { transition: transform .3s var(--ease); }
.acordeon[open] .chevron { transform: rotate(180deg); }
```

**Cada cabecera muestra su progreso** (`3 de 21`, `Hoy activas: 5`). El contador es
lo que convierte una lista cerrada en una invitación a abrirla.

### 10.6 Volver

Toda pantalla profunda tiene salida visible: link fantasma con flecha izquierda,
arriba a la izquierda, `13px`, color `--muted` → hover `--navy`.
**Ninguna pantalla es un callejón sin salida.**

---

## 12. Footer

```css
.footer {
  background: var(--navy-deep);
  border-top: .5px solid #0a3070;
  padding: 28px 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.footer a { font-size: 12px; color: rgba(255,255,255,.22); transition: color .2s; }
.footer a:hover { color: rgba(255,255,255,.65); }
.footer .copy { font-size: 11px; color: rgba(255,255,255,.22); }
```

- Estructura: **Logo blanco (140px) | Links | Copyright**.
- Copyright: `© 2026 SuperLeads · México y LATAM`.
- **Mobile**: se apila en columna, centrado, `gap: 16px`, padding `28px 18px`.
- En apps internas, el pie va dentro del sidebar (solo copyright, 10px, `rgba(255,255,255,.2)`).

---

## 13. Tarjetas

```css
/* Tarjeta sobre fondo claro */
.card {
  background: #fff;
  border: .5px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-color: rgba(0,57,200,.25);
}

/* Tarjeta sobre fondo oscuro */
.card-dark {
  background: rgba(255,255,255,.04);
  border: .5px solid rgba(255,255,255,.07);
  border-radius: 12px;
}
.card-dark:hover { border-color: rgba(86,239,159,.25); }
```

**Regla de rejilla:** todas las tarjetas de una cuadrícula tienen **la misma altura y
el mismo ancho** (`height: 100%` en el hijo). Una tarjeta "destacada" del doble de
ancho deja huecos con casi cualquier número de elementos — la simetría gana.

```css
.cards { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
```

---

## 14. Eyebrows, badges y stats

### 13.1 Eyebrow (etiqueta de sección)

```html
<div class="eyebrow"><span>DIAGNÓSTICOS</span></div>
```
```css
.eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.eyebrow span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.3px; color: var(--blue); }

/* Sobre fondo oscuro */
.eyebrow-dark::before { background: var(--green); }
.eyebrow-dark span    { color: var(--green); }
```

### 13.2 Badges y pills

```css
/* Badge sobre oscuro */
.badge-dark {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px; border-radius: 20px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  background: rgba(86,239,159,.1); color: var(--green);
  border: .5px solid rgba(86,239,159,.25);
}

/* Badge de estado sobre claro */
.badge-ok    { background: #ecfdf5; color: #047857; }
.badge-draft { background: #f1f5f9; color: #475569; }
/* Ambos: padding 2px 8px; border-radius 6px; font-size 10px; font-weight 600;
   text-transform uppercase; letter-spacing .5px */
```

### 13.3 Stats

```css
.stat-num   { font-size: 28px; font-weight: 800; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 11px; line-height: 1.4; margin-top: 4px; }
/* Sobre oscuro: número #fff o var(--green), label #4a6aaa
   Sobre claro:  número var(--navy),        label var(--muted) */
```

**El stat héroe** (la cifra que sostiene la conversación) va solo, sobre navy-deep,
a `48–60px`, con su contexto humano debajo en una fila de stats chicos.
Una cifra grande sin contexto es un número; con contexto es un argumento.

---

## 15. Grids y layout

| Uso | Columnas |
|---|---|
| Hero | `1fr 1fr` |
| Tarjetas de features | `repeat(auto-fill, minmax(280px, 1fr))` |
| Stats bar | `repeat(auto-fit, minmax(160px, 1fr))` |
| Formulario | `repeat(auto-fit, minmax(280px, 1fr))` |
| CTA block | `1fr auto` |
| Contenido + widget | `1fr 1fr` |
| Panel de app | `sidebar 288px + 1fr` |

**Anchos máximos:** contenido de app `1400px` · página de contenido `1100px` ·
documento de lectura `46rem`.

**Regla de oro del responsive:** usa `auto-fit`/`auto-fill` con `minmax` antes que
media queries. El layout que se acomoda solo no se rompe en el tamaño que no probaste.

---

## 16. Visualización de datos

**La paleta de marca NO se usa en gráficas.** El verde y el navy no pasan las pruebas
de contraste ni de daltonismo en marcas pequeñas. Las gráficas usan su propia paleta,
validada:

| Token | Hex | Uso |
|---|---|---|
| `--chart-1` | `#2a78d6` | Serie 1 · secuencial base |
| `--chart-2` | `#eb6834` | Serie 2 · el "antes" en comparaciones |
| `--chart-3` | `#1baf7a` | Serie 3 · el "después" / meta |
| Neutro | `#c6ccd8` | "Sin explicar", resto, sin dato |

**Reglas:**
- **Un solo tono, claro → oscuro** para magnitudes (embudos, mapas de calor).
  **Dos tonos + gris** para polaridad. Nunca arcoíris.
- **El color sigue a la entidad, no a su posición.** Si un filtro cambia el número
  de series, las que quedan no cambian de color.
- **Texto en tinta, nunca del color de la serie.** La marca de color va al lado.
- **Leyenda siempre** con 2+ series, y etiqueta directa en las importantes.
- **Marcas finas**: líneas `2px`, puntos `≥8px`, separación de `2px` entre segmentos apilados.
- **Contraste en marcas oscuras**: sobre un relleno oscuro el texto va blanco. Sin excepción.
- **Nunca dos ejes Y.** Dos magnitudes distintas → dos gráficas.
- **Sin dato, no hay gráfica.** No dibujes un cero: oculta el panel.

**Números en la interfaz:**
- Moneda con dos decimales y símbolo (`$134,000.00`), porcentajes con 1–2 decimales.
- Sin dato: `—` (guion largo), nunca `0`, `N/A` ni vacío.
- Fechas en zona horaria de México (`America/Mexico_City`), formato `medium` (`14 ago 2026`).

---

## 17. Fondos y elementos decorativos

**Círculos difusos** — el fondo de marca. Muy tenues, muy grandes, siempre detrás.

```css
.fondo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fondo .globo-1 {
  position: absolute; top: -30%; right: -15%;
  width: 520px; height: 520px; border-radius: 50%;
  background: rgba(42,137,251,.05); filter: blur(100px);
}
.fondo .globo-2 {
  position: absolute; bottom: -30%; left: -10%;
  width: 480px; height: 480px; border-radius: 50%;
  background: rgba(86,239,159,.05); filter: blur(110px);
}
```

**Deriva lenta** — el fondo respira sin que nadie lo note. Pensado para pantalla
compartida: a simple vista está quieto, pero no está muerto.

```css
@keyframes deriva {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(-48px, 36px, 0) scale(1.08); }
}
.globo-1 { animation: deriva  90s ease-in-out infinite; }
.globo-2 { animation: deriva 130s ease-in-out infinite reverse; }
```

**Sobre secciones oscuras**, círculo de acento casi invisible:
```css
section::before {
  content: ""; position: absolute; right: -100px; top: -100px;
  width: 480px; height: 480px; border-radius: 50%;
  background: rgba(86,239,159,.03); pointer-events: none;
}
```

**Separador de barra de stats** (sobre oscuro): rejilla con `gap: 1px` y fondo `#0a3070`.

---

## 18. Estados de la interfaz

Toda pantalla que carga datos necesita **cuatro** diseños, no uno:

### Vacío
Tarjeta con borde punteado, ícono en círculo `--blue-softer`, título en navy,
una línea de explicación, y **el botón que resuelve el vacío**.
> "Aún no hay diagnósticos — Inicia una sesión de Rayos X para descubrir oportunidades."

### Cargando
- Menos de 2s: spinner solo.
- Más de 2s: spinner + texto que describe lo que pasa.
- Más de 10s: **etapas que avanzan**, una cada ~2.5s.

### Error
- **El mensaje real**, en `--destructive`, junto a la acción que falló — no en un
  toast que desaparece.
- Dice **qué hacer**: "Revisa tu conexión e intenta de nuevo", "Verifica que…".
- **Nunca destruye lo que el usuario escribió.**

### Éxito
Discreto: `Guardado 14:32` en tinta. Toast de celebración solo para acciones grandes
(finalizar un diagnóstico, generar un análisis), 3 segundos, abajo al centro.

---

## 19. Modos especiales

### Modo presentación
Para compartir pantalla: oculta la navegación y deja solo el contenido.
- Se activa con un botón visible **desde cualquier pantalla** (si se puede encender
  en un lado y no apagar en otro, es una trampa).
- El estado persiste (`localStorage`) y se restaura **antes del primer pintado**,
  para que no haya parpadeo.

### Modo privado (métricas ocultas)
Para mostrar un panel en público sin exponer cifras de clientes:
```css
.metrica-oculta { filter: blur(7px); user-select: none; }
```
- **Los nombres se ven, las cifras no.** Un ojo (👁) al lado revela/oculta.
- **Arranca oculto por defecto**: es más seguro descubrir a propósito que tapar a las prisas.

---

## 21. PDFs — el documento SuperLeads

Producimos muchos PDFs y todos deben verse hermanos. Esta sección es la receta
exacta: si la sigues, tu documento se ve SuperLeads sin decidir nada.

> **La regla de oro del papel:** un PDF no es una página web impresa. En pantalla
> la jerarquía vive de fondos y sombras; en papel vive de **tipografía, filetes y
> espacio en blanco**. Lo demás gasta tinta y estorba.

### 20.1 Los cuatro documentos

| Documento | Extensión | Portada | Se entrega |
|---|---|---|---|
| **Hoja del cliente** | **1 página, siempre** | No | Al cerrar la sesión |
| **Diagnóstico / reporte** | 4 a 12 páginas | Sí | Después de la sesión |
| **Propuesta comercial** | 6 a 14 páginas | Sí | Como seguimiento formal |
| **Documento legal** | Variable | No | Para firma |

Si tu documento no cabe en ninguno, casi siempre es porque son **dos documentos**.

### 20.2 La página

| Propiedad | Valor | Por qué |
|---|---|---|
| Tamaño | **Carta** (216 × 279 mm) | Estándar en México. **Nunca A4**: se imprime recortado. |
| Márgenes | `20mm` arriba · `16mm` lados e inferior | Arriba va más por el encabezado. |
| Ancho de texto | Máximo `165mm` | Más largo y el ojo se pierde al saltar de línea. |
| Orientación | Vertical | Horizontal solo para tablas de 6+ columnas, en página aparte. |
| Fondo | Blanco | Color a página completa solo en portada. |

### 20.3 Anatomía

**Portada** — logo **blanco** (52 mm) arriba a la izquierda · título, institución y
fecha abajo · autor y confidencialidad al pie · **sin folio**.

**Interior** — encabezado con logo **azul** (26 mm) y nombre del documento, filete
abajo · cuerpo · pie con "Institución · Fecha" a la izquierda y folio `3 / 12` a la
derecha.

**Hoja del cliente** — una sola página, sin portada ni folio, una cifra
protagonista y los hallazgos.

### 20.4 El logo

| Dónde | Versión | Ancho | Posición |
|---|---|---|---|
| Portada | **Blanco** sobre navy-deep | `52mm` | Superior izquierda, a 20 mm |
| Encabezado interior | **Azul** | `26mm` | Superior izquierda |
| Hoja del cliente | **Azul** | `30mm` | Superior izquierda |
| Pie de página | **Nunca** | — | En el pie va texto, no marca |

Una sola vez por página. Repetirlo no refuerza la marca: la abarata.

### 20.5 Tipografía impresa — en puntos

| Rol | Tamaño | Peso | Color |
|---|---|---|---|
| Título de portada | `32pt` | 800 | Blanco |
| Cifra protagonista | `26pt` | 700 | Navy |
| Título de sección | `12.5–14pt` | 600–700 | Navy |
| Subtítulo | `11.5pt` | 600 | Navy |
| **Cuerpo** | `11pt` · interlineado `1.5` | 400 | `#111827` |
| Valor de dato | `11pt` | 600 | `#111827` |
| Etiqueta de dato | `9.5pt` · `letter-spacing .04em` | 500 | `#5b6472` |
| Folio | `9pt` | 400 | `#98a1b0` |
| Nota al pie / legal | `8.5pt` | 400 | `#5b6472` |

**Nunca menos de 8.5pt.** Si no cabe, sobra material — no aprietes la tipografía.

### 20.6 Color en papel

| Uso | Valor | Regla |
|---|---|---|
| Tinta principal | `#111827` | **No negro puro**: impreso se ve duro. |
| Títulos | `#002582` | Único color de marca en el cuerpo. |
| Etiquetas | `#5b6472` | Jerarquía por color, jamás por opacidad. |
| Filetes | `#d8dce4` | Líneas de 1px reales (.5px desaparece en papel). |
| Verde | Solo en bloques navy | Sobre blanco no se lee y gasta tinta de color. |

**Debe leerse en blanco y negro.** Imprime una prueba en grises: lo que se pierda
dependía del color.

### 20.7 Saltos de página

```css
@page{ size: letter; margin: 20mm 16mm 16mm; }

/* Un título nunca se queda solo al final de una página */
h1,h2,h3{ break-after: avoid; }

/* Lo que no se puede partir */
.dato, figure, tr, .cifra{ break-inside: avoid; }

/* Las secciones SÍ pueden partirse: prohibirlo deja huecos blancos al pie */
section{ break-inside: auto; }

.capitulo{ break-before: page; }
p{ orphans: 3; widows: 3; }
```

### 20.8 De pantalla a papel

```css
@media print{
  *{ print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  html,body{ background:#fff !important; }
  nav,.sidebar,.topbar,button,.no-print{ display:none !important; }

  /* Las tarjetas se aplanan: en papel gastan tinta y parten el texto en islas */
  .card{ border:0 !important; box-shadow:none !important;
         background:transparent !important; padding:0 !important; }

  /* Los bloques oscuros se invierten: texto claro sobre navy es ilegible impreso */
  .bloque-navy{ background:transparent !important; color:var(--navy) !important; }

  .doc{ max-width:none; width:100%; }
  body{ font-size:11pt; line-height:1.5; }
  a{ overflow-wrap:anywhere; }
}
```

**La prueba que nadie hace:** genera el PDF y míralo completo antes de mandarlo —
hojas en blanco, títulos huérfanos, tablas cortadas, enlaces fuera del margen.

### 20.9 Nombre del archivo y metadatos

```
SuperLeads_TipoDeDocumento_Institucion_AAAA-MM-DD.pdf

SuperLeads_RayosX_CentroEscolarMexiquense_2026-08-14.pdf
SuperLeads_Propuesta_ColegioDelValle_2026-08-20.pdf
```

- **Sin espacios, sin acentos, sin eñes** — se rompen al descargar
- **Fecha en ISO al final**: los archivos se ordenan solos
- **Institución en PascalCase**, sin abreviar

En las propiedades del PDF: **Título** real (no "Documento1"), **Autor** SuperLeads,
**Idioma** es-MX.

### 20.10 Checklist del PDF

- [ ] Carta, márgenes 20/16/16 mm
- [ ] Logo correcto: blanco 52 mm en portada, azul 26 mm en encabezado, una vez por página
- [ ] Cuerpo a 11pt, nada bajo 8.5pt
- [ ] Tinta `#111827`; sin fondos de color fuera de portada
- [ ] Ningún título huérfano al pie
- [ ] Sin hojas en blanco ni huecos grandes
- [ ] Folio en interiores (portada no lleva)
- [ ] Se entiende impreso en blanco y negro
- [ ] Nombre con la convención y metadatos llenos
- [ ] Revisado **página por página** antes de enviar

---

## 22. Google Docs y Sheets

El mismo sistema sin CSS. Configúralo una vez, guárdalo como plantilla.

### 21.1 Tipografía
**Plus Jakarta Sans sí está en Docs**: fuentes → *Más fuentes* → agrégala. Si se
comparte fuera: **Inter**, y en último caso **Arial**. Nunca Times ni Calibri.

### 21.2 Estilos de párrafo

| Estilo | Tamaño | Peso | Color | Espacio antes |
|---|---|---|---|---|
| Título | 32 pt | Negrita | `#002582` | — |
| Subtítulo | 13 pt | Normal | `#5b6472` | 6 pt |
| Título 1 | 16 pt | Negrita | `#002582` | 18 pt |
| Título 2 | 13 pt | Negrita | `#002582` | 14 pt |
| Título 3 | 11 pt | Negrita | `#111827` | 10 pt |
| **Texto normal** | 11 pt | Normal | `#111827` | interlineado 1.5 |

Márgenes: **1.6 cm** en los cuatro lados. Guárdalo con *Opciones → Guardar como
estilos predeterminados*.

### 21.3 La paleta en Drive

```
002582  Navy — títulos y encabezados de tabla
001240  Navy profundo — portadas y bloques de cierre
56EF9F  Verde — SOLO sobre navy
0039C8  Blue — enlaces
111827  Tinta — cuerpo
5B6472  Gris texto — etiquetas
D8DCE4  Filete — bordes de tabla
F4F7FF  Azul suave — filas alternas
```

### 21.4 Tablas

| Elemento | Formato |
|---|---|
| Encabezado | Fondo `#002582`, texto blanco, negrita, 10 pt, mayúsculas |
| Filas alternas | Blanco y `#F4F7FF` — nunca gris |
| Bordes | `#D8DCE4` a 1 pt, solo horizontales |
| Relleno | 6 pt vertical, 10 pt horizontal |
| Números | Alineados a la **derecha**; texto a la izquierda |

### 21.5 Reglas de Sheets

- **Moneda**: contabilidad con dos decimales; negativos en `#d03b3b`
- **Sin dato**: vacío o `—`. **Nunca 0** — un cero se suma y contamina totales
- **Formato condicional**: los tres colores de estado como relleno claro
- **Una hoja, una tabla**; fila 1 de encabezados, sin celdas combinadas

### 21.6 Exportar a PDF

*Archivo → Descargar → PDF* y **revísalo**. En Sheets, antes: tamaño Carta,
ajustar al ancho, repetir fila congelada, **apagar líneas de cuadrícula**. Renombra
con la convención de 20.9.

---

## 23. Aplicación móvil — iOS y Android

> Una app **no es la web metida en un teléfono**. Cambian tres cosas de raíz:
> **no hay cursor** (el hover no existe), **la pantalla tiene zonas prohibidas**
> (notch y barra de gestos) y **la navegación vive abajo**, donde llega el pulgar.
> Todo lo demás de esta guía se mantiene: colores, tipografía, movimiento.

### 23.1 El ícono de la app

| Regla | Detalle |
|---|---|
| **El símbolo, no el logotipo** | Solo la marca gráfica, **sin la palabra**. A 60px una palabra es una mancha. |
| **Fondo navy-deep sólido** | `#001240` con el símbolo en verde `#56EF9F`. |
| **Sin transparencia** | iOS la rellena de negro. Siempre un cuadrado opaco. |
| **Sin esquinas propias** | Cada sistema aplica su máscara; si las redondeas, salen dobles. |
| **Sin texto, degradados ni sombras** | Plano y limpio. |
| **Zona segura** | El símbolo ocupa el **60–66% central**: Android recorta hasta un 25% del borde. |

**Qué entregar**

| Plataforma | Archivo | Medida | Nota |
|---|---|---|---|
| Master | `icono-master.png` | 1024 × 1024 | PNG sin alfa |
| iOS | `AppIcon` | 1024 × 1024 | Xcode genera el resto |
| Android | `ic_launcher_foreground` | 432 × 432 | Símbolo en los 264px centrales |
| Android | `ic_launcher_background` | 432 × 432 | Navy-deep sólido |
| Android | `ic_launcher_monochrome` | 432 × 432 | Silueta blanca sobre transparente |

**La prueba de los 40 píxeles:** redúcelo a 40×40 entre los íconos reales de tu
teléfono. Si no se distingue, tiene demasiado detalle.

### 23.2 Iconografía interna

Misma familia que en web: **Lucide**.

| Uso | Tamaño | Grosor |
|---|---|---|
| Barra de pestañas | **24 pt/dp** (28 sin etiqueta) | 2 |
| Barra superior | **22 pt/dp** | 2 |
| Listas | **20 pt/dp** | 2 |
| Botones | **18 pt/dp** | 2 |
| Junto a texto pequeño | **16 pt/dp** | 1.75 |
| Estado vacío | **40–48 pt/dp** | 1.5 |

Rejilla de 24 siempre · línea, no relleno (salvo pestaña activa) · un ícono nunca
va solo si su significado no es obvio · nunca inventes uno que ya exista en Lucide.

### 23.3 Zonas prohibidas y zona del pulgar

Con el teléfono en una mano el pulgar alcanza cómodo **el tercio inferior**:
la navegación va **abajo**, la acción principal abajo, y arriba solo información.
**Nunca** "Guardar" en la esquina superior derecha de un formulario largo.

| Zona | Qué ocupa | Regla |
|---|---|---|
| Arriba | Notch · barra de estado | Nada tocable ahí; el fondo **sí** se extiende |
| Abajo | Barra de gestos / navegación | La barra de pestañas lleva **~34pt extra abajo** |
| Lados | Bordes curvos y gesto de volver | Margen lateral mínimo **16pt** |

```css
padding-top:    env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left:   max(16px, env(safe-area-inset-left));
padding-right:  max(16px, env(safe-area-inset-right));
```

### 23.4 Medidas exactas

| Elemento | iOS | Android | SuperLeads |
|---|---|---|---|
| Barra superior | 44 pt | 56 dp | Título 17pt/700 navy |
| Barra de pestañas | 49 pt + safe | 56 dp + safe | Blanco, borde superior .5px |
| **Área tocable** | **44 × 44 pt** | **48 × 48 dp** | Usa **48** y cumples ambas |
| Margen lateral | 16 pt | 16 dp | 16 · 20 en lectura |
| Separación entre tocables | 8 pt/dp | 8 pt/dp | Menos y se toca el equivocado |
| Fila de lista | 44 / 60 pt | 48 / 64 dp | 64 con título y subtítulo |
| Botón principal | 48 pt | 48 dp | Radio 8, ancho completo |
| FAB | 56 dp | 56 dp | Verde con símbolo navy |

### 23.5 Navegación: tres patrones

1. **Barra de pestañas** — la estructura. Entre 3 y 5, cada una recuerda dónde te
   quedaste. Ícono + etiqueta siempre.
2. **Apilar (push)** — el detalle. Entra desde la derecha, flecha de volver y gesto
   desde el borde. Máximo 3 niveles.
3. **Hoja (sheet)** — tarea corta. Sube desde abajo con agarradera. Nunca para
   tareas largas.

> **Prohibido: el menú hamburguesa.** Esconde la navegación, vive lejos del pulgar
> y hace que media app no exista. Si no cabe en 5 pestañas, la última es "Más" —
> que es una pantalla, no un cajón.

### 23.6 Lo que reemplaza al hover

| En web | En app | Cómo |
|---|---|---|
| Hover | **Presionado** | Opacidad .7 o fondo `rgba(0,37,130,.06)`, inmediato |
| Tooltip | **Texto debajo** | El hint visible bajo el campo |
| Confirmación | **Háptica** | Ligera al elegir, media al completar. Nunca en cada toque |

Dos gestos que se dan por hechos: **arrastrar desde el borde = volver** (nunca lo
bloquees) y **jalar hacia abajo = actualizar**.

### 23.7 Tipografía y modo oscuro

| Rol | Tamaño | Peso |
|---|---|---|
| Título grande | 28–34 pt | 800 |
| Título de barra | 17 pt | 700 |
| Título de fila | 16 pt | 600 |
| **Cuerpo** | **16 pt** | 400 |
| Secundario | 14 pt | 400 |
| Etiqueta de pestaña | 10–11 pt | 600 |
| Mínimo absoluto | **12 pt** | — |

**16pt, no 14:** en iOS un campo de menos de 16pt hace que la vista haga zoom sola.
Y la app debe respetar el **tamaño de texto del sistema** (hay quien lo trae al
130%): nada de altos fijos en contenedores con texto.

El modo oscuro **no es opcional**:

| Rol | Claro | Oscuro |
|---|---|---|
| Fondo | `#F4F7FF` | `#060a18` |
| Superficie | `#FFFFFF` | `#0c1530` |
| Texto principal | `#1a1a1a` | `#EEF1FB` |
| Texto secundario | `#5b6478` | `#b4c0db` |
| Borde | `#e0e8f8` | `rgba(255,255,255,.10)` |
| **Acción principal** | `#002582` navy | `#56EF9F` **verde** |

En oscuro el botón principal se vuelve verde: el fondo ya es oscuro y el verde por
fin es el acento correcto. *El fondo manda el color.*

### 23.8 Patrones de pantalla

| Pantalla | Cómo se arma |
|---|---|
| **Lista** | Filas de 64pt, título 16 + subtítulo 14, separador .5px. Jalar para actualizar; cargar más solo |
| **Detalle** | Encabezado con lo importante, secciones, acciones fijas al pie |
| **Formulario** | Una columna, un campo por renglón, teclado correcto, el botón **sube con el teclado** |
| **Vacío** | Ícono 48pt, título, una línea y **el botón que lo resuelve** |
| **Carga** | **Esqueleto**, no rueda: se siente el doble de rápido |
| **Error** | Mensaje real + **Reintentar**. Nunca un código a secas |
| **Sin conexión** | Barra fija: "se guardará al reconectar". **Lo tecleado nunca se pierde** |

### 23.9 iOS y Android: lo que sí cambia

| Detalle | iOS | Android |
|---|---|---|
| Título de barra | Centrado | A la izquierda |
| Acción flotante | Botón al pie, ancho completo | FAB circular abajo a la derecha |
| Confirmaciones | Hoja desde abajo | Diálogo centrado |
| Avisos | Banner arriba | Snackbar abajo |
| Tipografía y radios | Plus Jakarta Sans y los radios de la guía en ambos | |

### 23.10 Checklist de app

- [ ] Ícono: símbolo sin palabra, navy sólido, sin transparencia, legible a 40px
- [ ] Los tres archivos de Android y el master de 1024
- [ ] Iconografía Lucide, rejilla 24, grosor 2
- [ ] Navegación abajo, 3–5 pestañas con etiqueta. **Cero hamburguesas**
- [ ] Todo lo tocable 48 × 48 mínimo, separado 8
- [ ] Safe areas respetadas
- [ ] Cuerpo 16pt y respeta el texto del sistema
- [ ] Modo oscuro completo (acción principal verde)
- [ ] Presionado inmediato; háptica solo cuando importa
- [ ] Gesto de volver y jalar para actualizar
- [ ] Esqueletos, no ruedas; sin conexión no pierde nada
- [ ] Probado en el teléfono más chico y con texto al 130%

---

## 25. Impresión en pantalla

```css
@media print {
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  @page { size: letter; margin: 16mm; }

  html, body { background: #fff !important; }
  .no-print, nav, .sidebar, .topbar, button { display: none !important; }

  /* Las tarjetas se aplanan: en papel solo gastan tinta y parten el texto. */
  .card { border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; }

  body { font-size: 11pt; line-height: 1.5; }
  h1, h2, h3 { break-after: avoid; }
  figure, .par-dato { break-inside: avoid; }
  /* Las secciones SÍ pueden partirse: evitarlo deja huecos al pie de cada hoja. */
}
```

- **Jerarquía por color, nunca por opacidad**: la mayoría de las impresoras no
  resuelven un azul al 30%.
- El documento se ve **igual en pantalla que en papel** — así nadie imprime sorpresas.

---

## 25. Accesibilidad

No es una capa que se agrega al final: es parte de que algo esté bien hecho.

### 23.1 Los cinco que nunca se negocian

| Regla | Valor | Cómo se verifica |
|---|---|---|
| **Contraste de texto** | 4.5:1 normal · 3:1 en 18pt+ | Inspector del navegador |
| **Contraste de controles** | 3:1 en bordes, íconos y estados | Un borde tenue no se ve con luz de día |
| **Foco visible** | `outline: 2px solid var(--blue); outline-offset: 2px` | Recorre todo con Tab |
| **Área táctil** | 44 × 44 px mínimo | Un ícono de 16px necesita padding |
| **Nunca solo color** | Estado = color + ícono o texto | Míralo en escala de grises |

### 23.2 Movimiento reducido

Cuidamos el movimiento — por eso mismo hay que **saber apagarlo**: para alguien con
vértigo o migraña vestibular una animación provoca mareo real.

```css
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}
```

Nada deja de funcionar: los cambios de color se mantienen porque son información,
no decoración.

### 23.3 Estructura navegable sin ver

- **Un solo `<h1>`**, niveles sin saltos. El tamaño lo decide el CSS, no la etiqueta.
- **Regiones**: `<header>`, `<nav>`, `<main>`, `<footer>`.
- **`lang="es"`** en el `<html>` — sin esto se lee español con fonética inglesa.
- **Enlace de salto** como primer elemento:

```css
/* Se oculta recortándolo, NO con left:-9999px — esa técnica genera scroll */
.saltar{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.saltar:focus{position:fixed;width:auto;height:auto;clip:auto;clip-path:none;
  left:16px;top:16px;z-index:999;background:var(--navy);color:#fff;
  padding:10px 18px;border-radius:8px}
```

### 23.4 Formularios

```html
<div class="field">
  <label for="matricula">Matrícula actual</label>
  <input id="matricula" type="number" inputmode="numeric"
         aria-describedby="ayuda-matricula" aria-invalid="false">
  <p id="ayuda-matricula" class="hint">Solo alumnos pagando hoy.</p>
</div>

<!-- El estado de guardado se anuncia sin robar el foco -->
<span aria-live="polite">Guardado 14:32</span>
```

- **`label` con `for`** siempre. Un placeholder no es etiqueta.
- **`aria-describedby`** conecta hint y error al campo.
- **`inputmode`** correcto: en celular abre el teclado adecuado.

### 23.5 Imágenes e íconos

| Caso | Qué hacer |
|---|---|
| Logo | `alt="SuperLeads"` — el nombre, no "logotipo de" |
| Ícono decorativo junto a texto | `alt=""` o `aria-hidden="true"` |
| Botón de solo ícono | `aria-label="Borrar diagnóstico"` + `title` |
| Gráfica | Describe **la conclusión**, no el tipo de gráfica |

### 23.6 Zoom y tamaño

- Funciona al **200% de zoom** sin scroll horizontal
- **Nunca menos de 11px** en texto funcional (10px solo en eyebrows en mayúsculas)
- **Nunca `user-scalable=no`**

### 23.7 Documentos accesibles

- **Texto real, nunca dentro de una imagen**
- **Idioma** en las propiedades (`es-MX`)
- **Encabezados reales**, no texto grande en negritas
- En Docs, usa los estilos de párrafo de 21.2: de ahí sale la estructura del PDF

> **La prueba de los tres minutos:** recórrela con Tab · ponle 200% de zoom ·
> mírala en escala de grises. Si pasa las tres, está lista.

---

## 26. Checklist antes de entregar

**Marca**
- [ ] Logo oficial SVG, versión correcta según el fondo, enlazado
- [ ] Plus Jakarta Sans cargada, sin fuentes ajenas
- [ ] Ningún verde sobre blanco; ningún navy sobre navy

**Estructura**
- [ ] Todos los bordes estructurales en `.5px`
- [ ] Radios: 8px controles · 12px tarjetas · pill en badges
- [ ] Espaciado en múltiplos de 4
- [ ] Rejillas con `auto-fit`/`minmax` — probadas a 375px, 768px y 1440px

**Interacción**
- [ ] Todo botón tiene hover (lift + sombra), active (hundido) y focus visible
- [ ] Todo botón que trabaja se deshabilita y dice cómo terminó
- [ ] Un único easing `--ease` en todo el archivo
- [ ] Formularios: hints donde hace falta, validación al salir del campo, nada preseleccionado

**Contenido**
- [ ] Sin dato → `—`, nunca `0` inventado
- [ ] Los cuatro estados diseñados: vacío, cargando, error, éxito
- [ ] Mensajes de error reales y accionables
- [ ] Toda pantalla profunda tiene forma de volver

**Cierre**
- [ ] Ortografía y acentos revisados en TODO el texto visible
- [ ] Probado en impresión si el contenido se comparte
- [ ] Footer con copyright correcto

---

## 27. Anti-patrones — lo que delata un diseño fuera del sistema

| ❌ No | ✅ Sí |
|---|---|
| Verde `#56EF9F` sobre blanco | Navy o blue sobre claro; verde solo sobre oscuro |
| `border: 1px solid #ddd` | `border: .5px solid var(--border)` |
| Sombras negras (`rgba(0,0,0,.2)`) | Sombras teñidas de navy |
| `opacity: .5` para jerarquía de texto | El color `--muted` o `--dim` |
| `transition: all .3s ease` | Propiedades nombradas + `var(--ease)` |
| Hover que mueve 8px | `translateY(-2px)` botón · `-3px` tarjeta |
| `repeat(2, 1fr)` fijo en formularios | `repeat(auto-fit, minmax(280px, 1fr))` |
| Un `<select>` con 4 opciones | Chips, todas visibles |
| Toggle con "No" preseleccionado | Tres estados, nada activo al inicio |
| "Ocurrió un error, intenta de nuevo" | El mensaje real y qué hacer |
| Mostrar `0` cuando no hay dato | `—` |
| Botón que se encoge al cargar | Ancho reservado, spinner adentro |
| Tarjeta destacada del doble de ancho | Cuadrícula uniforme |
| Colores de marca en gráficas | Paleta `--chart-*` validada |
| Un spinner eterno sin explicación | Etapas que avanzan arriba de 10s |
| Acción principal al fondo del menú | Acción principal arriba |

---

*SuperLeads · Guía de Estilos v3 · Si algo no está aquí, resuélvelo con los seis
principios de la sección 1 — y luego agrégalo a esta guía.*