/* ============================================================
   components/tabs.css — pestañas de página
   Pareja del componente `tabs` de js/components.js. No tiene Blade:
   el marcado vive en la página, como en button.css.

   Sin JavaScript es un índice fijo con enlaces a secciones que se
   ven todas. Con JavaScript, el componente marca los roles ARIA y
   deja visible un panel a la vez: la página deja de medir 30
   pantallas. Las clases son las mismas en los dos casos.
   ============================================================ */

/* La barra se pega bajo la cabecera del sitio. */
.tabs__bar {
  position: sticky;
  top: var(--header-height);
  z-index: 30;
  background: var(--color-bg-glass);
  -webkit-backdrop-filter: saturate(1.4) blur(8px); /* Safari antes de la 18 */
  backdrop-filter: saturate(1.4) blur(8px);
  border-block: 1px solid var(--color-border);
}

.tabs__list {
  display: flex;
  gap: clamp(1rem, 2.6vw, 2.2rem);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.tabs__list::-webkit-scrollbar { display: none; }

/* En el teléfono las pestañas no caben: se desplazan dentro de la barra
   (nunca la página) y el borde derecho se desvanece para avisarlo. */
@media (max-width: 760px) {
  .tabs__list {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
    padding-right: 2.5rem;
  }
}

.tabs__tab {
  flex: none;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: 1rem 0 .85rem;
  border-bottom: 2px solid transparent;
  font-size: .92rem;
  font-weight: 700;
  color: var(--color-text-muted);
  white-space: nowrap;
  text-decoration: none;
}
.tabs__tab:hover { color: var(--color-ink); text-decoration: none; }
.tabs__tab[aria-selected="true"] {
  color: var(--color-ink);
  border-bottom-color: var(--color-brand-green);
}

/* Cuántas entradas trae la pestaña (p. ej. las preguntas). */
.tabs__count {
  font-family: var(--font-label);
  font-size: .7rem;
  font-weight: 500;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: .05rem .45rem;
}

/* `hidden` lo pone el componente. Esta regla le gana a cualquier
   `display` que una página le dé a sus paneles. */
.tabs__panel[hidden] { display: none; }
.tabs__panel:focus-visible { outline-offset: -2px; }

/* Al imprimir sale todo, sin la barra. */
@media print {
  .tabs__bar { display: none; }
  .tabs__panel[hidden] { display: block !important; }
}