/* Grupos del menú de escenas */
.scene-group-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
  max-width: 100%;
}

.scene-group {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}

.scene-group__header {
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0.95rem;
  background: color-mix(in srgb, var(--brand, #4b5563) 18%, rgba(255, 255, 255, 0.03));
  border: none;
  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
  text-align: left;
}

/* Un nombre de zona largo no debe poder fijar un ancho mínimo mayor que el
   cajón: debe envolver. */
.scene-group__name {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

.scene-group__header:hover {
  background: var(--brand-ghost, rgba(75, 85, 99, 0.28));
}

/* Indicador de foco perceptible sobre chrome oscuro (WCAG 2.4.7 / 2.4.11). */
.scene-group__header:focus-visible {
  background: var(--brand-ghost, rgba(75, 85, 99, 0.28));
  outline: 3px solid #fff;
  outline-offset: -3px;
}

.scene-group__toggle {
  font-size: 1.1rem;
  color: #e5e7eb;
  flex-shrink: 0;
}

.scene-sublist {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0.45rem 0.55rem;
  min-width: 0;
  max-width: 100%;
}

.scene-sublist[hidden] {
  display: none;
}

.scene-sublist__item {
  margin: 0.2rem 0;
  min-width: 0;
  max-width: 100%;
}

.scene-button {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  color: rgba(255, 255, 255, 0.88);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  font-size: 0.84rem;
  line-height: 1.35;
  /* Nombres de escena largos (p. ej. "Pasillo Central Bloque B — Conexión
     Planta 2,Oficina Mantenimiento,Cafeteria") deben envolver, no ensanchar. */
  overflow-wrap: anywhere;
}

.scene-button:hover {
  background: var(--brand-ghost, rgba(75, 85, 99, 0.24));
  border-color: rgba(255, 255, 255, 0.24);
  transform: translateX(2px);
}

.scene-button:focus-visible {
  background: var(--brand-ghost, rgba(75, 85, 99, 0.24));
  border-color: rgba(255, 255, 255, 0.24);
  outline: 3px solid #fff;
  outline-offset: -3px;
}

.scene-button[aria-current="true"] {
  background: var(--brand-ghost, rgba(75, 85, 99, 0.22));
  border-color: rgba(255, 255, 255, 0.34);
  font-weight: 600;
}