/* ==========================================================================
   Vuexy Custom Overrides — Sector Interactivo
   Carregado SEMPRE depois do Vuexy core.css para vencer conflitos.
   Isolado: só afecta páginas que usam os layouts vuexy.php / vuexy_login.php.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. COR PRIMÁRIA / ACCENT — azul #2092EC (default do layout)
   Baseline ao nível das CSS variables (BS5/Vuexy). Em runtime o
   window.Helpers.setColor (via customizer, defaultPrimaryColor) reaplica a
   mesma cor e gera os tons derivados; isto garante o 1.º paint e páginas sem
   customizer. Compatível com light/dark/semi-dark (vars iguais nos dois temas).
   -------------------------------------------------------------------------- */
:root,
:root[data-bs-theme="light"],
:root[data-bs-theme="dark"] {
    --bs-primary: #2092EC;
    --bs-primary-rgb: 32, 146, 236;
}

/* Reforço para componentes que não derivam só de --bs-primary
   (foco/links/progress). Mantém tudo no mesmo azul. */
:root {
    --bs-link-color: #2092EC;
    --bs-link-color-rgb: 32, 146, 236;
    --bs-link-hover-color: #1877c2;
}
.btn-primary {
    --bs-btn-bg: #2092EC;
    --bs-btn-border-color: #2092EC;
    --bs-btn-hover-bg: #1c83d4;
    --bs-btn-hover-border-color: #1a7bc7;
    --bs-btn-active-bg: #1a7bc7;
    --bs-btn-active-border-color: #1873bb;
    --bs-btn-disabled-bg: #2092EC;
    --bs-btn-disabled-border-color: #2092EC;
}
.progress {
    --bs-progress-bar-bg: #2092EC;
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #2092EC;
    box-shadow: 0 0 0 0.15rem rgba(32, 146, 236, 0.25);
}
.form-check-input:checked {
    background-color: #2092EC;
    border-color: #2092EC;
}

/* --------------------------------------------------------------------------
   1. LOGIN (vuexy_login.php)
   -------------------------------------------------------------------------- */

/* Garantir que o body do login fica limpo mesmo com o ace/bootstrap3 carregado
   por baixo (coexistência controlada nesta página isolada). */
body.vuexy-login-layout {
    background-color: #f8f7fa;
    min-height: 100vh;
    margin: 0;
}

/* O ace.min.css define regras agressivas em .main-container / .main-content.
   Nesta página isoladas neutralizamos para o wrapper de auth do Vuexy mandar. */
body.vuexy-login-layout .authentication-wrapper {
    min-height: 100vh;
}

body.vuexy-login-layout .authentication-inner {
    width: 100%;
    max-width: 420px;
}

/* Logo da SI dentro do card de login */
.vuexy-login-logo {
    max-width: 190px;
    height: auto;
}

/* Erros de validação do Yii ($form->error) — o Yii gera .errorMessage / *_em_.
   Damos-lhes o aspecto de feedback do Bootstrap 5 / Vuexy. */
body.vuexy-login-layout .errorMessage,
body.vuexy-login-layout [id$="_em_"] {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--bs-danger, #ea5455);
}

/* Esconder os _em_ vazios para não abrirem espaço */
body.vuexy-login-layout [id$="_em_"]:empty {
    display: none;
}

/* O ace estiliza inputs/checkbox com aparência própria; nesta página
   deixamos o form-control do Vuexy intacto. */
body.vuexy-login-layout .form-control {
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   2. LAYOUT PRINCIPAL (vuexy.php)
   -------------------------------------------------------------------------- */

/* 2.1 Template Customizer — usa o launcher flutuante DEFAULT do Vuexy
   (.template-customizer-open-btn, botão à direita do ecrã). Não escondido.
   O template-customizer.js injeta `@media (max-width:1200px){#template-customizer
   {display:none;visibility:hidden}}` que esconde TODO o customizer (e o botão
   "Personalizar Tema") em mobile/tablet. Forçamos o botão a continuar visível
   também abaixo de 1200px (o painel mantém-se fora do ecrã até ser aberto).
   O `!important` vence a regra injetada (que não é !important). */
@media (max-width: 1200px) {
    #template-customizer {
        display: block !important;
        visibility: visible !important;
    }
}

/* 2.2 Sidebar — ícones legados (FontAwesome vindos do getMenuList) no 1º nível.
   Damos-lhes o espaçamento/dimensão equivalente ao .menu-icon do Vuexy. */
.layout-menu .menu-inner > .menu-item > .menu-link > .menu-icon-legacy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    margin-inline-end: 0.5rem;
    font-size: 1.375rem;
    line-height: 1;
    flex-shrink: 0;
}
/* Reset dos quirks dos ícones antigos (float/margens do tema Ace) dentro do slot. */
.layout-menu .menu-icon-legacy > i {
    font-size: 1.25rem;
    line-height: 1;
    float: none !important;
    margin: 0 !important;
}
/* Ícones FA legados que vêm SEM a classe base 'fa' (dados da BD, ex.: "O Meu
   Gestor" = <i class="icon- fa-pencil-square-o">): forçar a fonte FontAwesome
   para o glifo renderizar. (FA 4.5 é carregado pela fundação antiga.) */
.layout-menu .menu-icon-legacy i[class*="fa-"] {
    font-family: 'FontAwesome' !important;
    font-weight: 400 !important;
    font-style: normal !important;
}
/* Ícones em <img> (ex.: "Mapa e MLS") ou em imagem de fundo (ex.: "Controlo de
   Qualidade" = .icon-dcq -> icon-dcq.png) precisam de slot mais largo (2rem). */
.layout-menu .menu-inner > .menu-item > .menu-link > .menu-icon-legacy:has(img),
.layout-menu .menu-inner > .menu-item > .menu-link > .menu-icon-legacy:has(.icon-dcq) {
    width: 2rem;
}
.layout-menu .menu-icon-legacy img {
    max-width: 100%;
    height: auto;
}
/* Ícones em imagem (icon-dcq e afins) foram desenhados a escuro para o menu
   CLARO do Ace; no menu semi-dark/escuro ficam invisíveis. Inverter p/ claro. */
[data-semidark-menu="true"] .layout-menu .menu-icon-legacy i.icon-dcq,
[data-bs-theme="dark"] .layout-menu .menu-icon-legacy i.icon-dcq {
    filter: brightness(0) invert(1) !important;
}
/* Quando o menu está colapsado, manter o ícone centrado */
.layout-menu.menu-vertical .menu-item .menu-link .menu-icon-legacy {
    margin-inline-end: 0.5rem;
}

/* Logo da marca na sidebar — TEM de ter dimensão (senão renderiza enorme/0).
   Usa logo-si.png (já legível em menu claro e escuro), por isso SEM filtro. */
.app-brand-logo-img {
    height: 60px;
    width: auto;
    max-width: 100%;
}

/* Troca de logo ao colapsar o menu: full (logo-si.png) quando expandido/hover,
   min (logo_min.png) quando o menu está colapsado e SEM hover. */
.app-brand-logo-min {
    display: none;
    height: 38px;
}
@media (min-width: 1200px) {
    .layout-menu-collapsed .layout-menu:not(:hover) .app-brand-logo-full {
        display: none;
    }
    .layout-menu-collapsed .layout-menu:not(:hover) .app-brand-logo-min {
        display: inline-block;
    }
}

/* 2.2b FIX GLOBAL — ícones Vuexy (.ti, mask) invisíveis dentro de links.
   CAUSA RAIZ: o FontAwesome 3.2.1 antigo (font-awesome.min.css) tem
       a [class^="icon-"], a [class*=" icon-"] { display: inline; }
   e as classes Vuexy .icon-base/.icon-lg/.icon-md contêm "icon-", por isso
   qualquer <i class="icon-base ti tabler-*"> DENTRO de <a> ficava
   display:inline -> caixa 0x0 -> invisível (refresh/X do customizer,
   hamburger, toggle do menu, ícones do perfil, etc.).
   Este ficheiro carrega DEPOIS do FA3 -> mesma especificidade (0,1,1) ganha
   por ordem; o !important blinda contra outras folhas antigas. */
