/* =========================================================================
   Vizius Tasks — tema do painel.

   Estático de propósito: o servidor de produção não tem Node, então não há
   build de tema do Filament. Este arquivo redefine a aparência por cima dos
   componentes do Filament 3, usando as classes `.fi-*` que ele já emite.

   Carregado por um render hook no AdminPanelProvider (HEAD_END).
   Os tokens abaixo são a fonte da verdade e também são consumidos por
   board.css e crm.css — mexer aqui reflete no sistema inteiro.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */

:root {
    /* superfícies */
    --vt-bg: #f7f6f2;
    --vt-surface: #ffffff;
    --vt-surface-subtle: #fbfaf7;
    --vt-surface-sunken: #efede7;
    --vt-sidebar: #0e0f12;
    --vt-chip-dark: #17181c;

    /* texto */
    --vt-text: #17181c;
    --vt-text-2: #42454d;
    --vt-text-3: #6b6e76;
    --vt-text-faint: #8b8e97;

    /* linhas */
    --vt-border: #e7e4dd;
    --vt-border-inner: #f0ede7;
    --vt-divider: #edeae3;

    /* marca */
    --vt-amber: #f5a524;
    --vt-amber-hover: #e09410;
    --vt-amber-ink: #8a5a00;
    --vt-amber-ink-strong: #6f4a00;
    --vt-amber-light: #f5c15e;
    --vt-amber-wash: #fbf0da;
    --vt-amber-wash-border: #f0dcb0;

    /* semânticas */
    --vt-success: #1e7f4f;
    --vt-success-wash: #eaf4ee;
    --vt-danger: #c4362c;
    --vt-danger-2: #a63a31;
    --vt-danger-wash: #fbeae8;
    --vt-danger-wash-border: #e7c9c5;
    --vt-product: #3a5b8c;
    --vt-product-wash: #eaeef6;
    --vt-service: #6d4c93;
    --vt-service-wash: #f1ecf6;

    /* forma */
    --vt-radius: 9px;
    --vt-radius-sm: 6px;
    --vt-radius-card: 8px;
    --vt-shadow-card: 0 1px 2px rgba(20, 20, 20, 0.04);
    --vt-shadow-card-hover: 0 3px 8px rgba(20, 20, 20, 0.08);
    --vt-sidebar-width: 232px;

    /* tipografia */
    --vt-font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --vt-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* O tema escuro converte só as superfícies e o texto: âmbar, verde, vermelho,
   azul e roxo mantêm o matiz (só os fundos translúcidos sobem de luminosidade). */
.dark {
    --vt-bg: #0e0f12;
    --vt-surface: #17181c;
    --vt-surface-subtle: #1c1e22;
    --vt-surface-sunken: #131417;
    --vt-chip-dark: #24262b;

    --vt-text: #ececec;
    --vt-text-2: #c3c6cd;
    --vt-text-3: #a7aab3;
    --vt-text-faint: #80838b;

    --vt-border: rgba(255, 255, 255, 0.08);
    --vt-border-inner: rgba(255, 255, 255, 0.06);
    --vt-divider: rgba(255, 255, 255, 0.06);

    --vt-amber-ink: var(--vt-amber-light);
    --vt-amber-ink-strong: var(--vt-amber);
    --vt-amber-wash: rgba(245, 165, 36, 0.14);
    --vt-amber-wash-border: rgba(245, 165, 36, 0.28);

    --vt-success: #4cbb85;
    --vt-success-wash: rgba(30, 127, 79, 0.18);
    --vt-danger: #e8695e;
    --vt-danger-2: #e8695e;
    --vt-danger-wash: rgba(196, 54, 44, 0.18);
    --vt-danger-wash-border: rgba(196, 54, 44, 0.32);
    --vt-product: #8fabd8;
    --vt-product-wash: rgba(58, 91, 140, 0.22);
    --vt-service: #b39ad4;
    --vt-service-wash: rgba(109, 76, 147, 0.22);

    --vt-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
    --vt-shadow-card-hover: 0 3px 10px rgba(0, 0, 0, 0.45);
}

/* -------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------- */

.fi-body,
body.fi-body {
    background-color: var(--vt-bg);
    font-family: var(--vt-font-sans);
    color: var(--vt-text);
    -webkit-font-smoothing: antialiased;
}

/* Números em mono são o que dá alinhamento e ritmo técnico às tabelas.
   `.vt-num` é aplicada nas views; o resto pega automaticamente. */
.vt-num,
.fi-wi-stats-overview-stat-value,
.fi-ta-text-item-label:has(+ .vt-num) {
    font-family: var(--vt-font-mono);
    font-variant-numeric: tabular-nums;
}

/* Rótulo de seção: caixa-alta discreta, o recurso de hierarquia que substitui
   as linhas pesadas que foram rejeitadas. */
.vt-section-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vt-text-3);
    margin-bottom: 0.75rem;
}

