/* ==========================================================================
   ESTILO DA PÁGINA DE ENTRADA (LOGIN)
   Página inteira e independente: aparece antes de haver sessão e não vive
   dentro da shell. Por isso trata sozinha do fundo, do cartão e do botão,
   sem depender dos ficheiros comuns das páginas interiores.

   TEMA CLARO, IRMÃO DO CYBERWATER (05/09/2026)

   Era um tema escuro, de vidro fosco, com pontinhos de luz espalhados atrás
   do cartão. Passou a ser o mesmo desenho do novo login do CYBERWATER: fundo
   liso, cartão branco ao centro, borda âmbar de 2px com um halo à volta. Quem
   gere a água e o hotel entra em dois sistemas que se reconhecem como um só.

   O que saiu, e porquê:
   - o fundo escuro com brilhos e as cinco partículas — o cartão passa a ser a
     única coisa no ecrã, e é isso que se quer olhar;
   - o vidro fosco (backdrop-filter) — num fundo liso não tem nada por trás
     para desfocar, e custava a desenhar nas máquinas fracas da recepção.

   O NOME DO HOTEL É A MARCA DESTA PÁGINA

   Não há ícone nem logótipo: quem dá a cara é o nome, vindo da base de dados
   (hotels.name, ver carregarNomeDaEmpresa() em login.js). Está em Marcellus —
   capitais romanas, do género que se vê gravado à entrada de um hotel. Sem
   minúsculas verdadeiras a variar de altura, um nome comprido continua a
   ler-se como uma placa e não como uma frase.
   ========================================================================== */


/* ==========================================================================
   INÍCIO — A paleta desta página, num sítio só

   Todas as cores do login vivem nestas linhas. Trocá-las troca a página
   inteira sem se mexer em mais nada — foi assim que se comparou a versão azul
   (esta) com a versão em creme e verde. Daqui para baixo não há uma única cor
   escrita à mão.
   ========================================================================== */

:root {

  /* O fundo do ecrã, atrás do cartão */
  --entradaFundo: #eef2f6;

  /* O cartão branco onde se escreve o utilizador e a password */
  --entradaCartao: #ffffff;

  /* A borda âmbar do cartão — a mesma do CYBERWATER */
  --entradaBorda: #f5a623;

  /* O halo suave por fora da borda, que descola o cartão do fundo */
  --entradaHalo: rgba(245, 166, 35, 0.14);

  /* A tinta do texto principal: nome do hotel e nomes dos campos */
  --entradaTinta: #0e2338;

  /* A tinta do texto secundário: subtítulo, "manter sessão", rodapé */
  --entradaTintaSuave: #5d7a95;

  /* O fundo das caixas de escrever */
  --entradaCampoFundo: #f5f9fd;

  /* A borda das caixas de escrever, em repouso */
  --entradaCampoBorda: #d5e3ef;

  /* O azul de realce: botão, foco dos campos e links */
  --entradaRealce: #0b5fa5;

  /* O azul claro, usado só na ponta esquerda do traço por baixo do nome */
  --entradaRealceClaro: #22a3d6;

  /* O azul escuro, o fim do degradê do botão */
  --entradaRealceEscuro: #073d6b;
}

/* ==========================================================================
   FIM — A paleta desta página
   ========================================================================== */


/* ==========================================================================
   INÍCIO — Fundo da página de entrada
   ========================================================================== */

/* Ocupa o ecrã todo e centra o cartão, sobre um fundo liso e claro */
.paginaDeEntrada {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  background: var(--entradaFundo);
}

/* ==========================================================================
   FIM — Fundo da página de entrada
   ========================================================================== */


/* ==========================================================================
   INÍCIO — Cartão com o formulário
   ========================================================================== */

/* Cartão branco central, com a borda âmbar e o halo por fora. A sombra é
   larga e pouco marcada: levanta o cartão do fundo sem lhe desenhar um
   contorno escuro, que competiria com a borda. */