a .ti,
button .ti,
label .ti {
    display: inline-block !important;
}

/* 2.2c Repor os utilitários responsivos d-* sobre .ti — o 2.2b (acima) dava
   display:inline-block a TODOS os .ti dentro de <a>, anulando d-none/d-xl-none
   (ex.: o X mobile do toggle da sidebar aparecia no desktop collapsed). */
a .ti.d-none,
button .ti.d-none,
label .ti.d-none {
    display: none !important;
}
@media (min-width: 1200px) {
    a .ti.d-xl-block {
        display: inline-block !important;
    }
    a .ti.d-xl-none {
        display: none !important;
    }
}

/* 2.3 Header — itens de menu vindos de widgets antigos (user_options,
   notificações) dentro dos dropdowns Vuexy: dar-lhes aspecto de dropdown-item. */
.navbar .dropdown-menu li > a:not(.dropdown-item) {
    display: block;
    padding: 0.5rem 1rem;
    clear: both;
    color: var(--bs-body-color);
    text-decoration: none;
    white-space: nowrap;
    border-radius: 0.375rem;
}
.navbar .dropdown-menu li > a:not(.dropdown-item):hover {
    background-color: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.05));
}

/* 2.4 "Escolher Utilizador" — painel lateral estilo Template Customizer.
   Replica o CSS injectado pelo template-customizer.js (#template-customizer):
   painel fixed à direita escondido via translateX, botão flutuante "agarrado"
   à borda. Botão logo ABAIXO do botão do customizer (180px + 38px + 14px) e
   com OUTRA cor (warning/laranja; o customizer usa primary). */
#si-user-chooser {
    position: fixed;
    z-index: 99999990; /* abaixo do customizer (99999999) — se ambos abertos, o customizer ganha */
    display: flex;
    flex-direction: column;
    block-size: 100%;
    inline-size: 400px;
    inset-block-start: 0;
    inset-inline-end: 0;
    transform: translateX(420px);
    transition: transform 0.2s ease-in;
    box-shadow: 0 0.3125rem 1.375rem 0 rgba(34, 48, 62, 0.18);
}
[data-bs-theme=dark] #si-user-chooser {
    box-shadow: 0 0.3125rem 1.375rem 0 rgba(20, 20, 29, 0.26);
}
#si-user-chooser.si-user-chooser-open {
    transform: none;
    transition-delay: 0.1s;
}
#si-user-chooser .si-user-chooser-open-btn {
    position: absolute;
    z-index: -1;
    display: block;
    background: var(--bs-warning);
    block-size: 38px;
    inline-size: 38px;
    border-end-start-radius: 0.375rem;
    border-start-start-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(var(--bs-warning-rgb), 0.4);
    color: #fff;
    font-size: 22px;
    line-height: 38px;
    text-align: center;
    inset-block-start: 232px; /* botão do customizer está a 180px */
    inset-inline-start: 0;
    transform: translateX(-58px);
    transition: all 0.1s linear 0.2s;
}
#si-user-chooser .si-user-chooser-open-btn:hover,
#si-user-chooser .si-user-chooser-open-btn:focus {
    color: #fff;
}
/* Ícone (tabler user-cog) via mask no ::before — mesma técnica do botão do
   customizer; não depende do iconify-icons.css nem sofre overrides do ace. */
#si-user-chooser .si-user-chooser-open-btn::before {
    position: absolute;
    display: block;
    content: "";
    block-size: 22px;
    inline-size: 22px;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h2.5m4.501 4a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-3.5V17m0 4v1.5m3.031-5.25l-1.299.75m-3.463 2l-1.3.75m0-3.5l1.3.75m3.463 2l1.3.75'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h2.5m4.501 4a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-3.5V17m0 4v1.5m3.031-5.25l-1.299.75m-3.463 2l-1.3.75m0-3.5l1.3.75m3.463 2l1.3.75'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}
#si-user-chooser.si-user-chooser-open .si-user-chooser-open-btn {
    opacity: 0;
}
#si-user-chooser .si-user-chooser-header a:hover,
#si-user-chooser .si-user-chooser-header a:hover .icon-base {
    color: inherit !important;
}
#si-user-chooser .si-user-chooser-header {
    padding-bottom: 0 !important;
}
#si-user-chooser .si-user-chooser-header .mb-0.small {
    padding-top: 72px;
}
/* Toggle "Apenas utilizadores ativos": o core.css ANTIGO (fundação legada) tem
   um .switch diferente que colapsava o slider → ficavam só os indicadores
   .switch-on/.switch-off (um "❘" = traço vertical). Forçar o toggle Vuexy:
   caixa do .switch + tamanho do slider + esconder os indicadores de texto. */
#si-user-chooser .switch {
    position: relative;
    display: inline-block;
    inline-size: 2.5rem;
    block-size: 1.35rem;
    margin: 0;
    flex: 0 0 auto;
    background: #ffffff;
    box-shadow: none;
    border: none;
}
#si-user-chooser .switch .switch-toggle-slider {
    inline-size: 2.5rem !important;
    block-size: 1.35rem !important;
    line-height: 1.35rem;
}
#si-user-chooser .switch .switch-on,
#si-user-chooser .switch .switch-off {
    display: none !important;
}
#si-user-chooser .select2-container,
#si-user-chooser .chosen-container {
    width: 100% !important;
}
/* Combobox do Escolher Utilizador: evitar "caixa dentro da caixa". O select2
   global é v3 (.select2-choice) mas o tema Vuexy é para v4 (.select2-selection)
   e o form-control pode ser copiado para o .select2-container → borda dupla.
   Fix: contentor sem borda/fundo; a única caixa (estilo input Vuexy) fica no
   .select2-choice / .select2-selection. */
#si-user-chooser .select2-container {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 100% !important;
    padding: 0;
    margin: 0;
}
#si-user-chooser .select2-choice,
#si-user-chooser .select2-selection,
#si-user-chooser .select2-selection--single {
    border: 1px solid #d1d0d4 !important;
    border-radius: 0.375rem !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
    height: calc(1.53em + 0.875rem) !important;
    line-height: calc(1.53em + 0.875rem) !important;
    padding: 0 2rem 0 0.875rem !important;
    color: #6f6b7d !important;
}
#si-user-chooser .select2-choice .select2-arrow,
#si-user-chooser .select2-selection__arrow {
    border: none !important;
    background: transparent !important;
}
@media (max-width: 575.98px) {
    #si-user-chooser {
        inline-size: 300px;
        transform: translateX(320px);
    }
}

/* 2.4b Ícones do topbar (Alertas/Notificações) — os widgets partilhados
   hardcodam classes FA6 ("fa-regular fa-bell fa-2xl") que não existem no FA5
   carregado, e classes Ace FA3 (icon-time, icon-warning-sign...) sem fonte →
   ícones invisíveis (só badges aparecem). Fix SEM tocar nos widgets (são
   usados também pelo header antigo): redesenha-se cada ícone com mask SVG
   Tabler (mesma técnica do iconify/customizer), scoped ao #layout-navbar. */
