/* Engine v5 (canary #25721): estilos proprios da interface nova, sobre o Bootstrap 5 e temas.css. */

.eng-navbar {
  background-color: var(--eng-barra);
}

.eng-navbar .navbar-brand,
.eng-navbar .nav-link,
.eng-navbar .nav-link:hover,
.eng-navbar .nav-link:focus,
.eng-navbar .nav-link.show {
  color: var(--eng-texto-barra);
}

.eng-navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.5);
}

.eng-navbar .navbar-toggler-icon {
  filter: invert(1);
}

.eng-logo {
  height: 32px;
  width: auto;
}

/* Logo + titulo da aplicacao lado a lado (app_logo_com_titulo, Admsis Proteo, #25816). */
.eng-navbar .navbar-brand:has(.eng-logo-titulo) {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.eng-logo-simbolo {
  height: 28px;
}

.eng-logo-titulo {
  color: var(--eng-texto-barra);
  font-weight: 700;
  font-size: 1.1rem;
  white-space: nowrap;
}

.eng-menu-nivel {
  max-height: 70vh;
  overflow-y: auto;
}

.eng-menu-neto {
  padding-left: 2rem;
}

.eng-ordenar {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

.htmx-request .eng-carregando,
.htmx-request.eng-carregando {
  opacity: 0.6;
}

@media (min-width: 1200px) {
  .eng-navbar .nav-link {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
    font-size: 0.9rem;
  }
}

@media (min-width: 1400px) {
  .eng-navbar .nav-link {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }
}

.eng-pdf {
  display: block;
  width: 100%;
  height: 75vh;
  border: 0;
  /* O PDF sai como e', inclusive no modo escuro: o quadro fica claro (melhorias da v5, dia 2, §4.2). */
  color-scheme: light;
  background-color: var(--eng-pdf-fundo);
}

.d-contents {
  display: contents;
}

.eng-marcar {
  width: 2.5rem;
}

/* Janela de consulta (lookup): a linha inteira escolhe o registro. */
.eng-consulta-linha {
  cursor: pointer;
}

/* Carrossel de noticias (§4.15.2): imagem de fundo atras do texto, com camada escura. */
.eng-noticia {
  position: relative;
  min-height: 22rem;
  background-color: var(--bs-primary);
  color: var(--eng-texto-barra);
}

.eng-noticia-fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Imagem legada da v4 traz o proprio texto desenhado: inteira, sem cortar. */
.eng-noticia-fundo-legado {
  object-fit: contain;
  background-color: var(--eng-noticia-moldura);
}

.eng-noticia-texto {
  position: relative;
  min-height: 22rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem 3.5rem 2.75rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.15) 60%, transparent);
}

@media (max-width: 575.98px) {
  .eng-noticia,
  .eng-noticia-texto {
    min-height: 26rem;
  }

  .eng-noticia-texto {
    padding: 1rem 1rem 2.75rem;
  }
}

/* Aviso com quebra de linha do texto (Eng.avisar). */
.eng-texto-linhas {
    white-space: pre-line;
}

/* Destaques dos modulos de tela (o erp-campo-alerta e o erp-campo-info da v4: data de entrega
   alterada no ErpVenda, pedido na situacao 7 no ErpDanfe). Na lista vai na celula; na ficha, no
   bloco do campo.
   Na celula, o seletor repete o do Bootstrap (.table>:not(caption)>*>*, que da' a cor ao td):
   so' a classe perde para ele e o destaque some da lista. */
.erp-campo-alerta,
.erp-campo-alerta .form-control,
.erp-campo-alerta .form-control-plaintext,
.table > :not(caption) > * > .erp-campo-alerta {
    color: var(--bs-danger);
}

.erp-campo-lista-credito,
.table > :not(caption) > * > .erp-campo-lista-credito {
    color: var(--eng-destaque);
}

.erp-campo-lista-debito,
.table > :not(caption) > * > .erp-campo-lista-debito {
    color: var(--bs-danger);
}

.erp-campo-info,
.erp-campo-info .form-control,
.erp-campo-info .form-control-plaintext,
.erp-campo-info .form-select,
.table > :not(caption) > * > .erp-campo-info {
    color: var(--eng-destaque);
}

/* Campo de data com o calendario a esquerda (_BotaoCalendario): sem o icone nativo, que fica a direita.
   O Firefox nao deixa esconder o dele. */
.eng-data-calendario::-webkit-calendar-picker-indicator {
    display: none;
}

/* Coluna em destaque na lista (cam_css_classe_list), ex.: vencimento em Titulos a Pagar. */
.erp-campo-destaque,
.table > :not(caption) > * > .erp-campo-destaque {
    color: var(--eng-destaque);
    font-weight: 600;
}

/* Valor da linha mestre que mudou na ultima releitura (§4.12). */
/* Valor da linha mestre atualizado pelo detalhe: relampago verde com a dica "Valor atualizado". */
.eng-alterado-icone {
    display: inline-flex;
    vertical-align: -0.1em;
    margin-inline-start: .25rem;
    color: var(--bs-success);
    cursor: help;
}

