/* FiveDesk — Auth V2 Foundation (#loginScreen). Tokens: --fd-* (theme.css). Auth: login-bootstrap.js */

#loginScreen {
    --fd-radius-card: 1rem;
    --fd-radius-control: 0.875rem;
    --fd-radius-lg: 1.25rem;
    --fd-login-card-zone: calc(30.6875rem + 5.75rem + 2.5rem);
    align-items: stretch;
    justify-content: stretch;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    font-family: var(--fd-font);
    color: var(--fd-text);
    -webkit-font-smoothing: antialiased;
}

#loginScreen .fd-login-page {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
}

/* ---------- promo / carousel ---------- */
#loginScreen .fd-login-promo {
    position: fixed;
    inset: 0;
    overflow: hidden;
    color: #fff;
    background: var(--fd-gradient-hero);
    z-index: 0;
}

#loginScreen .fd-login-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
    pointer-events: none;
}

#loginScreen .fd-login-blob--a {
    width: 22.5rem;
    height: 22.5rem;
    right: -4.375rem;
    top: 3.75rem;
    background: rgba(0, 123, 255, 0.5);
}

#loginScreen .fd-login-blob--b {
    width: 17.5rem;
    height: 17.5rem;
    left: -3.75rem;
    bottom: -1.25rem;
    background: rgba(144, 238, 255, 0.18);
}

#loginScreen .fd-login-slides {
    position: absolute;
    inset: 0;
    z-index: 2;
    /* Garante coluna cheia mesmo se outra regra tentar relative nos filhos do promo */
    height: 100%;
    width: auto;
}

#loginScreen .fd-login-slide {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: var(--fd-login-card-zone);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Padding simétrico: centro vertical real da coluna (nav do carrossel é overlay fixo). */
    padding: 3rem 2.75rem;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(0.875rem);
    transition: opacity 0.55s ease, transform 0.55s ease;
    pointer-events: none;
}

#loginScreen .fd-login-slide--on {
    opacity: 1;
    transform: none;
}

#loginScreen .fd-login-slide-inner {
    width: 100%;
    max-width: 40rem;
    margin: 0; /* flex justify-content:center cuida do eixo vertical */
}

#loginScreen .fd-login-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.0125rem;
    color: #dcebff;
    background: rgba(255, 255, 255, 0.12);
    border: 0.0625rem solid rgba(255, 255, 255, 0.22);
    padding: 0.6875rem 1.375rem;
    border-radius: 62.4375rem;
    backdrop-filter: blur(0.375rem);
    margin-bottom: 2.125rem;
}

#loginScreen .fd-login-spark {
    color: var(--fd-sky);
    font-size: 1.05em;
    line-height: 1;
}

#loginScreen .fd-login-promo-title {
    font-size: 3.875rem;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.034375rem;
    margin: 0 0 1.5rem;
}

#loginScreen .fd-login-promo-title em {
    font-style: normal;
    color: var(--fd-sky);
}

#loginScreen .fd-login-lead {
    font-size: 1.4375rem;
    line-height: 1.6;
    color: #c4d2ee;
    font-weight: 400;
    margin: 0 0 2.75rem;
    max-width: 37.5rem;
}

#loginScreen .fd-login-chat {
    background: rgba(255, 255, 255, 0.1);
    border: 0.0625rem solid rgba(255, 255, 255, 0.2);
    border-radius: 1.5rem;
    padding: 1.625rem 1.75rem;
    backdrop-filter: blur(0.5rem);
    max-width: 38.75rem;
    box-shadow: 0 1.5rem 3.125rem -1.5rem rgba(0, 0, 0, 0.5);
}

#loginScreen .fd-login-chat-head {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.16);
}

#loginScreen .fd-login-chat-av {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, var(--fd-sky), var(--fd-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1875rem;
    font-weight: 800;
    color: #06204e;
}

#loginScreen .fd-login-chat-title {
    font-size: 1.125rem;
    font-weight: 700;
}

#loginScreen .fd-login-chat-status {
    font-size: 0.875rem;
    color: #a8e6ff;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

#loginScreen .fd-login-chat-status::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #36d399;
    box-shadow: 0 0 0 0.1875rem rgba(54, 211, 153, 0.25);
}

#loginScreen .fd-login-bub {
    font-size: 1.125rem;
    line-height: 1.45;
    padding: 0.875rem 1.125rem;
    border-radius: 0.9375rem;
    margin-bottom: 0.75rem;
    max-width: 82%;
}

#loginScreen .fd-login-bub--ai {
    background: rgba(255, 255, 255, 0.16);
    border-bottom-left-radius: 0.3125rem;
}

#loginScreen .fd-login-bub--me {
    background: linear-gradient(135deg, var(--fd-primary), #3a90ff);
    margin-left: auto;
    border-bottom-right-radius: 0.3125rem;
}

