/* ===========================================================================
   A página inicial do sistema (_views/home.html), no novo padrão visual: a logo da empresa na faixa do topo e o
   quadro com os blocos que cada usuário arruma (os grupos de aplicativos, os Favoritos, os widgets e os mini apps),
   o modo Personalizar e o catálogo dele.

   A moldura (barra, faixa, busca, cabeçalhos, rodapé, janelas) é a do pagina.css, que vale também para a home dos
   apps. O que é de um mini app só fica no css dele (_assets/css/miniapps), que o paginaHome põe junto do script.

   As cores são as de .fx-app (padrao-visual.css): nenhuma cor de tema está escrita aqui. Só as sombras têm cor
   própria, porque o padrão ainda não tem um nome para a cor de sombra.
   =========================================================================== */

/* a logo da empresa, num cartão da cor dos cartões, para qualquer logo ficar legível sobre a faixa */
.pg .hm-provedor{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    height: 80px;
    min-width: 120px;
    padding: 10px 18px;
    border-radius: 18px;
    background: var(--fx-cartao);
    box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}

.pg .hm-provedor img{
    max-width: 190px;
    max-height: 60px;
    object-fit: contain;
}

.pg .hm-provedor img.hm-logo-reserva{
    height: 44px;
}

/* o nome de quem entrou, na cor do título da faixa */
.pg .pg-faixa-texto h1 .lbl-user-name{
    color: inherit;
    font-weight: 900;
}

/* sem aplicativo nenhum a busca não teria o que achar: sai da faixa (home.js) */
.pg .hm-saudacao .pg-busca[hidden]{
    display: none;
}

/* a data com o dia da semana abreviado é a da tela estreita */
.pg .hm-data-curta{
    display: none;
}

/* os widgets da home vão para os blocos deles (home.js). O do widget que o usuário tirou da tela fica no contêiner
   do topo, que aqui não aparece: o fluxus.js tira o d-none dele quando chega um resultado */
body:has(#hm-quadro) #fluxus-widgets-container-top{
    display: none !important;
}

/* ---- a área dos blocos ---- */
.pg .hm-area{
    flex: 1;
    padding-bottom: 56px;
}

.pg .hm-area[hidden]{
    display: none;
}

/* com texto na busca, os menus achados (pg-achados, pagina.js) vêm logo abaixo dos aplicativos: a seção não estica
   até o pé da página, o que deixaria um buraco entre os dois */
.pg.pg-buscando .hm-area{
    flex: none;
    padding-bottom: 12px;
}

.pg .hm-cabecalho{
    flex-wrap: wrap;
}

.pg .hm-cabecalho .fx-etiqueta[hidden],
.pg .hm-tutorial[hidden],
.pg .hm-personalizar[hidden]{
    display: none;
}

/* o Tutorial e o Personalizar, à direita do título */
.pg .hm-acoes{
    display: flex;
    flex: none;
    gap: 4px;
    margin-left: auto;
}

.pg .hm-acoes .pg-link{
    margin-left: 0;
}

.pg .hm-tutorial,
.pg .hm-personalizar{
    flex: none;
    white-space: nowrap;
}

/* com o ponteiro em cima o .pg-link (pagina.css) troca a letra pela cor da barra do topo, que no tema escuro é quase
   a do fundo: aqui a letra fica como está */
.pg .hm-tutorial:hover,
.pg .hm-personalizar:hover{
    color: var(--fx-primary);
}

.pg .hm-personalizar[aria-pressed="true"]{
    background: color-mix(in srgb, var(--fx-primary) 14%, transparent);
}

/* ---- a faixa do modo Personalizar: fica presa embaixo da barra do topo ---- */
.pg .hm-arrumar{
    position: sticky;
    top: calc(var(--fx-tarja-fixa, 0px) + 70px);
    z-index: 30;
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin: 0 0 22px 0;
    padding: 10px 12px 10px 16px;
    border-radius: 16px;
    background: var(--fx-appbar);
    color: var(--fx-on-appbar);
    box-shadow: 0 10px 26px rgba(29,45,60,0.25);
}

.pg.hm-arrumando .hm-arrumar{
    display: flex;
}

.pg .hm-arrumar p{
    flex: 1 1 280px;
    margin: 0;
    font-weight: 700;
    line-height: 1.3;
}

.pg .hm-arrumar p i{
    margin-right: 8px;
}

