/* ============================================================================
   PCLI-6593 - Nova Home / Login personalizado / Preview do Admin

   Este arquivo concentra todo o CSS estatico da funcionalidade "Nova Home".
   Faz parte do tema MegaLayout e e carregado automaticamente pelo mecanismo
   de App_Themes do ASP.NET, em ordem alfabetica:
       StylesheetsGlobal.css
       StylesheetsLayout.css
       StylesheetsLayoutNovaHome.css   <-- este arquivo (carrega por ultimo)

   Como o arquivo carrega DEPOIS dos anteriores, os seletores desta feature
   sobrescrevem naturalmente por cascata, dispensando !important na maior
   parte dos casos.

   Ativacao (o CSS so afeta a UI se um destes elementos estiver presente):
     .pcli-nh-container        -> classe do painel da nova home (Cliente/Home.aspx)
     body.login.pcli-nh-login-ativo -> body do Login quando nova home ativa
     #tblHome.pcli-nh-ativo    -> tabela raiz da Home quando nova home ativa
     .pv-*                     -> tela Admin/PersonalizacaoHome.aspx (sempre presente
                                  quando o usuario acessa aquela tela)
   ============================================================================ */


/* ============================================================================
   1. HOME - Cards da nova home
   Escopo: .pcli-nh-container (classe aplicada no pnlNovaHome pela Home.aspx.cs).
   Como o Panel so e renderizado quando a nova home esta ativa, essas regras
   nao afetam a home antiga.
   ============================================================================ */

.pcli-nh-container { text-align: left; }

/* Reset completo do elemento de icone dentro da nova home.
   Temas customizados do cliente podem ter personalizacoes em
   .MenuDeNavegacao_ImagemNormal (border-radius, background-color,
   dimensoes, filtros, etc.) que interferem nos icones SVG.
   Ao inves de mapear cada propriedade individualmente, zeramos tudo
   com all:unset e redefinimos apenas o que a nova home precisa.
   all:unset remove heranca e valor de cada propriedade CSS;
   display:block e necessario pois all:unset remove o display padrao. PCLI-6593. */
.pcli-nh-container .MenuDeNavegacao_ImagemNormal {
    all: unset;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    width: 40px;
    height: 40px;
    margin: 0 auto 8px auto;
}

/* Icones - mapeamento classe -> asset SVG (todos em Imagens/NovaHome/)
   O caminho relativo funciona porque o CSS esta em App_Themes/MegaLayout/Stylesheets/
   e as imagens em App_Themes/MegaLayout/Imagens/NovaHome/ */
.pcli-nh-container .MenuDeNavegacao_Home                { background-image: url('../Imagens/home.png'); }
.pcli-nh-container .MenuDeNavegacao_Noticias            { background-image: url('../Imagens/NovaHome/noticias.svg'); }
.pcli-nh-container .MenuDeNavegacao_PesquisaSatisfacao  { background-image: url('../Imagens/NovaHome/pesquisa.svg'); }
.pcli-nh-container .MenuDeNavegacao_Sair                { background-image: url('../Imagens/NovaHome/logout.svg'); }
.pcli-nh-container .MenuDeNavegacao_AtualizarDadosCadastrais { background-image: url('../Imagens/NovaHome/meus_dados.svg'); }
.pcli-nh-container .MenuDeNavegacao_MudarSenha          { background-image: url('../Imagens/NovaHome/login_e_senha.svg'); }
.pcli-nh-container .MenuDeNavegacao_ExtratoFinanceiro   { background-image: url('../Imagens/NovaHome/extrato_financeiro.svg'); }
.pcli-nh-container .MenuDeNavegacao_Boleto2aVia         { background-image: url('../Imagens/NovaHome/solicitacao_de_2a_via.svg'); }
.pcli-nh-container .MenuDeNavegacao_AntecipacaoDeParcelas { background-image: url('../Imagens/NovaHome/antecipacao.svg'); }
.pcli-nh-container .MenuDeNavegacao_Sintese             { background-image: url('../Imagens/NovaHome/sintese_do_contrato.svg'); }
.pcli-nh-container .MenuDeNavegacao_Demonstrativo       { background-image: url('../Imagens/NovaHome/demonstrativo_de_valores_pagos.svg'); }
.pcli-nh-container .MenuDeNavegacao_Renegociacao        { background-image: url('../Imagens/NovaHome/renegociacao.svg'); }
.pcli-nh-container .MenuDeNavegacao_DeclaracaoQuitacao  { background-image: url('../Imagens/NovaHome/declaracao_de_quitacao.svg'); }
.pcli-nh-container .MenuDeNavegacao_FichaTecnica        { background-image: url('../Imagens/NovaHome/ficha_tecnica.svg'); }
.pcli-nh-container .MenuDeNavegacao_AndamentoDaObra     { background-image: url('../Imagens/NovaHome/andamento_da_obra.svg'); }
.pcli-nh-container .MenuDeNavegacao_DocumentosPlantas   { background-image: url('../Imagens/NovaHome/documentos_e_plantas.svg'); }
.pcli-nh-container .MenuDeNavegacao_DuvidasFrequentes   { background-image: url('../Imagens/NovaHome/duvidas_frequentes.svg'); }
.pcli-nh-container .MenuDeNavegacao_SugestoesReclamacoes { background-image: url('../Imagens/NovaHome/fale_conosco.svg'); }
.pcli-nh-container .MenuDeNavegacao_Solicitacoes        { background-image: url('../Imagens/solicitacoes.png'); }
.pcli-nh-container .MenuDeNavegacao_MemoriaCalculo      { background-image: url('../Imagens/NovaHome/extrato_financeiro.svg'); }
.pcli-nh-container .MenuDeNavegacao_MyHome              { background-image: url('../Imagens/NovaHome/assistencia_tecnica.svg'); }
.pcli-nh-container .MenuDeNavegacao_Crm                 { background-image: url('../Imagens/NovaHome/atendimento_ao_cliente.svg'); }