#loginScreen .fd-login-quote {
    background: rgba(255, 255, 255, 0.1);
    border: 0.0625rem solid rgba(255, 255, 255, 0.2);
    border-radius: 1.5rem;
    padding: 2.25rem 2.5rem;
    backdrop-filter: blur(0.5rem);
    max-width: 40rem;
    box-shadow: 0 1.5rem 3.125rem -1.5rem rgba(0, 0, 0, 0.5);
}

#loginScreen .fd-login-stars {
    color: var(--fd-sky);
    font-size: 1.625rem;
    letter-spacing: 0.25rem;
    margin-bottom: 1.25rem;
    line-height: 1;
}

#loginScreen .fd-login-quote p {
    font-size: 1.5625rem;
    line-height: 1.55;
    font-weight: 500;
    margin: 0 0 1.75rem;
}

#loginScreen .fd-login-who {
    display: flex;
    align-items: center;
    gap: 1.125rem;
}

#loginScreen .fd-login-who-pic {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #3a90ff, #90eeff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #06204e;
    font-size: 1.1875rem;
}

#loginScreen .fd-login-who-name {
    font-size: 1.1875rem;
    font-weight: 700;
}

#loginScreen .fd-login-who-role {
    font-size: 0.9375rem;
    color: #bcd0f2;
    margin-top: 0.125rem;
}

#loginScreen .fd-login-kpis {
    display: flex;
    gap: 1.125rem;
    margin-bottom: 1.375rem;
    max-width: 40rem;
    flex-wrap: wrap;
}

#loginScreen .fd-login-kpi {
    flex: 1;
    min-width: 7.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 0.0625rem solid rgba(255, 255, 255, 0.18);
    border-radius: 1rem;
    padding: 1.25rem 1.375rem;
}

#loginScreen .fd-login-kpi-val {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.03125rem;
}

#loginScreen .fd-login-kpi-val--up {
    color: var(--fd-sky);
}

#loginScreen .fd-login-kpi-cap {
    font-size: 0.9375rem;
    color: #bcd0f2;
    margin-top: 0.375rem;
}

#loginScreen .fd-login-chartcard {
    background: rgba(255, 255, 255, 0.08);
    border: 0.0625rem solid rgba(255, 255, 255, 0.16);
    border-radius: 1.25rem;
    padding: 1.5rem 1.625rem;
    max-width: 40rem;
    margin-top: 0.25rem;
}

#loginScreen .fd-login-chartcard-title {
    font-size: 1rem;
    color: #cfe0ff;
    margin-bottom: 1.125rem;
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

#loginScreen .fd-login-chartcard-up {
    color: var(--fd-sky);
    font-weight: 700;
}

#loginScreen .fd-login-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.875rem;
    height: 8rem;
}

#loginScreen .fd-login-bars i {
    flex: 1;
    border-radius: 0.375rem 0.375rem 0.1875rem 0.1875rem;
    background: linear-gradient(180deg, var(--fd-sky), rgba(0, 123, 255, 0.7));
    opacity: 0.92;
    display: block;
}

#loginScreen .fd-login-carousel-nav {
    position: fixed;
    left: 0;
    right: var(--fd-login-card-zone);
    bottom: 1.75rem;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    pointer-events: auto;
}

#loginScreen .fd-login-navbtn {
    width: 3rem;
    height: 3rem;
    border-radius: 0.8125rem;
    border: 0.0625rem solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    font-size: 1.3125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.15s;
    font-family: inherit;
}

#loginScreen .fd-login-navbtn:hover {
    background: rgba(255, 255, 255, 0.18);
}

#loginScreen .fd-login-dots {
    display: flex;
    gap: 0.5625rem;
}

#loginScreen .fd-login-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: 0.2s;
    display: inline-block;
    border: none;
    padding: 0;
    font: inherit;
}

#loginScreen .fd-login-dot--on {
    width: 1.9375rem;
    border-radius: 0.4375rem;
    background: #fff;
}

/* ---------- login card ---------- */
#loginScreen .fd-login-wrap {
    position: relative;
    z-index: 5;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1.25rem 5.75rem;
    box-sizing: border-box;
    pointer-events: none;
}

/* Neve atrás do card/form; acima do promo de fundo. */
#loginScreen .fivedesk-snow {
    z-index: 3;
}

#loginScreen .fd-login-card {
    pointer-events: auto;
    position: relative;
    width: 30.6875rem;
    max-width: 100%;
    background: var(--fd-surface);
    border-radius: 1rem;
    padding: 2.875rem 2.9375rem 2.25rem;
    box-shadow: var(--fd-shadow-3);
    box-sizing: border-box;
    border: 0.0625rem solid color-mix(in srgb, var(--fd-border) 65%, transparent);
}

#loginScreen .fd-login-card > .login-theme-switch {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    z-index: 4;
}

#loginScreen .fd-login-brand {
    display: block;
    margin: 0 0 1.375rem;
    max-width: min(100%, 18.75rem);
    min-height: 5.25rem;
}

#loginScreen .fd-login-brand-logo {
    height: 5.25rem;
    width: auto;
    max-width: min(100%, 18.75rem);
    display: block;
    object-fit: contain;
    object-position: left center;
    background: transparent;
}

