/* =====================================================================================
   EFICÁCIA CRM — mod-barrainferior.css · aparência da barra de baixo

   Par de `mod-barrainferior.js`. Quem decide SE a barra aparece é este ficheiro, não o
   JavaScript: uma `media query` responde a rodar o telemóvel sem uma linha de código,
   e evita ter a mesma decisão escrita em dois sítios que podem discordar.

   AS TRÊS MEDIDAS QUE IMPORTAM, e porquê:

     64px + área segura   altura. É a do Shoperfil, e dá 44px de alvo de toque com
                          folga para o rótulo por baixo do ícone.
     z-index 90           ACIMA do conteúdo, ABAIXO de tudo o que se sobrepõe:
                          ficha em modal (900), modais (950), painéis do MOD.campos
                          (1100). Uma barra que tapasse um modal seria pior do que
                          não existir.
     1024px               o mesmo limiar do `MOD.campos` e do resto da aplicação —
                          é onde o menu lateral deixa de estar à vista.

   E a consequência que se esquece: quem ganha uma barra fixa em baixo tem de dar
   ESPAÇO a essa barra. Sem o `padding-bottom` no conteúdo, o último cartão de cada
   página fica por baixo dela e não há scroll que o traga — foi exatamente isso que se
   viu nas capturas do telemóvel.
   ===================================================================================== */

.barra-inf {
    display: none;                 /* no computador não existe */
}

.barra-inf[hidden] {
    display: none;
}

