/* ==========================================================================
   LAYOUT MODERNO · 00 · TOKENS
   Neutros, semânticos, raio, espaço, sombra, tipografia, layout, movimento
   e camadas. Cores de TEMA ficam em 01-temas.css (único lugar com hex de tema).
   Tudo fica sob .lm: a classe só existe no <html> com a flag LayoutModerno.
   Contrato: PortalRh-Specs/docs/products/PortalRH/frontend/layout-moderno/README.md §6.1
   ========================================================================== */

.lm {
    /* Neutros */
    --lm-bg: #F4F5F7;
    --lm-surface: #FFFFFF;
    --lm-surface-2: #FAFBFC;
    --lm-surface-hover: #F1F3F5;
    --lm-border: #E3E6EA;
    --lm-border-strong: #8A93A0;
    --lm-text: #1F2430;
    --lm-text-muted: #5B6472;

    /* Semânticos: preenchimento / fundo suave / texto */
    --lm-success: #1E7F4A;
    --lm-success-soft: #E8F5EE;
    --lm-success-text: #17693D;
    --lm-danger: #C62828;
    --lm-danger-soft: #FDECEC;
    --lm-danger-text: #A61B1B;
    --lm-warning: #F2B01E;
    --lm-warning-soft: #FEF6E0;
    --lm-warning-text: #7A4F00;
    --lm-info: #1D6AAE;
    --lm-info-soft: #E8F1FA;
    --lm-info-text: #175A96;

    /* Fundo de modal e do drawer mobile */
    --lm-overlay-rgb: 31, 36, 48;

    /* Raio */
    --lm-radius-sm: 8px;
    --lm-radius-md: 12px;
    --lm-radius-lg: 20px;
    --lm-radius-pill: 999px;

    /* Espaço (base 4) */
    --lm-space-1: 4px;
    --lm-space-2: 8px;
    --lm-space-3: 12px;
    --lm-space-4: 16px;
    --lm-space-5: 20px;
    --lm-space-6: 24px;
    --lm-space-8: 32px;

    /* Sombra: só superfícies (card, modal, dropdown), nunca botão */
    --lm-shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --lm-shadow-overlay: 0 12px 32px rgba(16, 24, 40, .12);

    /* Tipografia: Plus Jakarta Sans, escolhida no experimento da T1 §4.14
       (ver 03-fontes.css). Se o arquivo da fonte não carregar, vale a pilha do sistema. */
    --lm-font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --lm-fs-xs: 12px;
    --lm-fs-sm: 13px;
    --lm-fs-md: 14px;
    --lm-fs-lg: 16px;
    --lm-fs-xl: 20px;
    --lm-fs-2xl: 28px;

    /* Controles (fonte dos campos: 16px no mobile, ver o @media abaixo) */
    --lm-control-h: 40px;
    --lm-control-h-sm: 32px;
    --lm-control-fs: 14px;
    --lm-control-fs-sm: 13px;

    /* Layout */
    --lm-topbar-h: 64px;
    --lm-sidebar-w: 248px;
    --lm-sidebar-w-sm: 72px;
    --lm-logo-area-w: 184px;
    --lm-gutter: 24px;

    /* Movimento */
    --lm-dur: 180ms;
    --lm-ease: cubic-bezier(.2, 0, .2, 1);

    /* Camadas: tudo abaixo do backdrop dos modais (BS3 1040, BS5 1050).
       A sidebar fica acima da topbar porque o logo mora dentro dela. */
    --lm-z-topbar: 1030;
    --lm-z-overlay: 1034;
    --lm-z-sidebar: 1035;
}

@media (max-width: 999px) {
    .lm {
        --lm-logo-area-w: 136px;
        --lm-gutter: 16px;
        /* Com o zoom liberado (T1-R11), o iOS dá zoom ao focar campo com fonte < 16px */
        --lm-control-fs: 16px;
        --lm-control-fs-sm: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lm {
        --lm-dur: 0ms;
    }
}

/* ==========================================================================
   LAYOUT MODERNO · 01 · TEMAS
   ÚNICO arquivo com hex de tema. Componentes usam só var(--lm-*).
   As classes TemaX vão para o <body> pelo Views/Shared/Breadcrumb.cshtml (JS).
   Roxo é o tema sem classe (padrão do custom.css).
   Identidade = cor que o custom.css já usa nos ícones do menu e no título.
   Quando o branco não atinge 4,5:1 sobre a identidade, o PREENCHIMENTO usa uma
   variação mais escura do mesmo matiz (decisão Q3). Contraste: README.md §6.2.
   ========================================================================== */

/* Roxo (padrão, sem classe) */
.lm body {
    --lm-primary: #69338B;
    --lm-primary-rgb: 105, 51, 139;
    --lm-primary-fill: #69338B;
    --lm-primary-fill-hover: #582B75;
    --lm-on-primary: #FFFFFF;
    --lm-primary-text: #69338B;
    --lm-primary-soft: #F0EBF3;
    --lm-primary-soft-2: #E4DAEA;

    /* Derivados: iguais para todos os temas (resolvem com o --lm-primary-rgb do tema) */
    --lm-focus-ring: rgba(var(--lm-primary-rgb), .45);
    --lm-primary-tint: rgba(var(--lm-primary-rgb), .08);
}

.lm body.TemaAzul {
    --lm-primary: #005BA8;
    --lm-primary-rgb: 0, 91, 168;
    --lm-primary-fill: #005BA8;
    --lm-primary-fill-hover: #004A89;
    --lm-on-primary: #FFFFFF;
    --lm-primary-text: #005BA8;
    --lm-primary-soft: #E6EFF6;
    --lm-primary-soft-2: #D1E1EF;
}

.lm body.TemaVerde {
    --lm-primary: #00AC32;
    --lm-primary-rgb: 0, 172, 50;
    --lm-primary-fill: #008828;
    --lm-primary-fill-hover: #006A1F;
    --lm-on-primary: #FFFFFF;
    --lm-primary-text: #008828;
    --lm-primary-soft: #E6F7EB;
    --lm-primary-soft-2: #D1F0DA;
}

.lm body.TemaVermelho {
    --lm-primary: #FF2800;
    --lm-primary-rgb: 255, 40, 0;
    --lm-primary-fill: #E62400;
    --lm-primary-fill-hover: #C71F00;
    --lm-on-primary: #FFFFFF;
    --lm-primary-text: #E62400;
    --lm-primary-soft: #FFEAE6;
    --lm-primary-soft-2: #FFD8D1;
}

.lm body.TemaAmarelo {
    --lm-primary: #EBC247;
    --lm-primary-rgb: 235, 194, 71;
    --lm-primary-fill: #EBC247;
    --lm-primary-fill-hover: #E8B92B;
    --lm-on-primary: #1F2430;
    --lm-primary-text: #8F6F10;
    --lm-primary-soft: #FDF9ED;
    --lm-primary-soft-2: #FBF4DE;
}

.lm body.TemaCinza {
    --lm-primary: #787878;
    --lm-primary-rgb: 120, 120, 120;
    --lm-primary-fill: #757575;
    --lm-primary-fill-hover: #666666;
    --lm-on-primary: #FFFFFF;
    --lm-primary-text: #757575;
    --lm-primary-soft: #F2F2F2;
    --lm-primary-soft-2: #E7E7E7;
}

.lm body.TemaLaranja {
    --lm-primary: #F16525;
    --lm-primary-rgb: 241, 101, 37;
    --lm-primary-fill: #CC490D;
    --lm-primary-fill-hover: #AF3F0B;
    --lm-on-primary: #FFFFFF;
    --lm-primary-text: #CC490D;
    --lm-primary-soft: #FEF0E9;
    --lm-primary-soft-2: #FCE3D8;
}

/* Telas sem o tema do cliente (login e públicas, erro, WebForms): acento
   neutro, porque o tema só é conhecido depois do login (decisão Q1). */
.lm.lm-publico body,
.lm.lm-erro body,
.lm.lm-webforms body {
    --lm-primary: #1F2430;
    --lm-primary-rgb: 31, 36, 48;
    --lm-primary-fill: #1F2430;
    --lm-primary-fill-hover: #111827;
    --lm-on-primary: #FFFFFF;
    --lm-primary-text: #1F2430;
    --lm-primary-soft: #F1F3F5;
    --lm-primary-soft-2: #E3E6EA;
}

/* ==========================================================================
   LAYOUT MODERNO · 02 · BASE
   Tipografia, cor de texto, links, foco e seleção.
   WebForms (Default.Master) fica fora da tipografia: o core.css aplica fonte,
   tamanho e cor em "*", e o ajuste visual dessas telas é da Onda 5 da T3.
   ========================================================================== */

.lm:not(.lm-webforms) body {
    font-family: var(--lm-font-sans);
    color: var(--lm-text);
    /* Só a cor: o login põe a imagem de fundo inline via JS (DivulgacoesLogin.js). */
    background-color: var(--lm-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Tamanho e entrelinha só nos shells com Bootstrap (o Gentelella usa 13px). */
.lm.lm-bs341 body,
.lm.lm-bs538 body {
    font-size: var(--lm-fs-md);
    line-height: 1.5;
}

/* Títulos e componentes que fixam a própria família (Gentelella: título do
   login; BS3: tooltip e popover) passam a usar a fonte da camada. */
.lm:not(.lm-webforms) :is(h1, h2, h3, h4, h5, h6),
.lm .tooltip,
.lm .popover {
    font-family: var(--lm-font-sans);
}

/* --------------------------------------------------------------------------
   Links
   :where() deixa a especificidade no mínimo (0-0-1): qualquer regra com classe
   (botões, abas, itens de dropdown, menu) continua mandando na própria cor.
   -------------------------------------------------------------------------- */
:where(.lm) a {
    color: var(--lm-primary-text);
}

/* O legado troca a cor do link no hover pela identidade do tema
   (".TemaX a:hover", custom.css, 0-2-1; no Amarelo fica 1,7:1 sobre branco).
   Só links sem classe, para não tocar em botões e componentes. */
.lm body a:not([class]):hover,
.lm body a:not([class]):focus {
    color: var(--lm-primary-text);
}

/* --------------------------------------------------------------------------
   Foco visível por outline (P7). Campos de formulário ficam para a T2, que
   troca o brilho do Bootstrap pelo mesmo anel. Modais e alvos de foco
   programático (tabindex="-1") ficam de fora para não contornar a tela toda.
   -------------------------------------------------------------------------- */
.lm :is(a, button, summary, [role="button"], [tabindex]:not([tabindex="-1"])):not(.modal):focus-visible {
    outline: 2px solid var(--lm-focus-ring);
    outline-offset: 2px;
}

.lm body ::selection {
    background-color: var(--lm-primary-soft-2);
    color: var(--lm-text);
}

/* Com o zoom liberado na viewport (T1-R11), o iOS dá zoom automático ao focar
   campos com fonte menor que 16px. */
@media (max-width: 999px) {
    .lm :is(.form-control, select, textarea, input[type="text"], input[type="password"], input[type="email"],
            input[type="tel"], input[type="number"], input[type="search"], input[type="date"]) {
        font-size: 16px;
    }
}

/* ==========================================================================
   LAYOUT MODERNO · 03 · FONTES (T1-R14, decisões Q4 e Q4-R)
   Plus Jakarta Sans, escolhida no experimento contra a Inter (2026-09-30).
   ÚNICO arquivo da camada com url() (exceção da D11): fica na raiz de Layout/,
   na mesma profundidade do bundle (~/Contents/CSS/Layout/Bundle...), então
   "../../fonts/" resolve para /Contents/fonts/ com e sem otimização.
   Os shells fazem o preload deste mesmo arquivo (mesma URL), com a flag.
   Arquivo: woff2 variável, subconjunto latino (pyftsubset), licença OFL 1.1
   (OFL.txt junto do arquivo). Sem itálico: o navegador sintetiza.
   Se o arquivo não carregar, vale a pilha do sistema (--lm-font-sans).
   ========================================================================== */

/* Plus Jakarta Sans (Tokotype, OFL 1.1) */
@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../../fonts/PlusJakartaSans/PlusJakartaSans-Variable.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

/* Números alinhados (horas, valores, datas) nas tabelas e nos valores de formulário. */
.lm .table,
.lm .lbl-content,
.lm .dataTables_wrapper,
.lm .dt-container {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   LAYOUT MODERNO · 10 · SHELL (geometria)
   Posição e tamanho de topbar, sidebar, conteúdo e rodapé nos três modos:
     - desktop (>= 1000px) com body.nav-md: sidebar completa, fixa;
     - desktop (>= 1000px) com body.nav-sm: sidebar compacta (só ícones);
     - mobile  (<= 999px): drawer. nav-md = fechado, nav-sm = aberto
       (mesma semântica do custom.js e do gesto de arrastar).
   O visual de cada região fica em 11 (topbar), 12 (sidebar) e 13 (conteúdo).
   Seletores começam em ".lm body .container.body" (0-3-1) para vencer o
   Gentelella (".nav-md .container.body .col-md-3.left_col" = 0-5-0) sem !important.
   ========================================================================== */

.lm body .container.body {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* --------------------------------------------------------------------------
   Topbar: largura total, fixa no topo
   -------------------------------------------------------------------------- */
.lm body .container.body .main_container > .top_nav {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: var(--lm-z-topbar);
    width: auto;
    height: var(--lm-topbar-h);
    margin: 0; /* anula o margin-left 230px/70px do Gentelella */
}

/* --------------------------------------------------------------------------
   Sidebar completa (nav-md): card flutuante fixo abaixo da topbar
   -------------------------------------------------------------------------- */
.lm body .container.body .col-md-3.left_col {
    position: fixed;
    top: calc(var(--lm-topbar-h) + var(--lm-space-4));
    bottom: var(--lm-space-4);
    left: var(--lm-space-4);
    z-index: var(--lm-z-sidebar);
    display: block;
    width: var(--lm-sidebar-w);
    min-height: 0;
    padding: 0;
    background: transparent;
}

/* --------------------------------------------------------------------------
   Conteúdo e rodapé: começam depois da sidebar (16px de respiro)
   -------------------------------------------------------------------------- */
.lm body .container.body .right_col {
    margin-left: calc(var(--lm-sidebar-w) + var(--lm-space-4) * 2);
    padding: calc(var(--lm-topbar-h) + var(--lm-gutter)) var(--lm-gutter) var(--lm-gutter) 0;
    background: transparent; /* anula o #E9E9EB: o fundo é o do body */
}

.lm body .container.body .main_container > footer {
    margin-left: calc(var(--lm-sidebar-w) + var(--lm-space-4) * 2);
}

/* --------------------------------------------------------------------------
   Sidebar compacta (nav-sm, desktop)
   Os flyouts dos subitens saem do card, então ele não pode rolar por dentro.
   Fica fixa como a completa quando o menu inteiro cabe na altura da tela; se
   não cabe, rola com a página (como no legado), para nenhum item ficar fora de
   alcance. Quem mede é o LayoutModerno.js, que põe lm-sidebar-compacta-cabe no
   <html>: o tamanho do menu muda com as permissões do usuário.
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
    .lm body.nav-sm .container.body .col-md-3.left_col {
        position: absolute;
        bottom: auto;
        width: var(--lm-sidebar-w-sm);
    }

    .lm.lm-sidebar-compacta-cabe body.nav-sm .container.body .col-md-3.left_col {
        position: fixed;
        bottom: var(--lm-space-4);
    }

    .lm body.nav-sm .container.body .right_col,
    .lm body.nav-sm .container.body .main_container > footer {
        margin-left: calc(var(--lm-sidebar-w-sm) + var(--lm-space-4) * 2);
    }
}

/* --------------------------------------------------------------------------
   Mobile e tablet: drawer abaixo da topbar (a topbar segue clicável)
   -------------------------------------------------------------------------- */
@media (max-width: 999px) {
    .lm body .container.body .col-md-3.left_col {
        top: calc(var(--lm-topbar-h) + var(--lm-space-2));
        bottom: var(--lm-space-2);
        left: calc(-1 * (var(--lm-sidebar-w) + var(--lm-space-4)));
        width: min(var(--lm-sidebar-w), calc(100vw - var(--lm-space-8)));
        visibility: hidden;
        /* left, e não transform: o logo é position:fixed dentro da sidebar e
           um transform no ancestral o faria andar junto com o drawer. */
        transition: left var(--lm-dur) var(--lm-ease), visibility var(--lm-dur);
    }

    .lm body.nav-sm .container.body .col-md-3.left_col {
        left: var(--lm-space-2);
        visibility: visible;
    }

    /* Página não rola por trás do drawer aberto */
    .lm body.nav-sm {
        overflow: hidden;
    }

    .lm body .container.body .right_col {
        margin-left: 0;
        /* vence: custom.css "@media (max-width: 999px) .right_col { padding: 10px !important }" */
        padding: calc(var(--lm-topbar-h) + var(--lm-gutter)) var(--lm-gutter) var(--lm-gutter) !important;
        /* Rede de segurança até a T2/T3 tratarem tabelas e larguras fixas: o conteúdo
           largo rola dentro da área de conteúdo em vez de alargar a página, o que
           levaria junto a topbar fixa (ela acompanha o viewport de layout). */
        overflow-x: auto;
    }

    .lm body .container.body .main_container > footer {
        margin-left: 0;
    }
}

/* ==========================================================================
   LAYOUT MODERNO · 11 · TOPBAR
   (≡) [logo] ........................................ (sino) (avatar Nome ⌄)
   O botão do menu fica no canto, alinhado com o card da sidebar; o logo mora
   na sidebar (DOM intacto) e é posicionado logo depois dele por 12-sidebar.css.
   Os seletores usam o id #menuSuperior: o id vence as regras do Gentelella e
   dos temas (".TemaX .top_nav .nav > li > a:hover" = 0-4-2) sem !important.
   O !important só aparece contra !important do legado (comentado).
   ========================================================================== */

.lm body .container.body .main_container > .top_nav {
    background-color: var(--lm-surface);
    border-bottom: 1px solid var(--lm-border);
    box-shadow: none;
}

.lm .top_nav .nav_menu {
    position: static;
    float: none;
    width: 100%;
    height: 100%;
    margin: 0;
    /* O botão do menu é o 1º item, a 16px da borda (a mesma do card da sidebar).
       O logo (fixo, 12-sidebar.css) ocupa o espaço depois dele: nada mais da
       topbar fica à esquerda (as ações vão para a direita com margin-left auto). */
    padding: 0 var(--lm-space-4);
    background: transparent;
    border: 0;
}

.lm .top_nav .nav_menu > nav {
    display: flex;
    align-items: center;
    gap: var(--lm-space-3);
    height: 100%;
}

.lm .top_nav .nav_menu a:hover,
.lm .top_nav .nav_menu a:focus {
    text-decoration: none; /* ".TemaX a:hover" sublinha; o fix.css já faz isso só no BS5 */
}

/* --------------------------------------------------------------------------
   Botão do menu (#menu_toggle)
   -------------------------------------------------------------------------- */
.lm .top_nav .nav.toggle {
    flex: none;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}

.lm .top_nav #menu_toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--lm-control-h); /* 40px: o logo se posiciona por esta medida */
    height: var(--lm-control-h);
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background-color: var(--lm-surface-2);
    color: var(--lm-text);
    cursor: pointer;
    transition: background-color var(--lm-dur) var(--lm-ease);
}

.lm .top_nav #menu_toggle:hover {
    background-color: var(--lm-surface-hover);
    color: var(--lm-text);
}

.lm .top_nav #menu_toggle i {
    font-size: 18px;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   Ações da direita (#menuSuperior): no DOM vem [usuário][sino]; row-reverse
   mostra [sino][usuário], como o BS3 fazia com float:right (mesma ideia do fix.css).
   -------------------------------------------------------------------------- */
/* "ul#menuSuperior.navbar-nav" (1-3-1) vence o fix.css do BS5
   (".top_nav ul#menuSuperior.navbar-nav { margin: 0 }", 1-2-1), que tiraria o
   margin-left:auto que empurra as ações para a direita. */
.lm .top_nav ul#menuSuperior.navbar-nav {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--lm-space-2);
    float: none;
    width: auto;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
}

/* Clearfix do ".nav" no BS3: dentro do flex os pseudo-elementos viram itens e somam gap. */
.lm .top_nav #menuSuperior::before,
.lm .top_nav #menuSuperior::after {
    content: none;
    display: none;
}

.lm .top_nav ul#menuSuperior.navbar-nav > li {
    position: relative;
    display: flex;
    align-items: center;
    float: none;
    width: auto;
    margin: 0;
}

/* <i tabindex="0" title="Notificações"> do Notificacoes.cshtml: continua no DOM
   (leitor de tela), mas sai do fluxo para não abrir espaço entre os botões. */
.lm .top_nav #menuSuperior > i {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Usuário: pílula com avatar de iniciais
   -------------------------------------------------------------------------- */
.lm .top_nav #menuSuperior > li > a.user-profile {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-2);
    height: 44px;
    margin: 0;
    padding: 4px var(--lm-space-3) 4px 4px;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-pill);
    background-color: var(--lm-surface-2);
    color: var(--lm-text) !important; /* vence: custom.css "a.user-profile" e ".nav.navbar-nav > li > a" (!important) */
    font-size: var(--lm-fs-md);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color var(--lm-dur) var(--lm-ease);
}

.lm .top_nav #menuSuperior > li > a.user-profile:not(:has(.lm-avatar)) {
    padding-left: var(--lm-space-3);
}

.lm .top_nav #menuSuperior > li > a.user-profile:hover,
.lm .top_nav #menuSuperior > li.open > a.user-profile,
.lm .top_nav #menuSuperior > li > a.user-profile.show {
    background-color: var(--lm-surface-hover);
}

.lm .top_nav #colaboradorNome {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lm .top_nav a.user-profile > .fa-angle-down {
    font-size: 16px;
    color: var(--lm-text-muted);
}

.lm .lm-avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--lm-primary-fill);
    color: var(--lm-on-primary);
    font-size: var(--lm-fs-xs);
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   Notificações: sino redondo + contador em pílula
   -------------------------------------------------------------------------- */
.lm .top_nav #menuSuperior > li#notification > a.info-number {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background-color: var(--lm-surface-2);
    color: var(--lm-text) !important; /* vence: custom.css ".nav.navbar-nav > li > a" (!important) */
    line-height: 1;
    transition: background-color var(--lm-dur) var(--lm-ease);
}

.lm .top_nav #menuSuperior > li#notification > a.info-number:hover,
.lm .top_nav #menuSuperior > li#notification.open > a.info-number,
.lm .top_nav #menuSuperior > li#notification > a.info-number.show {
    background-color: var(--lm-surface-hover);
}

.lm .top_nav #notification .fa-bell-o {
    font-size: 18px;
}

/* O display é controlado inline pelo notificacao.js (fadeIn/fadeOut): não mexer. */
.lm .top_nav #totalDeNotificacao {
    position: absolute;
    top: -3px;
    right: -5px;
    box-sizing: border-box;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid var(--lm-surface) !important; /* vence: custom.css ".bg-green" e ".TemaX .bg-green" (!important) */
    border-radius: var(--lm-radius-pill);
    background: var(--lm-primary-fill) !important; /* idem */
    color: var(--lm-on-primary);
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Dropdowns do topo (menu do usuário e lista de notificações)
   -------------------------------------------------------------------------- */
.lm .top_nav #menuSuperior .dropdown-menu {
    min-width: 220px;
    padding: var(--lm-space-1);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-md);
    background-color: var(--lm-surface);
    box-shadow: var(--lm-shadow-overlay);
    font-size: var(--lm-fs-sm);
}

.lm .top_nav .dropdown-usermenu > li > a {
    display: block;
    padding: 10px var(--lm-space-3);
    border-radius: var(--lm-radius-sm);
    color: var(--lm-text);
    font-size: var(--lm-fs-sm);
    line-height: 1.4;
    white-space: nowrap;
}

