/*
=============================================================================
PARADISE · TODOS LOS ICONOS CSS · REVISION 8 · ARCHIVO AUTONOMO
=============================================================================
90 nombres funcionales · 270 muestras · 24 / 29 / 32 px.
Revision aditiva: 78 anteriores sin cambios + 12 incorporaciones.
Sin imagenes, fuentes externas, JavaScript ni prioridad forzada.
=============================================================================
*/

/*
 * PARADISE · sistema base mínimo para el catálogo CSS auditado
 * Geometría proporcional: 24 / 29 / 32 px. Todo hereda currentColor.
 */

.menu-icon {
  --icon-size: 32px;
  position: relative;
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 var(--icon-size);
  color: currentColor;
  vertical-align: middle;
}

.menu-icon--regular { --icon-size: 32px; }
.menu-icon--toolbar { --icon-size: 29px; filter: none; }
.menu-icon--small { --icon-size: 24px; }

.menu-icon__tile,
.menu-icon__ring,
.menu-icon__core,
.menu-icon__mark,
.menu-icon > b,
.menu-icon::before,
.menu-icon::after {
  position: absolute;
  box-sizing: border-box;
}

.menu-icon__tile { display: none; }
.menu-icon__ring {
  inset: 12%;
  border: calc(var(--icon-size) * .0375) solid currentColor;
  border-radius: 50%;
}
.menu-icon__core {
  inset: 36%;
  border: calc(var(--icon-size) * .03125) solid currentColor;
  border-radius: 50%;
  background: transparent;
}
.menu-icon > b {
  left: 41%;
  top: 8%;
  width: 18%;
  height: 36%;
  border: calc(var(--icon-size) * .03125) solid currentColor;
  transform-origin: 50% 115%;
}
.menu-icon__mark {
  inset: 44%;
  border-radius: 50%;
  background: currentColor;
}



/*
 * PARADISE · 53 iconos de interfaz complementarios
 * Todos usan el mismo marcado de MenuIcon, heredan currentColor y conservan
 * legibilidad en 24, 29 y 32 px. No contienen imágenes, fuentes ni JavaScript.
 */

/* Limpieza común: cada icono activa solo las piezas que necesita. */
.menu-icon:where(
  .menu-icon--flow-rivers,.menu-icon--flow-sky,.menu-icon--flow-smoke,.menu-icon--flow-oil,.menu-icon--flow-bubbles,.menu-icon--flow-wind,
  .menu-icon--land-terrace-floor,.menu-icon--land-terrace-edge,.menu-icon--land-plaza,.menu-icon--land-vegetation,
  .menu-icon--rule-placement,.menu-icon--rule-guides,.menu-icon--rule-measure,.menu-icon--rule-thickness,.menu-icon--rule-above,.menu-icon--rule-locked,
  .menu-icon--sel-hand,.menu-icon--sel-lasso,.menu-icon--sel-window,.menu-icon--sel-add,.menu-icon--sel-delete,.menu-icon--sel-clear,.menu-icon--sel-pin,.menu-icon--sel-edit,.menu-icon--sel-copy,.menu-icon--sel-mirror,.menu-icon--sel-pieces,
  .menu-icon--layout-row,.menu-icon--layout-column,.menu-icon--layout-width,.menu-icon--layout-height,.menu-icon--layout-menu,.menu-icon--layout-divider-h,.menu-icon--layout-divider-v,
  .menu-icon--play,.menu-icon--pause,.menu-icon--stop,.menu-icon--record,.menu-icon--restart,.menu-icon--timer,
  .menu-icon--data-live,.menu-icon--data-history,.menu-icon--data-seed,
  .menu-icon--save,.menu-icon--export-png,.menu-icon--export-svg,.menu-icon--export-animation,
  .menu-icon--equalizer,.menu-icon--spectator-mask,.menu-icon--compass,.menu-icon--clipboard,.menu-icon--yarn,.menu-icon--close
) :where(.menu-icon__tile,.menu-icon__ring,.menu-icon__core,.menu-icon__mark,b) { display: none; }

/*
 * Normalización de escala
 * -----------------------
 * Las tres variantes comparten exactamente la misma geometría. El tamaño
 * intermedio no debe recuperar el azulejo ni la sombra de la botonera base:
 * ambos cambiarían su silueta en lugar de limitarse a escalarla.
 */
.menu-icon.menu-icon--toolbar:where(
  .menu-icon--flow-rivers,.menu-icon--flow-sky,.menu-icon--flow-smoke,.menu-icon--flow-oil,.menu-icon--flow-bubbles,.menu-icon--flow-wind,
  .menu-icon--land-terrace-floor,.menu-icon--land-terrace-edge,.menu-icon--land-plaza,.menu-icon--land-vegetation,
  .menu-icon--rule-placement,.menu-icon--rule-guides,.menu-icon--rule-measure,.menu-icon--rule-thickness,.menu-icon--rule-above,.menu-icon--rule-locked,
  .menu-icon--sel-hand,.menu-icon--sel-lasso,.menu-icon--sel-window,.menu-icon--sel-add,.menu-icon--sel-delete,.menu-icon--sel-clear,.menu-icon--sel-pin,.menu-icon--sel-edit,.menu-icon--sel-copy,.menu-icon--sel-mirror,.menu-icon--sel-pieces,
  .menu-icon--layout-row,.menu-icon--layout-column,.menu-icon--layout-width,.menu-icon--layout-height,.menu-icon--layout-menu,.menu-icon--layout-divider-h,.menu-icon--layout-divider-v,
  .menu-icon--play,.menu-icon--pause,.menu-icon--stop,.menu-icon--record,.menu-icon--restart,.menu-icon--timer,
  .menu-icon--data-live,.menu-icon--data-history,.menu-icon--data-seed,
  .menu-icon--save,.menu-icon--export-png,.menu-icon--export-svg,.menu-icon--export-animation,
  .menu-icon--equalizer,.menu-icon--spectator-mask,.menu-icon--compass,.menu-icon--clipboard,.menu-icon--yarn,.menu-icon--close
) { filter: none; }

.menu-icon.menu-icon--toolbar:where(
  .menu-icon--flow-rivers,.menu-icon--flow-sky,.menu-icon--flow-smoke,.menu-icon--flow-oil,.menu-icon--flow-bubbles,.menu-icon--flow-wind,
  .menu-icon--land-terrace-floor,.menu-icon--land-terrace-edge,.menu-icon--land-plaza,.menu-icon--land-vegetation,
  .menu-icon--rule-placement,.menu-icon--rule-guides,.menu-icon--rule-measure,.menu-icon--rule-thickness,.menu-icon--rule-above,.menu-icon--rule-locked,
  .menu-icon--sel-hand,.menu-icon--sel-lasso,.menu-icon--sel-window,.menu-icon--sel-add,.menu-icon--sel-delete,.menu-icon--sel-clear,.menu-icon--sel-pin,.menu-icon--sel-edit,.menu-icon--sel-copy,.menu-icon--sel-mirror,.menu-icon--sel-pieces,
  .menu-icon--layout-row,.menu-icon--layout-column,.menu-icon--layout-width,.menu-icon--layout-height,.menu-icon--layout-menu,.menu-icon--layout-divider-h,.menu-icon--layout-divider-v,
  .menu-icon--play,.menu-icon--pause,.menu-icon--stop,.menu-icon--record,.menu-icon--restart,.menu-icon--timer,
  .menu-icon--data-live,.menu-icon--data-history,.menu-icon--data-seed,
  .menu-icon--save,.menu-icon--export-png,.menu-icon--export-svg,.menu-icon--export-animation,
  .menu-icon--equalizer,.menu-icon--spectator-mask,.menu-icon--compass,.menu-icon--clipboard,.menu-icon--yarn,.menu-icon--close
) > .menu-icon__tile { display: none; }

.menu-icon:where(
  .menu-icon--flow-rivers,.menu-icon--flow-sky,.menu-icon--flow-smoke,.menu-icon--flow-oil,.menu-icon--flow-bubbles,.menu-icon--flow-wind,
  .menu-icon--land-terrace-floor,.menu-icon--land-terrace-edge,.menu-icon--land-plaza,.menu-icon--land-vegetation,
  .menu-icon--rule-placement,.menu-icon--rule-guides,.menu-icon--rule-measure,.menu-icon--rule-thickness,.menu-icon--rule-above,.menu-icon--rule-locked,
  .menu-icon--sel-hand,.menu-icon--sel-lasso,.menu-icon--sel-window,.menu-icon--sel-add,.menu-icon--sel-delete,.menu-icon--sel-clear,.menu-icon--sel-pin,.menu-icon--sel-edit,.menu-icon--sel-copy,.menu-icon--sel-mirror,.menu-icon--sel-pieces,
  .menu-icon--layout-row,.menu-icon--layout-column,.menu-icon--layout-width,.menu-icon--layout-height,.menu-icon--layout-menu,.menu-icon--layout-divider-h,.menu-icon--layout-divider-v,
  .menu-icon--play,.menu-icon--pause,.menu-icon--stop,.menu-icon--record,.menu-icon--restart,.menu-icon--timer,
  .menu-icon--data-live,.menu-icon--data-history,.menu-icon--data-seed,
  .menu-icon--save,.menu-icon--export-png,.menu-icon--export-svg,.menu-icon--export-animation,
  .menu-icon--equalizer,.menu-icon--spectator-mask,.menu-icon--compass,.menu-icon--clipboard,.menu-icon--yarn,.menu-icon--close
)::before,
.menu-icon:where(
  .menu-icon--flow-rivers,.menu-icon--flow-sky,.menu-icon--flow-smoke,.menu-icon--flow-oil,.menu-icon--flow-bubbles,.menu-icon--flow-wind,
  .menu-icon--land-terrace-floor,.menu-icon--land-terrace-edge,.menu-icon--land-plaza,.menu-icon--land-vegetation,
  .menu-icon--rule-placement,.menu-icon--rule-guides,.menu-icon--rule-measure,.menu-icon--rule-thickness,.menu-icon--rule-above,.menu-icon--rule-locked,
  .menu-icon--sel-hand,.menu-icon--sel-lasso,.menu-icon--sel-window,.menu-icon--sel-add,.menu-icon--sel-delete,.menu-icon--sel-clear,.menu-icon--sel-pin,.menu-icon--sel-edit,.menu-icon--sel-copy,.menu-icon--sel-mirror,.menu-icon--sel-pieces,
  .menu-icon--layout-row,.menu-icon--layout-column,.menu-icon--layout-width,.menu-icon--layout-height,.menu-icon--layout-menu,.menu-icon--layout-divider-h,.menu-icon--layout-divider-v,
  .menu-icon--play,.menu-icon--pause,.menu-icon--stop,.menu-icon--record,.menu-icon--restart,.menu-icon--timer,
  .menu-icon--data-live,.menu-icon--data-history,.menu-icon--data-seed,
  .menu-icon--save,.menu-icon--export-png,.menu-icon--export-svg,.menu-icon--export-animation,
  .menu-icon--equalizer,.menu-icon--spectator-mask,.menu-icon--compass,.menu-icon--clipboard,.menu-icon--yarn,.menu-icon--close
)::after { content: ''; position: absolute; box-sizing: border-box; }

/* Agua, cielo y flujos ---------------------------------------------------- */
.menu-icon--flow-rivers::before,
.menu-icon--flow-rivers::after { left: 9%; width: 82%; height: 35%; border: calc(var(--icon-size) * .0375) solid currentColor; border-color: currentColor transparent transparent; border-radius: 50%; transform: rotate(-7deg); }
.menu-icon--flow-rivers::before { top: 28%; }
.menu-icon--flow-rivers::after { top: 48%; transform: rotate(7deg) scaleX(.88); }
.menu-icon--flow-rivers .menu-icon__mark { display: block; left: 43%; top: 8%; width: 17%; height: 24%; border: calc(var(--icon-size) * .03125) solid currentColor; border-radius: 75% 45% 70% 35%; background: color-mix(in srgb,currentColor 12%,transparent); transform: rotate(42deg); }

.menu-icon--flow-sky::before { left: 13%; top: 36%; width: 72%; height: 34%; border: calc(var(--icon-size) * .0375) solid currentColor; border-radius: 50% 50% 44% 44%; background: color-mix(in srgb,currentColor 6%,transparent); }
.menu-icon--flow-sky::after { left: 25%; top: 21%; width: 31%; height: 31%; border: calc(var(--icon-size) * .0375) solid currentColor; border-bottom-color: transparent; border-radius: 50%; box-shadow: calc(var(--icon-size) * .29) calc(var(--icon-size) * .1) 0 calc(var(--icon-size) * -.03125) color-mix(in srgb,currentColor 8%,transparent), calc(var(--icon-size) * .29) calc(var(--icon-size) * .1) 0 0 currentColor; }
.menu-icon--flow-sky .menu-icon__mark { display: block; left: 23%; right: 19%; bottom: 13%; height: 13%; border: 0; border-top: calc(var(--icon-size) * .03125) solid currentColor; border-radius: 50%; background: transparent; transform: skewX(-28deg); }

.menu-icon--flow-smoke > b:nth-of-type(-n+3) { display: block; width: 27%; height: 66%; border: 0; border-left: calc(var(--icon-size) * .0421875) solid currentColor; border-radius: 58% 0 0 47%; background: transparent; transform-origin: center; opacity: .9; }
.menu-icon--flow-smoke > b:nth-of-type(1) { left: 11%; top: 25%; transform: skewX(-11deg) rotate(9deg); }
.menu-icon--flow-smoke > b:nth-of-type(2) { left: 37%; top: 6%; transform: skewX(13deg) rotate(-8deg); }
.menu-icon--flow-smoke > b:nth-of-type(3) { left: 63%; top: 20%; transform: skewX(-9deg) rotate(8deg); }
.menu-icon--flow-smoke::before { left: 18%; right: 16%; bottom: 8%; height: 19%; border-top: calc(var(--icon-size) * .0375) solid currentColor; border-radius: 50%; opacity: .46; }
.menu-icon--flow-smoke::after { left: 46%; bottom: 7%; width: 9%; height: 9%; border-radius: 50%; background: currentColor; opacity: .7; }

