/* ============================================================
   PEDIDO CONTRA ENTREGA — modal
   Reemplaza el de la app de Shopify, que se quedaba cargando.
   Prefijo cp- (cleo-pedido) para no chocar con el tema.
   ============================================================ */
.cp-modal{
  --cp-crema:#faf6f2; --cp-papel:#fffdfb; --cp-hundido:#f5efeb;
  --cp-rosa:#c8a090;  --cp-rosa-osc:#a87d6b; --cp-rosa-cl:#f0e2d9;
  --cp-tinta:#2e2622; --cp-suave:#6d5c53;   --cp-tenue:#9c8a80;
  --cp-linea:#e6dad2;
  --cp-malo:#a4514a;  --cp-malo-bg:#fbeeec;
  --cp-ok:#4f7a5b;    --cp-ok-bg:#eef4ef;
  --cp-shalom:#0a4d8c; --cp-olva:#d81f26;
}

/* ---------------- botón en la ficha ---------------- */
.cp-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;margin:10px 0;padding:16px 20px;
  border:0;border-radius:12px;cursor:pointer;
  background:linear-gradient(135deg,#cfa898,#b98a76);
  color:#fff;font-family:inherit;font-size:.95rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.25;
  box-shadow:0 8px 22px rgba(168,125,107,.35);
  transition:transform .15s,box-shadow .2s,filter .2s;
}
.cp-btn:hover{filter:brightness(1.05);box-shadow:0 12px 28px rgba(168,125,107,.42);transform:translateY(-1px)}
.cp-btn:active{transform:translateY(1px)}
.cp-btn:focus-visible{outline:2px solid #a87d6b;outline-offset:3px}
.cp-btn svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------------- capa ---------------- */
.cp-modal{
  position:fixed;inset:0;z-index:99999;display:none;
  align-items:center;justify-content:center;padding:22px 18px;
  background:rgba(46,38,34,.6);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  font-family:"Jost","Poppins","Segoe UI",system-ui,sans-serif;
  font-weight:300;color:var(--cp-tinta);line-height:1.6;
}
.cp-modal.cp-on{display:flex;animation:cpEntra .22s ease}
@keyframes cpEntra{from{opacity:0}to{opacity:1}}

.cp-panel{
  position:relative;width:100%;max-width:520px;
  height:auto;max-height:92vh;max-height:92dvh;
  background:var(--cp-crema);border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 30px 90px rgba(0,0,0,.4);
  animation:cpSube .3s cubic-bezier(.2,.7,.3,1);
}
@keyframes cpSube{from{transform:translateY(22px) scale(.97)}to{transform:none}}

/* ---------------- cabecera ---------------- */
.cp-cab{
  flex:none;display:flex;align-items:flex-start;gap:14px;
  padding:20px 22px;color:#fff;
  background:linear-gradient(135deg,#c8a090,#a87d6b);
}
.cp-cab > div{flex:1;min-width:0}
.cp-cab h2{
  margin:0;font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.5rem;font-weight:600;line-height:1.15;letter-spacing:.01em;
}
.cp-cab p{margin:3px 0 0;font-size:.86rem;opacity:.92;font-weight:300}
.cp-cerrar{
  flex:none;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.12);
  color:#fff;font-size:20px;line-height:1;cursor:pointer;
  transition:background .2s,color .2s;
}
.cp-cerrar:hover{background:#fff;color:var(--cp-rosa-osc)}
.cp-cerrar:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------------- cuerpo ---------------- */
.cp-cuerpo{flex:1;min-height:0;overflow-y:auto;padding:20px 22px 8px;scrollbar-width:thin}
.cp-cuerpo::-webkit-scrollbar{width:8px}
.cp-cuerpo::-webkit-scrollbar-thumb{background:var(--cp-linea);border-radius:8px}

/* producto */
.cp-prod{
  display:flex;align-items:center;gap:13px;
  background:var(--cp-papel);border:1px solid var(--cp-linea);
  border-radius:13px;padding:11px 13px;margin-bottom:20px;
}
.cp-prod img{width:56px;height:56px;flex:none;border-radius:9px;
  object-fit:cover;background:#fff;border:1px solid var(--cp-linea)}
.cp-prod-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.cp-prod-txt strong{font-weight:500;font-size:.9rem;line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cp-prod-txt span{font-size:.8rem;color:var(--cp-tenue)}
.cp-prod-total{flex:none;font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.4rem;font-weight:700;color:var(--cp-rosa-osc);line-height:1}

/* separador de sección con número */
.cp-seccion{display:flex;align-items:center;gap:10px;margin:22px 0 13px}
.cp-seccion:first-of-type{margin-top:4px}
.cp-seccion h3{
  margin:0;font-size:.79rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cp-suave);
}
.cp-paso{
  flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--cp-rosa);color:#fff;
  display:grid;place-items:center;
  font-size:.72rem;font-weight:600;
}
.cp-seccion::after{content:"";flex:1;height:1px;background:var(--cp-linea)}

/* campos */
.cp-campo{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}
.cp-campo label{
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cp-suave);font-weight:500;
}
.cp-campo label i{font-style:normal;color:var(--cp-rosa-osc)}
.cp-campo input,.cp-campo select,.cp-campo textarea{
  width:100%;padding:12px 14px;
  border:1px solid var(--cp-linea);border-radius:10px;
  font-family:inherit;font-size:.97rem;font-weight:300;
  background:#fff;color:var(--cp-tinta);
  transition:border-color .15s,box-shadow .15s;
}
.cp-campo textarea{resize:vertical;min-height:56px}
.cp-campo input:focus,.cp-campo select:focus,.cp-campo textarea:focus{
  outline:none;border-color:var(--cp-rosa);
  box-shadow:0 0 0 3px var(--cp-rosa-cl);
}
.cp-campo input.cp-mal,.cp-campo select.cp-mal{
  border-color:var(--cp-malo);background:#fffbfa;
}
.cp-campo input.cp-mal:focus,.cp-campo select.cp-mal:focus{
  box-shadow:0 0 0 3px rgba(164,81,74,.14);
}
.cp-campo em{font-style:normal;font-size:.81rem;color:var(--cp-malo)}
.cp-fila{display:grid;grid-template-columns:1fr 1fr;gap:11px}

/* trampa para robots: fuera de pantalla, no display:none */
.cp-trampa{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------------- forma de entrega ---------------- */
.cp-modos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.cp-modo{cursor:pointer;display:block}
.cp-modo input{position:absolute;opacity:0;width:0;height:0}
.cp-modo-in{
  display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
  height:100%;padding:15px 11px;
  border:1.5px solid var(--cp-linea);border-radius:13px;background:var(--cp-papel);
  transition:border-color .18s,background .18s,transform .15s;
}
.cp-modo:hover .cp-modo-in{border-color:var(--cp-rosa);transform:translateY(-1px)}
.cp-modo input:checked + .cp-modo-in{
  border-color:var(--cp-rosa);background:var(--cp-rosa-cl);
  box-shadow:0 4px 14px rgba(168,125,107,.16);
}
.cp-modo input:focus-visible + .cp-modo-in{outline:2px solid var(--cp-rosa-osc);outline-offset:2px}
.cp-modo-ico{
  width:38px;height:38px;border-radius:50%;flex:none;
  background:var(--cp-hundido);display:grid;place-items:center;
  transition:background .18s;
}
.cp-modo input:checked + .cp-modo-in .cp-modo-ico{background:#fff}
.cp-modo-ico svg{width:19px;height:19px;fill:none;stroke:var(--cp-rosa-osc);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cp-modo-txt{display:flex;flex-direction:column;gap:2px}
.cp-modo-txt strong{font-weight:500;font-size:.88rem;line-height:1.25}
.cp-modo-txt small{font-size:.75rem;color:var(--cp-tenue);line-height:1.35}

/* aviso de envío */
.cp-envio-nota{
  display:flex;align-items:center;gap:8px;
  background:var(--cp-ok-bg);border:1px solid #cbdfd0;color:var(--cp-ok);
  border-radius:10px;padding:10px 13px;margin-bottom:14px;
  font-size:.85rem;font-weight:400;
}

/* detalle de la agencia elegida */
.cp-ag-detalle{
  display:flex;flex-direction:column;gap:7px;
  background:var(--cp-papel);border:1px solid var(--cp-linea);
  border-left:3px solid var(--cp-rosa);
  border-radius:11px;padding:12px 14px;margin:-4px 0 14px;
}
.cp-ag-linea{display:flex;gap:8px;align-items:flex-start;
  font-size:.84rem;color:var(--cp-suave);line-height:1.45}
.cp-ag-linea svg{width:15px;height:15px;flex:none;margin-top:2px;
  fill:none;stroke:var(--cp-rosa-osc);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* etiqueta de la empresa de transporte */
.cp-marca{
  align-self:flex-start;
  font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  color:#fff;background:var(--cp-tinta);
  border-radius:20px;padding:3px 10px;
}
.cp-marca--shalom{background:var(--cp-shalom)}
.cp-marca--olva{background:var(--cp-olva)}

/* agrupación del desplegable */
#cp-ag optgroup{font-style:normal;font-weight:600;color:var(--cp-rosa-osc);
  background:var(--cp-hundido)}
#cp-ag option{font-weight:300;color:var(--cp-tinta);padding:4px 0}

/* ---------------- pie ---------------- */
.cp-pie{
  flex:none;padding:15px 22px 17px;background:var(--cp-papel);
  border-top:1px solid var(--cp-linea);
  box-shadow:0 -6px 18px rgba(96,66,52,.05);
}
.cp-total{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:11px;
}
.cp-total span{font-size:.76rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--cp-suave)}
.cp-total b{font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.75rem;font-weight:700;color:var(--cp-rosa-osc);line-height:1}

.cp-enviar{
  width:100%;padding:16px;border:0;border-radius:12px;
  background:linear-gradient(135deg,#cfa898,#a87d6b);
  color:#fff;cursor:pointer;
  font-family:inherit;font-size:.93rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 8px 22px rgba(168,125,107,.34);
  transition:filter .2s,transform .15s;
}
.cp-enviar:hover{filter:brightness(1.06);transform:translateY(-1px)}
.cp-enviar:active{transform:translateY(1px)}
.cp-enviar:focus-visible{outline:2px solid var(--cp-rosa-osc);outline-offset:3px}
.cp-enviar[disabled]{opacity:.62;cursor:progress;transform:none;filter:none}
.cp-nota-pago{text-align:center;margin:9px 0 0;font-size:.79rem;color:var(--cp-tenue)}

/* ---------------- móvil ---------------- */
@media (max-width:560px){
  .cp-modal{padding:0}
  .cp-panel{max-width:none;max-height:100vh;max-height:100dvh;height:100%;border-radius:0}
  .cp-cab{padding:16px 18px}
  .cp-cab h2{font-size:1.3rem}
  .cp-cuerpo{padding:16px 18px 6px}
  .cp-pie{padding:13px 18px 15px}
  .cp-fila{grid-template-columns:1fr}
  .cp-modos{grid-template-columns:1fr}
  .cp-modo-in{flex-direction:row;text-align:left;padding:13px}
  .cp-modo-txt{flex:1}
}

@media (prefers-reduced-motion:reduce){
  .cp-modal.cp-on,.cp-panel{animation:none}
  .cp-btn,.cp-enviar,.cp-modo-in,.cp-campo input{transition:none}
}

@media print{.cp-btn,.cp-modal{display:none!important}}