/*
 * A marca Alphainfo no ERP (`docs/legado/usabilidade/plano-identidade-visual.md`, D11; divergencia 1268): a unica
 * folha da marca, no `Master.cshtml` e no `Portal.cshtml`, logo depois das folhas do tema. Nada em `wwwroot/assets/`
 * muda: o que o tema traz e sobreposto aqui.
 *
 * 1. A fonte (onda 8, P1 = A)
 * 2. A cor (onda 2, D1)
 * 3. A barra lateral, a faixa do topo e o logo (onda 3, D2-D4)
 * 4. A tela de entrada (onda 4, D5) e as paginas de erro e de espera (divergencia 1377)
 * 5. O rodape das paginas do fornecedor (onda 6, D8)
 * 6. O modo escuro (onda 7, D7)
 */

/* ============================================================================ 1. A fonte
 *
 * O tema ja pede a Inter (`--bs-font-sans-serif: Inter, Helvetica, "sans-serif"`, `style.bundle.css`)
 * e o `themesettings.json` a baixava do Google Fonts, que o CSP do ERP recusa (`font-src 'self'`,
 * `Seguranca/CabecalhosSeguranca.cs`): sem a fonte, o texto caia na Arial. Aqui ela vem do proprio
 * ERP — o arquivo variavel do Google Fonts (um so para todos os pesos), subconjuntos `latin` e
 * `latin-ext`, licenca em `fonts/inter/OFL-Inter.txt`.
 */

/* latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/inter/inter-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/inter/inter-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================================ 2. A cor
 *
 * O azul `#1B84FF` do Metronic vira o `#0068B3` dos posts da Alphainfo (5,78:1 com o texto branco; o do tema
 * dava 3,63). As cores de status nao mudam: elas dizem o que aconteceu com o documento.
 *
 * Tres partes: os nomes da marca; a familia `--bs-primary-*` do tema claro, de onde o resto do ERP le a cor
 * (os `alpha-*.css` usam `var(--bs-primary)`, os graficos a leem em tempo de execucao); e as regras do tema
 * que escrevem o azul por extenso em vez de ler a variavel, refeitas com o MESMO seletor — esta folha vem
 * depois, entao ganha delas e de mais nada (as variantes `.form-check-success`, `.is-valid` etc. sao mais
 * especificas e continuam valendo).
 *
 * So o tema CLARO: a familia vai em `[data-bs-theme=light]`, e nao em `:root, [data-bs-theme=light]` como no
 * tema — `:root` casa o `<html>` tambem no escuro, e uma folha carregada depois do tema passaria por cima do
 * `[data-bs-theme=dark]` dele. O escuro tem bloco proprio, a secao 6.
 */

/* Os nomes da marca. */
:root {
    --alpha-azul: #0068B3;
    --alpha-marinho: #00488C;
    --alpha-ciano: #00A0F0;
    --alpha-ciano-site: #2FBDE2;
    --alpha-marinho-site: #0F0B45;
    --alpha-azul-texto-escuro: #4FA8EE;
}

/* A familia do primary: as variaveis do Bootstrap e as do Metronic que o tema escreve com o literal. */
[data-bs-theme=light] {
    --bs-primary: var(--alpha-azul);
    --bs-primary-rgb: 0, 104, 179;
    --bs-primary-active: #00559A;
    --bs-primary-light: #E5F0F9;
    --bs-primary-clarity: rgba(0, 104, 179, 0.2);
    --bs-primary-inverse: #FFFFFF;
    --bs-primary-text-emphasis: var(--alpha-marinho);
    --bs-primary-bg-subtle: #CCE1F0;
    --bs-primary-border-subtle: #99C3E1;
    --bs-text-primary: var(--bs-primary);

    --bs-link-color: var(--bs-primary);
    --bs-link-color-rgb: 0, 104, 179;
    --bs-link-hover-color: var(--bs-primary-active);
    --bs-link-hover-color-rgb: 0, 85, 154;
    --bs-focus-ring-color: rgba(0, 104, 179, 0.25);

    --bs-component-active-bg: var(--bs-primary);
    --bs-component-hover-color: var(--bs-primary);
    --bs-component-checked-bg: var(--bs-primary);
    --bs-menu-link-color-hover: var(--bs-primary);
    --bs-menu-link-color-show: var(--bs-primary);
    --bs-menu-link-color-here: var(--bs-primary);
    --bs-menu-link-color-active: var(--bs-primary);
    --bs-ribbon-label-bg: var(--bs-primary);
    --bs-prismjs-btn-color-hover: var(--bs-primary);
}

