# 01 · Layout y medidas

Este es el documento para hacer el **diseño espejo**: dónde va cada cosa y cuánto mide. Todo lo de aquí está medido sobre el prototipo, no estimado — y lo puedes volver a medir tú mismo con el **modo cotas** (§8).

---

## 1 · El marco

**402 × 874 pt** — iPhone 16 Pro. Es la referencia de todo el diseño; los valores están en puntos lógicos (pt en iOS, dp en Android).

El layout es de **anchura fluida con márgenes fijos**: al cambiar de dispositivo, los márgenes laterales no se mueven y el contenido se estira. Sólo tres cosas están atadas a un ancho concreto y hay que revisarlas en pantallas más angostas (360 dp) o más anchas:

| Elemento | Medida | Qué pasa en 360 dp |
|---|---|---|
| Anillo de progreso (C2, C3) | 212 px fijos | cabe, pero el aire lateral baja de 95 a 74 |
| Miniatura de sitio (B2, B5) | 78 × 78 fijos | cabe; el texto de la tarjeta se estrecha 42 px |
| Fila de tres métricas | 3 columnas iguales | "48.2 kW" ya usa `white-space: nowrap`; verificar con textos traducidos |

La altura **nunca** se da por fija: todo el contenido vive dentro de un contenedor con scroll propio.

---

## 2 · Anatomía: las cuatro composiciones

Las 32 pantallas se arman con **cuatro composiciones**. Reconocer cuál es cada una resuelve el 90 % del layout.

### A · Con header y barra de acción

![Anatomía de una pantalla con header](specs/anatomia-con-header.png)

```
┌─ header ────────────── 114 · pad 66 · 16 · 12 · 16   sticky, borde inferior 1px
├─ contenido · scroll ── flexible · pad 20 · 20 · 8 · 20
└─ barra de acción ───── 92 · pad 12 · 20 · 26 · 20    fija, borde superior 1px
```

El contenido es lo único que scrollea. Es la composición de A3, A4, A8, C1, C2, C3, D2, E3, E4, F2, F6, G1, G2, G3.

### B · Raíz con barra de pestañas

![Anatomía de una pantalla con pestañas](specs/anatomia-con-pestanas.png)

```
┌─ contenido · scroll ── 861 · pad 66 · 16 · 120 · 16   la pantalla ES el scroll
└─ barra de pestañas ─── 64 · pad 8 · 6 · 8 · 6         flotante: left/right 12, bottom 22
```

Sin header: el título vive dentro del contenido. Los **120 px de padding inferior** son los que permiten que el último elemento libre la barra flotante al hacer scroll. Es la composición de B1, D4, E1, F1.

### C · Pantalla completa

![Anatomía de una pantalla completa](specs/anatomia-pantalla-completa.png)

```
┌─ contenido · scroll ── 769  (empieza en 0: la foto llega hasta el borde)
└─ barra de acción ───── 92 · pad 12 · 16 · 26 · 16
```

El contenido arranca en el borde superior — sin header, sin padding — porque la foto va a sangre. Los controles flotan encima a 62 px del borde. Es la composición de A1, A2, A7, B3.

### D · Capa flotante

El mapa (B1) y las tres hojas inferiores (E2, C4, D3) no apilan bloques: **flotan sobre otra pantalla**. En el mapa, el contenedor no recibe toques (`pointer-events: none`) y sólo los elementos flotantes sí, para que el mapa se siga pudiendo arrastrar por debajo.

---

## 3 · Safe areas

![Safe areas del sistema](specs/safe-areas.png)

| Zona | Medida | Regla |
|---|---|---|
| Barra de estado | 62 | Ningún contenido propio dentro. El header arranca su padding en 66 para librarla con 4 px de aire. |
| Isla dinámica | 126 × 37, a 11 del borde | Es lo que obliga a los 62. Nada centrado arriba. |
| Indicador de inicio | 34 | Zona de gesto del sistema. |
| Barra de pestañas | 64 de alto + 22 del borde | Flota; el contenido pasa por debajo con `blur(14px)`. |