/* -------------------------------------------------------------------------
   3. Sidebar — escura nos dois temas (é a âncora da identidade)
   ------------------------------------------------------------------------- */

.fi-sidebar {
    background-color: var(--vt-sidebar);
    border-right: none;
    width: var(--vt-sidebar-width);
}

.fi-sidebar-header {
    background-color: var(--vt-sidebar);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

.fi-sidebar-nav {
    background-color: var(--vt-sidebar);
    padding-inline: 0.5rem;
}

/* Rótulo de grupo: separa sem desenhar linha (valores do protótipo).
   Prefixo .fi-sidebar para vencer o `dark:text-gray-400` do Filament. */
.fi-sidebar .fi-sidebar-group-label {
    color: #6a6d76;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding-inline: 0.75rem;
}

.fi-sidebar-group + .fi-sidebar-group {
    margin-top: 1.25rem;
}

/*
 * IMPORTANTE: o texto do item mora no .fi-sidebar-item-label (um <span> filho),
 * que o Filament pinta por TEMA — `text-gray-700 dark:text-gray-200`. Como a
 * sidebar é escura NOS DOIS temas, colorir o <a> pai não adianta (o span tem
 * cor própria): no tema claro o texto saía escuro sobre fundo escuro.
 * Por isso colorimos o label/ícone direto, e o prefixo .fi-sidebar dá
 * especificidade para vencer as variantes `dark:` do Filament (0,2,0).
 */
.fi-sidebar-item-button {
    position: relative;
    border-radius: var(--vt-radius-sm);
    padding-block: 0.5rem;
}

/* Item inativo. */
.fi-sidebar .fi-sidebar-item-label {
    color: #b9bcc4;
    font-size: 13.5px;
    font-weight: 400;
}

.fi-sidebar .fi-sidebar-item-icon {
    color: #9296a0;
}

/* Hover: o item inteiro acende (texto e ícone brancos). */
.fi-sidebar-item-button:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

.fi-sidebar .fi-sidebar-item-button:hover .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: #ffffff;
}

/* Item ativo: fundo âmbar translúcido; texto âmbar claro em 600; barra de 3px. */
.fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: rgba(245, 165, 36, 0.13);
}

.fi-sidebar-item-active .fi-sidebar-item-button:hover {
    background-color: rgba(245, 165, 36, 0.18);
}

.fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-label {
    color: var(--vt-amber-light);
    font-weight: 600;
}

.fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-icon {
    color: var(--vt-amber);
}

.fi-sidebar-item-active .fi-sidebar-item-button::before {
    content: '';
    position: absolute;
    inset-block: 6px;
    inset-inline-start: -0.5rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background-color: var(--vt-amber);
}

