/* ==========================================================================
   Gestão CJM · camada visual "Institucional moderno" sobre o Dashmix (xmodern)
   Carregado depois do tema. Só refina aparência: não muda estrutura, ordem
   de informações nem comportamento de botões.

   Índice
   1. Tokens            5. Componentes (cards, KPI, chips, alertas, botões,
   2. Base                 formulários, tabelas, DataTables, filtros, listas)
   3. Moldura          6. Lançamento
      (sidebar, marca,  7. Relatórios (cartão móvel)
      header, faixa,    8. Acesso e agenda pública
      rodapé, barra     9. Impressão e movimento reduzido
      inferior, loader)
   Regra de especificidade: o que disputa com o Dashmix/xmodern usa o prefixo
   "#page-container" (na sidebar, "#page-container #sidebar").
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --brand-50: #f2f5fb; --brand-100: #e4e9f4; --brand-200: #c8d3ea; --brand-300: #9db4ea;
  --brand-400: #7d98d6; --brand-500: #5873b0; --brand-600: #45619d; --brand-700: #3e578d;
  --brand-800: #334a7a; --brand-900: #1f2d4f; --brand-950: #1a2645;

  /* moldura */
  --chrome-sidebar: #1f2d4f; --chrome-sidebar-brand: #1a2645; --chrome-header: #3e578d; --chrome-band-end: #364e84;
  --chrome-text: rgba(255, 255, 255, .82); --chrome-text-sub: rgba(255, 255, 255, .72); --chrome-muted: rgba(255, 255, 255, .58);
  --chrome-hover: rgba(255, 255, 255, .06); --chrome-active: rgba(143, 169, 224, .18); --chrome-rail: rgba(255, 255, 255, .14);
  --chrome-accent: #8fa9e0; --chrome-btn: rgba(255, 255, 255, .12); --chrome-btn-hover: rgba(255, 255, 255, .20);

  /* ação */
  --ui-primary: #45619d; --ui-primary-hover: #3e578d; --ui-primary-active: #36508a; --ui-primary-strong: #3e578d;
  --ui-primary-text: #3e578d; --ui-primary-soft: rgba(69, 97, 157, .10); --ui-primary-soft-2: rgba(69, 97, 157, .18);
  --ui-primary-border: rgba(69, 97, 157, .32); --ui-on-primary: #fff;

  /* superfícies e texto */
  --ui-bg: #eef2f8; --ui-surface: #fff; --ui-surface-muted: #f6f8fc; --ui-surface-sunken: #eef1f6;
  --ui-border: #e2e7f0; --ui-border-strong: #c9d1df;
  --ui-text: #1b2433; --ui-text-muted: #4f5a6b; --ui-text-subtle: #6b7280; --ui-text-faint: #9aa3b2;
  --ui-table-stripe: rgba(16, 24, 40, .022);

  /* estados: um verde, um âmbar, um vermelho, um info */
  --ui-success: #15803d; --ui-success-soft: #e3f6e9; --ui-success-text: #166534; --ui-success-border: #b7e4c4; --ui-success-solid: #15803d;
  --ui-warning: #b45309; --ui-warning-soft: #fdf3d8; --ui-warning-text: #8a3c0b; --ui-warning-border: #f3d58e; --ui-warning-solid: #b45309;
  --ui-danger: #dc2626; --ui-danger-strong: #b91c1c; --ui-danger-soft: #fde8e8; --ui-danger-text: #991b1b; --ui-danger-border: #f6c0c0; --ui-danger-solid: #dc2626;
  --ui-info: #0e7490; --ui-info-soft: #e3f2fb; --ui-info-text: #075985; --ui-info-border: #b9dcf2; --ui-info-solid: #0e7490;
  --ui-neutral-soft: #eef1f6;

  /* grupos: espelho exato de CJMCharts.groupColors() */
  --grp-young-women: #e87ba4; --grp-young-men: #2a78d6; --grp-girls: #eb6834; --grp-boys: #1baf7a; --grp-children: #eda100; --grp-aux: #008300;

  /* forma e elevação */
  --ui-radius-lg: 16px; --ui-radius: 12px; --ui-radius-sm: 8px; --ui-radius-xs: 6px; --ui-radius-pill: 999px;
  --ui-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --ui-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 8px rgba(16, 24, 40, .05);
  --ui-shadow-md: 0 4px 12px -2px rgba(16, 24, 40, .10);
  --ui-shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);
  --ui-focus: 0 0 0 3px rgba(69, 97, 157, .35); --ui-focus-on-dark: 0 0 0 2px #8fa9e0;

  /* tipografia e espaço */
  --ui-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fs-2xs: .6875rem; --fs-xs: .75rem; --fs-sm: .8125rem; --fs-base: .875rem; --fs-md: .9375rem; --fs-lg: 1.125rem; --fs-h1: 1.5rem; --fs-kpi: 1.75rem;
  --ls-tight: -.02em; --ls-eyebrow: .08em;
  --ui-card-pad: 1.25rem; --ui-control-h: 40px; --hdr-h: 4.25rem;
  --ui-ease: cubic-bezier(.2, .6, .2, 1); --ui-dur: 150ms;

  /* geometria da sidebar (o submenu deriva tudo daqui) */
  --sb-px: .625rem; --sb-icon: 1.25rem; --sb-gap: .625rem;
  --sb-rail: calc(var(--sb-px) + var(--sb-icon) / 2);
  --sb-label: calc(var(--sb-px) + var(--sb-icon) + var(--sb-gap));

  /* setas de select e lupa (cinza do texto suave) */
  --ui-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  --ui-search-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='7' cy='7' r='5' fill='none' stroke='%236b7280' stroke-width='1.6'/%3e%3cpath d='M11 11l3.5 3.5' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round'/%3e%3c/svg%3e");
}
@media (max-width: 991.98px) { :root { --sb-px: .875rem; --sb-icon: 1.5rem; } }
@media (max-width: 767.98px) { :root { --fs-h1: 1.25rem; --fs-kpi: 1.5rem; --ui-card-pad: 1rem; --ui-control-h: 44px; } }


/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
/* sempre claro: o sistema não tem modo escuro e pede ao navegador que não escureça a página sozinho */
html { -webkit-text-size-adjust: 100%; color-scheme: only light; }
body, #page-container { font-family: var(--ui-font); }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body, #main-container { background-color: var(--ui-bg); }
.min-w-0 { min-width: 0; }

.ui-num, .ui-kpi-value, .ui-trend-values, .table td, .table th, #launchSubtotal, .launch-qty-input,
.pct-badge, .ui-chip, .mob-card-total, .detail-value, .kpi-value, .nav-badge {
  font-variant-numeric: tabular-nums;
}

/* foco visível */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 0; box-shadow: var(--ui-focus); }
#sidebar a:focus-visible, #sidebar button:focus-visible,
#page-header a:focus-visible, #page-header button:focus-visible,
#main-container > .bg-body-light a:focus-visible, #main-container > .bg-body-light button:focus-visible,
.cjm-bottom-nav a:focus-visible { box-shadow: var(--ui-focus-on-dark); }

/* links simples */
#page-container #main-container a:not([class]):hover { text-decoration: underline; }
/* tabela rolável é a referência dos filhos absolutos (ex.: .visually-hidden), que assim não alargam a página no celular */
.table-responsive { position: relative; }

#sidebar { transition: transform .25s ease; }
.js-sidebar-scroll { -webkit-overflow-scrolling: touch; }

@media (max-width: 767.98px) {
  #page-container .content { padding-left: 1rem; padding-right: 1rem; }
  .block-content { padding: 1rem; }
  .form-control, .form-select { font-size: 16px !important; min-height: 44px; }
  .btn { min-height: 44px; }
  .btn-sm { min-height: 36px; }
  #page-header .content-header .btn { min-width: 44px; min-height: 44px; }
  #main-container nav[aria-label="breadcrumb"] { display: none !important; }
  .table-responsive { -webkit-overflow-scrolling: touch; }
}
@media (max-width: 575.98px) {
  .dropdown-menu { min-width: 200px; }
}

/* --------------------------------------------------------------------------
   3. Moldura
   -------------------------------------------------------------------------- */

/* 3.1 Sidebar: superfície, títulos e itens */
#page-container.sidebar-dark #sidebar,
#page-container #sidebar { background-color: var(--chrome-sidebar); color: var(--chrome-text); }
#page-container #sidebar .content-side { padding: .75rem .75rem 1.5rem; }
#page-container #sidebar .nav-main-heading {
  padding: 1.25rem var(--sb-px) .375rem;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--chrome-muted);
  opacity: 1;
}
#page-container #sidebar .nav-main > .nav-main-heading:first-child { padding-top: .5rem; }
#page-container #sidebar .nav-main-link {
  position: relative;
  display: flex;
  align-items: center;
  margin: 1px 0;
  padding: .5rem var(--sb-px);
  min-height: 2.375rem;
  border-radius: var(--ui-radius-sm);
  font-size: var(--fs-base);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--chrome-text);
  background-color: transparent;
  box-shadow: none;
  transition: background-color var(--ui-dur) var(--ui-ease), color var(--ui-dur) var(--ui-ease);
}
#page-container #sidebar .nav-main-link .nav-main-link-icon {
  min-width: var(--sb-icon);
  width: var(--sb-icon);
  margin-right: var(--sb-gap);
  font-size: .95rem;
  text-align: center;
  color: var(--chrome-muted);
  transition: color var(--ui-dur) var(--ui-ease);
}
#page-container #sidebar .nav-main-link:hover {
  background-color: var(--chrome-hover);
  color: #fff;
}
#page-container #sidebar .nav-main-link:hover .nav-main-link-icon { color: rgba(255, 255, 255, .8); }

/* item ativo (folha, em qualquer nível) */
#page-container #sidebar .nav-main-link.active,
#page-container #sidebar .nav-main-link.active:hover {
  background-color: var(--chrome-active);
  color: #fff;
  font-weight: 600;
}
#page-container #sidebar .nav-main-link.active .nav-main-link-icon { color: var(--chrome-accent); }
/* marcador do 1º nível: barra reta */
#page-container #sidebar .nav-main-link:not(.nav-main-link-submenu).active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--chrome-accent);
}

/* pai de submenu: sem "buraco" escuro quando aberto, chevron único que gira */
#page-container #sidebar .nav-main-item.open > .nav-main-link-submenu,
#page-container #sidebar .nav-main-item.open > .nav-main-link-submenu:hover {
  background-color: transparent;
  color: #fff;
}
#page-container #sidebar .nav-main-item.is-current > .nav-main-link-submenu .nav-main-link-icon { color: var(--chrome-accent); }
#page-container #sidebar .nav-main-link.nav-main-link-submenu::after { display: none; }
#page-container #sidebar .nav-main-link.nav-main-link-submenu::before {
  content: "\f107";
  opacity: .55;
  transform: none;
  transition: transform .2s var(--ui-ease), opacity .2s;
}
#page-container #sidebar .nav-main-item.open > .nav-main-link-submenu::before {
  opacity: .85;
  transform: rotate(180deg);
}

