/*
 * Paleta: dourado e neutros quentes, puxados do logotipo.
 *
 * O claro é pergaminho, o escuro é um grafite esverdeado — o tom do mapa por
 * trás do nome. O verde-água antigo brigava com o dourado da faixa.
 *
 * O ESCURO é o padrão (tema.js aplica quando não há escolha salva). O claro
 * fica em :root porque é a base de onde os dois derivam; o bloco escuro vale
 * tanto pela escolha explícita quanto, sem script, pelo aparelho.
 */
:root {
  --ground:      #F2ECDF;
  --surface:     #FBF8F1;
  --surface-alt: #EFE7D6;
  --ink:         #231D12;
  --ink-soft:    #4A4131;
  --muted:       #7A6E58;
  --line:        #DCD0B8;
  --line-soft:   #E8DFCC;
  --accent:      #8A5E14;
  --accent-ink:  #FFF8E6;
  --accent-soft: #F0E2C0;
  --warn:        #99500A;
  --warn-soft:   #FBEEDF;
  --danger:      #96233A;
  --danger-soft: #FAE7EA;
  --ok:          #3E6B1E;
  --ok-soft:     #E6EFD8;

  /*
   * Cores dos ícones da barra. Cada ação tem a sua, como no painel de origem:
   * numa fileira de botões do mesmo tamanho, a cor é o que se reconhece antes
   * de ler qualquer coisa. Fora da barra elas não são usadas.
   */
  --ic-ouro:     #8A5E14;
  --ic-verde:    #2F6B3A;
  --ic-roxo:     #6A4BC0;
  --ic-azul:     #1F5E96;
  --ic-cinza:    #6B6353;
  --ic-ciano:    #1C7A72;

  --f-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --f-titulo: "Cinzel", Georgia, "Times New Roman", serif;
  --radius: 3px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #12130E;
    --surface:     #1B1C15;
    --surface-alt: #22241B;
    --ink:         #EDE6D3;
    --ink-soft:    #C9BFA6;
    --muted:       #938A74;
    --line:        #34352A;
    --line-soft:   #292A21;
    --accent:      #D8AE55;
    --accent-ink:  #1C1507;
    --accent-soft: #2E2714;
    --warn:        #DE9A46;
    --warn-soft:   #33260F;
    --danger:      #E37D8C;
    --danger-soft: #351A20;
    --ok:          #93C25E;
    --ok-soft:     #1F2A14;

    --ic-ouro:     #E0B75F;
    --ic-verde:    #86C97A;
    --ic-roxo:     #B79BF5;
    --ic-azul:     #79B4E8;
    --ic-cinza:    #A79C85;
    --ic-ciano:    #4FB8AE;
  }
}

:root[data-theme="dark"] {
  --ground:      #12130E;
  --surface:     #1B1C15;
  --surface-alt: #22241B;
  --ink:         #EDE6D3;
  --ink-soft:    #C9BFA6;
  --muted:       #938A74;
  --line:        #34352A;
  --line-soft:   #292A21;
  --accent:      #D8AE55;
  --accent-ink:  #1C1507;
  --accent-soft: #2E2714;
  --warn:        #DE9A46;
  --warn-soft:   #33260F;
  --danger:      #E37D8C;
  --danger-soft: #351A20;
  --ok:          #93C25E;
  --ok-soft:     #1F2A14;

  --ic-ouro:     #E0B75F;
  --ic-verde:    #86C97A;
  --ic-roxo:     #B79BF5;
  --ic-azul:     #79B4E8;
  --ic-cinza:    #A79C85;
  --ic-ciano:    #4FB8AE;
}

* { box-sizing: border-box; }

/*
 * O atributo `hidden` esconde via estilo padrão do navegador, que perde para
 * qualquer regra nossa de `display`. Sem esta linha, todo elemento com `hidden`
 * que também tenha `display` definido aqui aparece na tela — foi o que
 * aconteceu com o diálogo de reinício, que tem `display: flex`.
 */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

