@extends('layouts.app')

@section('content')
<style>
.stats-card {
    transition: all 0.3s ease;
    border-radius: 15px;
    overflow: hidden;
}

.stats-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

.stats-card .card-body {
    padding: 1.5rem;
}

.stats-card i {
    opacity: 0.9;
    transition: all 0.3s ease;
}

.stats-card:hover i {
    opacity: 1;
    transform: scale(1.1);
}

.stats-card h3 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: white !important;
}

.stats-card p {
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0.9;
    margin-bottom: 0;
    color: white !important;
}

/* Efectos específicos para cada tarjeta */
.stats-card.violet-gradient {
    background: linear-gradient(135deg, #da3b85 0%, #d07ea7 100%) !important;
    box-shadow: 0 4px 15px rgba(218, 59, 133, 0.3) !important;
}

.stats-card.rose-gradient {
    background: linear-gradient(135deg, #fd1c79 0%, #ff6b9d 100%) !important;
    box-shadow: 0 4px 15px rgba(253, 28, 121, 0.3) !important;
}

.stats-card.success-gradient {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3) !important;
}

.stats-card.purple-gradient {
    background: linear-gradient(135deg, #6f42c1 0%, #a78bfa 100%) !important;
    box-shadow: 0 4px 15px rgba(111, 66, 193, 0.3) !important;
}

.stats-card:hover.violet-gradient {
    box-shadow: 0 8px 25px rgba(218, 59, 133, 0.4) !important;
}

.stats-card:hover.rose-gradient {
    box-shadow: 0 8px 25px rgba(253, 28, 121, 0.4) !important;
}

.stats-card:hover.success-gradient {
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4) !important;
}

.stats-card:hover.purple-gradient {
    box-shadow: 0 8px 25px rgba(111, 66, 193, 0.4) !important;
}

/* Estilos para la foto de perfil */
.avatar-container {
    position: relative;
    display: inline-block;
}

.avatar-img {
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(218, 59, 133, 0.3);
}

.avatar-img:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(218, 59, 133, 0.4);
}

.avatar-placeholder {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #da3b85 0%, #d07ea7 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 15px rgba(218, 59, 133, 0.3);
    transition: all 0.3s ease;
}

.avatar-placeholder:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(218, 59, 133, 0.4);
}

.avatar-placeholder i {
    font-size: 3rem;
    opacity: 0.8;
}

/* Estilos para el enlace de subir foto */
.avatar-placeholder + div a {
    color: #da3b85;
    transition: all 0.3s ease;
}

.avatar-placeholder + div a:hover {
    color: #d07ea7;
    text-decoration: underline !important;
}

.avatar-placeholder + div i {
    color: #da3b85;
}

/* Estilos para el botón de eliminar foto */
.btn-outline-danger {
    border-color: #dc3545;
    color: #dc3545;
    transition: all 0.3s ease;
}

.btn-outline-danger:hover {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

.btn-outline-danger i {
    transition: all 0.3s ease;
}

.btn-outline-danger:hover i {
    transform: scale(1.1);
}

/* Estilos para alertas pequeñas */
.alert-sm {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

/* Estilos para la tarjeta de información del perfil */
.profile-info-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: none;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.profile-info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.profile-avatar-section {
    position: relative;
}

.profile-avatar {
    transition: all 0.3s ease;
}

.profile-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 35px rgba(218, 59, 133, 0.4) !important;
}

.profile-avatar-placeholder {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #da3b85 0%, #d07ea7 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 8px 25px rgba(218, 59, 133, 0.3);
    transition: all 0.3s ease;
    margin: 0 auto;
}

.profile-avatar-placeholder:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 35px rgba(218, 59, 133, 0.4);
}

.profile-name {
    color: #333;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.badges-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.main-badge, .level-badge, .points-badge {
    transition: all 0.3s ease;
}

.main-badge:hover, .level-badge:hover, .points-badge:hover {
    transform: scale(1.05);
}

.badges-section .badge {
    font-size: 0.75rem !important;
    padding: 0.375rem 0.75rem !important;
    white-space: nowrap;
    min-width: fit-content;
}

.user-description {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 15px;
    border-left: 4px solid #da3b85;
}

.description-text {
    color: #555;
    font-style: italic;
    margin-bottom: 0;
    line-height: 1.6;
}

.member-info {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    padding: 1rem;
    border-radius: 15px;
    border: 2px solid #2196f3;
}

.info-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #1976d2;
    font-weight: 500;
}

