/* P17.18 · Historial integrado dentro de Gastos / Compras. */

#expensesModal #expensesHistoryModal.exp-history-embedded {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}



#expensesModal #expensesHistoryModal.exp-history-embedded[hidden] {
  display: none !important;
}

/* ===== P17.23 · Botón Informes coherente y alineado en móvil/tablet =====
   Neutraliza la regla legacy <=768px que lo sacaba del grid con position:absolute
   y evita que .hib/.hib-img lo dejen transparente con el SVG negro entre 769-979px. */
@media (max-width: 979.98px) {
  #expensesModal > .modal > .modal-header {
    align-items: center !important;
  }

  #expensesModal #openExpensesStatsBtn.hib {
    grid-area: stats !important;
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    z-index: auto !important;
    align-self: center !important;
    justify-self: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border: 1px solid rgba(96, 165, 250, 0.48) !important;
    border-radius: 10px !important;
    background: rgba(30, 41, 59, 0.96) !important;
    color: #f8fafc !important;
    box-shadow: none !important;
    transform: none !important;
    line-height: 1 !important;
  }

  #expensesModal #openExpensesStatsBtn.hib .hib-img {
    width: 22px !important;
    max-width: 22px !important;
    height: 22px !important;
    max-height: 22px !important;
    margin: 0 !important;
    display: block !important;
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
  }

  #expensesModal #openExpensesStatsBtn.hib:hover,
  #expensesModal #openExpensesStatsBtn.hib:focus-visible {
    border-color: rgba(125, 211, 252, 0.78) !important;
    background: rgba(30, 64, 175, 0.72) !important;
    transform: none !important;
  }
}

@media (max-width: 900px) {
  #expensesModal #openExpensesStatsBtn.hib {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  #expensesModal #openExpensesStatsBtn.hib .hib-img {
    width: 21px !important;
    max-width: 21px !important;
    height: 21px !important;
    max-height: 21px !important;
  }
}


#expensesModal #expensesHistoryModal.exp-history-embedded:not([hidden]) {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
}

#expensesModal
  #expensesHistoryModal.exp-history-embedded
  > .modal.exp-hist-modal {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0.75rem !important;
  overflow: hidden !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  gap: 0.65rem !important;
  border-radius: 16px !important;
}

#expensesModal #expensesHistoryModal .exp-hist-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

#expensesModal #expensesHistoryModal .eh-actions {
  flex-wrap: wrap !important;
}

#expensesModal #openExpensesHistoryBtn[data-active="true"] {
  border-color: rgba(74, 222, 128, 0.62) !important;
  background: linear-gradient(
    180deg,
    rgba(22, 163, 74, 0.98),
    rgba(21, 128, 61, 0.98)
  ) !important;
  color: #f0fdf4 !important;
}

/* P17.21 · Filtros de gestión completos y estado vacío accionable. */
#expensesModal #expensesHistoryModal .exp-hist-toolbar #ehStatusFilter {
  background: #111827 !important;
  background-color: #111827 !important;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  caret-color: #f8fafc !important;
  color-scheme: dark !important;
  opacity: 1 !important;
}

#expensesModal #expensesHistoryModal .exp-hist-toolbar #ehStatusFilter option {
  background: #111827 !important;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}

#expensesModal #expensesHistoryModal .eh-filter-control--reset button {
  width: 100% !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0.38rem 0.62rem !important;
  border-radius: 10px !important;
  font-size: 0.76rem !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

#expensesModal #expensesHistoryModal .eh-filter-summary-chips .is-danger {
  border-color: rgba(248, 113, 113, 0.48) !important;
  background: rgba(127, 29, 29, 0.34) !important;
  color: #fecaca !important;
}

#expensesModal #expensesHistoryModal .eh-filter-summary-chips .is-danger strong {
  color: #fee2e2 !important;
}

#expensesModal #expensesHistoryModal .eh-filter-summary-chips .is-comparison {
  border-color: rgba(129, 140, 248, 0.46) !important;
  background: rgba(49, 46, 129, 0.3) !important;
  color: #c7d2fe !important;
}

#expensesModal
  #expensesHistoryModal
  .eh-filter-summary-chips
  .is-comparison[data-direction="up"] {
  border-color: rgba(56, 189, 248, 0.48) !important;
  background: rgba(7, 89, 133, 0.3) !important;
}

