/* bordero.css
   Tela do Borderô (etapa 12): cabecalho de documento com a logo, resumo, Acerto final,
   grupos que abrem ao toque, tabelas com numeros alinhados a direita e blocos lado a lado. */

.bordero-acoes .icone-whatsapp { color: inherit; }

.tela-bordero .financeiro-conteudo > * + * { margin-top: var(--e4); }
.tela-bordero .cartao { margin-bottom: 0; }

/* ---------- Cabecalho de documento ---------- */
.bordero-cabecalho {
  display: flex;
  align-items: center;
  gap: var(--e5);
}

.bordero-logo {
  width: 120px;
  flex-shrink: 0;
}

.bordero-info h2 {
  margin: 0 0 var(--e1);
  font-size: 22px;
}

.bordero-info p {
  margin: 0 0 var(--e2);
  color: var(--texto-suave);
  font-size: 14px;
}

/* ---------- Resumo: 4 cartoes ---------- */
.bordero-resumos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bordero-resumos .resumo-lucro .cartao-valor { color: var(--texto); }
.bordero-resumos .resumo-lucro .cartao-valor.dinheiro-negativo { color: var(--vermelho); }

/* ---------- Acerto final ---------- */
.bordero-acerto .bordero-frases {
  list-style: none;
  margin: 0 0 var(--e3);
  padding: 0;
}

.bordero-acerto .bordero-frases li {
  padding: var(--e2) 0;
  font-size: 18px;
  border-bottom: 1px solid var(--fundo-separacao);
}

.bordero-acerto .bordero-frases li:last-child { border-bottom: 0; }

.bordero-frase-unica {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.bordero-fechar { margin-top: var(--e3); }
.bordero-acerto .lotes-dica { margin: var(--e2) 0; }

/* ---------- Blocos ---------- */
.bordero-bloco-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e2);
  margin-bottom: var(--e3);
}

.bordero-bloco-topo h2 { margin: 0; }

.bordero-bloco-sub {
  color: var(--texto-suave);
  font-size: 13px;
}

.bordero-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e4);
  align-items: start;
}

/* ---------- Grupos que abrem ao toque ---------- */
.bordero-grupo {
  border-top: 1px solid var(--fundo-separacao);
}

.bordero-grupo summary {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: 48px;
  padding: var(--e2) 0;
  cursor: pointer;
  list-style: none;
}

.bordero-grupo summary::-webkit-details-marker { display: none; }

.bordero-grupo-nome {
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex: 1;
  min-width: 0;
  font-weight: 600;
}

.bordero-grupo-cor {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--texto-fraco);
}

.bordero-grupo-qtd {
  padding: 0 7px;
  border-radius: 999px;
  background: var(--fundo-bloco);
  color: var(--texto-suave);
  font-size: 12px;
  font-weight: 500;
}

.bordero-grupo summary .dinheiro { font-weight: 600; }
.bordero-seta { color: var(--texto-fraco); transition: transform var(--rapido); }
.bordero-grupo[open] .bordero-seta { transform: rotate(180deg); }
.bordero-grupo .bordero-tabela-caixa { margin-bottom: var(--e3); }

.bordero-total {
  display: flex;
  justify-content: space-between;
  padding-top: var(--e3);
  border-top: 2px solid var(--texto);
  font-weight: 700;
}

/* ---------- Tabelas (visual de documento) ---------- */
.bordero-tabela-caixa {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.bordero-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.bordero-tabela th {
  padding: var(--e2);
  border-bottom: 1px solid var(--texto-fraco);
  color: var(--texto-suave);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.bordero-tabela td {
  padding: var(--e2);
  border-bottom: 1px solid var(--fundo-separacao);
  vertical-align: middle;
}

.bordero-tabela .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.bordero-tabela tfoot td {
  border-top: 2px solid var(--texto);
  border-bottom: 0;
  font-weight: 700;
}

.bordero-socio {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  white-space: nowrap;
}

.avatar.avatar-pequeno {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

/* ---------- Pares rotulo e valor (Bar e Sympla) ---------- */
.bordero-par {
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e2) 0;
  border-bottom: 1px solid var(--fundo-separacao);
  font-size: 14px;
}

.bordero-par-info { color: var(--texto-suave); }
.bordero-par-forte,
.bordero-par-total { font-weight: 700; }
.bordero-par-total { border-bottom: 0; border-top: 2px solid var(--texto); }
.bordero-par-ambar { color: #B45309; font-weight: 700; }
.bordero-par-ambar .dinheiro { color: #B45309; }

/* ---------- Caixa e Conta do evento ---------- */
.bordero-lugares {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e3);
  margin-top: var(--e4);
}

.bordero-lugar {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
}

.bordero-lugar-texto {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--texto-suave);
}

.bordero-lugar-texto strong { color: var(--texto); font-size: 14px; }

.bordero-lugar-valor {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 12px;
  color: var(--texto-suave);
}

.bordero-lugar-valor .dinheiro { font-size: 16px; font-weight: 700; color: var(--texto); }

/* ---------- Celular ---------- */
@media (max-width: 1023px) {
  .bordero-grade { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .bordero-acoes { width: 100%; }
  .bordero-acoes .botao { flex: 1 1 auto; min-height: 48px; }
  .bordero-acoes .botao-principal { flex-basis: 100%; }
  .bordero-cabecalho { flex-direction: column; align-items: flex-start; gap: var(--e3); }
  .bordero-logo { width: 96px; }
  .bordero-resumos { grid-template-columns: 1fr 1fr; }
  .bordero-acerto .bordero-frases li { font-size: 16px; }
  .bordero-lugares { grid-template-columns: 1fr; }
  .bordero-tabela { font-size: 13px; }
}

/* Divisao entre socios no celular: um cartao por socio, sem rolar para o lado */
@media (max-width: 767px) {
  .bordero-tabela-cartoes thead { display: none; }
  .bordero-tabela-cartoes,
  .bordero-tabela-cartoes tbody,
  .bordero-tabela-cartoes tr,
  .bordero-tabela-cartoes td { display: block; width: 100%; }
  .bordero-tabela-cartoes tr {
    padding: var(--e2) 0;
    border-bottom: 1px solid var(--fundo-separacao);
  }
  .bordero-tabela-cartoes td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--e3);
    padding: var(--e1) 0;
    border: 0;
  }
  .bordero-tabela-cartoes td:first-child { padding-bottom: var(--e2); }
  .bordero-tabela-cartoes td + td::before {
    content: attr(data-rotulo);
    color: var(--texto-suave);
    font-size: 13px;
  }
}