/* Nexei v286 - visualizador com o mesmo menu e cabecalho das telas principais. */

/*
 * O projeto possui regras legadas que recolhem a sidebar exclusivamente na pagina
 * de visualizacao. Esta folha e carregada por ultimo e neutraliza essas regras sem
 * alterar o comportamento das demais paginas.
 */

@media (min-width:901px){
  body.page-view,
  body.nexei-view-mode{
    --nexei-sidebar:236px!important;
  }

  /* Sidebar: mesmas medidas e estrutura da tela Meus processos. */
  body.page-view .sidebar,
  body.page-view .sidebar:hover,
  body.nexei-view-mode .sidebar,
  body.nexei-view-mode .sidebar:hover{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:236px!important;
    min-width:236px!important;
    max-width:236px!important;
    height:100vh!important;
    padding:22px 18px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    overflow:hidden!important;
    transform:none!important;
    transition:none!important;
    box-sizing:border-box!important;
    z-index:3000!important;
  }

  body.page-view .sidebar::after,
  body.page-view .sidebar:hover::after,
  body.nexei-view-mode .sidebar::after,
  body.nexei-view-mode .sidebar:hover::after{
    content:none!important;
    display:none!important;
  }

  body.page-view .sidebar .brand,
  body.page-view .sidebar:hover .brand,
  body.nexei-view-mode .sidebar .brand,
  body.nexei-view-mode .sidebar:hover .brand{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    align-self:stretch!important;
    gap:12px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:48px!important;
    margin:0 0 34px!important;
    padding:0!important;
    overflow:visible!important;
    transform:none!important;
    transition:none!important;
    box-sizing:border-box!important;
  }

  body.page-view .sidebar .brand-mark,
  body.page-view .sidebar:hover .brand-mark,
  body.nexei-view-mode .sidebar .brand-mark,
  body.nexei-view-mode .sidebar:hover .brand-mark{
    display:grid!important;
    place-items:center!important;
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    flex:0 0 42px!important;
    margin:0!important;
    font-size:24px!important;
    transform:none!important;
  }

  body.page-view .sidebar .brand > div:not(.brand-mark),
  body.page-view .sidebar:hover .brand > div:not(.brand-mark),
  body.page-view .sidebar .brand-text,
  body.page-view .sidebar:hover .brand-text,
  body.nexei-view-mode .sidebar .brand > div:not(.brand-mark),
  body.nexei-view-mode .sidebar:hover .brand > div:not(.brand-mark),
  body.nexei-view-mode .sidebar .brand-text,
  body.nexei-view-mode .sidebar:hover .brand-text{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    flex:0 1 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:calc(100% - 54px)!important;
    color:inherit!important;
    font-size:inherit!important;
    line-height:normal!important;
    text-indent:0!important;
    overflow:visible!important;
    transform:none!important;
  }

  body.page-view .sidebar nav,
  body.page-view .sidebar:hover nav,
  body.nexei-view-mode .sidebar nav,
  body.nexei-view-mode .sidebar:hover nav{
    display:grid!important;
    width:100%!important;
    min-width:0!important;
    gap:8px!important;
    align-content:start!important;
    justify-items:stretch!important;
    margin:0!important;
    padding:0!important;
  }

  body.page-view .sidebar nav a,
  body.page-view .sidebar:hover nav a,
  body.nexei-view-mode .sidebar nav a,
  body.nexei-view-mode .sidebar:hover nav a{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:12px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:46px!important;
    height:auto!important;
    margin:0!important;
    padding:12px 14px!important;
    border-radius:14px!important;
    box-sizing:border-box!important;
    white-space:nowrap!important;
    font-size:13px!important;
    line-height:normal!important;
    text-indent:0!important;
    transform:none!important;
    transition:background .15s ease,color .15s ease!important;
    overflow:hidden!important;
  }

  body.page-view .sidebar .nav-text,
  body.page-view .sidebar:hover .nav-text,
  body.nexei-view-mode .sidebar .nav-text,
  body.nexei-view-mode .sidebar:hover .nav-text{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    width:auto!important;
    min-width:0!important;
    color:inherit!important;
    font-size:13px!important;
    line-height:normal!important;
    text-indent:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    transform:none!important;
  }

  body.page-view .sidebar .user-card,
  body.page-view .sidebar:hover .user-card,
  body.nexei-view-mode .sidebar .user-card,
  body.nexei-view-mode .sidebar:hover .user-card{
    position:absolute!important;
    left:18px!important;
    right:18px!important;
    bottom:22px!important;
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:82px!important;
    min-height:82px!important;
    max-height:82px!important;
    margin:0!important;
    padding:12px 14px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    color:inherit!important;
    font-size:inherit!important;
    line-height:normal!important;
    pointer-events:auto!important;
    transform:none!important;
    transition:none!important;
  }

  body.page-view .sidebar .user-card b,
  body.page-view .sidebar:hover .user-card b,
  body.page-view .sidebar .user-card span,
  body.page-view .sidebar:hover .user-card span,
  body.page-view .sidebar .user-card a,
  body.page-view .sidebar:hover .user-card a,
  body.nexei-view-mode .sidebar .user-card b,
  body.nexei-view-mode .sidebar:hover .user-card b,
  body.nexei-view-mode .sidebar .user-card span,
  body.nexei-view-mode .sidebar:hover .user-card span,
  body.nexei-view-mode .sidebar .user-card a,
  body.nexei-view-mode .sidebar:hover .user-card a{
    visibility:visible!important;
    opacity:1!important;
    text-indent:0!important;
    transform:none!important;
    transition:none!important;
  }

  /* A area principal nao acompanha nenhum estado hover da sidebar. */
  body.page-view .main,
  body.page-view .sidebar + .main,
  body.page-view .sidebar:hover + .main,
  body.page-view .sidebar:hover ~ .main,
  body.nexei-view-mode .main,
  body.nexei-view-mode .sidebar + .main,
  body.nexei-view-mode .sidebar:hover + .main,
  body.nexei-view-mode .sidebar:hover ~ .main{
    margin-left:236px!important;
    width:calc(100vw - 236px)!important;
    max-width:calc(100vw - 236px)!important;
    min-width:0!important;
    padding:18px 20px 20px!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
    transform:none!important;
    transition:none!important;
  }

  /* Cabecalho: mesma distribuicao da tela principal, sem recorte do sino. */
  body.page-view .topbar,
  body.nexei-view-mode .topbar{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:normal!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:48px!important;
    margin:0 0 10px!important;
    padding:0!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }

  body.page-view .topbar h1,
  body.nexei-view-mode .topbar h1{
    min-width:0!important;
    margin:0!important;
  }

  body.page-view .top-actions,
  body.nexei-view-mode .top-actions{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:12px!important;
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    padding:0!important;
    margin:0!important;
    overflow:visible!important;
  }

  body.page-view #nexeiSearchInlineV285,
  body.nexei-view-mode #nexeiSearchInlineV285{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    padding:0!important;
    margin:0!important;
  }

  body.page-view #nexeiSearchInlineV285 > input[name="q"],
  body.nexei-view-mode #nexeiSearchInlineV285 > input[name="q"]{
    width:auto!important;
    min-width:260px!important;
    max-width:min(260px,32vw)!important;
    height:42px!important;
    box-sizing:border-box!important;
  }

  body.page-view .top-actions .bell,
  body.nexei-view-mode .top-actions .bell{
    flex:0 0 auto!important;
    margin:0!important;
    transform:none!important;
  }

  /* O documento e o painel de informacoes permanecem dentro da area util. */
  body.page-view .viewer,
  body.nexei-view-mode .viewer{
    position:relative!important;
    display:grid!important;
    grid-template-columns:250px minmax(0,1fr) minmax(420px,500px)!important;
    gap:16px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    transform:none!important;
    transition:none!important;
  }

  body.page-view .viewer > *,
  body.nexei-view-mode .viewer > *{
    min-width:0!important;
    box-sizing:border-box!important;
  }

  body.page-view .viewer .details,
  body.nexei-view-mode .viewer .details{
    width:auto!important;
    min-width:420px!important;
    max-width:500px!important;
    transform:none!important;
    transition:none!important;
  }
}

