/* Estilos de importação de extratos e faturas. Usa as variáveis de estilo.css (cores, tema escuro, raios de 3 a 8px). */

/* ---------- Passos (1 de 4) ---------- */
.imp-passos { margin-bottom: 16px; }
.imp-passos-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.imp-passos-texto { min-width: 0; }
.imp-passo-num { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
.imp-passo-titulo { font-size: 20px; line-height: 1.25; letter-spacing: -.015em; margin-top: 2px; }
.imp-bolas { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex: none; }
.imp-bola {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r4);
  font-size: 14px; font-weight: 700; background: var(--superficie-3); color: var(--texto-2);
}
.imp-bola[data-estado="feito"] { background: var(--marca-suave); color: var(--marca); }
.imp-bola[data-estado="atual"] { background: var(--marca); color: var(--marca-texto); box-shadow: var(--sombra-marca); }
.imp-trilho { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.imp-trilho span { height: 4px; border-radius: var(--r1); background: var(--superficie-3); transition: background var(--t2); }
.imp-trilho span[data-ativo] { background: var(--marca); }

/* ---------- Quadro de cada passo ---------- */
.imp-cartao { padding: 18px 16px; }
.imp-cartao-titulo { font-size: 17px; line-height: 1.3; letter-spacing: -.01em; }
.imp-nota { font-size: 13px; line-height: 1.45; color: var(--texto-3); margin-top: 4px; }
.imp-nota strong { color: var(--texto-2); }
.imp-aviso { margin-bottom: 0; }
.imp-aviso-atencao { background: var(--ambar-suave); }
.imp-aviso-atencao .ic { color: var(--ambar); }

/* destino: segmentado + conta/cartão (lado a lado no computador) */
.imp-destino { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; align-items: start; }
.imp-destino .form-bloco, .imp-destino .campo { margin-bottom: 14px; }
.imp-sem-destino { border: 1px dashed var(--borda-forte); border-radius: var(--r4); margin-bottom: 14px; }

/* destino e abas extrato × nota: no celular os rótulos longos quebram de linha em vez de cortar */
.imp-seg button { height: auto; min-height: 42px; padding: 6px 10px; line-height: 1.25; }
.imp-seg button span { white-space: normal; text-align: left; }

/* área de arrastar o arquivo */
.imp-zona {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: 210px; padding: 26px 16px; border: 2px dashed var(--borda-forte); border-radius: var(--r5);
  background: var(--superficie-2); transition: border-color var(--t1), background var(--t1);
}
.imp-zona-ativa { border-color: var(--marca); background: var(--marca-suave); }
.imp-zona-ocupada { border-style: solid; border-color: var(--borda); }
.imp-zona-off { opacity: .6; }
.imp-zona-ic {
  width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--r4);
  background: var(--marca-suave); color: var(--marca);
}
.imp-zona-titulo { font-size: 17px; font-weight: 700; color: var(--texto); margin-top: 12px; overflow-wrap: anywhere; }
.imp-enviando { display: flex; flex-direction: column; align-items: center; width: 100%; }
.imp-enviando .giro { width: 28px; height: 28px; }
.imp-progresso { width: min(320px, 100%); margin-top: 14px; }

/* antes do envio: só o arquivo original do banco é lido (PDF escaneado, foto ou print não) */
.imp-original {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--r3);
  background: var(--superficie-2); border: 1px solid var(--borda); color: var(--texto-2); font-size: 13px; line-height: 1.45;
}
.imp-original .ic { flex: none; color: var(--marca); margin-top: 1px; }
.imp-original strong { color: var(--texto); }

/* privacidade */
.imp-privacidade {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--r4);
  background: var(--verde-suave); border: 1px solid color-mix(in srgb, var(--verde) 28%, transparent); color: var(--texto-2); font-size: 14px;
}
.imp-privacidade .ic { color: var(--verde); margin-top: 1px; }
.imp-privacidade strong { display: block; color: var(--texto); }
.imp-privacidade p { margin-top: 2px; }

