/*
 * Design system do Disciplina, em CSS.
 *
 * A regra que atravessa tudo: COR É DADO. As seis bolinhas ocupam quase todo o
 * espectro, então a interface é neutra — grafite, off-white e linhas cinza. Se
 * algo está colorido na tela, é porque representa uma bolinha.
 *
 * Consequência incômoda e deliberada: vermelho NÃO pode significar erro, porque
 * vermelho é a bolinha de 4 pontos. Avisos usam âmbar.
 */

:root {
  --ink: #1A1C1A;
  --ink-fraco: #5A5F5A;
  --fundo: #FAF9F7;
  --superficie: #FFFFFF;
  --linha: #D8D6D1;
  --atencao: #8A5200;
  --confirma: #1E7A3C;

  /* Bolinhas: dado, nunca decoração. */
  --bola-WHITE: #FFFFFF;
  --bola-GREEN: #1E7A3C;
  --bola-LILAC: #8E5FC4;
  --bola-BLUE: #1668C7;
  --bola-RED: #C62828;
  --bola-BLACK: #171717;
}

* { box-sizing: border-box; }

/*
 * `display` em classe vence o `display: none` que o atributo `hidden` traz do
 * navegador. Sem esta linha, todo elemento com display próprio — o cabeçalho,
 * o diálogo de confirmação — aparece na tela mesmo marcado como escondido.
 */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
}
.cabecalho h1 { font-size: 20px; margin: 0; }
.cabecalho .unidade { color: var(--ink-fraco); font-size: 15px; }

main { max-width: 1100px; margin: 0 auto; padding: 24px 20px 64px; }

/* --- Acesso ------------------------------------------------------------- */

.acesso { max-width: 380px; margin: 10vh auto; }
.acesso h2 { font-size: 28px; margin: 0 0 4px; }
.acesso p.sub { color: var(--ink-fraco); margin: 0 0 28px; }

label { display: block; font-size: 15px; font-weight: 500; margin: 0 0 6px; }
input {
  width: 100%;
  padding: 13px 14px;
  font-size: 17px;
  font-family: inherit;
  color: var(--ink);
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 10px;
  margin-bottom: 18px;
}
input:focus-visible { outline: 3px solid var(--ink); outline-offset: 1px; }

button {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  padding: 13px 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--ink);
  color: var(--fundo);
  cursor: pointer;
}
button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
button[disabled] { opacity: .5; cursor: progress; }
button.secundario { background: var(--superficie); color: var(--ink); border-color: var(--linha); }
button.largo { width: 100%; }

/* --- Avisos: âmbar, nunca vermelho -------------------------------------- */

.aviso {
  border: 1px solid var(--atencao);
  border-left-width: 4px;
  background: #FFF8EC;
  color: var(--atencao);
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 18px;
  font-size: 15px;
}
.aviso:empty { display: none; }

/* --- Chamada ------------------------------------------------------------ */

