/* Keep the POS workspace stable while the sale detail grows. */
.app-panel:has(input[placeholder^="Escanear codigo de barras"])
  > main
  > section
  > div:nth-child(3) {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

@media (max-width: 1279px) {
  .app-panel:has(input[placeholder^="Escanear codigo de barras"])
    > main
    > section
    > div:nth-child(3) {
    flex: none;
    height: clamp(280px, 45dvh, 460px);
  }
}

@media (min-width: 1280px) {
  .app-panel:has(input[placeholder^="Escanear codigo de barras"]) > main {
    height: clamp(540px, calc(100dvh - 325px), 800px);
    min-height: 0 !important;
  }

  .app-panel:has(input[placeholder^="Escanear codigo de barras"]) > main > section,
  .app-panel:has(input[placeholder^="Escanear codigo de barras"]) > main > aside {
    min-height: 0;
  }

  .app-panel:has(input[placeholder^="Escanear codigo de barras"])
    > main
    > aside
    > div:nth-child(2) {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .app-panel:has(input[placeholder^="Escanear codigo de barras"])
    > main
    > aside
    > div:last-child {
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex: none;
    background: rgb(248 250 252);
  }
}