/* Layout adapted from cargill c968e4c for the Filament login. */
:root {
    --oc-navy-950: #071625;
    --oc-navy-900: #0b1f33;
    --oc-navy-800: #12304d;
    --oc-red-600: #db0f16;
    --oc-red-700: #bd0910;
    --oc-slate-700: #344054;
    --oc-slate-500: #667085;
    --oc-slate-300: #d0d5dd;
    --oc-slate-200: #e4e7ec;
    --oc-slate-100: #f2f4f7;
    --oc-white: #ffffff;
    --oc-radius-lg: 20px;
    --oc-radius-md: 12px;
    --oc-shadow: 0 28px 70px rgba(7, 22, 37, .14);
    --oc-font: Inter, Aptos, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
    margin: 0;
    color: var(--oc-navy-900);
    background: var(--oc-white);
    font-family: var(--oc-font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button, input { font: inherit; }

.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(420px, .88fr);
    min-height: 100vh;
    min-height: 100dvh;
}

.auth-visual {
    position: relative;
    isolation: isolate;
    min-height: 100%;
    overflow: hidden;
    color: var(--oc-white);
    background: var(--oc-navy-900);
}

.auth-visual__media {
    position: absolute;
    z-index: -2;
    inset: 0;
    display: block;
}

.auth-visual__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 49% center;
}

.auth-visual::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    background:
        linear-gradient(180deg, rgba(7, 22, 37, .62) 0%, rgba(7, 22, 37, .08) 45%, rgba(7, 22, 37, .78) 100%),
        linear-gradient(90deg, rgba(7, 22, 37, .18), transparent 62%);
}

.auth-visual__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(32px, 4.5vw, 72px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    width: fit-content;
    color: inherit;
}

.brand__mark {
    display: block;
    flex: 0 0 auto;
    width: 44px;
    height: auto;
}

.auth-visual__message { max-width: 610px; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 17px;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.eyebrow::before {
    width: 24px;
    height: 2px;
    content: "";
    background: var(--oc-red-600);
}

.auth-visual h1 {
    max-width: 590px;
    margin: 0;
    font-size: clamp(38px, 4.2vw, 64px);
    font-weight: 650;
    letter-spacing: -.055em;
    line-height: 1.04;
}

.auth-visual__description {
    max-width: 520px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, .78);
    font-size: clamp(14px, 1.2vw, 17px);
    line-height: 1.65;
}

.auth-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: clamp(32px, 5vw, 80px);
    background: var(--oc-white);
}

.auth-panel::before {
    position: absolute;
    top: 0;
    right: 0;
    width: 110px;
    height: 5px;
    content: "";
    background: var(--oc-red-600);
}

.auth-panel__inner {
    width: min(100%, 430px);
    min-width: 0;
    max-width: 100%;
}

.auth-panel__mobile-brand { display: none; }

@media (max-width: 920px) {
    .auth-shell { grid-template-columns: minmax(0, 1fr) minmax(390px, .95fr); }
    .auth-visual__content { padding: 36px; }
    .auth-visual h1 { font-size: clamp(38px, 5.8vw, 58px); }
}

@media (max-width: 720px) {
    .auth-shell {
        display: block;
        min-height: 100vh;
        min-height: 100dvh;
        background: var(--oc-slate-100);
    }

    .auth-visual {
        position: absolute;
        inset: 0 0 auto;
        min-height: 260px;
        height: 35vh;
    }

    .auth-visual__image { object-position: 54% 58%; }
    .auth-visual::before { background: linear-gradient(180deg, rgba(7, 22, 37, .55), rgba(7, 22, 37, .52)); }
    .auth-visual__content { display: none; }

    .auth-panel {
        align-items: flex-start;
        min-height: 100vh;
        min-height: 100dvh;
        padding: clamp(28px, 7vw, 42px) 20px 24px;
        background: transparent;
    }

    .auth-panel::before { width: 72px; height: 4px; }

    .auth-panel__inner {
        margin-top: clamp(120px, 21vh, 179px);
        padding: 26px 26px 20px;
        border: 1px solid rgba(255, 255, 255, .68);
        border-radius: var(--oc-radius-lg);
        background: rgba(255, 255, 255, .97);
        box-shadow: var(--oc-shadow);
    }

    .auth-panel__mobile-brand {
        display: flex;
        margin-bottom: 14px;
        color: var(--oc-navy-900);
    }

    .auth-panel__mobile-brand .brand__mark { width: 42px; }
}

