/**
 * Componentes do NexusPRO — Fase 4 da refatoracao de frontend.
 *
 * ADITIVO (D1). Todas as classes tem prefixo `nx-`, entao nenhuma colide com
 * as classes antigas de styles.css. Gerente e Admin continuam usando .card,
 * .btn, .badge e .history-table; o shell do agente usa estas.
 *
 * Carregar DEPOIS de tokens.css.
 *
 * Objetivo declarado na RECEPCAO_SPEC.md §4: substituir os 569 atributos
 * style= inline dos arquivos do agente. Cada classe aqui existe porque um
 * padrao se repetia inline em varios lugares.
 */

/* ============================================================
   Botao
   ============================================================ */

.nx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-sp-2);
    font-family: var(--nx-font);
    font-size: var(--nx-fs-sm);
    font-weight: var(--nx-fw-medium);
    line-height: var(--nx-lh-tight);
    padding: var(--nx-sp-1) var(--nx-sp-3);
    min-height: 30px;
    border: 1px solid var(--nx-line-strong);
    border-radius: var(--nx-radius);
    background: var(--nx-raised);
    color: var(--nx-text);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--nx-dur) var(--nx-ease),
                border-color var(--nx-dur) var(--nx-ease);
}
.nx-btn:hover { background: var(--nx-overlay); }
.nx-btn:active { background: var(--nx-surface); }
.nx-btn:focus-visible {
    outline: none;
    box-shadow: var(--nx-focus-ring);
}
.nx-btn[disabled],
.nx-btn[aria-disabled='true'] {
    opacity: var(--nx-disabled-opacity);
    cursor: not-allowed;
}

