/* ==========================================================
   Prestax · Gastos / Compras · Escritorio 3 columnas
   Fase 112T
   - Solo escritorio.
   - Estructura: iconos izquierda · formulario centro · panel derecha.
   - Se vuelve a base 112Q.
   - El scroll se aplica al panel Agenda de pagos completo.
   - No toca móvil.
   ========================================================== */

@media (min-width: 980px) and (hover: hover) and (pointer: fine) {
  #expensesModal {
    --expdesk-rail-width: clamp(96px, 6.6vw, 126px);
    --expdesk-right-width: clamp(410px, 29vw, 520px);
    --expdesk-grid-gap: clamp(0.6rem, 0.75vw, 0.95rem);
    --expdesk-form-field-min: 180px;
    --expdesk-launcher-size: clamp(
      68px,
      calc(var(--expdesk-rail-width) - 1.4rem),
      104px
    );
    --expdesk-launcher-icon-size: clamp(42px, 3.15vw, 64px);
    --expdesk-launcher-badge-size: clamp(22px, 1.6vw, 30px);
    --expdesk-launcher-badge-offset: clamp(6px, 0.55vw, 10px);
    --expdesk-modal-bottom-gap: 0.7rem;
    --expdesk-modal-height: calc(
      100dvh - var(--appHeaderH, 56px) - var(--expdesk-modal-bottom-gap)
    );
  }

  #expensesModal.modal-backdrop {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 0.8rem var(--expdesk-modal-bottom-gap) !important;
    overflow: hidden !important;
  }

  #expensesModal > .modal {
    height: var(--expdesk-modal-height) !important;
    max-height: var(--expdesk-modal-height) !important;
    overflow: hidden !important;
  }

  /* RESP1.4B · Encaje vertical real bajo la cabecera de Prestax.
     dist/app.css conserva un override legacy para backdrops con --modal-height
     que fuerza 100dvh. Como el modal también arranca en --appHeaderH, ese
     alto desplaza el borde inferior fuera del visual viewport. Igualamos la
     especificidad y restauramos la altura de workspace calculada. */
  #expensesModal.modal-backdrop[style*="--modal-height"] > .modal {
    height: var(--expdesk-modal-height) !important;
    max-height: var(--expdesk-modal-height) !important;
  }

  #expensesModal
    > .modal
    > .modal-body.exp-modal-body:has(
      .exp-tab[data-exp-tab-panel="expenses"]:not([hidden])
    ) {
    overflow: hidden !important;
  }

  #expensesModal .exp-tab[data-exp-tab-panel="expenses"]:not([hidden]) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  #expensesModal
    .exp-tab[data-exp-tab-panel="expenses"]
    > .exp-split.exp-desktop-workspace-enabled {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  #expensesModal .exp-split.exp-desktop-workspace-enabled {
    display: grid !important;
    grid-template-columns: var(--expdesk-rail-width) minmax(0, 1fr) minmax(
        0,
        var(--expdesk-right-width)
      ) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: var(--expdesk-grid-gap) !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #expensesModal #expDesktopWorkspaceNav {
    grid-column: 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 0.8rem 0.7rem !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
    border: 4px solid rgba(1, 10, 24, 0.98) !important;
    border-radius: 20px !important;
    background: linear-gradient(
      180deg,
      rgba(31, 45, 67, 0.98),
      rgba(17, 28, 44, 0.98)
    ) !important;
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.24) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  #expensesModal #expDesktopWorkspaceNav[hidden],
  #expensesModal #expDesktopWorkspaceRegion[hidden],
  #expensesModal #expDesktopWorkspacePlaceholder[hidden] {
    display: none !important;
  }

  #expensesModal .exp-workspace-launcher {
    position: relative !important;
    width: var(--expdesk-launcher-size) !important;
    min-width: var(--expdesk-launcher-size) !important;
    max-width: var(--expdesk-launcher-size) !important;
    height: var(--expdesk-launcher-size) !important;
    min-height: var(--expdesk-launcher-size) !important;
    max-height: var(--expdesk-launcher-size) !important;
    aspect-ratio: 1 / 1 !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0.58rem !important;
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(96, 165, 250, 0.42) !important;
    border-radius: 18px !important;
    background: linear-gradient(
      180deg,
      rgba(14, 26, 46, 0.96),
      rgba(10, 20, 36, 0.96)
    ) !important;
    cursor: pointer !important;
    transition:
      transform 0.18s ease,
      filter 0.18s ease,
      border-color 0.18s ease !important;
  }

  #expensesModal .exp-workspace-launcher:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.06) !important;
  }

  #expensesModal .exp-workspace-launcher[data-active="true"] {
    border-color: rgba(74, 222, 128, 0.74) !important;
    box-shadow:
      0 0 0 3px rgba(21, 128, 61, 0.12),
      inset 0 0 0 1px rgba(74, 222, 128, 0.22) !important;
    background: linear-gradient(
      180deg,
      rgba(18, 38, 58, 0.98),
      rgba(12, 24, 42, 0.98)
    ) !important;
  }

  #expensesModal .exp-workspace-launcher-icon,
  #expensesModal .exp-workspace-launcher-icon svg {
    width: var(--expdesk-launcher-icon-size) !important;
    min-width: var(--expdesk-launcher-icon-size) !important;
    max-width: var(--expdesk-launcher-icon-size) !important;
    height: var(--expdesk-launcher-icon-size) !important;
    min-height: var(--expdesk-launcher-icon-size) !important;
    max-height: var(--expdesk-launcher-icon-size) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #f8fafc !important;
  }

  #expensesModal .exp-workspace-launcher-img {
    width: var(--expdesk-launcher-icon-size) !important;
    height: var(--expdesk-launcher-icon-size) !important;
    max-width: var(--expdesk-launcher-icon-size) !important;
    max-height: var(--expdesk-launcher-icon-size) !important;
    display: block !important;
    object-fit: contain !important;
    pointer-events: none !important;
    user-select: none !important;
  }

  #expensesModal .exp-workspace-launcher-badge {
    position: absolute !important;
    top: var(--expdesk-launcher-badge-offset) !important;
    right: var(--expdesk-launcher-badge-offset) !important;
    min-width: var(--expdesk-launcher-badge-size) !important;
    height: var(--expdesk-launcher-badge-size) !important;
    padding: 0 0.32rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #22c55e !important;
    color: #06210f !important;
    font-size: clamp(0.72rem, 0.64rem + 0.18vw, 0.82rem) !important;
    font-weight: 900 !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24) !important;
  }

  #expensesModal .exp-split.exp-desktop-workspace-enabled > .exp-main {
    grid-column: 2 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #expensesModal #expDesktopWorkspaceRegion {
    grid-column: 3 !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #expensesModal #expDesktopWorkspacePlaceholder {
    width: 100% !important;
    min-height: 100% !important;
    padding: 0.9rem !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    gap: 1rem !important;
    border-radius: 22px !important;
    background: transparent !important;
  }

  #expensesModal .exp-desktop-workspace-placeholder-title {
    padding: 0.8rem 1rem !important;
    border: 4px solid rgba(1, 10, 24, 0.98) !important;
    border-radius: 18px !important;
    background: linear-gradient(
      180deg,
      rgba(17, 29, 47, 0.98),
      rgba(12, 22, 37, 0.98)
    ) !important;
    color: #f8fafc !important;
    font-size: clamp(1.3rem, 1.05rem + 0.7vw, 2rem) !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }

  #expensesModal #expDesktopWorkspacePlaceholder p {
    margin: 0 !important;
    padding: 1rem 1.1rem !important;
    border-radius: 20px !important;
    background: linear-gradient(
      180deg,
      rgba(17, 29, 47, 0.18),
      rgba(12, 22, 37, 0.3)
    ) !important;
    color: rgba(248, 250, 252, 0.78) !important;
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
  }

  #expensesModal
    #expDesktopWorkspaceRegion
    > :is(.exp-pay-agenda, .exp-review-panel, .exp-close-panel) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  #expensesModal .exp-split.exp-desktop-workspace-enabled .exp-form-grid {
    grid-template-columns: repeat(
      auto-fit,
      minmax(var(--expdesk-form-field-min), 1fr)
    ) !important;
  }
}

