/* ══════════════════════════════════════════════════════════════════════════
   IMPORTAÇÃO DE PACIENTES (.xlsx) — modal e botão da topbar
   ══════════════════════════════════════════════════════════════════════════

   Identidade fixada pelo dono para este módulo: fundo PRETO ABSOLUTO
   (#000000), bordas e ações na liga DOURADO (#FFD700) → CARAMELO (#D4A373),
   texto branco-gelo, sans-serif limpa, retângulos finos com cantos de 8 a
   12 px e "vidro jateado" plano (backdrop-filter). Mesmos tokens de
   financeiro.css / folha.css / acesso-seguro.css — o módulo não inventa cor.

   ESCOPO. Tudo aqui vive sob `#modal.importacao` (o modal genérico do ERP
   com a classe posta por js/importacao-pacientes.js) ou sob `.imp-btn-topo`.
   A classe SAI quando o modal fecha (observer no JS) — sem isso o próximo
   formulário a abrir, de qualquer tela, viria preto. Nada aqui alcança as
   demais telas.

   BORDA EM DEGRADÊ SEM PERDER O VIDRO. `border-image` não respeita
   `border-radius`, e pintar o degradê como `background` da caixa mataria a
   transparência. A borda é um ::before de 1 px com o degradê, recortado por
   máscara (padding-box XOR border-box): o miolo continua translúcido. */

#modal.importacao {
  --imp-preto: #000000;
  --imp-ouro: #FFD700;
  --imp-caramelo: #D4A373;
  --imp-liga: linear-gradient(135deg, var(--imp-ouro) 0%, var(--imp-caramelo) 100%);
  --imp-liga-suave: linear-gradient(135deg, rgba(255, 215, 0, .14) 0%, rgba(212, 163, 115, .14) 100%);
  --imp-vidro: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
  --imp-fosco: blur(18px) saturate(150%);
  --imp-borda: rgba(255, 215, 0, .28);
  --imp-texto: #F5F1E6;
  --imp-texto-fraco: rgba(245, 241, 230, .64);
  --imp-canto-1: 12px;   /* modal */
  --imp-canto-2: 10px;   /* zona de arquivo, painéis */
  --imp-canto-3: 8px;    /* botão, selo, cartão */
  --imp-alerta: #FF6B5E;
  --imp-verde: #4CD97B;
  --imp-fonte: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
               'Inter', Arial, sans-serif;

  background: rgba(0, 0, 0, .84);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

#modal.importacao .modal {
  position: relative;
  background: var(--imp-preto);
  background-image: var(--imp-vidro);
  -webkit-backdrop-filter: var(--imp-fosco);
  backdrop-filter: var(--imp-fosco);
  border: none;
  border-radius: var(--imp-canto-1);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .05) inset;
  color: var(--imp-texto);
  font-family: var(--imp-fonte);
  max-width: 640px;
}
#modal.importacao .modal::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--imp-liga);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
#modal.importacao h3 {
  color: var(--imp-ouro);
  font-family: var(--imp-fonte);
  font-weight: 600;
  letter-spacing: .01em;
  font-size: 18px;
  margin: 0 0 14px;
}
#modal.importacao .modal-close { color: var(--imp-caramelo); }
#modal.importacao .modal-close:hover { color: var(--imp-ouro); }

/* ── corpo ─────────────────────────────────────────────────────────────── */
.imp-modulo { display: grid; gap: 14px; font-size: 14px; line-height: 1.45; }
.imp-modulo p { margin: 0; }
.imp-intro { color: var(--imp-texto-fraco); }
.imp-intro strong { color: var(--imp-texto); font-weight: 600; }

