/* ==========================================================================
   ANEXOS DAS DESPESAS — "Documentos e comprovantes" (17/10/2026)
   Financeiro › Gestão Financeira › janela Despesas · js/despesa-anexos.js
   --------------------------------------------------------------------------
   Mesma paleta e morfologia do módulo (css/financeiro.css): preto absoluto,
   dourado #FFD700 e caramelo #D4A373; retangular, cantos da escala do dono
   (4 · 6 · 8 · 10 · 12 px), nada de pílula nem forma orgânica. A área mora
   DENTRO de .fin-modulo (formulário do lançamento e gerenciador de anexos) e
   herda os tokens --fin-* de lá; o visualizador é filho do <body> e traz os
   seus (--da-*).

   O TEMA CLARO é a camada gerada (css/tema-claro.css, scripts/
   gerar-tema-claro.mjs): esta folha entra no <head> ANTES do bloco do tema,
   e as contrapartes claras destas regras nascem de lá. Não ponha regra
   html.tema-claro aqui.

   CORES LITERAIS, NÃO var(--fin-ouro)/var(--fin-caramelo): o gerador dá a
   cada variável o papel da MAIORIA dos seus usos (texto, fundo, sombra…).
   Usar --fin-ouro como cor de texto aqui virava a maioria de "sombra" para
   "texto" e REPINTAVA o Financeiro inteiro no claro (medido: 31 linhas da
   camada clara trocadas). Com o valor literal, a contraparte sai por
   declaração e a camada clara só GANHA linhas. Os cantos (--fin-canto-*)
   não são cor e continuam variáveis.
   ========================================================================== */

/* `.fin-modulo input { display: block }` venceria o [hidden] do navegador e os
   dois <input type=file> apareceriam crus no formulário. */
.fin-modulo .da-input,
.da-secao[hidden],
.da-zona[hidden],
.da-ocr[hidden],
.da-envio[hidden],
.da-barra[hidden] { display: none !important; }

/* ─────────────────────────── a seção ─────────────────────────── */

