:root {
    --ink: #0A1628;
    --ink-soft: #3D4B5C;
    --paper: #F3F5F8;
    --white: #FFFFFF;
    --line: #E2E8F0;
    --accent: #2463EB;
    --accent-deep: #1A4FD0;
    --mint: #1A9B73;
    --coral: #E25B4C;
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

html, body {
    background-color: var(--paper);
    background-image:
        var(--grain),
        repeating-linear-gradient(to bottom, transparent 0 27px, rgba(10, 22, 40, 0.028) 27px 28px);
    background-size: 160px 160px, 100% 28px;
    background-attachment: fixed;
    color: var(--ink);
    font-family: "Figtree", sans-serif;
}

/* ── Rótulo flutuante x autofill do navegador ────────────────────────────
   Quando o Chrome/Edge autopreenche um MudTextField (ex.: e-mail/senha do
   login), o valor aparece só na camada visual do navegador — o evento que o
   MudBlazor escuta pra encolher o rótulo pro topo (via style inline calculado
   a partir do Value do componente) nunca dispara, e o rótulo ("E-mail",
   "Senha") fica sobreposto ao texto preenchido. `:-webkit-autofill` é o único
   sinal que o navegador expõe nesse momento; força aqui a mesma posição de
   "encolhido" que o MudBlazor já usa quando o campo tem valor de verdade
   (`!important` necessário pra vencer o style inline calculado com o campo
   ainda "vazio" do ponto de vista do Blazor). */
.mud-input-control-input-container:has(input:-webkit-autofill) > .mud-input-label {
    transform: translate(14px, -6px) scale(0.75) !important;
}

.mud-typography,
.mud-table,
.mud-table-root,
.mud-table-cell,
.mud-table-head,
.mud-table-body,
.mud-table-foot,
.mud-table-sort-label,
.mud-table-pagination,
.mud-chip,
.mud-input,
.mud-input input,
.mud-input textarea,
.mud-select,
.mud-button-root,
.mud-nav-link,
.mud-breadcrumbs {
    font-family: "Figtree", sans-serif !important;
}

/* Stripe/Linear/GitHub: a tabela cabe na tela. Texto longo corta com reticências;
   tooltip no markup mostra o valor completo. Relatórios largos usam .opuz-table-wide. */
.mud-table-root {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 100%;
    max-width: 100%;
}

/* Linha "Nenhum registro encontrado"/loading do MudTable usa <th colspan="1000">.
   Sob table-layout:fixed o Chrome usa esse colspan absurdo pra inferir a
   quantidade de colunas da tabela inteira, espremendo o cabeçalho real (2-6
   colunas) em frações de 1/1000 — cabeçalho vira texto sobreposto ilegível.
   Sem dado nenhum pra estourar a tela mesmo, voltar pro layout automático só
   nesse estado resolve — o cabeçalho calcula largura pelo conteúdo de novo
   e a mensagem de "nenhum item" ocupa a linha inteira, centralizada. */
table:has(.mud-table-empty-row) {
    table-layout: auto !important;
}

.mud-table-empty-row {
    text-align: center !important;
}

.mud-table-head .mud-table-cell,
.mud-table-head .mud-table-cell .mud-button-root,
.mud-table-head .mud-table-sort-label {
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    color: rgba(0, 0, 0, 0.45) !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
}

.mud-table-head .mud-table-cell {
    padding: 4px 10px !important;
    white-space: nowrap;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid var(--line) !important;
    background: #fff !important;
}

.mud-table-body .mud-table-cell,
.mud-table-foot .mud-table-cell {
    font-size: 0.7rem !important;
    color: #0B1F3A !important;
    font-weight: 500 !important;
    padding: 4px 10px !important;
    line-height: 1.3 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid var(--line) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mud-table-body .mud-table-cell .mud-tooltip-root {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mud-table-body .mud-table-cell:last-child {
    overflow: visible;
    white-space: nowrap;
}

/* Coluna de ações (ícones envolvidos por MudTooltip): MudTooltip renderiza seu wrapper
   (.mud-tooltip-root) como display:block por padrão — cada ícone acaba numa linha própria,
   empilhados na vertical, em vez de lado a lado. Força inline-flex só na coluna de ações (a
   última célula de cada linha, por convenção em todas as páginas de listagem) pra ficar
   horizontal sem afetar tooltips usados em outro contexto (ex.: dentro de cards). */
.mud-table-body .mud-table-cell:last-child .mud-tooltip-root {
    display: inline-flex !important;
    vertical-align: middle;
}

.mud-table-body .mud-table-cell:last-child .mud-icon-button {
    margin: 0 1px;
}

/* Zebra (linhas intercaladas) em toda MudTable do sistema — antes dependia de `Striped="true"`
   por página (nenhuma tinha), então nunca aparecia; aplicado globalmente para valer em todas as
   páginas de listagem sem precisar tocar cada uma individualmente. */
.mud-table-body .mud-table-row:nth-of-type(odd),
.mud-table-body .mud-table-row:nth-of-type(odd) .mud-table-cell {
    background-color: rgba(10, 22, 40, 0.03) !important;
}

.mud-table-hover .mud-table-body .mud-table-row:hover .mud-table-cell {
    background-color: rgba(10, 22, 40, 0.065) !important;
}

.mud-table .mud-chip {
    height: 18px;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
}

/* ── Diálogos mais compactos ──────────────────────────────────────────── */
.mud-dialog-title {
    padding: 10px 16px !important;
}

.mud-dialog-title .mud-typography {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
}

.mud-dialog-title .mud-icon-root {
    font-size: 1.15rem !important;
}

.mud-dialog-content {
    padding: 12px 16px !important;
}

.mud-dialog-content .mud-typography-subtitle1 {
    font-size: 0.82rem !important;
}

.mud-dialog-actions {
    padding: 8px 16px !important;
    gap: 6px !important;
    border-top: 1px solid var(--line);
    background: var(--paper);
}

/* ── Header de página (breadcrumb + busca + ação principal na mesma linha) ─
   Substitui título repetido acima da grid — o nome da página já aparece na
   aba (PaginasAbertasBar). */
.opuz-page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.opuz-page-header .mud-breadcrumbs {
    flex: 0 1 auto;
    min-width: 0;
}

.opuz-page-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
    margin-left: auto;
}

.opuz-page-header-actions .mud-input-control {
    min-width: 200px;
}

@media (max-width: 760px) {
    .opuz-page-header-actions .mud-input-control {
        min-width: 0;
        flex: 1 1 160px;
    }
}

/* ── Abas de páginas abertas (PaginasAbertasBar) ─────────────────────────
   Fica dentro do MudMainContent, acima de .opuz-main-inner — mesmo espírito
   de aba de navegador/editor: clique troca, X fecha, rolagem horizontal
   quando não cabem todas. */
.opuz-tabstrip {
    display: flex;
    align-items: stretch;
    gap: 2px;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: 4px 8px 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.opuz-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 6px 5px 10px;
    border-radius: 6px 6px 0 0;
    background: var(--paper);
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    border-bottom: none;
    flex-shrink: 0;
    max-width: 220px;
}

.opuz-tab.is-active {
    background: var(--white);
    color: var(--ink);
    border-color: var(--line);
    box-shadow: 0 -2px 0 var(--accent) inset;
}

.opuz-tab.is-arrastando {
    opacity: 0.4;
}

.opuz-tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opuz-tab-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    color: rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
}

.opuz-tab-close .mud-icon-root {
    font-size: 0.85rem;
}

.opuz-tab-close:hover {
    background: var(--line);
    color: var(--ink);
}

@media (max-width: 760px) {
    .opuz-tab-label {
        max-width: 110px;
    }
}

/* Corpo de cada aba (AbaHost) — todas ficam montadas, só a ativa aparece.
   É isso que preserva filtro e grid carregada ao trocar de aba. */
.opuz-aba-corpo {
    min-width: 0;
}

.opuz-aba-corpo[hidden] {
    display: none !important;
}

.opuz-app-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 6px;
}

