/* A tela de Serventias e usuários — da SUÍTE (veraid), a mesma na Vera
   e no Fluxo. Usa as variáveis do tema de cada app (--papel, --carmim,
   --pauta…), que os dois definem com os mesmos nomes; carregada ANTES
   das folhas do app, para o que o app quiser ajustar vencer. */
/* Cartões, não tabela: uma coluna por serventia estoura a largura na
   terceira, e o cartão cresce para baixo — o lado que sobra. */
.acesso { max-width: 62rem; }
.acesso-nota { max-width: 62ch; font-size: 0.85rem; color: var(--tinta-suave); margin: 0.4rem 0 1rem; }
.acesso-aviso {
  margin: 0.6rem 0 1rem; padding: 0.6rem 0.8rem; font-size: 0.85rem;
  border: 1px solid var(--carmim); border-radius: 3px; color: var(--carmim);
  background: var(--papel-linha);
}
.acesso-aviso-ok { border-color: var(--pauta-forte); color: var(--tinta); }

/* A senha temporária no modal: grande, espaçada e selecionável — ela é
   lida em voz alta ao telefone e digitada do outro lado. */
.senha-temporaria {
  margin: 0.8rem 0; padding: 0.9rem 0.6rem; text-align: center;
  font-size: 1.35rem; letter-spacing: 0.08em; user-select: all;
  border: 1px solid var(--pauta-forte); border-radius: 3px;
  background: var(--papel-linha); word-break: break-all;
}

.acesso-cartoes {
  display: grid; gap: 0.7rem; margin-bottom: 1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}