#expensesModal
  #expensesHistoryModal
  .eh-filter-summary-chips
  .is-comparison[data-direction="down"] {
  border-color: rgba(167, 139, 250, 0.48) !important;
  background: rgba(76, 29, 149, 0.3) !important;
}

#expensesModal #expensesHistoryModal .eh-empty-state {
  min-height: 180px !important;
  padding: 1.2rem !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  border: 1px dashed rgba(96, 165, 250, 0.38) !important;
  border-radius: 14px !important;
  background: rgba(30, 64, 175, 0.12) !important;
  color: #cbd5e1 !important;
  text-align: center !important;
}

#expensesModal #expensesHistoryModal .eh-empty-state strong {
  color: #f8fafc !important;
  font-size: 0.94rem !important;
  font-weight: 920 !important;
}

#expensesModal #expensesHistoryModal .eh-empty-state span {
  max-width: 34rem !important;
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
}

#expensesModal #expensesHistoryModal .eh-empty-state button {
  min-height: 38px !important;
  margin: 0.2rem 0 0 !important;
}

@media (min-width: 980px) {
  #expensesModal .exp-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  /* P17.19 · En móvil la cabecera principal ocupa una sola fila. */
  #expensesModal > .modal > .modal-header {
    grid-template-columns: minmax(0, 1fr) 44px 44px 44px !important;
    grid-template-areas: "title stats export close" !important;
    min-height: 44px !important;
    gap: 0.28rem !important;
    padding: 0.28rem 0.42rem !important;
  }

  #expensesModal #expensesModalTitle {
    min-width: 0 !important;
    font-size: 0.88rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #expensesModal #expCloudStatus {
    display: none !important;
  }

  #expensesModal #openExpensesStatsBtn.hib,
  #expensesModal #expExportBtn.btn,
  #expensesModal #closeExpensesModalBtn.buttonclear {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  #expensesModal #openExpensesStatsBtn .hib-img {
    width: 21px !important;
    height: 21px !important;
  }

  #expensesModal #expExportBtn.btn,
  #expensesModal #closeExpensesModalBtn.buttonclear {
    font-size: 0 !important;
    line-height: 1 !important;
  }

  #expensesModal #expExportBtn.btn::before,
  #expensesModal #closeExpensesModalBtn.buttonclear::before {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  #expensesModal #expExportBtn.btn::before {
    content: "⇩" !important;
  }

  #expensesModal #closeExpensesModalBtn.buttonclear::before {
    content: "✕" !important;
    font-size: 0.92rem !important;
  }

  #expensesModal .exp-tabs {
    flex: 0 0 auto !important;
    gap: 0.28rem !important;
    margin: 0 !important;
    padding: 0.12rem 0 0.18rem !important;
  }

  #expensesModal .exp-tabs > button {
    min-height: 34px !important;
    padding: 0.34rem 0.58rem !important;
    font-size: 0.76rem !important;
  }

  #expensesModal[data-active-exp-tab="history"]
    > .modal
    > .modal-body.exp-modal-body {
    overflow: hidden !important;
    padding: 0.34rem !important;
    gap: 0.28rem !important;
  }

  #expensesModal
    #expensesHistoryModal.exp-history-embedded
    > .modal.exp-hist-modal {
    padding: 0.3rem !important;
    gap: 0.28rem !important;
    border-radius: 10px !important;
  }

  #expensesModal #expensesHistoryModal .exp-hist-head {
    position: static !important;
    min-height: 32px !important;
    padding: 0.2rem 0.3rem !important;
    gap: 0.25rem !important;
  }

  #expensesModal #expensesHistoryModal .exp-hist-title strong {
    font-size: 0.78rem !important;
  }

  #expensesModal #expensesHistoryModal #ehRefreshBtn {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
  }

  #expensesModal #expensesHistoryModal #closeExpensesHistoryBtn {
    display: none !important;
  }

  #expensesModal #expensesHistoryModal .exp-hist-toolbar {
    width: 100% !important;
    margin: 0 !important;
    padding: 0.3rem !important;
  }

  #expensesModal #expensesHistoryModal .exp-hist-toolbar #ehSearch,
  #expensesModal #expensesHistoryModal .exp-hist-toolbar #ehStatusFilter {
    height: 34px !important;
    min-height: 34px !important;
  }

  #expensesModal
    #expensesHistoryModal
    .exp-hist-toolbar
    .eh-filter-control--reset {
    grid-column: 1 / -1 !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-control--reset button {
    min-height: 34px !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary {
    margin: 0 !important;
    padding: 0.2rem 0.24rem !important;
    overflow: hidden !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary-main {
    display: none !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary-chips {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.2rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary-chips::-webkit-scrollbar {
    display: none !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary-chips span {
    flex: 0 0 auto !important;
    min-height: 22px !important;
    padding: 0.1rem 0.3rem !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
  }

  #expensesModal #expensesHistoryModal .exp-hist-body {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    gap: 0.24rem !important;
    overflow: hidden !important;
  }

  #expensesModal #expensesHistoryModal .exp-hist-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding-bottom: max(0.3rem, env(safe-area-inset-bottom)) !important;
  }

  #expensesModal #expensesHistoryModal #ehList.eh-list {
    padding: 0.38rem !important;
    gap: 0.36rem !important;
  }

  #expensesModal #expensesHistoryModal .eh-empty-state {
    min-height: 145px !important;
    padding: 0.8rem !important;
    gap: 0.4rem !important;
  }

  #expensesModal #expensesHistoryModal .eh-group-summary,
  #expensesModal #expensesHistoryModal .eh-item {
    padding-block: 0.48rem !important;
  }

  #expensesModal #expensesHistoryModal .exp-hist-view {
    flex: 0 0 auto !important;
    max-height: none !important;
  }

  #expensesModal #expensesHistoryModal .exp-hist-viewbar {
    padding: 0.24rem !important;
    padding-bottom: calc(0.24rem + env(safe-area-inset-bottom)) !important;
    gap: 0.22rem !important;
  }

  #expensesModal #expensesHistoryModal .eh-meta {
    padding: 0.22rem 0.34rem !important;
    font-size: 0.66rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #expensesModal #expensesHistoryModal .eh-actions {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 0.2rem !important;
  }

  #expensesModal #expensesHistoryModal .eh-status {
    grid-column: 1 / -1 !important;
    min-height: 30px !important;
    padding: 0.16rem 0.3rem !important;
    gap: 0.28rem !important;
  }

  #expensesModal #expensesHistoryModal .eh-status select {
    height: 28px !important;
    min-height: 28px !important;
    font-size: 0.74rem !important;
  }

  #expensesModal #expensesHistoryModal .eh-actions > button {
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    overflow: hidden !important;
  }

  #expensesModal #expensesHistoryModal .eh-actions > button::before {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  #expensesModal #expensesHistoryModal #ehEditBtn::before {
    content: "✎" !important;
  }

  #expensesModal #expensesHistoryModal #ehDeleteBtn::before {
    content: "⌫" !important;
  }

  #expensesModal #expensesHistoryModal #ehPrintBtn::before {
    content: "⇩" !important;
  }

  #expensesModal #expensesHistoryModal #ehPrintReportBtn::before {
    content: "▣" !important;
  }

  #expensesModal #expensesHistoryModal #ehCsvBtn::before {
    content: "⇩" !important;
    font-size: 1rem !important;
  }

  #expensesModal #expensesHistoryModal #ehFullscreenBtn::before {
    content: "⛶" !important;
  }
}


