/* ==========================================
   GAVETA DE COMPROVANTES NOS CADASTROS
   O "📥 Jogar Comprovantes" abre ao lado dos cartões, apontado para um gerente. Não é janela (sem role=dialog):
   fechada fica invisível e sem clique (exigência do teste de botões). Camada 965: acima do 💬 (960), abaixo do chat
   aberto (970) e das janelas do app (990+).
   ========================================== */
.gaveta-comp {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 965;
  width: min(680px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
  border-left: 1px solid rgba(52, 211, 153, 0.28);
  box-shadow: -24px 0 60px -20px rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(28px);
  transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.24s;
}
.gaveta-comp.aberta {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}
.gaveta-cab {
  display: flex; align-items: center; gap: 0.6rem;
  padding: max(0.7rem, env(safe-area-inset-top)) 0.7rem 0.7rem 1rem;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(99, 102, 241, 0.08));
  flex: 0 0 auto;
}
.gaveta-ic { font-size: 1.3rem; flex: 0 0 auto; }
.gaveta-tit { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gaveta-tit strong { font-family: var(--font-display); font-size: 1rem; overflow-wrap: anywhere; }
.gaveta-tit strong:empty::before { content: 'Jogar comprovante'; }
.gaveta-tit span { font-size: 0.76rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.gaveta-fechar {
  width: 36px; height: 36px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.05); color: var(--text-secondary);
  font: inherit; font-size: 1rem; cursor: pointer;
}
.gaveta-fechar:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.1); }
.gaveta-corpo { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0.9rem 1rem max(1rem, env(safe-area-inset-bottom)); }

/* Dentro da gaveta o Jogar Comprovantes fica numa coluna só (a tela é estreita) */
.gaveta-corpo .comprovantes-upload-container { grid-template-columns: 1fr; gap: 0.9rem; }
.gaveta-corpo .dropzone-box { padding: 1.2rem 1rem; }
.gaveta-corpo .dropzone-box h3 { font-size: 1rem; }
.gaveta-corpo .leitor-palco { margin: 0.9rem 0 0.8rem; }
.gaveta-corpo .lp-cena { grid-template-columns: 1fr; }
.gaveta-corpo .lp-mini { width: 100%; height: 78px; }
.gaveta-corpo .lp-encaixe { grid-template-columns: 1fr; }
.gaveta-corpo .review-grid-inputs { grid-template-columns: 1fr 1fr; }

/* Cartão de Cadastros recebendo um arquivo arrastado */
.dividendo-card.drop-alvo { outline: 2px dashed var(--emerald-400); outline-offset: 4px; box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.18); transform: translateY(-2px); }

/* No computador os Cadastros encolhem para a esquerda da gaveta: nenhum cartão (nem o 📥 dele) fica preso embaixo */
@media (min-width: 769px) {
  body.gaveta-comp-aberta #tab-cadastros { padding-right: min(680px, 100vw); transition: padding-right 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
}

/* Modo Dividido com a gaveta (Etapa 9): ela deixa de ser painel fixo (cobriria o Bloco de Notas) e vira o topo da
   coluna dos Cadastros, com rolagem própria; os cartões ficam embaixo e o Bloco de Notas livre à direita */
@media (min-width: 769px) {
  #appMainContainer.modo-split-cadastros #tab-cadastros { display: flex !important; flex-direction: column; padding-right: 0; }
  #appMainContainer.modo-split-cadastros .gaveta-comp.aberta {
    order: -1; position: relative; top: auto; right: auto; bottom: auto; z-index: 1;
    width: auto; max-height: min(78vh, 920px); margin-bottom: 1rem;
    border: 1px solid rgba(52, 211, 153, 0.28); border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-card);
  }
}

/* Com a gaveta aberta, o conteúdo de trás não rola junto no celular */
@media (max-width: 768px) {
  .gaveta-comp, .gaveta-comp.aberta { width: 100vw; transform: translateY(100%); }
  .gaveta-comp.aberta { transform: none; }
  body.gaveta-comp-aberta { overflow: hidden; }
  .gaveta-corpo .review-grid-inputs { grid-template-columns: 1fr; }
  .gaveta-corpo .comprovantes-upload-container { overflow-x: hidden; }
}

/* O "⚡ Lançar" de 1 toque na narração */
.lp-lancar {
  margin: 0.35rem 0.5rem 0 0; justify-self: start;
  font: inherit; font-size: 0.82rem; font-weight: 800; padding: 0.45rem 0.95rem;
  border-radius: var(--radius-full); border: 1px solid rgba(16, 185, 129, 0.7);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.35), rgba(5, 150, 105, 0.25)); color: #d1fae5; cursor: pointer;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45);
  animation: lpChamaAtencao 1.6s ease-out 2;
}
.lp-lancar:hover { background: linear-gradient(135deg, rgba(16, 185, 129, 0.5), rgba(5, 150, 105, 0.4)); }
.lp-decisao { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
@keyframes lpChamaAtencao { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); } 100% { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); } }

/* Tema claro */
body.theme-light .gaveta-comp { background: #f8fafc; border-left-color: rgba(5, 150, 105, 0.3); box-shadow: -24px 0 60px -24px rgba(15, 23, 42, 0.35); }
body.theme-light .gaveta-cab { background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(99, 102, 241, 0.06)); }
body.theme-light .gaveta-fechar { background: rgba(15, 23, 42, 0.05); }
body.theme-light .lp-lancar { color: #065f46; }

@media (prefers-reduced-motion: reduce) {
  .gaveta-comp, .gaveta-comp.aberta { transition: none; }
  .lp-lancar { animation: none; }
}
@media print { .gaveta-comp { display: none !important; } }

/* Etapa 9 */
body.theme-light .gaveta-fechar:hover { background: rgba(15, 23, 42, 0.1); }