/* ============================================================
   Portal iS — Folha de estilo do Login (v2)
   Substituição direta de login.css. Mantém todas as classes.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=Roboto:wght@300;400;500&display=swap');

:root {
    --brand:        #039192;
    --brand-dark:   #016d6e;
    --brand-light:  #14c2c3;
    --brand-tint:   rgba(3, 145, 146, 0.12);
    --ink:          #131c1d;
    --muted:        #6a7779;
    --line:         #e4e8e8;
    --line-strong:  #cdd6d6;
    --danger:       #d6453c;
    --success:      #1f9d57;
    --card:         rgba(255, 255, 255, 0.86);
    --radius:       20px;
    --radius-sm:    11px;
    --shadow:
        0 1px 0 rgba(255,255,255,0.7) inset,
        0 30px 70px -24px rgba(2, 40, 40, 0.55),
        0 12px 30px -16px rgba(2, 40, 40, 0.35);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { outline: 0; box-sizing: border-box; }

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: 'Cairo', system-ui, sans-serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ---------- Vídeo de fundo ---------- */
.video-container {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}
.video-container video,
.video-container img {
    position: absolute;
    top: 50%; left: 50%;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    background: #0a1313;
}
/* Gradiente + vinheta para dar profundidade e contraste ao cartão */
.video-container::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(130% 100% at 50% -10%, rgba(20,194,195,0.22), transparent 55%),
        radial-gradient(120% 120% at 50% 120%, rgba(1,109,110,0.30), transparent 60%),
        linear-gradient(180deg, rgba(6,16,16,0.30), rgba(6,16,16,0.62));
}
/* Textura de grão subtil sobre todo o ecrã */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Contentor: centra um cartão ---------- */
.login-form {
    position: fixed;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: transparent;
}

/* O formulário é o cartão "glass" */
.login-form form {
    position: relative;
    display: grid;
    width: 100%;
    max-width: 392px;
    padding: 42px 34px 34px;
    background: var(--card);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    animation: card-in 0.6s var(--ease) both;
}
/* Barra de marca com brilho a percorrer */
.login-form form::before {
    content: "";
    margin-bottom:1rem;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-dark), var(--brand-light), var(--brand-dark));
    background-size: 200% 100%;
    animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: 200% 0; } }
@keyframes card-in {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Entrada escalonada dos elementos do cartão */
.login-form img,
.login-form .form-field {
    animation: rise 0.55s var(--ease) both;
}
.login-form img            { animation-delay: 0.10s; }
.login-form .form-field:nth-of-type(1) { animation-delay: 0.16s; }
.login-form .form-field:nth-of-type(2) { animation-delay: 0.22s; }
.login-form .form-field:nth-of-type(3) { animation-delay: 0.28s; }
.login-form .form-field:nth-of-type(4) { animation-delay: 0.34s; }
.login-form .form-field:nth-of-type(5) { animation-delay: 0.40s; }
@keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Logótipo ---------- */
.login-form img {
    width: 196px;
    margin: 2px auto 20px;
    filter: drop-shadow(0 6px 14px rgba(2,40,40,0.12));
}

/* ---------- Campos ---------- */
.form-field {
    width: 100%;
    max-width: none;
    margin: 7px 0;
    padding: 0;
    display: block;
}
.form-field h3 {
    margin: 0 0 6px;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -0.4px;
    text-align: center;
}
#desclog {
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}
.form-field p { line-height: 1.5; margin: 0 0 8px; }
.form-field label {
    display: block;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 7px;
}

/* ---------- Inputs ---------- */
.form-field input[type="text"],
.form-field input[type="password"] {
    display: block;
    width: 100%;
    font-size: 16px !important;
    letter-spacing: 0.3px;
    padding: 13px 15px;
    font-family: 'Roboto', sans-serif;
    color: var(--ink);
    background: rgba(255,255,255,0.9);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-sm);
    transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
}
.form-field input::placeholder { color: #aab2b2; }
.form-field input[type="text"]:hover,
.form-field input[type="password"]:hover { border-color: var(--brand-light); }
.form-field input[type="text"]:focus,
.form-field input[type="password"]:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-tint);
    background: #fff;
}
.form-field input:-webkit-autofill,
.form-field input:-webkit-autofill:hover,
.form-field input:-webkit-autofill:focus,
.form-field input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #fff inset !important;
    -webkit-text-fill-color: var(--ink) !important;
    transition: background-color 600000s 0s, color 600000s 0s;
    font-size: 16px;
}