/* Estrutura de tabelas dentro do painel */
.pcli-nh-container .MenuDeNavegacao_TabelaExterna {
    border-collapse: separate;
    border-spacing: 5px;
}

.pcli-nh-container .MenuDeNavegacao_TabelaExterna td {
    text-align: left;
    vertical-align: top;
}

.pcli-nh-container .MenuDeNavegacao_TabelaArea th {
    font-size: 17px;
    color: #454545;
    text-align: left;
    font-family: 'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,sans-serif;
    padding: 8px 0 4px 0;
    background: transparent;
    /* Temas customizados podem ocultar os titulos (visibility:hidden ou
       display:none). Forcamos a visibilidade na nova home. PCLI-6593. */
    visibility: visible !important;
    display: table-cell !important;
}

.pcli-nh-container .MenuDeNavegacao_TabelaAreaItens {
    padding: 0;
    background: transparent;
    border: none;
    text-align: left;
}

.pcli-nh-container .MenuDeNavegacao_TabelaAreaItens td {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 5px;
    text-align: left;
}

.pcli-nh-container .MenuDeNavegacao_TabelaAreaItens > tbody > tr > td > div,
.pcli-nh-container .MenuDeNavegacao_TabelaAreaItens > tbody > tr > td > div > div {
    /* Reset completo: temas customizados podem definir margin, font-size,
       color, border, etc. nesses divs intermediarios. PCLI-6593. */
    all: unset;
    display: block;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

/* Card individual - estado normal.
   O seletor lista todas as variantes usadas em Home.aspx para nao depender
   de um seletor de atributo (compatibilidade maxima com browsers legados). */
.pcli-nh-container .MenuDeNavegacaoCol_Home_div,
.pcli-nh-container .MenuDeNavegacaoCol_Noticia_div,
.pcli-nh-container .MenuDeNavegacaoCol_Pesquisa_div,
.pcli-nh-container .MenuDeNavegacaoCol_Sair_div,
.pcli-nh-container .MenuDeNavegacaoCol_DadosCadastrais_div,
.pcli-nh-container .MenuDeNavegacaoCol_Senha_div,
.pcli-nh-container .MenuDeNavegacaoCol_Extrato_div,
.pcli-nh-container .MenuDeNavegacaoCol_Boleto_div,
.pcli-nh-container .MenuDeNavegacaoCol_Antecipacao_div,
.pcli-nh-container .MenuDeNavegacaoCol_Sintese_div,
.pcli-nh-container .MenuDeNavegacaoCol_Demonstrativo_div,
.pcli-nh-container .MenuDeNavegacaoCol_Renegociacao_div,
.pcli-nh-container .MenuDeNavegacaoCol_MemoriaCalculo_div,
.pcli-nh-container .MenuDeNavegacaoCol_DeclaracaoQuitacao_div,
.pcli-nh-container .MenuDeNavegacaoCol_MyHome_div,
.pcli-nh-container .MenuDeNavegacaoCol_FichaTecnica_div,
.pcli-nh-container .MenuDeNavegacaoCol_AndamentoObra_div,
.pcli-nh-container .MenuDeNavegacaoCol_Documentos_div,
.pcli-nh-container .MenuDeNavegacaoCol_Duvidas_div,
.pcli-nh-container .MenuDeNavegacaoCol_Fac_div,
.pcli-nh-container .MenuDeNavegacaoCol_Crm_div {
    width: 90px;
    height: 90px;
    padding: 12px 8px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    color: #333333;
    font-family: 'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Card individual - hover */
.pcli-nh-container .MenuDeNavegacaoCol_Home_div:hover,
.pcli-nh-container .MenuDeNavegacaoCol_Noticia_div:hover,
.pcli-nh-container .MenuDeNavegacaoCol_Pesquisa_div:hover,
.pcli-nh-container .MenuDeNavegacaoCol_Sair_div:hover,
.pcli-nh-container .MenuDeNavegacaoCol_DadosCadastrais_div:hover,
.pcli-nh-container .MenuDeNavegacaoCol_Senha_div:hover,
.pcli-nh-container .MenuDeNavegacaoCol_Extrato_div:hover,
.pcli-nh-container .MenuDeNavegacaoCol_Boleto_div:hover,
.pcli-nh-container .MenuDeNavegacaoCol_Antecipacao_div:hover,
.pcli-nh-container .MenuDeNavegacaoCol_Sintese_div:hover,
.pcli-nh-container .MenuDeNavegacaoCol_Demonstrativo_div:hover,
.pcli-nh-container .MenuDeNavegacaoCol_Renegociacao_div:hover,
.pcli-nh-container .MenuDeNavegacaoCol_MemoriaCalculo_div:hover,
.pcli-nh-container .MenuDeNavegacaoCol_DeclaracaoQuitacao_div:hover,
.pcli-nh-container .MenuDeNavegacaoCol_MyHome_div:hover,
.pcli-nh-container .MenuDeNavegacaoCol_FichaTecnica_div:hover,
.pcli-nh-container .MenuDeNavegacaoCol_AndamentoObra_div:hover,
.pcli-nh-container .MenuDeNavegacaoCol_Documentos_div:hover,
.pcli-nh-container .MenuDeNavegacaoCol_Duvidas_div:hover,
.pcli-nh-container .MenuDeNavegacaoCol_Fac_div:hover,
.pcli-nh-container .MenuDeNavegacaoCol_Crm_div:hover {
    background-color: #B7C9D9;
    border: 1px solid #8FA9BC;
    box-shadow: 0 4px 8px rgba(0,0,0,0.12);
    color: #2E4A5F;
    transform: translateY(-1px);
}

/* Card individual - focus */
.pcli-nh-container .MenuDeNavegacaoCol_Home_div:focus,
.pcli-nh-container .MenuDeNavegacaoCol_Noticia_div:focus,
.pcli-nh-container .MenuDeNavegacaoCol_Pesquisa_div:focus,
.pcli-nh-container .MenuDeNavegacaoCol_Sair_div:focus,
.pcli-nh-container .MenuDeNavegacaoCol_DadosCadastrais_div:focus,
.pcli-nh-container .MenuDeNavegacaoCol_Senha_div:focus,
.pcli-nh-container .MenuDeNavegacaoCol_Extrato_div:focus,
.pcli-nh-container .MenuDeNavegacaoCol_Boleto_div:focus,
.pcli-nh-container .MenuDeNavegacaoCol_Antecipacao_div:focus,
.pcli-nh-container .MenuDeNavegacaoCol_Sintese_div:focus,
.pcli-nh-container .MenuDeNavegacaoCol_Demonstrativo_div:focus,
.pcli-nh-container .MenuDeNavegacaoCol_Renegociacao_div:focus,
.pcli-nh-container .MenuDeNavegacaoCol_MemoriaCalculo_div:focus,
.pcli-nh-container .MenuDeNavegacaoCol_DeclaracaoQuitacao_div:focus,
.pcli-nh-container .MenuDeNavegacaoCol_MyHome_div:focus,
.pcli-nh-container .MenuDeNavegacaoCol_FichaTecnica_div:focus,
.pcli-nh-container .MenuDeNavegacaoCol_AndamentoObra_div:focus,
.pcli-nh-container .MenuDeNavegacaoCol_Documentos_div:focus,
.pcli-nh-container .MenuDeNavegacaoCol_Duvidas_div:focus,
.pcli-nh-container .MenuDeNavegacaoCol_Fac_div:focus,
.pcli-nh-container .MenuDeNavegacaoCol_Crm_div:focus {
    background-color: #FFFFFF;
    border: 2px solid #B3B3B3;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    color: #333333;
    outline: none;
}


/* ============================================================================
   2. HOME - Tabela raiz e Quadro de Avisos
   Escopo: #tblHome.pcli-nh-ativo (classe aplicada em Home.aspx.cs quando a
   nova home esta ativa). Necessario porque tblHome e QuadroDeAvisos estao
   FORA de .pcli-nh-container (sao irmaos da coluna esquerda no HTML).

   ATENCAO: IDs de server controls com runat="server" ganham prefixo do
   naming container (ex: ctl00_...tdQuadroDeAvisos). Por isso o Quadro de
   Avisos e qualificado pela classe .pcli-nh-quadro-avisos, adicionada via
   code-behind em Page_PreRender. PCLI-6593.
   ============================================================================ */

/* Centraliza a tabela raiz e deixa os dois td (icones + quadro) lado a lado */
#tblHome.pcli-nh-ativo {
    margin: 0 auto;
    display: table;
}

/* Linha raiz: flex para alinhar verticalmente os dois td pelo topo */
#tblHome.pcli-nh-ativo > tbody > tr,
#tblHome.pcli-nh-ativo > tr {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Coluna de icones: auto-dimensionada pelo conteudo */
#tblHome.pcli-nh-ativo > tbody > tr > td:first-child,
#tblHome.pcli-nh-ativo > tr > td:first-child {
    vertical-align: top;
    text-align: left;
}

