/* ==================================================================
   Plugin Compartir · barra de redes
   Prefijo propio: compartir-
   Variables: --cmp-bg, --cmp-border, --cmp-label, --cmp-icon,
              --cmp-icon-bg, --cmp-icon-border
   ================================================================== */

.compartir {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 18px 0;
    padding: 10px 14px;
    border: 1px solid var(--cmp-border, #e5e7eb);
    border-radius: 14px;
    background: var(--cmp-bg, #ffffff);
    color: var(--cmp-label, #6b7280);
}

.compartir-label {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--cmp-label, #6b7280);
}

.compartir-botones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.compartir-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--cmp-icon-border, transparent);
    border-radius: 50%;
    background: var(--cmp-icon-bg, #111827);
    color: var(--cmp-icon, #ffffff);
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.compartir-btn svg { width: 20px; height: 20px; color: inherit; fill: currentColor; }
.compartir-btn:hover { transform: translateY(-1px); opacity: .92; box-shadow: 0 6px 16px rgba(15, 23, 42, .22); }
.compartir-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* Colores de marca (solo si el usuario NO ha puesto un fondo propio) */
.compartir:not([style*="--cmp-icon-bg"]) .compartir-facebook { background: #1877f2; }
.compartir:not([style*="--cmp-icon-bg"]) .compartir-x        { background: #000000; }
.compartir:not([style*="--cmp-icon-bg"]) .compartir-whatsapp { background: #25d366; }
.compartir:not([style*="--cmp-icon-bg"]) .compartir-telegram { background: #229ed9; }
.compartir:not([style*="--cmp-icon-bg"]) .compartir-copiar   { background: #1f2937; }

.compartir-copiar.is-done { background: #15803d !important; }

/* Formas */
.compartir--cuadrado .compartir-btn { border-radius: 11px; }

/* Tamaños */
.compartir--compacto { padding: 8px 12px; gap: 10px; margin: 14px 0; }
.compartir--compacto .compartir-btn { width: 32px; height: 32px; }
.compartir--compacto .compartir-btn svg { width: 17px; height: 17px; }
.compartir--compacto .compartir-label { font-size: 12px; }

.compartir--grande { padding: 14px 18px; }
.compartir--grande .compartir-btn { width: 46px; height: 46px; }
.compartir--grande .compartir-btn svg { width: 24px; height: 24px; }
.compartir--grande .compartir-label { font-size: 14px; }

/* Sin fondo ni borde en el contenedor */
.compartir--sin-fondo {
    background: transparent !important;
    border-color: transparent !important;
    padding-left: 0;
    padding-right: 0;
}

/* En móvil */
@media (max-width: 560px) {
    .compartir { padding: 10px 12px; }
    .compartir-label { width: 100%; }
}

/* ------------------------------------------------------------------
   Los botones son enlaces: el theme aplica `a { color: … }`. Aquí se
   fuerza el color elegido (o blanco) en TODOS los estados, y el SVG
   hereda con currentColor.
   ------------------------------------------------------------------ */
.compartir .compartir-btn,
.compartir .compartir-btn:link,
.compartir .compartir-btn:visited,
.compartir .compartir-btn:hover,
.compartir .compartir-btn:focus,
.compartir .compartir-btn:active,
.compartir .compartir-btn:focus-visible {
    color: var(--cmp-icon, #ffffff) !important;
    text-decoration: none !important;
    box-shadow: none;
}
.compartir .compartir-btn:hover { box-shadow: 0 6px 16px rgba(15, 23, 42, .22); }

.compartir .compartir-btn svg,
.compartir .compartir-btn svg * {
    color: inherit !important;
    fill: currentColor !important;
    stroke: none;
}
/* El icono de copiar es de trazo, no relleno */
.compartir .compartir-copiar svg,
.compartir .compartir-copiar svg * {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Botón «Añadir en Google» ── */
.compartir-google {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border: 1px solid var(--cmp-google-border, #e5e7eb);
    border-radius: 999px;
    background: var(--cmp-google-bg, #ffffff);
    color: var(--cmp-google-text, #111827) !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition: box-shadow .15s ease, transform .15s ease;
}
.compartir-google:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 23, 42, .16); }
.compartir-google:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.compartir-google-logo { width: 20px; height: 20px; flex: none; display: block; }
.compartir-google-txt { color: inherit; }

.compartir--compacto .compartir-google { padding: 6px 11px; font-size: 12px; gap: 7px; }
.compartir--compacto .compartir-google-logo { width: 17px; height: 17px; }

.compartir--grande .compartir-google { padding: 10px 18px; font-size: 14px; }
.compartir--grande .compartir-google-logo { width: 24px; height: 24px; }

@media (max-width: 560px) {
    .compartir-google { order: -1; }
}