.app-sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.ui-sidebar {
  background: linear-gradient(180deg, #111827 0%, #1f2937 100%);
  border-right: 1px solid rgba(255, 255, 255, .08);
}

.ui-navbar {
  min-height: 3.75rem;
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 .2rem .8rem rgba(0, 0, 0, .03);
  backdrop-filter: blur(10px);
}

.ui-navbar .nav-link {
  color: #4b5563;
}

.ui-nav-action {
  width: 2.35rem;
  height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .8rem;
  background: #f3f4f6;
  border: 1px solid rgba(0, 0, 0, .05);
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.ui-nav-action:hover {
  background: #e5e7eb;
  color: #111827;
}

/* Trilha "seção › tela" ao lado do botão da barra lateral. Abaixo de 768 px a
   seção some e, com ela, o divisor que sobraria antes do nome da tela. */
.ui-breadcrumb {
  min-width: 0;
  margin-left: var(--space-3);
}

.ui-breadcrumb .breadcrumb {
  --bs-breadcrumb-divider: "›";
  flex-wrap: nowrap;
  font-size: var(--fs-sm);
}

.ui-breadcrumb .breadcrumb-item {
  color: var(--ui-text-muted);
}

.ui-breadcrumb .breadcrumb-item.active {
  color: var(--ui-text);
  font-weight: var(--fw-semibold);
}

@media (max-width: 767.98px) {
  .ui-breadcrumb .breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
  }

  .ui-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: none;
  }
}

.ui-tenant-name {
  margin-right: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--ui-text-2);
}

.ui-user-toggle {
  padding: .35rem .7rem !important;
  border-radius: .9rem;
  background: var(--ui-surface-2);
  border: 1px solid rgba(0, 0, 0, .05);
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.ui-user-toggle:hover {
  background: #eef0f3;
}

.ui-user-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
}

.ui-user-menu {
  width: 17.5rem;
  padding: .55rem;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 1.2rem;
  background: #fff;
  box-shadow: 0 1rem 2.2rem rgba(15, 23, 42, .12);
  overflow: hidden;
}

.ui-user-header {
  border-radius: 1rem;
  padding-top: .95rem !important;
  padding-bottom: .95rem !important;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, .08), transparent 28%),
    linear-gradient(180deg, #374151 0%, #1f2937 100%);
}

.ui-user-hero {
  display: grid;
  justify-items: center;
  gap: .7rem;
  padding: .15rem .1rem .35rem;
}

.ui-user-photo-icon {
  width: 90px;
  height: 90px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 4.6rem;
  color: rgba(255, 255, 255, .9);
  line-height: 1;
}

.ui-user-copy strong {
  display: block;
  font-size: var(--fs-md);
  font-weight: 800;
  line-height: 1.1;
}

.ui-user-copy small {
  display: block;
  margin-top: .18rem;
  font-size: var(--fs-2xs);
  color: rgba(255, 255, 255, .72);
}

.ui-user-actions .dropdown-item {
  border-radius: .8rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: .68rem .8rem;
}

.ui-user-actions .dropdown-item:hover,
.ui-user-actions .dropdown-item:focus {
  background: #eef0f3;
}

.ui-user-menu > li + li {
  margin-top: .35rem;
}

body.app-loading {
  overflow: hidden;
}

.global-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(244, 246, 249, 0.62);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

body.app-loading .global-loading-overlay,
.global-loading-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
}

.global-loading-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.12);
}

.global-loading-icon {
  font-size: var(--fs-xl);
  color: var(--ui-text-muted);
  animation: spin-loading 900ms linear infinite;
}

@keyframes spin-loading {
  to {
    transform: rotate(360deg);
  }
}

/* O AdminLTE entrega `.app-content` com `padding: 0 .5rem` porque conta com o
   bloco `.app-content-header` (`padding: 1rem .5rem`) logo acima do conteúdo.
   Este produto não usa esse bloco, então o kicker encostava na borda da navbar:
   o ritmo vertical da página passa a vir daqui. */
.app-content {
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}

.page-content {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 180ms ease, transform 180ms ease;
  will-change: opacity, transform;
}

.page-content.is-loading {
  opacity: 0;
  transform: translateY(8px);
}

body.app-loading .page-content {
  opacity: 0;
  transform: translateY(8px);
}

/* Troca de tela: crossfade nativo entre documentos (View Transitions). Cabeçalho
   e barra lateral têm nome próprio e ficam parados enquanto o conteúdo troca.
   Sem suporte do navegador, a navegação segue sem o crossfade. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

.app-header {
  view-transition-name: app-header;
}

.app-sidebar {
  view-transition-name: app-sidebar;
}

::view-transition-group(*) {
  animation-duration: 180ms;
}

/* Detalhe no modal: o conteúdo novo entra com o mesmo fade da página. O HTMX
   marca o que acabou de entrar com `htmx-added` até assentar. */
#modalContent > * {
  transition: opacity 180ms ease;
}

#modalContent > .htmx-added {
  opacity: 0;
}

/* Modal global: altura do detalhe, véu de carregamento e texto do aviso. */
.modal-detail-content {
  min-height: 60vh;
}

.modal-loading-veil {
  background: rgba(255, 255, 255, .35);
  z-index: 10;
}

.modal-loading-spinner {
  width: 3rem;
  height: 3rem;
}

