<!-- Modal compacto “Buscar producto y/o calcular marca” con selector de técnica -->
<style>
    /* Ajustes globales para compactar el modal */
    #modalBuscador .modal-dialog {
        max-width: 80%;
    }

    #modalBuscador .modal-content {
        font-size: 0.85rem;
    }

    #modalBuscador .modal-header,
    #modalBuscador .modal-footer {
        padding: 0.3rem 0.6rem;
    }

    #modalBuscador .modal-header h6 {
        margin: 0;
        font-size: 0.95rem;
    }

    #modalBuscador .modal-body {
        padding: 0.5rem 0.8rem;
    }

    #modalBuscador .form-group {
        margin-bottom: 0.4rem;
    }

    #modalBuscador .form-group label {
        font-size: 0.8rem;
        margin-bottom: 0.2rem;
    }

    #modalBuscador .form-control,
    #modalBuscador .form-select {
        font-size: 0.85rem;
        padding: 0.25rem 0.4rem;
    }

    #modalBuscador .table th,
    #modalBuscador .table td {
        padding: 0.4rem;
        font-size: 0.8rem;
    }

    #modalBuscador .btn {
        font-size: 0.85rem;
        padding: 0.3rem 0.6rem;
    }

    #modalBuscador .text-danger-bold {
        font-weight: bold;
        color: #dc3545;
    }

    /* Evitar quiebre prematuro de columnas */
    #modalBuscador .row.gx-2 .col-auto {
        flex: 0 0 auto;
    }
</style>

