/* ====== Paleta Roxo + Azul ====== */
:root{
  --brand:#6d28d9;        /* roxo (primária) */
  --brand-600:#5b21b6;
  --brand-700:#4c1d95;
  --accent:#2563eb;       /* azul de apoio */
  --accent-600:#1d4ed8;

  --bg:#f6f7fb;
  --card-bg:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --success:#10b981;
  --danger:#ef4444;
  --warning:#f59e0b;
  --radius:14px;
  --shadow:0 6px 18px rgba(0,0,0,.06);
  
  --cat-gap: 18px;         /* vão entre o card e o extrato */
  --card-pad-x: 16px;      /* padding horizontal do .category-card */
  --avatar-size: 44px;     /* largura/altura do .cat-avatar */
  --connector-nudge: -5px; /* + direita / - esquerda */
  
  
  --iris-10: rgba(72,61,255,.10);
  --field-border: #dfe3ea;
  --iris: #6b5cff;
  --iris-20: rgba(107, 92, 255, .20);
  --field-bg: #f8f9ff;
  --field-focus-bg: #f3f2ff;


  /* Gradientes */
  --grad-hero: linear-gradient(135deg, #6d28d9 0%, #5b21b6 40%, #2563eb 100%);
  --grad-kpi-1: linear-gradient(135deg, #6d28d9, #2563eb);
  --grad-kpi-2: linear-gradient(135deg, #5b21b6, #1d4ed8);
  --grad-kpi-3: linear-gradient(135deg, #4c1d95, #2563eb);
  --grad-kpi-4: linear-gradient(135deg, #7c3aed, #3b82f6);
}

/* Dark mode (mantém vibe) */
:root[data-theme="dark"]{
  --bg:#0f172a;
  --card-bg:#111827;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --shadow:0 6px 18px rgba(0,0,0,.35);
}

/* ====== Base ====== */
body{ background:var(--bg); color:var(--text); }
.container{
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 20px;
  padding-right: 20px;
}


.card,.navbar,.dropdown-menu,.offcanvas{
  background:var(--card-bg)!important;
  border:0!important;
  border-radius:var(--radius)!important;
  box-shadow:var(--shadow);
}

.btn-primary{ background:var(--brand); border-color:var(--brand); }
.btn-primary:hover{ background:var(--brand-600); border-color:var(--brand-600); }
.btn-outline-secondary:hover{ color:#fff; background:var(--accent); border-color:var(--accent); }

/* ====== Faixa colorida no topo ====== */
.app-hero{
  /* position:relative; */
  width:100%;
  height:60px;               /* altura da faixa */
  background:var(--grad-hero);
  border-bottom-left-radius:24px;
  border-bottom-right-radius:24px;
  box-shadow: 0 10px 30px rgba(93,42,177,.25);
  margin-bottom:-80px;        /* “invade” o container branco */

}
@media (max-width: 768px){
  .app-hero{ height:70px; margin-bottom:-70px; }
}

/* ====== Cards KPI com gradiente ====== */
.card-kpi{
  color:#fff;
  background:var(--grad-kpi-1)!important;
  box-shadow: 0 12px 26px rgba(109,40,217,.25);
}
.card-kpi.kpi-2{ background:var(--grad-kpi-2)!important; }
.card-kpi.kpi-3{ background:var(--grad-kpi-3)!important; }
.card-kpi.kpi-4{ background:var(--grad-kpi-4)!important; }


.card-kpi .card-title{
  font-size: .9rem;
  letter-spacing: .2px;
  opacity: .9;
  margin-bottom: .25rem;
}
.card-kpi .display-6{
  font-size: clamp(1.15rem, 1.8vw, 1.5rem) !important; /* menor que o default do BS */
  line-height: 1.2;
  margin: .15rem 0 0;
}
@media (max-width: 576px){
  .card-kpi .display-6{ font-size: 1.25rem !important; }
}




/* ====== Badges e progresso (já tinha, mantido) */
.badge-pay{ border-radius:999px; padding:.35rem .6rem; font-weight:600; }
.badge-avista{ background:rgba(16,185,129,.15); color:var(--success); }
.badge-parc{ background:rgba(99,102,241,.15); color:#6366f1; }
.badge-recurr { background:#f59e0b !important; color:#111; }  
.progress{ height:8px; border-radius:999px; background:#e5e7eb; }
.progress-bar{ border-radius:999px; }
.progress-ok{ background:var(--success)!important; }
.progress-warn{ background:var(--warning)!important; }
.progress-over{ background:var(--danger)!important; }

/* ====== Tab bar & FAB (rodapé) ====== */
.app-tabbar{
  position:fixed; left:0; right:0; bottom:0; width:100%;
  z-index:1030; height:82px;
  background:#ced2fb;
  display:grid; grid-template-columns:repeat(5,1fr); align-items:center;
  padding:6px 8px calc(env(safe-area-inset-bottom) + 6px);
  box-shadow:0 -6px 18px rgba(0,0,0,.06);
  border-top:1px solid rgba(0,0,0,.06);
}




.app-tabbar a{
  text-decoration:none; color:var(--muted,#6b7280); font-size:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; height:100%;
}
.app-tabbar a .bi{ font-size:20px; line-height:1; display:block; }
.app-tabbar a.active{ color:#5b21b6; font-weight:600; }

/* FAB inferior (se quiser manter além do topo-direita) */
.fab-add{ position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(64px + env(safe-area-inset-bottom) + 12px);
  width:56px; height:56px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,.25); z-index:1040;
}
.fab-add .bi{ font-size:28px; }

/* ====== NOVO: botão Lançar fixo no canto superior direito ====== */
.fab-top-right{
  position:fixed; right:16px; top:16px; z-index:1050;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); border:0; color:#fff;
  box-shadow:0 12px 26px rgba(37,99,235,.35);
}
.fab-top-right:hover{ background:var(--accent-600); color:#fff; }
@media (max-width: 768px){
  .fab-top-right{ right:12px; top:12px; }
}

/* Espaço no fim da página (mobile) */
@media (max-width: 992px){
  body{ padding-bottom:calc(64px + env(safe-area-inset-bottom) + 12px); }
}



/* Opcional: reduzir espaço ao redor do botão hambúrguer e da brand */
.app-topbar .btn-hamburger { padding: .3rem .45rem; }
.app-topbar .navbar-brand   { padding-top: 0; padding-bottom: 0; }



/* ===== Estilo dos cards de categorias ===== */
.categories-list {
  display: flex;
  flex-direction: column;
  gap: 0rem;
}

.category-card {
  background: #fff;
  margin: 0;
  margin-bottom: 0.5rem !important;  /* padrão é 1rem ou mais */
  border-radius: 12px;
  padding: 1rem 1.25rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.category-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category-header small {
  font-size: .75rem;
}

.category-value span {
  font-weight: 600;
  color: #312e81; /* azul escuro */
}

/* Progress bar estilo Finapp */
.progress {
  height: 10px;
  background-color: #eef1f6;
  border-radius: 8px;
  overflow: hidden;
}

.progress-bar {
  background: linear-gradient(90deg, #6D28D9 0%, #3B82F6 100%);
  font-size: .65rem;
  font-weight: 600;
  color: #fff;
  text-align: right;
  padding-right: 4px;
  line-height: 10px;
  border-radius: 8px;
}

/* Responsivo */
@media (max-width: 576px) {
  .category-card { padding: .9rem 1rem; }
  .category-header h6 { font-size: .9rem; }
  .category-value span { font-size: .85rem; }
}

.progress-bar {
  transition: width 0.8s ease;
}

.categories-list .progress {
  height: 14px;               /* era 8/10px */
  border-radius: 999px;
}
.categories-list .progress-bar {
  line-height: 14px;          /* centraliza o % verticalmente */
  font-size: .7rem;
}
@media (max-width: 576px){
  .categories-list .progress { height: 16px; }
  .categories-list .progress-bar { line-height: 16px; }
}

.val-pos { color: var(--success); font-weight: 600; }
.val-neg { color: var(--danger);  font-weight: 700; }


/* Centraliza a brand independentemente do hambúrguer */
.app-topbar .navbar-brand.centered{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}


/* Força tamanho da logo — prioridade máxima */
.app-topbar .navbar-brand img {
  height: 52px !important;
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
}




@media (max-width: 576px){
  .app-topbar .navbar-brand img{ height: 42px !important; }
}



/* mais grossa apenas nos cards de categoria */
.category-card .progress {
  height: 14px;        /* experimente 14–16px */
  border-radius: 999px;
}
.category-card .progress-bar {
  border-radius: 999px;
  font-size: 11px;     /* deixa o % proporcional */
  line-height: 14px;   /* centraliza verticalmente o texto do % */
}

@media (max-width: 991px){
  #appDrawer {
    z-index: 2000 !important; /* fica acima da topbar */
  }
}

/* Fixa a barra superior no topo */
.app-topbar {
  position: sticky;       /* fica fixo mas respeita o fluxo */
  top: 0;
  z-index: 1050;          /* acima do conteúdo e do gradiente */
  background: var(--card-bg);
  border-radius: 0 0 20px 20px;  /* bordas suaves na parte de baixo */
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  margin-top: 0px; 
}

/* Evita que o conteúdo suba por baixo da barra */
body {
  padding-top: 0.1px; /* ajuste conforme altura da sua app-topbar */
}


/* Largura do offcanvas (menu) */
.offcanvas-start{
  width: min(40vw, 420px);   /* metade da viewport, máx 420px */
  border-right: 0 !important;
  border-radius: 0 16px 16px 0;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}

/* Se quiser 50% cravado em qualquer tela, use só: width: 50vw; */


/* No mobile o menu fica acima da topbar sem escondê-la */
@media (max-width: 991px){
  body.drawer-open .app-topbar{
    z-index: 900; /* menu fica acima, mas topbar continua lá */
  }
}

/* opcional: também oculta o fab superior, se você ainda tiver */
body.drawer-open .fab-top-right{ visibility: hidden; }

.alerta-container{
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2000;          /* acima de offcanvas/backdrop */
  display: flex;
  flex-direction: column;
  gap: 10px;
}


.month-filter {
  background: var(--card-bg);
  border-radius: 999px;
  padding: 6px 10px;
  box-shadow: var(--shadow);
}

.btn-month {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(30,136,229,.18);
  color: #1e88e5;             /* azul das setas */
  background: #ffffff;
}
.btn-month:hover {
  background: rgba(30,136,229,.06);
  color: #1565c0;
}

.month-label {
  min-width: 70px;
  text-align: center;
  font-weight: 600;
  letter-spacing: .2px;
}

/* Botão "calendário" com borda roxa discreta */
.btn-outline-iris {
  --iris: #6c4ad0;
  background: #fff;
  color: var(--iris);
  border: 1px solid rgba(108,74,208,.45);
}
.btn-outline-iris:hover {
  background: rgba(108,74,208,.08);
  color: #5637c8;
  border-color: rgba(108,74,208,.65);
}

/* Input nativo oculto porém "clicável" pelo browser */
.month-native-input{
  position: fixed;
  top: -40px;           /* fora da tela, mas renderizado */
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none; /* evita cliques do usuário, mas o JS pode chamar showPicker() */
}



/* ===== Extrato (cards) ===== */
.tx-section-title{
  color: var(--muted);
  font-weight: 700;
  margin: 16px 8px 8px;
  font-size: 14px;
}
.tx-card{
  background: var(--card-bg);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.tx-card + .tx-card{ margin-top: 10px; }
.tx-left{ display:flex; align-items:center; gap:12px; min-width: 0; }
.tx-avatar{
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
  background: linear-gradient(135deg, #7c4dff, #3b82f6);
  color:#fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.tx-title{ font-weight:700; color:var(--text); }
.tx-sub{ color:var(--muted); font-size:12px; }
.tx-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-left: 0 !important;}
.badge-ghost{
  border:1px solid rgba(0,0,0,.08);
  color: var(--muted);
  padding:.15rem .45rem; border-radius:999px; font-size:11px;
  background:#fff;
}
.badge-avista{ background: rgba(16,185,129,.15); color: var(--success); border-color: transparent; }
.badge-parc { background: rgba(124,77,255,.15); color:#7c4dff; border-color: transparent; }

.tx-amount{ font-weight:800; white-space: nowrap; }
.tx-amount.negative{ color:#111; }
.tx-amount.positive{ color:#10b981; }

/* bottom sheet largura/altura agradáveis */
.offcanvas-bottom.tx-sheet{ height: 58vh; border-top-left-radius:16px; border-top-right-radius:16px; }


/* Espaçamento mais justo nos cards de categorias */
.categories-list { display: flex; flex-direction: column; gap: 10px; }
.category-card { margin: 0; }
.category-card + .cat-extract { margin: 8px 0 2px; }


.tx-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(72,61,255,.10);
  color: #483dff;
  font-weight: 700;
}

.tx-avatar-icon i {
  font-size: 1.4rem;
  line-height: 1;
}


.cat-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
.bg-light-primary {
  background-color: rgba(72, 61, 255, 0.1);
}
.text-primary {
  color: #483dff;
}


/* === Barra de mês fixa no topo === */
.sticky-month {
  position: sticky;
  top: 0;
  z-index: 1030; /* acima de cards e conteúdos */
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  border-bottom: 1px solid #eaeaea;
}

/* espaço extra abaixo da barra fixa para evitar sobreposição */
body {
  scroll-padding-top: 70px;
}



/* barra fixa do calendário */
.monthbar-fixed{
  position: fixed;
  left: 0; right: 0;
  top: 0;                 /* será ajustado via JS para ficar colada na topbar */
  z-index: 1035;
  background-color: #fff;
  border-bottom: 1px solid #eaeaea;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

/* conteúdo interno com padding mínimo */
.monthbar-inner{
  padding: 6px 12px;      /* padding bem enxuto */
}

/* remove qualquer fundo transparente herdado */
.monthbar-fixed, .monthbar-inner, .monthbar-fixed .month-filter{
  background-color: #fff !important;
  border-radius: 0 !important;
}


/* Botões podem continuar “pill” */
.btn-month{
  border-radius: 999px;
}



/* garante layout com espaçamento fixo e boa quebra */
.category-header { display:flex; align-items:center; gap:12px; }
.cat-main { min-width: 0; }            /* permite o text-truncate funcionar */
.cat-name { line-height: 1.2; }
.cat-sub {
  line-height: 0.8;        /* mantém altura compacta */
}

/* bloco da direita colado na borda e alinhado */
.category-value { margin-left: auto; text-align: right; white-space: nowrap; }
.category-value .value-strong { font-weight: 600; color: #2b2d6a; }

/* avatar já existente — mantém o visual das categorias */
.cat-avatar {width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(72, 61, 255, 0.1);
  color: #483dff;
  flex-shrink: 0;           /* evita achatar quando o texto é longo */
}

/* se precisar, aumenta um pouco a barra de progresso */
.category-card .progress { height: 17px; border-radius: 999px; }
.category-card .progress .progress-bar { font-size: 10px; }

/* reduz o espaço entre os cards */
.category-card {
  margin-bottom: 0.5rem !important;  /* padrão é 1rem ou mais */
}

/* caso a grid use row com gap */
.row.g-3, .row.g-4, .row.g-5 {
  --bs-gutter-y: 0.5rem !important;  /* reduz o espaçamento vertical */
}

/* garante que o extrato não adicione espaço extra */
.cat-extract {
  margin-top: 0.25rem !important;
  margin-bottom: 0 !important;
}


/* Extrato com “cartão” e conector */
.cat-extract.open{
  margin-top: calc(var(--cat-gap)/2);
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid #eceff5;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  padding: 12px 12px 16px;
  position: relative;
}

/* desenha a 2ª metade do conector entrando no extrato (de cima para baixo) */
.cat-extract.open::before{
  content: "";
  position: absolute;
  top: -10px;              /* altura da bolinha acima do extrato */
  /* valor relativo ao extrato */
  left: var(--connector-x-extract, 56px);
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background:#fff;
  box-shadow: 0 0 0 2px rgba(72,61,255,.3);
}

/* bolinha de junção opcional, alinhada ao fio */
.cat-extract.open::after{
  content: "";
  position: absolute;
  top: 0;                  /* fio dentro do extrato */
  left: var(--connector-x-extract, 56px);
  transform: translateX(-50%);
  width: 2px;
  height: 8px;             /* ajuste se quiser prolongar */
  background: linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.03));
}

/* Dá um respiro extra antes do próximo card */
.cat-extract.open + .category-card {
  margin-top: 14px;
}

/* Se o card de cima estiver aberto, arredonda só a parte de cima */
.category-card.has-open{
  margin-bottom: 0;
  position: relative;      /* para ancorar o ::after */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.category-card.has-open::after{
  content: "";
  position: absolute;
  top: 100%;               /* logo abaixo do card */
  left: var(--connector-x-card, 56px);
  transform: translateX(-50%);
  width: 2px;
  height: 14px;            /* ajuste se quiser mais comprido */
  background: linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.03));
}
}



/* ---------- Cartão do form ---------- */
.form-card{
  background:#fff;
  border:1px solid #eef0f5;
  border-radius:16px;
  padding:16px;
  box-shadow: 0 6px 18px rgba(17, 24, 39, .06);
}

/* ---------- Estilo moderno dos campos ---------- */
.form-modern .form-label{
  font-weight: 600;
  color: #374151;
  margin-bottom: .35rem;
}

.form-modern .form-control,
.form-modern .form-select,
.form-modern input[type="date"],
.form-modern input[type="number"],
.form-modern input[type="text"]{
  border-radius:14px;
  border:1px solid #e6e8ef;
  background-color: var(--field-bg);
  transition: all .15s ease;
}

.form-modern .form-control:focus,
.form-modern .form-select:focus,
.form-modern input[type="date"]:focus,
.form-modern input[type="number"]:focus,
.form-modern input[type="text"]:focus{
  background-color: var(--field-focus-bg);
  border-color: var(--iris);
  box-shadow: 0 0 0 3px var(--iris-20);
}

/* Placeholder mais suave */
.form-modern ::placeholder{ color:#9aa3b2; }

/* Radios/checkbox com foco */
.form-modern .form-check-input:focus{
  box-shadow: 0 0 0 3px var(--iris-20);
  border-color: var(--iris);
}
.form-modern .form-check-input:checked{
  background-color: var(--iris);
  border-color: var(--iris);
}

/* Botão tema lilás */
.btn-iris{
  background-color: var(--iris);
  border-color: var(--iris);
  color:#fff;
}
.btn-iris:hover{ filter:brightness(.95); color:#fff; }


.avatar-btn { line-height: 1; }
.avatar-circle{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:#483dff; color:#fff; font-weight:700;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  user-select:none;
}
[data-theme="dark"] .avatar-circle{ background:#6a5bff; }




:root[data-theme='light'] {
  --bg-color: #ffffff;
  --text-color: #000000;
}

:root[data-theme='dark'] {
  --bg-color: #111111;
  --text-color: #f5f5f5;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}



.info-icon {
  line-height: 1;
  cursor: pointer;
}
.info-icon i {
  transition: color .2s ease;
}
.info-icon:hover i {
  color: #483dff; /* roxo iris */
}


.offcanvas-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #c7ccff;
    padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
    flex-wrap: nowrap !important;
}


.offcanvas-header .btn-close {
    margin-left: auto !important;
    padding: 0.5rem !important;
}


.offcanvas-title {
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}



.text-primary {
    --bs-text-opacity: 1;
    color: #17378a !important;
}






.container-auth {
  max-width: 400px;
  margin: 60px auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  padding: 2rem 1.5rem;
}

.container-auth h4 {
  font-weight: 600;
  color: #333;
  text-align: center;
  margin-bottom: 1.5rem;
}

.form-control {
  border-radius: 50px;
  border: 1px solid #ccc;
  padding: 12px 16px;
  font-size: 15px;
  transition: all 0.2s ease-in-out;
}

.form-control:focus {
  border-color: #7b68ee;
  box-shadow: 0 0 0 0.15rem rgba(123,104,238,0.25);
}

.btn-main {
  background: #7b68ee;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 12px;
  font-weight: 600;
  font-size: 16px;
  transition: 0.2s ease;
}

.btn-main:hover {
  background: #6a58dd;
}

.alert {
  border-radius: 30px;
  font-size: 0.9rem;
  padding: 10px 14px;
}


/* ===========================
   MENU LATERAL FIXO NO DESKTOP
   =========================== */
@media (min-width: 992px) {

  /* Oculta o botão hambúrguer */
  .btn-hamburger {
    display: none !important;
  }

  /* Mantém o offcanvas sempre aberto como menu fixo */
  #appDrawer {
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;

    position: fixed !important;
    left: 0;
    top: 0;
    height: 100vh;
    width: 260px !important;

    border-radius: 0 !important;
    box-shadow: 2px 0 12px rgba(0,0,0,0.08);

    z-index: 1045 !important;
  }

  /* Remove comportamento offcanvas padrão */
  #appDrawer.offcanvas-start {
    border: none !important;
  }

  /* Empurra o conteúdo */
  body {
    padding-left: 260px !important;
    margin-left: 0 !important;
    padding-top: 0 !important;
  }

  /* Garante que container não recentralize */
  .app-content, 
  .container, 
  .container-fluid {
    margin-left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Esconde o X de fechar */
  #btnCloseDrawer {
    display: none !important;
  }
}


/* Topbar só aparece no mobile */
@media (min-width: 992px){
  .app-topbar{
    display: none !important;
  }
}


#txSheet .btn-close {
    margin-right: -5px !important;
}


#txSheet .offcanvas-body {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 24px !important;
    padding-bottom: 120px !important; /* antes 24px */
}



/* Força o botão X a ir para o canto direito */
.tx-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}