/* ============================================================
   Praxma Social Share — CSS completo
   Glass morphism + animaciones + contadores + reacciones
   ============================================================ */

/* ---- Variables base ---- */
:root {
    --pss-gap: 8px;
    --pss-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
    --pss-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --pss-glass-bg: rgba(255,255,255,0.12);
    --pss-glass-border: rgba(255,255,255,0.25);
    --pss-glass-blur: 14px;
    --pss-glass-shadow: 0 4px 24px rgba(0,0,0,.18);
    --pss-glass-hover-shadow: 0 8px 32px rgba(0,0,0,.28);
}

/* ================================================================
   BLOQUE CONTENEDOR
   ================================================================ */
.pss-block {
    position: relative;
    margin: 2.5em 0;
    font-family: inherit;
}

/* ================================================================
   SEPARADORES
   ================================================================ */
.pss-separator {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 20px;
}
.pss-separator--bottom { margin: 20px 0 0; }
.pss-sep-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor 40%, transparent);
    opacity: .18;
}
.pss-sep-icon {
    display: flex;
    align-items: center;
    opacity: .45;
    flex-shrink: 0;
}
.pss-sep-icon svg { width: 18px; height: 18px; }
.pss-sep-text {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .3;
    flex-shrink: 0;
}

/* ================================================================
   CONTADORES
   ================================================================ */
.pss-counters {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 14px;
}
.pss-counter {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    opacity: .55;
}
.pss-counter svg { width: 13px; height: 13px; }
.pss-counter__num {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: color .3s;
}
.pss-counter__label { font-weight: 400; }

/* Estado vacío — texto invitación en lugar del cero */
.pss-counter--empty { opacity: .4; font-style: italic; }
.pss-counter__empty { font-size: 11px; }

/* Reacción — texto vacío */
.pss-reaction__count--empty {
    font-size: 11px;
    font-weight: 500;
    font-style: italic;
    opacity: .7;
}

/* ================================================================
   FRASE PROVOCATIVA
   ================================================================ */
.pss-phrase {
    text-align: center;
    font-size: clamp(14px, 2.5vw, 17px);
    font-style: italic;
    line-height: 1.55;
    opacity: .75;
    margin: 0 0 20px;
    padding: 0 10px;
}

/* ================================================================
   CONTENEDOR DE BOTONES
   ================================================================ */
.pss-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
.pss-primary, .pss-secondary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pss-gap);
    justify-content: center;
    align-items: center;
}
/* CRÍTICO: el atributo hidden debe ganar sobre display:flex */
.pss-secondary[hidden] {
    display: none !important;
}
.pss-secondary {
    /* animación manejada por JS inline styles */
}
@keyframes pssExpand {
    from { opacity: 0; transform: scaleY(0.7) translateY(-10px); transform-origin: top; }
    to   { opacity: 1; transform: scaleY(1) translateY(0); transform-origin: top; }
}

/* ================================================================
   BOTÓN — BASE GLASS
   ================================================================ */
.pss-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--pss-glass-border);
    background: var(--pss-glass-bg);
    backdrop-filter: blur(var(--pss-glass-blur));
    -webkit-backdrop-filter: blur(var(--pss-glass-blur));
    box-shadow: var(--pss-glass-shadow);
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    overflow: hidden;
    /* Animación de entrada escalonada vía CSS */
    animation: pssBtnIn .4s var(--pss-ease) both;
    transition:
        transform .22s var(--pss-ease),
        box-shadow .22s ease,
        background .22s ease,
        border-color .22s ease;
    will-change: transform;
}

/* Shimmer de vidrio */
.pss-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.22) 0%, transparent 60%);
    pointer-events: none;
    border-radius: inherit;
    transition: opacity .22s;
}

/* Ripple al click */
.pss-btn::after {
    content: '';
    position: absolute;
    inset: 50% 50%;
    width: 0; height: 0;
    background: rgba(255,255,255,.35);
    border-radius: 50%;
    transform: translate(-50%,-50%);
    opacity: 0;
    transition: none;
    pointer-events: none;
}
.pss-btn.pss-ripple::after {
    animation: pssRipple .5s ease-out forwards;
}
@keyframes pssRipple {
    0%   { width: 0; height: 0; opacity: .5; }
    100% { width: 200%; height: 200%; opacity: 0; }
}

/* Hover */
.pss-btn:hover {
    transform: translateY(-3px) scale(1.06);
    box-shadow: var(--pss-glass-hover-shadow),
                inset 0 0 0 1px rgba(255,255,255,.3);
    border-color: rgba(255,255,255,.4);
}
.pss-btn:hover::before { opacity: 1.4; }

/* Active */
.pss-btn:active {
    transform: translateY(0) scale(.96);
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    transition-duration: .08s;
}