/* 3.2 Submenu: trilho e marcador desenhados dentro do <ul> (nunca cortados) */
#page-container #sidebar .nav-main-submenu {
  position: relative;
  margin: 0;
  padding-left: 0;
  background-color: transparent;
  border: 0;
  border-radius: 0;
}
#page-container #sidebar .nav-main-item.open > .nav-main-submenu {
  margin-top: 0;
  padding-top: 2px;
  padding-bottom: 6px;
  background-color: transparent;
}
#page-container #sidebar .nav-main-submenu::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 8px;
  left: var(--sb-rail);
  width: 1px;
  background: var(--chrome-rail);
  pointer-events: none;
}
#page-container #sidebar .nav-main-submenu .nav-main-link {
  margin: 1px 0 1px calc(var(--sb-rail) + .5rem);
  padding: .4375rem var(--sb-px) .4375rem calc(var(--sb-label) - var(--sb-rail) - .5rem);
  min-height: 2.125rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--chrome-text-sub);
  border-radius: var(--ui-radius-sm);
  background-color: transparent;
}
#page-container #sidebar .nav-main-submenu .nav-main-link:hover { background-color: var(--chrome-hover); color: #fff; }
#page-container #sidebar .nav-main-submenu .nav-main-link.active,
#page-container #sidebar .nav-main-submenu .nav-main-link.active:hover {
  background-color: var(--chrome-active);
  color: #fff;
  font-weight: 600;
}
/* marcador de 3px centrado sobre o trilho de 1px */
#page-container #sidebar .nav-main-submenu .nav-main-link.active::before {
  content: '';
  position: absolute;
  left: calc(-.5rem - 1px);
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 3px;
  background: var(--chrome-accent);
}
@media (max-width: 991.98px) {
  #page-container #sidebar .nav-main-link { min-height: 48px; font-size: .9375rem; }
  #page-container #sidebar .nav-main-link .nav-main-link-icon { font-size: 1.05rem; }
  #page-container #sidebar .nav-main-submenu .nav-main-link { min-height: 44px; font-size: .9rem; }
}

/* badge de pendências */
#page-container .nav-badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .375rem;
  margin-left: auto;
  border-radius: 999px;
  background: var(--ui-danger-solid);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 1;
}
#page-container #sidebar .nav-badge { box-shadow: 0 0 0 2px var(--chrome-sidebar); }

/* 3.3 Marca */
#page-container #sidebar .bg-header-dark { background-color: var(--chrome-sidebar-brand) !important; }
#page-container #sidebar .content-header {
  background: transparent !important;
  padding: 0 .75rem 0 1rem;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06);
}
.cjm-brand {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-width: 0;
  color: #fff;
  text-decoration: none;
}
.cjm-brand:hover, .cjm-brand:focus { color: #fff; }
.cjm-brand-mark {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--ui-primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.cjm-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.cjm-brand-text strong { font-size: .9375rem; font-weight: 700; color: #fff; white-space: nowrap; }
.cjm-brand-text small {
  font-size: .6875rem;
  font-weight: 500;
  color: var(--chrome-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#page-container #sidebar .content-header .btn {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--chrome-btn);
  color: #fff;
  box-shadow: none;
}
#page-container #sidebar .content-header .btn:hover,
#page-container #sidebar .content-header .btn:focus { background: var(--chrome-btn-hover); color: #fff; }
#page-container #sidebar .content-header .btn:focus-visible { box-shadow: var(--ui-focus-on-dark); }
@media (max-width: 991.98px) {
  #page-container #sidebar .content-header .btn { width: 44px; height: 44px; min-height: 44px; border-radius: 10px; }
}

/* 3.4 Header */
#page-container.page-header-dark #page-header,
#page-container #page-header {
  background-color: var(--chrome-header);
  color: #fff;
  box-shadow: none;
  transition: box-shadow var(--ui-dur);
}
#page-container.is-scrolled #page-header { box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 6px 16px rgba(16, 24, 40, .14); }
#page-container #page-header .btn-alt-secondary {
  min-width: 40px;
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: var(--chrome-btn);
  color: #fff;
  box-shadow: none;
}
#page-container #page-header .btn-alt-secondary:hover,
#page-container #page-header .btn-alt-secondary:focus,
#page-container #page-header .btn-alt-secondary:active,
#page-container #page-header .show > .btn-alt-secondary { background: var(--chrome-btn-hover); color: #fff; box-shadow: none; }
#page-container #page-header .btn-alt-secondary:focus-visible { box-shadow: var(--ui-focus-on-dark); }
#page-container #page-header .cjm-user-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0 .625rem 0 .375rem;
  height: 44px;
}
.cjm-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  flex: none;
}
.cjm-user-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.15; text-align: left; }
.cjm-user-name { font-size: .84rem; font-weight: 600; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cjm-user-role { font-size: .6875rem; font-weight: 500; opacity: .72; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 575.98px) { .cjm-user-name { max-width: 9ch; } }

#page-container .cjm-user-menu {
  min-width: 256px;
  padding: .375rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-lg);
}
.cjm-user-card { display: flex; gap: .75rem; align-items: flex-start; padding: .625rem; }
.cjm-avatar.is-lg { width: 40px; height: 40px; background: var(--ui-primary-soft); color: var(--ui-primary-text); font-size: .875rem; }
.cjm-user-card-name { font-size: .9rem; font-weight: 700; color: var(--ui-text); line-height: 1.25; overflow-wrap: anywhere; }
.cjm-user-card-sub { font-size: .78rem; color: var(--ui-text-muted); line-height: 1.3; }
#page-container .cjm-user-menu .dropdown-divider { margin: .25rem 0; border-color: var(--ui-border); }
#page-container .cjm-user-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: .25rem;
  min-height: 40px;
  padding: .5rem .625rem;
  border-radius: 8px;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--ui-text);
  background: transparent;
}
#page-container .cjm-user-menu .dropdown-item .fa,
#page-container .cjm-user-menu .dropdown-item .far { color: var(--ui-text-subtle); }
#page-container .cjm-user-menu .dropdown-item:hover,
#page-container .cjm-user-menu .dropdown-item:focus { background: var(--ui-surface-muted); color: var(--ui-text); }
#page-container .cjm-user-menu .dropdown-item.cjm-logout,
#page-container .cjm-user-menu .dropdown-item.cjm-logout .far { color: var(--ui-danger-text); }
#page-container .cjm-user-menu .dropdown-item.cjm-logout:hover,
#page-container .cjm-user-menu .dropdown-item.cjm-logout:focus { background: var(--ui-danger-soft); color: var(--ui-danger-text); }

/* 3.5 Faixa institucional: hero de todas as telas (#main-container > .bg-body-light) */
#page-container #main-container > .bg-body-light:not(.hero-plain) {
  background: linear-gradient(180deg, var(--chrome-header) 0%, var(--chrome-band-end) 100%) !important;
  color: #fff;
  border: 0;
}
#page-container #main-container > .bg-body-light:not(.hero-plain) > .content {
  padding-top: 1.25rem !important;
  padding-bottom: 1.5rem !important;
}
#page-container #main-container > .bg-body-light:not(.hero-plain) h1,
#page-container #main-container > .bg-body-light:not(.hero-plain) .h1 {
  color: #fff;
  font-size: var(--fs-h1) !important;
  font-weight: 800 !important;
  letter-spacing: var(--ls-tight);
  line-height: 1.2;
  margin-top: 0 !important;
  margin-bottom: .25rem !important;
}
#page-container #main-container > .bg-body-light:not(.hero-plain) h1 .text-muted,
#page-container #main-container > .bg-body-light:not(.hero-plain) h1 .fa { color: rgba(255, 255, 255, .78) !important; }
#page-container #main-container > .bg-body-light:not(.hero-plain) p,
#page-container #main-container > .bg-body-light:not(.hero-plain) .text-muted,
#page-container #main-container > .bg-body-light:not(.hero-plain) small,
#page-container #main-container > .bg-body-light:not(.hero-plain) .fs-sm { color: rgba(255, 255, 255, .78) !important; }
#page-container #main-container > .bg-body-light:not(.hero-plain) strong { color: #fff; }
#page-container #main-container > .bg-body-light:not(.hero-plain) .form-label,
#page-container #main-container > .bg-body-light:not(.hero-plain) label { color: rgba(255, 255, 255, .86); }
#page-container #main-container > .bg-body-light:not(.hero-plain) .breadcrumb {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  background: transparent;
}
#page-container #main-container > .bg-body-light:not(.hero-plain) .breadcrumb-item,
#page-container #main-container > .bg-body-light:not(.hero-plain) .breadcrumb-item a { color: rgba(255, 255, 255, .72); }
#page-container #main-container > .bg-body-light:not(.hero-plain) .breadcrumb-item.active { color: #fff; }
#page-container #main-container > .bg-body-light:not(.hero-plain) .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .4); }
#page-container #main-container > .bg-body-light:not(.hero-plain) a:not(.btn):not(.dropdown-item) {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#page-container #main-container > .bg-body-light:not(.hero-plain) .btn-primary {
  background: #fff;
  border-color: #fff;
  color: var(--brand-700);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
#page-container #main-container > .bg-body-light:not(.hero-plain) .btn-primary:hover,
#page-container #main-container > .bg-body-light:not(.hero-plain) .btn-primary:focus,
#page-container #main-container > .bg-body-light:not(.hero-plain) .btn-primary:active {
  background: var(--brand-50);
  border-color: var(--brand-50);
  color: var(--brand-800);
}
#page-container #main-container > .bg-body-light:not(.hero-plain) .btn-alt-primary,
#page-container #main-container > .bg-body-light:not(.hero-plain) .btn-alt-secondary,
#page-container #main-container > .bg-body-light:not(.hero-plain) .btn-secondary,
#page-container #main-container > .bg-body-light:not(.hero-plain) .btn-light,
#page-container #main-container > .bg-body-light:not(.hero-plain) .btn-outline-primary,
#page-container #main-container > .bg-body-light:not(.hero-plain) .btn-outline-secondary,
#page-container #main-container > .bg-body-light:not(.hero-plain) .btn-ui-ghost,
#page-container #main-container > .bg-body-light:not(.hero-plain) .btn-ui-tonal {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  box-shadow: none;
}
#page-container #main-container > .bg-body-light:not(.hero-plain) .btn-alt-primary:hover,
#page-container #main-container > .bg-body-light:not(.hero-plain) .btn-alt-secondary:hover,
#page-container #main-container > .bg-body-light:not(.hero-plain) .btn-secondary:hover,
#page-container #main-container > .bg-body-light:not(.hero-plain) .btn-light:hover,
#page-container #main-container > .bg-body-light:not(.hero-plain) .btn-outline-primary:hover,
#page-container #main-container > .bg-body-light:not(.hero-plain) .btn-outline-secondary:hover,
#page-container #main-container > .bg-body-light:not(.hero-plain) .btn-ui-ghost:hover,
#page-container #main-container > .bg-body-light:not(.hero-plain) .btn-ui-tonal:hover { background: rgba(255, 255, 255, .22); color: #fff; }
#page-container #main-container > .bg-body-light:not(.hero-plain) .form-select,
#page-container #main-container > .bg-body-light:not(.hero-plain) .form-control {
  background-color: #fff;
  border-color: transparent;
  color: var(--brand-900);
}
#page-container #main-container > .bg-body-light:not(.hero-plain) .ui-chip,
#page-container #main-container > .bg-body-light:not(.hero-plain) .ui-chip.is-neutral,
#page-container #main-container > .bg-body-light:not(.hero-plain) .ui-chip.is-primary,
#page-container #main-container > .bg-body-light:not(.hero-plain) .ui-chip.is-info {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  border-color: transparent;
}
#page-container #main-container > .bg-body-light:not(.hero-plain) .ui-chip.is-success { background: #e3f6e9; color: #166534; }
#page-container #main-container > .bg-body-light:not(.hero-plain) .ui-chip.is-warning { background: #fdf3d8; color: #8a3c0b; }
#page-container #main-container > .bg-body-light:not(.hero-plain) .ui-chip.is-danger { background: #fde8e8; color: #991b1b; }
#page-container #main-container > .bg-body-light:not(.hero-plain) .text-dark,
#page-container #main-container > .bg-body-light:not(.hero-plain) .text-black,
#page-container #main-container > .bg-body-light:not(.hero-plain) .text-body { color: #fff !important; }
#page-container #main-container > .bg-body-light:not(.hero-plain) .text-primary { color: var(--brand-200) !important; }
@media (max-width: 767.98px) {
  #page-container #main-container > .bg-body-light:not(.hero-plain) > .content {
    padding-top: 1rem !important;
    padding-bottom: 1.25rem !important;
  }
}
.ui-hero-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-size: 1.05rem;
  flex: none;
}
/* escape por tela (usar só se a faixa ficar ilegível) */
#page-container #main-container > .bg-body-light.hero-plain {
  background: var(--ui-surface) !important;
  border-bottom: 1px solid var(--ui-border);
}
#page-container #main-container > .bg-body-light.hero-plain h1 { color: var(--ui-text); font-weight: 800; letter-spacing: var(--ls-tight); }
/* cartões sobrepostos à faixa (opcional) */
#page-container #main-container > .bg-body-light.ui-lift > .content { padding-bottom: 3.75rem !important; }
#page-container #main-container > .bg-body-light.ui-lift + .content { position: relative; z-index: 1; margin-top: -2.5rem; padding-top: 0; }
@media (max-width: 767.98px) {
  #page-container #main-container > .bg-body-light.ui-lift > .content { padding-bottom: 3rem !important; }
  #page-container #main-container > .bg-body-light.ui-lift + .content { margin-top: -1.75rem; }
}