.pg .hm-arrumar .btn{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.pg .hm-arrumar .btn-outline-light{
    border-color: color-mix(in srgb, var(--fx-on-appbar) 55%, transparent);
    color: var(--fx-on-appbar);
}

.pg .hm-arrumar .btn-outline-light:hover{
    background: color-mix(in srgb, var(--fx-on-appbar) 14%, transparent);
}

.pg .hm-arrumar .btn-light{
    border-color: var(--fx-on-appbar);
    background: var(--fx-on-appbar);
    color: var(--fx-appbar);
}

/* o Restaurar o padrão esperando o segundo clique, o que confirma */
.pg .hm-arrumar [data-restaura].hm-confirma{
    border-color: var(--fx-warning);
    background: var(--fx-warning);
    color: var(--fx-appbar);
}

/* ---- o quadro: doze colunas no computador, uma no celular. A largura do bloco anda de coluna em coluna; a altura é
   livre (home.js) ---- */
.pg .hm-quadro{
    position: relative;
    min-height: 40px;
    transition: height 0.2s ease-out;
}

/* no modo Personalizar as colunas aparecem, para o usuário ver onde o bloco vai encaixar */
.pg.hm-arrumando .hm-quadro:not(.hm-estreito){
    background-image: linear-gradient(to right, color-mix(in srgb, var(--fx-primary) 7%, transparent) var(--hm-col), transparent var(--hm-col));
    background-size: var(--hm-passo-x) 100%;
}

.pg .hm-bloco{
    position: absolute;
    top: 0;
    left: 0;
    min-width: 0;
    transition: left 0.2s ease-out, top 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
}

.pg .hm-bloco[hidden]{
    display: none;
}

.pg .hm-quadro.hm-parado,
.pg .hm-quadro.hm-parado .hm-bloco{
    transition: none;
}

.pg .hm-bloco.hm-pego{
    z-index: 40;
    transition: none;
}

.pg .hm-bloco.hm-pego > :first-child{
    box-shadow: 0 22px 48px rgba(29,45,60,0.28);
    transform: rotate(0.6deg);
}

/* o bloco que muda de tamanho acompanha o ponteiro, sem a transição: a largura pula de coluna em coluna e a altura
   segue o mouse */
.pg .hm-bloco.hm-mudando{
    z-index: 40;
    transition: none;
}

.pg .hm-bloco.hm-mudando > :first-child{
    box-shadow: 0 0 0 2px var(--fx-primary), 0 14px 30px rgba(29,45,60,0.18);
}

/* o bloco que acabou de entrar pelo catálogo pisca, para a pessoa achar onde ele foi parar */
.pg .hm-bloco.hm-novo > :first-child{
    animation: hm-novo 1.4s ease-out;
}

@keyframes hm-novo{
    from{ box-shadow: 0 0 0 5px color-mix(in srgb, var(--fx-primary) 55%, transparent); }
}

/* no Personalizar (hm-tremendo, home.js) os blocos e os cartões dos aplicativos tremem, como os ícones do celular
   quando se arruma a tela: giram um pouco para cada lado. Cada um começa num ponto do giro e uns giram mais depressa
   que outros, para não tremerem todos juntos. O que está pego, ou mudando de tamanho, fica parado; a sombra e a
   régua não tremem. Com a busca nada muda de lugar, e nada treme. O bloco largo gira menos: no mesmo ângulo, a
   ponta dele andaria muito mais que a de um cartão */
@keyframes hm-treme{
    0%, 100%{ transform: rotate(calc(var(--hm-giro, 1deg) * -1)); }
    50%{ transform: rotate(var(--hm-giro, 1deg)); }
}

.pg .hm-quadro.hm-tremendo > .hm-bloco,
.pg .hm-quadro.hm-tremendo .hm-app-caixa{
    animation: hm-treme 0.28s ease-in-out infinite;
}

.pg .hm-quadro.hm-buscando > .hm-bloco,
.pg .hm-quadro.hm-buscando .hm-app-caixa{
    animation: none;
}

.pg .hm-quadro.hm-tremendo > .hm-bloco{
    --hm-giro: 0.6deg;
}

.pg .hm-quadro.hm-tremendo > .hm-bloco[data-tam="g"]{
    --hm-giro: 0.3deg;
}

.pg .hm-quadro.hm-tremendo > .hm-bloco:nth-child(2n),
.pg .hm-quadro.hm-tremendo .hm-app-caixa:nth-child(2n){
    animation-duration: 0.26s;
    animation-delay: -0.09s;
    animation-direction: reverse;
}

.pg .hm-quadro.hm-tremendo > .hm-bloco:nth-child(3n),
.pg .hm-quadro.hm-tremendo .hm-app-caixa:nth-child(3n){
    animation-duration: 0.3s;
    animation-delay: -0.17s;
}

.pg .hm-quadro.hm-tremendo > .hm-bloco:nth-child(5n),
.pg .hm-quadro.hm-tremendo .hm-app-caixa:nth-child(5n){
    animation-delay: -0.05s;
}

.pg .hm-quadro.hm-tremendo > .hm-bloco:nth-child(7n),
.pg .hm-quadro.hm-tremendo .hm-app-caixa:nth-child(7n){
    animation-duration: 0.27s;
    animation-delay: -0.22s;
}

.pg .hm-quadro.hm-tremendo > .hm-bloco.hm-pego,
.pg .hm-quadro.hm-tremendo > .hm-bloco.hm-mudando,
.pg .hm-quadro.hm-tremendo .hm-app-caixa.hm-app-pego{
    animation: none;
}

/* a sombra: onde o bloco arrastado vai ficar quando for solto */
.pg .hm-sombra{
    position: absolute;
    display: none;
    border: 2px dashed color-mix(in srgb, var(--fx-primary) 70%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--fx-primary) 9%, transparent);
    pointer-events: none;
    transition: left 0.15s ease-out, top 0.15s ease-out, width 0.15s ease-out, height 0.15s ease-out;
}

