/* ===========================================================================
   Moldura das páginas no novo padrão visual: a barra do topo, a faixa com o degradê, a busca, os cabeçalhos
   de seção, o painel dos widgets, o rodapé e as janelas do navbar.html.

   Vale nas páginas montadas pelo pageNova (_controllers/index.php): a home (home.css) e a home dos apps
   gerados (app.css). body.fx-novo marca a página e .pg é o conteúdo dela. As cores, a fonte, os botões,
   os campos e as janelas vêm de .fs-app (_views/manual/apps/fsmanager/styles.css).
   =========================================================================== */

body.fx-novo{
    background: #FAFCFE;
}

/* o aviso de versão de desenvolvimento do navbar.html não aparece: nestas páginas ele é a pílula da faixa do
   topo (pagina.js) */
body.fx-novo > .dev-alert{
    display: none !important;
}

/* --fx-tarja-fixa: a altura da tarja de servidor inacessível, enquanto ela está presa no alto da janela
   (servidor.js); a página já desceu essa altura (base.css) */
.pg{
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--fx-tarja-fixa, 0px));
    min-height: calc(100dvh - var(--fx-tarja-fixa, 0px));
}

.pg .pg-miolo{
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---- página que ocupa a janela toda (pageNova sem o rodapé: o mapa do gestor do field service). A página não
        rola: o conteúdo, que é o elemento com data-moldura="barra", fica com toda a altura que sobra abaixo da
        barra e, quando há uma, da tarja de aviso do alto ---- */
body.fx-novo.fx-janela{
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

body.fx-janela > .pg{
    flex: 1 1 auto;
    min-height: 0;
}

/* vale mais que a altura em pixels que a página calcula para si (no style do elemento) */
body.fx-janela > .pg > [data-moldura="barra"]{
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
}

/* ---- barra do topo ---- */
.pg .pg-barra{
    position: sticky;
    top: var(--fx-tarja-fixa, 0px);
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 60px;
    padding: 0 16px;
    background: var(--fs-appbar);
    color: var(--fs-on-appbar);
    box-shadow: 0 2px 10px rgba(29,45,60,0.25);
}

.pg .pg-marca{
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    flex: none;
}

.pg .pg-marca img{
    width: 36px;
    height: 36px;
    border-radius: 9px;
}

.pg .pg-marca-nome{
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1;
}

.pg .pg-marca-nome span{
    padding: 0.3em 0.62em 0.26em 0.68em;
    border-radius: 999px;
    background: var(--fs-on-appbar);
    color: var(--fs-appbar);
    font-size: 0.58em;
    font-weight: 900;
    letter-spacing: 0.09em;
    line-height: 1;
}

/* a filial em uso: abre a janela de troca */
.pg .pg-filial,
.pg .pg-usuario,
.pg .pg-botao{
    display: flex;
    align-items: center;
    border: 0;
    background: rgba(255,255,255,0.14);
    color: #fff;
    font-weight: 700;
    line-height: 1;
}

.pg .pg-filial:hover,
.pg .pg-usuario:hover,
.pg .pg-botao:hover{
    background: rgba(255,255,255,0.26);
}

.pg .pg-filial:focus-visible,
.pg .pg-usuario:focus-visible,
.pg .pg-botao:focus-visible,
.pg .pg-marca:focus-visible{
    outline: 3px solid rgba(255,255,255,0.75);
    outline-offset: 2px;
}

.pg .pg-filial{
    gap: 8px;
    min-width: 0;
    height: 40px;
    margin-left: 6px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 0.95rem;
}

.pg .pg-filial .lbl-unidade-negocio-selecionada{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* o título da tela escrita à mão (setPageTitle) */
.pg .pg-titulo{
    min-width: 0;
    overflow: hidden;
    padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,0.28);
    color: var(--fs-on-appbar);
    font-size: 1.02rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pg .pg-filial i{
    font-size: 1rem;
    flex: none;
}

.pg .pg-filial .bi-chevron-down,
.pg .pg-usuario .bi-chevron-down{
    font-size: 0.75rem;
    opacity: 0.85;
}

.pg .pg-barra-acoes{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex: none;
}

.pg .pg-barra .ajax-status{
    color: #fff;
    margin-right: 4px;
}

.pg .pg-botao{
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.pg .pg-botao i{
    font-size: 1.1rem;
}

/* notificação nova: o fluxus.js pinta o sino de vermelho; na barra azul ele fica branco com um ponto */
.pg .pg-botao.notification-bagde{
    position: relative;
}

.pg .pg-botao.notification-bagde i.text-danger{
    color: #fff !important;
}

.pg .pg-botao.notification-bagde i.text-danger::after{
    content: "";
    position: absolute;
    top: 8px;
    right: 9px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--fs-appbar);
    border-radius: 50%;
    background: #FFB300;
}

.pg .pg-usuario{
    gap: 8px;
    height: 40px;
    padding: 0 12px 0 4px;
    border-radius: 999px;
    font-size: 0.95rem;
}

.pg .pg-usuario .user-avatar{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--fs-cartao, #fff);
}

.pg .pg-usuario .lbl-user-name{
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-weight: 700;
}

/* ---- faixa do topo: o degradê com a marca ao fundo, a linha de identificação e as pílulas ---- */
.pg .pg-faixa{
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 28px 0 30px 0;
    background: linear-gradient(135deg, var(--fs-grad-a), var(--fs-grad-b));
    color: #fff;
}

.pg .pg-faixa-fundo{
    position: absolute;
    right: -60px;
    top: -70px;
    height: 420px;
    aspect-ratio: 287 / 232;
    z-index: -1;
    pointer-events: none;
}

.pg .pg-fundo-r{ fill: rgba(255,255,255,0.06); }
.pg .pg-fundo-seta{ fill: rgba(255,255,255,0.04); }

.pg .pg-faixa-linha{
    display: flex;
    align-items: center;
    gap: 20px;
}

.pg .pg-faixa-texto{
    min-width: 0;
}

.pg .pg-faixa-texto h1{
    margin: 0;
    font-size: 1.9rem;
    font-weight: 900;
    line-height: 1.15;
    color: #fff;
}

.pg .pg-faixa-texto p{
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin: 6px 0 0 0;
    font-size: 1.02rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}

.pg .pg-faixa-texto p > span{
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pg .pg-faixa-texto p i{
    font-size: 1rem;
    opacity: 0.9;
}

.pg .pg-faixa-acoes{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

.pg .pg-pilula{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 800;
    white-space: nowrap;
}

.pg .pg-pilula i{
    font-size: 1rem;
}

.pg .pg-pilula-botao:hover{
    background: rgba(255,255,255,0.3);
}

.pg .pg-pilula-botao:focus-visible{
    outline: 3px solid rgba(255,255,255,0.75);
    outline-offset: 2px;
}

/* versão de desenvolvimento: aviso como os do app (cor de atenção). É um botão: abre a lista do que está mudando
   na versão (pagina.js: abreNotasDev) */
.pg .pg-pilula-dev{
    background: color-mix(in srgb, var(--fs-warning) 12%, var(--fs-cartao, #fff));
    color: var(--fs-warning);
    cursor: pointer;
}

.pg .pg-pilula-dev.pg-pilula-botao:hover{
    background: color-mix(in srgb, var(--fs-warning) 24%, var(--fs-cartao, #fff));
}

/* a janela "Em desenvolvimento" (as notas estão no base.css: .informacoes-versao-page) */
.fs-app.pg-notas .modal-content{
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    background: var(--fs-cartao, #fff);
    color: var(--fs-text);
}

.fs-app.pg-notas .modal-body{
    padding: 18px 20px 8px 20px;
    background: transparent;
}

.fs-app.pg-notas .pg-notas-rodape{
    display: flex;
    justify-content: flex-end;
    padding: 12px 20px 16px 20px;
}

.fs-app.pg-notas .pg-notas-ok{
    min-height: 40px;
    padding: 0 22px;
    border: 1px solid var(--fs-primary);
    border-radius: 12px;
    background: var(--fs-primary);
    color: var(--fs-on-primary);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
}

.fs-app.pg-notas .pg-notas-ok:hover{
    background: var(--fs-appbar);
    color: var(--fs-on-appbar, #fff);
}

.fs-app.pg-notas .pg-notas-ok:focus-visible{
    outline: 2px solid var(--fs-primary);
    outline-offset: 2px;
}

/* a busca, no pé da faixa */
.pg .pg-busca{
    display: flex;
    align-items: center;
    gap: 12px;
    height: 58px;
    margin: 22px 0 0 0;
    padding: 0 18px;
    border-radius: 16px;
    background: var(--fs-cartao, #fff);
    color: var(--fs-muted);
    box-shadow: 0 10px 28px rgba(29,45,60,0.22);
    cursor: text;
}

.pg .pg-busca:focus-within{
    box-shadow: 0 10px 28px rgba(29,45,60,0.22), 0 0 0 3px rgba(255,255,255,0.55);
}

.pg .pg-busca > i{
    font-size: 1.2rem;
    color: var(--fs-primary);
}

.pg .pg-busca input{
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--fs-text);
    font-size: 1.1rem;
    font-weight: 600;
}

.pg .pg-busca input::placeholder{
    color: var(--fs-muted);
    font-weight: 500;
}

.pg .pg-busca kbd{
    padding: 3px 9px;
    border: 1px solid var(--fs-outline);
    border-radius: 8px;
    background: var(--fs-surface);
    color: var(--fs-muted);
    font-family: "FsDejaVuSansMono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.8rem;
}

/* ---- cabeçalho das seções ---- */
.pg .pg-cabecalho{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
    margin-bottom: 14px;
}

.pg .pg-cabecalho h2{
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--fs-text);
}

.pg .pg-cabecalho .fs-etiqueta{
    --fs-cor: var(--fs-primary);
}

.pg .pg-link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 7px 12px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--fs-primary);
    font-size: 0.95rem;
    font-weight: 700;
}

.pg .pg-link:hover{
    background: color-mix(in srgb, var(--fs-primary) 10%, transparent);
    color: var(--fs-appbar);
}

/* ---- painel dos widgets ---- */

/* os contêineres onde o fluxus.js monta os widgets, na largura da página. Com cartão do novo padrão dentro
   (widgets.css) viram uma grade de doze colunas, em que cada cartão diz quanto ocupa (wg-terco, wg-metade,
   wg-dois-tercos; sem classe, a linha inteira). Sem cartão novo, fica a caixa flexível do
   .widgets-container (base.css), como os widgets de aparência antiga esperam */
body.fx-novo #fluxus-widgets-container-top,
body.fx-novo #fluxus-widgets-container{
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

body.fx-novo #fluxus-widgets-container-top:has(.wg),
body.fx-novo #fluxus-widgets-container:has(.wg){
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: dense;
    justify-content: normal;
    gap: 14px;
}

body.fx-novo #fluxus-widgets-container-top:has(.wg) > div,
body.fx-novo #fluxus-widgets-container:has(.wg) > div{
    grid-column: 1 / -1;
    min-width: 0;
    max-width: none;
    margin: 0;
}

/* um contêiner embaixo do outro */
body.fx-novo #fluxus-widgets-container-top:not(.d-none) + #fluxus-widgets-container{
    margin-top: 14px;
}

/* widget que saiu deixa o contêiner dele vazio */
body.fx-novo #fluxus-widgets-container-top > div:empty,
body.fx-novo #fluxus-widgets-container > div:empty{
    display: none;
}

@media (min-width: 768px){
    body.fx-novo #fluxus-widgets-container-top > div:has(> .wg-terco),
    body.fx-novo #fluxus-widgets-container > div:has(> .wg-terco){
        grid-column: span 6;
    }
}

@media (min-width: 1100px){
    body.fx-novo #fluxus-widgets-container-top > div:has(> .wg-terco),
    body.fx-novo #fluxus-widgets-container > div:has(> .wg-terco){
        grid-column: span 4;
    }

    body.fx-novo #fluxus-widgets-container-top > div:has(> .wg-metade),
    body.fx-novo #fluxus-widgets-container > div:has(> .wg-metade){
        grid-column: span 6;
    }

    body.fx-novo #fluxus-widgets-container-top > div:has(> .wg-dois-tercos),
    body.fx-novo #fluxus-widgets-container > div:has(> .wg-dois-tercos){
        grid-column: span 8;
    }
}