.opuz-app-mark,
.opuz-mark {
    width: 28px;
    height: 28px;
    display: block;
    flex-shrink: 0;
}

.opuz-app-wordmark {
    font-family: "Figtree", sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    font-size: 1.05rem !important;
    color: var(--ink) !important;
}

.opuz-app-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    display: inline-block;
    flex-shrink: 0;
}

.opuz-appbar.mud-appbar {
    background: rgba(243, 245, 248, 0.72) !important;
    color: var(--ink) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    box-shadow: none !important;
}

.opuz-appbar-rule {
    width: 1px;
    height: 20px;
    background: var(--line);
    margin: 0 8px;
}

.opuz-appbar-select {
    color: var(--ink);
    min-width: 220px;
    max-width: 280px;
    margin-left: 16px;
}

.opuz-appbar-select .mud-input-outlined-border {
    border-color: var(--line) !important;
}

.opuz-appbar-select .mud-input {
    color: var(--ink) !important;
    font-weight: 600;
}

.opuz-drawer {
    border-right: 1px solid var(--line) !important;
    background: var(--white) !important;
}

.opuz-drawer .mud-nav-link {
    font-weight: 600;
    border-radius: 10px;
}

.opuz-drawer .mud-nav-link.active,
.opuz-drawer .mud-nav-link.mud-nav-link-active {
    color: var(--accent) !important;
    background: rgba(36, 99, 235, 0.08) !important;
}

