/* ============================================================================
   LOGIN CYBERWATER — fundo escuro "carvão" da marca, com gotas/bolhas animadas em âmbar.
   Página auto-contida: não depende de base.css/portal.css.
   ========================================================================== */

/* Variáveis de cor reutilizadas em todo este ficheiro (paleta CYBERSYS (âmbar/carvão)) */
:root {
  --marca-clara: #f5a623; /* âmbar claro — destaques e ícones */
  --marca-media: #d97706; /* âmbar médio — usado em gradientes */
  --marca-escura: #2d2d2d; /* âmbar escuro/carvão — não usado directamente, referência de paleta */
  --card-bg:    #232323; /* fundo do cartão de login */
  --card-borda: rgba(255,255,255,.07); /* contorno subtil do cartão */
  --txt:        #e2e8f0; /* cor de texto principal (quase branco) */
  --txt-suave:  #94a3b8; /* cor de texto secundário (cinza neutro) */
}

/* Mensagem de erro do login (escondida por omissao; login.js mostra) */
.login-erro {
  display: none;                              /* escondida até haver um erro para mostrar */
  margin-top: .75rem;                         /* espaço acima, entre o formulário e o erro */
  padding: .5rem .75rem;                      /* espaço interno da caixa de erro */
  border-radius: 8px;                         /* cantos arredondados */
  font-size: .85rem;                          /* tamanho de letra pequeno */
  text-align: center;                         /* texto centrado */
  color: #fecaca;                             /* texto em vermelho claro */
  background: rgba(220, 38, 38, .22);         /* fundo vermelho translúcido */
  border: 1px solid rgba(248, 113, 113, .5);  /* contorno vermelho translúcido */
}
.login-erro.show { display: block; } /* classe aplicada por JS quando há mensagem a mostrar */

/* Reposição básica: todos os elementos incluem padding/border na largura definida */
* { box-sizing: border-box; }
html, body { height: 100%; } /* garante que o fundo cobre sempre o ecrã inteiro */
body {
  margin: 0;                                                    /* remove margem por omissão do browser */
  font-family: 'Inter', system-ui, -apple-system, sans-serif;    /* tipo de letra da página */
  color: var(--txt);                                             /* cor de texto principal */
  overflow: hidden;                                              /* esconde barras de scroll (página fixa) */
  display: flex; align-items: center; justify-content: center;   /* centra o cartão de login no ecrã */
  min-height: 100vh;                                             /* ocupa sempre a altura toda da janela */
}

/* ---- FUNDO: gradiente escuro "carvão" da marca (mantém a animação de gotas/bolhas) ---- */
.oceano {
  position: fixed; inset: 0; z-index: -2; /* cobre todo o ecrã, atrás de tudo o resto */
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(245,166,35,.35), transparent 60%), /* brilho superior */
    linear-gradient(180deg, #3a3a3a 0%, #2d2d2d 30%, #232323 65%, #161616 100%);        /* degradê escuro de profundidade (tons de carvão) */
}
.oceano::after {
  content: ""; position: absolute; inset: 0; /* camada extra sobreposta ao fundo */
  background:
    radial-gradient(600px 600px at 20% 30%, rgba(245,166,35,.12), transparent 60%), /* brilho difuso 1 */
    radial-gradient(500px 500px at 80% 70%, rgba(245,166,35,.14), transparent 60%); /* brilho difuso 2 */
  animation: respirar 9s ease-in-out infinite alternate; /* efeito de "respiração" do fundo */
}
/* Animação usada por .oceano::after: alterna opacidade e escala lentamente */
@keyframes respirar {
  from { opacity: .5; transform: scale(1); }
  to   { opacity: 1;  transform: scale(1.08); }
}

/* ---- ONDA no fundo (imagem SVG desenhada directamente no HTML) ---- */
.onda {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: -1; /* colada ao fundo do ecrã */
  width: 100vw; height: 160px; opacity: .5; display: block;   /* dimensão e transparência da onda */
}

