/* ═══════════════════════════════════════
   ▓ COMPONENTE · Tabs — gemelo vanilla ▓
   v1.0 · 2026-08-23. Ficha: design-system/COMPONENTE_TABS.md
   Kit: catalogo-cd/components/Tabs.jsx

   LAS PESTAÑAS QUE ORDENAN EL CONTENIDO DE UN SUBMÓDULO, y son la MÁXIMA GRANULARIDAD
   DE ORDEN DEL SISTEMA (Ricardo, 2026-07-23): sidebar → topbar → TABS → y de ahí
   para abajo ya no es navegación, es layout de la pantalla.

   ⛔ EL INDICADOR ES UNA BARRA DE 2px DEBAJO DE LA ACTIVA. Nunca una caja, nunca una
   píldora — eso es un segmentado, que es otra pieza y significa otra cosa (elegir un
   modo, no cambiar de sección).

   ⛔ Y ES UN SOLO INDICADOR QUE SE DESLIZA, no un ::after por pestaña (Ricardo,
   2026-07-24). La diferencia no es estética: un ::after por pestaña SALTA —aparece
   apagándose aquí y encendiéndose allá— y el ojo pierde la relación entre las dos.
   Uno que viaja la conserva. Se mide la pestaña activa y el indicador va a su sitio;
   por eso esta pieza NECESITA su tabs.js.

   REQUISITOS DEL ANFITRIÓN:
     1. Los tokens del canon (colors_and_type.css).
     2. box-sizing: border-box.
     3. tabs.js — sin él el indicador no se coloca (no hay CSS que pueda medir un hijo).
   ═══════════════════════════════════════ */

/* ── LA BARRA ────────────────────────────────────────────────────────────────
   GATE-ALLOW: box-shadow escrita a mano — es la elevación SUTIL de una barra pegajosa
   (despegarla del contenido que corre por debajo), no la caja de una tarjeta; la ficha
   la conserva tal cual desde el handoff (COMPONENTE_SHELL.md § invención 3). */
.exds-tabs {
  position: relative;
  z-index: 6;
  background: var(--color-surface, #FFFFFF);
  border-bottom: 1px solid var(--color-border-subtle, #E5E7EB);
  box-shadow: 0 6px 14px -10px rgba(15,20,25,.18);
  flex-shrink: 0;
  display: flex;
  gap: 4px;
  padding: 0 32px;
}

/* Pegada arriba de su contenedor con desplazamiento. Es el default: unas tabs que se
   van al hacer scroll dejan de ser navegación y pasan a ser un encabezado. */
.exds-tabs[data-sticky="true"] { position: sticky; top: 0; }

/* ── LA PESTAÑA ──────────────────────────────────────────────────────────────
   El margen derecho de 22 no es el gap: el gap separa las CAJAS y el margen separa
   los TEXTOS. La caja de una pestaña llega hasta donde llega su etiqueta —el
   indicador mide eso— así que la respiración va por dentro. */
.exds-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px 4px;
  margin-right: 22px;
  border: none;
  background: transparent;
  cursor: pointer;
  font: 500 var(--fs-body, 14px) var(--font-sans);
  color: var(--fg3);
  transition: color var(--motion-fast) var(--ease-default);
}
.exds-tab svg, .exds-tab .exds-tab-ico { color: var(--fg4); display: inline-flex; flex-shrink: 0; }
.exds-tab:hover { color: var(--fg2); }
.exds-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-border-focus);
  border-radius: var(--radius-sm);
}
/* El anillo de foco sobre superficie oscura · el token neutro da 3,92:1 sobre el suelo
   #0F1419 y ya despejaria el 3:1 de un control, pero al lado de esta pestaña vive un
   boton del catalogo que desde el 2026-08-28 lo sube a tinta blanca (18,5:1). Dos
   controles hermanos, sobre la misma barra, con anillos distintos: eso no es una
   diferencia de matiz, es que uno de los dos parece apagado.
   Lo cazo la primera adopcion real de superficie oscura: la barra publica del cotizador.
   *Un hueco del catalogo no se ve hasta que alguien monta dos piezas suyas juntas.* */
.exds-tabs[data-superficie="oscura"] .exds-tab:focus-visible {
  box-shadow: 0 0 0 2px var(--color-ink-on-dark, #FFFFFF);
}

.exds-tab.is-active { font-weight: var(--fw-semibold, 600); color: var(--fg1); }
.exds-tab.is-active svg, .exds-tab.is-active .exds-tab-ico { color: var(--fg1); }

/* ── EL CONTADOR ─────────────────────────────────────────────────────────────
   Absorbido en la pestaña el 2026-08-23 (Ricardo, 2026-08-24: «absorber en las
   pestañas que ya existen»). NO es una segunda clase de pestaña: es la misma con un
   número al lado, y sin número se pinta EXACTAMENTE igual que antes.

   ⛔ TABULAR, y aquí duele el doble: sin eso el número pasa de 12 a 11, la pestaña se
   estrecha y MUEVE EL SUBRAYADO — que además se desliza midiendo la activa, así que
   se movería solo, sin que nadie tocara nada.
   ⛔ Y alinea por BASE, no por centro: un número más pequeño centrado con su etiqueta
   se lee flotando.
   ⛔ La base se alinea SÓLO en la pestaña que lleva contador, con :has(). Cambiar
   align-items en todas movería los íconos de las que no lo llevan — un cambio de
   aspecto que nadie pidió, y que además sería decisión de diseño. */
.exds-tab:has(.exds-tab-cuenta) { align-items: baseline; }
.exds-tab:has(.exds-tab-cuenta) svg,
.exds-tab:has(.exds-tab-cuenta) .exds-tab-ico { align-self: center; }
.exds-tab-cuenta {
  font-weight: var(--fw-medium,500);
  font-size: var(--fs-eyebrow,11px);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-eyebrow,0.12em);
  color: var(--fg4);
  transition: color var(--motion-fast) var(--ease-out);
}
[aria-selected="true"] .exds-tab-cuenta { color: var(--fg2); }
@media (prefers-reduced-motion:reduce) { .exds-tab-cuenta { transition: none; } }