.lm .top_nav .dropdown-usermenu > li > a:hover,
.lm .top_nav .dropdown-usermenu > li > a:focus {
    background-color: var(--lm-primary-tint);
    color: var(--lm-text);
    text-decoration: none;
}

.lm .top_nav .dropdown-usermenu > li > a > .fa {
    margin-top: 2px;
    font-size: 14px;
    color: var(--lm-text-muted);
}

/* Lista de notificações: cada item vira um cartão leve */
.lm .top_nav #menuSuperior #menu1.msg_list {
    width: 360px;
    padding: var(--lm-space-2);
}

.lm .top_nav #menu1.msg_list li {
    width: 100% !important; /* vence: custom.css "ul.msg_list li { width: 96% !important }" */
    margin: 0 0 var(--lm-space-1);
    padding: var(--lm-space-2) var(--lm-space-3);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-md);
    background-color: var(--lm-surface);
}

.lm .top_nav #menu1.msg_list li.notificacaoNaoLida {
    border-color: var(--lm-primary-soft-2);
    background-color: var(--lm-primary-soft) !important; /* vence: custom.css ".notificacaoNaoLida" e ".TemaX .notificacaoNaoLida" (!important) */
}

.lm .top_nav #menu1 .notificacaoIcone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--lm-radius-sm);
    background-color: var(--lm-primary-fill);
    color: var(--lm-on-primary);
    font-size: 16px;
}

.lm .top_nav #menu1 .notificacaoNome div {
    font-size: var(--lm-fs-sm);
    font-weight: 600;
    color: var(--lm-text);
}

.lm .top_nav #menu1 .notificacaoTitulo div,
.lm .top_nav #menu1 [class^="notificacaoMensagem"] {
    font-size: var(--lm-fs-xs);
    color: var(--lm-text-muted);
}

.lm .top_nav #menu1 .notificacaoData {
    font-style: normal;
    font-weight: 400;
    color: var(--lm-text-muted);
}

.lm .top_nav #menu1 .notificacaoFechar {
    border: 0;
    color: var(--lm-text-muted);
}

.lm .top_nav #menu1 .notificacaoFechar:hover {
    color: var(--lm-danger-text);
}

/* --------------------------------------------------------------------------
   Telas pequenas
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .lm .top_nav #colaboradorNome {
        max-width: 96px;
    }
}

/* A lista de notificações (360px) ancorada no sino sairia pela esquerda da
   tela: vira painel fixo com a largura da tela. Em telas estreitas a pílula
   mostra só o avatar (o nome segue no DOM para leitor de tela). */
@media (max-width: 575px) {
    .lm .top_nav #menuSuperior > li > a.user-profile {
        gap: var(--lm-space-1);
        padding-right: var(--lm-space-2);
    }

    .lm .top_nav #menuSuperior > li > a.user-profile:has(.lm-avatar) #colaboradorNome {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .lm .top_nav #menuSuperior #menu1.msg_list {
        position: fixed !important; /* vence: posição inline do Popper (BS5) e ".navbar-nav .open .dropdown-menu" */
        top: calc(var(--lm-topbar-h) + var(--lm-space-1)) !important;
        right: var(--lm-space-2) !important;
        bottom: auto !important;
        left: var(--lm-space-2) !important;
        width: auto !important;
        margin: 0 !important;
        transform: none !important;
    }
}

/* ==========================================================================
   LAYOUT MODERNO · 12 · SIDEBAR
   Card, logo (posicionado na topbar), seções exclusivas (Meus Dados/Gestão),
   itens, modo compacto (nav-sm desktop) e drawer mobile. Geometria: 10-shell.css.
   O id #sidebar-menu vence as regras do Gentelella e dos temas
   (".TemaX .menu_section .side-menu li a i.fa" = 0-4-3) sem !important.
   Os grupos continuam abrindo pelo slideUp/slideDown do custom.js (inline):
   não animar altura por CSS nem mexer no display dos ul.child_menu.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.lm .col-md-3.left_col > .left_col.scroll-view {
    width: 100%;
    height: 100%;
    padding: var(--lm-space-3) var(--lm-space-2);
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-lg);
    background-color: var(--lm-surface);
    box-shadow: var(--lm-shadow-card);
    /* Rola sem barra: a barra, mesmo fina, tirava largura dos itens e
       desalinhava o card. Roda do mouse, toque e teclado continuam rolando. */
    scrollbar-width: none;
}

.lm .col-md-3.left_col > .left_col.scroll-view::-webkit-scrollbar {
    display: none; /* navegadores sem scrollbar-width */
}

/* <br> e clearfix soltos entre o logo e o menu */
.lm .left_col.scroll-view > br,
.lm .left_col.scroll-view > .clearfix {
    display: none;
}

/* --------------------------------------------------------------------------
   Logo: mesmo lugar do DOM, desenhado na esquerda da topbar.
   Nenhum ancestral pode ter transform/filter/contain (quebraria o fixed).
   -------------------------------------------------------------------------- */
.lm .left_col .navbar.nav_title {
    position: fixed;
    top: 0;
    /* Depois do botão do menu (11-topbar.css): 16px de borda + 40px do botão + 12px */
    left: calc(var(--lm-space-4) + var(--lm-control-h) + var(--lm-space-3));
    z-index: 1;
    display: flex;
    align-items: center;
    float: none;
    width: auto;
    max-width: var(--lm-logo-area-w);
    height: var(--lm-topbar-h);
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    /* Continua visível com o drawer mobile fechado (visibility: hidden no pai). */
    visibility: visible;
}

.lm .nav_title .site_title {
    display: flex;
    align-items: center;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    border-radius: var(--lm-radius-sm);
    line-height: normal;
}

.lm .nav_title .site_title img {
    display: block !important;   /* vence: custom.js LogoHide() (display:none inline no nav-sm) */
    position: static !important; /* vence: custom.js CentralizarLogoTipo() (.offset() grava position/top/left inline) */
    top: auto !important;
    left: auto !important;
    width: auto;
    height: auto;
    max-width: 150px;
    max-height: 36px;
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   Seções (Meus Dados, Gestão…)
   -------------------------------------------------------------------------- */
.lm #sidebar-menu.main_menu_side {
    margin: 0;
    padding: 0;
}

.lm #sidebar-menu .menu_section {
    margin: 0;
}

.lm #sidebar-menu .menu_section + .menu_section {
    margin-top: var(--lm-space-2);
    padding-top: var(--lm-space-2);
    border-top: 1px solid var(--lm-border);
}

.lm #sidebar-menu .menu_section > h3 {
    margin: 0 0 var(--lm-space-1);
    padding: var(--lm-space-2) var(--lm-space-3);
    font-size: var(--lm-fs-xs);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lm-text-muted);
}

.lm #sidebar-menu .menu_section > h3:has(> .lm-secao-toggle) {
    padding: 0;
}

.lm #sidebar-menu .menu_section > ul.side-menu {
    margin: 0;
}

/* Toggle da seção (só existe com duas ou mais seções, ver Menu.cshtml) */
.lm #sidebar-menu .lm-secao-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lm-space-2);
    width: 100%;
    margin: 0;
    padding: var(--lm-space-2) var(--lm-space-3);
    border: 0;
    border-radius: var(--lm-radius-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-transform: inherit;
    cursor: pointer;
    transition: background-color var(--lm-dur) var(--lm-ease), color var(--lm-dur) var(--lm-ease);
}

.lm #sidebar-menu .lm-secao-toggle::after {
    content: "\f078"; /* fa-chevron-down */
    font-family: FontAwesome;
    font-size: 10px;
    font-weight: normal;
    letter-spacing: 0;
    transition: transform var(--lm-dur) var(--lm-ease);
}

.lm #sidebar-menu .lm-secao-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.lm #sidebar-menu .lm-secao-toggle:hover {
    background-color: var(--lm-primary-tint);
    color: var(--lm-text);
}

/* Home fora de Meus Dados: continua no DOM porque o custom.js
   (AjustarLinkHomePage) marca o 1º li da 1ª seção como página atual. */
.lm #sidebar-menu .lm-item-home {
    display: none;
}

/* Seção que só tinha o Home (ObterMenuHome) */
.lm #sidebar-menu .menu_section:not(:has(> ul > li:not(.lm-item-home))) {
    display: none;
}

/* --------------------------------------------------------------------------
   Itens de 1º nível
   -------------------------------------------------------------------------- */
.lm #sidebar-menu .nav.side-menu > li {
    margin: 0 0 2px;
    border-right: 0;  /* barra lateral do legado (li.current-page / li.active) */
    background: none; /* gradiente do legado (.nav li.current-page) */
}

.lm #sidebar-menu .nav.side-menu > li > a {
    display: flex;
    align-items: center;
    gap: var(--lm-space-3);
    min-height: 40px;
    margin: 0;
    padding: var(--lm-space-2) var(--lm-space-3);
    border-radius: var(--lm-radius-md);
    background: none;
    color: var(--lm-text);
    font-size: var(--lm-fs-md);
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color var(--lm-dur) var(--lm-ease), color var(--lm-dur) var(--lm-ease);
}

.lm #sidebar-menu .nav.side-menu > li > a > i.fa {
    flex: none;
    width: 20px;
    margin: 0;
    font-size: 16px;
    text-align: center;
    color: var(--lm-primary);
}

/* Chevron dos grupos (o custom.css dá width 26px a todo ".main_menu .fa") */
.lm #sidebar-menu .nav.side-menu > li > a > span.fa {
    flex: none;
    float: none;
    width: 12px;
    min-width: 0;
    margin: 0 0 0 auto;
    text-align: center;
    font-size: 10px;
    color: var(--lm-text-muted);
    transition: transform var(--lm-dur) var(--lm-ease);
}

.lm #sidebar-menu .nav.side-menu > li.active > a > span.fa {
    transform: rotate(180deg);
}

.lm #sidebar-menu .nav.side-menu > li > a:hover,
.lm #sidebar-menu .nav.side-menu > li > a:focus-visible {
    background-color: var(--lm-primary-tint);
    color: var(--lm-text) !important; /* vence: custom.css ".nav.side-menu > li > a:hover" e ".TemaX ..." (!important) */
}

/* Grupo aberto ou com a página atual dentro (li.active / li.active-sm do custom.js) */
.lm #sidebar-menu .nav.side-menu > li.active > a,
.lm #sidebar-menu .nav.side-menu > li.active-sm > a {
    background: none; /* gradiente do legado */
    color: var(--lm-primary-text);
    font-weight: 600;
}

.lm #sidebar-menu .nav.side-menu > li.active > a:hover,
.lm #sidebar-menu .nav.side-menu > li.active-sm > a:hover {
    background-color: var(--lm-primary-tint);
    color: var(--lm-primary-text) !important; /* idem */
}

/* Página atual (link direto): preenchido na cor do tema, sem gradiente */
.lm #sidebar-menu .nav.side-menu > li.current-page > a,
.lm #sidebar-menu .nav.side-menu > li.current-page > a:hover {
    background-color: var(--lm-primary-fill);
    color: var(--lm-on-primary) !important; /* idem */
}

.lm #sidebar-menu .nav.side-menu > li.current-page > a:hover {
    background-color: var(--lm-primary-fill-hover);
}

.lm #sidebar-menu .nav.side-menu > li.current-page > a > i.fa {
    color: var(--lm-on-primary);
}

/* --------------------------------------------------------------------------
   Subitens: recuo com linha-guia alinhada ao centro do ícone do grupo
   (12px de padding + 10px de meio ícone = 22px)
   -------------------------------------------------------------------------- */
.lm #sidebar-menu ul.nav.child_menu {
    margin: 2px 0 var(--lm-space-2) 21px;
    padding: 0 0 0 var(--lm-space-3);
    border-left: 1px solid var(--lm-border);
}

.lm #sidebar-menu ul.nav.child_menu li {
    margin: 0 0 2px;
    padding: 0;
    border-right: 0;
    background: none; /* legado: fundo #c4beff no hover/active */
}

/* Marcadores e linhas do Gentelella */
.lm #sidebar-menu ul.nav.child_menu li::before,
.lm #sidebar-menu ul.nav.child_menu li::after {
    content: none;
    display: none;
}

.lm #sidebar-menu ul.nav.child_menu > li > a {
    display: block;
    padding: var(--lm-space-2) var(--lm-space-3);
    border-radius: var(--lm-radius-sm);
    color: var(--lm-text);
    font-size: var(--lm-fs-sm);
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    transition: background-color var(--lm-dur) var(--lm-ease), color var(--lm-dur) var(--lm-ease);
}

.lm #sidebar-menu ul.nav.child_menu > li > a:hover,
.lm #sidebar-menu ul.nav.child_menu > li > a:focus-visible {
    background-color: var(--lm-primary-tint);
    color: var(--lm-text);
    text-decoration: none;
}

.lm #sidebar-menu ul.nav.child_menu > li.current-page > a {
    background-color: var(--lm-primary-soft);
    color: var(--lm-primary-text);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Modo compacto (nav-sm, desktop): só ícones, flyout nos subitens
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
    .lm body.nav-sm .col-md-3.left_col > .left_col.scroll-view {
        height: auto;
        min-height: calc(100vh - var(--lm-topbar-h) - var(--lm-space-8));
        padding: var(--lm-space-3) var(--lm-space-1);
        overflow: visible; /* os flyouts saem do card */
    }

    /* Rótulo estático (uma seção só) some; o toggle vira ícone pelo tipo */
    .lm body.nav-sm #sidebar-menu .menu_section > h3:not(:has(> .lm-secao-toggle)) {
        display: none;
    }

    .lm body.nav-sm #sidebar-menu .lm-secao-toggle {
        justify-content: center;
        width: 44px;
        height: 40px;
        margin: 0 auto;
        padding: 0;
        font-size: 0;
        letter-spacing: 0;
    }

    .lm body.nav-sm #sidebar-menu .lm-secao-toggle::after {
        content: none;
    }

    .lm body.nav-sm #sidebar-menu .lm-secao-toggle::before {
        content: "\f0c9"; /* fa-bars: tipo desconhecido */
        font-family: FontAwesome;
        font-size: 16px;
        line-height: 1;
        color: var(--lm-text-muted);
    }

    .lm body.nav-sm #sidebar-menu [data-lm-tipo="Colaboracao"] .lm-secao-toggle::before {
        content: "\f007"; /* fa-user */
    }

    .lm body.nav-sm #sidebar-menu [data-lm-tipo="Gestao"] .lm-secao-toggle::before {
        content: "\f0b1"; /* fa-briefcase */
    }

    .lm body.nav-sm #sidebar-menu [data-lm-tipo="Administracao"] .lm-secao-toggle::before {
        content: "\f013"; /* fa-cog */
    }

    .lm body.nav-sm #sidebar-menu [data-lm-tipo="Solicitacao"] .lm-secao-toggle::before {
        content: "\f01c"; /* fa-inbox */
    }

    .lm body.nav-sm #sidebar-menu .lm-secao-toggle[aria-expanded="true"] {
        background-color: var(--lm-primary-soft);
    }

    .lm body.nav-sm #sidebar-menu .lm-secao-toggle[aria-expanded="true"]::before {
        color: var(--lm-primary-text);
    }

    /* Itens: quadrado de 44px com o ícone; o texto some (o title vira tooltip) */
    .lm body.nav-sm #sidebar-menu .nav.side-menu > li > a {
        justify-content: center;
        width: 44px;
        height: 44px;
        min-height: 44px;
        margin: 0 auto;
        padding: 0;
        gap: 0;
        font-size: 0;
    }

    .lm body.nav-sm #sidebar-menu .nav.side-menu > li > a > i.fa {
        width: auto !important;     /* vence: custom.css ".nav-sm .nav.side-menu li a i" (!important) */
        margin: 0 !important;
        font-size: 18px !important;
        /* O <i> dos grupos tem title="Menu com itens": sem eventos no ícone,
           o tooltip mostrado é o title do link (nome do grupo). */
        pointer-events: none;
    }

    .lm body.nav-sm #sidebar-menu .nav.side-menu > li.active > a,
    .lm body.nav-sm #sidebar-menu .nav.side-menu > li.active-sm > a {
        background-color: var(--lm-primary-soft);
    }

    /* Flyout dos subitens (posição absolute do legado, relativa ao li) */
    .lm body.nav-sm #sidebar-menu ul.nav.child_menu {
        top: 0;
        left: calc(100% + var(--lm-space-2));
        width: 224px;
        margin: 0;
        padding: var(--lm-space-2);
        border: 1px solid var(--lm-border) !important; /* vence: ".TemaX.nav-sm ul.nav.child_menu { border-top … !important }" */
        border-radius: var(--lm-radius-md);
        background-color: var(--lm-surface);
        box-shadow: var(--lm-shadow-overlay);
    }

    /* Nome do grupo no topo do flyout (data-lm-titulo, ver Menu.cshtml) */
    .lm body.nav-sm #sidebar-menu ul.nav.child_menu[data-lm-titulo]::before {
        content: attr(data-lm-titulo);
        display: block;
        padding: var(--lm-space-1) var(--lm-space-3) var(--lm-space-2);
        font-size: var(--lm-fs-xs);
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--lm-text-muted);
    }

    .lm body.nav-sm #sidebar-menu ul.nav.child_menu > li > a {
        padding: var(--lm-space-2) var(--lm-space-3);
        font-size: var(--lm-fs-sm);
        text-align: left !important; /* vence: custom.css ".nav-sm .nav.side-menu li a { text-align: center !important }" */
    }
}

/* --------------------------------------------------------------------------
   Drawer mobile (nav-sm = aberto): mesma aparência da sidebar completa.
   Neutraliza as regras compactas do legado para .nav-sm.
   -------------------------------------------------------------------------- */
@media (max-width: 999px) {
    .lm .nav_title .site_title img {
        max-width: 104px;
        max-height: 32px;
    }

    .lm body.nav-sm #sidebar-menu .nav.side-menu li a {
        text-align: left !important; /* vence: custom.css ".nav-sm .nav.side-menu li a" (!important) */
    }

    .lm body.nav-sm #sidebar-menu .nav.side-menu > li > a > i.fa {
        width: 20px !important;     /* vence: custom.css ".nav-sm .nav.side-menu li a i" (!important) */
        margin: 0 !important;
        font-size: 16px !important;
    }

    /* O legado esconde o chevron no nav-sm (".nav-sm span.fa") */
    .lm body.nav-sm #sidebar-menu .nav.side-menu > li > a > span.fa {
        display: inline-block;
    }

    /* Subitens inline (o legado abre em flyout absolute no nav-sm) */
    .lm body.nav-sm #sidebar-menu ul.nav.child_menu {
        position: static;
        top: auto;
        left: auto;
        z-index: auto;
        width: auto;
        border: 0 !important; /* vence: ".TemaX.nav-sm ul.nav.child_menu { border-top … !important }" */
        border-left: 1px solid var(--lm-border) !important;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
}

/* --------------------------------------------------------------------------
   Fundo do drawer mobile: abaixo da topbar, que continua clicável
   -------------------------------------------------------------------------- */
.lm .lm-sidebar-overlay {
    position: fixed;
    top: var(--lm-topbar-h);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--lm-z-overlay);
    background-color: rgba(var(--lm-overlay-rgb), .35);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--lm-dur) var(--lm-ease), visibility var(--lm-dur);
}

@media (max-width: 999px) {
    .lm body.nav-sm .lm-sidebar-overlay {
        opacity: 1;
        visibility: visible;
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .lm .lm-sidebar-overlay {
        background-color: rgba(var(--lm-overlay-rgb), .55);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .lm .lm-sidebar-overlay {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: rgba(var(--lm-overlay-rgb), .55);
    }
}

/* ==========================================================================
   LAYOUT MODERNO · 13 · CONTEÚDO
   Título da página (Breadcrumb.cshtml), rodapé e botão "voltar ao topo".
   Componentes dentro do conteúdo (x_panel, botões, formulários…) são da T2.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Título da página
   -------------------------------------------------------------------------- */
.lm .right_col .page-title {
    display: flex;
    align-items: center;
    gap: var(--lm-space-3);
    width: 100%;
    height: auto; /* legado: height 65px */
    min-height: 0;
    margin: 0 0 var(--lm-space-5);
    padding: 0;
}

.lm .right_col .page-title .title_left,
.lm .right_col .page-title .title_right {
    float: none;
}

.lm .right_col .page-title .title_right {
    margin-left: auto;
}

.lm .right_col .page-title .title_left h3 {
    margin: 0;
    font-size: var(--lm-fs-2xl);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--lm-primary-text) !important; /* vence: custom.css ".title_left h3" e ".TemaX .title_left h3" (!important) */
}

.lm .right_col .page-title .title_left h3 > i {
    color: inherit;
}

@media (max-width: 575px) {
    .lm .right_col .page-title .title_left h3 {
        font-size: 22px;
    }
}

/* --------------------------------------------------------------------------
   Rodapé discreto (geometria em 10-shell.css)
   -------------------------------------------------------------------------- */
.lm body .container.body .main_container > footer {
    padding: var(--lm-space-2) var(--lm-gutter) var(--lm-gutter) 0;
    border: 0;
    background: transparent;
    color: var(--lm-text-muted);
    font-size: var(--lm-fs-xs);
}

.lm body .container.body .main_container > footer a {
    color: var(--lm-text-muted);
    text-decoration: underline;
}

@media (max-width: 999px) {
    .lm body .container.body .main_container > footer {
        padding: var(--lm-space-2) var(--lm-gutter) var(--lm-gutter);
    }
}

/* --------------------------------------------------------------------------
   Voltar ao topo: botão redondo sem sombra (o display é controlado pelo JS)
   -------------------------------------------------------------------------- */
.lm .voltarAoTopo {
    right: var(--lm-space-6);
    bottom: var(--lm-space-6);
    width: auto;
}

.lm #btnVoltarAoTopo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 2px solid var(--lm-surface) !important; /* vence: .btn-primary da camada (Componentes/20-botoes.css) */
    border-radius: 50%;
    background-color: var(--lm-primary-fill);
    color: var(--lm-on-primary);
    font-size: 18px;
    opacity: 1;
    box-shadow: none;
}

.lm #btnVoltarAoTopo:hover,
.lm #btnVoltarAoTopo:focus {
    background-color: var(--lm-primary-fill-hover);
    color: var(--lm-on-primary);
}

.lm #btnVoltarAoTopo i {
    color: inherit;
}

/* ==========================================================================
   LAYOUT MODERNO · 14 · TELAS PÚBLICAS
   Login, 2FA, recuperar senha, cadastrar/confirmar e-mail e recurso negado
   (_Login, _TelaBase, _CadastarEmail, _ConfirmarEmail).
   Sem o tema do cliente (decisão Q1): acento neutro definido em 01-temas.css.
   Preserva o que é do cliente: a imagem de fundo (inline, DivulgacoesLogin.js)
   e a posição da caixa (#BoxLogin troca de classe: centro / sup-direito / sup-esquerdo).
   Campos, botões e modais do login recebem o padrão da T2.
   ========================================================================== */

.lm.lm-publico :is(.login_wrapper, .login_wrapper-sup-direito, .login_wrapper-sup-esquerdo) {
    max-width: 400px;
}

/* Card: vidro leve no lugar da sombra forte do legado (0 8px 32px rgba(31,38,135,.87)) */
.lm.lm-publico .login_content {
    min-width: 0;
    padding: var(--lm-space-8) var(--lm-space-6) var(--lm-space-6);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: var(--lm-radius-lg);
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--lm-shadow-overlay);
}

.lm.lm-publico .login_content h1 {
    margin: 0 0 var(--lm-space-6);
    font: 700 var(--lm-fs-2xl)/1.2 var(--lm-font-sans);
    letter-spacing: -.01em;
    color: var(--lm-text);
}

/* Linhas com gradiente ao lado do título */
.lm.lm-publico .login_content h1::before,
.lm.lm-publico .login_content h1::after {
    content: none;
}

.lm.lm-publico .login_content .separator {
    border-top-color: var(--lm-border);
}