/* Titulo "Quadro de Avisos" - mesmo estilo dos titulos dos grupos de icones.
   O StylesheetsLayout.css define .MenuDeNavegacao_TabelaArea th com
   font-size:12px e color:#b01f1f (vermelho). Qualificamos pela classe
   .pcli-nh-quadro-avisos adicionada via code-behind (evita dependencia
   de ClientID prefixado).
   padding-top:5px alinha o titulo com os titulos dos grupos de icones:
   a TabelaExterna dos icones tem cellspacing="5" que cria 5px acima do
   primeiro td; no quadro zerou-se o border-spacing, entao compensamos
   com padding-top equivalente. PCLI-6593. */
.pcli-nh-quadro-avisos .MenuDeNavegacao_TabelaArea th {
    font-size: 17px !important;
    color: #454545 !important;
    text-align: left;
    font-family: 'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,sans-serif;
    padding: 8px 0 4px 0;
    background: transparent !important;
    background-color: transparent !important;
    visibility: visible !important;
    display: table-cell !important;
}

.pcli-nh-quadro-avisos .QuadroDeAvisos {
    height: auto;
    min-height: 420px;
}

/* Borda e fundo do quadro de avisos.
   Nao zeramos border-spacing da MenuDeNavegacao_TabelaExterna para preservar
   o alinhamento dos titulos com os grupos de icones (ambos usam cellspacing=5).
   Zeramos apenas o border-spacing da MenuDeNavegacao_TabelaArea (camada interna)
   para eliminar o gap entre o th e a QuadroDeAvisosTabelaExterna. PCLI-6593. */
