/* mkt.console — painel admin (sidebar + KPI cards). Sem framework, sem build step. */

:root {
    --bg: #f5f6f9;
    --superficie: #ffffff;
    --superficie-2: #f1f2f7;
    --borda: #e7e9f1;
    --tinta: #1b1d27;
    --tinta-suave: #868a9c;
    --acento: #F7941D;
    --acento-hover: #c8610a;
    --acento-tinta: #ffffff;
    --acento-fraco: #FFF4E6;
    /* vermelho fixo pra ação destrutiva/erro — separado do --acento (laranja
       de marca) pra não perder o sinal semântico de "perigo" */
    --perigo: #dc2626;
    --perigo-hover: #b91c1c;
    --perigo-fraco: #fde8e8;
    --sombra: 0 1px 2px rgba(23, 25, 39, .04), 0 8px 20px rgba(23, 25, 39, .05);

    --sidebar-bg: #ffffff;
    --sidebar-tinta: #4b4f5e;
    --sidebar-tinta-suave: #9a9eae;
    --sidebar-ativo-bg: var(--acento-fraco);
    --sidebar-ativo-tinta: var(--acento);

    --cor-ok: #16a34a;
    --cor-ok-bg: #e7f7ed;
    --cor-neutro: #6b7280;
    --cor-neutro-bg: #eef0f4;
    --cor-erro: #ea580c;
    --cor-erro-bg: #fdece0;
    --cor-atencao: #d97706;
    --cor-atencao-bg: #fef3da;
    --cor-processando: #2563eb;

    /* status de job/semáforo legado — cada um aponta pra um dos tokens acima */
    --cor-pendente: var(--cor-neutro);
    --cor-concluido: var(--cor-ok);
    --cor-falhou: var(--perigo);
    --cor-aguardando_humano: var(--cor-atencao);
    --cor-bloqueado: var(--perigo);
    --cor-prioritario: var(--cor-atencao);
    --cor-forte: var(--cor-ok);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #121319;
        --superficie: #1b1d24;
        --superficie-2: #22242c;
        --borda: #2d2f3a;
        --tinta: #eef0f7;
        --tinta-suave: #9a9eae;
        --acento: #ffab4d;
        --acento-hover: #F7941D;
        --acento-tinta: #2a1400;
        --acento-fraco: #3a2812;
        --perigo: #f87171;
        --perigo-hover: #ef4444;
        --perigo-fraco: #3a1414;
        --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .4);

        --sidebar-bg: #16171d;
        --sidebar-tinta: #cdd0dc;
        --sidebar-tinta-suave: #7d8092;
        --sidebar-ativo-bg: var(--acento-fraco);
        --sidebar-ativo-tinta: var(--acento);

        --cor-ok: #34d399;
        --cor-ok-bg: #123626;
        --cor-neutro: #9a9eae;
        --cor-neutro-bg: #22242c;
        --cor-erro: #fb923c;
        --cor-erro-bg: #3a1f0a;
        --cor-atencao: #fbbf24;
        --cor-atencao-bg: #3a2c0a;
        --cor-processando: #60a5fa;
    }
}

* { box-sizing: border-box; }
html { color-scheme: light dark; }

body {
    font: 14px/1.5 -apple-system, "Segoe UI", system-ui, sans-serif;
    margin: 0;
    background: var(--bg);
    color: var(--tinta);
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--acento); color: var(--acento-tinta); }

:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}

h1, h2 { margin: 0 0 4px; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 20px; }
h2 { font-size: 12px; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .04em; }

pre {
    background: var(--superficie-2);
    border: 1px solid var(--borda);
    padding: 12px 14px;
    overflow-x: auto;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    border-radius: 8px;
    color: var(--tinta);
}
pre.inline { margin: 0; padding: 2px 6px; background: none; border: none; }

.erro-texto {
    color: var(--acento);
    white-space: pre-wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}

/* ─── layout logado: sidebar + conteúdo ─────────────────────────────── */

.shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 224px;
    flex: 0 0 224px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--borda);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar .marca {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 20px 16px;
    font-size: 16px;
    font-weight: 650;
    color: var(--tinta);
}
.sidebar .marca b { color: var(--acento); }
.sidebar .marca:hover { text-decoration: none; }

.sidebar .ponto {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--acento);
    flex: 0 0 auto;
}

.sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    flex: 1;
}

.sidebar nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--sidebar-tinta-suave);
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
}
.sidebar nav a svg { flex: 0 0 auto; opacity: .85; }
.sidebar nav a:hover { background: var(--superficie-2); color: var(--sidebar-tinta); text-decoration: none; }
.sidebar nav a.ativo { background: var(--sidebar-ativo-bg); color: var(--sidebar-ativo-tinta); }
.sidebar nav a.ativo svg { opacity: 1; }

