/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

/* .light-style .menu .app-brand.demo {
  height: 64px;
}

.dark-style .menu .app-brand.demo {
  height: 64px;
} */

.app-brand-logo.demo {
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: -ms-flexbox;
  display: flex;
  width: 180px;
  height: 67px;
}

.app-brand-logo.demo img {
  width: 200px;
  /* height: 67px; */
  border: 1px solid #000;
}

.app-brand-logo.demo.no-border img {
  border: none;
}

.app-brand-text.demo {
  font-size: 1.75rem;
  letter-spacing: -0.45px;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 62px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks>* {
  display: block !important;
}

.demo-inline-spacing>* {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing>* {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}

.demo-vertical-spacing.demo-only-element> :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg>* {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}

.demo-vertical-spacing-lg.demo-only-element> :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl>* {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}

.demo-vertical-spacing-xl.demo-only-element> :first-child {
  margin-top: 0 !important;
}

.rtl-only {
  display: none !important;
  text-align: left !important;
  direction: ltr !important;
}

[dir='rtl'] .rtl-only {
  display: block !important;
}

/* Dropdown buttons going out of small screens */
@media (max-width: 576px) {
  #dropdown-variation-demo .btn-group .text-truncate {
    width: 231px;
    position: relative;
  }

  #dropdown-variation-demo .btn-group .text-truncate::after {
    position: absolute;
    top: 45%;
    right: 0.65rem;
  }
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1rem;
}

.layout-demo-placeholder img {
  width: 900px;
}

.layout-demo-info {
  text-align: center;
  margin-top: 1rem;
}


.avatar {
  background: #f0f0f0;
}

.avatar p {
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
}


/*
* ===================================================================
* CORREÇÃO FINAL DE ESPAÇAMENTO DO DATATABLE
* ===================================================================
*/

/* 1. Alinha o campo de pesquisa à direita */
.card-datatable .dataTables_wrapper .dataTables_filter {
  text-align: right;
}

/* 2. Ajusta o padding das células da tabela */
.card-datatable .dataTables_wrapper .table thead th,
.card-datatable .dataTables_wrapper .table tbody td {
  padding: 10px 20px !important;
  vertical-align: middle;
  text-align: left;
}

/* 3. Estiliza o link do nome do paciente */
.card-datatable table a {
  color: #0aa2c0;
  text-decoration: none;
  font-weight: 500;
}

.card-datatable table a:hover {
  text-decoration: underline;
}

/* 4. Corrige a barra de rolagem horizontal */
.card-datatable .table-responsive {
  overflow-x: hidden !important;
  /* Esconde a barra de rolagem horizontal */
}

/* 5. Ajusta o padding do rodapé da tabela */
.card-datatable .dataTables_info,
.card-datatable .dataTables_paginate {
  padding-top: 1rem;
  padding-bottom: 1rem;
}


/*************************************************************************/

#patientTabs {
  margin-left: 20px;
}

/* Estilos customizados para as abas do paciente */
#patientTabs .nav-link {
  border-radius: 0.5rem;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

#patientTabs .nav-link:hover {
  background-color: rgba(90, 141, 238, 0.1);
  border-color: rgba(90, 141, 238, 0.2);
}

#patientTabs .nav-link.active {
  background-color: #5a8dee;
  border-color: #5a8dee;
  color: white;
  box-shadow: 0 2px 4px rgba(90, 141, 238, 0.3);
}

#patientTabs .nav-link i {
  font-size: 1.1rem;
}

/* Responsividade para abas */
@media (max-width: 768px) {
  #patientTabs {
    flex-direction: column;
  }

  #patientTabs .nav-link {
    margin-right: 0;
    margin-bottom: 0.25rem;
    text-align: center;
  }
}