/* Login sem seletor de tema: sempre o logotipo do tema claro. */
#loginScreen .fd-login-brand-logo--dia {
    display: block;
}

#loginScreen .fd-login-panel {
    display: none;
}

#loginScreen .fd-login-panel--on {
    display: block;
}

#loginScreen .fd-login-panel[hidden] {
    display: none !important;
}

#loginScreen .fd-login-title {
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.021875rem;
    margin: 0 0 0.375rem;
    color: var(--fd-text);
}

#loginScreen .fd-login-subtitle {
    font-size: 0.90625rem;
    color: var(--fd-text-muted);
    margin: 0 0 1.375rem;
}

#loginScreen #loginForm {
    display: flex;
    flex-direction: column;
    margin: 0;
}

#loginScreen .fd-login-field {
    margin-bottom: 0.9375rem;
}

#loginScreen .fd-login-field label {
    display: block;
    font-size: 0.84375rem;
    font-weight: 600;
    margin-bottom: 0.4375rem;
    color: #243a5e;
}

#loginScreen .fd-login-control {
    position: relative;
}

#loginScreen .fd-login-control input {
    width: 100%;
    height: 3rem;
    border: 0.09375rem solid var(--fd-border);
    border-radius: var(--fd-radius-control, 0.875rem);
    background: var(--fd-field);
    padding: 0 0.9375rem;
    font-family: inherit;
    font-size: 0.90625rem;
    color: var(--fd-text);
    outline: none;
    transition: 0.15s;
    box-sizing: border-box;
}

#loginScreen .fd-login-control input[type='password'] {
    padding-right: 3rem;
}

#loginScreen .fd-login-control input::placeholder {
    color: #9aa7bd;
}

#loginScreen .fd-login-control input:focus {
    border-color: var(--fd-primary);
    background: #fff;
    box-shadow: var(--fd-focus-ring);
}

#loginScreen .fd-login-toggle-pass {
    position: absolute;
    right: 0.4375rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.4375rem;
    height: 2.4375rem;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #8190aa;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--fd-radius-control, 0.875rem);
    padding: 0;
}

#loginScreen .fd-login-toggle-pass:hover {
    background: #eef2f8;
    color: var(--fd-primary);
}

#loginScreen .fd-login-toggle-pass svg {
    width: 1.25rem;
    height: 1.25rem;
}

#loginScreen .fd-login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.25rem 0 1.25rem;
    flex-wrap: wrap;
}

#loginScreen .fd-login-check {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
    font-size: 0.84375rem;
    color: #3c4a63;
    cursor: not-allowed;
    user-select: none;
    opacity: 0.65;
}

#loginScreen .fd-login-check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

#loginScreen .fd-login-check-box {
    width: 1.1875rem;
    height: 1.1875rem;
    border: 0.1rem solid #c6d0e0;
    border-radius: 0.375rem;
    background: #fff;
    flex-shrink: 0;
}

#loginScreen .fd-login-link-btn {
    font-size: 0.84375rem;
    font-weight: 700;
    color: var(--fd-primary);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    white-space: nowrap;
    background: none;
    border: 0;
    padding: 0.25rem 0;
    cursor: pointer;
    font-family: inherit;
}

#loginScreen .fd-login-link-btn:hover:not(:disabled) {
    text-decoration: underline;
    opacity: 0.88;
}

#loginScreen .fd-login-link-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

#loginScreen .fd-login-link-btn:focus-visible {
    outline: 0.125rem solid var(--fd-primary);
    outline-offset: 0.1875rem;
    border-radius: 0.5rem;
}

#loginScreen .fd-login-submit.button-primary.button-large {
    width: 100%;
    height: 3.125rem;
    margin: 0;
    padding: 0 1.25rem;
    border: 0;
    border-radius: var(--fd-radius-card, 0.25rem);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--fd-primary), #0052cc);
    box-shadow: none;
    cursor: pointer;
    transition: 0.18s;
}

#loginScreen .fd-login-submit.button-primary.button-large:hover:not(:disabled) {
    transform: translateY(-0.0625rem);
    box-shadow: none;
    filter: none;
}

#loginScreen .fd-login-submit.button-primary.button-large:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

#loginScreen .fd-login-or {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    color: #9aa7bd;
    font-size: 0.78125rem;
    font-weight: 500;
    margin: 1rem 0;
}

#loginScreen .fd-login-or::before,
#loginScreen .fd-login-or::after {
    content: '';
    flex: 1;
    height: 0.0625rem;
    background: var(--fd-border);
}

#loginScreen .fd-login-btn {
    width: 100%;
    height: 3.125rem;
    border-radius: var(--fd-radius-card, 0.25rem);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.18s;
    box-sizing: border-box;
}

#loginScreen .fd-login-btn--primary {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--fd-primary), #0052cc);
    box-shadow: none;
}

#loginScreen .fd-login-btn--primary:disabled,
#loginScreen .fd-login-btn--primary[aria-disabled='true'] {
    opacity: 0.72;
    color: #fff;
    cursor: not-allowed;
}

