/*
 * ============================================================================
 *  FIPLAN — Skin Redesign
 * ============================================================================
 *  Origem da NF: docs/SUSTENTACAO/REDESIGN/Fiplan_Login_e_Home.html
 *  Status:       docs/SUSTENTACAO/REDESIGN/STATUS.md
 *
 *  Este arquivo é carregado DEPOIS dos CSS padrão do FIPLAN (Bootstrap,
 *  Fiplan.css, Grade.css, Menu.css) — sobrescreve por cascata.
 *
 *  Encoding: UTF-8 (não usar acentos diretamente; preferir códigos hexa em
 *  comentários para garantir compatibilidade caso o arquivo seja editado
 *  num ambiente Windows-1252).
 *
 *  Estratégia: escopar regras por classe raiz (.skin-login-page) para evitar
 *  vazamento visual para outras telas do FIPLAN enquanto as próximas ondas
 *  não foram aplicadas.
 *
 *  Estrutura:
 *  1) Tokens globais (cores, fontes, sombras, raios)
 *  2) Importação de fontes (Google Fonts)
 *  3) Onda 1 — Login (escopo .skin-login-page)
 * ============================================================================
 */

/* Troca de pagina suave (02/10/2026, piscada): o navegador cruza a tela
   velha com a nova em vez de mostrar o branco entre as duas. Vale entre
   paginas do mesmo site que tenham esta regra (legado: skin-redesign.css e
   Fiplan.jsp; .app: skin-app.css). Chrome/Edge 126+; Firefox ignora. */
@view-transition {
    navigation: auto;
}

/* ---------------------------------------------------------------------------
 * 1) TOKENS GLOBAIS
 * --------------------------------------------------------------------------- */
:root {
    /* Paleta MT */
    --skin-azul-primario:   #0A3D6B;
    --skin-azul-deep:       #051E3A;
    --skin-azul-medio:      #0D5BA6;
    --skin-azul-claro:      #1A7FDB;
    --skin-azul-soft:       #EBF2FA;
    --skin-dourado:         #D4A843;
    --skin-dourado-claro:   #E8C96A;
    --skin-verde-mt:        #1B7A3D;
    --skin-amarelo-mt:      #FFC400;

    /* Neutros */
    --skin-branco:          #FFFFFF;
    --skin-cinza-bg:        #F0F4F8;
    --skin-cinza-bg-2:      #EEF0F7;
    --skin-cinza-borda:     #CBD5E1;
    --skin-cinza-borda-2:   #CFD4E4;
    --skin-cinza-texto:     #64748B;
    --skin-cinza-texto-2:   #4A5070;
    --skin-cinza-texto-3:   #7C829A;
    --skin-text:            #0E1226;
    --skin-line:            #E3E6F0;

    /* Semânticos */
    --skin-ok:              #1A8A3B;
    --skin-warn:            #B46A00;
    --skin-danger:          #C5322B;
    --skin-erro:            #DC2626;

    /* Cores das operacoes no menu lateral. Sao um conjunto proprio (mais
       saturado que os tokens de status acima) porque servem de codigo visual
       para o TIPO da acao: criar, ler, alterar, remover. */
    --skin-op-criar:        #16A34A;
    --skin-op-ler:          #2563EB;
    --skin-op-alterar:      #D97706;
    --skin-op-remover:      var(--skin-erro);
    --skin-op-especial:     #7C3AED;
    --skin-op-conciliar:    #0D9488;
    --skin-op-neutro:       var(--skin-cinza-texto);

    /* Geometria */
    --skin-radius:          9px;
    --skin-radius-lg:       14px;
    --skin-radius-input:    10px;
    --skin-radius-btn:      10px;

    /* Sombras */
    --skin-sombra:          0 1px 2px rgba(18,22,90,.04), 0 8px 28px rgba(18,22,90,.06);
    --skin-sombra-md:       0 4px 14px rgba(18,22,90,.10);
    --skin-sombra-botao:    0 4px 14px rgba(13, 91, 166, 0.4);
    --skin-sombra-hero:     0 4px 14px rgba(10, 61, 107, 0.22);

    /* Tipografia */
    --skin-font-base:       'DM Sans', 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --skin-font-display:    'Plus Jakarta Sans', 'DM Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --skin-font-mono:       'JetBrains Mono', 'Consolas', 'Courier New', monospace;
}

/* ---------------------------------------------------------------------------
 * 2) FONTES (Google Fonts)
 *    Atenção: requer internet para o ambiente acessar fonts.googleapis.com.
 *    Em ambiente fechado, o fallback é 'Inter' (sistema) ou sans-serif.
 * --------------------------------------------------------------------------- */
/* FONTES
   O @import abaixo busca as fontes no Google. Em rede fechada (caso comum nas
   secretarias) o host nao responde e o navegador so segue apos o timeout, o
   que atrasa a primeira pintura de TODAS as telas.

   Mitigacao aplicada: as fontes locais do sistema vem primeiro na cascata de
   var(--skin-font-*), entao a tela renderiza imediatamente com Segoe UI/Inter
   do proprio SO e troca para a fonte da marca se o download chegar.

   Pendencia registrada: baixar DM Sans / Plus Jakarta Sans para
   pages/css/webfonts (onde ja moram as do Font Awesome) e trocar este @import
   por @font-face local. Isso elimina a dependencia externa de vez.
   Ver docs/SUSTENTACAO/REDESIGN/STATUS.md. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ===========================================================================
 * 3) ONDA 1 — LOGIN
 *    Escopo: .skin-login-page no <body> de Login.jsp / Login_Pergunta.jsp /
 *    Login_Termo_Aceite.jsp.
 * =========================================================================== */

body.skin-login-page {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    /* rola na vertical quando a janela e baixa; antes era hidden e o
       formulario passava por cima do topo e do rodape do painel */
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--skin-cinza-bg);
    font-family: var(--skin-font-base);
    color: var(--skin-text);
    -webkit-font-smoothing: antialiased;
}

/* Container raiz das telas de login: 2 painéis lado a lado */
.skin-login-page .skin-login-root {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

/* ---------------------------------------------------------------------------
 * PAINEL HERO (esquerdo, 52%)
 * --------------------------------------------------------------------------- */
.skin-login-page .painel-hero {
    width: 52%;
    min-height: 100vh;
    background: linear-gradient(165deg, var(--skin-azul-deep) 0%, var(--skin-azul-primario) 35%, var(--skin-azul-medio) 70%, #0E6ABF 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px;
    overflow: hidden;
    color: white;
}

/* Contorno de MT (IBGE) emoldurando o conteudo, como na proposta da RM 70869: centralizado
   no bloco logo+nome+pilares (o centro do bloco coincide com o centro do estado), atras dele. */
.skin-login-page .hero-conteudo::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 118%;
    aspect-ratio: 600 / 580;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
    opacity: .7;
    background: url('../imagens/logos/mapa-mt-contorno.svg') center / contain no-repeat;
}

@media (max-width: 900px) {
    .skin-login-page .hero-conteudo::before { display: none; }
}
/* TEMPORARIO (27/10, pedido do Diego para comparar a logo sem o mapa): remover esta regra para o mapa voltar. */
.skin-login-page .hero-conteudo::before { display: none; }

.skin-login-page .grid-financeiro {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0.06;
    background-image:
        linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.3) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

.skin-login-page .linha-dourada {
    position: absolute;
    top: 0; right: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, var(--skin-dourado) 25%, var(--skin-dourado-claro) 50%, var(--skin-dourado) 75%, transparent 100%);
}

.skin-login-page .hero-conteudo {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 100%;
    max-width: 640px;
    animation: skinSlideUp 0.8s ease-out;
}

.skin-login-page .hero-brasao { margin-bottom: 20px; }

/* Marca FIPLAN (letras + seta), versao fundo escuro. O nome do sistema nao
   vem mais dentro da imagem: e texto HTML (.hero-nome-sistema), em cor unica. */
.skin-login-page .hero-lockup {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 2px 12px rgba(0,0,0,0.25));
}
/* Mesmo desenho do lockup antigo: nome na largura da logo, alinhado a esquerda embaixo do "F".
   Agora e texto, em cor unica e com o nome completo (RM 70869). */
.skin-login-page .hero-nome-sistema {
    width: 360px;
    max-width: 100%;
    margin: 26px auto 0;
    padding-left: 5px;
    box-sizing: border-box;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(196, 212, 238, 0.95);
}

.skin-login-page .brasao-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.skin-login-page .bandeira-mt {
    width: 44px;
    height: 30px;
    position: relative;
}
.skin-login-page .bandeira-mt .faixa-azul {
    width: 100%;
    height: 100%;
    background: #1A56A0;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}
.skin-login-page .bandeira-mt .faixa-branca {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 20px; height: 20px;
    background: white;
}
.skin-login-page .bandeira-mt .estrela {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 10px; height: 10px;
    background: var(--skin-dourado);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.skin-login-page .hero-logo-text {
    font-family: var(--skin-font-display);
    font-size: 52px;
    font-weight: 800;
    letter-spacing: 8px;
    color: white;
    text-shadow: 0 2px 20px rgba(0,0,0,0.2);
    line-height: 1;
    margin-top: 16px;
}
.skin-login-page .hero-logo-sub {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-top: 10px;
}
.skin-login-page .hero-divider {
    width: 50px;
    height: 2px;
    background: var(--skin-dourado);
    margin: 28px auto;
    border-radius: 2px;
}

.skin-login-page .hero-modulos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 28px;
    text-align: left;
}
.skin-login-page .modulo-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.3;
    color: rgba(255,255,255,0.92);
    font-weight: 500;
    opacity: 0;
    animation: skinEntrarModulo .6s cubic-bezier(.22,1,.36,1) both;
    transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.skin-login-page .modulo-icone {
    width: 30px; height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.skin-login-page .modulo-icone svg {
    width: 28px; height: 28px;
    stroke: var(--skin-dourado-claro);
}
/* Telas medias: 2 colunas (o painel esquerdo fica estreito demais para 3) */
@media (max-width: 1280px) {
    .skin-login-page .hero-modulos { grid-template-columns: repeat(2, 1fr); }
}
/* Entrada em cascata dos modulos: cada funcionalidade se anuncia. */
@keyframes skinEntrarModulo {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.skin-login-page .modulo-item:nth-child(1) { animation-delay: .45s; }
.skin-login-page .modulo-item:nth-child(2) { animation-delay: .58s; }
.skin-login-page .modulo-item:nth-child(3) { animation-delay: .71s; }
.skin-login-page .modulo-item:nth-child(4) { animation-delay: .84s; }
.skin-login-page .modulo-item:nth-child(5) { animation-delay: .97s; }
.skin-login-page .modulo-item:nth-child(6) { animation-delay: 1.10s; }
.skin-login-page .modulo-item:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(212,168,67,0.30);
    transform: translateX(2px);
}
.skin-login-page .hero-estado {
    margin-top: 26px;
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 500;
}
.skin-login-page .hero-estado::before {
    content: '';
    display: block;
    width: 50px;
    height: 2px;
    margin: 0 auto 14px;
    background: var(--skin-dourado);
    border-radius: 2px;
}
/* Versao do sistema: e um rotulo de dado, como os numeros flutuantes do fundo (mesma fonte mono),
   so que legivel: sem caixa, sombra de texto para ler sobre as barras, filete dourado igual ao do
   "Estado de Mato Grosso". Antes era texto de 10 px a 30% de branco, invisivel na release. */
.skin-login-page .versao-hero {
    position: absolute;
    bottom: 22px;
    left: 60px;
    z-index: 3;
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    font-family: var(--skin-font-mono, "Cascadia Mono", Consolas, monospace);
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.88);
    text-shadow: 0 1px 2px rgba(5,30,58,0.55), 0 0 12px rgba(5,30,58,0.35);
    white-space: nowrap;
}
.skin-login-page .versao-rotulo {
    font-family: var(--skin-font-base);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--skin-dourado-claro);
}
.skin-login-page .versao-rotulo::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 1px;
    margin-right: 9px;
    vertical-align: middle;
    background: var(--skin-dourado);
}
.skin-login-page .versao-numero {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * PAINEL LOGIN (direito, 48%)
 * --------------------------------------------------------------------------- */
/* Grade em coluna unica: topo (MTI + brasao), chip de ambiente, formulario e
   campanha. Tudo no fluxo (nada absolute): em janela baixa ou estreita as
   faixas empurram umas as outras em vez de se sobrepor. */
.skin-login-page .painel-login {
    width: 48%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
        "gov"
        "chip"
        "card"
        "comun";
    justify-items: center;
    align-items: center;
    padding: 28px 40px 24px;
    background: var(--skin-branco);
    position: relative;
}

/* Chip de ambiente no LOGIN: faixa propria abaixo do topo (MTI + brasao),
 * centralizada no painel e no fluxo normal da grade.
 * O chip da topbar (secao ONDA 2) e escopado em .skin-topbar-page e foi
 * pintado para FUNDO ESCURO; aqui o painel do login e branco, entao as cores
 * sao a variante clara das mesmas quatro familias.
 * Quem decide se ha chip e o proprio Login.jsp, no servidor - producao nao
 * imprime o elemento. */
.skin-login-page .chip-ambiente {
    grid-area: chip;
    margin-top: 18px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 34px;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    border: 1px solid;
    /* Fundo SOLIDO e texto branco: a versao anterior usava fundo a 10% de
       opacidade com texto escuro, que sobre o painel branco do login passava
       despercebida. Este aviso existe para o usuario NAO confundir o ambiente
       com producao - discricao aqui e defeito, nao virtude. */
    color: #fff;
}
/* Ponto luminoso pulsante - reforca que o aviso e "ao vivo" */
.skin-login-page .chip-ambiente::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
    background: rgba(255,255,255,.95);
    box-shadow: 0 0 0 0 rgba(255,255,255,.7);
    animation: chipAmbientePulso 2s ease-out infinite;
}
@keyframes chipAmbientePulso {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
    70%  { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
/* Respeita quem pede menos movimento (mesma politica da secao ACESSIBILIDADE) */
@media (prefers-reduced-motion: reduce) {
    .skin-login-page .chip-ambiente::before { animation: none; }
}
/* COR UNICA para todos os ambientes: laranja de alerta.
 * A distincao entre Homologacao/Integracao/Estudo/Evolucao passa a ser feita
 * apenas pelo TEXTO - por isso ele e caixa alta, peso 800 e com espacamento.
 * As quatro classes continuam existindo (o JS e o JSPF as emitem); todas
 * apontam para o mesmo tom. */
.skin-login-page .chip-ambiente.ambiente-homologa,
.skin-login-page .chip-ambiente.ambiente-integracao,
.skin-login-page .chip-ambiente.ambiente-estudo,
.skin-login-page .chip-ambiente.ambiente-evolucao {
    background: #E1620E;
    border-color: #B44B08;
    box-shadow: 0 4px 14px rgba(225, 98, 14, .40);
}

/* Chip de ambiente LOCAL/DEV: cor sobria (slate) para diferenciar dos
   ambientes de teste (laranja). So aparece quando a versao contem
   "desenvolvimento" (maquina local) - producao segue sem chip. */
.skin-login-page .chip-ambiente.ambiente-desenvolvimento {
    display: inline-flex;
    background: #64748B;
    box-shadow: 0 3px 12px rgba(100, 116, 139, .45);
}

/* Centralizado na coluna do formulario, com o chip logo abaixo (proposta da RM 70869);
   preso a direita ele ficava solto do resto do painel em telas largas. */
.skin-login-page .login-header-gov {
    grid-area: gov;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 12px;
}
.skin-login-page .gov-mti {
    height: 58px;
    width: auto;
    display: block;
}
/* Fio vertical dourado entre a MTI e o brasao, com respiro dos dois lados (como na proposta da RM 70869) */
.skin-login-page .gov-fio {
    align-self: stretch;
    margin: 0 14px;
    width: 1.5px;
    background: var(--skin-dourado);
}
.skin-login-page .gov-brasao-img {
    height: 64px;
    width: auto;
    display: block;
}
.skin-login-page .gov-text {
    text-align: left;
    white-space: nowrap;  /* duas linhas fixas, pelo <br> */
    font-family: var(--skin-font-display);
    font-size: 17px;
    font-weight: 800;
    color: var(--skin-azul-primario);
    line-height: 1.2;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
/* Rotulo de ambiente no meio do topo, entre a MTI e o brasao (pedido do Diego, 27/10).
   O segundo fio e a borda do brasao e so existe quando ha rotulo: em producao fica MTI | brasao.
   Imagens um pouco menores para a linha caber no painel. */
.skin-login-page .login-header-gov .chip-ambiente {
    grid-area: auto;
    margin-top: 0;
    height: 30px;
    padding: 0 14px;
    font-size: 12px;
    letter-spacing: 1px;
}
.skin-login-page .login-header-gov .chip-ambiente + .gov-brasao-img {
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1.5px solid var(--skin-dourado);
    box-sizing: content-box;
}
.skin-login-page .login-header-gov:has(.chip-ambiente) .gov-mti { height: 48px; }
.skin-login-page .login-header-gov:has(.chip-ambiente) .gov-brasao-img { height: 54px; }
.skin-login-page .login-header-gov:has(.chip-ambiente) .gov-text { font-size: 15px; }
/* ---------------------------------------------------------------------------
 * AVISO COMEMORATIVO (somente Login.jsp)
 *   Sobe da base da tela, permanece 15s e desce. Removido do DOM ao final,
 *   entao nao interfere no formulario de login.
 *   Versao com fogos de artificio: docs/SUSTENTACAO/REDESIGN/fragmentos/fogos-comemoracao.md
 * --------------------------------------------------------------------------- */

.skin-login-page .comemora-aviso {
    position: fixed;
    /* Centralizado no eixo da .linha-dourada: ela tem 3px e fica colada na
       borda direita do hero (52%), entao o eixo esta em 52% + 1,5px.
       translateX(-50%) recua metade da propria largura. ATENCAO a ordem em
       transform: o translateX vem PRIMEIRO, senao o scale() dos keyframes
       multiplica esse -50% e o balao escorrega para a esquerda. */
    left: calc(52% + 1.5px);
    bottom: 0;
    z-index: 61;
    pointer-events: none;
    padding: 14px 30px;
    background: linear-gradient(135deg, var(--skin-dourado) 0%, var(--skin-dourado-claro) 100%);
    color: #3D2F0B;
    font-family: var(--skin-font-display);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .4px;
    white-space: nowrap;
    border-radius: 14px;
    box-shadow: 0 10px 34px rgba(212,168,67,0.45), 0 3px 10px rgba(0,0,0,0.22);
    /* estado inicial: fora da tela, abaixo da base */
    transform: translateX(-50%) translateY(140px);
    opacity: 0;
}
/* Trajetoria: nasce fora da tela (abaixo da base), sobe pelo centro da
   viewport e se dissolve ao chegar no meio. bottom:0 + translateY(-50vh)
   coloca a pill no centro vertical da tela no fim do percurso. */
.skin-login-page .comemora-aviso.comemora-visivel {
    animation: skinSubirAvisoCentro 4.2s cubic-bezier(.33,.9,.36,1) forwards;
}
/* IMPORTANTE: nao usar scale() junto com translate(-50%) na mesma transform.
   O scale multiplica o deslocamento (-50% vira -48% em scale .96 e -51% em
   scale 1.02), fazendo o balao escorregar na horizontal durante a animacao.
   A centralizacao fica isolada no translateX abaixo, aplicado por ultimo. */
@keyframes skinSubirAvisoCentro {
    0%   { opacity: 0; transform: translateX(-50%) translateY(140px) scale(0.96); }
    14%  { opacity: 1; transform: translateX(-50%) translateY(0)     scale(1); }
    62%  { opacity: 1; transform: translateX(-50%) translateY(-34vh) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-50vh) scale(1.02); }
}
/* Sem animacao: aparece parado no centro da tela, sem percurso. */
.skin-login-page .comemora-aviso.comemora-estatico {
    transform: translateX(-50%) translateY(-50vh);
    opacity: 1;
    animation: none;
}
@media (max-width: 900px) {
    .skin-login-page .comemora-aviso {
        left: 50%;   /* paineis empilhados: centraliza na tela inteira */
        font-size: 15px;
        padding: 11px 20px;
        max-width: 88vw;
        white-space: normal;
        text-align: center;
    }
}
/* ---------------------------------------------------------------------------
 * CAMPANHAS MENSAIS (somente Login.jsp)
 *   A classe campanha-* e injetada no <body> pela JSP via CampanhaMensal
 *   (resolvida no SERVIDOR - respeita fiplan.dataHoraFixa em dev).
 *   O adorno fica ancorado sobre o "F" do lockup: o F comeca em ~3% da
 *   largura da imagem e seu topo fica a ~14% da altura (medido do PNG).
 * --------------------------------------------------------------------------- */
/* 360 px e 22 px de respiro em cima: a marca e o lockup antigo recortado no alto,
   assim a logo fica no mesmo tamanho e altura de antes. */
.skin-login-page .hero-lockup-wrap {
    position: relative;
    display: block;
    width: 360px;
    max-width: 100%;
    margin: 22px auto 0;
    overflow: visible;   /* adornos de campanha podem exceder o retangulo do logo */
}
/* Icone da campanha: broche fixo no canto superior esquerdo do lockup.
   Area FIXA (mesmo tamanho para laco e gorro) para a troca de campanha
   nunca deslocar o layout. Cor vem por currentColor (inline na JSPF). */
.skin-login-page .campanha-visual {
    position: absolute;
    /* Laco assume o LUGAR do "I": o Login.jsp troca o lockup pela variante
       -semI e o laco ocupa o vao da letra (I media x 14,0%-16,9%, letras
       y 14,4%-40,2% - medido do PNG). Percentuais escalam com o logo.

       DEPENDENCIA ESTRUTURAL: todos os offsets percentuais desta secao
       assumem que o logo e uma <img> - o wrapper .hero-lockup-wrap abraca
       exatamente a caixa da imagem. A imagem atual (fiplan-mark-escuro.png,
       600x144) e o lockup antigo (900x443) cortado a partir de y=55 e com
       216 de altura: os "top" e "height" em % abaixo ja estao convertidos
       para essa caixa, os "left" e "width" nao mudam. */
    top: 1.8%;
    left: 10.8%;
    width: 9.3%;
    height: 54.4%;
    display: block;
    pointer-events: none;
}
/* Halo suave atras do icone (sem efeito neon) */
.skin-login-page .campanha-visual::before {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255,255,255,0.16), rgba(255,255,255,0));
}
.skin-login-page .campanha-visual svg {
    position: relative;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.40));
}
/* Dezembro (GorroNatal): assentado no TOPO do "F", como um adereco discreto.
   Regra de escala: altura do gorro = ~50% da caixa alta do F (F tem 114px
   de altura na imagem de 443px -> gorro ~57px = 12,9%). A base da faixa de
   pelo ENCOSTA no topo da letra (y 14,4%) sem cobrir o traco horizontal.
   Percentuais sao relativos ao proprio logo (wrapper = caixa da imagem),
   entao escalam com qualquer largura de tela ou zoom.
   rotate positivo = inclinacao a direita (10-15 graus). */
.campanha-dezembro .campanha-visual {
    top: -17.5%;
    left: 4.8%;
    width: 7.4%;
    height: 26.4%;
    transform: rotate(12deg);
}
/* Detalhe, nao protagonista: sombra mais curta que a dos lacos e sem halo. */
.campanha-dezembro .campanha-visual::before {
    display: none;
}
.campanha-dezembro .campanha-visual svg {
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.28));
}

/* Pascoa (CampanhaVisual.jspf, Tipo.COELHO): um ciclo completo de 12s.
   As porcentagens sincronizam passos, sombra e poeira no mesmo viewBox. */
