/* A TELA DE ADMINISTRACAO (ticket 04 do login). Carregada DEPOIS do indicadores.css, de quem herda o topo,
   os botoes, os tokens e as fontes. So passos da escala fechada do DESIGN.md: 19, 17, 15, 13 e 11px. */

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.botao--cheio { background: var(--tinta); color: var(--sobre-tinta); }
.botao--cheio:hover { background: var(--conteudo); border-color: var(--conteudo); }
.botao--alerta { color: var(--alerta); border-color: var(--alerta); }
.botao--alerta:hover { background: var(--alerta); color: var(--papel); }
body[aria-busy="true"] .botao,
body[aria-busy="true"] select { cursor: progress; }

/* ------------------------------------------------------------------------ o que a ultima acao fez */

.aviso {
  margin: calc(var(--u) * 5) 0 0;
  padding: calc(var(--u) * 3) calc(var(--u) * 4);
  border-left: 3px solid var(--tinta);
  background: var(--papel);
  font-size: 15px;
}
.aviso--erro { border-left-color: var(--alerta); color: var(--alerta); }
.senhas { list-style: none; margin: 0; padding: 0; }
.senha-da-vez {
  margin: calc(var(--u) * 5) 0 0;
  padding: calc(var(--u) * 5);
  border: 1px solid var(--tinta);
  background: var(--papel);
}
.senha-da-vez__o-que { margin: 0 0 calc(var(--u) * 3); font-size: 15px; font-weight: 700; }
.senha-da-vez__o-que:focus-visible,
.bloco__titulo:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.senha-da-vez__rotulo {
  margin: 0 0 calc(var(--u) * 2);
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta);
}
.senha-da-vez__linha { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 3); }
.senha-da-vez__senha {
  font-family: var(--datilo); font-size: 19px; font-weight: 700; letter-spacing: 0.06em;
  user-select: all;
}
.senha-da-vez__nota { margin: calc(var(--u) * 3) 0 0; font-size: 13px; color: var(--conteudo-fraco); }

/* ------------------------------------------------------------------------ os blocos */

.bloco { margin-top: calc(var(--u) * 8); }
.bloco__cabeca {
  display: flex; align-items: end; justify-content: space-between; gap: calc(var(--u) * 4);
  padding-bottom: calc(var(--u) * 3);
  border-bottom: var(--regua);
}
.bloco__titulo { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.2; }
.bloco__nota { margin: calc(var(--u) * 1) 0 0; font-size: 13px; color: var(--conteudo-fraco); }

/* ------------------------------------------------------------------------ criar */

.criar {
  display: grid;
  gap: calc(var(--u) * 4);
  max-width: 640px;
  margin: calc(var(--u) * 5) 0;
  padding: calc(var(--u) * 6);
  border: 1px solid var(--tinta);
  background: var(--papel);
}
.criar__titulo { margin: 0; font-size: 17px; font-weight: 700; }
.criar__campo { display: grid; gap: calc(var(--u) * 1.5); }
.criar__rotulo {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta);
}
.criar__entrada {
  width: 100%; box-sizing: border-box;
  padding: calc(var(--u) * 2.5) calc(var(--u) * 3);
  border: 1px solid var(--tinta); border-radius: 0;
  background: var(--papel); color: var(--conteudo);
  font: inherit; font-size: 17px;
}
.criar__entrada--senha { font-family: var(--datilo); letter-spacing: 0.04em; }
.criar__entrada:focus-visible,
.pessoas__perfil:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.criar__senha { display: flex; gap: calc(var(--u) * 3); }
.criar__nota { margin: 0; font-size: 13px; color: var(--conteudo-fraco); }
.criar__botoes { display: flex; gap: calc(var(--u) * 3); }

.criar__perfis { display: grid; gap: calc(var(--u) * 2); margin: 0; padding: 0; border: 0; }
.criar__perfis legend { margin-bottom: calc(var(--u) * 1.5); padding: 0; }
.opcao-perfil {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: calc(var(--u) * 3);
  align-items: baseline;
  padding: calc(var(--u) * 2.5) calc(var(--u) * 3);
  border: 1px solid var(--tinta-fraca);
  cursor: pointer;
}
.opcao-perfil:has(input:checked) { border-color: var(--tinta); box-shadow: inset 3px 0 0 var(--tinta); }
.opcao-perfil input { grid-row: 1 / span 2; accent-color: var(--tinta); }
.opcao-perfil__nome { font-size: 15px; font-weight: 700; }
.opcao-perfil__abre { grid-column: 2; font-size: 13px; color: var(--conteudo-fraco); }

/* ------------------------------------------------------------------------ a lista */

.pessoas { width: 100%; border-collapse: collapse; margin-top: calc(var(--u) * 2); }
.pessoas th,
.pessoas td {
  padding: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 3) 0;
  border-bottom: var(--regua);
  text-align: left;
  vertical-align: middle;
  font-size: 15px;
}
.pessoas thead th {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta);
}
.pessoas__nome { font-weight: 700; }
.pessoas__email,
.pessoas__data { font-family: var(--datilo); font-size: 13px; }
.pessoas__data { white-space: nowrap; }
.pessoas__aguardando { color: var(--tinta); font-weight: 700; }
.pessoas__inativa { color: var(--conteudo-fraco); }
.pessoas__inativa .pessoas__nome { text-decoration: line-through; text-decoration-thickness: 1px; }
.pessoas__acoes { white-space: nowrap; text-align: right; }
.pessoas__acoes > * + * { margin-left: calc(var(--u) * 2); }
.pessoas__perfil {
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
  border: 1px solid var(--tinta); border-radius: 0;
  background: var(--papel); color: var(--conteudo);
  font: inherit; font-size: 13px;
}
.pessoas__propria { font-size: 13px; color: var(--conteudo-fraco); }

/* ------------------------------------------------------------------------ o registro */

.registros { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 8); }
.registro { list-style: none; margin: 0; padding: 0; }
.registro__item {
  display: grid;
  grid-template-columns: 13ch 1fr;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 2) 0;
  border-bottom: 1px solid var(--tinta-fraca);
  font-size: 15px;
}
.registro__quando { font-family: var(--datilo); font-size: 13px; color: var(--conteudo-fraco); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------------ telefone e tablet */

/* Abaixo de 900px a tabela vira lista: cada pessoa um bloco, com o rotulo antes de cada dado. */
@media (max-width: 900px) {
  /* O cabecalho sai da vista (o leitor de tela ainda o le), como a .visualmente-oculto. */
  .pessoas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pessoas, .pessoas tbody, .pessoas tr, .pessoas th, .pessoas td { display: block; }
  .registros { grid-template-columns: 1fr; gap: 0; }
  .pessoas tr { padding: calc(var(--u) * 4) 0; border-bottom: var(--regua); }
  .pessoas th, .pessoas td { padding: calc(var(--u) * 1) 0; border: 0; }
  .pessoas td.pessoas__acoes {
    display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2);
    padding-top: calc(var(--u) * 3);
    white-space: normal; text-align: left;
  }
  .pessoas td[data-rotulo]::before {
    content: attr(data-rotulo);
    display: block;
    font-family: var(--serifado);
    font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta);
  }
  .pessoas__acoes::before { flex-basis: 100%; }
  .pessoas__acoes > * + * { margin-left: 0; }
}

@media (max-width: 480px) {
  .bloco__cabeca { flex-direction: column; align-items: stretch; }
  .criar { padding: calc(var(--u) * 4); }
  .criar__senha { flex-direction: column; }
  .registro__item { grid-template-columns: 1fr; gap: 0; }
}