.nx-btn--primary { background: var(--nx-accent); border-color: var(--nx-accent); color: #fff; }
.nx-btn--primary:hover { background: #4a8ade; border-color: #4a8ade; }
.nx-btn--primary:active { background: #3573c4; }

.nx-btn--ok { background: var(--nx-ok); border-color: var(--nx-ok); color: #fff; }
.nx-btn--ok:hover { background: #48a866; border-color: #48a866; }
.nx-btn--ok:active { background: #368850; }

/* Acao destrutiva: contorno, nao preenchimento. Derrubar chamada da fila e
   apagar dado nao devem competir visualmente com a acao principal da tela. */
.nx-btn--danger {
    background: transparent;
    border-color: var(--nx-danger-line);
    color: var(--nx-danger-text);
}
.nx-btn--danger:hover { background: var(--nx-danger-bg); }
.nx-btn--danger:active { background: #241414; }

.nx-btn--ghost { background: transparent; border-color: transparent; color: var(--nx-text-2); }
.nx-btn--ghost:hover { background: var(--nx-raised); color: var(--nx-text); }

.nx-btn--sm { font-size: var(--nx-fs-xs); padding: 2px var(--nx-sp-2); min-height: 24px; }
.nx-btn--block { width: 100%; }

/* ============================================================
   Card
   ============================================================ */

.nx-card {
    background: var(--nx-raised);
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-radius);
    overflow: hidden;
}

.nx-card__head {
    display: flex;
    align-items: center;
    gap: var(--nx-sp-2);
    padding: var(--nx-sp-2) var(--nx-sp-3);
    background: var(--nx-surface);
    border-bottom: 1px solid var(--nx-line);
}
.nx-card__head h3,
.nx-card__title {
    font-size: var(--nx-fs-sm);
    font-weight: var(--nx-fw-semibold);
    color: var(--nx-text);
    margin: 0;
}
/* Empurra para a direita o que vier depois do titulo — badge de origem,
   botao de recarregar, contador. */
.nx-card__aside { margin-left: auto; display: flex; align-items: center; gap: var(--nx-sp-2); }
.nx-card__tag {
    font-size: var(--nx-fs-micro);
    letter-spacing: var(--nx-ls-label);
    text-transform: uppercase;
    color: var(--nx-text-3);
}
.nx-card__body { padding: var(--nx-sp-3); }

/* Rotulo de secao dentro do card (Beneficio, Telefones, Vinculos...) */
.nx-sec {
    font-size: var(--nx-fs-micro);
    letter-spacing: var(--nx-ls-head);
    text-transform: uppercase;
    color: var(--nx-text-3);
    padding: var(--nx-sp-2) var(--nx-sp-3) var(--nx-sp-1);
    background: var(--nx-surface);
    border-bottom: 1px solid var(--nx-line);
}

/* ============================================================
   Tabela
   ============================================================ */

/* A rolagem horizontal vive no wrapper, nunca no body. Sem isto, tabela larga
   em notebook empurra a pagina inteira para o lado. */
.nx-table-wrap { overflow-x: auto; }

.nx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--nx-fs-base);
}
.nx-table th {
    text-align: left;
    font-size: var(--nx-fs-micro);
    font-weight: var(--nx-fw-medium);
    letter-spacing: var(--nx-ls-head);
    text-transform: uppercase;
    color: var(--nx-text-3);
    padding: var(--nx-sp-2) var(--nx-sp-3);
    border-bottom: 1px solid var(--nx-line);
    white-space: nowrap;
}
.nx-table td {
    padding: var(--nx-sp-2) var(--nx-sp-3);
    border-bottom: 1px solid var(--nx-surface);
    vertical-align: middle;
    color: var(--nx-text);
}
.nx-table tbody tr:last-child td { border-bottom: none; }
.nx-table tbody tr:hover { background: var(--nx-surface); }
.nx-table .nx-td-right { text-align: right; }

/* ============================================================
   Badge, chip, pill
   ============================================================ */

.nx-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-sp-1);
    font-size: var(--nx-fs-xs);
    font-weight: var(--nx-fw-medium);
    line-height: var(--nx-lh-tight);
    padding: 2px var(--nx-sp-2);
    border: 1px solid;
    border-radius: var(--nx-radius-sm);
    white-space: nowrap;
}
.nx-badge--ura { background: var(--nx-warn-bg); border-color: var(--nx-warn-line); color: var(--nx-warn-text); }
.nx-badge--fila { background: var(--nx-accent-bg); border-color: var(--nx-accent-line); color: var(--nx-accent-text); }
.nx-badge--ok { background: var(--nx-ok-bg); border-color: var(--nx-ok-line); color: var(--nx-ok-text); }
.nx-badge--no { background: var(--nx-danger-bg); border-color: var(--nx-danger-line); color: var(--nx-danger-text); }
.nx-badge--neutral { background: var(--nx-overlay); border-color: var(--nx-line-strong); color: var(--nx-text-2); }

/* Contador ao vivo da topbar. Fica visivel em qualquer tela do sistema, e nao
   so na de atendimento como hoje. */
.nx-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-sp-1);
    font-size: var(--nx-fs-xs);
    padding: 2px var(--nx-sp-2);
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-radius-pill);
    background: var(--nx-raised);
    color: var(--nx-text-2);
    white-space: nowrap;
}
.nx-chip b {
    font-family: var(--nx-font-mono);
    font-size: var(--nx-fs-sm);
    font-weight: var(--nx-fw-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--nx-text);
}
.nx-chip--hot { background: var(--nx-warn-bg); border-color: var(--nx-warn-line); color: var(--nx-warn-text); }
.nx-chip--hot b { color: #f0d295; }

/*
 * Base do invólucro de turno — SEM escopo de papel, de proposito.
 *
 * A Fase 6 embrulhou #appStatusDot e #appStatusText num <span class="nx-turn">.
 * O ponto e uma <div>, ou seja, bloco: dentro de um <span> sem estilo ela
 * quebraria a linha e o gerente veria o ponto ACIMA do texto — regressao
 * visual num papel que esta refatoracao promete nao tocar (D1).
 *
 * Esta regra reproduz o que havia antes: os dois lado a lado, com o mesmo gap
 * de 15px que .topbar-right dava entre irmaos. Como .nx-turn e classe nova,
 * nenhum outro elemento e alcancado.
 *
 * O shell do agente sobrescreve isto em shell.css.
 */
.nx-turn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
}

