/* LEAL3D_V63_REV21_BANNERS_E_SCROLLBAR_TEMATICA */

/* ============================================================
   SCROLLBARS GERAIS — CORES POR TEMA
   ============================================================ */

html {
  --l3d-global-scrollbar-track: rgba(255, 255, 255, .025);
  --l3d-global-scrollbar-thumb: rgba(113, 113, 122, .66);
  --l3d-global-scrollbar-hover: rgba(161, 161, 170, .88);
}

html[data-theme="light"] {
  --l3d-global-scrollbar-track: rgba(24, 24, 27, .045);
  --l3d-global-scrollbar-thumb: rgba(113, 113, 122, .46);
  --l3d-global-scrollbar-hover: rgba(82, 82, 91, .68);
}

html,
html body,
html body * {
  scrollbar-width: thin !important;
  scrollbar-color:
    var(--l3d-global-scrollbar-thumb)
    var(--l3d-global-scrollbar-track) !important;
}

html::-webkit-scrollbar,
html body::-webkit-scrollbar,
html body *::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
}

html::-webkit-scrollbar-button,
html body::-webkit-scrollbar-button,
html body *::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html::-webkit-scrollbar-track,
html body::-webkit-scrollbar-track,
html body *::-webkit-scrollbar-track {
  background: var(--l3d-global-scrollbar-track) !important;
  border: 0 !important;
  border-radius: 999px !important;
}

html::-webkit-scrollbar-thumb,
html body::-webkit-scrollbar-thumb,
html body *::-webkit-scrollbar-thumb {
  min-height: 38px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--l3d-global-scrollbar-thumb) !important;
  background-clip: padding-box !important;
}

html::-webkit-scrollbar-thumb:hover,
html body::-webkit-scrollbar-thumb:hover,
html body *::-webkit-scrollbar-thumb:hover {
  background: var(--l3d-global-scrollbar-hover) !important;
}

/* ============================================================
   JANELA DAS ETAPAS
   ============================================================ */

/* As instruções inferiores foram removidas definitivamente. */
.stage-note,
.kc-step-guide,
#colorirStageNote {
  display: none !important;
}

/* ============================================================
   PRÉVIA COM MARGEM INFERIOR PADRONIZADA
   ============================================================ */

