/* ============================================================
   COMPONENTES — Componentes: mobile, cores, favoritos, animações, utilitários
   Parte do app.css original. A ORDEM dos <link> no index.html
   reproduz a ordem deste arquivo: não reordene, a cascata depende disso.
   ============================================================ */

/* ===== otimizações mobile estilo Shopee ===== */
.scrollbar-hide{ -ms-overflow-style:none; scrollbar-width:none; }
.scrollbar-hide::-webkit-scrollbar{ display:none; }

/* skeleton loading */
.skel-card{ aspect-ratio:0.72; border-radius:.6rem; background:linear-gradient(90deg,#f1f5f9 25%,#e8edf3 50%,#f1f5f9 75%);
  background-size:200% 100%; animation:skel 1.2s ease-in-out infinite; }
@keyframes skel{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* card produto compacto (mobile) */
.produto-card{ border-radius:.6rem; }
.produto-card img{ aspect-ratio:1; }
@media (max-width:640px){
  .produto-card h3{ font-size:.8rem; min-height:2.2rem!important; }
  .produto-card .p-3{ padding:.5rem; }
}

/* drawer de categorias: item */
.drawer-cat-item{ display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left;
  padding:.75rem 1rem; border-radius:.6rem; font-size:.95rem; color:#334155; transition:all .12s; cursor:pointer; }
.drawer-cat-item:hover{ background:#f1f5f9; }
.drawer-cat-item.ativo{ background:color-mix(in srgb, var(--cor) 12%, white); color:var(--cor); font-weight:600; }

/* aceleração de render + fontes mais rápidas */
/* content-visibility foi REMOVIDO: causava recálculo a cada rolagem no mobile.
   No lugar, reservamos o espaço da imagem para o layout não "pular". */

/* ===== variação: bolinha de cor estilo vesti.co ===== */
.mp-cor{ display:flex; flex-direction:column; align-items:center; gap:.35rem; padding:.4rem; border-radius:.6rem;
  border:2px solid transparent; background:none; cursor:pointer; min-width:56px; transition:all .12s; }
.mp-cor-bola{ width:38px; height:38px; border-radius:9999px; border:1px solid rgba(0,0,0,.12); box-shadow:0 1px 3px rgba(0,0,0,.1); }
.mp-cor-nome{ font-size:.72rem; color:#475569; }
.mp-cor.sel{ border-color:var(--cor); }
.mp-cor.sel .mp-cor-nome{ color:var(--cor); font-weight:600; }
.mp-cor.esg{ opacity:.4; cursor:not-allowed; }
.mp-cor.esg .mp-cor-bola{ position:relative; }
.mp-cor.esg .mp-cor-bola::after{ content:''; position:absolute; inset:0; border-radius:9999px;
  background:linear-gradient(to top left, transparent 44%, #ef4444 45%, #ef4444 55%, transparent 56%); }
.mp-cor.esg .mp-cor-nome{ text-decoration:line-through; }

/* opção normal esgotada */
.var-opt.esg{ opacity:.4; text-decoration:line-through; cursor:not-allowed; }

/* dots de navegação de imagem */
.mp-dot{ width:8px; height:8px; border-radius:9999px; background:rgba(255,255,255,.6); border:1px solid rgba(0,0,0,.15); transition:all .15s; }
.mp-dot.sel{ background:#fff; width:22px; }

/* ===== animação dos cards ao rolar (rápida — sem travar a rolagem) ===== */
.card-anim{
  opacity:0; transform:translateY(8px);
  transition:opacity .25s ease-out, transform .25s ease-out;
  will-change:opacity, transform;   /* avisa o navegador para usar a GPU */
}
.card-anim.card-visivel{
  opacity:1; transform:translateY(0);
  will-change:auto;                  /* libera a GPU depois de animar */
}

/* ===== paginação ===== */
.pag-btn{ min-width:36px; height:36px; padding:0 .5rem; border-radius:.6rem; border:1.5px solid #e8ecf1;
  background:#fff; font-size:.85rem; font-weight:600; color:#475569; cursor:pointer; transition:all .15s; }
.pag-btn:hover{ border-color:var(--cor); color:var(--cor); }
.pag-btn.pag-ativo{ background:var(--cor); color:#fff; border-color:var(--cor); }
.pag-btn.pag-off{ opacity:.4; cursor:not-allowed; }

/* ===== botão editar foto no hover ===== */
.fimg .fimg-edit{ position:absolute; bottom:4px; right:4px; opacity:0; transition:opacity .15s;
  background:rgba(255,255,255,.95); border-radius:9999px; width:26px; height:26px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.15); cursor:pointer; }
.fimg:hover .fimg-edit{ opacity:1; }
.fimg.dragging{ opacity:.4; }
.fimg.drag-over{ outline:2px dashed var(--cor); outline-offset:2px; }

/* item de produto arrastável (admin) */
.prod-admin-item.dragging{ opacity:.4; }
.prod-admin-item.drag-over{ outline:2px dashed var(--cor); outline-offset:2px; }
.drag-handle{ cursor:grab; touch-action:none; }
.drag-handle:active{ cursor:grabbing; }

/* swatch com botão de deletar */
.swatch{ position:relative; }
.swatch-del{ position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:9999px;
  background:#ef4444; color:#fff; font-size:10px; line-height:1; display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.25); cursor:pointer; opacity:0; transition:opacity .15s; }
.swatch:hover .swatch-del{ opacity:1; }

/* ===== conta do cliente ===== */
.conta-item{ display:flex; align-items:center; gap:.85rem; width:100%; text-align:left;
  padding:1rem 1.25rem; border-bottom:1px solid #f1f5f9; font-size:.95rem; color:#334155; transition:background .12s; }
.conta-item:hover{ background:#f8fafc; }
.conta-item svg{ width:20px; height:20px; }

/* ===== olhinho de mostrar/esconder senha ===== */
.senha-wrap{ position:relative; }
.senha-wrap input{ padding-right:2.6rem !important; }
.olho-btn{ position:absolute; right:.7rem; top:50%; transform:translateY(-50%);
  color:#94a3b8; cursor:pointer; background:none; border:none; padding:.2rem;
  display:flex; align-items:center; transition:color .15s; }
.olho-btn:hover{ color:#475569; }

/* ===== descrição do produto com "ver mais" ===== */
.desc-colapsada{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.desc-expandida{ display:block; overflow:visible; }

/* ===== coração de favorito ===== */
.fav-btn{ position:absolute; right:6px; bottom:6px; width:30px; height:30px; border-radius:9999px;
  background:rgba(255,255,255,.92); color:#94a3b8; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.12); cursor:pointer; transition:all .18s; z-index:2; }
.fav-btn:hover{ color:#ef4444; transform:scale(1.1); }
.fav-btn.fav-on{ color:#ef4444; }
.fav-btn.fav-on:hover{ transform:scale(1.15); }

/* ===== espessura mais fina nos cards de cliente ===== */
.cli-card{ border:1px solid #f1f5f9; }

/* ===== compacta variações no mobile (para o botão nunca sumir) ===== */
@media (max-width:767px){
  .mp-cor{ min-width:46px; padding:.25rem; gap:.2rem; }
  .mp-cor-bola{ width:30px; height:30px; }
  .mp-cor-nome{ font-size:.65rem; }
  .var-opt{ padding:.4rem .7rem !important; font-size:.8rem !important; }
  #mp-variacoes p{ font-size:.8rem; margin-bottom:.3rem !important; }
  #mp-desc{ font-size:.8rem; }
  /* limita a altura das cores: se tiver muitas, rola só essa área */
  #mp-variacoes .flex-wrap{ max-height:none; }
}



/* respeita quem prefere menos movimento (acessibilidade) */
@media (prefers-reduced-motion: reduce){
  .card-anim{ transition:none; opacity:1; transform:none; }
}


/* ===== conteúdo das listas do painel entra com fade suave =====
   A animação é do CSS (roda na GPU). Como o conteúdo velho é
   limpo na troca de aba, não há "piscada" da tela anterior. */
#admin-prod-lista > *,
#admin-ped-lista > *,
#admin-cat-lista > *,
#admin-cli-lista > *{
  animation: itemEntra .18s ease-out both;
}
@keyframes itemEntra{
  from{ opacity:0; transform:translateY(4px); }
  to  { opacity:1; transform:translateY(0); }
}


/* ===== classes utilitárias com decimal (o compilador do Tailwind não gera) ===== */
.\!py-1\.5{ padding-top:0.375rem !important; padding-bottom:0.375rem !important; }
.-bottom-0\.5{ bottom:-0.125rem; }
.-right-0\.5{ right:-0.125rem; }
.-top-0\.5{ top:-0.125rem; }
.gap-1\.5{ gap:0.375rem; }
.gap-2\.5{ gap:0.625rem; }
.h-1\.5{ height:0.375rem; }
.left-1\.5{ left:0.375rem; }
.mb-0\.5{ margin-bottom:0.125rem; }
.mb-1\.5{ margin-bottom:0.375rem; }
.mt-0\.5{ margin-top:0.125rem; }
.mt-1\.5{ margin-top:0.375rem; }
.p-1\.5{ padding:0.375rem; }
.p-3\.5{ padding:0.875rem; }
.pl-1\.5{ padding-left:0.375rem; }
.px-1\.5{ padding-left:0.375rem; padding-right:0.375rem; }
.px-2\.5{ padding-left:0.625rem; padding-right:0.625rem; }
.py-0\.5{ padding-top:0.125rem; padding-bottom:0.125rem; }
.py-1\.5{ padding-top:0.375rem; padding-bottom:0.375rem; }
.py-2\.5{ padding-top:0.625rem; padding-bottom:0.625rem; }
.py-3\.5{ padding-top:0.875rem; padding-bottom:0.875rem; }
.right-1\.5{ right:0.375rem; }
.top-1\.5{ top:0.375rem; }


/* ===== classes com valores arbitrários (cores e medidas customizadas) ===== */
.bg-\[\#1e2a3a\]{ background-color:#1e2a3a; }
.bg-\[\#3b5b7f\]{ background-color:#3b5b7f; }
.bg-\[\#f7f8fa\]{ background-color:#f7f8fa; }
.from-\[\#eef2f7\]{ --tw-gradient-from:#eef2f7; --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent); }
.h-\[42%\]{ height:42%; }
.h-\[92vh\]{ height:92vh; }
.max-w-\[80vw\]{ max-width:80vw; }
.max-w-\[85vw\]{ max-width:85vw; }
.max-w-\[90vw\]{ max-width:90vw; }
.min-w-\[16px\]{ min-width:16px; }
.text-\[10px\]{ font-size:10px; }
.text-\[11px\]{ font-size:11px; }
.to-\[\#dde5ef\]{ --tw-gradient-to:#dde5ef; }
.z-\[55\]{ z-index:55; }
.z-\[60\]{ z-index:60; }
.z-\[65\]{ z-index:65; }
.z-\[70\]{ z-index:70; }
.z-\[75\]{ z-index:75; }

/* ===== checkboxes do relatório de vendas ===== */
.rel-check{ display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .8rem;
  border:1.5px solid #e8ecf1; border-radius:9999px; font-size:.82rem; color:#475569;
  cursor:pointer; transition:all .15s; user-select:none; }
.rel-check:hover{ border-color:#cbd5e1; }
.rel-check input{ width:15px; height:15px; accent-color:var(--cor); cursor:pointer; }
.rel-check:has(input:checked){ border-color:var(--cor); background:color-mix(in srgb, var(--cor) 8%, white); color:var(--cor); font-weight:600; }

/* ============================================================
   OTIMIZAÇÃO DE ROLAGEM
   O navegador pula o trabalho de desenhar cards fora da tela.
   Isso deixa a rolagem fluida mesmo com dezenas de produtos.
   ============================================================ */
/* content-visibility acelera a rolagem, mas só a partir dos cards mais abaixo:
   os primeiros da tela ficam de fora para não "esticar" no carregamento. */
.produto-card{ contain:layout paint; }
@media (max-width:767px){
  /* aplica o pulo de renderização só nos cards fora da primeira dobra */
  .grade-produtos > .produto-card:nth-child(n+7){ content-visibility:auto; contain-intrinsic-size:auto 260px; }
  .sec-cat-lista > .produto-card:nth-child(n+5){ content-visibility:auto; contain-intrinsic-size:auto 260px; }
}
@media (min-width:768px){
  .grade-produtos > .produto-card:nth-child(n+13){ content-visibility:auto; contain-intrinsic-size:auto 320px; }
}
/* imagens na própria camada, sem tremida */
.produto-card img{ transform:translateZ(0); }

/* animação de entrada mais leve no celular */
@media (max-width:767px){
  .card-anim{ transition:opacity .15s ease-out; transform:none; }
  .card-anim.card-visivel{ transform:none; }
}


/* ============================================================
   CARD "ADICIONADO À SACOLA"
   ============================================================ */
.add-ok-overlay{ position:fixed; inset:0; z-index:70; background:rgba(15,23,42,.5);
  display:flex; align-items:center; justify-content:center; padding:1.25rem; }
.add-ok-overlay.hidden{ display:none; }
.add-ok-card{ position:relative; background:#fff; border-radius:1.25rem; padding:1.75rem 1.5rem 1.5rem;
  width:100%; max-width:22rem; text-align:center; box-shadow:0 20px 50px rgba(15,23,42,.25); }
.add-ok-x{ position:absolute; top:.85rem; right:.85rem; color:#cbd5e1; }
.add-ok-x:hover{ color:#64748b; }
.add-ok-check{ height:4rem; width:4rem; margin:0 auto .9rem; border-radius:9999px;
  background:color-mix(in srgb, var(--cor) 14%, #fff); color:var(--cor);
  display:flex; align-items:center; justify-content:center; }
.add-ok-titulo{ font-family:Sora,sans-serif; font-weight:700; font-size:1.15rem; color:#0f172a; }
.add-ok-sub{ font-size:.85rem; color:#64748b; margin-top:.25rem; min-height:1.1rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.add-ok-botoes{ display:flex; flex-direction:column; gap:.6rem; margin-top:1.25rem; }
.add-ok-btn{ display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem; border-radius:.7rem; font-weight:700; font-size:.9rem; transition:filter .15s, background .15s; }
.add-ok-btn.pri{ background:var(--cor); color:#fff; }
.add-ok-btn.pri:hover{ filter:brightness(1.08); }
.add-ok-btn.sec{ background:#fff; color:#334155; border:1.5px solid #e2e8f0; }
.add-ok-btn.sec:hover{ background:#f8fafc; }

/* animação de entrada (salta com leve overshoot) */
@keyframes add-ok-entra{
  0%{ opacity:0; transform:scale(.9) translateY(10px); }
  60%{ opacity:1; transform:scale(1.02) translateY(0); }
  100%{ transform:scale(1) translateY(0); }
}
.add-ok-card.entra{ animation:add-ok-entra .32s cubic-bezier(.34,1.56,.64,1) both; }
/* o check pulsa uma vez */
@keyframes add-ok-check{ 0%{ transform:scale(0); } 60%{ transform:scale(1.15); } 100%{ transform:scale(1); } }
.add-ok-card.entra .add-ok-check svg{ animation:add-ok-check .4s ease-out .1s both; }
@media (prefers-reduced-motion:reduce){ .add-ok-card.entra, .add-ok-card.entra .add-ok-check svg{ animation:none; } }