/* Estado de turno. Substitui .status-dot + .status-text, que hoje sao um ponto
   de 8px — da para passar meia hora pausado sem perceber. */
.nx-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-sp-1);
    font-size: var(--nx-fs-sm);
    font-weight: var(--nx-fw-medium);
    padding: var(--nx-sp-1) var(--nx-sp-3);
    border: 1px solid;
    border-radius: var(--nx-radius-pill);
    white-space: nowrap;
}
.nx-pill--av { background: var(--nx-ok-bg); border-color: var(--nx-ok-line); color: #84cd9d; }
.nx-pill--pz { background: var(--nx-warn-bg); border-color: var(--nx-warn-line); color: #e5c380; }
.nx-pill--of { background: var(--nx-raised); border-color: var(--nx-line-strong); color: var(--nx-text-2); }
.nx-pill--call { background: var(--nx-accent-bg); border-color: var(--nx-accent-line); color: var(--nx-accent-text); }

/* ============================================================
   Campo de ficha (rotulo + valor)
   ============================================================ */

/* Grade de 1px de gap sobre fundo de linha: as divisorias sao o proprio gap.
   Menos regra de borda, e nenhum canto duplo. */
.nx-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--nx-line);
}
.nx-fields--1 { grid-template-columns: 1fr; }
.nx-fields--3 { grid-template-columns: repeat(3, 1fr); }

.nx-field {
    background: var(--nx-raised);
    padding: var(--nx-sp-1) var(--nx-sp-3);
    min-width: 0;
}
.nx-field--wide { grid-column: 1 / -1; }
.nx-field__k {
    font-size: var(--nx-fs-micro);
    letter-spacing: var(--nx-ls-label);
    text-transform: uppercase;
    color: var(--nx-text-3);
}
.nx-field__v {
    font-size: var(--nx-fs-sm);
    color: var(--nx-text);
    margin-top: 1px;
    overflow-wrap: anywhere;
}

/* O numero que fecha venda. Unico destaque saturado da tela de atendimento. */
.nx-hero {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nx-sp-3);
    padding: var(--nx-sp-2) var(--nx-sp-3);
    background: var(--nx-ok-bg);
    border-top: 1px solid var(--nx-ok-line);
    border-bottom: 1px solid var(--nx-ok-line);
}
.nx-hero__k {
    font-size: var(--nx-fs-micro);
    letter-spacing: var(--nx-ls-head);
    text-transform: uppercase;
    color: var(--nx-ok-text);
}
.nx-hero__v {
    font-family: var(--nx-font-mono);
    font-size: var(--nx-fs-2xl);
    font-weight: var(--nx-fw-semibold);
    font-variant-numeric: tabular-nums;
    color: #8fd6a9;
}

/* ============================================================
   KPI, lista, faixa
   ============================================================ */

.nx-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--nx-line);
}
.nx-kpi { background: var(--nx-raised); padding: var(--nx-sp-2) var(--nx-sp-3); }
.nx-kpi__k {
    font-size: var(--nx-fs-micro);
    letter-spacing: var(--nx-ls-label);
    text-transform: uppercase;
    color: var(--nx-text-3);
}
.nx-kpi__v {
    font-family: var(--nx-font-mono);
    font-size: var(--nx-fs-xl);
    font-weight: var(--nx-fw-semibold);
    font-variant-numeric: tabular-nums;
    line-height: var(--nx-lh-tight);
    color: var(--nx-text);
}

.nx-list { display: flex; flex-direction: column; }
.nx-list__item {
    display: flex;
    align-items: center;
    gap: var(--nx-sp-2);
    padding: var(--nx-sp-2) var(--nx-sp-3);
    border-bottom: 1px solid var(--nx-surface);
    font-size: var(--nx-fs-sm);
}
.nx-list__item:last-child { border-bottom: none; }
.nx-list__grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-list__end { margin-left: auto; }

/* Faixa-resumo de uma linha. Resolve o problema central do print 2: sem
   chamada, duas tabelas vazias comiam 70% da altura. Vazio vira uma linha e
   devolve o espaco; a tabela reabre sozinha quando entrar conteudo. */
