/* Tela de login — paleta e tipografia unificadas com a landing page
   institucional (educatec-agro-landing), para o cliente sentir a mesma
   marca ao sair do site e entrar no painel. */
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/public-sans-variable.woff2') format('woff2'); }
@font-face { font-family: 'Zilla Slab'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/zilla-slab-500.woff2') format('woff2'); }
@font-face { font-family: 'Zilla Slab'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/zilla-slab-600.woff2') format('woff2'); }
@font-face { font-family: 'Zilla Slab'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/zilla-slab-700.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-mono-600.woff2') format('woff2'); }

:root {
    --green: #2F8F5B;
    --green-hover: #267A4C;
    --green-deep: #1F4B3C;
    --green-darker: #10262A;
    --amber: #D99A2B;
    --amber-deep: #B87E1D;
    --ink: #16211C;
    --ink-soft: #45564A;
    --ink-faint: #7C8B77;
    --border: #D3DECB;
    --surface: #FFFFFF;
    --shadow: 0 24px 48px -24px rgba(16, 38, 42, .35);
    --radius-card: 14px;
}

body.home {
    margin: 0;
    /* sb-admin-2/bootstrap definem body como flex centralizado; isso encolhe
       a página de login ao tamanho do conteúdo. Forçamos bloco full-width. */
    display: block;
    width: 100%;
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(47, 143, 91, .08), transparent 28%),
        linear-gradient(180deg, #F7FAF4 0%, #EFF4EA 100%);
}

/* sb-admin-2.min.css aplica text-transform:uppercase e font-size:13px em "*"
   para o resto do painel administrativo; neutralizamos aqui dentro da tela de
   login, que é uma página isolada com sua própria tipografia. */
.login-page,
.login-page *,
.login-page *::before,
.login-page *::after {
    text-transform: none;
}

.cabecalho-login,
.rodape-login {
    display: none;
}

.login-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    background: transparent;
    font-family: "Public Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.login-brand-message h1,
.login-heading h2 {
    font-family: "Zilla Slab", Georgia, serif;
}

.login-eyebrow,
.login-form label {
    font-family: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
}

.login-shell {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

/* Painel de marca (esquerda) — colado nas bordas, sem cantos arredondados */
.login-brand {
    flex: 1 1 58%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding: 52px 56px 44px;
    color: #fff;
    background-color: var(--green-darker);
    /* fundo_login.jpg: o topo é céu estourado/embaçado (efeito de contraluz);
       o detalhe nítido (a plantação) fica na parte de baixo da foto — por
       isso ancoramos no "bottom", senão painéis baixos (mobile) só mostram
       a névoa do céu. */
    background-image:
        linear-gradient(180deg, rgba(16, 38, 42, .88) 0%, rgba(47, 143, 91, .68) 45%, rgba(31, 75, 60, .92) 100%),
        url('../img/fundo_login.jpg');
    background-size: cover;
    background-position: left bottom, left bottom;
    overflow: hidden;
    container-type: inline-size;
}

.login-form label {
    text-transform: uppercase;
    letter-spacing: .08em;
}

.login-brand-message {
    min-width: 0;
}

/* Cartão branco atrás da logo — mesmo tratamento dos apps iOS/Android: a logo
   foi desenhada para fundo claro, então mostramos ela inteira (com o
   subtítulo "Sistema de Classificação") sobre um fundo próprio, em vez de
   cortar parte da imagem para escondê-lo. */
.login-brand-logo-card {
    display: inline-block;
    padding: 14px 22px;
    margin-bottom: 24px;
    background: rgba(255, 255, 255, .95);
    border-radius: 12px;
}

.login-brand-logo {
    display: block;
    height: 92px;
    width: auto;
}

.login-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #A8E0C1;
    margin-bottom: 16px;
}

.login-brand-message h1 {
    margin: 0 0 14px;
    white-space: nowrap;
    font-size: clamp(0.85rem, 3.6vw, 2.2rem);
    font-size: clamp(0.85rem, 4.2cqw, 2.6rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.5px;
    color: #fff;
}

.login-brand-message p {
    margin: 0;
    max-width: 600px;
    font-size: 16px;
    line-height: 1.6;
    color: #D7E8DC;
}

.login-stats {
    display: flex;
    gap: 32px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.login-stats div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.login-stats strong {
    font-size: 22px;
    font-weight: 600;
    color: #fff;
}

.login-stats span {
    font-size: 12.5px;
    color: #B9D9C4;
}

/* Painel do formulário (direita) — tela branca lisa, sem card sobreposto */
.login-form-panel {
    flex: 0 0 42%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px 28px;
    background: #fff;
}

.login-form-col {
    width: 100%;
    max-width: 400px;
}

.login-logo {
    position: relative;
    z-index: 6;
    display: block;
    width: 200px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 28px;
    overflow: none;
}

.login-heading {
    margin-bottom: 24px;
}

.login-heading h2 {
    margin: 0 0 8px;
    font-size: 27px;
    font-weight: 600;
    letter-spacing: -.4px;
    color: var(--ink);
}

.login-heading p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ink-soft);
}

.login-form .form-group {
    margin-bottom: 18px;
}

.login-form label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}

.login-field-wrap {
    position: relative;
}

.login-field-wrap .field-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #8B978C;
    font-size: 14px;
    pointer-events: none;
}

.login-field-wrap input.form-control {
    height: 50px;
    padding-left: 42px;
    font-size: 15px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.login-field-wrap input.form-control:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(47, 143, 91, .15);
}

.login-submit {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, var(--green) 0%, var(--green-hover) 100%);
    border: none;
    border-radius: 10px;
    box-shadow: 0 10px 18px -12px rgba(47, 143, 91, .7);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.login-submit:hover,
.login-submit:focus {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px -12px rgba(47, 143, 91, .8);
}

.login-submit:hover,
.login-submit:focus {
    background: linear-gradient(180deg, var(--green-hover) 0%, var(--green-deep) 100%);
    color: #fff;
}

.login-secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 16px;
    font-size: 12.5px;
    color: var(--ink-soft);
}