/* As variaveis de componente que o Bootstrap compilou com o azul (e com tons dele) por extenso. O hover e o
   ativo do `.btn-primary` seguem o `--bs-primary-active`, como o `.btn.btn-primary:hover` do Metronic. */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary-active);
    --bs-btn-hover-border-color: var(--bs-primary-active);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-bg: var(--bs-primary-active);
    --bs-btn-active-border-color: var(--bs-primary-active);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-link {
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--bs-primary);
}

.progress,
.progress-stacked {
    --bs-progress-bar-bg: var(--bs-primary);
}

/* A seta do acordeao aberto e um SVG por extenso: a cor vai escrita no `fill` (`%23` = `#`). */
.accordion {
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230068B3'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* As doze regras do tema que pintam com o literal (A2 do plano), com o mesmo seletor. A sombra do
   `.form-control:focus` do tema nao entra: o valor e `false, 0 0 0 0.25rem rgba(...)`, invalido, e o navegador o
   descarta — o campo em foco nao tem anel azul hoje, e esta folha nao cria um. */
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-check.form-check-solid .form-check-input[type=checkbox]:indeterminate {
    background-color: var(--bs-primary);
}

.nav-link:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.form-range::-webkit-slider-thumb {
    background-color: var(--bs-primary);
}

.form-range::-moz-range-thumb {
    background-color: var(--bs-primary);
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* O polegar pressionado: o tema usa o primary clareado 70% (`#BBDAFF`); o mesmo clareamento do `#0068B3`. */
.form-range::-webkit-slider-thumb:active {
    background-color: #B3D2E8;
}

.form-range::-moz-range-thumb:active {
    background-color: #B3D2E8;
}

.separator.separator-content.border-primary::before,
.separator.separator-content.border-primary::after {
    border-color: var(--bs-primary) !important;
}

[data-kt-sticky-landing-header=on] .landing-header .menu .menu-link.active {
    color: var(--bs-primary);
}

@media (max-width: 991.98px) {
    .landing-header .menu .menu-link.active {
        color: var(--bs-primary);
    }
}

/* `plugins.bundle.css`: o controle da linha aberta do DataTables responsivo. */
.dt-hasChild.dtr-expanded .dtr-control:before {
    background-color: var(--bs-primary);
}

/* ============================================================================ 3. A barra lateral, a faixa e o logo
 *
 * O `Demo1/Default.cshtml` e `dark-sidebar`: as regras do tema para esse layout (`style.bundle.css`,
 * `[data-kt-app-layout=dark-sidebar] .app-sidebar ...`) ganham o degrade da opcao D, com os mesmos seletores — esta
 * folha vem depois. Os valores sao os da D2 e da prancha aprovada (`opcao-D-app.png`): menu `#DCEAF7` (10,07:1 no topo
 * do degrade, 4,72:1 na base), icone `#8DB8E3`, ativo branco sobre branco a 14% com a faixa ciano a esquerda.
 *
 * No escuro, o degrade e o texto do menu mudam na secao 6; o resto vale nos dois temas.
 */

.alpha-marca {
    --alpha-marca-altura: 40px;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--alpha-marca-altura) * .21);
}

.alpha-marca > img {
    height: var(--alpha-marca-altura);
    width: auto;
    display: block;
}

/* O selo do logo 2 (resposta 3 da diretoria): HTML, e nao parte do SVG, para sair na fonte da pagina — a fonte nao
   chega a um SVG usado como `<img>`. Proporcoes do kit aprovado (logo 56 px, selo 18 px / 700 / 5x11). */
.alpha-selo-erp {
    font-weight: 700;
    font-size: calc(var(--alpha-marca-altura, 40px) * .32);
    line-height: 1;
    letter-spacing: .04em;
    padding: calc(var(--alpha-marca-altura, 40px) * .09) calc(var(--alpha-marca-altura, 40px) * .2);
    border-radius: 6px;
    background-color: var(--alpha-ciano-site);
    color: var(--alpha-marinho-site);
}