.campanha-pascoa .pascoa-cena {
    display: block;
    width: 100%;
    height: auto;
    margin: 4px auto -10px;
    overflow: hidden;
}
.campanha-pascoa .pascoa-coelho {
    transform: translate(58px, 66px);
    animation: pascoaCaminho 12s ease-in-out infinite;
}
.campanha-pascoa .pascoa-vira {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: pascoaVirar 12s ease-in-out infinite;
}
.campanha-pascoa .pascoa-corpo {
    transform-box: fill-box;
    transform-origin: 45% 90%;
    animation: pascoaImpulso 12s ease-in-out infinite;
}
.campanha-pascoa .pascoa-pata-tras,
.campanha-pascoa .pascoa-pata-frente {
    transform-box: fill-box;
    transform-origin: 50% 50%;
}
.campanha-pascoa .pascoa-pata-tras { animation: pascoaPataTras 12s ease-in-out infinite; }
.campanha-pascoa .pascoa-pata-frente { animation: pascoaPataFrente 12s ease-in-out infinite; }
.campanha-pascoa .pascoa-orelha-tras,
.campanha-pascoa .pascoa-orelha-frente {
    transform-box: fill-box;
    transform-origin: 50% 100%;
}
.campanha-pascoa .pascoa-orelha-tras { animation: pascoaOrelhaTras 12s ease-in-out infinite; }
.campanha-pascoa .pascoa-orelha-frente { animation: pascoaOrelhaFrente 12s ease-in-out infinite; }
.campanha-pascoa .pascoa-rabo {
    transform-box: fill-box;
    transform-origin: 100% 50%;
    animation: pascoaRabinho 12s ease-in-out infinite;
}
.campanha-pascoa .pascoa-cabeca { animation: pascoaOlhar 12s ease-in-out infinite; }
.campanha-pascoa .pascoa-olho {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: pascoaPiscar 12s ease-in-out infinite;
}
.campanha-pascoa .pascoa-nariz { animation: pascoaFarejar 12s ease-in-out infinite; }
.campanha-pascoa .pascoa-sombra-posicao,
.campanha-pascoa .pascoa-poeira-posicao {
    transform: translateX(58px);
    animation: pascoaRastro 12s ease-in-out infinite;
}
.campanha-pascoa .pascoa-sombra {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: pascoaSombra 12s ease-in-out infinite;
}
.campanha-pascoa .pascoa-poeira {
    opacity: 0;
    animation: pascoaPoeira 12s ease-out infinite;
}
.campanha-pascoa .pascoa-ovo {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: pascoaOvoBalanca 12s ease-in-out infinite;
}
@keyframes pascoaCaminho {
    0%, 3%, 96%, 100% { transform: translate(58px, 66px); }
    6%, 9%, 12%, 15%, 18%, 19% { transform: translate(48.8px, 32px); } /* cabeca e patas atras da base do ovo; coelho e ovo a 80%, por isso 48.8/32 */
    21% { transform: translate(73px, -2px); }
    24% { transform: translate(96px, -10px); }
    27% { transform: translate(112px, 0); }
    30% { transform: translate(131px, -9px); }
    33% { transform: translate(151px, 0); }
    36% { transform: translate(172px, -10px); }
    39% { transform: translate(193px, 0); }
    42% { transform: translate(214px, -9px); }
    45% { transform: translate(236px, 0); }
    48% { transform: translate(258px, -7px); }
    51%, 64% { transform: translate(278px, 0); } /* observa e vira */
    67% { transform: translate(257px, -8px); }
    70% { transform: translate(236px, 0); }
    73% { transform: translate(214px, -9px); }
    76% { transform: translate(192px, 0); }
    79% { transform: translate(169px, -9px); }
    82% { transform: translate(146px, 0); }
    85% { transform: translate(122px, -9px); }
    88% { transform: translate(100px, 0); }
    91% { transform: translate(76px, -6px); }
    93% { transform: translate(70px, 66px); }
    94% { transform: translate(68px, 66px); }
}
@keyframes pascoaVirar {
    0%, 58% { transform: scaleX(1) rotate(0); }
    60% { transform: scaleX(1) rotate(9deg); } /* prepara o giro */
    62% { transform: scaleX(.55) rotate(-5deg); }
    64%, 96% { transform: scaleX(-1) rotate(0); }
    98%, 100% { transform: scaleX(1) rotate(0); }
}
@keyframes pascoaImpulso {
    0%, 20%, 27%, 33%, 39%, 45%, 51%, 64%, 70%, 76%, 82%, 88%, 94%, 100% { transform: scale(1); }
    23%, 30%, 36%, 42%, 48%, 67%, 73%, 79%, 85%, 91% { transform: rotate(-4deg) scale(.94, 1.12); }
    26%, 32%, 38%, 44%, 50%, 69%, 75%, 81%, 87%, 93% { transform: rotate(3deg) scale(1.09, .89); }
    59% { transform: rotate(-7deg) scale(1.05, .96); }
    62% { transform: rotate(5deg) scale(.94, 1.04); }
}
@keyframes pascoaPataTras {
    0%, 20%, 27%, 33%, 39%, 45%, 51%, 64%, 70%, 76%, 82%, 88%, 94%, 100% { transform: translate(0, 0) rotate(0); }
    23%, 30%, 36%, 42%, 48%, 67%, 73%, 79%, 85%, 91% { transform: translate(-3px, -5px) rotate(-18deg); }
    26%, 32%, 38%, 44%, 50%, 69%, 75%, 81%, 87%, 93% { transform: translate(2px, 0) rotate(9deg); }
}
@keyframes pascoaPataFrente {
    0%, 20%, 27%, 33%, 39%, 45%, 51%, 64%, 70%, 76%, 82%, 88%, 94%, 100% { transform: translate(0, 0) rotate(0); }
    23%, 30%, 36%, 42%, 48%, 67%, 73%, 79%, 85%, 91% { transform: translate(3px, -4px) rotate(19deg); }
    26%, 32%, 38%, 44%, 50%, 69%, 75%, 81%, 87%, 93% { transform: translate(-2px, 0) rotate(-8deg); }
}
@keyframes pascoaOrelhaTras {
    0%, 4%, 21%, 27%, 33%, 39%, 45%, 51%, 64%, 70%, 76%, 82%, 88%, 96%, 100% { transform: rotate(0); }
    6% { transform: translate(2px, -47px) rotate(-15deg); }
    9% { transform: translate(2px, -49px) rotate(8deg); }
    12% { transform: translate(2px, -47px) rotate(-7deg); }
    15% { transform: translate(2px, -50px) rotate(-15deg); }
    18%, 19% { transform: translate(2px, -48px) rotate(0); }
    25%, 31%, 37%, 43%, 49%, 68%, 74%, 80%, 86%, 92% { transform: rotate(-15deg); }
    8%, 17% { transform: translate(2px, -48px) rotate(8deg); }
    29%, 35%, 41%, 47%, 53%, 72%, 78%, 84%, 90%, 94% { transform: rotate(8deg); }
}
@keyframes pascoaOrelhaFrente {
    0%, 5%, 21%, 28%, 34%, 40%, 46%, 52%, 65%, 71%, 77%, 83%, 89%, 97%, 100% { transform: rotate(0); }
    7% { transform: translateY(-47px) rotate(-11deg); }
    9% { transform: translateY(-49px) rotate(7deg); }
    10% { transform: translateY(-48px) rotate(0); }
    13% { transform: translateY(-47px) rotate(-5deg); }
    16% { transform: translateY(-50px) rotate(-11deg); }
    18% { transform: translateY(-48px) rotate(7deg); }
    19% { transform: translateY(-48px) rotate(0); }
    26%, 32%, 38%, 44%, 50%, 69%, 75%, 81%, 87%, 93% { transform: rotate(-11deg); }
    30%, 36%, 42%, 48%, 54%, 73%, 79%, 85%, 91%, 95% { transform: rotate(7deg); }
}
@keyframes pascoaRabinho {
    0%, 20%, 51%, 64%, 94%, 100% { transform: rotate(0); }
    24%, 36%, 48%, 68%, 80%, 92% { transform: rotate(-18deg); }
    30%, 42%, 54%, 74%, 86% { transform: rotate(13deg); }
}
@keyframes pascoaOlhar {
    0%, 50%, 54%, 57%, 60%, 64%, 100% { transform: translateX(0); }
    52% { transform: translateX(2px); }
    56% { transform: translateX(-2px); }
}
@keyframes pascoaPiscar {
    0%, 54%, 55%, 57%, 100% { transform: scaleY(1); }
    54.5%, 56.5% { transform: scaleY(.1); }
}
@keyframes pascoaFarejar {
    0%, 49%, 51%, 53%, 55%, 57%, 59%, 100% { transform: translateY(0); }
    50%, 52%, 54%, 56%, 58% { transform: translateY(-1.5px); }
}
@keyframes pascoaRastro {
    0%, 18%, 96%, 100% { transform: translateX(58px); }
    21% { transform: translateX(73px); } 24% { transform: translateX(96px); }
    27% { transform: translateX(112px); } 30% { transform: translateX(131px); }
    33% { transform: translateX(151px); } 36% { transform: translateX(172px); }
    39% { transform: translateX(193px); } 42% { transform: translateX(214px); }
    45% { transform: translateX(236px); } 48% { transform: translateX(258px); }
    51%, 64% { transform: translateX(278px); }
    67% { transform: translateX(257px); } 70% { transform: translateX(236px); }
    73% { transform: translateX(214px); } 76% { transform: translateX(192px); }
    79% { transform: translateX(169px); } 82% { transform: translateX(146px); }
    85% { transform: translateX(122px); } 88% { transform: translateX(100px); }
    91% { transform: translateX(76px); } 94% { transform: translateX(68px); }
}
@keyframes pascoaSombra {
    0%, 18%, 20%, 93%, 94%, 96%, 100% { transform: scaleX(1); opacity: 0; }
    27%, 33%, 39%, 45%, 51%, 64%, 70%, 76%, 82%, 88% { transform: scaleX(1); opacity: .65; }
    24%, 30%, 36%, 42%, 48%, 67%, 73%, 79%, 85%, 91% { transform: scaleX(.56); opacity: .35; }
}
@keyframes pascoaPoeira {
    0%, 20%, 26%, 29%, 32%, 35%, 38%, 41%, 44%, 47%, 50%, 66%, 69%, 72%, 75%, 78%, 81%, 84%, 87%, 90%, 93%, 100% { transform: translateY(0) scale(.6); opacity: 0; }
    21%, 27%, 33%, 39%, 45%, 51%, 67%, 73%, 79%, 85%, 91% { transform: translateY(-2px) scale(1); opacity: .75; }
    24%, 30%, 36%, 42%, 48%, 54%, 70%, 76%, 82%, 88%, 94% { transform: translateY(-7px) scale(1.25); opacity: 0; }
}
@keyframes pascoaOvoBalanca {
    0%, 19%, 27%, 90%, 98%, 100% { transform: rotate(0); }
    22%, 92% { transform: rotate(5deg); }
    24%, 94% { transform: rotate(-3deg); }
    26%, 96% { transform: rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
    .campanha-pascoa .pascoa-coelho { animation: none; transform: translate(48.8px, 32px); }
    .campanha-pascoa .pascoa-vira,
    .campanha-pascoa .pascoa-corpo,
    .campanha-pascoa .pascoa-pata-tras,
    .campanha-pascoa .pascoa-pata-frente,
    .campanha-pascoa .pascoa-orelha-tras,
    .campanha-pascoa .pascoa-orelha-frente,
    .campanha-pascoa .pascoa-rabo,
    .campanha-pascoa .pascoa-cabeca,
    .campanha-pascoa .pascoa-olho,
    .campanha-pascoa .pascoa-nariz,
    .campanha-pascoa .pascoa-sombra-posicao,
    .campanha-pascoa .pascoa-sombra,
    .campanha-pascoa .pascoa-poeira-posicao,
    .campanha-pascoa .pascoa-poeira,
    .campanha-pascoa .pascoa-ovo { animation: none; }
    .campanha-pascoa .pascoa-orelha-tras { transform: translate(2px, -48px); }
    .campanha-pascoa .pascoa-orelha-frente { transform: translateY(-48px); }
}
/* Halloween (CampanhaVisual.jspf, Tipo.MORCEGO): voo, pouso e pausa. */
.campanha-halloween .halloween-lua {
    position: absolute;
    left: 106%;
    top: -111.6%;
    width: 15%;
    aspect-ratio: 1;
    opacity: .26;
    z-index: 1;
    pointer-events: none;
}
.campanha-halloween .halloween-morcego {
    position: absolute;
    left: 94.8%;
    top: 12.1%;
    width: 15%;
    aspect-ratio: 80 / 52;
    z-index: 2;
    pointer-events: none;
    transform-origin: 50% 50%;
    opacity: 0;
    animation: halloweenVoo 17s linear 1s infinite backwards;
}
.campanha-halloween .halloween-desenho {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.campanha-halloween .halloween-asa-esquerda,
.campanha-halloween .halloween-asa-direita {
    transform-box: view-box;
    animation: halloweenAsas 17s linear 1s infinite backwards;
}
.campanha-halloween .halloween-asa-esquerda { transform-origin: 38px 29px; }
.campanha-halloween .halloween-asa-direita { transform-origin: 42px 29px; }

/* Ciclo de 17 s (tempos em segundos no gerador): 0-4,2 s voa direto ate a
   ponta da seta; ate 5,2 s vira e pousa; ate 10,2 s pendurado, olhando para os
   lados; ate 12,2 s sai pela lua diminuindo (profundidade); depois pausa. */
@keyframes halloweenVoo {
    0% { transform: translate(-685%, -180%) rotate(-8deg); opacity: 0; }
    1.18% { opacity: 1; }
    5.88% { transform: translate(-570%, -210%) rotate(5deg); }
    10.59% { transform: translate(-455%, -125%) rotate(-5deg); }
    15.29% { transform: translate(-350%, -190%) rotate(7deg); }
    20% { transform: translate(-245%, -150%) rotate(-4deg); }
    22.35% { transform: translate(-170%, -175%) rotate(3deg); }
    24.71% { transform: translate(-95%, -115%) rotate(10deg); animation-timing-function: ease-in-out; }
    26.47% { transform: translate(-70%, -70%) rotate(80deg); }
    28.24% { transform: translate(-50%, -10%) rotate(182deg); }
    29.41% { transform: translate(-43%, -10%) rotate(176deg); }
    30.59% { transform: translate(-50%, -10%) rotate(180deg); }
    36.47% { transform: translate(-50%, -10%) rotate(192deg); animation-timing-function: ease-in-out; }
    40% { transform: translate(-50%, -10%) rotate(186deg); }
    44.71% { transform: translate(-50%, -10%) rotate(168deg); animation-timing-function: ease-in-out; }
    48.24% { transform: translate(-50%, -10%) rotate(174deg); }
    52.94% { transform: translate(-50%, -10%) rotate(181deg); }
    57.65% { transform: translate(-50%, -10%) rotate(178deg); }
    60% { transform: translate(-50%, -10%) rotate(180deg); animation-timing-function: ease-in; }
    62.35% { transform: translate(-75%, -95%) rotate(110deg) scale(.95); }
    64.71% { transform: translate(-35%, -175%) rotate(12deg) scale(.85); }
    67.06% { transform: translate(55%, -260%) rotate(-10deg) scale(.72); }
    70.59% { transform: translate(200%, -380%) rotate(-15deg) scale(.5); opacity: 1; }
    71.76% { transform: translate(200%, -380%) rotate(-15deg) scale(.5); opacity: 0; }
    99.88% { transform: translate(200%, -380%) rotate(-15deg) scale(.5); opacity: 0; }
    100% { transform: translate(-685%, -180%) rotate(-8deg); opacity: 0; }
}
/* Asas: batida a cada 0,4 s no voo; fechadas enquanto pendurado. */
@keyframes halloweenAsas {
    0%, 2.35%, 4.71%, 7.06%, 9.41%, 11.76%, 14.12%, 16.47%, 18.82%, 21.18%, 23.53%, 25.88%, 61.18%, 63.53%, 65.88%, 68.24%, 70.59%, 100% { transform: scaleY(1); }
    1.18%, 3.53%, 5.88%, 8.24%, 10.59%, 12.94%, 15.29%, 17.65%, 20%, 22.35%, 24.71%, 27.06%, 62.35%, 64.71%, 67.06%, 69.41%, 71.76% { transform: scaleY(-.58); }
    28.24% { transform: scaleY(.9); }
    29.41%, 60% { transform: scaleX(.28) scaleY(.68); }
}
@media (prefers-reduced-motion: reduce) {
    .campanha-halloween .halloween-morcego {
        animation: none;
        transform: translate(-50%, -10%) rotate(180deg);
        opacity: 1;
    }
    .campanha-halloween .halloween-asa-esquerda,
    .campanha-halloween .halloween-asa-direita {
        animation: none;
        transform: scaleX(.28) scaleY(.68);
    }
}
/* Servidor (CampanhaVisual.jspf, Tipo.SERVIDOR): faixa curva dourada com a
   medalha do card. Sequencia ao abrir a tela: 0-0,7 s a faixa abre do centro;
   0,8 s o titulo; 1,3-2,3 s a medalha rola ate a ponta esquerda; 2,4 s o
   data. As tres frases ficam logo abaixo, sem alterar a faixa. */
.campanha-servidor .servidor-faixa {
    display: block;
    width: 92%;
    max-width: 340px;
    height: auto;
    margin: 4px auto -6px;
    overflow: visible;
    pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(5, 30, 58, .35));
}
.campanha-servidor .servidor-faixa-corpo {
    transform-box: view-box;
    transform-origin: 160px 50px;
    animation: servidorFaixaAbre .7s cubic-bezier(.2, .9, .3, 1.1) both;
}
.campanha-servidor .servidor-faixa-titulo {
    font-family: var(--skin-font-display, 'Plus Jakarta Sans', 'Inter', sans-serif);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    fill: #0A2A4A;
    animation: servidorAparece .5s ease-out .8s both;
}
.campanha-servidor .servidor-faixa-texto {
    font-family: var(--skin-font-base, 'Inter', sans-serif);
    font-size: 12.5px;
    font-weight: 600;
    fill: #0A2A4A;
    animation: servidorAparece .6s ease-out 2.4s both;
}
.campanha-servidor .servidor-medalha-rola {
    transform-box: fill-box;
    transform-origin: 50% 66%;
    animation: servidorMedalhaRola 1s cubic-bezier(.25, .8, .35, 1.15) 1.3s both;
}
@keyframes servidorFaixaAbre {
    0% { transform: scaleX(.08); opacity: 0; }
    35% { opacity: 1; }
    100% { transform: scaleX(1); opacity: 1; }
}
@keyframes servidorAparece {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes servidorMedalhaRola {
    0% { transform: translateX(-70px) rotate(-300deg); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateX(0) rotate(0); opacity: 1; }
}
.campanha-servidor .servidor-reflexo {
    animation: servidorReflexo 9s ease-in-out 3.2s infinite;
}
@keyframes servidorReflexo {
    0% { transform: translateX(0); }
    10%, 100% { transform: translateX(70px); }
}
@media (prefers-reduced-motion: reduce) {
    .campanha-servidor .servidor-faixa-corpo,
    .campanha-servidor .servidor-faixa-titulo,
    .campanha-servidor .servidor-faixa-texto,
    .campanha-servidor .servidor-medalha-rola,
    .campanha-servidor .servidor-reflexo { animation: none; }
}
/* Aniversario de Mato Grosso (09/05): ciclo de 10 s. 0-25% o contorno se desenha; 25-35% ganha verde;
   36% a estrela acende no centro do Estado e solta confetes; 88-95% tudo some e recomeca.
   Gerado por docs/FRENTES/RM39347_REDESIGN_SUGESTOES/ferramentas/aniversario_mt.py. */
.campanha-aniversario-mt .hero-brasao { display: flex; flex-direction: column; align-items: center; }
.campanha-aniversario-mt .hero-lockup-wrap { display: contents; }
.campanha-aniversario-mt .hero-lockup { width: 360px; max-width: 100%; order: 1; }
.campanha-aniversario-mt .hero-nome-sistema { order: 2; }
.campanha-aniversario-mt .mt-cena {
    order: 3;
    display: block;
    width: 250px;
    max-width: 100%;
    height: auto;
    margin-top: 8px;
    overflow: visible;
    pointer-events: none;
    filter: drop-shadow(0 6px 10px rgba(5, 30, 58, .35));
}
.campanha-aniversario-mt .mt-contorno {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: mtContorno 10s ease-in-out infinite;
}
.campanha-aniversario-mt .mt-preenchimento { opacity: 0; animation: mtPreenche 10s ease-in-out infinite; }
.campanha-aniversario-mt .mt-estrela,
.campanha-aniversario-mt .mt-halo {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
}
.campanha-aniversario-mt .mt-estrela { animation: mtEstrela 10s ease-out infinite; }
.campanha-aniversario-mt .mt-halo { animation: mtHalo 10s ease-in-out infinite; }
.campanha-aniversario-mt .mt-confete { opacity: 0; transform-box: fill-box; transform-origin: center; }
.campanha-aniversario-mt .mt-mensagem {
    order: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    margin-top: 4px;
    text-align: center;
    text-shadow: 0 2px 8px rgba(4, 27, 55, .5);
}
.campanha-aniversario-mt .mt-mensagem strong {
    color: #FFF6D6;
    font: 800 15px/1.25 var(--skin-font-display, sans-serif);
}
.campanha-aniversario-mt .mt-mensagem span {
    color: rgba(255, 244, 213, .85);
    font: 500 12px/1.3 var(--skin-font-display, sans-serif);
}
@keyframes mtContorno {
    0%        { stroke-dashoffset: 1000; opacity: 1; }
    25%, 88%  { stroke-dashoffset: 0; opacity: 1; }
    95%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes mtPreenche {
    0%, 24%   { opacity: 0; }
    35%, 88%  { opacity: .28; }
    95%, 100% { opacity: 0; }
}
@keyframes mtEstrela {
    0%, 35.9% { opacity: 0; transform: scale(.2) rotate(-40deg); }
    40%       { opacity: 1; transform: scale(1.35) rotate(8deg); }
    44%, 88%  { opacity: 1; transform: scale(1) rotate(0deg); }
    95%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes mtHalo {
    0%, 37%   { opacity: 0; transform: scale(.5); }
    42%       { opacity: 1; transform: scale(1.2); }
    55%, 70%  { opacity: .55; transform: scale(1); }
    62%       { opacity: .9; transform: scale(1.1); }
    88%       { opacity: .55; }
    95%, 100% { opacity: 0; }
}
@keyframes mtConfete1 {
    0%, 37.99% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    39.00% { opacity: 1; }
    46.00% { transform: translate(-28px, -25px) rotate(130deg); }
    68.00% { opacity: 1; }
    76.00%, 100% { opacity: 0; transform: translate(-46px, 40px) rotate(260deg); }
}
.campanha-aniversario-mt .mt-confete-1 { animation: mtConfete1 10s ease-out infinite; }
@keyframes mtConfete2 {
    0%, 39.49% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    40.50% { opacity: 1; }
    47.50% { transform: translate(-18px, -22px) rotate(-100deg); }
    69.50% { opacity: 1; }
    77.50%, 100% { opacity: 0; transform: translate(-30px, 58px) rotate(-200deg); }
}
.campanha-aniversario-mt .mt-confete-2 { animation: mtConfete2 10s ease-out infinite; }
@keyframes mtConfete3 {
    0%, 38.79% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    39.80% { opacity: 1; }
    46.80% { transform: translate(-8px, -20px) rotate(160deg); }
    68.80% { opacity: 1; }
    76.80%, 100% { opacity: 0; transform: translate(-14px, 46px) rotate(320deg); }
}
.campanha-aniversario-mt .mt-confete-3 { animation: mtConfete3 10s ease-out infinite; }
@keyframes mtConfete4 {
    0%, 40.19% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    41.20% { opacity: 1; }
    48.20% { transform: translate(5px, -19px) rotate(-140deg); }
    70.20% { opacity: 1; }
    78.20%, 100% { opacity: 0; transform: translate(8px, 62px) rotate(-280deg); }
}
.campanha-aniversario-mt .mt-confete-4 { animation: mtConfete4 10s ease-out infinite; }
@keyframes mtConfete5 {
    0%, 39.19% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    40.20% { opacity: 1; }
    47.20% { transform: translate(14px, -22px) rotate(120deg); }
    69.20% { opacity: 1; }
    77.20%, 100% { opacity: 0; transform: translate(24px, 50px) rotate(240deg); }
}
.campanha-aniversario-mt .mt-confete-5 { animation: mtConfete5 10s ease-out infinite; }
@keyframes mtConfete6 {
    0%, 40.79% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    41.80% { opacity: 1; }
    48.80% { transform: translate(24px, -24px) rotate(-150deg); }
    70.80% { opacity: 1; }
    78.80%, 100% { opacity: 0; transform: translate(40px, 60px) rotate(-300deg); }
}
.campanha-aniversario-mt .mt-confete-6 { animation: mtConfete6 10s ease-out infinite; }
@keyframes mtConfete7 {
    0%, 38.39% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    39.40% { opacity: 1; }
    46.40% { transform: translate(31px, -26px) rotate(110deg); }
    68.40% { opacity: 1; }
    76.40%, 100% { opacity: 0; transform: translate(52px, 38px) rotate(220deg); }
}
.campanha-aniversario-mt .mt-confete-7 { animation: mtConfete7 10s ease-out infinite; }
@keyframes mtConfete8 {
    0%, 41.19% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    42.20% { opacity: 1; }
    49.20% { transform: translate(-32px, -26px) rotate(-120deg); }
    71.20% { opacity: 1; }
    79.20%, 100% { opacity: 0; transform: translate(-54px, 22px) rotate(-240deg); }
}
.campanha-aniversario-mt .mt-confete-8 { animation: mtConfete8 10s ease-out infinite; }
@keyframes mtConfete9 {
    0%, 39.79% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    40.80% { opacity: 1; }
    47.80% { transform: translate(-37px, -27px) rotate(140deg); }
    69.80% { opacity: 1; }
    77.80%, 100% { opacity: 0; transform: translate(-62px, 52px) rotate(280deg); }
}
.campanha-aniversario-mt .mt-confete-9 { animation: mtConfete9 10s ease-out infinite; }
@keyframes mtConfete10 {
    0%, 40.59% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    41.60% { opacity: 1; }
    48.60% { transform: translate(-23px, -24px) rotate(-130deg); }
    70.60% { opacity: 1; }
    78.60%, 100% { opacity: 0; transform: translate(-38px, 30px) rotate(-260deg); }
}
.campanha-aniversario-mt .mt-confete-10 { animation: mtConfete10 10s ease-out infinite; }
@keyframes mtConfete11 {
    0%, 38.99% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    40.00% { opacity: 1; }
    47.00% { transform: translate(10px, -20px) rotate(150deg); }
    69.00% { opacity: 1; }
    77.00%, 100% { opacity: 0; transform: translate(16px, 34px) rotate(300deg); }
}
.campanha-aniversario-mt .mt-confete-11 { animation: mtConfete11 10s ease-out infinite; }
@keyframes mtConfete12 {
    0%, 39.99% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    41.00% { opacity: 1; }
    48.00% { transform: translate(37px, -27px) rotate(-110deg); }
    70.00% { opacity: 1; }
    78.00%, 100% { opacity: 0; transform: translate(62px, 54px) rotate(-220deg); }
}
.campanha-aniversario-mt .mt-confete-12 { animation: mtConfete12 10s ease-out infinite; }
@keyframes mtConfete13 {
    0%, 41.39% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    42.40% { opacity: 1; }
    49.40% { transform: translate(20px, -23px) rotate(130deg); }
    71.40% { opacity: 1; }
    79.40%, 100% { opacity: 0; transform: translate(34px, 66px) rotate(260deg); }
}
.campanha-aniversario-mt .mt-confete-13 { animation: mtConfete13 10s ease-out infinite; }
@keyframes mtConfete14 {
    0%, 38.59% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    39.60% { opacity: 1; }
    46.60% { transform: translate(-4px, -19px) rotate(-160deg); }
    68.60% { opacity: 1; }
    76.60%, 100% { opacity: 0; transform: translate(-6px, 70px) rotate(-320deg); }
}
.campanha-aniversario-mt .mt-confete-14 { animation: mtConfete14 10s ease-out infinite; }
@media (max-width: 1024px) {
    .campanha-aniversario-mt .hero-lockup { width: 300px; }
}
@media (max-width: 900px) {
    .campanha-aniversario-mt .mt-cena,
    .campanha-aniversario-mt .mt-mensagem { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .campanha-aniversario-mt .mt-cena * { animation: none !important; }
    .campanha-aniversario-mt .mt-contorno { stroke-dashoffset: 0; }
    .campanha-aniversario-mt .mt-preenchimento { opacity: .28; }
    .campanha-aniversario-mt .mt-estrela,
    .campanha-aniversario-mt .mt-halo { opacity: 1; }
}
/* Dia Internacional da Mulher (08/03): buque de rosas que vem do fundo para a frente (ciclo de 10 s; linha do
   tempo absoluta, gerada por docs/FRENTES/RM39347_REDESIGN_SUGESTOES/ferramentas/dia_da_mulher.py). */
.campanha-mulher .hero-brasao { display: flex; flex-direction: column; align-items: center; }
.campanha-mulher .hero-lockup-wrap { display: contents; }
.campanha-mulher .hero-lockup { width: 360px; max-width: 100%; order: 1; }
.campanha-mulher .hero-nome-sistema { order: 2; }
.campanha-mulher .mulher-cena {
    order: 3;
    display: block;
    width: 270px;
    max-width: 100%;
    height: auto;
    margin-top: 6px;
    overflow: visible;
    pointer-events: none;
    animation: mulherNitidez 10s ease-in infinite;
}
.mulher-cena .mulher-aproxima { opacity: 0; animation: mulherAproxima 10s linear infinite; }
.mulher-cena .mulher-balanco { animation: mulherBalanco 3.2s ease-in-out infinite alternate; transform-origin: 0 52px; }
.mulher-cena .mulher-halo { opacity: 0; transform-box: fill-box; transform-origin: center; animation: mulherHalo 10s ease-in-out infinite; }
.mulher-cena .mulher-fita-esq { transform-origin: 0 2px; animation: mulherFitaEsq 1.6s ease-in-out infinite alternate; }
.mulher-cena .mulher-fita-dir { transform-origin: 0 2px; animation: mulherFitaDir 1.9s ease-in-out infinite alternate; }
.mulher-cena .mulher-petala,
.mulher-cena .mulher-brilho { opacity: 0; }
.campanha-mulher .mulher-mensagem {
    order: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    margin-top: 4px;
    text-align: center;
    text-shadow: 0 2px 8px rgba(4, 27, 55, .5);
}
.campanha-mulher .mulher-mensagem strong {
    color: #FFF6D6;
    font: 800 15px/1.25 var(--skin-font-display, sans-serif);
}
.campanha-mulher .mulher-mensagem span {
    color: rgba(255, 244, 213, .85);
    font: 500 12px/1.3 var(--skin-font-display, sans-serif);
}
@keyframes mulherAproxima {
    0% { opacity: 0; transform: translate(0, -40px) scale(.12) rotate(-12deg); }
    3% { opacity: 1; }
    6% { transform: translate(0, -31.4px) scale(0.154) rotate(-9.4deg); }
    10% { transform: translate(0, -25.7px) scale(0.182) rotate(-7.7deg); }
    14% { transform: translate(0, -20.0px) scale(0.222) rotate(-6.0deg); }
    18% { transform: translate(0, -14.3px) scale(0.286) rotate(-4.3deg); }
    22% { transform: translate(0, -8.6px) scale(0.400) rotate(-2.6deg); }
    25% { transform: translate(0, -4.3px) scale(0.571) rotate(-1.3deg); }
    28% { transform: translate(0, -0.0px) scale(1.000) rotate(-0.0deg); }
    31% { transform: translate(0, 0) scale(1.07) rotate(1.5deg); }
    34% { transform: translate(0, 0) scale(.98) rotate(-.5deg); }
    37%, 86% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
    95%, 100% { opacity: 0; transform: translate(0, 10px) scale(1.35) rotate(0deg); }
}
@keyframes mulherNitidez {
    0% { filter: blur(3px) drop-shadow(0 2px 3px rgba(5, 30, 58, .2)); }
    20% { filter: blur(1.2px) drop-shadow(0 4px 6px rgba(5, 30, 58, .28)); }
    30%, 86% { filter: blur(0) drop-shadow(0 8px 14px rgba(5, 30, 58, .4)); }
    95%, 100% { filter: blur(2px) drop-shadow(0 10px 18px rgba(5, 30, 58, .2)); }
}
@keyframes mulherHalo {
    0%, 28% { opacity: 0; transform: scale(.4); }
    33% { opacity: 1; transform: scale(1.1); }
    50% { opacity: .6; transform: scale(1); }
    68% { opacity: .9; transform: scale(1.05); }
    86% { opacity: .6; transform: scale(1); }
    95%, 100% { opacity: 0; transform: scale(1.2); }
}
@keyframes mulherBalanco {
    0% { transform: rotate(-2deg); }
    100% { transform: rotate(2deg); }
}
@keyframes mulherRespira {
    0% { transform: scale(.94) rotate(-6deg); }
    100% { transform: scale(1.06) rotate(6deg); }
}
@keyframes mulherFitaEsq {
    0% { transform: rotate(-8deg); }
    100% { transform: rotate(10deg); }
}
@keyframes mulherFitaDir {
    0% { transform: rotate(8deg); }
    100% { transform: rotate(-10deg); }
}
@keyframes mulherRosa1 {
    0%, 30% { transform: scale(.72) rotate(-25deg); }
    35% { transform: scale(1.1) rotate(4deg); }
    38%, 88% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(.72) rotate(-25deg); }
}
.mulher-cena .mulher-rosa-1 { animation: mulherRosa1 10s ease-out infinite; }
.mulher-cena .mulher-rosa-1 .mulher-botao { animation: mulherRespira 2.03s ease-in-out -0.4s infinite alternate; }
@keyframes mulherRosa2 {
    0%, 31% { transform: scale(.72) rotate(-25deg); }
    36% { transform: scale(1.1) rotate(4deg); }
    39%, 88% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(.72) rotate(-25deg); }
}
.mulher-cena .mulher-rosa-2 { animation: mulherRosa2 10s ease-out infinite; }
.mulher-cena .mulher-rosa-2 .mulher-botao { animation: mulherRespira 2.26s ease-in-out -0.8s infinite alternate; }
@keyframes mulherRosa3 {
    0%, 32% { transform: scale(.72) rotate(-25deg); }
    37% { transform: scale(1.1) rotate(4deg); }
    40%, 88% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(.72) rotate(-25deg); }
}
.mulher-cena .mulher-rosa-3 { animation: mulherRosa3 10s ease-out infinite; }
.mulher-cena .mulher-rosa-3 .mulher-botao { animation: mulherRespira 2.49s ease-in-out -1.2s infinite alternate; }
@keyframes mulherRosa4 {
    0%, 33% { transform: scale(.72) rotate(-25deg); }
    38% { transform: scale(1.1) rotate(4deg); }
    41%, 88% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(.72) rotate(-25deg); }
}
.mulher-cena .mulher-rosa-4 { animation: mulherRosa4 10s ease-out infinite; }
.mulher-cena .mulher-rosa-4 .mulher-botao { animation: mulherRespira 2.72s ease-in-out -1.6s infinite alternate; }
@keyframes mulherRosa5 {
    0%, 34% { transform: scale(.72) rotate(-25deg); }
    39% { transform: scale(1.1) rotate(4deg); }
    42%, 88% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(.72) rotate(-25deg); }
}
.mulher-cena .mulher-rosa-5 { animation: mulherRosa5 10s ease-out infinite; }
.mulher-cena .mulher-rosa-5 .mulher-botao { animation: mulherRespira 2.95s ease-in-out -2.0s infinite alternate; }
@keyframes mulherRosa6 {
    0%, 35% { transform: scale(.72) rotate(-25deg); }
    40% { transform: scale(1.1) rotate(4deg); }
    43%, 88% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(.72) rotate(-25deg); }
}
.mulher-cena .mulher-rosa-6 { animation: mulherRosa6 10s ease-out infinite; }
.mulher-cena .mulher-rosa-6 .mulher-botao { animation: mulherRespira 3.18s ease-in-out -2.4s infinite alternate; }
@keyframes mulherRosa7 {
    0%, 36% { transform: scale(.72) rotate(-25deg); }
    41% { transform: scale(1.1) rotate(4deg); }
    44%, 88% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(.72) rotate(-25deg); }
}
.mulher-cena .mulher-rosa-7 { animation: mulherRosa7 10s ease-out infinite; }
.mulher-cena .mulher-rosa-7 .mulher-botao { animation: mulherRespira 3.41s ease-in-out -2.8s infinite alternate; }
@keyframes mulherPetala1 {
    0%, 50% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    52% { opacity: 1; }
    58% { transform: translate(-16px, 40px) rotate(120deg); }
    64% { opacity: .9; transform: translate(6px, 80px) rotate(220deg); }
    68%, 100% { opacity: 0; transform: translate(-5px, 104px) rotate(300deg); }
}
.mulher-cena .mulher-petala-1 { animation: mulherPetala1 10s ease-in-out infinite; }
@keyframes mulherPetala2 {
    0%, 60% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    62% { opacity: 1; }
    68% { transform: translate(14px, 40px) rotate(120deg); }
    74% { opacity: .9; transform: translate(-6px, 80px) rotate(220deg); }
    78%, 100% { opacity: 0; transform: translate(4px, 104px) rotate(300deg); }
}
.mulher-cena .mulher-petala-2 { animation: mulherPetala2 10s ease-in-out infinite; }
@keyframes mulherPetala3 {
    0%, 70% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    72% { opacity: 1; }
    78% { transform: translate(-8px, 40px) rotate(120deg); }
    84% { opacity: .9; transform: translate(3px, 80px) rotate(220deg); }
    88%, 100% { opacity: 0; transform: translate(-2px, 104px) rotate(300deg); }
}
.mulher-cena .mulher-petala-3 { animation: mulherPetala3 10s ease-in-out infinite; }
@keyframes mulherBrilho1 {
    0%, 36% { opacity: 0; transform: scale(0) rotate(0deg); }
    39% { opacity: 1; transform: scale(1.2) rotate(45deg); }
    43% { opacity: 0; transform: scale(.3) rotate(90deg); }
    54% { opacity: 0; transform: scale(0); }
    57% { opacity: .9; transform: scale(1) rotate(45deg); }
    61%, 100% { opacity: 0; transform: scale(0) rotate(90deg); }
}
.mulher-cena .mulher-brilho-1 { animation: mulherBrilho1 10s ease-in-out infinite; }
@keyframes mulherBrilho2 {
    0%, 40% { opacity: 0; transform: scale(0) rotate(0deg); }
    43% { opacity: 1; transform: scale(1.2) rotate(45deg); }
    47% { opacity: 0; transform: scale(.3) rotate(90deg); }
    58% { opacity: 0; transform: scale(0); }
    61% { opacity: .9; transform: scale(1) rotate(45deg); }
    65%, 100% { opacity: 0; transform: scale(0) rotate(90deg); }
}
.mulher-cena .mulher-brilho-2 { animation: mulherBrilho2 10s ease-in-out infinite; }
@keyframes mulherBrilho3 {
    0%, 46% { opacity: 0; transform: scale(0) rotate(0deg); }
    49% { opacity: 1; transform: scale(1.2) rotate(45deg); }
    53% { opacity: 0; transform: scale(.3) rotate(90deg); }
    64% { opacity: 0; transform: scale(0); }
    67% { opacity: .9; transform: scale(1) rotate(45deg); }
    71%, 100% { opacity: 0; transform: scale(0) rotate(90deg); }
}
.mulher-cena .mulher-brilho-3 { animation: mulherBrilho3 10s ease-in-out infinite; }
@keyframes mulherBrilho4 {
    0%, 52% { opacity: 0; transform: scale(0) rotate(0deg); }
    55% { opacity: 1; transform: scale(1.2) rotate(45deg); }
    59% { opacity: 0; transform: scale(.3) rotate(90deg); }
    70% { opacity: 0; transform: scale(0); }
    73% { opacity: .9; transform: scale(1) rotate(45deg); }
    77%, 100% { opacity: 0; transform: scale(0) rotate(90deg); }
}
.mulher-cena .mulher-brilho-4 { animation: mulherBrilho4 10s ease-in-out infinite; }
@keyframes mulherBrilho5 {
    0%, 58% { opacity: 0; transform: scale(0) rotate(0deg); }
    61% { opacity: 1; transform: scale(1.2) rotate(45deg); }
    65% { opacity: 0; transform: scale(.3) rotate(90deg); }
    76% { opacity: 0; transform: scale(0); }
    79% { opacity: .9; transform: scale(1) rotate(45deg); }
    83%, 100% { opacity: 0; transform: scale(0) rotate(90deg); }
}
.mulher-cena .mulher-brilho-5 { animation: mulherBrilho5 10s ease-in-out infinite; }
@media (max-width: 1024px) {
    .campanha-mulher .hero-lockup { width: 300px; }
}
@media (max-width: 900px) {
    .campanha-mulher .mulher-cena,
    .campanha-mulher .mulher-mensagem { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .campanha-mulher .mulher-cena,
    .mulher-cena * { animation: none !important; }
    .mulher-cena .mulher-aproxima { opacity: 1; }
    .mulher-cena .mulher-halo { opacity: .6; }
}
/* maes: cena familiar de 10 s, com tempos absolutos por elemento. */
.campanha-maes .hero-brasao { display: flex; flex-direction: column; align-items: center; }
.campanha-maes .hero-lockup-wrap { display: contents; }
.campanha-maes .hero-lockup { width: 360px; max-width: 100%; order: 1; }
.campanha-maes .hero-nome-sistema { order: 2; }
.campanha-maes .maes-cena { order: 3; display: block; width: 340px; max-width: 100%; height: auto; margin-top: 6px; overflow: visible; pointer-events: none; filter: drop-shadow(0 5px 7px rgba(4,27,55,.28)); }
.campanha-maes .maes-mensagem { order: 4; display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: 4px; text-align: center; text-shadow: 0 2px 8px rgba(4,27,55,.5); }
.campanha-maes .maes-mensagem strong { color: #FFF6D6; font: 800 15px/1.25 var(--skin-font-display, sans-serif); }
.campanha-maes .maes-mensagem span { color: rgba(255,244,213,.85); font: 500 12px/1.3 var(--skin-font-display, sans-serif); }
.maes-cena .maes-aura { transform-box: fill-box; transform-origin: center; }
@media (max-width: 1024px) { .campanha-maes .hero-lockup { width: 300px; } }
@media (max-width: 900px) { .campanha-maes .maes-cena, .campanha-maes .maes-mensagem { display: none; } }
.maes-cena .maes-grupo { animation: maesGrupo 10s ease-in-out infinite; }
.maes-cena .maes-menino-trajeto { animation: maesMeninoTrajeto 10s ease-in-out infinite; }
.maes-cena .maes-menina-trajeto { animation: maesMeninaTrajeto 10s ease-in-out infinite; }
.maes-cena .maes-menino-quique { animation: maesMeninoQuique 10s ease-in-out infinite; }
.maes-cena .maes-menina-quique { animation: maesMeninaQuique 10s ease-in-out infinite; }
.maes-cena .maes-mae-agacha { animation: maesMaeAgacha 10s ease-in-out infinite; }
.maes-cena .maes-menino-inclina { animation: maesMeninoInclina 10s ease-in-out infinite; }
.maes-cena .maes-menina-inclina { animation: maesMeninaInclina 10s ease-in-out infinite; }
.maes-cena .maes-mae-braco-esq { animation: maesBracoEsq 10s ease-in-out infinite; }
.maes-cena .maes-mae-braco-dir { animation: maesBracoDir 10s ease-in-out infinite; }
.maes-cena .maes-mae-mao-esq { animation: maesMao 10s ease-in-out infinite; }
.maes-cena .maes-mae-mao-dir { animation: maesMao 10s ease-in-out infinite; }
.maes-cena .maes-coracao-grande { animation: maesCoracaoGrande 10s ease-in-out infinite; }
.maes-cena .maes-aura { animation: maesAura 10s ease-in-out infinite; }
.maes-cena .maes-menino-perna-esq { animation: maesMeninoPernaEsq 10s ease-in-out infinite; }
.maes-cena .maes-menino-perna-dir { animation: maesMeninoPernaDir 10s ease-in-out infinite; }
.maes-cena .maes-menino-braco-corre-esq { animation: maesMeninoBracoCorreEsq 10s ease-in-out infinite; }
.maes-cena .maes-menino-braco-corre-dir { animation: maesMeninoBracoCorreDir 10s ease-in-out infinite; }
.maes-cena .maes-menino-braco-interno { animation: maesMeninoAbraco 10s ease-in-out infinite; }
.maes-cena .maes-menino-braco-externo { animation: maesMeninoAbraco 10s ease-in-out infinite; }
.maes-cena .maes-menino-mao-interna { animation: maesMeninoAbraco 10s ease-in-out infinite; }
.maes-cena .maes-menina-perna-esq { animation: maesMeninaPernaEsq 10s ease-in-out infinite; }
.maes-cena .maes-menina-perna-dir { animation: maesMeninaPernaDir 10s ease-in-out infinite; }
.maes-cena .maes-menina-braco-corre-esq { animation: maesMeninaBracoCorreEsq 10s ease-in-out infinite; }
.maes-cena .maes-menina-braco-corre-dir { animation: maesMeninaBracoCorreDir 10s ease-in-out infinite; }
.maes-cena .maes-menina-braco-interno { animation: maesMeninaAbraco 10s ease-in-out infinite; }
.maes-cena .maes-menina-braco-externo { animation: maesMeninaAbraco 10s ease-in-out infinite; }
.maes-cena .maes-menina-mao-interna { animation: maesMeninaAbraco 10s ease-in-out infinite; }
.maes-cena .maes-coracao-1 { animation: maesCoracao1 10s ease-in-out infinite; }
.maes-cena .maes-coracao-2 { animation: maesCoracao2 10s ease-in-out infinite; }
.maes-cena .maes-coracao-3 { animation: maesCoracao3 10s ease-in-out infinite; }
.maes-cena .maes-coracao-4 { animation: maesCoracao4 10s ease-in-out infinite; }
.maes-cena .maes-brilho-1 { animation: maesBrilho1 10s ease-in-out infinite; }
.maes-cena .maes-brilho-2 { animation: maesBrilho2 10s ease-in-out infinite; }
.maes-cena .maes-brilho-3 { animation: maesBrilho3 10s ease-in-out infinite; }
@keyframes maesGrupo {
    0%, 3% { opacity: 0; }
    7%, 85% { opacity: 1; }
    94%, 100% { opacity: 0; }
}
@keyframes maesMeninoTrajeto {
    0%, 8% { transform: translate(-3px, 0); }
    16% { transform: translate(31px, -3px); }
    27% { transform: translate(65px, 0); }
    34%, 86% { transform: translate(75px, 0); }
    100% { transform: translate(75px, 0); }
}
@keyframes maesMeninaTrajeto {
    0%, 11% { transform: translate(3px, 0); }
    19% { transform: translate(-31px, -3px); }
    30% { transform: translate(-64px, 0); }
    37%, 86% { transform: translate(-75px, 0); }
    100% { transform: translate(-75px, 0); }
}
@keyframes maesMeninoQuique {
    0%, 8% { transform: translateY(0); }
    12% { transform: translateY(-6px); }
    16% { transform: translateY(0); }
    20% { transform: translateY(-7px); }
    24% { transform: translateY(0); }
    28% { transform: translateY(-4px); }
    34%, 60% { transform: translateY(0); }
    68% { transform: translateY(-2px); }
    80%, 100% { transform: translateY(0); }
}
@keyframes maesMeninaQuique {
    0%, 11% { transform: translateY(0); }
    15% { transform: translateY(-6px); }
    19% { transform: translateY(0); }
    23% { transform: translateY(-7px); }
    27% { transform: translateY(0); }
    31% { transform: translateY(-4px); }
    37%, 63% { transform: translateY(0); }
    71% { transform: translateY(-2px); }
    83%, 100% { transform: translateY(0); }
}
@keyframes maesMaeAgacha {
    0%, 20% { transform: translateY(0) scaleY(1); }
    32% { transform: translateY(0) scaleY(.94); }
    40%, 70% { transform: translateY(0) scaleY(.9); }
    78%, 100% { transform: translateY(0) scaleY(.94); }
}
@keyframes maesBracoEsq {
    0%, 18% { d: path("M-12 -56 Q-16 -45 -19 -34 Q-21 -27 -22 -22"); }
    28% { d: path("M-12 -56 Q-27 -75 -39 -58 Q-43 -52 -43 -47"); }
    42%, 82% { d: path("M-12 -56 Q-28 -61 -37 -47 Q-41 -37 -34 -33"); }
    100% { d: path("M-12 -56 Q-28 -61 -37 -47 Q-41 -37 -34 -33"); }
}
@keyframes maesBracoDir {
    0%, 18% { d: path("M12 -56 Q16 -45 19 -34 Q21 -27 22 -22"); }
    28% { d: path("M12 -56 Q27 -75 39 -58 Q43 -52 43 -47"); }
    42%, 82% { d: path("M12 -56 Q28 -61 37 -47 Q41 -37 34 -33"); }
    100% { d: path("M12 -56 Q28 -61 37 -47 Q41 -37 34 -33"); }
}
@keyframes maesMao {
    0%, 39% { opacity: 0; }
    43%, 86% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes maesCoracaoGrande {
    0%, 39% { opacity: 0; transform: scale(.1); }
    46% { opacity: 1; transform: scale(1.15); }
    51% { transform: scale(.95); }
    57% { transform: scale(1.08); }
    64% { transform: scale(1); }
    72% { transform: scale(1.09); }
    82% { opacity: 1; transform: scale(1); }
    94%, 100% { opacity: 0; transform: scale(.65); }
}
@keyframes maesAura {
    0%, 38% { opacity: 0; transform: scale(.5); }
    50% { opacity: .8; transform: scale(1); }
    75% { opacity: .55; transform: scale(1.1); }
    94%, 100% { opacity: 0; transform: scale(1.2); }
}
@keyframes maesMeninoInclina {
    0%, 8% { transform: rotate(0deg); }
    12%, 26% { transform: rotate(11deg); }
    30% { transform: rotate(5deg); }
    34%, 100% { transform: rotate(0deg); }
}
@keyframes maesMeninoPernaEsq {
    0%, 8% { transform: rotate(0deg); }
    12% { transform: rotate(-34deg); }
    16% { transform: rotate(34deg); }
    20% { transform: rotate(-34deg); }
    24% { transform: rotate(30deg); }
    31% { transform: rotate(-15deg); }
    34%, 100% { transform: rotate(0deg); }
}
@keyframes maesMeninoPernaDir {
    0%, 8% { transform: rotate(0deg); }
    12% { transform: rotate(34deg); }
    16% { transform: rotate(-34deg); }
    20% { transform: rotate(34deg); }
    24% { transform: rotate(-30deg); }
    31% { transform: rotate(15deg); }
    34%, 100% { transform: rotate(0deg); }
}
@keyframes maesMeninoBracoCorreEsq {
    0%, 8% { opacity: 1; transform: rotate(0deg); }
    12% { transform: rotate(40deg); }
    16% { transform: rotate(-40deg); }
    20% { transform: rotate(40deg); }
    24% { transform: rotate(-35deg); }
    31% { opacity: 1; transform: rotate(15deg); }
    41%, 86% { opacity: 0; transform: rotate(0deg); }
    94%, 100% { opacity: 1; transform: rotate(0deg); }
}
@keyframes maesMeninoBracoCorreDir {
    0%, 8% { opacity: 1; transform: rotate(0deg); }
    12% { transform: rotate(-40deg); }
    16% { transform: rotate(40deg); }
    20% { transform: rotate(-40deg); }
    24% { transform: rotate(35deg); }
    31% { opacity: 1; transform: rotate(-15deg); }
    41%, 86% { opacity: 0; transform: rotate(0deg); }
    94%, 100% { opacity: 1; transform: rotate(0deg); }
}
@keyframes maesMeninoAbraco {
    0%, 31% { opacity: 0; }
    41%, 86% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes maesMeninaInclina {
    0%, 11% { transform: rotate(0deg); }
    15%, 29% { transform: rotate(-11deg); }
    33% { transform: rotate(-5deg); }
    37%, 100% { transform: rotate(0deg); }
}
@keyframes maesMeninaPernaEsq {
    0%, 11% { transform: rotate(0deg); }
    15% { transform: rotate(-34deg); }
    19% { transform: rotate(34deg); }
    23% { transform: rotate(-34deg); }
    27% { transform: rotate(30deg); }
    34% { transform: rotate(-15deg); }
    37%, 100% { transform: rotate(0deg); }
}
@keyframes maesMeninaPernaDir {
    0%, 11% { transform: rotate(0deg); }
    15% { transform: rotate(34deg); }
    19% { transform: rotate(-34deg); }
    23% { transform: rotate(34deg); }
    27% { transform: rotate(-30deg); }
    34% { transform: rotate(15deg); }
    37%, 100% { transform: rotate(0deg); }
}
@keyframes maesMeninaBracoCorreEsq {
    0%, 11% { opacity: 1; transform: rotate(0deg); }
    15% { transform: rotate(40deg); }
    19% { transform: rotate(-40deg); }
    23% { transform: rotate(40deg); }
    27% { transform: rotate(-35deg); }
    34% { opacity: 1; transform: rotate(15deg); }
    41%, 86% { opacity: 0; transform: rotate(0deg); }
    94%, 100% { opacity: 1; transform: rotate(0deg); }
}
@keyframes maesMeninaBracoCorreDir {
    0%, 11% { opacity: 1; transform: rotate(0deg); }
    15% { transform: rotate(-40deg); }
    19% { transform: rotate(40deg); }
    23% { transform: rotate(-40deg); }
    27% { transform: rotate(35deg); }
    34% { opacity: 1; transform: rotate(-15deg); }
    41%, 86% { opacity: 0; transform: rotate(0deg); }
    94%, 100% { opacity: 1; transform: rotate(0deg); }
}
@keyframes maesMeninaAbraco {
    0%, 31% { opacity: 0; }
    41%, 86% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes maesCoracao1 {
    0%, 46% { opacity: 0; transform: translateY(0) scale(.3); }
    51% { opacity: .9; transform: translateY(-5px) scale(1); }
    69% { opacity: .7; transform: translateY(-25px) scale(.8); }
    80%, 100% { opacity: 0; transform: translateY(-43px) scale(.4); }
}
@keyframes maesCoracao2 {
    0%, 50% { opacity: 0; transform: translateY(0) scale(.3); }
    55% { opacity: .9; transform: translateY(-5px) scale(1); }
    73% { opacity: .7; transform: translateY(-25px) scale(.8); }
    84%, 100% { opacity: 0; transform: translateY(-43px) scale(.4); }
}
@keyframes maesCoracao3 {
    0%, 54% { opacity: 0; transform: translateY(0) scale(.3); }
    59% { opacity: .9; transform: translateY(-5px) scale(1); }
    77% { opacity: .7; transform: translateY(-25px) scale(.8); }
    88%, 100% { opacity: 0; transform: translateY(-43px) scale(.4); }
}
@keyframes maesCoracao4 {
    0%, 58% { opacity: 0; transform: translateY(0) scale(.3); }
    63% { opacity: .9; transform: translateY(-5px) scale(1); }
    81% { opacity: .7; transform: translateY(-25px) scale(.8); }
    92%, 100% { opacity: 0; transform: translateY(-43px) scale(.4); }
}
@keyframes maesBrilho1 {
    0%, 47% { opacity: 0; transform: scale(0) rotate(0deg); }
    52% { opacity: 1; transform: scale(1.2) rotate(45deg); }
    59% { opacity: .2; transform: scale(.5) rotate(90deg); }
    75% { opacity: .9; transform: scale(1) rotate(135deg); }
    94%, 100% { opacity: 0; transform: scale(0) rotate(180deg); }
}
@keyframes maesBrilho2 {
    0%, 52% { opacity: 0; transform: scale(0) rotate(0deg); }
    57% { opacity: 1; transform: scale(1.2) rotate(45deg); }
    64% { opacity: .2; transform: scale(.5) rotate(90deg); }
    80% { opacity: .9; transform: scale(1) rotate(135deg); }
    94%, 100% { opacity: 0; transform: scale(0) rotate(180deg); }
}
@keyframes maesBrilho3 {
    0%, 57% { opacity: 0; transform: scale(0) rotate(0deg); }
    62% { opacity: 1; transform: scale(1.2) rotate(45deg); }
    69% { opacity: .2; transform: scale(.5) rotate(90deg); }
    85% { opacity: .9; transform: scale(1) rotate(135deg); }
    94%, 100% { opacity: 0; transform: scale(0) rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  .campanha-maes .maes-cena * { animation: none !important; }
  .maes-cena [class*="braco-corre"] { opacity: 0; }
  .maes-cena .maes-menino-trajeto { transform: translate(75px, 0); }
  .maes-cena .maes-menina-trajeto { transform: translate(-75px, 0); }
  .maes-cena .maes-mae-agacha { transform: translateY(0) scaleY(.9); }
  .maes-cena .maes-coracao-grande, .maes-cena .maes-aura,
  .maes-cena .maes-mae-mao-esq, .maes-cena .maes-mae-mao-dir,
  .maes-cena .maes-menino-braco-interno, .maes-cena .maes-menino-braco-externo,
  .maes-cena .maes-menina-braco-interno, .maes-cena .maes-menina-braco-externo { opacity: 1; }
}
/* pais: cena familiar de 10 s, com tempos absolutos por elemento. */
.campanha-pais .hero-brasao { display: flex; flex-direction: column; align-items: center; }
.campanha-pais .hero-lockup-wrap { display: contents; }
.campanha-pais .hero-lockup { width: 360px; max-width: 100%; order: 1; }
.campanha-pais .hero-nome-sistema { order: 2; }
.campanha-pais .pais-cena { order: 3; display: block; width: 340px; max-width: 100%; height: auto; margin-top: 6px; overflow: visible; pointer-events: none; filter: drop-shadow(0 5px 7px rgba(4,27,55,.28)); }
.campanha-pais .pais-mensagem { order: 4; display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: 4px; text-align: center; text-shadow: 0 2px 8px rgba(4,27,55,.5); }
.campanha-pais .pais-mensagem strong { color: #FFF6D6; font: 800 15px/1.25 var(--skin-font-display, sans-serif); }
.campanha-pais .pais-mensagem span { color: rgba(255,244,213,.85); font: 500 12px/1.3 var(--skin-font-display, sans-serif); }
.pais-cena .pais-aura { transform-box: fill-box; transform-origin: center; }
@media (max-width: 1024px) { .campanha-pais .hero-lockup { width: 300px; } }
@media (max-width: 900px) { .campanha-pais .pais-cena, .campanha-pais .pais-mensagem { display: none; } }
.pais-cena .pais-grupo { animation: paisGrupo 10s ease-in-out infinite; }
.pais-cena .pais-menino-trajeto { animation: paisMeninoTrajeto 10s ease-in-out infinite; }
.pais-cena .pais-menina-trajeto { animation: paisMeninaTrajeto 10s ease-in-out infinite; }
.pais-cena .pais-menino-quique { animation: paisMeninoQuique 10s ease-in-out infinite; }
.pais-cena .pais-menina-quique { animation: paisMeninaQuique 10s ease-in-out infinite; }
.pais-cena .pais-pai-agacha { animation: paisPaiAgacha 10s ease-in-out infinite; }
.pais-cena .pais-menino-inclina { animation: paisMeninoInclina 10s ease-in-out infinite; }
.pais-cena .pais-menina-inclina { animation: paisMeninaInclina 10s ease-in-out infinite; }
.pais-cena .pais-pai-braco-esq { animation: paisBracoEsq 10s ease-in-out infinite; }
.pais-cena .pais-pai-braco-dir { animation: paisBracoDir 10s ease-in-out infinite; }
.pais-cena .pais-pai-mao-esq { animation: paisMao 10s ease-in-out infinite; }
.pais-cena .pais-pai-mao-dir { animation: paisMao 10s ease-in-out infinite; }
.pais-cena .pais-coracao-grande { animation: paisCoracaoGrande 10s ease-in-out infinite; }
.pais-cena .pais-aura { animation: paisAura 10s ease-in-out infinite; }
.pais-cena .pais-menino-perna-esq { animation: paisMeninoPernaEsq 10s ease-in-out infinite; }
.pais-cena .pais-menino-perna-dir { animation: paisMeninoPernaDir 10s ease-in-out infinite; }
.pais-cena .pais-menino-braco-corre-esq { animation: paisMeninoBracoCorreEsq 10s ease-in-out infinite; }
.pais-cena .pais-menino-braco-corre-dir { animation: paisMeninoBracoCorreDir 10s ease-in-out infinite; }
.pais-cena .pais-menino-braco-interno { animation: paisMeninoAbraco 10s ease-in-out infinite; }
.pais-cena .pais-menino-braco-externo { animation: paisMeninoAbraco 10s ease-in-out infinite; }
.pais-cena .pais-menino-mao-interna { animation: paisMeninoAbraco 10s ease-in-out infinite; }
.pais-cena .pais-menina-perna-esq { animation: paisMeninaPernaEsq 10s ease-in-out infinite; }
.pais-cena .pais-menina-perna-dir { animation: paisMeninaPernaDir 10s ease-in-out infinite; }
.pais-cena .pais-menina-braco-corre-esq { animation: paisMeninaBracoCorreEsq 10s ease-in-out infinite; }
.pais-cena .pais-menina-braco-corre-dir { animation: paisMeninaBracoCorreDir 10s ease-in-out infinite; }
.pais-cena .pais-menina-braco-interno { animation: paisMeninaAbraco 10s ease-in-out infinite; }
.pais-cena .pais-menina-braco-externo { animation: paisMeninaAbraco 10s ease-in-out infinite; }
.pais-cena .pais-menina-mao-interna { animation: paisMeninaAbraco 10s ease-in-out infinite; }
.pais-cena .pais-coracao-1 { animation: paisCoracao1 10s ease-in-out infinite; }
.pais-cena .pais-coracao-2 { animation: paisCoracao2 10s ease-in-out infinite; }
.pais-cena .pais-coracao-3 { animation: paisCoracao3 10s ease-in-out infinite; }
.pais-cena .pais-coracao-4 { animation: paisCoracao4 10s ease-in-out infinite; }
.pais-cena .pais-brilho-1 { animation: paisBrilho1 10s ease-in-out infinite; }
.pais-cena .pais-brilho-2 { animation: paisBrilho2 10s ease-in-out infinite; }
.pais-cena .pais-brilho-3 { animation: paisBrilho3 10s ease-in-out infinite; }
@keyframes paisGrupo {
    0%, 3% { opacity: 0; }
    7%, 85% { opacity: 1; }
    94%, 100% { opacity: 0; }
}
@keyframes paisMeninoTrajeto {
    0%, 8% { transform: translate(-3px, 0); }
    16% { transform: translate(31px, -3px); }
    27% { transform: translate(65px, 0); }
    34%, 86% { transform: translate(75px, 0); }
    100% { transform: translate(75px, 0); }
}
@keyframes paisMeninaTrajeto {
    0%, 11% { transform: translate(3px, 0); }
    19% { transform: translate(-31px, -3px); }
    30% { transform: translate(-64px, 0); }
    37%, 86% { transform: translate(-75px, 0); }
    100% { transform: translate(-75px, 0); }
}
@keyframes paisMeninoQuique {
    0%, 8% { transform: translateY(0); }
    12% { transform: translateY(-6px); }
    16% { transform: translateY(0); }
    20% { transform: translateY(-7px); }
    24% { transform: translateY(0); }
    28% { transform: translateY(-4px); }
    34%, 60% { transform: translateY(0); }
    68% { transform: translateY(-2px); }
    80%, 100% { transform: translateY(0); }
}
@keyframes paisMeninaQuique {
    0%, 11% { transform: translateY(0); }
    15% { transform: translateY(-6px); }
    19% { transform: translateY(0); }
    23% { transform: translateY(-7px); }
    27% { transform: translateY(0); }
    31% { transform: translateY(-4px); }
    37%, 63% { transform: translateY(0); }
    71% { transform: translateY(-2px); }
    83%, 100% { transform: translateY(0); }
}
@keyframes paisPaiAgacha {
    0%, 20% { transform: translateY(0) scaleY(1); }
    32% { transform: translateY(0) scaleY(.94); }
    40%, 70% { transform: translateY(0) scaleY(.9); }
    78%, 100% { transform: translateY(0) scaleY(.94); }
}
@keyframes paisBracoEsq {
    0%, 18% { d: path("M-12 -56 Q-16 -45 -19 -34 Q-21 -27 -22 -22"); }
    28% { d: path("M-12 -56 Q-27 -75 -39 -58 Q-43 -52 -43 -47"); }
    42%, 82% { d: path("M-12 -56 Q-28 -61 -37 -47 Q-41 -37 -34 -33"); }
    100% { d: path("M-12 -56 Q-28 -61 -37 -47 Q-41 -37 -34 -33"); }
}
@keyframes paisBracoDir {
    0%, 18% { d: path("M12 -56 Q16 -45 19 -34 Q21 -27 22 -22"); }
    28% { d: path("M12 -56 Q27 -75 39 -58 Q43 -52 43 -47"); }
    42%, 82% { d: path("M12 -56 Q28 -61 37 -47 Q41 -37 34 -33"); }
    100% { d: path("M12 -56 Q28 -61 37 -47 Q41 -37 34 -33"); }
}
@keyframes paisMao {
    0%, 39% { opacity: 0; }
    43%, 86% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes paisCoracaoGrande {
    0%, 39% { opacity: 0; transform: scale(.1); }
    46% { opacity: 1; transform: scale(1.15); }
    51% { transform: scale(.95); }
    57% { transform: scale(1.08); }
    64% { transform: scale(1); }
    72% { transform: scale(1.09); }
    82% { opacity: 1; transform: scale(1); }
    94%, 100% { opacity: 0; transform: scale(.65); }
}
@keyframes paisAura {
    0%, 38% { opacity: 0; transform: scale(.5); }
    50% { opacity: .8; transform: scale(1); }
    75% { opacity: .55; transform: scale(1.1); }
    94%, 100% { opacity: 0; transform: scale(1.2); }
}
@keyframes paisMeninoInclina {
    0%, 8% { transform: rotate(0deg); }
    12%, 26% { transform: rotate(11deg); }
    30% { transform: rotate(5deg); }
    34%, 100% { transform: rotate(0deg); }
}
@keyframes paisMeninoPernaEsq {
    0%, 8% { transform: rotate(0deg); }
    12% { transform: rotate(-34deg); }
    16% { transform: rotate(34deg); }
    20% { transform: rotate(-34deg); }
    24% { transform: rotate(30deg); }
    31% { transform: rotate(-15deg); }
    34%, 100% { transform: rotate(0deg); }
}
@keyframes paisMeninoPernaDir {
    0%, 8% { transform: rotate(0deg); }
    12% { transform: rotate(34deg); }
    16% { transform: rotate(-34deg); }
    20% { transform: rotate(34deg); }
    24% { transform: rotate(-30deg); }
    31% { transform: rotate(15deg); }
    34%, 100% { transform: rotate(0deg); }
}
@keyframes paisMeninoBracoCorreEsq {
    0%, 8% { opacity: 1; transform: rotate(0deg); }
    12% { transform: rotate(40deg); }
    16% { transform: rotate(-40deg); }
    20% { transform: rotate(40deg); }
    24% { transform: rotate(-35deg); }
    31% { opacity: 1; transform: rotate(15deg); }
    41%, 86% { opacity: 0; transform: rotate(0deg); }
    94%, 100% { opacity: 1; transform: rotate(0deg); }
}
@keyframes paisMeninoBracoCorreDir {
    0%, 8% { opacity: 1; transform: rotate(0deg); }
    12% { transform: rotate(-40deg); }
    16% { transform: rotate(40deg); }
    20% { transform: rotate(-40deg); }
    24% { transform: rotate(35deg); }
    31% { opacity: 1; transform: rotate(-15deg); }
    41%, 86% { opacity: 0; transform: rotate(0deg); }
    94%, 100% { opacity: 1; transform: rotate(0deg); }
}
@keyframes paisMeninoAbraco {
    0%, 31% { opacity: 0; }
    41%, 86% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes paisMeninaInclina {
    0%, 11% { transform: rotate(0deg); }
    15%, 29% { transform: rotate(-11deg); }
    33% { transform: rotate(-5deg); }
    37%, 100% { transform: rotate(0deg); }
}
@keyframes paisMeninaPernaEsq {
    0%, 11% { transform: rotate(0deg); }
    15% { transform: rotate(-34deg); }
    19% { transform: rotate(34deg); }
    23% { transform: rotate(-34deg); }
    27% { transform: rotate(30deg); }
    34% { transform: rotate(-15deg); }
    37%, 100% { transform: rotate(0deg); }
}
@keyframes paisMeninaPernaDir {
    0%, 11% { transform: rotate(0deg); }
    15% { transform: rotate(34deg); }
    19% { transform: rotate(-34deg); }
    23% { transform: rotate(34deg); }
    27% { transform: rotate(-30deg); }
    34% { transform: rotate(15deg); }
    37%, 100% { transform: rotate(0deg); }
}
@keyframes paisMeninaBracoCorreEsq {
    0%, 11% { opacity: 1; transform: rotate(0deg); }
    15% { transform: rotate(40deg); }
    19% { transform: rotate(-40deg); }
    23% { transform: rotate(40deg); }
    27% { transform: rotate(-35deg); }
    34% { opacity: 1; transform: rotate(15deg); }
    41%, 86% { opacity: 0; transform: rotate(0deg); }
    94%, 100% { opacity: 1; transform: rotate(0deg); }
}
@keyframes paisMeninaBracoCorreDir {
    0%, 11% { opacity: 1; transform: rotate(0deg); }
    15% { transform: rotate(-40deg); }
    19% { transform: rotate(40deg); }
    23% { transform: rotate(-40deg); }
    27% { transform: rotate(35deg); }
    34% { opacity: 1; transform: rotate(-15deg); }
    41%, 86% { opacity: 0; transform: rotate(0deg); }
    94%, 100% { opacity: 1; transform: rotate(0deg); }
}
@keyframes paisMeninaAbraco {
    0%, 31% { opacity: 0; }
    41%, 86% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes paisCoracao1 {
    0%, 46% { opacity: 0; transform: translateY(0) scale(.3); }
    51% { opacity: .9; transform: translateY(-5px) scale(1); }
    69% { opacity: .7; transform: translateY(-25px) scale(.8); }
    80%, 100% { opacity: 0; transform: translateY(-43px) scale(.4); }
}
@keyframes paisCoracao2 {
    0%, 50% { opacity: 0; transform: translateY(0) scale(.3); }
    55% { opacity: .9; transform: translateY(-5px) scale(1); }
    73% { opacity: .7; transform: translateY(-25px) scale(.8); }
    84%, 100% { opacity: 0; transform: translateY(-43px) scale(.4); }
}
@keyframes paisCoracao3 {
    0%, 54% { opacity: 0; transform: translateY(0) scale(.3); }
    59% { opacity: .9; transform: translateY(-5px) scale(1); }
    77% { opacity: .7; transform: translateY(-25px) scale(.8); }
    88%, 100% { opacity: 0; transform: translateY(-43px) scale(.4); }
}
@keyframes paisCoracao4 {
    0%, 58% { opacity: 0; transform: translateY(0) scale(.3); }
    63% { opacity: .9; transform: translateY(-5px) scale(1); }
    81% { opacity: .7; transform: translateY(-25px) scale(.8); }
    92%, 100% { opacity: 0; transform: translateY(-43px) scale(.4); }
}
@keyframes paisBrilho1 {
    0%, 47% { opacity: 0; transform: scale(0) rotate(0deg); }
    52% { opacity: 1; transform: scale(1.2) rotate(45deg); }
    59% { opacity: .2; transform: scale(.5) rotate(90deg); }
    75% { opacity: .9; transform: scale(1) rotate(135deg); }
    94%, 100% { opacity: 0; transform: scale(0) rotate(180deg); }
}
@keyframes paisBrilho2 {
    0%, 52% { opacity: 0; transform: scale(0) rotate(0deg); }
    57% { opacity: 1; transform: scale(1.2) rotate(45deg); }
    64% { opacity: .2; transform: scale(.5) rotate(90deg); }
    80% { opacity: .9; transform: scale(1) rotate(135deg); }
    94%, 100% { opacity: 0; transform: scale(0) rotate(180deg); }
}
@keyframes paisBrilho3 {
    0%, 57% { opacity: 0; transform: scale(0) rotate(0deg); }
    62% { opacity: 1; transform: scale(1.2) rotate(45deg); }
    69% { opacity: .2; transform: scale(.5) rotate(90deg); }
    85% { opacity: .9; transform: scale(1) rotate(135deg); }
    94%, 100% { opacity: 0; transform: scale(0) rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  .campanha-pais .pais-cena * { animation: none !important; }
  .pais-cena [class*="braco-corre"] { opacity: 0; }
  .pais-cena .pais-menino-trajeto { transform: translate(75px, 0); }
  .pais-cena .pais-menina-trajeto { transform: translate(-75px, 0); }
  .pais-cena .pais-pai-agacha { transform: translateY(0) scaleY(.9); }
  .pais-cena .pais-coracao-grande, .pais-cena .pais-aura,
  .pais-cena .pais-pai-mao-esq, .pais-cena .pais-pai-mao-dir,
  .pais-cena .pais-menino-braco-interno, .pais-cena .pais-menino-braco-externo,
  .pais-cena .pais-menina-braco-interno, .pais-cena .pais-menina-braco-externo { opacity: 1; }
}
/* Dia do Profissional de TI (19/10): do requisito (US) ao sistema no ar, ciclo de 10 s. */
.campanha-ti .hero-brasao { display: flex; flex-direction: column; align-items: center; }
.campanha-ti .hero-lockup-wrap { display: contents; }
.campanha-ti .hero-lockup { width: 360px; max-width: 100%; order: 1; }
.campanha-ti .hero-nome-sistema { order: 2; }
.campanha-ti .ti-cena { order: 3; display: block; width: 380px; max-width: 100%; height: auto; margin-top: 8px; overflow: visible; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(5,30,58,.38)); }
.campanha-ti .ti-mensagem { order: 4; display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: 4px; text-align: center; text-shadow: 0 2px 8px rgba(4,27,55,.5); }
.campanha-ti .ti-mensagem strong { color: #FFF6D6; font: 800 15px/1.25 var(--skin-font-display, sans-serif); }
.campanha-ti .ti-mensagem span { color: rgba(255,244,213,.85); font: 500 12px/1.3 var(--skin-font-display, sans-serif); }
.ti-cena .ti-codigo { font: 600 4.6px Consolas, "Courier New", monospace; white-space: pre; }
.ti-cena .ti-titulo { fill: #483B62; font: 800 5.8px Arial, sans-serif; }
.ti-cena .ti-historia-texto { fill: #3B4D62; font: 500 4.1px Arial, sans-serif; }
.ti-cena .ti-criterios { fill: #64768C; font: 600 3.8px Arial, sans-serif; }
.ti-cena .ti-testes-texto { fill: #83EFA7; font: 700 6.4px Consolas, monospace; }
.ti-cena .ti-selo-texto { fill: #174E43; font: 800 8px Arial, sans-serif; }
.ti-cena .ti-aceite-1, .ti-cena .ti-aceite-2, .ti-cena .ti-aceite-3 { opacity: 0; }
.ti-cena [class^="ti-linha-"] { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); }
.ti-cena .ti-testes, .ti-cena .ti-selo, .ti-cena [class^="ti-brilho-"] { opacity: 0; }
.ti-cena .ti-aviao-trajeto { opacity: 0; }
.ti-cena .ti-aviao-dobra { transform-box: fill-box; transform-origin: center; }
.ti-cena .ti-analista-braco-direito, .ti-cena .ti-dev-braco-esquerdo, .ti-cena .ti-dev-braco-direito { transform-origin: 0 0; }
.ti-cena .ti-analista-antebraco-direito, .ti-cena .ti-dev-antebraco-esquerdo, .ti-cena .ti-dev-antebraco-direito { transform-origin: 0 0; }
.ti-cena .ti-ciclo { animation: tiV2Ciclo 10s linear infinite; }
.ti-cena .ti-historia { animation: tiV2Historia 10s linear infinite; }
.ti-cena .ti-criterios-grupo { animation: tiV2Criterios 10s linear infinite; }
.ti-cena .ti-aviao-trajeto { animation: tiV2Voo 10s linear infinite; }
.ti-cena .ti-aviao-dobra { animation: tiV2Dobra 10s linear infinite; }
.ti-cena .ti-analista-braco-direito { animation: tiV2BracoAnalista 10s ease-in-out infinite; }
.ti-cena .ti-analista-antebraco-direito { animation: tiV2Marca 10s ease-in-out infinite; }
.ti-cena .ti-dev-braco-esquerdo { animation: tiV2DigitaEsquerda 10s ease-in-out infinite; }
.ti-cena .ti-dev-braco-direito { animation: tiV2ComemoraDev 10s ease-in-out infinite; }
.ti-cena .ti-analista-braco-esquerdo { transform: rotate(-52deg); }
.ti-cena .ti-analista-antebraco-esquerdo { transform: rotate(-18deg); }
.ti-cena .ti-dev-antebraco-esquerdo { animation: tiV2Dedos 10s ease-in-out infinite; }
.ti-cena .ti-dev-antebraco-direito { transform: rotate(18deg); }
.ti-cena .ti-testes { animation: tiV2Testes 10s linear infinite; }
.ti-cena .ti-selo { animation: tiV2Selo 10s ease-out infinite; }
.ti-cena .ti-aceite-1 { animation: tiV2Aceite1 10s steps(1,end) infinite; }
.ti-cena .ti-aceite-2 { animation: tiV2Aceite2 10s steps(1,end) infinite; }
.ti-cena .ti-aceite-3 { animation: tiV2Aceite3 10s steps(1,end) infinite; }
.ti-cena .ti-linha-1 { animation: tiV2Linha1 10s steps(14,end) infinite; }
.ti-cena .ti-linha-2 { animation: tiV2Linha2 10s steps(14,end) infinite; }
.ti-cena .ti-linha-3 { animation: tiV2Linha3 10s steps(14,end) infinite; }
.ti-cena .ti-linha-4 { animation: tiV2Linha4 10s steps(14,end) infinite; }
.ti-cena .ti-linha-5 { animation: tiV2Linha5 10s steps(14,end) infinite; }
.ti-cena .ti-brilho-1 { transform-origin: center; animation: tiV2Brilho1 10s ease-out infinite; }
.ti-cena .ti-brilho-2 { transform-origin: center; animation: tiV2Brilho2 10s ease-out infinite; }
.ti-cena .ti-brilho-3 { transform-origin: center; animation: tiV2Brilho3 10s ease-out infinite; }
@keyframes tiV2Ciclo {
    0% { opacity: 0; }
    3%, 92% { opacity: 1; }
    99%, 100% { opacity: 0; }
}
@keyframes tiV2Historia {
    0%, 33% { opacity: 1; transform: scale(1); }
    37% { opacity: 1; transform: scale(.75); }
    41%, 100% { opacity: 0; transform: scale(.1); }
}
@keyframes tiV2Criterios {
    0%, 33% { opacity: 1; }
    37%, 100% { opacity: 0; }
}
@keyframes tiV2Voo {
    0%, 36% { opacity: 0; transform: translate(0,0) rotate(-15deg); }
    39% { opacity: 1; transform: translate(4px,-4px) rotate(-22deg); }
    44% { opacity: 1; transform: translate(55px,-42px) rotate(3deg); }
    49% { opacity: 1; transform: translate(108px,-18px) rotate(26deg); }
    52% { opacity: 0; transform: translate(120px,-6px) rotate(40deg); }
    100% { opacity: 0; transform: translate(120px,-6px) rotate(40deg); }
}
@keyframes tiV2Dobra {
    0%, 36% { transform: scale(.2,.8); }
    39%, 100% { transform: scale(1); }
}
@keyframes tiV2BracoAnalista {
    0%, 12% { transform: rotate(65deg); }
    16% { transform: rotate(55deg); }
    19% { transform: rotate(60deg); }
    23% { transform: rotate(50deg); }
    26% { transform: rotate(40deg); }
    30% { transform: rotate(21deg); }
    34%, 78% { transform: rotate(65deg); }
    83%, 92% { transform: rotate(-101deg); }
    100% { transform: rotate(65deg); }
}
@keyframes tiV2Marca {
    0%, 12% { transform: rotate(-34deg); }
    16% { transform: rotate(-66deg); }
    19% { transform: rotate(-50deg); }
    23% { transform: rotate(-43deg); }
    26% { transform: rotate(-10deg); }
    30% { transform: rotate(24deg); }
    34%, 78% { transform: rotate(-34deg); }
    83%, 92% { transform: rotate(17deg); }
    100% { transform: rotate(-34deg); }
}
@keyframes tiV2DigitaEsquerda {
    0%, 51% { transform: rotate(-38deg); }
    56% { transform: rotate(-32deg); }
    61% { transform: rotate(-43deg); }
    66% { transform: rotate(-32deg); }
    71% { transform: rotate(-43deg); }
    76%, 100% { transform: rotate(-38deg); }
}
@keyframes tiV2ComemoraDev {
    0%, 79% { transform: rotate(52deg); }
    84%, 92% { transform: rotate(-100deg); }
    100% { transform: rotate(52deg); }
}
@keyframes tiV2Dedos {
    0%, 51% { transform: rotate(0deg); }
    55% { transform: rotate(12deg); }
    58% { transform: rotate(-9deg); }
    62% { transform: rotate(12deg); }
    65% { transform: rotate(-9deg); }
    69% { transform: rotate(9deg); }
    73%, 100% { transform: rotate(0deg); }
}
@keyframes tiV2Testes {
    0%, 75% { opacity: 0; }
    78%, 92% { opacity: 1; }
    98%, 100% { opacity: 0; }
}
@keyframes tiV2Selo {
    0%, 77% { opacity: 0; transform: translateY(10px); }
    82% { opacity: 1; transform: translateY(-9px); }
    92% { opacity: 1; transform: translateY(-12px); }
    99%, 100% { opacity: 0; transform: translateY(-17px); }
}
@keyframes tiV2Aceite1 {
    0%, 16% { opacity: 0; }
    18%, 100% { opacity: 1; }
}
@keyframes tiV2Aceite2 {
    0%, 23% { opacity: 0; }
    25%, 100% { opacity: 1; }
}
@keyframes tiV2Aceite3 {
    0%, 30% { opacity: 0; }
    32%, 100% { opacity: 1; }
}
@keyframes tiV2Linha1 {
    0%, 52% { transform: scaleX(0); }
    56%, 100% { transform: scaleX(1); }
}
@keyframes tiV2Linha2 {
    0%, 57% { transform: scaleX(0); }
    61%, 100% { transform: scaleX(1); }
}
@keyframes tiV2Linha3 {
    0%, 62% { transform: scaleX(0); }
    66%, 100% { transform: scaleX(1); }
}
@keyframes tiV2Linha4 {
    0%, 67% { transform: scaleX(0); }
    71%, 100% { transform: scaleX(1); }
}
@keyframes tiV2Linha5 {
    0%, 71% { transform: scaleX(0); }
    75%, 100% { transform: scaleX(1); }
}
@keyframes tiV2Brilho1 {
    0%, 79% { opacity: 0; transform: scale(.2) rotate(0deg); }
    82% { opacity: 1; transform: scale(1.1) rotate(40deg); }
    87%, 100% { opacity: 0; transform: scale(.3) rotate(90deg); }
}
@keyframes tiV2Brilho2 {
    0%, 82% { opacity: 0; transform: scale(.2) rotate(0deg); }
    85% { opacity: 1; transform: scale(1.1) rotate(40deg); }
    90%, 100% { opacity: 0; transform: scale(.3) rotate(90deg); }
}
@keyframes tiV2Brilho3 {
    0%, 85% { opacity: 0; transform: scale(.2) rotate(0deg); }
    88% { opacity: 1; transform: scale(1.1) rotate(40deg); }
    93%, 100% { opacity: 0; transform: scale(.3) rotate(90deg); }
}
@media (max-width: 1024px) { .campanha-ti .hero-lockup { width: 300px; } }
@media (max-width: 900px) { .campanha-ti .ti-cena, .campanha-ti .ti-mensagem { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .ti-cena * { animation: none !important; }
  .ti-cena .ti-ciclo { opacity: 1; }
  .ti-cena .ti-historia, .ti-cena .ti-criterios-grupo, .ti-cena .ti-aviao-trajeto { display: none; }
  .ti-cena [class^="ti-linha-"] { transform: scaleX(1); }
  .ti-cena .ti-testes, .ti-cena .ti-selo { opacity: 1; }
  .ti-cena .ti-selo { transform: translateY(-12px); }
  .ti-cena .ti-analista-braco-direito { transform: rotate(-101deg); }
  .ti-cena .ti-analista-antebraco-direito { transform: rotate(17deg); }
  .ti-cena .ti-dev-braco-esquerdo { transform: rotate(-38deg); }
  .ti-cena .ti-dev-braco-direito { transform: rotate(-100deg); }
  .ti-cena .ti-brilho-1, .ti-cena .ti-brilho-2, .ti-cena .ti-brilho-3 { opacity: 1; }
}
/* Dia do Contador: calculadora + cedulas + planilha que fecha (ciclo de 8 s; linha do tempo
   absoluta por elemento, gerada por docs/.../ferramentas/contador_planilha.py). */
.campanha-contador .contador-cena {
    display: block;
    width: 290px;
    max-width: 100%;
    height: auto;
    overflow: visible;
    pointer-events: none;
    filter: drop-shadow(0 6px 12px rgba(5, 30, 58, .38));
}
.campanha-contador .contador-visor {
    fill: #12324F;
    font: 700 11px "Consolas", "Courier New", monospace;
    opacity: 0;
}
.campanha-contador .contador-cabecalho {
    fill: #7A5A1A;
    font: 800 8px var(--skin-font-display, sans-serif);
    letter-spacing: 1.4px;
}
.campanha-contador .contador-celula {
    fill: #12324F;
    font: 700 10px "Consolas", "Courier New", monospace;
    opacity: 0;
}
.campanha-contador .contador-celula-total { opacity: 1; fill: #0A3D6B; font-weight: 800; }
.campanha-contador .contador-tecla,
.campanha-contador .contador-nota,
.campanha-contador .contador-total,
.campanha-contador .contador-brilhos { opacity: 0; }
.campanha-contador .contador-brilhos { transform-box: fill-box; transform-origin: center; }
.campanha-contador .contador-visor-0 { animation: contadorVisor0 8s linear infinite; }
.campanha-contador .contador-visor-1 { animation: contadorVisor1 8s linear infinite; }
.campanha-contador .contador-visor-2 { animation: contadorVisor2 8s linear infinite; }
.campanha-contador .contador-visor-3 { animation: contadorVisor3 8s linear infinite; }
.campanha-contador .contador-tecla-1 { animation: contadorTecla1 8s linear infinite; }
.campanha-contador .contador-tecla-2 { animation: contadorTecla2 8s linear infinite; }
.campanha-contador .contador-tecla-3 { animation: contadorTecla3 8s linear infinite; }
.campanha-contador .contador-nota-1 { animation: contadorNota1 8s ease-in-out infinite; }
.campanha-contador .contador-nota-2 { animation: contadorNota2 8s ease-in-out infinite; }
.campanha-contador .contador-nota-3 { animation: contadorNota3 8s ease-in-out infinite; }
.campanha-contador .contador-linha-1 { animation: contadorLinha1 8s ease-out infinite; }
.campanha-contador .contador-linha-2 { animation: contadorLinha2 8s ease-out infinite; }
.campanha-contador .contador-linha-3 { animation: contadorLinha3 8s ease-out infinite; }
.campanha-contador .contador-total { animation: contadorTotal 8s ease-out infinite; }
.campanha-contador .contador-brilhos { animation: contadorBrilhos 8s ease-out infinite; }
.campanha-contador .contador-mensagem {
    order: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    margin-top: 4px;
    text-align: center;
    text-shadow: 0 2px 8px rgba(4, 27, 55, .5);
}
.campanha-contador .contador-mensagem strong {
    color: #FFF6D6;
    font: 800 15px/1.25 var(--skin-font-display, sans-serif);
}
.campanha-contador .contador-mensagem span:last-child {
    color: rgba(255, 244, 213, .85);
    font: 500 12px/1.3 var(--skin-font-display, sans-serif);
}
@keyframes contadorVisor1 {
    0%, 3.74% { opacity: 0; }
    3.75%, 21.0% { opacity: 1; }
    21.5%, 100% { opacity: 0; }
}
@keyframes contadorTecla1 {
    0%, 3.74% { opacity: 0; }
    4.75% { opacity: .95; }
    7.75%, 100% { opacity: 0; }
}
@keyframes contadorNota1 {
    0%, 4.24% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    5.25% { opacity: 1; }
    10.25% { transform: translate(56px, -26px) rotate(-14deg); }
    15.25% { opacity: 1; }
    16.25% { opacity: 0; transform: translate(112px, 6px) rotate(10deg); }
    100% { opacity: 0; transform: translate(112px, 6px) rotate(10deg); }
}
@keyframes contadorLinha1 {
    0%, 16.24% { opacity: 0; }
    16.25%, 88.0% { opacity: 1; }
    92.0%, 100% { opacity: 0; }
}
@keyframes contadorVisor2 {
    0%, 21.24% { opacity: 0; }
    21.25%, 38.5% { opacity: 1; }
    39.0%, 100% { opacity: 0; }
}
@keyframes contadorTecla2 {
    0%, 21.24% { opacity: 0; }
    22.25% { opacity: .95; }
    25.25%, 100% { opacity: 0; }
}
@keyframes contadorNota2 {
    0%, 21.74% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    22.75% { opacity: 1; }
    27.75% { transform: translate(56px, -26px) rotate(-14deg); }
    32.75% { opacity: 1; }
    33.75% { opacity: 0; transform: translate(112px, 6px) rotate(10deg); }
    100% { opacity: 0; transform: translate(112px, 6px) rotate(10deg); }
}
@keyframes contadorLinha2 {
    0%, 33.74% { opacity: 0; }
    33.75%, 88.0% { opacity: 1; }
    92.0%, 100% { opacity: 0; }
}
@keyframes contadorVisor3 {
    0%, 38.74% { opacity: 0; }
    38.75%, 88.0% { opacity: 1; }
    89.5%, 100% { opacity: 0; }
}
@keyframes contadorTecla3 {
    0%, 38.74% { opacity: 0; }
    39.75% { opacity: .95; }
    42.75%, 100% { opacity: 0; }
}
@keyframes contadorNota3 {
    0%, 39.24% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    40.25% { opacity: 1; }
    45.25% { transform: translate(56px, -26px) rotate(-14deg); }
    50.25% { opacity: 1; }
    51.25% { opacity: 0; transform: translate(112px, 6px) rotate(10deg); }
    100% { opacity: 0; transform: translate(112px, 6px) rotate(10deg); }
}
@keyframes contadorLinha3 {
    0%, 51.24% { opacity: 0; }
    51.25%, 88.0% { opacity: 1; }
    92.0%, 100% { opacity: 0; }
}
@keyframes contadorVisor0 {
    0%, 3.5% { opacity: 1; }
    3.75%, 89.6% { opacity: 0; }
    90.5%, 100% { opacity: 1; }
}
@keyframes contadorTotal {
    0%, 54.74% { opacity: 0; }
    54.75%, 88.0% { opacity: 1; }
    92.0%, 100% { opacity: 0; }
}
@keyframes contadorBrilhos {
    0%, 55.75% { opacity: 0; transform: scale(.5); }
    59.75% { opacity: 1; transform: scale(1.1); }
    67.75%, 100% { opacity: 0; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .campanha-contador .contador-cena * { animation: none !important; }
    .campanha-contador .contador-celula,
    .campanha-contador .contador-total,
    .campanha-contador .contador-visor-3 { opacity: 1; }
    .campanha-contador .contador-visor-0,
    .campanha-contador .contador-nota,
    .campanha-contador .contador-brilhos { opacity: 0; }
}
/* O wrap vira "contents" para ordenar os adornos apos o nome do sistema. */
.campanha-servidor .hero-brasao,
.campanha-contador .hero-brasao,
.campanha-pascoa .hero-brasao { display: flex; flex-direction: column; align-items: center; }
.campanha-servidor .hero-lockup-wrap,
.campanha-contador .hero-lockup-wrap,
.campanha-pascoa .hero-lockup-wrap { display: contents; }
.campanha-servidor .hero-lockup,
.campanha-contador .hero-lockup,
.campanha-pascoa .hero-lockup { width: 360px; max-width: 100%; order: 1; }
.campanha-servidor .hero-nome-sistema,
.campanha-contador .hero-nome-sistema,
.campanha-pascoa .hero-nome-sistema { order: 2; }
.campanha-servidor .servidor-faixa,
.campanha-contador .contador-cena,
.campanha-pascoa .pascoa-cena { order: 3; margin-top: 14px; }
.campanha-pascoa .pascoa-cena { width: 400px; max-width: 100%; }

/* O bando passa atras da marca; o morcego que pousa conserva seu ciclo. */
.campanha-halloween .hero-lockup { position: relative; z-index: 1; }
.campanha-halloween .halloween-bando {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    color: rgba(5, 22, 44, .55);
}
.campanha-halloween .halloween-bando-morcego {
    position: absolute;
    left: 50%;
    width: 28px;
    height: 16px;
    opacity: 0;
    animation: halloweenBandoVoo 12s linear infinite;
}
.campanha-halloween .halloween-bando-1 { top: -70%; animation-delay: 0s; }
.campanha-halloween .halloween-bando-2 { top: -20%; width: 21px; animation-delay: -4s; }
.campanha-halloween .halloween-bando-3 { top: 85%; width: 24px; animation-delay: -8s; }
@keyframes halloweenBandoVoo {
    0% { opacity: 0; transform: translateX(-340px) translateY(12px) scale(.7); }
    12% { opacity: .32; }
    45% { transform: translateX(-35px) translateY(-10px) scale(1); }
    88% { opacity: .32; }
    100% { opacity: 0; transform: translateX(340px) translateY(8px) scale(.65); }
}

/* Frases sobrepostas no mesmo espaco, abaixo da faixa. */
.campanha-servidor .servidor-mensagens {
    order: 4;
    position: relative;
    width: min(100%, 400px);
    height: 38px;
    margin-top: -2px;
    color: #FFF4D5;
    font: 700 14px/1.3 var(--skin-font-display);
    text-align: center;
    text-shadow: 0 2px 8px rgba(4, 27, 55, .5);
}
.campanha-servidor .servidor-mensagem {
    position: absolute;
    inset: 0 22px;
    display: grid;
    place-items: center;
    opacity: 0;
    animation: servidorFrase 12s ease-in-out infinite;
}
.campanha-servidor .servidor-mensagem-2 { animation-delay: -8s; }
.campanha-servidor .servidor-mensagem-3 { animation-delay: -4s; }
@keyframes servidorFrase {
    0%, 27% { opacity: 1; transform: translateY(0); }
    33%, 94% { opacity: 0; transform: translateY(-5px); }
    100% { opacity: 1; transform: translateY(0); }
}
.campanha-servidor .servidor-estrelas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    opacity: .45;
    animation: servidorEstrelas 3s ease-in-out infinite alternate;
}
@keyframes servidorEstrelas {
    to { opacity: 1; filter: drop-shadow(0 0 5px #F5D688); }
}
@media (max-width: 1024px) {
    .campanha-servidor .hero-lockup,
    .campanha-contador .hero-lockup,
    .campanha-pascoa .hero-lockup,
    .campanha-pascoa .pascoa-cena { width: 300px; }
    .campanha-halloween .halloween-bando { display: none; }
    .campanha-servidor .servidor-mensagens { height: 34px; font-size: 12px; }
}
@media (max-width: 900px) {
    .campanha-contador .contador-cena,
    .campanha-contador .contador-mensagem { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .campanha-halloween .halloween-bando { display: none; }
    .campanha-servidor .servidor-mensagem,
    .campanha-servidor .servidor-estrelas { animation: none; }
    .campanha-servidor .servidor-mensagem { opacity: 0; }
    .campanha-servidor .servidor-mensagem-1 { opacity: 1; transform: none; }
}
/* Balao flutuante da campanha: pill de linha unica no canto inferior esquerdo
   da coluna azul, acima do "Versao" (bottom 24px) e por cima do grafico de
   barras decorativo (que e fundo a 30% de opacidade). Substitui o antigo
   bloco de duas linhas que ocupava o eixo central sob o logo. */

/* Dezembro: fogos discretos ESTATICOS ao fundo do hero (detalhe decorativo;
   o show em canvas continua restrito a 24-31/12). */
.campanha-dezembro .painel-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle 3px at 18% 12%, rgba(232,201,106,0.5), rgba(232,201,106,0) 70%),
        radial-gradient(circle 2px at 72% 8%,  rgba(255,255,255,0.45), rgba(255,255,255,0) 70%),
        radial-gradient(circle 3px at 88% 22%, rgba(232,201,106,0.4), rgba(232,201,106,0) 70%),
        radial-gradient(circle 2px at 40% 6%,  rgba(127,179,232,0.45), rgba(127,179,232,0) 70%),
        radial-gradient(circle 2px at 58% 16%, rgba(232,201,106,0.35), rgba(232,201,106,0) 70%);
    opacity: 0.7;
}
/* Overlay dos fogos da virada (24-31/dez) - regras que acompanham o fragmento */
.skin-login-page .comemora-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
}
.skin-login-page .comemora-fogos {
    display: block;
    width: 100%;
    height: 100%;
}
.skin-login-page .login-card {
    grid-area: card;
    justify-self: center;
    margin: 32px 0;
    width: 100%;
    max-width: 400px;
    animation: skinSlideUp 0.8s ease-out 0.2s both;
}
.skin-login-page .login-titulo {
    font-family: var(--skin-font-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--skin-azul-primario);
    margin-bottom: 6px;
}
.skin-login-page .login-subtitulo {
    font-size: 14px;
    color: var(--skin-cinza-texto);
    margin-bottom: 36px;
    font-weight: 400;
}

/* ---------------------------------------------------------------------------
 * WIZARD (alternância de estados via display:none)
 * --------------------------------------------------------------------------- */
.skin-login-page .etapa {
    display: none;
    animation: skinSlideEtapa 0.4s ease-out;
}
.skin-login-page .etapa.etapa-ativa {
    display: block;
}

/* ---------------------------------------------------------------------------
 * CAMPOS DE FORMULÁRIO
 *   Como os taglibs fiplan:text / fiplan:password / fiplan:select aplicam
 *   classes Bootstrap (form-control input-sm), usamos seletores específicos
 *   pra sobrescrever só dentro do escopo do login.
 * --------------------------------------------------------------------------- */
.skin-login-page .campo-grupo {
    margin-bottom: 20px;
}
.skin-login-page .campo-row {
    display: flex;
    gap: 12px;
}
.skin-login-page .campo-row .campo-grupo:first-child { flex: 0 0 130px; }
.skin-login-page .campo-row .campo-grupo:last-child  { flex: 1; }

.skin-login-page .campo-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--skin-azul-primario);
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

.skin-login-page .campo-wrapper {
    position: relative;
}

/* Ícone à esquerda do input */
.skin-login-page .campo-icone {
    position: absolute;
    left: 16px; top: 50%;
    transform: translateY(-50%);
    color: var(--skin-cinza-texto);
    display: flex;
    align-items: center;
    pointer-events: none;
    z-index: 2;
}
.skin-login-page .campo-icone svg {
    width: 18px; height: 18px;
}

/* Input com skin nova — sobrescreve Bootstrap */
.skin-login-page .campo-input,
.skin-login-page .skin-input.form-control,
.skin-login-page .skin-input.form-control.input-sm {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--skin-cinza-borda);
    border-radius: var(--skin-radius-input);
    font-size: 15px;
    font-family: var(--skin-font-base);
    color: var(--skin-azul-primario);
    background: var(--skin-cinza-bg);
    transition: all 0.25s ease;
    outline: none;
    height: auto;
    line-height: 1.4;
    box-shadow: none;
}
/* Quando tem ícone à esquerda, abre espaço */
.skin-login-page .campo-wrapper .campo-input,
.skin-login-page .campo-wrapper .skin-input.form-control {
    padding-left: 48px;
}
.skin-login-page .campo-input::placeholder { color: #94A3B8; font-weight: 400; }
.skin-login-page .campo-input:focus,
.skin-login-page .skin-input.form-control:focus {
    border-color: var(--skin-azul-claro);
    background: white;
    box-shadow: 0 0 0 4px rgba(26, 127, 219, 0.1);
    outline: none;
}

/* Select com skin nova */
.skin-login-page .campo-select,
.skin-login-page .skin-select.form-control,
.skin-login-page .skin-select.form-control.input-sm {
    width: 100%;
    padding: 14px 36px 14px 16px;
    border: 2px solid var(--skin-cinza-borda);
    border-radius: var(--skin-radius-input);
    font-size: 15px;
    font-family: var(--skin-font-base);
    color: var(--skin-azul-primario);
    background: var(--skin-cinza-bg);
    transition: all 0.25s ease;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748B' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    height: auto;
    line-height: 1.4;
    box-shadow: none;
}
.skin-login-page .campo-select:focus,
.skin-login-page .skin-select.form-control:focus {
    border-color: var(--skin-azul-claro);
    background-color: white;
    box-shadow: 0 0 0 4px rgba(26, 127, 219, 0.1);
    outline: none;
}

/* Estado readonly */
.skin-login-page .campo-readonly,
.skin-login-page .campo-input.campo-readonly,
.skin-login-page .skin-input.campo-readonly {
    background: #E2E8F0 !important;
    color: var(--skin-cinza-texto) !important;
    cursor: not-allowed;
    border-color: var(--skin-cinza-borda) !important;
    padding-left: 16px !important;
}
.skin-login-page .campo-readonly:focus { box-shadow: none !important; }

/* ---------------------------------------------------------------------------
 * SENHA + toggle olho
 * --------------------------------------------------------------------------- */
.skin-login-page .campo-input-com-acao {
    padding-right: 48px;
}
.skin-login-page .input-group .password-toggle-eye {
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    width: 36px; height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--skin-cinza-texto);
    border-radius: 6px;
    transition: all 0.2s;
    z-index: 3;
    padding: 0;
}
.skin-login-page .input-group .password-toggle-eye:hover {
    background: rgba(13,91,166,0.08);
    color: var(--skin-azul-medio);
}
.skin-login-page .input-group .password-toggle-eye .fa,
.skin-login-page .input-group .password-toggle-eye i {
    font-size: 16px;
}
/* Anula o input-group do Bootstrap, deixamos posicionamento absoluto */
.skin-login-page .input-group {
    display: block;
    position: relative;
}

/* ---------------------------------------------------------------------------
 * UNIDADE ORÇAMENTÁRIA (combotext gera input + select)
 *   <fiplan:combotext> renderiza input.form-control + select.form-control
 *   adjacentes. Damos espaço entre eles via flex.
 * --------------------------------------------------------------------------- */
.skin-login-page .campo-uo {
    display: flex;
    align-items: center;
    gap: 8px;
}
.skin-login-page .campo-uo > .skin-input.form-control {
    width: 80px !important;
    flex: 0 0 80px;
    text-align: center;
    padding: 14px 8px !important;
}
.skin-login-page .campo-uo > .skin-select.form-control {
    flex: 1;
    width: auto;
}

/* ---------------------------------------------------------------------------
 * PERGUNTA (etapa 3)
 * --------------------------------------------------------------------------- */
.skin-login-page .campo-pergunta {
    padding: 14px 16px;
    background: var(--skin-cinza-bg);
    border: 2px solid var(--skin-cinza-borda);
    border-radius: var(--skin-radius-input);
    color: var(--skin-azul-primario);
    font-weight: 500;
    font-size: 15px;
}

/* ---------------------------------------------------------------------------
 * BOTÕES
 *   .btn-skin-primario / .btn-skin-cancelar sobrescrevem Bootstrap
 * --------------------------------------------------------------------------- */
.skin-login-page .btn-skin-primario,
.skin-login-page a.btn-skin-primario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--skin-azul-primario) 0%, var(--skin-azul-medio) 100%);
    color: white;
    border: none;
    border-radius: var(--skin-radius-btn);
    font-size: 15px;
    font-weight: 700;
    font-family: var(--skin-font-base);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--skin-sombra-botao);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    line-height: 1;
}
.skin-login-page .btn-skin-primario::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    transition: left 0.5s ease;
}
.skin-login-page .btn-skin-primario:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(13, 91, 166, 0.5);
    color: white;
    text-decoration: none;
}
.skin-login-page .btn-skin-primario:hover::after { left: 100%; }
.skin-login-page .btn-skin-primario:active { transform: translateY(0); }
.skin-login-page .btn-skin-primario:focus { color: white; outline: none; }

.skin-login-page .btn-skin-cancelar,
.skin-login-page a.btn-skin-cancelar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    background: white;
    color: var(--skin-cinza-texto);
    border: 2px solid var(--skin-cinza-borda);
    border-radius: var(--skin-radius-btn);
    font-size: 14px;
    font-weight: 700;
    font-family: var(--skin-font-base);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
    line-height: 1;
}
.skin-login-page .btn-skin-cancelar:hover {
    background: var(--skin-cinza-bg);
    border-color: var(--skin-cinza-texto);
    color: var(--skin-azul-primario);
    text-decoration: none;
}

.skin-login-page .botoes-row {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}
.skin-login-page .botoes-row .btn-skin-primario { flex: 1; }

/* ---------------------------------------------------------------------------
 * MENSAGEM DE ERRO INLINE
 * --------------------------------------------------------------------------- */
.skin-login-page .campo-erro {
    font-size: 12px;
    color: var(--skin-erro);
    margin-top: 6px;
    min-height: 16px;
    font-weight: 500;
}

/* ---------------------------------------------------------------------------
 * RODAPÉ DO PAINEL LOGIN
 * --------------------------------------------------------------------------- */
/* Comunicado do redesign, logo acima do rodape SEFAZ (que e absolute em
   bottom:24px, entao este acompanha a mesma ancoragem). Texto vazado: o
   gradiente da marca preenche as letras e um leve contorno garante leitura
   sobre o fundo claro do painel. */
.skin-login-page .login-comunicado {
    grid-area: comun;
    margin-bottom: 18px;
    display: flex;
    justify-content: center;
    pointer-events: none;
}
/* Fita da campanha ao lado da mensagem no card. Altura casada com a linha do
   texto; largura automatica (as tres fitas tem ~55px de largura em 96 de
   altura, entao a troca de mes nao desloca o card). */
.skin-login-page .comunicado-fita {
    height: 30px;
    width: auto;
    flex-shrink: 0;
    margin-right: 10px;
    filter: drop-shadow(0 1px 3px rgba(10,61,107,0.30));
}
/* Pascoa: ovo em SVG inline no lugar da fita; largura fixa na proporcao do viewBox (46x54) */
.skin-login-page .comunicado-ovo { width: 26px; }
/* Halloween: abobora no lugar da fita (viewBox 52x46) */
.skin-login-page .comunicado-abobora { width: 34px; }
/* Outubro Rosa: desenho unico de 3,8 s que termina na fita do card. */
.campanha-outubro .login-comunicado .comunicado-texto { position: relative; }
.campanha-outubro .outubro-cena {
    position: absolute;
    left: 4px;
    top: -105px;
    width: 110px;
    height: 110px;
    z-index: 2;
    pointer-events: none;
    transform-origin: center;
    animation: outubroEncaixa 3.8s ease-in-out both;
}
.campanha-outubro .outubro-laco { display: block; width: 100%; height: 100%; overflow: visible; }
.campanha-outubro .outubro-laco path { fill: none; stroke-linecap: round; }
.campanha-outubro .outubro-halo {
    stroke: #F6A5CF;
    stroke-width: 19;
    opacity: 0;
    filter: blur(5px);
    animation: outubroHalo 2s ease-out both;
}
.campanha-outubro .outubro-traco {
    stroke: #E95A96;
    stroke-width: 12;
    filter: drop-shadow(0 0 5px #E95A96);
    stroke-dasharray: 250;
    animation: outubroDesenha 2s ease-out both;
}
.campanha-outubro .outubro-brilho {
    stroke: #FFE7F4;
    stroke-width: 2;
    stroke-dasharray: 250;
    animation: outubroDesenha 2s ease-out both;
}
.campanha-outubro .outubro-petala {
    position: absolute;
    top: 22px;
    left: 54px;
    width: 7px;
    height: 11px;
    border-radius: 70% 20% 70% 20%;
    background: #F5A3C9;
    opacity: 0;
    animation: outubroPetala 2.6s ease-out both;
}
.campanha-outubro .outubro-petala-2 { animation-delay: .35s; transform: rotate(35deg); }
.campanha-outubro .outubro-petala-3 { animation-delay: .7s; transform: rotate(-25deg); }
@keyframes outubroDesenha {
    from { stroke-dashoffset: 250; }
    to { stroke-dashoffset: 0; }
}
@keyframes outubroHalo {
    0%, 50% { opacity: 0; }
    100% { opacity: .25; }
}
@keyframes outubroEncaixa {
    0%, 65% { opacity: 1; transform: translate(0, 0) scale(1); }
    92% { opacity: 1; transform: translate(-29px, 75px) scale(.18); }
    100% { opacity: 0; transform: translate(-29px, 75px) scale(.18); }
}
@keyframes outubroPetala {
    0% { opacity: 0; translate: 0 0; }
    25% { opacity: .65; }
    100% { opacity: 0; translate: 35px 65px; }
}
@media (max-width: 1024px), (prefers-reduced-motion: reduce) {
    .campanha-outubro .outubro-cena { display: none; }
}
/* Mais de uma campanha no dia: os cards ocupam a mesma celula e o script do
   CampanhaCard.jspf troca o .comunicado-ativo a cada 5 s; aqui so o fade. */
.skin-login-page .login-comunicado-alterna {
    display: grid;
    justify-items: center;
}
.skin-login-page .login-comunicado-alterna .comunicado-texto {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility 0s linear .6s;
}
.skin-login-page .login-comunicado-alterna .comunicado-texto.comunicado-ativo {
    opacity: 1;
    visibility: visible;
    transition: opacity .6s ease;
}
@media (prefers-reduced-motion: reduce) {
    .skin-login-page .login-comunicado-alterna .comunicado-texto { transition: none; }
}
.skin-login-page .login-comunicado .comunicado-texto {
    display: inline-flex;
    align-items: center;
    padding: 9px 24px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(10,61,107,0.05) 0%, rgba(212,168,67,0.10) 100%);
    border: 1px solid rgba(10,61,107,0.12);
    box-shadow: 0 2px 8px rgba(10,61,107,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
    font-family: var(--skin-font-display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.4px;
    white-space: nowrap;
    /* letra com borda de cor: preenchimento em gradiente + contorno azul */
    color: var(--skin-azul-primario);
    -webkit-text-stroke: 0.6px var(--skin-azul-deep);
    background-clip: padding-box;
}
/* Preenchimento em gradiente da marca aplicado ao proprio texto (sem
   pseudo-elemento duplicando conteudo). O contorno fica por conta do
   -webkit-text-stroke com paint-order, para o traco nao engrossar as letras.
   Navegador sem suporte mantem o azul solido declarado acima. */
@supports (-webkit-background-clip: text) {
    .skin-login-page .login-comunicado .comunicado-texto {
        -webkit-text-stroke: 0.55px rgba(5,30,58,0.55);
        paint-order: stroke fill;
    }
}

/* ---------------------------------------------------------------------------
 * ANIMAÇÕES
 * --------------------------------------------------------------------------- */
@keyframes skinSlideUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes skinSlideEtapa {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes skinFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---------------------------------------------------------------------------
 * RESPONSIVO
 * --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    body.skin-login-page,
    .skin-login-page .skin-login-root {
        flex-direction: column;
        overflow: auto;
    }
    .skin-login-page .painel-hero {
        width: 100%;
        min-height: 40vh;
        padding: 40px 30px;
    }
    .skin-login-page .painel-login {
        width: 100%;
        min-height: 60vh;
        padding: 24px 30px;
    }
    /* empilhado, o hero fica baixo e os numeros caem em cima do logo */
    .skin-login-page .numeros-bg { display: none; }
    .skin-login-page .hero-logo-text { font-size: 38px; }
    .skin-login-page .hero-modulos { display: none; }
    .skin-login-page .hero-divider { display: none; }
    .skin-login-page .versao-hero { position: static; margin-top: 18px; }  /* o filete do .hero-estado basta */
    .skin-login-page .hero-lockup-wrap { width: 300px; }
    .skin-login-page .hero-nome-sistema { width: 300px; font-size: 10px; letter-spacing: 1.8px; }
    .skin-login-page .linha-dourada {
        width: 100%; height: 3px;
        top: auto; bottom: 0; right: 0;
        background: linear-gradient(90deg, transparent 0%, var(--skin-dourado) 30%, var(--skin-dourado-claro) 50%, var(--skin-dourado) 70%, transparent 100%);
    }
}
@media (max-width: 600px) {
    .skin-login-page .painel-login {
        padding: 16px 20px 20px;
        row-gap: 10px;
    }
    .skin-login-page .login-header-gov { justify-self: center; gap: 10px; }
    .skin-login-page .gov-fio { margin: 0 6px; }
    .skin-login-page .gov-mti,
    .skin-login-page .gov-brasao-img { height: 42px; }
    .skin-login-page .gov-text { font-size: 12px; }
    .skin-login-page .chip-ambiente {
        margin-top: 8px;
        justify-self: center;
        height: 30px;
        font-size: 12px;
        padding: 0 14px;
    }
    /* no celular a linha nao cabe: o rotulo desce para baixo das marcas e o segundo fio sai */
    .skin-login-page .login-header-gov { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
    .skin-login-page .login-header-gov::after { content: ''; order: 8; flex-basis: 100%; }
    .skin-login-page .login-header-gov .chip-ambiente { order: 9; }
    .skin-login-page .login-header-gov .chip-ambiente + .gov-brasao-img { margin-left: 0; padding-left: 0; border-left: 0; }
    .skin-login-page .login-header-gov:has(.chip-ambiente) .gov-mti,
    .skin-login-page .login-header-gov:has(.chip-ambiente) .gov-brasao-img { height: 42px; }
    .skin-login-page .login-header-gov:has(.chip-ambiente) .gov-text { font-size: 12px; }
    .skin-login-page .login-card { margin: 16px 0; }
    /* a frase da campanha quebra em duas linhas em vez de sair da tela */
    .skin-login-page .login-comunicado .comunicado-texto {
        white-space: normal;
        text-align: left;
        border-radius: 16px;
        font-size: 13px;
        padding: 8px 16px;
    }
    .skin-login-page .campo-row { flex-direction: column; gap: 0; }
    .skin-login-page .campo-row .campo-grupo:first-child { flex: 1; }
}

/* ---------------------------------------------------------------------------
 * TERMO DE ACEITE — restilizar o modal Bootstrap existente
 *   Login_Termo_Aceite.jsp usa .modal Bootstrap 4. Aqui escopamos só dentro
 *   do body.skin-login-page pra não afetar outros modais do FIPLAN.
 * --------------------------------------------------------------------------- */
.skin-login-page .modal {
    background: rgba(5, 30, 58, 0.55);
}
.skin-login-page .modal .modal-content {
    border: none;
    border-radius: var(--skin-radius-lg);
    box-shadow: 0 20px 60px rgba(5,30,58,0.4);
    overflow: hidden;
}
.skin-login-page .modal .modal-header {
    background: linear-gradient(135deg, var(--skin-azul-primario) 0%, var(--skin-azul-medio) 100%);
    color: white;
    padding: 22px 26px;
    border-bottom: none;
}
.skin-login-page .modal .modal-header h4,
.skin-login-page .modal .modal-header .modal-title {
    font-family: var(--skin-font-display);
    font-size: 20px;
    font-weight: 700;
}
.skin-login-page .modal .modal-body {
    padding: 24px 26px;
    background: var(--skin-cinza-bg);
}
.skin-login-page .modal .modal-body input[type="checkbox"] {
    margin-right: 8px;
    transform: scale(1.2);
    accent-color: var(--skin-azul-medio);
}
.skin-login-page .modal .modal-footer {
    padding: 16px 26px 22px;
    border-top: 1px solid var(--skin-cinza-borda);
    background: white;
}
.skin-login-page .modal-footer .btn-skin-primario,
.skin-login-page .modal-footer .btn-skin-cancelar {
    width: auto;
    padding: 12px 28px;
    font-size: 13px;
    margin-left: 8px;
}
/* Onda 8 polish — scrollbar do termo + borda dourada no topo */
.skin-login-page .modal-body-termo {
    scrollbar-width: thin;
    scrollbar-color: var(--skin-cinza-borda) transparent;
    border-top: 3px solid var(--skin-dourado);
}
.skin-login-page .modal-body-termo::-webkit-scrollbar {
    width: 8px;
}
.skin-login-page .modal-body-termo::-webkit-scrollbar-thumb {
    background: var(--skin-cinza-borda);
    border-radius: 4px;
}
.skin-login-page .modal-body-termo::-webkit-scrollbar-thumb:hover {
    background: var(--skin-cinza-borda-2);
}
/* Backdrop do Bootstrap fica mais escuro pra reforcar o foco no modal */
.skin-login-page .modal-backdrop.show,
.skin-login-page + .modal-backdrop.show {
    opacity: 0.6;
}


/* Brasao oficial (substitui a bandeira simulada por divs) */
.skin-login-page .brasao-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

/* ---------------------------------------------------------------------------
 * DECORATIVOS DO HERO (números financeiros flutuantes + gráfico de barras)
 *   Portados de docs/SUSTENTACAO/REDESIGN/fragmentos/login.html (linhas 77-139)
 *   Aplicam-se ao painel-hero das 3 telas de login.
 * --------------------------------------------------------------------------- */

/* Gráfico de barras decorativo no rodapé do hero */
.skin-login-page .grafico-barras {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    height: 150px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    padding: 0 40px;
    opacity: 0.30;
    pointer-events: none;
    z-index: 1;
}
.skin-login-page .barra {
    width: 18px;
    background: linear-gradient(180deg, var(--skin-dourado) 0%, rgba(212,168,67,0.45) 60%, rgba(255,255,255,0.12) 100%);
    border-radius: 3px 3px 0 0;
    box-shadow: 0 0 12px rgba(212,168,67,0.35);
    transform-origin: bottom center;
    animation: skinCrescerBarra 1.1s cubic-bezier(.22,1,.36,1) both,
               skinPulsarBarra 3.2s ease-in-out infinite;
}
@keyframes skinCrescerBarra {
    from { height: 0; opacity: 0; }
    to   { opacity: 1; }
}
/* Respiro continuo: o grafico "vive" em vez de congelar apos a entrada. */
@keyframes skinPulsarBarra {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(1.10); }
}

.skin-login-page .barra:nth-child(1)  { height: 26px;  animation-delay: 0.10s; }
.skin-login-page .barra:nth-child(2)  { height: 42px;  animation-delay: 0.15s; }
.skin-login-page .barra:nth-child(3)  { height: 36px;  animation-delay: 0.20s; }
.skin-login-page .barra:nth-child(4)  { height: 58px;  animation-delay: 0.25s; }
.skin-login-page .barra:nth-child(5)  { height: 49px;  animation-delay: 0.30s; }
.skin-login-page .barra:nth-child(6)  { height: 72px; animation-delay: 0.35s; }
.skin-login-page .barra:nth-child(7)  { height: 62px;  animation-delay: 0.40s; }
.skin-login-page .barra:nth-child(8)  { height: 84px; animation-delay: 0.45s; }
.skin-login-page .barra:nth-child(9)  { height: 78px; animation-delay: 0.50s; }
.skin-login-page .barra:nth-child(10) { height: 101px; animation-delay: 0.55s; }
.skin-login-page .barra:nth-child(11) { height: 91px; animation-delay: 0.60s; }
.skin-login-page .barra:nth-child(12) { height: 114px; animation-delay: 0.65s; }
.skin-login-page .barra:nth-child(13) { height: 98px; animation-delay: 0.70s; }
.skin-login-page .barra:nth-child(14) { height: 124px; animation-delay: 0.75s; }
.skin-login-page .barra:nth-child(15) { height: 104px; animation-delay: 0.80s; }
.skin-login-page .barra:nth-child(16) { height: 130px; animation-delay: 0.85s; }
.skin-login-page .barra:nth-child(17) { height: 110px; animation-delay: 0.90s; }
.skin-login-page .barra:nth-child(18) { height: 94px; animation-delay: 0.95s; }

/* Números/códigos contábeis flutuantes (opacidade ~4%).
   Somem abaixo de 1280px: o hero estreita e eles cobrem o logo e o subtitulo. */
@media (max-width: 1280px) {
    .skin-login-page .numeros-bg { display: none; }
}
.skin-login-page .numeros-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}
.skin-login-page .numero-float {
    position: absolute;
    font-family: var(--skin-font-mono, "Cascadia Mono", Consolas, monospace);
    font-weight: 600;
    color: rgba(232,201,106,0.44);
    font-size: 14px;
    letter-spacing: 1px;
    white-space: nowrap;
    text-shadow: 0 0 14px rgba(212,168,67,0.35);
    opacity: 0;
    animation: skinEntrarNumero .9s ease-out both,
               skinDerivarNumero 7s ease-in-out infinite;
}
/* Entrada escalonada: os numeros aparecem um a um, nao todos de uma vez. */
@keyframes skinEntrarNumero {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Deriva lenta: reforca a ideia de dado vivo circulando no sistema. */
@keyframes skinDerivarNumero {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}
.skin-login-page .numero-float:nth-child(1) { top: 6%;  left: 4%;   font-size: 12px; animation-delay: 0.1s, 0.4s; }
.skin-login-page .numero-float:nth-child(2) { top: 11%; right: 6%;  font-size: 11px; animation-delay: 0.2s, 0.8s; }
.skin-login-page .numero-float:nth-child(3) { top: 19%; left: 3%;   font-size: 13px; animation-delay: 0.3s, 1.2s; }
.skin-login-page .numero-float:nth-child(4) { top: 26%; right: 4%;  font-size: 10px; animation-delay: 0.4s, 1.6s; }
.skin-login-page .numero-float:nth-child(5) { top: 34%; left: 5%;   font-size: 12px; animation-delay: 0.5s, 2s; }
.skin-login-page .numero-float:nth-child(6) { top: 40%; right: 3%;  font-size: 11px; animation-delay: 0.6s, 2.4s; }
/* 7 e 8 ficavam no meio do painel, atras da logo e do nome (1366-1680 px); foram para a faixa livre do alto (27/10) */
.skin-login-page .numero-float:nth-child(7) { top: 3%;  left: 34%;  font-size: 10px; animation-delay: 0.7s, 2.8s; }
.skin-login-page .numero-float:nth-child(8) { top: 3%;  right: 30%; font-size: 11px; animation-delay: 0.8s, 3.2s; }

/* ===========================================================================
 * ONDA 2 — TOPBAR (Topo.jsp / frame "cabecalho")
 *   Escopo: .skin-topbar-page no <body> de Topo.jsp.
 *   Substitui visualmente o #header antigo (com #divLogosTopo, #divBotoesTopo,
 *   etc) por um topbar moderno: brand + cmdK + chips UG/Exerc + malote +
 *   user-chip + chip de ambiente.
 *   Frame altura: 85px (definido no Fiplan.jsp). Topbar usa toda essa altura.
 * =========================================================================== */

body.skin-topbar-page {
    margin: 0;
    padding: 0;
    overflow: visible;
    min-height: 85px;
    background: var(--skin-branco);
    font-family: var(--skin-font-base);
    color: var(--skin-text);
    -webkit-font-smoothing: antialiased;
}

.skin-topbar-page .topbar {
    height: 85px;
    width: 100%;
    background: linear-gradient(165deg, var(--skin-azul-deep) 0%, var(--skin-azul-primario) 50%, var(--skin-azul-medio) 100%);
    border-bottom: 3px solid var(--skin-dourado);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 16px;
    position: relative;
    box-shadow: var(--skin-sombra-hero);
}

/* --- BRAND (esquerda) --- */
.skin-topbar-page .topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.skin-topbar-page .topbar-menu-toggle {
    width: 38px; height: 38px;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s ease;
}
.skin-topbar-page .topbar-menu-toggle:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.25);
}
.skin-topbar-page .topbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background .15s ease;
}
.skin-topbar-page .topbar-brand:hover {
    background: rgba(255,255,255,0.06);
}
/* Marca FIPLAN na topbar: o mark ja traz wordmark + cometa, entao o container
   deixou de ser um quadrado com fundo e passou a acomodar a marca larga. */
.skin-topbar-page .topbar-brasao {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.skin-topbar-page .topbar-mark {
    height: 26px;
    width: auto;
    display: block;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.25));
}
.skin-topbar-page .topbar-logo-text {
    font-family: var(--skin-font-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 4px;
    color: white;
    line-height: 1;
    text-shadow: 0 1px 6px rgba(0,0,0,0.2);
}
.skin-topbar-page .topbar-tag {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    padding-left: 14px;
    margin-left: 10px;
    border-left: 1px solid rgba(255,255,255,0.15);
    /* Nome em 3 linhas fixas (RM 71434): as quebras estao no Topo.jsp. */
    white-space: nowrap;
    line-height: 1.3;
}
@media (max-width: 1280px) {
    .skin-topbar-page .topbar-tag { display: none; }
}

/* --- DIREITA (chips + acoes + user) --- */
.skin-topbar-page .topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Chip de ambiente (Homologacao/Integracao/Estudo/Evolucao)
 * PRECISA saltar aos olhos: existe para o usuario nao confundir o ambiente com
 * producao. A versao anterior usava fundo translucido (18%) com texto claro e
 * sumia no gradiente azul da topbar - discricao aqui e defeito, nao virtude.
 * Fundo SOLIDO, mesma linguagem do chip das telas de login (secao PAINEL
 * LOGIN), com os tons calibrados para contrastar com o azul do fundo. */
.skin-topbar-page .chip-ambiente {
    display: none;
    align-items: center;
    gap: 9px;
    height: 34px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
/* Ponto luminoso pulsante - reforca que o aviso e "ao vivo" */
.skin-topbar-page .chip-ambiente::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
    background: rgba(255,255,255,.95);
    box-shadow: 0 0 0 0 rgba(255,255,255,.7);
    animation: chipAmbientePulso 2s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .skin-topbar-page .chip-ambiente::before { animation: none; }
}
/* Tons um pouco mais claros que os do login: sobre o azul escuro da topbar as
   cores fechadas perdem leitura. */
/* COR UNICA (mesmo laranja do login), levemente mais clara: sobre o azul
 * escuro da topbar o tom fechado perde leitura. */
.skin-topbar-page .chip-ambiente.ambiente-homologa,
.skin-topbar-page .chip-ambiente.ambiente-integracao,
.skin-topbar-page .chip-ambiente.ambiente-estudo,
.skin-topbar-page .chip-ambiente.ambiente-evolucao {
    display: inline-flex;
    background: #F26D14;
    box-shadow: 0 3px 12px rgba(242, 109, 20, .45);
}

/* Chip de ambiente LOCAL/DEV: cor sobria (slate) para diferenciar dos
   ambientes de teste (laranja). So aparece quando a versao contem
   "desenvolvimento" (maquina local) - producao segue sem chip. */
.skin-topbar-page .chip-ambiente.ambiente-desenvolvimento {
    display: inline-flex;
    background: #64748B;
    box-shadow: 0 3px 12px rgba(100, 116, 139, .45);
}

/* Chips UG/Exercicio (info do usuario logado). O markup existe sempre; o
   atributo hidden (servidor na carga, topbar.js no refresh por AJAX) esconde.
   O !important vence o display:inline-flex das regras abaixo. */
.skin-topbar-page .ctx-chip[hidden],
.skin-topbar-page .user-chip[hidden],
.skin-topbar-page .user-dropdown-row[hidden] {
    display: none !important;
}
.skin-topbar-page .ctx-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    transition: all .15s ease;
    cursor: default;
    color: white;
    font-size: 12.5px;
}
/* Variante CLICAVEL (UO / Exercicio) - leva as actions do Acesso Rapido.
 * O elemento passou de <div> para <button> no Topo.jsp: alem do cursor, e
 * preciso zerar a aparencia nativa do botao (o UA aplica font/background
 * proprios) e herdar a tipografia da topbar. */
.skin-topbar-page button.ctx-chip-acao {
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    line-height: normal;
    -webkit-appearance: none;
    appearance: none;
}
.skin-topbar-page button.ctx-chip-acao:hover {
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.30);
}
.skin-topbar-page button.ctx-chip-acao:active {
    transform: translateY(1px);
}
/* Chip SEM acao (usuario sem o Acesso Rapido): continua <button> para o
 * markup ser um so, mas disabled - o browser nao dispara click nem foca.
 * Zera a cara de botao desabilitado do UA e mantem a do chip informativo. */
.skin-topbar-page button.ctx-chip:disabled {
    cursor: default;
    opacity: 1;
    color: white;
    font-family: inherit;
    font-size: 12.5px;
    line-height: normal;
    -webkit-appearance: none;
    appearance: none;
}
.skin-topbar-page button.ctx-chip:disabled:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.12);
}

.skin-topbar-page button.ctx-chip-acao:focus-visible {
    outline: 2px solid var(--skin-dourado);
    outline-offset: 2px;
}
.skin-topbar-page .ctx-chip:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.2);
}
.skin-topbar-page .ctx-chip-k {
    color: rgba(255,255,255,0.55);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
}
.skin-topbar-page .ctx-chip-v {
    color: white;
    font-weight: 600;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Botoes de icone (Home, Malote) */
.skin-topbar-page .icon-btn {
    display: none; /* default oculto; mostrado quando logado */
    width: 38px; height: 38px;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    transition: all .15s ease;
    position: relative;
    text-decoration: none;
}
.skin-topbar-page.logado .icon-btn {
    display: inline-flex;
}
.skin-topbar-page .icon-btn:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.25);
    color: white;
}
.skin-topbar-page .icon-btn .badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--skin-danger);
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--skin-azul-primario);
}
.skin-topbar-page .icon-btn .badge:empty,
.skin-topbar-page .icon-btn .badge[data-count="0"] {
    display: none;
}

