/* Tema oscuro personalizado para Mis Finanzas */

body.bg-gray-100 {
  background-color: #2A2A2A !important;
  color: #f5f5f5 !important;
}

/* Tarjetas y contenedores principales */
.card,
.navbar,
.sidenav,
.dropdown-menu,
.modal-content {
  background-color: #2A2A2A !important;
  color: #f5f5f5 !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 8px 16px rgba(0, 0, 0, 0.6);
}

.card-header,
.card-body,
.card-footer {
  background-color: #2A2A2A !important;
  color: #f5f5f5 !important;
}

/* Tipografía general */
body,
p,
span,
label,
.text-muted,
.text-secondary {
  color: #f5f5f5 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #ffffff !important;
}

/* Forzar títulos numéricos de los cards del dashboard */
.numbers h5,
.numbers h5.font-weight-bolder {
  color: #ffffff !important;
}

.text-dark {
  color: #ffffff !important;
}

/* Reemplazar tono azul oscuro #344767 por blanco en textos heredados del tema base */
.text-body,
.navbar-vertical .navbar-nav > .nav-item .nav-link .nav-link-text,
.navbar-main .nav-link,
.breadcrumb-item a,
.card.card-blog .card-title a {
  color: #ffffff !important;
}

/* Tablas */
.table > :not(caption) > * > * {
  background-color: #2A2A2A !important;
  color: #f5f5f5 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Formularios */
.form-control,
.form-select {
  background-color: #1f1f1f !important;
  border-color: #444 !important;
  color: #f5f5f5 !important;
}

.form-control:focus,
.form-select:focus {
  background-color: #262626 !important;
  border-color: #6c63ff !important;
  box-shadow: 0 0 0 1px rgba(108, 99, 255, 0.5);
}

.form-control::placeholder {
  color: #b0b0b0 !important;
}

/* Badges y etiquetas */
.badge.bg-gradient-success,
.badge.bg-gradient-secondary,
.badge.bg-gradient-info,
.badge.bg-gradient-warning,
.badge.bg-gradient-danger {
  color: #ffffff !important;
}

/* Botones: mantener colores pero mejorar contraste en fondo oscuro */
.btn-light {
  background-color: #f5f5f5 !important;
  color: #2A2A2A !important;
}

.btn-outline-light {
  border-color: #f5f5f5 !important;
  color: #f5f5f5 !important;
}

.btn-outline-light:hover {
  background-color: #f5f5f5 !important;
  color: #2A2A2A !important;
}

/* Sidebar */
.sidenav {
  background-color: #1f1f1f !important;
  overflow-y: auto;
}

/* Ocultar barra de desplazamiento vertical del menú */
#sidenav-main {
  scrollbar-width: none; /* Firefox */
}

#sidenav-main::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#sidenav-main::-webkit-scrollbar-thumb {
  background: transparent;
}

.sidenav .nav-link,
.sidenav .nav-link-text {
  color: #f5f5f5 !important;
}

.sidenav .nav-link.active,
.sidenav .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Navbar superior invitados */
.navbar-main {
  background-color: #2A2A2A !important;
}

/* Bordes y separadores */
.border,
.border-top,
.border-bottom,
.border-start,
.border-end,
.horizontal {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

hr {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Gráficas: fondo de tarjeta ya es oscuro, ajustar textos */
.chartjs-render-monitor {
  color: #f5f5f5 !important;
}

/* Alertas flotantes */
#global-alert {
  background-color: #444 !important;
  color: #ffffff !important;
}