---
id: tabs-seccion
status: proposed
kind: new
sprint: 5                        # pestaña "Sprint Nueva Arquitectura" del sheet de arquitectura

target:
  block: acf/tabs-seccion
  based_on: —  (no hay homólogo publicado)
  see: https://institucioneducativaseki5.sg-host.com/future-learning-model/

evidence:
  used_in:
    - output/pages/sek-schools/etapas-educativas-y-programas-ib.html
  ux: ux/output/pages/sek-schools/etapas-educativas-y-programas-ib.html (rama ux/irene)

fields:
  - { name: overtitle, type: text }
  - { name: title,     type: text }
  - { name: subtitle,  type: textarea, required: false }
  - { name: tabs,      type: repeater, min: 2, max: 6, sub: [
        { name: anchor,  type: text, note: "slug para el deep-link (#infantil)" },
        { name: label,   type: text, note: "corto: es la pestaña" },
        { name: content, type: wysiwyg },
      ] }

tokens: [border-static-hairline, text-static-primary, text-static-brand]

behaviour:
  - Una pestaña activa a la vez; `aria-selected` en la activa y `role="tablist"/"tab"/"tabpanel"`
  - Deep-link por hash (`#infantil`): al cargar con hash, esa pestaña nace activa
  - Con el foco en la barra, flechas ←/→ cambian de pestaña (patrón APG de tabs)
  - En móvil la barra hace scroll horizontal, sin cortar la última pestaña
  - Los paneles ocultos van con `inert`, fuera de tab y del lector

accept:
  - Cambiar de pestaña no mueve el scroll ni salta la página
  - Con JS desactivado se ven todos los paneles, uno tras otro, sin contenido perdido
  - El hash de una pestaña se puede compartir y abre esa etapa
  - Ninguna pestaña se corta en 375; el `tablist` no genera scroll horizontal en la página

built:
  branch:
  commit:
  notes:
---

# Navegación por pestañas de sección (SEK-CON-030)

El theme no tiene tabs: de los 30 bloques publicados, **ninguno** ofrece "varios paneles, uno
visible a la vez". UX lo pide como módulo nuevo para *Etapas educativas y Programas IB*, donde
las cuatro etapas comparten estructura y compiten por el mismo espacio.

Es una **variante de sección, no sticky**, con tratamiento de pestañas reales — borde inferior
en la activa, no chips. UX lo describe como la formalización del patrón de tabs que ya usa el
wireframe de *Desarrollo integral del talento* (mismos `.tab-link` / `.tab-panel`).

## Mientras tanto, en la maqueta

Va con **`sek-programas`**, que es el homólogo más cercano publicado: lista de items con icono
y su imagen. Con ese apaño se pierden dos cosas que sí pide el wireframe y que conviene tener
en cuenta al construirlo:

1. Las cards de **"La experiencia SEK"** viven dentro de la pestaña de su etapa. Sin tabs, la
   maqueta las agrupa en un carrusel único con la etapa como overtitle de cada card. Al
   construir el bloque, cada card vuelve a su panel.
2. El **deep-link por etapa** (`#infantil`, `#primaria`…) no existe todavía.

## Casuística

Con 4 pestañas y etiquetas largas ("Educación Secundaria"), en 375 no cabe ninguna barra
completa: el scroll horizontal del `tablist` es parte del diseño, no un efecto colateral.