/* os avisos que o fluxus.js escreve no lugar de um widget (carregando, resultado que não veio, erro) têm
   a aparência antiga, escura; no painel viram um cartão claro como os dos widgets. Só os avisos: widget de
   aparência antiga que venha parar aqui continua como é */
body.fx-novo .pg-painel .widget-dark:has(.spinner-grow),
body.fx-novo .pg-painel .widget-dark:has(.widget-dark-small-text-green.p-3){
    padding: 14px 18px;
    border: 1px solid #C7D2E0;
    border-radius: 18px;
    background: var(--fs-cartao, #fff);
}

body.fx-novo .pg-painel .widget-dark:has(.spinner-grow) .widget-dark-titulo-1,
body.fx-novo .pg-painel .widget-dark:has(.widget-dark-small-text-green.p-3) .widget-dark-titulo-1{
    background: none;
    color: #1D2D3C;
    font-family: "FsNunitoSans", "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    text-align: left;
}

body.fx-novo .pg-painel .widget-dark .widget-dark-small-text-green.p-3{
    padding: 4px 0 0 0 !important;
    color: #5C6B7F;
    font-family: "FsNunitoSans", "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left !important;
}

body.fx-novo .pg-painel .widget-dark .spinner-grow{
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 6px;
    color: #0467EC !important;
}

/* com texto na busca o painel sai da frente, para o que foi achado aparecer logo abaixo */
.pg.pg-buscando .pg-painel{
    display: none;
}

/* aviso de que a busca não achou nada */
.pg .pg-vazio{
    margin: 8px 0 0 0;
    padding: 28px 16px;
    border: 1px dashed var(--fs-outline);
    border-radius: 16px;
    color: var(--fs-muted);
    font-weight: 600;
    text-align: center;
}

.pg .pg-vazio i{
    margin-right: 8px;
}

/* ---- rodapé ---- */
/* margin-top: o rodapé fica no pé da janela quando a página é mais curta que ela */
.pg .pg-rodape{
    margin-top: auto;
    padding: 18px 0 22px 0;
    color: var(--fs-muted);
    font-size: 0.88rem;
    font-weight: 600;
}

.pg .pg-rodape .pg-miolo{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
}

.pg .pg-rodape b{
    color: var(--fs-text);
    font-weight: 800;
}

.pg .pg-rodape a{
    color: var(--fs-primary);
    font-weight: 700;
    text-decoration: none;
}

.pg .pg-rodape a:hover{
    text-decoration: underline;
}

/* ===========================================================================
   As janelas do navbar.html abertas a partir destas páginas (o pagina.js põe .fs-app nelas). As duas
   laterais (menu do usuário e widgets) abrem pela direita, que é o lado dos botões que as chamam
   =========================================================================== */

/* ---------------------------------------------------------------------------
   O menu do usuário e o painel dos widgets (classe mn nos dois): um menu lateral de aplicativo. No alto, em
   degradê, a marca do provedor e quem está usando (foto, nome e filial); no meio as ações em grupos; no pé o
   suporte, o sair e a marca do sistema. O painel dos widgets é o segundo nível: o mesmo alto, mais curto, com a seta de
   voltar. O HTML está no navbar.html; os atalhos, no pagina.js (menu).
   --------------------------------------------------------------------------- */
body.fx-novo .offcanvas.mn{
    display: flex;
    flex-direction: column;
    width: 360px;
    max-width: 90vw;
    overflow: hidden;
    border: 0;
    background: var(--fs-background);
    box-shadow: 0 0 36px rgba(29,45,60,0.34);
    color: var(--fs-text);
}

body.fx-novo .mn [hidden]{ display: none !important; }

/* abre pela direita na maior parte das telas: o canto arredondado fica do lado de dentro */
body.fx-novo .offcanvas.mn.offcanvas-end{ border-radius: 24px 0 0 24px; }
body.fx-novo .offcanvas.mn.offcanvas-start{ border-radius: 0 24px 24px 0; }

/* ---- o alto ---- */
body.fx-novo .mn .mn-topo{
    position: relative;
    flex: 0 0 auto;
    isolation: isolate;
    overflow: hidden;
    padding: 16px 16px 20px 18px;
    background: linear-gradient(135deg, var(--fs-grad-a), var(--fs-grad-b));
    color: #fff;
}

body.fx-novo .mn .mn-topo-curto{ padding-bottom: 16px; }

body.fx-novo .mn .mn-topo-fundo{
    position: absolute;
    right: -46px;
    top: -34px;
    z-index: -1;
    height: 250px;
    aspect-ratio: 287 / 232;
    pointer-events: none;
}

body.fx-novo .mn .mn-topo-fundo polygon:first-child{ fill: rgba(255,255,255,0.05); }
body.fx-novo .mn .mn-topo-fundo polygon:last-child{ fill: rgba(255,255,255,0.08); }

body.fx-novo .mn .mn-topo-linha{
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
}

/* a marca do provedor num cartão branco, que é o fundo para o qual as logos são feitas */
body.fx-novo .mn .mn-provedor{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 58px;
    padding: 6px 14px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

body.fx-novo .mn .mn-provedor img{
    max-width: 200px;
    max-height: 46px;
    object-fit: contain;
}

body.fx-novo .mn .mn-sistema{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 900;
    white-space: nowrap;
}

body.fx-novo .mn .mn-sistema span span{
    margin-left: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #fff;
    color: var(--fs-appbar);
    font-size: 0.72rem;
    vertical-align: 2px;
}

body.fx-novo .mn .mn-redondo{
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    margin-left: auto;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.16);
    color: #fff;
}

body.fx-novo .mn .mn-topo-linha .mn-redondo:first-child{ margin-left: 0; }
body.fx-novo .mn .mn-redondo:hover{ background: rgba(255,255,255,0.3); }

body.fx-novo .mn .mn-redondo:focus-visible,
body.fx-novo .mn .mn-usuario:focus-visible{
    outline: 3px solid rgba(255,255,255,0.75);
    outline-offset: 2px;
}

/* quem está usando */
body.fx-novo .mn .mn-usuario{
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin-top: 16px;
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: #fff;
    text-align: left;
}

body.fx-novo .mn .mn-foto{
    position: relative;
    flex: 0 0 auto;
    width: 68px;
    height: 68px;
}

body.fx-novo .mn .mn-foto img{
    width: 100%;
    height: 100%;
    border: 3px solid rgba(255,255,255,0.92);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,0.26);
    object-fit: cover;
}

