/* Renda-se — Painel do catálogo · Ciberic Lab */

/* Ponto discreto no rodapé */
.ponto-painel{
  display:inline-block;margin-left:.5rem;font-size:1.1rem;line-height:1;
  color:var(--renda-2);opacity:.45;transition:opacity .2s;padding:.2rem .5rem;
}
.ponto-painel:hover,.ponto-painel:focus-visible{opacity:1;color:var(--vermelho-vivo)}

/* Caixas do painel (reaproveitam .modal / .modal-caixa do checkout) */
.painel-caixa{position:relative;border-radius:22px}
.painel-fechar{position:absolute;top:1rem;right:1rem}
.painel-simbolo{width:44px;height:66px;fill:var(--renda);margin:0 auto 1rem;display:block}
.painel-simbolo-sm{width:30px;height:44px;fill:var(--renda)}

.painel-caixa-login{max-width:400px;text-align:center}
.painel-caixa-login h2{margin-bottom:.3rem}
.painel-caixa-login > p{color:var(--renda-2);font-size:.9rem}

.painel-caixa-catalogo{max-width:960px;width:100%}
.painel-abas{display:flex;gap:.4rem;border-bottom:1px solid var(--linha);margin-bottom:1.2rem}
.painel-aba{padding:.6rem 1rem;font-size:.85rem;color:var(--renda-2);border-bottom:2px solid transparent;margin-bottom:-1px}
.painel-aba.ativa{color:var(--renda);border-bottom-color:var(--vermelho)}
.painel-aba-conteudo[hidden]{display:none}
.painel-cabeca{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.painel-cabeca > div:first-child{display:flex;align-items:center;gap:.7rem}
.painel-cabeca h2{margin:0}
.painel-cabeca-acoes{display:flex;gap:1.2rem;font-size:.85rem}
.painel-lista-topo{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.2rem;flex-wrap:wrap}
.painel-contador{color:var(--renda-2);font-size:.88rem;margin:0}
.painel-carregando{color:var(--renda-2);text-align:center;padding:3rem 0}

.painel-lista{display:grid;gap:.7rem;max-height:min(60vh,560px);overflow:auto;padding-right:.3rem}
.pc-item{
  display:grid;grid-template-columns:56px 1fr auto auto auto;gap:1rem;align-items:center;
  background:var(--preto);border:1px solid var(--linha);border-radius:14px;padding:.7rem .9rem;
}
.pc-item.inativo{opacity:.5}
.pc-thumb{width:56px;aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:var(--bordo-2);display:grid;place-items:center}
.pc-thumb img{width:100%;height:100%;object-fit:cover}
.pc-thumb svg{width:55%;fill:var(--renda);opacity:.35}
.pc-info strong{display:block;font-family:var(--fonte-display);font-size:1.15rem;font-weight:500}
.pc-info span{font-size:.8rem;color:var(--renda-2)}
.pc-preco{font-family:var(--fonte-display);font-size:1.15rem;white-space:nowrap}
.pc-acoes{display:flex;gap:.4rem}
.pc-acoes button{
  width:34px;height:34px;border:1px solid var(--linha);border-radius:9px;display:grid;place-items:center;
  transition:border-color .2s,background .2s;
}
.pc-acoes button:hover{border-color:var(--renda-2)}
.pc-acoes .pc-excluir:hover{border-color:var(--vermelho-vivo);background:rgba(255,45,63,.12)}
.pc-toggle{display:flex;align-items:center}
.interruptor{position:relative;width:40px;height:22px;border-radius:20px;background:var(--bordo-2);border:1px solid var(--linha);flex:none}
.interruptor::after{content:"";position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%;background:var(--renda-2);transition:transform .2s,background .2s}
.interruptor.ativo{background:rgba(201,17,31,.35);border-color:var(--vermelho)}
.interruptor.ativo::after{transform:translateX(18px);background:var(--vermelho-vivo)}
@media (max-width:640px){
  .pc-item{grid-template-columns:44px 1fr auto;grid-template-areas:"thumb info toggle" "thumb info acoes"}
  .pc-thumb{grid-area:thumb}.pc-info{grid-area:info}.pc-toggle{grid-area:toggle}.pc-acoes{grid-area:acoes}
  .pc-preco{display:none}
}

/* Formulário de produto */
.painel-caixa-form{max-width:720px;width:100%}
.painel-form-grid{display:grid;grid-template-columns:180px minmax(0,1fr);gap:1.75rem;margin:1.5rem 0;min-width:0}
.pf-imagem{display:flex;flex-direction:column;gap:.6rem;min-width:0}
.pf-imagem label{font-size:.8rem;color:var(--renda-2);letter-spacing:.05em}
.pf-imagem-preview{aspect-ratio:3/4;background:var(--preto);border:1px dashed var(--linha);border-radius:14px;display:grid;place-items:center;overflow:hidden}
.pf-imagem-preview img{width:100%;height:100%;object-fit:cover}
.pf-imagem-preview svg{width:40%;fill:var(--renda);opacity:.3}
.pf-imagem .btn{width:100%;justify-content:center}
.pf-upload-status{font-size:.78rem;color:var(--renda-2)}
.pf-campos{display:flex;flex-direction:column;gap:1.1rem;min-width:0}
.campo{min-width:0}
.campo input,.campo select,.campo textarea{width:100%}
.campo-linha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;min-width:0}
.pf-ativo{display:flex;align-items:center;gap:.6rem;font-size:.9rem;color:var(--renda-2);margin-top:.2rem}
.pf-ativo input{width:18px;height:18px;flex:none;accent-color:var(--vermelho)}
@media (max-width:680px){
  .painel-form-grid{grid-template-columns:1fr;gap:1.25rem}
  .pf-imagem{max-width:220px;margin:0 auto}
  .campo-linha{grid-template-columns:1fr;gap:.9rem}
}

.toast-painel{background:var(--vermelho)}

/* Lista de cupons (reaproveita .pc-item como base) */
.pcu-item{
  display:grid;grid-template-columns:1fr auto auto auto auto;gap:1rem;align-items:center;
  background:var(--preto);border:1px solid var(--linha);border-radius:14px;padding:.7rem .9rem;margin-bottom:.7rem;
}
.pcu-item.inativo{opacity:.5}
.pcu-item.expirado{opacity:.5}
.pcu-codigo{font-family:"Courier New",monospace;font-weight:700;font-size:1rem;letter-spacing:.03em}
.pcu-codigo small{display:block;font-family:var(--fonte-texto);font-weight:400;font-size:.74rem;color:var(--renda-2);letter-spacing:0;margin-top:2px}
.pcu-valor{font-family:var(--fonte-display);font-size:1.1rem;white-space:nowrap}
.pcu-usos{font-size:.8rem;color:var(--renda-2);white-space:nowrap}
.pcu-validade{font-size:.78rem;color:var(--renda-2);white-space:nowrap}
@media (max-width:640px){
  .pcu-item{grid-template-columns:1fr auto;grid-template-areas:"codigo toggle" "valor valor" "meta meta" "acoes acoes";row-gap:.5rem}
  .pcu-codigo{grid-area:codigo}.pcu-toggle{grid-area:toggle}.pcu-valor{grid-area:valor}
  .pcu-usos,.pcu-validade{grid-area:meta}.pcu-acoes{grid-area:acoes}
}

.painel-caixa-cupom{max-width:560px}