/* Previa da imagem gravada num campo binario do formulario. */
.eng-imagem-campo {
    max-width: 320px;
    max-height: 240px;
    object-fit: contain;
}

/* Chave (booleano) do formulario: na altura de um input (38px), para alinhar com a linha da grade. */
.eng-chave {
    min-height: calc(1.5em + .75rem + 2px);
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 0;
}

.eng-chave .form-check-input {
    margin-top: 0;
}

/* Estado ao lado da chave, como no mockup: "Sim" ligada, "Não" desligada. */
.eng-chave .form-check-input:checked ~ .eng-nao,
.eng-chave .form-check-input:not(:checked) ~ .eng-sim {
    display: none;
}

/* Sub-tela embutida pelo valor do campo (o iframe da v4, ex.: "Componentes" do item): o botao do
   rotulo abre e fecha a lista, sem o triangulo do <details>. */
.eng-embutida > summary {
    list-style: none;
}

.eng-embutida > summary::-webkit-details-marker {
    display: none;
}

/* A tela inteira da sub-tela (lista ou ficha) num quadro, como o iframe da v4. */
.eng-embutida-tela {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 0.75rem;
}

/* Ficha de pesquisa da v4 (o FILTRO) na lista: "Pesquisar" esconde a lista e mostra o filtro; com a
   lista, o filtro some. data-eng-pesquisando vem do servidor e o engine.js troca no clique. */
.eng-lista[data-eng-pesquisando="1"] .eng-so-lista,
.eng-lista[data-eng-pesquisando="1"] .eng-registros,
.eng-lista[data-eng-pesquisando="0"] .eng-so-pesquisa,
.eng-lista[data-eng-pesquisando="0"] .eng-pesquisa {
    display: none !important;
}

/* Tela de espera de toda acao (o EngWaitingScreen da v4): pagina acinzentada, acima dos modais, com
   um quadro e o GIF animado do tema (v5/img/aguarde-<tema>.gif; no modo escuro, aguarde-<tema>-escuro.gif,
   porque o GIF e' opaco, com fundo branco). */
.eng-aguarde {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(33, 37, 41, 0.45);
    cursor: progress;
}

.eng-aguarde[hidden] {
    display: none;
}

/* Lista sendo restaurada (restauracao.js): o conteudo fica escondido atras da tela de espera ate' a
   lista chegar, sem mostrar antes a ficha de pesquisa do modo padrao. */
[data-eng-restaurando] #eng-conteudo {
    visibility: hidden;
}

[data-eng-restaurando] .eng-aguarde[hidden] {
    display: flex;
}

.eng-aguarde-quadro {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 14rem;
    padding: 1.25rem 1.75rem;
    border-radius: var(--bs-border-radius-lg);
    background: var(--eng-quadro);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
    font-weight: 500;
}

.eng-aguarde-escuro,
[data-bs-theme="dark"] .eng-aguarde-claro {
    display: none;
}

[data-bs-theme="dark"] .eng-aguarde-escuro {
    display: inline;
}

/* Linha mestre em grade densa (opcao C, 05/10/2026): rotulo pequeno ao lado do valor, uma linha por
   campo com reticencias (o valor inteiro fica na dica); texto longo ocupa duas colunas. */
.eng-mestre-grade {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .25rem 1.5rem;
    margin: 0;
}

.eng-mestre-item {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    min-width: 0;
}

