/* ============================================================
   ANTES / DEPOIS — slider de comparação com arraste
   Usado na página de Resultados do site e no Painel Admin
   (mesmo componente nos dois lugares, para o admin conseguir
   ver exatamente como o resultado vai aparecer no site).
   ============================================================ */
.antes-depois-slider{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:10px;
  cursor:ew-resize;
  user-select:none;
  touch-action:pan-y;
  background:#e9e3d6;
}
.antes-depois-slider img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
}
/* imagem de baixo = Depois (ocupa 100%) */
/* imagem de cima = Antes, recortada até a posição da alça */
.antes-depois-slider .ad-antes{
  clip-path:inset(0 50% 0 0);
}
.antes-depois-slider .ad-handle{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:0;
  z-index:3;
  pointer-events:none;
}
.antes-depois-slider .ad-handle::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:2px;
  transform:translateX(-1px);
  background:#fff;
  box-shadow:0 0 8px rgba(0,0,0,.35);
}
.antes-depois-slider .ad-handle-grip{
  position:absolute;
  top:50%;
  left:0;
  width:36px;
  height:36px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.3);
  display:flex;
  align-items:center;
  justify-content:center;
}
.antes-depois-slider .ad-handle-grip::after{
  content:"↔";
  font-size:15px;
  color:#26312d;
}
.antes-depois-slider .ad-tag{
  position:absolute;
  top:10px;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(38,49,45,.6);
  padding:4px 10px;
  border-radius:999px;
  z-index:2;
  pointer-events:none;
}
.antes-depois-slider .ad-tag-antes{left:10px}
.antes-depois-slider .ad-tag-depois{right:10px}

/* variante compacta — usada em tabelas/listas do painel admin */
.antes-depois-slider--mini{border-radius:6px}
.antes-depois-slider--mini .ad-tag{display:none}
.antes-depois-slider--mini .ad-handle-grip{width:18px;height:18px}
.antes-depois-slider--mini .ad-handle-grip::after{font-size:9px}

/* variante proporcional — usada no acompanhamento fotográfico do
   Prontuário. Em vez de recortar em quadrado (cover), preserva a
   proporção real da foto enviada (contain), sem cortes laterais. */
.antes-depois-slider--proporcional{aspect-ratio:auto;background:#e9e3d6}
.antes-depois-slider--proporcional img{object-fit:contain}