/* ---------- topo ---------- */

/*
 * O cabeçalho é a faixa do logotipo: mapa ao fundo, nome dourado por cima.
 * Ele é escuro nos DOIS temas, como a faixa do jogo — por isso as cores de
 * dentro dele são fixas e não seguem os tokens.
 */
.topo {
  position: relative;
  background: #14150E url('/logo-mapa.jpg') center / cover no-repeat;
  border-bottom: 2px solid #8A6A22;
  padding: 0 24px;
}

.topo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,11,6,.72), rgba(10,11,6,.35) 50%, rgba(10,11,6,.72));
  pointer-events: none;
}

.topo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #E9C76E, transparent);
  opacity: .55;
}

.topo-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.marca {
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  margin-right: auto;
}

.marca span { color: var(--accent); }

.topo nav { display: flex; gap: 16px; align-items: center; }

.topo nav a {
  color: #E6DABB;
  text-decoration: none;
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

.topo nav a:hover { color: #F6D98A; }

/* Página de login: a faixa inteira, com o nome grande no centro. */
.topo-faixa .topo-inner {
  max-width: none;
  height: clamp(92px, 14vw, 150px);
  justify-content: center;
}

.topo-faixa::before { background: rgba(10,11,6,.10); }

.topo-faixa .nome-faixa {
  height: 96%;
  width: auto;
  max-width: calc(100vw - 110px);
  object-fit: contain;
}

.topo-faixa .botao-tema { position: absolute; top: 14px; right: 0; }

.chip-modo {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  background: var(--warn-soft);
  color: var(--warn);
}

/* ---------- layout ---------- */

.pagina {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

.pagina.estreita { max-width: 440px; padding-top: 64px; }

h1 {
  font-family: var(--f-titulo);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 6px;
  text-wrap: balance;
}

h2 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 4px;
}

.sub {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 26px;
}

section.bloco {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 22px;
}

.bloco-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* ---------- formularios ---------- */

label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 5px;
}

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], select {
  width: 100%;
  padding: 9px 11px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.campo { margin-bottom: 14px; }

.linha-campos {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.linha-campos > * { flex: 1; min-width: 130px; }

button {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
}

button:hover { filter: brightness(1.08); }
button:disabled { opacity: .5; cursor: not-allowed; filter: none; }

button.secundario {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line);
}

button.perigo {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

button.pequeno { padding: 5px 10px; font-size: 12.5px; }

/* ---------- permissões do código ---------- */

.permissoes-do-codigo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 11px 14px;
  margin-bottom: 8px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

label.marca {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
}

label.marca small { color: var(--muted); }
label.marca:has(input:disabled) { cursor: default; color: var(--muted); }

/* ---------- avisos ---------- */

.aviso {
  padding: 11px 14px;
  border-radius: var(--radius);
  font-size: 13.5px;
  margin-bottom: 16px;
  border: 1px solid transparent;
}

.aviso.erro  { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.aviso.ok    { background: var(--ok-soft);     color: var(--ok);     border-color: var(--ok); }
.aviso.info  { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.aviso.alerta{ background: var(--warn-soft);   color: var(--warn);   border-color: var(--warn); }
.aviso:empty { display: none; }

/*
 * A ação dentro de uma faixa de aviso.
 *
 * A faixa explica a situação; isto resolve. Fica na mesma linha do texto, com
 * a cor da própria faixa — é um atalho, não uma decisão de peso, e não deve
 * competir com os botões da tela.
 */
.aviso .botao-linha {
  display: inline-block;
  margin-left: 10px;
  white-space: nowrap;
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.aviso .botao-linha:hover { text-decoration-thickness: 2px; }

/* Uma opção de marcar com o rótulo ao lado, na mesma linha. */
.linha-opcao {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.linha-opcao input { margin: 0; }

/* ---------- tabelas ---------- */

.tabela-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-alt);
  padding: 10px 13px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

td {
  padding: 10px 13px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
  vertical-align: middle;
}

tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-alt); }

td.mono, .mono { font-family: var(--f-mono); font-size: 12.5px; }
td.conta { color: var(--ink); font-weight: 500; }

/* ---------- linha de conta ---------- */

.conta {
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
}

.tribo {
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--accent);
  margin-left: 7px;
}

.pontos {
  font-family: var(--f-mono);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.aldeias, .coord, .kont {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--muted);
  margin-left: 10px;
  font-variant-numeric: tabular-nums;
}

.coord { color: var(--ink-soft); }

/* ---------- ataques a caminho ---------- */

/*
 * Vermelho e clicável, na própria linha da conta. É a única coisa da linha que
 * pede ação do cliente, então destoa de propósito do resto, que é cinza.
 */
.ataques {
  font-family: var(--f-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  margin-left: 10px;
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  cursor: pointer;
  line-height: 1.5;
}

.ataques:hover {
  background: color-mix(in srgb, var(--danger) 22%, transparent);
}

/* ---------- botões de ícone da barra ---------- */

/*
 * Ícone sozinho, sem texto. O nome da ação vive no `title` e no `aria-label` —
 * o primeiro para quem passa o mouse, o segundo para quem usa leitor de tela,
 * que de outro modo ouviria só "botão".
 */
.botao-icone {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 9px;
  /* A cor é dada por `data-cor`; esta é a de quem não declarou nenhuma. */
  --cor-do-icone: var(--ic-cinza);
  background: color-mix(in srgb, var(--cor-do-icone) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--cor-do-icone) 40%, transparent);
  color: var(--cor-do-icone);
}

.botao-icone[data-cor="ouro"]  { --cor-do-icone: var(--ic-ouro); }
.botao-icone[data-cor="verde"] { --cor-do-icone: var(--ic-verde); }
.botao-icone[data-cor="roxo"]  { --cor-do-icone: var(--ic-roxo); }
.botao-icone[data-cor="azul"]  { --cor-do-icone: var(--ic-azul); }
.botao-icone[data-cor="cinza"] { --cor-do-icone: var(--ic-cinza); }
.botao-icone[data-cor="ciano"] { --cor-do-icone: var(--ic-ciano); }
.botao-icone[data-cor="vermelho"] { --cor-do-icone: var(--danger); }

/* `flex: none` impede que o desenho seja espremido se o botão ficar apertado. */
.botao-icone svg { width: 23px; height: 23px; display: block; flex: none; }

.botao-icone:hover:not(:disabled) {
  background: color-mix(in srgb, var(--cor-do-icone) 30%, transparent);
  border-color: var(--cor-do-icone);
  filter: none;
}

/*
 * Desligado vira cinza de verdade, não colorido e apagado: cor fraca ainda
 * chama atenção e faz o cliente insistir num botão que não vai responder.
 */
.botao-icone:disabled {
  --cor-do-icone: var(--muted);
  opacity: .45;
}

/* O selo do sino: verde, porque diz que algo está ligado — não que algo deu errado. */
.selo-sino {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--ok);
  color: var(--surface);
  font-family: var(--f-mono);
  font-size: 10.5px;
  line-height: 16px;
  font-weight: 600;
}

/* ---------- tela de avisos ---------- */

.titulo-secao {
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin: 20px 0 8px;
}

.destino {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 6px;
}

.destino-canal {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--accent);
}