.points-level-section {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    padding: 1.5rem;
    border-radius: 15px;
    border: 2px solid #ff9800;
}

.points-display {
    margin-bottom: 1rem;
}

.points-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: #f57c00;
    margin-bottom: 0.25rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.points-label {
    color: #e65100;
    font-weight: 600;
    margin-bottom: 0;
    font-size: 0.9rem;
}

.level-display {
    text-align: center;
}

.level-badge {
    font-size: 1.2rem;
    font-weight: 700;
    color: #6c5ce7;
    margin-bottom: 0.25rem;
}

.level-name {
    color: #5f3dc4;
    font-weight: 500;
    margin-bottom: 0;
    font-size: 0.9rem;
}

.edit-profile-section {
    margin-top: 1.5rem;
}

.edit-profile-section .btn {
    border-radius: 25px;
    padding: 0.75rem 2rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

 .edit-profile-section .btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(218, 59, 133, 0.3);
 }

 /* Estilos para la sección de progreso */
 .progress-section {
     background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
     padding: 1rem;
     border-radius: 15px;
     border: 1px solid #dee2e6;
 }

 .progress {
     background-color: #e9ecef;
     border-radius: 5px;
     overflow: hidden;
 }

 .progress-bar {
     transition: width 0.6s ease;
 }

 /* Estilos para la sección de beneficios */
 .benefits-section {
     background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
     padding: 1rem;
     border-radius: 15px;
     border: 1px solid #ffcc80;
 }

 .benefits-section h6 {
     color: #e65100;
     font-weight: 600;
 }

 .benefits-section li {
     padding: 0.25rem 0;
     border-radius: 5px;
     transition: all 0.3s ease;
 }

 .benefits-section li:hover {
     background-color: rgba(255, 255, 255, 0.5);
     transform: translateX(5px);
 }

 .benefits-section i {
     width: 20px;
     text-align: center;
 }

 /* Estilos para la sección de estadísticas del usuario */
 .user-stats-section {
     background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
     padding: 1.5rem;
     border-radius: 15px;
     border: 1px solid #dee2e6;
 }

 .stats-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
 }

 .stat-item {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     padding: 0.75rem;
     background: white;
     border-radius: 10px;
     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
     transition: all 0.3s ease;
 }

 .stat-item:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 15px rgba(0,0,0,0.15);
 }

 .stat-icon {
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: rgba(218, 59, 133, 0.1);
     flex-shrink: 0;
 }

 .stat-icon i {
     font-size: 1.2rem;
 }

 .stat-content {
     flex: 1;
     min-width: 0;
 }

 .stat-number {
     font-size: 1.5rem;
     font-weight: 700;
     color: #333;
     line-height: 1;
     margin-bottom: 0.25rem;
 }

 .stat-label {
     font-size: 0.8rem;
     color: #666;
     font-weight: 500;
     line-height: 1.2;
 }

 /* Responsive para estadísticas */
 @media (max-width: 576px) {
     .stats-grid {
         grid-template-columns: 1fr;
         gap: 0.75rem;
     }
     
     .stat-item {
         padding: 0.5rem;
     }
     
     .stat-number {
         font-size: 1.25rem;
     }
     
     .stat-label {
         font-size: 0.75rem;
     }
 }
</style>
@include('layouts.title-header', [
    'title' => 'Mi Perfil', 
    'breadcrumbs' => [
        ['text' => 'Cuenta', 'url' => null],
        ['text' => 'Mi Perfil']
    ]
])