#layout-navbar i.fa-bell,
#layout-navbar i.fa-envelope,
#layout-navbar .dropdown-menu .icon-warning-sign,
#layout-navbar .dropdown-menu .icon-envelope-alt,
#layout-navbar .dropdown-menu .icon-time,
#layout-navbar .dropdown-menu .icon-arrow-right,
#layout-navbar .dropdown-menu .icon-user,
#layout-navbar .dropdown-menu .icon-comment,
#layout-navbar .dropdown-menu .icon-info {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
}
/* Anular o glifo FA/Ace original (content do ::before) dentro da forma mask */
#layout-navbar i.fa-bell::before,
#layout-navbar i.fa-envelope::before,
#layout-navbar .dropdown-menu .icon-warning-sign::before,
#layout-navbar .dropdown-menu .icon-envelope-alt::before,
#layout-navbar .dropdown-menu .icon-time::before,
#layout-navbar .dropdown-menu .icon-arrow-right::before,
#layout-navbar .dropdown-menu .icon-user::before,
#layout-navbar .dropdown-menu .icon-comment::before,
#layout-navbar .dropdown-menu .icon-info::before {
    content: none !important;
}
/* Formas (SVG Tabler, copiadas do iconify-icons.css do Vuexy) */
#layout-navbar i.fa-bell {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6M9 17v1a3 3 0 0 0 6 0v-1'/%3E%3C/svg%3E");
}
#layout-navbar i.fa-envelope {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='m3 7l9 6l9-6'/%3E%3C/g%3E%3C/svg%3E");
}
#layout-navbar .dropdown-menu .icon-warning-sign {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 9v4m-1.637-9.409L2.257 17.125a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87L13.637 3.59a1.914 1.914 0 0 0-3.274 0zM12 16h.01'/%3E%3C/svg%3E");
}
#layout-navbar .dropdown-menu .icon-envelope-alt {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='m3 7l9 6l9-6'/%3E%3C/g%3E%3C/svg%3E");
}
#layout-navbar .dropdown-menu .icon-time {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/g%3E%3C/svg%3E");
}
#layout-navbar .dropdown-menu .icon-arrow-right {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14m-6 6l6-6m-6-6l6 6'/%3E%3C/svg%3E");
}
#layout-navbar .dropdown-menu .icon-user {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E");
}
#layout-navbar .dropdown-menu .icon-comment {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 9h8m-8 4h6m4-9a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-5l-5 3v-3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3z'/%3E%3C/svg%3E");
}
#layout-navbar .dropdown-menu .icon-info {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m9-3h.01'/%3E%3Cpath d='M11 12h1v4h1'/%3E%3C/g%3E%3C/svg%3E");
}
/* Tamanho dos ícones principais do topbar (sino/envelope) + alinhamento
   ícone+badge no link do dropdown ("fa-2xl" é FA6 e não existe aqui). */
#layout-navbar i.fa-bell,
#layout-navbar i.fa-envelope {
    width: 1.5rem;
    height: 1.5rem;
}
#layout-navbar .navbar-nav > li > a.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    position: relative;
}
#layout-navbar .navbar-nav > li > a.dropdown-toggle > .badge {
    position: relative;
    top: -10px;
    left: -7px;
}

/* 2.4b-bis Dropdown do PERFIL (e demais dropdowns da navbar) NÃO abria em mobile.
   O tema tem `@media (max-width:767.98px){ .layout-navbar .navbar-nav .nav-item.dropdown
   .dropdown-menu { position:absolute; inset-inline-start:0.9rem; min-inline-size:auto } }`.
   O `inset-inline-start:0.9rem` (left fixo) entra em conflito com o Popper +
   `.dropdown-menu-end` (perfil, alinhado à direita) → o menu fica mal posicionado/
   invisível ao receber `.show`. Neutraliza-se o `left` fixo (id+!important vence) para
   o Popper voltar a posicionar corretamente. */
@media (max-width: 767.98px) {
    #layout-navbar .navbar-nav .nav-item.dropdown .dropdown-menu {
        inset-inline-start: auto !important;   /* tira o left fixo 0.9rem do tema */
        inline-size: auto !important;          /* tira o width:92% do tema (popup largo a mais) */
        min-inline-size: 10rem !important;     /* repõe o min-width default do BS5 */
    }
    /* Notificações/Alertas: widgets ANTIGOS com markup Ace (`<li class="">` +
       `ul.dropdown-navbar.dropdown-menu`, toggle manual `data-toggle`). NÃO são
       `.nav-item.dropdown`, por isso o tema NÃO os transforma em popup → ficavam
       `position:static` e o conteúdo aparecia "solto" sem caixa em mobile. Dar-lhes
       o MESMO popup absoluto alinhado à direita (a caixa/sombra vêm do .dropdown-menu BS5). */
    #layout-navbar .navbar-nav .dropdown-menu.dropdown-navbar {
        /* painel FIXO de largura total por baixo da navbar — sempre dentro do
           ecrã e legível (o absolute right-anchored cortava à esquerda). */
        position: fixed !important;
        inset-block-start: 4.25rem !important;       /* ~altura da navbar fixa */
        inset-inline-start: 0.5rem !important;
        inset-inline-end: 0.5rem !important;
        inline-size: auto !important;
        max-inline-size: none !important;
        max-block-size: calc(100vh - 5.5rem) !important;
    }
}

/* 2.4b-ter FORMATAÇÃO dos dropdowns de Notificações/Alertas (widgets Ace antigos,
   `ul.dropdown-navbar`): sem o CSS do Ace o conteúdo aparecia "solto". Dar-lhes
   aspeto de lista de notificações tipo Vuexy — cabeçalho fixo + itens separados
   (ícone redondo + título + hora) + scroll. Cobre NotificationWidget
   (.msg-title/.msg-time) e AlertWidget (texto + .pull-right.badge). Todos os tamanhos. */
#layout-navbar .dropdown-navbar {
    inline-size: 22rem;
    max-inline-size: calc(100vw - 1rem);
    padding: 0;
    max-block-size: min(70vh, 26rem);
    overflow-y: auto;
    /* caixa OPACA (senão a página via-se por baixo / ilegível) */
    background: var(--bs-dropdown-bg, #fff) !important;
    border: 1px solid var(--bs-border-color, #e7e7ea) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 0.25rem 1rem rgba(34, 48, 62, 0.18) !important;
}
#layout-navbar .dropdown-navbar > li.dropdown-header {
    position: sticky; inset-block-start: 0; z-index: 2;
    display: flex; align-items: center; gap: .5rem;
    margin: 0; padding: .8rem 1rem;
    font-weight: 600; font-size: .95rem; color: var(--bs-heading-color, #4b465c);
    background: var(--bs-dropdown-bg, #fff);
    border-bottom: 1px solid var(--bs-border-color, #e7e7ea);
}
#layout-navbar .dropdown-navbar > li.dropdown-header .notification-number {
    margin-inline-start: auto;
    background: rgba(var(--bs-primary-rgb, 32, 146, 236), .12);
    color: var(--bs-primary, #2092ec);
    border-radius: 1rem; padding: .1rem .5rem; font-size: .72rem; font-weight: 700;
}
#layout-navbar .dropdown-navbar > li > a {
    display: block; padding: .65rem 1rem;
    border-bottom: 1px solid var(--bs-border-color, #efeef1);
    color: var(--bs-body-color); text-decoration: none; white-space: normal;
}
#layout-navbar .dropdown-navbar > li > a:hover {
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, .04));
}
#layout-navbar .dropdown-navbar .clearfix {
    display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem;
}
#layout-navbar .dropdown-navbar .pull-left {
    float: none !important; flex: 1 1 auto; min-inline-size: 0;
}
#layout-navbar .dropdown-navbar .pull-right {
    float: none !important; flex: 0 0 auto;
}
/* NotificationWidget: título (ícone redondo + texto) + hora por baixo */
#layout-navbar .dropdown-navbar .msg-title {
    display: flex; align-items: center; gap: .5rem;
    font-weight: 600; font-size: .88rem; line-height: 1.3; white-space: normal;
    color: var(--bs-heading-color, #4b465c);
}
#layout-navbar .dropdown-navbar .msg-title > i.btn {
    flex: 0 0 auto; inline-size: 1.75rem; block-size: 1.75rem; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: .8rem;
}
#layout-navbar .dropdown-navbar .msg-time {
    display: block; margin: .25rem 0 0 2.25rem !important;
    font-size: .73rem; color: var(--bs-secondary-color, #8a8a8a);
}

