/* El mismo carrito y los mismos controles; en móvil sigue en su hoja original. */
.pos-cart-scroll { display: contents; }

@media (min-width: 1024px) {
  html[data-estilo="b"] #panel-ventas .pos-layout-grid {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 480px);
    max-width: none;
    gap: 20px;
    align-items: start;
  }
  html[data-estilo="b"] #panel-ventas .pos-products-panel { min-width: 0; }
  html[data-estilo="b"] #panel-ventas .pos-layout-grid > .pos-cart-panel {
    position: sticky;
    top: var(--bf-carrito-tope, 90px);
    height: var(--bf-carrito-alto, calc(100dvh - 300px));
    min-height: 180px;
    min-width: 0;
    padding: 16px;
    gap: 12px;
    overflow: hidden;
  }
  html[data-estilo="b"] #panel-ventas .pos-cart-header { flex: 0 0 auto; }
  html[data-estilo="b"] #panel-ventas .pos-cart-scroll {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 3px;
    scrollbar-gutter: stable;
  }
  html[data-estilo="b"] #panel-ventas .pos-cart-scroll > * { flex-shrink: 0; }
  html[data-estilo="b"] #panel-ventas .pos-cart-panel #btn-pos-submit-sale {
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
  }
  html[data-estilo="b"] #panel-ventas .pos-total-box { padding: 12px; }
  html[data-estilo="b"] #panel-ventas #pos-total-usd { font-size: 30px; }
  html[data-estilo="b"] #panel-ventas #pos-total-bs { font-size: 20px; }
  html[data-estilo="b"] #panel-ventas .pos-calc-box { gap: 14px; }
  html[data-estilo="b"] #panel-ventas .pos-cart-table,
  html[data-estilo="b"] #panel-ventas .pos-cart-table tbody { display: block; }
  html[data-estilo="b"] #panel-ventas .pos-cart-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
  }
  html[data-estilo="b"] #panel-ventas .pos-cart-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(90px, 0.7fr);
    gap: 8px;
    padding: 12px 2px;
    border-bottom: 1px solid var(--b-borde);
    align-items: center;
  }
  html[data-estilo="b"] #panel-ventas .pos-cart-table td { padding: 0; border: 0; }
  html[data-estilo="b"] #panel-ventas .pos-cart-table td:first-child { grid-column: 1; grid-row: 1; }
  html[data-estilo="b"] #panel-ventas .pos-cart-table td:nth-child(2) { grid-column: 1; grid-row: 2; }
  html[data-estilo="b"] #panel-ventas .pos-cart-table td:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
    white-space: normal !important; /* El subtotal lleva nowrap incrustado en app.js. */
    overflow-wrap: anywhere;
  }
  html[data-estilo="b"] #panel-ventas .pos-cart-table td:last-child { grid-column: 2; grid-row: 1; justify-self: end; }
}

/* Ticket, también en Safari: pie fuera del área que desplaza el comprobante.
   No depende de sticky ni modifica el contenido imprimible. */
html[data-estilo="b"] #modal-pos-ticket > .pos-ticket-card {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}
html[data-estilo="b"] #modal-pos-ticket .modal-header { flex: 0 0 auto; }
html[data-estilo="b"] #modal-pos-ticket .pos-ticket-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
html[data-estilo="b"] #modal-pos-ticket .pos-ticket-scroll > * { flex-shrink: 0; }
html[data-estilo="b"] #modal-pos-ticket .pos-ticket-footer {
  flex: 0 0 auto;
  padding: 12px 20px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--b-borde);
  background: var(--b-tarjeta);
}
html[data-estilo="b"] #modal-pos-ticket #btn-ticket-new-sale {
  position: static;
  width: 100%;
  min-height: 52px;
  box-shadow: none;
}