/* ===========================
   SHARE BUTTONS (assets/js/share.js)
   Round outline icons in currentColor, so they sit on the white footer
   and on the dark article page alike.
=========================== */

.t-share { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.t-share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  background: none; color: inherit; border: 1px solid currentColor; border-radius: 50%;
  font-size: 17px; line-height: 1; cursor: pointer;
  opacity: .8; transition: opacity .3s, background-color .3s, color .3s, border-color .3s;
}
.t-share-btn svg { width: 15px; height: 15px; }
.t-share-btn:hover, .t-share-btn:focus-visible { opacity: 1; color: #fff; border-color: transparent; }
.t-share-whatsapp:hover, .t-share-whatsapp:focus-visible { background: #25d366; }
.t-share-email:hover, .t-share-email:focus-visible { background: #24508a; }
.t-share-instagram:hover, .t-share-instagram:focus-visible { background: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888); }
.t-share-x:hover, .t-share-x:focus-visible { background: #000; }
.t-share-linkedin:hover, .t-share-linkedin:focus-visible { background: #0a66c2; }

/* --- List variant (data-share="list"): rows with icon + network name --- */
.t-share-icon { display: inline-flex; align-items: center; justify-content: center; }
.t-share-list { flex-direction: column; align-items: stretch; gap: 2px; }
.t-share-list .t-share-btn {
  justify-content: flex-start; gap: .85rem; width: 100%; height: auto; padding: .6rem .6rem;
  border: 0; border-radius: 6px; font-size: .95rem; text-decoration: none; opacity: 1;
}
.t-share-list .t-share-icon {
  flex-shrink: 0; width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 50%;
  font-size: 15px; transition: background-color .3s, border-color .3s;
}
.t-share-list .t-share-btn:hover, .t-share-list .t-share-btn:focus-visible { background: rgba(195, 208, 228, .1); color: inherit; }
.t-share-list .t-share-btn:hover .t-share-icon, .t-share-list .t-share-btn:focus-visible .t-share-icon { border-color: transparent; color: #fff; }
.t-share-list .t-share-whatsapp:hover .t-share-icon, .t-share-list .t-share-whatsapp:focus-visible .t-share-icon { background: #25d366; }
.t-share-list .t-share-email:hover .t-share-icon, .t-share-list .t-share-email:focus-visible .t-share-icon { background: #24508a; }
.t-share-list .t-share-instagram:hover .t-share-icon, .t-share-list .t-share-instagram:focus-visible .t-share-icon { background: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888); }
.t-share-list .t-share-x:hover .t-share-icon, .t-share-list .t-share-x:focus-visible .t-share-icon { background: #000; }
.t-share-list .t-share-linkedin:hover .t-share-icon, .t-share-list .t-share-linkedin:focus-visible .t-share-icon { background: #0a66c2; }
.t-share-list .t-share-note { position: static; display: none; width: auto; max-width: none; margin-top: .4rem; }
.t-share-list .t-share-note.is-visible { display: block; }

/* "Enlace copiado" message after the Instagram fallback */
.t-share-note {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 5;
  width: max-content; max-width: min(18rem, 80vw); padding: .45rem .7rem;
  background: #0b1a30; color: #fff; border-radius: 4px; font-size: .8rem; line-height: 1.4;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.t-share-note.is-visible { opacity: 1; visibility: visible; }

/* --- Footer: "Comparte" next to "Síguenos" --- */
.footer-share { display: flex; align-items: center; gap: 12px; }
.footer-share .footer-follow-label { margin-left: 0; }
.footer-share .t-share { color: #0a1626; }
.footer-share .t-share-note { left: auto; right: 0; }

@media (max-width: 767px) {
  .t-share { gap: 8px; }
  .t-share:not(.t-share-list) .t-share-btn { width: 34px; height: 34px; font-size: 15px; }
  .t-share-btn svg { width: 13px; height: 13px; }
  .footer-share { flex-direction: column; margin-bottom: 20px; }
  .footer-share .t-share { justify-content: center; }
  .footer-share .t-share-note { right: 50%; transform: translateX(50%); }
}