/* Ícone mostrar/ocultar password */
.form-field i {
    position: relative;
    float: right;
    margin-top: -37px;
    margin-right: 13px;
    display: inline-block;
    font-size: 20px;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
    z-index: 3;
}
.form-field i:hover { color: var(--brand); transform: scale(1.08); }

/* ---------- Mensagem (#msg) ---------- */
#msg {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    margin: 8px 0 2px;
    padding: 11px 13px;
    border-radius: var(--radius-sm);
    background: rgba(214, 69, 60, 0.08);
    border: 1px solid rgba(214, 69, 60, 0.18);
    animation: msg-in 0.3s var(--ease) both;
}
@keyframes msg-in { from { opacity: 0; transform: translateY(-5px);} to { opacity: 1; transform: translateY(0);} }

/* ---------- Requisitos da password (chips) ---------- */
#letter, #number, #spch, #length, #dupl {
    display: inline-block;
    margin: 4px 6px 4px 0 !important;
    padding: 4px 11px 4px 25px;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 999px;
    line-height: 1.45;
    transition: all 0.2s var(--ease);
}
.valid   { color: var(--success); background: rgba(31,157,87,0.12); }
.valid:before   { position: absolute; margin-left: -18px; content: "✔"; }
.invalid { color: var(--danger);  background: rgba(214,69,60,0.08); }
.invalid:before { position: absolute; margin-left: -18px; content: "✕"; }

/* ---------- Links "Perdeu a password?" ---------- */
.login-form .lostpw {
    float: right;
    font-size: 13px;
    margin: 7px 0 2px;
    text-align: right;
    cursor: pointer;
}
.login-form .lostpw a {
    color: var(--brand-dark);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.login-form .lostpw a:hover { color: var(--brand); border-bottom-color: var(--brand); }

/* ---------- Checkbox "Manter-me conectado" ---------- */
.form-field input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 19px; height: 19px; min-width: 19px;
    border: 1.5px solid var(--line-strong);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.form-field input[type="checkbox"]:hover { border-color: var(--brand); }
.form-field input[type="checkbox"]:checked {
    background: linear-gradient(180deg, var(--brand-light), var(--brand));
    border-color: var(--brand);
    box-shadow: 0 2px 6px -2px rgba(3,145,146,0.6);
}
.form-field input[type="checkbox"]:checked::after {
    content: "✔";
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 12px; font-weight: 700;
}

/* ---------- Botões ---------- */
.login-form .bt {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Cairo', sans-serif;
    letter-spacing: 0.3px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: transform 0.12s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.login-form .bt.main {
    position: relative;
    color: #fff;
    background: linear-gradient(180deg, var(--brand-light) 0%, var(--brand) 100%);
    border: none;
    box-shadow: 0 10px 22px -10px rgba(3,145,146,0.75);
    margin-top: 8px;
    overflow: hidden;
}
/* Brilho que varre o botão ao passar o rato */
.login-form .bt.main::after {
    content: "";
    position: absolute;
    top: 0; left: -130%;
    width: 60%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
    transform: skewX(-18deg);
    transition: left 0.55s var(--ease);
}
.login-form .bt.main:hover {
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
    box-shadow: 0 14px 28px -10px rgba(3,145,146,0.85);
    transform: translateY(-1px);
}
.login-form .bt.main:hover::after { left: 130%; }
.login-form .bt.main:active { transform: translateY(0); box-shadow: 0 5px 12px -6px rgba(3,145,146,0.7); }
.login-form .bt.main i { font-size: 18px; }
.login-form .bt.main i .icon-inner { margin-top: 3px; }

.login-form .bt.sec {
    display: inline-block;
    text-align: center;
    margin: 8px 0 0;
    padding: 6px 0;
    background: transparent;
    border: none;
    text-decoration: none;
    color: var(--brand-dark);
}
.login-form .bt.sec:hover { color: var(--brand); }

/* ---------- Responsivo ---------- */
@media (max-width: 480px) {
    .login-form { padding: 16px; align-items: flex-end; padding-bottom: 26px; }
    .login-form form { max-width: 100%; padding: 32px 24px 28px; }
    .login-form img { width: 174px; }
    .form-field h3 { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
    .login-form form,
    .login-form img,
    .login-form .form-field,
    #msg { animation: none; }
    .login-form form::before { animation: none; }
    .login-form .bt.main:hover { transform: none; }
    .login-form .bt.main::after { display: none; }
}