/* User-chip (avatar + nome + cargo) */
.skin-topbar-page .user-chip {
    display: none; /* default oculto; mostrado quando logado */
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 12px 0 6px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    cursor: pointer;
    transition: all .15s ease;
    color: white;
    margin-left: 4px;
    position: relative;
}
.skin-topbar-page.logado .user-chip {
    display: inline-flex;
}
.skin-topbar-page .user-chip:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.25);
}
.skin-topbar-page .user-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--skin-dourado), #b8830a);
    color: var(--skin-azul-deep);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.skin-topbar-page .user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}
.skin-topbar-page .user-name {
    font-size: 12.5px;
    font-weight: 600;
    color: white;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.skin-topbar-page .user-role {
    font-size: 10.5px;
    color: rgba(255,255,255,0.6);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.skin-topbar-page .user-chip svg.user-caret {
    color: rgba(255,255,255,0.55);
    transition: transform .15s;
}
.skin-topbar-page .user-chip.open svg.user-caret {
    transform: rotate(180deg);
}

/* Dropdown do user-chip */
.skin-topbar-page .user-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 24px;
    width: 320px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(5, 30, 58, 0.35);
    border: 1px solid var(--skin-line);
    z-index: 1000;
    display: none;
    overflow: hidden;
}
.skin-topbar-page .user-dropdown.open {
    display: block;
    animation: skinSlideUp 0.18s ease-out;
}
.skin-topbar-page .user-dropdown-header {
    padding: 16px 18px;
    background: linear-gradient(135deg, var(--skin-azul-primario), var(--skin-azul-medio));
    color: white;
}
.skin-topbar-page .user-dropdown-name {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
}
.skin-topbar-page .user-dropdown-cargo {
    font-size: 11.5px;
    color: rgba(255,255,255,0.75);
}
.skin-topbar-page .user-dropdown-body {
    padding: 8px 0;
}
.skin-topbar-page .user-dropdown-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 18px;
    font-size: 12.5px;
}
.skin-topbar-page .user-dropdown-row .k {
    color: var(--skin-cinza-texto);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-weight: 700;
    min-width: 80px;
    padding-top: 1px;
}
.skin-topbar-page .user-dropdown-row .v {
    color: var(--skin-text);
    flex: 1;
    word-break: break-word;
}
.skin-topbar-page .user-dropdown-sep {
    height: 1px;
    background: var(--skin-line);
    margin: 6px 0;
}
.skin-topbar-page .user-dropdown-action {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--skin-azul-primario);
    cursor: pointer;
    text-decoration: none;
    transition: background .12s ease;
}
.skin-topbar-page .user-dropdown-action:hover {
    background: var(--skin-cinza-bg);
    color: var(--skin-azul-medio);
}
.skin-topbar-page .user-dropdown-action.danger {
    color: var(--skin-danger);
}
.skin-topbar-page .user-dropdown-action.danger:hover {
    background: rgba(197,50,43,0.06);
}
.skin-topbar-page .user-dropdown-action svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Backdrop pra fechar dropdown */
.skin-topbar-page .user-dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: none;
}
.skin-topbar-page .user-dropdown-backdrop.open {
    display: block;
}