/* ── EL INDICADOR QUE VIAJA ──────────────────────────────────────────────────
   `left` y `width` NO están aquí a propósito: los escribe tabs.js midiendo la pestaña
   activa. Ningún CSS puede medir un hijo, así que el sitio del indicador es el único
   valor de esta pieza que no puede vivir en la hoja. */
.exds-tab-thumb {
  position: absolute;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--color-action-ink);
  transition: left var(--motion-base,250ms) var(--ease-default),
              width var(--motion-base,250ms) var(--ease-default);
}
@media (prefers-reduced-motion:reduce) { .exds-tab-thumb { transition: none; } }

/* ── LA PESTAÑA SOBRE SUPERFICIE OSCURA · LA PÍLDORA ───────────────────────────────
   DECISION-FUENTE: Ricardo, 2026-08-27 — decisión 2.2 de «LAS 19 DECISIONES DE LA
   HOMOLOGACIÓN» (ESTADO.md): «Píldora, y se escribe en el canon como el tratamiento de
   pestaña sobre superficie oscura».

   ⛔ NO SUSTITUYE A LA SUBRAYA: LA ACOMPAÑA, Y SU CONDICIÓN DE USO ES ÚNICA.
     · fondo claro  → subraya de 2px en tinta. Sigue siendo LA regla.
     · fondo oscuro → píldora. Y sólo ahí.
   La subraya del canon es tinta (--color-action-ink) y sobre negro es TINTA SOBRE TINTA:
   invisible. La pantalla no estaba mal — al canon le faltaba el caso. *Cuando el canon
   empeora la pantalla, no es que la pantalla se desvíe: es que el canon no ha visto ese suelo.*

   ⛔ Y SIGUE SIENDO UN SOLO INDICADOR QUE VIAJA (Ricardo, 2026-07-24). No se cambia el
   mecanismo, se cambia la piel del MISMO .exds-tab-thumb: de barra de 2px abajo a caja
   redonda detrás. Por eso tabs.js no cambia ni una línea — ya mide la pestaña activa.
   Un indicador por pestaña saltaría, y ese salto es justo lo que el deslizante vino a quitar.

   La condición se DECLARA en el contenedor (data-superficie="oscura"), no se adivina del
   color de fondo: ver COMPONENTE_SUPERFICIE_OSCURA.md.

   El relleno de 8px 20px sustituye al de 15px 4px porque una píldora envuelve la etiqueta y
   una subraya sólo la mide: el aire que en claro va POR FUERA (margin-right 22) aquí va POR
   DENTRO, o el fondo quedaría pegado al texto. */
.exds-tabs[data-superficie="oscura"] { background:var(--color-bg-dark, #0F1419); border-bottom:1px solid var(--color-hairline-dark, rgba(255, 255, 255, 0.08)); box-shadow:var(--shadow-none, none); gap:var(--space-0-5, 2px); }
.exds-tabs[data-superficie="oscura"] .exds-tab { padding:8px 20px; margin-right:0; border-radius:var(--radius-pill, 999px); color:var(--color-ink-on-dark-muted, #B8BDC7); z-index:1; }
.exds-tabs[data-superficie="oscura"] .exds-tab:hover, .exds-tabs[data-superficie="oscura"] .exds-tab.is-active { color:var(--color-ink-on-dark, #FFFFFF); }
.exds-tabs[data-superficie="oscura"] .exds-tab svg, .exds-tabs[data-superficie="oscura"] .exds-tab .exds-tab-ico { color:var(--color-ink-on-dark-hint, #8B92A1); }
.exds-tabs[data-superficie="oscura"] .exds-tab.is-active svg, .exds-tabs[data-superficie="oscura"] .exds-tab.is-active .exds-tab-ico { color:var(--color-ink-on-dark, #FFFFFF); }
.exds-tabs[data-superficie="oscura"] .exds-tab-cuenta { color:var(--color-ink-on-dark-hint, #8B92A1); }
.exds-tabs[data-superficie="oscura"] [aria-selected="true"] .exds-tab-cuenta { color:var(--color-ink-on-dark-muted, #B8BDC7); }
/* El alto NO se escribe: sale de arriba y abajo pegados a la barra, cuyo alto es el de la
   pestaña. Escribir 33 —el número que produccion tiene hoy— lo dejaría clavado el día que
   cambie el relleno, y nadie lo relacionaría. */
.exds-tabs[data-superficie="oscura"] .exds-tab-thumb { top:0; bottom:0; height:auto; border-radius:var(--radius-pill, 999px); background:var(--color-bg-subtle-on-dark, rgba(255, 255, 255, 0.10)); pointer-events:none; z-index:0; }