
<!-- Contenedor Lateral Flotante -->
<div id="calc-sidebar-container">
    
    <!-- Tira de Botones (Acceso Rápido) -->
    <div class="calc-buttons-strip">
        <button class="calc-btn-toggle" data-calc="gestograma" title="Gestograma / Embarazo">
            <i class="fa fa-female"></i>
        </button>
        <!-- Futuras calculadoras: IMC, Dosis, etc. -->
        <!-- 
        <button class="calc-btn-toggle" data-calc="imc" title="Calculadora IMC">
            <i class="fa fa-balance-scale"></i>
        </button> 
        -->
    </div>

    <!-- Panel de Contenido Expandible -->
    <div id="calc-main-panel">
        <div class="calc-header">
            <h3>Calculadora</h3>
            <button class="btn-close-calc" title="Ocultar"><i class="fa fa-chevron-right"></i></button>
        </div>

        <!-- MÓDULO: GESTOGRAMA -->
        <div id="calc-gestograma" class="calc-content">
            <div class="alert alert-info" style="font-size:12px; padding:8px; margin-bottom:15px;">
                <i class="fa fa-info-circle"></i> Ingrese la fecha de última menstruación (FUM).
            </div>

            <div class="calc-input-group">
                <label for="gesto_fum"><i class="fa fa-calendar"></i> Fecha Última Menstruación (FUM):</label>
                <input type="date" id="gesto_fum" class="form-control">
            </div>

            <!-- Resultados -->
            <div class="calc-result-box">
                <div class="calc-result-title">Edad Gestacional</div>
                <div class="calc-result-value" id="res_semanas">0 Semanas</div>
                <div class="calc-result-sub" id="res_dias">+ 0 días</div>
                <br>
                <div class="calc-result-title">Fecha Probable de Parto</div>
                <div class="calc-result-value" style="font-size:18px; color:#0099d3;" id="res_fpp">--/--/----</div>
                <div class="calc-result-sub" id="res_trimestre">--</div>
            </div>

            <div class="calc-input-group" style="margin-top:20px;">
                <label>Progreso del Embarazo</label>
                <div class="gesto-progress-container">
                    <div id="gesto_bar" class="gesto-progress-bar"></div>
                </div>
                <div class="gesto-week-markers">
                    <span>0sem</span>
                    <span>20sem</span>
                    <span>40sem</span>
                </div>
            </div>
        </div>

        <!-- MÓDULO: IMC (Placeholder) -->
        <div id="calc-imc" class="calc-content">
            <p>Calculadora IMC próximamente...</p>
        </div>

    </div>

</div>