/* ---------- Passo 2: conferir ---------- */
.imp-arquivo { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.imp-arquivo .meio { flex: 1; min-width: 0; }
.imp-arquivo strong { display: block; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.imp-arquivo .meio > span { display: block; font-size: 13px; color: var(--texto-3); }
.imp-arquivo-ic {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: var(--r3);
  background: var(--marca-suave); color: var(--marca);
}
.imp-resumo {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; padding: 12px 14px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r4); box-shadow: var(--sombra-1); font-size: 14px; color: var(--texto-2);
}
.imp-resumo strong { color: var(--texto); }
.imp-resumo-valores { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.imp-resumo-valores .num { font-weight: 600; }
/* compras parceladas do cartão: as parcelas futuras que entram nas próximas faturas e a opção de não lançar */
.imp-parcelas {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px 4px; border-radius: var(--r4);
  background: var(--marca-suave); border: 1px solid color-mix(in srgb, var(--marca) 22%, transparent); color: var(--texto-2); font-size: 14px;
}
.imp-parcelas-ic {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r3);
  background: var(--superficie); color: var(--marca);
}
.imp-parcelas-meio { flex: 1; min-width: 0; }
.imp-parcelas-titulo { font-weight: 600; line-height: 1.4; color: var(--texto); }
.imp-parcelas .interruptor { margin-top: 8px; border-top: 1px solid color-mix(in srgb, var(--marca) 18%, transparent); }
.imp-proximas { color: var(--marca); font-weight: 600; }
.imp-parcelas-pronto { align-items: center; padding-bottom: 14px; }
.imp-filtros { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.imp-filtros .chips { min-width: 0; }
.imp-marcar { display: flex; gap: 18px; font-size: 14px; }
.imp-lista-vazia { padding: 16px; margin: 0; }

.imp-linha { padding-left: 12px; gap: 12px; }
/* descrição do banco em até duas linhas e o resto da linha quebrando, em vez de cortar no celular */
.imp-linha .linha-titulo { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.imp-linha .linha-sub { flex-wrap: wrap; row-gap: 2px; overflow: visible; }
.imp-linha .linha-sub > span { white-space: nowrap; }
.imp-linha:hover { background: var(--superficie-2); }
.imp-linha-corpo {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none;
  color: inherit; text-align: left; cursor: pointer;
}
.imp-linha-corpo:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: var(--r2); }
.imp-fora .imp-linha-corpo, .imp-hist.imp-fora .linha-meio { opacity: .5; }
/* histórico: as contagens (importados, parcelas futuras, repetidos) quebram de linha no celular em vez de cortar */
.imp-hist .linha-sub > span { white-space: normal; }
.imp-dup {
  display: flex; align-items: flex-start; gap: 4px; margin-top: 4px; font-size: 12px; font-weight: 600; line-height: 1.35;
  color: color-mix(in srgb, var(--ambar) 78%, var(--texto)); overflow-wrap: anywhere;
}
.imp-dup .ic { margin-top: 1px; }

/* barra com Voltar / Continuar: fica à vista no fim da tela (acima da barra de navegação no celular) */
.imp-barra {
  position: sticky; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 10;
  display: flex; gap: 8px; margin-top: 16px; padding: 10px; border: 1px solid var(--borda); border-radius: var(--r4);
  background: var(--superficie); box-shadow: var(--sombra-2);
}
.imp-barra .botao { flex: 1; min-width: 0; }
.imp-barra .botao span { overflow: hidden; text-overflow: ellipsis; }

/* ---------- Passo 4: pronto ---------- */
.imp-pronto-ic {
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--r4); margin-bottom: 12px;
  background: var(--verde-suave); color: var(--verde);
}
.imp-contagem { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.imp-contagem > div { padding: 12px; border: 1px solid var(--borda); border-radius: var(--r4); background: var(--superficie); min-width: 0; }
.imp-contagem strong { display: block; font-size: 24px; line-height: 1.15; font-weight: 700; font-variant-numeric: tabular-nums; }
.imp-contagem span { display: block; font-size: 13px; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; }
.imp-saldo { padding: 12px 14px; border-radius: var(--r3); background: var(--superficie-2); font-size: 14px; color: var(--texto-2); }
.imp-saldo strong { color: var(--texto); }
.imp-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
/* confirmar: no celular, o botão principal em cima e os dois na largura toda */
.imp-acoes-confirmar { flex-direction: column; flex-wrap: nowrap; }
.imp-acoes-confirmar .botao { width: 100%; }
.imp-desfazer { color: var(--vermelho); font-size: 14px; }
.imp-desfazer[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Celular pequeno e computador ---------- */
@media (max-width: 379px) {
  .imp-linha .icone-cat { display: none; }
  .imp-bola { width: 28px; height: 28px; font-size: 13px; }
  .imp-acoes .botao { width: 100%; }
}
@media (min-width: 720px) {
  .imp-cartao { padding: 22px 24px; }
  .imp-destino { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .imp-destino .form-bloco > .seg { margin-top: 8px; }
  .imp-seg button span { white-space: nowrap; text-align: center; }
  .imp-zona { min-height: 240px; }
  .imp-acoes-confirmar { flex-direction: row-reverse; justify-content: flex-start; }
  .imp-acoes-confirmar .botao { width: auto; }
}
@media (min-width: 1024px) {
  .imp-passo-titulo { font-size: 22px; }
  .imp-barra { bottom: 16px; justify-content: flex-end; }
  .imp-barra .botao { flex: none; }
}