<div class="container mt-4">
    <div class="row">
        <!-- Columna Izquierda -->
        <div class="col-lg-4 mb-4">
            <!-- Información del Perfil -->
            <div class="card profile-info-card">
                <div class="card-body text-center">
                    <!-- Imagen del Perfil -->
                    <div class="profile-avatar-section mb-4">
                        @if($user->foto_perfil)
                            <img src="{{ $user->getFotoPerfilUrl() }}" 
                                 alt="Foto de perfil" 
                                 class="profile-avatar"
                                 style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid #da3b85; box-shadow: 0 8px 25px rgba(218, 59, 133, 0.3);">
                        @else
                            <img src="{{ $user->getFotoPerfilOrDefault() }}" 
                                 alt="Avatar por defecto" 
                                 class="profile-avatar"
                                 style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid #da3b85; box-shadow: 0 8px 25px rgba(218, 59, 133, 0.3);">
                            <div class="mt-2">
                                <small class="text-muted">
                                    <i class="fas fa-camera me-1"></i>
                                    <a href="{{ route('profile.edit') }}" class="text-decoration-none">
                                        Sube tu foto de perfil
                                    </a>
                                </small>
                            </div>
                        @endif
                    </div>

                    <!-- Nombre del Usuario -->
                    <h4 class="profile-name mb-3">{{ $user->nombre }} {{ $user->apellido }}</h4>

                                         <!-- Badges -->
                     <div class="badges-section mb-4">
                         @if($user->isAdmin())
                         <div class="main-badge">
                             <span class="badge bg-primary">
                                 <i class="fas fa-crown me-1"></i>
                                 Administrador
                             </span>
                         </div>
                         @endif
                         <div class="level-badge">
                             <span class="badge bg-info">
                                 {{ $userPoints->getBadge() }} (Nivel {{ $userPoints->level }})
                             </span>
                         </div>
                         <div class="points-badge">
                             <span class="badge bg-warning">
                                 <i class="fas fa-star me-1"></i>
                                 {{ number_format($userPoints->points) }} Puntos
                             </span>
                         </div>
                     </div>

                                         <!-- Descripción del Usuario -->
                     @if($user->descripcion || (auth()->check() && auth()->id() == $user->id))
                     <div class="user-description mb-4">
                         @if($user->descripcion)
                             <p class="description-text">{{ $user->descripcion }}</p>
                         @else
                             <p class="text-muted">
                                 <i class="fas fa-edit me-1"></i>
                                 <a href="{{ route('profile.edit') }}" class="text-decoration-none">
                                     Añade una descripción sobre ti
                                 </a>
                             </p>
                         @endif
                     </div>
                     @endif

                                         <!-- Estadísticas del Usuario -->
                     <div class="user-stats-section mb-4">
                         <h6 class="text-center mb-3">
                             <i class="fas fa-chart-bar text-violet-red me-2"></i>
                             Mis Estadísticas
                         </h6>
                         
                         <!-- Información de Miembro -->
                         <div class="member-info mb-3">
                             <div class="info-item text-center">
                                 <i class="fas fa-calendar-alt text-primary"></i>
                                 <span><strong>Miembro desde:</strong> {{ $user->created_at->format('d/m/Y') }}</span>
                             </div>
                         </div>
                         
                         <div class="stats-grid">
                             <div class="stat-item">
                                 <div class="stat-icon">
                                     <i class="fas fa-calendar-check text-success"></i>
                                 </div>
                                 <div class="stat-content">
                                     <div class="stat-number">{{ $user->citas()->where('estado', 'completado')->count() }}</div>
                                     <div class="stat-label">Citas Completadas</div>
                                 </div>
                             </div>
                             
                             <div class="stat-item">
                                 <div class="stat-icon">
                                     <i class="fas fa-images text-info"></i>
                                 </div>
                                 <div class="stat-content">
                                     <div class="stat-number">{{ $user->citaImagenes()->count() }}</div>
                                     <div class="stat-label">Imágenes Subidas</div>
                                 </div>
                             </div>
                             
                             <div class="stat-item">
                                 <div class="stat-icon">
                                     <i class="fas fa-heart text-danger"></i>
                                 </div>
                                 <div class="stat-content">
                                     <div class="stat-number">{{ $user->citaImagenes()->withCount('likes')->get()->sum('likes_count') }}</div>
                                     <div class="stat-label">Likes Recibidos</div>
                                 </div>
                             </div>
                             
                             <div class="stat-item">
                                 <div class="stat-icon">
                                     <i class="fas fa-thumbs-up text-warning"></i>
                                 </div>
                                 <div class="stat-content">
                                     <div class="stat-number">{{ \App\Models\Like::where('user_id', $user->id)->count() }}</div>
                                     <div class="stat-label">Likes Enviados</div>
                                 </div>
                             </div>
                         </div>
                         
                         <!-- Progreso al siguiente nivel -->
                         @if(auth()->check() && auth()->id() == $user->id)
                         <div class="progress-section mt-4">
                             <div class="d-flex justify-content-between mb-2">
                                 <small class="text-muted">Progreso al siguiente nivel</small>
                                 <small class="text-muted">{{ number_format($userPoints->getProgressToNextLevel(), 1) }}%</small>
                             </div>
                             <div class="progress" style="height: 10px; border-radius: 5px;">
                                 <div class="progress-bar bg-violet-red" 
                                      style="width: {{ $userPoints->getProgressToNextLevel() }}%"></div>
                             </div>
                             <small class="text-muted d-block mt-1">
                                 {{ $userPoints->getPointsForNextLevel() }} puntos para el nivel {{ $userPoints->level + 1 }}
                             </small>
                         </div>
                         @endif
                     </div>

                                         <!-- Puntos y Nivel -->
                     <div class="points-level-section mb-4">
                         <div class="points-display">
                             <h2 class="points-number">{{ number_format($userPoints->points) }}</h2>
                             <p class="points-label">Puntos Totales</p>
                         </div>
                         
                         <h6 class="text-center mb-3">
                                 <i class="fas fa-gift text-violet-red me-2"></i>
                                 Beneficios Actuales
                             </h6>
                             <ul class="list-unstyled">
                                 <li class="mb-2">
                                     <i class="fas fa-percentage text-success me-2"></i>
                                     <span class="text-muted">{{ $userPoints->getDiscountPercentage() }}% de descuento</span>
                                 </li>
                                 @if($userPoints->level >= 6)
                                     <li class="mb-2">
                                         <i class="fas fa-crown text-warning me-2"></i>
                                         <span class="text-muted">Prioridad en citas</span>
                                     </li>
                                 @endif
                                 @if($userPoints->level >= 11)
                                     <li class="mb-2">
                                         <i class="fas fa-gift text-info me-2"></i>
                                         <span class="text-muted">Regalos especiales</span>
                                     </li>
                                 @endif
                             </ul>
                     </div>


                     <!-- Botón Editar Perfil -->
                     @if(auth()->check() && auth()->id() == $user->id)
                     <div class="edit-profile-section">
                         <a href="{{ route('profile.edit') }}" class="btn violet-red--btn tra-black--hover">
                             <i class="fas fa-edit me-2"></i>
                             Editar Perfil
                         </a>
                     </div>
                     @endif
                 </div>
             </div>
        </div>

                          <!-- Columna Derecha -->
         <div class="col-lg-8">
             <!-- Galería de Imágenes -->
             <div class="card mb-4">
                 <div class="card-header d-flex justify-content-between align-items-center">
                     <h5 class="mb-0">
                         <i class="fas fa-images me-2"></i>
                         Mi Galería de Imágenes
                     </h5>
                                             <a href="{{ route('cita-imagenes.index') }}" class="btn btn-sm violet-red--btn tra-black--hover">
                         Ver Todas
                     </a>
                 </div>
                 <div class="card-body">
                     @if($user->citaImagenes()->count() > 0)
                         <div class="row">
                             @foreach($user->citaImagenes()->latest()->take(8)->get() as $imagen)
                                 @php
                                     $imagen->loadMissing('cita');
                                     $capGalU = trim((string) ($imagen->cita?->publicacion_descripcion ?? ''));
                                     $capGalUShort = $capGalU !== '' ? Str::limit($capGalU, 20) : 'Imagen';
                                     $altGalU = $capGalU !== '' ? Str::limit($capGalU, 60) : 'Imagen de la cita';
                                 @endphp
                                 <div class="col-md-3 col-sm-4 col-6 mb-3">
                                     <div class="position-relative">
                                         <img src="{{ asset('storage/' . $imagen->ruta_imagen) }}" 
                                              class="img-fluid rounded" 
                                              alt="{{ $altGalU }}"
                                              style="height: 150px; width: 100%; object-fit: cover;">
                                         @if($imagen->es_destacada)
                                             <div class="position-absolute top-0 end-0 m-1">
                                                 <span class="badge bg-warning">
                                                     <i class="fas fa-star"></i>
                                                 </span>
                                             </div>
                                         @endif
                                         <div class="position-absolute bottom-0 start-0 w-100 p-2" style="background: rgba(0,0,0,0.7);">
                                             <small class="text-white">{{ $capGalUShort }}</small>
                                         </div>
                                     </div>
                                 </div>
                             @endforeach
                         </div>
                         
                         @if($user->citaImagenes()->count() > 8)
                             <div class="text-center mt-3">
                                 <a href="{{ route('cita-imagenes.index') }}" class="btn violet-red--btn tra-black--hover">
                                     Ver Todas las Imágenes
                                 </a>
                             </div>
                         @endif
                     @else
                         <div class="text-center py-4">
                             <i class="fas fa-images fa-3x text-muted mb-3"></i>
                             <h5 class="text-muted">No tienes imágenes en tu galería</h5>
                             <p class="text-muted">¡Comparte tus uñas con nosotros!</p>
                             <a href="{{ route('cita-imagenes.create') }}" class="btn violet-red--btn tra-black--hover">
                                 <i class="fas fa-upload me-2"></i>
                                 Subir Primera Imagen
                             </a>
                         </div>
                     @endif
                 </div>
             </div>

             <!-- Actividad Reciente de Puntos -->
             @if(auth()->check() && auth()->id() == $user->id)
             <div class="card mb-4">
                 <div class="card-header d-flex justify-content-between align-items-center">
                     <h5 class="mb-0">
                         <i class="fas fa-history me-2"></i>
                         Actividad Reciente de Puntos
                     </h5>
                     <a href="{{ route('points.history') }}" class="btn violet-red--btn tra-black--hover">
                         Ver Todo el Historial
                     </a>
                 </div>
                 <div class="card-body">
                     @if($transactions->count() > 0)
                         <div class="table-responsive">
                             <table class="table table-hover">
                                 <thead>
                                     <tr>
                                         <th>Fecha</th>
                                         <th>Descripción</th>
                                         <th>Puntos</th>
                                         <th>Tipo</th>
                                     </tr>
                                 </thead>
                                 <tbody>
                                     @foreach($transactions as $transaction)
                                         <tr>
                                             <td>{{ $transaction->created_at->format('d/m/Y H:i') }}</td>
                                             <td>{{ $transaction->description }}</td>
                                             <td>
                                                 <span class="badge bg-{{ $transaction->getColor() }}">
                                                     {{ $transaction->getIcon() }} {{ $transaction->points }}
                                                 </span>
                                             </td>
                                             <td>
                                                 @switch($transaction->type)
                                                     @case('earned')
                                                         <span class="text-success">Ganados</span>
                                                         @break
                                                     @case('spent')
                                                         <span class="text-danger">Gastados</span>
                                                         @break
                                                     @case('bonus')
                                                         <span class="text-warning">Bonus</span>
                                                         @break
                                                     @default
                                                         <span class="text-info">Otros</span>
                                                 @endswitch
                                             </td>
                                         </tr>
                                     @endforeach
                                 </tbody>
                             </table>
                         </div>
                         
                         @if($transactions->hasPages())
                             <div class="d-flex justify-content-center mt-3">
                                 {{ $transactions->links() }}
                             </div>
                         @endif
                     @else
                         <div class="text-center py-4">
                             <i class="fas fa-star fa-3x text-muted mb-3"></i>
                             <h5 class="text-muted">No hay actividad aún</h5>
                             <p class="text-muted">¡Comienza a ganar puntos con tus citas y actividades!</p>
                         </div>
                     @endif
                 </div>
             </div>
             @endif

             <!-- Cómo Ganar Puntos -->
             <div class="card mb-4">
                 <div class="card-header d-flex justify-content-between align-items-center">
                     <h5 class="mb-0">
                         <i class="fas fa-info-circle me-2"></i>
                         ¿Cómo Ganar Puntos?
                     </h5>
                     <a href="{{ route('points.guide') }}" class="btn violet-red--btn tra-black--hover btn-sm">
                         <i class="fa fa-info-circle me-1"></i>
                         Ver Guía
                     </a>
                 </div>
                 <div class="card-body">
                     <div class="row">
                         <div class="col-md-6 mb-3">
                             <div class="d-flex align-items-center">
                                 <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                     <i class="fas fa-calendar-check"></i>
                                 </div>
                                 <div>
                                     <h6 class="mb-1">Completar Citas</h6>
                                     <small class="text-muted">+50 puntos por cita completada</small>
                                 </div>
                             </div>
                         </div>
                         <div class="col-md-6 mb-3">
                             <div class="d-flex align-items-center">
                                 <div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                     <i class="fas fa-image"></i>
                                 </div>
                                 <div>
                                     <h6 class="mb-1">Subir Imágenes</h6>
                                     <small class="text-muted">+25 puntos por imagen subida</small>
                                 </div>
                             </div>
                         </div>
                         <div class="col-md-6 mb-3">
                             <div class="d-flex align-items-center">
                                 <div class="bg-warning text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                     <i class="fas fa-heart"></i>
                                 </div>
                                 <div>
                                     <h6 class="mb-1">Recibir Likes</h6>
                                     <small class="text-muted">+5 puntos por like recibido</small>
                                 </div>
                             </div>
                         </div>
                         <div class="col-md-6 mb-3">
                             <div class="d-flex align-items-center">
                                 <div class="bg-info text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                     <i class="fas fa-gift"></i>
                                 </div>
                                 <div>
                                     <h6 class="mb-1">Bonus Especiales</h6>
                                     <small class="text-muted">+100 puntos por logros especiales</small>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
    </div>
</div>
@endsection