<div class="modal fade" id="modalBuscador" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">

            <!-- Cabecera -->
            <div class="modal-header">
                <h6>Marcación</h6>
                <button type="button" class="btn-close btn-close-sm" data-bs-dismiss="modal"></button>
            </div>

            <!-- Cuerpo -->
            <div class="modal-body">

                <!-- 1. Primera fila: Producto | Ref. CPN | Cantidad -->
                <div class="row gx-2 gy-1 mb-2 align-items-end">
                    <div class="col-lg-5 col-12">
                        <div class="form-group mb-0">
                            <label for="filtroTerm">Producto</label>
                            <input id="filtroTerm" type="text" class="form-control form-control-sm" placeholder="Buscar producto">
                        </div>
                    </div>
                    <div class="col-lg-4 col-8">
                        <div class="form-group mb-0">
                            <label for="filtroReferencia">Ref. CPN</label>
                            <input id="filtroReferencia" type="text" class="form-control form-control-sm" placeholder="CPN-...">
                        </div>
                    </div>
                    <div class="col-lg-3 col-4">
                        <div class="form-group mb-0">
                            <label for="filtroCant">Cant. min.</label>
                            <input id="filtroCant" type="number" class="form-control form-control-sm" value="1" min="1">
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="form-check mt-1">
                            <input id="chkMostrarSinStock" type="checkbox" class="form-check-input">
                            <label for="chkMostrarSinStock" class="form-check-label small">Mostrar productos sin stock</label>
                        </div>
                    </div>
                </div>
                <!-- Fin Primera fila -->

                <!-- 2. Segunda fila: Precio | Selector Técnica + Marca/Final | Marca rangos | Botones -->
                <div class="row gx-2 gy-1 mb-3 align-items-end">

                    <!-- Columna: Precios (sin IVA / con IVA) -->
                    <div class="col-lg-3 col-md-6 col-6">
                        <div class="form-group mb-1">
                            <label>Precio sin IVA</label>
                            <div class="d-flex">
                                <input id="descuentoAntesImpuestosDesde" type="number" class="form-control form-control-sm me-1" placeholder="Desde">
                                <input id="descuentoAntesImpuestosHasta" type="number" class="form-control form-control-sm" placeholder="Hasta">
                            </div>
                        </div>
                        <div class="form-group mb-0">
                            <label>Precio c/ IVA</label>
                            <div class="d-flex">
                                <input id="descuentoDesde" type="number" class="form-control form-control-sm me-1" placeholder="Desde">
                                <input id="descuentoHasta" type="number" class="form-control form-control-sm" placeholder="Hasta">
                            </div>
                        </div>
                    </div>

                    <!-- Columna: Selector Técnica -->
                    <div class="col-lg-2 col-md-6 col-6">
                        <div class="form-group mb-0">
                            <label for="tecnica">Técnica</label>
                            <select id="tecnica" class="form-select form-select-sm">
                                <option value="">Seleccione técnica</option>
                            </select>
                        </div>
                    </div>

                    <!-- Columna: Marca Manual y Final Marca (lado a lado) -->
                    <div class="col-lg-3 col-md-6 col-6">
                        <div class="row gx-1">
                            <div class="col-6">
                                <div class="form-group mb-0">
                                    <label for="precio_manual">Marca</label>
                                    <input id="precio_manual" type="number" value="0" class="form-control form-control-sm" placeholder="Manual">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group mb-0">
                                    <label for="precio_final_marca">Final Marca</label>
                                    <input id="precio_final_marca" type="number" readonly class="form-control form-control-sm text-danger-bold" placeholder="Final">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Columna: Marca rangos (sin IVA / con IVA) -->
                    <div class="col-lg-3 col-md-6 col-6">
                        <div class="form-group mb-1">
                            <label>Marca sin IVA</label>
                            <div class="d-flex">
                                <input id="precioMarcaAntesImpuestosDesde" type="number" class="form-control form-control-sm me-1" placeholder="Desde">
                                <input id="precioMarcaAntesImpuestosHasta" type="number" class="form-control form-control-sm" placeholder="Hasta">
                            </div>
                        </div>
                        <div class="form-group mb-0">
                            <label>Marca c/ IVA</label>
                            <div class="d-flex">
                                <input id="precioMarcaDesde" type="number" class="form-control form-control-sm me-1" placeholder="Desde">
                                <input id="precioMarcaHasta" type="number" class="form-control form-control-sm" placeholder="Hasta">
                            </div>
                        </div>
                    </div>

                    <!-- Columna: Botones (Finalizar arriba, Buscar abajo) -->
                    <div class="col-lg-1 col-md-6 col-6">
                        <button id="btnFinalizar" class="btn btn-secondary btn-sm w-100 mb-1">Finalizar</button>
                        <button id="btnBuscarProd" class="btn btn-primary btn-sm w-100">Buscar</button>
                    </div>

                </div>
                <!-- Fin Segunda fila -->

                <!-- 3. Tabla de resultados -->
                <div class="table-responsive" style="max-height: 45vh;">
                    <table class="table table-sm table-hover align-middle" id="tablaBuscador">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 8%;">Ref.</th>
                                <th style="width: 10%;">Img</th>
                                <th style="width: 20%;">Descripción</th>
                                <th class="text-center sortable" data-sort="Nivel" style="width: 6%;">Nivel</th>
                                <th class="text-center sortable" data-sort="inventario" style="width: 6%;">Stock</th>
                                <th class="text-right sortable" data-sort="descuentoPVPantesImpuestos" style="width: 8%;">P.Prod<br><small>sin IVA</small></th>
                                <th class="text-right sortable" data-sort="descuentoPVP" style="width: 8%;">P.Prod<br><small>c/ IVA</small></th>
                                <th class="text-right sortable price-marca-col" data-sort="precioMarcaAntesImpuestos" style="width: 8%;">P.Marca<br><small>sin IVA</small></th>
                                <th class="text-right sortable price-marca-col" data-sort="precioMarcaConImpuestos" style="width: 8%;">P.Marca<br><small>c/ IVA</small></th>
                                <th style="width: 6%;"><small>Prov</small></th>
                                <th style="width: 6%;">+</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Se llenará con pintarFilas(data) -->
                        </tbody>
                    </table>
                    <!--  NUEVO  -->
                    <div class="text-center my-2">
                        <button id="btnCargarMas" class="btn btn-outline-primary btn-sm">
                            Cargar más
                        </button>
                    </div>
                </div>
                <!-- Fin Tabla -->

            </div>

            <!-- Pie del modal -->
            <div class="modal-footer py-1">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cerrar</button>
            </div>

        </div>
    </div>
</div>
