<div class="accordion accordion-bordered mt-3" id="accordionPreview">
    <div class="card accordion-item active">
        <h2 class="accordion-header" id="headingOne">
            <button type="button" class="accordion-button" data-bs-toggle="collapse"
                data-bs-target="#accordionPreviewTip" aria-expanded="false"
                aria-controls="accordionPreviewTip">
                <h4><?= lang("Presupuestos.preview") ?></h4>
            </button>
        </h2>

        <div id="accordionPreviewTip" class="accordion-collapse collapse show"
            data-bs-parent="#accordionPreview">
            <div class="accordion-body">
                <div class="nav-align-top mb-4">
                    <ul class="nav nav-pills mb-3" role="tablist">
                        <li id="tab-pv-bn" class="nav-item" style="display: none">
                            <button
                                type="button"
                                class="nav-link"
                                role="tab"
                                data-bs-toggle="tab"
                                data-bs-target="#pv_bn"
                                aria-controls="pv_bn"
                                aria-selected="true">
                                <?= lang("Presupuestos.preview-conf-bn") ?>
                            </button>
                        </li>
                        <li id="tab-pv-bnhq" class="nav-item" style="display: none">
                            <button
                                type="button"
                                class="nav-link"
                                role="tab"
                                data-bs-toggle="tab"
                                data-bs-target="#pv_bnhq"
                                aria-controls="pv_bnhq"
                                aria-selected="true">
                                <?= lang("Presupuestos.preview-conf-bn-hq") ?>
                            </button>
                        </li>
                        <li id="tab-pv-color" class="nav-item" style="display: none">
                            <button
                                type="button"
                                class="nav-link"
                                role="tab"
                                data-bs-toggle="tab"
                                data-bs-target="#pv_color"
                                aria-controls="pv_color"
                                aria-selected="true">
                                <?= lang("Presupuestos.preview-conf-color") ?>
                            </button>
                        </li>
                        <li id="tab-pv-colorhq" class="nav-item" style="display: none">
                            <button
                                type="button"
                                class="nav-link"
                                role="tab"
                                data-bs-toggle="tab"
                                data-bs-target="#pv_colorhq"
                                aria-controls="pv_colorhq"
                                aria-selected="true">
                                <?= lang("Presupuestos.preview-conf-color-hq") ?>
                            </button>
                        </li>
                        <li id="tab-pv-rot-bn" class="nav-item" style="display: none">
                            <button
                                type="button"
                                class="nav-link"
                                role="tab"
                                data-bs-toggle="tab"
                                data-bs-target="#pv_rot_bn"
                                aria-controls="pv_rot_bn"
                                aria-selected="true">
                                <?= lang("Presupuestos.preview-conf-rot-bn") ?>
                            </button>
                        </li>
                        <li id="tab-pv-rot-color" class="nav-item" style="display: none">
                            <button
                                type="button"
                                class="nav-link"
                                role="tab"
                                data-bs-toggle="tab"
                                data-bs-target="#pv_rot_color"
                                aria-controls="pv_rot_color"
                                aria-selected="true">
                                <?= lang("Presupuestos.preview-conf-rot-color") ?>
                            </button>
                        </li>
                        <li id="tab-pv-guardas" class="nav-item" style="display: none">
                            <button
                                type="button"
                                class="nav-link"
                                role="tab"
                                data-bs-toggle="tab"
                                data-bs-target="#pv_guardas"
                                aria-controls="pv_guardas"
                                aria-selected="false">
                                <?= lang("Presupuestos.previewConfiguracionGuardas") ?>
                            </button>
                        </li>
                        <li id="tab-pv-cubierta" class="nav-item" style="display: none">
                            <button
                                type="button"
                                class="nav-link"
                                role="tab"
                                data-bs-toggle="tab"
                                data-bs-target="#pv_cubierta"
                                aria-controls="pv_cubierta"
                                aria-selected="false">
                                <?= lang("Presupuestos.previewConfiguracionCubierta") ?>
                            </button>
                        </li>
                        <li id="tab-pv-esquema-cubierta" class="nav-item" style="display: none">
                            <button
                                type="button"
                                class="nav-link"
                                role="tab"
                                data-bs-toggle="tab"
                                data-bs-target="#pv_esquema_cubierta"
                                aria-controls="pv_esquema_cubierta"
                                aria-selected="false">
                                <?= lang("Presupuestos.previewEsquemaCubierta") ?>
                            </button>
                        </li>
                        <li id="tab-pv-sobrecubierta" class="nav-item" style="display: none">
                            <button
                                type="button"
                                class="nav-link"
                                role="tab"
                                data-bs-toggle="tab"
                                data-bs-target="#pv_sobrecubierta"
                                aria-controls="pv_sobrecubierta"
                                aria-selected="false">
                                <?= lang("Presupuestos.previewConfiguracionSobrecubierta") ?>
                            </button>
                        </li>
                        <li id="tab-pv-faja" class="nav-item" style="display: none">
                            <button
                                type="button"
                                class="nav-link"
                                role="tab"
                                data-bs-toggle="tab"
                                data-bs-target="#pv_faja"
                                aria-controls="pv_faja"
                                aria-selected="false">
                                <?= lang("Presupuestos.previewConfiguracionFaja") ?>
                            </button>
                        </li>
                    </ul>

                    <div class="tab-content border border-container">
                        <div class="tab-pane fade" id="pv_bn" role="tabpanel">
                            <div class="row">
                                <div class="col-3">
                                    <div class="p-4 mb-3 pb-3">
                                        <!-- Configuraciones -->
                                        <div class="row g-3 mb-3">
                                            <div class="col-12">
                                                <a id="pv_bn_pg" href="#" sk-url="<?= str_replace('/0', '', route_to('updatePapelGenerico', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewPapelGenerico") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-12">
                                                <a id="pv_bn_pi" href="#" sk-url="<?= str_replace('/0', '', route_to('updatePapelImpresion', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewPapelCompra") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-12">
                                                <a id="pv_bn_mi" href="#" sk-url="<?= str_replace('/0', '', route_to('updateMaquina', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewAreaImpresion") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>

                                        <hr class="mx-n4" />

                                        <!-- Detalles del presupuesto -->
                                        <h6><?= lang("Presupuestos.previewDetalles") ?></h6>
                                        <dl class="row mb-0">
                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewGramaje") ?></dt>
                                            <dd id="pv_bn_gramaje" class="col-6 text-left">TBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewMano") ?></dt>
                                            <dd id="pv_bn_mano" class="col-sm-6 text-left">TBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewMaquina") ?></dt>
                                            <dd id="pv_bn_maquina" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewAreaImpresion") ?></dt>
                                            <dd id="pv_bn_maquina_impresion" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewLibro") ?></dt>
                                            <dd id="pv_bn_libro" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewForma") ?></dt>
                                            <dd id="pv_bn_forma" class="col-6 text-left">TBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewFormas") ?></dt>
                                            <dd id="pv_bn_nFormas" class="col-6 text-left">TBD</dd>
                                        </dl>
                                    </div>
                                </div>

                                <div class="col-9">
                                    <div class="p-4 mb-3 pb-3">
                                        <!-- Configuraciones -->
                                        <h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6>

                                        <div id="shape-container">
                                            <div class="d-flex align-items-stretch justify-content-end gap-2">
                                                <!--<button type="button" class="btn btn-xs btn-success h-100 refresh-shape"><i class="ti ti-xs ti-refresh"></i></button>-->
                                                <button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
                                            </div>
                                            <div id="pv_bn_shape" class="draw-shapes"></div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="pv_bnhq" role="tabpanel">
                            <div class="row">
                                <div class="col-3">
                                    <div class="p-4 mb-3 pb-3">
                                        <!-- Configuraciones -->
                                        <div class="row g-3 mb-3">
                                            <div class="col-12">
                                                <a id="pv_bnhq_pg" href="#" sk-url="<?= str_replace('/0', '', route_to('updatePapelGenerico', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewPapelGenerico") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-12">
                                                <a id="pv_bnhq_pi" href="#" sk-url="<?= str_replace('/0', '', route_to('updatePapelImpresion', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewPapelCompra") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-12">
                                                <a id="pv_bnhq_mi" href="#" sk-url="<?= str_replace('/0', '', route_to('updateMaquina', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewAreaImpresion") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>

                                        <hr class="mx-n4" />

                                        <!-- Detalles del presupuesto -->
                                        <h6><?= lang("Presupuestos.previewDetalles") ?></h6>
                                        <dl class="row mb-0">
                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewGramaje") ?></dt>
                                            <dd id="pv_bnhq_gramaje" class="col-6 text-left">TBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewMano") ?></dt>
                                            <dd id="pv_bnhq_mano" class="col-sm-6 text-left">TBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewMaquina") ?></dt>
                                            <dd id="pv_bnhq_maquina" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewAreaImpresion") ?></dt>
                                            <dd id="pv_bnhq_maquina_impresion" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewLibro") ?></dt>
                                            <dd id="pv_bnhq_libro" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewForma") ?></dt>
                                            <dd id="pv_bnhq_forma" class="col-6 text-left">TBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewFormas") ?></dt>
                                            <dd id="pv_bnhq_nFormas" class="col-6 text-left">TBD</dd>
                                        </dl>
                                    </div>
                                </div>

                                <div class="col-9">
                                    <div class="p-4 mb-3 pb-3">
                                        <!-- Configuraciones -->
                                        <h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6>

                                        <div id="shape-container">
                                            <div class="d-flex align-items-stretch justify-content-end gap-2">
                                                <!--<button type="button" class="btn btn-xs btn-success h-100 refresh-shape"><i class="ti ti-xs ti-refresh"></i></button>-->
                                                <button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
                                            </div>
                                            <div id="pv_bnhq_shape" class="draw-shapes"></div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="pv_color" role="tabpanel">
                            <div class="row">
                                <div class="col-3">
                                    <div class="p-4 mb-3 pb-3">
                                        <!-- Configuraciones -->
                                        <div class="row g-3 mb-3">
                                            <div class="col-12">
                                                <a id="pv_color_pg" href="#" sk-url="<?= str_replace('/0', '', route_to('updatePapelGenerico', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewPapelGenerico") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-12">
                                                <a id="pv_color_pi" href="#" sk-url="<?= str_replace('/0', '', route_to('updatePapelImpresion', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewPapelCompra") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-12">
                                                <a id="pv_color_mi" href="#" sk-url="<?= str_replace('/0', '', route_to('updateMaquina', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewAreaImpresion") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>

                                        <hr class="mx-n4" />

                                        <!-- Detalles del presupuesto -->
                                        <h6><?= lang("Presupuestos.previewDetalles") ?></h6>
                                        <dl class="row mb-0">
                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewGramaje") ?></dt>
                                            <dd id="pv_color_gramaje" class="col-6 text-left">TBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewMano") ?></dt>
                                            <dd id="pv_color_mano" class="col-sm-6 text-left">TBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewMaquina") ?></dt>
                                            <dd id="pv_color_maquina" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewAreaImpresion") ?></dt>
                                            <dd id="pv_color_maquina_impresion" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewLibro") ?></dt>
                                            <dd id="pv_color_libro" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewForma") ?></dt>
                                            <dd id="pv_color_forma" class="col-6 text-left">TBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewFormas") ?></dt>
                                            <dd id="pv_color_nFormas" class="col-6 text-left">TBD</dd>
                                        </dl>
                                    </div>
                                </div>

                                <div class="col-9">
                                    <div class="p-4 mb-3 pb-3">
                                        <!-- Configuraciones -->
                                        <h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6>

                                        <div id="shape-container">
                                            <div class="d-flex align-items-stretch justify-content-end gap-2">
                                                <!--<button type="button" class="btn btn-xs btn-success h-100 refresh-shape"><i class="ti ti-xs ti-refresh"></i></button>-->
                                                <button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
                                            </div>
                                            <div id="pv_color_shape" class="draw-shapes"></div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="pv_colorhq" role="tabpanel">
                            <div class="row">
                                <div class="col-3">
                                    <div class="p-4 mb-3 pb-3">
                                        <!-- Configuraciones -->
                                        <div class="row g-3 mb-3">
                                            <div class="col-12">
                                                <a id="pv_colorhq_pg" href="#" sk-url="<?= str_replace('/0', '', route_to('updatePapelGenerico', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewPapelGenerico") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-12">
                                                <a id="pv_colorhq_pi" href="#" sk-url="<?= str_replace('/0', '', route_to('updatePapelImpresion', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewPapelCompra") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-12">
                                                <a id="pv_colorhq_mi" href="#" sk-url="<?= str_replace('/0', '', route_to('updateMaquina', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewAreaImpresion") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>

                                        <hr class="mx-n4" />

                                        <!-- Detalles del presupuesto -->
                                        <h6><?= lang("Presupuestos.previewDetalles") ?></h6>
                                        <dl class="row mb-0">
                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewGramaje") ?></dt>
                                            <dd id="pv_colorhq_gramaje" class="col-6 text-left">TBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewMano") ?></dt>
                                            <dd id="pv_colorhq_mano" class="col-sm-6 text-left">TBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewMaquina") ?></dt>
                                            <dd id="pv_colorhq_maquina" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewAreaImpresion") ?></dt>
                                            <dd id="pv_colorhq_maquina_impresion" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewLibro") ?></dt>
                                            <dd id="pv_colorhq_libro" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewForma") ?></dt>
                                            <dd id="pv_colorhq_forma" class="col-6 text-left">TBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewFormas") ?></dt>
                                            <dd id="pv_colorhq_nFormas" class="col-6 text-left">TBD</dd>
                                        </dl>
                                    </div>
                                </div>

                                <div class="col-9">
                                    <div class="p-4 mb-3 pb-3">
                                        <!-- Configuraciones -->
                                        <h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6>

                                        <div id="shape-container">
                                            <div class="d-flex align-items-stretch justify-content-end gap-2">
                                            <!--<button type="button" class="btn btn-xs btn-success h-100 refresh-shape"><i class="ti ti-xs ti-refresh"></i></button>-->

                                                <button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
                                            </div>

                                            <div id="pv_colorhq_shape" class="draw-shapes"></div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="pv_rot_bn" role="tabpanel">
                            <div class="row">
                                <div class="col-3">
                                    <div class="p-4 mb-3 pb-3">
                                        <!-- Configuraciones -->
                                        <div class="row g-3 mb-3">
                                            <div class="col-12">
                                                <a id="pv_rot_bn_pg" href="#" sk-url="<?= str_replace('/0', '', route_to('updatePapelGenerico', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewPapelGenerico") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-12">
                                                <a id="pv_rot_bn_pi" href="#" sk-url="<?= str_replace('/0', '', route_to('updatePapelImpresion', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewPapelCompra") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-12">
                                                <a id="pv_rot_bn_mi" href="#" sk-url="<?= str_replace('/0', '', route_to('updateMaquina', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewAreaImpresion") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>

                                        <hr class="mx-n4" />

                                        <!-- Detalles del presupuesto -->
                                        <h6><?= lang("Presupuestos.previewDetalles") ?></h6>
                                        <dl class="row mb-0">
                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewGramaje") ?></dt>
                                            <dd id="pv_rot_bn_gramaje" class="col-6 text-left">TBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewMano") ?></dt>
                                            <dd id="pv_rot_bn_mano" class="col-sm-6 text-left">TBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewMaquina") ?></dt>
                                            <dd id="pv_rot_bn_maquina" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewAreaImpresion") ?></dt>
                                            <dd id="pv_rot_bn_maquina_impresion" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewLibro") ?></dt>
                                            <dd id="pv_rot_bn_libro" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewForma") ?></dt>
                                            <dd id="pv_rot_bn_forma" class="col-6 text-left">TBD</dd>

                                        </dl>
                                    </div>
                                </div>

                                <div class="col-9">
                                    <div class="p-4 mb-3 pb-3">
                                        <!-- Configuraciones -->
                                        <h6><?= lang("Presupuestos.previewMaquinaRotativa") ?></h6>

                                        <div id="shape-container">
                                            <div class="d-flex align-items-stretch justify-content-end gap-2">
                                                <!--<button type="button" class="btn btn-xs btn-success h-100 refresh-shape"><i class="ti ti-xs ti-refresh"></i></button>-->
                                                <button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
                                            </div>
                                            <div id="pv_rot_bn_shape" class="draw-rot-shapes"></div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="pv_rot_color" role="tabpanel">
                            <div class="row">
                                <div class="col-3">
                                    <div class="p-4 mb-3 pb-3">
                                        <!-- Configuraciones -->
                                        <div class="row g-3 mb-3">
                                            <div class="col-12">
                                                <a id="pv_rot_color_pg" href="#" sk-url="<?= str_replace('/0', '', route_to('updatePapelGenerico', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewPapelGenerico") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-12">
                                                <a id="pv_rot_color_pi" href="#" sk-url="<?= str_replace('/0', '', route_to('updatePapelImpresion', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewPapelCompra") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-12">
                                                <a id="pv_rot_color_mi" href="#" sk-url="<?= str_replace('/0', '', route_to('updateMaquina', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button"
                                                            class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewAreaImpresion") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>

                                        <hr class="mx-n4" />

                                        <!-- Detalles del presupuesto -->
                                        <h6><?= lang("Presupuestos.previewDetalles") ?></h6>
                                        <dl class="row mb-0">
                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewGramaje") ?></dt>
                                            <dd id="pv_rot_color_gramaje" class="col-6 text-left">TBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewMano") ?></dt>
                                            <dd id="pv_rot_color_mano" class="col-sm-6 text-left">TBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewMaquina") ?></dt>
                                            <dd id="pv_rot_color_maquina" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewAreaImpresion") ?></dt>
                                            <dd id="pv_rot_color_maquina_impresion" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewLibro") ?></dt>
                                            <dd id="pv_rot_color_libro" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewForma") ?></dt>
                                            <dd id="pv_rot_color_forma" class="col-6 text-left">TBD</dd>

                                        </dl>
                                    </div>
                                </div>

                                <div class="col-9">
                                    <div class="p-4 mb-3 pb-3">
                                        <!-- Configuraciones -->
                                        <h6><?= lang("Presupuestos.previewMaquinaRotativa") ?></h6>

                                        <div id="shape-container">
                                            <div class="d-flex align-items-stretch justify-content-end gap-2">
                                                <!--<button type="button" class="btn btn-xs btn-success h-100 refresh-shape"><i class="ti ti-xs ti-refresh"></i></button>-->
                                                <button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
                                            </div>
                                            <div id="pv_rot_color_shape" class="draw-rot-shapes"></div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="pv_guardas" role="tabpanel">
                            <div class="row">
                                <div class="col-3">
                                    <div class="p-4 mb-3 pb-3">
                                        <!-- Configuraciones -->
                                        <div class="row g-3 mb-3">
                                            <div class="col-12">
                                                <a id="pv_guardas_pg" href="#" sk-url="<?= str_replace('/0', '', route_to('updatePapelGenerico', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewPapelGenerico") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-12">
                                                <a id="pv_guardas_pi" href="#" sk-url="<?= str_replace('/0', '', route_to('updatePapelImpresion', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewPapelCompra") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-12">
                                                <a id="pv_guardas_mi" href="#" sk-url="<?= str_replace('/0', '', route_to('updateMaquina', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewAreaImpresion") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>

                                        <hr class="mx-n4" />

                                        <!-- Detalles del presupuesto -->
                                        <h6><?= lang("Presupuestos.previewDetalles") ?></h6>
                                        <dl class="row mb-0">
                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewGramaje") ?></dt>
                                            <dd id="pv_guardas_gramaje" class="col-6 text-left">TBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewMano") ?></dt>
                                            <dd id="pv_guardas_mano" class="col-sm-6 text-left">TBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewMaquina") ?></dt>
                                            <dd id="pv_guardas_maquina" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewAreaImpresion") ?></dt>
                                            <dd id="pv_guardas_maquina_impresion" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewLibro") ?></dt>
                                            <dd id="pv_guardas_libro" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewForma") ?></dt>
                                            <dd id="pv_guardas_forma" class="col-6 text-left">TBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewFormas") ?></dt>
                                            <dd id="pv_guardas_nFormas" class="col-6 text-left">TBD</dd>
                                        </dl>
                                    </div>
                                </div>

                                <div class="col-9">
                                    <div class="p-4 mb-3 pb-3">
                                        <!-- Configuraciones -->
                                        <h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6>

                                        <div id="shape-container">
                                            <div class="d-flex align-items-stretch justify-content-end gap-2">
                                                <!--<button type="button" class="btn btn-xs btn-success h-100 refresh-shape"><i class="ti ti-xs ti-refresh"></i></button>-->
                                                <button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
                                            </div>
                                            <div id="pv_guardas_shape" class="draw-shapes"></div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="pv_cubierta" role="tabpanel">
                            <div class="row">
                                <div class="col-3">
                                    <div class="p-4 mb-3 pb-3">
                                        <!-- Configuraciones -->
                                        <div class="row g-3 mb-3">
                                            <div class="col-12">
                                                <a id="pv_cubierta_pg" href="#" sk-url="<?= str_replace('/0', '', route_to('updatePapelGenerico', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewPapelGenerico") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-12">
                                                <a id="pv_cubierta_pi" href="#" sk-url="<?= str_replace('/0', '', route_to('updatePapelImpresion', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewPapelCompra") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-12">
                                                <a id="pv_cubierta_mi" href="#" sk-url="<?= str_replace('/0', '', route_to('updateMaquina', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewAreaImpresion") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>

                                        <hr class="mx-n4" />

                                        <!-- Detalles del presupuesto -->
                                        <h6><?= lang("Presupuestos.previewDetalles") ?></h6>
                                        <dl class="row mb-0">
                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewGramaje") ?></dt>
                                            <dd id="pv_cubierta_gramaje" class="col-6 text-left">TBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewMano") ?></dt>
                                            <dd id="pv_cubierta_mano" class="col-sm-6 text-left">TBD</dd>

                                            <dt class="col-6 fw-semibold pv-solapas"><?= lang("Presupuestos.previewSolapas") ?></dt>
                                            <dd id="pv_cubierta_solapas" class="col-sm-6 text-left pv-solapas">TBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewMaquina") ?></dt>
                                            <dd id="pv_cubierta_maquina" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewAreaImpresion") ?></dt>
                                            <dd id="pv_cubierta_maquina_impresion" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewLibro") ?></dt>
                                            <dd id="pv_cubierta_libro" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewForma") ?></dt>
                                            <dd id="pv_cubierta_forma" class="col-6 text-left">TBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewFormas") ?></dt>
                                            <dd id="pv_cubierta_nFormas" class="col-6 text-left">TBD</dd>
                                        </dl>
                                    </div>
                                </div>

                                <div class="col-9">
                                    <div class="p-4 mb-3 pb-3">
                                        <!-- Configuraciones -->
                                        <h6><?= lang("Presupuestos.previewCubierta") ?></h6>

                                        <div id="pv-cubierta-container">
                                            <div class="d-flex align-items-stretch justify-content-end gap-2">
                                                <!--<button type="button" class="btn btn-xs btn-success h-100 refresh-shape"><i class="ti ti-xs ti-refresh"></i></button>-->
                                                <button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
                                            </div>
                                            <div id="pv_cubierta_shape" class="draw-shapes"></div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="pv_esquema_cubierta" role="tabpanel">
                            <div class="row">
                                <div class="col-3">
                                    <div class="p-4 mb-3 pb-3">
                                        <!-- Configuraciones -->
                                        <div class="row g-3 mb-3">
                                            <div class="col-12">
                                                <a id="pv_ec_pg" href="#" sk-url="<?= str_replace('/0', '', route_to('updatePapelGenerico', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewPapelGenerico") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-12">
                                                <a id="pv_ec_pi" href="#" sk-url="<?= str_replace('/0', '', route_to('updatePapelImpresion', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewPapelCompra") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-12">
                                                <a id="pv_ec_mi" href="#" sk-url="<?= str_replace('/0', '', route_to('updateMaquina', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewAreaImpresion") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>

                                        <hr class="mx-n4" />

                                        <!-- Detalles del presupuesto -->
                                        <h6><?= lang("Presupuestos.previewDetalles") ?></h6>
                                        <dl class="row mb-0">
                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewLibro") ?></dt>
                                            <dd id='pv_ec_libro' class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewLomo") ?></dt>
                                            <dd id='pv_ec_lomo' class="col-6 text-left">TBD</dd>

                                            <dt class="col-6 fw-semibold pv-solapas"><?= lang("Presupuestos.previewSolapas") ?></dt>
                                            <dd id='pv_ec_solapas' class="col-6 text-left pv-solapas">TBD</dd>
                                        </dl>
                                    </div>
                                </div>
                                <div class="col-9">
                                    <div class="p-4 mb-3 pb-3">
                                        <!-- Configuraciones -->
                                        <h6><?= lang("Presupuestos.previewConfiguracionEsquemaCubierta") ?></h6>

                                        <div id="shape-container">
                                            <div class="d-flex align-items-stretch justify-content-end gap-2">
                                                <!--<button type="button" class="btn btn-xs btn-success h-100 refresh-shape"><i class="ti ti-xs ti-refresh"></i></button>-->
                                                <button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
                                            </div>
                                            <div id="pv_ec_shape" class="draw-shapes"></div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="pv_sobrecubierta" role="tabpanel">
                            <div class="row">
                                <div class="col-3">
                                    <div class="p-4 mb-3 pb-3">
                                        <!-- Configuraciones -->
                                        <div class="row g-3 mb-3">
                                            <div class="col-12">
                                                <a id="pv_sobrecubierta_pg" href="#" sk-url="<?= str_replace('/0', '', route_to('updatePapelGenerico', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewPapelGenerico") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-12">
                                                <a id="pv_sobrecubierta_pi" href="#" sk-url="<?= str_replace('/0', '', route_to('updatePapelImpresion', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewPapelCompra") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-12">
                                                <a id="pv_sobrecubierta_mi" href="#" sk-url="<?= str_replace('/0', '', route_to('updateMaquina', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewAreaImpresion") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>

                                        <hr class="mx-n4" />

                                        <!-- Detalles del presupuesto -->
                                        <h6><?= lang("Presupuestos.previewDetalles") ?></h6>
                                        <dl class="row mb-0">
                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewGramaje") ?></dt>
                                            <dd id="pv_sobrecubierta_gramaje" class="col-6 text-left">TBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewMano") ?></dt>
                                            <dd id="pv_sobrecubierta_mano" class="col-sm-6 text-left">TBD</dd>

                                            <dt class="col-6 fw-semibold pv-solapas"><?= lang("Presupuestos.previewSolapas") ?></dt>
                                            <dd id="pv_sobrecubierta_solapas" class="col-sm-6 text-left pv-solapas">TBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewMaquina") ?></dt>
                                            <dd id="pv_sobrecubierta_maquina" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewAreaImpresion") ?></dt>
                                            <dd id="pv_sobrecubierta_maquina_impresion" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewLibro") ?></dt>
                                            <dd id="pv_sobrecubierta_libro" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewForma") ?></dt>
                                            <dd id="pv_sobrecubierta_forma" class="col-6 text-left">TBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewFormas") ?></dt>
                                            <dd id="pv_sobrecubierta_nFormas" class="col-6 text-left">TBD</dd>
                                        </dl>
                                    </div>
                                </div>

                                <div class="col-9">
                                    <div class="p-4 mb-3 pb-3">
                                        <!-- Configuraciones -->
                                        <h6><?= lang("Presupuestos.previewSobrecubierta") ?></h6>

                                        <div id="pv-cubierta-container">
                                            <div id="pv_sobrecubierta_shape" class="draw-shapes"></div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="pv_faja" role="tabpanel">
                            <div class="row">
                                <div class="col-3">
                                    <div class="p-4 mb-3 pb-3">
                                        <!-- Configuraciones -->
                                        <div class="row g-3 mb-3">
                                            <div class="col-12">
                                                <a id="pv_faja_pg" href="#" sk-url="<?= str_replace('/0', '', route_to('updatePapelGenerico', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewPapelGenerico") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-12">
                                                <a id="pv_faja_pi" href="#" sk-url="<?= str_replace('/0', '', route_to('updatePapelImpresion', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewPapelCompra") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-12">
                                                <a id="pv_faja_mi" href="#" sk-url="<?= str_replace('/0', '', route_to('updateMaquina', 0)); ?>" target="_blank">
                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-label-primary">
                                                            <?= lang("Presupuestos.previewAreaImpresion") ?>
                                                        </button>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>

                                        <hr class="mx-n4" />

                                        <!-- Detalles del presupuesto -->
                                        <h6><?= lang("Presupuestos.previewDetalles") ?></h6>
                                        <dl class="row mb-0">
                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewGramaje") ?></dt>
                                            <dd id="pv_faja_gramaje" class="col-6 text-left">TBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewMano") ?></dt>
                                            <dd id="pv_faja_mano" class="col-sm-6 text-left">TBD</dd>

                                            <dt class="col-6 fw-semibold pv-solapas"><?= lang("Presupuestos.previewSolapas") ?></dt>
                                            <dd id="pv_faja_solapas" class="col-sm-6 text-left pv-solapas">TBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewMaquina") ?></dt>
                                            <dd id="pv_faja_maquina" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewAreaImpresion") ?></dt>
                                            <dd id="pv_faja_maquina_impresion" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewLibro") ?></dt>
                                            <dd id="pv_faja_libro" class="col-6 text-left">TBDxTBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewForma") ?></dt>
                                            <dd id="pv_faja_forma" class="col-6 text-left">TBD</dd>

                                            <dt class="col-6 fw-semibold"><?= lang("Presupuestos.previewFormas") ?></dt>
                                            <dd id="pv_faja_nFormas" class="col-6 text-left">TBD</dd>
                                        </dl>
                                    </div>
                                </div>

                                <div class="col-9">
                                    <div class="p-4 mb-3 pb-3">
                                        <!-- Configuraciones -->
                                        <h6><?= lang("Presupuestos.previewFaja") ?></h6>

                                        <div id="pv-cubierta-container">
                                            <div id="pv_faja_shape" class="draw-shapes"></div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div> <!-- //.accordion-body -->
    </div> <!-- //.accordion-collapse -->
</div> <!-- //.accordion-item -->
</div> <!-- //.accordion -->
