/* Estilos para los badges de contacto */

/* Variables CSS para los colores */
:root {
    --color-button-bg: #252525;
    --color-border-dark: #474747;
    --color-text: #d7d7d7;
    --color-svg: #a1a1a1;
    --color-shadow-inset: rgba(0, 0, 0, 0.3);
}

/* Contenedor de los badges */
.social-links {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px; /* gap-2 equivalente a 8px (0.5rem) */
    margin-top: 12px;
}

/* Estilo de cada badge */
.social-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    gap: 4px; /* gap-1 equivalente a 4px (0.25rem) */
    border: 1px solid var(--color-border-dark);
    min-width: 100px;
    /* Gradiente sutil para efecto de brillo en la parte superior */
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0.05) 0%, 
        rgba(255, 255, 255, 0.02) 30%,
        var(--color-button-bg) 60%,
        var(--color-button-bg) 100%);
    color: var(--color-text);
    font-family: 'Figtree', 'Figtree Fallback', sans-serif;
    font-size: 14px;
    padding: 6px 12px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
    /* Sombra: 0px_0px_0px_1px_rgba(0,0,0,0),inset_0px_1px_1px_0px_var(--color-shadow-inset) */
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0), 
                inset 0px 1px 1px 0px var(--color-shadow-inset),
                inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
}

/* Estados hover y active */
.social-badge:hover {
    /* Gradiente más brillante en hover */
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0.08) 0%, 
        rgba(255, 255, 255, 0.04) 30%,
        #2d2d2d 60%,
        #2d2d2d 100%);
    border-color: #555555;
}

.social-badge:active {
    /* Gradiente más oscuro al presionar */
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0.03) 0%, 
        rgba(255, 255, 255, 0.01) 30%,
        #252525 60%,
        #252525 100%);
    box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.4),
                inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
    transform: translateY(1px);
}

/* Estilo para SVGs dentro de los badges */
.social-badge svg {
    width: 16px;
    height: 16px;
    color: var(--color-svg);
    flex-shrink: 0;
}

/* Los SVGs usan currentColor, así heredan el color del SVG */
.social-badge svg path {
    fill: currentColor;
}

/* Asegurar que el texto no se subraye */
.social-badge:visited {
    color: var(--color-text);
}