/* Philnance — um movimento (#/movimento?id=): estilos só desta vista (ecrã 09 do design: débito com fatura).
   O título (h1 do cabeçalho) fica só para leitores de ecrã: o nome aparece na vista por baixo do ícone, como no
   desenho. Componentes partilhados no styles.css; a folha de classificar em css/movimentos.css. */
.cab-mov-det .cabecalho-linha {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.cab-mov-det { gap: 0; }

.md { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.md-topo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.md-ico.cat-ico { width: 52px; height: 52px; margin-bottom: 6px; }
.md-ico.cat-ico .ms { font-size: 26px; }
.md-nome { font: 400 25px/1.05 var(--serif); letter-spacing: -.015em; overflow-wrap: anywhere; }
.md-v .num-grande .ng-int, .md-v .num-grande .ng-dec { font: 300 38px/1 var(--serif); letter-spacing: -.03em; }
.md-quando { font: 400 13px var(--sans); color: var(--ink2); }
/* o texto do banco tal como vem: só no computador (o desenho do telemóvel não o tem) */
.md-desc { display: none; font-size: 11.5px; line-height: 1.4; color: var(--ink3); overflow-wrap: anywhere; }

.md-cls { padding: 0 16px; }
.md-cls .linha { min-height: 52px; }
.md-k { color: var(--ink2); }
.md-vv { color: var(--ink); font-weight: 500; white-space: normal; text-align: right; }
.md-por { color: var(--tan); }
.md-ok { display: flex; align-items: center; gap: 6px; color: var(--green); font-weight: 500; }
.md-ok .ms { font-size: 20px; }
.md-nota { font: 400 12.5px var(--sans); color: var(--ink3); white-space: normal; text-align: right; }
.md-val .btn, .md-regra .btn { flex: none; }
.md-regra .btn { padding: 0 14px; font-size: 13px; }

.md-doc { display: flex; flex-direction: column; gap: 2px; padding: 16px 16px 14px; }
.md-doc-cab { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 6px; }
.md-doc-cab .card-t { font: 600 15px var(--sans); letter-spacing: 0; }
.md-kv { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 30px; }
.md-kv > span:first-child { color: var(--ink2); min-width: 0; overflow-wrap: anywhere; }
.md-kv > span:last-child { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.md-kv-l { min-height: 28px; font-size: 14px; }
.md-sep { height: 1px; margin: 6px 0; border: 0; background: var(--line); }
.md-var { font: 500 12.5px var(--sans); color: var(--ink3); }
.md-sobe { color: var(--tan); }
.md-desce { color: var(--green); }
.md-gmail { height: 48px; margin-top: 10px; border-radius: 24px; gap: 8px; }
.md-gmail .ms { font-size: 19px; }
.md-gmail .md-ext { font-size: 17px; color: var(--ink3); }

@media (min-width: 1024px) {
  .md { max-width: 640px; }
  .md-desc { display: block; }
  .md-nome { font-size: 30px; }
  .md-v .num-grande .ng-int, .md-v .num-grande .ng-dec { font-size: 44px; }
}