@media (max-width: 900px) {
  #expensesModal[data-active-exp-tab="history"]
    > .modal
    > .modal-body.exp-modal-body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    align-content: flex-start !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #expensesModal #expensesHistoryModal.exp-history-embedded:not([hidden]) {
    display: block !important;
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #expensesModal
    #expensesHistoryModal.exp-history-embedded
    > .modal.exp-hist-modal {
    display: flex !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #expensesModal #expensesHistoryModal .exp-hist-body {
    display: flex !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #expensesModal #expensesHistoryModal .exp-hist-list {
    display: block !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #expensesModal #expensesHistoryModal .exp-hist-view {
    display: block !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #expensesModal #expensesHistoryModal .exp-hist-viewbar {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    margin: 0.3rem 0 0 !important;
    padding: 0.42rem !important;
    box-sizing: border-box !important;
  }

  #expensesModal #expensesHistoryModal #ehPreview.eh-preview {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
  }

  #expensesModal #expensesHistoryModal .eh-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.36rem !important;
  }

  #expensesModal #expensesHistoryModal .eh-actions > button {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 42px !important;
    padding: 0.46rem 0.38rem !important;
    font-size: 0.7rem !important;
    font-weight: 880 !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #expensesModal #expensesHistoryModal .eh-actions > button::before {
    display: none !important;
    content: none !important;
  }

  #expensesModal #expensesHistoryModal .eh-status {
    grid-column: 1 / -1 !important;
  }
}
/* ===== P17.28 · Historial compacto, sin justificante y resumen plegable ===== */
#expensesModal .exp-history-header-actions {
  display: none !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 0.38rem !important;
}