.menu-icon--flow-oil .menu-icon__ring { display: block; left: 24%; top: 6%; width: 53%; height: 63%; border: calc(var(--icon-size) * .0453125) solid currentColor; border-radius: 78% 38% 72% 42%; transform: rotate(45deg); background: color-mix(in srgb,currentColor 18%,transparent); }
.menu-icon--flow-oil::before { left: 8%; right: 8%; bottom: 17%; height: 16%; border-top: calc(var(--icon-size) * .0421875) solid currentColor; border-radius: 50%; transform: rotate(-4deg); }
.menu-icon--flow-oil::after { left: 14%; right: 12%; bottom: 5%; height: 17%; border-top: calc(var(--icon-size) * .0359375) solid currentColor; border-radius: 50%; transform: rotate(6deg); opacity: .72; }
.menu-icon--flow-oil .menu-icon__mark { display: block; left: 51%; top: 20%; width: 9%; height: 17%; border-radius: 50%; background: currentColor; transform: rotate(32deg); opacity: .72; }

.menu-icon--flow-bubbles .menu-icon__ring { display: block; left: 7%; top: 48%; width: 38%; height: 38%; border: calc(var(--icon-size) * .04375) solid currentColor; border-radius: 50%; background: color-mix(in srgb,currentColor 6%,transparent); }
.menu-icon--flow-bubbles .menu-icon__core { display: block; left: 39%; top: 25%; width: 31%; height: 31%; border: calc(var(--icon-size) * .040625) solid currentColor; border-radius: 50%; background: color-mix(in srgb,currentColor 5%,transparent); }
.menu-icon--flow-bubbles .menu-icon__mark { display: block; left: 68%; top: 5%; width: 24%; height: 24%; border: calc(var(--icon-size) * .0375) solid currentColor; border-radius: 50%; background: color-mix(in srgb,currentColor 5%,transparent); }
.menu-icon--flow-bubbles::before { left: 18%; top: 58%; width: 9%; height: 9%; border-radius: 50%; background: currentColor; opacity: .58; }
.menu-icon--flow-bubbles::after { left: 48%; top: 32%; width: 7%; height: 7%; border-radius: 50%; background: currentColor; opacity: .52; }

.menu-icon--flow-wind > b:nth-of-type(-n+3) { display: block; left: 5%; height: 22%; border: 0; border-top: calc(var(--icon-size) * .0453125) solid currentColor; border-radius: 50%; background: transparent; transform: none; }
.menu-icon--flow-wind > b:nth-of-type(1) { top: 20%; width: 83%; }
.menu-icon--flow-wind > b:nth-of-type(2) { top: 44%; width: 67%; }
.menu-icon--flow-wind > b:nth-of-type(3) { top: 67%; width: 49%; }
.menu-icon--flow-wind::before { right: 4%; top: 13%; width: 24%; height: 24%; border: calc(var(--icon-size) * .0390625) solid currentColor; border-left-color: transparent; border-radius: 50%; }
.menu-icon--flow-wind::after { right: 18%; top: 40%; width: 20%; height: 20%; border: calc(var(--icon-size) * .0359375) solid currentColor; border-left-color: transparent; border-radius: 50%; }

/* Terreno y arquitectura -------------------------------------------------- */
.menu-icon--land-terrace-floor > b:nth-of-type(-n+3) { display: block; left: 12%; height: 18%; border: calc(var(--icon-size) * .034375) solid currentColor; border-radius: calc(var(--icon-size) * .25) calc(var(--icon-size) * .0625) calc(var(--icon-size) * .0625) calc(var(--icon-size) * .0625); background: color-mix(in srgb,currentColor 8%,transparent); transform: none; }
.menu-icon--land-terrace-floor > b:nth-of-type(1) { top: 18%; width: 45%; }
.menu-icon--land-terrace-floor > b:nth-of-type(2) { top: 40%; width: 62%; }
.menu-icon--land-terrace-floor > b:nth-of-type(3) { top: 62%; width: 78%; }
.menu-icon--land-terrace-floor::after { left: 13%; right: 10%; bottom: 8%; border-top: calc(var(--icon-size) * .03125) solid currentColor; opacity: .6; }

.menu-icon--land-terrace-edge .menu-icon__ring { display: block; inset: 13%; border: calc(var(--icon-size) * .034375) solid currentColor; border-left-width: calc(var(--icon-size) * .125); border-radius: calc(var(--icon-size) * .09375); }
.menu-icon--land-terrace-edge .menu-icon__core { display: block; inset: 29%; border: calc(var(--icon-size) * .03125) solid currentColor; border-radius: calc(var(--icon-size) * .0625); background: transparent; }
.menu-icon--land-terrace-edge::after { left: 17%; top: 17%; bottom: 17%; width: calc(var(--icon-size) * .03125); background: currentColor; opacity: .5; }

.menu-icon--land-plaza .menu-icon__ring { display: block; inset: 10%; border: calc(var(--icon-size) * .04375) solid currentColor; border-radius: calc(var(--icon-size) * .09375); background: color-mix(in srgb,currentColor 5%,transparent); }
.menu-icon--land-plaza .menu-icon__core { display: block; inset: 34%; border: calc(var(--icon-size) * .0375) solid currentColor; border-radius: 50%; background: color-mix(in srgb,currentColor 10%,transparent); }
.menu-icon--land-plaza > b { display: block; width: 16%; height: 16%; border: calc(var(--icon-size) * .03125) solid currentColor; border-radius: calc(var(--icon-size) * .03125); background: transparent; transform: none; }
.menu-icon--land-plaza > b:nth-of-type(1) { left: 14%; top: 14%; }.menu-icon--land-plaza > b:nth-of-type(2) { right: 14%; left: auto; top: 14%; }.menu-icon--land-plaza > b:nth-of-type(3) { left: 14%; top: 70%; }.menu-icon--land-plaza > b:nth-of-type(4) { right: 14%; left: auto; top: 70%; }

.menu-icon--land-vegetation .menu-icon__ring { display: block; left: 25%; top: 11%; width: 51%; height: 70%; border: calc(var(--icon-size) * .0375) solid currentColor; border-radius: 85% 18% 85% 20%; transform: rotate(29deg); background: color-mix(in srgb,currentColor 7%,transparent); }
.menu-icon--land-vegetation::before { left: 49%; top: 19%; width: calc(var(--icon-size) * .03125); height: 67%; background: currentColor; transform: rotate(29deg); transform-origin: bottom; }
.menu-icon--land-vegetation::after { left: 31%; top: 45%; width: 39%; height: calc(var(--icon-size) * .03125); background: currentColor; transform: rotate(1deg); opacity: .7; }

/* Estructura y medida ----------------------------------------------------- */
.menu-icon--rule-placement::before { left: 12%; top: 13%; width: 71%; height: 71%; border-left: calc(var(--icon-size) * .0625) solid currentColor; border-bottom: calc(var(--icon-size) * .0625) solid currentColor; clip-path: polygon(0 0,100% 100%,0 100%); background: color-mix(in srgb,currentColor 6%,transparent); }
.menu-icon--rule-placement::after { left: 30%; top: 49%; width: 28%; height: 18%; border-left: calc(var(--icon-size) * .03125) solid currentColor; border-bottom: calc(var(--icon-size) * .03125) solid currentColor; }
.menu-icon--rule-placement .menu-icon__mark { display: block; left: 20%; bottom: 17%; width: 5%; height: 5%; border-radius: 50%; background: currentColor; }

.menu-icon--rule-guides::before { left: 8%; right: 8%; top: 48%; border-top: calc(var(--icon-size) * .0375) dashed currentColor; }
.menu-icon--rule-guides::after { top: 8%; bottom: 8%; left: 48%; border-left: calc(var(--icon-size) * .0375) dashed currentColor; }
.menu-icon--rule-guides .menu-icon__core { display: block; inset: 39%; border: calc(var(--icon-size) * .03125) solid currentColor; border-radius: 50%; background: color-mix(in srgb,currentColor 12%,transparent); }
.menu-icon--rule-guides .menu-icon__mark { display: block; inset: 46%; border-radius: 50%; background: currentColor; }

.menu-icon--rule-measure::before { left: 10%; top: 35%; width: 80%; height: 32%; border: calc(var(--icon-size) * .0375) solid currentColor; border-radius: calc(var(--icon-size) * .0625); transform: rotate(-11deg); background: color-mix(in srgb,currentColor 5%,transparent); }
.menu-icon--rule-measure::after { left: 28%; top: 36%; width: 52%; height: 19%; border-left: calc(var(--icon-size) * .03125) solid currentColor; border-right: calc(var(--icon-size) * .03125) solid currentColor; background: repeating-linear-gradient(90deg,currentColor 0 calc(var(--icon-size) * .03125),transparent calc(var(--icon-size) * .03125) calc(var(--icon-size) * .3)); transform: rotate(-11deg); opacity: .8; }

.menu-icon--rule-thickness::before { left: 10%; right: 10%; top: 31%; border-top: calc(var(--icon-size) * .03125) solid currentColor; }
.menu-icon--rule-thickness::after { left: 10%; right: 10%; top: 62%; border-top: calc(var(--icon-size) * .125) solid currentColor; }

.menu-icon--rule-above::before { left: 14%; right: 14%; bottom: 18%; border-top: calc(var(--icon-size) * .0375) solid currentColor; }
.menu-icon--rule-above::after { left: 48%; top: 13%; height: 55%; border-left: calc(var(--icon-size) * .046875) solid currentColor; }
.menu-icon--rule-above .menu-icon__mark { display: block; left: 36%; top: 12%; width: 25%; height: 25%; border: 0; border-left: calc(var(--icon-size) * .046875) solid currentColor; border-top: calc(var(--icon-size) * .046875) solid currentColor; border-radius: calc(var(--icon-size) * .03125); background: transparent; transform: rotate(45deg); }

.menu-icon--rule-locked .menu-icon__ring { display: block; left: 22%; top: 41%; width: 57%; height: 45%; border: calc(var(--icon-size) * .0375) solid currentColor; border-radius: calc(var(--icon-size) * .09375); }
.menu-icon--rule-locked::before { left: 31%; top: 12%; width: 39%; height: 42%; border: calc(var(--icon-size) * .0375) solid currentColor; border-bottom: 0; border-radius: 50% 50% 0 0; }
.menu-icon--rule-locked .menu-icon__mark { display: block; left: 46%; top: 57%; width: 9%; height: 19%; border-radius: 50% 50% calc(var(--icon-size) * .0625) calc(var(--icon-size) * .0625); background: currentColor; }

/* Selección y edición ----------------------------------------------------- */
.menu-icon--sel-hand::before { left: 27%; top: 38%; width: 49%; height: 50%; border: calc(var(--icon-size) * .0421875) solid currentColor; border-radius: 26% 34% 48% 42%; transform: rotate(-6deg); background: color-mix(in srgb,currentColor 7%,transparent); }
.menu-icon--sel-hand::after { left: 13%; top: 44%; width: 35%; height: 18%; border: calc(var(--icon-size) * .0390625) solid currentColor; border-right: 0; border-radius: 60% 0 0 60%; transform: rotate(36deg); }
.menu-icon--sel-hand > b:nth-of-type(-n+4) { display: block; top: 5%; width: 12%; border: calc(var(--icon-size) * .0359375) solid currentColor; border-radius: calc(var(--icon-size) * .25) calc(var(--icon-size) * .25) calc(var(--icon-size) * .09375) calc(var(--icon-size) * .09375); background: color-mix(in srgb,currentColor 5%,transparent); transform: none; }
.menu-icon--sel-hand > b:nth-of-type(1) { left: 28%; top: 20%; height: 34%; transform: rotate(-15deg); }
.menu-icon--sel-hand > b:nth-of-type(2) { left: 40%; top: 6%; height: 48%; }
.menu-icon--sel-hand > b:nth-of-type(3) { left: 54%; top: 3%; height: 51%; }
.menu-icon--sel-hand > b:nth-of-type(4) { left: 68%; top: 12%; height: 42%; transform: rotate(5deg); }

.menu-icon--sel-lasso .menu-icon__ring { display: block; left: 8%; top: 10%; width: 74%; height: 62%; border: calc(var(--icon-size) * .0453125) solid currentColor; border-radius: 51% 49% 45% 55%; transform: rotate(-10deg); background: transparent; }
.menu-icon--sel-lasso::before { left: 54%; top: 60%; width: 23%; height: 20%; border: calc(var(--icon-size) * .040625) solid currentColor; border-radius: 50%; transform: rotate(26deg); }
.menu-icon--sel-lasso::after { left: 68%; top: 71%; width: 26%; height: 17%; border-top: calc(var(--icon-size) * .0453125) solid currentColor; border-radius: 50%; transform: rotate(34deg); }
.menu-icon--sel-lasso .menu-icon__mark { display: block; left: 64%; top: 65%; width: 8%; height: 8%; border: calc(var(--icon-size) * .03125) solid currentColor; border-radius: 50%; background: currentColor; }

.menu-icon--sel-window::before { inset: 14%; border: calc(var(--icon-size) * .0375) dashed currentColor; border-radius: calc(var(--icon-size) * .0625); }
.menu-icon--sel-window > b { display: block; width: 10%; height: 10%; border: calc(var(--icon-size) * .03125) solid currentColor; border-radius: calc(var(--icon-size) * .03125); background: currentColor; transform: none; }
.menu-icon--sel-window > b:nth-of-type(1) { left: 8%; top: 8%; }
.menu-icon--sel-window > b:nth-of-type(2) { left: 82%; top: 8%; }
.menu-icon--sel-window > b:nth-of-type(3) { left: 8%; top: 82%; }
.menu-icon--sel-window > b:nth-of-type(4) { left: 82%; top: 82%; }

