/**
 * Share CSS - Radiocanal
 *
 * Estilos de botones de compartir en redes sociales.
 * Contexto: .noticia-ampliada-contenedor
 *
 * @version 1.0.0
 * @date 2026-04-20
 */

/* ============================================
   SIDEBAR COMPARTIR V2
   ============================================ */

.noticia-ampliada-contenedor .sidebar-compartir-v2 {
    background: var(--rc-blanco);
    border-radius: 12px;
    border: 1px solid var(--rc-divider);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.noticia-ampliada-contenedor .sidebar-header-v2 {
    background: var(--rc-blanco);
    padding: 12px 16px;
    border-bottom: 1px solid var(--rc-divider);
}

.noticia-ampliada-contenedor .sidebar-header-v2 h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--rc-gris-oscuro);
    font-family: var(--rc-font-primary);
}

.noticia-ampliada-contenedor .sidebar-content-v2 {
    padding: 16px;
}

.noticia-ampliada-contenedor .share-buttons-compact {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    justify-items: center;
}

.noticia-ampliada-contenedor .share-btn-sidebar {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--rc-divider);
    border-radius: 50%;
    color: var(--rc-gris-medio);
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.noticia-ampliada-contenedor .share-btn-sidebar:hover {
    background-color: var(--rc-gris-claro);
    border-color: #d1d5db;
    transform: translateY(-1px);
    text-decoration: none;
}

.noticia-ampliada-contenedor .share-btn-sidebar i {
    color: var(--rc-gris-medio);
    transition: color 0.2s ease;
}

/* Hover con colores de marca */
.noticia-ampliada-contenedor .share-btn-sidebar.share-btn-facebook:hover {
    border-color: #1877f2;
    background-color: rgba(24, 119, 242, 0.08);
}
.noticia-ampliada-contenedor .share-btn-sidebar.share-btn-facebook:hover i { color: #1877f2; }

.noticia-ampliada-contenedor .share-btn-sidebar.share-btn-whatsapp:hover {
    border-color: #25d366;
    background-color: rgba(37, 211, 102, 0.08);
}
.noticia-ampliada-contenedor .share-btn-sidebar.share-btn-whatsapp:hover i { color: #25d366; }

.noticia-ampliada-contenedor .share-btn-sidebar.share-btn-x:hover {
    border-color: #000000;
    background-color: rgba(0, 0, 0, 0.05);
}
.noticia-ampliada-contenedor .share-btn-sidebar.share-btn-x:hover i { color: #000000; }

.noticia-ampliada-contenedor .share-btn-sidebar.share-btn-linkedin:hover {
    border-color: #0a66c2;
    background-color: rgba(10, 102, 194, 0.08);
}
.noticia-ampliada-contenedor .share-btn-sidebar.share-btn-linkedin:hover i { color: #0a66c2; }

.noticia-ampliada-contenedor .share-btn-sidebar.share-btn-telegram:hover {
    border-color: #0088cc;
    background-color: rgba(0, 136, 204, 0.08);
}
.noticia-ampliada-contenedor .share-btn-sidebar.share-btn-telegram:hover i { color: #0088cc; }

.noticia-ampliada-contenedor .share-btn-sidebar.share-btn-copy:hover {
    border-color: var(--rc-gris-oscuro);
    background-color: rgba(75, 85, 99, 0.08);
}
.noticia-ampliada-contenedor .share-btn-sidebar.share-btn-copy:hover i { color: var(--rc-gris-oscuro); }

.noticia-ampliada-contenedor .share-btn-sidebar.copied {
    border-color: #10b981;
    background-color: rgba(16, 185, 129, 0.1);
}
.noticia-ampliada-contenedor .share-btn-sidebar.copied i { color: #10b981; }

/* ============================================
   COMPARTIR INLINE
   ============================================ */

.noticia-ampliada-contenedor .social-share-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 1.5rem 0;
}

.noticia-ampliada-contenedor .share-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--rc-gris-medio);
    margin-right: 4px;
}

.noticia-ampliada-contenedor .share-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--rc-divider);
    border-radius: 50%;
    color: var(--rc-gris-medio);
    font-size: 16px;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.noticia-ampliada-contenedor .share-btn:hover {
    background-color: var(--rc-gris-claro);
    border-color: #d1d5db;
    transform: translateY(-1px);
    text-decoration: none;
}

.noticia-ampliada-contenedor .share-btn i {
    color: var(--rc-gris-medio);
    transition: color 0.2s ease;
}

/* Hover con colores de marca */
.noticia-ampliada-contenedor .share-btn-facebook:hover {
    border-color: #1877f2;
    background-color: rgba(24, 119, 242, 0.08);
}
.noticia-ampliada-contenedor .share-btn-facebook:hover i { color: #1877f2; }

.noticia-ampliada-contenedor .share-btn-whatsapp:hover {
    border-color: #25d366;
    background-color: rgba(37, 211, 102, 0.08);
}
.noticia-ampliada-contenedor .share-btn-whatsapp:hover i { color: #25d366; }

.noticia-ampliada-contenedor .share-btn-x:hover {
    border-color: #000000;
    background-color: rgba(0, 0, 0, 0.05);
}
.noticia-ampliada-contenedor .share-btn-x:hover i { color: #000000; }

.noticia-ampliada-contenedor .share-btn-linkedin:hover {
    border-color: #0a66c2;
    background-color: rgba(10, 102, 194, 0.08);
}
.noticia-ampliada-contenedor .share-btn-linkedin:hover i { color: #0a66c2; }

.noticia-ampliada-contenedor .share-btn-telegram:hover {
    border-color: #0088cc;
    background-color: rgba(0, 136, 204, 0.08);
}
.noticia-ampliada-contenedor .share-btn-telegram:hover i { color: #0088cc; }

.noticia-ampliada-contenedor .share-btn-copy:hover {
    border-color: var(--rc-gris-oscuro);
    background-color: rgba(75, 85, 99, 0.08);
}
.noticia-ampliada-contenedor .share-btn-copy:hover i { color: var(--rc-gris-oscuro); }

.noticia-ampliada-contenedor .share-btn-copy.copied {
    border-color: #10b981;
    background-color: rgba(16, 185, 129, 0.1);
}
.noticia-ampliada-contenedor .share-btn-copy.copied i { color: #10b981; }

/* ============================================
   RESPONSIVE
   ============================================ */

@media (min-width: 576px) {
    .noticia-ampliada-contenedor .social-share-inline {
        gap: 10px;
    }

    .noticia-ampliada-contenedor .share-btn {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}