/*
 * viewSQL Responsive Surface Contract v1 — R42 AV67
 * --------------------------------------------------
 * Guardrails compartidos para superficies desktop/iframe y utilities.
 * Cada módulo conserva su layout propio; este archivo evita desbordes y
 * normaliza el comportamiento de modales, toolbars y tablas en viewports
 * reducidos sin convertir el Shell en una segunda implementación por app.
 */

:root {
  --vsql-responsive-touch-min: 36px;
  --vsql-responsive-page-gap: 12px;
}

html,
body {
  max-width: 100%;
}

body {
  overscroll-behavior-x: none;
}

/* Flex/grid children are allowed to shrink instead of forcing horizontal
 * overflow. Scoped to the canonical app roots so legacy documents remain
 * untouched. */
.wb-body *,
.proyectos-body *,
.inv-body *,
body[data-vsql-responsive-surface] * {
  min-width: 0;
}

/* Tables keep their semantic width; their existing wrapper owns scrolling. */
.vsql-responsive-table-scroll,
.wb-table-wrap,
.wb-table-scroll,
.tab-table-wrap,
.inv-table-wrap,
.proyectos-table-wrap,
.plots-table-wrap,
.wb-utl-preview-host,
.ifrs9-a2-result {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

/* Form controls used by the canonical utility/frontier surfaces. */
.vsql-sf input,
.vsql-sf select,
.vsql-sf textarea,
.ifrs9-a2 input,
.ifrs9-a2 select,
.wb-utl-form input,
.wb-utl-form select,
.wb-utl-form textarea {
  max-width: 100%;
  min-width: 0;
}

/* Long tabs should scroll, never expand the viewport. */
.vsql-responsive-tabs,
.ifrs9-a2-tabs,
.wb-utl-tabs-bar,
.ts-ecl-primary-tabs {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.vsql-responsive-tabs::-webkit-scrollbar,
.ifrs9-a2-tabs::-webkit-scrollbar,
.wb-utl-tabs-bar::-webkit-scrollbar,
.ts-ecl-primary-tabs::-webkit-scrollbar { display: none; }

/* Shell utility hosts share the same full-screen behavior as Modelos ECL on
 * compact viewports. The specific renderer still controls its inner layout. */
@media (max-width: 760px) {
  .vsql-utility-modal-root,
  .wb-um-root {
    padding: 0 !important;
  }

  .vsql-utility-modal-shell,
  .wb-um-shell,
  #viewsql-utility-modal-host-overlay .vsql-um-box {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    border-radius: 0 !important;
    border-inline: 0 !important;
  }

  .vsql-utility-modal-body,
  .wb-um-body,
  #viewsql-utility-modal-host-overlay .vsql-um-body {
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .vsql-utility-modal-footer,
  .wb-um-footer,
  #viewsql-utility-modal-host-overlay .vsql-um-footer {
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .vsql-utility-modal-actions,
  .vsql-utility-modal-footer-actions,
  .wb-um-footer-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .vsql-utility-modal-actions > *,
  .vsql-utility-modal-footer-actions > *,
  .wb-um-footer-actions > * {
    flex: 1 1 140px;
  }
}

@media (max-width: 560px) {
  :root { --vsql-responsive-page-gap: 8px; }

  .vsql-utility-modal-head,
  .vsql-utility-modal-header,
  .wb-um-head,
  #viewsql-utility-modal-host-overlay .vsql-um-header {
    padding: 11px 12px !important;
  }

  .vsql-utility-modal-body,
  .wb-um-body,
  #viewsql-utility-modal-host-overlay .vsql-um-body {
    padding: 10px 12px !important;
  }

  .vsql-utility-modal-footer,
  .wb-um-footer,
  #viewsql-utility-modal-host-overlay .vsql-um-footer {
    padding-inline: 12px !important;
  }

  .vsql-sf select,
  .vsql-sf input:not([type="checkbox"]),
  .vsql-sf textarea,
  .ifrs9-a2 select,
  .ifrs9-a2 input:not([type="checkbox"]) {
    min-height: 38px;
  }
}

/* Reduced motion applies to the shared utility surfaces as well as Modelos
 * ECL. */
@media (prefers-reduced-motion: reduce) {
  .vsql-sf *,
  .ifrs9-a2 *,
  .wb-utl-rich * {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* R42 AV82 — canonical tab-scroll hardening.
 * The outer row must be allowed to shrink; the track owns horizontal scroll.
 * This covers the Shell apps that predate the shared tab selector set. */
.wb-tabs-row,
.plots-tabs-row,
.dash-tabs-row,
.proyectos-header,
.admin-tabs,
.personas-tabs,
.drawer-tabs-row,
.inv-pending-tabs,
.dash-tw-tabs,
.catalog-tabs,
.plots-main-tabs {
  min-width: 0;
  max-width: 100%;
}

.wb-tabs,
.plots-tabs,
.dash-tabs,
.dash-tabs-track,
.proyectos-breadcrumb,
.wb-lens-subtabs,
.wb-drawer-tabs,
.wb-sql-help-tabs,
.vsql-responsive-tabs,
.ifrs9-a2-tabs,
.wb-utl-tabs-bar,
.ts-ecl-primary-tabs,
.admin-tabs,
.personas-tabs,
.drawer-tabs-row,
.inv-pending-tabs,
.dash-tw-tabs,
.catalog-tabs,
.plots-main-tabs {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex-wrap: nowrap !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y;
  scrollbar-width: none;
}

.wb-tabs::-webkit-scrollbar,
.plots-tabs::-webkit-scrollbar,
.dash-tabs::-webkit-scrollbar,
.dash-tabs-track::-webkit-scrollbar,
.proyectos-breadcrumb::-webkit-scrollbar,
.wb-lens-subtabs::-webkit-scrollbar,
.wb-drawer-tabs::-webkit-scrollbar,
.wb-sql-help-tabs::-webkit-scrollbar,
.admin-tabs::-webkit-scrollbar,
.personas-tabs::-webkit-scrollbar,
.drawer-tabs-row::-webkit-scrollbar,
.inv-pending-tabs::-webkit-scrollbar,
.dash-tw-tabs::-webkit-scrollbar,
.catalog-tabs::-webkit-scrollbar,
.plots-main-tabs::-webkit-scrollbar { display: none; }

.wb-tab,
.plots-tab,
.dash-tab,
.wb-lens-subtabs > *,
.wb-drawer-tabs > *,
.wb-sql-help-tabs > *,
.admin-tabs > *,
.personas-tabs > *,
.drawer-tabs-row > *,
.inv-pending-tabs > *,
.dash-tw-tabs > *,
.catalog-tabs > *,
.plots-main-tabs > * {
  flex-shrink: 0;
}