/* Barra de solapas — invariantes de la §3.1 (piso de viewport 1024x600) y el
   menú de desborde de la §4.3.

   Sólo alcanza a las barras que `module-tabs.js` marcó con `data-qbai-tabs`:
   una hoja compartida que pisara `.tabs` a secas le cambiaría el aspecto a
   cinco vocabularios distintos de solapas sin que nadie lo pida. Acá no hay
   look: el look sigue siendo el de cada módulo, y el botón de desborde hereda
   las clases de las propias solapas para que se vea como una de ellas. Lo
   único que esta hoja garantiza es el comportamiento que el piso exige —una
   línea, sin encoger, sin partir palabras— más la caja del menú. */

[data-qbai-tabs] {
  flex-wrap: nowrap;
}

/* La causa del bug de Stock (2026-09-23): sin `nowrap` + `flex: 0 0 auto`, y
   con un `word-break: break-word` heredado del `body`, flex encoge la solapa
   por debajo de su palabra y «Movimientos» se lee «Movimient / os». */
[data-qbai-tabs] > button,
[data-qbai-tabs] > [role="tab"] {
  flex: 0 0 auto;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

[data-qbai-tabs] > .qbai-tab-folded {
  display: none !important;
}

/* El disparador va siempre último en la barra, incluso cuando la solapa
   activa tuvo que adelantarse para no quedar plegada. */
[data-qbai-tabs] > .qbai-tabs-more {
  order: 9999;
}

.qbai-tabs-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* El `display` de arriba le gana a la regla `[hidden] { display: none }` del
   navegador: sin esto, el disparador se veía en las barras donde no hace
   falta —Compras, con dos solapas que entran de sobra— aunque el JS lo diera
   por escondido. */
.qbai-tabs-more[hidden] {
  display: none;
}

/* `stroke-width` no es 2: a 14px de caja, el grosor visible de 1.35px que el
   catálogo mantiene en todos los íconos (§4.2) sale de 32.4/14 = 2.31, y hay un
   test que lo verifica (`test_every_icon_renders_the_same_visible_stroke`). */
.qbai-tabs-more svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.31;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .15s ease;
}

.qbai-tabs-more[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Caja del menú. `position: fixed` y colgado del `<dialog>` más cercano (o del
   `body`): la barra de solapas suele vivir dentro de un contenedor con
   `overflow` propio, que recortaría un menú posicionado en su flujo. */
.qbai-tabs-menu {
  position: fixed;
  z-index: 60;
  min-width: 190px;
  max-height: 60vh;
  margin: 0;
  padding: 5px;
  overflow-y: auto;
  border: 1px solid var(--stroke, var(--line, #d6d6d6));
  border-radius: 10px;
  background: var(--panel, #fff);
  box-shadow: 0 8px 24px rgba(24, 39, 75, .07);
}

.qbai-tabs-menu[hidden] {
  display: none;
}

.qbai-tabs-menu button {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text, #292b27);
  font: 600 .78rem "Space Grotesk", sans-serif;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.qbai-tabs-menu button:hover {
  background: #f0f0f0;
}

body[data-theme="dark"] .qbai-tabs-menu button:hover {
  background: var(--surface-muted, #27282c);
}

.qbai-tabs-menu button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand, #087f5b) 24%, transparent);
  outline-offset: -3px;
}

.qbai-tabs-menu button[aria-current="true"] {
  color: var(--brand, #087f5b);
  font-weight: 700;
}