html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

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

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

.validation-message {
    color: #e50000;
}

.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."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.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;
}
/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   A MARCA DOMINICA NO CONSULTOR — marinho, dourado e creme.

   Os valores vêm de novo/plataforma/web/src/styles.css e são os MESMOS: dois produtos da mesma
   casa com paletas diferentes não parecem dois produtos, parecem um deles ser de outra empresa.
   O que o MudBlazor não alcança (o cromo do layout do template Blazor, o wordmark, o gradiente do
   botão primário) mora aqui.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
:root {
    --tinta: #0E1E33;
    --ouro: #C9A24A;
    --ouro-2: #B8862F;
    --ouro-luz: #E7C877;
    --ground: #F7F4EE;
    --linha: #E6E4DC;
}

/* O WORDMARK É SERIFADO e o corpo não. É a única serifa do produto — na plataforma também. */
.marca-dominica { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
/* O NOME DO PRODUTO VAI EMBAIXO DA MARCA, e não ao lado. Lado a lado, "DOMINICA Consultor" não
   cabe nos 250px da barra e saía cortado em "Consulto" — com o wordmark espaçado em .18em, a
   largura é grande e não há como encolher sem descaracterizar a marca. Empilhado, cabe e ainda
   fica hierarquicamente certo: a marca é DOMINICA, o produto é a qualificação dela. */
.marca-dominica .nomes { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.marca-dominica .wordmark {
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: .16em; font-weight: 600; font-size: 15px; color: #fff; white-space: nowrap;
}
.marca-dominica .wordmark-sufixo {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    letter-spacing: .08em; font-weight: 500; font-size: 11px; text-transform: uppercase;
    color: var(--ouro); white-space: nowrap;
}

/* O E-MAIL NÃO CABE E NÃO PRECISA CABER: reticências em vez de corte seco no meio da palavra. */
.sidebar .nav-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* O FUNDO É CREME, e não branco. É o que dá o ar de papel da plataforma. */
body { background: var(--ground); }

/* A BARRA LATERAL É MARINHO CHAPADO com fio dourado, e não gradiente roxo.
   O gradiente do template Blazor (azul → roxo) não é da marca em lugar nenhum. */
.sidebar { background-image: none; background-color: var(--tinta); border-right: 2px solid rgba(201,162,74,.55); }
/* A FAIXA DA MARCA NÃO TEM FUNDO PRÓPRIO: a barra é um painel marinho inteiro, do logo ao rodapé.
   Um véu escuro só aqui em cima criava um degrau, e a borda dourada da direita já faz a separação. */
.sidebar .top-row { background-color: transparent; border-bottom: none; min-height: 4.25rem; }

/* O ITEM ATIVO DO MENU usa o dourado, com o mesmo fio embaixo que a plataforma usa no header. */
.sidebar .nav-item ::deep .nav-link.active,
.sidebar .nav-link.active { background: rgba(201,162,74,.18) !important; color: #fff !important; box-shadow: inset 2px 0 0 var(--ouro); }
.sidebar .nav-link:hover { background: rgba(201,162,74,.10) !important; }

/* A FAIXA DO TOPO DO CONTEÚDO acompanha o creme, com fio fraco em vez do cinza do template.

   O SELETOR É "main >", e a precisão importa: escrito `.top-row` com !important, ele alcançava
   TAMBÉM a faixa da marca dentro da barra lateral — que é marinho —, e pintava de creme o retângulo
   onde mora o wordmark BRANCO. Resultado: a marca era a única coisa ilegível da tela, e nenhuma
   regra escrita depois conseguia consertar, porque o !important ganhava de todas.

   Foi assim que este defeito sobreviveu: quem tentasse arrumar de fora acrescentaria mais uma regra,
   veria que não adianta, e acrescentaria um !important seu. O conserto era estreitar o alvo. */
main > .top-row { background-color: var(--ground); border-bottom: 1px solid var(--linha); }

/* O BOTÃO PRIMÁRIO É A ASSINATURA: gradiente dourado com texto escuro. O MudBlazor só aceita cor
   sólida no tema, então o gradiente entra aqui. */
.mud-button-filled-primary {
    background: linear-gradient(180deg, var(--ouro-luz), var(--ouro)) !important;
    border: 1px solid var(--ouro-2) !important; color: #2A2109 !important; font-weight: 700;
}
.mud-button-filled-primary:hover { filter: brightness(1.04); }

/* Cartão com o mesmo fio e a mesma sombra discreta da plataforma. */
.mud-paper-outlined { border-color: var(--linha) !important; }

/* ═══ A ENTRADA ═══════════════════════════════════════════════════════════════════════════════
   A primeira tela que um consultor novo vê. Ela NÃO é MudBlazor — é página do Identity, que faz
   POST de formulário e quebra se virar interativa —, então o tema do MudBlazor não a alcança e o
   acabamento vem daqui. É o mesmo arranjo da plataforma: cartão estreito centrado sobre o creme. */
.login-dominica { min-height: calc(100vh - 3.5rem); display: grid; place-items: center; padding: 22px; }
.login-cartao {
    width: 100%; max-width: 400px; background: #fff;
    border: 1px solid var(--linha); border-radius: 12px; padding: 28px 26px 22px;
    box-shadow: 0 1px 2px rgba(14,30,51,.06), 0 18px 40px rgba(14,30,51,.07);
}
/* A MARCA VEM EM MARINHO AQUI, e não em branco: o cartão é claro. O componente Marca pinta o
   wordmark de branco porque o lugar dele é a barra lateral escura. */
.login-marca { display: flex; justify-content: center; margin-bottom: 18px; }
.login-marca .wordmark { color: var(--tinta); }
.login-cartao h1 { font-size: 20px; text-align: center; margin: 0 0 20px; color: var(--tinta); }
.login-cartao .form-control { border-color: var(--linha); border-radius: 8px; }
.login-cartao .form-control:focus { border-color: var(--ouro); box-shadow: 0 0 0 .18rem rgba(201,162,74,.22); }

/* O BOTÃO É O DA MARCA, não o azul do Bootstrap: gradiente dourado com texto escuro. */
.login-cartao .btn-primary {
    background: linear-gradient(180deg, var(--ouro-luz), var(--ouro));
    border-color: var(--ouro-2); color: #2A2109; font-weight: 700; border-radius: 8px;
}
.login-cartao .btn-primary:hover { filter: brightness(1.04); background: linear-gradient(180deg, var(--ouro-luz), var(--ouro)); border-color: var(--ouro-2); color: #2A2109; }

.login-esqueci { margin: 16px 0 0; text-align: center; font-size: 13px; }
.login-esqueci a { color: var(--ouro-2); text-decoration: none; }
.login-esqueci a:hover { text-decoration: underline; }
.login-nota { margin: 14px 0 0; font-size: 12px; color: #78766C; text-align: center; line-height: 1.45; }

/* O MENU LATERAL NÃO FAZ SENTIDO ANTES DE ENTRAR: "Início" e "Entrar" ao lado da tela de entrar
   são duas portas para o mesmo lugar. Ele volta assim que há sessão. */
body:has(.login-dominica) .sidebar { display: none; }
body:has(.login-dominica) .top-row { display: none; }

/* ── O MURAL ──────────────────────────────────────────────────────────────────────────────────
   A tabela nasceu de uma planilha, e o que se quer dela é o que o Excel dava de graça: densidade
   e uma coluna de dinheiro que se compara de relance. Daí o número tabular e o alinhamento à
   direita — sem eles, "5.877.067,68" e "73.126.328,59" não se comparam olhando. */
.mural .mural-valor {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--tinta);
    font-weight: 600;
}
.mural-linha td { vertical-align: top; padding-top: 10px; padding-bottom: 10px; }

/* A DATA QUE JÁ PASSOU NÃO SOME — ela AVISA. Ver OrdemDoMural: depois da abertura vem habilitação
   e recurso, e é aí que está o trabalho. Mas quem lê precisa distinguir a sessão de amanhã da que
   já foi, e a cor faz isso sem gastar uma coluna. */
.mural-passou { color: #9A6B1F; }

/* A anotação é margem de caderno, não conteúdo da tabela: recuada e discreta, para não competir
   com o objeto — mas presente, porque foi ela que a planilha nunca conseguiu guardar. */
.mural-nota {
    color: #78766C;
    border-left: 2px solid var(--ouro-luz);
    padding-left: 8px;
    margin-top: 4px;
}

/* O seletor de situação vive DENTRO da célula: mudar o estado é o gesto mais repetido do mural, e
   ele tem de custar um clique, como custava na planilha. */
.mural-situacao { min-width: 9.5rem; }

/* ── A ÁREA DE CONTA ─────────────────────────────────────────────────────────────────────────────
   Estas telas vêm do template do Identity e usam Bootstrap cru, não o MudBlazor do resto do
   produto — daí o azul de fábrica no meio de uma interface marinho-e-dourada. O consertar aqui é
   o mesmo do login: a marca alcança o cromo do template pelo CSS global. */
.manage-conta h3, .manage-conta h1 { color: var(--tinta); }
.manage-conta .nav-pills .nav-link { color: var(--ink); border-radius: 8px; }
.manage-conta .nav-pills .nav-link.active {
    background: var(--tinta);
    color: #fff;
}
.manage-conta .form-control { border-color: var(--linha); border-radius: 8px; }
.manage-conta .form-control:focus { border-color: var(--ouro); box-shadow: 0 0 0 .18rem rgba(201,162,74,.22); }
.manage-conta .btn-primary {
    background: linear-gradient(180deg, var(--ouro-luz), var(--ouro));
    border-color: var(--ouro-2); color: #2A2109; font-weight: 700; border-radius: 8px;
}
.manage-conta .btn-primary:hover {
    filter: brightness(1.04);
    background: linear-gradient(180deg, var(--ouro-luz), var(--ouro));
    border-color: var(--ouro-2); color: #2A2109;
}
.manage-conta a { color: var(--ouro-2); }
.conta-dica { font-size: 12px; color: #78766C; line-height: 1.45; }

/* O ARCO INVERTE SOBRE O MARINHO.

   O símbolo é marinho com pilar dourado — desenhado para viver sobre creme, que é onde ele vive na
   plataforma inteira. A barra lateral escura é contexto NOVO, e sobre ela o arco marinho some no
   fundo: ficava só o pilar dourado flutuando, como se metade do logo não tivesse carregado.

   Inverte apenas a cor, e só aqui: a geometria continua sendo a mesma de Logo.tsx, caminho por
   caminho, que é a regra que o componente Marca declara e que existe para os dois produtos não
   ficarem com um símbolo cada num print lado a lado. */
.sidebar .marca-dominica svg path:first-child { fill: var(--ground); }