.eng-mestre-item dt {
    flex: none;
    font-size: .72rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.eng-mestre-item dd {
    display: flex;
    align-items: baseline;
    min-width: 0;
    min-height: 1.5em;
    margin: 0;
}

.eng-mestre-valor {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eng-mestre-item .eng-alterado-icone {
    flex: none;
}

.eng-mestre-largo {
    grid-column: span 2;
}

@media (max-width: 1199.98px) {
    .eng-mestre-grade {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .eng-mestre-grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .4rem 1rem;
    }

    .eng-mestre-item {
        display: block;
    }
}

/* Barra de acoes fixa no rodape no celular (§4.14.9 do plano): a principal em destaque e as demais no
   "⋯". A botoeira de origem (marcada pelo engine.js com eng-barra-origem) some no celular; os itens da
   barra clicam nos botoes originais. */
.eng-barra-celular,
.eng-barra-celular-fundo {
    display: none;
}

@media (max-width: 767.98px) {
    .eng-barra-celular:not([hidden]) {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1030;
        display: flex;
        gap: .5rem;
        padding: .5rem 1rem calc(.5rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--bs-border-color);
        background: var(--bs-body-bg);
        box-shadow: 0 -.25rem .75rem rgba(0, 0, 0, .08);
    }

    .eng-barra-celular-principal {
        display: flex;
        flex: 1;
        min-width: 0;
    }

    .eng-barra-celular-principal .btn {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .eng-barra-celular-mais {
        min-width: 3rem;
        font-weight: 700;
    }

    /* Folha de acoes: largura inteira, colada no topo da barra (o containing block e' a propria barra,
       que e' fixed), itens com alvo de toque de 48px e o titulo do grupo como divisoria. A altura
       maxima deixa a barra de endereco e um respiro acima; passou disso, rola so' a folha. */
    .eng-barra-celular .dropup {
        position: static;
    }

    .eng-barra-celular .dropup .dropdown-menu[data-bs-popper] {
        right: 0;
        bottom: 100%;
        left: 0;
        width: 100%;
        max-height: calc(100dvh - 9rem);
        margin: 0;
        padding: .5rem 0 .25rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-width: 1px 0 0;
        border-radius: 1rem 1rem 0 0;
        box-shadow: 0 -.5rem 1.5rem rgba(0, 0, 0, .18);
        font-size: 1rem;
    }

    .eng-barra-celular .dropdown-item {
        display: flex;
        align-items: center;
        min-height: 3rem;
        padding: .5rem 1.25rem;
        white-space: normal;
    }

    .eng-barra-celular li + li > .dropdown-item {
        border-top: 1px solid var(--bs-border-color-translucent);
    }

    .eng-barra-celular li:has(> .dropdown-header) + li > .dropdown-item {
        border-top: 0;
    }

    .eng-barra-celular .dropdown-header {
        margin-top: .5rem;
        padding: .75rem 1.25rem .375rem;
        border-top: 1px solid var(--bs-border-color);
        font-size: .75rem;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .eng-barra-celular li:first-child > .dropdown-header {
        margin-top: 0;
        border-top: 0;
    }

    /* Fundo escurecido abaixo da barra (z-index 1030) enquanto a folha esta aberta: separa a folha da
       ficha e o toque nele fecha o menu (clique fora do Bootstrap) sem acionar o que estiver atras. */
    body.eng-barra-celular-aberta .eng-barra-celular-fundo {
        position: fixed;
        inset: 0;
        z-index: 1029;
        display: block;
        background: rgba(0, 0, 0, .4);
    }

    body.eng-com-barra-celular main {
        padding-bottom: 5rem !important;
    }

    /* Chat do tawk.to (ErpChat do application.js): o botao fica acima da barra (72px do rodape), entao
       a pagina rola ate o fim dela passar do botao - senao ele cobre o numero da tela da lista. */
    body.erp-com-chat main {
        padding-bottom: 9rem !important;
    }

    .eng-barra-origem,
    .eng-barra-origem-botoes > .btn {
        display: none !important;
    }
}

/* ------------------------------------------------------------------------------------------------
   Densidade e acabamento do preview dos anuncios (mockup 2026-09-30, paginas 02 e 11), pedido do
   Flavio em 09/10/2026: fonte menor, rotulo pequeno, campos e botoes compactos, abas sublinhadas,
   cabecalho da tabela com fundo claro. So' no conteudo e no menu; o celular segue o mesmo desenho.
   ------------------------------------------------------------------------------------------------ */
.eng-navbar {
    min-height: 3.5rem;
    padding-top: 0;
    padding-bottom: 0;
}

.eng-navbar .nav-link {
    font-size: .875rem;
    font-weight: 500;
}

.eng-navbar .navbar-nav > .nav-item > .nav-link.show {
    box-shadow: inset 0 -2px 0 var(--eng-texto-barra);
}

.eng-navbar .dropdown-menu {
    font-size: .875rem;
}

#eng-conteudo {
    font-size: .8125rem;
}

#eng-conteudo .breadcrumb {
    font-size: .75rem;
}

#eng-conteudo h1.h4 {
    font-size: 1.25rem;
    font-weight: 600;
}

#eng-conteudo .form-label {
    margin-bottom: .2rem;
    font-size: .75rem;
    font-weight: 500;
}

/* Campo obrigatorio da ficha (data-eng-obrigatorio="1", pedido do Flavio em 14/10/2026: cor destacada,
   nao so' o "*"): rotulo na cor da marca, faixa a esquerda e fundo tingido no campo. Somente leitura e
   chave (booleano) ficam como estao. Sempre pelo valor "1": o Razor escreve o data-* vazio quando nulo.
   No campo de consulta (input-group), a faixa vai so' no primeiro elemento, a lupa. */
#eng-conteudo [data-eng-obrigatorio="1"] > .form-label {
    color: var(--eng-destaque);
    font-weight: 600;
}

#eng-conteudo [data-eng-obrigatorio="1"] .form-control:not([type=file]),
#eng-conteudo [data-eng-obrigatorio="1"] .form-select {
    background-color: var(--eng-obrigatorio-fundo);
}

#eng-conteudo [data-eng-obrigatorio="1"] > .form-control:not([type=file]),
#eng-conteudo [data-eng-obrigatorio="1"] > .form-select,
#eng-conteudo [data-eng-obrigatorio="1"] :not(.input-group) > .form-control:not([type=file]),
#eng-conteudo [data-eng-obrigatorio="1"] :not(.input-group) > .form-select,
#eng-conteudo [data-eng-obrigatorio="1"] .input-group > :first-child {
    border-left: 3px solid var(--eng-destaque);
}

#eng-conteudo .form-control,
#eng-conteudo .form-select,
#eng-conteudo .input-group-text {
    padding-top: .3rem;
    padding-bottom: .3rem;
    font-size: .8125rem;
}

#eng-conteudo .form-control,
#eng-conteudo .input-group-text {
    padding-left: .65rem;
    padding-right: .65rem;
}