/* 2.4c Neutralizar regras globais ".navbar" do tema ANTIGO (custom.css) que
   apanham a navbar Vuexy (#layout-navbar tem a classe .navbar):
     - >=992px: "background-color: white !important" (errado em dark mode);
     - <992px: "position: fixed; top: 0; width: 100% !important;
        background-color: #f3f4f4 !important" — partia a navbar detached
        (largura/cor) e deslocava o botão hamburger em mobile.
   Repõem-se os valores do Vuexy (core.css). */
#layout-navbar.navbar {
    background-color: var(--bs-paper-bg) !important;
}
@media only screen and (max-width: 992px) {
    #layout-navbar.navbar {
        /* Vuexy navbar-detached: largura com margens, não 100% colado */
        width: calc(100% - 3rem) !important;
        inline-size: calc(100% - 3rem) !important;
        top: auto;
    }
    .layout-navbar-fixed #layout-navbar.navbar {
        position: fixed !important;
        inset-block-start: 0;
        inset-inline: 0;
        margin-inline: auto;
    }
}

/* 2.4e Menu off-canvas (mobile/tablet ≤1199px): com o menu semi-dark (#2F3349)
   e o backdrop navy a 50% (#263c55), a faixa do overlay colada ao bordo direito
   do menu "parecia menu" — mesma tonalidade escura, sem separação — e clicar nessa
   faixa fechava o menu como se fosse fora dele. Correção:
     (a) bordo direito NÍTIDO no menu (hairline claro de 1px + elevação) e
     (b) backdrop preto NEUTRO (em vez de navy) para contrastar com o menu.
   Assim a fronteira menu↔backdrop fica inequívoca (o comportamento de fechar ao
   clicar fora mantém-se, mas o "fora" deixa de se confundir com o menu). */
@media (max-width: 1199.98px) {
    .layout-menu {
        box-shadow:
            1px 0 0 0 rgba(255, 255, 255, 0.16),
            0.5rem 0 1.75rem 0 rgba(0, 0, 0, 0.45);
    }
    .layout-overlay {
        background: rgba(0, 0, 0, 0.55) !important;
    }
}

/* 2.4d Toggles do menu (hamburger mobile, chevron/X) — só tamanho de fonte.
   (A versão anterior forçava display !important + background currentColor, o
   que pintava uma "bola" sólida e mostrava o X mobile no desktop collapsed;
   a visibilidade agora respeita os utilitários d-* — ver 2.2c.) */
#layout-navbar .layout-menu-toggle .icon-base,
.layout-menu .layout-menu-toggle .icon-base {
    font-size: 1.5rem;
}
#layout-navbar .layout-menu-toggle a {
    display: inline-flex;
    align-items: center;
    color: var(--bs-heading-color);
}

/* 2.5 Avatar do header com imagem (compat com fotos do utilizador) */
.navbar .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 2.6 Conteúdo antigo (BS3) dentro do content-wrapper Vuexy — base de
   compatibilidade. Vai crescendo à medida que se migram páginas. */
.content-wrapper .page-content {
    padding: 0;
}
/* Botão scroll-up legado: deixar o Vuexy gerir o posicionamento base */
#btn-scroll-up.btn-scroll-up {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1030;
}

/* --------------------------------------------------------------------------
   3. /site/index — dashboard (gamification em card Vuexy)
   -------------------------------------------------------------------------- */
.vuexy-dashboard-card {
    overflow: hidden;
}
.vuexy-dashboard-card .embed-container {
    overflow: hidden;
}
.vuexy-dashboard-card #gamification-container {
    display: block;
}

/* --------------------------------------------------------------------------
   4. COMPAT BS3/BS5 — modais/tooltips/popovers do conteúdo antigo.
   O core.css (BS5, carregado DEPOIS do BS3) tem `.fade:not(.show){opacity:0}`
   que, por ordem de cascata, ganha ao `.fade.in{opacity:1}` do BS3 — os
   modais BS3 abriam "invisíveis" (ex.: #simulator-modal do /site/index).
   Este ficheiro carrega depois do core.css, por isso estas regras ganham.
   -------------------------------------------------------------------------- */
.fade.in {
    opacity: 1;
}
.fade.show {
    opacity: 1;
}
.modal-backdrop.in {
    opacity: .5;
}
/* BS5 desloca o .modal-dialog em `.modal.fade` e só repõe com `.show`;
   com o modal BS3 (classe .in) o transform tem de ser reposto aqui. */
.modal.in .modal-dialog {
    transform: none;
}
/* Tooltips/popovers BS3 (classe .in) por cima da moldura Vuexy */
.tooltip.in {
    opacity: .9;
    z-index: 1095;
}

/* --------------------------------------------------------------------------
   5. Sidebar collapsed/compact (desktop >=1200px, menu não-hover)
   - separadores (menu-header) totalmente escondidos, sem espaço reservado;
   - só o logo_min centrado no topo, sem toggle/X;
   - ao passar o rato (menu expande temporariamente) volta tudo ao normal.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
    html.layout-menu-collapsed #layout-menu:not(:hover) .menu-header {
        display: none !important;
    }
    html.layout-menu-collapsed #layout-menu:not(:hover) .layout-menu-toggle {
        display: none !important;
    }
    html.layout-menu-collapsed #layout-menu:not(:hover) .app-brand {
        justify-content: center;
        padding-inline: 0;
    }
    html.layout-menu-collapsed #layout-menu:not(:hover) .app-brand-link {
        margin-inline: auto;
    }
}

/* Ícones Tabler do sino/envelope no topbar (AlertWidget/NotificationWidget
   em modo Vuexy): tamanho e alinhamento com os restantes ícones. */
#layout-navbar .navbar-nav > li > a.dropdown-toggle > .ti {
    font-size: 1.625rem;
    line-height: 1;
}

/* Select2 aberto SEMPRE por cima do painel "Escolher Utilizador" (z-index
   99999990) e de modais/moldura — o dropdown é anexado ao <body> (default)
   e sem isto ficava escondido atrás do painel ("a combobox não abre"). */
.select2-container--open {
    z-index: 100000005 !important;
}

/* --------------------------------------------------------------------------
   6. ÍCONES TABLER vs ace.min.css — duas defesas (pedido 2026-06-11):
   6.1 Aliases .ti-* com os MESMOS SVGs do iconify-icons.css desta build
       (o iconify daqui só define .tabler-*; assim "ti ti-bell"/"ti ti-mail"
       funcionam por si, sem depender da classe tabler-*).
   6.2 Blindagem no navbar/sidebar: o ace.min.css (mantido por compat com o
       conteúdo antigo) interfere com display/line-height/background dos
       ícones — repor TODAS as propriedades de que o mask iconify precisa,
       com !important e escopo por ID (carregado DEPOIS do ace).
   -------------------------------------------------------------------------- */
