/* ============================================================================ */
/* SISTEMA DE GESTÃO PARA CONSULTÓRIO - VERSÃO OTIMIZADA E SEM DUPLICAÇÕES   */
/* ============================================================================ */
/* Índice rápido de seções (organizacional, não altera estilos)
   1) Variáveis e Paletas (:root)
   2) Reset e Tipografia
   3) Scrollbar
   4) Layout Principal (Sidebar & Main Content)
   5) Overlay e Touch
   6) Sidebar (header, menu, nav-links)
   7) Display: Flex (componentes)
   8) Display: Grid (layouts)
   9) Componentes Globais (cards, btns, forms)
  10) Dashboard & Agenda (por display)
  11) Modais e Tabelas
  12) Tema Escuro ([data-bs-theme="dark"]) 
  13) Utilitários
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  /* ======================================================================== */
  /* 1) Variáveis e Paletas                                                   */
  /*    - Paleta clara                                                         */
  /*    - Tokens de design (raios, sombras, transições, gradientes)            */
  /*    - Paleta escura centralizada                                           */
  /* ======================================================================== */
  /* Paleta de Cores, Variáveis de Design, etc. (sem alterações) */
  --cor-primaria: #2d6a4f;
  --cor-primaria-light: #40916c;
  --cor-primaria-lighter: #52b788;
  --cor-secundaria: #6a994e;
  --cor-terciaria: #a7c957;
  --cor-sucesso: #52b788;
  --cor-aviso: #f4a261;
  --cor-erro: #e76f51;
  --cor-info: #2a9d8f;
  --cor-fundo: #f8fffe;
  --cor-fundo-alt: #f1f8f5;
  --cor-superficie: #ffffff;
  --cor-superficie-hover: #f8fffe;
  --cor-texto-primario: #000000;
  --cor-texto-secundario: #000000;
  --cor-texto-claro: #ffffff;
  --cor-borda: #d8f3dc;
  --cor-borda-hover: #b7e4c7;
  --gradiente-primario: linear-gradient(135deg, #2d6a4f 0%, #40916c 50%, #52b788 100%);
  --gradiente-secundario: linear-gradient(135deg, #6a994e 0%, #a7c957 100%);
  --gradiente-sutil: linear-gradient(135deg, #f8fffe 0%, #f1f8f5 100%);
  --raio-borda: 30px;
  --raio-borda-pequeno: 8px;
  --raio-borda-grande: 24px;
  --sombra-suave: 0 2px 8px rgba(45, 106, 79, 0.08);
  --sombra-media: 0 4px 16px rgba(45, 106, 79, 0.12);
  --sombra-forte: 0 8px 32px rgba(45, 106, 79, 0.16);
  --sombra-hover: 0 8px 24px rgba(45, 106, 79, 0.15);
  --transicao-rapida: 0.2s ease-out;
  --transicao-media: 0.3s ease-out;
  --transicao-lenta: 0.4s ease-out;
  --transicao-hover: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Paleta ESCURA centralizada (usada quando [data-bs-theme="dark"]) ---- */
  --dark-fundo: #0C2B4E;           /* fundo principal mais profundo */
  --dark-superficie: #102C4A;      /* superfícies (cards, modais, navbar) */
  --dark-superficie-alt: #143D5F;  /* superfície alternativa (headers, tabs, destaques) */
  --dark-borda: rgba(244, 244, 244, 0.12); /* borda suave baseada em #F4F4F4 */
  --dark-texto: #F4F4F4;           /* texto principal claro */
  --dark-texto-sec: rgba(244, 244, 244, 0.75); /* texto secundário */
  --dark-acento: #257075;          /* azul para foco/ações */
  --dark-acento-hover: #257075;    /* hover do foco/ações */
  --dark-acento-border: #25707500;   /* borda do foco/ações */
  /* Estados no tema escuro */
  --dark-sucesso: #BBC863;         /* success */
  --dark-aviso: #BBC863;           /* warning */
  --dark-erro: #BBC863;            /* danger */
  --dark-atencao: #FCB53B;         /* atenção */

  /* Gradiente base para o body no escuro */
  --dark-gradiente: linear-gradient(135deg, #081A2E 0%, #0F2A48 100%);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--gradiente-sutil);
  color: var(--cor-texto-primario);
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
}

/* --- Correções de compatibilidade para FullCalendar v6 --- */
/* Evita que resets globais causem colapso de layout e sobreposição de textos */
.fc, .fc * {
  box-sizing: border-box;
}

/* Títulos/cabeçalhos do calendário: garantir legibilidade e remover sublinhado herdado */
.fc .fc-toolbar-title,
.fc .fc-col-header-cell-cushion,
.fc .fc-daygrid-day-number,
.fc .fc-list-day-text,
.fc .fc-list-day-side-text {
  text-decoration: none;
}

/* Ajustes de espaçamento do cabeçalho para evitar compressão em tema escuro */
.fc .fc-toolbar {
  padding: 0.25rem 0.5rem;
}

/* Evita que o conteúdo dos dias fique colado nas bordas e se sobreponha */
.fc .fc-daygrid-day-frame { 
  padding: 4px; 
}

/* Botões do FullCalendar: tamanho e altura consistentes */
.fc .fc-button { 
  line-height: 1.2; 
  padding: 0.35rem 0.6rem; 
}

/* Lista de eventos (views "list") não herdar sublinhado do tema */
.fc .fc-list-event-title,
.fc .fc-list-event-time {
  text-decoration: none;
}

/* Em telas pequenas, garante respiro no título para não sobrepor setas */
@media (max-width: 576px) {
  .fc .fc-toolbar-title { 
    margin: 0 0.25rem; 
  }
}

/* Containers da Agenda: garantir altura mínima para evitar render minúsculo */
#calendar-desktop-view,
#calendar-mobile-view { min-height: 420px; }
#calendar-nav { min-height: 320px; }
#calendar-main { min-height: 240px; }

/* Evita transições que possam causar cálculo de tamanho incorreto durante render */
#calendar-desktop-view,
#calendar-mobile-view,
#calendar-nav,
#calendar-main { transition: none !important; }

/* ======================================================================== */
/* 9.1) Wizard de Configurações (Steps + Barra de Ações)                    */
/*    - Mantém botões de ação sempre visíveis                               */
/*    - Controla altura mínima/máxima dos cards de steps                    */
/*    - Scroll apenas no conteúdo dos steps quando necessário               */
/* ======================================================================== */
:root {
  --wizard-actionbar-height: 72px;
}

.wizard-steps-card {
  /* Espaço para respirar em relação à barra de ações */
  margin-bottom: 16px;
  /* Aparência consistente com cards do sistema */
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda-pequeno);
  box-shadow: var(--sombra-suave);
  /* Alturas dinâmicas: ajustadas via JS (max-height) */
  min-height: 320px;
  overflow-y: auto; /* Ativa scroll apenas quando necessário */
}

.wizard-steps-card::-webkit-scrollbar {
  width: 8px;
}
.wizard-steps-card::-webkit-scrollbar-thumb {
  background: var(--cor-primaria-lighter);
}

.wizard-action-bar {
  position: sticky;
  bottom: 0; /* Gruda ao final da viewport */
  z-index: 1020; /* Acima do conteúdo dos steps */
  height: var(--wizard-actionbar-height);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 16px;
  background: var(--cor-superficie);
  border-top: 1px solid var(--cor-borda);
  box-shadow: 0 -6px 16px rgba(45, 106, 79, 0.06);
}

.wizard-action-bar .btn {
  min-width: 140px;
}

/* Distanciamento visual entre steps e barra de ações */
.wizard-action-bar-spacer {
  height: 8px;
}

@media (max-width: 576px) {
  :root { --wizard-actionbar-height: 88px; }
  .wizard-action-bar { padding: 10px 12px; gap: 10px; }
  .wizard-action-bar .btn { min-width: 120px; }
}

/* Tema escuro: mantém contraste e separação visual */
[data-bs-theme="dark"] .wizard-steps-card {
  background: var(--dark-superficie);
  border-color: var(--dark-borda);
  box-shadow: var(--sombra-suave);
}
[data-bs-theme="dark"] .wizard-action-bar {
  background: var(--dark-superficie);
  border-top-color: var(--dark-borda);
  box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.35);
}

/* Dropdown de pesquisa do Step 1 renderizado em PORTAL para evitar clipping */
.wizard-search-portal {
  position: fixed; /* se posiciona relativo à viewport */
  z-index: 1055; /* acima dos cards e da barra de ação */
  max-height: 50vh;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  border: 1px solid var(--cor-borda);
  background: var(--cor-superficie);
}
[data-bs-theme="dark"] .wizard-search-portal {
  background: var(--dark-superficie);
  border-color: var(--dark-borda);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

/* ======================================================================== */
/* 2) Reset e Tipografia                                                     */
/*    - Box sizing, margin/padding, famílias de fonte                        */
/* ======================================================================== */

/* ======================================================================== */
/* 3) Scrollbar                                                              */
/* ======================================================================== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--cor-fundo-alt);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: var(--cor-primaria-lighter);
  border-radius: 3px;
  transition: var(--transicao-rapida);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--cor-primaria);
}

/* ======================================================================== */
/* 4) Layout Principal (Sidebar & Main Content)                               */
/* ======================================================================== */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 280px;
  z-index: 1050;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 100%);
  transform: translateX(0);
  box-shadow: var(--sombra-forte);
}

.main-content {
  margin-left: 280px;
  width: calc(100% - 280px);
  min-height: 100vh;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--gradiente-sutil);
}

.sidebar.collapsed {
  width: 70px;
  overflow: hidden;
}

.sidebar.collapsed+.main-content {
  margin-left: 70px;
  width: calc(100% - 70px);
}

/* ======================================================================== */
/* 5) Overlay para Mobile                                                     */
/* ======================================================================== */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(2px);
}

.sidebar-overlay.show {
  opacity: 1;
  visibility: visible;
}

/* ======================================================================== */
/* 6) Melhorias para Touch Devices                                           */
/* ======================================================================== */
@media (hover: none) and (pointer: coarse) {
  /* Ajustes para dispositivos touch */
  .sidebar .nav-link {
    padding: 1.25rem 1.5rem;
    font-size: 1rem;
  }

  .sidebar .nav-link:hover {
    transform: none;
  }

  .btn {
    min-height: 44px;
    padding: 0.875rem 1.5rem;
  }

  .form-control,
  .form-select {
    min-height: 44px;
    padding: 0.875rem 1rem;
  }
}

/* ======================================================================== */
/* Wizard: mostrar apenas o card atual                                       */
/* - Remove efeito de sobreposição                                           */
/* - Mantém somente o passo ativo visível                                    */
/* ======================================================================== */
#wizard-container .wizard-card {
  display: none;
}

