:root {
  --fundo: #f3f5f7; --cartao: #fff; --texto: #1d2430; --suave: #5b6675; --borda: #d9dee5;
  --primaria: #0f766e; --primaria-escura: #0b5e58; --perigo: #b42318; --aviso: #b54708; --ok: #067647;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fundo); color: var(--texto); }
a { color: var(--primaria); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.05rem; margin: 0 0 .6rem; display: flex; justify-content: space-between; align-items: baseline; }
code { font-size: .9em; }

.topo { background: #0f1f2e; color: #fff; display: flex; align-items: center; gap: 1rem 1.5rem; padding: .45rem 1.2rem; min-height: 54px; flex-wrap: wrap; }
.topo .marca { color: #fff; font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.topo nav { display: flex; gap: .2rem; flex: 1; flex-wrap: wrap; }
.topo nav a { color: #d6dde6; padding: .35rem .6rem; border-radius: 6px; font-size: .92rem; }
.topo nav a:hover { background: rgba(255,255,255,.1); text-decoration: none; }
.topo nav a.destaque { background: var(--primaria); color: #fff; font-weight: 600; }
.topo .usuario { color: #aeb8c4; font-size: .88rem; display: flex; gap: .5rem; align-items: center; }
.topo form { display: inline; }
button.link { background: none; border: 0; color: inherit; cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }

main { max-width: 1180px; margin: 1.4rem auto; padding: 0 1.2rem; }
.cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cabecalho h1 { margin: 0; }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 800px) { .colunas { grid-template-columns: 1fr; } }
.dados p { margin: .25rem 0; }
.dica { color: var(--suave); font-size: .9rem; }
.periodo { color: var(--suave); }

.mensagens { margin-bottom: 1rem; }
.msg { padding: .6rem .9rem; border-radius: 8px; margin-bottom: .5rem; background: #e8f4ff; border: 1px solid #b6daff; }
.msg.success { background: #e6f7ee; border-color: #9fd9b8; }
.msg.warning { background: #fff4e5; border-color: #ffd199; }
.msg.error { background: #fde8e6; border-color: #f5b1ab; }
.erro { color: var(--perigo); }
small.erro { display: block; }

.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.indicador { background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: .9rem 1rem; }
.indicador span { color: var(--suave); font-size: .85rem; display: block; }
.indicador strong { font-size: 1.5rem; display: block; margin: .15rem 0; }
.indicador small { color: var(--suave); }
.indicador.acao { display: flex; flex-direction: column; gap: .5rem; justify-content: center; }

table { width: 100%; border-collapse: collapse; }
table.cartao { padding: 0; display: table; }
th, td { padding: .5rem .7rem; text-align: left; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); background: #f8f9fb; }
tbody tr:last-child td { border-bottom: 0; }
tfoot td { font-weight: 600; background: #f8f9fb; }
tfoot tr.total td { font-size: 1.05rem; }
.num { text-align: right; white-space: nowrap; }
.vazio { color: var(--suave); text-align: center; padding: 1.2rem; }
tr.cancelada td { color: #98a2b3; text-decoration: line-through; }
tr.cancelada td a { color: #98a2b3; }
.etiqueta.cancelada { background: var(--perigo); color: #fff; font-size: .7rem; padding: .2rem .5rem; border-radius: 4px; vertical-align: middle; }
.lista-simples { margin: 0; padding-left: 1.2rem; }

.busca { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; align-items: center; }
.busca input[type=search] { flex: 1; min-width: 200px; }
.busca label { display: flex; align-items: center; gap: .4rem; }

input, select, textarea { font: inherit; padding: .45rem .6rem; border: 1px solid var(--borda); border-radius: 6px; background: #fff; color: var(--texto); width: 100%; }
input[type=checkbox] { width: auto; }
input:focus, select:focus, textarea:focus { outline: 2px solid #99d6d0; border-color: var(--primaria); }
.grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem 1rem; }
@media (max-width: 900px) { .grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .grade { grid-template-columns: 1fr; } }
.campo label { display: block; font-size: .85rem; color: var(--suave); margin-bottom: .2rem; }
.campo.largo { grid-column: 1 / -1; }
.campo small { color: var(--suave); font-size: .8rem; }
.campo-check { display: flex; align-items: center; gap: .4rem; align-self: end; padding-bottom: .5rem; }
.campo-check label { margin: 0; color: var(--texto); font-size: .95rem; }
.acoes { margin-top: 1rem; display: flex; gap: .5rem; }

.botao { display: inline-block; padding: .5rem .95rem; border-radius: 7px; border: 1px solid var(--borda); background: #fff; color: var(--texto); cursor: pointer; font: inherit; font-weight: 500; white-space: nowrap; }
.botao:hover { background: #f1f3f6; text-decoration: none; }
.botao.primario { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.botao.primario:hover { background: var(--primaria-escura); }
.botao.perigo { color: var(--perigo); border-color: #f0b4ae; }
.botao.largo { width: 100%; }
.mini { font-size: .85rem; font-weight: normal; }

table.itens input, table.itens select { padding: .35rem .5rem; }
table.itens td { vertical-align: top; }
table.itens td.num input { text-align: right; max-width: 110px; }
table.itens .total-linha { font-weight: 600; padding-top: .75rem; }
.apagar { font-size: .85rem; color: var(--perigo); white-space: nowrap; }
.apagar input { width: auto; }

.tela-login { display: grid; place-items: center; min-height: 100vh; }
.caixa-login { background: #fff; padding: 2rem; border-radius: 12px; border: 1px solid var(--borda); width: 340px; display: flex; flex-direction: column; gap: .8rem; }
.caixa-login h1 { margin: 0; font-size: 1.3rem; }
.caixa-login .sub { margin: -.5rem 0 .5rem; color: var(--suave); }
.caixa-login label { font-size: .9rem; color: var(--suave); display: flex; flex-direction: column; gap: .25rem; }

@media print {
  .topo, .busca, .acoes, .nao-imprimir, .cabecalho .botao, .mensagens { display: none !important; }
  body { background: #fff; }
  main { max-width: none; margin: 0; padding: 0; }
  .cartao, .indicador { border: 1px solid #ccc; break-inside: avoid; }
}

tr.vendida td { color: #98a2b3; }
.busca select, .busca input[type=date] { width: auto; }
@media (max-width: 700px) {
  .topo { padding: .4rem .8rem; gap: .5rem; }
  .topo nav { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: .2rem; }
  .topo nav a { white-space: nowrap; }
  .topo .usuario { margin-left: auto; }
}

.ok { color: var(--ok); font-weight: 600; }
tr.paga td { color: #6b7786; }
.chat { display: flex; flex-direction: column; gap: .5rem; }
.chat .balao { max-width: 75%; padding: .55rem .8rem; border-radius: 12px; background: #f1f3f6; }
.chat .balao.loja { align-self: flex-end; background: #e6f4f3; }
.chat .balao small { color: var(--suave); display: block; font-size: .75rem; }
.chat .balao p { margin: .2rem 0 0; white-space: pre-wrap; }
.chat .balao img { max-width: 260px; border-radius: 8px; margin-top: .3rem; display: block; }
.filtros { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filtros a { padding: .3rem .7rem; border-radius: 99px; border: 1px solid var(--borda); background: #fff; font-size: .88rem; }
.filtros a.ativo { background: var(--primaria); color: #fff; border-color: var(--primaria); }

.badge { background: var(--perigo); color: #fff; border-radius: 99px; font-size: .7rem; padding: .05rem .45rem; vertical-align: middle; }
.chat-painel { display: grid; grid-template-columns: 1fr 300px; gap: 1.2rem; }
@media (max-width: 900px) { .chat-painel { grid-template-columns: 1fr; } }
.chat-caixa { background: #f1f3f6; border: 1px solid var(--borda); border-radius: 10px; height: 60vh; min-height: 380px; overflow-y: auto; padding: .8rem; display: flex; flex-direction: column; gap: .4rem; }
.chat-caixa .balao { max-width: 72%; padding: .5rem .75rem; border-radius: 12px; background: #fff; border: 1px solid var(--borda); align-self: flex-start; }
.chat-caixa .balao.loja { align-self: flex-end; background: #e6f4f3; border-color: #bfe3df; }
.chat-caixa .balao small { color: var(--suave); font-size: .72rem; display: block; }
.chat-caixa .balao p { margin: .15rem 0 0; white-space: pre-wrap; }
.chat-caixa .balao img { max-width: 260px; border-radius: 8px; margin-top: .3rem; display: block; }
.chat-caixa .balao .tipo { font-size: .72rem; font-weight: 600; color: var(--primaria); }
.chat-caixa .dia { text-align: center; color: var(--suave); font-size: .75rem; margin: .4rem 0; }
.chat-envio { display: flex; gap: .5rem; margin-top: .6rem; align-items: flex-end; }
.chat-envio textarea { flex: 1; }
.chat-envio label.anexo { cursor: pointer; }
.chat-envio input[type=file] { display: none; }
.ofertas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.oferta-card { background: #fff; border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; }
.oferta-card img { width: 100%; height: 140px; object-fit: cover; display: block; }
.oferta-card .corpo { padding: .7rem .9rem; }
.oferta-card.inativa { opacity: .55; }

.avatar-ficha { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: .5rem; border: 2px solid var(--primaria, #0f766e); }

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid #e5e7eb; }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .duas-colunas { grid-template-columns: 1fr; } }
.resumo { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.destaque-num { display: flex; flex-direction: column; min-width: 200px; text-decoration: none; color: inherit; }
.destaque-num strong { font-size: 1.6rem; }
.filtros-links a.ativo { font-weight: 700; }
.botao.mini { padding: .25rem .6rem; font-size: .85rem; }
form.inline { display: inline; }