/* PURPOSE: Botones tipo pill agrupados con estado activo (single + group).
   KEY CLASSES: .toggle, .toggle-group
   DEPENDS ON: --hg-color-light-grey, --hg-color-middle-grey, --hg-color-primary, --hg-color-white, --hg-typo-font-family-primary-regular (config); --border-radius, --border-style, --border-width.
   DEMO: dist/componentes.html#toggle-group */

.toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  font-family: var(--hg-typo-font-family-primary-regular);
  font-size: 13px;
  font-weight: 500;
  color: var(--hg-color-primary);
  background: transparent;
  border: var(--border-width) var(--border-style) var(--hg-color-middle-grey);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  box-sizing: border-box;
}

.toggle:hover {
  background: var(--hg-color-light-grey);
}

.toggle.is-active,
.toggle[aria-pressed="true"] {
  background: var(--hg-color-primary);
  color: var(--hg-color-white);
  border-color: var(--hg-color-primary);
}

.toggle:disabled,
.toggle[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Group: bordes adyacentes se fusionan */
.toggle-group {
  display: inline-flex;
}

.toggle-group .toggle {
  border-radius: 0;
  margin-right: -1px;
}

.toggle-group .toggle:first-child { border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); }
.toggle-group .toggle:last-child  { border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); margin-right: 0; }

.toggle-group .toggle.is-active {
  position: relative;
  z-index: 1;
}