.pg .hm-quadro.hm-arrastando .hm-sombra{
    display: block;
}

.pg .hm-quadro.hm-arrastando{
    -webkit-user-select: none;
    user-select: none;
}

.pg .hm-quadro.hm-arrastando .hm-bloco .hm-app{
    pointer-events: none;
}

html.hm-agarrando,
html.hm-agarrando *{
    cursor: grabbing !important;
}

html.hm-esticando,
html.hm-esticando *{
    cursor: nwse-resize !important;
}

html.hm-alargando,
html.hm-alargando *{
    cursor: ew-resize !important;
}

/* a régua: onde a altura do grupo e a do widget são medidas na largura nova, sem aparecer (home.js) */
.pg .hm-quadro .hm-regua{
    position: absolute;
    top: 0;
    left: 0;
    height: auto;
    visibility: hidden;
    pointer-events: none;
    transition: none;
}

/* ---- o cartão de cada bloco. O widget usa o cartão dele (.wg, do widgets.css) ---- */
.pg .hm-cartao{
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 12px 16px 16px 16px;
    border: 1px solid var(--fx-outline);
    border-radius: 18px;
    background: var(--fx-cartao);
    color: var(--fx-text);
    box-shadow: 0 2px 8px rgba(29,45,60,0.05);
}

/* o cartão do aplicativo sobe com o ponteiro: o grupo não corta a sombra dele */
.pg .hm-grupo{
    overflow: visible;
}

/* o título é a pega: arrasta-se o bloco por ele */
.pg .hm-topo{
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    margin-bottom: 10px;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}

.pg .hm-bloco-widget .wg-topo{
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}

/* no Personalizar o dedo na pega arrasta o bloco, e não a página */
.pg.hm-arrumando [data-pega],
.pg.hm-arrumando .hm-bloco-widget .wg-topo{
    touch-action: none;
}

.pg .hm-quadro.hm-estreito:not(.hm-pode) [data-pega],
.pg .hm-quadro.hm-estreito:not(.hm-pode) .hm-bloco-widget .wg-topo,
.pg .hm-quadro.hm-buscando [data-pega]{
    cursor: default;
}

.pg .hm-titulo{
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--fx-text);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pg .hm-topo .fx-etiqueta{
    --fx-cor: var(--fx-primary);
    flex: none;
    padding: 1px 9px;
    font-size: 0.76rem;
}

.pg .hm-estrela-titulo{
    color: var(--fx-warning);
    font-size: 1.05rem;
}

.pg .hm-recolhe,
.pg .hm-abre{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--fx-muted);
    font-size: 0.95rem;
}

.pg .hm-recolhe:hover,
.pg .hm-abre:hover{
    background: color-mix(in srgb, var(--fx-primary) 10%, transparent);
    color: var(--fx-primary);
}

.pg .hm-recolhe:focus-visible,
.pg .hm-abre:focus-visible{
    outline: 3px solid color-mix(in srgb, var(--fx-primary) 45%, transparent);
}

.pg .hm-recolhe i{
    transition: transform 0.15s;
}

.pg .hm-recolhido .hm-recolhe i{
    transform: rotate(180deg);
}

.pg .hm-recolhido .hm-corpo{
    display: none;
}