.cartaoDeEntrada {
  position: relative;
  z-index: 1;
  background: var(--entradaCartao);
  border: 2px solid var(--entradaBorda);
  border-radius: 22px;
  padding: 44px 56px;
  width: 100%;
  max-width: 500px;
  box-shadow:
    0 30px 70px -28px rgba(7, 61, 107, 0.34),
    0 0 0 6px var(--entradaHalo);
}

/* O nome do hotel, que é a marca desta página. Vem da base de dados e pode
   ser comprido ("HOTEL RESIDENCIAL X DE Y"), por isso parte em duas linhas
   com jeito em vez de encolher a letra. */
.cartaoDeEntrada h1 {
  text-align: center;
  font-family: 'Marcellus', Georgia, serif;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.09em;
  line-height: 1.25;
  text-wrap: balance;
  margin: 0;
  color: var(--entradaTinta);
}

/* O traço curto por baixo do nome. É a única cor forte do topo do cartão, e
   é o que separa o nome do subtítulo sem lá meter uma linha a toda a
   largura, que cortaria o cartão ao meio. */
.tracoDoNomeDaEmpresa {
  width: 44px;
  height: 3px;
  border-radius: 2px;
  margin: 12px auto 10px;
  background: linear-gradient(90deg, var(--entradaRealceClaro), var(--entradaRealce));
}

/* Enquanto o nome da empresa ainda não chegou do servidor, mostra-se um
   brilho a deslizar por cima do texto reserva ("Cyber Hotel"), para não
   parecer que a página ficou pendurada. A classe sai assim que
   carregarNomeDaEmpresa() (em login.js) preenche o nome verdadeiro.

   O brilho é agora escuro sobre claro: no tema anterior era branco sobre
   fundo escuro e, neste, desaparecia por completo. */
.aCarregarNomeDaEmpresa {
  color: transparent;
  background: linear-gradient(90deg, rgba(14, 35, 56, 0.08), rgba(14, 35, 56, 0.20), rgba(14, 35, 56, 0.08));
  background-size: 200% 100%;
  border-radius: 6px;
  animation: brilhoDoNomeACarregar 1.4s infinite;
}
@keyframes brilhoDoNomeACarregar {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* O subtítulo por baixo do traço. Em maiúsculas pequenas e espaçadas: assim
   lê-se como a segunda linha de uma marca, e não como uma frase solta. */
.textoDeBoasVindas {
  text-align: center;
  color: var(--entradaTintaSuave);
  margin: 0 0 30px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

/* ==========================================================================
   FIM — Cartão com o formulário
   ========================================================================== */


/* ==========================================================================
   INÍCIO — Campos e botão do formulário
   ========================================================================== */

/* Nome de cada campo, por cima da caixa de escrever */
.cartaoDeEntrada label {
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--entradaTinta);
  margin-bottom: 6px;
}

/* As caixas de escrever e os ícones que as acompanham */
.cartaoDeEntrada .form-control,
.cartaoDeEntrada .input-group-text,
.cartaoDeEntrada .btn-outline-secondary {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--entradaCampoBorda);
  background: var(--entradaCampoFundo);
  color: var(--entradaTinta);
  font-size: 0.9rem;
}

/* O campo focado ganha a borda azul e um anel à volta, para se ver onde se
   está a escrever sem se olhar para o rato */
.cartaoDeEntrada .form-control:focus {
  border-color: var(--entradaRealce);
  box-shadow: 0 0 0 4px rgba(11, 95, 165, 0.14);
  background: var(--entradaCartao);
  color: var(--entradaTinta);
}

/* Texto de exemplo dentro dos campos (placeholder), mais apagado */
.cartaoDeEntrada .form-control::placeholder {
  color: rgba(93, 122, 149, 0.65);
}

/* Botão do olho: acompanha as caixas, sem fundo sólido próprio */
.cartaoDeEntrada .btn-outline-secondary {
  color: var(--entradaTintaSuave);
}
.cartaoDeEntrada .btn-outline-secondary:hover,
.cartaoDeEntrada .btn-outline-secondary:focus {
  background: var(--entradaCampoBorda);
  color: var(--entradaTinta);
}

