@props([
    'color' => 'primary', 
    'shadow' => 'shadow-lg',
    'hoverable' => false, // Nuevo: Efecto de elevación al pasar el mouse
    'gradient' => false,  // Nuevo: Fondo degradado sutil
])

@php
    $hoverClass = $hoverable ? 'card-hover-lift' : '';
    $gradientClass = $gradient ? 'bg-gradient-light' : '';
@endphp

<div {{ $attributes->merge(['class' => "card $shadow border-top-$color $hoverClass $gradientClass"]) }}>
    
    @if(isset($header))
        <div class="card-header bg-white d-flex align-items-center p-3 border-bottom-0">
            {{ $header }}
        </div>
    @endif

    <div class="card-body">
        {{ $slot }}
    </div>
    
    @if(isset($footer))
        <div class="card-footer bg-white border-top-0">
            {{ $footer }}
        </div>
    @endif
</div>

@pushonce('css')
<style>
    .card-hover-lift {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .card-hover-lift:hover {
        transform: translateY(-5px);
        box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
    }
    
    .card {
        border-radius: 0.5rem; /* Bordes un poco más redondeados */
        border: none; /* Sin borde por defecto, solo shadow */
    }
    .card-header {
        border-radius: 0.5rem 0.5rem 0 0 !important;
    }
    .card-footer {
        border-radius: 0 0 0.5rem 0.5rem !important;
    }
</style>
@endpushonce