/* O α da lateral recolhida: o trilho tem 75 px. */
.alpha-alfa-lateral {
    height: 28px;
    width: auto;
}

/* As cores da lateral sao variaveis: o escuro (secao 6) troca so as variaveis, e as regras de estado abaixo (aberto,
   ativo, mouse por cima) continuam valendo nos dois temas. */
[data-kt-app-layout=dark-sidebar] .app-sidebar {
    --alpha-lateral-texto: #DCEAF7;
    --alpha-lateral-icone: #8DB8E3;
    --alpha-lateral-marca: .1;
    background: linear-gradient(180deg, #00346B 0%, var(--alpha-marinho) 42%, var(--alpha-azul) 100%);
}

/* A marca d'agua: o α branco a 10% no pe da lateral, atras do menu e sem pegar clique. A lateral e `position: fixed`
   (no computador e na gaveta do celular), entao e contexto de empilhamento proprio: o `z-index: -1` fica acima do
   fundo dela e abaixo do menu. Sem `overflow: hidden` na lateral — o botao de recolher fica meio para fora dela. */
[data-kt-app-layout=dark-sidebar] .app-sidebar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 200px;
    background: url(../img/marca/alfa-branco.svg) no-repeat left 0 bottom -50px / 290px auto;
    opacity: var(--alpha-lateral-marca);
    pointer-events: none;
    z-index: -1;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .app-sidebar-logo {
    border-bottom: 1px dashed rgba(255, 255, 255, .16);
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .scroll-y:hover,
[data-kt-app-layout=dark-sidebar] .app-sidebar .hover-scroll-overlay-y:hover {
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .scroll-y:hover::-webkit-scrollbar-thumb,
[data-kt-app-layout=dark-sidebar] .app-sidebar .hover-scroll-overlay-y:hover::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .25);
}

/* O rodape do menu (`N de M telas migradas`): o tema o pinta `#636674 !important`, ilegivel no azul. */
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-heading {
    color: var(--alpha-lateral-texto) !important;
}

/* O item em repouso. A seta e uma mascara: a cor e o `background-color`. */
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link {
    position: relative;
    color: var(--alpha-lateral-texto);
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-title {
    color: var(--alpha-lateral-texto);
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon .svg-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon i {
    color: var(--alpha-lateral-icone);
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-bullet .bullet,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-arrow:after {
    background-color: var(--alpha-lateral-icone);
}

/* O ramo aberto (`show`) e o ramo do item ativo (`here`): texto, icone e seta brancos. */
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.here > .menu-link,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.here > .menu-link .menu-title,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.here > .menu-link .menu-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.here > .menu-link .menu-icon .svg-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.here > .menu-link .menu-icon i,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.show > .menu-link,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.show > .menu-link .menu-title,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.show > .menu-link .menu-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.show > .menu-link .menu-icon .svg-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.show > .menu-link .menu-icon i {
    color: #FFFFFF;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.here > .menu-link .menu-bullet .bullet,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.here > .menu-link .menu-arrow:after,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.show > .menu-link .menu-bullet .bullet,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.show > .menu-link .menu-arrow:after {
    background-color: #FFFFFF;
}

/* O mouse por cima: o mesmo seletor do tema, mais o fundo branco a 8%. */
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here),
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) {
    background-color: rgba(255, 255, 255, .08);
    color: #FFFFFF;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here) .menu-title,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-title,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here) .menu-icon i,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon i {
    color: #FFFFFF;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here) .menu-bullet .bullet,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-bullet .bullet,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here) .menu-arrow:after,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-arrow:after {
    background-color: #FFFFFF;
}

/* O item ativo: branco a 14%, texto e icone brancos, o ponto e a faixa de 3 px em ciano. */
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active {
    background-color: rgba(255, 255, 255, .14);
    color: #FFFFFF;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 3px;
    background-color: var(--alpha-ciano);
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-title {
    color: #FFFFFF;
    font-weight: 600;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-icon .svg-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-icon i {
    color: #FFFFFF;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-arrow:after {
    background-color: #FFFFFF;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-bullet .bullet {
    background-color: var(--alpha-ciano);
}

/* O selo `Em breve` (`_MenuItem.cshtml`), so dentro da lateral: sai o amarelo do `badge-light-warning`. */
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .badge.badge-light-warning {
    background-color: rgba(255, 255, 255, .14);
    color: var(--alpha-lateral-texto);
}

/* O cabecalho do sino (`_NotificationsMenu.cshtml`): o degrade da tela de entrada e o α a 10% a direita, no lugar do
   `media/misc/menu-header-bg.jpg` do tema — uma foto roxa, que a varredura do azul fixo (A2) nao pegava por nao ser
   literal. O botao `Marcar todas como lidas` e branco no degrade: o hover sublinha, em vez de virar azul sobre azul. */
.alpha-cabecalho-menu {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #00346B 0%, var(--alpha-marinho) 45%, var(--alpha-azul) 100%);
}

.alpha-cabecalho-menu::after {
    content: "";
    position: absolute;
    right: -18px;
    bottom: -34px;
    width: 150px;
    aspect-ratio: 180 / 145;
    background: url(../img/marca/alfa-branco.svg) no-repeat center / contain;
    opacity: .1;
    pointer-events: none;
}

.alpha-cabecalho-menu > * {
    position: relative;
    z-index: 1;
}

.alpha-cabecalho-menu .btn.btn-color-white:hover,
.alpha-cabecalho-menu .btn.btn-color-white:focus-visible {
    color: #FFFFFF;
    text-decoration: underline;
}

/* A faixa do topo (D3): 4 px na borda de cima do cabecalho, em todas as larguras. O `position: relative` so vale
   enquanto o cabecalho nao e fixo — o `position: fixed` do tema (computador, e o celular depois de rolar) e mais
   especifico e o mantem. */
.app-header {
    position: relative;
}

.app-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--alpha-ciano), var(--alpha-azul) 55%, var(--alpha-marinho));
    pointer-events: none;
    z-index: 1;
}

/* ============================================================================ 4. A tela de entrada
 *
 * `Demo1/Auth.cshtml` (o login e as quatro paginas de demonstracao do tema): a tela inteira no degrade da opcao D,
 * o α grande em marca d'agua a 9%, a faixa da D3 em cima, a marca a esquerda e o cartao com o formulario a direita
 * (`opcao-D-login.png`). Abaixo de 992 px: marca em cima, cartao na largura toda, contatos embaixo. No fim, a coluna
 * das paginas de erro (`Demo1/System.cshtml`).
 */

.alpha-login {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: linear-gradient(135deg, #00346B 0%, var(--alpha-marinho) 35%, var(--alpha-azul) 70%, #0082D6 100%);
    color: #FFFFFF;
}

.alpha-login::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--alpha-ciano), var(--alpha-azul) 55%, var(--alpha-marinho));
    z-index: 2;
}

