/* =====================================================================
   Login, menu da conta, "Somente consulta", Administração e o modo do
   computador compartilhado (chão de fábrica). Mesmo padrão do app.css:
   azul-escuro da barra lateral, cartões brancos com borda fina, sem sombra
   forte, sem gradiente.
   ===================================================================== */

/* ------------------------------------------------------------ sem sessão: só a tela de login */
body.sem-sessao .app { display: none; }
body.sem-sessao #avisos { z-index: 1000; }

.acesso {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 16px;
  background: var(--fundo);
}
.acesso[hidden] { display: none; }
/* sessão caiu com coisa digitada: o login aparece POR CIMA da tela (que fica guardada embaixo, travada) */
body.sessao-caiu .acesso { position: fixed; inset: 0; z-index: 900; overflow-y: auto; }
body.sessao-caiu #avisos { z-index: 1000; }
.acesso-caixa {
  width: 100%; max-width: 900px;
  display: grid; grid-template-columns: 5fr 6fr;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 6px;
  overflow: hidden;
}
.acesso-marca {
  background: var(--azul-escuro);
  color: #fff;
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
  padding: 44px 36px;
}
.acesso-marca img { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; }
.acesso-marca p { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .85); text-align: center; }
.acesso-form { padding: 40px 44px 34px; }
.acesso-form h1 { font-size: 28px; margin-bottom: 6px; }
.acesso-sub { margin: 0 0 22px; color: var(--texto-3); font-size: 15px; }
.acesso-form .campo input { font-size: 18px; min-height: 50px; }
.acesso-senha { position: relative; }
.acesso-senha input { padding-right: 96px; }
.acesso-senha .btn-link {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 14px; padding: 8px 10px;
}
.acesso-form .checar { margin: 4px 0 22px; font-size: 16px; }
.acesso-form .btn.grande { width: 100%; min-height: 56px; font-size: 20px; }
.acesso-erro {
  margin: 0 0 18px; padding: 12px 14px;
  background: var(--vermelho-claro); color: #8f1d1d;
  border: 1px solid #f3b5b5; border-radius: var(--raio);
  font-size: 15px;
}
.acesso-info {
  margin: 0 0 18px; padding: 12px 14px;
  background: var(--azul-claro); color: var(--texto);
  border: 1px solid var(--azul-linha); border-radius: var(--raio);
  font-size: 15px;
}
.acesso-dica { margin: 18px 0 0; font-size: 14px; color: var(--texto-3); text-align: center; }
.acesso-carregando { color: var(--texto-3); font-size: 16px; }

@media screen and (max-width: 760px) {
  .acesso { align-items: flex-start; padding: 16px; }
  .acesso-caixa { grid-template-columns: 1fr; }
  .acesso-marca { padding: 24px 20px; gap: 10px; }
  .acesso-marca img { max-width: 220px; }
  .acesso-marca p { font-size: 14px; }
  .acesso-form { padding: 24px 20px; }
  .acesso-form h1 { font-size: 24px; }
}

/* ------------------------------------------------------------ menu da conta (nome no topo) */
.usuario-caixa { position: relative; }
.usuario .seta { width: 16px; height: 16px; }
.menu-usuario {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 250px; z-index: 40;
  background: var(--branco);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  padding: 6px 0;
}
.menu-usuario-quem { padding: 10px 16px 12px; border-bottom: 1px solid var(--borda); margin-bottom: 6px; }
.menu-usuario-quem b { display: block; font-size: 16px; }
.menu-usuario-quem span { display: block; font-size: 13px; color: var(--texto-3); }
.menu-usuario button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 16px; background: none; border: 0; cursor: pointer;
  font-size: 15px; text-align: left; color: var(--texto);
}
.menu-usuario button:hover { background: var(--fundo); }
.menu-usuario button svg { width: 20px; height: 20px; color: var(--texto-2); }

/* ------------------------------------------------------------ só consulta e sem acesso */
.faixa-consulta {
  background: var(--azul-claro);
  border-bottom: 1px solid var(--azul-linha);
  color: var(--texto-2);
  padding: 8px 28px; font-size: 14px;
}
.sem-acesso { max-width: 640px; padding: 28px; }
.sem-acesso h2 { font-size: 22px; margin-bottom: 8px; }
.sem-acesso p { margin: 0 0 18px; font-size: 16px; color: var(--texto-2); }
@media screen and (max-width: 860px) {
  .faixa-consulta { padding: 8px 16px; }
  .menu-usuario { position: fixed; right: 8px; top: calc(var(--topo) - 4px); }
  .usuario span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media print {
  .faixa-consulta, .acesso { display: none !important; }
}

/* ------------------------------------------------------------ computador compartilhado (chão de fábrica): letras grandes */
body.modo-fabrica { font-size: 17px; }
body.modo-fabrica .menu a, body.modo-fabrica .menu-cabeca { font-size: 19px; padding-top: 16px; padding-bottom: 16px; }
body.modo-fabrica .menu .submenu a { font-size: 18px; }
body.modo-fabrica .topo h1 { font-size: 30px; }
body.modo-fabrica .usuario { font-size: 18px; }
body.modo-fabrica .btn { font-size: 18px; min-height: 52px; }
body.modo-fabrica .btn.pequeno { font-size: 16px; min-height: 42px; }
body.modo-fabrica .tabela td, body.modo-fabrica .tabela th { font-size: 17px; }

/* ------------------------------------------------------------ Administração */
.adm-etiquetas { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: 8px; vertical-align: middle; }
.adm-form { max-width: 1100px; }
.adm-form .formulario { margin-bottom: 4px; }
.adm-opcoes { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 4px; }
.adm-opcoes .checar { align-items: flex-start; }
.adm-opcoes .checar input { margin-top: 2px; flex: 0 0 auto; }
.adm-opcoes .checar span small { display: block; font-size: 14px; color: var(--texto-3); font-weight: 400; }
.adm-acoes-conta { display: flex; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--borda); padding-top: 16px; margin-top: 12px; }
/* celular: o texto longo do botão quebra a linha em vez de passar da tela */
@media screen and (max-width: 480px) {
  .adm-acoes-conta .btn { white-space: normal; text-align: left; max-width: 100%; }
  .adm-acoes-conta .btn svg { flex: 0 0 auto; }
  /* rodapé fixo (Sair sem salvar / Salvar): os dois botões dividem a largura em vez de sair pela esquerda */
  .adm-rodape { gap: 8px; }
  .adm-rodape .btn { flex: 1 1 0; min-width: 0; white-space: normal; padding-left: 10px; padding-right: 10px; }
  .adm-rodape .btn svg { flex: 0 0 auto; }
}