.pg .hm-recolhido .hm-topo{
    margin-bottom: 0;
}

.pg .hm-recolhido .hm-cartao{
    padding-bottom: 12px;
}

/* na busca o grupo recolhido mostra o que achou */
.pg .hm-quadro.hm-buscando .hm-recolhido .hm-corpo{
    display: block;
}

.pg .hm-quadro.hm-buscando .hm-recolhido .hm-topo{
    margin-bottom: 10px;
}

.pg .hm-quadro.hm-buscando .hm-recolhe{
    visibility: hidden;
}

.pg .hm-corpo{
    flex: 1 1 auto;
    min-height: 0;
}

/* ---- a alça (no meio da borda de cima), o canto de mudar o tamanho e o X de tirar da tela ---- */
.pg .hm-alca{
    position: absolute;
    top: -10px;
    left: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 20px;
    margin-left: -23px;
    padding: 0;
    border: 1px solid var(--fx-outline);
    border-radius: 10px;
    background: var(--fx-cartao);
    color: var(--fx-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: grab;
    opacity: 0;
    transition: opacity 0.12s;
    box-shadow: 0 2px 6px rgba(29,45,60,0.12);
}

.pg .hm-alca:focus-visible{
    opacity: 1;
    outline: 3px solid color-mix(in srgb, var(--fx-primary) 45%, transparent);
}

.pg .hm-canto{
    position: absolute;
    right: 2px;
    bottom: 2px;
    z-index: 3;
    width: 26px;
    height: 26px;
    cursor: nwse-resize;
    opacity: 0;
    transition: opacity 0.12s;
    touch-action: none;
}

.pg .hm-canto::before{
    content: "";
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 11px;
    height: 11px;
    border-right: 3px solid var(--fx-muted);
    border-bottom: 3px solid var(--fx-muted);
    border-bottom-right-radius: 5px;
}

.pg .hm-canto:hover::before{
    border-color: var(--fx-primary);
}

/* do grupo só a largura muda: a altura é a dos aplicativos */
.pg .hm-bloco-grupo .hm-canto{
    cursor: ew-resize;
}

.pg .hm-tira{
    position: absolute;
    top: -11px;
    right: -11px;
    z-index: 4;
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px solid var(--fx-cartao);
    border-radius: 50%;
    background: var(--fx-error);
    color: var(--fx-on-primary);
    font-size: 0.75rem;
    box-shadow: 0 2px 6px rgba(29,45,60,0.25);
}

.pg .hm-tira:focus-visible{
    outline: 3px solid color-mix(in srgb, var(--fx-error) 45%, transparent);
}

.pg.hm-arrumando .hm-tira{
    display: flex;
}

@media (hover: hover){
    .pg .hm-bloco:hover .hm-alca,
    .pg .hm-bloco:hover .hm-canto{
        opacity: 1;
    }
}

.pg.hm-arrumando .hm-alca,
.pg.hm-arrumando .hm-canto{
    opacity: 1;
}

.pg .hm-quadro.hm-estreito .hm-bloco-grupo .hm-canto,
.pg .hm-quadro.hm-estreito:not(.hm-pode) .hm-alca,
.pg .hm-quadro.hm-estreito:not(.hm-pode) .hm-canto,
.pg .hm-quadro.hm-buscando .hm-alca,
.pg .hm-quadro.hm-buscando .hm-canto,
.pg .hm-quadro.hm-buscando .hm-tira,
.pg .hm-quadro.hm-arrastando .hm-alca,
.pg .hm-quadro.hm-arrastando .hm-tira{
    display: none;
}

/* ---- o que muda com o tamanho do bloco: p (pequeno), m (médio) e g (grande), em data-tam (home.js) ---- */
.pg .hm-bloco:not([data-tam="p"]) .hm-so-p,
.pg .hm-bloco[data-tam="p"] .hm-nao-p,
.pg .hm-bloco:not([data-tam="g"]) .hm-so-g{
    display: none !important;
}

/* ---- o bloco do widget: o cartão de espera enquanto o widget carrega, e depois o cartão dele ---- */
.pg .hm-widget{
    height: 100%;
}

.pg .hm-widget > [id^="container_Widget_"]{
    height: 100%;
}

/* o widget de aparência antiga (sem o cartão .wg) fica na caixa dele, com rolagem se não couber */
.pg .hm-widget > [id^="container_Widget_"]:not(:has(> .wg)){
    overflow: auto;
    border-radius: 18px;
}

.pg .hm-bloco .wg .wg-corpo{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.pg .hm-widget-pronto > .hm-espera-cartao{
    display: none;
}

.pg .hm-widget:not(.hm-widget-pronto) > [id^="container_Widget_"]{
    display: none;
}

/* o lugar guardado de um widget que ainda está carregando */
.pg .hm-espera-cartao{
    position: relative;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--fx-outline);
    border-radius: 18px;
    background:
        linear-gradient(var(--fx-surface-alto), var(--fx-surface-alto)) 18px 16px / 42px 42px no-repeat,
        linear-gradient(var(--fx-surface-alto), var(--fx-surface-alto)) 72px 22px / 190px 14px no-repeat,
        linear-gradient(var(--fx-surface-alto), var(--fx-surface-alto)) 72px 44px / min(280px, 100% - 90px) 10px no-repeat,
        linear-gradient(var(--fx-surface), var(--fx-surface)) 18px 72px / calc(100% - 36px) calc(100% - 90px) no-repeat,
        var(--fx-cartao);
}

.pg .hm-espera-cartao::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--fx-cartao) 80%, transparent) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: hm-espera 1.3s ease-in-out infinite;
}