@media (min-width: 980px) and (max-width: 1420px) and (hover: hover) and (pointer: fine) {
  #expensesModal {
    --expdesk-rail-width: 96px;
    --expdesk-right-width: clamp(380px, 29vw, 440px);
    --expdesk-grid-gap: 0.72rem;
    --expdesk-form-field-min: 170px;
  }

  #expensesModal #expDesktopWorkspaceNav {
    padding: 0.68rem 0.55rem !important;
    gap: 0.78rem !important;
  }

  #expensesModal .exp-workspace-launcher {
    padding: 0.54rem !important;
  }

  #expensesModal .exp-split.exp-desktop-workspace-enabled > .exp-main {
    padding: 0.85rem !important;
  }
}

@media (min-width: 980px) and (max-width: 1180px) and (hover: hover) and (pointer: fine) {
  #expensesModal {
    --expdesk-rail-width: 84px;
    --expdesk-right-width: clamp(330px, 32vw, 380px);
    --expdesk-grid-gap: 0.6rem;
    --expdesk-form-field-min: 150px;
  }

  #expensesModal #expDesktopWorkspaceNav {
    padding: 0.58rem 0.46rem !important;
    gap: 0.62rem !important;
    border-width: 3px !important;
    border-radius: 18px !important;
  }

  #expensesModal .exp-workspace-launcher {
    padding: 0.46rem !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 979.98px), (hover: none), (pointer: coarse) {
  #expensesModal #expDesktopWorkspaceNav,
  #expensesModal #expDesktopWorkspaceRegion,
  #expensesModal #expDesktopWorkspacePlaceholder {
    display: none !important;
  }
}