#loginScreen .fd-login-btn--google {
    background: #fff;
    border: 0.09375rem solid var(--fd-border);
    color: var(--fd-text);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    position: relative;
    text-decoration: none;
    box-sizing: border-box;
}

#loginScreen a.fd-login-btn--google:hover {
    background: #f7f9fc;
    border-color: #cfd9e7;
    transform: none;
}

#loginScreen .fd-login-btn-label {
    flex: 0 1 auto;
}

#loginScreen .fd-login-soon {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fd-text-muted);
    background: var(--fd-field);
    border: 0.0625rem solid var(--fd-border);
    border-radius: var(--fd-radius-card, 0.25rem);
    padding: 0.1875rem 0.5rem;
    margin-left: 0;
    flex: 0 0 auto;
}

#loginScreen .fd-login-gicon {
    width: 1.1875rem;
    height: 1.1875rem;
}

#loginScreen .fd-login-signup {
    text-align: center;
    font-size: 0.875rem;
    color: var(--fd-text-muted);
    margin: 1.25rem 0 0;
}

#loginScreen #loginAlert.fd-login-alert {
    margin: 0 0 1rem;
    border-left: none;
    border-radius: var(--fd-radius-card, 0.25rem);
    background: var(--fd-danger-bg);
    border: 0.0625rem solid var(--fd-danger-border);
    color: var(--fd-danger-text);
    font-size: 0.8125rem;
    line-height: 1.4;
}

#loginScreen .fd-login-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.84375rem;
    font-weight: 600;
    color: var(--fd-text-muted);
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
    margin-bottom: 1.125rem;
    font-family: inherit;
}

#loginScreen .fd-login-back:hover {
    color: var(--fd-text);
}

#loginScreen .fd-login-back svg {
    width: 1rem;
    height: 1rem;
}

#loginScreen .fd-login-forgot-notice {
    font-size: 0.84375rem;
    line-height: 1.5;
    color: var(--fd-text);
    background: var(--fd-success-bg);
    border: 0.0625rem solid var(--fd-success-border);
    border-radius: var(--fd-radius-card, 0.25rem);
    padding: 0.75rem 0.875rem;
    margin: 0 0 1rem;
}

#loginScreen .fd-login-forgot-notice.hidden {
    display: none;
}

#loginScreen .fd-login-forgot-error {
    font-size: 0.84375rem;
    line-height: 1.45;
    color: var(--fd-danger-text, #b42318);
    background: var(--fd-danger-bg, #fef3f2);
    border: 0.0625rem solid var(--fd-danger-border, #fecdca);
    border-radius: var(--fd-radius-card, 0.25rem);
    padding: 0.625rem 0.75rem;
    margin: 0 0 0.875rem;
}

#loginScreen .fd-login-forgot-error.hidden {
    display: none;
}

#loginScreen .fd-login-signup-notice {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--fd-text);
    background: var(--fd-field);
    border: 0.0625rem solid var(--fd-border);
    border-radius: var(--fd-radius-card, 0.25rem);
    padding: 0.875rem 1rem;
    margin: 0 0 1.125rem;
}

#loginScreen .fd-login-signup--tight {
    margin-top: 1rem;
}

#loginScreen .fd-login-legal-hint {
    text-align: center;
    font-size: 0.75rem;
    color: var(--fd-text-muted);
    margin: 0.625rem 0 0;
}

#loginScreen .fd-login-legal-hint.hidden {
    display: none;
}

#loginScreen .fd-login-legal {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 1.375rem;
    font-size: 0.78125rem;
}

#loginScreen .fd-login-legal-link {
    color: var(--fd-text-muted);
    text-decoration: none;
}

#loginScreen .fd-login-legal-link:hover {
    color: var(--fd-text);
}

#loginScreen .fd-login-legal-sep {
    width: 0.1875rem;
    height: 0.1875rem;
    border-radius: 50%;
    background: #c2ccdc;
}

#loginScreen .login-footer-portal {
    width: 100%;
    text-align: center;
    padding-top: 1rem;
    margin-top: 0.75rem;
    border-top: 0.0625rem solid var(--fd-border);
}

#loginScreen .login-portal-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--fd-primary);
    text-decoration: none;
}

#loginScreen .login-portal-link:hover {
    text-decoration: underline;
}

@media (max-width: 900px) /* ui-scale-mobile: was 920px */ {
    #loginScreen .fd-login-slides,
    #loginScreen .fd-login-carousel-nav,
    #loginScreen .fd-login-blob--a {
        display: none;
    }

    #loginScreen .fd-login-wrap {
        justify-content: center;
        /* Gap 20px do card branco com a borda da tela (lateral + superior). */
        padding: 20px 20px 1.75rem;
        background: var(--fd-gradient-hero);
    }

    #loginScreen .fd-login-promo {
        display: none;
    }

    #loginScreen .fd-login-brand {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    #loginScreen .fd-login-brand-logo {
        margin-left: auto;
        margin-right: auto;
        object-position: center center;
    }
}