/* ============================================================
 *  ONDA 5 — Footer (Botoes.jsp / frame "buttons")
 * ============================================================
 *  Frame tem 60px de altura. Layout:
 *  [versao] [data/hora] [.... botoes dinamicos ....] [Desenvolvido por MTI]
 * ============================================================ */
.skin-footer-page {
    margin: 0;
    padding: 0;
    background: var(--skin-azul-deep);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: rgba(255,255,255,0.85);
    overflow: hidden;
    height: 100%;
}
.skin-footer-page #footer {
    height: 100%;
    background: linear-gradient(165deg, var(--skin-azul-deep) 0%, var(--skin-azul-primario) 50%, var(--skin-azul-medio) 100%);
    border-top: 3px solid var(--skin-dourado);
    box-shadow: 0 -4px 14px rgba(10, 61, 107, 0.22);
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 11.5px;
    color: rgba(255,255,255,0.85);
    box-sizing: border-box;
    position: relative;
}
.skin-footer-page #divVersao {
    font-family: 'JetBrains Mono', 'Consolas', 'Courier New', monospace;
    color: rgba(255,255,255,0.75);
    font-size: 10.5px;
    letter-spacing: 0.2px;
    white-space: nowrap;
    flex: none;
}
/* Especificidade dupla (`.skin-footer-page#footer`) bate o
   `#footer #div_botoes` legado do Fiplan.css que aplica padding-top:15px
   + float:right, quebrando o alinhamento vertical do flex. */
