/* ════════════════════════════════════════════════════════════════════
   PDV PLUS — 3 melhorias
   ════════════════════════════════════════════════════════════════════ */

/* ─── 1. Hero compacto no mobile ────────────────────────────── */
@media (max-width:768px){
  .pdv-hero.cp-pdv-hero-compact{
    padding:10px 14px !important;
    margin-bottom:10px !important;
    border-radius:14px !important;
  }

  /* Esconde decorações pesadas no mobile */
  .pdv-hero.cp-pdv-hero-compact::before,
  .pdv-hero.cp-pdv-hero-compact::after{
    display:none !important;
  }

  /* Grid em coluna única, mais compacto */
  .pdv-hero.cp-pdv-hero-compact .pdv-hero-grid{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  /* Título menor */
  .pdv-hero.cp-pdv-hero-compact .pdv-hero-title{
    font-size:18px !important;
    margin:0 !important;
  }
  .pdv-hero.cp-pdv-hero-compact .pdv-hero-sub{
    font-size:11px !important;
    margin-top:2px !important;
  }

  /* KPI compacto - inline com header */
  .pdv-hero.cp-pdv-hero-compact .pdv-hero-kpi{
    padding:8px 12px !important;
    text-align:left !important;
  }
  .pdv-hero.cp-pdv-hero-compact .pdv-hero-kpi-val{
    font-size:18px !important;
  }
  .pdv-hero.cp-pdv-hero-compact .pdv-hero-kpi-lb{
    font-size:10px !important;
  }

  /* Esconde o relógio no mobile (não é essencial) */
  .pdv-hero.cp-pdv-hero-compact .pdv-hero-time,
  .pdv-hero.cp-pdv-hero-compact .pdv-hero-date{
    display:none !important;
  }

  /* Botões de ação ficam menores e enxutos */
  .pdv-hero.cp-pdv-hero-compact .pdv-hero-actions{
    gap:5px !important;
    flex-wrap:wrap !important;
    margin-top:0 !important;
  }
  .pdv-hero.cp-pdv-hero-compact .pdv-hero-btn{
    font-size:11px !important;
    padding:6px 10px !important;
    min-height:30px !important;
  }

  /* Esconde botões secundários no mobile (Nova Janela, Nova Aba, Tela Cheia) */
  .pdv-hero.cp-pdv-hero-compact #pdv-btn-nova-janela,
  .pdv-hero.cp-pdv-hero-compact .pdv-hero-btn[onclick*="pdvAbrirNovaAba"],
  .pdv-hero.cp-pdv-hero-compact #pdv-btn-fs{
    display:none !important;
  }
}

/* ─── 2. Top mais vendidos ──────────────────────────────────── */
.cp-pdv-top-vendidos{
  margin-bottom:10px;
  padding:10px 12px;
  background:linear-gradient(90deg, rgba(245,158,11,.08), rgba(244,63,94,.04));
  border:1px solid rgba(245,158,11,.2);
  border-radius:10px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.cp-pdv-top-label{
  font-family:var(--mo);
  font-size:10.5px;
  color:#f59e0b;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:700;
  white-space:nowrap;
}

.cp-pdv-top-chips{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  flex:1;
}

.cp-pdv-top-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 10px 5px 6px;
  background:rgba(245,158,11,.12);
  border:1px solid rgba(245,158,11,.3);
  border-radius:7px;
  cursor:pointer;
  transition:all .15s;
  font-family:var(--fn);
  font-size:11.5px;
  color:var(--tx);
  font-weight:600;
}

.cp-pdv-top-chip:hover{
  background:rgba(245,158,11,.2);
  border-color:rgba(245,158,11,.5);
  transform:translateY(-1px);
}

.cp-pdv-top-chip:active{
  transform:scale(.97);
}

.cp-pdv-top-rank{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  background:#f59e0b;
  color:#fff;
  border-radius:5px;
  font-family:var(--mo);
  font-size:10px;
  font-weight:700;
  flex-shrink:0;
}

.cp-pdv-top-nome{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:140px;
}

.cp-pdv-top-qtd{
  font-family:var(--mo);
  font-size:10px;
  color:var(--t3);
  font-weight:700;
}

[data-theme="light"] .cp-pdv-top-vendidos{
  background:linear-gradient(90deg, rgba(245,158,11,.05), rgba(244,63,94,.03));
}

@media (max-width:768px){
  .cp-pdv-top-vendidos{
    padding:8px 10px;
    gap:7px;
  }
  .cp-pdv-top-label{
    font-size:9.5px;
  }
  .cp-pdv-top-chip{
    font-size:11px;
    padding:4px 8px 4px 5px;
  }
  .cp-pdv-top-nome{
    max-width:90px;
  }
}