/* 3.6 Rodapé */
#page-container #page-footer {
  background: var(--ui-surface) !important;
  border-top: 1px solid var(--ui-border);
}
.cjm-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .25rem 1rem;
  min-height: 48px;
  font-size: var(--fs-sm);
  color: var(--ui-text-muted);
}
.cjm-footer-app { color: var(--ui-text-subtle); }
#page-container #page-footer a { color: var(--ui-text-muted); font-weight: 600; text-decoration: none; }
#page-container #page-footer a:hover { color: var(--ui-primary-text); }
@media (max-width: 767.98px) {
  #page-container #page-footer .content { padding-top: .5rem !important; padding-bottom: .5rem !important; }
}
@media (max-width: 575.98px) {
  .cjm-footer { flex-direction: column; justify-content: center; text-align: center; font-size: var(--fs-xs); }
}

/* 3.7 Barra inferior (Cooperador, celular) */
.cjm-bottom-nav { display: none; }
@media (max-width: 991.98px) {
  .has-bottom-nav #page-footer { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .has-bottom-nav #main-container { padding-bottom: 8px; }
  .cjm-bottom-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    padding-bottom: env(safe-area-inset-bottom);
  }
  #page-container .cjm-bottom-nav {
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid var(--ui-border);
    box-shadow: 0 -4px 16px rgba(16, 24, 40, .06);
  }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    #page-container .cjm-bottom-nav {
      background: rgba(255, 255, 255, .86);
      -webkit-backdrop-filter: saturate(180%) blur(10px);
      backdrop-filter: saturate(180%) blur(10px);
    }
  }
  #page-container .cjm-bottom-nav a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 60px;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--ui-text-muted);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  #page-container .cjm-bottom-nav a .fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 30px;
    border-radius: 15px;
    font-size: 1.05rem;
    transition: background-color var(--ui-dur) var(--ui-ease), transform .1s;
  }
  #page-container .cjm-bottom-nav a.active { color: var(--ui-primary-text); font-weight: 700; }
  #page-container .cjm-bottom-nav a.active .fa { background: var(--ui-primary-soft-2); }
  #page-container .cjm-bottom-nav a.active::before { display: none; }
  #page-container .cjm-bottom-nav a:active .fa { transform: scale(.94); }
  #page-container .cjm-bottom-nav .nav-badge {
    position: absolute;
    top: 4px;
    left: calc(50% + 8px);
    margin: 0;
    box-shadow: 0 0 0 2px var(--ui-surface);
  }
}

/* 3.8 Indicador de carregamento (barra de 3px na base do header) */
#page-container #page-header-loader {
  top: auto !important;
  bottom: 0;
  height: 3px;
  opacity: 0;
  transform: none !important;
  background: transparent !important;
  overflow: hidden;
  pointer-events: none;
}
#page-container #page-header-loader > * { display: none; }
#page-container #page-header-loader.show { opacity: 1; }
#page-container #page-header-loader.show::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  background: var(--chrome-accent);
  animation: cjm-indet 1.1s var(--ui-ease) infinite;
}
@keyframes cjm-indet { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* --------------------------------------------------------------------------
   5. Componentes
   -------------------------------------------------------------------------- */

/* 5.1 Cards e blocos: superfície única */
#page-container .block.block-rounded,
.ui-card, .launch-page .card, .dash-chart-box, .dash-filter-card, .dash-table-wrap, .cjm-chart-box,
.track-card, .track-filter, .summary-card, .resume-table-wrap, .analytic-table-wrap, .analytic-filter, .ui-filter {
  background-color: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
}
#page-container .block-header-default {
  background-color: transparent !important;
  border-bottom: 1px solid var(--ui-border);
  padding: .875rem var(--ui-card-pad);
  min-height: 52px;
  align-items: center;
}
#page-container .block-title { font-size: var(--fs-md); font-weight: 700; color: var(--ui-text); letter-spacing: -.01em; }
#page-container .block-header > .btn { margin-bottom: 0 !important; }
.block.ui-flat { background: none !important; border: 0 !important; box-shadow: none !important; }
.block.ui-flat > .block-content { padding: 0 !important; }
.launch-page .card .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--ui-border);
  padding: .875rem var(--ui-card-pad);
  text-align: left;
}
.launch-page .card .card-header h4 {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ui-text);
  margin: 0;
}
.launch-page .card .card-header h4 .ui-chip { margin-left: auto; }
.launch-page .form-label { color: var(--ui-text); }
/* rótulos sem classe (selects Sim/Não do lançamento) no mesmo estilo de .form-label */
.launch-page label:not([class]) { display: block; font-size: .875rem; font-weight: 600; line-height: 1.3; color: var(--ui-text); margin-bottom: .5rem; }
.ui-card { min-width: 0; padding: var(--ui-card-pad); height: 100%; }
.ui-card-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ui-text);
  margin: 0 0 .25rem;
}
.ui-card-title-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--ui-primary-soft);
  color: var(--ui-primary-text);
  display: inline-grid;
  place-items: center;
  font-size: .8rem;
  flex: none;
}
/* "p.ui-card-desc" dentro de .content: vence o ".content p { margin-bottom: 1.75rem }" do Dashmix */
.ui-card-desc, .content p.ui-card-desc { font-size: .8rem; line-height: 1.45; color: var(--ui-text-muted); margin: 0 0 .75rem; }
.ui-chart { position: relative; width: 100%; height: 260px; }
.ui-chart.ui-chart-lg { height: 300px; }
@media (max-width: 575.98px) {
  .ui-chart { height: 220px; }
  .ui-chart.ui-chart-lg { height: 240px; }
}
.ui-section-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--ui-text-muted);
  margin: 2rem 0 .75rem;
}
.ui-section-title::after { content: ''; flex: 1; height: 1px; background: var(--ui-border); }
.content > .ui-section-title:first-child { margin-top: 0; }
.ui-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot, var(--ui-primary));
  flex: none;
  vertical-align: middle;
}
.row > [class*=col] > .dash-chart-box { margin-bottom: 0; height: 100%; }
.dash-chart-box h3, .cjm-chart-box h3, .track-name, .mob-card-name { color: var(--ui-text); }
.dash-kpi .kpi-label, .dash-filter-card .form-label, .track-stats, .dash-chart-box .chart-desc { color: var(--ui-text-muted); }
.expand-btn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: var(--ui-neutral-soft);
  color: var(--ui-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--ui-dur), color var(--ui-dur);
}
.expand-btn:hover, .expand-btn:focus { background: var(--ui-primary-soft); color: var(--ui-primary-text); }
/* Acompanhamento: a faixa de 4px é a situação da igreja; o cartão não é link */
.track-card { border-left-width: 4px; }
#page-container .track-card:active, #page-container .dash-kpi:active { transform: none; }
.track-progress { background: var(--ui-neutral-soft); }