/* ---- GOTAS / BOLHAS (elementos criados dinamicamente por login.js) ---- */
.gotas { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } /* contentor das gotas/bolhas, não intercepta cliques */
.bolha {
  position: absolute; bottom: -40px; border-radius: 50%; /* começa fora do ecrã, por baixo; forma circular */
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), rgba(245,166,35,.10) 45%, rgba(245,166,35,.05) 70%); /* efeito de brilho/bolha */
  border: 1px solid rgba(255,255,255,.18); /* contorno subtil da bolha */
  animation: subir linear infinite; /* sobe continuamente (duração definida por JS em cada bolha) */
}
/* Animação da bolha: sobe do fundo até desaparecer acima do ecrã, com desvio lateral */
@keyframes subir {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: .85; }
  90%  { opacity: .5; }
  100% { transform: translateY(-115vh) translateX(var(--desvio, 20px)); opacity: 0; }
}
.gota {
  position: absolute; top: -30px; width: 2px; height: 18px; border-radius: 2px; /* começa acima do ecrã; forma de traço fino */
  background: linear-gradient(180deg, rgba(255,255,255,.0), rgba(245,166,35,.75)); /* degradê transparente->âmbar claro */
  animation: cair linear infinite; /* cai continuamente (duração definida por JS em cada gota) */
}
/* Animação da gota: cai do topo até desaparecer abaixo do ecrã */
@keyframes cair {
  0%   { transform: translateY(0); opacity: 0; }
  8%   { opacity: .9; }
  100% { transform: translateY(112vh); opacity: 0; }
}

/* ---- CARTÃO de login ---- */
.cartao {
  position: relative; z-index: 1;                                  /* fica por cima do fundo animado */
  width: min(94vw, 420px);                                         /* largura responsiva, até 420px */
  background: rgba(35,35,35,.82);                                  /* fundo escuro semi-transparente */
  backdrop-filter: blur(16px) saturate(160%);                      /* desfoca o que está por trás (efeito vidro) */
  -webkit-backdrop-filter: blur(16px) saturate(160%);              /* mesmo efeito, compatibilidade Safari */
  border: 1px solid var(--card-borda);                             /* contorno subtil */
  border-radius: 22px;                                             /* cantos bem arredondados */
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(245,166,35,.06); /* sombra profunda + contorno de luz */
  padding: 38px 34px 26px;                                         /* espaço interno do cartão */
}

