---
id: location-tabla-datos
status: proposed
kind: fix
sprint: 6

target:
  block: sek_c_map
  based_on: sek-map
  see: https://institucioneducativaseki5.sg-host.com/curso-escolar-sek-alboran/

evidence:
  used_in:
    - output/pages/sek-schools/residencias.html
  figma: "Location 20:3345 → Table I20:3281;8:1137 · Item List I20:3281;8:1100"

tokens: [border-static-disabled, text-static-primary]

behaviour:
  - La tabla de datos es **una columna de 584** con filas de dos columnas al 50 %, calle 16,
    línea `border-static-disabled` arriba y padding 8 / 24
  - Etiqueta en **Overtitle/Md** (16 / 1.3 / +0,02em) y valor en **Subtitle/Sm** (18 / 1.4 / −0,02em)
  - Se alinean por la **línea base**, no por el centro
  - **No apila** etiqueta y valor en tablet
  - La columna de contenido mide 584 y el titular toma el resto de la retícula

accept:
  - En 1440 la sección reparte 648 + 128 + 584 = 1360 y nada se sale
  - La línea de fila es #d6d9dd, no #1d1f2133
  - Por debajo de 584 de viewport la columna encoge en vez de desbordar

built:
  branch:
  commit:
  notes:
---

# Tabla de datos del bloque Location

**Componente**: Location `20:3345` → *Table* `I20:3281;8:1137` (Figma, SEK Library 2026).
**Bloque de dev**: `acf/map` / `sek_c_map`, la `<dl>` de datos.

## Medidas del componente

La tabla es una **columna de 584 px** (`display:flex; flex-direction:column;
align-items:flex-start; padding:0`) con filas de **57 px** — el *Item List* `I20:3281;8:1100`:

| | Valor |
|---|---|
| Fila | `border-top: 1px solid var(--border-disabled)` = **#d6d9dd** |
| Padding | **8 arriba / 24 abajo**, sin padding lateral |
| Columnas | dos, **`flex: 1 0 0`** (50/50), `min-width: 1px` |
| Calle | **16** |
| Alineación | **`align-items: baseline`** |
| Etiqueta | **Overtitle/Md** — 16 / 1.3 / **+0,02em** · Regular |
| Valor | **Subtitle/Sm** — 18 / 1.4 / −0,02em |

Y el reparto de la sección en 1440 es **título 648 + calle 128 + contenido 584** (Figma dibuja
655 + 128 + 577 y luego mete una tabla de 584 en esos 577: se sale 7 px. Se toma el 584 como
bueno y el título cede esos píxeles, que es lo que cuadra la retícula de 1360).

## En qué se desvía el bloque publicado

1. **Reparte los datos en tres columnas** (`grid-cols-3` a partir de 1024) de ~184 px: cada dato
   queda en una tira demasiado estrecha y el valor se parte en tres o cuatro líneas.
2. **Línea equivocada**: usa `border-static-hairline` (#1d1f2133, un negro al 20 %) donde el
   componente pide `border-static-disabled` (**#d6d9dd**). Se ve más oscura y más sucia.
3. **A partir de 768 apila etiqueta y valor** (`min-[768px]:flex-col`) y mete `px-6`. El
   componente los mantiene en dos columnas siempre.
4. **La etiqueta va en `font-medium` a 16** en vez de regular a 18, y encima invierte el
   tracking en ≥768 (`tracking-[0.02em]`, positivo, cuando el estilo pide −0,02em).
5. El titular de la sección va a `w-[50%] shrink-0` (**680** de 1360), que con la columna a 584
   suma 1392 y **se sale 32 px** de la retícula.

## Qué hace falta en dev

- Variante **`table`** de la lista de datos: dos columnas al 50 %, línea `border-static-disabled`
  arriba de cada fila, padding 8/24, calle 16, y **sin apilado** en tablet.
- Etiqueta con el estilo **Subtitle/Sm** y valor con **Body/Md**.
- Columna de contenido a **584** con el titular tomando el resto (`flex:1 1 auto; min-width:0`),
  no un 50 % fijo.
- La columna debe poder **encoger** por debajo de 584 (con `flex:0 0 584px` se sale en móvil).

## Dos desviaciones deliberadas del componente

1. **La jerarquía va al revés**: en Figma la etiqueta es lo grande (18) y el valor lo pequeño
   (16). Aquí la etiqueta es un **antetítulo** (Overtitle/Md, 16, con el tracking abierto) y el
   valor es lo que se lee (Subtitle/Sm, 18). Es lo que pide la lectura: primero el dato.
2. **Alineación por línea base, no centrada.** Con dos tamaños distintos en la misma fila, el
   centrado descuadra ópticamente; la línea base los asienta.

## Nota de contenido

Los valores tienen que caber **en una línea** para que las filas queden a 57. Dos venían largos
y **repetían lo que ya decía la propia tabla**: "Más de 40.000 m² en Villafranca del Castillo"
duplicaba la localidad de la fila *Dónde*, e "Integrada dentro del propio campus" repetía la
palabra de su etiqueta. Acortados a "Más de 40.000 m²" e "Integrada en el propio campus", las
cuatro filas caen a **58 px** clavados. Si el cliente alarga estos textos, la fila crece: no es
un fallo de retícula.