/*
  AVANZA CONTROL V5.4.6
  Distribución global para escritorio.
  No modifica la vista móvil ni la lógica del sistema.
*/

:root {
  --avanza-desktop-max-width: 1720px;
  --avanza-desktop-side-gap: 22px;
  --avanza-desktop-section-gap: 16px;
  --avanza-desktop-card-radius: 18px;
}

/* Evitar que tarjetas y columnas desborden. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (min-width: 1100px) {
  html,
  body {
    width: 100%;
    min-height: 100%;
  }

  body {
    margin: 0;
    overflow-x: hidden;

    /*
      Estas variables también pueden ser utilizadas
      por los módulos existentes.
    */
    --page-max-width:
      var(--avanza-desktop-max-width);

    --content-max-width:
      var(--avanza-desktop-max-width);

    --container-max-width:
      var(--avanza-desktop-max-width);
  }

  /*
    Liberar los contenedores generales que actualmente
    limitan el ancho de la plataforma.
  */
  :where(
    #app,
    #appRoot,
    #root,
    .app,
    .app-root,
    .app-shell,
    .application-shell,
    .workspace-shell,
    .main-shell,
    .page-shell,
    .layout-shell
  ) {
    width: 100% !important;
    max-width: none !important;
  }

  /*
    Contenido principal común a todos los módulos.
  */
  :where(
    main,
    [role="main"],
    #mainContent,
    #appContent,
    .app-main,
    .main-content,
    .page-content,
    .content-area,
    .workspace-content,
    .application-content
  ) {
    width:
      min(
        calc(
          100vw -
          (var(--avanza-desktop-side-gap) * 2)
        ),
        var(--avanza-desktop-max-width)
      ) !important;

    max-width:
      var(--avanza-desktop-max-width) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /*
    Encabezado principal.
  */
  :where(
    .app-header,
    .application-header,
    .main-header,
    .topbar,
    .top-bar,
    .header-shell
  ) {
    width:
      min(
        calc(
          100vw -
          (var(--avanza-desktop-side-gap) * 2)
        ),
        var(--avanza-desktop-max-width)
      ) !important;

    max-width:
      var(--avanza-desktop-max-width) !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }

  /*
    Cada vista o módulo utilizará todo el ancho
    disponible dentro del contenedor principal.
  */
  :where(
    [id$="View"],
    [id$="Screen"],
    [id$="Page"],
    .module-view,
    .module-screen,
    .page-view,
    .workspace-view,
    .screen-content,
    .view-content
  ) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
  }

  /*
    Barra superior de acciones de cada módulo:
    los botones se distribuyen mejor sin desbordarse.
  */
  :where(
    .toolbar,
    .action-bar,
    .module-actions,
    .page-actions,
    .module-tabs,
    .page-tabs,
    .tabs-row
  ) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
  }

  /*
    Las cuadrículas se mantienen alineadas arriba.
  */
  :where(
    .dashboard-grid,
    .content-grid,
    .cards-grid,
    .module-grid,
    .workspace-grid,
    .sales-grid
  ) {
    width: 100%;
    min-width: 0;
    align-items: start;
    gap: var(--avanza-desktop-section-gap);
  }

  /*
    Evitar columnas estrechas o contenido cortado.
  */
  :where(
    .card,
    .panel,
    .section-card,
    .module-card,
    .surface,
    .summary-card
  ) {
    min-width: 0;
    max-width: 100%;
  }

  /*
    Tablas amplias en Inventario, Caja, Clientes,
    Cartera y reportes.
  */
  :where(
    .table-wrapper,
    .table-container,
    .data-table-wrapper,
    .responsive-table,
    .records-table
  ) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }

  :where(
    table
  ) {
    max-width: 100%;
  }

  /*
    Formularios más compactos en computadora.
  */
  :where(
    input,
    select,
    textarea,
    button
  ) {
    max-width: 100%;
  }

  /*
    Navegación inferior: conserva el funcionamiento,
    pero usa el ancho disponible del escritorio.
  */
  :where(
    .bottom-nav,
    .app-bottom-nav,
    .mobile-bottom-nav,
    .main-bottom-nav
  ) {
    width:
      min(
        calc(
          100vw -
          (var(--avanza-desktop-side-gap) * 2)
        ),
        var(--avanza-desktop-max-width)
      ) !important;

    max-width:
      var(--avanza-desktop-max-width) !important;
  }
}

/*
  En monitores grandes se aprovecha todavía más espacio.
*/
@media (min-width: 1550px) {
  :root {
    --avanza-desktop-max-width: 1840px;
    --avanza-desktop-side-gap: 18px;
  }
}

/*
  Tabletas y teléfonos mantienen la distribución
  móvil actual.
*/
@media (max-width: 1099px) {
  :root {
    --avanza-desktop-side-gap: 14px;
  }
}