/* Animación de entrada */
@keyframes pssBtnIn {
    from { opacity: 0; transform: scale(.7) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Delay escalonado para los primeros 8 botones */
.pss-primary .pss-btn:nth-child(1) { animation-delay: .04s; }
.pss-primary .pss-btn:nth-child(2) { animation-delay: .09s; }
.pss-primary .pss-btn:nth-child(3) { animation-delay: .14s; }
.pss-primary .pss-btn:nth-child(4) { animation-delay: .19s; }
.pss-primary .pss-btn:nth-child(5) { animation-delay: .24s; }

.pss-btn svg {
    display: block;
    flex-shrink: 0;
    pointer-events: none;
}
.pss-btn__label {
    white-space: nowrap;
    font-size: .78em;
    pointer-events: none;
}

/* ================================================================
   MODOS DE COLOR — sobreescribe el glass base
   ================================================================ */

/* Brand: fondo color de marca sólido + glass encima */
.pss-color-brand .pss-btn {
    background-color: var(--pss-brand, #333);
    /* Mantiene el glass layer pero el fondo es opaco */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(255,255,255,.2);
}
/* Glass real solo en modo no-brand */
.pss-color-mono .pss-btn,
.pss-color-custom .pss-btn {
    backdrop-filter: blur(var(--pss-glass-blur));
    -webkit-backdrop-filter: blur(var(--pss-glass-blur));
}
.pss-color-mono .pss-btn {
    background: rgba(20,20,20,.72);
    border-color: rgba(255,255,255,.15);
    color: #fff;
}
.pss-color-custom .pss-btn {
    background: var(--pss-custom-bg, rgba(20,20,20,.72));
    color: var(--pss-custom-text, #fff);
    border-color: rgba(255,255,255,.15);
}

/* ================================================================
   BOTÓN "MÁS"
   ================================================================ */
.pss-more-btn {
    background: rgba(255,255,255,.08) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px dashed rgba(255,255,255,.3) !important;
    color: inherit;
}
/* En fondo claro */
@media (prefers-color-scheme: light) {
    .pss-more-btn {
        background: rgba(0,0,0,.06) !important;
        border-color: rgba(0,0,0,.22) !important;
        color: #333;
    }
    .pss-more-btn:hover {
        background: rgba(0,0,0,.1) !important;
    }
}
.pss-more-btn[aria-expanded="true"] {
    border-style: solid !important;
    background: rgba(255,255,255,.15) !important;
}

/* ================================================================
   TAMAÑOS
   ================================================================ */
.pss-size-sm .pss-btn { width:32px; height:32px; font-size:11px; border-radius:8px; }
.pss-size-sm .pss-btn svg { width:15px; height:15px; }

.pss-size-md .pss-btn { width:42px; height:42px; font-size:12px; border-radius:12px; }
.pss-size-md .pss-btn svg { width:20px; height:20px; }

.pss-size-lg .pss-btn { width:52px; height:52px; font-size:13px; border-radius:14px; }
.pss-size-lg .pss-btn svg { width:25px; height:25px; }

/* ================================================================
   FORMAS
   ================================================================ */
.pss-style-square  .pss-btn { border-radius: 4px !important; }
.pss-style-rounded .pss-btn { /* usa el del tamaño */ }
.pss-style-circle  .pss-btn { border-radius: 50% !important; }
.pss-style-pill    .pss-btn { border-radius: 999px !important; width: auto !important; padding: 0 16px; }

/* Con etiqueta */
.pss-has-label.pss-label-right .pss-btn { width:auto !important; padding: 0 14px; }
.pss-has-label.pss-label-below .pss-btn {
    width:auto !important; min-width:56px;
    flex-direction: column; height:auto !important;
    padding: 10px 12px; gap: 5px;
}
.pss-has-label.pss-label-below .pss-btn__label { font-size: 9px; letter-spacing:.04em; }

/* ================================================================
   REACCIONES (LIKE / DISLIKE)
   ================================================================ */
.pss-reactions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}
.pss-reaction {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid rgba(128,128,128,.22);
    background: rgba(128,128,128,.07);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    transition: transform .2s var(--pss-ease), background .2s, border-color .2s, color .2s;
    color: inherit;
}
.pss-reaction svg { width: 17px; height: 17px; flex-shrink: 0; }
.pss-reaction__count { font-variant-numeric: tabular-nums; }

.pss-reaction:hover { transform: scale(1.07); }
.pss-reaction:active { transform: scale(.95); }

/* Like activo */
.pss-reaction--like.pss-active {
    background: rgba(34,197,94,.15);
    border-color: rgba(34,197,94,.5);
    color: #16a34a;
}
.pss-reaction--like.pss-active svg { stroke: #16a34a; }

/* Dislike activo */
.pss-reaction--dislike.pss-active {
    background: rgba(239,68,68,.12);
    border-color: rgba(239,68,68,.4);
    color: #dc2626;
}
.pss-reaction--dislike.pss-active svg { stroke: #dc2626; }

/* Bounce al reaccionar */
.pss-reaction.pss-bounce {
    animation: pssBounce .4s var(--pss-ease) both;
}
@keyframes pssBounce {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.22); }
    70%  { transform: scale(.92); }
    100% { transform: scale(1); }
}

/* Número animado */
@keyframes pssNumPop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.4); }
    100% { transform: scale(1); }
}
.pss-num-pop { animation: pssNumPop .3s var(--pss-ease) both; }

/* ================================================================
   TOAST
   ================================================================ */
.pss-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20,20,20,.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #fff;
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    z-index: 99999;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,.12);
    animation: pssToastIn .25s var(--pss-ease-out) both;
}
.pss-toast--out { animation: pssToastOut .22s ease forwards; }
@keyframes pssToastIn  { from{opacity:0;transform:translateX(-50%) translateY(14px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
@keyframes pssToastOut { from{opacity:1} to{opacity:0;transform:translateX(-50%) translateY(8px)} }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:480px) {
    .pss-primary, .pss-secondary { gap:6px; }
    .pss-has-label.pss-label-right .pss-btn__label { display:none; }
    .pss-phrase { font-size:14px; }
}