/* Component: Social Share (iconos de red del menú de compartir del detalle) */
.social-share__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--surface-card);
    color: var(--text-dim);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    border: 1px solid var(--border-hair);
}

.social-share__item:hover {
    background-color: var(--surface-ink);
    color: var(--text-on-ink);
    border-color: var(--surface-ink);
    transform: translateY(-2px);
}

/* Share Dropdown Menu */
.share-dropdown {
    position: relative;
    display: inline-block;
}

.share-dropdown__list {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: var(--surface-card);
    border: 1px solid var(--border-hair);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-s);
    display: flex;
    gap: var(--space-xs);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: var(--z-dropdown);
}

/* Sin JS el menú se abre al pasar por encima o al llegar con el tabulador. Con JS
   (initMenuCompartir añade .share-dropdown--js) se abre solo con el botón, que lleva
   aria-expanded: si además se abriera con hover, el estado anunciado no sería el real. */
.share-dropdown:not(.share-dropdown--js):hover .share-dropdown__list,
.share-dropdown:not(.share-dropdown--js):focus-within .share-dropdown__list,
.share-dropdown--js.is-open .share-dropdown__list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Botón redondo de solo icono de la barra del artículo: compartir y su vecino de
   imprimir / PDF (.print-action, pages/detalle.css) son el mismo botón. */
.share-dropdown__trigger--icon-only,
.print-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
}

.share-dropdown__list::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 20px;
    width: 10px;
    height: 10px;
    background: var(--surface-card);
    border-left: 1px solid var(--border-hair);
    border-top: 1px solid var(--border-hair);
    transform: rotate(45deg);
}