.opuz-drawer .mud-nav-group-title {
    font-weight: 700;
    letter-spacing: 0;
}

.opuz-main {
    background: transparent;
}

.opuz-main-inner {
    padding: 16px 20px 24px;
    min-height: 100vh;
}

.opuz-shell .mud-button {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.opuz-shell .mud-button-filled {
    font-weight: 700 !important;
    box-shadow: none !important;
}

.opuz-main-inner .mud-elevation-1,
.opuz-main-inner .mud-elevation-2,
.opuz-main-inner .mud-elevation-4 {
    box-shadow: none !important;
    border: 1px solid var(--line);
}

@media print {
    html, body {
        background: #fff !important;
        background-image: none !important;
    }

    .opuz-main-inner {
        padding: 0;
        min-height: 0;
    }
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #1A9B73;
}

.invalid {
    outline: 1px solid #E25B4C;
}

.validation-message {
    color: #E25B4C;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ── Auth (login / recuperar senha / cadastrar) ─────────────────────────────
   Mesmo sistema visual da landing page redesenhada: tipografia grotesca +
   mono tabular para dinheiro, sem textura decorativa, fio de régua abrindo o
   bloco. Os tokens são prefixados --auth-* e vivem só dentro de .opuz-auth,
   para não vazar no app autenticado, que ainda usa a paleta antiga. */
.opuz-auth {
    --auth-ink:         #0B1220;
    --auth-ink-2:       #1E2A3E;
    --auth-slate:       #57647C;
    --auth-slate-2:     #7E8BA3;
    --auth-line:        #E3E9F3;
    --auth-line-strong: #CFD8E8;
    --auth-haze:        #F4F7FB;
    --auth-accent:      #2463EB;
    --auth-accent-deep: #1541A8;
    --auth-pos:         #0E8A60;
    --auth-neg:         #C0453C;
    --auth-warn:        #A8710D;

    --auth-sans: "Schibsted Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
    --auth-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

    display: flex;
    min-height: 100vh;
    width: 100%;
    padding: clamp(24px, 4vh, 56px) clamp(20px, 4vw, 48px);
    font-family: var(--auth-sans);
    color: var(--auth-ink);
    background:
        radial-gradient(760px 420px at 62% -14%, rgba(36, 99, 235, 0.10), transparent 62%),
        linear-gradient(180deg, #FBFCFE 0%, #FFFFFF 58%);
}

/* O `margin: auto` centra as duas colunas sem cortar o topo quando o conteúdo
   passa da viewport — antes cada coluna tinha `overflow-y: auto` e o extrato
   ficava decepado no rodapé, sem barra de rolagem visível. A página inteira
   rola agora, e as colunas ficam encostadas uma na outra em vez de espalhadas
   pelas bordas da tela. */
.opuz-auth-inner {
    margin: auto;
    width: 100%;
    max-width: 1080px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}

.opuz-auth .mud-typography,
.opuz-auth .mud-input,
.opuz-auth .mud-input-label,
.opuz-auth .mud-button-root {
    font-family: var(--auth-sans) !important;
}

.opuz-auth :focus-visible {
    outline: 2px solid var(--auth-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Vitrine ───────────────────────────────────────────────────────────── */

.opuz-auth-showcase {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Em telas baixas o extrato não cabe junto do título; sai de cena em vez de
   empurrar o formulário para fora da dobra. */
@media (max-height: 780px) {
    .opuz-auth-extrato { display: none; }
}

/* O banner LGPD é fixo no rodapé e cobria o fim das telas de auth. */
.opuz-auth--com-aviso { padding-bottom: 170px; }

.opuz-auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    margin-bottom: 26px;
    text-decoration: none;
    color: inherit;
}

.opuz-auth-brand-icon {
    width: 28px;
    height: 28px;
    display: block;
    flex-shrink: 0;
}

.opuz-auth-brand-mark {
    font-family: var(--auth-sans);
    font-weight: 700;
    letter-spacing: -0.03em;
    font-size: 1.16rem;
    color: var(--auth-ink);
}

/* Eyebrow com o tique de régua — mesmo motivo das seções da landing. */
.opuz-auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--auth-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--auth-accent);
}

.opuz-auth-eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: currentColor;
    flex-shrink: 0;
}

.opuz-auth-title {
    font-family: var(--auth-sans);
    font-size: clamp(1.75rem, 2.6vw, 2.35rem);
    font-weight: 700;
    letter-spacing: -0.036em;
    line-height: 1.08;
    color: var(--auth-ink);
    margin: 16px 0 0;
    max-width: 17ch;
}

.opuz-auth-lead {
    color: var(--auth-slate);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 30rem;
    margin: 14px 0 26px;
}

.opuz-auth-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.opuz-auth-trust li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--auth-mono);
    font-size: 0.74rem;
    letter-spacing: 0.03em;
    color: var(--auth-slate-2);
}

