/* css de todo projeto, separado por comentários e reultilização máxima. */

/* ============================================================
   VARIÁVEIS GLOBAIS — base de todo o projeto
   ============================================================ */
:root {
  /* Paleta principal */
  --primary-dark: #006571;
  --primary-medium: #019589;
  --primary-light: #01a89e;

  /* Fontes — sempre usadas via variável, nunca hardcoded (igual às cores) */
  --font-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  /* corpo, tabelas, tooltips — tudo o mais */
  --font-system: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  /* títulos, menus da top bar / drawer — fonte de sistema */

  /* Cores dos cards-resumo (view dashboard) */
  --stat-verde: #2e7d32;
  --stat-azul: #1565c0;
  --stat-laranja: #ef6c00;
  --stat-vermelho: #d32f2f;

  /* Fundo e superfícies */

  /* fundo geral das views */
  --bg-deep: #141c24;
  /* top bar — levemente mais claro */
  --bg-topbar: #1a2535;
  --bg-card: rgba(255, 255, 255, 0.04);
  --border-subtle: rgba(1, 168, 158, 0.18);

  /* Texto */
  --text-primary: #e8f4f5;
  --text-muted: rgba(232, 244, 245, 0.45);

  /* Gradiente do botão */
  --gradient-btn: linear-gradient(135deg, var(--primary-dark), var(--primary-light));

  /* Paleta de cores para gráficos — 10 cores vivas com contraste no dark */
  --chart-1: #FF6B6B;
  /* coral       */
  --chart-2: #FF9F43;
  /* laranja     */
  --chart-3: #FECA57;
  /* dourado     */
  --chart-4: #A3CB38;
  /* lima        */
  --chart-5: #1DD1A1;
  /* menta       */
  --chart-6: #48f5fb;
  /* ciano       */
  --chart-7: #54A0FF;
  /* azul        */
  --chart-8: #5F27CD;
  /* índigo      */
  --chart-9: #C44569;
  /* rosa        */
  --chart-10: #FF9FF3;
  /* lilás       */
  --chart-11: #E17055;
  /* terracota — warm */
  --chart-12: #00B894;
  /* verde floresta — cool */
  --chart-13: #0984E3;
  /* azul petróleo — cool */
  --chart-14: #6C5CE7;
  /* uva — roxo médio */
  --chart-15: #FDCB6E;
  /* dourado suave — warm */


  /* Escala de verde exclusiva para o Heatmap (Gráfico 8) —
     do mais claro (valores baixos) ao mais escuro (valores altos) */
  --heatmap-1: #6de777;
  /* verde neon claro   */
  --heatmap-2: #3ddc84;
  /* verde android vivo */
  --heatmap-3: #00b341;
  /* verde puro intenso */
  --heatmap-4: #007a2f;
  /* verde escuro vivo  */

  --rank-gold: #FFD700;
  --rank-silver: #B8C4CC;
  --rank-copper: #CD7F32;
}


/* ============================================================
   RESET DE FONTE GLOBAL — nada no projeto pode cair no
   default serifado do navegador (Times New Roman).
   O DataTables injeta <table>/<th>/<td> sem font-family
   própria, então forçamos a herança de --font-body aqui.
   ============================================================ */
body {
  font-family: var(--font-body);
}

table,
th,
td,
.dataTables_wrapper,
.dataTables_wrapper th,
.dataTables_wrapper td {
  font-family: var(--font-body);
}


/* ============================================================
   LOGIN — layout e estrutura
   ============================================================ */
/* O body global tem padding-top: 62px para a top bar fixa do dashboard.
   A tela de login não tem top bar; sem anular esse padding, 100vh + 62px
   estoura a janela e gera barra de rolagem desnecessária. */
body.login-page {
  padding-top: 0;
}

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-deep);
  /* Mesh gradient oceânico com as cores primárias */
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(0, 101, 113, 0.35) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(1, 149, 137, 0.28) 0%, transparent 55%),
    radial-gradient(ellipse 50% 70% at 60% 30%, rgba(1, 168, 158, 0.15) 0%, transparent 50%);
  font-family: var(--font-body);
}

/* Card central com glassmorphism */
.login-card {
  width: 100%;
  max-width: 400px;
  padding: 2.8rem 2.5rem 2.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow:
    0 0 0 1px rgba(1, 168, 158, 0.06),
    0 24px 60px rgba(0, 0, 0, 0.55);

  /* Animação de entrada */
  animation: cardReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cardReveal {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

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

/* Logo acima do card */
.login-logo {
  display: block;
  margin: 0 auto 1.8rem;
  max-width: 220px;
  /* era 160px */
  max-height: 100px;
  /* era 70px */
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(1, 168, 158, 0.45));
  animation: logoReveal 0.6s ease both;
}

@keyframes logoReveal {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

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

/* Título do formulário */
.login-title {
  font-family: var(--font-system);
  font-size: 1.25rem;
  /* era 1.6rem */
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  letter-spacing: 0.02em;
  margin-bottom: 1.8rem;
}

/* Linha decorativa abaixo do título */
.login-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  margin: 0.5rem auto 0;
  background: var(--gradient-btn);
  border-radius: 2px;
}


/* ============================================================
   LOGIN — campos e inputs
   ============================================================ */
.login-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.45rem;
}

/* Wrapper do input (para posicionar o ícone do olhinho) */
.input-wrapper {
  position: relative;
  margin-bottom: 1.3rem;
}

.login-input {
  width: 100%;
  box-sizing: border-box;
  /* ← garante que padding não altera a largura */
  padding: 0.72rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(1, 168, 158, 0.22);
  border-radius: 10px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}

.login-input:focus {
  border-color: var(--primary-light);
  background: rgba(1, 168, 158, 0.08);
  box-shadow: 0 0 0 3px rgba(1, 168, 158, 0.12);
}

/* Input de senha com espaço para o olhinho */
.login-input.has-icon {
  padding-right: 2.8rem;
}

/* Uppercase visual e de valor no input de usuário */
.login-input[name="username"] {
  text-transform: uppercase;
}

/* Botão olhinho */
.btn-eye {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0;
  line-height: 1;
  transition: color 0.2s;
}

.btn-eye:hover {
  color: var(--primary-light);
}


/* ============================================================
   LOGIN — botão de submit
   ============================================================ */
.btn-login {
  width: 100%;
  padding: 0.8rem;
  margin-top: 0.6rem;
  background: var(--gradient-btn);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  transition: opacity 0.2s, transform 0.15s, box-shadow 0.25s;
}

.btn-login:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(1, 168, 158, 0.35);
}

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