@media (max-width: 575px) {
    .lm.lm-publico :is(.login_wrapper, .login_wrapper-sup-direito, .login_wrapper-sup-esquerdo) {
        max-width: none;
        margin: var(--lm-space-6) var(--lm-space-4) 0;
    }

    .lm.lm-publico .login_content {
        padding: var(--lm-space-6) var(--lm-space-4) var(--lm-space-4);
    }
}

/* ==========================================================================
   LAYOUT MODERNO · 15 · ERRO E WEBFORMS
   .lm-erro: Error.cshtml e AvisoSemDados.cshtml (Bootstrap 3 via bundle
   CustomError) e AcessoNaoAutorizado.cshtml (sem Bootstrap, todo inline).
   .lm-webforms: Default.Master (e o ErrorPage.aspx, que usa o master).
   O core.css das WebForms aplica fonte, tamanho e cor em "*": o ajuste visual
   dessas telas é da Onda 5 da T3. Aqui elas só ganham o marcador e os tokens.
   ========================================================================== */

.lm.lm-erro .jumbotron {
    max-width: 880px;
    margin: var(--lm-space-8) auto !important; /* vence: style="margin:20px;" inline */
    padding: var(--lm-space-8);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-lg);
    background-color: var(--lm-surface);
    box-shadow: var(--lm-shadow-card);
}

.lm.lm-erro .jumbotron h1 {
    margin-top: 0;
    font-size: 40px;
    font-weight: 700;
    color: var(--lm-text);
}

.lm.lm-erro .jumbotron h2 {
    font-size: var(--lm-fs-xl);
    font-weight: 600;
    color: var(--lm-text);
}

.lm.lm-erro .jumbotron p {
    font-size: var(--lm-fs-lg);
    color: var(--lm-text-muted);
}

@media (max-width: 575px) {
    .lm.lm-erro .jumbotron {
        margin: var(--lm-space-4) !important; /* idem */
        padding: var(--lm-space-6) var(--lm-space-4);
    }
}

/* ==========================================================================
   LAYOUT MODERNO · COMPONENTES · 20 · BOTÕES (T2-R01)
   Pílula, SEM SOMBRA em nenhum estado, foco por outline (02-base).
   Exceção documentada (T2 §4): cores e box-shadow com !important, porque o
   custom.css redefine botão por tema com até 4 níveis de especificidade
   (".TemaAzul input[type='button'].btn-primary:focus", custom.css 6002 e
   6639–8749). Vale para o arquivo todo, sem o comentário "vence:" por linha.
   Margens e larguras continuam as do legado (grade das telas).
   ========================================================================== */

.lm .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--lm-space-2);
    min-height: var(--lm-control-h);
    /* 16px laterais: há botões com largura fixa inline (ex.: "Marcar", 95px) */
    padding: 6px var(--lm-space-4);
    border: 1px solid transparent;
    border-radius: var(--lm-radius-pill);
    font-size: var(--lm-fs-md);
    font-weight: 600;
    line-height: 1.2;
    text-shadow: none;
    vertical-align: middle;
    transition: background-color var(--lm-dur) var(--lm-ease), border-color var(--lm-dur) var(--lm-ease), color var(--lm-dur) var(--lm-ease);
}

/* Sem sombra: BS3 (:active inset), BS5 (--bs-btn-focus/active-shadow), Gentelella (btn-app :focus) */
.lm .btn,
.lm .btn:hover,
.lm .btn:focus,
.lm .btn:focus-visible,
.lm .btn:active,
.lm .btn.active,
.lm .open > .dropdown-toggle.btn,
.lm .show > .btn.dropdown-toggle,
.lm .btn-check + .btn {
    box-shadow: none !important;
    --bs-btn-focus-box-shadow: none;
    --bs-btn-active-shadow: none;
}

/* input[type=button].btn fica fora do seletor de foco do 02-base */
.lm .btn:focus-visible {
    outline: 2px solid var(--lm-focus-ring);
    outline-offset: 2px;
}

.lm .btn:disabled,
.lm .btn.disabled,
.lm .btn[disabled],
.lm fieldset[disabled] .btn,
.lm fieldset:disabled .btn {
    opacity: .5;
    cursor: not-allowed;
}

/* Tamanhos */
.lm .btn-sm,
.lm .btn-group-sm > .btn {
    min-height: var(--lm-control-h-sm);
    padding: 4px var(--lm-space-3);
    font-size: var(--lm-fs-sm);
}

.lm .btn-xs,
.lm .btn-group-xs > .btn {
    min-height: 28px;
    padding: 2px 10px;
    font-size: var(--lm-fs-xs);
}

.lm .btn-lg,
.lm .btn-group-lg > .btn {
    min-height: 48px;
    padding: 8px var(--lm-space-6);
    font-size: var(--lm-fs-lg);
}

/* --------------------------------------------------------------------------
   Variantes
   -------------------------------------------------------------------------- */

/* Primário: cor do tema (decisão Q3) */
.lm .btn-primary {
    border-color: var(--lm-primary-fill) !important;
    background-color: var(--lm-primary-fill) !important;
    color: var(--lm-on-primary) !important;
}

.lm .btn-primary:hover,
.lm .btn-primary:active,
.lm .btn-primary.active,
.lm .open > .dropdown-toggle.btn-primary,
.lm .show > .btn-primary.dropdown-toggle {
    border-color: var(--lm-primary-fill-hover) !important;
    background-color: var(--lm-primary-fill-hover) !important;
    color: var(--lm-on-primary) !important;
}

/* Secundário claro (BS3 .btn-default / BS5 .btn-secondary e .btn-light): contorno */
.lm .btn-default,
.lm .btn-secondary,
.lm .btn-light {
    border-color: var(--lm-border-strong) !important;
    background-color: var(--lm-surface) !important;
    color: var(--lm-text) !important;
}

.lm .btn-default:hover,
.lm .btn-default:active,
.lm .btn-default.active,
.lm .btn-secondary:hover,
.lm .btn-secondary:active,
.lm .btn-light:hover,
.lm .btn-light:active,
.lm .open > .dropdown-toggle.btn-default {
    background-color: var(--lm-surface-hover) !important;
    color: var(--lm-text) !important;
}

/* Perigo. .btn-Vermelho vem junto com .btn-primary ("btn btn-primary btn-Acao
   btn-Vermelho"): o seletor .btn.btn-Vermelho (0-3-0) vence o primário (0-2-0).
   As cores são tokens porque mudam com o tema (logo abaixo). */
