/* ======================================================================
   RESP1.7B · Historial · remate visual validado en runtime
   - ≤768px: evita clipping del botón "Facturas".
   - 769–979px: acciones a ancho completo; botón de orden hasta el borde.
   - ≥980px sin pointer:fine: layout fallback tablet grande / touch laptop.
   - ≥980px con pointer:fine: áreas nombradas sin redefinir columnas
     (grid-template-columns la gestiona frontend-pending-p12.css).
   ====================================================================== */

/* ── Mobile ≤768px ──────────────────────────────────────────────────────── */
@media (max-width: 768.98px) {
  #fullHistoryModal #toggleHistoryFiltersBtn.hib {
    grid-column: -3 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-inline: 10px !important;
    box-sizing: border-box !important;
  }
}

/* ── Tablet 769–979px: botón de orden hasta el borde derecho ───────────── */
/*    En este rango .history-header-actions es flex-row y las dos sub-filas
    van una al lado de la otra. Se disuelven con display:contents y se
    coloca un grid de 3 columnas directamente sobre los botones.           */
@media (min-width: 769px) and (max-width: 979.98px) {
  #fullHistoryModal .history-header-actions {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 42px 42px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
  }

  /* Las dos filas se disuelven: sus hijos pasan directo al grid */
  #fullHistoryModal .history-header-actions-row,
  #fullHistoryModal .history-header-actions-row-top,
  #fullHistoryModal .history-header-actions-row-bottom {
    display: contents !important;
  }

  /* El botón de filtros es control exclusivo móvil; se oculta aquí */
  #fullHistoryModal #toggleHistoryFiltersBtn.hib {
    display: none !important;
  }

  /* Colocación explícita de los tres botones visibles */
  #fullHistoryModal #openStatsHistoryBtn {
    grid-column: 1 !important;
  }

  #fullHistoryModal #history-refresh-btn {
    grid-column: 2 !important;
  }

  #fullHistoryModal .history-sort-date-btn {
    grid-column: 3 !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ── Tablet grande / touch laptop (≥980px sin ratón fino) ──────────────── */
/*    97-desktop.css usa (hover:hover)+(pointer:fine) y no aplica aquí.
    Sin este bloque las filas de acciones quedan sin display definido
    y se montan en una sola línea desordenada.                             */
@media (min-width: 980px) and (not (pointer: fine)) {
  #fullHistoryModal .modal-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 46px !important;
    grid-template-areas:
      "title close"
      "actions actions" !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
    align-items: center !important;
  }

  #fullHistoryModal .cabecera {
    display: contents !important;
  }

  #fullHistoryModalTitle {
    grid-area: title !important;
    margin: 0 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #fullHistoryModal #closeFullHistoryBtn.buttonclear {
    grid-area: close !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
  }

  #fullHistoryModal .history-header-actions {
    grid-area: actions !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 9px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 52px 52px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  /* Las dos filas se disuelven: sus hijos pasan directo al grid de acciones */
  #fullHistoryModal .history-header-actions-row,
  #fullHistoryModal .history-header-actions-row-top,
  #fullHistoryModal .history-header-actions-row-bottom {
    display: contents !important;
  }

  #fullHistoryModal #toggleHistoryFiltersBtn.hib {
    grid-column: 3 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* ── Desktop con ratón, 980–1199px: 4 áreas nombradas ──────────────────── */
/*    grid-template-columns la define frontend-pending-p12.css (carga antes).
    Aquí sólo se añaden las áreas y los grid-area para resolver el
    solapamiento entre el toggle y .history-header-actions.               */
@media
  (min-width: 980px) and
  (max-width: 1199.98px) and
  (hover: hover) and
  (pointer: fine) {
  #fullHistoryModal .modal-header {
    grid-template-rows: auto !important;
    grid-template-areas: "title toggle actions close" !important;
  }

  #fullHistoryModalTitle {
    grid-area: title !important;
  }

  #fullHistoryModal #toggleHistorySearchDesktopBtn {
    grid-area: toggle !important;
  }

  #fullHistoryModal .history-header-actions {
    grid-area: actions !important;
  }

  #fullHistoryModal #closeFullHistoryBtn.buttonclear {
    grid-area: close !important;
  }
}

/* ── Desktop con ratón, ≥1200px: mismas 4 áreas, columnas más amplias ──── */
/*    Ídem: grid-template-columns la gestiona frontend-pending-p12.css.    */
@media
  (min-width: 1200px) and
  (hover: hover) and
  (pointer: fine) {
  #fullHistoryModal .modal-header {
    grid-template-rows: auto !important;
    grid-template-areas: "title toggle actions close" !important;
  }

  #fullHistoryModalTitle {
    grid-area: title !important;
  }

  #fullHistoryModal #toggleHistorySearchDesktopBtn {
    grid-area: toggle !important;
  }

  #fullHistoryModal .history-header-actions {
    grid-area: actions !important;
  }

  #fullHistoryModal #closeFullHistoryBtn.buttonclear {
    grid-area: close !important;
  }
}