@media (max-width: 1024px) {

    .barra-inf:not([hidden]) {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        align-items: stretch;
        height: calc(64px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
        background: var(--surface, #fff);
        border-top: 1px solid var(--border, #e5e7eb);
        box-shadow: 0 -2px 12px rgba(15, 23, 42, .06);
    }

    .barra-inf-item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 0;
        min-height: var(--ds-touch, 44px);
        padding: 6px 2px;
        color: var(--ink-500, #6b7280);
        font-family: inherit;
        /* 12px e não 10: é o piso da auditoria responsiva (`fonte-pequena`, abaixo
           de 768px). O Shoperfil usa 10, mas a barra aparece em TODAS as páginas —
           10px acrescentava ~400 avisos de uma só vez, e num rótulo que se lê de
           relance ao sol os 2px fazem diferença. Cabe: cinco itens a 320px dão 64px
           cada, e «Contratos» a 12px semibold ocupa ~55px. */
        font-size: 12px;
        font-weight: var(--fw-semibold, 600);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: color .15s;
    }

    .barra-inf-item svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    .barra-inf-item:active {
        background: var(--brand-50, #fef2f2);
    }

    /* O destino em que se está: cor da marca e um traço em cima, para se distinguir
       sem depender só da cor (e para se ver num ecrã ao sol). */
    .barra-inf-item.is-activa {
        color: var(--brand-600, #DA0A0D);
        box-shadow: inset 0 2px 0 var(--brand-600, #DA0A0D);
    }

    .barra-inf-rotulo {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 1.1;
    }

    /* ---- dar espaço à barra ----------------------------------------------------
       Sem isto o fim de cada página fica por baixo da barra. O `page-content` é quem
       rola, por isso é nele que a folga tem de estar. */
    .page-content {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + var(--sp-4, 16px)) !important;
    }

    /* Botões de ação flutuantes sobem o mesmo tanto, senão ficam em cima da barra. */
    .ds-fab,
    .mf-fab,
    [class*="-fab"] {
        bottom: calc(64px + env(safe-area-inset-bottom, 0px) + var(--sp-3, 12px)) !important;
    }

    /* O ícone de menu do canto superior esquerdo desaparece quando a barra de baixo
       já tem o «Menu» — duas portas para a mesma gaveta, e uma delas no pior sítio
       possível para um polegar. A classe é posta pelo `mod-barrainferior.js` e sai
       sozinha se o utilizador tirar o «Menu» dos seus atalhos. */
    body.tem-menu-em-baixo #mobileSidebarToggle {
        display: none;
    }
}

/* Numa vista de mapa a página não rola — o mapa ocupa a altura toda e a folga acima
   só encolheria o mapa sem ninguém ganhar nada. */
@media (max-width: 1024px) {

    .page-content:has(.leaflet-container) {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Muito estreito: encolhe o ÍCONE, nunca o texto — o rótulo é que diz para onde
   se vai, e abaixo de 12px volta a cair no aviso da auditoria. */
@media (max-width: 380px) {

    .barra-inf-item {
        gap: 2px;
        padding: 4px 1px;
    }

    .barra-inf-item svg {
        width: 19px;
        height: 19px;
    }
}

/* Quem pediu menos movimento não leva transições. */
@media (prefers-reduced-motion: reduce) {

    .barra-inf-item {
        transition: none;
    }
}


/* =====================================================================================
   O MAPA TEM DE FICAR DENTRO DA SUA CAIXA

   O Leaflet dá `z-index: 1000` aos contentores dos seus controlos
   (`.leaflet-top` / `.leaflet-bottom`) — mais do que a ficha em modal, que vive em
   900. Como o `.leaflet-container` não formava contexto de empilhamento, esses 1000
   competiam com a PÁGINA INTEIRA: com uma ficha aberta por cima de uma lista com
   mapa, os botões +/− do zoom e o «Leaflet | © OpenStreetMap» apareciam POR CIMA da
   ficha, sobre o título do suporte.

   `isolation: isolate` fecha o mapa num contexto próprio: os z-index de dentro
   continuam a ordenar-se entre si — tiles, marcadores, controlos — e deixam de poder
   subir acima do que está fora. Uma linha, e não é preciso adivinhar números do
   Leaflet nem os manter sincronizados com os nossos.
   ===================================================================================== */

.leaflet-container {
    isolation: isolate;
}


/* =====================================================================================
   A FICHA EM MODAL, EM TELEMÓVEL: CENTRADA, NÃO COLADA AO FUNDO

   Estava desenhada como folha encostada ao fundo (`align-items: flex-end`) com 96% da
   altura. Duas consequências que se viram nas capturas:

     · com a barra de baixo, a folha passa POR TRÁS dela — os botões «Apagar / Editar /
       Fechar» ficam meio tapados;
     · 96% de altura não deixa ver que há uma lista por trás, e o cartão toca as duas
       bordas do ecrã, o que o faz parecer uma página mal cortada em vez de uma ficha.

   Passa a cartão CENTRADO, que é o que o Shoperfil faz (`align-items: center`,
   `max-height: 85vh`) e o que o utilizador pediu. A folga em baixo conta com a barra e
   com a área segura do telemóvel, por isso a ficha nunca lhe toca.

   Só em telemóvel e tablet: no computador a folha de fundo continua a fazer sentido e
   não se mexe nela.
   ===================================================================================== */

@media (max-width: 1024px) {

    /* A CLASSE ESTÁ REPETIDA DE PROPÓSITO — não é gralha.

       O `ds-ficha.css` tem uma regra-ponte SEM camada que existe para as suas regras
       dentro de `@layer ficha` ganharem ao reset global:

           [class*="ds-ficha"]:not(.ds-btn), … { padding: revert-layer; … }

       `.ds-fichamod` contém «ds-ficha», por isso também é apanhado — e essa ponte tem
       especificidade (0,1,1) contra os (0,1,0) de `.ds-fichamod`. Ganha, e o
       `revert-layer` devolve o `padding: 0` do `* { padding: 0 }`. Medido: a regra
       chegava intacta ao browser (`padding-top: 12px` no `cssText`) e o valor
       calculado saía `0px`.

       Repetir a classe leva a especificidade a (0,2,0) e resolve sem `!important`.

       As quatro propriedades vão por extenso e não pelo atalho `padding:`: com
       `padding: var(--sp-3, 12px)` o browser guarda uma substituição pendente e
       serializa os lados como vazios, o que já me tinha custado uma volta. */
    .ds-fichamod.ds-fichamod {
        align-items: center;
        padding-top: 12px;
        padding-right: 12px;
        padding-left: 12px;
        /* a barra de baixo + a área segura + uma respiração */
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 12px);
    }

    .ds-fichamod-painel {
        height: auto;
        max-height: 100%;
        border-radius: var(--r-xl, 20px);
    }

    /* Nasce a subir um pouco em vez de vir do fundo do ecrã — a folha vinha de baixo
       porque encostava lá; um cartão centrado que sobe 40px lê-se melhor. */
    .ds-fichamod-painel {
        animation: dsFmCartao .2s cubic-bezier(.2, .8, .3, 1) both;
    }

    /* A pega de arrastar era a promessa de uma folha: «puxa-me para baixo». Num
       cartão centrado não há para onde puxar, e uma affordance que não cumpre é
       pior do que não existir. (Especificidade dobrada pela mesma razão de cima.) */
    .ds-fichamod-painel.ds-fichamod-painel::before {
        display: none;
    }

    /* A ÁREA SEGURA NÃO SE CONTA DUAS VEZES.

       O `ds-ficha.css` põe `padding-bottom: calc(--sp-3 + env(safe-area-inset-bottom))`
       na barra de ações. Está certo enquanto a ficha é uma PÁGINA, onde a barra
       encosta mesmo ao fundo do ecrã e tem de fugir ao indicador do telemóvel.

       Em MODAL deixou de estar: desde que o cartão passou a ser centrado, o overlay
       já reserva `64px (barra de baixo) + área segura + 12px` no seu próprio
       `padding-bottom`. A barra do cartão somava a área segura outra vez, dentro de
       um cartão que já está levantado do fundo — e num telemóvel com indicador (~34px)
       isso engorda a faixa branca por baixo dos botões para mais do dobro.

       Duas consequências, e o utilizador viu as duas: a «banda» branca gorda, e o
       cartão a ficar tão alto que enche o espaço todo — e um cartão que enche o
       espaço não tem como ficar centrado, por mais `align-items: center` que leve.

       Fica simétrico: 12px em cima, 12px em baixo, à volta de um botão de 44px. */
    .ds-fichamod .ds-ficha-rodape {
        padding-bottom: var(--sp-3);
    }

    @keyframes dsFmCartao {
        from {
            opacity: 0;
            transform: translateY(14px) scale(.99);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }
}


/* =====================================================================================
   A BARRA DE TOPO DA FICHA RECOLHE EM REPOUSO (só em modal)

   Sem o «×», e sem nenhuma ficha a declarar ações no topo, aquela barra estava vazia
   em repouso — 56px de altura para nada, em todos os tamanhos. Passa a ter altura
   zero até CONDENSAR; aí volta aos 44px e mostra o código do registo, que é o
   trabalho real dela.

   Só dentro de `.ds-fichamod`: em página o botão «voltar à lista» continua lá e a
   barra tem conteúdo.

   Classe repetida pela mesma razão da ficha centrada — a ponte sem camada do
   `ds-ficha.css` (`[class*="ds-ficha"] { padding: revert-layer }`) tem (0,1,1) e
   ganharia a um seletor de duas classes simples.
   ===================================================================================== */

.ds-fichamod .ds-ficha-topbar[data-condensada="0"] {
    /* `min-height: 0` não chega: o código do registo continua lá dentro (invisível,
       a `width: 0`) e a sua caixa de linha dava 26px de altura. `height: 0` com
       `overflow: hidden` fecha-a mesmo. */
    min-height: 0;
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-color: transparent;
    overflow: hidden;
}

/* Ao condensar recupera a altura e o código aparece — as regras do `ds-ficha.css`
   para `[data-condensada="1"]` continuam a mandar. */
.ds-fichamod .ds-ficha-topbar[data-condensada="1"] {
    min-height: 44px;
    height: auto;
}


/* =====================================================================================
   O EDITOR DA BARRA (O Meu Perfil ▸ Barra de Baixo)

   A pré-visualização é a barra A SÉRIO: as mesmas classes `.barra-inf` e
   `.barra-inf-item`, para um rótulo que não caiba se ver aqui e não no telefone de
   quem trabalha. Isso obriga a desfazer, só dentro da moldura, as duas coisas que a
   barra verdadeira faz: esconder-se acima de 1024px e colar-se ao fundo do ecrã.

   Especificidade e não `!important`: `.bn-moldura .barra-inf.bn-previa` são três
   classes (0,3,0) contra os (0,2,0) de `.barra-inf:not([hidden])`. Ganha por peso
   próprio, e quem vier a seguir ainda consegue mexer sem entrar numa guerra.
   ===================================================================================== */

.bn-moldura {
    max-width: 400px;
    margin: 8px 0 4px;
    padding: 10px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--r-lg, 14px);
    background: var(--surface-2, #f8fafc);
}

.bn-moldura .barra-inf.bn-previa {
    display: flex;
    position: static;
    height: auto;
    padding: 0;
    border-top: 0;
    border-radius: var(--r-md, 10px);
    background: var(--surface, #fff);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
    overflow: hidden;
}

.bn-moldura .barra-inf.bn-previa .barra-inf-item {
    pointer-events: none;
    padding: 8px 2px;
}

/* ---- lista dos escolhidos, por ordem ---------------------------------------------
   Flex, não grelha. Tentou-se com `grid-template-areas` e os três botões — que não
   tinham área nomeada — foram parar a linhas implícitas POR BAIXO da linha, em vez
   de à direita dela: só o ✕ é que se via. Com flex, o bloco de texto é o único que
   estica (`flex: 1` + `min-width: 0`, senão um nome comprido empurra os botões para
   fora) e os botões ficam encostados à direita sem precisarem de ser declarados. */
.bn-lista {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bn-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--r-md, 10px);
    background: var(--surface, #fff);
}

.bn-item>i,
.bn-item>svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--ink-500, #6b7280);
}

.bn-item-txt {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.bn-item-nome {
    font-weight: var(--fw-semibold, 600);
    font-size: 14px;
}

.bn-item-sub {
    font-size: 12px;
    color: var(--ink-500, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bn-item .ds-btn--icon {
    flex: 0 0 auto;
}

.bn-item .bn-tirar {
    color: var(--danger-600, #dc2626);
}

.bn-item .bn-tirar {
    color: var(--danger-600, #dc2626);
}

.bn-vazio {
    padding: 14px;
    border: 1px dashed var(--border, #e5e7eb);
    border-radius: var(--r-md, 10px);
    color: var(--ink-500, #6b7280);
    font-size: 13px;
    text-align: center;
}

.bn-conta {
    margin-left: 6px;
    font-weight: var(--fw-regular, 400);
    color: var(--ink-500, #6b7280);
}

/* ---- etiquetas do que há para escolher ------------------------------------------- */
.bn-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.bn-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* 44px é o alvo de toque mínimo do resto da aplicação — estas etiquetas são
       tocadas com o polegar, e no ecrã onde isso mais importa. */
    min-height: var(--ds-touch, 44px);
    padding: 8px 14px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 999px;
    background: var(--surface, #fff);
    color: var(--ink-700, #374151);
    font-family: inherit;
    font-size: 13px;
    font-weight: var(--fw-medium, 500);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.bn-chip i,
.bn-chip svg {
    width: 16px;
    height: 16px;
}

.bn-chip:hover:not(:disabled) {
    border-color: var(--brand-300, #fca5a5);
}

.bn-chip.is-dentro {
    border-color: var(--brand-600, #DA0A0D);
    background: var(--brand-50, #fef2f2);
    color: var(--brand-700, #b91c1c);
}

.bn-chip:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Num telemóvel a moldura ocupa a largura toda — é a mesma largura que a barra vai
   ter, e ver a prévia mais estreita do que o real seria enganador. */
@media (max-width: 520px) {

    .bn-moldura {
        max-width: none;
    }

    .bn-item-sub {
        display: none;   /* o nome curto chega; o completo só cabe com folga */
    }
}

/* O CSS do ecrã de Gestão de Permissões (as classes `.pm-*`) vivia aqui em baixo, e não
   era a casa dele: esta folha é a da barra de atalhos do rodapé. Foi para
   `mod-gestao-permissoes.css`, que é o par do `mod-gestao-permissoes.js`. */