.destino-resumo { flex: 1; font-size: 13px; color: var(--ink-soft); }

.escolha-evento {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 0;
  font-weight: 400;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
}

.escolha-evento input { margin-top: 3px; }

.tabela-ataques { width: 100%; border-collapse: collapse; font-size: 13px; }

.tabela-ataques th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  padding: 4px 8px 4px 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.tabela-ataques td {
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

/* Só o símbolo: a coluna encolhe ao tamanho dele. */
.ataque-tipo { white-space: nowrap; width: 1%; text-align: center; }

/* O nick não quebra em duas linhas — a leitura é de relance, sob ataque. */
.ataque-nick { white-space: nowrap; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }

.ataque-simbolo {
  display: inline-block;
  vertical-align: -3px;
  margin-right: 5px;
  /* O sprite do jogo é desenhado sobre fundo claro; no tema escuro ele some
     sem um leve realce por trás. */
  image-rendering: -webkit-optimize-contrast;
}

:root[data-theme="dark"] img.ataque-simbolo,
:root:not([data-theme="light"]) img.ataque-simbolo {
  background: rgba(255, 255, 255, .08);
  border-radius: 2px;
}

/*
 * Hora com milésimo e coordenada em monoespaçada e com dígito de largura fixa:
 * numa leva de cinco ataques que chegam com um segundo de diferença, a coluna
 * só é comparável se os algarismos ficarem alinhados.
 */
.ataque-hora, .ataque-origem, .ataque-falta {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ataque-hora { color: var(--ink); }
.ataque-falta { color: var(--danger); }

.destaque-ataques {
  font-size: 16px;
  font-weight: 600;
  color: var(--danger);
  margin: 0 0 6px;
}

/* ---------- estado da coleta ---------- */

.coleta-selo {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 2.5px 9px;
  border-radius: 3px;
  white-space: nowrap;
  cursor: help;
}

/* Verde e vermelho são estados estáveis; o laranja é o de transição, e é o
   único em que reiniciar custa tropas. */
.coleta-selo.coletando   { background: var(--ok-soft);     color: var(--ok); }
.coleta-selo.retornando  { background: var(--warn-soft);   color: var(--warn); }
.coleta-selo.pausado     { background: var(--danger-soft); color: var(--danger); }

.coleta-selo.desconhecido {
  background: transparent;
  color: var(--muted);
  cursor: default;
}

/* ---------- cabeçalho ordenável ---------- */

th:has(.ordenar) { padding: 0; }

button.ordenar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  border-radius: 0;
  padding: 10px 13px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}

button.ordenar:hover { color: var(--ink); filter: none; }
button.ordenar.ativo { color: var(--accent); }

.seta {
  font-size: 11px;
  opacity: .65;
  letter-spacing: 0;
}

button.ordenar.ativo .seta { opacity: 1; }

/* ---------- controles do topo ---------- */

.controles {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rotulo-inline {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}

.controles select {
  width: auto;
  min-width: 120px;
  font-family: var(--f-mono);
  font-size: 13px;
  padding: 6px 10px;
}

.vazio {
  padding: 34px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.vazio[hidden] { display: none; }
.vazio p { margin: 0; max-width: 46ch; }

/* ---------- selos ---------- */

.selo {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 2px;
  white-space: nowrap;
}

.selo.rodando { background: var(--ok-soft);     color: var(--ok); }
.selo.pausado { background: var(--surface-alt); color: var(--muted); border: 1px solid var(--line); }
.selo.alerta  { background: var(--warn-soft);   color: var(--warn); }
.selo.grupo   { background: var(--accent-soft); color: var(--accent); }
.selo.espera  { background: var(--warn-soft);   color: var(--warn); margin-left: 8px; }
.selo.apagando { background: var(--danger-soft); color: var(--danger); }
.selo.expirado { background: var(--surface-alt); color: var(--muted); border: 1px solid var(--line); }

a.link-grupo {
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s;
}

a.link-grupo:hover { filter: brightness(1.15); text-decoration: underline; }

/* o chip do topo na tela de grupo, que lembra em nome de quem se está agindo */
.chip-modo { white-space: nowrap; }

/* ---------- confirmação do agendamento ---------- */

.painel-agendadas {
  background: var(--surface);
  border: 1px solid var(--ok);
  border-left: 3px solid var(--ok);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 22px;
}

.agendadas-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.agendadas-topo strong {
  color: var(--ok);
  font-size: 15px;
  font-weight: 600;
}

.painel-agendadas ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.painel-agendadas li {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--f-mono);
  font-size: 13px;
}

.painel-agendadas li:last-child { border-bottom: none; }

.agendada-conta { color: var(--ink); font-weight: 500; }
.agendada-mundo { color: var(--muted); }

.agendada-hora {
  margin-left: auto;
  color: var(--ok);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.agendada-hora small { color: var(--muted); font-size: 10.5px; }

.agendada-marca, .agendada-erro {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 2px;
}

.agendada-marca { background: var(--warn-soft); color: var(--warn); }
.agendada-erro  { background: var(--danger-soft); color: var(--danger); }

/* ---------- diálogo ---------- */

.fundo-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 22, .62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}

.modal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 22px 24px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .3);
}

