/* ===== VARIÁVEIS CSS ===== */
:root {
    /* Cores principais - Tema moderno glassmorphism */
    --primary-bg: #f0f4ff;
    --secondary-bg: #ffffff;
    --primary-color: #0088cc;
    --secondary-color: #006699;
    --tertiary-color: #0083e0;
    
    /* Cores de texto */
    --text-primary: #1e1a1a;
    --text-secondary: #666666;
    --text-light: #ffffff;
    --text-muted: #999999;
    --text-dark: #1e1a1a;
    
    /* Cores de borda */
    --border-color: #e1e5e9;
    --border-focus: #0088cc;
    --border-light: #f0f0f0;
    
    /* Cores de mensagens */
    --error-bg: #ffebee;
    --error-color: #c62828;
    --error-border: #ffcdd2;
    --success-bg: #e8f5e8;
    --success-color: #2e7d32;
    --success-border: #c8e6c9;
    
    /* Cores de força da senha */
    --password-weak: #d32f2f;
    --password-medium: #f57c00;
    --password-strong: #388e3c;
    
    /* Sombras */
    --shadow-light: rgba(0, 0, 0, 0.05);
    --shadow-medium: rgba(0, 136, 204, 0.3);
    
    /* Gradientes */
    --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    
    /* Tamanhos */
    --container-max-width: 600px;
    --container-max-width-small: 500px;
    --border-radius: 12px;
    --border-radius-small: 8px;
    --border-radius-input: 8px;
    
    /* Espaçamentos */
    --padding-large: 40px 30px;
    --padding-medium: 30px 20px;
    --padding-small: 15px;
    --margin-large: 30px;
    --margin-medium: 20px;
    --margin-small: 10px;
    
    /* Fontes */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Poppins', sans-serif;
    --font-size-large: 1.8rem;
    --font-size-medium: 1rem;
    --font-size-small: 0.95rem;
    --font-size-xs: 0.85rem;
    
    /* Transições */
    --transition-fast: 0.2s;
    --transition-medium: 0.3s;
}

/* ===== RESET E BASE ===== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    width: 100%;
    height: 100%;
}

/* ===== SELEÇÃO DE TEXTO ===== */
::selection {
    background-color: #ff8c00;
    color: #000000;
}

::-moz-selection {
    background-color: #ff8c00;
    color: #000000;
}

body {
  margin: 0;
  min-height: 100vh;
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Inter, sans-serif;
}

/* ===== SCENE CONTAINER ===== */
.scene {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* FUNDO com gradiente */
.scene::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        1200px circle at 15% 15%,
        #0085FF 0%,
        #003465 65%
    );
    box-shadow: 
        inset 22px 35px 91px rgba(0, 0, 0, 0.10),
        inset 89px 139px 165px rgba(0, 0, 0, 0.09);
    z-index: 1;
}

/* ===== BACKGROUND VECTORS LAYER ===== */
.bg-vectors {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: visible;
}

/* ===== SVG DECORATIVO ===== */
.decorative-svg {
    position: absolute;
    width: clamp(280px, 30vw, 480px);
    height: auto;
    right: -8%;
    bottom: -10%;
    opacity: 0.8;
    mix-blend-mode: screen;
    pointer-events: none;
}

.blob {
    position: absolute;
    mix-blend-mode: screen;
    pointer-events: none;
    object-fit: contain;
}

.blob-1 {
    width: clamp(140px, 16vw, 280px);
    height: clamp(140px, 16vw, 280px);
    left: -8%;
    top: 5%;
    opacity: 0.72;
    animation: float 15s ease-in-out infinite;
}

.blob-2 {
    width: clamp(180px, 20vw, 340px);
    height: clamp(180px, 20vw, 340px);
    right: -5%;
    top: 15%;
    opacity: 0.68;
    animation: float 20s ease-in-out infinite 2s;
}

.blob-3 {
    width: clamp(160px, 20vw, 320px);
    height: clamp(160px, 20vw, 320px);
    left: 8%;
    bottom: -8%;
    opacity: 0.63;
    animation: float 18s ease-in-out infinite 4s;
}

