/* ============================================================
   Iconos sociales en cabecera — REPTILUR
   ----------------------------------------------------------------
   Este plugin SOLO inyecta los iconos en la cabecera con un estilo
   visual básico (círculo blanco con icono rojo). NO posiciona nada.
   La posición la controlas tú en tu CSS personalizado.

   Clases que puedes usar para targetearlos:
     .rrc-redes-cabecera          → contenedor (UL)
     .rrc-redes-cabecera li       → cada item
     .rrc-redes-cabecera a        → cada enlace (círculo)
     .rrc-redes-cabecera svg      → SVG dentro del círculo
   ============================================================ */

/* Contenedor: inline-flex para que se vean en línea */
.rrc-redes-cabecera {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    line-height: 1 !important;
}

.rrc-redes-cabecera li.rrc-icon-li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Círculo blanco con icono rojo */
.rrc-redes-cabecera .rrc-icon-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #b71c1c !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease !important;
    padding: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

.rrc-redes-cabecera .rrc-icon-link svg {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
    fill: currentColor !important;
    pointer-events: none !important;
}

.rrc-redes-cabecera .rrc-icon-link:hover {
    background: #b71c1c !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
}