:root {
  --fundo: #f2f4f3;
  --superficie: #ffffff;
  --tinta: #1b2422;
  --tinta-suave: #5f6b68;
  --linha: #dfe4e2;
  --verde: #1f5f52;
  --verde-claro: #e3efeb;
  --vencido: #a9391f;
  --vencido-claro: #f7e6e1;
  --hoje: #b8791a;
  --hoje-claro: #f8efdc;
  --semana: #2f6e9e;
  --semana-claro: #e2edf6;
  --emdia: #3c7d57;
  --emdia-claro: #e4f1e9;
  --raio: 10px;
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fundo); color: var(--tinta); font-size: 16px; line-height: 1.45; }
a { color: var(--verde); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #7fb3a6; outline-offset: 2px; }

.topo { background: var(--verde); color: #fff; padding: 12px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.topo .marca { font-weight: 600; letter-spacing: .01em; }
.topo .marca small { display: block; font-weight: 400; opacity: .85; font-size: .85rem; }
.topo nav { margin-left: auto; display: flex; gap: 10px; align-items: center; font-size: .92rem; }
.topo nav a { color: #fff; text-decoration: none; opacity: .92; }
.topo nav a:hover { opacity: 1; text-decoration: underline; }

main { max-width: 1320px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.35rem; margin: 6px 0 4px; font-weight: 600; }
h2 { font-size: 1.05rem; margin: 22px 0 8px; font-weight: 600; }
.sub { color: var(--tinta-suave); margin: 0 0 12px; font-size: .95rem; }

/* filtros como fichas com contagem */
.fichas { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 14px; }
.ficha { border: 1px solid var(--linha); background: var(--superficie); border-radius: 999px; padding: 6px 12px; display: flex; gap: 8px; align-items: center; color: var(--tinta); }
.ficha b { font-weight: 600; }
.ficha.ativa { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.ficha .ponto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.ponto.vencido { background: var(--vencido); } .ponto.hoje { background: var(--hoje); }
.ponto.semana { background: var(--semana); } .ponto.em_dia { background: var(--emdia); } .ponto.nenhuma { background: #9aa5a1; }

.busca { width: 100%; padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); margin-bottom: 10px; }

/* lista de clientes: trilho colorido à esquerda */
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cliente { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); display: grid; grid-template-columns: 6px 1fr auto; overflow: hidden; }
.cliente .trilho { background: #c9d1ce; }
.cliente.vencido .trilho { background: var(--vencido); } .cliente.hoje .trilho { background: var(--hoje); }
.cliente.semana .trilho { background: var(--semana); } .cliente.em_dia .trilho { background: var(--emdia); }
.cliente .corpo { padding: 10px 12px; min-width: 0; }
.cliente .nome { font-weight: 600; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.cliente .nome .pos { font-weight: 400; color: var(--tinta-suave); font-size: .85rem; }
.cliente .meta { color: var(--tinta-suave); font-size: .88rem; margin-top: 2px; }
.cliente .prazo { padding: 10px 12px; text-align: right; white-space: nowrap; font-size: .9rem; align-self: center; }
.cliente .prazo b { display: block; font-size: 1.05rem; font-weight: 600; }
.cliente.vencido .prazo b { color: var(--vencido); } .cliente.hoje .prazo b { color: var(--hoje); }
.cliente .detalhe { grid-column: 1 / -1; border-top: 1px solid var(--linha); padding: 12px; background: #fafbfa; }
.cliente[aria-expanded="true"] .corpo { cursor: default; }
.cliente .corpo, .cliente .prazo { cursor: pointer; }

.etiqueta { display: inline-block; font-size: .78rem; padding: 1px 8px; border-radius: 999px; background: var(--verde-claro); color: var(--verde); }
.etiqueta.novo { background: var(--semana-claro); color: var(--semana); }
.etiqueta.manual { background: var(--hoje-claro); color: var(--hoje); }

.acoes { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.botao { border: 1px solid var(--verde); background: var(--verde); color: #fff; border-radius: 8px; padding: 9px 14px; font-weight: 600; }
a.botao, a.botao:hover { text-decoration: none; display: inline-block; }
.botao.leve { background: var(--superficie); color: var(--verde); }
.botao.cinza { background: var(--superficie); color: var(--tinta); border-color: var(--linha); }
.botao:disabled { opacity: .55; cursor: wait; }
.zap { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; border: 1px solid #25a55f; color: #16794a; background: #eaf7ef; border-radius: 8px; padding: 9px 14px; font-weight: 600; }

.form { display: grid; gap: 8px; }
.form label { font-size: .88rem; color: var(--tinta-suave); display: grid; gap: 4px; }
.form input, .form select, .form textarea { padding: 9px 10px; border: 1px solid var(--linha); border-radius: 8px; background: #fff; width: 100%; }
.form textarea { min-height: 64px; resize: vertical; }
.linha2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 520px) { .linha2 { grid-template-columns: 1fr; } }

.historico { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; font-size: .9rem; }
@media (max-width: 640px) { .historico { grid-template-columns: 1fr; } }
.historico h3 { margin: 0 0 6px; font-size: .95rem; font-weight: 600; }
.historico ul { margin: 0; padding-left: 0; list-style: none; }
.historico li { padding: 4px 0; border-top: 1px solid var(--linha); }
.historico li:first-child { border-top: 0; }
.historico .quem { color: var(--tinta-suave); }

.vazio { background: var(--superficie); border: 1px dashed var(--linha); border-radius: var(--raio); padding: 22px; text-align: center; color: var(--tinta-suave); }
.aviso { background: var(--hoje-claro); border: 1px solid #e8d2a5; border-radius: var(--raio); padding: 10px 12px; margin: 10px 0; }
.erro { background: var(--vencido-claro); border: 1px solid #e9bfb3; color: var(--vencido); border-radius: var(--raio); padding: 10px 12px; margin: 10px 0; }
.ok { background: var(--emdia-claro); border: 1px solid #bfdcc9; color: var(--emdia); border-radius: var(--raio); padding: 10px 12px; margin: 10px 0; }

/* login */
.login { max-width: 380px; margin: 60px auto; background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; padding: 26px; }
.login h1 { margin-top: 0; }

/* gestão */
.tabela { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; font-size: .86rem; }
.tabela th, .tabela td { padding: 7px 8px; text-align: left; border-top: 1px solid var(--linha); vertical-align: middle; }
.tabela th { border-top: 0; background: #f7f9f8; font-weight: 600; color: var(--tinta-suave); }
.tabela td a { white-space: nowrap; }
.tabela td.num, .tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela .v { color: var(--vencido); font-weight: 600; } .tabela .h { color: var(--hoje); font-weight: 600; }
.rolagem { overflow-x: auto; }
.painel { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; margin-bottom: 14px; }
.status-linha { display: flex; gap: 14px; flex-wrap: wrap; font-size: .92rem; color: var(--tinta-suave); }
.status-linha b { color: var(--tinta); font-weight: 600; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .duas { grid-template-columns: 1fr; } }
.discreto { color: var(--tinta-suave); font-size: .85rem; }
dialog { border: 1px solid var(--linha); border-radius: 14px; padding: 18px; max-width: 420px; width: calc(100% - 32px); }
dialog::backdrop { background: rgba(20, 30, 28, .45); }
@media (prefers-reduced-motion: no-preference) { .cliente .detalhe { animation: abrir .16s ease-out; } }
@keyframes abrir { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* v2 */
.abas { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--linha); margin: 6px 0 16px; }
.aba { background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 12px; color: var(--tinta-suave); font-weight: 600; }
.aba.ativa { color: var(--verde); border-bottom-color: var(--verde); }
.secao { display: none; } .secao.ativa { display: block; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0 16px; }
.kpi { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px 12px; }
.kpi b { display: block; font-size: 1.4rem; font-weight: 600; }
.kpi span { color: var(--tinta-suave); font-size: .85rem; }
.etiqueta.fase { background: #eef1f0; color: var(--tinta-suave); }
.etiqueta.orc { background: #efe6f7; color: #5b3a86; }
.etiqueta.rec { background: var(--hoje-claro); color: var(--hoje); }
.etiqueta.sem { background: var(--vencido-claro); color: var(--vencido); }
.etiqueta.ag { background: var(--semana-claro); color: var(--semana); }
.etiqueta.estado-risco { background: var(--hoje-claro); color: var(--hoje); }
.etiqueta.estado-perdido { background: var(--vencido-claro); color: var(--vencido); }
.etiqueta.estado-reativado, .etiqueta.estado-novo { background: var(--emdia-claro); color: var(--emdia); }
.tels { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.tels a.zap { padding: 6px 10px; font-weight: 500; font-size: .9rem; }
.tels small { color: var(--tinta-suave); }
.msg-wa { font-style: italic; color: var(--tinta-suave); }
.param-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.param-grid label { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px; display: grid; gap: 4px; font-size: .88rem; }
.param-grid label b { font-weight: 600; color: var(--tinta); }
.param-grid input { padding: 7px 9px; border: 1px solid var(--linha); border-radius: 8px; width: 110px; }
.param-grid small { color: var(--tinta-suave); }
.inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline input, .inline select { padding: 8px 10px; border: 1px solid var(--linha); border-radius: 8px; }
.sugestoes { position: relative; }
.sugestoes ul { position: absolute; z-index: 5; background: #fff; border: 1px solid var(--linha); border-radius: 8px; list-style: none; margin: 2px 0 0; padding: 4px 0; width: 100%; max-height: 220px; overflow: auto; box-shadow: 0 6px 18px rgba(20,30,28,.12); }
.sugestoes li { padding: 6px 10px; cursor: pointer; } .sugestoes li:hover { background: var(--verde-claro); }
.desc { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px 12px; margin-bottom: 8px; }
.desc .num { font-weight: 600; }

/* catálogos */
.cat { display: inline-block; padding: 2px 8px; border-radius: 6px; color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .02em; margin: 2px 4px 2px 0; text-transform: uppercase; }
.cat.manual { outline: 2px dashed rgba(255,255,255,.7); outline-offset: -3px; }
.cat.inativo { opacity: .55; text-decoration: line-through; }
.cat.falta { background: transparent !important; color: var(--tinta-suave); border: 1px dashed var(--linha); font-weight: 500; text-transform: none; }
.cat-linha { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 6px 0; }
.cat-linha .rot { font-size: .8rem; color: var(--tinta-suave); margin-right: 4px; }
.cat-btn { border: 0; background: none; cursor: pointer; padding: 0; }
.amostra { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: middle; margin-right: 6px; }