/* ============================================================
   LOGIN — alerta de erro
   ============================================================ */
.login-alert {
  padding: 0.7rem 1rem;
  margin-bottom: 1.2rem;
  background: rgba(220, 53, 69, 0.12);
  border: 1px solid rgba(220, 53, 69, 0.3);
  border-radius: 8px;
  color: #f5a3aa;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ============================================================
   TOP BAR — estrutura fixa
   ============================================================ */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 62px;
  z-index: 1000;

  display: flex;
  align-items: center;
  gap: 1rem;

  background: var(--bg-topbar);
  /* Glow teal na borda inferior — separa a barra do conteúdo */
  border-bottom: 1px solid rgba(1, 168, 158, 0.25);
  box-shadow: 0 2px 20px rgba(1, 168, 158, 0.08);

  padding: 0 1.5rem;
  box-sizing: border-box;
}


/* ============================================================
   TOP BAR — logo
   ============================================================ */
.topbar-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-right: 1rem;
}

.topbar-logo img {
  height: 38px;
  object-fit: contain;
}


/* ============================================================
   TOP BAR — navegação central
   ============================================================ */
.topbar-nav {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex: 1;
  /* empurra as actions para a direita */
  flex-wrap: nowrap;
  overflow-x: auto;
  /* scroll horizontal se a tela for pequena */
  scrollbar-width: none;
}

.topbar-nav::-webkit-scrollbar {
  display: none;
}


/* ============================================================
   TOP BAR — item (nav + actions compartilham o mesmo estilo)
   ============================================================ */
.topbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;

  padding: 0.45rem 0.75rem;
  border-radius: 8px;

  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  white-space: nowrap;

  transition: background 0.2s, color 0.2s;
}

.topbar-item i {
  font-size: 1.2rem;
  color: var(--primary-medium);
}

.topbar-item:hover {
  background: rgba(1, 168, 158, 0.1);
  color: var(--primary-light);
}

/* Item ativo — destaque teal sólido */
.topbar-item.active {
  background: var(--primary-medium);
}

.topbar-item.active i {
  color: #fff;
  /* sobrescreve o primary-medium quando ativo */
}

/* Menus desktop — fonte de sistema com fallback cross-platform */
.topbar-item span {
  font-family: var(--font-system);
}

/* Menus mobile — drawer */
.drawer-item span {
  font-family: var(--font-system);
}


/* ============================================================
   TOP BAR — actions (direita)
   ============================================================ */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
  margin-left: 1rem;

  /* Separador visual à esquerda das actions */
  border-left: 1px solid rgba(1, 168, 158, 0.15);
  padding-left: 1rem;
}

/* Sair — leve toque vermelho no hover para reforçar a ação destrutiva */
.topbar-logout:hover {
  background: rgba(220, 53, 69, 0.12);
  color: #f5a3aa;
}

/* ============================================================
   TOP BAR — dropdown de Usuários (desktop)
   ============================================================ */
.topbar-dropdown {
  position: relative;
}

/* O toggle é um <button> — zera aparência nativa e herda o visual de .topbar-item.
   NÃO usar `font: inherit` aqui: isso sobrescreveria o font-size de .topbar-item
   com o tamanho default do <button>, deixando "Usuários" maior que os outros itens. */
.topbar-dropdown-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: inherit;
}

.topbar-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 220px;

  display: flex;
  flex-direction: column;
  padding: 0.4rem;

  background: var(--bg-deep);
  border: 1px solid rgba(1, 168, 158, 0.2);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);

  /* Escondido por padrão — animação suave ao abrir */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 1100;
}

.topbar-dropdown.aberto .topbar-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.topbar-dropdown-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;

  padding: 0.6rem 0.75rem;
  border-radius: 8px;

  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-system);
  font-size: 0.9rem;
  white-space: nowrap;
}

.topbar-dropdown-link i {
  font-size: 1rem;
  color: var(--primary-medium);
  width: 1.1rem;
  text-align: center;
}

.topbar-dropdown-link:hover {
  background: rgba(1, 168, 158, 0.1);
  color: var(--primary-light);
}

/* ============================================================
   DRAWER MOBILE — seção Usuários (rótulo + subitens)
   ============================================================ */
.drawer-section-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;

  padding: 0.5rem 0.75rem;
  color: var(--text-secondary, #8ba0b3);
  font-family: var(--font-system);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.drawer-section-label i {
  color: var(--primary-medium);
}

.drawer-subitem {
  padding-left: 1.5rem;
}

/* ============================================================
   PAGE HEADER — título + subtítulo padrão das telas de gestão
   ============================================================ */
.page-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.page-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  width: 3.25rem;
  height: 3.25rem;
  border-radius: 12px;

  background: rgba(1, 168, 158, 0.12);
  color: var(--primary-light);
  font-size: 1.4rem;
}

.page-title {
  font-family: var(--font-system);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  margin: 0;
}

.page-subtitle {
  color: var(--text-secondary, #8ba0b3);
  font-size: 0.95rem;
  margin: 0.15rem 0 0;
}

/* Variante centralizada — usada na tela de Cadastrar Usuário */
.page-header--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.45rem;
}

/* Tela de formulário — compacta: não força altura de tela cheia (evita
   rolagem) e mantém o topo justo, sem espaço morto acima do ícone. */
.view-card.view-card--form {
  position: relative;
  box-sizing: border-box;
  /* Preenche da base do topbar (62px + 1px de borda) até o fim da tela,
     descontando também o padding vertical do .content (1rem em cima + 1rem
     embaixo = 2rem) para não gerar rolagem. */
  min-height: calc(100dvh - 63px - 2rem);
  padding: 1rem 1.5rem 1.25rem;
}

/* Botão voltar fora do fluxo (canto sup. esquerdo), pra não empurrar o header */
.view-card--form .btn-voltar {
  position: absolute;
  top: 1rem;
  left: 1.5rem;
  z-index: 1;
}

/* Ícone do header menor e colado ao topo */
.view-card--form .page-header-icon {
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1rem;
  border-radius: 10px;
}

/* Header sem margem extra — encosta no topo do card */
.view-card--form .page-header--center {
  margin-top: 0;
  gap: 0.3rem;
}

/* Título/subtítulo menores nesta tela pra ganhar altura */
.view-card--form .page-title {
  font-size: 1.55rem;
}
.view-card--form .page-subtitle {
  font-size: 0.85rem;
}

/* ============================================================
   FORMULÁRIO DE USUÁRIO — cadastro/edição (estilo "caixinha")
   ============================================================ */
.user-form {
  max-width: 860px;
  margin: 1.75rem auto 0;
}