/* Mobile/tablet: replica o menu e o cabecalho usados nas demais paginas. */
@media (max-width:900px){
  body.page-view .main,
  body.nexei-view-mode .main{
    margin-left:0!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:74px 14px 24px!important;
    overflow-x:hidden!important;
    box-sizing:border-box!important;
    transform:none!important;
  }

  body.page-view .topbar,
  body.nexei-view-mode .topbar{
    position:relative!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    gap:12px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    margin:0 0 16px!important;
    padding:10px 0!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }

  body.page-view .top-actions,
  body.nexei-view-mode .top-actions{
    position:static!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 44px!important;
    align-items:center!important;
    justify-content:normal!important;
    gap:8px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:0!important;
    margin:0!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }

  body.page-view #nexeiSearchInlineV285,
  body.nexei-view-mode #nexeiSearchInlineV285{
    position:relative!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 42px 42px!important;
    align-items:center!important;
    gap:6px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:0!important;
    margin:0!important;
    box-sizing:border-box!important;
  }

  body.page-view #nexeiSearchInlineV285 > input[name="q"],
  body.nexei-view-mode #nexeiSearchInlineV285 > input[name="q"]{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:44px!important;
    padding:10px 14px!important;
    border-radius:16px!important;
    box-sizing:border-box!important;
  }

  body.page-view .top-actions .bell,
  body.nexei-view-mode .top-actions .bell{
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:visible!important;
    transform:none!important;
  }

  body.page-view .sidebar,
  body.page-view .sidebar:hover,
  body.nexei-view-mode .sidebar,
  body.nexei-view-mode .sidebar:hover{
    position:fixed!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    width:min(320px,86vw)!important;
    min-width:0!important;
    max-width:86vw!important;
    height:100dvh!important;
    z-index:410000!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    padding:76px 18px 18px!important;
    box-sizing:border-box!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    transform:translate3d(-112%,0,0)!important;
    transition:transform .22s ease!important;
  }

  body.page-view.nexei-mobile-open-v285 .sidebar,
  body.nexei-view-mode.nexei-mobile-open-v285 .sidebar,
  body.page-view .sidebar.nexei-mobile-open-v285,
  body.nexei-view-mode .sidebar.nexei-mobile-open-v285{
    transform:translate3d(0,0,0)!important;
  }

  body.page-view .sidebar::after,
  body.page-view .sidebar:hover::after,
  body.nexei-view-mode .sidebar::after,
  body.nexei-view-mode .sidebar:hover::after{
    content:none!important;
    display:none!important;
  }

  body.page-view .sidebar .brand,
  body.page-view .sidebar:hover .brand,
  body.nexei-view-mode .sidebar .brand,
  body.nexei-view-mode .sidebar:hover .brand{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    align-self:stretch!important;
    gap:12px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:88px!important;
    margin:0 0 28px!important;
    padding:17px 16px!important;
    box-sizing:border-box!important;
    overflow:visible!important;
    transform:none!important;
  }

  body.page-view .sidebar .brand-mark,
  body.page-view .sidebar:hover .brand-mark,
  body.nexei-view-mode .sidebar .brand-mark,
  body.nexei-view-mode .sidebar:hover .brand-mark{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:54px!important;
    min-width:54px!important;
    max-width:54px!important;
    height:54px!important;
    min-height:54px!important;
    max-height:54px!important;
    flex:0 0 54px!important;
    margin:0!important;
    font-size:24px!important;
    transform:none!important;
  }

  body.page-view .sidebar .brand > div:not(.brand-mark),
  body.page-view .sidebar:hover .brand > div:not(.brand-mark),
  body.page-view .sidebar .brand-text,
  body.page-view .sidebar:hover .brand-text,
  body.nexei-view-mode .sidebar .brand > div:not(.brand-mark),
  body.nexei-view-mode .sidebar:hover .brand > div:not(.brand-mark),
  body.nexei-view-mode .sidebar .brand-text,
  body.nexei-view-mode .sidebar:hover .brand-text{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    flex:0 1 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:calc(100% - 66px)!important;
    color:inherit!important;
    font-size:inherit!important;
    line-height:normal!important;
    text-indent:0!important;
    overflow:visible!important;
    transform:none!important;
  }

  body.page-view .sidebar nav,
  body.page-view .sidebar:hover nav,
  body.nexei-view-mode .sidebar nav,
  body.nexei-view-mode .sidebar:hover nav{
    display:grid!important;
    width:100%!important;
    gap:8px!important;
    margin:0!important;
    padding:0!important;
  }

  body.page-view .sidebar nav a,
  body.page-view .sidebar:hover nav a,
  body.nexei-view-mode .sidebar nav a,
  body.nexei-view-mode .sidebar:hover nav a{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:10px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:44px!important;
    height:auto!important;
    margin:0!important;
    padding:12px 14px!important;
    box-sizing:border-box!important;
    font-size:inherit!important;
    line-height:normal!important;
    text-indent:0!important;
    transform:none!important;
    overflow:hidden!important;
  }

  body.page-view .sidebar .nav-text,
  body.page-view .sidebar:hover .nav-text,
  body.nexei-view-mode .sidebar .nav-text,
  body.nexei-view-mode .sidebar:hover .nav-text{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    width:auto!important;
    min-width:0!important;
    color:inherit!important;
    font-size:inherit!important;
    line-height:normal!important;
    text-indent:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  body.page-view .sidebar .user-card,
  body.page-view .sidebar:hover .user-card,
  body.nexei-view-mode .sidebar .user-card,
  body.nexei-view-mode .sidebar:hover .user-card{
    position:static!important;
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:82px!important;
    min-height:82px!important;
    max-height:82px!important;
    margin-top:auto!important;
    padding:12px 14px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    color:inherit!important;
    font-size:inherit!important;
    line-height:normal!important;
    pointer-events:auto!important;
    transform:none!important;
  }

  body.page-view .sidebar .user-card b,
  body.page-view .sidebar:hover .user-card b,
  body.page-view .sidebar .user-card span,
  body.page-view .sidebar:hover .user-card span,
  body.page-view .sidebar .user-card a,
  body.page-view .sidebar:hover .user-card a,
  body.nexei-view-mode .sidebar .user-card b,
  body.nexei-view-mode .sidebar:hover .user-card b,
  body.nexei-view-mode .sidebar .user-card span,
  body.nexei-view-mode .sidebar:hover .user-card span,
  body.nexei-view-mode .sidebar .user-card a,
  body.nexei-view-mode .sidebar:hover .user-card a{
    visibility:visible!important;
    opacity:1!important;
    text-indent:0!important;
    transform:none!important;
  }

  /* Conteudo do visualizador em coluna, sem interferir no cabecalho. */
  body.page-view .viewer,
  body.nexei-view-mode .viewer{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    padding-top:50px!important;
    overflow-x:hidden!important;
    box-sizing:border-box!important;
    transform:none!important;
  }

  body.page-view .viewer-close,
  body.nexei-view-mode .viewer-close{
    position:absolute!important;
    top:0!important;
    right:0!important;
    left:auto!important;
    z-index:20!important;
    margin:0!important;
  }

  body.page-view .viewer .files,
  body.page-view .viewer .doc-frame,
  body.page-view .viewer .details,
  body.nexei-view-mode .viewer .files,
  body.nexei-view-mode .viewer .doc-frame,
  body.nexei-view-mode .viewer .details{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    transform:none!important;
  }
}