.sidebar .sair {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--borda);
    font-size: 13px;
    color: var(--sidebar-tinta-suave);
}
.sidebar .sair button {
    background: none;
    border: 1px solid var(--borda);
    color: var(--sidebar-tinta);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
}
.sidebar .sair button:hover { background: var(--superficie-2); }
.sidebar .sistema-versao {
    padding: 8px 20px 14px;
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: var(--sidebar-tinta-suave);
    opacity: .6;
}

main { flex: 1; min-width: 0; }

.topbar {
    padding: 20px 32px;
    border-bottom: 1px solid var(--borda);
    background: var(--superficie);
}

.conteudo {
    padding: 24px 32px 48px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

/* ─── layout público (login) ────────────────────────────────────────── */

.publico-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: 20px;
}

.login-box {
    width: 100%;
    max-width: 340px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 14px;
    box-shadow: var(--sombra);
    padding: 28px 28px 24px;
}
.login-box .marca {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 650;
    color: var(--tinta-suave);
    font-size: 13px;
    margin-bottom: 16px;
}
.login-box .marca b { color: var(--acento); }
.login-box .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--acento); }
.login-box h1 { font-size: 19px; margin-bottom: 18px; color: var(--tinta); text-transform: none; letter-spacing: -.01em; }

/* ─── cartões / cards ────────────────────────────────────────────────── */

.cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 12px;
    box-shadow: var(--sombra);
    padding: 20px 22px;
}

.cartao-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.cartao-cabecalho h2 { margin: 0; }

.cartao-estreito { max-width: 420px; }

/* ─── KPI cards ──────────────────────────────────────────────────────── */

.grade-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}
.stat { display: flex; flex-direction: column; gap: 8px; }
.stat-icone {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--acento-fraco);
    color: var(--acento);
    display: flex; align-items: center; justify-content: center;
}
.stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-suave); }
.stat-valor { font-size: 26px; font-weight: 650; letter-spacing: -.02em; }

.vazio { color: var(--tinta-suave); font-style: italic; }

/* ─── overview: donut ────────────────────────────────────────────────── */

.overview-corpo {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.donut {
    --pct: 0;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    flex: 0 0 auto;
    position: relative;
    background: conic-gradient(var(--acento) calc(var(--pct) * 1%), var(--superficie-2) 0);
}
.donut::before {
    content: "";
    position: absolute;
    inset: 13px;
    border-radius: 50%;
    background: var(--superficie);
}
.donut-centro {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.donut-centro strong { font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.donut-centro span { font-size: 10.5px; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .04em; }

.legenda-donut { display: flex; flex-direction: column; gap: 10px; }
.legenda-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--tinta-suave); }
.legenda-item strong { color: var(--tinta); margin-left: 2px; }
.ponto-legenda { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

/* ─── tabela ─────────────────────────────────────────────────────────── */

.tabela, table.densa, table.chave-valor {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.tabela th, table.densa th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tinta-suave);
    padding: 8px 10px;
    border-bottom: 1px solid var(--borda);
}
.tabela td, table.densa td, table.chave-valor th, table.chave-valor td {
    padding: 10px;
    border-bottom: 1px solid var(--borda);
    vertical-align: middle;
    text-align: left;
}
.tabela tr:last-child td, table.densa tr:last-child td { border-bottom: none; }
table.densa tr:hover { background: var(--superficie-2); }
table.chave-valor th { width: 220px; color: var(--tinta-suave); font-weight: 500; }
table.chave-valor td { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.tabela-acoes { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: nowrap; white-space: nowrap; }
.tabela-acoes form { display: contents; }

.tabela-descricao { margin: 4px 0 0; color: var(--tinta-suave); font-size: 13px; font-weight: 400; }

.linha-produtos td { background: var(--superficie-2); border-top: none; padding-top: 4px; }
.produtos-sugeridos { font-size: 13px; }
.produtos-sugeridos ul {
    list-style: none;
    margin: 6px 0 10px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    column-gap: 16px;
}
.produtos-sugeridos li { display: contents; }
.produtos-sugeridos .produto-info {
    padding: 9px 0;
    border-top: 1px solid var(--borda);
    align-self: center;
}
.produtos-sugeridos .produto-info code { color: var(--tinta-suave); }
.status-borda { border-left: 5px solid var(--cor-neutro); }
.produtos-sugeridos .produto-info.status-borda { padding-left: 10px; }
.status-borda.status-aprovado { border-left-color: var(--cor-ok); }
.status-borda.status-rejeitado { border-left-color: var(--cor-erro); }
.produtos-sugeridos .produto-acoes {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    border-top: 1px solid var(--borda);
    white-space: nowrap;
}
.produtos-sugeridos li:first-child .produto-info,
.produtos-sugeridos li:first-child .produto-acoes { border-top: none; padding-top: 0; }
.produtos-sugeridos form { display: inline-flex; margin: 0; }

.banners-campanha { margin-top: 12px; }
.banners-campanha .produto-info { display: flex; align-items: center; gap: 10px; }
.banner-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--borda); flex-shrink: 0; }
.banner-info-texto { display: flex; flex-direction: column; gap: 4px; }
.banner-info-texto form { display: flex; gap: 6px; align-items: center; }
.banner-info-texto input[type="text"] {
    font: inherit;
    padding: 4px 8px;
    border: 1px solid var(--borda);
    border-radius: 6px;
    background: var(--superficie);
    color: var(--tinta);
    flex: 1;
    min-width: 320px;
    max-width: 480px;
}