/* 5.2 KPI */
.ui-kpi, #page-container .dash-kpi {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  height: 100%;
  min-width: 0;
  padding: 1rem 1.125rem;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
}
.ui-kpi { position: relative; }
.ui-kpi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.ui-kpi-icon, .ui-kpi-icon.is-teal, .ui-kpi-icon.is-green, .ui-kpi-icon.is-amber, .ui-kpi-icon.is-violet,
.ui-kpi-icon.is-blue, .ui-kpi-icon.is-red {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ui-primary-soft);
  color: var(--ui-primary-text);
  display: inline-grid;
  place-items: center;
  font-size: .95rem;
  flex: none;
}
.ui-kpi.is-attention .ui-kpi-icon { background: var(--ui-warning-soft); color: var(--ui-warning); }
.ui-kpi.is-alert .ui-kpi-icon { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-kpi-value { font-size: var(--fs-kpi); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; color: var(--ui-text); }
.ui-kpi-value.is-empty { font-size: 1rem; font-weight: 600; letter-spacing: 0; line-height: 1.75rem; color: var(--ui-text-subtle); }
.ui-kpi-label { font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; color: var(--ui-text-muted); }
.ui-kpi-label .ui-dot { margin-right: .375rem; }
.ui-kpi-hint { margin-top: auto; padding-top: .5rem; font-size: .74rem; line-height: 1.35; color: var(--ui-text-subtle); }
.ui-kpi-hint b, .ui-kpi-hint strong { font-weight: 600; color: var(--ui-text-muted); }
.ui-kpi.is-group { border-top: 3px solid var(--dot, var(--ui-border)); }
a.ui-kpi { color: inherit; text-decoration: none; transition: border-color var(--ui-dur), box-shadow var(--ui-dur); }
a.ui-kpi:hover { color: inherit; border-color: var(--ui-primary-border); box-shadow: var(--ui-shadow-md); }
#page-container .dash-kpi { display: block; text-align: left; border-left-width: 1px; border-color: var(--ui-border); }
#page-container .dash-kpi .kpi-value { color: var(--ui-text) !important; font-size: var(--fs-kpi); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
#page-container .dash-kpi .kpi-label { color: var(--ui-text-muted); font-size: var(--fs-sm); font-weight: 600; margin-top: .25rem; }
#page-container .dash-kpi .kpi-hint { color: var(--ui-text-subtle); font-size: .74rem; }
@media (max-width: 767.98px) {
  .row-cols-2 > .col:last-child:nth-child(odd) { flex: 0 0 100%; max-width: 100%; }
}
@media (max-width: 575.98px) {
  .ui-kpi, #page-container .dash-kpi { padding: .875rem; }
  .ui-kpi-icon, .ui-kpi-icon.is-teal, .ui-kpi-icon.is-green, .ui-kpi-icon.is-amber, .ui-kpi-icon.is-violet,
  .ui-kpi-icon.is-blue, .ui-kpi-icon.is-red { width: 32px; height: 32px; font-size: .85rem; }
}

/* 5.3 Chips, badges e tendência */
.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  height: 22px;
  padding: 0 .55rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  background: var(--ui-neutral-soft);
  color: var(--ui-text-muted);
}
.ui-chip .fa, .ui-chip .far { font-size: .625rem; }
.ui-chip-num { font-weight: 600; opacity: .85; }
.ui-chip.is-lg { height: 28px; padding: 0 .7rem; font-size: .8rem; }
.ui-chip.is-neutral, .ui-chip.trend-flat { background: var(--ui-neutral-soft); color: var(--ui-text-muted); border-color: transparent; }
.ui-chip.is-primary { background: var(--ui-primary-soft); color: var(--ui-primary-text); border-color: var(--ui-primary-border); }
.ui-chip.is-success, .ui-chip.trend-up { background: var(--ui-success-soft); color: var(--ui-success-text); border-color: var(--ui-success-border); }
.ui-chip.is-warning, .ui-chip.trend-warn { background: var(--ui-warning-soft); color: var(--ui-warning-text); border-color: var(--ui-warning-border); }
.ui-chip.is-danger, .ui-chip.trend-down { background: var(--ui-danger-soft); color: var(--ui-danger-text); border-color: var(--ui-danger-border); }
.ui-chip.is-info { background: var(--ui-info-soft); color: var(--ui-info-text); border-color: var(--ui-info-border); }
.ui-chip.trend-none { background: transparent; border: 1px dashed var(--ui-border-strong); color: var(--ui-text-muted); }
.ui-chip.is-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ui-chip.is-wrap, .ui-follow-reasons .ui-chip {
  white-space: normal;
  height: auto;
  min-height: 22px;
  padding: .2rem .55rem;
  line-height: 1.35;
  text-align: left;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.ui-delta { display: block; margin-top: 2px; font-size: .72rem; color: var(--ui-text-subtle); white-space: nowrap; font-variant-numeric: tabular-nums; }

.badge { font-size: var(--fs-2xs); font-weight: 700; padding: .35em .6em; border-radius: 999px; line-height: 1; }
#page-container .badge.bg-success { background-color: var(--ui-success-soft) !important; color: var(--ui-success-text) !important; }
#page-container .badge.bg-warning { background-color: var(--ui-warning-soft) !important; color: var(--ui-warning-text) !important; }
#page-container .badge.bg-danger { background-color: var(--ui-danger-soft) !important; color: var(--ui-danger-text) !important; }
#page-container .badge.bg-info { background-color: var(--ui-info-soft) !important; color: var(--ui-info-text) !important; }
#page-container .badge.bg-primary { background-color: var(--ui-primary-soft) !important; color: var(--ui-primary-text) !important; }
#page-container .badge.bg-secondary { background-color: var(--ui-neutral-soft) !important; color: var(--ui-text-muted) !important; }
/* contagens continuam sólidas */
#page-container .btn .badge.bg-danger,
#page-container .cjm-launch-badge,
#page-container .nav-badge { background: var(--ui-danger-solid) !important; color: #fff !important; }

/* % de presença */
.pct-badge { display: inline-block; font-weight: 700; padding: .25em .6em; border-radius: 999px; font-size: .78rem; }
.pct-high { background: var(--ui-success-soft); color: var(--ui-success-text); }
.pct-mid { background: var(--ui-warning-soft); color: var(--ui-warning-text); }
.pct-low { background: var(--ui-danger-soft); color: var(--ui-danger-text); }
.pct-none { background: var(--ui-neutral-soft); color: var(--ui-text-muted); }

/* 5.4 Alertas e notas */
.alert { border-radius: var(--ui-radius-sm); font-size: var(--fs-base); box-shadow: none; }
.ui-alert {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
}
.row > .ui-alert {
  flex: 0 0 auto;
  width: calc(100% - var(--bs-gutter-x));
  max-width: none;
  margin-left: calc(var(--bs-gutter-x) * .5);
  margin-right: calc(var(--bs-gutter-x) * .5);
}
#page-container .alert-success { background: var(--ui-success-soft); color: var(--ui-success-text); border-color: var(--ui-success-border); }
#page-container .alert-danger { background: var(--ui-danger-soft); color: var(--ui-danger-text); border-color: var(--ui-danger-border); }
#page-container .alert-warning { background: var(--ui-warning-soft); color: var(--ui-warning-text); border-color: var(--ui-warning-border); }
#page-container .alert-info { background: var(--ui-info-soft); color: var(--ui-info-text); border-color: var(--ui-info-border); }
#page-container .alert .alert-link { color: inherit; }
.ui-alert-icon {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: currentColor;
  display: grid;
  place-items: center;
}
.ui-alert-icon .fa { color: var(--ui-surface); font-size: .7rem; }
.ui-alert-body { min-width: 0; flex: 1 1 auto; line-height: 1.45; }
.ui-alert-title { display: block; font-size: .85rem; font-weight: 700; margin-bottom: 1px; }
.ui-note {
  display: flex;
  gap: .625rem;
  align-items: flex-start;
  padding: .625rem .875rem;
  margin-bottom: 1rem;
  border: 1px solid var(--ui-info-border);
  border-radius: 10px;
  background: var(--ui-info-soft);
  color: var(--ui-info-text);
  font-size: .82rem;
  line-height: 1.45;
}
.ui-note > .fa { flex: none; margin-top: .15rem; }
.ui-note.is-warning { border-color: var(--ui-warning-border); background: var(--ui-warning-soft); color: var(--ui-warning-text); }
.ui-note.is-neutral { background: var(--ui-surface-muted); border-color: var(--ui-border); color: var(--ui-text-muted); }

/* 5.5 Botões (base sem ID: componentes com 2 classes vencem) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: var(--ui-control-h);
  border-radius: var(--ui-radius-sm);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.25;
  transition: background-color var(--ui-dur) var(--ui-ease), border-color var(--ui-dur), color var(--ui-dur), box-shadow var(--ui-dur), transform .1s;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--ui-focus) !important; }
.btn-sm { min-height: 32px; padding: .25rem .625rem; font-size: var(--fs-sm); border-radius: 7px; }
.btn-lg { min-height: 48px; font-size: var(--fs-md); border-radius: 10px; }
@media (max-width: 767.98px) {
  .btn-sm { min-height: 36px; }
}

.btn-primary, .btn-primary:focus {
  background-color: var(--ui-primary);
  border-color: var(--ui-primary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .12), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.btn-primary:hover { background-color: var(--ui-primary-hover); border-color: var(--ui-primary-hover); color: #fff; }
.btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
  background-color: var(--ui-primary-active);
  border-color: var(--ui-primary-active);
  color: #fff;
}
.btn-primary:disabled, .btn-primary.disabled { background-color: var(--ui-primary); border-color: var(--ui-primary); color: #fff; opacity: .5; }

.btn-success, .btn-success:focus, .btn-success:hover, .btn-success:active, .btn-success.active,
.btn-success:disabled, .btn-success.disabled { background-color: var(--ui-success-solid); border-color: var(--ui-success-solid); color: #fff; }
.btn-danger, .btn-danger:focus, .btn-danger:hover, .btn-danger:active, .btn-danger.active,
.btn-danger:disabled, .btn-danger.disabled { background-color: var(--ui-danger-solid); border-color: var(--ui-danger-solid); color: #fff; }
.btn-warning, .btn-warning:focus, .btn-warning:hover, .btn-warning:active, .btn-warning.active,
.btn-warning:disabled, .btn-warning.disabled { background-color: var(--ui-warning-solid); border-color: var(--ui-warning-solid); color: #fff; }
.btn-info, .btn-info:focus, .btn-info:hover, .btn-info:active, .btn-info.active,
.btn-info:disabled, .btn-info.disabled { background-color: var(--ui-info-solid); border-color: var(--ui-info-solid); color: #fff; }
.btn-success:hover, .btn-danger:hover, .btn-warning:hover, .btn-info:hover,
.btn-success:active, .btn-danger:active, .btn-warning:active, .btn-info:active { filter: brightness(.93); }
.btn-success:focus, .btn-danger:focus, .btn-warning:focus, .btn-info:focus { box-shadow: none; }
.btn-success:disabled, .btn-success.disabled, .btn-danger:disabled, .btn-danger.disabled,
.btn-warning:disabled, .btn-warning.disabled, .btn-info:disabled, .btn-info.disabled { opacity: .5; }

/* neutros */
#main-container .btn-secondary, #main-container .btn-light, #main-container .btn-alt-secondary, .btn-ui-ghost,
#main-container .btn-secondary:focus, #main-container .btn-light:focus, #main-container .btn-alt-secondary:focus, .btn-ui-ghost:focus {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border-strong);
  color: var(--ui-text);
  box-shadow: none;
}
#main-container .btn-secondary:hover, #main-container .btn-light:hover, #main-container .btn-alt-secondary:hover, .btn-ui-ghost:hover,
#main-container .btn-secondary:active, #main-container .btn-light:active, #main-container .btn-alt-secondary:active, .btn-ui-ghost:active,
#main-container .btn-secondary.active, #main-container .btn-light.active, #main-container .btn-alt-secondary.active, .btn-ui-ghost.active {
  background: var(--ui-surface-muted);
  border-color: var(--ui-text-faint);
  color: var(--ui-text);
}
#main-container .btn-secondary:disabled, #main-container .btn-light:disabled, #main-container .btn-alt-secondary:disabled, .btn-ui-ghost:disabled,
#main-container .btn-secondary.disabled, #main-container .btn-light.disabled, #main-container .btn-alt-secondary.disabled, .btn-ui-ghost.disabled { opacity: .5; }

/* tonais */
.btn-ui-tonal, .btn-alt-primary, .btn-ui-tonal:focus, .btn-alt-primary:focus {
  background: var(--ui-primary-soft);
  border-color: transparent;
  color: var(--ui-primary-text);
  box-shadow: none;
}
.btn-ui-tonal:hover, .btn-alt-primary:hover, .btn-ui-tonal:active, .btn-alt-primary:active,
.btn-ui-tonal.active, .btn-alt-primary.active { background: var(--ui-primary-soft-2); border-color: transparent; color: var(--ui-primary-text); }
.btn-alt-success, .btn-alt-success:focus, .btn-alt-success:hover, .btn-alt-success:active, .btn-alt-success.active {
  background: var(--ui-success-soft); border-color: transparent; color: var(--ui-success-text); box-shadow: none;
}
.btn-alt-danger, .btn-alt-danger:focus, .btn-alt-danger:hover, .btn-alt-danger:active, .btn-alt-danger.active {
  background: var(--ui-danger-soft); border-color: transparent; color: var(--ui-danger-text); box-shadow: none;
}
.btn-alt-warning, .btn-alt-warning:focus, .btn-alt-warning:hover, .btn-alt-warning:active, .btn-alt-warning.active {
  background: var(--ui-warning-soft); border-color: transparent; color: var(--ui-warning-text); box-shadow: none;
}
.btn-alt-info, .btn-alt-info:focus, .btn-alt-info:hover, .btn-alt-info:active, .btn-alt-info.active {
  background: var(--ui-info-soft); border-color: transparent; color: var(--ui-info-text); box-shadow: none;
}
.btn-alt-success:hover, .btn-alt-success:active { box-shadow: inset 0 0 0 1px var(--ui-success-border); }
.btn-alt-danger:hover, .btn-alt-danger:active { box-shadow: inset 0 0 0 1px var(--ui-danger-border); }
.btn-alt-warning:hover, .btn-alt-warning:active { box-shadow: inset 0 0 0 1px var(--ui-warning-border); }
.btn-alt-info:hover, .btn-alt-info:active { box-shadow: inset 0 0 0 1px var(--ui-info-border); }
.btn-ui-tonal:disabled, .btn-alt-primary:disabled, .btn-alt-success:disabled, .btn-alt-danger:disabled,
.btn-alt-warning:disabled, .btn-alt-info:disabled, .btn-ui-tonal.disabled, .btn-alt-primary.disabled,
.btn-alt-success.disabled, .btn-alt-danger.disabled, .btn-alt-warning.disabled, .btn-alt-info.disabled { opacity: .5; }