.opuz-auth-trust li + li::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--auth-line-strong);
}

/* ── Extrato: o mesmo cartão do hero da landing ────────────────────────── */

.opuz-auth-extrato {
    background: #fff;
    border: 1px solid var(--auth-line);
    border-radius: 20px;
    padding: 16px 20px 14px;
    box-shadow: 0 32px 64px -24px rgba(11, 18, 32, 0.26), 0 10px 24px -14px rgba(11, 18, 32, 0.14);
    max-width: 420px;
}

.opuz-auth-extrato-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
}

.opuz-auth-label {
    font-family: var(--auth-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--auth-slate-2);
}

.opuz-auth-pill {
    font-family: var(--auth-mono);
    font-size: 0.64rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--auth-accent);
    background: rgba(36, 99, 235, 0.08);
    border-radius: 999px;
    padding: 4px 10px;
}

.opuz-auth-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

.opuz-auth-rows li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-top: 1px dashed var(--auth-line-strong);
}

.opuz-auth-desc {
    font-size: 0.9rem;
    color: var(--auth-ink-2);
    min-width: 0;
}

.opuz-auth-desc span {
    display: block;
    font-size: 0.76rem;
    color: var(--auth-slate-2);
    margin-top: 3px;
}

.opuz-auth-val {
    font-family: var(--auth-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.84rem;
    white-space: nowrap;
}

.opuz-auth-in  { color: var(--auth-pos); }
.opuz-auth-out { color: var(--auth-neg); }

.opuz-auth-tag {
    display: inline-block;
    font-family: var(--auth-mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--auth-line-strong);
    color: var(--auth-slate);
    white-space: nowrap;
}

.opuz-auth-tag--ok   { color: var(--auth-pos);  border-color: rgba(14, 138, 96, 0.32);  background: rgba(14, 138, 96, 0.06); }
.opuz-auth-tag--open { color: var(--auth-warn); border-color: rgba(168, 113, 13, 0.30); background: rgba(168, 113, 13, 0.06); }

.opuz-auth-total {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-top: 6px;
    padding-top: 16px;
    border-top: 1.5px solid var(--auth-ink);
}

.opuz-auth-total strong {
    display: block;
    font-family: var(--auth-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-top: 4px;
}

.opuz-auth-spark { width: 132px; height: 46px; flex-shrink: 0; overflow: visible; }

.opuz-auth-spark path {
    fill: none;
    stroke: var(--auth-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.opuz-auth-spark circle { fill: var(--auth-accent); }

/* ── Painel do formulário ──────────────────────────────────────────────── */

.opuz-auth-panel {
    min-width: 0;
    display: flex;
    justify-content: center;
}

.login-form-container {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border: 1px solid var(--auth-line);
    border-radius: 18px;
    padding: 30px 30px 24px;
    box-shadow: 0 20px 44px -24px rgba(11, 18, 32, 0.22), 0 3px 10px -6px rgba(11, 18, 32, 0.10);
}

/* Cadastro: o formulário é largo demais para dividir a tela com a vitrine —
   vira uma coluna única centrada, com a marca e os selos servindo de cabeçalho.
   Antes a metade esquerda ficava praticamente vazia. */
.login-form-container--wide {
    max-width: 720px;
    padding: 28px 30px 24px;
}

.opuz-auth-inner:has(.login-form-container--wide) {
    grid-template-columns: minmax(0, 1fr);
    max-width: 720px;
    gap: 22px;
}

.opuz-auth-inner:has(.login-form-container--wide) .opuz-auth-showcase {
    align-items: center;
    text-align: center;
}

.opuz-auth-inner:has(.login-form-container--wide) .opuz-auth-eyebrow,
.opuz-auth-inner:has(.login-form-container--wide) .opuz-auth-title,
.opuz-auth-inner:has(.login-form-container--wide) .opuz-auth-lead,
.opuz-auth-inner:has(.login-form-container--wide) .opuz-auth-extrato {
    display: none;
}

.opuz-auth-inner:has(.login-form-container--wide) .opuz-auth-brand {
    margin-bottom: 14px;
}

.opuz-auth-inner:has(.login-form-container--wide) .opuz-auth-trust {
    justify-content: center;
    margin: 0;
}

/* Cabeçalho do formulário: eyebrow com o tique de régua, como as seções da
   landing. Sem fio no topo — dentro do cartão ele virava um risco solto. */
.login-header {
    margin-bottom: 1.4rem;
}

.login-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--auth-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--auth-accent);
}

.login-eyebrow::before {
    content: "";
    width: 18px;
    height: 1px;
    background: currentColor;
    flex-shrink: 0;
}

.opuz-auth .login-title {
    font-family: var(--auth-sans);
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.032em;
    line-height: 1.15;
    color: var(--auth-ink) !important;
    margin: 10px 0 0 !important;
}

.login-sub {
    color: var(--auth-slate);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 8px 0 0;
}

.login-fields {
    display: grid;
    gap: 14px;
    margin-bottom: 1.4rem;
}

/* Inputs no mesmo desenho dos campos da landing. */
.opuz-auth .mud-input-outlined-border { border-color: var(--auth-line-strong); border-radius: 10px; }

.opuz-auth .mud-input-control:hover .mud-input-outlined-border { border-color: var(--auth-slate-2); }

.opuz-auth .mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--auth-accent);
    border-width: 2px;
}

