/* B22G Allergen Filter — estilos. Neutro y oscuro por defecto; ajusta con las
   variables --algf-* para heredar el tema del cliente. */
:root {
  --algf-bg:        #14110d;
  --algf-panel:     rgba(255,255,255,.04);
  --algf-border:    rgba(255,255,255,.12);
  --algf-fg:        #f4efe6;
  --algf-muted:     rgba(244,239,230,.60);
  --algf-accent:    #E2A03F;   /* dorado B22G por defecto */
  --algf-off-bg:    rgba(226,160,63,.14);
  --algf-radius:    14px;
}

/* clave del filtro: gana a cualquier otro toggler de visibilidad (categoría/dieta) */
.alg-x { display: none !important; }
.alg-section-empty { display: none !important; }

.algf {
  margin: 0 auto 1.4rem;
  max-width: 1180px;
  border: 1px solid var(--algf-border);
  border-radius: var(--algf-radius);
  background: var(--algf-panel);
  color: var(--algf-fg);
  overflow: hidden;
}

.algf__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 1rem 1.15rem;
  background: none; border: 0; cursor: pointer; color: inherit;
  font: inherit; text-align: left;
}
.algf__title { font-size: 1.15rem; font-weight: 600; letter-spacing: .01em; }
.algf__toggle { display: inline-flex; align-items: center; gap: .45rem;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--algf-muted); }
.algf__caret { transition: transform .25s ease; display: inline-block; }
.algf.is-collapsed .algf__caret { transform: rotate(-90deg); }

.algf__body {
  padding: 0 1.15rem 1.15rem;
  transition: max-height .3s ease, opacity .25s ease;
}
.algf.is-collapsed .algf__body { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; }

.algf__hint { margin: 0 0 .85rem; font-size: .9rem; color: var(--algf-muted); }

.algf__chips { display: flex; flex-wrap: wrap; gap: .55rem; }

.algf__chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .85rem .5rem .55rem;
  border: 1px solid var(--algf-border); border-radius: 999px;
  background: transparent; color: var(--algf-fg);
  font: inherit; font-size: .92rem; font-weight: 500; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, opacity .18s ease, transform .06s ease;
}
.algf__chip:hover { border-color: var(--algf-accent); }
.algf__chip:active { transform: scale(.97); }
.algf__chip:focus-visible { outline: 2px solid var(--algf-accent); outline-offset: 2px; }

.algf__ic {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 22px; padding: 0 .35rem;
  border-radius: 6px; font-size: .64rem; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: var(--c, var(--algf-accent));
}
.algf__lb { line-height: 1; }

/* estado excluido (el usuario evita este alérgeno) */
.algf__chip[aria-pressed="true"] {
  background: var(--algf-off-bg);
  border-color: var(--algf-accent);
  opacity: .82;
}
.algf__chip[aria-pressed="true"] .algf__lb { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.algf__chip[aria-pressed="true"] .algf__ic { filter: grayscale(.35); }

.algf__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--algf-border);
}
.algf__count { font-size: .85rem; color: var(--algf-muted); }
.algf__reset {
  background: none; border: 0; padding: .3rem .1rem; cursor: pointer;
  color: var(--algf-accent); font: inherit; font-size: .85rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.algf__reset[hidden] { display: none; }

.algf-empty {
  margin: 2.5rem auto; max-width: 640px; text-align: center;
  color: var(--algf-muted); font-size: 1rem;
}
.algf-empty[hidden] { display: none; }

@media (max-width: 640px) {
  .algf__head { padding: .85rem 1rem; }
  .algf__title { font-size: 1.02rem; }
  .algf__chip { font-size: .86rem; }
}

@media (prefers-reduced-motion: reduce) {
  .algf__caret, .algf__body, .algf__chip { transition: none; }
}