<div class="cs-space-20 cs-space-md-120"></div>
<div class="d-none d-md-block cs-space-40"></div>

<section id="efpa-params">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-3">
                <!-- Menú lateral EFPA -->
                <div class="lateral-menu">
                    <div class="header-lateral-menu">
                        <div class="row">
                            <div class="col-12">
                                <h4>EFPA</h4>
                            </div>
                        </div>
                    </div>
                    <div class="body-lateral-menu">
                        <?php 
                        // Obtener lista de cuadros para el menú lateral
                        $cuadros_menu = $this->api->efpa_get_cuadros();
                        if($cuadros_menu && is_array($cuadros_menu)):
                            foreach ($cuadros_menu as $cid => $cuadro_item):
                                $nombre_menu = isset($cuadro_item["nombreEsp"]) ? $cuadro_item["nombreEsp"] : "Cuadro " . ($cid + 1);
                                $codigo_menu = isset($cuadro_item["codGeneral"]) ? $cuadro_item["codGeneral"] : "";
                                $codigo_sdmx_menu = isset($cuadro_item["codigoSDMX"]) ? $cuadro_item["codigoSDMX"] : "";
                                $cuadro_param_menu = $codigo_menu ? $codigo_menu : $codigo_sdmx_menu;
                                $es_activo = (isset($cuadro) && $cuadro == $cuadro_param_menu) ? 'active' : '';
                        ?>
                        <div class="row" style="border-bottom: 1px solid #e0e0e0; padding-bottom: 5px; margin-bottom: 5px;">
                            <div class="col-12">
                                <a href="<?php echo home_url('/efpa-parametros/'); ?>?cuadro=<?php echo urlencode($cuadro_param_menu); ?>">
                                    <h3 class="<?php echo $es_activo; ?>">
                                        <?php echo esc_html($nombre_menu); ?>
                                    </h3>
                                </a>
                            </div>
                        </div>
                        <?php 
                            endforeach;
                        endif;
                        ?>
                    </div>
                </div>
            </div>
            
            <div class="col-12 col-md-9" id="parameters">
                <div class="row">
                    <div class="col-12">
                        <h2>Parámetros de Consulta</h2>
                        <p class="lead">Configure los criterios para obtener los datos estadísticos.</p>
                        <hr>
                    </div>
                </div>

        <?php 
        // DEBUG: Desactivado para producción
        /*
        if(isset($cuadro)) {
            echo "<div class='alert alert-info' style='font-size: 0.85rem;'>";
            echo "<strong>🔍 Debug Info - Respuesta COMPLETA de API EFPA:</strong><br>";
            echo "<strong>Cuadro solicitado:</strong> <code>{$cuadro}</code><br>";
            echo "<strong>Total de variables:</strong> " . (isset($variables) ? count($variables) : '0') . "<br><br>";
            
            if(isset($variables) && !empty($variables)) {
                echo "<strong>TODAS LAS VARIABLES (Respuesta completa):</strong><br>";
                echo "<pre style='background:#f8f9fa;padding:8px;border-radius:4px;font-size:0.7rem;max-height:600px;overflow:auto;'>";
                print_r($variables);
                echo "</pre>";
                echo "<strong>Todas las claves únicas:</strong><br>";
                $allKeys = array();
                foreach($variables as $var) {
                    $allKeys = array_merge($allKeys, array_keys($var));
                }
                $uniqueKeys = array_unique($allKeys);
                echo "<code style='background:#fff3cd;padding:5px;display:block;'>" . implode(', ', $uniqueKeys) . "</code>";
            }
            echo "</div>";
        }
        */
        ?>

        <?php if(isset($variables) && is_array($variables) && !empty($variables)): ?>
        
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="cs-space-10"></div>
                    <h3>Parámetros de la consulta</h3>
                    <div class="cs-space-10"></div>
                </div>
            </div>
        </div>
        
        <form method="GET" action="<?php echo home_url('/efpa-resultados/'); ?>" id="efpa-form">
        <div class="container parameters">
            <div class="row">
                <!-- Hidden fields -->
                <input type="hidden" name="cuadro" value="<?php echo isset($cuadro) ? esc_attr($cuadro) : ''; ?>">
                
                <!-- DEBUG: Mostrar URL de API que se construirá (COMENTADO - Desactivar para producción) -->
                <!--
                <div class="col-12">
                    <div class="alert alert-secondary" style="font-size: 0.75rem;">
                        <strong>📡 Endpoint API EFPA:</strong><br>
                        <code>http://192.168.100.137:8081/simafir_api/ws/public/efpa/obtenerDatos/{cuadro}/{variable}/{pais}/{frecuencia}/{sector}/{subsector}?fechaInicio={dd-mm-yyyy}&fechaFin={dd-mm-yyyy}&formato=json</code>
                    </div>
                </div>
                -->
                
                <!-- PAIS / REGIONES -->
                <div class="col-12 col-md-6">
                    <div class="params-box">
                        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pill-country" role="tab" aria-controls="pill-country" aria-selected="true">PAIS</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="IPC-more-tab" data-toggle="pill" href="#pill-region" role="tab" aria-controls="pills-profile" aria-selected="false">REGIONES</a>
                            </li>
                        </ul>
                        <div class="tab-content" id="pills-tabContent">
                            <div class="tab-pane fade show active box-content-emfa" id="pill-country" role="tabpanel" aria-labelledby="pills-home-tab">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="country0" name="pais[]" value="CRI">
                                    <label class="custom-control-label" for="country0">COSTA RICA</label>
                                </div>
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="country1" name="pais[]" value="SLV">
                                    <label class="custom-control-label" for="country1">EL SALVADOR</label>
                                </div>
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="country2" name="pais[]" value="GTM">
                                    <label class="custom-control-label" for="country2">GUATEMALA</label>
                                </div>
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="country3" name="pais[]" value="HND">
                                    <label class="custom-control-label" for="country3">HONDURAS</label>
                                </div>
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="country4" name="pais[]" value="NIC">
                                    <label class="custom-control-label" for="country4">NICARAGUA</label>
                                </div>
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="country5" name="pais[]" value="DOM">
                                    <label class="custom-control-label" for="country5">REPÚBLICA DOMINICANA</label>
                                </div>
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="country6" name="pais[]" value="PAN">
                                    <label class="custom-control-label" for="country6">PANAMÁ</label>
                                </div>
                            </div>
                            <div class="tab-pane fade box-content-emfa" id="pill-region" role="tabpanel" aria-labelledby="IPC-more-tab">
                                <p class="text-muted">Próximamente...</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- VARIABLES -->
                <div class="col-12 col-md-6">
                    <div class="params-box">
                        <div class="box-header">
                            <h3>VARIABLES</h3>
                        </div>
                        <div class="box-content box-content-emfa">
                            <?php foreach($variables as $x => $var): ?>
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input radio-variables" id="var<?php echo $x; ?>" 
                                           name="variable[]" value="<?php echo esc_attr($var['codigoVariable']); ?>" 
                                           data-sector="<?php echo esc_attr($var['codigoSector']); ?>">
                                    <label class="custom-control-label" for="var<?php echo $x; ?>">
                                        <?php echo esc_html($var['variable']); ?>
                                    </label>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Segunda fila de parámetros - FECHAS -->
        <div class="container">
            <div class="cs-space-20"></div>
            <div class="row">
                <!-- FECHA INICIO (Año + Mes) -->
                <div class="col-12 col-md-6">
                    <div class="params-box">
                        <div class="box-header">
                            <h3>FECHA INICIO</h3>
                        </div>
                        <div class="box-content box-content-emfa" style="max-height: 400px; overflow-y: auto;">
                            <div style="padding: 15px;">
                                <label style="font-weight: bold; color: #004e9c; margin-bottom: 10px; display: block;">AÑO:</label>
                                <select name="anioInicio" id="anioInicio" class="form-control" required style="margin-bottom: 15px;">
                                    <?php 
                                    $currentYear = date('Y');
                                    for($year = $currentYear; $year >= 2000; $year--): 
                                    ?>
                                        <option value="<?php echo $year; ?>" <?php echo ($year == $currentYear - 1) ? 'selected' : ''; ?>>
                                            <?php echo $year; ?>
                                        </option>
                                    <?php endfor; ?>
                                </select>
                                
                                <label style="font-weight: bold; color: #004e9c; margin-bottom: 10px; display: block;">MES:</label>
                                <select name="mesInicio" id="mesInicio" class="form-control" required>
                                    <?php 
                                    $meses = ['ENERO', 'FEBRERO', 'MARZO', 'ABRIL', 'MAYO', 'JUNIO', 
                                             'JULIO', 'AGOSTO', 'SEPTIEMBRE', 'OCTUBRE', 'NOVIEMBRE', 'DICIEMBRE'];
                                    foreach($meses as $x => $mes): 
                                        $numMes = str_pad($x + 1, 2, '0', STR_PAD_LEFT);
                                    ?>
                                        <option value="<?php echo $numMes; ?>" <?php echo ($x == 0) ? 'selected' : ''; ?>>
                                            <?php echo $mes; ?>
                                        </option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- FECHA FIN (Año + Mes) -->
                <div class="col-12 col-md-6">
                    <div class="params-box">
                        <div class="box-header">
                            <h3>FECHA FIN</h3>
                        </div>
                        <div class="box-content box-content-emfa" style="max-height: 400px; overflow-y: auto;">
                            <div style="padding: 15px;">
                                <label style="font-weight: bold; color: #004e9c; margin-bottom: 10px; display: block;">AÑO:</label>
                                <select name="anioFin" id="anioFin" class="form-control" required style="margin-bottom: 15px;">
                                    <?php 
                                    for($year = $currentYear; $year >= 2000; $year--): 
                                    ?>
                                        <option value="<?php echo $year; ?>" <?php echo ($year == $currentYear) ? 'selected' : ''; ?>>
                                            <?php echo $year; ?>
                                        </option>
                                    <?php endfor; ?>
                                </select>
                                
                                <label style="font-weight: bold; color: #004e9c; margin-bottom: 10px; display: block;">MES:</label>
                                <select name="mesFin" id="mesFin" class="form-control" required>
                                    <?php 
                                    foreach($meses as $x => $mes): 
                                        $numMes = str_pad($x + 1, 2, '0', STR_PAD_LEFT);
                                    ?>
                                        <option value="<?php echo $numMes; ?>" <?php echo ($x == 11) ? 'selected' : ''; ?>>
                                            <?php echo $mes; ?>
                                        </option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tercera fila de parámetros - Campos dinámicos desde API -->
        <div class="container">
            <div class="cs-space-20"></div>
            <div class="row">
                <!-- SECTORES -->
                <div class="col-12 col-md-6">
                    <div class="params-box">
                        <div class="box-header">
                            <h3>SECTORES</h3>
                        </div>
                        <div class="box-content box-content-emfa">
                            <?php 
                            // Extraer sectores únicos de las variables
                            $sectores_unicos = array();
                            foreach($variables as $var) {
                                if(isset($var['codigoSector']) && isset($var['sector'])) {
                                    $sectores_unicos[$var['codigoSector']] = $var['sector'];
                                }
                            }
                            $sectores_unicos = array_unique($sectores_unicos);
                            $total_sectores = count($sectores_unicos);
                            $index_sector = 0;
                            foreach($sectores_unicos as $codigo_sector => $nombre_sector): 
                                $checked = ($total_sectores === 1) ? 'checked' : ''; // Pre-seleccionar si solo hay 1
                            ?>
                                <div class="custom-control custom-checkbox">
                                    <input type="radio" class="custom-control-input radio-sectores" id="sector<?php echo esc_attr($codigo_sector); ?>" 
                                           name="sector" value="<?php echo esc_attr($codigo_sector); ?>" <?php echo $checked; ?> required>
                                    <label class="custom-control-label" for="sector<?php echo esc_attr($codigo_sector); ?>">
                                        <?php echo esc_html($nombre_sector); ?>
                                    </label>
                                </div>
                            <?php 
                                $index_sector++;
                            endforeach; 
                            ?>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <!-- Cuarta fila de parámetros - Frecuencia -->
        <div class="container">
            <div class="cs-space-20"></div>
            <div class="row">
                <!-- FRECUENCIA -->
                <div class="col-12 col-md-6">
                    <div class="params-box">
                        <div class="box-header">
                            <h3>FRECUENCIA</h3>
                        </div>
                        <div class="box-content box-content-emfa">
                            <div class="custom-control custom-checkbox">
                                <input type="radio" class="custom-control-input" id="freq_m" name="frecuencia" value="M" checked required>
                                <label class="custom-control-label" for="freq_m">MENSUAL</label>
                            </div>
                            <div class="custom-control custom-checkbox">
                                <input type="radio" class="custom-control-input" id="freq_t" name="frecuencia" value="T" required>
                                <label class="custom-control-label" for="freq_t">TRIMESTRAL</label>
                            </div>
                            <div class="custom-control custom-checkbox">
                                <input type="radio" class="custom-control-input" id="freq_a" name="frecuencia" value="A" required>
                                <label class="custom-control-label" for="freq_a">ANUAL</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Campos ocultos para fechas construidas -->
        <input type="hidden" name="fechaInicio" id="fechaInicio">
        <input type="hidden" name="fechaFin" id="fechaFin">
        <!-- Subsector fijo _Z (valor por defecto para todas las consultas) -->
        <input type="hidden" name="subsector" value="_Z">

        <!-- Botón Submit -->
        <div class="container">
            <div class="cs-space-20"></div>
            <div class="row">
                <div class="col-12 send-params">
                    <button type="submit" class="btn btn-primary btn-lg w-100">Consultar datos</button>
                </div>
            </div>
            <div class="cs-space-40"></div>
        </div>
        </form>
        
            </div> <!-- Cierre col-md-9 -->
        </div> <!-- Cierre row principal -->

        <?php else: ?>
        
        <div class="row">
            <div class="col-12 col-md-3">
                <!-- Menú lateral -->
                <div class="lateral-menu">
                    <div class="header-lateral-menu">
                        <div class="row">
                            <div class="col-4 d-flex align-items-center">
                                <i class="fa fa-university" style="font-size: 2rem; color: #007bff;"></i>
                            </div>
                            <div class="col-8">
                                <h4>EFPA</h4>
                            </div>
                        </div>
                    </div>
                    <div class="body-lateral-menu">
                        <div class="row">
                            <div class="col-12">
                                <a href="<?php echo home_url('/efpa-lista-de-cuadros/'); ?>">
                                    <h3><i class="fa fa-arrow-left mr-2"></i> Volver a Cuadros</h3>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-12 col-md-9">
        
                <div class="alert alert-danger">
                    <h4 class="alert-heading">⚠️ Error al cargar variables</h4>
                    <p>No se pudieron obtener las variables para el cuadro seleccionado.</p>
                    <hr>
                    <p class="mb-0">
                        <strong>Cuadro solicitado:</strong> <?php echo isset($cuadro) ? esc_html($cuadro) : 'N/A'; ?><br>
                        <small>Verifique la conexión con la API EFPA en el servidor de desarrollo (192.168.100.137:8081).</small>
                    </p>
                </div>
                <a href="<?php echo home_url('/efpa-lista-de-cuadros/'); ?>" class="btn btn-secondary">
                    <i class="fa fa-arrow-left"></i> Volver al listado
                </a>
            </div> <!-- Cierre col-md-9 -->
        </div> <!-- Cierre row -->

        <?php endif; ?>
    </div> <!-- Cierre container -->
