/* ===================================================================
   Roda de Vendas — Estilos (Identidade Alinutri)
   Fonte: Plus Jakarta Sans (hospedada localmente)
   Paleta institucional: vermelho #c72626 / vermelhos escuros / cinza #4D4D4D
   Semáforo: vermelho -> laranja -> azul -> verde
   =================================================================== */

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url("fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations");
}

:root {
    /* Marca */
    --marca:         #c72626;   /* vermelho institucional (ações, destaques) */
    --marca-escura:  #630a0f;   /* vermelho escuro (cabeçalho, títulos) */
    --marca-escura2: #801C15;   /* vermelho intermediário (gradientes) */
    --rosa-claro:    #F0E2E2;   /* tom claro institucional (fundos suaves) */

    /* Texto e superfícies */
    --texto:        #4D4D4D;
    --texto-suave:  #737373;
    --borda:        #e7d8d8;
    --bg:           #f6efef;
    --branco:       #ffffff;

    /* Status / semáforo */
    --ok:    #2C8F43;   /* good  (verde)  */
    --info:  #3399CC;   /* good alternativo (azul) */
    --alerta:#D98431;   /* neutral (laranja) */
    --erro:  #c72626;   /* bad (vermelho) */

    --baixa: #c72626;   /* faixa < 3,00      */
    --media: #D98431;   /* faixa 3,00–3,79   */
    --boa:   #3399CC;   /* faixa 3,80–4,49   */
    --alta:  #2C8F43;   /* faixa >= 4,50     */

    --raio: 12px;
    --sombra: 0 2px 10px rgba(61, 38, 36, .10);
}

* { box-sizing: border-box; }

/* O atributo hidden tem que vencer SEMPRE. Sem isto, qualquer classe nossa com display
   (ex.: .btn { display:inline-flex }) sobrepõe o `display:none` da folha do navegador e o
   elemento marcado como hidden continua aparecendo. */
[hidden] { display: none !important; }

html, body { overflow-x: hidden; }  /* rede de segurança: nenhuma tela deve rolar na horizontal */
body {
    margin: 0;
    font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    background-color: var(--bg);
    color: var(--texto);
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}
/* Grafismo oficial como textura de fundo (marca d'água sutil) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url("img/grafismo-fundo.png");
    background-size: 760px auto;
    background-repeat: repeat;
    opacity: .05;
    pointer-events: none;
}

.container {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ---------- Topo / rodapé ---------- */
.topo {
    background: linear-gradient(135deg, var(--marca-escura2), var(--marca-escura));
    color: #fff;
    padding: 14px 0;
    box-shadow: var(--sombra);
}
.topo { position: relative; z-index: 1200; }  /* acima dos controles do Leaflet (z-index até 1000) p/ o dropdown do menu não ficar atrás do mapa; sem overflow:hidden, que cortava o dropdown */
/* Grafismo branco oficial, bem sutil, sobre o vermelho do cabeçalho */
.topo::after {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background-image: url("img/grafismo-header.png");
    background-size: 520px auto; background-repeat: repeat;
    opacity: .10; pointer-events: none;
}
.topo-inner { position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.logo-lockup { display: flex; align-items: center; gap: 14px; text-decoration: none; color: #fff; flex: 0 0 auto; }
.logo-img { display: block; height: 40px; width: auto; flex: 0 0 auto; }
.logo-divisor { width: 1px; height: 28px; background: rgba(255,255,255,.45); flex: 0 0 auto; }
.logo-sub { font-size: .95rem; font-weight: 600; letter-spacing: .3px; opacity: .92; white-space: nowrap; }
.link-sair {
    margin-left: auto; color: #fff; text-decoration: none;
    border: 1px solid rgba(255,255,255,.45); padding: 5px 14px; border-radius: 8px;
    font-size: .88rem; font-weight: 600; white-space: nowrap;
}
.link-sair:hover { background: rgba(255,255,255,.15); }

.cartao-login { max-width: 420px; margin: 40px auto; text-align: center; }
.cartao-login .form { text-align: left; }
.login-iso { display: block; width: auto; height: 96px; margin: 4px auto 14px; }

/* ---------- Instalar o app (tela de login) — ver assets/instalar.js ---------- */
.instalar-bloco { margin-top: 22px; }
.instalar-ou { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; color: var(--texto-suave); font-size: .8rem; }
.instalar-ou::before, .instalar-ou::after { content: ""; flex: 1; height: 1px; background: var(--borda); }
.instalar-manual {
    display: flex; flex-direction: column; gap: 4px; text-align: left;
    background: var(--rosa-claro); border: 1px solid var(--borda); border-radius: 10px;
    padding: 12px 14px; font-size: .85rem; line-height: 1.45;
}
.instalar-manual strong { color: var(--marca-escura); }
.instalar-dica { margin-top: 10px; margin-bottom: 0; font-size: .78rem; text-align: center; }

.rodape {
    margin-top: 32px;
    padding: 18px 0;
    color: var(--texto-suave);
    font-size: .8rem;
    text-align: center;
}

main.container { padding-top: 20px; padding-bottom: 20px; }

/* ---------- Cartões ---------- */
.cartao {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--sombra);
}
h1 { font-size: 1.5rem; margin: 0 0 4px; color: var(--marca-escura); font-weight: 800; }
h2 { font-size: 1.15rem; margin: 0 0 12px; color: var(--marca-escura); font-weight: 700; }
h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; color: var(--texto-suave); margin: 0 0 4px; font-weight: 700; }
.ajuda { color: var(--texto-suave); margin: 0 0 16px; }

/* ---------- Formulários ---------- */
.form { display: flex; flex-direction: column; gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > span { font-weight: 600; font-size: .9rem; }
select, input[type="text"], input[type="search"], input[type="date"], input[type="password"],
input[type="email"], input[type="tel"], input[type="number"], textarea {
    font: inherit;
    padding: 12px 14px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: #fff;
    color: inherit;
    width: 100%;
    max-width: 100%;
}
select:focus, input:focus, textarea:focus {
    outline: 2px solid var(--marca);
    border-color: var(--marca);
}
textarea { resize: vertical; }

/* ---------- Botões ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: inherit;
    font-weight: 700;
    padding: 12px 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: filter .15s, background .15s;
}
.btn-grande { padding: 16px 24px; font-size: 1.05rem; }
.btn-primario { background: var(--marca); color: #fff; }
.btn-primario:hover { filter: brightness(1.08); }
.btn-secundario { background: #fff; color: var(--marca-escura); border-color: var(--borda); }
.btn-secundario:hover { background: var(--rosa-claro); }

/* ---------- Barra de progresso ---------- */
.barra-progresso {
    height: 10px;
    background: var(--rosa-claro);
    border-radius: 999px;
    overflow: hidden;
    margin: 4px 0 6px;
}
.barra-progresso-preenchida {
    height: 100%;
    background: linear-gradient(90deg, var(--marca-escura2), var(--marca));
    transition: width .3s ease;
}
.progresso-texto { text-align: center; color: var(--texto-suave); font-size: .85rem; margin: 0 0 14px; }

/* ---------- Cabeçalho da avaliação ---------- */
.cabecalho-avaliacao { display: flex; flex-wrap: wrap; gap: 20px; }
.cabecalho-avaliacao .rotulo,
.grade-dados .rotulo,
.rotulo { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; color: var(--texto-suave); }

/* ---------- Etapas / perguntas ---------- */
.etapa {
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: #fff;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--sombra);
}
.etapa legend {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.2rem; font-weight: 800; color: var(--marca-escura); padding: 0 6px;
}
.numero-topico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--marca); color: #fff; font-size: .95rem;
}
.objetivo { color: var(--texto-suave); margin: 6px 0 18px; }

.pergunta { padding: 14px 0; border-top: 1px solid var(--borda); }
.pergunta:first-of-type { border-top: none; }
.pergunta-texto { margin: 0 0 12px; font-weight: 500; display: flex; gap: 8px; }
.pergunta-num {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--rosa-claro); color: var(--marca-escura); font-size: .8rem; font-weight: 700;
}

