/* Painel Maps - tema escuro com acento azul.
   Verde e vermelho ficam reservados para o significado Boa / Ruim. */

:root,
[data-bs-theme="dark"] {
  --p-bg:        #0b0d0c;
  --p-superficie:#141715;
  --p-card:      #161a17;
  --p-borda:     #262b27;
  --p-texto:     #e8ebe9;
  --p-fraco:     #8a938c;
  --p-acento:      #3b82f6;   /* azul do acento: logo, pilula ativa, foco */
  --p-acento-esc:  #1d4ed8;   /* hover */
  --p-acento-txt:  #ffffff;   /* texto sobre o azul solido */
  --p-acento-rgb:  59,130,246;
}

[data-bs-theme="light"] {
  --p-bg:        #f4f6f4;
  --p-superficie:#ffffff;
  --p-card:      #ffffff;
  --p-borda:     #dfe4e0;
  --p-texto:     #1a1d1b;
  --p-fraco:     #6b736d;
  --p-acento:      #2563eb;
  --p-acento-esc:  #1d4ed8;
  --p-acento-txt:  #ffffff;
  --p-acento-rgb:  37,99,235;
}

body {
  background: var(--p-bg);
  color: var(--p-texto);
}

/* ---------------------------------------------------------------- topo */
.topo {
  background: var(--p-superficie);
  border-bottom: 1px solid var(--p-borda);
}
.logo-quadrado {
  width: 1.65rem; height: 1.65rem;
  background: var(--p-acento);
  border-radius: .45rem;
}
.chip-usuario {
  background: var(--p-card);
  border: 1px solid var(--p-borda);
  border-radius: 2rem;
  padding: .25rem .75rem .25rem .3rem;
}
.avatar {
  width: 1.75rem; height: 1.75rem;
  background: var(--p-acento); color: var(--p-acento-txt);
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: .8rem;
}
.btn-icone {
  background: var(--p-card);
  border: 1px solid var(--p-borda);
  color: var(--p-fraco);
  border-radius: .6rem;
  width: 2.3rem; height: 2.3rem;
  display: grid; place-items: center;
}
.btn-icone:hover { color: var(--p-texto); border-color: var(--p-acento); }

/* ---------------------------------------------------------------- pilulas */
.pilula {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--p-card);
  border: 1px solid var(--p-borda);
  color: var(--p-texto);
  border-radius: 2rem;
  padding: .45rem 1rem;
  font-size: .9rem; font-weight: 500;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.pilula:hover { border-color: var(--p-acento); color: var(--p-texto); }
.pilula .contagem {
  background: rgba(255,255,255,.07);
  border-radius: 1rem;
  padding: .05rem .5rem;
  font-size: .78rem; font-weight: 700;
  color: var(--p-fraco);
}
.pilula.ativa {
  background: var(--p-acento);
  border-color: var(--p-acento);
  color: var(--p-acento-txt);
}
.pilula.ativa .contagem { background: rgba(0,0,0,.22); color: var(--p-acento-txt); }

/* ---------------------------------------------------------------- busca */
.caixa-busca { position: relative; }
.caixa-busca .bi-search {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--p-fraco); pointer-events: none;
}
.campo-busca {
  background: var(--p-card);
  border: 1px solid var(--p-borda);
  color: var(--p-texto);
  border-radius: .7rem;
  padding: .7rem 1rem .7rem 2.6rem;
  width: 100%;
}
.campo-busca:focus {
  outline: none;
  border-color: var(--p-acento);
  box-shadow: 0 0 0 .18rem rgba(var(--p-acento-rgb), .22);
}
.campo-busca::placeholder { color: var(--p-fraco); }

