/* ============================================================
   Painel do gerente: lançar pontos, apurar sextas e editar a campanha.
   ============================================================ */

/* ---------------- login ---------------- */
.login-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login { width: min(100%, 380px); padding: 32px; display: grid; gap: 16px; }
.login img { height: 34px; width: auto; margin-bottom: 4px; }
.login h1 { font-size: 1.3rem; margin-bottom: 6px; }
.login button { margin-top: 4px; }

/* ---------------- abas ---------------- */
.abas { display: flex; gap: 4px; padding-top: 18px; overflow-x: auto; }
.aba {
  border: 0; background: transparent; cursor: pointer;
  padding: 10px 16px; border-radius: var(--raio-sm) var(--raio-sm) 0 0;
  font-family: var(--fonte-titulo); font-weight: 600; font-size: .95rem;
  color: var(--texto-2); white-space: nowrap;
  border-bottom: 2px solid transparent; transition: color .15s, border-color .15s, background-color .15s;
}
.aba:hover { color: var(--texto); background: var(--surface-2); }
.aba.ativa { color: var(--texto); border-bottom-color: var(--acento); }

.conteudo { padding: 26px 0 80px; }
.painel-aba h2 { font-size: 1.05rem; margin: 26px 0 6px; }
.painel-aba h2:first-child { margin-top: 0; }
.dica { color: var(--texto-2); font-size: .9rem; margin-bottom: 14px; max-width: 70ch; }

.seletor-campanha { width: auto; max-width: 240px; padding: 8px 12px; font-size: .9rem; }

.barra-acao { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin-bottom: 22px; }
.barra-acao .espaco { flex: 1; }
.barra-acao .dica { margin-bottom: 0; }
.campo.compacto { max-width: 190px; }

/* ---------------- grade de lançamento ---------------- */
.tabela-lancar { width: 100%; overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--surface); }
.tabela-lancar table { border-collapse: collapse; width: 100%; min-width: 620px; }
.tabela-lancar th, .tabela-lancar td { padding: 9px 12px; text-align: center; border-top: 1px solid var(--linha); }
.tabela-lancar thead th { border-top: 0; font-size: .8rem; font-weight: 700; color: var(--texto-2); vertical-align: bottom; }
.tabela-lancar thead th .pontos-regra { display: block; font-size: .72rem; font-weight: 600; color: var(--texto-3); }
.tabela-lancar th.quem, .tabela-lancar td.quem { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.tabela-lancar tbody tr:hover td { background: var(--surface-2); }
.tabela-lancar tbody tr:hover td.quem { background: var(--surface-2); }
.tabela-lancar td.total { font-family: var(--fonte-titulo); font-weight: 700; }

.nome-corretor { display: flex; align-items: center; gap: 10px; }
.nome-corretor .avatar { font-size: .7rem; }

.contador { display: inline-flex; align-items: center; gap: 2px; }
.contador button {
  width: 26px; height: 26px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--linha-forte); background: var(--surface); color: var(--texto-2);
  border-radius: var(--raio-sm); transition: background-color .15s, color .15s, transform .1s;
}
.contador button:hover:not(:disabled) { background: var(--marinho); color: #fff; border-color: var(--marinho); }
.contador button:active:not(:disabled) { transform: scale(.92); }
.contador button:disabled { opacity: .35; cursor: not-allowed; }
.contador button svg { width: 13px; height: 13px; }
.contador .n { min-width: 22px; font-family: var(--fonte-titulo); font-weight: 700; font-size: .95rem; }
.contador .n.zero { color: var(--texto-3); font-weight: 600; }

/* ---------------- sexta ---------------- */
.duas-colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }

.lista-sextas { display: grid; gap: 8px; }
.sexta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: var(--raio-sm);
  border: 1px solid var(--linha); background: var(--surface);
}
.sexta .quando { font-family: var(--fonte-titulo); font-weight: 600; }
.sexta .acao { margin-left: auto; display: flex; gap: 6px; }
.sexta.futura { opacity: .6; }

.form-estouro { padding: 20px; display: grid; gap: 14px; }
.lista-estouros { margin-top: 18px; display: grid; gap: 8px; }
.item-estouro {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: var(--raio-sm);
  border: 1px solid var(--linha); background: var(--surface); font-size: .92rem;
}
.item-estouro svg.balao { width: 20px; height: 20px; }
.item-estouro .nome { font-weight: 700; }
.item-estouro .data { color: var(--texto-3); font-size: .84rem; }
.item-estouro button { margin-left: auto; }

/* ---------------- editor da campanha ---------------- */
.bloco { padding: 24px; margin-bottom: 20px; }
.bloco h2:first-child { margin-top: 0; }
.linha-campos { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.linha-campos .campo { flex: 1 1 190px; }

.editor-lista { display: grid; gap: 8px; margin-bottom: 12px; }
.editor-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--raio-sm);
  border: 1px solid var(--linha); background: var(--surface-2);
}
.editor-item input[type="text"] { flex: 1 1 160px; min-width: 0; }
.editor-item input[type="number"] { width: 74px; text-align: center; flex: none; }
.editor-item select { width: auto; min-width: 130px; flex: none; }

input[type="color"] {
  width: 42px; height: 38px; padding: 3px; cursor: pointer; flex: none;
  border: 1px solid var(--linha-forte); border-radius: var(--raio-sm); background: var(--surface);
}
.editor-item .marca-check { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; color: var(--texto-2); white-space: nowrap; }
.editor-item .remover { margin-left: auto; }

.rodape-form { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.rodape-form .erro-msg, .rodape-form .salvo { margin-right: auto; }
.salvo { color: var(--ok); font-size: .88rem; font-weight: 600; }

.zona-perigo { border-color: color-mix(in srgb, var(--erro) 30%, var(--linha)); }

/* ---------------- corretores ---------------- */
.lista-corretores { display: grid; gap: 8px; max-width: 640px; }
.item-corretor {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--raio-sm);
  border: 1px solid var(--linha); background: var(--surface);
}
.item-corretor input[type="text"] { flex: 1; min-width: 0; border-color: transparent; background: transparent; }
.item-corretor input[type="text"]:hover { border-color: var(--linha-forte); }
.item-corretor input[type="color"] { width: 38px; height: 34px; }
.item-corretor.inativo { opacity: .55; }
.item-corretor .marca-check { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; color: var(--texto-2); }

.vazio-lista { padding: 40px 20px; text-align: center; color: var(--texto-2); border: 1px dashed var(--linha-forte); border-radius: var(--raio); }

/* ---------------- responsivo ---------------- */
@media (max-width: 860px) {
  .duas-colunas { grid-template-columns: 1fr; }
  .seletor-campanha { max-width: 150px; }
  .topo .marca .selo-txt { display: none; }
}