.menu-icon--sel-add .menu-icon__ring { display: block; inset: 13%; border: calc(var(--icon-size) * .0375) solid currentColor; border-radius: calc(var(--icon-size) * .09375); }
.menu-icon--sel-add::before { left: 22%; right: 22%; top: 48%; border-top: calc(var(--icon-size) * .05) solid currentColor; }
.menu-icon--sel-add::after { top: 22%; bottom: 22%; left: 48%; border-left: calc(var(--icon-size) * .05) solid currentColor; }
.menu-icon--sel-add .menu-icon__mark { display: block; inset: 43%; border-radius: 50%; background: currentColor; }

.menu-icon--sel-delete .menu-icon__ring { display: block; left: 26%; top: 27%; width: 49%; height: 57%; border: calc(var(--icon-size) * .0375) solid currentColor; border-radius: calc(var(--icon-size) * .0625) calc(var(--icon-size) * .0625) calc(var(--icon-size) * .15625) calc(var(--icon-size) * .15625); }
.menu-icon--sel-delete::before { left: 19%; top: 21%; width: 63%; border-top: calc(var(--icon-size) * .046875) solid currentColor; }
.menu-icon--sel-delete::after { left: 36%; top: 11%; width: 29%; height: 13%; border: calc(var(--icon-size) * .0375) solid currentColor; border-bottom: 0; border-radius: calc(var(--icon-size) * .09375) calc(var(--icon-size) * .09375) 0 0; }
.menu-icon--sel-delete .menu-icon__mark { display: block; left: 42%; top: 39%; width: 17%; height: 31%; border: 0; border-left: calc(var(--icon-size) * .03125) solid currentColor; border-right: calc(var(--icon-size) * .03125) solid currentColor; border-radius: 0; background: transparent; }

.menu-icon--sel-clear::before { left: 13%; top: 52%; width: 57%; height: 29%; border: calc(var(--icon-size) * .0421875) solid currentColor; border-radius: calc(var(--icon-size) * .0625) calc(var(--icon-size) * .0625) calc(var(--icon-size) * .25) calc(var(--icon-size) * .25); transform: rotate(-14deg); background: color-mix(in srgb,currentColor 10%,transparent); }
.menu-icon--sel-clear::after { left: 65%; top: 8%; width: 11%; height: 55%; border: calc(var(--icon-size) * .0421875) solid currentColor; border-radius: calc(var(--icon-size) * .1875); transform: rotate(27deg); background: color-mix(in srgb,currentColor 7%,transparent); }
.menu-icon--sel-clear > b:nth-of-type(-n+3) { display: block; left: 17%; width: 49%; height: calc(var(--icon-size) * .03125); border: 0; background: currentColor; transform: rotate(-14deg); opacity: .65; }
.menu-icon--sel-clear > b:nth-of-type(1) { top: 57%; }.menu-icon--sel-clear > b:nth-of-type(2) { top: 65%; }.menu-icon--sel-clear > b:nth-of-type(3) { top: 73%; }

.menu-icon--sel-pin .menu-icon__ring { display: block; left: 31%; top: 10%; width: 40%; height: 42%; border: calc(var(--icon-size) * .0375) solid currentColor; border-radius: 50% 50% 12% 12%; transform: rotate(45deg); }
.menu-icon--sel-pin::before { left: 18%; top: 51%; width: 59%; border-top: calc(var(--icon-size) * .040625) solid currentColor; transform: rotate(45deg); }
.menu-icon--sel-pin::after { left: 55%; top: 62%; height: 29%; border-left: calc(var(--icon-size) * .040625) solid currentColor; transform: rotate(45deg); transform-origin: top; }
.menu-icon--sel-pin .menu-icon__mark { display: block; inset: 30% 46% 57%; border-radius: 50%; background: currentColor; }

.menu-icon--sel-edit::before { left: 18%; top: 47%; width: 66%; height: 20%; border: calc(var(--icon-size) * .0375) solid currentColor; border-radius: calc(var(--icon-size) * .0625) calc(var(--icon-size) * .21875) calc(var(--icon-size) * .21875) calc(var(--icon-size) * .0625); transform: rotate(-43deg); background: color-mix(in srgb,currentColor 7%,transparent); }
.menu-icon--sel-edit::after { left: 12%; bottom: 13%; width: 21%; height: 21%; border: calc(var(--icon-size) * .0375) solid currentColor; border-color: transparent currentColor currentColor transparent; transform: rotate(2deg); }
.menu-icon--sel-edit .menu-icon__mark { display: block; right: 9%; top: 12%; width: 12%; height: 20%; border-radius: calc(var(--icon-size) * .0625) calc(var(--icon-size) * .1875) calc(var(--icon-size) * .1875) calc(var(--icon-size) * .0625); background: currentColor; transform: rotate(47deg); }

.menu-icon--sel-copy::before,
.menu-icon--sel-copy::after { width: 55%; height: 58%; border: calc(var(--icon-size) * .0375) solid currentColor; border-radius: calc(var(--icon-size) * .09375); }
.menu-icon--sel-copy::before { left: 12%; top: 13%; opacity: .65; }
.menu-icon--sel-copy::after { right: 11%; bottom: 10%; background: color-mix(in srgb,currentColor 5%,transparent); }
.menu-icon--sel-copy .menu-icon__mark { display: block; right: 18%; bottom: 17%; width: 18%; height: 18%; border-radius: 50%; background: color-mix(in srgb,currentColor 26%,transparent); }

.menu-icon--sel-mirror::before { top: 9%; bottom: 9%; left: 49%; border-left: calc(var(--icon-size) * .03125) dashed currentColor; }
.menu-icon--sel-mirror > b:nth-of-type(-n+2) { display: block; top: 23%; width: 31%; height: 54%; border: calc(var(--icon-size) * .0375) solid currentColor; background: color-mix(in srgb,currentColor 6%,transparent); transform: none; }
.menu-icon--sel-mirror > b:nth-of-type(1) { left: 12%; border-radius: 80% 8% 8% 80%; }
.menu-icon--sel-mirror > b:nth-of-type(2) { right: 12%; left: auto; border-radius: 8% 80% 80% 8%; }
.menu-icon--sel-mirror::after { left: 25%; right: 25%; top: 47%; border-top: calc(var(--icon-size) * .03125) solid currentColor; }

.menu-icon--sel-pieces > b:nth-of-type(-n+3) { display: block; width: 36%; height: 36%; border: calc(var(--icon-size) * .0390625) solid currentColor; border-radius: calc(var(--icon-size) * .09375); background: color-mix(in srgb,currentColor 7%,transparent); transform: none; }
.menu-icon--sel-pieces > b:nth-of-type(-n+3)::before { content: ''; position: absolute; width: 25%; height: 25%; border: calc(var(--icon-size) * .034375) solid currentColor; border-radius: 50%; background: color-mix(in srgb,currentColor 8%,transparent); }
.menu-icon--sel-pieces > b:nth-of-type(1) { left: 8%; top: 11%; }
.menu-icon--sel-pieces > b:nth-of-type(1)::before { right: -16%; top: 35%; }
.menu-icon--sel-pieces > b:nth-of-type(2) { right: 8%; left: auto; top: 11%; }
.menu-icon--sel-pieces > b:nth-of-type(2)::before { left: 35%; bottom: -16%; }
.menu-icon--sel-pieces > b:nth-of-type(3) { left: 32%; top: 57%; }
.menu-icon--sel-pieces > b:nth-of-type(3)::before { left: -16%; top: 35%; }
.menu-icon--sel-pieces .menu-icon__mark { display: none; }

/* Disposición ------------------------------------------------------------ */
.menu-icon--layout-row > b:nth-of-type(-n+3),
.menu-icon--layout-column > b:nth-of-type(-n+3) { display: block; width: 22%; height: 38%; top: 31%; border: calc(var(--icon-size) * .034375) solid currentColor; border-radius: calc(var(--icon-size) * .0625); background: color-mix(in srgb,currentColor 6%,transparent); transform: none; }
.menu-icon--layout-row > b:nth-of-type(1) { left: 7%; }.menu-icon--layout-row > b:nth-of-type(2) { left: 39%; }.menu-icon--layout-row > b:nth-of-type(3) { left: 71%; }
.menu-icon--layout-column > b:nth-of-type(-n+3) { left: 31%; width: 38%; height: 22%; }
.menu-icon--layout-column > b:nth-of-type(1) { top: 7%; }.menu-icon--layout-column > b:nth-of-type(2) { top: 39%; }.menu-icon--layout-column > b:nth-of-type(3) { top: 71%; }

.menu-icon--layout-width::before { left: 19%; right: 19%; top: 49%; border-top: calc(var(--icon-size) * .046875) solid currentColor; }
.menu-icon--layout-width > b:nth-of-type(-n+4) { display: block; width: 22%; height: 22%; border: 0; border-left: calc(var(--icon-size) * .046875) solid currentColor; border-bottom: calc(var(--icon-size) * .046875) solid currentColor; background: transparent; transform: none; }
.menu-icon--layout-width > b:nth-of-type(1) { left: 14%; top: 38%; transform: rotate(45deg); }.menu-icon--layout-width > b:nth-of-type(2) { right: 14%; left: auto; top: 38%; transform: rotate(225deg); }
.menu-icon--layout-width > b:nth-of-type(3) { left: 8%; top: 17%; width: calc(var(--icon-size) * .03125); height: 66%; border: 0; background: currentColor; }.menu-icon--layout-width > b:nth-of-type(4) { right: 8%; left: auto; top: 17%; width: calc(var(--icon-size) * .03125); height: 66%; border: 0; background: currentColor; }

.menu-icon--layout-height::before { top: 19%; bottom: 19%; left: 49%; border-left: calc(var(--icon-size) * .046875) solid currentColor; }
.menu-icon--layout-height > b:nth-of-type(-n+4) { display: block; width: 22%; height: 22%; border: 0; border-left: calc(var(--icon-size) * .046875) solid currentColor; border-top: calc(var(--icon-size) * .046875) solid currentColor; background: transparent; transform: none; }
.menu-icon--layout-height > b:nth-of-type(1) { left: 38%; top: 14%; transform: rotate(45deg); }.menu-icon--layout-height > b:nth-of-type(2) { left: 38%; bottom: 14%; top: auto; transform: rotate(225deg); }
.menu-icon--layout-height > b:nth-of-type(3) { left: 17%; top: 8%; width: 66%; height: calc(var(--icon-size) * .03125); border: 0; background: currentColor; }.menu-icon--layout-height > b:nth-of-type(4) { left: 17%; top: auto; bottom: 8%; width: 66%; height: calc(var(--icon-size) * .03125); border: 0; background: currentColor; }

.menu-icon--layout-menu > b:nth-of-type(-n+3) { display: block; left: 15%; width: 70%; height: calc(var(--icon-size) * .03125); border: 0; background: currentColor; transform: none; }
.menu-icon--layout-menu > b:nth-of-type(1) { top: 27%; }.menu-icon--layout-menu > b:nth-of-type(2) { top: 49%; }.menu-icon--layout-menu > b:nth-of-type(3) { top: 71%; }
.menu-icon--layout-menu::before { left: 8%; top: 24%; width: 4%; height: 4%; border-radius: 50%; background: currentColor; box-shadow: 0 calc(var(--icon-size) * .22) 0 currentColor,0 calc(var(--icon-size) * .44) 0 currentColor; }

.menu-icon--layout-divider-h::before { left: 10%; right: 10%; top: 49%; border-top: calc(var(--icon-size) * .046875) solid currentColor; }
.menu-icon--layout-divider-h > b:nth-of-type(-n+2) { display: block; top: 35%; width: calc(var(--icon-size) * .03125); height: 29%; border: 0; background: currentColor; transform: none; }
.menu-icon--layout-divider-h > b:nth-of-type(1) { left: 10%; }.menu-icon--layout-divider-h > b:nth-of-type(2) { right: 10%; left: auto; }
.menu-icon--layout-divider-v::before { top: 10%; bottom: 10%; left: 49%; border-left: calc(var(--icon-size) * .046875) solid currentColor; }
.menu-icon--layout-divider-v > b:nth-of-type(-n+2) { display: block; left: 35%; width: 29%; height: calc(var(--icon-size) * .03125); border: 0; background: currentColor; transform: none; }
.menu-icon--layout-divider-v > b:nth-of-type(1) { top: 10%; }.menu-icon--layout-divider-v > b:nth-of-type(2) { bottom: 10%; top: auto; }

/* Reproducción y grabación ------------------------------------------------ */
.menu-icon--play::before { left: 30%; top: 20%; width: 0; height: 0; border-top: calc(var(--icon-size) * .3) solid transparent; border-bottom: calc(var(--icon-size) * .3) solid transparent; border-left: calc(var(--icon-size) * .43) solid currentColor; filter: drop-shadow(0 0 calc(var(--icon-size) * .09375) color-mix(in srgb,currentColor 25%,transparent)); }
.menu-icon.menu-icon--pause::before,
.menu-icon.menu-icon--pause::after { display: none; }
.menu-icon--pause > b:nth-of-type(-n+2) { display: block; top: 18%; width: 20%; height: 64%; border: calc(var(--icon-size) * .0421875) solid currentColor; border-radius: calc(var(--icon-size) * .0625); background: color-mix(in srgb,currentColor 27%,transparent); transform: none; }
.menu-icon--pause > b:nth-of-type(1) { left: 22%; }.menu-icon--pause > b:nth-of-type(2) { left: 58%; }
.menu-icon.menu-icon--stop::before,
.menu-icon.menu-icon--stop::after { display: none; }
.menu-icon--stop .menu-icon__ring { display: block; inset: 21%; border: calc(var(--icon-size) * .0453125) solid currentColor; border-radius: calc(var(--icon-size) * .0625); background: color-mix(in srgb,currentColor 29%,transparent); }
.menu-icon--record .menu-icon__ring { display: block; inset: 13%; border: calc(var(--icon-size) * .034375) solid currentColor; border-radius: 50%; }
.menu-icon--record::before { inset: 29%; border-radius: 50%; background: currentColor; box-shadow: 0 0 calc(var(--icon-size) * .21875) color-mix(in srgb,currentColor 35%,transparent); }

