/* ------------------------------------------------------------------
   Aqua-Info — identidade "app" (navy/azul/ciano) aplicada ao login e
   à recuperação de password. Espelha as variáveis, gradientes e
   tratamento de sombras/tipografia usados em aqua-info.net/site/app
   (ficheiro css/theme-intro.css desse site), para que estas páginas
   públicas se sintam parte do mesmo produto.
   Carregado DEPOIS de login-1.css e de /_inc/_css/style.css — só
   redesenha cores/tipografia/sombras, nunca a estrutura/JS (login.js).
------------------------------------------------------------------- */

:root {
    --ai-navy-950: #050b1f;
    --ai-navy-900: #071033;
    --ai-brand-700: #07319b;
    --ai-brand-500: #1450d6;
    --ai-accent-400: #22d3ee;
    --ai-accent-300: #5eead4;
    --ai-paper-soft: #f2f7ff;
    --ai-radius-lg: 28px;
    --ai-shadow-soft: 0 24px 60px -24px rgba(7, 20, 60, .35);
    --ai-shadow-btn: 0 14px 30px -12px rgba(20, 80, 214, .55);
    --ai-ease: cubic-bezier(.22, .68, 0, 1.01);
}

body {
    font-family: 'Poppins', sans-serif;
}

/* ---------- Painel de marca (aside) ---------- */

.backgroundAquainfo {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(120% 140% at 15% 0%, #0c1c52 0%, var(--ai-navy-950) 55%, #020614 100%);
}

.backgroundAquainfo .hero__aurora {
    position: absolute;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
}

.backgroundAquainfo .hero__aurora span {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .55;
    animation: aiDrift 22s ease-in-out infinite;
}

.backgroundAquainfo .hero__aurora span:nth-child(1) {
    width: 60vh;
    height: 60vh;
    top: -12%;
    left: -10%;
    background: radial-gradient(circle, var(--ai-brand-500), transparent 70%);
}

.backgroundAquainfo .hero__aurora span:nth-child(2) {
    width: 50vh;
    height: 50vh;
    bottom: -16%;
    right: -12%;
    background: radial-gradient(circle, var(--ai-accent-400), transparent 70%);
    animation-duration: 26s;
    animation-delay: -6s;
}

@keyframes aiDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(4%, -6%) scale(1.08); }
}

.backgroundAquainfo .hero__bubbles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.backgroundAquainfo .hero__bubbles span {
    position: absolute;
    bottom: -10%;
    display: block;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .05) 70%);
    border: 1px solid rgba(255, 255, 255, .25);
    animation: aiRise linear infinite;
}

@keyframes aiRise {
    from { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: .8; }
    90%  { opacity: .5; }
    to   { transform: translateY(-115vh) translateX(30px); opacity: 0; }
}

.backgroundAquainfo .hero__bubbles span:nth-child(1) { left: 12%; width: 14px; height: 14px; animation-duration: 14s; animation-delay: -2s; }
.backgroundAquainfo .hero__bubbles span:nth-child(2) { left: 28%; width: 8px;  height: 8px;  animation-duration: 10s; animation-delay: -6s; }
.backgroundAquainfo .hero__bubbles span:nth-child(3) { left: 47%; width: 18px; height: 18px; animation-duration: 17s; animation-delay: -1s; }
.backgroundAquainfo .hero__bubbles span:nth-child(4) { left: 65%; width: 10px; height: 10px; animation-duration: 12s; animation-delay: -9s; }
.backgroundAquainfo .hero__bubbles span:nth-child(5) { left: 82%; width: 15px; height: 15px; animation-duration: 15s; animation-delay: -4s; }

.backgroundAquainfo .kt-grid__item { position: relative; z-index: 2; }

.backgroundAquainfo .kt-login__logo img {
    filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .45));
    animation: aiFloat 5s ease-in-out infinite;
}

@keyframes aiFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.kt-login.kt-login--v1 .kt-login__aside .kt-login__title {
    font-weight: 700;
    background: linear-gradient(100deg, #ffffff 40%, var(--ai-accent-300));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.kt-login.kt-login--v1 .kt-login__aside .kt-login__subtitle {
    font-weight: 300;
    color: rgba(255, 255, 255, .82);
}

.backgroundAquainfo .copy-right {
    color: rgba(255, 255, 255, .6);
}

.backgroundAquainfo .kt-login__info .kt-login__copyright {
    color: rgba(255, 255, 255, .4);
}

@media (prefers-reduced-motion: reduce) {
    .backgroundAquainfo .kt-login__logo img,
    .backgroundAquainfo .hero__aurora span,
    .backgroundAquainfo .hero__bubbles span {
        animation: none !important;
    }
}

/* ---------- Painel do formulário ---------- */

.kt-login.kt-login--v1 .kt-login__wrapper {
    background: var(--ai-paper-soft);
}

.kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form {
    background: #fff;
    border-radius: var(--ai-radius-lg);
    box-shadow: var(--ai-shadow-soft);
    padding: 3rem 3.5rem;
    /* .kt-login__form já tem width:100% (login-1.css) sem padding próprio —
       box-sizing: border-box garante que este padding novo entra dentro
       desses 100% em vez de somar e empurrar o cartão para fora do ecrã
       em mobile (onde a largura disponível é mais apertada). */
    box-sizing: border-box;
}

/* Inputs — a especificidade da regra original (encadeada até
   .form-control) obriga a !important aqui; fica contido a esta
   página, nunca sai do contexto .kt-login. */
.kt-login .form-control {
    border-radius: 12px !important;
    height: 52px !important;
    box-shadow: none !important;
}

.kt-login .form-control:focus {
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .25) !important;
}

.kt-login .kt-login__link-forgot {
    color: var(--ai-brand-500);
}

.kt-login .kt-login__link-forgot:hover {
    color: var(--ai-accent-400);
}

.kt-login .btn-primary {
    background: var(--ai-brand-700);
    border: 0;
    border-radius: 999px;
    box-shadow: var(--ai-shadow-btn);
    transition: transform .35s var(--ai-ease), box-shadow .35s var(--ai-ease), filter .35s var(--ai-ease);
}

.kt-login .btn-primary:hover,
.kt-login .btn-primary:focus,
.kt-login .btn-primary:active {
    transform: translateY(-2px);
    filter: brightness(0.88);
    box-shadow: 0 20px 40px -14px rgba(20, 80, 214, .65);
}

/* Fica dentro de .kt-login__form, que é branco — precisa de um tom
   distinto (não branco) para não desaparecer contra esse fundo. */
.kt-login .btn-secondary {
    border: 0;
    border-radius: 999px;
    background: var(--ai-paper-soft);
    color: var(--ai-navy-900);
    box-shadow: none;
}

.kt-login .btn-secondary:hover {
    background: #e4edff;
    color: var(--ai-brand-700);
}

@media (max-width: 1024px) {
    .kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form {
        padding: 2.25rem 1.75rem;
    }
}