/* === AVANZA LAYOUT PRECISO INICIO === */

/*
  Diseño de escritorio:
  - Pantalla completa.
  - Ventas en dos columnas.
  - Resumen fijo.
  - Navegación inferior compacta.
  - Móvil sin modificaciones.
*/

@media (min-width: 1100px) {

  html,
  body {
    width: 100%;
    min-height: 100%;
  }

  body {
    overflow-x: hidden;
  }

  /*
    Contenedor principal real de la plataforma.
    Antes estaba limitado a 1180px.
  */
  .app {
    width:
      min(
        1760px,
        calc(100% - 24px)
      ) !important;

    max-width: none !important;
    min-height: 100vh;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-bottom: 72px !important;
  }

  #appView {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
  }

  main {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    padding: 18px !important;
  }

  /*
    Encabezado más compacto.
  */
  .topbar {
    width: 100% !important;
    max-width: none !important;
    min-height: 68px !important;
    padding: 10px 18px !important;
  }

  /*
    Tarjetas generales para todos los módulos.
  */
  .card {
    max-width: none !important;
    min-width: 0;
    padding: 16px !important;
    margin-bottom: 14px !important;
  }

  .page-heading {
    margin-bottom: 14px !important;
  }

  /*
    Tablas y listados:
    Inventario, Clientes, Caja y Cartera.
  */
  .table-wrapper,
  .table-container,
  .data-table-wrapper,
  .responsive-table {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
  }

  /*
    Navegación inferior de escritorio.
    Conserva todos los módulos, pero ocupa menos altura.
  */
  .nav {
    width:
      min(
        1760px,
        calc(100% - 24px)
      ) !important;

    max-width: none !important;
    min-height: 58px !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(0, 1fr) !important;
  }

  .nav button {
    min-height: 58px !important;
    padding: 5px 8px !important;
    gap: 2px !important;
  }

  .nav-icon {
    font-size: 17px !important;
  }

  /*
    ==================================================
    MÓDULO DE VENTAS
    ==================================================
  */

  #salesSection {
    width: 100%;
    max-width: none;
  }

  /*
    Acciones superiores distribuidas uniformemente.
  */
  #salesSection .sales-command-tabs {
    display: grid !important;
    grid-template-columns:
      repeat(5, minmax(0, 1fr)) !important;

    width: 100%;
    gap: 10px;
    overflow: visible !important;
  }

  #salesSection .sales-command-tabs .sales-tab {
    width: 100%;
    min-width: 0 !important;
    min-height: 50px !important;
  }

  /*
    Encabezado de la operación.
  */
  .sales-operation-header {
    padding: 16px 18px 13px !important;
  }

  .sales-operation-header h2 {
    font-size: 22px !important;
  }

  /*
    Formulario a la izquierda y resumen a la derecha.
  */
  .sales-operation-grid {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(340px, 400px) !important;

    align-items: start !important;
    gap: 16px !important;
    padding: 16px !important;
  }

  .sales-operation-main {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100%;
    min-width: 0;
    order: initial !important;
  }

  .sales-operation-summary {
    grid-column: 2 !important;
    grid-row: 1 !important;
    order: initial !important;

    position: sticky !important;
    top: 86px !important;

    width: 100%;
    min-width: 0;
    max-height:
      calc(100vh - 104px);

    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /*
    Secciones internas más compactas.
  */
  .sales-form-section {
    padding: 15px !important;
  }

  .sales-step-heading {
    margin-bottom: 11px !important;
  }

  /*
    Plan Contado:
    aprovechar el ancho disponible.
  */
  .promo-plan-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
  }

  .promo-schedule-layout {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .promo-plan-quick {
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;
  }

  /*
    Evitar que formularios o textos ensanchen columnas.
  */
  .sales-operation-shell,
  .sales-operation-main,
  .sales-operation-summary,
  .sales-form-section,
  .unified-review,
  .promo-plan-box {
    min-width: 0;
    max-width: 100%;
  }
}

/*
  Monitores grandes.
*/
@media (min-width: 1550px) {
  .app,
  .nav {
    width:
      min(
        1840px,
        calc(100% - 28px)
      ) !important;
  }

  .sales-operation-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(380px, 430px) !important;
  }
}

/*
  Computadoras pequeñas:
  se conserva el resumen a la derecha,
  pero con una columna más angosta.
*/
@media (min-width: 1100px) and (max-width: 1250px) {
  .sales-operation-grid {
    grid-template-columns:
      minmax(0, 1fr)
      330px !important;
  }

  #salesSection .sales-command-tabs {
    grid-template-columns:
      repeat(5, minmax(130px, 1fr)) !important;

    overflow-x: auto !important;
  }
}

/* === AVANZA LAYOUT PRECISO FIN === */