/* =============================
   eFormei - CSS 2022 (Refatorado)
   Objetivos:
   - Organizar seções e facilitar manutenção
   - Reduzir duplicações de código e declarações repetidas
   - Centralizar cores, raios e sombras via CSS Variables
   - Manter compatibilidade com Bootstrap 4 (override suave)
   - NÃO alterar nomes de seletores existentes para evitar impacto no HTML/PHP atual
   ============================= */


/* ---------- Variáveis (tema) - Liquid Glass 2025 ---------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,700;1,100;1,400&family=Nunito+Sans:wght@400;700;800;900&display=swap');

:root {
  /* ========================================
     Z-INDEX HIERARCHY - eFormei 2025
     ======================================== 
     Hierarquia organizada por camadas:
     - Conteúdo base: 1-100
     - Navegação fixa: 1020-1030
     - Dropdowns/Selects: 8100-8499
     - Notificações: 8500-8999
     - Modais: 9000-9999
  */

  /* Camada de Conteúdo */
  --z-content: 10;
  --z-content-elevated: 50;

  /* Camada de Navegação */
  --z-navbar: 1030;
  --z-sticky: 1020;

  /* Camada de Dropdowns e Selects */
  --z-dropdown: 8100;
  --z-bootstrap-select: 10500;
  --z-navbar-dropdown: 8300;

  /* Camada de Notificações */
  --z-sidebar-notifications: 8700;
  --z-toast: 8800;
  --z-notify: 8800;

  /* Camada Modal */
  --z-modal-backdrop: 9400;
  --z-modal: 9500;
  --z-modal-dialog: 9510;
  --z-modal-content: 9520;

  /* Cores base - Paleta eFormei (Light Mode) */
  --color-text: #1a1a2e;
  --color-primary: #18338F;
  --color-primary-hover: #1e4ab8;
  --color-primary-light: #5168d4;
  --color-primary-accent: #c4cdf7;
  --color-primary-accent-light: #e8ebfc;
  --color-success: #00c896;
  --color-success-light: #66e5c0;
  --color-danger: #ff4757;
  --color-danger-light: #ff6b7a;
  --color-warning: #ffa502;
  --color-warning-light: #ffc048;
  --color-info: #5f27cd;
  --color-info-light: #a55eea;
  --color-muted: #6c757d;

  /* Backgrounds com gradientes suaves em tons de azul */
  --color-bg: linear-gradient(135deg, #e8ecff 0%, #f0f2ff 50%, #f8f9ff 100%);
  --color-bg-light: rgba(255, 255, 255, 0.75);
  --color-border: rgba(255, 255, 255, 0.35);
  --color-border-light: rgba(200, 210, 240, 0.5);
  --color-scroll-thumb: rgba(24, 51, 143, 0.25);

  /* Sombras modernas com blur - tons azuis */
  --shadow-soft: 0 8px 32px 0 rgba(24, 51, 143, 0.08);
  --shadow-glass: 0 8px 32px 0 rgba(24, 51, 143, 0.15);
  --shadow-focus: 0 0 0 4px rgba(24, 51, 143, 0.15);
  --shadow-hover: 0 12px 40px 0 rgba(24, 51, 143, 0.12);

  /* Glassmorphism - Otimizado para performance */
  --glass-bg: rgba(255, 255, 255, 0.95);
  --glass-border: rgba(200, 210, 240, 0.3);
  --glass-blur: 0px;
  /* Blur desabilitado para melhor performance */

  /* Raios arredondados suaves */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-md: 20px;
  --radius-lg: 24px;

  /* Transições otimizadas */
  --transition-fast: .15s ease-out;
  --transition-smooth: .25s ease-out;
}

/* ---------- Dark Mode - Liquid Glass 2025 ---------- */
/* REMOVIDO: @media (prefers-color-scheme: dark) automático
   Agora funciona APENAS com classes manuais .dark-mode e .light-mode
   para evitar conflitos e dar controle total ao usuário */

/* Dark Mode Manual - classe .dark-mode no html (sobrescreve preferência do sistema) */
html.dark-mode,
.dark-mode {
  /* Cores base - Dark Mode */
  --color-text: #e4e4e7;
  --color-primary: #5168d4;
  --color-primary-hover: #6b7ee8;
  --color-primary-light: #8394f0;
  --color-primary-accent: #2d3b7a;
  --color-primary-accent-light: #1e2850;
  --color-success: #10d9a8;
  --color-success-light: #45e6c0;
  --color-danger: #ff6b7a;
  --color-danger-light: #ff8a96;
  --color-warning: #ffb733;
  --color-warning-light: #ffc966;
  --color-info: #a55eea;
  --color-info-light: #b77ef0;
  --color-muted: #94a3b8;

  /* Backgrounds escuros com gradientes sutis */
  --color-bg: linear-gradient(135deg, #0f1729 0%, #141b2d 50%, #1a2235 100%);
  --color-bg-light: rgba(20, 27, 45, 0.75);
  --color-border: rgba(71, 85, 105, 0.3);
  --color-border-light: rgba(100, 116, 139, 0.2);
  --color-scroll-thumb: rgba(81, 104, 212, 0.4);

  /* Sombras escuras */
  --shadow-soft: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
  --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
  --shadow-focus: 0 0 0 4px rgba(81, 104, 212, 0.3);
  --shadow-hover: 0 12px 40px 0 rgba(0, 0, 0, 0.4);

  /* Glassmorphism Dark */
  --glass-bg: rgba(20, 27, 45, 0.7);
  --glass-border: rgba(71, 85, 105, 0.3);
  --glass-blur: 20px;
}

/* Light Mode Manual - força tema claro mesmo com prefers-color-scheme: dark */
html.light-mode,
.light-mode {
  /* Cores base - Light Mode (mesmas do :root padrão) */
  --color-text: #1a1a2e;
  --color-primary: #18338F;
  --color-primary-hover: #1e4ab8;
  --color-primary-light: #5168d4;
  --color-primary-accent: #c4cdf7;
  --color-primary-accent-light: #e8ebfc;
  --color-success: #00c896;
  --color-success-light: #66e5c0;
  --color-danger: #ff4757;
  --color-danger-light: #ff6b7a;
  --color-warning: #ffa502;
  --color-warning-light: #ffc048;
  --color-info: #5f27cd;
  --color-info-light: #a55eea;
  --color-muted: #6c757d;

  /* Backgrounds com gradientes suaves em tons de azul */
  --color-bg: linear-gradient(135deg, #e8ecff 0%, #f0f2ff 50%, #f8f9ff 100%);
  --color-bg-light: rgba(255, 255, 255, 0.75);
  --color-border: rgba(255, 255, 255, 0.35);
  --color-border-light: rgba(200, 210, 240, 0.5);
  --color-scroll-thumb: rgba(24, 51, 143, 0.25);

  /* Sombras modernas com blur - tons azuis */
  --shadow-soft: 0 8px 32px 0 rgba(24, 51, 143, 0.08);
  --shadow-glass: 0 8px 32px 0 rgba(24, 51, 143, 0.15);
  --shadow-focus: 0 0 0 4px rgba(24, 51, 143, 0.15);
  --shadow-hover: 0 12px 40px 0 rgba(24, 51, 143, 0.12);

  /* Glassmorphism - Otimizado para performance */
  --glass-bg: rgba(255, 255, 255, 0.95);
  --glass-border: rgba(200, 210, 240, 0.3);
  --glass-blur: 0px;
  /* Blur desabilitado para melhor performance */
}

/* ---------- Base / Reset ---------- */
html,
body {
  height: 100%;
  position: relative;
}

body {
  font-family: 'Montserrat', sans-serif;
  padding: 70px 20px 0 20px;
  color: var(--color-text);
  background: var(--color-bg);
  background-attachment: fixed;
  position: relative;
  transition: background var(--transition-smooth), color var(--transition-fast);
}

/* Ajuste para quando há navbar fixed-top */
body:has(.navbar.fixed-top) {
  padding-top: 70px;
}

/* Overlay sutil para profundidade */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(60, 135, 200, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(57, 161, 219, 0.06) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

body>* {
  position: relative;
  z-index: 1;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: 'Nunito Sans', sans-serif;
}

h1 {
  font-size: 1.8rem;
  font-weight: 800;
}

h2 {
  font-size: 1.2rem;
  font-weight: 700;
}

h3 {
  font-size: 1.0rem;
  font-weight: 600;
}

h4 {
  font-size: 0.8rem;
  font-weight: 500;
}

label {
  font-family: 'Nunito Sans', sans-serif;
  color: #226691;
}

legend {
  margin-bottom: 0;
}

/* Dark Mode - Labels e Textos */
html.dark-mode label,
.dark-mode label {
  color: var(--color-primary-light);
}

/* ---------- Utilidades ---------- */
.nowrap {
  white-space: nowrap;
}

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1050;
  background: #fff;
}

.fullscreen .card-body {
  height: calc(100vh - 200px);
}

/* Utility - filter visibility helpers */
.filtro-oculto {
  display: none !important;
}

.filtro-visivel {
  display: block !important;
}

/* Fix para elementos flex manterem o display correto */
.d-flex.filtro-visivel {
  display: flex !important;
}

/* Dark mode - filter visibility helpers */
html.dark-mode .filtro-oculto,
.dark-mode .filtro-oculto {
  display: none !important;
}

html.dark-mode .filtro-visivel,
.dark-mode .filtro-visivel {
  display: block !important;
}

html.dark-mode .d-flex.filtro-visivel,
.dark-mode .d-flex.filtro-visivel {
  display: flex !important;
}


/* Utilitários legados (Bootstrap 4) ainda utilizados no PHP */
.mr-0 {
  margin-right: 0 !important;
}

.mr-1 {
  margin-right: .25rem !important;
}

.mr-2 {
  margin-right: .5rem !important;
}

.mr-3 {
  margin-right: 1rem !important;
}

.mr-4 {
  margin-right: 1.5rem !important;
}

.mr-5 {
  margin-right: 3rem !important;
}

.ml-0 {
  margin-left: 0 !important;
}

.ml-1 {
  margin-left: .25rem !important;
}

.ml-2 {
  margin-left: .5rem !important;
}

.ml-3 {
  margin-left: 1rem !important;
}

.ml-4 {
  margin-left: 1.5rem !important;
}

.ml-5 {
  margin-left: 3rem !important;
}

.mr-auto {
  margin-right: auto !important;
}

.ml-auto {
  margin-left: auto !important;
}

.gap-2 {
  gap: .5rem !important;
}

.pr-0 {
  padding-right: 0 !important;
}

.pr-1 {
  padding-right: .25rem !important;
}

.pr-2 {
  padding-right: .5rem !important;
}

.pr-3 {
  padding-right: 1rem !important;
}

.pr-4 {
  padding-right: 1.5rem !important;
}

.pr-5 {
  padding-right: 3rem !important;
}

.pl-0 {
  padding-left: 0 !important;
}

.pl-1 {
  padding-left: .25rem !important;
}

.pl-2 {
  padding-left: .5rem !important;
}

.pl-3 {
  padding-left: 1rem !important;
}

.pl-4 {
  padding-left: 1.5rem !important;
}

.pl-5 {
  padding-left: 3rem !important;
}

.float-right {
  float: right !important;
}

.float-left {
  float: left !important;
}

.float-none {
  float: none !important;
}

.text-right {
  text-align: right !important;
}

.text-left {
  text-align: left !important;
}

/* Sumários de configuração */
.settings-summary .status-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  transition: box-shadow var(--transition-fast);
}

.settings-summary .status-card:hover {
  box-shadow: 0 12px 24px -18px rgba(60, 135, 200, 0.6);
}

.settings-summary .status-label {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.settings-summary .status-value .badge {
  font-size: 0.75rem;
  margin-right: 0.35rem;
  margin-bottom: 0.35rem;
}

.settings-summary .status-hint {
  line-height: 1.4;
}

.tab-section {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.tab-section:last-child {
  margin-bottom: 0;
}

/* ---------- Badges ---------- */
.badge,
.badge-pill {
  padding: 2px 5px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.6rem;
  line-height: 1.2;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
}

/* Espaçamento entre badges - usa gap quando possível */
.badge+.badge,
.badge-pill+.badge-pill,
.badge+.badge-pill,
.badge-pill+.badge {
  margin-left: 0.375rem;
}

/* Badge dentro de elementos inline (texto, links, etc) */
p .badge,
span .badge,
td .badge,
th .badge,
li .badge {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

/* Primeira badge inline não tem margem esquerda */
p .badge:first-child,
span .badge:first-child,
td .badge:first-child,
th .badge:first-child,
li .badge:first-child {
  margin-left: 0;
}

/* Última badge inline não tem margem direita */
p .badge:last-child,
span .badge:last-child,
td .badge:last-child,
th .badge:last-child,
li .badge:last-child {
  margin-right: 0;
}

/* Cores para tema CLARO */
.badge,
.badge-pill {
  color: #ffffff;
}

/* Badges dentro de links ou links com classe badge - força cor branca */
a .badge,
a .badge-pill,
.badge a,
.badge-pill a,
a.badge,
a.badge-pill {
  color: #ffffff !important;
  text-decoration: none;
}

/* Hover em links com classe badge */
a.badge:hover,
a.badge-pill:hover {
  color: #ffffff !important;
  text-decoration: none;
  opacity: 0.9;
}

/* Cores para tema ESCURO */
html.dark-mode .badge,
html.dark-mode .badge-pill,
.dark-mode .badge,
.dark-mode .badge-pill {
  color: #ffffff;
}

/* Dark mode - Badges dentro de links ou links com classe badge - força cor branca */
html.dark-mode a .badge,
html.dark-mode a .badge-pill,
html.dark-mode .badge a,
html.dark-mode .badge-pill a,
html.dark-mode a.badge,
html.dark-mode a.badge-pill,
.dark-mode a .badge,
.dark-mode a .badge-pill,
.dark-mode .badge a,
.dark-mode .badge-pill a,
.dark-mode a.badge,
.dark-mode a.badge-pill {
  color: #ffffff !important;
  text-decoration: none;
}

/* Dark mode - Hover em links com classe badge */
html.dark-mode a.badge:hover,
html.dark-mode a.badge-pill:hover,
.dark-mode a.badge:hover,
.dark-mode a.badge-pill:hover {
  color: #ffffff !important;
  text-decoration: none;
  opacity: 0.9;
}

/* Badge em botões - alinhamento perfeito */
.btn .badge,
button .badge {
  position: relative;
  top: -1px;
  margin-left: 0.5rem;
}

/* Badge em card-header */
.card-header .badge {
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* Badge em títulos */
h1 .badge,
h2 .badge,
h3 .badge,
h4 .badge,
h5 .badge,
h6 .badge {
  margin-left: 0.5rem;
  vertical-align: middle;
  font-size: 0.6em;
}

/* Badge em tabelas - centralizado verticalmente */
table .badge {
  vertical-align: middle;
}

/* Badge em listas */
.list-group-item .badge {
  margin-left: auto;
}

/* Badge flutuante à direita */
.badge.float-right,
.badge-pill.float-right {
  margin-left: 0.5rem;
  margin-right: 0;
}

/* ---------- Estrelas (rating) ---------- */
.star-rating {
  direction: rtl;
  display: inline-block;
  padding-top: 8px;
}

.star-rating input[type=radio] {
  display: none;
}

.star-rating label {
  color: #ddd;
  font-size: 20px;
  cursor: pointer;
}

.star-rating input[type=radio]:checked~label,
.star-rating label:hover,
.star-rating label:hover~label {
  color: #f5b301;
}

/* ---------- Star Rating Inline (tabelas) ---------- */
.star-rating-inline {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}

.star-rating-inline .star-click {
  cursor: pointer;
  font-size: 1.1em;
  transition: color 0.15s ease, transform 0.15s ease;
}

.star-rating-inline .star-click:hover {
  transform: scale(1.2);
}

/* ---------- Mostrar / Esconder ---------- */
.esconder {
  display: inline;
}

.esconder.escondido {
  visibility: hidden;
}

.esconder .toggle-icon {
  cursor: pointer;
  font-size: 14px;
}

/* ---------- Font Awesome SVG inline ---------- */
.fa-svg {
  width: 14px;
  height: 14px;
  vertical-align: -1.85px;
  display: inline;
}

/* ---------- Popover ---------- */
.popover {
  max-width: 430px !important;
}

/* ---------- Navbar / Nav - Liquid Glass ---------- */
.navbar {
  background: rgba(255, 255, 255, 0.99) !important;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-glass);
  border-bottom: 1px solid var(--glass-border);
  z-index: var(--z-sticky);
}

.dark-mode .navbar {
  background: rgba(20, 27, 45, 0.95) !important;
}

/* Navbar fixed-top - garante que fique fixo no topo */
.navbar.fixed-top {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: var(--z-navbar) !important;
}

/* Dropdowns dentro da navbar - z-index controlado */
.navbar .dropdown-menu {
  z-index: var(--z-navbar-dropdown) !important;
  min-width: 200px;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.navbar .dropdown-menu::-webkit-scrollbar {
  width: 8px;
}

.navbar .dropdown-menu::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.navbar .dropdown-menu::-webkit-scrollbar-thumb {
  background: var(--color-scroll-thumb);
  border-radius: 4px;
}

.navbar .dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

.dark-mode .navbar .dropdown-menu::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

/* Garante que dropdown seja posicionado corretamente */
.navbar .nav-item.dropdown,
.navbar .dropdown {
  position: relative;
}

.nav-link {
  color: #1a1a2e !important;
  font-size: 15px;
  font-family: 'Nunito Sans', sans-serif;
  transition: all var(--transition-fast);
  border-radius: var(--radius-xs);
  padding: 8px 12px;
}

.nav-link:hover {
  background: rgba(60, 135, 200, 0.08);
}

.nav-link.active {
  color: var(--color-primary) !important;
  font-weight: 600;
  background: rgba(60, 135, 200, 0.12);
}

/* Nav Pills — corrige conflito de especificidade com Bootstrap.
   .nav-pills .nav-link.active (0,3,0) vencia .nav-link.active (0,2,0)
   e aplicava background azul sólido, deixando o texto invisível. */
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: #fff !important;
  background: linear-gradient(135deg, var(--color-primary, #18338f) 0%, var(--color-primary-hover, #2c4ec0) 100%) !important;
  box-shadow: 0 2px 8px rgba(24, 51, 143, 0.25);
}

.nav-pills .nav-link.active .badge,
.nav-pills .show>.nav-link .badge {
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--color-primary, #18338f) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  font-weight: 700;
}

.dark-mode .nav-pills .nav-link.active,
.dark-mode .nav-pills .show>.nav-link {
  background: linear-gradient(135deg, rgba(81, 104, 212, 0.95) 0%, rgba(129, 153, 255, 0.85) 100%) !important;
  box-shadow: 0 2px 8px rgba(81, 104, 212, 0.35);
}

.dark-mode .nav-pills .nav-link.active .badge,
.dark-mode .nav-pills .show>.nav-link .badge {
  background: rgba(15, 23, 41, 0.85) !important;
  color: #ffffff !important;
  border-color: rgba(129, 153, 255, 0.4) !important;
}

.navbar i {
  color: var(--color-primary);
  transition: all var(--transition-fast);
}

/* Apenas ícones clicáveis (links, botões) têm escala no hover */
.navbar a i:hover,
.navbar button i:hover {
  transform: scale(1.1);
}

.navbar input {
  border: none;
  background: rgba(255, 255, 255, 0.7);
}

.navbar #navbar_btn_buscar {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  transition: all var(--transition-fast);
}

.navbar #navbar_btn_buscar:hover {
  background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 100%);
  box-shadow: 0 4px 12px rgba(60, 135, 200, 0.3);
}

.navbar #navbar_btn_buscar i {
  color: #fff !important;
}

.navbar .input-group-chave {
  border-right: 2px solid rgba(200, 200, 200, 0.3);
}

/* Dark Mode - Navbar */
.dark-mode .navbar,
.dark-mode .navbar-light,
.dark-mode .bg-light {
  background: rgba(15, 23, 41, 0.9) !important;
  border-bottom-color: rgba(71, 85, 105, 0.5);
}

.dark-mode .navbar-light .navbar-brand,
.dark-mode .navbar-light .navbar-nav .nav-link {
  color: var(--color-text) !important;
}

.dark-mode .nav-link {
  color: var(--color-text) !important;
}

.dark-mode .nav-link:hover {
  background: rgba(81, 104, 212, 0.15);
}

.dark-mode .nav-link.active {
  background: rgba(81, 104, 212, 0.25);
}

.dark-mode .navbar-toggler {
  border-color: rgba(71, 85, 105, 0.5);
}

.dark-mode .navbar-toggler-icon {
  filter: invert(1);
}

.dark-mode .navbar input {
  background: rgba(30, 40, 60, 0.7);
  color: var(--color-text);
}

.dark-mode .navbar input::placeholder {
  color: rgba(148, 163, 184, 0.6);
}

/* ========================================
   BADGE DE TEMA (Sol/Lua) - Navbar
   ======================================== */

#themeToggleBadge {
  font-size: 13px;
  padding: 4px 7px;
  cursor: pointer;
  transition: all var(--transition-fast);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 146, 60, 0.15));
  border: 1px solid rgba(251, 191, 36, 0.3);
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
}

#themeToggleBadge:hover {
  transform: scale(1.1) rotate(15deg);
  box-shadow: 0 4px 16px rgba(251, 191, 36, 0.4);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(251, 146, 60, 0.25));
}

#themeToggleBadge i {
  color: #f59e0b;
  transition: all var(--transition-fast);
  font-size: 13px;
  line-height: 1;
}

/* Link do toggle de tema */
#darkModeToggle.nav-link {

  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Dark Mode - Badge de tema muda para lua */
.dark-mode #themeToggleBadge {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.15));
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.dark-mode #themeToggleBadge:hover {
  transform: scale(1.1) rotate(-15deg);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.5);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(99, 102, 241, 0.25));
}

.dark-mode #themeToggleBadge i {
  color: #93c5fd;
}

.dark-mode .navbar .input-group-chave {
  border-right-color: rgba(71, 85, 105, 0.5);
}

/* ========================================
   DROPDOWN DE BUSCA (Navbar)
   ======================================== */

#searchTypeDropdown {
  font-size: 14px;
  font-weight: 500;
  padding: 6px 12px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all var(--transition-fast);
}

#searchTypeDropdown:hover {
  background: rgba(255, 255, 255, 1) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 2px 8px rgba(60, 135, 200, 0.2);
}

#searchTypeDropdown:focus {
  box-shadow: 0 0 0 0.2rem rgba(60, 135, 200, 0.25);
  border-color: var(--color-primary) !important;
}

.search-option {
  padding: 8px 16px;
  font-size: 14px;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.search-option i {
  color: var(--color-primary);
  opacity: 0.7;
  transition: all var(--transition-fast);
}

.search-option:hover {
  background: rgba(60, 135, 200, 0.1);
  color: var(--color-primary);
}

.search-option:hover i {
  opacity: 1;
  transform: translateX(2px);
}

.search-option.active {
  background: linear-gradient(135deg, rgba(60, 135, 200, 0.15), rgba(81, 104, 212, 0.15));
  color: var(--color-primary);
  font-weight: 600;
}

.search-option.active i {
  opacity: 1;
}

/* Dark Mode - Dropdown de busca */
.dark-mode #searchTypeDropdown {
  background: rgba(30, 40, 60, 0.8) !important;
  border-color: rgba(71, 85, 105, 0.5) !important;
  color: var(--color-text) !important;
}

.dark-mode #searchTypeDropdown:hover {
  background: rgba(40, 50, 70, 0.9) !important;
  border-color: rgba(129, 153, 255, 0.5) !important;
  box-shadow: 0 2px 8px rgba(129, 153, 255, 0.3);
}

.dark-mode .search-option {
  color: var(--color-text);
}

.dark-mode .search-option i {
  color: rgba(129, 153, 255, 0.8);
}

.dark-mode .search-option:hover {
  background: rgba(129, 153, 255, 0.15);
  color: rgba(129, 153, 255, 1);
}

.dark-mode .search-option.active {
  background: linear-gradient(135deg, rgba(129, 153, 255, 0.2), rgba(99, 102, 241, 0.2));
  color: rgba(129, 153, 255, 1);
}

/* ---------- Formulários / Fieldsets - Glass Effect ---------- */
fieldset {
  background: rgba(255, 255, 255, 0.95);
  /* backdrop-filter: blur(10px); - desabilitado para melhor performance */
  /* -webkit-backdrop-filter: blur(10px); - desabilitado para melhor performance */
  padding: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: all var(--transition-fast);
  position: relative;
  z-index: auto;
  /* Evita que min-inline-size: min-content default do <fieldset> force a coluna
     pai (col-md-*) a crescer além do grid quando o conteúdo (tabela, select com
     opções longas, etc.) for largo. */
  min-width: 0;
}

fieldset:hover {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(60, 135, 200, 0.3);
}

/* Fieldsets não devem criar stacking context - dropdowns/selects usam position fixed */

fieldset fieldset {
  background: rgba(255, 255, 255, 0.5);
}

fieldset legend {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary);
  background: #fff;
  padding: 1px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  box-shadow: var(--shadow-soft, 0 2px 8px rgba(0, 0, 0, 0.08));
  width: auto;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

/* Labels e form-groups não devem ter z-index alto */
label,
.form-group,
.form-row {
  position: relative;
  z-index: 1;
}

/* Dark Mode - Fieldsets */
.dark-mode fieldset {
  background: rgba(30, 40, 60, 0.5);
  border-color: rgba(71, 85, 105, 0.3);
}

.dark-mode fieldset:hover {
  background: rgba(30, 40, 60, 0.7);
  border-color: rgba(81, 104, 212, 0.4);
}

.dark-mode fieldset fieldset {
  background: rgba(20, 27, 45, 0.6);
}

.dark-mode fieldset legend {
  color: #fff;
  background: rgba(30, 40, 60, 0.95);
  border-color: rgba(81, 104, 212, 0.4);
}

fieldset fieldset legend {
  font-size: 12px;
  font-weight: 500;
}

.tab-pane fieldset {
  background: rgba(255, 255, 255, 0.7) !important;
}

.dark-mode .tab-pane fieldset {
  background: rgba(30, 40, 60, 0.6) !important;
}

/* Heading visual de bloco (sem fieldset envolvente) — usado no form de
   contas a pagar/receber pra agrupar visualmente seções que compartilham o
   mesmo .row Bootstrap (Lançamento, Forma de pagamento, Parcelas, etc.). */
.bloco-titulo {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--glass-border);
}

.dark-mode .bloco-titulo {
  color: var(--color-primary);
  border-bottom-color: rgba(71, 85, 105, 0.4);
}

/* Garante que elementos de formulário não fiquem acima de dropdowns */
/* Removido z-index forçado - deixar comportamento natural */

/* Input Groups */
.input-group-append .bootstrap-select:not(.input-group-btn) {
  padding: 0;
}

.input-group-append .bootstrap-select.form-control-sm .dropdown-toggle {
  border-radius: 0;
  height: 28px;
  line-height: 18px;
}

.input-group .form-control,
.input-group .btn {
  border-radius: 0;
}

/* Bootstrap Select - Liquid Glass Enhancement */
.bootstrap-select {
  position: relative;
  z-index: auto;
}

.bootstrap-select.show {
  z-index: var(--z-bootstrap-select) !important;
}

.bootstrap-select .dropdown-toggle {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--color-border-light);
  transition: all var(--transition-fast);
}

.bootstrap-select .dropdown-toggle:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(60, 135, 200, 0.4);
  box-shadow: 0 4px 12px rgba(60, 135, 200, 0.08);
}

.bootstrap-select.show .dropdown-toggle {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

/* Bootstrap Select Dropdown Menu */
.bootstrap-select .dropdown-menu {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
  border-radius: var(--radius);
  margin-top: 4px;
  z-index: var(--z-bootstrap-select) !important;
}

/* Bootstrap Select dentro de DataTables - força z-index maior e overflow visible */
.dataTables_wrapper .bootstrap-select.show,
div[id*="DataTables"] .bootstrap-select.show,
table .bootstrap-select.show {
  z-index: var(--z-bootstrap-select) !important;
  position: relative !important;
}

.dataTables_wrapper .bootstrap-select.show .dropdown-menu,
div[id*="DataTables"] .bootstrap-select.show .dropdown-menu,
table .bootstrap-select.show .dropdown-menu {
  z-index: var(--z-bootstrap-select) !important;
  position: absolute !important;
  display: block !important;
  transform: translate3d(0, 0, 0) !important;
}

/* Garante que containers de DataTable não escondam dropdown */
.dataTables_wrapper,
.dataTables_scroll,
.dataTables_scrollBody,
div[id*="DataTables"] {
  overflow: visible !important;
}

/* Força overflow visible quando bootstrap-select está aberto */
.dataTables_wrapper:has(.bootstrap-select.show),
div[id*="DataTables"]:has(.bootstrap-select.show) {
  overflow: visible !important;
}

table {
  overflow: visible !important;
}

table td:has(.bootstrap-select.show),
table th:has(.bootstrap-select.show) {
  overflow: visible !important;
  position: relative;
  z-index: 10500;
}

/* Bootstrap Select dentro de btn-group - usa z-index consistente */
.btn-group .bootstrap-select,
.btn-group-vertical .bootstrap-select {
  position: static !important;
}

.btn-group .bootstrap-select.show,
.btn-group-vertical .bootstrap-select.show {
  z-index: var(--z-bootstrap-select) !important;
  position: relative !important;
}

.btn-group .bootstrap-select .dropdown-menu,
.btn-group-vertical .bootstrap-select .dropdown-menu {
  z-index: var(--z-bootstrap-select) !important;
  position: fixed !important;
}

/* btn-group não deve esconder dropdown */
.btn-group,
.btn-group-vertical {
  position: relative;
  z-index: auto;
}

.btn-group:has(.bootstrap-select.show),
.btn-group-vertical:has(.bootstrap-select.show) {
  z-index: var(--z-bootstrap-select) !important;
  overflow: visible !important;
}

.bootstrap-select .dropdown-menu li a {
  transition: all var(--transition-fast);
  border-radius: var(--radius-xs);
  margin: 2px 4px;
}

.bootstrap-select .dropdown-menu li a:hover {
  background: rgba(60, 135, 200, 0.12);
  transform: translateX(4px);
}

.bootstrap-select .dropdown-menu li.selected a {
  background: rgba(60, 135, 200, 0.2);
  color: var(--color-primary);
  font-weight: 600;
}

.bootstrap-select .dropdown-menu li.active a {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: #fff;
}

/* Search box dentro do Bootstrap Select */
.bootstrap-select .bs-searchbox input {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xs);
  transition: all var(--transition-fast);
}

.bootstrap-select .bs-searchbox input:focus {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
  outline: none;
}

/* Dark Mode - Bootstrap Select */
.dark-mode .bootstrap-select .dropdown-toggle {
  background: rgba(30, 40, 60, 0.6);
  border-color: rgba(71, 85, 105, 0.4);
  color: var(--color-text);
}

.dark-mode .bootstrap-select .dropdown-toggle:hover {
  background: rgba(30, 40, 60, 0.8);
  border-color: rgba(81, 104, 212, 0.5);
}

.dark-mode .bootstrap-select.show .dropdown-toggle {
  background: rgba(40, 50, 70, 0.9);
  border-color: var(--color-primary);
}

.dark-mode .bootstrap-select .dropdown-menu {
  background: rgba(20, 27, 45, 0.95);
  border-color: rgba(71, 85, 105, 0.5);
}

.dark-mode .bootstrap-select .dropdown-menu li a {
  color: var(--color-text);
}

.dark-mode .bootstrap-select .dropdown-menu li a:hover {
  background: rgba(81, 104, 212, 0.2);
}

.dark-mode .bootstrap-select .dropdown-menu li.selected a {
  background: rgba(81, 104, 212, 0.3);
}

.dark-mode .bootstrap-select .bs-searchbox input {
  background: rgba(30, 40, 60, 0.8);
  border-color: rgba(71, 85, 105, 0.4);
  color: var(--color-text);
}

.dark-mode .bootstrap-select .bs-searchbox input:focus {
  background: rgba(40, 50, 70, 0.95);
  border-color: var(--color-primary);
}

/* Focus / Hover efeitos genéricos - Liquid Glass */
.form-control {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--color-border-light);
  transition: all var(--transition-fast);
  position: relative;
  z-index: 1;
}

.form-control:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(60, 135, 200, 0.4);
  box-shadow: 0 4px 12px rgba(60, 135, 200, 0.08);
}

.form-control:focus {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

/* Dark Mode - Form Controls */
.dark-mode .form-control {
  background: rgba(30, 40, 60, 0.6);
  border-color: rgba(71, 85, 105, 0.4);
  color: var(--color-text);
}

.dark-mode .form-control:hover {
  background: rgba(30, 40, 60, 0.8);
  border-color: rgba(81, 104, 212, 0.5);
}

.dark-mode .form-control:focus {
  background: rgba(40, 50, 70, 0.9);
  border-color: var(--color-primary);
  color: var(--color-text);
}

.dark-mode .form-control::placeholder {
  color: rgba(148, 163, 184, 0.6);
}

/* ---------- Input File - Liquid Glass ---------- */
input[type="file"] {
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
  transition: all var(--transition-fast);
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text);
}

input[type="file"]::-webkit-file-upload-button {
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 1px 12px;
  margin-right: 10px;
  cursor: pointer;
  font-weight: 500;
  font-size: 12px;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 8px rgba(24, 51, 143, 0.2);
  -webkit-transition: all var(--transition-fast);
  -moz-transition: all var(--transition-fast);
  -ms-transition: all var(--transition-fast);
  -o-transition: all var(--transition-fast);
}

input[type="file"]::-webkit-file-upload-button:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 4px 12px rgba(24, 51, 143, 0.3);
  transform: translateY(-1px);
}

input[type="file"]:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(60, 135, 200, 0.4);
  box-shadow: 0 4px 12px rgba(60, 135, 200, 0.08);
}

input[type="file"]:focus {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
  outline: none;
}

/* Dark Mode - Input File */
.dark-mode input[type="file"] {
  background: rgba(30, 40, 60, 0.6);
  border-color: rgba(71, 85, 105, 0.4);
  color: var(--color-text);
}

.dark-mode input[type="file"]::-webkit-file-upload-button {
  background: var(--color-primary);
  color: white;
  box-shadow: 0 2px 8px rgba(81, 104, 212, 0.3);
}

.dark-mode input[type="file"]::-webkit-file-upload-button:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 4px 12px rgba(81, 104, 212, 0.4);
}

.dark-mode input[type="file"]:hover {
  background: rgba(30, 40, 60, 0.8);
  border-color: rgba(81, 104, 212, 0.5);
}

.dark-mode input[type="file"]:focus {
  background: rgba(40, 50, 70, 0.9);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

/* ---------- Custom File Input (Bootstrap) ---------- */
.custom-file-input {
  cursor: pointer;
}

.custom-file-label::after {
  content: "Procurar";
}

/* Card com arquivo selecionado */
.card.border-success {
  border-width: 2px !important;
  box-shadow: 0 0 10px rgba(40, 167, 69, 0.3) !important;
  transition: all 0.3s ease;
}


.selected-file-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dark Mode - Custom File */
.dark-mode .custom-file-label {
  background-color: rgba(30, 40, 60, 0.6);
  border-color: rgba(71, 85, 105, 0.4);
  color: var(--color-text);
}

.dark-mode .custom-file-label::after {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.dark-mode .custom-file-label:hover {
  background-color: rgba(30, 40, 60, 0.8);
  border-color: rgba(81, 104, 212, 0.5);
}

.dark-mode .custom-file-input:focus~.custom-file-label {
  background-color: rgba(40, 50, 70, 0.9);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.dark-mode .card.border-success {
  box-shadow: 0 0 10px rgba(72, 187, 120, 0.4) !important;
}

.dark-mode .card.border-success::before {
  background-color: #48bb78;
}

/* ================= Avaliação de Sentimento (1:1) ================= */
.sentimento-option {
  cursor: pointer;
  display: block;
  margin-bottom: 0;
  transition: var(--transition-base);
}

.sentimento-card {
  transition: var(--transition-base);
  cursor: pointer;
  background: var(--glass-bg-lighter);
  border: 2px solid var(--glass-border) !important;
  position: relative;
  overflow: hidden;
}

.sentimento-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
  opacity: 0;
  transition: var(--transition-fast);
  pointer-events: none;
}

.sentimento-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary) !important;
}

.sentimento-card:hover::before {
  opacity: 1;
}

.sentimento-option.selected .sentimento-card {
  background: linear-gradient(135deg, rgba(81, 104, 212, 0.08) 0%, rgba(59, 81, 184, 0.05) 100%);
  border-width: 3px !important;
  transform: scale(1.08);
  box-shadow: var(--shadow-lg);
}

.sentimento-option input[type="radio"]:checked+.sentimento-card {
  background: linear-gradient(135deg, rgba(81, 104, 212, 0.08) 0%, rgba(59, 81, 184, 0.05) 100%);
  border-width: 3px !important;
  box-shadow: var(--shadow-lg);
}

/* Estados de cores específicos para cada sentimento */
.sentimento-card.border-success:hover,
.sentimento-option.selected .sentimento-card.border-success {
  border-color: var(--color-success) !important;
  box-shadow: 0 8px 20px rgba(34, 197, 94, 0.25);
}

.sentimento-card.border-warning:hover,
.sentimento-option.selected .sentimento-card.border-warning {
  border-color: var(--color-warning) !important;
  box-shadow: 0 8px 20px rgba(251, 191, 36, 0.25);
}

.sentimento-card.border-danger:hover,
.sentimento-option.selected .sentimento-card.border-danger {
  border-color: var(--color-danger) !important;
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.25);
}

.sentimento-card.border-secondary:hover,
.sentimento-option.selected .sentimento-card.border-secondary {
  border-color: var(--color-secondary) !important;
  box-shadow: 0 8px 20px rgba(100, 116, 139, 0.25);
}

/* Dark Mode - Avaliação de Sentimento */
.dark-mode .sentimento-card {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(71, 85, 105, 0.5) !important;
}

.dark-mode .sentimento-card:hover {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(81, 104, 212, 0.7) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark-mode .sentimento-option.selected .sentimento-card {
  background: linear-gradient(135deg, rgba(81, 104, 212, 0.2) 0%, rgba(59, 81, 184, 0.15) 100%);
  border-color: var(--color-primary) !important;
  box-shadow: 0 8px 20px rgba(81, 104, 212, 0.4);
}

.dark-mode .sentimento-option input[type="radio"]:checked+.sentimento-card {
  background: linear-gradient(135deg, rgba(81, 104, 212, 0.2) 0%, rgba(59, 81, 184, 0.15) 100%);
  box-shadow: 0 8px 20px rgba(81, 104, 212, 0.4);
}

/* Estados de cores específicos no dark mode */
.dark-mode .sentimento-card.border-success:hover,
.dark-mode .sentimento-option.selected .sentimento-card.border-success {
  border-color: rgba(34, 197, 94, 0.8) !important;
  box-shadow: 0 8px 20px rgba(34, 197, 94, 0.35);
}

.dark-mode .sentimento-card.border-warning:hover,
.dark-mode .sentimento-option.selected .sentimento-card.border-warning {
  border-color: rgba(251, 191, 36, 0.8) !important;
  box-shadow: 0 8px 20px rgba(251, 191, 36, 0.35);
}

.dark-mode .sentimento-card.border-danger:hover,
.dark-mode .sentimento-option.selected .sentimento-card.border-danger {
  border-color: rgba(239, 68, 68, 0.8) !important;
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.35);
}

.dark-mode .sentimento-card.border-secondary:hover,
.dark-mode .sentimento-option.selected .sentimento-card.border-secondary {
  border-color: rgba(148, 163, 184, 0.8) !important;
  box-shadow: 0 8px 20px rgba(148, 163, 184, 0.3);
}

/* ==================== 1:1 Temas - Liquid Glass 2025 ==================== */

/* Container de temas */
.temas-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.temas-container label {
  cursor: pointer;
  user-select: none;
  transition: all var(--transition-fast);
  margin-bottom: 0;
}

/* Botões de tema */
.tema-btn {
  border-radius: 20px !important;
  font-weight: 500;
  padding: 6px 16px !important;
  border: 2px solid var(--glass-border);
  background: var(--glass-bg-lighter);
  color: var(--color-text);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tema-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.tema-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(81, 104, 212, 0.2);
  border-color: var(--color-primary);
}

.tema-btn:hover::before {
  opacity: 1.5;
}

/* Botão de tema selecionado (primário) */
.tema-btn.btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  border-color: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(81, 104, 212, 0.3);
}

.tema-btn.btn-primary::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
}

.tema-btn.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 16px rgba(81, 104, 212, 0.4);
}

/* Botão de tema outline */
.tema-btn.btn-outline-primary {
  background: rgba(255, 255, 255, 0.5);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.tema-btn.btn-outline-primary:hover {
  background: rgba(81, 104, 212, 0.1);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Dark Mode - Temas */
.dark-mode .tema-btn {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(71, 85, 105, 0.5);
  color: var(--color-text);
}

.dark-mode .tema-btn::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.dark-mode .tema-btn:hover {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(81, 104, 212, 0.6);
  box-shadow: 0 4px 12px rgba(81, 104, 212, 0.3);
}

.dark-mode .tema-btn.btn-primary {
  background: linear-gradient(135deg, rgba(81, 104, 212, 0.9) 0%, rgba(59, 81, 184, 0.9) 100%);
  border-color: rgba(81, 104, 212, 0.8);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(81, 104, 212, 0.4);
}

.dark-mode .tema-btn.btn-primary:hover {
  box-shadow: 0 6px 16px rgba(81, 104, 212, 0.5);
}

.dark-mode .tema-btn.btn-outline-primary {
  background: rgba(30, 41, 59, 0.4);
  border-color: rgba(81, 104, 212, 0.6);
  color: rgba(129, 140, 248, 0.9);
}

.dark-mode .tema-btn.btn-outline-primary:hover {
  background: rgba(81, 104, 212, 0.15);
  border-color: rgba(81, 104, 212, 0.8);
  color: rgba(129, 140, 248, 1);
}

.btn {
  /* backdrop-filter: blur(10px); - desabilitado para melhor performance */
  /* -webkit-backdrop-filter: blur(10px); - desabilitado para melhor performance */
  border: 1px solid transparent;
  transition: all var(--transition-fast);
  font-weight: 500;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(60, 135, 200, 0.25);
}

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

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 100%);
  box-shadow: 0 8px 24px rgba(60, 135, 200, 0.35);
}

/* Botões disabled */
.btn:disabled,
.btn.disabled,
.btn-group>.btn:disabled,
.btn-group>.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Dark Mode - Botões */
.dark-mode .btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
}

.dark-mode .btn-outline-primary {
  color: var(--color-primary-light);
  border-color: var(--color-primary-light);
}

.dark-mode .btn-outline-primary:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.dark-mode .btn-outline-success {
  color: rgba(34, 197, 94, 0.9);
  border-color: rgba(34, 197, 94, 0.6);
}

.dark-mode .btn-outline-success:hover {
  background: rgba(34, 197, 94, 0.8);
  border-color: rgba(34, 197, 94, 0.8);
  color: #fff;
}

.dark-mode .btn-outline-danger {
  color: rgba(239, 68, 68, 0.9);
  border-color: rgba(239, 68, 68, 0.6);
}

.dark-mode .btn-outline-danger:hover {
  background: rgba(239, 68, 68, 0.8);
  border-color: rgba(239, 68, 68, 0.8);
  color: #fff;
}

.dark-mode .btn-outline-warning {
  color: rgba(251, 191, 36, 0.9);
  border-color: rgba(251, 191, 36, 0.6);
}

.dark-mode .btn-outline-warning:hover {
  background: rgba(251, 191, 36, 0.8);
  border-color: rgba(251, 191, 36, 0.8);
  color: rgba(30, 41, 59, 0.95);
}

.dark-mode .btn-outline-info {
  color: rgba(59, 130, 246, 0.9);
  border-color: rgba(59, 130, 246, 0.6);
}

.dark-mode .btn-outline-info:hover {
  background: rgba(59, 130, 246, 0.8);
  border-color: rgba(59, 130, 246, 0.8);
  color: #fff;
}

.dark-mode .btn-secondary {
  background: rgba(71, 85, 105, 0.6);
  border-color: rgba(71, 85, 105, 0.5);
  color: var(--color-text);
}

.dark-mode .btn-secondary:hover {
  background: rgba(71, 85, 105, 0.8);
}

.dark-mode .btn-light {
  background: rgba(71, 85, 105, 0.4);
  border-color: rgba(71, 85, 105, 0.3);
  color: var(--color-text);
}

.dark-mode .btn-light:hover {
  background: rgba(71, 85, 105, 0.6);
}

.dark-mode .btn-dark {
  background: rgba(15, 23, 41, 0.8);
  border-color: rgba(30, 40, 60, 0.5);
  color: var(--color-text);
}

.dark-mode .btn-success {
  background: rgba(34, 197, 94, 0.8);
  border-color: rgba(34, 197, 94, 0.6);
  color: #fff;
}

.dark-mode .btn-success:hover {
  background: rgba(34, 197, 94, 1);
  border-color: rgba(34, 197, 94, 0.8);
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.35);
}

.dark-mode .btn-danger {
  background: rgba(239, 68, 68, 0.8);
  border-color: rgba(239, 68, 68, 0.6);
  color: #fff;
}

.dark-mode .btn-danger:hover {
  background: rgba(239, 68, 68, 1);
  border-color: rgba(239, 68, 68, 0.8);
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.35);
}

.dark-mode .btn-warning {
  background: rgba(251, 191, 36, 0.8);
  border-color: rgba(251, 191, 36, 0.6);
  color: rgba(30, 41, 59, 0.95);
}

.dark-mode .btn-warning:hover {
  background: rgba(251, 191, 36, 1);
  border-color: rgba(251, 191, 36, 0.8);
  box-shadow: 0 8px 24px rgba(251, 191, 36, 0.35);
}

.dark-mode .btn-info {
  background: rgba(59, 130, 246, 0.8);
  border-color: rgba(59, 130, 246, 0.6);
  color: #fff;
}

.dark-mode .btn-info:hover {
  background: rgba(59, 130, 246, 1);
  border-color: rgba(59, 130, 246, 0.8);
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35);
}

.dark-mode .btn:disabled,
.dark-mode .btn.disabled,
.dark-mode .btn-group>.btn:disabled,
.dark-mode .btn-group>.btn.disabled {
  opacity: 0.4;
  background: rgba(71, 85, 105, 0.3);
  border-color: rgba(71, 85, 105, 0.2);
  color: rgba(148, 163, 184, 0.5);
}

/* ---------- Barra Fixa de Aprovação - Liquid Glass ---------- */
.aprovacao-footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10010 !important;
  /* Acima de tudo, menos modais */
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-top: 1px solid var(--glass-border);
  box-shadow: 0 -4px 16px rgba(24, 51, 143, 0.08);
  padding: 0.75rem 0;
  transition: all var(--transition-fast);
}

.aprovacao-footer-bar .container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 100%;
  padding: 0 1rem;
}

.aprovacao-footer-bar .acoes {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

/* Responsividade da barra */
@media (max-width: 768px) {
  .aprovacao-footer-bar .container {
    flex-direction: column;
    align-items: stretch;
  }

  .aprovacao-footer-bar .acoes {
    width: 100%;
    justify-content: center;
  }

  .aprovacao-footer-bar .btn {
    flex: 1 1 auto;
    min-width: 120px;
  }
}

/* Espaçador para compensar a altura da barra fixa */
.aprovacao-footer-spacer {
  height: 80px;
  flex-shrink: 0;
}

/* Dark Mode */
.dark-mode .aprovacao-footer-bar {
  background: rgba(30, 41, 59, 0.9);
  border-top-color: rgba(71, 85, 105, 0.3);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
}

/* ---------- Ações flutuantes - Compras ---------- */
/* Pílula flutuante compacta no canto inferior direito. Só aparece quando há
   item selecionável (controlado por .d-none via atualizarBarraAcoesCompras).
   Fica à direita pra não colidir com o flutuante centralizado de pendências. */
#rodape-fixo {
  position: fixed;
  right: 20px;
  bottom: 20px;
  left: auto;
  width: auto;
  background: var(--glass-bg, rgba(255, 255, 255, 0.97));
  backdrop-filter: blur(var(--glass-blur, 10px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 10px));
  padding: 10px 14px;
  border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.1));
  border-radius: var(--radius-md, 0.5rem);
  z-index: 1050;
  box-shadow: var(--shadow-soft, 0 8px 24px rgba(0, 0, 0, 0.15));
  transition: opacity var(--transition-smooth, 0.3s ease), transform var(--transition-smooth, 0.3s ease);
}

.dark-mode #rodape-fixo {
  background: var(--glass-bg-dark, rgba(30, 41, 59, 0.97));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

@media (max-width: 576px) {
  #rodape-fixo {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  #rodape-fixo .btn-group {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
}

/* ---------- Sanfona da listagem de compras (grupo por solicitação) ---------- */
/* Cada solicitação tem 2 <tbody> dentro da .compras-tabela-agrupada:
   - .compras-grupo-cabeca: 1 row clicável (toggle do collapse)
   - .compras-grupo-items: o <tbody> alvo do Bootstrap collapse com os itens. */
.compras-tabela-agrupada {
  border-collapse: separate;
  border-spacing: 0;
}

/* Bootstrap collapse opera com display:block, que quebra layout de <tbody>.
   Forçamos os estados certos pra tbody: none quando fechado, table-row-group
   quando aberto. Sem isso, a sanfona não esconde corretamente. */
.compras-grupo-items:not(.show):not(.collapsing) {
  display: none !important;
}

.compras-grupo-items.show {
  display: table-row-group !important;
}

.compras-grupo-header>td {
  background: linear-gradient(90deg, rgba(24, 51, 143, 0.12), rgba(24, 51, 143, 0.04));
  font-weight: 600;
  cursor: pointer;
  border-top: 3px solid var(--color-primary, #18338f);
  padding: 12px 0.75rem !important;
  font-size: 0.95rem;
  user-select: none;
  transition: background var(--transition-fast, 0.15s ease);
  vertical-align: middle !important;
}

/* Container flex do conteúdo do cabeçalho (checkbox + chevron + título). */
.compras-grupo-header-conteudo {
  flex-wrap: wrap;
}

/* Wrapper do switch dentro do cabeçalho — sem padding-left herdado do
   .custom-control padrão (que empurraria pra direita) e zera margens
   pra alinhar verticalmente com o chevron e o texto. */
.compras-grupo-check-wrap {
  cursor: default;
  margin-bottom: 0 !important;
  min-height: auto;
  flex: 0 0 auto;
}

.compras-grupo-header:hover>td {
  background: linear-gradient(90deg, rgba(24, 51, 143, 0.2), rgba(24, 51, 143, 0.08));
}

.compras-grupo-chevron {
  color: var(--color-primary, #18338f);
  display: inline-block;
  transition: transform var(--transition-fast, 0.15s ease);
}

/* Bootstrap marca aria-expanded="false" no trigger quando o collapse fecha. */
.compras-grupo-header[aria-expanded="false"] .compras-grupo-chevron {
  transform: rotate(-90deg);
}

.compras-grupo-header[aria-expanded="false"]>td {
  background: linear-gradient(90deg, rgba(108, 117, 125, 0.1), rgba(108, 117, 125, 0.03));
  border-top-color: var(--color-muted, #6c757d);
}

.compras-grupo-header .badge {
  font-weight: 500;
  margin-left: 4px;
}

.dark-mode .compras-grupo-header>td {
  background: rgba(255, 255, 255, 0.06);
}

/* ---------- Abas por status (compras) ---------- */
.compras-status-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.compras-status-tabs::-webkit-scrollbar {
  height: 4px;
}

.compras-status-tabs::-webkit-scrollbar-thumb {
  background: var(--color-scroll-thumb, rgba(24, 51, 143, 0.3));
  border-radius: 2px;
}

.compras-status-tabs .nav-link {
  white-space: nowrap;
  color: var(--color-muted, #6c757d);
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast, 0.15s ease);
}

.compras-status-tabs .nav-link:hover {
  color: var(--color-primary, #18338f);
  border-bottom-color: rgba(24, 51, 143, 0.3);
}

.compras-status-tabs .nav-link.active {
  color: var(--color-primary, #18338f);
  font-weight: 600;
  border-bottom-color: var(--color-primary, #18338f);
  background: rgba(24, 51, 143, 0.05);
}

.compras-status-tabs .nav-link .badge {
  font-weight: 500;
}

/* ---------- Modal - Liquid Glass ---------- */
/* Fix RADICAL para modais dentro de cards/containers 
   Problema: .card tem z-index: 10 e 10003, criando stacking context que impede modais
   Solução: z-index MUITO alto nos modais para superar TODOS os containers */

.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  z-index: var(--z-modal-backdrop) !important;
  position: fixed !important;
}

.modal-backdrop.show {
  opacity: 0.5;
}

.modal {
  z-index: var(--z-modal) !important;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed !important;
  isolation: isolate;
}

.modal.show {
  z-index: var(--z-modal) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.modal.fade {
  z-index: var(--z-modal) !important;
}

/* Modal content com z-index elevado dentro da estrutura modal */
.modal-content {
  position: relative;
  z-index: var(--z-modal-content) !important;
}

.modal-dialog {
  z-index: var(--z-modal-dialog) !important;
  position: relative;
  pointer-events: auto;
  margin: 1.75rem auto;
}

.modal-content {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
  border-radius: var(--radius-md) !important;
  z-index: var(--z-modal-content) !important;
  position: relative;
  pointer-events: auto;
  overflow: hidden;
  /* Garante que conteúdo interno respeite border-radius */
}

.modal-header {
  background: rgba(255, 255, 255, 0.95);
  /* backdrop-filter: blur(10px); - desabilitado para melhor performance */
  /* -webkit-backdrop-filter: blur(10px); - desabilitado para melhor performance */
  border: none;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  z-index: 1;
  /* Arredondar apenas cantos superiores */
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}

.modal-footer {
  background: rgba(255, 255, 255, 0.95);
  /* backdrop-filter: blur(10px); - desabilitado para melhor performance */
  /* -webkit-backdrop-filter: blur(10px); - desabilitado para melhor performance */
  border: none;
  border-top: 1px solid var(--color-border);
  position: relative;
  z-index: 1;
  /* Arredondar apenas cantos inferiores */
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
}

.modal-body {
  position: relative;
  z-index: 1;
  /* Sem bordas arredondadas, fica entre header e footer */
  border-radius: 0 !important;
}

/* Garantir que primeiro e último elementos respeitem os cantos */
.modal-header:first-child {
  border-top-left-radius: var(--radius-md) !important;
  border-top-right-radius: var(--radius-md) !important;
}

.modal-footer:last-child {
  border-bottom-left-radius: var(--radius-md) !important;
  border-bottom-right-radius: var(--radius-md) !important;
}

/* Se não houver header, body fica com cantos superiores arredondados */
.modal-body:first-child {
  border-top-left-radius: var(--radius-md) !important;
  border-top-right-radius: var(--radius-md) !important;
}

/* Se não houver footer, body fica com cantos inferiores arredondados */
.modal-body:last-child {
  border-bottom-left-radius: var(--radius-md) !important;
  border-bottom-right-radius: var(--radius-md) !important;
}

/* Garantir que modais sempre usem z-index correto */
.modal-open .modal {
  z-index: var(--z-modal) !important;
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.modal-open .modal-backdrop {
  z-index: var(--z-modal-backdrop) !important;
}

/* Fix específico para modais dentro de containers */
.card .modal,
.container .modal,
.row .modal,
.col .modal,
[class*="col-"] .modal,
div[class*="card"] .modal {
  position: fixed !important;
  z-index: var(--z-modal) !important;
  transform: none !important;
}

/* Fix para múltiplos modais - incrementa z-index */
.modal-open .modal:nth-of-type(even) {
  z-index: calc(var(--z-modal) + 10) !important;
}

.modal-open .modal:nth-of-type(even)+.modal-backdrop,
.modal-open .modal:nth-of-type(even)~.modal-backdrop:last-of-type {
  z-index: calc(var(--z-modal-backdrop) + 10) !important;
}

/* Garantir pointer events */
.modal-backdrop {
  pointer-events: auto;
}

.modal.show {
  pointer-events: auto;
}

/* SOLUÇÃO RADICAL: Remover backdrop problemático e usar fundo no próprio modal */
.modal-backdrop {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Modais não abertos: garantir que ficam invisíveis sem interferir na abertura Bootstrap.
   Usa visibility+opacity em vez de display:none para não quebrar a animação do modal.show */
.modal:not(.show) {
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  pointer-events: none !important;
  transition: background-color 0.15s linear, opacity 0.15s linear, visibility 0s linear 0.15s;
}

.modal {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.modal.fade {
  background-color: rgba(0, 0, 0, 0) !important;
  transition: background-color 0.15s linear, opacity 0.15s linear, visibility 0s linear 0s;
}

.modal.fade.show {
  background-color: rgba(0, 0, 0, 0.5) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Dark mode modal styles */
.dark-mode .modal-backdrop {
  display: none !important;
  visibility: hidden !important;
}

.dark-mode .modal {
  background-color: rgba(0, 0, 0, 0.75) !important;
  z-index: 100050 !important;
}

.dark-mode .modal.fade {
  background-color: rgba(0, 0, 0, 0) !important;
}

.dark-mode .modal.fade.show {
  background-color: rgba(0, 0, 0, 0.75) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.dark-mode .modal-dialog {
  z-index: 100055 !important;
}

/* Bootstrap Select dropdown dentro de modais - z-index elevado */
.bootstrap-select.bs-container {
  z-index: 999999 !important;
}

.bootstrap-select.bs-container .dropdown-menu {
  z-index: 999999 !important;
}

.dark-mode .modal-content {
  background: rgba(30, 41, 59, 0.95);
  border: 1px solid rgba(71, 85, 105, 0.3);
  box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.5);
  border-radius: var(--radius-md) !important;
  z-index: 100060 !important;
  overflow: hidden;
}

.dark-mode .modal-header {
  background: rgba(20, 27, 45, 0.7);
  border-color: rgba(71, 85, 105, 0.3);
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}

.dark-mode .modal-footer {
  background: rgba(20, 27, 45, 0.7);
  border-color: rgba(71, 85, 105, 0.3);
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
}

.dark-mode .modal-header {
  border-bottom-color: rgba(71, 85, 105, 0.3);
}

.dark-mode .modal-footer {
  border-top-color: rgba(71, 85, 105, 0.3);
}

.dark-mode .modal-title {
  color: var(--color-text);
}

.dark-mode .modal-body {
  color: var(--color-text);
}

.modal-dialog .modal-content {
  border: 1px solid rgba(60, 135, 200, 0.25);
  box-shadow: 0 20px 60px 0 rgba(31, 38, 135, 0.2);
}

#modalIframe .modal-body {
  padding: 0;
  background: transparent;
}

/* Agrupando regras repetidas para modais grandes */
#modalMostrarArquivo .modal-dialog,
#modalIframe_grande_sem_recarregar .modal-dialog,
#modalIframe_grande .modal-dialog,
.modal-xl {
  max-width: 99%;
  min-height: 90% !important;
  height: 90% !important;
}

#modalMostrarArquivo .modal-dialog .modal-content,
#modalIframe_grande_sem_recarregar .modal-dialog .modal-content,
#modalIframe_grande .modal-dialog .modal-content {
  min-height: 90% !important;
  height: 90% !important;
}

/* Frames arredondados inferiores */
#frame_visualizar,
#frame_visualizar_sem_recarregar,
#frame_arquivo,
#frame_visualizar_grande_sem_recarregar,
#frame_visualizar_grande {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Override (quase fullscreen) para modais grandes específicos com padding externo de 20px */
#modalIframe_grande .modal-dialog,
#modalIframe_grande_sem_recarregar .modal-dialog {
  max-width: calc(100vw - 40px) !important;
  /* 20px de cada lado */
  width: calc(100vw - 40px) !important;
  margin: 20px auto !important;
  /* topo/baixo + centralização horizontal */
  height: calc(100vh - 40px) !important;
  /* 20px topo + 20px bottom */
  min-height: calc(100vh - 40px) !important;
}

#modalIframe_grande .modal-dialog .modal-content,
#modalIframe_grande_sem_recarregar .modal-dialog .modal-content {
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Garantir que body ocupe o espaço restante entre header e footer se existir */
#modalIframe_grande .modal-body,
#modalIframe_grande_sem_recarregar .modal-body {
  flex: 1 1 auto;
  overflow: auto;
}

/* ---------- Cards - Liquid Glass Effect ---------- */
.card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-glass);
  margin-bottom: 20px;
  transition: all var(--transition-fast);
  overflow: visible !important;
  position: relative;
  /* z-index: var(--z-content); */
  /* z-index removido para não criar stacking context que prenda dropdowns */
}

/* Cards não devem alterar z-index dinamicamente - dropdowns/selects usam position fixed */

.card:hover {
  box-shadow: var(--shadow-hover);
  border-color: rgba(60, 135, 200, 0.3);
}

/* Fix para imagens e conteúdo interno do card */
.card-img-top,
.card-img-bottom {
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}

.card-img-bottom {
  border-radius: 0 0 var(--radius) var(--radius);
}

/* Card-body, header e footer - sem z-index para não criar stacking context */
.card-body {
  overflow: visible;
  position: relative;
}

.card-header {
  position: relative;
}

.card-footer {
  position: relative;
}

.card-header,
.card-footer {
  background: rgba(255, 255, 255, 0.95);
  /* backdrop-filter: blur(10px); - desabilitado para melhor performance */
  /* -webkit-backdrop-filter: blur(10px); - desabilitado para melhor performance */
  border: none;
}

.card-header {
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius) var(--radius) 0 0 !important;
}

.card-footer {
  border-top: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: 0 0 var(--radius) var(--radius) !important;
}

/* Dark Mode - Cards */
.dark-mode .card-header,
.dark-mode .card-footer {
  background: rgba(30, 40, 60, 0.6);
  border-color: rgba(71, 85, 105, 0.3);
}

/* ---------- List Groups - Liquid Glass ---------- */
.list-group {
  border-radius: var(--radius) !important;
}

.list-group-item {
  background: var(--glass-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  transition: all var(--transition-fast);
  padding: 12px 20px;
}

.list-group-item:first-child {
  border-radius: var(--radius) var(--radius) 0 0 !important;
}

.list-group-item:last-child {
  border-radius: 0 0 var(--radius) var(--radius) !important;
}

.list-group-item:only-child {
  border-radius: var(--radius) !important;
}

.list-group-item:hover {
  background: rgba(24, 51, 143, 0.05);
  transform: translateX(2px);
}

.list-group-item.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
  font-weight: 600;
}

/* List Group - Backgrounds Contextuais */
.list-group-item-primary {
  background: rgba(24, 51, 143, 0.1) !important;
  border-color: rgba(24, 51, 143, 0.2) !important;
  color: var(--color-primary) !important;
}

.list-group-item-primary:hover {
  background: rgba(24, 51, 143, 0.15) !important;
  border-color: var(--color-primary) !important;
}

.list-group-item-success {
  background: rgba(0, 200, 150, 0.1) !important;
  border-color: rgba(0, 200, 150, 0.2) !important;
  color: #00a86b !important;
}

.list-group-item-success:hover {
  background: rgba(0, 200, 150, 0.15) !important;
  border-color: var(--color-success) !important;
}

.list-group-item-danger {
  background: rgba(255, 71, 87, 0.1) !important;
  border-color: rgba(255, 71, 87, 0.2) !important;
  color: #cc0000 !important;
}

.list-group-item-danger:hover {
  background: rgba(255, 71, 87, 0.15) !important;
  border-color: var(--color-danger) !important;
}

.list-group-item-warning {
  background: rgba(255, 165, 2, 0.1) !important;
  border-color: rgba(255, 165, 2, 0.2) !important;
  color: #cc7a00 !important;
}

.list-group-item-warning:hover {
  background: rgba(255, 165, 2, 0.15) !important;
  border-color: var(--color-warning) !important;
}

.list-group-item-info {
  background: rgba(95, 39, 205, 0.1) !important;
  border-color: rgba(95, 39, 205, 0.2) !important;
  color: var(--color-info) !important;
}

.list-group-item-info:hover {
  background: rgba(95, 39, 205, 0.15) !important;
  border-color: var(--color-info) !important;
}

.list-group-item-light {
  background: rgba(248, 249, 250, 0.8) !important;
  border-color: rgba(222, 226, 230, 0.5) !important;
  color: #495057 !important;
}

.list-group-item-light:hover {
  background: rgba(233, 236, 239, 0.9) !important;
  border-color: #dee2e6 !important;
}

.list-group-item-dark {
  background: rgba(52, 58, 64, 0.15) !important;
  border-color: rgba(52, 58, 64, 0.3) !important;
  color: #343a40 !important;
}

.list-group-item-dark:hover {
  background: rgba(52, 58, 64, 0.2) !important;
  border-color: #343a40 !important;
}

/* Badge e Badge-pill dentro de list-group-item */
.list-group-item .badge,
.list-group-item .badge-pill {
  float: right;
  margin-top: 2px;
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

/* Remove margem da primeira badge dentro de list-group-item */
.list-group-item .badge:first-of-type,
.list-group-item .badge-pill:first-of-type {
  margin-left: 0;
}

/* Remove margem da última badge dentro de list-group-item */
.list-group-item .badge:last-of-type,
.list-group-item .badge-pill:last-of-type {
  margin-right: 0;
}

/* Dark Mode - List Groups */
.dark-mode .list-group-item {
  background: rgba(30, 41, 59, 0.5);
  border-color: rgba(71, 85, 105, 0.3);
  color: var(--color-text);
}

.dark-mode .list-group-item:hover {
  background: rgba(81, 104, 212, 0.15);
}

.dark-mode .list-group-item-primary {
  background: rgba(81, 104, 212, 0.2) !important;
  border-color: rgba(81, 104, 212, 0.3) !important;
  color: var(--color-primary-light) !important;
}

.dark-mode .list-group-item-success {
  background: rgba(16, 217, 168, 0.2) !important;
  border-color: rgba(16, 217, 168, 0.3) !important;
  color: var(--color-success-light) !important;
}

.dark-mode .list-group-item-danger {
  background: rgba(255, 107, 122, 0.2) !important;
  border-color: rgba(255, 107, 122, 0.3) !important;
  color: var(--color-danger-light) !important;
}

.dark-mode .list-group-item-warning {
  background: rgba(255, 183, 51, 0.2) !important;
  border-color: rgba(255, 183, 51, 0.3) !important;
  color: var(--color-warning-light) !important;
}

.dark-mode .list-group-item-info {
  background: rgba(165, 94, 234, 0.2) !important;
  border-color: rgba(165, 94, 234, 0.3) !important;
  color: var(--color-info-light) !important;
}

.dark-mode .list-group-item-light {
  background: rgba(226, 232, 240, 0.15) !important;
  border-color: rgba(226, 232, 240, 0.25) !important;
  color: #cbd5e1 !important;
}

.dark-mode .list-group-item-dark {
  background: rgba(15, 23, 42, 0.5) !important;
  border-color: rgba(30, 41, 59, 0.5) !important;
  color: #94a3b8 !important;
}

/* ---------- Alerts - Liquid Glass ---------- */
.alert {
  border-radius: var(--radius);
  border: 1px solid transparent;
  /* backdrop-filter: blur(10px); - desabilitado para melhor performance */
  /* -webkit-backdrop-filter: blur(10px); - desabilitado para melhor performance */
  box-shadow: var(--shadow-soft);
  position: relative;
  z-index: auto;
}

/* Alert pequeno - tamanho compacto */
.alert-sm {
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
}

/* Alerts não devem criar stacking context - dropdowns/selects usam position fixed */

.alert-light {
  background: rgba(246, 246, 246, 0.7);
  border-color: rgba(220, 220, 220, 0.5);
}

.alert-primary {
  background: rgba(60, 135, 200, 0.15);
  border-color: rgba(60, 135, 200, 0.3);
  color: #2a6fa5;
}

.alert-success {
  background: rgba(0, 212, 170, 0.15);
  border-color: rgba(0, 212, 170, 0.3);
  color: #008b6d;
}

.alert-danger {
  background: rgba(255, 77, 109, 0.15);
  border-color: rgba(255, 77, 109, 0.3);
  color: #d63d5a;
}

.alert-warning {
  background: rgba(255, 193, 7, 0.15);
  border-color: rgba(255, 193, 7, 0.3);
  color: #d39e00;
}

.alert-info {
  background: rgba(23, 162, 184, 0.15);
  border-color: rgba(23, 162, 184, 0.3);
  color: #117a8b;
}

.alert-secondary {
  background: rgba(108, 117, 125, 0.15);
  border-color: rgba(108, 117, 125, 0.3);
  color: #6c757d;
}

.alert-dark {
  background: rgba(52, 58, 64, 0.15);
  border-color: rgba(52, 58, 64, 0.3);
  color: #343a40;
}

/* Dark Mode - Alerts */
.dark-mode .alert {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark-mode .alert-light {
  background: rgba(71, 85, 105, 0.3);
  border-color: rgba(100, 116, 139, 0.4);
  color: rgba(226, 232, 240, 0.95);
}

.dark-mode .alert-primary {
  background: rgba(81, 104, 212, 0.2);
  border-color: rgba(81, 104, 212, 0.4);
  color: rgba(147, 197, 253, 1);
}

.dark-mode .alert-success {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.4);
  color: rgba(134, 239, 172, 1);
}

.dark-mode .alert-danger {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: rgba(252, 165, 165, 1);
}

.dark-mode .alert-warning {
  background: rgba(251, 191, 36, 0.2);
  border-color: rgba(251, 191, 36, 0.4);
  color: rgba(253, 224, 71, 1);
}

.dark-mode .alert-info {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.4);
  color: rgba(147, 197, 253, 1);
}

.dark-mode .alert-secondary {
  background: rgba(100, 116, 139, 0.2);
  border-color: rgba(100, 116, 139, 0.4);
  color: rgba(203, 213, 225, 1);
}

.dark-mode .alert-dark {
  background: rgba(30, 41, 59, 0.4);
  border-color: rgba(51, 65, 85, 0.5);
  color: rgba(226, 232, 240, 0.9);
}

/* ========================================
   NOTIFY.JS - Notificações (Modo Claro)
   ======================================== */

/* Container base das notificações */
.notifyjs-corner {
  z-index: var(--z-notify) !important;
}

.notifyjs-wrapper {
  z-index: var(--z-notify) !important;
}

.notifyjs-container {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
  border-radius: var(--radius-md) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all var(--transition-normal);
  animation: slideInRight 0.4s ease-out;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }

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

/* Base do notify - Liquid Glass */
.notifyjs-bootstrap-base {
  padding: 14px 20px !important;
  border-radius: var(--radius-md) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  border-width: 1px !important;
  border-style: solid !important;
  background-position: 12px center !important;
  background-repeat: no-repeat !important;
  background-size: 18px !important;
  padding-left: 44px !important;
  min-width: 300px !important;
  max-width: 450px !important;
}

/* Success - Verde vibrante */
.notifyjs-bootstrap-success {
  background-color: rgba(240, 253, 244, 0.98) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #166534 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* Error - Vermelho vibrante */
.notifyjs-bootstrap-error {
  background-color: rgba(254, 242, 242, 0.98) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #991b1b !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E") !important;
}

/* Warning - Amarelo/Laranja */
.notifyjs-bootstrap-warn {
  background-color: rgba(254, 252, 232, 0.98) !important;
  border-color: rgba(251, 191, 36, 0.5) !important;
  color: #92400e !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E") !important;
}

/* Info - Azul */
.notifyjs-bootstrap-info {
  background-color: rgba(239, 246, 255, 0.98) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  color: #1e40af !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E") !important;
}

/* ========================================
   DARK MODE - Notify.js
   ======================================== */

.dark-mode .notifyjs-container {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}

/* Success - Dark Mode */
.dark-mode .notifyjs-bootstrap-success {
  background-color: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: rgba(134, 239, 172, 1) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2386efac' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* Error - Dark Mode */
.dark-mode .notifyjs-bootstrap-error {
  background-color: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: rgba(252, 165, 165, 1) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fca5a5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E") !important;
}

/* Warning - Dark Mode */
.dark-mode .notifyjs-bootstrap-warn {
  background-color: rgba(251, 191, 36, 0.15) !important;
  border-color: rgba(251, 191, 36, 0.4) !important;
  color: rgba(253, 224, 71, 1) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fde047' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E") !important;
}

/* Info - Dark Mode */
.dark-mode .notifyjs-bootstrap-info {
  background-color: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  color: rgba(147, 197, 253, 1) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2393c5fd' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E") !important;
}

/* ---------- Toast ---------- */
.toast {
  background: rgba(237, 247, 255, 1);
  border: none;
}

.dark-mode .toast {
  background: rgba(30, 41, 59, 0.95);
  color: var(--color-text);
}

/* ---------- Dropdown - Liquid Glass ---------- */
.dropdown-menu {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
  border-radius: var(--radius);
  padding: 8px;
  z-index: var(--z-dropdown) !important;
  min-width: 180px;
  margin-top: 0.125rem;
}

/* Dropdown container - z-index baixo, menu usa fixed positioning */
.dropdown {
  position: relative;
  z-index: auto;
}

/* Dropdown alinhado à esquerda do botão por padrão */
.dropdown-menu {
  left: 0;
  right: auto;
}

/* Dropdown alinhado à direita quando tem classe dropdown-menu-right */
.dropdown-menu-right {
  left: auto;
  right: 0;
}

.dropdown.show {
  z-index: auto;
}

/* Dropdowns dentro de card-header mantém z-index consistente */
.card-header .dropdown.show {
  z-index: auto;
}

.card-header .dropdown-menu {
  z-index: var(--z-dropdown) !important;
}

/* Formulários, fieldsets e seus elementos ficam atrás */
form,
fieldset,
.form-group,
input[type="radio"],
input[type="checkbox"],
label {
  position: relative;
  z-index: 1;
}

.dropdown-item {
  color: #1a1a2e;
  font-size: 14px;
  font-family: 'Nunito Sans', sans-serif;
  border-radius: var(--radius-xs);
  transition: all var(--transition-fast);
  margin-bottom: 2px;
}

.dropdown-item:hover {
  background: rgba(60, 135, 200, 0.12);
  transform: translateX(4px);
}

.dropdown-item.active,
.dropdown-item:active {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: #FFF;
}

/* Dark Mode - Dropdowns */
.dark-mode .dropdown-menu {
  background: rgba(20, 27, 45, 0.95);
  border-color: rgba(71, 85, 105, 0.5);
}

.dark-mode .dropdown-item {
  color: var(--color-text);
}

.dark-mode .dropdown-item:hover {
  background: rgba(81, 104, 212, 0.2);
  color: var(--color-text);
}

.dark-mode .dropdown-item.active,
.dark-mode .dropdown-item:active {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: #FFF;
}

.dark-mode .dropdown-divider {
  border-top-color: rgba(71, 85, 105, 0.3);
}

/* ---------- Tables / DataTables ---------- */
th {
  font-size: 12px;
  font-weight: 400;
}

div.dataTables_scrollBody {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.tr-picotada {
  border-top: 2px dashed #c0c0c0;
}

/* DataTables wrapper e elementos não devem sobrepor dropdowns */
.dataTables_wrapper {
  position: relative;
  z-index: auto;
}

.dataTables_wrapper table,
.dataTables_wrapper tbody {
  position: relative;
  z-index: auto;
}

.dataTables_wrapper tr,
.dataTables_wrapper td {
  position: relative;
  z-index: auto;
}

/* Quando DataTable contém Bootstrap Select aberto */
.dataTables_wrapper:has(.bootstrap-select.show) {
  position: relative;
  z-index: 10005 !important;
}

.dataTables_wrapper tr:has(.bootstrap-select.show) {
  position: relative;
  z-index: 10006 !important;
}

.dataTables_wrapper td:has(.bootstrap-select.show) {
  position: relative;
  z-index: 10007 !important;
}

/* DataTables controles */
div.dt-container .dt-search input {
  padding: 1px;
  font-size: 12px;
}

div.dt-container .dt-input {
  border: none;
}

.dt-search {
  font-size: 13px;
  font-weight: 500;
}

.dt-input {
  margin-right: 5px;
}

div.dt-container div.dt-layout-row {
  margin-top: 10px;
}

div.dt-buttons>.dt-button,
div.dt-buttons>div.dt-button-split .dt-button {
  background: #e7e7e7;
  display: inline-block;
  margin: 0 .167em .333em;
  padding: 2px;
  border: 1px solid rgba(212, 212, 212, .3);
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}

div.dt-container .dt-paging .dt-paging-button {
  border-color: #FFF;
}

div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
  background: var(--color-primary);
  color: #fff !important;
  border-color: var(--color-primary);
}

div.dt-container .dt-paging .dt-paging-button:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

div.dt-container .dt-paging .dt-paging-button.disabled,
div.dt-container .dt-paging .dt-paging-button.disabled:hover,
div.dt-container .dt-paging .dt-paging-button.disabled:active {
  cursor: default;
  color: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
}

/* Dark mode - DataTable paging disabled */
.dark-mode div.dt-container .dt-paging .dt-paging-button.disabled,
.dark-mode div.dt-container .dt-paging .dt-paging-button.disabled:hover,
.dark-mode div.dt-container .dt-paging .dt-paging-button.disabled:active {
  color: rgba(255, 255, 255, 0.3) !important;
  border: 1px solid transparent;
  background: transparent;
}

/* Tabela de Contas - Linhas clicáveis */
table[id^="minhaTabela"] tbody tr {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

table[id^="minhaTabela"] tbody tr:hover {
  background-color: rgba(81, 104, 212, 0.08) !important;
}

.dark-mode table[id^="minhaTabela"] tbody tr:hover {
  background-color: rgba(81, 104, 212, 0.15) !important;
}

/* ---------- Tabs (nav-tabs) - Liquid Glass ---------- */
.nav-tabs {
  border-bottom: 2px solid rgba(60, 135, 200, 0.2);
}

.nav-tabs .nav-item {
  margin-right: 4px;
}

.nav-tabs .nav-link {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: rgba(240, 240, 240, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all var(--transition-fast);
  color: var(--color-text);
}

.nav-tabs .nav-link:hover {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(60, 135, 200, 0.2);
}

.nav-tabs .nav-link.active {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-color: rgba(60, 135, 200, 0.3);
  border-bottom-color: transparent;
  font-weight: 600;
  color: var(--color-primary);
  box-shadow: 0 -4px 12px rgba(60, 135, 200, 0.1);
}

.tab-pane {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(60, 135, 200, 0.3);
  border-top: none;
  padding: 24px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-soft);
}

/* Tab-panes aninhados: não replicar o estilo glass do pai (padding duplicado,
   backdrop-filter criando stacking context que intercala cliques em tabelas
   curtas, borda duplicada). Herdam o contexto do pai. */
.tab-pane .tab-pane {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Dark Mode - Nav Tabs */
.dark-mode .nav-tabs {
  border-bottom-color: rgba(71, 85, 105, 0.4);
}

.dark-mode .nav-tabs .nav-link {
  background: rgba(30, 40, 60, 0.5);
  color: rgba(226, 232, 240, 0.8);
}

.dark-mode .nav-tabs .nav-link:hover {
  background: rgba(30, 40, 60, 0.7);
  border-color: rgba(81, 104, 212, 0.3);
  color: rgba(226, 232, 240, 1);
}

.dark-mode .nav-tabs .nav-link.active {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(81, 104, 212, 0.4);
  color: var(--color-primary);
  box-shadow: 0 -4px 12px rgba(81, 104, 212, 0.2);
}

.dark-mode .tab-pane {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(71, 85, 105, 0.3);
}

/* ---------- Configurações (migrado de inline) ---------- */
#myTab.nav-tabs .nav-link {
  font-weight: 600;
  display: flex;
  align-items: center;
}

#myTab.nav-tabs .nav-link i {
  margin-right: 6px;
  opacity: .85;
}

#myTab.nav-tabs .nav-link.active {
  background: #f8f9fa;
  border-bottom-color: #f8f9fa;
}

.dark-mode #myTab.nav-tabs .nav-link.active {
  background: rgba(30, 41, 59, 0.95);
  border-bottom-color: rgba(30, 41, 59, 0.95);
}

.fieldset-modern legend {
  font-size: 1rem;
  font-weight: 600;
}

.card-header small {
  font-weight: 400;
  opacity: .85;
}

/* ---------- Scrollable Card Bodies ---------- */
@media (min-width:1920px) {
  .card-body-scroll {
    max-height: 400px !important;
    overflow-y: auto !important;
  }

  .card-body-scroll-double {
    max-height: 620px !important;
    overflow-y: auto !important;
  }
}

@media (max-width:1920px) {
  .card-body-scroll {
    max-height: 350px !important;
    overflow-y: auto !important;
  }

  .card-body-scroll-double {
    max-height: 520px !important;
    overflow-y: auto !important;
  }
}

@media (max-width:1366px) {
  .card-body-scroll {
    max-height: 180px !important;
    overflow-y: auto !important;
  }

  .card-body-scroll-double {
    max-height: 380px !important;
    overflow-y: auto !important;
  }
}

/* Scrollbars personalizados (WebKit) - Liquid Glass */
.card-body-scroll-double,
.card-body-scroll {
  overflow-y: auto !important;
}

.card-body-scroll-double::-webkit-scrollbar,
.card-body-scroll::-webkit-scrollbar {
  width: 10px;
}

.card-body-scroll-double::-webkit-scrollbar-track,
.card-body-scroll::-webkit-scrollbar-track {
  background: rgba(240, 240, 240, 0.3);
  border-radius: 10px;
}

.card-body-scroll-double::-webkit-scrollbar-thumb,
.card-body-scroll::-webkit-scrollbar-thumb {
  background: var(--color-scroll-thumb);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  transition: all var(--transition-fast);
}

.card-body-scroll-double::-webkit-scrollbar-thumb:hover,
.card-body-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(60, 135, 200, 0.5);
  border-color: rgba(255, 255, 255, 0.7);
}

/* ========================================
   SCROLLABLE CONTAINERS - Classes Reutilizáveis
   ======================================== */

/* Dropdown com scroll responsivo - substitui inline styles */
.dropdown-scrollable {
  max-height: min(400px, 60vh);
  overflow-y: auto;
  overflow-x: hidden;
}

.dropdown-scrollable::-webkit-scrollbar {
  width: 8px;
}

.dropdown-scrollable::-webkit-scrollbar-track {
  background: rgba(240, 240, 240, 0.3);
  border-radius: 10px;
}

.dropdown-scrollable::-webkit-scrollbar-thumb {
  background: var(--color-scroll-thumb);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  transition: all var(--transition-fast);
}

.dropdown-scrollable::-webkit-scrollbar-thumb:hover {
  background: rgba(60, 135, 200, 0.5);
  border-color: rgba(255, 255, 255, 0.7);
}

/* Dark Mode - Dropdown Scrollable */
.dark-mode .dropdown-scrollable::-webkit-scrollbar-track {
  background: rgba(20, 27, 45, 0.3);
}

.dark-mode .dropdown-scrollable::-webkit-scrollbar-thumb {
  background: rgba(81, 104, 212, 0.4);
  border-color: rgba(71, 85, 105, 0.3);
}

.dark-mode .dropdown-scrollable::-webkit-scrollbar-thumb:hover {
  background: rgba(81, 104, 212, 0.6);
  border-color: rgba(71, 85, 105, 0.5);
}

/* Tab-pane com scroll - substitui inline styles */
.tab-pane-scrollable {
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.tab-pane-scrollable::-webkit-scrollbar {
  width: 8px;
}

.tab-pane-scrollable::-webkit-scrollbar-track {
  background: rgba(240, 240, 240, 0.3);
  border-radius: 10px;
}

.tab-pane-scrollable::-webkit-scrollbar-thumb {
  background: var(--color-scroll-thumb);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  transition: all var(--transition-fast);
}

.tab-pane-scrollable::-webkit-scrollbar-thumb:hover {
  background: rgba(60, 135, 200, 0.5);
  border-color: rgba(255, 255, 255, 0.7);
}

/* Dark Mode - Tab-pane Scrollable */
.dark-mode .tab-pane-scrollable::-webkit-scrollbar-track {
  background: rgba(20, 27, 45, 0.3);
}

.dark-mode .tab-pane-scrollable::-webkit-scrollbar-thumb {
  background: rgba(81, 104, 212, 0.4);
  border-color: rgba(71, 85, 105, 0.3);
}

.dark-mode .tab-pane-scrollable::-webkit-scrollbar-thumb:hover {
  background: rgba(81, 104, 212, 0.6);
  border-color: rgba(71, 85, 105, 0.5);
}

/* Container genérico scrollable */
.container-scrollable {
  overflow-y: auto;
  overflow-x: hidden;
}

.container-scrollable::-webkit-scrollbar {
  width: 8px;
}

.container-scrollable::-webkit-scrollbar-track {
  background: rgba(240, 240, 240, 0.3);
  border-radius: 10px;
}

.container-scrollable::-webkit-scrollbar-thumb {
  background: var(--color-scroll-thumb);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  transition: all var(--transition-fast);
}

.container-scrollable::-webkit-scrollbar-thumb:hover {
  background: rgba(60, 135, 200, 0.5);
  border-color: rgba(255, 255, 255, 0.7);
}

/* Dark Mode - Container Scrollable */
.dark-mode .container-scrollable::-webkit-scrollbar-track {
  background: rgba(20, 27, 45, 0.3);
}

.dark-mode .container-scrollable::-webkit-scrollbar-thumb {
  background: rgba(81, 104, 212, 0.4);
  border-color: rgba(71, 85, 105, 0.3);
}

.dark-mode .container-scrollable::-webkit-scrollbar-thumb:hover {
  background: rgba(81, 104, 212, 0.6);
  border-color: rgba(71, 85, 105, 0.5);
}

/* Bootstrap Select - Correção de scroll horizontal e estilização */
.bootstrap-select .dropdown-menu {
  overflow-x: hidden !important;
}

.bootstrap-select .dropdown-menu .inner {
  overflow-x: hidden !important;
}

.bootstrap-select .dropdown-menu::-webkit-scrollbar {
  width: 8px;
}

.bootstrap-select .dropdown-menu::-webkit-scrollbar-track {
  background: rgba(240, 240, 240, 0.3);
  border-radius: 10px;
}

.bootstrap-select .dropdown-menu::-webkit-scrollbar-thumb {
  background: var(--color-scroll-thumb);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  transition: all var(--transition-fast);
}

.bootstrap-select .dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(60, 135, 200, 0.5);
  border-color: rgba(255, 255, 255, 0.7);
}

/* Dark Mode - Bootstrap Select */
.dark-mode .bootstrap-select .dropdown-menu::-webkit-scrollbar-track {
  background: rgba(20, 27, 45, 0.3);
}

.dark-mode .bootstrap-select .dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(81, 104, 212, 0.4);
  border-color: rgba(71, 85, 105, 0.3);
}

.dark-mode .bootstrap-select .dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(81, 104, 212, 0.6);
  border-color: rgba(71, 85, 105, 0.5);
}

/* ---------- Sidepanel ---------- */
.sidepanel {
  height: 100vh;
  width: 0;
  position: fixed;
  z-index: var(--z-sidebar-notifications);
  top: 0;
  left: 0;
  background: #FFF;
  overflow-x: hidden;
  transition: .5s;
  box-shadow: 0 0 10px rgba(50, 50, 50, .10);
  border: 1px solid #fff;
}

.sidepanel iframe {
  max-width: 100% !important;
}

.sidepanel iframe,
.sidepanel object,
.sidepanel embed {
  width: 100%;
}

/* ---------- Avatares / Imagens ---------- */
.avatar-circle-mini {
  border-radius: 50%;
  height: 30px;
  width: 30px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #479DD1;
}

.image-cropper {
  border: 1px solid #f0f0f0;
  width: 40px;
  height: 40px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

.image-cropper img {
  width: 40px;
  height: 40px;
  object-fit: cover;
}

/* Slider / Carrossel (stories) */
.scrolling-wrapper {
  overflow-x: auto;
  padding: 30px 0 70px;
}

.image {
  position: relative;
  overflow: hidden;
  padding-bottom: 100%;
}

.image img {
  position: absolute;
}

.borda-gradiente {
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(90deg, rgba(38, 52, 140, 1) 0%, rgba(59, 162, 220, 1) 100%);
  aspect-ratio: 1/1;
}

.owl-carousel .owl-stage {
  display: flex;
}

.article-items {
  display: flex;
  flex: 1 0 auto;
  height: 100%;
}

.aticle-box {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ---------- Tipografia auxiliares ---------- */
.text-muted {
  font-size: 14px;
  line-height: 14px;
  font-family: 'Nunito Sans', sans-serif;
  margin-top: 4px;
}

/* Dark Mode - Text Utilities */
.dark-mode .text-muted {
  color: var(--color-muted) !important;
}

.atalhos a {
  font-size: 12px;
}

/* ---------- Summernote (conteúdo editor) ---------- */
.note-editor table {
  border-collapse: collapse;
  width: 100%;
}

.note-editor table td,
.note-editor table th {
  border: 1px solid #ccc;
  padding: 8px;
}

.note-editor table th {
  background: #f4f4f4;
}

/* Editor Jodit (templates) — aproxima o visual do Word */
.jodit-container {
  width: 100% !important;
}

.jodit-wysiwyg {
  font-family: Calibri, "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  padding: 1rem 1.25rem !important;
}

.jodit-wysiwyg p {
  margin: 0 0 10px;
}

.jodit-wysiwyg p.text-justify {
  text-align: justify;
  text-justify: inter-word;
}

.jodit-wysiwyg p.text-center {
  text-align: center;
}

.jodit-wysiwyg p.text-right {
  text-align: right;
}

.jodit-wysiwyg ol,
.jodit-wysiwyg ul {
  padding-left: 30px;
}

.jodit-wysiwyg h1,
.jodit-wysiwyg h2 {
  text-align: center;
  font-weight: 700;
}

/* ---------- Pesquisa / Questionários (opções) ---------- */
.opcao-multipla {
  cursor: pointer;
  border: 2px solid var(--color-border-light);
  border-radius: .25rem;
  background: #fff;
  padding: 5px;
  display: flex;
  align-items: center;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  min-height: 56px;
}

.opcao-multipla:hover {
  border-color: #007bff;
}

.opcao-multipla.selected {
  border-color: var(--color-success) !important;
  background: #e9fbe8;
  box-shadow: 0 0 0 2px #28a74533;
}

.radio-multipla {
  display: none;
}

.checkmark {
  width: 18px;
  height: 18px;
  border: 2px solid #adb5bd;
  border-radius: 50%;
  background: #fff;
  position: relative;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  flex-shrink: 0;
}

.opcao-multipla.selected .checkmark {
  border-color: var(--color-success);
  background: var(--color-success);
}

.checkmark:after {
  content: '';
  display: none;
  position: absolute;
  left: 7px;
  top: 2px;
  width: 8px;
  height: 16px;
  border: solid #fff;
  border-width: 0 4px 4px 0;
  transform: rotate(45deg);
}

.opcao-multipla.selected .checkmark:after {
  display: block;
}

.resposta-texto {
  font-weight: 500;
  font-size: 1.1rem;
  color: #343a40;
  margin-right: 10px;
  line-height: 1.2;
}

.imagem-opcao {
  flex-shrink: 0;
  margin-left: 10px;
  display: flex;
  align-items: center;
}

.imagem-opcao img {
  max-width: 55px;
  max-height: 55px;
  border-radius: .25rem;
  border: 1px solid var(--color-border-light);
}

/* ---------- Ajuda / Validação ---------- */
.help-block {
  height: 9px;
}

.with-errors {
  color: var(--color-danger);
  font-size: 12px;
  font-weight: 300;
}

/* ---------- Cores utilitárias adicionais ---------- */
.bg-light {
  background-color: var(--color-bg-light) !important;
}

/* ---------- Configurar Notificações (centralizado a partir de remoção de CSS inline) ---------- */
.notificacoes-card .custom-control {
  margin-bottom: .65rem;
}

.notificacoes-card .custom-control:last-of-type {
  margin-bottom: 0;
}

.notificacoes-card small.helper {
  display: block;
  margin-top: .35rem;
  color: #6c757d;
}

.notificacoes-card fieldset {
  border: 1px solid #e9ecef;
  padding: 1rem 1.25rem;
  border-radius: .5rem;
  margin-bottom: 1.25rem;
  background: #fcfcfc;
}

.notificacoes-card fieldset legend {
  font-size: 1rem;
  font-weight: 600;
  width: auto;
  padding: 0 .5rem;
}

/* ---------- Configurar Convite (migrado de inline) ---------- */
.min-w-240 {
  min-width: 240px;
}

.lista-temas {
  gap: 10px;
  overflow-x: auto;
}

.lista-temas .theme-card {
  transition: box-shadow .2s, transform .15s;
  margin-right: 8px;
  margin-bottom: 8px;
}

.convite-preview-frame {
  width: 100%;
  height: 900px;
}

.orcamento-preview-frame {
  flex: 1 1 auto !important;
}

/* .d-none já vem do Bootstrap junto com os breakpoints (.d-sm-none,
   .d-lg-inline etc). Redefinir aqui sem as media queries quebrava os
   utilitários responsivos — span do navbar nunca aparecia mesmo em xl+. */

.hidden {
  display: none;
}

/* Espaçamento consistente entre botões agrupados substituindo style="gap" inline */
.btn-group-spacing>* {
  margin-right: 10px;
  margin-bottom: 8px;
}

.btn-group-spacing>*:last-child {
  margin-right: 0;
}

/* Tabs compactas horizontais com rolagem se necessário */
.nav-tabs-tight .nav-link {
  padding: 6px 10px;
  font-size: 13px;
}

.nav-tabs-scroll {
  overflow-x: auto;
  flex-wrap: nowrap;
}

.nav-tabs-scroll .nav-item {
  flex: 0 0 auto;
}

/* Dark Mode - Configurar Orçamento/Convite */
.dark-mode .lista-temas {
  scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
}

.dark-mode .theme-card {
  background-color: rgba(30, 41, 59, 0.5) !important;
  border-color: rgba(71, 85, 105, 0.3) !important;
}

.dark-mode .theme-card:hover {
  background-color: rgba(30, 41, 59, 0.7) !important;
  border-color: rgba(100, 116, 139, 0.5) !important;
}

/* WhatsApp configuração - overview e cartões */
.whatsapp-overview .info-list li {
  display: inline-block;
  margin-right: 12px;
  position: relative;
  padding-left: 0;
}

.whatsapp-overview .info-list li:last-child {
  margin-right: 0;
}

.whatsapp-cards .info-list {
  list-style: disc inside;
  padding-left: 0;
}

.whatsapp-cards .info-list li {
  margin-bottom: 4px;
}

/* Notificações Templates ajustes */
.notificacao-preview-frame {
  width: 100%;
  height: 60vh;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.var-token {
  cursor: pointer;
}

.alert-badges-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
}

/* ---------- Efeitos Extras Liquid Glass 2025 ---------- */

/* Badges modernos - efeitos adicionais */
.badge {
  /*backdrop-filter: blur(8px);*/
  -webkit-backdrop-filter: blur(8px);
  letter-spacing: 0.3px;
}

.badge-primary {
  background: rgba(60, 135, 200, 0.85);
  border: 1px solid rgba(60, 135, 200, 0.3);
}

.badge-success {
  background: rgba(0, 212, 170, 0.85);
  border: 1px solid rgba(0, 212, 170, 0.3);
}

.badge-danger {
  background: rgba(255, 77, 109, 0.85);
  border: 1px solid rgba(255, 77, 109, 0.3);
}

.badge-warning {
  background: rgba(245, 158, 11, 0.85);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #ffffff;
}

.badge-info {
  background: rgba(59, 130, 246, 0.85);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.badge-secondary {
  background: rgba(100, 116, 139, 0.85);
  border: 1px solid rgba(100, 116, 139, 0.3);
}

.badge-light {
  background: rgba(241, 245, 249, 0.85);
  border: 1px solid rgba(226, 232, 240, 0.3);
  color: #1e293b;
}

.badge-dark {
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(51, 65, 85, 0.3);
}

/* Dark Mode - Badge Variants */
.dark-mode .badge-primary {
  background: rgba(81, 104, 212, 0.9);
  border-color: rgba(129, 153, 255, 0.4);
  color: #ffffff;
}

.dark-mode .badge-success {
  background: rgba(16, 185, 129, 0.9);
  border-color: rgba(52, 211, 153, 0.4);
  color: #ffffff;
}

.dark-mode .badge-danger {
  background: rgba(239, 68, 68, 0.9);
  border-color: rgba(252, 165, 165, 0.4);
  color: #ffffff;
}

.dark-mode .badge-warning {
  background: rgba(245, 158, 11, 0.9);
  border-color: rgba(251, 191, 36, 0.4);
  color: #ffffff;
}

.dark-mode .badge-info {
  background: rgba(59, 130, 246, 0.9);
  border-color: rgba(96, 165, 250, 0.4);
  color: #ffffff;
}

.dark-mode .badge-secondary {
  background: rgba(100, 116, 139, 0.9);
  border-color: rgba(148, 163, 184, 0.4);
  color: #ffffff;
}

.dark-mode .badge-light {
  background: rgba(71, 85, 105, 0.9);
  border-color: rgba(100, 116, 139, 0.4);
  color: #ffffff;
}

.dark-mode .badge-dark {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(30, 41, 59, 0.5);
  color: rgba(226, 232, 240, 0.95);
}

/* Tables com glass effect */
.table {
  background: rgba(255, 255, 255, 0.5);
}

.table thead th {
  background: rgba(60, 135, 200, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 2px solid rgba(60, 135, 200, 0.3);
  font-weight: 600;
  color: var(--color-primary);
}

.table tbody tr {
  transition: all var(--transition-fast);
}

.table tbody tr:hover:not(.table-success):not(.table-danger):not(.table-warning):not(.table-info):not(.table-primary):not(.table-secondary):not(.table-purple) {
  background: rgba(60, 135, 200, 0.08);
}

/* Dark Mode - Tables */
.dark-mode .table {
  background: rgba(20, 27, 45, 0.5);
  color: var(--color-text);
}

.dark-mode .table thead th {
  background: rgba(81, 104, 212, 0.2);
  border-bottom-color: rgba(81, 104, 212, 0.4);
  color: var(--color-primary-light);
}

.dark-mode .table tbody tr {
  border-color: rgba(71, 85, 105, 0.3);
}

.dark-mode .table tbody tr:hover:not(.table-success):not(.table-danger):not(.table-warning):not(.table-info):not(.table-primary):not(.table-secondary):not(.table-purple) {
  background: rgba(81, 104, 212, 0.15);
}

.dark-mode .table td,
.dark-mode .table th {
  border-color: rgba(71, 85, 105, 0.3);
  color: var(--color-text) !important;
}

/* Garante legibilidade em DataTables no dark mode */
.dark-mode .dataTables_wrapper .table td,
.dark-mode .dataTables_wrapper .table th,
.dark-mode table.dataTable td,
.dark-mode table.dataTable th {
  color: var(--color-text) !important;
}

/* ================= Table Contextual Classes ================= */
/* Classes contextuais do Bootstrap com cores vibrantes para light e dark mode */

/* Table Success - Verde */
.table-success,
.table tbody tr.table-success {
  background-color: rgba(72, 187, 120, 0.2) !important;
  color: rgba(22, 101, 52, 1) !important;
}

.table-success td,
.table-success th {
  color: rgba(22, 101, 52, 1) !important;
}

.table tbody tr.table-success:hover {
  background-color: rgba(72, 187, 120, 0.3) !important;
}

.dark-mode .table-success,
.dark-mode .table tbody tr.table-success {
  background-color: rgba(34, 197, 94, 0.5) !important;
  color: rgba(255, 255, 255, 1) !important;
  border-color: rgba(34, 197, 94, 0.6) !important;
}

.dark-mode .table-success td,
.dark-mode .table-success th {
  border-color: rgba(34, 197, 94, 0.6) !important;
  color: rgba(255, 255, 255, 1) !important;
}

.dark-mode .table-success a,
.dark-mode .table-success td a,
.dark-mode .table-success th a {
  color: rgba(255, 255, 255, 1) !important;
}

.dark-mode .table tbody tr.table-success:hover {
  background-color: rgba(34, 197, 94, 0.6) !important;
}

/* Table Danger - Vermelho */
.table-danger,
.table tbody tr.table-danger {
  background-color: rgba(239, 68, 68, 0.2) !important;
  color: rgba(127, 29, 29, 1) !important;
}

.table-danger td,
.table-danger th {
  color: rgba(127, 29, 29, 1) !important;
}

.table tbody tr.table-danger:hover {
  background-color: rgba(239, 68, 68, 0.3) !important;
}

.dark-mode .table-danger,
.dark-mode .table tbody tr.table-danger {
  background-color: rgba(220, 38, 38, 0.5) !important;
  color: rgba(255, 255, 255, 1) !important;
  border-color: rgba(220, 38, 38, 0.6) !important;
}

.dark-mode .table-danger td,
.dark-mode .table-danger th {
  border-color: rgba(220, 38, 38, 0.6) !important;
  color: rgba(255, 255, 255, 1) !important;
}

.dark-mode .table-danger a,
.dark-mode .table-danger td a,
.dark-mode .table-danger th a {
  color: rgba(255, 255, 255, 1) !important;
}

.dark-mode .table tbody tr.table-danger:hover {
  background-color: rgba(220, 38, 38, 0.6) !important;
}

/* Table Warning - Amarelo/Laranja */
.table-warning,
.table tbody tr.table-warning {
  background-color: rgba(251, 191, 36, 0.2) !important;
  color: rgba(120, 53, 15, 1) !important;
}

.table-warning td,
.table-warning th {
  color: rgba(120, 53, 15, 1) !important;
}

.table tbody tr.table-warning:hover {
  background-color: rgba(251, 191, 36, 0.3) !important;
}

.dark-mode .table-warning,
.dark-mode .table tbody tr.table-warning {
  background-color: rgba(234, 179, 8, 0.5) !important;
  color: rgba(255, 255, 255, 1) !important;
  border-color: rgba(234, 179, 8, 0.6) !important;
}

.dark-mode .table-warning td,
.dark-mode .table-warning th {
  border-color: rgba(234, 179, 8, 0.6) !important;
  color: rgba(255, 255, 255, 1) !important;
}

.dark-mode .table-warning a,
.dark-mode .table-warning td a,
.dark-mode .table-warning th a {
  color: rgba(255, 255, 255, 1) !important;
}

.dark-mode .table tbody tr.table-warning:hover {
  background-color: rgba(234, 179, 8, 0.6) !important;
}

/* Table Info - Azul Claro */
.table-info,
.table tbody tr.table-info {
  background-color: rgba(59, 130, 246, 0.2) !important;
  color: rgba(30, 64, 175, 1) !important;
}

.table-info td,
.table-info th {
  color: rgba(30, 64, 175, 1) !important;
}

.table tbody tr.table-info:hover {
  background-color: rgba(59, 130, 246, 0.3) !important;
}

.dark-mode .table-info,
.dark-mode .table tbody tr.table-info {
  background-color: rgba(37, 99, 235, 0.22) !important;
  color: rgba(226, 232, 240, 0.95) !important;
  border-color: rgba(37, 99, 235, 0.35) !important;
}

.dark-mode .table-info td,
.dark-mode .table-info th {
  border-color: rgba(37, 99, 235, 0.35) !important;
  color: rgba(226, 232, 240, 0.95) !important;
}

.dark-mode .table-info a,
.dark-mode .table-info td a,
.dark-mode .table-info th a {
  color: rgba(191, 210, 255, 1) !important;
}

.dark-mode .table tbody tr.table-info:hover {
  background-color: rgba(37, 99, 235, 0.32) !important;
}

/* Table Primary - Azul Principal */
.table-primary,
.table tbody tr.table-primary {
  background-color: rgba(60, 135, 200, 0.2) !important;
  color: rgba(30, 64, 175, 1) !important;
}

.table-primary td,
.table-primary th {
  color: rgba(30, 64, 175, 1) !important;
}

.table tbody tr.table-primary:hover {
  background-color: rgba(60, 135, 200, 0.3) !important;
}

.dark-mode .table-primary,
.dark-mode .table tbody tr.table-primary {
  background-color: rgba(81, 104, 212, 0.5) !important;
  color: rgba(255, 255, 255, 1) !important;
  border-color: rgba(81, 104, 212, 0.6) !important;
}

.dark-mode .table-primary td,
.dark-mode .table-primary th {
  border-color: rgba(81, 104, 212, 0.6) !important;
  color: rgba(255, 255, 255, 1) !important;
}

.dark-mode .table-primary a,
.dark-mode .table-primary td a,
.dark-mode .table-primary th a {
  color: rgba(255, 255, 255, 1) !important;
}

.dark-mode .table tbody tr.table-primary:hover {
  background-color: rgba(81, 104, 212, 0.6) !important;
}

/* Table Secondary - Cinza */
.table-secondary,
.table tbody tr.table-secondary {
  background-color: rgba(107, 114, 128, 0.2) !important;
  color: rgba(31, 41, 55, 1) !important;
}

.table-secondary td,
.table-secondary th {
  color: rgba(31, 41, 55, 1) !important;
}

.table tbody tr.table-secondary:hover {
  background-color: rgba(107, 114, 128, 0.3) !important;
}

.dark-mode .table-secondary,
.dark-mode .table tbody tr.table-secondary {
  background-color: rgba(107, 114, 128, 0.5) !important;
  color: rgba(255, 255, 255, 1) !important;
  border-color: rgba(107, 114, 128, 0.6) !important;
}

.dark-mode .table-secondary td,
.dark-mode .table-secondary th {
  border-color: rgba(107, 114, 128, 0.6) !important;
  color: rgba(255, 255, 255, 1) !important;
}

.dark-mode .table-secondary a,
.dark-mode .table-secondary td a,
.dark-mode .table-secondary th a {
  color: rgba(255, 255, 255, 1) !important;
}

.dark-mode .table tbody tr.table-secondary:hover {
  background-color: rgba(107, 114, 128, 0.6) !important;
}

/* Table Purple - Unidade Pagadora */
.table-purple,
td.table-purple,
th.table-purple,
.table tbody tr.table-purple,
.table tbody tr td.table-purple,
.dataTables_wrapper td.table-purple,
table.dataTable td.table-purple {
  background-color: rgba(147, 51, 234, 0.35) !important;
  color: rgba(88, 28, 135, 1) !important;
}

.table-purple td,
.table-purple th {
  color: rgba(88, 28, 135, 1) !important;
  background-color: rgba(147, 51, 234, 0.35) !important;
}

.table tbody tr.table-purple:hover,
table tbody tr td.table-purple:hover {
  background-color: rgba(147, 51, 234, 0.45) !important;
}

.dark-mode .table-purple,
.dark-mode td.table-purple,
.dark-mode th.table-purple,
.dark-mode .table tbody tr.table-purple,
.dark-mode .table tbody tr td.table-purple,
.dark-mode .dataTables_wrapper td.table-purple {
  background-color: rgba(147, 51, 234, 0.5) !important;
  color: rgba(255, 255, 255, 1) !important;
  border-color: rgba(147, 51, 234, 0.6) !important;
}

.dark-mode .table-purple td,
.dark-mode .table-purple th {
  border-color: rgba(147, 51, 234, 0.6) !important;
  color: rgba(255, 255, 255, 1) !important;
  background-color: rgba(147, 51, 234, 0.5) !important;
}

.dark-mode .table-purple a,
.dark-mode .table-purple td a,
.dark-mode .table-purple th a {
  color: rgba(255, 255, 255, 1) !important;
}

.dark-mode .table tbody tr.table-purple:hover,
.dark-mode table tbody tr td.table-purple:hover {
  background-color: rgba(147, 51, 234, 0.6) !important;
}

/* Table Primary - Azul Principal */
.table-primary {
  background-color: rgba(24, 51, 143, 0.15) !important;
  color: rgba(81, 104, 212, 1) !important;
}

.dark-mode .table-primary {
  background-color: rgba(67, 56, 202, 0.35) !important;
  color: rgba(165, 180, 252, 1) !important;
  border-color: rgba(67, 56, 202, 0.5) !important;
}

.dark-mode .table-primary td,
.dark-mode .table-primary th {
  border-color: rgba(67, 56, 202, 0.5) !important;
  color: rgba(165, 180, 252, 1) !important;
}

/* Table Secondary - Cinza */
.table-secondary {
  background-color: rgba(107, 114, 128, 0.15) !important;
  color: rgba(156, 163, 175, 1) !important;
}

.dark-mode .table-secondary {
  background-color: rgba(107, 114, 128, 0.25) !important;
  color: rgba(209, 213, 219, 1) !important;
  border-color: rgba(107, 114, 128, 0.3) !important;
}

.dark-mode .table-secondary td,
.dark-mode .table-secondary th {
  border-color: rgba(107, 114, 128, 0.3) !important;
}

/* Table Light - Claro */
.table-light {
  background-color: rgba(243, 244, 246, 0.5) !important;
  color: rgba(75, 85, 99, 1) !important;
}

.dark-mode .table-light {
  background-color: rgba(55, 65, 81, 0.3) !important;
  color: rgba(209, 213, 219, 1) !important;
  border-color: rgba(75, 85, 99, 0.3) !important;
}

.dark-mode .table-light td,
.dark-mode .table-light th {
  border-color: rgba(75, 85, 99, 0.3) !important;
}

/* Table Dark - Escuro */
.table-dark {
  background-color: rgba(31, 41, 55, 0.8) !important;
  color: rgba(229, 231, 235, 1) !important;
}

.dark-mode .table-dark {
  background-color: rgba(17, 24, 39, 0.8) !important;
  color: rgba(243, 244, 246, 1) !important;
  border-color: rgba(55, 65, 81, 0.4) !important;
}

.dark-mode .table-dark td,
.dark-mode .table-dark th {
  border-color: rgba(55, 65, 81, 0.4) !important;
}

/* Table Active - Linha ativa */
.table-active {
  background-color: rgba(24, 51, 143, 0.1) !important;
}

.dark-mode .table-active {
  background-color: rgba(81, 104, 212, 0.2) !important;
  color: rgba(226, 232, 240, 1) !important;
}

/* Hover effects melhorados para contextos */
.dark-mode .table-hover tbody tr.table-success:hover,
.dark-mode .table-hover tbody tr.table-danger:hover,
.dark-mode .table-hover tbody tr.table-warning:hover,
.dark-mode .table-hover tbody tr.table-info:hover,
.dark-mode .table-hover tbody tr.table-primary:hover,
.dark-mode .table-hover tbody tr.table-secondary:hover,
.dark-mode .table-hover tbody tr.table-purple:hover {
  filter: brightness(1.2);
  transition: all 0.2s ease;
}

/* ================= Background Classes em Tabelas - Dark Mode ================= */
/* Classes bg-* quando usadas em células de tabela */

.dark-mode table td.bg-success,
.dark-mode table th.bg-success {
  background-color: rgba(72, 187, 120, 0.3) !important;
  color: rgba(134, 239, 172, 1) !important;
}

.dark-mode table td.bg-danger,
.dark-mode table th.bg-danger {
  background-color: rgba(239, 68, 68, 0.3) !important;
  color: rgba(252, 165, 165, 1) !important;
}

.dark-mode table td.bg-warning,
.dark-mode table th.bg-warning {
  background-color: rgba(251, 191, 36, 0.3) !important;
  color: rgba(253, 224, 71, 1) !important;
}

.dark-mode table td.bg-info,
.dark-mode table th.bg-info {
  background-color: rgba(59, 130, 246, 0.3) !important;
  color: rgba(147, 197, 253, 1) !important;
}

.dark-mode table td.bg-primary,
.dark-mode table th.bg-primary {
  background-color: rgba(81, 104, 212, 0.3) !important;
  color: rgba(129, 153, 255, 1) !important;
}

.dark-mode table td.bg-secondary,
.dark-mode table th.bg-secondary {
  background-color: rgba(107, 114, 128, 0.3) !important;
  color: rgba(209, 213, 219, 1) !important;
}

.dark-mode table td.bg-light,
.dark-mode table th.bg-light {
  background-color: rgba(55, 65, 81, 0.4) !important;
  color: rgba(229, 231, 235, 1) !important;
}

.dark-mode table td.bg-dark,
.dark-mode table th.bg-dark {
  background-color: rgba(17, 24, 39, 0.9) !important;
  color: rgba(243, 244, 246, 1) !important;
}

/* Text color adjustments para melhor legibilidade */
.dark-mode table .text-success {
  color: rgba(134, 239, 172, 1) !important;
}

.dark-mode table .text-danger {
  color: rgba(252, 165, 165, 1) !important;
}

.dark-mode table .text-warning {
  color: rgba(253, 224, 71, 1) !important;
}

.dark-mode table .text-info {
  color: rgba(147, 197, 253, 1) !important;
}

.dark-mode table .text-primary {
  color: rgba(129, 153, 255, 1) !important;
}

.dark-mode table .text-muted {
  color: rgba(156, 163, 175, 1) !important;
}

/* ================= Background Classes em Cards - Dark Mode ================= */
/* Classes bg-* quando usadas em cards, card-header ou card-footer */

.dark-mode .card.bg-primary,
.dark-mode .card-header.bg-primary,
.dark-mode .card-footer.bg-primary {
  background-color: rgba(81, 104, 212, 0.25) !important;
  border-color: rgba(81, 104, 212, 0.4) !important;
  color: rgba(129, 153, 255, 1) !important;
}

.dark-mode .card.bg-primary .card-title,
.dark-mode .card-header.bg-primary h1,
.dark-mode .card-header.bg-primary h2,
.dark-mode .card-header.bg-primary h3,
.dark-mode .card-header.bg-primary h4,
.dark-mode .card-header.bg-primary h5,
.dark-mode .card-header.bg-primary h6 {
  color: rgba(147, 197, 253, 1) !important;
}

.dark-mode .card.bg-secondary,
.dark-mode .card-header.bg-secondary,
.dark-mode .card-footer.bg-secondary {
  background-color: rgba(107, 114, 128, 0.25) !important;
  border-color: rgba(107, 114, 128, 0.4) !important;
  color: rgba(209, 213, 219, 1) !important;
}

.dark-mode .card.bg-success,
.dark-mode .card-header.bg-success,
.dark-mode .card-footer.bg-success {
  background-color: rgba(72, 187, 120, 0.25) !important;
  border-color: rgba(72, 187, 120, 0.4) !important;
  color: rgba(134, 239, 172, 1) !important;
}

.dark-mode .card.bg-success .card-title,
.dark-mode .card-header.bg-success h1,
.dark-mode .card-header.bg-success h2,
.dark-mode .card-header.bg-success h3,
.dark-mode .card-header.bg-success h4,
.dark-mode .card-header.bg-success h5,
.dark-mode .card-header.bg-success h6 {
  color: rgba(134, 239, 172, 1) !important;
}

.dark-mode .card.bg-danger,
.dark-mode .card-header.bg-danger,
.dark-mode .card-footer.bg-danger {
  background-color: rgba(239, 68, 68, 0.25) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: rgba(252, 165, 165, 1) !important;
}

.dark-mode .card.bg-danger .card-title,
.dark-mode .card-header.bg-danger h1,
.dark-mode .card-header.bg-danger h2,
.dark-mode .card-header.bg-danger h3,
.dark-mode .card-header.bg-danger h4,
.dark-mode .card-header.bg-danger h5,
.dark-mode .card-header.bg-danger h6 {
  color: rgba(252, 165, 165, 1) !important;
}

.dark-mode .card.bg-warning,
.dark-mode .card-header.bg-warning,
.dark-mode .card-footer.bg-warning {
  background-color: rgba(251, 191, 36, 0.25) !important;
  border-color: rgba(251, 191, 36, 0.4) !important;
  color: rgba(253, 224, 71, 1) !important;
}

.dark-mode .card.bg-warning .card-title,
.dark-mode .card-header.bg-warning h1,
.dark-mode .card-header.bg-warning h2,
.dark-mode .card-header.bg-warning h3,
.dark-mode .card-header.bg-warning h4,
.dark-mode .card-header.bg-warning h5,
.dark-mode .card-header.bg-warning h6 {
  color: rgba(253, 224, 71, 1) !important;
}

.dark-mode .card.bg-info,
.dark-mode .card-header.bg-info,
.dark-mode .card-footer.bg-info {
  background-color: rgba(59, 130, 246, 0.25) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  color: rgba(147, 197, 253, 1) !important;
}

.dark-mode .card.bg-info .card-title,
.dark-mode .card-header.bg-info h1,
.dark-mode .card-header.bg-info h2,
.dark-mode .card-header.bg-info h3,
.dark-mode .card-header.bg-info h4,
.dark-mode .card-header.bg-info h5,
.dark-mode .card-header.bg-info h6 {
  color: rgba(147, 197, 253, 1) !important;
}

.dark-mode .card.bg-light,
.dark-mode .card-header.bg-light,
.dark-mode .card-footer.bg-light {
  background-color: rgba(55, 65, 81, 0.35) !important;
  border-color: rgba(75, 85, 99, 0.5) !important;
  color: rgba(229, 231, 235, 1) !important;
}

.dark-mode .card.bg-dark,
.dark-mode .card-header.bg-dark,
.dark-mode .card-footer.bg-dark {
  background-color: rgba(17, 24, 39, 0.8) !important;
  border-color: rgba(31, 41, 55, 0.9) !important;
  color: rgba(243, 244, 246, 1) !important;
}

/* Melhora contraste de texto dentro de card-body em cards coloridos */
.dark-mode .card.bg-primary .card-body,
.dark-mode .card.bg-success .card-body,
.dark-mode .card.bg-danger .card-body,
.dark-mode .card.bg-warning .card-body,
.dark-mode .card.bg-info .card-body {
  background-color: rgba(20, 27, 45, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Ajusta ícones e badges dentro de headers coloridos */
.dark-mode .card-header.bg-primary i,
.dark-mode .card-header.bg-success i,
.dark-mode .card-header.bg-danger i,
.dark-mode .card-header.bg-warning i,
.dark-mode .card-header.bg-info i {
  opacity: 0.9;
}

.dark-mode .card-header.bg-primary .badge,
.dark-mode .card-header.bg-success .badge,
.dark-mode .card-header.bg-danger .badge,
.dark-mode .card-header.bg-warning .badge,
.dark-mode .card-header.bg-info .badge {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ================= Tipografia - Dark Mode Melhorada ================= */
/* Melhora legibilidade de todos os textos no dark mode */

/* Headings com melhor contraste */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
  color: rgba(226, 232, 240, 0.98) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Texto primário mais brilhante */
.dark-mode p,
.dark-mode span:not(.badge):not(.input-group-text),
.dark-mode div:not(.card):not(.modal):not(.dropdown-menu):not(.alert) {
  color: rgba(226, 232, 240, 0.92);
}

/* Classe text-primary específica */
.dark-mode .text-primary {
  color: rgba(129, 153, 255, 0.95) !important;
}

/* Small text e subtítulos */
.dark-mode small,
.dark-mode .small {
  color: rgba(203, 213, 225, 0.85);
}

/* Lead text (texto de destaque) */
.dark-mode .lead {
  color: rgba(226, 232, 240, 0.95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Display headings (títulos grandes) */
.dark-mode .display-1,
.dark-mode .display-2,
.dark-mode .display-3,
.dark-mode .display-4 {
  color: rgba(241, 245, 249, 1) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Text muted melhorado */
.dark-mode .text-muted {
  color: rgba(148, 163, 184, 0.9) !important;
}

/* Text body */
.dark-mode .text-body {
  color: rgba(226, 232, 240, 0.92) !important;
}

/* Text white */
.dark-mode .text-white {
  color: rgba(248, 250, 252, 1) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Text dark (inverte para light) */
.dark-mode .text-dark {
  color: rgba(226, 232, 240, 0.92) !important;
}

/* Text light (mantém como está) */
.dark-mode .text-light {
  color: rgba(241, 245, 249, 0.95) !important;
}

/* Links melhorados */
.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: rgba(129, 153, 255, 0.95);
  text-decoration: none;
  transition: all 0.3s ease;
}

.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
  color: rgba(165, 183, 255, 1);
  text-shadow: 0 0 8px rgba(129, 153, 255, 0.4);
}

/* Card titles */
.dark-mode .card-title {
  color: rgba(226, 232, 240, 0.98) !important;
}

/* Card text */
.dark-mode .card-text {
  color: rgba(203, 213, 225, 0.9);
}

/* Card subtitle */
.dark-mode .card-subtitle {
  color: rgba(148, 163, 184, 0.9);
}

/* Blockquote */
.dark-mode blockquote {
  color: rgba(203, 213, 225, 0.9);
  border-left-color: rgba(129, 153, 255, 0.5);
}

/* Code e pre */
.dark-mode code {
  color: rgba(251, 191, 36, 1);
  background: rgba(17, 24, 39, 0.8);
}

.dark-mode pre {
  color: rgba(226, 232, 240, 0.95);
  background: rgba(17, 24, 39, 0.9);
  border-color: rgba(71, 85, 105, 0.4);
}

/* Lista de descrições */
.dark-mode dt {
  color: rgba(226, 232, 240, 0.95);
}

.dark-mode dd {
  color: rgba(203, 213, 225, 0.9);
}

/* Mark/highlight */
.dark-mode mark,
.dark-mode .mark {
  background-color: rgba(251, 191, 36, 0.3);
  color: rgba(253, 224, 71, 1);
  padding: 2px 4px;
  border-radius: 3px;
}

/* Labels de formulário */
.dark-mode label {
  color: rgba(226, 232, 240, 0.95) !important;
  font-weight: 500;
}

/* Legends de fieldset */
.dark-mode legend {
  color: rgba(226, 232, 240, 0.98);
}

/* Help text */
.dark-mode .form-text,
.dark-mode .help-block {
  color: rgba(148, 163, 184, 0.9);
}

/* Invalid/Valid feedback */
.dark-mode .invalid-feedback,
.dark-mode .is-invalid~.invalid-feedback {
  color: rgba(252, 165, 165, 1);
}

.dark-mode .valid-feedback,
.dark-mode .is-valid~.valid-feedback {
  color: rgba(134, 239, 172, 1);
}

/* Placeholder mais visível */
.dark-mode ::placeholder {
  color: rgba(148, 163, 184, 0.6) !important;
  opacity: 1;
}

.dark-mode ::-webkit-input-placeholder {
  color: rgba(148, 163, 184, 0.6) !important;
}

.dark-mode ::-moz-placeholder {
  color: rgba(148, 163, 184, 0.6) !important;
}

/* Navbar text */
.dark-mode .navbar-text {
  color: rgba(226, 232, 240, 0.9);
}

/* Breadcrumb */
.dark-mode .breadcrumb-item {
  color: rgba(203, 213, 225, 0.9);
}

.dark-mode .breadcrumb-item.active {
  color: rgba(148, 163, 184, 0.9);
}

.dark-mode .breadcrumb-item+.breadcrumb-item::before {
  color: rgba(148, 163, 184, 0.7);
}

/* Pagination */
.dark-mode .page-link {
  color: rgba(129, 153, 255, 0.95);
  background-color: rgba(30, 41, 59, 0.8);
  border-color: rgba(71, 85, 105, 0.4);
}

.dark-mode .page-link:hover {
  color: rgba(165, 183, 255, 1);
  background-color: rgba(45, 56, 79, 0.9);
  border-color: rgba(129, 153, 255, 0.5);
}

.dark-mode .page-item.active .page-link {
  background-color: rgba(81, 104, 212, 0.9);
  border-color: rgba(81, 104, 212, 0.9);
  color: rgba(255, 255, 255, 1);
}

.dark-mode .page-item.disabled .page-link {
  color: rgba(100, 116, 139, 0.6);
  background-color: rgba(30, 41, 59, 0.5);
  border-color: rgba(71, 85, 105, 0.3);
}

/* =============================
   DataTables - Paginação
   ============================= */

/* Botões de paginação do DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 6px 12px !important;
  margin: 0 2px !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-sm) !important;
  background: rgba(255, 255, 255, 0.7) !important;
  color: var(--color-primary) !important;
  transition: all var(--transition-fast) !important;
  font-weight: 500;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(60, 135, 200, 0.12) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(60, 135, 200, 0.15) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(60, 135, 200, 0.25) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(60, 135, 200, 0.35) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  background: rgba(245, 245, 245, 0.5) !important;
  border-color: rgba(200, 200, 200, 0.3) !important;
  color: rgba(150, 150, 150, 0.6) !important;
  cursor: not-allowed !important;
  opacity: 0.5;
  transform: none !important;
  box-shadow: none !important;
}

/* Container de paginação */
.dataTables_wrapper .dataTables_paginate {
  padding-top: 12px !important;
  margin-top: 8px !important;
}

/* Info de registros */
.dataTables_wrapper .dataTables_info {
  padding-top: 12px !important;
  color: var(--color-text-muted);
  font-size: 14px;
}

/* =============================
   DataTables - Paginação Dark Mode
   ============================= */

.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: rgba(30, 41, 59, 0.8) !important;
  border-color: rgba(71, 85, 105, 0.4) !important;
  color: rgba(129, 153, 255, 0.95) !important;
}

.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(45, 56, 79, 0.9) !important;
  border-color: rgba(129, 153, 255, 0.5) !important;
  color: rgba(165, 183, 255, 1) !important;
  box-shadow: 0 4px 12px rgba(129, 153, 255, 0.2) !important;
}

.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: linear-gradient(135deg, rgba(81, 104, 212, 0.9) 0%, rgba(129, 153, 255, 0.8) 100%) !important;
  border-color: rgba(129, 153, 255, 0.9) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(129, 153, 255, 0.3) !important;
}

.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: linear-gradient(135deg, rgba(129, 153, 255, 0.9) 0%, rgba(81, 104, 212, 0.8) 100%) !important;
  box-shadow: 0 6px 20px rgba(129, 153, 255, 0.4) !important;
}

.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  background: rgba(15, 23, 42, 0.5) !important;
  border-color: rgba(71, 85, 105, 0.2) !important;
  color: rgba(100, 116, 139, 0.4) !important;
  cursor: not-allowed !important;
  opacity: 0.4;
  transform: none !important;
  box-shadow: none !important;
}

.dark-mode .dataTables_wrapper .dataTables_info {
  color: rgba(148, 163, 184, 0.9);
}

/* ========================================
   DataTables FixedColumns - SOLUÇÃO GLOBAL
   ======================================== */

/* DARK MODE - Headers de colunas fixas (th) */
.dark-mode th.dtfc-fixed-start,
.dark-mode th.dtfc-fixed-left,
.dark-mode th.dtfc-fixed-end,
.dark-mode th.dtfc-fixed-right {
  background-color: rgba(30, 41, 59, 0.95) !important;
  background: rgba(30, 41, 59, 0.95) !important;
  border-color: var(--color-border) !important;
  color: rgba(148, 163, 184, 0.95) !important;
}

/* DARK MODE - Células do corpo (td) */
.dark-mode td.dtfc-fixed-start,
.dark-mode td.dtfc-fixed-left,
.dark-mode td.dtfc-fixed-end,
.dark-mode td.dtfc-fixed-right {
  background-color: var(--color-card-bg) !important;
  background: var(--color-card-bg) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

/* DARK MODE - Hover em colunas fixas */
.dark-mode tr:hover td.dtfc-fixed-start,
.dark-mode tr:hover td.dtfc-fixed-left,
.dark-mode tr:hover td.dtfc-fixed-end,
.dark-mode tr:hover td.dtfc-fixed-right {
  background-color: rgba(45, 56, 79, 0.6) !important;
  background: rgba(45, 56, 79, 0.6) !important;
}

/* DARK MODE - Colunas não ordenáveis */
.dark-mode th.noreorder,
.dark-mode th.dt-orderable-none {
  background-color: rgba(30, 41, 59, 0.95) !important;
  background: rgba(30, 41, 59, 0.95) !important;
  cursor: default !important;
}

/* Cursor padrão para colunas não ordenáveis (todos os modos) */
th.noreorder,
th.dt-orderable-none {
  cursor: default !important;
}

/* Input Groups com glass */
.input-group-text {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: var(--color-border-light);
  transition: all var(--transition-fast);
}

.input-group:hover .input-group-text {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(60, 135, 200, 0.4);
}

/* Select com glass effect */
.custom-select,
.form-control[type="select"],
select.form-control {
  background: rgba(255, 255, 255, 0.7) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%233C87C8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.75rem center/16px 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Sidepanel com glass */
.sidepanel {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-right: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
}

/* Toast com glass */
.toast {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
}

/* Animação suave para elementos interativos */
@keyframes float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-5px);
  }
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}

/* Shimmer effect para carregamento */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }

  100% {
    background-position: 1000px 0;
  }
}

.shimmer {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 100%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

/* Melhoria visual para status-card */
.settings-summary .status-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
}

/* Melhoria para tab-section */
.tab-section {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
}

/* Opções múltipla com glass effect */
.opcao-multipla {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid var(--color-border-light);
  transition: all var(--transition-fast);
}

.opcao-multipla:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 16px rgba(60, 135, 200, 0.15);
  transform: scale(1.02);
}

.opcao-multipla.selected {
  background: rgba(0, 212, 170, 0.15);
  border-color: var(--color-success);
  box-shadow: 0 4px 20px rgba(0, 212, 170, 0.25);
}

/* Melhoria para datatables */
div.dataTables_scrollBody {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
}

/* Efeito glass para popover */
.popover {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
}

.popover-header {
  background: rgba(60, 135, 200, 0.12);
  border-bottom: 1px solid var(--glass-border);
}

/* ---------- Fim ---------- */
/* =============================================================
   Ajustes de listas (ul > li) em cards e seções de ajuda
   Objetivo: padronizar espaçamento e bullets, evitando aparência "espremida".
   Escopo restrito para não quebrar layouts de menus / componentes externos.
   ============================================================= */
/* Exclui componentes de navegação (.nav, .nav-tabs, paginação, breadcrumb custom) */
.card-body ul:not(.list-unstyled):not(.dropdown-menu):not(.nav):not(.nav-tabs):not(.pagination):not(.pager) {
  list-style: disc inside;
  padding-left: 0;
  /* usando inside para alinhar texto */
  margin: 0 0 .85rem;
  /* espaço inferior padrão */
}

.card-body ul:not(.list-unstyled):not(.dropdown-menu):not(.nav):not(.nav-tabs):not(.pagination):not(.pager)>li {
  margin: 0 0 .40rem;
  /* respiro entre itens */
  line-height: 1.35;
  /* melhor leitura em blocos pequenos */
}

/* ================= Componentes Bootstrap - Dark Mode Complementar ================= */

/* ---------- Breadcrumb Dark Mode ---------- */
.dark-mode .breadcrumb {
  background: rgba(30, 41, 59, 0.6);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(71, 85, 105, 0.3);
}

.dark-mode .breadcrumb-item a {
  color: rgba(129, 153, 255, 0.95);
  transition: all var(--transition-fast);
}

.dark-mode .breadcrumb-item a:hover {
  color: rgba(165, 183, 255, 1);
  text-decoration: none;
}

/* ---------- Progress Bars ---------- */
.progress {
  background: rgba(var(--glass-bg-rgb, 248, 250, 252), 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

.progress-bar {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  transition: width 0.6s ease;
  position: relative;
  overflow: hidden;
}

.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.3) 50%,
      transparent 100%);
  animation: progress-shimmer 2s infinite;
}

@keyframes progress-shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.progress-bar-striped {
  background-image: linear-gradient(45deg,
      rgba(255, 255, 255, 0.15) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(255, 255, 255, 0.15) 75%,
      transparent 75%,
      transparent);
  background-size: 1rem 1rem;
}

.progress-bar-animated {
  animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
  0% {
    background-position: 1rem 0;
  }

  100% {
    background-position: 0 0;
  }
}

/* Progress variants */
.progress-bar.bg-success {
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}

.progress-bar.bg-danger {
  background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
}

.progress-bar.bg-warning {
  background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

.progress-bar.bg-info {
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
}

/* Dark Mode Progress */
.dark-mode .progress {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(71, 85, 105, 0.4);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .progress-bar {
  background: linear-gradient(90deg, rgba(81, 104, 212, 0.9) 0%, rgba(129, 153, 255, 0.8) 100%);
}

.dark-mode .progress-bar.bg-success {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.9) 0%, rgba(5, 150, 105, 0.8) 100%);
}

.dark-mode .progress-bar.bg-danger {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.9) 0%, rgba(220, 38, 38, 0.8) 100%);
}

.dark-mode .progress-bar.bg-warning {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.9) 0%, rgba(217, 119, 6, 0.8) 100%);
}

.dark-mode .progress-bar.bg-info {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.9) 0%, rgba(37, 99, 235, 0.8) 100%);
}

/* ---------- Spinners ---------- */
.spinner-border,
.spinner-grow {
  border-color: var(--color-primary);
  border-right-color: transparent;
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.15em;
}

.spinner-grow-sm {
  width: 1rem;
  height: 1rem;
}

/* Spinner variants */
.spinner-border.text-primary {
  border-color: var(--color-primary);
  border-right-color: transparent;
}

.spinner-border.text-success {
  border-color: #10b981;
  border-right-color: transparent;
}

.spinner-border.text-danger {
  border-color: #ef4444;
  border-right-color: transparent;
}

.spinner-border.text-warning {
  border-color: #f59e0b;
  border-right-color: transparent;
}

.spinner-border.text-info {
  border-color: #3b82f6;
  border-right-color: transparent;
}

.spinner-border.text-light {
  border-color: #f1f5f9;
  border-right-color: transparent;
}

.spinner-border.text-dark {
  border-color: #1e293b;
  border-right-color: transparent;
}

.spinner-grow.text-primary {
  background-color: var(--color-primary);
}

.spinner-grow.text-success {
  background-color: #10b981;
}

.spinner-grow.text-danger {
  background-color: #ef4444;
}

.spinner-grow.text-warning {
  background-color: #f59e0b;
}

.spinner-grow.text-info {
  background-color: #3b82f6;
}

.spinner-grow.text-light {
  background-color: #f1f5f9;
}

.spinner-grow.text-dark {
  background-color: #1e293b;
}

/* Dark Mode Spinners */
.dark-mode .spinner-border {
  border-color: rgba(129, 153, 255, 0.9);
  border-right-color: transparent;
}

.dark-mode .spinner-grow {
  background-color: rgba(129, 153, 255, 0.9);
}

.dark-mode .spinner-border.text-light {
  border-color: rgba(241, 245, 249, 0.9);
  border-right-color: transparent;
}

.dark-mode .spinner-grow.text-light {
  background-color: rgba(241, 245, 249, 0.9);
}

/* ---------- Overlay de processamento ---------- */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  color: white;
  text-align: center;
}

.loader-container {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.overlay .message {
  margin-top: 20px;
}

/* Dark Mode - Overlay */
.dark-mode .overlay {
  background-color: rgba(0, 0, 0, 0.7);
}

/* ---------- Tooltips ---------- */
.tooltip {
  z-index: 10700 !important;
}

.tooltip-inner {
  background: rgba(30, 41, 59, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(71, 85, 105, 0.3);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(241, 245, 249, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.tooltip.bs-tooltip-top .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: rgba(30, 41, 59, 0.95);
}

.tooltip.bs-tooltip-right .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: rgba(30, 41, 59, 0.95);
}

.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: rgba(30, 41, 59, 0.95);
}

.tooltip.bs-tooltip-left .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: rgba(30, 41, 59, 0.95);
}

/* Dark Mode Tooltips */
.dark-mode .tooltip-inner {
  background: rgba(15, 23, 42, 0.98);
  border-color: rgba(71, 85, 105, 0.5);
  color: rgba(248, 250, 252, 1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* ---------- Popovers ---------- */
.popover {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-glass);
  z-index: 10600 !important;
}

.popover-header {
  background: rgba(var(--color-primary-rgb, 60, 135, 200), 0.1);
  border-bottom: 1px solid var(--glass-border);
  color: var(--color-primary);
  font-weight: 600;
  padding: 0.75rem 1rem;
}

.popover-body {
  color: var(--color-text);
  padding: 1rem;
}

.popover .arrow::before {
  border-color: transparent;
}

.popover .arrow::after {
  border-color: transparent;
}

.popover.bs-popover-top .arrow::after,
.popover.bs-popover-auto[x-placement^="top"] .arrow::after {
  border-top-color: var(--glass-bg);
}

.popover.bs-popover-right .arrow::after,
.popover.bs-popover-auto[x-placement^="right"] .arrow::after {
  border-right-color: var(--glass-bg);
}

.popover.bs-popover-bottom .arrow::after,
.popover.bs-popover-auto[x-placement^="bottom"] .arrow::after {
  border-bottom-color: var(--glass-bg);
}

.popover.bs-popover-left .arrow::after,
.popover.bs-popover-auto[x-placement^="left"] .arrow::after {
  border-left-color: var(--glass-bg);
}

/* Dark Mode Popovers */
.dark-mode .popover {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(71, 85, 105, 0.5);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.dark-mode .popover-header {
  background: rgba(81, 104, 212, 0.2);
  border-bottom-color: rgba(71, 85, 105, 0.4);
  color: rgba(129, 153, 255, 1);
}

.dark-mode .popover-body {
  color: rgba(226, 232, 240, 0.92);
}

/* ---------- Input Groups ---------- */
.dark-mode .input-group-text {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(71, 85, 105, 0.4);
  color: rgba(226, 232, 240, 0.9);
}

.dark-mode .input-group:hover .input-group-text {
  background: rgba(45, 56, 79, 0.9);
  border-color: rgba(129, 153, 255, 0.5);
}

.dark-mode .input-group-text i {
  color: rgba(148, 163, 184, 0.9);
}

/* ---------- Close Button ---------- */
.close,
.btn-close {
  color: #000000;
  text-shadow: none;
  opacity: 0.5;
  transition: all var(--transition-fast);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.close:hover,
.btn-close:hover,
.close:focus,
.btn-close:focus {
  color: #000000;
  opacity: 0.75;
  text-decoration: none;
  outline: none;
}

.close:not(:disabled):not(.disabled):hover,
.close:not(:disabled):not(.disabled):focus {
  opacity: 0.75;
}

/* Close button no modal header */
.modal-header .close {
  padding: 0.5rem;
  margin: 0 0 0 auto;
  color: inherit;
  line-height: 1;
}

/* Dark Mode - Close Button */
.dark-mode .close,
.dark-mode .btn-close {
  color: rgba(255, 255, 255, 0.8);
  opacity: 0.6;
}

.dark-mode .close:hover,
.dark-mode .btn-close:hover,
.dark-mode .close:focus,
.dark-mode .btn-close:focus {
  color: rgba(255, 255, 255, 1);
  opacity: 0.9;
}

.dark-mode .modal-header .close {
  color: rgba(255, 255, 255, 0.8);
}

/* ---------- Code & Pre ---------- */
.dark-mode code,
.dark-mode kbd,
.dark-mode samp {
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid rgba(71, 85, 105, 0.3);
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.4rem;
}

.dark-mode pre code {
  background: transparent;
  border: none;
  padding: 0;
}

/* ================= Kanban Board - Tarefas ================= */
/* Layout responsivo do Kanban */

.kanban-board {
  display: flex;
  flex-wrap: nowrap;
  height: 100%;
}

.kanban-column {
  flex: 1;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
}

.kanban-column .card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.kanban-column .card-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

/* Cards dentro do Kanban */
.kanban-card {
  cursor: grab;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.kanban-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.kanban-card.card {
  margin-bottom: 0;
}

/* Card não movível */
.kanban-card.deny {
  border-color: #dc3545;
  background-color: rgba(255, 0, 0, 0.1);
  cursor: not-allowed;
}

/* Card ativo (selecionado) */
.kanban-card.active {
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
  border-color: #007bff;
}

/* Card com prazo passado — só borda esquerda vermelha, igual o padrão de ausência (amarelo) */
.kanban-card.prazo-passado {
  border-left: 4px solid #dc3545 !important;
}

/* Balões de notificação */
.balao_mensagens {
  color: #FFF;
  background: #6c757d;
  border-radius: 100%;
  width: 20px;
  height: 20px;
  padding: 2px;
  font-size: 12px;
  text-align: center;
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.balao_mencoes {
  color: #FFF;
  background: #dc3545;
  border-radius: 100%;
  width: 20px;
  height: 20px;
  padding: 2px;
  font-size: 12px;
  text-align: center;
  position: absolute;
  top: 6px;
  right: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.balao_ausencia {
  color: #FFF;
  background: #ffc107;
  border-radius: 100%;
  width: 20px;
  height: 20px;
  padding: 2px;
  font-size: 12px;
  text-align: center;
  position: absolute;
  top: 6px;
  right: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse-warning 2s ease-in-out infinite;
}

@keyframes pulse-warning {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(255, 193, 7, 0);
  }
}

/* Container de ausência de informações */
.ausencia-info-container {
  position: relative;
}

.ausencia-info-badge {
  background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
  border-left: 4px solid #ffc107;
  margin-bottom: 0;
  padding: 1rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ausencia-info-badge:hover {
  background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}

.ausencia-info-badge i {
  color: #f39c12;
}

.ausencia-info-badge strong {
  font-size: 0.95rem;
  color: #856404;
}

.ausencia-info-badge small {
  font-size: 0.8rem;
  color: #856404;
}

/* Card com ausência ativa - visual diferenciado */
.kanban-card.ausencia-ativa {
  border-left: 4px solid #ffc107 !important;
  opacity: 0.85;
}

.kanban-card.ausencia-ativa .card-header {
  background: linear-gradient(135deg, rgba(255, 243, 205, 0.3) 0%, rgba(255, 234, 167, 0.3) 100%);
}

/* Responsivo - Mobile */
@media (max-width: 768px) {
  .kanban-board {
    overflow-x: auto;
    width: 100%;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 15px;
  }

  .kanban-column {
    min-width: 300px;
    max-width: 350px;
    flex: 0 0 auto;
    margin-right: 5px;
  }
}

/* ================= Kanban Board - Dark Mode ================= */

.dark-mode .kanban-card {
  background-color: rgba(30, 41, 59, 0.8);
  border-color: rgba(71, 85, 105, 0.5);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.dark-mode .kanban-card:hover {
  background-color: rgba(51, 65, 85, 0.9);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  border-color: rgba(100, 116, 139, 0.6);
}

.dark-mode .kanban-card.deny {
  border-color: #ef4444;
  background-color: rgba(239, 68, 68, 0.2);
}

.dark-mode .kanban-card.active {
  box-shadow: 0 0 12px rgba(81, 104, 212, 0.6);
  border-color: #5168d4;
}

.dark-mode .kanban-card.prazo-passado {
  background-color: rgba(251, 191, 36, 0.2);
  border-left: 4px solid #fbbf24;
}

.dark-mode .kanban-card .card-header {
  background-color: rgba(15, 23, 42, 0.5);
  border-bottom: 1px solid rgba(71, 85, 105, 0.4);
}

.dark-mode .kanban-card .card-title {
  color: rgba(226, 232, 240, 1);
}

.dark-mode .kanban-card .text-muted {
  color: rgba(148, 163, 184, 0.9) !important;
}

.dark-mode .kanban-card label {
  color: rgba(203, 213, 225, 0.9);
  font-weight: 500;
}

.dark-mode .kanban-card strong {
  color: rgba(241, 245, 249, 1);
}

.dark-mode .kanban-card hr {
  border-color: rgba(71, 85, 105, 0.4);
}

/* Balões dark mode */
.dark-mode .balao_mensagens {
  background: rgba(100, 116, 139, 0.9);
}

.dark-mode .balao_mencoes {
  background: rgba(239, 68, 68, 0.9);
}

.dark-mode .balao_ausencia {
  background: rgba(251, 191, 36, 0.9);
}

/* Dark mode - ausência de informações */
.dark-mode .ausencia-info-badge {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.2) 0%, rgba(180, 83, 9, 0.3) 100%);
  border-left: 4px solid rgba(251, 191, 36, 0.8);
}

.dark-mode .ausencia-info-badge:hover {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.3) 0%, rgba(180, 83, 9, 0.4) 100%);
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
}

.dark-mode .ausencia-info-badge i {
  color: rgba(251, 191, 36, 1);
}

.dark-mode .ausencia-info-badge strong,
.dark-mode .ausencia-info-badge small {
  color: rgba(253, 224, 71, 0.9);
}

.dark-mode .kanban-card.ausencia-ativa {
  border-left: 4px solid rgba(251, 191, 36, 0.8) !important;
  opacity: 0.9;
}

.dark-mode .kanban-card.ausencia-ativa .card-header {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.15) 0%, rgba(180, 83, 9, 0.2) 100%);
}

/* Coluna do Kanban dark mode */
.dark-mode .kanban-column .card-header.bg-light {
  background-color: rgba(30, 41, 59, 0.6) !important;
  color: rgba(226, 232, 240, 1);
  border-bottom: 2px solid rgba(81, 104, 212, 0.4);
}

.dark-mode .kanban-column .card-body {
  background-color: rgba(15, 23, 42, 0.4);
}

/* Alert dentro do kanban */
.dark-mode .kanban-column .alert-light {
  background-color: rgba(30, 41, 59, 0.5);
  border-color: rgba(71, 85, 105, 0.4);
  color: rgba(148, 163, 184, 1);
}

/* ================= Pipeline Comercial - Kanban Board ================= */

/* Card header com flexbox para alinhamento */
.card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.card-header h2 {
  flex: 1 1 auto;
  margin-bottom: 0;
}

.card-header-actions {
  margin-left: auto;
  order: 1;
}

.card-header small {
  flex: 0 0 100%;
  order: 2;
}

/* Coluna oculta do pipeline */
.coluna-oculta {
  position: relative;
}

.coluna-oculta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(108, 117, 125, 0.1) 30%, rgba(108, 117, 125, 0.1) 70%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.coluna-oculta .card-header {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: #fff !important;
}

.coluna-oculta .bg-secondary {
  background-color: #6c757d !important;
  opacity: 0.8;
}

/* Seletor de status dentro dos cards */
.seletor-status-lead {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: white !important;
  position: absolute !important;
  z-index: 1000 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  top: 100% !important;
  left: 0 !important;
  margin-top: 5px !important;
  min-width: 200px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.seletor-status-lead:focus {
  background-color: #5a6268 !important;
  border-color: #5a6268 !important;
  color: white !important;
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25) !important;
}

.seletor-status-lead option {
  background-color: #6c757d;
  color: white;
}

/* Ícone de alterar status ao lado da foto do responsável */
.icone-alterar-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  transition: all 0.2s ease;
  margin-left: 8px;
  flex-shrink: 0;
  z-index: 10;
  position: relative;
  pointer-events: auto;
}

.icone-alterar-status:hover {
  background-color: #e9ecef;
  border-color: #adb5bd;
  transform: scale(1.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.icone-alterar-status i {
  font-size: 0.9rem;
  color: #6c757d;
}

/* Container da foto e ícone de responsável */
.container-responsavel-icone {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 5;
}

/* Ícone de alterar status (posicionamento do select) */
.icone-alterar-status {
  position: relative;
}

/* ================= Pipeline Comercial - Dark Mode ================= */

.dark-mode .coluna-oculta::before {
  background: linear-gradient(45deg, transparent 30%, rgba(148, 163, 184, 0.15) 30%, rgba(148, 163, 184, 0.15) 70%, transparent 70%);
}

.dark-mode .coluna-oculta .card-header {
  background-color: rgba(100, 116, 139, 0.8) !important;
  border-color: rgba(100, 116, 139, 0.6) !important;
  color: rgba(226, 232, 240, 1) !important;
}

.dark-mode .coluna-oculta .bg-secondary {
  background-color: rgba(100, 116, 139, 0.6) !important;
  opacity: 0.9;
}

.dark-mode .seletor-status-lead {
  background-color: rgba(100, 116, 139, 0.9) !important;
  border-color: rgba(71, 85, 105, 0.8) !important;
  color: rgba(226, 232, 240, 1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.dark-mode .seletor-status-lead:focus {
  background-color: rgba(71, 85, 105, 0.95) !important;
  border-color: rgba(51, 65, 85, 0.9) !important;
  box-shadow: 0 0 0 0.2rem rgba(81, 104, 212, 0.3) !important;
}

.dark-mode .seletor-status-lead option {
  background-color: rgba(30, 41, 59, 0.95);
  color: rgba(226, 232, 240, 1);
}

.dark-mode .icone-alterar-status {
  background-color: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(71, 85, 105, 0.5);
}

.dark-mode .icone-alterar-status:hover {
  background-color: rgba(51, 65, 85, 0.8);
  border-color: rgba(100, 116, 139, 0.6);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.dark-mode .icone-alterar-status i {
  color: rgba(148, 163, 184, 0.9);
}

/* ================= OKR Tasks - Kanban Board ================= */
.task-column {
  background: var(--glass-bg-light);
  border-radius: var(--radius-md);
  min-height: 400px;
  padding: 15px;
  border: 1px solid var(--glass-border);
}

.task-column h6 {
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 15px;
}

.task-column h6 .badge {
  font-size: 0.7rem;
  margin-left: 0.5rem;
}

.task-item {
  background: var(--card-bg);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--glass-border);
  transition: var(--transition-base);
  position: relative;
}

.task-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.task-item.task-in-progress {
  border-left-color: var(--color-warning);
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, var(--card-bg) 100%);
}

.task-item.task-completed {
  border-left-color: var(--color-success);
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.1) 0%, var(--card-bg) 100%);
}

.task-item .task-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  opacity: 0;
  transition: var(--transition-fast);
}

.task-item:hover .task-actions {
  opacity: 1;
}

.task-title {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  font-size: 14px;
  padding-right: 30px;
  word-wrap: break-word;
}

.task-meta {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-create-task {
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  transition: var(--transition-fast);
}

.btn-create-task:hover {
  background: var(--color-primary-dark);
  color: white;
  transform: translateY(-1px);
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.task-list {
  min-height: 200px;
  padding: 10px 0;
}

.task-create-form {
  border: 2px dashed var(--color-primary) !important;
  background: var(--glass-bg-lighter) !important;
}

.task-create-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-add-task {
  color: var(--text-muted);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  transition: var(--transition-fast);
}

.btn-add-task:hover {
  background: var(--glass-bg-light);
  color: var(--color-primary);
  text-decoration: none;
}

.btn-cancel {
  padding: 0 8px !important;
  font-size: 18px;
  line-height: 1;
  border: none !important;
  background: none !important;
  color: var(--text-muted);
  transition: var(--transition-fast);
}

.btn-cancel:hover {
  color: var(--color-danger) !important;
  text-decoration: none !important;
}

#btnCriarTarefa {
  font-weight: 500;
  font-size: 0.875rem;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  transition: var(--transition-base);
}

/* Drag & Drop Kanban */
.kanban-card {
  cursor: grab;
  transition: var(--transition-base);
  user-select: none;
}

.kanban-card:hover {
  box-shadow: var(--shadow-md);
}

.kanban-card.sortable-ghost {
  opacity: 0.5;
  background: var(--glass-bg-light);
  transform: rotate(2deg);
}

.kanban-card.sortable-drag {
  cursor: grabbing;
  transform: rotate(5deg);
  box-shadow: var(--shadow-lg);
  z-index: 10500;
}

.kanban-column {
  position: relative;
}

/* Dark Mode - OKR Tasks */
.dark-mode .task-column {
  background: rgba(30, 41, 59, 0.4);
  border-color: rgba(71, 85, 105, 0.4);
}

.dark-mode .task-column h6 {
  color: rgba(226, 232, 240, 0.9);
}

.dark-mode .task-item {
  background: rgba(30, 41, 59, 0.6);
  border-left-color: rgba(71, 85, 105, 0.6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark-mode .task-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.dark-mode .task-item.task-in-progress {
  border-left-color: rgba(255, 193, 7, 0.8);
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(30, 41, 59, 0.6) 100%);
}

.dark-mode .task-item.task-completed {
  border-left-color: rgba(40, 167, 69, 0.8);
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.15) 0%, rgba(30, 41, 59, 0.6) 100%);
}

.dark-mode .task-title {
  color: rgba(241, 245, 249, 1);
}

.dark-mode .task-meta {
  color: rgba(148, 163, 184, 1);
}

.dark-mode .task-create-form {
  background: rgba(15, 23, 42, 0.6) !important;
  border-color: rgba(59, 130, 246, 0.6) !important;
}

.dark-mode .btn-add-task:hover {
  background: rgba(30, 41, 59, 0.6);
}

.dark-mode .kanban-card.sortable-ghost {
  background: rgba(30, 41, 59, 0.5);
}

.dark-mode .empty-state {
  color: rgba(148, 163, 184, 1);
}

/* ================= OKR - Estilos Modernos para Objetivos ================= */

/* Botões com gradiente */
.btn-gradient-primary {
  background: #6c757d;
  border: none;
  color: white;
  transition: all 0.3s ease;
}

.btn-gradient-primary:hover {
  background: #5a6268;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.btn-rounded {
  border-radius: 25px;
  padding: 8px 24px;
}

/* Cards com efeito hover */
.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Backgrounds com gradiente */
.bg-gradient-primary {
  background: #6c757d;
}

.bg-gradient-success {
  background: #28a745;
}

.bg-gradient-warning {
  background: #ffc107;
}

.bg-gradient-light {
  background: #f8f9fa;
}

/* Círculo de progresso */
.progress-circle {
  position: relative;
}

.progress-circle-bar {
  transition: stroke-dashoffset 0.8s ease-in-out;
}

/* Container de Key Results */
.key-results-container {
  max-height: none;
  overflow-y: visible;
}

/* Item de Key Result */
.key-result-item {
  transition: all 0.2s ease;
  border-left-width: 4px !important;
}

.key-result-item:hover {
  background-color: #f1f3f4 !important;
  transform: translateX(2px);
}

.key-result-item .kr-actions {
  opacity: 1;
  transition: opacity 0.2s ease;
}

.key-result-item:hover .kr-actions {
  opacity: 1;
}

.key-result-icon {
  width: 24px;
  text-align: center;
}

.border-left-4 {
  border-left-width: 4px !important;
}

/* Badges personalizados */
.badge-outline-secondary {
  color: #6c757d;
  border: 1px solid #6c757d;
  background: transparent;
  font-size: 0.7rem;
}

.badge-outline-info {
  color: #17a2b8;
  border: 1px solid #17a2b8;
  background: transparent;
  font-size: 0.7rem;
}

.bg-opacity-10 {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Animação fadeInUp */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

.card {
  animation: fadeInUp 0.5s ease-out;
}

/* Estilos para accordion dos Key Results */
.accordion .card-header {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef) !important;
}

.accordion .btn-link {
  color: #495057 !important;
  text-decoration: none !important;
}

.accordion .btn-link:hover {
  color: #007bff !important;
}

.accordion .btn-link .fas.fa-chevron-down {
  transition: transform 0.3s ease;
}

.accordion .btn-link[aria-expanded="true"] .fas.fa-chevron-down {
  transform: rotate(180deg);
}

.accordion .key-result-item {
  margin-bottom: 1rem !important;
  padding: 1rem !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.accordion .key-results-container {
  max-height: none;
}

/* Garantir que dropdowns dos Key Results não sejam cortados */
.key-result-item {
  position: static;
}

.key-result-item .dropdown {
  position: relative;
}

.key-result-item .dropdown-menu {
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  top: 100% !important;
  transform: none !important;
  z-index: 1050 !important;
  margin-top: 0.125rem;
}

/* Forçar overflow visível */
.accordion,
.accordion .card,
.accordion .card-body,
.accordion .collapse,
.key-results-container,
.card-hover {
  overflow: visible !important;
}

.key-result-item .dropdown-menu.show {
  display: block !important;
}

.badge-secondary {
  background-color: #6c757d;
}

.key-result-item {
  margin-bottom: 0.5rem !important;
  padding: 0.75rem !important;
}

.card-body .row.align-items-center {
  min-height: 120px;
}

/* Responsividade - Mobile */
@media (max-width: 768px) {
  .col-12 {
    margin-bottom: 1.5rem;
  }

  .card-body .row.align-items-center {
    flex-direction: column;
  }

  .col-lg-2.col-md-3,
  .col-lg-4.col-md-5,
  .col-lg-6.col-md-4 {
    max-width: 100%;
    margin-bottom: 1rem;
  }

  .progress-circle {
    width: 100px !important;
    height: 100px !important;
  }

  .progress-circle svg {
    width: 100px !important;
    height: 100px !important;
  }

  .key-results-container {
    max-height: 200px !important;
  }
}

/* Responsividade - Tablets */
@media (min-width: 769px) and (max-width: 1024px) {
  .progress-circle {
    width: 100px !important;
    height: 100px !important;
  }

  .progress-circle svg {
    width: 100px !important;
    height: 100px !important;
  }

  .col-lg-2.col-md-3 {
    flex: 0 0 20%;
    max-width: 20%;
  }

  .col-lg-4.col-md-5 {
    flex: 0 0 35%;
    max-width: 35%;
  }

  .col-lg-6.col-md-4 {
    flex: 0 0 45%;
    max-width: 45%;
  }
}

/* Dark Mode - OKR Objetivos */
.dark-mode .btn-gradient-primary {
  background: rgba(108, 117, 125, 0.9);
}

.dark-mode .btn-gradient-primary:hover {
  background: rgba(90, 98, 104, 0.9);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.dark-mode .card-hover:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.dark-mode .bg-gradient-light {
  background: rgba(30, 41, 59, 0.6);
}

.dark-mode .key-result-item {
  background-color: rgba(30, 41, 59, 0.4) !important;
}

.dark-mode .key-result-item:hover {
  background-color: rgba(30, 41, 59, 0.6) !important;
}

.dark-mode .badge-outline-secondary {
  color: rgba(148, 163, 184, 1);
  border-color: rgba(148, 163, 184, 0.6);
}

.dark-mode .badge-outline-info {
  color: rgba(56, 189, 248, 1);
  border-color: rgba(56, 189, 248, 0.6);
}

.dark-mode .bg-opacity-10 {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode .accordion .card-header {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(51, 65, 85, 0.6)) !important;
}

.dark-mode .accordion .btn-link {
  color: rgba(226, 232, 240, 0.9) !important;
}

.dark-mode .accordion .btn-link:hover {
  color: rgba(129, 140, 248, 1) !important;
}

.dark-mode .accordion .key-result-item {
  background: rgba(30, 41, 59, 0.6) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ================= Informações de Usuário - Edição Inline ================= */
.editable {
  border-radius: 3px;
  padding: 2px 6px;
  transition: all 0.3s ease;
  min-height: 18px;
  display: inline-block;
}

.editable:hover {
  background-color: #f8f9fa;
  border: 1px dashed #dee2e6;
}

.editable:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
  background-color: #ffffff;
}

.editable.editing {
  border-radius: 4px;
  padding: 4px 8px;
}

.editable .text-muted {
  font-style: italic;
}

.time-field {
  transition: all 0.3s ease;
  border: 1px dashed transparent;
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  min-height: 18px;
}

.time-field:hover {
  background-color: #f8f9fa;
  border: 1px dashed #dee2e6;
}

/* Dark Mode - Informações de Usuário */
.dark-mode .editable:hover {
  background-color: rgba(51, 65, 85, 0.5);
  border-color: rgba(100, 116, 139, 0.6);
}

.dark-mode .editable:focus {
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.3);
  background-color: rgba(30, 41, 59, 0.8);
}

.dark-mode .time-field:hover {
  background-color: rgba(51, 65, 85, 0.5);
  border-color: rgba(100, 116, 139, 0.6);
}

/* ================= Classe Utilitária - Esmaecida ================= */
.esmaecida {
  opacity: 0.5;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Dark Mode - Esmaecida */
.dark-mode .esmaecida {
  opacity: 0.4;
}

/* Variante compacta opcional */
.card-body ul.compacto>li {
  margin: 0 0 .20rem;
}

/* Listas de dica / ajuda dentro de cards com <small> */
.card-body small ul:not(.list-unstyled):not(.nav):not(.nav-tabs):not(.pagination):not(.pager) {
  list-style: disc inside;
  margin: .35rem 0 .75rem;
}

.card-body small ul:not(.list-unstyled):not(.nav):not(.nav-tabs):not(.pagination):not(.pager)>li {
  margin: 0 0 .30rem;
}

/* Evita interferir em listas DataTables, navegação ou breadcrumb */
.dataTables_wrapper ul,
nav ul,
.breadcrumb {
  list-style: none;
}

/* ================= Card Header (layout com flexbox - modernizado) ================= */
.card-header {
  position: relative;
  padding-top: .75rem;
  padding-bottom: .75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Quando card-header contém .row, remove o flex para evitar conflito */
.card-header:has(.row) {
  display: block;
}

.card-header h1,
.card-header h2,
.card-header h5 {
  flex: 1 1 auto;
  margin: 0;
}

.card-header small {
  flex: 0 0 100%;
  order: 2;
  display: block;
  margin-left: 0;
}

.card-header-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: nowrap;
  align-items: center;
  margin-left: auto;
  order: 1;
}

.card-header-actions>* {
  margin-left: 0;
}

/* Retro compat: h1 + p empilhados */
.card-header h1+p,
.card-header h2+p {
  margin-top: 4px;
  flex: 0 0 100%;
  order: 2;
}

/* ================= Card Header standalone =================
 * card_header() emite só <div class="card-header"> — quando o call site
 * não envolve em <div class="card">, tratamos como "page section header":
 * sem borda, sem sombra, fundo translúcido leve com gradiente sutil e um
 * accent bar fino à esquerda na cor primária pra dar identidade.
 * Selectors L4: :not() com seletor complexo.
 */
.card-header:not(.card > *) {
  border: 0 !important;
  border-left: 3px solid var(--color-primary, #18338f) !important;
  border-radius: var(--radius, 0.5rem) !important;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(24, 51, 143, 0.04) 100%) !important;
  backdrop-filter: blur(var(--glass-blur, 20px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 20px));
  box-shadow: none;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

.card-header:not(.card > *) h1,
.card-header:not(.card > *) h2,
.card-header:not(.card > *) h5 {
  font-weight: 600;
}

.card-header:not(.card > *) p {
  color: var(--color-muted, #6c757d);
}

.dark-mode .card-header:not(.card > *) {
  background: linear-gradient(135deg,
      rgba(30, 40, 60, 0.4) 0%,
      rgba(60, 135, 200, 0.08) 100%) !important;
  border-left-color: rgba(60, 135, 200, 0.8) !important;
}

/* Responsivo mobile */
@media (max-width: 768px) {

  .card-header h1,
  .card-header h2 {
    flex: 0 0 100%;
  }

  .card-header-actions {
    flex: 0 0 100%;
    margin-left: 0;
    order: 3;
  }
}

/* ================= Posicionamento do badge do reCAPTCHA ================= */
/* Badge flutuante no canto inferior direito (posição padrão reCAPTCHA v3) */
.grecaptcha-badge {
  position: fixed !important;
  right: 4px !important;
  bottom: 14px !important;
  left: auto !important;
  width: 256px !important;
  height: 60px !important;
  transform: none !important;
  opacity: 0.85;
  transition: opacity 0.3s ease;
  z-index: 9998 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.grecaptcha-badge:hover {
  opacity: 1;
}

/* Mobile - Ajusta posicionamento em telas pequenas */
@media (max-width: 768px) {
  .grecaptcha-badge {
    right: 2px !important;
    bottom: 8px !important;
    transform: scale(0.9) !important;
    transform-origin: bottom right;
  }
}

.grecaptcha-badge:hover {
  opacity: 1;
}

.dark-mode .grecaptcha-badge {
  opacity: 0.7;
  filter: brightness(0.9) contrast(0.9);
}

.dark-mode .grecaptcha-badge:hover {
  opacity: 0.95;
  filter: brightness(1) contrast(1);
}



/* ================= Links de Ação (Esqueci Senha / Criar Conta) ================= */
/* Melhora visibilidade dos links na tela de login */
.btn-link {
  color: var(--color-primary) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: all 0.3s ease;
  display: inline-block;
  position: relative;
  padding: 4px 0 !important;
}

.btn-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 50%;
  background-color: var(--color-primary);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.btn-link:hover {
  color: var(--color-primary-hover) !important;
  text-decoration: none !important;
  transform: translateY(-1px);
}

.btn-link:hover::after {
  width: 100%;
}

.btn-link:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(24, 51, 143, 0.15);
  border-radius: 4px;
}

/* Dark mode - Links mais brilhantes */
.dark-mode .btn-link {
  color: rgba(129, 153, 255, 0.95) !important;
  text-shadow: 0 0 8px rgba(129, 153, 255, 0.3);
}

/* =============================
   Sistema de Chat/Bate-papo
   ============================= */

/* Container de mensagens */
#mensagens-container {
  overflow-y: auto;
  height: 100%;
  width: 100%;
  background: url(../img/bg-whatsapp.jpg);
  border-radius: 10px;
  -webkit-box-shadow: inset 0px 0px 3px 0px #a9a9a9;
  -moz-box-shadow: inset 0px 0px 3px 0px #a9a9a9;
  box-shadow: inset 0px 0px 3px 0px #a9a9a9;
  padding: 10px;
}

/* Mensagem individual */
.mensagem {
  max-width: 92%;
  padding: 10px 12px;
  margin: 10px 0;
  border-radius: 10px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Mensagem do solicitante (direita) */
.mensagem.solicitante {
  background-color: #dcf8c6;
  margin-left: auto;
  margin-right: 10px;
}

/* Mensagem do admin (esquerda) */
.mensagem.admin {
  background-color: #ffffff;
  margin-right: auto;
  margin-left: 10px;
}

/* Cabeçalho: avatar + (nome / data) */
.mensagem .mensagem-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.mensagem .mensagem-header .info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.mensagem .mensagem-header .info .nome {
  font-weight: 600;
  font-size: 0.92rem;
  color: #333;
}

.mensagem .mensagem-header .info .data {
  font-size: 0.75rem;
  color: #6c757d;
  margin-top: 2px;
}

/* Ações inline (editar/apagar) — só aparecem para o dono na janela de 30 min */
.mensagem .mensagem-header .mensagem-acoes {
  display: flex;
  align-items: center;
  gap: 2px;
}

.mensagem .mensagem-header .mensagem-acoes .btn-link {
  color: #6c757d;
  line-height: 1;
  padding: 2px 6px;
}

.mensagem .mensagem-header .mensagem-acoes .btn-link:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/* Caixa de edição inline */
.mensagem .edicao-mensagem-box {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 8px;
}

/* Avatar nas mensagens */
.mensagem img.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

/* Imagens dentro das mensagens */
.mensagem .conteudo img {
  max-width: 100%;
  border-radius: 0;
}

/* Conteúdo da mensagem */
.mensagem .conteudo {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  padding: 0;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Etapas de status */
.etapa {
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.etapa.status-1 {
  background-color: #f8d7da;
}

.etapa.status-2 {
  background-color: #fff3cd;
}

.etapa.status-3 {
  background-color: #d4edda;
}

.status-select {
  margin-bottom: 10px;
}

/* Loader do chat */
.loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 2s linear infinite;
  margin: 0 auto;
  display: none;
  margin-bottom: 20px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

#mensagens-container.loader-active .loader {
  display: block;
}

#lista-etapas.loader-active .loader {
  display: block;
}

/* Barra de rolagem do chat */
#mensagens-container::-webkit-scrollbar {
  width: 8px;
}

#mensagens-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

#mensagens-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

#mensagens-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* =============================
   Dark Mode - Sistema de Chat
   ============================= */

.dark-mode #mensagens-container {
  background: url(../img/bg-whatsapp-dark.jpg);
  box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}

.dark-mode .mensagem {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .mensagem.solicitante {
  background-color: rgba(76, 175, 80, 0.3);
  border: 1px solid rgba(76, 175, 80, 0.4);
}

.dark-mode .mensagem.admin {
  background-color: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(71, 85, 105, 0.4);
  color: var(--color-text);
}

.dark-mode .mensagem .conteudo {
  color: #e2e8f0;
}

.dark-mode .mensagem .mensagem-header .info .nome {
  color: #e2e8f0;
}

.dark-mode .mensagem .mensagem-header .info .data {
  color: #94a3b8;
}

.dark-mode .etapa {
  border-color: rgba(71, 85, 105, 0.5);
  background: rgba(30, 41, 59, 0.5);
}

.dark-mode .etapa.status-1 {
  background-color: rgba(220, 53, 69, 0.2);
  border-color: rgba(220, 53, 69, 0.4);
}

.dark-mode .etapa.status-2 {
  background-color: rgba(255, 193, 7, 0.2);
  border-color: rgba(255, 193, 7, 0.4);
}

.dark-mode .etapa.status-3 {
  background-color: rgba(40, 167, 69, 0.2);
  border-color: rgba(40, 167, 69, 0.4);
}

.dark-mode #mensagens-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
}

.dark-mode #mensagens-container::-webkit-scrollbar-thumb {
  background: rgba(129, 153, 255, 0.4);
}

.dark-mode #mensagens-container::-webkit-scrollbar-thumb:hover {
  background: rgba(129, 153, 255, 0.6);
}

.dark-mode .btn-link::after {
  background-color: rgba(129, 153, 255, 0.95);
  box-shadow: 0 0 8px rgba(129, 153, 255, 0.4);
}

.dark-mode .btn-link:hover {
  color: rgba(165, 183, 255, 1) !important;
  text-shadow: 0 0 12px rgba(129, 153, 255, 0.5);
}

/* Espaçamento entre os links na área de login */
.text-center.mt-5>div:not(:last-child) {
  margin-bottom: 12px;
}


/* =============================
   Dark Mode - Switches (Custom Control)
   ============================= */

/* Custom Switch - Dark Mode */
.dark-mode .custom-control-label {
  color: rgba(226, 232, 240, 0.95);
}

.dark-mode .custom-control-label::before {
  background-color: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(71, 85, 105, 0.5);
}

.dark-mode .custom-switch .custom-control-label::after {
  background-color: rgba(148, 163, 184, 0.9);
}

.dark-mode .custom-control-input:checked~.custom-control-label::before {
  background-color: rgba(129, 153, 255, 0.8);
  border-color: rgba(129, 153, 255, 0.9);
  box-shadow: 0 0 8px rgba(129, 153, 255, 0.4);
}

.dark-mode .custom-switch .custom-control-input:checked~.custom-control-label::after {
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .custom-control-input:focus~.custom-control-label::before {
  border-color: rgba(129, 153, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(129, 153, 255, 0.15);
}

.dark-mode .custom-control-input:disabled~.custom-control-label {
  color: rgba(100, 116, 139, 0.5);
}

.dark-mode .custom-control-input:disabled~.custom-control-label::before {
  background-color: rgba(15, 23, 42, 0.5);
  border-color: rgba(71, 85, 105, 0.3);
  opacity: 0.5;
}

/* Custom Checkbox - Dark Mode */
.dark-mode .custom-checkbox .custom-control-label::before {
  border-radius: var(--radius-xs);
}

.dark-mode .custom-checkbox .custom-control-input:checked~.custom-control-label::before {
  background-color: rgba(129, 153, 255, 0.8);
  border-color: rgba(129, 153, 255, 0.9);
}

.dark-mode .custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before {
  background-color: rgba(129, 153, 255, 0.8);
  border-color: rgba(129, 153, 255, 0.9);
  box-shadow: 0 0 8px rgba(129, 153, 255, 0.4);
}

/* Custom Radio - Dark Mode */
.dark-mode .custom-radio .custom-control-label::before {
  border-radius: 50%;
}

.dark-mode .custom-radio .custom-control-input:checked~.custom-control-label::before {
  background-color: rgba(129, 153, 255, 0.8);
  border-color: rgba(129, 153, 255, 0.9);
}

.dark-mode .custom-radio .custom-control-input:checked~.custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* Hover states */
.dark-mode .custom-control-label:hover::before {
  border-color: rgba(129, 153, 255, 0.5);
  background-color: rgba(30, 41, 59, 0.9);
}

.dark-mode .custom-switch .custom-control-label:hover::after {
  background-color: rgba(165, 183, 255, 0.9);
}

.dark-mode .custom-control-input:checked~.custom-control-label:hover::before {
  background-color: rgba(129, 153, 255, 0.9);
  box-shadow: 0 0 12px rgba(129, 153, 255, 0.5);
}


/* =============================
   Dark Mode - Calendários
   ============================= */

/* jQuery Datetimepicker Dark Mode */
.dark-mode .xdsoft_datetimepicker {
  background: rgba(30, 30, 40, 0.98) !important;
  border: 1px solid rgba(129, 153, 255, 0.2) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(10px);
}

.dark-mode .xdsoft_datetimepicker .xdsoft_label {
  background-color: rgba(40, 40, 55, 0.9) !important;
  color: #fff !important;
}

.dark-mode .xdsoft_datetimepicker .xdsoft_label:hover {
  background-color: rgba(129, 153, 255, 0.3) !important;
}

.dark-mode .xdsoft_datetimepicker .xdsoft_month,
.dark-mode .xdsoft_datetimepicker .xdsoft_year {
  color: #fff !important;
}

.dark-mode .xdsoft_datetimepicker .xdsoft_calendar td,
.dark-mode .xdsoft_datetimepicker .xdsoft_calendar th {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(129, 153, 255, 0.1) !important;
}

.dark-mode .xdsoft_datetimepicker .xdsoft_calendar thead th {
  background: rgba(40, 40, 55, 0.7) !important;
  color: rgba(129, 153, 255, 0.9) !important;
  font-weight: 600;
}

.dark-mode .xdsoft_datetimepicker .xdsoft_calendar td:hover,
.dark-mode .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:hover {
  background: rgba(129, 153, 255, 0.2) !important;
  color: #fff !important;
}

.dark-mode .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
  background: rgba(76, 175, 80, 0.3) !important;
  color: #fff !important;
  font-weight: 600;
}

.dark-mode .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current {
  background: rgba(129, 153, 255, 0.5) !important;
  color: #fff !important;
  font-weight: bold;
  box-shadow: inset 0 0 0 2px rgba(129, 153, 255, 0.8);
}

.dark-mode .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default {
  background: rgba(129, 153, 255, 0.3) !important;
  color: #fff !important;
}

.dark-mode .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled {
  opacity: 0.3 !important;
  color: rgba(255, 255, 255, 0.3) !important;
}

.dark-mode .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month {
  opacity: 0.4 !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

.dark-mode .xdsoft_datetimepicker .xdsoft_timepicker {
  background: rgba(25, 25, 35, 0.9) !important;
  border-color: rgba(129, 153, 255, 0.2) !important;
}

.dark-mode .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
  border-color: rgba(129, 153, 255, 0.1) !important;
}

.dark-mode .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(129, 153, 255, 0.1) !important;
}

.dark-mode .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current {
  background: rgba(129, 153, 255, 0.4) !important;
  color: #fff !important;
  font-weight: bold;
}

.dark-mode .xdsoft_datetimepicker .xdsoft_prev,
.dark-mode .xdsoft_datetimepicker .xdsoft_next,
.dark-mode .xdsoft_datetimepicker .xdsoft_today_button {
  background: rgba(40, 40, 55, 0.7) !important;
  color: rgba(129, 153, 255, 0.9) !important;
  border-color: rgba(129, 153, 255, 0.2) !important;
}

.dark-mode .xdsoft_datetimepicker .xdsoft_prev:hover,
.dark-mode .xdsoft_datetimepicker .xdsoft_next:hover,
.dark-mode .xdsoft_datetimepicker .xdsoft_today_button:hover {
  background: rgba(129, 153, 255, 0.3) !important;
  color: #fff !important;
}

.dark-mode .xdsoft_datetimepicker .xdsoft_scrollbar>.xdsoft_scroller {
  background: rgba(129, 153, 255, 0.4) !important;
}

.dark-mode .xdsoft_datetimepicker .xdsoft_scrollbar {
  background: rgba(0, 0, 0, 0.2) !important;
}

/* @chenfengyuan/datepicker Dark Mode */
.dark-mode .datepicker-container {
  background: rgba(30, 30, 40, 0.98) !important;
  border: 1px solid rgba(129, 153, 255, 0.2) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(10px);
  color: #fff !important;
}

.dark-mode .datepicker-panel>ul[data-view="years"]>li,
.dark-mode .datepicker-panel>ul[data-view="months"]>li,
.dark-mode .datepicker-panel>ul[data-view="days"]>li {
  color: rgba(255, 255, 255, 0.9) !important;
  background: transparent !important;
}

.dark-mode .datepicker-panel>ul[data-view="years"]>li:hover,
.dark-mode .datepicker-panel>ul[data-view="months"]>li:hover,
.dark-mode .datepicker-panel>ul[data-view="days"]>li:hover {
  background: rgba(129, 153, 255, 0.2) !important;
  color: #fff !important;
}

.dark-mode .datepicker-panel>ul>li.picked {
  background: rgba(129, 153, 255, 0.5) !important;
  color: #fff !important;
  font-weight: bold;
}

.dark-mode .datepicker-panel>ul>li.highlighted {
  background: rgba(76, 175, 80, 0.3) !important;
  color: #fff !important;
}

.dark-mode .datepicker-panel>ul>li.disabled {
  opacity: 0.3 !important;
  color: rgba(255, 255, 255, 0.3) !important;
}

.dark-mode .datepicker-panel>ul>li.muted {
  opacity: 0.4 !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

.dark-mode .datepicker-panel>ul::before {
  background: rgba(40, 40, 55, 0.7) !important;
  border-color: rgba(129, 153, 255, 0.2) !important;
}

.dark-mode .datepicker-panel>ul[data-view="week"]>li,
.dark-mode .datepicker-panel>ul[data-view="week"]>li:hover {
  background: rgba(40, 40, 55, 0.7) !important;
  color: rgba(129, 153, 255, 0.9) !important;
  font-weight: 600;
}

.dark-mode .datepicker-panel>ul>li[data-view="month prev"],
.dark-mode .datepicker-panel>ul>li[data-view="month next"],
.dark-mode .datepicker-panel>ul>li[data-view="month current"],
.dark-mode .datepicker-panel>ul>li[data-view="year prev"],
.dark-mode .datepicker-panel>ul>li[data-view="year next"],
.dark-mode .datepicker-panel>ul>li[data-view="year current"],
.dark-mode .datepicker-panel>ul>li[data-view="years prev"],
.dark-mode .datepicker-panel>ul>li[data-view="years next"],
.dark-mode .datepicker-panel>ul>li[data-view="years current"] {
  color: rgba(129, 153, 255, 0.9) !important;
  background: rgba(40, 40, 55, 0.7) !important;
}

.dark-mode .datepicker-panel>ul>li[data-view]:hover {
  background: rgba(129, 153, 255, 0.3) !important;
  color: #fff !important;
}

/* Background color para card de aviso/warning */
.bg-warning-light {
  background-color: #fff3cd !important;
}

.dark-mode .bg-warning-light {
  background-color: rgba(255, 193, 7, 0.15) !important;
}

.dark-mode .datepicker-top-left::before,
.dark-mode .datepicker-top-right::before {
  border-top-color: rgba(129, 153, 255, 0.2) !important;
}

.dark-mode .datepicker-top-left::after,
.dark-mode .datepicker-top-right::after {
  border-top-color: rgba(30, 30, 40, 0.98) !important;
}

/* Classes para elogios - evitar inline styles */
.elogio-nome {
  color: #1d2129;
}

.elogio-texto-muted {
  color: #65676b;
}

.dark-mode .elogio-nome {
  color: rgba(255, 255, 255, 0.95);
}

.dark-mode .elogio-texto-muted {
  color: rgba(255, 255, 255, 0.6);
}

/* Tooltip para destinatários */
.tooltip-destinatarios {
  text-decoration: underline;
  cursor: help;
}

/* Fotos empilhadas para múltiplos destinatários */
.fotos-empilhadas {
  position: relative;
}

.fotos-empilhadas img {
  border: 2px solid #fff;
}

.fotos-empilhadas .badge-contador {
  width: 48px;
  height: 48px;
  margin-left: -8px;
  z-index: 1;
  font-size: 12px;
  font-weight: bold;
}

.dark-mode .datepicker-bottom-left::before,
.dark-mode .datepicker-bottom-right::before {
  border-bottom-color: rgba(129, 153, 255, 0.2) !important;
}

.dark-mode .datepicker-bottom-left::after,
.dark-mode .datepicker-bottom-right::after {
  border-bottom-color: rgba(30, 30, 40, 0.98) !important;
}

/* ========================================
   ELOGIOS - Tab Cards Navigation
   ======================================== */

/* Garantir que os ícones apareçam corretamente */
.tab-card i {
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome !important;
  font-weight: 900 !important;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}

/* Fallback caso FontAwesome não carregue */
.tab-card i.fa-comments:before {
  content: "\f086";
}

.tab-card i.fa-user:before {
  content: "\f007";
}

.tab-card i.fa-users:before {
  content: "\f0c0";
}

.tab-card i.fa-chart-line:before {
  content: "\f201";
}

.tab-card i.fa-heart:before {
  content: "\f004";
}

/* Hover effect para os cards */
.tab-card {
  cursor: pointer;
  transition: all 0.3s ease;
}

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

.dark-mode .tab-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* ========================================
   ELOGIOS - Card "Escrever Elogio"
   ======================================== */

/* Melhorar visual do campo clicável */
.modal_iframe_medio_sem_recarregar[data-frame="modulos/elogios/modal_enviar_elogio.php"] {
  border: 2px dashed #dee2e6;
  transition: all 0.3s ease;
  cursor: pointer;
}

.modal_iframe_medio_sem_recarregar[data-frame="modulos/elogios/modal_enviar_elogio.php"]:hover {
  background-color: #e9ecef !important;
  border-color: #007bff !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 123, 255, 0.15) !important;
}

.modal_iframe_medio_sem_recarregar[data-frame="modulos/elogios/modal_enviar_elogio.php"]:hover .fas.fa-edit {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

.modal_iframe_medio_sem_recarregar[data-frame="modulos/elogios/modal_enviar_elogio.php"]:hover .text-primary {
  color: #0056b3 !important;
}

/* Animação para o ícone */
.modal_iframe_medio_sem_recarregar[data-frame="modulos/elogios/modal_enviar_elogio.php"] .fas.fa-edit {
  transition: all 0.2s ease;
}

/* Estilo adicional para o texto de instruções */
.modal_iframe_medio_sem_recarregar[data-frame="modulos/elogios/modal_enviar_elogio.php"] small {
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.modal_iframe_medio_sem_recarregar[data-frame="modulos/elogios/modal_enviar_elogio.php"]:hover small {
  opacity: 1;
}

/* Dark mode para card "Escrever Elogio" */
.dark-mode .modal_iframe_medio_sem_recarregar[data-frame="modulos/elogios/modal_enviar_elogio.php"] {
  border-color: rgba(129, 153, 255, 0.3);
}

.dark-mode .modal_iframe_medio_sem_recarregar[data-frame="modulos/elogios/modal_enviar_elogio.php"]:hover {
  background-color: rgba(40, 40, 55, 0.6) !important;
  border-color: rgba(129, 153, 255, 0.8) !important;
  box-shadow: 0 8px 25px rgba(129, 153, 255, 0.2) !important;
}

.dark-mode .modal_iframe_medio_sem_recarregar[data-frame="modulos/elogios/modal_enviar_elogio.php"]:hover .text-primary {
  color: rgba(129, 153, 255, 1) !important;
}

/* Responsividade para mobile */
@media (max-width: 768px) {
  .modal_iframe_medio_sem_recarregar[data-frame="modulos/elogios/modal_enviar_elogio.php"] {
    margin: 0 10px;
  }

  .modal_iframe_medio_sem_recarregar[data-frame="modulos/elogios/modal_enviar_elogio.php"] .fas.fa-edit {
    font-size: 28px !important;
  }

  .modal_iframe_medio_sem_recarregar[data-frame="modulos/elogios/modal_enviar_elogio.php"] h6 {
    font-size: 18px;
  }

  .modal_iframe_medio_sem_recarregar[data-frame="modulos/elogios/modal_enviar_elogio.php"] p {
    font-size: 15px !important;
  }
}

/* ========================================
   ELOGIOS - Cards de Elogios
   ======================================== */

/* Estilos para os cards de elogios */
.elogio-card {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  transition: box-shadow 0.2s ease;
  background-color: #ffffff;
}

.elogio-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.elogio-card .card-text {
  line-height: 1.5;
  color: #1d2129;
  font-size: 15px;
  font-weight: 400;
}

.elogio-card .badge {
  font-size: 12px;
  font-weight: 500;
}

.elogio-card .btn-outline-secondary {
  border-color: #dee2e6;
  color: #6c757d;
  transition: all 0.2s ease;
}

.elogio-card .btn-outline-secondary:hover {
  background-color: #f8f9fa;
  border-color: #007bff;
  color: #007bff;
}

/* Dark mode para cards de elogios */
.dark-mode .elogio-card {
  background-color: rgba(30, 30, 40, 0.6);
  border-color: rgba(129, 153, 255, 0.2);
  backdrop-filter: blur(10px);
}

.dark-mode .elogio-card:hover {
  box-shadow: 0 2px 8px rgba(129, 153, 255, 0.2);
  border-color: rgba(129, 153, 255, 0.4);
}

.dark-mode .elogio-card .card-text {
  color: rgba(255, 255, 255, 0.9);
}

.dark-mode .elogio-card .btn-outline-secondary {
  border-color: rgba(129, 153, 255, 0.3);
  color: rgba(255, 255, 255, 0.7);
}

.dark-mode .elogio-card .btn-outline-secondary:hover {
  background-color: rgba(129, 153, 255, 0.2);
  border-color: rgba(129, 153, 255, 0.6);
  color: rgba(129, 153, 255, 1);
}

/* ========================================
   ELOGIOS - Botões de Reação
   ======================================== */

.elogio-card .reacao-btn {
  font-size: 14px;
  font-weight: 500;
  padding: 4px 8px;
  transition: all 0.2s ease;
}

.elogio-card .reacao-btn.btn-primary {
  background-color: #007bff;
  border-color: #007bff;
  color: white;
}

.elogio-card .reacao-btn.btn-primary:hover {
  background-color: #0056b3;
  border-color: #0056b3;
  transform: scale(1.05);
}

.elogio-card .reacao-btn.btn-outline-secondary:hover {
  background-color: #007bff;
  border-color: #007bff;
  color: white;
  transform: scale(1.05);
}

/* Dark mode para botões de reação */
.dark-mode .elogio-card .reacao-btn.btn-primary {
  background-color: rgba(129, 153, 255, 0.8);
  border-color: rgba(129, 153, 255, 0.8);
}

.dark-mode .elogio-card .reacao-btn.btn-primary:hover {
  background-color: rgba(129, 153, 255, 1);
  border-color: rgba(129, 153, 255, 1);
}

.dark-mode .elogio-card .reacao-btn.btn-outline-secondary:hover {
  background-color: rgba(129, 153, 255, 0.3);
  border-color: rgba(129, 153, 255, 0.6);
  color: rgba(129, 153, 255, 1);
}

/* ========================================
   FEEDBACKS - Cards de Feedbacks
   ======================================== */

/* Estilos para os cards de feedbacks - seguindo padrão de elogios */
.feedback-card {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  transition: box-shadow 0.2s ease;
  background-color: #ffffff;
}

.feedback-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.feedback-card .card-text {
  line-height: 1.5;
  color: #1d2129;
  font-size: 15px;
  font-weight: 400;
}

/* Dark mode para feedbacks */
.dark-mode .feedback-card {
  background-color: var(--color-card-bg);
  border-color: var(--color-border);
}

.dark-mode .feedback-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .feedback-card .card-text {
  color: var(--color-text);
}

/* Conteúdo detalhado do feedback */
.feedback-content {
  font-size: 14px;
  line-height: 1.6;
  word-wrap: break-word;
}

.feedback-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 10px 0;
}

/* Itens de informação */
.info-item {
  font-size: 14px;
}

.info-item strong {
  color: #495057;
}

/* Dark mode para conteúdo de feedback */
.dark-mode .feedback-content {
  background-color: var(--color-input-bg);
  color: var(--color-text);
}

.dark-mode .info-item strong {
  color: var(--color-text);
}

/* Thread / resposta de feedback */
.feedback-thread-quote {
  position: relative;
  margin-bottom: 0.85rem;
  padding: 0.6rem 0.85rem 0.6rem 1rem;
  border-left: 3px solid var(--color-primary, #18338f);
  background: rgba(24, 51, 143, 0.05);
  border-radius: var(--radius-sm, 0.25rem);
  font-size: 13px;
  color: #495057;
}

.feedback-thread-quote .feedback-thread-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-primary, #18338f);
  margin-bottom: 4px;
}

.feedback-thread-quote .feedback-thread-original {
  display: flex;
  align-items: center;
  gap: 6px;
}

.feedback-thread-quote .feedback-thread-original img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
}

.feedback-thread-quote .feedback-thread-original strong {
  color: #1d2129;
  font-weight: 600;
}

.feedback-thread-quote .feedback-thread-assunto {
  display: block;
  margin-top: 4px;
  font-style: italic;
  color: #65676b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feedback-card.is-resposta {
  border-left: 3px solid var(--color-primary, #18338f);
}

.badge-resposta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(24, 51, 143, 0.1);
  color: var(--color-primary, #18338f);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 6px;
}

.dark-mode .feedback-thread-quote {
  background: rgba(129, 153, 255, 0.08);
  color: var(--color-text);
}

.dark-mode .feedback-thread-quote .feedback-thread-original strong {
  color: var(--color-text);
}

.dark-mode .feedback-thread-quote .feedback-thread-assunto {
  color: var(--color-muted);
}

/* Tabelas de feedbacks */
.feedback-card .table th,
#modalVisualizarFeedback .table th {
  border-top: none;
  font-weight: 600;
}

.feedback-card .badge-pill,
#modalVisualizarFeedback .badge-pill {
  font-size: 0.875rem;
}

.feedback-card .table-hover tbody tr:hover,
#modalVisualizarFeedback .table-hover tbody tr:hover {
  background-color: rgba(0, 123, 255, 0.075);
}

/* Dark mode para tabelas de feedback */
.dark-mode .feedback-card .table-hover tbody tr:hover,
.dark-mode #modalVisualizarFeedback .table-hover tbody tr:hover {
  background-color: rgba(129, 153, 255, 0.1);
}

.dark-mode .feedback-card .table th,
.dark-mode #modalVisualizarFeedback .table th {
  color: var(--color-text);
  border-color: var(--color-border);
}

.dark-mode .feedback-card .table td,
.dark-mode #modalVisualizarFeedback .table td {
  border-color: var(--color-border);
}

/* Botão de agradecer feedback (coração animado) */
.btn-outline-danger:hover {
  transform: scale(1.1);
  transition: all 0.2s ease;
}

.btn-outline-danger .fa-heart {
  animation: heartbeat 1.5s ease-in-out infinite;
}

.btn-danger .fa-heart {
  color: #fff;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

/* ========================================
   FEEDBACKS CULTURA - Estilos Adicionais
   ======================================== */

/* Compose Area - Enviar Feedback */
.modal_iframe_medio_sem_recarregar[data-frame*="modal_enviar_feedback"] {
  border: 2px dashed #dee2e6;
  transition: all 0.3s ease;
  cursor: pointer;
}

.modal_iframe_medio_sem_recarregar[data-frame*="modal_enviar_feedback"]:hover {
  background-color: #e9ecef !important;
  border-color: #007bff !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 123, 255, 0.15) !important;
}

/* Seção de Estatísticas e Relatórios */
#estatisticas-gerais-fb .card {
  transition: all 0.3s ease;
}

#estatisticas-gerais-fb .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Rankings de feedbacks */
#ranking-mais-enviou-fb .list-group-item:hover,
#ranking-mais-recebeu-fb .list-group-item:hover {
  background-color: #f8f9fa;
  cursor: pointer;
}

/* Animação para medalhas (troféus, medalhas e prêmios) */
.fa-trophy,
.fa-medal,
.fa-award {
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

/* Progress bars melhoradas */
.progress {
  border-radius: 10px;
  overflow: hidden;
}

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

/* Responsividade para feedbacks */
@media (max-width: 768px) {
  .tab-card {
    margin-bottom: 10px;
  }
}

/* Dark Mode - Feedbacks Cultura */
.dark-mode .modal_iframe_medio_sem_recarregar[data-frame*="modal_enviar_feedback"] {
  border-color: rgba(71, 85, 105, 0.5);
  background-color: rgba(30, 41, 59, 0.3);
}

.dark-mode .modal_iframe_medio_sem_recarregar[data-frame*="modal_enviar_feedback"]:hover {
  background-color: rgba(30, 41, 59, 0.6) !important;
  border-color: rgba(81, 104, 212, 0.8) !important;
  box-shadow: 0 8px 25px rgba(81, 104, 212, 0.25) !important;
}

.dark-mode #estatisticas-gerais-fb .card:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.dark-mode #ranking-mais-enviou-fb .list-group-item:hover,
.dark-mode #ranking-mais-recebeu-fb .list-group-item:hover {
  background-color: rgba(30, 41, 59, 0.6);
}

/* Parar animação quando desabilitado */
.btn[disabled] .fa-heart {
  animation: none;
}

/* Dark mode para botão de coração */
.dark-mode .btn-outline-danger {
  border-color: #dc3545;
  color: #dc3545;
}

.dark-mode .btn-outline-danger:hover {
  background-color: #dc3545;
  color: #fff;
}

.dark-mode .btn-danger {
  background-color: #dc3545;
  border-color: #dc3545;
}

/* ========================================
   ELOGIOS - Header do Card
   ======================================== */

.elogio-card .card-body>div:first-child strong {
  font-weight: 600;
  font-size: 15px;
  color: #1d2129;
}

.elogio-card .card-body>div:first-child .text-muted {
  font-size: 15px;
  color: #65676b;
  font-weight: 400;
}

.dark-mode .elogio-card .card-body>div:first-child strong {
  color: rgba(255, 255, 255, 0.95);
}

.dark-mode .elogio-card .card-body>div:first-child .text-muted {
  color: rgba(255, 255, 255, 0.6);
}

/* ========================================
   ELOGIOS - Comentários
   ======================================== */

.comentario {
  padding: 12px;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  margin-bottom: 10px;
  background-color: #f8f9fa;
}

.comentario .comentario-info {
  margin-bottom: 8px;
}

.comentario .comentario-info strong {
  font-size: 14px;
  color: #1d2129;
  font-weight: 600;
}

.comentario .comentario-info .text-muted {
  font-size: 12px;
  color: #65676b;
}

.comentario .comentario-text {
  font-size: 14px;
  color: #1d2129;
  line-height: 1.4;
}

/* Dark mode para comentários */
.dark-mode .comentario {
  background-color: rgba(40, 40, 55, 0.5);
  border-color: rgba(129, 153, 255, 0.2);
}

.dark-mode .comentario .comentario-info strong {
  color: rgba(255, 255, 255, 0.95);
}

.dark-mode .comentario .comentario-info .text-muted {
  color: rgba(255, 255, 255, 0.6);
}

.dark-mode .comentario .comentario-text {
  color: rgba(255, 255, 255, 0.85);
}

/* Container de comentários */
.comentarios-container {
  max-height: 400px;
  overflow-y: auto;
  padding: 10px 0;
}

/* Input de comentário */
.comentario-input textarea {
  border-radius: 20px;
  resize: none;
  border-color: #e9ecef;
}

.comentario-input textarea:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.dark-mode .comentario-input textarea {
  background-color: rgba(40, 40, 55, 0.6);
  border-color: rgba(129, 153, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
}

.dark-mode .comentario-input textarea:focus {
  border-color: rgba(129, 153, 255, 0.8);
  box-shadow: 0 0 0 0.2rem rgba(129, 153, 255, 0.25);
}

/* ========================================
   ELOGIOS - Imagens Responsivas
   ======================================== */

.card-text img {
  max-width: 100% !important;
  height: auto !important;
}

/* ========================================
   ELOGIOS - Dropdown de Valores
   ======================================== */

#dropdown-valores {
  max-height: 300px;
  overflow-y: auto;
}

#dropdown-valores .dropdown-item {
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#dropdown-valores .dropdown-item:hover {
  background-color: #f8f9fa;
}

#dropdown-valores .dropdown-item i {
  width: 20px;
  margin-right: 8px;
}

.dark-mode #dropdown-valores .dropdown-item:hover {
  background-color: rgba(129, 153, 255, 0.2);
}

/* ========================================
   ELOGIOS - Tooltips Customizados
   ======================================== */

/* Tooltip destinatários já definido anteriormente, mantendo coerência */
.tooltip-destinatarios:hover {
  color: #007bff !important;
}

.dark-mode .tooltip-destinatarios:hover {
  color: rgba(129, 153, 255, 1) !important;
}

/* Customizar aparência do tooltip */
.tooltip .tooltip-inner {
  background-color: #333;
  color: #fff;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  max-width: 300px;
  text-align: left;
  line-height: 1.4;
}

.tooltip .arrow::before {
  border-top-color: #333;
}

.dark-mode .tooltip .tooltip-inner {
  background-color: rgba(20, 20, 30, 0.95);
  backdrop-filter: blur(10px);
}

.dark-mode .tooltip .arrow::before {
  border-top-color: rgba(20, 20, 30, 0.95);
}

/* ========================================
   ORGANOGRAMA - Container e Layout
   ======================================== */

.organograma-container {
  overflow-x: auto;
  padding: 20px;
  background: #f8f9fa;
  min-height: 500px;
}

.dark-mode .organograma-container {
  background: rgba(30, 30, 40, 0.4);
}

/* Título principal do time */
.time-titulo-principal {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.dark-mode .time-titulo-principal {
  color: #5b9fff;
}

/* ========================================
   ORGANOGRAMA - Líderes Raiz (Página Inicial)
   ======================================== */

.lideres-raiz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
  padding: 20px 0 40px 0;
  justify-items: center;
}

/* Centralizar quando houver apenas 1 item */
.lideres-raiz-grid:has(:only-child) {
  grid-template-columns: 1fr;
  max-width: 320px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .lideres-raiz-grid {
    grid-template-columns: 1fr;
  }
}

/* Card de líder raiz */
.lider-raiz-card {
  display: block;
  background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%);
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid #ffc107;
  box-shadow: 0 3px 10px rgba(255, 193, 7, 0.2);
}

.lider-raiz-card:hover {
  text-decoration: none;
  color: inherit;
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(255, 193, 7, 0.3);
  border-color: #ffb300;
}

.dark-mode .lider-raiz-card {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(30, 30, 40, 0.8) 100%);
  border-color: rgba(255, 193, 7, 0.5);
}

.dark-mode .lider-raiz-card:hover {
  box-shadow: 0 8px 20px rgba(255, 193, 7, 0.4);
  border-color: rgba(255, 193, 7, 0.8);
}

/* Foto do líder raiz */
.lider-raiz-foto {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #ffc107;
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

.lider-raiz-card:hover .lider-raiz-foto {
  transform: scale(1.05);
  border-color: #ffb300;
}

/* Info do líder raiz */
.lider-raiz-info {
  margin-top: 10px;
}

.lider-raiz-nome {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #856404;
}

.dark-mode .lider-raiz-nome {
  color: #ffc107;
}

.lider-raiz-cargo {
  font-size: 13px;
  color: #6c757d;
  margin: 8px 0;
  line-height: 1.4;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dark-mode .lider-raiz-cargo {
  color: #a0a0b0;
}

.lider-raiz-stats {
  margin-top: 10px;
  font-size: 14px;
}

/* ========================================
   ORGANOGRAMA - Grid de Gestores (Página Inicial)
   ======================================== */

.gestores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
  padding: 20px 0;
}

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

/* Container do card de gestor */
.gestor-card-container {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.gestor-card-wrapper {
  display: flex;
  flex-direction: column;
}

.gestor-card-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border-color: var(--color-primary);
}

.dark-mode .gestor-card-container {
  background: rgba(30, 30, 40, 0.8);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark-mode .gestor-card-container:hover {
  box-shadow: 0 8px 24px rgba(129, 153, 255, 0.3);
  border-color: rgba(129, 153, 255, 0.8);
}

/* Card principal do gestor (clicável) */
.gestor-card-principal {
  display: block;
  padding: 30px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 2px solid rgba(0, 0, 0, 0.05);
}

.gestor-card-principal:hover {
  text-decoration: none;
  color: inherit;
  background: rgba(24, 51, 143, 0.03);
}

.dark-mode .gestor-card-principal {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.dark-mode .gestor-card-principal:hover {
  background: rgba(129, 153, 255, 0.05);
}

/* Foto do gestor */
.gestor-foto {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--color-primary);
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

.gestor-card-principal:hover .gestor-foto {
  transform: scale(1.05);
  border-color: #0d2366;
}

/* Info do gestor */
.gestor-info {
  margin-top: 10px;
}

.gestor-nome {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #18338f;
}

.dark-mode .gestor-nome {
  color: #8199ff;
}

.gestor-cargo {
  font-size: 14px;
  color: #6c757d;
  margin: 8px 0 0 0;
  line-height: 1.4;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dark-mode .gestor-cargo {
  color: #a0a0b0;
}

/* Lista de times */
.gestor-times-lista {
  padding: 20px 25px;
  background: rgba(0, 0, 0, 0.02);
}

.dark-mode .gestor-times-lista {
  background: rgba(0, 0, 0, 0.2);
}

/* Dropdown de times */
.gestor-times-dropdown {
  border-top: 2px solid rgba(0, 0, 0, 0.05);
}

.dark-mode .gestor-times-dropdown {
  border-top-color: rgba(255, 255, 255, 0.05);
}

.times-dropdown-toggle {
  width: 100%;
  background: rgba(0, 0, 0, 0.02);
  border: none;
  padding: 15px 20px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.times-dropdown-toggle:hover {
  background: rgba(24, 51, 143, 0.05);
  color: var(--color-primary);
}

.dark-mode .times-dropdown-toggle {
  background: rgba(0, 0, 0, 0.2);
  color: #a0a0b0;
}

.dark-mode .times-dropdown-toggle:hover {
  background: rgba(129, 153, 255, 0.1);
  color: #8199ff;
}

.times-dropdown-toggle .dropdown-icon {
  transition: transform 0.3s ease;
  font-size: 12px;
}

.times-dropdown-toggle[aria-expanded="true"] .dropdown-icon {
  transform: rotate(180deg);
}

.gestor-times-lista {
  padding: 15px 20px;
  background: rgba(0, 0, 0, 0.02);
}

.dark-mode .gestor-times-lista {
  background: rgba(0, 0, 0, 0.2);
}

.times-header {
  font-size: 14px;
  font-weight: 600;
  color: #6c757d;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dark-mode .times-header {
  color: #a0a0b0;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Item de time (clicável para filtrar) */
.time-item {
  display: block;
  padding: 12px 15px;
  margin-bottom: 8px;
  background: white;
  border-radius: 8px;
  color: #18338f;
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 15px;
  font-weight: 500;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.time-item:hover {
  background: var(--color-primary);
  color: white;
  text-decoration: none;
  transform: translateX(5px);
  box-shadow: 0 2px 8px rgba(24, 51, 143, 0.2);
}

.time-item i {
  transition: transform 0.2s ease;
}

.time-item:hover i {
  transform: translateX(3px);
}

.dark-mode .time-item {
  background: rgba(30, 30, 40, 0.6);
  color: #8199ff;
  border-color: rgba(255, 255, 255, 0.05);
}

.dark-mode .time-item:hover {
  background: rgba(129, 153, 255, 0.2);
  color: #ffffff;
}

/* ========================================
   ORGANOGRAMA - Usuários Órfãos (Sem Segmentação)
   ======================================== */

.usuarios-orfaos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

@media (max-width: 768px) {
  .usuarios-orfaos-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

/* Card de usuário órfão */
.usuario-orfao-card {
  display: block;
  background: white;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid #dc3545;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.15);
}

.usuario-orfao-card:hover {
  text-decoration: none;
  color: inherit;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(220, 53, 69, 0.25);
  border-color: #c82333;
}

.dark-mode .usuario-orfao-card {
  background: rgba(30, 30, 40, 0.8);
  border-color: rgba(220, 53, 69, 0.6);
}

.dark-mode .usuario-orfao-card:hover {
  box-shadow: 0 6px 16px rgba(220, 53, 69, 0.35);
  border-color: rgba(220, 53, 69, 0.9);
}

/* Foto do usuário órfão */
.usuario-orfao-foto {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #dc3545;
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.usuario-orfao-card:hover .usuario-orfao-foto {
  transform: scale(1.05);
  border-color: #c82333;
}

/* Info do usuário órfão */
.usuario-orfao-info {
  margin-top: 8px;
}

.usuario-orfao-nome {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
}

.dark-mode .usuario-orfao-nome {
  color: #f0f0f0;
}

.usuario-orfao-cargo {
  font-size: 13px;
  color: #6c757d;
  margin: 6px 0 10px 0;
  line-height: 1.4;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dark-mode .usuario-orfao-cargo {
  color: #a0a0b0;
}

/* ========================================
   ORGANOGRAMA - Cards de Usuário
   ======================================== */

.usuario-card {
  display: block;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 10px;
  text-align: center;
  min-width: 400px;
  max-width: 400px;
  position: relative;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.usuario-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border-color: #007bff;
  text-decoration: none;
  color: inherit;
}

.dark-mode .usuario-card {
  background: rgba(30, 30, 40, 0.8);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .usuario-card:hover {
  box-shadow: 0 4px 16px rgba(129, 153, 255, 0.3);
  border-color: rgba(129, 153, 255, 0.8);
}

/* ========================================
   ORGANOGRAMA - Hierarquia de Tamanhos
   ======================================== */

/* Nível 0: Gestor/Raiz - GRANDE */
.usuario-card.card-nivel-0 {
  min-width: 450px;
  max-width: 450px;
  padding: 35px;
}

.usuario-card.card-nivel-0 .usuario-foto {
  width: 140px;
  height: 140px;
  border-width: 4px;
}

.usuario-card.card-nivel-0 .usuario-nome {
  font-size: 26px;
  font-weight: 700;
  margin-top: 15px;
}

.usuario-card.card-nivel-0 .usuario-cargo {
  font-size: 16px;
  margin-top: 8px;
}

.usuario-card.card-nivel-0 .badge {
  font-size: 14px;
  padding: 8px 16px;
}

/* Nível 1: Líderes - MÉDIO */
.usuario-card.card-nivel-1 {
  min-width: 340px;
  max-width: 340px;
  padding: 28px;
}

.usuario-card.card-nivel-1 .usuario-foto {
  width: 100px;
  height: 100px;
  border-width: 3px;
}

.usuario-card.card-nivel-1 .usuario-nome {
  font-size: 20px;
  font-weight: 600;
  margin-top: 12px;
}

.usuario-card.card-nivel-1 .usuario-cargo {
  font-size: 15px;
  margin-top: 6px;
}

.usuario-card.card-nivel-1 .badge {
  font-size: 12px;
  padding: 6px 12px;
}

/* Nível 2+: Colaboradores/Coordenadores - PEQUENO */
.usuario-card.card-nivel-2 {
  min-width: 350px;
  max-width: 350px;
  padding: 28px;
}

.usuario-card.card-nivel-2 .usuario-foto {
  width: 70px;
  height: 70px;
}

.usuario-card.card-nivel-2 .usuario-nome {
  font-size: 16px;
  font-weight: 600;
  margin-top: 10px;
}

.usuario-card.card-nivel-2 .usuario-cargo {
  font-size: 13px;
  margin-top: 5px;
}

.usuario-card.card-nivel-2 .badge {
  font-size: 11px;
  padding: 4px 10px;
}

/* Card de Gestor */
.gestor-card {
  border: 2px solid #6f42c1;
  background: linear-gradient(135deg, #ffffff 0%, #f8f6ff 100%);
}

.gestor-card:hover {
  border-color: #5a2d91;
  box-shadow: 0 4px 20px rgba(111, 66, 193, 0.3);
}

.dark-mode .gestor-card {
  border: 2px solid rgba(143, 94, 195, 0.8);
  background: linear-gradient(135deg, rgba(30, 30, 40, 0.9) 0%, rgba(50, 40, 60, 0.9) 100%);
}

.dark-mode .gestor-card:hover {
  border-color: rgba(143, 94, 195, 1);
  box-shadow: 0 4px 20px rgba(143, 94, 195, 0.4);
}

/* ========================================
   ORGANOGRAMA - Foto e Info do Usuário
   ======================================== */

.usuario-foto {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 15px;
  border: 3px solid #e9ecef;
}

.dark-mode .usuario-foto {
  border-color: rgba(129, 153, 255, 0.3);
}

.usuario-nome {
  font-weight: 600;
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
}

.dark-mode .usuario-nome {
  color: rgba(255, 255, 255, 0.95);
}

.usuario-cargo {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}

.dark-mode .usuario-cargo {
  color: rgba(255, 255, 255, 0.7);
}

.usuario-cargo.nao-definido {
  color: #999;
  font-style: italic;
  opacity: 0.7;
}

.dark-mode .usuario-cargo.nao-definido {
  color: rgba(255, 255, 255, 0.5);
}

/* ========================================
   ORGANOGRAMA - Badges de Time e Gestor
   ======================================== */

.usuario-time {
  background: linear-gradient(45deg, #007bff, #0056b3);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 8px;
}

.dark-mode .usuario-time {
  background: linear-gradient(45deg, rgba(129, 153, 255, 0.8), rgba(100, 120, 200, 0.8));
}

.usuario-gestor {
  background: linear-gradient(45deg, #6f42c1, #5a2d91);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 4px;
  border: 1px solid #8b5cf6;
}

.dark-mode .usuario-gestor {
  background: linear-gradient(45deg, rgba(143, 94, 195, 0.8), rgba(120, 70, 160, 0.8));
  border-color: rgba(143, 94, 195, 0.6);
}

/* ========================================
   ORGANOGRAMA - Unidade
   ======================================== */

.unidade-info {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0;
}

.unidade-logo {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  margin-right: 6px;
  object-fit: cover;
}

.unidade-nome {
  font-size: 10px;
  color: #666;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dark-mode .unidade-nome {
  color: rgba(255, 255, 255, 0.6);
}

/* ========================================
   ORGANOGRAMA - Liderados Info
   ======================================== */

.liderados-info {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 6px 8px;
  margin-top: 10px;
}

.dark-mode .liderados-info {
  background: rgba(40, 40, 55, 0.5);
}

.liderados-numero {
  font-size: 14px;
  font-weight: bold;
  color: #28a745;
}

.dark-mode .liderados-numero {
  color: rgba(100, 255, 150, 0.9);
}

.liderados-label {
  font-size: 10px;
  color: #666;
  margin-top: 2px;
}

.dark-mode .liderados-label {
  color: rgba(255, 255, 255, 0.6);
}

/* ========================================
   ORGANOGRAMA - Hierarquia e Níveis
   ======================================== */

.nivel-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 20px 0;
}

.hierarquia-nivel {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 20px;
}

.filhos-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
}

.linha-hierarquia {
  width: 2px;
  height: 30px;
  background: #ddd;
  margin: 10px auto;
}

.dark-mode .linha-hierarquia {
  background: rgba(129, 153, 255, 0.3);
}

.linha-horizontal {
  height: 2px;
  background: #ddd;
  margin: 15px 0;
  min-width: 50px;
}

.dark-mode .linha-horizontal {
  background: rgba(129, 153, 255, 0.3);
}

/* ========================================
   ORGANOGRAMA - Filtros e Estatísticas
   ======================================== */

.filtro-container {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dark-mode .filtro-container {
  background: rgba(30, 30, 40, 0.8);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.estatisticas {
  display: flex;
  gap: 20px;
  margin-top: 15px;
}

.estatistica-item {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  flex: 1;
}

.dark-mode .estatistica-item {
  background: rgba(40, 40, 55, 0.6);
}

.estatistica-numero {
  font-size: 24px;
  font-weight: bold;
  color: #007bff;
}

.dark-mode .estatistica-numero {
  color: rgba(129, 153, 255, 1);
}

.estatistica-label {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}

.dark-mode .estatistica-label {
  color: rgba(255, 255, 255, 0.7);
}

/* ========================================
   ORGANOGRAMA - Grupos de Unidade
   ======================================== */

.unidade-grupo {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.dark-mode .unidade-grupo {
  background: rgba(40, 40, 55, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
}

.unidade-grupo-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 20px 30px;
  border-bottom: 2px solid #007bff;
  display: flex;
  align-items: center;
}

.dark-mode .unidade-grupo-header {
  background: linear-gradient(135deg, rgba(30, 30, 45, 0.8) 0%, rgba(40, 40, 55, 0.8) 100%);
  border-bottom-color: rgba(129, 153, 255, 1);
}

.unidade-grupo-titulo {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  color: #333;
  display: flex;
  align-items: center;
}

.dark-mode .unidade-grupo-titulo {
  color: #ffffff;
}

.unidade-grupo-content {
  padding: 30px;
  background: #fafbfc;
}

.dark-mode .unidade-grupo-content {
  background: rgba(30, 30, 45, 0.4);
}

.unidade-grupo-content .nivel-container {
  display: flex;
  flex-wrap: nowrap;
  gap: 30px;
  justify-content: center;
  align-items: flex-start;
}

.unidade-grupo-content .hierarquia-nivel {
  flex: 0 0 auto;
}

/* ========================================
   ORGANOGRAMA - Responsividade Mobile
   ======================================== */

@media (max-width: 768px) {
  .usuario-card {
    min-width: 180px;
    max-width: 180px;
    margin: 5px;
    padding: 15px;
  }

  .usuario-foto {
    width: 60px;
    height: 60px;
  }

  .hierarquia-nivel {
    margin: 0 10px;
  }

  .estatisticas {
    flex-direction: column;
    gap: 10px;
  }
}

/* Cards Navigation - z-index controlado para não sobrepor dropdowns do menu */
#cards-navigation {
  position: relative;
  z-index: 1;
}

#cards-navigation .card,
#cards-navigation .tab-card,
#cards-navigation .card:hover,
#cards-navigation .tab-card:hover,
#cards-navigation .card.border-primary,
#cards-navigation .tab-card.border-primary {
  z-index: 1 !important;
}

/* Sistema de Notificações Lateral (sideDiv) */
#sideDiv {
  position: fixed;
  top: 0;
  margin-top: 20px;
  margin-bottom: 20px;
  right: -500px;
  width: 500px;
  height: 90%;
  z-index: var(--z-sidebar-notifications) !important;
  overflow-y: auto;
}

.sideDiv-show {
  animation: sideDivSlideDown 0.3s forwards;
  display: block;
}

.sideDiv-hide {
  animation: sideDivSlideUp 0.3s forwards;
  display: block;
  pointer-events: none;
}

.sideDiv-hidden {
  display: none;
}

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

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

@keyframes sideDivSlideUp {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(-10px);
    opacity: 0;
  }
}

/* Overlay para notificações */
#modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--z-sidebar-notifications) - 100) !important;
}

.overlay-show {
  display: block;
}

.overlay-hide {
  display: none;
}

/* Divider com texto (usado em dropdowns e notificações) */
.dropdown-divider-with-text {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.75rem;
  margin: 0.5rem 0;
}

.dropdown-divider-with-text::before,
.dropdown-divider-with-text::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--glass-border);
}

.dropdown-divider-with-text:not(:empty)::before {
  margin-right: 0.5em;
}

.dropdown-divider-with-text:not(:empty)::after {
  margin-left: 0.5em;
}

/* ---------- Feedback Modal - Dropdown & User Selection ---------- */
/* Select com fotos */
.select-with-photos .dropdown-menu {
  max-height: 300px;
  overflow-y: auto;
  z-index: 10500 !important;
}

.select-with-photos .dropdown-item {
  padding: 8px 16px;
  display: flex;
  align-items: center;
  transition: var(--transition-fast);
}

.select-with-photos .dropdown-item img {
  margin-right: 12px;
  flex-shrink: 0;
}

.select-with-photos .dropdown-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Opções de usuário no dropdown customizado */
.user-option {
  display: flex;
  align-items: center;
  padding: 8px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  transition: var(--transition-fast);
}

.user-option:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.user-option:last-child {
  border-bottom: none;
}

/* Dropdown customizado */
.custom-dropdown {
  position: relative;
  z-index: auto;
}

/* Form-group que contém custom-dropdown não deve criar stacking context */
.form-group:has(.custom-dropdown) {
  position: relative;
  z-index: auto;
}

.dropdown-options {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  background: var(--glass-bg, #ffffff);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-top: none;
  border-radius: 0 0 var(--radius-sm, 4px) var(--radius-sm, 4px);
  max-height: 300px;
  overflow-y: auto;
  z-index: var(--z-dropdown) !important;
  display: none;
  box-shadow: var(--shadow-glass, 0 4px 12px rgba(0, 0, 0, 0.1));
}

.dropdown-trigger {
  cursor: pointer;
}

/* Dark mode - Feedback Modal */
.dark-mode .select-with-photos .dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.dark-mode .user-option {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .user-option:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.dark-mode .dropdown-options {
  background: rgba(30, 35, 45, 0.95);
  backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}




/* =============================
   Página de Cadastro - Tipo de Gestão (btn-group Bootstrap 4)
   ============================= */

/* Esconde o input radio mas mantém funcionalidade */
.btn-group-toggle input[type="radio"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

/* Estilo dos botões */
.btn-group-toggle .btn-outline-primary {
  text-align: left;
  transition: all 0.2s ease;
}

/* Estado ativo (quando selecionado) */
.btn-group-toggle .btn-outline-primary.active {
  background-color: #007bff;
  border-color: #007bff;
  color: #fff;
}

.btn-group-toggle .btn-outline-primary.active small {
  color: rgba(255, 255, 255, 0.85);
}

.btn-group-toggle .btn-outline-primary.active i {
  color: #fff;
}

/* Hover */
.btn-group-toggle .btn-outline-primary:hover {
  background-color: rgba(0, 123, 255, 0.1);
  border-color: #007bff;
}

/* Ícones */
.btn-group-toggle .btn-outline-primary i {
  min-width: 40px;
  color: #007bff;
}

/* Focus */
.btn-group-toggle .btn-outline-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* btn-group-toggle .btn-outline-secondary: cinza padrão, azul quando selecionado (Liquid Glass 2025) */
.btn-group-toggle .btn-outline-secondary {
  background-color: #e9ecef;
  border-color: #adb5bd;
  color: #6c757d;
}

.btn-group-toggle .btn-outline-secondary:hover {
  background-color: #dee2e6;
  border-color: #adb5bd;
  color: #495057;
}

.btn-group-toggle .btn-outline-secondary.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff !important;
}

.btn-group-toggle .btn-outline-secondary.active:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #fff !important;
}

.btn-group-toggle .btn-outline-secondary.active i {
  color: #fff !important;
}

/* Prioridade: fundo cinza padrão, Baixa=azul, Média=amarela, Alta=vermelha quando selecionado */
.btn-group-toggle.prioridade-btns .btn {
  background-color: #e9ecef;
  border-color: #adb5bd;
  color: #6c757d;
}

.btn-group-toggle.prioridade-btns .btn:hover {
  background-color: #dee2e6;
  border-color: #adb5bd;
  color: #495057;
}

.btn-group-toggle.prioridade-btns .btn-outline-primary.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff !important;
}

.btn-group-toggle.prioridade-btns .btn-outline-primary.active:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #fff !important;
}

.btn-group-toggle.prioridade-btns .btn-outline-warning.active {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #212529 !important;
}

.btn-group-toggle.prioridade-btns .btn-outline-warning.active:hover {
  background-color: #e0a800;
  border-color: #d39e00;
  color: #212529 !important;
}

.btn-group-toggle.prioridade-btns .btn-outline-danger.active {
  background-color: #dc3545;
  border-color: #dc3545;
  color: #fff !important;
}

.btn-group-toggle.prioridade-btns .btn-outline-danger.active:hover {
  background-color: #c82333;
  border-color: #bd2130;
  color: #fff !important;
}

/* Dark Mode - btn-group-toggle (radio buttons estilo botão) */
.dark-mode .btn-group-toggle .btn-outline-secondary {
  background-color: rgba(71, 85, 105, 0.4);
  border-color: rgba(100, 116, 139, 0.5);
  color: var(--color-text);
}

.dark-mode .btn-group-toggle .btn-outline-secondary:hover {
  background-color: rgba(71, 85, 105, 0.6);
  border-color: rgba(100, 116, 139, 0.7);
  color: var(--color-text);
}

.dark-mode .btn-group-toggle .btn-outline-secondary.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff !important;
}

.dark-mode .btn-group-toggle .btn-outline-secondary.active:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #fff !important;
}

.dark-mode .btn-group-toggle .btn-outline-secondary.active i {
  color: #fff !important;
}

.dark-mode .btn-group-toggle .btn-outline-secondary i {
  color: var(--color-muted);
}

/* Dark Mode - Prioridade btns */
.dark-mode .btn-group-toggle.prioridade-btns .btn {
  background-color: rgba(71, 85, 105, 0.4);
  border-color: rgba(100, 116, 139, 0.5);
  color: var(--color-text);
}

.dark-mode .btn-group-toggle.prioridade-btns .btn:hover {
  background-color: rgba(71, 85, 105, 0.6);
  border-color: rgba(100, 116, 139, 0.7);
  color: var(--color-text);
}

/* Selo do reCAPTCHA fixo no canto inferior direito */
.grecaptcha-badge {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 9999 !important;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .btn-group-toggle .btn-outline-primary.active {
    background-color: #5168d4;
    border-color: #5168d4;
  }

  .btn-group-toggle .btn-outline-primary:hover {
    background-color: rgba(81, 104, 212, 0.2);
    border-color: #5168d4;
  }

  .btn-group-toggle .btn-outline-primary i {
    color: #5168d4;
  }

  .btn-group-toggle .btn-outline-primary.active i {
    color: #fff;
  }
}

/* =============================
   Validar Rifa - Collapse responsivo
   ============================= */

/* Em telas desktop (md+), força o collapse a permanecer aberto */
@media (min-width: 768px) {
  .collapse.dont-collapse-sm {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
  }
}

/* Em mobile, permite comportamento normal de collapse */
@media (max-width: 767.98px) {
  .collapse.dont-collapse-sm {
    display: none;
  }

  .collapse.dont-collapse-sm.show {
    display: block;
  }
}

/* Dark mode para collapse */
.dark-mode .collapse.dont-collapse-sm {
  background-color: var(--card-bg);
  border-color: var(--color-border);
}

/* =============================
   Ver Produto - Card Sticky (Finalizar Compra)
   ============================= */

/* Card sticky na sidebar direita que acompanha o scroll */
.finalizar_compra {
  position: sticky;
  top: 70px;
  z-index: 100;
}

/* Em dispositivos móveis, remove o sticky */
@media (max-width: 767.98px) {
  .finalizar_compra {
    position: static;
    top: auto;
  }
}

/* =============================
   Dashboard - Perfil e Atalhos
   ============================= */

/* Avatar do perfil com borda gradiente */
.profile-avatar {
  max-width: 100%;
  height: auto;
}

/* Badge posicionada no canto do avatar (NR) */
.badge-corner {
  position: absolute;
  top: 0;
  left: 70%;
}

/* Cards de atalhos do dashboard */
.atalhos .card {
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.atalhos .card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Badge contador no canto superior direito dos cards de atalho */
.badge-count {
  position: absolute;
  left: 55%;
  top: 5px;
}

/* Seção de saudação do dashboard */
.dashboard-greeting {
  margin-bottom: 3rem;
}

/* ---------- Preview de Contratos ---------- */
.contrato-col-texto {
  margin-top: 10px;
}

.contrato-preview-wrapper {
  background: #f2f2f2;
  padding: 18px;
  margin-top: 10px;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  max-height: 75vh;
  overflow: auto;
}

.contrato-preview-toolbar {
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 6px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.contrato-preview-toolbar .btn {
  font-size: 12px;
}

.contrato-preview {
  background: #ffffff;
  margin: 0 auto;
  width: 794px;
  min-height: 1123px;
  padding: 50px 60px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  border: 1px solid #d5d5d5;
  font-family: "Times New Roman", Times, serif;
  color: #222;
  line-height: 1.5;
  position: relative;
  transition: box-shadow 0.3s;
}

.contrato-preview:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20);
}

.contrato-preview h1,
.contrato-preview h2,
.contrato-preview h3 {
  text-align: center;
  font-weight: 600;
  margin-top: 0;
}

.contrato-preview p {
  text-align: justify;
  orphans: 3;
  widows: 3;
  margin-bottom: 14px;
}

.contrato-preview ul,
.contrato-preview ol {
  margin-left: 22px;
}

.contrato-preview table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 13px;
}

.contrato-preview table th,
.contrato-preview table td {
  border: 1px solid #999;
  padding: 6px 8px;
}

.contrato-preview hr {
  border-top: 1px solid #999;
  margin: 28px 0;
}

.contrato-preview small {
  font-size: 11px;
  color: #555;
}

.contrato-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-25deg);
  font-size: 70px;
  color: rgba(0, 0, 0, 0.05);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.zoom-indicator {
  font-size: 12px;
  margin-left: 8px;
  color: #555;
}

/* Dark Mode - Preview de Contratos */
.dark-mode .contrato-preview-wrapper {
  background: rgba(30, 40, 60, 0.3);
  border-color: rgba(71, 85, 105, 0.4);
}

.dark-mode .contrato-preview-toolbar {
  background: rgba(40, 50, 70, 0.6);
  border-color: rgba(71, 85, 105, 0.4);
}

.dark-mode .contrato-preview {
  background: #ffffff;
  color: #222;
}

.dark-mode .zoom-indicator {
  color: var(--color-text);
}

/* Responsive - Preview de Contratos */
@media (max-width: 992px) {
  .contrato-preview {
    width: 100%;
    min-height: auto;
    padding: 35px 28px;
  }

  .contrato-preview-wrapper {
    max-height: none;
  }
}

/* ========================================
   ELOGIOS - Formulário de Envio
   ======================================== */

/* Área de seleção de usuários com checkbox */
#usuarios_checkbox {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 10px;
  background-color: #ffffff;
  transition: border-color var(--transition-fast);
}

#usuarios_checkbox:focus-within {
  border-color: var(--color-primary);
}

.form-check-label {
  cursor: pointer;
  transition: color var(--transition-fast);
}

.form-check-input:checked+.form-check-label {
  font-weight: 600;
  color: var(--color-primary);
}

/* Editor de mensagem com placeholder */
#mensagem_editor:empty:before {
  content: attr(placeholder);
  color: #6c757d;
  font-style: italic;
}

#mensagem_editor:focus:before {
  content: '';
}

/* Estado de botão desabilitado/habilitado */
#btn-enviar:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#btn-enviar:not(:disabled) {
  opacity: 1;
  cursor: pointer;
}

/* Dark mode */
.dark-mode #usuarios_checkbox {
  background-color: var(--color-card-bg);
  border-color: var(--color-border);
}

.dark-mode #usuarios_checkbox:focus-within {
  border-color: var(--color-primary);
}

.dark-mode .form-check-input:checked+.form-check-label {
  color: var(--color-primary);
}

.dark-mode #mensagem_editor:empty:before {
  color: var(--color-text-muted);
}

/* ========================================
   DASHBOARD - KPIs e Cards
   ======================================== */

/* Layout flexível para cards de KPI */
.dashboard-kpi {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.dashboard-kpi .card {
  flex: 1 1 200px;
  min-width: 180px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-kpi .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Dark mode para dashboard KPI */
.dark-mode .dashboard-kpi .card {
  background-color: var(--color-card-bg);
  border-color: var(--color-border);
}

.dark-mode .dashboard-kpi .card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ========================================
   RECONHECIMENTO FACIAL - Check-in/Check-out
   ======================================== */

/* Preview de reconhecimento facial */
.face-preview {
  background: #f8f9fa;
  border: 3px dashed #dee2e6;
  border-radius: 15px;
  transition: all 0.3s ease;
  min-height: 200px;
}

.face-preview.active {
  border-color: #28a745;
  background: #f8fff9;
  box-shadow: 0 0 20px rgba(40, 167, 69, 0.2);
}

/* Animação de scanning */
.scanning-animation {
  position: relative;
  overflow: hidden;
}

.scanning-animation::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(40, 167, 69, 0.3), transparent);
  animation: scan 2s infinite;
}

@keyframes scan {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

/* Ícone de rosto */
.face-icon {
  font-size: 4rem;
  color: #6c757d;
  margin-bottom: 1rem;
}

/* Botões de câmera - Desktop */
@media (min-width: 769px) {
  .camera-buttons .btn-block {
    width: auto;
    display: inline-block;
    margin: 0 0.5rem;
  }

  .main-button .btn-block {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
}

/* Responsivo - Mobile */
@media (max-width: 768px) {
  .face-preview {
    min-height: 150px;
  }

  .card-body {
    padding: 1rem;
  }

  .btn-lg {
    padding: 0.75rem 1rem;
    font-size: 1rem;
  }

  .btn-block {
    width: 100%;
  }
}

/* Responsivo - Desktop maior */
@media (min-width: 1200px) {
  .face-preview {
    min-height: 250px;
  }
}

/* Dark mode para reconhecimento facial */
.dark-mode .face-preview {
  background: var(--color-card-bg);
  border-color: var(--color-border);
}

.dark-mode .face-preview.active {
  border-color: #28a745;
  background: rgba(40, 167, 69, 0.1);
  box-shadow: 0 0 20px rgba(40, 167, 69, 0.3);
}

.dark-mode .face-icon {
  color: var(--color-text-muted);
}

/* ========================================
   CREDENCIAMENTO - Steps e Documentos
   ======================================== */

/* Step Indicator */
.step-indicator {
  text-align: center;
  flex: 1;
}

.step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e9ecef;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin: 0 auto 8px auto;
  transition: all 0.3s ease;
}

.step-circle.active {
  background-color: #007bff;
  color: white;
}

.step-circle.completed {
  background-color: #28a745;
  color: white;
}

.step-label {
  font-size: 12px;
  color: #6c757d;
  font-weight: 500;
}

.step-indicator.active .step-label {
  color: #007bff;
  font-weight: bold;
}

.step-indicator.completed .step-label {
  color: #28a745;
  font-weight: bold;
}

.step-line {
  height: 2px;
  background-color: #e9ecef;
  flex: 1;
  margin: 0 10px;
  align-self: center;
  margin-top: -20px;
}

.step-line.completed {
  background-color: #28a745;
}

/* Para esconder steps desnecessários */
.step-hidden {
  display: none !important;
}

/* Document Cards */
.document-card {
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid #dee2e6 !important;
}

.document-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.document-card.selected {
  border-color: #007bff !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.document-card.selected.cnh-card {
  border-color: #007bff !important;
  background-color: rgba(0, 123, 255, 0.05);
}

.document-card.selected.rg-card {
  border-color: #17a2b8 !important;
  background-color: rgba(23, 162, 184, 0.05);
}

/* Animations */
.step-content {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

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

/* Modal 2FA */
.codigo-2fa {
  border: 2px solid #dee2e6 !important;
  border-radius: 8px !important;
  transition: all 0.3s ease;
  animation: bounceIn 0.5s ease-out;
}

.codigo-2fa:focus {
  border-color: #007bff !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
  outline: none !important;
}

.codigo-2fa:invalid {
  border-color: #dc3545 !important;
}

#modal2FA .modal-content {
  border: none;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

#modal2FA .modal-header {
  border-radius: 15px 15px 0 0;
  border-bottom: none;
  padding: 20px 30px;
}

#modal2FA .modal-body {
  padding: 30px;
}

@keyframes bounceIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }

  50% {
    transform: scale(1.05);
  }

  70% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .step-indicator {
    margin-bottom: 15px;
    flex: none;
    width: 100%;
  }

  .step-line {
    display: none;
  }

  .d-flex.justify-content-between {
    flex-direction: column;
    gap: 10px;
  }

  .step-circle {
    width: 30px;
    height: 30px;
    font-size: 14px;
    margin-bottom: 5px;
  }

  .step-label {
    font-size: 12px;
    margin-bottom: 0;
  }

  /* Layout horizontal compacto para mobile */
  .step-indicators-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 20px;
  }

  .step-indicators-mobile .step-indicator {
    flex: 1;
    margin-bottom: 0;
    position: relative;
  }

  .step-indicators-mobile .step-indicator:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 15px;
    right: -50%;
    width: 100%;
    height: 2px;
    background: #e9ecef;
    z-index: 1;
  }

  .step-indicators-mobile .step-indicator.completed:not(:last-child)::after {
    background: #28a745;
  }

  .step-indicators-mobile .step-circle {
    position: relative;
    z-index: 2;
    background: white;
    border: 2px solid #e9ecef;
  }

  .step-indicators-mobile .step-circle.active {
    border-color: #007bff;
    background: #007bff;
  }

  .step-indicators-mobile .step-circle.completed {
    border-color: #28a745;
    background: #28a745;
  }

  .step-indicators-mobile .step-label {
    font-size: 10px;
    line-height: 1.2;
    margin-top: 3px;
  }

  .step-indicators-mobile .step-hidden {
    display: none;
  }

  .card-body {
    padding: 1rem !important;
  }

  .document-card .card-body {
    padding: 2rem 1rem !important;
  }

  .step-navigation .btn {
    padding: 10px 15px;
    font-size: 14px;
  }

  .step-content h4 {
    font-size: 1.3rem;
    margin-bottom: 10px;
  }

  .step-content p.text-muted {
    font-size: 14px;
    margin-bottom: 20px;
  }
}

@media (max-width: 576px) {
  .step-indicators-mobile {
    padding: 10px 5px;
  }

  .step-indicators-mobile .step-circle {
    width: 25px;
    height: 25px;
    font-size: 12px;
  }

  .step-indicators-mobile .step-label {
    font-size: 9px;
  }

  .document-card .card-body {
    padding: 1.5rem 0.5rem !important;
  }

  .step-content h4 {
    font-size: 1.1rem;
  }

  .codigo-2fa {
    width: 50px !important;
    height: 50px !important;
    font-size: 20px !important;
    margin: 0 4px !important;
  }

  #modal2FA .modal-body {
    padding: 20px;
  }
}

/* Dark mode para credenciamento */
.dark-mode .step-circle {
  background-color: var(--color-card-bg);
  color: var(--color-text-muted);
  border: 2px solid var(--color-border);
}

.dark-mode .step-circle.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

.dark-mode .step-circle.completed {
  background-color: #28a745;
  color: white;
  border-color: #28a745;
}

.dark-mode .step-label {
  color: var(--color-text-muted);
}

.dark-mode .step-indicator.active .step-label {
  color: #007bff;
}

.dark-mode .step-indicator.completed .step-label {
  color: #28a745;
}

.dark-mode .step-line {
  background-color: var(--color-border);
}

.dark-mode .document-card {
  background-color: var(--color-card-bg);
  border-color: var(--color-border) !important;
}

.dark-mode .document-card:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.dark-mode .document-card.selected.cnh-card {
  background-color: rgba(0, 123, 255, 0.1);
}

.dark-mode .document-card.selected.rg-card {
  background-color: rgba(23, 162, 184, 0.1);
}

.dark-mode .codigo-2fa {
  background-color: var(--color-input-bg);
  border-color: var(--color-border) !important;
  color: var(--color-text);
}

.dark-mode .codigo-2fa:focus {
  border-color: #007bff !important;
  background-color: var(--color-input-bg);
}

.dark-mode #modal2FA .modal-content {
  background-color: var(--color-card-bg);
}

.dark-mode .step-indicators-mobile {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
}

.dark-mode .step-indicators-mobile .step-circle {
  background: var(--color-card-bg);
  border-color: var(--color-border);
}

.dark-mode .step-indicators-mobile .step-indicator:not(:last-child)::after {
  background: var(--color-border);
}

/* ========================================
   FORMULÁRIOS - Labels e Campos Obrigatórios
   ======================================== */

/* Labels de formulário com destaque */
.form-group label {
  font-weight: 600;
  color: #495057;
}

/* Indicador de campo obrigatório */
.required::after {
  content: " *";
  color: #dc3545;
}

/* Cards de seção */
.section-card {
  margin-bottom: 2rem;
  border: 1px solid #dee2e6;
  border-radius: 8px;
}

.section-card .card-header {
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  padding: 1rem;
}

.section-card .card-body {
  padding: 1.5rem;
}

/* Título de seção */
.section-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

/* Dark mode para formulários */
.dark-mode .form-group label {
  color: var(--color-text);
}

.dark-mode .section-card {
  border-color: var(--color-border);
  background-color: var(--color-card-bg);
}

.dark-mode .section-card .card-header {
  background-color: rgba(255, 255, 255, 0.03);
  border-bottom-color: var(--color-border);
}

.dark-mode .section-title {
  color: var(--color-text);
}

#footer-sem-zindex {
  position: relative;
  z-index: 0 !important;
}

/* ========================================
   Z-INDEX - Camadas de Elementos
   ======================================== */

/* Corrige z-index para permitir clique no menu superior */
.container-fluid {
  position: relative;
  z-index: 1;
}

/* Garante que os cards não sobreponham o menu */
.card {
  position: relative;
  z-index: 2;
}

/* Corrige possível sobreposição de elementos */
.btn-group {
  position: relative;
  /* z-index: 3; */
}

/* ========================================
   CAMPOS OPCIONAIS - Toggle Visibility
   ======================================== */

/* Campos opcionais com transição suave */
.optional-field {
  transition: all 0.3s ease;
}

/* Estado oculto de campos opcionais */
.optional-field.hidden {
  display: none !important;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

/* ========================================
   MODAL BLOQUEADO - Forçar Uso de Botões
   ======================================== */

/* IMPORTANTE: Se precisar bloquear um modal específico, adicione uma classe personalizada
   ao modal (ex: .modal-bloqueado) e aplique os estilos abaixo apenas nessa classe.
   NÃO oculte todos os botões de fechar globalmente! */

/*
.modal-bloqueado .modal-header .close {
  display: none !important;
}

.modal-bloqueado button[data-dismiss="modal"] {
  display: none !important;
}
*/

/* Estilo para backdrop de modais que precisam forçar ação */
.modal-backdrop.modal-bloqueado-backdrop {
  opacity: 0.8 !important;
}

/* ========================================
   CONFETE - Animação de Comemoração
   ======================================== */

/* Peças de confete */
.confetti-piece {
  position: fixed;
  width: 10px;
  height: 10px;
  background-color: var(--confetti-color, #ff0);
  top: -10px;
  animation: fall 3s linear infinite;
  opacity: 0.8;
  z-index: 1050;
}

/* Animação de queda do confete */
@keyframes fall {
  to {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

/* ========================================
   NOTIFICAÇÕES INTERNAS - Conteúdo
   ======================================== */

/* Imagens dentro de notificações internas */
.conteudo_notificacao_interna img {
  max-width: 100% !important;
}

/* ========================================
   IMPRESSÃO - Ocultar Elementos
   ======================================== */

/* Ocultar elementos com classe no-print ao imprimir */
@media print {

  .no-print,
  .no-print * {
    display: none !important;
  }
}

/* ========================================
   MURAL - Mensagens Estilo Chat
   ======================================== */

/* Container de mensagens enviadas e recebidas */
.mensagem-enviada,
.mensagem-recebida {
  display: flex;
  align-items: flex-start;
  margin: 10px 0;
  position: relative;
}

/* Ícone de responder mensagens */
.responder-icone {
  font-size: 1.2em;
  color: #007bff;
  margin-left: 5px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.responder-icone:hover {
  color: #0056b3;
}

/* Alinhamento das mensagens */
.mensagem-enviada {
  justify-content: flex-end;
}

.mensagem-recebida {
  justify-content: flex-start;
}

/* Conteúdo da mensagem */
.conteudo {
  max-width: 60%;
  padding: 8px;
  border-radius: 8px;
  color: #000;
  word-wrap: break-word;
  margin-left: 10px;
}

.conteudo img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Cores das mensagens */
.mensagem-enviada .conteudo {
  background-color: #dcf8c6;
}

.mensagem-recebida .conteudo {
  background-color: #fff;
}

/* Foto do usuário */
.foto-usuario {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

/* Nome do usuário */
.nome-usuario {
  font-weight: bold;
  color: #1c1c1e;
  font-size: 0.85rem;
  margin-bottom: 3px;
  display: block;
}

/* Data e hora da mensagem */
.data-hora {
  font-size: 0.75rem;
  color: #888;
  text-align: right;
  display: block;
  margin-top: 5px;
}

/* Dark mode para mural de mensagens */
.dark-mode .conteudo {
  color: var(--color-text);
}

.dark-mode .mensagem-enviada .conteudo {
  background-color: #056162;
  color: #fff;
}

.dark-mode .mensagem-recebida .conteudo {
  background-color: var(--color-card-bg);
  color: var(--color-text);
}

.dark-mode .nome-usuario {
  color: var(--color-text);
}

.dark-mode .data-hora {
  color: var(--color-text-muted);
}

.dark-mode .responder-icone {
  color: #4da6ff;
}

.dark-mode .responder-icone:hover {
  color: #80c1ff;
}

/* ========================================
   TIMELINE - Linha do Tempo
   ======================================== */

/* Container da timeline */
.timeline {
  position: relative;
  padding-left: 30px;
}

/* Linha vertical da timeline */
.timeline:before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e9ecef;
}

/* Item da timeline */
.timeline-item {
  position: relative;
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeInUp 0.6s ease-out forwards;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

/* Marcador circular da timeline */
.timeline-marker {
  position: absolute;
  left: -23px;
  top: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: white;
  border: 2px solid #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* Item atual destacado */
.timeline-item-current .timeline-marker {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

/* Conteúdo da timeline */
.timeline-content {
  margin-left: 15px;
}

/* Card do item atual com sombra */
.timeline-item-current .card {
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.15);
}

/* Delays de animação para cada item */
.timeline-item:nth-child(1) {
  animation-delay: 0.1s;
}

.timeline-item:nth-child(2) {
  animation-delay: 0.2s;
}

.timeline-item:nth-child(3) {
  animation-delay: 0.3s;
}

.timeline-item:nth-child(4) {
  animation-delay: 0.4s;
}

.timeline-item:nth-child(5) {
  animation-delay: 0.5s;
}

/* Animação fadeInUp */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

/* Responsividade para mobile */
@media (max-width: 768px) {
  .timeline {
    padding-left: 20px;
  }

  .timeline-marker {
    left: -15px;
    width: 24px;
    height: 24px;
  }

  .timeline-content {
    margin-left: 10px;
  }
}

/* Dark mode para timeline */
.dark-mode .timeline:before {
  background: var(--color-border);
}

.dark-mode .timeline-marker {
  background: var(--color-card-bg);
  border-color: var(--color-border);
}

.dark-mode .timeline-item-current .timeline-marker {
  border-color: #4da6ff;
  box-shadow: 0 0 0 3px rgba(77, 166, 255, 0.1);
}

.dark-mode .timeline-item-current .card {
  box-shadow: 0 4px 15px rgba(77, 166, 255, 0.15);
}

/* ---------- Utilitários Específicos ---------- */
/* Thumbnail pequena para imagens */
.img-thumbnail-sm {
  height: 60px;
  max-height: 60px;
}

/* Fieldset compacto para legendas */
.fieldset-compact {
  padding: 0.5rem;
}

.fieldset-compact legend {
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

/* Avatar circular pequeno */
.avatar-sm {
  max-width: 40px;
  max-height: 40px;
}

/* Bordas arredondadas personalizadas */
.rounded-left-only {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.rounded-right-only {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Dark mode para utilitários */
.dark-mode .fieldset-compact {
  border-color: var(--color-border);
}

/* ---------- Utilitários de Largura - Planilha Vida ---------- */
/* Classes de largura específicas para colunas de tabelas */
.w-100px {
  width: 100px;
  min-width: 100px;
}

.w-150px {
  width: 150px;
  min-width: 150px;
}

.w-170px {
  width: 170px;
  min-width: 170px;
}

.w-200px {
  width: 200px;
  min-width: 200px;
}

.w-230px {
  width: 230px;
  min-width: 230px;
}

/* ---------- Células de Tabela para Collapse ---------- */
/* Célula sem borda e padding para conteúdo de collapse */
.td-collapse {
  border: none !important;
  padding: 0 !important;
}

/* Dark mode - garantir que não apareça borda */
.dark-mode .td-collapse {
  border: none !important;
}

/* ---------- Tamanho de Fonte para Cards NPS ---------- */
/* Heading de estatística NPS */
.nps-stat-heading {
  font-size: 22px;
}

/* Dark mode mantém o mesmo tamanho */
.dark-mode .nps-stat-heading {
  font-size: 22px;
}

/* ---------- Estilos do Pipeline de Turmas ---------- */
/* Container principal da coluna do pipeline */
.pipeline-column {
  min-width: 375px;
  margin: 5px;
  border-radius: 14px;
}

.dark-mode .pipeline-column {
  min-width: 375px;
  margin: 5px;
  border-radius: 14px;
}

/* Background padrão quando não há cor customizada */
.pipeline-column-default-bg {
  background: #F1F2F4;
}

.dark-mode .pipeline-column-default-bg {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Wrapper do header da coluna */
.pipeline-column-wrapper {
  width: 100%;
  z-index: 999;
}

.dark-mode .pipeline-column-wrapper {
  width: 100%;
  z-index: 999;
}

/* Header da coluna do pipeline */
.pipeline-column-header {
  padding: 10px;
  border-radius: 14px 14px 0 0;
  min-height: 60px;
}

.dark-mode .pipeline-column-header {
  padding: 10px;
  border-radius: 14px 14px 0 0;
  min-height: 60px;
}

/* Título da coluna do pipeline */
.pipeline-column-title {
  font-size: 16px;
  font-weight: 700;
}

.dark-mode .pipeline-column-title {
  font-size: 16px;
  font-weight: 700;
}

/* Faturamento total da coluna */
.pipeline-faturamento-total {
  font-size: 16px;
  font-weight: 600;
}

.dark-mode .pipeline-faturamento-total {
  font-size: 16px;
  font-weight: 600;
}

/* Card individual da turma no pipeline */
.pipeline-turma-card {
  border: 1px solid transparent;
  margin: 10px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  border-radius: 14px;
  cursor: grab;
  background: #ffffff;
}

.dark-mode .pipeline-turma-card {
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin: 10px;
  box-shadow: rgba(0, 0, 0, 0.6) 0px 8px 24px;
  border-radius: 14px;
  cursor: grab;
  background: #2d3748;
}

/* Título da turma no card */
.pipeline-turma-title {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark-mode .pipeline-turma-title {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Link do título da turma */
.pipeline-turma-title-link {
  text-decoration: none;
  color: inherit;
}

.dark-mode .pipeline-turma-title-link {
  text-decoration: none;
  color: inherit;
}

/* Labels editáveis (campos com inline edit) */
.pipeline-editable-label {
  cursor: text;
}

.dark-mode .pipeline-editable-label {
  cursor: text;
}

/* Ícone clicável */
.pipeline-icon-clickable {
  cursor: pointer;
}

.dark-mode .pipeline-icon-clickable {
  cursor: pointer;
}

/* Links de ações (ícones transparentes) */
.pipeline-icon-link {
  background: none;
  border: none;
  padding: 0;
}

.dark-mode .pipeline-icon-link {
  background: none;
  border: none;
  padding: 0;
}

.dark-mode .daterangepicker .ranges {
  background: rgba(20, 27, 45, 0.95);
}

/* Link de log com estilo customizado */
.pipeline-log-link {
  text-decoration: none;
  font-size: 1rem;
}

.dark-mode .pipeline-log-link {
  text-decoration: none;
  font-size: 1rem;
}

/* Input inline para edição */
.pipeline-inline-input {
  display: inline-block;
  width: auto;
  min-width: 150px;
}

.dark-mode .pipeline-inline-input {
  display: inline-block;
  width: auto;
  min-width: 150px;
}

/* Input de data inline */
.pipeline-inline-date {
  display: inline-block;
  width: auto;
}

.dark-mode .pipeline-inline-date {
  display: inline-block;
  width: auto;
}

/* Select inline para edição */
.pipeline-inline-select {
  display: inline-block;
  width: auto;
  min-width: 200px;
}

.dark-mode .pipeline-inline-select {
  display: inline-block;
  width: auto;
  min-width: 200px;
}

/* ===== Modal Ações Turma (Formato Livro) ===== */
.menu-item {
  transition: all 0.2s ease;
}

.menu-item:hover {
  background-color: rgba(var(--color-primary-rgb, 24, 51, 143), 0.1) !important;
  border-color: rgba(var(--color-primary-rgb, 24, 51, 143), 0.2) !important;
  text-decoration: none !important;
  transform: translateX(4px);
}

.menu-item.disabled:hover {
  background-color: transparent !important;
  transform: none !important;
}

.item-oculto {
  display: none !important;
}

/* =============================
   LOGIN PAGE - Estilos Adicionais
   ============================= */


/* Botão flutuante de dark mode */
.btn-dark-mode-float {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary);
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 9999;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
}

.btn-dark-mode-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.btn-dark-mode-float:active {
  transform: scale(0.95);
}

/* Dark mode styles */
.dark-mode .btn-dark-mode-float {
  background: #fbbf24;
  color: #1e293b;
}

/* =============================
   LOGIN SPLIT LAYOUT - Duas Colunas
   ============================= */

/* Remover padding do body na página de login */
body.login-page {
  padding: 0 !important;
  margin: 0;
  overflow-x: hidden;
}

.login-split-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* Coluna Esquerda - Formulário */
.login-split-left {
  flex: 0.4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--color-bg);
}

.login-form-wrapper {
  width: 100%;
  max-width: 400px;
}

/* Coluna Direita - Apresentação */
.login-split-right {
  flex: 0.6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  background: linear-gradient(135deg, var(--color-primary) 0%, #5168d4 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.login-split-right::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  animation: pulse 15s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.login-presentation {
  position: relative;
  z-index: 1;
  max-width: 500px;
}

.login-presentation h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.login-presentation .lead {
  font-size: 1.25rem;
  opacity: 0.95;
}

.feature-list {
  margin-top: 2.5rem;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 2rem;
  animation: fadeInUp 0.6s ease-out backwards;
}

.feature-item:nth-child(1) {
  animation-delay: 0.1s;
}

.feature-item:nth-child(2) {
  animation-delay: 0.2s;
}

.feature-item:nth-child(3) {
  animation-delay: 0.3s;
}

.feature-item:nth-child(4) {
  animation-delay: 0.4s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

.feature-item i {
  font-size: 1.5rem;
  margin-right: 1rem;
  margin-top: 0.25rem;
  color: #4ade80;
  flex-shrink: 0;
}

.feature-item h5 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: white;
}

.feature-item p {
  font-size: 0.95rem;
  margin: 0;
  opacity: 0.9;
  line-height: 1.5;
}

/* Dark Mode para Split Layout */
.dark-mode .login-split-left {
  background: var(--color-bg-dark);
}

.dark-mode .login-split-right {
  background: linear-gradient(135deg, #1e40af 0%, #312e81 100%);
}

/* Responsivo - Mobile */
@media (max-width: 991px) {
  .login-split-container {
    flex-direction: column;
  }

  .login-split-right {
    display: none;
    /* Oculta apresentação em mobile */
  }

  .login-split-left {
    min-height: 100vh;
    padding: 1.5rem 1rem;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .login-form-wrapper {
    max-width: 100%;
    border: none !important;
    outline: none !important;
  }

  /* Remover TODAS as bordas possíveis na página de login mobile */
  body.login-page * {
    outline: none !important;
  }

  body.login-page .alert {
    border: none !important;
    outline: none !important;
  }

  body.login-page .tab-content {
    border: none !important;
    outline: none !important;
  }

  /* Ajustar visual das tabs em mobile */
  body.login-page .nav-tabs {
    background: transparent;
    border: none !important;
    border-bottom: none !important;
    margin-bottom: 0;
  }

  body.login-page .nav-tabs .nav-item {
    margin-right: 2px;
  }

  body.login-page .nav-tabs .nav-item:first-child .nav-link {
    border-radius: var(--radius-md) 0 0 0;
  }

  body.login-page .nav-tabs .nav-item:last-child .nav-link {
    border-radius: 0 var(--radius-md) 0 0;
  }

  body.login-page .nav-tabs .nav-item:only-child .nav-link {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }

  body.login-page .nav-tabs .nav-link {
    background: rgba(255, 255, 255, 0.3);
    border: none !important;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    color: var(--color-text);
    font-weight: 500;
  }

  body.login-page .nav-tabs .nav-link.active {
    background: var(--glass-bg);
    border: none !important;
    font-weight: 600;
  }

  body.login-page .tab-pane {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: none !important;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding: 1.5rem 1rem;
    box-shadow: var(--shadow-soft);
  }

  /* Dark mode mobile */
  .dark-mode.login-page .nav-tabs {
    border: none !important;
  }

  .dark-mode.login-page .nav-tabs .nav-link {
    background: rgba(30, 41, 59, 0.3);
    border: none !important;
    color: var(--color-text);
  }

  .dark-mode.login-page .nav-tabs .nav-link.active {
    background: rgba(30, 41, 59, 0.95);
    border: none !important;
  }

  .dark-mode.login-page .tab-pane {
    background: rgba(30, 41, 59, 0.95);
    border: none !important;
  }
}

/* Responsivo - Tablet */
@media (min-width: 992px) and (max-width: 1199px) {
  .login-presentation h2 {
    font-size: 2rem;
  }

  .login-presentation .lead {
    font-size: 1.125rem;
  }

  .feature-item h5 {
    font-size: 1rem;
  }

  .feature-item p {
    font-size: 0.875rem;
  }
}

/* =============================
   MENU ADMINISTRATIVO - PREVIEW
   Preview "em construção" com skeleton loading
   ============================= */

/* Keyframe para animação skeleton */
@keyframes skeleton-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

@keyframes skeleton-shimmer {
  0% {
    background-position: -468px 0;
  }

  100% {
    background-position: 468px 0;
  }
}

/* Container do preview */
.admin-preview-wrapper {
  display: flex;
  flex-direction: column;
}

/* Card do preview com glassmorphism */
.admin-preview-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: all var(--transition-smooth);
}

.admin-preview-card:hover {
  box-shadow: var(--shadow-hover);
}

.admin-preview-card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--glass-border);
  padding: 1rem 1.25rem;
}

.admin-preview-card .card-header h5 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  align-items: center;
}

.admin-preview-card .card-header small {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: var(--color-muted);
}

/* Container dos elementos skeleton */
.admin-preview-skeleton {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.5rem 0;
}

/* Linhas skeleton (texto) */
.skeleton-line {
  height: 14px;
  background: linear-gradient(90deg, var(--color-border-light) 25%, rgba(255, 255, 255, 0.3) 50%, var(--color-border-light) 75%);
  background-size: 400% 100%;
  border-radius: var(--radius-xs);
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-line.w-100 {
  width: 100%;
}

.skeleton-line.w-90 {
  width: 90%;
}

.skeleton-line.w-80 {
  width: 80%;
}

.skeleton-line.w-70 {
  width: 70%;
}

.skeleton-line.w-60 {
  width: 60%;
}

.skeleton-line.w-50 {
  width: 50%;
}

.skeleton-line.w-40 {
  width: 40%;
}

.skeleton-line.w-30 {
  width: 30%;
}

/* Blocos skeleton (cards, imagens, etc) */
.skeleton-block {
  background: linear-gradient(90deg, var(--color-border-light) 25%, rgba(255, 255, 255, 0.3) 50%, var(--color-border-light) 75%);
  background-size: 400% 100%;
  border-radius: var(--radius-sm);
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-block.h-80 {
  height: 80px;
}

.skeleton-block.h-100 {
  height: 100px;
}

.skeleton-block.h-120 {
  height: 120px;
}

.skeleton-block.h-150 {
  height: 150px;
}

.skeleton-block.h-200 {
  height: 200px;
}

/* Grupo de skeleton (header + linhas) */
.skeleton-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0;
}

.skeleton-group-header {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.25rem;
}

.skeleton-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--color-border-light) 25%, rgba(255, 255, 255, 0.3) 50%, var(--color-border-light) 75%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

/* ============================================
   OKR RELATÓRIOS - Timeline de Atividades
   ============================================ */
.okr-timeline {
  position: relative;
  padding-left: 2rem;
}

.okr-timeline-item {
  position: relative;
  padding-bottom: 1.5rem;
  padding-left: 2rem;
}

.okr-timeline-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 2rem;
  bottom: -1.5rem;
  width: 2px;
  background: var(--color-border-light);
}

.okr-timeline-marker {
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-bg);
  border: 2px solid var(--color-border-light);
  border-radius: 50%;
  z-index: 1;
}

.okr-timeline-marker i {
  font-size: 0.75rem;
}

.okr-timeline-content {
  position: relative;
}

.okr-timeline-content .card {
  margin-bottom: 0;
  border-left: 3px solid var(--color-primary);
}

/* Badge skeleton */
.skeleton-badge {
  display: inline-block;
  width: 60px;
  height: 20px;
  background: linear-gradient(90deg, var(--color-border-light) 25%, rgba(255, 255, 255, 0.3) 50%, var(--color-border-light) 75%);
  background-size: 400% 100%;
  border-radius: 12px;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

/* Variação de delay para efeito cascata */
.skeleton-line:nth-child(1),
.skeleton-block:nth-child(1) {
  animation-delay: 0s;
}

.skeleton-line:nth-child(2),
.skeleton-block:nth-child(2) {
  animation-delay: 0.1s;
}

.skeleton-line:nth-child(3),
.skeleton-block:nth-child(3) {
  animation-delay: 0.2s;
}

.skeleton-line:nth-child(4),
.skeleton-block:nth-child(4) {
  animation-delay: 0.3s;
}

/* Menu de links do preview */
.admin-preview-menu .list-group-item {
  background: transparent !important;
  font-size: 0.875rem;
  transition: all var(--transition-fast);
  border-radius: var(--radius-xs) !important;
}

.admin-preview-menu .list-group-item:hover {
  background: rgba(var(--color-primary), 0.08) !important;
  padding-left: 1rem !important;
  transform: translateX(4px);
}

.admin-preview-menu .list-group-item i {
  font-size: 0.9rem;
  width: 20px;
  text-align: center;
}

.admin-preview-menu .list-group-item span {
  font-weight: 500;
  color: var(--color-text);
}

/* Dark Mode - Menu */
.dark-mode .admin-preview-menu .list-group-item:hover {
  background: rgba(81, 104, 212, 0.15) !important;
}

.dark-mode .admin-preview-menu .list-group-item span {
  color: var(--color-text);
}

/* Dark Mode - Skeleton */
.dark-mode .skeleton-line,
.dark-mode .skeleton-block,
.dark-mode .skeleton-icon,
.dark-mode .skeleton-badge {
  background: linear-gradient(90deg, rgba(71, 85, 105, 0.3) 25%, rgba(100, 116, 139, 0.2) 50%, rgba(71, 85, 105, 0.3) 75%);
  background-size: 400% 100%;
}

/* =============================
   ADMIN SIDEBAR - Painel Lateral
   ============================= */

/* Container principal do sidebar */
.admin-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  pointer-events: none;
  transition: all var(--transition-smooth);
}

.admin-sidebar.active {
  pointer-events: all;
}

.admin-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: background var(--transition-smooth);
  z-index: 10001;
}

.admin-sidebar.active .admin-sidebar-overlay {
  background: rgba(0, 0, 0, 0.5);
}

.admin-sidebar-panel {
  position: fixed;
  top: 0;
  right: -600px;
  width: 600px;
  height: 100%;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-left: 1px solid var(--glass-border);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
  transition: right var(--transition-smooth);
  z-index: 10002;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.admin-sidebar.active .admin-sidebar-panel {
  right: 0;
}

.admin-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid var(--glass-border);
  background: transparent;
  flex-shrink: 0;
}

.admin-sidebar-header h4 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  display: flex;
  align-items: center;
}

.admin-sidebar-close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--color-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.admin-sidebar-close:hover {
  background: rgba(255, 0, 0, 0.1);
  color: #dc3545;
  transform: rotate(90deg);
}

.admin-sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  -webkit-overflow-scrolling: touch;
  line-height: 1.6;
}

.admin-sidebar-content::-webkit-scrollbar {
  width: 8px;
}

.admin-sidebar-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

.admin-sidebar-content::-webkit-scrollbar-thumb {
  background: var(--color-scroll-thumb);
  border-radius: 4px;
}

.admin-sidebar-content::-webkit-scrollbar-thumb:hover {
  background: rgba(24, 51, 143, 0.4);
}

.admin-sidebar-content .list-group-item {
  background: transparent !important;
  font-size: 0.9rem;
  transition: all var(--transition-fast);
  border-radius: var(--radius-xs) !important;
  margin-bottom: 0.35rem;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  line-height: 1.6;
}

.admin-sidebar-content .list-group-item:hover {
  background: rgba(24, 51, 143, 0.08) !important;
  padding-left: 1.25rem !important;
  transform: translateX(4px);
}

.admin-sidebar-content .list-group-item i {
  font-size: 1rem;
  width: 24px;
  text-align: center;
}

.admin-sidebar-content h6 {
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-muted);
  margin-top: 1.25rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.admin-sidebar-content h6:first-child,
.admin-sidebar-content .mb-3:first-child h6 {
  margin-top: 0;
}

.admin-sidebar-content label.small {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-size: 0.75rem;
}

.admin-sidebar-content .alert {
  font-size: 0.875rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  line-height: 1.7;
  padding: 1rem 1.25rem;
}

.admin-sidebar-content .alert strong {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.4;
}

.admin-sidebar-content .form-control-sm {
  border-radius: var(--radius-sm);
}

.admin-sidebar-content .btn-sm {
  border-radius: var(--radius-sm);
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  line-height: 1.6;
}

.admin-sidebar-content .btn-block {
  margin-bottom: 0.5rem;
}

.admin-sidebar-content .mb-3 {
  margin-bottom: 1.5rem !important;
}

.admin-sidebar-content .form-group {
  margin-bottom: 0.85rem;
}

.admin-sidebar-content .input-group {
  margin-bottom: 0.5rem;
}

.admin-sidebar-content .list-group-flush {
  margin-top: 0.5rem;
}

.admin-sidebar-content .row {
  margin-bottom: 0.5rem;
}

/* =============================
   CONTA SIDEBAR - Visualização Lateral de Contas Financeiras
   ============================= */

/* Container principal da sidebar de contas */
.conta-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1030;
  pointer-events: none;
  transition: all var(--transition-smooth);
}

.conta-sidebar.active {
  pointer-events: all;
}

/* Overlay/Backdrop da sidebar de contas */
.conta-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: background var(--transition-smooth);
  z-index: 10001;
  cursor: pointer;
}

.conta-sidebar.active .conta-sidebar-overlay {
  background: rgba(0, 0, 0, 0.5);
}

/* Painel lateral da sidebar de contas */
.conta-sidebar-panel {
  position: fixed;
  top: 0;
  right: -70%;
  width: 70%;
  max-width: 1200px;
  height: 100%;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-left: 1px solid var(--glass-border);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
  transition: right var(--transition-smooth);
  z-index: 10002;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.conta-sidebar.active .conta-sidebar-panel {
  right: 0;
}

/* Badge de status no header */
.conta-sidebar-panel .status-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0.75rem;
  vertical-align: middle;
  font-size: 0.875rem;
}

/* Header da sidebar de contas */
.conta-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid var(--glass-border);
  background: transparent;
  flex-shrink: 0;
}

.conta-sidebar-header h4 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.conta-sidebar-header h4 i {
  font-size: 1.1rem;
}

.conta-sidebar-close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--color-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.conta-sidebar-close:hover {
  background: rgba(255, 0, 0, 0.1);
  color: #dc3545;
  transform: rotate(90deg);
}

.conta-sidebar-close:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
}

/* Conteúdo da sidebar de contas */
.conta-sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  -webkit-overflow-scrolling: touch;
  line-height: 1.6;
}

/* Scrollbar customizada para a sidebar de contas */
.conta-sidebar-content::-webkit-scrollbar {
  width: 8px;
}

.conta-sidebar-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

.conta-sidebar-content::-webkit-scrollbar-thumb {
  background: var(--color-scroll-thumb);
  border-radius: 4px;
}

.conta-sidebar-content::-webkit-scrollbar-thumb:hover {
  background: rgba(24, 51, 143, 0.4);
}

/* =================================================================== */
/* Modal/Painel flutuante de Notas de Notificações                     */
/* =================================================================== */
.eformei-modal-notas {
  position: fixed;
  inset: 0;
  z-index: 9700;
  display: none;
  align-items: center;
  justify-content: center;
}

.eformei-modal-notas.is-active {
  display: flex;
}

.eformei-modal-notas-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.eformei-modal-notas-dialog {
  position: relative;
  z-index: 9701;
  width: 100%;
  max-width: 480px;
  margin: 0 1rem;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}

.eformei-modal-notas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--glass-border);
}

.eformei-modal-notas-body {
  padding: 1.25rem 1.25rem 1.5rem 1.25rem;
  overflow-y: auto;
}

.eformei-modal-notas-close {
  border: none;
  background: transparent;
}

@media (max-width: 576px) {
  .eformei-modal-notas-dialog {
    max-width: 100%;
    margin: 0 0.5rem;
    max-height: 90vh;
  }
}

/* Variantes de tamanho do modal eformei-modal-notas */
.eformei-modal-notas--grande .eformei-modal-notas-dialog {
  max-width: 900px;
}

.eformei-modal-notas--xl .eformei-modal-notas-dialog {
  max-width: 1140px;
}

@media (max-width: 992px) {

  .eformei-modal-notas--grande .eformei-modal-notas-dialog,
  .eformei-modal-notas--xl .eformei-modal-notas-dialog {
    max-width: 95vw;
  }
}

/* Cards de notas dentro do modal de notificações */
.eformei-modal-notas-body .card-notas-conta {
  border-radius: var(--radius-md);
  border: 1px solid rgba(24, 51, 143, 0.08);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.75rem;
}

.eformei-modal-notas-body .card-notas-conta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  border-color: rgba(24, 51, 143, 0.18);
}

.eformei-modal-notas-body .card-notas-conta .btn {
  border-radius: var(--radius-sm);
}

/* Estilos para cards dentro da sidebar */
.conta-sidebar-content .card {
  margin-bottom: 1rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.conta-sidebar-content .card-header {
  background: rgba(24, 51, 143, 0.05);
  border-bottom: 1px solid var(--glass-border);
  padding: 0.75rem 1rem;
}

.conta-sidebar-content .card-header h5 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.conta-sidebar-content .card-body {
  padding: 1rem;
}

/* List group dentro da sidebar */
.conta-sidebar-content .list-group-item {
  background: transparent !important;
  font-size: 0.9rem;
  transition: all var(--transition-fast);
  border-radius: var(--radius-xs) !important;
  margin-bottom: 0.25rem;
  padding: 0.65rem 0.85rem;
  line-height: 1.6;
  border: 1px solid var(--glass-border);
}

.conta-sidebar-content .list-group-item:hover {
  background: rgba(24, 51, 143, 0.08) !important;
  padding-left: 1rem !important;
  transform: translateX(4px);
}

.conta-sidebar-content .list-group-item i {
  font-size: 1rem;
  width: 24px;
  text-align: center;
  margin-right: 0.5rem;
}

/* Botões de ação dentro da sidebar */
.conta-sidebar-content .btn {
  font-size: 0.875rem;
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.85rem;
  font-weight: 500;
  transition: all var(--transition-fast);
}

.conta-sidebar-content .btn-sm {
  padding: 0.4rem 0.7rem;
  font-size: 0.8rem;
}

/* Grid de botões de ação rápida */
.conta-sidebar-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.conta-sidebar-actions .btn {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.conta-sidebar-actions .btn i {
  font-size: 1rem;
  width: 20px;
  text-align: center;
}

/* Badges dentro da sidebar */
.conta-sidebar-content .badge {
  font-size: 0.75rem;
  padding: 0.35em 0.65em;
  border-radius: var(--radius-xs);
  font-weight: 600;
}

.conta-sidebar-content .badge-lg {
  font-size: 0.85rem;
  padding: 0.5em 0.85em;
}

/* =================================================================== */
/* Botão flutuante de Notas de Conta                                   */
/* =================================================================== */
.btn-notas-flutuante-wrapper {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9800;
  pointer-events: none;
  display: flex;
  gap: 10px;
}

.btn-notas-flutuante {
  pointer-events: all;
}

.btn-notas-flutuante .btn-notas-attention {
  background-color: #dc3545;
  border-color: #dc3545;
  box-shadow: 0 8px 20px rgba(220, 53, 69, 0.45);
  font-weight: 600;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  animation: notas-attention-wobble 2.4s ease-in-out infinite;
}

.btn-notas-flutuante .btn-notas-attention i {
  margin-right: 0.4rem;
}

.btn-notas-flutuante .btn-notas-attention:hover {
  box-shadow: 0 10px 26px rgba(220, 53, 69, 0.6);
  transform: translateY(-1px);
}

.btn-notas-flutuante .btn-tarefas-attention {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #212529;
  box-shadow: 0 8px 20px rgba(255, 193, 7, 0.45);
  font-weight: 600;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  animation: notas-attention-wobble 2.4s ease-in-out infinite;
}

.btn-notas-flutuante .btn-tarefas-attention i {
  margin-right: 0.4rem;
}

.btn-notas-flutuante .btn-tarefas-attention:hover {
  box-shadow: 0 10px 26px rgba(255, 193, 7, 0.6);
  transform: translateY(-1px);
}

.btn-notas-flutuante .btn-aprovacao-attention {
  background-color: #28a745;
  border-color: #28a745;
  color: #fff;
  box-shadow: 0 8px 20px rgba(40, 167, 69, 0.45);
  font-weight: 600;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  animation: notas-attention-wobble 2.4s ease-in-out infinite;
}

.btn-notas-flutuante .btn-aprovacao-attention i {
  margin-right: 0.4rem;
}

.btn-notas-flutuante .btn-aprovacao-attention:hover {
  box-shadow: 0 10px 26px rgba(40, 167, 69, 0.6);
  transform: translateY(-1px);
  color: #fff;
}

@keyframes notas-attention-wobble {

  0%,
  60%,
  100% {
    transform: translateX(0);
  }

  65% {
    transform: translateX(-3px) rotate(-1.5deg);
  }

  70% {
    transform: translateX(3px) rotate(1.5deg);
  }

  75% {
    transform: translateX(-2px) rotate(-1deg);
  }

  80% {
    transform: translateX(2px) rotate(1deg);
  }
}

@media (max-width: 576px) {
  .btn-notas-flutuante-wrapper {
    bottom: 12px;
    flex-direction: column;
    align-items: center;
  }

  .btn-notas-flutuante .btn-notas-attention,
  .btn-notas-flutuante .btn-tarefas-attention {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Accordion de dados bancários do fornecedor */
.conta-sidebar-content .card-header button[data-toggle="collapse"] {
  text-decoration: none;
  color: var(--color-text);
  padding: 0.85rem 1rem;
  border: none;
  background: transparent;
  width: 100%;
  transition: all var(--transition-fast);
}

.conta-sidebar-content .card-header button[data-toggle="collapse"]:hover {
  background: rgba(24, 51, 143, 0.05);
}

.conta-sidebar-content .card-header button[data-toggle="collapse"]:focus {
  outline: none;
  box-shadow: none;
}

.conta-sidebar-content .card-header button[data-toggle="collapse"] i.fa-chevron-down {
  transition: transform var(--transition-smooth);
}

.conta-sidebar-content .card-header button[data-toggle="collapse"][aria-expanded="true"] i.fa-chevron-down {
  transform: rotate(180deg);
}

.conta-sidebar-content .card-header button[data-toggle="collapse"] strong {
  font-weight: 600;
  font-size: 0.95rem;
}

/* Alertas dentro da sidebar */
.conta-sidebar-content .alert {
  font-size: 0.875rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  line-height: 1.7;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
}

/* Loading state */
.conta-sidebar-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
}

.conta-sidebar-loading .spinner-border {
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
}

.conta-sidebar-loading p {
  color: var(--color-muted);
  margin: 0;
}

/* Responsividade da sidebar de contas */
@media (max-width: 1400px) {
  .conta-sidebar-panel {
    width: 60%;
    right: -60%;
  }
}

@media (max-width: 1200px) {
  .conta-sidebar-panel {
    width: 70%;
    right: -70%;
    max-width: none;
  }
}

@media (max-width: 992px) {
  .conta-sidebar-panel {
    width: 80%;
    right: -80%;
  }

  .conta-sidebar-actions {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

@media (max-width: 768px) {
  .conta-sidebar-panel {
    width: 90%;
    right: -90%;
  }

  .conta-sidebar-header {
    padding: 1rem;
  }

  .conta-sidebar-header h4 {
    font-size: 1.1rem;
  }

  .conta-sidebar-content {
    padding: 1rem;
  }

  .conta-sidebar-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .conta-sidebar-panel {
    width: 100%;
    right: -100%;
  }

  .conta-sidebar-header {
    padding: 0.85rem;
  }

  .conta-sidebar-content {
    padding: 0.85rem;
  }
}

/* Animação de entrada suave */
@keyframes slideInFromRight {
  from {
    right: -50%;
    opacity: 0;
  }

  to {
    right: 0;
    opacity: 1;
  }
}

.conta-sidebar.active .conta-sidebar-panel {
  animation: slideInFromRight var(--transition-smooth) ease-out;
}

/* Seletor de Admin Customizado */
.admin-selector-wrapper {
  position: relative;
}

.admin-selector-trigger {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: 0.65rem 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all var(--transition-fast);
}

.admin-selector-trigger:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-soft);
}

.admin-selector-current {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.admin-selector-current .admin-code {
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  color: var(--color-muted);
  font-weight: 600;
}

.admin-selector-current .admin-name {
  font-weight: 500;
  color: var(--color-text);
}

.admin-selector-icon {
  font-size: 0.75rem;
  color: var(--color-muted);
  transition: transform var(--transition-fast);
}

.admin-selector-dropdown.show+.admin-selector-trigger .admin-selector-icon {
  transform: rotate(180deg);
}

.admin-selector-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: all var(--transition-smooth);
  z-index: 10100;
}

.admin-selector-dropdown.show {
  max-height: 400px;
  opacity: 1;
  transform: translateY(0);
}

.admin-selector-search {
  padding: 0.75rem;
  border-bottom: 1px solid var(--color-border-light);
  background: rgba(248, 249, 250, 0.5);
}

.admin-selector-search input {
  border-radius: var(--radius-sm);
}

.admin-selector-list {
  max-height: 320px;
  overflow-y: auto;
  padding: 0.5rem;
}

.admin-selector-list::-webkit-scrollbar {
  width: 6px;
}

.admin-selector-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

.admin-selector-list::-webkit-scrollbar-thumb {
  background: var(--color-scroll-thumb);
  border-radius: 3px;
}

.admin-selector-item {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text);
  transition: all var(--transition-fast);
  margin-bottom: 0.25rem;
  border: 1px solid transparent;
}

.admin-selector-item:hover {
  background: rgba(81, 104, 212, 0.08);
  border-color: rgba(81, 104, 212, 0.2);
  text-decoration: none;
  color: var(--color-text);
}

.admin-selector-item.active {
  background: rgba(81, 104, 212, 0.15);
  border-color: var(--color-primary);
}

.admin-selector-item .admin-code {
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  color: var(--color-muted);
  font-weight: 600;
  margin-right: 0.5rem;
}

.admin-selector-item .admin-name {
  font-weight: 500;
}

.admin-selector-item small {
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Dark Mode para Seletor de Admin */
.dark-mode .admin-selector-trigger {
  background: rgba(20, 27, 45, 0.7);
  border-color: rgba(71, 85, 105, 0.3);
}

.dark-mode .admin-selector-trigger:hover {
  background: rgba(20, 27, 45, 0.9);
  border-color: rgba(81, 104, 212, 0.5);
}

.dark-mode .admin-selector-dropdown {
  background: rgba(20, 27, 45, 0.98);
  border-color: rgba(71, 85, 105, 0.3);
}

.dark-mode .admin-selector-search {
  background: rgba(15, 23, 42, 0.5);
  border-color: rgba(71, 85, 105, 0.3);
}

.dark-mode .admin-selector-item:hover {
  background: rgba(81, 104, 212, 0.2);
  border-color: rgba(81, 104, 212, 0.4);
}

.dark-mode .admin-selector-item.active {
  background: rgba(81, 104, 212, 0.25);
  border-color: rgba(81, 104, 212, 0.6);
}

.dark-mode .admin-selector-list::-webkit-scrollbar-track {
  background: rgba(20, 27, 45, 0.3);
}

.dark-mode .admin-selector-list::-webkit-scrollbar-thumb {
  background: rgba(81, 104, 212, 0.4);
}

/* Radio buttons personalizados no sidebar */
.admin-sidebar-content .custom-control-inline {
  margin-right: 0;
  margin-bottom: 0.5rem;
  display: block;
}

.admin-sidebar-content .custom-control-label {
  font-size: 0.9rem;
  cursor: pointer;
  padding-left: 0.25rem;
}

.admin-sidebar-content .custom-radio .custom-control-label::before {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--color-border-light);
}

.admin-sidebar-content .custom-radio .custom-control-input:checked~.custom-control-label::before {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.admin-sidebar-content .custom-control-label:hover::before {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.15rem rgba(81, 104, 212, 0.15);
}

/* Dark mode para radio buttons */
.dark-mode .admin-sidebar-content .custom-radio .custom-control-label::before {
  background: rgba(20, 27, 45, 0.7);
  border-color: rgba(71, 85, 105, 0.4);
}

.dark-mode .admin-sidebar-content .custom-radio .custom-control-input:checked~.custom-control-label::before {
  background: rgba(81, 104, 212, 0.9);
  border-color: rgba(81, 104, 212, 0.9);
}

/* Prevenir scroll do body quando sidebar aberto */
body.admin-sidebar-open {
  overflow: hidden;
}

/* Dark Mode */
.dark-mode .admin-sidebar-panel {
  background: rgba(20, 27, 45, 0.95);
  border-left: 1px solid rgba(71, 85, 105, 0.3);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
}

.dark-mode .admin-sidebar-header {
  border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}

.dark-mode .admin-sidebar-close:hover {
  background: rgba(220, 53, 69, 0.2);
}

.dark-mode .admin-sidebar-content .list-group-item:hover {
  background: rgba(81, 104, 212, 0.15) !important;
}

.dark-mode .admin-sidebar-content::-webkit-scrollbar-track {
  background: rgba(20, 27, 45, 0.3);
}

.dark-mode .admin-sidebar-content::-webkit-scrollbar-thumb {
  background: rgba(81, 104, 212, 0.4);
}

.dark-mode .admin-sidebar-content::-webkit-scrollbar-thumb:hover {
  background: rgba(81, 104, 212, 0.6);
}

.dark-mode .admin-sidebar-content h6 {
  color: rgba(148, 163, 184, 0.8);
  border-bottom-color: rgba(71, 85, 105, 0.3);
}

.dark-mode .admin-sidebar-content label.small {
  color: rgba(148, 163, 184, 0.8);
}

.dark-mode .admin-sidebar-content .alert {
  background: rgba(81, 104, 212, 0.1);
  border-color: rgba(81, 104, 212, 0.2);
  color: rgba(226, 232, 240, 0.95);
}

/* Responsivo */
@media (max-width: 991px) {
  .admin-preview-wrapper {
    margin-top: 1rem;
  }

  .admin-preview-card .card-body {
    padding: 1rem;
  }
}

@media (max-width: 767px) {
  .admin-preview-wrapper {
    display: none;
  }

  .admin-sidebar-panel {
    width: 100%;
    right: -100%;
  }
}

@media (max-width: 575px) {
  .admin-sidebar-header {
    padding: 1rem;
  }

  .admin-sidebar-header h4 {
    font-size: 1.1rem;
  }

  .admin-sidebar-content {
    padding: 1rem;
  }
}

/* =============================
   SEARCH SIDEBAR - Busca Top-Down
   ============================= */
/* Reutiliza estrutura do .admin-sidebar mas desce de cima */
.search-sidebar {
  z-index: 8500;
}

.search-sidebar-overlay {
  z-index: 8501;
}

.search-sidebar-panel {
  z-index: 8502;
  top: -100%;
  /* Começa escondido acima */
  right: auto;
  left: 0;
  width: 100%;
  height: auto;
  max-height: 80vh;
  border-left: none;
  border-bottom: 1px solid var(--glass-border);
}

.search-sidebar.active .search-sidebar-panel {
  top: 0;
  /* Desce ao ativar */
}

/* Lista única unificada — clientes, turmas, faturas, contas misturados
   numa lista vertical, com chips de filtro por tipo no topo. */
.search-results-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: var(--glass-bg, rgba(255, 255, 255, 0.85));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--glass-border, rgba(0, 0, 0, 0.08));
  flex-wrap: wrap;
}

.search-results-total {
  font-size: 0.8rem;
  color: var(--color-muted, #6c757d);
  font-weight: 500;
  white-space: nowrap;
}

.search-results-filters {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  flex: 1;
  justify-content: flex-end;
}

.search-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.12));
  border-radius: 999px;
  color: var(--color-muted, #6c757d);
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.2;
}

.search-chip:hover {
  background: rgba(24, 51, 143, 0.08);
  color: var(--color-primary, #18338f);
  border-color: var(--color-primary, #18338f);
}

.search-chip.active {
  background: var(--color-primary, #18338f);
  color: #fff;
  border-color: var(--color-primary, #18338f);
}

.search-chip-error {
  color: #dc3545;
  border-color: rgba(220, 53, 69, 0.4);
}

.search-chip-count {
  background: rgba(0, 0, 0, 0.08);
  padding: 0 0.4rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
}

.search-chip.active .search-chip-count {
  background: rgba(255, 255, 255, 0.25);
}

.search-results-list {
  padding: 0.5rem 1rem 1rem;
  overflow-x: hidden;
}

.search-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--color-muted, #6c757d);
  font-size: 0.9rem;
}

.search-item {
  display: flex;
  gap: 0.6rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.08));
  border-radius: var(--radius-md, 0.5rem);
  background: var(--glass-bg, rgba(255, 255, 255, 0.7));
  margin-bottom: 0.5rem;
  min-width: 0;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.search-item:hover {
  border-color: var(--color-primary, #18338f);
}

.search-item-tag {
  align-self: flex-start;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.7rem;
  padding: 0.3rem 0.5rem;
}

.search-item-body {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.search-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  flex-wrap: wrap;
}

.search-item-title {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
  word-break: break-word;
}

.search-item-title:hover {
  text-decoration: none;
  color: var(--color-primary, #18338f);
}

.search-item-id {
  font-size: 0.7rem;
  color: var(--color-muted, #6c757d);
  font-weight: 500;
}

.search-item-meta {
  font-size: 0.8rem;
  color: var(--color-muted, #6c757d);
  margin-bottom: 0.35rem;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.search-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.search-item-actions .btn {
  font-size: 0.72rem;
  padding: 0.2rem 0.45rem;
}

.search-item-actions .btn i {
  font-size: 0.7rem;
}

/* Busca Rápida - Botões de ação nos resultados */
.search-sidebar .list-group-item {
  border-left: 3px solid transparent;
  transition: border-color 0.2s ease;
}

.search-sidebar .list-group-item:hover {
  border-left-color: var(--color-primary);
}

.search-sidebar .btn-group-sm .btn {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

.search-sidebar .btn-group-sm .btn i {
  font-size: 0.7rem;
}

/* =============================
   TIMELINE - Log de Atividades
   ============================= */
.timeline {
  position: relative;
  padding-left: 0;
}

.timeline-item {
  position: relative;
  padding-bottom: 1rem;
}

.timeline-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 40px;
  bottom: -10px;
  width: 2px;
  background: var(--color-border);
}

.avatar-sm {
  width: 40px;
  height: 40px;
  font-size: 1rem;
}

.bg-success-soft {
  background-color: rgba(40, 199, 111, 0.1) !important;
}

.bg-info-soft {
  background-color: rgba(0, 143, 251, 0.1) !important;
}

.bg-danger-soft {
  background-color: rgba(234, 84, 85, 0.1) !important;
}

.bg-warning-soft {
  background-color: rgba(255, 159, 67, 0.1) !important;
}

.bg-secondary-soft {
  background-color: rgba(108, 117, 125, 0.1) !important;
}

/* =============================
   EFORMEI SIDEBAR - Sistema Unificado v1.0
   POC: Assinaturas Sidebar
   ============================= */

/* Container principal - invisível até ativar */
.eformei-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  pointer-events: none;
  transition: all var(--transition-smooth);
}

.eformei-sidebar.active {
  pointer-events: all;
}

/* Overlay escuro */
.eformei-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: background var(--transition-smooth);
  z-index: 10001;
  cursor: pointer;
}

.eformei-sidebar.active .eformei-sidebar-overlay {
  background: rgba(0, 0, 0, 0.5);
}

/* Painel lateral base */
.eformei-sidebar-panel {
  position: fixed;
  top: 0;
  right: -100%;
  height: 100%;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-left: 1px solid var(--glass-border);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
  transition: right var(--transition-smooth);
  z-index: 10002;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.eformei-sidebar.active .eformei-sidebar-panel {
  right: 0;
}

/* Variantes de tamanho */
.eformei-sidebar-panel.sidebar-sm {
  width: 400px;
}

.eformei-sidebar-panel.sidebar-md {
  width: 600px;
}

.eformei-sidebar-panel.sidebar-lg {
  width: 800px;
  max-width: 90vw;
}

.eformei-sidebar-panel.sidebar-xl {
  width: 90vw;
}

.eformei-sidebar-panel.sidebar-fullwidth {
  width: 100vw;
  max-width: 100%;
}

/* Header fixo */
.eformei-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid var(--glass-border);
  background: transparent;
  flex-shrink: 0;
}

.eformei-sidebar-header h4 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.eformei-sidebar-header h4 i {
  font-size: 1.1rem;
}

.eformei-sidebar-header .badge {
  font-size: 0.85rem;
  padding: 0.35rem 0.6rem;
  margin-left: 0.5rem;
}

/* Botão fechar */
.eformei-sidebar-close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--color-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.eformei-sidebar-close:hover {
  background: rgba(255, 0, 0, 0.1);
  color: #dc3545;
  transform: rotate(90deg);
}

.eformei-sidebar-close:focus {
  outline: none;
}

/* Conteúdo scrollável */
.eformei-sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  padding-bottom: 80px;
  /* Espaço para o botão de reload */
  -webkit-overflow-scrolling: touch;
  line-height: 1.6;
  position: relative;
}

/* Scrollbar customizada */
.eformei-sidebar-content::-webkit-scrollbar {
  width: 8px;
}

.eformei-sidebar-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

.eformei-sidebar-content::-webkit-scrollbar-thumb {
  background: var(--color-scroll-thumb);
  border-radius: 4px;
}

.eformei-sidebar-content::-webkit-scrollbar-thumb:hover {
  background: rgba(24, 51, 143, 0.4);
}

/* Loading state */
.eformei-sidebar-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  text-align: center;
  min-height: 200px;
}

.eformei-sidebar-loading .spinner-border {
  width: 3rem;
  height: 3rem;
}

.eformei-sidebar-loading p {
  margin-top: 1rem;
  font-size: 0.9rem;
}

/* Botão de reload no sidebar - estilo simples no header */
.btn-reload-sidebar-reuniao.reloading {
  pointer-events: none;
}

.btn-reload-sidebar-reuniao.reloading i {
  animation: spinReloadBtn 0.8s linear infinite;
}

@keyframes spinReloadBtn {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Responsivo - Mobile */
@media (max-width: 768px) {
  .eformei-sidebar-panel {
    width: 100% !important;
    max-width: none !important;
  }

  .eformei-sidebar-header {
    padding: 1rem;
  }

  .eformei-sidebar-content {
    padding: 1rem;
  }
}

/* Sobrescrita de z-index para selects dentro do sidebar */
.eformei-sidebar .bootstrap-select .dropdown-menu {
  z-index: 10005 !important;
}

/* ===================================================================
   Tabela Relatório Consolidado - Colunas Fixas com Glass Effect
   ================================================================== */

/* Container da tabela com scroll horizontal */
.scrolling-wrapper {
  position: relative;
}

/* Tabela principal - permite scroll horizontal */
.datatablePlanilhaVida {
  position: relative;
}

/* Colunas fixas (3 primeiras: Nome, Status, Nome Pacote) */
.datatablePlanilhaVida thead th:nth-child(1),
.datatablePlanilhaVida tbody td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 100;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-right: 1px solid var(--glass-border);
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
  transition: all var(--transition-fast);
  min-width: 200px;
}

.datatablePlanilhaVida thead th:nth-child(2),
.datatablePlanilhaVida tbody td:nth-child(2) {
  position: sticky;
  left: 200px;
  /* largura da coluna 1 */
  z-index: 100;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-right: 1px solid var(--glass-border);
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
  transition: all var(--transition-fast);
  min-width: 150px;
}

.datatablePlanilhaVida thead th:nth-child(3),
.datatablePlanilhaVida tbody td:nth-child(3) {
  position: sticky;
  left: 350px;
  /* largura das colunas 1 + 2 */
  z-index: 100;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-right: 2px solid var(--color-primary);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-fast);
  min-width: 180px;
}

/* Quando há scroll (classe adicionada via JS), remove efeito glass */
.scrolling-wrapper.scrolled .datatablePlanilhaVida thead th:nth-child(1),
.scrolling-wrapper.scrolled .datatablePlanilhaVida tbody td:nth-child(1),
.scrolling-wrapper.scrolled .datatablePlanilhaVida thead th:nth-child(2),
.scrolling-wrapper.scrolled .datatablePlanilhaVida tbody td:nth-child(2),
.scrolling-wrapper.scrolled .datatablePlanilhaVida thead th:nth-child(3),
.scrolling-wrapper.scrolled .datatablePlanilhaVida tbody td:nth-child(3) {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

/* Última coluna fixa mantém borda mais forte para separação visual */
.scrolling-wrapper.scrolled .datatablePlanilhaVida thead th:nth-child(3),
.scrolling-wrapper.scrolled .datatablePlanilhaVida tbody td:nth-child(3) {
  border-right: 2px solid var(--color-primary);
  box-shadow: 3px 0 6px rgba(0, 0, 0, 0.15);
}

/* Dark mode - Colunas fixas */
.dark-mode .datatablePlanilhaVida thead th:nth-child(1),
.dark-mode .datatablePlanilhaVida tbody td:nth-child(1),
.dark-mode .datatablePlanilhaVida thead th:nth-child(2),
.dark-mode .datatablePlanilhaVida tbody td:nth-child(2),
.dark-mode .datatablePlanilhaVida thead th:nth-child(3),
.dark-mode .datatablePlanilhaVida tbody td:nth-child(3) {
  background: var(--glass-bg-dark);
}

/* Dark mode - Quando há scroll, remove glass */
.dark-mode .scrolling-wrapper.scrolled .datatablePlanilhaVida thead th:nth-child(1),
.dark-mode .scrolling-wrapper.scrolled .datatablePlanilhaVida tbody td:nth-child(1),
.dark-mode .scrolling-wrapper.scrolled .datatablePlanilhaVida thead th:nth-child(2),
.dark-mode .scrolling-wrapper.scrolled .datatablePlanilhaVida tbody td:nth-child(2),
.dark-mode .scrolling-wrapper.scrolled .datatablePlanilhaVida thead th:nth-child(3),
.dark-mode .scrolling-wrapper.scrolled .datatablePlanilhaVida tbody td:nth-child(3) {
  background: rgba(30, 30, 30, 0.98);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Hover nas linhas - colunas fixas devem acompanhar */
.datatablePlanilhaVida tbody tr:hover td:nth-child(1),
.datatablePlanilhaVida tbody tr:hover td:nth-child(2),
.datatablePlanilhaVida tbody tr:hover td:nth-child(3) {
  background: rgba(24, 51, 143, 0.05);
}

.dark-mode .datatablePlanilhaVida tbody tr:hover td:nth-child(1),
.dark-mode .datatablePlanilhaVida tbody tr:hover td:nth-child(2),
.dark-mode .datatablePlanilhaVida tbody tr:hover td:nth-child(3) {
  background: rgba(59, 130, 246, 0.1);
}

/* Scrollbar customizada para container */
.scrolling-wrapper::-webkit-scrollbar {
  height: 10px;
}

.scrolling-wrapper::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 5px;
}

.scrolling-wrapper::-webkit-scrollbar-thumb {
  background: var(--color-scroll-thumb);
  border-radius: 5px;
}

.scrolling-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(24, 51, 143, 0.5);
}

/* Responsivo - Mobile (remove sticky em telas pequenas) */
@media (max-width: 768px) {

  .datatablePlanilhaVida thead th:nth-child(1),
  .datatablePlanilhaVida tbody td:nth-child(1),
  .datatablePlanilhaVida thead th:nth-child(2),
  .datatablePlanilhaVida tbody td:nth-child(2),
  .datatablePlanilhaVida thead th:nth-child(3),
  .datatablePlanilhaVida tbody td:nth-child(3) {
    position: static;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-right: 1px solid var(--color-border-light);
    box-shadow: none;
  }
}

/* ========================================
   Orçamento de Produção - Tabelas
   ======================================== */
.table_orcamento_itens td {
  padding: 2px;
  vertical-align: middle;
}

.table_planos_de_adesao td {
  vertical-align: middle;
}

/* ========================================
   Classes Utilitárias - Larguras Fixas
   ======================================== */
.w-60 {
  width: 60px !important;
}

.w-70 {
  width: 70px !important;
}

.w-110 {
  width: 110px !important;
}

.w-120 {
  width: 120px !important;
}

.w-150 {
  width: 150px !important;
}

.w-170 {
  width: 170px !important;
}

.w-180 {
  width: 180px !important;
}

/* Cursor pointer - usar quando elemento é clicável */
.cursor-pointer {
  cursor: pointer !important;
}

/* Font sizes utilitários */
.fs-14 {
  font-size: 14px !important;
}

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

.fs-18 {
  font-size: 18px !important;
}



/* ========================================
   Fechamento Financeiro - Log de Execução
   ======================================== */
.fechamento-log-container {
  height: 400px;
  max-height: 400px;
  overflow-y: auto;
  scroll-behavior: smooth;
  background: #1a1a2e;
  border-radius: var(--radius-md);
  font-family: "Fira Code", "Monaco", "Consolas", monospace;
  font-size: 12px;
  line-height: 1.6;
}

.fechamento-log-container::-webkit-scrollbar {
  width: 8px;
}

.fechamento-log-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

.fechamento-log-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.log-entry {
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.log-entry:last-child {
  border-bottom: none;
}

.log-entry .log-time {
  color: #6c757d;
  font-size: 11px;
  min-width: 65px;
  flex-shrink: 0;
}

.log-entry .log-icon {
  min-width: 18px;
  text-align: center;
}

.log-entry .log-message {
  flex: 1;
}

.log-entry .log-detail {
  color: #888;
  font-size: 11px;
  margin-left: auto;
}

/* Estados do log */
.log-info {
  color: #a0c4ff;
}

.log-info .log-icon {
  color: #4dabf7;
}

.log-success {
  color: #b2f2bb;
}

.log-success .log-icon {
  color: #51cf66;
}

.log-error {
  color: #ffc9c9;
}

.log-error .log-icon {
  color: #ff6b6b;
}

.log-warning {
  color: #ffec99;
}

.log-warning .log-icon {
  color: #fcc419;
}

.log-loading {
  color: #d0bfff;
}

.log-loading .log-icon {
  color: #9775fa;
}

/* ===================================================================
 * OKR - Accordion Meus Liderados
 * Agrupamento por nível hierárquico (Líderes, Coordenadores, Colaboradores)
 * =================================================================== */

.accordion-liderados {
  border: none;
}

.accordion-item-liderados {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-sm);
  background: var(--glass-bg);
  overflow: hidden;
}

.accordion-header-liderados .btn-link {
  color: var(--color-text);
  text-decoration: none;
  background: transparent;
  border: none;
  font-size: 0.85rem;
  transition: all var(--transition-fast);
}

.accordion-header-liderados .btn-link:hover {
  background: rgba(0, 0, 0, 0.03);
  text-decoration: none;
}

.accordion-header-liderados .btn-link:focus {
  box-shadow: none;
  text-decoration: none;
}

.accordion-icon-liderados {
  font-size: 0.7rem;
  transition: transform var(--transition-fast);
  color: var(--color-muted);
}

.accordion-header-liderados .btn-link:not(.collapsed) .accordion-icon-liderados {
  transform: rotate(180deg);
}

.accordion-body-liderados {
  padding: 0.5rem 0;
  background: rgba(0, 0, 0, 0.01);
  max-height: 300px;
  overflow-y: auto;
}

/* Scrollbar para accordion de liderados */
.accordion-body-liderados::-webkit-scrollbar {
  width: 4px;
}

.accordion-body-liderados::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03);
}

.accordion-body-liderados::-webkit-scrollbar-thumb {
  background: var(--color-scroll-thumb);
  border-radius: 2px;
}

/* Hover effect para itens de liderado */
.liderado-item-hover {
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.liderado-item-hover:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

/* ========================================
   Sidebar Pessoa One-on-One - Seção Tarefas
   ======================================== */

.tarefas-lista {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tarefa-item {
  padding: 1rem;
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition: all var(--transition-fast);
}

.tarefa-item:hover {
  box-shadow: var(--shadow-soft);
  border-color: var(--color-primary);
}

.tarefa-item.tarefa-concluida {
  opacity: 0.7;
  background: rgba(0, 0, 0, 0.02);
}

.tarefa-item.tarefa-pendente {
  border-left: 3px solid var(--color-warning);
}

.tarefa-item.tarefa-concluida {
  border-left: 3px solid var(--color-success);
}

/* Filtros de tarefas */
.filtro-tarefas {
  transition: all var(--transition-fast);
}

.filtro-tarefas.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Ocultar tarefas filtradas */
.tarefa-item.oculta {
  display: none;
}

/* ========================================
   Sidebar Pessoa One-on-One - Seção Histórico
   ======================================== */

.historico-timeline {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
  padding-left: 2.5rem;
  margin-top: 1.5rem;
}

.historico-timeline::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom,
      var(--color-primary) 0%,
      rgba(24, 51, 143, 0.3) 50%,
      transparent 100%);
}

.historico-item {
  position: relative;
  padding: 1.25rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(24, 51, 143, 0.1);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.historico-item:hover {
  box-shadow: 0 4px 12px rgba(24, 51, 143, 0.15);
  border-color: var(--color-primary);
  transform: translateX(4px);
  background: rgba(255, 255, 255, 0.8);
}

.historico-marker {
  position: absolute;
  left: -2rem;
  top: 1.5rem;
  width: 12px;
  height: 12px;
  background: var(--color-primary);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(24, 51, 143, 0.3);
  z-index: 1;
}

.historico-item:hover .historico-marker {
  transform: scale(1.3);
  box-shadow: 0 3px 10px rgba(24, 51, 143, 0.5);
}

.historico-content h6 {
  color: var(--color-dark);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.historico-content .text-muted {
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.historico-content .badge-light {
  background-color: rgba(24, 51, 143, 0.1);
  color: var(--color-primary);
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.35rem 0.65rem;
  font-weight: 500;
  font-size: 0.75rem;
  border-radius: 12px;
}

.historico-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* ========================================
   ONE ON ONE - PRIORIDADES DA SEMANA
   ======================================== */

.prioridades-lista {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.prioridade-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 193, 7, 0.05);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.prioridade-item:hover {
  background: rgba(255, 193, 7, 0.1);
  transform: translateX(4px);
}

.prioridade-numero {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
  position: relative;
}

.prioridade-numero i {
  font-size: 0.75rem;
  position: absolute;
  top: 8px;
}

.prioridade-numero span {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 8px;
}

.prioridade-texto {
  flex: 1;
  display: flex;
  align-items: center;
}

.prioridade-texto p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-dark);
}

/* ==========================================================================
   Tags Input - Campo de busca com múltiplas tags
   ========================================================================== */

.tags-input-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: calc(1.5em + 0.75rem + 2px);
  padding: 0.25rem 0.5rem;
  background: var(--input-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  cursor: text;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tags-input-container:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(24, 51, 143, 0.15);
}

.tags-input-container .tag-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  line-height: 1.4;
  white-space: nowrap;
  animation: tagFadeIn 0.2s ease;
}

@keyframes tagFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.tags-input-container .tag-item .tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: rgba(255, 255, 255, 0.25);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  cursor: pointer;
  transition: background var(--transition-fast);
  padding: 0;
  line-height: 1;
}

.tags-input-container .tag-item .tag-remove:hover {
  background: rgba(255, 255, 255, 0.4);
}

.tags-input-container .tags-input-field {
  flex: 1;
  min-width: 80px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.875rem;
  padding: 2px 0;
}

.tags-input-container .tags-input-field::placeholder {
  color: var(--color-muted);
}

.tags-input-container.has-tags .tags-input-field::placeholder {
  opacity: 0.6;
}


/* ===================================================================
   Planilha Viva - Detalhamento de Despesas de Eventos
   =================================================================== */

/* Container com scroll horizontal para tabela de eventos */
.eventos-tabela-scroll {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary-lighter) transparent;
}

.eventos-tabela-scroll::-webkit-scrollbar {
  height: 10px;
}

.eventos-tabela-scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 5px;
}

.eventos-tabela-scroll::-webkit-scrollbar-thumb {
  background: var(--color-primary-lighter);
  border-radius: 5px;
}

.eventos-tabela-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* Colunas de detalhamento de despesas */
.despesa-detalhe-col {
  background: linear-gradient(135deg, rgba(24, 51, 143, 0.03) 0%, rgba(24, 51, 143, 0.08) 100%);
  border-left: 2px solid rgba(24, 51, 143, 0.15) !important;
  transition: background var(--transition-fast);
  min-width: 120px;
  max-width: 150px;
  vertical-align: middle;
}

.despesa-detalhe-col:hover {
  background: linear-gradient(135deg, rgba(24, 51, 143, 0.08) 0%, rgba(24, 51, 143, 0.12) 100%);
}

thead th.despesa-detalhe-col {
  font-size: 0.75rem !important;
  padding: 8px 6px !important;
  background: linear-gradient(135deg, rgba(24, 51, 143, 0.08) 0%, rgba(24, 51, 143, 0.15) 100%);
}

tbody td.despesa-detalhe-col {
  padding: 4px 6px !important;
}

/* Controles de detalhamento */
#despesas-detalhadas-controles {
  gap: 0.5rem;
}

#despesas-detalhadas-controles .btn-group .btn {
  font-size: 0.8rem;
  padding: 0.35rem 0.75rem;
}

#despesas-detalhadas-controles .btn.active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

#despesas-detalhadas-info {
  font-size: 0.75rem;
  padding: 0.3rem 0.6rem;
}

/* Animação suave para colunas dinâmicas */
@keyframes fadeInCol {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

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

.despesa-detalhe-col {
  animation: fadeInCol 0.3s ease forwards;
}

/* Responsividade */
@media (max-width: 768px) {
  #despesas-detalhadas-controles {
    flex-direction: column;
    align-items: flex-start !important;
  }

  #despesas-detalhadas-controles .btn-group {
    margin-top: 0.5rem;
  }
}

/* ================= Gestão de Pessoas - Funil / Stepper ================= */
.gestao-pessoas-funil {
  background: var(--glass-bg, #f8f9fa);
  border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.1));
  border-radius: var(--radius-md, 0.5rem);
  padding: 1rem 1.5rem;
}

.gestao-pessoas-stepper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

/* Tela de detalhe: uma linha só, fio contínuo entre os bullets */
.gestao-pessoas-stepper-detalhe {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.gestao-pessoas-stepper-detalhe .gestao-pessoas-step {
  flex: 0 0 auto;
}

.gestao-pessoas-stepper-detalhe .gestao-pessoas-step-label {
  white-space: nowrap;
}

.gestao-pessoas-step {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.gestao-pessoas-step-bullet {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-muted, #6c757d);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  flex-shrink: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
  position: relative;
  z-index: 1;
}

.gestao-pessoas-step.active .gestao-pessoas-step-bullet {
  background: var(--color-primary, #18338f);
  color: #fff;
}

.gestao-pessoas-step.done .gestao-pessoas-step-bullet {
  background: var(--color-success, #28a745);
  color: #fff;
}

.gestao-pessoas-step-bullet.bullet-outline {
  background: transparent;
  border: 2px solid var(--color-muted, #6c757d);
  color: var(--color-muted, #6c757d);
}

.gestao-pessoas-step.active .gestao-pessoas-step-bullet.bullet-outline,
.gestao-pessoas-step.done .gestao-pessoas-step-bullet.bullet-outline {
  background: var(--color-primary, #18338f);
  border-color: var(--color-primary, #18338f);
  color: #fff;
}

.gestao-pessoas-step-label {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-muted, #6c757d);
  white-space: nowrap;
}

.gestao-pessoas-step.active .gestao-pessoas-step-label {
  color: var(--color-primary, #18338f);
  font-weight: 600;
}

.gestao-pessoas-step.done .gestao-pessoas-step-label {
  color: inherit;
}

.gestao-pessoas-step-line {
  width: 20px;
  min-width: 20px;
  height: 2px;
  background: var(--glass-border, rgba(0, 0, 0, 0.15));
  flex-shrink: 0;
  align-self: center;
}

.gestao-pessoas-step.done .gestao-pessoas-step-line {
  background: var(--color-success, #28a745);
}

.gestao-pessoas-stepper-saidas .gestao-pessoas-step-line {
  display: none;
}

/* Detalhe: alert (Unidade/Cargo) mais distante do nome e letra maior */
.gestao-pessoas-detalhe-alert {
  margin-top: 1.25rem !important;
}

.gestao-pessoas-detalhe-alert-text {
  font-size: 1rem;
  line-height: 1.5;
}

/* Cards de ações: um por linha, mais espaçamento, borda fina */
.gestao-pessoas-acoes-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.gestao-pessoas-acao-card-wrapper {
  width: 100%;
}

.gestao-pessoas-acao-card {
  border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.08));
  border-radius: var(--radius-md, 0.5rem);
  box-shadow: none;
}

.gestao-pessoas-acao-card .card-title {
  font-size: 0.9375rem;
  margin-bottom: 0.25rem;
}

.gestao-pessoas-acao-card .card-body {
  padding: 1rem 1.25rem;
}

.gestao-pessoas-acao-card-content {
  flex: 1 1 auto;
  min-width: 0;
}

.gestao-pessoas-acao-card-actions {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .gestao-pessoas-stepper:not(.gestao-pessoas-stepper-detalhe) {
    flex-direction: column;
    align-items: flex-start;
  }

  .gestao-pessoas-stepper:not(.gestao-pessoas-stepper-detalhe) .gestao-pessoas-step-line {
    display: none;
  }

  .gestao-pessoas-stepper:not(.gestao-pessoas-stepper-detalhe) .gestao-pessoas-step-label {
    white-space: normal;
  }

  .gestao-pessoas-stepper-detalhe .gestao-pessoas-step-label {
    font-size: 0.75rem;
  }
}

/* Gestão de Pessoas - usa .scrolling-wrapper e .pipeline-column do pipeline */
#gestao-pessoas-pai-cards .card-item.pipeline-column {
  min-width: 375px;
}

/* Altura uniforme dos cards (Unidade, Cargo, Entrada, Saída) */
#gestao-pessoas-pai-cards .card-hover.card {
  min-height: 260px;
  display: flex;
  flex-direction: column;
}

#gestao-pessoas-pai-cards .card-hover.card .card-body {
  flex: 1 1 auto;
  min-height: 110px;
}

/* Placeholder de foto no footer do card (dentro de .image-cropper) */
.image-cropper .gestao-pessoas-card-foto-placeholder {
  width: 100%;
  height: 100%;
  min-width: 40px;
  min-height: 40px;
  background: var(--color-primary, #18338f);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
}

.gestao-pessoas-card-link:hover {
  color: inherit;
}

.gestao-pessoas-card-link .alert-light {
  background: var(--glass-bg, #f8f9fa);
}

/* Gamificação - Participantes da campanha (turmas e formandos) */
.gamificacao-cards-turmas .table td:first-of-type {
  min-height: 44px;
  vertical-align: middle;
}

.gamificacao-cards-turmas .check-participante {
  cursor: pointer;
  min-width: 18px;
  min-height: 18px;
}

/* 2 cards por linha: altura fixa e barra de rolagem no corpo do card */
.gamificacao-card-body-scroll {
  height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
}

.gamificacao-cards-turmas .card-turma-wrapper .card {
  display: flex;
  flex-direction: column;
}

.gamificacao-cards-turmas .card-turma-wrapper .card .card-body.gamificacao-card-body-scroll {
  flex: 0 1 auto;
}

/* ========================================
   Mapa Preview - Espaços / Localização
   ======================================== */
.mapa-preview-container {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  margin-top: 0.5rem;
}

.mapa-preview-container iframe {
  width: 100%;
  height: 250px;
  border: 0;
  display: block;
}

.mapa-preview-container.d-none {
  display: none !important;
}

/* Badges de distância - Gestão de Staff */
.badge-distancia-ok {
  background-color: #28a745;
  color: #fff;
}

.badge-distancia-alerta {
  background-color: #ffc107;
  color: #212529;
}

.badge-distancia-longe {
  background-color: #dc3545;
  color: #fff;
}

/* Badge de agrupamento - Gestão de Staff */
.badge-grupo-staff {
  background: linear-gradient(135deg, var(--color-primary), #5a6fd6);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2em 0.55em;
  border-radius: var(--radius-sm);
  vertical-align: middle;
  cursor: help;
}

.distancia-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/* ============================================================
   Folha de Pagamento
   ============================================================ */

/* Campos editáveis inline na tabela da folha */
.folha-campo-editavel {
  width: 100px;
  padding: 0.15rem 0.35rem;
  font-size: 0.85rem;
  text-align: right;
  border: 1px solid transparent;
  background: transparent;
  transition: all var(--transition-fast);
}

.folha-campo-editavel:not([readonly]):hover {
  border-color: var(--glass-border);
  background: var(--glass-bg);
}

.folha-campo-editavel:not([readonly]):focus {
  border-color: var(--color-primary);
  background: #fff;
  box-shadow: 0 0 0 0.15rem rgba(24, 51, 143, 0.15);
}

.folha-campo-editavel[readonly] {
  color: var(--color-text);
  cursor: default;
  opacity: 0.85;
}

.folha-campo-editavel.is-valid {
  border-color: #28a745;
  background: rgba(40, 167, 69, 0.05);
}

.folha-campo-editavel.is-invalid {
  border-color: #dc3545;
  background: rgba(220, 53, 69, 0.05);
}

/* Total do item */
.folha-total-item {
  white-space: nowrap;
  font-size: 0.9rem;
}

/* Tabela de itens - colunas compactas */
#tabelaItens th,
#tabelaItens td {
  vertical-align: middle;
  white-space: nowrap;
  padding: 0.4rem 0.5rem;
}

#tabelaItens thead th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-muted);
  border-bottom: 2px solid var(--glass-border);
}

#tabelaItens tfoot td {
  border-top: 2px solid var(--glass-border);
}

/* Thead sticky no topo ao scrollar verticalmente */
#tabelaItens thead th {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* Primeira coluna (Nome) sticky à esquerda ao scrollar horizontalmente */
#tabelaItens thead th:first-child,
#tabelaItens tbody td:first-child,
#tabelaItens tfoot td:first-child {
  position: sticky;
  left: 0;
  z-index: 40;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-right: 1px solid var(--glass-border);
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.04);
}

/* Cruzamento (canto superior esquerdo): fica acima dos dois sticky */
#tabelaItens thead th:first-child {
  z-index: 60;
}

/* Hover preserva visual da primeira coluna */
#tabelaItens tbody tr:hover td:first-child {
  background: rgba(0, 0, 0, 0.03);
}

/* Inabilitado: mantém cor escurecida na coluna fixa */
#tabelaItens tbody tr.folha-item-inabilitado td:first-child {
  background: rgba(108, 117, 125, 0.08);
}

/* Linha de totais (table-active) na coluna fixa */
#tabelaItens tfoot tr.table-active td:first-child {
  background: rgba(0, 0, 0, 0.04);
}

#tabelaItens tr.folha-item-inabilitado {
  opacity: 0.55;
  background: rgba(108, 117, 125, 0.06);
}

#tabelaItens tr.folha-item-inabilitado td {
  color: var(--color-muted);
}

#tabelaItens tr.folha-item-inabilitado .folha-campo-editavel {
  background: transparent;
  border-color: transparent;
}

/* ===== Sidebar DP - Usuários ===== */
.dp-sidebar-field {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.dp-sidebar-field:focus {
  box-shadow: 0 0 0 0.15rem rgba(24, 51, 143, 0.15);
  border-color: var(--color-primary);
}

.dp-sidebar-field.dp-saving {
  border-color: #ffc107;
  opacity: 0.7;
}

.dp-sidebar-field.dp-saved {
  border-color: #28a745;
}

.dp-sidebar-field.dp-error {
  border-color: #dc3545;
}

/* ===== Coluna G&G - Badges OKR e 1:1 ===== */
.btn-toggle-flag {
  min-width: 42px;
  text-align: center;
  padding: 0.35rem 0.55rem;
  font-size: 0.82rem;
  transition: all 0.3s ease;
  white-space: nowrap;
  display: inline-block;
}

.btn-toggle-flag:hover:not(:disabled) {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.btn-toggle-flag:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ===== Tabela Usuários — espaçamento entre linhas ===== */
#tabelaUsuarios tbody td {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* ========================================================================
   MODAIS CRÍTICOS - Z-INDEX SUPERIOR AOS SIDEBARS
   ======================================================================== 
   Modais de sessão e avisos críticos devem ficar ACIMA de todos os sidebars
   do sistema (incluindo eFormei Sidebar System com z-index 10002)
*/

/* Modal de Sessão Expirando - Prioridade Máxima */
#modalSessaoExpirando {
  z-index: 11000 !important;
}

#modalSessaoExpirando .modal-dialog {
  z-index: 11001 !important;
}

/* Backdrop do modal de sessão - deve ficar acima dos sidebars */
.modal-backdrop.show {
  z-index: 10999 !important;
}

/* Garantir que backdrop ativo do modal de sessão fique acima de tudo */
#modalSessaoExpirando~.modal-backdrop {
  z-index: 10999 !important;
}

/* Outros modais críticos que precisam ficar acima de sidebars */
#modalSuspenso,
#modalConfigurar,
#modalEmailSeguranca {
  z-index: 11000 !important;
}

#modalSuspenso .modal-dialog,
#modalConfigurar .modal-dialog,
#modalEmailSeguranca .modal-dialog {
  z-index: 11001 !important;
}

/* Variáveis CSS atualizadas para z-index de modais críticos */
:root {
  --z-modal-critical: 11000;
  --z-modal-critical-backdrop: 10999;
  --z-sidebar-max: 10002;
  /* Maior z-index dos sidebars do sistema */
}

/* =====================================================
   9-BOX - WIZARD & GRID
   ===================================================== */

/* Wizard Steps Indicator */
.ninebox-steps {
  gap: 0;
}

.ninebox-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.ninebox-step-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-muted, #6c757d);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.9rem;
  transition: all var(--transition-fast, 0.15s ease);
}

.ninebox-step.active .ninebox-step-circle,
.ninebox-step.completed .ninebox-step-circle {
  background: var(--color-primary, #18338f);
}

.ninebox-step.completed .ninebox-step-circle {
  background: #27ae60;
}

.ninebox-step-label {
  font-size: 0.75rem;
  color: var(--color-muted, #6c757d);
  margin-top: 6px;
  white-space: nowrap;
}

.ninebox-step.active .ninebox-step-label {
  color: var(--color-primary, #18338f);
  font-weight: 600;
}

.ninebox-step-line {
  width: 80px;
  height: 3px;
  background: #dee2e6;
  margin: 0 12px;
  margin-top: 17px;
  border-radius: 2px;
}

.ninebox-step-line.completed {
  background: #27ae60;
}

/* Seções da página única */
.ninebox-section {
  scroll-margin-top: 80px;
}

.ninebox-section h4 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.ninebox-section .text-muted {
  font-size: 0.95rem;
}

/* Cards com shadow suave */
.ninebox-section .card.shadow-sm {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.ninebox-section .card-header.bg-light {
  background: linear-gradient(to bottom, #f8f9fa, #f0f1f3) !important;
  border-bottom: 2px solid rgba(24, 51, 143, 0.1);
}

/* Grid Selector Visual */
.ninebox-grid-selector {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 600px;
}

.ninebox-grid-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border: 2px solid #dee2e6;
  border-radius: var(--radius-md, 0.5rem);
  background: #fff;
  cursor: pointer;
  transition: all var(--transition-fast, 0.15s ease);
}

.ninebox-grid-option:hover {
  border-color: var(--color-primary, #18338f);
  background: rgba(24, 51, 143, 0.02);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.ninebox-grid-option.active {
  border-color: var(--color-primary, #18338f);
  background: rgba(24, 51, 143, 0.08);
  border-width: 3px;
}

.ninebox-grid-preview {
  display: grid;
  gap: 2px;
  width: 60px;
  height: 60px;
  margin-bottom: 8px;
}

.ninebox-grid-cell {
  background: var(--color-primary, #18338f);
  border-radius: 2px;
  transition: all var(--transition-fast, 0.15s ease);
}

.ninebox-grid-option:hover .ninebox-grid-cell {
  background: #27ae60;
}

.ninebox-grid-option.active .ninebox-grid-cell {
  background: #27ae60;
}

.ninebox-grid-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-muted, #6c757d);
  transition: color var(--transition-fast, 0.15s ease);
}

.ninebox-grid-option:hover .ninebox-grid-label,
.ninebox-grid-option.active .ninebox-grid-label {
  color: var(--color-primary, #18338f);
}

/* Faixa percentage inputs */
.ninebox-faixa-input-wrapper {
  display: flex;
  align-items: center;
  margin-right: 8px;
  margin-bottom: 8px;
}

.ninebox-faixa-input-wrapper input {
  width: 70px;
  text-align: center;
}

.ninebox-faixa-input-wrapper .ninebox-faixa-label-sm {
  font-size: 0.75rem;
  color: var(--color-muted, #6c757d);
  margin-left: 4px;
}

/* Inputs de modo notas (min/max) */
.ninebox-faixa-min,
.ninebox-faixa-max {
  text-align: center;
}

/* Eixo nome preview (readonly em step 2) */
.ninebox-eixo-nome-preview {
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: var(--radius-sm, 0.25rem);
  font-weight: 600;
  color: var(--color-primary, #18338f);
}

/* Topics list for axis (step 2) */
.ninebox-topicos-list .ninebox-topico-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-sm, 0.25rem);
  background: #fff;
}

.ninebox-topico-row select {
  flex: 1;
  min-width: 0;
}

.ninebox-topico-row .ninebox-peso-input {
  width: 80px;
  text-align: center;
}

.ninebox-topico-row .btn-remove-topico {
  color: #dc3545;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 1rem;
}

.ninebox-topico-row .btn-remove-topico:hover {
  background: rgba(220, 53, 69, 0.1);
  border-radius: var(--radius-sm, 0.25rem);
}

/* Preview grid (step 3) */
.ninebox-preview-grid {
  display: grid;
  gap: 4px;
  min-height: 280px;
}

.ninebox-preview-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  border-radius: var(--radius-sm, 0.25rem);
  cursor: pointer;
  transition: all var(--transition-fast, 0.15s ease);
  border: 2px solid transparent;
  text-align: center;
  min-height: 80px;
}

.ninebox-preview-cell:hover {
  border-color: var(--color-primary, #18338f);
  transform: scale(1.02);
}

.ninebox-preview-cell .ninebox-preview-cell-name {
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ninebox-preview-cell .ninebox-preview-cell-coords {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
}

/* ================== Grid View ================== */
.ninebox-grid-wrapper {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 450px;
}

.ninebox-y-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-primary, #18338f);
  padding: 0 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ninebox-grid-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ninebox-grid-inner-row {
  display: flex;
  flex: 1;
  min-height: 0;
}

.ninebox-y-faixas {
  width: 55px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  margin-right: 6px;
}

.ninebox-cells-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ninebox-faixa-label {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ninebox-faixa-label span {
  font-size: 0.7rem;
  color: var(--color-muted, #6c757d);
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ninebox-cells {
  display: grid;
  gap: 3px;
  flex: 1;
}

.ninebox-cell {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-sm, 0.25rem);
  padding: 8px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-fast, 0.15s ease);
  overflow: hidden;
}

.ninebox-cell.drag-over {
  border: 2px dashed var(--color-primary, #18338f);
  background: rgba(24, 51, 143, 0.08) !important;
}

.ninebox-cell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  flex-shrink: 0;
}

.ninebox-cell-name {
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ninebox-cell-count {
  font-size: 0.7rem;
}

.ninebox-cell-people {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  overflow-y: auto;
  flex: 1;
  max-height: 180px;
  align-content: flex-start;
}

/* Durante drag, ocultar tooltips e prevenir flicker */
.ninebox-grid-wrapper.dragging-active .tooltip {
  display: none !important;
}

.ninebox-grid-wrapper.dragging-active .ninebox-person:hover {
  box-shadow: none;
}

.ninebox-cell-people::-webkit-scrollbar {
  width: 4px;
}

.ninebox-cell-people::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 2px;
}

.ninebox-person {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: var(--radius-sm, 0.25rem);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: grab;
  transition: all var(--transition-fast, 0.15s ease);
  user-select: none;
  font-size: 0.75rem;
  max-width: 100%;
}

.ninebox-person:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  border-color: var(--color-primary, #18338f);
}

.ninebox-person.dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.ninebox-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.ninebox-avatar-letter {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-primary, #18338f);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}

.ninebox-person-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}

.ninebox-manual-icon {
  font-size: 0.6rem;
  color: #f39c12;
  flex-shrink: 0;
}

.ninebox-x-faixas {
  display: grid;
  gap: 3px;
  margin-top: 4px;
}

.ninebox-x-faixas .ninebox-faixa-label {
  height: 28px;
}

.ninebox-x-label {
  text-align: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-primary, #18338f);
  padding: 8px 0 0 0;
  letter-spacing: 1px;
  text-transform: uppercase;
  width: 100%;
}

/* Responsive */
@media (max-width: 768px) {
  .ninebox-grid-wrapper {
    min-height: 300px;
  }

  .ninebox-y-label {
    display: none;
  }

  .ninebox-grid-inner {
    padding-left: 0;
  }

  .ninebox-y-faixas {
    display: none;
  }

  .ninebox-person-name {
    max-width: 60px;
  }

  .ninebox-cell {
    min-height: 70px;
  }

  .ninebox-step-line {
    width: 40px;
  }
}

/* ========================================
   Planilha Vida CRM - Tabela
   ======================================== */

/* Container com scroll horizontal e vertical dentro do card */
.planilha-vida-crm-scroll {
  overflow: auto;
  max-height: calc(100vh - 280px);
  min-height: 400px;
  padding: 0;
}

/* Thead sticky no topo ao scrollar verticalmente */
#datatablePlanilhaVidaCrm thead th {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 2px solid var(--color-primary);
}

/* Tfoot sticky no fundo */
#datatablePlanilhaVidaCrm tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 50;
  background: var(--glass-bg);
  border-top: 2px solid var(--color-primary);
}

/* Coluna 1: Unidade (sticky left) */
#datatablePlanilhaVidaCrm thead th:nth-child(1),
#datatablePlanilhaVidaCrm tbody td:nth-child(1),
#datatablePlanilhaVidaCrm tfoot td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 100;
  background: var(--glass-bg);
  border-right: 1px solid var(--glass-border);
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
  min-width: 160px;
}

/* Coluna 2: Comercial Responsável (sticky left) */
#datatablePlanilhaVidaCrm thead th:nth-child(2),
#datatablePlanilhaVidaCrm tbody td:nth-child(2),
#datatablePlanilhaVidaCrm tfoot td:nth-child(2) {
  position: sticky;
  left: 160px;
  z-index: 100;
  background: var(--glass-bg);
  border-right: 1px solid var(--glass-border);
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
  min-width: 150px;
}

/* Coluna 3: Nome da Turma (última fixa) */
#datatablePlanilhaVidaCrm thead th:nth-child(3),
#datatablePlanilhaVidaCrm tbody td:nth-child(3),
#datatablePlanilhaVidaCrm tfoot td:nth-child(3) {
  position: sticky;
  left: 310px;
  z-index: 100;
  background: var(--glass-bg);
  border-right: 2px solid var(--color-primary);
  box-shadow: 3px 0 6px rgba(0, 0, 0, 0.08);
  min-width: 200px;
}

/* Thead + colunas fixas: z-index mais alto (cruzamento sticky top + left) */
#datatablePlanilhaVidaCrm thead th:nth-child(1),
#datatablePlanilhaVidaCrm thead th:nth-child(2),
#datatablePlanilhaVidaCrm thead th:nth-child(3) {
  z-index: 150;
}

#datatablePlanilhaVidaCrm tfoot td:nth-child(1),
#datatablePlanilhaVidaCrm tfoot td:nth-child(2),
#datatablePlanilhaVidaCrm tfoot td:nth-child(3) {
  z-index: 150;
}

/* Quando há scroll horizontal - troca glass por sólido */
.planilha-vida-crm-scroll.scrolled #datatablePlanilhaVidaCrm thead th:nth-child(1),
.planilha-vida-crm-scroll.scrolled #datatablePlanilhaVidaCrm tbody td:nth-child(1),
.planilha-vida-crm-scroll.scrolled #datatablePlanilhaVidaCrm tfoot td:nth-child(1),
.planilha-vida-crm-scroll.scrolled #datatablePlanilhaVidaCrm thead th:nth-child(2),
.planilha-vida-crm-scroll.scrolled #datatablePlanilhaVidaCrm tbody td:nth-child(2),
.planilha-vida-crm-scroll.scrolled #datatablePlanilhaVidaCrm tfoot td:nth-child(2),
.planilha-vida-crm-scroll.scrolled #datatablePlanilhaVidaCrm thead th:nth-child(3),
.planilha-vida-crm-scroll.scrolled #datatablePlanilhaVidaCrm tbody td:nth-child(3),
.planilha-vida-crm-scroll.scrolled #datatablePlanilhaVidaCrm tfoot td:nth-child(3) {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

.planilha-vida-crm-scroll.scrolled #datatablePlanilhaVidaCrm thead th:nth-child(3),
.planilha-vida-crm-scroll.scrolled #datatablePlanilhaVidaCrm tbody td:nth-child(3),
.planilha-vida-crm-scroll.scrolled #datatablePlanilhaVidaCrm tfoot td:nth-child(3) {
  border-right: 2px solid var(--color-primary);
  box-shadow: 3px 0 6px rgba(0, 0, 0, 0.15);
}

/* Dark mode */
.dark-mode #datatablePlanilhaVidaCrm thead th,
.dark-mode #datatablePlanilhaVidaCrm tfoot td {
  background: var(--glass-bg-dark);
}

.dark-mode #datatablePlanilhaVidaCrm thead th:nth-child(1),
.dark-mode #datatablePlanilhaVidaCrm tbody td:nth-child(1),
.dark-mode #datatablePlanilhaVidaCrm tfoot td:nth-child(1),
.dark-mode #datatablePlanilhaVidaCrm thead th:nth-child(2),
.dark-mode #datatablePlanilhaVidaCrm tbody td:nth-child(2),
.dark-mode #datatablePlanilhaVidaCrm tfoot td:nth-child(2),
.dark-mode #datatablePlanilhaVidaCrm thead th:nth-child(3),
.dark-mode #datatablePlanilhaVidaCrm tbody td:nth-child(3),
.dark-mode #datatablePlanilhaVidaCrm tfoot td:nth-child(3) {
  background: var(--glass-bg-dark);
}

.dark-mode .planilha-vida-crm-scroll.scrolled #datatablePlanilhaVidaCrm thead th:nth-child(1),
.dark-mode .planilha-vida-crm-scroll.scrolled #datatablePlanilhaVidaCrm tbody td:nth-child(1),
.dark-mode .planilha-vida-crm-scroll.scrolled #datatablePlanilhaVidaCrm tfoot td:nth-child(1),
.dark-mode .planilha-vida-crm-scroll.scrolled #datatablePlanilhaVidaCrm thead th:nth-child(2),
.dark-mode .planilha-vida-crm-scroll.scrolled #datatablePlanilhaVidaCrm tbody td:nth-child(2),
.dark-mode .planilha-vida-crm-scroll.scrolled #datatablePlanilhaVidaCrm tfoot td:nth-child(2),
.dark-mode .planilha-vida-crm-scroll.scrolled #datatablePlanilhaVidaCrm thead th:nth-child(3),
.dark-mode .planilha-vida-crm-scroll.scrolled #datatablePlanilhaVidaCrm tbody td:nth-child(3),
.dark-mode .planilha-vida-crm-scroll.scrolled #datatablePlanilhaVidaCrm tfoot td:nth-child(3) {
  background: rgba(30, 30, 30, 0.98);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Hover - colunas fixas acompanham */
#datatablePlanilhaVidaCrm tbody tr:hover td:nth-child(1),
#datatablePlanilhaVidaCrm tbody tr:hover td:nth-child(2),
#datatablePlanilhaVidaCrm tbody tr:hover td:nth-child(3) {
  background: rgba(24, 51, 143, 0.05);
}

.dark-mode #datatablePlanilhaVidaCrm tbody tr:hover td:nth-child(1),
.dark-mode #datatablePlanilhaVidaCrm tbody tr:hover td:nth-child(2),
.dark-mode #datatablePlanilhaVidaCrm tbody tr:hover td:nth-child(3) {
  background: rgba(59, 130, 246, 0.1);
}

/* Scrollbar vertical + horizontal */
.planilha-vida-crm-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.planilha-vida-crm-scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 5px;
}

.planilha-vida-crm-scroll::-webkit-scrollbar-thumb {
  background: var(--color-scroll-thumb);
  border-radius: 5px;
}

.planilha-vida-crm-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(24, 51, 143, 0.5);
}

/* Responsivo */
@media (max-width: 768px) {
  .planilha-vida-crm-scroll {
    max-height: calc(100vh - 200px);
  }

  #datatablePlanilhaVidaCrm thead th:nth-child(1),
  #datatablePlanilhaVidaCrm tbody td:nth-child(1),
  #datatablePlanilhaVidaCrm tfoot td:nth-child(1),
  #datatablePlanilhaVidaCrm thead th:nth-child(2),
  #datatablePlanilhaVidaCrm tbody td:nth-child(2),
  #datatablePlanilhaVidaCrm tfoot td:nth-child(2),
  #datatablePlanilhaVidaCrm thead th:nth-child(3),
  #datatablePlanilhaVidaCrm tbody td:nth-child(3),
  #datatablePlanilhaVidaCrm tfoot td:nth-child(3) {
    position: static;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-right: 1px solid var(--color-border-light);
    box-shadow: none;
  }
}

/* ===== Senha mascarada via CSS (evita browser password managers) ===== */
.crm-dash-senha-masked {
  -webkit-text-security: disc;
  -moz-text-security: disc;
  text-security: disc;
}

/* =====================================================================
   FLUXO DE CAIXA v2
   ===================================================================== */

/* KPI Cards */
.fluxo-kpi-card {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

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

.fluxo-kpi-icon {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  opacity: 0.85;
}

/* Tabelas com scroll fixo - tamanho pequeno (unidades e meios) */
.fluxo-tabela-scroll-sm {
  max-height: 300px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tabelas com scroll fixo - tamanho grande (contas a pagar/receber) */
.fluxo-tabela-scroll-lg {
  max-height: 450px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Sticky header dentro das tabelas com scroll */
.fluxo-tabela-scroll-sm thead th,
.fluxo-tabela-scroll-lg thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
}

/* Scrollbar customizada */
.fluxo-tabela-scroll-sm::-webkit-scrollbar,
.fluxo-tabela-scroll-lg::-webkit-scrollbar {
  width: 6px;
}

.fluxo-tabela-scroll-sm::-webkit-scrollbar-track,
.fluxo-tabela-scroll-lg::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03);
}

.fluxo-tabela-scroll-sm::-webkit-scrollbar-thumb,
.fluxo-tabela-scroll-lg::-webkit-scrollbar-thumb {
  background: var(--color-scroll-thumb, rgba(24, 51, 143, 0.3));
  border-radius: 3px;
}

.fluxo-tabela-scroll-sm::-webkit-scrollbar-thumb:hover,
.fluxo-tabela-scroll-lg::-webkit-scrollbar-thumb:hover {
  background: rgba(24, 51, 143, 0.5);
}

/* Responsivo */
@media (max-width: 768px) {
  .fluxo-kpi-icon {
    font-size: 1.4rem;
  }

  .fluxo-tabela-scroll-sm {
    max-height: 250px;
  }

  .fluxo-tabela-scroll-lg {
    max-height: 350px;
  }
}

/* ============================================================
   Edição inline da tabela de currículos (módulo Vagas)
   ============================================================ */
.inline-edit-curriculo {
  display: inline-block;
  min-width: 1ch;
  border-bottom: 1px dashed transparent;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.inline-edit-curriculo:hover {
  border-bottom-color: var(--color-muted);
  cursor: text;
}

.inline-edit-curriculo.inline-edit-active {
  outline: none;
  background: rgba(24, 51, 143, 0.06);
  border-bottom-color: var(--color-primary);
  padding: 0 4px;
  border-radius: var(--radius-sm);
}

.inline-edit-curriculo.inline-edit-saving {
  opacity: 0.55;
  pointer-events: none;
}

.btn-pencil-inline {
  opacity: 0.45;
  transition: opacity var(--transition-fast);
}

.btn-pencil-inline:hover {
  opacity: 1;
}

/* =====================================================
   SISTEMA DE TOASTS eFormei (Liquid Glass 2025)
   ===================================================== */
#eformei-toast-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11150;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  max-width: 480px;
  width: calc(100% - 40px);
}

.eformei-toast {
  position: relative;
  pointer-events: all;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-left: 4px solid var(--color-info);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
  overflow: hidden;
}

.eformei-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.eformei-toast.hiding {
  opacity: 0;
  transform: translateY(-16px);
}

.eformei-toast--success {
  border-left-color: var(--color-success);
}

.eformei-toast--danger {
  border-left-color: var(--color-danger);
}

.eformei-toast--warning {
  border-left-color: var(--color-warning);
}

.eformei-toast--info {
  border-left-color: var(--color-info);
}

.eformei-toast__icon {
  font-size: 1.2rem;
  margin-top: 2px;
  line-height: 1;
}

.eformei-toast--success .eformei-toast__icon {
  color: var(--color-success);
}

.eformei-toast--danger .eformei-toast__icon {
  color: var(--color-danger);
}

.eformei-toast--warning .eformei-toast__icon {
  color: var(--color-warning);
}

.eformei-toast--info .eformei-toast__icon {
  color: var(--color-info);
}

.eformei-toast__body {
  flex: 1;
  color: var(--color-text);
  font-size: .9rem;
  line-height: 1.4;
  word-wrap: break-word;
}

.eformei-toast__close {
  background: transparent;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-xs);
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.eformei-toast__close:hover {
  background: rgba(0, 0, 0, .05);
  color: var(--color-text);
}

.eformei-toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: currentColor;
  opacity: .3;
  width: 100%;
  transform-origin: left center;
}

.eformei-toast--success .eformei-toast__progress {
  color: var(--color-success);
}

.eformei-toast--danger .eformei-toast__progress {
  color: var(--color-danger);
}

.eformei-toast--warning .eformei-toast__progress {
  color: var(--color-warning);
}

.eformei-toast--info .eformei-toast__progress {
  color: var(--color-info);
}

/* Spinner para toast.loading() */
.eformei-toast__spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: eformeiToastSpin .6s linear infinite;
  vertical-align: -2px;
  margin-right: 4px;
}

@keyframes eformeiToastSpin {
  to {
    transform: rotate(360deg);
  }
}

/* =====================================================
   DIALOG eFormei (confirm / prompt Liquid Glass 2025)
   ===================================================== */
.eformei-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 11200;
  background: rgba(0, 0, 0, 0);
  transition: background var(--transition-smooth);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  pointer-events: none;
}

.eformei-dialog-backdrop.show {
  background: rgba(0, 0, 0, .5);
  pointer-events: all;
}

.eformei-dialog {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  max-width: 440px;
  width: 100%;
  opacity: 0;
  transform: scale(.95);
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 40px);
}

.eformei-dialog-backdrop.show .eformei-dialog {
  opacity: 1;
  transform: scale(1);
}

.eformei-dialog__header {
  padding: 20px 24px 12px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.eformei-dialog__header-icon {
  font-size: 1.25rem;
}

.eformei-dialog--success .eformei-dialog__header-icon {
  color: var(--color-success);
}

.eformei-dialog--danger .eformei-dialog__header-icon {
  color: var(--color-danger);
}

.eformei-dialog--warning .eformei-dialog__header-icon {
  color: var(--color-warning);
}

.eformei-dialog--info .eformei-dialog__header-icon {
  color: var(--color-info);
}

.eformei-dialog__body {
  padding: 0 24px 16px;
  color: var(--color-text);
  font-size: .95rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-y: auto;
  flex: 1;
}

.eformei-dialog__input {
  width: 100%;
  margin-top: 12px;
}

.eformei-dialog__input textarea.form-control {
  min-height: 90px;
  resize: vertical;
}

.eformei-dialog__footer {
  padding: 12px 24px 20px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.eformei-dialog__footer .btn {
  min-width: 100px;
}

/* ============================================= */
/* DASHBOARD CORPORATIVO — DESIGN SYSTEM          */
/* ============================================= */
:root {
  --dash-primary: #4f46e5;
  --dash-primary-light: #818cf8;
  --dash-primary-dark: #3730a3;
  --dash-success: #10b981;
  --dash-danger: #ef4444;
  --dash-warning: #f59e0b;
  --dash-info: #06b6d4;
  --dash-bg: #f8fafc;
  --dash-card-bg: #ffffff;
  --dash-border: #e2e8f0;
  --dash-text: #1e293b;
  --dash-text-muted: #64748b;
  --dash-text-light: #94a3b8;
  --dash-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --dash-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.08);
  --dash-radius: 16px;
  --dash-radius-sm: 10px;
  --dash-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* CONTAINER PRINCIPAL */
.dash-container {
  padding: 0;
  max-width: 100%;
}

/* HEADER */
.dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.dash-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dash-header-left h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dash-text);
  margin: 0;
}

.dash-header-left .dash-subtitle {
  font-size: 0.85rem;
  color: var(--dash-text-muted);
  margin: 0;
}

.dash-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dash-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--dash-radius-sm);
  font-size: 0.82rem;
  font-weight: 500;
  border: 1px solid var(--dash-border);
  background: var(--dash-card-bg);
  color: var(--dash-text);
  cursor: pointer;
  transition: all var(--dash-transition);
  text-decoration: none;
}

.dash-btn:hover {
  border-color: var(--dash-primary);
  color: var(--dash-primary);
  box-shadow: var(--dash-shadow);
  text-decoration: none;
}

.dash-btn-primary {
  background: var(--dash-primary);
  border-color: var(--dash-primary);
  color: #fff;
}

.dash-btn-primary:hover {
  background: var(--dash-primary-dark);
  color: #fff;
}

.dash-live-dot {
  width: 8px;
  height: 8px;
  background: var(--dash-success);
  border-radius: 50%;
  animation: dashPulse 2s infinite;
}

@keyframes dashPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

/* FILTROS */
.dash-filters {
  background: var(--dash-card-bg);
  border: 1px solid var(--dash-border);
  border-radius: var(--dash-radius);
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: var(--dash-shadow);
  display: none;
}

.dash-filters.active {
  display: block;
}

.dash-filters-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  align-items: end;
}

.dash-filter-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--dash-text-muted);
  margin-bottom: 4px;
}

.dash-filter-group input,
.dash-filter-group select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--dash-border);
  border-radius: var(--dash-radius-sm);
  font-size: 0.85rem;
  color: var(--dash-text);
  background: var(--dash-card-bg);
  transition: border-color var(--dash-transition);
}

.dash-filter-group input:focus,
.dash-filter-group select:focus {
  outline: none;
  border-color: var(--dash-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.dash-filter-group .bootstrap-select {
  width: 100% !important;
}

.dash-filter-group .bootstrap-select>.dropdown-toggle {
  padding: 8px 12px;
  border: 1px solid var(--dash-border);
  border-radius: var(--dash-radius-sm);
  font-size: 0.85rem;
  color: var(--dash-text);
  background: var(--dash-card-bg);
  height: auto;
  line-height: 1.4;
  transition: border-color var(--dash-transition);
}

.dash-filter-group .bootstrap-select>.dropdown-toggle:focus,
.dash-filter-group .bootstrap-select>.dropdown-toggle:active {
  outline: none !important;
  border-color: var(--dash-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.dash-filter-actions {
  display: flex;
  gap: 8px;
  align-items: end;
  padding-top: 4px;
}

/* KPI CARDS */
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.dash-kpi {
  background: var(--dash-card-bg);
  border: 1px solid var(--dash-border);
  border-radius: var(--dash-radius);
  padding: 20px 20px 16px;
  box-shadow: var(--dash-shadow);
  transition: all var(--dash-transition);
  position: relative;
  overflow: hidden;
  cursor: default;
}

.dash-kpi:hover {
  box-shadow: var(--dash-shadow-hover);
  transform: translateY(-2px);
}

.dash-kpi::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--dash-radius) var(--dash-radius) 0 0;
}

.dash-kpi.kpi-primary::before {
  background: var(--dash-primary);
}

.dash-kpi.kpi-success::before {
  background: var(--dash-success);
}

.dash-kpi.kpi-danger::before {
  background: var(--dash-danger);
}

.dash-kpi.kpi-warning::before {
  background: var(--dash-warning);
}

.dash-kpi.kpi-info::before {
  background: var(--dash-info);
}

.dash-kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.dash-kpi-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 1rem;
}

.dash-kpi.kpi-primary .dash-kpi-icon {
  background: rgba(79, 70, 229, 0.1);
  color: var(--dash-primary);
}

.dash-kpi.kpi-success .dash-kpi-icon {
  background: rgba(16, 185, 129, 0.1);
  color: var(--dash-success);
}

.dash-kpi.kpi-danger .dash-kpi-icon {
  background: rgba(239, 68, 68, 0.1);
  color: var(--dash-danger);
}

.dash-kpi.kpi-warning .dash-kpi-icon {
  background: rgba(245, 158, 11, 0.1);
  color: var(--dash-warning);
}

.dash-kpi.kpi-info .dash-kpi-icon {
  background: rgba(6, 182, 212, 0.1);
  color: var(--dash-info);
}

.dash-kpi-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--dash-text-muted);
}

.dash-kpi-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--dash-text);
  line-height: 1.2;
  margin-bottom: 4px;
}

.dash-kpi-detail {
  font-size: 0.78rem;
  color: var(--dash-text-light);
}

.dash-kpi-sparkline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  opacity: 0.15;
}

/* CHART CARDS */
.dash-row {
  display: grid;
  gap: 20px;
  margin-bottom: 20px;
}

.dash-row.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.dash-row.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.dash-row.cols-1-2 {
  grid-template-columns: 1fr 2fr;
}

.dash-row.cols-2-1 {
  grid-template-columns: 2fr 1fr;
}

.dash-card {
  background: var(--dash-card-bg);
  border: 1px solid var(--dash-border);
  border-radius: var(--dash-radius);
  box-shadow: var(--dash-shadow);
  transition: all var(--dash-transition);
  overflow: hidden;
}

.dash-card:hover {
  box-shadow: var(--dash-shadow-hover);
}

.dash-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--dash-border);
}

.dash-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--dash-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-card-title i {
  color: var(--dash-primary);
  font-size: 0.85rem;
}

.dash-card-actions {
  display: flex;
  gap: 4px;
}

.dash-card-action {
  padding: 4px 8px;
  border: none;
  background: transparent;
  color: var(--dash-text-muted);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.75rem;
  transition: all var(--dash-transition);
}

.dash-card-action:hover,
.dash-card-action.active {
  background: rgba(79, 70, 229, 0.1);
  color: var(--dash-primary);
}

.dash-card-body {
  padding: 16px 20px 20px;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dash-card-body .apexcharts-canvas {
  width: 100% !important;
}

.dash-card-body-table {
  padding: 0;
  overflow-x: auto;
}

/* PERFORMANCE TABLE */
.dash-perf-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.dash-perf-table th {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--dash-text-muted);
  padding: 8px 12px;
  border-bottom: 2px solid var(--dash-border);
  text-align: left;
}

.dash-perf-table td {
  padding: 10px 12px;
  font-size: 0.82rem;
  color: var(--dash-text);
  border-bottom: 1px solid var(--dash-border);
  vertical-align: middle;
}

.dash-perf-table tr:last-child td {
  border-bottom: none;
}

.dash-perf-table tr:hover td {
  background: rgba(79, 70, 229, 0.03);
}

.dash-perf-table tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--dash-border);
}

.dash-perf-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
  vertical-align: middle;
}

.dash-perf-avatar-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(79, 70, 229, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dash-primary);
  font-size: 0.75rem;
  font-weight: 700;
  margin-right: 8px;
  vertical-align: middle;
}

.dash-perf-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
  vertical-align: middle;
}

.dash-perf-logo-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(79, 70, 229, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dash-primary);
  font-size: 0.75rem;
  font-weight: 700;
  margin-right: 8px;
  vertical-align: middle;
}

.dash-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
}

.dash-badge-success {
  background: rgba(16, 185, 129, 0.1);
  color: var(--dash-success);
}

.dash-badge-danger {
  background: rgba(239, 68, 68, 0.1);
  color: var(--dash-danger);
}

.dash-badge-primary {
  background: rgba(79, 70, 229, 0.1);
  color: var(--dash-primary);
}

.dash-badge-warning {
  background: rgba(245, 158, 11, 0.1);
  color: var(--dash-warning);
}

.dash-badge-info {
  background: rgba(6, 182, 212, 0.1);
  color: var(--dash-info);
}

.dash-progress-bar {
  width: 80px;
  height: 6px;
  background: var(--dash-border);
  border-radius: 3px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
}

.dash-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--dash-primary);
  transition: width var(--dash-transition);
}

/* LOADING */
.dash-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 16px;
}

.dash-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--dash-border);
  border-top-color: var(--dash-primary);
  border-radius: 50%;
  animation: dashSpin 0.8s linear infinite;
}

@keyframes dashSpin {
  to {
    transform: rotate(360deg);
  }
}

.dash-loading-text {
  font-size: 0.85rem;
  color: var(--dash-text-muted);
}

/* FUNNEL HORIZONTAL */
.dash-funnel {
  display: flex;
  align-items: stretch;
  gap: 2px;
  width: 100%;
  min-height: 100px;
}

.dash-funnel-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  border-radius: 8px;
  transition: all var(--dash-transition);
  cursor: pointer;
  position: relative;
  text-align: center;
}

.dash-funnel-step:hover {
  transform: scale(1.03);
  z-index: 1;
}

.dash-funnel-step .step-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.dash-funnel-step .step-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 4px;
}

.dash-funnel-step .step-money {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
}

/* DASHBOARD RESPONSIVE */
@media (max-width: 1200px) {
  .dash-row.cols-3 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 992px) {

  .dash-row.cols-2,
  .dash-row.cols-1-2,
  .dash-row.cols-2-1 {
    grid-template-columns: 1fr;
  }

  .dash-kpis {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

@media (max-width: 768px) {
  .dash-row.cols-3 {
    grid-template-columns: 1fr;
  }

  .dash-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .dash-kpi-value {
    font-size: 1.4rem;
  }
}

/* DASHBOARD DARK MODE */
.dark-mode .dash-container {
  --dash-bg: #0f172a;
  --dash-card-bg: #1e293b;
  --dash-border: #334155;
  --dash-text: #f1f5f9;
  --dash-text-muted: #94a3b8;
  --dash-text-light: #64748b;
  --dash-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --dash-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.dark-mode .dash-filter-group input,
.dark-mode .dash-filter-group select {
  background: #0f172a;
  border-color: #475569;
  color: #f1f5f9;
}

.dark-mode .dash-filter-group .bootstrap-select>.dropdown-toggle {
  background: #0f172a;
  border-color: #475569;
  color: #f1f5f9;
}

.dark-mode .dash-perf-table tr:hover td {
  background: rgba(129, 140, 248, 0.05);
}

.dark-mode .apexcharts-tooltip {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

.dark-mode .apexcharts-tooltip .apexcharts-tooltip-title {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}

.dark-mode .apexcharts-tooltip .apexcharts-tooltip-text {
  color: #f1f5f9 !important;
}

.dark-mode .apexcharts-xaxis-label,
.dark-mode .apexcharts-yaxis-label {
  fill: #94a3b8 !important;
}

.dark-mode .apexcharts-gridline {
  stroke: #334155 !important;
}

.dark-mode .apexcharts-legend-text {
  color: #94a3b8 !important;
}

.dark-mode .apexcharts-menu {
  background: #1e293b !important;
  border-color: #334155 !important;
}

.dark-mode .apexcharts-menu-item:hover {
  background: #334155 !important;
}

.dark-mode .apexcharts-datalabel,
.dark-mode .apexcharts-pie-label {
  fill: #f1f5f9 !important;
}

/* ============================================================
   Pesquisas de Clima — Relatório (relatorio.php)
   ============================================================ */

/* Gauge cards clicáveis */
.pc-gauge-card {
  padding: 1rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  transition: box-shadow 0.2s, transform 0.2s;
}

.pc-gauge-card:hover {
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
  border-color: var(--color-primary);
  text-decoration: none;
}

/* Tabela accordion de detalhamento */
.pc-accordion-table {
  table-layout: fixed;
  width: 100%;
}

.pc-accordion-table th,
.pc-accordion-table td {
  vertical-align: middle;
  padding: .5rem .6rem;
}

/* Linha de tema — clicável */
.pc-tema-row {
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.pc-tema-row:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* Chevron de abertura */
.pc-chevron {
  display: inline-block;
  font-size: 0.7rem;
  color: var(--color-muted);
  transition: transform 0.2s;
}

.pc-chevron.open {
  transform: rotate(90deg);
}

/* Linha de pergunta — fundo sutil */
.pc-pergunta-row td {
  background: rgba(0, 0, 0, 0.015);
}

.pc-pergunta-row:hover td {
  background: rgba(0, 0, 0, 0.04);
}

/* ---- Barra de distribuição (sentimento) ---- */
.pc-dist-bar {
  display: flex;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: #e9ecef;
}

.pc-dist-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
  transition: width 0.3s;
}

.pc-dist-neg {
  background: #dc3545;
}

.pc-dist-neu {
  background: #adb5bd;
}

.pc-dist-pos {
  background: #28a745;
}

/* ===== Gestão de Lotes de Desconto — agrupamento de títulos originais + contas geradas por empréstimo ===== */
.lote-desconto-tabela {
  font-size: 0.85rem;
}

.lote-desconto-tabela th {
  white-space: nowrap;
  font-size: 0.78rem;
  padding: 10px 8px;
}

.lote-desconto-tabela td {
  vertical-align: middle;
  padding: 10px 8px;
  line-height: 1.4;
}

.lote-desconto-tabela tr.lote-titulo-row>td {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.lote-desconto-tabela .lote-titulo-parent>td {
  border-top: 2px solid var(--color-primary);
  background: rgba(24, 51, 143, 0.04);
}

.lote-desconto-tabela .lote-titulo-parent.parent-expandido>td {
  background: rgba(24, 51, 143, 0.08);
}

.lote-desconto-tabela .lote-titulo-filho>td {
  background: rgba(24, 51, 143, 0.035);
  border-top: 1px dashed rgba(24, 51, 143, 0.15);
  border-right: 1px solid rgba(24, 51, 143, 0.18);
  /* linha azul vertical separando colunas */
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 0.82rem;
  line-height: 1.4;
}

/* Primeira coluna da filha: borda AZUL mais forte à esquerda (marca do grupo) */
.lote-desconto-tabela .lote-titulo-filho>td:first-child {
  border-left: 3px solid var(--color-primary);
}

/* Última coluna: sem borda à direita */
.lote-desconto-tabela .lote-titulo-filho>td:last-child {
  border-right: none;
}

/* Última filha do grupo: borda inferior azul pra "fechar" visualmente o bloco */
.lote-desconto-tabela .lote-titulo-filho.ultima-filha>td {
  border-bottom: 2px solid var(--color-primary);
}

.lote-desconto-tabela .lote-celula-id-filho {
  padding-left: 1.5rem;
}

/* Truncamento de descrição longa com tooltip (title HTML) */
.lote-desconto-tabela .col-descricao-pai,
.lote-desconto-tabela .col-descricao-filho {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Coluna Cliente + Fornecedor (duas linhas empilhadas) */
.lote-desconto-tabela .col-cli-forn {
  min-width: 220px;
  max-width: 280px;
}

.lote-desconto-tabela .cf-linha {
  line-height: 1.35;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lote-desconto-tabela .cf-linha:last-child {
  margin-bottom: 0;
}

.lote-desconto-tabela .cf-label {
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-right: 3px;
}

.lote-desconto-tabela .col-descricao-pai .inline-editable,
.lote-desconto-tabela .col-descricao-filho .inline-editable,
.lote-desconto-tabela .col-descricao-pai .inline-value,
.lote-desconto-tabela .col-descricao-filho .inline-value {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.lote-desconto-tabela .badge-emprestimo-gerado {
  font-size: 0.65rem;
  font-weight: 600;
  white-space: nowrap;
  margin-top: 4px;
  display: inline-block;
}

.lote-desconto-tabela .toggle-filhos {
  color: var(--color-primary);
  margin-right: 4px;
  vertical-align: baseline;
  line-height: 1;
}

.lote-desconto-tabela .toggle-filhos:hover {
  color: var(--color-primary);
  text-decoration: none;
  opacity: 0.75;
}

.lote-desconto-tabela .toggle-filhos .fa-chevron-down,
.lote-desconto-tabela .toggle-filhos .fa-chevron-right {
  font-size: 0.75rem;
}

.lote-desconto-tabela .inline-editable {
  cursor: pointer;
  border-bottom: 1px dotted rgba(24, 51, 143, 0.25);
  padding: 1px 3px;
  border-radius: 2px;
  transition: background 0.15s ease;
  display: inline-block;
  max-width: 100%;
}

.lote-desconto-tabela .inline-editable:hover {
  background: rgba(24, 51, 143, 0.08);
}

.lote-desconto-tabela .inline-editable .fa-pencil-alt {
  opacity: 0.4;
  font-size: 0.65rem;
}

.lote-desconto-tabela .inline-editable:hover .fa-pencil-alt {
  opacity: 0.85;
}

.lote-desconto-tabela .inline-editable.inline-editing {
  background: rgba(255, 193, 7, 0.1);
  border-bottom-color: transparent;
}

.lote-desconto-tabela .inline-edit-success {
  background: rgba(40, 167, 69, 0.2) !important;
  animation: inlineEditFlash 1.2s ease-out;
}

@keyframes inlineEditFlash {
  0% {
    background: rgba(40, 167, 69, 0.4);
  }

  100% {
    background: transparent;
  }
}

.lote-desconto-tabela .inline-input {
  display: inline-block;
  min-width: 140px;
  max-width: 100%;
  font-size: 0.8rem;
  padding: 2px 6px;
  height: auto;
}

/* =============================================================
   PLANEJAMENTO FINANCEIRO — Dashboard (prefix .pf-)
   Prototipo visual; compativel com Liquid Glass 2025.
   ============================================================= */
.pf-page {
  padding: 0 2px;
}

.pf-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.pf-toolbar-left h2 {
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: -0.3px;
}

.pf-toolbar-left h2 i {
  font-size: 1.1rem;
  opacity: 0.9;
}

.pf-toolbar-left .pf-subtitle {
  font-size: 0.82rem;
  color: var(--color-muted, #6c757d);
  margin-top: 4px;
}

.pf-period-switcher {
  display: inline-flex;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 4px;
  gap: 2px;
  box-shadow: var(--shadow-soft);
}

.pf-period-btn {
  border: none;
  background: transparent;
  padding: 6px 14px;
  border-radius: calc(var(--radius-md) - 4px);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-muted, #6c757d);
  cursor: pointer;
  transition: all var(--transition-fast, 0.15s ease);
}

.pf-period-btn:hover {
  color: var(--color-primary);
}

.pf-period-btn.active {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(24, 51, 143, 0.25);
}

.pf-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

.pf-kpi {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur, 20px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 20px));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 18px 20px 14px;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-smooth, 0.3s ease);
  box-shadow: var(--shadow-soft);
}

.pf-kpi:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(24, 51, 143, 0.1);
}

.pf-kpi::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-primary);
}

.pf-kpi.pf-kpi-success::before {
  background: #10b981;
}

.pf-kpi.pf-kpi-danger::before {
  background: #ef4444;
}

.pf-kpi.pf-kpi-warning::before {
  background: #f59e0b;
}

.pf-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.pf-kpi-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--color-muted, #6c757d);
  font-weight: 700;
}

.pf-kpi-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm, 0.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.pf-kpi-icon.success {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.pf-kpi-icon.danger {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.pf-kpi-icon.primary {
  background: rgba(24, 51, 143, 0.12);
  color: var(--color-primary);
}

.pf-kpi-icon.warning {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

.pf-kpi-value {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.6px;
}

.pf-kpi-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.pf-kpi-trend {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.pf-kpi-trend.up {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.pf-kpi-trend.down {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.pf-kpi-detail {
  font-size: 0.72rem;
  color: var(--color-muted, #6c757d);
}

.pf-kpi-spark {
  margin-top: 6px;
  height: 38px;
  margin-left: -6px;
  margin-right: -6px;
  margin-bottom: -4px;
}

.pf-row {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}

.pf-row.pf-row-8-4 {
  grid-template-columns: 2.2fr 1fr;
}

.pf-row.pf-row-6-6 {
  grid-template-columns: 1fr 1fr;
}

.pf-row.pf-row-4-4-4 {
  grid-template-columns: 1fr 1fr 1fr;
}

.pf-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur, 20px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 20px));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.pf-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--glass-border);
  gap: 12px;
  flex-wrap: wrap;
}

.pf-card-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.2px;
}

.pf-card-title i {
  font-size: 0.82rem;
  opacity: 0.9;
}

.pf-card-subtitle {
  font-size: 0.72rem;
  color: var(--color-muted, #6c757d);
  margin-top: 3px;
}

.pf-card-body {
  padding: 12px 16px 16px;
}

.pf-card-chips {
  display: flex;
  gap: 6px;
}

.pf-chip {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(24, 51, 143, 0.08);
  color: var(--color-primary);
}

.pf-chip.success {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.pf-chip.danger {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.pf-legend-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-legend-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 2px;
  border-bottom: 1px dashed var(--glass-border);
}

.pf-legend-list li:last-child {
  border-bottom: none;
}

.pf-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 9px;
  vertical-align: middle;
}

.pf-legend-name {
  font-size: 0.82rem;
  color: var(--color-primary);
  font-weight: 600;
}

.pf-legend-val {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-muted, #6c757d);
  font-variant-numeric: tabular-nums;
}

.pf-rank-row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--glass-border);
}

.pf-rank-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.pf-rank-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(24, 51, 143, 0.1);
  color: var(--color-primary);
  font-size: 0.74rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pf-rank-row:nth-child(1) .pf-rank-num {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: #fff;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
}

.pf-rank-row:nth-child(2) .pf-rank-num {
  background: linear-gradient(135deg, #94a3b8, #cbd5e1);
  color: #fff;
}

.pf-rank-row:nth-child(3) .pf-rank-num {
  background: linear-gradient(135deg, #b45309, #d97706);
  color: #fff;
}

.pf-rank-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-primary);
}

.pf-rank-sub {
  font-size: 0.7rem;
  color: var(--color-muted, #6c757d);
  margin-top: 2px;
}

.pf-rank-val {
  font-size: 0.85rem;
  font-weight: 700;
  color: #ef4444;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.pf-delta {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
}

.pf-delta.up {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.pf-delta.down {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

@media (max-width: 1200px) {
  .pf-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .pf-row.pf-row-8-4,
  .pf-row.pf-row-6-6,
  .pf-row.pf-row-4-4-4 {
    grid-template-columns: 1fr;
  }
}

/* =============================================================
   PLANEJAMENTO FINANCEIRO — Planilha mensal (tela de edição)
   Tabela única por unidade com thead sticky dos 12 meses.
   ============================================================= */

/* Resumo DRE sticky no topo */
.pf-resumo-sticky {
  position: sticky;
  top: 0;
  z-index: 6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  background: #fff;
}

/* Cards do dashboard "Grupo" — sombra leve com hover pra dar volume */
.pf-dashboard .card {
  transition: box-shadow 0.2s;
}

.pf-dashboard .card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.pf-dashboard .shadow-soft {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Wrapper (sem overflow scroll — atrapalharia o position:sticky do thead) */
.pf-planilha-wrapper {
  margin-bottom: 1rem;
}

.pf-planilha {
  table-layout: fixed;
  width: 100%;
  min-width: 1540px;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* Larguras fixas por coluna */
.pf-planilha .pf-col-nome {
  width: 240px;
  min-width: 240px;
}

.pf-planilha .pf-col-mes {
  width: 105px;
  min-width: 105px;
  font-size: 0.78rem;
  white-space: nowrap;
}

.pf-planilha .pf-col-total {
  width: 130px;
  min-width: 130px;
  font-size: 0.82rem;
  white-space: nowrap;
}

.pf-planilha .pf-col-acoes {
  width: 70px;
  min-width: 70px;
}

.pf-planilha th,
.pf-planilha td {
  padding: 0.45rem 0.5rem;
  vertical-align: middle;
  border-top: none;
  border-bottom: none;
}

/* Linha divisória só entre seções (não entre linhas dentro de uma seção) */
.pf-planilha tbody.pf-secao+tbody.pf-secao tr.pf-secao-header td {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Thead sticky logo abaixo do resumo DRE (~80px de altura) */
.pf-planilha thead.pf-planilha-head th {
  position: sticky;
  top: 80px;
  z-index: 5;
  background: #f8f9fb;
  border-bottom: 2px solid rgba(24, 51, 143, 0.15);
  border-top: none;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-primary, #18338f);
}

/* Header de seção normal (linha clicável) */
.pf-planilha tbody.pf-secao tr.pf-secao-header td {
  background: #f3f4f8;
  font-weight: 500;
}

.pf-planilha tbody.pf-secao tr.pf-secao-header[data-pf-toggle-secao] {
  cursor: pointer;
}

.pf-planilha tbody.pf-secao tr.pf-secao-header[data-pf-toggle-secao]:hover td {
  background: #eaedf5;
}

/* Chevron do toggle — gira quando aberto */
.pf-secao-chevron {
  transition: transform 0.2s ease;
  color: var(--color-muted, #6c757d);
}

.pf-planilha tbody.pf-secao:not(.pf-secao-fechada) .pf-secao-chevron {
  transform: rotate(90deg);
}

/* Seções calculadas — fundo cinza (destaque por cor de fundo, não por bordas) */
.pf-planilha tbody.pf-secao-calculada tr.pf-secao-header td {
  background: #dcdfe5;
  color: #3a4050;
  font-weight: 600;
}

.pf-planilha tbody.pf-secao-calculada[data-secao-categoria="imposto"] tr.pf-secao-header td {
  background: #e8dcdc;
}

/* Collapse: esconde linhas de detalhe + rodapé de botões */
.pf-planilha tbody.pf-secao-fechada tr.pf-linha {
  display: none;
}

/* Linhas de detalhe — leve indentação no nome */
.pf-planilha tbody.pf-secao tr.pf-linha td {
  background: #fff;
}

.pf-planilha tbody.pf-secao tr.pf-linha:hover td {
  background: #fafbfd;
}

/* Rodapé da seção (botões de adicionar) */
.pf-planilha tr.pf-secao-footer td {
  background: #fafbfd;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

/* Valor mensal editável */
.pf-valor-mes-editavel {
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  display: inline-block;
  min-width: 70px;
  white-space: nowrap;
  transition: background 0.1s ease;
}

/* Badge clicável de tipo_linha (manual / turma) — abre modal de detalhes */
.pf-linha-badge.pf-badge-editavel {
  transition: filter 0.1s ease, transform 0.1s ease;
}

.pf-linha-badge.pf-badge-editavel:hover {
  filter: brightness(0.92);
  transform: translateY(-1px);
}

/* Badge com observação preenchida — sinalização azul clarinho */
.pf-linha-badge.badge-info {
  background-color: #cfe2ff;
  color: #084298;
}

.pf-valor-mes-editavel:hover {
  background: rgba(24, 51, 143, 0.08);
  box-shadow: 0 0 0 1px rgba(24, 51, 143, 0.2) inset;
}

/* Input inline na célula mensal */
.pf-input-mes {
  display: inline-block;
  width: 100%;
  max-width: 85px;
  height: 28px;
  padding: 2px 4px;
  font-size: 0.85rem;
  text-align: right;
}

/* Linha vazia ("Nenhuma linha cadastrada") */
.pf-planilha tr.pf-linha-vazia td {
  background: #fff;
  font-style: italic;
}

@media (max-width: 992px) {
  .pf-resumo-sticky {
    position: static;
  }

  .pf-planilha thead.pf-planilha-head th {
    top: 0;
  }
}

/* ===================================================================
   PLANEJAMENTO FINANCEIRO / RH — Dark Mode
   Sobrescreve os fundos brancos/cinza-claros hardcoded acima.
   Usa o mesmo padrão das outras seções dark-mode (transparências sobre
   o fundo escuro herdado do <body>).
   =================================================================== */

/* Resumo DRE sticky */
.dark-mode .pf-resumo-sticky {
  background: rgba(20, 27, 45, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Cards do dashboard */
.dark-mode .pf-dashboard .card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Header sticky da planilha (linha "MAI/26 JUN/26 ..." com mês fiscal) */
.dark-mode .pf-planilha thead.pf-planilha-head th {
  background: rgba(81, 104, 212, 0.18);
  border-bottom-color: rgba(81, 104, 212, 0.4);
  color: var(--color-primary-light, #a5b4fc);
}

/* Divisória entre seções */
.dark-mode .pf-planilha tbody.pf-secao+tbody.pf-secao tr.pf-secao-header td {
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* Header de seção normal (Receitas, Administrativo, etc.) */
.dark-mode .pf-planilha tbody.pf-secao tr.pf-secao-header td {
  background: rgba(81, 104, 212, 0.12);
  color: var(--color-text, #e2e8f0);
}

.dark-mode .pf-planilha tbody.pf-secao tr.pf-secao-header[data-pf-toggle-secao]:hover td {
  background: rgba(81, 104, 212, 0.22);
}

/* Seções calculadas (Lucro/Margem) */
.dark-mode .pf-planilha tbody.pf-secao-calculada tr.pf-secao-header td {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text, #e2e8f0);
}

.dark-mode .pf-planilha tbody.pf-secao-calculada[data-secao-categoria="imposto"] tr.pf-secao-header td {
  background: rgba(220, 53, 69, 0.12);
}

/* Linhas de detalhe (RH Controladoria, RH Financeiro, etc.) */
.dark-mode .pf-planilha tbody.pf-secao tr.pf-linha td {
  background: transparent;
  color: var(--color-text, #e2e8f0);
}

.dark-mode .pf-planilha tbody.pf-secao tr.pf-linha:hover td {
  background: rgba(81, 104, 212, 0.10);
}

/* Rodapé da seção (botões de adicionar linha) */
.dark-mode .pf-planilha tr.pf-secao-footer td {
  background: rgba(255, 255, 255, 0.02);
}

/* Linha vazia ("Nenhuma linha cadastrada") */
.dark-mode .pf-planilha tr.pf-linha-vazia td {
  background: transparent;
  color: var(--color-muted, #94a3b8);
}

/* Valor mensal editável (hover) */
.dark-mode .pf-valor-mes-editavel:hover {
  background: rgba(81, 104, 212, 0.18);
  box-shadow: 0 0 0 1px rgba(81, 104, 212, 0.45) inset;
}

/* Badge azul de info (observação preenchida) */
.dark-mode .pf-linha-badge.badge-info {
  background-color: rgba(13, 110, 253, 0.25);
  color: #93c5fd;
}

/* Input mensal */
.dark-mode .pf-input-mes {
  background: rgba(20, 27, 45, 0.6);
  border-color: rgba(81, 104, 212, 0.4);
  color: var(--color-text, #e2e8f0);
}

/* ===================================================================
   Planejamento de RH — tabela de projeção
   (usa tabela Bootstrap padrão, então os estilos da seção .dark-mode .table
   já cobrem; este bloco só ajusta os thead/tfoot inline com cor primária.)
   =================================================================== */
.dark-mode [id^="pane-"] thead {
  background: rgba(81, 104, 212, 0.18) !important;
}

.dark-mode [id^="pane-"] tfoot {
  background: rgba(81, 104, 212, 0.18) !important;
}

.dark-mode [id^="pane-"] tfoot td {
  color: var(--color-text, #e2e8f0);
}

/* ===================================================================
   Dashboard "Grupo" — DRE por Unidade, MB por Unidade, etc.
   Sobrescreve os style="background:#f8fafc" / "#f1f5f9" inline.
   Como inline style ganha em especificidade, usamos !important.
   =================================================================== */
.dark-mode .pf-dashboard thead[style*="#f8fafc"],
.dark-mode .pf-dashboard tfoot[style*="#f8fafc"],
.dark-mode .pf-dashboard td[style*="#f8fafc"],
.dark-mode .pf-dashboard th[style*="#f8fafc"] {
  background: rgba(81, 104, 212, 0.18) !important;
  color: var(--color-text, #e2e8f0) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .pf-dashboard th[style*="#f1f5f9"] {
  background: rgba(81, 104, 212, 0.25) !important;
  color: var(--color-text, #e2e8f0) !important;
}

/* ===================================================================
   Sanfona dos cards do kanban
   Cards começam colapsados (header + botões). Clicar no corpo expande;
   clicar de novo abre o modal grande. Botões internos param o evento
   com stopPropagation. Toggle global "Expandir/Colapsar tudo" no header.
   =================================================================== */
.kanban-card {
  cursor: pointer;
  transition: box-shadow 0.18s ease;
}

.kanban-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Conteúdo expandido escondido por padrão */
.kanban-card>.card-body {
  display: none;
}

.kanban-card.expanded>.card-body {
  display: block;
}

/* Botão "Abrir" só aparece no estado colapsado (no expandido o card todo abre o modal) */
.kanban-card.expanded .btn-card-abrir {
  display: none;
}

/* Botão X flutuante no canto superior direito do card — só aparece expandido */
.kanban-card .btn-card-fechar {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-muted);
  border-radius: 50%;
  z-index: 5;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.kanban-card.expanded .btn-card-fechar {
  display: inline-flex;
}

.kanban-card .btn-card-fechar:hover {
  background: #dc3545;
  color: #fff;
  transform: rotate(90deg);
}

/* No estado colapsado, o título do card pode quebrar — aperta o header */
.kanban-card:not(.expanded)>.card-header {
  padding-bottom: 0.5rem !important;
}

/* ===================================================================
   Changelog Banner — Liquid Glass 2025
   Banner de novidades exibido no topo de módulos atualizados.
   Renderizado por modulos/changelog/funcoes_changelog.php.
   =================================================================== */
.changelog-banner {
  margin-bottom: 1rem;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  animation: changelogSlideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.changelog-banner-header-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast);
}

.changelog-banner-header-row:hover {
  background: rgba(24, 51, 143, 0.04);
}

.changelog-banner-toggle {
  flex-shrink: 0;
  color: var(--color-muted);
  font-size: 0.85rem;
  transition: transform var(--transition-smooth);
}

.changelog-banner:not(.collapsed) .changelog-banner-toggle {
  transform: rotate(180deg);
}

.changelog-banner-content {
  padding: 0 1.25rem 1rem 4.25rem;
  max-height: 1500px;
  opacity: 1;
  transition: max-height var(--transition-smooth), opacity var(--transition-smooth), padding var(--transition-smooth);
}

.changelog-banner.collapsed .changelog-banner-content {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

@keyframes changelogSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

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

.changelog-banner-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(24, 51, 143, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--color-primary);
}

.changelog-banner-header {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.changelog-banner-titulo {
  font-size: 1.05rem;
  line-height: 1.3;
}

.changelog-banner-tag {
  background: var(--color-primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}

.changelog-banner-descricao {
  margin: 0 0 0.5rem 0;
  color: var(--color-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.changelog-banner-bullets {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  line-height: 1.55;
}

.changelog-banner-bullets li {
  margin-bottom: 0.25rem;
}

.changelog-banner-bullets li:last-child {
  margin-bottom: 0;
}

.changelog-banner-close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.changelog-banner-close:hover {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  transform: rotate(90deg);
}

.changelog-banner-lido-inline {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 32px;
  padding: 0 0.75rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.changelog-banner-lido-inline:hover {
  background: rgba(40, 167, 69, 0.1);
  border-color: rgba(40, 167, 69, 0.4);
  color: #28a745;
}

.changelog-banner-lido-inline i {
  font-size: 0.85rem;
}

@media (max-width: 576px) {
  .changelog-banner-lido-inline-label {
    display: none;
  }

  .changelog-banner-lido-inline {
    padding: 0;
    width: 32px;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .changelog-banner-header-row {
    padding: 0.7rem 1rem;
    gap: 0.75rem;
  }

  .changelog-banner-content {
    padding-left: 3.4rem;
    padding-right: 1rem;
  }

  .changelog-banner-icon {
    width: 32px;
    height: 32px;
    font-size: 0.95rem;
  }

  .changelog-banner-titulo {
    font-size: 0.98rem;
  }
}

/* ===================================================================
   BUG REPORT — botão flutuante, sidebar, badge nos cards do kanban
   =================================================================== */

#btnReportarBug {
  transition: transform var(--transition-fast, .15s ease), box-shadow var(--transition-fast, .15s ease), background-color var(--transition-fast, .15s ease);
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.25);
  /* Sempre acima de tudo: modais Bootstrap (1050+), sidebars (10000+), etc */
  z-index: 99999 !important;
}

#btnReportarBug:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(220, 53, 69, 0.45);
}

#btnReportarBug i.fa-bug {
  margin-right: 4px;
}

/* Garante que o sidebar de bug report sempre suba acima de modais Bootstrap e sidebars legados */
#bugReportSidebar {
  z-index: 100000 !important;
}

#bugReportSidebar .eformei-sidebar-overlay {
  z-index: 100001 !important;
}

#bugReportSidebar .eformei-sidebar-panel {
  z-index: 100002 !important;
}

.bug-report-form-wrap textarea {
  resize: vertical;
  min-height: 110px;
}

.bug-report-form-wrap label.font-weight-bold {
  color: var(--color-primary, #18338f);
}

#bugReportScreenshotPreview img {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}

/* Card de tarefa marcado como bug report (tipo 18) — borda + badge */
.kanban-card[data-tipo-bug="1"],
.card-tarefa[data-tipo-bug="1"],
.tarefa-card[data-tipo-bug="1"] {
  border-left: 4px solid #dc3545 !important;
  position: relative;
}

.badge-bug-tarefa {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #dc3545, #b02838);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
  box-shadow: 0 1px 3px rgba(220, 53, 69, 0.4);
}

.badge-bug-tarefa i {
  font-size: 0.75rem;
}

/* Filtro "apenas bug" no header do kanban */
.kanban-filtro-bug-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(220, 53, 69, 0.08);
  border: 1px solid rgba(220, 53, 69, 0.25);
  border-radius: var(--radius-sm, .25rem);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast, .15s ease);
}

.kanban-filtro-bug-wrap:hover {
  background: rgba(220, 53, 69, 0.15);
}

.kanban-filtro-bug-wrap input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

.kanban-filtro-bug-wrap label {
  margin: 0;
  cursor: pointer;
  font-size: 0.85rem;
  color: #b02838;
  font-weight: 600;
}

@media (max-width: 600px) {

  #btnReportarBug span,
  #btnReportarBug {
    font-size: 0.78rem;
  }
}

/* Dropzone do modal de anexo rápido em cartoes_transacao */
.anexar-dropzone {
  border: 2px dashed var(--glass-border, #b0b8d4);
  border-radius: var(--radius-md, 0.5rem);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: background var(--transition-fast, 0.15s ease), border-color var(--transition-fast, 0.15s ease);
}

.anexar-dropzone:hover,
.anexar-dropzone.dragover {
  background: rgba(24, 51, 143, 0.05);
  border-color: var(--color-primary, #18338f);
}

/* Modais iframe grandes (#modalIframe_grande / _sem_recarregar) — precisam ficar acima de sidebars
   ativos (z-index 10000+). Sem isso, abrem mas ficam escondidos atrás do painel lateral. */
#modalIframe_grande,
#modalIframe_grande.modal,
#modalIframe_grande.modal.show,
#modalIframe_grande.modal.fade,
#modalIframe_grande_sem_recarregar,
#modalIframe_grande_sem_recarregar.modal,
#modalIframe_grande_sem_recarregar.modal.show,
#modalIframe_grande_sem_recarregar.modal.fade {
  z-index: 11050 !important;
}

#modalIframe_grande .modal-dialog,
#modalIframe_grande_sem_recarregar .modal-dialog {
  z-index: 11051 !important;
}

#modalIframe_grande .modal-content,
#modalIframe_grande_sem_recarregar .modal-content {
  z-index: 11052 !important;
}

/* CRM de Adesão — etiqueta de próximo evento da turma (no card do board e no header do sidebar).
   Cor varia por proximidade: vermelho < 7 dias, amarelo 7-30 dias, verde > 30 dias. */
.crm-card-evento {
  margin-top: 6px;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.3;
  border: 1px solid;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-card-evento strong {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-card-evento-verde {
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
  border-color: rgba(16, 185, 129, 0.3);
}

.crm-card-evento-amarelo {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.35);
}

.crm-card-evento-vermelho {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.35);
}

.dark-mode .crm-card-evento-verde {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.4);
}

.dark-mode .crm-card-evento-amarelo {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.4);
}

.dark-mode .crm-card-evento-vermelho {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.4);
}

.crm-card-evento-neutro {
  background: rgba(148, 163, 184, 0.12);
  color: #475569;
  border-color: rgba(148, 163, 184, 0.35);
}

.dark-mode .crm-card-evento-neutro {
  background: rgba(148, 163, 184, 0.18);
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.4);
}

/* CRM de Adesão — aviso de parcelamento indisponível no card de pacote.
   Aparece quando o pacote não tem âncora válida (sem data_limite_pagamento e sem
   data_baile_formatura na turma) ou quando a âncora já passou. */
.crm-pacote-aviso {
  font-size: 0.7rem;
  margin-top: 4px;
  color: #b45309;
  line-height: 1.35;
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

.crm-pacote-aviso i {
  margin-top: 2px;
  flex-shrink: 0;
}

.dark-mode .crm-pacote-aviso {
  color: #fbbf24;
}

/* CRM de Adesão — badge "Comissão" no card do aluno */
.crm-badge-comissao {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  vertical-align: middle;
}

.dark-mode .crm-badge-comissao {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.4);
}

/* CRM de Adesão — barra de filtros globais (toggle pessoa + ocultar adesão manual) */
.crm-toggle-bar {
  background: var(--crm-card-bg, #ffffff);
  border: 1px solid var(--crm-border, #e2e8f0);
  border-radius: var(--crm-radius-sm, 8px);
  padding: 8px 12px;
  box-shadow: var(--crm-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}

.crm-toggle-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.crm-toggle-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--crm-text-muted, #64748b);
  margin-right: 4px;
}

.crm-toggle-btn {
  background: transparent;
  border: 1px solid var(--crm-border, #e2e8f0);
  color: var(--crm-text-muted, #64748b);
  border-radius: var(--crm-radius-sm, 8px);
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.crm-toggle-btn:hover {
  background: var(--crm-col-bg, #f8fafc);
  color: var(--crm-text-main, #1e293b);
}

.crm-toggle-btn.active {
  background: var(--crm-primary, #4f46e5);
  border-color: var(--crm-primary, #4f46e5);
  color: #ffffff;
}

.crm-toggle-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--crm-text-muted, #64748b);
  cursor: pointer;
  user-select: none;
}

.crm-toggle-check input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

.dark-mode .crm-toggle-bar {
  background: rgba(20, 27, 45, 0.7);
  border-color: rgba(71, 85, 105, 0.3);
}

.dark-mode .crm-toggle-btn {
  border-color: rgba(71, 85, 105, 0.4);
  color: #94a3b8;
}

.dark-mode .crm-toggle-btn:hover {
  background: rgba(30, 40, 60, 0.6);
  color: #e4e4e7;
}

.dark-mode .crm-toggle-btn.active {
  background: var(--crm-primary-light, #818cf8);
  border-color: var(--crm-primary-light, #818cf8);
  color: #0f1729;
}

/* CRM de Adesão — filtro por nome dentro do header de cada coluna */
.crm-filtro-coluna {
  margin-top: 8px;
  height: 30px;
  padding: 4px 10px;
  font-size: 0.78rem;
  border-radius: var(--radius-sm, 0.25rem);
  border: 1px solid var(--crm-border, #e2e8f0);
  background: var(--crm-col-bg, #f8fafc);
  color: var(--crm-text-main, #1e293b);
}

.crm-filtro-coluna:focus {
  outline: none;
  border-color: var(--crm-primary, #4f46e5);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
  background: var(--crm-card-bg, #ffffff);
}

.dark-mode .crm-filtro-coluna {
  background: rgba(20, 27, 45, 0.6);
  border-color: rgba(71, 85, 105, 0.4);
  color: #e4e4e7;
}

.dark-mode .crm-filtro-coluna:focus {
  border-color: var(--crm-primary-light, #818cf8);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
  background: rgba(30, 40, 60, 0.8);
}

/* ============================================================
   One-on-One (1:1) — estilos extraídos de one_on_one2.php
   e modulos/one_on_one/carregar_pessoa_sidebar.php
   ============================================================ */

/* --- Tab cards (navegação Liderados / Líder / Outras / Análise) --- */
.one-on-one-tab-cards {
  display: flex;
  align-items: center;
}

.one-on-one-tab-cards .tab-card {
  margin-left: 0.5rem;
}

.one-on-one-tab-cards .tab-card:first-child {
  margin-left: 0;
}

/* Substitui gap-2 (Bootstrap 5) em grupos de botões */
.one-on-one-btn-row>.btn,
.one-on-one-btn-row>a {
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

.one-on-one-btn-row>.btn:last-child,
.one-on-one-btn-row>a:last-child {
  margin-right: 0;
}

.tab-card {
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

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

.tab-card.active-card {
  border-width: 2px !important;
}

.tab-card .card-body,
.tab-card .card-body * {
  pointer-events: none;
}

/* --- Cards de pessoa --- */
.card-pessoa-oneonone {
  transition: all 0.3s ease;
  border-left: 4px solid transparent;
}

.card-pessoa-oneonone:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-left-color: #007bff;
}

.card-pessoa-oneonone .rounded-circle {
  border: 2px solid #e9ecef;
  transition: border-color 0.3s ease;
}

.card-pessoa-oneonone:hover .rounded-circle {
  border-color: #007bff;
}

/* Cards de estatísticas com hover (apenas dentro da página 1:1) */
.one-on-one-stats-card {
  transition: all 0.3s ease;
}

.one-on-one-stats-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Header colapsável (assuntos / anotações / tarefas dentro da reunião) */
.card-header-clickable {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.card-header-clickable:hover {
  background-color: #f8f9fa !important;
}

.card-header-clickable .fa-chevron-down {
  transition: transform 0.3s ease;
}

.card-header-clickable:not(.collapsed) .fa-chevron-down {
  transform: rotate(180deg);
}

/* Botões verticais nos cards */
.card-pessoa-oneonone .btn-group-vertical .btn:hover {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

/* Animação suave para transições de aba (escopada na página 1:1) */
#liderados.tab-pane,
#lider.tab-pane,
#outras.tab-pane,
#analytics.tab-pane {
  animation: oneOnOneFadeIn 0.4s ease-in;
}

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

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

/* Histórico (sidebar) */
.historico-conteudo .spinner-border {
  width: 1.5rem;
  height: 1.5rem;
}

.border-left-primary {
  border-left: 3px solid #007bff !important;
}

/* Avaliação de sentimento — ícone hover */
.sentimento-avaliar-hover:hover {
  transform: scale(1.2);
  color: var(--color-primary, #007bff) !important;
}

.sentimento-avaliar-hover:hover i {
  color: var(--color-primary, #007bff) !important;
}

/* Sistema de estrelas (rating) */
.one-on-one-star-rating {
  display: flex;
  gap: 5px;
  font-size: 24px;
  justify-content: center;
}

.one-on-one-star-rating .star {
  color: #ddd;
  cursor: pointer;
  transition: color 0.2s ease;
  user-select: none;
}

.one-on-one-star-rating .star:hover,
.one-on-one-star-rating .star.hover {
  color: #ffd700;
}

.one-on-one-star-rating .star.selected {
  color: #ffc107;
}

.one-on-one-rating-container {
  text-align: center;
  padding: 20px 0;
}

/* Substitui text-decoration-line-through (Bootstrap 5) — usado em assuntos finalizados */
.assunto-finalizado {
  text-decoration: line-through;
  color: #6c757d;
}

/* Edição inline de assuntos e anotações */
.assunto-titulo-editavel:hover,
.anotacao-texto-editavel:hover {
  background-color: #f8f9fa !important;
  border: 1px dashed #dee2e6 !important;
}

.assunto-titulo-editavel:focus,
.anotacao-texto-editavel:focus {
  background-color: #fff !important;
  border: 1px solid #007bff !important;
  outline: none !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.assunto-titulo-editavel[contenteditable="false"],
.anotacao-texto-editavel[contenteditable="false"] {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Filtros e paginação do histórico */
.paginacao-historico .pagination {
  margin-bottom: 0;
}

.paginacao-historico .page-link {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
}

.paginacao-historico .page-item.active .page-link {
  background-color: var(--color-primary, #007bff);
  border-color: var(--color-primary, #007bff);
}

.filtros-historico .card {
  border: 1px solid #e9ecef;
  box-shadow: none;
}

.filtros-historico .card-body {
  padding: 1rem;
}

.filtros-historico label {
  font-weight: 500;
}

/* Responsividade */
@media (max-width: 768px) {
  .card-pessoa-oneonone .row>div {
    margin-bottom: 15px;
  }

  .card-pessoa-oneonone .col-md-4,
  .card-pessoa-oneonone .col-md-3,
  .card-pessoa-oneonone .col-md-2 {
    text-align: center !important;
  }

  .card-pessoa-oneonone .btn-group-vertical {
    width: 100%;
  }

  .card-pessoa-oneonone .btn-group-vertical .btn {
    width: 100%;
    margin-bottom: 5px;
  }
}

/* --- Sidebar de pessoa (carregar_pessoa_sidebar.php) --- */
.pessoa-header {
  text-align: center;
  padding: 2rem 1rem 1.5rem;
  background: #fafafa;
  margin: 0 -1.5rem 1.5rem -1.5rem;
}

.pessoa-header img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 1rem;
}

.pessoa-header h5 {
  margin: 0.5rem 0 0.25rem;
  font-weight: 600;
  color: #18338f;
  font-size: 1.25rem;
}

.stat-card {
  transition: all 0.3s ease;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.stat-card .card-body {
  padding: 1.25rem;
}

.stat-card .emoji-grande {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-card h3 {
  margin: 0.5rem 0 0.25rem;
  font-size: 2rem;
  font-weight: 700;
}

.colaborador-selector {
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  padding: 1.5rem;
  margin: -1.5rem -1.5rem 0 -1.5rem;
  position: sticky;
  top: 0;
  z-index: 50;
}

.colaborador-selector label {
  display: none;
}

.colaborador-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e0e0e0;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}

.sidebar-nav-floating {
  position: absolute;
  left: 20px;
  top: 200px;
  z-index: 100;
  background: #fff;
  border-radius: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-nav-floating .nav-item {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 50%;
  position: relative;
  color: #6c757d;
}

.sidebar-nav-floating .nav-item:hover {
  background: rgba(24, 51, 143, 0.1);
  transform: scale(1.1);
  color: #18338f;
}

.sidebar-nav-floating .nav-item.active {
  background: rgba(24, 51, 143, 0.15);
  box-shadow: inset 0 0 0 2px #18338f;
  color: #18338f;
}

.sidebar-nav-floating .nav-item i {
  font-size: 1.25rem;
}

.sidebar-nav-floating .nav-item::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 60px;
  background: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.sidebar-nav-floating .nav-item:hover::after {
  opacity: 1;
}

.secao-item {
  display: none;
  animation: oneOnOneFadeIn 0.3s ease-in;
}

.secao-item.active {
  display: block;
}

@media (max-width: 768px) {
  .sidebar-nav-floating {
    display: none;
  }
}

/* --- Overrides já presentes globalmente desde o módulo One-on-One --- */
/* Mantidos por compatibilidade — afetam o site inteiro como antes do refator. */

/* Workaround para garantir renderização dos ícones nos tab-cards */
.tab-card i {
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome !important;
  font-weight: 900 !important;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}

.tab-card i.fa-users:before {
  content: "\f0c0";
}

.tab-card i.fa-user-tie:before {
  content: "\f508";
}

.tab-card i.fa-chart-line:before {
  content: "\f201";
}

.tab-card i.fas {
  font-weight: 900 !important;
}

/* Estilos para accordion de reuniões */
.accordion .card {
  border: 1px solid #dee2e6;
}

.accordion .card-header {
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  cursor: pointer;
  padding: 0.75rem 1rem;
}

.accordion .card-header:hover {
  background-color: #e9ecef;
}

.accordion .card-header .btn-link {
  text-decoration: none;
  color: #212529;
  padding: 0;
}

.accordion .card-header .btn-link:hover {
  text-decoration: none;
}

.accordion .card-header .btn-link .fa-chevron-down {
  transition: transform 0.3s ease;
}

.accordion .card-header .btn-link:not(.collapsed) .fa-chevron-down {
  transform: rotate(180deg);
}

.accordion .card-body {
  padding: 1rem;
}

/* Reforço de utilities flex (overrides com !important — mantidos como estavam) */
.d-flex {
  display: flex !important;
}

.align-items-center {
  align-items: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

/* Lista com borda lateral animada (efeito ativo no site desde o módulo 1:1) */
.list-group-item {
  border-left: 3px solid transparent;
  transition: border-color 0.2s ease;
}

.list-group-item:hover {
  border-left-color: #007bff;
  background-color: #f8f9fa;
}

@media (max-width: 768px) {
  .form-adicionar-assunto .row>div {
    margin-bottom: 10px;
  }
}

/* Boletos Tecnospeed — barra fixa de totalização no rodapé da listagem */
.boletos-tecno-footer-totais {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 10px;
  border: 1px solid #F0F0F0;
}

/* === Cultura · Prioridades === */
.prioridade-card {
  transition: all 0.2s ease;
  border-left: 4px solid var(--color-primary);
}

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

.prioridade-item {
  padding: 10px;
  background: rgba(24, 51, 143, 0.03);
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
}

.prioridade-item:nth-child(1) {
  border-left-color: #007bff;
}

.prioridade-item:nth-child(2) {
  border-left-color: #17a2b8;
}

.prioridade-item:nth-child(3) {
  border-left-color: #6c757d;
}

/* Compartilhada com sentimentos no sprint-2 — centralizar lá depois */
.navegacao-semana {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
}

.navegacao-semana h5 {
  margin: 0;
  min-width: 280px;
  text-align: center;
}

/* Compartilhada com sentimentos no sprint-2 — centralizar lá depois */
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.pagination .page-item.active .page-link {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* === Cultura · Sentimentos === */
:root {
  --cor-sentimento-muito-feliz: #28a745;
  --cor-sentimento-feliz: #20c997;
  --cor-sentimento-pensativo: #17a2b8;
  --cor-sentimento-neutro: #6c757d;
  --cor-sentimento-triste: #ffc107;
  --cor-sentimento-muito-triste: #dc3545;
}

.sentimento-card {
  transition: all 0.2s ease;
  border-left: 4px solid transparent;
}

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

.sentimento-card.muito_feliz {
  border-left-color: var(--cor-sentimento-muito-feliz);
}

.sentimento-card.feliz {
  border-left-color: var(--cor-sentimento-feliz);
}

.sentimento-card.pensativo {
  border-left-color: var(--cor-sentimento-pensativo);
}

.sentimento-card.neutro {
  border-left-color: var(--cor-sentimento-neutro);
}

.sentimento-card.triste {
  border-left-color: var(--cor-sentimento-triste);
}

.sentimento-card.muito_triste {
  border-left-color: var(--cor-sentimento-muito-triste);
}

.emoji-display {
  font-size: 48px;
  line-height: 1;
}

.filtro-badge {
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 8px 16px;
  font-size: 14px;
}

.filtro-badge:hover {
  transform: scale(1.05);
}

.filtro-badge.active {
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* === Cultura · Liderança === */
.avatar-iniciais-md,
.avatar-iniciais-sm {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #fff;
  font-weight: bold;
}

.avatar-iniciais-md {
  width: 48px;
  height: 48px;
  font-size: 14px;
}

.avatar-iniciais-sm {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.lideranca-prioridade-truncate {
  max-width: 300px;
}

.emoji-status-help {
  font-size: 24px;
  cursor: help;
}

/* === Cultura · OKRs === */
.hover-bg-light:hover {
  background-color: rgba(0, 0, 0, 0.03);
  cursor: pointer;
}

.min-width-0 {
  min-width: 0;
}

#accordionLiderados .btn-link:focus {
  box-shadow: none;
  text-decoration: none;
}

#accordionLiderados .btn-link:hover {
  background-color: rgba(0, 0, 0, 0.02);
  text-decoration: none;
}

#accordionLiderados .btn-link:not(.collapsed) .fa-chevron-down {
  transform: rotate(180deg);
}

/* Cards de navegação OKR — força font-family pra ícones renderizarem corretamente.
   Override de .text-muted (que aplica font-family/line-height/margin-top que cortam o glyph). */
.tab-card-okr i,
.tab-card-okr i.text-muted,
.tab-card-okr i.text-primary {
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  margin-top: 0 !important;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
}

/* Filtros de sidebar OKR — aumenta especificidade pra vencer .d-flex (Bootstrap !important).
   .filtro-oculto/.filtro-visivel globais não venciam .d-flex em items que combinam ambas. */
.colaborador-item.filtro-oculto,
.time-item.filtro-oculto,
.unidade-item.filtro-oculto {
  display: none !important;
}

.colaborador-item.filtro-visivel,
.time-item.filtro-visivel,
.unidade-item.filtro-visivel {
  display: flex !important;
}

.tab-card-okr:hover {
  transform: translateY(-2px);
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#cards-navigation-okrs a,
#cards-navigation-okrs a:hover {
  text-decoration: none !important;
}

/* === Relatório de Contas a Pagar/Receber v2 === */
/* Sprint 2 do épico relatorio-contas-v2 — visibilidade condicional dos filtros por Tipo */

.filtros-relatorio-contas .filtro-requer-tipo,
.filtros-relatorio-contas .filtros-relatorio-contas-msg-tipo {
  display: none;
}

.filtros-relatorio-contas[data-tipo=""] .filtros-relatorio-contas-msg-tipo {
  display: block;
}

.filtros-relatorio-contas[data-tipo="1"] .filtro-requer-tipo,
.filtros-relatorio-contas[data-tipo="2"] .filtro-requer-tipo,
.filtros-relatorio-contas[data-tipo="3"] .filtro-requer-tipo {
  display: block;
}

/* Filtros que dependem de tipo específico — escondidos por padrão dentro do .filtro-requer-tipo */
.filtros-relatorio-contas .filtro-tipo-1,
.filtros-relatorio-contas .filtro-tipo-2,
.filtros-relatorio-contas .filtro-tipo-3 {
  display: none;
}

.filtros-relatorio-contas[data-tipo="1"] .filtro-tipo-1 {
  display: block;
}

.filtros-relatorio-contas[data-tipo="2"] .filtro-tipo-2 {
  display: block;
}

.filtros-relatorio-contas[data-tipo="3"] .filtro-tipo-3 {
  display: block;
}

/* form-group em flex (alinhamento dos switches) — preserva display flex do form-row */
.filtros-relatorio-contas .filtro-tipo-1.d-flex,
.filtros-relatorio-contas .filtro-tipo-3.d-flex {
  display: none;
}

.filtros-relatorio-contas[data-tipo="1"] .filtro-tipo-1.d-flex {
  display: flex !important;
}

.filtros-relatorio-contas[data-tipo="3"] .filtro-tipo-3.d-flex {
  display: flex !important;
}

/* Tipo selector — 3 cards clicáveis */
.tipo-relatorio-grupo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

@media (max-width: 768px) {
  .tipo-relatorio-grupo {
    grid-template-columns: 1fr;
  }
}

.tipo-relatorio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  background: var(--glass-bg);
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin: 0;
  user-select: none;
}

.tipo-relatorio-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tipo-relatorio-card i {
  font-size: 1.5rem;
  margin-bottom: 0.4rem;
  opacity: 0.65;
  transition: all var(--transition-fast);
}

.tipo-relatorio-card strong {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.2rem;
}

.tipo-relatorio-card small {
  font-size: 0.78rem;
  color: var(--color-muted);
  line-height: 1.25;
}

.tipo-relatorio-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.tipo-relatorio-card.active {
  border-color: var(--color-primary);
  background: rgba(24, 51, 143, 0.06);
  box-shadow: 0 4px 12px rgba(24, 51, 143, 0.15);
}

.tipo-relatorio-card.active i {
  opacity: 1;
}

.tipo-relatorio-card.active strong {
  color: var(--color-primary);
}

/* ============================================================================
   Framework de Relatórios — Sprint 0 do épico padronizacao-relatorios.
   Doc: .claude/epicos/padronizacao-relatorios/padrao-referencia.md

   Classes .bloco-relatorio* (sem sufixo -v2) são o nome canônico do framework.
   As classes .bloco-relatorio-v2* logo abaixo seguem idênticas em comportamento
   e serão removidas na Sprint 57 (alias temporário durante a migração).
   ============================================================================ */

.bloco-relatorio {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--glass-bg);
}

.bloco-relatorio-header {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.025);
  border-bottom: 1px solid var(--glass-border);
  user-select: none;
}

.bloco-relatorio-header-trigger {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.bloco-relatorio-header-trigger:hover {
  background: rgba(0, 0, 0, 0.04);
}

.bloco-relatorio-header h6 {
  font-weight: 600;
  color: var(--color-primary);
}

.bloco-relatorio-chevron {
  font-size: 0.75rem;
  color: var(--color-muted);
  transition: transform var(--transition-fast);
}

.bloco-relatorio-header-trigger[aria-expanded="false"] .bloco-relatorio-chevron {
  transform: rotate(-90deg);
}

.bloco-relatorio-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bloco-relatorio-body {
  padding: 1rem;
}

.bloco-relatorio-footer {
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.025);
  border-top: 1px solid var(--glass-border);
  font-size: 0.9rem;
}

/* Mobile-friendly: filtros agrupados quebram pra coluna única em <=768px.
   Comportamento já coberto pelo grid Bootstrap; reforço aqui pra wrapper. */
@media (max-width: 768px) {
  .bloco-relatorio-footer .row {
    row-gap: 0.5rem;
  }
}

/* === Fim Framework de Relatórios — alias .bloco-relatorio-v2* abaixo === */

/* Blocos do Relatório v2 — sub-cards leves dentro do card principal.
   Mantém Liquid Glass com border + cantos arredondados, sem peso visual de card aninhado. */
.bloco-relatorio-v2 {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--glass-bg);
}

.bloco-relatorio-v2-header {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.025);
  border-bottom: 1px solid var(--glass-border);
  user-select: none;
}

.bloco-relatorio-v2-header-trigger {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.bloco-relatorio-v2-header-trigger:hover {
  background: rgba(0, 0, 0, 0.04);
}

.bloco-relatorio-v2-header h6 {
  font-weight: 600;
  color: var(--color-primary);
}

.bloco-relatorio-v2-chevron {
  font-size: 0.75rem;
  color: var(--color-muted);
  transition: transform var(--transition-fast);
}

.bloco-relatorio-v2-header-trigger[aria-expanded="false"] .bloco-relatorio-v2-chevron {
  transform: rotate(-90deg);
}

.bloco-relatorio-v2-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bloco-relatorio-v2-body {
  padding: 1rem;
}

.bloco-relatorio-v2-footer {
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.025);
  border-top: 1px solid var(--glass-border);
  font-size: 0.9rem;
}

/* Wrapper da tabela do relatório v2 — overflow-x próprio sem herdar
   o padding/sticky da .scrolling-wrapper genérica. */
.tabela-relatorio-v2-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

#tabelaResultadosRelatorioContas {
  margin-bottom: 0;
}

#tabelaResultadosRelatorioContas thead th {
  background: rgba(0, 0, 0, 0.03);
  font-weight: 600;
  font-size: 0.85rem;
  border-top: none;
  white-space: nowrap;
  vertical-align: middle;
}

#tabelaResultadosRelatorioContas tbody td {
  font-size: 0.875rem;
  vertical-align: middle;
}

/* === OKR — Lista de liderados (sidebar esquerda em okrs2.php, sprint-5) === */
.okr-liderado-foto {
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.okr-liderado-foto-sm {
  width: 32px;
  height: 32px;
}

.okr-liderado-foto-md {
  width: 36px;
  height: 36px;
}

.okr-liderado-foto-icon-sm {
  font-size: 0.7rem;
}

.okr-liderado-foto-icon-md {
  font-size: 0.8rem;
}

.okr-liderado-nome {
  font-weight: 700;
}

.okr-liderado-nome-sm {
  font-size: 0.85rem;
}

.okr-liderado-nome-md {
  font-size: 0.9rem;
}

.okr-liderado-badge-sm {
  font-size: 0.6rem;
  padding: 2px 4px;
}

.okr-liderado-badge-md {
  font-size: 0.65rem;
}

.okr-liderado-info-sm {
  font-size: 0.7rem;
}

.okr-liderado-info-md {
  font-size: 0.75rem;
}

.okr-liderado-progress-sm {
  height: 2px;
  width: 50px;
}

.okr-liderado-progress-md {
  height: 3px;
  width: 60px;
}

/* === OKR — Sidebar esquerda (col-lg-3) — sprint-5 === */
.tab-card-okr {
  cursor: pointer;
}

.tab-icon-okr {
  font-size: 24px;
  display: block;
}

.okr-accordion-header-text {
  font-size: 0.85rem;
}

.okr-accordion-badge {
  font-size: 0.75rem;
}

.okr-accordion-chevron {
  font-size: 0.7rem;
  transition: transform 0.2s;
}

.okr-accordion-body-scroll {
  max-height: 200px;
  overflow-y: auto;
}

.okr-meus-liderados-scroll {
  max-height: 400px;
  overflow-y: auto;
}

.okr-list-scroll {
  max-height: 500px;
}

.okr-circle-md {
  width: 40px;
  height: 40px;
}

.okr-circle-lg {
  width: 50px;
  height: 50px;
}

.okr-circle-icon-md {
  font-size: 1rem;
}

.okr-circle-icon-lg {
  font-size: 1.5rem;
}

.okr-progress-thin {
  height: 4px;
}

.okr-progress-thin-80 {
  height: 4px;
  width: 80px;
}

.okr-progress-thin-120 {
  height: 4px;
  width: 120px;
}

.okr-progress-mid-120 {
  height: 6px;
  width: 120px;
}

.okr-time-list-item {
  cursor: pointer;
  transition: background-color 0.2s;
}

.okr-time-list-item:hover {
  background-color: #f8f9fa;
}

/* === Validar staff (sidebar de validação de checkout) ============== */
/* Linha-pai agregada (clicável) — cinza pra diferenciar do resto da listagem */
#validarStaffSidebarContent #interno .tr-agregado-clicavel,
#interno .tr-agregado-clicavel {
  cursor: pointer;
  background-color: rgba(108, 117, 125, 0.08) !important;
}

#validarStaffSidebarContent #interno .tr-agregado-clicavel:hover,
#interno .tr-agregado-clicavel:hover {
  background-color: rgba(108, 117, 125, 0.15) !important;
}

/* Sublinhas expandidas (parte do grupo) — leve azul + barra à esquerda */
#validarStaffSidebarContent #interno .tr-detalhe-agregado,
#interno .tr-detalhe-agregado {
  background-color: rgba(0, 123, 255, 0.06) !important;
  border-left: 3px solid var(--color-primary, #007bff);
}

#validarStaffSidebarContent #interno .tr-detalhe-agregado td,
#interno .tr-detalhe-agregado td {
  border-top-color: rgba(0, 123, 255, 0.2);
}

/* Aba externa (Gestão de staff / #turmas): mesma mecânica do interno, mas cor
   distinta (roxo) pra diferenciar do azul do interno. */
#validarStaffSidebarContent #turmas .tr-agregado-clicavel,
#turmas .tr-agregado-clicavel {
  cursor: pointer;
  background-color: rgba(108, 117, 125, 0.08) !important;
}

#validarStaffSidebarContent #turmas .tr-agregado-clicavel:hover,
#turmas .tr-agregado-clicavel:hover {
  background-color: rgba(108, 117, 125, 0.15) !important;
}

/* Sublinhas expandidas (parte do grupo) — leve roxo + barra à esquerda */
#validarStaffSidebarContent #turmas .tr-detalhe-agregado,
#turmas .tr-detalhe-agregado {
  background-color: rgba(111, 66, 193, 0.07) !important;
  border-left: 3px solid #6f42c1;
}

#validarStaffSidebarContent #turmas .tr-detalhe-agregado td,
#turmas .tr-detalhe-agregado td {
  border-top-color: rgba(111, 66, 193, 0.2);
}

/* ==========================================================================
   Acompanhamento de Staff — cards de fornecedor (acompanhamento_staff2.php)
   ========================================================================== */
.acomp-staff-card {
  position: relative;
  background: var(--glass-bg-lighter, #fff);
  border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.08));
  border-radius: var(--radius-md, 20px);
  box-shadow: var(--shadow-soft, 0 2px 8px rgba(0, 0, 0, 0.06));
  padding: 1rem 1rem 0.75rem;
  overflow: hidden;
  transition: var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
  height: 100%;
  display: flex;
  flex-direction: column;
}

.acomp-staff-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 6px 16px rgba(0, 0, 0, 0.1));
  border-color: rgba(24, 51, 143, 0.25);
}

.acomp-staff-card-disabled {
  background: rgba(0, 0, 0, 0.02);
  opacity: 0.85;
}

.acomp-staff-card-disabled:hover {
  transform: none;
  border-color: var(--glass-border, rgba(0, 0, 0, 0.08));
  box-shadow: var(--shadow-soft, 0 2px 8px rgba(0, 0, 0, 0.06));
}

.acomp-staff-card-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.acomp-staff-card-bar.bar-warning {
  background: var(--color-warning, #ffa502);
}

.acomp-staff-card-bar.bar-success {
  background: var(--color-success, #00c896);
}

.acomp-staff-card-bar.bar-muted {
  background: var(--color-muted, #6c757d);
  opacity: 0.4;
}

.acomp-staff-card-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text, #1a1a1a);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acomp-staff-card-id-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.15rem;
}

.acomp-staff-card-id {
  font-size: 0.75rem;
  color: var(--color-muted, #6c757d);
  font-weight: 500;
}

.acomp-staff-card-total {
  flex-shrink: 0;
  min-width: 32px;
  height: 32px;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: rgba(24, 51, 143, 0.1);
  color: var(--color-primary, #18338f);
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.acomp-staff-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.acomp-meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.3;
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-muted, #6c757d);
  border: 1px solid transparent;
  white-space: nowrap;
}

.acomp-meta-tag.tag-doc {
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-muted, #6c757d);
}

.acomp-meta-tag.tag-interno {
  background: rgba(24, 51, 143, 0.08);
  color: var(--color-primary, #18338f);
}

.acomp-meta-tag.tag-externo {
  background: rgba(95, 39, 205, 0.08);
  color: var(--color-info, #5f27cd);
}

.acomp-meta-tag.tag-warning {
  background: rgba(255, 165, 2, 0.12);
  color: #b77100;
}

.acomp-meta-tag.tag-info {
  background: rgba(95, 39, 205, 0.1);
  color: var(--color-info, #5f27cd);
}

.acomp-meta-tag.tag-success {
  background: rgba(0, 200, 150, 0.12);
  color: #00845f;
}

.acomp-meta-tag.tag-muted {
  background: rgba(108, 117, 125, 0.1);
  color: var(--color-muted, #6c757d);
}

.acomp-staff-card-footer {
  margin-top: auto;
  padding-top: 0.75rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem;
}

/* Dark mode */
.dark-mode .acomp-staff-card {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(71, 85, 105, 0.4);
}

.dark-mode .acomp-staff-card-disabled {
  background: rgba(30, 41, 59, 0.35);
}

.dark-mode .acomp-staff-card-name {
  color: #e2e8f0;
}

.dark-mode .acomp-meta-tag {
  background: rgba(255, 255, 255, 0.05);
}

/* =============================
   SINO — Grupo expansível (sprint-4 notificacoes-revitalizacao)
   ============================= */
.sino-grupo .sino-grupo-header {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.sino-grupo .sino-grupo-header:hover {
  text-decoration: none;
}

.sino-grupo .sino-grupo-chevron {
  transition: transform 0.2s ease;
}

.sino-grupo .sino-grupo-header[aria-expanded="true"] .sino-grupo-chevron {
  transform: rotate(180deg);
}

.sino-grupo .sino-grupo-itens .sino-grupo-item:first-child {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.sino-grupo .sino-grupo-acoes a.card-link {
  margin-right: 0.75rem;
}

/* Inline edit em tabelas (módulo Empréstimos e Consórcios e afins) */
td.ec-inline-edit {
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

td.ec-inline-edit:hover {
  background-color: rgba(24, 51, 143, 0.06);
  border-bottom-color: var(--color-primary);
}

td.ec-inline-edit[data-editing="1"] {
  background-color: rgba(24, 51, 143, 0.04);
  cursor: default;
}

/* Empréstimos: linhas com débito de juros sobre saldo devedor (CDI etc) */
#ec-tabela-parcelas tr.ec-linha-tem-juros {
  background-color: rgba(23, 162, 184, 0.05);
}

#ec-tabela-parcelas tr.ec-linha-tem-juros:hover {
  background-color: rgba(23, 162, 184, 0.08);
}

/* Empréstimos: card de custo total do contrato (acima do quadro de parcelas) */
.ec-custo-total-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 1rem;
  background: rgba(24, 51, 143, 0.04);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
}

.ec-custo-total-item {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.ec-custo-total-label {
  font-size: 11px;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.ec-custo-total-item strong {
  font-size: 1rem;
  color: var(--color-text, #212529);
}

.ec-custo-total-final {
  margin-left: auto;
  text-align: right;
  padding-left: 1rem;
  border-left: 1px solid var(--glass-border);
}

.ec-custo-total-final strong {
  font-size: 1.4rem;
  color: var(--color-primary);
}

/* Empréstimos: timeline do modal de progresso da extração IA */
.ec-ia-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.ec-ia-timeline-item {
  position: relative;
  padding-left: 36px;
  padding-bottom: 14px;
  border-left: 2px solid var(--glass-border);
  margin-left: 12px;
}

.ec-ia-timeline-item:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.ec-ia-timeline-icone {
  position: absolute;
  left: -13px;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: #fff;
  border: 2px solid var(--color-muted);
  color: var(--color-muted);
}

.ec-ia-timeline-item.pending .ec-ia-timeline-icone {
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.3);
}

.ec-ia-timeline-item.running .ec-ia-timeline-icone {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(24, 51, 143, 0.08);
}

.ec-ia-timeline-item.done .ec-ia-timeline-icone {
  border-color: #28a745;
  background: #28a745;
  color: #fff;
}

.ec-ia-timeline-item.error .ec-ia-timeline-icone {
  border-color: #dc3545;
  background: #dc3545;
  color: #fff;
}

.ec-ia-timeline-item.warning .ec-ia-timeline-icone {
  border-color: #ffc107;
  background: #ffc107;
  color: #fff;
}

.ec-ia-timeline-titulo {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ec-ia-timeline-item.pending .ec-ia-timeline-titulo {
  color: var(--color-muted);
}

.ec-ia-timeline-tempo {
  margin-left: auto;
  font-size: 0.85em;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.ec-ia-timeline-detalhe {
  font-size: 0.85em;
  color: var(--color-muted);
  margin-top: 2px;
}

.ec-ia-timeline-detalhe code {
  font-size: 0.9em;
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--color-text, #212529);
}

/* ===========================================================================
   Informativos: Base externa (tipo=3) — gerenciamento de destinatários
   =========================================================================== */
.informativos-base-externa-fieldset {
  padding: 0.75rem 1rem 1rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: rgba(24, 51, 143, 0.02);
  margin-bottom: 1rem;
}

.informativos-base-externa-fieldset>legend {
  width: auto;
  padding: 0 0.5rem;
  font-size: 1rem;
  margin-bottom: 0.75rem;
  color: var(--color-primary);
}

.informativos-base-externa-contador {
  margin-left: 0.5rem;
  font-weight: 500;
}

.informativos-base-externa-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.informativos-base-externa-form {
  background: rgba(255, 255, 255, 0.6);
  border: 1px dashed var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}

.informativos-base-externa-feedback {
  min-height: 1.2em;
  margin-top: 0.25rem;
}

.informativos-base-externa-tabela-wrapper {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: #fff;
}

.informativos-base-externa-tabela {
  margin-bottom: 0;
}

.informativos-base-externa-tabela thead th {
  position: sticky;
  top: 0;
  background: rgba(24, 51, 143, 0.06);
  z-index: 1;
  font-weight: 600;
  border-bottom: 1px solid var(--glass-border);
}

.informativos-base-externa-tabela tbody tr:hover {
  background: rgba(24, 51, 143, 0.03);
}

.informativos-base-externa-tabela .informativos-base-externa-remover {
  padding: 0 0.5rem;
  color: #dc3545;
}

.informativos-base-externa-tabela .informativos-base-externa-remover:hover {
  color: #b21f2d;
}

.informativos-base-externa-vazio {
  padding: 1.25rem;
  text-align: center;
  color: var(--color-muted);
  background: #fff;
  border: 1px dashed var(--glass-border);
  border-radius: var(--radius-sm);
}

/* Pré-visualização do upload CSV/XLSX */
.informativos-base-externa-preview {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
}

.informativos-base-externa-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.informativos-base-externa-preview-tabela-wrapper {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: #fff;
}

.informativos-base-externa-preview-tabela {
  margin-bottom: 0;
}

.informativos-base-externa-preview-tabela thead th {
  position: sticky;
  top: 0;
  background: rgba(24, 51, 143, 0.06);
  z-index: 1;
  font-weight: 600;
}

.informativos-base-externa-preview-row-valido {
  background: rgba(40, 167, 69, 0.04);
}

.informativos-base-externa-preview-row-duplicado {
  background: rgba(255, 193, 7, 0.06);
}

.informativos-base-externa-preview-row-invalido {
  background: rgba(220, 53, 69, 0.05);
  color: var(--color-muted);
}

/* Lista de destinatários no modal de confirmação de envio */
.informativos-base-externa-confirmacao-lista {
  max-height: 240px;
  overflow-y: auto;
  padding-left: 1.25rem;
  font-size: 0.875rem;
}

.informativos-base-externa-confirmacao-lista li {
  padding: 0.15rem 0;
}

/* Botão piscando pra chamar atenção quando há válidos pendentes no preview */
.btn-pulse-attention {
  animation: btn-pulse-attention 0.7s ease-in-out 0s 4;
  box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
}

@keyframes btn-pulse-attention {
  0% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 0 14px rgba(40, 167, 69, 0);
    transform: scale(1.05);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    transform: scale(1);
  }
}

/* Cards selecionáveis (usado em retirar_solicitacao para listar patrimônios candidatos com checkbox) */
.patrimonio-selecionavel {
  display: block;
  position: relative;
  cursor: pointer;
  margin: 0;
  padding: 1rem;
  background: var(--glass-bg);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-soft);
  text-align: center;
  user-select: none;
}

.patrimonio-selecionavel:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.patrimonio-selecionavel input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.patrimonio-selecionavel.selected {
  border-color: var(--color-primary);
  background: rgba(24, 51, 143, 0.08);
}

.patrimonio-selecionavel.selected::after {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 6px;
  right: 8px;
  color: var(--color-primary);
  font-size: 0.9rem;
}

.patrimonio-selecionavel input[type="checkbox"]:disabled~.patrimonio-numero,
.patrimonio-selecionavel input[type="checkbox"]:disabled~.patrimonio-status {
  opacity: 0.4;
}

.patrimonio-selecionavel:has(input:disabled:not(:checked)) {
  opacity: 0.55;
  cursor: not-allowed;
}

.patrimonio-selecionavel .patrimonio-numero {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.patrimonio-selecionavel .patrimonio-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
}

/* =====================================================================
   Configurar Disparos WhatsApp (configurar_disparos_whatsapp2.php)
   Liquid Glass 2025 — sprint-11a do épico whatsapp-cascata-talk-blip
   ===================================================================== */

.wpp-cfg {
  font-family: 'Nunito Sans', sans-serif;
}

/* Help colapsável */
.wpp-cfg-help {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.1rem;
  box-shadow: var(--shadow-soft);
}

.wpp-cfg-help summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-primary);
  list-style: none;
  user-select: none;
}

.wpp-cfg-help summary::-webkit-details-marker {
  display: none;
}

.wpp-cfg-help summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 0.4rem;
  transition: transform var(--transition-fast);
}

.wpp-cfg-help[open] summary::before {
  transform: rotate(90deg);
}

.wpp-cfg-help-body {
  padding-top: 0.8rem;
}

.wpp-cfg-legenda {
  list-style: none;
  padding-left: 0;
}

.wpp-cfg-legenda li {
  padding: 0.2rem 0;
  font-size: 0.9rem;
}

/* Toolbar com select de unidade e stats */
.wpp-cfg-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.2rem;
  box-shadow: var(--shadow-soft);
  flex-wrap: wrap;
}

.wpp-cfg-toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex: 1;
  min-width: 280px;
}

.wpp-cfg-toolbar-label {
  margin-bottom: 0;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}

.wpp-cfg-toolbar-right {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

.wpp-cfg-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0.3rem 0.7rem;
  border-left: 2px solid var(--glass-border);
}

.wpp-cfg-stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.wpp-cfg-stat-value {
  font-weight: 600;
  font-size: 0.9rem;
}

/* Empty state */
.wpp-cfg-empty {
  background: var(--glass-bg);
  border: 1px dashed var(--glass-border);
  border-radius: var(--radius-md);
  padding: 3rem 1rem;
  text-align: center;
  color: var(--color-muted);
}

.wpp-cfg-empty-icon {
  font-size: 2.5rem;
  opacity: 0.4;
  display: block;
  margin-bottom: 0.7rem;
}

/* Categoria */
.wpp-cfg-categoria {
  margin-top: 1.5rem;
}

.wpp-cfg-categoria-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary);
  padding: 0.5rem 0.2rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--glass-border);
}

.wpp-cfg-categoria-header>.wpp-cfg-categoria-nome {
  flex: 1;
}

.wpp-cfg-categoria-count {
  background: var(--color-primary);
  color: #fff;
  font-size: 0.7rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-weight: 600;
  flex-shrink: 0;
  flex-grow: 0;
  align-self: center;
  min-width: 28px;
  text-align: center;
}

/* Grid de cards de evento */
.wpp-cfg-evento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 0.8rem;
}

/* Card de evento */
.wpp-cfg-evento {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 0.95rem 1.1rem;
  box-shadow: var(--shadow-soft);
  transition: all var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.wpp-cfg-evento:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.wpp-cfg-evento-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.6rem;
}

.wpp-cfg-evento-titulo {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  flex: 1;
}

.wpp-cfg-evento-icon {
  font-size: 1.3rem;
  width: 38px;
  height: 38px;
  background: rgba(24, 51, 143, 0.08);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wpp-cfg-evento-nome {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
}

.wpp-cfg-evento-quando {
  margin: 0.15rem 0 0 0;
  font-size: 0.75rem;
  color: var(--color-muted);
  line-height: 1.3;
}

.wpp-cfg-evento-acoes {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}

.wpp-cfg-acao-btn {
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-muted);
  transition: all var(--transition-fast);
}

.wpp-cfg-acao-btn:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.wpp-cfg-evento-body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--glass-border);
}

.wpp-cfg-prov,
.wpp-cfg-resumo {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.wpp-cfg-prov-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-muted);
  font-weight: 600;
}

.wpp-cfg-prov-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.wpp-cfg-prov-name {
  font-size: 0.78rem;
  background: rgba(0, 0, 0, 0.04);
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  word-break: break-all;
  line-height: 1.3;
}

.wpp-cfg-prov-missing {
  padding-top: 0.15rem;
}

.wpp-cfg-resumo-content {
  font-size: 0.85rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.wpp-cfg-resumo-ok {
  color: #22a06b;
  font-weight: 600;
}

.wpp-cfg-resumo-erro {
  color: #dc3545;
  font-weight: 600;
}

.wpp-cfg-resumo-total {
  font-size: 0.72rem;
  color: var(--color-muted);
  width: 100%;
}

.wpp-cfg-resumo-empty {
  font-size: 0.78rem;
  color: var(--color-muted);
  font-style: italic;
}

/* Badges de origem */
.wpp-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  line-height: 1.2;
}

.wpp-badge-override {
  background: rgba(34, 160, 107, 0.15);
  color: #186f4a;
  border: 1px solid rgba(34, 160, 107, 0.3);
}

.wpp-badge-default {
  background: rgba(24, 51, 143, 0.10);
  color: var(--color-primary);
  border: 1px solid rgba(24, 51, 143, 0.25);
}

.wpp-badge-codigo {
  background: rgba(108, 117, 125, 0.12);
  color: #495057;
  border: 1px solid rgba(108, 117, 125, 0.3);
}

.wpp-badge-gatilho {
  background: rgba(155, 89, 182, 0.13);
  color: #6c3483;
  border: 1px solid rgba(155, 89, 182, 0.3);
}

.wpp-badge-waba {
  background: rgba(243, 156, 18, 0.15);
  color: #a8730a;
  border: 1px solid rgba(243, 156, 18, 0.3);
}

.wpp-badge-missing {
  background: rgba(220, 53, 69, 0.13);
  color: #b21f2d;
  border: 1px solid rgba(220, 53, 69, 0.3);
}

/* Canal Geral (epico whatsapp-canal-geral) — badge usado em cards quando
   origem do template Talk vem de templates_talk WHERE admin AND unidade=0. */
.wpp-badge-geral {
  background: var(--color-primary);
  color: #fff;
  border: 1px solid var(--color-primary);
}

/* Modo Geral aplicado em #lista-eventos: oculta a coluna Blip dos cards
   (2a .wpp-cfg-prov dentro de cada .wpp-cfg-evento-body) e expande o
   restante pra ocupar o espaco. Canal Geral e Talk-only. */
.wpp-cfg-modo-geral .wpp-cfg-evento-body>.wpp-cfg-prov:nth-of-type(2) {
  display: none;
}

/* Modal de edição — providers lado a lado */
.wpp-cfg-edit-prov {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  height: 100%;
}

.wpp-cfg-edit-prov h6 {
  font-weight: 700;
  margin-bottom: 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--glass-border);
}

.wpp-cfg-edit-talk h6 {
  color: #22a06b;
}

.wpp-cfg-edit-blip h6 {
  color: var(--color-primary);
}

.wpp-cfg-meta {
  font-size: 0.85rem;
  color: var(--color-muted);
  background: rgba(0, 0, 0, 0.02);
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
}

.wpp-cfg-meta>div+div {
  margin-top: 0.3rem;
}

/* Tabela do histórico */
.wpp-cfg-tabela-hist code {
  font-size: 0.75rem;
  background: rgba(0, 0, 0, 0.04);
  padding: 0.1rem 0.3rem;
  border-radius: var(--radius-sm);
}

@media (max-width: 768px) {
  .wpp-cfg-evento-body {
    grid-template-columns: 1fr;
  }

  .wpp-cfg-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .wpp-cfg-toolbar-right {
    justify-content: flex-start;
  }
}

/* ====================================================================
 * Planejamento de RH — Histórico de Edições
 * ==================================================================== */
.pf-rh-historico-trigger {
  color: var(--color-primary, #18338f);
  opacity: 0.55;
  margin-left: 4px;
  transition: opacity var(--transition-fast, 0.15s), transform var(--transition-fast, 0.15s);
  text-decoration: none;
}

.pf-rh-historico-trigger:hover,
.pf-rh-historico-trigger:focus {
  opacity: 1;
  transform: scale(1.15);
  text-decoration: none;
  color: var(--color-primary, #18338f);
}

.pf-rh-historico-trigger i {
  font-size: 0.95em;
}

.pf-rh-historico {
  padding: 1rem 1.25rem 0.5rem 1.25rem;
}

.pf-rh-historico-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 1rem 0;
  border-bottom: 1px solid var(--glass-border, rgba(0, 0, 0, 0.1));
  margin-bottom: 1rem;
}

.pf-rh-historico-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.pf-rh-historico-timeline::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--glass-border, rgba(0, 0, 0, 0.08));
}

.pf-rh-historico-dia {
  margin: 1rem 0 0.5rem 0;
  position: relative;
  list-style: none;
}

.pf-rh-historico-dia span {
  display: inline-block;
  background: var(--color-primary, #18338f);
  color: white;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 2;
}

.pf-rh-historico-item {
  list-style: none;
  position: relative;
  padding: 0.5rem 0 0.5rem 38px;
  margin-bottom: 0.5rem;
}

.pf-rh-historico-item::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 14px;
  width: 12px;
  height: 12px;
  background: white;
  border: 2px solid var(--color-primary, #18338f);
  border-radius: 50%;
  z-index: 1;
}

.pf-rh-historico-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.pf-rh-historico-item-meta .ml-auto {
  margin-left: auto;
}

.pf-rh-historico-item-conteudo {
  font-size: 0.9rem;
  line-height: 1.4;
}

.pf-rh-historico-diff {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
  padding: 4px 8px;
  background: rgba(24, 51, 143, 0.04);
  border-radius: var(--radius-sm, 0.25rem);
  font-family: monospace;
  font-size: 0.85rem;
}

.pf-rh-historico-antes {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.08);
  padding: 1px 6px;
  border-radius: 3px;
}

.pf-rh-historico-depois {
  color: #28a745;
  background: rgba(40, 167, 69, 0.08);
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
}

.pf-rh-historico-item-autor {
  font-size: 0.78rem;
  color: var(--color-muted, #6c757d);
  margin-top: 4px;
}

/* ====================================================================
 * Planejamento de RH — Tabela com cabeçalho fixo (sticky thead)
 * ==================================================================== */
.pf-rh-tabela-wrap {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  overflow-x: auto;
}

.pf-rh-tabela-sticky thead {
  position: sticky;
  top: 0;
  z-index: 20;
}

.pf-rh-tabela-sticky thead th {
  background: rgba(245, 247, 252, 1) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  border-bottom: 2px solid rgba(24, 51, 143, 0.15);
}

.pf-rh-tabela-sticky tfoot {
  position: sticky;
  bottom: 0;
  z-index: 19;
}

.pf-rh-tabela-sticky tfoot td,
.pf-rh-tabela-sticky tfoot th {
  background: rgba(245, 247, 252, 1) !important;
  border-top: 2px solid rgba(24, 51, 143, 0.15);
}

/* 9-Box sidebar — Resumo por Pergunta (accordion) */
.ninebox-accordion .ninebox-acc-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.ninebox-accordion .ninebox-acc-item:last-child {
  border-bottom: 0;
}

.ninebox-accordion .ninebox-acc-header {
  color: inherit;
  text-decoration: none;
}

.ninebox-accordion .ninebox-acc-header:hover,
.ninebox-accordion .ninebox-acc-header:focus {
  text-decoration: none;
  background: rgba(0, 0, 0, 0.02);
}

.ninebox-accordion .ninebox-acc-header[aria-expanded="true"] .ninebox-acc-caret {
  transform: rotate(90deg);
}

.ninebox-accordion .ninebox-acc-caret {
  transition: transform .15s ease;
}

/* ===================================================================
   Onboarding Wizard (Fase 1) — sidebar guiado de configuração inicial
   =================================================================== */

.onboarding-wizard {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.onboarding-wizard-header {
  flex-shrink: 0;
  border-bottom: 1px solid var(--glass-border);
}

.onboarding-wizard-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--glass-border);
}

.onboarding-wizard-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 0.85rem;
  color: var(--color-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.onboarding-wizard-step:hover {
  background: rgba(24, 51, 143, 0.06);
  color: var(--color-primary);
}

.onboarding-wizard-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  font-weight: 600;
  font-size: 0.75rem;
}

.onboarding-wizard-step-concluido .onboarding-wizard-step-num {
  background: #28a745;
  color: #fff;
}

.onboarding-wizard-step-pulado .onboarding-wizard-step-num {
  background: #ffc107;
  color: #fff;
}

.onboarding-wizard-step-atual {
  background: rgba(24, 51, 143, 0.08);
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
}

.onboarding-wizard-step-atual .onboarding-wizard-step-num {
  background: var(--color-primary);
  color: #fff;
}

.onboarding-wizard-conteudo {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.onboarding-wizard-section h4 {
  font-weight: 600;
}

.onboarding-wizard-footer {
  flex-shrink: 0;
}

/* === Botão de tour no card_header (Fase 3 Onboarding) === */
.card-header-actions .card-tour-btn {
  color: var(--color-muted, #6c757d);
  padding: 0.25rem 0.5rem;
  font-size: 1.05rem;
  text-decoration: none;
  border: none;
  background: transparent;
  transition: all 0.15s ease;
}

.card-header-actions .card-tour-btn:hover {
  color: var(--color-primary, #18338f);
  transform: scale(1.15);
}

/* intro.js — ajustes leves pra combinar com Liquid Glass */
.introjs-tooltip {
  font-family: inherit;
  border-radius: 8px;
}

.introjs-button {
  border-radius: 6px;
  text-shadow: none;
  font-weight: 500;
}

.introjs-skipbutton {
  font-size: 1.2rem;
}

/* ===================================================================
   Popover de breakdown mensal — folha do Planejamento Financeiro.
   Renderizado por pf_rh_breakdown_mes_html() (PHP) e ativado em
   modulos/planejamento_financeiro/acao_abrir.php.
   Sem essas regras, o popover herda o max-width padrão do Bootstrap
   (276px) e as 3 colunas (label / Antes / Depois) colapsam em uma
   coluna empilhada, ficando ilegível.
   =================================================================== */
.popover.pf-popover-breakdown {
  max-width: 460px;
  min-width: 400px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.popover.pf-popover-breakdown .popover-body {
  padding: 10px 12px;
}

.popover.pf-popover-breakdown .pf-bd-mes {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ===================================================================
   Sidebar de Discussão do Planejamento Financeiro — layout WhatsApp
   ===================================================================
   Bolhas alinhadas (próprias à direita, demais à esquerda), avatares
   circulares, separador por dia, emoji picker + autocomplete de
   mentions (@unidade e #seção). Toda a UI vive dentro de
   `#pfDiscussaoSidebar .eformei-sidebar-content`.
   =================================================================== */
.pf-discussao-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  margin: -1.5rem;
  /* compensa padding default da sidebar-content */
}

.pf-discussao-thread {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 8px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
    repeating-linear-gradient(45deg, #e5e7eb 0 1px, transparent 1px 16px);
  background-color: #f4f5f7;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pf-msg-empty {
  text-align: center;
  color: #9ca3af;
  margin: auto 0;
  padding: 40px 0;
}

.pf-msg-day-sep {
  display: flex;
  justify-content: center;
  margin: 10px 0 6px;
}

.pf-msg-day-sep span {
  background: rgba(255, 255, 255, 0.85);
  color: #6b7280;
  font-size: 0.72rem;
  padding: 3px 12px;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.pf-msg-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 2px 0;
  max-width: 100%;
}

.pf-msg-row.pf-msg-mine {
  justify-content: flex-end;
}

.pf-msg-row.pf-msg-other {
  justify-content: flex-start;
}

.pf-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary, #18338f);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.pf-msg-bubble {
  position: relative;
  max-width: 78%;
  padding: 6px 10px 4px;
  border-radius: 8px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  word-wrap: break-word;
  font-size: 0.88rem;
}

.pf-msg-mine .pf-msg-bubble {
  background: #dcf8c6;
  /* verde WhatsApp */
  border-bottom-right-radius: 2px;
}

.pf-msg-other .pf-msg-bubble {
  background: #ffffff;
  border-bottom-left-radius: 2px;
}

.pf-msg-author {
  font-weight: 600;
  font-size: 0.78rem;
  /* color é definido inline pelo PHP — cor estável por autor (paleta WhatsApp-like) */
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.pf-msg-badge-socio,
.pf-msg-badge-admin {
  font-size: 0.62rem;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
}

.pf-msg-badge-socio {
  background: #dbeafe;
  color: #1e40af;
}

.pf-msg-badge-admin {
  background: #1f2937;
  color: white;
}

.pf-msg-text {
  white-space: pre-wrap;
  word-break: break-word;
  color: #111827;
  line-height: 1.35;
}

.pf-msg-anexo {
  margin-top: 4px;
}

.pf-msg-anexo-img img {
  max-width: 240px;
  max-height: 200px;
  border-radius: 6px;
  display: block;
}

.pf-msg-anexo-info {
  font-size: 0.75rem;
  margin-top: 2px;
}

.pf-msg-anexo-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  color: #111827;
  font-size: 0.8rem;
}

.pf-msg-anexo-file:hover {
  background: rgba(0, 0, 0, 0.08);
  text-decoration: none;
}

.pf-msg-anexo-file i {
  font-size: 1rem;
}

.pf-msg-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 2px;
  font-size: 0.68rem;
  color: #6b7280;
}

.pf-msg-mine .pf-msg-meta {
  color: #4b5563;
}

.pf-msg-excluir {
  color: #9ca3af;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.pf-msg-excluir:hover {
  color: #dc3545;
  opacity: 1;
}

.pf-mention {
  display: inline-block;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 0.85em;
  font-weight: 500;
}

.pf-mention-unit {
  background: #dbeafe;
  color: #1d4ed8;
}

.pf-mention-secao {
  background: #dcfce7;
  color: #15803d;
}

/* Form de envio fixo no rodapé da sidebar */
.pf-discussao-form {
  border-top: 1px solid #e5e7eb;
  padding: 8px 10px 10px;
  background: #f9fafb;
  flex-shrink: 0;
}

.pf-discussao-anexo-preview {
  background: rgba(24, 51, 143, 0.08);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
}

.pf-discussao-anexo-preview a {
  margin-left: auto;
  color: #6b7280;
}

.pf-discussao-anexo-preview a:hover {
  color: #dc3545;
}

.pf-discussao-input-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.pf-discussao-btn-tool {
  background: transparent;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  font-size: 1.1rem;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.pf-discussao-btn-tool:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-primary, #18338f);
}

.pf-discussao-textarea-wrap {
  flex: 1;
  position: relative;
  min-width: 0;
}

.pf-discussao-textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 18px;
  padding: 8px 14px;
  resize: none;
  font-size: 0.9rem;
  line-height: 1.4;
  background: #fff;
  outline: none;
  max-height: 120px;
  overflow-y: auto;
  font-family: inherit;
}

.pf-discussao-textarea:focus {
  border-color: var(--color-primary, #18338f);
}

.pf-discussao-btn-send {
  background: var(--color-primary, #18338f);
  color: white;
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pf-discussao-btn-send:hover {
  background: #0f1e5a;
}

.pf-discussao-btn-send:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.pf-discussao-hint {
  display: block;
  color: #9ca3af;
  font-size: 0.7rem;
  margin-top: 4px;
  text-align: center;
}

/* Emoji picker */
.pf-emoji-picker {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  max-width: 320px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
}

.pf-emoji-btn {
  background: transparent;
  border: none;
  font-size: 1.15rem;
  padding: 4px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s ease;
}

.pf-emoji-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}

/* Dropdown de mentions (@unidade / #seção) */
.pf-mention-dropdown {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  max-height: 220px;
  overflow-y: auto;
  z-index: 10;
}

.pf-mention-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.85rem;
  color: #111827;
  border-bottom: 1px solid #f3f4f6;
}

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

.pf-mention-item.active,
.pf-mention-item:hover {
  background: rgba(24, 51, 143, 0.08);
}

/* ===== Resumo de status na listagem de eventos (painel.php?page=eventos) ===== */
.eventos-resumo-status {
  margin-bottom: 1rem;
}

.eventos-resumo-status .card-body {
  padding: 0.85rem 1rem;
}

.eventos-resumo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.65rem;
}

.eventos-resumo-card {
  position: relative;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-md, 0.5rem);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: transform var(--transition-fast, 0.15s ease), box-shadow var(--transition-fast, 0.15s ease), border-color var(--transition-fast, 0.15s ease);
  user-select: none;
}

.eventos-resumo-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft, 0 2px 8px rgba(0, 0, 0, 0.08));
  border-color: rgba(0, 0, 0, 0.15);
}

.eventos-resumo-card--active {
  border-color: var(--color-primary, #18338f);
  box-shadow: 0 0 0 2px rgba(24, 51, 143, 0.15);
  background: rgba(24, 51, 143, 0.06);
}

.eventos-resumo-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-muted, #6c757d);
  font-weight: 600;
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eventos-resumo-valor {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.1;
  color: #111827;
}

.eventos-resumo-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-top-left-radius: var(--radius-md, 0.5rem);
  border-bottom-left-radius: var(--radius-md, 0.5rem);
  background: transparent;
}

.eventos-resumo-card--total::before {
  background: var(--color-primary, #18338f);
}

.eventos-resumo-card--solicitado::before {
  background: #ffc107;
}

.eventos-resumo-card--em-negociacao::before {
  background: #6f42c1;
}

.eventos-resumo-card--em-prospeccao::before {
  background: #17a2b8;
}

.eventos-resumo-card--confirmado::before {
  background: #28a745;
}

.eventos-resumo-card--em-andamento::before {
  background: var(--color-primary, #18338f);
}

.eventos-resumo-card--auditoria::before {
  background: #fd7e14;
}

.eventos-resumo-card--encerrado::before {
  background: #6c757d;
}

.eventos-resumo-card--reprovado::before {
  background: #dc3545;
}

.eventos-resumo-card--cancelado::before {
  background: #dc3545;
}

.eventos-resumo-card--sem-status::before {
  background: #adb5bd;
}

/* ============================================================
   Barra de ação em massa (checkbox-driven)
   Usada em produtos2.php (ativos + inativos) e replicável.
   ============================================================ */
.bulk-bar-produtos {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--color-primary, #18338f);
  color: #fff;
  border-radius: var(--radius-md, .5rem);
  box-shadow: var(--shadow-soft, 0 2px 8px rgba(0, 0, 0, .08));
  position: sticky;
  top: 0;
  z-index: 50;
}

.bulk-bar-produtos strong {
  font-size: 1.05rem;
}

.bulk-bar-produtos .btn {
  font-weight: 600;
}

/* ============================================================
   Central de Migração — wizard de mapeamento (sidebar)
   ============================================================ */

.migracao-resumo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0.9rem;
  background: rgba(24, 51, 143, 0.04);
  border: 1px solid rgba(24, 51, 143, 0.08);
  border-radius: var(--radius-md, 0.5rem);
  margin-bottom: 1rem;
}

.migracao-resumo-info {
  font-size: 0.85rem;
  color: var(--color-muted, #6c757d);
}

.migracao-resumo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.migracao-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
}

.migracao-chip i {
  font-size: 0.75rem;
}

.migracao-chip--ok {
  background: rgba(40, 167, 69, 0.12);
  color: #1e7e34;
}

.migracao-chip--sug {
  background: rgba(255, 193, 7, 0.18);
  color: #997404;
}

.migracao-chip--def {
  background: rgba(108, 117, 125, 0.15);
  color: #495057;
}

.migracao-map-lista {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.migracao-map-item {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-left-width: 3px;
  border-radius: var(--radius-md, 0.5rem);
  padding: 0.75rem 0.9rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.migracao-map-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.migracao-map-item--ok {
  border-left-color: #28a745;
}

.migracao-map-item--sug {
  border-left-color: #ffc107;
}

.migracao-map-item--def {
  border-left-color: #adb5bd;
}

.migracao-map-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.migracao-map-item__nome {
  font-weight: 600;
  font-size: 0.92rem;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  word-break: break-word;
  flex: 1;
  min-width: 0;
}

.migracao-map-item__nome i {
  font-size: 0.78rem;
  opacity: 0.85;
}

.migracao-map-item--ok .migracao-map-item__nome i {
  color: #28a745;
}

.migracao-map-item--sug .migracao-map-item__nome i {
  color: #d39e00;
}

.migracao-map-item--def .migracao-map-item__nome i {
  color: #6c757d;
}

.migracao-map-item__status {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0.75;
}

.migracao-map-item--ok .migracao-map-item__status {
  color: #1e7e34;
}

.migracao-map-item--sug .migracao-map-item__status {
  color: #997404;
}

.migracao-map-item--def .migracao-map-item__status {
  color: #495057;
}

.migracao-map-item__amostra {
  margin-top: 0.6rem;
  padding-top: 0.55rem;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
  font-size: 0.8rem;
  color: var(--color-muted, #6c757d);
  line-height: 1.5;
  word-break: break-word;
}

.migracao-map-item__amostra-label {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  margin-right: 0.35rem;
  opacity: 0.7;
}

.migracao-map-item__amostra-val {
  display: inline;
  padding: 0.1rem 0.3rem;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  color: #343a40;
}

.migracao-map-item__amostra-sep {
  margin: 0 0.3rem;
  opacity: 0.4;
}

/* ===========================================================
 * Pesquisas Externas — revitalização 2026
 * Sprint 0: classes utilitárias para substituir style="" inline.
 * Sprints 1-6: adicionam tipo-cards, fieldsets, builder, etc.
 * =========================================================== */
.pesq-cell-fixed-80 {
  width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pesq-cell-fixed-120 {
  width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pesq-img-preview {
  max-width: 35px;
}

.pesq-progress-cell {
  min-width: 120px;
  max-width: 200px;
}

/* --- Sprint 1: toolbar de filtros + chips de filtro ativo --- */
.pesq-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  background: var(--glass-bg, rgba(255, 255, 255, 0.9));
  border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.08));
  border-radius: var(--radius-md, 0.5rem);
}

.pesq-toolbar>.pesq-toolbar__field {
  flex: 1 1 180px;
  min-width: 0;
}

.pesq-toolbar>.pesq-toolbar__field--wide {
  flex: 2 1 280px;
}

.pesq-toolbar>.pesq-toolbar__actions {
  display: flex;
  gap: 0.4rem;
  align-items: stretch;
  margin-left: auto;
}

.pesq-toolbar .pesq-toolbar__extra {
  display: none;
  flex-basis: 100%;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pesq-toolbar.is-expanded .pesq-toolbar__extra {
  display: flex;
}

.pesq-toolbar.is-expanded .pesq-toolbar__extra>.pesq-toolbar__field {
  flex: 1 1 180px;
}

.pesq-toolbar__toggle-extra {
  white-space: nowrap;
}

.pesq-toolbar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
}

.pesq-toolbar__chips:empty {
  display: none;
}

.pesq-toolbar__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.4rem 0.25rem 0.65rem;
  font-size: 0.78rem;
  background: rgba(24, 51, 143, 0.08);
  color: var(--color-primary, #18338f);
  border-radius: 999px;
  border: 1px solid rgba(24, 51, 143, 0.18);
  line-height: 1.2;
}

.pesq-toolbar__chip strong {
  font-weight: 600;
  opacity: 0.75;
  text-transform: uppercase;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
}

.pesq-toolbar__chip-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  padding: 0;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--transition-fast, 0.15s ease), background var(--transition-fast, 0.15s ease);
}

.pesq-toolbar__chip-close:hover {
  background: rgba(220, 53, 69, 0.12);
  color: #dc3545;
  opacity: 1;
}

.pesq-toolbar__chip-close i {
  font-size: 0.7rem;
}

/* Label visível acima de cada filtro — fica legível mesmo quando o
   controle abaixo está bloqueado (não herda opacidade). Permite
   identificar o filtro sem precisar abrir o select. */
.pesq-toolbar__field-label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted, #6c757d);
  margin: 0 0 0.2rem 0.1rem;
  line-height: 1;
}

.pesq-toolbar__field-label i {
  font-size: 0.75rem;
  opacity: 0.7;
}

/* Campo de filtro bloqueado pelo tipo atual: o label fica legível,
   só o controle (input/select) ganha cinza e cursor not-allowed
   pra sinalizar que não tá disponível. O motivo aparece via tooltip
   nativo (atributo title) e em hint contextual abaixo da toolbar. */
.pesq-toolbar__field--bloqueado .form-control,
.pesq-toolbar__field--bloqueado .bootstrap-select>.btn {
  cursor: not-allowed;
  background-color: rgba(0, 0, 0, 0.03);
  opacity: 0.55;
}

.pesq-toolbar__field--bloqueado .bootstrap-select {
  pointer-events: none;
}

.pesq-toolbar__field--bloqueado .pesq-toolbar__field-label {
  opacity: 0.7;
}

/* Hint contextual abaixo da toolbar — explica por que alguns filtros
   estão bloqueados. */
.pesq-toolbar__hint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: -0.5rem 0 0.75rem;
  padding: 0.4rem 0.65rem;
  font-size: 0.78rem;
  color: var(--color-muted, #6c757d);
  background: rgba(24, 51, 143, 0.04);
  border-left: 3px solid rgba(24, 51, 143, 0.3);
  border-radius: 0 var(--radius-sm, 0.25rem) var(--radius-sm, 0.25rem) 0;
}

.pesq-toolbar__hint i {
  flex-shrink: 0;
}

/* Wrapper da tabela — overflow horizontal próprio, sem reusar
   .datatablePlanilhaVida (que força sticky em 3 colunas e ia quebrar). */
.pesq-listagem-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- Sprint 2: seletor de tipo em cards visuais --- */
.pesq-tipo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.65rem;
  margin: 0.2rem 0 0.5rem;
}

.pesq-tipo-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.85rem 0.9rem;
  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-md, 0.5rem);
  cursor: pointer;
  transition: all var(--transition-smooth, 0.2s ease);
  text-align: left;
  position: relative;
  margin: 0;
}

.pesq-tipo-card:hover:not(.is-disabled) {
  border-color: rgba(24, 51, 143, 0.4);
  background: rgba(24, 51, 143, 0.02);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(24, 51, 143, 0.08);
}

.pesq-tipo-card:focus-within {
  outline: 2px solid var(--color-primary, #18338f);
  outline-offset: 2px;
}

.pesq-tipo-card.is-selected {
  border-color: var(--color-primary, #18338f);
  background: rgba(24, 51, 143, 0.06);
}

.pesq-tipo-card.is-selected .pesq-tipo-card__icon {
  color: var(--color-primary, #18338f);
}

.pesq-tipo-card.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(0, 0, 0, 0.02);
}

.pesq-tipo-card.is-disabled:hover {
  transform: none;
  box-shadow: none;
}

.pesq-tipo-card>input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.pesq-tipo-card__icon {
  font-size: 1.3rem;
  color: var(--color-muted, #6c757d);
  transition: color var(--transition-fast, 0.15s ease);
}

.pesq-tipo-card__title {
  font-weight: 600;
  font-size: 0.95rem;
  color: #212529;
}

.pesq-tipo-card__desc {
  font-size: 0.78rem;
  color: var(--color-muted, #6c757d);
  line-height: 1.3;
}

.pesq-tipo-card__check {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  color: var(--color-primary, #18338f);
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity var(--transition-fast, 0.15s ease);
}

.pesq-tipo-card.is-selected .pesq-tipo-card__check {
  opacity: 1;
}

/* Microvalidação inline — texto de feedback abaixo de inputs. */
.pesq-field-feedback {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--color-muted, #6c757d);
  min-height: 1rem;
  transition: color var(--transition-fast, 0.15s ease);
}

.pesq-field-feedback.is-error {
  color: #dc3545;
}

.pesq-field-feedback.is-ok {
  color: #28a745;
}

/* --- Sprint 2.5: Listagem rich row --- */
/* Linha = card horizontal com hierarquia visual.
   1ª coluna concentra "quem é" (título grande + meta), demais ficam enxutas. */
.pesq-tabela {
  width: 100%;
}

.pesq-tabela thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--color-muted, #6c757d);
  border-top: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 0.6rem 0.85rem;
}

.pesq-tabela tbody td {
  padding: 0.85rem;
  vertical-align: middle;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.pesq-tabela tbody tr {
  transition: background var(--transition-fast, 0.15s ease);
}

.pesq-tabela tbody tr:hover {
  background: rgba(24, 51, 143, 0.025);
}

.pesq-tabela tbody tr.is-inativa {
  background: rgba(0, 0, 0, 0.02);
}

.pesq-tabela tbody tr.is-inativa .pesq-tabela__nome {
  font-style: italic;
  color: var(--color-muted, #6c757d);
}

/* Coluna 1 — Pesquisa (rich) */
.pesq-tabela__col-pesquisa {
  min-width: 280px;
  width: 40%;
}

.pesq-tabela__nome {
  font-size: 0.98rem;
  font-weight: 600;
  color: #212529;
  line-height: 1.3;
  margin-bottom: 0.25rem;
}

.pesq-tabela__nome a {
  color: inherit;
}

.pesq-tabela__nome .pesq-tabela__nome-link {
  margin-left: 0.4rem;
  opacity: 0.5;
  font-size: 0.78rem;
}

.pesq-tabela__nome .pesq-tabela__nome-link:hover {
  opacity: 1;
}

.pesq-tabela__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
  font-size: 0.78rem;
  color: var(--color-muted, #6c757d);
  line-height: 1.4;
}

.pesq-tabela__meta-sep {
  opacity: 0.4;
}

.pesq-tabela__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  background: rgba(0, 0, 0, 0.04);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  color: #495057;
}

.pesq-tabela__evento {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.74rem;
  color: var(--color-muted, #6c757d);
}

.pesq-tabela__evento i {
  margin-right: 0.25rem;
  opacity: 0.7;
}

/* Tipo badges (consistente com Sprint 2 — cards de tipo) */
.pesq-tipo-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.pesq-tipo-badge i {
  font-size: 0.72rem;
}

.pesq-tipo-badge--interna {
  background: rgba(24, 51, 143, 0.12);
  color: var(--color-primary, #18338f);
}

.pesq-tipo-badge--turma {
  background: rgba(108, 117, 125, 0.15);
  color: #495057;
}

.pesq-tipo-badge--cliente {
  background: rgba(40, 167, 69, 0.12);
  color: #1e7e34;
}

.pesq-tipo-badge--fornecedor {
  background: rgba(23, 162, 184, 0.12);
  color: #0c7081;
}

.pesq-tipo-badge--inativa {
  background: rgba(220, 53, 69, 0.10);
  color: #dc3545;
}

/* Coluna 2 — Progresso */
.pesq-tabela__col-progresso {
  width: 20%;
  min-width: 140px;
}

.pesq-tabela__progresso {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.pesq-tabela__progresso-bar {
  height: 6px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 999px;
  overflow: hidden;
}

.pesq-tabela__progresso-fill {
  height: 100%;
  border-radius: 999px;
  transition: width var(--transition-smooth, 0.2s ease);
}

.pesq-tabela__progresso-fill--alto {
  background: #28a745;
}

.pesq-tabela__progresso-fill--medio {
  background: #ffc107;
}

.pesq-tabela__progresso-fill--baixo {
  background: #6c757d;
}

.pesq-tabela__progresso-fill--vazio {
  background: #dc3545;
}

.pesq-tabela__progresso-texto {
  font-size: 0.78rem;
  color: var(--color-muted, #6c757d);
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.pesq-tabela__progresso-texto strong {
  color: #212529;
  font-weight: 600;
}

.pesq-tabela__progresso-texto a {
  font-size: 0.7rem;
  opacity: 0.6;
}

.pesq-tabela__progresso-texto a:hover {
  opacity: 1;
}

.pesq-tabela__progresso--vazio {
  font-size: 0.78rem;
  color: var(--color-muted, #6c757d);
  font-style: italic;
}

/* Coluna 3 — Período */
.pesq-tabela__col-periodo {
  width: 15%;
  min-width: 130px;
}

.pesq-tabela__periodo {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.78rem;
  background: rgba(0, 0, 0, 0.035);
  border-radius: 4px;
  white-space: nowrap;
  color: #495057;
}

.pesq-tabela__periodo i {
  opacity: 0.55;
  font-size: 0.7rem;
}

.pesq-tabela__periodo--encerrada {
  background: rgba(220, 53, 69, 0.08);
  color: #dc3545;
}

.pesq-tabela__periodo--agendada {
  background: rgba(24, 51, 143, 0.08);
  color: var(--color-primary, #18338f);
}

/* Coluna 4 — Ações */
.pesq-tabela__col-acoes {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.pesq-tabela__acoes {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Responsividade — em telas < 768px a tabela vira lista vertical. */
@media (max-width: 767px) {
  .pesq-tabela thead {
    display: none;
  }

  .pesq-tabela tbody td {
    display: block;
    width: 100%;
    border-top: none;
    padding: 0.3rem 0.85rem;
  }

  .pesq-tabela tbody td:first-child {
    padding-top: 0.85rem;
  }

  .pesq-tabela tbody td:last-child {
    padding-bottom: 0.85rem;
    text-align: left;
  }

  .pesq-tabela tbody tr {
    display: block;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }
}

/* --- Sprint 3: Builder de perguntas em cards --- */
/* Cada pergunta = card com borda lateral colorida indicando tipo. */
.pesq-perguntas-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pesq-pergunta-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-left: 4px solid var(--color-muted, #6c757d);
  border-radius: var(--radius-md, 0.5rem);
  padding: 0.9rem 1rem;
  transition: box-shadow var(--transition-fast, 0.15s ease);
}

.pesq-pergunta-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.pesq-pergunta-card--texto {
  border-left-color: var(--color-primary, #18338f);
}

.pesq-pergunta-card--multipla {
  border-left-color: #6f42c1;
}

.pesq-pergunta-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.pesq-pergunta-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.05);
  color: #495057;
  border-radius: 999px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.pesq-pergunta-card__tipo {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-muted, #6c757d);
}

.pesq-pergunta-card--texto .pesq-pergunta-card__tipo {
  color: var(--color-primary, #18338f);
}

.pesq-pergunta-card--multipla .pesq-pergunta-card__tipo {
  color: #6f42c1;
}

.pesq-pergunta-card__tipo i {
  font-size: 0.85rem;
}

.pesq-pergunta-card__actions {
  margin-left: auto;
  display: inline-flex;
  gap: 0.3rem;
}

.pesq-pergunta-card__body {
  display: grid;
  grid-template-columns: 1fr 90px 90px;
  gap: 0.5rem;
  align-items: end;
}

.pesq-pergunta-card__body--multipla {
  grid-template-columns: 1fr 130px 90px 90px;
}

.pesq-pergunta-card__body label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--color-muted, #6c757d);
  margin-bottom: 0.2rem;
}

.pesq-pergunta-card__opcoes-resumo {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.pesq-pergunta-card__opcoes-resumo-titulo {
  font-size: 0.78rem;
  color: var(--color-muted, #6c757d);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.pesq-pergunta-card__opcoes-resumo-titulo strong {
  color: #212529;
  font-weight: 600;
}

.pesq-pergunta-card__opcoes-resumo-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  font-size: 0.78rem;
}

.pesq-pergunta-card__opcoes-resumo-chip {
  background: rgba(111, 66, 193, 0.08);
  color: #6f42c1;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(111, 66, 193, 0.15);
}

.pesq-pergunta-empty {
  text-align: center;
  padding: 2rem 1rem;
  border: 2px dashed rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-md, 0.5rem);
  color: var(--color-muted, #6c757d);
}

.pesq-pergunta-empty i {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 0.5rem;
  opacity: 0.4;
}

.pesq-perguntas-toolbar {
  display: flex;
  gap: 0.4rem;
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

/* Modal de opções de múltipla escolha */
.pesq-opcoes-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pesq-opcao-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pesq-opcao-item__handle {
  color: var(--color-muted, #6c757d);
  cursor: grab;
  padding: 0.25rem;
  opacity: 0.4;
}

.pesq-opcao-item__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
  font-weight: 600;
  font-size: 0.78rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.pesq-opcao-item__input {
  flex: 1;
}

.pesq-opcao-item__remover {
  flex-shrink: 0;
}

.pesq-opcoes-form-add {
  margin-top: 0.5rem;
}

@media (max-width: 768px) {
  .pesq-toolbar {
    flex-direction: column;
  }

  .pesq-toolbar>.pesq-toolbar__field,
  .pesq-toolbar>.pesq-toolbar__actions {
    flex-basis: 100%;
  }

  .pesq-toolbar>.pesq-toolbar__actions {
    margin-left: 0;
  }
}

/* --- Sprint 6: polimentos finais de mobile --- */
/* Cards do builder de perguntas: em mobile, grid 3/4 colunas vira coluna única */
@media (max-width: 576px) {

  .pesq-pergunta-card__body,
  .pesq-pergunta-card__body--multipla {
    grid-template-columns: 1fr;
  }

  .pesq-pergunta-card__header {
    flex-wrap: wrap;
  }

  .pesq-pergunta-card__actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
    padding-top: 0.3rem;
    border-top: 1px dashed rgba(0, 0, 0, 0.06);
  }

  .pesq-perguntas-toolbar {
    flex-direction: column;
  }

  .pesq-perguntas-toolbar .btn {
    width: 100%;
  }
}

/* Cards de tipo (form): forçar 1 coluna em telas muito pequenas */
@media (max-width: 480px) {
  .pesq-tipo-grid {
    grid-template-columns: 1fr;
  }
}

/* Sidebar de votantes em mobile: a tabela DataTable padrão tem 7 colunas
   e estoura em telas < ~700px. Wrapper com overflow-x mantém usabilidade. */
.pesq-votantes-sidebar-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pesq-votantes-sidebar-wrapper table {
  min-width: 760px;
}

/* Chips de filtro ativo em mobile: empilham com gap menor */
@media (max-width: 576px) {
  .pesq-toolbar__chips {
    gap: 0.3rem;
  }

  .pesq-toolbar__chip {
    font-size: 0.72rem;
  }
}

/* ============================================================
   Busca rápida — highlight do termo e histórico (localStorage)
   ============================================================ */
.search-hl {
  background: rgba(255, 229, 100, 0.55);
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 600;
  color: inherit;
}

.search-history {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--glass-border, rgba(0, 0, 0, 0.08));
  text-align: left;
}

.search-history-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted, #6c757d);
  margin-bottom: 0.4rem;
  padding: 0 0.25rem;
}

.search-history-clear {
  background: transparent;
  border: none;
  color: var(--color-muted, #6c757d);
  cursor: pointer;
  font-size: 0.72rem;
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
}

.search-history-clear:hover {
  color: #dc3545;
  text-decoration: underline;
}

.search-history-item {
  display: flex;
  align-items: center;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm, 0.25rem);
  cursor: pointer;
  transition: background var(--transition-fast, 0.15s ease);
  font-size: 0.875rem;
  color: var(--color-text, #212529);
}

.search-history-item:hover {
  background: rgba(24, 51, 143, 0.08);
}

.search-history-item i {
  color: var(--color-muted, #6c757d);
  margin-right: 0.5rem;
  font-size: 0.75rem;
}

/* ===== Cards de cobranças Pagar.me (modal histórico de pagamentos) ===== */
.cobrancas-stack .cobranca-card {
  transition: border-color .15s;
}

.cobrancas-stack .cobranca-header {
  cursor: pointer;
  background: rgba(0, 0, 0, .02);
  transition: background .15s;
  user-select: none;
}

.cobrancas-stack .cobranca-header:hover {
  background: rgba(0, 0, 0, .04);
}

.cobrancas-stack .cobranca-chev {
  transition: transform .2s ease;
  color: var(--color-muted, #6c757d);
  width: 12px;
  flex-shrink: 0;
}

.cobrancas-stack .cobranca-header[aria-expanded="true"] .cobranca-chev {
  transform: rotate(90deg);
}

.cobrancas-stack .cobranca-valor {
  font-size: 1.05rem;
}

.cobrancas-stack .cobranca-dl dt {
  font-weight: 500;
  color: var(--color-muted, #6c757d);
}

.cobrancas-stack .cobranca-dl dd {
  margin-bottom: .35rem;
}

.cobrancas-stack .estornos-detalhe .table td,
.cobrancas-stack .estornos-detalhe .table th {
  vertical-align: middle;
}

/* ===== Kanban da Equipe (carga × capacidade) — kanban_equipe2.php ===== */
.ke-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; }
.ke-col {
  flex: 0 0 280px;
  min-width: 280px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: var(--radius-md);
  padding: 8px;
  min-height: 400px;
  display: flex;
  flex-direction: column;
}
.ke-col-livre { background: rgba(24, 51, 143, 0.06); }
.ke-col-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px;
  font-weight: 600;
}
.ke-col-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ke-carga {
  cursor: pointer;
  padding: 4px;
  margin-bottom: 8px;
  border-radius: var(--radius-sm);
}
.ke-carga:hover { background: rgba(0, 0, 0, 0.04); }
.ke-carga-barra {
  height: 8px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
}
.ke-carga-fill { height: 100%; border-radius: 4px; transition: width var(--transition-smooth); }
.ke-carga-txt { font-size: 11px; margin-top: 2px; color: var(--color-muted); text-align: right; }
.ke-carga-verde .ke-carga-fill { background: #28a745; }
.ke-carga-amarelo .ke-carga-fill { background: #ffc107; }
.ke-carga-vermelho .ke-carga-fill { background: #dc3545; }
.ke-carga-vermelho .ke-carga-txt { color: #dc3545; font-weight: 600; }
.ke-col-body { flex: 1; min-height: 200px; }
.ke-card {
  background: var(--glass-bg);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-soft);
  cursor: grab;
  border-left: 3px solid var(--color-primary);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.ke-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); }
.ke-card.ke-dragging { opacity: 0.5; cursor: grabbing; }
.ke-card-titulo { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.ke-card-meta { font-size: 11px; color: var(--color-muted); }
.ke-card-tags { margin-top: 6px; display: flex; gap: 4px; flex-wrap: wrap; }
.ke-col-drop { background: rgba(24, 51, 143, 0.08); }
.ke-col-vazia { font-size: 12px; color: var(--color-muted); text-align: center; padding: 16px 4px; }
.ke-vazio { padding: 24px; color: var(--color-muted); }
/* Badges do card com cor própria (o tema deixa badge-secondary/light apagados) */
.ke-card-tags .badge { color: #fff; }
.ke-badge-st-1 { background: #6c7a91; }   /* Aberto */
.ke-badge-st-8 { background: #0d6efd; }   /* Em andamento */
.ke-badge-st-12 { background: #fd7e14; }  /* Aguardando validação */
.ke-badge-st-13 { background: #dc3545; }  /* Refação */
.ke-badge-st { background: #6c7a91; }     /* fallback p/ status não mapeado */
.ke-badge-pts { background: #6f42c1; }    /* complexidade (pontos) */
.ke-empty-times { padding: 40px 24px; text-align: center; color: var(--color-muted); }
.ke-empty-times i { font-size: 2.5rem; margin-bottom: 12px; display: block; }
/* Badges de status de prestação de contas de cartão (cartoes_transacao2.php) */
.badge-prestacao { color: #fff; }
.badge-prestacao-pendente { background: #6c757d; color: #fff; }
.badge-prestacao-cobrado_1 { background: #fd7e14; color: #fff; }
.badge-prestacao-cobrado_2_bloqueado { background: #dc3545; color: #fff; }
.badge-prestacao-prestado { background: #6f42c1; color: #fff; }
.badge-prestacao-em_aprovacao { background: #0dcaf0; color: #fff; }
.badge-prestacao-aprovado { background: #198754; color: #fff; }
.badge-prestacao-reprovado { background: #dc3545; color: #fff; }

/* Folha de pagamento — edição inline da data de pagamento (header) */
.folha-data-pagamento-editavel {
    cursor: pointer;
    padding: 1px 4px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
    display: inline-block;
}
.folha-data-pagamento-editavel:hover {
    background: rgba(24, 51, 143, 0.08);
}
.folha-data-pagamento-editavel .fa-edit {
    font-size: 0.75em;
    opacity: 0.6;
}
.folha-data-pagamento-editavel:hover .fa-edit {
    opacity: 1;
}
.folha-data-pagamento-editando {
    cursor: default;
}
.folha-data-pagamento-editando:hover {
    background: transparent;
}
.folha-data-pagamento-form {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
}
.folha-data-pagamento-input {
    display: inline-block;
    width: auto;
    height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Folha de pagamento — sticky thead via JS clone.
   Abordagem position:sticky pura quebra dentro de .table-responsive (overflow-x:auto
   faz overflow-y virar auto implicitamente, criando scrolling ancestor que tira
   o sticky da viewport). O JS em folha_pagamento2.php clona o <thead> e posiciona
   o clone como position:fixed top:70px quando o thead original sai da viewport.
   Estas classes estilizam o clone. */
#folhaStickyHeader {
    position: fixed;
    top: 70px;
    z-index: 1020;
    overflow: hidden;
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    display: none;
    pointer-events: none;
}
#folhaStickyHeader table {
    margin: 0;
    background: #f8f9fa;
    table-layout: fixed;
}
#folhaStickyHeader thead th {
    background-color: #f8f9fa;
    white-space: nowrap;
}

/* Cards de totalizadores (Total Líquido / Total de Guias) com tooltip ao hover */
.folha-totalizador-card {
    cursor: help;
}
/* Tooltip da folha pode ser largo (breakdown com várias linhas) — força largura maior */
.tooltip.folha-tooltip-largo .tooltip-inner {
    max-width: 380px;
    text-align: left;
}