.login-secure-note i {
    color: var(--green);
}

.login-form .alert {
    border-radius: 10px;
    font-size: 13.5px;
    padding: 14px 16px;
}

.login-footer-note {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 12px;
    color: var(--ink-faint);
}

@media (max-width: 1200px) {
    .login-page {
        padding: 18px 0;
    }

    /* No mobile o painel de marca fica bem baixo, então a mesma opacidade do
       degradê do desktop deixa a foto quase invisível ali dentro — reduzimos
       a opacidade para a textura aparecer com nitidez. Também recentralizamos
       o recorte: "left bottom" (ajustado para o painel alto do desktop) deixa
       só uma textura de trigo sem contexto numa faixa baixa e larga — "center"
       mostra o caminhão/colheitadeira, reconhecível como a mesma foto. */
    .login-brand {
        background-image:
            linear-gradient(180deg, rgba(16, 38, 42, .55) 0%, rgba(47, 143, 91, .35) 45%, rgba(31, 75, 60, .55) 100%),
            url('../img/fundo_login.jpg');
        background-position: center, center;
    }

    .login-shell {
        flex-direction: column;
        width: 100%;
        min-height: auto;
    }

    .login-brand {
        flex: 0 0 auto;
        max-width: none;
        padding: 24px 24px 18px;
    }

    /* Igual ao app: no celular a logo ocupa 90% da largura, centralizada, em
       vez de um tamanho fixo — mesma ideia da barra do topo dos apps. */
    .login-brand-logo-card {
        display: block;
        width: 90%;
        max-width: 320px;
        margin: 0 auto 18px;
        box-sizing: border-box;
    }

    .login-brand-logo {
        height: auto;
        width: 100%;
    }

    .login-brand-message {
        padding-top: 0;
    }

    .login-eyebrow {
        display: none;
    }

    .login-brand-message h1 {
        margin-bottom: 0;
    }

    .login-brand-message p,
    .login-stats {
        display: none;
    }

    .login-form-panel {
        flex: 0 0 auto;
        padding: 22px 18px 24px;
        background: #fff;
    }

    .login-logo {
        width: 160px;
        margin-bottom: 16px;
    }

    .login-heading {
        margin-bottom: 18px;
    }
}

@media (max-width: 640px) {
    .login-brand-logo-card {
        max-width: 260px;
        margin-bottom: 12px;
    }

    .login-brand {
        padding: 20px 18px 16px;
    }

    .login-form-panel {
        padding: 18px 12px 20px;
    }

    .login-form-col {
        padding: 16px 14px 14px;
    }

    .login-heading h2 {
        font-size: 24px;
    }

    .login-submit {
        height: 48px;
        font-size: 14px;
    }
}