</section>

<script type="text/javascript">
jQuery(document).ready(function($) {
    // Datos de variables desde PHP
    var variablesData = <?php echo json_encode($variables); ?>;
    
    // Pre-seleccionar sector cuando se selecciona una variable
    $('.radio-variables').on('change', function() {
        // Si hay variables seleccionadas, intentar pre-seleccionar sector
        var checkedVars = $('.radio-variables:checked');
        
        if(checkedVars.length > 0) {
            // Obtener el código de sector de la primera variable seleccionada
            var firstSelectedCode = checkedVars.first().val();
            
            // Buscar la variable seleccionada
            var selectedVar = variablesData.find(function(v) {
                return v.codigoVariable === firstSelectedCode;
            });
            
            if(selectedVar && selectedVar.codigoSector) {
                // Pre-seleccionar el sector correspondiente
                $('input[name="sector"][value="' + selectedVar.codigoSector + '"]').prop('checked', true);
                console.log('Sector pre-seleccionado:', selectedVar.codigoSector);
            }
        }
    });
    
    // Validación del formulario
    $('#efpa-form').on('submit', function(e) {
        // Validar que haya seleccionado al menos un país
        var paisesSeleccionados = $('input[name="pais[]"]:checked');
        if(paisesSeleccionados.length === 0) {
            e.preventDefault();
            alert('⚠️ Por favor seleccione al menos un país');
            return false;
        }
        
        // Validar que haya seleccionado al menos una variable
        var variablesSeleccionadas = $('input[name="variable[]"]:checked');
        if(variablesSeleccionadas.length === 0) {
            e.preventDefault();
            alert('⚠️ Por favor seleccione al menos una variable');
            return false;
        }
        
        // Validar que sector esté seleccionado
        var sectorValue = $('input[name="sector"]:checked').val();
        if(!sectorValue) {
            e.preventDefault();
            alert('⚠️ Por favor seleccione un sector');
            return false;
        }
        
        // Validar que frecuencia esté seleccionada
        var frecuenciaValue = $('input[name="frecuencia"]:checked').val();
        if(!frecuenciaValue) {
            e.preventDefault();
            alert('⚠️ Por favor seleccione una frecuencia');
            return false;
        }
        
        // Obtener valores de fecha desde selectores
        var anioInicio = $('#anioInicio').val();
        var mesInicio = $('#mesInicio').val();
        var anioFin = $('#anioFin').val();
        var mesFin = $('#mesFin').val();
        
        if(!anioInicio || !mesInicio || !anioFin || !mesFin) {
            e.preventDefault();
            alert('⚠️ Por favor seleccione año y mes de inicio y fin');
            return false;
        }
        
        // Construir fechas en formato dd-mm-yyyy
        var fechaInicio = '01-' + mesInicio + '-' + anioInicio;
        
        // Calcular último día del mes fin
        var ultimoDiaMesFin = new Date(parseInt(anioFin), parseInt(mesFin), 0).getDate();
        var fechaFin = ultimoDiaMesFin + '-' + mesFin + '-' + anioFin;
        
        // Asignar a campos hidden
        $('#fechaInicio').val(fechaInicio);
        $('#fechaFin').val(fechaFin);
        
        console.log('=== EFPA Form Submit ===');
        console.log('Cuadro:', $('input[name="cuadro"]').val());
        
        // Mostrar países seleccionados
        var paisesList = [];
        paisesSeleccionados.each(function() {
            paisesList.push($(this).val());
        });
        console.log('Países seleccionados (' + paisesList.length + '):', paisesList.join(', '));
        
        // Mostrar variables seleccionadas
        var variablesList = [];
        variablesSeleccionadas.each(function() {
            variablesList.push($(this).val());
        });
        console.log('Variables seleccionadas (' + variablesList.length + '):', variablesList.join(', '));
        
        console.log('Frecuencia:', frecuenciaValue);
        console.log('Sector:', sectorValue);
        console.log('Subsector:', '_Z (valor fijo)');
        console.log('Fecha Inicio:', fechaInicio);
        console.log('Fecha Fin:', fechaFin);
        console.log('=========================');
    });
});
</script>