@media (max-width:420px){
  body.page-view .main,
  body.nexei-view-mode .main{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  body.page-view .top-actions,
  body.nexei-view-mode .top-actions{
    grid-template-columns:minmax(0,1fr) 42px!important;
    gap:6px!important;
  }

  body.page-view #nexeiSearchInlineV285,
  body.nexei-view-mode #nexeiSearchInlineV285{
    grid-template-columns:minmax(0,1fr) 40px 40px!important;
    gap:5px!important;
  }
}

/* Reforcos de especificidade contra regras legadas exclusivas da pagina view. */
@media (max-width:900px){
  body.page-view .sidebar + .main,
  body.page-view .sidebar:hover + .main,
  body.page-view .sidebar:hover ~ .main,
  body.nexei-view-mode .sidebar + .main,
  body.nexei-view-mode .sidebar:hover + .main,
  body.nexei-view-mode .sidebar:hover ~ .main{
    margin-left:0!important;
    width:100%!important;
    max-width:100%!important;
    transform:none!important;
  }

  body.page-view .topbar .top-actions,
  body.nexei-view-mode .topbar .top-actions{
    position:static!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 44px!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:0!important;
    margin:0!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }

  body.page-view .topbar #nexeiSearchInlineV285,
  body.nexei-view-mode .topbar #nexeiSearchInlineV285{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  body.page-view .sidebar .brand .brand-mark,
  body.page-view .sidebar:hover .brand .brand-mark,
  body.nexei-view-mode .sidebar .brand .brand-mark,
  body.nexei-view-mode .sidebar:hover .brand .brand-mark{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:54px!important;
    min-width:54px!important;
    max-width:54px!important;
    height:54px!important;
    min-height:54px!important;
    max-height:54px!important;
    flex:0 0 54px!important;
    margin:0!important;
    font-size:24px!important;
  }
}

@media (max-width:420px){
  body.page-view .topbar .top-actions,
  body.nexei-view-mode .topbar .top-actions{
    grid-template-columns:minmax(0,1fr) 42px!important;
    gap:6px!important;
  }

  body.page-view .topbar .top-actions .bell,
  body.nexei-view-mode .topbar .top-actions .bell{
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:42px!important;
    min-height:42px!important;
  }
}