.lm body {
    --lm-btn-perigo-borda: var(--lm-danger);
    --lm-btn-perigo-fundo: var(--lm-danger);
    --lm-btn-perigo-texto: #FFFFFF;
    --lm-btn-perigo-borda-hover: color-mix(in srgb, var(--lm-danger) 86%, #000000);
    --lm-btn-perigo-fundo-hover: color-mix(in srgb, var(--lm-danger) 86%, #000000);
    --lm-btn-perigo-texto-hover: #FFFFFF;
}

/* Vermelho e Laranja: o primário do tema já é vermelho/laranja (01-temas.css)
   e o perigo sólido ficaria igual ao "Salvar" do lado (luminância ≈ 1,2:1).
   Nesses temas o perigo é contorno: fundo da superfície, borda e texto
   vermelhos, fundo vermelho claro no hover. */
.lm body.TemaVermelho,
.lm body.TemaLaranja {
    --lm-btn-perigo-fundo: var(--lm-surface);
    --lm-btn-perigo-texto: var(--lm-danger-text);
    --lm-btn-perigo-borda-hover: var(--lm-danger);
    --lm-btn-perigo-fundo-hover: var(--lm-danger-soft);
    --lm-btn-perigo-texto-hover: var(--lm-danger-text);
}

.lm .btn-danger,
.lm .btn.btn-Vermelho {
    border-color: var(--lm-btn-perigo-borda) !important;
    background-color: var(--lm-btn-perigo-fundo) !important;
    color: var(--lm-btn-perigo-texto) !important;
}

.lm .btn-danger:hover,
.lm .btn-danger:active,
.lm .btn.btn-Vermelho:hover,
.lm .btn.btn-Vermelho:active {
    border-color: var(--lm-btn-perigo-borda-hover) !important;
    background-color: var(--lm-btn-perigo-fundo-hover) !important;
    color: var(--lm-btn-perigo-texto-hover) !important;
}

.lm .btn-success {
    border-color: var(--lm-success) !important;
    background-color: var(--lm-success) !important;
    color: #FFFFFF !important;
}

.lm .btn-success:hover,
.lm .btn-success:active {
    border-color: color-mix(in srgb, var(--lm-success) 86%, #000000) !important;
    background-color: color-mix(in srgb, var(--lm-success) 86%, #000000) !important;
}

.lm .btn-info {
    border-color: var(--lm-info) !important;
    background-color: var(--lm-info) !important;
    color: #FFFFFF !important;
}

.lm .btn-info:hover,
.lm .btn-info:active {
    border-color: color-mix(in srgb, var(--lm-info) 86%, #000000) !important;
    background-color: color-mix(in srgb, var(--lm-info) 86%, #000000) !important;
}

.lm .btn-warning {
    border-color: var(--lm-warning) !important;
    background-color: var(--lm-warning) !important;
    color: var(--lm-text) !important;
}

.lm .btn-warning:hover,
.lm .btn-warning:active {
    border-color: color-mix(in srgb, var(--lm-warning) 88%, #000000) !important;
    background-color: color-mix(in srgb, var(--lm-warning) 88%, #000000) !important;
}

.lm .btn-link {
    border-color: transparent !important;
    background-color: transparent !important;
    color: var(--lm-primary-text) !important;
}

.lm .btn-link:hover {
    text-decoration: underline;
}

/* Contorno (BS5) */
.lm .btn-outline-primary {
    border-color: var(--lm-primary-fill) !important;
    background-color: transparent !important;
    color: var(--lm-primary-text) !important;
}

.lm .btn-outline-primary:hover,
.lm .btn-outline-primary:active {
    background-color: var(--lm-primary-soft) !important;
}

.lm .btn-outline-secondary {
    border-color: var(--lm-border-strong) !important;
    background-color: transparent !important;
    color: var(--lm-text) !important;
}

.lm .btn-outline-secondary:hover {
    background-color: var(--lm-surface-hover) !important;
}

.lm .btn-outline-danger {
    border-color: var(--lm-danger) !important;
    background-color: transparent !important;
    color: var(--lm-danger-text) !important;
}

.lm .btn-outline-danger:hover {
    background-color: var(--lm-danger-soft) !important;
}

/* Estado "desligado" (não é desabilitado: continua clicável) */
.lm .btn-inativo,
.lm .btn-inativo:hover,
.lm .btn-inativo:focus,
.lm .btn-inativo:active,
.lm .btn-inativo.active {
    border-color: var(--lm-border) !important;
    background-color: var(--lm-surface-hover) !important;
    color: var(--lm-text-muted) !important;
}

/* --------------------------------------------------------------------------
   Papel pela ação (T3, decisão de 2026-09-30)
   Nas telas quase todo botão é .btn-primary, inclusive Voltar, Cancelar,
   Excluir e Anular. Aqui a cor vem do que o botão faz:
   - voltar, cancelar, fechar e sair: secundário (contorno, igual ao .btn-default);
   - excluir, remover, anular, reprovar e desmarcar: perigo (tokens acima).
   Os seletores usam atributos que as views e os JS já têm (levantamento da
   T3 §5.1, sem falso positivo). Sem mexer nas views (D-T3-5): os 25 botões
   que só têm o texto (ActionLinks "Voltar"/"Cancelar" e 2 "Fechar") ficam
   como estão.
   :where() deixa a especificidade igual à das variantes (0-2-0, e 0-3-0 no
   hover): estas regras vencem por virem depois, e o perigo vem por último.
   Ficam de fora o que já é vermelho, o .btn-link e o .btn-desconfirmar (o
   verde dele é o estado "confirmado" da marcação).
   -------------------------------------------------------------------------- */
.lm .btn:where(
    [value="Voltar"], [title="Voltar"], [id^="btnVoltar"]:not(#btnVoltarAoTopo), #btnCancelarPreAdmissao,
    [onclick*="history.go(-1)"], [href*="history.go(-1)"], [id^="Retornar"],
    [value="Cancelar"], [title="Cancelar"],
    #CancelarAlteracaoContratual, #CancelarAumentoDoQuadro, #CancelarSubstituicaoDeFuncionario,
    [id^="btnFechar"], #btnNotificacaoFechar, #btCloseModalAssinantes, .btn-fechar, [onclick^="fecharModal"],
    [href$="/Account/LogOff"]):where(:not(.btn-danger, .btn-Vermelho, .btn-link)) {
    border-color: var(--lm-border-strong) !important;
    background-color: var(--lm-surface) !important;
    color: var(--lm-text) !important;
}

.lm .btn:where(
    [value="Voltar"], [title="Voltar"], [id^="btnVoltar"]:not(#btnVoltarAoTopo), #btnCancelarPreAdmissao,
    [onclick*="history.go(-1)"], [href*="history.go(-1)"], [id^="Retornar"],
    [value="Cancelar"], [title="Cancelar"],
    #CancelarAlteracaoContratual, #CancelarAumentoDoQuadro, #CancelarSubstituicaoDeFuncionario,
    [id^="btnFechar"], #btnNotificacaoFechar, #btCloseModalAssinantes, .btn-fechar, [onclick^="fecharModal"],
    [href$="/Account/LogOff"]):where(:not(.btn-danger, .btn-Vermelho, .btn-link)):is(:hover, :active) {
    border-color: var(--lm-border-strong) !important;
    background-color: var(--lm-surface-hover) !important;
    color: var(--lm-text) !important;
}

.lm .btn:where(
    [value="Excluir"], [id*="Excluir"], [onclick*="Excluir"], [title^="Excluir"], [title^="Deletar"],
    [onclick*="Remover"], [data-name^="btnRemover"], [title^="Desmarcar"], #btnDesmarcarResponsavel,
    #ReprovarSolicitacao, #AnularSolicitacao, #CancelarSolicitacao, [onclick*="AlteracaoesPessoaisVisualizar.Cancelar"],
    #btnCancelarAtestado, #btnCancelarInscricao, #btnCancelarTokenAPI, [onclick*="CancelarRefeicao"],
    #btnLimparCamposEmailModerno):where(:not(.btn-desconfirmar, .btn-link)) {
    border-color: var(--lm-btn-perigo-borda) !important;
    background-color: var(--lm-btn-perigo-fundo) !important;
    color: var(--lm-btn-perigo-texto) !important;
}

.lm .btn:where(
    [value="Excluir"], [id*="Excluir"], [onclick*="Excluir"], [title^="Excluir"], [title^="Deletar"],
    [onclick*="Remover"], [data-name^="btnRemover"], [title^="Desmarcar"], #btnDesmarcarResponsavel,
    #ReprovarSolicitacao, #AnularSolicitacao, #CancelarSolicitacao, [onclick*="AlteracaoesPessoaisVisualizar.Cancelar"],
    #btnCancelarAtestado, #btnCancelarInscricao, #btnCancelarTokenAPI, [onclick*="CancelarRefeicao"],
    #btnLimparCamposEmailModerno):where(:not(.btn-desconfirmar, .btn-link)):is(:hover, :active) {
    border-color: var(--lm-btn-perigo-borda-hover) !important;
    background-color: var(--lm-btn-perigo-fundo-hover) !important;
    color: var(--lm-btn-perigo-texto-hover) !important;
}

/* --------------------------------------------------------------------------
   Botões próprios do Portal
   -------------------------------------------------------------------------- */

/* Ação da linha da tabela (quase sempre montado em JS, "…" ou ícone):
   o legado já fixa 32×32 (custom.css:43), aqui só vira círculo.
   (.btn-Acao sozinho aparece também em botão de texto: não entra aqui.) */
.lm .btn.btn-table {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    gap: 0;
    border-radius: 50%;
}

.lm .btn.btn-table > i,
.lm .btn.btn-table > .fa {
    width: auto;
    height: auto;
    margin: 0 !important; /* vence: style="margin-top: 8px" inline em ícones de alguns JS */
    font-size: 14px;
    line-height: 1;
}

/* Gancho para botões só de ícone sem classe própria (T3) */
.lm .btn.lm-btn-icone {
    width: var(--lm-control-h);
    min-width: var(--lm-control-h);
    padding: 0;
    gap: 0;
    border-radius: 50%;
}

/* Atalhos grandes do Gentelella (btn-app): card sem sombra */
.lm .btn.btn-app {
    flex-direction: column;
    gap: 6px;
    min-width: 88px;
    height: auto;
    min-height: 72px;
    padding: var(--lm-space-3) var(--lm-space-2);
    border: 1px solid var(--lm-border) !important;
    border-radius: var(--lm-radius-md);
    background-color: var(--lm-surface) !important;
    color: var(--lm-text) !important;
    font-size: var(--lm-fs-xs);
    font-weight: 600;
}

.lm .btn.btn-app:hover,
.lm .btn.btn-app:focus {
    border-color: var(--lm-primary) !important; /* vence: custom.css ".btn.btn-app:hover" (!important) */
    background-color: var(--lm-primary-tint) !important;
    color: var(--lm-text) !important;
}

.lm .btn.btn-app > .fa {
    font-size: 20px;
    color: var(--lm-primary);
}

.lm .btn.btn-app > .badge {
    border-radius: var(--lm-radius-pill);
    background-color: var(--lm-primary-fill);
    color: var(--lm-on-primary);
}

/* Versão pequena: mantém as medidas do legado, só o visual */
.lm .btn.btn-app-pequeno {
    border: 1px solid var(--lm-border) !important;
    border-radius: var(--lm-radius-sm);
    background-color: var(--lm-surface) !important;
    color: var(--lm-text) !important;
}

.lm .btn.btn-app-pequeno:hover {
    border-color: var(--lm-primary) !important;
    background-color: var(--lm-primary-tint) !important;
}

/* --------------------------------------------------------------------------
   Fechar (BS3 .close / BS5 .btn-close): botão redondo de 32px
   O "×" das views é texto, e o glifo fica na linha de base da fonte, 3–4px
   abaixo do centro do círculo. O texto some (font-size 0) e o "x" é
   desenhado por máscara SVG (o mesmo desenho do .btn-close do BS5), sempre
   no centro e na cor do texto. No BS5 o .btn-close já é SVG: ver
   Compat/bs538.css.
   -------------------------------------------------------------------------- */
.lm .close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    background-color: var(--lm-surface-2);
    color: var(--lm-text-muted);
    font-size: 0;
    line-height: 1;
    text-shadow: none;
    opacity: 1;
}

/* O "×" em <span> e o ícone <i class="fa fa-close"> de alguns modais
   (coletivas de Solicitações, Plano de Ação, Avaliação de Eficácia) */
.lm .close > span,
.lm .close > i {
    display: none;
}

.lm .close::before {
    content: "";
    flex: none;
    width: 11px;
    height: 11px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e") center / contain no-repeat;
}

.lm .close:hover,
.lm .close:focus {
    background-color: var(--lm-surface-hover);
    color: var(--lm-text);
    opacity: 1;
}

/* Os modais montados em JS (notificacao.js) usam "close btn-close" nas duas
   versões: a opacidade do ícone do BS5 fica em Compat/bs538.css. */
.lm .btn-close {
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    background-color: var(--lm-surface-2);
    background-size: 11px;
    box-shadow: none !important;
}

.lm .btn-close:hover,
.lm .btn-close:focus {
    background-color: var(--lm-surface-hover);
}

/* ==========================================================================
   LAYOUT MODERNO · COMPONENTES · 21 · PAINÉIS, ACCORDIONS E SUBTÍTULOS (T2-R02, R09)
   x_panel vira card (raio 20px, borda leve, sombra suave no lugar da sombra
   dura do legado). O layout interno continua o do Gentelella: o x_title segue
   com float (título à esquerda, toolbox à direita) porque várias telas põem
   conteúdo extra dentro dele e um flex reorganizaria esse conteúdo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   x_panel (Gentelella)
   -------------------------------------------------------------------------- */
.lm .x_panel {
    margin-bottom: var(--lm-space-5);
    padding: var(--lm-space-5) var(--lm-space-6);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-lg);
    background-color: var(--lm-surface);
    box-shadow: var(--lm-shadow-card); /* legado: 3px 3px 3px #ccc */
}

@media (max-width: 575px) {
    .lm .x_panel {
        padding: var(--lm-space-4);
    }
}

/* Título sem a borda colorida do tema (".TemaX .x_title") */
.lm .x_title {
    margin: 0 0 var(--lm-space-4);
    padding: 0;
    border-bottom: 0;
}

.lm .x_title h2 {
    margin: 4px 0;
    font-size: var(--lm-fs-lg);
    font-weight: 700;
    line-height: 1.5;
    color: var(--lm-text); /* legível; nunca apagado (erro do anexo) nem na cor do tema */
}

/* Celular: o custom.css fixa o título em 200px com reticências no ≤ 430px;
   aqui ele quebra linha e divide a linha com o toolbox (até 2 botões) */
@media (max-width: 575px) {
    .lm .x_title h2 {
        width: auto;
        max-width: calc(100% - 88px);
        white-space: normal;
        overflow: visible;
    }
}

.lm .x_title h2 small {
    font-size: var(--lm-fs-sm);
    font-weight: 400;
    color: var(--lm-text-muted);
}

.lm .x_title span {
    color: var(--lm-text-muted); /* legado: #BDBDBD (1,9:1) */
}

/* Ícone no título vira "chip" (quando a tela usar) */
.lm .x_title h2 > i.fa:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: var(--lm-space-3);
    border-radius: var(--lm-radius-md);
    background-color: var(--lm-primary-soft);
    color: var(--lm-primary-text);
    font-size: 15px;
    vertical-align: middle;
}

/* Toolbox (recolher / fechar): botões redondos. Mantém o float dos <li>. */
.lm .panel_toolbox {
    margin: 0;
}

.lm .panel_toolbox > li + li {
    margin-left: var(--lm-space-2);
}

.lm .panel_toolbox > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    background-color: var(--lm-surface-2);
    color: var(--lm-text-muted); /* anula a cor por tema */
    font-size: 13px;
}

.lm .panel_toolbox > li > a:hover,
.lm .panel_toolbox > li > a:focus {
    background-color: var(--lm-surface-hover);
    color: var(--lm-text);
}

/* Painel recolhido: sem o respiro abaixo do título (o slideToggle escreve
   "display: none"; algumas views já vêm com "display:none", sem espaço) */
.lm .x_panel:has(> .x_content:is([style*="display: none"], [style*="display:none"])) > .x_title {
    margin-bottom: 0;
}

.lm .x_content {
    color: var(--lm-text);
}

/* --------------------------------------------------------------------------
   Painéis Bootstrap e accordion do Gentelella
   (.panel existe também em views BS5, onde o Bootstrap não dá estilo nenhum)
   Accordion do Portal: div.accordion > div.panel > a.buttonTab.panel-heading
   (.collapsed quando fechado) > h4.panel-title + div.panel-collapse.collapse
   -------------------------------------------------------------------------- */
.lm .panel {
    margin-bottom: var(--lm-space-3);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-md);
    background-color: var(--lm-surface);
    box-shadow: none;
}

.lm .panel-heading,
.lm .accordion .panel-heading {
    padding: var(--lm-space-3) var(--lm-space-4);
    border-bottom: 1px solid var(--lm-border);
    border-radius: calc(var(--lm-radius-md) - 1px) calc(var(--lm-radius-md) - 1px) 0 0;
    background-color: var(--lm-surface-2);
    color: var(--lm-text);
}

/* Fechado: sem a divisória de baixo e com os quatro cantos arredondados */
.lm .panel-heading.collapsed,
.lm .accordion .panel-heading.collapsed {
    border-bottom-color: transparent;
    border-radius: calc(var(--lm-radius-md) - 1px);
}

.lm a.panel-heading:hover,
.lm a.buttonTab:hover {
    background-color: var(--lm-primary-tint);
    text-decoration: none;
}

.lm .accordion .panel:hover {
    background-color: var(--lm-surface); /* legado: fundo cinza no painel inteiro */
}

.lm .panel-title,
.lm .panel-title > a {
    font-size: var(--lm-fs-md);
    font-weight: 600;
    color: var(--lm-text);
    text-decoration: none;
}

.lm .card {
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-lg);
    background-color: var(--lm-surface);
    box-shadow: var(--lm-shadow-card);
}

/* --------------------------------------------------------------------------
   Subtítulos de seção dentro dos painéis (T2-R09)
   -------------------------------------------------------------------------- */
.lm .lbl-subTitulo,
.lm .lbl-subTitulo-3 {
    font-size: var(--lm-fs-md);
    font-weight: 700;
    color: var(--lm-text);
}

.lm .lbl-subTitulo-2 {
    font-size: var(--lm-fs-lg);
    font-weight: 600;
    color: var(--lm-text-muted); /* legado: 20px #9c9c9c (2,8:1) */
}

.lm .lbl-subTitulo,
.lm .lbl-subTitulo-2,
.lm .row-subTitulo-3 {
    border-bottom-color: var(--lm-border);
}

.lm .row-subTitulo-3 h2 {
    font-size: var(--lm-fs-md);
    font-weight: 700;
    color: var(--lm-text);
}

/* ==========================================================================
   LAYOUT MODERNO · COMPONENTES · 22 · FORMULÁRIOS (T2-R03)
   Campos com 40px, raio 12px, borda --lm-border-strong (a única neutra com
   3:1) e foco com a cor do tema.
   SEM !important na borda dos campos: a validação dos JS pinta a borda inline
   ($(campo).css("border", "1px solid #f00")) e ela precisa continuar vencendo.
   Input groups com o botão destacado do campo: a parte comum está aqui, a
   troca de layout por versão fica em Compat/bs341.css e Compat/bs538.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Campos (.form-control cobre também o <select> nativo do modo acessibilidade)
   -------------------------------------------------------------------------- */
.lm .form-control,
.lm .form-select {
    min-height: var(--lm-control-h); /* BS3 fixa height 34px: o min-height vence */
    padding-left: var(--lm-space-3);
    border: 1px solid var(--lm-border-strong);
    border-radius: var(--lm-radius-md); /* legado: 0 (custom.css) */
    background-color: var(--lm-surface);
    color: var(--lm-text);
    font-size: var(--lm-control-fs); /* 16px no mobile (zoom do iOS), ver 00-tokens */
    box-shadow: none;
    transition: border-color var(--lm-dur) var(--lm-ease);
}

.lm .form-control {
    padding-right: var(--lm-space-3);
}

/* .form-select (BS5): a direita reserva o espaço da seta */
.lm .form-select {
    padding-right: 36px;
    background-position: right var(--lm-space-3) center;
}

/* Campo e select pequenos (tabelas e filtros montados em JS) */
.lm .form-control.input-sm,
.lm .form-control-sm,
.lm .form-select-sm {
    min-height: var(--lm-control-h-sm);
    padding-left: 10px;
    border-radius: var(--lm-radius-sm);
    font-size: var(--lm-control-fs-sm);
}

.lm .form-control.input-sm,
.lm .form-control-sm {
    padding-right: 10px;
}

.lm .form-select-sm {
    padding-right: 32px;
    background-position: right 10px center;
}

.lm textarea.form-control {
    min-height: 0; /* a altura vem do rows de cada tela */
    padding-top: var(--lm-space-2);
    padding-bottom: var(--lm-space-2);
    line-height: 1.5;
}

/* Foco: borda na cor do tema + anel. Vence o ".TemaX .form-control:focus"
   (custom.css, 0-3-0) e o brilho do BS3/BS5 sem !important. */
.lm body .form-control:focus,
.lm body .form-select:focus {
    border-color: var(--lm-primary-text);
    outline: 2px solid var(--lm-focus-ring);
    outline-offset: 0;
    box-shadow: none;
}

.lm .form-control::placeholder {
    color: var(--lm-text-muted);
    opacity: 1;
}

/* Desabilitado e somente leitura: fundo cinza nas duas versões (o fix.css já
   devolve o cinza ao readonly no BS5). O valor do readonly é conteúdo e fica
   com a cor de texto normal. */
.lm .form-control[disabled],
.lm .form-control:disabled,
.lm .form-control[readonly],
.lm fieldset[disabled] .form-control,
.lm .form-select:disabled {
    background-color: var(--lm-surface-hover);
    opacity: 1;
}

.lm .form-control[disabled],
.lm .form-control:disabled,
.lm fieldset[disabled] .form-control,
.lm .form-select:disabled {
    color: var(--lm-text-muted);
    cursor: not-allowed;
}

/* Checkbox e radio nativos (BS3) e .form-check-input (BS5) */
.lm input[type="checkbox"],
.lm input[type="radio"] {
    accent-color: var(--lm-primary-text); /* no Amarelo o preenchimento é claro demais para o check */
}

.lm .form-check-input {
    border-color: var(--lm-border-strong);
}

.lm .form-check-input:checked {
    border-color: var(--lm-primary-text);
    background-color: var(--lm-primary-text);
}

.lm .form-check-input:focus {
    border-color: var(--lm-border-strong);
    box-shadow: none;
}

.lm .form-check-input:checked:focus {
    border-color: var(--lm-primary-text);
}

.lm .form-check-input:focus-visible {
    outline: 2px solid var(--lm-focus-ring);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Rótulos e valores (mantêm float, largura e alinhamento do legado: grade)
   -------------------------------------------------------------------------- */
.lm .lbl-label,
.lm .lbl-label-2,
.lm .lbl-label-3,
.lm .lbl-label-4,
.lm .lbl-label-5 {
    color: var(--lm-text-muted); /* legado: #9C9C9C (2,8:1) */
    font-size: var(--lm-fs-sm);
    font-weight: 500;
}

.lm .lbl-content,
.lm .lbl-content-2,
.lm .lbl-content-3,
.lm .lbl-content-4,
.lm .lbl-content-5,
.lm .lbl-content-6,
.lm .lbl-content-7 {
    color: var(--lm-text);
}

.lm .lbl-content,
.lm .lbl-content-2,
.lm .lbl-content-4,
.lm .lbl-content-5,
.lm .lbl-content-6,
.lm .lbl-content-7 {
    font-size: var(--lm-fs-md);
}

/* Rótulo ao lado do campo: com o campo de 40px (antes 34px), o texto desce
   2px para continuar centralizado com o texto do campo. Só na grade lado a
   lado; empilhado (≤ 991px) valem as margens do legado. */
@media (min-width: 992px) {
    .lm .lbl-label,
    .lm .lbl-label-2,
    .lm .lbl-content,
    .lm .lbl-content-2,
    .lm .lbl-content-3,
    .lm .lbl-content-4,
    .lm .lbl-content-5,
    .lm .lbl-content-6 {
        margin-top: 10px;
    }
}

.lm .lbl-titulo,
.lm .lbl-titulo-2,
.lm .lbl-color-preto,
.lm legend {
    color: var(--lm-text);
}

.lm .lbl-color-cinza,
.lm .radio-text-right,
.lm .radio-text-left {
    color: var(--lm-text-muted); /* legado: #9C9C9C */
}

.lm .switchery-Texto {
    color: var(--lm-text);
    font-size: var(--lm-fs-sm);
}

/* --------------------------------------------------------------------------
   Input groups: addon/botão destacado do campo, como no anexo
   (todos os addons das views são o ícone de calendário do datetimepicker)
   -------------------------------------------------------------------------- */
.lm .input-group:not(.lm-input-group-junto) > .input-group-addon,
.lm .input-group:not(.lm-input-group-junto) > .input-group-text {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--lm-control-h);
    padding: 0 var(--lm-space-3);
    border: 0;
    background-color: var(--lm-primary-soft) !important; /* vence: custom.css ".input-group.date .input-group-addon" (!important) */
    color: var(--lm-primary-text);
    font-size: var(--lm-fs-lg);
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--lm-dur) var(--lm-ease);
}

.lm .input-group:not(.lm-input-group-junto) > .input-group-addon:hover,
.lm .input-group:not(.lm-input-group-junto) > .input-group-text:hover {
    background-color: var(--lm-primary-soft-2) !important; /* vence: idem */
}

/* Campo desabilitado ou somente leitura: o datetimepicker não abre (sem
   ignoreReadonly nos JS), então o botão do calendário acompanha o campo.
   Seletor mais forte que o :hover acima (0-6-0 × 0-5-0). */
.lm .input-group:not(.lm-input-group-junto) > .form-control:is(:disabled, [readonly]) ~ :is(.input-group-addon, .input-group-text) {
    background-color: var(--lm-surface-hover) !important; /* vence: idem */
    color: var(--lm-text-muted);
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Anexo (file-input-group): campo com raio completo e botões de ícone
   O <input type="file"> transparente cobre o grupo (custom.js ajusta a
   largura); a altura acompanha o campo de 40px (legado: 34px).
   -------------------------------------------------------------------------- */
.lm .file-input {
    height: 100%;
}

.lm .file-input-text {
    height: auto; /* legado: 34px */
}

/* Com o espaço entre os itens do grupo, o overlay (largura calculada pelo
   custom.js sem esse espaço) invade alguns px do botão de download: os
   botões de ícone ficam acima dele (overlay: z-index 10). */
.lm .btn.file-btn-donwload,
.lm .btn.file-btn-delete {
    position: relative;
    z-index: 11;
    width: var(--lm-control-h);
    min-width: var(--lm-control-h);
    padding: 0;
    gap: 0;
}

.lm .btn.file-btn-donwload:not(.btn-inativo) {
    border-color: var(--lm-primary-soft) !important; /* vence: cores com !important de 20-botoes.css */
    background-color: var(--lm-primary-soft) !important;
    color: var(--lm-primary-text) !important;
}

.lm .btn.file-btn-donwload:not(.btn-inativo):hover {
    border-color: var(--lm-primary-soft-2) !important; /* vence: idem */
    background-color: var(--lm-primary-soft-2) !important;
}

.lm .btn.file-btn-delete {
    border-color: var(--lm-danger-soft) !important; /* vence: .btn-danger de 20-botoes.css (!important) */
    background-color: var(--lm-danger-soft) !important;
    color: var(--lm-danger-text) !important;
}

.lm .btn.file-btn-delete:hover {
    border-color: color-mix(in srgb, var(--lm-danger) 16%, var(--lm-surface)) !important; /* vence: idem */
    background-color: color-mix(in srgb, var(--lm-danger) 16%, var(--lm-surface)) !important;
}

/* --------------------------------------------------------------------------
   Validação e erros: continuam chamativos (T2-R06)
   -------------------------------------------------------------------------- */
.lm .field-validation-error,
.lm .has-error .help-block,
.lm .invalid-feedback {
    color: var(--lm-danger-text);
    font-size: var(--lm-fs-sm);
    font-weight: 500;
}

.lm .text-danger {
    color: var(--lm-danger-text) !important; /* vence: utilitário .text-danger do BS5 (!important) */
}

.lm .input-validation-error,
.lm .has-error .form-control,
.lm .form-control.is-invalid,
.lm .erroInput {
    border-color: var(--lm-danger);
}

.lm body .input-validation-error:focus,
.lm body .has-error .form-control:focus,
.lm body .form-control.is-invalid:focus,
.lm body .erroInput:focus {
    border-color: var(--lm-danger);
    outline-color: color-mix(in srgb, var(--lm-danger) 45%, transparent);
}

.lm .boxMensagem span {
    color: var(--lm-danger-text); /* legado: Red */
}

/* Campo obrigatório não preenchido: aplicado pelos JS (ex.: Eventos.js do
   Acerto do Ponto, no contêiner do select2) */
.lm .campoObrigatorio {
    border-color: var(--lm-danger) !important; /* vence: custom.css ".campoObrigatorio { border: 1px solid red !important }" */
}

.lm .lbl-validacao {
    color: var(--lm-danger-text); /* legado: #FF0000 */
}

/* ==========================================================================
   LAYOUT MODERNO · COMPONENTES · 23 · TABELAS (T2-R04)
   Só tabelas .table (as do Syncfusion, do datetimepicker e de layout ficam de
   fora). Divisórias finas, listra sutil, cabeçalho em 13px/600.
   Bordas, listras e hover mudam de mecânica entre as versões (BS3: border-top
   e background; BS5: variáveis --bs-table-* e box-shadow inset), então ficam
   em Compat/bs341.css e Compat/bs538.css. A rolagem horizontal continua a do
   legado (".dataTables_wrapper > .row" e .table-responsive): um contêiner com
   overflow novo cortaria o menu de ações (PopupMenu.js) das linhas.
   ========================================================================== */

.lm .table {
    color: var(--lm-text);
}

/* Padding horizontal igual ao do legado (8px): o DataTables calcula a largura
   das colunas com box-sizing content-box. Só o vertical cresce. */
.lm .table > thead > tr > th,
.lm .table > thead > tr > td,
.lm .table > tbody > tr > th,
.lm .table > tbody > tr > td,
.lm .table > tfoot > tr > th,
.lm .table > tfoot > tr > td {
    padding-top: 10px;
    padding-bottom: 10px;
}

.lm .table > thead > tr > th {
    color: var(--lm-text);
    font-size: var(--lm-fs-sm);
    font-weight: 600;
}

/* Sub-tabela de eventos (Acerto do Ponto e telas de frequência) */
.lm .table-eventos {
    border-color: var(--lm-border); /* legado: #DDDDDD */
}

/* Linha de total das tabelas dataTable2 (legado: borda de 3px e #9C9C9C) */
.lm table.dataTable2 tfoot > tr.rodapeTotal > th,
.lm table.dataTable2 tfoot > tr.rodapeTotal > td {
    border-top: 2px solid var(--lm-border);
    color: var(--lm-text-muted);
    font-weight: 600;
}

/* ==========================================================================
   LAYOUT MODERNO · COMPONENTES · 24 · MODAIS (T2-R05)
   Fundo desfocado (antecipado para a T1, §4.16) + caixa do modal (T2).
   O conteúdo do modal continua nítido e em destaque: ele fica acima do
   backdrop, então nada nele é borrado. Não aplicar filter/backdrop-filter em
   .modal, .modal-dialog ou .modal-content.
   Opacidade do backdrop por versão: Compat/bs341.css (.in) e Compat/bs538.css
   (--bs-backdrop-opacity).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fundo desfocado
   -------------------------------------------------------------------------- */

/* O backdrop cobre também a topbar e a sidebar fixas (z-index 1040/1050 > 1035). */
.lm .modal-backdrop {
    background-color: rgba(var(--lm-overlay-rgb), .32);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Sem suporte a backdrop-filter: fundo mais opaco, sem blur (sem regressão). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .lm .modal-backdrop {
        background-color: rgba(var(--lm-overlay-rgb), .55);
    }
}

/* "Reduzir transparência" ligado no sistema: mesmo fallback. */
@media (prefers-reduced-transparency: reduce) {
    .lm .modal-backdrop {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: rgba(var(--lm-overlay-rgb), .55);
    }
}

/* --------------------------------------------------------------------------
   Caixa
   Sem overflow: hidden no .modal-content: cortaria o select2 e o
   datetimepicker abertos dentro do modal. Largura e margens do diálogo
   continuam as do Bootstrap (há modais com tabela de largura fixa).
   -------------------------------------------------------------------------- */
.lm .modal-content {
    border: 0;
    border-radius: var(--lm-radius-lg);
    background-color: var(--lm-surface);
    color: var(--lm-text);
    box-shadow: var(--lm-shadow-overlay);
}

.lm .modal-header {
    padding: var(--lm-space-4) var(--lm-space-5);
    border-bottom: 1px solid var(--lm-border);
}

.lm .modal-title {
    font-size: var(--lm-fs-lg);
    font-weight: 700;
    line-height: 1.5;
    color: var(--lm-text);
}

/* Posição do "x" (32px) no cabeçalho: Compat/bs341.css (float) e
   Compat/bs538.css (flex do fix.css da migração). */

.lm .modal-body {
    padding: var(--lm-space-5);
}

/* O rodapé continua em bloco com text-align: right no BS3 (há rodapés com
   conteúdo flutuando à esquerda); no BS5 ele já é flex. */
.lm .modal-footer {
    padding: var(--lm-space-4) var(--lm-space-5);
    border-top: 1px solid var(--lm-border);
}

/* Gentelella: margin-bottom 5px em todo .btn (e margin-top 8px ≤ 991px) */
.lm .modal-footer .btn {
    margin-top: 0;
    margin-bottom: 0;
}

.lm .modal-footer .btn:last-child {
    margin-right: 0;
}

/* ==========================================================================
   LAYOUT MODERNO · COMPONENTES · 25 · OBSERVAÇÕES E ALERTAS (T2-R06)
   Observação (complemento que não pede ação): discreta, sem caixa, sem cor
   de tema e sem negrito. Alerta/erro (pede atenção): continua destacado.
   As observações sem classe são tratadas na T3, ocorrência a ocorrência
   (".legendaFonte" é legenda de cor da escala e fica de fora).
   ========================================================================== */

/* Gancho de observação, aplicado pela T3. Tipografia e cor com !important de
   propósito: a classe existe para vencer a cor, o negrito e o itálico inline
   das observações do legado. Margens e padding continuam os do elemento. */
.lm .lm-obs {
    border: 0;
    background: none;
    color: var(--lm-text-muted) !important; /* vence: cor inline da observação */
    font-size: var(--lm-fs-sm);
    font-weight: 400 !important; /* vence: negrito inline */
    font-style: normal !important; /* vence: itálico inline */
    line-height: 1.5;
}

.lm .lm-obs :is(b, strong) {
    font-weight: inherit;
}

/* Contagem "N Pessoas Encontradas" e rótulo "Pessoa" do filtro de contratos
   (Contrato/Index; contrato.js e pessoas.js aplicam a classe depois da busca):
   o legado pinta na cor do tema. É observação: fica discreta. */
.lm .filtroSucesoConsulta {
    color: var(--lm-text-muted);
}

/* Ícone do resultado (Home/Mensagem.css: ResultadoDaRequisicao, coletivas) */
.lm #Icone.sucesso {
    color: var(--lm-success); /* legado: #96CD20 */
}

.lm #Icone.erro {
    color: var(--lm-danger); /* legado: #F5483E */
}

/* --------------------------------------------------------------------------
   Alertas (.alert BS3/BS5): fundo suave e texto da cor semântica
   (o custom.css usa 16px e cores próprias, como #E73D4A no perigo)
   -------------------------------------------------------------------------- */
.lm .alert {
    padding: var(--lm-space-3) var(--lm-space-4);
    border: 0;
    border-radius: var(--lm-radius-md);
    font-size: var(--lm-fs-md);
    font-weight: 400;
    line-height: 1.5;
}

.lm .alert-success {
    background-color: var(--lm-success-soft);
    color: var(--lm-success-text);
}

.lm .alert-info {
    background-color: var(--lm-info-soft);
    color: var(--lm-info-text);
}

.lm .alert-warning {
    background-color: var(--lm-warning-soft);
    color: var(--lm-warning-text);
}

.lm .alert-danger,
.lm .alert-error {
    background-color: var(--lm-danger-soft);
    color: var(--lm-danger-text);
}

/* No alerta o destaque do título é intencional */
.lm .alert :is(strong, b),
.lm .alert .alert-heading {
    font-weight: 600;
}

.lm .alert .alert-link,
.lm .alert a:not(.btn) {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

/* Fechar dentro do alerta: sem o círculo cinza, na cor do texto */
.lm .alert .close {
    background-color: transparent;
    color: inherit;
}

.lm .alert-dismissible .btn-close {
    top: var(--lm-space-2);
    right: var(--lm-space-2);
    background-color: transparent;
}

/* ==========================================================================
   LAYOUT MODERNO · COMPONENTES · 26 · BADGES E STATUS (T2-R07)
   Pílula com fundo suave e texto da variante. Hoje o único badge das views é
   o contador de notificações da topbar, tratado na T1 (11-topbar.css, por id).
   ========================================================================== */

.lm .badge,
.lm .label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: var(--lm-radius-pill);
    background-color: var(--lm-primary-soft);
    color: var(--lm-primary-text);
    font-size: var(--lm-fs-xs);
    font-weight: 600;
    line-height: 1.5;
}

/* BS3 .label-(variante) e BS5 .text-bg-(variante) / .bg-(variante):
   os utilitários do BS5 usam !important */
.lm .label-success,
.lm .badge.text-bg-success,
.lm .badge.bg-success {
    background-color: var(--lm-success-soft) !important; /* vence: utilitários text-bg e bg do BS5 (!important) */
    color: var(--lm-success-text) !important;
}

.lm .label-info,
.lm .badge.text-bg-info,
.lm .badge.bg-info {
    background-color: var(--lm-info-soft) !important; /* vence: idem */
    color: var(--lm-info-text) !important;
}

.lm .label-warning,
.lm .badge.text-bg-warning,
.lm .badge.bg-warning {
    background-color: var(--lm-warning-soft) !important; /* vence: idem */
    color: var(--lm-warning-text) !important;
}

.lm .label-danger,
.lm .badge.text-bg-danger,
.lm .badge.bg-danger {
    background-color: var(--lm-danger-soft) !important; /* vence: idem */
    color: var(--lm-danger-text) !important;
}

.lm .label-default,
.lm .badge.text-bg-secondary,
.lm .badge.bg-secondary {
    background-color: var(--lm-surface-hover) !important; /* vence: idem */
    color: var(--lm-text-muted) !important;
}

.lm .label-primary,
.lm .badge.text-bg-primary,
.lm .badge.bg-primary {
    background-color: var(--lm-primary-soft) !important; /* vence: idem */
    color: var(--lm-primary-text) !important;
}

/* --------------------------------------------------------------------------
   Cores de situação do Gentelella (.red/.blue/.green/.orange), usadas como
   status: legenda e dias do quadro do Acerto do Ponto e do Apontamento de
   Horas, eventos com aviso, dias do Mover Marcações e data-limite vencida do
   Saldo de Férias. Mesmo significado, com as cores semânticas no tom de texto
   (as do legado ficam entre 2,5 e 3,8:1 sobre o branco).
   -------------------------------------------------------------------------- */
.lm .red {
    color: var(--lm-danger-text); /* legado: #E74C3C */
}

.lm .blue {
    color: var(--lm-info-text); /* legado: #3498DB */
}

.lm .green {
    color: var(--lm-success-text); /* legado: #1ABB9C */
}

.lm .orange {
    color: var(--lm-warning-text); /* legado: #E67E22 */
}

/* Situação do contrato (i.fa-circle: Saldo de Férias, Quadro de Lotação) */
.lm .circulo-Ativo {
    color: var(--lm-success); /* legado: #26C281 */
}

.lm .circulo-Afastado {
    color: var(--lm-warning); /* legado: #F7CA18 */
}

/* Status com ponto: a T3 aplica nas listas, com as cores de status que já
   existem em cada tela (a cor vem do color do próprio elemento). */
.lm .lm-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lm .lm-status::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
}

/* ==========================================================================
   LAYOUT MODERNO · COMPONENTES · 27 · ABAS (T2-R08)
   Sublinhado na cor do tema. As abas do Portal são "nav nav-tabs bar_tabs"
   (Gentelella: fichário cinza com abas sobrepostas por margem negativa), que
   aqui é neutralizado. Aba ativa por versão:
     BS3: li.active > a · BS5: a.active (e li.aba-ativa, gancho dos JS da
     Pré-Admissão para o realce, ver PreAdmissao/Bootstrap538/PreAdmissao.css).
   Seletores com "ul" para vencer as regras por tema das telas
   (".TemaX ul.bar_tabs > li.aba-ativa > a", 0-3-3).
   ========================================================================== */

.lm ul.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lm-space-1);
    border-bottom: 1px solid var(--lm-border);
}

/* Clearfix do BS3 viraria item de flex (e ganharia o gap) */
.lm ul.nav-tabs::before,
.lm ul.nav-tabs::after {
    display: none;
}

