/* ═══════════════════════════════════════════════════════════════════════════
   RINCÃOBEACH — área administrativa

   Reaproveita a folha de /ppt em vez de copiá-la. As duas áreas são a mesma
   casca — navbar com o logo centrado, cartão sobre areia, rodapé com o selo —
   e o relatório, que mudou de /ppt para cá, usa exatamente as mesmas classes
   de tabela, número e ressalva.

   Duplicar teria custado o de sempre: duas folhas que divergem em silêncio a
   cada ajuste. O que fica aqui embaixo é só o que é próprio daqui.

   Se um dia /ppt e /admin precisarem divergir de verdade, o caminho é extrair
   o comum para uma terceira folha — não copiar esta.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('/ppt/ppt.css');

/* --- Marca de área interna ------------------------------------- */

/* A barra da administração é mais escura que a de /ppt, e é o único sinal
   permanente de que aqui se publica em nome do RINCÃOBEACH. Quem estiver com
   as duas abas abertas não confunde. */
.navbar {
  background: var(--azul-900);
}

/* --- Campo de senha -------------------------------------------- */

/* Sem `text-transform` nem máscara: senha é o único campo do site em que
   qualquer gentileza da interface atrapalha. */
input[type='password'].entrada {
  letter-spacing: 0.08em;
}

/* --- Menu da área ---------------------------------------------- */

/* A administração passou de uma página para duas, e as abas ocupam a coluna
   livre da esquerda — a mesma que `.navbar-acao--esquerda` usa em /ppt. Não
   empilhar com o "sair" à direita é o que mantém o logo no centro, que é a
   razão de a barra ser uma grade de três colunas. */
.navbar-menu {
  grid-column: 1;
  justify-self: start;
  display: flex;
  gap: var(--space-5);
}

.navbar-aba {
  font: var(--type-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--areia-200);
  text-decoration: none;
  opacity: 0.7;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.navbar-aba:hover {
  opacity: 1;
}

/* A aba atual é marcada por opacidade E por régua: só a opacidade seria
   invisível para quem não distingue bem contraste. */
.navbar-aba--atual {
  opacity: 1;
  border-bottom-color: var(--sol-500);
}

/* --- Campos próprios da publicação ------------------------------ */

/* `.entrada` foi escrita para o CPF: grande, tabular, com espaçamento entre
   caracteres. Serve a um campo de onze dígitos e atrapalha em texto corrido —
   um resumo de quatro linhas em fonte tabular lê como planilha. */
.entrada--texto {
  font: var(--type-body);
  font-variant-numeric: normal;
  letter-spacing: normal;
  resize: vertical;
  min-height: 5.5rem;
}

/* O seletor de arquivo é desenhado pelo navegador e não aceita a moldura
   inteira; o que dá para fazer é aproximar o tamanho do resto do formulário. */
.entrada--arquivo {
  font: var(--type-body);
  font-variant-numeric: normal;
  letter-spacing: normal;
  padding: var(--space-3);
}

.rotulo-opcional {
  font-weight: var(--fw-medium);
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-muted);
}

/* --- Estado de um material -------------------------------------- */

.etiqueta {
  display: inline-block;
  font: var(--fw-bold) var(--fs-caption) / 1 var(--font-core);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
  background: var(--sol-500);
  color: var(--azul-900);
  white-space: nowrap;
}

/* Oculto é estado, não erro: fica em cinza, sem o vermelho de alerta que faria
   a lista parecer cheia de problemas. */
.etiqueta--oculto {
  background: var(--areia-200);
  color: var(--text-muted);
}

/* Aberto é o DESVIO, e por isso se destaca do padrão.
   O selo cheio de sol quer dizer "confidencial", que é a maioria da lista; se
   "aberto" usasse o mesmo fundo, os dois níveis pareceriam a mesma coisa numa
   olhada rápida — que é exatamente como se publica achando que fechou. O
   contorno sem preenchimento faz a linha aberta saltar por ser diferente. */
.etiqueta--aberto {
  background: transparent;
  color: var(--azul-800);
  border: var(--border-hair);
}

/* --- Ações dentro da tabela -------------------------------------- */

/* <button> com aparência de link. É botão porque muda estado no servidor; um
   <a> ali convidaria o navegador a pré-carregar a ação. */
.ligacao {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: var(--fw-medium) var(--fs-caption) / 1.4 var(--font-core);
  color: var(--azul-800);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ligacao:hover:not(:disabled) {
  color: var(--sol-700);
}

.ligacao:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Remover apaga o arquivo e não tem volta — a cor diz isso antes do clique, e
   o `confirm` do script diz de novo depois. */
.ligacao--perigo {
  color: var(--status-danger);
}

.acoes-linha {
  display: flex;
  gap: var(--space-4);
  white-space: nowrap;
}

/* --- O que vem do código, na lista de materiais ------------------ */

/* A apresentação e o livro aparecem na lista para a tela dizer a verdade sobre
   o que está no ar — antes ela contava só os PDFs enviados e mostrava "0" ao
   lado de um /ppt com dois itens.

   Ficam mais claros que as linhas de verdade porque não há o que fazer com
   eles aqui: mudá-los é editar TypeScript e publicar. A diferença é de peso,
   não de cor de alerta — eles não são um problema. */
.linha--codigo td {
  opacity: 0.72;
}

.etiqueta--codigo {
  background: transparent;
  color: var(--azul-800);
  border: var(--border-hair);
}