/* zona de escolha do arquivo: retângulo fino, vidro plano, borda em liga */
.imp-zona {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border-radius: var(--imp-canto-2);
  background: var(--imp-vidro);
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.imp-zona::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(255, 215, 0, .55), rgba(212, 163, 115, .45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.imp-zona:hover, .imp-zona.arrastando { background: var(--imp-liga-suave); }
.imp-zona.com-arquivo::before { background: var(--imp-liga); }
.imp-zona-icone {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--imp-canto-3);
  background: var(--imp-liga);
  color: var(--imp-preto);
  font-size: 20px; font-weight: 700;
}
.imp-zona-texto { display: grid; gap: 2px; min-width: 0; }
.imp-zona-texto strong { color: var(--imp-texto); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-zona-texto span { color: var(--imp-texto-fraco); font-size: 12.5px; }

/* aviso do consentimento: painel fino, texto gelo, título na liga */
.imp-lgpd {
  padding: 12px 14px;
  border-radius: var(--imp-canto-2);
  border: 1px solid var(--imp-borda);
  background: rgba(255, 215, 0, .05);
  color: var(--imp-texto-fraco);
  font-size: 13px;
}
.imp-lgpd strong { color: var(--imp-ouro); font-weight: 600; }
.imp-lgpd em { color: var(--imp-texto); font-style: normal; font-weight: 600; }

.imp-erro {
  padding: 10px 14px;
  border-radius: var(--imp-canto-3);
  border: 1px solid rgba(255, 107, 94, .45);
  background: rgba(255, 107, 94, .10);
  color: var(--imp-alerta);
  font-size: 13px;
}
.imp-erro[hidden] { display: none; }

/* ── resumo da simulação / resultado ───────────────────────────────────── */
.imp-cartoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.imp-cartao {
  padding: 10px 12px;
  border-radius: var(--imp-canto-3);
  border: 1px solid rgba(255, 255, 255, .08);
  background: var(--imp-vidro);
  display: grid; gap: 2px;
}
.imp-cartao b { font-size: 20px; font-weight: 600; color: var(--imp-texto); font-variant-numeric: tabular-nums; }
.imp-cartao span { font-size: 11.5px; color: var(--imp-texto-fraco); letter-spacing: .02em; text-transform: uppercase; }
.imp-cartao.ouro { border-color: var(--imp-borda); }
.imp-cartao.ouro b { color: var(--imp-ouro); }
.imp-cartao.alerta b { color: var(--imp-alerta); }
.imp-cartao.verde b { color: var(--imp-verde); }

.imp-secao { display: grid; gap: 6px; }
.imp-secao h4 {
  margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--imp-caramelo);
}
.imp-lista {
  margin: 0; padding: 8px 12px;
  max-height: 160px; overflow: auto;
  border-radius: var(--imp-canto-3);
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
  list-style: none;
  font-size: 12.5px; color: var(--imp-texto-fraco);
}
.imp-lista li { padding: 3px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.imp-lista li:last-child { border-bottom: none; }
.imp-lista li b { color: var(--imp-texto); font-weight: 600; }
.imp-selos { display: flex; flex-wrap: wrap; gap: 6px; }
.imp-selo {
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--imp-borda);
  background: rgba(255, 215, 0, .06);
  font-size: 12px; color: var(--imp-texto);
}
.imp-selo.fraco { border-color: rgba(255, 255, 255, .1); color: var(--imp-texto-fraco); background: transparent; }
.imp-nota { font-size: 12.5px; color: var(--imp-texto-fraco); }

/* ── carregando ────────────────────────────────────────────────────────── */
.imp-carregando {
  display: grid; justify-items: center; gap: 14px;
  padding: 26px 10px 18px;
  text-align: center;
}
.imp-anel {
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid rgba(255, 215, 0, .16);
  border-top-color: var(--imp-ouro);
  border-right-color: var(--imp-caramelo);
  animation: imp-girar .9s linear infinite;
}
@keyframes imp-girar { to { transform: rotate(360deg); } }
.imp-carregando p { color: var(--imp-texto); font-weight: 500; }
.imp-carregando small { color: var(--imp-texto-fraco); font-size: 12.5px; }
.imp-barra {
  width: 100%; height: 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); overflow: hidden;
}
.imp-barra i {
  display: block; height: 100%; width: 0;
  background: var(--imp-liga);
  border-radius: inherit;
  transition: width .2s;
}
.imp-barra.indeterminada i {
  width: 38%;
  animation: imp-varrer 1.2s ease-in-out infinite;
}
@keyframes imp-varrer { 0% { transform: translateX(-110%); } 100% { transform: translateX(290%); } }

/* ── botões ────────────────────────────────────────────────────────────── */
.imp-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.imp-btn {
  position: relative;
  padding: 10px 18px;
  border-radius: var(--imp-canto-3);
  border: none;
  font-family: var(--imp-fonte);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: transform .12s, filter .15s, opacity .15s;
}
.imp-btn:active { transform: translateY(1px); }
.imp-btn:disabled { opacity: .45; cursor: not-allowed; }
.imp-btn-ouro { background: var(--imp-liga); color: var(--imp-preto); }
.imp-btn-ouro:not(:disabled):hover { filter: brightness(1.08); }
.imp-btn-ghost { background: transparent; color: var(--imp-texto); }
.imp-btn-ghost::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(255, 215, 0, .7), rgba(212, 163, 115, .6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.imp-btn-ghost:not(:disabled):hover { background: var(--imp-liga-suave); }
#modal.importacao .imp-btn:focus-visible { outline: 2px solid var(--imp-ouro); outline-offset: 2px; }

/* botão da topbar (fora do modal): a única regra que vive na tela clara.
   Preto com liga na borda, para não competir com o "+ Novo Paciente" azul. */
.imp-btn-topo {
  position: relative;
  background: #000;
  color: #FFD700;
  border: none;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
}
.imp-btn-topo::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, #FFD700, #D4A373);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.imp-btn-topo:hover { background: #111; }

@media (max-width: 640px) {
  .imp-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .imp-acoes { flex-direction: column-reverse; }
  .imp-btn { width: 100%; }
}