/* ─── 3. Comparativo vs ontem no KPI hero ───────────────────── */
.cp-pdv-comp-ontem{
  display:inline-block;
  margin-top:5px;
  padding:2px 8px;
  border-radius:6px;
  font-family:var(--mo);
  font-size:10px;
  font-weight:700;
  letter-spacing:.02em;
}

.cp-pdv-comp-up{
  background:rgba(16,185,129,.25);
  color:#86efac;
}

.cp-pdv-comp-down{
  background:rgba(244,63,94,.25);
  color:#fca5a5;
}

/* KPI clicável: hover suave */
.pdv-hero-kpi[data-cp-clicavel="1"]:hover{
  background:rgba(255,255,255,.08);
  transform:scale(1.02);
  transition:all .15s;
}

/* ═══════════════════════════════════════════════════════════════
   MELHORIA 4 — Catálogo colapsável (recolhido por padrão)
   ═══════════════════════════════════════════════════════════════ */

/* Animação suave da seta */
.cp-pdv-cat-seta{
  font-size:11px;
  display:inline-block;
  transition:transform .2s ease;
  margin-right:6px;
  vertical-align:middle;
  color:var(--t2);
}

/* Hover no título do catálogo */
.pdv-catalogo-tt:hover .cp-pdv-cat-seta{
  color:var(--ac);
}

/* ─── Estado: RECOLHIDO ─── */
/* Esconde a grade de produtos quando recolhido */
.pdv-catalogo-box.cp-pdv-cat-recolhido .pdv-grid{
  display:none;
}

/* Esconde o "mais vendidos" quando recolhido (faz parte do catálogo) */
.pdv-catalogo-box.cp-pdv-cat-recolhido .cp-pdv-top-vendidos{
  display:none;
}

/* Quando recolhido, deixa o catálogo box compacto */
.pdv-catalogo-box.cp-pdv-cat-recolhido{
  max-height:none !important;
  min-height:auto !important;
}

/* ─── Estado: EXPANDIDO ─── */
/* Quando expandido no mobile, limita altura com scroll interno */
@media (max-width:768px){
  .pdv-catalogo-box:not(.cp-pdv-cat-recolhido){
    max-height:65vh;
    display:flex;
    flex-direction:column;
  }
  .pdv-catalogo-box:not(.cp-pdv-cat-recolhido) .pdv-grid{
    flex:1;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    max-height:none !important;
  }
}

/* No desktop, mantém comportamento original quando expandido */
@media (min-width:769px){
  .pdv-catalogo-box:not(.cp-pdv-cat-recolhido) .pdv-grid{
    max-height:620px;
    overflow-y:auto;
  }
}

/* ─── FIX: Cards com "a partir de" cortavam o valor no desktop ─── */
/* O elemento .pdv-card-preco contém: <span>a partir de</span><br>R$ X,XX
   Sem ajuste, o valor R$ 150,00 fica cortado em cards estreitos. */
.pdv-card-preco{
  line-height:1.25 !important;
  white-space:normal !important;
  word-break:keep-all !important;
  overflow:visible !important;
  text-overflow:initial !important;
  padding:2px 0 !important;
}

/* Texto "a partir de" um pouco menor pra dar mais espaço pro valor */
.pdv-card-preco span{
  font-size:9.5px !important;
  letter-spacing:0 !important;
  white-space:nowrap;
  display:block;
  margin-bottom:1px;
}

/* Em cards muito estreitos (quando minmax 130px atinge limite),
   o valor pode ficar grande demais. Reduz proporcionalmente. */
@media (min-width:769px){
  .pdv-card-preco{
    font-size:13px !important;
    letter-spacing:-0.4px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   FIX RESPONSIVO MOBILE — PDV completo
   Diagnóstico: containers estavam estourando a largura da viewport
   por causa de min-width em search-box + flex-wrap mal configurado
   ═══════════════════════════════════════════════════════════════ */

/* SOLUÇÃO DE RAIZ: impede scroll horizontal no PDV em qualquer tela.
   Aplicado direto no #view-pdv quando ativo - não causa side-effects em outras abas. */
#view-pdv.active{
  overflow-x:hidden !important;
  max-width:100% !important;
}
/* Containers diretos que não podem estourar */
#view-pdv.active > *,
#view-pdv.active .pdv-container,
#view-pdv.active .pdv-main,
#view-pdv.active .pdv-sidebar,
#view-pdv.active .pdv-cart-card,
#view-pdv.active .pdv-cliente-card,
#view-pdv.active .pdv-catalogo-box,
#view-pdv.active #pdv-cli-360,
#view-pdv.active .pdv-360-sec,
#view-pdv.active .pdv-360-item,
#view-pdv.active .pdv-cart-itens,
#view-pdv.active .pdv-total-box{
  max-width:100% !important;
  box-sizing:border-box !important;
}