/* contorno */
.btn-outline-primary, .btn-outline-primary:focus { background: transparent; border-color: var(--ui-primary-border); color: var(--ui-primary-text); box-shadow: none; }
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary.active { background: var(--ui-primary-soft); border-color: var(--ui-primary-border); color: var(--ui-primary-text); }
.btn-outline-danger, .btn-outline-danger:focus { background: transparent; border-color: var(--ui-danger-border); color: var(--ui-danger-text); box-shadow: none; }
.btn-outline-danger:hover, .btn-outline-danger:active, .btn-outline-danger.active { background: var(--ui-danger-soft); border-color: var(--ui-danger-border); color: var(--ui-danger-text); }
.btn-outline-secondary, .btn-outline-secondary:focus { background: transparent; border-color: var(--ui-border-strong); color: var(--ui-text-muted); box-shadow: none; }
.btn-outline-secondary:hover, .btn-outline-secondary:active, .btn-outline-secondary.active { background: var(--ui-neutral-soft); border-color: var(--ui-border-strong); color: var(--ui-text); }
.btn-outline-success, .btn-outline-success:focus { background: transparent; border-color: var(--ui-success-border); color: var(--ui-success-text); box-shadow: none; }
.btn-outline-success:hover, .btn-outline-success:active, .btn-outline-success.active { background: var(--ui-success-soft); border-color: var(--ui-success-border); color: var(--ui-success-text); }
.btn-outline-primary:disabled, .btn-outline-danger:disabled, .btn-outline-secondary:disabled, .btn-outline-success:disabled,
.btn-outline-primary.disabled, .btn-outline-danger.disabled, .btn-outline-secondary.disabled, .btn-outline-success.disabled { opacity: .5; }

.dash-filter-card .btn, .ui-filter .btn, .analytic-filter .btn, .track-filter .btn { white-space: nowrap; }

/* 5.6 Formulários */
.form-label { font-size: var(--fs-sm); font-weight: 600; color: var(--ui-text); margin-bottom: .375rem; }
.form-label .text-danger { color: var(--ui-danger) !important; }
.form-text { font-size: .78rem; color: var(--ui-text-muted); }
#page-container .form-control, #page-container .form-select {
  min-height: var(--ui-control-h);
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
  background-color: var(--ui-surface);
  color: var(--ui-text);
  font-size: var(--fs-base);
  transition: border-color var(--ui-dur), box-shadow var(--ui-dur);
}
#page-container .form-control:hover, #page-container .form-select:hover { border-color: var(--ui-text-faint); }
#page-container .form-control:focus, #page-container .form-select:focus {
  border-color: var(--ui-primary);
  box-shadow: var(--ui-focus);
  background-color: var(--ui-surface);
  color: var(--ui-text);
}
#page-container .form-control[readonly], #page-container .form-control:disabled, #page-container .form-select:disabled {
  background-color: var(--ui-surface-sunken);
  color: var(--ui-text-muted);
}
#page-container .form-control::placeholder { color: var(--ui-text-subtle); opacity: 1; }
#page-container .form-control-sm, #page-container .form-select-sm { min-height: 32px; font-size: var(--fs-sm); }
#page-container textarea.form-control { min-height: calc(var(--ui-control-h) * 2); }
#page-container .form-control.is-invalid, #page-container .form-select.is-invalid,
#page-container .form-control.is-invalid:focus, #page-container .form-select.is-invalid:focus { border-color: var(--ui-danger); }
#page-container .form-control.is-invalid:focus, #page-container .form-select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .18); }
/* seta em todo select, sem trocar o controle */
select.form-control:not([multiple]):not([size]), .form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: var(--ui-select-arrow);
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 14px 14px;
  padding-right: 2.25rem;
}

/* Select2 */
.select2-container--default .select2-selection--single {
  height: var(--ui-control-h);
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  height: calc(var(--ui-control-h) - 2px);
  line-height: calc(var(--ui-control-h) - 2px);
  padding-top: 0;
  padding-bottom: 0;
  padding-left: .75rem;
  padding-right: 2.25rem;
  font-size: var(--fs-base);
  color: var(--ui-text);
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered,
.select2-container--default .select2-search--inline .select2-search__field,
.select2-results__option { font-size: var(--fs-base); }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--ui-text-subtle); }
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(var(--ui-control-h) - 2px);
  width: 2.25rem;
  background: var(--ui-select-arrow) no-repeat center / 14px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; }
.select2-container--default .select2-selection--multiple {
  min-height: var(--ui-control-h);
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--ui-primary);
  box-shadow: var(--ui-focus);
}
.select2-dropdown {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface);
  color: var(--ui-text);
  box-shadow: var(--ui-shadow-lg);
  overflow: hidden;
}
.select2-container--default .select2-results__option { padding: .5rem .75rem; }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--ui-primary-soft);
  color: var(--ui-primary-text);
}
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option--selected { background: var(--ui-surface-muted); color: var(--ui-text); font-weight: 600; }
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--ui-border-strong);
  border-radius: 6px;
  background: var(--ui-surface);
  color: var(--ui-text);
}
/* celular: mesmo corpo de 16px dos campos comuns (e sem zoom do iOS na busca) */
@media (max-width: 767.98px) {
  .select2-container--default .select2-selection--single .select2-selection__rendered,
  .select2-container--default .select2-selection--multiple .select2-selection__rendered,
  .select2-container--default .select2-search__field,
  .select2-results__option { font-size: 16px; }
}

/* seções e ações de formulário */
.ui-form-section {
  margin: 1.25rem 0 .75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ui-border);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ui-text);
}
.ui-form-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ui-form-section small { display: block; font-size: .78rem; font-weight: 400; color: var(--ui-text-muted); }
.ui-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ui-border);
}
@media (max-width: 575.98px) { .ui-form-actions .btn { flex: 1 1 auto; } }

/* switch */
.form-switch .form-check-input { width: 2.25em; height: 1.25em; }
.form-check-input:checked { background-color: var(--ui-primary); border-color: var(--ui-primary); }
.form-check-input:focus { box-shadow: var(--ui-focus); }

/* permissões */
.ui-perm {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  height: 100%;
  padding: .75rem 1rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  transition: border-color var(--ui-dur), background-color var(--ui-dur);
}
.ui-perm-icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--ui-primary-soft);
  color: var(--ui-primary-text);
  display: inline-grid;
  place-items: center;
}
.ui-perm-title { font-weight: 600; font-size: var(--fs-base); color: var(--ui-text); }
.ui-perm-desc { font-size: .8rem; color: var(--ui-text-muted); line-height: 1.4; }
.ui-perm .form-check { margin-left: auto; padding-left: 0; }
.ui-perm .form-check .form-check-input { margin-left: 0; float: none; }
.ui-perm.is-on { border-color: var(--ui-primary-border); background: var(--ui-primary-soft); }

/* mostrar senha */
.ui-pass-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  border: 1px solid var(--ui-border-strong);
  border-left: 0;
  background: var(--ui-surface);
  color: var(--ui-text-muted);
  border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0;
}
.ui-pass-toggle:hover { color: var(--ui-text); background: var(--ui-surface-muted); }
/* campo dentro de .input-group: sem canto arredondado no encontro com o botão
   (o "#page-container .form-control" devolvia o raio que o Bootstrap tira) */
#page-container .input-group > .form-control:not(:last-child),
#page-container .input-group > .form-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
#page-container .input-group > .form-control:not(:first-child),
#page-container .input-group > .form-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .ui-pass-toggle { margin-left: -1px; cursor: pointer; }
.input-group > .form-control:focus + .ui-pass-toggle { border-color: var(--ui-primary); }

/* 5.7 Tabelas */
#page-container .table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: var(--ui-table-stripe);
  --bs-table-striped-color: var(--ui-text);
  --bs-table-hover-bg: var(--ui-primary-soft);
  --bs-table-hover-color: var(--ui-text);
  --bs-table-active-bg: var(--ui-primary-soft);
  --bs-table-active-color: var(--ui-text);
  color: var(--ui-text);
  font-size: var(--fs-base);
  margin-bottom: 0;
  border-color: var(--ui-border);
}
#page-container .table > :not(caption) > * > * {
  padding: .65rem .75rem;
  border-bottom: 1px solid var(--ui-border);
  vertical-align: middle;
}
#page-container .table-bordered > :not(caption) > * > * { border-width: 0 0 1px 0; }
#page-container .table-bordered > :not(caption) > * { border-width: 0; }
#page-container .table > thead th, #page-container .table > thead td {
  background-color: var(--ui-surface-muted);
  color: var(--ui-text-muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--ui-border-strong);
  vertical-align: bottom;
  white-space: nowrap;
}
/* avisos dentro do thead (td com colspan, ex.: "Atenção, você está visualizando o ano de…"): texto corrido que quebra linha */
#page-container .table > thead td[colspan] {
  white-space: normal;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
  vertical-align: middle;
}
/* o vermelho puro em linha (style="color:red") fica ~3,8:1; o token de perigo passa de 6:1 */
#page-container .table > thead td[colspan][style*="red"],
#page-container .table > thead td[colspan] [style*="red"] { color: var(--ui-danger-text) !important; }
#page-container .table > tbody > tr:last-child > * { border-bottom: 0; }
#page-container .table .num, #page-container .table td.text-end, #page-container .table th.text-end { text-align: right; }
#page-container .table .is-zero { color: var(--ui-text-subtle); }
#page-container .table tfoot td, #page-container .table tfoot th {
  border-top: 2px solid var(--ui-text);
  border-bottom: 0;
  font-weight: 700;
  background: var(--ui-surface-muted);
}
#page-container .table .col-total { background-color: var(--ui-primary-soft); font-weight: 700; }
#page-container .table .grp-start { border-left: 1px solid var(--ui-border-strong); }
#page-container .table thead tr.ui-col-group th {
  background: var(--ui-surface);
  color: var(--ui-text);
  font-size: .68rem;
  text-align: center;
  border-bottom: 1px solid var(--ui-border);
}
#page-container .table tr.ui-group-row > td {
  background: var(--ui-surface-muted);
  color: var(--ui-text-muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .5rem .75rem;
}
#page-container .table-compact > :not(caption) > * > * { padding: .5rem .45rem; }
/* tabelas legadas dentro de cartões: cabeçalho e réguas pelos tokens */
.dash-table-wrap .table th, .analytic-table-wrap .table th, .resume-table-wrap .table th, .ind-rank-table th {
  background: var(--ui-surface-muted);
  border-bottom-color: var(--ui-border);
}

/* colunas fixas */
.ui-sticky-first > :not(caption) > tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: var(--ui-surface);
  box-shadow: 1px 0 0 var(--ui-border);
}
#page-container .ui-sticky-first > thead > tr > :first-child { background-color: var(--ui-surface-muted); z-index: 3; }
.ui-sticky-last > :not(caption) > tr > :last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  background-color: var(--ui-surface);
  box-shadow: -8px 0 12px -8px rgba(16, 24, 40, .18);
}
#page-container .ui-sticky-last > thead > tr > :last-child { background-color: var(--ui-surface-muted); z-index: 3; }
#page-container .ui-sticky-last td.col-total { background: linear-gradient(var(--ui-primary-soft), var(--ui-primary-soft)), var(--ui-surface); }

/* pista de rolagem lateral */
.ui-scroll-host { position: relative; }
.ui-scroll-host::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 16px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--ui-dur);
  background: linear-gradient(to left, var(--ui-surface), rgba(255, 255, 255, 0));
  border-radius: 0 var(--ui-radius) var(--ui-radius) 0;
}
/* fade discreto: indica que há mais colunas sem apagar o último controle visível */
.ui-scroll-host.is-overflowing:not(.is-end)::after { opacity: .7; }
.ui-scroll-host.has-sticky-last::after { display: none; }

