/* ===========================================================================
   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;
}

/* a barra antiga do navbar.html (e a faixa do título no celular e o aviso de desenvolvimento, que são
   dela) não aparece nestas páginas: a barra é a .pg-barra */
body.fx-novo > .container-fluid.bg-dark,
body.fx-novo > .dev-alert{
    display: none !important;
}

.pg{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.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: 0;
    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: #fff;
    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;
}

.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: #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) */
.pg .pg-pilula-dev{
    background: color-mix(in srgb, var(--fs-warning) 12%, #fff);
    color: var(--fs-warning);
}

/* 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: #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: #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
   =========================================================================== */

/* menu do usuário: uma lista de ações */
body.fx-novo #modal-navbar-system-menu{
    width: 340px;
    max-width: 88vw;
    border-left: 0;
    background: var(--fs-background);
    box-shadow: -6px 0 24px rgba(29,45,60,0.28);
}

body.fx-novo #modal-navbar-system-menu .offcanvas-body{
    padding: 18px 6px;
}

body.fx-novo #modal-navbar-system-menu .btn{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-height: 52px;
    padding: 10px 16px;
    border: 1px solid var(--fs-outline);
    border-radius: 14px;
    background: #fff;
    color: var(--fs-text);
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
}

body.fx-novo #modal-navbar-system-menu .btn:hover{
    border-color: var(--fs-primary);
    background: var(--fs-surface);
    color: var(--fs-text);
}

body.fx-novo #modal-navbar-system-menu .btn i{
    float: none;
    font-size: 1.2rem;
    color: var(--fs-primary) !important;
}

body.fx-novo #modal-navbar-system-menu .btn .user-avatar{
    float: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

body.fx-novo #modal-navbar-system-menu .btn .lbl-user-name{
    color: var(--fs-primary);
    font-weight: 800;
}

body.fx-novo #modal-navbar-system-menu .btn-sair,
body.fx-novo #modal-navbar-system-menu .btn-sair:hover{
    color: var(--fs-error);
}

body.fx-novo #modal-navbar-system-menu .btn-sair i{
    color: var(--fs-error) !important;
}

body.fx-novo #modal-navbar-system-menu h4{
    margin: 14px 4px 2px 4px;
    color: var(--fs-muted);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* janela dos widgets (ativar e desativar): a barra na cor do app e um cartão por widget. A lista é montada
   pelo fluxus.js; o que muda aqui é só a aparência dela na home */
body.fx-novo #modal-navbar-widgets{
    width: 400px;
    max-width: 92vw;
    border-left: 0;
    background: var(--fs-background);
    box-shadow: -6px 0 24px rgba(29,45,60,0.28);
}

body.fx-novo #modal-navbar-widgets .offcanvas-header{
    padding: 16px 20px;
    background: var(--fs-appbar);
}

body.fx-novo #modal-navbar-widgets .offcanvas-title{
    color: var(--fs-on-appbar);
    font-size: 1.3rem;
    font-weight: 800;
}

body.fx-novo #modal-navbar-widgets .btn-close{
    filter: invert(1) grayscale(1) brightness(2);
    opacity: 0.9;
}

body.fx-novo #modal-navbar-widgets .offcanvas-body{
    padding: 16px 6px;
}

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: 14px;
    background: #fff;
}

body.fx-novo #modal-navbar-widgets .accordion-button{
    padding: 14px 16px;
    background: #fff;
    box-shadow: none;
    color: var(--fs-text);
    font-size: 1rem;
    font-weight: 700;
}

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

/* o ponto diz se o widget está ativo (verde) ou não (cinza) */
body.fx-novo #modal-navbar-widgets .accordion-button::before{
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    margin-right: 10px;
    border-radius: 50%;
    background: var(--fs-outline);
}

body.fx-novo #modal-navbar-widgets .accordion-item:has(.btn-unsubscribe-widget) .accordion-button::before{
    background: var(--fs-success);
}

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

body.fx-novo #modal-navbar-widgets .accordion-body table{
    color: var(--fs-muted);
    font-size: 0.9rem;
}

/* os botões de ativar e de desativar com o nome do que fazem */
body.fx-novo #modal-navbar-widgets .btn-subscribe-widget,
body.fx-novo #modal-navbar-widgets .btn-unsubscribe-widget{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    padding: 5px 12px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 800;
    white-space: nowrap;
}

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

body.fx-novo #modal-navbar-widgets .btn-subscribe-widget::after{
    content: "Ativar";
}

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

body.fx-novo #modal-navbar-widgets .btn-unsubscribe-widget::after{
    content: "Desativar";
}

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

/* 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: #fff;
}

body.fx-novo #modal-navbar-selecionar-app .icon-container:hover{
    border-color: var(--fs-primary);
    background: #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: #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);
}

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

/* ---- 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;
    }

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