.acesso-cartao {
  border: 1px solid var(--pauta); border-radius: 3px;
  background: var(--papel); padding: 0.7rem 0.8rem;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.acesso-cartao.acesso-inativo { opacity: 0.6; }
.acesso-cabeca { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.acesso-nome { font-weight: 600; }
.acesso-login { font-size: 0.78rem; color: var(--tinta-fraca); margin-left: 0.4rem; }
.acesso-marcas { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.acesso-badge {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em;
  border: 1px solid var(--pauta-forte); border-radius: 2px;
  padding: 0.05rem 0.3rem; color: var(--tinta-suave); white-space: nowrap;
}
.acesso-badge-eu { border-color: var(--carmim); color: var(--carmim); }
.acesso-estado {
  display: flex; gap: 0.9rem; font-size: 0.76rem; color: var(--tinta-suave);
}
.acesso-serventias { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.acesso-todas { font-size: 0.78rem; color: var(--tinta-fraca); font-style: italic; }
.acesso-chip {
  display: inline-flex; align-items: baseline; gap: 0.35rem;
  border: 1px solid var(--pauta-forte); border-radius: 10px;
  padding: 0.1rem 0.5rem; font-size: 0.76rem;
  background: var(--papel-linha); white-space: nowrap;
}
.acesso-chip-papel { color: var(--tinta-suave); font-size: 0.7rem; }
.acesso-chip-x { color: var(--tinta-fraca); text-decoration: none; font-size: 0.85rem; }
.acesso-chip-x:hover { color: var(--carmim); }
.acesso-conceder { display: inline-flex; gap: 0.25rem; align-items: center; flex-wrap: wrap; }
.acesso-conceder select {
  font-family: var(--sans); font-size: 0.72rem; max-width: 9rem;
  padding: 0.1rem 0.2rem;
}
.acesso-acoes {
  display: flex; flex-wrap: wrap; gap: 0.7rem;
  border-top: 1px solid var(--pauta); padding-top: 0.45rem; margin-top: 0.1rem;
}
.acesso-acao { font-size: 0.75rem; color: var(--tinta-suave); text-decoration: none; }
.acesso-acao:hover { color: var(--carmim); }
/* Botão vestido de ação discreta — o par do .acesso-acao, que é âncora. */
.acao-mini {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--sans); font-size: 0.75rem; color: var(--tinta-suave);
}
.acao-mini:hover { color: var(--carmim); }

/* O painel unificado: topo com os botões de criação (o formulário mora
   em modal, não no fim da página) e uma seção por serventia. */
.acesso-topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.acesso-barra { display: flex; gap: 0.6rem; }

.serv-secao {
  background: var(--papel); border: 1px solid var(--pauta);
  border-radius: 4px; padding: 0.7rem 0.9rem; margin: 0.7rem 0;
  box-shadow: 0 1px 2px var(--sombra);
}
.serv-cabeca {
  display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--pauta); padding-bottom: 0.45rem;
  margin-bottom: 0.35rem;
}
/* O CNS é a identidade — é ele que ganha o corpo; o apelido acompanha. */
.serv-cns {
  font-family: var(--mono); font-weight: 700; font-size: 1.05rem;
  letter-spacing: 0.03em;
}
.serv-apelido { font-family: var(--serif); color: var(--tinta-suave); }
.serv-acoes { margin-left: auto; display: flex; gap: 0.7rem; }
.serv-vazia {
  font-size: 0.8rem; color: var(--tinta-fraca); margin: 0.35rem 0;
}

/* Equipe em listagem compacta: linha por pessoa, sem cabeçalho — os
   valores se explicam (login mono, nome, papel, estado). */
.acesso-lista { box-shadow: none; }
/* Duas classes no seletor: `.livro tbody td` é (0,1,2) e impunha o
   padding cheio da tabela-livro por cima do compacto prometido acima. */
.livro.acesso-lista tbody td { padding: 0.3rem 0.5rem; font-size: 0.84rem; }
.acesso-lista .lista-estado { color: var(--tinta-fraca); font-size: 0.76rem; }
.acesso-lista .lista-abrir {
  color: inherit; text-decoration: underline dotted var(--tinta-fraca);
  text-underline-offset: 3px;
}
.acesso-lista .lista-abrir:hover { color: var(--carmim); }
.lista-papel { font-size: 0.8rem; }
.acesso-identificacao {
  font-size: 0.74rem; color: var(--tinta-fraca);
  border-left: 2px solid var(--pauta); padding-left: 0.5rem;
}
/* Edição do cadastro: modal próprio, para não depender do de despesas. */
.edicao-fundo {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(40, 34, 24, 0.35);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4rem 1rem; overflow-y: auto;
}
.edicao-fundo[hidden] { display: none; }
.edicao-caixa {
  width: min(34rem, 100%); background: var(--papel);
  border: 1px solid var(--pauta-forte); border-radius: 3px;
  padding: 1.1rem 1.3rem 1rem;
  box-shadow: 0 10px 30px rgba(40, 34, 24, 0.3);
}
.edicao-caixa .acesso-nota { margin-bottom: 0.2rem; }
/* A grade do modal é daqui: a `.form-grade` de cada app é a do SEU
   formulário (a da Vera tem 12 colunas, a do Fluxo 2), e um campo sem
   `campo-N` numa grade de 12 encolhia a 1/12 da caixa. */
.edicao-caixa .form-grade {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem 1rem; margin-top: 0.6rem;
}
.edicao-caixa .form-grade > .campo { min-width: 0; }
.edicao-caixa .campo-largo { grid-column: 1 / -1; }
.edicao-caixa .campo .acesso-nota { text-transform: none; letter-spacing: normal; }
@media (max-width: 480px) {
  .edicao-caixa .form-grade { grid-template-columns: 1fr; }
}
.acesso-check { font-size: 0.85rem; display: flex; align-items: center; gap: 0.35rem; padding-bottom: 0.5rem; }

.modal-secao { border-top: 1px solid var(--pauta-forte); padding-top: 0.8rem;
  margin-top: 0.4rem; color: var(--tinta); }
.modal-secao .acesso-nota { display: block; margin-top: 0.15rem; }