.ti-bell { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6M9 17v1a3 3 0 0 0 6 0v-1'/%3E%3C/svg%3E"); }
.ti-mail { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='m3 7l9 6l9-6'/%3E%3C/g%3E%3C/svg%3E"); }
.ti-menu-2 { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E"); }
.ti-x { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.ti-search { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 10a7 7 0 1 0 14 0a7 7 0 1 0-14 0m18 11l-6-6'/%3E%3C/svg%3E"); }
.ti-circle-dot { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M11 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0'/%3E%3C/g%3E%3C/svg%3E"); }
.ti-user { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E"); }
.ti-clock { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/g%3E%3C/svg%3E"); }
.ti-message { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 9h8m-8 4h6m4-9a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-5l-5 3v-3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3z'/%3E%3C/svg%3E"); }
.ti-alert-triangle { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 9v4m-1.637-9.409L2.257 17.125a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87L13.637 3.59a1.914 1.914 0 0 0-3.274 0zM12 16h.01'/%3E%3C/svg%3E"); }
.ti-info-circle { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m9-3h.01'/%3E%3Cpath d='M11 12h1v4h1'/%3E%3C/g%3E%3C/svg%3E"); }
.ti-arrow-right { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14m-6 6l6-6m-6-6l6 6'/%3E%3C/svg%3E"); }
.ti-logout { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M14 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2'/%3E%3Cpath d='M9 12h12l-3-3m0 6l3-3'/%3E%3C/g%3E%3C/svg%3E"); }

/* 6.2 Blindagem: navbar + sidebar (escopo por ID ganha ao ace.min.css).
   IMPORTANTE: só para .ti COM classe de glifo (ti-*/tabler-*) — aplicar a
   qualquer .ti pintava CAIXAS SÓLIDAS nos ícones internos do Vuexy sem --svg
   (ex.: .menu-toggle-icon -> era o "círculo/quadrado extra" no toggle). */
#layout-navbar .ti[class*="ti-"],
#layout-navbar .ti[class*="tabler-"],
#layout-menu .ti[class*="ti-"],
#layout-menu .ti[class*="tabler-"],
#layout-navbar .navbar-nav > li > a > i.ti {
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    min-width: 1em;
    padding: 0 !important;
    line-height: 1 !important;
    vertical-align: middle;
    background-color: currentColor !important;
    background-image: none !important;
    -webkit-mask-image: var(--svg) !important;
    mask-image: var(--svg) !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
}

/* 6.2b Badges das NOTIFICAÇÕES do topbar protegidos contra CSS de conteúdo
   (ex.: o imports-blue.css da gamification inline define `.badge` global
   40x40 com gradiente/sombra — os counts do sino/envelope ficavam "bolas"
   gigantes). ESPECÍFICO (2026-06-12): aplica-se SÓ aos counts dos widgets
   de alertas/notificações (.topbar-notification-badge emitida pelos widgets
   + badges dentro dos dropdowns .dropdown-navbar desses widgets). Badges do
   conteúdo das páginas, cards, tabelas, forms e menu lateral NÃO são tocados. */
#layout-navbar .topbar-notification-badge,
#layout-navbar .dropdown-navbar .badge {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0.25em 0.5em !important;
    border-radius: 50rem !important; /* pill: badges do topo/menu redondos */
    box-shadow: none !important;
    background-image: none !important;
    font-size: 0.8125rem !important;
    line-height: 1.3 !important;
    display: inline-block;
    vertical-align: baseline;
    color: #fff !important;
    background-color: #808390 !important; /* default secondary */
}
/* cores (paleta Vuexy) — as do ace deixaram de carregar */
#layout-navbar .topbar-notification-badge.badge-warning,
#layout-navbar .dropdown-navbar .badge-warning {
    background-color: #ff9f43 !important;
}
#layout-navbar .topbar-notification-badge.badge-danger,
#layout-navbar .dropdown-navbar .badge-danger,
#layout-navbar .dropdown-navbar .badge-important {
    background-color: #ff4c51 !important;
}
#layout-navbar .topbar-notification-badge.badge-success,
#layout-navbar .dropdown-navbar .badge-success {
    background-color: #28c76f !important;
}
#layout-navbar .topbar-notification-badge.badge-info,
#layout-navbar .dropdown-navbar .badge-info {
    background-color: #00bad1 !important;
}
#layout-navbar .topbar-notification-badge.badge-primary,
#layout-navbar .dropdown-navbar .badge-primary {
    background-color: var(--bs-primary, #2092ec) !important;
}

/* 6.3 COR dos links do navbar — CAUSA RAIZ dos ícones "invisíveis":
   o ace.min.css define `.navbar .navbar-nav>li>a { color:#fff }` (navbar
   antiga era azul) -> mask background-color: currentColor = BRANCO sobre a
   navbar BRANCA do Vuexy (badges têm cor própria, por isso apareciam). */
#layout-navbar .navbar-nav > li > a,
#layout-navbar .navbar-nav > li > a:hover,
#layout-navbar .navbar-nav > li > a:focus {
    color: var(--bs-heading-color, #444050) !important;
    font-size: inherit;
    text-shadow: none;
}
/* não deixar a blindagem anular os utilitários responsivos d-* */
#layout-navbar .ti.d-none,
#layout-menu .ti.d-none {
    display: none !important;
}
@media (min-width: 1200px) {
    #layout-navbar .ti.d-xl-none,
    #layout-menu .ti.d-xl-none {
        display: none !important;
    }
    #layout-navbar .ti.d-xl-block,
    #layout-menu .ti.d-xl-block {
        display: inline-block !important;
    }
}
@media (max-width: 1199.98px) {
    #layout-navbar .ti.d-xl-block:not(.d-block):not(.d-inline-block),
    #layout-menu .ti.d-xl-block:not(.d-block):not(.d-inline-block) {
        display: none !important;
    }
}

/* TABS BS3 sob o Vuexy — o core.css anima os tab-panes com
   `.tab-pane { opacity:0; transform:translateX(-30px) }` e só repõe com a
   classe BS5 `.show`. O markup antigo (BS3: "tab-pane in active") nunca ganha
   .show -> conteúdo INVISÍVEL (ex.: /payment/detail "tab-content no-border
   padding-24"). Repor para qualquer pane activo, BS3 ou BS5. */
.tab-content .tab-pane.active,
.tab-content .tab-pane.in {
    opacity: 1 !important;
    transform: none !important;
}

/* TABS VERTICAIS Ace (tabs-left/tabs-right) sob BS5 — o `.nav { display:flex }`
   do core.css alinhava os separadores na HORIZONTAL no topo (ex.: lista de
   equipas de /results/index). Repor o empilhamento vertical do Ace (o resto
   do visual vem do ace.min.css, que continua carregado). */
.content-wrapper .tabs-left > .nav-tabs,
.content-wrapper .tabs-right > .nav-tabs {
    display: block;
}

/* 6.4 Dropdowns dos widgets antigos na navbar (sino/envelope): no header Ace
   o <li> tinha position própria; aqui sem ancestor posicionado o
   .dropdown-menu absolute "fugia" para a esquerda da página. Ancorar ao li
   e alinhar à direita, por cima do conteúdo. */
#layout-navbar .navbar-nav > li {
    position: relative;
}
#layout-navbar .navbar-nav > li > .dropdown-menu {
    left: auto;
    right: 0;
    top: 100%;
    z-index: 1092;
}

/* Select2 v3 (select2.min.js global dos hooks usa a API antiga: dropdown
   #select2-drop anexado ao body, z-index ~9999) — ficava ATRÁS do painel
   "Escolher Utilizador" (z 99999990) e parecia que "não abria/estava vazia".
   A regra anterior só cobria a v4 (.select2-container--open). */
#select2-drop,
.select2-drop,
.select2-drop.select2-drop-active,
.select2-drop-mask {
    z-index: 100000005 !important;
}
/* Aparência Vuexy do dropdown select2 v3 aberto (#select2-drop, anexado ao body):
   sem o "box-in-box"/input cru do tema v3 — caixa flutuante limpa, campo de
   pesquisa como input Vuexy, resultados compactos com realce azul do tema. */
