/**
 * common/share — Compartir en redes y copiar enlace.
 * Handle: pf_pfuture_component_share
 *
 * Tokens: solo los canónicos de style.css (issue #60). Sin literales de respaldo.
 */

.pf-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pf-space-xs) var(--pf-space-sm);
  padding-block: var(--pf-space-sm);
  border-block: 1px solid var(--pf-color-border);
}

.pf-share__label {
  margin: 0;
  color: var(--pf-color-text-soft);
  font-size: var(--pf-text-sm);
  font-weight: var(--pf-weight-medium);
}

.pf-share__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pf-space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-share__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--pf-color-border);
  border-radius: var(--pf-radius-pill);
  background: var(--pf-color-surface);
  color: var(--pf-color-brand);
  text-decoration: none;
  transition: background-color var(--pf-transition), color var(--pf-transition), border-color var(--pf-transition);
}

/* Hover sin relleno navy: el borde sube a `border-strong` y el glifo a
 * `brand-strong` (issue #112). */
.pf-share__link:hover,
.pf-share__link:focus-visible {
  border-color: var(--pf-color-border-strong);
  color: var(--pf-color-brand-strong);
}

.pf-share__icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* Botón de copiar: el icono de enlace se cambia por la marca de hecho. */
.pf-share__icon--done {
  display: none;
}

.pf-share__link--copy.is-copied {
  border-color: var(--pf-color-success);
  background: var(--pf-color-success);
  color: var(--pf-color-text-invert);
}

.pf-share__link--copy.is-copied .pf-share__icon--idle {
  display: none;
}

.pf-share__link--copy.is-copied .pf-share__icon--done {
  display: block;
}

/* Confirmación visible. Sin texto no ocupa hueco. */
.pf-share__feedback {
  flex-basis: 100%;
  margin: 0;
  color: var(--pf-color-success);
  font-size: var(--pf-text-sm);
}

.pf-share__feedback:empty {
  display: none;
}

.pf-share__feedback.is-error {
  color: var(--pf-color-error);
}