/* =====================================================================
   Centralização e alinhamento
   =====================================================================

   Pedido da coordenação: centralizar tudo o que for possível, com cada
   borda e cada elemento alinhado, e a tela fácil de entender por quem
   não tem prática com sistemas.

   O que foi centralizado:
     - o conteúdo da página dentro da tela, com margens iguais dos dois lados;
     - títulos, subtítulos, cabeçalhos de painel e botões de ação;
     - todos os cartões de número e medidores;
     - todos os cabeçalhos de tabela;
     - todo valor curto nas tabelas: datas, horários, números, códigos,
       situações, idades e botões;
     - formulários, campos, filtros e o rodapé das janelas;
     - estados vazios e mensagens.

   A ÚNICA exceção, e ela é deliberada: a coluna de nome (pessoa, livro,
   atividade) continua alinhada à esquerda. Numa lista de sessenta nomes,
   se cada nome começar num ponto diferente, a pessoa perde a linha ao
   procurar. Como o objetivo é justamente facilitar a leitura, essa coluna
   fica à esquerda. Para centralizar também, troque o valor de
   --alinhamento-nomes para "center".
   ===================================================================== */

:root {
  --alinhamento-nomes: left;
  /* A coluna de leitura acompanha a tela; o teto só existe para a linha
     de texto não ficar longa demais numa tela muito larga. */
  --largura-conteudo: 1600px;
}

/* --- A aplicação ocupa a tela inteira ---
   Já houve aqui um teto de largura com moldura nas telas grandes. A
   coordenação recusou: aparecia uma borda de cada lado e a tela parecia
   cortada. Agora a aplicação vai de ponta a ponta, sem borda lateral e
   sem faixa de fundo sobrando. Quem centraliza é a coluna de conteúdo,
   logo abaixo. */
.aplicacao {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  border-left: 0;
  border-right: 0;
}

/* --- A página ocupa o centro da área de conteúdo --- */
.pagina {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--largura-conteudo);
}

.conteudo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.conteudo-area > * {
  width: 100%;
}

/* A barra de cima acompanha a mesma largura, para as bordas coincidirem */
.topo {
  justify-content: center;
}

.topo > .busca-global {
  margin-left: auto;
  margin-right: auto;
}

/* --- Cabeçalho da página --- */
.pagina-cabeca {
  justify-content: center;
  text-align: center;
  align-items: center;
  flex-direction: column;
  gap: .85rem;
}

.pagina-cabeca > div:first-of-type {
  flex: 0 1 auto;
  max-width: 74ch;
}

.pagina-cabeca h1 {
  text-align: center;
}