<style>
/* Estilos específicos para EFPA Params - Replicando EMFA */
#efpa-params .params-box {
    box-shadow: -10px 9px 21px 0 rgba(128, 152, 213, 0.08);
    border: solid 1px #ededed;
    background-color: #ffffff;
    margin-bottom: 30px;
}

#efpa-params .params-box .box-header {
    display: flex;
    align-items: center;
    border-bottom: 2px solid #ededed;
    height: 50px;
    padding: 24px 31px;
    position: relative;
}

#efpa-params .params-box .box-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 900;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #686868;
    text-transform: uppercase;
}

#efpa-params .params-box .box-header::after {
    content: '';
    display: block;
    width: 16%;
    height: 2px;
    background: #ffab0d;
    position: absolute;
    bottom: -3px;
    left: 7%;
}

#efpa-params .params-box .box-content-emfa {
    margin-top: 11px;
    max-height: 400px;
    overflow-y: auto;
}

#efpa-params .custom-control {
    padding: 5px 40px;
    display: flex;
    align-items: center;
    text-transform: uppercase;
}

#efpa-params .custom-control:nth-child(even) {
    background-color: #f6f7fa;
}

#efpa-params .custom-control:hover {
    cursor: pointer;
}

#efpa-params .nav-pills {
    border-bottom: solid 2px #ededed;
    height: 46px;
    margin-bottom: 0px !important;
}