/* ações de linha */
.ui-row-actions { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.ui-row-actions form { margin: 0; display: inline-flex; }
.ui-row-actions .btn { width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 8px; }
.ui-row-actions .btn.has-label { width: auto; padding: 0 .625rem; }
@media (max-width: 767.98px) {
  .ui-row-actions .btn { width: 40px; height: 40px; min-height: 40px; }
}
.btn-ui-icon, .btn-ui-icon:focus { background: var(--ui-surface); border: 1px solid var(--ui-border-strong); color: var(--ui-text-muted); }
.btn-ui-icon:hover, .btn-ui-icon:active { background: var(--ui-primary-soft); border-color: var(--ui-primary-border); color: var(--ui-primary-text); }
.btn-ui-icon.is-danger { color: var(--ui-danger-text); }
.btn-ui-icon.is-danger:hover, .btn-ui-icon.is-danger:active { background: var(--ui-danger-soft); border-color: var(--ui-danger-border); color: var(--ui-danger-text); }
#page-container .table td .btn-group { gap: 6px; }
#page-container .table td .btn-group > .btn,
#page-container .table td .btn-group > form .btn,
#page-container .table td form > .btn { border-radius: 8px !important; }

/* DataTables (todas as listas, inclusive legadas) */
.dataTables_wrapper .dt-top, .dataTables_wrapper .dt-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding: .75rem var(--ui-card-pad);
}
.dataTables_wrapper .dt-top { justify-content: flex-end; border-bottom: 1px solid var(--ui-border); }
.dataTables_wrapper .dt-top .dt-buttons { margin-right: auto; }
.dataTables_wrapper .dt-bottom { border-top: 1px solid var(--ui-border); }
.block-content .dataTables_wrapper .dt-top, .block-content .dataTables_wrapper .dt-bottom { padding-left: 0; padding-right: 0; }
.block-content .dataTables_wrapper .dt-top { padding-top: 0; }
.block-content .dataTables_wrapper .dt-bottom { padding-bottom: 0; }
.dataTables_wrapper .dt-top .dt-buttons .btn { margin: 0; }
#page-container .dataTables_wrapper .dataTables_length label {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ui-text-muted);
  white-space: nowrap;
}
#page-container .dataTables_wrapper .dataTables_length select {
  width: auto;
  height: 36px;
  min-height: 36px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: var(--fs-base);
}
#page-container .dataTables_wrapper .dataTables_filter { text-align: right; }
#page-container .dataTables_wrapper .dataTables_filter label {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ui-text-muted);
  white-space: nowrap;
}
#page-container .dataTables_wrapper .dataTables_filter input {
  margin: 0 !important;
  width: min(260px, 60vw);
  height: 36px;
  min-height: 36px;
  padding-left: 2rem;
  font-size: var(--fs-base);
  background-image: var(--ui-search-icon);
  background-repeat: no-repeat;
  background-position: .625rem center;
  background-size: 14px;
}
#page-container .dataTables_wrapper .dataTables_info { padding: 0 !important; font-size: var(--fs-sm); color: var(--ui-text-subtle); white-space: normal; }
#page-container .dataTables_wrapper .dataTables_paginate { margin: 0; }
#page-container .dataTables_wrapper .pagination { margin: 0 !important; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
#page-container .dataTables_wrapper .page-link {
  min-width: 32px;
  height: 32px;
  padding: 0 .5rem;
  border: 0;
  border-radius: 8px !important;
  background: transparent;
  color: var(--ui-text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
#page-container .dataTables_wrapper .page-link:hover { background: var(--ui-neutral-soft); color: var(--ui-text); }
#page-container .dataTables_wrapper .page-link:focus-visible { box-shadow: var(--ui-focus); }
#page-container .dataTables_wrapper .page-item.active .page-link { background: var(--ui-primary); color: #fff; }
#page-container .dataTables_wrapper .page-item.disabled .page-link { background: transparent; color: var(--ui-text-faint); }
#page-container table.dataTable { margin-top: 0 !important; margin-bottom: 0 !important; }
#page-container table.dataTable > thead > tr > th.sorting,
#page-container table.dataTable > thead > tr > th.sorting_asc,
#page-container table.dataTable > thead > tr > th.sorting_desc { padding-right: 1.6rem; }
#page-container table.dataTable > thead .sorting::before, #page-container table.dataTable > thead .sorting::after,
#page-container table.dataTable > thead .sorting_asc::before, #page-container table.dataTable > thead .sorting_asc::after,
#page-container table.dataTable > thead .sorting_desc::before, #page-container table.dataTable > thead .sorting_desc::after { opacity: .35; }
#page-container table.dataTable > thead .sorting_asc::before,
#page-container table.dataTable > thead .sorting_desc::after { opacity: .8; }
#page-container .dataTables_wrapper .dataTables_empty { padding: 1.5rem .75rem; color: var(--ui-text-muted); text-align: center; }
@media (max-width: 575.98px) {
  #page-container .dataTables_wrapper .dt-top > .dataTables_filter { flex: 1 1 100%; min-width: 0; }
  #page-container .dataTables_wrapper .dataTables_filter label { width: 100%; min-width: 0; }
  #page-container .dataTables_wrapper .dataTables_filter input { flex: 1; min-width: 0; width: auto; }
  .dataTables_wrapper .dt-bottom { flex-direction: column; justify-content: center; text-align: center; }
  #page-container .dataTables_wrapper .pagination { justify-content: center; }
}

/* 5.8 Filtro e estado vazio */
.ui-filter { padding: 1rem var(--ui-card-pad); margin-bottom: 1rem; }
.ui-filter .form-label { font-size: .78rem; font-weight: 600; color: var(--ui-text-muted); }
.ui-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 2rem 1rem;
  text-align: center;
  font-size: var(--fs-base);
  color: var(--ui-text-muted);
  background: var(--ui-surface);
  border: 1px dashed var(--ui-border-strong);
  border-radius: var(--ui-radius);
}
.ui-empty .fa, .ui-empty .far, .ui-empty .fas { font-size: 1.5rem; color: var(--ui-text-faint); margin: 0 !important; }
.ui-empty strong { color: var(--ui-text); font-size: var(--fs-md); }
p.ui-empty { padding: 1.25rem 1rem; }

/* 5.9 Listas de apoio */
.ui-insights { list-style: none; margin: 0; padding: 0; }
.ui-insights li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .75rem 0;
  border-bottom: 1px solid var(--ui-border);
  border-radius: 0;
  background: transparent !important;
  color: var(--ui-text);
  font-size: var(--fs-base);
  line-height: 1.45;
}
.ui-insights li:last-child { border-bottom: 0; }
.ui-insights li > .fa {
  flex: none;
  width: 28px;
  height: 28px;
  margin-top: -.15rem;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: .75rem;
  background: var(--ui-neutral-soft);
  color: var(--ui-text-muted);
}
.ui-insights.is-attention li > .fa { background: var(--ui-warning-soft); color: var(--ui-warning); }
.ui-insights.is-positive li > .fa { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-insights li strong { font-weight: 700; }

.ui-trend-list { list-style: none; margin: 0; padding: 0; }
.ui-trend-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem 8.75rem;
  align-items: center;
  gap: .75rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--ui-border);
}
.ui-trend-row:last-child { border-bottom: 0; }
.ui-trend-name { font-weight: 600; color: var(--ui-text); font-size: .88rem; }
.ui-trend-name .ui-dot { margin-right: .375rem; }
.ui-trend-sub { display: block; font-size: .74rem; color: var(--ui-text-subtle); font-weight: 500; }
.ui-trend-values { font-size: .8rem; color: var(--ui-text-muted); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.ui-trend-values strong { color: var(--ui-text); font-size: .95rem; }
.ui-trend-row > :last-child { text-align: right; }
.ui-trend-bar { height: 6px; border-radius: 6px; background: var(--ui-neutral-soft); overflow: hidden; margin-top: .35rem; }
.ui-trend-bar > span { display: block; height: 100%; border-radius: 6px; background: var(--dot, var(--ui-primary)); }
@media (max-width: 575.98px) {
  .ui-trend-row { grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .75rem; }
  .ui-trend-row > :last-child { grid-column: 2; }
  .ui-trend-row .ui-trend-values { grid-column: 2; grid-row: 1; }
  .ui-trend-row > .min-w-0 { grid-row: 1 / span 2; }
}

/* lista de igrejas para acompanhamento */
.ui-follow-list { list-style: none; margin: 0; padding: 0; }
.ui-follow-item { padding: .8rem 0; border-bottom: 1px solid var(--ui-border); }
.ui-follow-item:last-child { border-bottom: 0; }
.ui-follow-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
#page-container .ui-follow-name { font-weight: 700; color: var(--ui-text); font-size: .9rem; text-decoration: none; }
#page-container .ui-follow-name:hover { color: var(--ui-primary-text); text-decoration: underline; }
.ui-follow-sector { font-size: .74rem; color: var(--ui-text-subtle); white-space: nowrap; }
.ui-follow-reasons { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }

/* 5.10 Mapa de calor e legenda (divergente azul ↔ vermelho; o número vai na célula) */
.ui-heatmap-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ui-heatmap { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: .78rem; font-variant-numeric: tabular-nums; }
.ui-heatmap th {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ui-text-muted);
  padding: .3rem .4rem;
  text-align: center;
  white-space: nowrap;
}
.ui-heatmap th.ui-heatmap-church, .ui-heatmap td.ui-heatmap-church {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--ui-surface);
  z-index: 1;
  min-width: 150px;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  color: var(--ui-text);
  padding-right: .6rem;
}
.ui-heatmap td.ui-heatmap-cell {
  text-align: center;
  font-weight: 700;
  border-radius: 6px;
  padding: .4rem .35rem;
  min-width: 52px;
  color: var(--ui-text);
}
.ui-heatmap .hm-none, .ui-legend i.hm-none { background: transparent; color: var(--ui-text-subtle); font-weight: 400; }
.ui-heatmap .hm-down2, .ui-legend i.hm-down2 { background: #f4a9a8; color: #6b1414; }
.ui-heatmap .hm-down1, .ui-legend i.hm-down1 { background: #fbd5d4; color: #7f1d1d; }
.ui-heatmap .hm-flat, .ui-legend i.hm-flat { background: #f0efec; color: #2b2b29; }
.ui-heatmap .hm-up1, .ui-legend i.hm-up1 { background: #cde2fb; color: #0d366b; }
.ui-heatmap .hm-up2, .ui-legend i.hm-up2 { background: #86b6ef; color: #0d2a52; }
.ui-legend { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .74rem; color: var(--ui-text-muted); margin-top: .75rem; }
.ui-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.ui-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin-right: .25rem; }
.ui-legend i.hm-none { border: 1px dashed var(--ui-border-strong); }

/* barra de âncoras */
.ui-anchor-bar {
  position: sticky;
  top: calc(var(--hdr-h) + 8px);
  z-index: 5;
  display: flex;
  gap: .375rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: .375rem;
  margin: 0 0 1rem;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  box-shadow: var(--ui-shadow);
}
.ui-anchor-bar::-webkit-scrollbar { display: none; }
#page-container .ui-anchor-bar a {
  flex: none;
  padding: .375rem .75rem;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ui-text-muted);
  text-decoration: none;
  white-space: nowrap;
}
#page-container .ui-anchor-bar a:hover { background: var(--ui-neutral-soft); color: var(--ui-text); }
#page-container .ui-anchor-bar a.is-active { background: var(--ui-primary); color: #fff; }
.ui-anchor-target { scroll-margin-top: calc(var(--hdr-h) + 72px); }

/* controle segmentado e ações rápidas */
.ui-segmented { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--ui-neutral-soft); gap: 2px; }
.ui-segmented button {
  border: 0;
  background: transparent;
  color: var(--ui-text-muted);
  font-size: .78rem;
  font-weight: 600;
  padding: .3rem .75rem;
  border-radius: 8px;
}
.ui-segmented button.active { background: var(--ui-surface); color: var(--ui-text); box-shadow: var(--ui-shadow); }
.ui-quick-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* --------------------------------------------------------------------------
   6. Lançamento (marcação dos partials; vence o CSS do partial por especificidade)
   -------------------------------------------------------------------------- */
.launch-page .launch-section-grid > [class*="col-"] { margin-bottom: .25rem; }
.launch-page .launch-qty {
  display: grid;
  grid-template-columns: 44px minmax(3.25rem, 1fr) 44px;
  align-items: center;
  gap: 0;
  height: 52px;
  max-width: 200px;
  padding: 3px;
  border: 1px solid var(--ui-border-strong);
  border-radius: 14px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
  transition: border-color var(--ui-dur), box-shadow var(--ui-dur);
}
.launch-page .launch-qty:focus-within { border-color: var(--ui-primary); box-shadow: var(--ui-focus); }
.launch-page .launch-qty .launch-qty-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  box-shadow: none;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  transition: background-color var(--ui-dur), opacity var(--ui-dur), transform .1s;
}
.launch-page .launch-qty [data-step="-1"] { background: var(--ui-primary-soft); color: var(--ui-primary-text); }
.launch-page .launch-qty [data-step="-1"]:hover { background: var(--ui-primary-soft-2); }
.launch-page .launch-qty [data-step="1"] { background: var(--ui-primary); color: #fff; }
.launch-page .launch-qty [data-step="1"]:hover { background: var(--ui-primary-hover); }
.launch-page .launch-qty .launch-qty-btn:active:not(:disabled) { transform: scale(.94); }
.launch-page .launch-qty .launch-qty-btn:focus-visible { box-shadow: var(--ui-focus); }
.launch-page .launch-qty.is-zero [data-step="-1"] { opacity: .4; }
#page-container .launch-page .launch-qty .launch-qty-input {
  width: 100%;
  min-width: 0;
  height: 44px;
  min-height: 0 !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  font-size: 1.5rem !important;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ui-text);
  -moz-appearance: textfield;
}
#page-container .launch-page .launch-qty .launch-qty-input:focus { box-shadow: none; outline: 0; }
#page-container .launch-page .launch-qty.is-zero .launch-qty-input { color: var(--ui-text-subtle); }
#page-container .launch-page .launch-qty .launch-qty-input[readonly] { background: transparent; }
.launch-qty-input::-webkit-outer-spin-button, .launch-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.launch-qty-input.bump { animation: cjm-bump .16s var(--ui-ease); }
@keyframes cjm-bump { 50% { transform: scale(1.14); } }
.launch-page .launch-qty--disabled { opacity: .5; }
.launch-page .launch-qty--disabled .launch-qty-btn,
.launch-page .launch-qty--disabled .launch-qty-input { opacity: 1; pointer-events: none; }
@media (max-width: 575.98px) {
  .launch-page .launch-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 168px;
    align-items: center;
    column-gap: .75rem;
    padding: .625rem 0;
    margin: 0;
    border-bottom: 1px solid var(--ui-border);
  }
  .launch-page .launch-field > .form-label { margin: 0; font-size: .9375rem; font-weight: 600; }
  .launch-page .launch-field .launch-qty { width: 168px; max-width: none; }
  .launch-section-grid > [class*=col-]:last-child .launch-field { border-bottom: 0; }
  .launch-page.launch-stacked .launch-field { display: block; border: 0; padding: 0; margin-bottom: 1rem; }
  .launch-page.launch-stacked .launch-field > .form-label { margin-bottom: .375rem; }
}
.launch-page #launchSubtotal { color: var(--ui-primary-text); letter-spacing: -.02em; }

