/* CRM FTP Brasil — painel de atendimentos */

.ftpcrm-wrap {
    --crm-bg:        #f6f7f9;
    --crm-surface:   #ffffff;
    --crm-borda:     #e3e6ea;
    --crm-texto:     #1c2024;
    --crm-texto-2:   #5f6b76;
    --crm-texto-3:   #8a949e;
    --crm-acento:    #1f6feb;
    --crm-critico:   #d93a3a;
    --crm-alerta:    #c98a0b;
    --crm-ok:        #1d8a4f;
    --crm-raio:      12px;
    --crm-sombra:    0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
    --crm-sombra-lg: 0 12px 32px rgba(16,24,40,.16);

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--crm-texto);
    font-size: 15px;
    line-height: 1.45;
}

.ftpcrm-wrap * { box-sizing: border-box; }

/* ---------- cabeçalho ---------- */
.ftpcrm-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.ftpcrm-titulo {
    margin: 0;
    font-size: 24px;
    font-weight: 650;
    letter-spacing: -.02em;
}
.ftpcrm-subtitulo {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    color: var(--crm-texto-2);
}

/* ---------- cards de KPI ---------- */
.ftpcrm-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.ftpcrm-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: var(--crm-surface);
    border: 1px solid var(--crm-borda);
    border-left: 3px solid var(--crm-borda);
    border-radius: var(--crm-raio);
    box-shadow: var(--crm-sombra);
}
.ftpcrm-card__num {
    font-size: 26px;
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.ftpcrm-card__lbl {
    font-size: 12px;
    font-weight: 500;
    color: var(--crm-texto-2);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.ftpcrm-card--total      { border-left-color: var(--crm-acento); }
.ftpcrm-card--vencido    { border-left-color: var(--crm-critico); }
.ftpcrm-card--followup   { border-left-color: var(--crm-alerta); }
.ftpcrm-card--semcompra  { border-left-color: #6b5bd2; }
.ftpcrm-card--sematend   { border-left-color: #0f8b8d; }
.ftpcrm-card--desativado { border-left-color: var(--crm-texto-3); }

/* ---------- barra de filtros ---------- */
.ftpcrm-barra {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.ftpcrm-barra__grupo { flex: 0 0 auto; }
.ftpcrm-barra__grupo--cresce { flex: 1 1 240px; }
.ftpcrm-input {
    width: 100%;
    padding: 9px 12px;
    font-size: 14px;
    color: var(--crm-texto);
    background: var(--crm-surface);
    border: 1px solid var(--crm-borda);
    border-radius: 9px;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}
.ftpcrm-input:focus {
    border-color: var(--crm-acento);
    box-shadow: 0 0 0 3px rgba(31,111,235,.14);
}

/* ---------- grid de clientes ---------- */
.ftpcrm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
    gap: 12px;
    align-items: start;
}

.ftpcrm-cli {
    display: grid;
    grid-template-areas:
        "cod    faixa"
        "nome   nome"
        "meta   meta";
    grid-template-columns: 1fr auto;
    gap: 6px 10px;
    padding: 14px 16px;
    background: var(--crm-surface);
    border: 1px solid var(--crm-borda);
    border-radius: var(--crm-raio);
    box-shadow: var(--crm-sombra);
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s, transform .12s;
}
.ftpcrm-cli:hover {
    border-color: #c9cfd6;
    box-shadow: 0 4px 14px rgba(16,24,40,.10);
    transform: translateY(-1px);
}
.ftpcrm-cli:focus-visible {
    outline: 2px solid var(--crm-acento);
    outline-offset: 2px;
}

.ftpcrm-cli__cod {
    grid-area: cod;
    font-size: 15px;
    font-weight: 700;
    color: var(--crm-acento);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.ftpcrm-cli__nome {
    grid-area: nome;
    font-size: 14px;
    font-weight: 500;
    color: var(--crm-texto);
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ftpcrm-cli__meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding-top: 8px;
    margin-top: 2px;
    border-top: 1px solid var(--crm-borda);
    font-size: 12px;
    color: var(--crm-texto-2);
}
.ftpcrm-cli__meta b {
    font-weight: 600;
    color: var(--crm-texto);
    font-variant-numeric: tabular-nums;
}
.ftpcrm-cli__vend {
    color: var(--crm-texto-3);
    font-size: 12px;
}

/* pílulas de faixa / status */
.ftpcrm-pil {
    grid-area: faixa;
    align-self: start;
    justify-self: end;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    border-radius: 999px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ftpcrm-pil--vencido   { background: #fdeaea; color: var(--crm-critico); }
.ftpcrm-pil--followup  { background: #fdf4e0; color: #96650a; }
.ftpcrm-pil--sem_atend { background: #e6f4f5; color: #0f6b6d; }
.ftpcrm-pil--sem_compra{ background: #f0eefb; color: #5b4bc4; }
.ftpcrm-pil--revisao   { background: #eef0f2; color: var(--crm-texto-2); }

.ftpcrm-tag {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ftpcrm-tag--ativo      { background: #e8f6ee; color: var(--crm-ok); }
.ftpcrm-tag--inativo    { background: #fdf1e3; color: #96650a; }
.ftpcrm-tag--desativado { background: #f0f0f2; color: var(--crm-texto-3); }
.ftpcrm-tag--fixo       { background: #eaf1fd; color: #1a5fcc; }

/* estados */
.ftpcrm-vazio,
.ftpcrm-erro {
    grid-column: 1 / -1;
    padding: 40px 16px;
    text-align: center;
    font-size: 14px;
    color: var(--crm-texto-2);
}
.ftpcrm-erro { color: var(--crm-critico); }
.ftpcrm-carregando { opacity: .5; pointer-events: none; }

.ftpcrm-rodape {
    margin: 18px 0 0;
    font-size: 13px;
    color: var(--crm-texto-3);
}

/* ---------- botões ---------- */
.ftpcrm-btn {
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 550;
    color: var(--crm-texto);
    background: var(--crm-surface);
    border: 1px solid var(--crm-borda);
    border-radius: 9px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.ftpcrm-btn:hover { background: #f2f4f6; border-color: #c9cfd6; }
.ftpcrm-btn:disabled { opacity: .55; cursor: default; }
.ftpcrm-btn--primario { background: var(--crm-acento); border-color: var(--crm-acento); color: #fff; }
.ftpcrm-btn--primario:hover { background: #1a5fcc; border-color: #1a5fcc; }
.ftpcrm-btn--perigo { color: var(--crm-critico); border-color: #f0cdcd; }
.ftpcrm-btn--perigo:hover { background: #fdeaea; }
.ftpcrm-btn--ghost { background: transparent; }

/* ---------- drawer do cliente ---------- */
.ftpcrm-drawer { position: fixed; inset: 0; z-index: 100000; }
.ftpcrm-drawer[hidden] { display: none; }
.ftpcrm-drawer__fundo {
    position: absolute;
    inset: 0;
    background: rgba(16,24,40,.42);
    animation: ftpcrm-fade .16s ease-out;
}
.ftpcrm-drawer__painel {
    position: absolute;
    top: 0; right: 0;
    display: flex;
    flex-direction: column;
    width: min(460px, 100%);
    height: 100%;
    background: var(--crm-surface);
    box-shadow: var(--crm-sombra-lg);
    animation: ftpcrm-slide .18s ease-out;
}
.ftpcrm-drawer__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--crm-borda);
}
.ftpcrm-drawer__cod {
    font-size: 13px;
    font-weight: 700;
    color: var(--crm-acento);
    font-variant-numeric: tabular-nums;
}
.ftpcrm-drawer__titulo {
    margin: 2px 0 0;
    font-size: 18px;
    font-weight: 620;
    line-height: 1.3;
    letter-spacing: -.01em;
}
.ftpcrm-drawer__x {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    font-size: 24px;
    line-height: 1;
    color: var(--crm-texto-2);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
.ftpcrm-drawer__x:hover { background: #f2f4f6; color: var(--crm-texto); }
.ftpcrm-drawer__corpo {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 22px;
}
.ftpcrm-drawer__acoes {
    display: flex;
    gap: 8px;
    padding: 14px 22px;
    border-top: 1px solid var(--crm-borda);
    background: var(--crm-surface);
}
.ftpcrm-drawer__acoes .ftpcrm-btn { flex: 1 1 auto; padding: 9px 10px; font-size: 13px; }

/* linhas chave/valor dentro do drawer */
.ftpcrm-dl {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 10px 14px;
    margin: 0;
}
.ftpcrm-dl dt {
    font-size: 12px;
    font-weight: 550;
    color: var(--crm-texto-3);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.ftpcrm-dl dd {
    margin: 0;
    font-size: 14px;
    color: var(--crm-texto);
}
.ftpcrm-dl__secao {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--crm-borda);
    font-size: 12px;
    font-weight: 650;
    color: var(--crm-texto-2);
    text-transform: uppercase;
    letter-spacing: .05em;
}

@keyframes ftpcrm-fade  { from { opacity: 0 } to { opacity: 1 } }
@keyframes ftpcrm-slide { from { transform: translateX(16px); opacity: .6 } to { transform: none; opacity: 1 } }

@media (max-width: 620px) {
    .ftpcrm-grid { grid-template-columns: 1fr; }
    .ftpcrm-dl { grid-template-columns: 110px 1fr; }
    .ftpcrm-drawer__acoes { flex-wrap: wrap; }
}