/* ================================================================ la hoja de compartir (ui/js/compartir.mjs)
   La vista previa grande y, al lado (o debajo, en el móvil), el formato, la tira de
   temas con sus miniaturas, las opciones del tema elegido y las acciones. */
.compartir-cuerpo { display: grid; gap: var(--esp-4); }
.compartir-controles { display: grid; gap: var(--esp-4); min-width: 0; }
.compartir-controles > * { min-width: 0; }
.compartir .segmentos { margin-bottom: 0; }
.compartir-etiqueta { margin-bottom: var(--esp-2); font-size: var(--tam-xs); font-weight: 600; color: var(--texto-3); }

.vista-tarjeta { display: grid; place-items: center; min-height: 240px; padding: var(--esp-4); border-radius: var(--radio-tarjeta); background: var(--hundido); }
.vista-tarjeta canvas { display: block; width: auto; max-width: 100%; max-height: 46vh; border-radius: var(--radio); }
.vista-tarjeta.cargando { animation: pulso 1.2s ease-in-out infinite alternate; }

/* La tira de temas: miniaturas pintadas de verdad, con su nombre debajo. */
.tira-temas { display: flex; gap: var(--esp-3); overflow-x: auto; padding: 3px 3px var(--esp-1); scroll-snap-type: x proximity; scrollbar-width: none; }
.tira-temas::-webkit-scrollbar { display: none; }
.tema-mini { flex: none; display: grid; justify-items: center; gap: 6px; width: 64px; padding: 0; border: 0; background: none; color: var(--texto-2); font-size: var(--tam-xs); cursor: pointer; scroll-snap-align: start; touch-action: manipulation; }
.tema-mini[hidden], .compartir-opcion[hidden] { display: none; }
.tema-mini-marco { display: block; width: 100%; aspect-ratio: var(--proporcion, 9 / 16); overflow: hidden; border-radius: var(--radio); background: var(--hundido); box-shadow: 0 0 0 1px var(--borde); transition: box-shadow var(--rapido); }
.tema-mini-marco canvas { display: block; width: 100%; height: 100%; }
.tema-mini.cargando .tema-mini-marco { animation: pulso 1.2s ease-in-out infinite alternate; }
.tema-mini:hover { color: var(--texto); }
.tema-mini[aria-pressed="true"] { color: var(--texto); font-weight: 600; }
.tema-mini[aria-pressed="true"] .tema-mini-marco { box-shadow: 0 0 0 2px var(--acento); }
.tema-mini:active .tema-mini-marco { transform: scale(0.97); }

/* Las opciones del tema: quién es el protagonista (A/B) y el color de fondo. */
.compartir-opciones { display: flex; flex-wrap: wrap; gap: var(--esp-4) var(--esp-6); }
.compartir-opciones:empty { display: none; }
.fondos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.fondo-muestra, .fondos .fondo-libre { flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; }
.fondo-muestra { background: var(--muestra); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--texto) 20%, transparent); }
.fondos .fondo-libre { background: conic-gradient(#ff5a6e, #ffd166, #6ee7a8, #55a8fd, #b48cff, #ff5a6e); }
.fondos .fondo-libre::-webkit-color-swatch-wrapper { padding: 0; }
.fondos .fondo-libre::-webkit-color-swatch { border: 0; border-radius: 50%; opacity: 0; }
.fondo-libre::-moz-color-swatch { border: 0; border-radius: 50%; opacity: 0; }
.fondo-libre.elegido::-webkit-color-swatch { opacity: 1; }
.fondo-libre.elegido::-moz-color-swatch { opacity: 1; }
.fondo-muestra[aria-pressed="true"], .fondo-libre.elegido { outline: 2px solid var(--acento); outline-offset: 2px; }

.acciones-compartir { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-2); }
.acciones-compartir .boton:first-child { grid-column: 1 / -1; height: 44px; }
.acciones-compartir .boton:disabled { opacity: 0.7; cursor: progress; }
.enlace-copiable { width: 100%; font-size: var(--tam-s); }
/* Las imágenes animadas que el vídeo pinta cuando no hay ImageDecoder: en la página (si no, no se mueven), sin verse. */
.animadas-fuera { position: fixed; right: 0; bottom: 0; width: 2px; height: 2px; overflow: hidden; opacity: 0.01; pointer-events: none; }
.animadas-fuera img { width: 2px; height: 2px; }

@media (min-width: 900px) {
  .compartir-cuerpo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: var(--esp-6); }
  .vista-tarjeta { position: sticky; top: 0; min-height: 320px; }
  .vista-tarjeta canvas { max-height: 64vh; }
  .tema-mini { width: 72px; }
  .acciones-compartir { grid-template-columns: repeat(2, auto); justify-content: start; }
  .acciones-compartir .boton:first-child { grid-column: auto; height: 40px; }
}