#select2-drop,
.select2-drop {
    box-sizing: border-box;        /* a borda conta DENTRO da width inline do select2 (alinha com o select) */
    border: 1px solid #d1d0d4;
    border-top: 0;                 /* liga à caixa do select (sem 2ª caixa atrás) */
    border-radius: 0 0 0.375rem 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(34, 48, 62, .12);
    background: #fff;
    padding: 0;
    margin-top: 0;
}
#select2-drop *,
.select2-drop * {
    box-sizing: border-box;
}
/* quando abre para CIMA (select2-drop-above): cantos/borda do outro lado */
#select2-drop.select2-drop-above,
.select2-drop.select2-drop-above {
    border-top: 1px solid #d1d0d4;
    border-bottom: 0;
    border-radius: 0.375rem 0.375rem 0 0;
}
/* caixa do select aberta: encostar ao dropdown (cantos retos do lado ligado) */
#si-user-chooser .select2-container.select2-dropdown-open .select2-choice,
#si-user-chooser .select2-container.select2-dropdown-open .select2-selection {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
#si-user-chooser .select2-container.select2-drop-above .select2-choice {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
/* jQuery UI dialogs (popupWide/popupWideFull — iframes de /workmap/create-map,
   /contract/view, etc.): NUNCA redimensionáveis. Com o touch-punch em mobile, um
   toque/duplo-toque na margem agarrava o resize-handle e encolhia o dialog/iframe
   (ex.: ficava width:206px e o X de fechar ficava inacessível). Esconder os handles
   (escopado a .ui-dialog) desativa o resize por toque em TODOS estes popups. */
.ui-dialog .ui-resizable-handle { display: none !important; }
/* Escolher Utilizador: caixa de pesquisa do select2 LEGÍVEL (fundo branco, texto
   escuro). Escopado ao dropdown deste chooser (dropdownCssClass 'uc-dd'); cobre
   markup v3 (.select2-input) e v4 (.select2-search__field). SÓ cor — sem display. */
.uc-dd .select2-search input,
.uc-dd input.select2-input,
.uc-dd .select2-search .select2-input,
.uc-dd .select2-search__field {
    background: #fff !important;
    color: #000 !important;
}
#select2-drop .select2-search {
    padding: 8px;
    min-height: 0;
}
#select2-drop .select2-search input,
#select2-drop input.select2-input,
#select2-drop .select2-search .select2-input {
    height: calc(1.53em + 0.75rem);
    padding: 0 0.7rem;
    border: 1px solid #d1d0d4 !important;
    border-radius: 0.375rem !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #000 !important;
}
#select2-drop .select2-results {
    margin: 0;
    padding: 4px 0;
    max-height: 500px;
}
/* v4: caixa de resultados do chooser tão alta como a v3 (mostra tantos resultados).
   Com dropdownParent=#si-user-chooser o dropdown v4 fica DENTRO do painel -> scope ok.
   O CSS v4 (themes/default/app-assets/css/select2.css) põe ~200px no
   .select2-results__options; esta regra (carregada depois + !important) vence. */
#si-user-chooser .select2-results__options { max-height: 500px !important; }
#select2-drop .select2-results .select2-result-label {
    padding: 7px 12px;
}
#select2-drop .select2-results .select2-highlighted {
    background: #2092ec;
    color: #fff;
}
#select2-drop .select2-results .select2-highlighted .select2-result-label {
    color: #fff;
}

/* 6.5 Navbar widgets (2026-06-12): sino/envelope MAIORES + sem caret.
   - tamanho explícito (o width:1em ficava curto com font herdada);
   - ESPECÍFICO: só os ícones principais do topbar (.topbar-icon, emitida
     pelos AlertWidget/NotificationWidget) — não TODOS os .ti do navbar;
   - a "seta para baixo" nos li vem do .dropdown-toggle::after (BS5) e do
     b.caret (BS3) — removida em todos os li do navbar-nav-right. */
#layout-navbar a.dropdown-toggle > .ti.topbar-icon {
    font-size: 1.75rem !important;
    width: 1.75rem !important;
    height: 1.75rem !important;
    min-width: 1.75rem !important;
}
#layout-navbar .navbar-nav .dropdown-toggle::after,
#layout-navbar .navbar-nav .dropdown-toggle::before,
#layout-navbar .navbar-nav .dropdown-toggle .caret {
    display: none !important;
    content: none !important;
    border: 0 !important;
}

/* 3b. Gamification INLINE: grelha original (float, como no iframe com o
   bootstrap próprio dela) — o .row{display:flex} do BS5 esmagava colunas
   (ex.: Estado Documental col-md-2 ficava ~150-220px e os timeline-item
   desalinhavam). Block+clearfix devolve o modelo float do BS3 dos hooks. */
#gamification-container .row {
    display: block;
}
#gamification-container .row::before,
#gamification-container .row::after {
    content: "";
    display: table;
}
#gamification-container .row::after {
    clear: both;
}

/* 3c. Estado Documental com largura útil no inline: no iframe (janela toda)
   o col-md-2 dava ~300px; com a sidebar ficou ~220px e os timeline-item
   ficavam esmagados. Fixar 300px e o vídeo (col-md-7) cede o espaço. */
@media (min-width: 992px) {
    #gamification-container .fix-padding-pw {
        width: 300px !important;
    }
    #gamification-container .fix-padding-pw + [class*="col-md-7"] {
        width: calc(75% - 300px) !important;
    }
}

/* --------------------------------------------------------------------------
   7. Diálogos jQuery UI (popups legados com iframe: equipamentos, workmap,
      payment, ...) por cima da moldura fixa do Vuexy (navbar z~1080,
      sidebar). O default do jQuery UI (z-index ~100) deixava o título do
      diálogo escondido atrás da navbar. (Generaliza o fix local do workmap.)
   -------------------------------------------------------------------------- */
body > .ui-dialog {
    z-index: 12000 !important;
    max-width: calc(100vw - 2rem);
}
/* Centragem garantida: vence o position:absolute + top/left inline do jQuery UI E
   as regras locais `.ui-dialog.ui-widget { top:20px }` espalhadas por ~60 views
   (que, com o transform de centragem, atiravam o diálogo para FORA do ecrã em cima).
   Especificidade (0,2,1) > (0,2,0) da regra local; cobre todos os diálogos jQuery UI. */
body > .ui-dialog.ui-widget {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}
body > .ui-widget-overlay {
    position: fixed;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 11990 !important;
}

/* 7b. Visual Vuexy dos diálogos jQuery UI (equipamentos & cia): centrados
   (posição do próprio jQuery UI), cantos/sombra de card, titlebar limpa,
   conteúdo com scroll PRÓPRIO (cabe sempre no viewport). As páginas injetam
   estilos locais (.ui-dialog-titlebar) — estes seletores ganham por
   especificidade. Funcionalidade (close/backdrop/iframe) intacta. */
body > .ui-dialog {
    border: 0 !important;
    border-radius: 0.5rem !important;
    overflow: hidden;
    padding: 0 !important;
    background: #fff !important;
    box-shadow: 0 0.5rem 2rem rgba(34, 48, 62, 0.35) !important;
    max-height: calc(100vh - 2rem);
}
body > .ui-dialog .ui-dialog-titlebar {
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid #e4e2e9 !important;
    border-radius: 0 !important;
    height: auto !important;
    padding: 0.9rem 3rem 0.9rem 1.25rem !important;
    font-size: 1.0625rem !important;
    font-weight: 600;
    color: var(--bs-heading-color, #444050) !important;
    text-shadow: none !important;
}
body > .ui-dialog .ui-dialog-title {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
}
body > .ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: 0.9rem !important;
    top: 50% !important;
    margin: 0 !important;
    transform: translateY(-50%);
    width: 1.875rem;
    height: 1.875rem;
    border: 0;
    border-radius: 0.375rem;
    background-color: transparent;
}
body > .ui-dialog .ui-dialog-titlebar-close:hover {
    background-color: rgba(34, 48, 62, 0.08);
}
body > .ui-dialog .ui-dialog-content {
    padding: 0 !important;
    max-height: calc(100vh - 9rem) !important;
    overflow: auto;
}
/* UM só scroll vertical: quando o conteúdo é um IFRAME (popupWide dos
   equipamentos & cia), o content deixa de fazer scroll e o iframe ocupa a
   altura disponível toda — o scroll fica DENTRO do iframe (scrolling=yes).
   O height="700px" inline do iframe é vencido por esta regra. */