.alpha-login::after {
    content: "";
    position: absolute;
    left: -4vh;
    top: 8vh;
    height: 91vh;
    aspect-ratio: 180 / 145;
    background: url(../img/marca/alfa-branco.svg) no-repeat center / contain;
    opacity: .09;
    pointer-events: none;
}

/* A marca e o cartao andam juntos: o conjunto tem no maximo 1320 px e fica no meio da tela. Dividir a tela inteira
   (55% / 45%, como a prancha de 1440 px) afastava o cartao do texto em 1920 px — ~600 px de vao. Nas medidas de 1440
   px o desenho e o da prancha. */
.alpha-login-grade {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 512px);
    grid-template-areas:
        "marca cartao"
        "contatos cartao";
    column-gap: clamp(48px, 8vw, 120px);
    align-content: center;
    padding: 48px clamp(24px, 5vw, 64px);
}

.alpha-login-marca {
    grid-area: marca;
    align-self: end;
}

.alpha-login-marca .alpha-marca {
    --alpha-marca-altura: clamp(56px, 5.8vw, 84px);
}

.alpha-login-marca .alpha-selo-erp {
    border-radius: 10px;
}

.alpha-login-frase {
    color: #FFFFFF;
    font-size: clamp(32px, 3vw, 44px);
    line-height: 1.15;
    font-weight: 800;
    margin: 64px 0 18px;
}

.alpha-login-sub {
    font-size: 16px;
    line-height: 1.6;
    opacity: .9;
    max-width: 520px;
    margin: 0;
}

.alpha-login-contatos {
    grid-area: contatos;
    align-self: start;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin-top: 70px;
    font-weight: 600;
}

.alpha-login-contatos a {
    color: #FFFFFF;
    opacity: .85;
}

