/* Tela Transferência entre contas (Financeiro > Opções auxiliares > Transferências).
   Medidas tiradas da captura transferencia-contas (janela de 1440 px, escala 1): faixa de aviso de 68 px,
   cartões com cabeçalho cinza de 73 px, campos de 38 px em três colunas de 356 px com 30 px de vão,
   cartões separados por 16 px. Cores: borda #d9dee2, faixa #f6f6f6, campo #c7ced4, rótulo #616a71.
   Prefixo tf-; o estilo vale só dentro desta rota. */
#view-root[data-view='account-transfers'] {
  --tf-dark: #0f1921;
  --tf-line: #d9dee2;
  --tf-band: #f6f6f6;
  --tf-field: #c7ced4;
  --tf-label: #616a71;
  --tf-hint: #737b81;
  --tf-text: #262b2f;
  --tf-green: #1f8a43;
  --tf-red: #c9302c;
  font-family: 'Source Sans Pro', 'Source Sans 3', system-ui, sans-serif;
  color: var(--tf-text);
}

.topbar h1[data-route='account-transfers']::before {
  content: ''; display: inline-block; width: 24px; height: 24px; margin-right: 8px; vertical-align: -4px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23262b2f'%3E%3Cpath d='M7 4 2 9l5 5v-4h9V8H7zm10 6v4H8v2h9v4l5-5z'/%3E%3C/svg%3E");
}

.tf-screen { display: flex; flex-direction: column; gap: 16px; }
.tf-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.tf-icon { display: inline-flex; width: 1em; height: 1em; line-height: 1; flex: none; vertical-align: -2px; }
.tf-icon svg { display: block; width: 100%; height: 100%; }

/* Faixa de aviso (fechável). */
.tf-alert {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 44px 12px 16px;
  background: var(--tf-band); border: 1px solid var(--tf-line); border-radius: 3px; font-size: 13px; line-height: 1.35;
}
.tf-alert-icon {
  flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--tf-dark); color: #fff; font-weight: 600; font-size: 14px; font-style: italic;
}
.tf-alert-text { display: flex; flex-direction: column; gap: 1px; }
.tf-alert-text strong { font-weight: 600; font-size: 13px; }
.tf-alert-link {
  padding: 0; border: 0; background: none; color: var(--tf-text); font: inherit; font-weight: 600;
  text-decoration: underline; cursor: pointer;
}
.tf-alert-link:disabled { cursor: not-allowed; }
.tf-alert-close {
  position: absolute; top: 50%; right: 16px; transform: translateY(-50%); width: 24px; height: 24px; padding: 0;
  border: 0; background: none; color: #555; font-size: 22px; line-height: 1; cursor: pointer;
}

/* Cartões. */
.tf-card { background: #fff; border: 1px solid var(--tf-line); border-radius: 4px; overflow: hidden; }
.tf-card-head {
  display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 73px; box-sizing: border-box;
  padding: 10px 20px; background: var(--tf-band); border-bottom: 1px solid var(--tf-line);
}
.tf-card-title { margin: 0; font-size: 20px; font-weight: 400; line-height: 1.2; color: var(--tf-text); }
.tf-card-title b { font-weight: 600; }
.tf-card-title .tf-icon { margin-right: 2px; color: #878c90; font-size: 18px; }
.tf-card-sub { margin: 0; font-size: 11px; line-height: 1.4; color: var(--tf-hint); }
.tf-card-body { padding: 17px 20px 6px; }

.tf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 30px; }
.tf-field { display: flex; flex-direction: column; min-width: 0; margin-bottom: 14px; }
.tf-span-2 { grid-column: span 2; }
.tf-span-3 { grid-column: span 3; }
.tf-label { margin: 0 0 6px; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--tf-label); }
.tf-required { margin-left: 2px; color: var(--tf-red); }
.tf-hint { display: block; margin-top: 4px; font-size: 11px; line-height: 16px; color: var(--tf-hint); }