/* Card que agrupa todos os inputs (mesmo padrão de .filter-card) */
.form-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1rem 1.4rem;
}

/* Dentro do card, o input usa um fundo mais escuro para destacar a "caixinha" */
.form-card .form-input {
  background: rgba(0, 0, 0, 0.18);
}
.form-card .form-input:focus {
  background: rgba(1, 168, 158, 0.06);
}

/* Cadastro de clínica tem 8 campos (par), então as ações ocupam a linha
   inteira do grid para o botão encostar na borda direita do form. */
#form-clinica .form-actions {
  grid-column: 1 / -1;
}

/* Campo somente-leitura (ex.: unidade autopreenchida) — sinaliza que não edita */
.form-input[readonly] {
  cursor: not-allowed;
  color: var(--text-secondary, #8ba0b3);
}
.form-input[readonly]:focus {
  border-color: var(--border-subtle);
  box-shadow: none;
  background: rgba(0, 0, 0, 0.18);
}

/* Grid responsivo — 2 colunas em desktop, 1 em telas estreitas */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem 1.25rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.form-label {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

/* Input caixinha — borda em todos os lados, fundo destacado */
.form-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.form-input:focus {
  border-color: var(--primary-medium);
  background: rgba(1, 168, 158, 0.06);
  box-shadow: 0 0 0 3px rgba(1, 168, 158, 0.12);
}

/* Uppercase automático em campos de texto; email em minúsculas */
.form-input {
  text-transform: uppercase;
}
.form-input--email {
  text-transform: lowercase;
}

/* Espaço para o olhinho nos campos de senha */
.form-input.has-icon {
  padding-right: 2.7rem;
}

/* No form, o wrapper do olhinho não tem a margem do login */
.user-form .input-wrapper {
  margin-bottom: 0;
}

/* Select — remove aparência nativa, seta própria.
   O seletor inclui .form-card para vencer .form-card .form-input (que usa o
   shorthand `background` e apagaria o background-image da seta). Cor e imagem
   são declaradas separadamente para coexistirem. */
select.form-input,
.form-card select.form-input {
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(0, 0, 0, 0.18);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%2301a89e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 7 7.5 13 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.2rem;
  cursor: pointer;
}
/* Mantém a seta visível também quando o select está focado */
.form-card select.form-input:focus {
  background-color: rgba(1, 168, 158, 0.06);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%2301a89e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 7 7.5 13 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
}
select.form-input option {
  background: var(--bg-deep);
  color: var(--text-primary);
  text-transform: none;
}

/* Mensagem de erro por campo */
.field-error {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: #f5a3aa;
}

/* Campo com erro — borda vermelha */
.form-input.has-error {
  border-color: rgba(220, 53, 69, 0.6);
}

/* Alertas de topo (erro/sucesso) */
.form-alert {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 860px;
  margin: 1.25rem auto 0;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.88rem;
}
.form-alert--erro {
  background: rgba(220, 53, 69, 0.12);
  border: 1px solid rgba(220, 53, 69, 0.35);
  color: #f5a3aa;
}
.form-alert--sucesso {
  background: rgba(1, 168, 158, 0.12);
  border: 1px solid rgba(1, 168, 158, 0.35);
  color: var(--primary-light);
}

/* Ações do formulário — célula do grid alinhada à base do último campo,
   botão encostado à direita. Fica na mesma linha do Contato. */
.form-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.btn-salvar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.6rem;
  background: var(--primary-medium);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.btn-salvar:hover {
  background: var(--primary-light);
}
.btn-salvar:active {
  transform: translateY(1px);
}

/* Responsivo — uma coluna em telas estreitas */
@media (max-width: 700px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  /* Empilhado, o botão ganha respiro do campo acima */
  .form-actions {
    margin-top: 0.5rem;
  }
  /* Botão voltar volta ao fluxo pra não cobrir o header centralizado */
  .view-card--form .btn-voltar {
    position: static;
  }
  .view-card--form .page-header--center {
    margin-top: 0.75rem;
  }
}

/* Botão voltar — canto superior esquerdo da tela de cadastro/edição */
.btn-voltar {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;

  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.85rem;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.btn-voltar:hover {
  background: rgba(1, 168, 158, 0.1);
  border-color: rgba(1, 168, 158, 0.4);
  color: var(--primary-light);
}
.btn-voltar i {
  font-size: 0.8rem;
}

/* Dica de campo (ex.: senha opcional na edição) */
.field-hint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.74rem;
  color: var(--text-muted);
}
.field-hint i {
  color: var(--primary-medium);
}

/* ============================================================
   MODAL — overlay + caixa central (usado na exclusão de usuário)
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;

  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);

  /* Escondido por padrão */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
}
.modal-overlay.aberto {
  opacity: 1;
  visibility: visible;
}

.modal-box {
  width: 100%;
  max-width: 400px;
  padding: 1.75rem;
  text-align: center;

  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);

  transform: translateY(-10px);
  transition: transform 0.2s ease;
}
.modal-overlay.aberto .modal-box {
  transform: translateY(0);
}

.modal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  font-size: 1.4rem;
}
.modal-icon--perigo {
  background: rgba(220, 53, 69, 0.14);
  color: #f5a3aa;
}

.modal-titulo {
  font-family: var(--font-system);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}

.modal-texto {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-secondary, #8ba0b3);
  margin: 0 0 1.5rem;
}
.modal-texto strong {
  color: var(--text-primary);
}

.modal-acoes {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.btn-modal {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.3rem;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.btn-modal--cancelar {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
}
.btn-modal--cancelar:hover {
  background: rgba(255, 255, 255, 0.05);
}
.btn-modal--excluir {
  background: #c0392b;
  border: 1px solid #c0392b;
  color: #fff;
}
.btn-modal--excluir:hover {
  background: #d84a3b;
  border-color: #d84a3b;
}


/* ============================================================
   LAYOUT — espaço para a top bar fixa não sobrepor o conteúdo
   ============================================================ */
body {
  margin: 0;
  padding-top: 62px;
  background-color: var(--bg-deep);
}

/* Respiro entre o card das views e as bordas da tela — deixa o fundo
   aparecer em volta do card (todas as views passam por .content). */
.content {
  padding: 1rem;
  box-sizing: border-box;
}

/* ============================================================
   VIEW CARD — container principal de cada view
   ============================================================ */
.view-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 1.5rem;
  min-height: calc(100vh - 62px - 2rem);
  /* desconta topbar + padding do body */
}


/* ============================================================
   FILTER CARD — área de filtros no topo de cada view
   ============================================================ */
.filter-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 0.80rem 1.25rem;
  margin-bottom: 1.5rem;
}

