/* app.css — Edilse Bordados. Cores via --cor1/--cor2 (tela de configuracao). */
:root {
  --cor1: #7c3aed;
  --cor2: #f3e8ff;
  --ink: #1f2937;
  --sub: #6b7280;
  --borda: #e5e7eb;
  --fundo: #f6f4fa;
}
* { box-sizing: border-box; margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fundo); color: var(--ink); font-size: 15px;
}
a { color: var(--cor1); }

/* topo */
.topo { background: var(--cor1); color: var(--txt1, #fff); padding: 10px 16px; }
.topo-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 10px; }
.topo-logo { height: 34px; width: auto; max-width: 160px; object-fit: contain; }
.topo-nome { font-weight: 700; font-size: 18px; letter-spacing: .2px; }

.pagina { max-width: 1100px; margin: 0 auto; padding: 16px; }
.pagina-larga { max-width: 1240px; }

.cartao {
  background: #fff; border: 1px solid var(--borda); border-radius: 12px;
  padding: 18px; margin-bottom: 16px;
}
.cartao-login { max-width: 420px; margin: 40px auto; }

/* abas */
.abas { display: flex; gap: 6px; margin-bottom: 14px; }
.aba {
  flex: 1; padding: 9px; border: 1px solid var(--borda); background: #fff;
  border-radius: 8px; cursor: pointer; font-size: 15px; color: var(--sub);
}
.aba.on { background: var(--cor1); color: var(--txt1, #fff); border-color: var(--cor1); }

/* barra da sessao */
.barra-sessao { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.titulo { font-size: 20px; font-weight: 700; }
.titulo2 { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.sub  { color: var(--sub); font-size: 13px; }
.sub2 { color: var(--sub); font-size: 12px; }
.acoes-sessao { display: flex; gap: 8px; flex-wrap: wrap; }

/* mensagens */
.msg { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; }
.msg.ok   { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.msg.erro { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* formularios */
.form { display: flex; flex-direction: column; gap: 10px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--sub); font-weight: 600; }
.form input, .form select, .form-busca input {
  padding: 9px 11px; border: 1px solid var(--borda); border-radius: 8px;
  font-size: 15px; color: var(--ink); background: #fff;
}
.form input:focus, .form select:focus { outline: 2px solid var(--cor1); outline-offset: -1px; }
.form-equipe { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--borda); }
.form-inline { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.duas-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chk { flex-direction: row !important; align-items: center; gap: 8px !important; }
.chk input { width: auto; }
.dica { color: var(--sub); font-size: 12px; }

/* botoes */
.btn {
  display: inline-block; padding: 9px 16px; border: none; border-radius: 8px;
  background: var(--cor1); color: var(--txt1, #fff); font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none; text-align: center;
}
.btn:hover { filter: brightness(1.08); }
.btn-sec { background: var(--cor2); color: var(--txt2, var(--ink)); }
.btn-perigo { background: #dc2626; }
.btn-pq { padding: 5px 11px; font-size: 13px; }
.btn-cheio { width: 100%; }
.linha-botoes { display: flex; gap: 6px; flex-wrap: wrap; }
.linha-botoes form { display: inline; }

/* tabelas */
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th {
  text-align: left; padding: 8px; border-bottom: 2px solid var(--borda);
  color: var(--sub); font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
}
.tabela td { padding: 9px 8px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela tr:hover td { background: #fafafa; }

/* duas colunas (admin) */
.duas-colunas { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
.col-esq { min-width: 0; }
.col-dir { min-width: 0; }

/* lista de clientes */
.form-busca { display: flex; gap: 8px; margin-bottom: 10px; }
.form-busca input { flex: 1; }
.lista-clientes { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; max-height: 60vh; overflow-y: auto; }
.cli-item {
  display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px;
  text-decoration: none; color: var(--ink); border: 1px solid transparent;
}
.cli-item:hover { background: var(--cor2); }
.cli-item.on  { background: var(--cor2); border-color: var(--cor1); }
.cli-item.off { opacity: .55; }
.cli-nome { font-weight: 600; font-size: 14px; }
.cli-sub  { font-size: 12px; color: var(--sub); }
.tag-off { background: #fecaca; color: #991b1b; font-size: 11px; padding: 2px 7px; border-radius: 20px; }

/* pendentes */
.pendencias { border-color: #fbbf24; background: #fffbeb; }
.pendente { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #fde68a; }
.pendente:last-child { border-bottom: none; }

/* upload */
.form-upload { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.drop {
  display: block; padding: 22px; border: 2px dashed var(--cor1); border-radius: 10px;
  background: var(--cor2); text-align: center; cursor: pointer; font-weight: 600; color: var(--cor1);
}
.drop input { display: none; }

.acoes-cliente { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--borda); }
.logo-preview {
  max-height: 90px; max-width: 240px; width: auto; height: auto;
  object-fit: contain; align-self: flex-start; display: block; margin: 8px 0;
}
.vazio { color: var(--sub); text-align: center; padding: 18px 6px; }

/* mobile: empilha */
@media (max-width: 860px) {
  .duas-colunas { grid-template-columns: 1fr; }
  .tabela { font-size: 13px; }
  .barra-sessao { align-items: flex-start; flex-direction: column; }
}