/* ── Compartir ────────────────────────────────────────────────────────────
   El botón es VISIBLE a propósito: una acción principal, con su palabra al
   lado. Un icono de compartir a secas significa cosas distintas en iOS y en
   Android, y aquí la gente llega con prisa.                                */

.compartir-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--no-e2);
  min-height: var(--no-toque); padding: var(--no-e3) var(--no-e5);
  font-size: var(--no-t-m); font-weight: 700; font-family: inherit;
  color: var(--no-marca-texto); background: var(--no-fondo);
  border: 2px solid var(--no-marca-borde); border-radius: var(--no-radio-s);
  cursor: pointer; text-decoration: none;
  transition: background var(--no-transicion), border-color var(--no-transicion);
}
.compartir-boton svg { width: 20px; height: 20px; flex: none; }
.compartir-boton:hover { background: var(--no-marca-suave); border-color: var(--no-marca); }

/* Dentro de una alerta, el botón se vuelve rojo.
   No es una preferencia estética: la regla del proyecto dice que el rosa de
   marca no aparece junto a un veredicto, porque al lado de un «CONTIENE» rojo
   se lee como OTRO estado más. Aquí hereda el color de la alerta y punto.
   Ver `marca/tokens/tarjetas.css` y `docs/adr/ADR-009`. */
.alerta-critica .compartir-boton,
.alerta-posible .compartir-boton,
.alerta-detalle .compartir-boton,
.alerta-ficha .compartir-boton,
.alerta-grave-caja .compartir-boton {
  color: var(--no-peligro); border-color: var(--no-peligro); background: var(--no-fondo);
}
.alerta-critica .compartir-boton:hover,
.alerta-ficha .compartir-boton:hover,
.alerta-detalle .compartir-boton:hover { background: var(--no-peligro-fondo); }
/* En la coincidencia SOLO PROBABLE el color es el ámbar del aviso, no el rojo:
   ahí no hay un hecho, hay una pista. */
.alerta-posible .compartir-boton { color: var(--no-aviso); border-color: var(--no-aviso); }
.alerta-posible .compartir-boton:hover { background: var(--no-aviso-fondo); }

/* El panel de reserva, para navegadores sin hoja de compartir del sistema. */
.compartir-panel {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(16, 16, 36, .55);
  display: grid; place-items: end center;
  padding: var(--no-e4);
}
@media (min-width: 600px) { .compartir-panel { place-items: center; } }

.compartir-caja {
  background: var(--no-fondo); border-radius: var(--no-radio);
  padding: var(--no-e5); width: min(28rem, 100%);
  box-shadow: var(--no-sombra-alta); max-height: 85vh; overflow-y: auto;
}
.compartir-titulo { font-size: var(--no-t-xl); font-weight: 800; margin: 0 0 var(--no-e2); }
.compartir-que { color: var(--no-tinta-media); font-size: var(--no-t-s); margin: 0 0 var(--no-e4); }

.compartir-salidas {
  list-style: none; padding: 0; margin: 0 0 var(--no-e4);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--no-e2);
}
.compartir-salida {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--no-toque); padding: 0 var(--no-e3);
  border: 1px solid var(--no-borde); border-radius: var(--no-radio-s);
  color: var(--no-tinta); text-decoration: none; font-weight: 600; font-size: var(--no-t-s);
}
.compartir-salida:hover { border-color: var(--no-marca); color: var(--no-marca-texto); }

.compartir-copiar, .compartir-cerrar {
  width: 100%; min-height: var(--no-toque); font-family: inherit;
  font-size: var(--no-t-m); font-weight: 700; cursor: pointer;
  border-radius: var(--no-radio-s);
}
.compartir-copiar {
  background: var(--no-marca); color: var(--no-sobre-marca); border: 0;
  margin-bottom: var(--no-e2);
}
.compartir-cerrar {
  background: transparent; color: var(--no-tinta-media);
  border: 1px solid var(--no-borde); margin-top: var(--no-e3);
}
.compartir-aviso { margin: 0; font-size: var(--no-t-s); color: var(--no-tinta-media); min-height: 1.4em; }

@media (prefers-reduced-motion: reduce) { .compartir-boton { transition: none; } }