:root {
  --verde: #2b6b3f; --verde-esc: #1f4f2e; --verde-claro: #eaf3ec; --verde-linha: #cfdcd3;
  --texto: #222; --cinza: #6b7280; --fundo: #f4f6f5; --perigo: #b91c1c; --aviso: #b45309;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: var(--texto); background: var(--fundo); font-size: 13px; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; padding: 7px 9px; border: 1px solid #c3cdc6; border-radius: 6px; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid #bfe0c8; border-color: var(--verde); }

.login { max-width: 340px; margin: 12vh auto; background: #fff; border: 1px solid var(--verde-linha); border-radius: 12px; padding: 28px; box-shadow: 0 4px 24px rgba(0,0,0,.08); }
.login h1 { margin: 0 0 4px; color: var(--verde); font-size: 24px; }
.login p { margin: 0 0 18px; color: var(--cinza); }
.login label { display: block; margin: 10px 0 4px; font-weight: bold; font-size: 13px; }
.login input { width: 100%; }
.login .btn { width: 100%; margin-top: 18px; }
.erro { color: var(--perigo); margin-top: 10px; min-height: 18px; }

.layout { display: grid; grid-template-columns: 250px 1fr; grid-template-rows: 54px 1fr; height: 100vh; }
.topbar { grid-column: 1 / 3; background: var(--verde); color: #fff; display: flex; align-items: center; padding: 0 18px; gap: 14px; }
.topbar .marca { font-size: 19px; font-weight: bold; letter-spacing: .02em; flex: 1; }
.topbar .usuario { font-size: 13px; opacity: .95; }
.topbar button { background: #fff; color: var(--verde); border: none; border-radius: 6px; padding: 6px 12px; font-weight: bold; }

.menu { background: #f9fbf9; border-right: 1px solid var(--verde-linha); overflow-y: auto; padding: 10px 0 30px; }
.menu .grupo { padding: 12px 14px 4px; font-size: 11px; font-weight: bold; letter-spacing: .06em; color: var(--cinza); display: flex; align-items: center; gap: 8px; text-transform: uppercase; }
.menu .grupo svg { width: 15px; height: 15px; stroke: var(--verde); }
.menu a { display: flex; align-items: center; gap: 9px; padding: 7px 10px 7px 18px; white-space: nowrap; font-size: 13px; color: var(--texto); text-decoration: none; border-left: 3px solid transparent; }
.menu a svg { width: 16px; height: 16px; stroke: var(--verde); flex: none; }
.menu a:hover { background: var(--verde-claro); }
.menu a.ativo { background: var(--verde-claro); border-left-color: var(--verde); font-weight: bold; }
.menu a.breve { color: #9aa5a0; cursor: default; }
.menu a.breve svg { stroke: #b5beb9; }
.menu a.breve:hover { background: transparent; }
.menu a.breve small { margin-left: auto; font-size: 9px; background: #e8ece9; color: #7c8a83; border-radius: 8px; padding: 1px 6px; white-space: nowrap; }

.conteudo { overflow: auto; padding: 22px 26px 60px; }
.conteudo h2 { margin: 0 0 16px; font-size: 20px; color: var(--verde-esc); display: flex; align-items: center; gap: 10px; }
.conteudo h2 svg { width: 22px; height: 22px; stroke: var(--verde); }

.barra { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.barra .espaco { flex: 1; }
.btn { background: var(--verde); color: #fff; border: none; border-radius: 7px; padding: 8px 16px; font-weight: bold; }
.btn:hover { background: var(--verde-esc); }
.btn.claro { background: #fff; color: var(--verde); border: 1px solid var(--verde); }
.btn.claro:hover { background: var(--verde-claro); }
.btn.perigo { background: var(--perigo); }
.btn[disabled] { opacity: .5; cursor: default; }
.link { color: var(--verde); text-decoration: none; cursor: pointer; font-weight: bold; }
.link:hover { text-decoration: underline; }

table.grade { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--verde-linha); border-radius: 8px; overflow: hidden; }
table.grade th { background: #eef5f0; text-align: left; padding: 9px 11px; border-bottom: 1px solid var(--verde-linha); font-size: 13px; white-space: nowrap; }
table.grade td { padding: 8px 11px; border-bottom: 1px solid #eef2ef; white-space: nowrap; }
table.grade tr:hover td { background: #fafdfb; }
table.grade .num { text-align: right; font-variant-numeric: tabular-nums; }
.pilula { display: inline-block; padding: 1px 9px; border-radius: 10px; color: #fff; font-size: 12px; font-weight: bold; }
.mudo { color: #aab3ae; }

.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
.cartao { background: #fff; border: 1px solid var(--verde-linha); border-radius: 10px; padding: 16px 18px; }
.cartao .valor { font-size: 30px; font-weight: bold; color: var(--verde); }
.cartao .rotulo { color: var(--cinza); font-size: 12px; letter-spacing: .04em; }

.fundo-modal { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal { background: #fff; border-radius: 12px; padding: 22px 24px; width: min(560px, 94vw); max-height: 92vh; overflow: auto; }
.modal h3 { margin: 0 0 14px; color: var(--verde-esc); }
.modal label { display: block; margin: 10px 0 4px; font-weight: bold; font-size: 13px; }
.modal input, .modal select, .modal textarea { width: 100%; }
.modal textarea { min-height: 180px; font-family: Consolas, monospace; }
.modal .rodape { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.progresso { height: 12px; background: #e3ebe5; border-radius: 6px; overflow: hidden; margin-top: 10px; }
.progresso > div { height: 100%; background: var(--verde); width: 0; transition: width .2s; }
.dica { color: var(--cinza); font-size: 12px; margin-top: 6px; }
.aviso-caixa { background: #fff7e6; border: 1px solid #f0c36d; color: #92620a; border-radius: 8px; padding: 10px 12px; margin-top: 10px; }

/* grade com menu por coluna */
.gr-th { position: relative; padding-right: 26px !important; }
.gr-th .gr-seta { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: none; background: transparent; color: #7c8a83; font-size: 13px; padding: 2px 5px; opacity: 0; border-radius: 4px; }
.gr-th:hover .gr-seta, .gr-th .gr-ativo + .gr-seta { opacity: 1; }
.gr-th .gr-seta:hover { background: #dbe8de; }
.gr-rot.gr-ativo { text-decoration: underline; color: var(--verde-esc); }
.gr-menu { position: absolute; z-index: 60; background: #fff; border: 1px solid var(--verde-linha); border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.18); padding: 6px 0; width: 260px; font-size: 13px; }
.gr-menu a { display: block; padding: 6px 14px; cursor: pointer; color: var(--texto); }
.gr-menu a:hover { background: var(--verde-claro); }
.gr-menu hr { border: none; border-top: 1px solid #e6ece8; margin: 6px 0; }
.gr-menu .gr-sec { padding: 2px 14px; font-weight: bold; color: var(--cinza); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.gr-menu label { display: block; padding: 3px 14px; cursor: pointer; }
.gr-menu select, .gr-menu input[data-f] { width: calc(100% - 28px); margin: 4px 14px 0; }
.gr-menu .gr-bt { display: flex; gap: 8px; padding: 8px 14px 4px; }
.gr-menu .gr-bt .btn { padding: 5px 12px; }

table.grade tr.gr-sel td { background: #e3f1e7 !important; }
.sim-aviso { background: #fff3cd; color: #7a5b00; font-size: 12px; font-weight: bold; padding: 3px 10px; border-radius: 10px; }

.logo-pill { background: #fff; border-radius: 8px; padding: 3px 12px; display: inline-flex; align-items: center; }
.logo-pill img { height: 30px; display: block; }
.logo-txt { margin-left: 10px; font-size: 19px; font-weight: bold; vertical-align: middle; }
.topbar .marca { display: flex; align-items: center; }

/* abas */
.area { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
.abas { display: flex; gap: 3px; background: #dfeee3; padding: 6px 10px 0; overflow-x: auto; border-bottom: 2px solid var(--verde); flex: none; }
.aba { display: flex; align-items: center; gap: 7px; padding: 7px 10px 7px 12px; border-radius: 8px 8px 0 0; background: #b9d8c1; color: var(--verde-esc); cursor: pointer; white-space: nowrap; font-size: 13px; user-select: none; }
.aba:hover { background: #cde5d3; }
.aba.ativa { background: var(--verde); color: #fff; font-weight: bold; }
.aba .ai svg { width: 15px; height: 15px; stroke: currentColor; display: block; }
.aba .ax { border: none; background: transparent; color: inherit; font-size: 17px; line-height: 1; padding: 0 3px; border-radius: 4px; opacity: .75; }
.aba .ax:hover { background: rgba(0,0,0,.15); opacity: 1; }
.frames { position: relative; flex: 1; min-height: 0; }
.frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: none; background: var(--fundo); }
.frame.ativa { display: block; }
body.embed { background: var(--fundo); }
body.embed .conteudo { height: 100vh; overflow: auto; }

/* rodapé das listas: fica fixo embaixo da tela (página x de y + total), como no Magnus */
.gr-rodape { position: sticky; bottom: -60px; z-index: 6; background: #eef5f0; border-top: 2px solid var(--verde-linha); margin: 12px -26px -60px; padding: 10px 26px; }
.gr-rodape .btn { padding: 6px 12px; }

/* barra única das listas: título pequeno + botões + buscas + limpar filtros */
.gr-barra { gap: 8px; margin-bottom: 10px; }
.gr-barra h2 { margin: 0 8px 0 0; font-size: 16px; white-space: nowrap; }
.gr-barra h2 svg { width: 18px; height: 18px; }
.gr-barra .btn, .gr-barra select, .gr-barra input { padding: 6px 12px; font-size: 13px; }
.gr-barra input { width: 140px; }
.gr-barra select { min-width: 0; }
.conteudo { padding-top: 12px; }
.gr-busca { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.card-aj { background: #fff; border: 1px solid var(--verde-linha); border-radius: 10px; padding: 14px 18px; margin-bottom: 14px; }
.card-aj h3 { margin: 0 0 8px; font-size: 15px; color: var(--verde-esc); }
.aj-linha { display: flex; gap: 18px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid #eef3ef; }
.aj-linha:first-of-type { border-top: none; }
.aj-linha input { width: 110px; text-align: right; }

.rot-inline { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #444; }
.rot-inline input { width: 140px; }

.aj-lista { max-height: 240px; overflow: auto; border: 1px solid #e3ebe5; border-radius: 8px; padding: 2px 10px; }

/* pílulas das janelas minimizadas, na barra verde de cima */
#chips { display: flex; gap: 8px; align-items: center; }
.pilula-barra { background: rgba(255,255,255,.18); color: #fff; font-size: 12px; padding: 6px 14px; border-radius: 18px; cursor: pointer; user-select: none; white-space: nowrap; border: 1px solid rgba(255,255,255,.35); }
.pilula-barra:hover { background: rgba(255,255,255,.3); }

/* menu sanfona */
.menu .grupo { cursor: pointer; user-select: none; }
.menu .grupo:hover { color: var(--verde-esc); }
.menu .grupo .gnome { flex: 1; }
.menu .grupo .gmais { font-size: 16px; font-weight: bold; color: var(--verde); line-height: 1; }

/* sugestões no filtro da coluna (ex.: agendas) */
.gr-sug { max-height: 220px; overflow: auto; border: 1px solid #e3ebe5; border-radius: 6px; margin-top: 6px; background: #fff; }
.gr-sug a { display: block; padding: 6px 10px; cursor: pointer; font-size: 13px; border-bottom: 1px solid #f0f4f1; white-space: normal; }
.gr-sug a:hover { background: var(--verde-claro); }
.gr-sug .dica { padding: 6px 10px; }

.combo { position: relative; display: inline-block; }
.gr-flut { position: absolute; top: 100%; left: 0; min-width: 340px; z-index: 60; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.gr-menu { max-height: calc(100vh - 16px); overflow: auto; }

/* página principal */
.pn-grade { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.pn-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 1100px) { .pn-grade { grid-template-columns: 1fr; } }
.pn-caixa { background: #fff; border: 1px solid var(--verde-linha); border-radius: 10px; overflow: hidden; }
.pn-tit { background: var(--verde); color: #fff; font-weight: bold; font-size: 14px; padding: 8px 14px; }
.pn-corpo { padding: 12px 14px; }
.pn-barra { margin-bottom: 10px; }
.pn-rot { display: flex; justify-content: space-between; font-size: 12px; color: #555; margin-bottom: 3px; }
.pn-trilho { height: 10px; background: #e8eeea; border-radius: 5px; overflow: hidden; }
.pn-trilho > div { height: 100%; border-radius: 5px; transition: width .4s; }
.pn-linha { display: flex; justify-content: space-between; font-size: 13px; padding-top: 6px; border-top: 1px solid #eef3ef; }
.pn-per { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pn-per .btn { padding: 4px 10px; font-size: 12px; }
.pn-per .btn.pn-sel { background: var(--verde); color: #fff; }
.pn-leg { font-size: 12px; color: #555; margin-top: 4px; }
.pn-cartao { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--verde-linha); border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; }
.pn-ico { width: 52px; height: 52px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; }
.pn-ico svg { width: 28px; height: 28px; stroke: #fff; }
.pn-valor { font-size: 24px; font-weight: bold; color: var(--verde-esc); line-height: 1.1; }
.pn-rotulo { font-size: 12px; color: #6b7280; }

/* números ao vivo na barra verde de cima (igual ao widget do Magnus) */
.vivo { display: flex; align-items: stretch; gap: 0; border: 2px solid #fff; border-radius: 12px; background: rgba(255,255,255,.96); color: #14532d; cursor: pointer; overflow: hidden; }
.vivo .vv { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3px 16px; border-left: 1px solid #d5e3d9; line-height: 1.15; min-width: 70px; }
.vivo .vv:first-child { border-left: none; }
.vivo .vv b { font-size: 17px; color: #1f2d24; }
.vivo .vv-cc b { color: #c2410c; }
.vivo .vv span { font-size: 10px; color: #6b7280; letter-spacing: .04em; }
.vivo.vv-on .vv:nth-child(2) b, .vivo.vv-on .vv:nth-child(3) b { color: #16a34a; }
.vivo #vv_z { color: var(--verde); font-weight: bold; margin-left: 3px; cursor: pointer; text-decoration: none; }
.vivo #vv_z:hover { color: #b91c1c; }
@media (max-width: 1000px) { .vivo .vv:nth-child(3), .vivo .vv:nth-child(4) { display: none; } }
.topbar .marca { flex: none !important; }

.topbar .espaco-topo { flex: 1; }
.topbar .sim-aviso { font-size: 10px; padding: 2px 8px; letter-spacing: .06em; }

/* quadradinho de seleção da linha */
table.grade th.gr-ckc, table.grade td.gr-ckc { width: 30px; padding: 0 0 0 10px; text-align: center; }
table.grade .gr-ck { width: 16px; height: 16px; accent-color: var(--verde); cursor: pointer; }
table.grade tr.gr-sel td { background: #cfe9d6 !important; font-weight: 600; }
table.grade tr.gr-sel td.gr-ckc { box-shadow: inset 4px 0 0 var(--verde); }
.menu a.sub { padding-left: 42px; font-size: 12.5px; }

/* listinha de datas ao lado de Campanhas */
#menu-dias { position: fixed; z-index: 90; background: #fff; border: 1px solid var(--verde-linha); border-radius: 8px; box-shadow: 0 6px 22px rgba(0,0,0,.2); min-width: 190px; padding: 4px 0; }
#menu-dias a { display: block; padding: 8px 16px; font-size: 13px; cursor: pointer; color: var(--texto); white-space: nowrap; }
#menu-dias a:hover { background: var(--verde-claro); }
#menu-dias a:first-child { color: #6b7280; border-bottom: 1px solid #eef3ef; }

/* listas: título/botões em cima, tabela rolando no meio e a barra de páginas FIXA no pé da tela (como no Magnus) */
body.embed .conteudo:has(.gr-rodape) { display: flex; flex-direction: column; height: 100vh; overflow: hidden; padding-bottom: 0; }
body.embed .conteudo:has(.gr-rodape) > #gr { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body.embed .conteudo:has(.gr-rodape) .gr-tabela { flex: 1; min-height: 0; overflow: auto; }
body.embed .conteudo:has(.gr-rodape) .gr-barra, body.embed .conteudo:has(.gr-rodape) .gr-rapida { flex: none; }
body.embed .conteudo:has(.gr-rodape) .gr-rodape { position: static; flex: none; margin: 0 -26px; padding: 8px 26px; border-top: 2px solid var(--verde-linha); background: #eef5f0; box-shadow: 0 -3px 8px rgba(0,0,0,.05); }
body.embed .conteudo:has(.gr-rodape) table.grade thead th { position: sticky; top: 0; z-index: 3; }
.gr-rodape .gr-nav[data-pg="r"] { padding: 6px 10px; border-width: 2px; }
.gr-rodape .gr-nav[data-pg="r"] svg { display: block; }

table.grade th.gr-th { cursor: pointer; user-select: none; }
table.grade th.gr-th:hover .gr-rot { text-decoration: underline; }

/* janelas: começam mais no alto, mais largas, e o rodapé (Salvar/Cancelar) fica sempre visível */
.fundo-modal { align-items: flex-start; padding-top: 2vh; }
.modal { width: min(700px, 95vw); max-height: 96vh; }
.modal .rodape { position: sticky; bottom: -22px; background: #fff; padding: 12px 0 8px; margin: 16px 0 -22px; border-top: 1px solid #e5ebe8; z-index: 5; }

/* abas dentro das janelas (campanha) */
.abas-form { display: flex; gap: 4px; border-bottom: 2px solid var(--verde); margin: 0 0 14px; }
.abas-form a { padding: 8px 18px; cursor: pointer; background: #e8f1ea; color: var(--verde-esc); border-radius: 8px 8px 0 0; font-weight: bold; font-size: 13px; }
.abas-form a.on { background: var(--verde); color: #fff; }
.modal .aba-p { min-height: 330px; }

/* janela flutuante "Processamento" (estilo htop) */
#janela-proc { position: fixed; top: 110px; right: 40px; width: 640px; max-width: 94vw; background: #1c1f1d; color: #d8dedb; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.45); z-index: 3000; font-family: Consolas, "Courier New", monospace; overflow: hidden; }
#janela-proc .jp-titulo { background: #2b6a3f; color: #fff; padding: 12px 18px; font-family: system-ui, sans-serif; font-weight: bold; cursor: move; display: flex; justify-content: space-between; align-items: center; user-select: none; }
#janela-proc .jp-x { cursor: pointer; font-size: 22px; line-height: 1; padding: 0 4px; }
#janela-proc .jp-corpo { padding: 18px 22px 20px; }
#janela-proc .jp-nucleos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 36px; }
#janela-proc .jp-b { display: flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; }
#janela-proc .jp-r { width: 28px; text-align: right; color: #38bdf8; font-weight: bold; }
#janela-proc .jp-trilho { flex: 1; height: 11px; background: repeating-linear-gradient(90deg, #3a3f3c 0 2px, #2a2e2b 2px 4px); display: inline-block; min-width: 90px; }
#janela-proc .jp-trilho i { display: block; height: 100%; transition: width .4s; background-image: repeating-linear-gradient(90deg, transparent 0 2px, rgba(0,0,0,.35) 2px 3px); }
#janela-proc .jp-v { min-width: 62px; text-align: right; }
#janela-proc .jp-linha { margin: 12px 0 14px; padding-bottom: 14px; border-bottom: 1px solid #3a3f3c; }
#janela-proc .jp-info div { margin: 4px 0; font-size: 15px; }
#janela-proc .jp-info b { color: #38bdf8; }

#janela-proc.jp-min { display: none; }
#janela-proc .jp-bt { display: flex; gap: 14px; align-items: center; }
#janela-proc .jp-mn { cursor: pointer; font-size: 20px; line-height: 1; padding: 0 4px; }
.chip-proc { background: #2b6b3f; color: #fff; font-size: 12px; padding: 7px 14px; border-radius: 18px; box-shadow: 0 2px 8px rgba(0,0,0,.3); cursor: pointer; white-space: nowrap; margin-left: 14px; align-self: center; user-select: none; }