#wizard-container .wizard-card.active {
  display: block;
}

#wizard-container .wizard-card.inactive,
#wizard-container .wizard-card.hidden-future {
  display: none !important;
}

/* Evita corte dos botões de ação ao trocar de card */
#wizard-container {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* ======================================================================== */
/* 6.1) Componentes da Sidebar                                               */
/* ======================================================================== */
.sidebar * {
  transition: all 0.3s ease;
}

.sidebar-header {
  padding: 2rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
}

.sidebar-logo {
  display: flex;
  align-items: center;
}

.sidebar-header .brand-logo {
  max-width: 190px;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.sidebar-header h4 {
  color: var(--cor-texto-claro);
  font-weight: 700;
  font-size: 1.25rem;
  font-family: 'Poppins', sans-serif;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-header h4 i {
  font-size: 1.5rem;
  opacity: 0.9;
}

.sidebar-menu {
  height: calc(100vh - 100px);
  overflow-y: auto;
  padding: 1.5rem 0;
}

.sidebar-menu::-webkit-scrollbar {
  width: 4px;
}

.sidebar-menu::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

.sidebar-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
}

.sidebar-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

.sidebar .nav-link {
  color: rgba(255, 255, 255, 0.8);
  padding: 1rem 1.5rem;
  margin: 0.25rem 1rem;
  transition: var(--transicao-hover);
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  border-radius: var(--raio-borda);
  font-weight: 500;
  font-size: 0.95rem;
}

.sidebar .nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sidebar .nav-link.active {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.sidebar .nav-link i {
  width: 24px;
  text-align: center;
  font-size: 1.1rem;
}

.sidebar.collapsed .sidebar-header h4 {
  opacity: 0;
  visibility: hidden;
}

.sidebar.collapsed .sidebar-header .brand-logo {
  opacity: 0;
  visibility: hidden;
}

.sidebar.collapsed .nav-link span {
  opacity: 0;
  visibility: hidden;
  width: 0;
}

.sidebar.collapsed .nav-link {
  justify-content: center;
  padding: 1rem 0.5rem;
}

.sidebar.collapsed .nav-link i {
  margin: 0;
  font-size: 1.2rem;
}

/* === NAVBAR SUPERIOR === */
.navbar {
  position: relative;
  z-index: 1030;
  background: var(--gradiente-primario) !important;
  box-shadow: var(--sombra-suave);
  padding: 1rem 0;
}

.navbar .btn {
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--cor-texto-claro);
  transition: var(--transicao-hover);
  border-radius: var(--raio-borda-pequeno);
}

.navbar .btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.navbar-brand {
  color: var(--cor-texto-claro) !important;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  font-size: 1.25rem;
}

#sidebarToggle {
  transition: all 0.2s ease;
}

#sidebarToggle:hover {
  transform: scale(1.05);
  background-color: rgba(255, 255, 255, 0.2) !important;
}

#sidebarToggle:active {
  transform: scale(0.95);
}

/* === COMPONENTES GERAIS (Cards, Forms, Botões, etc.) === */
.container-fluid {
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 100%;
}

.card {
  background: var(--cor-superficie);
  border: none;
  border-radius: var(--raio-borda-pequeno);
  box-shadow: var(--sombra-suave);
  transition: var(--transicao-hover);
  overflow: hidden;
  position: relative;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-hover);
}

.card-header {
  background: var(--cor-fundo-alt);
  border-bottom: 1px solid var(--cor-borda);
  font-weight: 600;
  color: var(--cor-texto-primario);
  padding: 1.5rem;
  font-family: 'Poppins', sans-serif;
}

.card-body {
  padding: 1.5rem;
}

.form-control,
.form-select {
  background-color: #ffffff !important;
  color: #1b4332 !important;
  border: 2px solid var(--cor-borda) !important;
  transition: var(--transicao-hover);
  border-radius: var(--raio-borda-pequeno);
  padding: 0.875rem 1rem;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(45, 106, 79, 0.04);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--cor-primaria-lighter) !important;
  box-shadow: 0 0 0 4px rgba(82, 183, 136, 0.15) !important;
  background: var(--cor-superficie) !important;
  transform: translateY(-1px);
}

.form-label {
  font-weight: 600;
  color: var(--cor-texto-primario);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.btn {
  border-radius: var(--raio-borda);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  transition: var(--transicao-hover);
  border: none;
  box-shadow: var(--sombra-suave);
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.85rem;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-media);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: var(--gradiente-primario);
  color: var(--cor-texto-claro);
}

.btn-outline-primary {
  border: 2px solid var(--cor-primaria);
  color: var(--cor-primaria);
  background: transparent;
}

.btn-outline-primary:hover {
  background: var(--cor-primaria);
  color: var(--cor-texto-claro);
  border-color: var(--cor-primaria);
}

/* === EDITOR DE TEMPLATES (PERFIL) === */
.palette-item {
  padding: 8px 12px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: grab;
  font-size: 0.85rem;
  user-select: none;
  transition: all 0.2s ease;
}

.palette-item:hover {
  background-color: var(--cor-fundo-alt);
  border-color: var(--cor-primaria-light);
}

#template-canvas {
  position: relative;
  background-color: white;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1) inset;
  overflow: hidden;
  background-image: none;
}

#template-canvas::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Váriaveis CSS que serão controladas pelo JavaScript */
  background-image: var(--background-image-url);
  opacity: var(--background-opacity, 1);

  background-repeat: no-repeat;
  background-position: inherit;
  background-size: inherit;
  z-index: 0;
  /* Fica atrás dos elementos */
  transition: opacity 0.2s ease;
}

.draggable-element {
  position: absolute;
  padding: 5px;
  border: 1px dashed transparent;
  cursor: move;
  overflow: hidden;
  /* Garante que nada vaze para fora */
  white-space: nowrap;
  /* Impede a quebra de linha do texto */
  line-height: 1.2;
  display: flex;
  /* Adicionado para ajudar na centralização vertical */
  align-items: center;
  /* Centraliza o texto verticalmente */
  justify-content: center;
  /* Centraliza o texto horizontalmente */
}

.draggable-element svg {
  overflow: visible;
  /* Garante que o texto seja sempre renderizado */
}

.draggable-element.is-image-element {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: move;
}

.draggable-element:hover {
  border-color: #0d6efd;
}

/* ============================================================================ */
/* ESTILOS PARA O NOVO EDITOR DE TEMPLATES (FASE 2)                             */
/* ============================================================================ */

#template-editor-area {
  position: relative;
  background-color: white;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1) inset;
  overflow: hidden;
  padding: 10px;
  display: flex;
  flex-direction: column;
  /* Proporção de um A4 */
  aspect-ratio: 210 / 297;
}

#template-editor-area::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: var(--background-image-url);
  opacity: var(--background-opacity, 1);
  background-repeat: no-repeat;
  background-position: inherit;
  background-size: inherit;
  z-index: 1;
}

.template-dropzone {
  position: relative;
  border: 2px dashed #d8f3dc;
  transition: background-color 0.3s ease;
  z-index: 2;
  /* Fica na frente do pseudo-elemento de fundo */
}

.template-dropzone::after {
  content: attr(data-zone-name);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #b7e4c7;
  font-weight: bold;
  font-size: 1.2rem;
  pointer-events: none;
  z-index: 3;
}

#template-header-dropzone {
  min-height: 80px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  flex-shrink: 0;
}

#template-content-dropzone {
  flex-grow: 1;
  /* Ocupa todo o espaço restante */
  min-height: 200px;
}

#template-footer-dropzone {
  min-height: 50px;
  border-top-width: 1px;
  border-top-style: solid;
  flex-shrink: 0;
}

/* Esconde o texto "Cabeçalho", etc., quando um elemento é solto na zona */
.template-dropzone:not(:empty)::after {
  display: none;
}

.snap-guideline {
  position: absolute;
  background-color: #ff4d4d;
  /* Uma cor de destaque */
  z-index: 10;
  pointer-events: none;
  /* Impede que a linha interfira no mouse */
}

.snap-guideline.vertical {
  width: 1px;
  height: 100%;
  top: 0;
}

.snap-guideline.horizontal {
  height: 1px;
  width: 100%;
  left: 0;
}

.interact-drop-active {
  background-color: rgba(82, 183, 136, 0.1);
  border-color: #52b788;
}

.palette-item.content-palette-item {
  background-color: #eaf6ef;
  border-color: #52b788;
}

.draggable-element img {
  width: 100%;
  height: 100%;
  pointer-events: none;
  object-fit: contain;
  cursor: move;
}

.remove-element-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  background-color: #e76f51;
  color: white;
  border: 1px solid white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s ease;
  z-index: 10;
}

.draggable-element:hover .remove-element-btn {
  opacity: 1;
  transform: scale(1.1);
}

.draggable-element[data-field-type="content_box"] {
  border: 2px dashed #40916c;
  background-color: rgba(64, 145, 108, 0.05);
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}

.draggable-element[data-field-type="content_box"] p {
  font-size: 12px !important;
  color: #52796f;
  padding: 5px;
}

/* === OUTROS COMPONENTES === */
.content-section {
  animation: fadeIn 0.5s ease-out;
}

.modal-content {
  background-color: #ffffff !important;
  color: #1b4332 !important;
  border: none;
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra-forte);
  overflow: hidden;
}

.text-muted {
  color: #000000 !important;
}

/* === Nav-Pills: aba ativa (inclui Personas) === */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: var(--cor-primaria-light);
  border-color: var(--cor-primaria-light);
}

/* Regra específica para o botão Personas caso precise maior especificidade */
#pills-personas-tab.nav-link.active {
  color: #fff;
  background-color: var(--cor-primaria-light);
  border-color: var(--cor-primaria-light);
}

/* === Nav: tornar textos padrão em verde (tabs/pills) === */
.nav-pills .nav-link:not(.active),
.nav-tabs .nav-link:not(.active) {
  color: var(--cor-primaria-light);
}

/* === Classes de texto/links primários em verde === */
.text-primary,
.link-primary {
  color: var(--cor-primaria-light) !important;
}

/* === Botões do tipo link e paginações em verde === */
.btn-link {
  color: var(--cor-primaria-light);
}

.pagination .page-link {
  color: var(--cor-primaria-light);
}

/* Texto da aba "Gerar Conteúdo" no estado inativo */
#tab-gerar.nav-link:not(.active) {
  color: var(--cor-primaria-light);
}

/* ======================================================================== */
/* 10) Dashboard & Agenda (por display)                                      */
/*    - Overlay do Google Calendar                                           */
/*    - Agrupado por Display (Flex/Grid)                                     */
/* ======================================================================== */
#google-calendar-overlay {
  transition: background-color var(--transicao-media), backdrop-filter var(--transicao-media);
}