#expensesModal[data-active-exp-tab="history"] .exp-history-header-actions {
  display: flex !important;
}

#expensesModal .exp-history-header-actions > button {
  width: auto !important;
  min-width: 0 !important;
  min-height: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0.36rem 0.68rem !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  font-size: 0.76rem !important;
  line-height: 1 !important;
}

#expensesModal #expensesHistoryModal .exp-hist-head {
  display: none !important;
}

#expensesModal #expensesHistoryModal .eh-filter-summary {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#expensesModal #expensesHistoryModal .eh-filter-summary-details {
  width: 100% !important;
  margin: 0 !important;
}

#expensesModal #expensesHistoryModal .eh-filter-summary-toggle {
  min-height: 36px !important;
  padding: 0.42rem 0.62rem !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.65rem !important;
  cursor: pointer !important;
  list-style: none !important;
  color: #f8fafc !important;
}

#expensesModal #expensesHistoryModal .eh-filter-summary-toggle::-webkit-details-marker {
  display: none !important;
}

#expensesModal #expensesHistoryModal .eh-filter-summary-toggle::after {
  content: "▾" !important;
  flex: 0 0 auto !important;
  color: #7dd3fc !important;
  transform: rotate(-90deg) !important;
  transition: transform 150ms ease !important;
}

#expensesModal
  #expensesHistoryModal
  .eh-filter-summary-details[open]
  > .eh-filter-summary-toggle::after {
  transform: rotate(0deg) !important;
}

#expensesModal #expensesHistoryModal .eh-filter-summary-toggle > strong {
  font-size: 0.78rem !important;
  font-weight: 900 !important;
}

#expensesModal #expensesHistoryModal .eh-filter-summary-toggle > span {
  min-width: 0 !important;
  margin-left: auto !important;
  color: #cbd5e1 !important;
  font-size: 0.7rem !important;
  font-weight: 760 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#expensesModal #expensesHistoryModal .eh-filter-summary-content {
  padding: 0 0.58rem 0.52rem !important;
  display: grid !important;
  gap: 0.36rem !important;
}

@media (min-width: 901px) {
  #expensesModal .exp-history-header-actions #ehToggleSearchBtn {
    display: none !important;
  }

  #expensesModal[data-active-exp-tab="history"]
    > .modal
    > .modal-header {
    grid-template-columns:
      minmax(180px, 1fr)
      minmax(170px, auto)
      auto
      54px
      auto
      auto !important;
  }

  #expensesModal #expensesHistoryModal .exp-hist-toolbar {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 0.48rem !important;
    padding: 0.52rem !important;
  }

  #expensesModal #expensesHistoryModal .exp-hist-toolbar #ehSearch {
    flex: 1.45 1 270px !important;
    width: auto !important;
    min-width: 230px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding-block: 0.3rem !important;
  }

  #expensesModal
    #expensesHistoryModal
    .exp-hist-toolbar
    .eh-filter-control {
    flex: 1 1 145px !important;
    width: auto !important;
    min-width: 125px !important;
    max-width: none !important;
  }

  #expensesModal
    #expensesHistoryModal
    .exp-hist-toolbar
    .eh-filter-control
    :is(select, input),
  #expensesModal #expensesHistoryModal .exp-hist-toolbar #ehStatusFilter,
  #expensesModal
    #expensesHistoryModal
    .exp-hist-toolbar
    .eh-filter-control--reset
    button {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }

  #expensesModal
    #expensesHistoryModal
    .exp-hist-toolbar
    .eh-filter-control--reset {
    flex: 0.8 1 135px !important;
  }

  #expensesModal
    #expensesHistoryModal
    .exp-hist-toolbar
    .eh-filter-control--apply {
    display: none !important;
  }
}

