/* Pestañas en píldora — modules/tabs.js
   <div data-tabs>
     <div class="tabs__bar [tabs__bar--dark]"><div class="tabs__list" role="tablist">
       <button class="tabs__tab" role="tab" data-tab="a" aria-selected="true">…</button> …
     </div></div>
     <div class="tabs__panel" data-tab-panel="a">…</div> …
   </div> */
.tabs__bar {
  display: flex;
  justify-content: center;
  padding: var(--sp-3) var(--gutter);
}

.tabs__bar--dark {
  background: var(--navy-700);
}

.tabs__list {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem;
  padding: .35rem;
  border-radius: var(--radius-pill);
  background: var(--c-bg);
  box-shadow: 0 .5rem 2rem rgb(15 18 64 / .08);
}

.tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .8em 1.4em;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.tabs__tab svg {
  width: 1.2em;
  height: 1.2em;
}

.tabs__tab:hover {
  background: var(--c-bg-soft);
}

.tabs__tab[aria-selected="true"] {
  background: var(--c-bg-deep);
  color: var(--c-text-inv);
}

.tabs__panel[hidden] {
  display: none;
}

/* Variante «bare»: pestañas .btn-chip (icono + texto que sube) sobre fondo oscuro, dentro de la cabecera.
   Marcado: <button class="tabs__tab btn-chip" role="tab" data-tab="…"><svg/><span class="btn-chip__text" data-text="…"><span>…</span></span></button> */
.tabs__list--bare {
  gap: var(--sp-1);
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.tabs__list--bare .tabs__tab {
  gap: .5em;
  padding: .55em .9em;
  border-radius: var(--radius-pill);
  color: rgb(255 255 255 / .7);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.tabs__list--bare .tabs__tab svg {
  width: 1.15em;
  height: 1.15em;
  opacity: .8;
}

.tabs__list--bare .tabs__tab:hover {
  background: rgb(255 255 255 / .08);
  color: var(--c-text-inv);
}

.tabs__list--bare .tabs__tab[aria-selected="true"] {
  background: rgb(255 255 255 / .14);
  color: var(--c-text-inv);
}

.tabs__list--bare .tabs__tab[aria-selected="true"] svg {
  opacity: 1;
  color: var(--c-accent);
}

/* Variante pequeña (sub-pestañas, p. ej. años del dossier) */
.tabs__list--small {
  box-shadow: none;
  background: var(--c-bg-soft);
}

.tabs__list--small .tabs__tab {
  padding: .55em 1.1em;
}

@media (max-width: 40rem) {
  .tabs__list {
    border-radius: var(--radius-md);
  }
}