.blob-4 {
    width: clamp(130px, 15vw, 260px);
    height: clamp(130px, 15vw, 260px);
    right: -4%;
    bottom: 18%;
    opacity: 0.58;
    animation: float 22s ease-in-out infinite 6s;
}

.blob-5 {
    width: clamp(150px, 18vw, 300px);
    height: clamp(150px, 18vw, 300px);
    right: 25%;
    top: -5%;
    opacity: 0.65;
    animation: float 26s ease-in-out infinite 2s;
}

.blob-6 {
    width: clamp(145px, 17vw, 290px);
    height: clamp(145px, 17vw, 290px);
    left: 30%;
    top: 35%;
    opacity: 0.6;
    animation: float 24s ease-in-out infinite 4s;
}

.blob-7 {
    width: clamp(135px, 16vw, 270px);
    height: clamp(135px, 16vw, 270px);
    right: 35%;
    bottom: 5%;
    opacity: 0.62;
    animation: float 28s ease-in-out infinite 1s;
}

.blob-8 {
    width: clamp(125px, 14vw, 250px);
    height: clamp(125px, 14vw, 250px);
    left: 20%;
    bottom: 30%;
    opacity: 0.58;
    animation: float 25s ease-in-out infinite 3s;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0);
    }
    33% {
        transform: translate(30px, -50px);
    }
    66% {
        transform: translate(-20px, 20px);
    }
}


.login-title {
    text-align: start;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1.4rem;
    letter-spacing: 0.4px;
}

/* ===== SHADOW WRAPPER ===== */
.shadow-wrapper {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    
    filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.25));
}

/* ===== LOGIN WRAPPER ===== */
.login-wrapper {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}



/* ===== CARD DE LOGIN (GLASSMORPHISM) ===== */
.login-card {
    width: 600px;
    height: 650px;
    padding: 40px 70px 100px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 24px;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px; 
}

.login-card::before {
content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(145deg, rgb(255 255 255 / 0%), rgba(255, 255, 255, 0.05));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 6px;
}

.login-logo img {
  height: 52px;
}

.logo-section {
  padding: 20px 16px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  transition: all 0.5s ease;
  cursor: pointer;
}

.logo-image {
  height: 60px;
  width: auto;
  object-fit: contain;
}

.logo-text {
  line-height: 1.375;
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  color: #ffffff;
  font-size: 1.75rem;
  font-weight: 700;
  transition: all 0.5s ease;
}

.login-input {
  height: 42px;
  padding: 0 14px;

  border-radius: 10px;
  border: none;

  font-size: 14px;
  color: #0f172a;

  background: rgba(255, 255, 255, 0.95);
}

.login-input::placeholder {
  color: #94a3b8;
}

.login-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.35);
}

/* ===== TÍTULO LOGIN ===== */
.login-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 4px;
}
/* ===== FORMULÁRIO ===== */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ===== GRUPOS DE FORMULÁRIO ===== */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ===== LABELS ===== */
.form-label {
    font-size: 15px;
    font-weight: 500;
    font-family: Gilroy-Medium;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2px;
    display: block;
}

/* ===== INPUTS ===== */
.form-input {
    height: 42px;
    width: 100%;
    padding: 0 14px;
    font-size: 14px;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-family: var(--font-family);
    transition: all var(--transition-medium) ease;
    outline: none;
}

.form-input::placeholder {
    color: rgba(15, 23, 42, 0.5);
}

.form-input:focus {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}

/* ===== LINK FORGOT PASSWORD ===== */
.forgot-password-link {
    text-align: left;
    margin-top: 6px;
    margin-bottom: 22px;
}

.forgot-password-link a {
    font-size: 14px;
    font-family: sans-serif;
    color: rgba(255, 255, 255, 0.946);
    text-decoration: none;
    transition: color var(--transition-fast) ease;
}

.forgot-password-link a:hover {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
}

/* ===== BOTÃO SIGN IN ===== */
.btn-signin {
height: 44px;
    width: 100%;
    /* border-radius: 14px; */
    background: #003465;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: all 200ms ease;
    margin-bottom: 14px;
}

.btn-signin:active {
    transform: translateY(0);
}

