/*
 * Demonstracao interativa (app/View/sistema/apresentacao/demo.php).
 * Pensada para quem assiste mexer tambem - inclusive no tablet/celular:
 * alvos de toque grandes e o kanban com setas, alem do arrastar.
 */
:root {
    --dm-azul: #0f3a64;
    --dm-azul-2: #2a78d6;
    --dm-turquesa: #1fbfc6;
    --dm-tinta: #1e293b;
    --dm-mudo: #64748b;
    --dm-linha: #e2e8f0;
    --dm-fundo: #f4f7fb;
    --dm-ok: #16a34a;
    --dm-atencao: #d97706;
    --dm-risco: #ea580c;
    --dm-critico: #dc2626;
}

body { background: var(--dm-fundo); color: var(--dm-tinta); font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }

/* ------------------------------------------------------------------ topo */
.dm-topo {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 20px;
    background: #fff;
    border-bottom: 1px solid var(--dm-linha);
}

.dm-logo { height: 34px; }
.dm-titulo { flex: 1; font-weight: 600; color: var(--dm-azul); }
.dm-selo { margin-left: 6px; padding: 2px 8px; font-size: 12px; font-weight: 600; color: #92400e; background: #fef3c7; border-radius: 10px; }
.dm-topo-acoes { display: flex; gap: 8px; }

.dm-etapas {
    position: sticky;
    top: 51px;
    z-index: 19;
    display: flex;
    gap: 6px;
    padding: 10px 20px;
    overflow-x: auto;
    background: var(--dm-fundo);
    border-bottom: 1px solid var(--dm-linha);
}

.dm-etapas button {
    flex: 1;
    min-width: 140px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--dm-mudo);
    background: #fff;
    border: 1px solid var(--dm-linha);
    border-bottom: 3px solid var(--dm-linha);
    border-radius: 8px;
    white-space: nowrap;
}

.dm-etapas button b {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    background: #94a3b8;
    border-radius: 50%;
}