/* Marca / Logo */
.marca { text-align: center; margin-bottom: 22px; } /* centra o bloco da marca e afasta do conteúdo seguinte */
.logo {
  width: 74px; height: 74px; margin: 0 auto 16px; border-radius: 20px; /* círculo/quadrado arredondado, centrado */
  display: flex; align-items: center; justify-content: center;         /* centra o ícone lá dentro */
  background: linear-gradient(140deg, #f5a623, #d97706 55%, #c2670a);  /* degradê âmbar da marca */
  box-shadow: 0 14px 30px -8px rgba(194,103,10,.7), inset 0 1px 0 rgba(255,255,255,.4); /* sombra + brilho interior */
  color: #fff; font-size: 2rem;                                        /* cor e tamanho do ícone */
}
.marca h1   { font-size: 1.7rem; font-weight: 800; letter-spacing: .14em; margin: 0; color: #fff; } /* título "CYBERWATER" */
.marca .sub { color: var(--txt-suave); font-size: .86rem; margin-top: 3px; }                        /* subtítulo por baixo do título */

/* Selector de idioma (pills PT/EN/FR) */
.idiomas { display: flex; gap: 8px; justify-content: center; margin: 18px 0 16px; } /* botões de idioma lado a lado, centrados */
.idiomas button {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); /* fundo/contorno subtis (estado normal) */
  color: var(--txt-suave); font-size: .72rem; font-weight: 700; letter-spacing: .05em; /* texto do botão */
  padding: 5px 14px; border-radius: 999px; cursor: pointer; transition: .2s;  /* forma de "pílula" e animação suave */
}
.idiomas button.active {
  background: linear-gradient(135deg, #f5a623, #d97706); color: #1f1d1b; border-color: transparent; /* destaque do idioma activo */
  box-shadow: 0 6px 16px -6px rgba(245,166,35,.7); /* sombra colorida no botão activo */
}

/* Aba "SENHA" (indicador visual do método de login actual) */
.aba {
  display: flex; background: rgba(255,255,255,.05); border-radius: 12px; /* faixa com fundo subtil */
  padding: 4px; margin-bottom: 20px; border: 1px solid rgba(255,255,255,.08); /* espaço interno e contorno */
}
.aba .seg {
  flex: 1; text-align: center; padding: 10px; border-radius: 9px; /* ocupa toda a largura disponível, texto centrado */
  font-weight: 700; font-size: .82rem; letter-spacing: .06em;      /* estilo do texto da aba */
  background: linear-gradient(135deg, #f5a623, #c2670a); color: #fff; /* fundo em degradê âmbar, texto branco */
  box-shadow: 0 6px 16px -8px rgba(194,103,10,.8);                   /* sombra colorida por baixo da aba */
}

/* Campos do formulário (utilizador / senha) */
.campo { margin-bottom: 16px; } /* espaço entre campos consecutivos */
.campo label { display: block; font-size: .78rem; color: var(--txt-suave); margin-bottom: 7px; font-weight: 600; } /* rótulo por cima do campo */
.shell {
  display: flex; align-items: center; gap: 10px;                        /* alinha ícone + campo de texto */
  background: rgba(255,255,255,.96); border-radius: 11px; padding: 0 12px; /* fundo quase branco, cantos arredondados */
  border: 1px solid transparent; transition: .2s;                        /* contorno invisível por omissão, anima ao focar */
}
.shell:focus-within { border-color: var(--marca-clara); box-shadow: 0 0 0 4px rgba(245,166,35,.2); } /* destaque quando o campo tem foco */
.shell .bi { color: #78716c; font-size: 1.05rem; } /* cor/tamanho do ícone dentro do campo */
.shell input {
  flex: 1; border: 0; outline: 0; background: transparent; color: #1f1d1b; /* campo ocupa o espaço restante, sem contorno próprio */
  padding: 13px 0; font-size: .95rem;                                      /* espaço vertical e tamanho do texto */
}
.shell input::placeholder { color: #94a3b8; } /* cor do texto de exemplo (placeholder) */
/* Selector de empresa (multi-empresa): mesmo visual do input, sem contorno proprio */
.shell select {
  flex: 1; border: 0; outline: 0; background: transparent; color: #1f1d1b; /* ocupa o espaco restante, sem contorno proprio (igual ao input acima) */
  padding: 13px 0; font-size: .95rem; appearance: none;                    /* espaco vertical/tamanho igual ao input; remove a seta nativa do browser */
}
/* Remove o fundo amarelo que o Chrome/Safari aplicam ao preenchimento automático (autofill) */
.shell input:-webkit-autofill,
.shell input:-webkit-autofill:hover,
.shell input:-webkit-autofill:focus,
.shell input:-webkit-autofill:active {
  -webkit-text-fill-color: #1f1d1b !important;               /* força a cor do texto autopreenchido */
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;     /* "pinta" o fundo de branco por cima do amarelo */
          box-shadow: 0 0 0 1000px #fff inset !important;     /* mesma técnica, sintaxe sem prefixo */
  caret-color: #1f1d1b;                                       /* cor do cursor de texto */
  border-radius: 11px;                                        /* mantém os cantos arredondados do campo */
  transition: background-color 6000s ease-in-out 0s;          /* atraso enorme = impede o Chrome de reaplicar o amarelo */
}
.toggle-pw { background: none; border: 0; color: #78716c; cursor: pointer; font-size: 1.05rem; display: flex; padding: 4px; } /* botão de mostrar/esconder senha */
.toggle-pw:hover { color: #d97706; } /* cor ao passar o rato por cima */

/* Botão "Entrar" */
.btn-entrar {
  width: 100%; border: 0; border-radius: 12px; padding: 14px; cursor: pointer; /* ocupa toda a largura, cantos arredondados */
  font-weight: 700; font-size: .98rem; color: #fff; margin-top: 4px;            /* texto do botão */
  background: linear-gradient(135deg, #f5a623, #d97706 55%, #c2670a);          /* degradê âmbar da marca */
  box-shadow: 0 16px 34px -12px rgba(194,103,10,.85); transition: .2s;         /* sombra + animação suave */
}
.btn-entrar:hover  { filter: brightness(1.08); transform: translateY(-1px); } /* efeito ao passar o rato: mais brilho, sobe ligeiramente */
.btn-entrar:active { transform: translateY(0); }                              /* volta à posição normal ao clicar */

/* Link "Esqueci-me da senha" */
.esqueci {
  display: block; text-align: center; margin-top: 16px; color: var(--marca-clara); /* texto centrado, cor de destaque */
  font-size: .85rem; text-decoration: none; background: none; border: 0; cursor: pointer; width: 100%; /* aparência de link/botão */
}
.esqueci:hover { text-decoration: underline; } /* sublinhado ao passar o rato */

/* Rodapé e dica de utilização */
.rodape { text-align: center; margin-top: 24px; font-size: .72rem; color: var(--txt-suave); letter-spacing: .04em; } /* rodapé "powered by" */
.rodape strong { color: var(--txt); } /* destaque do nome dentro do rodapé */
.dica { text-align: center; color: var(--txt-suave); font-size: .74rem; margin-top: 14px; line-height: 1.5; } /* dica sobre como entrar (operador/cliente) */

/* ---- TOASTS (avisos flutuantes, usados por outras páginas que reutilizam este estilo) ---- */
.toasts { position: fixed; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 1080; } /* contentor no canto inferior direito */
.toast-mini {
  background: #fff; color: #1f1d1b; border: 1px solid #e2e8f0; border-left: 4px solid #1b89c4; /* cartão branco com barra colorida à esquerda (azul = categoria "informação", distinta do âmbar já usado no aviso) */
  padding: 12px 16px; border-radius: 10px; box-shadow: 0 12px 28px -10px rgba(0,0,0,.45);        /* espaço interno e sombra */
  font-size: 13.5px; min-width: 260px; max-width: 340px;                                          /* tamanho do texto e largura do toast */
  display: flex; align-items: center; gap: 10px; animation: toastEntra .25s ease;                 /* alinha ícone+texto, anima a entrada */
}
.toast-mini .bi          { font-size: 18px; color: #1b89c4; }   /* ícone por omissão (informação) — mantido azul para não colidir com a cor de aviso (âmbar) */
.toast-mini.success      { border-left-color: #10b981; }        /* barra verde — sucesso */
.toast-mini.success .bi  { color: #10b981; }                    /* ícone verde — sucesso */
.toast-mini.error        { border-left-color: #ef4444; }        /* barra vermelha — erro */
.toast-mini.error .bi    { color: #ef4444; }                    /* ícone vermelho — erro */
.toast-mini.warn         { border-left-color: #f59e0b; }        /* barra laranja — aviso */
.toast-mini.warn .bi     { color: #f59e0b; }                    /* ícone laranja — aviso */
/* Animação de entrada do toast: desliza da direita e aparece */
@keyframes toastEntra {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: none; }
}

/* ── Nome da empresa abaixo do título ── */
#nomeEmpresaLogin {
  margin-top: 6px;              /* espaço acima do nome */
  font-size: .82rem;            /* tamanho de letra pequeno */
  font-weight: 700;             /* texto a negrito */
  letter-spacing: .06em;        /* espaçamento entre letras */
  color: var(--marca-clara);     /* cor de destaque (âmbar) */
  min-height: 1em;              /* reserva espaço mesmo antes de o nome carregar (evita "saltos" no layout) */
}