/* A caixa de "manter sessão" e o link de "esqueci-me da password" */
.cartaoDeEntrada .form-check-label {
  color: var(--entradaTintaSuave);
}
.cartaoDeEntrada a {
  color: var(--entradaRealce);
  font-weight: 600;
}

/* A caixa de "manter sessão" quando está marcada, para não ficar no azul de
   fábrica do Bootstrap, que é outro azul */
.cartaoDeEntrada .form-check-input:checked {
  background-color: var(--entradaRealce);
  border-color: var(--entradaRealce);
}

/* Botão "Entrar": azul, a toda a largura, com um leve salto ao passar o rato */
.cartaoDeEntrada .btn-primary {
  width: 100%;
  background: linear-gradient(135deg, var(--entradaRealce), var(--entradaRealceEscuro));
  border: 0;
  padding: 12px;
  font-weight: 600;
  border-radius: 10px;
  font-size: 0.95rem;
  margin-top: 6px;
  box-shadow: 0 12px 26px -10px rgba(11, 95, 165, 0.55);
  transition: all 0.15s;
}

/* Realce do botão quando o rato passa por cima */
.cartaoDeEntrada .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px -10px rgba(11, 95, 165, 0.65);
}

/* Caixa vermelha de erro, para mensagens de autenticação falhada */
.cartaoDeEntrada .alert {
  font-size: 0.85rem;
  padding: 10px 14px;
  border-radius: 8px;
  margin-top: 12px;
}

/* ==========================================================================
   FIM — Campos e botão do formulário
   ========================================================================== */


/* ==========================================================================
   INÍCIO — Assinatura da casa, no fundo do cartão
   ========================================================================== */

/* Quem fez o sistema, em letra miúda por baixo do formulário. É o mesmo
   lugar e o mesmo peso que tem no login do CYBERWATER. */
.assinaturaDaCyberSys {
  text-align: center;
  color: var(--entradaTintaSuave);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  margin: 22px 0 0;
}

/* O nome da casa, um pouco mais escuro do que o resto da linha */
.assinaturaDaCyberSys strong {
  color: var(--entradaTinta);
  font-weight: 700;
}

/* ==========================================================================
   FIM — Assinatura da casa
   ========================================================================== */

/* ==========================================================================
   INÍCIO — Licença suspensa (CYBERPORTAL, 27/09/2026)
   Bloco #licencaSuspensa em login.html, controlado por licencaSuspensa.js.
   ========================================================================== */
.licencaSuspensa {
  margin-bottom: 1rem;                       /* espaço até ao que vem a seguir */
  padding: .9rem 1rem;                       /* espaço interno */
  border-radius: 10px;                       /* cantos arredondados */
  background: #fff4f4;                       /* fundo vermelho muito claro */
  border: 1px solid #f0c2c2;                 /* contorno vermelho suave */
  color: var(--entradaTinta);                /* texto principal */
  text-align: left;                          /* texto alinhado à esquerda */
  font-size: .9rem;                          /* letra ligeiramente pequena */
}
.licencaTitulo { font-weight: 700; color: #9b1c1c; font-size: 1.05rem; margin-bottom: .4rem; } /* título a vermelho */
.licencaTitulo .bi { margin-right: .3rem; }  /* espaço entre o ícone e o texto */
.licencaTexto { margin: 0 0 .6rem; line-height: 1.45; } /* parágrafo explicativo */
.licencaContactos { margin: 0 0 .5rem; font-size: .85rem; color: var(--entradaTintaSuave); } /* contactos da CYBERSYS */
.licencaLigacao { display: block; margin-bottom: .7rem; color: var(--entradaRealce); font-weight: 600; } /* ligação para o portal */
.licencaSuspensa.licencaCompacta .licencaLigacao,
.licencaSuspensa.licencaCompacta #licencaEntrarCybersys { display: none; } /* depois de "Sou da CYBERSYS": só o essencial */
/* ==========================================================================
   FIM — Licença suspensa
   ========================================================================== */