/* ======================================================================== */
/* 12) Tema Escuro - Overrides específicos                                   */
/*    - Mantém próximos os ajustes de overlay e conteúdo no tema escuro      */
/* ======================================================================== */
/* Modo escuro: fundo do overlay mais escuro e conteúdo com superfície escura */
[data-bs-theme='dark'] #google-calendar-overlay {
  background: rgba(15, 23, 42, 0.65) !important;
  /* override do inline style claro */
  backdrop-filter: blur(3px);
}

/* Caixa interna do overlay (a div imediatamente dentro do overlay) */
[data-bs-theme='dark'] #google-calendar-overlay>div {
  background-color: var(--bs-dark-bg-subtle, #0f172a) !important;
  /* override de bg-white */
  color: var(--bs-light, #e2e8f0) !important;
  border: 1px solid rgba(148, 163, 184, 0.15);
  /* slate-400 com baixa opacidade */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
}

/* Títulos e textos dentro da caixa */
[data-bs-theme='dark'] #google-calendar-overlay>div h5 {
  color: var(--bs-light, #e2e8f0) !important;
}

[data-bs-theme='dark'] #google-calendar-overlay>div p,
[data-bs-theme='dark'] #google-calendar-overlay>div .text-muted {
  color: #94a3b8 !important;
  /* slate-400 para melhor contraste */
}

/* Ícone e botão mantêm boa legibilidade no modo escuro */
[data-bs-theme='dark'] #google-calendar-overlay>div i {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

[data-bs-theme='dark'] #google-calendar-overlay>div .btn-primary {
  background-color: var(--cor-primaria, #2d6a4f);
  border-color: var(--cor-primaria, #2d6a4f);
}

/* Opcional: ajuste leve também no modo claro para suavizar transições */
[data-bs-theme='light'] #google-calendar-overlay {
  background: rgba(255, 255, 255, 0.7) !important;
}

/* ======================================================================== */
/* 7) Display: Flex - Componentes                                           */
/*    - Cards, listas e carrosseis que usam display:flex                     */
/* ======================================================================== */
.kpi-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  /* margin: 1rem; */
  background-color: var(--cor-superficie);
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra-suave);
  transition: var(--transicao-hover);
  border: 10px solid var(--cor-borda);
}

.kpi-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-hover);
}

.kpi-card-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpi-card-icon i {
  font-size: 1.75rem;
}

.kpi-card-titulo {
  font-size: 0.9rem;
  color: var(--cor-texto-secundario);
  margin-bottom: 0.25rem;
}

.kpi-card-valor {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--cor-texto-primario);
  line-height: 1.2;
}

/* ======================================================================== */
/* 8) Display: Grid - Layouts                                               */
/*    - Grids responsivos e widgets                                         */
/* ======================================================================== */
/* Grid Principal do Dashboard */
.dashboard-main-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 1.5rem;
}

.dashboard-widget .card-header {
  padding: 1rem 1.5rem;
}

.widget-list-container {
  max-height: 450px;
  overflow-y: auto;
  padding: 0.5rem;
}

/* --- Estilos para Itens da Lista de Consultas --- */
.consulta-hoje-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--cor-borda);
  gap: 1rem;
}

.consulta-hoje-item:last-child {
  border-bottom: none;
}

.consulta-hoje-info {
  flex-grow: 1;
}

.consulta-hoje-info .nome {
  font-weight: 600;
}

.consulta-hoje-info .servico {
  font-size: 0.85rem;
  color: var(--cor-texto-secundario);
}

.pagamento-item:last-child {
  border-bottom: none;
}

.pagamento-info .nome {
  font-weight: 600;
}

.pagamento-info .data {
  font-size: 0.85rem;
  color: var(--cor-texto-secundario);
}


/* --- dashboard --- */

/* ============================================================================ */
/* ESTILOS PARA O NOVO DASHBOARD (HOME SECTION) - CORRIGIDO                     */
/* ============================================================================ */

/* --- Carrossel de KPIs (Padrão para todas as telas) --- */
.dashboard-kpi-carousel-wrapper {
  position: relative;
}

.dashboard-kpi-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1.5rem;
  padding-bottom: 1.2rem;
  /* Espaço para a sombra do card e a barra de rolagem */
  -ms-overflow-style: none;
  /* Esconde scrollbar no IE e Edge */
  scrollbar-width: none;
  /* Esconde scrollbar no Firefox */
}

.dashboard-kpi-carousel::-webkit-scrollbar {
  height: 8px;
}

.dashboard-kpi-carousel::-webkit-scrollbar-thumb {
  background: var(--cor-borda-hover);
  border-radius: 4px;
}

.dashboard-kpi-carousel::-webkit-scrollbar-track {
  background: transparent;
}

/* --- Carrossel reutilizável para linhas de cards em páginas (Consultas/Financeiro/Clientes) --- */
.cards-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  padding-bottom: 0.8rem;
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none;     /* Firefox */
  -webkit-overflow-scrolling: touch; /* momentum scroll no iOS */
  margin-left: 0; /* neutraliza margens negativas do .row */
  margin-right: 0;
  flex-wrap: nowrap; /* força itens em linha única em todas as larguras */
}
.cards-carousel::-webkit-scrollbar { height: 8px; }
.cards-carousel::-webkit-scrollbar-thumb { background: var(--cor-borda-hover); border-radius: 4px; }
.cards-carousel::-webkit-scrollbar-track { background: transparent; }

/* Itens do carrossel: alinhamento de snap em todas as larguras */
.cards-carousel > [class^="col-"],
.cards-carousel > [class*=" col-"] {
  scroll-snap-align: start;
  flex: 0 0 auto; /* evita expansão para ocupar 100% da linha */
}

/* Em telas maiores, impedir wrap para manter itens em linha única */
@media (min-width: 769px) {
  .cards-carousel {
    flex-wrap: nowrap;
  }
}

@media (max-width: 768px) {
  .cards-carousel {
    flex-wrap: nowrap; /* mantém em linha única e permite rolagem horizontal */
    padding-left: 1rem; /* cria respiro lateral e indica continuidade */
    padding-right: 1rem;
    scroll-padding-left: 1rem; /* melhora snap no início/fim */
    scroll-padding-right: 1rem;
  }
  /* Cada coluna vira um item do carrossel */
  .cards-carousel > [class^="col-"],
  .cards-carousel > [class*=" col-"] {
    flex: 0 0 85%; /* largura semelhante ao carrossel de KPIs do dashboard */
    max-width: 85%;
    min-width: 85%;
    width: auto !important; /* sobrepõe width:100% do Bootstrap em .row > * */
    scroll-snap-align: start;
  }
  .cards-carousel .card { height: 100%; }
}


/* --- Cards Superiores (KPIs) --- */
.kpi-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
  background-color: var(--cor-superficie);
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra-suave);
  transition: var(--transicao-hover);
  border: 1px solid var(--cor-borda);
  flex: 1 1 0;
  /* Largura fixa para cada card, permitindo a rolagem */
  scroll-snap-align: start;
  /* Alinha o card no início da tela ao rolar */
}

.kpi-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-hover);
}

.kpi-card-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpi-card-icon i {
  font-size: 1.75rem;
}

.kpi-card-titulo {
  font-size: 0.9rem;
  color: var(--cor-texto-secundario);
  margin-bottom: 0.25rem;
  white-space: nowrap;
}

.kpi-card-valor {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--cor-texto-primario);
  line-height: 1.2;
}

/* --- Grid Principal do Dashboard --- */
.dashboard-main-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 1.5rem;
}

.dashboard-widget .card-header {
  padding: 1rem 1.5rem;
}

.widget-list-container {
  max-height: 450px;
  overflow-y: auto;
  padding: 0.5rem;
}

/* --- Estilos para Itens da Lista de Consultas --- */
.consulta-hoje-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--cor-borda);
  gap: 1rem;
}

.consulta-hoje-item:last-child {
  border-bottom: none;
}

.consulta-hoje-horario {
  font-weight: 600;
  color: var(--cor-primaria);
  background-color: var(--cor-fundo-alt);
  padding: 0.25rem 0.75rem;
  border-radius: var(--raio-borda-pequeno);
}

.consulta-hoje-info {
  flex-grow: 1;
  min-width: 0;
  /* Ajuda a prevenir overflow de texto */
}

