/* Gerador de QR Code Pix grátis (25/10/2026) — templates/pix_qr.html. Usa os tokens do vf2.css.
   26/10: topo e formulário compactos e painel do QR ao lado dos botões, para a ferramenta inteira
   (gerar, baixar e imprimir) caber na tela do notebook sem rolar. */
.px-hero{padding-top:18px}
.px-head{margin:0 0 14px}
.px-head .v2-eyebrow{margin:0}
.px-head .v2-h1{font-size:clamp(30px,3.4vw,42px);margin:6px 0 6px}
.px-head .v2-lead{font-size:17px;margin:0;max-width:none}
.px-title{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap}
.px-watch{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:none}
.px-video-links{text-align:center;margin:14px 0 0;color:var(--v2-muted);font-size:15px}
.px-tool{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start}
.px-form{padding:18px 20px;display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.px-wide,.px-types{grid-column:1/-1}
.px-types{border:0;margin:0;padding:0;min-width:0}
.px-label{display:block;font-weight:600;color:var(--v2-ink);font-size:14px;margin:0 0 5px;padding:0}
.px-label em{font-style:normal;font-weight:500;color:var(--v2-muted)}
.px-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:var(--v2-tint);border-radius:var(--v2-radius-sm);padding:4px}
.px-seg label{position:relative;display:block;cursor:pointer}
.px-seg input{position:absolute;opacity:0;width:1px;height:1px}
.px-seg span{display:flex;align-items:center;justify-content:center;min-height:40px;border-radius:6px;font-size:14px;font-weight:600;color:var(--v2-text);text-align:center;padding:0 6px;line-height:1.2}
.px-seg input:checked + span{background:var(--v2-surface);color:var(--v2-green);box-shadow:var(--v2-shadow-sm)}
.px-seg input:focus-visible + span{outline:3px solid var(--v2-green-line)}
.px-field{display:flex;flex-direction:column;min-width:0}
.px-field input,.px-code textarea,.px-print select{width:100%;box-sizing:border-box;min-height:44px;border:1px solid var(--v2-line-strong);border-radius:var(--v2-radius-sm);
  padding:9px 12px;font:inherit;font-size:16px;color:var(--v2-ink);background:var(--v2-surface);outline:none}
