/* Philnance — Importar (#/importar): estilos só desta vista (ecrãs 13 e 19 do design). Componentes partilhados no
   styles.css (.card, .banner, .btn, .lista/.linha, .badge, .valor, .grelha + .span-N). */
.imp-principal, .imp-lado { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* antes de escolher: o convite (telemóvel) / a zona onde se larga o ficheiro (computador) */
.imp-largar {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 20px; text-align: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
}
.imp-largar-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); }
.imp-largar-ico .ms { font-size: 26px; }
.imp-phil { width: 96px; height: 96px; }
.imp-largar-t { font: 400 21px/1.2 var(--serif); letter-spacing: -.01em; }
b.imp-largar-t { font: 600 16px var(--sans); letter-spacing: 0; }
.imp-largar-p { max-width: 36ch; font: 400 14px/1.45 var(--sans); color: var(--ink2); text-wrap: pretty; }
.imp-escolher { margin-top: 4px; height: 50px; padding: 0 22px; border-radius: 25px; font-size: 15px; }
.imp-link {
  display: inline; min-height: 0; padding: 0; border: 0; background: none; color: var(--accent);
  font: 600 13px var(--sans); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.imp-largar.on { border-color: var(--accent); background: var(--accent-tint); }

/* "Importar nunca apaga nada." */
.imp-nota { display: flex; align-items: center; gap: 8px; font: 400 13px var(--sans); color: var(--ink2); }
.imp-escudo { font-size: 17px; color: oklch(0.6 0.14 195); }

.imp-lendo { display: flex; align-items: center; gap: 10px; font: 500 14px var(--sans); color: var(--ink2); }
.imp-gira { color: var(--accent); animation: gira 1.2s linear infinite; }
.imp-feito > .ms { color: var(--green); }

/* depois de ler: no telemóvel cada bloco é um cartão; no computador fica tudo num cartão */
.imp-res { display: flex; flex-direction: column; gap: 14px; padding: 0; background: none; border: 0; }
.imp-fich {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 22px;
  background: var(--card); border: 1px solid var(--line);
}
.imp-fich-ico { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--chip); color: var(--ink); }
.imp-fich-ico .ms { font-size: 22px; }
.imp-fich-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.imp-fich-txt b { font: 600 14.5px var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-fich-txt small { font: 400 12.5px var(--sans); color: var(--ink2); }
.imp-trocar { flex: none; color: var(--ink3); font-size: 13px; }

/* novos · já existiam · podem ser duplicados */
.imp-contas { display: flex; flex-direction: column; padding: 0 16px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.imp-conta { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.imp-conta:last-child { border-bottom: 0; }
.imp-ponto { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--line2); }
.imp-conta.novos .imp-ponto { background: var(--accent); }
.imp-conta.sus .imp-ponto { background: var(--tan); }
.imp-conta-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; }
.imp-conta-txt b { font-weight: 500; }
.imp-conta-txt small { font: 400 12px var(--sans); color: var(--ink3); }
.imp-conta.ja { color: var(--ink2); }
.imp-conta.ja b { font-weight: 400; }
.imp-conta-n { font: 400 26px/1 var(--serif); font-variant-numeric: tabular-nums; }
.imp-rever { min-height: 32px; padding: 0; font: 500 12.5px var(--sans); position: relative; }
.imp-rever::after { content: ""; position: absolute; inset: -6px -8px; }

/* os possíveis duplicados, um a um, e a confirmação explícita */
.imp-sus { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.imp-sus.fechado { display: none; }
.imp-sus-p { font: 400 13px/1.45 var(--sans); color: var(--ink2); }
.imp-sus-lista { list-style: none; display: flex; flex-direction: column; }
.imp-sus-lista li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); line-height: 1.4; overflow-wrap: anywhere; }
.imp-sus-lista b { font: 500 13.5px var(--sans); }
.imp-sus-lista small { font: 400 12px var(--sans); color: var(--ink2); }
.imp-sus-lista .mono { font-size: .92em; }
.imp-sus-lista .valor { font-weight: 500; }
.imp-aceito { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding-top: 4px; font: 500 14px/1.4 var(--sans); cursor: pointer; }
.imp-aceito input { flex: none; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--accent); }

/* cadeia de saldos */
.imp-ok { display: flex; align-items: center; gap: 8px; font: 400 13px/1.4 var(--sans); color: var(--ink2); }
.imp-ok .ms { font-size: 18px; color: var(--green); }
.imp-cadeia { align-items: flex-start; }
.imp-cadeia .banner-txt span { color: var(--ink2); text-wrap: pretty; }
.imp-avisos { align-items: flex-start; }