@media (max-width: 900px) {
  #expensesModal[data-active-exp-tab="history"]
    > .modal
    > .modal-header {
    grid-template-columns: minmax(0, 1fr) 36px !important;
    grid-template-areas: "history close" !important;
  }

  #expensesModal[data-active-exp-tab="history"] #expensesModalTitle,
  #expensesModal[data-active-exp-tab="history"] #expCloudStatus,
  #expensesModal[data-active-exp-tab="history"] #openExpensesStatsBtn,
  #expensesModal[data-active-exp-tab="history"] #expExportBtn {
    display: none !important;
  }

  #expensesModal[data-active-exp-tab="history"] .exp-history-header-actions {
    grid-area: history !important;
    width: 100% !important;
    gap: 0.24rem !important;
  }

  #expensesModal[data-active-exp-tab="history"]
    .exp-history-header-actions
    #ehToggleSearchBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #expensesModal[data-active-exp-tab="history"]
    .exp-history-header-actions
    > button {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0.3rem 0.46rem !important;
    font-size: 0.66rem !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary-toggle {
    min-height: 34px !important;
    padding: 0.34rem 0.46rem !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary-content {
    padding: 0 0.24rem 0.24rem !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary-main {
    display: block !important;
  }
}

@media (min-width: 901px) and (max-width: 1199.98px) {
  #expensesModal[data-active-exp-tab="history"]
    > .modal
    > .modal-header {
    grid-template-columns: minmax(140px, 1fr) auto 50px auto auto !important;
  }

  #expensesModal[data-active-exp-tab="history"] #expCloudStatus {
    display: none !important;
  }
}

/* ===== P17.29 · Densidad real en PC + final alcanzable en móvil ===== */
@media (min-width: 901px) {
  /* En PC el resumen es una barra informativa siempre visible. El details se
     conserva para móvil, pero aquí no se comporta como acordeón. */
  #expensesModal #expensesHistoryModal .eh-filter-summary {
    min-height: 42px !important;
    max-height: 46px !important;
    overflow: hidden !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary-details {
    min-width: 0 !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary-toggle {
    flex: 0 0 auto !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0.22rem 0 0.22rem 0.5rem !important;
    gap: 0 !important;
    cursor: default !important;
    pointer-events: none !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary-toggle::after,
  #expensesModal #expensesHistoryModal .eh-filter-summary-toggle > span {
    display: none !important;
    content: none !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 30px !important;
    padding: 0 0.45rem 0 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary-main {
    display: none !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary-chips {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 30px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.22rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary-chips span {
    flex: 0 0 auto !important;
    min-height: 21px !important;
    height: 21px !important;
    padding: 0.08rem 0.34rem !important;
    font-size: 0.62rem !important;
    gap: 0.16rem !important;
  }

  /* Barra de documento y acciones: una sola línea y controles compactos. */
  #expensesModal #expensesHistoryModal .exp-hist-viewbar {
    min-height: 44px !important;
    padding: 0.32rem 0.42rem !important;
    display: grid !important;
    grid-template-columns: minmax(170px, 1fr) auto !important;
    align-items: center !important;
    gap: 0.4rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  #expensesModal #expensesHistoryModal .eh-meta {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0.3rem 0.48rem !important;
    font-size: 0.7rem !important;
    line-height: 1 !important;
  }

  #expensesModal #expensesHistoryModal .eh-actions {
    width: max-content !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.3rem !important;
  }

  #expensesModal #expensesHistoryModal .eh-status {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0.18rem 0.3rem !important;
    grid-template-columns: auto 108px !important;
    gap: 0.3rem !important;
    border-radius: 9px !important;
  }

  #expensesModal #expensesHistoryModal .eh-status .muted {
    font-size: 0.68rem !important;
  }

  #expensesModal #expensesHistoryModal .eh-status select {
    width: 108px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 0.42rem !important;
    font-size: 0.7rem !important;
    border-radius: 7px !important;
  }

  #expensesModal #expensesHistoryModal .eh-actions > button {
    width: auto !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 0.55rem !important;
    border-radius: 9px !important;
    font-size: 0.7rem !important;
    line-height: 1 !important;
  }
}

