/* Demandas de Marketing — Nutrindo Ideais */
:root {
  --carvao: #1f1d1b;
  --carvao-2: #2b2825;
  --creme: #f5f0e7;
  --papel: #fffdf9;
  --creme-2: #ebe3d5;
  --marrom: #7a5a43;
  --verde: #4f6b4a;
  --texto: #2a2622;
  --suave: #6f665d;
  --linha: rgba(31, 29, 27, .12);
  --erro: #a3402e;
  --st-recebida: #b98a24;
  --st-andamento: #3f6585;
  --st-aguardando: #a35f2a;
  --st-concluida: #4f6b4a;
  --raio: 14px;
  --serif: "Campton", sans-serif;
  --sans: "Campton", sans-serif;
  --mono: "Campton", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--creme); color: var(--texto);
  font: 16px/1.5 var(--sans); min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--marrom); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
.mono, .meta { font-family: var(--mono); font-size: .78rem; letter-spacing: .02em; color: var(--suave); }

/* ---------- topo ---------- */
.topo { background: var(--carvao); color: var(--creme); padding-top: env(safe-area-inset-top); }
.topo-in { max-width: 920px; margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.marca { color: inherit; text-decoration: none; display: flex; flex-direction: column; }
.marca-nome { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.marca-sub { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; opacity: .65; }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; font-size: .9rem; padding: 8px 12px; border: 1px solid rgba(245,240,231,.25); border-radius: 999px; white-space: nowrap; }
.menu summary::-webkit-details-marker { display: none; }
.menu-caixa { position: absolute; right: 0; top: calc(100% + 6px); background: var(--papel); color: var(--texto); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); min-width: 200px; padding: 6px; z-index: 10; display: flex; flex-direction: column; }
.menu-caixa a { padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--texto); }
.menu-caixa a:hover { background: var(--creme); }
.menu-quem { padding: 10px 12px 6px; font-size: .8rem; color: var(--suave); border-bottom: 1px solid var(--linha); margin-bottom: 4px; }
.abas { max-width: 920px; margin: 0 auto; padding: 0 16px; display: flex; gap: 4px; overflow-x: auto; }
.abas a { color: rgba(245,240,231,.7); text-decoration: none; padding: 10px 14px; font-size: .92rem; border-bottom: 2px solid transparent; white-space: nowrap; }
.abas a.on { color: var(--creme); border-color: var(--creme); }

/* ---------- página ---------- */
.pagina { width: 100%; max-width: 920px; margin: 0 auto; padding: 22px 16px 40px; flex: 1; }
.rodape { text-align: center; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
.cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.cabeca h1 { margin: 0; }
.voltar { display: inline-block; margin-bottom: 10px; font-size: .9rem; text-decoration: none; }

.cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; }
.cartao + .cartao { margin-top: 14px; }