.consulta-hoje-info .nome {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.consulta-hoje-info .servico {
  font-size: 0.85rem;
  color: var(--cor-texto-secundario);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pagamento-item:last-child {
  border-bottom: none;
}

.pagamento-info .nome {
  font-weight: 600;
}

.pagamento-info .data {
  font-size: 0.85rem;
  color: var(--cor-texto-secundario);
}

/* ============================================================================ */
/* MEDIA QUERIES PARA RESPONSIVIDADE MOBILE                                   */
/* ============================================================================ */

/* === MOBILE E TABLET (768px e abaixo) === */
@media (max-width: 768px) {
  /* --- Layout Principal Mobile --- */
  .sidebar {
    transform: translateX(-100%);
    width: 280px;
    z-index: 1050;
  }

  .sidebar.show {
    transform: translateX(0);
  }

  .sidebar.collapsed {
    width: 280px;
    transform: translateX(-100%);
  }

  .sidebar.collapsed.show {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0;
    width: 100%;
  }

  .sidebar.collapsed + .main-content {
    margin-left: 0;
    width: 100%;
  }

  /* --- Navbar Mobile --- */
  .navbar {
    padding: 0.75rem 0;
  }

  .navbar .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .navbar-brand {
    font-size: 1.1rem;
  }

  #sidebarToggle {
    padding: 0.5rem 0.75rem;
  }

  /* --- Cards e Componentes Mobile --- */
  .card {
    margin-bottom: 1rem;
  }

  .card-body {
    padding: 1rem;
  }

  .card-header {
    padding: 1rem;
  }

  /* --- Dashboard Mobile --- */
  .dashboard-main-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .kpi-card {
    flex-basis: 85%;
    padding: 1rem;
  }

  .kpi-card-icon {
    width: 50px;
    height: 50px;
  }

  .kpi-card-icon i {
    font-size: 1.5rem;
  }

  .kpi-card-valor {
    font-size: 1.5rem;
  }

  /* --- Formulários Mobile --- */
  .form-control,
  .form-select {
    padding: 0.75rem;
    font-size: 1rem;
  }

  .btn {
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
  }

  /* --- Tabelas Mobile --- */
  .table-responsive {
    font-size: 0.875rem;
  }

  /* --- Modais Mobile --- */
  .modal-dialog {
    margin: 0.5rem;
  }

  .modal-body {
    padding: 1rem;
  }

  /* --- Container Mobile --- */
  .container-fluid {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* --- Abas globais como botões full-width no mobile --- */
  .nav-tabs,
  .nav-pills {
    border-bottom: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
  }
  .nav-tabs .nav-item,
  .nav-pills .nav-item {
    width: 100%;
  }
  .nav-tabs .nav-link,
  .nav-pills .nav-link {
    display: block;
    width: 100%;
    text-align: center;
    padding: .6rem .75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .375rem;
    background-color: var(--bs-body-bg);
  }
  .nav-tabs .nav-link.active,
  .nav-pills .nav-link.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
  }
  /* Ajuste de hover para coerência visual */
  .nav-tabs .nav-link:hover,
  .nav-pills .nav-link:hover {
    background-color: rgba(var(--bs-primary-rgb, 13,110,253), .08);
  }

  /* --- Prontuário (Cabeçalho) Mobile --- */
  .prontuario-header {
    align-items: flex-start;
    gap: .75rem;
    flex-direction: column;
  }

  /* Move o ID acima do nome no mobile e evita cortes */
  .prontuario-ident {
    flex-direction: column;
    align-items: flex-start !important; /* sobrescreve .align-items-center do Bootstrap */
    justify-content: flex-start !important;
    gap: .25rem;
  }
  #prontuarioIdSequencial {
    order: -1;
    width: fit-content;
  }
  #prontuarioNomeCliente {
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left;
    line-height: 1.2;
    word-break: break-word;
    align-self: flex-start !important;
  }
  .prontuario-ident {
    padding-left: 0 !important;
    width: 100% !important;
    text-align: left !important;
  }
  /* Garante que nenhum filho da área de identificação crie recuo à esquerda */
  .prontuario-ident > * {
    margin-left: 0 !important;
    padding-left: 0 !important;
    align-self: flex-start !important;
  }

  /* Mantém botões em linha com rolagem horizontal quando necessário */
  .prontuario-actions {
    display: flex;
    gap: .5rem;
    flex-direction: column;
    align-items: flex-start;
    overflow-x: visible;
    flex-wrap: nowrap;
  }
  .prontuario-actions .btn,
  .prontuario-actions .btn-group .btn {
    white-space: normal;
    flex: 0 0 auto;
    width: auto !important;
  }

  /* Aplica o mesmo comportamento ao grupo de gravação, caso esteja fora do container de ações */
  /* Controles de gravação: botão Parar abaixo do Iniciar no mobile */
  #grupoBtnIniciar {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }
  #btnDropdownGravar {
    display: inline-flex;
    align-self: flex-start;
  }
  #btnPararGravacao {
    display: inline-flex;
    align-self: flex-start;
    margin-top: .5rem;
  }
  #grupoBtnIniciar .btn,
  #btnPararGravacao .btn {
    white-space: normal;
    flex: 0 0 auto;
    width: auto !important;
  }
  /* Badge de ID mais à esquerda e sem deslocamento */
  #prontuarioIdSequencial {
    margin-left: 0 !important;
    align-self: flex-start;
  }
}

/* === MOBILE PEQUENO (576px e abaixo) === */
@media (max-width: 576px) {
  /* --- Ajustes para telas muito pequenas --- */
  .sidebar {
    width: 100%;
  }

  .kpi-card {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }

  .kpi-card-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto;
  }

  .navbar-brand {
    font-size: 1rem;
  }

  .card-header h5 {
    font-size: 0.95rem;
    line-height: 1.2;
  }

  .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  .btn + .btn {
    margin-left: 0;
  }

  /* --- Formulários em telas pequenas --- */
  .row .col-md-6,
  .row .col-md-4,
  .row .col-md-3 {
    margin-bottom: 1rem;
  }

  /* Botões do grupo de filtros de Pagamentos menores no mobile */
  #pagamentos-filtro-radio.btn-group.btn-group-sm .btn,
  #pagamentos-filtro-radio .btn {
    padding: 0.3rem 0.55rem;
    font-size: 0.8rem;
    line-height: 1.1;
  }

  /* --- Consultas de Hoje: tornar conteúdo compacto e sem corte --- */
  .consulta-hoje-item {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem;
  }
  .consulta-hoje-horario {
    font-size: 0.85rem;
    padding: 0.2rem 0.5rem;
    line-height: 1.1;
  }
  .consulta-hoje-info .nome {
    font-size: 0.95rem;
    white-space: normal;
    line-height: 1.2;
    word-break: break-word;
  }
  .consulta-hoje-info .servico {
    font-size: 0.8rem;
    white-space: normal;
    line-height: 1.2;
    word-break: break-word;
  }
  .consulta-hoje-acao .btn {
    width: auto;
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
    line-height: 1.1;
  }
}

/* === LANDSCAPE MOBILE (orientação paisagem) === */
@media (max-width: 768px) and (orientation: landscape) {
  .sidebar {
    width: 250px;
  }

  .kpi-card {
    flex-direction: row;
    text-align: left;
  }
}


/* ============================================================================ */
/* AJUSTES FINAIS DE TEMA (CLARO/ESCURO)                                      */
/* ============================================================================ */

/* 1. Garante a cor PRETA do ícone no TÍTULO "Consultas de Hoje" em ambos os temas */
#section-home .card-header h5 .fas {
  color: var(--cor-texto-primario);
}

/* 2. Garante a cor PRETA do texto nos widgets do dashboard no TEMA CLARO */
/* Isso resolve o problema original do texto cinza que você apontou */
.dashboard-widget .card-body {
  color: var(--cor-texto-primario);
}

/* 3. Corrige o ícone DENTRO dos campos de data APENAS NO TEMA ESCURO */
[data-bs-theme="dark"] input[type="date"].form-control::-webkit-calendar-picker-indicator {
  /* Este filtro só é aplicado quando o tema escuro está ativo */
  filter: invert(1);
  opacity: 0.7;
  cursor: pointer;
}

/* 4. Garante que no tema escuro, o texto dos widgets fique claro para leitura */
[data-bs-theme="dark"] .dashboard-widget .card-body {
  color: #f1f8f5;
  /* Usa a cor de texto padrão do tema escuro do Bootstrap */
}

.pagamento-item {
  display: grid !important;
  grid-template-columns: 1fr 110px auto !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 1rem !important;
  border-bottom: 1px solid var(--cor-borda) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

.pagamento-item:last-child {
  border-bottom: none !important;
}

.pagamento-valor {
  justify-self: end !important;
  text-align: right !important;
  width: 100% !important;
}

.pagamento-acao {
  justify-self: end !important;
}

/* Garante que o botão fique alinhado à direita */
.pagamento-acao {
  justify-self: end;
}

/* --- Responsividade específica para a lista de Pagamentos --- */
@media (max-width: 576px) {
  /* Compacta o layout para caber em telas pequenas */
  .pagamento-item {
    grid-template-columns: 1fr auto !important;
    gap: 0.5rem !important;
    padding: 0.75rem !important;
  }

  .pagamento-info .nome {
    font-size: 0.95rem;
    line-height: 1.2;
  }
  .pagamento-info .data {
    font-size: 0.75rem;
  }
  .pagamento-valor {
    font-size: 0.95rem;
  }
  /* Evita que o botão herde width: 100% do mobile global */
  .pagamento-acao .btn {
    width: auto;
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
    line-height: 1.1;
  }

  /* Filtros (ATRASADOS/PRÓXIMOS) menores para não cortar */
  #pagamentos-filtro-radio .btn,
  .filter-pills .btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
    white-space: nowrap;
  }
}

@media (max-width: 400px) {
  .pagamento-info .nome { font-size: 0.9rem; }
  .pagamento-info .data { font-size: 0.7rem; }
  .pagamento-valor { font-size: 0.9rem; }
  .pagamento-acao .btn {
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
  }
  /* Cabeçalho do card um pouco menor em telas muito estreitas */
  .card-header h5 { font-size: 1rem; }

  /* Consultas de Hoje: ainda mais compacto em telas muito estreitas */
  .consulta-hoje-info .nome { font-size: 0.9rem; }
  .consulta-hoje-info .servico { font-size: 0.75rem; }
  .consulta-hoje-acao .btn { padding: 0.3rem 0.5rem; font-size: 0.8rem; }
}

/* --- Pagamentos em uma única linha no mobile --- */
@media (max-width: 576px) {
  .pagamento-item {
    grid-template-columns: 1fr auto auto !important; /* info | valor | botão */
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem !important;
  }

  .pagamento-info {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 0; /* permite ellipsis */
  }
  .pagamento-info .nome {
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
  }
  .pagamento-info .data {
    font-size: 0.75rem;
    white-space: nowrap;
    color: var(--cor-texto-secundario);
    line-height: 1.2;
  }
  .pagamento-valor {
    font-size: 0.9rem;
    white-space: nowrap;
  }
  .pagamento-acao {
    justify-self: end !important;
  }
  .pagamento-acao .btn {
    width: auto;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    line-height: 1.1;
    white-space: nowrap;
  }
}

@media (max-width: 400px) {
  .pagamento-info .nome { font-size: 0.85rem; }
  .pagamento-valor { font-size: 0.85rem; }
  .pagamento-acao .btn { font-size: 0.75rem; padding: 0.25rem 0.45rem; }
}