.tf-input {
  box-sizing: border-box; width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--tf-field);
  border-radius: 3px; background: #fff; color: var(--tf-text); font: inherit; font-size: 16px; line-height: 1.2;
}
.tf-input::placeholder { color: #6b7177; opacity: 1; }
.tf-input:disabled { background: #fff; cursor: not-allowed; }
.tf-input:focus-visible, .tf-date-button:focus-visible, .tf-submit:focus-visible, .tf-outline:focus-visible {
  outline: 2px solid #5b8fb9; outline-offset: 1px;
}
.tf-select {
  appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
  background: #fff center right 10px / 10px 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M5 1 9 6H1zm0 14L1 10h8z' fill='%23262b2f'/%3E%3C/svg%3E");
}
.tf-textarea { height: auto; min-height: 76px; padding: 8px 12px; resize: vertical; }
.tf-entity { display: block; }

/* Campo de data com botão de calendário. */
.tf-date { display: flex; position: relative; }
.tf-date .tf-input { border-radius: 3px 0 0 3px; }
.tf-date-button {
  flex: none; display: inline-grid; place-items: center; width: 40px; height: 38px; padding: 0; margin-left: -1px;
  border: 1px solid var(--tf-field); border-radius: 0 3px 3px 0; background: #fff; color: var(--tf-text); cursor: pointer;
}
.tf-date-button .tf-icon { font-size: 17px; }
.tf-date-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; right: 0; bottom: 0; }

/* Rodapé do formulário: Cancelar à esquerda, Transferir à direita (mesmo padrão dos outros formulários). */
.tf-actions { display: flex; justify-content: space-between; align-items: center; }
.tf-cancel, .tf-outline {
  display: inline-flex; align-items: center; height: 37px; padding: 0 12px; border: 1px solid var(--tf-dark);
  border-radius: 3px; background: #fff; color: var(--tf-text); font: inherit; font-size: 16px; line-height: 1;
  text-decoration: none; cursor: pointer; box-sizing: border-box;
}
.tf-submit {
  display: inline-flex; align-items: center; height: 37px; padding: 0 18px; border: 1px solid var(--tf-dark);
  border-radius: 3px; background: var(--tf-dark); color: #fff; font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
}
.tf-submit:hover { background: #1f2d38; }
.tf-submit:disabled { cursor: progress; opacity: .7; }

/* Lista de transferências lançadas (acrescentada abaixo do formulário). */
.tf-list .tf-card-body { padding: 0; }
.tf-table-wrap { overflow-x: auto; }
.tf-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tf-table th {
  height: 44px; padding: 0 12px; background: var(--tf-band); border-bottom: 1px solid var(--tf-line);
  font-weight: 600; text-align: left; white-space: nowrap;
}
.tf-table td { height: 50px; padding: 0 12px; border-top: 1px solid var(--tf-line); vertical-align: middle; }
.tf-table tbody tr:first-child td { border-top: 0; }
.tf-table tbody tr:nth-child(even) td { background: #f3f3f3; }
.tf-money { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.tf-state { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 13px; font-weight: 600; }
.tf-state.is-active { background: #d9efe0; color: #166a33; }
.tf-state.is-reversed { background: #e8eaec; color: #4b5258; }
.tf-actions-cell { text-align: right; white-space: nowrap; }
.tf-muted { color: var(--tf-hint); font-size: 13px; }

@media (max-width: 900px) {
  .tf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tf-span-3 { grid-column: span 2; }
}
@media (max-width: 600px) {
  .tf-grid { grid-template-columns: minmax(0, 1fr); }
  .tf-span-2, .tf-span-3 { grid-column: auto; }
  .tf-actions { gap: 12px; }
}

/* Leva 5, T4: conteúdo começa 15 px abaixo da faixa de título e os campos de seleção têm 38 px (a regra global dava 44 px). */
.tf-screen { padding-top: 15px; }
#view-root[data-view='account-transfers'] select.tf-input,
#view-root[data-view='account-transfers'] .tf-input { height: 38px; min-height: 38px; }
#view-root[data-view='account-transfers'] .tf-textarea { height: auto; min-height: 76px; }