.filter-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-system);
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-light);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}


/* ============================================================
   FILTER GRID — layout responsivo dos selects
   ============================================================ */
.filter-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  /* alinha o botão na base dos selects */
}

.filter-grid--compact {
  gap: 0.5rem;
  /* menos espaço horizontal — usado na view semanal (8 selects na mesma grid) */
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1 1 160px;
  /* cresce/encolhe, mínimo 160px */
}

/* ============================================================
   FILTER GROUP — tamanhos específicos por select
   ============================================================ */
.filter-group--sm {
  flex: 0 0 90px;
  /* tamanho fixo pequeno — intervalo */
}

.filter-group--lg {
  flex: 2 1 260px;
  /* cresce mais que os demais — unidade */
}

.filter-break {
  flex-basis: 100%;
  width: 0;
  /* força quebra de linha no flex-wrap sem ocupar espaço visual */
}

.filter-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}


/* ============================================================
   FILTER SELECT — select customizado
   ============================================================ */
.filter-select {
  width: 100%;
  padding: 0.6rem 2.2rem 0.6rem 0.85rem;
  /* espaço à direita para a seta */
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(1, 168, 158, 0.22);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
  outline: none;

  /* Seta customizada em SVG teal */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2301a89e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;

  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.filter-select:focus {
  border-color: var(--primary-light);
  background-color: rgba(1, 168, 158, 0.08);
  box-shadow: 0 0 0 3px rgba(1, 168, 158, 0.12);
}

/* Select travado (ex.: convênio fixo na view fidelidade) — mesmo contraste, sem indicar interação */
.filter-select:disabled {
  cursor: not-allowed;
  opacity: 1;
  color: var(--text-primary);
}

/* Cor das options no dropdown */
.filter-select option {
  background: #1a2535;
  color: var(--text-primary);
}

/* ============================================================
   CHART CARD — container de cada gráfico
   ============================================================ */
.chart-card {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  /* título com gradiente preenche as bordas arredondadas */
  margin-bottom: 1.5rem;
}

.chart-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.50rem 1rem;
  background: var(--gradient-btn);
  font-family: var(--font-system);
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  gap: 0.5rem;
}

/* Ícone ancorado à esquerda — texto permanece centralizado */
.chart-title i {
  font-size: 1rem;
  opacity: 0.9;
  /* sem position absolute — flexbox cuida do espaçamento */
}

/* ============================================================
   CHART BODY — área de conteúdo abaixo do título
   ============================================================ */
.chart-body {
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.03);
}

/* Permite que o tooltip do gráfico Fid Ativos por Mês (barras horizontais)
   ultrapasse os limites do card sem ser cortado pelo overflow:hidden acima */
.chart-card:has(#chart-fid-ativos) {
  overflow: visible;
}

/* ============================================================
   CHART GRID — dois gráficos lado a lado
   ============================================================ */
.chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

/* ============================================================
   CHART GRID — variante de coluna única (card ocupa largura total)
   ============================================================ */
.chart-grid--full {
  grid-template-columns: 1fr;
}

/* ============================================================
   CHART GRID — responsividade (< 990px → coluna única)
   ============================================================ */
@media (max-width: 989px) {
  .chart-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   CHART GRID — oculto via JS (ex: depende de filtro de dimensão)
   ============================================================ */
.chart-grid--hidden {
  display: none;
}

/* ============================================================
   APEXCHARTS — overrides de estilo interno
   ============================================================ */
.apexcharts-toolbar {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ============================================================
   CUSTOM TOOLTIP — gráfico faturamento (apex-tt-*)
   ============================================================ */
.apex-tt-box {
  background: #1a2535;
  border: 1px solid rgba(1, 168, 158, 0.25);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  font-family: var(--font-body);
  min-width: 200px;
}

.apex-tt-header {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  /* era --text-muted */
  letter-spacing: 0.06em;
  margin-bottom: 0.45rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(1, 168, 158, 0.15);
}

.apex-tt-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
}

/* Bolinha colorida da série */
.apex-tt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.apex-tt-label {
  font-size: 0.82rem;
  color: var(--text-primary);
  /* era --text-muted */
}

/* Valor empurrado para a direita */
.apex-tt-value {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-left: auto;
}

/* Divisória entre a informação principal e as duas secundárias */
.apex-tt-sep {
  border-top: 1px solid rgba(1, 168, 158, 0.15);
  margin: 0.1rem 0 0.4rem;
}

/* Linhas secundárias (métricas não ativas) — fonte um pouco menor e mais discreta */
.apex-tt-row--sec .apex-tt-label,
.apex-tt-row--sec .apex-tt-value {
  font-size: 0.74rem;
}

.apex-tt-row--sec .apex-tt-label {
  color: var(--text-muted);
}

.apex-tt-ticket {
  font-size: 0.78rem;
  color: var(--text-muted);
  padding-top: 0.3rem;
  border-top: 1px solid rgba(1, 168, 158, 0.1);
  margin-top: 0.1rem;
}

/* Valor do ticket em teal para destaque */
.apex-tt-ticket strong {
  color: var(--primary-light);
  font-weight: 600;
}

/* Bloco compacto com os totais da semana — pé do tooltip, fonte reduzida */
.apex-tt-week {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.6rem;
  font-size: 0.68rem;
  color: var(--text-muted);
  padding-top: 0.35rem;
  margin-top: 0.4rem;
  border-top: 1px solid rgba(1, 168, 158, 0.15);
}

.apex-tt-week-title {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-light);
  width: 100%;
  margin-bottom: 0.1rem;
}

.apex-tt-week strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Tooltips do ApexCharts — Open Sans com fallback */
.apexcharts-tooltip,
.apexcharts-tooltip *:not(.fa-solid) {
  font-family: var(--font-body) !important;
}

/* Preserva a fonte do FontAwesome nos ícones dentro do tooltip (ex: badge-var) */
.apexcharts-tooltip .fa-solid {
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
}

/* ============================================================
   GRÁFICO 5 — overrides dos markers e dataLabel badges
   ============================================================ */

/* Badge do dataLabel — fundo verde menta */
#chart-evolucao .apexcharts-data-labels rect {
  fill: var(--primary-light) !important;
}

/* Texto do badge — branco */
#chart-evolucao .apexcharts-data-labels text {
  fill: #fff !important;
}

/* ============================================================
   TABELA — Resumo Mensal (DataTable)
   ============================================================ */

/* Sobrescreve o tema padrão do DataTable para o dark do projeto */
.dt-resumo,
.dt-resumo th,
.dt-resumo td {
  background: transparent !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
  font-family: var(--font-body);
  font-size: 0.85rem;
}