.lm ul.nav-tabs.bar_tabs {
    height: auto; /* legado: 25px */
    margin: 0 0 var(--lm-space-4);
    padding: 0;
    background: transparent;
}

.lm ul.nav-tabs > li,
.lm ul.nav-tabs > li:is(.active, .aba-ativa) {
    float: none;
    margin: 0 0 -1px; /* o sublinhado da aba cobre a linha da lista */
    border: 0;
    border-radius: 0;
    background: transparent;
}

.lm ul.nav-tabs > li > a,
.lm ul.nav-tabs .nav-link {
    display: block;
    margin: 0;
    padding: 10px var(--lm-space-4);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--lm-text-muted);
    font-size: var(--lm-fs-md); /* PreAdmissao.css: 13px */
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}

.lm ul.nav-tabs > li > a:hover,
.lm ul.nav-tabs > li > a:focus,
.lm ul.nav-tabs .nav-link:hover,
.lm ul.nav-tabs .nav-link:focus {
    border-bottom-color: var(--lm-border-strong);
    background: transparent;
    color: var(--lm-text);
    text-decoration: none;
}

.lm ul.nav-tabs > li.active > a,
.lm ul.nav-tabs > li.active > a:hover,
.lm ul.nav-tabs > li.active > a:focus,
.lm ul.nav-tabs > li.aba-ativa > a,
.lm ul.nav-tabs > li.aba-ativa > a:hover,
.lm ul.nav-tabs > li.aba-ativa > a:focus,
.lm ul.nav-tabs > li > a.active,
.lm ul.nav-tabs .nav-link.active {
    border: 0;
    border-bottom: 2px solid var(--lm-primary-text);
    background: transparent;
    color: var(--lm-primary-text);
    font-weight: 600;
    cursor: default;
}

/* ==========================================================================
   LAYOUT MODERNO · COMPONENTES · 28 · DROPDOWNS E TOOLTIPS (T2-R11)
   Os dropdowns da topbar já foram tratados na T1 (11-topbar.css, por id).
   O widget do datetimepicker também é .dropdown-menu: o refinamento dele
   fica em Plugins/33-datetimepicker.css.
   Tooltip: cor por versão em Compat/bs341.css (setas) e Compat/bs538.css
   (variáveis --bs-tooltip-*).
   ========================================================================== */

.lm .dropdown-menu {
    padding: var(--lm-space-1);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-md);
    background-color: var(--lm-surface);
    box-shadow: var(--lm-shadow-overlay);
    font-size: var(--lm-fs-sm);
}

.lm .dropdown-menu > li > a,
.lm .dropdown-item {
    padding: var(--lm-space-2) var(--lm-space-3);
    border-radius: var(--lm-radius-sm);
    color: var(--lm-text);
}

.lm .dropdown-menu > li > a:hover,
.lm .dropdown-menu > li > a:focus,
.lm .dropdown-item:hover,
.lm .dropdown-item:focus {
    background-color: var(--lm-primary-tint);
    color: var(--lm-text);
    text-decoration: none;
}

.lm .dropdown-menu > .active > a,
.lm .dropdown-menu > .active > a:hover,
.lm .dropdown-menu > .active > a:focus,
.lm .dropdown-item.active,
.lm .dropdown-item:active {
    background-color: var(--lm-primary-soft);
    color: var(--lm-text);
}

.lm .dropdown-menu .divider,
.lm .dropdown-divider {
    margin: var(--lm-space-1) 0;
    background-color: var(--lm-border);
    border-color: var(--lm-border);
}

.lm .dropdown-header {
    color: var(--lm-text-muted);
    font-size: var(--lm-fs-xs);
    font-weight: 600;
}

/* Tooltip do Bootstrap (o title nativo do navegador não é estilizável) */
.lm .tooltip-inner {
    padding: 6px 10px;
    border-radius: var(--lm-radius-sm);
    background-color: var(--lm-text);
    color: #FFFFFF;
    font-size: var(--lm-fs-xs);
    line-height: 1.4;
}

/* ==========================================================================
   LAYOUT MODERNO · COMPONENTES · 29 · INDICADORES (T2-R10)
   .tile-stats (Gentelella) vira card; o ícone grande e apagado do canto vira
   chip na cor do tema. Mantém a estrutura do legado (ícone absoluto à
   direita, número e textos com margem à esquerda). Sem a animação do ícone
   no hover. O layout do dashboard da Home fica para a T3.
   Seletores no mesmo nível dos por tema (".TemaX .tile-stats .icon i", 0-3-1).
   ========================================================================== */

.lm .tile-stats {
    margin-bottom: var(--lm-space-3);
    padding: var(--lm-space-4) 0 var(--lm-space-3);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-lg);
    background: var(--lm-surface);
    box-shadow: var(--lm-shadow-card);
    transition: border-color var(--lm-dur) var(--lm-ease);
}

.lm .tile-stats .icon {
    top: var(--lm-space-4);
    right: var(--lm-space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--lm-radius-md);
    background-color: var(--lm-primary-soft);
}

.lm .tile-stats .icon i,
.lm .tile-stats:hover .icon i {
    color: var(--lm-primary-text);
    font-size: 22px;
    line-height: 1;
    vertical-align: middle;
    animation: none;
}

.lm .tile-stats .count,
.lm .tile-stats h4,
.lm .tile-stats h3,
.lm .tile-stats h2,
.lm .tile-stats p {
    margin-left: var(--lm-space-4);
    margin-right: 72px; /* não passar por baixo do chip do ícone */
}

.lm .tile-stats .count {
    color: var(--lm-text);
    font-size: var(--lm-fs-2xl);
    font-weight: 700;
    line-height: 1.3;
}

.lm .tile-stats h4,
.lm .tile-stats h3,
.lm .tile-stats h2 {
    color: var(--lm-text-muted); /* legado: #BAB8B8 (2,0:1) */
    font-size: var(--lm-fs-md);
    font-weight: 600;
}

.lm .tile-stats p {
    margin-top: var(--lm-space-1);
    color: var(--lm-primary-text);
    font-size: var(--lm-fs-sm);
}

/* Indicador que é link: só a borda muda, sem sombra nova */
.lm .indicadorLinkado .tile-stats:hover,
.lm .indicadorLinkado .tile-stats:active {
    border: 1px solid var(--lm-primary);
    cursor: pointer;
}

.lm .indicadorLinkado a:hover,
.lm .indicadorLinkado a:focus,
.lm .indicadorLinkado a:active {
    color: inherit;
    text-decoration: none;
}

.lm .indicadorLinkado a:focus-visible .tile-stats {
    border-color: var(--lm-primary);
}

/* Barra de progresso (bootstrap-progressbar e .progress do BS) */
.lm .progress {
    height: 8px;
    border-radius: var(--lm-radius-pill);
    background-color: var(--lm-surface-hover);
    box-shadow: none;
}

.lm .progress-bar {
    border-radius: var(--lm-radius-pill);
    background-color: var(--lm-primary-fill);
    box-shadow: none;
}

/* Barra do processamento das coletivas (#ModalLoading) e .bg-progress-bar em
   geral: o custom.css usa !important, com uma cor por tema. A altura de 25px
   inline das coletivas (com !important) continua. */
.lm .bg-progress-bar,
.lm #ModalLoading .bg-progress-bar {
    border-color: var(--lm-primary-fill) !important; /* vence: custom.css ".bg-progress-bar" e ".TemaX #ModalLoading .bg-progress-bar" (!important) */
    background: var(--lm-primary-fill) !important; /* vence: idem */
    color: var(--lm-on-primary);
}

/* ==========================================================================
   LAYOUT MODERNO · PLUGINS · 30 · SELECT2 (4.0, tema default)
   Seleção fechada idêntica ao .form-control (22-formularios.css): 40px,
   raio 12px, borda --lm-border-strong, foco com a cor do tema. A lista abre
   como card destacado do campo. O dropdown é anexado ao <body> e herda os
   tokens do tema dali. Sem !important na borda: a validação dos JS pinta a
   borda inline.
   ========================================================================== */

.lm .select2-container--default .select2-selection--single,
.lm .select2-container--default .select2-selection--multiple {
    min-height: var(--lm-control-h); /* legado: 30px (custom.css) */
    border: 1px solid var(--lm-border-strong);
    border-radius: var(--lm-radius-md);
    background-color: var(--lm-surface);
    transition: border-color var(--lm-dur) var(--lm-ease);
}

.lm .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-top: 0; /* legado: 1px */
    padding-left: var(--lm-space-3);
    padding-right: 32px;
    color: var(--lm-text);
    font-size: var(--lm-control-fs);
    line-height: calc(var(--lm-control-h) - 2px);
}

.lm .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--lm-text-muted);
}

.lm .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 1px;
    right: var(--lm-space-2);
    height: calc(var(--lm-control-h) - 2px); /* legado: 30px */
}

.lm .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--lm-text-muted);
}

.lm .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-top-color: transparent;
    border-bottom-color: var(--lm-text-muted);
}

.lm .select2-container--default .select2-selection--single .select2-selection__clear {
    color: var(--lm-text-muted);
}

/* Foco e aberto: mesma borda e anel do .form-control:focus. Vence
   "span.select2-selection:focus" e ".TemaX span.select2-selection:focus". */
.lm .select2-container--default.select2-container--focus .select2-selection,
.lm .select2-container--default.select2-container--open .select2-selection,
.lm body span.select2-selection:focus {
    border-color: var(--lm-primary-text);
    outline: 2px solid var(--lm-focus-ring);
    outline-offset: 0;
}

/* Aberto: o select2 achata os cantos do lado da lista; aqui a lista é um card
   separado, então o campo mantém o raio. */
.lm .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.lm .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple,
.lm .select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
.lm .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
    border-radius: var(--lm-radius-md);
}

.lm .select2-container--default.select2-container--disabled .select2-selection--single,
.lm .select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: var(--lm-surface-hover);
    cursor: not-allowed;
}

.lm .select2-container--default.select2-container--disabled .select2-selection__rendered {
    color: var(--lm-text-muted);
}

/* Múltipla: escolhas em pílula */
.lm .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0 var(--lm-space-2) 4px; /* legado: padding-top 3px */
}

.lm .select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 6px;
    margin-right: 4px;
    padding: 2px 10px;
    border: 0;
    border-radius: var(--lm-radius-pill);
    background-color: var(--lm-primary-soft);
    color: var(--lm-text);
    font-size: var(--lm-fs-sm);
    line-height: 1.5;
}

.lm .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    margin-right: 4px;
    color: var(--lm-text-muted);
}

.lm .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--lm-danger-text);
}

.lm .select2-container--default .select2-search--inline .select2-search__field {
    margin-top: 8px;
    font-size: var(--lm-control-fs);
}

/* --------------------------------------------------------------------------
   Lista (card)
   -------------------------------------------------------------------------- */
.lm .select2-dropdown {
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-md);
    background-color: var(--lm-surface);
    box-shadow: var(--lm-shadow-overlay);
    overflow: hidden;
}

.lm .select2-container--open .select2-dropdown--below {
    margin-top: var(--lm-space-1);
    border-top: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-md);
}

.lm .select2-container--open .select2-dropdown--above {
    margin-top: calc(-1 * var(--lm-space-1));
    border-bottom: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-md);
}

.lm .select2-container--default .select2-search--dropdown {
    padding: var(--lm-space-2);
}

.lm .select2-container--default .select2-search--dropdown .select2-search__field {
    min-height: 36px;
    padding: 4px 10px;
    border: 1px solid var(--lm-border-strong);
    border-radius: var(--lm-radius-sm);
    color: var(--lm-text);
    font-size: var(--lm-control-fs);
}

.lm .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--lm-primary-text);
    outline: 2px solid var(--lm-focus-ring);
    outline-offset: 0;
}

.lm .select2-results > .select2-results__options {
    padding: var(--lm-space-1);
}

.lm .select2-container--default .select2-results__option {
    padding: var(--lm-space-2) var(--lm-space-3);
    border-radius: var(--lm-radius-sm);
    color: var(--lm-text);
    font-size: var(--lm-fs-md);
}

.lm .select2-container--default .select2-results__option--highlighted[aria-selected],
.lm .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--lm-primary-soft); /* legado: #C1C1C1 */
    color: var(--lm-text);
}

/* Selecionada (4.0: aria-selected; 4.1: --selected). Depois do destaque:
   selecionada e sob o mouse continua marcada. */
.lm .select2-container--default .select2-results__option[aria-selected="true"],
.lm .select2-container--default .select2-results__option--selected {
    background-color: var(--lm-primary-fill);
    color: var(--lm-on-primary);
}

.lm .select2-container--default .select2-results__option[aria-disabled="true"] {
    color: var(--lm-text-muted);
}

.lm .select2-container--default .select2-results__group {
    padding: var(--lm-space-2) var(--lm-space-3) var(--lm-space-1);
    color: var(--lm-text-muted);
    font-size: var(--lm-fs-xs);
    font-weight: 600;
}

/* ==========================================================================
   LAYOUT MODERNO · PLUGINS · 31 · SWITCHERY
   O switchery.js pinta as cores INLINE (fundo, borda e o "preenchimento" com
   box-shadow inset, a partir do _corSwitchery do custom.js), por isso as
   cores daqui usam !important. Medidas do legado mantidas (32×20, custom.css):
   o JS calcula a posição da bolinha pelo tamanho do trilho.
   Ligado usa --lm-primary-text (como checkbox e radio): no Amarelo o
   preenchimento claro deixaria a bolinha branca sem contraste.
   iCheck: nenhuma view inicializa o plugin (só o skin é carregado), então
   não há regra aqui.
   ========================================================================== */

.lm .switchery {
    border-color: var(--lm-border-strong) !important; /* vence: estilo inline do switchery.js */
    border-radius: var(--lm-radius-pill);
    background-color: var(--lm-border-strong) !important;
    box-shadow: none !important;
}

.lm input:checked + .switchery {
    border-color: var(--lm-primary-text) !important; /* vence: estilo inline do switchery.js (_corSwitchery) */
    background-color: var(--lm-primary-text) !important;
}

.lm .switchery > small {
    background-color: var(--lm-surface) !important; /* vence: estilo inline do switchery.js (jackColor) */
    box-shadow: var(--lm-shadow-card); /* sombra leve só na bolinha, para separar do trilho */
}

/* ==========================================================================
   LAYOUT MODERNO · PLUGINS · 32 · DATATABLES (1.10 no BS3, 2.3.8 no BS5)
   Mesmo resultado nas duas versões: busca e tamanho como campo, informação
   discreta, paginação em botões de 32px com a página atual na cor do tema,
   ícone de ordenação apagado (ativo na cor do tema).
   Listras e hover das linhas: Compat/bs341.css e Compat/bs538.css.
   ========================================================================== */

/* Busca e quantidade por página (BS3: .form-control.input-sm; BS5: -sm) */
.lm .dataTables_wrapper .dataTables_length select,
.lm .dataTables_wrapper .dataTables_filter input,
.lm .dt-container .dt-length select,
.lm .dt-container .dt-search input {
    min-height: 36px;
    border-radius: var(--lm-radius-md);
}

/* Busca (BS3): o custom.css fixa ".dataTables_filter { width: 50% }" e o
   label não quebra linha, então o campo vazava a coluna e a linha ganhava
   rolagem horizontal (".dataTables_wrapper > .row { overflow: auto }"), já no
   legado. O filtro passa a ter a largura do conteúdo e o campo encolhe se
   faltar espaço. */
.lm .dataTables_wrapper .dataTables_filter {
    width: auto;
    max-width: 100%;
}

.lm .dataTables_wrapper .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-2);
    max-width: 100%;
}

.lm .dataTables_wrapper .dataTables_filter input {
    min-width: 0;
    margin-left: 0;
}

.lm .dataTables_wrapper .dataTables_length label,
.lm .dataTables_wrapper .dataTables_filter label,
.lm .dt-container .dt-length label,
.lm .dt-container .dt-search label {
    color: var(--lm-text-muted);
    font-size: var(--lm-fs-sm);
}

.lm .dataTables_wrapper .dataTables_info,
.lm .dt-container .dt-info {
    color: var(--lm-text-muted);
    font-size: var(--lm-fs-sm);
}

.lm table.dataTable td.dataTables_empty,
.lm table.dataTable2 td.dataTables_empty,
.lm table.dataTable td.dt-empty {
    color: var(--lm-text-muted);
}

/* --------------------------------------------------------------------------
   Paginação (BS3: li > a; BS5: li.page-item > .page-link, <button> no DT 2)
   Vence ".TemaX .pagination > .active > a" (custom.css) no mesmo nível.
   -------------------------------------------------------------------------- */
.lm .pagination {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--lm-space-1);
    padding: 0;
    border-radius: 0;
}

.lm .pagination > li {
    display: block;
}

.lm .pagination > li > a,
.lm .pagination > li > span,
.lm .pagination > li > .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none;
    min-width: 32px;
    height: 32px;
    margin: 0;
    padding: 0 10px !important; /* vence: custom.css ".dataTables_paginate a" (!important) */
    border: 0;
    border-radius: var(--lm-radius-md);
    background-color: transparent;
    color: var(--lm-text);
    font-size: var(--lm-fs-sm);
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
}

.lm .pagination > li > a:hover,
.lm .pagination > li > a:focus,
.lm .pagination > li > span:hover,
.lm .pagination > li > .page-link:hover,
.lm .pagination > li > .page-link:focus {
    background-color: var(--lm-surface-hover);
    color: var(--lm-text);
    box-shadow: none;
}

.lm .pagination > .active > a,
.lm .pagination > .active > span,
.lm .pagination > .active > .page-link,
.lm .pagination > .active > a:hover,
.lm .pagination > .active > span:hover,
.lm .pagination > .active > .page-link:hover,
.lm .pagination > .active > a:focus,
.lm .pagination > .active > span:focus,
.lm .pagination > .active > .page-link:focus {
    background-color: var(--lm-primary-fill);
    color: var(--lm-on-primary);
    cursor: default;
}

.lm .pagination > .disabled > a,
.lm .pagination > .disabled > span,
.lm .pagination > .disabled > .page-link,
.lm .pagination > .disabled > a:hover,
.lm .pagination > .disabled > a:focus {
    background-color: transparent;
    color: var(--lm-text-muted);
    opacity: .6;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Ordenação
   -------------------------------------------------------------------------- */

/* DataTables 1.10 (BS3): glyphicon no :after */
.lm table.dataTable thead .sorting::after,
.lm table.dataTable2 thead .sorting::after {
    color: var(--lm-text-muted);
    opacity: .5;
}

.lm table.dataTable thead .sorting_asc::after,
.lm table.dataTable thead .sorting_desc::after,
.lm table.dataTable2 thead .sorting_asc::after,
.lm table.dataTable2 thead .sorting_desc::after {
    color: var(--lm-primary-text);
    opacity: 1;
}

/* DataTables 2 (BS5): setas em .dt-column-order */
.lm table.dataTable thead > tr > th.dt-orderable-asc .dt-column-order::before,
.lm table.dataTable thead > tr > th.dt-orderable-desc .dt-column-order::after {
    color: var(--lm-text-muted);
}

.lm table.dataTable thead > tr > th.dt-ordering-asc .dt-column-order::before,
.lm table.dataTable thead > tr > th.dt-ordering-desc .dt-column-order::after {
    color: var(--lm-primary-text);
    opacity: 1;
}

/* ==========================================================================
   LAYOUT MODERNO · PLUGINS · 33 · DATETIMEPICKER (Eonasdan 4.17)
   Card do dropdown (28-dropdowns-tooltips.css) com dias arredondados, dia
   escolhido na cor do tema e "hoje" marcado. A posição continua a do
   plugin (calculada pelo grupo .input-group.date).
   ========================================================================== */

/* 19em: a largura fica igual à do BS3 (14px), sem herdar os 13px do .dropdown-menu da camada */
.lm .bootstrap-datetimepicker-widget.dropdown-menu {
    padding: var(--lm-space-2);
    font-size: var(--lm-fs-md);
}

/* Sem as setinhas do dropdown: o card já fica colado no campo */
.lm .bootstrap-datetimepicker-widget.dropdown-menu::before,
.lm .bootstrap-datetimepicker-widget.dropdown-menu::after {
    display: none;
}

.lm .bootstrap-datetimepicker-widget table th,
.lm .bootstrap-datetimepicker-widget table td {
    border-radius: var(--lm-radius-sm);
}

.lm .bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
.lm .bootstrap-datetimepicker-widget table td.day:hover,
.lm .bootstrap-datetimepicker-widget table td.hour:hover,
.lm .bootstrap-datetimepicker-widget table td.minute:hover,
.lm .bootstrap-datetimepicker-widget table td.second:hover,
.lm .bootstrap-datetimepicker-widget table td span:hover,
.lm .bootstrap-datetimepicker-widget table td i:hover {
    background-color: var(--lm-primary-tint);
}

.lm .bootstrap-datetimepicker-widget table th.picker-switch {
    font-weight: 600;
}

.lm .bootstrap-datetimepicker-widget table th.dow {
    color: var(--lm-text-muted);
    font-size: var(--lm-fs-xs);
    font-weight: 600;
}

.lm .bootstrap-datetimepicker-widget table td.old,
.lm .bootstrap-datetimepicker-widget table td.new,
.lm .bootstrap-datetimepicker-widget table td span.old {
    color: var(--lm-text-muted);
    opacity: .7;
}

.lm .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: var(--lm-primary);
}

.lm .bootstrap-datetimepicker-widget table td.active,
.lm .bootstrap-datetimepicker-widget table td.active:hover,
.lm .bootstrap-datetimepicker-widget table td span.active {
    background-color: var(--lm-primary-fill);
    color: var(--lm-on-primary);
    text-shadow: none;
}

.lm .bootstrap-datetimepicker-widget table td.active.today::before {
    border-bottom-color: var(--lm-on-primary);
}

.lm .bootstrap-datetimepicker-widget table td.disabled,
.lm .bootstrap-datetimepicker-widget table td.disabled:hover,
.lm .bootstrap-datetimepicker-widget table td span.disabled,
.lm .bootstrap-datetimepicker-widget table td span.disabled:hover {
    background: none;
    color: var(--lm-text-muted);
    opacity: .5;
}

/* Barra de hoje/limpar/fechar e botões de hora */
.lm .bootstrap-datetimepicker-widget .picker-switch td span,
.lm .bootstrap-datetimepicker-widget .btn {
    color: var(--lm-primary-text) !important; /* vence: cores com !important de 20-botoes.css */
}

.lm .bootstrap-datetimepicker-widget .btn {
    border-color: transparent !important; /* vence: idem */
    background-color: transparent !important;
}

/* ==========================================================================
   LAYOUT MODERNO · PLUGINS · 34 · PNOTIFY E NPROGRESS
   PNotify usa styling "bootstrap3": o contêiner recebe .alert-* (cores em
   Componentes/25-mensagens.css). NProgress na cor do tema (anula
   ".TemaX #nprogress").
   ========================================================================== */

.lm .ui-pnotify .ui-pnotify-container {
    border: 0;
    border-radius: var(--lm-radius-md);
    box-shadow: var(--lm-shadow-overlay);
}

.lm .ui-pnotify-title {
    margin-bottom: var(--lm-space-1);
    font-size: var(--lm-fs-md);
    font-weight: 600;
}

.lm .ui-pnotify-text {
    font-size: var(--lm-fs-md);
}

/* Confirmação (oNotificacao.Confirmar): card neutro no lugar do cinza #EEE */
.lm .confirmacao .alert {
    background-color: var(--lm-surface);
    color: var(--lm-text);
}