@keyframes hm-espera{
    to{ transform: translateX(100%); }
}

/* ---- grupo de aplicativos: a grade dos cartões ---- */
.pg .hm-grupo-apps{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 10px;
    padding-top: 2px;
}

.pg .hm-favoritos-vazio{
    margin: 2px 0 0 0;
    color: var(--fx-muted);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
}

/* cada aplicativo ocupa o lugar dele na grade com uma caixa, que traz o cartão (o botão que abre o aplicativo) e,
   por cima do canto dele, a estrela do favorito: são dois botões lado a lado, e não um dentro do outro */
.pg .hm-app-caixa{
    position: relative;
    display: flex;
    min-width: 0;
}

.pg .hm-app-caixa[hidden]{
    display: none;
}

/* user-select e touch-callout: o dedo parado no cartão é para pegá-lo e mudá-lo de lugar (home.js), e não para
   selecionar o nome nem abrir o menu do navegador */
.pg .hm-app{
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 14px 6px 10px 6px;
    border: 1px solid var(--fx-outline);
    border-radius: 14px;
    background: var(--fx-cartao);
    color: var(--fx-text);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, border-color 0.12s ease-out;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* o ponteiro na caixa, e não só no cartão: com ele na estrela o cartão continua realçado */
.pg .hm-app-caixa:hover .hm-app{
    border-color: var(--fx-primary);
    box-shadow: 0 8px 20px rgba(29,45,60,0.14);
    transform: translateY(-2px);
}

.pg .hm-app:focus-visible{
    outline: 3px solid color-mix(in srgb, var(--fx-primary) 45%, transparent);
    outline-offset: 2px;
}

.pg .hm-app-icone{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--fx-surface-alto);
    color: var(--fx-primary);
}

/* pointer-events: quem recebe o clique, o toque e o arraste é o cartão, e não a imagem */
.pg .hm-app-icone img{
    width: 34px;
    height: 34px;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
}

.pg .hm-app-icone i{
    font-size: 1.4rem;
}

.pg .hm-app-nome{
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-weight: 700;
}

/* app que abre nas telas clássicas */
.pg .hm-app-classico{
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 0.9rem;
    color: var(--fx-muted);
    opacity: 0.75;
}

/* ---- a estrela do favorito, no canto do cartão ---- */
.pg .hm-app-estrela{
    position: absolute;
    top: 1px;
    left: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--fx-muted);
    font-size: 0.9rem;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.12s ease-out, transform 0.12s ease-out, color 0.12s ease-out, background-color 0.12s ease-out;
}

/* aparece com o ponteiro no cartão, e sobe junto com ele; com o cursor nela também */
.pg .hm-app-caixa:hover .hm-app-estrela{
    opacity: 0.8;
    transform: translateY(-2px);
}

.pg .hm-app-estrela:focus-visible{
    opacity: 1;
    outline: 3px solid color-mix(in srgb, var(--fx-primary) 45%, transparent);
}

/* a de quem é favorito fica sempre à vista */
.pg .hm-app-favorito .hm-app-estrela{
    color: var(--fx-warning);
    opacity: 1;
}

.pg .hm-app-caixa .hm-app-estrela:hover{
    background: color-mix(in srgb, var(--fx-text) 9%, transparent);
    color: var(--fx-warning);
    opacity: 1;
}