.adm-modelos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.adm-modelos .rotulo { margin-right: 4px; }
.adm-copiar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.adm-copiar select { min-height: 40px; padding: 6px 10px; border: 1px solid var(--borda-forte); border-radius: var(--raio); background: var(--branco); font-size: 15px; max-width: min(320px, 100%); min-width: 0; }

.adm-grade { width: 100%; border-collapse: collapse; }
.adm-grade th, .adm-grade td { padding: 10px 12px; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: middle; }
.adm-grade thead th { background: var(--cabecalho-tabela); font-size: 14px; color: var(--texto-2); font-weight: 600; }
.adm-grade .centro { text-align: center; width: 120px; }
.adm-grade tr.adm-grupo td { background: var(--fundo); font-weight: 700; font-size: 16px; padding-top: 12px; padding-bottom: 12px; }
.adm-grupo-botoes { display: inline-flex; gap: 6px; margin-left: 14px; font-weight: 400; flex-wrap: wrap; }
.adm-grupo-botoes button { background: var(--branco); border: 1px solid var(--borda-forte); border-radius: var(--raio); padding: 4px 10px; font-size: 13px; cursor: pointer; color: var(--texto-2); }
.adm-grupo-botoes button:hover { border-color: var(--azul); color: var(--azul); }
.adm-area b { font-weight: 600; }
.adm-area small { display: block; color: var(--texto-3); font-size: 13px; margin-top: 2px; }
.adm-nivel { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 36px; cursor: pointer; border-radius: var(--raio); }
.adm-nivel input { width: 20px; height: 20px; cursor: pointer; }
.adm-nivel:hover { background: var(--azul-claro); }
.adm-sem { color: var(--texto-3); }
.adm-grade tr.adm-marcado-ver td.adm-area { color: var(--texto); }
.adm-grade tr.adm-marcado-nenhum td.adm-area { color: var(--texto-3); }
.adm-nota { margin: 0 0 14px; color: var(--texto-2); font-size: 15px; }

.adm-funcoes { width: 100%; border-collapse: collapse; }
.adm-funcoes th, .adm-funcoes td { padding: 10px 12px; border-bottom: 1px solid var(--borda); text-align: left; }
.adm-funcoes td .checar { display: inline-flex; margin-right: 16px; font-size: 15px; }

.adm-rodape {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; justify-content: flex-end; gap: 12px;
  background: var(--fundo); border-top: 1px solid var(--borda);
  padding: 14px 0; margin-top: 8px;
}
.adm-historico td { vertical-align: top; }
.adm-hist-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.adm-hist-filtros .checar { font-size: 15px; }
.adm-hist-mais { display: flex; justify-content: center; padding: 14px; }
.adm-historico .adm-detalhes { color: var(--texto-2); font-size: 14px; max-width: 520px; }

@media screen and (max-width: 860px) {
  .adm-grade .centro { width: 64px; padding-left: 4px; padding-right: 4px; }
  .adm-grade thead th.centro { font-size: 12px; }
  .adm-grupo-botoes { display: flex; margin: 8px 0 0; }
  .adm-funcoes td .checar { display: flex; margin: 0 0 8px; }
}

/* ------------------------------------------------------------ campos travados para quem só consulta */
/* <fieldset class="grupo-campos" disabled> em volta de um formulário grande (ex.: receita): trava tudo de uma vez */
fieldset.grupo-campos { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.grupo-campos[disabled] input, fieldset.grupo-campos[disabled] select, fieldset.grupo-campos[disabled] textarea {
  background: var(--fundo); color: var(--texto); cursor: default;
}
fieldset.grupo-campos[disabled] .btn, fieldset.grupo-campos[disabled] .btn-icone, fieldset.grupo-campos[disabled] .btn-link { display: none; }
.adm-aviso-modelo {
  margin: -6px 0 16px; padding: 10px 14px;
  background: var(--verde-claro); border: 1px solid #b9e2c8; border-radius: var(--raio);
  color: var(--texto); font-size: 15px;
}