/* =========================================================
   AXIOMA TAB SYSTEM — Alternativa B: "Acento lateral"
   Cada lengüeta es un bloque plano sobre el AppBar. La activa se marca con un
   filete vertical en su borde izquierdo (inset box-shadow con el primario) más
   un tinte tenue del mismo color y el título en el tono principal; la inactiva
   es solo tinta gris. Sin riel, sin separadores y sin filetes inferiores: el
   estado lo dan el acento lateral y el relleno tenue.
   ========================================================= */

/* Centra las píldoras en la fila: la regla de layout las alineaba abajo; este
   archivo carga después y gana por orden. */
.appbar-bar-top .appbar-tabs-row {
  align-items: center;
  gap: 4px;
}

.appbar-tabs-row {
  display: flex;
  align-items: center;
  height: var(--ax-appbar-tabs-height);
  /* Sin riel: las lengüetas son píldoras sueltas sobre el AppBar. */
  overflow: hidden;
  position: relative;
  gap: 4px;
}

.appbar-tabs-scroll {
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  flex: 1;
  height: 100%;
  gap: 3px;
}

.appbar-tabs-scroll::-webkit-scrollbar {
  display: none;
}

/* Sección de tabs de documentos abiertos (fila 2 del AppBar): usa la misma lengüeta que la franja
   del workspace, pero como bloque aparte. Se desplaza en horizontal con CSS, sin el control de
   overflow por JS de la franja principal. */
.appbar-subtabs {
  display: flex;
  align-items: center;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  height: 100%;
}

.appbar-subtabs::-webkit-scrollbar {
  display: none;
}

.appbar-tab {
  --appbar-tab-close-size: 18px;
  --appbar-tab-gap: 6px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--appbar-tab-gap);
  height: var(--ax-tab-height);
  padding: 0 6px 0 9px;
  border-radius: var(--ax-radius-md);
  color: var(--ax-text-muted);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  background: transparent;
  transition: background var(--ax-transition-fast, 150ms ease),
              color var(--ax-transition-fast, 150ms ease);
}

.appbar-tab:hover {
  background: color-mix(in srgb, var(--ax-text-primary) 6%, transparent);
}

/* El foco (teclado) de los tabs del AppBar no dibuja el anillo de marca del sistema:
   el foco no debe bordear el título de la pestaña con el color primario. Los tabs
   arrastrables son enfocables, así que sin esto el outline global los rodea. */
.appbar-tab:focus,
.appbar-tab:focus-visible {
  outline: none;
}

.appbar-tab-active {
  /* Alternativa B · "Acento lateral": la activa lleva un tinte tenue del primario y un
     filete vertical a su DERECHA (el desplazamiento negativo del inset lo dibuja sobre el
     borde derecho); sin contorno ni subrayado. */
  background: color-mix(in srgb, var(--ax-primary) 8%, transparent);
  box-shadow: inset -3px 0 0 0 var(--ax-primary);
  border: none;
  border-radius: var(--ax-radius-md);
}

/* La lengüeta activa conserva su relleno y su acento al pasar el cursor: el hover no debe
   diluir el estado activo. */
.appbar-tab-active:hover {
  background: color-mix(in srgb, var(--ax-primary) 8%, transparent);
}

/* Pestaña PADRE de la pestaña activa: línea inferior sutil que hace visible la jerarquía
   (el documento abierto cuelga de este listado/padre). Se dibuja con un ::after para no
   alterar el alto de la lengüeta. */
.appbar-tab-parent::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ax-primary) 30%, transparent);
  pointer-events: none;
}

/* La lengüeta ACTIVA —y por tanto la que tiene el foco tras el clic— NO lleva subrayado ni riel:
   el estado activo lo dan el filete vertical izquierdo (inset box-shadow) y el tinte tenue. */