.opuz-auth .login-button {
    height: 48px;
    font-family: var(--auth-sans) !important;
    font-size: 0.96rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.008em !important;
    text-transform: none !important;
    border-radius: 999px !important;
    margin-bottom: 0.9rem;
    background: var(--auth-accent) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px -8px rgba(36, 99, 235, 0.7) !important;
    transition: background-color .16s ease, box-shadow .16s ease;
}

.opuz-auth .login-button:hover {
    background: var(--auth-accent-deep) !important;
    box-shadow: 0 10px 22px -10px rgba(36, 99, 235, 0.75) !important;
}

.login-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.opuz-auth .login-links .mud-button {
    font-family: var(--auth-sans) !important;
    font-size: 0.88rem !important;
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    border-radius: 999px !important;
}

.opuz-auth .login-links .mud-button-text-default {
    color: var(--auth-slate) !important;
}

.opuz-auth .login-links .mud-button-text-default:hover {
    color: var(--auth-ink) !important;
}

/* Passo a passo da recuperação de senha: as três etapas precisam se anunciar. */
.login-etapas {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 22px;
}

.login-etapa {
    flex: 1;
    height: 3px;
    border-radius: 999px;
    background: var(--auth-line);
}

.login-etapa--feita { background: var(--auth-accent); }