/* na tela de toque não há ponteiro para passar por cima do cartão: a estrela fica sempre à vista, apagada */
@media (hover: none){
    .pg .hm-app-estrela{
        opacity: 0.5;
    }
}

/* grupo estreito: os aplicativos em lista, um embaixo do outro */
.pg .hm-bloco-grupo[data-tam="p"] .hm-grupo-apps{
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}

.pg .hm-bloco-grupo[data-tam="p"] .hm-app{
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 7px 34px 7px 8px;
    border-radius: 12px;
    text-align: left;
}

.pg .hm-bloco-grupo[data-tam="p"] .hm-app-icone{
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.pg .hm-bloco-grupo[data-tam="p"] .hm-app-icone img{
    width: 24px;
    height: 24px;
}

.pg .hm-bloco-grupo[data-tam="p"] .hm-app-icone i{
    font-size: 1.1rem;
}

.pg .hm-bloco-grupo[data-tam="p"] .hm-app-estrela{
    top: 50%;
    right: 3px;
    left: auto;
    margin-top: -15px;
}

.pg .hm-bloco-grupo[data-tam="p"] .hm-app-caixa:hover .hm-app-estrela{
    transform: none;
}

.pg .hm-bloco-grupo[data-tam="p"] .hm-app-classico{
    top: 50%;
    right: 34px;
    margin-top: -0.5em;
}

/* no celular, os aplicativos em três colunas, como numa tela de celular */
.pg .hm-quadro.hm-estreito .hm-bloco-grupo .hm-grupo-apps{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.pg .hm-quadro.hm-estreito .hm-bloco-grupo .hm-app{
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    padding: 14px 4px 10px 4px;
    border-radius: 14px;
    font-size: 0.82rem;
    text-align: center;
}

.pg .hm-quadro.hm-estreito .hm-bloco-grupo .hm-app-icone{
    width: 50px;
    height: 50px;
    border-radius: 14px;
}

.pg .hm-quadro.hm-estreito .hm-bloco-grupo .hm-app-icone img{
    width: 34px;
    height: 34px;
}

.pg .hm-quadro.hm-estreito .hm-bloco-grupo .hm-app-estrela{
    top: 0;
    right: auto;
    left: 0;
    margin-top: 0;
}

.pg .hm-quadro.hm-estreito .hm-bloco-grupo .hm-app-classico{
    top: 5px;
    right: 6px;
    margin-top: 0;
    font-size: 0.85rem;
}

/* ---- arrastar um cartão para mudar de lugar no grupo (home.js) ---- */

/* o cartão pego fica no lugar, apagado e tracejado, marcando onde vai ficar */
.pg .hm-app-caixa.hm-app-pego .hm-app{
    border-style: dashed;
    border-color: var(--fx-primary);
    background: color-mix(in srgb, var(--fx-primary) 7%, var(--fx-cartao));
    box-shadow: none;
    transform: none;
}

.pg .hm-app-pego .hm-app > *{
    opacity: 0.3;
}

.pg .hm-app-pego .hm-app-estrela{
    visibility: hidden;
}

/* enquanto um cartão está pego o ponteiro é a mão fechada, e os outros cartões não se realçam com ele nem mostram
   a estrela */
.pg .hm-grupo-apps.hm-arrastando,
.pg .hm-grupo-apps.hm-arrastando .hm-app,
.pg .hm-grupo-apps.hm-arrastando .hm-app-estrela{
    cursor: grabbing;
}

.pg .hm-grupo-apps.hm-arrastando .hm-app-caixa:not(.hm-app-pego):hover .hm-app{
    border-color: var(--fx-outline);
    box-shadow: none;
    transform: none;
}

.pg .hm-grupo-apps.hm-arrastando .hm-app-caixa:not(.hm-app-favorito) .hm-app-estrela{
    opacity: 0;
}

/* a cópia do cartão que acompanha o ponteiro (o fantasma): levantada, para se ver que o cartão foi pego. Fica
   acima da barra do topo e abaixo das janelas */
.pg .hm-app.hm-app-fantasma{
    position: fixed;
    z-index: 1040;
    flex: none;
    margin: 0;
    border-color: var(--fx-primary);
    box-shadow: 0 18px 40px rgba(29,45,60,0.3);
    transform: scale(1.06) rotate(-2deg);
    transition: none;
    animation: hm-pega 0.14s ease-out;
    pointer-events: none;
}

@keyframes hm-pega{
    from{ transform: none; box-shadow: none; }
}

/* ---- o servidor que não tem a arrumação dos aplicativos (home.js: semServico): sem estrela e sem arraste ---- */
.pg .hm-sem-arrumacao .hm-app-estrela{
    display: none;
}

/* ---- mini app: o topo com o ícone do app, o título, a linha de baixo e o botão de abrir o app ---- */
.pg .hm-mini-icone{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--fx-surface-alto);
    color: var(--fx-primary);
    font-size: 1.15rem;
}

.pg .hm-mini-icone img{
    width: 26px;
    height: 26px;
    pointer-events: none;
}

.pg .hm-topo-texto{
    flex: 1 1 auto;
    min-width: 0;
}

.pg .hm-sub{
    margin: 1px 0 0 0;
    overflow: hidden;
    color: var(--fx-muted);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pg .hm-sub:empty{
    display: none;
}

.pg .hm-mini .hm-corpo{
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* os pedaços que os mini apps usam: o rótulo de uma parte, o botão de ação e a coluna do lado */
.pg .hm-mini h4{
    margin: 0 0 6px 0;
    color: var(--fx-muted);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pg .hm-acao{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--fx-outline);
    border-radius: 10px;
    background: var(--fx-cartao);
    color: var(--fx-primary);
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
}

.pg .hm-acao:hover{
    border-color: var(--fx-primary);
    background: color-mix(in srgb, var(--fx-primary) 8%, transparent);
    color: var(--fx-primary);
}

.pg .hm-lado{
    display: flex;
    flex: 0 0 214px;
    flex-direction: column;
    min-height: 0;
    padding-left: 16px;
    border-left: 1px solid var(--fx-outline);
}

/* o que o mini app diz quando não tem o que mostrar, ou quando a consulta falhou */
.pg .hm-mini-vazio,
.pg .hm-mini-falha{
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 8px;
    color: var(--fx-muted);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
}

.pg .hm-mini-falha{
    color: var(--fx-error);
}

/* enquanto o mini app consulta: três linhas apagadas */
.pg .hm-mini-espera{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
}

.pg .hm-mini-espera span{
    height: 14px;
    border-radius: 7px;
    background: var(--fx-surface-alto);
}

.pg .hm-mini-espera span:nth-child(2){
    width: 80%;
}

.pg .hm-mini-espera span:nth-child(3){
    width: 60%;
}

/* ---- Personalizar: o catálogo do que se põe na tela. No computador largo a página encolhe para ele caber ao lado ---- */
.hm-catalogo{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    width: 380px;
    max-width: 100vw;
    border-left: 1px solid var(--fx-outline);
    background: var(--fx-background);
    color: var(--fx-text);
    box-shadow: -14px 0 36px rgba(29,45,60,0.16);
    transform: translateX(105%);
    visibility: hidden;
    transition: transform 0.22s ease-out, visibility 0.22s;
}

body.hm-com-catalogo .hm-catalogo{
    transform: none;
    visibility: visible;
}

.hm-catalogo-topo{
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 0 10px 0 18px;
    background: var(--fx-appbar);
    color: var(--fx-on-appbar);
}

.hm-catalogo-topo h2{
    flex: 1;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
}

.hm-catalogo-topo button{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: inherit;
    font-size: 1.1rem;
}

.hm-catalogo-topo button:hover{
    background: color-mix(in srgb, var(--fx-on-appbar) 14%, transparent);
}

.hm-catalogo-dica{
    margin: 0;
    padding: 14px 18px 4px 18px;
    color: var(--fx-muted);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.4;
}

.hm-abas{
    display: flex;
    gap: 4px;
    margin: 10px 18px;
    padding: 4px;
    border-radius: 12px;
    background: var(--fx-surface-alto);
}

.hm-abas button{
    flex: 1;
    padding: 7px 6px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--fx-muted);
    font-size: 0.86rem;
    font-weight: 800;
}

.hm-abas button[aria-selected="true"]{
    background: var(--fx-cartao);
    color: var(--fx-primary);
    box-shadow: 0 1px 4px rgba(29,45,60,0.12);
}

.hm-abas button:focus-visible{
    outline: 3px solid color-mix(in srgb, var(--fx-primary) 45%, transparent);
}

.hm-catalogo-lista{
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 4px 18px 18px 18px;
    overflow-y: auto;
}

.hm-catalogo-lista > p{
    margin: 0 0 4px 0;
    color: var(--fx-muted);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.4;
}

.hm-catalogo-lista > .hm-gerencia-widgets{
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    margin-bottom: 4px;
}

.hm-item{
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--fx-outline);
    border-radius: 14px;
    background: var(--fx-cartao);
}

.hm-item-icone{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--fx-surface-alto);
    color: var(--fx-primary);
    font-size: 1.2rem;
}

