/* Estilos del widget de GitHub */
.github-section {
    margin-top: 48px;
}

.month-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.month {
    font-size: 12px;
    color: #a1a1a1;
}

.contributions-chart {
    margin: 12px 0 0 0;
    /* Contenedor con overflow para aplicar bordes redondeados y recortar la parte izquierda */
    overflow: hidden;
    border-radius: 4px;
    /* Recortar la parte izquierda donde aparecen "Mon Wed Fri" */
    position: relative;
    /* Asegurar que el contenedor tenga el ancho completo */
    width: 100%;
}

.contribution-grid-img {
    /* Aumentar el ancho para compensar el recorte de 50px de la izquierda */
    /* Usar un ancho mayor para asegurar que después del clip-path el grid visible ocupe el 100% */
    width: calc(100% + 50px);
    min-width: calc(100% + 50px);
    max-width: none;
    height: auto;
    display: block;
    /* Convertir a escala de grises oscura: #1c1c1c -> #a3a3a3 */
    filter: grayscale(100%) brightness(0.35) contrast(1.8);
    /* Asegurar que los bordes redondeados se apliquen a los cuadrados internos */
    border-radius: 4px;
    /* Recortar la parte izquierda donde están las etiquetas de días (Mon Wed Fri) */
    /* Ajustar para ocultar aproximadamente 50px de la izquierda donde están las etiquetas */
    clip-path: inset(0 0 0 50px);
    /* Mover la imagen 50px a la izquierda para que el recorte quede alineado */
    transform: translateX(-50px);
    /* Asegurar que el grid visible ocupe exactamente el 100% del ancho del contenedor */
    /* El contenido visible después del clip-path debería alinearse con el borde derecho del contenedor */
}

.contributions-info {
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.contributions-text {
    color: #868686;
    font-size: 10px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    text-align: left;
}

.contributions-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #a1a1a1;
}

.legend-text {
    font-size: 12px;
    color: #a1a1a1;
}

.legend-squares {
    display: flex;
    gap: 3px;
    align-items: center;
}

.legend-square {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    /* Sin filtros - los colores grises ya están aplicados inline en el HTML */
}