/* Visual do sistema: fica por cima do Bootstrap e aplica a identidade da TLS Soluções
   (tinta #0B1220, cobalto #2450FF, fonte Manrope). */

:root {
  --tinta: #0b1220;
  --tinta-2: #4a5468;
  --tinta-3: #6b7489;
  --linha: #e3e6ed;
  --fundo: #f5f6f8;
  --fundo-2: #eceef3;
  --superficie: #ffffff;
  --acento: #2450ff;
  --acento-escuro: #1a3fd9;
  --acento-suave: #e8edff;
  --positivo: #15803d;
  --negativo: #b91c1c;

  --menu-aberto: 248px;
  --menu-fechado: 68px;
  --menu-largura: var(--menu-aberto);

  --bs-body-font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-font-size: .9375rem;
  --bs-body-color: var(--tinta);
  --bs-body-color-rgb: 11, 18, 32;
  --bs-body-bg: var(--fundo);
  --bs-secondary-color: var(--tinta-3);
  --bs-border-color: var(--linha);
  --bs-border-radius: .5rem;
  --bs-primary: var(--acento);
  --bs-primary-rgb: 36, 80, 255;
  --bs-success-rgb: 21, 128, 61;
  --bs-danger-rgb: 185, 28, 28;
  --bs-warning-rgb: 217, 119, 6;
  --bs-link-color-rgb: 36, 80, 255;
  --bs-link-hover-color-rgb: 26, 63, 217;

  --acento-texto: #1a3fd9;   /* azul usado como cor de texto (menu ativo, selos) */
  --logo-tinta: #0b1220;     /* letras L e S e as barras do T */
  --sombra: 11, 18, 32;
}