/* Rodapé com o usuário. */
.fi-sidebar .fi-user-menu,
.fi-sidebar-footer {
    background-color: var(--vt-sidebar);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.fi-logo img,
.fi-logo {
    max-height: 2.25rem;
    width: auto;
}

/* -------------------------------------------------------------------------
   4. Topbar e área de conteúdo
   ------------------------------------------------------------------------- */

.fi-topbar > nav {
    background-color: var(--vt-surface);
    border-bottom: 1px solid var(--vt-border);
    box-shadow: none;
}

.fi-main {
    max-width: 100%;
    padding-inline: 1.75rem;
}

@media (max-width: 640px) {
    .fi-main {
        padding-inline: 0.75rem;
    }
}

.fi-header-heading {
    font-size: 16px;
    font-weight: 600;
    color: var(--vt-text);
}

.fi-header-subheading {
    color: var(--vt-text-3);
    font-size: 13px;
}

/* O título da página mora na barra do topo (como no protótipo: título à
   esquerda, busca à direita), em vez de duplicar uma linha no conteúdo.
   Feito por posicionamento fixo sobre a faixa do topbar — só no desktop,
   porque o deslocamento depende da largura da sidebar. */
@media (min-width: 1024px) {
    .fi-header-heading {
        position: fixed;
        top: 0;
        inset-inline-start: calc(var(--vt-sidebar-width) + 1.75rem);
        height: 4rem; /* mesma altura do nav do topbar */
        display: flex;
        align-items: center;
        z-index: 25; /* acima do topbar (z-20), abaixo de modais */
        max-width: calc(100vw - var(--vt-sidebar-width) - 26rem); /* não invade a busca */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Sem o título, o header do conteúdo fica só com breadcrumb e ações;
       o breadcrumb viraria um resto solto — o título no topo já situa.
       (Não esconder o .fi-header inteiro: o título fixo é filho dele e
       sumiria junto.) */
    .fi-header .fi-breadcrumbs {
        display: none;
    }

    /* Header que ficou sem nada visível (sem botões de ação) sai do fluxo,
       senão ele soma um gap fantasma no topo de toda página. `absolute` em
       vez de `display:none` porque o título fixo é filho dele. */
    .fi-header:not(:has(.fi-ac)) {
        position: absolute;
        visibility: hidden;
    }

    .fi-header:not(:has(.fi-ac)) .fi-header-heading {
        visibility: visible;
    }
}

/* Ritmo vertical das páginas: o padrão do Filament (2rem de gap e de
   padding) fica arejado demais com o conteúdo em largura total. */
.fi-page > section {
    row-gap: 1.5rem;
    padding-block: 1.5rem 2.5rem;
}

/* -------------------------------------------------------------------------
   5. Superfícies: seções, tabelas, cards
   ------------------------------------------------------------------------- */

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-fo-component-ctn > .fi-section {
    background-color: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius);
    box-shadow: none;
}

.fi-section-header,
.fi-ta-header {
    border-bottom: 1px solid var(--vt-border-inner);
}

/* Cabeçalho de tabela: caixa-alta pequena, o peso vem da tipografia. */
.fi-ta-header-cell {
    background-color: var(--vt-surface-subtle);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vt-text-3);
}

.fi-ta-row {
    border-color: var(--vt-border-inner);
}

.fi-ta-row:hover {
    background-color: var(--vt-surface-subtle);
}

.fi-ta-cell {
    font-size: 13px;
    color: var(--vt-text-2);
}

.fi-ta-text-item-label {
    color: var(--vt-text-2);
}

/* Colunas numéricas alinhadas à direita já vêm com `alignment` do Filament;
   aqui só garantimos a fonte mono para não perder o alinhamento óptico. */
.fi-ta-cell[class*='text-end'] .fi-ta-text-item-label,
.fi-ta-cell .vt-num {
    font-family: var(--vt-font-mono);
    font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   6. Badges — raio 9px, 11.5px/600
   ------------------------------------------------------------------------- */

.fi-badge {
    border-radius: 9px;
    padding: 3px 9px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0;
    box-shadow: none;
}

/* -------------------------------------------------------------------------
   7. Botões e campos
   ------------------------------------------------------------------------- */

.fi-btn {
    border-radius: var(--vt-radius-sm);
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
}

.fi-btn.fi-color-primary,
.fi-btn-color-primary {
    background-color: var(--vt-amber);
    color: #17181c;
}

.fi-btn.fi-color-primary:hover,
.fi-btn-color-primary:hover {
    background-color: var(--vt-amber-hover);
}

.fi-input,
.fi-select-input,
.fi-input-wrp {
    border-radius: var(--vt-radius-sm);
    border-color: var(--vt-border);
    background-color: var(--vt-surface);
    font-size: 13px;
}

.fi-input-wrp:focus-within {
    border-color: var(--vt-amber);
    box-shadow: 0 0 0 3px rgba(245, 165, 36, 0.18);
    outline: none;
}

.fi-input::placeholder {
    color: var(--vt-text-faint);
}

.fi-fo-field-wrp-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--vt-text-2);
}

/* -------------------------------------------------------------------------
   8. Dashboard: saudação, rótulos de seção e stat cards
   ------------------------------------------------------------------------- */

.vt-greeting__title {
    font-size: 22px;
    font-weight: 600;
    color: var(--vt-text);
    letter-spacing: -0.01em;
}

.vt-greeting__date {
    font-size: 13px;
    color: var(--vt-text-3);
    margin-top: 0.125rem;
}

/* Apêndice da linha da data — metadado, não informação de negócio. */
.vt-greeting__updated {
    font-size: 12px;
    color: var(--vt-text-faint);
}

/* O heading de cada bloco de stats vira rótulo de seção — é ele que agrupa
   "Meu trabalho / Comercial / Financeiro" sem precisar de linha divisória. */
.fi-wi-stats-overview-header-heading {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vt-text-3);
}

.vt-stat {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.125rem;
    background-color: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius);
}

