/* ═══════════════════════════════════════
   ▓ COMPONENTE · Banda de grupo — gemelo vanilla ▓
   v1.0 · 2026-08-25. Ficha: `design-system/COMPONENTE_BANDA_GRUPO.md`
   Kit: `catalogo-cd/components/BandaGrupo.jsx`

   La franja a sangre que dice DE QUÉ ES lo que viene debajo. Es la de
   «Hoy / Ayer / Esta semana» del cajón de notificaciones, la de
   «Cuenta / Acceso / Aplicación» de ajustes y la de «Detalle» del cajón de
   Facturación. Cambio de PLANO, no una línea suelta: el fondo hundido más dos
   filetes de un pelo es lo que convierte lo de abajo en un grupo.

   ⛔ DE DÓNDE VIENE Y POR QUÉ SE MUDA AQUÍ (2026-08-25 · cosecha aprobada por
   Ricardo, decisión 2 de `plans/decisiones/_decision_recomendaciones_aplicadas_2026-08-25.html`).
   Vivía dentro de `patrones/cajon-lateral/` con la nota «no merece ficha propia:
   sale con tokens». Era cierto mientras su único anfitrión fuera ESE marco. Dejó
   de serlo el día que el cajón de Facturación —que se monta en el OTRO marco, el
   `DRAWER_TOPBAR`— necesitó la misma franja: para montarla habría tenido que
   cargar la hoja entera del cajón lateral, así que la volvió a dibujar con su
   propio nombre (`.fxc-banda`). *Una pieza que sólo se puede montar cargando el
   marco de otro no es una pieza: es una parte de ese marco.*

   ⛔ CERO CAMBIO VISUAL EN NINGUNA PANTALLA. Ni un valor se mueve: las tres
   bandas del cajón lateral quedan idénticas y la de Facturación también. Lo
   único que cambia es de quién es la regla.

   REQUISITOS DEL ANFITRIÓN:
     1. Los tokens del canon (`colors_and_type.css`).
     2. `box-sizing: border-box`.
     3. Si se usa `data-uso="detalle"`, que el contenedor tenga `--space-5` (20px)
        de relleno lateral: el margen negativo lo compensa para ir a sangre.
   ═══════════════════════════════════════ */

/* ── LA BANDA · uso por defecto = LISTA ──────────────────────────────────────
   Encabeza un grupo de filas dentro de una lista que ya va a sangre, así que la
   banda NO lleva margen negativo: el anfitrión no tiene relleno que compensar.
   El rótulo es un EYEBROW —11 / 600 / versalitas / --fg3— porque en una lista
   compite con los títulos de las filas, que son lo que se lee. */
.exds-cajon-banda {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  /* ⭐ EL CANALÓN ES VARIABLE DESDE EL 2026-08-26, y el default no se mueve un píxel.
     La franja va A SANGRE, así que su relleno lateral tiene que ser el del anfitrión
     donde vive: 20 en el cajón lateral y en Facturación (que no ponen la variable y
     siguen exactamente igual), 16 en el panel de Registro de actividad, cuyas filas
     van a 16 y con 20 dejaban un escalón visible entre la banda y lo que encabeza.
     *El canalón de una franja a sangre no es un número de la franja: es el del
     anfitrión* — el mismo argumento que ya sostiene el `line-height: inherit` de la
     variante de detalle. Se dice con variable y no con un override de `padding` desde
     fuera porque un override es una petición de prop que nadie escribió. */
  padding: var(--space-1-5, 6px) var(--exds-banda-gutter, var(--space-5, 20px));
  background: var(--color-bg-subtle, #F2F4F6);
  border-top: 1px solid var(--color-border-subtle, #E5E7EB);
  border-bottom: 1px solid var(--color-border-subtle, #E5E7EB);
  font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  font-weight: 600;
  font-size: var(--fs-eyebrow, 11px);
  letter-spacing: var(--tracking-eyebrow, 0.12em);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--fg3, #5C6B7A);
}

/* La marca del otro extremo (el "Estás aquí" de Ayuda) NO es una pastilla: dice
   lo mismo, no mete un cuarto peso y no inventa un color. */
.exds-cajon-banda-marca { color: var(--fg4, #B8BDC7); white-space: nowrap; }

/* ── USO = DETALLE · la banda dentro de un CAJÓN DE DETALLE ──────────────────
   El otro caso que ya existía en producción, con su decisión escrita. Cambia
   tres cosas, y las tres tienen fuente:

   1. EL RÓTULO SUBE A 14 / 600 / --fg1, el mismo que el de la banda del asunto
      (`.exds-res-rot` de `CajaResolucion`). Aquí la banda no encabeza filas
      cortas: encabeza una zona, y convive con OTRA banda a un clic de distancia
      que tiene que sostener un asunto —«Cancelación sin factura sustituta»—, y
      un asunto no se lee en versalitas. *Dos bandas que hacen lo mismo y se ven
      distinto obligan a aprender que son lo mismo, en vez de verlo.*
      Se unifica hacia ARRIBA, no hacia abajo, porque al revés no funcionaba.
      `DECISION-FUENTE: Ricardo, 2026-08-21` (homologación del cajón de Facturación).

   2. MÁS AIRE VERTICAL — 12 px en vez de 6. Con el rótulo a 14 px, seis de aire
      dejan la franja apretada contra sus dos filetes.

   3. VA A SANGRE CONTRA UN ANFITRIÓN CON RELLENO. El margen negativo es
      exactamente el gutter del cajón (`--space-5`), y los 18 px de arriba la
      separan de lo que la precede — un espacio que COLAPSA con el margen
      inferior del bloque anterior, que es por lo que el aviso del 69-B no
      necesitó regla propia.

   ⛔ POR QUÉ ES UNA VARIANTE Y NO DOS PIEZAS: es la misma franja, el mismo
   mecanismo y el mismo par de filetes. Lo que cambia es el peso del rótulo y el
   aire, que es lo que cambia entre encabezar FILAS y encabezar una ZONA.

   ⚠ PENDIENTE DE RICARDO: si los dos rótulos deben converger en uno solo. Hoy el
   sistema tiene los dos VIVOS y los dos con argumento; esta variante los declara
   en vez de dejar uno sin nombre. Ver
   `plans/decisiones/_decision_banda_rotulo_2026-08-25.html`. */
.exds-cajon-banda[data-uso="detalle"] {
  margin: var(--space-4-5, 18px) calc(-1 * var(--space-5, 20px)) 0;
  padding: var(--space-3, 12px) var(--space-5, 20px);
  font-size: var(--fs-body, 14px);
  letter-spacing: normal;
  text-transform: none;
  color: var(--fg1, #0F1419);
  /* ⛔ `line-height: inherit` Y NO UN NÚMERO, y lo cazó la hoja de antes/después midiendo
     estilos computados (2026-08-25). La regla original era un `<div>` de BLOQUE sin
     tipografía propia: su alto lo ponía el interlineado que HEREDABA del anfitrión —1.5 en
     el backoffice, o sea 21 px de caja de línea—. Al volverla `flex` con la abreviatura
     `font:`, esa abreviatura **reinicia el interlineado a `normal`** y la franja adelgazaba
     2,5 px. *Un cambio de propiedad que nadie declaró: la abreviatura lo hizo por su cuenta.*
     Con `inherit`, la banda vuelve a seguir el ritmo de su anfitrión, que es lo que hacía —
     y lo que debe hacer: **el alto de una franja de grupo no es un número de la franja, es
     el renglón de la pantalla donde vive.** Congelarlo en 1.5 la rompería en cualquier
     anfitrión con otro ritmo. */
  line-height: inherit;
}