/* ==========================================================================
   COMPARTIR
   --------------------------------------------------------------------------
   Botonera de compartir para las páginas públicas. Usa Web Share si existe y
   cae a WhatsApp, Telegram, X y copiar enlace. Sin cookies ni peticiones.
   ========================================================================== */

.compartir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 20px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line-dim, rgba(231, 255, 249, .13));
  background: rgba(6, 10, 9, .62);
  font-family: var(--mono, "Share Tech Mono", monospace);
}

.compartir__label {
  margin-right: 4px;
  color: var(--bio, #b7c07a);
  font-family: var(--label, "Chakra Petch", sans-serif);
  font-size: .46rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.compartir__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid var(--line-dim, rgba(231, 255, 249, .14));
  background: transparent;
  color: var(--bone, #eae6df);
  font: inherit;
  font-size: .46rem;
  letter-spacing: .05em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}

.compartir__btn:hover,
.compartir__btn:focus-visible {
  border-color: var(--amber, #ffb000);
  color: var(--amber, #ffb000);
  outline: none;
  background: rgba(255, 176, 0, .05);
}

.compartir__btn--principal {
  border-color: var(--bio, #b7c07a);
  background: rgba(183, 192, 122, .1);
  color: var(--bio-bright, #dce4b4);
}

.compartir__estado {
  flex-basis: 100%;
  min-height: 0;
  color: var(--steel, #7f8c86);
  font-size: .42rem;
  letter-spacing: .04em;
}

.compartir__estado:not(:empty) { margin-top: 2px; }

@media (max-width: 520px) {
  .compartir { gap: 6px; padding: 9px 10px; }
  .compartir__label { flex-basis: 100%; }
  .compartir__btn { font-size: .42rem; padding: 5px 7px; }
}