.barra { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.barra h2 { font-size: 28px; margin: 0; }
.barra .relogio { font-size: 15px; color: var(--ink-fraco); }

.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.militar {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 14px 16px;
}
.militar .quem { flex: 1; min-width: 0; }
.militar .nome { font-size: 20px; font-weight: 600; }
.militar .dados { font-size: 13px; color: var(--ink-fraco); }

/* A bolinha nunca aparece sozinha: vem sempre com nome e pontuação ao lado. */
.bola {
  width: 42px; height: 42px;
  border-radius: 50%;
  flex: none;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 700;
  color: #FFF;
}
.bola.vazia { background: transparent; border: 2px dashed var(--linha); }
/* Branca e preta levam contorno sempre, senão somem no fundo. */
.bola[data-cor="WHITE"] { background: var(--bola-WHITE); color: var(--ink); border: 2px solid var(--ink); }
.bola[data-cor="BLACK"] { background: var(--bola-BLACK); border: 2px solid var(--linha); }
.bola[data-cor="GREEN"] { background: var(--bola-GREEN); }
.bola[data-cor="LILAC"] { background: var(--bola-LILAC); }
.bola[data-cor="BLUE"]  { background: var(--bola-BLUE); }
.bola[data-cor="RED"]   { background: var(--bola-RED); }

.situacao { font-size: 13px; color: var(--ink-fraco); }

/* --- Confirmação: lida a um braço de distância -------------------------- */

.confirmacao {
  position: fixed; inset: 0;
  background: rgba(26, 28, 26, .55);
  display: grid; place-items: center;
  padding: 20px;
}
.confirmacao .cartao {
  background: var(--superficie);
  border-radius: 20px;
  padding: 36px 32px 28px;
  max-width: 460px;
  width: 100%;
  text-align: center;
}
.confirmacao .bola {
  width: 132px; height: 132px;
  margin: 0 auto 18px;
  font-size: 44px;
}
.confirmacao .pontos { font-size: 44px; line-height: 1.1; font-weight: 700; }
.confirmacao .entregar { font-size: 24px; font-weight: 600; margin: 10px 0 2px; }
.confirmacao .mensagem { color: var(--ink-fraco); margin: 6px 0 24px; font-size: 17px; }

.vazio { color: var(--ink-fraco); text-align: center; padding: 48px 0; }

@media (prefers-reduced-motion: no-preference) {
  .confirmacao .cartao { animation: surge .18s ease-out; }
  @keyframes surge { from { transform: scale(.96); opacity: 0 } }
}

/* --- Diálogos de formulário --------------------------------------------- */

.cartao.esquerda { text-align: left; padding: 28px; }
.cartao.esquerda h3 { font-size: 24px; margin: 0 0 4px; }
.cartao.esquerda .sub { color: var(--ink-fraco); margin: 0 0 20px; }
.cartao.largo { max-width: 640px; }

.dica { font-size: 13px; color: var(--ink-fraco); margin: -12px 0 18px; }

.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }

select {
  width: 100%;
  padding: 13px 14px;
  font-size: 17px;
  font-family: inherit;
  color: var(--ink);
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 10px;
  margin-bottom: 18px;
}
select:focus-visible { outline: 3px solid var(--ink); outline-offset: 1px; }

.acoesDaChamada { display: flex; justify-content: flex-end; margin-bottom: 14px; }

/* --- Ficha -------------------------------------------------------------- */

.totais {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
.totais > div {
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}
.totais span { display: block; font-size: 28px; font-weight: 700; line-height: 1.2; }
.totais small { color: var(--ink-fraco); font-size: 13px; }

.historico { max-height: 40vh; overflow-y: auto; margin-bottom: 18px; }
.historico .militar { padding: 10px 14px; }
.historico .bola { width: 34px; height: 34px; font-size: 13px; }
.historico .nome { font-size: 16px; }

/* O militar é alvo de toque para abrir a ficha; o botão de ação fica fora. */
.abrirFicha {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  flex: 1; min-width: 0;
}
.abrirFicha:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

.marca {
  display: inline-block;
  font-size: 12px;
  color: var(--atencao);
  border: 1px solid var(--atencao);
  border-radius: 999px;
  padding: 0 8px;
  margin-left: 8px;
}

.acoes { display: flex; gap: 8px; flex: none; }

/* --- Administração ------------------------------------------------------ */

.unidade-item { display: block; }
.unidade-item .topo { display: flex; align-items: center; gap: 14px; }
.unidade-item .sigla {
  font-size: 13px; font-weight: 700; color: var(--ink-fraco);
  border: 1px solid var(--linha); border-radius: 8px; padding: 3px 8px; flex: none;
}
.unidade-item .gestores { margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--linha); }
.unidade-item .gestores li {
  display: flex; align-items: center; gap: 10px; padding: 6px 0;
  font-size: 15px; list-style: none;
}
.unidade-item .gestores li .dados { color: var(--ink-fraco); font-size: 13px; }

/* A senha inicial é lida em voz alta para quem está anotando: monoespaçada e
   grande, para não confundir l com 1 nem O com 0. */
.segredo {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 24px;
  letter-spacing: .04em;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 14px;
  margin: 0 0 18px;
  word-break: break-all;
  user-select: all;
}

.selo { font-size: 22px; flex: none; width: 110px; letter-spacing: -2px; }