@media (max-width: 900px) {
  /* Algunos WebView incluyen la barra de navegación Android dentro del área
     visual. Este espacio final permite subir completamente la última fila. */
  #expensesModal[data-active-exp-tab="history"]
    > .modal
    > .modal-body.exp-modal-body {
    scroll-padding-bottom: calc(7rem + env(safe-area-inset-bottom)) !important;
  }

  #expensesModal #expensesHistoryModal .exp-hist-viewbar {
    margin-bottom: calc(7rem + env(safe-area-inset-bottom)) !important;
  }
}
/* ===== P17.31 · Resumen PC: título y datos contiguos ===== */
@media (min-width: 901px) {
  #expensesModal #expensesHistoryModal .eh-filter-summary-details {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 128px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0.28rem !important;
    grid-auto-flow: row;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary-toggle {
    grid-column: 1 !important;
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
    margin: 0 !important;
    padding: 0.2rem 0 0.2rem 0.48rem !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary-content {
    grid-column: 2 !important;
    width: 98% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 0.38rem 0 0 !important;
    justify-self: stretch !important;
    overflow: hidden !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary-chips {
    width: 98% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: space-between !important;
    gap: 0.14rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary-chips span {
    min-height: 20px !important;
    height: 20px !important;
    padding: 0.06rem 1.05rem !important;
    font-size: 0.66rem !important;
    gap: 0.42rem !important;
  }
}

/* ===== P17.33 · Altura intrínseca: chip + scrollbar sin cálculos rígidos ===== */
@media (min-width: 901px) {
  #expensesModal #expensesHistoryModal .eh-filter-summary {
    height: auto !important;
    min-height: 42px !important;
    max-height: none !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary-details {
    height: auto !important;
    min-height: 40px !important;
    max-height: none !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary-toggle {
    align-self: center !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary-content {
    height: auto !important;
    min-height: 40px !important;
    max-height: none !important;
    overflow: visible !important;
    align-self: stretch !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary-chips {
    height: auto !important;
    min-height: 40px !important;
    max-height: none !important;
    padding: 4px 0 9px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(226, 232, 240, 0.78) rgba(15, 23, 42, 0.7) !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary-chips span {
    height: auto !important;
    min-height: 24px !important;
    max-height: none !important;
    padding-top: 0.14rem !important;
    padding-bottom: 0.14rem !important;
    box-sizing: border-box !important;
    line-height: 1.1 !important;
  }

  #expensesModal
    #expensesHistoryModal
    .eh-filter-summary-chips::-webkit-scrollbar {
    display: block !important;
    height: 6px !important;
  }

  #expensesModal
    #expensesHistoryModal
    .eh-filter-summary-chips::-webkit-scrollbar-track {
    border-radius: 999px !important;
    background: rgba(15, 23, 42, 0.7) !important;
  }

  #expensesModal
    #expensesHistoryModal
    .eh-filter-summary-chips::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: rgba(226, 232, 240, 0.78) !important;
  }
}

/* ===== P17.34 · Scroll horizontal garantizado dentro del ancho disponible ===== */
@media (min-width: 901px) {
  #expensesModal #expensesHistoryModal .eh-filter-summary-content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary-chips {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary-chips > span {
    flex: 0 0 auto !important;
  }
}

/* ===== P17.35 · Carriles horizontales reales: resumen + acciones =====
   P17.34 limitaba el ancho del flex-item, pero mantenía dos recortes externos:
   el resumen heredaba overflow:hidden y la barra de acciones desplazaba el
   viewbar completo. Cada colección tiene ahora su propio carril desplazable. */
@media (min-width: 901px) {
  #expensesModal #expensesHistoryModal .eh-filter-summary {
    height: auto !important;
    min-height: 46px !important;
    max-height: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary-details {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 46px !important;
    max-height: none !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 128px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0.28rem !important;
    overflow: visible !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary-content {
    grid-column: 2 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 0.38rem 0 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    overflow: visible !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary-chips {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 4px 0 10px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex: none !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.14rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(226, 232, 240, 0.78) rgba(15, 23, 42, 0.7) !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #expensesModal #expensesHistoryModal .eh-filter-summary-chips > span {
    flex: 0 0 auto !important;
  }

  #expensesModal #expensesHistoryModal .exp-hist-viewbar {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 54px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(120px, 0.55fr) minmax(0, 1.45fr) !important;
    align-items: center !important;
    gap: 0.4rem !important;
    overflow: visible !important;
  }

  #expensesModal #expensesHistoryModal .eh-actions {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 3px 0 10px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.3rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(226, 232, 240, 0.78) rgba(15, 23, 42, 0.7) !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #expensesModal #expensesHistoryModal .eh-actions > * {
    flex: 0 0 auto !important;
  }

  #expensesModal #expensesHistoryModal .eh-actions::-webkit-scrollbar {
    display: block !important;
    height: 6px !important;
  }

  #expensesModal #expensesHistoryModal .eh-actions::-webkit-scrollbar-track {
    border-radius: 999px !important;
    background: rgba(15, 23, 42, 0.7) !important;
  }

  #expensesModal #expensesHistoryModal .eh-actions::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: rgba(226, 232, 240, 0.78) !important;
  }
}

/* ===== P17.39 · G6 accesibilidad de pestañas y selección de gastos ===== */
#expensesModal .exp-tabs > [role="tab"]:focus-visible {
  outline: none !important;
  box-shadow:
    inset 0 0 0 2px #7dd3fc,
    inset 0 0 0 4px rgba(15, 23, 42, 0.92) !important;
}

#expensesModal #expensesHistoryModal .eh-item-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transform: none !important;
}

