/* =========================================================
   1) SHARE POPOVER (9/-)
   ========================================================= */
.share-popover[hidden]{ display:none !important; }

.share-popover{
  position: fixed;                 /* posicionado por JS, como el de tema */
  /* Antes: width: min(360px, 92vw);  */
  width: min(var(--share-popover-w, 360px), 92vw);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  z-index: 2100;                   /* sobre el theme-popover */
}

/* 10.1) Share field (input + Copy integrado) */
.share-field{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--border);
  background: var(--panel);
  border-radius: 10px;
  padding: 8px 8px 8px 10px;
}
.share-field .field-icon{
  width:18px; text-align:center; opacity:.75;
}
.share-field .field-input{
  flex:1; 
  min-width:0;
  border:0; 
  background:transparent;
  color:var(--text);
  font: inherit;
  outline:none;

  /* 👇 Ellipsis consistente en Firefox/Chromium */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-inline: 0;
  appearance: none;
  -moz-appearance: none;
  direction: ltr;
  line-height: 1.4;
}
.share-field .field-copy{
  display:inline-flex; align-items:center; gap:8px;
  border:0; background:transparent; color:var(--text);
  padding:6px 10px; border-radius:8px; cursor:pointer;
  position: relative;
  z-index: 0;   /* crea un stacking context local para su ::before */
}
.share-field .field-copy::before{
  content:"";
  position:absolute;
  inset: 2px;                  /* margen como el rail: no pega a los bordes */
  border-radius:8px;
  background: var(--hover-bg, rgba(125,125,125,.08));
  opacity:0;
  transition: opacity .15s ease;
  z-index: -1;              /* ⬅️ queda DETRÁS del contenido del botón */
}

/* Eleva icono y texto del botón por encima del ::before */
.share-field .field-copy > *{
  position: relative;
  z-index: 1;
}

.share-field .field-copy:hover::before{ opacity:1; }

/* Efecto hover y focus igual que los íconos del sidebar */
.share-field .field-copy{
  outline: none;
}
.share-field .field-copy:focus,
.share-field .field-copy:focus-visible{
  outline: none;
  box-shadow: none;
}
/* mientras .share-field tiene la clase .copied, esconde el botón y icon_link */
.share-field.copied .field-copy,
.share-field.copied .field-icon{
  display: none;
}

/* Feedback de copiado */
.share-field.copied{
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.35);
}
.share-field.copied .field-copy .copy-text{ font-weight:600; }

/* 2) Centra el mensaje en el input */
.share-field.copied .field-input{
  text-align: center;
}

.share-inner{ display:flex; flex-direction:column; gap:10px }
.share-head{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.share-head h3{ margin:0; font-size:16px }

.share-body{ display:flex; flex-direction:column; gap:10px }
.share-actions{ display:flex; flex-wrap:wrap; gap:10px; }

/* Iconos en una sola fila y con anchos iguales */
.share-actions.icons-only{
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 partes iguales */
  gap: 10px;
}

/* Cada botón ocupa su parte y centra el icono */
.share-actions.icons-only .btn{
  display: grid;
  place-items: center;   /* centra el icono */
  padding: 0;            /* sin padding extra horizontal */
  height: 40px;          /* ya coincide con tus botones */
}

/* Tamaño visual del icono: homogéneo */
.share-actions.icons-only .btn i{
  font-size: 18px;       /* suficiente contraste y equilibrio */
  line-height: 1;
}

/* Bordes en hover/focus iguales al color del icono (currentColor) */
.share-actions .btn{
  transition: border-color .15s ease; /* suaviza el cambio */
}

.share-actions .btn:hover,
.share-actions .btn:focus-visible{
  border-color: currentColor;         /* mismo color que el icono */
}