.menu-icon--restart .menu-icon__ring { display: block; inset: 12%; border: calc(var(--icon-size) * .0484375) solid currentColor; border-left-color: transparent; border-radius: 50%; transform: rotate(-24deg); }
.menu-icon--restart::before { left: 7%; top: 18%; width: 26%; height: 26%; border-left: calc(var(--icon-size) * .0484375) solid currentColor; border-bottom: calc(var(--icon-size) * .0484375) solid currentColor; transform: rotate(17deg); }
.menu-icon--restart::after { display: none; }

.menu-icon--timer .menu-icon__ring { display: block; inset: 17% 13% 9%; border: calc(var(--icon-size) * .0375) solid currentColor; border-radius: 50%; }
.menu-icon--timer::before { left: 39%; top: 5%; width: 23%; height: 13%; border: calc(var(--icon-size) * .034375) solid currentColor; border-radius: calc(var(--icon-size) * .09375); }
.menu-icon--timer::after { left: 49%; top: 32%; width: calc(var(--icon-size) * .03125); height: 25%; background: currentColor; transform: rotate(34deg); transform-origin: bottom; }
.menu-icon--timer .menu-icon__mark { display: block; inset: 43%; border-radius: 50%; background: currentColor; }

/* Datos e incendios ------------------------------------------------------- */
.menu-icon--data-live .menu-icon__ring { display: block; inset: 10%; border: calc(var(--icon-size) * .0375) dashed currentColor; border-radius: 50%; }
.menu-icon--data-live::before { left: 41%; top: 15%; width: 27%; height: 68%; background: currentColor; clip-path: polygon(42% 0,100% 0,63% 39%,91% 39%,21% 100%,42% 56%,9% 56%); }
.menu-icon--data-live .menu-icon__mark { display: block; inset: 45%; border-radius: 50%; background: color-mix(in srgb,currentColor 35%,transparent); }

.menu-icon--data-history::before { left: 11%; right: 9%; bottom: 13%; height: 68%; border-left: calc(var(--icon-size) * .034375) solid currentColor; border-bottom: calc(var(--icon-size) * .034375) solid currentColor; }
.menu-icon--data-history::after { left: 20%; top: 53%; width: 61%; height: 31%; border-top: calc(var(--icon-size) * .05) solid currentColor; border-right: calc(var(--icon-size) * .05) solid currentColor; clip-path: polygon(0 70%,24% 70%,24% 47%,49% 47%,49% 25%,74% 25%,74% 0,100% 0,100% 100%,0 100%); }
.menu-icon--data-history .menu-icon__mark { display: block; right: 8%; top: 18%; width: 13%; height: 13%; border: 0; border-right: calc(var(--icon-size) * .04375) solid currentColor; border-top: calc(var(--icon-size) * .04375) solid currentColor; border-radius: calc(var(--icon-size) * .03125); background: transparent; transform: rotate(45deg); }

.menu-icon--data-seed .menu-icon__ring { display: block; left: 25%; top: 21%; width: 51%; height: 63%; border: calc(var(--icon-size) * .0453125) solid currentColor; border-radius: 70% 30% 68% 32%; transform: rotate(39deg); background: color-mix(in srgb,currentColor 12%,transparent); }
.menu-icon--data-seed::before { left: 49%; top: 28%; width: calc(var(--icon-size) * .03125); height: 48%; background: currentColor; transform: rotate(39deg); transform-origin: bottom; opacity: .72; }
.menu-icon--data-seed::after { left: 40%; top: 8%; width: 29%; height: 25%; border: calc(var(--icon-size) * .0375) solid currentColor; border-radius: 80% 18% 80% 18%; transform: rotate(18deg); background: color-mix(in srgb,currentColor 7%,transparent); }

/* Exportar y guardar ------------------------------------------------------ */
.menu-icon--save::before { inset: 10%; border: calc(var(--icon-size) * .0375) solid currentColor; border-radius: calc(var(--icon-size) * .09375) calc(var(--icon-size) * .25) calc(var(--icon-size) * .09375) calc(var(--icon-size) * .09375); background: color-mix(in srgb,currentColor 5%,transparent); }
.menu-icon--save::after { left: 28%; top: 10%; width: 45%; height: 31%; border: calc(var(--icon-size) * .03125) solid currentColor; border-top: 0; border-radius: 0 0 calc(var(--icon-size) * .09375) calc(var(--icon-size) * .09375); }
.menu-icon--save .menu-icon__ring { display: block; left: 29%; right: 29%; bottom: 16%; height: 27%; border: calc(var(--icon-size) * .03125) solid currentColor; border-radius: calc(var(--icon-size) * .09375) calc(var(--icon-size) * .09375) 0 0; }
.menu-icon--save .menu-icon__mark { display: block; right: 35%; top: 17%; width: 7%; height: 16%; border-radius: calc(var(--icon-size) * .03125); background: currentColor; }

.menu-icon--export-png::before { inset: 9%; border: calc(var(--icon-size) * .0375) solid currentColor; border-radius: calc(var(--icon-size) * .09375); }
.menu-icon--export-png::after { left: 18%; right: 17%; bottom: 19%; height: 37%; border-left: calc(var(--icon-size) * .0375) solid currentColor; border-top: calc(var(--icon-size) * .0375) solid currentColor; transform: skewX(-32deg) rotate(45deg); }
.menu-icon--export-png .menu-icon__mark { display: block; right: 20%; top: 19%; width: 15%; height: 15%; border: calc(var(--icon-size) * .03125) solid currentColor; border-radius: 50%; background: color-mix(in srgb,currentColor 18%,transparent); }

.menu-icon--export-svg::before { inset: 9%; border: calc(var(--icon-size) * .0375) solid currentColor; border-radius: calc(var(--icon-size) * .09375); }
.menu-icon--export-svg::after { left: 22%; top: 34%; width: 57%; height: 34%; border: calc(var(--icon-size) * .0375) solid currentColor; border-color: currentColor transparent transparent; border-radius: 50%; transform: rotate(-20deg); }
.menu-icon--export-svg > b:nth-of-type(-n+3) { display: block; width: 11%; height: 11%; border: calc(var(--icon-size) * .03125) solid currentColor; border-radius: 50%; background: currentColor; transform: none; }
.menu-icon--export-svg > b:nth-of-type(1) { left: 18%; top: 56%; }.menu-icon--export-svg > b:nth-of-type(2) { left: 45%; top: 31%; }.menu-icon--export-svg > b:nth-of-type(3) { left: 72%; top: 55%; }

.menu-icon--export-animation::before { left: 7%; top: 20%; width: 86%; height: 61%; border: calc(var(--icon-size) * .04375) solid currentColor; border-radius: calc(var(--icon-size) * .09375); background: transparent; }
.menu-icon--export-animation > b:nth-of-type(-n+2) { display: block; top: 21%; width: calc(var(--icon-size) * .03125); height: 59%; border: 0; background: currentColor; transform: none; opacity: .72; }
.menu-icon--export-animation > b:nth-of-type(1) { left: 36%; }.menu-icon--export-animation > b:nth-of-type(2) { left: 65%; }
.menu-icon--export-animation::after { left: 13%; top: 10%; width: 7%; height: 7%; border-radius: calc(var(--icon-size) * .03125); background: currentColor; box-shadow: calc(var(--icon-size) * .21) 0 0 currentColor,calc(var(--icon-size) * .42) 0 0 currentColor,calc(var(--icon-size) * .63) 0 0 currentColor,0 calc(var(--icon-size) * .73) 0 currentColor,calc(var(--icon-size) * .21) calc(var(--icon-size) * .73) 0 currentColor,calc(var(--icon-size) * .42) calc(var(--icon-size) * .73) 0 currentColor,calc(var(--icon-size) * .63) calc(var(--icon-size) * .73) 0 currentColor; }

/* Utilidades sueltas ------------------------------------------------------ */
.menu-icon--equalizer > b:nth-of-type(-n+3) { display: block; top: 9%; width: calc(var(--icon-size) * .03125); height: 82%; border: 0; background: currentColor; transform: none; }
.menu-icon--equalizer > b:nth-of-type(-n+3)::after { content: ''; position: absolute; left: calc(var(--icon-size) * -.14); width: calc(var(--icon-size) * .28); height: calc(var(--icon-size) * .16); border: calc(var(--icon-size) * .0375) solid currentColor; border-radius: calc(var(--icon-size) * .0625); background: color-mix(in srgb,currentColor 20%,transparent); }
.menu-icon--equalizer > b:nth-of-type(1) { left: 24%; }.menu-icon--equalizer > b:nth-of-type(1)::after { top: 19%; }
.menu-icon--equalizer > b:nth-of-type(2) { left: 50%; }.menu-icon--equalizer > b:nth-of-type(2)::after { top: 58%; }
.menu-icon--equalizer > b:nth-of-type(3) { left: 76%; }.menu-icon--equalizer > b:nth-of-type(3)::after { top: 35%; }

.menu-icon--spectator-mask::before { left: 6%; top: 26%; width: 88%; height: 49%; border: calc(var(--icon-size) * .046875) solid currentColor; border-radius: 80% 12% 80% 12%; transform: rotate(45deg); background: color-mix(in srgb,currentColor 5%,transparent); }
.menu-icon--spectator-mask .menu-icon__ring { display: block; inset: 27%; border: calc(var(--icon-size) * .0421875) solid currentColor; border-radius: 50%; background: color-mix(in srgb,currentColor 12%,transparent); }
.menu-icon--spectator-mask .menu-icon__mark { display: block; inset: 41%; border-radius: 50%; background: currentColor; box-shadow: 0 0 calc(var(--icon-size) * .125) color-mix(in srgb,currentColor 30%,transparent); }

.menu-icon--compass > b:nth-of-type(-n+3) { display: block; width: 38%; height: 38%; border: calc(var(--icon-size) * .0390625) solid currentColor; border-radius: 50% 18% 50% 18%; background: color-mix(in srgb,currentColor 7%,transparent); transform: rotate(45deg); }
.menu-icon--compass > b:nth-of-type(1) { left: 31%; top: 5%; }.menu-icon--compass > b:nth-of-type(2) { left: 8%; top: 52%; }.menu-icon--compass > b:nth-of-type(3) { right: 8%; left: auto; top: 52%; }
.menu-icon--compass::before { left: 26%; top: 34%; width: 48%; height: 39%; border-left: calc(var(--icon-size) * .03125) solid currentColor; border-right: calc(var(--icon-size) * .03125) solid currentColor; transform: perspective(calc(var(--icon-size) * .625)) rotateX(12deg); opacity: .65; }
.menu-icon--compass .menu-icon__mark { display: block; inset: 44%; border-radius: 50%; background: currentColor; }

.menu-icon--clipboard::before { left: 19%; top: 17%; width: 63%; height: 70%; border: calc(var(--icon-size) * .0375) solid currentColor; border-radius: calc(var(--icon-size) * .09375); }
.menu-icon--clipboard::after { left: 36%; top: 8%; width: 30%; height: 20%; border: calc(var(--icon-size) * .034375) solid currentColor; border-radius: calc(var(--icon-size) * .21875) calc(var(--icon-size) * .21875) calc(var(--icon-size) * .09375) calc(var(--icon-size) * .09375); background: color-mix(in srgb,currentColor 8%,transparent); }
.menu-icon--clipboard > b:nth-of-type(-n+3) { display: block; left: 30%; width: 42%; height: calc(var(--icon-size) * .03125); border: 0; background: currentColor; transform: none; opacity: .7; }
.menu-icon--clipboard > b:nth-of-type(1) { top: 42%; }.menu-icon--clipboard > b:nth-of-type(2) { top: 57%; }.menu-icon--clipboard > b:nth-of-type(3) { top: 72%; }

.menu-icon--yarn::before { left: 18%; top: 19%; width: 58%; height: 67%; border: calc(var(--icon-size) * .0453125) solid currentColor; border-radius: calc(var(--icon-size) * .125); transform: rotate(-12deg); background: color-mix(in srgb,currentColor 6%,transparent); }
.menu-icon--yarn::after { right: 6%; top: 13%; width: 39%; height: 39%; border: calc(var(--icon-size) * .0453125) solid currentColor; border-radius: 50%; background: color-mix(in srgb,currentColor 10%,transparent); box-shadow: inset 0 0 0 calc(var(--icon-size) * .09375) color-mix(in srgb,currentColor 7%,transparent); }
.menu-icon--yarn .menu-icon__core { display: block; right: 16%; left: auto; top: 23%; width: 19%; height: 19%; border: calc(var(--icon-size) * .0375) solid currentColor; border-radius: 50%; background: transparent; }
.menu-icon--yarn > b:nth-of-type(-n+3) { display: block; left: 20%; width: 48%; height: calc(var(--icon-size) * .03125); border: 0; background: currentColor; transform: rotate(-12deg); opacity: .62; }
.menu-icon--yarn > b:nth-of-type(1) { top: 36%; }.menu-icon--yarn > b:nth-of-type(2) { top: 52%; }.menu-icon--yarn > b:nth-of-type(3) { top: 68%; }

.menu-icon--close::before,
.menu-icon--close::after { left: 49%; top: 16%; width: calc(var(--icon-size) * .04375); height: 68%; border-radius: calc(var(--icon-size) * .0625); background: currentColor; transform: rotate(45deg); transform-origin: center; }
.menu-icon--close::after { transform: rotate(-45deg); }

/* Integración: iconos pequeños dentro de etiquetas y botones de panel. */
.interface-icon-label { display: inline-flex; align-items: center; gap: .42em; min-width: 0; }
.interface-icon-label > .menu-icon { --icon-size: 1.35em; }
.flow-section__heading > .menu-icon { --icon-size: 20px; margin: calc(var(--icon-size) * -.0625) 0; }
.flow-subsection h4 > .menu-icon,
.design-card h3 > .menu-icon,
.design-guides > strong > .menu-icon { --icon-size: 18px; vertical-align: calc(var(--icon-size) * -.125); margin-right: calc(var(--icon-size) * .15625); }
.command-menu__window-actions .menu-icon,
.panel-heading__actions .menu-icon,
.selection-heading__actions .menu-icon { --icon-size: 17px; display: block; }
.export-action-icon > .menu-icon,
.fire-run-controls .menu-icon,
.fire-save-button .menu-icon,
.selection-section button .menu-icon,
.selection-footer .menu-icon { --icon-size: 19px; vertical-align: calc(var(--icon-size) * -.15625); margin-right: calc(var(--icon-size) * .1875); }
.spectator-button > .menu-icon--spectator-mask,
.carpet-project > .menu-icon--yarn { margin-right: 0; }