.alpha-login-contatos a:hover,
.alpha-login-contatos a:focus-visible {
    opacity: 1;
    text-decoration: underline;
}

.alpha-login-cartao {
    grid-area: cartao;
    align-self: center;
    width: 100%;
    max-width: 512px;
    padding: 44px 46px 40px;
    border-radius: 16px;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: 0 30px 60px rgba(0, 20, 60, .35);
}

@media (max-width: 991.98px) {
    .alpha-login-grade {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "marca"
            "cartao"
            "contatos";
        align-content: start;
        row-gap: 28px;
        padding: 40px 16px;
    }

    .alpha-login-marca,
    .alpha-login-contatos {
        padding: 0;
    }

    .alpha-login-marca .alpha-marca {
        --alpha-marca-altura: 56px;
    }

    .alpha-login-marca .alpha-selo-erp {
        border-radius: 7px;
    }

    .alpha-login-frase {
        font-size: 28px;
        margin: 28px 0 12px;
    }

    .alpha-login-contatos {
        margin-top: 0;
        justify-content: center;
    }

    .alpha-login-cartao {
        width: 100%;
        max-width: none;
        padding: 32px 24px;
    }
}

/* O subtitulo longo sai no celular. */
@media (max-width: 767.98px) {
    .alpha-login-sub {
        display: none;
    }
}

/* As paginas de erro e de espera (`Demo1/System.cshtml`, divergencia 1377): o mesmo degrade, numa coluna so no meio da
   tela — a marca, o cartao e os contatos —, sem a frase do login. O sobretitulo (`Erro 404`) e o codigo da requisicao
   do 500 tambem valem no card dentro do layout do ERP (o 4xx do usuario logado). */
.alpha-login-coluna {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 36px;
    padding: 48px 16px;
}

.alpha-login-coluna .alpha-marca {
    --alpha-marca-altura: 52px;
}

.alpha-login-coluna .alpha-login-cartao {
    max-width: 560px;
    text-align: center;
}

.alpha-login-coluna .alpha-login-contatos {
    align-self: center;
    margin-top: 0;
    justify-content: center;
}

.alpha-erro-sobretitulo {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bs-gray-600);
}

.alpha-erro-rastreio {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 6px;
    background-color: var(--bs-gray-100);
    color: var(--bs-gray-700);
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
    user-select: all;
}

@media (max-width: 575.98px) {
    .alpha-login-coluna {
        gap: 28px;
    }

    .alpha-login-coluna .alpha-marca {
        --alpha-marca-altura: 42px;
    }

    .alpha-login-coluna .alpha-login-cartao {
        padding: 32px 22px 28px;
    }
}

/* ============================================================================ 5. O rodape do fornecedor
 *
 * As seis paginas publicas do link (`Portal.cshtml`, D8): um rodape discreto com o logo pequeno e "Alpha ERP". No
 * escuro, o logo branco — o "info" `#00488C` do logo colorido some no fundo escuro (2:1).
 */

.portal-marca {
    margin-top: auto;
    color: var(--bs-gray-700);
    font-size: .9rem;
}

.portal-marca img {
    height: 22px;
    width: auto;
}

/* ============================================================================ 6. O modo escuro
 *
 * O botao `Claro` / `Escuro` / `Sistema` do cabecalho (D7). Nenhuma cor serve ao mesmo tempo para fundo de botao com
 * texto branco e para texto sobre o fundo escuro: o `#0068B3` fica nos fundos (botao, caixa marcada, pagina ativa —
 * 5,78:1 com o branco) e o texto azul passa a `#4FA8EE` (6,97:1 sobre o cartao `#15171C`; o `#0068B3` dava 3,10).
 * Fundos, bordas e cinzas continuam os do Metronic.
 *
 * Tres partes: a familia `--bs-primary-*` do escuro (o tema a escreve com o `#006AE6`), os seletores que pintam texto
 * com `--bs-primary` — os do tema que as views usam e os dos `alpha-*.css`, com o `[data-bs-theme=dark]` na frente, o
 * que basta para ganhar deles —, e a lateral e a tela de entrada mais escuras.
 */

