@import url("/assets/css/style.css");

        
        /* ===== VARIÁVEIS ===== */
        :root {
            --theme-login: #80BF4E;
            --theme-login-darken: #2da842;
            --theme-login-background: #f9f9f9;
            --theme-dark: #212121;
            --theme-light: #e3e3e3;
            --theme-signup: #38BBE1;
            --theme-signup-darken: #0288D1;
            --theme-signup-background: #2C3034;
        }
        /* ===== RESET ===== */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            margin: 0;
            height: 100vh;
            overflow: hidden;
            width: 100%;
            font-family: var(--font-default);
            background: #2C3034;
        }
        /* ===== BACKGROUND ===== */
        #back {
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: -999;
        }
        .backRight {
            position: absolute;
            right: 0;
            width: 50%;
            height: 100%;
            background: var(--theme-signup);
        }
        .backLeft {
            position: absolute;
            left: 0;
            width: 50%;
            height: 100%;
            background: var(--theme-login);
        }
        .canvas-back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
            pointer-events: none;
        }
        /* ===== SLIDEBOX ===== */
        #slideBox {
            width: 50%;
            max-height: 100%;
            height: 100%;
            overflow: hidden;
            margin-left: 50%;
            position: absolute;
            box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
            z-index: 20;
            transition: margin-left 0.6s cubic-bezier(0.77, 0, 0.175, 1);
        }
        .topLayer {
            width: 200%;
            height: 100%;
            position: relative;
            left: 0;
            left: -100%;
            transition: margin-left 0.6s cubic-bezier(0.77, 0, 0.175, 1);
        }
        /* ===== LADOS ===== */
        .left, .right {
            width: 50%;
            height: 100%;
            overflow-y: auto;
            position: absolute;
            padding: 20px 0;
        }
        .left {
            background: var(--theme-signup-background);
            left: 0;
        }
        .right {
            background: var(--theme-login-background);
            right: 0;
        }
        /* ===== LABELS E INPUTS ===== */
        label {
            font-size: 0.8em;
            text-transform: uppercase;
            font-weight: 500;
            letter-spacing: 0.5px;
        }
        input {
            background-color: transparent;
            border: 0;
            outline: 0;
            font-size: 1em;
            padding: 8px 1px;
            margin-top: 0.1em;
            width: 100%;
        }
        .left label { color: var(--theme-light); }
        .left input {
            border-bottom: 1px solid var(--theme-light);
            color: var(--theme-light);
        }
        .left input:focus,
        .left input:active {
            border-color: var(--theme-signup);
            color: var(--theme-signup);
        }
        .left input:-webkit-autofill {
            -webkit-box-shadow: 0 0 0 30px var(--theme-signup-background) inset;
            -webkit-text-fill-color: var(--theme-light);
        }
        .left a { color: var(--theme-signup); }
        .right label { color: var(--theme-dark); }
        .right input {
            border-bottom: 1px solid var(--theme-dark);
            color: var(--theme-dark);
        }
        .right input:focus,
        .right input:active {
            border-color: var(--theme-login);
        }
        .right input:-webkit-autofill {
            -webkit-box-shadow: 0 0 0 30px var(--theme-login-background) inset;
            -webkit-text-fill-color: var(--theme-dark);
        }
        /* ===== CONTEÚDO ===== */
        .content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: 100%;
            width: 80%;
            margin: 0 auto;
            position: relative;
        }
        .content h2 {
            font-weight: 300;
            font-size: 2.6em;
            margin: 0.2em 0 0.1em;
        }
        .left .content h2 { color: var(--theme-signup); }
        .right .content h2 { color: var(--theme-login); }
        /* ===== CAMPOS DE INPUT ===== */
        .input-group-custom {
            display: flex;
            align-items: center;
            border-bottom: 1px solid var(--theme-light);
            transition: border-color 0.3s;
        }
        .left .input-group-custom { border-bottom-color: var(--theme-light); }
        .left .input-group-custom:focus-within { border-bottom-color: var(--theme-signup); }
        .right .input-group-custom { border-bottom-color: var(--theme-dark); }
        .right .input-group-custom:focus-within { border-bottom-color: var(--theme-login); }
        .input-group-custom input {
            background: transparent;
            border: 0;
            outline: 0;
            font-size: 1em;
            padding: 8px 1px;
            flex: 1;
            width: 100%;
        }
        .left .input-group-custom input { color: var(--theme-light); }
        .left .input-group-custom input:-webkit-autofill {
            -webkit-box-shadow: 0 0 0 30px var(--theme-signup-background) inset;
            -webkit-text-fill-color: var(--theme-light);
        }
        .right .input-group-custom input { color: var(--theme-dark); }
        .right .input-group-custom input:-webkit-autofill {
            -webkit-box-shadow: 0 0 0 30px var(--theme-login-background) inset;
            -webkit-text-fill-color: var(--theme-dark);
        }
        .input-group-custom .toggle-password {
            background: none;
            border: none;
            box-shadow: none;
            color: var(--theme-light);
            cursor: pointer;
            padding: 4px 8px;
            font-size: 1.1em;
            transition: color 0.3s;
        }
        .right .input-group-custom .toggle-password { color: var(--theme-dark); }
        .left .input-group-custom .toggle-password:hover { color: var(--theme-signup); }
        .right .input-group-custom .toggle-password:hover { color: var(--theme-login); }
        /* ===== FORM ===== */
        .form-element { margin: 1.6em 0; }
        .form-element.form-submit { margin: 1.6em 0 0; }
        .form-stack { display: flex; flex-direction: column; }
        .form-stack label { margin-bottom: 0.2em; }
        /* ===== CHECKBOX ===== */
        .checkbox {
            -webkit-appearance: none;
            outline: none;
            background-color: var(--theme-light);
            border: 1px solid var(--theme-light);
            box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
            padding: 12px;
            border-radius: 4px;
            display: inline-block;
            position: relative;
            width: auto;
            margin-right: 8px;
            flex-shrink: 0;
        }
        .checkbox:focus,
        .checkbox:checked:focus,
        .checkbox:active,
        .checkbox:checked:active {
            border-color: var(--theme-signup);
            box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
        }
        .checkbox:checked {
            outline: none;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
        }
        .checkbox:checked:after {
            outline: none;
            content: '\2713';
            color: var(--theme-signup);
            font-size: 1.4em;
            font-weight: 900;
            position: absolute;
            top: -4px;
            left: 4px;
        }
        .form-checkbox {
            display: flex;
            align-items: center;
        }
        .form-checkbox label {
            margin: 0 6px 0 0;
            font-size: 0.72em;
        }
        /* ===== BOTÕES ===== */
        button {
            padding: 0.8em 1.2em;
            margin: 0 10px 0 0;
            width: auto;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 1em;
            color: #fff;
            line-height: 1em;
            letter-spacing: 0.6px;
            border-radius: 3px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.1);
            border: 0;
            outline: 0;
            transition: all 0.25s;
            cursor: pointer;
            border-radius: 25px;
        }
        button.signup { background: var(--theme-signup); }
        button.login { background: var(--theme-login); }
        button.off {
            background: none;
            box-shadow: none;
            margin: 0;
        }
        button.off.signup { color: var(--theme-signup); }
        button.off.login { color: var(--theme-login); }
        button:focus,
        button:active,
        button:hover {
            box-shadow: 0 4px 7px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.1);
        }
        button.signup:hover { background: var(--theme-signup-darken); }
        button.login:hover { background: var(--theme-login-darken); }
        button.off:hover { box-shadow: none; }
        button.off.signup:hover {
            color: var(--theme-signup);
            background: var(--theme-dark);
        }
        button.off.login:hover {
            color: var(--theme-login-darken);
            background: var(--theme-light);
        }
        /* ===== ALERTAS ===== */
        .alert-custom {
            padding: 10px 15px;
            border-radius: 4px;
            margin-bottom: 15px;
            font-size: 0.9em;
        }
        .alert-custom.alert-danger {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        .alert-custom.alert-success {
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        /* ===== RESPONSIVO ===== */
        @media only screen and (max-width: 768px) {
            #slideBox { width: 80%; margin-left: 20%; }
            .content { width: 90%; }
            .content h2 { font-size: 2em; }
            .left, .right { padding: 10px 0; }
        }
        @media only screen and (max-width: 480px) {
            #slideBox { width: 95%; margin-left: 5%; box-shadow: none; }
            .content { width: 95%; }
            .content h2 { font-size: 1.6em; }
            .form-element { margin: 1.2em 0; }
            button { padding: 0.6em 1em; font-size: 0.9em; }
        }