@media (max-width:640px){

  /* ─── 0. Garantia geral: nada estoura a viewport ─── */
  #view-pdv,
  #view-pdv .pdv-container,
  #view-pdv .pdv-main,
  #view-pdv .pdv-sidebar,
  #view-pdv .pdv-catalogo-box,
  #view-pdv .pdv-cliente-card,
  #view-pdv .pdv-carrinho-card,
  #view-pdv .pdv-cart-card,
  #view-pdv .pdv-total-box,
  #view-pdv #pdv-cli-360,
  #view-pdv .pdv-360-sec,
  #view-pdv .pdv-360-item{
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* Sidebar: NÃO usa sticky no mobile (causa overflow estranho) */
  #view-pdv .pdv-sidebar{
    position:static !important;
    max-height:none !important;
    width:100% !important;
  }

  /* Overflow hidden APENAS nos containers de grid (catálogo/carrinho) - 
     NÃO no pdv-cliente-card pq esconderia o painel 360° de pendências */
  #view-pdv .pdv-catalogo-box,
  #view-pdv .pdv-carrinho-card{
    overflow:hidden !important;
  }

  /* Painel 360° não pode estourar */
  #view-pdv #pdv-cli-360{
    width:100% !important;
    overflow:hidden !important;
  }
  #view-pdv .pdv-360-sec{
    overflow:hidden !important;
  }

  /* Catálogo box: remove min-height quando o conteúdo é pouco */
  #view-pdv .pdv-catalogo-box{
    min-height:auto !important;
    padding:12px !important;
  }

  /* ─── 1. Header do catálogo: empilha em vez de estourar ─── */
  #view-pdv .pdv-catalogo-hd{
    flex-wrap:wrap !important;
    gap:8px !important;
  }
  /* Título com seta ocupa 100% da primeira linha */
  #view-pdv .pdv-catalogo-tt{
    width:100% !important;
    flex:1 1 100% !important;
    font-size:15px !important;
  }
  /* Busca + Avulso na segunda linha, dividindo espaço */
  #view-pdv .pdv-search-box{
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:none !important;
  }
  #view-pdv .pdv-search-box input{
    font-size:13px !important;
    padding:9px 12px 9px 34px !important;
  }
  /* Botão "+ Avulso" do header (não confundir com Cliente Avulso) */
  #view-pdv .pdv-catalogo-hd > .pdv-cli-mini-btn{
    flex-shrink:0 !important;
    padding:9px 12px !important;
  }

  /* ─── 2. Card cliente: nome longo trunca, info quebra ─── */
  #pdv-cli-selecionado{
    flex-wrap:nowrap !important;
    gap:8px !important;
    padding:8px !important;
    max-width:100% !important;
    overflow:hidden !important;
  }
  #pdv-cli-selecionado > div:nth-child(2){
    flex:1 1 0 !important;
    min-width:0 !important;
    overflow:hidden !important;
  }
  #pdv-cli-selecionado > div:nth-child(2) > div:first-child{
    font-size:12px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  #pdv-cli-selecionado > div:nth-child(2) > div:last-child{
    font-size:10px !important;
    line-height:1.3 !important;
    white-space:normal !important;
    word-break:break-word !important;
    overflow:hidden !important;
  }
  #pdv-cli-selecionado .pdv-cli-avatar{
    width:32px !important;
    height:32px !important;
    font-size:13px !important;
    flex-shrink:0 !important;
  }
  #pdv-cli-selecionado .pdv-cli-mini-btn{
    flex-shrink:0 !important;
    padding:4px 8px !important;
  }

  /* Esconde o (da base) / (sem vínculo) no mobile - economiza espaço */
  #pdv-cli-extra{
    display:none !important;
  }

  /* ─── 3. Bloco verde Total ─── */
  .pdv-total-box{
    padding:12px !important;
    margin:8px 0 0 0 !important;
    box-sizing:border-box !important;
    width:auto !important;
    overflow:hidden !important;
  }
  .pdv-total-box::before{
    display:none !important;
  }

  /* Container do carrinho: padding adequado pra não cortar conteúdo interno */
  .pdv-cart-card{
    padding:12px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    max-width:100% !important;
    width:100% !important;
  }

  /* Linhas (subtotal, desconto, acréscimo) */
  .pdv-totais-linhas{
    font-size:12px !important;
    margin-bottom:8px !important;
    padding-bottom:8px !important;
  }
  .pdv-totais-linhas > div{
    gap:8px !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
  }
  /* Inputs de desconto/acréscimo: tamanho proporcional */
  .pdv-totais-linhas input{
    width:60px !important;
    font-size:11px !important;
    padding:3px 5px !important;
    flex-shrink:0;
  }
  .pdv-totais-linhas select{
    font-size:10px !important;
    padding:2px 4px !important;
    flex-shrink:0;
  }

  /* TOTAL grande no mobile: EMPILHADO (label em cima, valor embaixo) 
     Garante que o valor nunca corte */
  .pdv-total-grande{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:2px !important;
  }
  .pdv-total-lb{
    font-size:10px !important;
    letter-spacing:1.5px !important;
    opacity:.85;
  }
  .pdv-total-vl{
    font-size:28px !important;
    letter-spacing:-0.5px !important;
    text-align:left !important;
    width:100% !important;
    overflow:visible !important;
    white-space:nowrap !important;
    text-shadow:none !important;
  }

  /* ─── 4. Botão Finalizar Pagamento ─── */
  .pdv-btn-pagar{
    padding:14px !important;
    font-size:14px !important;
    letter-spacing:0 !important;
    margin-top:10px !important;
    /* margem inferior pra não ficar coberto pelo FAB de acessibilidade */
    margin-bottom:60px !important;
    white-space:normal !important;
    line-height:1.2 !important;
    width:100% !important;
    box-sizing:border-box !important;
  }

  /* ─── 5. Carrinho: garantir que não estoure ─── */
  .pdv-carrinho-card,
  .pdv-cart-card,
  #pdv-carrinho-itens,
  .pdv-cart-itens,
  .pdv-cart-item{
    max-width:100% !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }
  /* Nome do item com ellipsis no mobile */
  .pdv-cart-item-nm{
    font-size:11px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    max-width:100% !important;
  }
  /* Item: layout flex que não estoura */
  .pdv-cart-item{
    padding:10px !important;
    gap:8px !important;
  }
  .pdv-cart-item-ic{
    font-size:20px !important;
    flex-shrink:0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PAINEL 360° (contratos pendentes/fiados/últimas compras)
   Pequenos ajustes mobile pra botão "💰 Pagar" caber
   ═══════════════════════════════════════════════════════════════ */

@media (max-width:640px){
  .pdv-360-sec{
    padding:8px 10px !important;
  }
  /* Item do 360 no mobile: 2 linhas claras
     Linha 1: badge "Pendente" + nome do produto (ellipsis se longo)
     Linha 2: valor R$ X,XX | botão [✅ No carrinho] */
  .pdv-360-item{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px !important;
    padding:10px 8px !important;
    align-items:center !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  /* Linha 1: nome ocupa 100% */
  .pdv-360-item-nome{
    flex:0 0 100% !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    font-size:12px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    box-sizing:border-box !important;
  }
  /* Linha 2: valor cresce, botão fixo */
  .pdv-360-item-val{
    font-size:13px !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    text-align:left !important;
    overflow:hidden !important;
  }
  .pdv-360-btn{
    font-size:11px !important;
    padding:6px 10px !important;
    flex:0 0 auto !important;
    flex-shrink:0 !important;
    white-space:nowrap !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PAINEL 360° MELHORADO (busca por código + CNPJ + nome)
   ═══════════════════════════════════════════════════════════════ */

.cp-pdv-360-empty{
  text-align:center;
  padding:20px 16px;
  background:rgba(167,139,250,.05);
  border:1px dashed rgba(167,139,250,.25);
  border-radius:12px;
  color:var(--t2);
}
.cp-pdv-360-empty-ic{
  font-size:32px;
  margin-bottom:8px;
  opacity:.7;
}
.cp-pdv-360-empty-tt{
  font-family:var(--dp);
  font-weight:700;
  font-size:14px;
  color:var(--tx);
  margin-bottom:4px;
}
.cp-pdv-360-empty-sb{
  font-size:11.5px;
  color:var(--t3);
  line-height:1.4;
}

/* Seções de pendentes/pagos */
.cp-pdv-360-sec{
  background:var(--s2);
  border:1px solid var(--bd);
  border-radius:12px;
  padding:10px 12px;
  margin-bottom:8px;
}

.cp-pdv-360-pendente{
  background:linear-gradient(135deg, rgba(245,158,11,.08), rgba(244,63,94,.04));
  border-color:rgba(245,158,11,.35);
}

.cp-pdv-360-tt{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:var(--dp);
  font-weight:700;
  font-size:12px;
  color:var(--tx);
  margin-bottom:8px;
  gap:8px;
}
.cp-pdv-360-tot{
  font-family:ui-monospace, Menlo, monospace;
  color:#f59e0b;
  font-weight:800;
  font-size:13px;
}

.cp-pdv-360-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  background:var(--sf);
  border:1px solid var(--bd);
  border-radius:8px;
  margin-bottom:6px;
}
.cp-pdv-360-item:last-child{
  margin-bottom:0;
}

.cp-pdv-360-item-info{
  flex:1;
  min-width:0;
  overflow:hidden;
}

.cp-pdv-360-item-prod{
  font-family:var(--fn);
  font-weight:600;
  font-size:12px;
  color:var(--tx);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.cp-pdv-360-item-val{
  font-family:ui-monospace, Menlo, monospace;
  font-weight:700;
  font-size:13px;
  color:var(--gn);
  margin-top:1px;
}

.cp-pdv-360-btn-pagar{
  background:var(--gn);
  color:#fff;
  border:none;
  padding:8px 14px;
  border-radius:8px;
  font-family:var(--fn);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  flex-shrink:0;
  transition:all .15s;
  white-space:nowrap;
}
.cp-pdv-360-btn-pagar:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(16,185,129,.3);
}
.cp-pdv-360-btn-pagar:active{
  transform:scale(.97);
}

.cp-pdv-360-mais{
  text-align:center;
  font-size:10.5px;
  color:var(--t3);
  margin-top:6px;
  font-style:italic;
}

@media (max-width:640px){
  .cp-pdv-360-item{
    flex-wrap:wrap;
    gap:6px;
  }
  .cp-pdv-360-item-info{
    flex:1 1 100%;
  }
  .cp-pdv-360-btn-pagar{
    width:100%;
    padding:10px;
  }
  .cp-pdv-360-empty{
    padding:16px 12px;
  }
  .cp-pdv-360-empty-ic{
    font-size:28px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Painel 360° + Carrinho: layout consistente em qualquer tela
   Quando cliente tem muitos contratos, painel não pode espremer
   o carrinho a ponto de ficar ilegível.
   ═══════════════════════════════════════════════════════════════ */

/* Painel 360 com altura limitada e scroll interno */
#pdv-cli-360{
  max-height:340px;
  overflow-y:auto;
  overflow-x:hidden;
}
/* Scrollbar discreta */
#pdv-cli-360::-webkit-scrollbar{
  width:6px;
}
#pdv-cli-360::-webkit-scrollbar-thumb{
  background:rgba(124,58,237,.3);
  border-radius:3px;
}
#pdv-cli-360::-webkit-scrollbar-track{
  background:transparent;
}

/* Carrinho com altura mínima garantida pra não espremer */
.pdv-cart-itens{
  min-height:140px;  /* garante espaço pra ver pelo menos 2-3 itens */
}

/* No mobile, painel 360 pode ser ainda menor pra dar espaço pro resto */
@media (max-width:640px){
  #pdv-cli-360{
    max-height:280px;
  }
  .pdv-cart-itens{
    min-height:100px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FIX: Itens do carrinho no mobile não estouravam — controles 
   (qtd) iam pra fora da tela. Solução: empilhar título em cima
   e controles+preço embaixo.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width:640px){
  /* Itens do carrinho: empilha título/controles pra evitar overflow */
  .pdv-cart-item{
    grid-template-columns:34px 1fr !important;
    gap:8px !important;
    padding:10px !important;
  }
  .pdv-cart-item-ic{
    grid-row:1 / span 2 !important;
    align-self:start !important;
    padding-top:2px;
  }
  .pdv-cart-item > div:nth-child(2){
    /* container do título + controles */
    min-width:0 !important;
    overflow:hidden !important;
  }
  .pdv-cart-item-nm{
    font-size:13px !important;
    white-space:normal !important;  /* permite quebrar linha */
    word-break:break-word !important;
    line-height:1.25 !important;
    margin-bottom:6px !important;
  }
  .pdv-cart-item-controls{
    grid-column:2 !important;
    flex-wrap:wrap !important;
  }
  .pdv-cart-item-qtd{
    font-size:12px !important;
  }
}