/*
 * PARADISE · Transformar, escalar y voltear
 * Tres pictogramas funcionales, distintos entre sí y proporcionales a
 * --icon-size. Comparten el marcado de MenuIcon y heredan currentColor.
 */

.menu-icon:where(
  .menu-icon--transform-move,
  .menu-icon--transform-scale,
  .menu-icon--transform-flip
) :where(.menu-icon__tile,.menu-icon__ring,.menu-icon__core,.menu-icon__mark,b) {
  display: none;
}

.menu-icon:where(
  .menu-icon--transform-move,
  .menu-icon--transform-scale,
  .menu-icon--transform-flip
)::before,
.menu-icon:where(
  .menu-icon--transform-move,
  .menu-icon--transform-scale,
  .menu-icon--transform-flip
)::after {
  content: '';
  position: absolute;
  box-sizing: border-box;
}

.menu-icon.menu-icon--toolbar:where(
  .menu-icon--transform-move,
  .menu-icon--transform-scale,
  .menu-icon--transform-flip
) {
  filter: none;
}

.menu-icon.menu-icon--toolbar:where(
  .menu-icon--transform-move,
  .menu-icon--transform-scale,
  .menu-icon--transform-flip
) > .menu-icon__tile {
  display: none;
}

/* Transformar: cruz de movimiento con cuatro flechas inequívocas. */
.menu-icon--transform-move::before {
  left: 49%;
  top: 13%;
  width: calc(var(--icon-size) * .046875);
  height: 74%;
  border-radius: calc(var(--icon-size) * .0625);
  background: currentColor;
}

.menu-icon--transform-move::after {
  left: 13%;
  top: 49%;
  width: 74%;
  height: calc(var(--icon-size) * .046875);
  border-radius: calc(var(--icon-size) * .0625);
  background: currentColor;
}

.menu-icon--transform-move > b:nth-of-type(-n+4) {
  display: block;
  width: 24%;
  height: 24%;
  border: 0;
  border-radius: 0;
  background: currentColor;
  clip-path: polygon(50% 0,100% 68%,67% 68%,67% 100%,33% 100%,33% 68%,0 68%);
  transform-origin: center;
}

.menu-icon--transform-move > b:nth-of-type(1) { left: 38%; top: 3%; transform: rotate(0deg); }
.menu-icon--transform-move > b:nth-of-type(2) { left: 73%; top: 38%; transform: rotate(90deg); }
.menu-icon--transform-move > b:nth-of-type(3) { left: 38%; top: 73%; transform: rotate(180deg); }
.menu-icon--transform-move > b:nth-of-type(4) { left: 3%; top: 38%; transform: rotate(270deg); }

.menu-icon--transform-move .menu-icon__mark {
  display: block;
  inset: 39%;
  border: calc(var(--icon-size) * .0375) solid currentColor;
  border-radius: calc(var(--icon-size) * .0625);
  background: color-mix(in srgb,currentColor 16%,transparent);
  transform: rotate(45deg);
}

/* Escalar: caja de selección y flecha diagonal de dos puntas. */
.menu-icon--transform-scale .menu-icon__ring {
  display: block;
  inset: 13%;
  border: calc(var(--icon-size) * .0375) dashed currentColor;
  border-radius: calc(var(--icon-size) * .0625);
  background: transparent;
}

.menu-icon--transform-scale::before {
  left: 16%;
  top: 49%;
  width: 70%;
  height: calc(var(--icon-size) * .05);
  border-radius: calc(var(--icon-size) * .0625);
  background: currentColor;
  transform: rotate(-45deg);
  transform-origin: center;
}

.menu-icon--transform-scale > b:nth-of-type(-n+2) {
  display: block;
  width: 27%;
  height: 27%;
  border: 0;
  border-radius: 0;
  background: currentColor;
  clip-path: polygon(50% 0,100% 68%,67% 68%,67% 100%,33% 100%,33% 68%,0 68%);
  transform-origin: center;
}

.menu-icon--transform-scale > b:nth-of-type(1) { right: 3%; top: 2%; left: auto; transform: rotate(45deg); }
.menu-icon--transform-scale > b:nth-of-type(2) { left: 3%; top: 71%; transform: rotate(225deg); }

.menu-icon--transform-scale > b:nth-of-type(3),
.menu-icon--transform-scale > b:nth-of-type(4) {
  display: block;
  width: 14%;
  height: 14%;
  border: calc(var(--icon-size) * .0375) solid currentColor;
  border-radius: calc(var(--icon-size) * .046875);
  background: color-mix(in srgb,currentColor 14%,transparent);
  transform: none;
}

.menu-icon--transform-scale > b:nth-of-type(3) { left: 7%; top: 7%; }
.menu-icon--transform-scale > b:nth-of-type(4) { right: 7%; bottom: 7%; left: auto; top: auto; }

/* Voltear: dos mitades reflejadas, eje discontinuo y flechas de intercambio. */
.menu-icon--transform-flip::before {
  left: 49%;
  top: 8%;
  width: calc(var(--icon-size) * .03125);
  height: 64%;
  background: repeating-linear-gradient(
    180deg,
    currentColor 0 calc(var(--icon-size) * .078125),
    transparent calc(var(--icon-size) * .078125) calc(var(--icon-size) * .15625)
  );
  opacity: .86;
}

.menu-icon--transform-flip .menu-icon__ring,
.menu-icon--transform-flip .menu-icon__core {
  display: block;
  top: 17%;
  width: 34%;
  height: 48%;
  border: calc(var(--icon-size) * .0421875) solid currentColor;
  background: color-mix(in srgb,currentColor 8%,transparent);
}

.menu-icon--transform-flip .menu-icon__ring {
  left: 8%;
  border-radius: 68% 9% 9% 68%;
}

.menu-icon--transform-flip .menu-icon__core {
  right: 8%;
  left: auto;
  border-radius: 9% 68% 68% 9%;
  background: color-mix(in srgb,currentColor 24%,transparent);
}

.menu-icon--transform-flip::after {
  left: 20%;
  bottom: 12%;
  width: 60%;
  height: calc(var(--icon-size) * .04375);
  border-radius: calc(var(--icon-size) * .0625);
  background: currentColor;
}

.menu-icon--transform-flip > b:nth-of-type(-n+2) {
  display: block;
  bottom: 4%;
  width: 24%;
  height: 24%;
  border: 0;
  border-radius: 0;
  background: currentColor;
  clip-path: polygon(50% 0,100% 68%,67% 68%,67% 100%,33% 100%,33% 68%,0 68%);
  transform-origin: center;
}

.menu-icon--transform-flip > b:nth-of-type(1) { left: 4%; top: auto; transform: rotate(270deg); }
.menu-icon--transform-flip > b:nth-of-type(2) { right: 4%; left: auto; top: auto; transform: rotate(90deg); }

/* Ajuste de uso dentro de la fila compacta de escala. */
.selection-scale-label > .menu-icon {
  --icon-size: 16px;
  flex: 0 0 var(--icon-size);
}


/*
 * PARADISE · Candado cerrado y abierto
 * Dos estados inequívocos, proporcionales a --icon-size y con el mismo cuerpo.
 */

.menu-icon:where(.menu-icon--rule-locked,.menu-icon--rule-unlocked)
  :where(.menu-icon__tile,.menu-icon__ring,.menu-icon__core,.menu-icon__mark,b) {
  display: none;
}

.menu-icon:where(.menu-icon--rule-locked,.menu-icon--rule-unlocked)::before,
.menu-icon:where(.menu-icon--rule-locked,.menu-icon--rule-unlocked)::after {
  content: '';
  position: absolute;
  box-sizing: border-box;
}

.menu-icon.menu-icon--toolbar:where(.menu-icon--rule-locked,.menu-icon--rule-unlocked) {
  filter: none;
}

.menu-icon.menu-icon--toolbar:where(.menu-icon--rule-locked,.menu-icon--rule-unlocked) > .menu-icon__tile {
  display: none;
}

/* Cuerpo común: ancho, estable y reconocible incluso a 24 px. */
.menu-icon:where(.menu-icon--rule-locked,.menu-icon--rule-unlocked) .menu-icon__ring {
  display: block;
  left: 19%;
  top: 43%;
  width: 62%;
  height: 45%;
  border: calc(var(--icon-size) * .046875) solid currentColor;
  border-radius: calc(var(--icon-size) * .109375);
  background: color-mix(in srgb,currentColor 12%,transparent);
}

/* Ojo de cerradura: cabeza circular y vástago vertical. */
.menu-icon:where(.menu-icon--rule-locked,.menu-icon--rule-unlocked) .menu-icon__mark {
  display: block;
  left: 44%;
  top: 57%;
  width: 13%;
  height: 13%;
  border: calc(var(--icon-size) * .03125) solid currentColor;
  border-radius: 50%;
  background: currentColor;
}

.menu-icon:where(.menu-icon--rule-locked,.menu-icon--rule-unlocked) .menu-icon__mark::after {
  content: '';
  position: absolute;
  left: 38%;
  top: 72%;
  width: 24%;
  height: 105%;
  border-radius: 0 0 calc(var(--icon-size) * .046875) calc(var(--icon-size) * .046875);
  background: currentColor;
}

/* Cerrado: arco completo, centrado y unido al cuerpo por ambos lados. */
.menu-icon--rule-locked::before {
  left: 29%;
  top: 7%;
  width: 42%;
  height: 48%;
  border: calc(var(--icon-size) * .05) solid currentColor;
  border-bottom: 0;
  border-radius: 52% 52% 0 0;
  background: transparent;
}

.menu-icon--rule-locked::after {
  left: 28%;
  top: 41%;
  width: 44%;
  height: calc(var(--icon-size) * .0625);
  border-radius: calc(var(--icon-size) * .0625);
  background: currentColor;
}

/*
 * Abierto: el arco se desplaza a la derecha, pierde su pata izquierda y deja
 * una separación amplia respecto al pequeño apoyo del cuerpo.
 */
.menu-icon--rule-unlocked::before {
  left: 42%;
  top: 5%;
  width: 40%;
  height: 49%;
  border: calc(var(--icon-size) * .05) solid currentColor;
  border-left-color: transparent;
  border-bottom: 0;
  border-radius: 52% 58% 0 0;
  background: transparent;
  transform: rotate(8deg);
  transform-origin: right bottom;
}

.menu-icon--rule-unlocked::after {
  left: 28%;
  top: 31%;
  width: calc(var(--icon-size) * .05);
  height: 13%;
  border-radius: calc(var(--icon-size) * .0625);
  background: currentColor;
}


/*
 * PARADISE · revisión 7 · 21 incorporaciones al catálogo auditado
 * Estructura (8), catástrofes (4), terreno (7) y disposición (2).
 * Sin imágenes, fuentes externas, JavaScript ni prioridad forzada.
 */

.menu-icon:where(
  .menu-icon--structure,.menu-icon--materials-all,.menu-icon--work-color,.menu-icon--render-skin,
  .menu-icon--outline-fit,.menu-icon--objects,.menu-icon--catalog,.menu-icon--search-piece,
  .menu-icon--fire,.menu-icon--drought,.menu-icon--pollution,.menu-icon--damage,
  .menu-icon--path,.menu-icon--canal,.menu-icon--fountain,.menu-icon--band,
  .menu-icon--band-edge,.menu-icon--carpet-border,.menu-icon--ornament-band,
  .menu-icon--bar-compact,.menu-icon--text-labels
) :where(.menu-icon__tile,.menu-icon__ring,.menu-icon__core,.menu-icon__mark,b) {
  display: none;
}

.menu-icon:where(
  .menu-icon--structure,.menu-icon--materials-all,.menu-icon--work-color,.menu-icon--render-skin,
  .menu-icon--outline-fit,.menu-icon--objects,.menu-icon--catalog,.menu-icon--search-piece,
  .menu-icon--fire,.menu-icon--drought,.menu-icon--pollution,.menu-icon--damage,
  .menu-icon--path,.menu-icon--canal,.menu-icon--fountain,.menu-icon--band,
  .menu-icon--band-edge,.menu-icon--carpet-border,.menu-icon--ornament-band,
  .menu-icon--bar-compact,.menu-icon--text-labels
)::before,
.menu-icon:where(
  .menu-icon--structure,.menu-icon--materials-all,.menu-icon--work-color,.menu-icon--render-skin,
  .menu-icon--outline-fit,.menu-icon--objects,.menu-icon--catalog,.menu-icon--search-piece,
  .menu-icon--fire,.menu-icon--drought,.menu-icon--pollution,.menu-icon--damage,
  .menu-icon--path,.menu-icon--canal,.menu-icon--fountain,.menu-icon--band,
  .menu-icon--band-edge,.menu-icon--carpet-border,.menu-icon--ornament-band,
  .menu-icon--bar-compact,.menu-icon--text-labels
)::after {
  content: '';
  position: absolute;
  box-sizing: border-box;
}

/* ESTRUCTURA ----------------------------------------------------------- */
/* Muro de piezas alternadas, sin depender de un glifo tipográfico. */
.menu-icon--structure > b:nth-of-type(-n+4) {
  display: block;
  height: 25%;
  border: calc(var(--icon-size) * .0375) solid currentColor;
  border-radius: calc(var(--icon-size) * .046875);
  background: color-mix(in srgb,currentColor 10%,transparent);
  transform: none;
}
.menu-icon--structure > b:nth-of-type(1) { left: 7%; top: 16%; width: 40%; }
.menu-icon--structure > b:nth-of-type(2) { left: 53%; top: 16%; width: 40%; }
.menu-icon--structure > b:nth-of-type(3) { left: 17%; top: 47%; width: 40%; }
.menu-icon--structure > b:nth-of-type(4) { left: 63%; top: 47%; width: 30%; }
.menu-icon--structure::after {
  left: 7%; right: 7%; bottom: 15%;
  border-top: calc(var(--icon-size) * .0375) solid currentColor;
}

