/* =====================================================================
   CRM Loja — folha de estilo única (sem framework, sem CDN).
   Mobile-first: o consultor usa isso no celular, ao lado do WhatsApp.
   ===================================================================== */

:root {
    --bg:        #f5f7fa;
    --superficie:#ffffff;
    --borda:     #e3e8ef;
    --texto:     #0f172a;
    --texto-fraco:#64748b;
    --primaria:  #2563eb;
    --primaria-esc:#1d4ed8;
    --sucesso:   #16a34a;
    --alerta:    #f59e0b;
    --perigo:    #dc2626;
    --festa:     #d946ef;
    --raio:      14px;
    --sombra:    0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.06);
    --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:        #0b1220;
        --superficie:#141c2e;
        --borda:     #24304a;
        --texto:     #e8edf7;
        --texto-fraco:#94a3b8;
        --sombra:    0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--fonte);
    background: var(--bg);
    color: var(--texto);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ------------------------------ topo ------------------------------- */
.topo {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 16px;
    padding: 10px 16px;
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
}
.marca { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: -.01em; }
.marca-icone { color: var(--primaria); }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
    padding: 7px 13px; border-radius: 999px;
    color: var(--texto-fraco); font-weight: 600; font-size: 14px;
}
.nav a.ativo { background: var(--primaria); color: #fff; }
.usuario { display: flex; align-items: center; gap: 10px; padding-left: 12px; border-left: 1px solid var(--borda); }
.usuario-nome { font-size: 14px; color: var(--texto-fraco); font-weight: 600; }
.sair { color: var(--texto-fraco); font-size: 17px; }

.conteudo { max-width: 1180px; margin: 0 auto; padding: 20px 16px 64px; }

/* --------------------------- cabeçalho ----------------------------- */
.cabecalho { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: flex-end; margin-bottom: 18px; }
.cabecalho h1 { margin: 0; font-size: 26px; letter-spacing: -.02em; }
.sub { margin: 4px 0 0; color: var(--texto-fraco); font-size: 14px; }
.sync-info { opacity: .75; }
.cabecalho-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filtro { display: flex; gap: 8px; }
.filtro input, .filtro select, .campo {
    padding: 9px 12px; border: 1px solid var(--borda); border-radius: 10px;
    background: var(--superficie); color: var(--texto); font-family: inherit; font-size: 14px;
}

/* ----------------------------- placar ------------------------------ */
.placar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.placar-item {
    background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
    padding: 14px; text-align: center;
}
.placar-num { display: block; font-size: 28px; font-weight: 700; letter-spacing: -.03em; }
.placar-rot { font-size: 12px; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .04em; }
.placar-item.ok .placar-num { color: var(--sucesso); }
.placar-item.neutro .placar-num { color: var(--texto-fraco); }

/* ----------------------------- colunas ----------------------------- */
.colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.lista-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.lista-topo h2 { margin: 0; font-size: 17px; }
.contador {
    background: var(--borda); color: var(--texto-fraco);
    border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 700;
}
.vazio {
    color: var(--texto-fraco); font-size: 14px; background: var(--superficie);
    border: 1px dashed var(--borda); border-radius: var(--raio); padding: 22px; text-align: center;
}

/* ------------------------------ card ------------------------------- */
.card {
    background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
    padding: 14px; margin-bottom: 10px; box-shadow: var(--sombra);
    transition: transform .12s ease, opacity .2s ease;
}
.card:hover { transform: translateY(-1px); }
.card.resolvida { opacity: .55; }
.card-topo { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.card-identidade { display: flex; gap: 11px; min-width: 0; }
.avatar {
    flex: 0 0 38px; height: 38px; border-radius: 11px;
    display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 16px;
    background: var(--primaria);
}
.avatar.alta  { background: var(--perigo); }
.avatar.media { background: var(--alerta); }
.avatar.baixa { background: var(--primaria); }
.avatar.festa { background: var(--festa); }
.card-nome { font-weight: 700; display: block; letter-spacing: -.01em; }
.card-nome:hover { color: var(--primaria); }
.card-motivo { margin: 2px 0 0; font-size: 13px; color: var(--texto-fraco); }

.selo { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.selo-alta   { background: #fee2e2; color: #991b1b; }
.selo-media  { background: #fef3c7; color: #92400e; }
.selo-baixa  { background: #dbeafe; color: #1e40af; }
.selo-ok     { background: #dcfce7; color: #166534; }
.selo-compra { background: #dcfce7; color: #166534; }

.card-fatos { list-style: none; margin: 11px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.card-fatos li { font-size: 12.5px; color: var(--texto-fraco); }

.card-acoes { display: flex; gap: 7px; margin-top: 13px; flex-wrap: wrap; }

/* ----------------------------- botões ------------------------------ */
.botao {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 14px; border-radius: 10px; border: 1px solid transparent;
    font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.botao.primario   { background: var(--primaria); color: #fff; }
.botao.primario:hover { background: var(--primaria-esc); }
.botao.secundario { background: transparent; border-color: var(--borda); color: var(--texto); }
.botao.secundario:hover { border-color: var(--primaria); color: var(--primaria); }
.botao.fantasma   { background: transparent; color: var(--texto-fraco); }
.botao.fantasma:hover { color: var(--perigo); }
.botao:disabled { opacity: .5; cursor: default; }
.botao-icone { background: none; border: 0; font-size: 17px; cursor: pointer; color: var(--texto-fraco); }

/* ------------------------------ modal ------------------------------ */
.modal {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(15,23,42,.55); backdrop-filter: blur(3px);
    display: grid; place-items: center; padding: 16px;
}
.modal[hidden] { display: none; }
.modal-caixa {
    width: min(620px, 100%); background: var(--superficie);
    border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.35); overflow: hidden;
}
.modal-topo { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 20px 0; }
.modal-topo h2 { margin: 0; font-size: 19px; }
.modal-sub { margin: 2px 0 0; font-size: 13px; color: var(--texto-fraco); }
.modal-corpo { padding: 14px 20px; }
.dica { font-size: 13px; color: var(--texto-fraco); margin: 0 0 10px; }
#script-texto {
    width: 100%; padding: 14px; border: 1px solid var(--borda); border-radius: 12px;
    font-family: inherit; font-size: 15px; line-height: 1.6; resize: vertical;
    background: var(--bg); color: var(--texto);
}
.variacoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.variacao {
    font-size: 12px; padding: 5px 11px; border-radius: 999px;
    border: 1px solid var(--borda); background: transparent; color: var(--texto-fraco); cursor: pointer;
}
.variacao.ativa { border-color: var(--primaria); color: var(--primaria); }
.modal-rodape { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px 20px; }

/* ------------------------------ aviso ------------------------------ */
.aviso {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
    background: var(--texto); color: var(--bg);
    padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
    z-index: 100; box-shadow: var(--sombra);
}
.aviso[hidden] { display: none; }

/* ------------------------------ tabela ----------------------------- */
.tabela { width: 100%; border-collapse: collapse; background: var(--superficie);
          border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.tabela th, .tabela td { padding: 11px 13px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--borda); }
.tabela th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-fraco); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--bg); }

.painel { background: var(--superficie); border: 1px solid var(--borda);
          border-radius: var(--raio); padding: 18px; margin-bottom: 16px; }
.painel h2 { margin: 0 0 12px; font-size: 17px; }
.chip { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px;
        border-radius: 999px; background: var(--borda); color: var(--texto-fraco); margin: 0 4px 4px 0; }

.rodape-lista { text-align: center; margin-top: 22px; font-size: 13px; color: var(--texto-fraco); }
.rodape-lista a { text-decoration: underline; }

/* ------------------------------ login ------------------------------ */
.login-tela { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-caixa { width: min(380px, 100%); background: var(--superficie); border: 1px solid var(--borda);
               border-radius: 18px; padding: 30px; box-shadow: var(--sombra); }
.login-caixa h1 { margin: 0 0 4px; font-size: 22px; }
.login-caixa p.sub { margin-bottom: 20px; }
.login-caixa label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 5px; }
.login-caixa .campo { width: 100%; }
.login-caixa .botao { width: 100%; margin-top: 18px; padding: 12px; }
.erro-box { background: #fee2e2; color: #991b1b; padding: 10px 13px; border-radius: 10px; font-size: 13.5px; }

/* ---------------------------- responsivo --------------------------- */
@media (max-width: 900px) {
    .colunas { grid-template-columns: 1fr; }
    .placar { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .conteudo { padding: 16px 12px 80px; }
    .cabecalho h1 { font-size: 22px; }
    .cabecalho-acoes { width: 100%; }
    .filtro { flex: 1; }
    .filtro input, .filtro select { flex: 1; }
    .nav a { padding: 7px 10px; font-size: 13px; }
    .usuario-nome { display: none; }
    .card-acoes .botao { flex: 1 1 calc(50% - 4px); }
    .modal-rodape { flex-direction: column-reverse; }
    .modal-rodape .botao { width: 100%; }
}