#expensesModal #expensesHistoryModal .eh-item-select .eh-item-title {
  width: 100% !important;
  min-width: 0 !important;
  display: block !important;
}

#expensesModal #expensesHistoryModal .eh-item-select:focus-visible {
  outline: 2px solid #7dd3fc !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.2) !important;
}

@media (prefers-reduced-motion: reduce) {
  #expensesModal #expensesHistoryModal .eh-filter-summary-toggle::after {
    transition: none !important;
  }
}

/* =========================================================
   RESP1.3 · Expenses History Embedded · targets touch
   La capa RESP1.2A de Gastos ya define 44px hasta 979.98,
   pero las reglas legacy de este submódulo se cargan después
   y vuelven a fijar 34/38px con !important. Esta capa final
   restaura el contrato táctil sin alterar la rama funcional
   900/901 ni la densidad desktop >=980.
   ========================================================= */
@media (max-width: 979.98px) {
  #expensesModal[data-active-exp-tab="history"]
    .exp-history-header-actions
    > button {
    min-height: 44px !important;
    box-sizing: border-box !important;
  }

  #expensesModal #expensesHistoryModal .exp-hist-toolbar :is(input, select, button) {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    box-sizing: border-box !important;
  }

  /* RESP1.3 follow-up: los legacy #ehSearch/#ehStatusFilter y
     .eh-filter-control usan selectores mas especificos con !important.
     Repetimos los IDs del toolbar para que la capa final gane de forma
     determinista sin tocar la logica 900/901. */
  #expensesModal #expensesHistoryModal .exp-hist-toolbar #ehSearch,
  #expensesModal #expensesHistoryModal .exp-hist-toolbar #ehStatusFilter,
  #expensesModal #expensesHistoryModal .exp-hist-toolbar #ehSupplierFilter,
  #expensesModal #expensesHistoryModal .exp-hist-toolbar #ehPeriodModeFilter,
  #expensesModal #expensesHistoryModal .exp-hist-toolbar #ehDateCriterionFilter,
  #expensesModal #expensesHistoryModal .exp-hist-toolbar #ehResetFiltersBtn,
  #expensesModal #expensesHistoryModal .exp-hist-toolbar #ehApplySearchBtn {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 900px) {
  #expensesModal #expensesHistoryModal .eh-filter-summary-toggle {
    min-height: 44px !important;
    box-sizing: border-box !important;
  }
}

/* =========================================================
   RESP1.3 · Expenses History Embedded · ítem real touch
   Mantiene compactación visual: solo eleva el área interactiva
   necesaria hasta 44px en el rango touch global <=979.98.
   No modifica la rama funcional 900/901 ni desktop >=980.
   ========================================================= */
@media (max-width: 979.98px) {
  #expensesModal #expensesHistoryModal .eh-item-select {
    min-height: 44px !important;
    box-sizing: border-box !important;
  }

  #expensesModal #expensesHistoryModal .eh-status {
    height: auto !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }

  #expensesModal #expensesHistoryModal #ehDocStatus {
    height: 44px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }

  #expensesModal #expensesHistoryModal .eh-actions > button {
    height: auto !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }
}