/*
 * Barra de navegación inferior del facilitador (js/components/tab-bar.js), como la de Facebook:
 * cápsula de vidrio flotante, centrada, con Inicio, Buscar y el avatar. El botón activo lleva una
 * píldora de fondo; Inicio activo pasa a casa rellena y Buscar, a trazo grueso. Colores en
 * tokens.css (--tab-bar-*, dentro de .brand-tokens).
 */
:root {
  --tab-bar-h: 64px;
  --tab-bar-gap: 12px;
  /* Lo que ocupa la barra desde el borde inferior: las vistas lo dejan libre al final. */
  --tab-bar-reserve: calc(var(--tab-bar-h) + 2 * var(--tab-bar-gap) + env(safe-area-inset-bottom));
}

.tab-bar {
  position: fixed;
  right: 0;
  bottom: max(var(--tab-bar-gap), env(safe-area-inset-bottom));
  left: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding-inline: max(var(--tab-bar-gap), env(safe-area-inset-left)) max(var(--tab-bar-gap), env(safe-area-inset-right));
  pointer-events: none;
  /* Queda quieta mientras las vistas se deslizan (transitions.css). */
  view-transition-name: tab-bar;
}

.tab-bar[hidden],
/* Debajo de la pantalla de bloqueo (lock.js) y con el teclado abierto (Buscar, Modificar cuenta)
 * no se muestra: no tapa el campo ni queda en el orden del foco. */
.is-locked .tab-bar,
.keyboard-open .tab-bar {
  display: none;
}

.tab-bar__capsule {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1);
  width: 100%;
  max-width: 420px;
  height: var(--tab-bar-h);
  padding: 6px;
  border: 1px solid var(--tab-bar-border);
  border-radius: var(--radius-pill);
  background: var(--tab-bar-bg);
  box-shadow: var(--tab-bar-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  pointer-events: auto;
}

.tab-bar__item {
  display: grid;
  place-items: center;
  min-width: var(--tap-min);
  border-radius: var(--radius-pill);
  color: var(--tab-bar-icon);
  text-decoration: none;
  transition: background-color 160ms var(--vt-ease), color 160ms var(--vt-ease);
  -webkit-tap-highlight-color: transparent;
}

.tab-bar__item[aria-current="page"] {
  background: var(--tab-bar-active-bg);
  color: var(--brand-text);
}

.tab-bar__item:focus-visible {
  outline: 2px solid var(--brand-sky);
  outline-offset: -2px;
}

@media (hover: hover) {
  .tab-bar__item:hover {
    color: var(--brand-text);
  }
}

.tab-bar__icon {
  width: 28px;
  height: 28px;
  stroke-width: 1.75;
  transition: transform 120ms var(--vt-ease);
}

.tab-bar__item:active .tab-bar__icon,
.tab-bar__item:active .avatar {
  transform: scale(0.92);
}

/* Inicio activo: casa rellena con la puerta recortada. */
.tab-bar__item--home[aria-current="page"] .tab-bar__icon path:first-child {
  fill: currentColor;
}

.tab-bar__item--home[aria-current="page"] .tab-bar__icon path:last-child {
  stroke: var(--tab-bar-cutout);
  stroke-width: 2.25;
}

.tab-bar__item--search[aria-current="page"] .tab-bar__icon {
  stroke-width: 2.5;
}

/* Perfil: el avatar del facilitador (círculo gris con persona). */
.tab-bar .avatar {
  width: 34px;
  height: 34px;
  transition: transform 120ms var(--vt-ease);
}

.tab-bar .avatar__icon {
  width: 18px;
  height: 18px;
}

/* Las vistas del facilitador dejan libre el alto de la barra al final. Las que reservan la franja
 * de la cinta (inicio, detalle, Consulta) ya tienen ese espacio. */
.has-tab-bar .test-detail__column:not(:has(.test-detail__ribbon-space)) {
  padding-bottom: var(--tab-bar-reserve);
}

.has-tab-bar {
  scroll-padding-bottom: var(--tab-bar-reserve);
}

@media (prefers-reduced-motion: reduce) {
  .tab-bar__item,
  .tab-bar__icon,
  .tab-bar .avatar {
    transition: none;
  }
}