/* faixa da data do lançamento */
.launch-date-banner {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .9rem 1rem;
  border-radius: var(--ui-radius);
  background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-strong));
  color: #fff;
  box-shadow: var(--ui-shadow-md);
}
.launch-date-banner-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.launch-date-banner-label { font-size: .75rem; opacity: .85; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.launch-date-banner-value { font-size: 1.1rem; font-weight: 700; text-transform: capitalize; }
#page-container .launch-date-banner .btn { background: rgba(255, 255, 255, .16); border-color: transparent; color: #fff; box-shadow: none; }
#page-container .launch-date-banner .btn:hover { background: rgba(255, 255, 255, .26); color: #fff; }
@media (max-width: 575.98px) {
  .launch-date-banner { gap: .7rem; padding: .8rem .85rem; }
  .launch-date-banner-icon { width: 40px; height: 40px; font-size: 1.05rem; }
  .launch-date-banner-value { font-size: 1rem; }
}

/* auxiliares travados no lançamento */
.launch-aux-locked {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .75rem .9rem;
  border: 1px dashed var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-muted);
  margin-bottom: .35rem;
}
.launch-aux-locked-value {
  min-width: 3rem;
  height: 3rem;
  padding: 0 .5rem;
  border-radius: 12px;
  background: var(--ui-primary-soft);
  color: var(--ui-primary-text);
  font-size: 1.4rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.launch-aux-locked-text { font-size: .82rem; color: var(--ui-text-muted); line-height: 1.45; }
.launch-aux-locked.is-empty { border-color: var(--ui-danger-border); background: var(--ui-danger-soft); }
.launch-aux-locked.is-empty .launch-aux-locked-value { background: var(--ui-danger-soft); color: var(--ui-danger); }
.launch-aux-locked.is-empty .launch-aux-locked-text { color: var(--ui-danger-text); }

/* 6.2 Datas pendentes */
.pending-grid .pending-date-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  height: 100%;
  min-height: 64px;
  padding: .625rem .75rem;
  border: 1px solid var(--ui-border-strong);
  border-radius: 12px;
  background: var(--ui-surface);
  color: var(--ui-text);
  text-align: left;
  white-space: normal;
  box-shadow: var(--ui-shadow-sm);
}
.pending-grid .pending-date-btn:hover, .pending-grid .pending-date-btn:focus {
  border-color: var(--ui-primary);
  background: var(--ui-primary-soft);
  color: var(--ui-text);
}
.pending-grid .pending-date-weekday {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ui-text-subtle);
  opacity: 1;
}
.pending-grid .pending-date-day { font-size: 1.125rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pending-grid .pending-date-year { font-size: var(--fs-xs); color: var(--ui-text-muted); }
.pending-grid .pending-date-btn.is-oldest,
.pending-grid .pending-date-btn.is-oldest:focus { background: var(--ui-primary); border-color: var(--ui-primary); color: #fff; }
.pending-grid .pending-date-btn.is-oldest:hover { background: var(--ui-primary-hover); border-color: var(--ui-primary-hover); color: #fff; }
.pending-grid .pending-date-btn.is-oldest .pending-date-weekday,
.pending-grid .pending-date-btn.is-oldest .pending-date-year { color: rgba(255, 255, 255, .8); }
/* celular: cartões estreitos (3 por linha); menos respiro lateral e data um pouco menor para caber "25/10/2026" inteira */
@media (max-width: 575.98px) {
  .pending-grid .pending-date-btn { padding: .5rem .375rem; font-size: .75rem; letter-spacing: -.01em; }
}
@media (max-width: 374.98px) {
  .pending-grid .pending-date-btn { padding-left: .25rem; padding-right: .25rem; font-size: .7rem; }
}
@media (max-width: 339.98px) {
  .pending-grid .pending-date-btn { padding-left: .2rem; padding-right: .2rem; font-size: .65rem; }
}
.pending-date-tag {
  margin-top: 2px;
  padding: .1rem .4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* 6.3 Cancelar reunião (o JS do partial põe .btn-outline-danger no estado ativo) */
.launch-page #cancelMeetingBtn {
  min-height: 48px;
  white-space: normal;
  background: var(--ui-danger-soft);
  border: 1px solid var(--ui-danger-border);
  border-radius: 10px;
  color: var(--ui-danger-text);
  font-weight: 600;
  box-shadow: none;
  filter: none;
}
.launch-page #cancelMeetingBtn:hover { box-shadow: inset 0 0 0 1px var(--ui-danger-border); }
.launch-page #cancelMeetingBtn::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: "\f05e";
  margin-right: .25rem;
}
.launch-page #cancelMeetingBtn.btn-outline-danger {
  background: var(--ui-danger-solid) !important;
  border-color: var(--ui-danger-solid);
  color: #fff !important;
}
.launch-page #cancelMeetingBtn.btn-outline-danger::before { content: "\f0e2"; }
.launch-page .card:has(#cancelMeetingBtn.btn-outline-danger) { background: var(--ui-danger-soft); border-color: var(--ui-danger-border); }

/* 6.4 Aviso de Auxiliares */
#page-container .launch-aux-notice {
  background: var(--ui-info-soft) !important;
  color: var(--ui-info-text) !important;
  border: 1px solid var(--ui-info-border) !important;
  border-radius: 10px;
  padding: .75rem .875rem;
  font-size: .82rem;
  line-height: 1.5;
  box-shadow: none;
}
#page-container .launch-aux-notice .launch-aux-notice-header { color: inherit; font-size: .85rem; margin-bottom: .5rem; }
#page-container .launch-aux-notice .launch-aux-notice-list { list-style: none; padding-left: 0; }
#page-container .launch-aux-notice .launch-aux-notice-list li { position: relative; padding-left: 1.25rem; margin-bottom: .375rem; }
#page-container .launch-aux-notice .launch-aux-notice-list li:last-child { margin-bottom: 0; }
#page-container .launch-aux-notice .launch-aux-notice-list li::before {
  content: "\f00c";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  top: .15rem;
  font-size: .7rem;
}

