﻿
/*body {
    background-color: #0f1b1d;
    color: white;
    font-family: 'Segoe UI', sans-serif;
}*/

body {
    font-family: 'PT Sans', 'Inter', sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: white;
    min-height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e8f0 50%, #d0f0ff 100%);
}

/* Garantir que inputs, labels e botões usem a mesma fonte */
.login-box,
.login-box input,
.login-box button,
.login-box label,
.login-box small {
    font-family: 'PT Sans', 'Inter', sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}


/*Register*/

.register-container {
    min-height: 100vh;
}

.register-box {
    background-color: #18292b;
    padding: 2.5rem;
    border-radius: 1rem;
    box-shadow: 0 0 20px rgba(0, 255, 200, 0.05);
    max-width: 500px;
    width: 100%;
}

    .register-box input {
        background-color: #111;
        color: #fff;
        border-color: #2c3e50;
    }

        .register-box input::placeholder {
            color: #aaa;
        }

    .register-box button {
        background-color: #00ffc8;
        border: none;
        color: #000;
        font-weight: 600;
    }

        .register-box button:hover {
            background-color: #00dab0;
        }

        /*FIM REGISTER*/

        /*FORGOT*/
.forgot-container {
    min-height: 100vh;
}

.forgot-box {
    background-color: #18292b;
    padding: 2.5rem;
    border-radius: 1rem;
    box-shadow: 0 0 20px rgba(0, 255, 200, 0.05);
    max-width: 500px;
    width: 100%;
}

    .forgot-box input[type="email"] {
        background-color: #111;
        color: #fff;
        border-color: #2c3e50;
    }

        .forgot-box input[type="email"]::placeholder {
            color: #aaa;
        }

    .forgot-box button {
        background-color: #00ffc8;
        border: none;
        color: #000;
        font-weight: 600;
    }

        .forgot-box button:hover {
            background-color: #00dab0;
        }

/*FIM FORGOT*/

/*LOGIN OLD*/
/*.login-container {
    min-height: 100vh;
}

.login-box {
    background-color: #18292b;
    padding: 2.5rem;
    border-radius: 1rem;
    box-shadow: 0 0 20px rgba(0, 255, 200, 0.05);
    max-width: 400px;
    width: 100%;
}

    .login-box input {
        background-color: #111;
        color: #fff;
        border-color: #2c3e50;
    }

        .login-box input::placeholder {
            color: #aaa;
        }

    .login-box button {
        background-color: #00dab0;
        border: none;
        color: #000;
        font-weight: 600;
    }

        .login-box button:hover {
            background-color: #00ffc8;
        }
*//*FIM LOGIN*/

  /*LOGIN*/

.login-container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-box {
    background-color: #18292b;
    padding: 2.5rem;
    border-radius: 1rem;
    box-shadow: 0 0 20px rgba(0, 255, 200, 0.05);
    max-width: 400px;
    width: 100%;
}

    .login-box input.form-control {
        background-color: #111;
        color: #fff;
        border: 2px solid #243431;
        padding-left: 2.5rem;
        border-radius: 0.5rem;
        transition: border-color 0.3s;
        outline: none;
    }

        .login-box input.form-control:focus,
        .login-box input.form-control:hover {
            background-color: #111;
            border-color: #01be95;
            outline: none;
            color: #fff;
        }

        /* Remove borda azul/estilo antigo quando há valor */
        .login-box input.form-control:valid,
        .login-box input.form-control:invalid,
        .login-box input.form-control:not(:placeholder-shown) {
            border-color: #2e3c3c;
            box-shadow: none;
        }

        .login-box input.form-control:focus:valid,
        .login-box input.form-control:focus:invalid {
            border-color: #34ab94;
        }
/* Ícones dentro dos inputs */
.input-icon {
    position: relative;
}

    .input-icon i {
        position: absolute;
        left: 10px;
        top: 70%;
        transform: translateY(-50%);
        color: transparent; /* fundo transparente */
        -webkit-text-stroke: 1px #fff; /* contorno branco */
        pointer-events: none;
        font-size: 0.9rem;
    }

/* Autofill do Chrome */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #111 inset !important;
    -webkit-text-fill-color: #fff !important;
    transition: background-color 5000s ease-in-out 0s;
}

    input:-webkit-autofill:focus {
        border-color: #34ab94;
    }

.login-box button {
    background-color: #34ab94;
    border: none;
    color: #fff;
    font-weight: 500;
    transition: background-color 0.3s;
}

    .login-box button:hover {
        background-color: #01be95;
    }

.logo img {
    max-width: 120px;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #fff;
}

.btn-flat {
    background-color: transparent; /* sem fundo */
    border: none; /* sem borda */
    color: #fff; /* cor do texto */
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    transition: box-shadow 0.3s, background-color 0.3s;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

    .btn-flat:hover {        
        background-color: #111; /* sombra leve sobre o fundo */
        box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* sombra maior para contraste */
        color: #fff;
    }

    /* Estilo para botão de submit e botões flat ao receber foco */
    .login-box button:focus,
    .btn-flat:focus {
        outline: 2px solid #34ab94; /* contorno verde como destaque */
        outline-offset: 2px;
        box-shadow: 0 0 8px rgba(0, 255, 200, 0.5); /* leve glow para indicar foco */
    }

    /* Mantém o botão flat com fundo transparente, mas com sombra no hover/focus */
    .btn-flat:focus {
        background-color: rgba(0,0,0,0.1);
    }

  /*FIM LOGIN*/

.logo img {
    max-width: 120px;
}
.btn-account {
    background-color: #00ffc8;
    border: none;
    color: #000;
    font-weight: 600;
}
.btn-account:hover {
    background-color: #00dab0;    
    color: #fff;    
}