/* === Filter Pills no mobile: lado a lado e rolagem horizontal === */
@media (max-width: 576px) {
  .filter-pills {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .filter-pills .btn {
    width: auto !important;
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.3rem 0.55rem;
    font-size: 0.8rem;
    line-height: 1.1;
  }

  /* Se as filter-pills estiverem dentro do card-header, posiciona abaixo do título */
  .card-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .card-header .filter-pills {
    order: 2;
    margin-top: 0.5rem;
  }
}

[data-bs-theme="dark"] {
  /* --- Paleta escura solicitada --- */
  /* Hex fornecidos: #0C2B4E, #1A3D64, #1D546C, #F4F4F4 */

  /* Base do Tema (fundo e superfícies) */
  --cor-fundo-dark: var(--dark-fundo);     /* fundo principal mais profundo */
  --cor-superficie-dark: var(--dark-superficie); /* superfícies (cards, modais, sidebar, navbar) mais escuras */
  --cor-fundo-alt-dark: var(--dark-superficie-alt);  /* superfície alternativa entre tons mais claros */
  --cor-borda-dark: var(--dark-borda); /* borda suave baseada no F4F4F4 */

  /* Textos */
  --cor-texto-principal-dark: var(--dark-texto); /* texto principal claro */
  --cor-texto-secundario-dark: var(--dark-texto-sec); /* texto secundário */

  /* Acentos e Ações */
  --cor-primaria-dark: var(--dark-acento); /* mantém azul de ação para contraste e foco */

  /* Cores de Estado (conforme solicitado) */
  --cor-sucesso-dark: var(--dark-sucesso); /* success */
  --cor-aviso-dark: var(--dark-aviso);   /* warning */
  --cor-erro-dark: var(--dark-erro);    /* danger (vermelho substituído) */
  --cor-atencao-dark: var(--dark-atencao); /* atenção específica */

  /* Aplicação aos tokens usados no restante do CSS */
  --cor-fundo: var(--cor-fundo-dark);
  --cor-fundo-alt: var(--cor-fundo-alt-dark);
  --cor-superficie: var(--cor-superficie-dark);
  --cor-borda: var(--cor-borda-dark);
  --cor-texto-primario: var(--cor-texto-principal-dark);
  --cor-texto-secundario: var(--cor-texto-secundario-dark);

  /* Gradiente sutil mais escuro para a base da página */
  --gradiente-sutil: var(--dark-gradiente);
  
  /* Tokens Bootstrap alinhados ao tema escuro */
  --bs-success: var(--cor-sucesso-dark);
  --bs-warning: var(--cor-aviso-dark);
  --bs-danger: var(--cor-erro-dark);
  --bs-body-bg: var(--cor-fundo-dark);
  --bs-body-color: var(--cor-texto-principal-dark);

  /* Sombras sólidas e bem definidas para o tema escuro */
  --sombra-suave: 0 4px 12px rgba(8, 26, 46, 0.55);
  --sombra-media: 0 8px 24px rgba(8, 26, 46, 0.60);
  --sombra-forte: 0 16px 40px rgba(8, 26, 46, 0.70);
  --sombra-hover: 0 12px 32px rgba(8, 26, 46, 0.65);
}

/* ======================================================================== */
/* 10) Tema Escuro - Ajustes específicos                                     */
/* ======================================================================== */

[data-bs-theme="dark"] body {
  background: var(--gradiente-sutil);
}

/* Ajusta cards, modais e o offcanvas do histórico */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .offcanvas {
  border-color: var(--cor-borda-dark);
}

[data-bs-theme="dark"] .card-header {
  background-color: rgba(16, 44, 74, 0.72) !important; /* usa #102C4A translúcido */
  color: var(--cor-texto-principal-dark) !important;
  border: 0 !important; /* remove borda poluída */
  backdrop-filter: blur(4px);
  padding: 0.75rem 1rem; /* compacta o cabeçalho */
}
[data-bs-theme="dark"] .card-header h5,
[data-bs-theme="dark"] .card-header .h5 {
  color: var(--cor-texto-principal-dark) !important;
  font-weight: 600;
}
[data-bs-theme="dark"] .card-header .btn {
  border: 0 !important;
  background-color: rgba(16, 44, 74, 0.55) !important; /* coeso com a superfície */
  color: var(--cor-texto-principal-dark) !important;
}
[data-bs-theme="dark"] .card-header .btn:hover,
[data-bs-theme="dark"] .card-header .btn:focus {
  filter: brightness(1.1);
  box-shadow: 0 0 0 0.16rem rgba(88, 166, 255, 0.35) !important;
}

/* Ajusta botões primários para usar o novo azul claro */
[data-bs-theme="dark"] .btn-primary {
  background: var(--cor-primaria-dark);
  color: #0B132B;
  /* Texto escuro no botão claro para melhor contraste */
  border: none;
}

[data-bs-theme="dark"] .btn-outline-primary {
  color: var(--cor-primaria-dark);
  border-color: var(--cor-primaria-dark);
}

[data-bs-theme="dark"] .btn-outline-primary:hover {
  background: var(--cor-primaria-dark);
  color: #0B132B;
}

/* Garante que os botões de filtro do dashboard fiquem corretos */
[data-bs-theme="dark"] #pagamentos-filtro-radio .btn-check:checked+.btn-outline-primary {
  background-color: var(--cor-primaria-dark);
  border-color: var(--cor-primaria-dark);
  color: #0B132B;
}

/* Corrige o texto secundário que você pediu (agora branco, como solicitado) */
[data-bs-theme="dark"] .dashboard-widget .card-body {
  color: var(--cor-texto-principal-dark);
}

[data-bs-theme="dark"] .consulta-hoje-info .servico,
[data-bs-theme="dark"] .pagamento-info .data {
  color: var(--cor-texto-secundario-dark);
}

/* Corrige o ícone do campo de data */
[data-bs-theme="dark"] input[type="date"].form-control::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.25) contrast(0.9);
  opacity: 0.9;
  cursor: pointer;
}
[data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.25) contrast(0.9);
  opacity: 0.9;
  cursor: pointer;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: rgba(26, 61, 100, 0.55) !important; /* translúcido baseado em #1A3D64 */
  color: var(--cor-texto-principal-dark) !important;
  border-color: var(--cor-borda-dark) !important;
}

/* Garante que o campo mantenha a cor escura ao ser focado */
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: rgba(29, 84, 108, 0.65) !important; /* baseado em #1D546C mais forte ao foco */
  border-color: var(--cor-primaria-dark) !important; /* acento */
  box-shadow: 0 0 0 4px rgba(88, 166, 255, 0.18) !important; /* sombra sutil azulada */
}

/* 2. Altera a cor do Header (barra de navegação superior) */
[data-bs-theme="dark"] .navbar.bg-primary {
  background: var(--cor-superficie-dark) !important; /* #1A3D64 */
}

/* 3. Altera a cor da Sidebar (barra de navegação lateral) */
[data-bs-theme="dark"] .sidebar {
  background: var(--cor-superficie-dark); /* #1A3D64 */
  border-right: 1px solid var(--cor-borda-dark);
}

/* Unifica o cabeçalho da sidebar com o novo tema */
[data-bs-theme="dark"] .sidebar-header {
  background: transparent;
  border-bottom-color: var(--cor-borda-dark);
}

[data-bs-theme="dark"] .nav-tabs {
  border-bottom-color: var(--cor-borda-dark);
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
  color: var(--cor-texto-secundario-dark);
  background-color: transparent;
  border-color: transparent;
}

[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
  border-color: var(--cor-borda-dark);
  isolation: isolate;
  /* Corrige bug de sobreposição de borda */
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
  color: var(--cor-primaria-dark);
  background-color: var(--cor-fundo-alt-dark); /* #1D546C */
  border-color: var(--cor-borda-dark);
  border-bottom-color: var(--cor-fundo-alt-dark);
}


/* 2. Unifica o estilo do Accordion (FAQ) */
[data-bs-theme="dark"] .accordion-button {
  background-color: var(--cor-superficie-dark);
  color: var(--cor-texto-principal-dark);
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: var(--cor-fundo-alt-dark);
  color: var(--cor-primaria-dark);
  box-shadow: none;
}

[data-bs-theme="dark"] .accordion-button::after {
  /* Inverte a cor da seta do accordion para branco */
  filter: invert(1) brightness(200%);
}

[data-bs-theme="dark"] .accordion-item {
  border-color: var(--cor-borda-dark);
}

/* 3. Unifica o estilo dos Checkboxes (Configurações) */
[data-bs-theme="dark"] .form-check-input {
  background-color: var(--cor-fundo-dark);
  border-color: var(--cor-borda-dark);
}

[data-bs-theme="dark"] .form-check-input:checked {
  background-color: var(--cor-primaria-dark);
  border-color: var(--cor-primaria-dark);
}


/* 4. Corrige cores específicas dos widgets do Dashboard */
[data-bs-theme="dark"] .consulta-hoje-horario {
  background-color: var(--cor-fundo-alt-dark);
  color: var(--cor-texto-principal-dark);
}

[data-bs-theme="dark"] .pagamento-valor {
  color: var(--cor-texto-principal-dark);
}

[data-bs-theme="dark"] .text-muted {
  color: var(--cor-texto-secundario-dark) !important;
}

[data-bs-theme="dark"] .bg-light {
  background-color: var(--cor-superficie-dark) !important;
  border-color: var(--cor-borda-dark) !important;
}

/* 2. Altera a cor do botão de filtro ativo para o azul do tema escuro */
[data-bs-theme="dark"] .filter-pills .btn.active {
  background-color: var(--cor-primaria-dark) !important;
  border-color: var(--cor-primaria-dark) !important;
  color: #0B132B !important;
  /* Texto escuro para contraste no botão claro */
}


[data-bs-theme="dark"] .btn-outline-warning {
  color: var(--cor-aviso-dark);
  border-color: var(--cor-aviso-dark);
}

[data-bs-theme="dark"] .btn-outline-danger {
  color: var(--cor-erro-dark);
  border-color: var(--cor-erro-dark);
}

/* Botões sólidos para estados (success/warning/danger) usando o mesmo verde */
[data-bs-theme="dark"] .btn-success,
[data-bs-theme="dark"] .btn-warning,
[data-bs-theme="dark"] .btn-danger {
  background-color: var(--cor-sucesso-dark) !important;
  border-color: var(--cor-sucesso-dark) !important;
  color: var(--cor-fundo-dark) !important; /* texto escuro para contraste sobre verde claro */
}

/* Garantia específica para botões de ação no Dashboard */
[data-bs-theme="dark"] .consulta-hoje-acao .btn-success,
[data-bs-theme="dark"] #btnFinalizarConsulta.btn-success {
  background-color: var(--cor-sucesso-dark) !important;
  border-color: var(--cor-sucesso-dark) !important;
  color: var(--cor-fundo-dark) !important;
}

/* Utilitários de texto para estados */
[data-bs-theme="dark"] .text-success,
[data-bs-theme="dark"] .text-warning,
[data-bs-theme="dark"] .text-danger {
  color: var(--cor-sucesso-dark) !important;
}

/* Utilitários para atenção (amarelo específico) */
[data-bs-theme="dark"] .text-attention { color: var(--cor-atencao-dark) !important; }
[data-bs-theme="dark"] .bg-attention { background-color: var(--cor-atencao-dark) !important; color: var(--cor-fundo-dark) !important; }

/* Alerts mapeados para nova paleta */
[data-bs-theme="dark"] .alert-success,
[data-bs-theme="dark"] .alert-warning,
[data-bs-theme="dark"] .alert-danger {
  background-color: rgba(187, 200, 99, 0.18) !important; /* #BBC863 translúcido */
  border-color: rgba(187, 200, 99, 0.35) !important;
  color: var(--cor-texto-principal-dark) !important;
}

[data-bs-theme="dark"] .alert-attention {
  background-color: rgba(252, 181, 59, 0.20) !important; /* #FCB53B translúcido */
  border-color: rgba(252, 181, 59, 0.40) !important;
  color: var(--cor-texto-principal-dark) !important;
}

[data-bs-theme="dark"] .btn-outline-info {
  color: var(--cor-primaria-dark);
  /* Usando o azul claro para destaque */
  border-color: var(--cor-primaria-dark);
}