/* Fundo da confirmação: o mesmo dos modais (24-modais.css) */
.lm .ui-pnotify-modal-overlay {
    background-color: rgba(var(--lm-overlay-rgb), .32);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .lm .ui-pnotify-modal-overlay {
        background-color: rgba(var(--lm-overlay-rgb), .55);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .lm .ui-pnotify-modal-overlay {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: rgba(var(--lm-overlay-rgb), .55);
    }
}

/* --------------------------------------------------------------------------
   Notificações do Portal (oNotificacao, stack "bar top": sucesso, informação,
   aviso, erro e a confirmação). No legado são uma faixa de ponta a ponta no
   topo; aqui viram um popup centralizado no topo, que desce ao aparecer e
   sobe ao sumir. Só CSS: o PNotify continua mandando no tempo, na pausa, no
   fechar e na pilha.
   - Posição: o PNotify escreve top/left inline e a largura 100% (opção
     "width" do notificacao.js). A largura passa a ser fixa, centralizada por
     left/right 0 com margem automática. (No celular, arrastar para fechar
     continua funcionando, mas o popup não acompanha o dedo.)
   - Espaço entre popups empilhados: o PNotify soma só a altura do conteúdo
     (spacing1 0). A margem do .ui-pnotify-container entra nessa altura, porque
     o .ui-pnotify é fixed e a margem do filho não colapsa.
   - Animação: a do PNotify é o fade por classe (ui-pnotify-fade-normal e
     ui-pnotify-fade-in); o deslocamento entra na mesma transição, com o mesmo
     tempo na entrada e na saída.
   -------------------------------------------------------------------------- */
.lm body > .ui-pnotify.stack-bar-top {
    right: 0 !important; /* vence: pnotify.custom.css (36px e, no ≤ 480px, a faixa inteira) */
    left: 0 !important; /* vence: left inline do PNotify */
    width: min(560px, calc(100vw - 32px)) !important; /* vence: width 100% inline (notificacao.js) e "width: auto !important" do ≤ 480px */
    margin: 0 auto;
    font-size: var(--lm-fs-md); /* ≤ 480px: 1.2em */
}

/* Escondido (fade-normal sem fade-in): acima da posição final */
.lm body > .ui-pnotify.stack-bar-top.ui-pnotify-fade-normal {
    transform: translateY(calc(-100% - var(--lm-space-4)));
    transition: opacity .3s ease, transform .3s var(--lm-ease), top .5s ease;
}

.lm body > .ui-pnotify.stack-bar-top.ui-pnotify-fade-in {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .lm body > .ui-pnotify.stack-bar-top.ui-pnotify-fade-normal {
        transform: none;
    }
}

/* O card: 16px do topo e entre popups, cantos arredondados e sombra (o ≤ 480px
   do pnotify.custom.css tira raio e sombra) */
.lm body > .ui-pnotify.stack-bar-top .ui-pnotify-container {
    width: auto; /* confirmação: ".confirmacao .alert { width: 70% }" (custom.css) */
    margin: var(--lm-space-4) 0 0;
    padding: var(--lm-space-3) var(--lm-space-3) var(--lm-space-3) var(--lm-space-4);
    border: 0;
    border-radius: var(--lm-radius-lg);
    box-shadow: var(--lm-shadow-overlay);
}

/* Ícone do tipo num chip redondo, na cor do texto do alerta. Os ícones do
   styling "bootstrap3" são glyphicons, que no BS5 nem carregam: o desenho vem
   de máscaras SVG, igual nas duas versões. */
.lm body > .ui-pnotify.stack-bar-top .ui-pnotify-icon {
    margin: 0 var(--lm-space-3) 0 0;
}

.lm body > .ui-pnotify.stack-bar-top .ui-pnotify-icon > span {
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: 50%;
    background-color: currentColor;
}

.lm body > .ui-pnotify.stack-bar-top .ui-pnotify-icon > span::before {
    content: "";
    width: 16px;
    height: 16px;
    background-color: var(--lm-surface);
    -webkit-mask: var(--lm-pnotify-icone) center / contain no-repeat;
    mask: var(--lm-pnotify-icone) center / contain no-repeat;
}

.lm body > .ui-pnotify.stack-bar-top .ui-pnotify-icon > .glyphicon-ok-sign {
    --lm-pnotify-icone: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3e%3c/svg%3e");
}

.lm body > .ui-pnotify.stack-bar-top .ui-pnotify-icon > .glyphicon-info-sign {
    --lm-pnotify-icone: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='4' r='1.5'/%3e%3crect x='6.75' y='6.5' width='2.5' height='7' rx='1.25'/%3e%3c/svg%3e");
}

.lm body > .ui-pnotify.stack-bar-top .ui-pnotify-icon > :is(.glyphicon-exclamation-sign, .glyphicon-warning-sign) {
    --lm-pnotify-icone: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3crect x='6.75' y='2.5' width='2.5' height='7.5' rx='1.25'/%3e%3ccircle cx='8' cy='12.75' r='1.5'/%3e%3c/svg%3e");
}

.lm body > .ui-pnotify.stack-bar-top .ui-pnotify-icon > .glyphicon-question-sign {
    --lm-pnotify-icone: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' d='M5.5 5.5a2.5 2.5 0 1 1 3.6 2.2c-.7.4-1.1.9-1.1 1.7v.3'/%3e%3ccircle cx='8' cy='12.8' r='1.4'/%3e%3c/svg%3e");
}

/* Confirmação: card neutro, então o chip vai na cor do tema */
.lm body > .ui-pnotify.confirmacao .ui-pnotify-icon > span {
    background-color: var(--lm-primary-fill);
}

.lm body > .ui-pnotify.confirmacao .ui-pnotify-icon > span::before {
    background-color: var(--lm-on-primary);
}

/* Título e texto alinhados depois do chip (32px + 12px) */
.lm body > .ui-pnotify.stack-bar-top :is(.ui-pnotify-title, .ui-pnotify-text) {
    margin-left: 44px;
}

.lm body > .ui-pnotify.stack-bar-top .ui-pnotify-title {
    margin-top: 6px;
    margin-bottom: 2px;
}

/* Pausar e fechar: botões redondos sempre visíveis (o legado só os mostra
   com o mouse em cima, o que não existe no toque) */
.lm body > .ui-pnotify.stack-bar-top :is(.ui-pnotify-closer, .ui-pnotify-sticker) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 2px 0 0 var(--lm-space-1);
    border-radius: 50%;
    color: inherit;
    opacity: .7;
    visibility: visible !important; /* vence: visibility inline do módulo buttons (closer_hover/sticker_hover) */
    transition: background-color var(--lm-dur) var(--lm-ease), opacity var(--lm-dur) var(--lm-ease);
}

.lm body > .ui-pnotify.stack-bar-top :is(.ui-pnotify-closer, .ui-pnotify-sticker):is(:hover, :focus) {
    background-color: rgba(var(--lm-overlay-rgb), .08);
    opacity: 1;
}

.lm body > .ui-pnotify.stack-bar-top :is(.ui-pnotify-closer, .ui-pnotify-sticker) > span {
    display: block;
    top: 0;
    width: 12px;
    height: 12px;
    background-color: currentColor;
    -webkit-mask: var(--lm-pnotify-icone) center / contain no-repeat;
    mask: var(--lm-pnotify-icone) center / contain no-repeat;
}

.lm body > .ui-pnotify.stack-bar-top :is(.ui-pnotify-closer, .ui-pnotify-sticker) > span::before {
    content: none; /* sem o glyphicon */
}

.lm body > .ui-pnotify.stack-bar-top .ui-pnotify-closer > span {
    --lm-pnotify-icone: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
}

/* Pausar (glyphicon-pause) e, com a notificação fixada, retomar (glyphicon-play) */
.lm body > .ui-pnotify.stack-bar-top .ui-pnotify-sticker > .glyphicon-pause {
    --lm-pnotify-icone: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3crect x='3.5' y='2.5' width='3' height='11' rx='1'/%3e%3crect x='9.5' y='2.5' width='3' height='11' rx='1'/%3e%3c/svg%3e");
}

.lm body > .ui-pnotify.stack-bar-top .ui-pnotify-sticker > .glyphicon-play {
    --lm-pnotify-icone: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M4.5 2.8v10.4a.8.8 0 0 0 1.2.7l8.3-5.2a.8.8 0 0 0 0-1.4L5.7 2.1a.8.8 0 0 0-1.2.7z'/%3e%3c/svg%3e");
}

/* --------------------------------------------------------------------------
   NProgress (barra de carregamento no topo, acima da topbar: z-index 1031)
   -------------------------------------------------------------------------- */
.lm #nprogress .bar {
    background: var(--lm-primary);
}

.lm #nprogress .peg {
    box-shadow: 0 0 10px var(--lm-primary), 0 0 5px var(--lm-primary);
}

.lm #nprogress .spinner-icon {
    border-top-color: var(--lm-primary);
    border-left-color: var(--lm-primary);
}

/* ==========================================================================
   LAYOUT MODERNO · TELAS · ACCOUNT (T3, onda 1)
   Só BS3 nas telas do menu do usuário (Configurações, Alteração de senha,
   Permissões de acesso) e BS3/BS5 na Denúncia. Login, 2FA, recuperação de
   senha e e-mail já foram validados sem ajuste (T1 §4.12).
   A action vem com a caixa da URL: seletores de data-lm-action com "i".
   ========================================================================== */

/* --------------------------------------------------------------------------
   Configurações: modal do Health Check (ModalHealthCheckConfig.css entra no
   corpo, depois da camada, com seletores de id)
   -------------------------------------------------------------------------- */

/* O "x" já fica alinhado ao título pela camada (Compat/bs341.css); o top de
   6px do legado o empurrava para baixo */
.lm #ModalHealthCheckConfig .modal-header .close {
    top: 0;
}

.lm #ModalHealthCheckConfig .table {
    border-color: var(--lm-border); /* legado: #D3D6DA */
}

/* A linha das abas fica no contêiner com rolagem (o ul perde a borda de propósito) */
.lm #ModalHealthCheckConfig .tabs-scroll {
    border-bottom-color: var(--lm-border); /* legado: #DDD */
}

/* --------------------------------------------------------------------------
   Denúncia (BS3): o aviso "IMPORTANTE!" é vermelho inline; no BS5 a mesma
   tela usa .alert.alert-danger, então as duas ficam iguais
   -------------------------------------------------------------------------- */
.lm-bs341[data-lm-controller="Account"][data-lm-action="Denuncia" i] div[style*="color: red"] {
    padding: var(--lm-space-3) var(--lm-space-4);
    border-radius: var(--lm-radius-md);
    background-color: var(--lm-danger-soft);
    color: var(--lm-danger-text) !important; /* vence: Denuncia.cshtml:54 style inline (red) */
}

/* ==========================================================================
   LAYOUT MODERNO · TELAS · ACERTO DO PONTO (T3, onda 0)
   Colaboracao e Gestao, BS3 e BS5. O quadro e os modais chegam por AJAX
   (#quadroAcertoDoPontoGestao; #regMarc, #regEve, #regMarcAcesso,
   #regMoverMarcacoes, #regObservacoes).
   As cores de situação dos dias (.red/.blue/.green/.orange) ficam em
   Componentes/26-badges.css, porque o quadro também é usado pelo
   Apontamento de Horas.
   O Contents/css/(default/)AcertoDoPonto/Quadro.css não chega ao navegador:
   ele está num @section scripts do AcertoDoPontoIndex.cshtml, que tem
   Layout = null. Por isso a bolinha "Não aceita confirmação" é desenhada aqui.
   ========================================================================== */

/* "Não aceita confirmação": legenda do quadro e sub-tabela de eventos (i.dotAC) */
.lm[data-lm-controller="AcertoDoPonto"] .dotAC {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--lm-border-strong);
    vertical-align: middle;
}

/* "Foram realizados todos os ajustes necessários…" (#ConteudoCorrecaoErros) */
.lm[data-lm-controller="AcertoDoPonto"] #ConteudoCorrecaoErros .fa-check-circle-o {
    color: var(--lm-success) !important; /* vence: Quadro.cshtml:143 style inline (#96CD20) */
}

/* Registro de eventos: ícones clicáveis de excluir e adicionar evento */
.lm[data-lm-controller="AcertoDoPonto"] #regEve .centerVertical > i.fa[style*="gray"] {
    color: var(--lm-text-muted) !important; /* vence: RegistroDeEventos.cshtml:38 e :157 style inline (gray) */
}

.lm[data-lm-controller="AcertoDoPonto"] #regEve .centerVertical > i.fa[style*="green"] {
    color: var(--lm-success) !important; /* vence: RegistroDeEventos.cshtml:165 style inline (green) */
}

/* Quadro no BS5: o DataTables 2 não rola a tabela (no BS3 o custom.css rola
   ".dataTables_wrapper > .row"), e a .table-width tem 700px de largura mínima.
   Os tooltips do quadro vão para o <body>, então nada é cortado. */
.lm-bs538[data-lm-controller="AcertoDoPonto"] #tabelaAcertoDoPonto_wrapper > .row {
    overflow-x: auto;
}

/* ==========================================================================
   LAYOUT MODERNO · TELAS · CONTRATO (T3)
   Bloco "Colaborador", o primeiro das telas de gestão: child actions
   Contrato/Index (#ColaboradorBox) e Contrato/Pessoas (#PessoasBox), que ~40
   telas incluem, e as cópias com os mesmos ids no Quadro de Lotação e nas
   Solicitações coletivas. O markup é sempre o do BS3, também nas páginas BS5.
   Linhas: filtros (tipo, valor e "x", clonadas pelo contrato.js/pessoas.js a
   partir do molde #filtrosSelects[hidden]), ações (Remover filtros,
   Adicionar Filtro e a contagem de pessoas), Pessoa, Empresa, Contrato e o
   aviso de LGPD.
   No legado as colunas não somam 12, o "x" fica fora da grade, os
   breakpoints mudam do BS3 para o BS5 e as linhas não se alinham entre si.
   Aqui todas usam a mesma grade (rótulo | campo | resto), pela largura do
   painel (container query), e empilham quando ele é estreito (< 640px).
   - Escopo pelos ids do bloco: o data-lm-controller é o da tela que o inclui.
     O :is(#ColaboradorBox, #PessoasBox, .x_panel) põe um id na
     especificidade, para vencer os ajustes que três telas BS5 já fazem no
     celular (SaldoDeFerias, ConsultaDeSalarios e AutHorasExtras, com
     !important). O display:flex deles fica: monta o mesmo empilhamento.
   - Pessoa/Contrato só entram na grade quando o bloco tem filtros (gestão):
     as cópias só de leitura do bloco (Atestado, Avaliações de Experiência,
     Vale-Alimentação e outras) repetem #PessoaContratos sem os filtros.
   - Os JS leem os filhos de cada linha pela posição e renomeiam os ids nos
     clones: nada aqui muda a ordem nem depende dos ids dos filhos.
   ========================================================================== */

.lm .x_panel:has(#filtrosDiv) {
    container: lm-filtro / inline-size;
}

/* .row do legado em volta das linhas (margem negativa; no BS5, flex) */
.lm :is(#ColaboradorBox, #PessoasBox, .x_panel) :is(#filtrosDiv, #filtrosDiv + .row) {
    display: block;
    margin: 0;
}

/* Quadro de Lotação: as linhas ficam direto no .x_panel, sem o .x_content;
   o mesmo respiro lateral dele, para alinhar com os campos que o JS injeta
   embaixo (#selectsFiltros) */
.lm .x_panel > :is(#filtrosDiv, #filtrosDiv + .row) {
    padding: 0 5px;
}

/* --------------------------------------------------------------------------
   Linhas de filtro: tipo na linha toda e, embaixo, valor + "x"
   (o molde #filtrosSelects tem [hidden] e continua escondido)
   -------------------------------------------------------------------------- */
.lm :is(#ColaboradorBox, #PessoasBox, .x_panel) #filtrosDiv > .form-inline:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "tipo tipo"
        "valor remover";
    gap: var(--lm-space-2);
    align-items: center;
    margin: 0 0 var(--lm-space-3) !important; /* vence: style inline do molde (margin-bottom: 1px), copiado em cada clone */
    padding: 0;
}

.lm :is(#ColaboradorBox, #PessoasBox, .x_panel) #filtrosDiv > .form-inline > div {
    float: none;
    width: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
}

/* 1º filho: coluna vazia (col-md-1) que só recuava a linha no desktop */
.lm :is(#ColaboradorBox, #PessoasBox, .x_panel) #filtrosDiv > .form-inline > div:nth-child(1) {
    display: none;
}

.lm :is(#ColaboradorBox, #PessoasBox, .x_panel) #filtrosDiv > .form-inline > div:nth-child(2) {
    grid-area: tipo;
}

/* flex: nas telas em que o ajuste do celular deixa a linha em flex (ver o
   cabeçalho), "flex: 1 1 auto" partia do tamanho do texto do select2, e um
   valor longo jogava o "x" para uma terceira linha */
.lm :is(#ColaboradorBox, #PessoasBox, .x_panel) #filtrosDiv > .form-inline > div:nth-child(3) {
    flex: 1 1 0%;
    grid-area: valor;
}

.lm :is(#ColaboradorBox, #PessoasBox, .x_panel) #filtrosDiv > .form-inline > div:nth-child(4) {
    grid-area: remover;
}

/* Modo acessibilidade (select nativo): no BS3, o .form-inline deixa o campo
   com a largura do texto */
.lm :is(#ColaboradorBox, #PessoasBox, .x_panel) #filtrosDiv .form-control {
    width: 100%;
}

/* "x" que tira a linha: redondo, na altura dos campos (40px; o .btn-sm tinha
   32px) e secundário, porque tirar um filtro não é ação destrutiva */
.lm :is(#ColaboradorBox, #PessoasBox, .x_panel) #filtrosDiv > .form-inline > div:nth-child(4) > .btn {
    width: var(--lm-control-h);
    min-width: var(--lm-control-h);
    height: var(--lm-control-h);
    margin: 0;
    padding: 0;
    border-color: var(--lm-border-strong) !important; /* vence: .btn-primary de 20-botoes.css (!important) */
    border-radius: 50%;
    background-color: var(--lm-surface) !important; /* vence: idem */
    color: var(--lm-text) !important; /* vence: idem */
    font-size: var(--lm-fs-lg);
}

.lm :is(#ColaboradorBox, #PessoasBox, .x_panel) #filtrosDiv > .form-inline > div:nth-child(4) > .btn:is(:hover, :focus-visible) {
    background-color: var(--lm-surface-hover) !important; /* vence: .btn-primary:hover de 20-botoes.css (!important) */
}

/* --------------------------------------------------------------------------
   Linha de ações (#filtrosDivAux; no Contrato/Pessoas, .row.form-inline sem
   id): "Remover filtros", "Adicionar Filtro" e a contagem de pessoas
   -------------------------------------------------------------------------- */
/* align-items start + altura de campo no "Remover filtros": o link fica na
   altura do botão mesmo quando a contagem desce para a linha de baixo */
.lm :is(#ColaboradorBox, #PessoasBox, .x_panel) #filtrosDiv + .row > div {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--lm-space-2) var(--lm-space-4);
    margin: 0 0 var(--lm-space-4);
    padding: 0;
}

.lm :is(#ColaboradorBox, #PessoasBox, .x_panel) #filtrosDiv + .row > div > #divRemoverTodosFiltros {
    display: flex;
    align-items: center;
    min-height: var(--lm-control-h);
}

.lm :is(#ColaboradorBox, #PessoasBox, .x_panel) #filtrosDiv + .row > div > div {
    float: none;
    width: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
}

/* Colunas vazias (recuo) e "Remover filtros" enquanto o JS mantém o link
   escondido (sem filtro na tela) */
.lm :is(#ColaboradorBox, #PessoasBox, .x_panel) #filtrosDiv + .row > div > div:empty,
.lm :is(#ColaboradorBox, #PessoasBox, .x_panel) #filtrosDiv + .row > div > #divRemoverTodosFiltros:has(> a[style*="none"]) {
    display: none;
}

.lm :is(#ColaboradorBox, #PessoasBox, .x_panel) #filtrosDiv + .row > div > div:has(> #btAdicionaFiltro) {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lm-space-2) var(--lm-space-4);
}

.lm :is(#ColaboradorBox, #PessoasBox, .x_panel) #btAdicionaFiltro {
    margin: 0;
}

/* Contagem ("N Pessoas Encontradas"): o .right do legado a soltava sozinha
   à direita; no estreito fica na linha de baixo, à esquerda */
.lm :is(#ColaboradorBox, #PessoasBox, .x_panel) #lblPessoasEncontradas {
    flex-basis: 100%;
    float: none;
    margin: 0;
    font-size: var(--lm-fs-sm);
}

/* <br> depois da linha de ações: o respiro vem das margens das linhas */
.lm :is(#ColaboradorBox, .x_panel) #filtrosDiv + .row + br,
.lm #PessoasBox .x_content:has(#filtrosDiv) + br {
    display: none;
}

/* --------------------------------------------------------------------------
   Pessoa, Empresa, Contrato e aviso de LGPD (só com filtros): rótulo em cima
   do campo; na grade larga, ao lado e alinhados com os filtros
   -------------------------------------------------------------------------- */
.lm #ListaDeContratos:has(> #filtrosDiv) > :is(#divPessoa, #divEmpresaComprovante, #PessoaContratos, #avisoLgpdDadosPessoais),
.lm #PessoasBox:has(#filtrosDiv) #ListaDePessoas > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lm-space-1) var(--lm-space-4);
    align-items: center;
    margin: 0 0 var(--lm-space-3);
}

.lm #ListaDeContratos:has(> #filtrosDiv) > :is(#divPessoa, #divEmpresaComprovante, #PessoaContratos, #avisoLgpdDadosPessoais)::before,
.lm #ListaDeContratos:has(> #filtrosDiv) > :is(#divPessoa, #divEmpresaComprovante, #PessoaContratos, #avisoLgpdDadosPessoais)::after,
.lm #PessoasBox:has(#filtrosDiv) #ListaDePessoas > .row::before,
.lm #PessoasBox:has(#filtrosDiv) #ListaDePessoas > .row::after {
    content: none; /* clearfix do .row (BS3): na grade viraria célula */
}

.lm #ListaDeContratos:has(> #filtrosDiv) > :is(#divPessoa, #divEmpresaComprovante, #PessoaContratos, #avisoLgpdDadosPessoais) > div,
.lm #PessoasBox:has(#filtrosDiv) #ListaDePessoas > .row > div {
    float: none;
    width: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
}

.lm #ListaDeContratos:has(> #filtrosDiv) > :is(#divPessoa, #divEmpresaComprovante, #PessoaContratos, #avisoLgpdDadosPessoais) > div:empty,
.lm #PessoasBox:has(#filtrosDiv) #ListaDePessoas > .row > div:empty {
    display: none;
}

/* Rótulo e valor em bloco, sem a margem de 10px que os alinhava ao campo
   na grade do Bootstrap (aqui o align-items centraliza) */
.lm #ListaDeContratos:has(> #filtrosDiv) :is(#divPessoa, #divEmpresaComprovante, #PessoaContratos) :is(.lbl-label, .lbl-content),
.lm #PessoasBox:has(#filtrosDiv) #ListaDePessoas .lbl-label {
    float: none;
    display: block;
    width: auto;
    margin: 0;
    text-align: left;
}

/* Contrato/Pessoas: a linha da Pessoa fica fora do .x_content; o mesmo
   respiro lateral das linhas de filtro */
.lm #PessoasBox:has(#filtrosDiv) #ListaDePessoas {
    clear: both;
    padding: 0 5px;
}

/* --------------------------------------------------------------------------
   Painel largo (≥ 640px): três colunas, as mesmas em todas as linhas
   (rótulo ou tipo do filtro | campo | resto, com o "x" e a contagem)
   -------------------------------------------------------------------------- */