.dt-resumo thead th {
  color: var(--text-muted) !important;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.75rem;
  border-bottom: 1px solid var(--border-subtle) !important;
}

.dt-resumo tbody tr:hover td {
  background: rgba(1, 168, 158, 0.06) !important;
}

/* Variações positivas e negativas */
.var-positiva {
  color: #1DD1A1 !important;
  /* --chart-5 */
  font-weight: 600;
}

.var-negativa {
  color: #FF6B6B !important;
  /* --chart-1 */
  font-weight: 600;
}

/* ============================================================
   TABELA RESUMO MENSAL — override completo do DataTables
   ============================================================ */

/* Wrapper geral — remove bordas padrão do DT */
.dataTables_wrapper:has(.dt-resumo) {
  padding: 0;
}

/* Cabeçalho — th mais compacto também */
.dt-resumo thead th {
  padding: 0.5rem 1rem !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  border-right: 1px solid rgba(1, 168, 158, 0.08);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s;
}


.dt-resumo thead th:last-child {
  border-right: none;
}

.dt-resumo thead th:hover {
  color: var(--primary-light) !important;
}

/* Ícones de ordenação do DataTables — substitui pelo FA via CSS */
.dt-resumo thead th.sorting::after,
.dt-resumo thead th.sorting_asc::after,
.dt-resumo thead th.sorting_desc::after {
  opacity: 0.4;
  font-size: 0.6rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* Células do corpo — mais compactas */
.dt-resumo tbody td {
  padding: 0.4rem 1rem !important;
  border-bottom: 1px solid rgba(1, 168, 158, 0.07) !important;
  border-right: 1px solid rgba(1, 168, 158, 0.05);
  font-size: 0.85rem;
  color: var(--text-primary) !important;
  vertical-align: middle;
  transition: background 0.2s;
}


.dt-resumo tbody td:last-child {
  border-right: none;
}

/* Zebra sutil */
.dt-resumo tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* Hover com glow teal */
.dt-resumo tbody tr:hover td {
  background: rgba(1, 168, 158, 0.07) !important;
  border-bottom-color: rgba(1, 168, 158, 0.15) !important;
}

/* Coluna Mês — negrito e cor primária */
.dt-resumo tbody td:first-child {
  font-weight: 600;
  color: var(--text-primary) !important;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}

/* Badge — Atendimentos */
.badge-atend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.65rem;
  background: rgba(84, 160, 255, 0.15);
  border: 1px solid rgba(84, 160, 255, 0.3);
  border-radius: 20px;
  color: #54A0FF;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  min-width: 52px;
}

/* Faturamento e Ticket Médio — cor teal */
.valor-fat,
.valor-ticket {
  color: var(--primary-light) !important;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Badge — Variação base */
.badge-var {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.7rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Variação positiva — verde */
.badge-pos {
  background: rgba(29, 209, 161, 0.12);
  border: 1px solid rgba(29, 209, 161, 0.3);
  color: #1DD1A1 !important;
}

/* Variação negativa — vermelho */
.badge-neg {
  background: rgba(255, 107, 107, 0.12);
  border: 1px solid rgba(255, 107, 107, 0.3);
  color: #FF6B6B !important;
}

/* Traço neutro (—) */
.valor-neutro {
  color: var(--text-muted) !important;
  font-size: 1rem;
  line-height: 1;
}

/* Remove padding superior do chart-body apenas quando contém tabela */
.chart-card:has(.dt-resumo) .chart-body {
  padding: 0;
}

/* Ícones nos th — cor teal e espaçamento */
.dt-resumo thead th i {
  color: var(--primary-light);
  margin-right: 0.35rem;
  font-size: 0.75rem;
  opacity: 0.85;
}

/* ============================================================
   TABELAS RANKING — estrutura híbrida:
   IDs nos pontos onde DataTables sobrescreve especificidade,
   classes para elementos independentes do DataTables.
   Ao criar nova tabela de ranking, adicionar o novo ID nos
   6 grupos marcados com "← ADICIONAR NOVO ID AQUI".
   ============================================================ */

/* 1. WRAPPER — padding zerado
   ← ADICIONAR NOVO ID AQUI */
#tabela-conv-ranking,
#tabela-ranking-medicos_wrapper,
#tabela-ranking-exames_wrapper,
#tabela-esp-ranking_wrapper,
#tabela-top10-medicos_wrapper,
#tabela-top10-exames_wrapper,
#tabela-usuarios_wrapper,
#tabela-top10-esp_wrapper {
  padding: 0;
}

/* 2. CABEÇALHOS — DataTables sobrescreve background e white-space
   ← ADICIONAR NOVO ID AQUI */
#tabela-conv-ranking thead th,
#tabela-ranking-medicos thead th,
#tabela-ranking-exames thead th,
#tabela-esp-ranking thead th,
#tabela-top10-medicos thead th,
#tabela-top10-exames thead th,
#tabela-usuarios thead th,
#tabela-top10-esp thead th {
  padding: 0.35rem 0.6rem !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  border-right: 1px solid rgba(1, 168, 158, 0.08);
  white-space: nowrap;
  /* impede quebra do cabeçalho */
  cursor: pointer;
  user-select: none;
  transition: color 0.2s;
}
#tabela-conv-ranking thead th:last-child,
#tabela-ranking-medicos thead th:last-child,
#tabela-ranking-exames thead th:last-child,
#tabela-esp-ranking thead th:last-child,
#tabela-top10-medicos thead th:last-child,
#tabela-top10-exames thead th:last-child,
#tabela-usuarios thead th:last-child,
#tabela-top10-esp thead th:last-child {
  border-right: none;
}
#tabela-conv-ranking thead th:hover,
#tabela-ranking-medicos thead th:hover,
#tabela-ranking-exames thead th:hover,
#tabela-esp-ranking thead th:hover,
#tabela-top10-medicos thead th:hover,
#tabela-top10-exames thead th:hover,
#tabela-usuarios thead th:hover,
#tabela-top10-esp thead th:hover {
  color: var(--primary-light) !important;
}

/* 3. CÉLULAS TBODY — DataTables aplica background via .odd/.even/.sorting_1
   ← ADICIONAR NOVO ID AQUI */