[data-bs-theme="dark"] .btn-outline-secondary {
  color: var(--dark-acento-hover);
  border-color: var(--dark-acento-border);
}

/* Ajusta a cor do texto quando o mouse passa por cima, para manter o contraste */
[data-bs-theme="dark"] .btn-outline-secondary:hover,
[data-bs-theme="dark"] .btn-outline-warning:hover,
[data-bs-theme="dark"] .btn-outline-danger:hover,
[data-bs-theme="dark"] .btn-outline-info:hover {
  color: var(--dark-superficie-alt);
  /* Texto escuro no fundo claro */
}

/* 1. Garante que todos os Títulos (h1-h6) e textos em negrito (strong) fiquem claros */
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6,
[data-bs-theme="dark"] strong {
  color: var(--cor-texto-principal-dark);
}

/* 2. Altera a cor do texto de "sucesso" para o azul do tema */
[data-bs-theme="dark"] .text-success {
  color: var(--cor-primaria-dark) !important;
}

/* 3. Ajusta o título do calendário na página Agenda */
[data-bs-theme="dark"] .fc-toolbar-title {
  color: var(--cor-texto-principal-dark);
}

/* 4. Estiliza 'badges' claros para o tema escuro */
[data-bs-theme="dark"] .badge.bg-light {
  background-color: var(--cor-fundo-alt-dark) !important;
  color: var(--cor-texto-secundario-dark) !important;
}

/* 5. Aplica o fundo azul marinho a TODOS os modais */
[data-bs-theme="dark"] .modal-content {
  background-color: var(--cor-superficie-dark) !important;
  color: var(--cor-texto-principal-dark) !important;
  border-color: var(--cor-borda-dark) !important;
}

[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--cor-superficie-dark);
  border-color: var(--cor-borda-dark);
}

[data-bs-theme="dark"] .dropdown-item {
  color: var(--cor-texto-principal-dark);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: var(--cor-fundo-alt-dark);
}

[data-bs-theme="dark"] .dropdown-divider {
  border-top-color: var(--cor-borda-dark);
}


/* 2. Estiliza os List Groups (Histórico de Pacientes) */
[data-bs-theme="dark"] .list-group-item {
  background-color: var(--cor-superficie-dark);
  color: var(--cor-texto-principal-dark);
  border-color: var(--cor-borda-dark);
}

[data-bs-theme="dark"] .list-group-item-action:hover,
[data-bs-theme="dark"] .list-group-item-action:focus {
  background-color: var(--cor-fundo-alt-dark);
}

[data-bs-theme="dark"] .list-group-item-action.active,
[data-bs-theme="dark"] .list-group-item.active {
  background-color: var(--cor-sucesso-dark);
  border-color: var(--cor-sucesso-dark);
  color: #0B132B;
}


/* 3. Garante que o Accordion Body tenha o fundo correto */
/* Esta regra complementa a que já tínhamos para o Accordion */
[data-bs-theme="dark"] .accordion-body {
  background-color: var(--cor-superficie-dark);
}

[data-bs-theme="dark"] .btn-secondary {
  background-color: var(--cor-borda-dark);
  border-color: var(--cor-borda-dark);
  color: var(--cor-texto-principal-dark);
}

/* 2. Estiliza os itens da paleta do editor de templates */
[data-bs-theme="dark"] .palette-item {
  background-color: var(--cor-superficie-dark);
  border-color: var(--cor-borda-dark);
  color: var(--cor-texto-principal-dark);
}

[data-bs-theme="dark"] .palette-item:hover {
  background-color: var(--cor-fundo-alt-dark);
  border-color: var(--cor-primaria-dark);
}

/* 3. Estiliza a área de edição do template */
[data-bs-theme="dark"] #template-editor-area {
  background-color: var(--cor-fundo-dark);
}

[data-bs-theme="dark"] .template-dropzone {
  border-color: var(--cor-borda-dark);
}

[data-bs-theme="dark"] .template-dropzone::after {
  color: var(--cor-borda-dark);
}

/* 4. Estiliza os botões de rádio */
[data-bs-theme="dark"] .form-check-input[type="radio"] {
  background-color: var(--cor-fundo-dark);
  border-color: var(--cor-borda-dark);
}

[data-bs-theme="dark"] .form-check-input[type="radio"]:checked {
  background-color: var(--cor-primaria-dark);
  border-color: var(--cor-primaria-dark);
}

/* 5. Estiliza o botão de upload de arquivo */
[data-bs-theme="dark"] .form-control[type="file"]::file-selector-button {
  background-color: var(--cor-borda-dark);
  border-color: var(--cor-borda-dark);
  color: var(--cor-texto-principal-dark);
}

[data-bs-theme="dark"] .fc-view {
  background-color: transparent;
}

/* Altera as bordas da tabela do calendário para um tom sutil do tema */
[data-bs-theme="dark"] .fc table {
  border-color: var(--cor-borda-dark);
}

[data-bs-theme="dark"] .fc-scrollgrid,
[data-bs-theme="dark"] .fc-scrollgrid-section td,
[data-bs-theme="dark"] .fc-col-header-cell,
[data-bs-theme="dark"] .fc-daygrid-day {
  border-color: var(--cor-borda-dark);
}

/* Corrige o fundo do dia "Hoje" para um destaque sutil */
[data-bs-theme="dark"] .fc-day-today {
  background-color: var(--cor-fundo-alt-dark) !important;
}

/* Corrige a cor do texto dos cabeçalhos dos dias (Dom, Seg, Ter...) */
[data-bs-theme="dark"] .fc-col-header-cell-cushion {
  color: var(--cor-texto-secundario-dark);
}

/* Garante que os botões do header do calendário sigam o estilo do tema */
[data-bs-theme="dark"] .fc-button {
  background-color: var(--cor-fundo-alt-dark);
  border-color: var(--cor-borda-dark);
  color: var(--cor-texto-principal-dark);
}

[data-bs-theme="dark"] .fc-button-primary:hover {
  background-color: var(--cor-borda-dark);
}

[data-bs-theme="dark"] .fc-button-primary:not(:disabled).fc-button-active,
[data-bs-theme="dark"] .fc-button-primary:not(:disabled):active {
  background-color: var(--cor-primaria-dark);
  border-color: var(--cor-primaria-dark);
  color: #0B132B;
  /* Texto escuro no botão claro */
}

.btn.btn-outline-secondary,
.btn.btn-outline-success,
.btn.btn-outline-info,
.btn.btn-outline-warning,
.btn.btn-outline-danger {
  /* Adicionado danger */
  background-color: transparent !important;
}

/* Define cores claras e legíveis para texto e borda no tema escuro */
.btn.btn-outline-secondary {
  color: var(--cor-texto-secundario-dark, #adb5bd) !important;
  /* border: 1px solid var(--cor-texto-secundario-dark, #adb5bd) !important; */
}

.btn.btn-outline-success {
  color: var(--bs-success) !important;
  border: 1px solid var(--bs-success) !important;
}

.btn.btn-outline-info {
  color: var(--bs-info) !important;
  border: 1px solid var(--bs-info) !important;
}

.btn.btn-outline-warning {
  color: var(--cor-aviso-dark, #ffc107) !important;
  border: 1px solid var(--cor-aviso-dark, #ffc107) !important;
}

/* REGRA ADICIONADA PARA O BOTÃO VERMELHO */
.btn.btn-outline-danger {
  color: var(--bs-danger) !important;
  /* Cor vermelha padrão do Bootstrap */
  border: 1px solid var(--bs-danger) !important;
}

/* === Estado SELECIONADO de labels/botões outline-primary: usar verde do site === */
.btn-check:checked + .btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary:active {
  background-color: var(--cor-primaria) !important;
  border-color: var(--cor-primaria) !important;
  color: var(--cor-texto-claro) !important;
}

/* Mantém contraste ao focar mesmo sem estar ativo */
.btn-outline-primary:focus {
  box-shadow: 0 0 0 0.25rem rgba(45, 106, 79, 0.25) !important; /* verde #2d6a4f */
}

/* Botão de seleção do wizard: texto e borda pretos quando não ativo */
.btn-wizard-selecionar-resumo,
.btn-wizard-selecionar-consulta {
  color: #000 !important;
  border-color: #000 !important;
}

/* Em tema claro, também reforça a cor verde nos list-group ativos */
.list-group-item-action.active,
.list-group-item.active {
  background-color: var(--cor-primaria) !important;
  border-color: var(--cor-primaria) !important;
  color: var(--cor-texto-claro) !important;
}

/* Override: no template de prompts, o item ativo deve ter apenas borda verde */
.template-prompt-item.active {
  background-color: #fff !important; /* mantém fundo branco */
  border-color: var(--cor-primaria) !important; /* borda verde */
  border-width: 4px !important; /* borda mais grossa */
  color: inherit !important; /* texto volta ao padrão */
}

/* Override para tema escuro: mantém o fundo do tema e borda verde */
[data-bs-theme="dark"] .template-prompt-item.active {
  background-color: var(--cor-superficie-dark) !important;
  border-color: var(--cor-sucesso-dark) !important;
  border-width: 4px !important; /* borda mais grossa */
  color: var(--cor-texto-principal-dark) !important;
}

/* Wizard: itens ativos (consultas/resumos/temas) com apenas borda verde e mais grossa */
#wizardConsultasListContainer .list-group-item.active,
#wizardThemeListContainer .list-group-item.active {
  background-color: #fff !important;
  border-color: var(--cor-primaria) !important;
  border-width: 4px !important;
  color: inherit !important;
}

/* Wizard (dark): itens ativos com borda destacada e fundo do tema */
[data-bs-theme="dark"] #wizardConsultasListContainer .list-group-item.active,
[data-bs-theme="dark"] #wizardThemeListContainer .list-group-item.active {
  background-color: var(--cor-superficie-dark) !important;
  border-color: var(--cor-sucesso-dark) !important;
  border-width: 4px !important;
  color: var(--cor-texto-principal-dark) !important;
}
/* Oculta o botão de reset do wizard (não deve existir na UI) */
#btnResetarWizard {
  display: none !important;
}
[data-bs-theme="dark"] .btn.btn-outline-secondary,
[data-bs-theme="dark"] .btn.btn-outline-warning {
  color: var(--dark-acento);
  /* Texto preto para fundos claros no hover */
}

/* Ajustes de hover (opcional, mas recomendado) */
[data-bs-theme="dark"] .btn.btn-outline-secondary:hover,
[data-bs-theme="dark"] .btn.btn-outline-warning:hover {
  color: var(--dark-texto-sec);
  /* Texto preto para fundos claros no hover */
}