[data-bs-theme=dark] {
    --bs-primary: var(--alpha-azul);
    --bs-primary-rgb: 0, 104, 179;
    /* No escuro o hover clareia, como no tema: 4,92:1 com o branco. */
    --bs-primary-active: #0B74BF;
    --bs-primary-light: #15283F;
    --bs-primary-clarity: rgba(0, 104, 179, 0.2);
    --bs-primary-inverse: #FFFFFF;
    --bs-primary-text-emphasis: #7ABDF2;
    --bs-primary-bg-subtle: #001F3D;
    --bs-primary-border-subtle: var(--alpha-marinho);
    --bs-text-primary: var(--alpha-azul-texto-escuro);

    --bs-link-color: var(--alpha-azul-texto-escuro);
    --bs-link-color-rgb: 79, 168, 238;
    --bs-link-hover-color: #7ABDF2;
    --bs-link-hover-color-rgb: 122, 189, 242;
    --bs-focus-ring-color: rgba(79, 168, 238, 0.28);

    --bs-component-active-bg: var(--bs-primary);
    --bs-component-hover-color: var(--alpha-azul-texto-escuro);
    --bs-component-checked-bg: var(--bs-primary);
    --bs-menu-link-color-hover: var(--alpha-azul-texto-escuro);
    --bs-menu-link-color-show: var(--alpha-azul-texto-escuro);
    --bs-menu-link-color-here: var(--alpha-azul-texto-escuro);
    --bs-menu-link-color-active: var(--alpha-azul-texto-escuro);
    --bs-ribbon-label-bg: var(--bs-primary);
    --bs-ribbon-label-border-color: var(--alpha-marinho);
    --bs-prismjs-btn-color-hover: var(--alpha-azul-texto-escuro);
}