.vt-stat--link {
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vt-stat--link:hover {
    border-color: #c9c5bb;
    box-shadow: var(--vt-shadow-card-hover);
}

.vt-stat__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.vt-stat__label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--vt-text-3);
}

.vt-stat__aside {
    font-size: 12px;
    color: var(--vt-text-faint);
}

.vt-stat__value {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--vt-text);
    margin-top: 0.375rem;
}

.vt-stat__suffix {
    font-size: 15px;
    font-weight: 400;
    color: var(--vt-text-faint);
    margin-inline-start: 0.125rem;
}

.vt-stat__description {
    font-size: 12px;
    color: var(--vt-text-3);
    margin-top: 0.5rem;
}

.vt-stat__items {
    margin-top: 0.625rem;
    border-top: 1px solid var(--vt-border-inner);
}

.vt-stat__items li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.4375rem;
    font-size: 12.5px;
}

.vt-stat__item-label {
    color: var(--vt-text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vt-stat__item-value {
    color: var(--vt-text);
    font-weight: 500;
    flex: none;
}

/* Ação inline da mini-lista (aprovar compra sem sair do dashboard). */
.vt-stat__item-action {
    flex: none;
    border: 1px solid var(--vt-success-wash);
    border-radius: 5px;
    padding: 1px 8px;
    background: var(--vt-success-wash);
    color: var(--vt-success);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.vt-stat__item-action:hover {
    border-color: var(--vt-success);
}

.vt-stat__item-action:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Variante de atraso/vencido — o vermelho é reservado a isso no sistema todo. */
.vt-stat--danger {
    background-color: var(--vt-danger-wash);
    border-color: var(--vt-danger-wash-border);
}

.vt-stat--danger .vt-stat__label,
.vt-stat--danger .vt-stat__value,
.vt-stat--danger .vt-stat__description {
    color: var(--vt-danger);
}

/* Barras -------------------------------------------------------------------- */

.vt-bar {
    height: 5px;
    border-radius: 999px;
    background-color: var(--vt-surface-sunken);
    overflow: hidden;
    margin-top: 0.625rem;
}

.vt-bar__fill {
    height: 100%;
    border-radius: 999px;
}

.vt-bar__fill--amber {
    background-color: var(--vt-amber);
}

.vt-bar__fill--success {
    background-color: var(--vt-success);
}

.vt-bar__fill--warning {
    background-color: var(--vt-amber);
}

.vt-bar__fill--danger {
    background-color: var(--vt-danger);
}

/* Barra segmentada do funil: as etapas esquentam conforme avançam. */
.vt-segbar {
    display: flex;
    gap: 3px;
    margin-top: 0.75rem;
}

.vt-segbar__col {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.vt-segbar__part {
    height: 5px;
    border-radius: 999px;
    background-color: var(--vt-amber);
}

.vt-segbar__part--1 {
    background-color: #e7e2d4;
}

.vt-segbar__part--2 {
    background-color: #d8c08a;
}

.vt-segbar__part--3 {
    background-color: var(--vt-amber-light);
}

.vt-segbar__label {
    font-size: 11px;
    color: var(--vt-text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark .vt-segbar__part--1 {
    background-color: rgba(245, 165, 36, 0.22);
}

.dark .vt-segbar__part--2 {
    background-color: rgba(245, 165, 36, 0.45);
}

/* -------------------------------------------------------------------------
   9. Detalhe do projeto (abas) e linhas de listagem própria
   ------------------------------------------------------------------------- */

.vt-back {
    display: inline-block;
    font-size: 12.5px;
    color: var(--vt-text-3);
    text-decoration: none;
}

.vt-back:hover {
    color: var(--vt-text);
}

.vt-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.vt-detail-head__tags {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.vt-detail-head__name {
    font-size: 20px;
    font-weight: 600;
    color: var(--vt-text);
    margin-top: 0.375rem;
}

.vt-detail-head__sub {
    font-size: 12.5px;
    color: var(--vt-text-3);
    margin-top: 0.125rem;
}

/* Código do projeto: mono em chip, para bater com o resto dos números. */
.vt-code {
    padding: 2px 7px;
    border-radius: 5px;
    background: var(--vt-surface-sunken);
    color: var(--vt-text-2);
    font-size: 11.5px;
    font-weight: 500;
}

.vt-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 9px;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--vt-surface-sunken);
    color: var(--vt-text-2);
}

.vt-badge--ativo,
.vt-badge--aprovada {
    background: var(--vt-success-wash);
    color: var(--vt-success);
}

.vt-badge--pendente {
    background: var(--vt-amber-wash);
    color: var(--vt-amber-ink);
}

.vt-badge--rejeitada {
    background: var(--vt-danger-wash);
    color: var(--vt-danger);
}

/* A coluna do board colore o badge da tarefa, mantendo a leitura do kanban. */
.vt-badge--column {
    background: color-mix(in srgb, var(--column-color) 14%, transparent);
    color: var(--column-color);
}

.vt-money-card {
    display: flex;
    gap: 1.75rem;
    padding: 0.875rem 1.125rem;
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius);
}

.vt-money-card__label {
    display: block;
    font-size: 11.5px;
    color: var(--vt-text-3);
}

.vt-money-card__value {
    display: block;
    margin-top: 0.1875rem;
    font-size: 15px;
    font-weight: 500;
    color: var(--vt-text-2);
}

.vt-money-card__value--total {
    color: var(--vt-text);
    font-weight: 600;
}

/* Abas: a ativa se distingue por peso e sublinhado, não por caixa. */
.vt-tabs {
    display: flex;
    gap: 1.5rem;
    border-bottom: 1px solid var(--vt-border);
}

.vt-tab {
    padding: 0.5rem 0;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: none;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--vt-text-3);
    cursor: pointer;
}

.vt-tab:hover {
    color: var(--vt-text-2);
}

.vt-tab.is-active {
    font-weight: 600;
    color: var(--vt-text);
    border-bottom-color: var(--vt-amber);
}

.vt-panel {
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius);
}

.vt-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.6875rem 1rem;
    font-size: 13px;
}

.vt-row + .vt-row {
    border-top: 1px solid var(--vt-border-inner);
}

.vt-row:hover {
    background: var(--vt-surface-subtle);
}

.vt-row__title {
    flex: 1;
    min-width: 0;
    color: var(--vt-text);
}

.vt-row__hint {
    display: block;
    font-size: 11.5px;
    color: var(--vt-text-faint);
}

.vt-row__side {
    color: var(--vt-text-3);
    font-size: 12.5px;
}

.vt-row__date,
.vt-row__money {
    color: var(--vt-text-2);
    font-size: 12.5px;
    text-align: end;
    min-width: 5.5rem;
}

.vt-row__money.is-over,
.vt-row__date.is-overdue {
    color: var(--vt-danger);
    font-weight: 600;
}

.vt-consumption {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 7rem;
}

.vt-consumption .vt-bar {
    flex: 1;
    margin-top: 0;
}

.vt-consumption__pct {
    font-size: 11.5px;
    color: var(--vt-text-3);
    min-width: 2.5rem;
    text-align: end;
}

/* -------------------------------------------------------------------------
   10. Login
   ------------------------------------------------------------------------- */

/* Fundo escuro com um brilho âmbar sutil no topo — a primeira impressão da
   marca antes de entrar no sistema. */
.fi-simple-layout {
    background-color: var(--vt-sidebar);
    background-image: radial-gradient(60% 45% at 50% 0%, rgba(245, 165, 36, 0.16), transparent 70%);
}

.fi-simple-main {
    background-color: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    max-width: 400px;
    padding: 2rem;
}

.dark .fi-simple-main {
    border-color: rgba(255, 255, 255, 0.08);
}

.fi-simple-header-heading {
    font-size: 17px;
    font-weight: 600;
    color: var(--vt-text);
}

/* Botão do SSO: neutro e largo, com a marca da Microsoft à esquerda. */
.vt-sso {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1rem;
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-sm);
    background: var(--vt-surface);
    color: var(--vt-text);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.vt-sso:hover {
    background: var(--vt-surface-subtle);
    border-color: #c9c5bb;
}

.dark .vt-sso:hover {
    border-color: rgba(255, 255, 255, 0.18);
}

.vt-sso__mark {
    width: 15px;
    height: 15px;
    flex: none;
}

.vt-sso__hint {
    margin-top: 0.5rem;
    text-align: center;
    font-size: 11.5px;
    color: var(--vt-text-faint);
}

/* Divisor com rótulo: o filete passa por trás do texto. */
.vt-login__divider {
    position: relative;
    margin: 1.25rem 0;
    text-align: center;
}

.vt-login__divider::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 50%;
    border-top: 1px solid var(--vt-border);
}

.vt-login__divider span {
    position: relative;
    padding: 0 0.75rem;
    background: var(--vt-surface);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vt-text-faint);
}

.vt-login__error {
    margin-bottom: 1rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--vt-danger-wash-border);
    border-radius: var(--vt-radius-sm);
    background: var(--vt-danger-wash);
    color: var(--vt-danger);
    font-size: 12.5px;
}