[data-bs-theme="dark"] .btn.btn-outline-success:hover,
[data-bs-theme="dark"] .btn.btn-outline-info:hover,
[data-bs-theme="dark"] .btn.btn-outline-danger:hover {
  /* Adicionado danger */
  color: #fff !important;
  /* Texto branco para fundos escuros no hover */
}

[data-bs-theme="dark"] .offcanvas {
  background-color: var(--cor-superficie-dark) !important;
  color: var(--cor-texto-principal-dark) !important;
}

/* 2. Ajusta o cabeçalho e o botão de fechar */
[data-bs-theme="dark"] .offcanvas-header {
  border-bottom-color: var(--cor-borda-dark) !important;
}

[data-bs-theme="dark"] .offcanvas-header .btn-close {
  /* Filtro CSS para deixar o botão 'X' branco */
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* 3. Estiliza cada item da lista de histórico dentro do Offcanvas */
/* Esta regra é mais específica para anular as classes 'bg-white' e 'text-dark' */
[data-bs-theme="dark"] .offcanvas .list-group-item.item-historico {
  background-color: var(--cor-fundo-alt-dark) !important;
  color: var(--cor-texto-principal-dark) !important;
  border-color: var(--cor-borda-dark) !important;
}

/* 4. Adiciona um efeito de hover nos itens da lista */
[data-bs-theme="dark"] .offcanvas .list-group-item.item-historico:hover {
  background-color: var(--cor-borda-dark) !important;
}

/* ======================================================================== */
/* 10) Tema Escuro - Versão Minimalista                                      */
/*     - Superfícies translúcidas, foco acessível, menos bordas               */
/* ======================================================================== */

[data-bs-theme="dark"] {
  /* Alinha a versão minimalista às variáveis centralizadas do :root */
  --ds-bg: var(--cor-fundo-dark);
  --ds-surface: rgba(16, 44, 74, 0.60);           /* var(--dark-superficie) com transparência */
  --ds-surface-strong: rgba(16, 44, 74, 0.82);    /* superfície forte translúcida */
  --ds-text: var(--cor-texto-principal-dark);
  --ds-text-muted: var(--cor-texto-secundario-dark);
  --ds-accent: var(--cor-primaria-dark);
  --bs-border-color: transparent; /* Remove bordas padrão do Bootstrap */
}

/* Superfícies principais sem borda e com leve blur */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .offcanvas,
[data-bs-theme="dark"] .accordion-item,
[data-bs-theme="dark"] .list-group-item {
  background-color: var(--ds-surface) !important;
  color: var(--cor-texto-principal-dark) !important;
  border: 0 !important;
  box-shadow: var(--sombra-media) !important;
  backdrop-filter: blur(6px);
}

/* Realce ao passar o mouse (hover) em cards no tema escuro */
[data-bs-theme="dark"] .card:hover {
  box-shadow: var(--sombra-forte) !important;
}

/* Inputs e selects com transparência e sem borda */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
  background-color: rgba(16, 44, 74, 0.40) !important; /* baseado em --dark-superficie */
  color: var(--cor-texto-principal-dark) !important;
  border: 0 !important;
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: var(--cor-texto-secundario-dark) !important;
  opacity: 0.9;
}

/* Estados de foco acessíveis sem borda sólida */
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] .btn:focus {
  outline: none;
  box-shadow: 0 0 0 0.16rem rgba(88, 166, 255, 0.35) !important; /* var(--cor-primaria-dark) */
}

/* Botões: manter minimalismo, mas com contraste em hover */
[data-bs-theme="dark"] .btn:hover {
  filter: brightness(1.08);
}

/* Tabelas: remover linhas de grade para um visual clean */
[data-bs-theme="dark"] .table,
[data-bs-theme="dark"] .table * {
  border-color: transparent !important;
}

/* Separadores: suavizar/remover para reduzir ruído visual */
[data-bs-theme="dark"] hr,
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start,
[data-bs-theme="dark"] .border-end {
  border-color: transparent !important;
}

/* Dropdowns e menus: superfícies translúcidas com contraste adequado */
[data-bs-theme="dark"] .dropdown-item {
  color: var(--ds-text) !important;
}
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: var(--ds-surface-strong) !important;
}

/* Modais: reforçar superfície para leitura de conteúdo */
[data-bs-theme="dark"] .modal-content {
  background-color: var(--ds-surface-strong) !important;
}

/* Offcanvas: já coberto; reforçar sem borda */
[data-bs-theme="dark"] .offcanvas-header,
[data-bs-theme="dark"] .offcanvas-body {
  border: 0 !important;
}

/* ============================= */
/* Header (Navbar) minimalista   */
/* ============================= */
[data-bs-theme="dark"] .navbar {
  background-color: var(--ds-surface-strong) !important;
  border: 0 !important;
  backdrop-filter: blur(6px);
  box-shadow: var(--sombra-media) !important;
}
[data-bs-theme="dark"] .navbar .navbar-brand,
[data-bs-theme="dark"] .navbar .nav-link {
  color: var(--cor-texto-principal-dark) !important;
}
[data-bs-theme="dark"] .navbar .nav-link:hover,
[data-bs-theme="dark"] .navbar .nav-link:focus {
  color: var(--ds-text) !important;
  filter: brightness(1.1);
}
[data-bs-theme="dark"] #sidebarToggle.btn {
  border: 0 !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--cor-texto-principal-dark) !important;
}
[data-bs-theme="dark"] #sidebarToggle.btn:hover,
[data-bs-theme="dark"] #sidebarToggle.btn:focus {
  filter: brightness(1.1);
  box-shadow: 0 0 0 0.16rem rgba(88, 166, 255, 0.35) !important;
}

/* ============================= */
/* Sidebar minimalista           */
/* ============================= */
[data-bs-theme="dark"] #sidebar.sidebar {
  background: var(--ds-surface) !important;
  box-shadow: var(--sombra-forte) !important;
  border-right: 0 !important;
}
[data-bs-theme="dark"] #sidebar .sidebar-header {
  background: transparent !important;
  border-bottom: 0 !important;
}
[data-bs-theme="dark"] #sidebar .nav-link {
  color: var(--cor-texto-secundario-dark) !important;
  border-radius: 10px;
}
[data-bs-theme="dark"] #sidebar .nav-link:hover {
  background: var(--ds-surface-strong) !important;
  color: var(--ds-text) !important;
  box-shadow: none !important;
  transform: translateX(2px);
}
[data-bs-theme="dark"] #sidebar .nav-link.active {
  background: rgba(88, 166, 255, 0.16) !important; /* realce sutil com acento */
  color: var(--cor-texto-principal-dark) !important;
  box-shadow: none !important;
}
[data-bs-theme="dark"] #sidebar .nav-link i {
  color: var(--ds-text) !important;
  opacity: 0.92;
}

/* 5. Garante que qualquer texto com a classe .text-dark dentro do offcanvas fique claro */
[data-bs-theme="dark"] .offcanvas .text-dark {
  color: var(--cor-texto-principal-dark) !important;
}

[data-bs-theme="dark"] .offcanvas #collapse-exames-historico .bg-white {
  background-color: var(--cor-fundo-alt-dark) !important;
  border-color: var(--cor-borda-dark) !important;
}

/* --- ESTILOS DO ASSISTENTE (WIZARD) DE GERAÇÃO DE CONTEÚDO --- */
.wizard-card {
  position: absolute;
  top: 6rem;
  left: 2rem;
  right: 2rem;
  bottom: 0.5rem; /* << ALTERAÇÃO AQUI */
  display: flex;
  flex-direction: column;
  background: var(--cor-superficie);
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra-media);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: translateX(30px) scale(0.98);
  pointer-events: none;
}

/* O card ativo, que fica na frente */
.wizard-card.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  z-index: 10;
  pointer-events: auto;
}

/* Cards que já foram preenchidos e estão "atrás" */
.wizard-card.inactive {
  opacity: 1;
  pointer-events: none;
  user-select: none;
}

/* Efeito de baralho empilhado na HORIZONTAL */
.wizard-card.inactive {
    opacity: 0.5;
}

/* O card imediatamente atrás do ativo */
.wizard-card.inactive:nth-last-child(2) { 
    z-index: 9; 
    transform: translateX(-15px) scale(0.98); /* Posição para a esquerda */
    opacity: 0.8;
}

/* O segundo card atrás do ativo */
.wizard-card.inactive:nth-last-child(3) { 
    z-index: 8; 
    transform: translateX(-30px) scale(0.96); /* Empilhamento compacto à esquerda */
    opacity: 0.6;
}

/* O terceiro card atrás do ativo */
.wizard-card.inactive:nth-last-child(4) { 
    z-index: 7; 
    transform: translateX(-45px) scale(0.94); /* Empilhamento compacto à esquerda */
    opacity: 0.4;
}

/* Esconde os cards futuros */
.wizard-card.hidden-future {
  display: none;
}

.wizard-card .card-body {
  flex-grow: 1;
  /* Faz o corpo do card ocupar o espaço disponível */
  overflow-y: auto;
}

/* === Wizard: comportamento mobile (≤768px) === */
@media (max-width: 768px) {
  /* Mostra apenas o card ativo no mobile */
  .wizard-card.inactive { display: none !important; }
  .wizard-card.hidden-future { display: none !important; }
  /* Remove deslocamentos/escala para garantir visualização total */
  .wizard-card { transform: none !important; opacity: 1 !important; }
}

[data-bs-theme="dark"] .table {
  /* Define as cores base da tabela usando nossas variáveis de tema */
  --bs-table-bg: var(--cor-superficie-dark);
  --bs-table-color: var(--cor-texto-principal-dark);
  --bs-table-border-color: var(--cor-borda-dark);

  /* Define a cor para as linhas alternadas (table-striped) */
  --bs-table-striped-bg: var(--cor-fundo-alt-dark);

  /* Define a cor ao passar o mouse por cima (table-hover) */
  --bs-table-hover-bg: #2a3a5b;
  /* Um tom ligeiramente mais claro para destaque */
}

/* Garante que os cabeçalhos da tabela também sigam as cores corretas */
[data-bs-theme="dark"] .table thead th {
  color: var(--cor-texto-secundario-dark);
  border-bottom-width: 2px;
}

/* ============================================================================ */
/* NOVO: ESTILOS PARA O ROADMAP DO ASSISTENTE (VERSÃO CORRIGIDA)              */
/* ============================================================================ */
.roadmap-container {
  position: absolute; /* Fixa a posição dele dentro do container */
  top: 1.5rem;      /* Posiciona 1.5rem do topo */
  left: 0;
  right: 0;
  z-index: 20;      
  display: flex;
  justify-content: center;
  /* Removemos o padding que estava empurrando para baixo */
}