@media (min-width: 1280px) {
  /*
    A prévia passa a usar duas linhas reais:
    1. toolbar;
    2. palco ocupando 100% de toda a altura restante.

    Isso elimina o espaço branco que ainda sobrava abaixo do palco quando
    regras antigas de flex e min-height interferiam no cálculo.
  */
  .preview-area,
  .kc-preview-area {
    box-sizing: border-box !important;
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-items: stretch !important;
    padding-bottom: var(--l3d-preview-bottom-gap, 20px) !important;
  }

  .preview-toolbar,
  .kc-preview-toolbar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  .preview-area > .stage:not(.hidden),
  .preview-area .stage:not(.hidden),
  .kc-preview-area > .kc-stage:not(.hidden),
  .kc-preview-area .kc-stage:not(.hidden) {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: none !important;
  }

  .preview-area .stage:not(.hidden) > .view,
  .kc-preview-area .kc-stage:not(.hidden) > .view,
  #threeView,
  #vectorPreview,
  #kcThreeView,
  #kcCanvas {
    min-height: 0 !important;
    height: 100% !important;
  }

  .workspace > .workflow,
  #chaveirosWorkspace > .kc-workflow {
    position: relative !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: block !important;
    overflow: hidden !important;
    padding: 0 !important;

    /*
      Valores derivados diretamente do editor.
      Eles mudam no mesmo frame em que o slider é movimentado.
    */
    --l3d-live-scroll-extension: max(
      0px,
      calc(
        var(--l3d-base-scrollbar-center, 10px) +
        var(--l3d-editor-scrollbar-corridor-shift, 0px) +
        var(--l3d-actual-scrollbar-half-width, 2px) +
        var(--l3d-editor-scrollbar-offset, 0px)
      )
    );
  }

  .workflow > .workflow-section-title,
  .kc-workflow > .workflow-section-title {
    position: absolute !important;
    z-index: 4 !important;

    top: var(--l3d-base-title-top, 20px) !important;

    left: calc(
      var(--l3d-base-title-left, 20px) +
      var(--l3d-editor-window-left-offset, 0px)
    ) !important;

    right: calc(
      var(--l3d-base-title-right, 20px) +
      var(--l3d-editor-window-right-corridor-offset, 0px)
    ) !important;

    width: auto !important;
    height: var(--l3d-base-title-height, 39px) !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-indent: 0 !important;
  }

  .l3d-workflow-window {
    position: absolute !important;
    z-index: 2 !important;

    top: calc(
      var(--l3d-base-window-top, 71px) +
      var(--l3d-editor-window-top-offset, 0px)
    ) !important;

    right: calc(
      var(--l3d-base-window-right, 20px) +
      var(--l3d-editor-window-right-corridor-offset, 0px)
    ) !important;

    bottom: calc(
      var(--l3d-base-window-bottom, 20px) +
      var(--l3d-editor-window-bottom-offset, 0px)
    ) !important;

    left: calc(
      var(--l3d-base-window-left, 20px) +
      var(--l3d-editor-window-left-offset, 0px)
    ) !important;

    box-sizing: border-box !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    border-radius: var(--radius-lg) !important;
  }

  /*
    O viewport ultrapassa a janela somente até a posição da scrollbar.
    Nenhum observador acompanha os sliders: toda a posição é CSS direto.
  */
  .l3d-workflow-window > .l3d-workflow-scroll-body {
    position: absolute !important;
    inset-block: 0 !important;
    left: 0 !important;
    right: calc(0px - var(--l3d-live-scroll-extension, 12px)) !important;
    box-sizing: border-box !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: auto !important;
    padding: 0 !important;
    background: transparent !important;

    /*
      O padrão CSS moderno é o único método consistente entre Chrome e Edge.
      Quando suportado, "thin" produz a barra fina real do navegador.
    */
    scrollbar-width: var(--l3d-editor-scrollbar-mode, thin) !important;
  }

  .l3d-workflow-scroll-body::-webkit-scrollbar {
    width: var(--l3d-editor-scrollbar-fallback-width, 4px) !important;
  }

  .l3d-workflow-scroll-body::-webkit-scrollbar-thumb {
    border-radius: var(--l3d-editor-scrollbar-radius, 999px) !important;
  }

  /*
    O viewport estendido possui uma scrollbar interna. A largura dela é
    adicionada novamente ao conteúdo, eliminando a sobra invisível que
    aparecia à direita quando o padding estava em zero.
  */
  .l3d-workflow-sessions {
    box-sizing: border-box !important;
    /*
      100% representa a largura útil do scrollport, que já desconta a barra
      nativa. Somamos a largura real medida e retiramos apenas a extensão até
      o corredor. O resultado é exatamente a largura visual da janela.
    */
    width: calc(
      100% -
      var(--l3d-live-scroll-extension, 12px) +
      var(--l3d-actual-scrollbar-width, 0px)
    ) !important;
    min-width: 0 !important;
    min-height: 100% !important;
    margin: 0 !important;

    padding:
      var(--l3d-editor-window-padding-top, 12px)
      var(--l3d-editor-window-padding-right, 12px)
      var(--l3d-editor-window-padding-bottom, 12px)
      var(--l3d-editor-window-padding-left, 12px) !important;

    background: transparent;
  }

  .l3d-workflow-window[data-l3d-ve-container-key="workflow-steps-container"] {
    padding: 0 !important;
    margin: 0 !important;
  }

  .l3d-workflow-sessions > .session:first-child,
  .l3d-workflow-sessions > .kc-session:first-child {
    margin-top: 0 !important;
  }

  .l3d-workflow-sessions > .session:last-child,
  .l3d-workflow-sessions > .kc-session:last-child {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 1279.98px) {
  .workspace > .workflow,
  #chaveirosWorkspace > .kc-workflow {
    position: static !important;
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .workflow > .workflow-section-title,
  .kc-workflow > .workflow-section-title {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 12px !important;
  }

  .l3d-workflow-window,
  .l3d-workflow-window > .l3d-workflow-scroll-body {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .l3d-workflow-sessions {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}