body > .ui-dialog .ui-dialog-content:has(> iframe) {
    overflow: hidden;
    height: calc(100vh - 9rem) !important;
}
body > .ui-dialog .ui-dialog-content > iframe {
    display: block;
    width: 100%;
    height: calc(100vh - 9rem) !important;
    border: 0;
}

/* 7b-bis. Botões com cor DENTRO dos diálogos jQuery UI: os shims de cor dos
   btn-* vivem em custom-tables.css escopados a .content-wrapper, mas o jQuery UI
   move o diálogo para body > .ui-dialog (fora do content-wrapper) → os botões
   ficavam sem cor. Replicar as cores aqui. (Botões com background inline
   !important — ex. RH/candidaturas — mantêm a sua cor própria.) */
body > .ui-dialog .btn-primary,
body > .ui-dialog .btn-info.btn-primary {
    background-color: var(--bs-primary, #2092ec) !important;
    border-color: var(--bs-primary, #2092ec) !important;
    color: #fff !important;
}
body > .ui-dialog .btn-success {
    background-color: #28c76f !important;
    border-color: #28c76f !important;
    color: #fff !important;
}
body > .ui-dialog .btn-danger {
    background-color: #ff4c51 !important;
    border-color: #ff4c51 !important;
    color: #fff !important;
}
body > .ui-dialog .btn-warning,
body > .ui-dialog .btn-yellow {
    background-color: #ff9f43 !important;
    border-color: #ff9f43 !important;
    color: #fff !important;
}
body > .ui-dialog .btn-info {
    background-color: #00bad1 !important;
    border-color: #00bad1 !important;
    color: #fff !important;
}
body > .ui-dialog .btn-inverse,
body > .ui-dialog .btn-dark {
    background-color: #4b4b4b !important;
    border-color: #4b4b4b !important;
    color: #fff !important;
}
body > .ui-dialog .btn-default,
body > .ui-dialog .btn-grey,
body > .ui-dialog .btn-light {
    background-color: var(--bs-paper-bg, #fff) !important;
    border: 1px solid var(--bs-border-color, #d1d0d4) !important;
    color: var(--bs-body-color, #444050) !important;
}

/* 7b-ter. Diálogos ALTOS com botões (ui-dialog-buttonpane): a barra de botões
   (Cancelar/OK) ficava cortada por baixo do overflow:hidden do .ui-dialog,
   vendo-se só uma fatia. Flex-column → o conteúdo faz scroll e a buttonpane fica
   sempre visível em baixo. Escopado a diálogos COM buttonpane para não mexer nos
   diálogos de iframe (popupWide: equipamentos, contract/view, ...). */
body > .ui-dialog:has(> .ui-dialog-buttonpane) {
    display: flex;
    flex-direction: column;
    /* Diálogos altos sem height fixa (ex.: "Avaliação do candidato" em
       /admissionCandidate/calendar, com muitos botões FIT/BLOW/...) cresciam
       além do ecrã e a buttonpane (Cancelar) ficava FORA do modal/viewport.
       Cap a 95vh → o conteúdo faz scroll e a Cancelar fica sempre visível. */
    max-height: 95vh;
}
body > .ui-dialog:has(> .ui-dialog-buttonpane) .ui-dialog-content {
    flex: 1 1 auto;
    min-height: 0;
}
body > .ui-dialog:has(> .ui-dialog-buttonpane) .ui-dialog-buttonpane {
    flex: 0 0 auto;
}

/* 7b-quater. Slider jQuery UI (.ui-slider) — usado p/ ratings (ex. o Rating do
   Fit de 1 a 5 no Feedback de Entrevista, /admissionCandidate/calendar). O CSS
   do jQuery UI não é carregado no Vuexy, por isso o slider era inserido mas
   ficava INVISÍVEL (sem track nem handle). Estilo mínimo Vuexy. */
.ui-slider {
    position: relative;
    height: 0.5rem;
    background: #e4e2e9;
    border: 0;
    border-radius: 1rem;
    margin: 0.85rem 0;
}
.ui-slider .ui-slider-range {
    position: absolute;
    height: 100%;
    background: var(--bs-primary, #2092ec);
    border-radius: 1rem;
}
.ui-slider .ui-slider-handle {
    position: absolute;
    top: 50%;
    width: 1.1rem;
    height: 1.1rem;
    margin-left: -0.55rem;
    transform: translateY(-50%);
    background: #fff;
    border: 2px solid var(--bs-primary, #2092ec);
    border-radius: 50%;
    cursor: pointer;
    outline: none;
    box-shadow: 0 1px 3px rgba(34, 48, 62, 0.25);
}
.ui-slider .ui-slider-handle:hover,
.ui-slider .ui-slider-handle:focus {
    background: var(--bs-primary, #2092ec);
}

/* 7c. Modais (BS5 / bootbox / BS3 legado) sempre centrados no ecrã
   (desktop/mobile/tablet) — evita o "abrir fora do ecrã" visto em vários
   módulos. Centra na vertical RESPEITANDO a largura do modal (modal-sm/lg/xl
   mantêm-se); o conteúdo alto faz scroll dentro do próprio modal. Só afeta o
   layout Vuexy (este CSS não é carregado nos módulos excluídos). */
.modal.show > .modal-dialog,
.modal.in > .modal-dialog,
.bootbox.modal > .modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
    margin: 1.75rem auto !important;
    /* O bootstrap.min.css (BS3 legado, ainda carregado) aplica
       `left:50%` a .modal-dialog em @media (min-width:768px) — antes o
       Ace compensava por JS (margin-left negativo); sob Vuexy esse JS
       já não existe e o modal saltava ~½ ecrã p/ a direita SÓ no desktop.
       Anular o left/right legado p/ a margem auto voltar a centrar. */
    left: auto !important;
    right: auto !important;
}
.modal.show > .modal-dialog > .modal-content,
.modal.in > .modal-dialog > .modal-content,
.bootbox.modal > .modal-dialog > .modal-content {
    width: 100%;
    max-height: calc(100vh - 3.5rem);
    overflow: auto;
}

/* --------------------------------------------------------------------------
   8. Pedidos 2026-06-12 (3ª ronda)
   -------------------------------------------------------------------------- */

/* 8.1 vs-checkbox (markup Frest usado em lead/contract/admissionCandidate):
   o check interior era a fonte feather (icon-check — não carrega) e o FA3
   define um glifo errado para .icon-check -> check desenhado por MASK,
   estados no azul primário (igual ao template). */
.vs-checkbox-con .vs-checkbox .vs-checkbox--check .vs-icon {
    display: inline-block !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 0 !important;
    line-height: 1;
    background-color: #fff;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m5 12l5 5L20 7'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m5 12l5 5L20 7'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 80% 80%;
    mask-size: 80% 80%;
    -webkit-mask-position: center;
    mask-position: center;
}
.vs-checkbox-con .vs-checkbox .vs-checkbox--check .vs-icon::before {
    content: none !important; /* mata o glifo FA3 icon-check */
}
.vs-checkbox-con.vs-checkbox-con input:checked ~ .vs-checkbox {
    border-color: var(--bs-primary, #2092ec) !important;
}
.vs-checkbox-con.vs-checkbox-con input:checked ~ .vs-checkbox .vs-checkbox--check,
.vs-checkbox-con.vs-checkbox-primary input:checked ~ .vs-checkbox .vs-checkbox--check {
    background-color: var(--bs-primary, #2092ec) !important;
}

/* 8.2 dropdown do bootstrap-datepicker (.form-control.date-picker): o inline
   z-index:100 ficava ATRÁS da navbar fixa (1080), dos thead sticky e dos
   diálogos — visível mas inclicável/cortado. Os diálogos jQuery UI empilham num
   z-index ENORME (~1e8, via stack), por isso este valor tem de ficar ACIMA do
   topo da pilha de diálogos (ex.: campo Data dentro do #dialog-call em
   /admissionCandidate/calendar, que abria ATRÁS do diálogo). */
body > .datepicker.datepicker-dropdown,
.datepicker.datepicker-dropdown {
    z-index: 100000060 !important;
}

/* 8.3 FA4 "fa fa-pencil" não existe no FA5 carregado (renomeado pencil-alt)
   — ex.: /user/ferias. Apontar para o glifo f303 do FA5 Free. Idem trash-o. */
.content-wrapper .fa.fa-pencil::before {
    content: "\f303";
}
.content-wrapper .fa.fa-trash-o::before {
    content: "\f2ed";
}

/* 8.4 count do sino/envelope MAIS PEQUENO (pedido 2026-06-12) — só o badge
   do topo; os badges dentro dos dropdowns (.dropdown-navbar) mantêm 0.8125. */
#layout-navbar .topbar-notification-badge {
    font-size: 0.6875rem !important;
    padding: 0.2em 0.45em !important;
    line-height: 1.25 !important;
}

/* 8.5 touch.svg (botões "mão" dos dashboards/pagamentos) nunca abaixo de 30px */
.content-wrapper img[src*="touch.svg"] {
    min-height: 30px;
}

/* --------------------------------------------------------------------------
   9. Bootstrap-datepicker (dropdown) — colunas dos DIAS com largura UNIFORME.
   O `table-layout:auto` + o título "Mês Ano" (th com colspan) despejava a
   largura extra numa só coluna (ex.: "Se"/Segunda muito mais larga). Forçar a
   grelha da vista de dias a 7 colunas iguais. Vistas de meses/anos (3-4 cols)
   ficam de fora. Global (o dropdown é anexado ao body, partilhado por todas as
   páginas). Mesma correção que estava scoped em /workmap/index.
   -------------------------------------------------------------------------- */
.datepicker.datepicker-dropdown {
    width: 252px !important;
    min-width: 0 !important;
    max-width: 252px !important;
}
.datepicker .datepicker-days table {
    table-layout: fixed !important;
    width: 100% !important;
}
.datepicker .datepicker-days th,
.datepicker .datepicker-days td {
    width: 14.2857% !important;
    height: 30px;
    text-align: center;
    padding: 0 !important;
}

/* 9.1 Gritter (notificações sticky — ex.: "Observações do candidato" no
   .getObs de /admissionCandidate/calendar). O CSS do gritter não está no Vuexy:
   o botão de fecho (.gritter-close) ficava 0x0 e só era revelado por :hover no
   Ace, por isso a notificação sticky aparecia mas NÃO dava para fechar. Tornar
   o "x" sempre visível, dimensionado e clicável (também funciona em touch). */
.gritter-item-wrapper {
    position: relative;
}
.gritter-close {
    display: block !important;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 13px;
    color: #fff;
    background: rgba(0, 0, 0, 0.28);
    border-radius: 50%;
    cursor: pointer;
    text-indent: 0;
    z-index: 2;
}
.gritter-close::before {
    content: "\00d7";
}
.gritter-close:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* Personalizar Tema: esconder o ponto vermelho (badge-dot) do botão "Reset" do
   customizer — indicador de "definições alteradas" que não queremos mostrar. */
.template-customizer .template-customizer-reset-btn .badge.badge-notifications,
.template-customizer-reset-btn .badge-notifications {
    display: none !important;
}

/* Personalizar Tema: esconder a secção de COR PRIMÁRIA. O controlo 'color'
   mantém-se nos controls (para o template-customizer.js encontrar o color picker
   e não dar o aviso "Required color picker elements not found"), mas a secção
   fica invisível. A cor primária fica fixa na marca (#2092EC, ver custom-config.js). */
.template-customizer-color {
    display: none !important;
}

/* /estadoDocumental/*: botões de equipa (.btn-app.team-name-search) ALINHADOS
   (tamanho uniforme) com o count EM CIMA e o nome EM BAIXO (empilhado, centrado).
   NÃO escopado a página: estes botões só existem nos dashboards estadoDocumental E processosInternos. */
.btn-app.team-name-search {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 120px !important;
    min-width: 120px !important;
    height: 64px !important;
    padding: 8px 6px !important;
    text-align: center;
    white-space: normal;
    vertical-align: top;
}
.btn-app.team-name-search br { display: none; }
.btn-app.team-name-search strong { font-size: 26px; line-height: 1; }
.btn-app.team-name-search span { font-size: 10px; line-height: 1.1; margin-top: 3px; }
/* mobile: 2 colunas a ENCHER a largura (em vez de 120px fixo, que deixava espaço
   vazio à direita). Os botões têm margin:5px (inline) -> ~50% menos a margem. */
@media (max-width: 575.98px) {
    .btn-app.team-name-search {
        width: calc(50% - 14px) !important;
        min-width: 0 !important;
    }
}

/* Dialogs jQuery UI (popupWide/Full em várias páginas, ex.: /contract/view em
   iframe): overlay e dialog ACIMA da moldura Vuexy, para o .ui-widget-overlay
   .ui-front não ficar mal posicionado/preso. (O remover-ao-fechar é no
   custom-config.js, handler global de dialogclose.) */
.ui-widget-overlay,
.ui-widget-overlay.ui-front {
    z-index: 100000000 !important;
}
.ui-dialog.ui-widget {
    z-index: 100000001 !important;
}
/* Bootbox (confirm/alert) é sempre a interação no topo: tem de ficar ACIMA dos
   diálogos jQuery UI (z 100000001 acima), senão um bootbox aberto a partir de um
   diálogo (ex.: /admissionCandidate/calendar "Avaliação ao candidato" -> "Não
   compareceu") aparece POR TRÁS e não dá para confirmar. */
.bootbox.modal {
    z-index: 100000010 !important;
}

/* Modo IFRAME (?iframe=true → body.iframe-mode): esconder o botão "Voltar a
   Listagem" (onclick=goBack()) — dentro do iframe/modal não faz sentido. Apanha
   todas as variantes do /contract/view (aview/pview/view-ce/view-co/view). */
.iframe-mode a[onclick*="goBack"] {
    display: none !important;
}

/* §11 — input-group legado (Ace) com .input-group-addon não dava para clicar/
   escrever no campo. O Vuexy (core.css) põe um `.input-group::before` decorativo
   ABSOLUTO a 100% (content:"") que normalmente é mandado para trás (z-index:-1)
   por uma regra `:has(.form-check-input)`. Os nossos input-groups antigos têm
   .input-group-addon + input (sem .form-check-input), por isso essa regra não
   bate e o ::before fica POR CIMA do input, intercetando todos os cliques —
   ex.: /user/create e /user/update, campos "Contacto Corporativo"/"Contacto
   Pessoal" (cellphone/phone). O pseudo é só fundo decorativo: nunca deve apanhar
   cliques. (Não afeta os input-groups Vuexy com switch, já a z-index:-1.) */
.input-group::before {
    pointer-events: none !important;
}

/* §12 — labels e botões legados (Ace) com cor de fundo INLINE perderam a cor
   branca do texto (o ace.css base punha color:#fff). Em fundo colorido o texto
   escuro fica ilegível. Restaurar branco quando há `background-color` inline:
   badges de estado (`.label` com style=background-color, ex.: "Razão GN -
   Desligado" vermelho) e botões coloridos (`.btn.waves-effect` com
   style=background-color, ex.: pacote "4P" laranja). Apanha todas as views.
   Não afeta os labels de cabeçalho do info-block (usam classes label-*, sem
   background-color inline). */
.label[style*="background-color"],
.btn.waves-effect[style*="background-color"] {
    color: #fff !important;
}