/* ==========================================================
   Fase 112G · Columna derecha: SOLO un panel visible de verdad
   Motivo:
   - En escritorio algunos estilos anteriores forzaban display:block !important
     sobre .exp-pay-agenda/.exp-review-panel/.exp-close-panel.
   - Eso anulaba el atributo hidden aplicado por JS.
   - Esta regla debe quedar al final para que hidden gane siempre.
   ========================================================== */

@media (min-width: 980px) and (hover: hover) and (pointer: fine) {
  #expensesModal #expDesktopWorkspaceRegion > section[hidden],
  #expensesModal #expDesktopWorkspaceRegion > .exp-pay-agenda[hidden],
  #expensesModal #expDesktopWorkspaceRegion > .exp-review-panel[hidden],
  #expensesModal #expDesktopWorkspaceRegion > .exp-close-panel[hidden] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  #expensesModal #expDesktopWorkspaceRegion > section:not([hidden]) {
    display: block !important;
    visibility: visible !important;
  }

  /* ==========================================================
   Fase 112T · Scroll en el panel Agenda de pagos completo
   - El rail izquierdo y el formulario central no se mueven.
   - La columna derecha mantiene su alto.
   - Cuando Agenda está abierta, el scroll con la rueda ocurre en
     .exp-pay-agenda: suben cabecera, botones, bloques y documentos juntos.
   - Se eliminan scrolls internos pequeños de grupos/documentos.
   ========================================================== */

  #expensesModal #expDesktopWorkspaceRegion {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    padding-right: 0 !important;
  }

  #expensesModal #expDesktopWorkspaceRegion > .exp-pay-agenda:not([hidden]) {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0.28rem !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
  }

  #expensesModal
    #expDesktopWorkspaceRegion
    > .exp-pay-agenda:not([hidden])
    > .exp-pay-shell,
  #expensesModal
    #expDesktopWorkspaceRegion
    > .exp-pay-agenda:not([hidden])
    > .exp-pay-shell[open],
  #expensesModal
    #expDesktopWorkspaceRegion
    > .exp-pay-agenda:not([hidden])
    > .exp-pay-shell:not([open]),
  #expensesModal
    #expDesktopWorkspaceRegion
    > .exp-pay-agenda:not([hidden])
    > .exp-pay-shell
    > .exp-pay-shell-summary,
  #expensesModal
    #expDesktopWorkspaceRegion
    > .exp-pay-agenda:not([hidden])
    > .exp-pay-shell[open]
    > .exp-pay-shell-body,
  #expensesModal
    #expDesktopWorkspaceRegion
    > .exp-pay-agenda:not([hidden])
    .exp-pay-toolbar,
  #expensesModal
    #expDesktopWorkspaceRegion
    > .exp-pay-agenda:not([hidden])
    .exp-pay-footnote,
  #expensesModal
    #expDesktopWorkspaceRegion
    > .exp-pay-agenda:not([hidden])
    .exp-pay-groups,
  #expensesModal
    #expDesktopWorkspaceRegion
    > .exp-pay-agenda:not([hidden])
    .exp-pay-group,
  #expensesModal
    #expDesktopWorkspaceRegion
    > .exp-pay-agenda:not([hidden])
    .exp-pay-group[open],
  #expensesModal
    #expDesktopWorkspaceRegion
    > .exp-pay-agenda:not([hidden])
    .exp-pay-group[open]
    > .exp-pay-group-body {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #expensesModal
    #expDesktopWorkspaceRegion
    > .exp-pay-agenda:not([hidden])
    > .exp-pay-shell
    > .exp-pay-shell-summary,
  #expensesModal
    #expDesktopWorkspaceRegion
    > .exp-pay-agenda:not([hidden])
    .exp-pay-group[open]
    > summary {
    display: grid !important;
  }

  #expensesModal
    #expDesktopWorkspaceRegion
    > .exp-pay-agenda:not([hidden])
    > .exp-pay-shell[open]
    > .exp-pay-shell-body {
    display: block !important;
    padding-right: 0.42rem !important;
  }

  #expensesModal
    #expDesktopWorkspaceRegion
    > .exp-pay-agenda:not([hidden])
    .exp-pay-groups {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.55rem !important;
    margin-top: 0.65rem !important;
    padding-right: 0 !important;
  }

  #expensesModal
    #expDesktopWorkspaceRegion
    > .exp-pay-agenda:not([hidden])
    .exp-pay-group,
  #expensesModal
    #expDesktopWorkspaceRegion
    > .exp-pay-agenda:not([hidden])
    .exp-pay-group[open] {
    display: block !important;
  }

  #expensesModal
    #expDesktopWorkspaceRegion
    > .exp-pay-agenda:not([hidden])
    .exp-pay-group[open]
    > .exp-pay-group-body {
    display: grid !important;
    gap: 0.42rem !important;
    align-content: start !important;
  }

  #expensesModal
    #expDesktopWorkspaceRegion
    > .exp-pay-agenda:not([hidden])::-webkit-scrollbar {
    width: 9px !important;
    height: 9px !important;
  }

  #expensesModal
    #expDesktopWorkspaceRegion
    > .exp-pay-agenda:not([hidden])::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: rgba(148, 163, 184, 0.42) !important;
  }

  #expensesModal
    #expDesktopWorkspaceRegion
    > .exp-pay-agenda:not([hidden])::-webkit-scrollbar-track {
    border-radius: 999px !important;
    background: rgba(15, 23, 42, 0.22) !important;
  }
  /* ==========================================================
   Fase 112U · Scroll columna derecha: fix especificidad grupo-body
   DEBE IR AL FINAL — tiene que ganar a todos los bloques anteriores.
   ========================================================== */

  /*
   * PROBLEMA: 97-desktop.css fase 111g usa selector con especificidad (2,5,0)
   *   que aplica max-height:190px al .exp-pay-group-body, limitando "Pagadas
   *   recientes" a ~2 ítems y bloqueando el scroll de la columna derecha.
   *
   * La fase 112T intentaba anularlo pero su selector tenía solo (2,4,0) →
   *   perdía la batalla de especificidad aunque llevara !important.
   *
   * SOLUCIÓN: añadir .exp-pay-shell[open] al selector sube la
   *   especificidad a (2,6,0), ganando siempre a 111g.
   *   El scroll sigue ocurriendo en .exp-pay-agenda (el padre),
   *   los grupos se expanden sin techo.
   */
  #expensesModal
    #expDesktopWorkspaceRegion
    > .exp-pay-agenda:not([hidden])
    > .exp-pay-shell[open]
    .exp-pay-group[open]
    > .exp-pay-group-body {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* scrollbar estándar Firefox para la agenda */
  #expensesModal #expDesktopWorkspaceRegion > .exp-pay-agenda:not([hidden]) {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(148, 163, 184, 0.42) rgba(15, 23, 42, 0.22) !important;
  }

  /* ==========================================================
   Fase 112V · Fix: modal no se desplaza al hacer clic en botones del rail
   DEBE IR AL FINAL.

   CAUSA RAÍZ:
   - overflow:hidden NO impide el desplazamiento programático por focus
     (scroll-into-view). Cuando el navegador enfoca un .exp-workspace-launcher,
     busca el ancestro scrollable más cercano y puede mover el contenido del
     flex container .modal-backdrop aunque éste tenga overflow:hidden.
   - Esto sube visualmente el modal tapando los botones del header.

   SOLUCIÓN:
   - overflow:clip  →  el ÚNICO valor que bloquea TODOS los tipos de scroll
     (usuario, programático y focus-triggered). Soportado en Chrome 90+,
     Firefox 81+, Safari 16+.
   - scroll-margin:0 en los launchers para que el navegador no intente
     ajustar ningún contenedor al enfocarlos.
   - contain:layout size en el grid y en el modal evita que el reflow de
     un elemento interior afecte a contenedores externos.
   ========================================================== */

  /* 1. Backdrop: clip impide cualquier scroll programático en el flex container */
  #expensesModal.modal-backdrop,
  #expensesModal > .modal {
    overflow: clip !important;
  }

  /* 3. El grid de 3 columnas: clip + contain para aislar reflows */
  #expensesModal .exp-split.exp-desktop-workspace-enabled {
    overflow: clip !important;
    contain: layout size !important;
  }

  /* 4. Los botones del rail nunca deben provocar scroll-into-view en ancestros */
  #expensesModal .exp-workspace-launcher {
    scroll-margin: 0 !important;
  }

  /* 5. El rail izquierdo sí puede hacer scroll interno (por si hay muchos botones),
        pero que no propague el scroll hacia arriba */
  #expensesModal #expDesktopWorkspaceNav {
    overscroll-behavior: contain !important;
  }
}