.skin-footer-page #footer #div_botoes {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    padding: 0 12px 0 0;
    float: none;
    /* configurarBotoes() injeta '&nbsp;' antes de cada botao;
       esses text-nodes viram flex items "anonimos" que bagunçam o
       alinhamento. Zera fonte e altura deles para nao influenciarem. */
    font-size: 0;
    line-height: 0;
}
/* Especificidade dobrada (`#footer #div_botoes`) bate o `.btn-sm` do bootstrap
   e o Fiplan.css legado.
   Branco solido + microinteracoes (lift no hover, afunda no active). */
.skin-footer-page #footer #div_botoes button,
.skin-footer-page #footer #div_botoes .btn {
    height: 34px;
    line-height: 1;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-family: inherit;
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.2px;
    padding: 0 16px;
    margin: 0;
    background: #fff;
    border: 1px solid rgba(13, 91, 166, 0.15);
    color: var(--skin-azul-deep);
    cursor: pointer;
    text-decoration: none;
    box-shadow:
        0 1px 2px rgba(5, 30, 58, 0.08),
        0 2px 6px rgba(5, 30, 58, 0.12);
    vertical-align: middle;
    transition:
        transform .15s cubic-bezier(.2,.8,.2,1.2),
        box-shadow .18s ease,
        background .15s ease,
        border-color .15s ease,
        color .15s ease;
    will-change: transform, box-shadow;
}
.skin-footer-page #footer #div_botoes button:hover,
.skin-footer-page #footer #div_botoes .btn:hover {
    background: var(--skin-azul-soft);
    border-color: rgba(13, 91, 166, 0.45);
    color: var(--skin-azul-primario);
    transform: translateY(-1px);
    box-shadow:
        0 2px 4px rgba(5, 30, 58, 0.10),
        0 6px 14px rgba(5, 30, 58, 0.25);
}
.skin-footer-page #footer #div_botoes button:focus,
.skin-footer-page #footer #div_botoes .btn:focus {
    outline: none;
    border-color: var(--skin-dourado);
    box-shadow:
        0 0 0 3px rgba(212, 168, 67, 0.40),
        0 2px 6px rgba(5, 30, 58, 0.20);
}
.skin-footer-page #footer #div_botoes button:active,
.skin-footer-page #footer #div_botoes .btn:active {
    transform: translateY(1px);
    background: var(--skin-azul-soft);
    box-shadow:
        inset 0 1px 2px rgba(5, 30, 58, 0.10),
        0 0 0 1px rgba(13, 91, 166, 0.10);
    transition-duration: .08s;
}
/* configurarBotoes() injeta class="btn-primary" em TODO botao do FIPLAN,
   entao .btn-primary nao representa "acao principal". Mesmo estilo. */
.skin-footer-page #footer #div_botoes button.btn-primary {
    background: #fff;
    border-color: rgba(13, 91, 166, 0.15);
    color: var(--skin-azul-deep);
}
.skin-footer-page #footer #div_botoes button.btn-primary:hover {
    background: var(--skin-azul-soft);
    border-color: rgba(13, 91, 166, 0.45);
    color: var(--skin-azul-primario);
}
.skin-footer-page #divDesenv {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    color: rgba(255,255,255,0.75);
    white-space: nowrap;
}
.skin-footer-page #divDesenv #desenvolvidoSpan {
    font-weight: 500;
}
/* logo oficial da MTI (com a linha "Empresa Mato-grossense..."): precisa de mais altura que o texto antigo */
.skin-footer-page #divDesenv img {
    height: 30px;
    width: auto;
    opacity: 0.95;
    transition: opacity .12s;
}
.skin-footer-page #divDesenv a:hover img {
    opacity: 1;
}

/* ------- Modo POPUP (PesquisaPopup e outros framesets secundarios) -------
 * Frame buttons em popup tem 23px -> 42px (changePopupButtonSize).
 * Botoes 34px nao cabem. Aqui reduzimos a altura/padding e escondemos
 * versao/MTI/chip ambiente pra dar todo espaco aos botoes dinamicos.
 */
.skin-footer-page.skin-footer-popup #footer {
    padding: 0 12px;
    gap: 6px;
    border-top-width: 2px;
    box-shadow: none;
}
.skin-footer-page.skin-footer-popup #divVersao,
.skin-footer-page.skin-footer-popup #divDesenv,
.skin-footer-page.skin-footer-popup .chip-ambiente {
    display: none !important;
}
.skin-footer-page.skin-footer-popup #footer #div_botoes {
    justify-content: flex-end;
    /* !important para anular o inline-style 'padding:10px 10px 0px 0px' que
       changePopupButtonSize() aplica no legado e empurra botoes pra fora */
    padding: 0 12px 0 0 !important;
    gap: 6px;
}
.skin-footer-page.skin-footer-popup #footer #div_botoes button,
.skin-footer-page.skin-footer-popup #footer #div_botoes .btn,
.skin-footer-page.skin-footer-popup #footer #div_botoes button.btn-xs,
.skin-footer-page.skin-footer-popup #footer #div_botoes .btn.btn-xs {
    height: 30px !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 12px !important;
    font-size: 11.5px !important;
    border-radius: 7px !important;
    line-height: 1 !important;
    box-shadow: 0 1px 2px rgba(5,30,58,0.10);
}
.skin-footer-page.skin-footer-popup #footer #div_botoes button:hover,
.skin-footer-page.skin-footer-popup #footer #div_botoes .btn:hover {
    transform: none;
    box-shadow: 0 2px 4px rgba(5,30,58,0.18);
}

/* Chip de ambiente no footer — espelha o do topbar */
/* Chip de ambiente no RODAPE - mesma linguagem da topbar e do login.
 * Aqui o fundo tambem e azul escuro (--skin-azul-deep), entao vale o mesmo
 * laranja mais claro da topbar. Menor que os outros dois: o rodape tem menos
 * altura util. */
.skin-footer-page .chip-ambiente {
    display: none;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 0 14px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
    flex: none;
}
.skin-footer-page .chip-ambiente::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    display: inline-block;
    background: rgba(255,255,255,.95);
    box-shadow: 0 0 0 0 rgba(255,255,255,.7);
    animation: chipAmbientePulso 2s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .skin-footer-page .chip-ambiente::before { animation: none; }
}
/* COR UNICA para todos os ambientes (ver secao do login) */
.skin-footer-page .chip-ambiente.ambiente-homologa,
.skin-footer-page .chip-ambiente.ambiente-integracao,
.skin-footer-page .chip-ambiente.ambiente-estudo,
.skin-footer-page .chip-ambiente.ambiente-evolucao {
    display: inline-flex;
    background: #F26D14;
    box-shadow: 0 3px 12px rgba(242, 109, 20, .45);
}

/* Chip de ambiente LOCAL/DEV: cor sobria (slate) para diferenciar dos
   ambientes de teste (laranja). So aparece quando a versao contem
   "desenvolvimento" (maquina local) - producao segue sem chip. */
.skin-footer-page .chip-ambiente.ambiente-desenvolvimento {
    display: inline-flex;
    background: #64748B;
    box-shadow: 0 3px 12px rgba(100, 116, 139, .45);
}

/* ============================================================
 *  ONDA 3 — Sidebar (Menu.jsp / frame "menu")
 * ============================================================
 *  Frame esquerdo de 300px com input de busca (top) + jstree (~1500 itens).
 *  Estrategia: CSS-only, mantem jstree intacto.
 *  Selectores .jstree-default sobrescrevem o tema default do jstree.
 * ============================================================ */
body.skin-sidebar-page {
    margin: 0;
    padding: 0;
    background: var(--skin-cinza-bg);
    font-family: var(--skin-font-base);
    color: var(--skin-text);
    height: 100%;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}
.skin-sidebar-page .skin-sidebar-shell {
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: #fff;
    border-right: 1px solid var(--skin-line);
}
.skin-sidebar-page .menuBar {
    display: contents;
}

/* ------- Header da sidebar (input de busca) ------- */
.skin-sidebar-page #barra-pesquisa {
    position: relative;
    padding: 12px 14px;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
    border-bottom: 1px solid var(--skin-line);
    flex: none;
    box-shadow: 0 1px 0 rgba(5,30,58,0.02);
    z-index: 1;
}
.skin-sidebar-page #barra-pesquisa .input-group {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--skin-line);
    border-radius: var(--skin-radius-input);
    padding: 2px 4px 2px 12px;
    transition: border-color .15s ease, box-shadow .18s ease;
}
.skin-sidebar-page #barra-pesquisa .input-group:focus-within {
    border-color: var(--skin-azul-medio);
    box-shadow: 0 0 0 3px rgba(13, 91, 166, 0.12);
}
.skin-sidebar-page #barra-pesquisa .input-group::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C829A' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>");
    flex: none;
}
.skin-sidebar-page #pesquisa-menu-lateral {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: var(--skin-text);
    height: 30px;
    box-shadow: none;
    padding: 0;
}
.skin-sidebar-page #pesquisa-menu-lateral::placeholder {
    color: var(--skin-cinza-texto-3);
}
.skin-sidebar-page #barra-pesquisa .has-error .input-group {
    border-color: var(--skin-erro);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10);
}
.skin-sidebar-page #barra-pesquisa .input-group-btn {
    display: flex;
}
.skin-sidebar-page #barra-pesquisa .btn.btn-white {
    border: none;
    background: transparent;
    color: var(--skin-cinza-texto-3);
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    width: 28px;
}
.skin-sidebar-page #barra-pesquisa .btn.btn-white:hover {
    background: var(--skin-cinza-bg);
    color: var(--skin-azul-primario);
}
.skin-sidebar-page #barra-pesquisa .btn.btn-white .fa-eraser {
    font-size: 12px;
}

/* ------- Container do jstree ------- */
.skin-sidebar-page #menu-lateral {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 4px 16px;
    background: #fff;
    scrollbar-width: thin;
    scrollbar-color: var(--skin-cinza-borda) transparent;
}
.skin-sidebar-page #menu-lateral::-webkit-scrollbar {
    width: 8px;
}
.skin-sidebar-page #menu-lateral::-webkit-scrollbar-thumb {
    background: var(--skin-cinza-borda);
    border-radius: 4px;
}
.skin-sidebar-page #menu-lateral::-webkit-scrollbar-thumb:hover {
    background: var(--skin-cinza-borda-2);
}

/* ------- jstree: estados e nodes ------- */
.skin-sidebar-page #jstree {
    background: transparent;
    font-family: var(--skin-font-base);
    font-size: 9pt;
    color: var(--skin-text);
}
.skin-sidebar-page .jstree-default .jstree-anchor {
    /* 24px acompanha a fonte de 8.5pt; padding lateral minimo pra sobrar
       largura util nos 300px do frame. */
    height: 24px;
    line-height: 24px;
    font-size: 8.5pt;
    border-radius: 5px;
    padding: 0 4px 0 2px;
    color: var(--skin-cinza-texto-2);
    transition: background .12s ease, color .12s ease;
}
.skin-sidebar-page .jstree-default .jstree-hovered {
    background: var(--skin-cinza-bg) !important;
    color: var(--skin-azul-primario) !important;
    box-shadow: none !important;
    border: none !important;
}
.skin-sidebar-page .jstree-default .jstree-clicked {
    background: var(--skin-azul-soft) !important;
    color: var(--skin-azul-primario) !important;
    font-weight: 600;
    box-shadow: none !important;
    border: none !important;
}
.skin-sidebar-page .jstree-default .jstree-clicked.jstree-hovered {
    background: var(--skin-azul-soft) !important;
    color: var(--skin-azul-primario) !important;
}

/* Wholerow (linha inteira clicavel) - a altura tem que bater com a do
   .jstree-anchor (24px), senao o realce da selecao fica deslocado da linha. */
.skin-sidebar-page .jstree-default > .jstree-wholerow-ul .jstree-wholerow {
    height: 24px;
    border-radius: 5px;
}
.skin-sidebar-page .jstree-default > .jstree-wholerow-ul .jstree-wholerow-hovered {
    background: var(--skin-cinza-bg) !important;
    box-shadow: none !important;
    border: none !important;
}
.skin-sidebar-page .jstree-default > .jstree-wholerow-ul .jstree-wholerow-clicked {
    background: var(--skin-azul-soft) !important;
    box-shadow: none !important;
    border: none !important;
}

/* Destaque busca: nos que matcham */
.skin-sidebar-page .jstree-default .jstree-search {
    color: var(--skin-azul-primario);
    font-weight: 700;
    font-style: normal;
    background: rgba(255, 196, 0, 0.20);
    border-radius: 3px;
    padding: 0 2px;
}

/* Caret/ocl (seta de expansao) - usa SVG inline em vez do sprite default */
.skin-sidebar-page .jstree-default .jstree-ocl {
    background-image: none;
    position: relative;
    /* o tema reserva 24px de caixa pra seta; 16px basta e devolve 8px de
       largura util por nivel. */
    width: 16px;
    height: 24px;
}
.skin-sidebar-page .jstree-default .jstree-ocl::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 3.5px solid var(--skin-cinza-texto-3);
    border-top: 3.5px solid transparent;
    border-bottom: 3.5px solid transparent;
    transform: translate(-50%, -50%);
    transition: transform .15s ease;
}
.skin-sidebar-page .jstree-default .jstree-open > .jstree-ocl::before {
    transform: translate(-50%, -50%) rotate(90deg);
    border-left-color: var(--skin-azul-primario);
}
.skin-sidebar-page .jstree-default .jstree-leaf > .jstree-ocl::before {
    display: none;
}

/* Icones de pasta (themeicon) - simplifica usando emoji/svg inline ou esconde */
.skin-sidebar-page .jstree-default .jstree-themeicon {
    background-image: none;
    background-color: transparent;
    position: relative;
    width: 14px;
    height: 24px;
    flex: none;
}
/* Pasta fechada */
.skin-sidebar-page .jstree-default .jstree-icon.jstree-themeicon-custom + .jstree-anchor,
.skin-sidebar-page .jstree-default .jstree-node > .jstree-anchor > .jstree-themeicon {
    /* deixar simples — só remove o sprite default */
}
.skin-sidebar-page .jstree-default .jstree-node > .jstree-anchor > .jstree-themeicon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 10px;
    background: linear-gradient(180deg, #FFD27A 0%, #F4B740 100%);
    border-radius: 1.5px 3px 3px 3px;
    box-shadow: 0 0 0 1px rgba(201, 137, 16, 0.5);
}
.skin-sidebar-page .jstree-default .jstree-leaf > .jstree-anchor > .jstree-themeicon::before {
    /* item folha — bolinha amarela menorzinha */
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--skin-amarelo-mt);
    box-shadow: none;
    border: none;
}

/* Espacamento entre niveis */
.skin-sidebar-page .jstree-default .jstree-children {
    /* recuo por nivel: 6+3=9px. Com ~1500 itens e ate 6 niveis, cada pixel
       aqui e multiplicado pela profundidade. */
    margin-left: 6px;
    border-left: 1px dashed var(--skin-line);
    padding-left: 3px;
}

/* O recuo REAL de cada <li> vem do tema do jstree (.jstree-node
   { margin-left: 24px }), que a skin nunca sobrescreveu - por isso o menu
   continuava largo mesmo com o .jstree-children enxuto. 14px mantem a leitura
   da hierarquia gastando bem menos dos 300px do frame. */
.skin-sidebar-page .jstree-default .jstree-node {
    margin-left: 14px;
    min-height: 0;
}
.skin-sidebar-page .jstree-default > ul.jstree-container-ul > .jstree-node {
    margin-left: 0;
}

/* ------- Icones de operacao nas folhas (injetados via JS) ------- */
.skin-sidebar-page .skin-menu-op-ic {
    font-size: 10px;
    width: 14px;
    text-align: center;
    margin-right: 5px;
    vertical-align: middle;
    flex: none;
    color: var(--skin-cinza-texto);
}
/* Quando ha icone de operacao, esconde a "bolinha amarela" default (themeicon)
   pra nao duplicar visual. So nas folhas com op- */
.skin-sidebar-page .jstree-default .jstree-leaf > .jstree-anchor[data-skin-icon]:not([data-skin-icon="0"]) > .jstree-themeicon {
    display: none;
}

/* Cores por operacao */
.skin-sidebar-page .op-incluir       .skin-menu-op-ic { color: var(--skin-op-criar); }
.skin-sidebar-page .op-consultar     .skin-menu-op-ic { color: var(--skin-op-ler); }
.skin-sidebar-page .op-alterar       .skin-menu-op-ic { color: var(--skin-op-alterar); }
.skin-sidebar-page .op-excluir       .skin-menu-op-ic { color: var(--skin-op-remover); }
.skin-sidebar-page .op-estornar      .skin-menu-op-ic { color: var(--skin-op-especial); }
.skin-sidebar-page .op-detalhar      .skin-menu-op-ic { color: var(--skin-op-neutro); }
.skin-sidebar-page .op-liberar       .skin-menu-op-ic { color: var(--skin-op-criar); }
.skin-sidebar-page .op-regularizar   .skin-menu-op-ic { color: var(--skin-op-conciliar); }
.skin-sidebar-page .op-atualizar     .skin-menu-op-ic { color: var(--skin-op-ler); }
.skin-sidebar-page .op-cancelar      .skin-menu-op-ic { color: var(--skin-op-remover); }
.skin-sidebar-page .op-retificar     .skin-menu-op-ic { color: var(--skin-op-alterar); }
.skin-sidebar-page .op-ajustar       .skin-menu-op-ic { color: var(--skin-op-alterar); }
.skin-sidebar-page .op-aprovar       .skin-menu-op-ic { color: var(--skin-op-criar); }
.skin-sidebar-page .op-salvar        .skin-menu-op-ic { color: var(--skin-op-ler); }
.skin-sidebar-page .op-replanejar    .skin-menu-op-ic { color: var(--skin-op-ler); }
.skin-sidebar-page .op-retransmitir  .skin-menu-op-ic { color: var(--skin-op-ler); }
.skin-sidebar-page .op-solicitar     .skin-menu-op-ic { color: var(--skin-op-ler); }
.skin-sidebar-page .op-autorizar     .skin-menu-op-ic { color: var(--skin-op-criar); }
.skin-sidebar-page .op-confirmar     .skin-menu-op-ic { color: var(--skin-op-criar); }
.skin-sidebar-page .op-processar     .skin-menu-op-ic { color: var(--skin-op-ler); }
.skin-sidebar-page .op-registrar     .skin-menu-op-ic { color: var(--skin-op-ler); }
.skin-sidebar-page .op-inativar      .skin-menu-op-ic { color: var(--skin-op-neutro); }
.skin-sidebar-page .op-bloquear      .skin-menu-op-ic { color: var(--skin-op-remover); }
.skin-sidebar-page .op-agrupar       .skin-menu-op-ic { color: var(--skin-op-ler); }
.skin-sidebar-page .op-arquivar      .skin-menu-op-ic { color: var(--skin-op-neutro); }
.skin-sidebar-page .op-limpar        .skin-menu-op-ic { color: var(--skin-op-neutro); }
.skin-sidebar-page .op-importar      .skin-menu-op-ic { color: var(--skin-op-ler); }
.skin-sidebar-page .op-carregar      .skin-menu-op-ic { color: var(--skin-op-ler); }
.skin-sidebar-page .op-validar       .skin-menu-op-ic { color: var(--skin-op-conciliar); }
.skin-sidebar-page .op-definir       .skin-menu-op-ic { color: var(--skin-op-ler); }
.skin-sidebar-page .op-analisar      .skin-menu-op-ic { color: var(--skin-op-ler); }
.skin-sidebar-page .op-abrir         .skin-menu-op-ic { color: var(--skin-dourado); }
.skin-sidebar-page .op-fechar        .skin-menu-op-ic { color: var(--skin-dourado); }
.skin-sidebar-page .op-desmembrar    .skin-menu-op-ic { color: var(--skin-op-alterar); }
.skin-sidebar-page .op-justificar    .skin-menu-op-ic { color: var(--skin-op-ler); }
.skin-sidebar-page .op-invalidar     .skin-menu-op-ic { color: var(--skin-op-remover); }
.skin-sidebar-page .op-executar      .skin-menu-op-ic { color: var(--skin-op-criar); }

/* Quando a folha esta active (clicked), icone ganha a cor do tema azul */
.skin-sidebar-page .jstree-default .jstree-clicked .skin-menu-op-ic {
    color: var(--skin-azul-primario);
}
/* Fallbacks do skin-redesign-menu-icons.js (14/09/2026): relatorio com codigo
   e folha sem verbo de operacao. Cor neutra, pra nao competir com as operacoes. */
.skin-sidebar-page .op-relatorio     .skin-menu-op-ic { color: var(--skin-op-neutro); }
.skin-sidebar-page .op-generico      .skin-menu-op-ic { color: var(--skin-op-neutro); opacity: .7; }


/* ============================================================
 *  ONDA 4A — Moldura (fiplan:moldura, todas as telas transacionais)
 * ============================================================
 *  MolduraTag (Java) emite:
 *    <div id="fiplan_moldura_div">
 *      <div id="tituloMoldura">
 *        <span id="idTituloPagina" class="tituloPagina">Titulo</span>
 *        <span class="informacaoPagina">cpf - HH:MM:SS dd/MM/yyyy</span>
 *      </div>
 *      <div id="idCamada"> ... <div id="conteudoMoldura"> form </div></div>
 *    </div>
 *
 *  Aplicado SEM escopo de classe pra atingir TODAS as telas (fiplan:moldura
 *  nao injeta classe no body). Sobrescreve o estilo legado de Fiplan.css.
 *  Reversao: remover este bloco -> volta visual antigo.
 * ============================================================ */
#fiplan_moldura_div {
    padding: 20px 24px;
    margin: 0;
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--skin-font-base);
    color: var(--skin-text);
    -webkit-font-smoothing: antialiased;
}

#tituloMoldura {
    padding: 14px 22px;
    background: linear-gradient(135deg, var(--skin-azul-deep) 0%, var(--skin-azul-primario) 60%, var(--skin-azul-medio) 100%);
    color: #fff;
    border-radius: var(--skin-radius-lg) var(--skin-radius-lg) 0 0;
    border-bottom: 3px solid var(--skin-dourado);
    min-height: 44px;
    line-height: 1.3;
    overflow: visible;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 6px rgba(5, 30, 58, 0.10);
}

#tituloMoldura .tituloPagina,
#idTituloPagina.tituloPagina {
    font-family: var(--skin-font-display);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.2px;
    flex: 1;
    min-width: 0;
}

#tituloMoldura .informacaoPagina {
    float: none;
    font-family: var(--skin-font-mono);
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.80);
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex: none;
}

#conteudoMoldura {
    border: 1px solid var(--skin-line);
    border-top: 0;
    background: #fff;
    padding: 22px 24px;
    border-radius: 0 0 var(--skin-radius-lg) var(--skin-radius-lg);
    box-shadow: 0 1px 2px rgba(5, 30, 58, 0.04),
                0 8px 24px rgba(5, 30, 58, 0.05);
}

#idCamada {
    background: transparent;
}
#idTabelaConteudo {
    background: transparent;
}

/* Botoes dentro da moldura — preserva estilo Bootstrap legado mas tira box-shadow agressiva */
/* 25/09: o :not(.skin-btn-img) e OBRIGATORIO. Este seletor tem ID (especificidade 1,1,0)
 * e por isso vencia TODAS as regras de classe da ONDA 7 (0,2,0 / 0,3,0): os botoes de
 * imagem da coluna ao lado da grade sairam com raio 9px na TELA REAL, mesmo havendo
 * quatro `border-radius: 0` declarados mais adiante no arquivo. Medido no navegador do
 * Diego (frame areaAplicacao do Malote). Nao adianta subir a especificidade la embaixo:
 * corrige-se excluindo aqui. Os demais botoes da moldura seguem redondos. */
#conteudoMoldura .btn:not(.skin-btn-img) {
    border-radius: var(--skin-radius);
}

/* Rotulos da moldura (rotuloCampo, textoCorpo) — fonte consistente
 * O rotulo e o valor ficam LADO A LADO, um <td> em cada, na mesma <tr>. Os dois
 * PRECISAM ter o mesmo font-size: no Fiplan.css legado ambos eram 8pt. Enquanto
 * o valor foi 13px contra 12px do rotulo, o dado saia maior que a etiqueta e as
 * baselines das duas celulas nao batiam - a linha ia desalinhando conforme os
 * campos eram preenchidos (relatado em "Detalhar ABR" e "Autorizar Estorno de
 * NOB", onde o valor chega via <span>/fiplan:write depois de carregar o
 * documento). Ao mexer aqui, mexa nos DOIS. */
#conteudoMoldura .rotuloCampo {
    font-family: var(--skin-font-base);
    font-size: 12px;
    font-weight: 600;
    color: var(--skin-cinza-texto-2);
    letter-spacing: 0.2px;
    vertical-align: middle;
}
#conteudoMoldura .textoCorpo {
    font-family: var(--skin-font-base);
    font-size: 12px;
    color: var(--skin-text);
    vertical-align: middle;
}

/* Esconde os cantinhos GIF legados que algumas telas ainda usam */
#conteudoMoldura img[src*="Canto_Superior"],
#conteudoMoldura img[src*="Canto_Inferior"],
#conteudoMoldura td[background*="Linha_"] {
    display: none;
}

/* ============================================================
 *  Lupa de Pesquisa (LupaTag)
 * ============================================================
 *  Gera: <a class="cssLink linkLupaTag">
 *           <button class="btn btn-primary btn-xs">
 *             <span class="fa-solid fa-magnifying-glass"></span>
 *           </button> Pesquisar
 *        </a>
 * ============================================================ */
.linkLupaTag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--skin-azul-primario);
    font-family: var(--skin-font-base);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    vertical-align: middle;
    transition: color .12s ease;
}
.linkLupaTag:hover {
    text-decoration: none;
    color: var(--skin-azul-medio);
}
.linkLupaTag:focus {
    text-decoration: none;
    outline: none;
}
.linkLupaTag > button.btn,
.linkLupaTag > .btn {
    height: 28px;
    width: auto;
    min-width: 28px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: var(--skin-radius);
    background: var(--skin-azul-primario);
    border: 1px solid var(--skin-azul-primario);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(5, 30, 58, 0.10);
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.linkLupaTag:hover > button.btn,
.linkLupaTag:hover > .btn {
    background: var(--skin-azul-medio);
    border-color: var(--skin-azul-medio);
    box-shadow: 0 2px 5px rgba(13, 91, 166, 0.30);
    transform: translateY(-1px);
}
.linkLupaTag:active > button.btn,
.linkLupaTag:active > .btn {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(5, 30, 58, 0.18);
}
.linkLupaTag > button.btn .fa-solid,
.linkLupaTag > .btn .fa-solid {
    font-size: 12px;
    color: #fff;
    line-height: 1;
}
.linkLupaTag > button.btn .fa-magnifying-glass {
    margin: 0;
}

/* ===========================================================================
 * ONDA 4B — GRADE (ActiveWidgets / fiplan:grade)
 *   Escopo: .active-controls-grid (todas as grades do sistema).
 *   SOMENTE skin: cores, fonte, zebra, hover e seleção. Nenhuma métrica
 *   estrutural muda: alturas/paddings dos .active-scroll-* são acopladas ao
 *   cálculo de scroll da lib (ficam como estão no Fiplan.css) e bordas mudam
 *   APENAS de cor (largura 1px preservada). Acentos usam box-shadow inset,
 *   que não desloca layout. Este arquivo carrega DEPOIS de Grade.css e
 *   Fiplan.css, e .active-controls-grid .x (0,2,0) vence o <style> inline
 *   que a GradeTag injeta (0,1,0); !important só onde Grade.css/Fiplan.css
 *   já usam !important (seleção e borda externa).
 * =========================================================================== */

/* Moldura externa e tipografia */
.active-controls-grid {
    border: 1px solid var(--skin-cinza-borda) !important;
    border-radius: var(--skin-radius);
    font-family: var(--skin-font-base);
    font-size: 12px;
    color: var(--skin-text);
    background: var(--skin-branco);
}

/* Cabeçalho, coluna-seletora lateral e canto (todas as "caixas" cinzas) */
.active-controls-grid .active-box-normal {
    background-color: var(--skin-cinza-bg);
    color: var(--skin-cinza-texto-2);
    border-color: var(--skin-line);
}

/* Cabeçalho das colunas: peso + linha de acento inferior (box-shadow = 0 layout) */
.active-controls-grid .active-scroll-top .active-box-normal {
    box-shadow: inset 0 -2px 0 var(--skin-azul-primario);
}
.active-controls-grid .active-scroll-top .active-box-item {
    font-weight: 600;
}

/* Hover e clique no cabeçalho (hooks nativos da lib) */
.active-controls-grid .active-header-over .active-box-item {
    background-color: var(--skin-azul-soft);
}
.active-controls-grid .active-header-pressed {
    border-color: var(--skin-line);
}
.active-controls-grid .active-header-pressed .active-box-item {
    background-color: rgba(13, 91, 166, 0.10);
}

/* Marcador de linha (numerador / .active-scroll-left): Fiplan.css usa seletor
   (0,3,0) — precisa da mesma especificidade aqui (este arquivo carrega depois,
   então vence o desempate). Só cor/tipografia; o height 25px continua vindo
   do Fiplan.css (métrica acoplada ao scroll da lib). */
.active-controls-grid .active-scroll-left .active-box-normal {
    background-color: var(--skin-cinza-bg);
    color: var(--skin-cinza-texto-3);
    border-color: var(--skin-line);
}
.active-controls-grid .active-scroll-left .active-box-item {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Canto superior-esquerdo (encontro cabeçalho × marcador): continua a linha
   de acento azul do cabeçalho, que senão ficaria interrompida sobre o
   numerador. */
.active-controls-grid .active-scroll-corner .active-box-normal {
    background-color: var(--skin-cinza-bg);
    border-color: var(--skin-line);
    box-shadow: inset 0 -2px 0 var(--skin-azul-primario);
}

/* Linhas: separadores horizontal e vertical suaves (só cor — largura 1px
   preservada para não deslocar as colunas) */
.active-controls-grid .active-grid-row {
    border-bottom-color: var(--skin-line);
}

/*
 * Linha horizontal em TODAS as colunas, inclusive as alcançadas por rolagem.
 *
 * O border-bottom acima mora no elemento da LINHA, e esse elemento tem a
 * largura da área visível — não a da tabela rolada. A linha parava onde a tela
 * acabava e as colunas além do scroll ficavam sem separação nenhuma.
 *
 * Desenhando a borda em cada CÉLULA (que acompanha a coluna), a linha existe
 * em toda a extensão da grade, role-se o quanto for.
 */
.active-controls-grid .active-grid-row .active-row-cell,
.active-controls-grid .active-templates-row .active-row-cell {
    border-bottom: 1px solid var(--skin-line);
}
.active-controls-grid .active-grid-column {
    border-right-color: var(--skin-line);
}

/* Zebra (linhas pares) e hover de linha — só na área de dados.
 *
 * Pintados na CÉLULA, não na linha: o elemento da linha tem a largura da área
 * visível, então o fundo terminava onde a tela acabava e as colunas alcançadas
 * por rolagem horizontal saíam brancas. A célula acompanha a coluna, então a
 * faixa existe em toda a extensão da grade. */
.active-controls-grid .active-scroll-data .active-templates-row:nth-child(even) .active-row-cell {
    background-color: #F7F9FC;
}
.active-controls-grid .active-scroll-data .active-templates-row:hover .active-row-cell {
    background-color: var(--skin-azul-soft);
}

/* Linha é clicável (seleção): cursor de mão sobre a área de dados e sobre o
   numerador, que também seleciona a linha ao clicar. Inputs editáveis dentro
   da célula (numerico, editDate...) preservam o cursor de texto. */
.active-controls-grid .active-scroll-data .active-templates-row {
    cursor: pointer;
}
.active-controls-grid .active-scroll-left .active-box-normal {
    cursor: pointer;
}
.active-controls-grid .active-scroll-data .active-templates-row input[type='text'] {
    cursor: text;
}

/* Seleção: azul suave + barra de acento à esquerda, texto escuro legível.
   !important obrigatório: Grade.css usa !important nas cores de seleção. */
.active-controls-grid .active-selection-true,
.active-controls-grid .active-selection-true .active-row-cell {
    background-color: #D8E7F9 !important;
    color: var(--skin-text) !important;
}
.active-controls-grid .active-selection-true {
    box-shadow: inset 3px 0 0 var(--skin-azul-medio);
}

/* ===========================================================================
 * ONDA 4C — PROCESSANDO (overlay #fiplan_processando_div + fiplan:progressBar)
 *   Dois estados do mesmo container (MolduraTag emite o div; ProgressBarTag
 *   troca o innerHTML quando a tela tem barra de progresso):
 *     a) overlay simples: .processandoBg + <img Processando.gif>
 *     b) progresso:       .processandoBg + .progressBar (trilho/contadores)
 *   SEM impacto funcional: o Framework.js só toca visibility e style.width(%)
 *   do #progressBar_status e innerHTML dos spans — nada disso é definido aqui.
 *   Especificidade: Fiplan.css usa #fiplan_processando_div div.processandoBg
 *   (1,1,1) e .progressBar1/2 (0,1,0) — replicamos/superamos e carregamos
 *   depois. O GIF só é escondido dentro de :has(): navegador sem suporte
 *   continua vendo o GIF (nunca fica sem indicador).
 * =========================================================================== */

/* Fundo do véu. 02/10/2026 (piscada): era azul-marinho 0.45 e aparecia na
   hora; resposta rápida (100 ms) fazia a tela escurecer e clarear a cada
   submit. Agora é claro e só aparece se a espera passar de 0,4 s. O div
   continua cobrindo a tela desde o primeiro instante (bloqueia o clique
   duplo); só a cor espera. A animação recomeça a cada exibição porque o
   mostraMoldura() volta o div para display:none. */
@keyframes skin-processando-aparece {
    from { opacity: 0; }
    to   { opacity: 1; }
}
#fiplan_processando_div div.processandoBg {
    opacity: 1;
    background: rgba(240, 244, 248, 0.7);
    animation: skin-processando-aparece .2s ease-out .4s both;
}

/* Spinner CSS no lugar do GIF — apenas no estado overlay simples (tem <img>).
   No estado progresso o innerHTML não tem img, então o spinner some sozinho. */
@keyframes skin-processando-spin {
    to { transform: rotate(360deg); }
}
#fiplan_processando_div:has(img) img {
    opacity: 0;
}
#fiplan_processando_div:has(img)::after {
    content: "";
    position: fixed;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
    /* aro escuro translúcido: o branco sumia sobre o véu claro */
    border: 4px solid rgba(5, 30, 58, 0.15);
    border-top-color: var(--skin-dourado);
    animation: skin-processando-spin .8s linear infinite,
               skin-processando-aparece .2s ease-out .4s both;
    z-index: 2001;
}