/* Modo escuro: azul-marinho no mesmo tom do T da TLS (cobalto #2450FF), que segue como destaque. */
html[data-tema='escuro'] {
  color-scheme: dark;
  --tinta: #e6eaf7;
  --tinta-2: #b3bcd6;
  --tinta-3: #8792b3;
  --linha: #222c50;
  --fundo: #070b1c;
  --fundo-2: #172043;
  --superficie: #0e1531;
  --acento: #2450ff;
  --acento-escuro: #3b63ff;
  --acento-suave: rgba(36, 80, 255, .24);
  --acento-texto: #9db1ff;
  --positivo: #3ccf86;
  --negativo: #f47373;
  --logo-tinta: #e6eaf7;
  --sombra: 0, 0, 0;

  --bs-body-color-rgb: 230, 234, 247;
  --bs-success-rgb: 60, 207, 134;
  --bs-danger-rgb: 244, 115, 115;
  --bs-link-color-rgb: 126, 152, 255;
  --bs-link-hover-color-rgb: 166, 186, 255;
  --bs-secondary-bg: var(--fundo-2);
  --bs-tertiary-bg: var(--fundo-2);
  --bs-emphasis-color: #ffffff;
}
html[data-tema='escuro'] .text-success { color: var(--positivo) !important; }
html[data-tema='escuro'] .text-danger { color: var(--negativo) !important; }
html[data-tema='escuro'] .text-warning-emphasis { color: #f5c26b !important; }
html[data-tema='escuro'] .badge.text-bg-warning { background: rgba(245, 158, 11, .18) !important; color: #f5c26b !important; }
html[data-tema='escuro'] .badge.text-bg-success { background: rgba(60, 207, 134, .16) !important; color: var(--positivo) !important; }
html[data-tema='escuro'] .badge.text-bg-danger { background: rgba(244, 115, 115, .16) !important; color: var(--negativo) !important; }
html[data-tema='escuro'] .btn-icone.perigo:hover { background: rgba(244, 115, 115, .16); }
html[data-tema='escuro'] .menu-item.ativo { background: rgba(76, 116, 255, .28); color: #e3e9ff; }
html[data-tema='escuro'] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
html[data-tema='escuro'] .alert { --bs-alert-bg: var(--fundo-2); --bs-alert-border-color: var(--linha); --bs-alert-color: var(--tinta); }
html[data-tema='escuro'] .modal { --bs-modal-bg: var(--superficie); --bs-modal-border-color: var(--linha); }
html[data-tema='escuro'] .form-control, html[data-tema='escuro'] .form-select { background-color: var(--fundo); }
html[data-tema='escuro'] .login-tls { box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .8); }

body { -webkit-font-smoothing: antialiased; }
h1, .h4 { font-size: 1.375rem; font-weight: 600; letter-spacing: -.015em; }
h2, .h5, .h6 { font-weight: 600; letter-spacing: -.01em; }
.h6 { font-size: .9375rem; }
a { text-decoration: none; }
.valor { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Estrutura ---------------------------------------------------------- */

.conteudo { max-width: 1560px; padding: 1.25rem 1rem 3rem; }
.acesso .conteudo { min-height: 100vh; max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; }
.acesso .conteudo > .row { width: 100%; margin-inline: 0; }

.barra-movel {
  position: sticky; top: 0; z-index: 1020;
  display: flex; align-items: center; gap: .5rem;
  height: 56px; padding: 0 .75rem;
  background: var(--superficie); border-bottom: 1px solid var(--linha);
}
.barra-movel .menu-nome { font-weight: 600; margin-right: auto; color: var(--tinta); }

/* --- Menu lateral: no celular é uma gaveta; no computador fica fixo ou minimizado --- */

.menu {
  position: fixed; inset: 0 auto 0 0; z-index: 1040;
  width: var(--menu-aberto);
  display: flex; flex-direction: column; gap: .75rem;
  padding: .75rem;
  overflow: hidden;
  background: var(--superficie); border-right: 1px solid var(--linha);
  transform: translateX(-100%); visibility: hidden;
  transition: transform .2s ease, visibility .2s, width .16s ease;
}
.menu-aberto-movel .menu { transform: none; visibility: visible; }
.menu-aberto-movel body { overflow: hidden; }

.menu-fundo { position: fixed; inset: 0; z-index: 1030; background: rgba(var(--sombra), .35); display: none; }
.menu-aberto-movel .menu-fundo { display: block; }

.menu-topo, .menu-rodape {
  display: flex; align-items: center; gap: .625rem;
  width: calc(var(--menu-aberto) - 1.5rem - 1px);
  flex: none;
}
.menu-topo { height: 44px; padding: 0 .375rem; }
/* Botão do modo escuro no canto superior direito (no celular ele fica na barra de cima). */
.btn-icone.tema-canto { display: none; }
html[data-tema="escuro"] .menu-logo { box-shadow: inset 0 0 0 1px var(--linha); }
.menu-marca { display: flex; align-items: center; gap: .625rem; color: var(--tinta); min-width: 0; margin-right: auto; }
.menu-marca:hover { color: var(--tinta); }
.menu-logo {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  background: #0b1220; color: #fff; font-size: 1rem;
}
.menu-logo svg { width: 14px; height: auto; }
/* Marca: TLS inteira com o nome do sistema; o quadrado com o T só aparece com o menu recolhido. */
.menu-simbolo { display: none; }
.menu-logotipo { display: flex; align-items: center; gap: .75rem; height: 32px; white-space: nowrap; }
.menu-logotipo svg { height: 22px; width: auto; flex: none; }
.menu-divisor { width: 1px; height: 22px; background: var(--linha); flex: none; }
.menu-logotipo .menu-nome { font-size: 1.0625rem; }
.menu-nome { font-weight: 600; letter-spacing: -.01em; }

.menu-novo, .menu-item {
  display: flex; align-items: center; gap: .75rem;
  height: 42px; padding: 0 .75rem; border-radius: .5rem;
  white-space: nowrap; overflow: hidden;
}
.menu-novo i, .menu-item i { flex: none; width: 20px; text-align: center; font-size: 1.0625rem; }
.menu-novo { flex: none; background: var(--acento); color: #fff; font-weight: 500; }
.menu-novo:hover { background: var(--acento-escuro); color: #fff; }

.menu-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.menu-item { color: var(--tinta-2); }
.menu-item:hover { background: var(--fundo-2); color: var(--tinta); }
.menu-item.ativo { background: var(--acento-suave); color: var(--acento-texto); font-weight: 500; }

.menu-rodape { padding: .75rem .375rem 0; border-top: 1px solid var(--linha); }
.menu-avatar {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--fundo-2); color: var(--tinta-2); font-size: .8125rem; font-weight: 600;
}
.menu-usuario { min-width: 0; flex: 1; line-height: 1.25; }
.menu-usuario div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-usuario .nome { font-size: .875rem; font-weight: 500; }
.menu-usuario .email { font-size: .75rem; color: var(--tinta-3); }
.menu-rotulo { transition: opacity .12s ease; }
.menu .menu-fixar { display: none; }

@media (min-width: 992px) and (hover: hover) {
  html[data-menu='min'] { --menu-largura: var(--menu-fechado); }

  .barra-movel, .menu-fundo, .menu-fechar { display: none !important; }
  .menu { width: var(--menu-largura); transform: none; visibility: visible; }
  .menu .menu-fixar { display: inline-grid; }
  .principal { margin-left: var(--menu-largura); transition: margin-left .16s ease; }
  .acesso .principal { margin-left: 0; }
  .principal { position: relative; }
  .btn-icone.tema-canto { display: inline-grid; position: absolute; top: .375rem; right: .25rem; z-index: 5; }
  .conteudo { padding: 2rem 2.5rem 4rem; }

  /* Minimizado: só os ícones. Passar o mouse mostra o menu por cima da página. */
  html[data-menu='min'] .menu .menu-rotulo { opacity: 0; }
  html[data-menu='min'] .menu:not(.sem-espiar):hover,
  html[data-menu='min'] .menu:not(.sem-espiar):has(:focus-visible) {
    width: var(--menu-aberto);
    box-shadow: 8px 0 24px rgba(var(--sombra), .08);
  }
  html[data-menu='min'] .menu:not(.sem-espiar):hover .menu-rotulo,
  html[data-menu='min'] .menu:not(.sem-espiar):has(:focus-visible) .menu-rotulo { opacity: 1; }

  /* Recolhido mostra o T; ao espiar (mouse por cima) volta a marca inteira. */
  html[data-menu='min'] .menu .menu-simbolo { display: grid; }
  html[data-menu='min'] .menu .menu-logotipo { display: none; }
  html[data-menu='min'] .menu:not(.sem-espiar):hover .menu-simbolo,
  html[data-menu='min'] .menu:not(.sem-espiar):has(:focus-visible) .menu-simbolo { display: none; }
  html[data-menu='min'] .menu:not(.sem-espiar):hover .menu-logotipo,
  html[data-menu='min'] .menu:not(.sem-espiar):has(:focus-visible) .menu-logotipo { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .menu, .principal, .menu-rotulo { transition: none; }
}

/* --- Botões ------------------------------------------------------------- */

.btn { font-weight: 500; --bs-btn-font-size: .875rem; --bs-btn-padding-y: .5rem; --bs-btn-padding-x: .875rem; --bs-btn-border-radius: .5rem; }
.btn-sm { --bs-btn-font-size: .8125rem; --bs-btn-padding-y: .3125rem; --bs-btn-padding-x: .625rem; --bs-btn-border-radius: .4375rem; }
.btn-primary {
  --bs-btn-bg: var(--acento); --bs-btn-border-color: var(--acento);
  --bs-btn-hover-bg: var(--acento-escuro); --bs-btn-hover-border-color: var(--acento-escuro);
  --bs-btn-active-bg: var(--acento-escuro); --bs-btn-active-border-color: var(--acento-escuro);
  --bs-btn-disabled-bg: var(--acento); --bs-btn-disabled-border-color: var(--acento);
}
.btn-outline-secondary, .btn-outline-primary {
  --bs-btn-color: var(--tinta); --bs-btn-bg: var(--superficie); --bs-btn-border-color: var(--linha);
  --bs-btn-hover-color: var(--tinta); --bs-btn-hover-bg: var(--fundo-2); --bs-btn-hover-border-color: var(--linha);
  --bs-btn-active-color: var(--tinta); --bs-btn-active-bg: var(--fundo-2); --bs-btn-active-border-color: var(--linha);
}
.btn-outline-success {
  --bs-btn-color: var(--tinta-2); --bs-btn-border-color: var(--linha);
  --bs-btn-hover-color: var(--positivo); --bs-btn-hover-bg: var(--superficie); --bs-btn-hover-border-color: var(--linha);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--positivo); --bs-btn-active-border-color: var(--positivo);
}
.btn-outline-danger {
  --bs-btn-color: var(--negativo); --bs-btn-border-color: var(--linha);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--negativo); --bs-btn-hover-border-color: var(--negativo);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--negativo); --bs-btn-active-border-color: var(--negativo);
}
.btn-group .btn-outline-danger { --bs-btn-color: var(--tinta-2); --bs-btn-hover-color: var(--negativo); --bs-btn-hover-bg: var(--superficie); --bs-btn-hover-border-color: var(--linha); }
.btn-danger {
  --bs-btn-bg: var(--negativo); --bs-btn-border-color: var(--negativo);
  --bs-btn-hover-bg: #991b1b; --bs-btn-hover-border-color: #991b1b;
  --bs-btn-active-bg: #991b1b; --bs-btn-active-border-color: #991b1b;
}
.btn-link { --bs-btn-color: var(--tinta-2); --bs-btn-hover-color: var(--tinta); }

.btn-icone {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; padding: 0; flex: none;
  border: 0; border-radius: .4375rem; background: transparent;
  color: var(--tinta-3); font-size: 1rem; cursor: pointer;
}
.btn-icone:hover { background: var(--fundo-2); color: var(--tinta); }
.btn-icone.perigo:hover { background: #fee2e2; color: var(--negativo); }

.acoes { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; }
.acoes form { display: inline-flex; }
@media (hover: hover) {
  tr .acoes, li .acoes { opacity: 0; transition: opacity .1s ease; }
  tr:hover .acoes, li:hover .acoes, .acoes:focus-within { opacity: 1; }
}

/* --- Superfícies -------------------------------------------------------- */

.card {
  --bs-card-border-color: var(--linha);
  --bs-card-border-radius: .75rem;
  --bs-card-inner-border-radius: calc(.75rem - 1px);
  --bs-card-cap-bg: transparent;
  --bs-card-spacer-x: 1.25rem;
  --bs-card-spacer-y: 1.125rem;
  --bs-card-bg: var(--superficie);
}
.card.shadow-sm { box-shadow: none !important; }

.rotulo { font-size: .8125rem; color: var(--tinta-3); }
.numero { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.numero-grande { font-size: 2rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }

.saldo-contas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .875rem 1.5rem;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--linha);
}
.saldo-contas .valor { font-size: .9375rem; font-weight: 500; }

.detalhe { margin-top: .625rem; font-size: .8125rem; color: var(--tinta-3); }
.detalhe div { display: flex; justify-content: space-between; line-height: 1.6; }
.detalhe div { gap: .75rem; }
.detalhe .valor { white-space: nowrap; }

.navegador {
  display: inline-flex; align-items: center;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: .5rem;
  padding: 2px;
}
.navegador h1, .navegador .mes { margin: 0; min-width: 11.5rem; text-align: center; font-size: .9375rem; font-weight: 600; letter-spacing: -.005em; }

.barra-filtros { padding: .75rem; border-bottom: 1px solid var(--linha); }
.barra-filtros .form-select { border-color: transparent; background-color: var(--fundo); font-size: .8125rem; padding-top: .375rem; padding-bottom: .375rem; }
.barra-filtros .form-select:hover { background-color: var(--fundo-2); }

.pesquisa { position: relative; display: flex; gap: .5rem; }
.pesquisa > .bi-search { position: absolute; left: .75rem; top: .75rem; font-size: .875rem; color: var(--tinta-3); pointer-events: none; }
.pesquisa .form-control { padding-left: 2.25rem; font-size: 1rem; }
.barra-pesquisa { padding: .75rem .75rem 0; }
.barra-pesquisa > .bi-search { left: 1.5rem; top: 1.25rem; }
.barra-pesquisa + .barra-filtros { padding-top: .5rem; }
.pesquisa-aviso { padding: .5rem 1.25rem; font-size: .8125rem; color: var(--tinta-2); border-bottom: 1px solid var(--linha); }
.resumo-pesquisa { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: .875rem; color: var(--tinta-2); }

.vazio { padding: 3rem 1rem; text-align: center; color: var(--tinta-3); }
.vazio i { display: block; font-size: 1.75rem; margin-bottom: .5rem; }

/* --- Seções que minimizam ----------------------------------------------- */

.secao-titulo { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; min-height: 32px; }
.secao-titulo h2 { flex: 1; min-width: 0; margin: 0; }
.secao-titulo.dentro { margin: 0; padding: .5rem .5rem .5rem 1.25rem; border-bottom: 1px solid var(--linha); }
.secao.fechada .secao-titulo.dentro { border-bottom: 0; }
.secao-resumo { display: none; font-size: .8125rem; color: var(--tinta-3); }
.secao.fechada .secao-resumo { display: inline; }
.secao.fechada .secao-corpo { display: none !important; }
.secao.fechada > .secao-titulo:not(.dentro) { margin-bottom: 0; }
.secao-alternar i { transition: transform .15s ease; }
.secao.fechada .secao-alternar i { transform: rotate(180deg); }

/* --- Tabelas e listas --------------------------------------------------- */

.table {
  --bs-table-bg: transparent;
  --bs-table-hover-bg: var(--fundo);
  --bs-table-border-color: var(--linha);
  margin-bottom: 0;
}
.table > thead th {
  padding: .625rem 1rem; font-size: .75rem; font-weight: 500; color: var(--tinta-3);
  background: transparent; white-space: nowrap;
}
.table > tbody td { padding: .6875rem 1rem; }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table td:first-child, .table th:first-child { padding-left: 1.25rem; }
.table td:last-child, .table th:last-child { padding-right: .75rem; }
.ordenar {
  display: inline-flex; align-items: center; gap: .25rem; padding: 0;
  border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
}
.ordenar:hover, [aria-sort] .ordenar { color: var(--tinta); }
.ordenar i { font-size: .75rem; opacity: .4; }
[aria-sort] .ordenar i { opacity: 1; color: var(--acento); }
@media (hover: hover) {
  th:not([aria-sort]) .ordenar i { opacity: 0; }
  th:not([aria-sort]) .ordenar:hover i, th:not([aria-sort]) .ordenar:focus-visible i { opacity: .6; }
}

.marcar-pago { display: inline-flex; }
.situacao-pago { color: var(--tinta-3); }
.situacao-pago.feito { color: var(--positivo); }
span.situacao-pago { opacity: .55; }
.programar-pagamento { color: var(--tinta-3); }
.programar-pagamento.feito { color: var(--bs-warning-text-emphasis); }
.table .data { color: var(--tinta-3); font-size: .875rem; font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) {
  .table > thead th, .table > tbody td { padding-left: .375rem; padding-right: .375rem; }
  .table td:first-child, .table th:first-child { padding-left: 1rem; }
  .table td:last-child, .table th:last-child { padding-right: .375rem; }
}

.list-group { --bs-list-group-border-color: var(--linha); --bs-list-group-bg: transparent; }
.list-group-item { padding: .5625rem .75rem .5625rem 1.25rem; min-height: 50px; }

.categoria { display: inline-flex; align-items: center; gap: .5rem; color: var(--tinta-2); font-size: .875rem; white-space: nowrap; }
.ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; }

.linha-sub { font-size: .8125rem; color: var(--tinta-3); }

/* --- Selos -------------------------------------------------------------- */

.badge { font-weight: 500; font-size: .71875rem; padding: .2em .5em; border-radius: .3125rem; }
.badge.text-bg-info, .badge.text-bg-secondary, .badge.text-bg-light { background: var(--fundo-2) !important; color: var(--tinta-2) !important; border: 0 !important; }
.badge.text-bg-warning { background: #fef3c7 !important; color: #92400e !important; }
.badge.text-bg-success { background: #dcfce7 !important; color: #166534 !important; }
.badge.text-bg-danger { background: #fee2e2 !important; color: #991b1b !important; }
.badge.text-bg-primary { background: var(--acento-suave) !important; color: var(--acento-texto) !important; }

/* --- Formulários -------------------------------------------------------- */

.form-label { font-size: .8125rem; font-weight: 500; color: var(--tinta-2); margin-bottom: .3125rem; }
.form-control, .form-select { border-color: var(--linha); border-radius: .5rem; font-size: .9375rem; padding-top: .5rem; padding-bottom: .5rem; }
.form-control:focus, .form-select:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.form-control-color { padding: .25rem; }
.form-check-input:checked { background-color: var(--acento); border-color: var(--acento); }
.form-check-input:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.form-text { font-size: .8125rem; color: var(--tinta-3); }

/* Tela inicial: conteúdo à esquerda e gráficos à direita */
.painel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.painel-graficos { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.painel-principal { min-width: 0; container-type: inline-size; }

/* Do tablet para baixo as metades viram abas; no computador a página divide ao meio. */
.painel-abas {
  display: flex; gap: 2px; margin-bottom: 1rem; padding: 2px;
  background: var(--fundo-2); border-radius: .5rem;
}
.painel-abas button {
  flex: 1; min-height: 40px; border: 0; border-radius: .4375rem; background: transparent;
  color: var(--tinta-2); font-size: .875rem; font-weight: 500;
}
.painel-abas button[aria-selected='true'] { background: var(--superficie); color: var(--tinta); box-shadow: 0 1px 2px rgba(var(--sombra), .08); }
@media (max-width: 1199.98px) {
  .painel[data-aba='dados'] .painel-graficos, .painel[data-aba='graficos'] .painel-principal { display: none; }
}
@media (min-width: 1200px) {
  .painel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .painel-abas { display: none; }
}

/* Resumo do mês e lista se adaptam à largura da metade, não à da tela. */
.resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.linha-detalhe, .linha-data { display: none; }
@container (max-width: 759.98px) {
  .resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resumo > :nth-child(2) { grid-column: 1 / -1; order: 3; }
  .col-detalhe { display: none; }
  .linha-detalhe { display: block; }
  .table > thead th, .table > tbody td { padding-left: .5rem; padding-right: .5rem; }
}
/* Celular: um cartão por linha, para valores grandes (ex.: R$ -25.582,00) caberem. */
@container (max-width: 519.98px) {
  .resumo { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
}
@container (max-width: 479.98px) {
  .col-data { display: none; }
  .linha-data { display: inline; }
}

.grafico { position: relative; height: 240px; margin-top: .75rem; }
.grafico-grande { height: 380px; margin-top: 0; }
@media (max-width: 575.98px) { .grafico-grande { height: 300px; } }
.grafico-vazio { margin: .75rem 0 0; font-size: .8125rem; color: var(--tinta-3); }

/* Despesas que entram no cálculo de outra */
.dependencias { list-style: none; margin: 0 0 .5rem; padding: 0; }
.dependencia { display: flex; align-items: center; gap: .5rem; padding: .125rem 0; font-size: .875rem; }
.dependencia .nome { flex: 1; min-width: 0; }

/* Campo de seleção com busca */
.busca { position: relative; }
.busca-nativo { display: none; }
.busca-botao { display: block; width: 100%; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busca-painel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 1010;
  width: 100%; min-width: 220px; padding: .375rem;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: .5rem;
  box-shadow: 0 8px 24px rgba(var(--sombra), .12);
}
.busca.acima .busca-painel { top: auto; bottom: calc(100% + 4px); }
.busca.direita .busca-painel { left: auto; right: 0; }
.busca-painel .form-control { font-size: .875rem; padding-top: .375rem; padding-bottom: .375rem; }
.busca-lista { list-style: none; margin: .375rem 0 0; padding: 0; max-height: 240px; overflow-y: auto; }
.busca-lista li { padding: .4rem .6rem; border-radius: .375rem; font-size: .875rem; cursor: pointer; overflow-wrap: anywhere; }
.busca-lista li.ativo { background: var(--fundo-2); }
.busca-lista li.marcado { color: var(--acento); font-weight: 600; }
.busca-lista li.criar { color: var(--acento); font-weight: 500; }
.busca-multipla li:not(.busca-aviso)::before {
  content: ''; display: inline-block; width: 1em; height: 1em; margin-right: .5rem; vertical-align: -.125em;
  border: 1px solid var(--tinta-3); border-radius: .25rem;
}
.busca-multipla li.marcado::before { border-color: var(--acento); background: var(--acento); box-shadow: inset 0 0 0 2px var(--superficie); }
.busca-lista li.busca-aviso { color: var(--tinta-3); cursor: default; }
/* Abaixo de 16px o iPhone dá zoom na tela ao tocar no campo. */
@media (max-width: 991.98px) { .busca-painel .form-control { font-size: 1rem; } }

/* --- Outros ------------------------------------------------------------- */

.alert { border-radius: .625rem; font-size: .875rem; }
.progress { --bs-progress-height: .375rem; --bs-progress-bg: var(--fundo-2); --bs-progress-bar-bg: var(--acento); --bs-progress-border-radius: 99px; }
.progresso-pagamentos { --bs-progress-height: .5rem; --bs-progress-bar-bg: var(--bs-success); }

/* --- Tela de login com a marca TLS ------------------------------------- */

.login-tls {
  width: 100%; max-width: 920px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 1rem;
  overflow: hidden; box-shadow: 0 24px 60px -30px rgba(var(--sombra), .45);
}
.login-marca {
  position: relative; display: flex; flex-direction: column; gap: 1.25rem;
  padding: 2rem 1.75rem; color: #E8ECF4;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(36, 80, 255, .28), transparent 60%),
    #0b1220;  /* fixo: o lado da marca é escuro nos dois modos */
}
html[data-tema='escuro'] .login-marca { border-right: 1px solid var(--linha); }
.login-logo { width: 150px; margin: -1.25rem 0 -1.25rem -1.5rem; }
.login-nome { font-size: 1.25rem; font-weight: 600; margin: 0; color: #fff; letter-spacing: -.01em; }
.login-frase { margin: .25rem 0 0; color: #A9B3C7; font-size: .9375rem; }
.login-assinatura { margin: 0; font-size: .75rem; letter-spacing: .04em; color: #7D8799; }
.login-form { padding: 2rem 1.75rem; }

@media (min-width: 768px) {
  .login-tls { grid-template-columns: 1.05fr 1fr; min-height: 520px; }
  .login-marca { padding: 2.75rem; justify-content: space-between; }
  .login-logo { width: 230px; margin: -2rem 0 0 -2.25rem; }
  .login-nome { font-size: 1.5rem; }
  .login-form { padding: 3rem 2.75rem; align-self: center; }
}

/* Filtro de compras na tela da fatura */
.filtro-fatura { padding: 0 1rem; }
.filtro-fatura { gap: .25rem 1rem !important; }
.bolinha { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; padding-left: 0; margin-right: 0; }
.bolinha .form-check-input { float: none; margin: 0; width: 1.15rem; height: 1.15rem; border-radius: 50%; cursor: pointer; }
.total-da-compra { font-size: .75rem; font-weight: 400; color: var(--tinta-3); white-space: nowrap; }

/* Fotografar nota no novo lançamento */
.nota-status { font-size: .875rem; text-align: center; }
.preenchido-pela-nota { background-color: var(--acento-suave); }
.nota-bloqueada { background: var(--fundo-2); border-style: dashed; }
.nota-bloqueada-icone { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex: none; border-radius: 50%; background: var(--superficie); color: var(--tinta-3); }

/* Revisão da importação de extrato */
.tabela-importacao td { vertical-align: top; }
.tabela-importacao td:nth-child(3) { min-width: 14rem; }
.tabela-importacao td:nth-child(4) { min-width: 11rem; }
.tabela-importacao tr.com-aviso { background: var(--fundo); }
@media (max-width: 767.98px) {
  /* No celular, cada linha vira um bloco: data e valor em cima, descrição e categoria embaixo. */
  .tabela-importacao thead { display: none; }
  .tabela-importacao tr { display: grid; grid-template-columns: auto 1fr auto; gap: .375rem .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--linha); }
  .tabela-importacao td { display: block; border: 0; padding: 0; min-width: 0 !important; background: transparent; }
  .tabela-importacao td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .tabela-importacao td:nth-child(2) { grid-column: 2; grid-row: 1; }
  .tabela-importacao td:nth-child(5) { grid-column: 3; grid-row: 1; }
  .tabela-importacao td:nth-child(3) { grid-column: 2 / 4; grid-row: 2; }
  .tabela-importacao td:nth-child(4) { grid-column: 2 / 4; grid-row: 3; }
}

/* Anexar extrato no cadastro da conta */
.anexar-extrato { display: flex; align-items: center; gap: .875rem; width: 100%; padding: 1rem; border: 1px dashed var(--linha); border-radius: .5rem; cursor: pointer; color: var(--tinta); }
.anexar-extrato > i { font-size: 1.25rem; color: var(--acento); }
.anexar-extrato:hover, .anexar-extrato.escolhido { border-color: var(--acento); background: var(--acento-suave); }

/* Login com Google e Microsoft */
.login-social { display: grid; gap: .5rem; }
.login-social-botao { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .625rem 1rem; color: var(--tinta); background: var(--superficie); }
.login-social-botao:hover { color: var(--tinta); background: var(--fundo); border-color: var(--tinta-3); }
.login-ou { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0; font-size: .8125rem; color: var(--tinta-3); }
.login-ou::before, .login-ou::after { content: ''; flex: 1; border-top: 1px solid var(--linha); }