.login-etapa-contador {
    font-family: var(--auth-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    color: var(--auth-slate-2);
    margin: 8px 0 0;
}

/* ── Cadastro ──────────────────────────────────────────────────────────── */

.cadastro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    align-items: start;
}

.cadastro-grid-full { grid-column: 1 / -1; }

/* Vencimento e pagamento são escolhas, não campos de texto: saem da malha de
   inputs e ganham uma faixa própria, para não ficarem desalinhados ao lado de
   um MudTextField. */
.cadastro-escolhas {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--auth-line);
}

.cadastro-opcoes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.cadastro-opcoes-label {
    font-family: var(--auth-mono);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--auth-slate-2);
}

.cadastro-cartao-linha {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px 16px;
}

.cadastro-acoes {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--auth-line);
}

/* Estados do cadastro (pagamento pendente / conta criada). */
.cadastro-estado { text-align: center; padding: 12px 0; }

.cadastro-estado__icone {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: rgba(14, 138, 96, 0.10);
    color: var(--auth-pos);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cadastro-estado h3 {
    font-family: var(--auth-sans);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.024em;
    margin: 0;
}

.cadastro-estado p {
    color: var(--auth-slate);
    font-size: 0.94rem;
    line-height: 1.55;
    margin: 8px 0 0;
}

.cadastro-aviso {
    text-align: left;
    background: var(--auth-haze);
    border: 1px solid var(--auth-line-strong);
    border-left: 3px solid var(--auth-accent);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 16px 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--auth-ink-2);
}

.cadastro-pix {
    display: block;
    max-width: 200px;
    margin: 0 auto 16px;
    border: 1px solid var(--auth-line);
    border-radius: 12px;
}

.cadastro-pix-copia {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}

/* ── Empilhado ─────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .opuz-auth {
        padding: 28px 20px 40px;
    }

    /* Empilhado o conteudo encosta no topo — centrar deixava um vazio grande
       acima da marca. `align-self: start` é obrigatório junto do `margin-top: 0`:
       sem ele o grid estica e as linhas automáticas crescem com ele. */
    .opuz-auth-inner,
    .opuz-auth-inner:has(.login-form-container--wide) {
        margin: 0 auto;
        align-self: start;
        grid-template-columns: minmax(0, 1fr);
        max-width: 560px;
        gap: 24px;
    }

    .opuz-auth-extrato,
    .opuz-auth-trust {
        display: none;
    }

    .opuz-auth-title {
        max-width: none;
        font-size: 1.6rem;
        margin-top: 12px;
    }

    .opuz-auth-lead {
        font-size: 0.96rem;
        margin: 12px 0 0;
    }

    .opuz-auth-brand {
        margin-bottom: 18px;
    }

    .login-form-container,
    .login-form-container--wide {
        max-width: none;
    }

    /* Empilhado o banner ocupa mais linhas — a folga precisa ser maior. */
    .opuz-auth--com-aviso { padding-bottom: 210px; }
}

@media (max-width: 640px) {
    .opuz-auth {
        padding: 24px 14px 32px;
    }

    .login-form-container,
    .login-form-container--wide {
        padding: 24px 20px 20px;
    }

    .cadastro-grid,
    .cadastro-escolhas,
    .cadastro-cartao-linha {
        grid-template-columns: 1fr;
    }
}

/* ── Banner LGPD ───────────────────────────────────────────────────────── */

.lgpd-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #0A1628;
    color: #fff;
    padding: 14px 24px;
    z-index: 9999;
    box-shadow: 0 -8px 24px rgba(10, 22, 40, 0.2);
}

.lgpd-content {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.lgpd-content .mud-typography {
    font-size: 0.84rem !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.82) !important;
}

/* Só na versão em linha: em coluna (<=600px) o flex-basis vira ALTURA e o
   banner inchava para ~430px, cobrindo o formulário no celular. */
@media (min-width: 601px) {
    .lgpd-content .mud-typography { flex: 1 1 320px; }
}

.lgpd-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
}

/* O banner fica fora de .opuz-auth, então não herda .login-button. */
.lgpd-botao {
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    border-radius: 999px !important;
    padding: 8px 20px !important;
    background: #2463EB !important;
    color: #fff !important;
    box-shadow: none !important;
}