/* Escala 1-5 em botões grandes */
.escala { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.opcao {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    border: 1.5px solid var(--borda); border-radius: 10px;
    padding: 10px 4px; cursor: pointer; text-align: center;
    background: #fff; transition: all .12s;
    min-height: 64px; justify-content: center;
}
.opcao input { position: absolute; opacity: 0; width: 0; height: 0; }
.opcao-num { font-size: 1.2rem; font-weight: 800; color: var(--marca-escura); }
.opcao-rotulo { font-size: .62rem; color: var(--texto-suave); line-height: 1.1; }
.opcao:hover { border-color: var(--marca); }
.opcao:has(input:checked) {
    border-color: var(--marca);
    background: var(--marca);
}
.opcao:has(input:checked) .opcao-num,
.opcao:has(input:checked) .opcao-rotulo { color: #fff; }
.opcao:has(input:focus-visible) { outline: 2px solid var(--marca-escura); }
.pergunta.faltando { background: #fbe3e3; border-radius: 8px; }

/* Microanimação ao tentar avançar sem responder */
@keyframes tremer {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
.tremer { animation: tremer .3s; }

/* ---------- Navegação entre etapas ---------- */
.navegacao { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }
.navegacao .btn { flex: 1; }

/* ---------- Revisão ---------- */
.resumo-revisao { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.resumo-linha {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px; border: 1px solid var(--borda); border-radius: 8px; cursor: pointer;
}
.resumo-linha:hover { background: var(--rosa-claro); }
.resumo-linha .notas { font-variant-numeric: tabular-nums; color: var(--texto-suave); font-size: .9rem; }
.resumo-linha.incompleta { border-color: var(--erro); background: #fbe3e3; }

/* ---------- Avisos ---------- */
.aviso { padding: 14px 16px; border-radius: 10px; margin: 12px 0; }
.aviso-erro { background: #fbe3e3; border: 1px solid #e9a9a3; color: var(--marca-escura); }
.aviso-ok { background: #e6f4ea; border: 1px solid #aedcbc; color: var(--ok); }
.aviso ul { margin: 8px 0 0; padding-left: 20px; }
code { background: var(--rosa-claro); padding: 2px 6px; border-radius: 4px; font-size: .9em; }

/* ===================================================================
   Tela de resultado
   =================================================================== */
.grade-dados { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.resultado-geral { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.medalha {
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 120px; height: 120px; border-radius: 50%;
    color: #fff;
}
.medalha-valor { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.medalha-rotulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; opacity: .9; }
.classificacao-bloco { flex: 1; min-width: 200px; }
.classificacao-bloco p { margin: 8px 0 0; color: var(--texto-suave); }

/* Faixas (semáforo) aplicadas a fundos */
.faixa-baixa { background: var(--baixa); }
.faixa-media { background: var(--media); }
.faixa-boa   { background: var(--boa); }
.faixa-alta  { background: var(--alta); }

/* Badges de classificação */
.badge {
    display: inline-block; padding: 6px 14px; border-radius: 999px;
    font-weight: 700; color: #fff; font-size: .95rem;
}
.badge-referencia { background: var(--alta); }
.badge-forte      { background: var(--boa); }
.badge-regular    { background: var(--media); }
.badge-atencao    { background: var(--marca); }
.badge-critico    { background: var(--marca-escura); }

/* Tópicos */
.topicos-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.topico-item {
    border: 1px solid var(--borda); border-radius: 10px; padding: 14px;
    position: relative; background: #fff;
}
/* O fundo colorido das faixas vira só uma borda lateral nos tópicos */
.topico-item.faixa-baixa { border-left: 5px solid var(--baixa); }
.topico-item.faixa-media { border-left: 5px solid var(--media); }
.topico-item.faixa-boa   { border-left: 5px solid var(--boa); }
.topico-item.faixa-alta  { border-left: 5px solid var(--alta); }
.topico-item-topo { display: flex; justify-content: space-between; align-items: baseline; }
.topico-nome { font-weight: 700; }
.topico-media { font-size: 1.3rem; font-weight: 800; color: var(--marca-escura); }
.mini-barra { height: 6px; background: var(--rosa-claro); border-radius: 999px; margin: 8px 0; overflow: hidden; }
.mini-barra-fill { height: 100%; background: var(--marca); }
.topico-diag { font-size: .85rem; color: var(--texto-suave); margin: 6px 0 0; }
.topico-critico { box-shadow: 0 0 0 2px var(--erro) inset; }
.tag-critico {
    position: absolute; top: -10px; right: 10px;
    background: var(--erro); color: #fff; font-size: .68rem; font-weight: 700;
    padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .5px;
}

/* Plano recomendado */
.plano-recomendado { border: 2px solid var(--marca); }
.plano-recomendado.plano-reforco { border-color: var(--ok); }
.plano-cabecalho { margin-bottom: 12px; }
.plano-etiqueta {
    display: inline-block; background: var(--marca); color: #fff;
    padding: 4px 12px; border-radius: 999px; font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px;
}
.plano-reforco .plano-etiqueta { background: var(--ok); }
.plano-foco { color: var(--texto-suave); margin: 4px 0 0; }
.plano-bloco { margin: 14px 0; }
.plano-bloco.destaque { background: var(--rosa-claro); padding: 16px; border-radius: 10px; }
.plano-bloco p { margin: 2px 0 0; }
.plano-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.plano-bloco ul { margin: 4px 0 0; padding-left: 18px; }
.checklist { list-style: none; padding-left: 0; }
.checklist li { padding: 4px 0 4px 26px; position: relative; }
.checklist li::before {
    content: "☐"; position: absolute; left: 0; font-size: 1.1rem; color: var(--marca);
}

/* Ações finais */
.acoes-finais { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.acoes-finais .btn { flex: 1; min-width: 160px; }

/* Tabela (histórico de planos) */
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th, .tabela td { text-align: left; padding: 10px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela th { color: var(--texto-suave); font-size: .78rem; text-transform: uppercase; letter-spacing: .4px; }
.status { padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; color: #fff; }
.status-aberto { background: var(--texto-suave); }
.status-em-andamento { background: var(--boa); }
.status-concluido { background: var(--ok); }
.status-cancelado { background: var(--baixa); }

/* ---------- Responsivo ---------- */
@media (max-width: 600px) {
    .grade-dados, .plano-grade, .topicos-grade { grid-template-columns: 1fr; }
    .escala { grid-template-columns: repeat(5, 1fr); gap: 5px; }
    .opcao { padding: 8px 2px; min-height: 58px; }
    .opcao-rotulo { display: none; }      /* em telas pequenas, só o número */
    .navegacao { flex-direction: row; }
    h1 { font-size: 1.3rem; }
}

/* ---------- Âncoras de pontuação (form) ---------- */
.ancoras { margin: 0 0 16px; font-size: .85rem; border: 1px solid var(--borda); border-radius: 8px; padding: 6px 12px; background: #fff; }
.ancoras summary { cursor: pointer; font-weight: 600; color: var(--marca-escura); }
.ancoras ul { margin: 10px 0 6px; padding-left: 18px; color: var(--texto-suave); }
.ancoras li { margin-bottom: 4px; }

/* ---------- Opção "Não se aplica" ---------- */
.opcao-na-toggle {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
    font-size: .82rem; color: var(--texto-suave); cursor: pointer;
    border: 1px dashed var(--borda); border-radius: 999px; padding: 4px 12px;
}
.opcao-na-toggle input { accent-color: var(--marca); }
.opcao-na-toggle:has(input:checked) { background: var(--rosa-claro); color: var(--marca-escura); border-style: solid; }

/* ---------- Tendência e consistência ---------- */
.tend, .chip-consist {
    display: inline-block; font-size: .75rem; font-weight: 700;
    padding: 3px 10px; border-radius: 999px; margin: 0 6px 6px 0;
}
.tend-sobe   { color: var(--ok);  background: #e6f4ea; }
.tend-desce  { color: var(--erro); background: #fbe3e3; }
.tend-estavel{ color: var(--texto-suave); background: #eee; }
.chip-consistente { color: var(--ok); background: #e6f4ea; }
.chip-moderada    { color: #b5670f; background: #fbeede; }
.chip-irregular   { color: var(--erro); background: #fbe3e3; }
.tend-mini { font-size: .8rem; margin-left: 4px; }
.tend-mini.tend-sobe { color: var(--ok); }
.tend-mini.tend-desce { color: var(--erro); }
.tend-mini.tend-estavel { color: var(--texto-suave); }
.nota-peso { font-size: .82rem; color: var(--texto-suave); margin: 8px 0 0; }

/* ---------- Tópicos: N/A e abaixo do corte ---------- */
.topico-item.faixa-na { border-left: 5px solid #bbb; opacity: .85; }
.topico-item.topico-abaixo { box-shadow: 0 0 0 1px var(--alerta) inset; }
.tag-abaixo {
    position: absolute; top: -10px; right: 10px;
    background: var(--alerta); color: #fff; font-size: .66rem; font-weight: 700;
    padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .4px;
}

/* ---------- Gap de percepção ---------- */
.gap-pos { color: var(--ok); font-weight: 700; }
.gap-neg { color: var(--erro); font-weight: 700; }

/* ---------- Aviso de causa-raiz ---------- */
.aviso-causa { background: #fbeede; border: 1px solid #ecca99; color: #8a5212; }

/* ---------- Diagnóstico por IA ---------- */
.ia-secao { border: 2px solid var(--marca-escura); }
.ia-cabecalho { display: flex; align-items: center; gap: 10px; }
.ia-cabecalho h2 { margin: 0; }
.ia-tag {
    background: var(--marca-escura); color: #fff; font-size: .68rem; font-weight: 700;
    padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .5px;
}
.ia-risco { display: inline-block; margin: 12px 0; padding: 6px 14px; border-radius: 8px; font-size: .9rem; }
.ia-risco-baixo { background: #e6f4ea; color: var(--ok); }
.ia-risco-medio { background: #fbeede; color: #b5670f; }
.ia-risco-alto  { background: #fbe3e3; color: var(--erro); }
.ia-diagnostico { line-height: 1.6; margin-bottom: 8px; }
.ia-lista, .ia-acoes { margin: 6px 0 14px; padding-left: 20px; }
.ia-lista li, .ia-acoes li { margin-bottom: 6px; }
.ia-rodape { font-size: .8rem; color: var(--texto-suave); margin-top: 12px; }
.btn-link {
    background: none; border: none; color: var(--marca); font: inherit; font-weight: 600;
    cursor: pointer; padding: 0; text-decoration: underline;
}

/* ---------- Impressão / PDF ---------- */
@media print {
    .topo, .rodape, .no-print, .acoes-finais { display: none !important; }
    body { background: #fff; }
    .cartao, .etapa { box-shadow: none; border-color: #ccc; break-inside: avoid; }
    .plano-recomendado { border-color: #888; }
    .container { max-width: 100%; }
}

/* ---------- Gráfico de evolução (SVG) ---------- */
.grafico-evolucao { width: 100%; max-width: 540px; height: auto; display: block; }
.grafico-evolucao .g-grid { stroke: var(--borda); stroke-width: 1; }
.grafico-evolucao .g-eixo { fill: var(--texto-suave); font-size: 11px; }
.grafico-evolucao .g-data { fill: var(--texto-suave); font-size: 10px; }
.grafico-evolucao .g-linha { fill: none; stroke: var(--marca); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.grafico-evolucao .g-ponto { fill: var(--marca); }
.grafico-evolucao .g-ponto-atual { fill: var(--marca-escura); }
.grafico-evolucao .g-valor { fill: var(--marca-escura); font-size: 13px; font-weight: 700; }

/* ---------- Devolutiva do vendedor ---------- */
.devolutiva-saudacao h1 { margin-top: 0; }
.dev-fortes { display: grid; gap: 12px; }
.dev-forte { background: #eef7f0; border: 1px solid #cce6d3; border-radius: var(--raio); padding: 12px 14px; }
.dev-forte-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
.dev-nota { font-weight: 700; padding: 2px 10px; border-radius: 999px; color: #fff; font-size: .85rem; }
.dev-nota.faixa-baixa { background: var(--baixa); }
.dev-nota.faixa-media { background: var(--media); }
.dev-nota.faixa-boa { background: var(--boa); }
.dev-nota.faixa-alta { background: var(--alta); }
.dev-foco { border-left: 5px solid var(--marca); }
.dev-foco h3 { margin: 6px 0 4px; color: var(--marca-escura); }
.dev-plano-sugerido { background: var(--rosa-claro); border-radius: var(--raio); padding: 12px 14px; margin-top: 10px; }
.dev-plano-sugerido p { margin: 4px 0; }
.dev-compromisso .dev-plano-itens { list-style: none; padding: 0; margin: 0 0 12px; }
.dev-plano-itens li { padding: 5px 0; border-bottom: 1px solid var(--borda); }
.dev-ciente-ok { background: #e6f4ea; color: var(--ok); border-radius: var(--raio); padding: 12px 14px; font-weight: 600; }
.dev-coment { font-style: italic; color: var(--texto); font-weight: 400; margin: 6px 0 0; }
.dev-ciencia { margin-top: 8px; }
.dev-confid { text-align: center; color: var(--texto-suave); font-size: .8rem; margin: 18px 0; }

/* Link compartilhável da devolutiva (visão do supervisor) */
.dev-link-box { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dev-link-input { flex: 1; min-width: 220px; padding: 9px 12px; border: 1px solid var(--borda); border-radius: 8px; font-size: .85rem; background: var(--bg); }
.dev-link-acoes { margin: 10px 0 0; }
.dev-ciencia-status { margin-top: 10px; font-weight: 600; }

/* Aviso informativo */
.aviso-info { background: #e8f1f8; border: 1px solid #bcdcee; color: #1c5a7a; }

/* ---------- Navegação no topo ---------- */
.topo-nav { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.topo-nav a { color: #fff; text-decoration: none; font-weight: 600; font-size: .88rem; opacity: .92; white-space: nowrap; }
.topo-nav a:hover { opacity: 1; text-decoration: underline; }
.topo-nav .link-sair { margin-left: 0; }
.topo-user { color: #fff; font-weight: 700; font-size: .88rem; opacity: .95; padding-right: 12px; border-right: 1px solid rgba(255,255,255,.35); white-space: nowrap; }

/* ---------- Histórico / filtro ---------- */
.filtro-barra { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.filtro-barra .campo { margin: 0; flex: 1; min-width: 180px; }
.filtro-acoes { display: flex; gap: 8px; }
.btn-mini { padding: 5px 12px; font-size: .82rem; }
.acoes-linha { white-space: nowrap; }
.pill-media { display: inline-block; min-width: 46px; text-align: center; font-weight: 700; color: #fff; padding: 2px 8px; border-radius: 999px; }
.pill-media.faixa-baixa { background: var(--baixa); }
.pill-media.faixa-media { background: var(--media); }
.pill-media.faixa-boa { background: var(--boa); }
.pill-media.faixa-alta { background: var(--alta); }
.tabela-historico td, .tabela-historico th { vertical-align: middle; }

/* ===================================================================
   Mapa de Clientes — layout específico (Leaflet + filtros)
   =================================================================== */
.container-largo { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 16px; }

.mapa-wrap {
    display: grid;
    grid-template-columns: var(--larg-filtros, 340px) 1fr;
    gap: 16px; align-items: stretch; margin-top: 16px;
    height: calc(100dvh - var(--h-topo, 68px) - 32px);
    min-height: 460px;
    transition: grid-template-columns .25s ease;
}
.mapa-wrap:not(.filtros-abertos) { grid-template-columns: 0 1fr; }

.mapa-filtros {
    background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
    padding: 16px; box-shadow: var(--sombra);
    position: relative; height: 100%;
    overflow-y: auto;              /* só o painel rola — some a rolagem de página */
    overscroll-behavior: contain;
    z-index: 1000;
}
.mapa-wrap:not(.filtros-abertos) .mapa-filtros { opacity: 0; pointer-events: none; }
.filtros-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.filtros-topo h2 { margin: 0; margin-right: auto; }
.mapa-filtros .campo { margin-bottom: 10px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.campo { min-width: 0; }  /* deixa o campo encolher (evita overflow do select/input no mobile) */
.filtros-resumo { margin-top: 6px; }
.filtros-acoes { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }

.mapa-area { position: relative; height: 100%; }
#mapa {
    height: 100%; min-height: 0; width: 100%;
    border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
    background: #e9eef2;
}
.mapa-carregando {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    background: rgba(255,255,255,.95); border: 1px solid var(--borda); border-radius: 8px;
    padding: 8px 16px; font-size: .85rem; color: var(--texto); box-shadow: var(--sombra); z-index: 500;
}

/* Botão flutuante "Filtros" (reabre a coluna no desktop / a gaveta no mobile) */
.mapa-fab-filtros {
    position: absolute; z-index: 800; left: 50%; bottom: 18px; transform: translateX(-50%);
    display: none; align-items: center; gap: 8px;
    background: var(--marca); color: #fff; border: none; border-radius: 999px;
    padding: 11px 18px; font: 700 .9rem/1 inherit; box-shadow: 0 3px 10px rgba(0,0,0,.3); cursor: pointer;
}
.mapa-wrap:not(.filtros-abertos) .mapa-fab-filtros { display: inline-flex; }
.btn-fechar-filtros {
    display: none; background: none; border: none; font-size: 1.4rem; line-height: 1;
    color: var(--texto-suave); cursor: pointer; padding: 0 4px;
}
.mapa-backdrop { position: fixed; inset: 0; background: rgba(61,38,36,.45); z-index: 1150; }
.mapa-backdrop[hidden] { display: none; }

/* "Mais filtros" — colapsa os 8 filtros secundários */
details.mais-filtros { margin: 4px 0 8px; }
details.mais-filtros > summary {
    cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px;
    padding: 10px 4px; font-weight: 700; font-size: .85rem; color: var(--marca);
    border-top: 1px solid var(--borda);
}
details.mais-filtros > summary::-webkit-details-marker { display: none; }
details.mais-filtros > summary::after { content: '▾'; margin-left: auto; color: var(--texto-suave); transition: transform .2s; }
details.mais-filtros[open] > summary::after { transform: rotate(180deg); }
details.mais-filtros[open] > summary { color: var(--marca-escura); }

/* Sub-seção "Exibição do mapa" */
.mapa-filtros .sub-secao { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--borda); }
.mapa-filtros .sub-titulo { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-suave); font-weight: 700; margin-bottom: 6px; }

/* Densidade — só dentro do painel do mapa (não afeta cadastros) */
.mapa-filtros .campo { margin-bottom: 8px; gap: 3px; }
.mapa-filtros .campo > span { font-size: .82rem; }
.mapa-filtros .grid-2 { gap: 8px; }
.mapa-filtros .multi-btn { padding: 7px 24px 7px 10px; }

/* Contenção de scroll nas listas internas (mata o scroll-chaining no touch) */
.multi-lista, .legenda-lista { overscroll-behavior: contain; }

@media (prefers-reduced-motion: reduce) {
    .mapa-wrap, .mapa-filtros, .mapa-backdrop { transition: none; }
}

/* Chips */
.chip { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.chip-info { color: #1b5e7a; background: #e3f0f6; }

/* Avisos extra */
.aviso-alerta { background: #fbeede; border: 1px solid #f0d9b8; color: #8a5008; padding: 12px; border-radius: 10px; font-size: .88rem; }

/* Botões extra */
.btn-peq   { padding: 5px 12px; font-size: .8rem; }
.btn-bloco { display: block; width: 100%; text-align: center; }
.btn-texto { background: none; border: none; color: var(--marca); font-weight: 700; cursor: pointer; font-size: .82rem; padding: 4px 6px; }
.btn-texto:hover { text-decoration: underline; }

/* Popups do Leaflet */
.leaflet-popup-content .pop { font-size: .85rem; line-height: 1.4; }
.pop strong { color: var(--marca-escura); font-size: .95rem; }
.pop-cod { display: inline-block; color: var(--texto-suave); font-size: .75rem; margin-left: 6px; }
.pop-end { color: var(--texto-suave); margin: 4px 0 6px; }
.pop-l { margin: 2px 0; }
.pop-editar { display: inline-block; margin-top: 8px; color: var(--marca); font-weight: 700; text-decoration: none; }
.pop-editar:hover { text-decoration: underline; }

/* Responsivo */
@media (max-width: 900px) {
    html, body { overflow-x: hidden; }

    .mapa-wrap {
        display: block; position: relative;
        height: calc(100dvh - var(--h-topo, 120px) - 8px);
        margin-top: 8px;
    }
    .mapa-area, #mapa { height: 100%; }

    /* painel vira bottom-sheet sobreposto ao mapa em tela cheia */
    .mapa-filtros {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto;
        width: auto; height: auto; max-height: 85dvh;
        border-radius: 18px 18px 0 0; border: none;
        box-shadow: 0 -8px 30px rgba(61,38,36,.28);
        transform: translateY(100%); transition: transform .28s ease;
        padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
        z-index: 1200;
    }
    .mapa-wrap.filtros-abertos .mapa-filtros { transform: translateY(0); }

    .btn-fechar-filtros { display: inline-block; }
    .filtros-topo { position: sticky; top: 0; background: #fff; z-index: 2; padding-top: 4px; }

    /* FAB visível quando a gaveta está fechada */
    .mapa-fab-filtros { display: inline-flex; }
    .mapa-wrap.filtros-abertos .mapa-fab-filtros { display: none; }

    /* alvos de toque ≥44px p/ o vendedor em campo */
    .mapa-filtros .multi-btn,
    .mapa-filtros select,
    .mapa-filtros input[type=search] { min-height: 46px; }
    .mapa-filtros .check-linha { min-height: 44px; align-items: center; }
    .mapa-filtros .btn-bloco { min-height: 48px; display: flex; align-items: center; justify-content: center; }
}

/* ---- Mapa de Clientes: páginas de cadastro/lista/geocode ---- */
.lista-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.barra-busca { display: flex; gap: 8px; margin: 12px 0 16px; }
.barra-busca input { flex: 1; }
.tabela-rolagem { overflow-x: auto; }
.vazio { color: var(--texto-suave); text-align: center; padding: 24px 10px; }
.col-acoes { white-space: nowrap; text-align: right; }
.link-acao { color: var(--marca); font-weight: 700; text-decoration: none; font-size: .82rem; background: none; border: none; cursor: pointer; padding: 2px 6px; }
.link-acao:hover { text-decoration: underline; }
.link-perigo { color: var(--erro); }

.form-cliente .grid-end { display: grid; grid-template-columns: 1fr 120px; gap: 10px; }
.form-cliente textarea { width: 100%; }
.form-acoes { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }

.progresso { height: 14px; background: var(--rosa-claro); border-radius: 999px; overflow: hidden; margin: 10px 0; }
.progresso-barra { height: 100%; background: linear-gradient(90deg, var(--marca), var(--info)); transition: width .4s ease; }
.lista-status { margin: 8px 0 0; padding-left: 20px; font-size: .9rem; }
.lista-status li { margin: 3px 0; }

@media (max-width: 600px) {
    .grid-2, .form-cliente .grid-end { grid-template-columns: minmax(0, 1fr); }
    .lista-topo { flex-wrap: wrap; }  /* título + botão "← Mapa" não brigam por espaço */
}

/* ---- Legenda de vendedores (estilo camadas do My Maps) ---- */
.mapa-legenda { margin-top: 14px; }
.mapa-legenda h3 { margin: 0 0 8px; }
.legenda-lista { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.legenda-lista li { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: .85rem; }
.legenda-cor { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.legenda-nome { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legenda-qtd { color: var(--texto-suave); font-weight: 700; font-size: .78rem; }

/* ---- Toggle de agrupamento + clusters coloridos por vendedor ---- */
.check-linha { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 4px; font-size: .85rem; cursor: pointer; }
.check-linha input { margin-top: 3px; flex: 0 0 auto; }
.check-linha small { color: var(--texto-suave); display: block; font-size: .75rem; }

.cluster-vend { background: transparent !important; }
.cluster-vend .cl {
    width: 100%; height: 100%; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: .8rem;
    border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.cluster-vend .cl span {
    background: rgba(0,0,0,.35); border-radius: 999px; padding: 1px 6px; line-height: 1.3;
}
.cluster-vend .cluster-misto { border-color: #fff; }
.cluster-vend .cluster-misto span { background: rgba(0,0,0,.55); }

/* ---- Swatch de cor editável na legenda ---- */
input.legenda-cor {
    width: 16px; height: 16px; padding: 0; border: none; border-radius: 50%;
    background: none; cursor: pointer; flex: 0 0 auto; -webkit-appearance: none; appearance: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.18);
}
input.legenda-cor::-webkit-color-swatch-wrapper { padding: 0; }
input.legenda-cor::-webkit-color-swatch { border: none; border-radius: 50%; }
input.legenda-cor::-moz-color-swatch { border: none; border-radius: 50%; }
input.legenda-cor:hover { transform: scale(1.15); }
.mapa-legenda h3 small { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--texto-suave); font-size: .72rem; }

/* ---- Filtros de multi-seleção (checkbox dropdown) ---- */
.multi { position: relative; }
.multi-btn {
    width: 100%; text-align: left; padding: 8px 26px 8px 10px; border: 1px solid var(--borda);
    border-radius: 8px; background: #fff; cursor: pointer; font: inherit; color: var(--texto);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative;
}
.multi-btn::after { content: '▾'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--texto-suave); font-size: .75rem; }
.multi-btn.tem-sel { border-color: var(--marca); color: var(--marca-escura); font-weight: 600; }
.multi-pop {
    position: absolute; z-index: 1300; top: calc(100% + 4px); left: 0; right: 0; background: #fff;
    border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 6px 20px rgba(61,38,36,.18); padding: 8px;
}
.multi-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.multi-busca { width: 100%; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 6px; font: inherit; }
.multi-acoes { display: flex; gap: 10px; }
.multi-acoes button { background: none; border: none; color: var(--marca); font-weight: 700; font-size: .74rem; cursor: pointer; padding: 2px 2px; }
.multi-acoes button:hover { text-decoration: underline; }
.multi-lista { max-height: 230px; overflow-y: auto; display: flex; flex-direction: column; }
.multi-item { display: flex; align-items: center; gap: 8px; padding: 5px 4px; font-size: .85rem; border-radius: 6px; cursor: pointer; }
.multi-item:hover { background: var(--rosa-claro); }

/* ---- Opções MARCADAS (ver assets/multi-comum.js) ----
   Numa lista de 73 cidades, sem realce o usuário não acha o que marcou nem consegue desmarcar.
   As marcadas sobem para o topo ao abrir, ganham destaque, e uma linha as separa do resto. */
.multi-item.marcado {
    background: var(--rosa-claro);
    color: var(--marca-escura);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--marca);   /* barrinha da marca à esquerda */
}
.multi-item.pos-marcado { margin-top: 6px; padding-top: 9px; border-top: 1px solid var(--borda); }

/* ---- Chips do que está marcado (fora do popover, sempre visíveis) ---- */
.multi-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.multi-chip {
    display: inline-flex; align-items: center; gap: 2px; max-width: 100%;
    background: var(--rosa-claro); border: 1px solid var(--borda); color: var(--marca-escura);
    border-radius: 999px; padding: 2px 4px 2px 10px;
    font-size: .76rem; font-weight: 600; line-height: 1.5;
}
/* Trunca o nome longo: sem isto, na coluna estreita do mapa cada chip ocupa uma linha inteira. */
.multi-chip-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 110px; }
.multi-chip-mais { padding: 2px 10px; cursor: default; opacity: .8; }
.multi-chip-x {
    border: 0; background: none; color: var(--marca); cursor: pointer; font-weight: 700;
    font-size: 1rem; line-height: 1; padding: 2px 5px; border-radius: 999px;
}
.multi-chip-x:hover { background: var(--marca); color: #fff; }
@media (max-width: 760px) {
  /* Dedo, não mouse: o "×" precisa de área de toque. */
  .multi-chip { font-size: .8rem; padding: 4px 4px 4px 12px; }
  .multi-chip-x { min-width: 30px; min-height: 30px; display: inline-flex; align-items: center; justify-content: center; }
}
.multi-item input { flex: 0 0 auto; }
.multi-vazio { padding: 8px 6px; font-size: .82rem; color: var(--texto-suave); line-height: 1.4; }
.filtro-resultado { margin: -4px 0 12px; }

/* Funil de recuperação (Reativação) — formulário de mover etapa */
.reat-mover { margin-top: 6px; }
.reat-mover > summary { list-style: none; cursor: pointer; font-size: .78rem; font-weight: 700; color: var(--marca); }
.reat-mover > summary::-webkit-details-marker { display: none; }
.reat-mover > summary::before { content: '✎ '; }
.reat-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--rosa-claro); min-width: 240px; max-width: 320px; }
.reat-form label { display: flex; flex-direction: column; gap: 2px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--texto-suave); }
.reat-form label small { font-weight: 600; text-transform: none; letter-spacing: 0; }
.reat-form input, .reat-form select { padding: 6px 8px; border: 1px solid var(--borda); border-radius: 6px; font: inherit; font-size: .85rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--texto); background: #fff; }
.reat-form .grid-2 { gap: 6px; }
.reat-form button { align-self: flex-start; margin-top: 2px; }
.link-ficha { color: var(--marca); text-decoration: none; }
.link-ficha:hover strong { text-decoration: underline; }

/* Kanban da Reativação — drag-and-drop */
.kanban-dica { margin: 0 0 10px; font-size: .82rem; }
.kanban-card[draggable="true"] { cursor: grab; }
.kanban-card[draggable="true"]:active { cursor: grabbing; }
.kanban-card.kc-arrastando { opacity: .45; }
.kanban-col-alvo { outline: 2px dashed var(--marca); outline-offset: -2px; border-radius: 10px; }
.kanban-col-alvo .kanban-col-corpo { background: var(--rosa-claro); border-radius: 8px; }
.kanban-col-hover { outline-style: solid; }
.kanban-col-hover .kanban-col-corpo { box-shadow: inset 0 0 0 2px var(--marca); }

/* Modal de confirmação (compartilhável) */
body.modal-aberto { overflow: hidden; }
.reat-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.reat-modal[hidden] { display: none; }
.reat-modal-fundo { position: absolute; inset: 0; background: rgba(30, 10, 10, .55); }
.reat-modal-caixa { position: relative; z-index: 1; width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto;
    background: var(--branco); border-radius: 14px; padding: 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, .3); }
.reat-modal-caixa h3 { margin: 0 0 6px; color: var(--marca); }
.reat-modal-x { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 1.6rem; line-height: 1;
    color: var(--texto-suave); cursor: pointer; }
.reat-modal-x:hover { color: var(--texto); }

/* Plano — ações propostas pelo gestor (viram tarefas na agenda do vendedor) */
.acoes-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.acao-item { border: 1px solid var(--borda); border-left: 3px solid var(--marca); border-radius: 8px; padding: 8px 10px; background: var(--branco); }
.acao-concluida { opacity: .6; border-left-color: #1f9d55; }
.acao-em_andamento { border-left-color: #C79A26; }
.acao-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.acao-txt { font-weight: 600; font-size: .9rem; }
.acao-acoes { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.acao-acoes form { margin: 0; }
.acoes-mini { margin-bottom: 8px; }
.acoes-mini .acao-item { font-size: .82rem; padding: 6px 8px; }
.td-acoes { min-width: 210px; }

/* Barra de filtros das listas (clientes/leads) — dropdowns multi no estilo do mapa */
/* align-items: flex-start (não flex-end): os chips das opções marcadas crescem PARA BAIXO e deixam
   os campos com alturas diferentes — alinhando pela base, a barra vira uma escada. Pelo topo, os
   rótulos ficam na mesma linha e os chips pendem sem desalinhar nada. */
.filtros-lista { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
/* Cidade/bairro precisam de espaço (nomes longos: "Teixeira de Freitas"); a busca, não — ela
   crescia sem limite (flex-grow:1) e espremia os dropdowns até truncar o nome da cidade.
   ATENÇÃO: o flex vai no .f-campo, que é o item da LINHA. Pôr flex no .multi não funciona: ele
   fica dentro do .f-campo, que é flex-direction:column — lá o flex-basis viraria ALTURA. */
/* flex-grow 0: os campos NÃO esticam (senão um sozinho na linha — ex.: o Vínculo — vira uma caixa
   larguíssima com espaço vazio, e o último da linha cola na borda). Larguras estáveis que quebram
   alinhadas à esquerda. */
.filtros-lista .f-campo { display: flex; flex-direction: column; gap: 4px; flex: 0 1 200px; min-width: 170px; max-width: 260px; }
.filtros-lista .f-campo > span { font-size: .72rem; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .02em; }
.filtros-lista .multi { width: 100%; max-width: 100%; }
.filtros-lista .f-busca { flex: 0 1 260px; min-width: 170px; max-width: 300px; }
.filtros-lista .f-uf { flex: 0 0 130px; min-width: 110px; }  /* sigla de 2 letras: não precisa esticar */
/* Select de MEI (3 opções): compacto e que ENCOLHE — sem o min-width 170px do select genérico,
   que estourava a célula estreita. */
.filtros-lista .f-mei { flex: 0 1 150px; min-width: 120px; }
.filtros-lista .f-mei select { min-width: 0; width: 100%; }
.filtros-lista .f-rota { flex: 0 1 175px; min-width: 150px; max-width: 220px; }
.filtros-lista .f-rota select { min-width: 0; width: 100%; }
/* Form de rota de visita na ficha do lead */
.rota-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.rota-form .campo { max-width: 180px; }
/* Lote de rota no funil: checkbox no card + chip + barra sticky */
.chk-lote-lbl { display: inline-flex; align-items: center; }
.chk-lote { width: 16px; height: 16px; cursor: pointer; }
.chip-rota { color: #1b5e7a; background: #e3f0f6; }
.rota-lote-bar { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 200; max-width: calc(100% - 24px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 18px; background: var(--marca-escura); color: #fff; border-radius: 999px; box-shadow: 0 8px 28px rgba(0,0,0,.32); }
.rota-lote-bar label { display: flex; align-items: center; gap: 6px; font-size: .85rem; }
.rota-lote-bar select { padding: 5px 8px; border-radius: 6px; border: 0; }
.rota-lote-info { font-weight: 700; }
/* Paginador da lista (clientes) */
.paginador { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.pag-info { font-size: .9rem; color: var(--texto-suave); }
/* Dashboard de adoção */
.dash-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.dash-filtros { display: flex; gap: 12px; flex-wrap: wrap; }
.dash-filtros label { display: flex; flex-direction: column; gap: 4px; font-size: .72rem; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; }
.dash-filtros select { padding: 6px 10px; }
.dash-aviso { background: var(--rosa-claro); border-radius: 8px; padding: 8px 12px; margin-top: 10px; }
.dash-sub { font-size: 1rem; margin: 16px 0 8px; color: var(--marca-escura); }
.dash-barras { display: flex; flex-direction: column; gap: 8px; }
.dash-linha { display: grid; grid-template-columns: minmax(90px, 170px) 1fr minmax(96px, 130px); align-items: center; gap: 10px; }
.dash-linha-lbl { font-size: .85rem; font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-barra { height: 18px; background: #eef0f2; border-radius: 6px; overflow: hidden; }
.dash-barra-fill { display: block; height: 100%; background: #1a7f37; border-radius: 6px; }
.dash-barra-fill.media { background: #8a5008; }
.dash-barra-fill.baixa { background: var(--erro); }
.dash-linha-val { font-size: .82rem; color: var(--texto-suave); }
@media (max-width: 640px) { .dash-linha { grid-template-columns: 1fr; gap: 2px; } .dash-linha-lbl, .dash-linha-val { text-align: left; } }
.filtros-lista input[type=search].campo-busca { width: 100%; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; font: inherit; }
.filtros-lista select { min-width: 170px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; font: inherit; background: #fff; color: var(--texto); }
/* Com a barra alinhada pelo topo, os botões precisam descer a altura do rótulo para ficarem na
   mesma linha dos campos (eles não têm rótulo acima). */
.filtros-lista .f-acoes { display: flex; gap: 8px; margin-left: auto; align-items: flex-start; margin-top: 21px; }
@media (max-width: 760px) {
  .filtros-lista .multi, .filtros-lista .f-campo, .filtros-lista .f-busca { width: 100%; flex-basis: 100%; }
  /* Os botões (Filtrar/Limpar/Exportar CSV) quebram linha e crescem para caber — sem wrap o
     "Exportar CSV" estourava a largura do cartão no celular. */
  .filtros-lista .f-acoes { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .filtros-lista .f-acoes .btn { flex: 1 1 auto; }
}

/* ---- Leads (prospecção): marcadores de cidade e painel ---- */
/* ---- Grupos de filtro (Equipe / Rota) ---- */
/* UF tem só 2 letras; a Cidade tem nomes longos → dar mais espaço à Cidade (não 50/50). */
.grid-uf-cid { display: grid; gap: 10px; grid-template-columns: 92px minmax(0, 1fr); }
.filtro-grupo { margin: 12px 0 2px; }
.filtro-grupo-tit { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; color: var(--marca-escura); font-weight: 800; margin-bottom: 6px; }
.filtro-grupo-tit small { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--texto-suave); margin-left: 4px; }

/* ---- Contador (texto muted, não mais o chip azul) ---- */
.chip-contador { display: inline-block; font-size: .82rem; color: var(--texto-suave); font-weight: 700; }

/* ---- Card de prospecção (leads) ---- */
.leads-card { margin-top: 14px; border: 1px solid var(--borda); border-left: 3px solid #6D28D9; border-radius: 10px; padding: 12px; background: #fff; }
.leads-card-cab { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.leads-card-cab .sub-titulo { margin: 0; }
.switch-linha { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--texto); }
.switch-linha input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-ui { position: relative; flex: 0 0 auto; width: 40px; height: 22px; border-radius: 999px; background: #cfcaca; transition: background .18s; }
.switch-ui::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s; }
.switch-linha input:checked + .switch-ui { background: #6D28D9; }
.switch-linha input:checked + .switch-ui::after { transform: translateX(18px); }
.switch-linha input:focus-visible + .switch-ui { box-shadow: 0 0 0 3px rgba(109,40,217,.35); }
.switch-txt { flex: 1; }
.check-sub { margin: 10px 0 4px 12px; padding-left: 8px; border-left: 2px solid var(--borda); }
.check-sub[hidden] { display: none; }  /* [hidden] precisa vencer o display:flex de .check-linha */
.leads-resumo { font-size: .78rem; color: var(--texto-suave); margin: 8px 0 2px; }
.leads-legenda { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0; font-size: .78rem; color: var(--texto); }
.leads-legenda .leg-item { display: flex; align-items: center; gap: 6px; }
.leads-legenda .legenda-cor { width: 11px; height: 11px; border-width: 1px; }
.leads-hint { font-size: .72rem; color: var(--texto-suave); margin: 2px 0 8px; font-style: italic; }
.leads-control { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borda); }
.lead-wrap { background: transparent !important; }
.lead-cidade {
    width: 100%; height: 100%; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    background: #6D28D9; color: #fff; font-weight: 800; font-size: .78rem;
    border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.45);
}

/* ---- Botão "Sair" via form POST (proteção CSRF) — preserva a aparência do antigo link ---- */
.form-sair { display: inline-flex; margin: 0; }
.form-sair .link-sair { background: none; cursor: pointer; font-family: inherit; line-height: 1.2; }

/* ---- CRM: badges de vínculo lead ↔ cliente (padrão Alinutri) ---- */
.chip-vinculo-forte { color: var(--marca-escura); background: var(--rosa-claro); }  /* filial / dono é cliente */
.chip-vinculo       { color: #8a5008;             background: #fbeede; }            /* mesmo dono (sócio) */
.chip-vinculo-ex    { color: #1b5e7a;             background: #e3f0f6; }            /* reconquista (ex-cliente) */
.chip-alerta        { color: #8a5008;             background: #fdebd0; }            /* conflito de vendedor */
/* =========================================================
   CRM Listas (Leads / Reativação) — desespremer + cartões no mobile
   ========================================================= */
/* (A) Pílula CURTA — nunca quebra em várias linhas (mata a "bolha oval"). */
td .chip { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
/* (B) Detalhe do vínculo/contato: linha suave abaixo da pílula. */
.cel-det { color: var(--texto-suave); font-size: .78rem; line-height: 1.35; margin-top: 4px; }
/* (C) Nome = âncora visual da linha (cor da marca). */
.tabela td strong { display: inline-block; font-size: .95rem; font-weight: 700; color: var(--marca-escura); line-height: 1.3; }
/* Nome do lead como link para a ficha (mesmo peso visual do strong). */
.lead-nome { display: inline-block; font-size: .95rem; font-weight: 700; color: var(--marca-escura); line-height: 1.3; text-decoration: none; }
.lead-nome:hover { text-decoration: underline; }
/* Selo de vínculo clicável (abre a ficha) — sem cara de link, o realce é no hover. */
.chip-link { text-decoration: none; display: inline-block; cursor: pointer; }
.chip-link:hover .chip { filter: brightness(.96); box-shadow: 0 1px 4px rgba(99,10,15,.18); }
/* (D) Endereço: recorte aplicado a um DIV interno (nunca ao <td>, senão a célula sai do
   fluxo da tabela e desalinha). Coluna mais larga; até 3 linhas. */
.col-end { min-width: 230px; }
.cel-end { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 340px; }
/* (E) Telefone legível e alinhado. */
.cel-tel { font-variant-numeric: tabular-nums; }
/* (F) Respiro + zebra sutil (some no modo cartão). */
.tabela td { padding: 12px 10px; overflow-wrap: anywhere; }
.tabela tbody tr:nth-child(even) { background: #faf6f6; }
/* (G) Etiqueta de status NÃO-clicável — tira a afordância enganosa de botão. */
.chip-tag { background: transparent; border: 1px solid var(--borda); color: var(--texto-suave); font-weight: 600; }
/* (H) Botões de contato numa faixa (some o empilhamento no desktop). */
.acoes-contato { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 6px; }
.acoes-contato .btn-peq { padding: 5px 10px; }

/* ---------- MOBILE: a tabela vira cartões (mata o scroll horizontal) ---------- */
@media (max-width: 760px) {
  .tabela-rolagem { overflow-x: visible; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabela tbody tr { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 14px 16px; margin-bottom: 12px; }
  .tabela tbody tr:nth-child(even) { background: #fff; }
  .tabela td { border: none; padding: 5px 0; }
  .tabela td[data-rotulo]::before {
    content: attr(data-rotulo); display: block;
    font-size: .66rem; text-transform: uppercase; letter-spacing: .4px;
    color: var(--texto-suave); font-weight: 700; margin-bottom: 2px;
  }
  .tabela td:first-child { padding: 0 0 8px; margin-bottom: 6px; border-bottom: 1px solid var(--borda); }
  .tabela td:first-child::before { content: none; }
  .cel-end { -webkit-line-clamp: 3; max-width: none; }
  .tabela .vazio { padding-left: 0; }
  .tabela .vazio::before { content: none; }
  .acoes-contato { display: flex; flex-wrap: wrap; gap: 8px; }
  .acoes-contato .btn-peq { flex: 1 1 40%; min-height: 44px; padding: 10px 6px; font-size: .9rem; display: flex; align-items: center; justify-content: center; }
}

/* Navegação do topo: quebra em várias linhas no mobile (evita corte / scroll horizontal). */
@media (max-width: 760px) {
  .topo-inner { flex-wrap: wrap; gap: 8px 14px; }
  .topo-nav { flex-wrap: wrap; gap: 10px 14px; margin-left: 0; width: 100%; }
}
/* Pino de lead com vínculo no mapa: gota laranja (destaque sobre os leads comuns) */
.lead-vinculo {
    width: 100%; height: 100%; border-radius: 50% 50% 50% 3px; transform: rotate(-45deg);
    background: var(--alerta); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.45);
}
/* Lead comum (sem vínculo): ponto roxo pequeno no endereço real */
.lead-ponto {
    width: 100%; height: 100%; border-radius: 50%;
    background: #6D28D9; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
/* Agrupamento de leads por proximidade (afastado) — abre em pinos ao dar zoom */
.lead-cluster {
    width: 100%; height: 100%; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #6D28D9; color: #fff; font-weight: 800; font-size: .82rem;
    border: 3px solid rgba(255,255,255,.85); box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.lead-cluster-vinc { box-shadow: 0 0 0 3px var(--alerta), 0 2px 8px rgba(0,0,0,.45); } /* contém lead(s) com vínculo */

/* ======================= PAINEL DE ATRIBUIÇÃO (atribuicao.php) ======================= */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .grid-3 { grid-template-columns: minmax(0, 1fr); } }

/* Cartões-contadores por fila (clicáveis = filtro rápido) */
.fila-cards { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 16px; }
.fila-card {
    flex: 1 1 120px; min-width: 110px; text-decoration: none;
    background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
    padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; transition: box-shadow .15s, border-color .15s;
}
.fila-card:hover { box-shadow: var(--sombra); border-color: #d9b9b9; }
.fila-card-ativo { border-color: var(--marca); box-shadow: 0 0 0 2px rgba(199,38,38,.12); }
.fila-card-num { font-size: 1.5rem; font-weight: 800; color: var(--marca-escura); line-height: 1.1; }
.fila-card-lbl { font-size: .74rem; color: var(--texto-suave); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.fila-card-critico .fila-card-num { color: var(--erro); }
.fila-card-fechados { border-style: dashed; }
.fila-card-fechados .fila-card-num { color: var(--texto-suave); }

/* Barra de ação em lote */
.barra-lote {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    background: var(--rosa-claro); border: 1px solid var(--borda); border-radius: 10px;
    padding: 10px 12px; margin-bottom: 12px;
}
.barra-lote .lote-sep { color: var(--texto-suave); font-weight: 700; }
.lote-check { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600; color: var(--texto); white-space: nowrap; }
.lote-check input { width: 18px; height: 18px; }
.lote-select { padding: 7px 10px; border: 1px solid var(--borda); border-radius: 8px; background: #fff; max-width: 220px; }
.lote-motivo { flex: 1 1 200px; min-width: 160px; padding: 7px 10px; border: 1px solid var(--borda); border-radius: 8px; }
.lote-tudo { color: var(--marca-escura); }

/* Tabela de atribuição */
.tabela-atrib .col-chk { width: 34px; text-align: center; }
.tabela-atrib .chk-lead, .tabela-atrib #chk-todos { width: 18px; height: 18px; }
.linha-critica { box-shadow: inset 3px 0 0 var(--erro); }
.linha-critica td:first-child { position: relative; }

/* Chips de fila */
.chip-fila-ok  { color: var(--ok);          background: #e6f4ea; }
.chip-fila-pool{ color: #1b5e7a;            background: #e3f0f6; }
.chip-fila-sat { color: #8a5008;            background: #fbeede; }
.chip-fila-agu { color: #5b3a86;            background: #ede4f5; }
.chip-fila-exp { color: var(--texto-suave); background: #eee; }
.chip-fila-arb { color: #9a3324;            background: #f7e0da; }  /* disputa de fronteira: conflito (distinto da expansão) */
/* Chips de confiança */
.chip-conf-alta  { color: var(--ok);   background: #e6f4ea; }
.chip-conf-media { color: #b5670f;     background: #fbeede; }
.chip-conf-baixa { color: var(--erro); background: #fbe3e3; }
/* Crítico e trava */
.chip-critico { color: #fff; background: var(--erro); }
.chip-trava   { background: transparent; border: 1px solid var(--borda); color: var(--texto-suave); font-weight: 600; padding: 3px 8px; }

@media (max-width: 760px) {
  .fila-cards { gap: 8px; }
  .fila-card { flex: 1 1 calc(50% - 4px); min-width: 0; }         /* 2 por linha, sem estourar a viewport */
  .fila-card-num { font-size: 1.3rem; }
  .barra-lote { position: sticky; top: 0; z-index: 5; }
  .lote-check, .lote-select, .lote-motivo, .lote-tudo { flex: 1 1 100%; max-width: none; }
  .barra-lote .btn-peq { flex: 1 1 45%; }
  .tabela-atrib .col-chk { position: absolute; right: 12px; top: 12px; width: auto; }
}

/* ======================= MEUS LEADS / FUNIL (meus_leads.php, lead.php) ======================= */
/* Grupo por cidade */
.grupo-cidade { padding-top: 14px; }
.grupo-cidade-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--borda); }
.grupo-cidade-cab h2 { font-size: 1.06rem; color: var(--marca-escura); margin: 0; }
.grupo-uf { color: var(--texto-suave); font-weight: 600; }
.grupo-cidade-meta { display: flex; align-items: center; gap: 8px; }

/* Grade de cartões de lead: 1 col mobile, 2-3 no desktop */
.leads-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.lead-cartao { border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px; background: var(--branco); display: flex; flex-direction: column; gap: 8px; }
.lead-cartao-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; text-decoration: none; }
.lead-cartao-topo .chip { flex-shrink: 0; }
.lead-cartao-nome { font-weight: 700; color: var(--marca-escura); line-height: 1.25; min-width: 0; flex: 1; }
.lead-cartao-topo:hover .lead-cartao-nome { text-decoration: underline; }
.lead-cartao-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lead-cartao-prox { font-size: .86rem; background: #fbeede; color: #8a5008; border-radius: 8px; padding: 6px 10px; }
.lead-cartao-prox.prox-atrasado { background: #fbe3e3; color: var(--erro); font-weight: 600; }
.lead-cartao .acoes-contato { flex-wrap: wrap; margin-top: 2px; }
/* Selo de prioridade do lead (SDR): A quente · B morno · C frio */
.selo-faixa { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-items: center; font-weight: 800; font-size: .82rem; line-height: 1; vertical-align: middle; }
.selo-faixa.fa { background: var(--marca); color: #fff; }
.selo-faixa.fb { background: #fbeede; color: #8a5008; }
.selo-faixa.fc { background: #eef0f2; color: var(--texto-suave); }
.lead-cartao-porque { font-size: .82rem; color: var(--texto-suave); line-height: 1.3; display: flex; gap: 5px; }
.lead-porque { margin: 10px 0 0; padding: 8px 12px; background: var(--rosa-claro); border-radius: 8px; font-size: .9rem; color: var(--marca-escura); line-height: 1.35; }
.bant-hint { font-size: .82rem; color: var(--marca); margin: 0 0 8px; }
/* Painel de prioridades (admin) */
.prio-cards { display: flex; flex-wrap: wrap; gap: 12px; }
.prio-card { flex: 1 1 120px; min-width: 110px; border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.prio-card strong { font-size: 1.5rem; color: var(--marca-escura); line-height: 1; }
.prio-card span { font-size: .78rem; color: var(--texto-suave); }
.prio-card .pf-a { color: var(--marca); }
.prio-card .pf-b { color: #8a5008; }
.prio-form-ia { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
/* Atividade no Google (Places) */
.lead-atividade { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ativ-selo { font-size: .82rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.ativ-selo.ativ-ok   { background: #e6f4ea; color: #1a7f37; }
.ativ-selo.ativ-warn { background: #fbeede; color: #8a5008; }
.ativ-selo.ativ-bad  { background: #fbe3e3; color: var(--erro); }
.ativ-selo.ativ-none { background: #eef0f2; color: var(--texto-suave); }
.ativ-info { font-size: .8rem; color: var(--texto-suave); }
a.ativ-info { text-decoration: underline; }
.ativ-form { margin: 0; }
.g-dot { font-size: .8rem; vertical-align: middle; }
/* Legenda das situações (atribuição) */
.situacao-legenda { margin: 12px 0; border: 1px solid var(--borda); border-radius: 10px; padding: 10px 14px; background: var(--rosa-claro); }
.situacao-legenda summary { cursor: pointer; font-weight: 600; color: var(--marca-escura); }
.situacao-legenda dl { margin: 10px 0 0; }
.situacao-legenda dt { font-weight: 700; color: var(--marca-escura); margin-top: 8px; }
.situacao-legenda dd { margin: 2px 0 0; font-size: .9rem; }

/* Chips de etapa do funil */
.chip-etapa-novo      { color: var(--texto-suave); background: #eee; }
.chip-etapa-andamento { color: #1b5e7a;            background: #e3f0f6; }
.chip-etapa-quente    { color: #8a5008;            background: #fbeede; }
.chip-etapa-ganho     { color: var(--ok);          background: #e6f4ea; }
.chip-etapa-perdido   { color: var(--erro);        background: #fbe3e3; }
/* Uma COR por etapa do funil (chip .chip-et-<slug>) */
.chip-et-a_contatar      { color: #5f6672; background: #eceef1; }  /* cinza — novo, nao abordado */
.chip-et-em_contato      { color: #1b5e7a; background: #e1eff7; }  /* azul — conversa iniciada */
.chip-et-qualificado     { color: #5b3a86; background: #ece1f6; }  /* roxo — perfil confirmado */
.chip-et-visita_agendada { color: #b5670f; background: #fbe6d3; }  /* laranja — visita marcada */
.chip-et-negociacao      { color: #8a6d0a; background: #f7efc6; }  /* dourado — fechando pedido */
.chip-et-cadastro        { color: #0f6b6b; background: #d7efef; }  /* teal — gate de cadastro/credito */
.chip-et-ganho           { color: #22823c; background: #dff3e6; }  /* verde — virou cliente */
.chip-et-perdido         { color: #c72626; background: #fbe0e0; }  /* vermelho — nao converteu */
.chip-et-descartado      { color: #7a6a6a; background: #e9e1e1; }  /* cinza-escuro — sem perfil */

@media (max-width: 760px) {
  .leads-grade { grid-template-columns: 1fr; }
  .lead-cartao .acoes-contato .btn-peq { flex: 1 1 auto; min-height: 40px; display: flex; align-items: center; justify-content: center; }
}

/* Chips no topo da ficha */
.lead-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* Stepper do funil (ficha) */
.funil-stepper { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fp { padding: 6px 12px; border-radius: 999px; font-size: .82rem; font-weight: 700; background: #eee; color: var(--texto-suave); position: relative; }
.fp-feito { background: #e6f4ea; color: var(--ok); }
.fp-atual { background: var(--marca); color: #fff; box-shadow: 0 1px 4px rgba(199,38,38,.3); }
.fp-atual.fp-perdido, .fp-atual.fp-descartado { background: var(--erro); }
.fp-atual.fp-ganho { background: var(--ok); }
.funil-form { margin-top: 6px; }
/* Checklist BANT (qualificacao) */
.bant-box { border: 1px solid var(--borda); border-radius: 8px; padding: 8px 12px 10px; margin: 0; }
.bant-box legend { font-size: .82rem; font-weight: 700; color: var(--marca-escura); padding: 0 6px; }
.bant-check { display: flex; align-items: center; gap: 8px; margin: 5px 0; font-size: .9rem; color: var(--texto); }
.bant-check input { width: 17px; height: 17px; flex-shrink: 0; }
/* Fechados — motivos agrupados */
.motivos-lista { display: flex; flex-direction: column; gap: 8px; }
.motivo-item { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.motivo-item:hover .motivo-nome { text-decoration: underline; }
.motivo-nome { flex: 0 0 210px; color: var(--texto); font-size: .9rem; }
.motivo-barra { flex: 1; height: 12px; background: #eee; border-radius: 999px; overflow: hidden; min-width: 60px; }
.motivo-barra-fill { display: block; height: 100%; border-radius: 999px; }
.motivo-q { flex: 0 0 auto; font-weight: 700; color: var(--marca-escura); min-width: 30px; text-align: right; }
@media (max-width: 760px) { .motivo-nome { flex-basis: 130px; } }

/* Timeline do histórico */
.linha-tempo { list-style: none; margin: 6px 0 0; padding: 0; }
.lt-item { position: relative; padding: 10px 0 12px 18px; border-left: 2px solid var(--borda); }
.lt-item::before { content: ''; position: absolute; left: -7px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--marca); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--borda); }
.lt-item.lt-nota::before { background: var(--info); }
.lt-item.lt-pegar::before { background: var(--ok); }
.lt-item:last-child { border-left-color: transparent; }
.lt-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lt-titulo { font-weight: 600; color: var(--texto); }
.lt-quando { margin-left: auto; }
.lt-obs { margin: 4px 0; color: var(--texto); }
.lt-motivo { font-size: .86rem; color: var(--erro); background: #fbe3e3; border-radius: 6px; padding: 3px 8px; display: inline-block; margin: 2px 0; }
.lt-autor { margin-top: 2px; }

/* ======================= AJUDA / MANUAL (ajuda.php) ======================= */
.ajuda-indice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ajuda-indice a { text-decoration: none; font-size: .84rem; font-weight: 600; color: var(--marca-escura); background: var(--rosa-claro); border-radius: 999px; padding: 5px 12px; }
.ajuda-indice a:hover { filter: brightness(.97); }
.ajuda-lista { margin: 6px 0 0; }
.ajuda-lista dt { font-weight: 700; color: var(--marca-escura); margin-top: 12px; }
.ajuda-lista dd { margin: 3px 0 0; color: var(--texto); }
.ajuda-passos { margin: 6px 0 0; padding-left: 20px; }
.ajuda-passos li { margin: 8px 0; }
.ajuda-lista-simples { margin: 6px 0 0; padding-left: 20px; }
.ajuda-lista-simples li { margin: 6px 0; }
/* Âncoras do índice: dá folga para o alvo não colar no topo ao rolar (afeta só cartões com id). */
.cartao[id] { scroll-margin-top: 20px; }

/* ======================= KANBAN + toggle (meus_leads.php) ======================= */
.ml-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ml-toggle { display: inline-flex; border: 1px solid var(--borda); border-radius: 999px; overflow: hidden; }
.ml-toggle a { text-decoration: none; font-size: .84rem; font-weight: 600; color: var(--texto-suave); padding: 6px 14px; }
.ml-toggle a.ativo { background: var(--marca); color: #fff; }
/* Seletor de vendedor (gestor) */
.ml-seletor { display: flex; align-items: flex-end; gap: 10px; margin: 4px 0 10px; }
.ml-seletor .campo { max-width: 340px; margin: 0; }
/* Filtros de gestão (busca/cidade/bairro) */
/* flex-start, não center: os chips das opções marcadas crescem para baixo; centralizado, a barra
   viraria escada (mesmo motivo do .filtros-lista). Aqui os controles não têm rótulo acima, então
   basta alinhar pelo topo. */
.ml-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; align-items: flex-start; }
.ml-filtros input { padding: 7px 10px; border: 1px solid var(--borda); border-radius: 8px; font-size: .9rem; }
/* Mesma inversão de prioridade da .filtros-lista: quem cresce é cidade/bairro, não a busca. */
.ml-filtros input[name="busca"] { flex: 0 1 240px; min-width: 150px; max-width: 280px; }
.ml-filtros .multi { flex: 1 1 200px; min-width: 170px; width: auto; }
.ml-filtros select.filtro-multi { flex: 1 1 200px; min-width: 170px; padding: 7px 10px; border: 1px solid var(--borda); border-radius: 8px; font-size: .9rem; background: #fff; color: var(--texto); }
.ml-filtros .ml-mei { flex: 0 1 130px; min-width: 110px; padding: 7px 10px; border: 1px solid var(--borda); border-radius: 8px; font-size: .9rem; background: #fff; color: var(--texto); }
/* Tabela-resumo do funil por vendedor */
.tabela-resumo th, .tabela-resumo td { text-align: center; }
.tabela-resumo th:first-child, .tabela-resumo td:first-child { text-align: left; }
.tabela-resumo td .chip-etapa-perdido { padding: 2px 8px; }

.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.kanban-col { flex: 0 0 260px; background: var(--bg); border: 1px solid var(--borda); border-radius: 10px; display: flex; flex-direction: column; max-height: 78vh; }
.kanban-col-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--borda); position: sticky; top: 0; background: var(--bg); border-radius: 10px 10px 0 0; }
.kanban-col-corpo { padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.kanban-card { display: flex; flex-direction: column; gap: 3px; background: var(--branco); border: 1px solid var(--borda); border-radius: 8px; padding: 9px 11px; text-decoration: none; }
.kanban-card:hover { box-shadow: var(--sombra); border-color: #d9b9b9; }
.kanban-card-nome { font-weight: 700; color: var(--marca-escura); font-size: .88rem; line-height: 1.25; }
.kanban-card-prox { font-size: .78rem; background: #fbeede; color: #8a5008; border-radius: 6px; padding: 2px 6px; }
.kanban-card-prox.prox-atrasado { background: #fbe3e3; color: var(--erro); font-weight: 600; }
.kanban-vazio { color: var(--texto-suave); text-align: center; padding: 12px 0; }
.kanban-mais { text-align: center; font-size: .8rem; font-weight: 600; color: var(--marca); text-decoration: none; padding: 4px; }

/* ======================= CONTATOS (lead.php) ======================= */
.contato-receita { background: var(--bg); border: 1px dashed var(--borda); border-radius: 8px; padding: 8px 12px; font-size: .9rem; margin-bottom: 12px; }
.contatos-lista { display: flex; flex-direction: column; gap: 8px; }
.contato-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px; }
.contato-item.contato-principal { border-color: var(--ok); box-shadow: inset 3px 0 0 var(--ok); }
.contato-info { min-width: 0; }
.contato-acoes { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.contato-acoes form { margin: 0; }
.contato-check { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: .88rem; }
.contato-check input { width: 18px; height: 18px; }
@media (max-width: 760px) { .contato-item { flex-direction: column; } .contato-acoes { flex-direction: row; } }

/* ======================= PLANO DE PROSPECÇÃO (plano.php) ======================= */
.plano-periodo { display: flex; align-items: center; gap: 12px; margin: 6px 0 10px; font-size: 1.05rem; }
.plano-periodo strong { color: var(--marca-escura); }
/* Barra de progresso realizado × meta */
.barra-prog { height: 8px; background: #eee; border-radius: 999px; overflow: hidden; }
.barra-prog-fill { height: 100%; background: var(--texto-suave); border-radius: 999px; }
.barra-prog-fill.barra-baixa { background: var(--erro); }
.barra-prog-fill.barra-media { background: var(--alerta); }
.barra-prog-fill.barra-ok    { background: var(--ok); }
.barra-prog-txt { font-size: .84rem; margin-top: 3px; color: var(--texto); }
/* Cards do vendedor */
.plano-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.plano-card { border: 1px solid var(--borda); border-radius: 10px; padding: 14px; }
.plano-card-lbl { font-weight: 700; color: var(--marca-escura); margin-bottom: 10px; }
/* Tabela do gestor */
.tabela-plano .plano-celula { min-width: 120px; }
.plano-meta { display: block; font-size: .78rem; color: var(--texto-suave); margin-bottom: 6px; }
.plano-meta input { width: 64px; padding: 4px 6px; border: 1px solid var(--borda); border-radius: 6px; margin-left: 4px; }

/* ======================= AGENDA (agenda.php) ======================= */
.agenda-dia { padding-top: 14px; }
.agenda-dia-cab { font-size: 1.05rem; color: var(--marca-escura); margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
.agenda-dia.agenda-atrasado { box-shadow: inset 3px 0 0 var(--erro); }
.agenda-itens { display: flex; flex-direction: column; gap: 8px; }
.agenda-item { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px; }
.agenda-icone { font-size: 1.1rem; flex-shrink: 0; }
.agenda-info { min-width: 0; flex: 1; }
.agenda-titulo { color: var(--texto); }
.agenda-item.agenda-feito .agenda-titulo { text-decoration: line-through; color: var(--texto-suave); }
.agenda-acoes { display: flex; gap: 6px; flex-shrink: 0; }
.agenda-acoes form { margin: 0; }

/* Calendário mensal da agenda */
.cal-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.cal-titulo { margin: 0 auto 0 4px; font-size: 1.15rem; color: var(--marca-escura); }
.cal-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-cab { text-align: center; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); padding: 4px 0; }
.cal-dia { border: 1px solid var(--borda); border-radius: 8px; min-height: 96px; padding: 5px 6px; display: flex; flex-direction: column; gap: 4px; background: #fff; }
.cal-dia.cal-fora { background: #faf8f7; opacity: .55; }
.cal-dia.cal-hoje-dia { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.cal-dia-num { font-size: .8rem; font-weight: 700; color: var(--texto-suave); }
.cal-hoje-dia .cal-dia-num { color: var(--marca); }
.cal-dia-eventos { display: flex; flex-direction: column; gap: 3px; }
.cal-ev { font-size: .72rem; line-height: 1.25; padding: 2px 5px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; border-left: 3px solid transparent; display: block; }
a.cal-ev:hover { filter: brightness(.97); text-decoration: none; }
.cal-ev-visita   { background: #e7f0ff; color: #1c3f73; border-left-color: #3a6fbf; }
.cal-ev-ligacao  { background: #eae1f6; color: #4b2e78; border-left-color: #6f47b0; }
.cal-ev-tarefa   { background: #e3f3ea; color: #1c6b3a; border-left-color: #2f9457; }
.cal-ev-outro    { background: #eef0f2; color: #4a5560; border-left-color: #8a97a3; }
.cal-ev-passo    { background: #fbeede; color: #8a5008; border-left-color: #d98a08; }
.cal-ev-feito    { opacity: .5; text-decoration: line-through; }
.cal-ev-atrasado { box-shadow: inset 0 0 0 1px var(--erro); }
.cal-mais { font-size: .68rem; color: var(--texto-suave); padding: 1px 4px; }
@media (max-width: 760px) {
  .cal-grade { gap: 3px; }
  .cal-dia { min-height: 66px; padding: 3px; }
  .cal-cab { font-size: .58rem; }
  .cal-ev { font-size: .58rem; padding: 1px 3px; }
  .cal-dia-num { font-size: .7rem; }
}

/* ======================= Menu dropdown (topo-nav) ======================= */
.nav-drop { position: relative; }
.nav-drop > summary { list-style: none; cursor: pointer; color: #fff; opacity: .92; font-size: .88rem; font-weight: 600; white-space: nowrap; }
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary::after { content: ' ▾'; font-size: .7em; }
.nav-drop[open] > summary { opacity: 1; }
.nav-drop-menu { position: absolute; top: 100%; left: 0; margin-top: 8px; background: #fff; border: 1px solid var(--borda);
    border-radius: 10px; box-shadow: 0 6px 20px rgba(61,38,36,.18); padding: 6px; min-width: 170px; z-index: 50; display: none; flex-direction: column; }
.nav-drop[open] > .nav-drop-menu { display: flex; }  /* só aparece quando o <details> está aberto */
.nav-drop-menu a { color: var(--texto) !important; padding: 8px 12px; border-radius: 6px; white-space: nowrap; text-decoration: none; }
.nav-drop-menu a:hover { background: var(--rosa-claro); }
.topo-nav .topo-user { margin-left: auto; }  /* empurra usuário + Sair p/ a direita */

/* ---------- Hambúrguer: só existe no celular ---------- */
.nav-toggle {
    display: none; margin-left: auto; cursor: pointer; padding: 0;
    width: 46px; height: 46px; border-radius: 10px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3);
    flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.nav-toggle:hover { background: rgba(255,255,255,.2); }
.nav-toggle-barra { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform .18s ease, opacity .18s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-barra:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-barra:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-barra:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 760px) {
  .nav-toggle { display: flex; }

  /* Sem JS o nav continua visível e usável; o nav.js marca body.nav-js e só então ele
     vira gaveta — assim o menu nunca fica inacessível se o script falhar. */
  body.nav-js .topo-nav { display: none; }
  body.nav-js .topo-nav.aberto { display: flex; }

  .topo-nav {
    flex-basis: 100%; margin-left: 0; margin-top: 10px; padding-top: 10px;
    flex-direction: column; align-items: stretch; gap: 2px;
    border-top: 1px solid rgba(255,255,255,.22);
  }
  /* Alvo de toque de 48px — o vendedor usa isso em pé, na rua. */
  .topo-nav > a, .nav-drop > summary {
    display: flex; align-items: center; min-height: 48px;
    padding: 0 12px; border-radius: 10px; font-size: 1rem; opacity: 1;
  }
  .topo-nav > a:hover, .nav-drop > summary:hover { background: rgba(255,255,255,.14); text-decoration: none; }
  .nav-drop { width: 100%; }
  .nav-drop > summary { justify-content: space-between; }
  .nav-drop[open] > .nav-drop-menu {
    position: static; margin: 2px 0 6px; padding: 4px; box-shadow: none;
    background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2);
  }
  .nav-drop-menu a { color: #fff !important; display: flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: .95rem; }
  .nav-drop-menu a:hover { background: rgba(255,255,255,.16); }

  .topo-nav .topo-user {
    margin-left: 0; border-right: 0; padding: 12px 12px 4px; opacity: .8;
    font-size: .78rem; text-transform: uppercase; letter-spacing: .5px;
  }
  .form-sair { width: 100%; }
  .topo-nav .link-sair { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-left: 0; font-size: 1rem; }
}

/* ======================= Alvos de toque no celular =======================
   Mínimo de 44px (WCAG 2.5.5 / Apple HIG). O app é usado em pé, na rua, com uma mão:
   botão pequeno demais é erro de clique, não detalhe estético. */
@media (max-width: 760px) {
  .btn, .btn-peq, .btn-mini { min-height: 44px; }
  .btn-peq, .btn-mini { padding: 8px 14px; font-size: .88rem; }
  .btn-texto { min-height: 44px; padding: 8px 10px; font-size: .88rem; }

  /* Ações lado a lado (listas de clientes/leads/reativação): quebram em vez de espremer. */
  .acoes, .acoes-linha, .linha-acoes { display: flex; flex-wrap: wrap; gap: 8px; }

  /* 16px no campo evita o zoom automático do iOS ao focar — a tela "pula" e desorienta. */
  input, select, textarea { font-size: 16px; }

  /* Checkbox/radio de dedo, não de mouse. */
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
}

/* ======================= ACOMPANHAMENTO (apoio de vendas) ======================= */
/* Sintonizador da rota: equipe/vendedor lado a lado dentro da mesma célula do grid. */
.acomp-eq { display: flex; gap: 10px; flex-wrap: wrap; }
.acomp-eq .campo { flex: 1 1 140px; margin: 0; }

/* Direcionamento em destaque: o coração da ficha — o que o vendedor precisa fazer na visita. */
.acomp-direc { border-left: 4px solid var(--marca); background: linear-gradient(180deg, var(--rosa-claro), var(--branco) 60%); }
.acomp-direc h2 { color: var(--marca-escura); }
.acomp-direc-corpo { display: flex; flex-direction: column; gap: 8px; }
.acomp-direc-corpo .chip { align-self: flex-start; }
.acomp-foco { font-weight: 700; }
.acomp-direc-txt { font-size: 1.02rem; line-height: 1.5; color: var(--texto); margin: 2px 0; }

/* Pendências (tarefas abertas na agenda do vendedor). */
.acomp-pend { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.acomp-pend li { background: var(--bg); border: 1px solid var(--borda); border-radius: 8px; padding: 8px 12px; font-size: .92rem; }
.acomp-pend li.prox-atrasado { border-color: var(--erro); color: var(--erro); }

/* Anexos: grade de miniaturas com download por escopo. */
.anexos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 12px; }
.anexo-card { position: relative; border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; background: var(--branco); display: flex; flex-direction: column; }
.anexo-mini { display: flex; align-items: center; justify-content: center; height: 110px; background: var(--bg); text-decoration: none; overflow: hidden; }
.anexo-mini img { width: 100%; height: 100%; object-fit: cover; }
.anexo-ext { font-weight: 800; letter-spacing: .04em; color: var(--marca-escura); font-size: 1.1rem; background: var(--rosa-claro); border-radius: 8px; padding: 10px 16px; }
.anexo-info { display: flex; flex-direction: column; gap: 4px; padding: 9px 11px; min-width: 0; }
.anexo-info .chip { align-self: flex-start; }
.anexo-nome { font-weight: 600; color: var(--marca-escura); text-decoration: none; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anexo-nome:hover { text-decoration: underline; }
.anexo-card form { position: absolute; top: 6px; right: 6px; margin: 0; }
.anexo-card form .link-perigo { background: rgba(255,255,255,.9); border-radius: 50%; width: 26px; height: 26px; line-height: 24px; text-align: center; display: inline-block; padding: 0; }

/* Checklist de positivação (mix): itens marcáveis pelo vendedor. */
.chk-lista { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.chk-item { display: flex; align-items: center; gap: 10px; background: var(--branco); border: 1px solid var(--borda); border-radius: 8px; padding: 8px 10px; }
.chk-item .chk-toggle, .chk-item .chk-rem { margin: 0; display: flex; }
.chk-box { width: 26px; height: 26px; min-height: 26px; border: 2px solid var(--marca); border-radius: 6px; background: var(--branco); color: var(--ok); font-weight: 800; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0; flex-shrink: 0; }
.chk-box:hover { background: var(--rosa-claro); }
.chk-texto { flex: 1; color: var(--texto); font-size: .95rem; }
.chk-quem { flex-shrink: 0; }
.chk-item.chk-feito { background: var(--bg); border-color: var(--ok); }
.chk-item.chk-feito .chk-box { background: var(--ok); border-color: var(--ok); color: #fff; }
.chk-item.chk-feito .chk-texto { color: var(--texto-suave); text-decoration: line-through; }
.chk-rem .link-perigo { padding: 0 6px; }

/* Comentar (nota livre) na ficha de acompanhamento. */
.acomp-comentar { background: var(--bg); border: 1px dashed var(--borda); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; }
.acomp-comentar .form-acoes { margin-top: 8px; }

/* Tarefas da ROTA (card acima dos clientes, não ligadas a um cliente). */
.rota-tarefas { border-left: 4px solid var(--alerta); }
.rota-tarefas h2 { color: var(--marca-escura); }
.rota-tar-lista { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; }
.rota-tar-item { display: flex; align-items: center; gap: 10px; background: var(--branco); border: 1px solid var(--borda); border-radius: 8px; padding: 8px 10px; }
.rota-tar-item.prox-atrasado { border-color: var(--erro); }
.rota-tar-item form { margin: 0; display: flex; }
.rota-tar-txt { flex: 1; color: var(--texto); font-size: .95rem; }

/* Barra de equipe clicável no dashboard (drill-down para os vendedores). */
.dash-linha-link { text-decoration: none; cursor: pointer; border-radius: 8px; padding: 2px 4px; transition: background .12s; }
.dash-linha-link:hover { background: var(--rosa-claro); }