@container lm-filtro (min-width: 640px) {
    .lm :is(#ColaboradorBox, #PessoasBox, .x_panel) #filtrosDiv > .form-inline:not([hidden]) {
        grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr) minmax(0, 1fr);
        grid-template-areas: "tipo valor remover";
        column-gap: var(--lm-space-4);
    }

    .lm :is(#ColaboradorBox, #PessoasBox, .x_panel) #filtrosDiv > .form-inline > div:nth-child(4) {
        justify-self: start;
    }

    .lm :is(#ColaboradorBox, #PessoasBox, .x_panel) #filtrosDiv + .row > div {
        display: grid;
        grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr) minmax(0, 1fr);
        align-items: start;
        column-gap: var(--lm-space-4);
    }

    .lm :is(#ColaboradorBox, #PessoasBox, .x_panel) #divRemoverTodosFiltros {
        grid-column: 1;
        justify-self: end;
    }

    .lm :is(#ColaboradorBox, #PessoasBox, .x_panel) #filtrosDiv + .row > div > div:has(> #btAdicionaFiltro) {
        grid-column: 2;
    }

    .lm :is(#ColaboradorBox, #PessoasBox, .x_panel) #lblPessoasEncontradas {
        flex-basis: auto;
        margin-left: auto;
        text-align: right;
    }

    .lm #ListaDeContratos:has(> #filtrosDiv) > :is(#divPessoa, #divEmpresaComprovante, #PessoaContratos, #avisoLgpdDadosPessoais),
    .lm #PessoasBox:has(#filtrosDiv) #ListaDePessoas > .row {
        grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr) minmax(0, 1fr);
    }

    .lm #ListaDeContratos:has(> #filtrosDiv) > :is(#divPessoa, #divEmpresaComprovante, #PessoaContratos) > div:has(> .lbl-label),
    .lm #PessoasBox:has(#filtrosDiv) #ListaDePessoas > .row > div:has(> .lbl-label) {
        grid-column: 1;
    }

    .lm #ListaDeContratos:has(> #filtrosDiv) > :is(#divPessoa, #divEmpresaComprovante, #PessoaContratos) > div:has(> .lbl-label) + div,
    .lm #PessoasBox:has(#filtrosDiv) #ListaDePessoas > .row > div:has(> .lbl-label) + div,
    .lm #ListaDeContratos:has(> #filtrosDiv) > #avisoLgpdDadosPessoais > div:not(:empty) {
        grid-column: 2;
    }

    .lm #ListaDeContratos:has(> #filtrosDiv) :is(#divPessoa, #divEmpresaComprovante, #PessoaContratos) .lbl-label,
    .lm #PessoasBox:has(#filtrosDiv) #ListaDePessoas .lbl-label {
        text-align: right;
    }
}

/* ==========================================================================
   LAYOUT MODERNO · TELAS · DUPLA VALIDAÇÃO (T3, onda 1)
   Modal da chave de segurança (#ModalValidacaoToken, ValidacaoToken.cshtml).
   É anexado ao <body> de várias telas (Ficha do Funcionário, Recibos,
   Comprovantes, Meus Documentos), em BS3 e BS5, então o escopo é o id do
   modal, e não o controller da página (T3 §4.1, partials reaproveitadas).
   ========================================================================== */

/* Um campo só: diálogo estreito, no lugar do modal-lg com 15% de margem no topo */
.lm #ModalValidacaoToken .modal-dialog {
    width: auto;
    max-width: 480px;
    height: auto; /* BS5 .modal-dialog-scrollable: a altura contava com a margem padrão */
    margin: 10vh auto !important; /* vence: ValidacaoToken.cshtml:3 style inline (15% auto) */
}

@media (max-width: 575px) {
    .lm #ModalValidacaoToken .modal-dialog {
        margin: 10vh var(--lm-space-2) !important; /* vence: idem */
    }
}

/* "Para realizar esta operação é necessário informar a chave…": observação */
.lm #ModalValidacaoToken .modal-header > p {
    margin: var(--lm-space-2) 0 0;
    color: var(--lm-text-muted);
    font-size: var(--lm-fs-sm);
}

/* BS5: o cabeçalho é flex e o markup é o do BS3 ("x" antes do título, texto
   de ajuda junto): título, "x" e, na linha de baixo, o texto */
.lm-bs538 #ModalValidacaoToken .modal-header {
    flex-wrap: wrap;
}

.lm-bs538 #ModalValidacaoToken .modal-header > .modal-title {
    flex: 1 1 0;
    order: 1;
}

.lm-bs538 #ModalValidacaoToken .modal-header > .close {
    order: 2;
    margin-left: auto;
}

.lm-bs538 #ModalValidacaoToken .modal-header > p {
    flex: 0 0 100%;
    order: 3;
}

/* Corpo: 60px fixos inline não cabiam o campo de 40px com o respiro da camada.
   O campo fica centralizado (col-xs-6 + col-md-offset-3 deixava metade da
   largura, à esquerda no celular e sem o offset no BS5). */
.lm #ModalValidacaoToken .modal-body {
    height: auto !important; /* vence: ValidacaoToken.cshtml:12 style inline (60px) */
}

.lm #ModalValidacaoToken .modal-body > [class*="col-"] {
    float: none;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    padding: 0;
}

/* ==========================================================================
   LAYOUT MODERNO · TELAS · FICHA DO FUNCIONÁRIO (T3, onda 0)
   Colaboracao (BS3 e BS5) e Gestao (BS3). O conteúdo chega por AJAX em
   #fichaDoFuncionario; o filtro de contratos vem do Contrato/Index.
   As views do módulo não têm estilo inline visual: rótulos, valores e
   subtítulos já vêm da T2.
   ========================================================================== */

/* Foto: no BS5 não existe .img-responsive e a foto ficava sem largura máxima */
.lm[data-lm-controller="FichaDoFuncionario"] .profile_img .avatar-view {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-md);
    background-color: var(--lm-surface);
}

/* Nome do colaborador (DadosPessoais: .lbl-subTitulo-2) é o título da ficha,
   não um subtítulo apagado */
.lm[data-lm-controller="FichaDoFuncionario"] .lbl-subTitulo-2 {
    color: var(--lm-text);
    font-size: var(--lm-fs-xl);
    font-weight: 700;
}

/* "* O colaborador não concedeu permissão…" (Contrato/Index: aviso de LGPD,
   só aparece aqui, na gestão): observação */
.lm[data-lm-controller="FichaDoFuncionario"] #avisoLgpdDadosPessoais {
    color: var(--lm-text-muted);
    font-size: var(--lm-fs-sm);
    font-style: normal !important; /* vence: Contrato/Index.cshtml:116 style inline (italic) */
}

/* Escala: o valor abre e fecha os horários (script do DadosContratuais) */
.lm[data-lm-controller="FichaDoFuncionario"] .lnkEscala {
    color: var(--lm-primary-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Linhas clicáveis de afastamentos e ocorrências (abrem o detalhe) */
.lm[data-lm-controller="FichaDoFuncionario"] tr.pointerCursor:hover > td {
    background-color: var(--lm-primary-tint);
}

/* ==========================================================================
   LAYOUT MODERNO · TELAS · HOME (T3, onda 1)
   BS3 e BS5. Mural (carrossel #carouselMural), Quadro de Aniversários (child
   action da Home), grade dos indicadores e esqueleto, e os modais de aviso
   que a Home injeta por AJAX. O visual do card do indicador vem da T2
   (29-indicadores.css).
   O Home.css do BS5 entra duas vezes (section styles e um <link> dentro do
   #Mural, no corpo) e o carousel.css do BS3 também entra no corpo: os
   seletores daqui vencem por especificidade (id), não pela ordem.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mural: a foto não tinha tamanho no BS5. O Home.css portou só a caixa de 40%;
   a regra que limitava a imagem ficou no carousel.css do BS3 (".carousel img",
   até 200px de altura). Sem ela a foto saía no tamanho natural, passava por
   cima da coluna do texto e o título era desenhado sobre ela.
   -------------------------------------------------------------------------- */
.lm[data-lm-controller="Home"] #carouselMural .boxNoticiaImagem img {
    max-width: 100%;
    height: auto;
    max-height: 200px;
    padding: 0; /* BS3: moldura de 2px + 5px de respiro */
    border: 0;
    border-radius: var(--lm-radius-md);
}

.lm[data-lm-controller="Home"] #carouselMural .titulo {
    color: var(--lm-text);
    font-size: var(--lm-fs-lg); /* legado: 18px */
    font-weight: 700;
}

.lm[data-lm-controller="Home"] #carouselMural .resumo {
    color: var(--lm-text-muted); /* legado: #9C9C9C */
    font-size: var(--lm-fs-md); /* legado: 15px */
}

/* "Postado em …": informação de apoio, sem itálico */
.lm[data-lm-controller="Home"] #carouselMural .datahora {
    color: var(--lm-text-muted);
    font-size: var(--lm-fs-sm);
    font-style: normal;
}

/* Hover do recado: o legado pinta o recado inteiro na cor do tema (com
   !important no custom.css); aqui só o título muda */
.lm[data-lm-controller="Home"] #carouselMural :is(.boxNoticia, .boxNoticiaSemImagem, .boxNoticiaUnico, .boxNoticiaUnicoSemImagem):hover {
    color: var(--lm-text) !important; /* vence: Home.css (BS5) e ".TemaX .boxNoticia…:hover" do custom.css (!important) */
}

.lm[data-lm-controller="Home"] #carouselMural :is(.boxNoticia, .boxNoticiaSemImagem, .boxNoticiaUnico, .boxNoticiaUnicoSemImagem):hover .titulo {
    color: var(--lm-primary-text);
}

/* Setas: no legado ficam quase invisíveis (#E9E9EB a 50%) e com 50px sobre o texto */
.lm[data-lm-controller="Home"] #carouselMural :is(.carousel-control-prev, .carousel-control-next) {
    color: var(--lm-text-muted);
    opacity: 1;
}

.lm[data-lm-controller="Home"] #carouselMural :is(.carousel-control-prev, .carousel-control-next):is(:hover, :focus) {
    color: var(--lm-primary-text);
}

.lm[data-lm-controller="Home"] #carouselMural :is(.carousel-control-prev-icon, .carousel-control-next-icon) {
    font-size: 28px; /* legado: 50px */
}

/* Indicadores (BS3: <li>; BS5: <button>) */
.lm[data-lm-controller="Home"] #carouselMural .carousel-indicators > :is(li, button) {
    border-color: var(--lm-border);
    border-radius: var(--lm-radius-pill);
    background-color: var(--lm-border); /* legado: #E9E9EB */
}

.lm[data-lm-controller="Home"] #carouselMural .carousel-indicators > .active {
    border-color: var(--lm-primary);
    background-color: var(--lm-primary); /* legado: cor por tema */
}

/* Celular: imagem em cima do texto (o legado mantém 40% × 60% lado a lado) */
@media (max-width: 575px) {
    .lm[data-lm-controller="Home"] #carouselMural :is(.boxNoticiaImagem, .boxNoticiaTextos) {
        float: none;
        width: 100%;
        max-width: none;
        text-align: left;
    }
}

/* --------------------------------------------------------------------------
   Quadro de Aniversários (#fotoAniversario/#textoAniversario, ids repetidos
   por quadro). No ≥ 768px o custom.css centraliza o texto com position
   absolute, e um texto maior que a foto vazava do painel: aqui a linha vira
   flex e o texto volta ao fluxo, centralizado com a foto.
   -------------------------------------------------------------------------- */
.lm[data-lm-controller="Home"] .row:has(> #fotoAniversario) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.lm[data-lm-controller="Home"] #textoAniversario {
    position: static;
    transform: none;
}

.lm[data-lm-controller="Home"] #fotoAniversario img {
    border-radius: var(--lm-radius-md);
}

.lm[data-lm-controller="Home"] #textoAniversario h2 {
    color: var(--lm-primary-text); /* legado: cor do tema (no Amarelo, 1,7:1) */
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Indicadores (#indicadoresHome): cards do mesmo tamanho em qualquer largura.
   O Indicadores.js distribui os cards em grupos (.grupoDeIndicadores: Meus
   Itens e Minha Equipe, alternados pelo toggle #visoesDosIndicadores, e a
   Composição Organizacional fixa abaixo) e, dentro de cada grupo, em linhas
   .row.top_tiles de 4, com col-lg-3 col-md-3 col-sm-6 col-xs-12 (no BS5 as
   mesmas classes, então 4 por linha já em 768px). Sem altura igual, o card
   de título longo fica mais alto que os vizinhos, e a quebra muda com a
   largura da tela e da sidebar; no BS3, entre 768 e 991px, os floats ainda
   desencontram em escada.
   Aqui cada grupo vira uma grade só: as linhas do JS saem da caixa
   (display: contents; a ordem continua a do JS), as colunas seguem o espaço
   disponível (no máximo 4, cada uma com pelo menos 220px) e todas as linhas
   têm a mesma altura. O título e o aviso de grupo vazio ocupam a linha
   inteira. O esqueleto usa a mesma grade.
   O grupo escondido pelo toggle recebe display: none inline (jQuery), que
   vence o display: grid daqui.
   -------------------------------------------------------------------------- */
.lm[data-lm-controller="Home"] #indicadoresHome .grupoDeIndicadores,
.lm[data-lm-controller="Home"] #esqueletoIndicadoresHome > .esqueletoIndicadores {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(220px, calc((100% - 3 * var(--lm-space-4)) / 4)), 1fr));
    grid-auto-rows: 1fr;
    gap: var(--lm-space-4);
    margin: 0 0 var(--lm-space-4);
}

.lm[data-lm-controller="Home"] #indicadoresHome .grupoDeIndicadores > .top_tiles {
    display: contents;
}

/* Clearfix do .row (BS3): dentro da grade, os pseudo-elementos virariam células */
.lm[data-lm-controller="Home"] :is(#indicadoresHome .grupoDeIndicadores > .top_tiles, #esqueletoIndicadoresHome > .esqueletoIndicadores)::before,
.lm[data-lm-controller="Home"] :is(#indicadoresHome .grupoDeIndicadores > .top_tiles, #esqueletoIndicadoresHome > .esqueletoIndicadores)::after {
    content: none;
}

/* Coluna do card (col-*): sem float, largura e respiro da grade do Bootstrap;
   estica o card até a altura da linha */
.lm[data-lm-controller="Home"] :is(#indicadoresHome .grupoDeIndicadores > .top_tiles, #esqueletoIndicadoresHome > .esqueletoIndicadores) > div {
    display: flex;
    float: none;
    width: auto;
    max-width: none;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
}

.lm[data-lm-controller="Home"] #indicadoresHome .indicadorLinkado > a {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

.lm[data-lm-controller="Home"] :is(#indicadoresHome, #esqueletoIndicadoresHome) .tile-stats {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

/* O número fica da altura do chip do ícone (48px) e o título e o subtítulo
   começam abaixo dele: usam a largura toda do card (a T2 reserva 72px à
   direita para o chip em todas as linhas) e quebram menos */
.lm[data-lm-controller="Home"] :is(#indicadoresHome, #esqueletoIndicadoresHome) .tile-stats .count {
    display: flex;
    align-items: center;
    min-height: 48px;
}

.lm[data-lm-controller="Home"] #indicadoresHome .tile-stats :is(h4, p) {
    margin-right: var(--lm-space-4);
}

/* line-height explícito: o AlteracaoDeSenha.css (do modal de troca de senha,
   que fica no corpo depois de fechado) tem "p { line-height: 240% }" global */
.lm[data-lm-controller="Home"] #indicadoresHome .tile-stats h4 {
    line-height: 1.35;
}

.lm[data-lm-controller="Home"] #indicadoresHome .tile-stats p {
    line-height: 1.5;
}

/* Título do grupo fixo e aviso de grupo vazio: linha inteira da grade */
.lm[data-lm-controller="Home"] #indicadoresHome :is(.tituloDoGrupoDeIndicadores, .semIndicadores) {
    grid-column: 1 / -1;
    margin: 0;
}

/* O título é a primeira linha da grade: altura do texto, não a de um card
   (as linhas seguintes continuam com 1fr, todas da mesma altura) */
.lm[data-lm-controller="Home"] #indicadoresHome .grupoDeIndicadores:has(> .tituloDoGrupoDeIndicadores) {
    grid-template-rows: auto;
}

.lm[data-lm-controller="Home"] #indicadoresHome .tituloDoGrupoDeIndicadores {
    margin-top: var(--lm-space-2);
    color: var(--lm-text);
    font-size: var(--lm-fs-lg);
    font-weight: 700;
    line-height: 1.35;
}

.lm[data-lm-controller="Home"] #indicadoresHome .semIndicadores {
    padding: var(--lm-space-4);
    border: 1px dashed var(--lm-border);
    border-radius: var(--lm-radius-lg);
    color: var(--lm-text-muted);
    font-size: var(--lm-fs-md);
    line-height: 1.5;
}

/* Toggle Meus Itens / Minha Equipe: controle segmentado em pílula. O
   Indicadores.js troca .btn-primary/.btn-default e o aria-pressed; aqui o
   visual segue só o aria-pressed (o id vence as regras de canto do
   .btn-group do BS3 e do BS5) */
.lm[data-lm-controller="Home"] #visoesDosIndicadores {
    display: inline-flex;
    gap: var(--lm-space-1);
    margin: 0 0 var(--lm-space-4);
    padding: var(--lm-space-1);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-pill);
    background: var(--lm-surface);
    box-shadow: var(--lm-shadow-card);
}

.lm[data-lm-controller="Home"] #visoesDosIndicadores > .btn {
    float: none;
    min-width: 132px;
    margin: 0;
    padding: var(--lm-space-2) var(--lm-space-4);
    border: 0;
    border-radius: var(--lm-radius-pill);
    background: transparent;
    color: var(--lm-text-muted);
    font-weight: 600;
}

.lm[data-lm-controller="Home"] #visoesDosIndicadores > .btn:hover {
    background: var(--lm-surface-hover);
    color: var(--lm-text);
}

.lm[data-lm-controller="Home"] #visoesDosIndicadores > .btn[aria-pressed="true"] {
    background: var(--lm-primary-fill);
    color: var(--lm-on-primary);
}

.lm[data-lm-controller="Home"] #visoesDosIndicadores > .btn[aria-pressed="true"]:hover {
    background: var(--lm-primary-fill-hover);
}

/* Celular: o toggle ocupa a largura e os botões dividem o espaço */
@media (max-width: 575px) {
    .lm[data-lm-controller="Home"] #visoesDosIndicadores {
        display: flex;
    }

    .lm[data-lm-controller="Home"] #visoesDosIndicadores > .btn {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* Indicador zerado: visual desabilitado (continua clicável), sem a cor do
   tema no chip, no número e no subtítulo. O Indicadores.css legado aplica
   opacidade e cinza; aqui a camada desenha o estado com os tokens */
.lm[data-lm-controller="Home"] #indicadoresHome .indicadorZerado .tile-stats {
    border-style: dashed;
    background: var(--lm-surface-2);
    box-shadow: none;
    opacity: 1;
    filter: none;
}

.lm[data-lm-controller="Home"] #indicadoresHome .indicadorZerado .tile-stats .icon {
    background-color: var(--lm-surface-hover);
}

.lm[data-lm-controller="Home"] #indicadoresHome .indicadorZerado .tile-stats :is(.icon i, .count, h4, p) {
    color: var(--lm-text-muted);
}

.lm[data-lm-controller="Home"] #indicadoresHome .indicadorZerado.indicadorLinkado .tile-stats:hover {
    border-style: solid;
}

/* --------------------------------------------------------------------------
   Esqueleto dos indicadores (enquanto carregam): barras no cinza da camada,
   com a altura das linhas do card, para o bloco não pular quando os
   indicadores chegam
   -------------------------------------------------------------------------- */
.lm[data-lm-controller="Home"] .esqueletoIndicadores .tile-stats .icon,
.lm[data-lm-controller="Home"] .esqueletoIndicadores .tile-stats :is(p, h4),
.lm[data-lm-controller="Home"] .esqueletoIndicadores .tile-stats .count_icon {
    border-radius: var(--lm-radius-sm);
    background-color: var(--lm-surface-hover); /* legado: lightgray */
}

.lm[data-lm-controller="Home"] #esqueletoIndicadoresHome .tile-stats .count {
    width: auto; /* legado: 25 × 55px */
    height: auto;
}

.lm[data-lm-controller="Home"] #esqueletoIndicadoresHome .tile-stats .count .count_icon {
    width: 32px; /* legado: 25 × 45px */
    height: 28px;
    margin: 0;
}

.lm[data-lm-controller="Home"] #esqueletoIndicadoresHome .tile-stats h4 {
    width: min(150px, calc(100% - 2 * var(--lm-space-4)));
    height: 14px;
    margin: 3px var(--lm-space-4) 0;
}

.lm[data-lm-controller="Home"] #esqueletoIndicadoresHome .tile-stats p {
    width: min(125px, calc(100% - 2 * var(--lm-space-4)));
    height: 13px;
    margin: 10px var(--lm-space-4) 3px;
}

/* --------------------------------------------------------------------------
   Modais de aviso injetados na Home (documentos pendentes e diferença do
   consignado). O Home.css do BS5 os fixa nas medidas do BS3 por id (raio de
   6px, sombra escura, "x" de 12px a 20% de opacidade); aqui voltam ao padrão
   dos modais da camada (24-modais.css).
   -------------------------------------------------------------------------- */
.lm[data-lm-controller="Home"] :is(#ModalVencimentoMeusDocumentos, #ModalAvisoDiferencaConsignado) .modal-content {
    border-radius: var(--lm-radius-lg);
    box-shadow: var(--lm-shadow-overlay);
}

.lm[data-lm-controller="Home"] :is(#ModalVencimentoMeusDocumentos, #ModalAvisoDiferencaConsignado) .modal-header {
    padding: var(--lm-space-4) var(--lm-space-5);
}

.lm[data-lm-controller="Home"] :is(#ModalVencimentoMeusDocumentos, #ModalAvisoDiferencaConsignado) .modal-body {
    padding: var(--lm-space-5);
}

.lm[data-lm-controller="Home"] :is(#ModalVencimentoMeusDocumentos, #ModalAvisoDiferencaConsignado) .modal-footer {
    padding: var(--lm-space-4) var(--lm-space-5);
}

.lm[data-lm-controller="Home"] :is(#ModalVencimentoMeusDocumentos, #ModalAvisoDiferencaConsignado) .modal-body h5 {
    line-height: 1.5; /* legado: 1.1 */
}

.lm[data-lm-controller="Home"] :is(#ModalVencimentoMeusDocumentos, #ModalAvisoDiferencaConsignado) .modal-header > .btn-close {
    width: 32px;
    height: 32px;
    margin: 0 0 0 auto;
    background-size: 11px;
    opacity: .7;
}

.lm[data-lm-controller="Home"] :is(#ModalVencimentoMeusDocumentos, #ModalAvisoDiferencaConsignado) .modal-header > .btn-close:is(:hover, :focus) {
    opacity: 1;
}

.lm[data-lm-controller="Home"] :is(#ModalVencimentoMeusDocumentos, #ModalAvisoDiferencaConsignado) .modal-footer > * {
    margin: 0 0 0 var(--lm-space-2); /* legado: 0 5px 5px 0 */
}

.lm[data-lm-controller="Home"] :is(#ModalVencimentoMeusDocumentos, #ModalAvisoDiferencaConsignado) .modal-footer .btn {
    font-size: var(--lm-fs-md);
    line-height: 1.2;
}

/* Documentos pendentes: o corpo tem 130px fixos inline e o texto vazava */
.lm[data-lm-controller="Home"] #ModalVencimentoMeusDocumentos .modal-body {
    height: auto !important; /* vence: ModalAvisoVencimentoDocumentos.cshtml:17 style inline (130px) */
    min-height: 130px;
}

/* Modais de treinamentos: cabeçalho fixo na cor da superfície da camada */
.lm .tabelaDeTreinamentosHome > table > thead > tr > th {
    background-color: var(--lm-surface);
}

/* ==========================================================================
   LAYOUT MODERNO · TELAS · MURAL (T3, onda 1)
   Só BS3 (o MuralController usa View() sem versão). Quadro do Mural (Index:
   DataTable de uma coluna em que cada linha é um card) e Recado (detalhe,
   com a galeria/lightbox própria do MuralGaleria.js).
   O Mural.css entra no corpo da página, DEPOIS da camada, e o hover do legado
   (Mural.css e ".TemaX .boxNoticiaQuadroDoMural:hover", no custom.css) usa
   !important: por isso os !important daqui.
   O Mural da Home é outro componente (.boxNoticia*): ver Telas/Home.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Lista: a tabela só sustenta os cards (sem a listra e a divisória da T2)
   -------------------------------------------------------------------------- */