.pcli-nh-quadro-avisos .MenuDeNavegacao_TabelaArea {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
}

.pcli-nh-quadro-avisos .MenuDeNavegacao_TabelaArea > tbody > tr > td,
.pcli-nh-quadro-avisos .MenuDeNavegacao_TabelaArea > tr > td {
    padding: 0;
}

/* Empurra o card para baixo para alinhar com a primeira linha de icones.
   Os icones tem mais um nivel de tabela (TabelaAreaItens com cellspacing=5
   + cellpadding=5) antes de aparecerem, gerando ~10px a mais de espaco
   antes do primeiro icone. PCLI-6593. */
.pcli-nh-quadro-avisos .MenuDeNavegacao_TabelaArea > tbody > tr:last-child > td,
.pcli-nh-quadro-avisos .MenuDeNavegacao_TabelaArea > tr:last-child > td {
    padding-top: 10px;
}

.pcli-nh-quadro-avisos .QuadroDeAvisosTabelaExterna {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    border-spacing: 0;
    border-collapse: separate;
    overflow: hidden;
}

.pcli-nh-quadro-avisos .MenuDeNavegacao_TabelaAreaItens_Quadro {
    background: #FFFFFF;
    padding: 0 10px 12px 10px;
}

/* Aumenta o padding interno dos itens do quadro de 5px (cellpadding original)
   para 8px, conforme solicitado. PCLI-6593. */