.nx-strip {
    display: flex;
    align-items: center;
    gap: var(--nx-sp-3);
    padding: var(--nx-sp-2) var(--nx-sp-3);
    background: var(--nx-raised);
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-radius);
    font-size: var(--nx-fs-sm);
    color: var(--nx-text-2);
}
.nx-strip b { color: var(--nx-text); font-family: var(--nx-font-mono); font-variant-numeric: tabular-nums; }
.nx-strip__end { margin-left: auto; }

/* ============================================================
   Faixa da chamada ativa
   ============================================================ */

/* Quem é, telefone, CPF, duração e WhatsApp numa faixa só. Hoje isso está
   espalhado em três blocos empilhados (contadores, banner, barra de ações). */
.nx-callbar {
    display: flex;
    align-items: center;
    gap: var(--nx-sp-3);
    flex-wrap: wrap;
    padding: var(--nx-sp-3);
    background: var(--nx-accent-bg);
    border: 1px solid var(--nx-accent-line);
    border-radius: var(--nx-radius);
}
.nx-callbar__who { min-width: 0; flex: 1; }
.nx-callbar__nm {
    font-size: var(--nx-fs-lg);
    font-weight: var(--nx-fw-semibold);
    line-height: var(--nx-lh-tight);
    color: var(--nx-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nx-callbar__sub {
    font-family: var(--nx-font-mono);
    font-size: var(--nx-fs-sm);
    color: var(--nx-accent-text);
    margin-top: 1px;
}
.nx-callbar__tm {
    font-family: var(--nx-font-mono);
    font-size: var(--nx-fs-2xl);
    font-weight: var(--nx-fw-semibold);
    font-variant-numeric: tabular-nums;
    color: #cfe0f7;
    line-height: 1;
}
.nx-callbar__tml {
    font-size: var(--nx-fs-micro);
    letter-spacing: var(--nx-ls-head);
    text-transform: uppercase;
    color: #7ba5d8;
    text-align: right;
    margin-top: 2px;
}

/* ============================================================
   Banner de estado de turno
   ============================================================ */

.nx-banner {
    display: flex;
    align-items: center;
    gap: var(--nx-sp-3);
    flex-wrap: wrap;
    padding: var(--nx-sp-3) var(--nx-sp-4);
    border: 1px solid;
    border-radius: var(--nx-radius);
}
.nx-banner__main { flex: 1; min-width: 200px; }
.nx-banner__t { font-size: var(--nx-fs-md); font-weight: var(--nx-fw-semibold); }
.nx-banner__d { font-size: var(--nx-fs-sm); margin-top: 1px; }
.nx-banner__big {
    font-family: var(--nx-font-mono);
    font-size: var(--nx-fs-2xl);
    font-weight: var(--nx-fw-semibold);
    font-variant-numeric: tabular-nums;
}
.nx-banner--pz { background: var(--nx-warn-bg); border-color: var(--nx-warn-line); }
.nx-banner--pz .nx-banner__t,
.nx-banner--pz .nx-banner__big { color: #f0d295; }
.nx-banner--pz .nx-banner__d { color: #c9a563; }
.nx-banner--of { background: var(--nx-danger-bg); border-color: var(--nx-danger-line); }
.nx-banner--of .nx-banner__t { color: #e79997; }
.nx-banner--of .nx-banner__d { color: #b87a78; }

/* Conteudo que segue no ar mas nao e do agente agora (a fila enquanto ele
   esta pausado). Visivel, sem convidar ao clique. */
.nx-dim { opacity: 0.42; pointer-events: none; }

/* ============================================================
   Estado vazio e carregamento
   ============================================================ */

.nx-empty { padding: var(--nx-sp-5) var(--nx-sp-3); text-align: center; }
.nx-empty__icon { font-size: var(--nx-fs-xl); color: var(--nx-text-3); margin-bottom: var(--nx-sp-2); }
.nx-empty__t { font-size: var(--nx-fs-base); color: var(--nx-text-2); }
.nx-empty__d { font-size: var(--nx-fs-sm); color: var(--nx-text-3); margin-top: 2px; }

.nx-skeleton {
    background: var(--nx-overlay);
    border-radius: var(--nx-radius-sm);
    height: 12px;
    animation: nx-pulse 1.4s ease-in-out infinite;
}
.nx-skeleton--text { height: 12px; margin: var(--nx-sp-1) 0; }
.nx-skeleton--row { height: 32px; margin-bottom: 1px; }
@keyframes nx-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
    .nx-skeleton { animation: none; }
}

/* ============================================================
   Formulario
   ============================================================ */

.nx-form-group { margin-bottom: var(--nx-sp-4); }
.nx-label {
    display: block;
    font-size: var(--nx-fs-sm);
    font-weight: var(--nx-fw-medium);
    color: var(--nx-text-2);
    margin-bottom: var(--nx-sp-1);
}
.nx-input {
    width: 100%;
    font-family: var(--nx-font);
    font-size: var(--nx-fs-base);
    color: var(--nx-text);
    background: var(--nx-bg);
    border: 1px solid var(--nx-line-strong);
    border-radius: var(--nx-radius);
    padding: var(--nx-sp-2) var(--nx-sp-3);
    min-height: 34px;
    transition: border-color var(--nx-dur) var(--nx-ease);
}
.nx-input::placeholder { color: var(--nx-text-3); }
.nx-input:hover { border-color: var(--nx-text-3); }
.nx-input:focus-visible,
.nx-input:focus {
    outline: none;
    border-color: var(--nx-accent);
    box-shadow: var(--nx-focus-ring);
}
.nx-input[disabled] { opacity: var(--nx-disabled-opacity); cursor: not-allowed; }
.nx-input--invalid { border-color: var(--nx-danger); }
.nx-hint { font-size: var(--nx-fs-sm); color: var(--nx-text-3); margin-top: var(--nx-sp-1); }
.nx-hint--danger { color: var(--nx-danger-text); }

/* ============================================================
   Modal
   ============================================================ */

/* Substitui os confirm() nativos de app.js:322, receptivo.js:907 e
   meusdados.js:132. O que cada um faz nao muda — so como pergunta. */
.nx-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--nx-z-overlay);
    background: rgba(8, 10, 13, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--nx-sp-4);
}
.nx-modal {
    width: 100%;
    max-width: 420px;
    background: var(--nx-overlay);
    border: 1px solid var(--nx-line-strong);
    border-radius: var(--nx-radius-lg);
    box-shadow: var(--nx-shadow-overlay);
    overflow: hidden;
}
.nx-modal__head {
    padding: var(--nx-sp-3) var(--nx-sp-4);
    border-bottom: 1px solid var(--nx-line);
}
.nx-modal__t { font-size: var(--nx-fs-md); font-weight: var(--nx-fw-semibold); color: var(--nx-text); }
.nx-modal__body { padding: var(--nx-sp-4); font-size: var(--nx-fs-base); color: var(--nx-text-2); line-height: var(--nx-lh-base); }
.nx-modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--nx-sp-2);
    padding: var(--nx-sp-3) var(--nx-sp-4);
    border-top: 1px solid var(--nx-line);
    background: var(--nx-surface);
}

/* ============================================================
   Utilitarios
   ============================================================ */

/* Monoespacado so onde alinhamento em coluna ajuda a ler: telefone, CPF,
   ramal, tempo, duracao, valor. Fora de titulo e texto corrido — hoje o
   monoespacado e decoracao e esta em todo lugar. */
.nx-num {
    font-family: var(--nx-font-mono);
    font-variant-numeric: tabular-nums;
}

.nx-muted { color: var(--nx-text-2); }
.nx-quiet { color: var(--nx-text-3); font-size: var(--nx-fs-micro); letter-spacing: var(--nx-ls-label); text-transform: uppercase; }
.nx-push { margin-left: auto; }
.nx-stack { display: flex; flex-direction: column; gap: var(--nx-sp-3); }
.nx-row { display: flex; align-items: center; gap: var(--nx-sp-2); flex-wrap: wrap; }

.nx-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}