/* Painel do lojista, super admin e página de Pix. Usa as variáveis de style.css */

.pagina-painel{min-height:100vh;display:flex;flex-direction:column}
.painel-topo{display:flex;justify-content:space-between;align-items:center;padding:12px 5vw}
.painel-topo .logo{font-size:1.2rem}
.topo-acoes{display:flex;gap:8px}
.painel{flex:1;width:100%;max-width:1100px;margin:0 auto;padding:32px 5vw 64px}
.painel h1{font-size:clamp(1.6rem,3vw,2rem);color:var(--tinta);margin:0 0 8px;line-height:1.15}
.carregando{text-align:center;padding:64px 0;color:#5b6b7b}

/* Botões secundários e campos */
.botao-sec{display:inline-block;font:inherit;font-weight:700;font-size:.95rem;color:var(--tinta);background:#fff;border:2px solid var(--acento);border-radius:8px;padding:8px 14px;cursor:pointer;text-decoration:none;line-height:1.3}
.botao-sec:hover{background:var(--tinta);border-color:var(--tinta);color:#fff}
.botao-sec.claro{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.botao-sec.claro:hover{background:#fff;color:var(--tinta)}
.botao-sec.perigo{border-color:#b42318;color:#b42318}
.botao-sec.perigo:hover{background:#b42318;color:#fff}
.painel button.botao{border:0;cursor:pointer;font:inherit;font-weight:700;font-size:1rem}
button:disabled{opacity:.6;cursor:wait}

.painel label{display:flex;flex-direction:column;gap:6px;font-weight:600;color:var(--tinta);font-size:.95rem}
.painel input,.painel select,.painel textarea{font:inherit;font-weight:400;color:var(--texto);background:#fff;border:1px solid #b8c4d0;border-radius:8px;padding:10px 12px;width:100%}
.painel input:focus-visible,.painel select:focus-visible,.painel textarea:focus-visible{outline:3px solid var(--acento);outline-offset:1px}
.campo-com-botao{display:flex;gap:8px;align-items:center}
.campo-com-botao input{flex:1;min-width:0}
.dica{font-size:.85rem;color:#5b6b7b;margin:4px 0 0}

.mensagem{padding:12px 16px;border-radius:8px;margin:0;font-weight:600}
.mensagem.erro{background:#fdecea;color:#8a1c12}
.mensagem.sucesso{background:#e3f5ef;color:#0b5d4a}
.mensagem a{color:inherit}

/* Login */
.cartao-acesso{max-width:420px;margin:24px auto;background:#fff;border:1px solid #d5dde5;border-radius:12px;padding:32px}
.cartao-acesso form{display:flex;flex-direction:column;gap:16px;margin:16px 0}
.cartao-acesso a:not(.botao){color:var(--tinta);font-weight:600}

/* Cabeçalho do painel */
.painel-cabecalho{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px}
.painel-cabecalho p{margin:0;color:#5b6b7b}
.painel-acoes{display:flex;gap:12px;flex-wrap:wrap}
#tela-painel > .mensagem,#tela-admin > .mensagem{margin-bottom:20px}

/* Lista de placas */
.lista-placas{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}
.placa-item{display:grid;grid-template-columns:120px 1fr auto;gap:24px;align-items:start;background:#fff;border:1px solid #d5dde5;border-radius:12px;padding:20px}
.placa-item.inativa{opacity:.7}
.placa-qr svg{display:block;width:120px;height:120px}
.placa-info{min-width:0}
.placa-info h2{font-size:1.2rem;color:var(--tinta);margin:0 0 4px}
.placa-info p{margin:0 0 4px}
.placa-tipo{font-weight:600;color:var(--tinta)}
.placa-tipo span{font-weight:400;color:var(--texto);overflow-wrap:anywhere}
.placa-link code{font-size:.85rem;color:#5b6b7b;overflow-wrap:anywhere}
.placa-acoes{display:flex;flex-direction:column;gap:8px;min-width:170px}
.selo-status{display:inline-block;font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:999px;background:#fdecea;color:#8a1c12;vertical-align:middle}
.selo-status.ok{background:#e3f5ef;color:#0b5d4a}
.vazio{text-align:center;padding:48px 16px;color:#5b6b7b;background:#fff;border:1px dashed #b8c4d0;border-radius:12px}

/* Acessos dos últimos 30 dias */
.acessos{margin-top:12px;font-size:.9rem;color:#5b6b7b}
.acessos strong{color:var(--tinta);font-size:1.1rem}
.acessos-titulo{margin:10px 0 4px!important;font-size:.8rem;font-weight:600;color:#5b6b7b}
.barras{display:flex;align-items:flex-end;gap:2px;height:36px;max-width:300px;border-bottom:1px solid #cfd8e2}
.barras span{flex:1;background:var(--acento);border-radius:2px 2px 0 0;min-height:1px}
.barras span.zero{background:#e6ebf0}
.barras-legenda{display:flex;justify-content:space-between;max-width:300px;font-size:.75rem;color:#5b6b7b;margin-top:2px}

/* Editor de placa */
.editor{border:0;border-radius:12px;padding:0;width:min(560px,calc(100% - 32px));max-height:calc(100vh - 32px)}
.editor::backdrop{background:rgba(18,38,63,.6)}
.form-editor{display:flex;flex-direction:column;gap:16px;padding:28px}
.form-editor h2{margin:0;color:var(--tinta)}
.form-editor fieldset{border:0;padding:0;margin:0}
.form-editor legend{font-weight:600;color:var(--tinta);margin-bottom:8px}
.form-editor [data-campos]{display:flex;flex-direction:column;gap:16px}
.form-editor [data-campos][hidden]{display:none}
.opcoes{display:flex;flex-wrap:wrap;gap:8px}
.painel .opcao,.editor .opcao{flex-direction:row;align-items:center;gap:6px;border:2px solid #cfd8e2;border-radius:999px;padding:6px 14px;cursor:pointer;font-weight:600;color:var(--tinta)}
.opcao:has(input:checked){border-color:var(--tinta);background:var(--tinta);color:#fff}
.opcao input{width:auto;accent-color:var(--acento)}
.editor label{display:flex;flex-direction:column;gap:6px;font-weight:600;color:var(--tinta);font-size:.95rem}
.editor input:not([type=radio]),.editor select,.editor textarea{font:inherit;font-weight:400;color:var(--texto);border:1px solid #b8c4d0;border-radius:8px;padding:10px 12px;width:100%}
.editor button.botao{border:0;cursor:pointer;font:inherit;font-weight:700;font-size:1rem}
.acoes-form{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap}

/* Gerar arte (super admin) */
.editor.largo{width:min(1100px,calc(100% - 32px))}
.gerador h2 small{display:block;font-size:.9rem;font-weight:400;color:#5b6b7b;margin-top:4px}
.gerador-grade{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}
.gerador-opcoes{display:flex;flex-direction:column;gap:20px;min-width:0}
.carrossel{display:grid;grid-template-columns:36px 1fr 36px;align-items:center;gap:6px}
.carrossel-trilho{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 4px;padding:4px 4px 10px;scrollbar-width:thin}
.carrossel-trilho .modelo-opcao{flex:0 0 112px;scroll-snap-align:start;position:relative}
.carrossel-seta{width:36px;height:36px;border-radius:50%;border:2px solid #cfd8e2;background:#fff;color:var(--tinta);font-size:1.6rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 3px}
.carrossel-seta:hover:not(:disabled){border-color:var(--tinta);background:var(--tinta);color:#fff}
.carrossel-seta:disabled{opacity:.35;cursor:default}
.selo-indicado{position:absolute;top:8px;left:8px;font-style:normal;font-size:.7rem;font-weight:700;background:var(--tinta);color:#fff;padding:2px 8px;border-radius:999px}
.editor .modelo-opcao{gap:4px;font-size:.8rem;font-weight:600;text-align:center;cursor:pointer}
.modelo-opcao input{position:absolute;opacity:0}
.modelo-opcao img{width:100%;aspect-ratio:1055/1491;object-fit:contain;background:#eef2f5;border-radius:6px;border:3px solid transparent}
.modelo-opcao:has(input:checked) img{border-color:var(--acento)}
.modelo-opcao:has(input:focus-visible) img{outline:3px solid var(--tinta);outline-offset:2px}
.editor .opcao-simples{flex-direction:row;align-items:center;gap:8px;margin-top:10px;font-weight:400}
.editor .opcao-simples input{width:auto;padding:0;accent-color:var(--acento)}
.editor .faixa-tamanho{margin-top:12px}
.faixa-tamanho output{font-weight:400;color:#5b6b7b;margin-left:6px}
.editor .faixa-tamanho input[type=range]{padding:0;border:0;accent-color:var(--acento);cursor:pointer}
.gerador-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.gerador-previa{position:sticky;top:0}
.gerador-previa canvas{display:block;width:100%;height:auto;border-radius:8px;border:1px solid #d5dde5;background:#f0f3f6}
.gerador code{font-size:.8rem;overflow-wrap:anywhere}

/* Modelos enviados (super admin > Modelos) */
.modelos-topo{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:20px}
.modelos-topo p{margin:0;max-width:640px;color:#5b6b7b}
.lista-modelos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.modelo-item{display:grid;grid-template-columns:72px 1fr auto;gap:16px;align-items:center;background:#fff;border:1px solid #d5dde5;border-radius:12px;padding:12px 16px}
.modelo-item img,.modelo-sem-imagem{width:72px;aspect-ratio:1055/1491;object-fit:contain;background:#eef2f5;border-radius:6px}
.modelo-sem-imagem{display:flex;align-items:center;justify-content:center;text-align:center;font-size:.7rem;color:#5b6b7b}
.modelo-info{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.modelo-info strong{color:var(--tinta)}
.modelo-info small{color:#5b6b7b}
.editor-modelo .rotulo-grupo{margin:14px 0 0;font-weight:600;color:var(--tinta);font-size:.95rem}
.tipos-modelo{display:flex;flex-wrap:wrap;gap:4px 18px}
.editor-modelo .campos-numeros{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));margin-top:10px}
.texto-modelo{border-top:1px solid #e6ebf0;padding:4px 0 16px;margin-bottom:8px}
.texto-modelo .gerador-campos{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:10px}
.texto-modelo [data-remover-texto]{margin-top:10px}
.editor .texto-modelo input[type=color]{padding:4px;height:44px}
.gerador-previa canvas.marcavel{cursor:crosshair}
@media(max-width:600px){
  .modelo-item{grid-template-columns:56px 1fr}
  .modelo-item img,.modelo-sem-imagem{width:56px}
  .modelo-item .acoes-linha{grid-column:1/-1;justify-content:flex-start}
}

/* Super admin */
.abas{display:flex;gap:8px}
.abas button{font:inherit;font-weight:700;color:var(--tinta);background:#fff;border:2px solid #cfd8e2;border-radius:999px;padding:8px 18px;cursor:pointer}
.abas button[aria-selected="true"]{background:var(--tinta);border-color:var(--tinta);color:#fff}
.caixa{background:#fff;border:1px solid #d5dde5;border-radius:12px;padding:16px 20px;margin-bottom:24px}
.caixa summary{font-weight:700;color:var(--tinta);cursor:pointer}
.grade-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:16px}
.grade-form .mensagem,.grade-form .acoes-form{grid-column:1/-1}
.tabela-rolagem{overflow-x:auto;background:#fff;border:1px solid #d5dde5;border-radius:12px}
.tabela{width:100%;border-collapse:collapse;font-size:.95rem}
.tabela th,.tabela td{text-align:left;padding:12px 16px;border-bottom:1px solid #e6ebf0;vertical-align:middle}
.tabela th{color:var(--tinta);font-size:.85rem;text-transform:uppercase;letter-spacing:.04em}
.tabela small{color:#5b6b7b}
.tabela input[type=number]{width:70px;padding:6px 8px}
.acoes-linha{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.filtros-admin{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:20px}
.placa-dono{font-size:.9rem}

/* Cartão fidelidade: página do cliente */
.fidelidade{max-width:560px}
.fidelidade h2{color:var(--tinta)}
.programa-topo{text-align:center;margin-bottom:24px}
.programa-loja{margin:0;color:#5b6b7b;font-weight:600}
.programa-recompensa{margin:8px 0 0}
.fidelidade .cartao-acesso{margin-top:0}
.cartao-fidelidade{background:#fff;border:1px solid #d5dde5;border-radius:16px;padding:24px;text-align:center}
.cartao-fidelidade.principal{border:2px solid var(--tinta)}
.cartao-fidelidade.completo{border-color:var(--estrela);background:#fffaeb}
.cartao-fidelidade h2{margin:2px 0 16px;font-size:1.3rem}
.cartao-loja{margin:0;color:#5b6b7b;font-size:.9rem;font-weight:600}
.carimbos{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;max-width:340px;margin:0 auto 16px}
.carimbo{aspect-ratio:1;border-radius:50%;border:2px dashed #b8c4d0;display:flex;align-items:center;justify-content:center;font-weight:700;color:#8a99a8;font-size:.9rem}
.carimbo.feito{border:0;background:var(--acento);color:#fff;font-size:1.3rem}
.cartao-status{margin:0}
.resultado-leitura{border-radius:16px;padding:20px 24px;margin-bottom:20px;text-align:center}
.resultado-leitura.sucesso{background:#e3f5ef;color:#0b5d4a}
.resultado-leitura.aviso{background:#fff4d6;color:#6b4b00}
.resultado-leitura.erro{background:#fdecea;color:#8a1c12}
.resultado-titulo{font-size:1.4rem;font-weight:800;margin:0 0 6px}
.resultado-leitura p{margin:0}
.como-carimbar{text-align:center;margin:16px 0 0}
.outros-titulo{margin:32px 0 12px;font-size:1.1rem}
.lista-cartoes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.lista-cartoes .carimbos{max-width:260px;gap:6px}
.meus-premios{margin-top:8px}
.lista-premios{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.premio{background:#fff;border:1px solid #d5dde5;border-left:4px solid var(--estrela);border-radius:12px;padding:16px}
.premio.confirmado{border-left-color:var(--acento)}
.premio p{margin:0 0 4px}
.premio-nome{font-weight:800;color:var(--tinta)}
.premio-comprovante strong{font-family:ui-monospace,Consolas,monospace;letter-spacing:.08em}
.premio-situacao{margin:6px 0 10px;padding-left:18px;font-size:.9rem}
.premio-situacao:last-child{margin-bottom:0}
.fid-ficha #fid-entregar{margin-top:8px}
.conta{margin-top:32px}
.conta p{margin:12px 0}
.editor .aceite,.painel .aceite{flex-direction:row;align-items:flex-start;gap:8px;font-weight:400}
.painel .aceite input{width:auto;margin-top:4px}
.aceite a{color:var(--tinta);font-weight:600}

/* Política de privacidade */
.texto-legal{max-width:720px}
.texto-legal h2{font-size:1.2rem;color:var(--tinta);margin:28px 0 8px}
.texto-legal p,.texto-legal li{line-height:1.65}
.texto-legal a{color:var(--tinta);font-weight:600}

/* Cartão fidelidade: área do lojista no painel */
.fid-painel{margin-top:40px;padding-top:32px;border-top:1px solid #d5dde5}
.fid-balcao{background:#fff;border:2px solid var(--tinta);border-radius:12px;padding:20px;margin-bottom:20px}
.fid-balcao form{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:end}
.fid-ficha{margin-top:16px;border-radius:10px;padding:16px 20px}
.fid-ficha p{margin:0 0 6px}
.fid-ficha.aguardando{background:var(--tinta);color:#fff}
.fid-ficha.aguardando .botao-sec{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);margin-top:8px}
.fid-ficha.sucesso{background:#e3f5ef;color:#0b5d4a}
.fid-ficha.erro{background:#fdecea;color:#8a1c12}
.fid-ficha-titulo{font-size:1.2rem;font-weight:800;font-variant-numeric:tabular-nums}
.fid-resultado{margin-top:12px}
.fid-programa{background:#fff;border:1px solid #d5dde5;border-radius:12px;padding:20px;margin-bottom:12px}
.fid-programa h3{margin:0 0 4px}
.fid-programa p{margin:0 0 8px}
.fid-programa .acoes-linha{justify-content:flex-start;margin-top:12px}
.fid-clientes{margin-top:12px}

/* Página de Pix */
.pix{max-width:480px}
.pix h2{font-size:1.1rem;color:var(--tinta);margin:24px 0 8px}
.pix p{margin:0 0 12px}
.pix-rotulo{color:#5b6b7b;margin:0}
.pix textarea{font-family:ui-monospace,Consolas,monospace;font-size:.85rem;margin-bottom:12px;resize:none;word-break:break-all}
.pix-chave{overflow-wrap:anywhere}
.pix .mensagem{margin-top:16px}
.rodape-pix{text-align:center;font-size:.85rem;color:#5b6b7b;padding:16px}
.rodape-pix a{color:var(--tinta)}

@media(max-width:820px){
  .gerador-grade{grid-template-columns:1fr}
  .gerador-previa{position:static;max-width:340px;margin:0 auto}
}

@media(max-width:720px){
  .fid-balcao form{grid-template-columns:1fr 1fr}
  .fid-balcao form label{grid-column:1/-1}
  .placa-item{grid-template-columns:96px 1fr}
  .placa-qr svg{width:96px;height:96px}
  .placa-acoes{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;min-width:0}
  .cartao-acesso{padding:24px}
}