/* VoltZ Gold · Comprovantes de pagamento (prefixo gr-). Padrão startup: superfície sólida, borda fina, sem glow.
   Usada dentro da janela da data (G.receiptsBox, comprovantes.js). */

.gr-box{display:flex;flex-direction:column;gap:10px;min-width:0;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;transition:border-color .2s var(--ease)}
/* Arrastando um arquivo por cima: só a borda muda (tracejada, na cor de destaque) */
.gr-box.is-drop{border-style:dashed;border-color:var(--accent-ink)}

.gr-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.gr-t{min-width:0;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:var(--text-3)}
.gr-n{flex:0 0 auto;font-family:var(--mono);font-size:10.5px;color:var(--text-3);white-space:nowrap}

.gr-list{display:flex;flex-direction:column;gap:6px;min-width:0}
.gr-vazio{margin:0;padding:8px 4px;font-size:13px;color:var(--text-3)}
.gr-erro{color:var(--danger)}

/* Um comprovante: ícone, nome e tamanho, botões só de ícone à direita */
.gr-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:48px;padding:6px 6px 6px 10px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025);min-width:0;transition:border-color .2s var(--ease),background .2s var(--ease)}
.gr-item:hover{border-color:var(--line-2);background:rgba(255,255,255,.045)}
.gr-ico{display:flex;flex-shrink:0;color:var(--text-2)}
.gr-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.gr-txt b{display:block;min-width:0;font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gr-txt small{display:block;min-width:0;font-family:var(--mono);font-size:10.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gr-item-acoes{display:flex;align-items:center;gap:2px;flex-shrink:0}
.gr-item-acoes .p-btn{width:36px;min-height:36px;height:36px;padding:0}
/* Enviando: o spinner ocupa o lugar dos botões */
.gr-item.is-enviando .p-spin{width:18px;height:18px;margin:0 6px;flex-shrink:0}
.gr-item.is-enviando .gr-txt small{color:var(--text-2)}

.gr-acoes{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;min-width:0}
.gr-anexar{flex-shrink:0}
.gr-anexar svg{flex-shrink:0}
.gr-anexar:disabled{opacity:.5;cursor:default}
.gr-dica{font-size:12px;color:var(--text-3)}

.gr-box button:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .gr-box,.gr-item{transition:none}
  /* O giro do spinner continua (é sinal de carregamento), mas mais lento */
  .gr-item .p-spin{animation-duration:2.4s}
}