/* ===== NCrm — estilo base (Syncfusion fluent2 + utilitários próprios) ===== */
:root {
    --bg: #f5f6f8;
    --sup: #ffffff;
    --borda: #e3e5ea;
    --texto: #1d2129;
    --suave: #6b7280;
    --primaria: #0f6cbd;
    --primaria-suave: #e8f1fb;
    --verde: #1a8f4c;
    --whats: #1fa855;
    --alerta: #c4314b;
    --alerta-suave: #fdecef;
    --amarelo: #a86400;
    --amarelo-suave: #fff4e0;
    --roxo: #6b4fbb;
    --roxo-suave: #f0ecfb;
    --raio: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--texto); font-family: "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 14px; }
h1 { font-size: 1.4rem; margin: 0; font-weight: 650; }
h2 { font-size: 1.05rem; margin: 0 0 12px; font-weight: 650; }
a { color: var(--primaria); text-decoration: none; }

/* ── Shell ─────────────────────────────────────── */
.topo {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; gap: 18px;
    padding: 0 20px; height: 56px;
    background: var(--sup); border-bottom: 1px solid var(--borda);
}
.marca { font-weight: 800; font-size: 1.15rem; color: var(--texto); letter-spacing: .3px; }
.menu { display: flex; gap: 4px; flex: 1; }
.menu-item { padding: 8px 12px; border-radius: 8px; color: var(--suave); font-weight: 600; }
.menu-item:hover { background: var(--bg); }
.menu-item.active { color: var(--primaria); background: var(--primaria-suave); }
.usuario { display: flex; align-items: center; gap: 10px; }
.usuario-nome { font-weight: 600; }
.sair { color: var(--suave); }
.hamburguer { display: none; border: 0; background: none; font-size: 1.4rem; cursor: pointer; }
.conteudo { max-width: 1280px; margin: 0 auto; padding: 20px; }

/* ── Cabeçalho de página ───────────────────────── */
.cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.cabecalho-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dica { color: var(--suave); font-size: .85rem; }
.vazio { padding: 48px 16px; text-align: center; color: var(--suave); }

/* ── KPIs ──────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.kpi {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 12px 14px; background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio);
    font: inherit; text-align: left; cursor: pointer; color: inherit;
}
.kpi.estatico { cursor: default; }
.kpi.ativo { border-color: var(--primaria); box-shadow: 0 0 0 2px var(--primaria-suave); }
.kpi-num { font-size: 1.45rem; font-weight: 700; line-height: 1.1; }
.kpi-txt { color: var(--suave); font-size: .82rem; }
.kpi-alerta { color: var(--alerta); font-size: .78rem; font-weight: 600; }
.kpi-ok { color: var(--verde); font-size: .78rem; font-weight: 600; }

/* ── Cartões (agenda / clientes) ───────────────── */
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.cartao {
    background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio);
    padding: 14px; display: flex; flex-direction: column; gap: 8px;
}
.cartao.atrasado { border-left: 4px solid var(--alerta); }
.cartao.feito { opacity: .7; }
.cartao-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cartao-nome { font-weight: 650; font-size: 1rem; color: var(--texto); }
.cartao-nome:hover { color: var(--primaria); }
.cartao-motivo { color: var(--suave); font-size: .88rem; }
.cartao-motivo.pre { white-space: pre-wrap; color: var(--texto); }
.cartao-info { display: flex; gap: 14px; flex-wrap: wrap; font-size: .85rem; color: var(--suave); }
.cartao-info strong { color: var(--texto); font-weight: 600; }
.cartao-acoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 2px; }