**Hallazgo que hay que resolver:** la barra de acción fija usa **26 px** de padding inferior, y el indicador de inicio ocupa **34**. En el mockup se ve bien porque el marco sólo dibuja la píldora, pero en un dispositivo real la última fila tocable queda dentro de la zona de gesto. Se ve claro en la lámina de arriba: "Reportar un problema" cae dentro de la banda.

> En producción: `padding-bottom: max(26, safe-area-inset-bottom)` — o sencillamente el inset del sistema. No dejes el 26 fijo.

---

## 4 · Márgenes laterales

Sólo hay **tres**, y cada uno tiene su razón:

| Margen | Dónde | Por qué |
|---|---|---|
| **16** | todo el producto: listas, tarjetas, detalle, wallet, perfil, soporte | es el estándar; da la máxima anchura útil al contenido |
| **20** | formularios de una columna: A3, A4, A8 | un campo aislado necesita más respiro lateral que una tarjeta |
| **24** | acceso: A2 Bienvenida, A7 Login | pantallas de una sola idea, sin densidad; el aire es el mensaje |

![Márgenes de 24 en acceso](specs/margenes-24-acceso.png) ![Márgenes de 16 estándar](specs/margenes-16-estandar.png)

*Izquierda: A2 con 24. Derecha: B2 con 16.*

Dos excepciones deliberadas, ambas en elementos que flotan:

- **12** — la tarjeta del mapa y la barra de pestañas. Flotan sobre el contenido; al pegarse un poco más al borde se leen como capa superior, no como contenido.
- **0** — fotos a sangre (hero de B3, portada de A7b) y la tarjeta de saldo de E1, que respeta el 16 del contenedor.

---

## 5 · Posiciones fijas

Todo lo que no fluye con el contenido está anclado a una coordenada exacta:

| Elemento | Posición | Pantalla |
|---|---|---|
| Buscador del mapa | `top 60`, `left/right 16`, alto 48 | B1 |
| Tarjeta del sitio | `left/right 12`, `bottom 112` | B1 |
| Atribución de OpenStreetMap | `bottom 348`, `right 6` | B1 |
| Botones sobre la foto | `top 62`, `left/right 16`, 40 × 40 | B3 |
| Barra de pestañas | `left/right 12`, `bottom 22` | B1, D4, E1, F1 |
| Toast | `left/right 16`, `bottom 104` | todas |
| Hoja inferior | pegada abajo, radio superior 26 | E2, C4, D3 |
| Diálogo de confirmación | centrado, 24 de margen | C2 |

El `bottom 112` de la tarjeta del mapa y el `bottom 104` del toast no son arbitrarios: los dos libran la barra de pestañas (64 + 22 = 86) con aire suficiente para que se lean como capas distintas.

---

## 6 · Ritmo vertical

La separación entre elementos comunica jerarquía. De mayor a menor:

| Separación | Entre qué | Ejemplo |
|---|---|---|
| **16–18** | secciones distintas de una pantalla | tarjeta de saldo → botones → movimientos |
| **14** | tarjetas dentro de una sección | tarjeta del anillo → tarjeta de datos en C2 |
| **12–13** | campos de un formulario | correo → contraseña |
| **10–11** | filas de una lista | movimientos, conectores, preferencias |
| **9** | elementos hermanos apretados | botones en pareja, chips |
| **7** | etiqueta y su campo | "Nombre completo" → el campo |
| **4–6** | líneas dentro de un mismo bloque | nombre del sitio → dirección → horario |

Padding interno, según el contenedor:

| Contenedor | Padding |
|---|---|
| Tarjeta | 16 (14 en las tarjetas de fila) |
| Fila de lista | 14 |
| Tarjeta de sitio con miniatura | 12 |
| Hoja inferior | 14 arriba · 20 lados · 30 abajo |
| Diálogo | 20 |
| Aviso en tinte | 13 |
| Chip | 8 · 14 |
| Insignia | 4 · 9 |

---

## 7 · Alturas de control