#eng-conteudo .form-select {
    padding-left: .65rem;
}

/* A lista aberta do <select> e' desenhada pelo sistema: no Chrome do Windows ela saiu com as opcoes em
   branco usando a fonte web (Poppins) da v5. Opcao com fonte do sistema e cor explicita. #25721 */
#eng-conteudo .form-select option {
    font-family: "Segoe UI", system-ui, sans-serif;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

/* Lista de varios valores (filtros dos relatorios, pesquisa): o fundo acima apagava o destaque dos itens
   marcados quando a lista perdia o foco, e o usuario achava que a selecao do Grupo sumia ao marcar a
   Situacao (R2034, 24/10/2026). Marcado com destaque proprio, com ou sem foco. */
#eng-conteudo .form-select[multiple] option:checked {
    color: #fff;
    background-color: var(--bs-primary);
}

#eng-conteudo .form-control-plaintext {
    padding-top: .3rem;
    padding-bottom: .3rem;
    font-size: .8125rem;
}

#eng-conteudo .form-text {
    font-size: .7rem;
}

#eng-conteudo .row.g-3 {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: .75rem;
}

#eng-conteudo .btn:not(.btn-sm):not(.btn-lg) {
    --bs-btn-padding-y: .3rem;
    --bs-btn-padding-x: .75rem;
    --bs-btn-font-size: .8125rem;
}

#eng-conteudo .btn-sm {
    --bs-btn-font-size: .75rem;
}

/* Chave (booleano) na altura do input compacto. */
#eng-conteudo .eng-chave {
    min-height: calc(1.5em + .6rem + 2px);
}

#eng-conteudo .card {
    --bs-card-border-color: var(--admsis-borda);
    --bs-card-border-radius: .5rem;
}

#eng-conteudo .card-header {
    font-size: .8125rem;
    font-weight: 600;
    background-color: var(--bs-tertiary-bg);
}

/* Abas sublinhadas, dentro do mesmo quadro do painel. */
#eng-conteudo .nav-tabs {
    --bs-nav-tabs-border-width: 0;
    gap: .25rem;
    padding: 0 .75rem;
    border: 1px solid var(--admsis-borda);
    border-bottom-color: var(--admsis-borda);
    border-radius: .5rem .5rem 0 0;
    background: var(--bs-body-bg);
}

#eng-conteudo .nav-tabs .nav-link {
    padding: .7rem .6rem;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--bs-body-color);
    font-size: .8125rem;
}

#eng-conteudo .nav-tabs .nav-link:hover {
    color: var(--eng-destaque);
}

#eng-conteudo .nav-tabs .nav-link.active {
    border-bottom-color: var(--eng-destaque);
    color: var(--eng-destaque);
    font-weight: 500;
    background: transparent;
}

#eng-conteudo .eng-paineis {
    border-color: var(--admsis-borda) !important;
    border-radius: 0 0 .5rem .5rem !important;
}

/* Tabela: cabecalho em fundo claro, linhas compactas. */
#eng-conteudo .table {
    --bs-table-hover-bg: var(--bs-tertiary-bg);
    font-size: .8125rem;
}

#eng-conteudo .table > thead th {
    padding-top: .55rem;
    padding-bottom: .55rem;
    background-color: var(--bs-tertiary-bg);
    font-size: .75rem;
    font-weight: 600;
    vertical-align: bottom;
}

#eng-conteudo .table > tbody td {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

#eng-conteudo .card-footer {
    font-size: .75rem;
}

/* ------------------------------------------------------------------------------------------------
   Preview dos anuncios, segunda passada (09/10/2026, pedido do Flavio): pagina em fundo levemente
   roxo (--eng-fundo do tema) com os blocos em quadros brancos; barra superior com o menu ativo
   sublinhado, a empresa numa pilula e o usuario com as iniciais; botoes secundarios brancos.
   ------------------------------------------------------------------------------------------------ */
body {
    background-color: var(--eng-fundo);
}

#eng-conteudo {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Menu: item ativo (o menu da tela aberta) sublinhado em branco. */
.eng-navbar .navbar-nav > .nav-item > .nav-link.active,
.eng-navbar .navbar-nav > .nav-item > .nav-link.active:hover {
    color: var(--eng-texto-barra);
    font-weight: 600;
}

@media (min-width: 1200px) {
    .eng-navbar {
        min-height: 3.75rem;
    }

    .eng-navbar .navbar-nav > .nav-item > .nav-link {
        display: flex;
        align-items: center;
        min-height: 3.75rem;
    }

    .eng-navbar .navbar-nav > .nav-item > .nav-link.active {
        box-shadow: inset 0 -3px 0 var(--eng-texto-barra);
    }
}

.eng-navbar .dropdown-toggle::after {
    margin-left: .3em;
    vertical-align: .15em;
    border-top-width: .28em;
    border-right-width: .28em;
    border-left-width: .28em;
}

