/* Un único viewport útil: el footer reserva su altura real en todo el sistema. */
body.has-app-footer {
  --app-content-top: 0px;
  overflow: hidden;
}

body.has-app-footer .app-root {
  height: calc(100dvh - var(--app-footer-height));
  min-height: 0;
  overflow: visible;
}

body.has-app-footer .content-area {
  height: 100%;
  min-height: 0;
  min-width: 0;
  padding-bottom: 0 !important;
  overflow: auto;
  scroll-padding-block: 1rem;
}

body.has-app-footer .content-area > .container-fluid {
  flex: 0 0 auto;
  min-width: 0;
}

body.has-app-footer .sidebar {
  min-height: 0;
  height: calc(100dvh - var(--app-footer-height));
  max-height: calc(100dvh - var(--app-footer-height));
}

.app-footer {
  min-height: 2.75rem;
  padding-left: 11.75rem;
  padding-right: 1rem;
}
.app-footer > * { min-width: 0; overflow-wrap: anywhere; }

body.has-app-footer :is(.ot-page, .clientes-page, .proveedores-page, .historial-shell, #calendar-layout, .caja-panel, .presupuestos-shell) {
  height: calc(100dvh - var(--app-footer-height) - var(--app-content-top)) !important;
}

/* Las columnas flex pueden encogerse sin empujar controles fuera de la pantalla. */
.visual-page, .visual-page .card, .visual-page .card-body { min-width: 0; }
.ot-page-header, .ot-filter-card, .ot-table-card > .card-body > .border-top { flex-shrink: 0; }

body.app-body .ot-table-scroll { overflow: auto; }
body.app-body .ot-orders-table { min-width: 1040px; table-layout: auto; }
body.app-body .visual-page .ot-orders-table :is(thead th, tbody td) { padding-inline: .5rem; }
.ot-orders-table .ot-order-cell { min-width: 10rem; }
.ot-orders-table .ot-client-cell { min-width: 10rem; max-width: 18rem; }
.ot-orders-table :is(th, td):nth-child(3) { min-width: 5.5rem; white-space: nowrap; }
.ot-orders-table :is(th, td):nth-child(4) { min-width: 8rem; }
.ot-orders-table .ot-amount-cell { min-width: 8rem; }
.ot-orders-table :is(th, td):last-child {
  position: sticky;
  right: 0;
  min-width: 5rem;
  background: var(--bs-body-bg);
  box-shadow: -4px 0 8px rgb(0 0 0 / 10%);
  z-index: 1;
}
.ot-orders-table thead th:last-child { z-index: 3; }
/* Popover lleva el menú a la capa superior sin elevar la celda sobre el encabezado. */
.ot-orders-table .dropdown-menu[popover],
#cajaMovimientosTable .dropdown-menu[popover] { margin: 0; }
@supports not selector(:popover-open) {
  .ot-orders-table tbody td:last-child:has(.dropdown-menu.show) { z-index: 1046; }
}
/* Fondos opacos para que el saldo no se vea detrás de las acciones al desplazar. */
body.app-body .visual-page .ot-orders-table tbody td:last-child {
  background: var(--app-card) !important;
}
body.app-body .visual-page .ot-orders-table tbody .table-success td:last-child {
  background: #12322d !important;
}
body.app-body .visual-page .ot-orders-table.table-hover > tbody > tr:hover > td:last-child {
  background: #1a2d4e !important;
}
body.app-body .visual-page .ot-orders-table.table-hover > tbody > tr.table-success:hover > td:last-child {
  background: #134231 !important;
}
.ot-orders-table .badge { max-width: 11rem; white-space: normal; }

body.app-body #cajaMovimientosTable { overflow-x: auto !important; }
@media (min-width: 992px) {
body.app-body #cajaMovimientosTable table { min-width: 960px; table-layout: fixed; }
body.app-body #cajaMovimientosTable :is(thead th, tbody td) { padding-inline: .5rem; }
body.app-body #cajaMovimientosTable th:nth-child(1) { width: 8rem; }
body.app-body #cajaMovimientosTable th:nth-child(2) { width: 4rem; }
body.app-body #cajaMovimientosTable th:nth-child(3) { width: auto; }
body.app-body #cajaMovimientosTable th:nth-child(4) { width: 10rem; }
body.app-body #cajaMovimientosTable th:nth-child(5) { width: 11rem; }
body.app-body #cajaMovimientosTable th:nth-child(6) { width: 9rem; }
body.app-body #cajaMovimientosTable th:nth-child(7) { width: 6rem; }
body.app-body #cajaMovimientosTable :is(th, td):last-child {
  position: sticky;
  right: 0;
  min-width: 6rem;
  background: var(--app-card);
  z-index: 1;
}
body.app-body #cajaMovimientosTable thead th:last-child { z-index: 3; }
@supports not selector(:popover-open) {
  #cajaMovimientosTable tbody td:last-child:has(.dropdown-menu.show) { z-index: 1046; }
}
}
body.app-body .caja-summary-row { overflow-x: auto; }

/* El detalle puede desplazarse completo cuando sus controles superan la altura útil. */
body.app-body .ot-items-page { height: auto; min-height: 0; }
body.app-body .ot-items-page-content { overflow: visible; flex: 0 0 auto; }
body.app-body .ot-items-col > .card { flex: 0 0 auto; }
body.app-body .ot-items-detail-table-wrap { max-height: clamp(12rem, 38dvh, 32rem); flex: 0 1 auto; }
body.app-body .ot-senias-card .ot-senias-table-wrap { max-height: 15rem; flex: 0 1 auto; overflow: auto; }
.ot-items-title-group { min-width: 0; flex: 1; flex-wrap: wrap; }
.ot-items-title-group > h1 { flex-shrink: 0; }
body.app-body .ot-items-heading-info { min-width: 0; flex-wrap: wrap; white-space: normal; gap: .25rem 1rem; }
body.app-body .ot-items-heading-info > span { white-space: normal; overflow-wrap: anywhere; }
body.app-body .ot-items-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; padding: .5rem; }
.ot-items-footer-actions { flex-wrap: wrap; }
.ot-items-footer-totals { min-width: 0; }
body.app-body .ot-senias-card .card-body { overflow: visible; margin: 0; }
body.app-body .ot-order-actions { padding: 1rem; }

@media (max-width: 991.98px) {
  body.has-app-footer { --app-content-top: 4rem; }
  body.has-app-footer .content-area { padding-top: var(--app-content-top); }
  body.has-app-footer.caja-screen-page .content-area { overflow: auto !important; }
  body.has-app-footer.caja-screen-page .content-area > .container-fluid { height: auto; overflow: visible; }
  body.has-app-footer .caja-panel { height: auto !important; }
  body.app-body #cajaMovimientosTable { max-height: 60dvh; }
  body.app-body #cajaMovimientosTable td[colspan] { display: block; white-space: normal; text-align: center !important; }
  body.app-body #cajaMovimientosTable td[colspan]::before { display: none; content: none; }
}

@media (max-width: 767.98px) {
  body.has-app-footer :is(.ot-page, .clientes-page, .proveedores-page, .historial-shell, .caja-panel, .presupuestos-shell) { height: auto !important; }
}

@media (max-width: 767.98px) {
  .app-footer { padding-left: 6.75rem; }
}