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

body {
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    background-color: #1E1E1E;
    color: #f0f0f0;

    overflow-x: hidden;
}

.login-wrapper {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    background-color: #1E1E1E;
}

.login-column, .promo-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    transition: all 0.3s ease;
}

.login-column {
    width: 40%;
    background-color: #1E1E1E;
    align-items: center;
    padding: 40px;
    position: relative;
    z-index: 2;
}

.login-content-wrapper {
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.promo-column {
    width: 60%;
    background-color: #333333;
    background-image: linear-gradient(135deg, #333 0%, #222 100%);
    align-items: center;
    text-align: center;
    padding: 60px;
}

.login-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 35px;
}

.login-header .logo-icon {
    height: 80px;
    width: auto;
    object-fit: contain;
}

.login-header .logo-text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-main {
    font-size: 32px;
    font-weight: 700;
    color: #4CAF50;
    line-height: 1.1;
    letter-spacing: 1px;
}

.logo-sub {
    font-size: 18px;
    font-weight: 500;
    color: #FFFFFF;
    letter-spacing: 3px;
    margin-top: 5px;
}

.login-form-container {
    width: 100%;
    padding: 35px;
    border: 2px solid #4CAF50;
    border-radius: 16px;
    text-align: left;
    background-color: #1E1E1E;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.form-content h1 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #FFFFFF;
}

.form-content .subtitle {
    font-size: 14px;
    color: #b3b3b3;
    margin-bottom: 25px;
    line-height: 1.4;
}

.error-message {
    background-color: rgba(220, 53, 69, 0.1);
    color: #ff8a8a;
    border: 1px solid rgba(220, 53, 69, 0.3);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.input-group {
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #b3b3b3;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.input-field {
    position: relative;
}

.input-field i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    font-size: 16px;
    pointer-events: none;
}

.input-field input {
    width: 100%;
    padding: 14px 14px 14px 45px;
    background-color: #2a2a2a;
    border: 1px solid #333;
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
    outline: none;
    transition: all 0.3s ease;
}

.input-field input:focus {
    border-color: #4CAF50;
    background-color: #333;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

.input-field input::placeholder {
    color: #666;
}

.btn-login {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 8px;
    background: #4CAF50;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    margin-top: 10px;
}

.btn-login:hover {
    background: #43a047;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
}

.btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
    color: #888;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s ease-in-out;
    padding: 10px;
}

.btn-back:hover {
    color: #4CAF50;
}

.promo-content {
    max-width: 600px;
    margin: 0 auto;
}

.promo-content h2 {

    font-size: clamp(1.8rem, 3vw, 3rem);
    font-weight: 700;
    line-height: 1.25;
    color: #FFFFFF;
    margin-bottom: 15px;
}

.promo-content .hashtag {
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    font-weight: 700;
    color: #4CAF50;
    opacity: 0.9;
}

@media (max-width: 1400px) {
    .login-column { width: 50%; padding: 30px; }
    .promo-column { width: 50%; padding: 30px; }

    .login-header .logo-icon { height: 70px; }
    .logo-main { font-size: 28px; }
}

@media (max-width: 900px) {

    .login-wrapper { flex-direction: column; }

    .promo-column {
        display: none;
    }

    .login-column {
        width: 100%;
        padding: 20px;

        min-height: 100vh;
        justify-content: center;
    }

    .login-form-container {
        padding: 25px;
    }
}

@media (max-width: 480px) {
    .login-column { padding: 15px; }

    .login-header .logo-icon { height: 60px; }
    .logo-main { font-size: 24px; }
    .logo-sub { font-size: 14px; letter-spacing: 2px; }

    .login-form-container {
        padding: 20px;
        border-width: 1px;
    }

    .form-content h1 { font-size: 22px; }
}

@media (max-height: 700px) {
    .login-column {
        justify-content: flex-start;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .login-header {
        margin-bottom: 20px;
        flex-direction: row;
        justify-content: center;
    }

    .login-header .logo-icon { height: 50px; }
    .logo-main { font-size: 22px; }
    .logo-sub { display: none; }

    .btn-back { margin-top: 15px; }
}
/* ---------------------------------------------------------------------------
   Banner de propaganda da tela de login (index.php).
   Cadastrado pelo admin master em admin_banners_login.php.

   Estas regras são uma VARIANTE (.promo-column--banner) de propósito: as
   telas esqueci_senha.php e nova_senha.php usam a mesma .promo-column com
   texto dentro de .promo-content, e continuam exatamente como estavam. Nada
   acima foi alterado.

   Ficam no fim do arquivo porque precisam vencer o padding definido nos
   @media de 1400px. Repare que a variante NÃO declara `display`: assim o
   `display:none` do @media de 900px continua valendo e o banner segue
   escondido no celular, como já era o comportamento dessa coluna.
--------------------------------------------------------------------------- */

.promo-column--banner {
    padding: 0;
    position: relative;
    overflow: hidden;
}

.promo-column--banner .promo-banner-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ---------------------------------------------------------------------------
   Fundo da coluna do formulário na tela de login (index.php).

   Recriado em CSS em vez de imagem de propósito: o padrão é procedural
   (grade regular + brilho radial), então gradiente sai nítido em qualquer
   resolução, de celular a 4K, não pesa nenhum byte e não depende de mais um
   arquivo chegar no servidor.

   É uma VARIANTE (.login-column--fundo): esqueci_senha.php e nova_senha.php
   usam a mesma .login-column e continuam com o #1E1E1E de antes.

   Ordem das camadas — no background-image a PRIMEIRA fica por cima. As duas
   grades vêm antes do brilho verde justamente pra as linhas continuarem
   aparecendo dentro da área iluminada, como no original. Fica no fim do
   arquivo pra vencer o background-color declarado lá em cima na .login-column.
--------------------------------------------------------------------------- */

.login-column--fundo {
    background-color: #0b0d0c;
    background-image:
        /* grade vertical */
        repeating-linear-gradient(to right,
            rgba(255, 255, 255, .045) 0px,
            rgba(255, 255, 255, .045) 1px,
            transparent 1px,
            transparent 58px),
        /* grade horizontal */
        repeating-linear-gradient(to bottom,
            rgba(255, 255, 255, .045) 0px,
            rgba(255, 255, 255, .045) 1px,
            transparent 1px,
            transparent 58px),
        /* brilho verde da marca, difuso pela esquerda.
           Valores calibrados renderizando o gradiente e comparando com a
           referência: um pico mais fraco com elipse grande e queda longa
           espalha a luz, em vez de criar um núcleo saturado na borda. */
        radial-gradient(ellipse 95% 68% at 10% 55%,
            rgba(29, 185, 84, .13) 0%,
            rgba(29, 185, 84, .06) 50%,
            transparent 88%);
}