#tabela-conv-ranking tbody td,
#tabela-ranking-medicos tbody td,
#tabela-ranking-exames tbody td,
#tabela-esp-ranking tbody td,
#tabela-top10-medicos tbody td,
#tabela-top10-exames tbody td,
#tabela-usuarios tbody td,
#tabela-top10-esp tbody td {
  padding: 0.22rem 0.6rem !important;
  font-size: 0.78rem;
  border-bottom: 1px solid rgba(1, 168, 158, 0.07) !important;
  border-right: 1px solid rgba(1, 168, 158, 0.05);
  color: var(--text-primary) !important;
  vertical-align: middle;
  transition: background 0.2s;
}
#tabela-conv-ranking tbody td:last-child,
#tabela-ranking-medicos tbody td:last-child,
#tabela-ranking-exames tbody td:last-child,
#tabela-esp-ranking tbody td:last-child,
#tabela-top10-medicos tbody td:last-child,
#tabela-top10-exames tbody td:last-child,
#tabela-usuarios tbody td:last-child,
#tabela-top10-esp tbody td:last-child {
  border-right: none;
}

/* 4. ZEBRA, HOVER E COLUNA DE NOME — pseudo-classes perdem para DataTables sem ID
   ← ADICIONAR NOVO ID AQUI */
#tabela-conv-ranking tbody tr:nth-child(even) td,
#tabela-ranking-medicos tbody tr:nth-child(even) td,
#tabela-ranking-exames tbody tr:nth-child(even) td,
#tabela-esp-ranking tbody tr:nth-child(even) td,
#tabela-top10-medicos tbody tr:nth-child(even) td,
#tabela-top10-exames tbody tr:nth-child(even) td,
#tabela-usuarios tbody tr:nth-child(even) td,
#tabela-top10-esp tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02) !important;
}

#tabela-conv-ranking tbody tr:hover td,
#tabela-ranking-medicos tbody tr:hover td,
#tabela-ranking-exames tbody tr:hover td,
#tabela-esp-ranking tbody tr:hover td,
#tabela-top10-medicos tbody tr:hover td,
#tabela-top10-exames tbody tr:hover td,
#tabela-usuarios tbody tr:hover td,
#tabela-top10-esp tbody tr:hover td {
  background: rgba(1, 168, 158, 0.07) !important;
  border-bottom-color: rgba(1, 168, 158, 0.15) !important;
}

/* Coluna de nome (entidade) — negrito, sem quebra de linha */
#tabela-conv-ranking tbody td:nth-child(2),
#tabela-ranking-medicos tbody td:nth-child(2),
#tabela-ranking-exames tbody td:nth-child(2),
#tabela-esp-ranking tbody td:nth-child(2),
#tabela-top10-medicos tbody td:nth-child(2),
#tabela-top10-exames tbody td:nth-child(2),
#tabela-top10-esp tbody td:nth-child(2) {
  font-weight: 700;
  color: var(--text-primary) !important;
  white-space: nowrap;
}

/* Coluna esp — uppercase via CSS, sem alterar o backend */
#tabela-conv-ranking tbody td:nth-child(2),
#tabela-esp-ranking tbody td:nth-child(2),
#tabela-top10-esp tbody td:nth-child(2) {
  text-transform: uppercase;
}

/* Tabela de usuários — coluna Usuário (3ª) em negrito, como a coluna-nome das demais */
#tabela-usuarios tbody td:nth-child(3) {
  font-weight: 700;
  color: var(--text-primary) !important;
  white-space: nowrap;
}

/* ============================================================
   TABELA USUÁRIOS — ajustes próprios (fonte, cabeçalhos-caixa,
   ícones e controles do DataTables no tema escuro)
   ============================================================ */

/* (5) Fonte Open Sans em toda a tabela e nos controles do DataTables */
#tabela-usuarios,
#tabela-usuarios_wrapper {
  font-family: var(--font-body);
}

/* (1) Ícones nos cabeçalhos — teal, com respiro do texto */
#tabela-usuarios thead th i {
  color: var(--primary-medium);
  margin-right: 0.4rem;
}

/* (4) Caixa completa em volta da faixa de cabeçalhos */
#tabela-usuarios thead th {
  border-top: 1px solid var(--border-subtle) !important;
}
#tabela-usuarios thead th:first-child {
  border-left: 1px solid var(--border-subtle) !important;
}
#tabela-usuarios thead th:last-child {
  border-right: 1px solid var(--border-subtle) !important;
}

/* (2) Controles do DataTables — cor legível no dark (eram pretos) */
#tabela-usuarios_wrapper .dataTables_length,
#tabela-usuarios_wrapper .dataTables_filter,
#tabela-usuarios_wrapper .dataTables_info,
#tabela-usuarios_wrapper .dataTables_paginate {
  color: var(--text-primary);
}

#tabela-usuarios_wrapper .dataTables_length label,
#tabela-usuarios_wrapper .dataTables_filter label,
#tabela-usuarios_wrapper .dataTables_info {
  color: var(--text-primary);
}

/* Length (registros por página) à esquerda, busca à direita, na mesma linha */
#tabela-usuarios_wrapper .dt-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem 1rem;
}

/* O padding da topbar já provê o respiro — zera as margens individuais */
#tabela-usuarios_wrapper .dt-topbar .dataTables_length,
#tabela-usuarios_wrapper .dt-topbar .dataTables_filter {
  margin: 0;
}

/* Select "registros por página" — estilizado para o tema escuro */
#tabela-usuarios_wrapper .dataTables_length select {
  margin: 0 0.4rem;
  padding: 0.3rem 1.4rem 0.3rem 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--text-primary);
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}
#tabela-usuarios_wrapper .dataTables_length select:focus {
  border-color: var(--primary-medium);
}
#tabela-usuarios_wrapper .dataTables_length select option {
  background: var(--bg-deep);
  color: var(--text-primary);
}

/* Campo de busca — input estilizado para o tema escuro */
#tabela-usuarios_wrapper .dataTables_filter input {
  margin-left: 0.5rem;
  padding: 0.35rem 0.6rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s;
}
#tabela-usuarios_wrapper .dataTables_filter input:focus {
  border-color: var(--primary-medium);
}


/* Botões de paginação — legíveis no dark, teal quando ativo/hover */
/* Rodapé — info à esquerda, paginação à direita */
#tabela-usuarios_wrapper .dt-bottombar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 0.75rem 0.25rem;
}
#tabela-usuarios_wrapper .dt-bottombar .dataTables_info {
  padding: 0;
}
#tabela-usuarios_wrapper .dataTables_paginate {
  margin-top: 0;
}
#tabela-usuarios_wrapper .dataTables_paginate .paginate_button {
  color: var(--text-primary) !important;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}
