/* ===== EAF MSP1 – Cards (one row, PRO) ===== */
:root{
  --eaf-bg:#fff;
  --eaf-soft:#f7f8fa;
  --eaf-brd:#e5e7eb;
  --eaf-text:#0f172a;
  --eaf-muted:#6b7280;
  --eaf-primary: rgba(40,124,112,1); /* color corporativo botón */
  --eaf-green:#059669;               /* stock */
  --eaf-radius-xl:16px;
  --eaf-radius-lg:12px;
  --eaf-radius-md:10px;
  --eaf-shadow-sm:0 2px 8px rgba(0,0,0,.06);
  --eaf-shadow-md:0 8px 24px rgba(0,0,0,.12);
  --eaf-trans:180ms ease;
  --eaf-fs:clamp(14px,1.5vw,16px);
}

.eaf-msp1{
  margin-top:18px;
  background:var(--eaf-bg);
  border:1px solid var(--eaf-brd);
  border-radius:var(--eaf-radius-xl);
  box-shadow:var(--eaf-shadow-sm);
  overflow:hidden;
  font-size:var(--eaf-fs);
  color:var(--eaf-text);
}
.eaf-msp1__header{
  padding:16px 18px;
  background:var(--eaf-soft);
  border-bottom:1px solid var(--eaf-brd);
}
.eaf-msp1__title{
  margin:0;
  font-weight:800;
  font-size:clamp(18px,1.8vw,20px);
}

/* Fila de cards con scroll horizontal */
.eaf-cards-row{
  display:flex;
  gap:12px;
  overflow:auto;
  padding:12px;
  scroll-snap-type:x mandatory;
}
.eaf-cards-row > .eaf-card{ scroll-snap-align:start; }

/* Scrollbar (WebKit) */
.eaf-cards-row::-webkit-scrollbar{ height:10px; }
.eaf-cards-row::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:999px; }
.eaf-cards-row::-webkit-scrollbar-track{ background:transparent; }

/* Card */
.eaf-card{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-width:320px;
  background:#fff;
  border:1px solid var(--eaf-brd);
  border-radius:14px;
  padding:12px 14px;
  box-shadow:var(--eaf-shadow-sm);
  transition:transform var(--eaf-trans), box-shadow var(--eaf-trans);
}
.eaf-card:hover{ transform:translateY(-1px); box-shadow:var(--eaf-shadow-md); }

/* Lado izquierdo: nombre + stock verde */
.eaf-card__left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.eaf-card__name{
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:42vw;
}
.eaf-card__stock{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(5,150,105,.10);
  color:var(--eaf-green);
  font-weight:800;
  border:1px solid rgba(5,150,105,.25);
}

/* Lado derecho: qty + botón */
.eaf-card__right{ display:flex; align-items:center; gap:10px; }
.eaf-card__form{ display:flex; align-items:center; gap:10px; }

/* Stepper + input */
.eaf-qty{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#f1f5f9;
  border:1px solid var(--eaf-brd);
  border-radius:12px;
  padding:4px;
}
.eaf-step{
  width:28px; height:28px; line-height:26px; text-align:center;
  border-radius:10px; border:1px solid var(--eaf-brd);
  background:#fff; cursor:pointer;
  transition:transform var(--eaf-trans), box-shadow var(--eaf-trans);
}
.eaf-step:hover{ transform:translateY(-1px); box-shadow:var(--eaf-shadow-sm); }