@media (max-width: 480px) {
    #loginScreen .fd-login-card {
        padding: 2.125rem 1.5rem 1.75rem;
        border-radius: 1rem;
    }

    #loginScreen .fd-login-brand-logo {
        height: 4.5rem;
        max-width: min(100%, 16.25rem);
        margin-left: auto;
        margin-right: auto;
        object-position: center center;
    }

    #loginScreen .fd-login-title {
        font-size: 1.25rem;
    }
}

/* ==========================================================================
   V2 Sprint 13 — Login QA final (pacote público; app autenticado intocado)
   Cache: fivedesk-login-v2-s13
   ========================================================================== */

#loginScreen {
    overflow-x: clip;
}

#loginScreen .fd-login-field input:focus-visible,
#loginScreen .fd-login-forgot-panel input:focus-visible,
#loginScreen .fd-login-btn--google:focus-visible,
#loginScreen .fd-login-submit:focus-visible {
    outline: none;
    box-shadow: var(--fd-focus-ring);
}

#loginScreen .fd-login-submit.button-primary.button-large:hover:not(:disabled) {
    transform: none;
    box-shadow: none;
}

#loginScreen .fd-login-submit.button-primary.button-large:disabled {
    opacity: 0.48;
}

#loginScreen #loginAlert.fd-login-alert {
    line-height: 1.45;
}

#loginScreen .fd-login-forgot-panel .fd-login-link-btn:focus-visible {
    outline: none;
    box-shadow: var(--fd-focus-ring);
    border-radius: 0.375rem;
}

@media (max-width: 480px) {
    #loginScreen .fd-login-field input,
    #loginScreen .fd-login-forgot-panel input {
        font-size: 1rem;
    }

    #loginScreen .fd-login-btn--google,
    #loginScreen .fd-login-submit.button-primary.button-large {
        min-height: 3rem;
    }
}

/* TH-13: cinza + dark — login card dark surface fixes */
html[data-theme='cinza'] #loginScreen .fd-login-field label,
html[data-theme='dark'] #loginScreen .fd-login-field label {
    color: var(--fd-text);
}
html[data-theme='cinza'] #loginScreen .fd-login-control input:focus,
html[data-theme='dark'] #loginScreen .fd-login-control input:focus {
    background: var(--fd-field);
}
html[data-theme='cinza'] #loginScreen .fd-login-check,
html[data-theme='dark'] #loginScreen .fd-login-check {
    color: var(--fd-text-muted);
}
html[data-theme='cinza'] #loginScreen .fd-login-check-box,
html[data-theme='dark'] #loginScreen .fd-login-check-box {
    background: var(--fd-field);
    border-color: var(--fd-border);
}
html[data-theme='cinza'] #loginScreen .fd-login-btn--google,
html[data-theme='dark'] #loginScreen .fd-login-btn--google {
    background: var(--fd-field);
    border-color: var(--fd-border);
    color: var(--fd-text);
}
html[data-theme='cinza'] #loginScreen a.fd-login-btn--google:hover,
html[data-theme='dark'] #loginScreen a.fd-login-btn--google:hover {
    background: var(--fd-surface);
    border-color: var(--fd-border);
}

/* ---------- Nublado / Noite — login completo (promo + card) ---------- */
html[data-theme='cinza'] #loginScreen .fd-login-promo {
    background:
        radial-gradient(circle at 78% 8%, rgba(150, 185, 204, 0.34), transparent 32%),
        linear-gradient(145deg, #0b2234 0%, #173b57 52%, #204e6d 100%);
}
html[data-theme='cinza'] #loginScreen .fd-login-blob--a {
    background: rgba(121, 168, 193, 0.42);
}
html[data-theme='cinza'] #loginScreen .fd-login-blob--b {
    background: rgba(184, 207, 220, 0.18);
}
html[data-theme='cinza'] #loginScreen .fd-login-card {
    /* Superfície marinho gelo: logotipo nublado (Five claro) permanece legível. */
    background: linear-gradient(165deg, #1a3a52 0%, #143047 55%, #0f273a 100%);
    border-color: rgba(184, 207, 220, 0.28);
    box-shadow:
        0 1.5rem 3.375rem -1.75rem rgba(5, 20, 31, 0.78),
        inset 0 0.0625rem rgba(255, 255, 255, 0.12);
    color: #f2f7fa;
}
html[data-theme='cinza'] #loginScreen .fd-login-title {
    color: #f2f7fa;
}
html[data-theme='cinza'] #loginScreen .fd-login-subtitle,
html[data-theme='cinza'] #loginScreen .fd-login-or,
html[data-theme='cinza'] #loginScreen .fd-login-signup {
    color: rgba(242, 247, 250, 0.72);
}
html[data-theme='cinza'] #loginScreen .fd-login-field label {
    color: rgba(242, 247, 250, 0.88);
}
html[data-theme='cinza'] #loginScreen .fd-login-control input {
    background: rgba(8, 28, 42, 0.55);
    border-color: rgba(184, 207, 220, 0.28);
    color: #f2f7fa;
}
html[data-theme='cinza'] #loginScreen .fd-login-control input::placeholder {
    color: rgba(242, 247, 250, 0.42);
}
html[data-theme='cinza'] #loginScreen .fd-login-link-btn {
    color: #9ec5db;
}
html[data-theme='cinza'] #loginScreen .fd-login-toggle-pass {
    color: rgba(242, 247, 250, 0.7);
}
html[data-theme='cinza'] #loginScreen .fd-login-submit.button-primary,
html[data-theme='cinza'] #loginScreen .fd-login-btn--primary {
    background: linear-gradient(180deg, #5d8ba3, #315f78);
    border-color: rgba(225, 239, 246, 0.35);
    color: #ffffff !important;
    box-shadow: none;
    -webkit-text-fill-color: #ffffff;
}
html[data-theme='cinza'] #loginScreen .fd-login-submit.button-primary:hover:not(:disabled),
html[data-theme='cinza'] #loginScreen .fd-login-btn--primary:hover:not(:disabled):not([aria-disabled='true']) {
    background: linear-gradient(180deg, #6b9bb4, #3a6f8a);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    box-shadow: none;
}
html[data-theme='cinza'] #loginScreen .fd-login-btn--primary:disabled,
html[data-theme='cinza'] #loginScreen .fd-login-btn--primary[aria-disabled='true'] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    opacity: 0.78;
}
html[data-theme='cinza'] #loginScreen .fd-login-legal,
html[data-theme='cinza'] #loginScreen .fd-login-legal a {
    color: rgba(242, 247, 250, 0.55);
}