.publico-container {
    min-height: 100vh;
    background-color: #F3F5F8;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"),
        repeating-linear-gradient(to bottom, transparent 0 27px, rgba(10, 22, 40, 0.028) 27px 28px);
    background-size: 160px 160px, 100% 28px;
    display: flex;
    flex-direction: column;
    font-family: "Figtree", sans-serif;
}

.publico-header {
    background: rgba(243, 245, 248, 0.86);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid #E2E8F0;
    padding: 1rem 1.5rem;
}

.publico-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 860px;
    margin: 0 auto;
    text-decoration: none;
    color: inherit;
}

.publico-brand-name {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0A1628;
}

.publico-conteudo {
    flex: 1;
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

.termos-conteudo {
    line-height: 1.7;
    color: var(--ink-soft);
}

.termos-conteudo h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin: 2rem 0 0.75rem;
}

.termos-conteudo h2:first-child {
    margin-top: 0;
}

.termos-conteudo p {
    margin: 0 0 1rem;
}

.termos-conteudo ul,
.termos-conteudo ol {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.termos-conteudo li {
    margin-bottom: 0.5rem;
}

.termos-conteudo li:last-child {
    margin-bottom: 0;
}

.termos-conteudo strong {
    color: var(--ink);
    font-weight: 600;
}

.termos-conteudo a {
    color: var(--accent);
    text-decoration: underline;
}

.opuz-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

.opuz-form-grid--3 {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.opuz-form-grid--center {
    align-items: center;
}

.opuz-form-grid--endereco {
    grid-template-columns: 1fr 110px;
}

.opuz-itens-head,
.opuz-itens-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 80px 130px 110px 32px;
    gap: 10px;
    align-items: start;
}

.opuz-itens-head {
    background: #f7f8fa;
    border-bottom: 1px solid #e3e6ea;
    padding: 8px 12px;
}

.opuz-itens-linha {
    padding: 10px 12px;
}

@media (max-width: 960px) {
    html, body {
        background-attachment: scroll;
    }

    .opuz-main-inner {
        padding: 16px 12px 88px;
        min-width: 0;
        overflow-x: clip;
    }

    .opuz-app-wordmark,
    .opuz-app-dot,
    .opuz-appbar-username,
    .opuz-appbar-rule {
        display: none !important;
    }

    .opuz-appbar-select {
        min-width: 0;
        max-width: 46vw;
        margin-left: 8px;
        flex: 1 1 auto;
    }

    .opuz-main-inner .mud-paper:has(.mud-table) {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .opuz-main-inner .mud-table-container {
        overflow-x: auto;
    }

    .opuz-form-grid,
    .opuz-form-grid--3,
    .opuz-form-grid--endereco {
        grid-template-columns: 1fr;
    }

    .opuz-tabs .mud-tab .mud-typography {
        display: none;
    }

    .opuz-tabs .mud-tab {
        min-width: 48px;
        padding-inline: 10px;
    }

    .mud-dialog {
        max-width: calc(100vw - 16px) !important;
    }

    .mud-dialog-content {
        overflow-x: hidden;
    }

    .opuz-itens-head {
        display: none;
    }

    .opuz-itens-linha {
        grid-template-columns: 1fr 1fr;
        border-top: 1px solid #eef0f2;
    }

    .opuz-itens-linha > :first-child {
        grid-column: 1 / -1;
    }

    .opuz-itens-linha > :last-child {
        grid-column: 2;
        justify-self: end;
    }
}

@media (max-width: 600px) {
    .lgpd-banner {
        padding: 0.75rem 1rem;
    }

    .lgpd-content {
        flex-direction: column;
        text-align: center;
    }

    .lgpd-actions {
        margin-left: 0;
        justify-content: center;
    }
}

.mud-dialog .mud-dialog-content {
    overflow-x: hidden;
    min-width: 0;
}

.mud-dialog .mud-select,
.mud-dialog .mud-input-control {
    min-width: 0;
    max-width: 100%;
}

.mud-dialog .mud-select .mud-input-slot {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nfse-erro-prefeitura {
    min-width: 0;
}

.nfse-erro-prefeitura-texto {
    max-height: 12rem;
    overflow-y: auto;
    margin-top: 8px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}