/* Preview local da identidade Boroto. Carregado apenas por feature flag. */
@view-transition {
  navigation: auto;
}

body.brand-preview .ui2-sidebar {
  view-transition-name: app-sidebar;
}

body.brand-preview .ui2-topbar {
  view-transition-name: app-topbar;
}

body.brand-preview .page {
  view-transition-name: app-page;
}

::view-transition-group(root),
::view-transition-group(app-sidebar),
::view-transition-group(app-topbar),
::view-transition-group(app-page) {
  animation-duration: 140ms;
  animation-timing-function: ease-out;
}

::view-transition-old(app-sidebar),
::view-transition-new(app-sidebar),
::view-transition-old(app-topbar),
::view-transition-new(app-topbar) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(app-page) {
  animation: app-page-out 90ms ease-in both;
}

::view-transition-new(app-page) {
  animation: app-page-in 140ms ease-out both;
}

@keyframes app-page-out {
  to { opacity: 0.82; }
}

@keyframes app-page-in {
  from {
    opacity: 0.82;
    transform: translateY(2px);
  }
}

body.brand-preview {
  --brand-wallpaper: url('../imagens/brand_preview_v2/fundo_escuro.webp');
  background: #090e16 var(--brand-wallpaper) center / cover fixed no-repeat;
}

body.tema-claro.brand-preview {
  --brand-wallpaper: url('../imagens/brand_preview_v2/fundo_claro.webp');
  background-color: #f4f6f9;
}

body.brand-preview .app-shell,
body.brand-preview.ui-shell-v2 .app-shell {
  background: transparent;
}

body.brand-preview .app-main {
  background-color: rgba(9, 14, 22, 0.12);
  background-image:
    url('../imagens/brand_preview_v2/logo_boroto_transparente.png'),
    var(--brand-wallpaper);
  background-position:
    right 34px bottom 26px,
    center;
  background-repeat: no-repeat, no-repeat;
  background-size:
    clamp(170px, 17vw, 280px) auto,
    cover;
  background-attachment: fixed, fixed;
}

body.tema-claro.brand-preview .app-main {
  background-color: rgba(244, 246, 249, 0.12);
}

body.brand-preview .ui2-topbar {
  background: rgba(11, 18, 29, 0.9);
  backdrop-filter: blur(14px);
}

body.tema-claro.brand-preview .ui2-topbar {
  background: rgba(255, 255, 255, 0.9);
}

.ui2-brand-preview-logo,
.app-brand-preview-logo,
.login-brand-preview-logo {
  align-items: center;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.ui2-brand-preview-logo {
  flex: 1 1 auto;
  height: 54px;
  max-width: 172px;
}

.app-brand-preview-logo {
  height: 58px;
  width: 180px;
}

.ui2-brand-preview-logo img,
.app-brand-preview-logo img,
.login-brand-preview-logo img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.brand-logo-mark {
  display: none !important;
}

.login-brand-preview-logo {
  height: 82px;
  width: 100%;
}

body.brand-preview .login-wrap {
  background: #090e16 var(--brand-wallpaper) center / cover no-repeat;
}

body.brand-preview .login-bg {
  display: none;
}

body.brand-preview .login-card {
  background: rgba(17, 26, 39, 0.92);
  backdrop-filter: blur(16px);
  border-color: rgba(237, 49, 58, 0.22);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
}

body.tema-claro.brand-preview .login-card {
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 30px 90px rgba(31, 41, 55, 0.16);
}

.app-shell.is-collapsed .ui2-brand-preview-logo,
html.sidebar-precollapsed .brand-preview .ui2-brand-preview-logo {
  flex: 0 0 34px;
  height: 34px;
  width: 34px;
}

.app-shell.is-collapsed .ui2-brand-preview-logo .brand-logo-full,
html.sidebar-precollapsed .brand-preview .ui2-brand-preview-logo .brand-logo-full {
  display: none;
}

.app-shell.is-collapsed .ui2-brand-preview-logo .brand-logo-mark,
html.sidebar-precollapsed .brand-preview .ui2-brand-preview-logo .brand-logo-mark {
  display: block !important;
}

@media (max-width: 1100px) {
  body.brand-preview .app-main {
    background-attachment: scroll, scroll;
    background-position:
      right 20px bottom 20px,
      58% center;
  }

  body.brand-preview {
    background-attachment: scroll;
    background-position: 58% center;
  }

  .app-shell.is-collapsed .ui2-brand-preview-logo {
    flex: 1 1 auto;
    height: 54px;
    max-width: 172px;
    width: auto;
  }

  .app-shell.is-collapsed .ui2-brand-preview-logo .brand-logo-full {
    display: block;
  }

  .app-shell.is-collapsed .ui2-brand-preview-logo .brand-logo-mark {
    display: none !important;
  }
}

@media (max-width: 520px) {
  body.brand-preview,
  body.brand-preview .login-wrap {
    background-position: 62% center;
  }

  body.brand-preview .app-main {
    background-position:
      right 14px bottom 16px,
      62% center;
    background-size:
      150px auto,
      cover;
  }

  .login-brand-preview-logo {
    height: 70px;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-group(app-sidebar),
  ::view-transition-group(app-topbar),
  ::view-transition-group(app-page),
  ::view-transition-old(app-page),
  ::view-transition-new(app-page) {
    animation-duration: 0.01ms;
  }
}