/* ---------- avisos ---------- */
.aviso { padding: 12px 14px; border-radius: 10px; margin-bottom: 16px; font-size: .95rem; background: #e6eee2; color: #2f4a2b; border: 1px solid #c9d8c3; }
.aviso-erro { background: #f6e4df; color: #7d2f20; border-color: #e9c3b9; }
.aviso-info { background: var(--creme-2); color: var(--texto); border-color: var(--linha); }

/* ---------- formulários ---------- */
label { display: block; font-weight: 600; font-size: .92rem; margin: 0 0 6px; }
.dica { font-weight: 400; color: var(--suave); font-size: .82rem; }
.campo { margin-bottom: 16px; }
input[type=text], input[type=password], input[type=email], input[type=date], select, textarea {
  width: 100%; font: inherit; color: var(--texto); background: var(--papel);
  border: 1px solid rgba(31,29,27,.22); border-radius: 10px; padding: 12px 13px; min-height: 48px;
  -webkit-appearance: none; appearance: none;
}
select { background-image: linear-gradient(45deg, transparent 50%, var(--suave) 50%), linear-gradient(135deg, var(--suave) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--marrom); outline-offset: 1px; border-color: transparent; }
.linha2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .linha2 { grid-template-columns: 1fr; } }

.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 1rem var(--sans); background: var(--carvao); color: var(--creme); border: 0; border-radius: 12px; padding: 13px 20px; min-height: 48px; cursor: pointer; text-decoration: none; }
.botao:hover { background: var(--carvao-2); }
.botao-largo { width: 100%; }
.botao-claro { background: transparent; color: var(--texto); border: 1px solid rgba(31,29,27,.25); }
.botao-claro:hover { background: var(--creme-2); }
.botao-peq { min-height: 38px; padding: 8px 14px; font-size: .88rem; border-radius: 10px; }
.botao-relatorio { background: #183c34; color: #fff !important; border: 1px solid #183c34; }
.botao-relatorio:hover { background: #1c6557; color: #fff !important; }
.botao-perigo { color: var(--erro); }
.botao-novo { font-size: 1.05rem; padding: 16px 22px; }

.anexar { border: 1.5px dashed rgba(31,29,27,.25); border-radius: 12px; padding: 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: rgba(255,255,255,.5); }
.anexar input[type=file] { font-size: .88rem; max-width: 100%; }
.gravador { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.gravador .botao { color: #fff; }
.gravador audio { height: 40px; max-width: 100%; }
.gravando { color: var(--erro); font-family: var(--mono); font-size: .8rem; }
.gravando::before { content: "●"; margin-right: 6px; animation: piscar 1s infinite; }
@keyframes piscar { 50% { opacity: .2; } }

/* ---------- chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; font: 500 .74rem var(--mono); letter-spacing: .02em; padding: 4px 10px; border-radius: 999px; background: var(--creme-2); white-space: nowrap; }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st-recebida { color: var(--st-recebida); background: #f6ecd2; }
.st-andamento { color: var(--st-andamento); background: #e1e9f0; }
.st-aguardando { color: var(--st-aguardando); background: #f4e3d4; }
.st-concluida { color: var(--st-concluida); background: #e3ebdf; }
.chip-unidade { color: var(--texto); background: var(--creme-2); }
.prazo { font-family: var(--mono); font-size: .76rem; color: var(--suave); }
.prazo.atrasada { color: var(--erro); font-weight: 500; }
.prazo.hoje { color: var(--st-aguardando); font-weight: 500; }

/* ---------- lista de demandas ---------- */
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.item { display: block; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.item:hover { border-color: rgba(31,29,27,.3); }
.item.atrasada { border-left: 3px solid var(--erro); }
.item-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.item-titulo { font-family: var(--serif); font-size: 1.08rem; font-weight: 600; margin: 0 0 4px; }
.item-rodape { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.vazio { text-align: center; padding: 34px 16px; color: var(--suave); }
.secao-titulo { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); margin: 26px 0 10px; }

/* ---------- indicadores ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
@media (max-width: 640px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; text-decoration: none; color: inherit; }
.kpi b { display: block; font: 600 1.9rem/1.1 var(--serif); }
.kpi span { font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: var(--suave); }
.kpi.alerta b { color: var(--erro); }

.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filtros select { width: auto; min-height: 42px; padding: 8px 34px 8px 12px; font-size: .92rem; flex: 1 1 160px; }

/* ---------- detalhe ---------- */
.detalhe-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 14px 0 4px; }
.detalhe-meta div span { display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.descricao { white-space: pre-wrap; word-wrap: break-word; margin: 0; }
.anexos { display: flex; flex-direction: column; gap: 10px; }
.anexo { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px; border: 1px solid var(--linha); border-radius: 12px; background: #fff; }
.anexo img { width: 88px; height: 88px; object-fit: cover; border-radius: 8px; }
.anexo audio, .anexo video { max-width: 100%; }
.anexo video { max-height: 240px; border-radius: 8px; }
.anexo a { word-break: break-all; }

.linha-tempo { list-style: none; margin: 0; padding: 0; }
.linha-tempo li { position: relative; padding: 0 0 16px 22px; }
.linha-tempo li::before { content: ""; position: absolute; left: 5px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--marrom); }
.linha-tempo li::after { content: ""; position: absolute; left: 9px; top: 18px; bottom: 0; width: 1px; background: var(--linha); }
.linha-tempo li:last-child::after { display: none; }
.linha-tempo .msg { background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 10px 12px; margin-top: 6px; white-space: pre-wrap; word-wrap: break-word; }
.linha-tempo .msg.do-marketing { background: #f1ebe1; }

/* ---------- tabelas ---------- */
.tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { text-align: left; font: 500 .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); padding: 10px 8px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
td { padding: 11px 8px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.total td { font-weight: 600; border-bottom: 0; border-top: 2px solid var(--carvao); }
.barra { height: 8px; border-radius: 4px; background: var(--creme-2); overflow: hidden; min-width: 70px; }
.barra i { display: block; height: 100%; background: var(--verde); border-radius: 4px; }

.acessos td form { display: inline; }
.acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.acessos .acoes .botao { color: #fff !important; background: #183c34; border-color: #183c34; }
.acessos .acoes .botao:hover { background: #1c6557; }
.acessos .acoes .botao.botao-perigo { color: #8f2d1e !important; background: #fff1ec; border-color: #d49b8f; }

/* ---------- login ---------- */
.login { max-width: 420px; margin: 6vh auto 0; }
.login h1 { font-size: 2rem; }

/* ---------- impressão (relatório em PDF) ---------- */
@media print {
  body { background: #fff; }
  .topo, .rodape, .nao-imprimir, .aviso { display: none !important; }
  .pagina { padding: 0; max-width: none; }
  .cartao, .kpi { border-color: #ccc; break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* Identidade visual do projeto Embaixador Diego: verde profundo, menta e aqua. */
:root{--carvao:#102f28;--carvao-2:#183c34;--creme:#f6f7f2;--papel:#fffefb;--creme-2:#d8eee6;--marrom:#176b61;--verde:#1c6d5a;--texto:#183c34;--suave:#52645d;--linha:#d1ded7;--erro:#9c4d24;--st-recebida:#805817;--st-andamento:#176b61;--st-aguardando:#9c4d24;--st-concluida:#1c6d5a;--serif:"Campton",sans-serif;--sans:"Campton",sans-serif;--mono:"Campton",sans-serif}
body{background:var(--creme);color:var(--texto)}
body{font-family:"Campton",sans-serif;font-weight:400}
h1,h2,h3,.marca-nome,.item-titulo,.kpi b{font-family:var(--sans);font-weight:700}
.topo{background:var(--carvao);color:var(--creme)}
.botao{background:var(--carvao);color:#fff}
.botao:hover{background:#1c6557}
.botao-claro{color:var(--texto);border-color:#aebdb5}
.topo .botao-claro{color:var(--creme);border-color:rgba(216,238,230,.55)}
.topo .botao-claro:hover{background:#183c34;color:#fff}
.botao-perigo{color:#9c2f1d}
.meta,.dica,.secao-titulo,.kpi span{color:var(--suave)}
.cartao,.item,.kpi{border-color:var(--linha);background:var(--papel)}
.aviso{background:var(--creme-2);color:var(--texto);border-color:#b7d9ce}
.chip-unidade{background:var(--creme-2);color:var(--texto)}