/* NimoCall — o que o painel ainda não tinha.   [NIMOCALL-TELA-V2]
 *
 * Só o que falta: tudo que já existe (.card, .filters, .stat-card, .badge,
 * .btn, .table-wrapper) vem do style.css do painel, com os tokens da
 * identidade. Redefinir cor aqui seria criar um segundo sistema. */

/* ── os números ─────────────────────────────────────────────── */
.nc-numero { border-bottom: 1px solid var(--border); padding: 14px 0; }
.nc-numero:last-of-type { border-bottom: 0; }
.nc-numero-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nc-numero-tel { font-size: 15px; font-weight: 600; letter-spacing: .2px; }
.nc-numero-quem { color: var(--text-muted); font-size: 13px; }
.nc-numero-quem strong { color: var(--text-secondary); font-weight: 500; }
.nc-espaco { flex: 1; }
.nc-perigo { color: var(--negative); border-color: rgba(244, 67, 54, .35); }
.nc-perigo:hover { background: rgba(244, 67, 54, .06); }

/* O ponto de estado: a linha viva pulsa devagar. É a única animação da tela —
   o telefone é um serviço que está no ar ou não, e essa é a informação que o
   administrador vem conferir. */
.nc-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--text-muted); }
.nc-dot.on { background: var(--positive); box-shadow: 0 0 0 0 rgba(37, 211, 102, .5);
             animation: ncPulso 2.4s ease-out infinite; }
.nc-dot.off { background: var(--negative); }
@keyframes ncPulso {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .45); }
  70%  { box-shadow: 0 0 0 7px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@media (prefers-reduced-motion: reduce) { .nc-dot.on { animation: none; } }

/* ── quem pode usar ─────────────────────────────────────────── */
.nc-edicao { margin: 12px 0 4px; padding: 14px 16px; background: var(--bg-body);
             border-radius: var(--radius-sm); }
.nc-edicao-ajuda { font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; }
.nc-marcaveis { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 16px; }
.nc-marcavel { display: flex; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; font-size: 14px; }
.nc-marcavel input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.nc-edicao-acoes { display: flex; gap: 8px; margin-top: 12px; }

.nc-aviso { margin-top: 14px; padding: 10px 14px; font-size: 13px; line-height: 1.55;
            color: #7a5c00; background: rgba(255, 235, 59, .16);
            border-left: 3px solid #e6b800; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.nc-vazio { color: var(--text-muted); padding: 18px 0; }

/* O aviso de gravação fica JUNTO das gravações, no topo da lista, e não no
   rodapé: é um lembrete de obrigação legal do cliente, e lembrete que só
   aparece depois de rolar a tabela inteira não lembra ninguém de nada. Tom de
   aviso, não de alarme — ele é permanente, e alarme permanente deixa de ser
   lido. */
.nc-legal { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px;
  padding: 11px 14px; font-size: 13px; line-height: 1.55; color: #7a5c00;
  background: rgba(255, 235, 59, .16); border-left: 3px solid #e6b800;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.nc-legal::before { content: "!"; flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: #e6b800; color: #fff; font-size: 12px; font-weight: 700; }

/* ── filtros ────────────────────────────────────────────────── */
#nc-filtros { align-items: flex-end; }
#nc-filtros .nc-busca { flex: 1 1 240px; }
#nc-filtros .nc-limpar { margin-bottom: 1px; }

/* ── a tabela ───────────────────────────────────────────────── */
.nc-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.nc-tabela thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-card);
  text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; color: var(--text-muted); padding: 10px 12px;
  border-bottom: 1px solid var(--border); white-space: nowrap; }
.nc-tabela td { padding: 11px 12px; border-bottom: 1px solid #f2f4f7; vertical-align: middle; }
.nc-tabela tbody tr:hover td { background: rgba(5, 143, 203, .04); }

/* O cabeçalho de dia: um registro de chamadas se lê por dia, não por carimbo
   completo repetido em toda linha. */
.nc-dia td { background: var(--bg-body); font-size: 11.5px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase; color: var(--text-muted);
  padding: 7px 12px; border-bottom: 1px solid var(--border); }
.nc-tabela tbody tr.nc-dia:hover td { background: var(--bg-body); }

.nc-col-hora { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nc-col-dur { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nc-col-num strong { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.nc-col-linha { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nc-sub { display: block; font-size: 12px; color: var(--text-muted); }
.nc-col-dir { white-space: nowrap; }
.nc-dir-txt { color: var(--text-secondary); }

/* A seta é a assinatura da tela: é como todo registro de chamadas se lê num
   telefone — sobe quando você ligou, desce quando ligaram para você, e fica
   vermelha quando ninguém atendeu. */
.nc-seta { display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; margin-right: 8px; font-size: 13px;
  font-weight: 700; line-height: 1; }
.nc-seta.sai { background: rgba(37, 211, 102, .14); color: #1a9e4c; }
.nc-seta.entra { background: rgba(5, 143, 203, .14); color: var(--primary-light); }
.nc-seta.perdida { background: rgba(244, 67, 54, .12); color: var(--negative); }

.nc-teto { margin-top: 12px; font-size: 12.5px; color: var(--text-muted); }
.nc-link { border: 0; background: none; padding: 0; color: var(--primary-light);
  font: inherit; cursor: pointer; text-decoration: underline; }
.nc-stat-alerta .stat-value { color: var(--negative); }

#nc-contador { font-size: 13px; color: var(--text-muted); font-weight: 400; }

@media (max-width: 720px) {
  .nc-numero-quem { flex-basis: 100%; }
  .nc-col-linha, .nc-dir-txt { display: none; }
}
.nc-erro { align-self: center; font-size: 13px; color: var(--negative); }

/* [NIMOCALL-NOME-LINHA-V1] nome grande, número pequeno embaixo. */
.nc-numero-id { display: flex; flex-direction: column; line-height: 1.25; }
.nc-numero-id b { font-size: 15px; font-weight: 600; }
.nc-numero-id small { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.nc-nome-campo { width: 100%; max-width: 320px; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font: inherit; font-size: 14px; }
.nc-nome-campo:focus { outline: none; border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(5, 143, 203, .12); }

/* [NIMOCALL-LINHAS-CONTRATADAS-V1] quantas linhas de quantas contratadas. */
.nc-contagem { font-size: 12.5px; font-weight: 400; color: var(--text-muted); margin-left: 6px; }
.nc-contagem.cheio { color: #8a6d00; background: rgba(255, 235, 59, .2);
  padding: 2px 8px; border-radius: 20px; }