.roadmap {
  display: flex;
  width: 70%; /* Controla o quão largo o roadmap é na tela */
  list-style: none;
  padding: 0;
  margin: 0;
}

.roadmap-item {
  flex: 1; /* Faz cada item ocupar o mesmo espaço, esticando a linha */
  position: relative;
  display: flex;
  justify-content: center;
}

/* A linha de conexão. Usamos ::before para desenhar a linha "para trás" */
.roadmap-item:not(:first-child)::before {
  content: '';
  position: absolute;
  /* Começa na metade direita do espaço do item anterior e vai até o centro do item atual */
  right: 50%;
  top: 50%;
  transform: translateY(-50%);
  width: 100%; /* Ocupa todo o espaço do 'flex: 1' */
  height: 2px;
  background-color: var(--cor-borda);
  transition: background-color 0.4s ease;
  z-index: -1;
}

/* O círculo do número */
.roadmap-step {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--cor-borda);
  background-color: var(--cor-superficie);
  color: var(--cor-borda);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-family: 'Poppins', sans-serif;
  transition: all 0.4s ease;
  /* Garante que o círculo fique na frente da linha */
  position: relative;
  z-index: 1;
}

/* --- ESTADOS DINÂMICOS --- */

/* Preenche o círculo do passo completo */
.roadmap-item.is-complete .roadmap-step {
  background-color: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: var(--cor-texto-claro);
}

/* Preenche a linha que LEVA a um passo completo */
.roadmap-item.is-complete:not(:first-child)::before {
  background-color: var(--cor-primaria);
}

/* Destaca o círculo do passo ATIVO */
.roadmap-item.is-active .roadmap-step {
  transform: scale(1.2);
  box-shadow: 0 0 0 4px var(--cor-primaria-lighter), 0 0 15px rgba(82, 183, 136, 0.5);
}

#wizard-container {
  min-height: 75vh !important;
}
/* --- Badges de Status de Consultas --- */
.badge-consulta-agendada {
  background-color: #0d6efd1a; /* azul claro translucido */
  color: #0d6efd;
}
.badge-consulta-confirmada {
  background-color: #1987541a; /* verde claro translucido */
  color: #198754;
}
.badge-consulta-concluida {
  background-color: #20c9971a; /* teal claro */
  color: #20c997;
}
.badge-consulta-nao_compareceu {
  background-color: #ffc1071a; /* amarelo claro */
  color: #ffc107;
}
.badge-consulta-cancelada {
  background-color: #dc35451a; /* vermelho claro */
  color: #dc3545;
}
.badge-consulta-reagendada {
  background-color: #6f42c11a; /* roxo claro */
  color: #6f42c1;
}

/* Tema escuro: ajustar contraste das badges */
[data-bs-theme="dark"] .badge-consulta-agendada { background-color: rgba(13,110,253,0.2); color: #58A6FF; }
[data-bs-theme="dark"] .badge-consulta-confirmada { background-color: rgba(25,135,84,0.2); color: var(--cor-sucesso-dark); }
[data-bs-theme="dark"] .badge-consulta-concluida { background-color: rgba(32,201,151,0.2); color: #20c997; }
[data-bs-theme="dark"] .badge-consulta-nao_compareceu { background-color: rgba(255,193,7,0.2); color: var(--cor-aviso-dark); }
[data-bs-theme="dark"] .badge-consulta-cancelada { background-color: rgba(220,53,69,0.2); color: var(--cor-erro-dark); }
[data-bs-theme="dark"] .badge-consulta-reagendada { background-color: rgba(111,66,193,0.2); color: #9f7aea; }

/* === MOBILE (≤768px) === */
@media (max-width: 768px) {
  /* Sidebar ocupa 80% da largura e desliza sobre o conteúdo */
  .sidebar {
    width: 80vw;
    transform: translateX(-100%);
    box-shadow: var(--sombra-forte);
  }

  /* Quando aberta, a sidebar entra e deixa ~20% visível da página */
  .sidebar.show {
    transform: translateX(0);
  }

  /* Conteúdo principal ocupa 100% e não desloca com a sidebar */
  .main-content {
    margin-left: 0;
    width: 100%;
  }

  /* Overlay mais sutil para manter a página visível e clicável */
  .sidebar-overlay {
    background: rgba(0, 0, 0, 0.3);
    left: 0;
    width: 100vw;
  }

  /* Quando o menu estiver aberto, limita o overlay ao espaço fora do menu */
  body.menu-open .sidebar-overlay {
    left: 80vw;
    width: 20vw;
  }

  /* Navbar: garante alinhamento entre título e botão hambúrguer */
  .navbar .container-fluid {
    display: flex;
    align-items: center;
    gap: .5rem;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }
  .navbar-brand {
    display: flex;
    align-items: center;
    margin-left: 0;
    line-height: 1.25;
  }

  /* Evita que o botão ocupe a largura toda e garante tamanho pequeno */
  .navbar .btn {
    width: auto;
    display: inline-flex;
    align-items: center;
    padding: .25rem .5rem;
    line-height: 1;
  }
  #sidebarToggle {
    margin-right: .5rem;
  }
}
/* Mobile: evitar scroll horizontal nos itens do wizard, forçando quebra de palavras longas */
@media (max-width: 768px) {
  #wizardConsultasListContainer .list-group-item,
  #wizardThemeListContainer .list-group-item {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* === Layout dos filtros de período do Financeiro (3-1-3) === */
#financeiroFiltrosPeriodo .dropdown-toggle {
  padding: .3rem .6rem;
  font-size: .8rem;
}

/* Garante azul Bootstrap para o botão ativo no grupo financeiro */
#financeiroFiltrosPeriodo .btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}

/* Responsivo: mantém linha única rolável em telas pequenas */
@media (max-width: 576px) {
  #financeiroFiltrosPeriodo .dropdown-toggle {
    font-size: .8rem;
  }
}

/* === Botão de status de consultas === */
.btn-status {
  background: var(--bs-primary);
  color: #fff !important;
  border: 1px solid var(--bs-primary) !important;
}
.btn-status:hover {
  filter: brightness(1.05);
}
.btn-status.show,
.btn-status:active,
.btn-status:focus {
  background: var(--bs-primary) !important;
  color: #fff !important;
  border-color: var(--bs-primary) !important;
}
[data-bs-theme="dark"] .btn-status {
  background: var(--cor-primaria-dark);
  color: #0B132B !important;
  border-color: var(--cor-primaria-dark) !important;
}
[data-bs-theme="dark"] .btn-status.show,
[data-bs-theme="dark"] .btn-status:active,
[data-bs-theme="dark"] .btn-status:focus {
  background: var(--cor-primaria-dark) !important;
  color: #0B132B !important;
  border-color: var(--cor-primaria-dark) !important;
}

/* === Cores das opções do dropdown de status === */
.dropdown-item.status-confirmar { color: var(--bs-info); }
.dropdown-item.status-confirmar:hover { background-color: rgba(var(--bs-info-rgb), 0.1); }
.dropdown-item.status-nao-compareceu { color: var(--bs-warning); }
.dropdown-item.status-nao-compareceu:hover { background-color: rgba(var(--bs-warning-rgb), 0.1); }
.dropdown-item.status-cancelada { color: var(--bs-danger); }
.dropdown-item.status-cancelada:hover { background-color: rgba(var(--bs-danger-rgb), 0.1); }
/* Botão dedicado para o dropdown de status das consultas */
.btn-status {
  background: var(--bs-primary);
  color: #fff !important;
  border: 1px solid var(--bs-primary) !important;
}

.btn-status:hover {
  filter: brightness(1.05);
}

/* Tema escuro: usa a primária clara configurada */
[data-bs-theme="dark"] .btn-status {
  background: var(--cor-primaria-dark);
  color: #0B132B !important; /* contraste escuro no primário claro */
}
/* === Tabela compacta no modal financeiro (sem scroll lateral) === */
.parcelas-table-container {
  overflow-x: hidden; /* evita scroll lateral */
  width: 100%;
}
.parcelas-table {
  table-layout: fixed;
  width: 100%;
  font-size: 0.9rem;
}
.parcelas-table td, .parcelas-table th {
  vertical-align: middle;
  white-space: normal;
  word-break: break-word;
}
.parcelas-table td .form-control.form-control-sm,
.parcelas-table td .form-select.form-select-sm {
  width: 100%;
}
/* inputs compactos dentro das células */
.parcelas-table input.form-control.form-control-sm {
  padding: 0.25rem 0.5rem;
}
.parcelas-table .select-forma-pagamento.form-select.form-select-sm {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.parcelas-table td, .parcelas-table th {
  padding: 0.35rem 0.5rem;
}

/* Evita scroll lateral no modal financeiro */
#financeiroModal .modal-body,
#financeiroModal .modal-content {
  overflow-x: hidden;
}

/* === Layout dos cards superiores do Financeiro === */
#section-financeiro .cards-carousel {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

#section-financeiro .cards-carousel > [class^="col-"] {
  padding: 0;
}

/* Desktop: todos os cards em linha sem quebra */
@media (min-width: 1200px) {
  #section-financeiro .cards-carousel {
    flex-wrap: nowrap;
  }
  #section-financeiro .cards-carousel > .col-xl-2 {
    flex: 1 1 0;
    width: auto;
    max-width: none;
  }
}

/* Tablets e abaixo: quebra controlada, sem overflow horizontal */
@media (max-width: 1199.98px) {
  #section-financeiro .cards-carousel {
    flex-wrap: wrap;
  }
}
/* --- Loading UI (Puzzle + Progress Bar) --- */
.loading-panel {
  min-height: 220px;
}
.puzzle-loader {
  width: 180px;
  height: 180px;
}
.puzzle-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
}
.puzzle-piece {
  background: linear-gradient(135deg, rgba(13,110,253,0.18), rgba(13,110,253,0.36));
  border: 1px solid rgba(13,110,253,0.35);
  border-radius: 6px;
  animation: piecePop 1600ms ease-in-out infinite;
}
.puzzle-piece:nth-child(odd) { animation-delay: 220ms; }
.puzzle-piece:nth-child(2) { animation-delay: 420ms; }
.puzzle-piece:nth-child(3) { animation-delay: 620ms; }
.puzzle-piece:nth-child(4) { animation-delay: 820ms; }
.puzzle-piece:nth-child(5) { animation-delay: 1020ms; }
.puzzle-piece:nth-child(6) { animation-delay: 1220ms; }
.puzzle-piece:nth-child(7) { animation-delay: 1420ms; }
.puzzle-piece:nth-child(8) { animation-delay: 1620ms; }
.puzzle-piece:nth-child(9) { animation-delay: 1820ms; }

@keyframes piecePop {
  0%   { transform: scale(0.96); opacity: 0.75; }
  50%  { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(0.96); opacity: 0.75; }
}