/* A seta do acordeao aberto: o tema do escuro a escreve com o `#006AE6`. */
[data-bs-theme=dark] .accordion-button::after {
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234FA8EE'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* O texto azul do tema. `.text-primary`, `.text-hover-primary`, `.btn-active-color-primary`, `.btn-color-primary` e a
   paginacao ja leem `--bs-text-primary` / `--bs-component-hover-color` (acima); estes escrevem `var(--bs-primary)`. O
   botao claro azul passa o mouse para o fundo `#0068B3` com o texto branco — o hover do tema e mais especifico e
   continua valendo. */
[data-bs-theme=dark] .btn.btn-light-primary,
[data-bs-theme=dark] .btn.btn-light-primary i,
[data-bs-theme=dark] .btn.btn-light-primary .svg-icon,
[data-bs-theme=dark] .btn.btn-light-primary.dropdown-toggle:after,
[data-bs-theme=dark] .btn.btn-active-light-primary:hover:not(.btn-active),
[data-bs-theme=dark] .btn.btn-active-light-primary:hover:not(.btn-active) i,
[data-bs-theme=dark] .btn.btn-active-light-primary:focus:not(.btn-active),
[data-bs-theme=dark] .btn.btn-active-light-primary:focus:not(.btn-active) i,
[data-bs-theme=dark] .btn.btn-active-light-primary.active,
[data-bs-theme=dark] .btn.btn-active-light-primary.active i,
[data-bs-theme=dark] .btn.btn-active-light-primary.show,
[data-bs-theme=dark] .btn.btn-active-light-primary.show i,
[data-bs-theme=dark] .show > .btn.btn-active-light-primary,
[data-bs-theme=dark] .badge-light-primary,
/* A badge de status no contorno azul (`Em Estoque`, `Encerrado`, `Preço exclusivo` — 9.12): o `badge-outline` do tema pinta
   o texto com `var(--bs-primary)`, 3,10:1 no escuro. U8 da analise da requisicao, divergencia 1316. */
[data-bs-theme=dark] .badge-primary.badge-outline,
[data-bs-theme=dark] .alert-primary,
[data-bs-theme=dark] .alert-primary .alert-link {
    color: var(--alpha-azul-texto-escuro);
}

/* O `?` da pergunta (`AlphaAlertas.confirmar`, o SweetAlert2 do `plugins.bundle.css`): era 3,10:1 no `#0068B3`. */
[data-bs-theme=dark] .swal2-icon.swal2-question {
    border-color: var(--alpha-azul-texto-escuro);
    color: var(--alpha-azul-texto-escuro);
}

[data-bs-theme=dark] .btn-outline-primary {
    --bs-btn-color: var(--alpha-azul-texto-escuro);
    --bs-btn-disabled-color: var(--alpha-azul-texto-escuro);
}

[data-bs-theme=dark] .link-primary {
    color: rgba(79, 168, 238, var(--bs-link-opacity, 1)) !important;
    text-decoration-color: rgba(79, 168, 238, var(--bs-link-underline-opacity, 1)) !important;
}

/* A aba ativa: texto e sublinhado no azul claro, como na prancha escura. */
[data-bs-theme=dark] .nav-line-tabs .nav-item .nav-link.active,
[data-bs-theme=dark] .nav-line-tabs .nav-item.show .nav-link,
[data-bs-theme=dark] .nav-line-tabs .nav-item .nav-link:hover:not(.disabled) {
    color: var(--alpha-azul-texto-escuro);
    border-bottom-color: var(--alpha-azul-texto-escuro);
}

/* Os menus suspensos do tema que pintam o item com o azul (`menu-state-*`, `menu-hover-primary`): dentro do item, o
   `--bs-primary` vira o azul claro — ali ele so pinta texto, icone e ponto; o fundo e o `--bs-primary-light`. */
[data-bs-theme=dark] .menu-state-bg-light-primary .menu-link,
[data-bs-theme=dark] .menu-state-primary .menu-link,
[data-bs-theme=dark] .menu-hover-primary .menu-link,
[data-bs-theme=dark] .menu-here-primary .menu-link,
[data-bs-theme=dark] .menu-show-primary .menu-link,
[data-bs-theme=dark] .menu-active-primary .menu-link {
    --bs-primary: var(--alpha-azul-texto-escuro);
}

/* O texto azul dos `alpha-*.css` (todos escrevem `var(--bs-primary)`): o mesmo seletor, com o escuro na frente. */
[data-bs-theme=dark] .table.grade-selecao > tbody > tr.selecionada .grade-chave {
    color: var(--alpha-azul-texto-escuro) !important;
}

[data-bs-theme=dark] .agenda-cabecalho-hoje .agenda-cabecalho-data,
[data-bs-theme=dark] .alpha-calendario-atual .alpha-calendario-marca,
[data-bs-theme=dark] .fluxo-etapa.atual .fluxo-titulo,
[data-bs-theme=dark] .alpha-dica-icone,
[data-bs-theme=dark] .alpha-dica-marca:hover,
[data-bs-theme=dark] .nav.abas-nivel-3 .nav-item .nav-link:not(.active):hover,
[data-bs-theme=dark] .nav.abas-nivel-3 .nav-item .nav-link.active,
[data-bs-theme=dark] .nav.abas-nivel-3 .nav-item .nav-link.active:hover {
    color: var(--alpha-azul-texto-escuro);
}

[data-bs-theme=dark] .alpha-arvore-botao:hover,
[data-bs-theme=dark] .nav.abas-nivel-1 .nav-item .nav-link:not(.active):hover {
    border-color: var(--alpha-azul-texto-escuro);
    color: var(--alpha-azul-texto-escuro);
}

/* A lateral mais escura (`#001A38` → `#00346B` → `#00488C`), o menu `#C9DCF2` (12,45:1 no topo, 6,51:1 na base) e o
   α a 7%. O item ativo continua branco sobre branco a 14%: 6,36:1 ate na base. */
[data-bs-theme=dark] [data-kt-app-layout=dark-sidebar] .app-sidebar {
    --alpha-lateral-texto: #C9DCF2;
    --alpha-lateral-icone: #6E9CCB;
    --alpha-lateral-marca: .07;
    background: linear-gradient(180deg, #001A38 0%, #00346B 45%, var(--alpha-marinho) 100%);
}

/* A tela de entrada mais escura; o cartao ja usa o fundo do tema (`--bs-body-bg`). */
[data-bs-theme=dark] .alpha-login {
    background: linear-gradient(135deg, #000E22 0%, #00264F 40%, var(--alpha-marinho) 80%, var(--alpha-azul) 100%);
}

/* O cabecalho do sino no escuro: o degrade da lateral escura. */
[data-bs-theme=dark] .alpha-cabecalho-menu {
    background: linear-gradient(135deg, #001A38 0%, #00346B 50%, var(--alpha-marinho) 100%);
}

[data-bs-theme=dark] .alpha-login-cartao {
    box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
}