/* ===================================================================
   CARRITO DE COTIZACIÓN
   Sigue la paleta de la Propuesta A: fondo claro, verde y amarillo de
   marca. Las variables (--verde, --amarillo, --tinta…) las define
   front-page.php, así que si se ajusta la marca esto acompaña.
   =================================================================== */

/* botón flotante — va encima del de WhatsApp, que queda abajo a la derecha */
.cotbtn{position:fixed;right:24px;bottom:92px;z-index:96;width:56px;height:56px;border-radius:12px;
  background:var(--amarillo);color:var(--tinta);border:none;cursor:pointer;display:none;place-items:center;
  box-shadow:0 10px 26px rgba(245,179,28,.42);transition:transform .22s,box-shadow .22s}
.cotbtn.on{display:grid}
.cotbtn:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(245,179,28,.55)}
.cotbtn svg{width:26px;height:26px}
.cotbtn .cn{position:absolute;top:-5px;right:-5px;min-width:22px;height:22px;border-radius:999px;
  background:var(--verde);color:#fff;font-size:.72rem;font-weight:800;display:grid;place-items:center;
  padding:0 6px;border:2px solid #fff}

.cotvelo{position:fixed;inset:0;background:rgba(10,77,34,.42);backdrop-filter:blur(4px);z-index:130;
  opacity:0;pointer-events:none;transition:opacity .3s}
.cotvelo.on{opacity:1;pointer-events:auto}

.cotpanel{position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);z-index:140;background:var(--fondo);
  border-left:1px solid var(--linea);display:flex;flex-direction:column;
  box-shadow:-18px 0 50px rgba(22,36,27,.14);
  transform:translateX(101%);transition:transform .38s cubic-bezier(.2,.7,.25,1)}
.cotpanel.on{transform:none}

.cotpanel header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:22px 24px 16px;border-bottom:1px solid var(--linea);background:var(--fondo2)}
.cotpanel h3{font-family:var(--tit);font-size:1.22rem;font-weight:800;color:var(--tinta)}
.cotpanel header p{font-size:.8rem;color:var(--gris2);margin-top:3px}
.cotpanel .x{background:#fff;border:1px solid var(--linea);color:var(--tinta);width:34px;height:34px;
  border-radius:9px;cursor:pointer;flex:0 0 auto;transition:.18s}
.cotpanel .x:hover{background:var(--tinta);border-color:var(--tinta);color:#fff}

.cotlista{flex:1;overflow-y:auto;padding:16px 24px}
.cotvacio{text-align:center;color:var(--gris2);padding:48px 16px;font-size:.9rem;line-height:1.6}
.cotvacio svg{width:44px;height:44px;opacity:.3;margin:0 auto 14px;color:var(--verde)}

.cotit{display:grid;grid-template-columns:56px 1fr auto;gap:13px;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--linea)}
.cotit .f{width:56px;height:56px;border-radius:9px;overflow:hidden;background:var(--fondo3);border:1px solid var(--linea)}
.cotit .f img{width:100%;height:100%;object-fit:cover}
.cotit .t{font-family:var(--tit);font-weight:700;font-size:.92rem;line-height:1.25;color:var(--tinta)}
.cotit .e{font-size:.76rem;color:var(--gris2);margin-top:2px}
.cotit .p{font-size:.78rem;color:var(--verde-osc);margin-top:2px;font-weight:700}
.cotit .cc{display:flex;align-items:center;gap:6px;margin-top:7px}
.cotit .cc button{width:24px;height:24px;border-radius:6px;border:1px solid var(--linea);
  background:var(--fondo2);color:var(--tinta);cursor:pointer;font-size:.9rem;line-height:1;transition:.15s}
.cotit .cc button:hover{background:var(--verde);border-color:var(--verde);color:#fff}
.cotit .cc input{width:46px;text-align:center;padding:3px 4px;border-radius:6px;
  border:1px solid var(--linea);background:#fff;color:var(--tinta);font-size:.82rem;font-family:inherit}
.cotit .quitar{background:none;border:none;color:var(--gris2);cursor:pointer;font-size:1rem;
  padding:4px 6px;border-radius:6px;transition:.15s;align-self:flex-start}
.cotit .quitar:hover{color:#C0392B;background:#FBEAE7}

.cotpie{border-top:1px solid var(--linea);padding:18px 24px 24px;background:var(--fondo2);
  max-height:62vh;overflow-y:auto}
.cotpie.oculto{display:none}
.cotcampo{margin-bottom:11px}
.cotpanel label{display:block;font-family:var(--tit);font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);margin-bottom:5px}
.cotpanel input,.cotpanel select,.cotpanel textarea{width:100%;padding:10px 12px;border-radius:9px;
  border:1px solid var(--linea);background:#fff;color:var(--tinta);font-family:var(--txt);font-size:.92rem}
.cotpanel input:focus,.cotpanel select:focus,.cotpanel textarea:focus{outline:none;border-color:var(--verde)}
.cotpanel textarea{min-height:66px;resize:vertical}
.cotpar{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cotpanel form .btn{width:100%;justify-content:center;margin-top:6px}
.cotnota{font-size:.75rem;color:var(--gris2);text-align:center;margin-top:10px;line-height:1.5}
.cotnota.err{color:#C0392B;font-weight:600}
.cotnota.ok{color:var(--verde-osc);font-weight:600}
.cottrampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* el bloque de "agregar" que se inyecta en la ficha del producto */
.addcot{margin-top:22px;padding-top:20px;border-top:1px solid var(--linea)}
.addcot .fila{display:grid;grid-template-columns:1fr 108px;gap:10px;align-items:end}
.addcot label{display:block;font-family:var(--tit);font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);margin-bottom:5px}
.addcot select,.addcot input{width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--linea);
  background:#fff;color:var(--tinta);font-family:var(--txt);font-size:.92rem}
.addcot select:focus,.addcot input:focus{outline:none;border-color:var(--verde)}
.addcot .btn{width:100%;justify-content:center;margin-top:11px;
  background:var(--amarillo);border-color:var(--amarillo);color:var(--tinta)}
.addcot .btn:hover{background:var(--naranja);border-color:var(--naranja)}
.addcot .listo{color:var(--verde-osc);font-size:.8rem;text-align:center;margin-top:9px;font-weight:700}

@media(max-width:520px){
  .cotpanel{width:100%}
  .cotpar{grid-template-columns:1fr;gap:0}
  .cotbtn{right:20px;bottom:86px}
}
@media (prefers-reduced-motion: reduce){
  .cotpanel,.cotvelo,.cotbtn{transition:none}
}