.pcli-nh-quadro-avisos .QuadroDeAvisosTabelaExterna > tbody > tr > td,
.pcli-nh-quadro-avisos .QuadroDeAvisosTabelaExterna > tr > td {
    padding: 8px;
}

/* Replica exatamente o comportamento do backup (AplicarPersonalizacaoHome
   injetava estas regras sem qualificador; aqui qualificamos por
   .pcli-nh-quadro-avisos para nao afetar a home atual). PCLI-6593. */
.pcli-nh-quadro-avisos .MenuDeNavegacao_TabelaAreaItens_Quadro div {
    border: none !important;
}

/* Linhas cinzas entre itens do ASPxNewsControl.
   Confirmado pelo HTML: as linhas vem do border-top do td.dxncItem_DevEx.
   PCLI-6593. */
.pcli-nh-quadro-avisos .dxncItem_DevEx {
    border-top: none !important;
}

/* Fundo branco em todos os elementos internos */
.pcli-nh-quadro-avisos .dxnc,
.pcli-nh-quadro-avisos [class*="dxncAW_"],
.pcli-nh-quadro-avisos [class*="dxncCnt_"] {
    background-color: #FFFFFF !important;
}

/* Remove qualquer borda de celulas internas da tabela do news control */
.pcli-nh-quadro-avisos .dxnc table td,
.pcli-nh-quadro-avisos .dxnc table tr {
    border-color: transparent !important;
}


/* ============================================================================
   3. LOGIN - Split-screen (nova home + imagem de login configurada)
   Escopo: body.login.pcli-nh-login-ativo (classe adicionada em Login.aspx.cs).
   As regras qualificadas por 2 classes + 1 id (ex: #bannerLogin) tem
   especificidade superior aos seletores de ID puros do StylesheetsLayout.css,
   entao sobrescrevem naturalmente sem !important.
   ============================================================================ */

body.login.pcli-nh-login-ativo {
    background: transparent;
    position: relative;
}

/* #bannerLogin: cobertura da tela toda com a imagem de fundo.
   background-image e opacity sao aplicados INLINE pelo Login.aspx.cs
   (unica parte dinamica). */
body.login.pcli-nh-login-ativo #bannerLogin {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    z-index: 0;
    margin: 0;
    width: auto;
    height: auto;
    pointer-events: none;
}

/* #margemBanner: faixa branca lateral de 500px como coluna flex centralizada.
   opacity 0 inicial - o JS ajusta para 1 depois de mover #formularioLogin,
   evitando o flash em que os campos aparecem depois dos demais elementos. */
body.login.pcli-nh-login-ativo #margemBanner {
    position: fixed;
    right: 0;
    top: 0;
    width: 500px;
    height: 100%;
    background-color: #fff;
    background-image: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    float: none;
    margin: 0;
    overflow: visible;
    opacity: 0;
}

/* #formularioLogin: oculto na posicao original ate o JS move-lo para o painel */
body.login.pcli-nh-login-ativo #formularioLogin {
    visibility: hidden;
}

/* Apos o JS mover #formularioLogin para dentro de #margemBanner:
   visivel, posicao estatica, sem margens extras. */
body.login.pcli-nh-login-ativo #margemBanner #formularioLogin {
    visibility: visible;
    position: static;
    width: 295px;
    height: auto;
    left: auto;
    top: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}


/* ============================================================================
   4. LOGIN - Brand (logo + titulo) e Senior (logo rodape do painel)
   Estes elementos sao inseridos pelo Login.aspx.cs dentro de #margemBanner
   quando a nova home esta ativa. Sao usados TAMBEM no preview do admin
   (dentro de .pv-login-form), mas la o Login nao esta ativo - o preview
   redefine width/margin proprios pelas regras .pv-* mais especificas.
   ============================================================================ */