#efpa-params .nav-pills li {
    width: 45%;
    text-align: center;
}

#efpa-params .nav-pills li a {
    background: none !important;
    height: 100%;
    font-size: 16px;
    font-weight: 900;
    font-style: normal;
    letter-spacing: normal;
    color: #686868 !important;
    line-height: 2;
    position: relative;
    text-transform: uppercase;
}

#efpa-params .nav-pills .active::after {
    content: '';
    display: block;
    width: 50%;
    height: 2px;
    background: #ffab0d;
    position: absolute;
    bottom: -3px;
    left: 25%;
}

#efpa-params .tab-pane {
    padding: 10px 0 0px 0;
    border-bottom: solid 1px #ededed;
}

#efpa-params .button-box {
    padding: 25px 25px 20px 25px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#efpa-params .btn-primary {
    background-color: #004e9c;
    border: none;
    border-radius: 2px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.43;
    text-align: center;
    color: #ffffff;
}

#efpa-params .btn-primary:hover {
    background-color: #003d7a;
}

#efpa-params .btn-secondary {
    background-color: rgba(202, 202, 202, 0.63);
    border: none;
    border-radius: 2px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.43;
    text-align: center;
    color: #000000;
}

#efpa-params .btn-lg {
    height: 52px;
}

/* Checkboxes estilizados - SIEMPRE VISIBLES */
#efpa-params .custom-control-input {
    position: absolute;
    left: 0;
    z-index: -1;
    width: 1rem;
    height: 1.25rem;
    opacity: 0;
}