.fin-modulo .da-secao {
  margin: 2px 0 14px;
  padding: 14px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 215, 0, 0.28);
  border-radius: var(--fin-canto-1);
  color: #F5F1E6;
}
.da-cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.da-cabeca h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFD700;
}
.da-conta {
  font-size: 12px;
  color: rgba(245, 241, 230, 0.62);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.da-nota {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(245, 241, 230, 0.62);
}

/* A zona de envio: tracejada, e sólida (dourada) com o arquivo arrastado por cima. */
.da-zona {
  padding: 14px 12px 12px;
  border: 1px dashed rgba(255, 215, 0, 0.42);
  border-radius: var(--fin-canto-2);
  background-color: rgba(255, 215, 0, 0.025);
  text-align: center;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.da-zona--sobre {
  border-style: solid;
  border-color: #FFD700;
  background-color: rgba(255, 215, 0, 0.08);
}
.da-zona-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.fin-modulo .da-btn {
  min-height: 38px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #FFD700;
  background: rgba(255, 215, 0, 0.06);
  border: 1px solid rgba(255, 215, 0, 0.55);
  border-radius: var(--fin-canto-3);
}
.fin-modulo .da-btn:hover {
  color: #000;
  background: linear-gradient(135deg, #FFD700 0%, #D4A373 100%);
  border-color: #FFD700;
}
.fin-modulo .da-btn:focus-visible { outline: 2px solid #FFD700; outline-offset: 2px; }
.da-zona-dica {
  margin: 9px 0 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(245, 241, 230, 0.62);
}

/* ─────────────────────────── a lista ─────────────────────────── */

.da-lista {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.da-lista:empty { display: none; }
.da-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--fin-canto-2);
}
.da-item--lendo { border-color: rgba(255, 215, 0, 0.45); }
.da-vazio {
  padding: 10px 4px;
  font-size: 13px;
  color: rgba(245, 241, 230, 0.62);
}
.da-mini { display: block; width: 44px; height: 44px; }
.da-mini img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.da-mini-btn {
  all: unset;
  display: block;
  cursor: zoom-in;
  border-radius: 6px;
}
.da-mini-btn:focus-visible { outline: 2px solid #FFD700; outline-offset: 2px; }

/* Ícone por formato — a cor diz o tipo antes do nome. */
.da-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  border: 1px solid currentColor;
}
.da-ico--pdf { color: #F87171; background: rgba(248, 113, 113, 0.10); }
.da-ico--word { color: #60A5FA; background: rgba(96, 165, 250, 0.10); }
.da-ico--excel { color: #34D399; background: rgba(52, 211, 153, 0.10); }
.da-ico--imagem { color: #FFD700; background: rgba(255, 215, 0, 0.08); }
.da-ico--outro { color: #CBD5E1; background: rgba(203, 213, 225, 0.08); }

.da-info { display: grid; gap: 2px; min-width: 0; }
.da-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 600;
  color: #F5F1E6;
}
.da-nome-btn {
  all: unset;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 600;
  color: #FFD700;
  cursor: pointer;
}
.da-nome-btn:hover { text-decoration: underline; }
.da-nome-btn:focus-visible { outline: 2px solid #FFD700; outline-offset: 2px; border-radius: 4px; }
.da-meta {
  font-size: 11.5px;
  line-height: 1.35;
  color: rgba(245, 241, 230, 0.62);
  overflow-wrap: anywhere;
}
.da-lido { color: #34D399; font-weight: 600; }
.da-lido--vazio { color: #D4A373; font-weight: 500; }
.da-lendo { color: #FFD700; font-weight: 600; }

.da-acoes-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.fin-modulo .da-acoes-item .btn { min-height: 32px; }
.fin-modulo .da-remover,
.fin-modulo .da-excluir { color: #FCA5A5; border-color: rgba(248, 113, 113, 0.45); }
.fin-modulo .da-remover:hover,
.fin-modulo .da-excluir:hover { color: #000; background: #F87171; border-color: #F87171; }

/* Só para o leitor de tela (a região existe sempre; o texto muda). */
.da-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.da-secao { position: relative; }

/* Barra de progresso (envio). */
.da-envio {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  font-size: 12.5px;
  color: #F5F1E6;
}
.da-barra {
  display: block;
  height: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 4px;
}
.da-barra > span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(135deg, #FFD700 0%, #D4A373 100%);
  border-radius: 4px;
  transition: width 160ms linear;
}
.fin-modulo .da-cancelar-envio {
  justify-self: start;
  color: #FCA5A5;
  border-color: rgba(248, 113, 113, 0.45);
}
.fin-modulo .da-cancelar-envio:hover { color: #000; background: #F87171; border-color: #F87171; }
.da-cancelar-envio[hidden] { display: none !important; }
.da-secao--enviando .da-zona,
.da-secao--enviando .da-remover,
.da-secao--enviando .da-btn-ocr { opacity: 0.55; pointer-events: none; }

/* ─────────────────────────── leitura automática ─────────────────────────── */

.da-ocr {
  margin-top: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #F5F1E6;
  background-image: linear-gradient(135deg, rgba(255, 215, 0, 0.16) 0%, rgba(212, 163, 115, 0.16) 100%);
  border: 1px solid rgba(255, 215, 0, 0.38);
  border-radius: var(--fin-canto-2);
}
.da-ocr p { margin: 0; }
.da-ocr p + p,
.da-ocr p + div { margin-top: 6px; }
.da-ocr-ok strong { color: #FFD700; }
.da-ocr-extras { color: rgba(245, 241, 230, 0.62); }
.da-ocr-aviso { color: #D4A373; }
.da-ocr-lendo { display: flex; align-items: center; gap: 8px; color: #FFD700; font-weight: 600; }
.da-ocr-conflitos ul { margin: 4px 0 8px; padding-left: 18px; }
.da-ocr-conflitos li { margin: 2px 0; }
.da-ocr-conflitos del { color: #FCA5A5; }
.da-ocr-conflitos strong { color: #FFD700; }
.da-ocr-botoes { display: flex; flex-wrap: wrap; gap: 8px; }

/* O campo que o comprovante preencheu: dourado até a pessoa mexer nele. */
.fin-modulo label.da-auto { position: relative; }
.fin-modulo label.da-auto::after {
  content: '✨ lido do comprovante';
  position: absolute;
  top: 0;
  right: 0;
  font-size: 10.5px;
  font-weight: 600;
  color: #FFD700;
  pointer-events: none;
}
.fin-modulo label.da-auto input,
.fin-modulo label.da-auto select,
.fin-modulo label.da-auto .redp-campo {
  border-color: #FFD700;
  background-color: rgba(255, 215, 0, 0.09);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.16);
}

/* Girador (leitura e carregamento). */
.da-giro {
  display: inline-block;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-right: 4px;
  vertical-align: -1px;
  border: 2px solid rgba(255, 215, 0, 0.25);
  border-top-color: #FFD700;
  border-radius: 3px;      /* quadrado de cantos suaves girando — nada de círculo (escala do dono) */
  animation: da-girar 0.8s linear infinite;
}
@keyframes da-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .da-giro { animation: none; border-top-color: rgba(255, 215, 0, 0.25); border-right-color: #FFD700; }
  .da-barra > span { transition: none; }
}

/* ─────────────────────────── 📎 na linha da janela ─────────────────────────── */

/* Embaixo do status (telas largas) e na linha "venc · valor · status" do celular (a coluna Status
   some abaixo de 640 px, financeiro.css). Altura de linha fixa: o emoji não engorda a linha. */
.fin-janela .da-clipe {
  min-width: 34px;
  padding: 3px 8px;
  font-size: 12px;
  line-height: 16px;
  color: #D4A373;
  border-color: rgba(212, 163, 115, 0.55);
}
.fin-janela td.fin-status .da-clipe { display: flex; align-items: center; width: max-content; margin-top: 6px; }
.fin-janela .da-clipe--com {
  color: #FFD700;
  border-color: rgba(255, 215, 0, 0.6);
}
.fin-janela .da-clipe::before { content: '📎'; }
/* A contagem: o atributo data-n desenhado pelo CSS (fora do texto da célula). */
.fin-janela .da-clipe--com::after {
  content: attr(data-n);
  display: inline-block;
  min-width: 18px;
  margin-left: 4px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  color: #000;
  background: #FFD700;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.fin-janela .da-clipe:hover { color: #000; background: linear-gradient(135deg, #FFD700 0%, #D4A373 100%); border-color: #FFD700; }
.fin-janela .da-clipe--com:hover::after { background: #000; color: #FFD700; }

/* ─────────────────────────── gerenciador ─────────────────────────── */

.da-gerenciador .da-resumo {
  display: grid;
  gap: 2px;
  margin: 0 0 12px;
  font-size: 14px;
  color: #F5F1E6;
}
.da-gerenciador .da-resumo span { font-size: 12.5px; color: rgba(245, 241, 230, 0.62); }
.modal:has(.da-gerenciador) { max-width: 640px; }

/* ─────────────────────────── visualizador (tela cheia) ─────────────────────────── */

.da-visor {
  --da-ouro: #FFD700;
  --da-caramelo: #D4A373;
  --da-texto: #F5F1E6;
  --da-texto-fraco: rgba(245, 241, 230, 0.66);
  position: fixed;
  inset: 0;
  z-index: 95;             /* acima do #modal (50) e do toast (80); abaixo da assinatura (120) */
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.94);
  color: var(--da-texto);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.da-visor-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 10px 14px;
  background: #000;
  border-bottom: 1px solid rgba(255, 215, 0, 0.32);
}
.da-visor-barra .da-ico { width: 36px; height: 36px; }
.da-visor-nome { flex: 1 1 200px; min-width: 0; }
.da-visor-nome h2 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 650;
  color: var(--da-texto);
}
.da-visor-nome small { font-size: 12px; color: var(--da-texto-fraco); }
.da-visor-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.da-visor .btn-ghost {
  min-width: 36px;
  min-height: 36px;
  color: var(--da-ouro);
  background: rgba(255, 215, 0, 0.05);
  border: 1px solid rgba(255, 215, 0, 0.5);
  border-radius: 8px;
}
.da-visor .btn-ghost:hover { color: #000; background: var(--da-ouro); }
.da-visor .btn:focus-visible { outline: 2px solid var(--da-ouro); outline-offset: 2px; }
.da-visor-zoom {
  min-width: 48px;
  font-size: 12.5px;
  text-align: center;
  color: var(--da-texto-fraco);
  font-variant-numeric: tabular-nums;
}
.da-visor-palco {
  flex: 1 1 auto;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px;
  touch-action: pan-x pan-y;      /* a pinça é do visualizador (js), a rolagem é do navegador */
  overscroll-behavior: contain;
}
.da-visor-palco:focus-visible { outline: 2px solid var(--da-ouro); outline-offset: -2px; }
.da-visor-img,
.da-visor-pagina {
  display: block;
  flex: 0 0 auto;
  max-width: none;
  margin: auto;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
.da-visor-pagina { margin: 0 auto; }
.da-visor-carregando,
.da-visor-erro {
  margin: auto;
  max-width: 520px;
  padding: 20px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  color: var(--da-texto-fraco);
}

/* O aviso (toast) de uma falha DENTRO do visualizador (o "⤓ Baixar") aparece por cima dele. */
body:has(.da-visor) .toast { z-index: 96; }

/* ─────────────────────────── celular e tablet ─────────────────────────── */

@media (pointer: coarse) {
  .da-so-mouse { display: none; }
  .fin-modulo .da-btn { min-height: 44px; }
  .fin-modulo .da-acoes-item .btn,
  .fin-janela .da-clipe,
  .da-visor .btn { min-height: 40px; }
}
@media (max-width: 560px) {
  .da-zona-acoes { flex-direction: column; }
  .fin-modulo .da-btn { width: 100%; }
  .da-item { grid-template-columns: 44px minmax(0, 1fr); }
  .da-acoes-item { grid-column: 1 / -1; justify-content: flex-start; }
  .da-visor-barra { padding: 8px 10px; }
  .da-visor-acoes { width: 100%; justify-content: space-between; }
  .da-visor-palco { padding: 10px 6px; }
}
@media (forced-colors: active) {
  .da-zona, .da-item, .da-ocr, .da-ico { border: 1px solid CanvasText; }
  .fin-modulo label.da-auto input, .fin-modulo label.da-auto .redp-campo { outline: 2px solid Highlight; }
}