html[data-theme='dark'] #loginScreen .fd-login-promo {
    /* Void + poços lilás leves (profundidade alinhada à nebulosa). */
    background:
        radial-gradient(ellipse 50% 38% at 68% 18%, rgba(96, 55, 128, 0.20), transparent 62%),
        radial-gradient(ellipse 40% 35% at 22% 78%, rgba(72, 42, 112, 0.16), transparent 60%),
        linear-gradient(160deg, #01030a 0%, #020510 40%, #030817 72%, #050a19 100%);
}
html[data-theme='dark'] #loginScreen .login-cosmic-dust {
    z-index: 1;
}
html[data-theme='dark'] #loginScreen .fd-login-blob {
    z-index: 0;
}
html[data-theme='dark'] #loginScreen .fd-login-blob--a {
    background: rgba(12, 22, 48, 0.55);
    filter: blur(4rem);
}
html[data-theme='dark'] #loginScreen .fd-login-blob--b {
    background: rgba(6, 12, 28, 0.4);
    filter: blur(4rem);
}
html[data-theme='dark'] #loginScreen .fd-login-card {
    background: linear-gradient(165deg, #121821 0%, #0c121a 55%, #080d14 100%);
    border-color: rgba(180, 211, 238, 0.16);
    box-shadow:
        0 1.75rem 4rem -1.875rem rgba(0, 0, 0, 0.9),
        inset 0 0.0625rem rgba(198, 225, 248, 0.08);
    color: #e8eef9;
}
html[data-theme='dark'] #loginScreen .fd-login-title {
    color: #f4f9ff;
}
html[data-theme='dark'] #loginScreen .fd-login-subtitle,
html[data-theme='dark'] #loginScreen .fd-login-or,
html[data-theme='dark'] #loginScreen .fd-login-signup {
    color: rgba(232, 238, 249, 0.68);
}
html[data-theme='dark'] #loginScreen .fd-login-field label {
    color: rgba(232, 238, 249, 0.86);
}
html[data-theme='dark'] #loginScreen .fd-login-control input {
    background: rgba(4, 8, 14, 0.72);
    border-color: rgba(180, 211, 238, 0.18);
    color: #e8eef9;
}
html[data-theme='dark'] #loginScreen .fd-login-control input::placeholder {
    color: rgba(232, 238, 249, 0.38);
}
html[data-theme='dark'] #loginScreen .fd-login-link-btn {
    color: #7eb6ff;
}
html[data-theme='dark'] #loginScreen .fd-login-toggle-pass {
    color: rgba(232, 238, 249, 0.7);
}
html[data-theme='dark'] #loginScreen .fd-login-submit.button-primary,
html[data-theme='dark'] #loginScreen .fd-login-btn--primary {
    background: linear-gradient(180deg, #3b9bff, #2f7fe0);
    border-color: transparent;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    box-shadow: none;
}
html[data-theme='dark'] #loginScreen .fd-login-submit.button-primary:hover:not(:disabled),
html[data-theme='dark'] #loginScreen .fd-login-btn--primary:hover:not(:disabled):not([aria-disabled='true']) {
    background: linear-gradient(180deg, #54a8ff, #3b9bff);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    box-shadow: none;
}
html[data-theme='dark'] #loginScreen .fd-login-btn--primary:disabled,
html[data-theme='dark'] #loginScreen .fd-login-btn--primary[aria-disabled='true'] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    opacity: 0.78;
}
html[data-theme='dark'] #loginScreen .fd-login-legal,
html[data-theme='dark'] #loginScreen .fd-login-legal a {
    color: rgba(232, 238, 249, 0.48);
}