.hm-item-icone img{
    width: 26px;
    height: 26px;
}

.hm-item strong{
    display: block;
    overflow: hidden;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
}

.hm-item small{
    display: block;
    color: var(--fx-muted);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
}

.hm-item .btn{
    padding: 5px 10px;
    font-size: 0.82rem;
    white-space: nowrap;
}

.hm-item-na-tela{
    background: color-mix(in srgb, var(--fx-primary) 5%, var(--fx-cartao));
}

.hm-catalogo-pe{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--fx-outline);
    background: var(--fx-cartao);
}

.hm-catalogo-pe .btn-primary{
    margin-left: auto;
}

.hm-catalogo-pe .btn-link{
    padding-left: 0;
    color: var(--fx-muted);
    font-weight: 700;
    text-decoration: none;
}

.hm-catalogo-pe .btn-link.hm-confirma{
    color: var(--fx-error);
}

.hm-fundo{
    position: fixed;
    inset: 0;
    z-index: 1044;
    background: rgba(15,23,32,0.35);
}

.hm-fundo[hidden]{
    display: none;
}

@media (min-width: 1100px){
    body .pg{
        transition: margin-right 0.22s ease-out;
    }

    body.hm-com-catalogo .pg{
        margin-right: 380px;
    }

    .hm-fundo{
        display: none;
    }
}

