/*
  =============================================================================
  PUNTO Responsive Engine — PRE-A
  Candado global anti-desborde (Viewport Contract)
  =============================================================================

  Una sola aplicación responsive. Jamás scroll horizontal global.

  Scroll-X permitido ÚNICAMENTE dentro de:
    .punto-table-scroller y alias (.core-table-wrap, .productos-centro-table-wrap, …)

  Tabs / filtros en PRE-A: solo contención local (scroll propio).
  Adaptación avanzada → PRE-D. Prioridades de columnas / cards → PRE-B.

  Carga:
    1) _PuntoHead (base)
    2) _PuntoResponsiveLock al final del <head> (después de Styles de módulo)

  Breakpoints de validación funcional: 390 · 768 · 1024 · 1366 · 1440+
  Tokens oficiales: --punto-bp-xs|sm|md|lg|xl
  =============================================================================
*/

:root {
  --punto-bp-xs: 480px;
  --punto-bp-sm: 768px;
  --punto-bp-md: 1024px;
  --punto-bp-lg: 1280px;
  --punto-bp-xl: 1536px;
  --punto-sidebar-width: 310px;

  /* Anchos de aceptación PRE-A (referencia; no generan media queries por sí solos) */
  --punto-qa-phone: 390px;
  --punto-qa-tablet: 768px;
  --punto-qa-laptop: 1024px;
  --punto-qa-notebook: 1366px;
  --punto-qa-desktop: 1440px;
}

/* ---- Viewport Contract (documento) ---- */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  html {
    overflow-x: hidden;
  }
}

body.app-body,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  body.app-body,
  body {
    overflow-x: hidden;
  }
}

/* ---- Application Shell ---- */
.app-shell {
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
  box-sizing: border-box;
}

@supports not (overflow-x: clip) {
  .app-shell {
    overflow-x: hidden;
  }
}

.app-sidebar {
  flex: 0 0 var(--punto-sidebar-width);
  width: var(--punto-sidebar-width);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.app-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: auto;
  max-width: 100%;
  min-width: 0; /* crítico: permite que main se encoja junto a sidebar */
  overflow-x: clip;
  box-sizing: border-box;
}

@supports not (overflow-x: clip) {
  .app-content {
    overflow-x: hidden;
  }
}

.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 0.75rem;
  box-sizing: border-box;
}

.app-topbar > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.topbar-title,
.topbar-subtitle,
.topbar-user-name,
.topbar-user-role {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.topbar-user-area {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
}

.app-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
  box-sizing: border-box;
}

@supports not (overflow-x: clip) {
  .app-main {
    overflow-x: hidden;
  }
}

.app-footer {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Hijos directos del main no ensanchan el documento */
.app-main > * {
  max-width: 100%;
  min-width: 0;
}

/* ---- Page shells / módulos conocidos ---- */
.core-page-shell,
.punto-page,
.productos-centro-page,
.punto-collection,
.punto-collection-workspace,
.punto-collection-board,
.punto-collection-worklist,
.empresas-page,
.organizacion-page,
.seguridad-page,
.disponibilidad-page {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ---- Utilidades reutilizables ---- */
.punto-re-min-0 {
  min-width: 0;
}

.punto-re-max-full {
  max-width: 100%;
}

.punto-re-contain {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ---- Toolbars / filtros / headers: reacomodar, no empujar ---- */
.app-main :where(
  .punto-metrics-grid,
  .core-kpi-grid,
  .core-compact-kpi-grid,
  .core-filter-bar,
  .core-exec-actionbar,
  .core-action-bar,
  .punto-toolbar,
  .punto-filter-bar,
  .punto-page-header,
  .empresas-filters,
  .empresas-summary,
  .empresas-panel,
  .empresas-hero,
  .productos-centro-hero,
  .productos-centro-heading,
  .productos-centro-filters,
  .punto-context-filter-bar,
  .punto-context-filter-bar__primary,
  .punto-context-filter-bar__secondary,
  .punto-context-filter-bar__chips,
  .productos-centro-kpis,
  .punto-collection-header,
  .punto-collection-summary,
  .punto-collection-summary__grid,
  .punto-collection-summary__more,
  .punto-collection-table-wrap,
  .punto-collection-row,
  .punto-collection-row__action-group,
  .punto-collection-actionbar,
  .punto-collection-context-panel
) {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.app-main :where(
  .core-filter-bar,
  .core-exec-actionbar,
  .core-action-bar,
  .punto-toolbar,
  .punto-filter-bar,
  .punto-page-header,
  .productos-centro-hero,
  .productos-centro-heading,
  .productos-centro-hero__actions,
  .productos-centro-filter-actions,
  .punto-context-filter-bar__chips,
  .punto-context-filter-bar__actions,
  .punto-collection-header,
  .punto-collection-header__actions,
  .empresas-hero
) {
  flex-wrap: wrap;
}

.punto-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.punto-page-header > *,
.productos-centro-hero > *,
.productos-centro-heading > *,
.punto-collection-header > *,
.empresas-hero > * {
  min-width: 0;
  max-width: 100%;
}

/* Grillas KPI: no forzar ancho de página */
.app-main :where(.productos-centro-kpis, .punto-collection-summary__grid, .core-kpi-grid, .core-compact-kpi-grid, .core-exec-kpi-grid, .empresas-summary) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* ---- Tabs / chips: scroll LOCAL (PRE-A; menú “Más” = PRE-D) ---- */
.app-main :where(
  .core-segmented,
  .core-tabs,
  .punto-tabs,
  .nav-tabs,
  .nav-pills,
  [role="tablist"]
) {
  display: flex;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ---- Table scroller canónico (único scroll-X de datos) ---- */
html body .app-main :where(
  .punto-table-scroller,
  .core-table-wrap,
  .empresas-table-wrap,
  .productos-centro-table-wrap,
  .proyeccion-table-wrap,
  .table-responsive
) {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

html body .app-main :where(
  .punto-table-scroller,
  .core-table-wrap,
  .empresas-table-wrap,
  .productos-centro-table-wrap,
  .proyeccion-table-wrap,
  .table-responsive
) > table {
  max-width: none; /* la tabla puede ser ancha; el wrap absorbe */
}

/* ---- Anti-100vw / media ---- */
.app-shell [style*="100vw"],
.app-main [style*="100vw"] {
  max-width: 100% !important;
}

.app-main img,
.app-main svg,
.app-main canvas,
.app-main video {
  max-width: 100%;
  height: auto;
}

/* ---- Shell < md: sidebar apilada sin empujar fuera del viewport ---- */
@media (max-width: 999px) {
  .app-shell {
    flex-direction: column;
  }

  .app-sidebar {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    position: relative;
  }
}