/* =============================================================================
   componentes/compartir.css — Botón COMPARTIR (X / Facebook / WhatsApp)
   (componentes/_compartir.php)
   -----------------------------------------------------------------------------
   Port de site-25 inc-compartir.asp. Estética "tecnología de sonido": un botón
   de altavoz metálico que, al abrirse, emite ondas y despliega las redes en
   abanico lineal. En la ficha se le iguala al resto de acciones: ver .ss-acciones
   en vistas/catalogo/producto.css.
   ============================================================================= */

.ssh{--sz:38px;--net:32px;--fg:#8a9199;position:relative;width:var(--sz);height:var(--sz)}

/* Ondas que salen del botón mientras está abierto. */
.ssh .ondas{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:1}
.ssh .ondas span{position:absolute;width:100%;height:100%;border-radius:50%;border:2px solid #c10049;opacity:0}
.ssh.is-open .ondas span{animation:sshOnda 1.9s ease-out infinite}
.ssh.is-open .ondas span:nth-child(2){animation-delay:.63s}
.ssh.is-open .ondas span:nth-child(3){animation-delay:1.26s}
@keyframes sshOnda{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.6);opacity:0}}

/* Botón principal: altavoz metálico. */
.ssh__btn{position:relative;z-index:3;width:var(--sz);height:var(--sz);border:1px solid #05070a;border-radius:50%;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;padding:0;background:radial-gradient(circle at 50% 42%,#363c44 0%,#20242a 34%,#10131700 36%),radial-gradient(circle at 50% 50%,#14171b 0%,#14171b 52%,#2a2f37 54%,#0e1114 100%);box-shadow:inset 0 1px 2px rgba(255,255,255,.1),inset 0 -3px 5px rgba(0,0,0,.6),0 4px 10px rgba(0,0,0,.4);transition:transform .3s cubic-bezier(.34,1.56,.64,1),color .25s}
.ssh__btn svg{width:42%;height:42%;fill:currentColor}
.ssh__btn::before{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid rgba(193,0,73,0);transition:.3s}
.ssh.is-open .ssh__btn{color:#c10049}
.ssh.is-open .ssh__btn::before{border-color:#c10049;box-shadow:0 0 12px rgba(193,0,73,.6)}

/* Abanico de redes. --i es la posición de cada una (0, 1, 2): marca lo lejos que sale y el
   retardo con que aparece. Antes iba en un style="--i:N" en cada <li>. */
.ssh__fan{list-style:none;margin:0;padding:0;position:absolute;left:50%;top:50%;z-index:2}
.ssh__fan li{position:absolute;left:0;top:0}
.ssh__fan li:nth-child(1){--i:0}
.ssh__fan li:nth-child(2){--i:1}
.ssh__fan li:nth-child(3){--i:2}
.ssh-net{--tx:calc((var(--net) + 10px) * (var(--i) + 1) * -1);--ty:0px;--brand:#adb5bd;--glow:rgba(0,0,0,.4);position:relative;width:var(--net);height:var(--net);border-radius:50%;text-decoration:none;border:1px solid transparent;color:var(--fg);display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 42%,#363c44 0%,#20242a 40%,#10131700 42%),radial-gradient(circle at 50% 50%,#14171b 0%,#14171b 54%,#2a2f37 56%,#0e1114 100%);box-shadow:inset 0 1px 1px rgba(255,255,255,.08),0 4px 10px rgba(0,0,0,.45);transform:translate(-50%,-50%) scale(.2);opacity:0;pointer-events:none;transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s,color .2s,box-shadow .25s}
.ssh--der .ssh-net{--tx:calc((var(--net) + 10px) * (var(--i) + 1))}
.ssh-net svg{width:52%;height:52%;fill:currentColor}
.ssh.is-open .ssh-net{opacity:1;pointer-events:auto;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(1);transition-delay:calc(var(--i)*45ms)}
.ssh-net:hover,.ssh-net:focus-visible{color:#fff;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--brand) 85%,#fff) 0%,var(--brand) 60%);transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(1.15);box-shadow:0 0 16px var(--glow)}

/* Rótulo con el nombre de la red al pasar por encima. */
.ssh-net::after{content:attr(data-nombre);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);background:#05070a;color:#fff;font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:5px;white-space:nowrap;border:1px solid var(--brand);opacity:0;transition:opacity .15s;pointer-events:none}
.ssh-net:hover::after,.ssh-net:focus-visible::after{opacity:1}

/* Color de marca de cada red (se ve al pasar por encima). */
.ssh-x{--brand:#000;--glow:rgba(255,255,255,.3)}
.ssh-fb{--brand:#1877f2;--glow:rgba(24,119,242,.5)}
.ssh-wa{--brand:#25d366;--glow:rgba(37,211,102,.5)}
.ssh-x:hover{background:radial-gradient(circle at 50% 40%,#333 0%,#000 60%)}