/* ============================================================================
   public/css/login.css — ecrã de início de sessão
   Mesmo estilo do login do CYBERPORTAL (proposta A, 18/10/2026): fundo
   azul-marinho com brilho âmbar, cartão de vidro translúcido, campos escuros
   com ícone, olho para mostrar a palavra-passe e aviso de Caps Lock.
============================================================================ */

.pagina-de-login { --login-ambar: #f5a623; --login-ambar-texto: #fbbf24; --login-texto: #e2e8f0; --login-suave: #94a3b8; background: #0b1220; color: var(--login-texto); min-height: 100vh; } /* fundo da página */
.login-envolvente { min-height: 100vh; display: grid; place-items: center; padding: 20px 16px; background: radial-gradient(700px 400px at 50% 18%, rgba(245, 166, 35, .22), transparent 70%), radial-gradient(900px 600px at 50% 110%, #1e293b, #0b1220 70%); } /* brilho âmbar em cima, azul em baixo */
.login-cartao { width: 100%; max-width: 410px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-radius: 20px; padding: 36px 34px 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); } /* cartão de vidro */

/* Cabeçalho: logótipo, marca e subtítulo ao centro */
.login-cabecalho { text-align: center; margin-bottom: 24px; } /* topo do cartão */
.login-logotipo { display: block; width: 68px; height: 68px; object-fit: contain; margin: 0 auto 10px; filter: drop-shadow(0 6px 18px rgba(245, 166, 35, .35)); } /* logótipo da CYBERSYS com brilho */
.login-marca { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: .16em; color: var(--login-ambar-texto); } /* CYBERGYM */
.login-subtitulo { margin: 4px 0 0; font-size: 13px; color: var(--login-suave); } /* "Inicie sessão para continuar" */

/* Avisos */
.login-aviso { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: #dbeafe; background: rgba(59, 130, 246, .14); border: 1px solid rgba(59, 130, 246, .40); border-radius: 9px; padding: 9px 12px; margin-bottom: 16px; } /* sessão terminada: azul, não é erro */
.login-aviso[hidden] { display: none; } /* escondido */
.login-aviso i { color: #93c5fd; margin-top: 1px; } /* relógio */
.login-erro { font-size: 13px; line-height: 1.5; color: #fca5a5; background: rgba(208, 59, 59, .14); border: 1px solid rgba(208, 59, 59, .40); border-radius: 9px; padding: 9px 12px; margin-bottom: 16px; } /* senha errada, conta bloqueada */
.login-erro[hidden] { display: none; } /* escondido */

/* Campos escuros com ícone */
.login-campo { margin-bottom: 16px; } /* um campo */
.login-campo label { display: block; font-size: 13px; font-weight: 600; color: #cbd5e1; margin-bottom: 6px; } /* rótulo */
.login-caixa-do-campo { position: relative; } /* ícone e olho por cima do campo */
.login-icone-do-campo { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #64748b; font-size: 16px; pointer-events: none; } /* pessoa / cadeado */
.login-campo input { width: 100%; min-height: 46px; padding: 11px 44px 11px 40px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .07); color: #ffffff; font: inherit; font-size: 15px; } /* campo */
.login-campo input::placeholder { color: #64748b; } /* exemplo */
.login-campo input:focus { outline: none; background: rgba(255, 255, 255, .10); border-color: var(--login-ambar); box-shadow: 0 0 0 3px rgba(245, 166, 35, .18); } /* com o cursor */
.login-caixa-do-campo:focus-within .login-icone-do-campo { color: var(--login-ambar-texto); } /* ícone acende com o cursor */
.login-campo input:-webkit-autofill, .login-campo input:-webkit-autofill:hover, .login-campo input:-webkit-autofill:focus { -webkit-text-fill-color: #ffffff; -webkit-box-shadow: 0 0 0 1000px #1c2436 inset; caret-color: #ffffff; transition: background-color 9999s ease-out 0s; } /* senha guardada: o Chrome não pinta de azul claro */
.login-mostrar-senha { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--login-suave); font-size: 17px; cursor: pointer; display: grid; place-items: center; } /* olho */
.login-mostrar-senha:hover, .login-mostrar-senha:focus-visible { color: #ffffff; background: rgba(255, 255, 255, .08); outline: none; } /* olho activo */
.login-caps { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--login-ambar-texto); } /* Caps Lock ligado */
.login-caps[hidden] { display: none; } /* escondido */

/* Esqueci a palavra-passe */
.login-opcoes { display: flex; justify-content: flex-end; margin: -6px 0 16px; } /* linha à direita */
.login-esqueci { border: 0; background: none; padding: 0; color: var(--login-ambar-texto); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } /* ligação */
.login-esqueci:hover { text-decoration: underline; } /* realce */
.login-ajuda { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.5; color: var(--login-texto); background: rgba(245, 166, 35, .10); border: 1px solid rgba(245, 166, 35, .30); border-radius: 9px; padding: 9px 12px; margin-bottom: 16px; } /* ajuda */
.login-ajuda[hidden] { display: none; } /* escondida */
.login-ajuda i { color: var(--login-ambar-texto); margin-top: 1px; } /* ícone */

/* Botões */
.login-botao { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px; background: var(--login-ambar); color: #0f172a; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 10px 24px rgba(245, 166, 35, .25); } /* Entrar */
.login-botao:hover { filter: brightness(1.05); } /* realce */
.login-botao:disabled { opacity: .6; cursor: wait; } /* a entrar */
.login-botao-secundario { width: 100%; min-height: 44px; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; background: transparent; color: var(--login-texto); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } /* Voltar */
.login-botao-secundario:hover { background: rgba(255, 255, 255, .06); } /* realce */

/* 2.º passo (código da aplicação) */
.login-explicacao { display: flex; gap: 8px; font-size: 13.5px; color: var(--login-texto); margin: 0 0 16px; line-height: 1.5; } /* texto */
.login-explicacao i { color: var(--login-ambar-texto); } /* escudo */
.login-codigo { padding: 11px 12px !important; font-family: Consolas, "Courier New", monospace !important; font-size: 22px !important; letter-spacing: 5px; text-align: center; } /* código grande */
.login-ajuda-do-campo { display: block; margin-top: 6px; font-size: 12px; color: var(--login-suave); } /* recuperação */

/* Rodapé */
.login-rodape { text-align: center; font-size: 12px; color: var(--login-suave); margin: 22px 0 0; } /* Powered by */
.login-rodape strong { color: var(--login-ambar-texto); letter-spacing: .04em; } /* CYBERSYS */

@media screen and (max-width: 480px) {
  .login-cartao { padding: 28px 20px 20px; border-radius: 16px; } /* telemóvel: menos margem */
  .login-logotipo { width: 58px; height: 58px; } /* logótipo menor */
}