| Alto | Control |
|---|---|
| 60 | deslizador de autorización (C1) |
| 54 | **botón primario** · campo de la tarjeta de login |
| 52 | campo de formulario · botón primario en A7 tipografía y en el diálogo |
| 50 | botón secundario · botón social ancho · barra de composición del chat |
| 48 | buscador del mapa · CTA dentro de la tarjeta del mapa |
| 46 | botón en fila (B3) |
| 42 | contenedor de icono mediano |
| 38 | contenedor de icono chico · botón "Ruta" |
| 36 | botón de regreso del header |
| 26 | interruptor (44 de ancho) |

**Los cuatro anclajes** que sostienen el ritmo de todas las pantallas, y que no conviene tocar al portar: margen lateral **16**, botón primario **54**, campo **52**, padding inferior de la barra fija **26** (con la corrección de safe area del §3).

---

## 8 · Cómo medir cualquier cosa

El prototipo trae un **modo cotas** que convierte cualquier pantalla en su propia hoja de medidas. Está en el panel izquierdo, sección *Especificación*.

![Modo cotas](specs/modo-cotas-completo.png)

- **Modo cotas** — toca cualquier elemento del teléfono y la capa dibuja su caja, su padding interno (en cian) y sus cuatro distancias a los bordes del marco. El panel de la derecha lista tamaño, posición, radios, sombra, tipografía y **de qué token sale cada color**. Si un color no viene del sistema, sale marcado en ámbar — así se detecta cualquier valor suelto.
- Con un elemento seleccionado, **pasa el cursor sobre otro** y se mide la separación entre los dos.
- **▲ contenedor** sube al elemento padre, para medir el bloque en vez del texto.
- **Safe areas**, **Guías de margen** y **Anatomía del layout** se pueden encender solas, sin seleccionar nada.

![Cotas de un botón primario](specs/cotas-boton-primario.png)

*El botón "Cargar aquí" de B3: 274 × 54, a 16 del borde derecho, a 26 del inferior, radio 12, Inter 600 15, fondo `--brand`, texto `--on-brand`.*

Las láminas de este documento salieron de ese modo. Si necesitas una medida que no está escrita en ningún lado, ábrelo y tómala: **el prototipo es la fuente de verdad**.

---

## 9 · Al portar a otra plataforma

1. **Los márgenes y las alturas de control se copian tal cual.** Son puntos lógicos y significan lo mismo en iOS y en Android.
2. **Las safe areas se sustituyen por las del sistema**, nunca por los valores del mockup (§3).
3. **El scroll siempre vive en un contenedor interno**, no en la pantalla: es lo que mantiene la barra de acción anclada.
4. **La barra de pestañas flota**; si tu plataforma la ancla al borde por defecto, hay que separarla 22 px y darle el fondo translúcido.
5. **Nada de altos fijos en contenedores de texto.** El diseño usa altura mínima y padding; con tipografía dinámica o cadenas traducidas, un alto fijo es lo primero que se rompe.

## Android

Las pantallas son las mismas; cambia el teléfono alrededor, no el diseño. Referencia: **Pixel 8, 412 × 915 dp**, barra de estado 24 dp con cámara, navegación por gestos 24 dp (48 con tres botones), sin isla. Las zonas que reserva el diseño —62 arriba, 34 abajo— se mantienen tal cual: en Android la barra de estado ocupa 24 y el resto es aire del header. Las medidas reales las da el sistema (`WindowInsets`); estas son los mínimos que el diseño respeta.

Lo que sí cambia cómo se construye está en el kit (`kit-de-marca.html`, §06): borde a borde en Android 15, atrás del sistema y predictivo, zona de exclusión del gesto para el deslizador y el mapa, servicio en primer plano para la sesión, permisos en tiempo de ejecución, requisitos de Google Play y escala de texto hasta 200 %.

El prototipo muestra el marco Android con el selector «Dispositivo» del panel, con el conmutador iPhone / Android del índice en la vista de cliente, o con `?dispositivo=android` en el enlace.