.action-modal-message {
  max-height: 50vh;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.sidebar-wrapper {
    flex: 1;
    overflow-y: auto;
}
.brand-custom {
    height: 104px;
    display: flex;
    align-items: center;        /* centraliza vertical */
    justify-content: center;    /* centraliza horizontal */
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    margin-bottom: .25rem;
}

.logo-img {
    /* 62px = 46px de arte + 2 × 8px de padding. O Bootstrap põe
       `box-sizing: border-box` em tudo, então o padding da plaqueta sai de
       dentro da caixa: com os 46px originais a arte encolhia para 30px. */
    max-height: 62px;
    width: auto;
    /* Plaqueta clara. Logotipo de cliente vem preparado para papel branco --
       JPEG nem tem canal alfa --, e sem plaqueta esse branco virava um
       retângulo solto na barra escura. Com ela o branco passa a ser
       proposital, e arte escura em PNG transparente, que aqui desaparecia,
       também fica legível. Sem `opacity`: acinzentaria a plaqueta. */
    background: var(--dash-surface);
    padding: .5rem .75rem;
    border-radius: .75rem;
}

/* Custom styling to match corporate look */
        .ui-sidebar .nav-sidebar {
          padding: .5rem .75rem .75rem;
        }

        .ui-sidebar .sidebar-menu > .nav-item {
          margin-bottom: .25rem;
        }

        .ui-sidebar .nav-link {
          border-radius: .85rem;
          color: rgba(255, 255, 255, .78);
          padding: .72rem .9rem;
          transition: background-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
        }

        .ui-sidebar .nav-link:hover {
          background: rgba(255, 255, 255, .06);
          color: #fff;
        }

        .ui-sidebar .nav-link.active {
          background: rgba(255, 255, 255, .10);
          color: #fff;
          box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
        }

        .ui-sidebar .nav-icon {
          color: inherit;
          font-size: var(--fs-md);
          opacity: .9;
        }

        .ui-sidebar .nav-link p {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: .5rem;
          margin: 0;
          font-size: var(--fs-sm);
          font-weight: 600;
          line-height: 1.2;
        }

        /* Rótulo de seção: só organiza, não é clicável. */
        .ui-sidebar .nav-header {
          padding: var(--space-4) var(--space-3) var(--space-1);
          font-size: var(--fs-2xs);
          font-weight: var(--fw-bold);
          letter-spacing: .08em;
          text-transform: uppercase;
          color: rgba(255, 255, 255, .55);
        }

        .ui-sidebar .sidebar-menu > .nav-item > .nav-link {
          padding: .58rem .8rem;
          font-size: var(--fs-sm);
          color: rgba(255, 255, 255, .66);
        }

        .ui-sidebar .sidebar-menu > .nav-item > .nav-link.active {
          background: rgba(255, 255, 255, .08);
          color: #fff;
        }

        .ui-sidebar .sidebar-menu > .nav-item > .nav-link:hover {
          background: rgba(255, 255, 255, .05);
        }

        .card-header {
          background-color: transparent;
          border-bottom: 1px solid rgba(0, 0, 0, 0.125);
        }

        /* O AdminLTE dá um `::after` de clearfix ao `.card-header`. Quando o
           cabeçalho vira contêiner flex, esse pseudo-elemento entra como mais
           um item e o `justify-content: space-between` encosta ele — e não o
           botão — na borda direita. */
        .card-header.d-flex::after {
          display: none;
        }

        .brand-link {
          text-decoration: none;
        }

        .sidebar-brand-image {
          opacity: .8;
          max-height: 33px;
        }

        @keyframes pop {
          0% {
            transform: scale(0.6);
            opacity: 0;
          }

          100% {
            transform: scale(1);
            opacity: 1;
          }
        }

        /* ======================================
           DataTables 2 — padrão global
           Baseado no visual nativo BS5/DT 2.x de /listagem-prospectados.
           Info à esquerda + paginação à direita (default BS5).
           ====================================== */

        .dt-container {
          font-size: var(--fs-xs);
        }

        .dt-container .dt-info {
          font-size: var(--fs-xs);
          color: var(--ui-text-muted);
        }

        .dt-container .dt-paging nav {
          display: flex;
          gap: 3px;
          align-items: center;
        }

        body {
          background-color: var(--bg-gray);
          font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }


        /* Tokens do sistema */
        :root {
          --bg-gray: #f4f6f9;

          /* Surface (cards, painéis, hero): border + radius + sombras */
          /* `--dash-surface` fica na raiz, e não em `.dash-page`, porque a
             barra lateral fica fora dela e a plaqueta do logotipo precisa do
             mesmo branco de superfície. */
          --dash-surface: #ffffff;
          --surface-border: 1px solid rgba(0, 0, 0, .06);
          --surface-radius: 1rem;
          --surface-shadow: 0 .3rem .95rem rgba(0, 0, 0, .04);
          --surface-shadow-hover: 0 .65rem 1.4rem rgba(0, 0, 0, .07);

          /* Tints reutilizáveis para chips/badges (background .12, border .18, texto escuro) */
          --tint-yellow-bg: rgba(245, 158, 11, .12);
          --tint-yellow-fg: #7c5a14;
          --tint-gray-bg:   rgba(107, 114, 128, .12);
          --tint-gray-fg:   #374151;
          --tint-blue-bg:   rgba(37, 99, 235, .12);
          --tint-blue-br:   rgba(37, 99, 235, .22);
          --tint-blue-fg:   #1d4ed8;

          /* Escala vigente desde 2026-10-28 (docs/design-tokens.md). Os tokens
             acima continuam válidos; quando o valor coincide, o novo aponta
             para o antigo. */
          --ui-surface: var(--dash-surface);
          --ui-surface-2: #f8f9fa;
          --ui-hover: #eef2f7;
          --ui-border: rgba(0, 0, 0, .06);
          --ui-border-strong: rgba(0, 0, 0, .1);
          --ui-text: #1f2937;
          --ui-text-2: #495057;
          --ui-text-muted: #5c636a;

          --fs-2xs: .68rem;
          --fs-xs: .75rem;
          --fs-sm: .875rem;
          --fs-md: .92rem;
          --fs-lg: 1.15rem;
          --fs-xl: 1.25rem;

          --fw-semibold: 600;
          --fw-bold: 700;
          --fw-heavy: 800;

          --radius-control: .5rem;
          --radius-menu: .75rem;
          --radius-card: var(--surface-radius);

          --shadow-2: var(--surface-shadow);
          --shadow-3: 0 1rem 2.2rem rgba(15, 23, 42, .12);

          --space-1: .25rem;
          --space-2: .5rem;
          --space-3: .75rem;
          --space-4: 1rem;

          --status-green: #198754;
          --status-yellow: #f59e0b;
          --status-red: #dc3545;
          --status-gray: #adb5bd;
          --status-blue: #2563eb;
          --status-purple: #7c3aed;
        }



        .dot {
          width: .55rem;
          height: .55rem;
          border-radius: 50%;
          display: inline-block;
          flex: 0 0 auto;
        }

        .dot-green  { background: var(--status-green); }
        .dot-yellow { background: var(--status-yellow); }
        .dot-red    { background: var(--status-red); }
        .dot-gray   { background: var(--status-gray); }
        .dot-blue   { background: var(--status-blue); }
        .dot-purple { background: var(--status-purple); }

        .pagination .page-link {
          color: #4b5563;
          border: 1px solid #e5e7eb;
          margin: 0 2px;
          border-radius: 6px;
          font-size: var(--fs-xs);
          line-height: 1;
          padding: 4px 9px;
          background: #eef0f3;
        }

        .pagination .page-item.active .page-link {
          background-color: #4b5563;
          border-color: #4b5563;
          color: #fff;
        }

        /* Sombra de rolagem: as camadas brancas rolam com o conteúdo (local) e
           cobrem as sombras presas à borda (scroll); a sombra só aparece do lado
           em que ainda há tabela escondida. Sem rolagem, nada muda no painel branco. */
        .table-responsive {
          background-image:
            linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)),
            linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)),
            radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0)),
            radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0));
          background-position: left center, right center, left center, right center;
          background-repeat: no-repeat;
          background-size: 2.5rem 100%, 2.5rem 100%, .75rem 100%, .75rem 100%;
          background-attachment: local, local, scroll, scroll;
        }

        .table-responsive > .table,
        .table-responsive .dt-container .table {
          --bs-table-bg: transparent;
        }

        /* ==================================================
           Padrão visual compartilhado entre as páginas
           ================================================== */
        .detail-kicker {
          display: inline-flex;
          align-items: center;
          gap: .4rem;
          width: fit-content;
          padding: .35rem .7rem;
          border-radius: 999px;
          background: rgba(108, 117, 125, .08);
          color: var(--ui-text-2);
          font-size: var(--fs-xs);
          font-weight: 700;
          letter-spacing: .02em;
          line-height: 1;
        }

        .detail-name {
          font-size: var(--fs-lg);
          font-weight: 800;
          line-height: 1.1;
          color: var(--ui-text);
          margin: 0;
        }

        .dash-subtitle {
          font-size: var(--fs-xs);
          /* #6c757d dava 4,33:1 sobre o --bg-gray (#f4f6f9) da página, abaixo de
             AA; este dá 5,63:1 ali e 6,09:1 sobre branco. */
          color: var(--ui-text-muted);
          line-height: 1.35;
        }

        .dash-page {
          --dash-bg: #f4f6f9;
          --dash-muted: #6c757d;
          --dash-primary: #0d6efd;
          background: var(--dash-bg);
        }

        .dash-panel,
        .detail-hero {
          border: var(--surface-border);
          border-radius: var(--surface-radius);
          background: #fff;
          box-shadow: var(--surface-shadow);
          overflow: hidden;
        }

        .dash-panel-header {
          padding: 1rem 1rem .75rem;
          border-bottom: 1px solid rgba(0, 0, 0, .06);
          background: linear-gradient(180deg, rgba(248, 249, 250, .95), #fff);
        }

        .dash-panel-title {
          font-size: var(--fs-md);
          font-weight: 800;
          color: var(--ui-text);
          margin: 0;
          line-height: inherit;
        }

        .dash-panel-subtitle,
        .dash-panel-note {
          font-size: var(--fs-xs);
          color: var(--ui-text-muted);
        }

        /* A auditoria já se explica no cabeçalho da página. Evitar um segundo
           cabeçalho no cartão deixa a busca e a trilha visíveis de imediato. */
        .direct-panel-body {
          padding: 1rem;
          border: 0;
          background: transparent;
        }

        @media (min-width: 992px) {
          .direct-panel-body { padding: 1.5rem; }
        }

        /* Corpo de card com tabela: a tabela encosta na borda do card (as células
           .dash-table já têm .9rem de respiro); busca, exportação, info, paginação
           e nota ganham o respiro em volta. */
        .table-panel-body {
          padding: 0;
        }

        /* Sem tabela, o vazio não encosta na borda do card. */
        .table-panel-body > .empty-state {
          margin: var(--space-3);
        }

        /* O gutter-y é o que o DataTables liga abaixo de 768px; ele vira margem nas células. */
        .table-panel-body .dt-container > .row {
          margin-left: 0;
          margin-right: 0;
          --bs-gutter-y: 0;
        }

        .table-panel-body .dt-container > .row > * {
          padding-left: 0;
          padding-right: 0;
        }

        .table-panel-body .dt-container > .row:not(.dt-layout-table) {
          padding: var(--space-3);
        }

        /* Do lado da tabela, o mt-2/mb-2 das linhas já dá .5rem; o padding completa o respiro. */
        .table-panel-body .dt-container > .row:has(~ .dt-layout-table, ~ table) {
          padding-bottom: var(--space-1);
        }

        .table-panel-body .dt-container > .dt-layout-table ~ .row,
        .table-panel-body .dt-container > table ~ .row:not(.dt-layout-table) {
          padding-top: var(--space-1);
        }

        /* Embaixo, o mb-2 da nota já separa da busca. */
        .table-panel-body .table-note {
          padding: var(--space-3) var(--space-3) 0;
        }

        /* Linha sem busca, botão nem paginação não ocupa altura. */
        .table-panel-body .dt-container > .row:not(:has(> * > *)) {
          display: none;
        }

        /* O DataTables 2 põe mt-2 em cada linha e o utilitário não se sobrescreve; a margem
           negativa do contêiner anula a da primeira visível, e a tabela sem busca encosta no topo. */
        .table-panel-body .dt-container:has(> .row.mt-2:first-child) {
          margin-top: calc(-1 * var(--space-2));
        }

        .dash-badge {
          display: inline-flex;
          align-items: center;
          gap: .35rem;
          padding: .28rem .55rem;
          border-radius: 999px;
          background: var(--ui-surface-2);
          color: var(--ui-text-2);
          font-size: var(--fs-xs);
          font-weight: 700;
          border: 1px solid transparent;
          transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
        }

        /* Só a pílula clicável tem borda; a estática a mantém transparente para não mudar de medida. */
        .dash-badge[onclick],
        .dash-badge[role="button"],
        .dash-badge-hover,
        .filter-bar .dash-badge {
          cursor: pointer;
          user-select: none;
          border-color: var(--ui-border-strong);
        }

        .dash-badge[onclick]:hover,
        .dash-badge[role="button"]:hover,
        .dash-badge-hover:hover,
        .filter-bar .dash-badge:hover {
          background: var(--ui-hover);
          border-color: rgba(0, 0, 0, .12);
          color: var(--ui-text);
          transform: translateY(-1px);
          box-shadow: 0 .35rem .9rem rgba(0, 0, 0, .05);
        }

        .dash-badge[onclick]:active,
        .dash-badge[role="button"]:active,
        .dash-badge-hover:active,
        .filter-bar .dash-badge:active {
          transform: translateY(0);
          box-shadow: none;
        }

        /* Filtro ativo: o fundo cheio diz qual status a lista mostra, também sob o cursor. */
        .dash-badge-hover[aria-current="true"],
        .dash-badge-hover[aria-current="true"]:hover {
          background: var(--bs-primary);
          border-color: var(--bs-primary);
          color: #fff;
        }

        /* O ponto azul de "Capturado" sumiria no fundo azul. */
        .dash-badge-hover[aria-current="true"] .dot {
          box-shadow: 0 0 0 2px #fff;
        }

        /* Metadado com ícone (contagem, data, limiar, aviso, legenda): sem caixa, porque não é clicável. */
        .ui-meta {
          display: inline-flex;
          align-items: center;
          gap: .35rem;
          color: var(--ui-text-muted);
          font-size: var(--fs-xs);
          font-weight: var(--fw-semibold);
        }

        /* Componentes do Bootstrap na escala da tela: vinham em 16px (abas,
           interruptor) ou em 9px (.badge é .75em sobre texto já reduzido).
           Abas pelas variáveis do Bootstrap, para manter o :hover e o .disabled dele.
           Sublinhadas (UX-058): a aba de caixa ficava solta acima do card. Numa linha
           só; no celular a faixa rola de lado, e o respiro de cima guarda o anel de foco. */
        .nav-underline {
          --bs-nav-link-color: var(--ui-text-muted);
          --bs-nav-link-hover-color: var(--ui-text);
          --bs-nav-underline-link-active-color: var(--bs-primary);
          --bs-nav-link-font-size: var(--fs-md);
          --bs-nav-link-font-weight: var(--fw-semibold);
          flex-wrap: nowrap;
          overflow-x: auto;
          white-space: nowrap;
          padding: var(--space-1) var(--space-1) 0;
          border-bottom: 1px solid var(--ui-border-strong);
        }

        .form-check-label {
          font-size: var(--fs-sm);
        }

        .badge {
          font-size: var(--fs-xs);
        }

        /* ---- Um padrão só de campo, etiqueta e botão -----------------------
           Os formulários eram Bootstrap cru (campo de 40px, canto de .375rem,
           etiqueta de 16px) enquanto o resto da tela usa tipografia miúda e
           canto de .5rem -- e cada página ainda inventava a sua medida: a
           pesquisa forçava 48px e a consulta por CNPJ 50px. O padrão passa a
           ser definido aqui, uma vez, para todas as telas do shell.
           Login, troca de senha e erro também carregam este arquivo; o que
           diverge deles fica na seção do login, com escopo `.login-form`. */
        .form-label {
          margin-bottom: .3rem;
          font-size: var(--fs-2xs);
          font-weight: 800;
          letter-spacing: .07em;
          text-transform: uppercase;
          color: var(--ui-text-muted);
        }

        .form-control,
        .form-select {
          padding: .35rem .6rem;
          border-color: rgba(0, 0, 0, .1);
          border-radius: var(--radius-control);
          font-size: var(--fs-sm);
          color: var(--ui-text);
        }

        /* A seta do `select` é imagem de fundo do Bootstrap: sem reservar o
           espaço à direita ela fica sobre o texto da opção. */
        .form-select {
          padding-right: 1.85rem;
        }

        .form-text {
          font-size: var(--fs-xs);
        }

        /* Etiqueta-addon dos filtros: mesma tipografia miúda das etiquetas dos
           cartões, para o filtro pertencer ao mesmo sistema. */
        .input-group-text {
          padding: .35rem .6rem;
          background: var(--ui-surface-2);
          border-color: rgba(0, 0, 0, .1);
          color: var(--ui-text-muted);
          font-size: var(--fs-2xs);
          font-weight: 800;
          letter-spacing: .07em;
          text-transform: uppercase;
        }

        /* `.dash-action-btn` vem depois no arquivo e mantém a própria medida
           para os botões de ícone das tabelas. */
        .btn {
          padding: .35rem .75rem;
          border-radius: var(--radius-control);
          font-size: var(--fs-sm);
        }

        /* 44px é requisito de alvo de toque; no mouse só engordava o controle,
           então vale onde o ponteiro é grosso. No desktop os controles ficam
           em ~31px, acima do mínimo de 24px da WCAG 2.5.8. */
        @media (pointer: coarse) {
          .form-control,
          .form-select,
          .input-group-text,
          .btn {
            min-height: 44px;
          }

          .pagination .page-link {
            min-width: 44px;
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
          }
        }

        .filter-bar {
          display: flex;
          flex-wrap: wrap;
          align-items: end;
          gap: .5rem;
        }

        .filter-bar > .btn {
          font-weight: 700;
          letter-spacing: .02em;
        }

        .filter-field .form-label {
          display: block;
          margin-bottom: .25rem;
        }

        .filter-field .form-control {
          width: 11rem;
          border-radius: var(--radius-control);
        }

        .filter-field .form-select {
          /* Largura do texto mais longo, entre 10rem e 13rem: com o texto-base de 14 px,
             "Todos os vendedores" não cabia em 10rem; as seis caixas de Relatórios e o
             Aplicar continuam numa linha a 1440 px. */
          width: auto;
          min-width: 10rem;
          max-width: 13rem;
          border-radius: var(--radius-control);
        }

        .date-field .form-control { width: 10.5rem; }

        /* Abaixo de 576px os campos não caberiam na mesma linha: cada grupo
           ocupa a barra inteira e os campos dividem o espaço. */
        @media (max-width: 575.98px) {
          .filter-bar,
          .filter-field {
            width: 100%;
          }

          .filter-field .form-control,
          .filter-field .form-select {
            width: 100%;
          }

          .filter-bar > .btn {
            width: 100%;
          }
        }

        .dashboard-period-badges {
          display: flex;
          flex-wrap: wrap;
          gap: .5rem;
        }

        @media (min-width: 992px) {
          .dashboard-period-badges {
            justify-content: flex-end;
          }
        }

        .dash-table {
          font-size: var(--fs-sm);
          margin-bottom: 0;
          border-collapse: separate;
          border-spacing: 0;
        }

        .dash-table thead th {
          font-size: var(--fs-2xs);
          text-transform: uppercase;
          letter-spacing: .05em;
          color: var(--ui-text-muted);
          font-weight: 800;
          border-top: 0;
          border-bottom: 1px solid rgba(0, 0, 0, .07);
          background: var(--ui-surface-2);
          padding: .85rem .9rem;
          vertical-align: middle;
        }

        .dash-table tbody td {
          padding: .8rem .9rem;
          border-color: rgba(0, 0, 0, .05);
          color: var(--ui-text);
          vertical-align: middle;
        }

        .dash-table tbody tr {
          transition: background-color .15s ease, box-shadow .15s ease;
        }

        .dash-table tbody tr:last-child td {
          border-bottom-color: rgba(0, 0, 0, .05);
        }

        .dash-table tfoot th {
          padding: .85rem .9rem;
          border-top: 1px solid rgba(0, 0, 0, .08);
          border-bottom: 0;
          background: var(--ui-surface-2);
          color: var(--ui-text-2);
          font-size: var(--fs-xs);
          font-weight: 800;
          vertical-align: middle;
        }

        .dash-table td.text-end,
        .dash-table th.text-end,
        .dash-table td.text-center,
        .dash-table th.text-center {
          font-variant-numeric: tabular-nums;
          white-space: nowrap;
        }

        .dash-table .seller-name {
          font-size: var(--fs-sm);
          font-weight: 700;
          color: var(--ui-text);
        }

        .dash-table .dash-panel-note {
          margin-top: .15rem;
          font-size: var(--fs-xs);
        }

        .dash-table .dash-badge {
          padding: .24rem .5rem;
          font-size: var(--fs-2xs);
          line-height: 1;
        }

        /* Abaixo de 576px, metade do respiro lateral das células: Capturas cabe em 390px. */
        @media (max-width: 575.98px) {
          .dash-table thead th,
          .dash-table tbody td,
          .dash-table tfoot th {
            padding-left: .4rem;
            padding-right: .4rem;
          }
        }

        .dash-stat-label {
          /* É a etiqueta que dá sentido ao número; a .62rem ficava em 9,92px. */
          font-size: var(--fs-2xs);
          font-weight: 800;
          letter-spacing: .09em;
          text-transform: uppercase;
          color: var(--ui-text-muted);
        }

        .dash-stat-value {
          font-size: var(--fs-xl);
          font-weight: 800;
          line-height: 1;
          letter-spacing: -.02em;
          color: var(--ui-text);
          /* Valores em R$ longos quebram dentro do card em vez de estourar a coluna. */
          overflow-wrap: anywhere;
        }

        /* "Itens distribuídos" quebra em duas linhas e empurrava só aquele
           número para baixo, desalinhando a fileira. Reservar as duas linhas
           mantém os cinco valores na mesma base. */
        .dashboard-stat-grid .dash-stat-label {
          min-height: 2.1rem;
        }

        .dash-stat-note,
        .table-note {
          font-size: var(--fs-xs);
          color: var(--ui-text-muted);
        }

        .dash-stat-card {
          position: relative;
          overflow: hidden;
          border: var(--surface-border);
          border-radius: var(--surface-radius);
          background: #fff;
          box-shadow: var(--surface-shadow);
          transition: transform .16s ease, box-shadow .16s ease;
        }

        a.dash-stat-card:hover {
          transform: translateY(-2px);
          box-shadow: var(--surface-shadow-hover);
        }

        .dash-stat-card::before {
          content: "";
          display: block;
          height: 4px;
          background: var(--dash-accent, transparent);
        }

        /* Faixa do card de indicador: só existe quando o número é de um status, na cor do status. */
        .dash-stat-card.tone-green  { --dash-accent: var(--status-green); }
        .dash-stat-card.tone-yellow { --dash-accent: var(--status-yellow); }
        .dash-stat-card.tone-red    { --dash-accent: var(--status-red); }
        .dash-stat-card.tone-gray   { --dash-accent: var(--status-gray); }
        .dash-stat-card.tone-blue   { --dash-accent: var(--status-blue); }
        .dash-stat-card.tone-purple { --dash-accent: var(--status-purple); }

        /* Abaixo de 768px, o último card de uma grade ímpar ocupa a linha inteira. */
        @media (max-width: 767.98px) {
          .row > .col-6:last-child:nth-child(odd):has(> .dash-stat-card) { flex: 0 0 100%; }
        }

        @media (min-width: 1200px) {
          .dashboard-main-grid {
            min-height: 0;
          }

          .dashboard-main-grid > [class*="col-"] {
            display: flex;
          }
        }

        .dashboard-chart-panel {
          display: flex;
          flex-direction: column;
          width: 100%;
          min-height: 0;
        }

        /* `flex-basis: 0` com `min-height: 0` anulava o tamanho mínimo de
           conteúdo, e nada na cadeia até a linha do grid define altura: o corpo
           encolhia a 32px (só o padding) e o painel, que tem `overflow: hidden`,
           cortava os 288px do gráfico e a mensagem de período vazio. */
        .dashboard-chart-body {
          flex: 1 1 auto;
          min-height: auto;
        }

        .dashboard-sellers-panel {
          display: flex;
          flex-direction: column;
          width: 100%;
          min-height: 0;
        }

        .dashboard-compact-table {
          font-size: var(--fs-xs);
        }

        .dashboard-compact-table .seller-name {
          font-size: var(--fs-sm);
        }

        .dashboard-compact-table tbody td {
          padding: .65rem .75rem;
        }

        .dash-chart-wrap {
          flex: 1 1 auto;
          min-height: 18rem;
          max-height: 21rem;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: .5rem;
        }

        .dash-chart-canvas {
          width: 100% !important;
          height: 100% !important;
          max-width: 100% !important;
          max-height: 100% !important;
        }

        .seller-avatar {
          width: 2.75rem;
          height: 2.75rem;
          border-radius: 50%;
          overflow: hidden;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          background: var(--ui-hover);
          border: 1px solid rgba(0, 0, 0, .08);
          color: var(--ui-text-2);
          font-size: var(--fs-xs);
          font-weight: 800;
          letter-spacing: .03em;
          flex: 0 0 auto;
        }

        .seller-avatar img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }

        .seller-name {
          line-height: 1.1;
        }

        .seller-name span {
          display: block;
        }

        .dash-soft-bg {
          background:
            radial-gradient(circle at top left, rgba(31, 41, 55, .06), transparent 32%),
            radial-gradient(circle at bottom right, rgba(148, 163, 184, .08), transparent 28%);
        }

        .dash-action-btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: .35rem;
          padding: .42rem .6rem;
          border-radius: .5rem;
          min-width: 2.25rem;
        }

        .carteira-page .dash-table thead th {
          background: #f8fafc;
        }

        .carteira-page .dt-container .dt-info {
          font-size: var(--fs-xs);
          padding-top: 0;
        }

        .carteira-page .dt-container .dt-length label,
        .carteira-page .dt-container .dt-search label {
          font-size: var(--fs-xs);
          font-weight: 700;
          color: var(--ui-text-muted);
          margin-bottom: 0;
        }

        .carteira-page .dt-container .dt-length select,
        .carteira-page .dt-container .dt-search input {
          border-radius: var(--radius-control);
          border: 1px solid rgba(0, 0, 0, .10);
          background: #fff;
          box-shadow: none;
          font-size: var(--fs-sm);
        }

        /* A regra acima vence o foco do Bootstrap; o anel do .form-control:focus volta aqui. */
        .carteira-page .dt-container .dt-length select:focus,
        .carteira-page .dt-container .dt-search input:focus {
          border-color: #86b7fe;
          box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
        }

        .carteira-page .dt-container .dt-layout-row {
          margin-left: 0;
          margin-right: 0;
        }

        .carteira-page .dt-container > .dt-layout-row:last-child {
          margin-top: 1rem;
        }

        .carteira-page .dt-container .dt-layout-row > * {
          padding-left: 0;
          padding-right: 0;
        }

        /* ============================================================
           Map components — Leaflet wrappers + cards de resultado
           Migrado de: _representacao_carteira.html, psp/_mapa_ceps.html,
           psp/mapa_init.html
           ============================================================ */

        /* psp_map: mapa de CEPs (componente genérico .psp-map-*) */
        .psp-map-shell {
          display: grid;
          gap: 1rem;
        }

        .psp-map-header {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 1rem;
        }

        .psp-map-title {
          margin: 0;
          font-size: 1.05rem;
          font-weight: 800;
          color: #0f172a;
        }

        .psp-map-subtitle {
          margin-top: .25rem;
          color: var(--ui-text-muted);
          font-size: var(--fs-md);
        }

        .psp-map-list {
          display: flex;
          flex-wrap: wrap;
          gap: .4rem;
        }

        .psp-map-chip {
          display: inline-flex;
          align-items: center;
          gap: .3rem;
          padding: .28rem .55rem;
          border-radius: 999px;
          background: rgba(29, 78, 216, .08);
          color: #1d4ed8;
          font-size: var(--fs-xs);
          font-weight: 800;
        }

        .psp-map-canvas {
          width: 100%;
          min-height: 68vh;
          border-radius: var(--surface-radius);
          overflow: hidden;
          border: 1px solid rgba(15, 23, 42, .08);
        }

        .psp-map-empty {
          padding: 1rem;
          border-radius: .95rem;
          border: 1px dashed rgba(15, 23, 42, .16);
          background: #f8fafc;
          color: #475569;
        }

        .psp-map-popup {
          min-width: 12rem;
        }

        .psp-map-popup strong {
          display: block;
          margin-bottom: .25rem;
          color: #0f172a;
        }

        .psp-map-popup .btn {
          margin-top: .45rem;
        }

        /* psp_map_search: tela de pesquisa por mapa + cards CNPJ */
        .psp-map-search-page {
          --map-border: rgba(15, 23, 42, .10);
        }

        .psp-map-search-page .map-layout {
          min-height: 0;
        }

        .psp-map-search-page .map-canvas {
          min-height: calc(100vh - 15rem);
          width: 100%;
          border-radius: .75rem;
          overflow: hidden;
          background: #f8fafc;
        }

        .psp-map-search-page .map-panel {
          height: 100%;
          display: flex;
          flex-direction: column;
          border-left: 1px solid var(--map-border);
        }

        /* O formulário toma a altura restante do painel: a lista de CNAEs
           cresce até onde der e o botão fica encostado na base do mapa. */
        .psp-map-search-page .map-search-form {
          flex: 1 1 auto;
          min-height: 0;
        }

        .psp-map-search-page .map-cnae-field {
          display: flex;
          flex-direction: column;
          flex: 1 1 auto;
          min-height: 0;
        }

        .psp-map-search-page .map-cnae-field select {
          flex: 1 1 auto;
          min-height: 12rem;
        }

        .psp-map-search-page .map-results {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: .75rem;
        }

        .psp-map-search-page .map-results-full {
          grid-column: 1 / -1;
        }

        .psp-map-search-page .map-city-chip {
          display: inline-flex;
          align-items: center;
          gap: .35rem;
          border-radius: 999px;
          padding: .35rem .6rem;
          background: var(--ui-hover);
          color: #374151;
          font-size: var(--fs-sm);
          font-weight: 700;
        }

        .psp-map-search-page .leaflet-popup-content {
          min-width: 12rem;
        }

        @media (max-width: 1199.98px) {
          .psp-map-search-page .map-canvas {
            min-height: 28rem;
          }

          .psp-map-search-page .map-panel {
            border-left: 0;
            border-top: 1px solid var(--map-border);
          }

          .psp-map-search-page .map-results {
            grid-template-columns: 1fr;
          }
        }

        /* DataTables Buttons (tema bs5): ícone puro de Excel / PDF sobre `.btn`. */
        .export-icon-btn {
          --bs-btn-line-height: 1;
          --bs-btn-border-width: 0;
          --bs-btn-color: var(--ui-text-muted);
          --bs-btn-hover-color: var(--ui-text);
          --bs-btn-active-color: var(--ui-text);
        }

        .export-icon-excel { --bs-btn-color: var(--status-green); --bs-btn-hover-color: #14633f; --bs-btn-active-color: #14633f; }
        .export-icon-pdf   { --bs-btn-color: var(--status-red); --bs-btn-hover-color: #a8202d; --bs-btn-active-color: #a8202d; }

        /* A regra global de `.btn` fixa tamanho, padding e sombra; aqui o ícone volta a 1.5rem, com padding próprio e sem sombra. */
        .dt-buttons .export-icon-btn { font-size: 1.5rem; padding: .2rem .5rem; box-shadow: none; }

        .export-icon-btn:focus-visible {
          outline: 2px solid var(--bs-primary);
          outline-offset: 2px;
        }

/* ---- Compatibilidade do shell (feedback de operações e páginas simples) ---- */
.operation-status { margin: 0 0 .75rem; padding: .7rem .8rem; border-radius: .6rem; }
.operation-status[data-state="loading"] { color: #1e3a5f; background: #dbeafe; }
.operation-status[data-state="success"] { color: #14532d; background: #dcfce7; }
.operation-status[data-state="error"] { color: #842029; background: #f8d7da; }
.empty-state { margin: 0; padding: 1.5rem; border: 1px dashed #cbd5e1; border-radius: .75rem; color: var(--ui-text-muted); text-align: center; }
.reports section { margin-top: 1.5rem; }
.login-kicker { margin: 0; color: var(--ui-text-muted); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.pagination { display: flex; gap: .75rem; margin-top: 1rem; }

/* ---- Catálogo CNAE (/configuracoes) ---- */
/* Sob cada grupo vão as atividades que ele reúne: menores e em cinza para
   explicar o grupo sem competir com o rótulo que de fato se marca. Elas
   alternam negrito (`<b>`) porque, corridas no mesmo peso, uma lista longa
   viraria um bloco cinza em que nenhum item se distingue do vizinho. */
.cnae-activities { margin-top: .1rem; color: var(--ui-text-muted); font-size: var(--fs-xs); line-height: 1.35; }

        /* ==================================================
           Detalhe do prospect (modal): painéis, indicadores e títulos são os
           do sistema; aqui fica só a etiqueta, o valor e os ganchos do index.js.
           ================================================== */
        .prospeccao-modal-page .psp-chip {
          display: inline-flex;
          align-items: center;
          gap: var(--space-1);
          padding: var(--space-1) var(--space-2);
          border: 1px solid var(--ui-border);
          border-radius: var(--radius-control);
          background: var(--ui-surface-2);
          color: var(--ui-text-2);
          font-size: var(--fs-xs);
        }

        .prospeccao-modal-page .psp-value {
          font-size: var(--fs-md);
          font-weight: var(--fw-bold);
          color: var(--ui-text);
          overflow-wrap: anywhere;
        }

        /* A caixa de desqualificar abre com `is-open`; o retorno só ocupa espaço quando tem texto. */
        .prospeccao-modal-page .psp-disqualify-box:not(.is-open),
        .prospeccao-modal-page .psp-register-feedback:empty {
          display: none;
        }

        /* ==================================================
           Cartão de empresa: o mesmo na Pesquisa e no Mapa
           ================================================== */
        .psp-cnpj-grid {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: var(--space-4);
        }

        .psp-cnpj-card {
          position: relative;
          overflow: hidden;
          border: var(--surface-border);
          border-radius: var(--radius-card);
          background: var(--ui-surface);
          box-shadow: var(--shadow-2);
          display: flex;
          flex-direction: column;
          transition: opacity .18s ease, transform .18s ease;
        }

        .psp-cnpj-card.is-removing {
          opacity: 0;
          transform: scale(.98);
        }

        .psp-cnpj-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: var(--space-4);
          padding: var(--space-4);
        }

        .psp-cnpj-title {
          display: flex;
          align-items: flex-start;
          gap: var(--space-4);
        }

        .psp-cnpj-emoji {
          width: 2.2rem;
          height: 2.2rem;
          flex: 0 0 2.2rem;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border-radius: var(--radius-control);
          background: var(--tint-blue-bg);
          color: var(--tint-blue-fg);
          border: 1px solid var(--tint-blue-br);
        }

        .psp-cnpj-head strong {
          display: block;
          font-size: var(--fs-md);
          font-weight: var(--fw-heavy);
          color: var(--ui-text);
        }

        .psp-cnpj-head small {
          display: block;
          color: var(--ui-text-muted);
          margin-top: var(--space-1);
        }

        .psp-cnpj-badges {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-end;
          gap: var(--space-1);
        }

        .psp-cnpj-badges.is-compact {
          justify-content: flex-start;
          padding: 0 var(--space-4) var(--space-4);
          gap: var(--space-2);
        }

        .psp-cnpj-badge {
          display: inline-flex;
          align-items: center;
          gap: var(--space-1);
          padding: var(--space-1) var(--space-2);
          border-radius: var(--radius-control);
          background: var(--ui-surface-2);
          color: var(--tint-gray-fg);
          font-size: var(--fs-2xs);
          font-weight: var(--fw-bold);
          white-space: nowrap;
        }

        .psp-cnpj-badge i {
          font-size: var(--fs-sm);
        }

        .psp-cnpj-badge.is-muted {
          background: var(--tint-gray-bg);
          color: var(--tint-gray-fg);
        }

        .psp-cnpj-badge.is-warning {
          background: var(--tint-yellow-bg);
          color: var(--tint-yellow-fg);
        }

        .psp-cnpj-actions {
          display: flex;
          flex-wrap: wrap;
          gap: var(--space-3);
          padding: 0 var(--space-4) var(--space-4);
          margin-top: auto;
        }

        .psp-cnpj-actions .btn {
          min-width: 7.5rem;
          font-weight: var(--fw-heavy);
        }

        .psp-cnpj-actions .btn i {
          margin-right: var(--space-1);
        }

        .psp-cnpj-empty,
        .psp-cnpj-loading {
          grid-column: 1 / -1;
        }

        .psp-cnpj-loading {
          display: flex;
          align-items: center;
          gap: var(--space-3);
          padding: var(--space-4);
          border-radius: var(--radius-card);
          border: 1px dashed var(--ui-border-strong);
          background: var(--ui-surface-2);
          color: var(--ui-text-2);
          font-weight: var(--fw-semibold);
        }

        @media (max-width: 767.98px) {
          .psp-cnpj-grid {
            grid-template-columns: 1fr;
          }
        }

/* Login, troca de senha e erro (fora do shell): login.html, password.html, _erro.html */
body.login-page {
  --login-bg: var(--bg-gray);
  --login-surface: rgba(255,255,255,.92);
  --login-border: rgba(15,23,42,.08);
  --login-text: var(--ui-text);
  --login-muted: var(--ui-text-muted);
  margin: 0;
  min-height: 100vh;
  color: var(--login-text);
  background: radial-gradient(circle at top left, rgba(75,85,99,.10), transparent 28%), radial-gradient(circle at bottom right, rgba(148,163,184,.14), transparent 32%), linear-gradient(180deg, var(--ui-hover) 0%, var(--login-bg) 100%);
}

.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.login-card {
  width: min(960px, 100%);
  border: 1px solid var(--login-border);
  border-radius: 1.4rem;
  overflow: hidden;
  background: var(--login-surface);
  box-shadow: 0 1.4rem 3rem rgba(15,23,42,.08);
  backdrop-filter: blur(10px);
}

.login-aside {
  position: relative;
  padding: 2rem;
  background: linear-gradient(180deg, rgba(17,24,39,.94), rgba(31,41,55,.98));
  color: #fff;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: .85rem;
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -.01em;
}

.login-brand i {
  font-size: 1.6rem;
  opacity: .9;
}

.login-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  width: fit-content;
  padding: .32rem .6rem;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.10);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .02em;
}

.login-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.login-text {
  margin: .65rem 0 0;
  font-size: var(--fs-md);
  line-height: 1.45;
  color: rgba(255,255,255,.78);
  max-width: 30rem;
}

.login-points {
  display: grid;
  gap: .55rem;
  margin-top: 1.2rem;
}

.login-point {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: rgba(255,255,255,.9);
  font-size: var(--fs-sm);
}

.login-point i {
  color: rgba(255,255,255,.65);
  font-size: 1rem;
}

.login-form-side {
  padding: 2rem;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98));
}

.login-panel {
  max-width: 28rem;
  margin: 0 auto;
}

.login-heading {
  margin-bottom: 1.3rem;
}

.login-heading h1 {
  font-size: var(--fs-xl);
  font-weight: 800;
  margin: 0;
  color: var(--login-text);
}

.login-heading p {
  margin: .35rem 0 0;
  color: var(--login-muted);
  font-size: var(--fs-sm);
}

.login-form .input-group {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: .95rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 .3rem .9rem rgba(0,0,0,.03);
}

.login-form .form-control {
  border: 0;
  box-shadow: none;
  padding: .85rem .95rem;
  font-size: var(--fs-md);
}

.login-form .input-group-text {
  border: 0;
  background: transparent;
  color: var(--login-muted);
  padding: .375rem .9rem .375rem .75rem;
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
}

/* A etiqueta global (`.form-label`) é a miúda dos filtros; no login vale a do Bootstrap. */
.login-form .form-label {
  font-size: .875em;
  letter-spacing: normal;
}

.login-form .form-control:focus {
  box-shadow: none;
}

.login-actions {
  margin-top: 1rem;
}

.login-btn {
  width: 100%;
  border: 0;
  border-radius: .95rem;
  background: linear-gradient(180deg, #4b5563 0%, #374151 100%);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-md);
  padding: .82rem 1rem;
  box-shadow: 0 .6rem 1.3rem rgba(55,65,81,.18);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.login-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 .8rem 1.5rem rgba(55,65,81,.22);
  filter: brightness(1.02);
}

.login-foot {
  margin-top: 1rem;
  text-align: center;
  color: var(--login-muted);
  font-size: var(--fs-xs);
}

.login-error {
  margin-bottom: 1rem;
  font-size: var(--fs-sm);
  color: #b42318;
  background: rgba(180,35,24,.06);
  border: 1px solid rgba(180,35,24,.12);
  border-radius: .8rem;
  padding: .65rem .8rem;
}

@media (max-width: 991.98px) {
  .login-aside {
    min-height: auto;
  }
}

.error-card {
  max-width: 36rem;
}

        /* Rodada 6 */
        /* Linha do tempo (histórico da captura): trilho à esquerda e um ponto por evento. */
        .timeline {
          list-style: none;
          margin: 0;
          padding: 0 0 0 var(--space-4);
          border-left: 1px solid var(--ui-border);
        }

        /* O AdminLTE tem um `.timeline` próprio com trilho em `::before` a 31 px; o nosso trilho é a borda. */
        .timeline::before {
          content: none;
        }

        .timeline > li {
          position: relative;
          padding-bottom: var(--space-3);
          font-size: var(--fs-sm);
          color: var(--ui-text);
        }

        .timeline > li:last-child {
          padding-bottom: 0;
        }

        .timeline > li::before {
          content: "";
          position: absolute;
          top: .35em;
          left: calc(-1 * var(--space-4) - 5.5px);
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: var(--bs-primary);
        }

        /* ==================================================
           Pesquisa (/prospeccao): cidades e CNAEs
           ================================================== */
        .psp-home .psp-city-wrap {
          position: relative;
        }

        .psp-home .psp-city-list {
          position: absolute;
          top: calc(100% + var(--space-1));
          left: 0;
          right: 0;
          z-index: 20;
          max-height: 16rem;
          overflow: auto;
          border: 1px solid var(--ui-border-strong);
          border-radius: var(--radius-menu);
          background: var(--ui-surface);
          box-shadow: var(--shadow-3);
          display: none;
        }

        .psp-home .psp-city-list.is-open {
          display: block;
        }

        .psp-home .psp-city-option {
          width: 100%;
          display: block;
          padding: var(--space-2) var(--space-3);
          border: 0;
          background: transparent;
          text-align: left;
          font-size: var(--fs-md);
          color: var(--ui-text);
        }

        .psp-home .psp-city-option:hover {
          background: var(--ui-hover);
        }

        .psp-home .psp-cnae-select {
          min-height: 18rem;
        }

        .psp-home .psp-cnae-status {
          display: flex;
          align-items: center;
          gap: var(--space-2);
          margin-top: var(--space-2);
          padding: var(--space-2) var(--space-3);
          border-radius: var(--radius-control);
          background: var(--tint-blue-bg);
          color: var(--tint-blue-fg);
          font-size: var(--fs-md);
          font-weight: var(--fw-semibold);
        }

        /* Estado vazio do prospect: grade da Pesquisa e mapa do CEP no modal, em qualquer tela. */
        .psp-empty {
          padding: var(--space-4);
          border-radius: var(--radius-card);
          border: 1px dashed var(--ui-border-strong);
          background: var(--ui-surface-2);
          color: var(--ui-text-2);
          font-size: var(--fs-sm);
        }