/* Estilos para conteúdo das abas */
.tab-content .card {
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.tab-content .card-header {
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecee;
}

/* Loading spinner customizado */
.spinner-border.text-primary {
  width: 2rem;
  height: 2rem;
}

/* Botões de ação nas abas */
.tab-content .btn {
  font-weight: 500;
}

/* Alertas de erro */
/* Animações suaves */
.tab-pane {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Estilos para DataTables nas abas */
.tab-content .dataTables_wrapper {
  padding: 0;
}

.tab-content .dataTables_filter {
  margin-bottom: 1rem;
}

.tab-content .dataTables_length {
  margin-bottom: 1rem;
}

/* Estilos para gráficos */
#bioimpedance-chart {
  margin-top: 1rem;
}

/* Estilos para modais relacionados às abas */
.modal-header {
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecee;
}

.modal-title {
  color: #516377;
  font-weight: 600;
}

.tab-content {
  padding: 0rem !important;
  border-radius: 0rem !important;
}

/* ===================================================================
* ESTILOS CUSTOMIZADOS PARA MENU ATIVO - COR INFO
* ===================================================================
*/

/* Menu item ativo - MÁXIMA ESPECIFICIDADE */
.layout-wrapper .layout-menu-horizontal .menu .menu-item.active>.menu-link,
.layout-menu-horizontal .menu .menu-item.active>.menu-link,
.menu .menu-item.active>.menu-link {
  color: #ffffff !important;
  /* Texto branco */
  background-color: #00cfdd !important;
  /* Fundo info sólido */
  border-radius: 0 !important;
  /* Sem bordas arredondadas */
}

/* Menu item ativo - hover - MÁXIMA ESPECIFICIDADE */
.layout-wrapper .layout-menu-horizontal .menu .menu-item.active>.menu-link:hover,
.layout-menu-horizontal .menu .menu-item.active>.menu-link:hover,
.menu .menu-item.active>.menu-link:hover {
  background-color: #0aa2c0 !important;
  /* Fundo info mais escuro no hover */
  color: #ffffff !important;
  /* Texto branco */
}

/* Submenu item ativo - MÁXIMA ESPECIFICIDADE */
.layout-wrapper .layout-menu-horizontal .menu .menu-sub .menu-item.active>.menu-link,
.layout-menu-horizontal .menu .menu-sub .menu-item.active>.menu-link,
.menu .menu-sub .menu-item.active>.menu-link {
  color: #ffffff !important;
  /* Texto branco */
  background-color: #00cfdd !important;
  /* Fundo info sólido */
  border-radius: 0 !important;
  /* Sem bordas arredondadas */
}

/* Submenu item ativo - hover - MÁXIMA ESPECIFICIDADE */
.layout-wrapper .layout-menu-horizontal .menu .menu-sub .menu-item.active>.menu-link:hover,
.layout-menu-horizontal .menu .menu-sub .menu-item.active>.menu-link:hover,
.menu .menu-sub .menu-item.active>.menu-link:hover {
  background-color: #0aa2c0 !important;
  /* Fundo info mais escuro no hover */
  color: #ffffff !important;
  /* Texto branco */
}

/* Ícones do menu ativo - MÁXIMA ESPECIFICIDADE */
.layout-wrapper .layout-menu-horizontal .menu .menu-item.active>.menu-link .menu-icon,
.layout-menu-horizontal .menu .menu-item.active>.menu-link .menu-icon,
.menu .menu-item.active>.menu-link .menu-icon {
  color: #ffffff !important;
  /* Ícones brancos */
}

/* ===================================================================
* CORREÇÃO: ÍCONES DO SUBMENU - COR PADRÃO E HOVER
* ===================================================================
*/

/* Ícones do submenu - cor padrão (cinza) quando menu principal está ativo */
.layout-wrapper .layout-menu-horizontal .menu .menu-item.active .menu-sub .menu-item:not(.active)>.menu-link .menu-icon,
.layout-menu-horizontal .menu .menu-item.active .menu-sub .menu-item:not(.active)>.menu-link .menu-icon,
.menu .menu-item.active .menu-sub .menu-item:not(.active)>.menu-link .menu-icon {
  color: #697a8d !important;
  /* Cor padrão do submenu */
}

/* Ícones do submenu - hover (preto) */
.layout-wrapper .layout-menu-horizontal .menu .menu-item.active .menu-sub .menu-item:not(.active)>.menu-link:hover .menu-icon,
.layout-menu-horizontal .menu .menu-item.active .menu-sub .menu-item:not(.active)>.menu-link:hover .menu-icon,
.menu .menu-item.active .menu-sub .menu-item:not(.active)>.menu-link:hover .menu-icon {
  color: #000000 !important;
  /* Preto no hover */
}

/* Ícones do submenu ativo - branco */
.layout-wrapper .layout-menu-horizontal .menu .menu-sub .menu-item.active>.menu-link .menu-icon,
.layout-menu-horizontal .menu .menu-sub .menu-item.active>.menu-link .menu-icon,
.menu .menu-sub .menu-item.active>.menu-link .menu-icon {
  color: #ffffff !important;
  /* Branco quando submenu está ativo */
}

/* Transição suave */
.menu .menu-item>.menu-link {
  transition: all 0.3s ease;
}

/* ===================================================================
* CORREÇÃO: TEXTO DO SUBMENU - COR PADRÃO E HOVER
* ===================================================================
*/

/* Texto do submenu - cor padrão quando menu principal está ativo */
.layout-wrapper .layout-menu-horizontal .menu .menu-item.active .menu-sub .menu-item:not(.active)>.menu-link,
.layout-menu-horizontal .menu .menu-item.active .menu-sub .menu-item:not(.active)>.menu-link,
.menu .menu-item.active .menu-sub .menu-item:not(.active)>.menu-link {
  color: #697a8d !important;
  /* Cor padrão do submenu */
  background-color: transparent !important;
}

/* Texto do submenu - hover (preto com fundo claro) */
.layout-wrapper .layout-menu-horizontal .menu .menu-item.active .menu-sub .menu-item:not(.active)>.menu-link:hover,
.layout-menu-horizontal .menu .menu-item.active .menu-sub .menu-item:not(.active)>.menu-link:hover,
.menu .menu-item.active .menu-sub .menu-item:not(.active)>.menu-link:hover {
  color: #000000 !important;
  /* Preto no hover */
  background-color: rgba(0, 0, 0, 0.04) !important;
  /* Fundo claro no hover */
}

/* SOBRESCREVER ESTILOS DO THEME-BORDERED.CSS - MÁXIMA ESPECIFICIDADE */
.layout-wrapper .layout-menu-horizontal .bg-menu-theme .menu-item.active>.menu-link:not(.menu-toggle) {
  color: #ffffff !important;
  background-color: #00cfdd !important;
  border-radius: 0 !important;
}

.layout-wrapper .layout-menu-horizontal .bg-menu-theme.menu-horizontal .menu-inner>.menu-item.active>.menu-link {
  background-color: #00cfdd !important;
  color: #ffffff !important;
  border-radius: 0 !important;
}

.layout-wrapper .layout-menu-horizontal .bg-menu-theme.menu-horizontal .menu-sub>.menu-item.active>.menu-link:not(.menu-toggle) {
  background-color: #00cfdd !important;
  color: #ffffff !important;
  border-radius: 0 !important;
}

/* ESTILOS ESPECÍFICOS PARA MENU HORIZONTAL - MÁXIMA ESPECIFICIDADE */
.bg-menu-theme.menu-horizontal .menu-inner>.menu-item.active>.menu-link {
  background-color: #00cfdd !important;
  color: #ffffff !important;
  border-radius: 0 !important;
}

.bg-menu-theme.menu-horizontal .menu-sub>.menu-item.active>.menu-link:not(.menu-toggle) {
  background-color: #00cfdd !important;
  color: #ffffff !important;
  border-radius: 0 !important;
}

/* Hover states - MÁXIMA ESPECIFICIDADE */
.layout-wrapper .layout-menu-horizontal .bg-menu-theme .menu-item.active>.menu-link:hover {
  background-color: #0aa2c0 !important;
  color: #ffffff !important;
}

.layout-wrapper .layout-menu-horizontal .bg-menu-theme.menu-horizontal .menu-inner>.menu-item.active>.menu-link:hover {
  background-color: #0aa2c0 !important;
  color: #ffffff !important;
}

/* Ícones - MÁXIMA ESPECIFICIDADE */
.layout-wrapper .layout-menu-horizontal .bg-menu-theme .menu-item.active>.menu-link .menu-icon {
  color: #ffffff !important;
}

/* ===================================================================
* TÍTULO DA PÁGINA - CORES MAIS ESCURAS
* ===================================================================
*/

/* Breadcrumb wrapper - título da página */
.breadcrumb-wrapper {
  color: #2c3e50 !important;
  /* Cinza mais escuro */
}

.breadcrumb-wrapper .text-muted {
  color: #34495e !important;
  /* Cinza escuro para "Simetria" */
}

/* Títulos h4 com breadcrumb */
h4.breadcrumb-wrapper {
  color: #2c3e50 !important;
}

h4.breadcrumb-wrapper .text-muted {
  color: #34495e !important;
}

/* ===================================================================
* LOGO RESPONSIVA - MENU HORIZONTAL/VERTICAL
* ===================================================================
*/

/* Por padrão, mostrar logo horizontal (light) e esconder vertical (dark) */
.app-brand-logo .logo-horizontal {
  display: block !important;
}

.app-brand-logo .logo-vertical {
  display: none !important;
}

/* Quando o menu é vertical (telas menores), mostrar logo vertical (dark) e esconder horizontal (light) */
@media (max-width: 1199.98px) {
  .app-brand-logo .logo-horizontal {
    display: none !important;
  }

  .app-brand-logo .logo-vertical {
    display: block !important;
  }
}

/* Para telas muito pequenas (mobile) */
@media (max-width: 768px) {
  .app-brand-logo .logo-horizontal {
    display: none !important;
  }

  .app-brand-logo .logo-vertical {
    display: block !important;
  }
}

/* Usar classes do layout para detectar menu vertical */
.layout-menu-collapsed .app-brand-logo .logo-horizontal,
.layout-menu-hover .app-brand-logo .logo-horizontal {
  display: none !important;
}

.layout-menu-collapsed .app-brand-logo .logo-vertical,
.layout-menu-hover .app-brand-logo .logo-vertical {
  display: block !important;
}

/* ===================================================================
* NAVBAR DROPDOWN - AVATAR DO USUÁRIO
* ===================================================================
*/

/* Avatar do usuário - estado padrão (dropdown fechado) - MÁXIMA ESPECIFICIDADE */
.layout-navbar .navbar .avatar,
.navbar .avatar {
  background-color: #000000 !important;
  /* Fundo preto */
  color: #ffffff !important;
  /* Texto branco */
  border-color: #000000 !important;
  /* Borda preta */
}

/* Avatar do usuário - quando dropdown está aberto - MÁXIMA ESPECIFICIDADE */
.layout-navbar .navbar .dropdown.show .avatar,
.navbar .dropdown.show .avatar {
  background-color: #ffffff !important;
  /* Fundo branco */
  color: #000000 !important;
  /* Texto preto */
  border-color: #000000 !important;
  /* Borda preta */
}

/* Hover do avatar - MÁXIMA ESPECIFICIDADE */
.layout-navbar .navbar .avatar:hover,
.navbar .avatar:hover {
  background-color: #333333 !important;
  /* Fundo cinza escuro no hover */
  color: #ffffff !important;
  /* Texto branco */
}






/* SweetAlert2 - Tema Simetria (Bordas Retas) */
.swal2-popup {
  border-radius: 0;
  padding: 45px 50px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  border: none;
  min-width: 400px;
}

/* Ícone de sucesso - cor principal do sistema */
.swal2-icon {
  margin: 0 auto 30px;
}

/* Título */
.swal2-title {
  color: #1f2937;
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 20px 0;
  padding: 0;
  line-height: 1.3;
}

/* Texto do conteúdo */
.swal2-html-container {
  color: #6b7280;
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 35px 0;
  padding: 0;
}

/* Botão de confirmar - usando a cor cyan do seu sistema */
.swal2-confirm {
  border: none;
  border-radius: 0;
  padding: 14px 35px;
  font-size: 15px;
  font-weight: 500;
  color: #fff !important;
  transition: all 0.3s ease;
  text-transform: none;
  min-width: 160px;
}

.swal2-confirm:hover {
  transform: translateY(-1px);
}

.swal2-confirm:focus {
  outline: none;
}

/* Botão de cancelar */
.swal2-cancel {
  border-radius: 0;
  padding: 14px 35px;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.3s ease;
  min-width: 160px;
}

.swal2-cancel:focus {
  outline: none;
}

/* Botões - espaçamento melhorado */
.swal2-actions {
  gap: 15px;
  margin: 35px 0 0 0;
  padding: 0;
}

.swal2-actions:not(.swal2-loading) .swal2-styled {
  margin: 0;
}

/* Fundo (backdrop) */
.swal2-container {
  backdrop-filter: blur(2px);
  padding: 0;
}

/* Animação de entrada mais suave */
.swal2-show {
  animation: swal2-show 0.25s ease-out;
}

/* Toast notifications - para mensagens rápidas */
.swal2-toast {
  border-radius: 0;
  padding: 18px 20px;
}

.swal2-toast .swal2-title {
  font-size: 15px;
  margin: 0;
}

/* Input fields (se usar) */
.swal2-input,
.swal2-textarea,
.swal2-select {
  border-radius: 0;
  padding: 12px 15px;
  font-size: 15px;
  transition: border-color 0.3s ease;
  margin: 15px 0;
}

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
  outline: none;
}

