/**
 * ═══════════════════════════════════════════════════════════
 * MÓDULO SHARE — Estilos CSS
 * Archivo: assets/css/share.css
 * ═══════════════════════════════════════════════════════════
 */

/* ─── BOTONES INLINE ──────────────────────────────────── */
.share-inline{padding:.75rem 0}
.share-inline--top{border-bottom:1px solid #eee;margin-bottom:1rem}
.share-inline--bottom{border-top:1px solid #eee;margin-top:1.5rem;padding-top:1rem}

.share-buttons--inline{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.share-label{font-size:.8rem;font-weight:600;color:#666;margin-right:.25rem}

.share-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .7rem;border-radius:6px;font-size:.78rem;font-weight:600;color:#fff;background:var(--share-color);text-decoration:none;transition:all .2s;border:none;cursor:pointer;line-height:1}
.share-btn:hover{opacity:.85;transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.share-btn__icon{width:16px;height:16px;display:flex;align-items:center}
.share-btn__icon svg{width:16px;height:16px}
.share-btn__name{white-space:nowrap}

/* Estilo rounded */
.share-buttons--rounded .share-btn{border-radius:20px;padding:.4rem .8rem}

/* Estilo square */
.share-buttons--square .share-btn{border-radius:4px}

/* Estilo icon-only (sin texto en móvil) */
@media(max-width:480px){
    .share-btn__name{display:none}
    .share-btn{padding:.5rem}
    .share-btn__icon{width:20px;height:20px}
    .share-btn__icon svg{width:20px;height:20px}
}

/* ─── BOTONES FLOATING ────────────────────────────────── */
.share-floating{position:fixed;right:12px;bottom:80px;left:auto;z-index:900;display:flex;flex-direction:column-reverse;align-items:center;gap:.4rem}

.share-floating__toggle{width:48px;height:48px;border-radius:50%;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 12px rgba(0,0,0,.25);transition:transform .3s,box-shadow .3s;z-index:2}
.share-floating__toggle:hover{transform:scale(1.08);box-shadow:0 4px 16px rgba(0,0,0,.3)}
.share-floating__toggle.active{transform:rotate(45deg)}

.share-floating__panel{display:flex;flex-direction:column-reverse;gap:.35rem;opacity:0;visibility:hidden;transform:translateY(10px);transition:all .25s ease;pointer-events:none}
.share-floating__panel.open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:all}

.share-floating__btn{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.2);transition:all .2s;animation:sharePopIn .25s ease backwards}
.share-floating__btn:hover{transform:scale(1.12);box-shadow:0 3px 12px rgba(0,0,0,.3)}
.share-floating__icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center}
.share-floating__icon svg{width:20px;height:20px}

/* Animación escalonada */
.share-floating__panel.open .share-floating__btn:nth-child(1){animation-delay:.03s}
.share-floating__panel.open .share-floating__btn:nth-child(2){animation-delay:.06s}
.share-floating__panel.open .share-floating__btn:nth-child(3){animation-delay:.09s}
.share-floating__panel.open .share-floating__btn:nth-child(4){animation-delay:.12s}
.share-floating__panel.open .share-floating__btn:nth-child(5){animation-delay:.15s}
.share-floating__panel.open .share-floating__btn:nth-child(6){animation-delay:.18s}
.share-floating__panel.open .share-floating__btn:nth-child(7){animation-delay:.21s}

@keyframes sharePopIn{
    from{opacity:0;transform:scale(.5) translateY(8px)}
    to{opacity:1;transform:scale(1) translateY(0)}
}

/* Estilo rounded floating */
.share-floating--square .share-floating__toggle{border-radius:10px}
.share-floating--square .share-floating__btn{border-radius:8px}

/* Responsive: mover a la derecha en móvil */
@media(max-width:768px){
    .share-floating{left:auto;right:12px;bottom:70px}
}

/* ─── TOAST DE CONFIRMACIÓN ───────────────────────────── */
.share-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(100px);background:#333;color:#fff;padding:.6rem 1.2rem;border-radius:8px;font-size:.82rem;font-weight:600;z-index:9999;opacity:0;transition:all .3s ease;pointer-events:none}
.share-toast.visible{transform:translateX(-50%) translateY(0);opacity:1}

/* ─── PRINT: ocultar share ────────────────────────────── */


/* Print: ocultar share */
@media print{.share-floating,.share-inline{display:none!important}}