.lm[data-lm-controller="Mural"] #tabelaMural > tbody > tr {
    background-color: transparent;
}

.lm[data-lm-controller="Mural"] #tabelaMural > tbody > tr > td {
    padding: 0 0 var(--lm-space-3);
    border-top: 0;
}

.lm[data-lm-controller="Mural"] .boxNoticiaQuadroDoMural {
    padding: var(--lm-space-3);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-lg);
    background-color: var(--lm-surface);
    transition: border-color var(--lm-dur) var(--lm-ease);
}

.lm[data-lm-controller="Mural"] .boxNoticiaQuadroDoMural:hover,
.lm[data-lm-controller="Mural"] .boxNoticiaQuadroDoMural:focus {
    border-color: var(--lm-primary) !important; /* vence: Mural.css e ".TemaX .boxNoticiaQuadroDoMural:hover" (!important) */
    color: var(--lm-text) !important; /* vence: idem (pintava o card todo na cor do tema) */
}

/* Imagem: sem a moldura de 2px + 5px de respiro, com cantos arredondados */
.lm[data-lm-controller="Mural"] .boxNoticiaQuadroDoMural img {
    padding: 0;
    border: 0;
    border-radius: var(--lm-radius-md);
}

.lm[data-lm-controller="Mural"] .boxNoticiaQuadroDoMural .titulo {
    color: var(--lm-text);
    font-size: var(--lm-fs-lg); /* legado: 18px */
    font-weight: 700;
}

.lm[data-lm-controller="Mural"] .boxNoticiaQuadroDoMural:is(:hover, :focus) .titulo {
    color: var(--lm-primary-text);
}

.lm[data-lm-controller="Mural"] .boxNoticiaQuadroDoMural .resumo {
    color: var(--lm-text-muted); /* legado: #9C9C9C (2,8:1) */
    font-size: var(--lm-fs-md); /* legado: 15px */
}

/* "Postado em …": informação de apoio, sem itálico */
.lm[data-lm-controller="Mural"] .boxNoticiaQuadroDoMural .datahora {
    color: var(--lm-text-muted);
    font-size: var(--lm-fs-sm);
    font-style: normal;
}

/* Celular: imagem em cima do texto (o legado mantém 40% × 60% lado a lado) */
@media (max-width: 575px) {
    .lm[data-lm-controller="Mural"] .boxNoticiaQuadroDoMuralUnicoImagem,
    .lm[data-lm-controller="Mural"] .boxNoticiaQuadroDoMuralTextos {
        float: none;
        width: 100%;
        max-width: none;
        text-align: left;
    }
}

/* --------------------------------------------------------------------------
   Recado (detalhe)
   -------------------------------------------------------------------------- */
.lm[data-lm-controller="Mural"] .recadoMuralImagemDestaque img,
.lm[data-lm-controller="Mural"] .recadoMuralGrupoImagens img {
    padding: 0;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-md);
    transition: border-color var(--lm-dur) var(--lm-ease);
}

.lm[data-lm-controller="Mural"] .recadoMuralImagemDestaque img:is(:hover, :focus),
.lm[data-lm-controller="Mural"] .recadoMuralGrupoImagens img:is(:hover, :focus) {
    border-color: var(--lm-primary) !important; /* vence: Mural.css e ".TemaX .recadoMural…Imagem… img:hover" (!important) */
}

.lm[data-lm-controller="Mural"] .recadoMuralTextos .titulo {
    color: var(--lm-text);
    font-weight: 700;
}

.lm[data-lm-controller="Mural"] .recadoMuralTextos .resumo {
    color: var(--lm-text-muted); /* legado: #9C9C9C */
}

.lm[data-lm-controller="Mural"] .recadoMuralTextos .datahora {
    color: var(--lm-text-muted);
    font-size: var(--lm-fs-sm);
    font-style: normal;
}

/* Celular: galeria em cima do texto (as miniaturas passavam da coluna de 40%) */
@media (max-width: 575px) {
    .lm[data-lm-controller="Mural"] .recadoMuralImagens {
        float: none;
        width: 100%;
        max-width: none;
        margin: 0 0 var(--lm-space-4);
    }
}

/* --------------------------------------------------------------------------
   Galeria (lightbox do MuralGaleria.js): fundo na cor do overlay da camada.
   A opacidade continua a do fade do JS.
   -------------------------------------------------------------------------- */
.lm[data-lm-controller="Mural"] #GaleriaBackGround {
    background: rgb(var(--lm-overlay-rgb)); /* legado: #000 */
}

.lm[data-lm-controller="Mural"] #GaleiraImagem img,
.lm[data-lm-controller="Mural"] #GaleiraImagem video {
    border: 0;
    border-radius: var(--lm-radius-md);
}

/* ==========================================================================
   LAYOUT MODERNO · TELAS · ORGANOGRAMA (T3, onda 3)
   Colaboracao e Gestao, BS3 e BS5. Dois componentes, conforme a configuração:
   o novo (d3-org-chart: OrganogramaD3.js/.css) e o antigo (Google Charts:
   Organograma.js/.css). O modal de perfil (#OrgPerfilBox) serve aos dois.
   As cores configuradas pelo cliente (borda esquerda inline com a cor do
   cargo/função) não mudam (T3 §4.3, item 11). O tamanho dos nós é calculado
   no JS (nodeWidth/nodeHeight): aqui só cor, raio e tipografia.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Barra de ações. O OrganogramaD3.css deixa os botões de texto com 32px
   para acompanhar os de ícone (.btn-table), mas o min-height de 40px da
   camada vence esse height: os de ícone passam a 40px também (alvo de toque
   da T3 §4.3, item 13).
   -------------------------------------------------------------------------- */
.lm[data-lm-controller="Organograma"] #divOrganogramaAcoes .btn.btn-table {
    width: var(--lm-control-h);
    min-width: var(--lm-control-h);
    height: var(--lm-control-h);
    min-height: var(--lm-control-h);
}

.lm[data-lm-controller="Organograma"] .OrgD3Acoes {
    gap: var(--lm-space-2); /* legado: 4px */
}

/* O espaço entre os botões vem só do gap (Gentelella: margin 0 5px 5px 0 em todo .btn) */
.lm[data-lm-controller="Organograma"] .OrgD3Acoes .btn {
    margin: 0;
}

/* Componente antigo: os dois botões de zoom ficavam colados (Organograma.css) */
.lm[data-lm-controller="Organograma"] #divOrganogramaAcoes .btn-ZoomMenos {
    margin-right: var(--lm-space-2);
}

.lm[data-lm-controller="Organograma"] .OrgD3Acoes .OrgD3BtnTexto {
    height: auto; /* legado: 32px */
    padding: 6px var(--lm-space-4);
    line-height: 1.2; /* legado: 30px */
}

.lm[data-lm-controller="Organograma"] .OrgD3Acoes .OrgD3BtnTexto i {
    margin-right: 0; /* o gap do .btn já separa ícone e texto */
}

.lm[data-lm-controller="Organograma"] .OrgD3Separador {
    background-color: var(--lm-border); /* legado: #D9D7DE */
}

/* --------------------------------------------------------------------------
   Nós do d3-org-chart
   -------------------------------------------------------------------------- */
.lm[data-lm-controller="Organograma"] .OrgD3Card {
    border-top-color: var(--lm-border);
    border-right-color: var(--lm-border);
    border-bottom-color: var(--lm-border);
    border-radius: var(--lm-radius-md);
    background-color: var(--lm-surface);
}

.lm[data-lm-controller="Organograma"] .OrgD3Nome {
    color: var(--lm-text); /* legado: #08011E */
    font-weight: 600;
}

.lm[data-lm-controller="Organograma"] .OrgD3Cargo,
.lm[data-lm-controller="Organograma"] .OrgD3Unidade,
.lm[data-lm-controller="Organograma"] .OrgD3AvatarIcone {
    color: var(--lm-text-muted); /* legado: #716E7B e #A9A6B0 (2,4:1) */
}

.lm[data-lm-controller="Organograma"] .OrgD3Avatar {
    background-color: var(--lm-surface-hover);
}

/* Nó raiz (empresa): chip do tema no lugar da borda cinza de 2px */
.lm[data-lm-controller="Organograma"] .OrgD3Raiz {
    border: 1px solid var(--lm-primary-soft-2);
    background-color: var(--lm-primary-soft);
}

.lm[data-lm-controller="Organograma"] .OrgD3RaizConteudo {
    color: var(--lm-text);
    font-weight: 600;
}

.lm[data-lm-controller="Organograma"] .OrgD3RaizConteudo i {
    color: var(--lm-primary-text);
}

/* "*Este colaborador não possui classificação gerencial…" (OrganogramaD3.js):
   é observação (T2 §5.6), então fica discreta. */
.lm[data-lm-controller="Organograma"] #mensagemRodapeOrganograma {
    color: var(--lm-text-muted) !important; /* vence: OrganogramaD3.js ExibirMensagemRodapeOrganograma, style inline (#D9534F) */
    font-size: var(--lm-fs-sm);
    font-style: normal !important; /* vence: idem (italic) */
}

/* --------------------------------------------------------------------------
   Componente antigo (Google Charts)
   -------------------------------------------------------------------------- */
.lm[data-lm-controller="Organograma"] .Organograma .OrgHome,
.lm[data-lm-controller="Organograma"] .Organograma .OrgColab {
    border-color: var(--lm-border-strong); /* legado: #777 */
    border-radius: var(--lm-radius-md);
    background-color: var(--lm-surface);
}

/* Selecionado: fundo do tema no lugar do degradê (".TemaX .Organograma .OrgHome.Selecionado") */
.lm[data-lm-controller="Organograma"] .Organograma .OrgHome.Selecionado,
.lm[data-lm-controller="Organograma"] .Organograma .OrgColab.Selecionado {
    background: var(--lm-primary-soft);
}

.lm[data-lm-controller="Organograma"] .Organograma .OrgColab .OrgConteudo .OrgDados .OrgCargo {
    color: var(--lm-text-muted); /* legado: #999 (2,8:1) */
}

.lm[data-lm-controller="Organograma"] #divOrganograma .google-visualization-orgchart-linebottom {
    border-bottom-color: var(--lm-border-strong);
}

.lm[data-lm-controller="Organograma"] #divOrganograma .google-visualization-orgchart-lineleft {
    border-left-color: var(--lm-border-strong);
}

.lm[data-lm-controller="Organograma"] #divOrganograma .google-visualization-orgchart-lineright {
    border-right-color: var(--lm-border-strong);
}

.lm[data-lm-controller="Organograma"] #divOrganograma .google-visualization-orgchart-linetop {
    border-top-color: var(--lm-border-strong);
}

/* --------------------------------------------------------------------------
   Modal de perfil (#OrgPerfilBox, anexado ao body pelos dois componentes).
   O fundo continua com o fade do JS (opacity animada); só a cor muda.
   -------------------------------------------------------------------------- */
.lm[data-lm-controller="Organograma"] #OrgPerfilBackGround {
    background: rgb(var(--lm-overlay-rgb)); /* legado: #000 */
}

.lm[data-lm-controller="Organograma"] #OrgPerfilBox .OrgPerfilColab {
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: var(--lm-radius-lg);
    background-color: var(--lm-surface);
    box-shadow: var(--lm-shadow-overlay);
}

/* ==========================================================================
   LAYOUT MODERNO · TELAS · PRÉ-ADMISSÃO / ADMISSÃO DIGITAL (T3, onda 0)
   Gestao, BS3 e BS5. Cadastro (#PreAdmissaoCadastro) e visualização
   (#PreAdmissaoVisualizar): abas #TabsPreAdmissao, accordions e anexos.
   No BS3 o PreAdmissao.css da tela entra no corpo da página, DEPOIS da
   camada, e as regras por tema (".TemaX ul.bar_tabs > li…", 0-2-2 a 0-3-3)
   empatam com Componentes/27-abas.css e vencem: aqui o id das abas dá a
   precedência. No BS5 o CSS da tela vem antes (section styles).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Abas (sublinhado da T2, sem as bordas de 2px e a borda direita de 7px por tema)
   -------------------------------------------------------------------------- */
.lm[data-lm-controller="PreAdmissao"] #TabsPreAdmissao {
    border-bottom: 1px solid var(--lm-border); /* legado: 2px na cor do tema */
}

.lm[data-lm-controller="PreAdmissao"] #TabsPreAdmissao > li {
    margin: 0 0 -1px !important; /* vence: PreAdmissao.css (BS3), margin-top negativo por navegador e com !important no ≤ 450px (li.active.cima, li.baixo) */
    border: 0 !important; /* vence: idem (li.baixo: border-bottom inherit !important) */
    background: transparent;
}

.lm[data-lm-controller="PreAdmissao"] #TabsPreAdmissao > li > a {
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--lm-text-muted);
    font-size: var(--lm-fs-md); /* legado: 13px */
    font-weight: 600;
}

/* Antes da regra da aba ativa, que tem o mesmo peso e precisa vencer */
.lm[data-lm-controller="PreAdmissao"] #TabsPreAdmissao > li > a:hover,
.lm[data-lm-controller="PreAdmissao"] #TabsPreAdmissao > li > a:focus {
    border-bottom-color: var(--lm-border-strong);
    color: var(--lm-text);
}

.lm[data-lm-controller="PreAdmissao"] #TabsPreAdmissao > li:is(.active, .aba-ativa) > a,
.lm[data-lm-controller="PreAdmissao"] #TabsPreAdmissao > li > a.active {
    border-bottom-color: var(--lm-primary-text);
    color: var(--lm-primary-text); /* legado: cor por tema, em negrito */
}

/* --------------------------------------------------------------------------
   Accordions (div.accordion > div.panel > a.buttonTab.panel-heading +
   div.painel.panel-collapse): o card é o .panel da T2; saem as bordas cinza
   do cabeçalho e do conteúdo (PreAdmissao.css: "1px solid gray").
   -------------------------------------------------------------------------- */
.lm[data-lm-controller="PreAdmissao"] .accordion .panel > .buttonTab {
    border: 0;
    border-bottom: 1px solid var(--lm-border);
}

.lm[data-lm-controller="PreAdmissao"] .accordion .panel > .buttonTab.collapsed {
    border-bottom-color: transparent;
}

.lm[data-lm-controller="PreAdmissao"] .accordion .painel {
    border: 0;
}

.lm[data-lm-controller="PreAdmissao"] .accordion .panel-title {
    font-size: var(--lm-fs-md) !important; /* vence: PreAdmissao.css ".panel-title { 15px !important }" (BS3 e BS5) */
}

/* --------------------------------------------------------------------------
   Anexos no BS3: download e excluir não têm as classes file-btn-* (só o BS5
   tem), e trazem a borda inline. Mesmos botões de ícone do 22-formularios.css.
   -------------------------------------------------------------------------- */
.lm-bs341[data-lm-controller="PreAdmissao"] a[id^="downloadArquivo"].btn,
.lm-bs341[data-lm-controller="PreAdmissao"] a[id^="deleteArquivo"].btn {
    width: var(--lm-control-h);
    min-width: var(--lm-control-h);
    padding: 0;
    gap: 0;
    border-radius: var(--lm-radius-md);
}

.lm-bs341[data-lm-controller="PreAdmissao"] a[id^="downloadArquivo"].btn:not(.btn-inativo) {
    border-color: var(--lm-primary-soft) !important; /* vence: cores com !important de 20-botoes.css e style inline (#CCC) */
    background-color: var(--lm-primary-soft) !important;
    color: var(--lm-primary-text) !important;
}

.lm-bs341[data-lm-controller="PreAdmissao"] a[id^="deleteArquivo"].btn {
    border-color: var(--lm-danger-soft) !important; /* vence: .btn-danger de 20-botoes.css e style inline (#D43F3A) */
    background-color: var(--lm-danger-soft) !important;
    color: var(--lm-danger-text) !important;
}

/* ==========================================================================
   LAYOUT MODERNO · TELAS · SALDO DE FÉRIAS (T3, onda 0)
   Colaboracao e Gestao, BS3 e BS5 (a página vem pelo child action
   SaldoDeFeriasIndex). O DashboardsSaldoDeFerias.css e o bundle da tela
   reinjetado pelo cronograma entram no <body>, DEPOIS da camada: aqui os
   seletores são mais fortes que os deles (0-3-0), e não só iguais.
   A data-limite vencida (.red) e a situação do contrato (.circulo-*) ficam
   em Componentes/26-badges.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Dashboards da gestão (A vencer, Vencidas, Em férias, Programadas,
   Sobrepostas): o chip do ícone da T2, menor, porque são 5 por linha.
   O legado deixa o ícone de 45px num quadrado de 20px por trás do texto.
   -------------------------------------------------------------------------- */
.lm[data-lm-controller="SaldoDeFerias"] .dashboardsSaldoDeFerias .tile-stats {
    padding: var(--lm-space-4) 0 var(--lm-space-3); /* legado: 12px 6px */
}

.lm[data-lm-controller="SaldoDeFerias"] .dashboardsSaldoDeFerias .tile-stats .icon {
    top: var(--lm-space-4);
    right: var(--lm-space-3);
    width: 36px;
    height: 36px;
    border-radius: var(--lm-radius-sm);
}

.lm[data-lm-controller="SaldoDeFerias"] .dashboardsSaldoDeFerias .tile-stats .icon i {
    font-size: 17px; /* legado: 45px */
}

/* Só o número divide a linha com o chip; título e rótulo ficam abaixo dele */
.lm[data-lm-controller="SaldoDeFerias"] .dashboardsSaldoDeFerias .tile-stats .count {
    margin-right: 56px;
    font-size: var(--lm-fs-2xl); /* legado: 34px */
    line-height: 1.3;
}

.lm[data-lm-controller="SaldoDeFerias"] .dashboardsSaldoDeFerias .tile-stats h4,
.lm[data-lm-controller="SaldoDeFerias"] .dashboardsSaldoDeFerias .tile-stats p {
    margin-right: var(--lm-space-3);
}

.lm[data-lm-controller="SaldoDeFerias"] .dashboardsSaldoDeFerias .tile-stats p {
    font-weight: 600; /* legado: bold */
}

/* Selecionado: o legado fixa o roxo (#69338B / #EFE6F4) em todos os temas */
.lm[data-lm-controller="SaldoDeFerias"] .dashboardsSaldoDeFerias .dashboardSelecionado .tile-stats {
    border: 1px solid var(--lm-primary);
    background-color: var(--lm-primary-soft);
}

.lm[data-lm-controller="SaldoDeFerias"] .dashboardsSaldoDeFerias .dashboardSelecionado .tile-stats .icon {
    background-color: var(--lm-surface);
}

.lm[data-lm-controller="SaldoDeFerias"] .dashboardsSaldoDeFerias .dashboardSelecionado .tile-stats :is(.count, h4, p, .icon i) {
    color: var(--lm-primary-text);
}

/* --------------------------------------------------------------------------
   Cronograma (#tabelaCronograma): dias sem férias em cinza claro, dias de
   férias na cor do tema (.bgCronograma já é por tema no custom.css), com
   divisória branca no lugar da borda cinza.
   -------------------------------------------------------------------------- */
.lm[data-lm-controller="SaldoDeFerias"] #tabelaCronograma .ajustaData {
    border-color: var(--lm-surface); /* legado: solid 1px gray (SaldoDeFerias.css) */
}

.lm[data-lm-controller="SaldoDeFerias"] #tabelaCronograma td.ajustaData:not(.bgCronograma) {
    background-color: var(--lm-surface-hover) !important; /* vence: CronogramaTabela.cshtml:49 style inline (#E9E9EB) */
}

.lm[data-lm-controller="SaldoDeFerias"] #tabelaCronograma td.ajustaData.bgCronograma {
    background-color: var(--lm-primary);
}

/* ==========================================================================
   LAYOUT MODERNO · TELAS · SOLICITAÇÕES (T3, onda 0)
   Só BS3. Minhas Solicitações, coletivas (aprovar, executar, confirmar
   reajustes), visualizar, aprovar, executar e iniciar solicitação.
   Os status das solicitações são texto puro (sem cor) no legado e ficam assim.
   ========================================================================== */

/* "* Exibindo solicitações com data de abertura…" (#msgPeriodo): observação */
.lm[data-lm-controller="Solicitacoes"] #msgPeriodo {
    color: var(--lm-text-muted) !important; /* vence: SolicitacoesIndex.cshtml:133 e IndexColetiva.cshtml:185 style inline (black, bold, 12px) */
    font-size: var(--lm-fs-sm) !important; /* vence: idem */
    font-weight: 400 !important; /* vence: idem */
}

/* "Campos com * são de preenchimento obrigatório" (CamposObrigatorios.cshtml,
   div sem classe): observação */
.lm[data-lm-controller="Solicitacoes"] div[style*="font-style: italic"] {
    color: var(--lm-text-muted);
    font-size: var(--lm-fs-sm);
    font-style: normal !important; /* vence: CamposObrigatorios.cshtml:8 style inline (italic) */
}

/* Asterisco de obrigatório (CamposInsercao, CamposInsercaoAutHE,
   CamposObrigatorios): continua vermelho, no tom de texto */
.lm[data-lm-controller="Solicitacoes"] span[style*="color: red"],
.lm[data-lm-controller="Solicitacoes"] span[style*="color:red"] {
    color: var(--lm-danger-text) !important; /* vence: style inline (red) */
}

/* Erros e avisos da solicitação (#ModalNotificacao montado pelo
   Solicitacoes.js/SolicitacoesColetivas.js): é alerta, fica vermelho */
.lm[data-lm-controller="Solicitacoes"] #ModalNotificacao .lbl-content[style*="color"] {
    color: var(--lm-danger-text) !important; /* vence: style inline (#F00) montado no JS */
}

/* "Detalhes da solicitação": o SolicitacoesColetivas.js:1168 pinta o corpo do
   #ModalNotificacao de #E9E9EB, e a cor fica para os modais seguintes */
.lm[data-lm-controller="Solicitacoes"] #ModalNotificacao .modal-body[style*="background"] {
    background: var(--lm-surface) !important; /* vence: style inline (#E9E9EB) montado no JS */
}

/* Contador do detalhamento (IniciarSolicitacao: "0 / 795") */
.lm[data-lm-controller="Solicitacoes"] #DetalhamentoCounter {
    color: var(--lm-text-muted); /* legado: gray (custom.css) */
}

/* Modal de solicitações sem usuário solicitante: a tela pede min-width: 0,
   mas a .table-width (700px com !important) vencia e o contêiner com
   overflow-x: hidden cortava a tabela em telas estreitas */
.lm[data-lm-controller="Solicitacoes"] #tabelaSolicitacoesSemUsuario {
    min-width: 0 !important; /* vence: custom.css ".table-width" (!important) */
}

/* ==========================================================================
   LAYOUT MODERNO · 99 · IMPRESSÃO
   Neutraliza a camada no papel: sem shell, sem fundo, sem blur, sem sombra.
   Critério (T1-CA14): imprimir com a flag não pode ficar pior do que sem ela.
   ========================================================================== */

@media print {
    .lm .top_nav,
    .lm .col-md-3.left_col,
    .lm .lm-sidebar-overlay,
    .lm .voltarAoTopo,
    .lm .main_container > footer {
        display: none !important;
    }

    .lm body,
    .lm body .container.body .right_col {
        background: #FFFFFF !important;
    }

    .lm body .container.body .right_col {
        min-height: 0 !important; /* o custom.js grava min-height inline */
        margin: 0 !important;
        padding: 0 !important;
    }

    .lm .right_col .page-title .title_left h3 {
        color: #000000 !important;
    }

    .lm .x_panel,
    .lm .login_content,
    .lm.lm-erro .jumbotron {
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .lm .login_content,
    .lm .lm-sidebar-overlay,
    .lm .modal-backdrop {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}