/* PPGAdmin3 — Estilos da aplicação
   Camada fina sobre o Bootstrap 3. Consome os papéis definidos em
   tokens.css; não declara cor literal fora de casos anotados. */

/* ---- Corpo e barra de navegação ----
   A navbar era `position: fixed` e o corpo compensava com um
   margin-top fixo de 120px. Isso é um número mágico que só vale
   enquanto o menu couber em uma linha: ao ganhar o décimo item a
   barra passou a 151px e engoliu o primeiro título da página.

   `sticky` resolve na raiz — a barra ocupa espaço no fluxo, continua
   grudada no topo ao rolar, e o corpo não precisa saber a altura
   dela. Some o número mágico e some a classe de bugs que ele cria a
   cada item novo de menu.

   A cola vive em `.barra-superior`, que embrulha a tarja de personificação e o
   menu: os dois grudam como um bloco só, e a tarja não rola para fora da tela
   enquanto se navega. Grudar cada um por conta própria obrigaria a informar a
   altura da tarja à navbar — de volta ao número mágico. */
.barra-superior {
  position: sticky;
  top: 0;
  z-index: 1030;              /* o mesmo do .navbar-fixed-top do Bootstrap */
}

/* Dentro do invólucro a navbar não gruda sozinha: quem gruda é o bloco. */
.barra-superior .navbar-fixed-top {
  position: static;
}

body {
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  margin-bottom: var(--espaco-8) !important;
}

/* ---- Aplicação de tokens em componentes do Bootstrap ---- */
.table {
  color: var(--cor-texto);
  border-color: var(--cor-borda);
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--cor-fundo-listra);
}

.table-hover > tbody > tr:hover {
  background-color: var(--cor-fundo-hover);
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  border-color: var(--cor-borda);
}

.dropdown-menu {
  background-color: var(--cor-fundo);
  border-color: var(--cor-borda);
}

.dropdown-menu > li > a {
  color: var(--cor-texto);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: var(--cor-fundo-hover);
  color: var(--cor-acao);
}

.form-control {
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  border-color: var(--cor-borda);
}

.modal-content,
.well,
.panel {
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  border-color: var(--cor-borda);
}

/* ---- Tarja de personificação ----
   Enquanto um administrador está vendo o sistema como outra pessoa, esta faixa
   fica no topo de toda página. Fundo cheio em vez de texto colorido: precisa
   ser notada mesmo por quem não a está lendo, porque o risco é agir achando
   que se age em nome próprio. */
.tarja-personificacao {
  background: var(--cor-aviso-fundo);
  color: var(--cor-aviso-texto);
  padding: var(--espaco-2) 0;
  font-size: 14px;
}

.tarja-personificacao a {
  color: var(--cor-aviso-texto);
  /* Sublinhado porque a cor é a mesma do texto ao redor: sem ele, o link não
     se distingue para quem não percebe diferença de peso. WCAG 1.4.1 (A). */
  text-decoration: underline;
  font-weight: 700;
  margin-left: var(--espaco-2);
}

.tarja-personificacao a:hover,
.tarja-personificacao a:focus {
  color: var(--cor-aviso-texto);
}

.tarja-personificacao a:focus-visible {
  outline-color: var(--cor-aviso-texto);
}

.tarja-personificacao__conta {
  opacity: 0.85;
}

/* ---- Foco visível ----
   O Bootstrap 3 zera o outline em 11 regras, o que deixa quem
   navega por teclado sem saber onde está. Isto devolve o
   indicador. :focus-visible mantém o anel fora do clique de
   mouse; o bloco :focus abaixo é o fallback para navegador que
   não suporta a pseudo-classe.
   WCAG 2.4.7 (AA). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.navbar-toggle:focus-visible,
.dropdown-toggle:focus-visible {
  outline: var(--foco-espessura) solid var(--cor-foco);
  outline-offset: var(--foco-deslocamento);
  border-radius: var(--raio);
}

/* Fallback: navegadores sem :focus-visible mostram o anel sempre.
   Preferimos foco visível a mais do que foco visível a menos. */