body.fx-novo .mn .mn-foto i{
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    color: #0357C8;
    font-size: 0.66rem;
}

body.fx-novo .mn .mn-quem{ min-width: 0; }

body.fx-novo .mn .mn-quem strong{
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 1.22rem;
    font-weight: 900;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.fx-novo .mn .mn-quem small{
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 2px;
    overflow: hidden;
    color: rgba(255,255,255,0.9);
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
}

/* o título do segundo nível (widgets) */
body.fx-novo .mn .mn-titulo{ flex: 1; min-width: 0; }

body.fx-novo .mn .mn-titulo h5{
    margin: 0;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.2;
}

body.fx-novo .mn .mn-titulo p{
    margin: 0;
    overflow: hidden;
    color: rgba(255,255,255,0.9);
    font-size: 0.86rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- o meio: as ações ---- */
body.fx-novo .mn .mn-corpo{
    flex: 1 1 auto;
    padding: 8px 12px 12px 12px;
    overflow-y: auto;
}

body.fx-novo .mn #app-menu-container:empty{ display: none; }

body.fx-novo .mn .mn-grupo{
    margin: 12px 10px 2px 10px;
    color: var(--fs-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.fx-novo .mn .mn-item{
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 5px 10px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--fs-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

body.fx-novo .mn .mn-item:hover{ background: var(--fs-surface-alto); }

body.fx-novo .mn .mn-item:focus-visible{
    outline: 3px solid color-mix(in srgb, var(--fs-primary) 35%, transparent);
    outline-offset: -1px;
}

/* o ícone numa pastilha, como nos menus de aplicativo */
body.fx-novo .mn .mn-item > i:first-child{
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--fs-surface-alto);
    color: var(--fs-primary);
    font-size: 1.12rem;
}

body.fx-novo .mn .mn-item:hover > i:first-child{
    background: var(--fs-primary);
    color: var(--fs-on-primary, #fff);
}

body.fx-novo .mn .mn-item > span{ flex: 1; min-width: 0; }

body.fx-novo .mn .mn-item b{
    display: block;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.25;
}

body.fx-novo .mn .mn-item small{
    display: block;
    overflow: hidden;
    color: var(--fs-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.fx-novo .mn .mn-seta{ color: var(--fs-muted); font-size: 0.85rem; }

body.fx-novo .mn .mn-ponto{
    flex: 0 0 auto;
    padding: 2px 9px;
    border-radius: 999px;
    background: #FFB300;
    color: #1D2D3C;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 900;
}

/* ---- o pé: sair e a marca do sistema ---- */
body.fx-novo .mn .mn-pe{
    flex: 0 0 auto;
    padding: 8px 12px 14px 12px;
    border-top: 1px solid var(--fs-outline);
    background: var(--fs-cartao, #fff);
}

body.fx-novo .mn .mn-pe-linha{ display: flex; gap: 6px; }
body.fx-novo .mn .mn-pe-linha .mn-item{ flex: 1 1 0; }

body.fx-novo .mn .mn-sair b{ color: var(--fs-error); }

body.fx-novo .mn .mn-sair > i:first-child{
    background: color-mix(in srgb, var(--fs-error) 12%, var(--fs-cartao, #fff));
    color: var(--fs-error);
}

body.fx-novo .mn .mn-sair:hover{ background: color-mix(in srgb, var(--fs-error) 8%, var(--fs-cartao, #fff)); }
body.fx-novo .mn .mn-sair:hover > i:first-child{ background: var(--fs-error); color: #fff; }

body.fx-novo .mn .mn-marca{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--fs-surface);
    color: var(--fs-text);
    text-decoration: none;
}

body.fx-novo .mn .mn-marca:hover{ background: var(--fs-surface-alto); }
body.fx-novo .mn .mn-marca img{ flex: 0 0 auto; }
body.fx-novo .mn .mn-marca span{ min-width: 0; }
body.fx-novo .mn .mn-marca .mn-versao{ margin-left: auto; text-align: right; }
body.fx-novo .mn .mn-marca .mn-versao b{ font-size: 0.86rem; font-variant-numeric: tabular-nums; }
body.fx-novo .mn .mn-marca b{ display: block; font-size: 0.95rem; font-weight: 900; line-height: 1.2; }

body.fx-novo .mn .mn-marca small{
    display: block;
    overflow: hidden;
    color: var(--fs-muted);
    font-size: 0.76rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   O painel dos widgets: um cartão por widget, com a chave que diz se ele está na tela, o que ele mostra e o
   botão de ativar ou desativar. A lista é montada pelo fluxus.js (o clique no #cmd-widgets)
   --------------------------------------------------------------------------- */
body.fx-novo #modal-navbar-widgets.mn{ width: 420px; max-width: 94vw; }
body.fx-novo #modal-navbar-widgets .mn-corpo{ padding: 14px 12px 16px 12px; }

body.fx-novo #modal-navbar-widgets .accordion{
    display: grid;
    gap: 8px;
}

body.fx-novo #modal-navbar-widgets .accordion-item{
    overflow: hidden;
    border: 1px solid var(--fs-outline);
    border-radius: 16px;
    background: var(--fs-cartao, #fff);
}

body.fx-novo #modal-navbar-widgets .accordion-item.wn-ativo{
    border-color: color-mix(in srgb, var(--fs-success) 45%, var(--fs-outline));
}

body.fx-novo #modal-navbar-widgets .accordion-button{
    gap: 12px;
    padding: 12px 14px;
    background: var(--fs-cartao, #fff);
    box-shadow: none;
    color: var(--fs-text);
}

body.fx-novo #modal-navbar-widgets .accordion-button:not(.collapsed){
    background: var(--fs-surface);
    color: var(--fs-text);
}

body.fx-novo #modal-navbar-widgets .accordion-button:focus-visible{
    outline: 3px solid color-mix(in srgb, var(--fs-primary) 35%, transparent);
    outline-offset: -3px;
}

/* a chave: desligada, cinza; ligada, verde */
body.fx-novo #modal-navbar-widgets .wn-chave{
    position: relative;
    flex: 0 0 auto;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--fs-outline);
    transition: background 0.2s;
}

body.fx-novo #modal-navbar-widgets .wn-chave::after{
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: left 0.2s;
}

body.fx-novo #modal-navbar-widgets .wn-ativo .wn-chave{ background: var(--fs-success); }
body.fx-novo #modal-navbar-widgets .wn-ativo .wn-chave::after{ left: 19px; }

body.fx-novo #modal-navbar-widgets .wn-texto{ flex: 1; min-width: 0; }

body.fx-novo #modal-navbar-widgets .wn-texto b{
    display: block;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
}

body.fx-novo #modal-navbar-widgets .wn-texto small{
    display: block;
    color: var(--fs-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

body.fx-novo #modal-navbar-widgets .wn-ativo .wn-texto small{ color: var(--fs-success); }

body.fx-novo #modal-navbar-widgets .accordion-body{
    padding: 4px 14px 14px 14px;
    background: var(--fs-surface);
    color: var(--fs-text);
    font-size: 0.93rem;
}

body.fx-novo #modal-navbar-widgets .wn-info{ margin: 0 0 10px 0; font-weight: 600; line-height: 1.4; }

/* o que se sabe do widget, em fichas: de quanto em quanto atualiza, de onde são os dados e quem pode usar */
body.fx-novo #modal-navbar-widgets .wn-fichas{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

body.fx-novo #modal-navbar-widgets .wn-fichas span{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid var(--fs-outline);
    border-radius: 999px;
    background: var(--fs-cartao, #fff);
    color: var(--fs-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

body.fx-novo #modal-navbar-widgets .wn-fichas i{ color: var(--fs-primary); }

/* ativar e desativar */
body.fx-novo #modal-navbar-widgets .btn-subscribe-widget,
body.fx-novo #modal-navbar-widgets .btn-unsubscribe-widget{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 800;
}

body.fx-novo #modal-navbar-widgets .btn-subscribe-widget{
    border-color: var(--fs-primary);
    background: var(--fs-primary);
    color: var(--fs-on-primary, #fff);
}

body.fx-novo #modal-navbar-widgets .btn-subscribe-widget:hover{ filter: brightness(1.08); }

body.fx-novo #modal-navbar-widgets .btn-unsubscribe-widget{
    border-color: color-mix(in srgb, var(--fs-error) 45%, var(--fs-cartao, #fff));
    background: var(--fs-cartao, #fff);
    color: var(--fs-error);
}

body.fx-novo #modal-navbar-widgets .btn-unsubscribe-widget:hover{
    background: color-mix(in srgb, var(--fs-error) 10%, var(--fs-cartao, #fff));
}

body.fx-novo #modal-navbar-widgets .wn-vazio{
    margin: 0;
    padding: 36px 16px;
    color: var(--fs-muted);
    font-weight: 700;
    text-align: center;
}

@media (max-width: 575.98px){
    body.fx-novo .offcanvas.mn,
    body.fx-novo #modal-navbar-widgets.mn{ width: 100vw; max-width: 100vw; border-radius: 0; }
}

/* janela de escolher o app (o botão de aplicativos da barra, fora da home): os apps em cartões, como na
   grade da home. A lista é montada pelo fluxus.js (drawIcons); aqui muda só a aparência dela */
/* o campo de filtrar: um campo simples, sem o rótulo flutuante por cima do texto de exemplo */
body.fx-novo #modal-navbar-selecionar-app .form-floating > label{
    display: none;
}

body.fx-novo #modal-navbar-selecionar-app .form-floating > .form-control{
    height: 52px;
    min-height: 0;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--fs-outline);
    border-radius: 14px;
    color: var(--fs-text);
    font-size: 1.05rem;
    font-weight: 600;
}

body.fx-novo #modal-navbar-selecionar-app .form-floating > .form-control::placeholder{
    color: var(--fs-muted);
    font-weight: 500;
}

body.fx-novo #modal-navbar-selecionar-app #icons-home-container{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 12px;
    margin: 16px 0 8px 0;
}

body.fx-novo #modal-navbar-selecionar-app .app-icon-selector{
    flex: none;
    width: auto;
    max-width: none;
    padding: 0;
}

body.fx-novo #modal-navbar-selecionar-app .icon-container{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    height: 100%;
    min-width: 0;
    padding: 18px 10px 14px 10px;
    border: 1px solid var(--fs-outline);
    border-radius: 16px;
    background: var(--fs-cartao, #fff);
}

body.fx-novo #modal-navbar-selecionar-app .icon-container:hover{
    border-color: var(--fs-primary);
    background: var(--fs-cartao, #fff);
    box-shadow: 0 8px 20px rgba(29,45,60,0.14);
}

body.fx-novo #modal-navbar-selecionar-app .icon-image-container{
    align-items: center;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: var(--fs-surface-alto);
}

body.fx-novo #modal-navbar-selecionar-app .icon-image-container img{
    width: 40px;
    height: 40px;
    object-fit: contain;
}

body.fx-novo #modal-navbar-selecionar-app .icon-label-container{
    color: var(--fs-muted);
}

body.fx-novo #modal-navbar-selecionar-app .icon-label-container label,
body.fx-novo #modal-navbar-selecionar-app .icon-container:hover .icon-label-container label{
    margin: 0;
    color: var(--fs-text);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: normal;
}

