/* ============================================================
   BIONARA — polish.css
   Refinamiento de movimiento (estilo Emil Kowalski):
   · Toasts apilados tipo Sonner
   · Carrito tipo Vaul (bottom-sheet con arrastre) en móvil
   · Easing/timing más finos
   ============================================================ */

:root{
  --ease-out:cubic-bezier(.22,1,.36,1);      /* salidas suaves */
  --ease-spring:cubic-bezier(.34,1.4,.5,1);  /* rebote sutil */
  --t-fast:.18s; --t-base:.28s; --t-slow:.42s;
}

/* ---------- TOASTS estilo Sonner ---------- */
.toast-wrap{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:130;width:360px;max-width:calc(100vw - 32px);height:0;
  display:block;pointer-events:none;
}
.toast{
  position:absolute;left:0;right:0;bottom:0;margin:0 auto;width:100%;
  display:flex;align-items:center;gap:11px;
  background:#fff;color:var(--ink);
  padding:15px 18px;border-radius:16px;border:1px solid var(--line);
  box-shadow:0 8px 28px rgba(16,40,28,.14), 0 2px 6px rgba(16,40,28,.06);
  font-family:var(--font-body);font-weight:600;font-size:.94rem;
  transform:translateY(120%) scale(1);opacity:0;pointer-events:auto;
  transition:transform var(--t-slow) var(--ease-out), opacity var(--t-base) var(--ease-out);
  will-change:transform,opacity;
}
/* apilado: cada toast más viejo sube un poco y se encoge */
.toast.show{
  opacity:1;
  transform:translateY(calc(var(--d,0) * -14px)) scale(calc(1 - var(--d,0) * .055));
}
.toast.show:nth-last-child(n+4){opacity:0;}        /* solo ~3 visibles */
.toast.leave{opacity:0;transform:translateY(120%) scale(.96);}
.toast .t-ic{
  width:30px;height:30px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;
  background:#eaf7ef;color:#1faf54;
}
.toast .t-ic svg{width:17px;height:17px;}
.toast > span:last-child{color:var(--green-900);}

@media (max-width:680px){
  .toast-wrap{bottom:auto;top:16px;}
  .toast{transform:translateY(-140%) scale(1);}
  .toast.show{transform:translateY(calc(var(--d,0) * 14px)) scale(calc(1 - var(--d,0) * .055));}
  .toast.leave{transform:translateY(-140%) scale(.96);}
}

/* ---------- CARRITO tipo Vaul (bottom-sheet en móvil) ---------- */
@media (max-width:680px){
  .drawer{
    top:auto;bottom:0;left:0;right:0;height:auto;width:100%;max-width:100%;max-height:92vh;
    border-radius:22px 22px 0 0;
    transform:translateY(100%);
    transition:transform var(--t-slow) var(--ease-out);
    box-shadow:0 -16px 48px rgba(16,40,28,.22);
    display:flex;flex-direction:column;
    touch-action:none;
  }
  .drawer.open{transform:translateY(0);}
  .drawer.dragging{transition:none;}
  /* manija de arrastre */
  .drawer .drag-handle{
    display:block;width:42px;height:5px;border-radius:3px;background:var(--line);
    margin:10px auto 2px;flex-shrink:0;
  }
  .drawer-head{border-radius:22px 22px 0 0;padding-top:8px;}
  .drawer-body{max-height:48vh;}
  /* el fondo se “encoge” como en Vaul */
  body.sheet-open{overflow:hidden;}
  .overlay{transition:opacity var(--t-base) var(--ease-out);}
}
/* en desktop no se ve la manija */
.drawer .drag-handle{display:none;}

/* ---------- micro-refinamientos de timing ---------- */
.btn{transition:transform var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease-out), background var(--t-fast) ease;}
.card{transition:transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out), border-color var(--t-base) ease;}
.add,.icon-btn,.fav{transition:transform var(--t-base) var(--ease-spring), background var(--t-fast) ease, color var(--t-fast) ease, box-shadow var(--t-base) var(--ease-out);}
.chip{transition:transform var(--t-base) var(--ease-spring), background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;}

/* foco accesible y elegante */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(52,163,102,.35);border-radius:10px;
}

@media (prefers-reduced-motion:reduce){
  .toast,.drawer{transition:opacity .2s ease !important;}
  .toast.show{transform:none !important;}
}