/* Tres hojas materiales apiladas. */
.menu-icon--materials-all > b:nth-of-type(-n+3) {
  display: block;
  left: 10%;
  width: 80%;
  height: 29%;
  border: calc(var(--icon-size) * .0375) solid currentColor;
  border-radius: 45% 8% 45% 8%;
  background: color-mix(in srgb,currentColor 6%,transparent);
  transform: skewY(-7deg);
}
.menu-icon--materials-all > b:nth-of-type(1) { top: 11%; }
.menu-icon--materials-all > b:nth-of-type(2) { top: 33%; }
.menu-icon--materials-all > b:nth-of-type(3) { top: 55%; }

/* Pieza maciza: el color de trabajo sin textura. */
.menu-icon--work-color .menu-icon__ring {
  display: block;
  inset: 12% 10% 13% 12%;
  border: calc(var(--icon-size) * .04375) solid currentColor;
  border-radius: calc(var(--icon-size) * .0625);
  clip-path: polygon(8% 17%,81% 4%,97% 70%,24% 96%);
  background: currentColor;
  opacity: .84;
}
.menu-icon--work-color::after {
  left: 28%; top: 28%; width: 27%; height: 27%;
  border: calc(var(--icon-size) * .0375) solid currentColor;
  border-radius: 50%;
  filter: brightness(.58);
}

/* La misma pieza, pero con trama de tejido visible. */
.menu-icon--render-skin .menu-icon__ring {
  display: block;
  inset: 12% 10% 13% 12%;
  border: calc(var(--icon-size) * .04375) solid currentColor;
  border-radius: calc(var(--icon-size) * .0625);
  clip-path: polygon(8% 17%,81% 4%,97% 70%,24% 96%);
  background:
    repeating-linear-gradient(0deg,currentColor 0 calc(var(--icon-size) * .025),transparent calc(var(--icon-size) * .025) calc(var(--icon-size) * .0875)),
    repeating-linear-gradient(90deg,color-mix(in srgb,currentColor 72%,transparent) 0 calc(var(--icon-size) * .025),transparent calc(var(--icon-size) * .025) calc(var(--icon-size) * .0875));
}
.menu-icon--render-skin::after {
  left: 29%; top: 28%; width: 28%; height: 28%;
  border: calc(var(--icon-size) * .0375) double currentColor;
  border-radius: 50%;
  background: color-mix(in srgb,currentColor 8%,transparent);
}

/* Pieza sólida frente a su destino punteado. */
.menu-icon--outline-fit::before {
  left: 6%; top: 27%; width: 40%; height: 49%;
  border: calc(var(--icon-size) * .0375) solid currentColor;
  clip-path: polygon(10% 8%,86% 0,100% 78%,20% 100%);
  background: currentColor;
  opacity: .78;
}
.menu-icon--outline-fit::after {
  right: 4%; top: 13%; width: 43%; height: 53%;
  border: calc(var(--icon-size) * .04375) dashed currentColor;
  clip-path: polygon(10% 8%,86% 0,100% 78%,20% 100%);
}

/* Caja isométrica abierta. */
.menu-icon--objects .menu-icon__core {
  display: block;
  left: 25%; top: 38%; width: 50%; height: 43%;
  border: calc(var(--icon-size) * .0375) solid currentColor;
  border-top: 0;
  border-radius: 0 0 calc(var(--icon-size) * .0625) calc(var(--icon-size) * .0625);
  transform: skewY(18deg);
}
.menu-icon--objects::before,
.menu-icon--objects::after {
  top: 13%; width: 42%; height: 38%;
  border: calc(var(--icon-size) * .0375) solid currentColor;
  background: color-mix(in srgb,currentColor 7%,transparent);
}
.menu-icon--objects::before { left: 9%; transform: skewY(24deg) rotate(-8deg); }
.menu-icon--objects::after { right: 9%; transform: skewY(-24deg) rotate(8deg); }
.menu-icon--objects .menu-icon__mark {
  display: block;
  left: 48%; top: 42%; width: calc(var(--icon-size) * .0375); height: 40%;
  border-radius: calc(var(--icon-size) * .03);
  background: currentColor;
}