/* app que abre nas telas clássicas: o mesmo sinal da grade da home, no canto do cartão */
body.fx-novo #modal-navbar-selecionar-app .icon-v-2::after{
    position: absolute;
    top: 8px;
    right: 10px;
    margin: 0;
    font-size: 0.95rem;
    opacity: 0.75;
}

/* janela de troca de filial: as filiais em pastilhas */
body.fx-novo #modal-navbar-selecionar-filial .drop-down-item-unidade-negocio{
    min-width: 0;
    margin: 4px;
    padding: 8px 14px 8px 10px;
    border: 1px solid var(--fs-outline);
    border-radius: 12px;
    background: var(--fs-cartao, #fff);
    color: var(--fs-text);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0;
}

body.fx-novo #modal-navbar-selecionar-filial .drop-down-item-unidade-negocio:hover{
    border-color: var(--fs-primary);
    background: var(--fs-surface);
}

body.fx-novo #modal-navbar-selecionar-filial .drop-down-item-unidade-negocio i{
    color: var(--fs-primary);
}

/* a licença de cada filial, pela mesma régua da tarja do alto (situacaoDaLicenca, no fluxus.js): perto de vencer
   fica em tom de laranja; mais perto ainda (uma semana ou menos), em tom de vermelho */
body.fx-novo #modal-navbar-selecionar-filial .filial-aviso{
    border-color: color-mix(in srgb, var(--fs-warning) 45%, var(--fs-outline));
    background: color-mix(in srgb, var(--fs-warning) 14%, var(--fs-cartao, #fff));
}

body.fx-novo #modal-navbar-selecionar-filial .filial-aviso i{
    color: var(--fs-warning);
}