.eng-empresa {
    display: inline-block;
    max-width: 18rem;
    padding: .3rem .75rem;
    overflow: hidden;
    border: 0;
    border-radius: .375rem;
    background: var(--eng-pilula);
    color: var(--eng-texto-barra);
    font-size: .8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

button.eng-empresa:hover {
    background: rgba(255, 255, 255, 0.26);
}

.eng-usuario {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.eng-usuario.dropdown-toggle::after {
    display: none;
}

.eng-avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--eng-avatar-fundo);
    color: var(--bs-primary);
    font-size: .75rem;
    font-weight: 700;
}

.eng-usuario-nome {
    font-weight: 600;
    font-size: .8125rem;
}

/* Quadros brancos sobre o fundo. */
#eng-conteudo .card {
    --bs-card-bg: var(--eng-quadro);
    --bs-card-cap-bg: var(--eng-quadro);
}

#eng-conteudo .card-header {
    background-color: var(--eng-quadro);
}

#eng-conteudo .card-footer {
    background-color: var(--eng-quadro);
}

/* Botoes secundarios brancos com borda clara, como "Voltar", "Copiar" e "Mais acoes" do preview. */
#eng-conteudo .btn-outline-secondary,
#eng-conteudo .btn-outline-primary {
    --bs-btn-bg: var(--eng-quadro);
    --bs-btn-border-color: var(--admsis-borda);
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-tertiary-bg);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-tertiary-bg);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-active-color: var(--bs-primary);
    font-weight: 500;
}

#eng-conteudo .btn-primary {
    font-weight: 500;
}

/* Abas e painel: um quadro branco so', abas sublinhadas no topo e o conteudo encostado. */
#eng-conteudo .eng-abas {
    margin-bottom: 0;
    background: var(--eng-quadro);
}

#eng-conteudo .eng-paineis {
    padding: 0 !important;
    background: var(--eng-quadro);
}

#eng-conteudo .eng-paineis .card {
    border: 0;
    border-radius: 0;
}

#eng-conteudo .eng-paineis .eng-cabecalho {
    margin: 0 !important;
    padding: .75rem 1rem;
}

#eng-conteudo .eng-paineis .eng-registros {
    border-top: 1px solid var(--admsis-borda);
}

#eng-conteudo .eng-paineis .card-body.p-0 {
    padding: 1rem !important;
}

#eng-conteudo .eng-paineis .card-footer.px-0 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

#eng-conteudo .eng-paineis > .tab-pane > .alert,
#eng-conteudo .eng-paineis .eng-lista > .alert {
    margin: .75rem 1rem;
}

/* Tabela: cabecalho lavanda dentro do quadro branco, link da 1a coluna na cor primaria. */
#eng-conteudo .table {
    --bs-table-bg: var(--eng-quadro);
    margin-bottom: 0;
}

#eng-conteudo .table > thead th {
    background-color: var(--eng-tabela-cabecalho);
    border-bottom-color: var(--admsis-borda);
    color: var(--bs-body-color);
}

#eng-conteudo .table > :not(caption) > * > * {
    border-bottom-color: var(--eng-linha);
}

#eng-conteudo .table > tbody > tr > td:first-child,
#eng-conteudo .table > thead > tr > th:first-child {
    padding-left: 1rem;
}

#eng-conteudo .table .eng-abrir {
    text-decoration: none;
    font-weight: 500;
}

#eng-conteudo .table .eng-abrir:hover {
    text-decoration: underline;
}

/* Demais colunas da lista: link para a ficha com a cor do texto, sublinhado ao passar o mouse. */
#eng-conteudo .table .eng-abrir-celula {
    color: inherit;
    text-decoration: none;
}

#eng-conteudo .table .eng-abrir-celula:hover {
    text-decoration: underline;
}

/* Linha mestre: quadro branco. */
#eng-conteudo .eng-mestre {
    --bs-card-bg: var(--eng-quadro);
}

/* Breadcrumb como no preview: links na cor primaria, sem sublinhado. */
#eng-conteudo .breadcrumb a {
    text-decoration: none;
}

/* Pesquisa com um campo por linha (tel_campos_linha_search ou tel_campos_linha = 1, inclusive sobreposto
   por empresa em engtb_screen_empresa): rotulo a esquerda (3/12) e campo a direita, como o form
   horizontal da v4; no celular, empilhado. Na ficha e no Novo o rotulo fica em cima (Flavio, 09/10/2026). */
@media (min-width: 768px) {
    #eng-conteudo .eng-uma-coluna > [data-eng-campo] {
        display: grid;
        grid-template-columns: minmax(9rem, 25%) minmax(0, 1fr);
        column-gap: 1rem;
        align-items: center;
    }

    #eng-conteudo .eng-uma-coluna > [data-eng-campo] > .form-label {
        grid-column: 1;
        margin-bottom: 0;
        text-align: right;
    }

    #eng-conteudo .eng-uma-coluna > [data-eng-campo] > :not(.form-label) {
        grid-column: 2;
    }

    #eng-conteudo .eng-uma-coluna {
        --bs-gutter-y: .5rem;
    }
}