#efpa-params .custom-control-label {
    font-size: 14px;
    color: #686868;
    cursor: pointer;
    padding-left: 1.5rem;
    margin-bottom: 0;
    position: relative;
}

/* Checkbox cuadrado estilizado (COMO EN LA IMAGEN) */
#efpa-params .custom-control-label::before {
    position: absolute;
    top: 0.25rem;
    left: 0;
    display: block !important;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    background-color: #fff;
    border: 2px solid #dee2e6;
    border-radius: 0.15rem;
}

/* Checkbox seleccionado - fondo azul */
#efpa-params .custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #1e73be;
    background-color: #1e73be;
}

/* Marca de check blanca cuando está seleccionado */
#efpa-params .custom-control-label::after {
    position: absolute;
    top: 0.25rem;
    left: 0;
    display: block !important;
    width: 1rem;
    height: 1rem;
    content: "";
    background: no-repeat 50% / 50% 50%;
}

#efpa-params .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}

/* Estilos del menú lateral EFPA - Muy Compacto */
.body-lateral-menu {
    padding: 8px;
}

.body-lateral-menu h3 {
    font-size: 0.75rem;
    margin: 3px 0;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background-color 0.2s;
    line-height: 1.2;
}

.body-lateral-menu h3:hover {
    background-color: #f8f9fa;
}

.body-lateral-menu a {
    color: #495057;
    text-decoration: none;
}

.body-lateral-menu a:hover h3 {
    color: #007bff;
}

.body-lateral-menu .row {
    padding-bottom: 3px;
    margin-bottom: 3px;
}

.body-lateral-menu .col-2, 
.body-lateral-menu .col-md-3 {
    padding-right: 5px;
}

.body-lateral-menu .col-10, 
.body-lateral-menu .col-md-9 {
    padding-left: 5px;
}
</style>