td.acoes { white-space: nowrap; }
td.acoes form { display: inline; }
td.acoes .separador { margin: 0 6px; color: var(--borda); }

.link-acao {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--acento);
    font: inherit;
    font-weight: 400;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}
.link-acao:hover { text-decoration: underline; }

.botao-tabela {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 7px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--borda);
    background: var(--superficie-2);
    color: var(--tinta);
    cursor: pointer;
    text-decoration: none;
}
.botao-tabela:hover { background: var(--borda); text-decoration: none; }
.botao-tabela.perigo {
    background: var(--perigo-fraco);
    color: var(--perigo);
    border-color: transparent;
}
.botao-tabela.perigo:hover { background: var(--perigo); color: var(--acento-tinta); }
.botao-tabela.sucesso {
    background: var(--cor-ok-bg);
    color: var(--cor-ok);
    border-color: transparent;
}
.botao-tabela.sucesso:hover { background: var(--cor-ok); color: var(--superficie); }
.botao-tabela.atencao {
    background: var(--cor-atencao-bg);
    color: var(--cor-atencao);
    border-color: transparent;
}
.botao-tabela.atencao:hover { background: var(--cor-atencao); color: var(--superficie); }

/* ─── badge (com --cor por modificador, usado tanto por status de job quanto por CRUD) ── */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background: color-mix(in srgb, var(--cor, var(--cor-neutro)) 14%, var(--superficie));
    color: var(--cor, var(--cor-neutro));
}
.badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cor, var(--cor-neutro));
    flex-shrink: 0;
}

.badge-ok { --cor: var(--cor-ok); }
.badge-neutro { --cor: var(--cor-neutro); }
.badge-erro { --cor: var(--cor-erro); }
.badge-atencao { --cor: var(--cor-atencao); }

.status-pendente { --cor: var(--cor-pendente); }
.status-processando { --cor: var(--cor-processando); }
.status-concluido { --cor: var(--cor-concluido); }
.status-falhou { --cor: var(--cor-falhou); }
.status-aguardando_humano { --cor: var(--cor-aguardando_humano); }
.semaforo-bloqueado { --cor: var(--cor-bloqueado); }
.semaforo-prioritario { --cor: var(--cor-prioritario); }
.semaforo-forte { --cor: var(--cor-forte); }
.semaforo-neutro { --cor: var(--cor-neutro); }

/* ─── formulários ────────────────────────────────────────────────────── */

form label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12.5px;
    color: var(--tinta-suave);
    margin-bottom: 14px;
}
form label.check { flex-direction: row; align-items: center; gap: 8px; }
form label .dica { font-weight: 400; font-style: italic; }

form.filtro {
    display: flex;
    gap: 18px;
    align-items: end;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
form.filtro label { margin-bottom: 0; }

input, select, textarea {
    font: inherit;
    padding: 9px 11px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--superficie);
    color: var(--tinta);
}
input[type="checkbox"] { width: 15px; height: 15px; padding: 0; }

.form-acoes { display: flex; gap: 10px; margin-top: 4px; }

button, .botao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--acento);
    color: var(--acento-tinta);
    border: none;
    border-radius: 8px;
    padding: 9px 16px;
    font: inherit;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}
button:hover, .botao:hover { background: var(--acento-hover); text-decoration: none; }
button svg, .botao svg, .botao-tabela svg, .cartao-cabecalho h2 svg, h2 svg { flex-shrink: 0; display: block; }
.cartao-cabecalho h2, h2 { display: inline-flex; align-items: center; gap: 8px; }
.botao-secundario {
    background: var(--superficie-2);
    color: var(--tinta);
    border: 1px solid var(--borda);
}
.botao-secundario:hover { background: var(--borda); }

