/* ==========================================================================
   MOVIL-TECH ROMA — carrito.css
   Carrito lateral con formulario de entrega (recoger en el local o envío).
   ========================================================================== */

:root{ --car-ease:cubic-bezier(.23,1,.32,1); }

/* --------------------------------------------------- botón de agregar ---- */
.prodCard__add{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%;
  margin-top:8px; padding:11px 16px; border-radius:999px; cursor:pointer; border:1px solid var(--azul);
  background:#fff; color:var(--azul); font:inherit; font-size:12px; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase;
  transition:transform 160ms var(--car-ease), background-color .22s ease, color .22s ease, box-shadow .22s ease;
}
.prodCard__add svg{ width:16px; height:16px; }
.prodCard__add:active{ transform:scale(.97); }
.prodCard__add[disabled]{ border-color:var(--linea-2); color:#9AA3B4; cursor:not-allowed; }
@media (hover:hover) and (pointer:fine){
  .prodCard__add:not([disabled]):hover{ background:var(--azul); color:#fff; box-shadow:0 10px 22px rgba(6,99,245,.26); }
}

/* ------------------------------------------------------------- botón fab - */
.carFab{
  position:fixed; right:22px; bottom:96px; z-index:130; width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; border:0;
  background:#fff; color:var(--azul); box-shadow:0 14px 30px rgba(11,42,90,.18);
  transition:transform 170ms var(--car-ease), box-shadow .25s ease, opacity .3s ease;
}
.carFab svg{ width:23px; height:23px; }
.carFab:active{ transform:scale(.95); }
.carFab__n{
  position:absolute; top:-4px; right:-4px; min-width:22px; height:22px; padding:0 5px;
  border-radius:999px; background:var(--azul); color:#fff;
  font-size:11px; font-weight:800; display:grid; place-items:center;
  box-shadow:0 4px 12px rgba(6,99,245,.4);
  transform:scale(0); transition:transform .28s var(--car-ease);
}
.carFab__n.is-on{ transform:scale(1); }
@media (hover:hover) and (pointer:fine){
  .carFab:hover{ transform:translateY(-3px); box-shadow:0 18px 36px rgba(11,42,90,.24); }
}
@media (max-width:640px){ .carFab{ right:14px; bottom:84px; width:50px; height:50px; } }

/* ---------------------------------------------------------------- panel -- */
.carOv{
  position:fixed; inset:0; z-index:400; display:flex; justify-content:flex-end;
  background:rgba(11,20,38,.42); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.carOv.is-on{ opacity:1; pointer-events:auto; }
.carPanel{
  width:min(420px,100%); height:100%; background:#fff; display:flex; flex-direction:column;
  box-shadow:-20px 0 60px rgba(11,42,90,.22);
  transform:translateX(102%); transition:transform .38s var(--car-ease);
}
.carOv.is-on .carPanel{ transform:none; }

.carHead{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:20px 22px 16px; border-bottom:1px solid var(--linea-2);
}
.carHead h3{ margin:0; font-size:16px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--tinta); }
.carHead h3 span{ color:var(--azul); }
.carX{
  border:0; background:#F2F6FD; color:var(--tinta); cursor:pointer; width:34px; height:34px;
  border-radius:50%; font-size:15px; line-height:1;
  transition:transform 160ms var(--car-ease), background-color .2s ease;
}
.carX:active{ transform:scale(.94); }

.carBody{ flex:1; overflow:auto; padding:16px 22px; }
.carVacio{ text-align:center; color:var(--gris); font-size:13px; line-height:1.7; padding:40px 10px; }
.carVacio span{ display:block; font-size:30px; margin-bottom:10px; }

.carItem{
  display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:12px; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--linea-2);
}
.carItem__fig{ width:64px; height:64px; border-radius:12px; overflow:hidden; background:#F1F5FB; }
.carItem__fig img{ width:100%; height:100%; object-fit:cover; display:block; }
.carItem__n{ margin:0 0 3px; font-size:13px; font-weight:800; color:var(--tinta); line-height:1.3; }
.carItem__p{ margin:0; font-size:12px; color:var(--gris); }
.carItem__p b{ color:var(--tinta); }
.carItem__stock{ margin:3px 0 0; font-size:10.5px; color:#1B8A4B; font-weight:700; }
.carItem__stock.is-max{ color:#B4553C; }
.carQty{ display:flex; align-items:center; gap:6px; }
.carQty button{
  width:28px; height:28px; border-radius:9px; border:1px solid var(--linea-2); background:#fff;
  color:var(--tinta); cursor:pointer; font-size:14px; line-height:1;
  transition:transform 150ms var(--car-ease), border-color .2s ease, color .2s ease;
}
.carQty button:active{ transform:scale(.92); }
.carQty button[disabled]{ color:#C3CAD8; cursor:not-allowed; }
.carQty span{ min-width:22px; text-align:center; font-size:13px; font-weight:800; color:var(--tinta); }
.carItem__del{
  border:0; background:none; color:#B4553C; cursor:pointer; font:inherit; font-size:10.5px;
  font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:4px 0; margin-top:4px;
}

.carFoot{ border-top:1px solid var(--linea-2); padding:16px 22px 20px; display:none; }
.carFoot.is-on{ display:block; }
.carTot{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:4px; }
.carTot span:first-child{ font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gris); }
.carTot b{ font-size:20px; color:var(--tinta); }
.carNota{ margin:0 0 12px; font-size:11px; color:var(--gris); line-height:1.5; }
.carBtn{
  display:flex; align-items:center; justify-content:center; gap:9px; width:100%; cursor:pointer;
  border:0; border-radius:999px; padding:14px 18px; font:inherit; font-size:12.5px; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--azul);
  transition:transform 160ms var(--car-ease), box-shadow .22s ease;
}
.carBtn svg{ width:17px; height:17px; }
.carBtn:active{ transform:scale(.98); }
.carBtn--ghost{ background:none; color:var(--gris); margin-top:8px; font-size:11px; }
@media (hover:hover) and (pointer:fine){
  .carBtn:hover{ box-shadow:0 12px 26px rgba(6,99,245,.3); }
  .carBtn--ghost:hover{ color:#B4553C; box-shadow:none; }
}

/* -------------------------------------------------------------- formulario */
.carForm{ display:none; flex-direction:column; gap:12px; padding:18px 22px 24px; overflow:auto; }
.carForm.is-on{ display:flex; }
.carVolver{
  align-self:flex-start; border:0; background:none; cursor:pointer; padding:0;
  font:inherit; font-size:11.5px; font-weight:700; color:var(--azul);
}
.carForm h4{ margin:2px 0 0; font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--tinta); }
.carCampo{ display:flex; flex-direction:column; gap:6px; }
.carCampo > span{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--gris); }
.carCampo input, .carCampo textarea{
  font:inherit; font-size:13.5px; color:var(--tinta); padding:11px 13px; width:100%;
  border:1px solid var(--linea-2); border-radius:10px; background:#fff; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.carCampo textarea{ min-height:70px; resize:vertical; }
.carCampo input:focus, .carCampo textarea:focus{ border-color:#BFD7FA; box-shadow:0 0 0 4px rgba(6,99,245,.10); }
.carOpts{ display:grid; gap:8px; }
.carOpt{
  display:flex; align-items:center; justify-content:flex-start; gap:10px; padding:12px 14px; cursor:pointer;
  border:1px solid var(--linea-2); border-radius:12px; font-size:13px; color:var(--tinta);
  transition:border-color .2s ease, background-color .2s ease;
}
.carOpt input{ accent-color:var(--azul); flex:none; margin:0; }
.carOpt > span{ flex:1 1 auto; text-align:left; }
.carOpt:has(input:checked){ border-color:#BFD7FA; background:#F4F8FF; font-weight:700; }
.carErr{ margin:0; font-size:12.5px; color:#B4453C; display:none; }
.carErr.is-on{ display:block; }

.carToast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,18px); z-index:420;
  background:var(--tinta); color:#fff; font-size:12.5px; font-weight:600;
  padding:11px 18px; border-radius:999px; opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s var(--car-ease);
}
.carToast.is-on{ opacity:1; transform:translate(-50%,0); }

@media (prefers-reduced-motion: reduce){
  .carPanel{ transition:none; }
}