/* Título */
.appbar-tab-title {
  /* --ax-font-size-lg (14px): un punto por debajo del título del AppBar, para que la
     lengüeta no compita con la jerarquía de la barra. Tokenizado: si la escala cambia,
     cambia aquí. */
  font-size: var(--ax-font-size-lg);
  /* Inactiva: trazo medio (450) con el gris del token --ax-tab-inactive-color.
     La activa sube a negro y semibold (ver abajo). */
  font-weight: 450;
  color: var(--ax-tab-inactive-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
}

.appbar-tab-active .appbar-tab-title {
  /* El título activo sube al tono principal del texto; el acento lateral y el tinte
     son la señal de estado. El peso queda en medium (500): el estado ya lo comunican el
     filete y el tinte, así que no necesita engrosar tanto como antes. */
  color: var(--ax-text-primary);
  font-weight: 500;
}

.appbar-tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--appbar-tab-close-size);
  height: var(--appbar-tab-close-size);
  border-radius: var(--ax-radius-sm);
  font-size: 11px;
  line-height: 1;
  color: var(--ax-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  opacity: 0;
  transition: background var(--ax-transition-fast, 150ms ease),
              color var(--ax-transition-fast, 150ms ease),
              opacity var(--ax-transition-fast, 150ms ease);
}

/* El cierre solo se muestra al pasar el cursor por la pestaña o al recibir el foco
   (teclado), salvo en la pestaña ACTIVA: su ✕ queda siempre visible porque es la que se
   está trabajando y la que el usuario cierra. Sigue ocupando su espacio, así el ancho del
   tab no cambia. */
.appbar-tab:hover .appbar-tab-close,
.appbar-tab:focus-within .appbar-tab-close,
.appbar-tab-active .appbar-tab-close {
  opacity: 1;
}

/* En dispositivos sin hover (táctil) el cierre se mantiene visible para no perderlo. */
@media (hover: none) {
  .appbar-tab-close {
    opacity: 1;
  }
}

.appbar-tab-close:hover {
  background: color-mix(in srgb, var(--ax-text-primary) 12%, transparent);
  color: var(--ax-text-primary);
}

.appbar-tab-active .appbar-tab-close:hover {
  /* El relleno de la lengüeta activa ya es --ax-primary-50; el hover del cierre sube
     un paso de la escala para seguir siendo perceptible. */
  background: var(--ax-primary-100);
  color: var(--ax-primary);
}

/* Alternativa B: sin separadores entre pestañas. El acento lateral y el tinte tenue bastan
   como señal de estado, así que el hairline que separaba las lengüetas se retira. */
.appbar-tab-separator {
  display: none;
}

/* ---- Reordenación por arrastre de pestañas ---- */

/* Solo las cerrables se arrastran (la fija de Inicio encabeza siempre la fila). */
.appbar-tab[draggable="true"] {
  cursor: grab;
}

.appbar-tab-dragging {
  opacity: 0.4;
  cursor: grabbing;
}

/* Marca del destino del arrastre: barra interior en el borde izquierdo del tab. */
.appbar-tab-drop-target {
  box-shadow: inset 2px 0 0 0 var(--ax-primary);
}

/* Menú de overflow de pestañas (popover de MudMenu: se renderiza a nivel de documento,
   así que escapa del overflow:hidden de .appbar-tabs-row). */
.appbar-tab-overflow-menu {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.appbar-tab-overflow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--ax-radius-sm);
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--ax-text-muted);
  font-size: 16px;
}

.appbar-tab-overflow-btn:hover {
  background: color-mix(in srgb, var(--ax-text-primary) 6%, transparent);
}

.tab-pane {
  display: none;
  height: 100%;
}

.tab-pane-active {
  display: block;
}

.tab-pane-hidden {
  display: none;
}

.tab-overflow-popover {
  min-width: 240px;
  max-height: 60vh;
  overflow-y: auto;
}

.tab-overflow-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.tab-overflow-item-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

.tab-overflow-dirty {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ax-tab-dirty-color);
  flex-shrink: 0;
  margin-left: auto;
}