.eaf-input{
  width:64px; height:32px; padding:0 8px;
  border-radius:10px; border:2px solid #cbd5e1; background:#fff;
  font-weight:800; text-align:center;
  transition:border-color var(--eaf-trans), box-shadow var(--eaf-trans);
}
.eaf-input:hover{ border-color:#94a3b8; }
.eaf-input:focus{ outline:none; border-color:#0ea5e9; box-shadow:0 0 0 3px rgba(14,165,233,.25); }
.eaf-input.eaf--error{ border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.20); }

/* Botón Añadir */
.eaf-btn.eaf-btn--add{
  height:36px; line-height:34px;
  border-radius:10px !important;
  padding:0 14px !important;
  background:var(--eaf-primary) !important;
  color:#fff !important;
  border:1px solid var(--eaf-primary) !important;
  box-shadow:var(--eaf-shadow-sm);
  font-weight:800;
}
.eaf-btn.eaf-btn--add:hover{ transform:translateY(-1px); box-shadow:var(--eaf-shadow-md); }
.eaf-btn[disabled], .eaf-step[disabled]{ opacity:.5; cursor:not-allowed; }

/* Total */
.eaf-total{
  display:flex; gap:8px; align-items:center;
  margin:4px 14px 12px;
  color:var(--eaf-muted);
}
.eaf-total .eaf-msp1-total{ font-weight:900; color:var(--eaf-primary); }

/* Responsive */
@media (max-width:480px){
  .eaf-card{ min-width:280px; }
  .eaf-input{ width:56px; height:28px; }
}

/* Ajuste spinners WebKit */
.eaf-input::-webkit-outer-spin-button,
.eaf-input::-webkit-inner-spin-button{
  -webkit-appearance: inner-spin-button;
  margin:0; height:24px;
}
/* ===== EAF MSP1 – Cards (one row, PRO) ===== */
:root{
  --eaf-bg:#fff;
  --eaf-soft:#f7f8fa;
  --eaf-brd:#e5e7eb;
  --eaf-text:#0f172a;
  --eaf-muted:#6b7280;
  --eaf-primary: rgba(40,124,112,1);
  --eaf-green:#059669;
  --eaf-radius-xl:16px;
  --eaf-radius-lg:12px;
  --eaf-radius-md:10px;
  --eaf-shadow-sm:0 2px 8px rgba(0,0,0,.06);
  --eaf-shadow-md:0 8px 24px rgba(0,0,0,.12);
  --eaf-trans:180ms ease;
  --eaf-fs:clamp(14px,1.5vw,16px)
}

.eaf-msp1{margin-top:18px;background:var(--eaf-bg);border:1px solid var(--eaf-brd);
  border-radius:var(--eaf-radius-xl);box-shadow:var(--eaf-shadow-sm);overflow:hidden;font-size:var(--eaf-fs);color:var(--eaf-text)}
.eaf-msp1__header{padding:16px 18px;background:var(--eaf-soft);border-bottom:1px solid var(--eaf-brd)}
.eaf-msp1__title{margin:0;font-weight:800;font-size:clamp(18px,1.8vw,20px)}

.eaf-cards-row{display:flex;gap:12px;overflow:auto;padding:12px;scroll-snap-type:x mandatory}
.eaf-cards-row > .eaf-card{scroll-snap-align:start}
.eaf-cards-row::-webkit-scrollbar{height:10px}
.eaf-cards-row::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}
.eaf-cards-row::-webkit-scrollbar-track{background:transparent}

.eaf-card{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-width:320px;background:#fff;border:1px solid var(--eaf-brd);border-radius:14px;padding:12px 14px;
  box-shadow:var(--eaf-shadow-sm);transition:transform var(--eaf-trans), box-shadow var(--eaf-trans)}
.eaf-card:hover{transform:translateY(-1px);box-shadow:var(--eaf-shadow-md)}
.eaf-card.is-full{opacity:.6}

.eaf-card__left{display:flex;align-items:center;gap:10px;min-width:0}
.eaf-card__name{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
.eaf-card__stock{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;
  background:rgba(5,150,105,.10); color:var(--eaf-green); font-weight:800; border:1px solid rgba(5,150,105,.25)}

.eaf-cartpill{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;
  background:#1118270f;color:#111827;font-weight:700;border:1px solid #11182722;font-size:12px}

/* Lado derecho: qty + botón */
.eaf-card__right{display:flex;align-items:center;gap:10px}
.eaf-card__form{display:flex;align-items:center;gap:10px}

.eaf-qty{display:inline-flex;align-items:center;gap:6px;background:#f1f5f9;border:1px solid var(--eaf-brd);
  border-radius:12px;padding:4px}
.eaf-step{width:28px;height:28px;line-height:26px;text-align:center;border-radius:10px;border:1px solid var(--eaf-brd);
  background:#fff;cursor:pointer;transition:transform var(--eaf-trans),box-shadow var(--eaf-trans)}
.eaf-step:hover{transform:translateY(-1px);box-shadow:var(--eaf-shadow-sm)}
.eaf-step[disabled]{opacity:.5;cursor:not-allowed}

.eaf-input{width:64px;height:32px;padding:0 8px;border-radius:10px;border:2px solid #cbd5e1;background:#fff;
  font-weight:800;text-align:center;transition:border-color var(--eaf-trans),box-shadow var(--eaf-trans)}
.eaf-input:hover{border-color:#94a3b8}
.eaf-input:focus{outline:none;border-color:#0ea5e9;box-shadow:0 0 0 3px rgba(14,165,233,.25)}
.eaf-input.eaf--error{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.20)}
.eaf-qty.eaf--error{border-color:#ef4444}

/* Mensaje de error */
.eaf-msg{margin:4px 0 0;font-size:12px;line-height:1.3}
.eaf-msg--error{color:#b91c1c}

/* Botón Añadir */
.eaf-btn.eaf-btn--add{height:36px;line-height:34px;border-radius:10px !important;padding:0 14px !important;
  background:var(--eaf-primary) !important;color:#fff !important;border:1px solid var(--eaf-primary) !important;
  box-shadow:var(--eaf-shadow-sm);font-weight:800}
.eaf-btn.eaf-btn--add:hover{transform:translateY(-1px);box-shadow:var(--eaf-shadow-md)}
.eaf-btn[disabled]{opacity:.5;cursor:not-allowed}

/* Total */
.eaf-total{display:flex;gap:8px;align-items:center;margin:4px 14px 12px;color:var(--eaf-muted)}
.eaf-total .eaf-msp1-total{font-weight:900;color:var(--eaf-primary)}

@media (max-width:480px){
  .eaf-card{min-width:280px}
  .eaf-input{width:56px;height:28px}
}