/* ==========================================================================
   pages/users.css - Estilos específicos para perfiles de usuario
   ========================================================================== */

/* Member/User cards styling */
.member-card {
    transition: var(--fd-transition-fast);
}

.member-card:hover {
    box-shadow: var(--fd-shadow-lg);
}

/* Member avatar styling - ensure perfect circle */
.member-card .bg-primary.rounded-circle {
    width: 80px;
    height: 80px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 0; /* Remover padding de Bootstrap que interfiere */
    line-height: 1; /* Evitar que line-height afecte el centrado */
}

.member-card .card-title a {
    color: inherit;
    transition: var(--fd-transition-fast);
}

.member-card .card-title a:hover {
    color: var(--fd-primary-dark);
}

/* List cards styling for user pages */
.list-card {
    transition: var(--fd-transition-fast);
}

.list-card:hover {
    box-shadow: var(--fd-shadow-lg);
}

.list-card .card-title a {
    color: inherit;
    transition: var(--fd-transition-fast);
}

.list-card .card-title a:hover {
    color: var(--fd-primary-dark);
}

.list-preview {
    max-height: 120px;
    overflow-y: auto;
    border-radius: var(--fd-radius-sm);
}

.list-card .card-footer {
    border-top: 1px solid var(--fd-border-color);
    margin-top: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .profile-header {
        padding: var(--fd-space-lg) 0;
        margin-bottom: var(--fd-space-lg);
    }

    .profile-avatar,
    .profile-avatar-placeholder {
        width: 80px;
        height: 80px;
    }

    .profile-username {
        font-size: 1.8rem;
    }

    .profile-stats {
        padding: var(--fd-space-md);
    }

    .profile-stat-number {
        font-size: 1.5rem;
    }

    .profile-section {
        padding: var(--fd-space-lg);
        margin-bottom: var(--fd-space-md);
    }

    .user-actions {
        position: static;
        margin-top: var(--fd-space-lg);
    }

    .favorite-restaurant-image,
    .favorite-restaurant-placeholder {
        width: 50px;
        height: 50px;
        margin-right: var(--fd-space-sm);
    }

    .activity-timeline {
        padding-left: var(--fd-space-lg);
    }

    .activity-item::before {
        left: -18px;
        width: 10px;
        height: 10px;
    }

    .member-card:hover,
    .list-card:hover {
        transform: none; /* Disable hover transform on mobile */
    }
}

/* Follow buttons consistent styling */
.btn-outline-secondary {
    border: 2px solid #6c757d !important;
    color: #6c757d !important;
}

.btn-outline-secondary:hover {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: white !important;
}

@media (max-width: 768px) {
    /* Stack search and sort buttons vertically on tablets and below */
    .row.g-3.align-items-end {
        row-gap: var(--fd-space-md);
    }
}

/* Fix para eliminar desplazamiento en botones de filtrado */
.btn-primary.flex-grow-1 {
    border: 2px solid transparent !important;
}

.btn-outline-primary.flex-grow-1 {
    border: 2px solid var(--fd-primary) !important;
}

@media (max-width: 576px) {
    .profile-avatar,
    .profile-avatar-placeholder {
        width: 60px;
        height: 60px;
    }

    .profile-username {
        font-size: 1.5rem;
    }

    .profile-section {
        padding: var(--fd-space-md);
    }

    .favorite-restaurant {
        flex-direction: column;
        text-align: center;
    }

    .favorite-restaurant-image,
    .favorite-restaurant-placeholder {
        margin-right: 0;
        margin-bottom: var(--fd-space-sm);
    }

    .sort-buttons {
        gap: var(--fd-space-sm);
    }

    .sort-buttons .btn {
        font-size: 0.875rem;
        padding: var(--fd-space-sm);
    }

    /* Smaller input group button on mobile */
    .input-group .btn {
        padding: var(--fd-space-sm) var(--fd-space-md);
        font-size: 0.875rem;
    }
}