/* O relatório de distâncias tem uma tabela; precisa de mais largura. */
.modal.modal-largo { max-width: 620px; }

/* Distância acima do limite: vermelha, para saltar na leitura. */
.campos-longe { color: var(--danger); }

/* ---------- filtro e selos de situação ---------- */

.filtro-situacao {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
}

.chip-sit {
  font-size: 12.5px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}

.chip-sit b { font-variant-numeric: tabular-nums; font-weight: 600; margin-left: 2px; }
.chip-sit:hover { border-color: var(--accent); filter: none; }
.chip-sit.ativo { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Cor de significado quando NÃO está ativo (ativo fica dourado, uniforme). */
.chip-sit.warn:not(.ativo)   { border-color: color-mix(in srgb, var(--warn) 50%, transparent); color: var(--warn); }
.chip-sit.danger:not(.ativo) { border-color: color-mix(in srgb, var(--danger) 50%, transparent); color: var(--danger); }
.chip-sit.ok:not(.ativo)     { border-color: color-mix(in srgb, var(--ok) 50%, transparent); color: var(--ok); }

/* Selo na linha da conta. */
.selo-sit {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 1px 8px;
  border-radius: 10px;
  margin-left: 8px;
  vertical-align: middle;
}

/*
 * A ação ao lado do selo — hoje só "liberar", na conta em verificação.
 *
 * Fica discreta de propósito: acompanha o selo, não compete com ele. Quem está
 * lendo a linha já sabe o que a conta tem; isto é só o caminho mais curto para
 * resolver sem sair de onde está.
 */
.selo-acao {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  margin-left: 6px;
  vertical-align: middle;
  color: var(--warn);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.selo-acao:hover { text-decoration-thickness: 2px; }

.selo-sit.warn   { background: var(--warn-soft); color: var(--warn); }
.selo-sit.danger { background: var(--danger-soft); color: var(--danger); }
.selo-sit.ok     { background: var(--ok-soft); color: var(--ok); }

/* A contagem vira vermelha quando a seleção tem conta que não pode reiniciar. */
.contagem.com-parada { color: var(--danger); }

/* ---------- ordenar por distância ---------- */

.linha-distancia {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}

.linha-distancia input { padding: 6px 9px; font-size: 13px; }

/* A distância na linha da conta, ao lado da coordenada — ciano, o mesmo tom dos
   grupos, para não brigar com o vermelho dos ataques nem o âmbar das situações. */
.dist-campos {
  font-family: var(--f-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ic-ciano);
  margin-left: 10px;
}

/* ---------- relatório de conquistas ---------- */

.tabela-conquistas { width: 100%; border-collapse: collapse; font-size: 13.5px; }

.tabela-conquistas th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.tabela-conquistas td {
  padding: 9px 10px 9px 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.conq-coord { color: var(--ic-ciano); font-size: 12px; }
.conq-origem { white-space: nowrap; }
.conq-origem.sua { color: var(--ok); }
.conq-origem.alheia { color: var(--danger); }
.conq-tribo { color: var(--muted); font-family: var(--f-mono); font-size: 12px; }
.conq-aguardando { color: var(--warn); font-style: italic; }
.conq-data { color: var(--muted); font-family: var(--f-mono); font-size: 12px; white-space: nowrap; }

/* ---------- novidades (changelog) ---------- */

.novidade { padding: 4px 0 18px; border-bottom: 1px solid var(--line-soft); margin-bottom: 18px; }
.novidade:last-child { border-bottom: 0; margin-bottom: 0; }

.novidade-cabecalho { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.novidade-cabecalho h3 { margin: 0; font-size: 16px; font-weight: 600; }
.novidade-data { font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }

.novidade-imagens { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.novidade-img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  display: block;
}

.novidade-corpo { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.6; }

/* Miniaturas no editor do dono. */
.novidade-editor-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.novidade-thumb { position: relative; }
.novidade-thumb img { height: 60px; border-radius: 4px; border: 1px solid var(--line); display: block; }
.novidade-thumb button {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px; padding: 0; border-radius: 50%;
  background: var(--danger); color: #fff; border: 0; font-size: 12px; line-height: 1; cursor: pointer;
}
.novidade-item {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 10px;
}
.novidade-item.rascunho { border-style: dashed; }
.novidade-item-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.selo-rascunho { font-size: 11px; padding: 1px 8px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); }
.selo-publicada { font-size: 11px; padding: 1px 8px; border-radius: 10px; background: var(--ok-soft); color: var(--ok); }

/* Linhas da lista de registros de movidas. */
.linha-registro {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
}

.linha-registro:hover { border-color: var(--accent); background: var(--surface-alt); filter: none; }
.registro-alvo { font-family: var(--f-mono); font-weight: 600; }
.registro-info { flex: 1; font-size: 13px; color: var(--ink-soft); }
.registro-quando { margin: 0; }

.modal-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.modal-topo h2 { margin: 0; }

button.fechar {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}

button.fechar:hover { color: var(--ink); filter: none; }

.modal-rodape {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

/* ---------- opções do diálogo ---------- */

label.opcao {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 400;
}

label.opcao:hover { border-color: var(--accent); }

label.opcao:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

label.opcao.indisponivel {
  opacity: .55;
  cursor: not-allowed;
  background: var(--surface-alt);
}

label.opcao.indisponivel:hover { border-color: var(--line); }

label.opcao input { margin-top: 3px; flex: none; }

.opcao-titulo {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}

.opcao-desc {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

.grade-info {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 13px;
  color: var(--muted);
}

.grade-info b { color: var(--ink-soft); font-weight: 500; }

.rodape-acao {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.contagem { font-size: 13px; color: var(--muted); margin-right: auto; }

/* ---------- busca ---------- */

.busca-linha {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.busca-linha input[type="search"] {
  flex: 1;
  padding: 9px 12px;
  font-size: 13.5px;
}

.busca-linha input[type="search"]::placeholder {
  color: var(--muted);
  opacity: .85;
}

/* ---------- barra de ações ---------- */

.barra-acoes {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 14px;
  margin-bottom: 14px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.barra-acoes .contagem {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft);
}

/* ---------- grupos do cliente ---------- */

/* O ponto colorido na linha da conta: a marca mais leve possível de que ela tem
   grupo. Sem texto — o nome vem na dica e no filtro. */
.ponto-grupo {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
  flex: none;
}

/* Filtro de grupo no topo: só aparece quando há grupos. */
#filtro-grupo { width: auto; min-width: 150px; }

/* Uma escolha de grupo dentro dos pop-ups: linha inteira clicável. */
.linha-grupo {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  margin-bottom: 6px;
}

.linha-grupo:hover { border-color: var(--accent); background: var(--surface-alt); filter: none; }

.linha-grupo .nome { flex: 1; font-weight: 500; }
.linha-grupo .conta-multis { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }

.ponto-grupo.grande { width: 12px; height: 12px; margin: 0; }

/* Ações pequenas (renomear/apagar) na tela de gerenciar grupos. */
.grupo-acoes { display: flex; gap: 6px; }
.grupo-acoes button { padding: 4px 9px; font-size: 12px; }

.marcar-quantos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.marcar-quantos input {
  padding: 5px 8px;
  font-size: 13px;
}

.barra-acoes button { padding: 7px 14px; font-size: 13.5px; }

/*
 * O botão de ícone é a exceção: esta regra vence `.botao-icone` por ser mais
 * específica, e o recheio lateral de 14px reduzia a área útil a 12px — o
 * desenho encolhia de 23 para 10 pixels e virava um borrão. Foi exatamente o
 * que apareceu na tela.
 */
.barra-acoes .botao-icone { padding: 0; }

.nota {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 10px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- escolhas lado a lado (enviar tropas) ---------- */

.escolha-lado-a-lado {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

label.opcao-curta {
  flex: 1;
  min-width: 170px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 400;
}

label.opcao-curta:hover { border-color: var(--accent); }

label.opcao-curta:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

label.opcao-curta input { margin-top: 3px; flex: none; }

label.opcao-curta b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

label.opcao-curta small {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  margin-top: 1px;
}

/* ---------- recurso em prévia ---------- */

.faixa-em-breve { margin: 0 0 14px; }

.etiqueta-em-breve {
  align-self: center;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}

/* ---------- nota da situação de um pedido ---------- */

.nota-pedido {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  margin-top: 3px;
  max-width: 46ch;
}

/* ---------- conflitos de grupo ---------- */

.conflito-grupo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 3px 0;
}

.conflito-grupo + .conflito-grupo { border-top: 1px dashed var(--line-soft); }

.conflito-grupo.fora b { color: var(--muted); font-weight: 500; }

.conflito-clientes { font-size: 12.5px; color: var(--ink-soft); }

/* ---------- quadros que recolhem e mudam de lugar (área do dono) ---------- */

.layout-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  font-size: 12.5px;
  color: var(--muted);
  margin: -14px 0 18px;
}

.layout-acoes span { margin-right: auto; }

section[data-painel] .painel-topo {
  justify-content: flex-start;
  align-items: center;
}

section[data-painel] .painel-topo > div:not(.painel-controles) { flex: 1; min-width: 200px; }

.painel-alca {
  cursor: grab;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  padding: 2px 4px;
  user-select: none;
  border-radius: var(--radius);
}

.painel-alca:hover { color: var(--accent); background: var(--surface-alt); }
.painel-alca:active { cursor: grabbing; }

.painel-titulo { cursor: pointer; user-select: none; }
.painel-titulo:hover { color: var(--accent); }

.painel-controles {
  display: flex;
  gap: 4px;
  margin-left: auto;
  order: 99;
}

.painel-botao {
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  background: var(--surface-alt);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.painel-botao.alternar { font-size: 15px; }

.painel-botao:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
  filter: none;
}

/* recolhido: só a faixa do título */
section[data-painel].recolhido { padding-top: 12px; padding-bottom: 12px; }
section[data-painel].recolhido .painel-topo { margin-bottom: 0; }
section[data-painel].recolhido .painel-topo .sub { display: none; }
section[data-painel].recolhido .painel-corpo { display: none; }

/* arrastando */
section[data-painel].arrastando { opacity: .45; }
section[data-painel].alvo-acima  { box-shadow: 0 -3px 0 0 var(--accent); }
section[data-painel].alvo-abaixo { box-shadow: 0  3px 0 0 var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  section[data-painel] { transition: box-shadow .12s ease, opacity .12s ease; }
}

/* arrastar pelo cabeçalho não pode selecionar texto dos botões */
section[data-painel] .painel-topo .painel-controles,
section[data-painel] .painel-topo .painel-alca { user-select: none; -webkit-user-select: none; }

/* ---------- escolha de tema ---------- */

/* Campos, barras de rolagem e seletores nativos acompanham o tema. */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }

.botao-tema {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  flex: none;
}

.botao-tema:hover { color: var(--accent); border-color: var(--accent); filter: none; }

.botao-tema svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- logotipo ---------- */

.marca-logo { display: inline-flex; align-items: center; line-height: 0; }
.marca-logo img { height: 46px; width: auto; display: block; }

/* O cabeçalho é escuro nos dois temas; o botão acompanha a faixa, não o tema. */
.topo .botao-tema {
  background: rgba(10, 10, 6, .45);
  color: #F3DFA8;
  border-color: rgba(255, 235, 190, .35);
  backdrop-filter: blur(3px);
}

.topo .botao-tema:hover { color: #FFE7A6; border-color: #E9C76E; }

.topo .chip-modo { background: rgba(222, 154, 70, .22); color: #F2C27C; }

/* No celular, o nome encolhe para caber ao lado dos links do topo. */
@media (max-width: 560px) {
  .topo { padding: 0 12px; }
  .topo-inner { gap: 10px; }
  .marca-logo img { height: 32px; }
  .topo nav { gap: 10px; }
  .topo nav a { font-size: 13px; }
  .topo-faixa .botao-tema { top: 8px; }
}

/* ---------- página de entrada: login e apresentação ---------- */

.pagina.entrada {
  max-width: 1100px;
  padding-top: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
}

/* celular: login primeiro, apresentação depois (ordem do HTML) */
.entrada-login { width: min(440px, 100%); margin: 0 auto; }

@media (min-width: 900px) {
  .pagina.entrada {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 440px);
    gap: 72px;
    align-items: center;
    padding-top: 72px;
  }
  /* computador: texto à esquerda, login à direita */
  .entrada-apresentacao { grid-column: 1; grid-row: 1; }
  .entrada-login { grid-column: 2; grid-row: 1; margin: 0; }
}

.chamada {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.12;
  letter-spacing: 0.005em;
  margin: 0 0 18px;
  text-wrap: balance;
}

.chamada span { color: var(--accent); }

.chamada-texto {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 24px;
  max-width: 52ch;
}

.vantagens {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vantagens li {
  position: relative;
  padding-left: 30px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
}

/* marcador em losango dourado, no lugar da bolinha */
.vantagens li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.5em;
  width: 9px;
  height: 9px;
  background: var(--accent);
  transform: rotate(45deg);
}

.contato {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
}

.botao-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 8px;
  background: #1F9D55;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

.botao-whatsapp:hover { background: #22B060; color: #FFFFFF; }

.botao-whatsapp svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contato .numero {
  font-family: var(--f-mono);
  font-size: 15px;
  color: var(--muted);
}

/* ---------- olho da senha ---------- */

.campo-senha { position: relative; }

.campo-senha input { padding-right: 46px; }

.ver-senha {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 38px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--muted);
}

.ver-senha:hover { color: var(--accent); filter: none; }

.ver-senha svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- visitas ao site ---------- */

.visitas-numeros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

@media (max-width: 640px) { .visitas-numeros { grid-template-columns: minmax(0, 1fr); } }

.visitas-numero {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.visitas-numero .rotulo {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.visitas-numero strong {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.visitas-numero small { font-size: 12.5px; color: var(--muted); }

.visitas-grafico { position: relative; margin: 0 0 12px; }

.visitas-grafico figcaption {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.grafico-area svg { display: block; overflow: visible; }
.g-grade { stroke: var(--line-soft); stroke-width: 1; }
.g-eixo { fill: var(--muted); font-size: 11px; font-family: var(--f-mono); }
.g-barra { fill: var(--accent); }
.g-alvo { fill: transparent; cursor: pointer; }
.g-alvo.ativo { fill: var(--accent-soft); fill-opacity: .45; }

.grafico-dica {
  position: absolute;
  top: 18px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  font-size: 13px;
  color: var(--ink-soft);
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}

.grafico-dica b { color: var(--ink); font-weight: 600; }

.visitas-tabela-dia { margin: 4px 0 22px; }
.visitas-tabela-dia summary { cursor: pointer; font-size: 13.5px; color: var(--accent); }

.visitas-colunas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 760px) { .visitas-colunas { grid-template-columns: minmax(0, 1fr); } }

.visitas-subtitulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 8px;
}