ng-easycommerce 0.0.676 → 0.0.677

package/README.md

@@ -1,3 +1,8 @@
+# Version 0.0.677
+- Checkout single mobile: se aumenta la prioridad visual de la barra flotante de resumen/finalización para que quede por encima de widgets flotantes externos como WhatsApp.
+- `checkout-ec.component.scss`: la barra `summary-mobile-bar` ahora usa la variable CSS `--ec-checkout-summary-mobile-z-index` con fallback `10040`.
+- `checkout-ec.component.scss`: el overlay de carga ahora usa la variable CSS `--ec-checkout-overlay-z-index` con fallback `10050` para mantenerse por encima del resumen.
+- Checkout single mobile: cuando hay un modal abierto (`.modal-open`), la barra de resumen baja a `--ec-checkout-summary-mobile-z-index-modal-open` con fallback `1030` para no interferir con overlays/modales.
 # Version 0.0.676
 - Se agrega traduccion en ingles.
 - Se modifica el mensaje de alerta de precio minimo de compra para que si tiene cuenta corriente no muestre la cantidad.

package/bundles/ng-easycommerce.umd.js

@@ -10576,7 +10576,7 @@
             core.Component({
                 selector: 'app-checkout-ec',
                 template: "<main class=\"py-4\" id=\"appCheckoutEc\">\n    <ng-container *ngIf=\"(checkoutService.loading$ | async) as load\">\n        <div class=\"checkout-loading-overlay\" *ngIf=\"load\">\n            <div class=\"checkout-loading-card\">\n                <app-loading-full-ec></app-loading-full-ec>\n                <h5>{{ 'processing-payment' | translate }}</h5>\n            </div>\n        </div>\n    </ng-container>\n    <div *ngIf=\"canCheckout; else cartEmpty\">\n        <ng-container *ngIf=\"checkoutView === 'single'; else legacyCheckout\">\n            <div class=\"container\">\n                <div class=\"row checkout-single-row\">\n                    <div class=\"col-lg-8 col-12\">\n                        <div class=\"checkout-single\">\n                            <div class=\"checkout-section\" *ngFor=\"let step of steps; let x=index\"\n                                [attr.data-step]=\"step.name\"\n                                [class.is-disabled]=\"!isStepEnabled(step.name)\"\n                                [class.is-complete]=\"isStepComplete(step.name)\">\n                                <button class=\"section-header\" type=\"button\"\n                                    [attr.aria-expanded]=\"isSectionOpen(step.name)\"\n                                    [disabled]=\"!isStepEnabled(step.name)\"\n                                    (click)=\"toggleSection(step.name)\">\n                                    <span class=\"section-index\">{{ x + 1 }}</span>\n                                    <span class=\"section-title\">\n                                        {{ getSingleStepTitle(step) | translate }}\n                                    </span>\n                                    <span class=\"section-state\" *ngIf=\"isStepComplete(step.name)\">\n                                        &#10003;\n                                    </span>\n                                </button>\n                                <div class=\"section-summary\" *ngIf=\"isStepComplete(step.name) && !isSectionOpen(step.name)\"\n                                    role=\"button\" tabindex=\"0\"\n                                    (click)=\"toggleSection(step.name)\"\n                                    (keydown.enter)=\"toggleSection(step.name)\"\n                                    (keydown.space)=\"toggleSection(step.name)\">\n                                    <span class=\"section-summary-label\">\n                                        {{ getSingleSummaryLabel(step) }}\n                                    </span>\n                                    <span class=\"section-summary-value\">\n                                        {{ getSingleSummaryValue(step) }}\n                                    </span>\n                                    <span class=\"section-summary-edit\"\n                                        role=\"button\"\n                                        tabindex=\"0\"\n                                        (click)=\"toggleSection(step.name); $event.stopPropagation()\"\n                                        (keydown.enter)=\"toggleSection(step.name); $event.stopPropagation()\"\n                                        (keydown.space)=\"toggleSection(step.name); $event.stopPropagation()\">\n                                        {{ 'edit' | translate }}\n                                    </span>\n                                </div>\n                                <div class=\"section-body\" [hidden]=\"!isSectionOpen(step.name)\">\n                                    <ng-container [ngSwitch]=\"step.name\">\n                                        <ng-container *ngSwitchCase=\"'address'\">\n                                            <app-dataform-ec [step_id]=\"step.step\" [isLastOne]=\"false\"\n                                                [nextStep]=\"goToNextFromAddress\" [compactAddressView]=\"true\"\n                                                (dirtyChange)=\"onStepDirtyChange('address', $event)\">\n                                            </app-dataform-ec>\n                                        </ng-container>\n                                        <ng-container *ngSwitchCase=\"'shipment'\">\n                                            <app-shipment-ec [step_id]=\"step.step\" [compactShipmentView]=\"true\"\n                                                (advanceStep)=\"goToNextSection(step.name)\"\n                                                (summaryChange)=\"setShipmentSummary($event)\">\n                                            </app-shipment-ec>\n                                        </ng-container>\n                                        <ng-container *ngSwitchCase=\"'payment'\">\n                                            <app-payment-ec [step_id]=\"step.step\" [compactPaymentView]=\"true\"\n                                                (dirtyChange)=\"onStepDirtyChange('payment', $event)\"></app-payment-ec>\n                                        </ng-container>\n                                    </ng-container>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"col-lg-4 col-12\">\n                        <ng-container *ngIf=\"(checkoutService.state$ | async) as checkoutState\">\n                            <aside class=\"checkout-summary\"\n                                *ngIf=\"(creditAccountShowPrices !== null ? creditAccountShowPrices : true) || (areAllStepsReady(checkoutState) && !shouldHideFinishButton(checkoutState))\">\n                                <ng-container *ngIf=\"(creditAccountShowPrices !== null ? creditAccountShowPrices : true)\">\n                                    <h4 class=\"summary-title\">\n                                        {{ checkoutView === 'single' ? ('payment-summary' | translate) : ('purchase-summary' | translate) }}\n                                    </h4>\n                                    <div class=\"summary-totals\" *ngIf=\"(checkoutService.asociatedData$ | async) as data\">\n                                        <ng-container *ngFor=\"let item of getSummaryData(data)\">\n                                            <div class=\"summary-total-row\" *ngIf=\"shouldShowSummaryItem(item)\"\n                                                [class.summary-total-row-total]=\"item.type === 'total'\">\n                                                <span>{{ getSummaryLabel(item.type) | translate }}</span>\n                                                <span>\n                                                    <ng-container *ngIf=\"checkoutView === 'single' && item.type === 'shipment' && (item.amount == null || item.amount === 0); else amountValue\">\n                                                        {{ 'free' | translate }}\n                                                    </ng-container>\n                                                    <ng-template #amountValue>\n                                                        {{ item.amount != 0 ? (item.amount | ecCurrencySymbol:'alwaysShowDecimals') : ('free' | translate) }}\n                                                    </ng-template>\n                                                </span>\n                                            </div>\n                                        </ng-container>\n                                    </div>\n                                </ng-container>\n                                <button class=\"btn valid-btn w-100 mt-3 text-uppercase\"\n                                    id=\"checkoutFinishBtn\"\n                                    *ngIf=\"areAllStepsReady(checkoutState) && !shouldHideFinishButton(checkoutState)\"\n                                    (click)=\"endCheckout()\">\n                                    {{ 'finish-checkout' | translate }}\n                                </button>\n                            </aside>\n                        </ng-container>\n                    </div>\n                </div>\n                <ng-container *ngIf=\"(checkoutService.asociatedData$ | async) as data\">\n                    <ng-container *ngIf=\"(checkoutService.state$ | async) as checkoutState\">\n                        <div class=\"summary-mobile-bar\" [class.is-hidden]=\"hideMobileSummaryBar\"\n                            *ngIf=\"(creditAccountShowPrices !== null ? creditAccountShowPrices : true)\">\n                            <div class=\"summary-mobile-total\">\n                                <span class=\"summary-mobile-label\">{{ 'total' | translate }}</span>\n                                <span class=\"summary-mobile-value\">\n                                    {{ getTotalAmount(data) != null ? (getTotalAmount(data) | ecCurrencySymbol:'alwaysShowDecimals') : '--' }}\n                                </span>\n                            </div>\n                            <button class=\"btn valid-btn summary-mobile-btn\"\n                                *ngIf=\"!shouldHideFinishButton(checkoutState)\"\n                                [disabled]=\"!areAllStepsReady(checkoutState)\"\n                                (click)=\"endCheckout()\">\n                                {{ 'finish-checkout' | translate }}\n                            </button>\n                        </div>\n                    </ng-container>\n                </ng-container>\n                <ng-template #unsavedChangesModal>\n                    <div class=\"modal-content checkout-unsaved-modal-content\">\n                        <div class=\"modal-header\">\n                            <h5 class=\"modal-title\">{{ 'unsaved-changes-title' | translate }}</h5>\n                            <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"\n                                (click)=\"cancelUnsavedClose()\"></button>\n                        </div>\n                        <div class=\"modal-body\">\n                            {{ 'unsaved-changes-body' | translate }}\n                        </div>\n                        <div class=\"modal-footer\">\n                            <button type=\"button\" class=\"btn btn-outline-secondary btn-keep-editing\"\n                                (click)=\"cancelUnsavedClose()\">\n                                {{ 'unsaved-changes-continue' | translate }}\n                            </button>\n                            <button type=\"button\" class=\"btn btn-primary btn-discard\" (click)=\"confirmUnsavedDiscard()\">\n                                {{ 'unsaved-changes-discard' | translate }}\n                            </button>\n                        </div>\n                    </div>\n                </ng-template>\n            </div>\n        </ng-container>\n        <ng-template #legacyCheckout>\n            <app-detail-checkout-block-ec></app-detail-checkout-block-ec>\n            <div class=\"container\">\n                <div class=\"row\">\n                    <div class=\"col-md-12 col-12\">\n                        <div id=\"stepper\" class=\"bs-stepper\" *ngIf=\"(checkoutService.state$ | async) as state\">\n\n                            <div class=\"row mb-3 position-relative stepperContainer\">\n                                <ng-container *ngFor=\"let step of steps; let x=index\">\n                                    <div [class]=\"'px-0 col-'+(12 / steps.length)\">\n                                        <div [class]=\"'step ' +  getClassToStepper(x)\" [attr.data-target]=\"'#test-l-'+step.step\">\n                                            <button class=\"step-trigger\">\n                                                <span class=\"bs-stepper-circle\">{{x+1}}</span>\n                                                <span class=\"bs-stepper-label\">{{ step.label |translate}}</span>\n                                            </button>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                            </div>\n\n                            <!-- CONTENT -->\n                            <div class=\"bs-stepper-content margin-bottom-i\">\n                                <div *ngIf=\"(checkoutService.state$ | async) as checkoutState\">\n                                    <ng-container *ngFor=\"let step of steps; let x=index\">\n                                        <div [id]=\"'test-l-'+step.step\" class=\"content\">\n                                         <app-step-ec [step_id]=\"step.step\" [id_step]=\"x+1\" [previousStep]=\"steps[x-1] ? steps[x-1].name : step.name\"  [nextStep]=\"steps[x+1] ? next : endCheckout\" [goBack]=\"goBack\" [lastStep]=\"steps[x+1] ? false : true\">  \n                                         </app-step-ec>   \n                                        </div>\n                                    </ng-container>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <ng-container *ngIf=\"(checkoutService.loading$ | async) as load\">\n                        <div class=\"col-md-12 col-12\">\n                            <div *ngIf=\"load\" class=\"d-flex flex-column jusitfy-content-center align-items-center mt-2\">\n                                <app-loading-full-ec></app-loading-full-ec>\n                                <h5>{{ 'processing-payment' | translate }}</h5>\n                            </div>\n                        </div>\n                    </ng-container>\n                </div>\n            </div>\n        </ng-template>\n    </div>\n</main>\n\n<ng-template #cartEmpty>\n    <div class=\"wrap\">\n        <div *ngIf=\"(loading$ | async) as load\">\n            <app-loading-full-ec *ngIf=\"canCheckout\"></app-loading-full-ec>\n        </div>\n        <section id=\"cart\" *ngIf=\"!canCheckout\">\n            <section id=\"cart bg-white h-50\">\n                <div class=\"d-flex flex-column justify-content-center align-items-center text-center\">\n                    <h4>{{ 'empty-cart' | translate }}</h4>\n                    <h5>{{ 'empty-cart-detail' | translate }}</h5>\n                </div>\n            </section>\n        </section>\n    </div>\n</ng-template>\n\n<ng-template #loading>\n    <app-loading-full-ec></app-loading-full-ec>\n</ng-template>\n\n<ng-template #requireLoginView>\n</ng-template>\n\n\n<!-- <ec-checkout-error></ec-checkout-error> -->\n",
-                styles: ["@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Roboto:wght@400;500;700&family=Source+Sans+Pro:wght@400;600;700&display=swap);.btn.valid-btn{background-color:var(--ec-primary,#000);border-color:var(--ec-primary,#000);color:var(--ec-primary-contrast,#fff);margin-right:12px}.btn.valid-btn:disabled,.btn.valid-btn[disabled]{background-color:var(--ec-primary-muted,#6c757d);border-color:var(--ec-primary-muted,#6c757d);color:var(--ec-primary-contrast,#fff);opacity:.8}.switch{position:relative;display:inline-block;width:16%!important;height:34px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s}.slider:before{position:absolute;content:\"\";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;transition:.4s}input:checked+.slider{background-color:#000}input:focus+.slider{box-shadow:0 0 1px #000}input:checked+.slider:before{transform:translateX(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.bg-white{background-color:#fff}#appCheckoutEc,#appCheckoutEc *{font-family:var(--ec-checkout-font, \"Source Sans Pro\", Roboto, \"Open Sans\", \"Helvetica Neue\", Arial, sans-serif)!important}.active .bs-stepper-circle{background-color:#000}.margin-bottom-i{margin-bottom:3%}.Main{margin-top:140px;min-height:60vh}.btn:disabled{opacity:.65}.co-data-icon{height:50px;-o-object-fit:contain;object-fit:contain}.checkout-btn-container{display:flex;justify-content:space-between}.loading-container-line{display:flex;flex-direction:row;justify-content:center}.stepperContainer::after{content:\"\";border-top:1px solid #000;position:absolute;width:95%;top:48%;left:10px;margin:auto;z-index:-1}.bs-stepper .step-trigger{background-color:#fff}.bs-stepper .step-trigger.disabled,.bs-stepper .step-trigger:disabled{opacity:1}@media screen and (max-width:992px){.stepperContainer::after{display:none}.step{text-align:left!important}}@media screen and (max-width:576px){.step{text-align:center!important}.resumen i{font-size:2em}.resumen strong{font-size:.8em}.resumen span{font-size:1em}}@media screen and (max-width:768px){.step-trigger .bs-stepper-label{font-size:.75rem}.content.fade.active.dstepper-block{padding-top:1rem}}.checkout-single{display:flex;flex-direction:column;gap:1rem;--ec-accent:#000;--ec-accent-contrast:#fff;--ec-accent-soft:#f5f8ff;--ec-border:#e3e3e3;--ec-muted:#666;--ec-surface:#fff;--ec-surface-alt:#fafafa;--ec-success:#16a34a}:host ::ng-deep .checkout-unsaved-modal .modal-dialog{max-width:420px;margin:1.5rem auto}:host ::ng-deep .checkout-unsaved-modal-content{border-radius:10px;border:1px solid rgba(0,0,0,.08);box-shadow:0 18px 36px rgba(0,0,0,.18)}:host ::ng-deep .checkout-unsaved-modal-content .modal-header{border-bottom:0;padding:1.1rem 1.25rem .5rem;align-items:flex-start}:host ::ng-deep .checkout-unsaved-modal-content .modal-title{font-size:1.05rem;font-weight:600;color:#111}:host ::ng-deep .checkout-unsaved-modal-content .modal-body{padding:.4rem 1.25rem 1rem;color:#555;font-size:.95rem;line-height:1.4}:host ::ng-deep .checkout-unsaved-modal-content .modal-footer{border-top:0;padding:0 1.25rem 1.25rem;display:flex;gap:.6rem;justify-content:flex-end}:host ::ng-deep .checkout-unsaved-modal-content .btn-keep-editing{border-color:#d0d5dd;color:#344054;background:#fff;font-weight:600}:host ::ng-deep .checkout-unsaved-modal-content .btn-discard{background-color:var(--ec-primary,#000);border-color:var(--ec-primary,#000);color:var(--ec-primary-contrast,#fff);font-weight:600}.checkout-section{border:1px solid var(--ec-border);border-radius:6px;background:var(--ec-surface);overflow:hidden}.checkout-single .checkout-section{overflow:visible}.checkout-section.is-disabled{opacity:.6}.checkout-section.is-complete{border-color:var(--ec-success)}.section-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1rem;background:var(--ec-surface-alt);border:0;text-align:left}.checkout-section.is-complete .section-header{background:rgba(22,163,74,.08)}.checkout-section.is-complete .section-index,.checkout-section.is-complete .section-state{background:var(--ec-success);color:#fff}.section-index{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--ec-accent);color:var(--ec-accent-contrast);font-weight:600}.section-summary{display:-ms-grid;display:grid;-ms-grid-columns:1fr auto;grid-template-columns:1fr auto;-ms-grid-rows:auto auto;grid-template-rows:auto auto;gap:.2rem .75rem;align-items:center;padding:.5rem 1rem .85rem;font-size:.9rem;color:var(--ec-muted)}.section-summary-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ec-muted)}.section-summary-value{font-weight:600;color:#111;-ms-grid-column:1;-ms-grid-column-span:1;grid-column:1/2}.section-summary-edit{-ms-grid-column:2;-ms-grid-column-span:1;grid-column:2/3;-ms-grid-row:1;-ms-grid-row-span:2;grid-row:1/3;-ms-grid-row-align:center;align-self:center;-ms-grid-column-align:end;justify-self:end;font-size:.8rem;font-weight:700;color:var(--ec-accent,#000);text-transform:uppercase;letter-spacing:.04em}.section-summary-edit:focus{outline:2px solid var(--ec-accent,#000);outline-offset:2px;border-radius:4px}.section-title{flex:1;font-weight:600}.section-state{width:32px;height:32px;border-radius:50%;background:#e7f6ea;color:#2f7a32;display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;line-height:1}.section-body{padding:1rem 1.25rem}.section-actions{display:flex;justify-content:flex-end;margin-top:1rem}.checkout-summary{border:1px solid #e3e3e3;border-radius:6px;padding:1rem;background:#fff;position:-webkit-sticky;position:sticky;top:var(--ec-checkout-sticky-top,1rem)}.summary-title{font-weight:600;margin-bottom:1rem}.checkout-single .valid-btn{font-size:1rem;padding:.7rem 1.1rem;letter-spacing:.02em;text-transform:uppercase}.checkout-single #checkoutFinishBtn,.checkout-single .summary-mobile-btn{background-color:var(--ec-primary,#000);border-color:var(--ec-primary,#000);color:var(--ec-primary-contrast,#fff);text-transform:uppercase}.checkout-single #checkoutFinishBtn:disabled,.checkout-single #checkoutFinishBtn[disabled],.checkout-single .summary-mobile-btn:disabled,.checkout-single .summary-mobile-btn[disabled]{background-color:var(--ec-primary-muted,#6c757d);border-color:var(--ec-primary-muted,#6c757d);color:var(--ec-primary-contrast,#fff);opacity:.8}.summary-products{border-bottom:1px solid #eee;margin-bottom:1rem;padding-bottom:1rem}.summary-product{display:-ms-grid;display:grid;-ms-grid-columns:1fr auto;grid-template-columns:1fr auto;gap:.25rem .5rem;align-items:center;padding:.35rem 0;border-bottom:1px solid #f1f1f1}.summary-product:last-child{border-bottom:0}.summary-product-main{display:flex;flex-direction:column;gap:.2rem;min-width:0}.summary-product-name{font-weight:500;font-size:.95rem;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.summary-product-qty{font-size:.85rem;color:#666}.summary-product-price{font-weight:600;font-size:.9rem;color:#222}.summary-totals{display:flex;flex-direction:column;gap:.5rem;padding-top:.75rem}.summary-total-row{display:flex;justify-content:space-between;font-weight:500;font-size:.95rem;color:#555}.summary-total-row-total{font-size:1.1rem;font-weight:700;color:#111;margin-top:.25rem}.summary-mobile-bar{display:none}@media screen and (max-width:992px){.checkout-summary{position:static;margin-top:.75rem}.checkout-single{padding-bottom:20px}.summary-mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #e5e7eb;box-shadow:0 -6px 18px rgba(15,23,42,.08)}.summary-mobile-total{display:flex;flex-direction:column;gap:.2rem}.summary-mobile-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:#6b7280}.summary-mobile-value{font-weight:700;font-size:1.05rem;color:#111827}.summary-mobile-btn{padding:.7rem 1.1rem;font-size:.95rem;white-space:nowrap}}.checkout-loading-overlay{position:fixed;inset:0;background:rgba(17,24,39,.45);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1.5rem}.checkout-loading-card{background:#fff;border-radius:12px;padding:1.5rem 2rem;box-shadow:0 20px 40px rgba(0,0,0,.2);display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center}.checkout-loading-card h5{margin:0;font-weight:600;color:#111}.summary-mobile-bar.is-hidden{display:none}"]
+                styles: ["@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Roboto:wght@400;500;700&family=Source+Sans+Pro:wght@400;600;700&display=swap);.btn.valid-btn{background-color:var(--ec-primary,#000);border-color:var(--ec-primary,#000);color:var(--ec-primary-contrast,#fff);margin-right:12px}.btn.valid-btn:disabled,.btn.valid-btn[disabled]{background-color:var(--ec-primary-muted,#6c757d);border-color:var(--ec-primary-muted,#6c757d);color:var(--ec-primary-contrast,#fff);opacity:.8}.switch{position:relative;display:inline-block;width:16%!important;height:34px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s}.slider:before{position:absolute;content:\"\";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;transition:.4s}input:checked+.slider{background-color:#000}input:focus+.slider{box-shadow:0 0 1px #000}input:checked+.slider:before{transform:translateX(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.bg-white{background-color:#fff}#appCheckoutEc,#appCheckoutEc *{font-family:var(--ec-checkout-font, \"Source Sans Pro\", Roboto, \"Open Sans\", \"Helvetica Neue\", Arial, sans-serif)!important}.active .bs-stepper-circle{background-color:#000}.margin-bottom-i{margin-bottom:3%}.Main{margin-top:140px;min-height:60vh}.btn:disabled{opacity:.65}.co-data-icon{height:50px;-o-object-fit:contain;object-fit:contain}.checkout-btn-container{display:flex;justify-content:space-between}.loading-container-line{display:flex;flex-direction:row;justify-content:center}.stepperContainer::after{content:\"\";border-top:1px solid #000;position:absolute;width:95%;top:48%;left:10px;margin:auto;z-index:-1}.bs-stepper .step-trigger{background-color:#fff}.bs-stepper .step-trigger.disabled,.bs-stepper .step-trigger:disabled{opacity:1}@media screen and (max-width:992px){.stepperContainer::after{display:none}.step{text-align:left!important}}@media screen and (max-width:576px){.step{text-align:center!important}.resumen i{font-size:2em}.resumen strong{font-size:.8em}.resumen span{font-size:1em}}@media screen and (max-width:768px){.step-trigger .bs-stepper-label{font-size:.75rem}.content.fade.active.dstepper-block{padding-top:1rem}}.checkout-single{display:flex;flex-direction:column;gap:1rem;--ec-accent:#000;--ec-accent-contrast:#fff;--ec-accent-soft:#f5f8ff;--ec-border:#e3e3e3;--ec-muted:#666;--ec-surface:#fff;--ec-surface-alt:#fafafa;--ec-success:#16a34a}:host ::ng-deep .checkout-unsaved-modal .modal-dialog{max-width:420px;margin:1.5rem auto}:host ::ng-deep .checkout-unsaved-modal-content{border-radius:10px;border:1px solid rgba(0,0,0,.08);box-shadow:0 18px 36px rgba(0,0,0,.18)}:host ::ng-deep .checkout-unsaved-modal-content .modal-header{border-bottom:0;padding:1.1rem 1.25rem .5rem;align-items:flex-start}:host ::ng-deep .checkout-unsaved-modal-content .modal-title{font-size:1.05rem;font-weight:600;color:#111}:host ::ng-deep .checkout-unsaved-modal-content .modal-body{padding:.4rem 1.25rem 1rem;color:#555;font-size:.95rem;line-height:1.4}:host ::ng-deep .checkout-unsaved-modal-content .modal-footer{border-top:0;padding:0 1.25rem 1.25rem;display:flex;gap:.6rem;justify-content:flex-end}:host ::ng-deep .checkout-unsaved-modal-content .btn-keep-editing{border-color:#d0d5dd;color:#344054;background:#fff;font-weight:600}:host ::ng-deep .checkout-unsaved-modal-content .btn-discard{background-color:var(--ec-primary,#000);border-color:var(--ec-primary,#000);color:var(--ec-primary-contrast,#fff);font-weight:600}.checkout-section{border:1px solid var(--ec-border);border-radius:6px;background:var(--ec-surface);overflow:hidden}.checkout-single .checkout-section{overflow:visible}.checkout-section.is-disabled{opacity:.6}.checkout-section.is-complete{border-color:var(--ec-success)}.section-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1rem;background:var(--ec-surface-alt);border:0;text-align:left}.checkout-section.is-complete .section-header{background:rgba(22,163,74,.08)}.checkout-section.is-complete .section-index,.checkout-section.is-complete .section-state{background:var(--ec-success);color:#fff}.section-index{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--ec-accent);color:var(--ec-accent-contrast);font-weight:600}.section-summary{display:-ms-grid;display:grid;-ms-grid-columns:1fr auto;grid-template-columns:1fr auto;-ms-grid-rows:auto auto;grid-template-rows:auto auto;gap:.2rem .75rem;align-items:center;padding:.5rem 1rem .85rem;font-size:.9rem;color:var(--ec-muted)}.section-summary-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ec-muted)}.section-summary-value{font-weight:600;color:#111;-ms-grid-column:1;-ms-grid-column-span:1;grid-column:1/2}.section-summary-edit{-ms-grid-column:2;-ms-grid-column-span:1;grid-column:2/3;-ms-grid-row:1;-ms-grid-row-span:2;grid-row:1/3;-ms-grid-row-align:center;align-self:center;-ms-grid-column-align:end;justify-self:end;font-size:.8rem;font-weight:700;color:var(--ec-accent,#000);text-transform:uppercase;letter-spacing:.04em}.section-summary-edit:focus{outline:2px solid var(--ec-accent,#000);outline-offset:2px;border-radius:4px}.section-title{flex:1;font-weight:600}.section-state{width:32px;height:32px;border-radius:50%;background:#e7f6ea;color:#2f7a32;display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;line-height:1}.section-body{padding:1rem 1.25rem}.section-actions{display:flex;justify-content:flex-end;margin-top:1rem}.checkout-summary{border:1px solid #e3e3e3;border-radius:6px;padding:1rem;background:#fff;position:-webkit-sticky;position:sticky;top:var(--ec-checkout-sticky-top,1rem)}.summary-title{font-weight:600;margin-bottom:1rem}.checkout-single .valid-btn{font-size:1rem;padding:.7rem 1.1rem;letter-spacing:.02em;text-transform:uppercase}.checkout-single #checkoutFinishBtn,.checkout-single .summary-mobile-btn{background-color:var(--ec-primary,#000);border-color:var(--ec-primary,#000);color:var(--ec-primary-contrast,#fff);text-transform:uppercase}.checkout-single #checkoutFinishBtn:disabled,.checkout-single #checkoutFinishBtn[disabled],.checkout-single .summary-mobile-btn:disabled,.checkout-single .summary-mobile-btn[disabled]{background-color:var(--ec-primary-muted,#6c757d);border-color:var(--ec-primary-muted,#6c757d);color:var(--ec-primary-contrast,#fff);opacity:.8}.summary-products{border-bottom:1px solid #eee;margin-bottom:1rem;padding-bottom:1rem}.summary-product{display:-ms-grid;display:grid;-ms-grid-columns:1fr auto;grid-template-columns:1fr auto;gap:.25rem .5rem;align-items:center;padding:.35rem 0;border-bottom:1px solid #f1f1f1}.summary-product:last-child{border-bottom:0}.summary-product-main{display:flex;flex-direction:column;gap:.2rem;min-width:0}.summary-product-name{font-weight:500;font-size:.95rem;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.summary-product-qty{font-size:.85rem;color:#666}.summary-product-price{font-weight:600;font-size:.9rem;color:#222}.summary-totals{display:flex;flex-direction:column;gap:.5rem;padding-top:.75rem}.summary-total-row{display:flex;justify-content:space-between;font-weight:500;font-size:.95rem;color:#555}.summary-total-row-total{font-size:1.1rem;font-weight:700;color:#111;margin-top:.25rem}.summary-mobile-bar{display:none}@media screen and (max-width:992px){.checkout-summary{position:static;margin-top:.75rem}.checkout-single{padding-bottom:20px}.summary-mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:var(--ec-checkout-summary-mobile-z-index,10040);display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #e5e7eb;box-shadow:0 -6px 18px rgba(15,23,42,.08)}.summary-mobile-total{display:flex;flex-direction:column;gap:.2rem}.summary-mobile-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:#6b7280}.summary-mobile-value{font-weight:700;font-size:1.05rem;color:#111827}.summary-mobile-btn{padding:.7rem 1.1rem;font-size:.95rem;white-space:nowrap}}:host-context(.modal-open) .summary-mobile-bar{z-index:var(--ec-checkout-summary-mobile-z-index-modal-open,1030)}.checkout-loading-overlay{position:fixed;inset:0;background:rgba(17,24,39,.45);display:flex;align-items:center;justify-content:center;z-index:var(--ec-checkout-overlay-z-index,10050);padding:1.5rem}.checkout-loading-card{background:#fff;border-radius:12px;padding:1.5rem 2rem;box-shadow:0 20px 40px rgba(0,0,0,.2);display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center}.checkout-loading-card h5{margin:0;font-weight:600;color:#111}.summary-mobile-bar.is-hidden{display:none}"]
             })
         ], CheckoutEcComponent);
         return CheckoutEcComponent;