/* Card da barra de progresso (era 162px sem fundo, com trilho cinza #b3b3b3) */
#fiplan_processando_div .progressBar {
    width: 340px;
    height: auto;
    left: 50%;
    top: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    background: var(--skin-branco);
    border-radius: var(--skin-radius-lg);
    border-top: 3px solid var(--skin-dourado);
    box-shadow: var(--skin-sombra-md);
    padding: 22px 24px;
    font-family: var(--skin-font-base);
    box-sizing: border-box;
}

/* Trilho: pill discreta ocupando o card (width/visibility ficam com o JS) */
#fiplan_processando_div .progressBar1 {
    width: 100%;
    height: 10px;
    background-color: var(--skin-cinza-bg-2);
    border: none;
    border-radius: 999px;
    overflow: hidden;
}

/* Preenchimento: gradiente azul; transition suaviza os saltos de % do AJAX */
#fiplan_processando_div .progressBar2 {
    height: 10px;
    background: linear-gradient(90deg, var(--skin-azul-primario), var(--skin-azul-claro));
    border-radius: 999px;
    transition: width .3s ease;
}

/* Contadores: descrição como título + Total/Lidos/Processados em linha */
#fiplan_processando_div .progressBarTotal {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin-top: 14px;
    font-size: 12px;
    color: var(--skin-cinza-texto-2);
}
#fiplan_processando_div .progressBarTotal #idProgressBarDesc {
    flex-basis: 100%;
    font-family: var(--skin-font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--skin-azul-primario);
}
#fiplan_processando_div .progressBarTotal span {
    margin-left: 4px;
    font-weight: 600;
    color: var(--skin-text);
    font-variant-numeric: tabular-nums;
}

/* ===========================================================================
 * ONDA 4D — BARRA DE PROGRESSO DAS TELAS DE STATUS (.bar1 / .bar2)
 *   Padrao duplicado em ~10 JSPs de acompanhamento de processamento
 *   (AVR, Carga Razao, Conciliacao Eletronica, MSC, Carga Saldo, IRP
 *   geracao/estorno, CNAB240, OBN). Cada tela repete o MESMO <style> inline:
 *     .bar1 = trilho cinza #b3b3b3, 200px, borda #505050  (o "cinza feio")
 *     .bar2 = preenchimento azul #000099, width alterada pelo JS
 *   Restilizado aqui, em um lugar so, sem tocar em nenhuma JSP.
 *
 *   !important e OBRIGATORIO: o <style> inline fica DENTRO do corpo da tag
 *   <fiplan:head>, portanto e emitido DEPOIS do <link> deste arquivo. Mesma
 *   especificidade (0,1,0) + vindo depois = o inline venceria.
 *
 *   SEM impacto funcional: o JS das telas so escreve style.width em .bar2
 *   (width inline tem prioridade sobre folha, logo NAO levar !important
 *   em width aqui) e innerHTML no span de porcentagem.
 * =========================================================================== */

/* Trilho: pill discreta no lugar do bloco cinza com borda preta */
.bar1 {
    height: 12px !important;
    width: 320px !important;
    max-width: 100%;
    background-color: var(--skin-cinza-bg-2) !important;
    border: none !important;
    border-radius: 999px !important;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(14, 18, 38, .08);
    box-sizing: border-box;
}

/* Listras animadas sobre o gradiente azul da skin: sinalizam "em andamento"
   sem depender de GIF. Desligadas em prefers-reduced-motion (bloco no fim).
   transition suaviza os saltos do AJAX (as telas atualizam a cada 15s). */
@keyframes skin-bar-listras {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 28px 0, 0 0; }
}
.bar2 {
    height: 12px !important;
    background-color: transparent !important;
    background-image:
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, .18) 0 7px,
            rgba(255, 255, 255, 0)   7px 14px
        ),
        linear-gradient(90deg, var(--skin-azul-primario), var(--skin-azul-claro)) !important;
    background-size: 28px 100%, 100% 100%;
    border-radius: 999px !important;
    transition: width .4s ease;
    animation: skin-bar-listras .9s linear infinite;
    box-sizing: border-box;
}

/* Percentual que fica logo abaixo da barra (#porcentagem / span irmao):
   numeros tabulares para nao "pular" a cada atualizacao do AJAX. */
#porcentagem {
    font-family: var(--skin-font-display, var(--skin-font-base));
    font-weight: 700;
    color: var(--skin-azul-primario);
    font-variant-numeric: tabular-nums;
}

/* ===========================================================================
 * ONDA 4E — TABELAS "MONTADAS A MAO" (bordaTxtOn/Off, cellTxtOn/Off, .borda)
 *   Nao sao fiplan:grade (Onda 4B): sao <table> escritas na JSP com c:forEach,
 *   alternando as classes de zebra na mao. O visual vinha do Fiplan.css com
 *   `font: menu` — a fonte de MENU DO SISTEMA OPERACIONAL, que ignora a
 *   tipografia da skin e e a origem do aspecto "Windows 95" dessas telas.
 *
 *   Usadas em 13 telas: RBJ (Popup_Especificar_Despesa), IRP geracao/estorno,
 *   LIB autorizar/resumo, LIQ finalidade, OBF parcelamento, Equacao Auditoria,
 *   e 5 telas de Acompanhamento da Despesa (ICP, Modalidade, QDD Fonte, Regiao,
 *   Regiao_2020). Restilizadas aqui de uma vez, sem tocar nas JSPs.
 *
 *   Especificidade: as classes vem do Fiplan.css (0,1,0) e este arquivo carrega
 *   depois, entao classe simples basta — SEM !important. A excecao e o que
 *   estiver em style="" inline no proprio HTML (ver bloco do RBJ abaixo).
 *
 *   Alinhamento e o dado ficam intactos: `align=` das <td> continua valendo,
 *   nenhuma metrica de coluna e tocada.
 * =========================================================================== */

/* Tipografia e zebra — o par On/Off e o mesmo desenho, so muda o fundo.
   Alturas (19px) preservadas: varias dessas tabelas tem corpo com scroll de
   altura fixa e mudar a linha desalinharia o cabecalho. */
.bordaTxt,
.bordaTxtOn,
.bordaTxtOff,
.cellTxtOn,
.cellTxtOff {
    font: normal 12px var(--skin-font-base);
    color: var(--skin-text);
    border-top: 1px solid transparent;
    border-right: 1px solid var(--skin-line);
    border-bottom: 1px solid var(--skin-line);
    border-left: 1px solid transparent;
    padding: 0 8px;
}

/* Linhas pares (On) e impares (Off) — mesma zebra da grade da Onda 4B */
.bordaTxtOn,
.cellTxtOn {
    background-color: var(--skin-branco);
}
.bordaTxtOff,
.cellTxtOff {
    background-color: #F7F9FC;
}

/* Numerador / celula-cabecalho lateral: era o cinza #D4D0C8 do Windows 95 */
.borda {
    font: 600 11px var(--skin-font-base);
    color: var(--skin-cinza-texto-3);
    background-color: var(--skin-cinza-bg);
    border: 1px solid var(--skin-line);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * TABELA DE DETALHAMENTO (max-width:971px) — origem: RBJ Popup_Especificar_Despesa
 *   Essas tabelas trazem cores em style="" INLINE (#D4D0C8 na coluna "#",
 *   #D6D0C8 nas bordas do <thead>), e inline so e vencido por !important.
 *   O seletor ancora no proprio inline (max-width:971px), que marca este
 *   mesmo modelo de tabela em 7 telas: RBJ, LIB autorizar/resumo, LIQ
 *   finalidade, OBF parcelamento, Equacao Auditoria e IRP geracao.
 *   Conferido com: grep -rln "971px" --include=*.jsp pages/
 * --------------------------------------------------------------------------- */

/* Cabecalho: fundo da skin + acento azul inferior, igual ao da grade 4B */
table[style*="971px"] thead.borda,
table[style*="971px"] thead th {
    background-color: var(--skin-cinza-bg) !important;
    border: 1px solid var(--skin-line) !important;
    font: 600 11px var(--skin-font-base);
    color: var(--skin-cinza-texto-2);
    letter-spacing: .02em;
    text-transform: uppercase;
    height: 26px;
    padding: 0 6px;
}
table[style*="971px"] thead th {
    box-shadow: inset 0 -2px 0 var(--skin-azul-primario);
}

/* Coluna "#": o #D4D0C8 inline vira o cinza da skin */
table[style*="971px"] td.borda[style] {
    background-color: var(--skin-cinza-bg) !important;
    border: 1px solid var(--skin-line) !important;
    color: var(--skin-cinza-texto-3);
}

/* Hover de linha: mesma cor de realce da grade 4B */
table[style*="971px"] tbody tr:hover td {
    background-color: var(--skin-azul-soft);
}

/* Linha de TOTAL: so quem marca a linha com a classe; a ultima linha nem sempre e total (IRP, LIB...) */
table[style*="971px"] tbody tr.linha-total td {
    background-color: var(--skin-azul-soft);
    border-top: 2px solid var(--skin-azul-primario);
    font-weight: 700;
    color: var(--skin-azul-primario);
}

/* Valores monetarios: numeros tabulares para as colunas alinharem na virgula */
table[style*="971px"] td[align="right"],
table[style*="971px"] td[align="right"] input {
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * ACESSIBILIDADE — respeita quem pediu menos movimento no sistema operacional.
 * As animacoes continuas (pulso das barras, deriva dos numeros) sao desligadas;
 * os elementos permanecem visiveis no estado final.
 * --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .skin-login-page .barra,
    .skin-login-page .numero-float,
    .skin-login-page .modulo-item {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Onda 4D: barra de status para de listrar, mas continua mostrando o % */
    .bar2 {
        animation: none !important;
    }

}

/* ============================================================
 *  ONDA 6 — Sobre o Sistema (pages/Sobre.jsp)
 * ============================================================
 *  Popup de 860 px (Topo.jsp sobrePopup; altura ajustada ao conteudo), layout da imagem da RM 70864:
 *  cabecalho escuro com logo | fio | nome por extenso e, a direita, predios
 *  de vidro com a faixa dourada; quadro de dados; texto; quadro do INPI;
 *  "Desenvolvido por" MTI e botao Fechar no canto.
 * ============================================================ */
body.skin-sobre-page {
    margin: 0;
    display: block;
    min-height: 100vh;
    background: linear-gradient(160deg, #8A9BB2 0%, #5E718D 100%);
}
/* O cartao tem a altura do conteudo; e a janela que se ajusta a ele (script no fim da Sobre.jsp) */
.skin-sobre-page .skin-sobre-root {
    padding: 8px;
    box-sizing: border-box;
}
.skin-sobre-page .skin-sobre-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(10, 30, 60, .35);
    font-family: var(--skin-font-display, sans-serif);
}
.skin-sobre-page .skin-sobre-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    height: 106px;
    padding: 0 0 0 60px;
    background: linear-gradient(100deg, #012F5A 0%, #013868 45%, #014D8D 100%);
    overflow: hidden;
}
.skin-sobre-page .skin-sobre-skyline {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 430px;
    height: 106px;
    pointer-events: none;
}
.skin-sobre-page .skin-sobre-logo {
    position: relative;
    height: 56px;
    width: auto;
}
.skin-sobre-page .skin-sobre-fio {
    position: relative;
    align-self: center;
    width: 1px;
    height: 68px;
    background: rgba(255, 255, 255, .35);
}
.skin-sobre-page .skin-sobre-tagline {
    position: relative;
    width: 272px;
    font-size: 11px;
    line-height: 16px;
    color: rgba(255, 255, 255, .92);
    text-transform: uppercase;
    letter-spacing: 3px;
}
.skin-sobre-page .skin-sobre-body {
    position: relative;
    padding: 26px 34px 20px;
}
.skin-sobre-page .skin-sobre-info {
    border: 1px solid #D3DEEB;
    border-radius: 10px;
    background: #F2F6FB;
    overflow: hidden;
}
.skin-sobre-page .skin-sobre-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 42px;
    padding: 0 30px 0 32px;
}
.skin-sobre-page .skin-sobre-row + .skin-sobre-row {
    border-top: 1px solid #E1E8F1;
}
.skin-sobre-page .skin-sobre-k {
    font-size: 12.5px;
    font-weight: 600;
    color: #2B3E5C;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.skin-sobre-page .skin-sobre-v {
    font-size: 14px;
    color: #12305A;
    text-align: right;
    word-break: break-word;
}
.skin-sobre-page .skin-sobre-desc {
    margin: 22px 0 0;
    padding: 0 0 0 18px;
    font-size: 14px;
    line-height: 21px;
    color: #1E3E6E;
}
.skin-sobre-page .skin-sobre-desc b {
    color: #0B2A57;
}
.skin-sobre-page .skin-sobre-desc + .skin-sobre-desc {
    margin-top: 12px;
}
.skin-sobre-page .skin-sobre-registro {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 26px 0 24px 8px;
    padding: 14px 22px 15px 26px;
    border: 1px solid #D9E7F6;
    border-radius: 10px;
    background: #E8F1FB;
    font-size: 14.5px;
    line-height: 21px;
    color: #1E3E6E;
}
/* o Fiplan.css antigo fixa fonte pequena em div; aqui o texto segue o tamanho do quadro */
.skin-sobre-page .skin-sobre-registro div {
    font-size: 14.5px;
    line-height: 21px;
}
.skin-sobre-page .skin-sobre-registro b {
    color: #0B2A57;
}
.skin-sobre-page .skin-sobre-registro-icone {
    flex: 0 0 auto;
    width: 40px;
    height: 46px;
    color: #12305A;
}
.skin-sobre-page .skin-sobre-registro-titulo {
    font-weight: 700;
    color: #0B2A57;
}
.skin-sobre-page .skin-sobre-credito {
    padding-top: 20px;
    border-top: 1px solid #D9E1EA;
    text-align: center;
}
.skin-sobre-page .skin-sobre-credito-label {
    font-size: 12.5px;
    font-weight: 700;
    color: #12305A;
    text-transform: uppercase;
    letter-spacing: 3px;
}
.skin-sobre-page .skin-sobre-credito-mti {
    display: inline-block;
    margin-top: 10px;
}
.skin-sobre-page .skin-sobre-credito-mti img {
    height: 66px;
    width: auto;
    display: block;
}
.skin-sobre-page .skin-sobre-fechar {
    position: absolute;
    right: 14px;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 34px;
    padding: 0 20px 0 16px;
    border: 0;
    border-radius: 6px;
    background: #0D3B78;
    color: #fff;
    font: 600 14px var(--skin-font-display, sans-serif);
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}
.skin-sobre-page .skin-sobre-fechar:hover {
    background: #12509E;
}
.skin-sobre-page .skin-sobre-fechar svg {
    width: 15px;
    height: 15px;
}
/* Janela estreita (menu antigo abre a 500 px): cabecalho em coluna, botao no fluxo */
@media (max-width: 760px) {
    .skin-sobre-page .skin-sobre-hero { height: auto; flex-wrap: wrap; padding: 18px 22px; gap: 12px; }
    .skin-sobre-page .skin-sobre-fio { display: none; }
    .skin-sobre-page .skin-sobre-skyline { opacity: .45; }
    .skin-sobre-page .skin-sobre-body { padding: 16px 18px; }
    .skin-sobre-page .skin-sobre-row { padding: 0 14px; }
    .skin-sobre-page .skin-sobre-registro { gap: 16px; padding: 10px 14px; margin-left: 0; }
    .skin-sobre-page .skin-sobre-desc { padding-left: 0; }
    .skin-sobre-page .skin-sobre-fechar { position: static; margin: 14px 0 0 auto; display: flex; }
}
/* Monitor baixo ou com zoom (RM 70864, devolucao de 29/10): o script da Sobre.jsp liga esta classe
   quando o conteudo nao cabe na tela; tudo mais junto para caber sem rolagem */
.skin-sobre-compacta .skin-sobre-hero { height: 84px; }
.skin-sobre-compacta .skin-sobre-skyline { height: 84px; }
.skin-sobre-compacta .skin-sobre-logo { height: 46px; }
.skin-sobre-compacta .skin-sobre-fio { height: 54px; }
.skin-sobre-compacta .skin-sobre-body { padding: 14px 28px 12px; }
.skin-sobre-compacta .skin-sobre-row { height: 31px; }
.skin-sobre-compacta .skin-sobre-desc { margin-top: 10px; font-size: 13.5px; line-height: 19px; }
.skin-sobre-compacta .skin-sobre-desc + .skin-sobre-desc { margin-top: 6px; }
.skin-sobre-compacta .skin-sobre-registro { margin: 12px 0 12px 8px; padding: 8px 18px 8px 22px; }
.skin-sobre-compacta .skin-sobre-registro,
.skin-sobre-compacta .skin-sobre-registro div { font-size: 13.5px; line-height: 19px; }
.skin-sobre-compacta .skin-sobre-registro-icone { width: 34px; height: 40px; }
.skin-sobre-compacta .skin-sobre-credito { padding-top: 10px; }
.skin-sobre-compacta .skin-sobre-credito-mti { margin-top: 6px; }
.skin-sobre-compacta .skin-sobre-credito-mti img { height: 48px; }
.skin-sobre-compacta .skin-sobre-fechar { bottom: 14px; }

/* ---------------------------------------------------------------------------
 * BOTOES DAS TELAS DE PESQUISA (Pesquisa.jsp, PesquisaSeg.jsp, Resultado.jsp)
 *   Duas heranças ficaram fora da skin:
 *   - .cssButton (Fiplan.css antigo): so borda preta 1px + width 85px fixo,
 *     entao o navegador desenhava o botao cinza padrao do sistema;
 *   - .btn-default: classe do Bootstrap 3, que NAO existe no Bootstrap 4 do
 *     projeto (la e .btn-secondary), caindo no mesmo visual padrao.
 *   Aqui os dois passam a usar a linguagem da skin, sem tocar nas JSPs.
 * --------------------------------------------------------------------------- */
input.cssButton,
input.btn-default,
button.btn-default {
    display: inline-block;
    width: auto;
    min-width: 92px;
    padding: 7px 16px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F2F6FB 100%);
    color: var(--skin-azul-primario);
    border: 1px solid #A9BDD4;
    border-radius: var(--skin-radius-btn);
    box-shadow: 0 1px 2px rgba(10,61,107,.10), inset 0 1px 0 rgba(255,255,255,.85);
    font-family: var(--skin-font-base);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2px;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
input.cssButton:hover,
input.btn-default:hover,
button.btn-default:hover {
    background: linear-gradient(180deg, #F2F8FF 0%, #E2EEFB 100%);
    border-color: var(--skin-azul-claro);
    color: var(--skin-azul-primario);
    box-shadow: 0 2px 5px rgba(10,61,107,.16), inset 0 1px 0 rgba(255,255,255,.9);
}
input.cssButton:active,
input.btn-default:active,
button.btn-default:active {
    transform: translateY(1px);
}
input.cssButton:focus-visible,
input.btn-default:focus-visible,
button.btn-default:focus-visible {
    outline: none;
    border-color: var(--skin-azul-claro);
    box-shadow: 0 0 0 3px rgba(26,127,219,.18);
}
input.cssButton:disabled,
input.btn-default:disabled {
    opacity: .5;
    cursor: default;
}

/* Setas de mover itens entre listas (> >> << <). O min-width de 92px dos
   botoes de texto deixaria a seta perdida no meio do botao: aqui elas viram
   quadrados compactos, empilhados entre os dois <select>. */
input.cssButton[name="adicionaUm"],
input.cssButton[name="adicionaTodos"],
input.cssButton[name="removeUm"],
input.cssButton[name="removeTodos"] {
    min-width: 0;
    width: 38px;
    padding: 7px 0;
    margin: 3px 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--skin-azul-primario);
}
input.cssButton[name="adicionaUm"]:hover,
input.cssButton[name="adicionaTodos"]:hover,
input.cssButton[name="removeUm"]:hover,
input.cssButton[name="removeTodos"]:hover {
    background: var(--skin-azul-primario);
    border-color: var(--skin-azul-primario);
    color: var(--skin-branco);
}

/* ---------------------------------------------------------------------------
 * PAGINACAO DA GRADE (NavegacaoTag)
 *   Gera: <button class="btn btn-primary btn-xs">
 *            <span class="fa-solid fa-caret-left"></span>
 *         </button>
 *   .btn-xs e classe do Bootstrap 3 e NAO existe no Bootstrap 4 do projeto,
 *   entao os botoes saiam no tamanho padrao, sem identidade. Aqui viram
 *   quadrados compactos na cor da marca, iguais aos demais controles.
 * --------------------------------------------------------------------------- */
*:not(.linkLupaTag) > button.btn-primary.btn-xs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 21px;
    padding: 0;
    margin: 0 1px;
    background: transparent;
    color: var(--skin-azul-medio);
    border: 1px solid transparent;
    border-radius: 5px;
    box-shadow: none;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
*:not(.linkLupaTag) > button.btn-primary.btn-xs:hover {
    background: var(--skin-azul-soft);
    border-color: transparent;
    color: var(--skin-azul-primario);
}
*:not(.linkLupaTag) > button.btn-primary.btn-xs:active {
    transform: translateY(1px);
}
*:not(.linkLupaTag) > button.btn-primary.btn-xs:focus-visible {
    outline: none;
    background: var(--skin-azul-soft);
    box-shadow: 0 0 0 2px rgba(26,127,219,.30);
}
*:not(.linkLupaTag) > button.btn-primary.btn-xs:disabled {
    opacity: .45;
    cursor: default;
}
*:not(.linkLupaTag) > button.btn-primary.btn-xs > span { pointer-events: none; }

/* A lupa usa a mesma dupla de classes, mas ja tem estilo proprio mais
   especifico (.linkLupaTag > button.btn) - fica preservada. */
/* ---------------------------------------------------------------------------
 * MODAL DE MENSAGEM (jquery-confirm)
 *   Usado por alertaMensagem() e confirmaMensagem() em Funcoes.js - e a caixa
 *   de erro/alerta que aparece em todo o sistema. A lib traz visual proprio
 *   (azul #3498db, raio 4px, titulo 22px sem peso); aqui ele passa a falar a
 *   linguagem da skin, SEM tocar no JS: a lib so cria o markup, quem pinta e
 *   este bloco.
 *
 *   Markup gerado pela lib (jquery-confirm.css linhas 36-560):
 *     .jconfirm > .jconfirm-bg            (overlay)
 *              > .jconfirm-box-container
 *                > .jconfirm-box
 *                  > .jconfirm-title-c > .jconfirm-icon-c + .jconfirm-title
 *                  > .jconfirm-content-pane > .jconfirm-content
 *                  > .jconfirm-buttons > button.btn-*
 *
 *   ANATOMIA: caixa BRANCA + header com a assinatura do topo do FIPLAN
 *   (gradiente 165deg + filete dourado, secao ONDA 2 - TOPBAR) + mensagem no
 *   corpo branco + botao no rodape, tambem branco. Nao ha faixa cinza no pe:
 *   o unico peso visual e o header e o proprio botao.
 *
 *   Especificidade: a lib usa .jconfirm .jconfirm-box (0,2,0) e
 *   .jconfirm .jconfirm-box .jconfirm-buttons button (0,3,1). Repetimos a
 *   cadeia e acrescentamos um nivel, entao vencemos por especificidade sem
 *   !important. Este arquivo tambem carrega DEPOIS de jquery-confirm.css no
 *   HeadTag (linha 95 vs 99), o que garante o desempate por ordem.
 *
 *   Escopo: global e proposital - o modal aparece em todas as telas.
 * --------------------------------------------------------------------------- */

/* Overlay: escurece com o azul-profundo da marca, nao com preto puro. */
.jconfirm .jconfirm-bg {
    background: rgba(5, 30, 58, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* A caixa: BRANCA e sem borda colorida - quem tem cor aqui e o header. */
.jconfirm .jconfirm-box {
    padding: 0;
    background: var(--skin-branco);
    border: 0;
    border-radius: var(--skin-radius-lg);
    box-shadow: 0 18px 48px rgba(5, 30, 58, .28), 0 2px 6px rgba(5, 30, 58, .12);
    font-family: var(--skin-font-base);
    color: var(--skin-text);
    overflow: hidden;
}

/* HEADER - mesma assinatura do topo do FIPLAN: gradiente 165deg + filete
   dourado de 3px (secao ONDA 2 - TOPBAR e cabecalho de subsecao). */
.jconfirm .jconfirm-box div.jconfirm-title-c {
    display: block;
    margin: 0;
    padding: 0 22px;
    /* 46px de altura util + 3px de filete. line-height centraliza o texto sem
       depender de flex, que a lib nao usa neste elemento. */
    height: 49px;
    line-height: 46px;
    background-image: linear-gradient(165deg, var(--skin-azul-deep) 0%, var(--skin-azul-primario) 50%, var(--skin-azul-medio) 100%);
    background-color: var(--skin-azul-primario);
    border-bottom: 3px solid var(--skin-dourado);
    font-family: var(--skin-font-display);
    font-size: 15px;
    color: var(--skin-branco);
}

.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title {
    font-family: var(--skin-font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: inherit;
    color: inherit;
}

.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c {
    margin-right: 9px;
    line-height: inherit;
    color: var(--skin-dourado-claro);
}

/* Corpo da mensagem: branco. */
.jconfirm .jconfirm-box div.jconfirm-content-pane {
    margin-bottom: 0;
    background: var(--skin-branco);
}

.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content {
    padding: 20px 22px;
    font-family: var(--skin-font-base);
    font-size: 14px;
    line-height: 1.6;
    color: var(--skin-cinza-texto-2);
}

/* Barra de acoes: BRANCA, sem faixa cinza nem linha - o corpo do modal segue
   ate embaixo e so o botao tem peso visual. */
.jconfirm .jconfirm-box .jconfirm-buttons {
    padding: 4px 22px 22px 22px;
    background: var(--skin-branco);
    border-top: 0;
    text-align: right;
}

.jconfirm .jconfirm-box .jconfirm-buttons > button {
    margin: 0 0 0 8px;
}

/* Botao base: mesma linguagem dos botoes das telas de pesquisa (secao
   BOTOES DAS TELAS DE PESQUISA). Neutro por padrao. */
.jconfirm .jconfirm-box .jconfirm-buttons button {
    min-width: 96px;
    padding: 8px 18px;
    border-radius: var(--skin-radius-btn);
    border: 1px solid #A9BDD4;
    background: linear-gradient(180deg, #FFFFFF 0%, #F2F6FB 100%);
    color: var(--skin-azul-primario);
    box-shadow: 0 1px 2px rgba(10,61,107,.10), inset 0 1px 0 rgba(255,255,255,.85);
    font-family: var(--skin-font-base);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2px;
    line-height: 1.2;
    text-transform: none;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.jconfirm .jconfirm-box .jconfirm-buttons button:hover {
    background: linear-gradient(180deg, #F2F8FF 0%, #E2EEFB 100%);
    border-color: var(--skin-azul-claro);
    color: var(--skin-azul-primario);
    box-shadow: 0 2px 5px rgba(10,61,107,.16), inset 0 1px 0 rgba(255,255,255,.9);
}

.jconfirm .jconfirm-box .jconfirm-buttons button:active {
    transform: translateY(1px);
}

.jconfirm .jconfirm-box .jconfirm-buttons button:focus-visible {
    outline: none;
    border-color: var(--skin-azul-claro);
    box-shadow: 0 0 0 3px rgba(26,127,219,.18);
}

/* Botao primario (o "ok" de alertaMensagem usa btn-primary; a lib tem
   btn-blue). Preenchido na cor da marca. */
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-primary,
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-blue,
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-default.btn-primary {
    background: linear-gradient(180deg, var(--skin-azul-medio) 0%, var(--skin-azul-primario) 100%);
    border-color: var(--skin-azul-primario);
    color: var(--skin-branco);
    box-shadow: var(--skin-sombra-botao);
}

.jconfirm .jconfirm-box .jconfirm-buttons button.btn-primary:hover,
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-blue:hover,
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-default.btn-primary:hover {
    background: linear-gradient(180deg, var(--skin-azul-claro) 0%, var(--skin-azul-medio) 100%);
    border-color: var(--skin-azul-claro);
    color: var(--skin-branco);
}

/* CONFIRMACAO DE DOIS BOTOES (confirmaMensagem)
   Diferente do alertaMensagem - que passa btnClass:'btn btn-primary' no "ok" -
   o confirmaMensagem monta os botoes em getBotaoConfirmPadrao/CancelarPadrao
   SEM btnClass. Nesse caso a lib aplica 'btn-default' aos dois
   (jquery-confirm.js:645), entao "Sim" e "Nao" saiam identicos e a hierarquia
   se perdia.

   Aqui o PRIMEIRO botao (o "Sim", sempre emitido primeiro em
   confirmaMensagem: buttonsPadrao = [confirmPadrao, cancelPadrao]) vira
   primario e o segundo fica neutro. Usamos :first-child em vez de classe
   porque o markup nao tem como distingui-los - a lib nao marca qual e o
   principal.

   Nao se aplica ao alertaMensagem: la existe um unico botao, que ja tem
   btn-primary e cai na regra acima de qualquer forma. */
.jconfirm .jconfirm-box .jconfirm-buttons > button.btn-default:first-child {
    background: linear-gradient(180deg, var(--skin-azul-medio) 0%, var(--skin-azul-primario) 100%);
    border-color: var(--skin-azul-primario);
    color: var(--skin-branco);
    box-shadow: var(--skin-sombra-botao);
}

.jconfirm .jconfirm-box .jconfirm-buttons > button.btn-default:first-child:hover {
    background: linear-gradient(180deg, var(--skin-azul-claro) 0%, var(--skin-azul-medio) 100%);
    border-color: var(--skin-azul-claro);
    color: var(--skin-branco);
}

/* Botoes semanticos da lib, realinhados aos tokens da skin. */
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-red {
    background: linear-gradient(180deg, #E4564F 0%, var(--skin-danger) 100%);
    border-color: var(--skin-danger);
    color: var(--skin-branco);
}
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-red:hover {
    background: linear-gradient(180deg, #EC6A63 0%, #D0413A 100%);
    color: var(--skin-branco);
}
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-green {
    background: linear-gradient(180deg, #2CA355 0%, var(--skin-ok) 100%);
    border-color: var(--skin-ok);
    color: var(--skin-branco);
}
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-green:hover {
    background: linear-gradient(180deg, #3BBA66 0%, #16803A 100%);
    color: var(--skin-branco);
}

/* Tipo do modal muda a COR DO FILETE sob o header (a lib aplica
   .jconfirm-type-* na box). O alerta padrao nao tem tipo e fica no dourado,
   igual ao topo do sistema; erro/aviso/sucesso trocam o filete e assim se
   identificam sem precisar de outra faixa. */
.jconfirm .jconfirm-box.jconfirm-type-red div.jconfirm-title-c    { border-bottom-color: var(--skin-danger); }
.jconfirm .jconfirm-box.jconfirm-type-orange div.jconfirm-title-c { border-bottom-color: var(--skin-warn); }
.jconfirm .jconfirm-box.jconfirm-type-green div.jconfirm-title-c  { border-bottom-color: var(--skin-ok); }

/* A lib pinta a borda superior da box por tipo (border-top 2px solid). Como
   agora temos a barra de acento no titulo, neutralizamos a borda colorida
   pra nao competir - mas so a COR, mantendo a metrica da lib. */
.jconfirm .jconfirm-box.jconfirm-type-red,
.jconfirm .jconfirm-box.jconfirm-type-orange,
.jconfirm .jconfirm-box.jconfirm-type-green,
.jconfirm .jconfirm-box.jconfirm-type-blue,
.jconfirm .jconfirm-box.jconfirm-type-purple,
.jconfirm .jconfirm-box.jconfirm-type-dark {
    border-top-color: transparent;
}

/* Botao de fechar (X): fica sobre o header escuro, entao precisa ser claro. */
.jconfirm .jconfirm-box div.jconfirm-closeIcon {
    top: 12px;
    right: 14px;
    color: rgba(255,255,255,.75);
    opacity: 1;
    transition: color .15s ease;
}
.jconfirm .jconfirm-box div.jconfirm-closeIcon:hover {
    color: var(--skin-branco);
    opacity: 1;
}

/* ---------------------------------------------------------------------------
 * DIVISORIA DE SUBSECAO (fiplan:subtitulo -> td.subtituloPagina)
 *   Abre uma subsecao dentro de uma tela (ex: "Etapas de Apuracao de
 *   Resguardo" em Detalhar_ESF.jsp). A SubtituloTag emite:
 *     <tr><td colspan=N><table width="98%"><tr>
 *         <td class="subtituloPagina">TITULO</td></tr></table></td></tr>
 *
 *   POR QUE MUDOU: a regra do Fiplan.css (linha 1068) desenhava a linha com um
 *   linear-gradient cuja cor so existia ENTRE 50px e 52px de altura. Como
 *   altura em <td> e sugestao (a celula encolhe pro tamanho do conteudo), em
 *   varias telas a faixa dos 50px nunca era alcancada e a divisoria SUMIA.
 *   Alem disso reservava 70px de altura/line-height, abrindo um vao enorme
 *   acima do texto, e usava #337ab7 (azul do Bootstrap 3), fora da marca.
 *
 *   AGORA: titulo leve, sem fundo - so a barra dourada a esquerda, uma borda
 *   discreta embaixo e sombra suave para dar profundidade sem competir com o
 *   header da grade que costuma vir logo abaixo.
 *
 *   Especificidade: Fiplan.css usa .subtituloPagina (0,1,0); usamos
 *   td.subtituloPagina (0,1,1). A skin ainda carrega depois no HeadTag.
 * --------------------------------------------------------------------------- */
td.subtituloPagina {
    position: relative;
    height: auto;
    /* Altura da caixa: 34px de line-height + 3px do filete dourado = 37px.
       Centralizar pelo line-height evita flex/vertical-align, que se comportam
       de forma irregular em <td>. */
    line-height: 34px;
    /* Padding lateral apenas: a altura vem do line-height. A esquerda abre
       espaco pra barra dourada. */
    padding: 0 14px 0 26px;
    text-align: left;
    font-family: var(--skin-font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--skin-branco);
    /* MESMA LINGUAGEM DO HEADER (topbar): gradiente azul na diagonal + filete
       dourado embaixo + sombra. E a assinatura visual do topo do sistema
       (secao ONDA 2 - TOPBAR, .skin-topbar-page .topbar), reaproveitada aqui
       pra que a abertura de subsecao leia como "cabecalho do FIPLAN". */
    background-image: linear-gradient(165deg, var(--skin-azul-deep) 0%, var(--skin-azul-primario) 50%, var(--skin-azul-medio) 100%);
    background-color: var(--skin-azul-primario);
    border: 0;
    border-bottom: 3px solid var(--skin-dourado);
    /* Raio menor que o do header pra caber na altura de 36px. */
    border-radius: 5px;
    box-shadow: var(--skin-sombra-hero);
}

/* Barra dourada vertical, centralizada na altura da caixa junto com o texto.
   Sobre o gradiente escuro ela precisa ser clara pra ter contraste - por isso
   dourado-claro, o mesmo tom que a topbar usa em detalhe sobre azul.
   Altura fixa (nao top/bottom) porque a resolucao de altura de pseudo-elemento
   dentro de <td> varia entre navegadores; o centro vem de translateY(-50%). */
td.subtituloPagina::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: var(--skin-dourado-claro);
}

/* LARGURA TOTAL + RESPIRO ENTRE SECOES
   A SubtituloTag emite <td colspan=N> > <table width="98%" align="center"> >
   <td class="subtituloPagina">. Os 98% + centralizacao deixavam a faixa mais
   estreita que o conteudo, com sobra branca dos dois lados; width:100% faz o
   cabecalho cobrir toda a area util, alinhado a tabela de baixo.
   A celula ignora margin e borda transparente nao serve aqui (sobrescreveria o
   filete dourado), entao o respiro tambem sai desta tabela envolvente: acima
   separa do bloco anterior, abaixo afasta da grade/campos da subsecao. */
table:has(> tbody > tr > td.subtituloPagina),
table:has(> tr > td.subtituloPagina) {
    width: 100%;
    /* margin-left/right 0 anula o align="center" do HTML, que e atributo de
       apresentacao e continuaria centralizando a tabela mesmo com width:100%. */
    margin: 22px 0 16px 0;
    max-width: none;
}

/* Fallback pra navegador sem :has(): sem ele o seletor acima e ignorado, e a
   subsecao ficaria estreita (98%) e colada nos vizinhos. Aqui a propria celula
   vira block, que ao contrario de <td> aceita margin e largura - o gradiente,
   o filete dourado e o arredondamento ficam preservados. So entra quando
   :has() nao existe; somar os dois caminhos daria espaco em dobro. */
@supports not selector(:has(*)) {
    td.subtituloPagina {
        display: block;
        width: auto;
        margin: 22px 0 16px 0;
    }
}


/* ---------------------------------------------------------------------------
 * ABAS DO MALOTE ELETRONICO (#idMenuMalote)
 *   Novo Malote | Caixa de Entrada | Documentos | Enviados | Excluidos
 *
 *   A MolduraTag emite, quando a tela passa itemMenuMalote:
 *     <table id=idMenuMalote width=70% class=bordaBrancaMalote><tr><td>
 *       <div class="btn-group" style="min-width:650px">
 *         <button id="idNovoMalote" class="btn btn-primary"><i class="fa-..."></i> Novo Malote</button>
 *         ... idCaixaEntrada / idDocumentos / idEnviados / idExcluidos
 *   e marca a aba corrente por JS: $('#idXxx').addClass('active').
 *
 *   ANTES: cinco .btn-primary identicos, todos azuis solidos e colados num
 *   btn-group - liam como cinco botoes de acao, nao como navegacao. A aba
 *   ativa quase nao se distinguia das demais (o .active do Bootstrap 4 so
 *   escurece um pouco o azul).
 *
 *   AGORA: barra de abas. Inativas discretas sobre trilho claro; a ATIVA usa
 *   o gradiente + filete dourado do header do FIPLAN (mesma assinatura da
 *   secao TOPBAR e do cabecalho de subsecao), deixando obvio onde se esta.
 *
 *   Especificidade: Fiplan.css tem #idMenuMalote .btn-group button (1,0,1).
 *   Usamos #idMenuMalote .btn-group > button (1,0,1) declarado DEPOIS - a
 *   skin carrega apos o Fiplan.css no HeadTag, entao vence por ordem. Contra
 *   o .btn-primary do Bootstrap (0,1,0) vencemos por especificidade.
 * --------------------------------------------------------------------------- */

/* A tabela envolvente tem width=70%, height=24 e borda branca no HTML. Aqui
   ela some visualmente (sem borda) e ocupa a largura toda, mantendo a
   centralizacao que a MolduraTag ja dava via align=center. */
table#idMenuMalote {
    width: 100%;
    height: auto;
    margin: 0 auto 4px auto;
    border: 0;
    border-collapse: separate;
}

table#idMenuMalote > tbody > tr > td,
table#idMenuMalote > tr > td {
    padding: 0;
    /* centralizado: o .btn-group e inline-flex, entao text-align:center na
       celula centraliza a barra de abas inteira (era o align=center que a
       MolduraTag ja emitia no <td>). */
    text-align: center;
}

/* O grupo deixa de ser btn-group colado e vira uma barra de abas com trilho.
   O min-width:650px vem inline no HTML e fica - so garantimos o wrap em telas
   estreitas. */
#idMenuMalote .btn-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: var(--skin-cinza-bg);
    border: 1px solid var(--skin-line);
    border-radius: 7px;
    box-shadow: inset 0 1px 2px rgba(18,22,90,.04);
}

/* ABA INATIVA: discreta, sem moldura pesada. */
#idMenuMalote .btn-group > button,
#idMenuMalote .btn-group > button.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    /* o btn-group do Bootstrap zera os cantos dos filhos pra colar os botoes;
       aqui cada aba volta a ter raio proprio */
    border-radius: 5px !important;
    padding: 7px 14px;
    background: transparent;
    background-image: none;
    border: 1px solid transparent;
    box-shadow: none;
    font-family: var(--skin-font-base);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
    line-height: 1.2;
    color: var(--skin-cinza-texto-2);
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

#idMenuMalote .btn-group > button > i {
    font-size: 12.5px;
    color: var(--skin-cinza-texto-3);
    transition: color .15s ease;
}

#idMenuMalote .btn-group > button:hover,
#idMenuMalote .btn-group > button.btn-primary:hover {
    background: var(--skin-branco);
    border-color: var(--skin-cinza-borda);
    color: var(--skin-azul-primario);
}

#idMenuMalote .btn-group > button:hover > i {
    color: var(--skin-azul-medio);
}

#idMenuMalote .btn-group > button:focus,
#idMenuMalote .btn-group > button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(26,127,219,.18);
}

/* ABA ATIVA: a assinatura do header do FIPLAN - gradiente diagonal + filete
   dourado embaixo. Mesma linguagem do cabecalho de subsecao, entao a tela
   inteira fala a mesma lingua. */
#idMenuMalote .btn-group > button.active,
#idMenuMalote .btn-group > button.btn-primary.active {
    background-image: linear-gradient(165deg, var(--skin-azul-deep) 0%, var(--skin-azul-primario) 50%, var(--skin-azul-medio) 100%);
    background-color: var(--skin-azul-primario);
    border: 0;
    border-bottom: 3px solid var(--skin-dourado);
    color: var(--skin-branco);
    box-shadow: 0 2px 6px rgba(10,61,107,.28);
}

#idMenuMalote .btn-group > button.active > i,
#idMenuMalote .btn-group > button.btn-primary.active > i {
    color: var(--skin-dourado-claro);
}

/* A aba ativa nao reage a hover - ja e o destino atual. */
#idMenuMalote .btn-group > button.active:hover,
#idMenuMalote .btn-group > button.btn-primary.active:hover {
    background-image: linear-gradient(165deg, var(--skin-azul-deep) 0%, var(--skin-azul-primario) 50%, var(--skin-azul-medio) 100%);
    color: var(--skin-branco);
}

/* "Novo Malote" e acao, nao navegacao: fica separada das quatro pastas por um
   respiro maior. So quando NAO e a aba corrente - ativa, segue o padrao. */
#idMenuMalote .btn-group > button#idNovoMalote {
    margin-right: 10px;
}

