.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:16px 8px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.modal[hidden]{display:none}.m-bg{position:fixed;inset:0;background:#0009;backdrop-filter:blur(3px)}.m-box{position:relative;width:100%;max-width:374px;flex:none;background:#fff;color:#080808;border-radius:6px;padding:25px 12px 20px;box-shadow:0 18px 60px #0003;font-family:Arial,Helvetica,sans-serif}.m-x{position:absolute;top:2px;right:7px;border:0;background:none;color:#23384a;cursor:pointer;width:22px;height:22px;font:20px/22px Arial}.cod-banner{display:block;width:100%;height:auto;margin:0 0 11px;border:0;border-radius:0}.cod-body{padding:0}.cod-offers{display:grid;gap:10px;margin-bottom:11px}.cod-offer{display:flex;align-items:center;gap:6px;border:1px solid #d0d0d0;border-radius:3px;padding:8px 6px;min-height:51px;cursor:pointer}.cod-offer:has(input:checked){border-color:#ff3131;background:#fff0e9}.cod-offer input{width:15px;height:15px;flex:none;accent-color:#ff3030;margin:0}.cod-offer>span{flex:1;min-width:0}.cod-offer b{font-size:10px;line-height:1.5}.cod-offer small{display:block;font-size:9px;line-height:1.4}.cod-offer strong{font-size:11px;white-space:nowrap;text-align:right}.cod-offer .offer-tag{display:inline-block;background:linear-gradient(90deg,#ff481f,#ffcc00);padding:2px 4px;color:#fff;font-size:8px;font-weight:bold}.tot{border:1px solid #d4d4d4;border-radius:2px;background:#f8f8f8;padding:4px 6px;margin-bottom:12px}.ln{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;line-height:1.5;padding:3px 0}.big{border-top:1px solid #ddd;margin-top:3px;font-size:12px}.shipping-options>b{display:block;font-size:11px;margin:0 0 8px}.shipping-options>label{display:flex;align-items:center;gap:14px;border:1px solid #d4d4d4;border-radius:2px;padding:5px 9px;font-size:10px;min-height:28px}.shipping-options input{margin:0 2px 0 6px;accent-color:#111;width:15px;height:15px}.shipping-options span{flex:1;color:#444}.cod-hint{font-size:8px;line-height:2.2;letter-spacing:.2px;text-align:center;color:#e50000;margin:13px 0 12px}.icon-field{display:flex;align-items:stretch;min-height:31px;margin:0 0 10px;border:1px solid #c4c4c4;border-radius:3px;overflow:hidden;background:#fff}.field-icon{width:29px;flex:none;display:grid;place-items:center;background:#e4e4e4;border-right:1px solid #c5c5c5}.field-icon svg{width:15px;height:15px;fill:none;stroke:#122a3b;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.icon-field input{width:100%;min-width:0;border:0;padding:6px 11px;outline:0;font:11px Arial;color:#111;background:#fff}.icon-field input::placeholder,.plain-field::placeholder{color:#777;opacity:1}.plain-field{display:block;width:100%;min-height:31px;background:#fff;color:#555;border:1px solid #c4c4c4;border-radius:3px;font:11px Arial;padding:6px 11px;margin:0 0 10px;outline:0}.city-field{position:relative}.city-field>span{position:absolute;right:9px;top:6px;pointer-events:none;font-size:13px}.city-field input{padding-right:26px}.city-field input::-webkit-calendar-picker-indicator{opacity:0}.icon-field:focus-within,.plain-field:focus{border-color:#ee7935;box-shadow:0 0 0 1px #ee7935}.delivery-note{font-size:8px;font-weight:bold;text-align:center;line-height:2.2;letter-spacing:.1px;margin:12px 0 14px}.bump{display:flex;align-items:center;gap:7px;min-height:55px;padding:6px 10px;border:2px dashed #f02b35;background:#fff7f7;margin:0 0 7px;cursor:pointer}.bump input{width:12px;height:12px;flex:none;margin:0;accent-color:#2075ff}.bump img{width:35px;height:36px;object-fit:contain;flex:none}.bump span{font-size:10px;line-height:1.7}.bump b{font-weight:normal}.adel{font-size:10px;line-height:1.5;background:#fff7e6;border:1px solid #efd9a9;padding:8px;margin:8px 0}.go{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:34px;border:0;border-radius:12px;background:linear-gradient(100deg,#ff3921,#ff7b17 52%,#ffd400);color:#fff;font:bold 10px Arial;box-shadow:0 2px 4px #0002;cursor:pointer}.go svg{width:13px;height:13px;fill:#fff;stroke:#fff;stroke-width:1.5}.go svg path{fill:none}.go:disabled{opacity:.65;cursor:wait}.err{display:none;border:1px solid #edb8b1;background:#fff0ed;color:#943327;padding:9px;font-size:11px;margin-bottom:10px}.m-box button:focus-visible{outline:2px solid #d56a2b;outline-offset:2px}@media(max-width:500px){.modal{padding:8px}.icon-field input,.plain-field{font-size:16px}.icon-field input::placeholder{font-size:11px}.plain-field{font-size:12px}.plain-field:focus{font-size:16px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}/* Controles e iconos legibles, sin cambiar la distribución del formulario. */
.field-icon{width:37px;background:#f2f4f7;border-right-color:#d3d9e0}.field-icon svg{width:21px;height:21px;stroke-width:1.8;stroke:#33475b}.whatsapp-icon svg{fill:#25D366;stroke:none}.icon-field{min-height:40px;border-color:#cbd1d8;border-radius:5px}.icon-field input{font-size:13px;padding:9px 11px}.icon-field input::placeholder{font-size:12px;color:#6c7580}.plain-field{min-height:40px;border-radius:5px;font-size:13px;border-color:#cbd1d8}.plain-field:disabled{background:#f2f4f6;color:#8b949e}.plain-field[hidden]{display:none}.ln{font-size:11px}.cod-hint{font-size:9px;line-height:1.8}.delivery-note{font-size:9px}.go{font-size:12px;min-height:41px}.cod-offer strong{font-size:12px}.single-product{padding:13px 10px;border:1px solid #ddd;border-radius:4px;margin-bottom:12px;font-size:12px}.single-product span{display:block;margin-top:5px;color:#717780;font-size:11px}.free-label{color:#15804b}.bump{min-height:64px;border-radius:5px}.bump img{width:40px;height:44px}.bump span{font-size:11px}.bump-animated{border:2px solid transparent;background:linear-gradient(90deg,#f23749 50%,transparent 50%) top left/16px 2px repeat-x,linear-gradient(90deg,#f23749 50%,transparent 50%) bottom left/16px 2px repeat-x,linear-gradient(0deg,#f23749 50%,transparent 50%) top left/2px 16px repeat-y,linear-gradient(0deg,#f23749 50%,transparent 50%) top right/2px 16px repeat-y,#fff7f7;animation:cod-dashes 1.3s linear infinite;background-origin:border-box}.bump:has(input:checked){background-color:#fff0dc}.bump:hover{animation-play-state:paused}@keyframes cod-dashes{to{background-position:16px 0,-16px 100%,0 -16px,100% 16px}}@media(max-width:500px){.icon-field input,.plain-field,.plain-field:focus{font-size:16px}.icon-field input::placeholder{font-size:12px}}/* La caja de feromonas se mueve siempre, también con "reducir movimiento" (pedido del dueño). */
/* El contenido se desplaza; el resumen y la confirmación permanecen visibles. */
.modal{overflow:hidden;padding:16px 8px;align-items:center}
.m-box{display:flex;flex-direction:column;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);padding:0;overflow:hidden}
.m-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:25px 12px 12px;scroll-padding:16px}
.m-x{z-index:2;background:#fff;border-radius:50%;width:26px;height:24px;top:1px;right:4px}
.cod-banner{border-radius:4px;margin-bottom:12px}
.form-field{min-width:0;margin-bottom:10px;scroll-margin:14px}
.form-field[hidden]{display:none}
.field-label{display:block;font-size:11px;font-weight:600;line-height:1.4;color:#334155;margin-bottom:4px}
.form-field .icon-field,.form-field .plain-field{margin:0}
.field-error{display:block;color:#b42318;font-size:11px;line-height:1.4;margin-top:4px}
.field-error[hidden]{display:none}
.icon-field:has([aria-invalid="true"]),.plain-field[aria-invalid="true"]{border-color:#d92d20;box-shadow:0 0 0 1px #d92d2020}
.checkout-footer{flex:none;background:#fff;border-top:1px solid #e7e9ed;padding:10px 12px max(12px,env(safe-area-inset-bottom));box-shadow:0 -5px 16px #14203308}
.checkout-total{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;color:#17212e;font-size:12px}
.checkout-total small{display:block;color:#546576;font-size:10px;line-height:1.5;margin-top:2px}
.checkout-total strong{font-size:16px;white-space:nowrap}
.checkout-footer .go{min-height:44px;border-radius:9px;font-size:12px}
.checkout-footer .err{margin-bottom:8px;padding:7px;max-height:80px;overflow:auto}
.delivery-note{margin:8px 0 10px}.cod-hint{margin:10px 0}
@media(max-width:500px){.modal{padding:8px}.m-box{max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px)}}

.address-reference{min-height:68px;resize:vertical;line-height:1.5}.address-reference::placeholder{font-size:12px}

/* Personalización validada del módulo Formularios de compra. */
.m-box{max-width:var(--cod-width,374px);border-radius:var(--cod-radius,6px);background:var(--cod-background,#fff);color:var(--cod-text,#17212e)}
.m-box .checkout-footer,.m-box .m-x{background:var(--cod-background,#fff)}
.m-box .field-label,.m-box .checkout-total,.m-box .checkout-heading,.m-box .m-x{color:var(--cod-text,#17212e)}
.m-box .icon-field,.m-box .icon-field input,.m-box .plain-field{background:var(--cod-field-bg,#fff);color:var(--cod-text,#17212e);border-color:var(--cod-field-border,#cbd1d8)}
.m-box .cod-offer:has(input:checked){border-color:var(--cod-accent,#ff3131);background:color-mix(in srgb,var(--cod-accent,#ff3131) 8%,var(--cod-background,#fff))}
.m-box .cod-offer input,.custom-check input{accent-color:var(--cod-accent,#ff3131)}
.m-box .icon-field:focus-within,.m-box .plain-field:focus{border-color:var(--cod-accent,#ff3131);box-shadow:0 0 0 1px var(--cod-accent,#ff3131)}
.m-box .go{background:linear-gradient(100deg,var(--cod-button-start,#ff3921),var(--cod-button-end,#ffd400));color:var(--cod-button-text,#fff)}
.m-box .go svg{fill:currentColor;stroke:currentColor}.m-box .go svg path{fill:none}
.checkout-heading{font-size:19px;line-height:1.3;margin:0 0 16px}.custom-check{display:flex;gap:9px;align-items:center;font-size:12px;line-height:1.5}.custom-check input{flex:none;width:17px;height:17px;margin:0}.custom-field textarea{resize:vertical;min-height:66px}
.m-box.checkout-flow{overflow-y:auto}.checkout-flow .m-scroll{overflow:visible;flex:none}.checkout-flow .checkout-footer{box-shadow:none}

.m-box .cod-hint{color:var(--cod-accent,#ff3131)}
.m-box .offer-tag{background:linear-gradient(90deg,var(--cod-button-start,#ff3921),var(--cod-button-end,#ffd400));color:var(--cod-button-text,#fff)}
.m-box .bump{border-color:var(--cod-accent,#ff3131)}
.m-box .bump-animated{border-color:transparent;background-image:linear-gradient(90deg,var(--cod-accent,#ff3131) 50%,transparent 50%),linear-gradient(90deg,var(--cod-accent,#ff3131) 50%,transparent 50%),linear-gradient(0deg,var(--cod-accent,#ff3131) 50%,transparent 50%),linear-gradient(0deg,var(--cod-accent,#ff3131) 50%,transparent 50%)}

/* Tamaños independientes, compartidos por la vista previa y la compra real. */
.m-box{font-family:var(--cod-font-family,Arial,Helvetica,sans-serif);font-size:var(--cod-font-body,11px)}
.m-box input,.m-box select,.m-box textarea,.m-box button{font-family:inherit}
.m-box .ln,.m-box .shipping-options>b,.m-box .shipping-options>label,.m-box .bump span,.m-box .single-product,.m-box .custom-check,.m-box .checkout-total{font-size:var(--cod-font-body,11px);line-height:1.5}
.m-box .cod-offer b,.m-box .cod-offer small,.m-box .single-product span{font-size:var(--cod-font-body,11px);line-height:1.4}
.m-box .checkout-heading{font-size:var(--cod-font-heading,19px)}
.m-box .field-label{font-size:var(--cod-font-label,11px)}
.m-box .icon-field input,.m-box .plain-field,.m-box .plain-field:focus{font-size:var(--cod-font-input,16px);line-height:1.4}
.m-box .icon-field input::placeholder,.m-box .plain-field::placeholder{font-size:var(--cod-font-placeholder,12px)}
.m-box .cod-offer strong,.m-box #tl-sub,.m-box #tl-bump,.m-box #tl-tot{font-size:var(--cod-font-price,12px)}
.m-box .checkout-total strong{font-size:calc(var(--cod-font-price,12px) + 4px)}
.m-box .checkout-footer .go{font-size:var(--cod-font-button,12px);line-height:1.4;padding:10px 12px;min-height:44px}.m-box .go svg{flex:none}
.m-box .cod-hint,.m-box .delivery-note,.m-box .adel,.m-box .field-error,.m-box .err,.m-box .checkout-total small{font-size:var(--cod-font-help,9px);line-height:1.6}
.m-box .checkout-total{flex-wrap:wrap}.m-box .cod-offer>span{overflow-wrap:anywhere}

.m-box .m-scroll{padding-left:var(--cod-padding,12px);padding-right:var(--cod-padding,12px)}
.m-box .checkout-footer{padding-left:var(--cod-padding,12px);padding-right:var(--cod-padding,12px)}
.m-box .form-field{margin-bottom:var(--cod-field-gap,10px)}
.m-box .icon-field,.m-box .plain-field{min-height:var(--cod-field-height,40px);border-radius:var(--cod-field-radius,5px)}
.m-box .checkout-footer .go{border-radius:var(--cod-button-radius,9px)}
.checkout-no-icons .field-icon{display:none}
.checkout-message{font-size:var(--cod-font-body,11px);line-height:1.6;white-space:normal;overflow-wrap:anywhere;margin:12px 0}
.checkout-image{width:100%;height:auto;display:block;border-radius:var(--cod-field-radius,5px);margin:12px 0}

.m-box .cod-offer .pack-before{display:block;font-size:var(--cod-font-help,9px);font-weight:400;color:#727983;margin-top:4px}.m-box .cod-offer .pack-saving{display:block;font-size:var(--cod-font-help,9px);color:#15804b;white-space:normal;line-height:1.3}.m-box #tl-pack-row{color:#15804b}
/* Formulario compacto: sin títulos visibles sobre los datos de entrega (siguen ahí para lectores de pantalla). */
.checkout-no-labels [data-cod-section="details"] .field-label{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Producto único: tarjeta seleccionada como la de las ofertas (estilo Releasit) */
.m-box .single-product{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--cod-accent,#ff3131);border-radius:var(--cod-field-radius,5px);background:color-mix(in srgb,var(--cod-accent,#ff3131) 8%,var(--cod-background,#fff))}
.m-box .single-product .sp-dot{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--cod-accent,#ff3131);background:radial-gradient(circle,var(--cod-accent,#ff3131) 0 45%,transparent 50%)}
.m-box .single-product .sp-name{flex:1;min-width:0;margin:0;color:inherit}
.m-box .single-product .sp-name b{display:block;font-size:var(--cod-font-label,13px)}
.m-box .single-product .sp-name small{display:block;color:#717780;font-size:var(--cod-font-help,11px)}
.m-box .single-product .sp-price{flex:none;margin:0;font-size:var(--cod-font-price,13px);white-space:nowrap}
/* Selects sin elegir: mismo tamaño y gris que el texto guía de los campos (a 16px al enfocar para que iPhone no haga zoom) */
.m-box select.plain-field:invalid:not(:focus),.m-box select.plain-field:disabled{font-size:var(--cod-font-placeholder,12px);color:#8a9099}
.m-box select.plain-field option{color:#17212e}
/* Como el formulario de referencia: celda del ícono gris con ícono oscuro y aviso en rojo oscuro y negrita */
.m-box .field-icon{background:#e9ecef;border-right-color:var(--cod-field-border,#cbd1d8)}
.m-box .field-icon svg{stroke:#212529}
.m-box .cod-hint{color:color-mix(in srgb,var(--cod-accent,#ff3131) 70%,#000);font-weight:700}
.m-box .single-product .sp-name b,.m-box .single-product .sp-price,.m-box #tl-tot{font-weight:800}
/* Sin pie fijo el total ya está en el resumen de arriba: abajo solo va el botón, como en Releasit */
.m-box.checkout-flow .checkout-total{display:none}
/* Lista de Departamento/Ciudad con el estilo del formulario */
.m-box .form-field{position:relative}
.m-box .cod-pick{position:absolute;left:0;right:0;top:calc(var(--cod-field-height,40px) + 4px);z-index:20;background:var(--cod-background,#fff);border:1px solid var(--cod-field-border,#cbd1d8);border-radius:var(--cod-field-radius,6px);box-shadow:0 10px 28px #0003;overflow:hidden;font-family:var(--cod-font-family)}
.m-box .cod-pick-search{display:block;width:100%;box-sizing:border-box;border:0;border-bottom:1px solid var(--cod-field-border,#cbd1d8);padding:10px 12px;font:inherit;font-size:16px;color:var(--cod-text,#17212e);background:#f7f8fa;outline:0}
.m-box .cod-pick-list{list-style:none;margin:0;padding:4px 0;max-height:260px;overflow:auto;overscroll-behavior:contain}
.m-box .cod-pick-list li{padding:9px 14px;font-size:var(--cod-font-body,14px);color:var(--cod-text,#17212e);cursor:pointer}
.m-box .cod-pick-list li:hover,.m-box .cod-pick-list li.is-active{background:color-mix(in srgb,var(--cod-accent,#ff3131) 9%,#fff)}
.m-box .cod-pick-list li.is-selected{font-weight:700;color:var(--cod-accent,#ff3131)}
.m-box .cod-pick-list li.is-selected::after{content:"✓";float:right}
.m-box .cod-pick-list li.is-other{border-top:1px solid #eef0f3;font-style:italic}
.m-box .cod-pick-list li.is-empty{color:#8a9099;cursor:default}
/* Feromonas como en el formulario de referencia */
.m-box .bump{gap:12px;padding:10px 14px;min-height:76px;border-radius:var(--cod-field-radius,6px)}
.m-box .bump input{width:18px;height:18px;accent-color:var(--cod-accent,#ff3131)}
.m-box .bump img{width:56px;height:56px}
.m-box .bump span{line-height:1.45}
.m-box .bump b{font-weight:800}
/* El ícono de WhatsApp es relleno: el trazo oscuro de los otros íconos lo engordaba */
.m-box .whatsapp-icon svg{stroke:none;fill:#212529;width:19px;height:19px}

/* Lista de Departamento / Ciudad (v2): buscador con lupa, filas cómodas, scroll fino. */
.m-box .cod-pick{top:calc(var(--cod-field-height,40px) + 6px);border:0;border-radius:14px;box-shadow:0 0 0 1px #0000000f,0 18px 40px -8px #00000040;animation:cod-pick-in .16s ease-out;background:#fff}
@keyframes cod-pick-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.m-box .cod-pick-search{margin:10px;width:calc(100% - 20px);border:1.5px solid #e3e6ea;border-radius:10px;padding:11px 12px 11px 38px;font-size:16px;background:#f6f7f9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9099' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 12px 50%/17px no-repeat;transition:border-color .15s,background-color .15s}
.m-box .cod-pick-search:focus{border-color:var(--cod-accent,#ff3131);background-color:#fff}
.m-box .cod-pick-search::-webkit-search-cancel-button{cursor:pointer}
.m-box .cod-pick-list{padding:0 6px 8px;max-height:min(300px,45vh);scrollbar-width:thin;scrollbar-color:#cfd4da transparent}
.m-box .cod-pick-list::-webkit-scrollbar{width:6px}
.m-box .cod-pick-list::-webkit-scrollbar-thumb{background:#cfd4da;border-radius:6px}
.m-box .cod-pick-list li{display:flex;align-items:center;justify-content:space-between;min-height:42px;padding:0 12px;border-radius:9px;font-size:15px;line-height:1.25;color:#17212e}
.m-box .cod-pick-list li+li{margin-top:1px}
.m-box .cod-pick-list li:hover,.m-box .cod-pick-list li.is-active{background:color-mix(in srgb,var(--cod-accent,#ff3131) 8%,#fff)}
.m-box .cod-pick-list li.is-selected{font-weight:700;color:var(--cod-accent,#ff3131);background:color-mix(in srgb,var(--cod-accent,#ff3131) 10%,#fff)}
.m-box .cod-pick-list li.is-selected::after{content:"";float:none;width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.m-box .cod-pick-list li.is-other{border-top:0;margin-top:6px;font-style:normal;color:#5b636d;box-shadow:0 -1px 0 #eef0f3}
.m-box .cod-pick-list li.is-empty{justify-content:center;color:#8a9099;font-size:14px}