/* ==========================================================================
   HADES One Universe — Iconos con piel temática (.sico)
   Mismo dibujo SVG; cada tema cambia forma, paleta, grosor y acabado.
   Uso: <span class="sico" data-tone="purple"><svg><use href="#i-erp"/></svg></span>
   ========================================================================== */

.sico{--s:42px;--stroke:1.8;position:relative;isolation:isolate;display:inline-grid;place-items:center;flex:none;width:var(--s);height:var(--s);
  border-radius:calc(var(--s) * .3);color:var(--tone);background:color-mix(in srgb,var(--tone) 15%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 28%,transparent);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.sico svg{position:relative;z-index:2;width:calc(var(--s) * .52);height:calc(var(--s) * .52);stroke-width:var(--stroke);overflow:visible}
.ic{width:1em;height:1em;flex:none;stroke-width:1.9}

/* Paleta base */
[data-tone="purple"]{--tone:#a78bfa}[data-tone="pink"]{--tone:#f472b6}[data-tone="blue"]{--tone:#60a5fa}
[data-tone="cyan"]{--tone:#22d3ee}[data-tone="mint"]{--tone:#34d399}[data-tone="gold"]{--tone:#fbbf24}

/* ---------- Galaxia: planetas con anillo y brillo ---------- */
[data-theme="galaxia"] [data-tone="purple"]{--tone:#a78bfa}[data-theme="galaxia"] [data-tone="pink"]{--tone:#f472b6}
[data-theme="galaxia"] [data-tone="blue"]{--tone:#818cf8}[data-theme="galaxia"] [data-tone="cyan"]{--tone:#93c5fd}
[data-theme="galaxia"] [data-tone="mint"]{--tone:#c4b5fd}[data-theme="galaxia"] [data-tone="gold"]{--tone:#f0abfc}
[data-theme="galaxia"] .sico{border-radius:50%;color:#fff;
  background:radial-gradient(circle at 30% 26%,color-mix(in srgb,#fff 70%,var(--tone)) 0,var(--tone) 34%,color-mix(in srgb,var(--tone) 40%,#1a0533) 78%,#12032a 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 calc(var(--s) * .45) color-mix(in srgb,var(--tone) 60%,transparent),inset calc(var(--s) * -.1) calc(var(--s) * -.12) calc(var(--s) * .2) rgba(10,0,30,.55)}
[data-theme="galaxia"] .sico:after{content:"";position:absolute;left:-22%;right:-22%;top:50%;height:30%;margin-top:-15%;border-radius:50%;z-index:3;pointer-events:none;
  border:1.5px solid color-mix(in srgb,#fff 45%,var(--tone));border-top-color:transparent;transform:rotate(-20deg);opacity:.85}
[data-theme="galaxia"] .sico svg{filter:drop-shadow(0 1px 2px rgba(20,0,40,.6))}

/* ---------- Nébula: esferas difusas fucsia ---------- */
[data-theme="nebula"] [data-tone="purple"]{--tone:#c084fc}[data-theme="nebula"] [data-tone="pink"]{--tone:#f0abfc}
[data-theme="nebula"] [data-tone="blue"]{--tone:#a78bfa}[data-theme="nebula"] [data-tone="cyan"]{--tone:#e879f9}
[data-theme="nebula"] [data-tone="mint"]{--tone:#f9a8d4}[data-theme="nebula"] [data-tone="gold"]{--tone:#fda4af}
[data-theme="nebula"] .sico{border-radius:50%;color:#fff;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--tone) 85%,#fff),color-mix(in srgb,var(--tone) 55%,#3b0a45) 70%);box-shadow:0 0 0 4px color-mix(in srgb,var(--tone) 18%,transparent),0 0 calc(var(--s) * .5) color-mix(in srgb,var(--tone) 50%,transparent)}

/* ---------- Aurora: cristales boreales ---------- */
[data-theme="aurora"] [data-tone="purple"]{--tone:#86efac}[data-theme="aurora"] [data-tone="pink"]{--tone:#a3e635}
[data-theme="aurora"] [data-tone="blue"]{--tone:#5eead4}[data-theme="aurora"] [data-tone="cyan"]{--tone:#67e8f9}
[data-theme="aurora"] [data-tone="mint"]{--tone:#6ee7b7}[data-theme="aurora"] [data-tone="gold"]{--tone:#d9f99d}
[data-theme="aurora"] .sico{border-radius:calc(var(--s) * .32) calc(var(--s) * .12);color:var(--tone);background:linear-gradient(160deg,color-mix(in srgb,var(--tone) 26%,transparent),color-mix(in srgb,var(--tone) 6%,transparent));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--tone) 60%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--tone) 22%,transparent)}

/* ---------- Solar: soles con corona ---------- */
[data-theme="solar"] [data-tone="purple"]{--tone:#fb923c}[data-theme="solar"] [data-tone="pink"]{--tone:#f87171}
[data-theme="solar"] [data-tone="blue"]{--tone:#fbbf24}[data-theme="solar"] [data-tone="cyan"]{--tone:#fdba74}
[data-theme="solar"] [data-tone="mint"]{--tone:#facc15}[data-theme="solar"] [data-tone="gold"]{--tone:#f59e0b}
[data-theme="solar"] .sico{border-radius:50%;color:#2a1300;background:radial-gradient(circle,color-mix(in srgb,var(--tone) 70%,#fff) 0,var(--tone) 55%,color-mix(in srgb,var(--tone) 70%,#7c2d12) 100%);box-shadow:0 0 calc(var(--s) * .4) color-mix(in srgb,var(--tone) 55%,transparent)}
[data-theme="solar"] .sico:before{content:"";position:absolute;inset:-16%;border-radius:50%;z-index:-1;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--tone) 55%,transparent) 0 6deg,transparent 6deg 20deg);-webkit-mask:radial-gradient(circle,transparent 58%,#000 60%,transparent 72%);mask:radial-gradient(circle,transparent 58%,#000 60%,transparent 72%)}

/* ---------- Rojo Élite: hexágonos HUD ---------- */
[data-theme="rojo-elite"] [data-tone]{--tone:#ff1f3d}
[data-theme="rojo-elite"] [data-tone="pink"],[data-theme="rojo-elite"] [data-tone="gold"]{--tone:#ff4d63}
[data-theme="rojo-elite"] .sico{--stroke:2.2;border-radius:0;color:var(--tone);background:none;box-shadow:none}
[data-theme="rojo-elite"] .sico:before,[data-theme="rojo-elite"] .sico:after{content:"";position:absolute;inset:0;clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%)}
[data-theme="rojo-elite"] .sico:before{background:var(--tone);z-index:0}
[data-theme="rojo-elite"] .sico:after{inset:2px;background:linear-gradient(180deg,#17171b,#0b0b0e);z-index:1}
[data-theme="rojo-elite"] .sico svg{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--tone) 70%,transparent))}

/* ---------- Clásico: cajas planas tipo AdminLTE ---------- */
[data-theme="clasico"] [data-tone="purple"]{--tone:#605ca8}[data-theme="clasico"] [data-tone="pink"]{--tone:#d81b60}
[data-theme="clasico"] [data-tone="blue"]{--tone:#3c8dbc}[data-theme="clasico"] [data-tone="cyan"]{--tone:#00a7d0}
[data-theme="clasico"] [data-tone="mint"]{--tone:#00a65a}[data-theme="clasico"] [data-tone="gold"]{--tone:#e08e0b}
[data-theme="clasico"] .sico{--stroke:2;border-radius:3px;color:#fff;background:var(--tone);box-shadow:0 1px 1px rgba(0,0,0,.15)}

/* ---------- Menta: píldoras suaves ---------- */
[data-theme="menta"] [data-tone="purple"]{--tone:#6e62cc}[data-theme="menta"] [data-tone="pink"]{--tone:#c95283}
[data-theme="menta"] [data-tone="blue"]{--tone:#3477b6}[data-theme="menta"] [data-tone="cyan"]{--tone:#0b8fa2}
[data-theme="menta"] [data-tone="mint"]{--tone:#058a61}[data-theme="menta"] [data-tone="gold"]{--tone:#b47b08}
[data-theme="menta"] .sico{border-radius:42%;background:color-mix(in srgb,var(--tone) 14%,var(--surface-solid));box-shadow:0 4px 12px color-mix(in srgb,var(--tone) 18%,transparent)}

/* ---------- Perla: medallones editoriales ---------- */
[data-theme="perla"] [data-tone="purple"]{--tone:#7457d6}[data-theme="perla"] [data-tone="pink"]{--tone:#a8577f}
[data-theme="perla"] [data-tone="blue"]{--tone:#55689f}[data-theme="perla"] [data-tone="cyan"]{--tone:#4a7f93}
[data-theme="perla"] [data-tone="mint"]{--tone:#56805f}[data-theme="perla"] [data-tone="gold"]{--tone:#9a772a}
[data-theme="perla"] .sico{--stroke:1.5;border-radius:50%;background:var(--surface-solid);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 45%,transparent),0 0 0 3px var(--surface-solid),0 0 0 4px color-mix(in srgb,var(--tone) 20%,transparent)}

/* ---------- Cristal: vidrio con canto de luz ---------- */
[data-theme="cristal"] [data-tone="purple"]{--tone:#5b5be6}[data-theme="cristal"] [data-tone="pink"]{--tone:#c81e6a}
[data-theme="cristal"] [data-tone="blue"]{--tone:#4a42d6}[data-theme="cristal"] [data-tone="cyan"]{--tone:#0b8fcf}
[data-theme="cristal"] [data-tone="mint"]{--tone:#0d8577}[data-theme="cristal"] [data-tone="gold"]{--tone:#c26906}
[data-theme="cristal"] .sico{border-radius:calc(var(--s) * .28);background:linear-gradient(145deg,rgba(255,255,255,.75),color-mix(in srgb,var(--tone) 16%,rgba(255,255,255,.3)));box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px color-mix(in srgb,var(--tone) 22%,transparent),0 8px 18px color-mix(in srgb,var(--tone) 16%,transparent)}

/* ---------- Nature: hojas ---------- */
[data-theme="nature"] [data-tone="purple"]{--tone:#5e7330}[data-theme="nature"] [data-tone="pink"]{--tone:#9a5a43}
[data-theme="nature"] [data-tone="blue"]{--tone:#3b6875}[data-theme="nature"] [data-tone="cyan"]{--tone:#4a8266}
[data-theme="nature"] [data-tone="mint"]{--tone:#3f7d20}[data-theme="nature"] [data-tone="gold"]{--tone:#a66e1a}
[data-theme="nature"] .sico{border-radius:58% 12% 58% 12%;background:color-mix(in srgb,var(--tone) 16%,var(--surface-solid));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 26%,transparent)}

/* ---------- Ártico: escarcha ---------- */
[data-theme="artico"] [data-tone="purple"]{--tone:#5f72cc}[data-theme="artico"] [data-tone="pink"]{--tone:#b05d8e}
[data-theme="artico"] [data-tone="blue"]{--tone:#0277b5}[data-theme="artico"] [data-tone="cyan"]{--tone:#0784a6}
[data-theme="artico"] [data-tone="mint"]{--tone:#0d8b7d}[data-theme="artico"] [data-tone="gold"]{--tone:#b07a12}
[data-theme="artico"] .sico{border-radius:calc(var(--s) * .3);background:linear-gradient(180deg,color-mix(in srgb,var(--tone) 8%,#f4f9fb),color-mix(in srgb,var(--tone) 20%,#e6f1f6));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 30%,transparent),inset 0 -3px 0 color-mix(in srgb,var(--tone) 14%,transparent)}

/* ---------- Titanio: placas metálicas ---------- */
[data-theme="titanio"] [data-tone="purple"]{--tone:#6250c4}[data-theme="titanio"] [data-tone="pink"]{--tone:#954f7d}
[data-theme="titanio"] [data-tone="blue"]{--tone:#45659a}[data-theme="titanio"] [data-tone="cyan"]{--tone:#397f93}
[data-theme="titanio"] [data-tone="mint"]{--tone:#397f68}[data-theme="titanio"] [data-tone="gold"]{--tone:#8c7034}
[data-theme="titanio"] .sico{--stroke:2;border-radius:calc(var(--s) * .2);background:linear-gradient(145deg,#f3f4f6,#c6ccd4);box-shadow:inset 0 1px 0 #fafbfc,inset 0 -2px 0 rgba(0,0,0,.08),0 2px 6px rgba(20,25,40,.18)}