body.fx-novo #modal-navbar-selecionar-filial .filial-aviso:hover{
    border-color: var(--fs-warning);
    background: color-mix(in srgb, var(--fs-warning) 22%, var(--fs-cartao, #fff));
}

body.fx-novo #modal-navbar-selecionar-filial .filial-perigo{
    border-color: color-mix(in srgb, var(--fs-error) 40%, var(--fs-outline));
    background: color-mix(in srgb, var(--fs-error) 11%, var(--fs-cartao, #fff));
}

body.fx-novo #modal-navbar-selecionar-filial .filial-perigo i{
    color: var(--fs-error);
}

body.fx-novo #modal-navbar-selecionar-filial .filial-perigo:hover{
    border-color: var(--fs-error);
    background: color-mix(in srgb, var(--fs-error) 18%, var(--fs-cartao, #fff));
}

/* a filial com a licença vencida (bloqueada): fica no fim da lista, em cinza, com o nome riscado e um X no lugar
   do V */
body.fx-novo #modal-navbar-selecionar-filial .filial-expirada{
    --fx-cinza: #808080;
    border-color: color-mix(in srgb, var(--fx-cinza) 35%, var(--fs-cartao, #fff));
    background: color-mix(in srgb, var(--fx-cinza) 16%, var(--fs-cartao, #fff));
    color: color-mix(in srgb, var(--fx-cinza) 80%, var(--fs-text));
}

body.fx-novo #modal-navbar-selecionar-filial .filial-expirada i{
    color: inherit;
    font-size: 0.85em;
}

body.fx-novo #modal-navbar-selecionar-filial .filial-expirada .filial-nome{
    text-decoration: line-through;
}

body.fx-novo #modal-navbar-selecionar-filial .filial-expirada:hover{
    border-color: color-mix(in srgb, var(--fx-cinza) 70%, var(--fs-cartao, #fff));
    background: color-mix(in srgb, var(--fx-cinza) 24%, var(--fs-cartao, #fff));
}

/* ---- telas estreitas ---- */
@media (max-width: 767.98px){
    .pg .pg-miolo,
    body.fx-novo #fluxus-widgets-container-top,
    body.fx-novo #fluxus-widgets-container{
        padding: 0 16px;
    }

    body.fx-novo #fluxus-widgets-container-top:has(.wg),
    body.fx-novo #fluxus-widgets-container:has(.wg){
        gap: 12px;
    }

    .pg .pg-barra{
        gap: 8px;
        height: 56px;
        padding: 0 10px;
    }

    /* na barra fica só o ícone da marca e a foto do usuário */
    .pg .pg-marca-nome,
    .pg .pg-usuario .lbl-user-name,
    .pg .pg-usuario .bi-chevron-down{
        display: none;
    }

    .pg .pg-usuario{
        padding: 0 4px;
    }

    .pg .pg-filial{
        flex: 0 1 auto;
        margin-left: 2px;
        padding: 0 12px;
    }

    /* no celular não há lugar na barra para o título da tela */
    .pg .pg-titulo{
        display: none;
    }

    .pg .pg-faixa{
        padding: 20px 0 22px 0;
    }

    .pg .pg-faixa-fundo{
        right: -90px;
        top: -40px;
        height: 300px;
    }

    .pg .pg-faixa-linha{
        flex-wrap: wrap;
        gap: 14px;
    }

    .pg .pg-faixa-texto{
        flex: 1;
    }

    .pg .pg-faixa-texto h1{
        font-size: 1.45rem;
    }

    .pg .pg-faixa-texto p{
        font-size: 0.92rem;
    }

    .pg .pg-faixa-acoes{
        justify-content: flex-start;
        width: 100%;
        margin-left: 0;
    }

    .pg .pg-pilula{
        height: 34px;
        padding: 0 14px;
        font-size: 0.88rem;
    }

    .pg .pg-busca{
        height: 52px;
        margin-top: 16px;
        border-radius: 14px;
    }

    .pg .pg-busca input{
        font-size: 1.02rem;
    }

    .pg .pg-busca kbd{
        display: none;
    }

    .pg .pg-cabecalho{
        margin-top: 20px;
        margin-bottom: 12px;
    }

    .pg .pg-rodape .pg-miolo{
        justify-content: center;
        text-align: center;
    }
}