<div class="floating-widgets-buttons">
    <button id="toggle-imc-btn" class="widget-toggle-btn" data-widget="imc" data-toggle="tooltip" data-placement="left" title="Calculadora IMC">
        <i class="fas fa-weight"></i>
    </button>
    <button id="toggle-converter-btn" class="widget-toggle-btn" data-widget="converter" data-toggle="tooltip" data-placement="left" title="Convertidor Médico">
        <i class="fas fa-exchange-alt"></i>
    </button>
    {{-- <button id="toggle-vaccination-btn" class="widget-toggle-btn" data-widget="vaccination" data-toggle="tooltip" data-placement="left" title="Calendario de Vacunación">
        <i class="fas fa-syringe"></i>
    </button> --}}
</div>

<div id="imc-widget-container" class="floating-widget-container hidden">
    <div class="widget-header">
        <h6 class="m-0 text-white">Calculadora IMC</h6>
        <button class="widget-close-btn"><i class="fas fa-times"></i></button>
    </div>
    <div class="widget-content">
        <x-widgets.imc-widget />
    </div>
</div>

<div id="converter-widget-container" class="floating-widget-container hidden">
    <div class="widget-header">
        <h6 class="m-0 text-white">Convertidor Médico</h6>
        <button class="widget-close-btn"><i class="fas fa-times"></i></button>
    </div>
    <div class="widget-content">
        <x-widgets.converter-widget />
    </div>
</div>

{{-- <div id="vaccination-widget-container" class="floating-widget-container hidden">
    <div class="widget-header">
        <h6 class="m-0 text-white">Calendario de Vacunación</h6>
        <button class="widget-close-btn"><i class="fas fa-times"></i></button>
    </div>
    <div class="widget-content">
        <x-widgets.vaccination-widget />
    </div>
</div> --}}

<style>
    /* Estilos para los botones flotantes */
    .floating-widgets-buttons {
        position: fixed;
        right: 20px;
        bottom: 100px;
        z-index: 1001;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .widget-toggle-btn {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #4A90E2;
        color: white;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
        cursor: pointer;
    }
    
    .widget-toggle-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    }
    
    #toggle-imc-btn {
        background: linear-gradient(135deg, #2ecc71, #27ae60);
    }
    
    #toggle-converter-btn {
        background: linear-gradient(135deg, #3498db, #2980b9);
    }
    
    #toggle-vaccination-btn {
        background: linear-gradient(135deg, #e74c3c, #c0392b);
    }
    
    /* Estilos para los widgets flotantes */
    .floating-widget-container {
        position: fixed;
        right: 80px;
        bottom: 100px;
        z-index: 1000;
        width: 320px;
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        transition: transform 0.4s ease, opacity 0.3s ease;
        overflow: hidden;
    }
    
    .floating-widget-container.hidden {
        transform: translateX(400px);
        opacity: 0;
        pointer-events: none;
    }
    
    .widget-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 15px;
        background: linear-gradient(90deg, #2A4E6D 0%, #3B6EA5 100%);
        border-bottom: 1px solid #eaeaea;
    }
    
    .widget-close-btn {
        background: none;
        border: none;
        color: #ffffff;
        font-size: 1rem;
        cursor: pointer;
        padding: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color 0.2s;
    }
    
    .widget-close-btn:hover {
        color: #f8d7da;
    }
    
    .widget-content {
        max-height: 80vh;
        overflow-y: auto;
        padding: 0;
    }
    
    /* Personalizaciones para widgets específicos */
    #imc-widget-container {
        bottom: 100px;
        padding: 0;
    }
    
    #converter-widget-container {
        bottom: 100px;
        padding: 0;
    }
    
    #vaccination-widget-container {
        bottom: 100px;
        width: 350px;
        padding: 0;
    }
    
    @media (max-width: 768px) {
        .floating-widget-container {
            width: 90%;
            max-width: 320px;
            right: 50%;
            transform: translateX(50%);
            left: auto;
        }
        
        .floating-widget-container.hidden {
            transform: translateX(200%) !important;
        }
    }
</style>

<!-- La funcionalidad JavaScript para los widgets se ha movido a /public/js/widgets.js --> 