/* Símbolos — las energías, en círculos sin caja. El elegido se rellena. */

.energias {
  display: flex;
  gap: var(--e-7);
  transition: opacity var(--t-medio) var(--curva-suave);
}
.energias[data-disponible="no"] { opacity: 0.5; }

.energia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-3);
  flex: 0 0 auto;
  padding: var(--e-1);
  background: none;
  border: 0;
  color: var(--simbolo-color);
  transition: color var(--t-instante) var(--curva-suave);
}
.energia:hover,
.energia[aria-pressed="true"] { color: var(--simbolo-color-activo); }

.energia__circulo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--m-simbolo);
  height: var(--m-simbolo);
  border-radius: var(--r-circulo);
  background: var(--superficie-simbolo);
  box-shadow: inset 0 0 0 1px var(--borde-simbolo);
  transition: box-shadow var(--t-rapido) var(--curva-suave),
              background var(--t-rapido) var(--curva-suave);
}
.energia:hover .energia__circulo { box-shadow: inset 0 0 0 1px var(--borde-simbolo-hover); }
.energia[aria-pressed="true"] .energia__circulo {
  background: var(--superficie-simbolo-activo);
  color: var(--simbolo-color-activo-dibujo);
  box-shadow: none;
}

/* Las propiedades de trazo se ponen en el <svg> y se heredan hacia dentro del
   <use>: los selectores de descendencia NO cruzan esa frontera, pero la
   herencia de fill/stroke sí. */
.energia__circulo svg {
  width: var(--m-simbolo-dibujo);
  height: var(--m-simbolo-dibujo);
  fill: none;
  stroke: var(--simbolo-trazo);
  stroke-width: var(--m-trazo-simbolo);
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.energia__nombre { font-size: var(--f-m); color: var(--texto-secundario); }
.energia[aria-pressed="true"] .energia__nombre { color: var(--texto-principal); }

@media (max-width: 900px) {
  .energias { gap: var(--e-6); justify-content: space-between; }
  .energia__circulo { width: var(--m-simbolo-estrecho); height: var(--m-simbolo-estrecho); }
}

@media (max-width: 640px) {
  .energia__circulo { width: var(--m-simbolo-movil); height: var(--m-simbolo-movil); }
}