/* Acordeon de Secrets/Variables: cada grupo (ambiente) es una seccion que
   envuelve sus subgrupos (FRONT/BACK), colapsable con click en el header. */

.flex-list.secret-accordion {
  display: block;
}

.secret-group {
  border: 1px solid var(--color-secondary, #444c56);
  border-radius: 6px;
  margin-bottom: 14px;
  overflow: hidden;
  background: var(--color-box-body, rgba(255, 255, 255, 0.015));
}

.secret-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-weight: bold;
  font-size: 0.95em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  background: var(--color-secondary-bg, rgba(255, 255, 255, 0.05));
  user-select: none;
}

.secret-group-header:hover {
  background: var(--color-hover, rgba(255, 255, 255, 0.08));
}

.secret-group-body {
  padding: 12px 14px 14px;
}

.secret-group.is-collapsed > .secret-group-body {
  display: none;
}

.secret-subgroup {
  border: 1px solid var(--color-secondary, #444c56);
  border-radius: 5px;
  margin-bottom: 10px;
  overflow: hidden;
  background: var(--color-body, rgba(255, 255, 255, 0.01));
}

.secret-subgroup:last-child {
  margin-bottom: 0;
}

.secret-subgroup-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-weight: 600;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  background: var(--color-secondary-bg, rgba(255, 255, 255, 0.03));
  opacity: 0.9;
  user-select: none;
}

.secret-subgroup-header:hover {
  background: var(--color-hover, rgba(255, 255, 255, 0.06));
}

.secret-subgroup-body {
  padding: 2px 0;
}

.secret-subgroup.is-collapsed > .secret-subgroup-body {
  display: none;
}

.secret-chevron {
  display: inline-block;
  font-size: 0.8em;
  transition: transform 0.15s ease;
}

.secret-group.is-collapsed > .secret-group-header .secret-chevron,
.secret-subgroup.is-collapsed > .secret-subgroup-header .secret-chevron {
  transform: rotate(-90deg);
}