.btn-acento {
  background: var(--p-acento); border: 1px solid var(--p-acento);
  color: var(--p-acento-txt); font-weight: 600;
  border-radius: .7rem; padding: .7rem 1.5rem;
}
.btn-acento:hover { background: var(--p-acento-esc); border-color: var(--p-acento-esc); color: #fff; }

.grupo-pagina {
  background: var(--p-card);
  border: 1px solid var(--p-borda);
  border-radius: .7rem;
  padding: .35rem .5rem .35rem .9rem;
  display: flex; align-items: center; gap: .5rem;
  color: var(--p-fraco); font-size: .875rem;
  white-space: nowrap;
}
.grupo-pagina select {
  background: transparent; border: 0; color: var(--p-texto);
  font-size: .875rem; padding: .35rem .2rem;
}
.grupo-pagina select:focus { outline: none; }
.grupo-pagina select option { background: var(--p-superficie); color: var(--p-texto); }

/* ---------------------------------------------------------------- autocomplete */
.sugestoes {
  position: absolute; z-index: 1050; left: 0; right: 0; top: calc(100% + .35rem);
  background: var(--p-superficie);
  border: 1px solid var(--p-borda);
  border-radius: .7rem;
  box-shadow: 0 .8rem 2rem rgba(0,0,0,.45);
  max-height: 26rem; overflow-y: auto;
  display: none;
}
.sugestoes.aberta { display: block; }
.sugestoes .grupo-titulo {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--p-fraco); font-weight: 700;
  padding: .6rem .9rem .3rem;
}
.sugestoes .item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .9rem; cursor: pointer; border: 0; width: 100%;
  background: transparent; color: var(--p-texto); text-align: left;
}
.sugestoes .item:hover,
.sugestoes .item.marcado { background: rgba(var(--p-acento-rgb), .14); }
.sugestoes .item .rotulo { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugestoes .item .detalhe { color: var(--p-fraco); font-size: .8rem; white-space: nowrap; }

/* ---------------------------------------------------------------- cartao/tabela */
.cartao {
  background: var(--p-card);
  border: 1px solid var(--p-borda);
  border-radius: .8rem;
  overflow: hidden;
}
.cartao-topo {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--p-borda);
}
.barra-acento {
  width: .22rem; height: 1.4rem; background: var(--p-acento); border-radius: 1rem;
}
.tabela { width: 100%; margin: 0; color: var(--p-texto); }
.tabela thead th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--p-fraco); font-weight: 700;
  padding: .7rem 1.15rem; border-bottom: 1px solid var(--p-borda);
  background: transparent; white-space: nowrap;
}
.tabela thead th a { color: inherit; text-decoration: none; }
.tabela thead th a:hover { color: var(--p-acento); }
.tabela tbody td {
  padding: .7rem 1.15rem;
  border-bottom: 1px solid var(--p-borda);
  vertical-align: middle;
}
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: rgba(255,255,255,.022); }
.col-id { color: var(--p-fraco); font-size: .85rem; font-variant-numeric: tabular-nums; }
.nome-lead { font-weight: 600; }
.sub-lead { color: var(--p-fraco); font-size: .82rem; }

/* ---------------------------------------------------------------- acoes */
/* Verde e vermelho aqui NAO sao decoracao: sao o significado Boa / Ruim.
   Por isso ficam fixos e nao acompanham o azul do acento. */
.btn-acao {
  border: 1px solid transparent;
  border-radius: .4rem;
  padding: .22rem .6rem;
  font-size: .78rem; font-weight: 600;
  background: transparent;
  transition: filter .15s;
}
.btn-acao:hover { filter: brightness(1.25); }
.acao-boa    { background: rgba(34,197,94,.14);  color: #4ade80; border-color: rgba(34,197,94,.3); }
.acao-ruim   { background: rgba(239,68,68,.14);  color: #f87171; border-color: rgba(239,68,68,.3); }
.acao-neutra { background: rgba(148,163,184,.12); color: var(--p-fraco); border-color: var(--p-borda); }
.acao-boa.ativa  { background: #22c55e; color: #06210f; border-color: #22c55e; }
.acao-ruim.ativa { background: #dc2626; color: #fff; border-color: #dc2626; }

.paginacao .page-link {
  background: var(--p-card); border-color: var(--p-borda); color: var(--p-texto);
}
.paginacao .page-item.active .page-link {
  background: var(--p-acento); border-color: var(--p-acento); color: var(--p-acento-txt);
}
.paginacao .page-item.disabled .page-link { color: var(--p-fraco); opacity: .5; }

/* ---------------------------------------------------------------- celular */
@media (max-width: 991.98px) {
  /* No modo cartao nao existe tabela larga para rolar: o overflow-x do
     .table-responsive so' cortaria o conteudo na direita. */
  .table-responsive { overflow-x: visible; }
  .tabela thead { display: none; }
  .tabela tbody tr {
    display: block; margin: .6rem .6rem 0;
    border: 1px solid var(--p-borda); border-radius: .6rem;
  }
  .tabela tbody td {
    display: flex; justify-content: space-between; align-items: center;
    gap: .75rem; flex-wrap: wrap;
    border-bottom: 0; padding: .4rem .8rem; text-align: right;
  }
  /* deixa o valor quebrar em vez de estourar a largura */
  .tabela tbody td > *:not(::before) { min-width: 0; }
  .tabela tbody td .sub-lead,
  .tabela tbody td .text-start { overflow-wrap: anywhere; }
  .tabela tbody td.text-nowrap { white-space: normal; }
  .tabela tbody td::before {
    content: attr(data-rotulo);
    color: var(--p-fraco); font-size: .72rem; text-transform: uppercase;
    letter-spacing: .05em; font-weight: 700; text-align: left; flex: 0 0 auto;
  }
  .tabela tbody td:first-child { padding-top: .8rem; }
  .tabela tbody td:last-child  { padding-bottom: .8rem; }
}

/* ---------------------------------------------------------- indicador de busca */
.girando {
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--p-acento); opacity: 0; transition: opacity .15s; pointer-events: none;
}
.girando.ativo { opacity: 1; animation: rodar .8s linear infinite; }
@keyframes rodar { to { transform: translateY(-50%) rotate(360deg); } }