/* Barra superior com muitos menus: o nome do usuario so' em tela larga (no menu dele, sempre). */
@media (min-width: 1200px) and (max-width: 1599.98px) {
    .eng-usuario-nome {
        display: none;
    }

    .eng-navbar .navbar-nav > .nav-item > .nav-link {
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .eng-empresa {
        max-width: 10rem;
    }
}

/* Paginacao pequena, como no preview. */
#eng-conteudo .pagination {
    --bs-pagination-font-size: .75rem;
    --bs-pagination-padding-y: .2rem;
    --bs-pagination-padding-x: .55rem;
    --bs-pagination-border-color: var(--admsis-borda);
}

/* Lista: icone de editar no link da 1a coluna e a linha inteira clicavel (como a v4). */
#eng-conteudo .eng-icone-editar {
    margin-right: .4rem;
    vertical-align: -.1em;
    opacity: .75;
}

#eng-conteudo tr.eng-linha-abrir,
#eng-conteudo td.eng-celula-abrir {
    cursor: pointer;
}

/* Botao so' com icone (Recarregar). */
#eng-conteudo .eng-botao-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
}

#eng-conteudo .table .eng-abrir {
    white-space: nowrap;
}

/* Linha mestre recolhida (opcao D, Flavio, 10/10/2026): resumo numa linha (referencia, texto longo,
   situacao, total) e "Detalhes" para a grade densa. */
.eng-mestre-detalhes > summary {
    list-style: none;
}

.eng-mestre-detalhes > summary::-webkit-details-marker {
    display: none;
}

.eng-mestre-resumo {
    display: flex;
    align-items: center;
    gap: .5rem 1rem;
    min-width: 0;
    padding: .55rem 1rem;
    cursor: pointer;
}

.eng-mestre-r {
    display: inline-flex;
    align-items: center;
    flex: none;
    min-width: 0;
    max-width: 100%;
    font-weight: 500;
}

.eng-mestre-r-referencia {
    font-size: 1rem;
    font-weight: 700;
}

.eng-mestre-r-longo {
    flex: 0 1 auto;
}

.eng-mestre-r-total {
    color: var(--eng-destaque);
    font-size: 1rem;
    font-weight: 700;
}

.eng-mestre-rotulo {
    margin-right: .35rem;
    color: var(--bs-secondary-color);
    font-size: .75rem;
    font-weight: 400;
}

.eng-mestre-r-valor {
    font-weight: 600;
}

.eng-mestre-r .eng-mestre-valor {
    min-width: 0;
}

.eng-mestre-abrir {
    flex: none;
    margin-left: auto;
}

.eng-mestre-abrir-aberto,
.eng-mestre-detalhes[open] .eng-mestre-abrir-fechado {
    display: none;
}

.eng-mestre-detalhes[open] .eng-mestre-abrir-aberto {
    display: inline;
}

.eng-mestre-detalhes > .eng-mestre-grade {
    padding: .5rem 1rem .6rem;
    border-top: 1px solid var(--admsis-borda);
}

#eng-conteudo .eng-mestre-item dd {
    font-size: .8125rem;
    font-weight: 500;
}

@media (max-width: 767.98px) {
    .eng-mestre-resumo {
        flex-wrap: wrap;
        gap: .25rem .75rem;
    }

    .eng-mestre-r-longo {
        flex-basis: 100%;
        order: 5;
    }

    .eng-mestre-r-longo .eng-mestre-valor {
        white-space: normal;
    }
}

/* Formulario mais denso (pedido do Flavio, 10/10/2026): menos espaco entre as linhas, rotulo colado
   no campo e campos mais baixos (30px), inclusive o valor somente leitura. */
#eng-conteudo .row.g-3 {
    --bs-gutter-y: .45rem;
}

#eng-conteudo .form-label {
    margin-bottom: .1rem;
    font-size: .72rem;
    line-height: 1.3;
}

#eng-conteudo .form-control,
#eng-conteudo .form-select,
#eng-conteudo .input-group-text,
#eng-conteudo .form-control-plaintext {
    padding-top: .2rem;
    padding-bottom: .2rem;
    line-height: 1.35;
}

#eng-conteudo .form-select {
    background-position: right .55rem center;
}

#eng-conteudo .input-group > .btn {
    --bs-btn-padding-y: .2rem;
}

#eng-conteudo .eng-chave {
    min-height: calc(1.35em + .4rem + 2px);
}

/* Icone de editar antes do campo editavel da 1a coluna (lista editavel), alinhado com ele. */
#eng-conteudo .eng-abrir-icone {
    display: inline-flex;
    vertical-align: middle;
}

#eng-conteudo .eng-abrir-icone .eng-icone-editar {
    margin-right: 0;
}

/* ---- Relatorio em segundo plano (#25710): tela de processamento ----
   Ilustracao de folha sendo escrita, engrenagem girando e barra continua, so com CSS (a CSP
   da v5 nao aceita estilo inline). Cor do tema (text-primary); sem movimento com
   prefers-reduced-motion. */