/* Cuatro fichas; la primera está seleccionada. */
.menu-icon--catalog > b:nth-of-type(-n+4) {
  display: block;
  width: 34%; height: 34%;
  border: calc(var(--icon-size) * .0375) solid currentColor;
  border-radius: calc(var(--icon-size) * .0625);
  transform: none;
}
.menu-icon--catalog > b:nth-of-type(1) { left: 10%; top: 10%; background: currentColor; }
.menu-icon--catalog > b:nth-of-type(2) { left: auto; right: 10%; top: 10%; }
.menu-icon--catalog > b:nth-of-type(3) { left: 10%; top: auto; bottom: 10%; }
.menu-icon--catalog > b:nth-of-type(4) { left: auto; right: 10%; top: auto; bottom: 10%; }
.menu-icon--catalog .menu-icon__mark {
  display: block;
  left: 20%; top: 20%; width: 14%; height: 14%;
  border-radius: 50%;
  background: color-mix(in srgb,currentColor 18%,#06131c);
}

/* Lupa sobre una pieza poligonal. */
.menu-icon--search-piece::before {
  left: 5%; top: 32%; width: 53%; height: 44%;
  border: calc(var(--icon-size) * .0375) solid currentColor;
  clip-path: polygon(8% 17%,82% 0,100% 76%,20% 100%);
  background: color-mix(in srgb,currentColor 8%,transparent);
}
.menu-icon--search-piece .menu-icon__ring {
  display: block;
  right: 6%; top: 7%; left: auto; bottom: auto;
  width: 43%; height: 43%;
  border: calc(var(--icon-size) * .05) solid currentColor;
  border-radius: 50%;
}
.menu-icon--search-piece::after {
  right: 3%; top: 44%; width: 31%;
  border-top: calc(var(--icon-size) * .05625) solid currentColor;
  border-radius: calc(var(--icon-size) * .05);
  transform: rotate(47deg);
  transform-origin: right center;
}

/* CATÁSTROFES ---------------------------------------------------------- */
/* Dos lenguas de fuego, una exterior y otra interior. */
.menu-icon--fire > b:nth-of-type(1) {
  display: block;
  left: 13%; top: 3%; width: 74%; height: 83%;
  border: 0;
  border-radius: 0;
  clip-path: polygon(51% 0,69% 27%,68% 9%,91% 39%,96% 62%,85% 83%,66% 97%,37% 96%,15% 82%,4% 60%,10% 36%,36% 12%,34% 47%,51% 29%,60% 52%,74% 40%,69% 68%,51% 84%,30% 72%,26% 54%,14% 67%,21% 82%,42% 94%,65% 87%,82% 69%,84% 50%,72% 31%,75% 57%,62% 77%,44% 85%,27% 75%,19% 58%,24% 38%);
  background: currentColor;
  transform: none;
  opacity: .9;
}
.menu-icon--fire > b:nth-of-type(2) {
  display: block;
  left: 39%; top: 48%; width: 27%; height: 36%;
  border: 0;
  border-radius: 72% 18% 62% 38%;
  clip-path: polygon(52% 0,90% 48%,83% 78%,59% 100%,29% 89%,9% 64%,18% 35%,42% 14%,40% 54%,58% 35%,66% 66%,51% 83%,33% 69%);
  background: color-mix(in srgb,currentColor 14%,#06131c);
  transform: none;
}
.menu-icon--fire::after {
  left: 17%; right: 14%; bottom: 8%;
  border-top: calc(var(--icon-size) * .0375) solid currentColor;
  border-radius: 50%;
}

/* Gota vacía con el nivel reducido al fondo. */
.menu-icon--drought::before {
  left: 17%; top: 2%; width: 66%; height: 88%;
  clip-path: polygon(50% 0,70% 27%,88% 49%,95% 67%,88% 84%,72% 96%,50% 100%,28% 96%,12% 84%,5% 67%,12% 49%,30% 27%);
  background: currentColor;
}
.menu-icon--drought .menu-icon__ring {
  display: block;
  left: 23%; top: 11%; width: 54%; height: 70%;
  border: 0;
  border-radius: 0;
  clip-path: polygon(50% 0,70% 29%,88% 53%,93% 69%,84% 83%,69% 94%,50% 98%,31% 94%,16% 83%,7% 69%,12% 53%,30% 29%);
  background: color-mix(in srgb,currentColor 7%,#06131c);
  transform: none;
}
.menu-icon--drought::after {
  left: 29%; right: 29%; bottom: 21%; height: 10%;
  border-top: calc(var(--icon-size) * .046875) solid currentColor;
  border-bottom: calc(var(--icon-size) * .03125) solid currentColor;
  border-radius: 50%;
}

/* Nube turbia, gotas densas y línea de agua. */
.menu-icon--pollution .menu-icon__ring {
  display: block;
  left: 10%; top: 25%; width: 72%; height: 31%;
  border: calc(var(--icon-size) * .0375) solid currentColor;
  border-radius: 52% 52% 43% 43%;
  background: color-mix(in srgb,currentColor 16%,transparent);
}
.menu-icon--pollution > b:nth-of-type(-n+3) {
  display: block;
  top: 13%; width: 29%; height: 29%;
  border: calc(var(--icon-size) * .034375) solid currentColor;
  border-radius: 50%;
  background: color-mix(in srgb,currentColor 10%,transparent);
  transform: none;
}
.menu-icon--pollution > b:nth-of-type(1) { left: 17%; }
.menu-icon--pollution > b:nth-of-type(2) { left: 38%; top: 7%; }
.menu-icon--pollution > b:nth-of-type(3) { left: 58%; top: 17%; }
.menu-icon--pollution::before {
  left: 20%; top: 62%; width: 11%; height: 19%;
  border-radius: 75% 40% 70% 35%;
  background: currentColor;
  transform: rotate(42deg);
  box-shadow: calc(var(--icon-size) * .25) calc(var(--icon-size) * .02) 0 currentColor;
}
.menu-icon--pollution::after {
  left: 9%; right: 7%; bottom: 8%;
  border-top: calc(var(--icon-size) * .04375) double currentColor;
}

/* Losa rectangular rota por una grieta diagonal. */
.menu-icon--damage .menu-icon__ring {
  display: block;
  inset: 10%;
  border: calc(var(--icon-size) * .04375) solid currentColor;
  border-radius: calc(var(--icon-size) * .0625);
  background: color-mix(in srgb,currentColor 7%,transparent);
}
.menu-icon--damage > b:nth-of-type(-n+3) {
  display: block;
  left: 47%; width: calc(var(--icon-size) * .05);
  border: 0;
  border-radius: calc(var(--icon-size) * .03);
  background: currentColor;
  transform-origin: top center;
}
.menu-icon--damage > b:nth-of-type(1) { top: 13%; height: 25%; transform: rotate(21deg); }
.menu-icon--damage > b:nth-of-type(2) { top: 35%; height: 27%; transform: rotate(-25deg); }
.menu-icon--damage > b:nth-of-type(3) { top: 58%; height: 27%; transform: rotate(27deg); }
.menu-icon--damage::after {
  left: 52%; top: 44%; width: 24%;
  border-top: calc(var(--icon-size) * .0375) solid currentColor;
  transform: rotate(24deg);
}

/* TERRENO -------------------------------------------------------------- */
/* Banda de paseo con costura central discontinua. */
.menu-icon--path .menu-icon__ring {
  display: block;
  left: 5%; top: 29%; width: 90%; height: 43%;
  border: calc(var(--icon-size) * .0375) solid currentColor;
  border-radius: 50% 12% 50% 12%;
  transform: rotate(-7deg);
}
.menu-icon--path .menu-icon__mark {
  display: block;
  left: 8%; right: 8%; top: 49%; height: 0;
  border-top: calc(var(--icon-size) * .04375) dotted currentColor;
  border-radius: 0;
  background: transparent;
  transform: rotate(-7deg);
}

/* Dos orillas rectas y dos ondas de agua interiores. */
.menu-icon--canal::before,
.menu-icon--canal::after {
  top: 8%; bottom: 8%; width: 22%;
  border: calc(var(--icon-size) * .0375) solid currentColor;
  background: color-mix(in srgb,currentColor 8%,transparent);
}
.menu-icon--canal::before { left: 5%; border-radius: 50% 12% 12% 50%; }
.menu-icon--canal::after { right: 5%; border-radius: 12% 50% 50% 12%; }
.menu-icon--canal > b:nth-of-type(-n+2) {
  display: block;
  left: 29%; width: 42%; height: 26%;
  border: 0;
  border-top: calc(var(--icon-size) * .04375) solid currentColor;
  border-radius: 50%;
  background: transparent;
  transform: rotate(-5deg);
}
.menu-icon--canal > b:nth-of-type(1) { top: 37%; }
.menu-icon--canal > b:nth-of-type(2) { top: 57%; transform: rotate(5deg); }

/* Tres ondas concéntricas y surtidor central. */
.menu-icon--fountain .menu-icon__ring,
.menu-icon--fountain .menu-icon__core {
  display: block;
  border: calc(var(--icon-size) * .0375) solid currentColor;
  border-radius: 50%;
  background: transparent;
}
.menu-icon--fountain .menu-icon__ring { left: 5%; top: 49%; width: 90%; height: 34%; }
.menu-icon--fountain .menu-icon__core { left: 23%; top: 56%; width: 54%; height: 20%; }
.menu-icon--fountain::before {
  left: 45%; top: 7%; width: 13%; height: 32%;
  border-radius: 78% 38% 72% 42%;
  background: currentColor;
  transform: rotate(45deg);
}
.menu-icon--fountain::after {
  left: 49%; top: 33%; height: 29%;
  border-left: calc(var(--icon-size) * .0375) solid currentColor;
}

/* Banda simple con greca de tres eslabones. */
.menu-icon--band .menu-icon__ring,
.menu-icon--band-edge .menu-icon__ring {
  display: block;
  left: 4%; top: 29%; width: 92%; height: 43%;
  border: calc(var(--icon-size) * .0375) solid currentColor;
  border-radius: calc(var(--icon-size) * .046875);
}
.menu-icon--band > b:nth-of-type(-n+3),
.menu-icon--band-edge > b:nth-of-type(-n+3) {
  display: block;
  top: 40%; width: 20%; height: 20%;
  border: calc(var(--icon-size) * .03125) solid currentColor;
  border-radius: calc(var(--icon-size) * .025);
  background: transparent;
  transform: rotate(45deg);
}
.menu-icon--band > b:nth-of-type(1),.menu-icon--band-edge > b:nth-of-type(1) { left: 14%; }
.menu-icon--band > b:nth-of-type(2),.menu-icon--band-edge > b:nth-of-type(2) { left: 40%; }
.menu-icon--band > b:nth-of-type(3),.menu-icon--band-edge > b:nth-of-type(3) { left: 66%; }

/* Misma banda, con borde superior deliberadamente grueso. */
.menu-icon--band-edge::before {
  left: 4%; right: 4%; top: 29%; height: calc(var(--icon-size) * .125);
  border-radius: calc(var(--icon-size) * .046875) calc(var(--icon-size) * .046875) 0 0;
  background: currentColor;
}

/* Marco de alfombra a doble línea. */
.menu-icon--carpet-border .menu-icon__ring,
.menu-icon--carpet-border .menu-icon__core {
  display: block;
  border-radius: calc(var(--icon-size) * .0625);
  background: transparent;
}
.menu-icon--carpet-border .menu-icon__ring {
  inset: 6%;
  border: calc(var(--icon-size) * .046875) solid currentColor;
}
.menu-icon--carpet-border .menu-icon__core {
  inset: 23%;
  border: calc(var(--icon-size) * .03125) solid currentColor;
}
.menu-icon--carpet-border > b:nth-of-type(-n+4) {
  display: block;
  width: 12%; height: 12%;
  border: 0;
  border-radius: 50%;
  background: currentColor;
  transform: none;
}
.menu-icon--carpet-border > b:nth-of-type(1) { left: 10%; top: 10%; }
.menu-icon--carpet-border > b:nth-of-type(2) { left: auto; right: 10%; top: 10%; }
.menu-icon--carpet-border > b:nth-of-type(3) { left: auto; right: 10%; top: auto; bottom: 10%; }
.menu-icon--carpet-border > b:nth-of-type(4) { left: 10%; top: auto; bottom: 10%; }

/* Banda ornamental con tres rombos enlazados. */
.menu-icon--ornament-band .menu-icon__ring {
  display: block;
  left: 3%; top: 27%; width: 94%; height: 47%;
  border: calc(var(--icon-size) * .0375) solid currentColor;
  border-radius: calc(var(--icon-size) * .046875);
}
.menu-icon--ornament-band > b:nth-of-type(-n+3) {
  display: block;
  top: 34%; width: 32%; height: 32%;
  border: calc(var(--icon-size) * .04375) solid currentColor;
  border-radius: calc(var(--icon-size) * .025);
  background: color-mix(in srgb,currentColor 5%,transparent);
  transform: rotate(45deg);
}
.menu-icon--ornament-band > b:nth-of-type(1) { left: 6%; }
.menu-icon--ornament-band > b:nth-of-type(2) { left: 34%; }
.menu-icon--ornament-band > b:nth-of-type(3) { left: 62%; }

/* DISPOSICIÓN ---------------------------------------------------------- */
/* Barra mínima: un contenedor estrecho y tres puntos. */
.menu-icon--bar-compact .menu-icon__ring {
  display: block;
  left: 5%; top: 35%; width: 90%; height: 31%;
  border: calc(var(--icon-size) * .04375) solid currentColor;
  border-radius: calc(var(--icon-size) * .15625);
}
.menu-icon--bar-compact > b:nth-of-type(-n+3) {
  display: block;
  top: 45%; width: 11%; height: 11%;
  border: 0;
  border-radius: 50%;
  background: currentColor;
  transform: none;
}
.menu-icon--bar-compact > b:nth-of-type(1) { left: 27%; }
.menu-icon--bar-compact > b:nth-of-type(2) { left: 45%; }
.menu-icon--bar-compact > b:nth-of-type(3) { left: 63%; }

/* Etiquetas: Aa geométrica acompañada por un punto de icono. */
.menu-icon--text-labels::before {
  content: 'Aa';
  left: 5%; top: 18%; width: 67%; height: 60%;
  display: grid;
  place-items: center;
  color: currentColor;
  font: 700 calc(var(--icon-size) * .45)/1 system-ui,sans-serif;
  letter-spacing: calc(var(--icon-size) * -.04);
}
.menu-icon--text-labels::after {
  right: 5%; top: 40%; width: 18%; height: 18%;
  border: calc(var(--icon-size) * .034375) solid currentColor;
  border-radius: 50%;
  background: color-mix(in srgb,currentColor 15%,transparent);
}


/*
 * PARADISE · revisión 8 · 12 incorporaciones al catálogo auditado
 * Mar (1), barra principal (2), Paint (3), Capas (2) y mandos (4).
 * Geometría proporcional, currentColor y ninguna prioridad forzada.
 */

.menu-icon:where(
  .menu-icon--sea,.menu-icon--layers-menu,.menu-icon--design-menu,
  .menu-icon--paint-brush,.menu-icon--patch,.menu-icon--canvas-versions,
  .menu-icon--constructions,.menu-icon--painted-icons,
  .menu-icon--help,.menu-icon--visibility,.menu-icon--settings,.menu-icon--linked-set
) :where(.menu-icon__tile,.menu-icon__ring,.menu-icon__core,.menu-icon__mark,b) {
  display: none;
}

.menu-icon:where(
  .menu-icon--sea,.menu-icon--layers-menu,.menu-icon--design-menu,
  .menu-icon--paint-brush,.menu-icon--patch,.menu-icon--canvas-versions,
  .menu-icon--constructions,.menu-icon--painted-icons,
  .menu-icon--help,.menu-icon--visibility,.menu-icon--settings,.menu-icon--linked-set
)::before,
.menu-icon:where(
  .menu-icon--sea,.menu-icon--layers-menu,.menu-icon--design-menu,
  .menu-icon--paint-brush,.menu-icon--patch,.menu-icon--canvas-versions,
  .menu-icon--constructions,.menu-icon--painted-icons,
  .menu-icon--help,.menu-icon--visibility,.menu-icon--settings,.menu-icon--linked-set
)::after {
  content: '';
  position: absolute;
  box-sizing: border-box;
}

/* MAR ------------------------------------------------------------------ */
/* Tres ondas largas, paralelas y sin orillas ni gota central. */
.menu-icon--sea > b:nth-of-type(-n+3) {
  display: block;
  left: 4%;
  width: 92%;
  height: 24%;
  border: 0;
  border-top: calc(var(--icon-size) * .046875) solid currentColor;
  border-radius: 50%;
  background: transparent;
  transform-origin: center;
}
.menu-icon--sea > b:nth-of-type(1) { top: 22%; transform: rotate(-3deg); }
.menu-icon--sea > b:nth-of-type(2) { top: 43%; transform: rotate(3deg) scaleX(.92); }
.menu-icon--sea > b:nth-of-type(3) { top: 65%; transform: rotate(-3deg) scaleX(.84); }
.menu-icon--sea::after {
  left: 17%; right: 17%; bottom: 4%;
  border-top: calc(var(--icon-size) * .03125) solid currentColor;
  opacity: .42;
}

/* BARRA PRINCIPAL ------------------------------------------------------ */
/* Tres láminas abiertas en abanico; la superior queda resaltada. */
.menu-icon--layers-menu > b:nth-of-type(-n+3) {
  display: block;
  left: 13%;
  top: 23%;
  width: 72%;
  height: 42%;
  border: calc(var(--icon-size) * .0375) solid currentColor;
  border-radius: 52% 8% 52% 8%;
  background: color-mix(in srgb,currentColor 5%,transparent);
  transform-origin: 18% 78%;
}
.menu-icon--layers-menu > b:nth-of-type(1) { transform: rotate(-18deg); opacity: .52; }
.menu-icon--layers-menu > b:nth-of-type(2) { transform: rotate(-3deg); opacity: .7; }
.menu-icon--layers-menu > b:nth-of-type(3) {
  transform: rotate(13deg);
  background: color-mix(in srgb,currentColor 24%,transparent);
  opacity: 1;
}
.menu-icon--layers-menu .menu-icon__mark {
  display: block;
  right: 4%; top: 12%; left: auto; bottom: auto;
  width: 12%; height: 12%;
  border-radius: 50%;
  background: currentColor;
}

/* Pluma/tiralíneas trazando una curva; no es un lápiz rectangular. */
.menu-icon--design-menu::before {
  left: 46%; top: 4%; width: 12%; height: 58%;
  border: calc(var(--icon-size) * .03125) solid currentColor;
  border-radius: 55% 55% 18% 18%;
  background: color-mix(in srgb,currentColor 8%,transparent);
  transform: rotate(41deg);
}
.menu-icon--design-menu > b:nth-of-type(1) {
  display: block;
  left: 17%; top: 42%; width: 38%; height: 42%;
  border: calc(var(--icon-size) * .040625) solid currentColor;
  border-radius: 78% 12% 68% 30%;
  clip-path: polygon(50% 0,100% 72%,48% 100%,0 72%);
  background: color-mix(in srgb,currentColor 11%,transparent);
  transform: rotate(43deg);
}
.menu-icon--design-menu .menu-icon__mark {
  display: block;
  left: 31%; top: 59%; width: 10%; height: 10%;
  border-radius: 50%;
  background: currentColor;
}
.menu-icon--design-menu::after {
  left: 22%; bottom: 6%; width: 69%; height: 31%;
  border: 0;
  border-bottom: calc(var(--icon-size) * .04375) solid currentColor;
  border-radius: 50%;
  transform: rotate(-8deg);
}

/* PAINT ---------------------------------------------------------------- */
/* Pincel diagonal con cerda ancha y una gota junto a la punta. */
.menu-icon--paint-brush::before {
  left: 46%; top: 0; width: 13%; height: 62%;
  border: calc(var(--icon-size) * .03125) solid currentColor;
  border-radius: 45% 45% 12% 12%;
  background: color-mix(in srgb,currentColor 10%,transparent);
  transform: rotate(42deg);
}
.menu-icon--paint-brush::after {
  left: 19%; top: 49%; width: 36%; height: 34%;
  border: calc(var(--icon-size) * .04375) solid currentColor;
  border-radius: 18% 18% 70% 30%;
  background: color-mix(in srgb,currentColor 18%,transparent);
  transform: rotate(42deg);
}
.menu-icon--paint-brush .menu-icon__mark {
  display: block;
  right: 7%; bottom: 5%; left: auto; top: auto;
  width: 19%; height: 25%;
  border: calc(var(--icon-size) * .03125) solid currentColor;
  border-radius: 78% 38% 72% 42%;
  background: color-mix(in srgb,currentColor 12%,transparent);
  transform: rotate(45deg);
}

/* Retal romboidal con cuatro puntadas visibles en el contorno. */
.menu-icon--patch .menu-icon__ring {
  display: block;
  inset: 18%;
  border: calc(var(--icon-size) * .046875) dashed currentColor;
  border-radius: calc(var(--icon-size) * .0625);
  background: color-mix(in srgb,currentColor 10%,transparent);
  transform: rotate(45deg);
}
.menu-icon--patch .menu-icon__core {
  display: block;
  inset: 35%;
  border: calc(var(--icon-size) * .03125) solid currentColor;
  border-radius: calc(var(--icon-size) * .046875);
  background: transparent;
  transform: rotate(45deg);
}
.menu-icon--patch > b:nth-of-type(-n+4) {
  display: block;
  width: 13%; height: 4%;
  border: 0;
  border-radius: calc(var(--icon-size) * .03);
  background: currentColor;
  transform: none;
}
.menu-icon--patch > b:nth-of-type(1) { left: 43%; top: 7%; }
.menu-icon--patch > b:nth-of-type(2) { left: 80%; top: 47%; transform: rotate(90deg); }
.menu-icon--patch > b:nth-of-type(3) { left: 43%; top: 88%; }
.menu-icon--patch > b:nth-of-type(4) { left: 7%; top: 47%; transform: rotate(90deg); }

/* Dos lienzos apilados; el delantero tiene la esquina doblada. */
.menu-icon--canvas-versions::before {
  left: 8%; top: 20%; width: 66%; height: 69%;
  border: calc(var(--icon-size) * .0375) solid currentColor;
  border-radius: calc(var(--icon-size) * .0625);
  background: color-mix(in srgb,currentColor 5%,transparent);
}
.menu-icon--canvas-versions .menu-icon__ring {
  display: block;
  left: 25%; top: 8%; width: 67%; height: 68%;
  border: calc(var(--icon-size) * .04375) solid currentColor;
  border-radius: calc(var(--icon-size) * .0625);
  background: color-mix(in srgb,currentColor 12%,#06131c);
}
.menu-icon--canvas-versions::after {
  right: 8%; top: 8%; width: 26%; height: 26%;
  border-left: calc(var(--icon-size) * .0375) solid currentColor;
  border-bottom: calc(var(--icon-size) * .0375) solid currentColor;
  clip-path: polygon(0 0,100% 100%,0 100%);
  background: color-mix(in srgb,currentColor 24%,transparent);
}
.menu-icon--canvas-versions .menu-icon__mark {
  display: block;
  left: 41%; top: 35%; width: 34%; height: 19%;
  border: calc(var(--icon-size) * .03125) solid currentColor;
  border-radius: 50%;
  background: transparent;
}

/* CAPAS ---------------------------------------------------------------- */
/* Fachada con cúpula central, columnas y puerta. */
.menu-icon--constructions .menu-icon__ring {
  display: block;
  left: 10%; top: 42%; width: 80%; height: 43%;
  border: calc(var(--icon-size) * .04375) solid currentColor;
  border-radius: calc(var(--icon-size) * .046875);
  background: color-mix(in srgb,currentColor 7%,transparent);
}
.menu-icon--constructions::before {
  left: 24%; top: 10%; width: 52%; height: 39%;
  border: calc(var(--icon-size) * .04375) solid currentColor;
  border-bottom: 0;
  border-radius: 52% 52% 0 0;
  background: color-mix(in srgb,currentColor 8%,transparent);
}
.menu-icon--constructions::after {
  left: 43%; top: 0; width: 14%; height: 15%;
  border-radius: 50% 50% 0 0;
  background: currentColor;
}
.menu-icon--constructions > b:nth-of-type(-n+3) {
  display: block;
  top: 51%; width: 13%; height: 25%;
  border: calc(var(--icon-size) * .03125) solid currentColor;
  border-radius: calc(var(--icon-size) * .03) calc(var(--icon-size) * .03) 0 0;
  background: transparent;
  transform: none;
}
.menu-icon--constructions > b:nth-of-type(1) { left: 20%; }
.menu-icon--constructions > b:nth-of-type(2) { left: 44%; height: 34%; }
.menu-icon--constructions > b:nth-of-type(3) { left: 68%; }

/* Estrella de ocho puntas dentro de un lienzo cuadrado. */
.menu-icon--painted-icons .menu-icon__ring {
  display: block;
  inset: 7%;
  border: calc(var(--icon-size) * .04375) solid currentColor;
  border-radius: calc(var(--icon-size) * .0625);
  background: color-mix(in srgb,currentColor 5%,transparent);
}
.menu-icon--painted-icons .menu-icon__core {
  display: block;
  inset: 23%;
  border: 0;
  border-radius: 0;
  clip-path: polygon(50% 0,61% 31%,85% 15%,69% 39%,100% 50%,69% 61%,85% 85%,61% 69%,50% 100%,39% 69%,15% 85%,31% 61%,0 50%,31% 39%,15% 15%,39% 31%);
  background: currentColor;
}
.menu-icon--painted-icons .menu-icon__mark {
  display: block;
  inset: 42%;
  border-radius: 50%;
  background: color-mix(in srgb,currentColor 14%,#06131c);
}

/* MANDOS --------------------------------------------------------------- */
/* Interrogación geométrica construida sin caracteres tipográficos. */
.menu-icon--help::before {
  left: 24%; top: 5%; width: 53%; height: 45%;
  border: calc(var(--icon-size) * .053125) solid currentColor;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(-12deg);
}
.menu-icon--help::after {
  left: 49%; top: 38%; width: 20%; height: 28%;
  border-left: calc(var(--icon-size) * .053125) solid currentColor;
  border-bottom: calc(var(--icon-size) * .053125) solid currentColor;
  border-radius: 0 0 0 70%;
  transform: rotate(18deg);
}
.menu-icon--help .menu-icon__mark {
  display: block;
  left: 44%; top: 79%; width: 14%; height: 14%;
  border-radius: 50%;
  background: currentColor;
}

/* Ojo abierto: almendra exterior, iris y pupila. */
.menu-icon--visibility::before {
  left: 7%; top: 23%; width: 86%; height: 55%;
  border: calc(var(--icon-size) * .046875) solid currentColor;
  border-radius: 78% 12% 78% 12%;
  background: color-mix(in srgb,currentColor 5%,transparent);
  transform: rotate(45deg);
}
.menu-icon--visibility .menu-icon__ring {
  display: block;
  left: 32%; top: 25%; width: 37%; height: 50%;
  border: calc(var(--icon-size) * .040625) solid currentColor;
  border-radius: 50%;
  background: color-mix(in srgb,currentColor 10%,#06131c);
}
.menu-icon--visibility .menu-icon__core {
  display: block;
  left: 43%; top: 40%; width: 15%; height: 20%;
  border: 0;
  border-radius: 50%;
  background: currentColor;
}

/* Engranaje de seis dientes con aro y eje central. */
.menu-icon--settings .menu-icon__ring {
  display: block;
  inset: 23%;
  border: calc(var(--icon-size) * .05) solid currentColor;
  border-radius: 50%;
  background: color-mix(in srgb,currentColor 7%,transparent);
}
.menu-icon--settings .menu-icon__core {
  display: block;
  inset: 39%;
  border: calc(var(--icon-size) * .0375) solid currentColor;
  border-radius: 50%;
  background: color-mix(in srgb,currentColor 8%,#06131c);
}
.menu-icon--settings > b:nth-of-type(-n+4),
.menu-icon--settings::before,
.menu-icon--settings::after {
  left: 45%; top: 3%; width: 10%; height: 25%;
  border: 0;
  border-radius: calc(var(--icon-size) * .046875);
  background: currentColor;
  transform-origin: 50% 188%;
}
.menu-icon--settings > b:nth-of-type(-n+4) { display: block; }
.menu-icon--settings > b:nth-of-type(1) { transform: rotate(0deg); }
.menu-icon--settings > b:nth-of-type(2) { transform: rotate(60deg); }
.menu-icon--settings > b:nth-of-type(3) { transform: rotate(120deg); }
.menu-icon--settings > b:nth-of-type(4) { transform: rotate(180deg); }
.menu-icon--settings::before { transform: rotate(240deg); }
.menu-icon--settings::after { transform: rotate(300deg); }

/* Dos eslabones engarzados en diagonal. */
.menu-icon--linked-set .menu-icon__ring,
.menu-icon--linked-set .menu-icon__core {
  display: block;
  width: 55%; height: 34%;
  border: calc(var(--icon-size) * .046875) solid currentColor;
  border-radius: calc(var(--icon-size) * .1875);
  background: color-mix(in srgb,currentColor 5%,transparent);
  transform: rotate(-39deg);
}
.menu-icon--linked-set .menu-icon__ring { left: 4%; top: 42%; }
.menu-icon--linked-set .menu-icon__core { right: 4%; top: 24%; left: auto; bottom: auto; }
.menu-icon--linked-set::before,
.menu-icon--linked-set::after {
  width: 24%;
  border-top: calc(var(--icon-size) * .046875) solid currentColor;
  transform: rotate(-39deg);
}
.menu-icon--linked-set::before { left: 28%; top: 58%; }
.menu-icon--linked-set::after { right: 28%; top: 40%; }


/* ============ SUELTOS 29-ago-2026 (entrega GPT «iconos sueltos»): sonido y
   musica — solo sus reglas; la base del sistema ya vive arriba ============ */
.menu-icon--sound :where(.menu-icon__tile,.menu-icon__ring,.menu-icon__core,.menu-icon__mark,b) {
  display: none;
}

.menu-icon--sound::before,
.menu-icon--sound::after,
.menu-icon--sound > b {
  content: '';
  position: absolute;
  box-sizing: border-box;
}

.menu-icon--sound::before {
  left: 5%;
  top: 35%;
  width: 27%;
  height: 31%;
  border: calc(var(--icon-size) * .04375) solid currentColor;
  border-radius: calc(var(--icon-size) * .046875);
  background: color-mix(in srgb,currentColor 15%,transparent);
}

.menu-icon--sound::after {
  left: 27%;
  top: 22%;
  width: 31%;
  height: 57%;
  clip-path: polygon(0 31%,100% 0,100% 100%,0 69%);
  background: currentColor;
}

.menu-icon--sound > b:nth-of-type(-n+3) {
  display: block;
  left: 49%;
  border: calc(var(--icon-size) * .04375) solid currentColor;
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  background: transparent;
}

.menu-icon--sound > b:nth-of-type(1) { top: 38%; width: 20%; height: 25%; }
.menu-icon--sound > b:nth-of-type(2) { top: 25%; width: 35%; height: 50%; opacity: .78; }
.menu-icon--sound > b:nth-of-type(3) { top: 12%; width: 49%; height: 76%; opacity: .56; }


.menu-icon--music :where(.menu-icon__tile,.menu-icon__ring,.menu-icon__core,.menu-icon__mark,b) {
  display: none;
}

.menu-icon--music .menu-icon__ring,
.menu-icon--music .menu-icon__core,
.menu-icon--music > b {
  position: absolute;
  box-sizing: border-box;
}

.menu-icon--music .menu-icon__ring,
.menu-icon--music .menu-icon__core {
  display: block;
  width: 29%;
  height: 22%;
  border: 0;
  border-radius: 50%;
  background: currentColor;
  transform: rotate(-14deg);
}

.menu-icon--music .menu-icon__ring { left: 5%; top: 66%; }
.menu-icon--music .menu-icon__core { left: 60%; top: 54%; }

.menu-icon--music > b:nth-of-type(-n+3) {
  display: block;
  border: 0;
  border-radius: calc(var(--icon-size) * .03);
  background: currentColor;
  transform-origin: center;
}

.menu-icon--music > b:nth-of-type(1) {
  left: 28%; top: 18%; width: 7%; height: 57%; transform: rotate(-7deg);
}
.menu-icon--music > b:nth-of-type(2) {
  left: 82%; top: 7%; width: 7%; height: 58%; transform: rotate(-7deg);
}
.menu-icon--music > b:nth-of-type(3) {
  left: 29%; top: 12%; width: 60%; height: 13%; transform: rotate(-9deg);
}


/* ---- sueltos 29-ago, segunda entrega: las dos ZONAS de sonido ---- */
.menu-icon--sound-paradise :where(.menu-icon__tile,.menu-icon__ring,.menu-icon__core,.menu-icon__mark,b) {
  display: none;
}

.menu-icon--sound-paradise::before,
.menu-icon--sound-paradise::after,
.menu-icon--sound-paradise > b {
  content: '';
  position: absolute;
  box-sizing: border-box;
}

/* Rosetón de ocho puntas, reducido a una silueta limpia. */
.menu-icon--sound-paradise::before {
  left: 2%;
  top: 29%;
  width: 41%;
  height: 41%;
  background: currentColor;
  clip-path: polygon(50% 0,62% 29%,85% 15%,71% 38%,100% 50%,71% 62%,85% 85%,62% 71%,50% 100%,38% 71%,15% 85%,29% 62%,0 50%,29% 38%,15% 15%,38% 29%);
}

.menu-icon--sound-paradise::after {
  left: 15%;
  top: 42%;
  width: 15%;
  height: 15%;
  border-radius: 50%;
  background: color-mix(in srgb,currentColor 24%,transparent);
  box-shadow: 0 0 0 calc(var(--icon-size) * .035) currentColor;
}

/* Tres ondas: la identidad de audio se mantiene incluso a 24 px. */
.menu-icon--sound-paradise > b:nth-of-type(-n+3) {
  display: block;
  left: 35%;
  border: calc(var(--icon-size) * .04375) solid currentColor;
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  background: transparent;
}

.menu-icon--sound-paradise > b:nth-of-type(1) { top: 39%; width: 20%; height: 23%; }
.menu-icon--sound-paradise > b:nth-of-type(2) { top: 26%; width: 38%; height: 49%; opacity: .78; }
.menu-icon--sound-paradise > b:nth-of-type(3) { top: 12%; width: 57%; height: 77%; opacity: .56; }


.menu-icon--sound-fire :where(.menu-icon__tile,.menu-icon__ring,.menu-icon__core,.menu-icon__mark,b) {
  display: none;
}

.menu-icon--sound-fire::before,
.menu-icon--sound-fire::after,
.menu-icon--sound-fire > b {
  content: '';
  position: absolute;
  box-sizing: border-box;
}

/* Llama exterior e interior: lectura inequívoca de incendio. */
.menu-icon--sound-fire::before {
  left: 2%;
  top: 9%;
  width: 42%;
  height: 79%;
  border-radius: 56% 44% 58% 42% / 68% 62% 38% 32%;
  background: currentColor;
  clip-path: polygon(48% 0,72% 27%,91% 19%,84% 52%,100% 69%,84% 91%,55% 100%,23% 92%,0 69%,15% 39%,35% 56%);
}

.menu-icon--sound-fire::after {
  left: 17%;
  top: 52%;
  width: 15%;
  height: 28%;
  border-radius: 60% 40% 55% 45% / 70% 60% 40% 30%;
  background: color-mix(in srgb,currentColor 25%,transparent);
  transform: rotate(8deg);
}

.menu-icon--sound-fire > b:nth-of-type(-n+3) {
  display: block;
  left: 37%;
  border: calc(var(--icon-size) * .04375) solid currentColor;
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  background: transparent;
}

.menu-icon--sound-fire > b:nth-of-type(1) { top: 39%; width: 19%; height: 23%; }
.menu-icon--sound-fire > b:nth-of-type(2) { top: 26%; width: 36%; height: 49%; opacity: .78; }
.menu-icon--sound-fire > b:nth-of-type(3) { top: 12%; width: 54%; height: 77%; opacity: .56; }


/* ---- suelto 29-ago, tercera entrega: INFO (la interrogacion legible) ---- */
.menu-icon--info :where(.menu-icon__tile,.menu-icon__ring,.menu-icon__core,.menu-icon__mark,b) {
  display: none;
}

.menu-icon--info::before,
.menu-icon--info::after {
  position: absolute;
  box-sizing: border-box;
}

.menu-icon--info::before {
  content: '';
  inset: 7%;
  border: calc(var(--icon-size) * .0625) solid currentColor;
  border-radius: 50%;
  background: color-mix(in srgb,currentColor 7%,transparent);
}

.menu-icon--info::after {
  content: '?';
  inset: 4% 6% 7%;
  display: grid;
  place-items: center;
  color: currentColor;
  font-family: Arial,Helvetica,sans-serif;
  font-size: calc(var(--icon-size) * .69);
  font-weight: 900;
  line-height: 1;
  transform: translateY(calc(var(--icon-size) * -.015));
}