@supports not selector(:focus-visible) {
  a:focus, button:focus, input:focus, select:focus, textarea:focus, .btn:focus {
    outline: var(--foco-espessura) solid var(--cor-foco);
    outline-offset: var(--foco-deslocamento);
  }
}

/* Sobre a navbar escura o anel azul some. Ali o foco é branco. */
.navbar-inverse a:focus-visible,
.navbar-inverse button:focus-visible {
  outline-color: #fff;
}

/* ---- Pular para o conteúdo ----
   Primeiro elemento focável da página. Fica fora da tela até
   receber foco, então quem usa teclado alcança o conteúdo sem
   percorrer o menu inteiro a cada navegação.
   WCAG 2.4.1 (A). */
.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: var(--espaco-3) var(--espaco-4);
  background: var(--cor-fundo);
  color: var(--cor-acao);
  font-weight: 700;
  border: 2px solid var(--cor-foco);
  border-radius: var(--raio);
}
.pular-para-conteudo:focus {
  left: var(--espaco-2);
  top: var(--espaco-2);
}

/* ---- Tabelas responsivas ----
   Rolagem horizontal contida na própria tabela, para a página
   nunca rolar de lado. */
.table-responsive-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Links dentro de tabela: o azul padrão do Bootstrap reprovava
   contraste sobre a linha listrada (4,33:1). Ver tokens.css. */
.table a {
  font-weight: 500;
  color: var(--cor-acao);
}
.table a:hover,
.table a:focus {
  color: var(--cor-acao-hover);
}

/* ---- Estados semânticos ----
   Sempre acompanhados de texto ou de um rótulo para leitor de
   tela: a cor reforça, não carrega sozinha o significado.
   WCAG 1.4.1 (A). */
.estado-sucesso { color: var(--cor-sucesso); }
.estado-erro    { color: var(--cor-erro); }
.estado-alerta  { color: var(--cor-alerta); }

/* ---- Banca marcada como duplicata ----
   Não some da lista: fica riscada e apagada, para quem olha entender que o
   registro existe e foi desconsiderado, em vez de achar que sumiu. */
.banca-inativa,
.banca-inativa td {
  text-decoration: line-through;
  color: var(--cor-texto-suave);
}

/* ---- Aviso do alternador de modo ----
   Deliberadamente discreto. O modo troca a vitrine, não o poder; um aviso
   chamativo aqui competiria com a tarja da personificação, que sinaliza uma
   mudança real de identidade — e duas coisas diferentes com o mesmo peso
   visual acabam lidas como a mesma coisa. */
.modo-aviso {
  white-space: normal;
  line-height: 1.4;
  padding-top: 0;
}

/* ---- Traceback na tela de diagnóstico ----
   Rola dentro da própria caixa: um traceback tem linhas longuíssimas e sem
   isto a página inteira ganharia rolagem lateral. */
.traceback {
  max-height: 24rem;
  overflow: auto;
  font-size: 12px;
  white-space: pre;
  background: var(--cor-fundo-listra);
  border: 1px solid var(--cor-borda);
}

/* ---- Estado vazio ----
   Lista sem itens precisa dizer que está vazia. Sem isto a página
   renderiza só o título e não se distingue de uma que quebrou. */
.vazio {
  color: var(--cor-texto-suave);
  padding: var(--espaco-4) 0;
  margin: 0;
}

/* ---- Campos de busca: fluidos, com teto ---- */
input.search.form-control {
  max-width: 400px;
  width: 100%;
  margin-bottom: var(--espaco-3);
}

/* ---- Formulários: largura contida, mas fluida ----
   Substitui o seletor form[style*="width:400px"], que casava com
   o texto literal do atributo inline e desligava silenciosamente
   se alguém escrevesse "width: 400px" com espaço. */
