:root {
  /* PALETA GMT (VERDE ESCURO + TONS NEUTROS) */
  --primary-h: 149;
  --primary-s: 100%;
  --primary-l: 27%; /* Verde principal, aprox #008a3d */

  --primary-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --primary-dark: #005924; /* Verde mais escuro para o botão */
  --primary-light: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 12%));

  --secondary-color: #5c5c5c; /* Cinza para substituir o amarelo */
  --secondary-dark: #333333;
  --secondary-light: #7a7a7a;

  --primary-rgba-10: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.10);
  --primary-rgba-20: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.20);
  --primary-rgba-35: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.35);

  --gradient-primary: linear-gradient(135deg, #008a3d, #007031); /* Fundo verde do painel direito */
  
  --gradient-energy: linear-gradient(135deg, #008a3d, #005924, #e9f7ef, #008a3d); /* Removido o amarelo */
  
  --gradient-soft: linear-gradient(135deg, rgba(0, 138, 61, 0.1), rgba(0, 138, 61, 0.03));

  --text-dark: #2c3e50;
  --text-medium: #5f6c7b;
  --text-light: #9aa5b1;
  --white: #ffffff;
  --error: #e74c3c;
  --success: #28a745;

  --shadow-light: 0 5px 15px rgba(0,0,0,0.05);
  --shadow-medium: 0 8px 30px rgba(0,0,0,0.1);
  --shadow-dark: 0 15px 50px rgba(0,0,0,0.15);

  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background: url('assets/background3.png') center center/cover no-repeat fixed;

  color: var(--text-dark);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  position: relative;
}



body::before{
content:"";
position:absolute;
top:-200px;
right:-200px;
width:500px;
height:500px;
background:radial-gradient(circle,rgba(255,193,7,0.25),transparent 70%);
filter:blur(60px);
z-index:0;
}



.container{
width:100%;
max-width:900px;
padding:20px;
position:relative;
z-index:10;
}

.login-container{
display:flex;
background-color:var(--white);
border-radius:20px;
box-shadow:var(--shadow-medium);
min-height:auto;
position:relative;
margin:20px 0;
}

/* Welcome Side */

.welcome-side{
flex:1;
background:var(--gradient-primary);
color:var(--white);
padding:25px;
display:flex;
flex-direction:column;
position:relative;
overflow:hidden;
}

.welcome-side::before{
content:"";
position:absolute;
width:300px;
height:300px;
background:radial-gradient(circle,rgba(255,255,255,0.2),transparent 70%);
top:-120px;
right:-120px;
}

.welcome-content{
position:relative;
z-index:2;
}

.welcome-side h1{
font-size:2.2rem;
margin-bottom:12px;
font-weight:700;
}

.welcome-side .highlight{
color:#053a1a;
position:relative;
display:inline-block;
}

.welcome-side .tagline{
font-size:1rem;
margin-bottom:25px;
opacity:0.9;
}

.character-container{
display:flex;
align-items:flex-start;
margin-bottom:30px;
transform:translateX(-20px);
opacity:0;
animation:slideIn .8s var(--transition-normal) forwards;
animation-delay:.5s;
}

.character{
flex:0 0 160px;
position:relative;
}

.character-img{
width:100%;
height:auto;
filter:drop-shadow(0 5px 15px rgba(0,0,0,.2));
animation:float 3s ease-in-out infinite;
}

.speech-bubble{
position:relative;
background-color:var(--white);
color:var(--text-dark);
padding:15px 20px;
border-radius:20px;
margin-left:15px;
max-width:280px;
box-shadow:var(--shadow-light);
}

.speech-bubble::before{
content:'';
position:absolute;
left:-10px;
top:20px;
border-width:10px 10px 10px 0;
border-style:solid;
border-color:transparent var(--white) transparent transparent;
}

.features{
display:flex;
flex-wrap:wrap;
gap:15px;
margin-top:20px;
}

.feature{
display:flex;
align-items:center;
background-color:rgba(255,255,255,.15);
padding:10px 15px;
border-radius:50px;
backdrop-filter:blur(5px);
transition:var(--transition-normal);
border:1px solid rgba(255,255,255,.2);
}

.feature:hover{
background-color:rgba(255,255,255,.25);
transform:translateY(-3px);
}

.feature i{
margin-right:8px;
font-size:1rem;
color:#fff;
}

.feature span{
font-size:.85rem;
font-weight:500;
}

/* Login */

.login-side{
flex:1;
padding:30px;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
}

.login-form-container{
width:100%;
max-width:400px;
display:flex;
flex-direction:column;
min-height:100%;
}

.logo-container{
display:flex;
justify-content:center;
margin:2px 0 2px;
position:relative;
}

.logo{
width:60%;
height:auto;
position:relative;
z-index:2;
}

.logo-animation{
position:absolute;
width:120px;
height:120px;
background:radial-gradient(circle,var(--primary-rgba-20),transparent 70%);
border-radius:50%;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:1;
animation:pulse 2s infinite;
}

.login-side h2{
text-align:center;
margin-bottom:30px;
font-weight:600;
font-size:1.5rem;
}

.login-form{
display:flex;
flex-direction:column;
gap:20px;
}

.input-group{
position:relative;
display:flex;
align-items:center;
}

.input-icon{
position:absolute;
left:15px;
color:var(--text-light);
}

.input-group input{
width:100%;
padding:15px 15px 15px 45px;
border:1px solid #e1e5ee;
border-radius:10px;
font-size:1rem;
background-color:#f9fafc;
transition:var(--transition-normal);
}

.input-group input:focus{
outline:none;
border-color:var(--primary-color);
background-color:var(--white);
}

.input-focus-effect{
position:absolute;
bottom:0;
left:0;
width:0;
height:2px;
background-color:var(--primary-color);
transition:var(--transition-normal);
}

.input-group input:focus + .input-focus-effect{
width:100%;
}

.toggle-password{
position:absolute;
right:15px;
background:none;
border:none;
color:var(--text-light);
cursor:pointer;
}

.form-options{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:5px;
font-size:.85rem;
}

.remember-me{
display:flex;
align-items:center;
}

.remember-me input{
appearance:none;
width:18px;
height:18px;
border:1px solid #e1e5ee;
border-radius:4px;
margin-right:8px;
cursor:pointer;
}

.remember-me input:checked{
background-color:var(--primary-color);
border-color:var(--primary-color);
}

.forgot-password{
color:var(--primary-color);
text-decoration:none;
}

.login-button {
    background: var(--primary-dark);
    color:white;
    border:none;
    padding:15px;
    border-radius:10px;
    font-size:1rem;
    font-weight:600;
    cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    transition:var(--transition-normal);
    position:relative;
    overflow:hidden;
    margin-top:10px;
}

.login-button:hover{
transform:translateY(-3px);
box-shadow:0 10px 20px var(--primary-rgba-35);
}

.login-footer{
margin-top:20px;
text-align:center;
font-size:.8rem;
color:var(--text-light);
padding-bottom:10px;
}

/* Animations */

@keyframes pulse{
0%{transform:translate(-50%,-50%) scale(.8);opacity:.5}
50%{transform:translate(-50%,-50%) scale(1);opacity:.3}
100%{transform:translate(-50%,-50%) scale(.8);opacity:.5}
}

@keyframes float{
0%{transform:translateY(0)}
50%{transform:translateY(-10px)}
100%{transform:translateY(0)}
}

@keyframes slideIn{
0%{transform:translateX(-20px);opacity:0}
100%{transform:translateX(0);opacity:1}
}

/* Responsive */

@media (max-width:992px){

.login-container{flex-direction:column}

}

@media (max-width:768px){

.login-container{flex-direction:column-reverse}

.welcome-side{display:none}

.login-side{
padding:30px;
background:var(--gradient-soft);
}

}

@media (max-width:576px){

.container{padding:10px}

.login-container{
border-radius:15px;
box-shadow:var(--shadow-light)
}

.login-side{padding:20px}

}

/* Animated Background */

.animated-bg{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
overflow:hidden;
}

/* WAVES */

.wave{
position:absolute;
bottom:-15px;
left:0;
width:100%;
height:120px;
background:url('assets/wave.svg');
background-size:1000px 120px;
filter:brightness(1.1) saturate(1.2);
}

.wave1{
animation:animate 30s linear infinite;
z-index:1000;
opacity:.45;
}

.wave2{
animation:animate2 18s linear infinite;
z-index:999;
opacity:.35;
}

.wave3{
animation:animate 35s linear infinite;
z-index:998;
opacity:.25;
}

/* ENERGY ICONS FLOATING */

.floating-shapes{
position:absolute;
width:100%;
height:100%;
}

.shape {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-rgba-20), rgba(255, 255, 255, 0.1));
  bottom: -100px;
  animation: floatUp 18s linear infinite;
  backdrop-filter: blur(3px);
}

.shape i {
  font-size: 1.4rem;
  color: var(--primary-light); /* Remove o amarelo e usa o verde da paleta */
  opacity: .85;
}

/* POSIÇÕES */

.shape1{
left:10%;
width:60px;
height:60px;
animation-delay:0s;
animation-duration:22s;
}

.shape2{
left:30%;
width:50px;
height:50px;
animation-delay:5s;
animation-duration:18s;
}

.shape3{
left:60%;
width:70px;
height:70px;
animation-delay:8s;
animation-duration:24s;
}

.shape4{
left:80%;
width:55px;
height:55px;
animation-delay:2s;
animation-duration:20s;
}

/* ANIMAÇÕES */

@keyframes animate{
0%{background-position-x:0}
100%{background-position-x:1000px}
}

@keyframes animate2{
0%{background-position-x:0}
100%{background-position-x:-1000px}
}

@keyframes floatUp{
0%{
transform:translateY(0) rotate(0deg);
opacity:0;
}

10%{
opacity:1;
}

100%{
transform:translateY(-2000px) rotate(360deg);
opacity:0;
}
}