/* ver os novos */
.imp-ver { align-self: flex-start; }
.imp-novos { list-style: none; display: flex; flex-direction: column; padding: 0 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.imp-novos li { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.imp-novos li:last-child { border-bottom: 0; }
.imp-novos-d { flex: none; width: 46px; color: var(--ink3); font-size: 12.5px; }
.imp-novos-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; overflow-wrap: anywhere; }
.imp-novos-t small { font-size: 12px; color: var(--ink2); }
.imp-novos .mono { font-size: 12px; }

/* pé: nota, porquê do botão desligado, Cancelar e Importar */
.imp-pe { display: flex; flex-direction: column; gap: 12px; }
.imp-porque { font: 400 13px/1.4 var(--sans); color: var(--tan); }
.imp-botoes { display: flex; flex-direction: column-reverse; gap: 8px; }
.imp-ok-b { width: 100%; height: 54px; border-radius: 27px; font-size: 16px; white-space: normal; }
.imp-cancelar { height: 48px; border: 0; background: none; color: var(--ink2); font: 500 15px var(--sans); }

/* coluna do lado */
.imp-email, .imp-hist { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; }
.imp-estado { height: 24px; padding: 0 9px; font-size: 12px; }
.imp-estado.ok { background: var(--green-tint); color: var(--green); }
.imp-estado.ok::before { content: ""; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--green); }
.imp-estado.ok { display: inline-flex; align-items: center; }
.imp-email .linha { min-height: 54px; }
.imp-email .linha-txt b { font: 600 13.5px var(--sans); }
.imp-l-ico { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--accent-tint); color: var(--accent); }
.imp-l-ico .ms { font-size: 17px; }
.imp-l-ico.verde { background: var(--green-tint); color: var(--green); }
.imp-l-ico.tan { background: var(--tan-tint); color: var(--tan); }
.imp-hist-lista { list-style: none; display: flex; flex-direction: column; }
.imp-hist-lista li {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 42px; padding: 4px 0;
  border-bottom: 1px solid var(--line); font: 400 13px var(--sans);
}
.imp-hist-lista li:last-child { border-bottom: 0; }
.imp-hist-d, .imp-hist-n { color: var(--ink2); white-space: nowrap; }
.imp-hist-r { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- computador (ecrã 19) ---------- */
@media (min-width: 1024px) {
  .imp-grelha { gap: 16px; }
  .imp-principal, .imp-lado { gap: 16px; }
  .imp-largar { min-height: 140px; justify-content: center; gap: 8px; border: 2px dashed var(--accent); background: var(--accent-tint); border-radius: 24px; }
  .imp-largar-ico { width: auto; height: auto; background: none; }
  .imp-largar-ico .ms { font-size: 34px; }
  .imp-largar-p { font-size: 13px; max-width: none; }
  .imp-largar.on { border-style: solid; }
  .imp-res { gap: 14px; padding: 18px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 24px; }
  .imp-fich { padding: 0; border: 0; border-radius: 0; background: none; }
  .imp-fich-ico { width: 40px; height: 40px; color: oklch(0.6 0.14 25); background: color-mix(in oklch, oklch(0.6 0.14 25) 16%, var(--card)); }
  .imp-contas { flex-direction: row; gap: 10px; padding: 0; border: 0; background: none; }
  .imp-conta {
    flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 0; padding: 14px 16px;
    border: 0; border-radius: 18px; background: var(--chip); color: var(--ink);
  }
  .imp-conta.novos { background: var(--accent-tint); }
  .imp-conta.sus { background: var(--tan-tint); }
  .imp-conta .imp-ponto { display: none; }
  .imp-conta-n { order: -1; font-size: 30px; }
  .imp-conta-txt b, .imp-conta.ja b { font: 600 13.5px var(--sans); }
  .imp-conta-txt small { color: var(--ink2); }
  .imp-sus, .imp-sus.fechado { display: flex; padding: 0; border: 0; border-radius: 0; background: none; }
  .imp-novos { padding: 0; border: 0; border-radius: 0; }
  .imp-pe { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; }
  .imp-porque { order: -1; flex-basis: 100%; }
  .imp-botoes { flex-direction: row; }
  .imp-ok-b { width: auto; height: 44px; border-radius: 22px; font-size: 14px; white-space: nowrap; }
  .imp-cancelar { height: 44px; padding: 0 18px; border: 1px solid var(--line2); border-radius: 22px; color: var(--ink); font: 600 14px var(--sans); }
  .imp-cancelar:hover { background: var(--chip); }
}
@media (prefers-reduced-motion: reduce) { .imp-gira { animation: none; } }