form.form-narrow {
  max-width: 400px;
  width: 100%;
}

/* ---- Login ---- */
.login-container {
  max-width: 400px;
  margin: var(--espaco-8) auto;
}
.login-container h3 {
  margin-bottom: var(--espaco-6);
}

/* ---- Navbar ---- */
.navbar-brand {
  font-weight: bold;
}

/* ---- Botões sem classe ----
   Fallback para input[type=submit] que não recebeu .btn. */
input[type="submit"]:not([class*="btn"]),
input[type="button"]:not([class*="btn"]) {
  display: inline-block;
  padding: 6px var(--espaco-3);
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-color: var(--cor-acao);
  border: 1px solid var(--cor-acao-hover);
  border-radius: var(--raio);
  color: #fff;
  transition: background-color var(--transicao);
}
input[type="submit"]:not([class*="btn"]):hover,
input[type="button"]:not([class*="btn"]):hover {
  background-color: var(--cor-acao-hover);
  border-color: var(--cor-foco);
}

/* ---- Alertas ---- */
.alert {
  margin-top: var(--espaco-2);
}

/* ---- Entrada por toque ----
   Vale por método de entrada, não por largura de tela: um laptop
   com touchscreen também precisa de alvo grande. Aplicado com
   padding para não alterar o layout de mesa com mouse. */
@media (pointer: coarse) {
  .table a,
  .table .btn,
  .table button,
  .table input[type="submit"],
  .list-acoes a,
  li > a:not(.navbar-brand):not(.dropdown-toggle) {
    display: inline-flex;
    align-items: center;
    min-height: var(--alvo-toque);
    padding-top: var(--espaco-2);
    padding-bottom: var(--espaco-2);
  }

  .navbar-nav > li > a {
    padding-top: var(--espaco-3);
    padding-bottom: var(--espaco-3);
  }
}

/* ---- Telas estreitas ---- */
@media (max-width: 768px) {
  body {
    margin-bottom: var(--espaco-6) !important;
  }

  h1 { font-size: 24px; }
  h2 { font-size: 20px; }

  .container {
    padding-left: var(--espaco-3);
    padding-right: var(--espaco-3);
  }

  /* O Bootstrap puxa o .navbar-header em -15px para cancelar o padding do
     .container e alinhar a marca com a borda do conteúdo. Como aqui o padding
     cai para 12px, sobravam 3px para fora de cada lado e a página ganhava
     rolagem horizontal — visível só depois que a barra virou sticky, porque
     elemento fixed não entra no scrollWidth e sticky entra.

     A margem espelha o padding em vez de zerar: zerada, a marca desalinharia
     do resto da página. O seletor repete o `.container >` do Bootstrap; sem
     ele a regra tem uma classe a menos e perde por especificidade, esteja
     onde estiver no arquivo. */
  .container > .navbar-header {
    margin-left: calc(-1 * var(--espaco-3));
    margin-right: calc(-1 * var(--espaco-3));
  }

  /* Mesma conta do outro lado: o padding de 15px da marca é o que devolve o
     texto à borda do conteúdo. Sem acompanhar, a marca ficaria 3px à direita
     do título da página. */
  .navbar-brand {
    padding-left: var(--espaco-3);
    padding-right: var(--espaco-3);
  }

  /* Formulário de largura fixa ocupa a tela inteira. */
  form.form-narrow {
    max-width: 100%;
  }

  /* Multi-select não pode tomar a tela toda. */
  select[multiple] {
    max-height: 150px;
  }

  /* iOS Safari dá zoom forçado em campo com fonte < 16px, o que
     desmonta o layout do formulário. */
  input[type="text"],
  input[type="password"],
  input[type="number"],
  input[type="email"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px;
  }
}

/* ---- Movimento reduzido ----
   Encurta a transição em vez de matá-la: o retorno visual da
   mudança de estado continua existindo, só deixa de percorrer. */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}