Spaces:
Running
Running
File size: 4,279 Bytes
4255d2e 06bd355 4255d2e 113e479 4255d2e 113e479 4255d2e 113e479 4255d2e 113e479 4255d2e 06bd355 4255d2e 06bd355 4255d2e 06bd355 4255d2e d01b9eb | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 | /* 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);
}
}
|