.nh-brand {
    position: static;
    width: 295px;
    text-align: center;
    margin-bottom: 24px;
    pointer-events: none;
}

.nh-logo-portal {
    display: block;
    margin: 0 auto;
    width: 220px;
    height: 75px;
}

.nh-title {
    display: block;
    margin-top: 16px;
    font-size: 20px;
    font-weight: 300;
    color: #333;
    text-align: center;
    white-space: normal;
    font-family: 'Open Sans',HelveticaNeue,Helvetica,Arial,sans-serif;
}

.nh-senior {
    position: static;
    width: 295px;
    text-align: center;
    margin-top: 24px;
    pointer-events: none;
}

.nh-senior-img {
    display: inline-block;
    width: 100px;
    height: 33px;
}

/* No login real (interativo) o pointer-events precisa ser auto para permitir
   clicks (caso um dia haja link no logo). No preview do admin, o valor padrao
   pointer-events:none e adequado. */
body.login.pcli-nh-login-ativo .nh-brand,
body.login.pcli-nh-login-ativo .nh-senior {
    pointer-events: auto;
}


/* ============================================================================
   5. LOGIN - Campos e captcha (dentro do #margemBanner apos move via JS)
   ============================================================================ */

/* .campoFormLogin: float:none obrigatorio porque o StylesheetsLayout.css
   define float:left. O float colapsa o padding-top impedindo o espacamento
   entre campos. */
body.login.pcli-nh-login-ativo .campoFormLogin {
    width: 295px;
    padding-top: 8px;
    float: none;
    clear: both;
    display: block;
}

/* Espacamento extra entre campo login e campo senha:
   5px do margin-top + 8px do padding-top base = 13px */
body.login.pcli-nh-login-ativo #margemBanner .divTextBoxSenha {
    margin-top: 5px;
}

body.login.pcli-nh-login-ativo .divTextoUsuario,
body.login.pcli-nh-login-ativo .divTextoSenha {
    display: none;
}

body.login.pcli-nh-login-ativo .divTextBoxLogin,
body.login.pcli-nh-login-ativo .divTextBoxSenha {
    width: 295px;
    float: none;
}

/* 16px entre campo senha e botao Acessar */
body.login.pcli-nh-login-ativo .botaoFormLogin1 {
    width: 295px;
    float: none;
    padding-top: 16px;
}

/* 16px entre botao Acessar e link Esqueci */
body.login.pcli-nh-login-ativo .botaoFormLogin2 {
    width: 295px;
    float: none;
    padding-top: 16px;
    text-align: center;
}

/* Captcha (Aparece em caso de multiplas tentativas de login).
   Ajustes cirurgicos usando o ID unico do captcha para nao afetar
   os campos de login e senha. PCLI-6593. */
body.login.pcli-nh-login-ativo .classcaptcha {
    width: 295px;
    margin-top: 8px;
    margin-left: 0;
    clear: none;
}

/* Remove padding-left:16px inline da celula do campo do captcha */
body.login.pcli-nh-login-ativo #margemBanner .dxcaTextBoxCellNoIndent_DevEx {
    padding-left: 6px !important;
    vertical-align: top;
}

/* Limita o input do captcha a 139px (295 - 130img - 6padding - 20margem)
   usando o ID especifico para nao afetar TxtUsuario e TxtSenha */
body.login.pcli-nh-login-ativo #margemBanner #pnlLogin_captcha_TB {
    width: 158px !important;
    max-width: 158px !important;
}

/* Oculta a celula vazia da linha do botao "Show another code" */
body.login.pcli-nh-login-ativo #margemBanner .dxcaRefreshButtonCell_DevEx + td {
    display: none !important;
}

body.login.pcli-nh-login-ativo .LabelErroLogin {
    display: block;
    text-align: center;
    margin-top: 8px;
}

/* ASPxPanel: remove width 100% inline do DevExpress (sem height 100% para
   evitar colapso do painel). */
body.login.pcli-nh-login-ativo #pnlLogin {
    width: 295px;
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
}

body.login.pcli-nh-login-ativo #pnlLogin > div {
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
}


/* ============================================================================
   6. LOGIN - Botoes personalizados (Acessar / Esqueci minha senha)
   O Login.aspx.cs aplica CssClass="btn-login-acessar" e "btn-login-senha-link"
   nos ASPxButton quando a nova home esta ativa.
   Os seletores adicionais table/td/span/input compensam a estrutura interna
   do DevExpress ButtonRenderMode=Button.
   ============================================================================ */