/* ─── semanas/campanhas do planejamento ──────────────────────────────── */

.semana-card {
    background: var(--superficie-2);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.semana-card:last-child { margin-bottom: 0; }
.semana-titulo { margin: 0 0 10px; font-weight: 600; font-size: 13.5px; }
.produtos-lista ul { list-style: none; margin: 0 0 14px; padding: 0; }
.produtos-lista code { color: var(--tinta-suave); }
.campanha-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 14px;
    border-left: 5px solid var(--cor-neutro);
    background: var(--superficie);
    border-radius: 8px;
    margin-bottom: 10px;
}
.campanha-item:last-child { margin-bottom: 0; }
.campanha-item.status-aprovado, .campanha-item.status-gerado { border-left-color: var(--cor-ok); }
.campanha-item.status-rejeitado, .campanha-item.status-falhou { border-left-color: var(--cor-erro); }
.campanha-item.opaca { opacity: .25; }
.campanha-acoes { display: flex; align-items: flex-start; gap: 8px; flex-shrink: 0; white-space: nowrap; }
.campanha-acoes form { display: inline-flex; margin: 0; }

/* ─── galeria ────────────────────────────────────────────────────────── */

.galeria-card { display: flex; flex-direction: column; gap: 12px; }
.galeria-imagem-completa {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--borda);
    background: var(--superficie-2);
}

/* ─── calendário ─────────────────────────────────────────────────────── */

.calendario-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    margin-top: 14px;
}
.calendario-cabecalho-dia {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tinta-suave);
    text-align: center;
    padding-bottom: 6px;
}
.calendario-dia {
    min-height: 92px;
    min-width: 0;
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.calendario-dia.fora-do-mes { opacity: .4; background: var(--superficie-2); }
.calendario-dia.hoje { border-color: var(--acento); }
.calendario-numero { font-size: 12px; color: var(--tinta-suave); }
.calendario-evento {
    display: block;
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 5px;
    background: var(--acento-fraco);
    color: var(--acento);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.calendario-evento:hover { background: var(--acento); color: var(--acento-tinta); }
.calendario-evento.aprovado { background: var(--cor-ok-bg); color: var(--cor-ok); }
.calendario-evento.aprovado:hover { background: var(--cor-ok); color: var(--superficie); }
.calendario-evento.pendente { background: var(--cor-atencao-bg); color: var(--cor-atencao); }
.calendario-evento.pendente:hover { background: var(--cor-atencao); color: var(--superficie); }
.calendario-evento.recusado { background: var(--cor-erro-bg); color: var(--cor-erro); }
.calendario-evento.recusado:hover { background: var(--cor-erro); color: var(--superficie); }

@media (max-width: 720px) {
    .calendario-grid { grid-template-columns: repeat(7, minmax(60px, 1fr)); overflow-x: auto; }
}

/* ─── alertas ────────────────────────────────────────────────────────── */

.alerta { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin: 0; }
.alerta.erro { background: var(--cor-erro-bg); color: var(--cor-erro); }
.alerta.sucesso { background: var(--cor-ok-bg); color: var(--cor-ok); }

/* ─── lightbox ───────────────────────────────────────────────────────── */

a.lightbox { cursor: zoom-in; }
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, .85);
    padding: 40px;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}
.lightbox-overlay.aberto { display: flex; }
.lightbox-overlay img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 8px 40px rgba(0, 0, 0, .5); cursor: default; }
.lightbox-nav, .lightbox-fechar {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.lightbox-nav:hover, .lightbox-fechar:hover { background: rgba(255, 255, 255, .2); }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-fechar { top: 16px; right: 16px; transform: none; width: 40px; height: 40px; font-size: 22px; }

/* ─── responsivo ─────────────────────────────────────────────────────── */

@media (max-width: 720px) {
    .shell { flex-direction: column; }
    .sidebar { width: 100%; flex: 0 0 auto; height: auto; position: static; flex-direction: row; align-items: center; }
    .sidebar nav { flex-direction: row; flex-wrap: wrap; }
    .sidebar .sair { margin-left: auto; border-top: none; }
    .conteudo, .topbar { padding-left: 16px; padding-right: 16px; }
    table.densa, table.chave-valor { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* ─── responsável/indicador (campanha) ──────────────────────────────── */

fieldset.responsavel {
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 14px 16px 4px;
    margin-bottom: 14px;
}
fieldset.responsavel legend {
    font-size: 12.5px;
    color: var(--tinta-suave);
    padding: 0 6px;
}
fieldset.responsavel label.check { margin-bottom: 10px; }
.bloco-responsavel { padding-top: 4px; }