/* SPDX-License-Identifier: GPL-3.0-or-later */
/* Sprint 170 · «Síguenos» y ventana de compartir. Usa las variables de la página si existen (mapa, andén, viajes…) y
   colores propios si no (web pública, sala de juegos). */
.soc-h { margin: 0 0 6px; font-weight: 600; font-size: 13px; color: var(--muted, #6b7686); }
.soc-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.soc-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 8px; border-radius: 999px; border: 1px solid var(--line, rgba(127, 140, 160, .45));
  color: inherit; text-decoration: none; font-size: 13px; line-height: 1.2; background: transparent; }
.soc-pill:hover, .soc-pill:focus-visible { border-color: currentColor; }
.soc-pill svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
[data-social-compact] .soc-pill { padding: 6px; }
.soc-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.soc-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.soc-back { position: fixed; inset: 0; z-index: 5000; background: rgba(8, 12, 20, .55); display: grid; place-items: center; padding: 16px; }
.soc-dlg { position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box; padding: 18px 18px 14px; border-radius: 14px;
  background: var(--modal-bg, #ffffff); color: var(--text, #16202f); box-shadow: 0 12px 40px rgba(0, 0, 0, .35); font-family: var(--sans, system-ui, sans-serif); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .soc-dlg { background: var(--modal-bg, #111a29); color: var(--text, #e6ecf5); } }
.soc-dlg h3 { margin: 0 28px 4px 0; font-size: 18px; }
.soc-what { margin: 0 0 12px; font-size: 14px; color: var(--muted, #6b7686); overflow-wrap: anywhere; }
.soc-x { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: inherit; padding: 4px 8px; }
.soc-copy { display: flex; gap: 6px; margin-bottom: 12px; }
.soc-copy input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line, #c9d1dd); background: transparent; color: inherit; font-size: 13px; }
.soc-copy button, .soc-net { padding: 9px 12px; border-radius: 9px; border: 1px solid var(--line, #c9d1dd); background: var(--panel-2, rgba(127, 140, 160, .12)); color: inherit;
  font: inherit; font-size: 14px; cursor: pointer; text-decoration: none; text-align: center; }
.soc-copy button { background: var(--blue, #1f6fd1); border-color: transparent; color: #fff; font-weight: 600; white-space: nowrap; }
.soc-nets { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.soc-net:hover, .soc-net:focus-visible { border-color: currentColor; }
.soc-note { margin: 10px 0 0; font-size: 12px; color: var(--muted, #6b7686); line-height: 1.4; }
.soc-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 5100; background: #16202f; color: #fff; padding: 10px 14px; border-radius: 10px; font-size: 14px; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
/* Juegos (estética arcade) */
body.jg .soc-dlg { background: #160a2e; color: #f4f0ff; border: 2px solid #2ff3ff; }
body.jg .soc-copy button { background: #2ff3ff; color: #07060f; }