/* ==========================================================
   RESP1.4B · Revisión rápida: ocupar solo el alto disponible
   2026-09-10
   - El panel abierto no puede crecer por debajo de
     #expDesktopWorkspaceRegion.
   - El summary permanece fijo y .exp-review-shell-body usa
     exactamente el espacio restante como único scroll vertical.
   ========================================================== */
@media (min-width: 980px) and (hover: hover) and (pointer: fine) {
  #expensesModal
    #expDesktopWorkspaceRegion
    > .exp-review-panel:not([hidden]):has(> .exp-review-shell[open]) {
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  #expensesModal
    #expDesktopWorkspaceRegion
    > .exp-review-panel:not([hidden])
    > .exp-review-shell[open] {
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  #expensesModal
    #expDesktopWorkspaceRegion
    > .exp-review-panel:not([hidden])
    > .exp-review-shell[open]
    > .exp-review-shell-summary {
    flex: 0 0 auto !important;
  }

  #expensesModal
    #expDesktopWorkspaceRegion
    > .exp-review-panel:not([hidden])
    > .exp-review-shell[open]
    > .exp-review-shell-body {
    /*
     * <details> no reduce de forma fiable el contenido desplegable como
     * un flex-item normal en esta composición. JS mide el hueco real
     * bajo <summary> y publica --exp-review-body-fit en el shell.
     */
    flex: 0 0 auto !important;
    height: var(--exp-review-body-fit, calc(100% - 160px)) !important;
    min-height: 0 !important;
    max-height: var(--exp-review-body-fit, calc(100% - 160px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
}