#tabela-usuarios_wrapper .dataTables_paginate .paginate_button.current,
#tabela-usuarios_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--primary-medium) !important;
  border: 1px solid var(--primary-medium) !important;
  color: #fff !important;
}
#tabela-usuarios_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(1, 168, 158, 0.12) !important;
  border-color: rgba(1, 168, 158, 0.4) !important;
  color: var(--primary-light) !important;
}
#tabela-usuarios_wrapper .dataTables_paginate .paginate_button.disabled,
#tabela-usuarios_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--text-muted) !important;
  background: transparent !important;
  border-color: transparent !important;
}

/* 5. :has() DO CHART-BODY E SCROLL-WRAPPER — dependem do ID interno
   ← ADICIONAR NOVO ID AQUI */
.chart-card:has(#tabela-conv-ranking) .chart-body,
.chart-card:has(#tabela-ranking-medicos) .chart-body,
.chart-card:has(#tabela-ranking-exames) .chart-body,
.chart-card:has(#tabela-esp-ranking) .chart-body,
.chart-card:has(#tabela-top10-medicos) .chart-body,
.chart-card:has(#tabela-top10-exames) .chart-body,
.chart-card:has(#tabela-usuarios) .chart-body,
.chart-card:has(#tabela-top10-esp) .chart-body {
  padding: 0 0 0.6rem 0;
}

.chart-card:has(#tabela-conv-ranking) .table-scroll-wrapper,
.chart-card:has(#tabela-ranking-medicos) .table-scroll-wrapper,
.chart-card:has(#tabela-ranking-exames) .table-scroll-wrapper,
.chart-card:has(#tabela-esp-ranking) .table-scroll-wrapper,
.chart-card:has(#tabela-top10-medicos) .table-scroll-wrapper,
.chart-card:has(#tabela-top10-exames) .table-scroll-wrapper,
.chart-card:has(#tabela-top10-esp) .table-scroll-wrapper {
  overflow-x: hidden;
}

@media (max-width: 989px) {

  .chart-card:has(#tabela-conv-ranking) .table-scroll-wrapper,
  .chart-card:has(#tabela-ranking-medicos) .table-scroll-wrapper,
  .chart-card:has(#tabela-ranking-exames) .table-scroll-wrapper,
  .chart-card:has(#tabela-esp-ranking) .table-scroll-wrapper,
  .chart-card:has(#tabela-top10-medicos) .table-scroll-wrapper,
  .chart-card:has(#tabela-top10-exames) .table-scroll-wrapper,
  .chart-card:has(#tabela-top10-esp) .table-scroll-wrapper {
    overflow-x: auto;
  }
}

/* 6. TFOOT — rodapé de totais
   ← ADICIONAR NOVO ID AQUI */
.ranking-total td,
#tabela-conv-ranking tfoot td,
#tabela-ranking-medicos tfoot td,
#tabela-ranking-exames tfoot td,
#tabela-esp-ranking tfoot td,
#tabela-top10-medicos tfoot td,
#tabela-top10-exames tfoot td,
#tabela-top10-esp tfoot td,
.dt-resumo tfoot td {
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  border-top: 1px solid var(--border-subtle) !important;
  border-right: 1px solid rgba(1, 168, 158, 0.05);
  background: rgba(1, 168, 158, 0.06) !important;
  padding: 0.35rem 1rem !important;
  font-size: 0.78rem;
  vertical-align: middle;
}

.dt-resumo tfoot td:last-child {
  border-right: none;
}

/* ============================================================
   ELEMENTOS INDEPENDENTES DO DATATABLES — ficam com classe
   ============================================================ */

/* Botões de ação (editar/excluir) — tabela de usuários */
.col-acoes {
  white-space: nowrap;
  text-align: center;
}

.btn-acao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  margin: 0 0.15rem;

  border-radius: 6px;
  cursor: pointer;
  font-size: 0.82rem;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

/* Editar — teal já no estado normal */
.btn-acao--editar {
  color: var(--primary-light);
  border: 1px solid rgba(1, 168, 158, 0.4);
  background: rgba(1, 168, 158, 0.1);
}
.btn-acao--editar:hover {
  background: rgba(1, 168, 158, 0.22);
  border-color: var(--primary-medium);
}

/* Excluir — vermelho já no estado normal */
.btn-acao--excluir {
  color: #f5a3aa;
  border: 1px solid rgba(220, 53, 69, 0.4);
  background: rgba(220, 53, 69, 0.12);
}
.btn-acao--excluir:hover {
  background: rgba(220, 53, 69, 0.24);
  border-color: rgba(220, 53, 69, 0.7);
}

/* Faturamento e Ticket Médio — teal */
.rank-fat,
.rank-ticket {
  color: var(--primary-light) !important;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Badge posição — círculo menor, cores do pódio */
.badge-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--primary-medium);
}

.badge-rank--gold {
  background: var(--rank-gold);
}

.badge-rank--silver {
  background: var(--rank-silver);
}

.badge-rank--copper {
  background: var(--rank-copper);
}

/* ============================================================
   CHART CARD — altura não forçada (card acompanha o conteúdo)
   ============================================================ */
.chart-grid .chart-card {
  align-self: start;
}

.chart-grid--stretch .chart-card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.chart-grid--stretch .chart-body {
  flex: 1;
}

/* Donuts do dashboard (convênios e fidelidade) — altura fixa no JS.
   O card é esticado (.chart-grid--stretch) para igualar a tabela ao lado;
   centralizamos o donut verticalmente no card para não deixar vão feio. */
.chart-card:has(#chart-dash-convenios) .chart-body,
.chart-card:has(#chart-dash-fidelidade) .chart-body,
.chart-card:has(#chart-dash-pagamento) .chart-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ============================================================
   TABELA RESUMO MENSAL — alinhamento por coluna
   Aplica em thead, tbody e tfoot para consistência total
   ============================================================ */

/* ============================================================
   TABELA RESUMO MENSAL — alinhamento por coluna
   Aplica em thead, tbody e tfoot para consistência total
   ============================================================ */

/* Col 1 — Mês: left */
.dt-resumo thead th:nth-child(1),
.dt-resumo tbody td:nth-child(1),
.dt-resumo tfoot td:nth-child(1) {
  text-align: left !important;
}

/* Col 2 — Atendimentos: center */
.dt-resumo thead th:nth-child(2),
.dt-resumo tbody td:nth-child(2),
.dt-resumo tfoot td:nth-child(2) {
  text-align: center !important;
}

/* Col 3 — Faturamento: right */
.dt-resumo thead th:nth-child(3),
.dt-resumo tbody td:nth-child(3),
.dt-resumo tfoot td:nth-child(3) {
  text-align: right !important;
}

/* Col 4 — Ticket Médio: right */
.dt-resumo thead th:nth-child(4),
.dt-resumo tbody td:nth-child(4),
.dt-resumo tfoot td:nth-child(4) {
  text-align: right !important;
}

/* Col 5 — Var. Faturamento: center */
/* Col 6 — Var. Ticket: center */
.dt-resumo thead th:nth-child(5),
.dt-resumo tbody td:nth-child(5),
.dt-resumo tfoot td:nth-child(5),
.dt-resumo thead th:nth-child(6),
.dt-resumo tbody td:nth-child(6),
.dt-resumo tfoot td:nth-child(6) {
  text-align: center !important;
}

/* Tamanho de fonte dos valores no tfoot — iguala ao tbody (0.85rem) */
.dt-resumo tfoot .valor-fat,
.dt-resumo tfoot .valor-ticket {
  font-size: 0.85rem;
}

.table-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* scroll suave em iOS */
}

/* ============================================================
   TOP BAR — botão hamburger (oculto em desktop)
   ============================================================ */
.topbar-toggle {
  display: none;
  /* aparece só no breakpoint mobile */
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 38px;
  height: 38px;
  background: none;
  border: 1px solid rgba(1, 168, 158, 0.25);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 1.1rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}

.topbar-toggle:hover {
  background: rgba(1, 168, 158, 0.1);
  border-color: var(--primary-light);
}


/* ============================================================
   DRAWER — overlay escuro por baixo
   ============================================================ */
.topbar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.topbar-overlay.visivel {
  display: block;
  opacity: 1;
}


/* ============================================================
   DRAWER — painel lateral
   ============================================================ */
.topbar-drawer {
  position: fixed;
  top: 0;
  left: -280px;
  width: 280px;
  height: 100dvh;
  z-index: 1200;
  display: flex;
  flex-direction: column;

  background: var(--bg-topbar);
  border-right: 1px solid rgba(1, 168, 158, 0.2);
  box-shadow: 4px 0 32px rgba(0, 0, 0, 0.4);

  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  scrollbar-width: none;
}

.topbar-drawer::-webkit-scrollbar {
  display: none;
}

.topbar-drawer.aberto {
  left: 0;
}

/* ============================================================
   DRAWER — cabeçalho com logo e botão fechar
   ============================================================ */
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(1, 168, 158, 0.15);
  flex-shrink: 0;
  /* nunca comprime */
}

.drawer-logo {
  height: 32px;
  object-fit: contain;
}

.topbar-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid rgba(1, 168, 158, 0.2);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.topbar-close:hover {
  background: rgba(1, 168, 158, 0.1);
  color: var(--text-primary);
}

/* ============================================================
   DRAWER — itens de menu
   ============================================================ */
.drawer-menu {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0.75rem 0;
  gap: 0.15rem;
  flex-shrink: 0;
  /* altura natural, sem expandir */
}

.drawer-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 0.9rem;
  border-radius: 8px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.drawer-item i {
  font-size: 1rem;
  color: var(--primary-medium);
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.drawer-item:hover {
  background: rgba(1, 168, 158, 0.1);
  color: var(--primary-light);
}

.drawer-item.active {
  background: var(--primary-medium);
}

.drawer-item.active i {
  color: #fff;
}

/* ============================================================
   DRAWER — separador entre menus e actions
   ============================================================ */
.drawer-separator {
  height: 1px;
  background: rgba(1, 168, 158, 0.18);
  margin: 0.75rem 0.75rem;
  flex-shrink: 0;
}

/* ============================================================
   DRAWER — actions (Usuários + Sair)
   ============================================================ */
.drawer-actions {
  display: flex;
  flex-direction: column;
  padding: 0 0.75rem 1rem;
  gap: 0.15rem;
  flex-shrink: 0;
  /* altura natural, sem expandir */
}

.drawer-logout:hover {
  background: rgba(220, 53, 69, 0.12) !important;
  color: #f5a3aa !important;
}

.drawer-logout:hover i {
  color: #f5a3aa !important;
}

/* ============================================================
   RESPONSIVO — breakpoint 1220px
   Esconde nav/actions do desktop, mostra botão hamburger
   ============================================================ */
@media (max-width: 1220px) {

  .topbar-nav,
  .topbar-actions {
    display: none;
  }

  .topbar-toggle {
    display: flex;
  }
}

/* ============================================================
   SEMANAL — toolbar do gráfico (botões de métrica + checkboxes de semana)
   ============================================================ */
.semanal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.semanal-metricas {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Botão de métrica — inativo com borda, ativo com o gradiente primário */
.semanal-btn {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.semanal-btn:hover {
  color: var(--text-primary);
  border-color: var(--primary-light);
}

.semanal-btn.active {
  background: var(--gradient-btn);
  color: #fff;
  border-color: transparent;
}

.semanal-semanas {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
}

/* Checkbox de semana — rótulo clicável em linha */
.semanal-check {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.8rem;
  cursor: pointer;
  user-select: none;
}

.semanal-check input {
  accent-color: var(--primary-light);
  cursor: pointer;
}

/* ============================================================
   CARDS-RESUMO — dashboard (contadores por tipo)
   ============================================================ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

/* Card: borda superior colorida + fundo levemente tingido da cor */
.stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  border-top: 4px solid var(--stat-cor);
  background: color-mix(in srgb, var(--stat-cor) 10%, var(--bg-card));
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--stat-cor);
  flex-shrink: 0;
}

.stat-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 0.15rem;
}

.stat-label {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-primary);
}

.stat-value {
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--stat-cor);
}

/* Cor por card — cada modificador injeta --stat-cor usado nas regras acima */
.stat-card--verde    { --stat-cor: var(--stat-verde); }
.stat-card--azul     { --stat-cor: var(--stat-azul); }
.stat-card--laranja  { --stat-cor: var(--stat-laranja); }
.stat-card--vermelho { --stat-cor: var(--stat-vermelho); }

/* ------------------------------------------------------------
   Variante compacta — usada na tela de Gestão de Usuários.
   Escopada em .stat-grid--compact para não afetar a Dashboard:
   afasta do subtítulo, reduz padding, ícone e valor.
   ------------------------------------------------------------ */
.stat-grid--compact {
  margin-top: 1.75rem;
  gap: 1rem;
}

.stat-grid--compact .stat-card {
  padding: 0.7rem 1rem;
  gap: 0.75rem;
}

.stat-grid--compact .stat-icon {
  font-size: 1.2rem;
}

.stat-grid--compact .stat-label {
  font-size: 0.72rem;
}

.stat-grid--compact .stat-value {
  font-size: 1.3rem;
}

/* Responsivo — 2 colunas em telas médias, 1 em telas pequenas */
@media (max-width: 989px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .stat-grid {
    grid-template-columns: 1fr;
  }
}