body.login.pcli-nh-login-ativo .btn-login-acessar {
    background-color: #00aced !important;
    border: none !important;
    border-radius: 4px !important;
    color: #fff !important;
    width: 100% !important;
    height: 34px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    display: block !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
    line-height: 34px !important;
    background-image: none !important;
}

body.login.pcli-nh-login-ativo .btn-login-acessar:hover {
    background-color: #0090c5 !important;
    background-image: none !important;
}

body.login.pcli-nh-login-ativo .btn-login-acessar table,
body.login.pcli-nh-login-ativo .btn-login-acessar td {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    width: 100% !important;
    padding: 0 !important;
}

/* Elementos internos do DevExpress Button (RenderMode=Button).
   !important necessario porque o tema DevExpress aplica cor e background
   via regras de alta especificidade ou inline styles. PCLI-6593. */
body.login.pcli-nh-login-ativo .btn-login-acessar span,
body.login.pcli-nh-login-ativo .btn-login-acessar input,
body.login.pcli-nh-login-ativo .btn-login-acessar a,
body.login.pcli-nh-login-ativo .btn-login-acessar button {
    color: #fff !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    font-size: 14px !important;
    border: none !important;
    line-height: normal !important;
}

/* Botao "Esqueci minha senha": estilo de link */
body.login.pcli-nh-login-ativo .btn-login-senha-link {
    background: transparent;
    border: none;
    color: #00aced;
    font-size: 14px;
    cursor: pointer;
    display: block;
    padding: 0;
    text-align: center;
    width: auto;
}

body.login.pcli-nh-login-ativo .btn-login-senha-link:hover {
    color: #0090c5;
    text-decoration: underline;
}

body.login.pcli-nh-login-ativo .btn-login-senha-link table,
body.login.pcli-nh-login-ativo .btn-login-senha-link td {
    background: transparent;
    border: none;
}

body.login.pcli-nh-login-ativo .btn-login-senha-link span,
body.login.pcli-nh-login-ativo .btn-login-senha-link input,
body.login.pcli-nh-login-ativo .btn-login-senha-link a,
body.login.pcli-nh-login-ativo .btn-login-senha-link button {
    color: #00aced;
    background: transparent;
    font-size: 14px;
    border: none;
}

body.login.pcli-nh-login-ativo .btn-login-senha-link:hover span,
body.login.pcli-nh-login-ativo .btn-login-senha-link:hover a,
body.login.pcli-nh-login-ativo .btn-login-senha-link:hover button {
    color: #0090c5;
    text-decoration: underline;
}


/* ============================================================================
   7. LOGIN - Banner de cookies
   No layout novo, o banner fica fixo no rodape com fundo branco, acima da
   faixa branca do painel. bottom:12px em vez de 20px (padrao) para nao ficar
   colado na borda inferior.
   ============================================================================ */

body.login.pcli-nh-login-ativo .box-cookies {
    position: fixed;
    bottom: 12px;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 10;
    height: auto;
    overflow: visible;
    padding: 10px 20px;
}

body.login.pcli-nh-login-ativo #PortalDeClientesCookies,
body.login.pcli-nh-login-ativo #PortalDeClientesCookies > div {
    overflow: visible;
    height: auto;
}


/* ============================================================================
   8. LOGIN - Responsivo (mobile)
   Em telas ate 500px o banner de imagem some e a faixa branca ocupa 100%
   da tela. O formulario mantem 90% de largura interna.
   ============================================================================ */

@media (max-width: 500px) {
    body.login.pcli-nh-login-ativo #margemBanner {
        width: 100%;
    }

    body.login.pcli-nh-login-ativo #bannerLogin {
        display: none;
    }

    body.login.pcli-nh-login-ativo #margemBanner #formularioLogin {
        width: 90%;
    }

    body.login.pcli-nh-login-ativo #pnlLogin,
    body.login.pcli-nh-login-ativo .campoFormLogin,
    body.login.pcli-nh-login-ativo .divTextBoxLogin,
    body.login.pcli-nh-login-ativo .divTextBoxSenha,
    body.login.pcli-nh-login-ativo .botaoFormLogin1,
    body.login.pcli-nh-login-ativo .botaoFormLogin2,
    body.login.pcli-nh-login-ativo .classcaptcha,
    body.login.pcli-nh-login-ativo .btn-login-acessar {
        width: 100%;
    }
}