.px-field input:focus,.px-code textarea:focus,.px-print select:focus{border-color:var(--v2-green);box-shadow:0 0 0 3px var(--v2-green-soft)}
.px-field input::placeholder{color:var(--v2-subtle)}
.px-field small{color:var(--v2-muted);font-size:13px;margin-top:5px;line-height:1.4}
.px-money{display:flex;align-items:center;border:1px solid var(--v2-line-strong);border-radius:var(--v2-radius-sm);background:var(--v2-surface)}
.px-money:focus-within{border-color:var(--v2-green);box-shadow:0 0 0 3px var(--v2-green-soft)}
.px-money b{padding:0 0 0 12px;color:var(--v2-muted);font-weight:600}
.px-field .px-money input{border:0;box-shadow:none;min-width:0}
.px-actions{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding-top:4px}
.px-more{margin-left:auto}
.px-more[open]{flex-basis:100%;margin-left:0}
.px-more summary{cursor:pointer;font-weight:600;color:var(--v2-muted);font-size:14px;min-height:28px;display:inline-flex;align-items:center}
.px-more .px-field{margin-top:8px;max-width:380px}
button.v2-btn-link{background:none;border:0;padding:0;font:inherit;font-weight:600;cursor:pointer}
.px-sample{min-height:44px}
.px-message{border-radius:var(--v2-radius-sm);padding:12px 14px;font-size:15px;background:var(--v2-red-soft);color:var(--v2-red);border:1px solid #f5c2bd}
.px-privacy{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;color:var(--v2-muted);font-size:14px}
.px-privacy .v2-icon{color:var(--v2-green);flex:none;margin-top:2px}

/* painel do resultado: mesmo desenho vazio e pronto */
.px-result{padding:18px 20px;display:flex;flex-direction:column;gap:12px;position:sticky;top:88px}
.px-result [hidden]{display:none!important}  /* os display:flex/grid abaixo venceriam o atributo hidden */
.px-amount{margin:0;font-size:28px;line-height:1.15;font-weight:700;color:#0f766e}
.px-amount.free{font-size:15px;line-height:1.35;font-weight:600;color:var(--v2-muted)}
.px-result-grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;align-items:center}
.px-qr{width:200px;height:200px}
.px-qr img{display:block;width:200px;height:200px;border:1px solid var(--v2-line);border-radius:8px;background:#fff;image-rendering:pixelated}
.px-qr-empty{width:100%;height:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;
  border:2px dashed var(--v2-line-strong);border-radius:8px;background:var(--v2-canvas);color:var(--v2-subtle);padding:10px}
.px-qr-empty small{font-size:13px;color:var(--v2-muted)}
.px-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.px-who{margin:0;display:flex;flex-direction:column;gap:2px}
.px-who b{color:var(--v2-ink);overflow-wrap:anywhere}
.px-who span{color:var(--v2-muted);font-size:13px;overflow-wrap:anywhere}
.px-result.is-empty .px-who b,.px-result.is-empty .px-who span{color:var(--v2-subtle);font-weight:500}
.px-checked{margin:0;display:flex;gap:6px;align-items:flex-start;color:var(--v2-green);font-size:13px;font-weight:600;line-height:1.35}
.px-checked .v2-icon{flex:none;margin-top:1px}
.px-notes{margin:0;color:var(--v2-amber);font-size:13px}
.px-notes:empty{display:none}
.px-downloads{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.px-result .btn{justify-content:center;min-height:44px}
.px-result .btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.px-print{border-top:1px solid var(--v2-line);padding-top:12px;display:flex;flex-direction:column;gap:6px}
.px-print-row{display:grid;grid-template-columns:1fr auto;gap:8px}
.px-print select{appearance:auto;font-size:15px}
.px-check{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--v2-text);min-height:30px;cursor:pointer}
.px-check input{width:18px;height:18px;accent-color:var(--v2-green)}
.px-print-foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.px-code{margin-left:auto}
.px-code[open]{flex-basis:100%;margin-left:0}
.px-code summary{cursor:pointer;font-weight:600;color:var(--v2-green);font-size:14px;min-height:28px;display:inline-flex;align-items:center}
.px-code textarea{margin-top:8px;font:12px/1.45 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;resize:none;min-height:92px;color:var(--v2-text);background:var(--v2-canvas);word-break:break-all}

.px-steps{list-style:none;counter-reset:px;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.px-steps li{counter-increment:px;background:var(--v2-surface);border:1px solid var(--v2-line);border-radius:var(--v2-radius);padding:18px;display:flex;flex-direction:column;gap:6px}
.px-steps li::before{content:counter(px);width:30px;height:30px;border-radius:50%;background:var(--v2-green-soft);color:var(--v2-green);font-weight:700;display:flex;align-items:center;justify-content:center}
.px-steps b{color:var(--v2-ink)}
.px-steps span{color:var(--v2-text);font-size:15px}
.px-upsell{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center}
.px-upsell-links{display:grid;gap:12px}
.px-upsell-card{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:16px 20px;color:var(--v2-ink);text-decoration:none}
.px-upsell-card small{grid-column:1;color:var(--v2-muted);font-size:14px}
.px-upsell-card span{grid-column:2;grid-row:1/3;color:var(--v2-green)}
@media (max-width:1100px){
  .px-result-grid{grid-template-columns:170px minmax(0,1fr)}
  .px-qr,.px-qr img{width:170px;height:170px}
}
@media (max-width:960px){
  .px-tool{grid-template-columns:1fr}
  .px-result{position:static}
  .px-result-grid{grid-template-columns:200px minmax(0,1fr)}
  .px-qr,.px-qr img{width:200px;height:200px}
}
@media (max-width:860px){
  .px-upsell,.px-steps{grid-template-columns:1fr}
}
@media (max-width:560px){
  .px-form{grid-template-columns:1fr;padding:16px}
  .px-result{padding:16px}
  .px-seg{grid-template-columns:1fr 1fr}
  .px-actions .btn{width:100%;justify-content:center}
  .px-result-grid{grid-template-columns:1fr;justify-items:center}
  .px-qr,.px-qr img{width:240px;height:240px}
  .px-side{width:100%}
  .px-who,.px-amount{text-align:center}
  .px-checked{justify-content:center}
  .px-print-row{grid-template-columns:1fr}
}