/* 6.5 Acréscimos */
#page-container .launch-page select[data-yesno].is-yes {
  border-color: var(--ui-success-border);
  background-color: var(--ui-success-soft);
  color: var(--ui-success-text);
  font-weight: 600;
}
.launch-sticky-total {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  z-index: 1029;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 1rem;
  border-radius: 14px;
  background: var(--brand-900);
  color: #fff;
  box-shadow: var(--ui-shadow-lg);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: opacity .2s, transform .2s;
}
.launch-sticky-total strong { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.launch-sticky-total.is-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }
#page-container:not(.has-bottom-nav) .launch-sticky-total { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 768px) { .launch-sticky-total { display: none; } }
@media (max-width: 767.98px) { .launch-page.has-sticky-total { padding-bottom: 72px; } }
abbr[title] { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
.ui-abbr-legend { padding: .5rem var(--ui-card-pad) .75rem; font-size: var(--fs-xs); line-height: 1.5; color: var(--ui-text-muted); }

/* --------------------------------------------------------------------------
   7. Relatórios: cartão móvel
   -------------------------------------------------------------------------- */
.mob-card {
  margin-bottom: .75rem;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  overflow: hidden;
}
.mob-card-header { display: flex; align-items: center; gap: .75rem; min-height: 60px; padding: .875rem 1rem; cursor: pointer; }
.mob-card-header:active { background: var(--ui-surface-muted); }
.mob-card-name { font-size: var(--fs-md); font-weight: 700; line-height: 1.25; color: var(--ui-text); }
.mob-card-date, .mob-card-sub { font-size: var(--fs-xs); color: var(--ui-text-muted); }
.mob-card-total {
  margin-left: auto;
  text-align: right;
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ui-primary-text);
}
.mob-card-total small {
  display: block;
  margin-top: 2px;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ui-text-subtle);
}
.mob-card-chevron { color: var(--ui-text-subtle); transition: transform .2s; }
.mob-card.open .mob-card-chevron { transform: rotate(180deg); }
.mob-card .mob-card-detail { display: none; }
.mob-card.open .mob-card-detail { display: block; }
.mob-card.open .mob-card-body { max-height: none; }
.mob-card-detail { border-top: 1px solid var(--ui-border); padding: .75rem 1rem 1rem; }
.detail-section-title {
  margin: .75rem 0 .375rem;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ui-text-muted);
}
.detail-row {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  padding: .375rem 0;
  border-bottom: 1px solid var(--ui-border);
  font-size: var(--fs-base);
}
.detail-label { color: var(--ui-text-muted); }
.detail-value { font-weight: 600; color: var(--ui-text); }
.detail-events { display: grid; grid-template-columns: 1fr 1fr; gap: .375rem; }
.detail-groups { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 339.98px) { .detail-groups { grid-template-columns: 1fr; } }
.detail-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .75rem;
  padding: .625rem .875rem;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-primary-soft);
  font-weight: 700;
  color: var(--ui-text);
}
.detail-total .detail-value { font-size: 1.25rem; font-weight: 800; color: var(--ui-primary-text); }
.mob-card-no-data {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  height: 22px;
  padding: 0 .55rem;
  border: 1px solid var(--ui-warning-border);
  border-radius: 999px;
  background: var(--ui-warning-soft);
  color: var(--ui-warning-text);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}

/* 7.1 Tabelas dos relatórios Resumo e Analítico (.rpt-table): cabeçalho em dois níveis,
   1ª coluna e Total fixos. Antes repetido no css_after das duas telas. */
/* Tabela do relatório: cabeçalho em dois níveis, 1ª coluna e Total fixos */
.rpt-table { font-size: var(--fs-sm); }
#page-container .rpt-table > thead > tr > th { text-align: center; vertical-align: bottom; padding: .5rem .4rem; }
#page-container .rpt-table > thead > tr:not(.ui-col-group) > th { font-size: .66rem; letter-spacing: .03em; }
#page-container .rpt-table > thead > tr.ui-col-group > th { padding-top: .55rem; padding-bottom: .45rem; }
#page-container .rpt-table > thead > tr.ui-col-group > th .ui-dot { margin: -2px .3rem 0 0; }
#page-container .rpt-table > thead > tr.ui-col-group > th[rowspan] {
  background-color: var(--ui-surface-muted);
  color: var(--ui-text-muted);
  font-size: .7rem;
  vertical-align: bottom;
  border-bottom: 1px solid var(--ui-border-strong);
}
#page-container .rpt-table > thead > tr.ui-col-group > th.col-church { text-align: left; }
#page-container .rpt-table > thead > tr.ui-col-group > th.col-total {
  background: linear-gradient(var(--ui-primary-soft), var(--ui-primary-soft)), var(--ui-surface-muted);
  color: var(--ui-primary-text);
}
/* 2ª linha do cabeçalho: a 1ª e a última coluna de verdade estão na 1ª linha (rowspan) */
#page-container .rpt-table.ui-sticky-first > thead > tr:not(.ui-col-group) > th:first-child,
#page-container .rpt-table.ui-sticky-last > thead > tr:not(.ui-col-group) > th:last-child {
  position: relative;
  left: auto;
  right: auto;
  z-index: auto;
  box-shadow: none;
  background-color: var(--ui-surface-muted);
}
/* setas de ordenação compactas (as 15 colunas cabem em 1440px) */
#page-container .rpt-table.dataTable > thead > tr > th.sorting,
#page-container .rpt-table.dataTable > thead > tr > th.sorting_asc,
#page-container .rpt-table.dataTable > thead > tr > th.sorting_desc { padding-right: 1.05rem; }
#page-container .rpt-table.dataTable > thead > tr.ui-col-group > th:not([rowspan]) { padding-right: .4rem; }
#page-container .rpt-table.dataTable > thead .sorting::before,
#page-container .rpt-table.dataTable > thead .sorting_asc::before,
#page-container .rpt-table.dataTable > thead .sorting_desc::before { right: .5rem; font-size: .7rem; bottom: .6em; }
#page-container .rpt-table.dataTable > thead .sorting::after,
#page-container .rpt-table.dataTable > thead .sorting_asc::after,
#page-container .rpt-table.dataTable > thead .sorting_desc::after { right: .15rem; font-size: .7rem; bottom: .6em; }

#page-container .rpt-table > tbody > tr > td,
#page-container .rpt-table > tfoot > tr > td { text-align: center; }
#page-container .rpt-table .col-church { min-width: 180px; max-width: 250px; text-align: left; }
.rpt-table .rpt-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.rpt-table a.rpt-name { color: var(--ui-primary-text); text-decoration: none; }
.rpt-table a.rpt-name:hover { text-decoration: underline; }
.rpt-table .rpt-meta { display: flex; align-items: center; gap: .375rem; margin-top: .25rem; min-width: 0; }
.rpt-table .rpt-reason {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-xs);
  color: var(--ui-text-muted);
}
#page-container .rpt-table td.col-total { font-size: var(--fs-base); font-weight: 800; color: var(--ui-text); }
#page-container .rpt-table tfoot td.col-church { font-weight: 700; color: var(--ui-text); }
/* zebra e hover também nas colunas fixas (o fundo opaco delas cobre o efeito do Bootstrap) */
#page-container .rpt-table > tbody > tr > td:first-child {
  background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg));
}
#page-container .rpt-table.ui-sticky-last > tbody > tr > td.col-total {
  background-color: var(--ui-surface);
  background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg)), linear-gradient(var(--ui-primary-soft), var(--ui-primary-soft));
}
.rpt-table .rpt-ev .fa-check { color: var(--ui-success); }
.rpt-table .rpt-ev .fa-minus { color: var(--ui-text-faint); }
/* zero é dado real (tom legível); "—" (sem lançamento) fica apagado e leve */
#page-container .rpt-table td.is-zero { color: var(--ui-text-subtle); }
#page-container .rpt-table td.col-total.is-zero { color: var(--ui-text-subtle); font-weight: 400; }
#page-container .rpt-table td.is-empty,
#page-container .rpt-table td.col-total.is-empty { color: var(--ui-text-faint); font-weight: 400; }

/* --------------------------------------------------------------------------
   8. Acesso e agenda pública
   -------------------------------------------------------------------------- */
.cjm-auth { position: relative; min-height: 100vh; background: var(--ui-bg); font-family: var(--ui-font); color: var(--ui-text); }
.cjm-auth-band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 38vh;
  min-height: 220px;
  background: linear-gradient(160deg, var(--brand-700), var(--brand-900));
}
.cjm-auth-card {
  position: relative;
  z-index: 1;
  max-width: 400px;
  margin: clamp(1.5rem, 10vh, 6rem) auto 2rem;
  padding: 2rem 1.75rem;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-lg);
}
@media (max-width: 575.98px) { .cjm-auth-card { margin: 1.5rem 1rem; padding: 1.5rem 1.25rem; } }
.cjm-auth-logo { display: block; width: 120px; height: auto; margin: 0 auto 1rem; }
.cjm-auth-brand { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.cjm-auth-title { margin: 0; text-align: center; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; color: var(--ui-text); }
.cjm-auth-sub { margin: .25rem 0 1.5rem; text-align: center; font-size: .82rem; color: var(--ui-text-muted); }
.cjm-auth .form-control, .cjm-auth .btn, #page-container .cjm-auth .form-control { min-height: 48px; }
.cjm-auth .form-control, #page-container .cjm-auth .form-control {
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
  background-color: var(--ui-surface);
  color: var(--ui-text);
}
.cjm-auth .form-control:focus, #page-container .cjm-auth .form-control:focus { border-color: var(--ui-primary); box-shadow: var(--ui-focus); }
.cjm-auth .form-control.is-invalid, .cjm-auth .form-control.is-invalid:focus,
#page-container .cjm-auth .form-control.is-invalid, #page-container .cjm-auth .form-control.is-invalid:focus { border-color: var(--ui-danger); }
.cjm-auth .form-control.is-invalid:focus, #page-container .cjm-auth .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .18); }
.cjm-auth-actions { display: flex; gap: .5rem; }
.cjm-auth-actions .btn-primary { flex: 1; }

.cjm-public-top { padding: 1.25rem 1rem 3rem; background: linear-gradient(160deg, var(--brand-700), var(--brand-900)); color: #fff; }
.cjm-public-logo { display: inline-flex; background: #fff; border-radius: 12px; padding: .5rem .75rem; }
.cjm-public-shell { max-width: 960px; margin: -2rem auto 0; padding: 0 1rem 2rem; position: relative; }
.cjm-month-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--ui-border);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ui-text);
}
.cjm-events td { font-size: .875rem; }
@media (max-width: 767.98px) { .cjm-events td { font-size: .8125rem; } }
.ev-date { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ev-weekday {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ui-text-subtle);
}
.ev-meeting { font-weight: 600; }
tr.is-past { opacity: .55; }
tr.is-next > * { background-color: var(--ui-primary-soft); }

/* --------------------------------------------------------------------------
   9. Impressão e movimento reduzido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  #sidebar, #page-header, .cjm-bottom-nav, .launch-sticky-total { display: none !important; }
  #page-container #main-container > .bg-body-light:not(.hero-plain) { background: #fff !important; color: #000; border-bottom: 1px solid #ccc; }
  #page-container #main-container > .bg-body-light:not(.hero-plain) h1,
  #page-container #main-container > .bg-body-light:not(.hero-plain) p,
  #page-container #main-container > .bg-body-light:not(.hero-plain) .text-muted,
  #page-container #main-container > .bg-body-light:not(.hero-plain) small,
  #page-container #main-container > .bg-body-light:not(.hero-plain) .fs-sm,
  #page-container #main-container > .bg-body-light:not(.hero-plain) strong { color: #000 !important; }
  #page-container #main-container { padding-top: 0 !important; }
}

/* Exportar um bloco para PDF (CJMUI.printBlock / [data-ui-print]): na tela nada muda */
.ui-print-heading { display: none; }
@media print {
  body.ui-print-scope .ui-print-hide,
  body.ui-print-scope .ui-print-target .ui-no-print,
  body.ui-print-scope .ui-print-target [data-ui-print] { display: none !important; }
  body.ui-print-scope,
  body.ui-print-scope #page-container,
  body.ui-print-scope #main-container,
  body.ui-print-scope #main-container > .content {
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
  }
  body.ui-print-scope .ui-print-target {
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body.ui-print-scope .ui-print-target * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.ui-print-scope .ui-print-target .ui-heatmap-wrap,
  body.ui-print-scope .ui-print-target .table-responsive,
  body.ui-print-scope .ui-print-target .ui-scroll-host { overflow: visible !important; }
  body.ui-print-scope .ui-print-target .ui-scroll-host::after { display: none !important; }
  body.ui-print-scope .ui-print-target tr { break-inside: avoid; page-break-inside: avoid; }
  body.ui-print-scope .ui-print-target thead { display: table-header-group; }
  body.ui-print-scope .ui-print-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #3e578d;
    color: #1b2433;
  }
  body.ui-print-scope .ui-print-heading strong { font-size: 16px; font-weight: 800; }
  body.ui-print-scope .ui-print-heading span { font-size: 11px; color: #4f5a6b; }
}