css/componentes/simbolos.css

/* 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--proceso { justify-content: space-between; gap: var(--e-2); }
.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 {
  position: relative;
  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);
  backdrop-filter: var(--vidrio-desenfoque);
  -webkit-backdrop-filter: var(--vidrio-desenfoque);
  box-shadow: var(--vidrio-sombra), 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__circulo::before,
.energia__circulo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.energia__circulo::before {
  padding: 1px;
  background: var(--vidrio-borde-degradado);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); /* token-libre: máscara, no es color de diseño */
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.energia__circulo::after {
  background-image: var(--grano);
  background-size: var(--vidrio-grano-tamano);
  opacity: var(--vidrio-grano-opacidad);
  mix-blend-mode: overlay;
}
.energia:hover .energia__circulo { box-shadow: var(--vidrio-sombra), inset 0 0 0 1px var(--borde-simbolo-hover); }
/* Elegida: el vidrio sigue igual, solo se le suma el anillo y el resplandor
   teal, y el trazo del símbolo pasa a teal (currentColor lo hereda). */
.energia[aria-pressed="true"] .energia__circulo {
  color: var(--simbolo-color-activo);
  box-shadow: var(--vidrio-sombra), var(--anillo-activo);
}

/* 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); }
.energias--proceso .energia__circulo {
  /* Las cuatro acciones comparten el espacio del panel. Su tamaño se adapta
     al ancho disponible, sin los tres valores fijos de los cortes de pantalla. */
  width: 48px;
  width: clamp(42px, 12cqi, 48px);
  height: 48px;
  height: clamp(42px, 12cqi, 48px);
}

@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); }
  .energias--proceso { gap: var(--e-2); }
}

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

/* En escritorio el panel es una barra angosta: las cuatro acciones del
   proceso se leen mejor en lista que apretadas en fila. */
@media (min-width: 900px) {
  .energias--proceso {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--e-3);
  }
  .energias--proceso .energia {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--e-4);
    width: 100%;
    padding: var(--e-2) var(--e-1);
  }
  .energias--proceso .energia__nombre { text-align: left; }
  .energias--proceso .energia__circulo {
    width: var(--e-11);
    height: var(--e-11);
  }
  .energias--proceso .energia__circulo svg {
    width: var(--m-simbolo-dibujo);
    height: var(--m-simbolo-dibujo);
  }
}