/* ============================================================
   share-widget.css
   Barra de botones para compartir contenido — WhatsApp, LinkedIn,
   X y Email (los 4 canales más relevantes en los mercados
   principales: España/LatAm por WhatsApp, EEUU/UK por LinkedIn),
   más un botón de "compartir" nativo del sistema en móvil.
   ============================================================ */
.share-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin: 1.75rem 0;
  padding: 1rem 1.25rem;
  background: var(--bg-soft, #F9FAFB);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 12px;
}
.share-bar-label {
  font-family: var(--font-mono, monospace);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-muted, #6B7280);
  margin-right: .25rem;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--border, #E5E7EB);
  background: var(--bg-card, #fff);
  color: var(--ink, #111827);
  text-decoration: none;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  flex-shrink: 0;
}
.share-btn:hover {
  transform: translateY(-2px);
  border-color: var(--share-color, var(--accent, #4F6BF4));
  background: var(--share-bg, var(--accent-light, #EEF1FE));
}
.share-btn svg { width: 18px; height: 18px; min-width: 18px; min-height: 18px; flex-shrink: 0; display: block; }

.share-btn.share-copy.share-copied {
  border-color: #10B981;
  background: #D1FAE5;
  color: #065F46;
}

.share-btn-native {
  display: none; /* solo se muestra si el navegador soporta Web Share API */
  align-items: center;
  gap: .4rem;
  padding: 0 .9rem;
  height: 38px;
  border-radius: 999px;
  border: 1.5px solid var(--border, #E5E7EB);
  background: var(--bg-card, #fff);
  color: var(--ink, #111827);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  width: auto;
}
.share-btn-native.share-supported { display: inline-flex; }
.share-btn-native:hover { border-color: var(--accent, #4F6BF4); }

@media (max-width: 480px) {
  .share-bar { padding: .85rem 1rem; }
}