.dm-etapas button.ativa { color: #fff; background: var(--dm-azul); border-color: var(--dm-azul); border-bottom-color: var(--dm-turquesa); font-weight: 600; }
.dm-etapas button.ativa b { background: var(--dm-turquesa); }

/* ---------------------------------------------------------------- corpo */
.dm-corpo { max-width: 1400px; margin: 0 auto; padding: 20px; }
.dm-cab-titulo { display: inline; font-size: 26px; font-weight: 700; color: var(--dm-azul); margin: 0; }
.dm-selo-plano { display: inline-block; margin-left: 10px; padding: 3px 10px; font-size: 12px; font-weight: 600; vertical-align: 5px; color: #6d28d9; background: #f3e8ff; border-radius: 12px; }
.dm-cab p { color: var(--dm-mudo); margin: 4px 0 16px; max-width: 900px; }

.dm-cartao { background: #fff; border: 1px solid var(--dm-linha); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.dm-cartao h2 { font-size: 16px; font-weight: 700; color: var(--dm-azul); margin: 0 0 12px; }
.dm-mudo { color: var(--dm-mudo); font-size: 13px; }
.dm-linha-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.dm-auto { width: auto; }
.dm-badge { font-weight: 600; padding: 6px 10px; }
.dm-badge-ok { color: var(--dm-azul-2); background: #e0edfb; }

.dm-tabela th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--dm-mudo); font-weight: 600; white-space: nowrap; }
.dm-motivo { max-width: 340px; font-size: 13px; color: #334155; }
.dm-contatos { font-size: 13px; line-height: 1.6; }
.dm-contatos .fa-whatsapp { color: #16a34a; }

.dm-nota {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    font-size: 17px;
    font-weight: 700;
    border-radius: 50%;
    border: 3px solid;
}

.dm-nota.alta { color: var(--dm-ok); border-color: var(--dm-ok); }
.dm-nota.media { color: var(--dm-atencao); border-color: var(--dm-atencao); }
.dm-nota.baixa { color: #94a3b8; border-color: #cbd5e1; }

/* --------------------------------------------------------------- kanban */
.dm-kanban { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; }

.dm-coluna { min-height: 380px; padding: 10px; background: #e9eef5; border-radius: 12px; border-top: 4px solid var(--dm-azul-2); transition: background .15s; }
.dm-coluna.ganho { border-top-color: var(--dm-ok); background: #e7f6ec; }
.dm-coluna.alvo { background: #d7e6fa; }
.dm-coluna-topo { display: flex; justify-content: space-between; align-items: center; }
.dm-coluna-topo span { min-width: 24px; padding: 0 8px; font-size: 12px; text-align: center; background: #fff; border-radius: 10px; }
.dm-coluna-valor { font-size: 13px; color: var(--dm-mudo); margin: 2px 0 10px; }

.dm-card { padding: 10px 12px; margin-bottom: 10px; font-size: 14px; background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(15, 58, 100, .12); cursor: grab; }
.dm-card.novo { outline: 2px solid var(--dm-turquesa); }
.dm-card.arrastando { opacity: .4; }
.dm-card-rodape { display: flex; justify-content: space-between; margin-top: 6px; font-size: 13px; }
.dm-dias { color: var(--dm-mudo); }
.dm-dias.parado { color: var(--dm-critico); font-weight: 600; }
.dm-card-setas { display: flex; justify-content: space-between; margin-top: 8px; }

.dm-card-setas button {
    min-height: 32px;
    padding: 2px 10px;
    font-size: 13px;
    color: var(--dm-azul-2);
    background: var(--dm-fundo);
    border: 1px solid var(--dm-linha);
    border-radius: 6px;
}

/* ------------------------------------------------------------ rota/mapa */
.dm-mapa svg { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--dm-linha); }
.dm-mapa-bairro { font-size: 11px; fill: #64748b; text-anchor: middle; }
.dm-mapa-voce { font-size: 12px; font-weight: 700; fill: #1a73e8; text-anchor: middle; }
.dm-mapa-bairro { paint-order: stroke; stroke: #eef3ec; stroke-width: 4px; font-weight: 600; }
.dm-mapa-num { font-size: 12px; font-weight: 700; fill: #fff; text-anchor: middle; }
.dm-mapa-linha { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: dm-tracar 1.6s ease forwards; }
@keyframes dm-tracar { to { stroke-dashoffset: 0; } }

.dm-paradas-topo { color: #1a73e8; font-weight: 600; margin-bottom: 8px; }
.dm-paradas { padding-left: 22px; margin: 0; }
.dm-paradas li { padding: 6px 0; border-bottom: 1px solid var(--dm-linha); }
.dm-paradas li span { display: block; font-size: 13px; color: var(--dm-mudo); }

/* ------------------------------------------------------------ campanhas */
.dm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dm-chip { padding: 8px 14px; font-size: 14px; color: var(--dm-tinta); background: var(--dm-fundo); border: 1px solid var(--dm-linha); border-radius: 20px; }
.dm-chip b { margin-left: 4px; color: var(--dm-azul-2); }
.dm-chip.ativo { color: #fff; background: var(--dm-azul); border-color: var(--dm-azul); }
.dm-chip.ativo b { color: var(--dm-turquesa); }

.dm-contadores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.dm-contadores:empty { display: none; }
.dm-contadores > div:not(.dm-barra) { padding: 8px 10px; font-size: 12px; color: var(--dm-mudo); background: var(--dm-fundo); border-radius: 8px; }
.dm-contadores > div b { display: block; font-size: 22px; color: var(--dm-tinta); }
.dm-contadores > div.erro b { color: var(--dm-critico); }
.dm-contadores .dm-barra { grid-column: 1 / -1; }

.dm-celular { max-width: 360px; margin: 0 auto; border: 10px solid #1f2937; border-radius: 32px; overflow: hidden; background: #ece5dd; box-shadow: 0 14px 34px rgba(0, 0, 0, .2); }
.dm-celular-topo { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: #fff; background: #075e54; font-weight: 600; }
.dm-celular-topo i { font-size: 26px; }
.dm-celular-corpo { min-height: 360px; padding: 14px; }
.dm-bolha { position: relative; max-width: 88%; margin: 0 0 8px auto; padding: 8px 10px 18px; font-size: 14px; background: #dcf8c6; border-radius: 10px 0 10px 10px; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); }
.dm-bolha.anexo { padding-bottom: 8px; color: #b91c1c; }
.dm-hora { position: absolute; right: 8px; bottom: 3px; font-size: 11px; color: #64748b; }
.dm-hora i { color: #34b7f1; }

/* --------------------------------------------------------------- pedido */
.dm-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.dm-grade .dm-produto { display: flex; flex-direction: column; padding: 10px; border: 1px solid var(--dm-linha); border-radius: 10px; }
.dm-grade .dm-produto-info { flex: 1; }
.dm-lista .dm-produto { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--dm-linha); }

.dm-produto-foto { position: relative; display: flex; align-items: center; justify-content: center; height: 110px; margin-bottom: 8px; font-size: 46px; color: var(--dm-azul-2); background: linear-gradient(135deg, #eef4fb, #e3f6f7); border-radius: 8px; }
.dm-lista .dm-produto-foto { height: 56px; margin: 0; font-size: 24px; }
.dm-oferta { position: absolute; top: 6px; right: 6px; padding: 2px 8px; font-size: 12px; font-weight: 700; color: #fff; background: #b54708; border-radius: 10px; }
.dm-lista .dm-oferta { top: -6px; right: -10px; font-size: 10px; padding: 1px 5px; }
.dm-produto-info b { font-size: 14px; }
.dm-preco { margin: 6px 0 8px; font-size: 18px; font-weight: 700; color: var(--dm-azul); }
.dm-preco s { font-size: 13px; font-weight: 400; color: var(--dm-mudo); }

.dm-carrinho { position: sticky; top: 130px; }
.dm-item { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--dm-linha); }
.dm-item-total { min-width: 90px; text-align: right; font-weight: 600; }
.dm-qtd { display: flex; align-items: center; gap: 6px; }
.dm-qtd button { width: 30px; height: 30px; font-size: 16px; line-height: 1; background: var(--dm-fundo); border: 1px solid var(--dm-linha); border-radius: 6px; }
.dm-economia { margin-top: 10px; font-size: 13px; color: #b54708; }
.dm-minimo { margin: 12px 0; font-size: 13px; color: var(--dm-mudo); }
.dm-total-linha { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font-size: 16px; }
.dm-total-linha b { font-size: 24px; color: var(--dm-azul); }
.dm-orcamento { text-align: center; }
.dm-orcamento h3 { margin: 2px 0 6px; color: var(--dm-azul); }
.dm-total { margin: 10px 0 4px; font-size: 30px; font-weight: 700; color: var(--dm-ok); }

/* ------------------------------------------------- barras (valor por --p) */
.dm-barra { height: 8px; margin: 6px 0; background: #e2e8f0; border-radius: 4px; overflow: hidden; }
.dm-barra span { display: block; height: 100%; width: var(--p, 0%); background: var(--dm-azul-2); border-radius: 4px; transition: width .35s ease; }
.dm-barra.grande { height: 14px; border-radius: 7px; }
.dm-barra.batida span { background: var(--dm-ok); }

/* ------------------------------------------------------------ dashboard */
.dm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.dm-kpis > div { padding: 14px 16px; font-size: 13px; color: var(--dm-mudo); background: #fff; border: 1px solid var(--dm-linha); border-radius: 12px; }
.dm-kpis span { display: block; }
.dm-kpis b { display: block; margin: 2px 0; font-size: 26px; color: var(--dm-tinta); }
.dm-kpis .sobe, .dm-kpis .desce { display: inline; font-weight: 600; }
.dm-kpis .sobe { color: var(--dm-ok); }
.dm-kpis .desce { color: var(--dm-critico); }
.dm-meta-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
.dm-grafico { position: relative; height: 300px; }
.dm-rank { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: center; font-size: 14px; margin-bottom: 8px; }
.dm-rank b { min-width: 110px; text-align: right; }

/* -------------------------------------------------------------- recompra */
.dm-carteira { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.dm-carteira > div { padding: 10px 14px; font-size: 13px; border-radius: 10px; border-left: 5px solid; background: var(--dm-fundo); }
.dm-carteira > div b { display: block; font-size: 26px; }
.dm-carteira .ativo { border-color: var(--dm-ok); }
.dm-carteira .atencao { border-color: var(--dm-atencao); }
.dm-carteira .risco { border-color: var(--dm-risco); }
.dm-carteira .critico { border-color: var(--dm-critico); }
.dm-situacao { font-weight: 600; white-space: nowrap; }
.dm-situacao.ativo { color: var(--dm-ok); }
.dm-situacao.atencao { color: var(--dm-atencao); }
.dm-situacao.risco { color: var(--dm-risco); }
.dm-situacao.critico { color: var(--dm-critico); }
#rcTabela tr.novo td { background: #f0fbfc; }

/* ---------------------------------------------------------------- avisos */
.dm-avisos { position: fixed; right: 16px; bottom: 16px; z-index: 1100; display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.dm-aviso { padding: 12px 16px; font-size: 14px; color: #fff; background: #1e293b; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); animation: dm-entra .25s ease; transition: opacity .4s; }
.dm-aviso.ok { background: var(--dm-azul); border-left: 5px solid var(--dm-turquesa); }
.dm-aviso.sai { opacity: 0; }
.dm-aviso a { color: var(--dm-turquesa); font-weight: 600; }
@keyframes dm-entra { from { transform: translateY(10px); opacity: 0; } }

/* -------------------------------------------------------- tablet/celular */
@media (max-width: 991.98px) {
    .dm-kpis, .dm-carteira { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dm-carrinho { position: static; }
}

@media (max-width: 767.98px) {
    .dm-topo { padding: 8px 12px; gap: 10px; }
    .dm-logo { height: 26px; }
    .dm-titulo { font-size: 14px; }
    .dm-topo-acoes .btn span { display: none; }
    .dm-etapas { top: 47px; padding: 8px 12px; }
    .dm-etapas button { min-width: auto; flex: 0 0 auto; }
    .dm-etapas button span { display: none; }
    .dm-etapas button.ativa span { display: inline; }
    .dm-corpo { padding: 14px 12px; }
    .dm-cab-titulo { font-size: 21px; }
    .dm-contadores { grid-template-columns: repeat(2, 1fr); }
    .dm-kanban { grid-template-columns: repeat(5, 78vw); }
    .dm-kpis b { font-size: 18px; }
    .dm-etapas button > i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .dm-mapa-linha { animation: none; stroke-dashoffset: 0; }
}

/* -------------------------------------------------------- tabelas proprias
   Sem a classe .table de proposito: na pagina publica o style.css global
   reescreve toda .table no celular. No celular cada linha vira um cartao. */
.dm-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.dm-tabela th, .dm-tabela td { padding: 10px 8px; vertical-align: middle; border-bottom: 1px solid var(--dm-linha); }
.dm-tabela tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 767.98px) {
    .dm-tabela thead { display: none; }
    .dm-tabela, .dm-tabela tbody, .dm-tabela tr, .dm-tabela td { display: block; width: 100%; }
    .dm-tabela tr { position: relative; padding: 10px 12px; margin-bottom: 10px; background: #fff; border: 1px solid var(--dm-linha); border-radius: 10px; }
    .dm-tabela td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; text-align: right; }
    .dm-tabela td::before { content: attr(data-label); flex-shrink: 0; font-size: 12px; color: var(--dm-mudo); text-align: left; }
    .dm-tabela td.td-titulo { display: block; padding-right: 60px; text-align: left; }
    .dm-tabela td.td-titulo::before, .dm-tabela td.td-acoes::before { content: none; }
    .dm-tabela td.td-nota { position: absolute; top: 8px; right: 10px; width: auto; padding: 0; }
    .dm-tabela td.td-nota::before { content: none; }
    .dm-tabela td.dm-motivo { display: block; max-width: none; text-align: left; }
    .dm-tabela td.dm-motivo::before { display: block; margin-bottom: 2px; }
    .dm-tabela td.td-acoes { justify-content: flex-end; flex-wrap: wrap; padding-top: 8px; }
    .dm-cartao.p-0 { background: transparent; border: 0; }
}

/* ----------------------------------------------- pagina publica (Home/demonstracao)
   O site tem menu proprio: as abas deixam de grudar no topo. */
.dm-publico .dm-etapas { position: static; }
.dm-publico .dm-carrinho { top: 16px; }
.dm-publico .dm-corpo { padding-top: 16px; }