/* ==========================================================================
   Pestañas y filtros — segmentos; el activo toma el acento
   ========================================================================== */

html[data-theme] .page-layout :is(.filter-btn, .gt-tab, .cat-tab, .stat-chip, .harvest-view-tab) {
  border-radius: var(--r-ctl) !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  font-size: .86rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: all .25s var(--ease) !important;
}

html[data-theme] .page-layout :is(.filter-btn, .gt-tab, .cat-tab, .stat-chip, .harvest-view-tab):not(.active) {
  background: var(--c-glass) !important;
  border: 1px solid var(--c-line) !important;
  color: var(--c-text-2) !important;
}
html[data-theme] .page-layout :is(.filter-btn, .gt-tab, .cat-tab, .stat-chip, .harvest-view-tab):not(.active):hover {
  border-color: var(--c-line-strong) !important;
  color: var(--c-text) !important;
}

html[data-theme] .page-layout :is(.filter-btn, .gt-tab, .cat-tab, .stat-chip, .harvest-view-tab).active,
html[data-theme] .page-layout .archi-header-action-current {
  background: var(--c-accent-soft) !important;
  border: 1px solid var(--c-line-accent) !important;
  color: var(--c-accent-ink) !important;
  box-shadow: none !important;
}

/* Contadores dentro de una pestaña */
html[data-theme] .harvest-view-count {
  background: var(--c-inset-2) !important;
  border: 0 !important;
  color: var(--c-text-2) !important;
}
/* Subtítulo de las pestañas de Intercambios ("Ver quién lo ofrece") */
html[data-theme] .gt-tab small {
  background: transparent !important;
  border: 0 !important;
  color: var(--c-text-3) !important;
  font-weight: 500 !important;
}

/* --------------------------------------------------------------------------
   Almas de la Cosecha eterna separadas por tipo: Archimonstruos / Jefes de mazmorra
   (pestañas del catálogo, grupos de las listas del jugador y de los buscadores)
   -------------------------------------------------------------------------- */
.archi-type-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.archi-type-tab { display: inline-flex; align-items: center; gap: .45rem; }
.archi-type-count {
  display: inline-block;
  min-width: 1.6em;
  padding: .05rem .45rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 600;
  text-align: center;
  background: var(--c-inset-2);
  color: var(--c-text-2);
}
.archi-type-tab.active .archi-type-count { background: var(--c-accent-soft); color: var(--c-accent-ink); }

/* Encabezado de un grupo dentro de una rejilla (ocupa toda la fila) o de una lista */
.archi-group-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: .55rem 0 .35rem;
  font-family: var(--font-ui);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-text-2);
}
.archi-group-title:first-child { margin-top: 0; }
.archi-group-title small { font-size: .74rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--c-text-3); }

/* Encabezado de grupo en los desplegables de búsqueda (se queda arriba al hacer scroll) */
.archi-drop-group {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: .3rem .6rem;
  font-family: var(--font-ui);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text-3);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
}

/* Etapa de la Cosecha junto al nombre */
.archi-stage-tag { font-size: .7rem; font-weight: 500; color: var(--c-text-3); white-space: nowrap; }

/* Bloque plegado con las almas que no cuentan para la Cosecha eterna */
.archi-otros { margin-top: .6rem; border: 1px dashed var(--c-line-strong); border-radius: var(--r-inner); padding: .35rem .55rem; }
.archi-otros > summary { cursor: pointer; padding: .3rem 0; font-size: .82rem; font-weight: 600; color: var(--c-text-2); list-style-position: inside; }
.archi-otros > summary small { font-weight: 500; color: var(--c-text-3); }
.archi-otros[open] > summary { margin-bottom: .35rem; }
.archi-otros p { margin: 0 0 .45rem; font-size: .78rem; color: var(--c-text-3); }