/* ── Chips ─────────────────────────────────────── */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--bg); color: var(--suave); border: 1px solid var(--borda); }
.chip-alerta { background: var(--alerta-suave); color: var(--alerta); border-color: transparent; }
.chip-campanha { background: var(--roxo-suave); color: var(--roxo); border-color: transparent; }
.chip-retorno { background: var(--primaria-suave); color: var(--primaria); border-color: transparent; }
.chip-aniv { background: var(--amarelo-suave); color: var(--amarelo); border-color: transparent; }
.chip-ok { background: #e6f5ec; color: var(--verde); border-color: transparent; }
.selo { padding: 2px 8px; border-radius: 999px; background: var(--roxo-suave); color: var(--roxo); font-size: .72rem; font-weight: 700; }

/* ── Botão WhatsApp ────────────────────────────── */
.btn-whats {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 6px; font-weight: 600; font-size: .85rem;
    background: var(--whats); color: #fff; border: 1px solid var(--whats);
}
.btn-whats:hover { filter: brightness(.95); color: #fff; }
.btn-whats.desabilitado { background: var(--bg); color: var(--suave); border-color: var(--borda); cursor: not-allowed; }

/* ── Painéis / formulários ─────────────────────── */
.painel { background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; margin-bottom: 14px; }
.perfil-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.perfil-grade .painel { margin-bottom: 0; }
.painel-largo { grid-column: 1 / -1; }
.perfil-grade + .painel { margin-top: 14px; }
.dados { display: grid; grid-template-columns: 140px 1fr; gap: 6px 10px; margin: 0; }
.dados dt { color: var(--suave); }
.dados dd { margin: 0; }
.rotulo { display: block; font-size: .8rem; font-weight: 600; color: var(--suave); margin: 10px 0 4px; }
.campo {
    width: 100%; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 6px;
    font: inherit; background: #fff; color: var(--texto);
}
.campo:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 2px var(--primaria-suave); }
textarea.campo { resize: vertical; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.grade-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 12px; align-items: end; }
.check { display: inline-flex; align-items: center; gap: 6px; margin: 10px 14px 0 0; cursor: pointer; }
.opcoes { display: flex; flex-wrap: wrap; gap: 4px 0; }
.acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.link { background: none; border: 0; padding: 0; color: var(--primaria); cursor: pointer; font: inherit; }
.link.perigo { color: var(--alerta); }
.alerta { padding: 10px 12px; border-radius: 8px; margin: 8px 0; font-size: .9rem; }
.alerta-erro { background: var(--alerta-suave); color: var(--alerta); }
.linha-busca { display: flex; gap: 8px; margin-bottom: 14px; }
.lista-busca { list-style: none; margin: 8px 0; padding: 0; max-height: 260px; overflow: auto; border: 1px solid var(--borda); border-radius: 8px; }
.lista-busca li { padding: 8px 10px; cursor: pointer; display: flex; flex-direction: column; border-bottom: 1px solid var(--borda); }
.lista-busca li:hover { background: var(--primaria-suave); }
.cliente-escolhido { display: flex; gap: 10px; align-items: center; padding: 8px 10px; background: var(--primaria-suave); border-radius: 8px; }

/* ── Diálogo de atendimento ────────────────────── */
.dlg-titulo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dlg-motivo { color: var(--suave); margin-bottom: 6px; }
.bloco { padding: 10px 0; border-bottom: 1px dashed var(--borda); }
.bloco:last-child { border-bottom: 0; }
.bloco-titulo { font-weight: 700; margin-bottom: 6px; }
.texto-msg { margin-top: 8px; }
.atalhos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.atalho { border: 1px solid var(--borda); background: #fff; border-radius: 999px; padding: 3px 10px; cursor: pointer; font: inherit; font-size: .8rem; }
.atalho.ativo { background: var(--primaria); color: #fff; border-color: var(--primaria); }

/* ── Ranking (perfil de compra) ────────────────── */
.rankings { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 12px; }
.ranking-titulo { font-weight: 700; margin-bottom: 6px; }
.ranking-linha { display: grid; grid-template-columns: 1fr 80px 40px; gap: 8px; align-items: center; font-size: .85rem; padding: 2px 0; }
.ranking-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-barra { height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.ranking-barra span { display: block; height: 100%; background: var(--primaria); border-radius: 4px; }
.ranking-qtd { text-align: right; color: var(--suave); }
.progresso { height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.progresso span { display: block; height: 100%; background: var(--verde); }

/* ── Campanha ──────────────────────────────────── */
.tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin-bottom: 8px; }
.tipo { text-align: left; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; background: #fff; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 3px; }
.tipo span { color: var(--suave); font-size: .8rem; }
.tipo.ativo { border-color: var(--primaria); background: var(--primaria-suave); }
.vendedores { display: flex; flex-wrap: wrap; }
.vendedor { min-width: 160px; }

/* ── Login ─────────────────────────────────────── */
.login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-card { width: 100%; max-width: 380px; background: var(--sup); border: 1px solid var(--borda); border-radius: 14px; padding: 28px; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.login-logo { font-size: 1.6rem; font-weight: 800; }
.login-sub { color: var(--suave); margin-bottom: 8px; }
.lembrar { display: flex; gap: 6px; align-items: center; margin: 14px 0; color: var(--suave); }
.btn-primario { background: var(--primaria); color: #fff; border: 0; border-radius: 8px; padding: 10px 14px; font: inherit; font-weight: 700; cursor: pointer; }
.btn-primario.largo { width: 100%; }
.login-rodape { text-align: center; color: var(--suave); font-size: .75rem; margin-top: 16px; }

#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: 10px 16px; background: #fff3cd; z-index: 1000; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }

/* ── Carteira / painel / loja ──────────────────── */
a.kpi { text-decoration: none; }
a.kpi:hover { border-color: var(--primaria); }
.filtros { padding: 12px 16px; }
.filtros-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 12px; align-items: end; }
.filtros .rotulo { margin-top: 4px; }
.barra-lote { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; position: sticky; top: 64px; z-index: 50; border-color: var(--primaria); box-shadow: 0 4px 14px rgba(15,108,189,.12); }
.motivo-lote { width: auto; flex: 1; min-width: 180px; }
.acoes-topo { margin: 0 0 6px; }
.seletor-loja { width: auto; padding: 5px 8px; font-weight: 600; }
.selo-loja { padding: 2px 8px; border-radius: 999px; background: var(--primaria-suave); color: var(--primaria); font-size: .75rem; font-weight: 700; }
.btn-whats-mini { padding: 4px 7px; }
.btn-whats-mini span:empty { display: none; }
@media (max-width: 760px) {
    .barra-lote { top: 56px; }
    .selo-loja { display: none; }
}

/* ── Manual (/manual) ──────────────────────────── */
.menu-ajuda { margin-left: auto; }
.atalhos-filtro { align-items: center; margin: 10px 0 0; }
.manual { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; }
.manual-indice { position: sticky; top: 72px; background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.manual-indice-titulo { font-weight: 800; margin: 0 0 8px 6px; }
.manual-link { padding: 6px 8px; border-radius: 6px; color: var(--texto); font-size: .9rem; }
.manual-link:hover { background: var(--bg); }
.manual-link.ativo { background: var(--primaria-suave); color: var(--primaria); font-weight: 600; }
.manual-acoes { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding: 10px 6px 0; border-top: 1px solid var(--borda); font-size: .85rem; }
.manual-conteudo { background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio); padding: 24px 32px; line-height: 1.6; min-width: 0; }
.manual-conteudo h1 { font-size: 1.7rem; margin-bottom: 12px; }
.manual-conteudo h2 { font-size: 1.2rem; margin: 28px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--borda); }
.manual-conteudo h3 { font-size: 1.02rem; margin: 20px 0 8px; }
.manual-conteudo table { border-collapse: collapse; width: 100%; margin: 10px 0 16px; font-size: .9rem; display: block; overflow-x: auto; }
.manual-conteudo th, .manual-conteudo td { border: 1px solid var(--borda); padding: 7px 10px; text-align: left; vertical-align: top; }
.manual-conteudo th { background: var(--bg); }
.manual-conteudo blockquote { margin: 14px 0; padding: 10px 14px; background: var(--amarelo-suave); border-left: 4px solid var(--amarelo); border-radius: 6px; }
.manual-conteudo blockquote p { margin: 0; }
.manual-conteudo code { background: var(--bg); padding: 1px 5px; border-radius: 4px; font-size: .88em; }
.manual-conteudo pre { background: var(--bg); padding: 12px; border-radius: 8px; overflow-x: auto; }
.manual-conteudo pre code { background: none; padding: 0; }
.manual-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 24px; }
.manual-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: var(--raio); color: var(--texto); }
.manual-card:hover { border-color: var(--primaria); background: var(--primaria-suave); }
.manual-card span { color: var(--suave); font-size: .82rem; }
.manual-navegacao { display: flex; justify-content: space-between; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--borda); }
.login-rodape a { color: var(--suave); text-decoration: underline; }
@media print {
    .topo, .manual-indice, .manual-navegacao, .manual-cards, #blazor-error-ui { display: none !important; }
    .manual { display: block; }
    .manual-conteudo { border: 0; padding: 0; }
    body { background: #fff; }
}

/* ── Celular ───────────────────────────────────── */
@media (max-width: 760px) {
    .topo { padding: 0 12px; gap: 10px; }
    .hamburguer { display: block; }
    .menu { display: none; position: absolute; top: 56px; left: 0; right: 0; flex-direction: column; background: var(--sup); border-bottom: 1px solid var(--borda); padding: 8px; }
    .menu.aberto { display: flex; }
    .usuario-nome, .selo { display: none; }
    .conteudo { padding: 12px; }
    .cartoes { grid-template-columns: 1fr; }
    .perfil-grade, .grade-2 { grid-template-columns: 1fr; }
    .dados { grid-template-columns: 110px 1fr; }
    .kpis { grid-template-columns: repeat(2, 1fr); }
    .manual { grid-template-columns: 1fr; }
    .manual-indice { position: static; }
    .manual-conteudo { padding: 16px; }
    .menu-ajuda { margin-left: 0; }
}