/* Fechar (X) */
.swal2-close {
  font-size: 32px;
  transition: color 0.3s ease;
  width: 40px;
  height: 40px;
  line-height: 40px;
}

.swal2-close:focus {
  outline: none;
  box-shadow: none;
}

/* Footer (se usar) */
.swal2-footer {
  padding: 20px 0 0 0;
  margin: 25px 0 0 0;
  font-size: 14px;
}

/* Validation message */
.swal2-validation-message {
  border: none;
  padding: 12px 15px;
  margin: 10px 0 0 0;
  font-size: 14px;
}

/* Progress steps (se usar) */
.swal2-progress-steps {
  margin: 0 0 25px 0;
}

.light-style .swal2-popup .swal2-title {
  color: #444 !important;
}

.text-start {
  font-size: 16px !important;
}

div:where(.swal2-container) .swal2-html-container {
  color: #999 !important;
}


svg {
  shape-rendering: geometricPrecision;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

svg {
  transform: translateZ(0);
  will-change: transform;
}

svg {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

svg text {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.table-striped>tbody>tr:nth-of-type(odd)>*,
table.dataTable.table-dark>tbody>tr:nth-of-type(2n+1)>*,
table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>* {
  box-shadow: inset 0 0 0 9999px #f0f0f0 !important;
  background: #f0f0f0 !important;
}

.navbar .avatar:hover {
  background: #000 !important;
}
/* Fi
x: Remove background images from login page that don't exist */
.authentication-wrapper.authentication-basic .authentication-inner:before,
.authentication-wrapper.authentication-basic .authentication-inner:after {
  background-image: none !important;
}