#idMenuMalote .btn-group > button#idNovoMalote:not(.active) {
    color: var(--skin-azul-primario);
    background: var(--skin-branco);
    border-color: var(--skin-cinza-borda);
}

#idMenuMalote .btn-group > button#idNovoMalote:not(.active) > i {
    color: var(--skin-azul-medio);
}

#idMenuMalote .btn-group > button#idNovoMalote:not(.active):hover {
    border-color: var(--skin-azul-claro);
    background: linear-gradient(180deg, #F2F8FF 0%, #E2EEFB 100%);
}

/* Excluidos: o icone de lixeira em vermelho quando a aba nao esta ativa. */
#idMenuMalote .btn-group > button#idExcluidos:not(.active) > i {
    color: var(--skin-danger);
}

@media (max-width: 820px) {
    #idMenuMalote .btn-group {
        min-width: 0 !important;
    }
    #idMenuMalote .btn-group > button {
        padding: 7px 10px;
        font-size: 12.5px;
    }
}


/* ---------------------------------------------------------------------------
 * SELECAO DE CAMPOS (pages/comum/lista/SelecaoCampos.html)
 *   Popup "Selecionar campos" da impressao de listas. Abre pelo botao
 *   correspondente em Resultado.jsp (abrirJanelaSelecionarCampos ->
 *   popUpCenter('comum/lista/SelecaoPopup.html', 620, 640)).
 *
 *   Estrutura: SelecaoPopup.html e um frameset de duas linhas -
 *     frame "areaAplicacao" = SelecaoCampos.html (esta tela)
 *     frame "buttons"       = Botoes.html (Selecionar / Cancelar)
 *   Os botoes do rodape ja viram <button class="btn btn-primary"> no
 *   Botoes.html, entao herdam a skin sozinhos.
 *
 *   ANTES: moldura montada com imagens (Canto_Superior_Esquerdo.jpg,
 *   Linha_Esquerda.gif...), titulo sobre Fundo_Titulo.jpg e a lista de campos
 *   dentro de uma <table border=1> de 200px de altura fixa. Numa janela de
 *   400x450 a lista rolava com poucos itens visiveis.
 *
 *   AGORA: cabecalho na assinatura do sistema (gradiente + filete dourado),
 *   lista em coluna unica com rolagem propria e os checkboxes espacados o
 *   suficiente pra clicar sem erro. A janela abre em 620x640.
 *
 *   O HTML gerado por getOpcoesSelecaoColunas (ListaImpressao.js) e uma
 *   <table class="textoCorpo"> com uma linha por campo - por isso as regras
 *   abaixo miram .selcampos-lista table/tr/td em vez de classes proprias.
 * --------------------------------------------------------------------------- */

body.skin-selecao-campos {
    margin: 0;
    padding: 0;
    background: var(--skin-cinza-bg);
    font-family: var(--skin-font-base);
    color: var(--skin-text);
    -webkit-font-smoothing: antialiased;
}

.skin-selecao-campos .selcampos-wrap {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--skin-branco);
}

/* Cabecalho: mesma assinatura do topo do FIPLAN. */
.skin-selecao-campos .selcampos-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    background-image: linear-gradient(165deg, var(--skin-azul-deep) 0%, var(--skin-azul-primario) 50%, var(--skin-azul-medio) 100%);
    background-color: var(--skin-azul-primario);
    border-bottom: 3px solid var(--skin-dourado);
}

.skin-selecao-campos .selcampos-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--skin-font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--skin-branco);
}

/* Barra dourada a esquerda do titulo, como no cabecalho de subsecao. */
.skin-selecao-campos .selcampos-titulo::before {
    content: "";
    flex: 0 0 auto;
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: var(--skin-dourado-claro);
}

.skin-selecao-campos .selcampos-corpo {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 16px 18px 18px 18px;
}

.skin-selecao-campos .selcampos-ajuda {
    margin: 0 0 10px 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--skin-cinza-texto);
}

/* Lista com rolagem propria: o cabecalho fica fixo e so os campos rolam. */
.skin-selecao-campos .selcampos-lista {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 4px;
    background: var(--skin-branco);
    border: 1px solid var(--skin-cinza-borda);
    border-radius: var(--skin-radius);
    box-shadow: inset 0 1px 2px rgba(18,22,90,.04);
}

/* A tabela vem pronta do getOpcoesSelecaoColunas com class="textoCorpo", cuja
   regra no Fiplan.css (linha 115) define Verdana 8pt + height:15px. A fonte
   fica no <table> e o <td> HERDA dela - por isso e preciso mirar a tabela E o
   td: uma regra so no td nao vence a heranca que ja desceu do pai.
   O tamanho segue o da grade (12px), pra tela nao destoar do resto. */
.skin-selecao-campos .selcampos-lista table,
.skin-selecao-campos .selcampos-lista table.textoCorpo {
    width: 100%;
    height: auto !important;
    border: 0;
    border-collapse: collapse;
    font-family: var(--skin-font-base);
    font-size: 12px;
    color: var(--skin-text);
}

.skin-selecao-campos .selcampos-lista table.textoCorpo td,
.skin-selecao-campos .selcampos-lista td {
    height: auto;
    padding: 5px 8px;
    font-family: var(--skin-font-base);
    font-size: 12px;
    line-height: 1.3;
    color: var(--skin-text);
    border-bottom: 1px solid var(--skin-line);
}

/* O rotulo de cada campo tambem herda do .textoCorpo. */
.skin-selecao-campos .selcampos-lista label {
    font-family: var(--skin-font-base);
    font-size: 12px;
    color: var(--skin-text);
}

.skin-selecao-campos .selcampos-lista tr:last-child td {
    border-bottom: 0;
}

.skin-selecao-campos .selcampos-lista tr:hover td {
    background: var(--skin-azul-soft);
}

/* Checkbox maior e alinhado ao texto - o alvo de clique antigo era pequeno. */
.skin-selecao-campos .selcampos-lista input[type="checkbox"] {
    width: 13px;
    height: 13px;
    margin: 0 7px 0 0;
    vertical-align: -2px;
    accent-color: var(--skin-azul-medio);
    cursor: pointer;
}

.skin-selecao-campos .selcampos-lista label,
.skin-selecao-campos .selcampos-lista td {
    cursor: pointer;
}

/* "Todos/Nenhum" e a primeira linha (getHtmlCheckColunaTodos): vira um
   separador de comando, destacado do resto da lista. */
.skin-selecao-campos .selcampos-lista tr:first-child td,
.skin-selecao-campos .selcampos-lista tr:first-child label,
.skin-selecao-campos .selcampos-lista tr:first-child b {
    background: var(--skin-cinza-bg);
    font-weight: 700;
    color: var(--skin-azul-primario);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .3px;
}

/* Fixa a linha "Todos/Nenhum" no topo enquanto o resto rola. O sticky vai no
   <td>; o background precisa estar nele tambem, senao as linhas passam por
   baixo e aparecem atraves. */
.skin-selecao-campos .selcampos-lista tr:first-child td {
    position: sticky;
    top: -6px;
    z-index: 1;
    border-bottom: 1px solid var(--skin-cinza-borda);
}

.skin-selecao-campos .selcampos-lista tr:first-child:hover td {
    background: var(--skin-cinza-bg);
}


/* ---------------------------------------------------------------------------
 * BOTOES DO POPUP DE SELECAO DE CAMPOS (pages/comum/lista/Botoes.html)
 *   Frame "buttons" do SelecaoPopup.html - os botoes Selecionar / Cancelar.
 *
 *   O <body> recebeu .skin-footer-page + .skin-footer-popup, entao herda o
 *   rodape da ONDA 5 (gradiente azul, filete dourado, botoes brancos) em vez
 *   de ter um desenho paralelo.
 *
 *   POR QUE AINDA PRECISA DESTE BLOCO: este arquivo carrega BOOTSTRAP 3
 *   (bootstrap/css/bootstrap.css), nao o 4 que o Botoes.jsp usa. Duas regras
 *   do legado quebram o botao aqui:
 *     - Fiplan.css: .btn.btn-primary.btn-xs { height: 24px } - especificidade
 *       (0,3,0), vence a altura de 30px do modo popup. O texto de 11.5px
 *       nao cabe em 24px e estoura pra fora do fundo.
 *     - Fiplan.css: #div_botoes .btn-xs { min-width: 80px } combinado com o
 *       padding do BS3 alargava demais o botao.
 *   O changePopupButtonSize() do proprio Botoes.html troca btn-sm por btn-xs
 *   em runtime, entao o botao SEMPRE cai nessas regras.
 *
 *   A cadeia abaixo repete .skin-footer-page.skin-footer-popup (0,2,0) mais
 *   #footer #div_botoes (2,0,0) e as classes do botao - fica acima de
 *   qualquer regra do Fiplan.css/Bootstrap sem depender so de !important.
 * --------------------------------------------------------------------------- */

.skin-footer-page.skin-footer-popup #footer #div_botoes button.btn.btn-primary.btn-xs,
.skin-footer-page.skin-footer-popup #footer #div_botoes button.btn.btn-primary.btn-sm,
.skin-footer-page.skin-footer-popup #footer #div_botoes button.btn.btn-primary {
    /* altura livre: o conteudo define, com padding simetrico. Fixar altura era
       o que fazia o texto vazar. */
    height: auto !important;
    min-height: 28px !important;
    min-width: 90px !important;
    padding: 7px 16px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    border-radius: 8px !important;
    white-space: nowrap;
    box-sizing: border-box;
    /* o #div_botoes zera a fonte pra neutralizar os &nbsp; da montagem;
       aqui o texto do botao volta a ter tamanho. */
    vertical-align: middle;
}

/* O container zera font-size pra matar os &nbsp;; garantimos que o alinhamento
   vertical dos botoes continue centrado mesmo com altura automatica. */
.skin-footer-page.skin-footer-popup #footer #div_botoes {
    align-items: center;
}
/* ---------------------------------------------------------------------------
 * ALERTA DE DOCUMENTO GERADO (pages/comum/Alerta_Documento.jsp)
 *   Popup que confirma a geracao de um documento e oferece PDF / PDF+DOCLAN /
 *   Fechar. Aberto por alertaDocumento() em Funcoes.js (janela 560x280).
 *
 *   A tela usa <fiplan:head>, entao a skin ja chega por ela - diferente do
 *   SelecaoCampos/Botoes.html, que sao HTML solto e precisaram do <link>.
 *
 *   ANTES: duas <table> de layout, o icone do PDF numa celula de 50px e os
 *   botoes num canto, tudo sem respiro. Numa janela de 450x170 os tres botoes
 *   disputavam espaco com a mensagem.
 *
 *   AGORA: cabecalho na assinatura do sistema, mensagem ao lado do icone e as
 *   acoes numa barra propria embaixo.
 *
 *   ESCOPO: #div_botoes tambem existe no rodape do sistema (Botoes.jsp) e no
 *   Botoes.html dos popups. Aqui tudo esta sob .alertadoc-wrap, que so existe
 *   nesta tela - por isso nenhuma regra vaza.
 * --------------------------------------------------------------------------- */

.alertadoc-wrap {
    display: flex;
    flex-direction: column;
    /* min-height (nao height fixa): a janela pode ser redimensionada pelo
       usuario (resizable=1), e o conteudo acompanha. box-sizing evita que
       padding/borda somem aos 100vh e criem rolagem. */
    min-height: 100vh;
    box-sizing: border-box;
    font-family: var(--skin-font-base);
    color: var(--skin-text);
    background: var(--skin-branco);
}

/* Cabecalho: mesma assinatura do topo do FIPLAN. */
.alertadoc-wrap .alertadoc-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    background-image: linear-gradient(165deg, var(--skin-azul-deep) 0%, var(--skin-azul-primario) 50%, var(--skin-azul-medio) 100%);
    background-color: var(--skin-azul-primario);
    border-bottom: 3px solid var(--skin-dourado);
}

.alertadoc-wrap .alertadoc-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--skin-font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--skin-branco);
}

.alertadoc-wrap .alertadoc-titulo::before {
    content: "";
    flex: 0 0 auto;
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: var(--skin-dourado-claro);
}

/* Corpo: icone a esquerda, mensagem a direita, ambos centrados na vertical. */
.alertadoc-wrap .alertadoc-corpo {
    flex: 1 1 auto;
    /* min-height:0 e a peca que permite ao filho de um flex encolher; sem ela
       o corpo empurraria a barra de acoes pra fora da janela. Se a mensagem
       for longa, a rolagem acontece AQUI dentro, nao na janela toda. */
    min-height: 0;
    overflow-y: auto;
    /* Layout horizontal: icone a esquerda, mensagem a direita. Numa janela
       baixa (210px) empilhar os dois nao caberia. */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    text-align: left;
}

.alertadoc-wrap .alertadoc-icone {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--skin-radius);
    background: var(--skin-azul-soft);
    border: 1px solid var(--skin-cinza-borda);
}

.alertadoc-wrap .alertadoc-icone img {
    display: block;
    max-width: 28px;
    height: auto;
}

.alertadoc-wrap .alertadoc-mensagem {
    flex: 1 1 auto;
    min-width: 0;
    /* centraliza o texto na ALTURA do bloco: sem isso a mensagem assentava no
       topo e parecia caida em relacao ao icone. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 13px;
    line-height: 1.55;
    /* texto principal do popup: usa a cor de texto cheia, nao o cinza de
       apoio - com --skin-cinza-texto-2 a mensagem lia como desabilitada. */
    color: var(--skin-text);
    text-align: left;
}

/* A mensagem do SERVIDOR costuma comecar com <br/><br/> (ex:
   "<br/><br/>Documento gerado sob o No ..."), que empurrava o texto pra baixo
   e o desalinhava do icone. Aqui esse par inicial e anulado.

   O texto padrao da JSP (quando nao vem mensagem do servidor) NAO depende
   desta regra: ele usa um <div> por linha, entao a quebra e estrutural e
   nenhuma regra de CSS pode suprimi-la por engano. Foi assim que se resolveu
   o caso em que a quebra do meio sumia junto com as do inicio. */
.alertadoc-wrap .alertadoc-mensagem > br:first-child,
.alertadoc-wrap .alertadoc-mensagem > br:first-child + br {
    display: none;
}

/* Margem herdada do navegador, caso a mensagem venha em <p>. */
.alertadoc-wrap .alertadoc-mensagem > p:first-child { margin-top: 0; }
.alertadoc-wrap .alertadoc-mensagem > p:last-child { margin-bottom: 0; }

/* Linhas do texto padrao (um <div> por linha): respiro discreto entre elas. */
.alertadoc-wrap .alertadoc-mensagem > div + div {
    margin-top: 3px;
}

.alertadoc-wrap .alertadoc-mensagem strong {
    font-weight: 700;
    color: var(--skin-azul-primario);
}

/* Barra de acoes: fundo claro separando do corpo branco. */
.alertadoc-wrap .alertadoc-acoes {
    flex: 0 0 auto;
    padding: 8px 16px;
    background: var(--skin-cinza-bg);
    border-top: 1px solid var(--skin-line);
}

.alertadoc-wrap .alertadoc-acoes #div_botoes {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

/* Os botoes vem do script no fim da JSP como <button class="btn btn-primary
   btn-sm">. Aqui recebem a linguagem da skin; o ultimo (Fechar) fica neutro,
   os de acao ficam preenchidos. */
.alertadoc-wrap .alertadoc-acoes #div_botoes button.btn,
.alertadoc-wrap .alertadoc-acoes #div_botoes button.btn-primary {
    margin: 0;
    padding: 5px 12px;
    background: linear-gradient(180deg, var(--skin-azul-medio) 0%, var(--skin-azul-primario) 100%);
    background-image: linear-gradient(180deg, var(--skin-azul-medio) 0%, var(--skin-azul-primario) 100%);
    border: 1px solid var(--skin-azul-primario);
    border-radius: var(--skin-radius-btn);
    color: var(--skin-branco);
    box-shadow: 0 2px 6px rgba(10,61,107,.22);
    font-family: var(--skin-font-base);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    text-shadow: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.alertadoc-wrap .alertadoc-acoes #div_botoes button.btn-primary:hover {
    background-image: linear-gradient(180deg, var(--skin-azul-claro) 0%, var(--skin-azul-medio) 100%);
    border-color: var(--skin-azul-claro);
    color: var(--skin-branco);
    box-shadow: 0 3px 9px rgba(10,61,107,.30);
}

.alertadoc-wrap .alertadoc-acoes #div_botoes button.btn-primary:active {
    transform: translateY(1px);
    box-shadow: none;
}

.alertadoc-wrap .alertadoc-acoes #div_botoes button.btn-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(26,127,219,.30);
}

/* "Fechar" e sempre o ultimo botao montado pelo script: sai neutro pra nao
   competir com as acoes de abrir o documento. */
.alertadoc-wrap .alertadoc-acoes #div_botoes button.btn-primary:last-child {
    background: var(--skin-branco);
    background-image: none;
    border-color: var(--skin-cinza-borda);
    color: var(--skin-cinza-texto-2);
    box-shadow: none;
}

.alertadoc-wrap .alertadoc-acoes #div_botoes button.btn-primary:last-child:hover {
    background: var(--skin-cinza-bg-2);
    background-image: none;
    border-color: var(--skin-cinza-texto-3);
    color: var(--skin-azul-primario);
}


/* ---------------------------------------------------------------------------
 * MENU LATERAL - ROLAGEM HORIZONTAL (Menu.jsp / frame "menu")
 *   Complementa a ONDA 3. O frame tem 300px fixos e alguns itens do FIPLAN tem
 *   nome longo o bastante pra nao caber, sobretudo nos niveis mais profundos.
 *
 *   ANTES: #menu-lateral tinha overflow-x: hidden, entao o texto que passava
 *   dos 300px era cortado, sem forma de ler o resto.
 *
 *   AGORA: barra de rolagem horizontal simples. Nao ha reposicionamento
 *   automatico - o usuario rola quando precisa. (Houve uma versao que movia o
 *   scroll sozinha pro ramo aberto; foi retirada porque reduzir a fonte e os
 *   recuos ja resolveu o problema de espaco, e o movimento atrapalhava quem
 *   navegava com o mouse.)
 *
 *   O QUE FAZ O CONTEUDO "VAZAR" (a parte que custou a acertar):
 *   1. #menu-lateral e filho de .skin-sidebar-shell, que e flex column
 *      (.menuBar usa display:contents e some do layout). Em flex, min-width:auto
 *      impede o item de ser menor que o conteudo: o container acompanhava o
 *      conteudo em vez de recorta-lo, e nunca sobrava faixa rolavel.
 *      min-width: 0 devolve o recorte.
 *   2. #jstree e um <div> block: esticado pelo pai, ignora max-content. Vira
 *      inline-block pra dimensionar pelo conteudo.
 *   3. O UL raiz e .jstree-container-ul (tema default), nao .jstree-children.
 *
 *   !important porque o tema do jstree e injetado em runtime pelo proprio
 *   jstree ("themes": {"url": true} no Menu.jsp), entrando no DOM DEPOIS desta
 *   folha - sem isso ele venceria por ordem.
 * --------------------------------------------------------------------------- */
.skin-sidebar-page #menu-lateral {
    /* auto (nao scroll): a barra so aparece quando algum item passa dos 300px */
    overflow-x: auto !important;
    /* CADEIA DE FLEX (a causa real de o scroll ficar preso):
       .menuBar usa display:contents, entao o #menu-lateral e filho direto do
       .skin-sidebar-shell, que e flex column. Em flex column o item e esticado
       na largura e, por padrao, min-width:auto impede que ele SEJA menor que o
       proprio conteudo - o container acompanha o conteudo em vez de recortar,
       e nunca sobra faixa rolavel. min-width:0 devolve o recorte, que e o que
       faz o overflow existir. */
    min-width: 0;
    /* o padding lateral do col-xs-12 (Bootstrap) entrava na conta da largura
       interna e comia a faixa; box-sizing mantem os 300px como medida final. */
    box-sizing: border-box;
}

/* Barra horizontal com a mesma linguagem da vertical (que ja tem 8px). */
.skin-sidebar-page #menu-lateral::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* O container da arvore dimensiona pelo CONTEUDO, nao pelo pai. inline-block e
   o que permite isso - com display:block ele seria esticado ate a largura do
   #menu-lateral e nunca haveria o que rolar.
   min-width: 100% garante que, quando tudo couber, a arvore ainda ocupe a
   largura toda (senao o hover/selecao ficaria estreito). */
.skin-sidebar-page #menu-lateral > #jstree,
.skin-sidebar-page #menu-lateral > .jstree {
    display: inline-block !important;
    width: -moz-max-content !important;
    width: max-content !important;
    min-width: 100%;
    vertical-align: top;
    float: none !important;
}

/* Os ULs acompanham a largura do conteudo. Sem min-width aqui: com o padding
   do #menu-lateral, 100% igualaria a largura interna e mataria o overflow. */
.skin-sidebar-page .jstree-container-ul,
.skin-sidebar-page ul.jstree-container-ul,
.skin-sidebar-page .jstree-default ul.jstree-children {
    width: -moz-max-content !important;
    width: max-content !important;
    min-width: 0 !important;
}

/* O texto do item nao quebra nem vira reticencias - a rolagem cuida do resto. */
.skin-sidebar-page .jstree-default .jstree-anchor {
    white-space: nowrap;
    text-overflow: clip;
    overflow: visible;
}

/* Com o conteudo mais largo que o frame, o realce da linha selecionada precisa
   acompanhar - senao ele para no meio do caminho ao rolar. */
.skin-sidebar-page .jstree-default > .jstree-wholerow-ul .jstree-wholerow {
    width: 100%;
    min-width: 100%;
}

/* ---------------------------------------------------------------------------
 * ONDA 5 - FUNDO DA TOPBAR (15/09/2026; refeito 27/10/2026)
 * ---------------------------------------------------------------------------
 * Hoje: so a faixa dourada da tela Sobre (RM 70864) como filete da base.
 * Ate 27/10 eram predios em volume isometrico + cometa dourado na diagonal.
 *
 * Por que como background e nao <svg> no HTML: o Topo.jsp e Windows-1252 e
 * corrompe inteiro se editado como UTF-8. Aqui o desenho vive so no CSS, que
 * e UTF-8 limpo - a JSP nao precisa ser tocada.
 *
 * O cometa SUBSTITUI o border-bottom dourado de 3px: quem carrega o dourado
 * no topbar agora e o desenho.
 *
 * Estudo e racional do desenho:
 *   docs/SUSTENTACAO/REDESIGN/NOVIDADES/previews/skyline-3d.html
 *   docs/SUSTENTACAO/REDESIGN/NOVIDADES/previews/header-cometa.html
 * ------------------------------------------------------------------------- */
/* TOPBAR-FAIXA:INICIO (27/10, pedido do Diego): faixa dourada da tela Sobre em toda a base da barra +
   luz passando por ela. Gerado por docs/FRENTES/RM39347_REDESIGN_SUGESTOES/ferramentas/topbar_faixa.py. */
.skin-topbar-page .topbar {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%2020%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22f%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%220%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23C9962F%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23E8C96A%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23D4A843%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M0%2013%20H1000%20V20%20H0%20Z%22%20fill%3D%22url%28%23f%29%22%2F%3E%3C%2Fsvg%3E"),
        linear-gradient(165deg, var(--skin-azul-deep) 0%, var(--skin-azul-primario) 50%, var(--skin-azul-medio) 100%);
    background-size: 100% 14px, 100% 100%;
    background-position: 0 100%, 0 0;
    background-repeat: no-repeat, no-repeat;
    border-bottom: 0;
}
/* As luzes: dois fundos claros estreitos, um indo e outro voltando, recortados no formato da faixa. */
.skin-topbar-page .topbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 14px;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 248, 220, 0) 0%, rgba(255, 248, 220, .95) 50%, rgba(255, 248, 220, 0) 100%) no-repeat,
        linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, 0) 100%) no-repeat;
    background-size: 220px 100%, 160px 100%;
    background-position: -240px 0, calc(100% + 240px) 0;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%2020%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2013%20H1000%20V20%20H0%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") 0 0 / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%2020%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2013%20H1000%20V20%20H0%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") 0 0 / 100% 100% no-repeat;
    animation: topbarLuz 5s ease-in-out infinite;
}
/* 0-30%: a 1a luz vai da esquerda para a direita; 50-80%: a 2a volta da direita para a esquerda. */
@keyframes topbarLuz {
    0%        { background-position: -240px 0, calc(100% + 240px) 0; }
    30%, 50%  { background-position: calc(100% + 240px) 0, calc(100% + 240px) 0; }
    80%, 100% { background-position: calc(100% + 240px) 0, -240px 0; }
}
@media (prefers-reduced-motion: reduce) {
    .skin-topbar-page .topbar::after { animation: none; display: none; }
}
/* TOPBAR-FAIXA:FIM */

/* O conteudo da topbar sobe acima do desenho. */
.skin-topbar-page .topbar > * { position: relative; z-index: 1; }

/* Impressao: o desenho e decorativo, sai. Volta o filete dourado. */
@media print {
    .skin-topbar-page .topbar {
        background-image: none;
        background: var(--skin-azul-primario);
        border-bottom: 3px solid var(--skin-dourado);
    }
}

/* ===========================================================================
 * ONDA 7 — BOTÕES DE IMAGEM (fiplan:img → botão com texto)   25/09/2026
 * ===========================================================================
 * A ImagemTag troca o GIF-palavra de imagens/botoes/*.gif por
 *   <button class="btn btn-link btn-xs btn-img-tag skin-btn-img op-<op> [skin-btn-img--off]"
 *           data-src="imagens/botoes/Remover_Desativado.gif" data-base="Remover">
 *     <i class="skin-btn-img__ic fa-solid fa-trash-can"></i><span class="skin-btn-img__txt">Remover</span>
 *   </button>
 * O ramo label (fiplan:img label="...") sai com a mesma cara. 1.195 usos em 311 telas,
 * NENHUMA JSP editada. O JS legado que troca .src continua funcionando por causa do
 * shim pages/scripts/skin-redesign-botoes.js (carregado pelo HeadTag).
 *
 * Esses botoes vivem NO MEIO de formularios, ao lado de campos e dentro de celulas
 * de tabela: por isso sao compactos (12px, padding 2px 8px) e NAO podem crescer a
 * altura da linha (line-height 1.2, vertical-align middle).
 *
 * --off = GIF _Desativado. So visual (opacidade), sem `disabled`: o JS legado e
 * quem decide o clique, e nas abas de monitoramento/RAG o _Desativado marca a aba
 * CORRENTE. Se em alguma tela isso ficar estranho, e ajuste de CSS, nao de Java.
 *
 * Cores por operacao reaproveitam os tokens --skin-op-* da secao 1.
 *
 * Reversao (sem build): -Dfiplan.botoes.visualNovo=false na JVM -> a taglib volta
 * a emitir <img> e nada desta secao e usado.
 * ------------------------------------------------------------------------- */
.skin-btn-img,
.skin-btn-img.btn,
.skin-btn-img.btn-link,
.skin-btn-img.btn-img-tag {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    margin: 0;                       /* hspace/vspace da JSP entram como style inline */
    /* 25/09/2026: compacto. Estes botoes vivem DENTRO de celula de grade; no
       tamanho anterior (12px / 2px 8px) estouravam a altura da linha. */
    padding: 2px 6px;
    font-family: var(--skin-font-base, inherit);
    font-size: 12px;                 /* 25/09: +1px, legibilidade */
    font-weight: 600;
    line-height: 1.2;
    height: auto;
    min-height: 0;
    vertical-align: middle;
    white-space: nowrap;
    color: var(--skin-op-ler);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0;                /* 25/09: sem pilula (opcao E) */
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease,
                box-shadow .12s ease;
}
.skin-btn-img:hover,
.skin-btn-img.btn:hover,
.skin-btn-img.btn-link:hover,
.skin-btn-img:focus,
.skin-btn-img.btn:focus,
.skin-btn-img.btn-link:focus,
.skin-btn-img:active,
.skin-btn-img.btn:active,
.skin-btn-img.btn-link:active,
.skin-btn-img.btn-link:focus:active {
    /* 25/09/2026 - opcao E, escolhida pelo Diego entre 5 variantes.
       Era uma pilula (raio 9px + fundo 10% + borda 25%): lida como "redonda e
       artificial" no meio de formulario e de grade. Agora uma barra de 2px na
       cor da operacao entra pela esquerda, com um fundo de 6% quase imperceptivel
       - mesmo gesto do menu lateral, sem cercar o texto e sem mudar a altura
       (box-shadow inset nao ocupa espaco no layout). */
    /* 25/09 (3a rodada): NAO usar `color: inherit` aqui. A barra e o fundo sao
       pintados com currentColor; herdando a cor do texto da pagina, os dois
       saiam CINZA em vez da cor da operacao (medido no Chrome: um botao
       op-excluir dava barra rgb(33,37,41) no lugar de vermelho). Mantendo a
       cor propria, cada operacao realca na sua cor -- que e o que da o
       contraste pedido. */
    text-decoration: none;
    /* 25/09 (2a rodada): o realce estava fraco para o publico da casa.
       Fundo de 6% -> 14% e barra de 2px -> 3px. */
    background: rgba(10, 61, 107, .12);            /* fallback p/ navegador sem color-mix */
    background: color-mix(in srgb, currentColor 14%, transparent);
    border-color: transparent;
    outline: none;
    /* border-radius AQUI, no estado hover: o box-shadow inset segue o raio do
       elemento, e sem isto o `.btn` do bootstrap (raio .25rem) vencia NESTE
       estado e curvava as pontas da barra -- o "risco redondo a esquerda". */
    border-radius: 0;
    box-shadow: inset 3px 0 0 0 currentColor;
    /* NAO se mexe em font-weight aqui: negrito muda a largura do texto e o
       botao "pula" ao passar o mouse. O reforco vem do fundo (14%) e da
       barra de 3px, que nao deslocam nada. */
}
/* 25/09 (4a rodada) - A BORDA REDONDA ERA O HALO DE FOCO DO BOOTSTRAP.
   Medido no Chrome: `.btn:focus` (bootstrap.css:2546) aplica
       box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25)
   -- um halo de 3,2px ao redor do botao INTEIRO. Halo de box-shadow
   acompanha o contorno da caixa e, mesmo com border-radius 0, era lido
   como "borda redonda a esquerda": ele aparece ao CLICAR (o botao ganha
   foco) e continua depois que o mouse sai. Alem disso ele sobrescrevia o
   box-shadow da barra da opcao E.
   Corrigido: no foco por MOUSE o halo sai e fica so a barra; a indicacao
   de foco por TECLADO e preservada no :focus-visible abaixo (acessibilidade
   -- quem navega por Tab continua vendo onde esta). */
.skin-btn-img:focus,
.skin-btn-img.btn:focus,
.skin-btn-img.btn.focus,
.skin-btn-img.btn-link:focus,
.skin-btn-img.btn-img-tag:focus {
    /* so a barra; sem o halo externo. currentColor aqui ja e a cor da
       operacao, garantida pelas regras de cor por op-* logo abaixo. */
    box-shadow: inset 3px 0 0 0 currentColor;
    outline: 0;
}
/* 25/09 (5a rodada) - o "redondo" que sobrava era ESTA moldura.
   Visto em captura de tela (nao so em numero): apos o CLIQUE o botao fica em
   foco e o Chrome trata como :focus-visible, desenhando um retangulo azul de
   2px em volta do botao INTEIRO, que permanece depois de o mouse sair. Era
   isso que se lia como "a borda do hover continua redonda" -- a moldura, nao
   a barra (a barra ja estava reta e vermelha).
   Agora o foco reusa a MESMA barra do hover, so que mais grossa (4px): quem
   navega por teclado continua vendo onde esta, sem moldura em volta. */
.skin-btn-img:focus-visible,
.skin-btn-img.btn:focus-visible,
.skin-btn-img.btn-img-tag:focus-visible {
    outline: none;
    border-radius: 0;
    box-shadow: inset 4px 0 0 0 currentColor;
}
.skin-btn-img__ic {
    font-size: 13px;                 /* 25/09: +2px; glifo le pior que letra */
    width: 1.1em;
    text-align: center;
    flex: none;
    line-height: 1;
}
.skin-btn-img__txt {
    line-height: 1.2;
}

/* Estado "desativado" (GIF _Desativado): so visual, sem bloquear evento. */
/* ---------------------------------------------------------------------------
 * 25/09/2026 - a coluna de botoes ao lado da grade comeca alto demais.
 *
 * Os botoes nao estao DENTRO da grade: sao um <td> irmao do <td> da grade.
 * Dentro do <td> da grade, acima dela, ha a barra de navegacao de paginas
 * ("Pagina 1 de 1 | Visualizando registro...", com << < > >>). A coluna dos
 * botoes nao tem esse bloco, entao comeca mais alto e a pilha toda desce
 * alem do rodape da grade -- o que se via como "estoura a altura da grid".
 *
 * Altura do bloco de navegacao, medida nos proprios CSS:
 *     3px  margin-top da <table> de navegacao (style inline)
 *  + 24px  botao .btn-xs  (Fiplan.css:615 min-height:24px)
 *  +  3px  margin-bottom (style inline)
 *  = 30px
 *
 * O <td> ja traz padding-top:15px inline na JSP; somando 30px o primeiro
 * botao alinha com a primeira linha de dados da grade. Seletor casa so esta
 * coluna (td de 10% com padding-top:15px), sem editar JSP.
 * ------------------------------------------------------------------------- */
td[style*="padding-top:15px"] > .skin-btn-img:first-of-type,
td[style*="padding-top: 15px"] > .skin-btn-img:first-of-type {
    margin-top: 30px;                /* altura da barra de navegacao da grade */
}

/* ---------------------------------------------------------------------------
 * 25/09/2026 - botao na coluna ao lado da GRADE (relato do Diego no Malote).
 *
 * Tres correcoes, todas por ESPECIFICIDADE e nao por ordem de arquivo. O bloco
 * acima usa seletores (0,2,0) que so ganham de `.btn-xs` (0,1,0) porque o
 * HeadTag carrega skin-redesign.css por ultimo. Isso e fragil: qualquer
 * reordenacao traz de volta o botao redondo e estourando a linha. Abaixo as
 * mesmas propriedades sao reafirmadas em (0,3,0), vencendo sempre.
 *
 *  1. ALTURA: Fiplan.css:615 poe `.btn-xs { min-height:24px; min-width:32px }`.
 *     E o que estoura a altura da linha da grade. Zerado aqui (so p/ estes).
 *  2. CANTOS: bootstrap `.btn` poe border-radius .25rem. Zerado aqui.
 *  3. RESPIRO: afasta da borda da grade e separa um do outro na vertical.
 * ------------------------------------------------------------------------- */
.skin-btn-img.btn-xs,
.skin-btn-img.btn.btn-xs,
.skin-btn-img.btn-link.btn-xs,
.skin-btn-img.btn.btn-link {
    min-height: 0;                   /* mata o min-height:24px do .btn-xs */
    min-width: 0;                    /* mata o min-width:32px  do .btn-xs */
    height: auto;
    border-radius: 0;                /* cantos vivos: sem pilula */
    padding: 2px 6px;
    font-size: 12px;                 /* 25/09: +1px, legibilidade */
    line-height: 1.2;
    margin: 1px 0 1px 6px;           /* 6px afastando da grade; 1px entre eles */
}
/* o raio tambem no hover/focus/active desta especificidade, senao a barra
   do realce volta a sair curva (ver comentario no bloco de hover). */