/* Impede a selecao dos elementos decorativos (fundo, brand, logo Senior)
   quando o usuario pressiona Ctrl+A. Os campos de login e botoes continuam
   selecionaveis normalmente. PCLI-6593. */
body.login.pcli-nh-login-ativo #bannerLogin,
body.login.pcli-nh-login-ativo .nh-brand,
body.login.pcli-nh-login-ativo .nh-senior {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ============================================================================
   9. RODAPE - Nova home ativa
   .nh-footer-elements e oculto por padrao. Quando a nova home esta ativa,
   N_Tema1.master.cs injeta um <style> no <head> que sobrescreve esta regra
   e aplica o restante do estilo do rodape. As regras detalhadas estao no
   bloco cssFooter de N_Tema1.master.cs. PCLI-6593.
   ============================================================================ */

.nh-footer-elements {
    display: none;
}


/* ============================================================================
   10. PREVIEW DO LOGIN - Tela Admin/PersonalizacaoHome.aspx
   Simula visualmente o login split-screen dentro de um popup DevExpress.
   Estas regras SO se aplicam dentro de .pv-login-preview (nao afetam a UI
   real do Login.aspx).
   ============================================================================ */

.pv-login-preview {
    width: 1000px;
    height: 650px;
    position: relative;
    overflow: hidden;
    background-color: #e8eef5;
    margin: 0;
    padding: 0;
    display: block;
}

.pv-login-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    z-index: 0;
    pointer-events: none;
}

/* Painel direito do preview - flex column centralizado, espelha o
   #margemBanner do login real. */
.pv-login-right-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 500px;
    z-index: 1;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pv-login-form {
    position: static;
    width: 295px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: transparent;
}

.pv-login-form .pv-field-row {
    width: 295px;
}

.pv-login-form .pv-field-row + .pv-field-row {
    margin-top: 13px;
}

.pv-login-form .pv-field {
    width: 100%;
    height: 24px;
    font: 9pt 'Segoe UI', Arial, sans-serif;
    color: #333;
    padding: 0 0 0 25px;
    border: 1px solid #ccc;
    background: #fff no-repeat left center;
    box-sizing: border-box;
}

.pv-login-form .pv-btn-row {
    width: 295px;
    margin-top: 16px;
}

/* Preview do botao Acessar - visualmente equivalente ao .btn-login-acessar */
.pv-btn-acessar {
    background-color: #00aced;
    color: #fff;
    border-radius: 4px;
    width: 100%;
    height: 34px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Open Sans', Arial, sans-serif;
    cursor: default;
}

.pv-btn-acessar:hover {
    background-color: #0090c5;
    cursor: pointer;
}

/* Preview do link Esqueci - visualmente equivalente ao .btn-login-senha-link */
.pv-btn-senha {
    color: #00aced;
    font-size: 14px;
    text-align: center;
    cursor: default;
}

.pv-btn-senha:hover {
    color: #0090c5;
    text-decoration: underline;
    cursor: pointer;
}


/* ============================================================================
   11. PAGINA DE CONFIGURACAO - Tela Admin/PersonalizacaoHome.aspx
   Estilos gerais da UI da propria tela admin (fieldsets, uploads, botoes).
   ============================================================================ */

.pv-container { max-width: 1000px; }

.pv-box {
    border: 1px solid #cfcfcf;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.pv-box legend {
    font-weight: 600;
    padding: 0 6px;
}

.pv-fieldset-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.pv-upload-section { min-width: 0; }

.pv-upload-section p {
    margin: 0 0 10px 0;
    color: #555;
    font-size: 13px;
}

.pv-remove-link {
    font-size: 8pt;
    color: #0066cc;
    cursor: pointer;
    text-decoration: underline;
    white-space: nowrap;
    margin-left: 8px;
}

.pv-remove-link:hover { color: #004499; }

.pv-preview-box {
    border: 1px solid #999;
    border-radius: 4px;
    width: 325px;
    height: 182px;
    padding: 6px;
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-left: auto;
}

.pv-preview-box img {
    max-width: 100%;
    max-height: 100%;
}

.pv-actions {
    text-align: right;
    margin: 2px 0 6px 0;
}

.pv-actions .dx-button {
    margin-left: 6px;
}