/* ---- o aviso que aparece no canto da tela e some sozinho: o de erro (a arrumação que não pôde ser lida ou
        gravada) e o recado (hm-aviso-info) ---- */
.hm-aviso{
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1090;
    max-width: min(420px, calc(100vw - 36px));
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--fx-error);
    color: var(--fx-background);
    font-size: 0.95rem;
    font-weight: 700;
    box-shadow: 0 12px 32px rgba(29,45,60,0.3);
}

.hm-aviso.hm-aviso-info{
    background: var(--fx-appbar);
    color: var(--fx-on-appbar);
}

/* com o catálogo ao lado, o aviso fica na página, e não por cima dele */
@media (min-width: 1100px){
    body.hm-com-catalogo .hm-aviso{
        right: 398px;
    }
}

@media (prefers-reduced-motion: reduce){
    .pg .hm-app,
    .pg .hm-app-estrela,
    .pg .hm-bloco,
    .pg .hm-sombra,
    .pg .hm-quadro,
    .hm-catalogo,
    body .pg{
        transition: none !important;
    }

    .pg .hm-app.hm-app-fantasma,
    .pg .hm-espera-cartao::after,
    .pg .hm-bloco.hm-novo > :first-child,
    .pg .hm-quadro.hm-tremendo > .hm-bloco,
    .pg .hm-quadro.hm-tremendo .hm-app-caixa{
        animation: none !important;
    }
}

/* ---- telas estreitas ---- */
@media (max-width: 767.98px){
    .pg .hm-provedor{
        height: 64px;
        min-width: 96px;
        padding: 8px 14px;
        border-radius: 16px;
    }

    .pg .hm-provedor img{
        max-width: 130px;
        max-height: 48px;
    }

    .pg .hm-provedor img.hm-logo-reserva{
        height: 36px;
    }

    /* a filial já está na barra */
    .pg .hm-saudacao .pg-faixa-texto p > span:first-child{
        display: none;
    }

    .pg .hm-data-longa{
        display: none;
    }

    .pg .hm-data-curta{
        display: inline;
    }

    .pg .hm-cartao,
    .pg .hm-espera-cartao{
        border-radius: 16px;
    }

    .pg .hm-arrumar{
        top: calc(var(--fx-tarja-fixa, 0px) + 66px);
    }

    .pg .hm-arrumar p{
        flex-basis: 100%;
        font-size: 0.9rem;
    }

    .pg .hm-arrumar .btn{
        flex: 1;
        justify-content: center;
        padding-left: 8px;
        padding-right: 8px;
        font-size: 0.86rem;
    }

    /* o catálogo sobe de baixo, por cima da página */
    .hm-catalogo{
        top: auto;
        left: 0;
        width: 100%;
        height: 78vh;
        height: 78dvh;
        border-left: 0;
        border-radius: 20px 20px 0 0;
        transform: translateY(105%);
    }

    .hm-catalogo-topo{
        border-radius: 20px 20px 0 0;
    }

    .hm-aviso{
        right: 12px;
        bottom: 12px;
        max-width: calc(100vw - 24px);
    }
}