.skin-btn-img.btn-xs:hover,
.skin-btn-img.btn.btn-xs:hover,
.skin-btn-img.btn-link.btn-xs:hover,
.skin-btn-img.btn.btn-link:hover,
.skin-btn-img.btn-xs:focus,
.skin-btn-img.btn.btn-xs:focus,
.skin-btn-img.btn-link.btn-xs:focus,
.skin-btn-img.btn.btn-link:focus,
.skin-btn-img.btn.btn-link:active,
.skin-btn-img.btn.btn-link:focus:active {
    border-radius: 0;
    box-shadow: inset 3px 0 0 0 currentColor;
}
/* 25/09 (3a rodada) - A COR NO HOVER.
   Medido no Chrome resolvendo a cascata: no :hover quem vencia `color` era
   `.btn-img-tag:hover` do Fiplan.css:1118, que forca #003366 (azul escuro).
   Como a barra e o fundo sao pintados com currentColor, TODO o realce saia
   azul-acinzentado, perdendo a cor da operacao -- era isso que fazia o
   hover parecer fraco e "sem cor". Aqui a cor propria de cada operacao e
   reafirmada no estado hover, com especificidade que vence aquela regra. */
.skin-btn-img.btn-img-tag.op-incluir:hover,
.skin-btn-img.btn-img-tag.op-incluir:focus {  color: var(--skin-op-criar);
    box-shadow: inset 3px 0 0 0 var(--skin-op-criar); }
.skin-btn-img.btn-img-tag.op-confirmar:hover,
.skin-btn-img.btn-img-tag.op-confirmar:focus,
.skin-btn-img.btn-img-tag.op-aprovar:hover,
.skin-btn-img.btn-img-tag.op-aprovar:focus { color: var(--skin-op-criar);
    box-shadow: inset 3px 0 0 0 var(--skin-op-criar); }
.skin-btn-img.btn-img-tag.op-consultar:hover,
.skin-btn-img.btn-img-tag.op-consultar:focus,
.skin-btn-img.btn-img-tag.op-detalhar:hover,
.skin-btn-img.btn-img-tag.op-detalhar:focus { color: var(--skin-op-ler);
    box-shadow: inset 3px 0 0 0 var(--skin-op-ler); }
.skin-btn-img.btn-img-tag.op-alterar:hover,
.skin-btn-img.btn-img-tag.op-alterar:focus,
.skin-btn-img.btn-img-tag.op-ajustar:hover,
.skin-btn-img.btn-img-tag.op-ajustar:focus { color: var(--skin-op-alterar);
    box-shadow: inset 3px 0 0 0 var(--skin-op-alterar); }
.skin-btn-img.btn-img-tag.op-excluir:hover,
.skin-btn-img.btn-img-tag.op-excluir:focus,
.skin-btn-img.btn-img-tag.op-cancelar:hover,
.skin-btn-img.btn-img-tag.op-cancelar:focus { color: var(--skin-op-remover);
    box-shadow: inset 3px 0 0 0 var(--skin-op-remover); }
.skin-btn-img.btn-img-tag.op-estornar:hover,
.skin-btn-img.btn-img-tag.op-estornar:focus,
.skin-btn-img.btn-img-tag.op-retransmitir:hover,
.skin-btn-img.btn-img-tag.op-retransmitir:focus { color: var(--skin-op-especial);
    box-shadow: inset 3px 0 0 0 var(--skin-op-especial); }
.skin-btn-img.btn-img-tag.op-validar:hover,
.skin-btn-img.btn-img-tag.op-validar:focus { color: var(--skin-op-conciliar);
    box-shadow: inset 3px 0 0 0 var(--skin-op-conciliar); }
.skin-btn-img.btn-img-tag.op-neutro:hover,
.skin-btn-img.btn-img-tag.op-neutro:focus,
.skin-btn-img.btn-img-tag.op-limpar:hover,
.skin-btn-img.btn-img-tag.op-limpar:focus { color: var(--skin-op-neutro);
    box-shadow: inset 3px 0 0 0 var(--skin-op-neutro); }
/* O icone acompanha o corpo: sem isso o .btn-xs .fa-* desloca 2px p/ baixo
   (Fiplan.css:620) e o botao cresce de novo. */
.skin-btn-img.btn-xs .skin-btn-img__ic,
.skin-btn-img .skin-btn-img__ic {
    top: 0;
    font-size: 13px;                 /* 25/09: +2px, legibilidade */
    line-height: 1;
    vertical-align: middle;
}

.skin-btn-img--off,
.skin-btn-img--off:hover,
.skin-btn-img--off:focus,
.skin-btn-img.btn.skin-btn-img--off:hover {
    opacity: .45;
    cursor: default;
    background: transparent;
    border-color: transparent;
    box-shadow: none;                /* 25/09: sem a barra da opcao E quando off */
}
/* Quando o legado poe disabled de verdade (ramo label antigo, Funcoes.js em <button> comum) */
.skin-btn-img[disabled],
.skin-btn-img.btn-img-tag[disabled]:hover,
.skin-btn-img.btn-img-tag[disabled]:focus {
    opacity: .45;
    cursor: default;
    color: inherit;
    text-decoration: none;
}

/* Cor por operacao - mesmos tokens da sidebar (ONDA 3). Aqui "detalhar" e
   "relatorio" sao azuis (ler) e nao neutros: um botao "Detalhes" cinza no meio do
   formulario parece desabilitado. */
.skin-btn-img.op-incluir,
.skin-btn-img.op-aprovar,
.skin-btn-img.op-confirmar,
.skin-btn-img.op-liberar,
.skin-btn-img.op-autorizar,
.skin-btn-img.op-executar      { color: var(--skin-op-criar); }
.skin-btn-img.op-consultar,
.skin-btn-img.op-detalhar,
.skin-btn-img.op-relatorio,
.skin-btn-img.op-carregar,
.skin-btn-img.op-analisar,
.skin-btn-img.op-definir,
.skin-btn-img.op-justificar,
.skin-btn-img.op-retransmitir,
.skin-btn-img.op-agrupar,
.skin-btn-img.op-processar,
.skin-btn-img.op-salvar,
.skin-btn-img.op-importar,
.skin-btn-img.op-registrar,
.skin-btn-img.op-atualizar,
.skin-btn-img.op-solicitar,
.skin-btn-img.op-replanejar    { color: var(--skin-op-ler); }
.skin-btn-img.op-alterar,
.skin-btn-img.op-ajustar,
.skin-btn-img.op-retificar,
.skin-btn-img.op-desmembrar    { color: var(--skin-op-alterar); }
.skin-btn-img.op-excluir,
.skin-btn-img.op-cancelar,
.skin-btn-img.op-bloquear,
.skin-btn-img.op-invalidar     { color: var(--skin-op-remover); }
.skin-btn-img.op-validar,
.skin-btn-img.op-regularizar   { color: var(--skin-op-conciliar); }
.skin-btn-img.op-estornar      { color: var(--skin-op-especial); }
.skin-btn-img.op-neutro,
.skin-btn-img.op-limpar,
.skin-btn-img.op-generico,
.skin-btn-img.op-inativar,
.skin-btn-img.op-arquivar      { color: var(--skin-op-neutro); }

/* Compatibilidade com a classe legada que o JS reaplica (className = 'imgLink'):
   o imgLink do Fiplan.css so define cursor; nao briga com nada acima. */
.skin-btn-img.imgLink { cursor: pointer; }
.skin-btn-img--off.imgLink { cursor: default; }

/* Impressao: o botao vira texto simples, sem borda. */
@media print {
    .skin-btn-img { border: 0; background: none; color: #000; }
    .skin-btn-img--off { opacity: .5; }
}

/* ============================================================================
 * ONDA 8 — CALENDÁRIO (datepicker do jQuery UI)            25/09/2026
 * ----------------------------------------------------------------------------
 * O botão do calendário já tinha sido redesenhado (ícone Font Awesome, na
 * CalendarioTag). O QUE ABRE ao clicar, não: era o visual cru do jquery-ui.css,
 * de 2010 — cada dia numa caixinha cinza com borda, amarelo-mostarda no dia de
 * hoje, setas em círculo preto, cantos e fonte destoando do resto do sistema.
 *
 * O idioma JÁ estava certo (HeadTag:133 carrega datepicker-pt-BR.js). Aqui é
 * só estética.
 *
 * O painel é filho do <body> (nunca de #conteudoMoldura), então basta
 * especificidade de classe — mas o jquery-ui.css usa .ui-state-* em toda parte
 * e vem ANTES na cascata; por isso várias regras aqui precisam repetir a
 * combinação .ui-datepicker .ui-state-default para vencer.
 * ========================================================================== */

.ui-datepicker {
    width: auto;
    min-width: 222px;
    padding: 6px;
    border: 1px solid var(--skin-cinza-borda);
    border-radius: var(--skin-radius);
    background: var(--skin-branco);
    box-shadow: var(--skin-sombra-md);
    font-family: var(--skin-font-base);
    font-size: 11px;
    color: var(--skin-text);
}

/* Cabecalho: faixa azul do sistema, sem gradiente nem textura do tema antigo */
.ui-datepicker .ui-datepicker-header {
    padding: 4px 2px 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--skin-text);
    font-weight: 600;
}
.ui-datepicker .ui-datepicker-title {
    margin: 0 26px;
    line-height: 19px;
    font-family: var(--skin-font-display);
    font-size: 12px;
    font-weight: 700;
    color: var(--skin-azul-primario);
}

/* Setas: sem circulo preto; alvo de clique confortavel */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 4px;
    width: 19px;
    height: 19px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev { left: 4px; }
.ui-datepicker .ui-datepicker-next { right: 4px; }
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
    top: 4px;
    border: 0;
    background: var(--skin-azul-soft);
}
.ui-datepicker .ui-datepicker-prev-hover { left: 4px; }
.ui-datepicker .ui-datepicker-next-hover { right: 4px; }
/* o tema desenha a seta com sprite; troca por glifo de texto */
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    margin: 0;
    top: 0; left: 0;
    width: 19px;
    height: 19px;
    background-image: none;
    text-indent: 0;
    font-size: 0;          /* engole o rotulo 'Ant'/'Prox' do tema */
    overflow: hidden;
    line-height: 19px;
    text-align: center;
    color: var(--skin-azul-medio);
}
.ui-datepicker .ui-datepicker-prev span::before,
.ui-datepicker .ui-datepicker-next span::before {
    font-size: 13px;
    line-height: 19px;
}
.ui-datepicker .ui-datepicker-prev span::before { content: "‹"; }
.ui-datepicker .ui-datepicker-next span::before { content: "›"; }

/* Selects de mes/ano (quando changeMonth/changeYear estao ligados) */
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    padding: 2px 4px;
    border: 1px solid var(--skin-cinza-borda);
    border-radius: 6px;
    background: var(--skin-branco);
    font-family: var(--skin-font-base);
    font-size: 11px;
    color: var(--skin-text);
}

/* Grade: sem bordas entre os dias — respiro no lugar de caixinhas */
.ui-datepicker table {
    margin: 0;
    border-collapse: separate;
    border-spacing: 1px;
    font-size: 11px;
}
.ui-datepicker th {
    padding: 3px 0;
    border: 0;
    font-weight: 600;
    font-size: 10px;
    color: var(--skin-cinza-texto);
    text-transform: uppercase;
}
.ui-datepicker td {
    padding: 0;
    border: 0;
}

/* O dia em si. O tema pinta .ui-state-default com borda + fundo cinza. */
.ui-datepicker td a.ui-state-default,
.ui-datepicker td span.ui-state-default {
    display: block;
    padding: 4px 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--skin-text);
    font-weight: 400;
    text-align: center;
    text-decoration: none;
}
.ui-datepicker td a.ui-state-default:hover,
.ui-datepicker td a.ui-state-hover {
    background: var(--skin-azul-soft);
    color: var(--skin-azul-primario);
    font-weight: 600;
}

/* Hoje: era amarelo-mostarda. Vira o azul do sistema, so no contorno. */
.ui-datepicker td.ui-datepicker-today a.ui-state-default,
.ui-datepicker td.ui-datepicker-today a.ui-state-highlight {
    background: var(--skin-branco);
    box-shadow: inset 0 0 0 1px var(--skin-azul-claro);
    color: var(--skin-azul-primario);
    font-weight: 700;
}

/* Dia selecionado: preenchido — le mais forte que "hoje" */
.ui-datepicker td a.ui-state-active,
.ui-datepicker td.ui-datepicker-current-day a.ui-state-default {
    background: var(--skin-azul-medio);
    box-shadow: none;
    color: var(--skin-branco);
    font-weight: 700;
}

/* Dias do mes vizinho e desabilitados: discretos, mas legiveis */
.ui-datepicker td.ui-datepicker-other-month a.ui-state-default,
.ui-datepicker td.ui-datepicker-other-month span.ui-state-default {
    color: var(--skin-cinza-texto-3);
}
.ui-datepicker td.ui-state-disabled,
.ui-datepicker td.ui-state-disabled span.ui-state-default {
    opacity: 1;
    color: #B6BCCB;
}
/* fim de semana com um tom a menos, sem virar "desabilitado" */
.ui-datepicker td.ui-datepicker-week-end a.ui-state-default {
    color: var(--skin-cinza-texto-2);
}

/* Rodape (Hoje / Fechar) */
.ui-datepicker .ui-datepicker-buttonpane {
    margin: 5px -6px -6px;
    padding: 6px;
    border-top: 1px solid var(--skin-line);
    background: var(--skin-cinza-bg);
    border-radius: 0 0 var(--skin-radius) var(--skin-radius);
}
.ui-datepicker .ui-datepicker-buttonpane button {
    padding: 2px 10px;
    border: 1px solid var(--skin-cinza-borda);
    border-radius: 6px;
    background: var(--skin-branco);
    color: var(--skin-azul-primario);
    font-family: var(--skin-font-base);
    font-size: 11px;
    font-weight: 600;
    opacity: 1;
    cursor: pointer;
}
.ui-datepicker .ui-datepicker-buttonpane button:hover {
    border-color: var(--skin-azul-claro);
    background: var(--skin-azul-soft);
}

/* Multiplos meses lado a lado (showNumberOfMonths) */
.ui-datepicker.ui-datepicker-multi { width: auto !important; }
.ui-datepicker .ui-datepicker-group { padding: 0 4px; }

/* Impressao: calendario e controle de tela, nao sai no papel. */
@media print {
    .ui-datepicker { display: none !important; }
}

/* ============================================================================
   Malote Eletronico - opcoes do formulario de inclusao
   ----------------------------------------------------------------------------
   Substitui os &nbsp; que faziam as vezes de espacador antes de cada checkbox.
   O <label> em volta faz o texto tambem marcar a caixa - area de clique maior,
   que e o comportamento esperado de um checkbox.
   Escopo restrito: so o Malote usa a classe.
   ========================================================================== */
.malote-opcao {
    display: block;
    margin: 2px 0 2px 4px;
    cursor: pointer;
    font-weight: normal;
}
.malote-opcao input {
    margin-right: 4px;
    vertical-align: middle;
}

/* ============================================================================
   Malote Eletronico - leitura da mensagem (Detalhes)
   ----------------------------------------------------------------------------
   A tela mostrava assunto, remetente, datas e corpo como linhas iguais de uma
   tabela de layout, separadas por <td>&nbsp;</td>. Aqui o assunto vira titulo,
   os metadados viram um bloco discreto e o corpo ganha respiro - a hierarquia
   que se espera ao ler uma mensagem.
   Escopo restrito ao Malote; nao toca em rotuloCampo/textoCorpo, que estao em
   ~1.190 telas.
   ========================================================================== */
.malote-meta {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 8pt;
    color: #5a5a72;
    padding: 2px 0;
}
.malote-meta .malote-meta-rotulo {
    font-weight: bold;
    color: #404066;
    padding-right: 4px;
}
.malote-destinatarios {
    min-height: 70px;
    max-height: 200px;
    overflow: auto;
    border: thin solid #cccccc;
    border-radius: 3px;
    background: #fbfcfe;
    padding: 5px 7px;
    line-height: 1.35;
    text-align: justify;
}
.malote-corpo {
    min-height: 250px;
    max-height: 480px;
    overflow: auto;
    border: thin solid #cccccc;
    border-radius: 3px;
    background: #ffffff;
    padding: 9px 11px;
    text-align: justify;
    line-height: 1.45;
}
/* o corpo vem do editor: da respiro entre paragrafos e tabelas do malote antigo */
.malote-corpo p {
    margin: 0 0 .42em 0;
}
.malote-corpo p:last-child {
    margin-bottom: 0;
}
.malote-corpo table {
    margin: .3em 0;
}
/* print colado no malote: nunca mais largo que o corpo */
.malote-corpo img {
    max-width: 100%;
    height: auto;
}
.malote-corpo td,
.malote-corpo th {
    padding: 2px 3px;
}
.malote-corpo ul,
.malote-corpo ol {
    margin: .3em 0;
    padding-left: 1.6em;
}
.malote-corpo li {
    margin-bottom: .15em;
}
.malote-separador {
    border: 0;
    border-top: 1px solid #e2e6ef;
    margin: 10px 0;
}

/* ============================================================================
   Malote Eletronico - editor (Jodit 4)
   ----------------------------------------------------------------------------
   O Jodit traz o proprio CSS (jscripts/jodit/jodit.min.css). Aqui so o
   acabamento em volta, no mesmo tom das molduras: borda, cantos e a barra de
   ferramentas destacada do texto. Escopo restrito ao Malote.
   ========================================================================== */
#idEditor .jodit-container {
    text-align: left;
    border: 1px solid #c8cedb;
    overflow: hidden;
}
/* largura de 90% e cantos so no modo normal: no modo tela cheia o !important
   venceria a regra do Jodit e o editor encolhia para a largura minima */
#idEditor .jodit-container:not(.jodit_fullsize) {
    width: 90% !important;
    margin: 0 auto;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
/* tela cheia: preso a janela (frame da area de aplicacao), nao a moldura,
   que e posicionada e virava a referencia do position:absolute do Jodit */
#idEditor .jodit-container.jodit_fullsize {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0;
    border-radius: 0;
    z-index: 10000;
}
#idEditor .jodit-toolbar__box {
    background: #f4f6fa;
    border-bottom: 1px solid #e2e6ef;
}
#idEditor .jodit-status-bar {
    background: #f4f6fa;
    border-top: 1px solid #e2e6ef;
    font-size: 8pt;
    color: #5a5a72;
}
#idEditor .jodit-wysiwyg {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
}

/* ----------------------------------------------------------------------------
   Janelas do Jodit (caracteres especiais, visualizar, confirmacoes)
   ----------------------------------------------------------------------------
   O Jodit pendura as janelas no <body>, fora do #idEditor, com o visual dele
   (tudo branco). Aqui ganham a mesma linguagem do alertaMensagem (.jconfirm):
   caixa branca de canto largo, cabecalho com o gradiente e o filete dourado do
   topo do FIPLAN, botao OK preenchido na cor da marca. O prefixo
   .jodit-dialog_theme_default da a especificidade para vencer o jodit.min.css,
   que e carregado depois desta folha.
   ---------------------------------------------------------------------------- */
.jodit-dialog.jodit-dialog_theme_default {
    font-family: var(--skin-font-base);
    color: var(--skin-text);
}
.jodit-dialog.jodit-dialog_theme_default .jodit-dialog__overlay {
    background: rgba(5, 30, 58, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.jodit-dialog.jodit-dialog_theme_default .jodit-dialog__panel {
    background: var(--skin-branco);
    border: 0;
    border-radius: var(--skin-radius-lg);
    box-shadow: 0 18px 48px rgba(5, 30, 58, .28), 0 2px 6px rgba(5, 30, 58, .12);
    overflow: hidden;
}
.jodit-dialog.jodit-dialog_theme_default .jodit-dialog__header {
    min-height: 49px;
    padding: 0 8px 0 22px;
    align-items: center;
    background-image: linear-gradient(165deg, var(--skin-azul-deep) 0%, var(--skin-azul-primario) 50%, var(--skin-azul-medio) 100%);
    background-color: var(--skin-azul-primario);
    border-bottom: 3px solid var(--skin-dourado);
    color: var(--skin-branco);
    cursor: move;
}
.jodit-dialog.jodit-dialog_theme_default .jodit-dialog__header-title {
    margin: 0;
    padding: 0;
    font-family: var(--skin-font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--skin-branco);
}
/* fechar (X) sobre o cabecalho escuro */
.jodit-dialog.jodit-dialog_theme_default .jodit-dialog__header-toolbar .jodit-toolbar-button__button {
    border-radius: var(--skin-radius);
}
.jodit-dialog.jodit-dialog_theme_default .jodit-dialog__header-toolbar .jodit-toolbar-button__icon svg {
    fill: rgba(255, 255, 255, .8);
    stroke: rgba(255, 255, 255, .8);
}
.jodit-dialog.jodit-dialog_theme_default .jodit-dialog__header-toolbar .jodit-toolbar-button__button:hover {
    background: rgba(255, 255, 255, .14);
}
.jodit-dialog.jodit-dialog_theme_default .jodit-dialog__header-toolbar .jodit-toolbar-button__button:hover svg {
    fill: var(--skin-branco);
    stroke: var(--skin-branco);
}
.jodit-dialog.jodit-dialog_theme_default .jodit-dialog__content {
    padding: 16px 22px 8px 22px;
    background: var(--skin-branco);
}
.jodit-dialog.jodit-dialog_theme_default .jodit-dialog__footer {
    padding: 8px 22px 20px 22px;
    background: var(--skin-branco);
    border-top: 0;
    justify-content: flex-end;
    gap: 8px;
}

/* Botoes do rodape: mesmo desenho dos botoes do alertaMensagem */
.jodit-dialog.jodit-dialog_theme_default .jodit-dialog__footer .jodit-ui-button {
    min-width: 96px;
    height: auto;
    padding: 8px 18px;
    justify-content: center;
    border-radius: var(--skin-radius-btn);
    border: 1px solid #A9BDD4;
    background: linear-gradient(180deg, #FFFFFF 0%, #F2F6FB 100%);
    color: var(--skin-azul-primario);
    box-shadow: 0 1px 2px rgba(10,61,107,.10), inset 0 1px 0 rgba(255,255,255,.85);
    font-family: var(--skin-font-base);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2px;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.jodit-dialog.jodit-dialog_theme_default .jodit-dialog__footer .jodit-ui-button:hover {
    background: linear-gradient(180deg, #F2F8FF 0%, #E2EEFB 100%);
    border-color: var(--skin-azul-claro);
}
.jodit-dialog.jodit-dialog_theme_default .jodit-dialog__footer .jodit-ui-button:focus-visible {
    outline: none;
    border-color: var(--skin-azul-claro);
    box-shadow: 0 0 0 3px rgba(26,127,219,.18);
}
.jodit-dialog.jodit-dialog_theme_default .jodit-dialog__footer .jodit-ui-button_ok,
.jodit-dialog.jodit-dialog_theme_default .jodit-dialog__footer .jodit-ui-button_variant_primary {
    background: linear-gradient(180deg, var(--skin-azul-medio) 0%, var(--skin-azul-primario) 100%);
    border-color: var(--skin-azul-primario);
    color: var(--skin-branco);
    box-shadow: var(--skin-sombra-botao);
}
.jodit-dialog.jodit-dialog_theme_default .jodit-dialog__footer .jodit-ui-button_ok:hover,
.jodit-dialog.jodit-dialog_theme_default .jodit-dialog__footer .jodit-ui-button_variant_primary:hover {
    background: linear-gradient(180deg, var(--skin-azul-claro) 0%, var(--skin-azul-medio) 100%);
    border-color: var(--skin-azul-claro);
}
.jodit-dialog.jodit-dialog_theme_default .jodit-dialog__footer .jodit-ui-button svg,
.jodit-dialog.jodit-dialog_theme_default .jodit-dialog__footer .jodit-ui-button svg * {
    fill: currentColor;
    stroke: currentColor;
}
.jodit-dialog.jodit-dialog_theme_default .jodit-dialog__footer .jodit-ui-button__icon {
    color: inherit;
}

/* Grade de caracteres especiais: cada caractere vira uma "tecla" clicavel.
   As teclas sao maiores que o padrao do Jodit, entao a janela (460px fixos,
   em estilo inline) precisa crescer para caber a grade e o visor lado a lado. */
.jodit-dialog.jodit-dialog_theme_default .jodit-dialog__panel:has(.jodit-symbols) {
    width: 660px !important;
    max-width: calc(100vw - 32px);
    height: auto !important;
}
.jodit-dialog.jodit-dialog_theme_default .jodit-symbols {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.jodit-dialog.jodit-dialog_theme_default .jodit-symbols__container_table {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
}
.jodit-dialog.jodit-dialog_theme_default .jodit-symbols__container_preview {
    flex: 0 0 auto;
}
.jodit-dialog.jodit-dialog_theme_default .jodit-symbols__table {
    border-collapse: separate;
    border-spacing: 3px;
}
.jodit-dialog.jodit-dialog_theme_default .jodit-symbols__table td {
    padding: 0;
}
.jodit-dialog.jodit-dialog_theme_default .jodit-symbols__table a {
    width: 26px;
    height: 26px;
    line-height: 24px;
    text-align: center;
    border: 1px solid var(--skin-line);
    border-radius: 6px;
    background: var(--skin-branco);
    color: var(--skin-text);
    font-size: 15px;
    text-decoration: none;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.jodit-dialog.jodit-dialog_theme_default .jodit-symbols__table a:hover,
.jodit-dialog.jodit-dialog_theme_default .jodit-symbols__table a:focus {
    background: var(--skin-azul-soft);
    border-color: var(--skin-azul-claro);
    color: var(--skin-azul-primario);
    outline: none;
}
/* visor do caractere em destaque */
.jodit-dialog.jodit-dialog_theme_default .jodit-symbols__preview {
    min-width: 72px;
    border: 1px solid var(--skin-cinza-borda);
    border-radius: var(--skin-radius);
    background: var(--skin-cinza-bg);
    color: var(--skin-azul-primario);
    text-align: center;
    padding: 12px 0;
}
/* tamanho total do malote com imagens (ao lado do contador de caracteres) */
#idEditor .malote-tamanho--perto {
    color: var(--skin-warn);
    font-weight: 700;
}
#idEditor .malote-tamanho--excedido {
    color: var(--skin-danger);
    font-weight: 700;
}
/* contador de caracteres: era texto solto embaixo do editor.
   Mira so o <span> do contador - a div do corpo tambem tem textoCorpo. */
#idEditor span.textoCorpo {
    display: block;
    text-align: right;
    padding: 6px 2px 0 2px;
    font-size: 8pt;
    color: #5a5a72;
}

/* ============================================================================
   Botoes de formulario (<fiplan:button> -> <input type="button">)
   ----------------------------------------------------------------------------
   A ONDA 7 converteu os GIF-palavra da <fiplan:img> em <button>, mas nao alcanca
   estes: <fiplan:button> e o ButtonTag do Struts puro, que emite
   <input type="button"> e nao passa pela ImagemTag. Sao 36 ocorrencias em 17
   telas - "Visualizar" do historico de bloqueio e do horario de acesso, botoes
   de popup, PESQUISAR de conciliacao - e ficavam com o botao cru do navegador.

   O visual espelha o dos botoes de acao do rodape (#div_botoes button.btn-primary):
   fundo branco, borda azul discreta, texto azul escuro, realce azul no hover.

   Escopo: SO input sem class nenhuma - que e o que <fiplan:button> gera quando a
   JSP nao passa styleClass. O :not([class]) e essencial: sem ele a regra atropelava
   os botoes das telas de consulta (Adicionar, Remover, Limpar, Selecionar, Mostrar
   todos), que ja vem com `btn btn-default btn-sm` do Bootstrap ou `cssButton` e ja
   tinham design proprio. Sao 17 botoes com classe, que ficam como estao, contra 31
   sem classe, que sao o alvo.
   Fica de fora tambem o rodape, que ja tem regra propria, e a tela de login
   (.btn-skin-*).
   ========================================================================== */
body:not(.skin-login-page) input[type="button"]:not([class]),
body:not(.skin-login-page) input[type="submit"]:not([class]),
body:not(.skin-login-page) input[type="reset"]:not([class]) {
    font-family: var(--skin-font-base, Verdana, Helvetica, Arial, sans-serif);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    padding: 3px 12px;
    color: var(--skin-azul-deep, #0a3d6b);
    background: #fff;
    border: 1px solid rgba(13, 91, 166, 0.15);
    border-radius: 3px;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
body:not(.skin-login-page) input[type="button"]:not([class]):hover,
body:not(.skin-login-page) input[type="submit"]:not([class]):hover,
body:not(.skin-login-page) input[type="reset"]:not([class]):hover {
    background: var(--skin-azul-soft, #eaf2fb);
    border-color: rgba(13, 91, 166, 0.45);
    color: var(--skin-azul-primario, #0d5ba6);
}
body:not(.skin-login-page) input[type="button"]:not([class]):focus,
body:not(.skin-login-page) input[type="submit"]:not([class]):focus,
body:not(.skin-login-page) input[type="reset"]:not([class]):focus {
    outline: 2px solid rgba(13, 91, 166, 0.35);
    outline-offset: 1px;
}
/* desabilitado: a tela de usuario negocial mostra o "Visualizar" assim quando
   o usuario nao pode abrir o historico. Tem de parecer inerte, nao clicavel. */
body:not(.skin-login-page) input[type="button"]:not([class]):disabled,
body:not(.skin-login-page) input[type="submit"]:not([class]):disabled,
body:not(.skin-login-page) input[type="reset"]:not([class]):disabled {
    color: var(--skin-cinza-texto, #6c757d);
    background: var(--skin-cinza-bg, #f4f6fa);
    border-color: var(--skin-cinza-borda, #dee2e6);
    cursor: default;
    opacity: .7;
}
body:not(.skin-login-page) input[type="button"]:not([class]):disabled:hover,
body:not(.skin-login-page) input[type="submit"]:not([class]):disabled:hover,
body:not(.skin-login-page) input[type="reset"]:not([class]):disabled:hover {
    background: var(--skin-cinza-bg, #f4f6fa);
    border-color: var(--skin-cinza-borda, #dee2e6);
    color: var(--skin-cinza-texto, #6c757d);
}

/* ============================================================================
   Textarea - respiro entre o texto e a borda
   ----------------------------------------------------------------------------
   A regra base (Fiplan.css:63 `textarea, input`) define fonte, cor e margem, mas
   nao define padding: o texto nasce colado na borda esquerda e no topo. Aparece
   em campo de texto longo - Motivo, Justificativa, Observacao, Historico - onde
   o bloco fica visivelmente apertado.

   Mesma medida discreta usada no corpo do Malote (9px/11px la, um pouco menor
   aqui porque a fonte e 8pt): so o respiro, sem mexer em borda ou cor.
   Nao altera o valor enviado nem a contagem de caracteres.

   ATENCAO ao seletor: a TextareaTag (:319-323) injeta `form-control input-xs` em
   TODO textarea, e `.input-xs` (Fiplan.css:649) ja traz `padding: 2px 5px`. Uma
   regra so de elemento PERDE por especificidade e o respiro nao aparece - foi o
   que aconteceu na primeira tentativa. Por isso as classes entram no seletor.

   Fica de fora a tela de login (.skin-login-page), que tem o proprio conjunto.
   ========================================================================== */
body:not(.skin-login-page) textarea,
body:not(.skin-login-page) textarea.form-control,
body:not(.skin-login-page) textarea.input-xs,
body:not(.skin-login-page) textarea.form-control.input-xs {
    padding: 5px 7px;
    line-height: 1.4;
    /* .input-xs fixa height 24px, que e altura de input de uma linha; no textarea
       isso brigava com o rows= da JSP. auto devolve a altura ao atributo rows. */
    height: auto;
}

/* ============================================================================
   Checkbox e radio - espaco entre a caixa e o texto
   ----------------------------------------------------------------------------
   Medido em 28/09/2026: das 1.187 ocorrencias de <fiplan:checkbox>, <checkboxNew>
   e <radio> com texto logo em seguida, **844 estavam grudadas** (`/>Estornos`) e
   343 tinham `&nbsp;` na JSP. A distancia variava de tela para tela.

   Uma margem na propria caixa uniformiza as duas situacoes sem editar JSP nenhuma
   e vale para campo novo. Quem ja tinha `&nbsp;` fica um pouco mais folgado - o
   que aproxima os dois casos em vez de afastar.

   FICA DE FORA a grade: a GradeTag monta a propria checkbox dentro da celula
   (GradeTag.java:696-701) e ali o espaco extra estoura a altura da linha - foi o
   que exigiu o ajuste por flex na lista do Malote (Grade.css:393, classe khtml).
   Tambem fica de fora a tela de login, que tem o conjunto dela.
   ========================================================================== */
body:not(.skin-login-page) input[type="checkbox"],
body:not(.skin-login-page) input[type="radio"] {
    margin-right: 4px;
    vertical-align: middle;
}
/* dentro da grade, sem margem: a celula e apertada e a linha tem altura fixa */
#fiplanGrade input[type="checkbox"],
#fiplanGrade input[type="radio"],
.active-grid input[type="checkbox"],
.active-grid input[type="radio"],
td[class*="active-column"] input[type="checkbox"],
td[class*="active-column"] input[type="radio"] {
    margin-right: 0;
}
/* ============================================================================
   Caixa de texto so-leitura - respiro entre o texto e a borda
   ----------------------------------------------------------------------------
   Em modo Detalhar/Confirmar, varias telas NAO usam <fiplan:textarea>: trocam o
   campo por uma <div> com style inline e borda, e escrevem o valor com
   <fiplan:write> dentro. Exemplo, o Motivo da Manter_Diarias:

       <div style="width:500px;height:80px;overflow:auto;border: thin solid #cccccc;">

   Sao 29 arquivos com esse padrao e NENHUM define padding, entao o texto nasce
   colado na borda - o mesmo sintoma do textarea, em outro componente.

   O seletor mira a assinatura comum do style inline (overflow + border thin
   solid), porque largura e altura variam de tela para tela. Padding entra por
   regra externa: o style inline nao define padding, entao nao ha disputa e nao
   e preciso !important.
   ========================================================================== */
body:not(.skin-login-page) div[style*="overflow:auto"][style*="thin solid"],
body:not(.skin-login-page) div[style*="overflow: auto"][style*="thin solid"] {
    padding: 5px 7px;
    line-height: 1.4;
    /* box-sizing para o padding nao empurrar a largura fixa do style inline */
    box-sizing: border-box;
}

/* ============================================================================
   Campo de arquivo (<fiplan:file> -> <input type="file">)
   ----------------------------------------------------------------------------
   A <fiplan:file> e a NestedFileTag do Struts puro: emite <input type="file">
   sem classe, e o botao "Escolher arquivo" ficava com o visual cru do
   navegador. Sao 15 telas: popups de anexo dos creditos adicionais e do
   contingenciamento, anexo da OSBD, cargas de planilha/extrato. Visto pelo
   Diego no Popup_Alteracao_Anulantes_Arquivo em 30/09/2026.

   O botao interno e um pseudo-elemento (::file-selector-button, Chrome 89+ e
   Firefox 82+) e copia o visual do botao de formulario logo acima. Mesmo
   escopo: a area da aplicacao, fora do login.
   ========================================================================== */
body:not(.skin-login-page) input[type="file"] {
    font-family: var(--skin-font-base, Verdana, Helvetica, Arial, sans-serif);
    font-size: 11px;
    color: var(--skin-cinza-texto, #6c757d);
    cursor: pointer;
    /* o navegador da ao <input type="file"> uma largura intrinseca fixa (~250px);
       com o botao maior e a margem, "Nenhum arquivo escolhido" saia cortado. */
    min-width: 320px;
}
body:not(.skin-login-page) input[type="file"]::file-selector-button {
    font-family: var(--skin-font-base, Verdana, Helvetica, Arial, sans-serif);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    padding: 3px 12px;
    margin-right: 10px;
    color: var(--skin-azul-deep, #0a3d6b);
    background: #fff;
    border: 1px solid rgba(13, 91, 166, 0.15);
    border-radius: 3px;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
body:not(.skin-login-page) input[type="file"]:hover::file-selector-button {
    background: var(--skin-azul-soft, #eaf2fb);
    border-color: rgba(13, 91, 166, 0.45);
    color: var(--skin-azul-primario, #0d5ba6);
}
body:not(.skin-login-page) input[type="file"]:focus-visible {
    outline: none;
}
body:not(.skin-login-page) input[type="file"]:focus-visible::file-selector-button {
    outline: 2px solid rgba(13, 91, 166, 0.35);
    outline-offset: 1px;
}
body:not(.skin-login-page) input[type="file"]:disabled::file-selector-button {
    color: var(--skin-cinza-texto, #6c757d);
    background: var(--skin-cinza-bg, #f4f6fa);
    border-color: var(--skin-cinza-borda, #dee2e6);
    cursor: default;
    opacity: .7;
}

/* ============================================================================
   Contador "Caracteres Restantes" (input cru, so-leitura)
   ----------------------------------------------------------------------------
   10 telas (creditos adicionais x2, RAG x8) escrevem o contador a mao:

       <input type="text" name="caracteres" width="5" value="4000" readonly="readonly"/>

   Nao passa pela TextTag, entao nao recebe `form-control input-xs`; e `width`
   nem e atributo de <input>, o campo sai com as 20 colunas padrao, branco e
   com a borda do navegador. Visto pelo Diego na
   Alterar_Creditos_Adicionais_Anulantes em 30/09/2026.

   A regra reproduz o que a TextTag daria (Fiplan.css .input-xs + Bootstrap
   .form-control[readonly]): 24px de altura, borda #ced4da, fundo cinza de
   so-leitura, e largura para 5 digitos (o maior contador e 30000). Mira pelo
   name porque e a assinatura comum das 10 telas; os outros ~30 inputs crus do
   sistema (lacuna da secao 28 do STATUS do Redesign) ficam de fora de
   proposito - cada um tem um contexto diferente (calendario, conciliacao).
   ========================================================================== */
body:not(.skin-login-page) input[type="text"][name="caracteres"][readonly] {
    display: inline-block;
    width: 64px;
    height: 24px;
    padding: 2px 5px;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: #404066;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 3px;
    cursor: default;
    vertical-align: middle;
}
body:not(.skin-login-page) input[type="text"][name="caracteres"][readonly]:focus {
    outline: none;
    box-shadow: none;
}