/* ============================================================
   Faixas de ALTURA da coluna promocional
   ============================================================
   O login so tinha media queries de largura (920, 480). O conteudo da promo
   soma ~64.375rem fixos de altura, e .fd-login-promo tem `overflow: hidden` —
   entao em qualquer viewport mais baixa que isso o card do grafico e cortado
   por baixo. Num monitor 1080p a barra do navegador come ~8.125rem, ou seja: a
   viewport real fica em ~900 e o corte acontece na maquina de todo mundo.

   Aqui a densidade cede, nao a informacao: barras e paddings encolhem, o
   titulo desce um degrau. Nenhum bloco e escondido. */
@media (max-height: 1000px) {
    #loginScreen .fd-login-chat { padding: 1.125rem 1.25rem; border-radius: 1.125rem; }
    #loginScreen .fd-login-chat-head { padding-bottom: 0.75rem; margin-bottom: 0.75rem; gap: 0.6875rem; }
    #loginScreen .fd-login-chat-av { width: 2.25rem; height: 2.25rem; }
    #loginScreen .fd-login-bub { font-size: 1rem; padding: 0.6875rem 0.875rem; margin-bottom: 0.5625rem; }
    #loginScreen .fd-login-quote { padding: 1.5rem 1.75rem; border-radius: 1.125rem; }
    #loginScreen .fd-login-stars { font-size: 1.375rem; margin-bottom: 0.875rem; }
    #loginScreen .fd-login-quote p { font-size: 1.3125rem; margin-bottom: 1.125rem; }
    #loginScreen .fd-login-who-pic { width: 3.25rem; height: 3.25rem; }

    #loginScreen .fd-login-slide { padding: 1.5rem 2.5rem; }
    #loginScreen .fd-login-slide-inner { max-width: 37.5rem; }
    #loginScreen .fd-login-eyebrow { font-size: 1rem; padding: 0.5rem 1.125rem; margin-bottom: 1.375rem; }
    #loginScreen .fd-login-promo-title { font-size: 3rem; margin-bottom: 0.875rem; }
    #loginScreen .fd-login-lead { font-size: 1.25rem; line-height: 1.5; margin-bottom: 1.75rem; }
    #loginScreen .fd-login-kpis { gap: 0.75rem; margin-bottom: 0.875rem; }
    #loginScreen .fd-login-kpi { padding: 0.875rem 1rem; border-radius: 0.75rem; }
    #loginScreen .fd-login-kpi-val { font-size: 1.75rem; }
    #loginScreen .fd-login-kpi-cap { font-size: 0.8125rem; }
    #loginScreen .fd-login-chartcard { padding: 1rem 1.125rem; border-radius: 0.875rem; }
    #loginScreen .fd-login-chartcard-title { font-size: 0.875rem; margin-bottom: 0.75rem; }
    #loginScreen .fd-login-bars { height: 4.75rem; gap: 0.625rem; }
}
@media (max-height: 930px) {
    #loginScreen .fd-login-chat { padding: 0.875rem 1rem; }
    #loginScreen .fd-login-chat-head { padding-bottom: 0.5625rem; margin-bottom: 0.5625rem; }
    #loginScreen .fd-login-chat-av { width: 1.875rem; height: 1.875rem; }
    #loginScreen .fd-login-bub { font-size: 0.875rem; padding: 0.5rem 0.6875rem; margin-bottom: 0.4375rem; }
    #loginScreen .fd-login-quote { padding: 1rem 1.125rem; }
    #loginScreen .fd-login-stars { font-size: 1.125rem; margin-bottom: 0.625rem; }
    #loginScreen .fd-login-quote p { font-size: 1.0625rem; margin-bottom: 0.875rem; }
    #loginScreen .fd-login-who-pic { width: 2.75rem; height: 2.75rem; font-size: 1rem; }
    #loginScreen .fd-login-who-name { font-size: 1rem; }
    #loginScreen .fd-login-who-role { font-size: 0.8125rem; }

    #loginScreen .fd-login-slide { padding: 1rem 2.25rem; }
    #loginScreen .fd-login-eyebrow { font-size: 0.875rem; margin-bottom: 1rem; }
    #loginScreen .fd-login-promo-title { font-size: 2.375rem; margin-bottom: 0.625rem; }
    #loginScreen .fd-login-lead { font-size: 1.0625rem; line-height: 1.4; margin-bottom: 1.125rem; }
    #loginScreen .fd-login-kpis { gap: 0.625rem; margin-bottom: 0.625rem; }
    #loginScreen .fd-login-kpi { padding: 0.5625rem 0.75rem; }
    #loginScreen .fd-login-kpi-val { font-size: 1.4375rem; }
    #loginScreen .fd-login-kpi-cap { font-size: 0.75rem; }
    #loginScreen .fd-login-chartcard { padding: 0.6875rem; }
    #loginScreen .fd-login-chartcard-title { font-size: 0.8125rem; margin-bottom: 0.5rem; }
    #loginScreen .fd-login-bars { height: 2.75rem; gap: 0.5rem; }
}
@media (max-height: 880px) {
    #loginScreen .fd-login-chat { padding: 0.6875rem; }
    #loginScreen .fd-login-chat-head { padding-bottom: 0.4375rem; margin-bottom: 0.4375rem; }
    #loginScreen .fd-login-chat-av { width: 1.6875rem; height: 1.6875rem; }
    #loginScreen .fd-login-bub { font-size: 0.8125rem; padding: 0.4375rem 0.625rem; margin-bottom: 0.375rem; }
    #loginScreen .fd-login-quote { padding: 0.75rem 0.875rem; }
    #loginScreen .fd-login-stars { font-size: 1rem; margin-bottom: 0.5rem; }
    #loginScreen .fd-login-quote p { font-size: 0.9375rem; margin-bottom: 0.625rem; }
    #loginScreen .fd-login-who { gap: 0.75rem; }
    #loginScreen .fd-login-who-pic { width: 2.375rem; height: 2.375rem; font-size: 0.875rem; }

    #loginScreen .fd-login-slide { padding: 0.625rem 2rem; }
    #loginScreen .fd-login-promo-title { font-size: 1.875rem; margin-bottom: 0.375rem; }
    #loginScreen .fd-login-lead { font-size: 0.9375rem; line-height: 1.35; margin-bottom: 0.75rem; }
    #loginScreen .fd-login-kpis { gap: 0.5rem; margin-bottom: 0.5rem; }
    #loginScreen .fd-login-kpi { padding: 0.375rem 0.5625rem; }
    #loginScreen .fd-login-kpi-val { font-size: 1.1875rem; }
    #loginScreen .fd-login-chartcard { padding: 0.5rem; }
    #loginScreen .fd-login-bars { height: 2.125rem; gap: 0.375rem; }
}
@media (max-height: 800px) {
    #loginScreen .fd-login-chat { padding: 0.5625rem; border-radius: 0.75rem; }
    #loginScreen .fd-login-chat-head { padding-bottom: 0.375rem; margin-bottom: 0.375rem; }
    #loginScreen .fd-login-chat-av { width: 1.5rem; height: 1.5rem; }
    #loginScreen .fd-login-bub { font-size: 0.75rem; padding: 0.375rem 0.5625rem; margin-bottom: 0.3125rem; }
    #loginScreen .fd-login-quote { padding: 0.75rem 0.875rem; border-radius: 0.75rem; }
    #loginScreen .fd-login-stars { font-size: 0.9375rem; margin-bottom: 0.375rem; }
    #loginScreen .fd-login-quote p { font-size: 0.875rem; margin-bottom: 0.5rem; }
    #loginScreen .fd-login-who-pic { width: 2.125rem; height: 2.125rem; font-size: 0.8125rem; }

    #loginScreen .fd-login-slide { padding: 0.625rem 1.75rem; }
    #loginScreen .fd-login-eyebrow { font-size: 0.8125rem; padding-top: 0.25rem; padding-bottom: 0.25rem; margin-bottom: 0.625rem; }
    #loginScreen .fd-login-promo-title { font-size: 1.75rem; margin-bottom: 0.375rem; }
    #loginScreen .fd-login-lead { font-size: 0.875rem; line-height: 1.35; margin-bottom: 0.625rem; }
    #loginScreen .fd-login-kpis { gap: 0.5rem; margin-bottom: 0.5rem; }
    #loginScreen .fd-login-kpi { padding: 0.375rem 0.5625rem; border-radius: 0.625rem; }
    #loginScreen .fd-login-kpi-val { font-size: 1.125rem; }
    #loginScreen .fd-login-kpi-cap { font-size: 0.625rem; margin-top: 0.125rem; }
    #loginScreen .fd-login-chartcard { padding: 0.5rem; border-radius: 0.625rem; }
    #loginScreen .fd-login-chartcard-title { font-size: 0.75rem; margin-bottom: 0.375rem; }
    #loginScreen .fd-login-bars { height: 1.875rem; gap: 0.375rem; }
}

/* Abaixo de ~49.375rem de viewport o card do grafico caberia so como uma tira de
   1.875rem — informacao nenhuma, ruido visual. Ele sai, e a mensagem que importa
   (titulo, chamada e os tres indicadores) fica inteira e legivel. */
@media (max-height: 820px) {
    /* Abaixo daqui os blocos ilustrativos caberiam so como tiras de 1.875rem —
       ruido, nao informacao. Sai a ilustracao, fica a mensagem: selo, titulo
       e chamada, em tamanho legivel. O formulario de login nunca foi afetado. */
    #loginScreen .fd-login-chartcard,
    #loginScreen .fd-login-chat,
    #loginScreen .fd-login-quote { display: none; }
}