/* ===== DIVISOR ===== */
.divider {
    position: relative;
    margin: 4px 24px 14px 24px;
    text-align: center;
}

.divider span {
    font-size: 11px;
    color: #fff;
    padding: 0 12px;
    position: relative;
    z-index: 2;
    display: inline-block;
}



/* ===== BOTÕES SOCIAL ===== */
.social-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 26px;
}

.social-btn {
    width: 44px;
    height: 36px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-fast) ease;
}

.social-btn:hover {
    transform: scale(1.08);
}

.social-btn svg,
.social-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ===== TEXTO DE REGISTRO ===== */
.register-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

.register-text a {
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-fast) ease;
}

.register-text a:hover {
    text-decoration: underline;
}

/* ===== MENSAGENS DE LOGIN ===== */
.login-message {
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 13px;
    text-align: center;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-error {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.message-success {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

/* ===== FORÇA DA SENHA (Legacy - manter compatibilidade) ===== */
.password-strength {
    margin-top: 5px;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.password-strength.weak { 
    color: var(--password-weak); 
}

.password-strength.medium { 
    color: var(--password-medium); 
}

.password-strength.strong { 
    color: var(--password-strong); 
}

/* ===== LOADING ===== */
.loading {
    display: none;
    margin-left: var(--margin-small);
}

.loading.show {
    display: inline-block;
}

/* ===== LINKS (Legacy) ===== */
.link { 
    text-align: center; 
    margin-top: 15px; 
    font-size: var(--font-size-small); 
}

.link span{ 
    color: var(--text-primary); 
    text-decoration: none; 
}

.link a { 
    color: var(--text-primary); 
    text-decoration: none; 
}

.link a:hover { 
    text-decoration: underline; 
}

/* ===== CONTAINER LEGACY (compatibilidade) ===== */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: var(--margin-medium) auto;
    background: var(--secondary-bg);
    padding: var(--padding-large);
    border-radius: var(--border-radius);
    text-align: center;
}

.container-small {
    max-width: var(--container-max-width-small);
}

/* ===== RESPONSIVO ===== */
@media (max-width: 480px) {
    .login-card {
        width: 90%;
        height: auto;
        max-width: 100%;
        min-height: auto;
        padding: 28px;
    }

    .login-logo img {
        max-height: 44px;
    }

    .login-title {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .form-input {
        height: 40px;
        font-size: 13px;
        padding: 0 12px;
    }

    .btn-signin {
        height: 42px;
        font-size: 13px;
        margin-bottom: 20px;
    }

    .divider span {
        font-size: 10px;
    }

    .social-buttons {
        gap: 10px;
        margin-bottom: 20px;
    }

    .social-btn {
        width: 40px;
        height: 34px;
    }

    .register-text {
        font-size: 11px;
        margin-top: 20px;
    }

    .forgot-password-link {
        margin-bottom: 16px;
    }

    .forgot-password-link a {
        font-size: 11px;
    }

    .login-form {
        gap: 12px;
    }

    .container { 
        padding: var(--padding-medium); 
        margin: var(--margin-small); 
        border-radius: var(--border-radius-input);
    }
    
    .logo img { 
        width: 260px; 
    }
    
    .logo h2 { 
        font-size: 1.5rem; 
    }
    
    .button_submit, .button_back, .button_secondary { 
        font-size: var(--font-size-small); 
        padding: 12px; 
    }
    
    .input-icon input { 
        font-size: var(--font-size-small); 
        padding: 12px 12px 12px 45px;
    }
    
    .button_group {
        flex-direction: column;
        gap: var(--margin-small);
    }
    
    .button_group .button_secondary {
        width: 100%;
    }
}

@media (max-width: 360px) {
    .login-card {
        height: auto;
        width: 95%;
        padding: 20px;
        min-height: auto;
    }

    .login-logo img {
        max-height: 45px;
    }

    .login-title {
        font-size: 16px;
        margin-bottom: 18px;
    }

    .form-input {
        height: 38px;
        font-size: 12px;
    }

    .social-btn {
        width: 44px;
        height: 34px;
    }

    .social-btn svg {
        width: 16px;
        height: 16px;
    }
}