.erp-rel-fila { text-align: center; padding: 8px 4px; }
.erp-rel-fila-ilustracao { display: block; width: 120px; height: 120px; margin: 0 auto 8px; }
.erp-rel-folha { fill: none; stroke: currentColor; stroke-width: 3; }
.erp-rel-linha { fill: currentColor; opacity: .25; transform-box: fill-box; transform-origin: left center; animation: erp-rel-escrever 2.4s ease-in-out infinite; }
.erp-rel-linha-2 { animation-delay: .3s; }
.erp-rel-linha-3 { animation-delay: .6s; }
.erp-rel-linha-4 { animation-delay: .9s; }
.erp-rel-engrenagem { fill: none; stroke: currentColor; stroke-width: 5; stroke-dasharray: 6 4; transform-box: fill-box; transform-origin: center; animation: erp-rel-girar 3s linear infinite; }
.erp-rel-engrenagem .erp-rel-eixo { stroke-width: 3; stroke-dasharray: none; }
.erp-rel-fila-barra { position: relative; height: 6px; max-width: 280px; margin: 12px auto; overflow: hidden; border-radius: 3px; background: rgba(0, 0, 0, .08); }
.erp-rel-fila-barra span { position: absolute; top: 0; bottom: 0; left: -35%; width: 35%; border-radius: 3px; background: currentColor; animation: erp-rel-varrer 1.6s ease-in-out infinite; }
.erp-rel-fila-frase { min-height: 1.5em; margin-bottom: 4px; font-weight: 600; }
.erp-rel-fila-tempo, .erp-rel-fila-posicao, .erp-rel-fila-conexao { margin-bottom: 4px; color: var(--bs-body-color); }
.erp-rel-fila-conexao { font-style: italic; }
.erp-rel-fila-nota { margin: 12px 0 0; font-size: .85em; color: var(--bs-secondary-color); }
.erp-rel-fila .btn { margin-top: 12px; }
@keyframes erp-rel-escrever { 0% { transform: scaleX(0); opacity: .25; } 50% { transform: scaleX(1); opacity: .9; } 100% { transform: scaleX(1); opacity: .25; } }
@keyframes erp-rel-girar { to { transform: rotate(360deg); } }
@keyframes erp-rel-varrer { 0% { left: -35%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
    .erp-rel-linha, .erp-rel-engrenagem, .erp-rel-fila-barra span { animation: none; }
    .erp-rel-linha { opacity: .6; }
    .erp-rel-fila-barra span { left: 0; width: 100%; opacity: .4; }
}

/* ---- Home (#25721): cards de atalho ----
   O card inteiro e' o link (alvo de toque no celular). Icone em circulo com a cor do tema, titulo,
   texto de apoio (grupo do menu ou aviso) e seta. Aviso (Urgente/Importante) ocupa a linha toda,
   com faixa lateral. No celular a lista fica compacta; a partir do sm vira grade. */
.eng-home-saudacao {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: .75rem;
}

.eng-home-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 100%;
    min-height: 4rem;
    padding: .75rem .875rem;
    color: var(--bs-body-color);
    text-decoration: none;
    background-color: var(--eng-quadro);
    border: 1px solid var(--admsis-borda);
    border-radius: .75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.eng-home-card-link:hover {
    color: var(--bs-body-color);
    border-color: var(--bs-primary);
    box-shadow: 0 4px 14px rgba(var(--bs-primary-rgb), .14);
    transform: translateY(-1px);
}

.eng-home-card-link:active {
    transform: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.eng-home-card-link:focus-visible {
    outline: 0;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

.eng-home-card-icone {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--eng-destaque);
    background-color: var(--bs-primary-bg-subtle);
    border-radius: 50%;
}

.eng-home-card-corpo {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.eng-home-card-titulo {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
}

.eng-home-card-texto {
    margin-top: .125rem;
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--bs-secondary-color);
    white-space: pre-line;
}

.eng-home-card-seta {
    flex: 0 0 auto;
    color: var(--admsis-borda);
    transition: color .15s ease, transform .15s ease;
}

.eng-home-card-link:hover .eng-home-card-seta {
    color: var(--eng-destaque);
    transform: translateX(2px);
}

/* Avisos: faixa lateral e icone na cor do alerta; texto do aviso em cor de leitura. */
.eng-home-card-urgente,
.eng-home-card-importante {
    align-items: flex-start;
    border-left-width: 4px;
}

.eng-home-card-urgente { border-left-color: var(--bs-danger); }
.eng-home-card-importante { border-left-color: var(--bs-warning); }

.eng-home-card-urgente .eng-home-card-icone {
    color: var(--bs-danger);
    background-color: var(--bs-danger-bg-subtle);
}

.eng-home-card-importante .eng-home-card-icone {
    color: var(--bs-warning-text-emphasis);
    background-color: var(--bs-warning-bg-subtle);
}

.eng-home-card-urgente .eng-home-card-texto,
.eng-home-card-importante .eng-home-card-texto {
    color: var(--bs-body-color);
}

.eng-home-card-urgente .eng-home-card-seta,
.eng-home-card-importante .eng-home-card-seta {
    align-self: center;
}

@media (min-width: 576px) {
    .eng-home-saudacao { font-size: 1.5rem; margin-bottom: 1rem; }
    .eng-home-card { min-height: 4.75rem; padding: 1rem 1.125rem; gap: .875rem; }
    .eng-home-card-icone { width: 2.75rem; height: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .eng-home-card,
    .eng-home-card-seta { transition: none; }
    .eng-home-card-link:hover,
    .eng-home-card-link:hover .eng-home-card-seta { transform: none; }
}

/* Trocar senha na janela da v4 (EngTrocarSenha, no iframe): o conteudo do modal da v5, sem a moldura,
   que e' a da janela da v4 por fora. */
.eng-senha-janela {
    background: transparent;
}

.eng-senha-janela .modal-content {
    border: 0;
    box-shadow: none;
}

/* Login da v5 (Views/V5/Login/Index.cshtml, mockups 01 e 04 da §4.14.9): painel da marca na cor da
   barra da aplicacao, com o mesmo logo da navbar, e o formulario ao lado. No celular o painel vira
   uma faixa no topo, so' com o logo. Cores so' das variaveis do tema (temas.css). */
.eng-login {
    min-height: 100vh;
    background: var(--eng-quadro);
}

.eng-login-grade {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.eng-login-marca {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--eng-barra);
    color: var(--eng-texto-barra);
}

/* Circulos decorativos do mockup, em branco translucido sobre a cor da marca. */
.eng-login-marca::before,
.eng-login-marca::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    pointer-events: none;
}

.eng-login-marca::before {
    width: 26rem;
    height: 26rem;
    top: -10rem;
    right: -9rem;
}

.eng-login-marca::after {
    width: 15rem;
    height: 15rem;
    bottom: -7rem;
    left: 45%;
}

.eng-login-logo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.eng-login-chamada,
.eng-login-rodape {
    display: none;
    position: relative;
}

/* Logo para fundo claro (app_login_logo) acima do formulario: so' no tema nfe, em que o logo colorido
   do NF-e Simples e do APM Simples some no azul do painel (mockup 04). Nele, o painel fica sem logo. */
.eng-login-logo-form {
    display: none;
    height: 40px;
    width: auto;
    margin-bottom: 1.5rem;
}

[data-eng-tema="nfe"] .eng-login-logo-form {
    display: block;
}

/* No celular, o painel do nfe vira so' uma faixa fina na cor da marca. */
[data-eng-tema="nfe"] .eng-login-marca .eng-login-logo {
    display: none;
}

[data-eng-tema="nfe"] .eng-login-marca {
    padding-block: 0.25rem;
}

.eng-login-chamada h2 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

.eng-login-chamada p {
    max-width: 28rem;
    opacity: 0.9;
}

.eng-login-rodape {
    font-size: 0.75rem;
}

.eng-login-rodape > p:last-child {
    opacity: 0.75;
    margin: 0;
}

/* Aviso global vigente (engtb_login_message sem empresa): uma mensagem so', em cartao translucido. */
.eng-login-aviso {
    max-width: 28rem;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.12);
}

.eng-login-aviso p {
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.eng-login-aviso .eng-login-aviso-titulo {
    font-weight: 600;
    opacity: 1;
}

.eng-login-aviso a,
.eng-login-marca .eng-login-suporte a {
    color: inherit;
    font-weight: 600;
}

/* Contato do suporte: itens separados por ponto; no painel, em fonte maior que a do rodape. */
.eng-login-suporte {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
}

.eng-login-suporte > span + span::before {
    content: "·";
    margin-right: 0.5rem;
}

.eng-login-suporte > span:first-child {
    font-weight: 600;
}

/* No celular o painel nao mostra o rodape: o suporte vai para baixo do formulario. */
.eng-login-suporte-celular {
    margin-top: 2rem;
    color: var(--bs-secondary-color);
}

.eng-login-suporte-celular .eng-login-suporte {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.eng-login-suporte-celular .eng-login-suporte > span + span::before {
    content: none;
}

.eng-login-painel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 2rem 1.25rem;
}

.eng-login-form {
    width: 100%;
    max-width: 22rem;
}

.eng-login-form .form-control {
    font-size: 1rem; /* 16 px: o iOS nao da' zoom no foco */
}

.eng-login-mostrar {
    font-size: 0.8125rem;
}

.eng-login-ou {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
}

.eng-login-ou::before,
.eng-login-ou::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--bs-border-color);
}

.eng-login-google {
    display: flex;
    justify-content: center;
    min-height: 44px;
}

@media (min-width: 992px) {
    .eng-login-grade {
        flex-direction: row;
    }

    .eng-login-marca {
        flex: 0 0 52%;
        justify-content: space-between;
        padding: 3rem 3.5rem;
    }

    .eng-login-marca .eng-logo {
        height: 40px;
    }

    [data-eng-tema="nfe"] .eng-login-marca {
        padding-block: 3rem;
    }

    [data-eng-tema="nfe"] .eng-login-marca .eng-login-logo {
        display: flex;
        visibility: hidden;
    }

    .eng-login-marca .eng-logo-simbolo {
        height: 36px;
    }

    .eng-login-marca .eng-logo-titulo {
        font-size: 1.4rem;
    }

    .eng-login-chamada,
    .eng-login-rodape {
        display: block;
    }

    .eng-login-suporte-celular {
        display: none;
    }

    .eng-login-painel {
        justify-content: center;
        padding: 3rem 2rem;
    }
}