.pagina-cabeca p {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.pagina-acoes {
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

/* --- Painéis --- */
.painel-cabeca {
  justify-content: center;
  text-align: center;
}

.painel-cabeca h2 {
  text-align: center;
}

.painel-cabeca .direita {
  margin-left: 0;
  justify-content: center;
}

.secao-titulo {
  text-align: center;
}

/* --- Cartões de número e medidores --- */
.contagem {
  text-align: center;
}

.medidor-topo {
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
}

.medidor-topo .responsavel {
  margin-left: 0;
}

.medidor-linha {
  justify-content: center;
  align-items: center;
}

.medidor-vagas {
  justify-content: center;
  flex: 0 1 auto;
}

.medidor-nota {
  text-align: center;
}

.medidor-presentes .presente {
  justify-content: center;
  text-align: center;
}

.medidor-presentes .presente .tempo {
  margin-left: .5rem;
}

/* --- Tabelas: cabeçalho sempre centralizado --- */
table.tabela th {
  text-align: center;
}

/* Valores curtos centralizados; o nome mantém a leitura em coluna */
table.tabela td {
  text-align: center;
}

table.tabela td.acoes {
  text-align: center;
}

table.tabela td.acoes .grupo-botoes {
  justify-content: center;
}

/* A primeira coluna de texto longo (nome, título, atividade) fica à
   esquerda: é o que a pessoa lê para achar a linha certa. */
table.tabela td:has(> .principal),
table.tabela td:has(> a.principal),
table.tabela td:has(> div.principal) {
  text-align: var(--alinhamento-nomes);
}

table.tabela th:first-child:not(.centro):not(.num) {
  text-align: var(--alinhamento-nomes);
}

table.tabela .secundario {
  text-align: inherit;
}

/* --- Estados vazios e avisos --- */
.vazio {
  text-align: center;
}

.vazio .grupo-botoes {
  justify-content: center;
}

.tudo-em-ordem {
  justify-content: center;
  text-align: center;
}

.aviso {
  text-align: center;
  justify-content: center;
}

.aviso > div {
  text-align: center;
}

.aviso-inline {
  text-align: center;
}

/* --- Formulários e filtros --- */
.filtros {
  justify-content: center;
}

.campo label {
  text-align: center;
}

.campo .ajuda,
.campo .erro {
  text-align: center;
}

.campos {
  justify-items: stretch;
}

.resumo-calculo {
  justify-content: center;
  text-align: center;
}

.pessoa-escolhida {
  justify-content: center;
  text-align: center;
}

.pessoa-escolhida .trocar {
  margin-left: .75rem;
}

.grupo-botoes {
  justify-content: center;
}

/* --- Janelas --- */
.janela-cabeca {
  justify-content: center;
  text-align: center;
}

.janela-cabeca h2 {
  flex: 1;
  text-align: center;
}

.janela-cabeca .fechar {
  margin-left: 0;
  position: absolute;
  right: .9rem;
}

.janela-cabeca {
  position: relative;
}

.janela-pe {
  justify-content: center;
}

/* --- Regras --- */
.regra {
  text-align: center;
  justify-content: center;
}

.regra .conteudo {
  flex: 1;
}

.regra .acoes {
  margin-left: .5rem;
}


.semana-dia .cabeca {
  justify-content: center;
  gap: .35rem;
}

.evento {
  text-align: center;
}

.evento .titulo {
  text-align: center;
}

.relatorio-cartao {
  text-align: center;
  align-items: center;
}

.horario-dia {
  justify-items: center;
  align-items: center;
}

.horario-dia .dia {
  text-align: center;
  width: 100%;
}

.historico-linha {
  justify-content: center;
  text-align: center;
}

/* --- Recados --- */
.recado {
  text-align: center;
}

/* --- Login --- */
.entrada-marca {
  text-align: center;
  align-items: center;
}

.entrada-marca h1,
.entrada-marca p {
  margin-left: auto;
  margin-right: auto;
}

.entrada-regras {
  text-align: center;
  justify-items: center;
}

.entrada-forma h2,
.entrada-forma > form > p {
  text-align: center;
}

/* --- Rodapé de identificação --- */
.rodape-sistema {
  text-align: center;
  padding: 1.25rem 1rem 2rem;
  color: var(--tinta-fraca);
  font-size: var(--t-micro);
  border-top: 1px solid var(--borda);
  margin-top: var(--gap);
}

.rodape-sistema strong {
  color: var(--tinta-media);
}

/* O link do rodapé estava sem cor definida e saía no azul padrão do
   navegador (#0000EE), que no tema escuro some contra o fundo. */
.rodape-sistema a {
  color: var(--azul);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* =====================================================================
   Ajustes vindos da revisão tela por tela
   ===================================================================== */

/* Cabeçalhos numéricos também centralizados: a folha base os alinhava à
   direita e a especificidade de ".num" vencia a regra genérica. */
table.tabela th.num,
table.tabela th.centro,
table.tabela td.num,
table.tabela td.centro {
  text-align: center;
}

/* Avisos com moldura simétrica: com o texto centralizado, uma barra só de
   um lado deixava o cartão torto. */
.aviso {
  border-left-width: 4px;
  border-right-width: 4px;
  border-right-style: solid;
}

.aviso.danger { border-right-color: var(--urgente); }
.aviso.warning { border-right-color: var(--sol-forte); }
.aviso.info { border-right-color: var(--azul); }

/* Linhas de espaço no painel: nome e etiqueta centralizados juntos. */
.linha-espaco {
  display: flex;
  gap: .6rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--borda);
}

.linha-espaco:last-child { border-bottom: 0; padding-bottom: 0; }
.linha-espaco strong { min-width: 0; }

/* Cartões de número em duas colunas: oito itens formam quatro linhas
   iguais, sem sobra na última. */
.contagens-linha.duas {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 520px) {
  .contagens-linha.duas { grid-template-columns: 1fr; }
}

/* Números grandes com um pouco mais de ar */
.contagem .valor { margin-top: .1rem; }

/* Grade de dados (ficha do livro, ficha do usuário) centralizada */
.grade-dados {
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  text-align: center;
}

/* Estado vazio dentro do medidor: preenche o cartão com um convite útil,
   em vez de deixar um retângulo em branco ao lado dos números. */
.medidor-vazio {
  border-top: 1px solid var(--borda);
  padding-top: 1rem;
  margin-top: auto;
  display: grid;
  gap: .7rem;
  justify-items: center;
  text-align: center;
}

.medidor-vazio p {
  margin: 0;
  color: var(--tinta-fraca);
}

/* Cartões lado a lado mantêm a própria altura. Esticar o medidor até a
   altura do vizinho deixava um retângulo branco com cara de defeito. */
.balcao { align-items: start; }

/* Medidor em largura total: na tela da brinquedoteca ele é a resposta
   principal, então ocupa a linha inteira. */
.balcao.medidor-largo { grid-template-columns: 1fr; }

/* Barra de cima no celular: a busca precisa do espaço; a data completa sai
   e fica só a hora. */
@media (max-width: 620px) {
  .topo { gap: .5rem; padding: .6rem .75rem; }
  .busca-global { flex: 1 1 auto; max-width: none; }
  .topo-relogio span { display: none; }
  .topo-relogio strong { font-size: var(--t-base); }
}

/* Regras com moldura simétrica, para acompanhar o texto centralizado. */
.regra::after {
  content: "";
  width: 3px;
  align-self: stretch;
  border-radius: 2px;
  background: var(--sol);
  flex: none;
}

.regra.notice::after { background: var(--azul); }

/* Turnos do dia no painel (27/10/2026): de dia, escola; à noite, comunidade.
   Sol para o dia, azul da noite para a noite — a cor diz o turno. */
.turnos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .6rem;
  margin-bottom: .35rem;
}

.turno {
  display: grid;
  gap: .1rem;
  justify-items: center;
  text-align: center;
  padding: .8rem .9rem;
  border-radius: var(--raio);
  border: 1px solid var(--borda);
}

.turno.escola {
  background: linear-gradient(135deg, #fff3c9, #ffe2b8);
  border-color: var(--sol);
  color: var(--tinta-sobre-sol);
}

.turno.comunidade {
  background: linear-gradient(135deg, var(--azul-noite), var(--azul));
  border-color: var(--azul-noite);
  color: #ffffff;
}

.turno.agora { box-shadow: 0 0 0 3px var(--sol-forte); }
.turno.comunidade.agora { box-shadow: 0 0 0 3px var(--sol-claro); }

.turno-quando {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--t-mini);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.turno-quem { font-size: 1.15rem; font-weight: 700; }
.turno-horario { font-size: 1.05rem; font-weight: 700; }
.turno-nota { font-size: var(--t-mini); }

.turno-agora {
  padding: .05rem .45rem;
  border-radius: 999px;
  background: var(--sol-escuro);
  color: #ffffff;
  font-size: var(--t-micro);
  letter-spacing: .02em;
}

.turno.comunidade .turno-agora { background: var(--sol-claro); color: var(--tinta-sobre-sol); }