@media (max-width: 380px) {
    .auth-panel { padding-inline: 12px; }
    .auth-panel__inner { padding-inline: 20px; }
}

@media (max-width: 380px) and (max-height: 650px) and (orientation: portrait) {
    .auth-visual { min-height: 220px; height: 34vh; }
    .auth-panel__inner { margin-top: 78px; }
    .auth-panel__mobile-brand { margin-bottom: 18px; }
}

/* Mantém toda a autenticação visível em celulares e tablets na horizontal. */
@media (max-height: 500px) and (orientation: landscape) {
    .auth-shell {
        display: grid;
        grid-template-columns: minmax(190px, .78fr) minmax(0, 1.22fr);
        background: var(--oc-white);
    }

    .auth-visual {
        position: relative;
        inset: auto;
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .auth-visual__image { object-position: 51% center; }

    .auth-visual__content {
        display: flex;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 24px;
    }

    .auth-visual__message { display: none; }

    .auth-panel {
        align-items: center;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 14px clamp(24px, 4vw, 46px);
        background: var(--oc-white);
    }

    .auth-panel::before { width: 72px; height: 4px; }

    .auth-panel__inner {
        width: min(100%, 430px);
        margin-top: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .auth-panel__mobile-brand { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

.login-header { margin-bottom: 34px; }

.login-kicker {
            margin: 0 0 10px;
            color: var(--oc-red-600);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 1.65px;
            text-transform: uppercase;
        }

.login-title {
            margin: 0;
            color: var(--oc-navy-950);
            font-size: clamp(30px, 3vw, 39px);
            font-weight: 690;
            letter-spacing: -.04em;
            line-height: 1.12;
            overflow-wrap: break-word;
        }

.login-subtitle {
            margin: 12px 0 0;
            color: var(--oc-slate-500);
            font-size: 14px;
            line-height: 1.55;
        }

.login-footer {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 30px;
            color: #98a2b3;
            font-size: 11px;
            letter-spacing: .02em;
        }

.login-footer__dot {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--oc-slate-300);
        }

.onecheck-login .fi-sc-form { gap: 24px; }
.onecheck-login .fi-sc { gap: 18px; }
.onecheck-login .fi-fo-field-label-content { color: #344054; font-size: 13px; font-weight: 650; }
.onecheck-login .fi-input-wrp { border-radius: 12px; background: #fff; }
.onecheck-login .fi-input { min-height: 52px; color: #0b1f33; font-size: 15px; }
.onecheck-login .fi-input::placeholder { color: #98a2b3; }
.onecheck-login .fi-input-wrp-prefix .fi-icon { width: 19px; height: 19px; color: #98a2b3; }
.onecheck-login .fi-checkbox-input { border-radius: 5px; }
.onecheck-login .fi-btn {
    min-height: 52px;
    border-radius: 12px;
    background: #db0f16;
    color: #fff;
    font-size: 14px;
    font-weight: 750;
    box-shadow: 0 10px 22px rgb(219 15 22 / 21%);
    transition: background-color .18s ease, box-shadow .18s ease;
}
.onecheck-login .fi-btn:hover { background: #bd0910; }
.onecheck-login .fi-btn:focus-visible { outline: 3px solid rgb(219 15 22 / 30%); outline-offset: 3px; }
.onecheck-login .fi-btn:disabled { cursor: wait; opacity: .78; }

@media (max-width: 720px) {
    .login-header { margin-bottom: 22px; }
    .login-title { font-size: clamp(27px, 7.3vw, 30px); }
    .login-footer { margin-top: 16px; flex-wrap: wrap; }
    .onecheck-login .fi-sc { gap: 16px; }
}

@media (max-width: 380px) and (max-height: 650px) and (orientation: portrait) {
    .login-header { margin-bottom: 16px; }
    .login-title { font-size: 26px; }
    .login-subtitle, .login-footer { display: none; }
    .onecheck-login .fi-input { min-height: 46px; }
    .onecheck-login .fi-btn { min-height: 48px; }
    .onecheck-login .fi-sc { gap: 12px; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .login-header { margin-bottom: 14px; }
    .login-kicker { margin-bottom: 6px; font-size: 10px; }
    .login-title { font-size: clamp(24px, 3.5vw, 30px); line-height: 1.06; }
    .login-subtitle, .login-footer { display: none; }
    .onecheck-login .fi-sc { gap: 10px; }
    .onecheck-login .fi-sc-form { gap: 12px; }
    .onecheck-login .fi-input, .onecheck-login .fi-btn { min-height: 44px; }
}